/* ----------- Common ----------- */
/* max-width: 768px */
@media only screen
and (max-width: 768px) {

    /* *******************************************************************
        hidden
    ******************************************************************* */
    .visible-xs {
        display: block !important;
    }
    .hidden-xs {
        display: none !important;
    }

    /* *******************************************************************
        layout
    ******************************************************************* */
    /* inner layout box */
    #wrap .inner-wrap {
        width: 100%;
        padding: 0 16px;
    }

    /* *******************************************************************
        mobile-nav
    ******************************************************************* */
    .mobile-nav {
        display: block !important;
        position: fixed;
        width: 100%;
        height: 60px;
        line-height: 60px;
        background-color: rgba(255,255,255,1);
        box-shadow: 0 2px 4px rgba(0,0,0,0.25);
        z-index: 100;
    }
    .btn-connect.login li a {
        display: block;
        width: 100%;
        height: 60px;
        line-height: 60px;
        text-align: center;
        font-size: 15px;
        color: #fff;
        background-color: #2c2c2c;
    }

    nav .dropdown-backdrop {
        display: none;
    }
    .drawer-open .drawer-overlay {
        z-index: 10;
    }

    /* logo */
    h1.logo {
        position: absolute;
        left: 20px;
        top: 10px;
    }
    h1.logo a img {
        height: 40px;
    }

    /* *******************************************************************
        drawer-nav
    ******************************************************************* */
    /* drawer */
    .drawer-overlay {
        background-color: rgba(0,0,0,0.75);
    }

    /* hanburger button */
    .mobile-nav .drawer-hamburger {
        width: 3rem;
        padding: 20px 1.5rem;
    }
    .drawer--right.drawer-open .drawer-hamburger {
        right: 24rem;
    }

    .drawer--right .drawer-nav {
        position: fixed;
        top: 0;
        right: -24rem;
        overflow: hidden;
        width: 24rem;
        height: 100%;
        color: #222;
        background-color: #323232;
        z-index: 2;
    }
    .drawer--right .drawer-nav .inner-wrap {
        position: relative;
    }

    /* drawer-nav > login-area */
    .drawer-nav .login-area {

    }

    /* drawer-nav > drawer-menu */
    .drawer-menu {
        background-color: #fff;
    }
    /* depth1 */
    .drawer-menu > li {
        position: relative;
        line-height: 1.1;
    }
    .drawer-menu-item {
        display: block;
        /*padding: 15px 30px 15px 20px;*/
        padding: 15px 10px;
        text-decoration: none;
        font-size: 15px;
        color: #333;
        border-bottom: 1px solid #dfdfdf;
    }
    .drawer-menu > li:last-child .drawer-menu-item {
        border-bottom: 0;
    }
    .drawer-dropdown .drawer-caret {
        position: absolute;
        right: 10px;
        top: 25px;
    }
    /* depth2 */
    .drawer-dropdown-menu-item {
        display: block;
        padding: 10px 20px 10px 30px;
        line-height: 1.1;
        font-size: 13px;
        color: #767676;
        border-bottom: 1px solid #dfdfdf;
        background-color: #eee;
    }

    /* drawer-nav > mobile-utility-area */
    .mobile-utility-area {
        padding: 0;
    }

    /* social-link */
    .social-link {
        width: 100%;
    }
    .social-link > li {
        float: left;
        width: 50%;

    }
    .social-link > li > a {
        display: block;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 13px;
        color: #fff;
        background-color: #126FE0;
    }
    .social-link > li.facebook > a {
        border-right: 1px solid #126FE0;
    }
    .social-link > li.instagram > a {
        border-left: 1px solid #126FE0;
    }

    /* *******************************************************************
        header
    ******************************************************************* */
    #header {
        display: none !important;
    }

    /* *******************************************************************
        container
    ******************************************************************* */
    #container {

    }

    /* *******************************************************************
        bottom-util-area
    ******************************************************************* */
    .bottom-util-area {
        width: 100%;
        height: 50px;
        background-color: rgba(0,0,0,0.45);
    }
    .bottom-util-area .inner-wrap {
        position: relative;
        height: 100px;
    }
    .bottom-util-area .inner-wrap ul {

    }
    .bottom-util-area .inner-wrap ul > li {
        display: inline-block;
        margin-right: 30px;
    }
    .bottom-util-area .inner-wrap ul > li > a {
        height: 50px;
        line-height: 50px;
        font-size: 13px;
        font-weight: 300;
        color: rgba(255,255,255,0.75);
    }

    /* *******************************************************************
        #footer
    ******************************************************************* */
    #footer {

    }

    /* .utility-area */
    #footer .utility-area .inner-wrap {
        display: flex;
        flex-flow: column wrap;
        justify-content: center;
        align-items: center;
        height: auto;
        padding: 0;
    }
    #footer .utility-area .inner-wrap .quick-link {
        display: flex;
        align-items: center;
        gap: 30px;
    }
    #footer .utility-area .inner-wrap .quick-link li {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 40px;
    }
    #footer .utility-area .inner-wrap .quick-link li a {
        font-size: 1.5rem;
        font-weight: 700;
        color: #c9ddfb;
    }
    #footer .utility-area .inner-wrap .quick-link li:first-child+li.divline {
        display: block;
        content: " ";
        width: 1px;
        height: 15px;
        background-color: #728ABE;
    }

    #footer .utility-area .inner-wrap .quick-button {
        display: flex;
        align-items: center;
        width: 100%;
        border-top: 1px solid #49515b;
        background-color: #3b434e;
    }
    #footer .utility-area .inner-wrap .quick-button li.related-organ {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 44px;
    }
    #footer .utility-area .inner-wrap .quick-button li.related-organ span.title {
        display: flex;
        justify-content: center;
        gap: 12px;
        color: #edf4fe;
    }
    #footer .utility-area .inner-wrap .quick-button li.related-organ span.title b {
        font-size: 1.5rem;
    }
    #footer .utility-area .inner-wrap .quick-button li.related-organ ul {
        display: none;
        position: absolute;
        left: 0;
        bottom: 45px;
        width: 100%;
    }
    #footer .utility-area .inner-wrap .quick-button li.related-organ ul li a {
        width: 100%;
        padding: 10px;
        line-height: 1.4;
        font-size: 1.4rem;
    }

    /* .address-area */
    #footer .address-area .inner-wrap {
        flex-flow: column wrap;
        justify-content: center;
        align-items: center;
        padding-top: 24px;
        padding-bottom: 40px;
    }
    #footer .address-area .inner-wrap .address-area {
        display: flex;
        flex-flow: column wrap;
        gap: 20px;
    }
    #footer .address-area .inner-wrap .address-area h1 {
        display: none;
    }
    #footer .address-area .inner-wrap .address-area .address {
        display: flex;
        flex-flow: column nowrap;
        gap: 10px;
        margin: 0;
    }
    #footer .address-area .inner-wrap .address-area .address address p {
        line-height: 2.6rem;
        text-align: center;
        font-size: 1.5rem;
        word-break: keep-all;
    }
    #footer .address-area .inner-wrap .address-area .address address p .divline {
        margin: 0 5px;
    }
    #footer .address-area .inner-wrap .address-area .address address ul {
        flex-flow: column nowrap;
        gap: 8px;
        margin: 20px 0 10px;
    }
    #footer .address-area .inner-wrap .address-area .address address ul li {
        line-height: 1.3;
        font-size: 1.4rem;
    }
    #footer .address-area .inner-wrap .address-area .address address ul li.divline {
        display: none;
    }
    #footer .address-area .inner-wrap .address-area .address .copyright {
        margin: 0;
        text-align: center;
        font-size: 1.3rem;
    }

    /* *******************************************************************
        ETC
    ******************************************************************* */
    /*개인정보처리방침*/
    .privacy-txt {
        font-weight: bold;
        color: #2556bd;
    }

}

/* ----------- Tablet ----------- */
/* Portrait and Landscape */
@media only screen
and (min-width: 768px)
and (max-width: 1024px) {

}

/* Portrait */
@media only screen
and (min-width: 768px)
and (max-width: 1024px)
and (orientation: portrait) {

}

/* Landscape */
@media only screen
and (min-width: 768px)
and (max-width: 1024px)
and (orientation: landscape) {

}

/* ----------- Phone ----------- */
/* max-width: 767px */
@media only screen
and (max-width: 767px) {

}

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

}

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


}

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

}