@charset "UTF-8";

/* app 버전 */
@media (min-width: 501px) {
    .app-ver {display: none !important;}
    .app-top {display: none;}
}

@media (max-width: 500px) {
    header .mobile-ver {display: none !important;}

    /*top*/
    .app-top {display: flex; align-items: center; padding: 18px 0; border-bottom: 1px solid rgba(112, 112, 112, 0.3); margin-bottom: 20px;}
    .app-top a {font-size: 18px;}
    .app-top .back-btn span {font-size: 20px; font-family: cursive; margin-right: 10px;}


    .app-none {display: none !important;}
    .app-ver {display: block !important;}
    .app-ver .hd-top .page-tit {width: fit-content; max-width: 70%; height: 100%; font-size: 20px; font-weight: 300; display: flex; align-items: center;}
    .app-ver .hd-top .page-tit a {font-size: 20px; font-weight: 300; color: #424550; display: flex; align-items: center;}
    .app-ver .hd-top .page-tit a b {margin-right: 4px;}
    .app-ver .hd-top .page-tit a i {width: 26px; height: 26px; display: inline-block; background-repeat: no-repeat; background-size: cover; background-position: center; background-image: url("../../../assets/images/ico/ico-li2.svg"); margin-left: 10px;}
    .app-ver .gnb-btn-wrap {bottom: unset; top: calc(50% + 10px); right: 0px; transform: translateY(-50%); transition: unset;}
    .app-ver .gnb-btn-wrap.active {position: fixed; top: 20px; transform: unset;}
    .app-ver .gnb-btn-wrap button {width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; position: relative;}
    .app-ver .gnb-btn-wrap button i {background-repeat: no-repeat; background-size: cover; background-position: center;}
    .app-ver .gnb-btn-wrap .gnb-btn {display: none;}
    .app-ver .gnb-btn-wrap .gnb-btn.active {display: block;}
    .app-ver .gnb-btn-wrap .search-btn {display: block;}
    .app-ver .gnb-btn-wrap .search-btn.active {display: none;}
    .app-ver .gnb-btn-wrap .noti-btn-wrap button i {background-image: url("../../../assets/images/ico/ico-notification.svg"); width: 22px; height: 24.45px;}
    .app-ver .gnb-btn-wrap .search-btn-wrap button i {background-image: url("../../../assets/images/ico/ico-search_b.svg"); width: 20px; height: 20px;}
    .app-ver .gnb-btn-wrap .noti-btn-wrap button.active::before {content: ''; width: 5px; height: 5px; border-radius: 50%; background: #D6690F; position: absolute; top: 5px; right: 5px;}

    header .app-ver .hd-top {height: 60px; padding-top: 8px;}
    header .app-ver .tnb-wrap {
        height: 20px;
        font-size: 10px;
        color: #5A5E6C;
        padding-top: 4px;
        padding-bottom: 4px;
        border-bottom: 1px solid #E4E4E4;
        position: relative;
        z-index: 13;
    }
    header .app-ver .tnb-wrap.active {position: fixed; top: 0;}
    header .app-ver .tnb-wrap p {
        font-size: 10px;
    }
    header .app-ver .gnb {
        overflow: hidden;
        overflow-y: auto;
        height: 100%;
    }
    header .app-ver .gnb-wrap {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    header .app-ver .gnb-tit {
        width: 100%;
        background: #424242;
        font-size: 14px;
        font-weight: 500;
        color: #fff;
        height: 50px;
        padding: 0 20px;
    }
    header .app-ver .gnb-cont {
        height: 100%;
        position: relative;
        overflow-y: auto;
        background-color: #FAFAFA;
    }
    header .app-ver .gnb-cont > li {
        position: static;
        height: auto;
        display: block;
        margin: 0;
        padding: 0;
    }
    header .app-ver .gnb-cont > li::after {
        display: none;
    }
    header .app-ver .gnb-cont > li .tit {
        font-size: 16px;
        font-weight: 700;
        width: 192px;
        height: auto;
        color: #210000;
        justify-content: left;
        padding: 23px 20px;
        line-height: 1.75;
    }
    header .app-ver .gnb-cont > li.active .tit {
        background: #4C95CA;
        color: #fff;
    }
    header .app-ver .gnb-cont > li.active .depth2 {
        display: block;
    }
    header .app-ver .gnb-cont .depth2 {
        position: absolute;
        top: 0;
        left: 192px;
        width: calc(100% - 192px);
        display: none;
        transform: none;
        border: 0;
        background-color: #fff;
        box-shadow: none;
        height: calc(100% + 6px);
        border-radius: 0;
    }
    header .app-ver .gnb-cont .depth2 > li {
        padding: 0;
        text-align: left;
    }
    header .app-ver .gnb-cont .depth2 > li:not(:last-child) {
        /*border-bottom: 1px solid rgba(35, 35, 35, 0.05);*/
    }
    header .app-ver .gnb-cont .depth2 > li a:hover {
        text-decoration: none;
        color: #210000;
        font-weight: 500;
    }
    header .app-ver .gnb-cont .depth2 > li > a {
        display: flex;
        align-items: center;
        color: #210000;
        font-size: 16px;
        font-weight: 500;
        position: relative;
        padding: 24px 0;
        margin-left: 33px;
        margin-right: 40px;
        border-bottom: 1px solid #E4E4E4;
    }
    header .app-ver .gnb-cont .depth2 > li > a.active {
        color: #4B3329;
        text-decoration: underline;
    }
    header .app-ver .gnb-cont .depth2 > li > a.active::before {
        background: #4B3329;
    }
    header .app-ver .gnb-cont .depth2 > li > a.active.hasChild::after {
        background-image: url("../../images/ico/ico-arrow_on.svg");
    }
    header .app-ver .gnb-cont .depth2 > li > a::before {
        /*content: "";*/
        /*width: 3px;*/
        /*height: 3px;*/
        /*border-radius: 50%;*/
        /*background: #210000;*/
        /*margin-right: 7px;*/
    }
    header .app-ver .gnb-cont .depth2 > li > a.hasChild::after {
        content: "";
        width: 18px;
        height: 18px;
        background: no-repeat 50%/cover;
        background-image: url("../../images/ico/ico-arrow.svg");
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
    }
    header .app-ver .gnb-cont .depth2::after {
        display: none;
    }
    header .app-ver .gnb-cont .depth3 {
        display: none;
        background-color: #F7F7F7;
        border-radius: 5px;
        padding: 12px 20px;
        margin-top: 10px;
        margin-bottom: 22px;
    }
    header .app-ver .gnb-cont .depth3 a {
        color: #232323;
        font-size: 14px;
        padding: 12px 0;
    }
    header .app-ver .gnb-control {
        display: table;
        table-layout: fixed;
        width: 100%;
        border: 1px solid #E4E4E4;
    }
    header .app-ver .gnb-control li {
        display: table-cell;
        vertical-align: middle;
    }
    header .app-ver .gnb-control li:not(:last-child) {
        border-right: 1px solid #e4e4e4;
    }
    header .app-ver .gnb-control .btn {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #5D5D5D;
        font-size: 16px;
        transition: 0.4s;
    }
    header .app-ver .gnb-control .btn:hover {
        opacity: 0.7;
    }
    header .app-ver .gnb-control .btn.login-btn {
        text-decoration: underline;
        color: #000;
    }

    header .app-ver .gnb-cont > li .tit {
        width: 124px;
        padding: 23px 11px;
    }
    header .app-ver .gnb-cont .depth2 {
        height: calc(var(--vh, 1vh) * 100 - 300px);
        height: 100%;
        left: 124px;
        width: calc(100% - 124px);
    }
    header .app-ver .gnb-cont .depth3 {
        padding: 9px 20px;
    }
    header .app-ver .gnb-cont .depth3 a {
        padding: 9px 0;
    }
    header .app-ver .quick-menu__list ul {
        height: 100px;
        align-items: baseline;
        margin: 0 -3.5px;
    }
    header .app-ver .quick-menu__list ul li {
        padding: 0 3.5px;
    }
    header .app-ver .quick-menu__list ul li .btn {
        height: 100%;
        padding: 15px 0;
        font-size: 12px;
        justify-content: flex-start;
    }
    header .app-ver .quick-menu__list ul li .btn .ico {
        width: 32px;
        height: 30px;
        margin-bottom: 7px;
    }
    header .app-ver .gnb-cont .depth2 > li > a {
        padding: 18px 0;
        margin: 0 16px;
    }
    header .gnb-all__top .user-info > ul > li a p.txt1, header .gnb-all__top .user-info > ul > li a {
        word-break: keep-all;
    }
    header .gnb-all__top .user-info > ul > li {display: flex; align-items: center;}


    /*bottom*/
    footer {margin-bottom: 76px;}
    .top_btn {display: none;}
    .ft-menu {display: block !important; width: 100%; padding-bottom: 9px; background: #fff; z-index: 2; position: fixed; bottom: 0;}
    .ft-menu > ul {display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; justify-content: center; grid-column-gap: 20px; grid-row-gap: 10px; width: 100%; padding: 18px 20px 20px;}
    .ft-menu > ul > li {text-align: center;}
    .ft-menu > ul > li a {font-size: 10px; font-weight: 600; color: #9B9B9B; display: flex; flex-direction: column; align-items: center; justify-content: center;}
    .ft-menu > ul > li a i {background-repeat: no-repeat; background-size: cover; background-position: center; width: 26px; height: 26px; display: inline-block; margin-bottom: 7px;}
    .ft-menu > ul > li a i.ico-home {background-image: url("../../../assets/images/ico/ico-home.svg");}
    .ft-menu > ul > li a i.ico-li1 {background-image: url("../../../assets/images/ico/ico-li1.svg");}
    .ft-menu > ul > li a i.ico-li2 {background-image: url("../../../assets/images/ico/ico-li2.svg");}
    .ft-menu > ul > li a i.ico-li3 {background-image: url("../../../assets/images/ico/ico-li3.svg");}
    .ft-menu > ul > li a i.ico-menu {background-image: url("../../../assets/images/ico/ico-menu.svg"); background-size: 20px;}
    .ft-menu > ul > li a.active {color: #33479B;}
    .ft-menu > ul > li a.active i {filter: invert(30%) sepia(11%) saturate(4298%) hue-rotate(195deg) brightness(50%) contrast(96%);}

    .ft-menu .ft-menu-line {width: 100%; max-width: 37.5%; height: 5px; border-radius: 100px; background: #2E2A29; margin: 0 auto;}

    .pop_wrap {width: 100%;}
    .pop_wrap img {width: 100% !important; height: 100% !important; max-height: calc((var(--vh, 1vh)* 100) - 150px) !important;}
}