.p_font{font-family:"halogen" !important;}
.p_font2{font-family:"ocr-a-std" !important;}

/*pop*/

.agree_pop{display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; background: rgba(0,0,0,0.5)}
.agree_pop.atv_pop{display: block}

.agree_pop_content{position: absolute; left: 50%;
  top: 50%; background: #fff; padding: 60px; border-radius: 20px;
  transform: translate(-50%, -50%); width: 100%; max-width: 900px}



.agree_pop_content .agree_title{position: relative; }

.agree_pop_content .agree_title h2{font-size: 25px;}
.agree_pop_content .agree_title .close_pop{position: absolute; right: 0; top: 0; cursor: pointer}

.agree_pop_info{max-height: 400px; overflow-y: auto; margin-top: 15px; padding: 15px 0; border-top: 1px solid #ddd}
.agree_pop_info h3{font-size: 18px; font-weight: bold; word-break: keep-all; margin-bottom: 10px}
.agree_pop_info p{font-size: 16px; font-weight: 400; word-break: keep-all}
.agree_pop_info p + h3{margin-top: 30px}



.inner{position: relative; width: 100%; padding: 0 10rem}
.inner_in{position: relative; width: 100%; padding: 0 14rem}




/*head*/



.head_top{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	display: flex;
	padding: 0rem 5rem;
	justify-content: space-between;
    align-items: center;
    z-index: 9999;
}

.head_top:after{content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 0; background: rgba(92,92,92,.2);
backdrop-filter: blur(20px); z-index: -2; transition-duration: .8s}


.head_top:hover:after{ height: 300px;}

.head_top .left{display: flex;
justify-content: flex-start;
    align-items: center; gap:40px;}
    
    
.head_top .right{display: flex;
justify-content: flex-start;
    align-items: center; gap:40px;}    

.head_top .logo{
	background: url(../img/logow.png); 
	width: 150px; 
	height: 46px; 
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% auto
}

.top_nav{
	display: flex;
	gap:0px;
}

.top_nav li{
	position: relative;
	width: 160px; transition-duration: .8s
}

.top_nav li:after{content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 0; background: #397540;
z-index: -1; transition-duration: .8s}

.top_nav li:hover:after{height: 300px;}

.head_top:hover .top_nav li{
	width: 220px;
}



.top_nav .main_deps{
	color: #fff;
	font-size: 18px;
	text-align: center;
	display: flex;
	height: 100px;
	justify-content: center;
    align-items: center;
    font-weight: bold
}




.all_btn{width: 30px; height: 20px; position: relative; cursor: pointer; z-index: 9999}
.all_btn span{position: absolute;
width: 100%; height: 2px; background: #fff; transition-duration: .5s; border-radius: 2px}

.all_btn span:nth-child(1){top: 0; left: 0}
.all_btn span:nth-child(2){top: 50%; left: 0;transform: translateY(-50%);}
.all_btn span:nth-child(3){bottom: 0; right: 0; width: 60%}






.all_open .all_btn span:nth-child(1){transform: rotate(45deg) translateY(calc(-50% + 1px));
    top: 50%;}
.all_open .all_btn span:nth-child(2){opacity: 0}
.all_open .all_btn span:nth-child(3){transform: rotate(-45deg) translateY(calc(-50% + 1px));
    top: 50%; bottom: auto; top: 50%; width: 100%}



.top_nav .sub_detps{
	position: absolute; 
	top: calc(100% - 10px);
	left: 50%;
    transform: translateX(-50%); text-align: center;
    overflow: hidden; visibility: hidden;  width: 220px; transition-duration: .5s; opacity: 0;
    padding: 30px 0
     
}

.head_top:hover .top_nav .sub_detps {opacity: 1; visibility: visible; transition-duration: .8s;}


.top_nav .sub_detps a{
	font-size: 16px; color: #fff; opacity: .6;
	transition-duration: .5s; display: block; font-weight: 500;
}

.top_nav .sub_detps a:hover{opacity: 1}

.top_nav .sub_detps a + a{margin-top: 20px;}













body.all_open {
  overflow: hidden;
  height: 100vh;  /* iOS 대응 */
  touch-action: none;  /* 모바일 터치 스크롤 차단 */
}


.all_open .head_top:after{display: none}
.all_open .head_top .top_nav{visibility: hidden; opacity: 0; transition-duration: .5s}


.all_nav_are{position: fixed; left: 0; top: -100%; width: 100%;  z-index: 9998;
	background: rgba(92,92,92,.2);
backdrop-filter: blur(20px);
	display: flex;
	opacity: 0; visibility: hidden; transition-duration: 1s;;
	height: 100vh;
	z-index: 9998;
	align-items: center;
    justify-content: center;

}


.all_open .all_nav_are{opacity: 1; visibility: visible; top: 0}






.all_nav_are .nav_are{
	padding: 0 16rem;
	display: flex;
	align-items: flex-start;
   
    justify-content: center;
}

.nav_are *{transition-duration: .5s}
.nav_are li{display: flex;
justify-content: flex-start;
    align-items: flex-start; gap:45px;  flex-direction: column; width: 400px; padding: 38vh 60px; height: 100vh}
    
.nav_are li + li{border-left: 1px solid rgba(255,255,255,.2)}    
    
.nav_are li .main_deps{font-size: 36px; font-weight: 600; color: #fff; width: 170px}
.nav_are li .main_deps.open_deps,
.nav_are li .main_deps:hover{color: #fff}

.nav_are li .sub_detps{display: flex;justify-content: flex-start;
    align-items: flex-start; gap:20px; flex-direction: column;}
.nav_are li .sub_detps a{font-size: 18px; color: #fff; font-weight: 600; transition-duration: .5s; opacity: .6}

.nav_are li .sub_detps a:hover{color: #fff; opacity: 1}



.nav_are li .main_deps.open_deps + .sub_detps{visibility: visible; opacity: 1; }


.all_nav_are .copyright_all{text-align: center; font-size: 14px; color: #fff; position: absolute; bottom: 50px; left: 50%;
transform: translateX(-50%);}


/*footer*/

.foot_are{padding: 70px 0 30px; background: #171717}
.foot_are .foot_top{display: flex;
justify-content: space-between;
    align-items: flex-start; margin-bottom: 40px}

.foot_are .foot_top .foot_link{display: flex; gap:50px}
.foot_are .foot_top .foot_link a{font-size: 16px; color: #808080; font-weight: 600}

.foot_are p{display: flex; gap:8px; color: #fff; font-size: 16px;
    justify-content: flex-start;
    align-items: center; font-weight: 600}
    
.foot_are p + p{margin-top: 10px; color: #5c5c5c}    
    

.foot_are p i{width: 2px; height: 10px; background: rgba(255,255,255,0.1);}

.foot_last{padding-top: 30px;margin-top: 40px; border-top: 1px solid rgba(255,255,255,0.1)}
.foot_are .foot_last p{ color: #5c5c5c}

.floation_top{
	border-radius: 80px;
	background: #fda424;
	/* drop */
	box-shadow: 4px 4px 25px 0px rgba(0, 0, 0, 0.15);
	width: 80px;
	height: 80px;
	position: fixed; z-index: 3;
	right: 50px; bottom: 3rem;
	display: flex; 
	justify-content: center;
    align-items: center;
    transition-duration: 1s;
    opacity: 0
}

.floation_top.active{opacity: 1}

.floation_top:hover{padding-bottom: 5px}




/* main */


.main_visual{position: relative; height: 100vh; overflow: hidden}

.main-slider{}
.main-slider .box{position: relative; height: 100vh;
display: flex;
    justify-content: flex-start;
    align-items: center;
}
.main-slider .box .txt{z-index: 2; position: relative; width: 100%; padding-top: 50px}

.main-slider .box .txt h2{font-size: 60px; color: #fff; line-height: 150%; word-break: keep-all}
.main-slider .box .txt p{font-size: 18px; color: #fff; margin-top: 30px;}
.main-slider .box .txt a{height: 68px; display: inline-flex; text-align: center; padding: 0 55px; color: #fff; font-size: 18px; font-weight: 800;
border:2px solid #fff; border-radius: 68px;
justify-content: center;
    align-items: center; margin-top: 60px;
    background: rgba(255,255,255,.05);
backdrop-filter: blur(20px);}

.main-slider .box .bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.main-slider .box .bg img{width: 100%; height: 100%; object-fit: cover; }



.main-slider .slick-current .bg img {
  animation: scaleUp 5s ease forwards;
}

@keyframes scaleUp {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}



.thum_visual{
  position: absolute; right: 8rem; bottom: 6rem;
  width: 900px;
  z-index: 2
}


.thumb-slider .slick-track{
	    transform: none !important; 
	    display: flex;
    justify-content: flex-end;
}

.thumb-slider .slick-slide {
	margin: 0 20px;
  cursor: pointer;
}






.thumb-slider .slick-slide.slick-current{display: none}


.thumb-slider .box{border-radius: 8px; position: relative; overflow: hidden; box-shadow:1px 1px 15px rgba(0,0,0,0,0.2)}

.thumb-slider .box p{position: absolute; left: 0; width: 100%; bottom: 20px; padding: 0 20px; color: #fff; font-size: 18px; font-weight: bold;
word-break: keep-all}

.thumb-slider img {
  width: 100%; height: 100%; object-fit: cover;
}

.slide-count {
  position: absolute;
  padding:0 10rem;
  display: flex; 
  z-index: 2;
  top: calc(25% + 0px);
  width: 100%;
  gap:30px;
      justify-content: flex-start;
    align-items: center;
}
.slide-count i{width: 36px; height: 2px; background: #fff; opacity: .3}
.slide-count span{color: #fff; font-size: 16px; opacity: .3; font-weight: bold}
.slide-count span.current{opacity: 1; color: #f7c80c}


.progress-bar {
  height: 4px;
  background: rgba(255,255,255,0.45);
  width: 100%;
  position: absolute; z-index: 2;
  bottom: 0; left: 0
}

.progress-bar .progress {
  height: 100%;
  background: #f7c80c;
  width: 0%;
  transition: width linear;
}





.main_title{margin-bottom: 80px}
.main_title h2{font-size: 72px; font-weight: 900; color: #fff}
.main_title h2 b{color: #f7c80c}
.main_title h2 span{color: #787878}

.main_title h4{margin-bottom: 30px; font-size: 20px; font-weight: bold; color: #fff}

/*main_s02*/






.pinned-section {
  position: relative;
  height: 100vh; /* 충분한 스크롤 영역 */
  background: #111;
  color: white;
  overflow: hidden;
}

.pinned-section .title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 88px;
  font-weight: bold;
  opacity: 0;
  z-index: 1;
  text-align: center;width: 100%
}

.pinned-section .title span{display: block}

.new_slide_are {
  position: relative;
  opacity: 0;
  z-index: 2;
transform: translateY(100vh); /* ✅ 아래로 미리 위치시켜둠 */
padding: 150px 0;
 visibility: hidden;
  transition: all 0.5s ease;
}



.new_slide_are.active {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}




.new_slide{margin: 0 -50px}

.new_slide .slick-list{padding:0 20rem 0 10rem; overflow: visible}

.new_slide .slick-slide{margin: 0 50px; transition-duration: .5s}

.new_slide .slick-slide.slick-active + .slick-slide{padding-top: 50px}
.new_slide .slick-slide.slick-active + .slick-slide + .slick-slide{padding-top: 0px}



.new_slide .box{}

.new_slide .box h4{margin-bottom: 15px; opacity: .3; font-size: 16px;}

.new_slide .box .thum{position: relative;border-radius: 20px; overflow: hidden ;
box-shadow: 0 0 10px rgba(0,0,0,0.6)}

.new_slide .box .thum:after{content: ''; position: absolute; left: 0; bottom: -50%; width: 100%; height: 50%;
background: linear-gradient(0deg,rgba(247, 200, 12, 1) 0%, rgba(0, 0, 0, 0) 100%); transition-duration: .5s; opacity: 0}

.new_slide .box .thum:hover:after{opacity: 1; bottom: 0;}


.new_slide .box .thum img{width: 100%; }
.new_slide .box .thum .txt{position: absolute; left: 0; bottom: 30px; padding:0 35px; width: 100%; z-index: 2}
.new_slide .box .thum .txt h3{color: #fff; font-size: 36px}
.new_slide .box .thum .txt p{color: #fff; font-size: 16px;}
.new_slide .box .thum .txt *{text-shadow: 0 0 10px rgba(0,0,0,0.6)}







.power-section {
  position: relative;
  height: 100vh;
  background-color: #000;
  overflow: hidden;
}

.power-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 88px;
  color: white;
  z-index: 2;
  text-align: center;
  width: 100%; font-weight: 900
}

.power-image-wrap {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  z-index: 1;
}

.power-image {
  width: 800px;
  height: 200px;
  object-fit: cover;
  border-radius: 20px;
  transition: all 0.3s ease;
}

.next-section {
  position: absolute; /* relative가 아닌 absolute로 위치 고정 */
  bottom: -100vh;      /* 뷰포트 아래로 완전히 숨김 */
  left: 0;
  width: 100%;
  opacity: 0;
  transform: translateY(0); /* 초기엔 그대로 아래 위치 */
  z-index: 3;
  transition: none; /* JS로 제어하므로 CSS transition 제거 */
 text-align: center; 
 color: #fff;
 height: 100vh;
 padding: 150px 0
}


.flex_energy{display: flex;
flex-wrap: wrap; gap:40px}

.flex_energy .box{width: calc(25% - 30px); text-align: center; 
border: 2px solid rgba(255,255,255,0.2); padding: 30px 15px; border-radius: 15px;
     transition-duration: .5s; position: relative}

.flex_energy .box:before{
	z-index: -1;
	content: '';
	position: absolute; left: 0; top: 0;
	width: 100%;
	height: 100%; 
	backdrop-filter: blur(40px); background: rgba(0,0,0,0.6); 
	border-radius: 15px
}


.flex_energy .box:after {
    content: '';
    position: absolute;
    left: 50%;
    top: -10%;
    background: #f7c80c;
    width: 30%;
    height: auto;
    border-radius: 100%;
    aspect-ratio: 1;
    z-index: -2;
    transform: translateX(-50%);
    filter: blur(100px);
    opacity: 0;
    transition-duration: .5s
}


.flex_energy .box:hover:after{opacity: 1}

.flex_energy .box p{color: #fff; font-size: 20px; margin-bottom: 15px; transition-duration: .5s}
.flex_energy .box:hover p{color: #f7c80c}

.flex_energy .box h2{font-size: 80px; color: #fff; font-weight: bold; line-height: 1}
.flex_energy .box h2 span {
 font-size: 24px;
}



.main_mid_video{height: 64vh; background: #000}
.main_mid_video video{width: 100%;
    object-fit: cover;
    height: 100%;}



.main_vision{
	background: #f8f8f8; padding: 150px 0;
	overflow: hidden
}

.vision_slide{margin: 0 -30px}

.vision_slide .slick-list{padding:0 20rem 0 10rem; overflow: visible}
.vision_slide .slick-slide{margin: 0 30px;}


.vision_slide .box{display: flex; overflow: hidden;  border-radius: 20px; overflow: hidden; height: 48vh}
.vision_slide .box .left{width: 540px; padding: 80px 50px; background: #f2a548}

.vision_slide .box .left.green{background: #499a52}
.vision_slide .box .left.blue{background: #4ea0cf}

.vision_slide .box .left.navy{background: #394986}

.vision_slide .box .left p.tag{font-size: 14px; color: #fff; padding: 5px 8px; border-radius: 50px; background: rgba(255,255,255,0.2);
display: inline-block; margin-bottom: 10px}

.vision_slide .box .left h2{font-size: 76px; color: #fff; font-weight: 800; text-shadow: 0px 0px 7px rgba(0,0,0,0.1)}
.vision_slide .box .left h3{color: #fff; font-size: 20px; font-weight: bold; margin-bottom: 40px}



.vision_slide .box .left p{color: #fff; font-size: 18px; font-weight: 400; line-height: 140%; word-break: keep-all; opacity: .8; word-break: keep-all}


.vision_slide .box .left ul.dot{}
.vision_slide .box .left ul.dot li{color: #fff; font-size: 18px; font-weight: 400; line-height: 140%; 
word-break: keep-all; opacity: .8; word-break: keep-all; padding-left: 15px; position: relative}
.vision_slide .box .left ul.dot li:after{content: '·'; position: absolute; left: 0; top: 0}



.vision_slide .box .thum{overflow: hidden; flex:1; }
.vision_slide .box .thum img{width: 100%; height: 100%; object-fit: cover; transition-duration: 5s}
.vision_slide .slick-active .box .thum img{scale:1.1}



.vision_slide .slick-dots{display: flex; margin-top: 50px;     justify-content: center;
    align-items: center; gap:10px; transition-duration: .5s}
.vision_slide .slick-dots li{width: 8px; height: 8px; background: #cfcfcf; border-radius: 8px; opacity: .8; transition-duration: .5s}
.vision_slide .slick-dots li button{opacity: 0;}

.vision_slide .slick-dots li.slick-active{width: 60px; opacity: 1}


.main_project{padding: 150px 0; overflow: hidden}
.main_project .main_title h4{color: #444}
.main_project .main_title h2{color: #000}


.top_flex{display: flex;
    justify-content: space-between;
    align-items: flex-end; margin-bottom: 80px}

.top_flex .main_title{margin: 0}

.project_cont{display: flex; gap:40px}
.project_cont .slide_btn_are{display: flex; gap:15px;}

.project_cont span.slide_btn{width: 80px; height: 80px; border: 2px solid #e0e0e0; display: flex;     justify-content: center;
    align-items: center; border-radius: 80px; cursor: pointer; opacity: .6; transition-duration: .5s}

.project_cont span.slide_btn:hover{opacity: 1}

.project_cont a{height: 80px;border: 2px solid #e0e0e0; display: flex;     justify-content: center;
    align-items: center; border-radius: 80px; font-size: 18px; color: #1b1b1b; gap:15px; padding: 0 30px}




.project_slide{margin: 0 -30px}

.project_slide .slick-list{padding:0 10rem 0 10rem; overflow: visible}
.project_slide .slick-slide{margin: 0 30px;}


.project_slide .slick-track{margin-left: 0}

.project_slide .box{}
.project_slide .box .txt{margin-top: 35px}
.project_slide .box .txt p{margin-bottom: 10px; color: #de9b25; font-size: 16px; font-weight: bold}
.project_slide .box .txt h4{font-size: 20px; font-weight: bold; color: #1a1a1a}


.project_slide .box .thum{border-radius: 12px; overflow: hidden; display: block; position: relative; transition-duration: 1s;
aspect-ratio: 1;}

.project_slide .box .thum:hover{border-radius: 100%}

.project_slide .box .thum img.thumimg{width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1;}

.project_slide .box .thum .hover{position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%;
display: flex;
    justify-content: center;
    align-items: center; background: rgba(253,164,36,0.9); font-size: 22px; color: #fff; font-weight: 600; gap:10px; transition-duration: 1s; opacity: 0}


.project_slide .box .thum:hover .hover{opacity: 1}