/* BASIC css start */
.header-area{
    height:0;
}
.header-area.scroll{
    display:block;
    height:183px;
}
#header{
    width:100%;
 
}
#header.scroll{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:9999;
    background:#fff;
    transition:all 0.3s ease-in-out;
}

#header.inner{
}
 
/*Çì´õ À̺¥Æ®¹è³Ê*/
<!--.a1 {
     background-color: #000000;
     line-height:40px;
     text-align: center;
     font-size:12px;
     font-weight:;
     }
.a1 a {color:#ffffff; }
-->
 
#header .h-top{
    position:relative;
    height:120px;
    line-height:78px;
    background:transparent;
    text-align:center;
}


#header .h-top .h-mid h1.logo{
    display:inline-block;
}
#header .h-top .h-mid h1.logo > a{
    display:inline-block;
    height:15px;
    vertical-align:middle;
}
#header .h-top .h-mid h1.logo > a > img{
    height:100%;
    vertical-align:middle;
    
}


#header .h-top .left{
    position:absolute;
    top:0;
    left:8px;
    font-size:0px;
    height:80px;
    line-height:80px;
}

#header .h-top .left > li{
    display:inline-block;
    margin-left:15px;
}
#header .h-top .left > li:last-child{
    padding-right:10px;
}
#header .h-top .left > li > a{
    display:inline-block;
    font-size:11px;
    color:#000000;
    line-height:22px;
    font-weight:300;
    letter-spacing:1px;
    
}

#header .h-top .left > li > a:hover{
    text-decoration:underline;
    
}
#header .h-top .left > .dep > a{
    position:relative;
    padding-right:17px;
    
}
#header .h-top .left > .dep > a::after{
    content:'';
    position:absolute;
    top:10px;
    right:0;
    width:13px;
    height:13px;
    <!--background:url('/design/saerashop/2021_renew/pc/arr_01.png')no-repeat center center; -->
    transition:all 0.3s ease-in-out;
    
}
#header .h-top .left > .dep > a.active::after{
    transform:rotate(180deg);
    
}
#header .h-top .left > .dep .depth{
    top:60px;
    border:1px solid #000000;

}



#header .h-top .right{
    position:absolute;
    top:0;
    right:23px;
    font-size:0px;
    height:80px;
    line-height:80px;
}

#header .h-top .right > li{
    display:inline-block;
    margin-left:16px;
}
#header .h-top .right > li:last-child{
    padding-right:0px;
}
#header .h-top .right > li > a{
    display:inline-block;
    font-size:11px;
    color:#000000;
    line-height:34px;
    font-weight:300;
    letter-spacing:1px;
    
}

#header .h-top .right > li > a:hover{
    text-decoration:underline;
    
}
#header .h-top .right > .dep > a{
    position:relative;
    padding-right:17px;
    
}
#header .h-top .right > .dep > a::after{
    content:'';
    position:absolute;
    top:10px;
    right:0;
    width:13px;
    height:13px;
    background:url('/design/saerashop/2021_renew/pc/arr_01.png')no-repeat center center;
    transition:all 0.3s ease-in-out;
    
}
#header .h-top .right > .dep > a.active::after{
    transform:rotate(180deg);
    
}
#header .h-top .right > .dep .depth{
    top:60px;
    border:1px solid #000000;

}



#header .h-etc-wrap .h-mid{
    position:relative;
    text-align:center;
    height:68px;
    line-height:68px;
    background:#fff;
}
#header .h-etc-wrap .h-mid h1.logo{
    display:inline-block;
}
#header .h-etc-wrap .h-mid h1.logo > a{
    display:inline-block;
    height:15px;
    vertical-align:middle;
}
#header .h-etc-wrap .h-mid h1.logo > a > img{
    height:100%;
    vertical-align:top;
}
#header .h-etc-wrap .h-mid .s-menu{
    position:absolute;
    top:0;
    right:59px;
    font-size:0px;
}
#header .h-etc-wrap .h-mid .s-menu .icon{
    display:inline-block;
    margin-left:30px;
    line-height:72px;
}

<!-- #header .h-etc-wrap .h-mid .s-menu .kaka {
    width: 98px;
    line-height: 25px;
    background: #fee100;
    font-size:6;
    font-weight:450;
    color: #000;
    display: block;
    text-align: center;
    position: absolute;
    top: 20px;
    right: 155px;
    border-radius: 25px;
    -moz-animation-duration: 0.8s;
    -webkit-animation-duration: 0.8s;
    /* animation-duration: 1s; */
    -moz-animation-name: textMove;
    -webkit-animation-name: textMove;
    /* animation-name: textMove; */
    -moz-animation-iteration-count: infinite;
    /* -webkit-animation-iteration-count: infinite; */
    animation-iteration-count: infinite;
    /* transition-timing-function: ease-in-out; */
}

@keyframes textMove {
    30% {
        top: 15px;
}}
-->

