/* BASIC css start */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Roboto:wght@100;300;400;500;700;900&display=swap');

.top-popup {position:relative;width:100%;height:0px;background:#28313f;text-align:center;font-size:0px;overflow:hidden;}
.top-popup .popup-wrap {position:relative;width:1200px;margin:0 auto;}
.top-popup .close-btn {position:absolute;top:23px;right:-106px;}


#hdWrap {border-bottom:1px solid #dddddd;}
#hdWrap #header {width:100%;height:40px;background:#ffd7d7;}
#hdWrap #header .header-wrap {width:1200px;margin:0 auto;}
#hdWrap .header-wrap .app-btn {
    position:relative;
    display:inline-block;
    width:170px;
    padding-left:20px;
    background:url('/design/ocato/renewal/pc/img/header/app_download.png') no-repeat center left;
    color:#333333;
    font-size:12px;
    font-weight:bold;
    line-height:40px;
    letter-spacing:-0.5px;
    box-sizing:border-box;
    float:left;
}
#hdWrap .header-wrap .app-btn .bubble {
    position:absolute;
    top:32px;
    left:18px;
}
#hdWrap .header-wrap .direct-btn {
    position:relative;
    display:inline-block;
    padding-left:20px;
    background:url('/design/ocato/renewal/pc/img/header/app_direct.png') no-repeat center left;
    color:#333333;
    font-size:12px;
    font-weight:bold;
    line-height:40px;
    letter-spacing:-0.5px;
    box-sizing:border-box;
}
#hdWrap .header-wrap .direct-btn .bubble {
    position:absolute;
    top:32px;
    left:12px;
    z-index:9;
}
#hdWrap .header-wrap .direct-btn .popup {
    display:none;
    position:absolute;
    top:32px;
    left:-90px;
    z-index:11;
}
#hdWrap .header-wrap .direct-btn:hover .popup {
    display:block;
}
#hdWrap #header .direct-btn img {
    vertical-align:middle;
}

/*#hdWrap .header-wrap > ul {float:right;}*/
.nav{float:right;}
#hdWrap .header-wrap > ul > li {float:left;}
#hdWrap .header-wrap > ul > li > a {
    position:relative;
    display:inline-block;
    padding:0px 10px;
    color:#9f7a7a;
    font-size:12px;
    font-weight:bold;
    line-height:40px;
    letter-spacing:-0.5px;
}
#hdWrap .header-wrap > ul > li > a:hover {
    color:#333;
}
#hdWrap .header-wrap > ul > li > a .bubble {
    position:absolute;
    top:32px;
    left:50%;
    margin-left:-26px;
}
#hdWrap .header-wrap > ul > li > a.cart #user_basket_quantity {
    display:inline-block;
    width:17px;
    height:17px;
    margin-left:3px;
    margin-top:11.5px;
    border-radius:50%;
    background:#e99999;
    color:white;
    font-size:11px;
    line-height:17px;
    text-align:center;
}

#hdWrap .header-wrap > ul > li.search {
    position:relative;
    height:40px;
    margin-left:20px;
    font-size:0px;
}
#hdWrap .header-wrap > ul > li.search .MS_search_word {
    width:130px;
    height:26px;
    margin-top:7px;
    padding-left:12px;    
    padding-right:35px;
    border:1px solid #9f7a7a;
    border-radius:13px;
    color:#9f7a7a;
    font-size:11px;
    font-weight:bold;
    background:#ffd7d7;
    box-sizing:border-box;
}
#hdWrap .header-wrap > ul > li.search .btn-sch {
    position:absolute;
    top:9px;
    right:11px;
}

#hdWrap .header-wrap > ul > li.search .hover-popup {
    display:none;
    position:absolute;
    top:37px;
    left:0px;
    z-index:300;
    box-sizing:border-box;
    letter-spacing:-0.5px;
    height:220px;
}
#hdWrap .header-wrap > ul > li.search .hover-popup h5 {
    margin-top:6px;
    color:#e71a1a;
    font-size:13px;
    font-weight:bold;
    line-height:32px;
}
#hdWrap .header-wrap > ul > li.search .hover-popup ul {
}
#hdWrap .header-wrap > ul > li.search .hover-popup ul li {
    
}
#hdWrap .header-wrap > ul > li.search .hover-popup ul li a {
    display:inline-block;
    width:100%;
    color:#333333;
    font-size:12px;
    /*line-height:29px;*/
    border-bottom:1px dotted #d2a9a9;
}
#hdWrap .header-wrap > ul > li.search .hover-popup ul li:last-child a {
    border-bottom:none;
}
#f2s-ranking .keywords-sub{
    top: 0% !important;
    height: 220px !important;
}


