@charset "utf-8";
/*
 * File       : menu.css
 * SUMMARY:
 * 01) HEADER
 * 02) SLIDMENU
 */

/* ************************************** *
 * PC VER
 * ************************************** */

/* HEADER */
#header {overflow: hidden;width: 100%;background: #fff;}
#header .gnb {height: 3rem;padding: 0 0 0 10px;box-sizing: border-box;width: 1024px;margin: 0 auto;position: relative;}
#header .gnb a, #header .lnb a {color: #000;}
#header .gnb h1{float:left; padding:0 0 0 0; height:100%;}/*210430 수정*/
#header .gnb h1 a{display:flex; align-items:center; width:106px; height:100%; background: url(/assets/img/logo_atoon_top.png) no-repeat left 52.5%; background-size:100%; color:transparent}/* /assets/img/logo_toptoon.svg 210430 기존로고 수정*/
#header .gnb .btn_select_mode{display:inline-flex; align-items:center; height:100%; margin-left:0.4rem}/*210430 수정*/
#header .gnb .btn_select_mode a.switch_19mode {display: block;width: 51px;height: 22px;background: url(/assets/img/switch_19off.png) no-repeat center;background-size: 100%;}
#header .gnb .btn_select_mode a.switch_19modeOff {display: block;width: 51px;height: 22px;background: url(/assets/img/switch_nonadult_off.png) no-repeat center;background-size: 100%;}
#header .gnb .btn_select_mode a.switch_19mode.active {display: block;width: 51px;height: 22px;background: url(/assets/img/switch_19on.png) no-repeat center;background-size: 100%;}
#header .gnb > ul {}
#header .gnb > ul {display: block;position: absolute;top: 56%;transform: translateY(-50%);right: 10px;}
#header .gnb > ul li, #header .lnb ul li {float: left;}
#header .gnb > ul li a {display: block;padding: 0 10px;text-align: center;font-size: 13px;}
#header .gnb > ul li a .icon_charge,
#header .gnb > ul li a .icon_dessert,
#header .gnb > ul li a .icon_library,
#header .gnb > ul li a .icon_gift,
#header .gnb > ul li a .icon_search,
#header .gnb > ul li a .icon_service_menu {height: 20px;display: block;position: relative;box-sizing: border-box;}
#header .gnb > ul li a .icon_charge > img {width: 18px;margin: 0 auto;}
#header .gnb > ul li a .icon_dessert > img {width: 19px;margin: 0 auto;}
#header .gnb > ul li a .icon_library > img {width: 17px;margin: 0 auto;}
#header .gnb > ul li a .icon_gift > img {width: 19px;margin: 0 auto;}
#header .gnb > ul li a .icon_search > img {width: 19px;margin: 0 auto;}
#header .gnb > ul li a .icon_service_menu > img {width: 19px;margin: 0 auto;}
#header .gnb > ul li a .icon_gift .num_gift {position: absolute;top: -3px;right: -2px;}
#header .gnb > ul li a img {image-rendering: -webkit-optimize-contrast;}
#header .gnb .nav_gnb_name {vertical-align: top;}

#header .gnb > ul li a .icon_shampoo{height:20px; display:block; position:relative; box-sizing:border-box; margin-top:-1px;}/*211210 추가*/
#header .gnb > ul li a .icon_shampoo > img{width:20px; margin:0 auto; image-rendering:-webkit-optimize-contrast;}/*211210 추가*/
#header .gnb .nav_gnb_name.shampoo{padding-top:1px; display:inline-block}/*211210 추가*/

#header .gnb > ul li a .icon_repair{height:20px; display:block; position:relative; box-sizing:border-box}/*211123 추가*/
#header .gnb > ul li a .icon_repair > img{width:19px; margin:0 auto}/*211123 추가*/
#header .gnb > ul li a .icon_repair .repair_txt{position:absolute; top:-9px; right:-12px;}/*211123 추가*/
#header .gnb > ul li a .icon_repair .repair_txt > img{height:14px; image-rendering:-webkit-optimize-contrast;}/*211123 추가*/

