html {
  scroll-behavior: smooth;
}

/*head*/

.header{position: relative; padding: 0 6rem; border-bottom: 1px solid #f5f5f5; }

.header .logo{position: absolute; left: 6rem;  top:25px;
background: url(../img/common/logo.png); width: 158px; height: 55px; 
background-repeat: no-repeat; background-size: 100% auto}



.header .top_nav{display: flex; gap:60px; justify-content: center;
    align-items: center;}
.header .top_nav li{text-align: center; position: relative}
.header .top_nav .main_deps{font-size: 18px; color: #1B1B1B; height: 100px; display: flex; justify-content: center;
    align-items: center; font-weight: 500; transition-duration: .5s}

.header .top_nav .sub_deps {
    position: absolute;
    left: 50%;
    top: calc(100% - 10px);
    border-radius: 10px;
    width: max-content;
    padding:0 25px;
    border: 1px solid #f5f5f5;
    transform: translateX(-50%);
    background: #fff;
    box-shadow: 2px 2px 20px 0px rgba(0, 0, 0, 0.05);
    transition-duration: .5s;
    overflow: hidden;
    height: 0;
    visibility: hidden;
    max-height: 0; z-index: 9992
}

.header .top_nav li:hover .sub_deps{height: auto; max-height: 500px; visibility: visible;
padding: 25px;}


.header .top_nav li:hover .main_deps{color: #20409A}

.header .top_nav .sub_deps a{display: block; font-size: 16px; transition-duration: .5s}
.header .top_nav .sub_deps a:hover{color: #20409A}
.header .top_nav .sub_deps a + a{margin-top: 15px}

.top_right{position: absolute; right: 6rem; top: 40px; display: flex; gap:25px;
justify-content: flex-end;
    align-items: center;}

.header .nav_btn{ width: 20px; height: 14px; cursor: pointer; position: relative}
.header .nav_btn span{width: 100%; height: 2px; background: #222; position: absolute; left: 0; top: 0; transition-duration: .5s}
.header .nav_btn span:nth-child(2){top: 50%; margin-top: -1px; width: 80%; right: 0; left: auto}
.header .nav_btn span:nth-child(3){top: auto; bottom: 0}

.open_all .header .nav_btn span{background: #fff}
.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);}

.top_right path{transition-duration: .5s}
.open_all .header .logo{position: fixed; z-index: 9999; background-image: url(../img/common/logow.png);}

.open_all .top_right{position: fixed; z-index: 9999}

.open_all .top_right path{stroke:#fff}

.all_nav{position: fixed; background: rgba(0,0,0,0.8); 
width: 100%; height: 100%; z-index: 9998; left: 0; top: -100%; visibility: hidden; overflow: hidden; transition-duration: .5s}

.open_all .all_nav{top: 0; visibility: visible}

.all_nav .all_in{padding:100px 6rem;
 height: 100%; display: flex;
    justify-content: center;
    align-items: center;}

.all_nav .top_nav{display: flex; gap:6rem}
    
.all_nav .top_nav .main_deps{font-size: 24px; color: #fff; font-weight: bold; margin-bottom: 30px; display: block}
.all_nav .top_nav li{flex:1}

.all_nav .top_nav .sub_deps{}
.all_nav .top_nav .sub_deps a{display: block; color: #fff; font-size: 18px;}
.all_nav .top_nav .sub_deps a + a{margin-top: 15px;}


/*foot*/

.footer_are{background: #111111; padding: 0 6rem}
.footer_are .foot_top{padding: 50px 0; border-bottom: 1px solid rgba(255,255,255,.1); display: flex;flex-wrap: wrap;
    gap: 10px 20px; position: relative}
.footer_are .foot_top p{font-size: 16px; color: #fff; word-break: keep-all; display: flex; gap:10px}
.footer_are .foot_top p b{opacity: .6}
.footer_are .foot_top p.w100{width: 100%}

.foot_sns{position: absolute; right: 0; display: flex; gap:15px}

.foot_copy{padding: 50px 0}
.foot_copy p{font-size: 16px; opacity: .5; color: #fff; text-align: right}


.foot_btn {
    position: fixed;
    z-index: 9992;
    width: 85px;
    height: 85px;
    display: flex;
    border-radius: 85px;
    background: #20409A;
    box-shadow: 2px 2px 20px 0px rgba(0, 0, 0, 0.10);
    right: 3rem;
    bottom: 3rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition-duration: .5s
}

.foot_btn span{font-size: 14px; font-weight: bold; color: #fff; text-transform: uppercase}

.foot_btn:hover{gap:10px}



/*common*/

.inner{width: 100%; max-width: 1460px; margin: 0 auto; padding: 0 20px}

/*Main*/

.main_visual{position: relative}
.main_visual .box{position: relative; height: 600px; display: flex;justify-content: flex-start;
    align-items: center; padding-bottom: 60px}
.main_visual .txt{z-index: 2; position: relative}

.main_visual .txt h2{color: #fff; font-size: 50px; font-weight: 800; line-height: 1.5}
.main_visual .txt p{margin-top: 30px; color: #fff; font-size: 18px; word-break: keep-all; line-height: 1.5}

.main_visual .bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%}
.main_visual .bg img{width: 100%; height: 100%; scale:1.0; transition-duration: 2s; object-fit:cover}

.slick-current .bg img{scale:1.1}





.main_visual .slide_btn{position: absolute; left: 50%; bottom: 60px; width: 100%; max-width: 1460px; 
z-index: 2; transform: translateX(-50%); padding: 0 20px
}

.main_visual .slide_btn .slide_btn_box{display: inline-flex; border-radius: 5px;
background: rgba(34, 34, 34, 0.80);
box-shadow: 2px 2px 20px 0px rgba(0, 0, 0, 0.05); gap:15px; padding: 0 35px; height: 60px;justify-content: center;
    align-items: center;}

.main_visual .slide_btn .slide_btn_box span{cursor: pointer}

.main_visual .slide_btn .slide_btn_box .slider_controls{display: flex; gap:15px;justify-content: center;
    align-items: center;}
.main_visual .slide_btn .slide_btn_box .slider_controls span{color: #fff; font-size: 16px; opacity: .5}

.main_visual .slide_btn .slide_btn_box .slider_controls i{width: 2px; height: 4px; background: #fff; opacity: .5}


.main_visual .slide_btn .slide_btn_box .slider_controls span#current_slide{opacity: 1}




.main_icon{padding: 100px 0}
.flex_main_icon {display: flex; gap:20px;     justify-content: center;
    align-items: center;}
.flex_main_icon a{width: 140px; height: 140px; border-radius: 10px; border: 1px solid #ddd;
display: flex; gap:15px;
flex-direction: column;
    justify-content: center;
    align-items: center; font-size: 16px; color: #333; background: #fff; transition-duration: .5s}


.flex_main_icon a:hover{color: #20409A;
box-shadow: 2px 2px 20px 0px rgba(0, 0, 0, 0.10);}


.flex_main_icon a:hover i path{fill:#20409A}



.main_title{margin-bottom: 60px}
.main_title h2{font-size: 50px; color: #1B1B1B; font-weight: 800; line-height: 1.5; word-break: keep-all}

.main_news{padding: 100px 0 }



.tab_board{flex:1}
.tab_board .tab {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd
}
.tab_board .tab__item {
  padding: 10px 25px;
  position: relative
}
.tab_board .tab__item a{color: #999; font-size: 24px; font-weight: 600; transition-duration: .5s}

.tab_board .tab__item:after{content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0%; 
background: #20409A; transition-duration: .5s}

.tab_board .tab__item.active {
  color: #20409A;
}

.tab_board .tab__item.active:after{width: 100%}

.tab_board .tab__item.active a{color: #20409A;}

.tab_board .tab__content-wrapper {

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

.board_least{padding: 35px 5px; border-bottom: 1px solid #ddd}
.board_least li a{display: flex; }
.board_least li + li{margin-top: 20px;}
.board_least li p{flex:1; position: relative; padding-left: 15px; 
font-size: 18px; line-height: 1.5; word-break: keep-all; font-weight: 600;
display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;}
.board_least li p:before{content: '·'; position: absolute; left: 0; top: 0; color: #666}
.board_least li .date{width: 100px; font-size: 18px; line-height: 1.5; word-break: keep-all; color: #ddd}



.main_board_flex{display: flex; gap:60px; width: 100%}


.gall_slide_are{flex:1; width: 50%; position: relative}


.gall_slide_are .slide_btn{position: absolute; right: 40px; bottom: 40px; 
z-index: 2;  
}

.gall_slide_are .slide_btn .slide_btn_box{display: inline-flex; border-radius: 5px;
background: rgba(34, 34, 34, 0.80);
box-shadow: 2px 2px 20px 0px rgba(0, 0, 0, 0.05); gap:30px; padding: 0 25px; height: 60px;justify-content: center;
    align-items: center;}

.gall_slide_are .slide_btn .slide_btn_box span{cursor: pointer}


.gall_slide_are img{width: 100%; height: 100%; object-fit: cover;     aspect-ratio: 16 / 10;}

.partner_slide{padding: 0px 0rem 100px}
.partner_slide .p_logo{text-align: center; border: 1px solid #ddd; display: block; padding: 10px}
.partner_slide .p_logo img{max-width: 100%; margin: 0 auto}

.partner_slide .slick-slide{padding: 0 5px}

.partner_slide .slick-list .slick-track{
  margin-right: auto;
  margin-left: 0
}

/*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: 30px; border-radius: 10px;
  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: 14px; 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: 30px}