/* ==================================================================================
    반응형 스타일 - 공통
================================================================================== */

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



}


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

    /* *******************************************************************
        #header
    ******************************************************************* */
    /****************************
        gnb
    ****************************/
    .gnb-area .inner-wrap {
        height: 110px;
    }

    /* logo */
    .gnb-area .inner-wrap .logo a strong {
        font-size: 32px;
    }
    .gnb-area .inner-wrap .logo a small {
        line-height: 16px;
        font-size: 12px;
    }

    /* .gnb */
    .gnb-area .inner-wrap .gnb > ul > li.depth1 > a {
        height: 110px;
        font-size: 22px;
    }

    /* sub-menu */
    .gnb-area .bg {
        top: 111px;
    }
    .gnb-area .inner-wrap .gnb > ul li.depth1 > ul.depth2 {
        top: 111px;
    }

    /* *******************************************************************
        #footer
    ******************************************************************* */
    #footer {
        padding: 44px 0;
    }

    /* copyright-area */
    #footer .inner-wrap .copyright-area {
        gap: 80px;
    }

    /* copyright-area : logo */
    #footer .inner-wrap .copyright-area .logo a {
        gap: 4px;
    }
    #footer .inner-wrap .copyright-area .logo a strong {
        font-size: 32px;
    }
    #footer .inner-wrap .copyright-area .logo a small {
        line-height: 18px;
        font-size: 12px;
    }

    /* copyright-area : info-area */
    #footer .inner-wrap .copyright-area .info-area {
        gap: 24px;
    }
    #footer .inner-wrap .copyright-area .info-area address {
        gap: 7px;
    }
    #footer .inner-wrap .copyright-area .info-area address p.title {
        font-size: 17px;
    }
    #footer .inner-wrap .copyright-area .info-area address ul {
        gap: 16px;
    }
    #footer .inner-wrap .copyright-area .info-area address ul li {
        font-size: 15px;
    }
    #footer .inner-wrap .copyright-area .info-area p.copyright {
        font-size: 13px;
    }
    #footer .inner-wrap .copyright-area .info-area p.copyright b {
        font-weight: 700;
        color: #B8CEFF;
    }

    /* utility */
    #footer .inner-wrap .utility {
        gap: 16px;
    }
    #footer .inner-wrap .utility li a {
        font-size: 15px;
    }

}


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



}

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

    /* *******************************************************************
        #header
    ******************************************************************* */
    /****************************
        gnb
    ****************************/
    .gnb-area .inner-wrap {
        height: 100px;
    }

    /* logo */
    .gnb-area .inner-wrap .logo a strong {
        font-size: 28px;
    }
    .gnb-area .inner-wrap .logo a small {
        line-height: 14px;
        font-size: 11px;
        letter-spacing: -0.1px;
    }

    /* .gnb */
    .gnb-area .inner-wrap .gnb > ul > li.depth1 > a {
        height: 100px;
        padding: 0 16px;
        font-size: 20px;
    }

    /* sub-menu */
    .gnb-area .bg {
        top: 101px;
    }
    .gnb-area.hover .bg {
        height: 240px;
    }
    .gnb-area .inner-wrap .gnb > ul li.depth1 > ul.depth2 {
        top: 101px;
    }
    .gnb-area.hover .inner-wrap .gnb > ul li.depth1 ul.depth2 {
        height: 239px;
    }

    .gnb-area .inner-wrap .gnb > ul li.depth1 ul.depth2 li a {
        line-height: 1.4;
        padding: 12px 10px;
        font-size: 14px;
    }

    /* *******************************************************************
        #footer
    ******************************************************************* */
    /* copyright-area */
    #footer .inner-wrap .copyright-area {
        gap: 60px;
    }

    /* copyright-area : logo */
    #footer .inner-wrap .copyright-area .logo a {
        gap: 4px;
    }
    #footer .inner-wrap .copyright-area .logo a strong {
        font-size: 28px;
    }
    #footer .inner-wrap .copyright-area .logo a small {
        line-height: 16px;
        font-size: 11px;
        letter-spacing: -0.1px;
    }

    /* copyright-area : info-area */
    #footer .inner-wrap .copyright-area .info-area {
        gap: 16px;
    }

    /* utility */
    #footer .inner-wrap .utility {
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: flex-end;
        gap: 5px;
    }

}