/* 월별 로고 설정 */
#header .gnb h1 a.logo_1223{display:block; width:128px; height:100%; background: url(/assets/img/logo_1223.png) no-repeat left center; background-size:100%;}/*211221 12월23일(크리스마스) 로고*/
#header .gnb h1 a.logo_1227{display:block; width:120px; height:100%; background: url(/assets/img/logo_1227.gif) no-repeat left -2px; background-size:100%;}/*211221 12월27일(연말) 로고*/
#header .gnb h1 a.logo_0101{display:block; width:125px; height:100%; background: url(/assets/img/logo_0101.png) no-repeat left center; background-size:100%;}/*211221 01월01일(새해) 로고*/
#header .gnb h1 a.logo_0128{display:block; width:125px; height:100%; background: url(/assets/img/logo_0128_w.png) no-repeat left -0.2rem; background-size:100%;}/*220120 01월28일(설날) 로고*/
#header .gnb h1 a.logo_0215{display:block; width:125px; height:100%; background: url(/assets/img/logo_0215_w.png) no-repeat left -0.2rem; background-size:100%;}/*220211 02월15일(정월대보름) 로고*/
#header .gnb h1 a.logo_0301{display:block; width:125px; height:100%; background: url(/assets/img/logo_0301_w.png) no-repeat left -0.2rem; background-size:100%;}/*220228 03월01일(삼일절) 로고*/
#header .gnb h1 a.logo_0309{display:block; width:125px; height:100%; background: url(/assets/img/logo_0309_w.png) no-repeat left -0.2rem; background-size:100%;}/*220228 03월09일(대선) 로고*/
#header .gnb h1 a.logo_0314{display: block;width: 125px;height: 100%;background: url(/assets/img/logo_0314_w.png) no-repeat left -0.2rem;background-size: 100%;} /*220310 03월14일(화이트데이) 로고*/

.num_gift {
    font-size: 10px;
    color: #fff;
    background: #e63740;
    height: 15px;
    line-height: 15px;
    border-radius: 50px;
    display: inline-block;
    text-align: center;
    padding: 0px 3px;
    min-width: 15px;
    box-sizing: border-box;
}

#header .lnb {
    text-align: center;
    width: 100%;
    margin: 0 auto;
    position: relative;
    background: url(/assets/img/nav_line.gif) left top
    repeat-x;
}
#header .lnb h2 {
    display: none;
}
#header .lnb nav ul {
    overflow: hidden;
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
}
#header .lnb nav ul li {
    flex-grow: 1;
    position: relative;
}
#header .lnb nav ul li > a {
    font-size: 0.85rem;
    display: block;
    height: 2.4rem;
    
}
#header .lnb nav.m_nav > ul li > a > .ico_n{display:inline-block; height:15px; margin-left:1px; margin-top:-2px; vertical-align:3px; image-rendering:-webkit-optimize-contrast;}
#header .lnb nav.m_nav {
    background: url(/assets/img/nav_line.gif) left bottom
    repeat-x;
}
#header .lnb nav.m_nav > ul {
    width: 1024px;
    height: 2.4rem;
    line-height: 2.3rem;
    margin: 0 auto;
}
#header .lnb nav.m_nav > ul li.active > a {
    color: #e63740;
}
#header .lnb nav.s_nav {
    background: url(/assets/img/nav_line.gif) left bottom
    repeat-x #f6f6f6;
    display: none;
}
#header .lnb nav.s_nav > ul {
    width: 1004px;
    height: 2.4rem;
    line-height: 2.3rem;
    margin: 0 auto;
}
#header .lnb nav.s_nav > ul li {
    position: relative;
} /*200525추가*/
#header .lnb nav.s_nav > ul li.active > a {
    color: #e63740;
    border-bottom: 2px solid #e63740;
}
#header .lnb nav.s_nav > ul li.today:after {
    content: "";
    display: block;
    position: absolute;
    top: 0.4rem;
    right: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    background: #e63740;
    border-radius: 50%;
    margin-right: -13px;
} /*200525추가*/
#header .lnb nav.s_nav > ul li > a > .ico_n{display:inline-block; height:15px; margin-left:-0.2rem; margin-top:-2px; vertical-align:3px; image-rendering:-webkit-optimize-contrast;}/*220303 정주행 N추가*/
/*200525 완결_연도별*/
#header .lnb nav.d_nav {
    background: #fff;
    display: none;
    overflow: hidden;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    min-width: 100%;
    max-width: 100%;
}
#header .lnb nav.d_nav > ul {
    max-width: 1004px;
    width: 100%;
    margin: 0 auto;
}
#header .lnb nav.d_nav > ul li {
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    height: 2.5rem;
    color: #000;
    flex-grow: 1;
    justify-content: center;
    box-sizing: border-box;
    padding-top: 0;
}
#header .lnb nav.d_nav > ul li input {
    width: 16px;
    height: 16px;
    display: none;
    margin: 0 5px 0 0;
    padding: 0;
}
#header .lnb nav.d_nav > ul li input + label {
    display: inline-block;
    background-image: url(img_select_new.png);
    background-repeat: no-repeat;
    background-size: 200px;
    background-position: -5px -64px;
    text-indent: 19px;
    color: #000;
    height: 20px;
    line-height: 19px;
    text-indent: 22px;
    cursor: pointer;
}

