::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: #666;
}

::-webkit-scrollbar-thumb {
    background: #111;
    border-radius: 10px;
}


.foot_btn{position: fixed; z-index: 9992;
right: 3rem; bottom: 3rem; width: 100px; height: 100px;
background: rgba(255,255,255.96); border-radius: 96px;
display: flex;   align-items: center;
  justify-content: center;
  border: 1px solid #efefef;
    box-shadow: 1px 1px 15px rgba(0,0,0,0.05)}



.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 120px;
  height: 120px;
  background:rgba(255, 255, 255, 1);
  color: #008CD6;
  display: none; /* 기본적으로 숨김 */
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border-radius: 180px;
  pointer-events: none;
  transform: translate(-100%, -100%);
  border:1px solid #rgba(255, 255, 255, 0.20);

  user-select: none;
  z-index: 4444;
  gap:20px; display: flex;
  box-shadow: 1px 1px 15px rgba(0,0,0,0.05)
}


.custom-cursor:after{content: '';
background: url(../img/common/next.png); width: 19px; height: 8px; background-repeat: no-repeat; background-size: 100% auto}


.custom-cursor:before{content: '';
background: url(../img/common/prev.png); width: 19px; height: 8px; background-repeat: no-repeat; background-size: 100% auto}


/*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: 30px; border-radius: 5px;
  transform: translate(-50%, -50%); width: 100%; max-width: 900px}



.agree_pop_content .agree_title{position: relative; }

.agree_pop_content .agree_title h2{font-size: 18px;}
.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: 16px; font-weight: bold; word-break: keep-all; margin-bottom: 10px}
.agree_pop_info p{font-size: 14px; font-weight: 400; word-break: keep-all}
.agree_pop_info p + h3{margin-top: 20px}


.agree_pop_info::-webkit-scrollbar {
    width: 2px;
    height: 2px;
}

.agree_pop_info::-webkit-scrollbar-track {
    background: #ccc;
}



/*header*/

