body:not(.js-ready) #mainVisual .main_txt p{
  opacity:0 !important;
  visibility:hidden !important;
  filter:blur(20px) !important;
  letter-spacing:1rem !important;
  transition:none !important;
}
#mainVisual{position:relative}
#mainVisual .main_slide{position:relative;width:100%;height:100vh}
#mainVisual .swiper-wrapper{height:100%}
#mainVisual .swiper-slide{ background-blend-mode: multiply;}
#mainVisual .swiper-slide.bg01{position:relative;background:url(/common/img/vi3.png) no-repeat center / cover, rgba(0,0,0,.6)}
#mainVisual .swiper-slide.bg02{position:relative;background:url(/common/img/vi1.png) no-repeat center / cover, rgba(0,0,0,.6)}

#mainVisual .main_txt{position:absolute;top:46vh;z-index:101;width:100%; line-height:1.25;color:#fff}
#mainVisual .main_txt p{margin-bottom:40px;font-size:70px;font-weight:700; font-family: "Poppins", sans-serif;
  opacity: 0;
  white-space: nowrap;
  line-height: 1.2;
  letter-spacing: 1rem;
  filter: blur(20px);
  transition: all 1s ease;
   visibility: hidden; 

}
#mainVisual .main_txt span{font-family: "Poppins", sans-serif; color:var(--main_c);}


#mainVisual .main_txt p.active {
  opacity: 1;
  letter-spacing: 0;
  filter: blur(0);
  transition-delay: .3s;
  visibility: visible; 
  white-space:nowrap;
  animation: cm-text-blur-animation2 1.6s ease-in-out both; 
}

