@charset "utf-8";
.pcbr{display:none;}
.ptbr{display:block;}
.tbbr{display:block;}
.tmbr{display:block;}
.mbbr{display:none;}
.pc_view{display:none !important;}
.pt_view{display:block !important;}
.t_view{display:block !important;}
.tm_view{display:block !important;}
.m_view{display:none !important;}
.dn{display:none;}
#wrap{overflow-x:hidden;overflow:hidden;}

* {font-family:"Inter", "Pretendard","돋움",dotum,sans-serif;box-sizing:border-box;}

section{position:relative; width: 100%; height: 100%; max-height:100vh;box-sizing:border-box; overflow:hidden;}
section .fp-tableCell{overflow:hidden;}
section *{box-sizing:border-box;}

.innerwrap{
	width: 94%;
	max-width: 1820px;
	margin: 0 auto;
	box-sizing: border-box;
}
.innerwrap2{
	width: 94%;
	max-width: 1720px;
	margin: 0 auto;
	box-sizing: border-box;
}

body #fp-nav{right:1vw !important;}
body #fp-nav ul li{
    display: block;
    width:10px;height:10px;
    margin:20px 0px;
    position: relative;
}
body #fp-nav ul li:nth-child(9){display: none;}
body #fp-nav ul li a{}
body #fp-nav ul li a span,
body #fp-nav ul li:hover a span{
	position:static;display:block;
	width:6px;height:6px;
	margin:0 auto;border-radius:50%;
	border:1px solid rgba(255,255,255,0.5);background:0;
}
body #fp-nav ul li a.active span,
body #fp-nav ul li:hover a.active span{
width:10px;height:10px;
	margin:0 auto;border-radius:50%;
	border:2px solid rgba(255,255,255,1);
}
#fp-nav ul li .fp-tooltip{
	top:-5px;
	width:auto;
	font-family:"Nunito Sans";font-size:13px;color:#fff;opacity:0.5;
	display: none !important;
}
#fp-nav ul li .fp-tooltip.right{right:13px;}

body.bl #fp-nav ul li a span,
body.bl #fp-nav ul li:hover a span{
	border:1px solid rgba(0,0,0,0.6);background:0;
}
body.bl #fp-nav ul li a.active span,
body.bl #fp-nav ul li:hover a.active span{
	border:2px solid rgba(0,0,0,1);
}

.more_btn{
	width:200px;height:62px;border-radius:31px;background: #1e1d23;
	box-sizing:border-box;
	display: flex;
	align-items:center;
	justify-content:center;
}
.more_btn .arr{
	display: block;
	width:28px;height:28px;
	border-radius:50%;
	border:1px solid rgba(255,255,255,0.4);
	position: relative;
	margin-left: 15px;
}
.more_btn .arr i{
	display: block;
	position: absolute;
	content:'';
	background: url(/images/main/more_btn_arr.png)no-repeat center;
	top:50%;left:50%;
	transform:translate(-50%, -50%) rotate(0deg);
	width:9px;height:9px;
	transition:transform 0.2s ease;
}

@supports (-webkit-text-stroke: 1px black) {
  .fill-effect {
    font-size: 15px;
	font-family: "Inter";
    -webkit-text-fill-color: #e6ff75;
  }
  .fill-effect:before {
    -webkit-text-fill-color: #fff;
  }
}

.fill-effect {
  cursor: pointer;
  position: relative;
  text-shadow: 5px 5px 5px 5px #e6ff75;
}

.fill-effect:before {
  content: attr(data-fill);
  position: absolute;
  top: 0;
  left: 0;
    overflow: hidden;
    transition: 0.3s;
    width: 0;
    text-wrap: nowrap;
}
.more_btn:hover .fill-effect:before{
	width: 100%;
}
.more_btn:hover .arr i{
	transform:translate(-50%, -50%) rotate(45deg);
	transition:transform 0.2s ease;
}

/*sec1 visual*/
.sec1{position: relative;}
.sec1 .scroll{position: absolute;left:50%;transform:translateX(-50%) scale(0.85);bottom:30px;z-index:100;
	width:70px;height:70px;border:1px solid rgba(255,255,255,1);
	display: flex;align-items:center;justify-content:center;
	border-radius:50%;
}
@media screen and (max-width:900px){
	.sec1 .scroll{transform:translateX(-50%) scale(0.7);bottom:20px;}
}
.sec1 .scroll img{
	display: block;
	animation: visualScrollAni 0.95s ease-in-out infinite;
}
@keyframes visualScrollAni{
	0%{transform:translateY(-4px);}
	100%{transform:translateY(4px);}
}
.visual{
	overflow:hidden;
	position:relative;
	width:100%;height:100vh;
}
.visual .swiper-wrapper{width:100%;height:100%;}
.visual .swiper-slide{
	position:relative;
	width:100%;height:100%;
	display: flex;flex-direction:column;
	align-items:center;
	justify-content:center;
	overflow:hidden;
}
.visual .swiper-slide .bg{
	position:absolute;left:0;top:0;z-index:-1;
	width:100%;height:100%;	
	transition:all 3s;
	overflow:hidden;
}

