html {
  scroll-behavior: smooth;
}


.f10{font-size: 10px}
.f11{font-size: 11px}
.f12{font-size: 12px}
.f13{font-size: 13px}
.f14{font-size: 14px}
.f15{font-size: 15px}
.f16{font-size: 16px}
.f17{font-size: 17px}
.f18{font-size: 18px}
.f19{font-size: 19px}
.f20{font-size: 20px}
.f21{font-size: 21px}
.f22{font-size: 22px}
.f23{font-size: 23px}
.f24{font-size: 24px}
.f25{font-size: 25px}
.f26{font-size: 26px}
.f27{font-size: 27px}
.f28{font-size: 28px}
.f29{font-size: 29px}
.f30{font-size: 30px}
.f35{font-size: 35px}
.f40{font-size: 40px}
.f45{font-size: 45px}

.emt10{height: 10px}
.emt20{height: 20px}
.emt30{height: 30px}
.emt40{height: 40px}
.emt50{height: 50px}
.emt60{height: 60px}
.emt70{height: 70px}
.emt80{height: 80px}
.emt90{height: 90px}
.emt100{height: 100px}
.emt110{height: 110px}
.emt120{height: 120px}
.emt130{height: 130px}
.emt140{height: 140px}
.emt150{height: 150px}


.inner{ padding: 0 8rem;}
.inner2{ padding: 0 10rem;}

#fullpage {
  width:100%;
  height:100%;
}

/* header */


/* CUSTOM NAVIGATION */





.fp-viewing-foot > #my-nav{display: none}
.fp-watermark{display: none}



.section{overflow: hidden}





/* main_banner */




.main .video_are{position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1}
.main .video_are video,
.main .video_are img{width: 100%; height: 100%; object-fit: cover;}

