/* 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; } 

#wib_Header{background:#fff;z-index:100;position:fixed;top:0;right:0;left:0;max-height:179px;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:#D9D9D9;line-height:50px;text-align:center; position: relative;}
#wib_Header #toppop a{display:block;font-size:15px;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}
/*·Î°í*/
#wib_Header #logoarea{padding-top:30px;}
#wib_Header #logoarea .hd_inner:after{content:"";display:block;clear:both}
#wib_Header #logoarea .hd_inner > div{display:inline-block;}
/*»ó´Ü ¿ìÃø¸Þ´º*/
#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:24px;height:24px;display:block;}
#wib_Header #logoarea .hd_inner > div.right_menu > ul > li > a.login_btn{background:url('/design/happyprinc/wib/img/icon_join.svg')no-repeat center; margin-bottom:5px;}
#wib_Header #logoarea .hd_inner > div.right_menu > ul > li > a.mem_btn{background:url('/design/happyprinc/wib/img/icon_my.svg')no-repeat center; margin-bottom:5px;}
#wib_Header #logoarea .hd_inner > div.right_menu > ul > li > a.search_btn{background:url('/design/happyprinc/wib/img/icon_search.svg')no-repeat center}
#wib_Header #logoarea .hd_inner > div.right_menu > ul > li > a.cart_btn{background:url('/design/happyprinc/wib/img/icon_cart.svg')no-repeat center;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:#eaa29d;border-radius:50%;font-size:12px;color:#fff;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 #C9C9C9;border-radius:14px;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:#7B7672}

/* Ä«Å×°í¸® */
#cata_area{padding:20px 0 30px; }
#cata_area .hd_inner .all_btn{background:url('/design/happyprinc/wib/img/ham.svg')no-repeat center left;padding-left:27px;height:20px;display:inline-block;vertical-align: top;margin-right:3.12vw;cursor:pointer}
#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:#424242; letter-spacing:-0.03em;font-size:15px;position: relative;transition:all 0.1s }
#cata_area .category > li > a:after{content:"";display:block;width:6px;height:6px;background:#eaa29d;border-radius:50%;position: absolute;top:-30px;right:-8px;opacity:0;}
#cata_area .category > li:hover > a {color:#424242;font-weight:500; }
#cata_area .category > li:hover > a:after{animation: bounce .5s alternate forwards }
#cata_area .category > li > a::before{content:"";display: block;width: 0%;height:1px;background-color: #424242;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 #C9C9C9; background-color:#fff;border-radius:14px;}
#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: #7B7672; 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:#424242; font-weight:500}
#cata_area .category .sub-category > ul > li:last-child{margin-bottom:0}

/*°Ë»ö*/
.search_wrap{display:none;position:fixed;top:179px;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:179px;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{font-size:0;display:table}
.cate_all_wrap .box > ul{display:table-cell;vertical-align: top;font-size:0;padding-left:11.97vw;padding-top: 40px;box-sizing:border-box;padding-bottom: 50px;}
.cate_all_wrap .box > ul.cate_all{width:calc(100% - 31.77vw)}
.cate_all_wrap .box > ul.community_menu{width:31.77vw;padding-left:3.12vw;background:#F8F8F8}
.cate_all_wrap .box > ul > li{display:inline-block;width:calc(16.66% - 2.8vw);vertical-align: top;margin-top:60px;margin-right:3.12vw}
.cate_all_wrap .box > ul > li:nth-child(6n){margin-right:0}
.cate_all_wrap .box > ul > li:nth-child(1),
.cate_all_wrap .box > ul > li:nth-child(2),
.cate_all_wrap .box > ul > li:nth-child(3),
.cate_all_wrap .box > ul > li:nth-child(4),
.cate_all_wrap .box > ul > li:nth-child(5),
.cate_all_wrap .box > ul > li:nth-child(6){margin-top:0}
.cate_all_wrap .box > ul > li > a{font-size:16px;color:#424242;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:#7B7672;}
.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: #424242;position: absolute;bottom:-2px;right:0;transition: all 0.3s;}
.cate_all_wrap .box > ul > li .sub-category > ul > li > a:hover{color:#424242}
.cate_all_wrap .box > ul li:hover > a::before{width: 100%; left: 0; right: auto;}
/* Ä«Å×°í¸® ¾Ö´Ï¸ÞÀÌ¼Ç */
@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:#eaa29d;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:5px 11px; background: #eaa29d; border-radius: 100px; font-weight: 500; font-size: 13px; letter-spacing: 0; text-align: center; color: #fff; 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:1}
.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/img/icon_f_insta.png')no-repeat center}
.fix_btn ul li a.top_btn{background:url('/design/happyprinc/wib/img/icon_top.png')no-repeat center}

/* BASIC css end */

