@charset "utf-8";
@import url("common.css");
.container {
    max-width: 1300px;
}
.swiper-pagination {
    width: 100%;
    position: static;
    margin-top: 1rem;
    font-size: 0;
}
.swiper-pagination-bullet {
    width: .75rem;
    height: .75rem;
    margin: 0 .5rem
}
.swiper-pagination-bullet-active {
    background-color: var(--primary)
}
/* -------------------
헤더                 |
------------------- */
/* #header */
header {
    background: var(--primary);
    color: #fff;
}
header h1 img {
    max-height: 5vw
}
header h1 {
    font-size: 1.875rem
}
header h1 a {
    display: flex;
    align-items: center;
    gap: var(--gap)
}
header .top-logo-area ul {display: flex;gap: var(--gap-sm); line-height: 1; color: rgba(255, 255, 255, 0.5); padding-top: .5rem}
header .top-logo-area li+li {border-left: 1px solid rgba(255, 255, 255, 0.3);padding-left: var(--gap-sm)}
header .top-logo-area {
    display: flex;
    height: 4.5rem;
    align-items: center;
    gap: var(--gap)
}
header .top-info {
    display: flex;
    gap: var(--gap);
    align-items: center; margin-left: auto
}
header .top-info .btn {
    padding: .25rem .5rem
}
header .top-info span {
    display: flex;
    gap: var(--gap-sm)
}
header .top-nav {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    font-size: 1rem;
    font-weight: 700;
}
header .top-nav a {
    color: #ffd600;
    text-decoration: none;
}
header .top-nav a:hover {
    text-decoration: underline;
}
header .top-nav .sep {
    color: rgba(255,255,255,0.5);
}
header #toggle-open {
    display: none
}
/* -------------------
푸터                 |
------------------- */
footer {
    height: 6rem; padding: 2rem 1rem; color: #fff;display: flex; gap: var(--gap); align-items: flex-end; line-height: 1
}
footer .logo {font-size: 0;}
footer small {
    display: block; margin-left: auto
}
/* -------------------
메인                 |
------------------- */
.body-index .side {display: none;}
.main-content {
    flex-grow: 1; min-height: calc(var(--full-height) - 10.5rem);
}
.main-content section {
    margin: 1.5rem auto;
}
.main-content section h1 {
    font-size: clamp(18px, 5vw, 24px);
    text-align: center;
    font-weight: 600;
    margin: 2rem auto;
}
.main-content .grid {
    margin: 1.5rem 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--col-min), 1fr));
    grid-auto-flow: dense;
    gap: var(--gap);
}
.main-content dt {
    font-size: 1.375rem;
    padding: 1rem;
    background-color: var(--primary);
    color: #fff
}
.main-content dl {
    border-radius: .5rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0;
    box-shadow: var(--shadow);
    background-color: #fff;
    border: 1px solid var(--border);
}
.main-content dd img {
    align-self: flex-end;
    max-height: clamp(30px, 6vw, 64px); filter: grayscale(); position: absolute;right: 1rem;bottom: 1rem
}
.main-content dd {
    padding: 1rem;
    display: flex;
    gap: var(gap-sm);
    justify-content: space-between; position: relative; min-height: 10rem;
    flex-grow: 1;
}
.main-content section+section {text-align: center; margin: 3rem auto}
.main-content section+section strong {font-size: 2.875rem; color: var(--primary); display: block}
.main-content section+section span {display: flex; align-items: center; justify-content: center; gap:var(--gap); font-size: 1.25rem; color: var(--primary80); line-height: 1.25rem; margin: .5rem 0 1rem}

/* -------------------
서브                  |
------------------- */
#content {
    display: flex; 
    background: url(../img/bg_body.png) no-repeat 50% 50% / cover; position: relative
}
#content.sub {background: #f2f3f9}
.sub-content {
    margin: 1rem auto;
    padding: 2rem 1.5rem;
    min-height: calc(var(--full-height) - 10.5rem);
    flex-grow: 1
}
.sub-content h2 {
    font-size: clamp(1.5rem, 7vw, 3rem);
    margin-bottom: 2rem;
    font-weight: 600;
    display: flex;
    gap: var(--gap-sm)
}
.sub-content h2 img {
    align-self: center;
    max-height: 1em
}
.sub-content h2 + p {
    margin: -1rem 0 2rem;
    line-height: 1.5;
    font-size: 1.062rem
}
.sub-content h2 + p .spot {
    font-weight: 600
}
.sub-content h3 {
    margin: 2rem 0 1rem;
    font-size: clamp(1.25rem, 5vw, 2.25rem);
    font-weight: bold;
    display: flex;
    gap: var(--gap-sm);
    align-items: center;
}
.sub-content h3:first-child {margin-top: 0}
.sub-content h3 img {
    align-self: center;
    max-height: 1em
}
aside {padding: 1.25rem 1rem; padding-top: 1.5rem; border-bottom: 3px solid var(--primary80); display: flex; justify-content: space-between; align-items: center}
aside h2 {font-size: clamp(1.25rem, 4vw, 1.5rem); font-weight: 500}

