@charset "utf-8";
.pcbr{display:none;}
.ptbr{display:none;}
.tbbr{display:none;}
.tmbr{display: block;}
.mbbr{display:block;}
.dn{display:none;}

.pctb{display:none;}
.mb{display:block;}
.pc_view{display: none;}





.innerwrap{
	width: 92%;
	max-width: 1600px;
	margin: 0 auto;
}


.secWrap{
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.secWrap .sec_tit{flex-shrink: 1; width: 100%;}
.secWrap .more_btn{flex-shrink: 0;}
.sec_tit{position: relative;}
.sec_tit h2{
	font-size: 16px;
	font-weight: 600;
	color: #35424c;
}

.sec_tit h3{
	font-family: "Shippori Mincho", serif;
	font-size: 32px;
	font-weight: 500;
	color: #35424c;
	line-height: 1.2em;
	margin-top: 20px;
}
.sec_tit h4{
	font-size: 21px;
	font-weight: 600;
	color: #35424c;
	margin-top: 20px;
}

.sec_tit p{
	font-size: 15px;
	line-height: 1.6em;
	color: #666666;
	margin-top: 20px;
}
.sec_tit .more_btn{
	margin-top:20px;
}

.sec_tit.wh h2{color: #fff;}
.sec_tit.wh h3{color: #fff;}
.sec_tit.wh p{color: #fff;}

.secWrap .right{width: 100%;}
.secWrap .right p{
	font-size: 15px;
	line-height: 1.6em;
	color: #666666;
	margin-top: 20px;
}




.more_btn{
	position: relative;
	display: inline-flex;
	align-items: center;
	padding:20px 40px 20px 0;
	margin-top: 20px;
}
.more_btn span{
	position: relative;
	z-index: 1;
	font-size: 11px;
	font-weight: 600;
	color: #000;
}
.more_btn i{
	position: relative;
	z-index: 1;
	display: block;
	width: 9px;
	height: 9px;
	background: url(/images/main/more_btn_arr.png) no-repeat center / contain;
	transition: all 0.3s;
	margin-left: 7px;
}
.more_btn:hover i{
	transform: translateX(3px);
}
.more_btn.wh{
}
.more_btn.wh span{
	color: #fff;
}
.more_btn.wh i{
	background: url(/images/main/more_btn_arr_wh.png) no-repeat center / contain;
}
.more_btn.bl span{
	color: #444;
}


.more_btn.bl{
	/* background: rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(5px); */
	border: 1px solid #222;
}


.sec1{
	padding: 180px 0 0;
}
.sec1 .txtwrap{
	width: 92%;
	max-width: 1600px;
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	opacity: 1;
	transform: translateY(0);
	filter: blur(0px);
}
.sec1 .txtwrap.in-view{
	opacity: 1;
	transform: translateY(0);
	filter: blur(0);
	transition: all 1.4s 0s;
}
.sec1 .txtwrap h2 {
  position: relative;
	display: inline-block;
  text-align: center;
}
@keyframes fillText {
  0% {
    background-position: right;
  }
  100% {
    background-position: left;
  }
}

.sec1 .txtwrap h2 > span{
	display: block;
	font-family: "KoPubWorld Batang";
	font-size: 40px;
	font-weight: 300;
	line-height: 1.2em;
	color: #35424c;
	/* background: linear-gradient(to left, #888888 50%, #000000 50%);
	background-size: 200% 100%;
	background-position: left;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent; */
	
}
.sec1 .txtwrap h2.delay0 > span{
	/*
	animation: fillText 2.5s linear forwards;
	animation-delay: 1.6s;
	animation-fill-mode: backwards;
	*/
}

.sec1 .txtwrap h2.delay1 > span{
	/*
	animation: fillText 1.9s linear forwards;
	animation-delay: 4.1s;
	animation-fill-mode: backwards;
	*/
}

.sec1 .txtwrap .main_icon{
	position: absolute;
	left: 50%;
	bottom: 110%;
	transform: translateX(-50%);
}
.sec1 .txtwrap .main_icon img{
	transform: scale(0.7);
	transform-origin: center;
}

.sec1 .visualWrap{
	width: 100%;
	height: 100vh;
	transform: translateY(-40px);
}
.sec1 .visual{
	position:relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.sec1 .visual .swiper-slide .txts{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	z-index: 10;
	text-align: center;
	display: flex;
	flex-direction: column;
	z-index: 1;
}
.sec1 .visual .swiper-slide .txts h2{
	display: inline-block;
	font-family: "Shippori Mincho", serif;
	font-size: 30px;
	font-weight: 500;
	color: #fff;
	filter: blur(4px);
	opacity: 0;
}
.sec1 .visual .swiper-slide .txts p{
	display: inline-block;
	font-size: 14px;
	color: #fff;
	margin-top: 10px;
	filter: blur(4px);
	opacity: 0;
}
@keyframes fade-in {
  100% {
    opacity: 1;
    filter: blur(0);
  }
}
.sec1 .visual.on .swiper-slide-active .txts h2 {
  animation: fade-in 1s 0.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.sec1 .visual.on .swiper-slide-active .txts p {
  animation: fade-in 1s 0.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.sec1 .visual .swiper-slide .txts.animate h2{
  animation: fade-in 1s 0.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.sec1 .visual .swiper-slide .txts.animate p{
  animation: fade-in 1s 0.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.sec1 .visual .swiper-wrapper{width:100%;height:100%;}
.sec1 .visual .swiper-slide{
	position:relative;
	width:100%; height:100%;
	flex-shrink: 0;
	overflow: hidden;
}
.sec1 .visual .swiper-slide .bg{
	position:absolute;left:0%;top:0%;z-index:-1;
	width:100%;height:100%;	
}




.sec1 .visual .ctr{
	width: 92%;
	position: absolute;
	left: 50%;
	bottom: 30px;
	transform: translateX(-50%);
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: all 0.3s;
}
.sec1 .visual.visible .ctr{
	opacity: 1;
}

.sec1 .visual .ctr .vprev{
	display: block;
	width: 13px;
	height: 23px;
	background: url(/images/main/vprev.png) no-repeat center / contain;
	z-index: 1;
	margin-right: 10px;
	cursor: pointer;
}
.sec1 .visual .ctr .vnext{
	display: block;
	width: 13px;
	height: 23px;
	background: url(/images/main/vnext.png) no-repeat center / contain;
	z-index: 1;
	margin-left: 10px;
	cursor: pointer;
}
.sec1 .visual .ctr .vpaging .swiper-pagination-bullet{
	position: relative;
	width: 10px;
	height: 10px;
	background: unset;
	border: 1px solid #fff;
	margin: 0 5px;
	opacity: 1;
	transition: all 0.4s;
}
.sec1 .visual .ctr .vpaging .swiper-pagination-bullet-active{
	border: 1px solid #399546;
}
.sec1 .visual .ctr .vpaging .swiper-pagination-bullet:after{
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(0);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #399546;
	z-index: -1;
	transition: all 0.4s;
}
.sec1 .visual .ctr .vpaging .swiper-pagination-bullet-active:after{
	transform: translate(-50%, -50%) scale(1);
}

.sec1 .visual .ctr #pause_play { /* added */
	z-index: 1000;
	width: 39px;
	height: 39px;
	overflow: hidden;
	text-indent: -9999px;
}
.sec1 .visual .ctr #pause_play.pause {
	background: url(/images/main/btn_pause.png) no-repeat center;
}
.sec1 .visual .ctr #pause_play.play {
	background: url(/images/main/btn_play.png) no-repeat center;
}






.pin-spacer{overflow-x: hidden !important; width: 100% !important;}

.sec2{
	padding: 100px 0;
	display: flex;
	align-items: center;
	overflow: hidden;
}
.sec2 .sec_tit p{
	font-size: 15px;
	margin-top: 30px;
}
.sec2 .conwrap{
	position: relative;
}
.sec2 .conwrap .icon{
	display: none;
}
.sec2 .conwrap .sec_tit{
	width: 100%;
	position: relative;
	z-index: 1;
}
.sec2 .conwrap .imgwrap{
	position: relative;
	z-index: 1;
	width: 100%;
	margin-top: 50px;
	width: 100%;
	border-radius: 10px;
	overflow: hidden;
}

.sec2 .conwrap .imgwrap img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}


.sec2 .conwrap .imgwrap video{
	display:none;
}












.sec3{
	padding: 0 0 120px; 
}
:root {
	--cards: 4;
	--cardHeight: 87vh;
	--cardTopPadding: 113px;
	--cardMargin: 370px;
}

#cards {
	list-style: none;
	padding-left: 0;
	display: flex;
	flex-direction: column;
	margin-top: 60px;
}
@media (min-width: 2100px){
	:root{--cardMargin: 100px;}
}

.card {
/* 	position: sticky;
	top: 0;
	padding-top: calc(var(--index) * var(--cardTopPadding)); */
}
#card1 {
	--index: 1;
}
#card2 {
	--index: 2;
}
#card3 {
	--index: 3;
}
#card4 {
	--index: 4;
}