#hdWrap #gnb {
    position:relative;
    width:1200px;
    min-height: 250px;
    margin:39px auto 0px auto;
    padding-left:180px;
    box-sizing:border-box;
}
#hdWrap #gnb .logo {
    position:absolute;
    top:0px;
    left:0px;
    z-index:10;
}


#hdWrap #gnb .menu-section:after {
    display:block;
    clear:both;
    content:"";
}
#hdWrap #gnb .menu-section .menu-article {
    float:left;
    width:194px;
    margin-right:50px;
}
#hdWrap #gnb .menu-section .menu-article.item {
    width:532px;
}
#hdWrap #gnb .menu-section .menu-article.community {
    margin-right:0px;
}

#hdWrap #gnb .menu-section .menu-article h3 {
    padding-bottom:18px;
    color:#333;
    font-size:20px;
    font-weight:bold;
    line-height:22px;
    border-bottom:1px solid black;
}
#hdWrap #gnb .menu-section .menu-article ul {
    margin-top:12px;
}
#hdWrap #gnb .menu-section .menu-article ul:after {
    display:block;
    clear:both;
    content:"";
}
#hdWrap #gnb .menu-section .menu-article ul li {
    float:left;
    width:194px;
}
#hdWrap #gnb .menu-section .menu-article.item ul li {
    width:33.33%;
}
#hdWrap #gnb .menu-section .menu-article ul li a {
    display:inline-block;
    color:#333;
    font-size:13.5px;
    line-height:30px;
    letter-spacing:-0.5px;
}
#hdWrap #gnb .menu-section .menu-article ul li a.heart {
    padding-right:18px;
    background:url('http://ocato.img6.kr/web/mainpage_icon/pc/category_heart.png') no-repeat center right;
}
#hdWrap #gnb .menu-section .menu-article ul li a.new_sale {
    padding-right:32px;
    background:url('http://ocato.img6.kr/web/mainpage_icon/pc/category_new_sale.jpg') no-repeat center right;
}
#hdWrap #gnb .menu-section .menu-article ul li a.bling {
    padding-right:27px;
    background:url('http://ocato.img6.kr/web/mainpage_icon/pc/category_bling.png') no-repeat center right;
}
#hdWrap #gnb .menu-section .menu-article ul li a.talk {
    padding-right:25px;
    background:url('http://ocato.img6.kr/web/mainpage_icon/pc/category_talk.png') no-repeat center right;
}
#hdWrap #gnb .menu-section .menu-article ul li a.barotalk {
    padding-right:25px;
    background:url('/shopimages/ocato/powerapp_custom_menu_1.png') no-repeat center right;
    background-size:22%;
}
#hdWrap #gnb .menu-section .menu-article ul li a.sale {
    padding-right:29px;
    background:url('http://event.jall.co.kr/2020/01/22/sale.png') no-repeat center right;
}
#hdWrap #gnb .menu-section .menu-article ul li a.new {
    padding-right:29px;
    background:url('http://ocato.img6.kr/web/mainpage_icon/pc/new.png') no-repeat center right;
}
#hdWrap #gnb .menu-section .menu-article ul li a.fall {
    padding-right:22px;
    background:url('http://ocato.img6.kr/web/mainpage_icon/pc/fall.png') no-repeat center right;
}

.fixed-header {
    display:none;
    position:fixed;
    top:0px;
    left:0px;
    z-index:500;
    width:100%; 
    background:#f6e3e7;
}
.fixed-header .header-wrap {
    position:relative;
    width:1200px;
    margin:0 auto;
}
.fixed-header .header-wrap > ul:after {
    display:block;
    clear:both;
    content:"";
}
.fixed-header .header-wrap > ul > li {
    float:left;
}
.fixed-header .header-wrap > ul > li > a {
    margin-right:29px;
    display:inline-block;
    color:#333;
    font-size:14px;
    font-weight:bold;
    line-height:60px;
}
.fixed-header .header-wrap > ul > li > a.menu-btn {
//    margin-right:24px;
//    padding-left:25px;
    margin-right:17px;
    padding-left:25px;
    background:url('/design/ocato/renewal/pc/img/header/menu-icon.jpg') no-repeat center left;
}

