/* BASIC css start */
.wrapper {padding:0 15px; box-sizing:border-box; width:100%; position:relative; }
.swiper {overflow:hidden; position:relative}
.dn {display:none;}
button {background:none; border:none; }
img {max-width:100%}

/* 최상단 배너 */
#headerBanner.TBI{ position:relative; width:100%; height:5%; overflow:hidden;background-color:#2f3529; }
#headerBanner {position:relative; width:100%; height:34px; overflow:hidden;background-color:#2f3529; z-index:999;/* margin-bottom:10px; */}
#headerBanner .hdBannerTxt { position:relative; width:100%; height:34px }
#headerBanner .hdBannerTxt a { display:block;color:#fff;line-height:34px;text-align:center; }
#headerBanner .hdBannerImg { position: relative; width: 100%;}
#headerBanner .topbanner{width:100%;}
#headerBanner .bnClose { position:absolute; top:0; right:0 }
#headerBanner .bnClose a { display:block; width:33px; height:33px; font-size:22px; text-align:center; line-height:35px;color:#fff; }

.header_box {position:fixed; left:0; width:100%; display:block; text-align:center; box-sizing:border-box;z-index:100; background:#fff;}
.header_box .animated {  }
.header_box .wrapper {height:100%;padding:9px 0 2px;}
.header_box .menu_btn {position:absolute; left:15px; top:calc(50% - 7px);  width:22px; height:16px; text-align:center;  }
.header_box .menu_btn span { display: block; width:100%; height: 2px; background:#000; margin-bottom:4px; }
.header_box .menu_btn span:last-child {margin-bottom:0}
.header_box .search_show {width: 23px; position:absolute;right: 53px;top: calc(50% - 11px);}
.header_box .logo {display:inline-block;}
.header_box .logo img {height:37px}
.header_box .basket_btn { position:absolute;top: calc(50% - 16px);right: 14px;width: 32px;}
.header_box .basket_btn .ic_basket { display:inline-block; position:relative; }
.header_box .basket_btn .ic_basket .count {position:absolute; bottom:-1px; right:-2px; width:16px; height:16px; border-radius:100%; background:#000; color:#fff; font-size:8px; text-align:center; line-height:16px; }

.search_area_box {display:none; position:fixed; top:0; left:0; width: 100%; height:100%; box-sizing:border-box; background:rgba(0,0,0,0.6); padding-top:46px; z-index:10 }
.search_area_box .search_area {position:relative; display:inline-block; width:100%; padding:17px; box-sizing:border-box; }
.search_area_box .search_area input {border-radius:30px; width:100%; box-sizing:border-box; padding:0 48px 0 16px  }
.search_area_box .search_btn {position:absolute; top:calc(50% - 11px); right:32px; width:22px}



.animated { -webkit-animation-duration: .3s; animation-duration: .3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } 

#header.slideDown .animated{ -webkit-animation-name:slideDown; animation-name:slideDown;  } 
#header.slideUp .animated { -webkit-animation-name:slideUp; animation-name:slideUp; height:0; opacity: 0; visibility: hidden; } 

#header.slideDown .scroll_menu_box {  position:static; top:auto;  } 
#header.slideUp .scroll_menu_box  {position:fixed; top:0; } 


#header.headroom--not-top .header_box { top:0; border-bottom:1px solid #ddd }


/* SlideDown for headroom */ 
@-webkit-keyframes slideDown{ 
	0% {-webkit-transform:translateY(-100%);} 
	100% {-webkit-transform:translateY(0);  } 
} 
@keyframes slideDown{ 
	0% {transform:translateY(-100%);} 
	100% {transform:translateY(0);} 
} 

/* SlideUp for headroom */ 
@-webkit-keyframes slideUp{ 
	0% {-webkit-transform:translateY(0);} 
	100% {-webkit-transform:translateY(-100%);} 
} 
@keyframes slideUp{ 
	0% {transform:translateY(0);} 
	100% {transform:translateY(-100%);} 
} 

.menu_box {display:none; position:fixed; top:0; left:0; transition: all 0.3s; animation-direction: reverse; z-index:1001; -webkit-overflow-scrolling: touch; width:100%; height:100%; box-sizing:border-box; background:#fff; padding:0px 0 62px; overflow-y:auto;  }
.menu_box.active {left:0; }
.menu_hd_box { position:relative; text-align:center;  height: 48px; box-sizing: border-box;  padding: 15px 12px;}
.menu_hd_box .menu_closed {position:absolute;top: 15px;left: 12px; width:24px; font-size:22px; color:#000; }
.menu_hd_box .menu_right_btn {position:absolute; top: 15px; right: 12px; width:24px; font-size:24px; color:#000; }
.menu_hd_box .menu_basket {position:absolute; top: 17px; right: 45px; width:18px; color:#000; }
.menu_hd_box .menu_basket .count {background-color: #000; color: #fff; display: block; width: 15px; height: 15px; box-sizing: border-box; border-radius: 50%; line-height: 15px; text-align: center; font-size: 10px; font-weight: 500; right: -7px; top: 0; position: absolute;}
.side_tt {font-size:16px; margin-bottom:18px; font-weight:bold; padding:0 18px; }
.side_more_box {margin-top:24px; text-align:center;  }
.side_more_box .more {display:inline-block; width: 135px; border-radius: 100px; height: 35px;line-height: 35px; background-color: #f0f0f0; font-weight: normal;  border: 1px solid #f0f0f0; color: #000; margin:0}

.login_box:after{display:block;content:"";clear:both;}
.login_box{padding:14px 12px 30px;box-sizing:border-box;}
.login_box .left{float:left;}
.login_box .left p{font-size:16px;font-weight:300;color:#333;text-align:left; font-family:"Noto Sans KR", sans-serif; line-height:1.5;}
.login_box .left p b{font-weight:bold; font-family:"Noto Sans KR", sans-serif;}
.login_box .left a{display:inline-block; font-size:14px; font-weight:400; color:#A9A9A9; text-align:left; line-height:1; margin-top:20px; font-family:"Noto Sans KR", sans-serif;}
.login_box .left a i{display:inline-block; vertical-align:middle; margin-left:5px; width:7px; position:relative; top:-1px; font-size:12px;}
.login_box .right{float:right;}
.login_box .right a{display:block;width:97px;height:40px;box-sizing:border-box;line-height:40px;font-size:14px;font-weight:500;color:#fff;background-color:#333;text-align:center;}


.renew_category {border-bottom:10px solid #F5F5F5;}
.renew_category ul li:first-child {border-top:1px solid #efefef;}
.renew_category ul li {display:block;border-bottom:1px solid #EFEFEF;padding:18px 12px;box-sizing:border-box; text-align:left;line-height:1;}
.renew_category ul li a {font-size:16px;font-weight:400;color:#333;}

.renew_dep_category > ul{} 
.renew_dep_category > ul > li:first-of-type{border-top:1px solid #EFEFEF;}
.renew_dep_category > ul > li{border-bottom:1px solid #EFEFEF;}
.renew_dep_category > ul > li > a{display:block;line-height:1;padding:19px 12px;font-size:15px;font-weight:500;color:#333;text-align:left;font-family:"Noto Sans KR", sans-serif; position:relative; }
.renew_dep_category > ul > li > a.cateTitle .dep_btn { position:absolute; top:0; right:0; width:53px; height:53px; background:url(/design/pippin1/renew/mo/images/common/depth-off.png)no-repeat center right 12px;background-size:14px 9px;transition:all 0.3s; }
.renew_dep_category > ul > li.on > a.cateTitle .dep_btn { background:url(/design/pippin1/renew/mo/images/common/depth-on.png)no-repeat center right 12px;background-size:14px 9px; }
.renew_dep_category > ul > li > a.fbold {font-weight:bold}

.renew_dep_category > ul > li > a.cateTitle img {width:55px;margin-left:10px;}


.renew_dep_category > ul > li > div {display:none;}
.renew_dep_category > ul > li > div > ul{ padding-left:25px;box-sizing:border-box;padding-bottom:25px;}
.renew_dep_category > ul > li > div > ul > li:first-of-type{margin-top:4px;}
.renew_dep_category > ul > li > div > ul > li{margin-top:15px;}
.renew_dep_category > ul > li > div > ul > li > a{display:block;font-size:14px;font-weight:500;color:#333;text-align:left;line-height:15px;}
.renew_dep_category.last { border-top: 10px solid #F5F5F5;}
   
.side_top_box {margin:16px 0; text-align:center; padding:0 8px; }
.side_top_box .side_link {display:inline-block; vertical-align:top; position:relative; height:54px; width:calc(20% - 3px); box-sizing:border-box  }
.side_top_box .side_link:after {content:""; display:inline-block; height:100%; width:1px; background:#ccc; position:absolute; top:0; right:0; }
.side_top_box .side_link span {display:block; }
.side_top_box .side_link .txt {font-size:13px; margin-bottom:4px; word-wrap:break-word; word-break:keep-all;}
.side_top_box .side_link .img img {height:33px; }
.side_top_box .side_link .num { font-size:14px; color:#000; font-weight:bold; height:33px; line-height:33px}
.side_top_box .side_link:nth-child(1) .img {margin-top:7px}
.side_top_box .side_link:nth-child(1) .img img {height:25px; }
.side_top_box .side_link:last-child:after {display:none; }

.side_search_box { margin:16px 18px; position:relative;  }
.side_search_box .MS_search_word {padding-right: 47px; height: 45px; border: 1px solid #c9c9c9; box-sizing: border-box; border-radius: 50px; -webkit-border-radius: 50px;  padding-left: 14px; width:100%}
.side_search_box .MS_search_word:focus-visible {outline: none;}
.side_search_box .search_btn {position:absolute; right:16px; top:calc(50% - 11px); width:22px; }

.side_scroll_area { padding:0px 18px 16px;}
.scroll_list {overflow-x: auto; overflow-y:hidden; white-space: nowrap; -ms-overflow-style: none; scrollbar-width: none;height:30px }
.scroll_list::-webkit-scrollbar { display: none;}
.scroll_list li {display:inline-block; vertical-align:top; margin-right:3px; }
.scroll_list li:last-child {margin-right:0}
.scroll_list li a {display: inline-block;border: 1px solid #c9c9c9;border-radius: 20px;-webkit-border-radius: 20px;padding: 0px 10px;line-height: 31px;height: 30px;box-sizing: border-box;}

.side_category_box {padding:16px 0px; }
.swiper.category_list {padding:0 16px; }
.category_list .swiper-slide {text-align:center; width:18% }
.category_list .swiper-slide:first-child {padding-left: 10px;}
.category_list .swiper-slide .category {display:inline-block; width:100%;  }
.category_list .swiper-slide .category span {display:block; }
.category_list .swiper-slide .category .img { width:100%; margin:0 auto; border-radius:100%; }
.category_list .swiper-slide .category .img img {border-radius:100%;}
.category_list .swiper-slide .category .txt {font-size:13px; margin-top:8px; word-wrap:break-word; word-break:keep-all; }
.category_list .swiper-scrollbar {position:static !important; margin-top:10px; width:100% !important; border-radius:0 !important;  background:#f9f9f9 !important; height:4px !important; }
.category_list .swiper-scrollbar-drag { border-radius:0 !important;  background:#ececec !important }

.side_tag_box { padding:16px 18px  }
.side_tag_box .side_tt {padding:0}
.tag_list { padding:0 12px 12px;  border-bottom: 1px solid #c9c9c9;}
.tag_list li {display: inline-block; ; margin: 0 5px 7px 0;}
.tag_list li a {border-radius: 5px;padding: 0px 7px;display: inline-block;border: 1px solid #c9c9c9;line-height: 31px;height: 30px;box-sizing: border-box;}

.side_banner_box {padding: 16px 18px}
.side_banner_list .swiper-slide a {display:inline-block; width:100%; height:100% }
.side_banner_list .swiper-slide a img {width:100%}
.side_banner_list .swiper-pagination {position: absolute; top: 0; right: 0; left: auto; bottom: auto; padding: 4px 5px; color: #fff; background: rgba(0,0,0,.16); z-index: 10; width: auto!important; font-size: 11px; }


.side_event_box {padding: 16px 18px}
.side_event_box .side_tt {padding:0}
.side_event_list {}
.side_event_con {border-bottom:1px solid #c9c9c9}
.side_event_con dt {position: relative; font-size: 17px; font-weight:bold; padding: 18px 7px;}
.side_event_con dt:after {content:"+"; display:inline-block; position:absolute; top:calc(50% - 8.5px); right:7px}
.side_event_con dt span {position: absolute; left: 120px; font-size: 12px; color: #999; font-weight: 400;}
.side_event_con dd {padding:10px 12px 18px; display:none; }
.side_event_con dd a {border: 1px solid #c9c9c9;color: #999;display: inline-block;border-radius: 5px;padding: 0px 7px;margin: 0 5px 7px 0;line-height: 31px;vertical-align:top;height: 30px;box-sizing: border-box;}

.side_spacial_box {padding: 24px 18px 16px}
.side_spacial_box .side_tt {padding:0}
.side_spacial_list li {border-bottom: 1px solid #c9c9c9; padding: 13px 0;}
.side_spacial_list li:nth-child(1) {border-top:1px solid #c9c9c9;}
.side_spacial_list li:after {content:""; display:block; clear:both; }
.side_spacial_list li span {display:inline-block; vertical-align:top;float: left; box-sizing:border-box }
.side_spacial_list li .img {width:30%; }
.side_spacial_list li .txt {width:70%; padding-left:13px;  }
.side_spacial_list li .txt .tt {font-size: 16px; font-weight:bold; white-space: normal; overflow: hidden;}
.side_spacial_list li .txt .sub {white-space: normal; overflow: hidden; padding: 12px 0; word-wrap: break-word; word-break: keep-all;}
.side_spacial_list li .txt .link { color: #999; font-size: 12px;}
 
.side_view_box {padding:24px 0px}
.swiper.side_view_list  {padding:0 10px; }
.side_view_list .swiper-slide {width:40%; }
.side_view_list .item-list {margin:0}
.side_view_list .item_img a {padding-bottom: 109.6%!important;}
.side_view_list .item_info {padding:0}
.side_view_list .item_name {padding-right:24px; font-size:12px;  }
.side_view_list .prod_cart {top:-6px}
.side_view_list .item_reaction, .side_view_list .item_price, .side_view_list .item_engname, .side_view_list .item_icons, .side_view_list .item_review {display:none; }

.side_event_box2 {padding: 24px 0 16px}
.swiper.side_event_list2 { padding:0 18px ; }
.side_event_list2 .swiper-slide {width:70% }
.side_event_list2 span {display:block; }
.side_event_list2 .txt {margin-top:16px; }
.side_event_list2 .txt em {font-size:16px; font-weight:bold; }
.side_event_list2 .txt p { font-size:12px; color:#acacac; margin-top:6px}


/* 스크롤 메뉴 */
.scroll_menu_box {background:#fff; }
.scroll_menu_list li {width:auto; padding:0 14px; text-align:center; height:42px; }
.scroll_menu_list li a { display:inline-block; height:100%; font-size:13px; line-height:42px; }


.swiper-navigation {}
.swiper-navigation .swiper-button-prev, .swiper-navigation .swiper-button-next {background:rgba(183,183,183,0.8); border-radius:100%; width:40px; height:40px; top:30%; }
.swiper-navigation .swiper-button-prev { left:5px; }
.swiper-navigation .swiper-button-prev:after {content: ''; width: 15px; height: 15px;border-top: 2px solid #ffffff; border-right: 2px solid #ffffff;display: inline-block; transform: rotate(225deg);position: absolute;top:12px; left:15px;}
.swiper-navigation .swiper-button-next { right:5px;}
.swiper-navigation .swiper-button-next:after {content: ''; width: 15px; height: 15px;border-top: 2px solid #ffffff; border-right: 2px solid #ffffff;display: inline-block; transform: rotate(45deg);position: absolute;top:12px;right:15px;}

.side_event_list2 .swiper-navigation > div {top:43%}

.board_area {margin-top:12px}

/*오른쪽메뉴*/
.right_box {display:none; position:fixed; top:0; left:0; transition: all 0.3s; animation-direction: reverse; z-index:1001; -webkit-overflow-scrolling: touch; width:100%; height:100%; box-sizing:border-box; background:#fff; padding:0px 0 62px; overflow-y:auto;  }
.right_box .menu_btn {position:absolute; left:12px; top:calc(50% - 8px);  width:22px; height:16px; text-align:center;  }
.right_box .menu_btn span { display: block; width:100%; height: 2px; background:#000; margin-bottom:4px; }
.right_box .menu_btn span:last-child {margin-bottom:0}
.menu_hd_box .right_closed {position:absolute;top: 15px; right: 12px; width:24px; font-size:22px; color:#000; }
.menu_hd_box .right_menu_basket {position:absolute; top: 17px; right: 45px; width:18px; color:#000; }
.menu_hd_box .right_menu_basket .count {background-color: #000; color: #fff; display: block; width: 15px; height: 15px; box-sizing: border-box; border-radius: 50%; line-height: 15px; text-align: center; font-size: 10px; font-weight: 500; right: -7px; top: 0; position: absolute;}
.right_box .renew_board_menu {border-top: 1px solid #efefef; box-sizing: border-box; padding: 0 12px;}
.right_box .renew_board_menu h2 {font-size: 16px; font-weight: 500; color: #333; text-align: left; padding-top:38px; padding-bottom: 19px; line-height: 1;}
.right_box .renew_board_menu ul li {float: left; width: 50%; box-sizing: border-box; font-size: 14px; font-weight: 400; color: #444; text-align: left; line-height: 1; padding-bottom: 15px;}
.right_box .renew_board_menu ul {overflow:hidden;}
.right_box .renew_board_menu ul.last li {float:none; width:100%;}
/* BASIC css end */