.pcbr{display:none;}
.tbbr{display:none;}
.mbbr{display:block;}
.dn{display:none;}




/* visual */
#visual{
	overflow:hidden;
	width:100%;height:100vh;
	position:relative;
}
#visual .bg{
	position:absolute;left:0;top:0;
	width:100%;height:100%;
}
#visual .bg video{width:100%;height:100%;object-fit:cover;}
#visual .tit{
	position:absolute;left:10%;bottom:50px;z-index:10;
	font-size:10vw;color:#fff;font-weight:700;line-height:1.1em;
}
#visual .tit div{overflow:hidden;}
#visual .tit div span{display:inline-block;}
#visual .scroll{
	position:absolute;right:3%;bottom:50px;z-index:10;
	text-align:center;
}
#visual .scroll .txt{
	display:none;
}
#visual .scroll .arr{
	box-sizing:border-box;
	display:flex;align-items:center;justify-content:center;
	width:50px;height:50px;
	margin-top:10px;
	border:2px solid #fff;border-radius:50%;
}
#visual .scroll .arr img{display:block;animation:scrollAni 0.6s infinite alternate;}

@keyframes scrollAni{
	0%{transform:translateY(0);}
	100%{transform:translateY(3px);}
}





/* section1 */
.section1{
	overflow:hidden;
	position:relative;
	width:100%;height:100vh;
}
.section1 .conwrap{
	position:absolute;left:50%;top:0;
	width:100%;height:100vh;
	transform:translate(-50%,0);
	background: #fff;
}
.section1 .lines{
	position:absolute;left:50%;top:50%;z-index:100;
	transform:translate(-50%,-50%);
	width:100%;
}
.section1 .lines .line1{
	overflow:hidden;
	position:absolute;left:50%;top:50%;
	transform:translate(-50%,-50%);
	width:100%;height:4px;
}
.section1 .lines .line1:before{
	display:block;content:"";
	width:100%;height:100%;
	background: linear-gradient(
		to right,
		rgba(0, 0, 0, 0),
		rgba(0,122,255,1) 20%,
		rgba(40,192,192,1) 80%,
		rgba(0, 0, 0, 0)
	);
	position:absolute;left:0;top:0;
	transform:translateY(-50%);
}
.section1 .lines .line2{
	overflow:hidden;
	position:absolute;left:50%;top:50%;z-index:100;
	transform:translate(-50%,-50%) rotate(90deg);
	width:100%;height:3px;
}
.section1 .lines .line2>div{
	display:block;content:"";
	width:100%;height:100%;
	background: linear-gradient(
		to right,
		rgba(0, 0, 0, 0),
		rgba(0,122,255,1) 20%,
		rgba(40,192,192,1) 80%,
		rgba(0, 0, 0, 0)
	);
	position:absolute;left:50%;top:50%;
	transform:translate(-50%,-50%);
}
.section1 .area1{
	position:absolute;left:50%;top:50%;
	transform:translate(-50%,-160%);
	width:100%;
	text-align:center;
}
.section1 .area1 .tit{
	font-family:"Pretendard";font-size:34px;color:#fff;font-weight:700;
	transform:translateY(20px);
	margin-bottom:27px;
}
.section1 .area1 .txt{
	font-family:"Pretendard";font-size:19px;color:#007aff;font-weight:500;
	transform:translateY(0);opacity:1;
}
.section1 .area2{
	position:absolute;left:50%;top:50%;
	transform:translate(-50%,calc(50% - 20px));
	width:100%;
	text-align:center;
}
.section1 .area2 .tit{
	font-family:"Pretendard";font-size:34px;color:#fff;font-weight:700;
	transform:translateY(20px);
	margin-bottom:27px;
}
.section1 .area2 .txt{
	font-family:"Pretendard";font-size:19px;color:#28c0c0;font-weight:500;
	transform:translateY(0);opacity:1;
}
.section1 .lastTxt{
	position:absolute;left:50%;top:50%;z-index:100;
	width:100%;
	font-size:34px;color:#fff;font-weight:700;line-height:1.2em;text-align:center;
	transform:translate(-50%,-50%) scale(0.7);opacity:0;
}






