@charset "UTF-8";

/*서브페이지 상단 공통*/
#sub-top {position:relative;display:flex;flex-flow:column;justify-content:flex-end;min-height:560px;height:560px;background:url(./img/sub_top_bg.png) no-repeat center / cover;transform: scale(1.2);opacity:0;transition: all 4s;}
#sub-top.on {transform:scale(1);opacity:1;}
#sub-top:before,
#sub-top:after {
    content:'';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    background: rgba(255,255,255,0.3);
    z-index: 5;
}

#sub-top.on:before {animation: move_blind 2s;animation-fill-mode: forwards;}
#sub-top.on:after {animation: move_blind 2s;animation-fill-mode: forwards;animation-delay: .5s;}

@keyframes move_blind {
    0% {width: 100%; background: rgba(255,255,255,0.3);}
    100% {width: 0;background: rgba(255,255,255,0);}
}

#sub-top .sub-title {position:absolute;left:50%;top:55%;transform:translate(-50%, -50%);width:100%;text-align: center;}
#sub-top .sub-title h1 {font-size:68px;letter-spacing:-0.5px;color:#fff; font-family:'GimhaeGayaB';}

#sub-wr .section-tit {max-width:1644px;text-align: center;margin:120px auto 56px;}
#sub-wr .section-tit h1 {font-family:'GimhaeGayaB';font-size:52px; letter-spacing: -3px;}
#sub-wr .section-tit p {font-size:16px;color:#333333;margin:24px 0 0 0; letter-spacing: -0.5px;}
#sub-wr .section-tit p img{position: relative; top: -1px;}

#sub-wr .sub_tab{height: 80px; text-align: center;}
#sub-wr .sub_tab .tab_menu{width: 100%; max-width: 1644px; display: block; font-size: 0; margin: 0 auto;}
#sub-wr .sub_tab .tab_menu li:first-child{margin-left: 0;}
#sub-wr .sub_tab .tab_menu li{width: 20%; display: inline-block; border: 1px solid #DDDDDD; height: 80px; margin-left: -1px;}
#sub-wr .sub_tab .tab_menu li a{display: flex;height:100%;align-items:center;justify-content:center;text-align: center;font-size: 18px;word-break: keep-all;}
#sub-wr .sub_tab .tab_menu li.on{background: transparent linear-gradient(108deg, #1B3C8B 0%, var(--unnamed-color-534491) 100%) 0% 0% no-repeat padding-box; background: transparent linear-gradient(108deg, #1B3C8B 0%, #534491 100%) 0% 0% no-repeat padding-box;}
#sub-wr .sub_tab .tab_menu li.on a{color: #fff;}

.pc_view{display: block;}
.m_view{display: none;}


@media (max-width:768px) {
    #sub-top {min-height: 360px; height: 360px;}
    #sub-top .sub-title {}
    #sub-top .sub-title h1 {font-size:36px;}
    #sub-wr .sub_tab{padding: 0 40px;}
}

@media (max-width:500px) {
    #sub-top {min-height: 264px; height: 264px;}
    #sub-top .sub-title h1{font-size: 32px;}
    #sub-wr .section-tit{margin: 80px auto 64px;}
    #sub-wr .section-tit h1{font-size: 32px;}
    #sub-wr .section-tit p{font-size: 14px;}

    #sub-wr .sub_tab{height: 51px; padding: 0; height: auto;}
    #sub-wr .sub_tab .tab_menu li{height: 51px; padding: 0 16px 0; width: auto;}
    #sub-wr .sub_tab .tab_menu li a{font-size: 16px; display: block; line-height: 51px;}
    #sub-wr{padding: 0 16px;}

    .pc_view{display: none;}
    .m_view{display: block;}
}

@media (max-width:1200px) {
    /* START : 스와이프 처리*/
    #sub-wr .sub_tab {
        position: relative;
        width: 100%;
        overflow: hidden;
        z-index: 10;
    }
    #sub-wr .sub_tab .tab_menu {
        width: 100%;
        margin: 0;
        white-space: nowrap;
        overflow-y: hidden;
        overflow-x: auto;
        list-style: none;
        font-size: 0;
    }
    #sub-wr .sub_tab .tab_menu li {
        padding: 0 16px 0;
        width: auto !important;
    }
    #sub-wr .sub_tab .tab_menu::-webkit-scrollbar {
            display: none;
        }
    /*  // END : 스와이프 처리*/
}

