::-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: 4; right: 3rem; bottom: 3rem}
.foot_btn a{display: flex; width: 60px; height: 60px; 
justify-content: center;
    align-items: center; border-radius: 60px; background: #0078FF; border: 1px solid #0078FF}


.foot_btn a + a{background: #fff; border-color: #efefef; margin-top: 12px}




.foot_btn .fast{border-radius: 60px; overflow: hidden; margin-bottom: 12px }
.foot_btn .fast a{border-radius: 0; color: #fff; font-size: 12px; word-break: keep-all; text-align: center; border: 0}

.foot_btn .fast.eng a{font-size: 10px;}

.foot_btn .fast a + a{margin: 0}
.foot_btn .fast a:nth-child(1){background: #D0111B}
.foot_btn .fast a:nth-child(2){background: #1C2952}
.foot_btn .fast a:nth-child(3){background: #0078FF}
.foot_btn .fast a:nth-child(4){background: #7E7777}




/*foot*/
.footer{padding: 90px 0; background: #171717}


.foot_inq a{font-size: 60px; color: #fff; line-height: 140%; word-break: keep-all; font-weight: 800; display: inline-block; padding-bottom: 80px;}

.foot_info{
	
}

.foot_info ul{display: flex; gap:20px 30px;
flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;}
.foot_info ul li.w100{width: 100%}

.foot_info ul li{color: #fff; font-size: 16px; word-break: keep-all; line-height: 140%; display: flex; gap:10px;
justify-content: flex-start;
    align-items: flex-start;}
.foot_info ul li b{opacity: .5}


.foot_info .bottom{margin-top: 50px; display: flex; gap:40px;  align-items: center;}
.foot_info .bottom .foot_copy p{font-size: 16px; color: #fff; word-break: keep-all; line-height: 140%; opacity: .5}


.foot_info .bottom .foot_link{display: flex; gap:10px;  justify-content: flex-start;
    align-items: flex-start;}
.foot_info .bottom .foot_link a{padding: 10px 18px; border-radius: 40px;
border: 1px solid rgba(255, 255, 255, 0.20);
background: #171717; font-size: 16px; color: rgba(255,255,255,0.8); word-break: keep-all; }


.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background: rgba(0, 120, 255, 0.80) url(../img/common/foot_more.png);;
  color: #fff;
  display: none; /* 기본적으로 숨김 */
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border-radius: 180px;
  pointer-events: none;
  transform: translate(-100%, -100%);
background-repeat: no-repeat; background-size: 22px auto

  user-select: none;
  z-index: 4444;
  gap:20px; display: flex;
  background-position: center
}





/*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: absolute; left: 0; top: 0; width: 100%; z-index: 9998}

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


.header .top_nav{display: flex; gap:60px;  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; text-transform: uppercase}
.header .top_nav li:hover .onedeps{color: #D0111B}


.header .top_nav .sub_deps{position: absolute; padding: 0px 30px;
background: rgba(255, 255, 255, 0.10);
box-shadow: 2px 2px 15px 0 rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px); 
top: calc(100% - 20px); left: 50%;
    transform: translateX(-50%); width: max-content; 
    transition-duration: .7s;
    opacity: 0; visibility:hidden; height: 0; max-height: 0;width: 180px }


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

.header .top_nav .sub_deps:after {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 14px;
  background: #D0111B;
   transform: translateX(-50%); 
}





.header .top_nav .sub_deps a{display: block; color: #fff; font-size: 16px; opacity: 0; transition-duration: .1s; line-height: 150%}
.header .top_nav .sub_deps a + a{margin-top: 15px;}

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

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

.header .right{position: absolute; right: 6rem; 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{}

.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;
        width: max-content;}


.lang .lang_list.on{
	opacity: 1; visibility: visible; height: auto; max-height: 500px;
	 padding: 15px;
}
    




.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}






.all_btn{width: 40px; height: 12px; position: relative}
.all_btn span{position: absolute; width: 100%; height: 2px; background: #fff; transition-duration: .8s}
.all_btn span:nth-child(1){left: 0; top: 0}
.all_btn span:nth-child(2){left: 0; bottom: 0}




.open_mo .all_btn span:nth-child(1) {
    transform: rotate(45deg) translateY(calc(-50% + 1px));
    top: 50%;
}

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



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

.site_map{position: fixed; z-index: 9992;
background: rgba(27, 27, 27, 0.70);
backdrop-filter: blur(10px);
height: 100%; width: 100%; left: 0; top: 0;
display: flex;
justify-content: center;
align-items: center; padding: 0 14rem; 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{ position: relative; overflow: hidden}
    


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

.site_map .top_nav li:hover .onedeps{opacity: 1}


.site_map .top_nav li .sub_deps{margin-top: 35px;}
.site_map .top_nav li .sub_deps a{font-size: 18px; color: #fff; opacity: .8; transition-duration: .8s; display: block; word-break: keep-all; line-height: 150%}
.site_map .top_nav li .sub_deps a:hover{opacity: 1}

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



.inner_in{padding: 0 14rem}
.inner{padding: 0 6rem}


/*index*/


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

.main_visual .box{position: relative; }
.main_visual .box .txt{position: absolute; padding: 0 10rem 30rem; width: 100%; height: 100%;
display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end; z-index: 2}
    
.main_visual .box .txt h2{word-break: keep-all; font-size: 60px; color: #fff; font-weight: 300; line-height: 150%}
.main_visual .box .txt h2 b{font-weight: bold}

.main_visual .box .txt h2 + p{margin-top: 25px}

.main_visual .box .txt p{word-break: keep-all; line-height: 150%; color: #fff; font-size: 20px;}

.custom-dots {
  display: flex;
  justify-content: flex-start;
  position: absolute; width: 100%; bottom: 15rem;
  padding: 0 10rem;
  gap:8px
}

.custom-dots .dot {
  width: 8px;
  height: 8px;
  margin: 0;
  background: rgba(255,255,255,0.3);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition-duration: .8s
}

.custom-dots .dot.active{width: 80px}

.custom-dots .dot .bar {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0;
  background: #fff;
}


.main_visual .box .txt h2{
  opacity: 0;
  transform: translateY(50px); /* 아래쪽에서 시작 */
  transition: all 1s ease;
}
.main_visual .box .txt p {
  opacity: 0;
  transform: translateY(50px); /* 아래쪽에서 시작 */
  transition: all 1.4s ease;
}

.main_visual .box.active .txt h2,
.main_visual .box.active .txt p {
  opacity: 1;
  transform: translateY(0);
}

.main_visual .box .bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.1);
  transition: transform 6s ease; /* 슬라이드 시간보다 약간 길게 */
}

.main_visual .box.active .bg img {
  transform: scale(1.0);
}



.main_section{padding: 150px 0;}

.main_section + .main_section{padding-top: 0}

.main_section .main_s01{
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.main_section .main_s01 h2{color: #0E0E0F; font-size: 100px; font-weight: 400; line-height: 140%; word-break: keep-all; text-align: left;
    width: 100%;
    max-width: 900px;}
.main_section .main_s01 h2 b{font-weight: 800}
.main_section .main_s01 h2 b.color{color: #0078FF}


.main_section .main_s01 h2 + h2{text-align: right; margin-top: 15px}


.main_section .main_s01 p{font-size: 24px; color:#0E0E0F; word-break: keep-all; line-height: 160%; margin: 100px 0; font-weight: 500}

.main_section .main_s01 .main_s01_sm{
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}


.common_btn{display: inline-flex; height: 60px; padding: 0; transition-duration: .8s; gap:25px;
align-items: center; border-radius: 60px; position: relative; overflow: hidden}
.common_btn:hover{padding-left: 25px;}

.common_btn span{color:#0078FF; font-size: 16px; word-break: keep-all; font-weight: 600; transition-duration: .8s }
.common_btn:hover span{color: #fff}

.common_btn i{width: 60px; height: 60px; display: flex; 
    justify-content: center;
    align-items: center;}


.common_btn:after{
	content: '';
	position: absolute; right: 0; width: 60px; height: 60px;
	background: #0078FF;
	z-index: -1;
	transition-duration: .8s;
	border-radius: 60px
}

.common_btn:hover:after{width: 100%}


.main_product{overflow: hidden}
.main_title{margin-bottom: 60px; position: relative}
.main_title.center{text-align: center}

.main_title h2{font-size: 60px; color: #222; word-break: keep-all; font-weight: 900}
.main_title p{font-size: 24px; color: #0E0E0F; word-break: keep-all; line-height: 160%; margin-top: 30px;}

.main_title .common_btn{position: absolute; right: 0; bottom: 0}



.tab_slide .slick-track{display: flex;
    align-items: center;
    justify-content: center;
    transform: none !important; gap:20px}

.tab_slide .box{cursor: pointer; padding: 18px 40px; border: 1px solid #ddd; border-radius: 60px; text-align: center;
display: inline-block; transition-duration: .8s}
.tab_slide p{font-size: 18px; color: #111; transition-duration: .8s; word-break: keep-all}

.tab_slide .slick-slide{width: max-content !important;}

.tab_slide .slick-slide.slick-current .box{background: #0078FF; border-color: #0078FF}
.tab_slide .slick-slide.slick-current .box p{color: #fff}



.main_product_slide{margin-top: 80px}

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


.main_product_slide .thum{display: block; overflow: hidden; border-radius: 20px;  transition-duration: .8s}
.main_product_slide .thum img{width: 100%}


.main_product_slide .slick-slide{padding: 0 30px; transform: scale(0.8); transition-duration: .8s}

.main_product_slide .slick-slide.slick-current{transform: scale(1);}


.main_product_slide .txt{opacity: 0; visibility: hidden; transition-duration: .8s;
margin-top: 40px;}
.main_product_slide .slick-slide.slick-current .txt{opacity: 1; visibility: visible}


.main_product_slide .txt h3{color: #0E0E0F; font-size: 24px; font-weight: 800; word-break: keep-all}
.main_product_slide .txt p{margin-top: 15px; font-size: 18px; color: #333; line-height: 150%; word-break: keep-all}




.slick-arrow{
	position: absolute; top: 50%; z-index: 2;
	    transform: translateY(calc(-50% - 60px)); font-size: 0; width: 60px; height: 60px; border: 1px solid #ddd; border-radius: 60px;
	    background-position: center; background-repeat: no-repeat; background-size: 8px 14px;
	    background-color: #fff;
}

.slick-arrow.slick-prev{left: 30rem; background-image: url(../img/common/prev.png)}
.slick-arrow.slick-next{right: 30rem; background-image: url(../img/common/next.png)}




.main_vision{
	display: flex;
	gap:45px;
}
.main_vision .box{flex:1}
.main_vision .box .thum{
	border-radius: 10px;
box-shadow: 2px 2px 15px 0 rgba(0, 0, 0, 0.10);
overflow: hidden
}


.main_vision .box .thum img{width: 100%;
height: 100%;
    object-fit: cover;
    transform: scale(1.0); transition-duration: 4s}

.main_vision .box:hover .thum img{transform: scale(1.1);}


.main_vision .box .txt{margin-top: 50px;}

.main_vision .box .txt h3{color: #0E0E0F; font-size: 24px; line-height: 150%; word-break: keep-all; transition-duration: .8s;
background: linear-gradient(94deg, #2B2B2B 35.91%, #D0111B 50.98%, #2D2D2D 65.77%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: background-position 1.5s ease; /* 부드럽게 움직임 */
 background-size: 200% auto;   /* 👈 그라데이션 영역을 크게 잡음 */
background-position: left center; 

}
.main_vision .box .txt p{word-break: keep-all; color: #333; font-size: 18px; line-height: 150%; margin-top: 15px}



.main_vision .box:hover .txt h3{
	background-position: right center; /* 👈 호버 시 오른쪽으로 이동 */
}



.main_news{overflow: hidden}
.news_slide{}
.news_slide .slick-list{overflow: visible; padding: 0 6rem}

.progress {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 10px;
  overflow: hidden;
  
  background-color: #ddd;
  background-image: linear-gradient(to right, #666, #666);
  background-repeat: no-repeat;
  background-size: 0 100%;
  
  transition: background-size .4s ease-in-out;
  margin-top: 80px;
}


.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.news_slide .thum{display: block; border: 1px solid #ddd; border-radius: 10px; overflow: hidden; transition-duration: .8s}
.news_slide .thum img{width: 100%; height: 100%; object-fit: cover;transition-duration: 4s; transform: scale(1.0); 
aspect-ratio: 16 / 10}

.news_slide .txt{margin-top: 25px; display: block}
.news_slide .txt h3{font-size: 18px; color: #222; word-break: keep-all;
display: -webkit-box;
  -webkit-line-clamp: 1;   /* 👈 두 줄까지만 표시 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; 
  transition-duration: .8s}

.news_slide .txt p.date{color: rgba(34, 34, 34, 0.50);

font-size: 16px; margin-top: 10px;}

.news_slide .slick-slide:hover .thum{box-shadow: 2px 2px 15px 0 rgba(0, 0, 0, 0.10);}
.news_slide .slick-slide:hover .thum img{transform: scale(1.1);}
.news_slide .slick-slide:hover .txt h3{color: #009BD6}





.news_slide .slick-slide{padding: 0 15px}