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

.tab-fixed-wrap { position: relative; width: 100%; padding-top: 36px; border-bottom: 1px solid #eeeeee; background: #fff; z-index: 50;transform: translateY(0px); }
.tab-fixed-wrap.active { position:fixed; top:0; left:0; transform: translateY(-25px); }


/* ù¹ø° ¿µ¿ª */
.tab-fixed-wrap .topLogo { position: relative; width: 270px; }
.tab-fixed-wrap .topLogo a { position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
.tab-fixed-wrap .topLogo a img { width: auto; height: 22px; }
.tab-fixed-wrap .weap-cont { position: relative; display: flex; max-width: 1440px; min-width:1280px; height: 30px; margin: 0 auto 12px; padding-inline: 20px; background: #fff; z-index:40; }

.tab-fixed-wrap .categoryM { display: flex; width: 100%; margin: 0 auto; }
.tab-fixed-wrap .categoryM:after { content:''; display:block; clear:both; }
.tab-fixed-wrap .categoryM li { position: relative; display: block; color:#fff; height: 30px; line-height: 30px; padding: 0 10px; }
.tab-fixed-wrap .categoryM li a { position: relative; display: flex; width: 100%; height: 100%; font-size: 15px; font-weight:400; align-items: center; cursor: pointer; }
.tab-fixed-wrap .categoryM li a.on:after { position: absolute; top: 8px; right: -6px; width: 4px; height: 4px; background: #eb5e3e; border-radius:50%; content: ""; }
.tab-fixed-wrap .categoryM li a.todayT img { width: 17px; margin-right: 2px; vertical-align: middle; }

.tab-fixed-wrap .loginArea { position:relative; width: auto; height: 30px; line-height: 30px; min-width: 85px; }
.tab-fixed-wrap .loginArea li { position: relative; float: left; margin-left: 19%; }
.tab-fixed-wrap .loginArea li.basketBtn { position:relative; }
.tab-fixed-wrap .loginArea li.basketBtn .ea { position:absolute; top:3px; right:-9px; color:#fff; font-size:9px; background:#eb5e3e; width: 17px; height: 17px; line-height: 18px; border-radius:50%; text-align:center; }
.tab-fixed-wrap .loginArea li .subBox { position:absolute; z-index:40; display:none; left:50%; width:100px; padding:15px; transform: translateX(-50%); background:#fff; border:1px solid #eeeeee; text-align:center; }
.tab-fixed-wrap .loginArea li .subBox a { display:block; font-size: 14px; line-height: 33px; }
.tab-fixed-wrap .loginArea li.mypage:hover .subBox { display:block; }
.tab-fixed-wrap .loginArea li.mypage:hover .subBox a:hover { color: #eb5e3e; text-decoration: underline; text-underline-position: under; }
.tab-fixed-wrap .loginArea a { display:inline-block; }
.tab-fixed-wrap .loginArea .kakao_join { position:absolute; top: -20px; right: -31px; width: 96px; height: 25px; z-index: 41; opacity: 1; }
.tab-fixed-wrap .loginArea .kakao_join img { width: 100%; }
.tab-fixed-wrap .loginArea .kakao_join li.mypage:hover { opacity: 0; }

.tab-fixed-wrap.active .loginArea .kakao_join { display: none; }


/* µÎ¹ø° ¿µ¿ª */
.tab-fixed-wrap .menu-cont { display: flex; max-width: 1440px; min-width:1280px; height: 36px; margin: 0 auto 12px auto; padding-inline: 20px; }
.tab-fixed-wrap .menu-cont .inform { position:relative; padding-right: 80px; }
.tab-fixed-wrap .menu-cont .inform img { width: 18px; height: 18px; transform: translateY(100%); }
.tab-fixed-wrap .menu-cont .inform.in:after { content: ""; position: absolute; top: 19px; width: 62px; height: 21px; background: url(//xexymix.jpg3.kr/xexymix/main/mobile/2025/icon_timeEvent_2.png) no-repeat; background-size: contain; }
.tab-fixed-wrap .menu-cont .inform.out:after { content: ""; position: absolute; top: 18px; width: 79px; height: 20px; background: url(//xexymix.jpg3.kr/xexymix/main/mobile/2025/gnbR_bn_join.png) no-repeat; background-size: contain; }

.tab-fixed-wrap .categoryS { display: flex; width: 100%; margin: 0 auto; }
.tab-fixed-wrap .categoryS:after { content:''; display:block; clear:both; }
.tab-fixed-wrap .categoryS li { position: relative; display: block; color:#fff; height: 36px; line-height: 36px; padding: 0 12px; }
.tab-fixed-wrap .categoryS li:first-child { padding-left: 0 !important; }
.tab-fixed-wrap .categoryS li a { position:relative; display: flex; height: 100%; font-size: 17px; font-weight:500; align-items: center; cursor: pointer; }
.tab-fixed-wrap .categoryS li a.active:before { content: ""; position: absolute; bottom: -12px; left: 0; width: 100%; height: 3px; background: #000; }
.tab-fixed-wrap .categoryS li a.on:after { position: absolute; top: 10px; right: -5px; width: 4px; height: 4px; background: #eb5e3e; border-radius:50%; content: ""; }
.tab-fixed-wrap .categoryS li a.event:after { content: "15%"; position: absolute; top: 29px; right: 4px; color: #eb5e3e; font-size: 9px; font-weight: 600; }
.tab-fixed-wrap .categoryS li .cateBox { display: none; position:absolute; z-index:40; display:none; left:50%; width:140px; margin-left: -70px; padding: 10px; background:#fff; border:1px solid #eeeeee; text-align:center; }
.tab-fixed-wrap .categoryS li .cateBox a { display:block; font-size: 14px; padding: 7px 0; }
.tab-fixed-wrap .categoryS li .cateBox a:hover { color: #eb5e3e; text-decoration: underline; text-underline-position: under; }

.tab-fixed-wrap .categoryS li a.on2:after { position: absolute; top: 35px; right: 11%; width: 7px; height: 7px; background: #eb5e3e; border-radius:50%; content: ""; 
    -webkit-animation: blink 1.2s ease-in-out infinite alternate;
    -moz-animation: blink 1.2s ease-in-out infinite alternate;
    animation: blink 1.2s ease-in-out infinite alternate;
}
.tab-fixed-wrap .categoryS li .up_icon { padding-right: 10px; }
.tab-fixed-wrap .categoryS li .up_icon:after { content: "UP"; position: absolute; padding-left: 2px; color: #eb5e3e; font-size: 10px; font-weight: 600; animation: slideInUp 1.5s ease infinite; animation-iteration-count: infinite; }

.tab-fixed-wrap .ranking_slide { padding-right: 15px; }
.tab-fixed-wrap .ranking_slide #mk_new_ranking_1 { transform: translateY(3px); }

.hidden-contents { display: none; }

/* °Ë»öâ */
.searchBtn .search_wrap { position: relative; }
.searchBtn .search_wrap .MS_search_word { width: 230px; height: 36px; line-height: 36px; padding: 0 50px 0 25px; border-radius: 36px; border: 0; font-size: 14px; color: #000; background: #f5f5f5; }
.searchBtn .search_wrap a { position:absolute; top: 0; right: 0; width: 36px; }
.searchBtn .search_wrap a img { width: 95%; padding: 14%; }


/* Çܹö°Å ¸Þ´º ¹öÆ° */
.categoryS .all-menu { position: relative; display:block; width:24px; height:24px; top: 50%; transform: translateY(-50%); }
.categoryS .all-menu.active:before { display: none; }
.categoryS .all-menu span { display:block; position:absolute; left:1px; width:18px; height:2px; background:#111; }
.categoryS .all-menu span:nth-child(1) {top:11px;}
.categoryS .all-menu span:nth-child(2) {top:17px;}
.categoryS .all-menu span:nth-child(3) {top:23px;}


/* Çܹö°Å ¸Þ´º ¸ñ·Ï */
.cateBox { display:none; position: relative; background:#fff; z-index:50; width: 100%; border-top: 1px solid #eeeeee; }
.cateBox:after { content: ""; position: fixed; top: 127px; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.5); }
.cateBox .menu-all { position: relative; width: 100%; min-width: 1400px; margin: 0 auto; height: 480px; padding: 50px 20px; background: #fff; z-index: 40; display: flex; justify-content: center; }
.cateBox .menu-all li { vertical-align: top; text-align: left; }
.cateBox .menu-all li a { position:relative; display:block; font-size:14px; color:#8f8f8f; margin-bottom:13px; }
.cateBox .menu-all li a:hover { color: #000; }
.cateBox .menu-all a.on:after { position: absolute; width: 7px; height: 7px; margin-left: 3px; background: #eb5e3e; border-radius: 50%; content: ""; }
.cateBox .menu-all a.acc:after { position: absolute; top: -2px; left: 31px; color: #eb5e3e; font-size: 10px; font-weight: 600; content: "20%"; }
.cateBox .menu-all .bold { color:#000; font-size:16px; font-weight: 500; }

.cateBox .menu-list { width: 970px; display: flex; justify-content: flex-start; align-items: flex-start; }
.cateBox .menu-list ul { height: 100%; }
.cateBox .menu-list .m_left { display: none; width: 160px; padding-right: 40px; margin-right: 40px; border-right: 1px solid #e8e8e8; }

.cateBox .menu-list .m_centerAll { width: 940px; display: flex; }
.cateBox .menu-list .m_centerAll li { width: 115px; }

.cateBox .menu-list .m_center { display: flex; }
.cateBox .menu-list .m_center li { width: 115px; }
.cateBox .menu-list .m_center.planList li.cateAll { width: 120px !important; }

.cateBox .menu-list .planList li { width: 200px !important; }

.cateBox .menu-list .titpd { padding-top: 20px; }

.cateBox .menu-community { width: 187px; border-left: 1px solid #e8e8e8; padding-left: 40px; }
.cateBox .menu-community ul { width:100%; display: flex; }
.cateBox .menu-community li {  }
.cateBox .menu-community li:first-child { padding-right: 40px; }


/* Ä«Å×°í¸® ¼­ºê ¹è³Ê */
.cate_s_banner { width: 240px; height: 150px; margin: 0 !important; }
.cate_s_banner .swiper-slide { height: 122px; }
.cate_s_banner .swiper-slide a { display:block; border-radius: 10px; overflow: hidden; }
.cate_s_banner .swiper-slide img { width: 100%; }
.cate_s_banner .swiper-pagination { bottom: 0; }
.cate_s_banner .swiper-pagination-bullet { background: #f3f3f3; width: 15px; height: 2px; margin: 0 !important; border-radius: 0; opacity: 1; }
.cate_s_banner .swiper-pagination-bullet-active { background: #000; }


/* ÇÁ·Î¸ð¼Ç ¸Þ´º À§·Î ½½¶óÀ̵å */
.menuBox { display: inline-block !important; overflow: hidden; height: 28px !important; }
.menuSlide { position: relative; list-style: none; margin: 0; padding: 0; overflow: hidden; }
.menuSlide p { position: relative; line-height: 28px; font-weight: 600; }
.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; }

.menuBox.colorPK .menuSlide p { color: #111; }


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

@-webkit-keyframes blink {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-moz-keyframes blink {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes blink {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


@keyframes slideInUp {
    0% {
        -webkit-transform: translate3d(0,80%,0);
        transform: translate3d(0,80%,0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.animate__slideInUp {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp
}


.hd_search.active { top: 101px !important; }

/* BASIC css end */