#header .lnb nav.d_nav > ul li input:checked + label {
    background-repeat: no-repeat;
    background-image: url(img_select_new.png);
    background-size: 200px;
    background-position: -5px -86px;
}
@media (max-width: 320px) {
    #header .lnb nav.d_nav > ul li {
        font-size: 11px;
    }
}

#header .sub_topmenu {
    display: none;
}
#header .sub_topmenu > a.nav_sub_link.pay_wh {
    width: 50px;
}

/* ************************************** *
 * TABLET PC VER
 * ************************************** */

@media (min-width: 768px) and (max-width: 1023px) {
    html {
        font-size: 18px !important;
    }
    body {
        font-size: 1rem !important;
        margin: 0;
        padding: 0;
    }
    #header .gnb,
    #header .lnb {
        width: 100%;
        display: block;
    }
    #header .gnb .btn_select_mode {
    }
    #header .lnb nav.m_nav > ul {
        width: 100%;
    }
    #header .lnb nav.s_nav > ul {
        width: 100%;
    }
    #header .sub_topmenu {
        height: 45px;
        line-height: 45px;
        width: 100%;
        margin: 0 auto;
        padding: 0 10px;
        position: relative;
        overflow: hidden;
        border-bottom: 1px solid #ddd;
        display: block;
    }
    #header .sub_topmenu .fixed {
        position: fixed;
        top: 0;
        left: 0;
        height: 45px;
        line-height: 45px;
        width: 100%;
        padding: 0 10px;
        overflow: hidden;
        border-bottom: 1px #ddd solid;
        background-color: #fff;
        z-index: 3;
    }
    #header .sub_topmenu a.nav_sub_link {
        display: inline-block;
        height: 100%;
        width: calc(100% - 165px);
    }
    #header .sub_topmenu a.nav_sub_link .nav_sub_tit {
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 16px;
        font-weight: 500;
        color: #e63740;
        width: calc(100% - 30px);
    }
    #header .sub_topmenu a.nav_sub_link > img {
        height: 20px;
        display: inline-block;
        vertical-align: top;
        margin-right: 2px;
        transform: translateY(60%);
    }
    #header .sub_topmenu ul {
        float: right;
    }
    #header .sub_topmenu ul > li {
        display: inline-block;
        vertical-align: top;
        position: relative;
        float: left;
    }
    #header .sub_topmenu ul > li > a {
        display: block;
        padding: 11px;
    }
    #header .sub_topmenu ul > li > a .icon_gift .num_gift {
        font-size: 10px;
        color: #fff;
        background: #e63740;
        height: 14px;
        line-height: 14px;
        border-radius: 20px;
        display: inline-block;
        text-align: center;
        padding: 0px 3px;
        min-width: 16px;
        position: absolute;
        top: 7px;
        right: 1px;
        box-sizing: border-box;
    }
    #header .sub_topmenu ul > li img {
        height: 20px;
    }
}

