@charset "utf-8";

/* -----------------------------------------------------------------------------
// 반응형 스타일
----------------------------------------------------------------------------- */

/* 1600px */
@media screen and (max-width: 1600px) {



}

/* 1500px */
@media screen and (max-width: 1500px) {



}

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

    #wrap.sub #container .inner-wrap {
        gap: 64px;
        transition: gap 0.25s;
    }
    #wrap.sub #container .inner-wrap .snb-area .snb-title strong {
        font-size: 2.4rem;
    }
    #wrap.sub #container .inner-wrap .snb-area ul.snb > li > a {
        height: 54px;
    }
    #wrap.sub #container .inner-wrap .snb-area ul.snb > li > a b {
        font-size: 1.6rem;
    }
    #wrap.sub #container .inner-wrap .snb-area ul.snb > li ul.sub-nav li a {
        height: 38px;
        font-size: 1.4rem;
    }

}

/* 1300px */
@media screen and (max-width: 1300px) {

    .article .section .tb-basic thead th {
        font-size: 1.6rem;
    }
    .article .section .tb-basic tbody th {
        font-size: 1.6rem;
    }
    .article .section .tb-basic tbody td {
        font-size: 1.6rem;
    }
    .article {
        font-size: 1.6rem;
    }

}

/* 1200px */
@media screen and (max-width: 1200px) {

    #wrap.sub #container .inner-wrap {
        gap: 44px;
    }
    #wrap.sub #container .inner-wrap .snb-area .snb-title strong {
        font-size: 2.1rem;
    }
    #wrap.sub #container .inner-wrap .snb-area ul.snb > li > a b {
        font-size: 1.5rem;
    }

}

/* 1100px */
@media screen and (max-width: 1100px) {

    #container-event .nav-pills li a {
        font-size: 1.5rem;
    }

    #wrap.sub #container .inner-wrap .snb-area .snb-title strong {
        font-size: 1.9rem;
    }

    #wrap.sub #container .inner-wrap .snb-area ul.snb > li > a b {
        font-size: 1.4rem;
    }

    #wrap.sub #container .inner-wrap .snb-area ul.snb > li ul.sub-nav li a {
        font-size: 1.3rem;
    }

}