/* 로그인 */
.body-login #toggle-open {display: none;}
.login .sub-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 6.25rem) 1rem;
    max-width: 580px;
}
.login h2 {
    text-align: center;
    justify-content: center
}
.login h2 + p {
    text-align: center;
}
.login fieldset {
    background-color: #fff;
    border-radius: .25rem;
    padding: 2rem clamp(2rem, 5vw, 6.25rem) 2.5rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border)
}
.login legend {
    display: none
}
.login legend {
    display: none
}
.login .form-row b {font-size: 1.25rem}

/* side */
.side {
    font-size: .937rem;
    width: 290px;
    background-color: #fff;
    border-radius: var(--radius-sm); box-shadow: var(--shadow);
    flex-shrink: 0;
    margin: 1rem; border: 1px solid var(--border)
}
.side a {display: block; position: relative}
.side li ul {display: none}
.side li.active>ul {display: block}
.side .inner>ul>li>a {padding: 1.25rem 1.5rem;padding-left: 2.5rem;background: url(../img/bul_side.png) no-repeat 1.25rem 49%; font-weight: 500;border-bottom: 1px solid vaR(--border)}
.side .inner>ul>li.has-sub>a:after {content: "\F4FE";color: var(--gray); font-family: bootstrap-icons; position: absolute;right: 1.25rem;top: 50%;transform: translate(0, -50%); font-size: 1.25rem;}
.side .inner>ul>li.active.has-sub>a:after {content: "\F2EA";}
.side .inner>ul>li>ul {padding: .5rem 1rem 1rem; border-bottom: 1px solid var(--border)}
.side .inner>ul>li>ul>li>a {padding: .75rem; border-radius: var(--radius-sm); position: relative}
.side .inner>ul>li>ul>li.active.has-sub>a:after {content: "\F2EA";}
.side a:hover {color: var(--primary80)}
.side .inner>ul>li>ul>li.active>a {background: var(--bg); font-weight: 600}
.side .inner>ul>li>ul>li.has-sub>a:after {content: "\F4FE";color: var(--gray); font-family: bootstrap-icons; position: absolute;right: .75rem;top: 50%;transform: translate(0, -50%); font-size: 1.25rem;}
.side ul ul ul li.active a {color: var(--spot)}
.side ul ul ul {padding: 0 1rem}
.side ul ul ul li {margin-top: .5rem}
.side ul ul ul li a {padding-left: 1rem}
.side ul ul ul li a:before {content: "";width: 6px;height: 6px; border-radius: 50%;background: var(--gray); position: absolute; left: 0;top: 50%; transform: translate(0, -50%)}
.side + .sub-content {
    background-color: #fff;
    margin: 1rem; margin-left: 0;
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border);
    min-height: calc(var(--full-height) - 23rem)
}
.side .btn {
    display: none; position: absolute; right: 1rem; top: 1rem; font-size: 1.875rem; color: #fff; z-index: 20
}

