/* BASIC css start */
/*roboto condensed*/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

/*Çì´õ »ó´Ü ¹è³Ê °¡·ÎÃß°¡*/
.header-top-banner.type01 .marquee a { display:inline-block; font-size:10px; padding:0 10px;;color:#fff; cursor:pointer; margin:0 20px; }
/*Ãß°¡(210712)*/
.h-img-banner-wrap{
    margin-top:20px;
}
.h-img-banner-wrap > ul{
    font-size:0px;
    margin-bottom: 10px !important;
}
.h-img-banner-wrap > ul > li{
    
}
.h-img-banner-wrap > ul > li > a{
    display:block;
}
.h-img-banner-wrap > ul > li > a > img{
    width:100%;
    vertical-align:top;
}
/*À̹ÌÁö ¹è³Ê 2°³¾¿*/
.h-img-banner-wrap > ul.st01{
    margin:0 -1px;
}
.h-img-banner-wrap > ul.st01 > li{
    display:inline-block;
    width:50%;
    padding:0 1px;
    box-sizing:border-box;
}

.h-img-banner-wrap > ul > li > video{
    width:100%;
    height:auto;
}
.h-img-banner-wrap > ul.st02 > li{
    margin-bottom:5px;
}
.bottom-links {
    margin-top:20px;
}
.bottom-links > ul{
    font-size:0px;
    display:flex;
    justify-content: space-between;
}
.bottom-links > ul > li{
    display:inline-block;
    vertical-align:top;
    text-align:center;
}
.bottom-links > ul > li > a{
    display:inline-block;
    max-width:60px;
    vertical-align:top;
}
.bottom-links > ul > li > a > img{
    width:100%;
    vertical-align:top;
}





/*Çì´õ ¼­Ä¡ ¿µ¿ª*/
body{
    transition:all ease-in-out 0.3s;
}
body.pt-100{
    padding-top:100px;
    transition:all ease-in-out 0.3s;
}

.search-wrap{
    position:relative;
    background:#e3ccca;
    font-size:0px;
    height:0px;
    line-height:0px;
    padding:0px 13px 0px 8px;
    box-sizing:border-box;
    overflow:hidden;
    transition:all ease-in-out 0.3s;
}
.search-wrap.active{
    height:100px;
    line-height:100px;
}
.search-wrap a.btn-close{
    display:inline-block;
    vertical-align:middle;
    width:25px;
    height:40px;
    line-height:40px;
    text-align:center;
    margin-right:13px;
}
.search-wrap a.btn-close img{
    width:10px;
    vertical-align:middle;
}
.search-wrap .search-input-wrap{
    position:relative;
    display:inline-block;
    vertical-align:middle;
    width:calc(100% - 38px);
    height:40px;
    line-height:40px;
}
.search-wrap .search-input-wrap input{
    width:100% !important;
    height:40px !important;
    line-height:40px !important;
    border:0px !important;
    background:#fff;
    font-size:13px;
    color:#333;
    padding-left:15px;
    padding-right:50px;
}
.search-wrap .search-input-wrap input::placeholder{
    color:#b2b2b2 !important;
}
.search-wrap .search-input-wrap a{
    position:absolute;
    top:0;
    right:5px;
    display:inline-block;
    width:40px;
    height:40px;
    line-height:40px;
    text-align:center;
}
.search-wrap .search-input-wrap a img{
    width:18px;
    vertical-align:middle;
}

/*Çì´õ ž ¹è³Ê*/
.header-top-banner{
    position:relative;
    height:30px;
    line-height:30px;
    text-align:center;
    background:#e0b1b0 ;
    overflow:hidden;
}
.header-top-banner > ul > li{
    display:block;
}
.header-top-banner > ul > li > a{
    display:block;
    font-size:10px;
}
.header-top-banner a.txt-p{
    width:calc(100% - 64px);
    height:30px;
    line-height:30px;
    color:#000000;
    font-size:13px;
    padding:0px;
}

/*Çì´õ ½ÃÀÛ*/
#header{
    position:fixed;
    top:0px;
    left:0;
    right:0;
    z-index:999;
    width:100%;
    height:auto;
}
#header .menu-bar{
    position:relative;
    height:45px;
    line-height:45px;
    text-align:center;
    background:transparent;
}
#header .menu-bar a{
    display:inline-block;
    vertical-align:top;
    font-size:0px;
}
#header .menu-bar a.logo{
    width:86.5px;
    background:url('/design/huit8/img/mobile/header_logo_black_2.png')no-repeat center center;
    background-size:86.5px auto;

}
#header .menu-bar a.btn-menu{
    position:absolute;
    top:9.5px;
    left:10px;
    width:26.5px;
    height:25.5px;
    background:url('/design/huit8/img/mobile/btn_header_menu_black.png')no-repeat center center;
    background-size:15.6px auto;

}
#header .menu-bar .right-btn{
    position:absolute;
    top:0px;
    right:12px;
    height:45px;
    line-height:45px;
    font-size:0px;
    text-align:right;
}

