/* BASIC css start */
#preview_wrap {display:none !important;}
a:hover,
a:active,
a:focus {text-decoration:none;}

.top_banner1 { background: #182038 !important; }

/* À̺¥Æ® ŸÀÓ °íÁ¤ */
.timesale.ss{    background: #000000; color: #fff; position: fixed; top: 0; left: 0; width: 100%; height: 36px; z-index: 9999; text-align:center;}
.timesale.ss a{display:block;width:100%;height:100%;}
.timesale.ss .time_img{display: inline-block; vertical-align: middle;}
.timesale.ss .time_img img{height:19px;}
.time_title, #demo, .time_txt{display: inline-block;   padding: 9px 5px; font-size: 13px; color:#fff;}
.timesale.ss .header_close{position: absolute; top:3px; right:23px; cursor:pointer;}
.timesale.ss.close{display: none;}
header.close{margin-top:0;}

/* »ó´Ü °íÁ¤ ¹è³Ê */
#pagewrap {position:relative; z-index:10; margin:0 auto;}
#close {color:#fff; font:bold 12px dotum; cursor:pointer;}
#div1 {background:#000; width:100%; height:80px;}
#div2 {width:100%;}
#div_laypopup {background:#ccc;}
.slide_btn {width:1903px; height:89px;}
#banner_wrap {position:relative; width:100%;}
#banner_wrap .top_slide {overflow:hidden; height:89px;}
#banner_wrap .top_slide .slide {height:89px; background-repeat:no-repeat; background-position:center;}
#banner_wrap .top_slide .slide0 {background-color:#58e1e9; background-image:url('/design/xexymix/image/renewal/header/top_slide01.jpg');}
#banner_wrap .top_slide .slide1 {background-color:#f3e5fe; background-image:url('/design/xexymix/image/renewal/header/top_slide02.jpg');}
#banner_wrap .top_slide .slide2 {background-color:#ffea5d; background-image:url('/design/xexymix/image/renewal/header/top_slide03.jpg');}
#banner_wrap .top_slide .slick-arrow {position:absolute; top:50%; z-index:5; width:24px; height:44px; margin-top:-22px; padding:0; background-repeat:no-repeat; background-position:center; background-color:transparent; color:transparent; font-size:0;}
#banner_wrap .top_slide .slick-prev {left:50%; margin-left:-600px; background-image:url('/design/xexymix/image/topbnr_prev.png');}
#banner_wrap .top_slide .slick-next {right:50%; margin-right:-600px; background-image:url('/design/xexymix/image/topbnr_next.png');}
#banner_wrap .btn #up {position:absolute; right:42px; top:50%; z-index:5; width:36px; height:36px; margin-top:-18px; cursor:pointer;}

header { position:fixed; top:0; min-width:1280px; 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: #ff6d44; 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: 20%; }
header .loginArea li.basketBtn { position:relative; }
header .loginArea li.basketBtn .ea { position:absolute; top:33px; right:-12px; color:#fff; font-size:9px; background:#ff2d7a; 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: #ff6d44; 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 { margin-top: 23px; }
.tab-fixed-wrap.active .weap-cont .category li { height: 65px; line-height: 65px; }
.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.active .weap-cont .category li a.on:after { top: 23px; }
.tab-fixed-wrap.active .weap-cont .category li a.on2:after { top: 23px; }


.tab-fixed-wrap .btn-menu { width: 5%; }
.tab-fixed-wrap .topLogo { position: relative; width: 12%; height: 20px; overflow: hidden; margin-top: 35px; }
.tab-fixed-wrap .topLogo .swiper-slide { text-align: left; }

.tab-fixed-wrap .weap-cont { position: relative; display: flex; max-width: 1920px; min-width:1440px; 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;
     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; }

.menuBox { overflow: hidden; height: 28px; }
#menuSlide { list-style: none; margin: 0; padding: 0; position: relative; top: 0; }
#menuSlide p { position: relative; line-height: 28px; font-weight: 600; color: #ff2d7a; }
#menuSlide .cate_icon1 { padding-left: 20px; }
#menuSlide .cate_icon1:after { content: ""; position: absolute; top: 4px; left: 25px; background: url(//xexymix.jpg3.kr/xexymix/main/web/2024/cate_icon_240430_1.png) no-repeat; background-size: cover; width: 11px; height: 18px; }

#hd_search { position: fixed; z-index: 101; right:-470px; top: 0px; bottom: 0; width: 470px; background: #fff; padding: 80px 35px 30px 35px; box-sizing: border-box; -webkit-transform: translateZ(0); }
#hd_search h1 {font-size: 30px; padding-bottom: 15px; color:#000; font-weight:600;  }
#hd_search .search_wrap {border: 2px solid #000; border-radius: 2px; }
#hd_search .search_wrap .MS_search_word {width: 90%; max-width: 350px; height: 50px; padding: 0 0 0 9px; border: 0; line-height: 50px; font-size: 15px; color: #000; background: #fff; font-weight: bold; letter-spacing: 1px; }
#hd_search .search_wrap a {display:inline-block; *display:inline;  }

#hd_search .word {margin-top:30px; }
#hd_search .word dt {font-size: 21px; margin-bottom: 20px; display: block; font-weight:500; color:#000; }
#hd_search .word dd {margin-bottom:10px; }
#hd_search .word dd a {display: inline-block; font-size: 15px; position: relative; padding: 5px 7px; margin: 0 7px 10px 0; background: #f3f3f3; }
#hd_search .word dd a:hover { background: #000; color: #fff; }
#hd_search .word dd a:before { content: '#'; margin-right: 5px; }

#hd_search .color { width: 90%; padding-top: 25px; }
#hd_search .color p { font-size: 21px; margin-bottom: 20px; font-weight: 500; }
#hd_search .color ul { overflow: hidden; }
#hd_search .color li { width: 15.6%; display: inline-block; text-align: center; font-size: 13px; margin-bottom: 20px; }
#hd_search .color li a { display: block; font-size: 13px; }
#hd_search .color li span { width: 30px; height: 30px; border-radius: 15px; margin: 0 auto 5px; display: block; vertical-align: middle; border: 1px solid #d9d9d9; }

#hd_search .searchClose { position: absolute; top: 40px; right: 35px; cursor: pointer; }
#hd_search .searchClose img { width: 20px; }
#hd_search.show {right:0; }
.asideBack {position: fixed; background-color: rgba(0,0,0,0.6); top: 0px; left: 0; right: 0; bottom: 0; z-index: 100; visibility: hidden; opacity: 0; filter: alpha(opacity=00); }
.asideBack.show { visibility: visible; opacity: 1; filter: alpha(opacity=100); }




.header-wrap { background: #182038 !important; }
#footer .topArea .cs .cs_btn { background: #182038 !important; }
.quick-cont .plus-btn { background: #182038 !important; }
.quick-cont .plus-btn-x { background: #182038 !important; }
.quick-cont .top-btn { background: #182038 !important; }
.quick-cont .bottom-btn { background: #182038 !important; }
.quick-cont .menu { background: #182038 !important; }
.quick-cont .menu ul { background: #182038 !important; }


@-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;
}


/* BASIC css end */