@charset "utf-8";
.pcbr{display:none;}
.tbbr{display:block;}
.mbbr{display:none;}
.dn{display:none;}
.innerwrap{box-sizing:border-box;width:90%;margin:0 auto;}




/* visual */
.visual{
	position:relative;
	box-sizing:border-box;
	width:100%;height:100vh;
	padding:180px 0 0;
	background:#fff;
}
.visual .slg{
	position:absolute;left:5%;top:45%;z-index:10;
	text-align:left;
}
.visual .slg .line{
    overflow: hidden;
    width: 100%;
}
.visual .slg .line:nth-child(1){margin-bottom:-1em;}
.visual .slg .line span {
    display: inline-block;    
    transition:transform 2s ease 0.5s;
}
.visual .bg{
	overflow:hidden;
	position:absolute;left:0;top:0;
	width:100%;height:100vh;
}
.visual .img:before{
	display:block;content:"";
	width:50%;height:100%;
	background:rgba(255,255,255,0.2);
	filter: blur(5px);
	position:absolute;left:0;top:0;
	transform-origin:left;
}
.visual .img:after{
	display:block;content:"";
	width:50%;height:100%;
	background:rgba(255,255,255,0.2);
	filter: blur(5px);
	position:absolute;right:0;top:0;
	transform-origin:right;
}
.visual .bg>div{
	width:100%;height:100%;
	background:url(/images/main/main_visual_full.jpg) no-repeat center;
	background-size:cover;
	background-attachment:fixed;
}
.visual .bg>div video{
	width:100%;height:100%;
	object-fit:cover;
}



.visual.in-view .slg:after{transform:scaleX(1);}
.visual.in-view .img:before{transform:scaleX(0);transition:all 2s 0.5s;}
.visual.in-view .img:after{transform:scaleX(0);transition:all 2s 0.5s;}


/* 텍스트 애니메이션2 */
.visual .line {
    position: relative;
    overflow: hidden;
}    
.visual .mask-container {
    position: relative;
    overflow: hidden;
    display: inline-block;
}
.visual .text {
    position: relative;
    display: block;
    font-family:"Cormorant Garamond";font-size:10vw;color:#fff;line-height:1.25em;letter-spacing:-0.025em;
    transform: translateY(50%);
	opacity:0;
    animation: slideUp 1.4s forwards cubic-bezier(0.33, 1, 0.68, 1);
}
.visual .gradient-mask {
	display:none;
    position: absolute;top: 0;left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
    transform: translateX(-100%);
    animation: maskReveal 4s forwards cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
 }
    
/* Delayed animation */
.line1 .text { animation-delay: 0.2s; }
.line2 .text { animation-delay: 0.5s; }
.line1 .gradient-mask { animation-delay: 0.8s; }
.line2 .gradient-mask { animation-delay: 1.1s; }

@keyframes slideUp {
  0% {
  	opacity:0;
	transform: translateY(50%);
  }
  100% {
  	opacity:1;
	transform: translateY(0);
  }
}

@keyframes maskReveal {
  0% {
	transform: translateX(-100%);
  }
  100% {
	transform: translateX(100%);
  }
}

/* Subtle decorations */
.bg-shape {
  position: absolute;
  border-radius: 4px;
  background-color: #f6f6f6;
  z-index: -1;
  opacity: 0;
  animation: fadeShape 1s forwards ease;
}

.shape1 {
	width: 120px;
	height: 120px;
	top: 20px;
	left: -60px;
	transform: rotate(-15deg);
	animation-delay: 0.5s;
}

.shape2 {
    width: 150px;
    height: 80px;
    bottom: 10px;
    right: -40px;
    transform: rotate(10deg);
    animation-delay: 0.8s;
}

@keyframes fadeShape {
  0% {
	opacity: 0;
	transform: translateY(20px) rotate(-15deg);
  }
  100% {
	opacity: 0.3;
	transform: translateY(0) rotate(-15deg);
  }
}







/* section1 */
.section1{}
.section1>div{position:relative;}
.section1 .boxwrap{position:relative;}
.section1 .boxwrap:nth-child(1){padding:120px 0 60px;}
.section1 .boxwrap:nth-child(2){}

