/* html {scroll-behavior: smooth;} */
body {overflow-x: hidden;}
img { max-width:100%; } 

/* 공통적용 */
.inner { width: 90%; margin:0 auto; max-width: 1600px; } 
.bold {font-weight: 700;}
.icon {aspect-ratio: 1/1; font-size: 0; flex-shrink: 0;}
.icon img {width: 100%; height: 100%; object-fit: contain;}
.colorBlue { color: var(--mainBlue);}
.colorRed { color: #be0000;}


/* 비메오, 유튜브 */
.video_container {position: relative; aspect-ratio: 16/9; overflow: hidden; max-width: 100%;}
.video_container iframe {width: 100%; height: 100%; }
.video_container.vtc {aspect-ratio: 9/16;}

/* padding · margin style*/
.p_tb { padding:80px 0; } 
.p_t { padding-top: 80px; } 
.p_b { padding-bottom: 80px; } 

/* box */
.rbox {display: flex; gap: 5px; margin-left: auto;}
.lbox {display: flex; gap: 5px;}


/* width */
.w-100 {width: 100% !important;}
.w-max {width: max-content !important;}


/* btn */
.btn {
    display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px; border-width: 1px;
    border-color: transparent; border-style: solid; transition: all .3s;
}
.btn.arr {gap: 10px;}
.btn.arr::after {display: block; content: ""; aspect-ratio: 1/1; background-position: center center; background-repeat: no-repeat; background-size: contain;}
.btn.lg {height: 60px; font-size: 1.125rem;}
.btn.md {height: 50px; font-size: 1rem;}
.btn.sm {height: 40px; font-size: 0.875rem;}
.btn.lg.arr::after {width: 24px;}
.btn.md.arr::after {width: 22px;}
.btn.sm.arr::after {width: 20px;}
.btn.st1 {background: var(--mainNavy); color: #fff;}
.btn.st1::after {background-image: url('/img/icon_btn_arr_w-963c54a72f3e3a9a473b2ce541fe5647.png');}
.btn.st1:hover {background: var(--mainSky);}
.btn.st2 {background: var(--mainBlue); color: #fff; border-color: transparent;}
.btn.st2:hover {background: var(--mainSky);}
.btn.st2::after {background-image: url('/img/icon_btn_arr_w-963c54a72f3e3a9a473b2ce541fe5647.png');}
.btn.st3 {background: #F36F20; color: #fff; border-color: transparent;}
.btn.st3:hover {background: #F7941C;}
.btn.st3::after {background-image: url('/img/icon_btn_arr_w-963c54a72f3e3a9a473b2ce541fe5647.png');}
.btn.st4 {background: #000; color: #fff;}
.btn.st4::after {background-image: url('/img/icon_btn_arr_w-963c54a72f3e3a9a473b2ce541fe5647.png');}


/* 아이콘 버튼 */
.btnIco {
    width: max-content; border-radius: 5px; line-height: 1; white-space: nowrap;
    display: flex; align-items: center; justify-content: center; text-align: center;
    border-width: 1px; border-style: solid; position: relative;
}
.btnIco::before {
    display: block; content: ""; aspect-ratio: 1/1;
    position: absolute; top: 50%; transform: translateY(-50%); left: 7px;
    background-size: contain; background-position: center center; background-repeat: no-repeat;
}
.btnIco.sm {height: 30px; font-size: 0.875rem; padding: 0 7px 0 30px;}
.btnIco.md {height: 40px; font-size: 0.94rem; padding: 0 10px 0 34px;}
.btnIco.sq {aspect-ratio: 1/1; min-width: unset; padding: 0; text-indent: -9999px;}
.btnIco.sm::before {width: 18px;}
.btnIco.md::before {width: 20px;}
.btnIco.sq::before {left: 50%; transform: translate(-50%,-50%);}
.btnIco.disabled {background: #aaa !important; border-color: #aaa !important; color: #fff !important;}

/* 쿠키팝업 */
.layerPop {position:fixed; width:100%; height:100%; z-index:9999;top:0; left:0; bottom:0; right:0; background:rgba(0,0,0,.5); z-index: 9999;}
.layerPop .popupBox {position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); overflow: hidden; background:#111; max-width: max-content; width:90%; max-height: 90vh}
.layerPop .popupBox .contBox {max-height: calc(90vh - 40px); overflow: hidden;  font-size: 0; overflow-y: auto;}
.layerPop .popupBox img {width:100%; max-height:calc(90vh - 40px)}
.layerPop .popupClose {text-align:right; background:#111; height: 40px; padding: 0 10px; align-items: center; display: flex; justify-content:flex-end;}
.layerPop .popupClose input {vertical-align:middle;}
.layerPop .popupClose label {color:#fff; font-size:14px; vertical-align:middle; margin-left:3px;}
.layerPop .popupClose a{
    color:#fff; width:18px; height: 18px; display:inline-block; vertical-align:middle; margin-left:10px;
    background: url('/img/icon_pop_close_w-d7af9846ead295cd750000b8afb7400c.png') no-repeat center center / cover;
}


.pop_cookie {position: fixed; border: 2px solid #000; max-width: 100%; z-index: 9999;}
.pop_cookie .contBox {font-size: 0;}
.pop_cookie .popupClose {text-align:right; background:#111; height: 40px; padding: 0 10px; align-items: center; display: flex; justify-content:flex-end;}
.pop_cookie .popupClose input {vertical-align:middle;}
.pop_cookie .popupClose label {color:#fff; font-size:14px; vertical-align:middle; margin-left:3px;}
.pop_cookie .close_btn {color:#fff; width:18px; height: 18px; display:inline-block; vertical-align:middle; margin-left:10px;
    background: url('/img/icon_pop_close_w-d7af9846ead295cd750000b8afb7400c.png') no-repeat center center / cover;
}

/* popup */
.pop_wrap {position: fixed; top:0; left:0; z-index: 992; width: 100vw; height: 100vh; background: rgba(0,0,0,.8); display: none;}
.pop_wrap.on {display: block;}
.pop_wrap .close.icon {width: 30px; cursor: pointer; background: url('/img/icon_pop_close_w-d7af9846ead295cd750000b8afb7400c.png') no-repeat center center / contain;}
.pop_wrap .close.icon.black {background: url('/img/icon_pop_close_b-85f0c2efcfded53616444ffa174b55f7.png') no-repeat center center / contain;}
.pop_inner {width: 100%; height: 100%; position: relative; display: flex; align-items: center; justify-content: center;}
.pop_layer {
    background: #fff; max-width: 1000px; width:90%; max-height: calc(100vh - 100px);
    /* position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);*/ border-radius: 10px;
    display: flex; flex-direction: column; position: relative;
}
.pop_top {
    padding: 15px 20px; display: flex; gap: 10px;
    border-bottom: 1px solid var(--border); background: var(--subGray); color: #fff;
}
.pop_tit .big {font-size: 1.125rem; font-weight: 700; }
.pop_box {padding: 20px; overflow-y: auto;}
.pop_bot {display: flex; align-items: center; gap: 5px; justify-content: center; padding: 0 20px 20px}
.pop_bot .btn {min-width: 100px;}


/* table */
.tb_box {display: flex; flex-direction: column; gap: 10px;}
.tb_box .table {width: 100%;}
.tb_box table {width: 100%;}
.tb_box .cmnt {text-align: right; font-size: 0.875rem;}
.tb_box th {background: var(--mainNavy); color: #fff;}
.tb_box td, .tb_box th {padding: 10px; border: 1px solid var(--border); text-align: center; vertical-align: middle;}
.tb_box .bgGray {background: #f5f5f5;}
.tb_box .b {text-align: left;}
.tb_box .p {text-align: left; padding-left: 12px; position: relative;}
.tb_box .p::before {
    display: block; content: ""; width: 4px; height: 4px; background: var(--mainNavy); border-radius: 1px;
    position: absolute; left: 0; top: 9px;
}
.tb_box .pnae {font-size: 0.94rem; color: #333; margin-bottom: 5px;}


/* paging */
.paging {text-align: center; width: 100%; font-size: 0; display: flex; align-items: center; justify-content: center; margin-top: 40px;} 
.paging > a {width: 22px; aspect-ratio: 1/1; background-position: center center ; background-size: contain; background-repeat: no-repeat;}
.paging > a.first {background-image: url('/img/icon_paging_first-75adfaa0a265ddeba6955f536c367f0c.gif');}
.paging > a.prev {background-image: url('/img/icon_paging_prev-495a94da9c569f68c99d4d4d3b3915ae.gif');}
.paging > a.next {background-image: url('/img/icon_paging_next-8b431ead7bbb8a09e41d736496b9fbaa.gif');}
.paging > a.last {background-image: url('/img/icon_paging_last-451715e315b1238f0c3125bede396d1c.gif');}
.paging ol {display: flex; gap: 4px;} 
.paging ol li a {
    border: 1px solid var(--border); font-size: 0.8125rem; text-align: center; background: #fff; color: var(--subText);
    border-radius: 50px; width: 40px; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; line-height: 1;
} 
.paging ol li a.this { background: var(--mainNavy); color: #fff;} 


/* board */
.bd_list {border-top: 1px solid var(--border);}
.bd_list > ul {}
.bd_list > ul > li {display: flex; gap: 5px; border-bottom: 1px solid var(--border);}
.bd_list > ul > li > div {
    display: flex; align-items: center; justify-content: center; text-align: center;
    font-size: 0.94rem; height: 50px; min-width: 0; flex-shrink: 0;
}
.bd_list .number {width: 60px;}
.bd_list .date {width: 100px;}
.bd_list .subject {flex: 1 0 0;}
.bd_list .bd_head {background: var(--mainNavy); color: #fff;}
.bd_list .bd_body .subject a {
    width: 100%; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.bd_view {display: flex; flex-direction: column; max-width: 1200px; margin: 0 auto;}
.bd_view_top {border-bottom: 1px solid var(--border); padding: 0 0 15px; display: flex; flex-direction: column; gap: 7px; }
.bd_view_top .title {font-size: 1.5rem; width: 100%;}
.bd_view_top .date {font-size: 0.875rem; color: #767676;}
.bd_view_file {display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--border);}
.bd_view_file .file {padding: 15px 15px 15px 0px;}
.bd_view_file .file .name {display: flex; gap: 5px; align-items: flex-start; font-size: 0.875rem;}
.bd_view_file .file .name:before {
    display: block; content: ""; margin-top: 2px; width: 18px; aspect-ratio: 1/1; background: url('/img/icon_file_gray-2fdbe4a0173b111ab67ecc3681b54302.png') no-repeat center center / contain; flex-shrink: 0;
}
.bd_view_file .file .size {color: var(--subText);}
.bd_view_cont {min-height: 300px; padding: 20px 0; border-bottom: 1px solid var(--border);}
.bd_view_bot {margin-top: 20px;}
.bd_view_bot .btnList {margin: 0 auto; max-width: 150px;}
.bd_view_reply {padding: 15px; border: 1px solid var(--border); border-radius: 10px;}
.bd_view_reply .tit {width: 100%; padding-bottom: 10px; border-bottom: 2px dashed var(--border); font-size: 1.125rem; font-weight: 700; }
.bd_view_reply .nae {padding-top: 15px;}



/* header */
#header {width: 100vw; height: 90px; position: fixed; top: 0; left: 0; z-index: 991;}
#header .inner {height: 100%; display: flex; align-items: center; gap: 20px; max-width: 1760px;}
#header .hamberg {display: none;}
#header .logo {font-size: 0;}
#header .logo img {height: 50px;}
#header .nav {display: flex; align-items: center; gap: 20px; flex: 1 0 0; height: 100%; margin-right: 215px;}
#header .side {display: flex; align-items: center; gap: 20px;}
#header .sidemenu {display: flex; align-items: center; gap: 10px;}
#header .sidemenu a.rd {
    display: flex; align-items: center; justify-content: center; font-size: 0.875rem; line-height: 1;
    padding: 8px 15px; color: #fff; background: rgba(255,255,255,.2); border-radius: 100px;
}
#header .menu {flex: 1 0 0; height: 100%; display: flex; align-items: center; justify-content: center; gap: 60px; position: relative;}
#header .menu > li {height: 100%; display: flex; align-items: center; gap: 40px; position: relative;}
#header .menu > li:last-child::after {display: none;}
#header .menu > li > a {font-size: 1.125rem; height: 100%; display: flex; align-items: center; line-height: 1; color: #fff;}
#header .submenu {
    position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
    min-width: 180px; width: max-content; background: rgba(0,0,0,.9); padding: 15px; transition: all .5s; opacity: 0; visibility: hidden; 
}
#header .submenu > div {display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid rgba(255,255,255,.2); padding-bottom: 10px; margin-bottom: 15px;}
#header .submenu > div:last-child {border-bottom: 0; padding-bottom: 0; margin-bottom: 0;}
#header .submenu > div > .gu {color: #fff; text-align: center; font-size: 0.875rem; background: var(--mainNavy); width: 80px; margin: 0 auto; border-radius: 3px;}
#header .submenu > div > a {display: block; color: #fff; font-size: 0.94rem; text-align: center;}
#header .submenu > div > a:hover {color: var(--mainSky);}
#header .menu > li:hover > .submenu {visibility: visible; opacity: 1;}
#header .menu > li:hover > .submenu::after {visibility: visible; opacity: 1;}

#header.active {position: fixed; background: rgba(0,0,0,.9);}


/* footer */
#footer {padding: 60px 0; width: 100%; overflow: hidden; background: #111; color: #fff;}
#footer .inner {display: flex; gap: 40px 60px; flex-wrap: wrap;}
#footer .logo {flex-shrink: 0;}
#footer .logo img {height: 50px;}
#footer .info { margin-right: auto;}
#footer .info .name {font-size: 1.125rem; line-height: 1;}
#footer .info .list {font-size: 0.94rem;  display: flex; flex-wrap: wrap; gap: 5px 10px;}
#footer .info .list p span {color: #aaa; margin-right: 5px;}
#footer .copy {font-size: 0.8125rem; color: #aaa; margin-top: 20px;}

/* sub */
.sub_bnn {background: url('/img/bg_sub_bnn-84755fc1958d5f513489bfcf12b8908c.webp') no-repeat center center / cover; width: 100%; height: 400px; position: relative;}
.sub_bnn::before {
    display: block; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: .5;
}
.sub_bnn .inner {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: relative; z-index: 1;}
.sub_bnn .tit {padding-top: 90px; text-align: center; color: #fff;}
.sub_bnn .tit .big {font-size: 2.5rem; font-weight: 700;}
.sub_bnn .tit .small {font-size: 1.125rem; margin-top: 10px;}

.sub_nav {margin-top: 50px;}
.sub_nav .list {display: flex; gap: 10px; align-items: center; justify-content: center;}
.sub_nav .list a {
    padding: 0 15px; background: #fff; color: #555; border: 1px solid var(--border); font-size: 1.125rem; height: 55px;
    display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 5px; width: 100%; max-width: 250px;
}
.sub_nav .list a.on {background: var(--mainNavy); border-color: var(--mainNavy); color: #fff;}

.body_tit {text-align: center; margin-bottom: 50px;}
.body_tit .big {font-size: 2.5rem; font-weight: 700;}
.body_tit .small {font-size: 1.125rem; margin-top: 10px; color: #555;}

.sec_tit {margin-bottom: 20px;}
.sec_tit .big {font-size: 1.75rem; font-weight: 700;}

.sectionLine {margin: 0 auto; width: 100%; height: 1px; background: var(--border); margin: 50px 0;}

@media screen and (max-width:1400px) {

    /* header */    
    #header {height: 60px;}
    #header .logo img {height: 36px;}
    #header .nav {margin-right: 140px;}
    #header .menu {gap: 40px;}
    #header .menu > li {gap: 20px;}
    #header .menu > li > a {font-size: 1rem;}
    #header .menu > li > a::after {height: 8px; top: calc(50% + 8px)}
    #header .submenu > div > a {font-size: 0.875rem;} 


}

@media screen and (max-width:1199px) {

    .inner {padding: 0 40px; width: 100%;}

    /* hedaer */  
    #header .inner {justify-content: space-between;}
    #header .hamberg {display: flex; align-items: center; justify-content: center; width: 24px; aspect-ratio: 1/1; text-indent: -9999px;}
    #header .hamberg span {display: block; width: 100%; height: 2px; background: #fff; position: relative; transition: all .5s;}
    #header .hamberg span::before,
    #header .hamberg span::after {display: block; content: ""; width: 100%; height: 2px; background: #fff; position: absolute; left: 0; transition: all .5s;}
    #header .hamberg span::before {top: -8px;}
    #header .hamberg span::after {top: 8px;}
    #header .hamberg span.on {background: rgba(255,255,255,0);}
    #header .hamberg span.on::after {transform: rotate(45deg); top: 0;}
    #header .hamberg span.on::before {transform: rotate(-45deg); top: 0;}

    #header .nav {
        position: fixed; top: 0; left: -300px; z-index: 992; width: 300px; height: 100vh; transition: all .5s;
        background: #111;  flex-direction: column; gap: 0; margin-right: 0;
    }
    #header .nav.on {left: 0;}
    #header .side {order: 1; width: 100%; padding: 0 20px; height: 60px; border-bottom: 1px solid #333; flex-shrink: 0;}
    #header .sidemenu {flex: 1 0 0;}
    #header .sidesrch {width: 32px; height: 32px; background-size: 20px auto;}
    #header .menu {order: 2; width: 100%; padding: 40px 20px; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 30px; overflow-y: auto;}
    #header .menu > li {height: auto; display: block; width: 100%;}
    #header .menu > li::after {display: none;}
    #header .menu > li > a {height: auto; width: 100%;}
    #header .menu > li > a::after {display: none;}
    #header .submenu {
        visibility: visible; opacity: 1; display: none; position: unset; transform: unset; transition: none;
        width: 100%; background: transparent; padding: 15px 0 0;
    }
    #header .submenu::after {display: none;}
    #header .submenu > div {flex-direction: column; gap: 10px;}
    #header .submenu > div > .gu {margin:0; font-size: 0.8125rem; width: 50px;}
    #header .submenu > div > a {text-align: left; color: #ccc;}
    #header .submenu > div > a::before {display: inline-block; content: "-"; margin-right: 4px;}

    /* sub */
    .sub_nav .list {gap: 5px;}
    .sub_nav .list a {padding: 0 5px; font-size: 0.94rem; height: 45px; max-width: 180px;}

}

@media screen and (max-width:899px) {

    /* padding · margin style*/
    .p_tb { padding:60px 0; } 
    .p_t { padding-top: 60px; } 
    .p_b { padding-bottom: 60px; }

    /* table */
    .tb_box td, .tb_box th {font-size: 0.875rem;}
    .tb_box .p::before {top: 8px;}
    .tb_box .pnae {font-size: 0.8125rem;}

    
    /* sub */
    .sub_bnn {height:300px;}
    .sub_bnn .tit {padding-top: 60px;}
    .sub_bnn .tit .big {font-size: 1.75rem;}
    .sub_bnn .tit .small {font-size: 1rem;}
    .sub_nav {margin-top: 30px;}

    .body_tit {margin-bottom: 30px;}
    .body_tit .big {font-size: 1.75rem; font-weight: 700;}
    .body_tit .small {font-size: 1rem; margin-top: 5px;}

}


@media screen and (max-width:599px) { 

    .inner {padding: 0 20px;}

    /* paging */
    .paging ol li a {font-size: 0.75rem; width: 32px;}

    /* board */
    .bd_list .number {width: 40px;}
    .bd_list .date {width: 90px;}
    .bd_list > ul > li > div {font-size: 0.8125rem;}

    /* header */
    #header .nav {width: calc(100vw - 60px); left: calc(-100vw - 60px);}

}