/* section2 */
.section2{}
.section2 .textFill{
	display:flex;align-items:center;
	width:80%;height:100vh;
	margin:0 auto;
}
.section2 .textFill .text-line{
	position:relative;
	font-family:"Pretendard";font-size:9vw;color:#dbdbdb;font-weight:700;line-height:1.3em;
	background-image: linear-gradient(90deg, #1A1A1A 0%, #1A1A1A 0%, transparent 0.1%);
	background-repeat: no-repeat;
	-webkit-text-fill-color: rgba(26, 26, 26, 0.1);
	-webkit-background-clip: text;
	background-clip: text;
}
.section2 .conwrap{}
.section2 .conwrap .boxwrap{width:100%;}
.section2 .conwrap .boxwrap .imgarea{width:100%;height:50vh;}
.section2 .conwrap .boxwrap .imgarea video{width:100%;height:100%;object-fit:cover;}
.section2 .conwrap .boxwrap .txtarea{
	display:flex;align-items:center;justify-content:center;
	box-sizing:border-box;
	width:100%;height:100%;
	padding:100px 5%;
	background:#f1f1f1;
	text-align:center;
}
.section2 .conwrap .boxwrap .txtarea .tit1{font-size:14px;color:#007aff;font-weight:700;}
.section2 .conwrap .boxwrap .txtarea .tit2{margin-top:20px;font-size:34px;color:#000;font-weight:700;line-height:1.1em;}
.section2 .conwrap .boxwrap .txtarea .txt{
	margin-top:20px;
	font-family:"Pretendard";font-size:16px;color:#000;font-weight:500;line-height:1.5em;
}





/* section3 */
.section3{}
.section3 .textFill{
	display:flex;align-items:center;
	width:80%;height:100vh;
	margin:0 auto;
}
.section3 .textFill .text-line{
	position:relative;
	font-family:"Pretendard";font-size:9vw;color:#888;font-weight:700;line-height:1.3em;
	background-image: linear-gradient(90deg, #1A1A1A 0%, #1A1A1A 0%, transparent 0.1%);
	background-repeat: no-repeat;
	-webkit-text-fill-color: rgba(26, 26, 26, 0.1);
	-webkit-background-clip: text;
	background-clip: text;
}




/* section4 */
.section4{
	padding:140px 0;
	background:#090909;
}
.section4 .titlearea{padding:0 5%;margin-bottom:100px;text-align:center;}
.section4 .titlearea h3{font-family:"Pretendard";font-size:10vw;color:#fff;font-weight:700;line-height:1.2em;}
.section4 .titlearea p{margin-top:20px;font-family:"Pretendard";font-size:16px;color:#fff;font-weight:500;line-height:1.6em;}
.section4 .conwrap{max-width:1280px;width:80%;margin:0 auto;}
.section4 .conwrap ul{border-top:1px solid #565657;}
.section4 .conwrap ul li{
	position:relative;
	padding:30px 0;
}
.section4 .conwrap ul li:after{
	display:block;content:"";
	width:100%;height:1px;
	background:#565657;
	position:absolute;left:0;bottom:0;
}
.section4 .conwrap ul li a{}
.section4 .conwrap ul li a .tit{
	position:relative;z-index:10;
	display:inline-block;
	font-family:"Pretendard";font-size:28px;color:#fff;font-weight:700;line-height:1.1em;
	transition:all 0.4s;
}
.section4 .conwrap ul li a .tit i{
	display:inline-block;vertical-align:top;
	position:absolute;left:100%;top:0;
	width:32px;height:32px;
	margin:0px 0 0 4px;
	background:url(../images/main/sec4_arr.png) no-repeat center;
	border-radius:50%;
}
.section4 .conwrap ul li a .exp{
	position:relative;z-index:10;
	width:100%;
	margin-top:10px;
	font-family:"Pretendard";font-size:16px;color:#fff;font-weight:500;line-height:1.5em;
	text-align:left;
}
.section4 .conwrap ul li a .img{
	display:none;
	position:absolute;left:50%;top:50%;z-index:3;
	transform:translate(0%,-50%);
	width:200px;height:200px;	
	opacity:0;border-radius:50%;
    will-change: transform;
    pointer-events: none; /* 이미지가 마우스 이벤트를 방해하지 않도록 */
    backface-visibility: hidden; /* 성능 최적화 */
    transition: transform 0.4s ease-out;
}
.section4 .conwrap ul li:nth-child(1) a .img{background:url(../images/main/sec4_img1.png) no-repeat center;}
.section4 .conwrap ul li:nth-child(2) a .img{background:url(../images/main/sec4_img2.png) no-repeat center;}
.section4 .conwrap ul li:nth-child(3) a .img{background:url(../images/main/sec4_img3.png) no-repeat center;}
.section4 .conwrap ul li:nth-child(4) a .img{background:url(../images/main/sec4_img4.png) no-repeat center;}







/* section5 */
.section5{padding:140px 0;}
.section5 .titlearea{padding:0 5%;margin-bottom:50px;text-align:center;}
.section5 .titlearea h3{font-family:"Pretendard";font-size:10vw;color:#000;font-weight:700;line-height:1.2em;}
.section5 .titlearea p{margin-top:20px;font-family:"Pretendard";font-size:16px;color:#000;font-weight:500;line-height:1.6em;}
.section5 .conwrap{overflow: hidden;width:100%;margin:60px auto 0;}
.section5 .conwrap ul{display:flex;flex-wrap:nowrap;margin-bottom:60px;}
.section5 .conwrap ul:last-child{margin-bottom:0;}
.section5 .conwrap ul li{
	display:inline-flex;align-items:center;justify-content:center;
	flex-shrink: 0;
	width:50vw;
}
.section5 .conwrap ul li img{height:100%;}





/* section6 */
.section6{
	border-top:1px solid #ddd;
}
.section6 a{
	display:flex;align-items:center;justify-content:center;
	position:relative;
	box-sizing:border-box;
	width:100%;height:240px;
	padding:0 5%;
	text-align:center;
}
.section6 a:first-child{border-bottom:1px solid #ddd;}
.section6 a .tit{font-family:"Pretendard";font-size:7vw;color:#090909;font-weight:700;}
.section6 a .tit span{display:inline-block;transition:all 0.24s;}
.section6 a .tit i{
	display:inline-block;
	position:absolute;left:50%;top:calc(100% - 60px);
	width:35px;height:30px;
	background:url(../images/main/sec6_arr.png) no-repeat;
	background-size:cover;
	transform:translateX(-70%);opacity:0;
	transition:all 0.24s;
}
.section6 a:hover .tit span{display:inline-block;transform:translateX(0);}
.section6 a:hover .tit i{transform:translateX(-50%);opacity:1;}
.section6 a .txt{margin-top:10px;font-family:"Pretendard";font-size:21px;color:#090909;font-weight:500;line-height:1.5em;}





/* animation */
#visual .tit div span{transform:translateY(100%);}
#visual.in-view .tit div span{transform:translateY(0%);}
#visual.in-view .tit div:nth-child(1) span{transition:all 1s;}
#visual.in-view .tit div:nth-child(2) span{transition:all 1s 0.2s;}

.section2 .conwrap .boxwrap .txtarea .tit1{opacity:0;transform:translateY(40px);}
.section2 .conwrap .boxwrap .txtarea .line{transform:scaleY(0);}
.section2 .conwrap .boxwrap .txtarea .tit2{opacity:0;transform:translateY(40px);}
.section2 .conwrap .boxwrap .txtarea .txt{opacity:0;transform:translateY(40px);}
.section2 .conwrap .boxwrap .txtarea .tit1.in-view{opacity:1;transform:translateY(0);transition:all 1s;}
.section2 .conwrap .boxwrap .txtarea .line.in-view{transform:scaleY(1);transition:all 1s 0.2s;}
.section2 .conwrap .boxwrap .txtarea .tit2.in-view{opacity:1;transform:translateY(0);transition:all 1s 0.3s;}
.section2 .conwrap .boxwrap .txtarea .txt.in-view{opacity:1;transform:translateY(0);transition:all 1s 0.4s;}

.section4 .titlearea h3{opacity:0;transform:translateY(40px);}
.section4 .titlearea h3 + p{opacity:0;transform:translateY(40px);}
.section4 .conwrap{opacity:0;transform:translateY(40px);}
.section4 .titlearea.in-view h3{opacity:1;transform:translateY(0);transition:all 1s;}
.section4 .titlearea.in-view h3 + p{opacity:1;transform:translateY(0);transition:all 1s 0.2s;}
.section4 .conwrap.in-view{opacity:1;transform:translateY(0);transition:all 1s;}

.section5 .titlearea h3{opacity:0;transform:translateY(40px);}
.section5 .titlearea h3 + p{opacity:0;transform:translateY(40px);}
.section5 .titlearea.in-view h3{opacity:1;transform:translateY(0);transition:all 1s;}
.section5 .titlearea.in-view h3 + p{opacity:1;transform:translateY(0);transition:all 1s 0.2s;}