.visual .swiper-slide .vwrap{
position: absolute;width:100%;height:100%;top:0;left:0;
transform:scale(1);
overflow:hidden;
}
.visual .swiper-slide .vwrap>video{
	position: absolute;top:50%;left:50%;transform:translate(-50%, -50%);
	width:100%;height: 100%;
	object-fit:cover;
}
.visual .swiper-slide-active .bg{transform:scale(1);}
.visual .swiper-slide.v1 .bg{background:url(/images/main/visual01.png) no-repeat center;background-size:cover;}
.visual .swiper-slide.v2 .bg{background:url(/images/main/visual01.png) no-repeat center;background-size:cover;}
.visual .swiper-slide.v3 .bg{background:url(/images/main/visual01.png) no-repeat center;background-size:cover;}
.visual .swiper-slide .txtwrap{
	width: 92%;
	max-width: 1720px;
	margin: 0 auto;
	box-sizing: border-box;
	position: relative;
	padding-top:6vh;
}
.visual .swiper-slide .txtwrap .tit{position: relative;display: inline-block;}
.visual .swiper-slide .txtwrap .tit h3{font-family: "Inter";font-size:90px;color:#fff;font-weight: 500;line-height: 1.1em;}
.visual .swiper-slide .txtwrap .tit h3.tm{display: none !important;}
.visual .swiper-slide .txtwrap .tit p{
	position: static;
	text-align: left;
	font-size:18px;color:rgba(255,255,255,0.6);
	font-weight: 300;
	line-height: 1.6em;
	margin-top: 4vh;
}
@keyframes titlefadeRight{
    0%{transform:translateX(-50px);opacity:0;}
    100%{transform:translateX(0px);opacity:1;}
}
.visual .ctr{
	margin: 0 auto;
	margin-bottom: 4vh;
	width:96%;
	max-width: 1720px;
	
	box-sizing: border-box;
	z-index:120;
	position: relative;
}
.visual .ctr .inner{
	display: inline-flex;
	align-items:center;
}
.visual .ctr .slide-btn{cursor:pointer;max-width:7px;}
.visual .vpaging{margin:0 45px;}
.visual .swiper-pagination-bullet {
position: relative;width: 46px; height: 6px; background: transparent; border: 1px solid rgba(255,255,255,0.6); opacity: 1;margin:0 2px;
border-radius:3px;box-sizing:border-box;}
.visual .swiper-pagination-bullet:after{
	position: absolute;
	content:'';
	background: #fff;
	width:0%;
	height:100%;

}
.visual .swiper-pagination-bullet-active:after{
	width:100%;
	transition:width 3s ease-in-out;
}

@media screen and (max-width:1200px){
	.visual .swiper-slide .txtwrap .tit h3{font-size:84px;}
	.visual .swiper-slide .txtwrap .tit h3.pt{display: none !important;}
	.visual .swiper-slide .txtwrap .tit h3.tm{display: block !important;}
}



/*sec2*/
.sec2{
	position:relative;
	background: url(/images/main/sec2_bg.png)no-repeat center / cover;
	width:100%;height:100%;
}
 .homeFacilitiesCircle {
	position: absolute;
	z-index:2;
        aspect-ratio: 1/1;
        width: 70vw;
		
        transform: translate(60vw, -10vw) rotate(-6deg);
		/* transform: translate(0vw, -25vw); */
        transform-origin: center;
		animation:sec2CircleAni 28s linear infinite;
    }

    .homeFacilitiesCircle .circleItem {
        position: absolute;
        width: 23.125vw;
		transition:transform 0.4s ease;
    }
	.homeFacilitiesCircle .circleItem:hover{
		transform: scale(1.05);
		transition:transform 0.6s ease;
		transform-origin:center;
	}


@keyframes sec2CircleAni{
	0%{
		 transform: translate(60vw, -10vw) rotate(-6deg);
	}
	100%{
		 transform: translate(60vw, -10vw) rotate(-366deg);
	}
}


/* 각각의 circleItem의 위치 조정 */
.homeFacilitiesCircle .circleItem:nth-child(1) {
	top: 0;
	left: calc(50% - 11.5625vw); /* 23.125vw / 2 */
}

.homeFacilitiesCircle .circleItem:nth-child(2) {
	top: 11.5625vw; /* 23.125vw / 2 */
	left:0;
}

.homeFacilitiesCircle .circleItem:nth-child(3) {
	bottom: 11.5625vw; /* 23.125vw / 2 */
	left:0;
}

.homeFacilitiesCircle .circleItem:nth-child(4) {
	bottom: 0;
	left: calc(50% - 11.5625vw); /* 23.125vw / 2 */
}

.homeFacilitiesCircle .circleItem:nth-child(5) {
	right: 0;
	bottom: 11.5625vw; /* 23.125vw / 2 */
}

.homeFacilitiesCircle .circleItem:nth-child(6) {
	top: 11.5625vw; /* 23.125vw / 2 */
	right: 0;
}

.homeFacilitiesMain{
	
}
.homeFacilitiesInner {
	width: 96%;
	max-width: 1720px;
	margin: 0 auto;
	box-sizing: border-box;
}
.homeFacilitiesInner .titlearea{padding-top: 10vw;}
.homeFacilitiesInner .titlearea .title{
	font-size:80px;color:#fffefe;
	font-weight: 500;
	line-height: 1.1em;
}
.homeFacilitiesInner .titlearea .txt{
	font-size:18px;color:rgba(255,255,255,0.5);
	font-weight: 300;
	font-family: "Pretendard";
	line-height: 1.6em;
	margin-top: 40px;
	margin-bottom: 40px;
}

/*sec3*/
.sec3{padding-top: 0;}
.sec3 .product{
	position: relative;
	width: 100%;
	height: 100%;
}
.sec3 .product .btn{
	position: absolute;
	right: 5%;
	top: 50%;
	transform: translateY(-50%);
	z-index: 500;
}
.sec3 .product .btn li{
	font-family: "Inter";
	width: 58px;
	height: 58px;
	line-height: 58px;
	border-radius: 50%;
	border: 1px solid #fff;
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	text-align: center;
	box-sizing: border-box;
	cursor: pointer;
	margin-bottom: 10px;
}
.sec3 .product .btn li.on{
	background: #e6ff75;
	border: 1px solid #e6ff75;
	color:#000;
	font-weight: 500;
}
.sec3 .product .swiper-slide{
	position: relative;
}
.sec3 .product .swiper-slide .bg{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(/images/main/sec3_bg.png)no-repeat center / cover;
	z-index: -1;
}
.sec3 .product .swiper-slide:nth-child(2) .bg{
background: url(/images/main/sec3_bg2.jpg)no-repeat center / cover;
}
/* .sec3 .product .swiper-slide .bg video{
	width: 100%;
	height: 100%;
	object-fit: cover;
} */
.sec3 .product .swiper-slide .txtwrap{
	width: 100%;
	height: 100%;
	display: flex;
	align-items:center;
}
.sec3 .product .swiper-slide .txtwrap .inner{
	max-width: 1720px;
	width:96%;
	margin:0 auto;
	display: flex;
	
}
.sec3 .product .swiper-slide .txtwrap .inner .titwrap{
	width:50%;
}
.sec3 .product .swiper-slide .txtwrap .inner .titwrap h3{
	font-family: "Inter";
	font-size: 18px;
	font-weight: 400;
	color: #fff;
	margin-bottom: 28px;
}
.sec3 .product .swiper-slide .txtwrap .inner .titwrap h4{
	font-size: 48px;
	font-weight: 400;
	color: #fff;
	line-height: 1.25em;
	font-family: "Pretendard";
}
.sec3 .product .swiper-slide .txtwrap .inner .con{
	width:50%;
	padding-right: 10%;
	padding-top:10vw;
}
.sec3 .product .swiper-slide .txtwrap .inner .con strong{
	 font-family: "Wix Madefor Display", sans-serif;
	 font-size:32px;color:#fff;
	font-weight: 500;
}
.sec3 .product .swiper-slide .txtwrap .inner .con p{
	margin-top: 25px;
	font-size: 16px;
	font-weight: 400;
	color: #fff;
	line-height: 1.8em;
	font-family: "Pretendard";
}
.sec3 .product .swiper-slide .txtwrap .inner .con a.more_btn{
	margin-top: 40px;
}

@media screen and (max-width:1024px){
	.sec3 .product .swiper-slide .txtwrap .inner{display: block;}
}


/*sec4*/
.sec4{width:100%;box-sizing:border-box;}
.sec4 .fp-tableCell{vertical-align:top;}
.sec4 .esg.pt{}
.sec4 .esg.mo{display: none !important;}
.sec4 .innerwrap{padding-top: 100px;display: flex;height:calc(100% - 40px);}
.sec4 .esg-item .conwrap{display: flex;align-items:center;height:100%;}
.sec4 .bgSlider{width:50%;height:100%;margin:0;position:relative;}
.sec4 .bgSlider .bg_slide{cursor:pointer;width:100%;height:100%;overflow:hidden;border-radius:14px;}
.sec4 .bgSlider .bg_slide>.inner{position: relative;
	width: 100%;/* padding-bottom:100%; */height:100%;}
.sec4 .bgSlider .bg_slide>.inner>div{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.sec4 .bgSlider .bg_slide>.inner>div.tm_view{display: none !important;}
.sec4 .bgSlider .ctr{
position: absolute;z-index:50;
top:50%;left:50%;transform:translate(-50%, -50%);
display: flex;justify-content:space-between;
width:94%;
}
.sec4 .bgSlider .ctr .btn{cursor:pointer;border-radius:50%;filter:grayscale(95%);}
.sec4 .bgSlider .ctr .btn.swiper-button-disabled{opacity:0.6;}

.sec4 .txtarea{width:50%;height:100%;margin:0;box-sizing:border-box;padding-left:4vw;}
.sec4 .txtarea .titlearea{width:100%;height:50%;box-sizing:border-box;padding-top:6%;}
.sec4 .txtarea .titlearea h3.cate{
font-family: "Inter";
font-size: 18px;
font-weight: 600;
color: #000;
margin-bottom: 32px;
}
.sec4 .txtarea .titlearea h4{
	font-size: 48px;
font-weight: 500;
color: #000;
line-height: 1.25em;
font-family: "Pretendard";
margin-bottom: 3vw;
}
.sec4 .txtarea .imgSlider{width:100%;height:50%;box-sizing:border-box;display: flex;justify-content:space-between;}
.sec4 .txtarea .imgSlider .imgwrap{cursor:pointer;width:0%;display: flex;align-items:center;display: none !important;}
.sec4 .txtarea .imgSlider .txtwrap{position: relative;width:100%;box-sizing:border-box;padding-right:4vw;padding-top: 60px;
padding-bottom: 8vh;}
.sec4 .txtarea .imgSlider .txtwrap .tit{font-size:38px;color:#222;font-family: "Pretendard";margin-bottom: 1.25vw;font-weight:600;}
.sec4 .txtarea .imgSlider .txtwrap .info{font-size:18px;color:#555555;line-height: 1.7em;}
.sec4 .txtarea .imgSlider .bpaging{
display:flex;width:auto;height:40px;align-items:center;
position:absolute !important;z-index:50;
top:0;left:0;
}
.sec4 .txtarea .imgSlider .bpaging>span{
	display: block;width:4vw;height:4vw;
	max-width:31.64px;max-height:31.64px;
	opacity:1;font-weight: 500;
	border-radius:50%;text-align: center;
	background: 0;
	display: flex;align-items:center;justify-content:center;
	color:rgba(0,0,0,0.4);font-size:15px;font-family:"Inter";
	margin-right: 20px;}
.sec4 .txtarea .imgSlider .bpaging>.swiper-pagination-bullet-active{
background: #09080d;color:#fff;	
}

/* .sec4 .txtarea .imgSlider .imgwrap{overflow:hidden;width:37.25%;height:100%;border-radius:14px;}
.sec4 .txtarea .imgSlider .imgwrap>.inner{overflow:hidden;position: relative;width:100%;height:100%;}
.sec4 .txtarea .imgSlider .imgwrap>.inner>div{position: absolute;top: 0;left: 0;width: 100%;height: 100%;} */

.sec4 .bgSlider .bg_slide>.inner>div{}
.sec4 .esg-item.swiper-slide-active .bgSlider .bg_slide>.inner>div{animation-name:bgScale1;animation-fill-mode:forwards;animation-duration: 2.5s;animation-timing-function:ease-out;}
@keyframes bgScale1{
0%{transform:scale(1.2);}
100%{transform:scale(1);}
}

@media screen and (max-width:1200px){
	.sec4 .esg.pt{display: none !important;}
	.sec4 .esg.mo{display: block !important;}
	.sec4 .innerwrap{padding-top: 0;height:100%;width:100%;}
	.sec4 .esg-item .conwrap{display: block;}
	.sec4 .bgSlider{width:100%;height:50%;}
	.sec4 .bgSlider .bg_slide{position: relative;border-radius:0;}
	.sec4 .bgSlider .bg_slide>.inner>div{
		background-position:bottom 30% center !important;
	}
	.sec4 .bgSlider .bg_slide .txtwrap{position: absolute;z-index:40;top:0;left:0;width:100%;box-sizing:border-box;height:100%;
			display: flex;
            flex-direction: column;
            align-items: start;
            justify-content: flex-end;
			padding:0 9vw;
			padding-bottom: 5%;
	}
	.sec4 .bgSlider .bg_slide .txtwrap .tit{font-size:38px;color:#fff;font-family: "Pretendard";margin-bottom: 1.25vw;font-weight:600;}
	.sec4 .bgSlider .bg_slide .txtwrap .info{font-size:18px;color:#fff;line-height: 1.7em;padding-right: 30%;}
	.sec4 .bgSlider .bg_slide .bpaging{
	display:flex;width:auto;height:40px;align-items:center;
	position:relative !important;z-index:50;
	top:0;left:0;margin-bottom: 20px;
	display: none;
	}
	.sec4 .bgSlider .bg_slide .bpaging>span{
		display: block;width:4vw;height:4vw;
		max-width:31.64px;max-height:31.64px;
		opacity:1;font-weight: 500;
		border-radius:50%;text-align: center;
		background: 0;
		display: flex;align-items:center;justify-content:center;
		color:rgba(255,255,255,0.4);font-size:15px;font-family:"Inter";
		margin-right: 20px;}
	.sec4 .bgSlider .bg_slide .bpaging>.swiper-pagination-bullet-active{
	background: #09080d;color:#fff;	
	}
	.sec4 .txtarea{width:100%;height:50%;padding:0 4vw;}
}


/*sec5*/
/*sec5*/
.sec5{position: relative;background: url(/images/main/sec5_bg.png)no-repeat center / cover;}
.sec5 .dia{
	position: absolute;
	top:50%;left:50%;transform:translate(-50%, -50%);
	background: url(/images/main/sec5_dia_img.png)no-repeat center / cover;
	/* width:45.32vw;height:45.32vw; */
	/* width: 40vw;height: 40vw; */
	width: 32vw;height: 32vw;
	max-width:541px;max-height:541px;
}
.sec5 .dia .line{
	position: absolute;
	width: 32vw;height: 32vw;
	max-width:541px;max-height:541px;
	top:50%;left:50%;transform:translate(-50%, -50%);
	border-radius:50%;
	border:1px solid rgba(255,255,255,0.2);
	animation: circleBigger 2s linear infinite;
}

.sec5 .dia .line.line1{animation-delay:0.1s;}
.sec5 .dia .line.line2{animation-delay:0.4s;}
.sec5 .dia .line.line3{animation-delay:0.7s;}
.sec5 .dia .line.line4{animation-delay:1s;}
.sec5 .dia .line.line5{animation-delay:1.3s;}

@keyframes circleBigger{
	0%{transform:translate(-50%, -50%) scale(1);opacity:1;}
	100%{transform:translate(-50%, -50%) scale(1.4);opacity:0.2;}
}

.sec5 .titlewrap{
	position: absolute;
	top:50%;left:50%;transform:translate(-50%, -50%);
	z-index:120;
}
.sec5 .titlewrap h3.cate{text-align: center;
font-family: "Inter";
	font-size: 18px;
	font-weight: 400;
	color: #fff;

}
.sec5 .titlewrap h4{text-align: center;
font-size: 52px;
font-weight: 500;
color: #fff;
line-height: 1.32em;
font-family: "Pretendard";
margin:40px auto 50px;
}
.sec5 .titlewrap .more_btn{margin:0 auto;}
.sec5 .merit{position: relative;
width:100%;height:100%;}
.sec5 .merit ul li{width:20vw;position: absolute;}

.sec5 .merit ul li:nth-child(1){
	top:8.5vw;
	left:calc(50% - 45vw);
}
.sec5 .merit ul li:nth-child(1):after{
	position: absolute;
	content:'';
	background: url(/images/main/line.png)no-repeat center;
	width: 356px;height:76px;
	top:25px;left:100%;
}
.sec5 .merit ul li:nth-child(2){
	top:8.5vw;
	right:calc(50% - 45vw);
}
.sec5 .merit ul li:nth-child(2):after{
	position: absolute;
	content:'';
	background: url(/images/main/line2.png)no-repeat center;
	width: 364px;height:76px;
	top:26px;right:98%;
}
.sec5 .merit ul li:nth-child(3){
	bottom:5.2vw;
	left:calc(50% - 42.2vw);
}
.sec5 .merit ul li:nth-child(3):after{
	position: absolute;
	content:'';
	background: url(/images/main/line3.png)no-repeat center;
	width: 253px;height:80px;
	top:-51px;left:100%;
}
.sec5 .merit ul li:nth-child(4){
	bottom:5.2vw;
	right:calc(50% - 42.2vw);
}
.sec5 .merit ul li:nth-child(4):after{
	position: absolute;
	content:'';
	background: url(/images/main/line4.png)no-repeat center;
	width: 319px;height:79px;
	top:-51px;right:91%;
}
.sec5 .merit ul li:nth-child(odd){
display: flex;
flex-direction:column;
align-items:end;

}
.sec5 .merit ul li:after{display: none;}
.sec5 .merit ul li .tag{
	display: block;font-family: "Inter";
	width:151px;height:56px;
	font-size:18px;color:#fff;
	font-weight: 500;text-align: center;
	border-radius:28px;
	border:1px solid rgba(130, 130, 130, 0.6);
	display: flex;align-items:center;justify-content:center;
}
.sec5 .merit ul li .title{font-size:32px;color:#fff;font-weight: 600;
margin:3vh 0 2.5vh;}
.sec5 .merit ul li .txt{
	font-size:16px;color:rgba(255,255,255,0.6);font-weight: 400;
	line-height: 1.7em;
	max-width:20vw;
}
.sec5 .merit ul li:nth-child(odd) .title{text-align: right;}
.sec5 .merit ul li:nth-child(odd) .txt{text-align: right;}


@media screen and (max-width:1200px){
	.sec5 .merit ul li .title{font-size:28px;margin:2vh 0 1.5vh;}
	.sec5 .merit ul li .txt{font-size:15px;}
	.sec5 .titlewrap h4{font-size:46px;}
}
@media screen and (max-width:1024px){
.sec5 .merit ul li{max-width:25vw;}
	.sec5 .merit ul li .title{font-size:28px;margin:2vh 0 1.5vh;}
	.sec5 .merit ul li .txt{font-size:15px;display: none;}
	.sec5 .titlewrap h4{font-size:46px;margin:30px auto 15px;}
	.sec5 .merit ul li:nth-child(1){top:16.5vw;}
	.sec5 .merit ul li:nth-child(2){top:16.5vw;}
	.sec5 .merit ul li:nth-child(3){bottom:16.5vw;}
	.sec5 .merit ul li:nth-child(4){bottom:16.5vw;}
	.sec5 .titlewrap{width:80vw;}
	.sec5 .dia, .sec5 .dia .line{width: 45vw;height: 45vw;}
}


/*sec6*/
.sec6 .innerwrap{height:100%;padding-top: 120px;}
.sec6 .conarea{display: flex;justify-content:space-between;width:100%;height:calc(100% - 50px);}
.sec6 .conarea>div{
	width:49%;
	height:100%;
	position: relative;
	overflow:hidden;
	border-radius:14px;
	box-sizing:border-box;
	padding: 50px 40px;
}
.sec6 .conarea>div .bg{
	position: absolute;
	top:0;left:0;
	width:100%;height:100%;
	background: url(/images/main/sec6_media_bg.png)no-repeat center / cover;
	/* transform:scale(2); */
}
.sec6 .conarea>div.ir .bg{background: url(/images/main/sec6_ir_bg.png)no-repeat center / cover;}
.sec6 .conarea>div.ir .more_btn{position: relative;}
.sec6 .conarea>div .titlewrap{
position: relative;
z-index:50;
}
.sec6 .conarea>div .titlewrap h3.cate{
font-family: "Inter";
	font-size: 18px;
	font-weight: 400;
	color: #fff;
	margin-bottom: 32px;
}
.sec6 .conarea>.ir .titlewrap h3.cate{display: flex;align-items:center;}
.sec6 .conarea>.ir .titlewrap h3.cate>span{
display: inline-block;font-size:16px;color:rgba(0,0,0,0.7);font-weight: 300;position: relative;
margin-left: 12px;box-sizing:border-box;padding-left: 12px;font-family: "Pretendard";
}
.sec6 .conarea>.ir .titlewrap h3.cate>span:before{
	position: absolute;content:'';
	width:1px;height:14px;
	background: rgba(0,0,0,0.2);
	top:4px;left:0;
}
.sec6 .conarea>div .titlewrap h4{
font-size: 28px;
font-weight: 400;
color: #fff;
line-height: 1.5em;
font-family: "Pretendard";
}
.sec6 .conarea>.ir .titlewrap h3.cate,
.sec6 .conarea>.ir .titlewrap h4{color:#000;}
.sec6 .conarea .media .play{
	display: block;
	position: relative;z-index:60;
	margin:0 auto;
	margin-top: 5vw;
	cursor:pointer;
}
.sec6 .conarea .media .play .line{
	position: absolute;
	width:12vw;height:12vw;
	max-width:153px;max-height:153px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.5);
	animation: circlePlayAni 2s linear infinite;
}
@keyframes circlePlayAni{
	0%{transform: translate(-50%, -50%) scale(1);opacity: 1;}
	100%{transform: translate(-50%, -50%) scale(1.3);opacity: 0.2;}
}
.sec6 .conarea .media .play .line1{animation-delay:0.1s;}
.sec6 .conarea .media .play .line2{animation-delay:0.3s;}
.sec6 .conarea .media .play .line3{animation-delay:0.7s;}
.sec6 .conarea .media .play img{display: block;margin:0 auto;/* width:7.969vw;height:7.969vw; */width:12vw;max-width:153px;}
.sec6 .conarea .ir .ir_info{position: relative;z-index:60;margin:40px auto 60px;width:100%;}
.sec6 .conarea .ir .ir_info{margin-bottom:4vh;border-top:1px solid rgba(0,0,0,0.2);}
.sec6 .conarea .ir .ir_info dl{
	display:flex;align-items:center;
	padding:2vh 25px;
	border-bottom:1px solid rgba(0,0,0,0.2);
}
.sec6 .conarea .ir .ir_info dl dt{
	position:relative;
	width:106px;
	font-size:16px;color:#000;
}
.sec6 .conarea .ir .ir_info dl dt:after{
	display:block;content:"";
	width:1px;height:15px;
	background:rgba(0,0,0,0.2);
	position:absolute;right:0;top:7px;
	display: none;
}
.sec6 .conarea .ir .ir_info dl dd{
	box-sizing:border-box;
	width:calc(100% - 106px);
	padding:0 25px;
	font-size:16px;color:#000;text-align:right;
}
.sec6 .conarea .ir .ir_info dl dd.today{font-size:24px;font-weight:400;}
.sec6 .conarea .ir .ir_info dl dd.today .up{color:#e60012;}
.sec6 .conarea .ir .ir_info dl dd.today .down{color:#1705c4;}
.sec6 .conarea .ir .ir_info dl dd.today span>span{font-size:20px;}
.sec6 .conarea .ir .ir_info .up{color:#e60012;}
.sec6 .conarea .ir .ir_info .down{color:#1705c4;}

@media screen and (max-width:990px){
	.sec6 .innerwrap{padding-top: 100px;}
	.sec6 .conarea{height:calc(100% - 40px);display: block;}
	.sec6 .conarea>div{width:100%;height:49%;padding:6vw;}
	.sec6 .conarea>div .titlewrap h4{display: none;}
	.sec6 .conarea .ir .ir_info>dl:nth-child(4), .sec6 .conarea .ir .ir_info>dl:nth-child(3){display: none;}
	.sec6 .conarea>div.ir{margin-top:2%;}
}

/*sec7 news*/
.sec7{background: #f2f2f2;}
.sec7 .titlewrap{display: flex;justify-content:space-between;align-items:center;}
.sec7 .titlewrap h3.cate{font-size:18px;color:#000;font-family: "Wix Madefor Display", sans-serif;font-weight: 500;}
.sec7 .titlewrap .go_btn i{
	display: inline-block;
	width: 60px;
	height: 60px;
	background: url(/images/main/sec8_arr.png) no-repeat center;
	transform:rotate(0deg);
	transition: all 0.2s ease;
}
.sec7 .titlewrap .go_btn:hover>i{
	background: url(/images/main/sec8_arr_hover.png) no-repeat center;
	transform:rotate(45deg);
        transition: all 0.2s ease;
}
.sec7 .news{position: relative;overflow:hidden;width:100%;padding-bottom: 40px;margin-top: 3.5vh;box-sizing:border-box;padding-top: 5px;}
.sec7 .news .swiper-slide{
	position: relative;
	width:calc((100% - 60px) / 3) !important;
	min-height:60vh;
	max-height:550px;
	overflow:hidden;
	background: #fff;
	border-radius:16px;
	box-sizing:border-box;
	padding:60px 30px;
}
.sec7 .news .swiper-slide .toparea{}
.sec7 .news .swiper-slide .toparea .category{
	font-size:16px;color:#000;font-family: "Inter";
	margin-bottom:40px;
}
.sec7 .news .swiper-slide .toparea .tit{
	font-size:26px;color:#000;font-family: "Pretendard";
	line-height: 1.4em;
	margin-bottom: 25px;
	overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    box-sizing: border-box;
    display: -webkit-box;
    min-height:2.8em;
	max-height:4em;
}
.sec7 .news .swiper-slide .toparea .con{
	font-size:16px;color:rgba(0,0,0,0.7);font-family: "Noto Sans KR";
	line-height: 1.8em;
	margin-bottom: 2vw;
	overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    box-sizing: border-box;
    display: -webkit-box;
    height:3.5em;
}
.sec7 .news .swiper-slide .toparea .date{
	font-size:15px;color:rgba(0,0,0,0.7);font-family: "Inter";
	font-weight: 400;
}
.sec7 .news .swiper-slide .btnarea{
	position: absolute;
	bottom:0;left:0;
	width:100%;
	height:20%;
	max-height:90px;
	background: #fff;
	
	box-sizing:border-box;
}
.sec7 .news .swiper-slide .btnarea a{
	width:100%;height:100%;
	display: flex;align-items:center;justify-content:space-between;
	box-sizing:border-box;border-top:1px solid #cccccc;
	padding:30px 40px;
}
.sec7 .news .swiper-slide .btnarea a>span{font-size:11px;color:#000;font-weight: 600;
font-family: "Wix Madefor Display", sans-serif;}
.sec7 .news .swiper-slide .btnarea a>i{
	display: inline-block;
	width:14px;height: 9px;
	background: url(/images/main/sec7_arr_bk.png)no-repeat center;
}

.sec7 .news .swiper-slide:hover{transform:translateY(-5px);transition:transform 0.2s ease;}
.sec7 .news .swiper-slide:hover .btnarea{background: #e6ff75;}
.sec7 .news .swiper-slide:hover .btnarea>a{background:#e6ff75;border:none;}
.sec7 .news .swiper-slide:hover .btnarea a>span{color:#111111;font-weight: 700;}
.sec7 .news .swiper-slide:hover .btnarea a>i{
	background: url(/images/main/sec7_arr_bk.png)no-repeat center;
	animation:arrAni 1s ease-in-out infinite;
}
.sec7 .news .swiper-scrollbar{
	display: block !important;
        width: 100%;
        height:2px;
        left: 0;
        bottom: 0;
        background: #c2c2c2;
        border-radius: 0;
}
.sec7 .news .swiper-scrollbar .swiper-scrollbar-drag{
	height: 4px;
	background: #000;
	border-radius: 0;
	cursor:pointer;
}

@keyframes arrAni{
	0%{transform:translateX(10px);}
	100%{transform:translateX(0px);}
}

@media screen and (max-width:990px){
	.sec7 .news .swiper-slide{width:360px !important;}
}


/*sec8*/
.sec8{background: #fff;}
.sec8 .fp-tableCell{vertical-align:top;}
.sec8 .boxwrap{
	width:96%;
	max-width:1820px;
	position: relative;
	margin:0 auto;
	height:calc(100% - 60px);
	overflow:hidden;
	border-bottom-left-radius:20px;
}
.sec8 .boxwrap .bg{
	position: absolute;
	content:'';
	width: 100%;height: 100%;
	background: url(/images/main/sec8_bg.png)no-repeat left 35% center / cover;
}
.sec8 .boxwrap .txtwrap{
position: relative;
z-index: 40;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
padding: 4vw 7vw;
}
.sec8 .boxwrap .txtwrap .cate{
	font-family: "Inter";
	font-size: 18px;
	font-weight: 400;
	color: #fff;
	margin-bottom: 32px;
}
.sec8 .boxwrap .txtwrap h4{
	font-size: 52px;
	font-weight: 400;
	color: #fff;
	line-height: 1.2em;
	font-family: "Pretendard";
}
.sec8 .boxwrap .btn_wrap{
	position: absolute;
	z-index: 100;
	display: flex;
	align-items: end;
	justify-content:flex-end;
	background: url(/images/main/sec8_part.png) no-repeat center;
	width: 401px;
	height: 150px;
	right: 0px;
	bottom: 0px;
	padding-right: 2vw;
}
.sec8 .boxwrap .btn_wrap .go_btn{
display: flex;
align-items: center;
}
.sec8 .boxwrap .btn_wrap .go_btn>span{
	        font-size: 24px;
        color: #000;
        font-family: "Noto Sans KR";
        font-weight: 500;
        margin-right: 30px;
}
.sec8 .boxwrap .btn_wrap .go_btn>span .char{display: inline-block;}
.sec8 .boxwrap .btn_wrap .go_btn>i{
	display: inline-block;
        width: 60px;
        height: 60px;
        background: url(/images/main/sec8_arr.png) no-repeat center;
        transition: all 0.2s ease;
}
.sec8 .boxwrap .btn_wrap .go_btn:hover>span .char{
		animation: titleHoverAni 0.9s ease-in-out;
	  animation-fill-mode: forwards;
	   animation-direction:normal;
	    animation-delay: calc(20ms * var(--char-index));
}
.sec8 .boxwrap .btn_wrap .go_btn:hover>i{
	background: url(/images/main/sec8_arr_hover.png) no-repeat center;
    transition: all 0.2s ease;
}


@keyframes titleHoverAni{
    0%{ transform:translate3d(0, 0px, 0) rotate(0deg);color:#e6ff75;opacity:0.4;}
    100%{transform:translate3d(0, 0, 0) rotate(0deg);color:#000;opacity:1;}
}

/*footer*/
.sec9{}
.sec9 .foot{background: #1a1a1a;padding:50px 0;}
.sec9 .foot .inner{
	width:96%;max-width:1720px;margin:0 auto;
	border-left:1px solid #767676;
	padding-left: 28px;
}
.sec9 .foot .address{}
.sec9 .foot .address li{margin-bottom: 8px;}
.sec9 .foot .address li.flex{display: flex;align-items:center;}
.sec9 .foot .address li.flex>div:first-child{margin-right: 10px;}
.sec9 .foot .address li>div{font-size:17px;color:rgba(255,255,255,0.7);}
.sec9 .foot .address li>div .en{
	font-family: "Wix Madefor Display", sans-serif;
}
.sec9 .foot .copy{
	font-family: "Wix Madefor Display", sans-serif;
	font-size:16px;color:rgba(255,255,255,0.5);
	margin-top: 30px;
}


/*motion*/
@keyframes bgScale{
   0%{transform:scale(1.15);}
   100%{transform:scale(1);}
  }
@keyframes fadeLeft{
 0%{transform:translate3d(-100px, 0, 0);opacity:0;}
  100%{transform:translate3d(0px, 0, 0);opacity:1;}
}
@keyframes fadeRight{
 0%{transform:translate3d(70%, 0, 0);opacity:0;}
  100%{transform:translate3d(0%, 0, 0);opacity:1;}
}
@keyframes fadeUp{
0%{transform:translate3d(0%, 60px, 0);opacity:0;}
  100%{transform:translate3d(0%, 0, 0);opacity:1;}
}
@keyframes fadeDown{
0%{transform:translate3d(0%, -60px, 0);opacity:0;}
  100%{transform:translate3d(0%, 0, 0);opacity:1;}
}
@keyframes fadeUp2{
0%{transform:translate3d(0%, 40px, 0);opacity:0;}
  100%{transform:translate3d(0%, 0, 0);opacity:1;}
}
@keyframes fadeDown2{
0%{transform:translate3d(0%, -40px, 0);opacity:0;}
  100%{transform:translate3d(0%, 0, 0);opacity:1;}
}
@keyframes fadeIn{
0%{opacity:0;}
  100%{opacity:1;}
}
@keyframes imgAni{
0%{clip-path:polygon(0 0, 0 0, 0 100%, 0% 100%);}
100%{clip-path:polygon(100% 0, 0 0, 0 100%, 100% 100%);}

}
@keyframes fadeImgRight{
0%{opacity:0;clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);}
100%{opacity:1;clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
}
@keyframes fadeImgLeft{
0%{opacity:0;clip-path:polygon(0 0, 0 0, 0 100%, 0% 100%);}
100%{opacity:1;clip-path:polygon(100% 0, 0 0, 0 100%, 100% 100%);}
}

.fadeLeft, .fadeRight, .fadeUp, .fadeIn, .fadeImgRight{opacity:0;}
.imgAni{clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);}
.imgAni.in-view{animation-name: imgAni; animation-duration:1.25s;animation-fill-mode:forwards;}
.fadeLeft.in-view{animation-name: fadeLeft;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;}
.fadeRight.in-view{animation-name: fadeRight;animation-duration: 0.8s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;}
.fadeUp.in-view{animation-name: fadeUp;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;}
.fadeIn.in-view{animation-name: fadeIn;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;}
.fadeImgRight.in-view{animation-name: fadeImgRight;animation-duration: 1.2s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;}
.fadeImgLeft.in-view{animation-name: fadeImgLeft;animation-duration: 1.2s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;}
 .sub_visual .bg, .sub_visual .sub_tit{opacity:0;}
.sub_visual.in-view .bg{opacity:1;animation: bgScale 1.5s ease;animation-fill-mode:forwards;}
.sub_visual.in-view .sub_tit{animation: fadeLeft 0.9s ease;animation-fill-mode:forwards;}

@keyframes titleAniLeft{
    0%{ transform:translate3d(-50px, 0px, 0) rotate(0deg);opacity:0;}
    100%{transform:translate3d(0, 0, 0) rotate(0deg);opacity:1;}
}
@keyframes titleAniDown{
    0%{ transform:translate3d(0px, -30px, 0) rotate(0deg);opacity:0;}
    100%{transform:translate3d(0, 0, 0) rotate(0deg);opacity:1;}
}



/*sec1*/
.sec1 .ctr{opacity:0;}
.sec1.in-view .ctr{
animation-name: ctrAni;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
animation-delay:0.1s;
}
@keyframes ctrAni{
	0%{
		transform:translateX(-40px);opacity:0;
	}
	100%{
		transform:translateX(0px);opacity:1;
	}
}




 .sec1.in-view .visual .swiper-slide .txtwrap .tit h3 .title-fill .char{
opacity:0;display: inline-block;
}
.sec1.in-view .visual .swiper-slide-active .txtwrap .tit h3 .title-fill .char{
	animation: titleAniLeft 0.9s ease-in-out;
  animation-fill-mode: forwards;
   animation-direction:normal;
   animation-delay: calc(20ms * var(--char-index));
} 
.sec1.in-view .visual .swiper-slide-active .txtwrap .tit h3 .title-fill2 .char{
	animation: titleAniLeft 0.9s ease-in-out;
	 animation-fill-mode: forwards;
   animation-direction:normal;
	 animation-delay: calc(0.1s + 10ms * var(--char-index));
}

.sec1.in-view .visual .swiper-slide-active .txtwrap .tit h3 .title-fill3 .char{

   animation-delay: calc(0.2s + 20ms * var(--char-index));
}
.sec1 .visual .swiper-slide .txtwrap .tit p{opacity:0;}
.sec1.in-view .visual .swiper-slide-active .txtwrap .tit p{
	animation-name: titlefadeRight;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
	animation-delay:0.6s;
}
@keyframes titleAniLeft{
    0%{ transform:translate3d(-50px, 0px, 0) scale(0.9);opacity:0;}
    100%{transform:translate3d(0, 0, 0) scale(1);opacity:1;}
}


@keyframes fillTitle{
	0%{
		width:0%;opacity:0;
	}
	100%{
		width:100%;opacity:1;
	}
}

@media screen and (max-width:1200px){
	.sec1.in-view .visual .swiper-slide .txtwrap .tit h3.tm .char{
	opacity:0;display: inline-block;
	}
	.sec1.in-view .visual .swiper-slide-active .txtwrap .tit h3.tm .char{
		animation: titleAniLeft 0.9s ease-in-out;
	  animation-fill-mode: forwards;
	   animation-direction:normal;
	   animation-delay: calc(15ms * var(--char-index));
	} 
}

@media screen and (max-width:900px){
	.visual .swiper-slide .txtwrap .tit h3{font-size:64px;}	
}

/*sec2 motion*/
.sec2 .homeFacilitiesCircle{opacity:0;}
.sec2.in-view .homeFacilitiesCircle{
	opacity:1;transition: opacity 0.95s ease;
}
.sec2 .homeFacilitiesInner .titlearea .title .word{
opacity:0;display: inline-block;
}
.sec2.in-view .homeFacilitiesInner .titlearea .title .word{
	animation: titleColorChange 0.9s cubic-bezier(.5, 0, .5, 1);
	 animation-fill-mode: forwards;
	animation-direction:alternate;
	 animation-delay: calc(20ms * var(--word-index));
}

@keyframes titleColorChange{
	0%{color:#fffefe;opacity:0;transform:scale(0.95);}
	100%{color:#fffefe;opacity:1;transform:scale(1);}
}
.sec2 .homeFacilitiesInner .titlearea .txt{opacity:0;}
.sec2.in-view .homeFacilitiesInner .titlearea .txt{
	animation-name: fadeUp;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
	animation-delay:0.1s;
}
.sec2 .more_btn{opacity:0;}
.sec2.in-view .more_btn{
	animation-name: fadeScaleUp;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
	animation-delay:0.2s;
}

@keyframes fadeScaleUp{
0%{transform:translate3d(0%, 60px, 0) scale(0.8);opacity:0;transform-origin:center;}
  100%{transform:translate3d(0%, 0, 0) scale(1);;opacity:1;}
}


/*sec3 motion*/
@keyframes textAni{
    0%{ transform:translate3d(-40px , 0 ,  0) rotate(0deg);opacity:0;}
    100%{transform:translate3d(0, 0, 0) rotate(0deg);opacity:1;}
}
@keyframes titleAniDown{
    0%{ transform:translate3d(0px, 20px, 0) rotate(0deg);opacity:0;}
    100%{transform:translate3d(0, 0, 0) rotate(0deg);opacity:1;}
}
.sec3 .product .swiper-slide .txtwrap .inner .titwrap h3{
 opacity:0;
}
.sec3.in-view .product .swiper-slide .txtwrap .inner .titwrap h3{
	animation-name: fadeUp;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
		 animation-delay:0.1s;
}
.sec3 .product .swiper-slide .txtwrap .inner .titwrap h4{
	 opacity:0;
}
.sec3.in-view .product .swiper-slide .txtwrap .inner .titwrap h4{
	 animation-name: fadeUp;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
	 animation-delay:0.3s;
}


.sec3 .product .swiper-slide .txtwrap .inner .con strong.fill-effect{display:block;opacity:0;transform:translateY(60px);}
.sec3.in-view .product .swiper-slide-active .txtwrap .inner .con strong.fill-effect{opacity:1;transform:translateY(0px);transition:all 0.95s; transition-delay:0.5s;}
.sec3.in-view .product .swiper-slide-active .txtwrap .inner .con strong.fill-effect:before{transition:width 0.95s ease-in-out;}
.sec3.in-view .product .swiper-slide-active .txtwrap .inner .con strong.fill-effect:before{
	width:100%;
	transition-delay:1s;
}
.sec3 .product .swiper-slide .txtwrap .inner .con p,
.sec3 .product .swiper-slide .txtwrap .inner .con a.more_btn{opacity:0;}
.sec3.in-view .product .swiper-slide-active .txtwrap .inner .con p{
	animation-name: fadeUp;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
	animation-delay:0.6s;
}
.sec3.in-view .product .swiper-slide-active .txtwrap .inner .con a.more_btn{
	animation-name: fadeUp;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
	animation-delay:0.7s;
}

/*sec4 motion*/
.sec4 .bgSlider{opacity:0;}
.sec4.in-view .bgSlider{
	animation-name: fadeImgLeft;animation-duration: 1.2s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
}
.sec4 .txtarea .titlearea h3.cate{opacity:0;}
.sec4.in-view .txtarea .titlearea h3.cate{
	animation-name: fadeUp;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
	
}
.sec4 .txtarea .titlearea h4{opacity:0;}
.sec4.in-view .txtarea .titlearea h4{
	animation-name: fadeUp;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
	animation-delay:0.2s;
}

.sec4 .txtarea .titlearea .more_btn{
	opacity:0;
}
.sec4.in-view .txtarea .titlearea .more_btn{
	animation-name: fadeUp;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
	animation-delay:0.3s;
}
.sec4 .txtarea .imgSlider  .imgwrap{opacity:0;}
.sec4 .esg-item .txtarea .imgSlider .txtwrap{opacity:0;}
.sec4.in-view .txtarea .imgSlider .imgwrap{
	animation-name: fadeImgRight;animation-duration: 1.2s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
	animation-delay:0.1s;
}

.sec4.in-view .esg-item .txtarea .imgSlider .txtwrap{
	animation-name: fadeLeft;animation-duration: 0.8s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
	animation-delay:0.7s;
}



.sec4.in-view .esg-item .txtarea .imgSlider  .txtwrap .tit,
.sec4.in-view .esg-item .txtarea .imgSlider .txtwrap .info{opacity:0;}
.sec4.in-view .esg-item.swiper-slide-active .txtarea .imgSlider .txtwrap .tit,
.sec4.in-view .esg-item.swiper-slide-active .txtarea .imgSlider .txtwrap .info
{
	animation-name: fadeUp;animation-duration: 0.8s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
}
.sec4.in-view .esg-item.swiper-slide-active .txtarea .imgSlider .txtwrap .tit{animation-delay:0.1s;}
.sec4.in-view .esg-item.swiper-slide-active .txtarea .imgSlider .txtwrap .info{animation-delay:0.2s;} 

/*sec5 motion*/
.sec5 .titlewrap h3.cate,
.sec5 .titlewrap h4,
.sec5 .titlewrap .more_btn{opacity:0;}
.sec5.in-view .titlewrap h3.cate,
.sec5.in-view .titlewrap h4,
.sec5.in-view .titlewrap .more_btn{
	animation-name: fadeUp;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
}
.sec5.in-view .titlewrap h4{animation-delay:0.1s;}
.sec5.in-view .titlewrap .more_btn{animation-delay:0.2s;}

.sec5 .dia{opacity:0;}
.sec5.in-view .dia{
animation-name: fadeIn;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
animation-delay:0.4s;
}
.sec5 .merit ul li:nth-child(1){opacity:0;}
.sec5.in-view .merit ul li:nth-child(1){
	animation-name: fadeIn;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
	animation-delay:0.6s;
}
.sec5 .merit ul li:nth-child(2){opacity:0;}
.sec5.in-view .merit ul li:nth-child(2){
	animation-name:  fadeIn;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
	animation-delay:0.7s;
}
.sec5 .merit ul li:nth-child(3){opacity:0;}
.sec5.in-view .merit ul li:nth-child(3){
	animation-name: fadeIn;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
	animation-delay:0.8s;
}
.sec5 .merit ul li:nth-child(4){opacity:0;}
.sec5.in-view .merit ul li:nth-child(4){
	animation-name:  fadeIn;;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
	animation-delay:0.9s;
}


 .sec5 .merit ul li .tag{opacity:0;}
 .sec5 .merit ul li .title{opacity:0;}
 .sec5 .merit ul li .txt{opacity:0;}
 .sec5.in-view .merit ul li:nth-child(1) .tag,
 .sec5.in-view .merit ul li:nth-child(1) .title,
 .sec5.in-view .merit ul li:nth-child(1) .txt{
 	animation-name: fadeRightText;animation-duration: 0.8s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
 	animation-delay:0.7s;
 }
 .sec5.in-view .merit ul li:nth-child(1) .title{animation-delay:0.8s;}
 .sec5.in-view .merit ul li:nth-child(1)  .txt{animation-delay:0.9s;} 

  .sec5.in-view .merit ul li:nth-child(2) .tag,
 .sec5.in-view .merit ul li:nth-child(2) .title,
 .sec5.in-view .merit ul li:nth-child(2) .txt{
 	animation-name: fadeLeftText;animation-duration: 0.8s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
 	animation-delay:0.8s;
 }
 .sec5.in-view .merit ul li:nth-child(2) .title{animation-delay:0.9s;}
 .sec5.in-view .merit ul li:nth-child(2)  .txt{animation-delay:1s;} 

 .sec5.in-view .merit ul li:nth-child(3) .tag,
 .sec5.in-view .merit ul li:nth-child(3) .title,
 .sec5.in-view .merit ul li:nth-child(3) .txt{
 	animation-name: fadeRightText;animation-duration: 0.8s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
 	animation-delay:0.9s;
 }
 .sec5.in-view .merit ul li:nth-child(3) .title{animation-delay:1s;}
 .sec5.in-view .merit ul li:nth-child(3)  .txt{animation-delay:1.1s;} 


  .sec5.in-view .merit ul li:nth-child(4) .tag,
 .sec5.in-view .merit ul li:nth-child(4) .title,
 .sec5.in-view .merit ul li:nth-child(4) .txt{
 	animation-name: fadeLeftText;animation-duration: 0.8s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
 	animation-delay:1s;
 }
 .sec5.in-view .merit ul li:nth-child(4) .title{animation-delay:1.1s;}
 .sec5.in-view .merit ul li:nth-child(4)  .txt{animation-delay:1.2s;} 

@keyframes fadeLeftText{
 0%{transform:translate3d(-40px, 0, 0);opacity:0;}
  100%{transform:translate3d(0px, 0, 0);opacity:1;}
}
@keyframes fadeRightText{
 0%{transform:translate3d(40px, 0, 0);opacity:0;}
  100%{transform:translate3d(0%, 0, 0);opacity:1;}
}



/*sec6 motion*/
.sec6 .conarea>div{opacity:0;}
.sec6.in-view .conarea>div{
	animation-name: fadeUp2;animation-duration: 0.95s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
	animation-delay:0.02s;
}
.sec6.in-view .conarea>div.ir{
animation-name: fadeDown2;animation-duration: 0.95s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
animation-delay:0.02s;
}

.sec6 .conarea>div .titlewrap h3.cate{
 opacity:0;
}
.sec6.in-view .conarea>div .titlewrap h3.cate{
	animation-name: fadeUp;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
	animation-delay:0.2s;
}
.sec6 .conarea>div .titlewrap h4{
	 opacity:0;
}
.sec6.in-view .conarea>div .titlewrap h4{
	 animation-name: fadeUp;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
	 animation-delay:0.3s;
}
.sec6 .conarea .media .play{opacity:0;}
.sec6.in-view .conarea .media .play{
	animation-name: fadeUp;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
	 animation-delay:0.4s;
}
.sec6 .conarea .ir .ir_info{opacity:0;}
.sec6.in-view .conarea .ir .ir_info{
	animation-name: fadeUp;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
	 animation-delay:0.4s;
}
.sec6 .conarea>div.ir .more_btn{opacity:0;}
.sec6.in-view .conarea>div.ir .more_btn{
	animation-name: fadeUp;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
	 animation-delay:0.5s;
}

/*sec7 motion*/
.sec7 .titlewrap{opacity:0;}
.sec7.in-view .titlewrap{
	animation-name: fadeUp;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
}
.sec7 .news{opacity:0;}
.sec7.in-view .news{
	animation-name: fadeUp;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
	animation-delay:0.2s;
}
/*sec8 motion*/
.sec8 .boxwrap .txtwrap .cate{
 opacity:0;
}
.sec8 .boxwrap .txtwrap h4{opacity:0;}
.sec8 .boxwrap .bg{transform:scale(1.17);}
.sec8.in-view .boxwrap .txtwrap .cate{
animation-name: fadeLeft;animation-duration: 0.95s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
}
.sec8.in-view .boxwrap .txtwrap h4{
	animation-name: fadeLeft;animation-duration: 0.95s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
	animation-delay:0.1s;
}
.sec8.in-view .boxwrap .bg{transform:scale(1);transition:transform 1.3s ease-in-out;transform-origin:center;transition-delay:0.1s;}
.sec8 .boxwrap .btn_wrap{transform:scale(0);}
.sec8.in-view .boxwrap .btn_wrap{transform:scale(1);transition:transform 0.95s ease;transform-origin:right bottom;}