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

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





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


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

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

.sec_tit p{
	font-size: 20px;
	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: 50%;padding-left: 10%;padding-top:90px;}
.secWrap .right p{
	font-size: 20px;
	line-height: 1.6em;
	color: #666666;
	margin-bottom: 20px;
}




.more_btn{
	position: relative;
	display: inline-flex;
	align-items: center;
	padding:20px 40px 20px 0;
}
.more_btn span{
	position: relative;
	z-index: 1;
	font-size: 13px;
	font-weight: 600;
	color: #000;
}
.more_btn i{
	position: relative;
	z-index: 1;
	display: block;
	width: 12px;
	height: 12px;
	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: 370px 0 0;
}
.sec1 .txtwrap{
	position: relative;
	width: 92%;
	max-width: 1600px;
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	opacity: 0;
	transform: translateY(40px);
	filter: blur(5px);
}
.sec1 .txtwrap.in-view{
	opacity: 1;
	transform: translateY(0);
	filter: blur(0);
	transition: all 1.4s 0.1s;
}
.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: 100px;
	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: 120%;
	transform: translateX(-50%);
}





.sec1 .visualWrap{
	width: 100%;
	height: 100vh;
}
.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: 70px;
	font-weight: 500;
	color: #fff;
	filter: blur(4px);
	opacity: 0;
}
.sec1 .visual .swiper-slide .txts p{
	display: inline-block;
	font-size: 30px;
	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{
	position: absolute;
	left: 50%;
	bottom: 30px;
	transform: translateX(-50%);
	z-index: 1;
	display: flex;
	align-items: 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: 35px;
	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: 35px;
	cursor: pointer;
}
.sec1 .visual .ctr .vpaging .swiper-pagination-bullet{
	position: relative;
	width: 10px;
	height: 10px;
	background: unset;
	border: 1px solid #fff;
	margin: 0 10px;
	opacity: 1;
}
.sec1 .visual .ctr .vpaging .swiper-pagination-bullet:after{
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(0);
	width: 30px;
	height: 30px;
	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;
}










.sec2{
	padding:220px 0 260px;
	display: flex;
	align-items: center;
	overflow: hidden;
}
.sec2 .sec_tit h3{
	font-size: clamp(58px, 4.4vw, 95px);
}
.sec2 .sec_tit p{
	font-size: 20px;
	margin-top: 30px;
}
.sec2 .conwrap{
	position: relative;
	display: flex;
	align-items: center;
}
.sec2 .conwrap .sec_tit{
	width: 50%;
	position: relative;
	z-index: 1;
}
.sec2 .conwrap .imgwrap{
	position: relative;
	z-index: 1;
	width: 45%;
	margin-left: 5%;
	height: 77vh;
	max-height: 700px;
	border-radius: 15px;
	overflow: hidden;
}
.sec2 .conwrap .imgwrap img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display:none;
}










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

@media (min-width: 2100px){
	:root{--cardMargin: 100px;}
}

#cards {
	list-style: none;
	padding-left: 0;
	position: relative;
	margin-top: 100px;
	height: 100vh;
	overflow: hidden;
}

.card {
	/* padding-top: calc(var(--index) * var(--cardTopPadding)); */
	width: 100%;
	
}

#card1 { --index: 1; }
#card2 {
	--index: 2;
	position: absolute;
	left: 0;
	top: 95px;
	z-index: 1;
	transform: translateY(100vh);
}
#card3 {
	--index: 3;
	position: absolute;
	left: 0;
	top: 190px;
	z-index: 2;
	transform: translateY(100vh);
}
#card4 {
	--index: 4;
	position: absolute;
	left: 0;
	top: 285px;
	z-index: 3;
	transform: translateY(100vh);
}

.card-body {
	box-sizing: border-box;
	padding: 40px 0;
	display: flex;
	border-top: 1.5px dashed #b2b2b2;
	background: #fff;
	transition: all 0.5s;

	/* 애니메이션 초기 상태 */
	/* opacity: 0;
	transform: translateY(100vh); */
}