#header .menu-bar .right-btn a{
    width:32px;
    height:45px;
}
#header .menu-bar .right-btn a.btn-cart {
    position:relative;
    background:url('/design/huit8/img/mobile/btn_header_cart_black.png')no-repeat center center;
    background-size:18px auto;

}
#header .menu-bar .right-btn a.btn-cart span {
    position:absolute;
    bottom:15px;
    right:2px;
    width:13px;
    height:13px;
    background:#d2a7a3;
    border-radius:50%;
    color:white;
    font-size:8px;
    font-weight:bold;
    line-height:13px;
    text-align:center;
}

/*Ãß°¡ 21.06.23*/
#header .menu-bar a.btn-search {
    position:absolute;
    top:0;
    left:46px;
    width:32px;
    height:45px;
    background: url(/design/huit8/img/mobile/btn_search_black.png)no-repeat center center;
    background-size:17px auto;

}
#header .menu-bar .right-btn a.btn-my {
    position:relative;
    background: url(/design/huit8/img/mobile/btn_my.png)no-repeat center center;
    background-size:18px auto;

}
.header-area.banner-close {
    height:0px;
    transition:all ease-in-out 0.4s;
}
/*¸ÞÀÎ Çì´õ ±âº»*/
#header.main .menu-bar{
    background:transparent;
}
#header.main .menu-bar a.logo{
    width:86.5px;
    background:url('/design/huit8/img/mobile/header_logo_white_1.png')no-repeat center center;
    background-size:86.5px auto;
    transition:all ease-in-out 0.3s;
}
#header.main .menu-bar a.btn-menu{
    position:absolute;
    top:9.5px;
    left:10px;
    width:26.5px;
    height:25.5px;
    background:url('/design/huit8/img/mobile/btn_header_menu_white.png')no-repeat center center;
    background-size:15.6px auto;
    transition:all ease-in-out 0.3s;
}
#header.main .menu-bar .right-btn a.btn-cart {
    position:relative;
    background:url('/design/huit8/img/mobile/btn_header_cart_white.png')no-repeat center center;
    background-size:18px auto;
    transition:all ease-in-out 0.3s;
}
#header.main .menu-bar a.btn-search {
    position:absolute;
    top:0;
    left:46px;
    width:32px;
    height:45px;
    background: url(/design/huit8/img/mobile/btn_header_search_white.png)no-repeat center center;
    background-size:17px auto;
    transition:all ease-in-out 0.3s;
}
#header.main .menu-bar .right-btn a.btn-my {
    position:relative;
    background: url(/design/huit8/img/mobile/btn_my_white.png)no-repeat center center;
    background-size:18px auto;
    transition:all ease-in-out 0.3s;
}
.header-area{
    height:30px;
}