/* 서브페이지 컨텐츠 공통 */
#sub-wr .section .section-con {max-width:1644px; margin:120px auto 200px;}

@media (max-width: 1400px) {
    #sub-wr .section .section-con{padding: 0 40px;}
}

@media (max-width: 768px) {

}

@media (max-width: 500px) {
    #sub-wr .section .section-con{padding: 0; margin: 64px auto;}
}


/*menu20*/
.sub10-20 .year2023{background: var(--unnamed-color-1d3d8c) 0% 0% no-repeat padding-box;  background: #1D3D8C 0% 0% no-repeat padding-box; border-radius: 0px 8px 8px 8px; width: 254px; height: 40px; text-align: center; color: #fff; display: block; margin: 0 auto; font-size: 16px; line-height: 40px;}
.sub10-20 .history_con{position: relative; padding: 80px 0;}
.sub10-20 .history_con:before{
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 100%;
    background: #DDDDDD;
}
.sub10-20 .history_con .history_box{position: relative;}
.sub10-20 .history_con .history_box .info{position: relative;}
.sub10-20 .history_con .history_box:nth-child(odd) .info{margin-left: 50%; padding-left: 50px;}
.sub10-20 .history_con .history_box:nth-child(even) .info{margin-right: 50%; padding-right: 50px; text-align: right;}
.sub10-20 .history_con .history_box h4{color: #1D3D8C; font-size: 20px; margin-bottom: 16px;}
.sub10-20 .history_con .history_box .info:after{
    content: "";
    display: block;
    width: 26px;
    height: 26px;
    position: absolute;
    top: -2px;
    background: url(/theme/basic2/skin/sub/sub_10/img/history_cc.png) no-repeat center top;
}
.sub10-20 .history_con .history_box:nth-child(odd) .info:after{left: -12px;}
.sub10-20 .history_con .history_box:nth-child(even) .info:after{right: -13px;}
.sub10-20 .history_con .history_box .con{margin-bottom: 16px; width: 100%;}
.sub10-20 .history_con .history_box .con li{display: inline-block; list-style: none; font-size: 18px; line-height: 28px; color: #888888;}
.sub10-20 .history_con .history_box:nth-child(odd) .con .month{vertical-align: top; padding-right: 19px; width: 7%;}
.sub10-20 .history_con .history_box:nth-child(even) .con .month{vertical-align: top; padding-left: 19px; width: 7%;}
.sub10-20 .history_con .history_box:nth-child(odd) .con .txt{width: 92%;}
.sub10-20 .history_con .history_box:nth-child(even) .con .tdt{width: 92%;}

.sub10-20 .year2020{
    background: var(--unnamed-color-333333) 0% 0% no-repeat padding-box;
    background: #333333 0% 0% no-repeat padding-box;
    border-radius: 0px 8px 8px 8px; width: 254px; height: 40px; text-align: center; color: #fff; display: block; margin: 0 auto; font-size: 16px; line-height: 40px;}

@media (max-width: 768px) {
    .sub10-20 .year2023{margin: 0;}
    .sub10-20 .history_con:before{left: 16px;}
    .sub10-20 .history_con .history_box{margin-bottom: 84px;}
    .sub10-20 .history_con .history_box:last-child{margin-bottom: 0;}
    .sub10-20 .history_con .history_box:nth-child(odd) .info{padding-left: 52px; margin-left: 0;}
    .sub10-20 .history_con .history_box:nth-child(odd) .info:after{left: 3px;}

    .sub10-20 .history_con .history_box:nth-child(even) .info .con{
        display: flex;
        justify-content: left;
        flex-direction: row-reverse;
    }
    .sub10-20 .history_con .history_box:nth-child(even) .info:after{right: 0; left: 3px;}
    .sub10-20 .history_con .history_box:nth-child(even) .info{padding-left: 52px; padding-right: 0; margin-right: 0; text-align: left;}
    .sub10-20 .history_con .history_box:nth-child(even) .con .month {    
        padding-right: 19px;
        padding-left: 0px;
    }
    .sub10-20 .year2020{margin: 0;}

}
@media (max-width: 500px) {
    .sub10-20 .history_con .history_box .con li{font-size: 16px; line-height: 26px;}
}