/* 960px - 모바일 메뉴 시작 */
@media screen and (max-width: 960px) {

    #wrap.sub #container {
        padding: 0 0 60px;
    }
    #wrap.sub #container .inner-wrap {
        justify-content: center;
        align-items: center;
    }
    #wrap.sub #container .inner-wrap .snb-area {
        display: none;
    }
    #wrap.sub #container .inner-wrap #contents {
        width: 100%;
        min-width: unset;
    }
    #wrap.sub #container .inner-wrap #contents .breadcrumb-area {
        padding: 20px 0;
    }
    #wrap.sub #container .inner-wrap #contents .breadcrumb-area ul.breadcrumb {
        gap: 5px;
    }
    #wrap.sub #container .inner-wrap #contents .breadcrumb-area ul.breadcrumb li {
        font-size: 1.4rem;
    }
    #wrap.sub
    #container
    .inner-wrap
    #contents
    .breadcrumb-area
    ul.breadcrumb
    li.home
    a {
        width: 24px;
        height: 24px;
        border-radius: 24px;
    }
    #wrap.sub
    #container
    .inner-wrap
    #contents
    .breadcrumb-area
    ul.breadcrumb
    li.home
    a
    .feather {
        width: 14px;
        height: 14px;
    }
    #wrap.sub
    #container
    .inner-wrap
    #contents
    .breadcrumb-area
    ul.breadcrumb
    li.arrow
    .feather {
        width: 18px;
        height: 18px;
    }
    #wrap.sub
    #container
    .inner-wrap
    #contents
    .breadcrumb-area
    ul.breadcrumb
    li.depth3 {
        max-width: 150px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    #wrap.sub #container .inner-wrap #contents .title-area {
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: center;
        gap: 16px;
        margin: 0 0 44px;
        padding: 24px 0;
        background: url("/assets/images/common/pattern_diagonal_line.png") left top
        repeat-x,
        url("/assets/images/common/pattern_diagonal_line.png") left bottom
        repeat-x;
    }
    #wrap.sub #container .inner-wrap #contents .title-area h2 {
        margin: 0;
        line-height: 1.5;
        text-align: center;
        font-size: 3.2rem;
        word-break: keep-all;
    }
    #wrap.sub #container .inner-wrap #contents .title-area ul.btn-quick {
        gap: 10px;
    }
    #wrap.sub #container .inner-wrap #contents .title-area ul.btn-quick li a {
        width: 32px;
        height: 32px;
        border-radius: 32px;
    }
    #wrap.sub
    #container
    .inner-wrap
    #contents
    .title-area
    ul.btn-quick
    li
    a
    .feather {
        width: 18px;
        height: 18px;
    }
    #wrap.sub #container .inner-wrap #contents .contents .article {
        gap: 40px;
        min-height: 320px;
        line-height: 1.58;
        font-size: 1.5rem;
        font-weight: 700;
    }
    #wrap.sub #container .inner-wrap #contents .contents .article .section h3 {
        font-size: 2.1rem;
    }
    #wrap.sub #container .inner-wrap #contents .contents .article .section h4 {
        font-size: 1.8rem;
    }
    #wrap.sub #container .inner-wrap #contents .contents .article .section h5 {
        font-size: 1.5rem;
    }
    #wrap.sub #container .inner-wrap #contents .contents .article .section p {
        margin: 0 0 16px;
    }
    #wrap.sub
    #container
    .inner-wrap
    #contents
    .contents
    .article
    .section
    .highlight-box {
        gap: 16px;
        margin: 0 0 24px;
        padding: 16px;
    }
    #wrap.sub
    #container
    .inner-wrap
    #contents
    .contents
    .article
    .section
    .highlight-box
    p {
        margin: 0;
    }
    #wrap.sub
    #container
    .inner-wrap
    #contents
    .contents
    .article
    .section
    .highlight-box.column {
        gap: 16px;
        margin: 0 0 24px;
    }
    #wrap.sub
    #container
    .inner-wrap
    #contents
    .contents
    .article
    .section
    .highlight-box
    ul
    li {
        margin: 0 0 5px;
        font-size: 1.5rem;
    }
    #wrap.sub
    #container
    .inner-wrap
    #contents
    .contents
    .article
    .section
    .highlight-box
    ul
    li:last-child {
        margin: 0;
    }
    #wrap.sub
    #container
    .inner-wrap
    #contents
    .contents
    .article
    .section
    .wrap-area {
        flex-direction: column;
        justify-content: flex-start;
        gap: 16px;
    }
    #wrap.sub
    #container
    .inner-wrap
    #contents
    .contents
    .article
    .section
    .tb-basic
    thead
    th {
        padding: 7px 10px;
        font-size: 1.4rem;
    }
    #wrap.sub
    #container
    .inner-wrap
    #contents
    .contents
    .article
    .section
    .tb-basic
    tbody
    th {
        padding: 10px;
        font-size: 1.4rem;
    }
    #wrap.sub
    #container
    .inner-wrap
    #contents
    .contents
    .article
    .section
    .tb-basic
    tbody
    td {
        padding: 10px;
        font-size: 1.4rem;
    }
    #wrap.sub
    #container
    .inner-wrap
    #contents
    .contents
    .article
    .section
    ul.table-list
    li
    .date {
        width: 40%;
        padding: 8px 12px;
        font-size: 1.4rem;
    }
    #wrap.sub
    #container
    .inner-wrap
    #contents
    .contents
    .article
    .section
    ul.table-list
    li
    .txt {
        width: 60%;
        padding: 8px 12px;
        font-size: 1.4rem;
    }
    #wrap.sub
    #container
    .inner-wrap
    #contents
    .contents
    .article
    .section
    .btn-area {
        gap: 12px;
        padding: 24px 0;
    }
    #wrap.sub
    #container
    .inner-wrap
    #contents
    .contents
    .article
    .section
    .download-area {
        padding: 16px;
    }
    #wrap.sub
    #container
    .inner-wrap
    #contents
    .contents
    .article
    .section
    .download-area
    .download-list {
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        align-items: center;
        gap: 5px;
    }
    #wrap.sub
    #container
    .inner-wrap
    #contents
    .contents
    .article
    .section
    .download-area
    .download-list
    li {
        width: 100%;
        margin: 0;
        padding: 0 5px;
    }
    #wrap.sub
    #container
    .inner-wrap
    #contents
    .contents
    .article
    .section
    .download-area
    .download-list
    li
    .btn-download {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 7px;
        padding: 10px;
        border-radius: 4px;
    }
    #wrap.sub
    #container
    .inner-wrap
    #contents
    .contents
    .article
    .section
    .download-area
    .download-list
    li
    .btn-download
    i,
    #wrap.sub
    #container
    .inner-wrap
    #contents
    .contents
    .article
    .section
    .download-area
    .download-list
    li
    .btn-download
    b {
        font-size: 1.3rem;
    }
    #wrap.sub
    #container
    .inner-wrap
    #contents
    .contents
    .article
    .section
    .download-list-area {
        padding: 12px;
        border: 4px solid #f7f7f7;
    }
    #wrap.sub
    #container
    .inner-wrap
    #contents
    .contents
    .article
    .section
    .download-list-area
    .download-list {
        gap: 10px;
    }
    #wrap.sub
    #container
    .inner-wrap
    #contents
    .contents
    .article
    .section
    .download-list-area
    .download-list
    li {
        flex-direction: column;
        font-size: 1.4rem;
        gap: 10px;
    }
    #wrap.sub
    #container
    .inner-wrap
    #contents
    .contents
    .article
    .section
    .download-list-area
    .download-list
    li
    b
    .feather {
        display: none;
    }
    #wrap.sub
    #container
    .inner-wrap
    #contents
    .contents
    .article
    .section
    .download-list-area
    .download-list
    li
    b
    span {
        text-align: center;
    }
    #wrap.sub
    #container
    .inner-wrap
    #contents
    .contents
    .article
    .section
    .download-list-area
    .download-list
    li
    .btn-download {
        width: 100%;
        gap: 7px;
        padding: 10px 7px;
    }
    #wrap.sub
    #container
    .inner-wrap
    #contents
    .contents
    .article
    .section
    .download-list-area
    .download-list
    li
    .btn-download
    i {
        font-size: 1.2rem;
    }
    #wrap.sub
    #container
    .inner-wrap
    #contents
    .contents
    .article
    .section
    .download-list-area
    .download-list
    li
    .btn-download
    span {
        font-size: 1.2rem;
    }

}