.fixed-header .header-wrap > ul > li > a.menu15 {
    margin-right:0px;
}


.fixed-header .menu-popup {
    display:none;
    position:absolute;
    top:59px;
    left:0px;
    z-index:501;
    width:100%;
    background:white;
    border:1px solid #333;
    box-sizing:border-box;
}
.fixed-header .menu-popup .menu-close {
    position:absolute;
    top:-60px;
    left:-1px;
    z-index:502;
    width:60px;
    height:60px;
    background:white;
    border:1px solid #333;
    border-bottom:1px solid white;
    text-align:center;
    line-height:58px;
    font-size:0px;
    box-sizing:border-box;
}
.fixed-header .menu-popup .menu-close img {
    vertical-align:middle;
}

.fixed-header .menu-popup .menu-head {
    height:70px;
    border-bottom:1px solid #ddd;
    box-sizing:border-box;
}
.fixed-header .menu-popup .menu-head .logo {
    float:left;
    display:inline-block;
    margin-left:29px;
    font-size:0px;
    line-height:70px;
}
.fixed-header .menu-popup .menu-head .logo img {
    vertical-align:middle;
}
.fixed-header .menu-popup .menu-head ul {
    float:right;
}
.fixed-header .menu-popup .menu-head ul:after {
    display:block;
    clear:both;
    content:"";
}
.fixed-header .menu-popup .menu-head ul li {
    float:left;
}
.fixed-header .menu-popup .menu-head ul li > a {
    display:inline-block;
    padding:0px 12px;
    color:#333;
    font-size:14px;
    font-weight:bold;
    line-height:70px;
    letter-spacing:-0.5px;
}
.fixed-header .menu-popup .menu-head .hashtag {
    float:left;
    padding-left:50px;
}
.fixed-header .menu-popup .menu-head .hashtag a {
    color: #888888;
    font-size: 13px;
    font-weight: 100;
}
.fixed-header .menu-popup .menu-head .hashtag a:hover {
    color: #333;
}

.fixed-header .menu-popup .menu-head ul li.search {
    position:relative;
    height:70px;
    margin-left:18px;
    margin-right:30px;
    font-size:0px;
}
.fixed-header .menu-popup .menu-head ul li.search .hover-popup {
    display:none !important;
}
.fixed-header .menu-popup .menu-head ul li.search .MS_search_word {
    width:160px;
    height:30px;
    margin-top:20px;
    padding-left:12px;    
    padding-right:35px;
    border:1px solid #333;
    border-radius:15px;
    color:#333;
    font-size:13px;
    font-weight:bold;
    background:white;
    box-sizing:border-box;
}
.fixed-header .menu-popup .menu-head ul li.search .btn-sch {
    position:absolute;
    top:22px;
    right:10px;
}


.fixed-header .menu-popup .menu-section:after {
    display:block;
    clear:both;
    content:"";
}
.fixed-header .menu-popup .menu-section .menu-article {
    float:left;
    width:205px;
    min-height:365px;
    padding-top:20px;
    border-left:1px solid #ddd;
    box-sizing:border-box;
}
.fixed-header .menu-popup .menu-section .menu-article:first-child {
    border-left:none;
}
.fixed-header .menu-popup .menu-section .menu-article.item {
    width:378px;
}
.fixed-header .menu-popup .menu-section .menu-article h5 {
    margin-bottom:5px;
    padding-left:30px;
    font-size:20px;
    font-weight:bold;
    color:#333;
    line-height:36px;
}
.fixed-header .menu-popup .menu-section .menu-article ul:after {
    display:block;
    clear:both;
    content:"";
}
.fixed-header .menu-popup .menu-section .menu-article ul li {
    float:left;
    width:100%;
    padding-left:30px;
    box-sizing:border-box;
}
.fixed-header .menu-popup .menu-section .menu-article.item ul li {
    width:50%;
}
.fixed-header .menu-popup .menu-section .menu-article ul li a {
    display:inline-block;
    color:#888888;
    font-size:14px;
    line-height:30px;
    letter-spacing:-0.5px;
}
.fixed-header .menu-popup .menu-section .menu-article ul li a.highlight {
    color:#e99999;
}
.red {
    color:#e99999;
}
.pink {
    color:#6cc413;
}
.fixed-header .menu-popup .menu-section .menu-article ul li a img {
    margin-left:5px;
    vertical-align:middle;
}
/* BASIC css end */