.section1 .boxwrap .leftarea{
	box-sizing:border-box;
	width:100%;
	padding-right:5%;
}
.section1 .boxwrap .leftarea .titlearea{position:relative;padding-right:150px;}
.section1 .boxwrap .leftarea .titlearea h2{font-size:22px;color:#000;font-weight:700;line-height:1.2em;}
.section1 .boxwrap .leftarea .titlearea a{position:absolute;right:0;top:0;}
.section1 .boxwrap .leftarea h3{
	margin:50px 0 40px;
	font-family:"Cormorant Garamond";font-size:10vw;color:#000;font-weight:500;line-height:0.9em;
}
.section1 .boxwrap .leftarea h3 .num{
	display:inline-block;vertical-align:top;
	font-size:5.8vw;line-height:1em;
	margin:-38px 0 0;
}
.section1 .boxwrap .leftarea p{font-family:"pretendard";margin-bottom:20px;font-size:16px;color:#666;line-height:1.7em;}
.section1 .boxwrap .leftarea p.kr{font-size:16px;}
.section1 .boxwrap .leftarea p:last-child{margin:0;}
.section1 .boxwrap:nth-child(2) .leftarea{padding:100px 0;}
.section1 .boxwrap:nth-child(2) .leftarea p{margin:25px 0 55px;}
.section1 .boxwrap .rightarea{overflow:hidden;width:100%;}
.section1 .boxwrap:nth-child(2) .rightarea{border-top:1px solid #ccc;}
.section1 .boxwrap .rightarea .imgs{display:flex;justify-content:space-between;margin-top:50px;}
.section1 .boxwrap .rightarea .imgs>div{position:relative;width:49%;}
.section1 .boxwrap .rightarea .imgs>div:nth-child(1){}
.section1 .boxwrap .rightarea .imgs img{}
.section1 .boxwrap .rightarea .numInfo{
	box-sizing:border-box;
	position:relative;
	padding:40px 5vw;
	border-bottom:1px solid #ccc;
}
.section1 .boxwrap .rightarea .numInfo .num{display:flex;}
.section1 .boxwrap .rightarea .numInfo .num .counter{font-size:10vw;color:#000;font-weight:500;line-height:1em;}
.section1 .boxwrap .rightarea .numInfo .num .unit{margin:10px 0 0 10px;font-size:5vw;color:#000;font-weight:600;}
.section1 .boxwrap .rightarea .numInfo .num .state{margin:-10px 0 0 10px;font-size:10vw;color:#000;font-weight:600;line-height:1em;}
.section1 .boxwrap .rightarea .numInfo .tit{
	margin-top:10px;
	font-size:24px;color:#666;font-weight:500;
	text-transform:uppercase;
}


.section1 .line1{
	display:none;
	width:1px;height:100%;
	background:#ccc;
	position:absolute;left:50%;top:0;
	transform-origin:top;
}
.section1 .boxwrap:nth-child(1) .line2,
.section1 .boxwrap:nth-child(2) .line3,
.section1 .boxwrap:nth-child(2) .line4,
.section1 .boxwrap:nth-child(2) .line5,
.section1 .boxwrap:nth-child(2) .line6{
	display:none;
}
.section1 .boxwrap:nth-child(2) .line3,
.section1 .boxwrap:nth-child(2) .line4{transform-origin:left;}



.section1 .textBg{overflow: hidden;position:relative;margin:150px 0;padding:6.5% 0;}
.section1 .textBg .txt{
	position:absolute;left:0%;top:0;display:flex;white-space:nowrap;
	font-family:"Cormorant Garamond";font-size:240px;font-weight:500;line-height:1em;
	color:#000;
}
.section1 .textBg .txt>div{transform: translateY(-0.15em);}
.section1 .textBg .txt .char {
    display: inline-block;
	transform: translateY(100px);
	font-family:"Cormorant Garamond" !important;opacity: 0;
	transition: transform 2s ease, opacity 0.6s ease;
}
.section1 .textBg.in-view .txt .char {
  transform: translateY(0);
  opacity: 1;
}


.section1 .textBg.in-view .txt .char:nth-child(1) { transition-delay: 0.1s; }
.section1 .textBg.in-view .txt .char:nth-child(2) { transition-delay: 0.2s; }
.section1 .textBg.in-view .txt .char:nth-child(3) { transition-delay: 0.3s; }
.section1 .textBg.in-view .txt .char:nth-child(4) { transition-delay: 0.4s; }
.section1 .textBg.in-view .txt .char:nth-child(5) { transition-delay: 0.5s; }
.section1 .textBg.in-view .txt .char:nth-child(6) { transition-delay: 0.6s; }
.section1 .textBg.in-view .txt .char:nth-child(7) { transition-delay: 0.7s; }
.section1 .textBg.in-view .txt .char:nth-child(8) { transition-delay: 0.8s; }
.section1 .textBg.in-view .txt .char:nth-child(9) { transition-delay: 0.9s; }
.section1 .textBg.in-view .txt .char:nth-child(10) { transition-delay: 1s; }
.section1 .textBg.in-view .txt .char:nth-child(11) { transition-delay: 1.1s; }
.section1 .textBg.in-view .txt .char:nth-child(12) { transition-delay: 1.2s; }
.section1 .textBg.in-view .txt .char:nth-child(13) { transition-delay: 1.3s; }
.section1 .textBg.in-view .txt .char:nth-child(14) { transition-delay: 1.4s; }
.section1 .textBg.in-view .txt .char:nth-child(15) { transition-delay: 1.5s; }
.section1 .textBg.in-view .txt .char:nth-child(16) { transition-delay: 1.6s; }
.section1 .textBg.in-view .txt .char:nth-child(17) { transition-delay: 1.7s; }
.section1 .textBg.in-view .txt .char:nth-child(18) { transition-delay: 1.8s; }
.section1 .textBg.in-view .txt .char:nth-child(19) { transition-delay: 1.9s; }
.section1 .textBg.in-view .txt .char:nth-child(20) { transition-delay: 2.0s; }
.section1 .textBg.in-view .txt .char:nth-child(21) { transition-delay: 2.1s; }
.section1 .textBg.in-view .txt .char:nth-child(22) { transition-delay: 2.2s; }
.section1 .textBg.in-view .txt .char:nth-child(23) { transition-delay: 2.3s; }
.section1 .textBg.in-view .txt .char:nth-child(24) { transition-delay: 2.4s; }
.section1 .textBg.in-view .txt .char:nth-child(25) { transition-delay: 2.5s; }
.section1 .textBg.in-view .txt {
  animation: none; /* 초기 상태에서는 애니메이션 없음 */
}
.section1 .textBg.in-view.animate-flow .txt {
  animation: textScroll 20s linear infinite;
}
@keyframes textScroll {
	0%{
		transform: translate(0, 0);
	}
	100%{
		transform: translate(-50%, 0);
	}
}


.btnMore{
	display:flex;align-items:center;
}
.btnMore span{
	display:inline-block;
	font-family:"Cormorant Garamond";font-size:17px;color:#000;
}
.btnMore i{
	display:inline-block;
	width:46px;height:46px;
	margin-left:10px;
	border-radius:50%;
	background:#221e1f url(/images/main/btnMore_arr1.png) no-repeat;
}


.section2{position:relative;padding:120px 0;}
.section2 .bg{
	position:absolute;left:0;top:0;
	width:100%;height:100%;
	background:url(/images/main/sec2_bg.jpg) no-repeat center;
	background-size:cover;
}
.section2 .circle0{	
	width:45vw;aspect-ratio: 1/1;
	border-radius:50%;
	position:absolute;left:50%;top:50%;
	transform:translate(-50%,-50%);
}
.section2 .innerwrap{position:relative;z-index:10;max-width:1440px;}
.section2 .innerwrap .circleSvg{
	position:absolute;left:50%;top:50%;
	box-sizing:border-box;
	width:190vw;
	padding:0 0;
	opacity:0;
	transform:translate(-50%,-50%) rotate(90deg);
}
.section2 .innerwrap ul{}
.section2 .innerwrap ul li{
	position:relative;
	width:70%;
	margin:0 auto;
}
.section2 .innerwrap ul li .circle svg path{stroke-width:0px;}
.section2 .innerwrap ul li .circle + div{
	position:absolute;left:0;top:50%;
	width:100%;
	transform:translateY(-50%) ;
	text-align:center;
}
.section2 .innerwrap ul li .circle + div .tit{
	font-size:20px;color:#fff;font-weight:400;
	opacity:0;transform:translateY(40px);
	text-shadow: 
		0 0 2px rgba(255, 255, 255, 0.9),
		0 0 4px rgba(255, 255, 255, 0.7),
		0 0 6px rgba(180, 180, 250, 0.5);
    animation:neon-pulse 3s ease-in-out infinite;
}
.section2 .innerwrap ul li .circle + div .exp{
	font-family:"pretendard";font-size:14px;color:rgba(255,255,255,0.6);font-weight:400;
	margin-top:10px;padding:0 5%;
	opacity:0;transform:translateY(40px);
}

@keyframes neon-pulse {
  0% {
    text-shadow: 
      0 0 1px rgba(255, 255, 255, 0.9),
      0 0 3px rgba(255, 255, 255, 0.6),
      0 0 5px rgba(180, 180, 250, 0.4);
  }
  40% {
    text-shadow: 
      0 0 2px rgba(255, 255, 255, 1),
      0 0 5px rgba(255, 255, 255, 0.8),
      0 0 8px rgba(180, 180, 250, 0.6);
  }
  60% {
    text-shadow: 
      0 0 2px rgba(255, 255, 255, 1),
      0 0 5px rgba(255, 255, 255, 0.8),
      0 0 8px rgba(180, 180, 250, 0.6);
  }
  100% {
    text-shadow: 
      0 0 1px rgba(255, 255, 255, 0.9),
      0 0 3px rgba(255, 255, 255, 0.6),
      0 0 5px rgba(180, 180, 250, 0.4);
  }
}




/* sec3 */
.section3{position:relative;padding:120px 0;}
.section3 .titlearea{padding:0 5%;}
.section3 .titlearea h2{
	font-size:22px;color:#000;font-weight:700;
}
.section3 .conwrap{position:relative;padding-left:5%;}
.section3 .conwrap .business{margin:55px 0 0;}
.section3 .conwrap .business .swiper-slide{
	overflow:hidden;
	position:relative;
	width:340px;height:340px;
	padding-right:25px;
	border-right:1px solid #ccc;mix-blend-mode: difference;
}
.section3 .conwrap .business .swiper-slide .bg{
	position:absolute;left:0;top:0;
	width:calc(100% - 25px);height:100%;
}
.section3 .conwrap .business .swiper-slide.b1 .bg{
	background:url(/images/main/sec3_bg1.jpg) no-repeat;
	background-size:cover;
}
.section3 .conwrap .business .swiper-slide.b2 .bg{
	background:url(/images/main/sec3_bg2.jpg) no-repeat;
	background-size:cover;
}
.section3 .conwrap .business .swiper-slide.b3 .bg{
	background:url(/images/main/sec3_bg3.jpg) no-repeat;
	background-size:cover;
}
.section3 .conwrap .business .swiper-slide.b4 .bg{
	background:url(/images/main/sec3_bg5.jpg) no-repeat;
	background-size:cover;
}
.section3 .conwrap .business .swiper-slide.b5 .bg{
	background:url(/images/main/sec3_bg4.jpg) no-repeat;
	background-size:cover;
}
.section3 .conwrap .business .swiper-slide .txtwrap{
	position:relative;
	box-sizing:border-box;
	position:absolute;left:0;bottom:0;
	transform:translateY(0);
	width:calc(100% - 25px);
	padding:35px 20px;
	transition:all 0.4s;
}
.section3 .conwrap .business .swiper-slide .txtwrap:after{
	display:block;content:"";
	width:100%;height:200%;
	background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0.4), rgba(0,0,0,0.0));
	position:absolute;left:0;top:0;padding-bottom:60px;
	opacity:0;transition:all 0.4s;
}
.section3 .conwrap .business .swiper-slide .txtwrap h3{
	position:relative;z-index:5;
	font-size:30px;color:#fff;font-weight:400;
}
.section3 .conwrap .business .swiper-slide .txtwrap h3 span{font-size:16px;}
.section3 .conwrap .business .swiper-slide .txtwrap p{
	position:absolute;z-index:5;
	margin-top:10px;
	transform:translateY(20px);opacity:0;
	transition:all 0.4s;
	font-family:"pretendard";font-size:16px;color:rgba(255,255,255,0.7);font-weight:400;line-height:1.6em;
}
.section3 .conwrap .business .swiper-scrollbar{
	position:static;
	width:calc(100% - 5%);height:2px;
	margin:60px 0 0;
	background:0;box-shadow:0 -1px 0 inset #ccc;
}
.section3 .conwrap .business .swiper-scrollbar .swiper-scrollbar-drag{background:#000;}

.section3 .conwrap .business .swiper-slide:hover .txtwrap{transform:translateY(-60px);}
.section3 .conwrap .business .swiper-slide:hover .txtwrap:after{opacity:1;}
.section3 .conwrap .business .swiper-slide:hover .txtwrap p{transform:scaleY(1);opacity:1;}

.section3 .conwrap .drag{
	display:none;
	position:fixed;left:0;top:0;z-index:999;
	width:120px;height:120px;
	transform:translate(-50%,-50%) scale(1);	
	pointer-events: none;
	
}
.section3 .conwrap .drag>div{
	position:relative;z-index:999;
	width:100%;height:100%;
	background:url(/images/main/cursor_drag.png) no-repeat;
	transform:scale(1);
	transition:all 0.6s;mix-blend-mode: difference;
	
}
.section3 .conwrap .drag.off>div{transform:scale(0);}
.section3 .conwrap .drag>div.on{filter: invert(1);	}



/* animation */
.section1 .boxwrap .leftarea .titlearea h2{opacity:0;transform:translateX(40px);transition:all 0.2s;}
.section1 .boxwrap .leftarea{perspective:800px;}
.section1 .boxwrap .leftarea h3{
	opacity:0;transform:translateX(40px);transition:all 0.2s;
	transform-origin:bottom;
}
.section1 .boxwrap .leftarea p{opacity:0;transform:translateX(40px) skew(0deg);transition:all 0.2s;}
.section1 .boxwrap .leftarea a{opacity:0;transform:translateX(40px);transition:all 0.2s;}
.section1 .boxwrap .leftarea .img{overflow:hidden;}
.section1 .boxwrap .leftarea img{opacity:0;transform:translateY(100px);transition:all 0.2s;}

.section1 .boxwrap .leftarea.in-view .titlearea h2{opacity:1;transform:translateX(0);transition:all 1.2s 0.6s;}
.section1 .boxwrap .leftarea.in-view h3{opacity:1;transform:translateX(0);transition:all 1.2s 0.8s;}
.section1 .boxwrap .leftarea.in-view p{opacity:1;transform:translateX(0);transition:all 1.2s 1s;}
.section1 .boxwrap .leftarea.in-view a{opacity:1;transform:translateX(0);transition:all 1.2s 1s;}
.section1 .boxwrap .leftarea.in-view2 img{opacity:1;transform:translateY(0);transition:all 1.2s 1s;}

.section1 .boxwrap .rightarea .imgs img{	
	filter: blur(5px);
	opacity:0;
	transform:translate(0, 100px);
	transition:all 1s;
}
.section1 .boxwrap .rightarea.in-view .imgs>div img{filter: blur(0px);opacity:1;transform:translate(0,0);}
.section1 .boxwrap .rightarea.in-view .imgs>div:nth-child(1) img{transition:all 1.2s 0.6s;}
.section1 .boxwrap .rightarea.in-view .imgs>div:nth-child(2) img{transition:all 1.2s 0.8s;}

.section1 .boxwrap .rightarea .numInfo .tit{opacity:0;transform:translateX(60px);transition:all 0.2s;}
.section1 .boxwrap .rightarea .numInfo.in-view .tit{opacity:1;transform:translateX(0);transition:all 1.2s;}



.section2 .circle0{transform:translate(-50%,-50%) scale(0);}
.section2 .innerwrap ul li{opacity:0;transform:scale(0);}
.section2 .innerwrap ul li .circle{}
.section2 .innerwrap ul li .circle + div .tit{opacity:0;transform:translateY(60px);}
.section2 .innerwrap ul li .circle + div .exp{opacity:0;transform:translateY(60px);}
.section2 .innerwrap .circleSvg{opacity:0;}


.section2.in-view .circle0{transform:translate(-50%,-50%) scale(1);transition:all 2s;}
.section2.in-view .innerwrap ul li{opacity:1;transform:scale(1);}
.section2.in-view .innerwrap ul li:nth-child(1){transition:all 1.4s 0.8s;}
.section2.in-view .innerwrap ul li:nth-child(2){transition:all 1.4s 1s;}
.section2.in-view .innerwrap ul li:nth-child(3){transition:all 1.4s 1.2s;}
.section2.in-view .innerwrap ul li .circle + div .tit{opacity:1;transform:translateY(0);}
.section2.in-view .innerwrap ul li .circle + div .exp{opacity:1;transform:translateY(0);}
.section2.in-view .innerwrap ul li:nth-child(1) .circle + div .tit{transition:all 1.4s 1s;}
.section2.in-view .innerwrap ul li:nth-child(1) .circle + div .exp{transition:all 1.4s 1.2s;}
.section2.in-view .innerwrap ul li:nth-child(2) .circle + div .tit{transition:all 1.4s 1.2s;}
.section2.in-view .innerwrap ul li:nth-child(2) .circle + div .exp{transition:all 1.4s 1.4s;}
.section2.in-view .innerwrap ul li:nth-child(3) .circle + div .tit{transition:all 1.4s 1.4s;}
.section2.in-view .innerwrap ul li:nth-child(3) .circle + div .exp{transition:all 1.4s 1.6s;}
.section2.in-view .innerwrap .circleSvg{opacity:1;transition:opacity 1.4s 2.4s;}

#lightPath {
	stroke-dasharray: 700,3500;
	stroke-dashoffset: 4200;
}

.section2.in-view #lightPath {
	animation: moveLightEffect 6s linear infinite 2.4s;
}

@keyframes moveLightEffect {
	from {
	  stroke-dashoffset: 4200;
	}
	to {
	  stroke-dashoffset: 0;
	}
}