/* phone ~ 768px */
@media screen and (max-width: 768px) {

    .article .section .nav-pills {
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: center;
    }
    .article .section .nav-pills li {
        width: 100%;
    }
    .article .section .nav-pills li a {
        display: block;
        width: 100%;
        height: auto;
        padding: 7px 10px !important;
        font-size: 1.5rem !important;
        border-radius: 2px;
    }
    .article .section .nav-pills li a.nav-link.multi {
        padding: 7px 10px !important;
        font-size: 1.5rem !important;
    }
    .article .section .nav-pills li:first-child a {
        border-radius: 2px;
    }
    .article .section .nav-pills li:last-child a {
        border-radius: 2px;
    }
    .article .section .tab-sub .nav.nav-tabs {
        margin: 0 0 24px;
        border-bottom: 0;
        gap: 3px;
    }
    .article .section .tab-sub .nav.nav-tabs li {
        flex-basis: 49%;
    }
    .article .section .tab-sub .nav.nav-tabs li a {
        padding: 8px 16px;
        font-size: 1.4rem;
        border: 1px solid #dfdfdf;
        border-radius: 4px;
    }
    .article .section .tab-sub .nav.nav-tabs li a.active {
        border: 1px solid #dfdfdf;
        border-top: 2px solid #b65740;
    }
    .article .section .tab-sub .tab-content .tab-pane {
        font-size: 1.4rem;
    }
    .tooltip-area {
        margin: 0;
        padding: 2px 15px 3px 25px;
    }
    .tooltip-area li {
        margin: 0;
        text-align: left;
        font-size: 1.3rem;
        font-weight: 700;
        word-break: keep-all;
    }
    .tooltip-area:first-child {
        margin-top: 10px;
    }
    .tooltip-area:last-child {
        margin-bottom: 10px;
    }
    .article .dt-container .dt-length {
        margin: 0 0 5px;
    }
    .article .dt-container .dt-search {
        margin: 0 0 10px;
    }
    .article .dt-container .dt-info {
        margin: 10px 0;
    }

}

/* phone ~ 640px */
@media screen and (max-width: 640px) {



}

/* phone ~ 480px */
@media screen and (max-width: 480px) {



}

/* phone ~ 420px */
@media screen and (max-width: 420px) {



}

/* phone ~ 360px */
@media screen and (max-width: 360px) {



}

/* phone ~ 320px */
@media screen and (max-width: 320px) {



}