@charset "utf-8";



.inner{padding: 0 8rem}


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



/*head*/


.header{display: flex; position: absolute; left: 50%; top: 30px;;
border-radius: 10px;
background: rgba(255, 255, 255, 0.10); width: 100%;
transform: translateX(-50%); max-width: 1770px; padding: 20px 40px;
    justify-content: space-between; align-items: center; z-index: 9998}

.header .left{display: flex; gap:80px;    align-items: center}

.header .left .nav{display: flex; gap:60px}
.header .left .nav li a{font-size: 18px; color: #fff; font-weight: 500; transition-duration: .5s}
.header .left .nav li a:hover{color: #1B97D3}
.header .left .nav .sub_deps{position: absolute; left: 0; 
left: 50%; top: calc(100% + 10px);
border-radius: 10px;
background: rgba(255, 255, 255, 0.10); width: 100%;
transform: translateX(-50%); max-width: 1770px; padding: 20px 230px; opacity: 0; transition-duration: .5s;
gap:60px; display: flex;  align-items: center; z-index: 2; visibility: hidden}

.header .left .nav .sub_deps a{font-size: 16px; color: #fff; opacity: .5; font-weight: 400; transition-duration: .5s}
.header .left .nav .sub_deps a:hover{opacity: 1; color: #1B97D3}

.header .left .nav li.on .sub_deps{opacity: 1; visibility: visible}

.logo{width: 110px; height: 48px; background: url(../img/logo.png); background-position: center; background-repeat: no-repeat;
background-size: 110px auto;
}



.header .right{display: flex; gap:30px;align-items: center;
justify-content: flex-end; }


.header .right .lang{position: relative}
.header .right .lang p{
	border-radius: 10px;
border: 1px solid #CDCDCD;padding: 10px 15px; 
font-size: 16px; color: #fff; padding-right: 40px;
position: relative;
cursor: pointer
}


.header .right .lang p img{position: absolute; right: 15px; top: 50%; transform: translateY(-50%);}


.header .right .lang .lang_list{ padding: 0 15px; background: #fff; position: absolute; left: 0; 
top: calc(100% + 5px); border-radius: 5px; text-align: center; width: 100%; opacity: 0; visibility: hidden; transition-duration: .5s}
.header .right .lang .lang_list.on{padding: 15px; opacity: 1; visibility: visible}

.header .right .lang .lang_list a{display: block; color: #222; font-size: 16px;}
.header .right .lang .lang_list a + a{margin-top: 10px}



.sitemap{position: fixed; left: 0; top: 0; width: 100%; height: 100%;
background: rgba(27, 27, 27, 0.70);
backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center; opacity: 0; visibility: hidden; transition-duration: .5s; z-index: 9999}

.all_menu .sitemap{opacity: 1; visibility: visible}

.sitemap .all_btn {
    position: absolute;
    right: 5rem;
    top: 5em;
}


.sitemap .nav{display: flex; gap:10rem}
.sitemap .nav li a{font-size: 35px; color: #fff; font-weight: bold}
.sitemap .nav li .sub_deps{margin-top: 40px}
.sitemap .nav li .sub_deps a{display: block; font-size: 18px; color: #fff;  transition-duration: .5s; font-weight: 500}
.sitemap .nav li .sub_deps a:hover{color: #1B97D3}
.sitemap .nav li .sub_deps a + a{margin-top: 25px}



/*foot*/

.footer{background: #EFF3F7}
.footer .foot_top{padding: 30px 0; border-bottom: 1px solid #ddd}
.footer .foot_info{padding: 30px 0}
.footer .foot_info .inner{display: flex;
    justify-content: space-between;
    align-items: flex-end;}
.footer .foot_info p.copy{
	color: #B2B2B2;
text-align: right;
font-size: 16px;
font-weight: 400;
}

.footer .foot_info li{display: flex; font-size: 16px; color: #222; word-break: keep-all; line-height: 140%; gap:10px;
align-items: center;}
.footer .foot_info li + li{margin-top: 10px;}
.footer .foot_info li b{

	background:linear-gradient(180deg, #58B2F2 0%, #7548E6 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold
}

.footer .foot_info li i{width: 1px; height: 10px; background: #ddd}


.floating{position: fixed; z-index: 9992; right: 50px; bottom: 50px;}
.floating a{position: relative; width: 120px; height: 120px; border-radius: 155px; display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; gap:10px; background: #4E4E4E }
    
.floating a + a{margin-top: 15px}    
    
.floating a span{font-size: 14px; color: #fff; font-weight: bold}
.floating a.contact_foot{ background: #1B97D3}
.floating a.contact_foot .contact_foot_ani{position: absolute; max-width: 100px;
left: 10px; top: 10px; animation: spin 10s linear infinite;}



@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}




.floating .btn_top{ opacity: 0; visibility: hidden; transition-duration: .5s;
pointer-events: none;
 height: 0;
  overflow: hidden;}


.floating .btn_top.show {
  opacity: 1;
  pointer-events: auto;
  visibility: visible; 
 height: 120px;
}


/*Main*/

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

.main_visual .item{position: relative; height: 100vh}
.main_visual .item .main_video{position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.main_visual .item .main_video video{width: 100%; height: 100%;object-fit:cover}
.main_visual .item .txt{position: absolute; z-index: 2; padding:  0 8rem; left: 0; top: 0; width: 100%; height: 100%;
display: flex;
    justify-content: flex-start;
    align-items: center;}
.main_visual .item .txt h2{font-size: 80px; line-height: 150%; color: #fff; font-weight: 800}

.main_visual_cont{display: flex; position: absolute; padding: 0 8rem; z-index: 3; left: 0; top: 70%; width: 100%;
gap:15px;
justify-content: flex-start;
    align-items: center;
}



.custom-prev,
.custom-next {
  background: transparent;
  border: none;
  cursor: pointer;
}


.custom-dots {
  display: flex;
  gap: 10px;
  z-index: 10;
}
.custom-dots .slick-dots{
	display: flex;
  gap: 10px;
}
.custom-dots .slick-dots li {
  width: 16px;
  height: 16px;
  border-radius: 50%;

  cursor: pointer;
  transition-duration: .5s;
  position: relative;
  background-color: transparent;
}

.custom-dots .slick-dots li::before {
   content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1; /* Place the pseudo-element behind the main content */
  border: 3px solid transparent;
  background: linear-gradient(180deg, #fff 0%, #fff 100%) border-box;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  border-radius: 14px;
  transition-duration: .5s;
  opacity: .4
}

.custom-dots .slick-dots li.slick-active {
  
}

.custom-dots .slick-dots li.slick-active:before{
	background: linear-gradient(180deg, #58B2F2 0%, #7548E6 100%) border-box;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: exclude; opacity: 1
}

.slick-progress {
  position: relative;
  width: 100px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
  border-radius: 2px;
  z-index: 10;
}

.slick-progress .bar {
  width: 0%;
  height: 100%;
  background: #6A5AFF;
  transition: none;
}


.main_title{}
.main_title h2{color: #1B1B1B; font-size: 60px; line-height: 150%; word-break: keep-all}
.main_title p{font-size: 18px; margin-top: 30px; word-break: keep-all; color: #4e4e4e; line-height: 150%}


.main_value{padding: 150px 0;
background: url(../img/sub/main_value_bg.png); background-position: center; background-size: cover}
.main_value .inner{display: flex;     align-items: flex-start;
    justify-content: flex-start; flex-direction: column; gap:80px}

.main_value .main_title{width: 100%;
    position: relative;
    top: 0px;
    left: 0;}

.main_value_flex{width: 100%; display: flex; gap:60px;
flex-wrap: wrap;     justify-content: flex-start;
    align-items: flex-start;}
.main_value_flex .box{position: relative; border-radius: 10px; width: calc(33.33% - 39.99px); overflow: hidden}
.main_value_flex .box .bg{}
.main_value_flex .box .bg img{width: 100%; height: 100%;
object-fit: cover;}

.main_value_flex .box .txt{position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 50px; z-index: 2;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    flex-direction: column;}
.main_value_flex .box .txt .title{color: #fff; font-size: 28px; word-break: keep-all; line-height: 150%; font-weight: bold; display: block}
.main_value_flex .box .txt .sub{color: #fff; font-size: 18px; margin-top: 15px; word-break: keep-all; line-height: 150%}



.main_product_are{margin-top: -10em; position: relative; min-height: 701px}

.main_product{text-align: center; padding: 150px 0; overflow: hidden}
.main_product .main_product_title h2{font-size: 250px; color: #F8F8F8; font-weight: 800}

.main_product_slide{}
.main_product_slide .box{text-align: center; filter: blur(10px); transition-duration: .5s}
.main_product_slide .box h2{font-size: 75px; font-weight: 800; color: #7247DE; 
transition-duration: .5s; opacity: 0; height: 0; max-height: 0}
.main_product_slide .box img{margin: 20px auto 0}

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

.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 img{margin-top: 80px}

.main_product_btn{}
.main_product_btn span{position: absolute; top: 50%; left: 30rem; z-index: 2; width: 100px; height: 100px;
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: 30rem}

.main_app{padding: 150px 0; overflow: hidden; }
.main_app_slide{overflow: hidden; margin-top: 60px}


.main_app_slide .slick-list{overflow: visible; padding: 0 8rem}

.main_app_slide .slick-slide{padding: 0 20px}

.main_app_slide .thum{display: block; border-radius: 10px; overflow: hidden}
.main_app_slide .thum img{width: 100%; height: 100%;
object-fit: cover; aspect-ratio: 16 / 12}

.main_app_slide .txt{font-size: 18px; display: block; margin-top: 25px; color: #1b1b1b}

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

  user-select: none;
  z-index: 9999;
  gap:20px; display: flex;
  backdrop-filter: blur(5px);
}


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


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


.progress_bar {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  overflow: hidden;
  
  background-color: #E5E5EC;
  background-image: linear-gradient(180deg, #58B2F2 0%, #7548E6 100%);;
  background-repeat: no-repeat;
  background-size: 0 100%;
  
  transition: background-size .4s ease-in-out;
  margin-top: 60px;
}

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


.main_contact{padding: 150px 0; text-align: center; background: url(../img/main/main_contact.png);
background-position: center; background-size: cover}

.main_contact .main_title{}
.main_contact .main_title h2{color: #fff}
.main_contact .main_title p{color: #fff}
.main_contact .go_btn{margin-top: 50px}

.go_btn{display: flex; color: #fff; font-size: 20px;
    justify-content: center;
    align-items: center;transition-duration: .5s; gap:10px}
.go_btn i{width: 60px; height: 60px; border-radius: 60px; border: 1px solid #ddd;
display: flex; justify-content: center;
    align-items: center; transition-duration: .5s}


.go_btn:hover i{background: #1B97D3; border-color: #1B97D3;}


.main_partner{padding: 150px 0;  background: url(../img/main/main_partner.png);
background-position: right top; background-repeat: no-repeat }


.main_partner_flex{margin-top: 60px; display: flex; gap:30px;     flex-wrap: wrap}
.main_partner_flex li{border: 1px solid #ddd; border-radius: 10px; overflow: hidden;
width: calc(20% - 24px)}
.main_partner_flex li img{width: 100%;}