/*board*/
.board-list .table {text-align: center}
.board-list th {background: var(--bg)}
.board-list td.title {text-align: left}
.board-search {display: flex; gap: var(--gap-sm); max-width: 480px; margin: 1.5rem auto; position: relative}
.board-search select {width: 32%; flex-shrink: 0;}
.board-search .form-control {padding-right: 2.5rem}
.board-search .btn {position: absolute;top: 0;height: 100%;right: 1rem; color: var(--gray)}
.btns {margin: 1rem 0;justify-content: flex-end; display: flex; gap: var(--gap-xs)}
.btns .btn {font-size: .937rem; padding: .5rem .7rem}
.board-view dt {border-bottom: 1px solid var(--border); padding: 1rem; font-size: clamp(1.25rem, 3vw, 1.5rem); background: var(--bg); border-top: 2px solid var(--primary)}
.board-view dd {border-bottom: 1px solid var(--border); padding: 2rem;}
.board-view dd.info {display: flex; padding: 1rem}
.board-view dd.info b {margin-right: auto;}
.related {box-shadow: var(--shadow); background: #fff; border-radius: var(--radius-sm); padding: 1rem; display: flex; border: 1px solid var(--border); color: var(--primary80)}
.related a {margin-left: auto;word-break: break-all}
.reply {}
.reply ul {}
.reply li {display: flex; align-items: center; gap: var(--gap); border-bottom: 1px solid var(--border);padding: 1.5rem}
.reply .img {width: 3.75rem;height: 3.75rem;}
.reply .img img {width: 100%; height: 100%; aspect-ratio: 1 / 1;object-fit: cover}
.reply .name b {display: block}
.reply .set {margin-left: auto; display: flex; gap: var(--gap-sm); font-size: .875rem; line-height: 1}
.reply .set a {display: inline-flex; gap: var(--gap-xs)}
.reply .set a .bi {color: var(--gray)}
.reply .set a:last-child {padding-left: var(--gap-xs);border-left: 1px solid var(--border)}
.write {margin-top: 1.5rem}
.write .form-control {background: var(--bg)}

@media all and (max-width: 992px) {
    header .top-info span {
        display: none
    }
    header #toggle-open {
        display: block
    }
    #content.sub {
        display: block; padding: 1rem
    }
	.body-index .side {display: block;}
    .side {
       visibility: hidden; overflow: hidden;position: fixed; left: 0;top: 0;width: 100%; height: 100%; margin: 0; z-index: 90; border-radius: 0;
        overflow-y: auto; background: rgba(31, 87, 149, 0.72)
    }
    .side .btn {display: block}
    .side .inner {height: 100%; background: #fff; max-width: 280px; margin-left: -100%; transition: all 0.3s ease}
    .open .side {visibility: visible; overflow: visible}
    .open .side .inner {margin-left: 0}
    .side + .sub-content {margin: 0}
}
@media all and (max-width: 575px) {
    header h1 {
        font-size: 1.375rem;
    }
    header h1 a {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px
    }
    
    aside {flex-direction: column; align-items: flex-start}
    aside h2 {margin-bottom: .5rem}
    
    /*board*/
    .board-list .table {text-align: left}
    .board-list .table, .board-list .table * {display: block}
    .board-list .table thead {display: none}
    .board-list .table tr {border-top: 1px solid var(--border); padding: 1rem}
    .board-list .table tr:hover {background: var(--bg)}
    .board-list .table td {display: inline-block;  border: 0; padding: 0 2px}
    .board-list .table td.no, .board-list .table td.hit {display: none}
    .board-list .table td.date {color: var(--gray)}
    .board-list .table td.cate {display: block; color: var(--primary)}
    .board-list .table td.title {display: block;}
    .related {flex-direction: column;}
    .reply li {flex-wrap: wrap;padding-left: .5rem;padding-right: .5rem;}
    .reply .set {margin: 0;}
    
    footer {flex-direction: column; height: auto; align-items: flex-start; line-height: 1.4; font-size: .937rem}
    footer small {margin-left: 0; font-size: 100%}
}

/* 모바일 브라우저 전용 */
.is-mobile .main-content .bullet li {padding-top: .5rem; padding-bottom: .5rem}


#page {}
#page header {background: var(--primary); padding: 1.5rem 2rem; font-size: 1.65rem; font-weight: bold;}
#page .inner {padding: 3rem 2rem;}
#page .btn.line {width: 100%; white-space:normal;word-break: break-all; box-shadow: var(--shadow); text-align: left; padding: 1.25rem; padding-right: 3rem;margin: .5rem 0;background: url(../img/down.png) no-repeat 95% 50%;}
#page h2 {margin-bottom: 1rem;}
#page h2 img {max-width: 14rem;}
#page .inner~.inner {border-top: .5rem solid #f1f4f6;}
#page .row:last-child {margin-bottom: 0;}
#page .list li {border-top: 1px solid var(--border); padding: 1.5rem 0;}
#page .list li b {font-size: 1.25rem; color:var(--primary); display: block; margin-bottom: 1rem;}
#page a[href] {color: var(--primary80);}
#page .badge {font-size: 1.125rem;background: var(--primary80); color:#fff; padding: .75rem 1.5rem; border-radius: 3rem; margin-top: 1.5rem;}
#page .qr {max-width: 450px; margin: 0 auto; padding: 0 1.5rem; display: flex; flex-direction: column;; align-items: center; justify-content: center; height: 80vh;}
#page .qr .input-group {gap: var(--gap-sm);}
#page .qr img {max-width: 8rem;}
#page .movie {padding: 1.5rem; text-align: center;;}
#page .movie p {margin-bottom: 1rem;}
#page .movie .frame {width: 100%; max-width: 640px; margin: 0 auto;;}
#page .movie .frame video {aspect-ratio: 1.5 / 1;width: 100%;;}