.card-body .left {
	flex-shrink: 0;
	display: flex;
}

.card-body .left h2 {
	width: 210px;
	font-size: 16px;
	font-weight: 500;
	color: #2f3842;
}

.card-body .left .img {
	width: 430px;
	height: 49vh;
	max-height: 500px;
	border-radius: 15px;
	overflow: hidden;
}

.card-body .left .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card-body .right {
	flex-shrink: 1;
	padding-left: 16vw;
}

.card-body .right h3 {
	font-size: 28px;
	font-weight: 600;
	color: #303e48;
}

.card-body .right h4 {
	font-size: 22px;
	font-weight: 600;
	color: #399137;
	margin-top: 140px;
}

.card-body .right p {
	font-size: 18px;
	line-height: 1.5em;
	color: #666;
	margin: 30px 0 40px;
}


.sec4{
	position: relative;
	padding: 180px 0 220px;
	background: url(/images/main/sec4_bg.jpg) no-repeat center / cover;
	overflow: hidden;
}
.sec4 .boxwrap{
	position: relative;
	z-index: 1;
	margin-top: 120px;
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}
.sec4 .boxwrap .box{
	overflow:hidden;
	position: relative;
	width: calc((100% - 30px) / 3);
	border-radius: 20px;
	background: #fff;
	box-sizing: border-box;
}
.sec4 .boxwrap .box:nth-child(1){opacity: 0;}
.sec4 .boxwrap .box:nth-child(2){z-index: 2;}
.sec4 .boxwrap .box:nth-child(3){background: #399546;z-index: 1;}
.sec4 .boxwrap .box:nth-child(4){background: #00557b;z-index: 1;}
.sec4 .boxwrap .box:nth-child(5){z-index: 2;}
.sec4 .boxwrap .box video{
	position:absolute;left:0;top:0;
	width:100%;height:100%;
	object-fit:cover;
}
.sec4 .boxwrap .box:after{
	content: "";
	display: block;
	padding-bottom: 100%;
}
.sec4 .boxwrap .box .inner{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 70px 50px 50px 50px;
	box-sizing: border-box;
}
.sec4 .boxwrap .box .inner .tit{
	font-size: 34px;
	font-weight: 600;
	color: #fff;
}
.sec4 .boxwrap .box .inner .con h3{
	font-size: 23px;
	font-weight: 600;
	line-height: 1.4em;
	color: #fff;
}
.sec4 .boxwrap .box .inner .con p{
	font-size: 18px;
	line-height: 1.6em;
	color: rgba(255,255,255,0.8);
	margin: 20px 0;
}
.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: 140px 0 180px;
	background: #37404a;
	overflow: hidden;
}
.sec5 ul{
	margin-top: 70px;
	display: flex;
	justify-content: space-between;
	gap: 40px;
}
.sec5 li{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	max-width: 370px;
	max-height: 480px;
	width: 100%;
	border-radius: 20px;
	transition: all 0.3s;
	box-sizing: border-box;
}
.sec5 li:hover{
	background: #fff;
}
.sec5 li:after{
	content: "";
	display: block;
	padding-bottom: 130%;
}
.sec5 li > div{
	width: 100%;
	height: 100%;
	padding: 50px 40px;
	box-sizing: border-box;
	position: absolute;
	display: flex;
	flex-direction: column;
	/* justify-content: space-between; */
}
.sec5 li > div:before{
	position: absolute;
	content: '';
	width: 1px;
	height: 50vh;
	background:#6e6e6e;
	left: 50%;
	transform: translateX(-50%);
	top: -50vh;
}
.sec5 li > div:after{
	position: absolute;
	content: '';
	width: 1px;
	height: 180px;
	background: #6e6e6e;
	left: 50%;
	transform: translateX(-50%);
	top: 100%;
}
.sec5 li > div:before{height: 0;}
.sec5 .innerwrap.in-view li > div:before{height: 50vh;transition: all 0.5s 0.0s;}
.sec5 li > div:after{height: 0;}
.sec5 .innerwrap.in-view li > div:after {height: 180px;transition: all 0.5s 1.9s;}
.sec5 li .num{
	font-family: "pretendard";
	font-size: 18px;
	color: #fff;
	transition: all 0.3s;
}
.sec5 li:hover .num{
	color: #000;
}
.sec5 li .txts{margin-top: 5vh;}
.sec5 li .txts .icon{
	display:flex;
	width: 57px;
	height: 57px;
	transition: all 0.3s;
}
.sec5 li:nth-child(1) .txts .icon{
	background: url(/images/main/sec5_icon1.png) no-repeat center / contain;
}
.sec5 li:nth-child(1):hover .txts .icon{
	background: url(/images/main/sec5_icon1_bl.png) no-repeat center / contain;
}
.sec5 li:nth-child(2) .txts .icon{
	background: url(/images/main/sec5_icon2.png) no-repeat center / contain;
}
.sec5 li:nth-child(2):hover .txts .icon{
	background: url(/images/main/sec5_icon2_bl.png) no-repeat center / contain;
}
.sec5 li:nth-child(3) .txts .icon{
	background: url(/images/main/sec5_icon3.png) no-repeat center / contain;
}
.sec5 li:nth-child(3):hover .txts .icon{
	background: url(/images/main/sec5_icon3_bl.png) no-repeat center / contain;
}
.sec5 li:nth-child(4) .txts .icon{
	background: url(/images/main/sec5_icon4.png) no-repeat center / contain;
}
.sec5 li:nth-child(4):hover .txts .icon{
	background: url(/images/main/sec5_icon4_bl.png) no-repeat center / contain;
}

.sec5 li:hover .txts .svg line,
.sec5 li:hover .txts .svg polyline,
.sec5 li:hover .txts .svg circle,
.sec5 li:hover .txts .svg path,
.sec5 li:hover .txts .svg rect,
.sec5 li:hover .txts .svg polygon {
	stroke: #37404a;
	transition: all 0.3s;
}


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

.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: 220px 0 600px;
	background: url(/images/main/sec6_bg.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: 230px;
	display: grid;
	align-items: flex-start;
	grid-column-gap: 1.3888888889vw;
	row-gap: 15vh;
	grid-template-columns: repeat(16, 1fr);
}
.sec6 .conwrap .con{
	position: relative;z-index:10;
}
.sec6 .conwrap .con.con1{
	grid-column: 7 / 11;
}
.sec6 .conwrap .con.con2{
	grid-column: 13 / 17;
	  grid-row: 2;
}
.sec6 .conwrap .con.con3{
	grid-column: 7 / 11;
	grid-row: 3;
}

.sec6 .conwrap .con .img{
	position: absolute;
	width: 18vw;
	overflow: hidden;
}
.sec6 .conwrap .con .img{
	left: min(-22.7vw, -90px);
	top: 50%;
	transform: translateY(-50%);
}




.sec6 .conwrap .con .num{
	font-size: 16px;
	font-weight: 500;
	color: #221b19;
	margin-bottom: 50px;
}
.sec6 .conwrap .con .cate{
	position: relative;
	display: flex;
	font-family: "Shippori Mincho", serif;
	font-size: 55px;
	font-weight: 500;
	color: #35424c;
	padding-bottom: 20px;
}
.sec6 .conwrap .con .cate:after{
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: #aaa;
}
.sec6 .conwrap .con p{
	font-size: 20px;
	line-height: 1.6em;
	margin: 40px 0;
	color: #333;
}


.sec7{
	position: relative;
	padding:200px 0 0;
	overflow: hidden;
}
.sec7 .secWrap{
	justify-content: space-between;
}
.sec7 .sec7Swiper{
	margin-top: 40px;
	padding-bottom: 50px;
}
.sec7 .sec7Swiper .swiper-slide{
	width: 370px;
}
.sec7 .sec7Swiper .swiper-slide a{
	position: relative;
	display: block;
	width: 100%;
	transition: all 0.3s;
}
.sec7 .sec7Swiper .swiper-slide a .thumb{
	position:relative;
	width: 100%;max-height:260px;aspect-ratio:370/260;
	border-radius: 15px;
	overflow: hidden;
}
.sec7 .sec7Swiper .swiper-slide a .thumb img{
	position:absolute;left:50%;top:50%;
	transform:translate(-50%,-50%);
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 1s;
}
.sec7 .sec7Swiper .swiper-slide a:hover .thumb img{
	transform: translate(-50%,-50%) scale(1.05);
}
.sec7 .sec7Swiper .swiper-slide a .txts{
	margin-top: 30px;
}
.sec7 .sec7Swiper .swiper-slide a .txts .tit{
	font-size: 22px;
	font-weight: 600;
	color: #2f3842;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sec7 .sec7Swiper .swiper-slide a .txts .con{
	font-size: 18px;
	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: 17px;
	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:200px 0;}
.sec8 .conwrap{
	display: flex;
}
.sec8 .conwrap .infowrap{
	width: 45%;
	padding-right: 5%;
	margin-right: 5%;
	border-right: 1px solid #ddd;
}
.sec8 .conwrap .infowrap .info{
	margin: 40px 0;
}
.sec8 .conwrap .infowrap .info dl{
	width: 100%;
	padding: 15px 40px;
	border-radius: 20px;
	background: #f4f4f4;
	display: flex;
	justify-content: space-between;
}
.sec8 .conwrap .infowrap .info dl + dl{
	margin-top: 15px;
}
.sec8 .conwrap .infowrap .info dl dt{
	position: relative;
	padding-left: 40px;
	font-size: 18px;
	font-weight: 600;
}
.sec8 .conwrap .infowrap .info dl dt img{
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}
.sec8 .conwrap .infowrap .info dl dd{
	font-size: 20px;
	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: 50%;
	border-radius: 20px 275px 275px 20px;
	background: #35424b;
	padding: 50px;
	display: flex;
	align-items: center;
}
.sec8 .conwrap .imgwrap .img{
	width: 43%;
}
.sec8 .conwrap .imgwrap .txts{
	width: 57%;
	padding-left: 7%;
}
.sec8 .conwrap .imgwrap .txts h2{
	margin-bottom: 20px;
	font-size: 20px;
	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: 18px;
	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: 20px;}
.sec9 .inner{
	width: calc(100% - 40px);
	margin: 0 auto;
	display: flex;
}
.sec9 .inner .txtwrap{
	width: 620px;
	height: 840px;
	padding: 60px;
	border-radius: 15px;
	background: #1f6a3b;
	display: flex;
	align-items: center;
	margin-right: 20px;
}
.sec9 .inner .imgwrap{
	position: relative;
	width: calc(100% - 640px);
	height: 840px;
	border-radius: 15px;
	overflow: hidden;
}
.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;
}



