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





/* visual */
#visual{overflow:hidden;width:100vw;height:100vh;}
.visual{overflow:hidden;position:relative;width:100%;height:100%;}
.visual .swiper-slide{overflow:hidden;position:relative;width:100%;height:100%;}
.visual .swiper-slide .slide-inner{
	overflow:hidden;
	width:100%;height:100%;
    position: absolute;left:0;top:0;z-index:100;
    background-size: cover;
    background-position: center;
    display:flex;justify-content:center;align-items:center;
    text-align: left;
}
.visual .swiper-slide .bg{
	position:absolute;left:0;top:0;
	width:100%;height:100%;
	transition:all 1.2s;
}
.visual .swiper-slide .bg>div{width:100%;height:100%;
position: relative;
}
.visual .swiper-slide .bg>div::after{
content:'';
background-color: #000;
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.1;
}
.visual .swiper-slide .bg>div video{width:100%;height:100%;object-fit:cover;}
/* .visual .swiper-slide.v1 .bg>div{background:url(/images/main/visual1.jpg) no-repeat center;background-size:cover}
.visual .swiper-slide.v2 .bg>div{background:url(/images/main/visual2.jpg) no-repeat center;background-size:cover}
.visual .swiper-slide.v3 .bg>div{background:#000 url(/images/main/visual3.png) no-repeat center;background-size:cover}
.visual .swiper-slide.v4 .bg>div{background:url(/images/main/visual4.jpg) no-repeat center;background-size:cover}
.visual .swiper-slide.v5 .bg>div{background:url(/images/main/visual5.jpg) no-repeat center;background-size:cover}
.visual .swiper-slide.v6 .bg>div{background:url(/images/main/visual6.jpg) no-repeat center;background-size:cover}
.visual .swiper-slide.v7 .bg>div{background:#000 url(/images/main/visual7.png) no-repeat center;background-size:cover} */
.visual .txtWrap{
	position:absolute;left:0;top:50%;z-index:100;
	transform:translate(120px, -50%);
	width:100%;
	box-sizing:border-box;
	padding:0 3%;
	font-size:min(5vw, 100px);color:#fff;font-weight:600;line-height:1em;
	opacity:0;
	transition:all 1s;
}
.visual .txtWrap span{display:block;font-size:min(3.4vw, 58px);}
.visual.in-view .txtWrap{opacity:1;transform:translateX(0px)translateY(calc(-50% ));}
.visual .ctr{
	position:absolute;right:10%;bottom:15%;z-index:100;
	width:110px;height:110px;
	/*transform:translate(-50%,-50%);*/
	cursor:pointer;
}
.visual .ctr .bg{
	position:absolute;left:50%;top:50%;
	width:100%;height:100%;
	transform:translate(-50%,-50%) rotate(45deg);
	background:#000;
}
.visual .ctr .pageNum{
	display:flex;align-items:center;justify-content:center;
	position:relative;z-index:10;
	width:100%;height:100%;
}
.visual .ctr .pageNum .thisNum{font-size:14px;color:#fff;}
.visual .ctr .pageNum .bar{
	display:block;
	width:1px;height:10px;
	margin:0 10px;
	background:#808080;
}
.visual .ctr .pageNum .totalNum{font-size:14px;color:rgba(255,255,255,0.4);}
.visual .vpaging{display:none;}





/**/
.mainTitle1{font-size:19px;color:#000;font-weight:600;}
.mainTitle2{font-size:40px;color:#000;font-weight:700;line-height:1.3em;}
.btnMore{font-size:13px;color:#666;font-weight:500;}




/* sec1 */
.sec1{
	padding:135px 3% 110px;
	border-bottom:1px solid #7f7f7f;
}
.sec1 .tit{}
.sec1 .tit>div{font-size:5vw;font-weight:600;color:#000;line-height:1.1em;}
.sec1 .txt{
	margin:100px 0 0;
	text-align:right;
}
.sec1 .txt p{font-size:19px;color:#666;line-height:1.5em;}
.sec1 .txt a{display:block;margin-top:20px;font-size:13px;color:#000;font-weight:500;}





/* sec2 */
.sec2{padding:0 3%;}
.sec2>div{padding:35px 0 290px;border-bottom:1px solid #7f7f7f;}
.sec2>div .conwrap{margin:95px 0 0;}
.sec2>div .conwrap .mobileService{display:none;}
.sec2>div .conwrap ul{
	display:flex;flex-wrap:wrap;
	position:relative;
	gap:56px;	
	width:100%;height:100%;min-height:644px;
}
.sec2>div .conwrap ul li{
	flex:1;
	width:408px;
	aspect-ratio:408/644;
}
.sec2>div .conwrap ul li .card{
	position:relative;
	width:100%;
	aspect-ratio:408/644;
}
/*
.sec2>div .conwrap ul li:nth-child(1){transform:translate(36vw,0);}
.sec2>div .conwrap ul li:nth-child(2){transform:translate(12vw,0) rotate(-5deg);}
.sec2>div .conwrap ul li:nth-child(3){transform:translate(-12vw,0) rotate(10deg);}
.sec2>div .conwrap ul li:nth-child(4){transform:translate(-36vw,0) rotate(-15deg);}
*/
.sec2>div .conwrap ul li:nth-child(1) .card{
	background:url(/images/main/sec2_img1.jpg) no-repeat center;
	background-size:cover;
}
.sec2>div .conwrap ul li:nth-child(2) .card{
	background:url(/images/main/sec2_img2.jpg) no-repeat center;
	background-size:cover;
}
.sec2>div .conwrap ul li:nth-child(3) .card{
	background:url(/images/main/sec2_img3.jpg) no-repeat center;
	background-size:cover;
}
.sec2>div .conwrap ul li:nth-child(4) .card{
	background:url(/images/main/sec2_img4.jpg) no-repeat center;
	background-size:cover;
}
.sec2>div .conwrap ul li .card:after{
	display:block;content:"";
	width:100%;height:100%;
	background:rgba(0,0,0,0.8);
	position:absolute;left:0;top:0;
	transform-origin:bottom;
	transform:scaleY(0);
	transition:all 0.6s;
}
.sec2>div .conwrap ul li .card .stit{
	position:absolute;left:20px;top:0;z-index:10;
	width:calc(100% - 40px);
	border-bottom:1px solid #d6d6d6;	
}
.sec2>div .conwrap ul li .card .stit>div{
	display:flex;align-items:center;
	width:50%;height:88px;
	border-right:1px solid #d6d6d6;
}
.sec2>div .conwrap ul li .card .stit>div .num{
	width:72px;
	font-size:36px;color:#fff;font-weight:500;text-align:center;
}
.sec2>div .conwrap ul li .card .stit>div .kwangjang{
	width:calc(100% - 72px);
	font-size:14px;color:#fff;font-weight:500;
}
.sec2>div .conwrap ul li .card .hiddenTxt{
	position:absolute;left:0;bottom:0;z-index:10;
	box-sizing:border-box;
	padding:35px 30px;
	font-size:17px;color:#fff;line-height:1.7em;
	transform:translateY(40px);opacity:0;
	transition:all 0.6s;
}
.sec2>div .conwrap ul li .tit{
	margin-top:25px;font-size:25px;color:#000;font-weight:600;text-align:center;
	opacity:0;
	transform:translateY(-40px);
}

.sec2>div .conwrap ul li:hover .card:after{transform:scaleY(1);}
.sec2>div .conwrap ul li:hover .card .hiddenTxt{
	transform:translateY(0);opacity:1;
	transition:all 0.6s;
}





/* sec3 */
.sec3{padding:35px 3%;}
.sec3 .titlearea{display:flex;align-items:center;justify-content:space-between;}
.sec3 .mainTitle2{font-size:66px;}
.sec3 .conwrap{
	overflow:hidden;
	position:relative;
	padding:45px 0;
}
.sec3 .conwrap .custom-cursor{
	overflow:hidden;
	position: absolute;z-index:200;
	width:54px;height:54px;
	background:#000;
	opacity:0;
	pointer-events: none;
	transform-origin:left;
}
.sec3 .conwrap .custom-cursor .icon{
	display:flex;align-items:center;justify-content:center;
	width:54px;height:54px;
	font-size:20px;color:#fff;
}
.sec3 .conwrap .custom-cursor .icon .txt{
	display:flex;align-items:center;
	position:absolute;left:54px;top:0;z-index:10000;
	width:100px;height:100%;
	font-size:14px;color:#fff;
}


.sec3 .conwrap ul{
	display:flex;flex-wrap:wrap;justify-content:space-between;row-gap:130px;
	margin-top:80px;
}
.sec3 .conwrap ul li{transform:scale(1);transition:all 1s;}
.sec3 .conwrap ul li img{width:100%;}
.sec3 .conwrap ul li:nth-child(1){width:37.2%;aspect-ratio:1/1;}
.sec3 .conwrap ul li:nth-child(2){width:59.8%;aspect-ratio:1076/668;}
.sec3 .conwrap ul li:nth-child(3){width:59.8%;aspect-ratio:1076/668;}
.sec3 .conwrap ul li:nth-child(4){width:37.2%;aspect-ratio:1/1;}
.sec3 .conwrap ul li:nth-child(5){width:37.2%;aspect-ratio:1/1;}
.sec3 .conwrap ul li:nth-child(6){width:59.8%;aspect-ratio:1076/668;}
.sec3 .conwrap ul li a{display:block;}
.sec3 .conwrap ul li .thumb{position:relative;background:#000;width:100%;}
.sec3 .conwrap ul li .thumb:after{
	display:block;content:"";
	position:absolute;left:50%;top:0;
	width:100%;height:100%;
	transform:translateX(-50%);
	background:rgba(0,0,0,0.95);
	transform-origin:left bottom;
	transition:transform 1s;
}
.sec3 .conwrap ul li .thumb .vod{
	position:absolute;left:0;top:0;z-index:10;
	width:100%;height:100%;
	opacity:0;
	transition:all 0.4s;
}
.sec3 .conwrap ul li:hover .thumb .vod{opacity:1;}
.sec3 .conwrap ul li .thumb .vod video{width:100%;height:100%;object-fit:cover;}
.sec3 .conwrap ul li .tit{margin-top:25px;font-size:21px;color:#000;font-weight:500;}




/* sec4 */
.sec4{padding:0 0 0px;}
.sec4 .textBg{overflow:hidden;position:relative;margin:120px 0 0px;height:235px;}
.sec4 .textBg .txt{
	position:absolute;left:0%;top:0;display:flex;white-space:nowrap;
	font-family:"pretendard";font-size:10vw;font-weight:700;line-height:1em;
	pointer-events:none;
}
.sec4 .textBg .txt>div{margin-right:60px;}
.sec4 .textBg .txt.stroke{
    color:transparent;
    -webkit-text-stroke: 2px #000;
    z-index:1;
}
.sec4 .textBg .txt.fill{
    color:#000;height:100%;
    z-index:3;
    opacity:1;
    --mouse-x: 50%;
    --mouse-y: 50%;
    --circle-size: 0%;
    /* clip-path로 원형 마스크 적용 */
    clip-path: circle(var(--circle-size) at var(--mouse-x) var(--mouse-y));
	will-change: clip-path;
}
@keyframes textScroll {
	0%{
		transform: translate(0, 0);
	}
	100%{
		transform: translate(-50%, 0);
	}
}




/* sec5 */
.sec5{
	overflow:hidden;
	position:relative;
	width:100%;height:100vh;
}
.sec5 .projectList{
	overflow:hidden;
	position:relative;
	width:100%;height:100vh;
}
.sec5 .projectList ul{}
.sec5 .projectList ul li{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    clip-path: inset(0 0 0 0);
    z-index: 1;
}
.sec5 .projectList ul li:nth-child(1){z-index:30;}
.sec5 .projectList ul li:nth-child(2){z-index:20;}
.sec5 .projectList ul li:nth-child(3){z-index:10;}
.sec5 .projectList>ul>li .bg{
	position: absolute;
	left:0;
	top:0;
	width:100%;height:100%;
	bac
}
.sec5 .projectList>ul>li .info{
	position:absolute;left:3%;bottom:105px;
	box-sizing:border-box;
	width:94%;	
}
.sec5 .projectList>ul>li .info .tit1{font-size:19px;color:#fff;}
.sec5 .projectList>ul>li .info .tit2{margin:30px 0 0;font-size:70px;color:#fff;font-weight:500;}
.sec5 .projectList>ul>li .info .tit3{font-size:23px;color:#fff;font-weight:500;}
.sec5 .projectList>ul>li .info .line{width:100%;height:1px;margin:40px 0 50px;background:rgba(255,255,255,0.5);}
.sec5 .scrollDown{
	position:absolute;left:50%;top:50%;z-index:100;
	transform:translate(-50%,-50%);
	width:110px;height:110px;
}
.sec5 .scrollDown .bg{
	position:absolute;left:50%;top:50%;
	width:100%;height:100%;
	transform:translate(-50%,-50%) rotate(45deg);
	background:#000;
}
.sec5 .scrollDown .con{
	display:flex;align-items:center;justify-content:center;
	position:relative;z-index:10;
	width:100%;height:100%;
}
.sec5 .scrollDown .con .num{
	display:flex;align-items:center;justify-content:center;
}
.sec5 .scrollDown .con .num .sec5ThisNum{font-size:14px;color:#fff;}
.sec5 .scrollDown .con .num .bar{width:15px;height:1px;margin:0 10px;background:rgba(255,255,255,0.4);}
.sec5 .scrollDown .con .num .sec5TotalNum{font-size:14px;color:rgba(255,255,255,0.4);}
.sec5 .scrollDown .con .txt{margin-top:7px;font-size:12px;color:#fff;text-align:center;}





/* sec6 */
.sec6{padding:300px 3%;}
.sec6 .inner{
	padding:35px 0 0;
	border-top:1px solid #7f7f7f;
}
.sec6 .titlearea{display:flex;align-items:center;justify-content:space-between;}
.sec6 h4{padding:45px 0 90px;}
.sec6 .conwrap{
	overflow:hidden;
	position:relative;
	aspect-ratio:1800/600;
	clip-path:inset(15% 10% 15% 10%);
	transition:all 1.4s;
}
.sec6 .conwrap.in-view{clip-path:inset(0% 0% 0% 0%);}
.sec6 .conwrap ul li{opacity:0;transform:translateY(40px);transition:all 1s;}
.sec6 .conwrap.in-view ul li{opacity:1;transform:translateY(0);transition:all 1s 1s;}
.sec6 .conwrap .bg{
	position:absolute;left:0;top:0;
	width:100%;height:100%;
}
.sec6 .conwrap .bg>div{
	position:absolute;left:0;top:0;
	width:100%;height:100%;
	opacity:0;transform:scale(1.1);
	transition:all 1s;
}
.sec6 .conwrap .bg>div.bg1{
	background:url(/images/main/sec6_bg1.jpg) no-repeat;
	background-size:cover;
}
.sec6 .conwrap .bg>div.bg2{
	background:url(/images/main/sec6_bg2.jpg) no-repeat;
	background-size:cover;
}
.sec6 .conwrap .bg>div.bg3{
	background:url(/images/main/sec6_bg3.jpg) no-repeat;
	background-size:cover;
}
.sec6 .conwrap .bg>div.bg4{
	background:url(/images/main/sec6_bg4.jpg) no-repeat;
	background-size:cover;
}
.sec6 .conwrap .bg>div.on{opacity:1;transform:scale(1);}

.sec6 .conwrap ul{display:flex;flex-wrap:wrap;position:relative;z-index:100;width:100%;height:100%;}
.sec6 .conwrap ul li{
	box-sizing:border-box;
	display:flex;align-items:center;justify-content:center;
	width:25%;height:100%;
	box-shadow:1px 0 0 rgba(255,255,255,0.5) inset;
	text-align:center;
}
.sec6 .conwrap ul li>div{transition:all 1s;}
.sec6 .conwrap ul li:hover>div{transform:translateY(-20px);}
.sec6 .conwrap ul li .icon{
	position: relative;
	width: 70px;
	height: 70px;
	margin: 0 auto;
}
.sec6 .conwrap ul li .icon .hov{
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
}
.sec6 .conwrap ul li:hover .icon .origin{
	opacity: 0;
}
.sec6 .conwrap ul li:hover .icon .hov{
	opacity: 1;
}
.sec6 .conwrap ul li:nth-child(1):hover .icon svg .color{    fill: #04c129; stroke: #04c129;}
.sec6 .conwrap ul li:nth-child(1):hover .icon svg .fill{fill: #fff;}
.sec6 .conwrap ul li:nth-child(2):hover .icon svg .color{fill:#FE531F;stroke:#FE531F;}
.sec6 .conwrap ul li:nth-child(2):hover .icon svg .fill{fill: #fff;}
.sec6 .conwrap ul li:nth-child(2):hover .icon svg .fill2{stroke: transparent;}
.sec6 .conwrap ul li:nth-child(3):hover .icon svg .color{fill:#fff;}
.sec6 .conwrap ul li:nth-child(4):hover .icon svg .color{fill:#c0a804;}
.sec6 .conwrap ul li .tit{margin:40px 0 20px;font-size:36px;color:#fff;font-weight:500;}
.sec6 .conwrap ul li .kr{font-size:21px;color:#fff;font-weight:500;}
.sec6 .conwrap ul li .txt{margin-top:10px;font-size:17px;color:#fff;line-height:1.7em;}

.sec6 .mobileESG{display:none;}





/* sec7 */
.sec7{padding:0 3%;}
.sec7 .inner{
	padding:35px 0 275px;
	border-top:1px solid #7f7f7f;
}
.sec7 .titlearea{display:flex;align-items:center;justify-content:space-between;}
.sec7 h4{padding:45px 0 90px;}
.sec7 .conwrap{
	overflow:hidden;
	position:relative;
}
.sec7 .conwrap ul{
	display:flex;flex-wrap:wrap;
	border-left:1px solid #ccc;
}
.sec7 .conwrap ul li{
	box-sizing:border-box;
	width:25%;
	padding:40px 50px 20px;
	border-right:1px solid #ccc;
	text-align:center;
}
.sec7 .conwrap ul li .icon{}
.sec7 .conwrap ul li .icon>div{
	display:flex;align-items:center;justify-content:center;
	width:134px;height:134px;
	margin:0 auto;
	background:#000;
	border-radius:50%;
}
.sec7 .conwrap ul li .icon circle,
.sec7 .conwrap ul li .icon polyline,
.sec7 .conwrap ul li .icon line,
.sec7 .conwrap ul li .icon path{}
.sec7 .conwrap ul li.in-view:nth-child(1) .icon circle{
	stroke-dasharray:200px;stroke-dashoffset:200px;
	animation:svgImg1 2s;animation-fill-mode:forwards;
}
.sec7 .conwrap ul li.in-view:nth-child(1) .icon polyline{
	stroke-dasharray:50px;stroke-dashoffset:50px;
	animation:svgImg2 2s;animation-fill-mode:forwards;
}
.sec7 .conwrap ul li.in-view:nth-child(1) .icon line{
	stroke-dasharray:20px;stroke-dashoffset:20px;
	animation:svgImg3 2s;animation-fill-mode:forwards;
}
.sec7 .conwrap ul li.in-view:nth-child(2) .icon line{
	stroke-dasharray:50px;stroke-dashoffset:50px;
	animation:svgImg2 2s;animation-fill-mode:forwards;
}
.sec7 .conwrap ul li.in-view:nth-child(2) .icon path{
	stroke-dasharray:180px;stroke-dashoffset:180px;
	animation:svgImg4 2s;animation-fill-mode:forwards;
}
.sec7 .conwrap ul li.in-view:nth-child(3) .icon line{
	stroke-dasharray:20px;stroke-dashoffset:20px;
	animation:svgImg3 2s;animation-fill-mode:forwards;
}
.sec7 .conwrap ul li.in-view:nth-child(3) .icon path{
	stroke-dasharray:100px;stroke-dashoffset:100px;
	animation:svgImg5 2s;animation-fill-mode:forwards;
}
.sec7 .conwrap ul li.in-view:nth-child(4) .icon line{
	stroke-dasharray:20px;stroke-dashoffset:20px;
	animation:svgImg3 2s;animation-fill-mode:forwards;
}
.sec7 .conwrap ul li.in-view:nth-child(4) .icon polyline{
	stroke-dasharray:180px;stroke-dashoffset:180px;
	animation:svgImg4 2s;animation-fill-mode:forwards;
}
.sec7 .conwrap ul li.in-view:nth-child(4) .icon path{
	stroke-dasharray:100px;stroke-dashoffset:100px;
	animation:svgImg5 2s;animation-fill-mode:forwards;
}
.sec7 .conwrap ul li .tit{
	margin:40px 0 20px;
	font-size:26px;color:#000;font-weight:700;line-height:1.2em;
}
.sec7 .conwrap ul li .txt{font-size:17px;color:#555;line-height:1.7em;}

@keyframes svgImg1{
	0%{stroke-dashoffset: 200px;}
	100%{stroke-dashoffset: 0;}
}
@keyframes svgImg2{
	0%{stroke-dashoffset: 50px;}
	100%{stroke-dashoffset: 0;}
}
@keyframes svgImg3{
	0%{stroke-dashoffset: 20px;}
	100%{stroke-dashoffset: 0;}
}
@keyframes svgImg4{
	0%{stroke-dashoffset: 180px;}
	100%{stroke-dashoffset: 0;}
}
@keyframes svgImg5{
	0%{stroke-dashoffset: 100px;}
	100%{stroke-dashoffset: 0;}
}




/* sec8 */
.sec8{padding:0 3%;}
.sec8 .inner{padding:0 0 275px;}
.sec8 .titlearea{display:flex;align-items:center;justify-content:space-between;}
.sec8 h4{padding:45px 0 90px;}
.sec8 .conwrap{position:relative;}
.sec8 .conwrap:before{
	display:block;content:"";
	position:absolute;left:-50%;top:0;
	width:200%;height:1px;
	background:#ccc;
}
.sec8 .conwrap:after{
	display:block;content:"";
	position:absolute;left:-50%;bottom:0;
	width:200%;height:1px;
	background:#ccc;
}
.sec8 .conwrap .news{}
.sec8 .conwrap .news .swiper-slide{	
	box-sizing:border-box;
	max-width:448px;
	margin-right:-1px;
	box-shadow:1px 1px 0 #ccc inset, -1px -1px 0 #ccc inset;
}
.sec8 .conwrap .news .swiper-slide a{
	display:block;
	padding:55px 35px;
}
.sec8 .conwrap .news .swiper-slide a .date{font-size:17px;color:#000;font-weight:500;}
.sec8 .conwrap .news .swiper-slide a .thumb{
	margin:30px 0;
	width: 100%;
	aspect-ratio: 380 / 226;
}
.sec8 .conwrap .news .swiper-slide a .thumb img{
	width:100%;
	height:100%;
	object-fit:cover;
}
.sec8 .conwrap .news .swiper-slide a .tit{
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	font-size:21px;color:#000;font-weight:600;
}
.sec8 .conwrap .news .swiper-slide a .txt{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin:15px 0 25px;
	font-size:17px;color:#555;line-height:1.7em; height: 3.4em; word-break:break-word;
}
.sec8 .conwrap .news .swiper-slide a .more{font-size:13px;color:#555;}





/* sec9 */
.sec9{padding:0 3%;}
.sec9 .inner{display:flex;flex-wrap:wrap;justify-content:space-between;padding:0 0 275px;}
.sec9 .inner .txtarea{
	box-sizing:border-box;
	width:47%;
	padding:35px 0 75px;
	border-top:1px solid #7f7f7f;border-bottom:1px solid #7f7f7f;
}
.sec9 .inner .txtarea h4{margin:70px 0 0;}
.sec9 .inner .txtarea .line{
	width:1px;height:80px;
	background:#7f7f7f;
	margin:35px 0;
}
.sec9 .inner .txtarea p{font-size:17px;color:#666;line-height:1.7em;}
.sec9 .inner .banner{
	display:flex;align-items:center;justify-content:center;
	position:relative;
	width:47%;
}
.sec9 .inner .banner .bg{
	position:absolute;left:0;top:0;
	width:100%;height:100%;
	background:url(/images/main/sec9_bg.jpg) no-repeat;
	background-size:cover;
}
.sec9 .inner .banner .btn{
	display:flex;align-items:center;justify-content:center;
	position:absolute;left:50%;top:50%;z-index:100;
	width:140px;height:140px;
	transform:translate(-50%,-50%);
	background:0;border:1px solid #fff;
	text-align:center;
}
.sec9 .inner .banner .btn a{display:block;}
.sec9 .inner .banner .btn .tit{font-size:17px;color:#fff;font-weight:500;}
.sec9 .inner .banner .btn .arr{margin-top:5px;font-size:17px;color:#fff;}
.sec9 .inner .banner .deco{
	overflow:hidden;
	position:absolute;left:0;top:0;
	width:100%;height:100%;
}
.sec9 .inner .banner .deco>div.d1{position:absolute;left:170px;bottom:-5px;}
.sec9 .inner .banner .deco>div.d1 .g2{opacity:0;}
.sec9 .inner .banner .deco>div.d2{position:absolute;right:170px;top:0px;}
.sec9 .inner .banner .deco>div.d2 .g2{opacity:0;}






/* animation */
.sec1 .txt p{opacity:0;transform:translateX(-60px);transition:all 1.4s;}
.sec1 .txt a{opacity:0;transform:translateX(-60px);transition:all 1.4s;}

.sec1 .txt.in-view p{opacity:1;transform:translateX(0);transition:all 1.4s;}
.sec1 .txt.in-view a{opacity:1;transform:translateX(0);transition:all 1.4s 0.2s;}


.sec2>div .conwrap ul{opacity:0;transform:translateY(100px);transition:all 0.7s;}
.sec2>div .conwrap ul.in-view{opacity:1;transform:translateY(0px);}

.sec2>div .conwrap ul li.in-view .tit{opacity:1;transform:translateY(0px);}
/*
.sec2>div .conwrap ul li.in-view:nth-child(1){
	animation:sec2Ani1_1 0.7s forwards 0.7s, sec2Ani2 1.2s forwards 1.6s;
}
.sec2>div .conwrap ul li.in-view:nth-child(2){
	animation:sec2Ani1_2 0.7s forwards 0.7s, sec2Ani2 1.2s forwards 1.6s;
}
.sec2>div .conwrap ul li.in-view:nth-child(3){
	animation:sec2Ani1_3 0.7s forwards 0.7s, sec2Ani2 1.2s forwards 1.6s;
}
.sec2>div .conwrap ul li.in-view:nth-child(4){
	animation:sec2Ani1_4 0.7s forwards 0.7s, sec2Ani2 1.2s forwards 1.6s;
}
.sec2>div .conwrap ul li.in-view .tit{animation:sec2Ani3 1s forwards 2s}




@keyframes sec2Ani1_1{
	100%{transform:translate(36vw,0) rotate(0deg);}
}
@keyframes sec2Ani1_2{
	100%{transform:translate(12vw,0) rotate(0deg);}
}
@keyframes sec2Ani1_3{
	100%{transform:translate(-12vw,0) rotate(0deg);}
}
@keyframes sec2Ani1_4{
	100%{transform:translate(-36vw,0) rotate(0deg);}
}
@keyframes sec2Ani2{
	100%{transform:translate(0,0) rotate(0deg);}
}
@keyframes sec2Ani3{
	100%{opacity:1;transform:translateY(0);}
}
*/


.sec3 h4{opacity:0;transform:translateX(60px);transition:all 1.4s;}
.sec3 h4.in-view{opacity:1;transform:translateX(0);transition:all 1.4s;}
.sec3 ul li{opacity:0;transform:scale(0.8) translateY(60px);}
.sec3 ul li.in-view{opacity:1;transform:scale(1) translateY(0);transition:all 1.4s;}
.sec3 ul li.in-view .thumb:after{
	transition:all 1.4s;
	transform:translateX(-50%) scaleY(0);
}

.sec6 .titlearea h3{opacity:0;transform:translateX(60px);transition:all 1.4s;}
.sec6 .titlearea.in-view h3{opacity:1;transform:translateX(0);transition:all 1.4s;}
.sec6 h4{opacity:0;transform:translateX(60px);transition:all 1.4s;}
.sec6 h4.in-view{opacity:1;transform:translateX(0);transition:all 1.4s 0.1s;}

.sec7 .titlearea h3{opacity:0;transform:translateX(60px);transition:all 1.4s;}
.sec7 .titlearea.in-view h3{opacity:1;transform:translateX(0);transition:all 1.4s;}
.sec7 h4{opacity:0;transform:translateX(60px);transition:all 1.4s;}
.sec7 h4.in-view{opacity:1;transform:translateX(0);transition:all 1.4s 0.1s;}

.sec8 .titlearea h3{opacity:0;transform:translateX(60px);transition:all 1.4s;}
.sec8 .titlearea.in-view h3{opacity:1;transform:translateX(0);transition:all 1.4s;}
.sec8 h4{opacity:0;transform:translateX(60px);transition:all 1.4s;}
.sec8 h4.in-view{opacity:1;transform:translateX(0);transition:all 1.4s 0.1s;}

.sec9 .inner .txtarea h3{opacity:0;transform:translateX(60px);transition:all 1.4s;}
.sec9 .inner .txtarea.in-view h3{opacity:1;transform:translateX(0);transition:all 1.4s;}
.sec9 .inner .txtarea h4{opacity:0;transform:translateX(60px);transition:all 1.4s;}
.sec9 .inner .txtarea.in-view h4{opacity:1;transform:translateX(0);transition:all 1.4s 0.1s;}
.sec9 .inner .txtarea .line{transform:scaleY(0);transform-origin:top;transition:all 1.4s;}
.sec9 .inner .txtarea.in-view .line{transform:scaleY(1);transition:all 1.4s 0.1s;}
.sec9 .inner .txtarea p{opacity:0;transform:translateX(60px);transition:all 1.4s;}
.sec9 .inner .txtarea.in-view p{opacity:1;transform:translateX(0);transition:all 1.4s 0.6s;}