/*Àüü¸Þ´º ¿µ¿ª*/
.menu-modal{
    position:fixed;
    top:0;
    bottom:0;
    left:-300px;
    width:300px;
    height:auto;
    background:#fff;
    transition:all ease-in-out 0.3s;
    z-index:1010;
    overflow:hidden;
    padding:0px 15px;
    padding-top:22.5px;
    box-sizing:border-box;
    overflow-y:scroll;
    padding-bottom:30px;
}
.menu-modal.active{
    width:300px;
    left:0px;
    transition:all ease-in-out 0.3s;
    -webkit-overflow-scrolling: auto;
}
.menu-modal .user-info{
    position:relative;
    height:23.5px;
    line-height:23.5px;
    font-size:0px;
}
.menu-modal .user-info .top-txt{
    display:inline-block;
    height:23.5px;
    line-height:23.5px;
    color:#333;
    font-size:15px;
    font-weight:normal;
    padding-right:14px;
    background:url('/design/huit8/img/mobile/arr_01.png')no-repeat center right;
    background-size:auto 10px;
}
.menu-modal .user-info .top-txt > a{
    color:#333;
}
.menu-modal .user-info .top-txt > a > span{
    font-weight:bold;
}
.menu-modal .user-info .top-txt > span{
    color:#d2a7a3;
    font-weight:bold;
}
.menu-modal .user-info .top-icons{
    position:absolute;
    top:0;
    right:-4.5px;
    font-size:0px;
    height:23.5px;
    line-height:23.5px;
}
.menu-modal .user-info .top-icons a{
    display:inline-block;
    height:23.5px;;
    line-height:23.5px;;
    vertical-align:middle;
    text-align:center;
}
.menu-modal .user-info .top-icons a.btn-close{
    width:23.5px;
    margin-left:3.5px;
}
.menu-modal .user-info .top-icons a.btn-close img{
    width:15px;
    vertical-align:middle;
}
.menu-modal .user-info .top-icons a.btn-my{
    width:28px;
}
.menu-modal .user-info .top-icons a.btn-my img{
    width:19px;
    vertical-align:middle;
}
.menu-modal .top-menu{
    padding-top:9px;
}
.menu-modal .top-menu ul{
    font-size:0px;
}
.menu-modal .top-menu ul li{
    display:inline-block;
    padding-right:15px;
}
.menu-modal .top-menu ul li a{
    line-height:24px;
    color:#333;
    font-size:13px;
}
.menu-modal .top-menu ul li.line{
    position:relative;
    padding-left:15px;
}
.menu-modal .top-menu ul li.line:before{
    position:absolute;
    top:7px;
    left:0px;
    content:"";
    display:inline-block;
    width:1px;
    height:10px;
    background:#cccccc;
}
.menu-modal .top-menu ul li.join a span{
    display:inline-block;
    vertical-align:middle;
    width:35px;
    height:13px;
    line-height:13px;
    text-align:center;
    font-size:10px;
    color:#fff;
    background:#ffffff;
    border-radius:6.5px;
    margin-left:5px;
} 
.menu-modal .mid-menu{
    padding-top:5px;
}
.menu-modal .mid-menu ul{
    font-size:0px;
}
.menu-modal .mid-menu ul li{
    position:relative;
    display:inline-block;
    height:31.5px;
    line-height:31.5px;
    margin-right: 20px;
    padding-right: 15px;
}
.menu-modal .mid-menu ul li:before{
    content:'';
    position:absolute;
    top:50%;
    margin-top:-5px;
    right:0;
    width:1px;
    height:10px;
    background:#cccccc;
}
.menu-modal .mid-menu ul li:last-child:before{
    display:none;
}
.menu-modal .mid-menu ul li a{
    position:relative;
    display:inline-block;
    height:31.5px;
    line-height:31.5px;
    color:#999;
    font-size:13px;
}
.menu-modal .mid-menu ul li a span{
    position:absolute;
    top:0;
    left:-17px;
    display:inline-block;
    height:31.5px;
    line-height:31.5px;
}
.menu-modal .mid-menu ul li a span.icon01 img{
    width:15.5px;
    vertical-align:middle;
}
.menu-modal .mid-menu ul li a span.icon02 img{
    width:15px;
    vertical-align:middle;
}
.menu-modal .mid-menu ul li a span.icon03 img{
    width:12px;
    vertical-align:middle;
}
.menu-modal .cate-menu{
    padding-top:5px;
}
.menu-modal .cate-menu > ul{
    font-size:0px;
}
.menu-modal .cate-menu > ul > li{
    line-height:42.5px;
}
.menu-modal .cate-menu > ul > li > a{
    display:block;
    vertical-align:middle;
    font-size:15px;
    color:#000000;
}
.menu-modal .cate-menu > ul > li.toggle > a {font-weight:bold;}