@-webkit-keyframes showImg{
0%{ clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);}
100%{clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%); }
animation-delay: 1s;
}
@-webkit-keyframes showImg2{
0%{ clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);}
0%{ clip-path: polygon(0 0, 28% 0, 58% 100%, 0 100%);}
100%{clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%); }
}
@-webkit-keyframes showImg3{
0%{ clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);}
100%{clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%); }
animation-delay: 1s;
}
@-webkit-keyframes opacityAni{
0%{opacity:0;}
100%{opacity:1;}
}
@-webkit-keyframes scaleAni{
0%{opacity:0;transform:scale(1.3);}
100%{opacity:1;transform:scale(1);}
}
@-webkit-keyframes scaleAni2{
0%{opacity:0.5;transform:scale(1.3);}
100%{opacity:1;transform:scale(1);}
}
@-webkit-keyframes fadeUpAni{
0%{opacity:0; transform:translateY(50px);}
100%{opacity:1;transform:translateY(0);}
}

.fadeUp{opacity: 0;}
.showImg{opacity: 0;}


.showImg.in-view{animation-name: showImg;animation-timing-function: cubic-bezier(0.42, 0, 0.14, 1.01); animation-duration: 2s; opacity: 1;}
.showImg2.in-view{animation-name: showImg2;animation-timing-function: cubic-bezier(0.42, 0, 0.14, 1.01); animation-duration: 2s; opacity: 1;}
.showImg3.in-view{animation-name: showImg3;animation-timing-function: cubic-bezier(0.42, 0, 0.14, 1.01); animation-duration: 1s; opacity: 1;}
.opacity.in-view{animation-name: opacityAni;animation-timing-function: cubic-bezier(0.42, 0, 0.14, 1.01); animation-duration: 2s;}
.fadeUp.in-view{animation-name: fadeUpAni; animation-timing-function: cubic-bezier(0.42, 0, 0.14, 1.01);animation-duration: 2s; opacity: 1;}
.scaleAni.in-view{animation-name: scaleAni; animation-timing-function: cubic-bezier(0.42, 0, 0.14, 1.01); animation-duration: 2s; }
.scaleAni2.in-view{animation-name: scaleAni2; animation-timing-function: cubic-bezier(0.42, 0, 0.14, 1.01); animation-duration: 1.5s; }


