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 5rem;}
.inner2{ padding: 0 25px; max-width: 1280px; margin: 0 auto}

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

/* header */


/* CUSTOM NAVIGATION */





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



.section{overflow: hidden}



.main_full{background: #000}
.fullpage-wrapper .section{transition-duration: 1s; transform: scale(0.9); }

.fullpage-wrapper .section.foot{transform: scale(1);}

.fullpage-wrapper .section.fp-completely{transform: scale(1);}



/* main_banner */

#my-nav{position: fixed; left: 5rem; top: 50%; transform: translateY(-50%);}
#my-nav li{width: 12px; border-radius: 12px; border: 0px solid rgba(255,255,255,0); height: 36px; position: relative}
#my-nav li.active{border: 0px solid rgba(255,255,255,1); }
#my-nav li span{position: absolute; width: 6px; height: 6px; left: 50%; top: 50%; border-radius: 10px; background: #fff; opacity: .4;
transform: translate(-50%, -50%); transition-duration: .8s}
#my-nav li i{display: none}

#my-nav li.active span{opacity: 1; background: #0059FF; width: 12px; height: 12px;}

.main{position: relative; height: 100vh}



.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: left; padding-top: 20vh}
.viusal_txt *{color: #fff}
.viusal_txt h2{font-size: 60px; font-weight: 800; line-height: 1.5}
.viusal_txt p{font-size: 18px; word-break: keep-all; line-height: 150%; margin-top: 20px}

.main_visual_slide_are{overflow: hidden; position: absolute; left: 0; top: 0;
width: 100%; height: 100%}

.main_visual_slide{ height: 100vh; ; overflow: hidden }
.main_visual_slide img{width: 100%; height: 100vh; display: block;
object-fit:cover; transition-duration: 4s;
animation: visual_img 4s 1;}


@keyframes visual_img {
    0% {
        transform: scale(1.1)
    }
    100% {
        transform: scale(1.0)
    }
}


.main_product{background-position: center; background-size: cover; position: relative; overflow: hidden}

.main_product01{
	background-image: url(../img/main_product01.png)
}

.main_product02{
	background-image: url(../img/main_product02.png)
}

.main_product03{
	background-image: url(../img/main_product03.png)
}




.main_product_title{position: relative; z-index: 2; margin-bottom: 60px}
.main_product_title h2{font-size: 60px;font-weight: bold; color: #fff; word-break: keep-all}
.main_product_title p{color: #fff; font-size: 18px; margin-top: 15px; line-height: 140%; word-break: keep-all}


.main_product .main_product_title{margin-bottom: 0}


.common_btn{height: 60px; width: 60px; border: 1px solid #fff; border-radius: 60px; display: inline-flex; align-items: center; transition-duration: .8s; max-width: 60px; overflow: hidden}
.common_btn i{width: 60px; height: 60px; display: flex; justify-content: center;
    align-items: center; transition-duration: .8s}

.common_btn:hover{padding-right: 25px; background: #0059FF; border-color: #0059FF; width: auto; max-width: 300px;}

.common_btn span{color: #fff; font-size: 16px; word-break: keep-all; transition-duration: 2s; overflow: hidden; width: 0; max-width: 0; opacity: 0;
visibility: hidden; white-space: nowrap;}
.common_btn:hover span{width: auto; max-width: 150px; opacity: 1; visibility: visible}
.common_btn:hover i{transform: rotate(-45deg)}
.main_product_title .common_btn{margin-top: 50px}



.roof_text_are{position: absolute; left: 0; width: 100%; top: 15vh}
.roof_text h2{
	-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: rgba(255, 255, 255, 1);
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 rgba(255,255,255,0.10);
  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}











.scrolldown {
    position: absolute;
    bottom: 60px;
    left: 5rem;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.scrolldown p{color: #fff; font-size: 12px;}
.scrolldown i{width: 50px; height: 50px; border: 1px solid #fff; border-radius: 50px; position: relative}
.scrolldown i span{position: absolute; left: 50%; width: 4px; height: 4px; background: #fff; top: 50%; animation: move-box 2s infinite;
transform: translateX(-50%); border-radius: 4px}


@keyframes move-box {
    0% {
        top: 30%
    }
    100% {
        top: 60%
    }
}



.main_business{
	background-image: url(../img/main_business.png);
	background-position: center; background-size: cover; position: relative; overflow: hidden;
	padding-top: 100px
}





.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 170px;
  height: 170px;
  color: #fff;
  display: none; /* 기본적으로 숨김 */
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border-radius: 180px;
  pointer-events: none;
  transform: translate(-100%, -100%);
 
 
 border-radius: 500px;
border: 2.5px solid #0059FF;
background: linear-gradient(159deg, rgba(31, 59, 96, 0.40) 3.01%, rgba(18, 43, 69, 0.00) 103.3%);
backdrop-filter: blur(10px);

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



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


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






.main_product_slide .thum{border-radius: 20px; display: block; overflow: hidden; position: relative}
.main_product_slide .thum img.thum_img{width: 100%;
height: 100%;
    object-fit: cover;
    aspect-ratio: 16 / 10; ; transition-duration: .8s}



.main_product_slide .thum .in_txt{position: absolute; left: 0; top: 0; width: 100%; height: 100%;
background: rgba(0, 89, 255, 0.50);
text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; transition-duration: .8s; opacity: 0; visibility: hidden}

.main_product_slide .thum .in_txt i{width: 80px; height: 80px; border-radius: 80px; display: flex;
justify-content: center;
    align-items: center; background: #fff; margin-top: 35px;}

.main_product_slide h3{font-size: 24px; color: #fff; word-break: keep-all}
.main_product_slide p{font-size: 18px; color: #fff; margin-top: 10px;}


.main_product_slide .txt{margin-top: 20px; transition-duration: .8s; opacity: 1}
.main_product_slide .txt p{opacity: .6}

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

.main_product_slide .slick-slide{padding: 40px 20px 0 20px; transition-duration: .8s}
.main_product_slide .slick-slide:hover{padding: 0 20px}

.main_product_slide .slick-slide:hover .thum .in_txt{opacity: 1; visibility: visible}
.main_product_slide .slick-slide:hover .txt{opacity: 0}




.main_business .main_product_title{margin-bottom: 20px}





.main_board{
	background-image: url(../img/main_board.png);
	background-position: center; background-size: cover; position: relative; overflow: hidden;
	padding-top: 100px
}



.main_board .main_product_title{position: relative}
.main_board .main_product_title .common_btn{position: absolute; right: 0; bottom: 0}


.main_board_list{display: flex; gap:40px}
.main_board_list li{width: calc(25% - 30px)}
.main_board_list li .thum{display: block; overflow: hidden; border-radius: 10px; position: relative}
.main_board_list li .thum img{width: 100%}




.main_board_list li .thum .in_txt{position: absolute; left: 0; top: 0; width: 100%; height: 100%;
background: rgba(0, 89, 255, 0.50);
text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; transition-duration: .8s; opacity: 0; visibility: hidden}
.main_board_list li .thum .in_txt i{width: 80px; height: 80px; border-radius: 80px; display: flex;
justify-content: center;
    align-items: center; background: #fff; }

.main_board_list li .thum .in_txt i img{width: auto}

.main_board_list li:hover .thum .in_txt{opacity: 1; visibility: visible}

.main_board_list li .txt{display: block; margin-top: 30px;}
.main_board_list li .txt h3{color: #fff; font-size: 20px; font-weight: bold;
display: -webkit-box;
  -webkit-line-clamp: 1; /* 줄 수를 2줄로 제한 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; transition-duration: .8s}
.main_board_list li .txt p{display: block;
display: -webkit-box;
  -webkit-line-clamp: 2; /* 줄 수를 2줄로 제한 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; font-size: 18px;word-break: keep-all; line-height: 140%; color: #fff; opacity: .6 ; margin-top: 15px;}

.main_board_list li:hover .txt h3{color: #0059FF}




/* foot */

.footer{
	padding: 30px 0; background: #222
}

.footer .txt{margin:0 0 30px 0; }
.footer .txt ul{display: flex; gap:40px;     flex-wrap: wrap;}
.footer .txt li{display: flex; gap:20px}
.footer .txt li h4{width: 80px; font-size: 14px; color: #fff;}
.footer .txt li p{display: flex; gap: 20px; font-size: 14px; color: #fff; opacity: .8; word-break: keep-all;
    align-items: center;}



.footer .txt li i{
	width: 1px;
height: 10px;
background: #AAA;
}

.foot_copy{padding: 30px 0 0 0; border-top: 1px solid #313131}
.foot_copy p{font-size: 14px; color: #fff; opacity: .4; word-break: keep-all; font-weight: 300}

.foot_btn{position: fixed; right: 3rem; bottom: 3rem; background: #0059FF; border-radius: 60px; height: 60px;
display: flex;
justify-content: center;
    align-items: center; z-index: 8; width: 60px }



/* 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: 5rem; top: 32px; width: 197px; height: 37px; background: url(../img/logow.png); background-size: 100% auto; background-repeat: no-repeat}
.header .nav_btn{position: relative; border-radius: 60px; border: 1px solid rgba(255,255,255,0.3); display: flex;
width: 60px; height: 60px;justify-content: center;
    align-items: center;}
    
.header .nav_btn i{width: 16px; height: 14px; position: relative; display: inline-block}    
    
.header .nav_btn span{width: 100%; height: 2px; background: #fff; position: absolute; left: 0; top: 0; transition-duration: .5s}
.header .nav_btn span:nth-child(2){top: 50%; margin-top: -1px}
.header .nav_btn span:nth-child(3){top: auto; bottom: 0}

.header .top_right{position: absolute; right: 5rem; display: flex; gap:20px; top: 25px}

.header .lang_top{position: relative;
width: 60px; height: 60px; border-radius: 60px; border: 1px solid rgba(255,255,255,0.3);
justify-content: center;
    align-items: center; display: flex}
.header .lang_top a{width: 20px; height: 20px; display: inline-block; background: url(../img/lang.png);
background-position: center; background-repeat: no-repeat; background-size: 100%; auto}

.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: #0059FF;  }

.top_nav li .deps_nav{position: absolute; top: 100%; background: #fff; 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_nav li .deps_nav a{font-size: 16px; color: #222; transition-duration: .5s; display: block; padding: 10px 0; font-weight: 600}
.top_nav li .deps_nav a:hover{color: #0059FF;  }
.top_nav li .deps_nav a + a{margin-top: 0px; border-top: 1px solid #efefef}

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


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

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


.sub .header .lang_top{border-color: #ddd}


.sub .header .lang_top a{background-image: url(../img/langb.png)}

.open_all .header .nav_btn span{background: #fff}
.open_all .header .lang_top a{background-image: url(../img/lang.png)}

.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 .nav_btn span{background-color: #222}

.header.drop .nav_btn{border-color: #ddd}
.header.drop .lang_top{border-color: #ddd}


.header.drop .lang_top a{background-image: url(../img/langb.png)}


.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: flex-start; padding: 0 10rem
    }




.nav_full{display: flex; gap:50px; justify-content: center;
    align-items: flex-start; flex-direction: column;}
    
.nav_full li{display: flex; gap:100px; align-items: center}    
   

    
.nav_full a.deps_big{font-size: 50px; color: #fff; font-weight: bold; display: block; width: 220px; transition-duration: .8s}
.nav_full.eng a.deps_big{width: auto}
.nav_full li:hover a.deps_big{color: #0059FF}

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


.nav_full .deps_nav a:hover{opacity: 1}

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




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

.open_all .header .nav_btn span:nth-child(1){top: 50%;
        transform: translateY(-50%) rotate(45deg);}
.open_all .header .nav_btn span:nth-child(2){opacity: 0}
.open_all .header .nav_btn span:nth-child(3){bottom: 50%;
        transform: translateY(50%) rotate(-45deg);}

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






















/*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}