#header .h-etc-wrap .h-mid .s-menu .icon > a{
    display:inline-block;
    padding:10px 0;
    vertical-align:middle;
}
#header .h-etc-wrap .h-mid .s-menu .dep .depth{
    top:52px;
    border:1px solid #000000;
}
#header .h-etc-wrap .h-mid .s-menu .search-wrap{
    position:relative;
}
#header .h-etc-wrap .h-mid .s-menu .search-wrap .icon-search{
    display:inline-block;
    width:20px;
    height:20px;
    background:url('/design/saerashop/2021_renew/pc/h_smenu_icon_01.png')no-repeat center center;
    transition:0.3s all ease-in;
}
#header .h-etc-wrap .h-mid .s-menu .search-wrap .icon-search.active{
    background:url('/design/saerashop/2021_renew/pc/h_smenu_icon_close.png')no-repeat center center;
}
#header .h-etc-wrap .h-mid .s-menu .search-wrap .sch{
    display:none;
    position:absolute;
    top:16.5px;
    left:-245px;
    z-index:9;
}
#header .h-etc-wrap .h-mid .s-menu .search-wrap .sch.active{
    display:block;
}
#header .h-etc-wrap .h-mid .s-menu .search-wrap .sch fieldset{
    position:relative;
    height:39px;
    line-height:39px;
}
#header .h-etc-wrap .h-mid .s-menu .search-wrap .sch input{
    width:240px;
    height:39px;
    line-height:39px;
    <!--border:1px solid #434343;-->
    padding:0 15px;
    box-sizing:border-box;
    font-size:14px;
    font-weight:normal;
}
#header .h-etc-wrap .h-mid .s-menu .search-wrap .sch fieldset > a{
    position:absolute;
    top:0;
    right:7px;
    width:39px;
    height:39px;
    text-align:center;
}
#header .h-etc-wrap .h-mid .s-menu .search-wrap .sch fieldset > a > img{
    vertical-align:middle;
    width:34px;
    height:auto;
}
#header .h-etc-wrap .h-mid .s-menu .icon .icon-cart{
    position:relative;
}
#header .h-etc-wrap .h-mid .s-menu .icon .icon-cart > .cart-num{
    position:absolute;
    top:12px;
    right:-3px;
    width:15px;
    height:15px;
    line-height:15px;
    border-radius:8.5px;
    background:#000000;
    color:#fff;
    font-size:13px;
    text-align:center;
    font-family:'futura', 'NanumbarumGothic';
    font-weight:normal;
}
#header .gnb-wrap{
    background:#fff;
    <!-- border-top:1px solid #eeeeee;
    border-bottom:1px solid #eeeeee; -->
}
#header .gnb-wrap .gnb{
    max-width:1300px;
    margin:0 auto;
    line-height:52px;
    font-size:0px;
    text-align:center;
}
#header .gnb-wrap .gnb > li{
    display:inline-block;
    margin:0 20px;
    vertical-align:middle;
}
#header .gnb-wrap .gnb > li > a{
    display:inline-block;
    font-size:11px;
    height:20px;
    line-height:20px;
    color:#000;
}
#header .gnb-wrap .gnb > li > a:hover{
    text-decoration:underline;
}
#header .gnb-wrap .gnb > li.all{
    margin:0;
}
#header .gnb-wrap .gnb > li > a.btn-allmenu > span{
    display:inline-block;
    vertical-align:middle;
    width:26px;
    height:26px;
    background:url('/design/saerashop/2021_renew/pc/btn_allmenu.png')no-repeat center center;
    transition:0.3s all ease-in-out;
}
#header .gnb-wrap .gnb > li > a.btn-allmenu.active > span{
    background:url('/design/saerashop/2021_renew/pc/btn_allmenu_close.png')no-repeat center center;
}
#header .all-menu-wrap{
    display:none;
    font-size:0px;
    background:#ffffff;
    padding:55px 0 72px 0;
}
#header .all-menu-wrap a:hover{
    text-decoration:underline;
}
#header .all-menu-wrap .inner{
    width:1358px;
    margin:0 auto;
}
#header .all-menu-wrap .left{
    width:50%;
    display:inline-block;
    vertical-align:top;
}
#header .all-menu-wrap .all-menu-box > h3{
    line-height:20px;
    font-size:11px;
    font-weight:500;
    color:#000;
    text-transform: uppercase;
    margin-bottom:27px;
}
#header .all-menu-wrap .all-menu-box > h3 > a{
    line-height:21px;
    font-size:11px;
    font-weight:500;
    color:#000;
    text-transform: uppercase;
}
#header .all-menu-wrap .all-menu-box .cate-row{
    position:relative;
    height:21px;
    line-height:21px;
    padding-left:187px;
    margin-bottom:15px;
}
#header .all-menu-wrap .all-menu-box .cate-row > h4{
    position:absolute;
    top:0;
    left:0;
    display:inline-block;
    vertical-align:top;
    font-size:11px;
    font-weight:300;
    color:#000;
}
#header .all-menu-wrap .all-menu-box .cate-row > h4 a{
    display:inline-block;
    vertical-align:top;
    font-size:11px;
    font-weight:500;
    color:#000;
}
#header .all-menu-wrap .all-menu-box .cate-row > h4 a.bold{
    font-weight:500;
}
#header .all-menu-wrap .all-menu-box .cate-row > ul{
    display:inline-block;
    vertical-align:top;
    font-size:0px;
}
#header .all-menu-wrap .all-menu-box .cate-row > ul > li{
    display:inline-block;
    vertical-align:top;
    margin-right:11px;
}
#header .all-menu-wrap .all-menu-box .cate-row > ul > li::last-child{
    margin-right:0px;
}
#header .all-menu-wrap .all-menu-box .cate-row > ul > li > a{
    position:relative;
    display:inline-block;
    vertical-align:top;
    font-size:11px;
    font-weight:300;
    color:#888888;
    padding-right:11px;
}
#header .all-menu-wrap .all-menu-box .cate-row > ul > li > a::before{
    content:'';
    position:absolute;
    top:7.5px;
    right:0;
    display:inline-block;
    width:1px;
    height:8px;
    background:#d5d5d5;
}
#header .all-menu-wrap .all-menu-box .cate-row > ul > li:last-child > a{
    padding-right:0px;
}
#header .all-menu-wrap .all-menu-box .cate-row > ul > li:last-child > a::before{
    display:none;
}
#header .all-menu-wrap .right{
    width:50%;
    display:inline-block;
    vertical-align:top;
    padding-left:44px;
    box-sizing:border-box;
}
#header .allmenu-banner-wrap{
    margin-top:54px;
}
#header .allmenu-banner-wrap > .banner{
    display:inline-block;
    vertical-align:top;
    width:550px;
}
#header .allmenu-banner-wrap > .banner > img{
    width:100%;
    vertical-align:top;
}