@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;
}


.sec2 .conwrap .sec_tit h2{opacity: 0; transform: translateY(50px);}
.sec2 .conwrap .sec_tit h3{opacity: 0; transform: translateY(50px);}
.sec2 .conwrap .sec_tit p{opacity: 0; transform: translateY(50px);}
.sec2 .conwrap .sec_tit .more_btn{opacity: 0; transform: translateY(50px);}

.sec2 .conwrap.in-view .sec_tit h2{opacity: 1; transform: translateY(0); transition: all 2s 0.2s;}
.sec2 .conwrap.in-view .sec_tit h3{opacity: 1; transform: translateY(0); transition: all 2s 0.4s;}
.sec2 .conwrap.in-view .sec_tit p{opacity: 1; transform: translateY(0); transition: all 2s 0.6s;}
.sec2 .conwrap.in-view .sec_tit .more_btn{opacity: 1; transform: translateY(0); transition: all 2s 0.8s;}

.sec2 .conwrap .imgwrap img{opacity: 0;}
.sec2 .conwrap .imgwrap.in-view img {
	animation-name: imgMotion;
	animation-duration: 1.4s;
	animation-fill-mode: forwards;
	animation-timing-function: ease-in-out;
	animation-delay: 0.3s;
	opacity: 0;
}
@keyframes imgMotion{
	0% { clip-path: inset(50%);opacity:0; }
	100% {clip-path: inset(0);opacity:1;}
}