.header{position: fixed; left: 0; top: 0; width: 100%; z-index: 9998; transition-duration: .8s}
.header.sub{background: #fff}


.header .logo{
	width: 172px; height: 37px;
	background: url(../img/common/logow.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	position: absolute; left: 7rem;
	top: 40px;
	z-index: 9999
}


.header .logo.logob,
.header.sub .logo{
	background-image: url(../img/common/logo.png);
}


.header .top_nav{display: flex; gap:80px;  justify-content: center; opacity: 1; visibility: visible; transition-duration: .8s}

.header .top_nav li{position: relative; text-align: center}
.header .top_nav li .onedeps{font-size: 18px; font-weight: 600; color: #fff; transition-duration: .8s;
height: 120px;  display: flex;
    justify-content: center;
    align-items: center;}
.header .top_nav li:hover .onedeps{color: #00A0DF}


.header .top_nav .sub_deps{position: absolute; padding: 0px 30px;
border-radius: 5px;
background: rgba(0, 160, 223, 0.90);
box-shadow: 4px 4px 25px 0 rgba(0, 0, 0, 0.25); top: calc(100% - 20px); left: 50%;
    transform: translateX(-50%); width: max-content; 
    transition-duration: .7s;
    opacity: 0; visibility:hidden; height: 0; max-height: 0; }


.header .top_nav li:hover .sub_deps{
	opacity: 1; visibility: visible; height: auto; max-height: 500px;
	 padding: 25px 30px;
}


.header.sub li .onedeps{color: #222}
.header.sub li .onedeps.on{color: #00A0DF}


.header .top_nav .sub_deps a{display: block; color: #fff; font-size: 16px; opacity: 0; transition-duration: .1s}
.header .top_nav .sub_deps a + a{padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.50); margin-top: 10px}

.header .top_nav li:hover .sub_deps a{opacity: 1; transition-duration: .8s}

.header .top_nav li:hover .sub_deps a:hover{opacity: 1}

.header .right{position: absolute; right: 7rem; top: 50px; display: flex; gap:50px; align-items: center;
z-index: 9999}
.header .right .all_btn{display: flex; gap:15px; align-items: center; color: #fff; font-size: 14px; font-weight: 500}
.header .right .all_btn span{}

.lang{position: relative; cursor: pointer}
.lang p{display: flex; padding: 10px 15px; border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.30); color: #fff; font-size: 16px; display: inline-flex; gap:15px; align-items: center; }


.header.sub .lang a{color: #333}

.lang a{color: #fff; font-size: 16px; font-weight: 700; text-decoration: underline}

.lang .lang_list{position: absolute;
 padding: 0px 15px;
border-radius: 3px;
border: 1px solid rgba(255, 255, 255, 0.20);
background: rgba(255, 255, 255, 0.10);
/* blur */
backdrop-filter: blur(9px); top: calc(100% + 5px); left: 50%;
    transform: translateX(-50%); width: 100%; 
    transition-duration: .7s; text-align: center
        opacity: 0; visibility:hidden; height: 0; max-height: 0; text-align: center}


.lang .lang_list.on{
	opacity: 1; visibility: visible; height: auto; max-height: 500px;
	 padding: 15px;
}
    
.lang .lang_list:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 3px;
  background: linear-gradient(120deg, #FF7200, rgba(255, 255, 255, 0.20), #FF7200);
  background-size: 300% 300%;
  clip-path: polygon(0% 100%, 1px 100%, 1px 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - 1px), 1px calc(100% - 1px), 1px 100%, 100% 100%, 100% 0%, 0% 0%);
  animation: frame-enter 1s forwards ease-in-out reverse, gradient-animation 4s ease-in-out infinite;
}




.lang .lang_list.on{
	
}

.lang .lang_list a{display: block; color: #fff; font-size: 16px; opacity: 0; transition-duration: .1s}
.lang .lang_list a + a{margin-top: 10px;}
.lang .lang_list a:hover{opacity: 1}

.lang .lang_list.on a{opacity: .5; transition-duration: .8s}
.lang .lang_list.on a:hover{opacity: 1}


body.open_mo{height: 100vh; overflow: hidden}

.site_map{position: fixed; z-index: 9992;
background: rgba(0, 0, 0, 0.80); 
height: 100%; width: 100%; left: 0; top: 0;
display: flex;
justify-content: center;
align-items: center; padding: 0 5rem; opacity: 0; visibility: hidden; transition-duration: .8s}


.open_mo .site_map{opacity: 1; visibility: visible}

.open_mo .header .top_nav{opacity: 0; visibility: hidden; display: none}

.site_map .top_nav{width: 100%;
display: flex;
    align-items: flex-start;
    justify-content: center;
    gap:8rem;
}
.site_map .top_nav li{}
    


  
    
.site_map .top_nav li .onedeps{
	font-size: 30px; color: #fff; font-weight: 700; 
	opacity: 1; transition-duration: .8s;
}



.site_map .top_nav li .sub_deps{margin-top: 40px;}
.site_map .top_nav li .sub_deps a{font-size: 18px; color: #fff; transition-duration: .8s;display: block; opacity: .8}
.site_map .top_nav li .sub_deps a:hover{color: #1B97D3; opacity: 1}

.site_map .top_nav li .sub_deps a + a{margin-top: 25px}


.inner{padding: 0 7rem}


/*foot*/

.footer{background: #222222}
.footer .foot_top{padding: 30px 0; border-bottom: 1px solid #3F3F3F}
.footer .foot_top .foot_link{display: flex; gap:15px;     align-items: center;}
.footer .foot_top .foot_link a{font-size: 16px; color: #fff; opacity: .4}
.footer .foot_top .foot_link a.agree_btn{opacity: 1}
.footer .foot_top .foot_link i{background: #3F3F3F; width: 1px; height: 16px;}

.foot_info{padding: 50px 0; border-bottom: 1px solid #3F3F3F}

.foot_info .inner{display: flex; gap:50px;
    align-items: flex-start;
    justify-content: flex-start;}
.foot_info .inner .foot_txt{display: flex; gap:10px 40px;     flex-wrap: wrap;}
.foot_info .inner .foot_txt + .foot_txt{margin-top: 10px}
.foot_info .inner .foot_txt li{display: flex; gap:20px; align-items: center; color: #fff; font-size: 16px; word-break: keep-all; }
.foot_info .inner .foot_txt li b{border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.21);
background: rgba(255, 255, 255, 0.05); padding: 8px 25px;}

.foot_copy{text-align: center;padding: 30px 0; }
.foot_copy p{word-break: keep-all; font-size: 16px; color: #fff; opacity: .4}




/*index*/

.main_viusal_are{position: relative; height: 100vh; overflow: hidden}
.main_viusal_are .box{height: 100vh; position: relative; overflow: hidden;
    display: flex;
    justify-content: flex-start;
    align-items: center;}

.main_viusal_are .box .visual_bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000}
.main_viusal_are .box .inner{position: relative; z-index: 2}

.main_viusal_are .box .visual_bg video{width: 100%; height: 100%; object-fit: cover; opacity: .8}


.main_viusal_are .cont{display: flex; margin-top: 50px; gap:10px; align-items: center;}

.main_visual { position: relative; }
.line{position:relative; width:250px; height:2px; background:rgba(255,255,255,.4); overflow:hidden}
.line_bg{position:absolute; left:0; top:0; height:100%; width:0; background:#fff; transition:width .5s linear;}

.main_visual .startandstop{border:0; background:transparent; cursor:pointer; display:inline-flex; align-items:center; gap:8px}
.main_visual .startandstop img{display:none; height:16px}
.main_visual .startandstop .start{display:block;}           /* 기본: start 보임 */
.main_visual .startandstop.is-playing .start{display:none;} /* 재생 중: stop 보임 */
.main_visual .startandstop.is-playing .stop{display:block;}


.main_visual .txt h2{color: #fff; font-size: 70px; word-break: keep-all; }
.main_visual .txt p{margin-top: 20px; font-size: 20px; color: #fff; word-break: keep-all}



.main_mid_slide_are{position: relative; height: 100vh; overflow: hidden}
.main_mid_slide .box{position: relative; height: 100vh; overflow: hidden;
display: flex;
    justify-content: flex-start;
    align-items: center;}
.main_mid_slide .box .mid_visual_bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000}

.main_mid_slide .box .mid_visual_bg video{width: 100%; height: 100%; object-fit: cover; opacity: .8}

.main_mid_slide .box .txt{position: relative; z-index: 2; text-align: center; width: 100%}

.main_mid_slide .box .txt h2{font-size: 100px;  color: #fff; word-break: keep-all;}
.main_mid_slide .box .txt h2 span{display: inline-block; background: rgba(255, 255, 255, 0.27); padding: 0 10px}
.main_mid_slide .box .txt p{font-size: 20px; color: #fff; margin-top: 25px; font-weight: bold}
.custom_dots{
  display:flex; gap:10px; align-items:center; justify-content:center;
  margin-top:16px; padding:0;
  z-index: 2; position: absolute; bottom: 5rem; 
  width: 100%;
  padding: 0 5rem;
  
}
.custom_dots li{ list-style:none;  flex:1}
.custom_dots .line{
  position:relative; width:100%; height:2px;
  background:rgba(255,255,255,.35); overflow:hidden;
  display: block
}


/* 실제 채워지는 바: ::after 를 scaleX로 부드럽게 */
.custom_dots .line::after{
  content:""; position:absolute; left:0; top:0; height:100%; width:100%;
  background:#fff;
  transform-origin:left center;
  transform:scaleX(var(--p, 0));         /* 0 ~ 1 */
  will-change:transform;
}




.main_what{padding: 200px 0 120px; background: #F5F5F5; position: relative; }
.main_what h2{font-size: 60px; font-weight: bold; color: #222; word-break: keep-all}

.main_what_flex{margin-top: 50px; display: flex; gap:10px}
.main_what_flex .box{flex:1 1 0%; transition-duration: .8s; height: 50vh; position: relative; padding: 70px 50px;
display: flex;
align-items: flex-end;
    justify-content: flex-start;}

.main_what_flex .box p{font-size: 24px; color: #fff; font-weight: 700; word-break: keep-all; position: relative; z-index: 2; transition-duration: .8s}

.main_what_flex .box .bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%}
.main_what_flex .box .bg img{width: 100%; height: 100%; object-fit: cover; }
.main_what_flex .box:hover{flex:4 1 0%}


.main_what_flex .box:last-child {
    margin: 0 auto 0;
}






.main_product_are{position: relative; min-height: 722px }

.main_product{text-align: center; padding: 120px 0; overflow: hidden;  position: relative; background: #fff}


.main_product_slide{position: relative; margin-top: 50px}

.main_product_are:after{content: '';
position: absolute; width: 100vh; height: 100vh; border: 1px solid #ddd; border-radius: 1000px; 
left: 50%; top: 50%; z-index: -1; transform: translate(-50%, -50%); aspect-ratio: 1; opacity: .5}

.main_product_slide .box{text-align: center;  transition-duration: .8s}
.main_product_slide .box h2{font-size: 30px; font-weight: bold; color: #222; 
transition-duration: .5s; opacity: 0; height: 0; max-height: 0}

.main_product_slide .box p{font-size: 18px; font-weight: 500; color: #222; 
transition-duration: .5s; opacity: 0; height: 0; max-height: 0}

.main_product_slide .box img{margin: 0px auto ; transform: scale(0.5); transition-duration: .8s}

.main_product_slide .slick-list{overflow: visible; padding: 0 40rem}

.main_product_slide .slick-slide.slick-current .box{filter: blur(00px); }
.main_product_slide .slick-slide.slick-current .box h2{opacity: 1; height: auto; max-height: 100px}
.main_product_slide .slick-slide.slick-current .box p{opacity: 1; height: auto; max-height: 100px; margin-top: 15px;}



.main_product_slide .slick-slide.slick-current .box img{margin-bottom: 20px; transform: scale(1); max-width: 480px}

.main_product_btn{}
.main_product_btn span{position: absolute; top: 50%; left: 35rem; z-index: 2; width: 60px; height: 60px;
border: 1px solid #D8D8D8; border-radius: 100px; display: flex;
    justify-content: center;
    align-items: center; cursor: pointer; background: #fff; margin-top: -50px}


.main_product_btn span + span{left: auto; right: 35rem}



.main_product_slide_tab{display: flex; gap:20px;    justify-content: center;}
.main_product_slide_tab p{display: inline-flex; padding: 18px 30px; 
border: 1px solid #ddd; background: #fff; border-radius: 50px; color: #222; font-size: 18px; 
word-break: keep-all; transition-duration: .8s; cursor: pointer}
.main_product_slide_tab p.on{background: #00A0DF; color: #fff}




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

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

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

.power-image {
  width: 400px;
  height: 240px;
  object-fit: cover;
  border-radius: 0px;
  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;
display: flex;
    justify-content: center;
    align-items: center;
}



.main_title{ margin-bottom:60px}
.next-section .main_title{text-align: center; margin: 0}

.main_title h2{color: #222; font-size: 50px; font-weight: 800; word-break: keep-all}
.main_title h4{color: #222; font-size: 20px; word-break: keep-all; margin-top: 30px; font-weight: 500}

.next-section .main_title h2,
.next-section .main_title h4{color: #fff}


.main_gallery{padding: 150px 0}
.main_gallery .main_title{position: relative}

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


.slide_gall_ct{position: absolute; right: 0; bottom: 0; display: flex; gap:15px; align-items: center;}
.slide_gall_ct span{width: 60px; height: 60px;
border: 1px solid #D8D8D8; border-radius: 100px; display: flex;
    justify-content: center;
    align-items: center; cursor: pointer; background: #fff; }

.main_gall_list{margin: 0 -15px}
.main_gall_list .slick-slide{padding: 0 15px;}
.main_gall_list .slick-slide .thum{display: block; border-radius: 10px; overflow: hidden; border: 1px solid #ddd}
.main_gall_list .slick-slide .thum img{width: 100%; height: 100%; object-fit: cover; 
scale:1.0; transition-duration: 2s;
aspect-ratio: 16 / 9;}
.main_gall_list .slick-slide .thum:hover img{scale:1.1;}

.main_gall_list .slick-slide .txt{display: block; margin-top: 20px}
.main_gall_list .slick-slide .txt p{font-size: 18px; color: #222; margin-bottom: 5px}
.main_gall_list .slick-slide .txt h4{font-size: 20px; font-weight: bold; word-break: keep-all}

.main_gallery .main_contact{
	border-radius: 10px;
	background: url(../img/main/main_contact.png);
	background-position: center;
	background-size: cover;
	padding: 100px 0;
	margin-top: 150px
}

.main_gallery .main_contact .main_title{text-align: center; margin: 0}

.main_gallery .main_contact .main_title h2,
.main_gallery .main_contact .main_title h4{color: #fff}



.more_btn{
	border-radius: 30px;
border: 1px solid #FFF;
padding: 18px 34px; text-align: center; display: inline-flex;
gap:15px;  justify-content: center;
    align-items: center; font-size: 18px; color: #fff;
    transition-duration: .8s
}



.more_btn:hover{background: #00A0DF; border-color: #00A0DF}


.more_btn.color{
	background: #00A0DF; border-color: #00A0DF
}


.more_btn.sub{
	color: #ACACAC;
	border-color: #ddd;
	background: #fff;
}

.more_btn.sub:hover{background: #00A0DF; border-color: #00A0DF; color: #fff}


.main_title .more_btn{margin-top: 60px;}