/* BASIC css start */
::-webkit-scrollbar { width:10px; height:5px; } 
::-webkit-scrollbar-track { background-color:#F5F1EF; } 
::-webkit-scrollbar-thumb { background:#D9D9D9; border-radius:50px; } 
::-webkit-scrollbar-thumb:hover { background:#D9D9D9 } 
::-webkit-scrollbar-thumb:active { background:#D9D9D9 } 
::-webkit-scrollbar-button { display:none; } 


#cloud-shoplive-user-id,
#cloud-shoplive-user-name { font-size:0; line-height:0; }


#wib_Header{background:#fff;z-index:100;position:fixed;top:0;right:0;left:0;max-height:220px;box-shadow: 0px 0px 20px rgba(179, 173, 171, 0.15);}
#wib_Header.z102{z-index:102}
.hd_inner{padding:0 40px}
#quickm{display:none !important}
/* »ó´ÜÆ˾÷¹è³Ê */
#wib_Header #toppop{background:#212322;line-height:50px; height:50px; overflow:hidden; text-align:center; position: relative;}
#wib_Header #toppop .swiper-container { height:50px; overflow:hidden; }
#wib_Header #toppop a{display:block;font-size:15px;color:#ffffff;margin:0 auto;font-weight:500;letter-spacing:-0.03em}
#wib_Header #toppop .toppop_x{position:absolute;top:18px;right:40px;width:14px;height:14px;background:url('/design/happyprinc/wib/img/pop_ban_x.svg')no-repeat center;cursor:pointer;z-index:10;}
/*·Î°í*/
#wib_Header #logoarea{}
#wib_Header #logoarea .hd_inner:after{content:"";display:block;clear:both}
#wib_Header #logoarea .hd_inner > div{display:inline-block;padding:50px 0 20px; }
#wib_Header #logoarea .hd_inner > div.logo a { }
#wib_Header #logoarea .hd_inner > div.logo img { width:230px; height:auto; }
/*»ó´Ü ¿ìÃø¸Þ´º*/
#wib_Header #logoarea .hd_inner > div.right_menu{float:right}
#wib_Header #logoarea .hd_inner > div.right_menu > ul{font-size:0}
#wib_Header #logoarea .hd_inner > div.right_menu > ul > li{display:inline-block;position: relative;margin-left:25px}
#wib_Header #logoarea .hd_inner > div.right_menu > ul > li > a{font-size:0;width:30px;height:30px;display:block;}
#wib_Header #logoarea .hd_inner > div.right_menu > ul > li > a.login_btn{background:url('/design/happyprinc/wib/skin/common/icon_user.svg')no-repeat center; background-size:auto 30px; margin-bottom:5px;}
#wib_Header #logoarea .hd_inner > div.right_menu > ul > li > a.mem_btn{background:url('/design/happyprinc/wib/skin/common/icon_user.svg')no-repeat center; background-size:auto 30px; margin-bottom:5px;}
#wib_Header #logoarea .hd_inner > div.right_menu > ul > li > a.search_btn{background:url('/design/happyprinc/wib/skin/common/icon_search.svg')no-repeat center; background-size:auto 30px; }
#wib_Header #logoarea .hd_inner > div.right_menu > ul > li > a.cart_btn{background:url('/design/happyprinc/wib/skin/common/icon_cart.svg')no-repeat center; background-size:auto 30px; position: relative;}
#wib_Header #logoarea .hd_inner > div.right_menu > ul > li > a.cart_btn #user_basket_quantity{display:block;width:18px;height:18px;background:#f6ee99;border-radius:50%;font-size:12px;color:#202323;letter-spacing:-0.03em;line-height:18px;position: absolute;right:-10px;top:0;text-align:center}
#wib_Header #logoarea .hd_inner > div.right_menu > ul > li ul{display:none}
#wib_Header #logoarea .hd_inner > div.right_menu > ul > li .drop_menu{position: absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);background:#fff;border:1px solid #dee0e5;padding:23px 20px;width:104px;box-sizing:border-box}
#wib_Header #logoarea .hd_inner > div.right_menu > ul > li .drop_menu2{top:calc(100% + 42px)}
#wib_Header #logoarea .hd_inner > div.right_menu > ul > li .drop_menu li{margin-top:10px}
#wib_Header #logoarea .hd_inner > div.right_menu > ul > li .drop_menu li:first-child{margin-top:0}
#wib_Header #logoarea .hd_inner > div.right_menu > ul > li .drop_menu a{font-size:14px;color:#777777}

/* Ä«Å×°í¸® */
#cata_area{padding:17px 0 37px; }
#cata_area .hd_inner .all_btn{ position:relative; color:#2c2c2c; font-size:19px; font-weight:600; padding-left:32px;height:20px;display:inline-block;vertical-align: top;margin-right:3.12vw;cursor:pointer}
#cata_area .hd_inner .all_btn span { position:absolute; left:0; top:0px;; width:20px; height:20px; background:url('/design/happyprinc/wib/skin/common/icon_menu.svg')no-repeat center left; background-size:auto 20px;  }
#cata_area .hd_inner .hd_left{display:inline-block;vertical-align: top;}
#cata_area .category {  box-sizing:border-box; font-size:0;  }
#cata_area .category > li { position:relative; display:inline-block; margin-right:1.3vw  }
#cata_area .category > li > a { display:block;   color:#2A2A2A; letter-spacing:-0.03em;font-size:15px;position: relative;transition:all 0.1s }



#cata_area .category > li:hover > a {color:var(--color-font);font-weight:500; }
#cata_area .category > li > a::before{content:"";display: block;width: 0%;height:1px;background-color: #4d4d4d;position: absolute;bottom:-2px;right:0;transition: all 0.3s;}
#cata_area .category > li:hover a::before,
#cata_area .category > li.on a::before{width: 100%; left: 0; right: auto;}
#cata_area .category > li:last-child{ margin-right:0;}
#cata_area .category .sub-category {min-width:145px; top:100%;visibility:hidden; opacity:0; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-ms-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s; box-sizing:border-box; position:absolute;;left:50%;  transform:translateX(-50%);   z-index:102 ;padding-top:10px; }
#cata_area .category > li:hover .sub-category {top:100%;opacity:1; visibility:visible; }
#cata_area .category .sub-category > ul{padding:25px 20px; border:1px solid #dee0e5; background-color:rgba(255,255,255, .9);}
#cata_area .category .sub-category > ul > li { display:block; margin: 0 0 13px 0px;  }
#cata_area .category .sub-category > ul > li > a { display: block; color: #2A2A2A; font-size: 14px; text-align: left;  -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-ms-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s; }
#cata_area .category .sub-category > ul > li:hover > a {color:var(--color-font); font-weight:500}
#cata_area .category .sub-category > ul > li:last-child{margin-bottom:0}

/*°Ë»ö*/
.search_wrap{display:none;position:fixed;top:220px;left:0;right:0;background:#fff;border-top:1px solid #C9C9C9;z-index:99;box-shadow: 0px 0px 20px rgba(179, 173, 171, 0.15);}
.search_wrap .search_wrap_x{width:20px;height:20px;background:url('/design/happyprinc/wib/img/icon_search_x.svg')no-repeat center;position: absolute;top:38px;right:42px;cursor:pointer}
.search_wrap .sch{width:579px;margin: 38px auto 70px;}
.search_wrap .sch fieldset{position:relative}
.search_wrap .sch .keyword{border:0;border-bottom:1px solid #424242;font-size:15px;color:#424242;letter-spacing:-0.03em;height:50px;width:100%;font-weight:400}
.search_wrap .sch .keyword::placeholder{color:#C9C9C9;font-weight:300}
.search_wrap .sch .keyword + a{display:block;position:absolute;right:0;top:0;width:22px;height:22px;top:15px}
.search_wrap .sch .best{padding-top:50px}
.search_wrap .sch .best p{font-size:16px;color:#424242;font-weight:600;letter-spacing:-0.03em}
.search_wrap .sch .best ul{margin-top:16px}
.search_wrap .sch .best ul li{margin-top:11px;position: relative;;overflow:hidden}
.search_wrap .sch .best ul li:first-child{margin-top:0}
.search_wrap .sch .best ul li a{font-size:14px;color:#7B7672;letter-spacing:-0.03em;transform: translateY(100%);display:inline-block;;}
.search_wrap .sch .best ul li:nth-of-type(1) a{animation-name:slider;-webkit-animation-name:slider; animation-duration:0.3s; -webkit-animation-duration:0.3s;animation-iteration-count: 1; -webkit-animation-iteration-count: 1; animation-direction: alternate; -webkit-animation-direction: alternate; animation-timing-function: ease-in-out;-webkit-animation-timing-function: ease-in-out;animation-delay: 0.6s;-webkit-animation-delay: 0.6s;-moz-animation-delay: 0.6s;-ms-animation-delay: 0.6s;-o-animation-delay: 0.6s;animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;-ms-animation-fill-mode: forwards;-moz-animation-fill-mode: forwards;-o-animation-fill-mode: forwards;}
.search_wrap .sch .best ul li:nth-of-type(2) a{animation-name:slider;-webkit-animation-name:slider; animation-duration:0.3s; -webkit-animation-duration:0.3s;animation-iteration-count: 1; -webkit-animation-iteration-count: 1; animation-direction: alternate; -webkit-animation-direction: alternate; animation-timing-function: ease-in-out;-webkit-animation-timing-function: ease-in-out;animation-delay: 0.9s;-webkit-animation-delay: 0.9s;-moz-animation-delay: 0.9s;-ms-animation-delay: 0.9s;-o-animation-delay: 0.9s;animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;-ms-animation-fill-mode: forwards;-moz-animation-fill-mode: forwards;-o-animation-fill-mode: forwards;}
.search_wrap .sch .best ul li:nth-of-type(3) a{animation-name:slider;-webkit-animation-name:slider; animation-duration:0.3s; -webkit-animation-duration:0.3s;animation-iteration-count: 1; -webkit-animation-iteration-count: 1; animation-direction: alternate; -webkit-animation-direction: alternate; animation-timing-function: ease-in-out;-webkit-animation-timing-function: ease-in-out;animation-delay: 1.2s;-webkit-animation-delay: 1.2s;-moz-animation-delay: 1.2s;-ms-animation-delay: 1.2s;-o-animation-delay: 1.2s;animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;-ms-animation-fill-mode: forwards;-moz-animation-fill-mode: forwards;-o-animation-fill-mode: forwards;}
.search_wrap .sch .best ul li:nth-of-type(4) a{animation-name:slider;-webkit-animation-name:slider; animation-duration:0.3s; -webkit-animation-duration:0.3s;animation-iteration-count: 1; -webkit-animation-iteration-count: 1; animation-direction: alternate; -webkit-animation-direction: alternate; animation-timing-function: ease-in-out;-webkit-animation-timing-function: ease-in-out;animation-delay: 1.5s;-webkit-animation-delay: 1.5s;-moz-animation-delay: 1.5s;-ms-animation-delay: 1.5s;-o-animation-delay: 1.5s;animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;-ms-animation-fill-mode: forwards;-moz-animation-fill-mode: forwards;-o-animation-fill-mode: forwards;}
@keyframes slider {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}


/*Àüü Ä«Å×°í¸®*/
.cate_all_wrap{ display:none; position:fixed;top:220px;left:0;right:0;background:#fff;z-index:99;box-shadow: 0px 0px 20px rgba(179, 173, 171, 0.15); max-height:calc(100% - 179px); overflow:auto;}
.cate_all_wrap.show{display:block;}

.cate_all_wrap .box {
    display: grid;
    grid-template-columns: 1000px 230px auto; /* 3 columns */
    grid-template-rows: 1fr; /* 1 row */
    position:relative;
}
.cate_all_wrap .box > ul { display: grid; padding-top:40px; height:100%;  box-sizing:border-box; }
.cate_all_wrap .box > ul.cate_all {
    padding-left:11.97vw;
    display: flex; flex-wrap: wrap; gap: 10px; 
}
.cate_all_wrap .box > ul.cate_all > li { width: calc(20% - 10px); box-sizing:border-box; padding-bottom:50px; }

.cate_all_wrap .box > ul.event_menu{ background:#f2f3f5; padding-left:30px; }
.cate_all_wrap .box > ul.community_menu{ background:#F8F8F8; padding-left:30px; padding-right:11.97vw; }


.cate_all_wrap .box > ul > li > a{font-size:16px;line-height:1.2em; color:#202323;font-weight:600;display:inline-block}
.cate_all_wrap .box > ul > li > a:before{display:none !important}
/*
.cate_all_wrap .box > ul > li > a:after{content:"";display:block;width:6px;height:6px;background:#EBA593;border-radius:50%;position: absolute;top:-30px;right:-8px;opacity:0;}
*/
.cate_all_wrap .box > ul > li:hover > a:after{animation: bounce .5s alternate forwards }
.cate_all_wrap .box > ul > li .sub-category{margin-top:15px}
.cate_all_wrap .box > ul > li .sub-category > ul > li:first-child{margin-top:0}
.cate_all_wrap .box > ul > li .sub-category > ul > li {margin-top:12px;}
.cate_all_wrap .box > ul > li .sub-category > ul > li > a{font-size:14px;color:#777777;line-height:1.4em; }
.cate_all_wrap .box > ul.community_menu > li{display:block;width:100%}
.cate_all_wrap .box > ul li a{position: relative;}
.cate_all_wrap .box > ul li a::before{content:"";display: block;width: 0%;height:1px;background-color: #202323;position: absolute;bottom:-2px;right:0;transition: all 0.3s;}
.cate_all_wrap .box > ul > li .sub-category > ul > li > a:hover{color:#202323}
.cate_all_wrap .box > ul li:hover > a::before{width: 100%; left: 0; right: auto;}

.cate_all_wrap .box > ul > li:nth-child(11),
.cate_all_wrap .box > ul > li:nth-child(12) { display:none !important; }
.cate_all_wrap .box > ul > li .cate3 { display:none !important; }

.cate_all_wrap .box .btn_close { position:fixed; right:50px; top:260px; cursor:pointer; }


.cate_all_wrap .event_bnr { position:absolute; left:40px; top:40px; }
.cate_all_wrap .event_bnr li { margin:0 0 15px; }
.cate_all_wrap .event_bnr img { max-width:100%; }



#cata_area .category > li:nth-child(1) > a,
#cata_area .category > li:nth-child(1) > a font,
#cata_area .category > li:nth-child(2) > a,
#cata_area .category > li:nth-child(2) > a font,
.cate_all_wrap .cate_all > li:nth-child(1) > a,
.cate_all_wrap .cate_all > li:nth-child(1) > a font,
.cate_all_wrap .cate_all > li:nth-child(2) > a,
.cate_all_wrap .cate_all > li:nth-child(2) > a font { font-weight:700; }


/* Ä«Å×°í¸® ¾Ö´Ï¸ÞÀÌ¼Ç */
@keyframes bounce{
    0%{
        top: -30px;

        opacity:0
    }

    100%{
        top: 0px;

        opacity:1
    }
}  
/*À§ºê ÄíŰüũ*/
.topban .search_wrap{top: 127px}
.topban .cate_all_wrap{top: 127px}

/*ȸ¿ø°¡ÀÔÆ÷ÀÎÆ®¹«ºù¾ÆÀÌÄÜ*/
.point_box {text-align: center;}
.point_i:after{content:"";display:block;width:10px;height:10px;background:#f6ee99;position: absolute; top:0;left: 50%; transform: rotate(45deg) translateX(-50%); z-index: -1;}
.point_i { position: absolute; top: 100%; left:calc(50% - 4px); transform:translateX(-50%);padding:2px 8px; background:#f6ee99; border-radius: 100px; font-weight: 500; font-size: 12px; letter-spacing: 0; text-align: center; color:#202323; filter: alpha(opacity=100); opacity: 1; animation: motion 1s linear 0s infinite ; margin-top: 0;-webkit-animation: motion 1s linear 0s infinite ; margin-top: 0;z-index:1 }


@keyframes motion {
    0% {top:100%}
    50% {top:120%}
    100% {top:100%}

}

-webkit-@keyframes motion { 
    0% {top:100%}
    50% {top:120%}
    100% {top:100%}

}

@media (max-width: 1640px) { 
    .cate_all_wrap .box > ul{padding-left:40px;}
}
/* Ç÷ÎÆùè³Ê */
.fix_btn{position: fixed;right:-100px;bottom:102px;z-index:200;opacity:0;transition:all 0.3s}
.fix_btn.show{right:31px;opacity:3}
.fix_btn ul li{margin-top:10px}
.fix_btn ul li a{width:52px;display:block;height:52px;}
.fix_btn ul li a.f_insta{background:url('/design/happyprinc/wib/skin/common/icon_insta.svg')no-repeat center / 100%; opacity: 0.8;}
.fix_btn ul li a.top_btn{background:url('/design/happyprinc/wib/skin/common/icon_top.svg')no-repeat center / 100%; opacity: 0.8;}

/* BASIC css end */