html {
  scroll-behavior: smooth;
}

.inner{max-width: 1640px; margin: 0 auto;}



.header{position: fixed; left: 0; top: 0; width: 100%; border-bottom: 1px solid rgba(255,255,255,.1); 
z-index: 9998; transition-duration: .5s; background: #fff}

.header:after{content: ''; width: 100%; position: absolute; left: 0; 
top: 0; height: 0px; background: #fff; transition-duration: 1s; max-height: 0px; z-index: -1}

.header .inner{position: relative;}

.header .nav_top{display: flex;  justify-content: center;
    align-items: flex-start; transition-duration: 1s; }
.header .nav_top .deps_1{color: #222; font-size: 18px; height: 98px; display: flex;  justify-content: center;
    align-items: center; border-bottom: 2px solid transparent; transition-duration: .5s; white-space: nowrap;}
.header .nav_top li{text-align: center; position: relative;  
transition-duration: 1s; padding: 0 20px; max-width: 180px;}

.header .logo{width: 216px; height: 40px; background: url(../img/common/logob.png); 
			 background-position: center; background-repeat: no-repeat; position: absolute; 
			 left: 0; top: 30px; transition-duration: .5s}

.header .top_right{position: absolute; right: 0; display: flex; justify-content: flex-end;
    align-items: center; gap:20px; top: 30px}
.header .top_right .lang{display: flex; justify-content: flex-end;
    align-items: center; gap:20px;}
.header .top_right .lang a{color: #222; font-size: 16px; opacity: .5; transition-duration: 1s}
.header .top_right .lang a.on{opacity: 1}

.header:hover{border-bottom: 0}

.header:hover{background: #fff}
.header:hover .logo{background-image: url(../img/common/logob.png);}
.header:hover .nav_top .deps_1{color: #222; }
.header:hover .lang a{color: #222}

.header:hover li{ width: 200px ;  max-width: 200px; padding: 0 }

.header .nav_top li:hover .deps_1,
.header .nav_top li.on .deps_1{border-bottom: 2px solid #0073AE}

.header.drop{background: #fff}
.header.drop .logo{background-image: url(../img/common/logob.png);}
.header.drop .nav_top .deps_1{color: #222; }
.header.drop .lang a{color: #222}


.header .head_subdeps{position: fixed; left: 0; top: 98px; background: #fff; width: 100%; 
overflow: hidden; visibility: hidden; opacity: 0; transition-duration: 1s; height: 0; max-height: 0}
.header .head_subdeps ul{display: flex;  justify-content: center;
    align-items: flex-start; transition-duration: 1s; }
   
.header .head_subdeps ul li{text-align: center; width: 200px; padding: 0 20px}    


.header .head_subdeps ul li a{display: block; font-size: 16px; color: #666 ; transition-duration: 1s}
.header .head_subdeps ul li a:hover{color: #0073AE}

.header .head_subdeps ul li a + a{margin-top: 15px;}


.header:hover .head_subdeps{padding: 25px 0; height: auto; visibility: visible; max-height: 300px; opacity: 1}






.video-slider {
  position: relative;
}

/* Custom Controls */
.controls {
  position: absolute;
  right: 10rem;
  display: flex;
  align-items: center;
  z-index: 10;
  gap:10px;
  bottom: 70px
}



.progress-circle {
  position: relative;
  width: 80px;
  height: 80px;
}

.progress-circle svg {
  width: 100%;
  height: 100%;
}

#progressCircle {
  transform: rotate(-90deg); /* Rotate the SVG to make the progress start from the top */
}

#progressLine {
  transition: stroke-dashoffset 0.1s linear;
}

/* Custom Arrows */
.custom-arrow {
  width: 72px;
  height: 72px;
  background-color: rgba(255, 255, 255, 0.0);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;

  z-index: 5;
  cursor: pointer;
   border: 3px solid rgba(255,255,255,.5);
   transition-duration: .5s
}

.custom-arrow:hover{border: 3px solid rgba(255,255,255,.8)}

.custom-prev {
  background: url(../img/prev.png) no-repeat center;

  
}

.custom-next {
  background: url(../img/next.png) no-repeat center;

}

.progress_are{width: 80px;
  height: 80px; position: relative;}


.play-pause {
  background-color: transparent;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  position: absolute; 
  left: 0; top: 0; width: 80px; height: 80px;
  z-index: 2
}


#playPauseBtn.playing {
 
}

#playPauseBtn::before {
  content: ''; background: url(../img/play.png); background-repeat: no-repeat; background-position:center; 
   width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
}

#playPauseBtn.playing::before {
  content: ''; background: url(../img/pause.png); background-repeat: no-repeat; background-position:center; 
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
}


.main_slide .slick-dots{position: absolute; 
max-width: 1640px; margin: 0 auto; width: 100%; left: 50%; bottom: 70px;     transform: translateX(-50%);
display: flex; gap:15px;}

.main_slide .slick-dots li button{display: none}
.main_slide .slick-dots li{font-size: 16px; color: #fff; padding-bottom: 10px; border-bottom: 2px solid transparent; opacity: .5}
.main_slide .slick-dots li:nth-child(1):after{content: '01'; }
.main_slide .slick-dots li:nth-child(2):after{content: '02'; }
.main_slide .slick-dots li:nth-child(3):after{content: '03'; }
.main_slide .slick-dots li:nth-child(4):after{content: '04'; }
.main_slide .slick-dots li:nth-child(5):after{content: '05'; }

.main_slide .slick-dots li.slick-active{opacity: 1; border-color: #fff}

.main_slide{height: 100vh; position: relative; }
.main_slide iframe{position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;  opacity: .7}

.video_are{ position: relative;
            width: 100%;
            /*height: 0;
            padding-bottom: 56.25%; /* 16:9 aspect ratio */*/
            max-width: 100vw;
            max-height: 100vh; z-index: -1; background: #000; overflow: hidden}


.main_slide .video_are{height: 100vh}

.main_slide video {
        width: 100%;
        opacity: 1;
        height: 100%;
        object-fit: cover;
    }

.video_bg{width: 100%;height: 100vh;  position: relative} 


.main_visual_txt {
    position: absolute;
    left: 50%;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    max-width: 1640px;
    transform: translateX(-50%);
    flex-direction: column;
}
.main_visual_txt h2{font-size: 80px; font-weight: 800; color: #fff; line-height: 90px}
.main_visual_txt p{font-size: 24px; color: #fff; margin-top: 20px}


.main_about{padding: 200px 0; background: url(../img/main/main_about.png); background-size: cover}







.main_title{margin-bottom: 80px;}
.main_title h3{margin-bottom: 20px; 
background: var(--grad, linear-gradient(120deg, #E7284D 0%, #0187CF 99.93%));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 25px; 
display: inline-block}
.main_title h2{font-size: 64px; font-weight: bold; color: #1B1B1B}




.main_about .main_title h2{color: #fff}

.main_about_flex{display: flex; gap:20px;}
.main_about_flex .box{border: 1px solid rgba(255,255,255,.3); 
border-radius: 20px; text-align: center; width: 300px; padding: 40px 20px; 
transition-duration: 1s; position: relative; overflow: hidden; z-index: 2}
.main_about_flex .box h2{display: flex; font-size: 60px; font-weight: bold; color: #fff;justify-content: center;
    align-items: center; gap:10px;}
.main_about_flex .box h2 span{font-size: 16px; color: #fff; margin-top: 20px}
.main_about_flex .box p{margin-top: 20px; font-size: 18px; line-height: 25px; font-weight: bold; color: #fff}

.main_about_flex .box:hover{border: 0;    scale: 1.05;}



.main_about_flex .box:after{content: ''; width: 100%; height: 100%; top: 0; left: 0;
background: var(--grad, linear-gradient(120deg, #E7284D 0%, #0187CF 99.93%));
box-shadow: 4px 4px 25px 0px rgba(0, 0, 0, 0.15); position: absolute; z-index: -1; transition-duration: 1s; opacity: 0}



.main_about_flex .box:hover:after{opacity: 1}


.main_business{padding: 200px 0}
.main_business_flex{display: flex; gap:20px;}
.main_business_flex a{ flex: 1 1 0%; height: 500px; 
background-size: cover; border-radius: 20px; transition-duration: 1s;display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    padding: 40px; }

.main_business_flex a:nth-child(1){background-image: url(../img/main/main_business_flex01.png)}
.main_business_flex a:nth-child(2){background-image: url(../img/main/main_business_flex02.png)}
.main_business_flex a:nth-child(3){background-image: url(../img/main/main_business_flex03.png)}
.main_business_flex a:nth-child(4){background-image: url(../img/main/main_business_flex04.png);margin-left: auto }



.main_business_flex a p{color: #fff; opacity: .8; font-size: 24px; font-weight: bold; transition-duration: 1s; word-break: keep-all}


.main_business_flex a:hover{flex: 3 1 0%;box-shadow: 4px 4px 25px 0px rgba(0, 0, 0, 0.15);}
.main_business_flex a:hover p{opacity: 1}



.main_history{padding: 200px 0; background: url(../img/main/main_history.png); background-size: cover}
.main_history .main_title{text-align: center}
.main_history .main_title h2{color: #fff}

.history_slide .slick-slide{padding: 0 20px}
.history_slide .box{border: 1px solid #fff; padding: 40px; border-radius: 20px; height: 380px; transition-duration: 1s}
.history_slide .slick-slide .box{margin-top: 50px; }
.history_slide .slick-slide .box h3{color: #fff; font-size: 24px; margin-bottom: 30px; transition-duration: .5s}

.history_slide .slick-slide.slick-active .box{margin-top: 0}
.history_slide .slick-slide.slick-active + .slick-slide.slick-active .box{margin-top: 50px}
.history_slide .slick-slide.slick-active + .slick-slide.slick-active + .slick-slide.slick-active .box{margin-top: 0px}


.history_slide .slick-slide .box ul li{position: relative; 
padding-left: 10px; color: #fff; font-size: 18px; line-height: 25px; word-break: keep-all; transition-duration: .5s}
.history_slide .slick-slide .box ul li + li{margin-top: 10px;}
.history_slide .slick-slide .box ul li:after{content: '·'; opacity: .8; position: absolute; left: 0; top: 0}


.history_slide .box:hover{background: #fff; box-shadow: 4px 4px 25px 0px rgba(0, 0, 0, 0.15);}
.history_slide .box:hover h3{color: #0073AE}
.history_slide .box:hover ul li{color: #1B1B1B}


.footer{background: #1a1a1a}
.footer .foot_top{padding: 30px 0; display: flex; border-bottom: 1px solid rgba(255,255,255,.3); gap:10px;
    justify-content: flex-start;
    align-items: center;}
.footer .foot_top a{color: #fff; font-size: 18px; }
.footer .foot_top span{width: 4px; height: 4px; background: #fff; border-radius: 4px; opacity: .5}


.foot_sitemap{padding: 60px 0}
.foot_sitemap ul{display: flex; gap:60px;}

.foot_sitemap ul li h2{font-size: 24px; font-weight: bold; color: #fff}
.foot_sitemap ul li .list{margin-top: 30px;}
.foot_sitemap ul li .list a{font-size: 16px; color: #fff; opacity: .8; display: block}
.foot_sitemap ul li .list a + a{margin-top: 15px;}


.foot_info{padding: 60px 0; border-top: 1px solid rgba(255,255,255,.3); }
.foot_info ul{display: flex; gap: 10px; flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;}
.foot_info ul li{font-size: 16px; color: #fff; display: flex; gap:10px; line-height: 24px}
.foot_info ul li b{background: #292929; height: 24px; line-height: 22px; 
border: 1px solid #383838; border-radius: 24px; padding: 0 10px; font-size: 14px}
.foot_info ul li.w100{width: 100%}

.foot_info p{font-size: 16px; margin-top: 30px; color: #383838}


.right_btn{position: fixed; right: 50px; bottom: 50px; z-index: 9998;    display: flex;
    flex-direction: column;
    align-items: flex-end;}
.right_btn a{display: flex; }
.right_btn a + a{margin-top: 10px}
.right_btn a.top_sc{width:80px; height: 80px; background: #0073AE; border-radius: 80px;justify-content: center;
    align-items: center; transition-duration: 1s}

.right_btn a:hover{ box-shadow: 4px 4px 25px 0px rgba(0, 0, 0, 0.15);}

.right_btn a.chat{min-width: 80px; height: 80px; background: #fff; border-radius: 80px; justify-content: center;
    align-items: center; transition-duration: .1s; max-width: 80px; border: 1px solid #ddd}

.right_btn a.chat:hover{width: auto; gap:20px; max-width: 300px; padding: 0 25px}

.right_btn a.chat .txt{width: 0; overflow: hidden; max-width: 0; visibility: hidden; 
font-size: 18px; transition-duration: .5s; white-space: nowrap}
.right_btn a.chat:hover .txt{width: auto; max-width: 150px; visibility: visible}

.right_btn a.top_sc:hover{padding-bottom: 5px}





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