.sec4 .boxwrap .box:nth-child(3){opacity: 0; transform: translateX(calc(-100% - 15px));}
.sec4 .boxwrap .box:nth-child(3).in-view{opacity: 1; transform: translateX(0); transition: all 1.6s 0.2s;}
.sec4 .boxwrap .box:nth-child(4){opacity: 0; transform: translateX(calc(100% + 15px));}
.sec4 .boxwrap .box:nth-child(4).in-view{opacity: 1; transform: translateX(0); transition: all 1.6s 0.2s;}



.sec5 li.in-view .txts .svg svg path,
.sec5 li.in-view .txts .svg svg line,
.sec5 li.in-view .txts .svg svg polyline,
.sec5 li.in-view .txts .svg svg circle{
	animation:stroke_ani 5s ease-in forwards; -webkit-animation:stroke_ani 5s ease-in forwards;
	stroke-dasharray:1206;
	stroke-dashoffset:1206;
	animation-delay:0.5s;
}




.sec6 .conwrap .con .num{opacity: 0; transform: translateX(30px);}
.sec6 .conwrap .con.in-view .num{opacity: 1; transform: translateX(0); transition: all 1.2s 0.2s;}

.sec6 .conwrap .con p{opacity: 0; transform: translateX(30px);}
.sec6 .conwrap .con.in-view p{opacity: 1; transform: translateX(0); transition: all 1.2s 1.2s;}

