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

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

body #fp-nav{right:4% !important;z-index:100;}
body #fp-nav ul li{
    display: block;
    width:5px;height:5px;
    margin:24px 0px;
    position: relative;
}
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:100%;height:100%;margin:6px 0;border-radius:50%;background:0;
	border:1px solid #fff;
	transition:all 0.6s;
}
body #fp-nav ul li a.active span,
body #fp-nav ul li:hover a.active span{width:5px;height:5px;margin:0 0 0 0;border-radius:50%;background:#fff;transition:all 0.6s;}
body #fp-nav ul li.on{margin-bottom:63px;}
body #fp-nav ul li.on:after{
	display:block;content:"";
	width:1px;height:39px;
	background:#fff;
	position:absolute;left:50%;top:100%;
	margin:12px 0 12px -1px;
	transition:all 0.6s;
}
body #fp-nav ul li:last-child{display:none;}
body #fp-nav ul li.on:nth-child(6):after{display:none;}


body.bl #fp-nav ul li a span,
body.bl #fp-nav ul li:hover a span{border:1px solid #000;}
body.bl #fp-nav ul li a.active span,
body.bl #fp-nav ul li:hover a.active span{background:#000;}
body.bl #fp-nav ul li.on:after{background:#000;}



/* sec1 */
.sec1{}
.visual{width:100%;height:100%;}
.visual .swiper-slide{
	position:relative;
	width:100%;height:100%;
}
.visual .swiper-slide .bg{
	position:absolute;left:0;top:0;
	width:100%;height:100%;
}
.visual .textarea{
	box-sizing:border-box;
	position:absolute;left:0;top:50%;z-index:10;
	transform:translateY(-50%);
	width:100%;
	padding:0 5%;
}
.visual .textarea>div{overflow:hidden;}
.visual .textarea>div>span{display:block;font-family:"Cormorant Garamond";font-size:8vw;color:#fff;}
.visual .ctr{
	display:flex;align-items:center;
	position:absolute;left:5%;bottom:60px;z-index:10;
}
.visual .ctr .bar{
	position:relative;
	width:15vw;height:3px;
	background:rgba(255,255,255,0.3);
}
.visual .ctr .bar .line{
	position:absolute;left:0;top:0;
	width:50%;height:100%;
	background:#fff;
	transition:all 0.6s;
}
.visual .ctr .number{
	display:flex;align-items:center;
	margin:0 29px;
	font-size:15px;color:rgba(255,255,255,0.5);font-weight:500;
}
.visual .ctr .number .this{color:#fff;}
.visual .ctr .number span{margin:0 5px;}
.visual .ctr .btns{}
.visual .ctr .btns a{margin-right:20px;}

.visual .scroll{
	position:absolute;right:3%;bottom:0px;z-index:10;
}
.visual .scroll .bar{
	position:relative;
	width:1px;height:120px;
	background:rgba(255,255,255,0.4);
}
.visual .scroll .bar:after{
	display:block;content:"";
	width:3px;height:53px;
	background:#fff;
	position:absolute;left:50%;top:0;
	transform:translateX(-50%);
	animation:scrollAni 1.6s infinite linear;
}
.visual .scroll .txt{
	position:absolute;right:-8px;top:20px;
	font-size:13px;color:#fff;font-weight:500;transform:rotate(-90deg);
}
@keyframes scrollAni{
	0%{transform:translate(-50%,0);}
	100%{transform:translate(-50%,250%);}
}



.visual .textarea>div>span{transform:translateY(100%);}
.ani .visual .textarea>div>span{transform:translateY(0);}
.ani .visual .textarea>div:nth-child(1)>span{transition:all 1.2s;}
.ani .visual .textarea>div:nth-child(2)>span{transition:all 1.2s 0.2s;}




/* sec2 */
.sec2{position:relative;background:#efefef;}
.sec2 .bg{	
	overflow:hidden;
	position:absolute;left:0;top:80px;
	width:100%;height:calc(100% - 80px);
}
.sec2 .bg .line1{
	width:100%;height:1px;
	background:#ccc;
	position:absolute;left:0;top:0;
}
.sec2 .bg .line2{
	width:1px;height:100%;
	background:#ccc;
	position:absolute;right:6%;top:0;
}
.sec2 .bg .line3{
	width:1px;height:100%;
	background:#ccc;
	position:absolute;right:12.5%;top:-22%;
	transform:rotate(-45deg);
}
.sec2 .bg .line4{
	width:1px;height:100%;
	background:#ccc;
	position:absolute;left:36%;top:0;
}
.sec2 .bg .line5{
	width:60%;aspect-ratio:1/1;
	border:1px solid #ccc;
	border-radius:50%;
	position:absolute;left:-24%;top:-14%;
}
.sec2 .conwrap{
	position:relative;
	padding:80px 2% 0;
	height:calc(100vh - 80px);
	box-sizing:border-box;
}
.sec2 .conwrap .imgs{
	overflow:hidden;
	position:absolute;left:2%;bottom:2%;
	width:96%;height:30%;
	border-radius:10px;
}
.sec2 .conwrap .imgs img{
	position:absolute;left:50%;top:50%;
	width:100%;height:100%;
	transform:translate(-50%,-50%);
	opacity:0;
	transition:all 0.4s;
}
.sec2 .conwrap .imgs img.on{opacity:1;}
.sec2 .conwrap .txtwrap{
	display:flex;flex-wrap:wrap;
	box-sizing:border-box;
	width:100%;height:70%;
	padding:60px 5% 0;
	text-align:center;
}
.sec2 .conwrap .txtwrap .txts{width:100%;}
.sec2 .conwrap .txtwrap .txts h2{font-size:18px;color:#000;font-weight:500;}
.sec2 .conwrap .txtwrap .txts h3{margin-top:45px;font-family:"Cormorant Garamond";font-size:60px;color:#111;line-height:1.1em;}
.sec2 .conwrap .txtwrap .txts h3:after{
	display:block;content:"";
	width:60px;height:1px;
	margin:35px auto 35px;
	background:#333;
}
.sec2 .conwrap .txtwrap .txts p{font-size:17px;color:#555;line-height:1.8em;}
.sec2 .conwrap .txtwrap .tabs{
	width:100%;
	margin:30px 0 0;
}
.sec2 .conwrap .txtwrap .tabs ul{display:flex;justify-content:space-between;padding:0 5%;}
.sec2 .conwrap .txtwrap .tabs ul li{}
.sec2 .conwrap .txtwrap .tabs ul li a{
	position:relative;
	font-size:28px;color:#000;font-weight:500;
}
.sec2 .conwrap .txtwrap .tabs ul li a:after{
	display:block;content:"";
	width:100%;height:10px;
	background:rgba(255,236,135,0.8);
	position:absolute;left:0;bottom:3px;
	transform:scaleX(0);
	transform-origin:left;
	transition:all 0.6s;
}
.sec2 .conwrap .txtwrap .tabs ul li.on a:after{transform:scaleX(1);}
.sec2 .conwrap .txtwrap .tabs ul li a span{position:relative;z-index:10;}





/* sec3 */
.sec3{position:relative;}
.sec3 .bg{	
	overflow:hidden;
	position:absolute;left:0;top:0px;
	width:100%;height:100%;
	background:url(/images/main/sec3_bg.jpg) no-repeat center;
	background-size:cover;
}
.sec3 .bg video{width:100%;height:100%;object-fit:cover;}
.sec3 .conwrap{
	position:relative;z-index:10;
	width:100%;height:100%;
}
.sec3 .conwrap .txtwrap{
	display:flex;align-items:center;justify-content:center;
	position:relative;z-index:10;
	width:100%;height:45vh;
	box-sizing:border-box;
	padding-top:100px;
	text-align:center;
}
.sec3 .conwrap .txtwrap h3{font-family:"Cormorant Garamond";font-size:68px;color:#fff;}
.sec3 .conwrap .txtwrap h4{margin:45px 0;font-size:24px;color:#fff;font-weight:500;}
.sec3 .conwrap .txtwrap a{margin:0 auto;}


.sec3 .conwrap .merit{
	display:flex;flex-wrap:wrap;
	width:100%;height:55vh;
}
.sec3 .conwrap .merit ul{display:flex;flex-wrap:wrap;width:100%;height:100%;}
.sec3 .conwrap .merit ul li{
	position:relative;
	width:50%;
	box-sizing:border-box;
	padding:0 5% 0;
	text-align:center;
}
.sec3 .conwrap .merit ul li:after{
	display:block;content:"";
	width:1px;height:150vh;
	background:rgba(255,255,255,0.1);
	position:absolute;right:0;top:-150%;
}
.sec3 .conwrap .merit ul li .icon{}
.sec3.ani .conwrap .merit ul li .icon .cls-1{
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;    
}
.sec3.ani .conwrap .merit ul li:nth-child(1) .icon .cls-1{animation: drawLine 4s ease-in-out forwards 1.0s;}
.sec3.ani .conwrap .merit ul li:nth-child(2) .icon .cls-1{animation: drawLine 4s ease-in-out forwards 1.1s;}
.sec3.ani .conwrap .merit ul li:nth-child(3) .icon .cls-1{animation: drawLine 4s ease-in-out forwards 1.2s;}
.sec3.ani .conwrap .merit ul li:nth-child(4) .icon .cls-1{animation: drawLine 4s ease-in-out forwards 1.3s;}
.sec3 .conwrap .merit ul li dl{margin:40px 0 0;}
.sec3 .conwrap .merit ul li dl dt{font-size:23px;color:#fff;font-weight:500;}
.sec3 .conwrap .merit ul li dl dd{display:none;margin-top:30px;font-size:16px;color:rgba(255,255,255,0.7);line-height:1.6em;}


.sec3 .conwrap .merit ul li .cls-1 {
	fill: none;
	stroke: #fff;
	stroke-linecap: round;
	stroke-miterlimit: 10;
}
.sec3 .conwrap .merit ul li .cls-1 {
	fill: none;
	stroke: #fff;
	stroke-linecap: round;
	stroke-linejoin: round;
}
@keyframes drawLine{
	to {
		stroke-dashoffset: 0;
	}
}




/* sec4 */
.sec4{position:relative;background:#f6f6f6;}
.sec4 .bg{	
	overflow:hidden;
	position:absolute;left:0;top:80px;
	width:100%;height:calc(100% - 80px);
}
.sec4 .bg .line1{
	width:100%;height:1px;
	background:#ccc;
	position:absolute;left:0;top:0;
}
.sec4 .bg .line2{
	width:1px;height:100%;
	background:#ccc;
	position:absolute;right:6%;top:0;
}
.sec4 .bg .line3{
	width:1px;height:100%;
	background:#ccc;
	position:absolute;right:12.5%;top:-22%;
	transform:rotate(-45deg);
}
.sec4 .bg .line4{
	width:1px;height:100%;
	background:#ccc;
	position:absolute;left:36%;top:0;
}
.sec4 .bg .line5{
	width:60%;aspect-ratio:1/1;
	border:1px solid #ccc;
	border-radius:50%;
	position:absolute;left:-24%;top:-14%;
}
.sec4 .conwrap{
	position:relative;z-index:10;
	padding:2% 0;margin-top:80px;
	height:calc(100vh - 80px);
	box-sizing:border-box;
}
.sec4 .conwrap .titlearea{display:flex;justify-content:space-between;align-items:center;padding:4vh 3% 0;}
.sec4 .conwrap .titlearea h2{font-size:18px;color:#000;font-weight:500;}
.sec4 .conwrap .product{margin:4vh 0 0;}
.sec4 .conwrap .product .swiper-slide{width:60vw;}
.sec4 .conwrap .product .swiper-slide>a{
	display:block;
	position:relative;
	box-sizing:border-box;
	width:100%;height:100%;
	padding:0 15px;
}
.sec4 .conwrap .product .swiper-slide>a .thumb{
	position:relative;
	overflow:hidden;
	width:100%;height:100%;
	border-radius:10px;
}
.sec4 .conwrap .product .swiper-slide>a .thumb img{		
	position:absolute;left:0;top:50%;
	transition:all 1s;
	width:100%;
	vertical-align:top;
}
.sec4 .conwrap .product .swiper-slide>a .thumb img:nth-child(1){position:static;}
.sec4 .conwrap .product .swiper-slide>a .thumb img:nth-child(2){opacity:1;transform:translateY(-50%) scale(1);}
.sec4 .conwrap .product .swiper-slide>a .thumb img:nth-child(3){opacity:0;transform:translateY(-50%) scale(1.2);}
.sec4 .conwrap .product .swiper-slide>a:hover .thumb img:nth-child(2){opacity:0;transform:translateY(-50%) scale(1.2);}
.sec4 .conwrap .product .swiper-slide>a:hover .thumb img:nth-child(3){opacity:1;transform:translateY(-50%) scale(1);}

.sec4 .conwrap .product .swiper-slide>a .info{
	position:absolute;left:0;bottom:-35px;
	box-sizing:border-box;
	width:100%;
	padding:50px;
	transition:all 1s;
}
.sec4 .conwrap .product .swiper-slide>a .info .tit{font-size:26px;color:#fff;font-weight:500;}
.sec4 .conwrap .product .swiper-slide>a .info .keyword{margin:10px 0 0;}
.sec4 .conwrap .product .swiper-slide>a .info .keyword ul{display:flex;}
.sec4 .conwrap .product .swiper-slide>a .info .keyword ul li{
	position:relative;
	padding-right:10px;margin-right:10px;
	font-family:"Noto Sans KR";font-size:16px;color:#fff;
}
.sec4 .conwrap .product .swiper-slide>a .info .keyword ul li:after{
	display:block;content:"";
	width:1px;height:12px;
	background:rgba(255,255,255,0.6);
	position:absolute;right:0;top:6px;
}
.sec4 .conwrap .product .swiper-slide>a .info .keyword ul li:last-child:after{display:none;}
.sec4 .conwrap .product .swiper-slide>a .info .more{
	margin-top:25px;font-size:12px;color:rgba(255,255,255,0.5);
	opacity:0;
	transition:all 1s;
}

.sec4 .conwrap .product .swiper-slide>a:hover .info{bottom:0;}
.sec4 .conwrap .product .swiper-slide>a:hover .info .more{opacity:1;color:#fff;}

.dragCursor{
	display:none !important;
	position:fixed;left:50%;top:50%;z-index:100;
	width:120px;height:120px;
	border-radius:50%;
	transform:translate(-50%,-50%);	
	text-align:center;
	pointer-events: none;
}
.dragCursor>div{
	position:relative;z-index:999;
	width:100%;height:100%;
	background:url(/images/main/cursor_drag.png) no-repeat center;
	transform:scale(1) ;
	transition:all 0.6s;	
}
.dragCursor.off>div{transform:scale(0);}




/* sec5 */
.sec5{position:relative;background:#f6f6f6;}
.sec5 .conwrap{
	display:flex;align-items:center;
	position:relative;z-index:10;
	padding:0 2% 2%;margin-top:80px;
	height:calc(100vh - 80px);
	box-sizing:border-box;
}
.sec5 .conwrap .bg{
	overflow:hidden;
	position:absolute;left:2%;top:0;
	width:calc(100% - 4%);height:calc(100% - 4%);
	border-radius:10px;
	background:url(/images/main/sec5_bg.jpg) no-repeat center;
	background-size:cover;
}
.sec5 .conwrap .txtwrap{
	position:relative;z-index:10;
	padding:0 80px;
}
.sec5 .conwrap .txtwrap h2{font-size:18px;color:#fff;font-weight:500;}
.sec5 .conwrap .txtwrap h3{margin-top:45px;font-family:"Cormorant Garamond";font-size:68px;color:#fff;line-height:1.1em;}
.sec5 .conwrap .txtwrap h3:after{
	display:block;content:"";
	width:60px;height:1px;
	margin:35px 0 35px;
	background:#fff;
}
.sec5 .conwrap .txtwrap p{margin-bottom:40px;font-size:17px;color:rgba(255,255,255,0.7);line-height:1.8em;}






/* animation */
.sec2 .conwrap .imgs{opacity:0;transition:all 0.4s}
.sec2 .conwrap .txtwrap .txts h2{opacity:0;transform:translateY(40px);}
.sec2 .conwrap .txtwrap .txts h3{opacity:0;transform:translateY(40px);}
.sec2 .conwrap .txtwrap .txts h3:after{transform:scaleX(0);}
.sec2 .conwrap .txtwrap .txts p{opacity:0;transform:translateY(40px);}
.sec2 .conwrap .txtwrap .tabs{opacity:0;transform:translateY(40px);}

.sec2.ani .conwrap .imgs{opacity:1;transition:all 0.4s}
.sec2.ani .conwrap .imgs img{animation: clipAnim 1.5s ease forwards;}
.sec2.ani .conwrap .txtwrap .txts h2{opacity:1;transform:translateY(0);transition:all 1.2s;}
.sec2.ani .conwrap .txtwrap .txts h3{opacity:1;transform:translateY(0);transition:all 1.2s 0.2s;}
.sec2.ani .conwrap .txtwrap .txts h3:after{transform:scaleX(1);transition:all 1.2s 0.3s;}
.sec2.ani .conwrap .txtwrap .txts p{opacity:1;transform:translateY(0);transition:all 1.2s 0.4s;}
.sec2.ani .conwrap .txtwrap .tabs{opacity:1;transform:translateY(0);transition:all 1.2s 0.6s;}

.sec2 .bg .line1{transform:scaleX(0);}
.sec2 .bg .line2{transform:scaleY(0);}
.sec2 .bg .line3{transform:rotate(-45deg) scaleY(0);}
.sec2 .bg .line4{transform:scaleY(0);}
.sec2 .bg .line5{left:-48%;}

.sec2.ani .bg .line1{transform:scaleX(1);transition:all 1.2s;}
.sec2.ani .bg .line2{transform:scaleY(1);transition:all 1.2s;}
.sec2.ani .bg .line3{transform:rotate(-45deg) scaleY(1);transition:all 1.2s;}
.sec2.ani .bg .line4{transform:scaleY(1);transition:all 1.2s;}
.sec2.ani .bg .line5{left:-24%;transition:all 1.2s;}



@keyframes clipAnim {
	0% {
		clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
	}
	25% {
		clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
	}
	100% {
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
	}
}



.sec3 .conwrap .merit ul li:after{
	transform-origin:top;
	transform:scaleY(0);
}
.sec3.ani .conwrap .merit ul li:after{
	transform:scaleY(1);
}
.sec3.ani .conwrap .merit ul li:nth-child(1):after{transition:all 1.2s;}
.sec3.ani .conwrap .merit ul li:nth-child(2):after{transition:all 1.2s 0.4s;}
.sec3.ani .conwrap .merit ul li:nth-child(3):after{transition:all 1.2s 0.8s;}

.sec3 .conwrap .txtwrap h3{opacity:0;transform:translateY(-40px);}
.sec3 .conwrap .txtwrap h4{opacity:0;transform:translateY(-40px);}
.sec3 .conwrap .txtwrap a{opacity:0;transform:translateY(-40px);}
.sec3 .conwrap .merit ul li .icon{opacity:0;transform:translateY(-40px);}
.sec3 .conwrap .merit ul li dl dt{opacity:0;transform:translateY(-40px);}
.sec3 .conwrap .merit ul li dl dd{opacity:0;transform:translateY(-40px);}

.sec3.ani .conwrap .txtwrap h3{opacity:1;transform:translateY(0);}
.sec3.ani .conwrap .txtwrap h4{opacity:1;transform:translateY(0);}
.sec3.ani .conwrap .txtwrap a{opacity:1;transform:translateY(0);}
.sec3.ani .conwrap .merit ul li .icon{opacity:1;transform:translateY(0);}
.sec3.ani .conwrap .merit ul li dl dt{opacity:1;transform:translateY(0);}
.sec3.ani .conwrap .merit ul li dl dd{opacity:1;transform:translateY(0);}

.sec3.ani .conwrap .merit ul li:nth-child(1) .icon{transition:all 1.2s 0.2s;}
.sec3.ani .conwrap .merit ul li:nth-child(1) dl dt{transition:all 1.2s 0.3s;}
.sec3.ani .conwrap .merit ul li:nth-child(1) dl dd{transition:all 1.2s 0.4s;}

.sec3.ani .conwrap .txtwrap h3{transition:all 1.2s 0.4s;}
.sec3.ani .conwrap .txtwrap h4{transition:all 1.2s 0.5s;}
.sec3.ani .conwrap .txtwrap a{transition:all 1.2s 0.6s;}

.sec3.ani .conwrap .merit ul li:nth-child(2) .icon{transition:all 1.2s 0.4s;}
.sec3.ani .conwrap .merit ul li:nth-child(2) dl dt{transition:all 1.2s 0.5s;}
.sec3.ani .conwrap .merit ul li:nth-child(2) dl dd{transition:all 1.2s 0.6s;}

.sec3.ani .conwrap .merit ul li:nth-child(3) .icon{transition:all 1.2s 0.6s;}
.sec3.ani .conwrap .merit ul li:nth-child(3) dl dt{transition:all 1.2s 0.7s;}
.sec3.ani .conwrap .merit ul li:nth-child(3) dl dd{transition:all 1.2s 0.8s;}

.sec3.ani .conwrap .merit ul li:nth-child(4) .icon{transition:all 1.2s 0.8s;}
.sec3.ani .conwrap .merit ul li:nth-child(4) dl dt{transition:all 1.2s 0.9s;}
.sec3.ani .conwrap .merit ul li:nth-child(4) dl dd{transition:all 1.2s 1s;}


.sec5 .conwrap{}
.sec5 .conwrap .bg{
	left:0%;
	width:100%;
	height:100%;
}
.sec5 .conwrap .txtwrap h2{opacity:0;transform:translateY(40px);}
.sec5 .conwrap .txtwrap h3{opacity:0;transform:translateY(40px);}
.sec5 .conwrap .txtwrap h3:after{transform:scaleX(0);}
.sec5 .conwrap .txtwrap p{opacity:0;transform:translateY(40px);}
.sec5 .conwrap .txtwrap a{opacity:0;transform:translateY(40px);}

.sec5.ani .conwrap .bg{
	left: 2%;
	width: calc(100% - 4%);
	height: calc(100% - 4%);
	transition:all 1.6s;
}
.sec5.ani .conwrap .txtwrap h2{opacity:1;transform:translateY(0);transition:all 1.2s;}
.sec5.ani .conwrap .txtwrap h3{opacity:1;transform:translateY(0);transition:all 1.2s 0.2s;}
.sec5.ani .conwrap .txtwrap h3:after{transform:scaleX(1);transition:all 1.2s 0.3s;}
.sec5.ani .conwrap .txtwrap p{opacity:1;transform:translateY(0);transition:all 1.2s 0.4s;}
.sec5.ani .conwrap .txtwrap a{opacity:1;transform:translateY(0);transition:all 1.2s 0.6s;}