/*½ºÅ©·Ñ Çì´õ*/
#header.scroll{
    border:0px;
    background:transparent;
}
#header.scroll .h-top{
    border:0px;
    background:transparent;
}

#header.scroll ul.h-mid{
    margin-right:46.1%;
    text-align:center;
}

#header.scroll .h-top .h-mid h1.logo > a > img{
  text-align:center;   
}

#header.scroll .h-mid{
    display:inline-block;
    position:absolute;
    top:0;
    right:0;
    height:inherit;
    line-height:inherit;
    background:transparent;
    
}
#header.scroll .gnb-wrap{
    border:0px;
    background:transparent;
}
#header.scroll .gnb-wrap .gnb{
    line-height:54px;
    text-align:left;
}
#header.scroll .h-etc-wrap {
    position:relative;
    width:1300px;
    margin:0 auto;
}
#header.scroll .h-etc-wrap .h-mid .logo{
    display:none;
}

#header.scroll .h-etc-wrap .h-mid .s-menu{
    position:relative;
    top:auto;
    right:auto;
}
#header.scroll .gnb-wrap .gnb > li{
    margin:0 13px;
}


/*Çì´õ µª½º¸Þ´º*/
.dep{
    position:relative;
}
.dep > a{}
.dep .depth{
    display:none;
    width: -moz-max-content;
    width: -webkit-max-content;
    width: -o-max-content;
    width: -ms-max-content;
    position:absolute;
    top:42px;
    left:50%;
    background:#ffffff;
    border:1px solid #000000;
    z-index:50;
    padding:25px;
    transform: translate(-50%,0);
}
.dep .depth:before{
    content:'';
    width:20px;
    height:7px;
    background:url('/design/saerashop/2021_renew/pc/depth_top_arr_01.png')no-repeat center center;
    position:absolute;
    top:-7px;
    left:50%;
    margin-left:-10px;
}
.dep .depth.active{
    display:flex;
    flex-flow: column;
}
.dep .depth > li {
    line-height:21px;
    margin-bottom:6px;
}
.dep .depth > li > a{
    display:block;
    text-align:center;
    line-height:15px;
    font-size:11px;
    font-weight:300;
    color:#000;
    letter-spacing:1px;
}
.dep .depth > li > a:hover{
    text-decoration:underline;
}
#header.scroll .h-etc-wrap .h-mid .s-menu .icon{
    line-height:54px;
    vertical-align:top;
}
#header.scroll .h-etc-wrap .h-mid .s-menu .icon{
    line-height:54px;
    vertical-align:top;
}
#header.scroll .h-etc-wrap .depth{
    top:54px;
}
#header.scroll .h-etc-wrap .h-mid .s-menu .dep .depth{
    top:54px;
}
#header.scroll .h-etc-wrap .h-mid .s-menu .search-wrap .sch{
    top:7.5px;
}
/* BASIC css end */