.menu-modal .cate-menu > ul > li.bold > a{
    font-weight:bold;
}
.menu-modal .cate-menu > ul > li.toggle > a{
    background:url('/design/huit8/img/mobile/toggle_arr_dw.png')no-repeat center right;
    background-size:11px auto;
}
.menu-modal .cate-menu > ul > li.toggle > a.active{
    background:url('/design/huit8/img/mobile/toggle_arr_up.png')no-repeat center right;
    background-size:11px auto;
}
.menu-modal .cate-menu > ul > li.toggle > .depth{
    display:none;
    padding-top:9px;
    padding-bottom:9px;
    margin-top:10px;
    margin-bottom:10px;
    border-top:1px solid #e5e5e5;
    border-bottom:1px solid #e5e5e5;
}
.menu-modal .cate-menu > ul > li.toggle > .depth > ul{
    font-size:0px;
}
.menu-modal .cate-menu > ul > li.toggle > .depth > ul > li{
}
.menu-modal .cate-menu > ul > li.toggle > .depth > ul > li > a{
    display:block;
    line-height:35px;
    color:#333;
    font-size:15px;
}

/*Çì´õ È­ÀÌÆ® ¸ðµå*/
#header.main.white-mod .menu-bar{
    background:#fff;
}
#header.main.white-mod .menu-bar a.btn-menu{
    background: url(/design/huit8/img/mobile/btn_header_menu_black.png)no-repeat center center;
    background-size: 15.6px auto;
}
#header.main.white-mod .menu-bar a.btn-search{
    background: url(/design/huit8/img/mobile/btn_search_black.png)no-repeat center center;
    background-size: 17px auto;
}

#header.main.white-mod .menu-bar a.logo{
    background: url(/design/huit8/img/mobile/header_logo_black_2.png)no-repeat center center;
    background-size: 86.5px auto;
}
#header.main.white-mod .menu-bar .right-btn a.btn-my{
    background: url(/design/huit8/img/mobile/btn_my.png)no-repeat center center;
    background-size: 18px auto;
}
#header.main.white-mod .menu-bar .right-btn a.btn-cart{
    background: url(/design/huit8/img/mobile/btn_header_cart_black.png)no-repeat center center;
    background-size: 18px auto;
}

#header .gnb-wrap {
    margin-top:-9999px;
    display:none;
    height:45px;
    line-height:45px;
    background:#fff;
    transition:opacity 0.3s ease-in-out;
    opacity:0;
}
/*so*/
#header.gnb-open{
    display:block;
    margin-top:0px;
    opacity:1;
}
#header.gnb-open .gnb-wrap {
    display:block;
    margin-top:0px;
    opacity:1;
}
#header .gnb-wrap > div {
    font-size:0px;
}
#header .gnb-wrap .gnb .swiper-wrapper .swiper-slide {
    display:inline-block;
    width:auto;
    height:45px;
    padding:0px 15px;    
    color:#333;
    font-size:13px;
    line-height:45px;
    font-weight:bold;
    font-family:'Roboto Condensed';
}

#header.scroll-mod .gnb-wrap {
    display:block;
}
#header.scroll-mod .menu-bar {
    height:50px;
    line-height:50px;
}





/* BASIC css end */