/* ==================================================================================
    반응형 스타일 - 모바일 메뉴
================================================================================== */
/* 960px - 모바일 메뉴 시작 */
@media screen and (max-width: 960px) {

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

    /*******************
        mobile-nav
    *******************/
    .mobile-nav {
        display: block !important;
        position: fixed;
        width: 100%;
        height: 64px;
        line-height: 64px;
        background-color: rgba(255, 255, 255, 1);
        box-shadow: 0 2px 7px rgba(0,0,0,0.25);
        z-index: 100;
    }

    /* logo-area */
    .mobile-nav .header-area {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        height: 64px;
    }
    .mobile-nav h1.logo {
        padding: 0 16px;
    }
    .mobile-nav h1.logo a {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;

        font-family: 'Isamanru';
    }
    .mobile-nav h1.logo a strong {
        line-height: 1;
        font-size: 36px;
        font-weight: 700;
        background-image: linear-gradient(to right, #102A54, #B163DF);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
    }
    .mobile-nav h1.logo a small {
        line-height: 16px;
        font-size: 14px;
        font-weight: 300;
        letter-spacing: 0;
        background-image: linear-gradient(to right, #102A54, #B163DF);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
    }

    /* drawer */
    .drawer-overlay {
        background-color: rgba(0,0,0,0.75);
    }
    nav .dropdown-backdrop {
        display: none;
    }
    .drawer-open .drawer-overlay {
        z-index: 10;
    }


    /* btn-connect */
    .btn-connect {
        width: 100%;
        height: 50px;
    }
    /* login */
    .btn-connect.login li {
        float: left;
        width: 50%;
    }
    .btn-connect.login li a {
        display: block;
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 13px;
        color: #eee;
        border-right: 1px solid #565656;
        background-color: #424242;
    }
    .btn-connect.login li:last-child a {
        border-right: 0;
        border-left: 1px solid #323232;
    }
    .btn-connect.login li a:hover {
        color: #fff;
        background-image: linear-gradient(to right, #102A54, #B163DF);
    }
    .btn-connect.login li a i {
        margin: 0 5px 0 0;
    }

    /* logout */
    .btn-connect.logout li {
        display: block;
        width: 100%;
        height: 50px;
        padding: 0 0 0 30px;
        line-height: 50px;
        text-align: left;
        font-size: 13px;
        color: #fff;
        border-right: 0;
        background-color: #424242;
    }
    .btn-connect.logout li b {
        color: #fff;
    }
    .btn-connect.logout li a {
        margin-left: 10px;
        font-size: 10px;
        color: #e0effc;
    }
    .btn-connect.logout li a:hover {
        color: #fff;
    }
    .btn-connect.logout li i {
        margin: 0 5px 0 0;
    }

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

    /* drawer-nav */
    .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 > drawer-menu */
    .drawer-menu {
        background-color: #fff;
    }
    /* depth1 */
    .drawer-menu > li {
        position: relative;
        line-height: 1.1;
    }
    .drawer-menu-item {
        display: block;
        padding: 15px 10px;
        text-decoration: none;
        font-size: 15px;
        font-weight: 900;
        color: #000;
        border-bottom: 1px solid #dfdfdf;
    }
    .drawer-menu-item:hover {
        color: #B163DF;
    }
    .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: 15px 20px 15px 20px;
        line-height: 1.1;
        font-size: 13px;
        font-weight: 800;
        color: #000;
        border-bottom: 1px solid #EFEFFE;
        background-color: #fafaff;
    }
    .drawer-dropdown-menu-item:hover {
        color: #B163DF;
        background-color: #fafaff;
    }

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

    /* d-day */
    .mobile-utility-area .d-days {
        padding: 25px 0;
        position: static;
        width: 100%;
        margin-top: 0;
        text-align: center;
        background-image: linear-gradient(to right, #102A54, #B163DF);
    }
    .mobile-utility-area .d-days .today {
        padding: 0 0 10px;
        line-height: 1.1;
        font-size: 14px;
        color: #fff;
    }
    .mobile-utility-area .d-days .title {
        /*line-height: 100%;*/
        margin: 0 0 15px;
        line-height: 1.4;
        font-size: 13px;
        font-weight: 300;
        color: #fff;
    }
    .mobile-utility-area .d-days .d-date {
        line-height: 100%;
        font-size: 42px;
        font-weight: 700;
        color: #fff;
    }

    /*******************
        header
    *******************/
    #wrap {
        padding-top: 64px;
    }
    #wrap .inner-wrap {
        padding: 0 16px;
    }

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

    /****************************
        gnb
    ****************************/
    .gnb-area {
        display: none;
    }

    /* *******************************************************************
        #footer
    ******************************************************************* */
    #footer {
        padding: 32px 0 0;
    }
    #footer .inner-wrap {
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        gap: 32px;

        padding: 0;
    }

    /* copyright-area */
    #footer .inner-wrap .copyright-area {
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        gap: 32px;

        width: 100%;
    }

    /* copyright-area : logo */
    #footer .inner-wrap .copyright-area .logo {
        display: none;
    }

    /* copyright-area : info-area */
    #footer .inner-wrap .copyright-area .info-area {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        gap: 32px;

        width: 100%;
    }
    #footer .inner-wrap .copyright-area .info-area address {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        gap: 12px;
    }
    #footer .inner-wrap .copyright-area .info-area address p.title {
        font-size: 17px;
    }
    #footer .inner-wrap .copyright-area .info-area address ul {
        gap: 16px;
    }
    #footer .inner-wrap .copyright-area .info-area address ul li {
        font-size: 15px;
    }
    #footer .inner-wrap .copyright-area .info-area p.copyright {
        font-size: 14px;
    }

    /* utility */
    #footer .inner-wrap .utility {
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        gap: 32px;

        width: 100%;
        padding: 12px 0;
        background-color: #141934;
    }
    #footer .inner-wrap .utility li a {
        font-size: 15px;
    }
    #footer .inner-wrap .utility li a:hover {
        color: #fff;
    }

}

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

    /*******************
        mobile-nav
    *******************/
    .mobile-nav h1.logo a strong {
        font-size: 32px;
    }
    .mobile-nav h1.logo a small {
        display: none;
    }

}

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

    /* *******************************************************************
        #footer
    ******************************************************************* */
    /* copyright-area : info-area */
    #footer .inner-wrap .copyright-area .info-area address ul li {
        font-size: 14px;
    }
    #footer .inner-wrap .copyright-area .info-area p.copyright {
        font-size: 12px;
    }

}

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

}

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

    /*******************
        mobile-nav
    *******************/
    .mobile-nav h1.logo a strong {
        font-size: 28px;
    }

    /* *******************************************************************
        #footer
    ******************************************************************* */
    /* copyright-area : info-area */
    #footer .inner-wrap .copyright-area .info-area address p.title {
        font-size: 15px;
    }
    #footer .inner-wrap .copyright-area .info-area address ul li {
        font-size: 13px;
    }
    #footer .inner-wrap .copyright-area .info-area p.copyright {
        text-align: center;
    }
    #footer .inner-wrap .copyright-area .info-area p.copyright b {
        display: block;
    }

    /* utility */
    #footer .inner-wrap .utility {
        gap: 16px;
    }
    #footer .inner-wrap .utility li a {
        font-size: 13px;
    }

}

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



}

@media (min-width: 768px) {

    .drawer .container {
        width: auto;
    }

}