.card-body {
	box-sizing: border-box;
	padding: 40px 0;
	/* height: var(--cardHeight); */
	display: flex;
	flex-direction: column;
	border-top: 1px dashed #000;
	background: #fff;
	transition: all 0.5s;
}
.card-body .left{
	flex-shrink: 0;
	display: flex;
}
.card-body .left h2{
	width: 100%;
	font-size: 14px;
	font-weight: 500;
	color: #35424c;
}
.card-body .left .img{
	width: 430px;
	height: 55vh;
	max-height: 500px;
	border-radius: 20px;
	overflow: hidden;
}
.card-body .left .img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.card-body .right{
	margin-top: 10px;
}
.card-body .right h3{
	font-size:24px;
	font-weight: 600;
	color: #303e48;
    margin-top:20px;
}
.card-body .right h4{
	font-size: 16px;
	font-weight: 600;
	color: #399137;
	margin-top: 50px;
}
.card-body .right p{
	font-size: 14px;
	line-height: 1.5em;
	color: #666;
	margin: 10px 0;
}
.card-body .right .img{
	width: 100%;
	height: 200px;
	border-radius: 10px;
	overflow: hidden;
	margin-top: 30px;
}
.card-body .right .img img,
.card-body .right .img video{
	width: 100%;
	height: 100%;
	object-fit: cover;
}