.sec6 .conwrap .con a{opacity: 0; transform: translateX(30px);}
.sec6 .conwrap .con.in-view a{opacity: 1; transform: translateX(0); transition: all 1.2s 1.4s;}

.sec6 .conwrap .con .cate span{opacity: 0; transform: translateX(40px);}
.sec6 .conwrap .con.in-view .cate span{opacity: 1; transform: translateX(0);}
.sec6 .conwrap .con .cate span:nth-child(1){ transition: all 1.2s 0.4s;}
.sec6 .conwrap .con .cate span:nth-child(2){ transition: all 1.2s 0.45s;}
.sec6 .conwrap .con .cate span:nth-child(3){ transition: all 1.2s 0.6s;}
.sec6 .conwrap .con .cate span:nth-child(4){ transition: all 1.2s 0.65s;}
.sec6 .conwrap .con .cate span:nth-child(5){ transition: all 1.2s 0.7s;}
.sec6 .conwrap .con .cate span:nth-child(6){ transition: all 1.2s 0.75s;}
.sec6 .conwrap .con .cate span:nth-child(7){ transition: all 1.2s 0.8s;}
.sec6 .conwrap .con .cate span:nth-child(8){ transition: all 1.2s 0.85s;}
.sec6 .conwrap .con .cate span:nth-child(9){ transition: all 1.2s 0.9s;}
.sec6 .conwrap .con .cate span:nth-child(10){ transition: all 1.2s 0.95s;}
.sec6 .conwrap .con .cate span:nth-child(11){ transition: all 1.2s 1s;}
.sec6 .conwrap .con .cate span:nth-child(12){ transition: all 1.2s 1.05s;}
.sec6 .conwrap .con .cate span:nth-child(13){ transition: all 1.2s 1.1s;}
.sec6 .conwrap .con .cate:after{width: 0;}
.sec6 .conwrap .con.in-view .cate:after{width: 100%; transition: all 2.1s 0.4s;}


.sec6 .conwrap .con .img img{
	opacity: 0;
	transform: translateY(-100%) scale(1.3);
	transition: transform 1s ease-out, opacity 1s ease-out;
}
.sec6 .conwrap .con.in-view .img img{
	transform: translateY(0) scale(1);
	opacity: 1;
}

.sec6 .conwrap .con .img img{opacity: 0;}
.sec6 .conwrap .con.in-view .img img {
	animation-name: imgMotion;
	animation-duration: 1.4s;
	animation-fill-mode: forwards;
	animation-timing-function: ease-in-out;
	animation-delay: 0.3s;
	opacity: 0;
}
@keyframes imgMotion{
	0% { clip-path: inset(1%);opacity:0; }
	100% {clip-path: inset(0);opacity:1;}
}




.sec8 .infowrap{opacity: 0; transform: translateX(-70px);}
.sec8 .infowrap.in-view{opacity: 1; transform: translateX(0); transition: all 2s 0.5s;}

.sec8 .imgwrap{opacity: 0; transform: translateX(70px);}
.sec8 .imgwrap.in-view{opacity: 1; transform: translateX(0); transition: all 2s 0.5s;}




.sec9 .inner .imgwrap .bg{transform: scale(1.15);}
.sec9 .inner .imgwrap.in-view .bg{transform: scale(1); transition: all 2s 0.2s;}




/* .card-body .left .img img{
	opacity: 0;
	transform: translateY(-100%) scale(1.3);
	transition: transform 1s ease-out, opacity 1s ease-out;
}
.card-body .left .img.in-view img{
	transform: translateY(0) scale(1);
	opacity: 1;
} */