/* ************************************** *
 * MOBILE VER
 * ************************************** */

@media (min-width: 0) and (max-width: 767px) {
    #header .gnb {height: 3rem;padding: 0 10px;width: 100%;margin: 0 auto;overflow: hidden;position: relative;box-sizing: border-box;}
    #header .gnb h1 {float: left;padding: 0 0 0 0;}
    #header .gnb h1 a{width:80px; height:100%;}/*210430 기존로고*/
    #header .gnb > ul {top: 55%;}
    #header .gnb > ul li + li {margin-left: 8px;}
    #header .gnb > ul li a {display: block;padding: 0;text-align: center;font-size: 14px;}
    #header .gnb > ul li a .icon_charge > img {width: 16px;padding-top: 2px;}
    #header .gnb > ul li a .icon_dessert > img {width: 18px;}
    #header .gnb > ul li a .icon_library > img {width: 14px;padding-top: 2px;}
    #header .gnb > ul li a .icon_gift > img {width: 15px;padding-top: 2px;}
    #header .gnb > ul li a .icon_search > img {width: 18px;}
    #header .gnb > ul li a .icon_menu_service > img {width: 18px;}
    #header .gnb > ul li a img {image-rendering: auto;}

    #header .gnb > ul li a .icon_shampoo > img{width:17px; padding-top:1px; image-rendering:auto;}/*211210 추가*/

    #header .gnb > ul li a .icon_repair > img{width:17px; padding-top:1px}/*211123 추가*/
    #header .gnb > ul li a .icon_repair .repair_txt{position:absolute; top:-3px; right:-5px;}/*211123 추가*/
    #header .gnb > ul li a .icon_repair .repair_txt > img{height:9px; image-rendering:auto;}/*211123 추가*/    

    /* 월별 로고 설정 */
    #header .gnb h1 a.logo_1223{width:93px; height:100%; margin-top:0; image-rendering:auto;}/*211221 12월23일(크리스마스) 로고*/    
    #header .gnb h1 a.logo_1227{width:88px; height:100%; margin-top:0; image-rendering:auto; background-position:left 0;}/*211221 12월27일(연말) 로고*/    
    #header .gnb h1 a.logo_0101{width:93px; height:100%; margin-top:0; image-rendering:auto;}/*211221 01월01일(새해) 로고*/    
    #header .gnb h1 a.logo_0128{width:93px; height:100%; margin-top:0; image-rendering:auto; background:url(/assets/img/logo_0128.png) no-repeat left center; background-size:100%;}/*220120 01월28일(설날) 로고*/
    #header .gnb h1 a.logo_0215{width:93px; height:100%; margin-top:0; image-rendering:auto; background:url(/assets/img/logo_0215.png) no-repeat left center; background-size:100%;}/*220211 02월15일(정월대보름) 로고*/    
    #header .gnb h1 a.logo_0301{width:93px; height:100%; margin-top:0; image-rendering:auto; background:url(/assets/img/logo_0301.png) no-repeat left center; background-size:100%;}/*220228 03월01일(삼일절) 로고*/
    #header .gnb h1 a.logo_0309{width:93px; height:100%; margin-top:0; image-rendering:auto; background:url(/assets/img/logo_0309.png) no-repeat left center; background-size:100%;}/*220228 03월09일(대선) 로고*/  
    #header .gnb h1 a.logo_0314{width:93px; height:100%; margin-top:0; image-rendering:auto; background:url(/assets/img/logo_0314.png) no-repeat left center; background-size:100%;}/*220310 03월14일(화이트데이) 로고*/

    #header .lnb nav.m_nav > ul li > a > .ico_n{height:12px; image-rendering:auto; margin-right:-6px; vertical-align:2px;}/*220125 기다빵 n표시 추가*/
    #header .lnb nav.s_nav > ul li > a > .ico_n{height:12px; image-rendering:auto; margin-right:-6px; vertical-align:2px;}/*220303 정주행 N추가*/

    #header .gnb .nav_gnb_name {font-size: 11px;}
    #header .gnb .btn_select_mode{margin-left:0.4rem; position:absolute}/*210430 수정*/
    @media (max-width:350px){   /*210430 max-width 수정(s9 기종 확인필요)*/
        #header .gnb > ul li:nth-child(2){display:none}/*210430 수정*/
    }
    #header .lnb {
        width: 100%;
        height: auto;
        margin: 0 auto;
        overflow: hidden;
        position: relative;
        box-sizing: border-box;
    }
    #header .lnb nav.m_nav {
        background: url(nav_line.gif) left bottom
        repeat-x;
        padding: 2px 4px 2px;
    }
    #header .lnb nav.m_nav > ul {
        width: 100%;
        height: 100%;
        line-height: normal;
        margin: 0 auto;
    }
    #header .lnb nav.m_nav > ul > li {
        flex-grow: 1;
        width: 18%;                       /* 20%  20250712 모바일 GNB */
        height: 1.9375rem;
        line-height: 1.75rem;
        margin: 2px 2px;
    }
    #header .lnb nav.m_nav > ul > li > a {
        font-size: 0.8125rem;
        letter-spacing: -0.4px;
        display: block;
        border: 1px solid #ddd;
        border-radius: 3px;
        height: 100%;
    }
    #header .lnb nav.m_nav > ul > li.active > a {
        color: #e63740;
        border: 1px solid #e63740;
    }
    /*#header .lnb nav.m_nav.adult_ver > ul > li {*/
    /*    width: 17%;*/
    /*}*/

    #header .lnb nav.s_nav > ul {
        width: 100%;
        height: 100%;
        line-height: normal;
        margin: 0 auto;
        height: 2.4rem;
        line-height: 2.3rem;
    }
    #header .lnb nav.s_nav > ul > li {
        flex-grow: 1;
    }

    #header .lnb nav.d_nav > ul li {
        align-items: flex-end;
        margin-top: -8px;
    }

    #header .sub_topmenu {
        height: 45px;
        line-height: 43px;
        width: 100%;
        margin: 0 auto;
        padding: 0 10px;
        position: relative;
        overflow: hidden;
        border-bottom: 1px solid #ddd;
        display: block;
    }
    #header .sub_topmenu .fixed {
        position: fixed;
        top: 0;
        left: 0;
        height: 45px;
        line-height: 43px;
        width: 100%;
        padding: 0 10px;
        overflow: hidden;
        border-bottom: 1px #ddd solid;
        background-color: #fff;
        z-index: 3;
    }
    #header .sub_topmenu a.nav_sub_link {
        display: inline-block;
        height: 100%;
        width: calc(100% - 123px);
    } /*201022*/
    #header .sub_topmenu a.nav_sub_link .nav_sub_tit {
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 16px;
        font-weight: 500;
        color: #e63740;
        width: calc(100% - 30px);
    }
    #header .sub_topmenu a.nav_sub_link > img {
        height: 20px;
        display: inline-block;
        vertical-align: top;
        margin-right: 2px;
        transform: translateY(60%);
    }
    #header .sub_topmenu ul {
        float: right;
    }
    #header .sub_topmenu ul > li {
        display: inline-block;
        vertical-align: top;
        position: relative;
        float: left;
    }
    #header .sub_topmenu ul > li > a {
        display: block;
        padding: 11px 6px;
    }
    #header .sub_topmenu ul > li > a .icon_gift .num_gift {
        font-size: 10px;
        color: #fff;
        background: #e63740;
        height: 14px;
        line-height: 14px;
        border-radius: 20px;
        display: inline-block;
        text-align: center;
        padding: 0px 3px;
        min-width: 16px;
        position: absolute;
        top: 6px;
        right: 1px;
        box-sizing: border-box;
    }
    #header .sub_topmenu ul > li img {
        height: 20px;
    }
}