.sec4{
	position: relative;
	padding: 120px 0;
	background: url(/images/main/sec4_bg.jpg) no-repeat center / cover;
	overflow: hidden;
}
.sec4 .boxwrap{
	position: relative;
	z-index: 1;
	margin-top: 50px;
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}
.sec4 .boxwrap .box{
	overflow:hidden;
	position: relative;
	width: 100%;
	border-radius: 10px;
	background: #fff;
	box-sizing: border-box;
}
.sec4 .boxwrap .box{
    border-radius:10px 10px 0 0;
}
.sec4 .boxwrap .box.in-view {
    border-radius: 0 0 10px 10px;
    margin-bottom:15px;
}

.sec4 .boxwrap .box:nth-child(1){opacity: 0; display: none;}
.sec4 .boxwrap .box:nth-child(2){order: 1;}
.sec4 .boxwrap .box:nth-child(3){background: #399546;order: 2;}
.sec4 .boxwrap .box:nth-child(4){background: #00557b;order: 4;}
.sec4 .boxwrap .box:nth-child(5){order: 3;}
.sec4 .boxwrap .box:after{
	content: "";
	display: block;
	padding-bottom:65%;
}
.sec4 .boxwrap .box video{
	position:absolute;left:0;top:0;
	width:100%;height:100%;
	object-fit:cover;
}
.more_btn{
    padding:0;
}
.sec4 .boxwrap .box .inner{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 30px;
	box-sizing: border-box;
}
.sec4 .boxwrap .box .inner .tit{
	font-size: 20px;
	font-weight: 600;
	color: #fff;
}
.sec4 .boxwrap .box .inner .con h3{
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4em;
	color: #fff;
}
.sec4 .boxwrap .box .inner .con p{
	font-size: 14px;
	line-height: 1.6em;
	color: rgba(255,255,255,0.8);
	margin-top: 20px;
}
.sec4 .boxwrap .box .inner .con a span{
	font-family: "Open Sans";
	font-size: 12px;
}
.sec4 .boxwrap .box .inner .con a:hover i{
	transform: translateX(3px);
}




.sec5{
	padding: 120px 0;
	background: #37404a;
	overflow: hidden;
}
.sec5 ul{
	margin-top: 70px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.sec5 li{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width:49%;margin-bottom:2%;
	border-radius: 20px;
	transition: all 0.3s;
	box-sizing: border-box;
}
.sec5 li:after{
	content: "";
	display: block;
	padding-bottom: 130%;
}
.sec5 li > div{
	width: 100%;
	height: 100%;
	padding: 15px;
	box-sizing: border-box;
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.sec5 li .num{
	font-family: "pretendard", sans-serif;
	font-size: 18px;
	color: #fff;
}
.sec5 li .txts{/* margin-top:50px; */}
.sec5 li .txts .icon{
	display: block;
	height:30px;
	transition: all 0.3s;
}
.sec5 li:nth-child(1) .txts .icon{
	background: url(/images/main/sec5_icon1.png) no-repeat left center / contain;
	background-size:auto 30px;
}
.sec5 li:nth-child(2) .txts .icon{
	background: url(/images/main/sec5_icon2.png) no-repeat left center / contain;
	background-size:auto 30px;
}
.sec5 li:nth-child(3) .txts .icon{
	background: url(/images/main/sec5_icon3.png) no-repeat left center / contain;
	background-size:auto 30px;
}
.sec5 li:nth-child(4) .txts .icon{
	background: url(/images/main/sec5_icon4.png) no-repeat left center / contain;
	background-size:auto 30px;
}

.sec5 li .txts b{
	display: inline-block;
	font-size:16px;
	font-weight: 500;
	line-height: 1.6em;
	color: #fff;
	margin: 10px 0;
	transition: all 0.3s;
}
.sec5 li .txts p{
	font-size: 12px;
	line-height: 1.7em;
	color: rgba(255,255,255,0.6);
	transition: all 0.3s;
}

.sec5 li .svg1{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	opacity: 0;
}
.sec5 li .svg2{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	opacity: 0;
}

@keyframes stroke_ani {
    0% {stroke-dashoffset: 1206;}
    100% {stroke-dashoffset: 0;}
}
.sec5 .innerwrap.in-view li .svg1 path{
	animation:stroke_ani 2s ease-in forwards; -webkit-animation:stroke_ani 1.6s ease-in forwards;
	stroke-dasharray:1206;
	stroke-dashoffset:1206;
	animation-delay:0.5s;
}
.sec5 .innerwrap.in-view li .svg2 path{
	animation:stroke_ani 2s ease-in forwards; -webkit-animation:stroke_ani 1.6s ease-in forwards;
	stroke-dasharray:1206;
	stroke-dashoffset:1206;
	animation-delay:0.5s;
}

.sec5 .innerwrap.in-view li .svg1{opacity: 1;}
.sec5 .innerwrap.in-view li .svg2{opacity: 1;}


.sec6{
	position:relative;
	padding: 120px 0 300px;
	background: url(/images/main/sec6_bg_m.png) no-repeat center bottom / cover;
}
.sec6 .bg{
	position:absolute;left:0;bottom:0;
	width:100%;height:100%;
}
.sec6 .bg video{width:100%;height:100%;object-fit:cover;}
.sec6 .conwrap{
	margin-top: 120px;
	display: flex;
	flex-direction: column;
	row-gap: 50px;
}
.sec6 .conwrap .con{
	position: relative;z-index:10;
	display: flex;
	flex-direction: column;
	align-content: flex-start;
	align-items: flex-start;
    max-width:70%;
}

.sec6 .conwrap .con.con2 {
    margin-left:auto;
}



.sec6 .conwrap .con .num{
	font-family: "pretendard", sans-serif;
	font-size: 16px;
	color: #35424c;
	margin-bottom: 25px;
	order: 1;
}
.sec6 .conwrap .con .cate{
	display: flex;
	font-family: "Shippori Mincho", serif;
	font-size: 30px;
	font-weight: 500;
	color: #35424c;
	padding-bottom: 20px;
	border-bottom: 1px solid #aaa;
	order: 2;
}
.sec6 .conwrap .con p{
	font-size: 16px;
	line-height: 1.7em;
	margin: 25px 0;
	color: #333;
	order: 3;
}
.sec6 .conwrap .con a{
	order: 4;
	margin-top: 0;
}
.sec6 .conwrap .con .img{
	overflow:hidden;
	position:relative;
	order: 5;
	margin-top: 30px;
	width: 100%;
	height:22vh;
	border-radius:10px;
}
.sec6 .conwrap .con:nth-child(1) .img{
	background:url(/images/main/sec6_con1_img_m.png) no-repeat center top;
	background-size:cover;
}
.sec6 .conwrap .con:nth-child(2) .img{
	background:url(/images/main/sec6_con2_img_m.png) no-repeat center top;
	background-size:cover;
}
.sec6 .conwrap .con:nth-child(3) .img{
	background:url(/images/main/sec6_con3_img_m.png) no-repeat center top;
	background-size:cover;
}
.sec6 .conwrap .con .img img{
	display:none;
	width:100%;height:100%;object-fit:cover;
	position:absolute;left:50%;top:0;
	transform:translate(-50%,0);
}


.sec7{
	position: relative;
	height: 840px;
	overflow: hidden;
}
.sec7 > .bg{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(/images/main/sec7_bg_m.jpg) no-repeat center / cover;
}
.sec7 .banner{
	position: absolute;
	left: 0;
	bottom: 60px;
	width: 90%;
	height: 370px;
	border-radius: 0 270px 270px 0;
	padding: 0 0 0 4%;
	overflow: hidden;
	display: flex;
	align-items: center;
}
.sec7 .banner .bg{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg,rgba(55, 141, 55, 1) 0%, rgba(30, 61, 59, 1) 100%);
	opacity: 0.9;
}
.sec7 .banner .icon{
	position: absolute;
	left: 160px;
	bottom: 63px;
	z-index: 1;
}
.sec7 .banner .icon img{
	width: 120px;
}


.sec7{
	position: relative;
	padding: 120px 0 0;
	overflow: hidden;
}
.sec7 .sec7Swiper{
	margin-top: 40px;
	padding-bottom: 50px;
}
.sec7 .sec7Swiper .swiper-slide{
	width: 320px;
}
.sec7 .sec7Swiper .swiper-slide a{
	position: relative;
	display: block;
	width: 100%;
	transition: all 0.3s;
}
.sec7 .sec7Swiper .swiper-slide a .thumb{
	width: 100%;
	border-radius: 10px;
	max-height:260px;aspect-ratio:370/260;
	overflow: hidden;
}
.sec7 .sec7Swiper .swiper-slide a .thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sec7 .sec7Swiper .swiper-slide a .txts{
	margin-top: 30px;
}
.sec7 .sec7Swiper .swiper-slide a .txts .tit{
	font-size: 18px;
	font-weight: 600;
	color: #2f3842;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sec7 .sec7Swiper .swiper-slide a .txts .con{
	font-size: 15px;
	color: #666666;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-height: 1.5em;
	height: 3em;
	margin: 15px 0;
}
.sec7 .sec7Swiper .swiper-slide a .txts .date{
	font-size: 13px;
	color: #666;
}
.sec7 .sec7Swiper .swiper-scrollbar{
	display:block !important;
	width:100%;height:1px;
	left:0;
	background:#c4c4c4;
}
.sec7 .sec7Swiper .swiper-scrollbar .swiper-scrollbar-drag{
	height:2px;
	background:#000;
}


.sec8{padding: 0 0 4px;}
.sec8 .conwrap{
	display: flex;
	flex-direction: column;
}
.sec8 .conwrap .infowrap{
	width: 100%;
	margin-bottom: 100px;
}
.sec8 .conwrap .infowrap .info{
	margin: 40px 0 0;
}
.sec8 .conwrap .infowrap .info dl{
	width: 100%;
	padding: 15px 25px;
	border-radius: 10px;
	background: #f4f4f4;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.sec8 .conwrap .infowrap .info dl + dl{
	margin-top: 10px;
}
.sec8 .conwrap .infowrap .info dl dt{
	position: relative;
	padding-left: 30px;
	font-size: 15px;
	font-weight: 600;
}
.sec8 .conwrap .infowrap .info dl dt img{
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
}
.sec8 .conwrap .infowrap .info dl dd{
	font-size: 15px;
	font-weight: 600;
}
.sec8 .conwrap .infowrap .info dl dd .stock.up{
	color: #e60012;
}
.sec8 .conwrap .infowrap .info dl dd .stock.down{
	color: #1575bb;
}
.sec8 .conwrap .imgwrap{
	width: 100%;
	border-radius: 10px;
	background: #35424b;
	padding: 70px 20px;
	display: flex;
	flex-direction: column;
}
.sec8 .conwrap .imgwrap .img{
	width: 50%;
}
.sec8 .conwrap .imgwrap .txts{
	width: 100%;
	margin-top: 40px;
}
.sec8 .conwrap .imgwrap .txts h2{
	margin-bottom: 20px;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
}
.sec8 .conwrap .imgwrap .txts h3{
	font-size: 30px;
	font-weight: 600;
	line-height: 1.4em;
	color: #fff;
}
.sec8 .conwrap .imgwrap .txts p{
	margin: 15px 0 25px;
	font-size: 14px;
	line-height: 1.7em;
	color: rgba(255,255,255,0.7);
}
.sec8 .conwrap .imgwrap .txts .img{
	position: absolute;
	left: -150px;
	top: 50%;
	transform: translateY(-50%);
}


.sec9{padding-bottom:4%;}
.sec9 .inner{
	width: 92%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
}
.sec9 .inner .txtwrap{
	width: 100%;
	padding: 50px 20px;
	background: #1f6a3b;
	display: flex;
	align-items: center;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
.sec9 .inner .imgwrap{
	position: relative;
	width: 100%;
	height: 300px;
	overflow: hidden;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
}
.sec9 .inner .imgwrap .bg{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(/images/main/sec9_imgwrap_bg.jpg) no-repeat center / cover;
}




/* .sec1 .txtwrap h2,.sec1 .txtwrap h3{overflow: hidden;}
.sec1 .txtwrap h2 span{transform: translateY(100%);}
.sec1 .txtwrap h3 span{transform: translateY(100%);}
.sec1.in-view .txtwrap h2 span{transform: translateY(0); transition: all 1.2s 0.2s;}
.sec1.in-view .txtwrap h3 span{ transform: translateY(0); transition: all 1.2s 0.4s;}
 */
 
 
 
@keyframes smokeEffect {
    0% {
        opacity: 0;
        filter: blur(10px);
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0) scale(1);
    }
}
/* .sec1 .txtwrap h2 > span{opacity:0;transform-origin:center;}
.sec1 .txtwrap h2 > span.text1{transform:scale(1.1) translate3d(0, 30px, 0) rotateZ(0);}
.sec1 .txtwrap h2 > span.text2{transform:scale(1.1) translate3d(0, 30px, 0) rotateZ(0);}
.sec1 .txtwrap h2 > span.text3{transform:scale(1.1) translate3d(0, 30px, 00) rotateZ(0);}
.sec1 .txtwrap h2 > span span{transform:translateY(0);opacity:0;filter: blur(0);}
.sec1 .txtwrap h2.in-view > span{opacity:1;transform:scale(1) translate(0,0);}
.sec1 .txtwrap h2.in-view > span.text1{transition:all 1.4s ease-in-out;}
.sec1 .txtwrap h2.in-view > span.text2{transition:all 1.4s 0.4s ease-in-out;}
.sec1 .txtwrap h2.in-view > span.text3{transition:all 1.4s 0.8s ease-in-out;}

.sec1 .txtwrap h2 > span.text1 span.show{animation: smokeEffect 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;}
.sec1 .txtwrap h2 > span.text2 span.show{animation: smokeEffect 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s forwards;}
.sec1 .txtwrap h2 > span.text3 span.show{animation: smokeEffect 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.6s forwards;} */


.sec1 .visual{
    opacity: 0;
}



@media screen and (max-width: 380px){
    .sec4 .boxwrap .box::after {
        padding-bottom:75%;
    }
}


@media screen and (max-width: 350px){
    .sec4 .boxwrap .box::after {
        padding-bottom:85%;
    }
}

@media screen and (max-width: 320px){
    .sec4 .boxwrap .box::after {
        padding-bottom:95%;
    }
    .sec5 li::after {
        padding-bottom:140%;
    }
}