/* BASIC css start */
header { position:fixed; top:0; z-index:100; margin:0 auto; width:100%; }
header.active { height:50px; }

header .multiShop { position:absolute; top:-35px; left:3%; font-size:9px; letter-spacing:0.88px; z-index:50; color:#fff; }
header .multiShop .nowTit {cursor:pointer; width: 60px; height: 35px; line-height: 35px; }
header .multiShop .nowTit img { vertical-align: middle; }
header .multiShop .box {position:relative; z-index:50; padding:5px; text-align:left; border:1px solid #ccc; display:none; background:#fff; }
header .multiShop .box a {display:block; padding:5px 10px; font-size:11px; }
header .multiShop .box a:hover { color: #eb5e3e; text-decoration: underline; text-underline-position: under; }
header .multiShop:hover .box {display:block; }

header .loginArea { position:relative; width: 8%; height: 90px; line-height: 90px; min-width: 176px; }
header .loginArea li { position: relative; float: left; padding-left: 19%; }
header .loginArea li.basketBtn { position:relative; }
header .loginArea li.basketBtn .ea { position:absolute; top:33px; right:-12px; color:#fff; font-size:9px; background:#eb5e3e; width: 18px; height: 18px; line-height: 19px; border-radius:50%; text-align:center; }
header .loginArea li .subBox { position:absolute; z-index:40; display:none; left:50%; width:100px; margin-left: -30px; padding:15px; background:#fff; border:1px solid #eeeeee; text-align:center; }
header .loginArea li .subBox a { display:block; font-size: 14px; line-height: 33px; }
header .loginArea li.mypage:hover .subBox { display:block; }
header .loginArea li.mypage:hover .subBox a:hover { color: #eb5e3e; text-decoration: underline; text-underline-position: under; }
header .loginArea a { display:inline-block; }
header .loginArea .searchBtn {cursor:pointer; }
header .loginArea .searchBtn img { vertical-align: middle; }
header .loginArea .kakao_join { position:absolute; top: 7px; right: -34px; height: 25px; z-index: 41; }
header .loginArea .kakao_join li.mypage:hover { display: none; }


.tab-fixed-wrap { position: relative; width: 100%; text-align:center; background: #fff; border-bottom: 1px solid #eeeeee; z-index: 50; 
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    transform: translateY(35px);
}
.tab-fixed-wrap.active { position:fixed; top:0; left:0; height: 66px; transform: translateY(0px); }
.tab-fixed-wrap.active .weap-cont { height: 65px; }
.tab-fixed-wrap.active .weap-cont p.all-menu { margin-top: 12px; }
.tab-fixed-wrap.active .weap-cont .topLogo a { top: 24px; }
.tab-fixed-wrap.active .weap-cont .category li { height: 65px; line-height: 65px; }
.tab-fixed-wrap.active .weap-cont .category li a.on:after { top: 23px; }
.tab-fixed-wrap.active .weap-cont .category li a.new:after { top: 18px; }
.tab-fixed-wrap.active .weap-cont .loginArea { height: 65px; line-height: 65px; }
.tab-fixed-wrap.active .weap-cont .loginArea .basketBtn .ea { top: 21px; }
.tab-fixed-wrap.active .weap-cont .loginArea .kakao_join { display: none; }

.tab-fixed-wrap .btn-menu { width: 5%; }
.tab-fixed-wrap .topLogo { position: relative; width: 11%; }
.tab-fixed-wrap .topLogo a { position: absolute; top: 35px; left: 0; }
.tab-fixed-wrap .weap-cont { position: relative; display: flex; max-width: 1920px; min-width:1024px; width:100%; height: 90px; margin: 0 auto; padding: 0 3%; background: #fff; z-index:40; }


p.all-menu{ position: relative; display:block; width:40px; height:40px; margin-top: 24px; }
p.all-menu span { display:block; position:absolute; left:10px; width:20px; height:3px; background:#3c3c3c;
    -webkit-transition-duration: .4s;
    -moz-transition-duration: .4s;
    -o-transition-duration: .4s;
    -ms-transition-duration: .4s;
    transition-duration: .4s; 
}
p.all-menu span:nth-child(1) {top:11px;}
p.all-menu span:nth-child(2) {top:19px;}
p.all-menu span:nth-child(3) {top:27px;}
p.all-menu.active span:nth-child(1) {top:19px;left:8px;width:23px;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    transform:rotate(45deg);
}
p.all-menu.active span:nth-child(2) {opacity:0;filter:alpha(opacity=0);
    -webkit-transform:translateX(-30px);
    -moz-transform:translateX(-30px);
    -o-transform:translateX(-30px);
    -ms-transform:translateX(-30px);
    transform:translateX(-30px);
}
p.all-menu.active span:nth-child(3) {top:19px;left:8px;width:23px;
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    transform:rotate(-45deg);
}

.tab-fixed-wrap .tip { position:absolute; right:35px; top:20px; display:inline-block; font-size:14px; }
.tab-fixed-wrap .tip::before { content:''; width:5px; height:5px; background-color:#f70012; border-radius:3px; position:absolute; left:-10px; top:-2px; }



@-webkit-keyframes shakeY {
    0%, to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translate3d(0, -3px, 0);
        transform: translate3d(0, -3px, 0)
    }
    20%, 40%, 60%, 80% {
        -webkit-transform: translate3d(0, 3px, 0);
        transform: translate3d(0, 3px, 0)
    }
}
@keyframes shakeY {
    0%, to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translate3d(0, -3px, 0);
        transform: translate3d(0, -3px, 0)
    }
    20%, 40%, 60%, 80% {
        -webkit-transform: translate3d(0, 3px, 0);
        transform: translate3d(0, 3px, 0)
    }
}
.shakeY {
    -webkit-animation-name: shakeY;
    animation-name: shakeY;
    animation-fill-mode: both;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}


@media screen and ( max-width: 1440px ) {
    .tab-fixed-wrap .category { min-width: 965px; }
    .tab-fixed-wrap .weap-cont { padding: 0 1%; }
}

/* BASIC css end */