/*common*/
.inner{max-width: 1640px; margin: 0 auto; padding: 0 20px; width: 100%}
.fp-watermark{display: none}


/*header*/
.header{position: fixed; left: 0; top: 0; width: 100%; z-index: 9998; transition-duration: 1s}
.header .inner{display: flex; align-items: center;
    justify-content: space-between;}
.header .logo{width: 86px; height: 51px; background: url(../img/common/logow.png); background-position: center;
background-repeat: no-repeat; background-size: 100% auto;}


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

.top_nav{display: flex; gap:60px; height: 100px;
align-items: center;
    justify-content: flex-end;}
.top_nav li{position: relative}
.top_nav li a.main_deps{color: #fff; font-size: 18px; font-weight: 500}

.top_nav li .sub_deps{position: absolute; background: rgba(255,255,255.9); padding:0 30px; border-radius:20px 0 20px 0; 
text-align: center;   width: max-content;
    top: 40px;
    left: 50%;
    transform: translateX(-50%); height: 0; opacity: 0; visibility: hidden ; max-height: 0; overflow: hidden;
    transition-duration: 1s}

.top_nav li .sub_deps a{color: #222; font-size: 18px; display: block; transition-duration: .5s; font-weight: 500}
.top_nav li .sub_deps a + a{margin-top: 10px;}

.top_nav li .sub_deps a:hover{font-weight: 500; color: #153985}

.top_nav li:hover .sub_deps{opacity: 1; visibility: visible; height: auto; padding: 30px; max-height: 500px; border: 1px solid #ddd}


.lang{position: relative}
.lang .icon{width: 40px; height: 40px; border-radius: 40px; background: rgba(255,255,255,.1); display: flex;
align-items: center;
    justify-content: center; cursor: pointer}

.lang .lang_list{position: absolute; background: rgba(255,255,255.9); padding:0 30px; border-radius:20px 0 20px 0; 
text-align: center;   width: max-content;
    top: 50px;
    left: 50%;
    transform: translateX(-50%); height: 0; opacity: 0; visibility: hidden ; max-height: 0; overflow: hidden;
    transition-duration: 1s}
.lang .lang_list.lang_on{opacity: 1; visibility: visible; height: auto; padding: 30px; max-height: 500px; border: 1px solid #ddd}
.lang .lang_list a{color: #222; font-size: 18px; display: block; transition-duration: .5s; font-weight: 500}


.section-news_section .logo{background-image: url(../img/common/logob.png);}
.section-news_section .top_nav li a.main_deps{color: #222; }
.section-news_section .lang .icon{background: rgba(0,0,0,0.8)}

.header.drop{background: #fff}
.header.drop .logo{background-image: url(../img/common/logob.png);}
.header.drop .top_nav li a.main_deps{color: #222; }
.header.drop .lang .icon{background: rgba(0,0,0,0.8)}


.section{max-height: 100vh; overflow-y: auto}

.section::-webkit-scrollbar {
    display: none
  }

.main_visual{height: 100vh;}


.video-slider {
  position: relative;
}

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



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

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



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


.play-pause {
  background-color: transparent;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  position: absolute; 
  left: 0; top: 0; width: 60px; height: 60px;
  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: 85px;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    padding-left: 7rem;}

.main_slide .slick-dots li button{display: none}
.main_slide .slick-dots li{font-size: 16px; color: #fff; padding-bottom: 5px; 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;
    }

.main_slide img {
        width: 100%;
        opacity: 1;
        height: 100%;
        object-fit: cover;
        transition-duration: 2s;
        scale:1.1
    }
    
.main_slide .slick-current img {scale:1.0}
    

.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;
    padding: 0 20px;
}
.main_visual_txt h2{font-size: 60px; font-weight: 800; color: #fff; line-height: 1.4; word-break: keep-all;
text-transform: uppercase}
.main_visual_txt p{font-size: 24px; font-weight: 500; color: #fff; line-height: 1.4; word-break: keep-all; margin-top: 10px}



.common_btn{display: inline-flex; gap:30px; font-size: 18px; color: #fff;
 border: 1px solid #fff; padding: 20px 25px; border-radius: 100px; justify-content: space-around;
    align-items: center;transition-duration: .5s; width: 250px; background: rgba(21,57,133,0)}

.common_btn:hover{background-color: rgba(21,57,133,1); border-color: #153985; gap:30px }


.main_visual_txt .common_btn{margin-top: 40px; transition-duration: .5s}


.main_slide .main_visual_txt .common_btn img{width: auto; height: auto}



.main_bu{background: url(../img/main/main_bu.png);
 background-size: cover; background-position: center; height: 100vh;
 display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; padding-top: 100px}

.main_title{margin-bottom: 70px; }
.main_title h3{font-size: 20px; font-weight: bold; }
.main_title h2{font-size: 32px; line-height: 1.5; word-break: keep-all; margin-top: 20px;}

.main_bu .main_title{text-align: center}
.main_bu .main_title *{color: #fff}

.main_bu .inner{width: 100%}
.flex_bu_main{display: flex; gap:20px; }
.flex_bu_main .box{flex:1; text-align: center; padding: 0px 20px; 
border: 3px solid #fff; transition-duration: 1s; height: 300px;
display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;}
.flex_bu_main .box p{color: #fff; font-size: 18px;}
.flex_bu_main .box h3{color: #fff; font-size: 24px; margin: 15px 0 25px}
.flex_bu_main .box:hover{scale:1.1; background: #153985; border-color: #153985; border-radius: 20px 0 20px 0;}


.flex_bu_main .box img{opacity: 0; visibility: hidden; display: none; margin: 0 auto }
.flex_bu_main .box:hover img{opacity: 1; display: block; visibility: visible}


.main_p{height: 100vh; display: flex; }
.main_p a.box{flex:1 1 0% ; background: #000; transition-duration: 1s; 
background-position: center; background-size: cover; padding: 60px; position: relative;
    display: flex
;
    justify-content: flex-start;
    align-items: flex-end;}

.main_p a.box p{font-size: 32px; word-break: keep-all; font-weight: bold; color: #fff}
.main_p a.box img{position: absolute; right: 60px; bottom: 60px; opacity: 0; transition-duration: 1s}


.main_p a.box:hover{flex:3 1 0%}
.main_p a.box:hover img{opacity: 1}

.main_p a.box:nth-child(1){background-image: url(../img/main/main_p01new.png);
box-shadow: 50px 0px 50px 0px rgba(0, 0, 0, 0.50) inset; border-radius: 0 40px 0 0; z-index: 4 }
.main_p a.box:nth-child(2){background-image: url(../img/main/main_p01.png);
box-shadow: 50px 0px 50px 0px rgba(0, 0, 0, 0.50) inset; border-radius: 0 0 40px 0; z-index: 3; padding-left: 80px;}
.main_p a.box:nth-child(3){background-image: url(../img/main/main_p02.png);
box-shadow: 50px 0px 50px 0px rgba(0, 0, 0, 0.50) inset; border-radius: 0 40px 0 0; z-index: 2; padding-left: 80px;}
.main_p a.box:nth-child(4){background-image: url(../img/main/main_p04.png);
box-shadow: 50px 0px 50px 0px rgba(0, 0, 0, 0.50) inset; border-radius: 0 0 0px 0; padding-left: 80px;}

.main_p a.box + .box{margin-left: -40px}



.main_news{height: 100vh;display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; padding-top: 100px}

.main_new_top{display: flex; margin-bottom: 70px;
    align-items: flex-end;
    justify-content: space-between; }
.main_new_top .main_title{margin-bottom: 0}

.cont_slide{border-radius: 20px 0px;
background: #1A1A1A;
/* drop */
box-shadow: 2px 2px 25px 0px rgba(0, 0, 0, 0.15);
display: flex; gap:20px; padding: 20px 35px}
.cont_slide span{cursor: pointer}

.main_board_slide .thum{margin-bottom: 30px; border: 1px solid #ddd; overflow: hidden; transition-duration: .5s}
.main_board_slide .thum img{width: 100%; height: 100%;     object-fit: cover;
    aspect-ratio: 16 / 12;}
.main_board_slide h3{font-size: 18px; line-height: 1.5; word-break: keep-all;
display: -webkit-box;
    -webkit-line-clamp: 1; /* Limit to two lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;}
.main_board_slide p{font-size: 16px; color: #999; margin-top: 10px;}


.main_board_slide{margin: 0 -20px}
.main_board_slide .slick-slide{padding: 0 20px}


.main_board_slide a:hover .thum{border-radius: 20px 0 20px 0; border: 3px solid #153985;
box-shadow: 2px 2px 25px 0px rgba(0, 0, 0, 0.15);}



.foot_are{}
.main_s{}
.main_s .foot_are{    height: 100vh;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    flex-direction: column;}

.foot_are .bg_foot{background: url(../img/common/footbg.png);
 background-size: cover; background-position: center; padding: 100px 0; text-align: center }


.foot_are .bg_foot .main_title{text-align: center}
.foot_are .bg_foot .main_title *{color: #fff}


.foot_info{padding:75px 0; background: #1a1a1a }
.foot_info ul{margin: 20px 0 30px; display: flex; gap:10px 40px;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;}
.foot_info ul li{display: flex; font-size: 16px; color: #fff; gap:10px}
.foot_info ul li b{border-radius: 24px;
border: 1px solid #383838;
background: #292929; font-size: 14px; padding: 2px 10px}
.foot_info p.copy{color: #383838; font-size: 16px;}

.foot_info ul li.w100{width: 100%}

.top_btn{position: fixed; z-index: 3; bottom: 50px; right: 50px; width: 100px; height: 100px;
border-radius: 20px 0px;
background: #153985;
/* drop */
box-shadow: 2px 2px 25px 0px rgba(0, 0, 0, 0.15);    display: flex;
    justify-content: center;
    align-items: center; transition-duration: .5s}


.top_btn:hover{border-radius: 20px; }




.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 30px; 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 .agree_close{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}


.main_board_slide .empty_li.slick-slide{text-align: center}