@keyframes cm-text-blur-animation2 {
  0% {
    opacity: 0;
    text-shadow: 0 0 0.5rem #fff;
    letter-spacing: 2.5rem;
    transform: translateY(10rem); 
    filter: blur(20px);
  }
  50% { text-shadow: 0 0 0 #fff; }
  75% { letter-spacing: 0em; }
  100% {
    opacity: 1;
    letter-spacing: 0em;
    transform: translateY(0); 
    filter: blur(0px);
  }
}


#mainVisual .pager{display:flex; gap:8px}
#mainVisual .pager button{opacity:1; position:relative; display:flex; justify-content:center;align-items:center; border-radius:50%;color:#fff;cursor:pointer;background:transparent;transition:.2s;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}
#mainVisual .pager button:after{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:8px;height:8px;border-radius:50%;background-color:#fff;content:"";transition:all .2s}
#mainVisual .pager button.on:after{opacity:0}
#mainVisual .pager .progress{  transform: rotate(-90deg) scaleY(-1); width: 22px;  height: 22px;   overflow: visible;   transform-origin: 50% 50%;}
#mainVisual .pager .circle-origin{fill:transparent;stroke:rgb(255, 255, 255);stroke-width:3;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:all .2s;   vector-effect: non-scaling-stroke;   stroke-dasharray: var(--c);  stroke-dashoffset: var(--c);}
#mainVisual .pager button.on .circle-origin{animation:progress 4.5s ease}

@keyframes progress{
  from{ stroke-dashoffset: var(--c); } 
  to  { stroke-dashoffset: 0; }       
}

.btm{border:1px solid #fff; box-sizing:border-box; padding:20px 30px; position:absolute; bottom:42px; right:170px; z-index:999; display:flex; gap:51px;
background: rgba(255, 255, 255, 0.20); backdrop-filter: blur(11px);}
.btm a{font-size:20px; display:flex; gap:11px; align-items:center; font-weight: 200; color:#fff;}

@media (max-width:1400px){
	#mainVisual .main_txt p{font-size:6vw; }
}

@media (max-width:900px){
	#mainVisual .main_txt{top:38vw}
	#mainVisual .main_txt p{font-size:8vw; margin-bottom:40px;}
	#mainVisual .pager{gap:0;}
	#mainVisual .pager button:after{width:5px; height:5px;}

	.btm{right:20px; bottom:20px; width:auto; flex-wrap:wrap; gap:38px; padding:18px 0; width:calc(100% - 40px); align-items: center; justify-content:center;}
	.btm a{font-size:14px; gap:5px;}
	.btm svg{width:10px;}

}




:root{
  --transition-custom: all .8s ease;
}

iframe{height:100vh;}
.section01 .in{display:flex; margin-bottom:30px; gap:165px;}
/* 빨간 박스 위치/크기 조정 */
.section01 h2 {
  --mx: 243px; 
  --my: 0; 
  --mw: 42px;  
  --mh: 24px;  

  position: relative;
  display: inline-block;
  font-size: 55px;
  font-weight: 700;
  line-height: 1.2;
  color: #111; 
  flex-shrink:0;
}


.section01 h2 .white {
  position: absolute;
  inset: 0;               /* 컨테이너와 완전 동일 위치 */
  color: #fff; 
  pointer-events: none;

  -webkit-mask: linear-gradient(#000 0 0) no-repeat;
          mask: linear-gradient(#000 0 0) no-repeat;
  -webkit-mask-size: var(--mw) var(--mh);
          mask-size: var(--mw) var(--mh);
  -webkit-mask-position: var(--mx) var(--my);
          mask-position: var(--mx) var(--my);
  z-index: 1;            /* 빨간 박스 위에 */
}

/* 빨간 박스는 배치 */
.section01 h2 .red {
  position: absolute;
  left: var(--mx);
  top:  var(--my);
  width: var(--mw);
  height: var(--mh);
  background: #e60012;
  border-radius: 2px;     
  z-index: 0;
}


.section01 {margin-top:175px;}
.section01 .txtbox{}
.section01 .txtbox p{font-size:18px; font-weight:300; margin-bottom:27px; margin-top:20px;}
.section01 .imgbox{width:100%; max-width:1600px; margin:0 auto;}
.section01 .imgbox img{width:100%;}

.more_view{color:var(--main_c); display:flex; align-items:center; gap:10px; font-weight: 500;}

@media (max-width:1300px) {

}

@media (max-width:900px) {
	iframe{height:120vw;}
	.section01 {margin-top:40px;}
	.section01 .in{flex-direction:column; gap:10px;}
	.section01 h2{font-size:35px;  --mx: 154px; --mw: 26px; --mh: 14px;  }
	.section01 .txtbox p{font-size:16px; margin:0 0 10px 0; line-height:1.4;}
	.section01 .txtbox a{font-size:12px;}

	.more_view img{width:20px;}
}


.section02{position: relative; overflow:hidden;}
.section02 h4{color:var(--main_c); position:absolute; top:200px; left:50%; transform:translate(-50%,0); font-family: Poppins; font-weight: 600;  z-index: 99; }

.section02 .value{display:flex; align-items:flex-end; justify-content:center;}
.section02 .value .list-item{position: relative; transition:var(--transition-custom); text-align:center; padding:350px 0 170px 0; box-sizing:border-box;}
.section02 .value .list-item:before{position:absolute; content:''; width:1px; height:100%; right:0px; background:#ebebeb;  z-index: -1; top:0;}
.section02 .value .list-item:last-child:before{display:none;}

.section02 .value .tit{font-size: 36px; font-weight:700; font-family: Poppins;} 
.section02 .value .txt{font-size:18px; margin:32px 0 25px 0; font-weight: 300;}
.section02 .value a{position:relative; overflow:hidden; width:100%; display:inline-block; }
.section02 .value a > img{width:101%;  transition:transform .8s cubic-bezier(0.22,1,0.36,1); will-change: transform;}
.section02 .value a:hover > img{  transform:scale(1.1);}

/* 빨간 화살표 아이콘 */
.section02 .value a .icon{
  position:absolute;
  bottom:0;
  right:0;
  width:53px;
  height:53px;
  background:var(--main_c);
  opacity:0;
  transform:translateY(10px) scale(0.9);
  transition:opacity .4s ease, transform .4s ease;
  display: flex;
    align-items: center;
    justify-content: center;
	z-index:4;
	margin:0 auto;
}
 .section02 .value a:hover .icon{
  opacity:1;
  transform:translateY(0) scale(1);
}


.ani{
  position:absolute; top:0; left:0; width:100%; height:100%;
  z-index:15; pointer-events:none; display:flex;
}
.ani span{
  display:block; width:25%; height:100%; background:#fff;
  transition:height 0.9s cubic-bezier(0.22,1,0.36,1);
}
.ani span:nth-child(1){transition-delay:0.55s;}
.ani span:nth-child(2){transition-delay:0.35s;}
.ani span:nth-child(3){transition-delay:0.45s;}
.ani span:nth-child(4){transition-delay:0.25s;}
.animated .ani span{height:0;}

@media (max-width:900px) {
	.section02{padding:0 16px; box-sizing:border-box;}
	.section02 h4{top:60px; font-size:12px;}
	.section02 .value{flex-wrap:wrap; align-items:start;}
	.section02 .value .list-item{width:50%; padding:105px 0;}
	.section02 .value .list-item:nth-child(1), 	.section02 .value .list-item:nth-child(2){padding-bottom:30px;}
	.section02 .value .list-item:nth-child(3), 	.section02 .value .list-item:nth-child(4){padding-top:0;}
	.section02 .value .txtbox{padding:0 5px; box-sizing:border-box;}
	.section02 .value .tit{font-size:24px; line-height:1.2;}
	.section02 .value .list-item:nth-child(3) .tit{min-height:58px; display:flex; align-items:center; justify-content:center;}
	.section02 .value .txt{font-size:14px; margin:5px 0 10px 0; line-height:1.4;}
	.section02 .value .list-item:last-child:before{display:block;}
	.section02 .value .list-item:nth-child(1):after, 	.section02 .value .list-item:nth-child(3):after{
		position: absolute;
		content: '';
		width: 1px;
		height: 100%;
		left: 0px;
		background: #ebebeb;
		z-index: -1;
		top: 0;	
	}
}



.section03 {display:flex; gap:90px; margin-bottom:195px;}
.section03 .left {}
.section03 .left img { transition:opacity .6s ease; max-width:100%;}
.section03 .right {margin-top:84px;}
.section03 .right h2 {font-size:30px; margin-bottom:50px; font-weight:700; }
.section03 .item {margin-bottom:57px;cursor:pointer;}
.section03 .item h3 {font-family: Poppins; font-size: 75px; font-weight:600; color:#939393; transition:color .3s; line-height:1;}
.section03 .item.active h3 {color:var(--main_c);}
.section03 .item .desc {max-height:0;overflow:hidden;opacity:0;transition:all .6s ease;}
.section03 .item.active .desc {max-height:200px; opacity:1; margin-bottom: 167px;}
.section03 .item .desc p {font-size:17px; line-height:1.5; color:#424242; margin:23px 0; font-weight:300;}
.section03 .item .desc a {display:flex; align-items:center; color:var(--main_c); font-weight:500; gap:10px;}

@media (max-width:900px) {
	.section03{flex-direction:column; margin-bottom:50px; gap:0;}
	.section03 .item h3{font-size:30px;}
	.section03 .left {width:100%; height:268px; overflow:hidden; position:relative;}
	.section03 .left img {max-width:100%; transform:translate(-50%,-50%); top:50%; left:50%; position:absolute;}
	.section03 .right {width:100%; margin-top:20px; padding:0 20px; box-sizing:border-box;}
	.section03 .right h2{font-size:18px; margin-bottom:26px;}
	.section03 .right h3{font-size:40px;}
	.section03 .item{margin-bottom:20px;}
	.section03 .item.active .desc{margin-bottom:33px;}
	.section03 .item .desc p{margin:9px 0 21px 0; font-size:14px;}
	.section03 .item .desc a{font-size:12px;}
}