.viusal_txt{position: relative; z-index: 2; text-align: center; }
.viusal_txt *{color: #fff}
.viusal_txt h2{font-size: 70px; font-weight: 800; line-height: 1.5}
.viusal_txt p{font-size: 18px; word-break: keep-all; line-height: 150%; margin-top: 20px}





.main_vision{ position: relative; overflow: hidden; padding-top: 100px}

.main_vision .bottom_txt{position: absolute; right: 8rem; bottom: 0; z-index: -1}
.main_vision .bottom_txt h2{color: #f2f2f2; font-size: 200px; font-weight: bold; text-align: right; word-break: keep-all;
line-height: 1;}

.main_vision_flex{display: flex;
    align-items: center;
    justify-content: center; gap:6rem}
.main_product_mid{width: 780px;}

.main_vision_flex .title{flex:1}

.main_vision_flex .title h2{
	word-break: keep-all; font-size: 60px; font-weight: 800; line-height: 140%;
	background: linear-gradient(117deg, #00539E 35.25%, #009EDD 71.31%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.main_vision_flex .main_product_right{flex:1}

.main_product_mid_slide .slick-slide{border-radius: 500px; overflow: hidden}
.main_product_right_slide h2{
	color: rgba(17, 17, 17, 0.30);
	font-size: 48px; 
	font-weight: 600;
	word-break: keep-all;
	transition-duration: .8s
}

.main_vision.eng .main_vision_flex{flex-wrap: wrap; gap:3rem 6rem}
.main_vision.eng .main_vision_flex .title{flex:none; width: 100%; display: flex; flex-wrap: wrap; gap:15px}
.main_vision.eng .main_vision_flex .main_product_right{width: 50%}


.main_product_right_slide h2 b{transition-duration: .8s; font-weight: 700}

.main_product_right_slide .slick-slide{cursor:pointer}
.main_product_right_slide .slick-slide.slick-current h2,
.main_product_right_slide h2:hover{color: #111; font-weight: 700}
.main_product_right_slide .slick-slide.slick-current h2 b,
.main_product_right_slide h2:hover b{color: #00539E}


.main_product_right_slide .slick-track{transform: none !important}


.main_slide_control {
  position: relative;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 0 200px
}

.progress-bar {
  width: 100%;
  height: 2px;
  background: #D9D9D9;
  overflow: hidden;
  position: relative;
  flex:1
}
.progress-bar span {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: #111;
  transition: width 0.3s;
}
.arrow_btn{
	 display: flex;
  align-items: center;
  justify-content: center;
  gap:10px
}
.arrow_btn button {
  background: none;
  border: none;
  cursor: pointer;
}







.roof_text_are{position: absolute; left: 0; width: 100%; top: 0px; z-index: -1}
.roof_text h2{
	-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #CDCDCD;
font-size: 150px;
font-style: normal;
font-weight: 800;
line-height: normal;
white-space: nowrap;


 /* 채움 완전 제거 */
  color: transparent;
  -webkit-text-fill-color: transparent;
  
  
   /* 스트로크 */
  -webkit-text-stroke: 1px #CDCDCD;
  paint-order: stroke fill;              /* 스트로크를 먼저 칠함 */


  /* 렌더링 안정화 */
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
  isolation: isolate; 
text-transform: uppercase
}


.roof_text { overflow: hidden; }
.roof_text h2 {
  display: inline-block;
  padding: 0 2rem;
  white-space: nowrap;
}

.roof_text .slick-track{display: flex !important}





.main_product{
	background: url(../img/main/main_product.png);
	background-size: cover;
	padding-top: 100px
}

.main_product .inner2{position: relative}


.main_product_flex{display: flex; gap:8rem; align-items: center;}

.main_product.eng .main_product_flex{
	align-items: flex-start;
}


.tab_content{position: relative;}


.main_product_flex .thum{width:650px; overflow: hidden;
    border-radius: 650px;}
.main_product_flex .thum img{display: block; max-width: 100%;     width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1;}
.main_product_flex .txt{flex:1;padding-bottom: 150px}



.main_product_flex .txt h2{
	background:linear-gradient(117deg, #00539E 35.25%, #009EDD 71.31%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 60px; font-weight: 800; line-height: 140%
}

.main_product_flex .txt h2 img{max-height:3.5rem}

.main_product.eng .main_product_flex .txt{}
.main_product.eng .main_product_flex .txt h2{font-size: 50px}

.main_product_title h2{
	background:linear-gradient(117deg, #00539E 35.25%, #009EDD 71.31%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 60px; font-weight: 800; line-height: 140%
}

.main_product_title .right img{max-width: 180px; margin-bottom: 10px;
margin-left: auto;
    margin-right: 0;
    display: block;}

.main_product_title h2 span{color: #111;
-webkit-text-fill-color: #111;}

.main_product_title p{font-size: 18px; line-height: 140%; word-break: keep-all; color: #666}

.main_product_flex .txt p{font-size: 18px; margin-top: 20px; line-height: 140%; word-break: keep-all}
.main_product_flex .txt a.more_view{margin-top: 40px;}
a.more_view,
button.more_view{padding: 12px 30px; border-radius: 50px;
background: #00539E; display: inline-block; font-weight: 600; color: #fff; word-break: keep-all; font-size: 16px;
border: 0}

.main_product .tab {
  display: flex;
  gap:20px 10px;
  flex-wrap: wrap;
  position: absolute; left: calc(650px + 8rem);
  bottom: 0;
  width: calc(100% - 650px - 8rem);
  bottom: 100px;
}

.main_product.eng .tab{bottom: 0}

.main_product .tab__item {

}

.main_product .tab__item a{padding: 8px; display: block; font-size: 17px; 
color: #9F9F9F; line-height: 150%; word-break: keep-all; transition-duration: .8s;
border-bottom: 2px solid #9F9F9F; font-weight: 600}

.main_product.eng .tab__item a{font-size: 16px; padding: 6px}


.main_product .tab__item.active a{
 color: #009EDD; border-color: #009EDD
}


.main_product .tab__content-wrapper {

}
.main_product .tab__content {
  display: none;
}
.main_product .tab__content.active {
  display: block;
}


.main_board{}

.main_board .main_product_title {
	margin-top:150px;
	position: relative;
	margin-bottom: 50px
}

.main_board .main_product_title a.more_view{position: absolute; right: 0; bottom: 0}

.main_board_list{display: flex; gap:20px; margin-bottom: 150px}
.main_board_list li{flex:1}
.main_board_list li a{display: block; padding: 40px 30px; background: #fff; border-radius: 10px; border: 1px solid #DDD; transition-duration: .8s}

.main_board_list li a h3{font-size: 20px; color: #111; font-weight: 700; word-break: keep-all;
display: -webkit-box;
  -webkit-line-clamp: 1; /* 줄 수를 2줄로 제한 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; ; transition-duration: .8s}
.main_board_list li a p{margin-top: 15px;
word-break: keep-all;
display: -webkit-box;
  -webkit-line-clamp: 1; /* 줄 수를 2줄로 제한 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; font-size: 17px; line-height: 140%; color: #111; transition-duration: .8s}
.main_board_list li a p.date{ margin-top: 80px; opacity: .5; font-size: 16px; transition-duration: .8s}

.main_board_list li a:hover{
	background: #00539E;
	border-color: #00539E
}

.main_board_list li a:hover h3,
.main_board_list li a:hover p{color: #fff}


.main_count{padding-top: 120px; justify-content: flex-end;}
.main_count .main_product_title{display: flex;
    justify-content: space-between;
    align-items: flex-end;}
    
    
.count_flex{display: flex; gap:30px; margin-top: 50px}    
.count_flex li{
	border-radius: 10px;
border: 1px solid #DDD;
background: #FAFAFA;
padding: 20px 30px;
flex:1
}

.count_flex li .top{display: flex;     align-items: center;
    justify-content: space-between;}
.count_flex li .top p{font-size: 20px; font-weight: 500; color: #111; word-break: keep-all}
.count_flex li .bottom{margin-top: 12px; padding-top: 20px; border-top: 1px solid #ddd}
.count_flex li .bottom h2{color: #00539E;
font-size: 48px;
font-weight: 700;
line-height: normal; word-break: keep-all}


.count_img{margin-top: 50px; height: 36vh; overflow: hidden}
.count_img img{display: block; width: 100%; height: 100%; object-fit: cover;}

/* foot */

.footer{
	padding: 150px 0; background: url(../img/common/footer.png);
	background-position: center; background-size: cover
}

.footer .inner{display: flex; justify-content: space-between;}

.footer .left{max-width: 580px}
.footer .right{max-width: 700px;}

.footer .left .contact_title{display: flex;
    align-items: center;
    gap: 30px; flex-wrap: wrap;}
.footer .left .contact_title h3{font-size: 40px; word-break: keep-all; color: #fff; line-height: 140%}
.foot_map{margin-top: 30px; border-radius: 10px; overflow: hidden}
.foot_map iframe{width: 100%; display: block}


.foot_link{display: flex; gap:40px 80px; flex-wrap: wrap;}
.foot_link a{display: flex; color: #fff; font-size: 40px; word-break: keep-all; font-weight: 800; line-height: 140%;
    align-items: center;}



.footer .right .txt{margin-top: 80px}
.footer .right .txt h4,
.footer .right .txt a{color: #fff; font-size: 18px; word-break: keep-all}
.footer .right .txt ul{margin-top: 15px;}
.footer .right .txt li{display: flex; gap:15px; flex-wrap: wrap; align-items: center;}
.footer .right .txt li p{font-size: 16px; color: #fff; opacity: .6; word-break: keep-all; line-height: 140%}
.footer .right .txt li i{width: 1px; height: 14px; background: #fff; opacity: .6}

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

/* header */


.header{position: fixed; left: 0; top: 0; width: 100%; 
height: 100px; z-index: 9999;  transition-duration: .5s}
.header .inner{position: relative}
.header .logo{position: absolute; left: 8rem; top: 25px; width: 143px; height: 54px;
 background: url(../img/logow.png); background-size: 100% auto; background-repeat: no-repeat}
.header .nav_btn{position: relative;  display: flex;justify-content: center;
    align-items: center;}
    
.header .nav_btn i{width: 30px; height: 30px; 
background: url(../img/common/nav_btn.png); background-position: center; background-repeat: no-repeat;
background-size: 100% auto}    
    


.header .top_right{position: absolute; right: 8rem; display: flex; gap:40px; top: 32px}

.header .lang_top{position: relative;
justify-content: center;
    align-items: center; display: flex; gap: 15px}
.header .lang_top a{padding-bottom: 2px; border-bottom: 1px solid transparent; font-size: 16px; color: #fff; opacity: .5; transition-duration: .8s}
.header .lang_top a:hover,
.header .lang_top a.on{opacity: 1; border-color: #fff}

.top_nav{display: flex; align-items: flex-start;
    justify-content: center; gap:0px;}
    
.top_nav li{height: 100px; display: flex; text-align: center; justify-content: center;
    align-items: center; position: relative; min-width: 180px}    
.top_nav li a.deps_big{color: #fff; font-size: 18px; transition-duration: .8s; font-weight: 600}
.top_nav li:hover a.deps_big{color: #00539E;  }

.top_nav li .deps_nav{position: absolute; top: 100%; background: rgba(255, 255, 255, 0.80);
box-shadow: 2px 2px 15px 0 rgba(0, 0, 0, 0.15);
backdrop-filter: blur(5px); padding:0 15px; width: max-content;
    min-width: 180px; height: 0; max-height: 0; visibility: hidden; 
    overflow: hidden; transition-duration: .5s; border-radius: 5px; top: calc(100% - 20px)}
    
.top_nav li .deps_nav a{font-size: 16px; color: #222; transition-duration: .5s; display: block; padding: 10px 0}
.top_nav li .deps_nav a:hover{color: #00539E;  }
.top_nav li .deps_nav a + a{margin-top: 0px; border-top: 1px solid #ddd}

.top_nav li:hover .deps_nav{height: auto; max-height: 500px; visibility: visible; padding: 10px 15px; box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.10);
 transition-duration: .8s; }













.all_nav{position: fixed; left: 0; top:-100%; width: 100%; height: 100%; z-index: 9996; background: rgba(0,0,0,0.8); 
display: flex; align-items: center; transition-duration: .5s; opacity: 0;
justify-content: center; padding: 0 8rem;
backdrop-filter: blur(10px)
    }




.nav_full{display: flex; gap:16rem; justify-content: center;
    align-items: flex-start; }
    
.nav_full li{display: flex; gap:40px; align-items: flex-start; flex-direction: column; text-align: left}    
   

    
.nav_full a.deps_big{font-size: 35px; color: #fff; font-weight: bold; display: block; transition-duration: .8s}

.nav_full li:hover a.deps_big{color: #009EDD}

.nav_full .deps_nav{display: flex; gap:25px; align-items: flex-start; flex:1; flex-direction: column;}
.nav_full .deps_nav a{font-size: 18px; color: #fff; line-height: 1.5; 
word-break: keep-all; display: block; transition-duration: .5s; opacity: .8 }


.nav_full .deps_nav a:hover{opacity: 1; color: #009EDD;}

.mo_open{display: none}
.mo_nav_are{display: none}




.open_all .all_nav{top: 0; opacity: 1}
.open_all .top_nav{visibility: hidden}





.fp-viewing-count .header{background: rgba(255,255,255,0.2);     backdrop-filter: blur(3px);}
.fp-viewing-count .header .logo{background-image: url(../img/logob.png);}
.fp-viewing-count .header .top_nav li a{color: #222}
.fp-viewing-count .header .lang_top a{color: #222}
.fp-viewing-count .header .lang_top a.on,
.fp-viewing-count .header .lang_top a:hover{border-color: #222;}
.fp-viewing-count .header .nav_btn i{background-image: url(../img/common/nav_btnb.png); }


.fp-viewing-product .header{    backdrop-filter: blur(10px);}
.fp-viewing-product .header .logo{background-image: url(../img/logob.png);}
.fp-viewing-product .header .top_nav li a{color: #222}
.fp-viewing-product .header .lang_top a{color: #222}
.fp-viewing-product .header .lang_top a.on,
.fp-viewing-product .header .lang_top a:hover{border-color: #222;}
.fp-viewing-product .header .nav_btn i{background-image: url(../img/common/nav_btnb.png); }

.fp-viewing-news .header{background: rgba(255,255,255,0.2);     backdrop-filter: blur(3px);}
.fp-viewing-news .header .logo{background-image: url(../img/logob.png);}
.fp-viewing-news .header .top_nav li a{color: #222}
.fp-viewing-news .header .lang_top a{color: #222}
.fp-viewing-news .header .lang_top a.on,
.fp-viewing-news .header .lang_top a:hover{border-color: #222;}
.fp-viewing-news .header .nav_btn i{background-image: url(../img/common/nav_btnb.png); }

.fp-viewing-foot .header{display: none}


.sub .top_nav li a.deps_big{color: #222}

.sub .header .nav_btn span{background: #222}
.sub .header .nav_btn{border-color: #ddd}





.header.drop{background: #fff; border-bottom: 1px solid rgba(0,0,0,.05)}
.header.drop .logo{background-image: url(../img/logob.png);}
.header.drop .top_nav li a{color: #222}

.header.drop .lang_top a{color: #222}
.header.drop .lang_top a.on,
.header.drop .lang_top a:hover{border-color: #222;}
.header.drop .nav_btn i{background-image: url(../img/common/nav_btnb.png); }



.open_all .header{background: transparent; border-bottom: 0}
.open_all .header .logo{background-image: url(../img/logow.png) !important;}

.open_all .header .top_nav li a{color: #fff}
.open_all .header .lang_top a{color: #fff}
.open_all .header .lang_top a.on,
.open_all .header .lang_top a:hover{border-color: #fff;}
.open_all .header .nav_btn i{background-image: url(../img/common/nav_btn.png); }





















/*pop*/

.agree_pop{display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999; 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: 25px; 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}










.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 180px;
  height: 180px;
  background:rgba(255, 255, 255, 0.20);
  color: #fff;
  display: none; /* 기본적으로 숨김 */
  align-items: center;
  justify-content: center;
  font-size: 18px;
  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;
}



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


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




.floation_top{
   border-radius: 80px;
   background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
   /* 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: 0.4s;
   border: 1px solid rgba(255,255,255,0.2)
}

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









.img_modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
}

.img_modal.on {
  display: block;
}

.img_modal_bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

.img_modal_box {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 90%;
  max-width: 1000px;
  height: 85vh;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 40px;
  border-radius: 12px;
  box-sizing: border-box;
}

.img_modal_swiper {
  width: 100%;
  height: 100%;
}

.img_modal_swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.img_modal_swiper .swiper-slide img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.img_modal_close {
  position: absolute;
  right: -15px;
  top: -15px;
  z-index: 10;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: #111;
  color: #fff;
  font-size: 28px;
  line-height: 40px;
  cursor: pointer;
}

.img_modal_swiper .swiper-button-prev,
.img_modal_swiper .swiper-button-next {
  color: #111;
}

.img_modal_swiper .swiper-pagination {
  bottom: 5px;
}