/* 공통 */
body {font-family: 'Noto Sans KR', sans-serif !important; background-color: #ffffff;}
body.fixed .mall-wapper header {position: relative; top: 0; left: 0; right: 0; max-width: 720px; margin: 0 auto;}

/* 섹션 타이틀 */
.section-title-wrapper {position: relative; overflow: hidden; padding: 20px 4%;}
.section-title-wrapper h2 {font-size: 18px; font-weight: 500; float: left;}
.section-title-wrapper p {font-size: 12px; color: #a5a5a5; float: right;}

/* 체크박스 */
.checkbox-wrap {margin-top: 10px;}
.checkbox-wrap input[type="checkbox"] + label {font-size: 14px; vertical-align: middle;}
.checkbox-wrap input[type="checkbox"] + label span {display: inline-block; width: 18px; height: 18px; background: url('/images/web/common/icon/checkbox_line.png') no-repeat; background-size: 18px; text-indent: -9999px; overflow: hidden; vertical-align: -4px; padding-right: 10px;}
.checkbox-wrap input[type='checkbox']:checked + label span {background: url('/images/web/common/icon/checkbox_full.png') no-repeat; background-size: 18px; text-indent: -9999px; overflow: hidden; vertical-align: -4px;}
.checkbox-wrap input[type="checkbox"] {display: none;}


/* fontawesom */
.fa {display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; padding-left: 3px;}
.fa-angle-right:before {content: "\f105";}


/* 레이아웃 */
.mall-wapper {position: relative; width: 100%; height: 100%; max-width: 720px; min-height: 100vh; z-index: 0; overflow: hidden; overflow-y: hidden; overflow-x: hidden; margin: 0 auto; background-color: #fff; padding-bottom: 50px; box-shadow: 0px 0px 10px 0px rgb(50 51 51 / 10%);}


/* 스크롤바 커스텀 */
::-webkit-scrollbar {width: 10px;} /* 스크롤바의 너비 */
::-webkit-scrollbar-thumb {height: 30%; /* 스크롤바의 길이 */ background: #ddd; /* 스크롤바의 색상 */ border-radius: 10px;}
::-webkit-scrollbar-track {background: #eee;} /*스크롤바 뒷 배경 색상*/


/* float */
.fl{float: left;}
.fr{float: right;}



/* 상품리스트 컴포넌트 */
/* small */
.product.small {}
.product.small .swiper-wrapper {position: relative;}
.product.small .swiper-wrapper .swiper-slide .with_item_wrap {width: 100%; object-fit: contain;}
.product.small .swiper-wrapper .swiper-slide .with_item_wrap .container_95 {box-sizing: border-box; padding: 0 4%;}
.product.small .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box {width: calc(50% - 2%); position: relative; float: left; padding: 2% 0;}
.product.small .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box:nth-child(even) {margin-left: 4%;}
.product.small .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .left_img {width: 100%; position: relative;}
.product.small .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .left_img .img {width: 100%; height: 100%; object-fit: cover;}
.product.small .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .left_img span {position: absolute; right: 10px; bottom: 10px; background: url(/images/web/common/icon/product_heart_line.png) no-repeat; width: 20px; height: 20px; text-indent: -9999px; display: inline-block; background-size: 20px;}
.product.small .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .left_img span:active {background: url(/images/web/common/icon/product_heart_on.png) no-repeat; position: absolute; right: 10px; bottom: 10px; width: 20px; height: 20px; text-indent: -9999px; display: inline-block; background-size: 20px;}
.product.small .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .left_img span.on {background: url(/images/web/common/icon/product_heart_on.png) no-repeat; position: absolute; right: 10px; bottom: 10px; width: 20px; height: 20px; text-indent: -9999px; display: inline-block; background-size: 20px;}
.product.small .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box {width: 100%; position: relative;}
.product.small .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box .review {display: flex; justify-content: left; margin-top: 5px;}
.product.small .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box .review p {display: inline-block; background-color: #eee; font-size: 12px; padding: 2px 5px; border-radius: 10px;}
.product.small .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box .review p span {}
.product.small .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box > p.tit {white-space: normal; font-size: 16px; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; margin-top: 10px; height: 2.5em; }
.product.small .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box .right_price_wrap {margin-top: 25px; width: 100%; padding-right: 4%; box-sizing: border-box;}
.product.small .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box .right_price_wrap .o_pri {font-size: 13px; color: #a8a8a8; text-decoration: line-through; height: 19px;}
.product.small .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box .right_price_wrap .sell_pri {font-weight: 700;}
.product.small .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box .right_price_wrap .sell_pri span {font-size: 18px; display: inline-block;}
.product.small .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box .right_price_wrap .sell_pri span:last-child {color: #f15112; margin-left: 2%;}
.product.small .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box .tag {margin-top: 2%; font-size: 0; letter-spacing: 0; word-spacing: 0; height: 25px;}
.product.small .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box .tag a {display: inline-block; background-color: #eee; font-size: 12px; padding: 4px; margin-right: 3px; margin-top: 4px;}
.product.small .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .left_img .item-sold-out {background: rgba(199, 199, 199, 0.5); position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
.product.small .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .left_img .item-sold-out img {width: 150px; z-index: 3;}
@media screen and (max-width:680px) {

}
@media screen and (max-width:480px) {
    .product.small .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box > p.tit {font-size: 15px;}
    .product.small .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box .right_price_wrap {margin-top: 10px;}
}
@media screen and (max-width:420px) {
    .product.small .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box .tag a {padding: 2px;}
    .product.small .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box .right_price_wrap .sell_pri span {font-size: 15px;}
    .product.small .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box .review p {font-size: 11px;}
}
@media screen and (max-width:360px) {
    .product.small .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box .tag a {font-size: 11px;}

}



/* middle */
.product.middle {}
.product.middle .swiper-wrapper {position: relative;}
.product.middle .swiper-wrapper .swiper-slide .with_item_wrap {width: 100%; object-fit: contain;}
.product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 {box-sizing: border-box; padding: 0 4%; overflow: hidden;}
.product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box {width: 100%; position: relative; float: left; padding: 2% 0; border-bottom: 1px solid #eee;}
.product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box:last-child {border-bottom: 0;}
.product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .left_img {position: relative; width: 50%; max-width: 220px; float: left; margin-right: 4%; position: relative;}
.product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .left_img::after {display: block; content: ""; padding-bottom: 100%;}
.product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .left_img .item-sold-out {background: rgba(199, 199, 199, 0.5); position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
.product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .left_img .item-sold-out img {width: 150px; z-index: 3;}
.product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .left_img .img {background-color: #ddd; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .left_img .img img {object-fit: cover; width: 100%; height: 100%;}
.product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .left_img span {position: absolute; right: 10px; bottom: 10px; background: url(/images/web/common/icon/product_heart_line.png) no-repeat; width: 20px; height: 20px; text-indent: -9999px; display: inline-block; background-size: 20px; z-index: 2;}
.product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .left_img span:active {background: url(/images/web/common/icon/product_heart_on.png) no-repeat; position: absolute; right: 10px; bottom: 10px; width: 20px; height: 20px; text-indent: -9999px; display: inline-block; background-size: 20px;}
.product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .left_img span.on {background: url(/images/web/common/icon/product_heart_on.png) no-repeat; position: absolute; right: 10px; bottom: 10px; width: 20px; height: 20px; text-indent: -9999px; display: inline-block; background-size: 20px;}
.product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box {width: 100%; text-align: left;}
.product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box .review {text-align: left;}
.product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box .review p {display: inline-block; background-color: #eee; font-size: 12px; padding: 3px 5px; border-radius: 10px;}
.product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box .review p span {}
.product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box > p.tit {white-space: normal; font-size: 16px; text-align: left; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; margin-top: 2%;}
.product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box .right_price_wrap {margin-top: 2%; width: 100%; box-sizing: border-box;}
.product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box .right_price_wrap .o_pri {font-size: 13px; color: #a8a8a8; text-decoration: line-through;}
.product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box .right_price_wrap .sell_pri {font-weight: 700;}
.product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box .right_price_wrap .sell_pri span {font-size: 18px; display: inline-block;}
.product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box .right_price_wrap .sell_pri span:last-child {color: #f15112; margin-left: 2%;}
.product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box .right_price_wrap .tag {margin-top: 2%; font-size: 0; letter-spacing: 0; word-spacing: 0;}
.product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box .right_price_wrap .tag a {display: inline-block; background-color: #eee; font-size: 12px; padding: 4px; margin-right: 4px;}
.product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box .right_price_wrap .tag span {display: inline-block; background-color: #eee; font-size: 12px; padding: 4px; margin-right: 4px;}
@media screen and (max-width:680px) {}
@media screen and (max-width:480px) {
    .product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box > p.tit {font-size: 15px;}
    .product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .left_img {width: 45%;}
    .product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box.big .center_info_box > p.tit {font-size: 15px;}
    .product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box.big .center_img .img_bg {width: 100%;}
    .product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box.big .center_img .img_bg img {width: 100%;}
    .product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box.big .right_price_wrap span.o_pri {font-size: 12px;}
}
@media screen and (max-width: 420px) {
    .product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box .right_price_wrap .tag a {padding: 3px; font-size: 12px;}
    .product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box .right_price_wrap .tag span {padding: 3px; font-size: 12px;}
    .product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box .review p {padding: 1px 4px; font-size: 11px;}
    .product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box.big .center_info_box .review_bottom p {padding: 4px; font-size: 11px;}
}
@media screen and (max-width: 360px) {
    .product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 {padding: 0 3%;}
    .product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box .review p {padding: 1px 3px; font-size: 10px;}
    .product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box > p.tit {font-size: 14px;}
    .product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box .right_price_wrap {margin-top: 2%;}
    .product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box .right_price_wrap .o_pri {font-size: 12px;}
    .product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box .right_price_wrap .tag a {font-size: 11px; padding: 2px;}
    .product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box .right_price_wrap .tag span {font-size: 11px; padding: 2px;}
    .product.middle .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box .right_price_wrap .sell_pri span {font-size: 15px;}
}


/* middle select 가능 */
.product.middle.select {}
.product.middle.select .swiper-wrapper {position: relative;}
.product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap {width: 100%; object-fit: contain;}
.product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap .container_95 {box-sizing: border-box; padding: 0 4%; overflow: hidden; position: relative;}
.product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .checkbox-wrap {display: flex; align-items: center; justify-content: space-between;}
.product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .checkbox-wrap > a {display: block; border: 1px solid #ddd; color: #555; width: 60px; padding: 8px 0; font-size: 14px;}
.product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box {width: 100%; height: 100%; position: relative; float: right; padding: 2% 0 2% 0; border-bottom: 1px solid #ddd; display: flex; align-items: center; justify-content: center;}
.product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box:last-child {border-bottom: 0;}
.product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box input.select-heart-pro {display: none; float: left;}
.product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box label.select-heart-pro-label {display: flex; justify-content: center; align-items: center;}
.product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box label.select-heart-pro-label > span {display: block; width: 18px; height: 18px; padding-right: 20px; background: url('/images/web/common/icon/checkbox_line.png') no-repeat; background-size: 18px; text-indent: -9999px; overflow: hidden;}
.product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box input.select-heart-pro[type='checkbox']:checked + label > span {background: url('/images/web/common/icon/checkbox_full.png') no-repeat; background-size: 18px; text-indent: -9999px; overflow: hidden; vertical-align: -9px;}
.product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .select-heart-pro .left_img {position: relative; width: 50%; max-width: 220px; float: left; margin-right: 4%;}
.product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .select-heart-pro .left_img::after {display: block; content: ""; padding-bottom: 100%;}
.product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .select-heart-pro .left_img .img {background-color: #ddd; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .select-heart-pro .left_img .img img {object-fit: cover; width: 100%; height: 100%;}
.product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .select-heart-pro .left_img span {position: absolute; right: 10px; bottom: 10px; background: url(/images/web/common/icon/product_heart_line.png) no-repeat; width: 20px; height: 20px; text-indent: -9999px; display: inline-block; background-size: 20px;}
.product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .select-heart-pro .left_img span:active {background: url(/images/web/common/icon/product_heart_on.png) no-repeat; position: absolute; right: 10px; bottom: 10px; width: 20px; height: 20px; text-indent: -9999px; display: inline-block; background-size: 20px;}
.product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .select-heart-pro .right_info_box {width: 100%; text-align: left; height: 100%;}
.product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .select-heart-pro .right_info_box .review {text-align: right;}
.product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .select-heart-pro .right_info_box .review p {display: inline-block; background-color: #eee; font-size: 12px; padding: 3px 5px; border-radius: 10px;}
.product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .select-heart-pro .right_info_box .review p span {}
.product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .select-heart-pro .right_info_box > p.tit {white-space: normal; font-size: 16px; text-align: left; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; font-weight: 400; margin-top: 3%;}
.product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .select-heart-pro .right_info_box .right_price_wrap {margin-top: 5%; width: 100%; box-sizing: border-box;}
.product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .select-heart-pro .right_info_box .right_price_wrap .o_pri {font-size: 13px; color: #a8a8a8; text-decoration: line-through;}
.product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .select-heart-pro .right_info_box .right_price_wrap .sell_pri {font-weight: 700;}
.product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .select-heart-pro .right_info_box .right_price_wrap .sell_pri span {font-size: 18px; display: inline-block;}
.product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .select-heart-pro .right_info_box .right_price_wrap .sell_pri span:last-child {color: #f15112; margin-left: 2%;}
.product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .select-heart-pro .right_info_box .right_price_wrap .tag {margin-top: 2%; font-size: 0; letter-spacing: 0; word-spacing: 0;}
.product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .select-heart-pro .right_info_box .right_price_wrap .tag a {display: inline-block; background-color: #eee; font-size: 12px; padding: 4px; margin-right: 4px;}

@media screen and (max-width:680px) {}
@media screen and (max-width:480px) {
    .product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box > p.tit {font-size: 15px;}
    .product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .left_img {width: 60%;}
    .product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box.big .center_info_box > p.tit {font-size: 15px;}
    .product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box.big .center_img .img_bg {width: 100%;}
    .product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box.big .center_img .img_bg img {width: 100%;}
    .product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box.big .right_price_wrap span.o_pri {font-size: 12px;}
}
@media screen and (max-width: 420px) {
    .product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box .right_price_wrap .tag a {padding: 3px; font-size: 12px;}
    .product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box .review p {padding: 4px; font-size: 11px;}
    .product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box.big .center_info_box .review_bottom p {padding: 4px; font-size: 11px;}
}
@media screen and (max-width: 360px) {
    .product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap .container_95 {padding: 0 3%;}
    .product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box .review p {padding: 3px; font-size: 10px;}
    .product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box > p.tit {font-size: 14px;}
    .product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box .right_price_wrap {margin-top: 2%;}
    .product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box .right_price_wrap .tag a {font-size: 11px; padding: 2px;}
    .product.middle.select .swiper-wrapper .swiper-slide .with_item_wrap .container_95 .with_item_box .right_info_box .right_price_wrap .sell_pri span {font-size: 16px;}
}



/* tool bar */
.toolbar {position: fixed; max-width: 720px; margin: 0 auto; width: 100%; bottom: 0; left: 0; right: 0; height: 60px; z-index: 20; box-shadow: 0px 0px 18px 3px rgb(1 1 1 / 5%);}
.toolbar .container {position: relative;}
.toolbar .container .toolbar-menu {display: table; width: 100%; background-color: #fff; position: relative; z-index: 21; border-top: 1px solid #eee;}
.toolbar .container .toolbar-menu li {text-align: center; display: table-cell; width: 1%; height: 60px; padding: 0; background-color: #fff; vertical-align: middle; cursor: pointer;}
.toolbar .container .toolbar-menu li a {text-decoration: none;}
.toolbar .container .toolbar-menu li .tool {display: flex; flex-direction: column; align-items: center; position: relative;}
.toolbar .container .toolbar-menu li img {width: 25%; max-width: 20px; height: auto;}
.toolbar .container .toolbar-menu li .menu_img {width: 100%; max-width: 37px; height: auto; position: absolute; bottom: -14px;}
.toolbar .container .toolbar-menu li .menu_img_icon {width: 27%; max-width: 25px; border-radius: 5px;}
.toolbar .container .toolbar-menu li span {color: #727272; height: 12px; padding-top: 2.5px; font-size: 10px; line-height: 10px; letter-spacing: 0;}
.toolbar .container .toolbar-menu li .tool .re_badge {font-weight: 500; position: absolute; top: -28px; float: right; right: -23px; box-sizing: border-box; line-height: 18.5px; border-radius: 50%; background: #016b4c; color: #fff; width: 20px; height: 20px; font-size: 12px; text-align: center; letter-spacing: -0.5px;}
.toolbar .container .toolbar-menu li:nth-child(3) {position: relative;}
.toolbar .container .toolbar-menu li:nth-child(3) a {display: block;  width: 100%; height: 100%;}
.toolbar .container .toolbar-menu li:nth-child(3) a .tool {display: block; width: 100%; height: 100%;}
.toolbar .container .toolbar-menu li:nth-child(3) a .tool img {position: absolute; left: 50%; top: -12px; min-width: 62px; max-width: 120px; height: auto; transform: translate(-50%,0); z-index: 500;}
.toolbar .container .toolbar-menu li:nth-child(3) a .tool span {}
.toolbar .container .toolbar_cate_layer {z-index: 15; position: fixed; width: 100%; max-width: 720px; bottom: -100%; width: 100%; transition: bottom 0.5s; background-color: #fff; padding: 20px 0 30px 0; box-sizing: border-box; border-top-left-radius: 20px; border-top-right-radius: 20px; left: 50%; transform: translate(-50%,0); transition: bottom ease-out 1s; box-shadow: 0px 0px 18px 3px rgb(1 1 1 / 5%);}
.toolbar .container .toolbar_cate_layer .toolbar-cate-close {position: absolute; right: 20px; top: 15px;}
.toolbar .container .toolbar_cate_layer .toolbar-cate-close i {color: #727272; font-size: 18px;}
.toolbar .container .toolbar_cate_layer em {text-align: left; display: block; font-size: 18px; font-weight: 500; padding: 0 5%; margin-bottom: 5px;}
.toolbar .container .toolbar_cate_layer em:nth-of-type(2) {display: block; padding-top: 10px;}
.toolbar .container .toolbar_cate_layer .category {text-align: center;}
.toolbar .container .toolbar_cate_layer .category:nth-of-type(1) {border-bottom: 1px solid #eaeaea; padding: 0 10px 15px 10px;}
.toolbar .container .toolbar_cate_layer .category:nth-of-type(2) {padding: 0 10px;}
.toolbar .container .toolbar_cate_layer .category li {display: inline-block; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; position: relative; float: left; width: calc(100% / 5); margin-top: 10px;}
.toolbar .container .toolbar_cate_layer .category li:nth-child(n+6):nth-child(-n+10) {margin-top: 15px;}
.toolbar .container .toolbar_cate_layer .category li .list-group-item {font-weight: 400; color: #000; text-align: center;}
.toolbar .container .toolbar_cate_layer .category li .list-group-item div {width: 60px; height: 60px; display: block; margin: 0 auto; opacity: 1; background-color: #eee; border-radius: 50%;}
.toolbar .container .toolbar_cate_layer .category li .list-group-item p {font-size: 13px; margin-top: 5px; overflow: hidden; letter-spacing: -0.5px;}
.toolbar .container.on .toolbar_cate_layer.on {bottom: 60px; z-index: 15; transition: bottom ease-out 0.5s;}
@media screen and (max-width:680px) {}
@media screen and (max-width:480px) {
    .toolbar .container .toolbar_cate_layer .category li .list-group-item div {width: 50px; height: 50px;}
}
@media screen and (max-width:420px) {
    .toolbar .container .toolbar_cate_layer em {font-size: 16px;}
    .toolbar .container .toolbar_cate_layer .category li {margin-top: 5px;}
    .toolbar .container .toolbar-menu li:nth-child(3) a .tool img {min-width: 60px;}
}
@media screen and (max-width:360px) {
    .toolbar .container .toolbar_cate_layer .category li .list-group-item p {font-size: 12px;}
    .toolbar .container .toolbar_cate_layer .category:nth-of-type(1) {padding: 0 5px 15px 5px;}
    .toolbar .container .toolbar_cate_layer .category:nth-of-type(2) {padding: 0 5px;}
}

/* 툴바메뉴 - 카테고리 */
.md-modal {display: -moz-box; display: -ms-flexbox; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 50px; left: 0; overflow: hidden; width: 100%; opacity: 0; visibility: hidden; z-index: 2900; -webkit-transition-property: opacity, visibility, z-index; transition-property: opacity, visibility, z-index; -webkit-transition-duration: .4s; transition-duration: .4s; -webkit-transition-timing-function: initial; transition-timing-function: initial;}
.md-modal.on {z-index: 9999; visibility: visible; opacity: 1;}
.md-modal.toast {-webkit-box-align: flex-end; -ms-flex-align: flex-end; -webkit-align-items: flex-end; align-items: flex-end;}
.dimmer {content: ""; display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); -webkit-transition-property: opacity, visibility, z-index; transition-property: opacity, visibility, z-index; -webkit-transition-duration: .3s; transition-duration: .3s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transform: translateZ(0); transform: translateZ(0); visibility: hidden; opacity: 0; z-index: 0;}
.md-modal .dimmer {content: ""; display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); -webkit-transition-property: opacity, visibility, z-index; transition-property: opacity, visibility, z-index; -webkit-transition-duration: .2s; transition-duration: .2s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transform: translateZ(0); transform: translateZ(0); visibility: hidden; opacity: 0; z-index: 0;}
.md-modal.on .dimmer {opacity: 1; visibility: visible;}
.md-content {transform: translate(-50%, 0); display: none;}
.md-modal.toast.on .md-content {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; margin: 0 auto; max-width: 720px; background-color: #fff; border-radius: 8px 8px 0 0; height: auto;}
.md-content .pop_contents_wrap {padding: 20px; text-align: center;}
.md-content .pop_contents_wrap .pop_tit {font-size: 20px; line-height: 1.3; font-weight: 500; color: #222; padding-top: 10px; padding-bottom: 15px;}
.md-content .pop_contents_wrap .pop_img {width: 250px; margin: 0 auto;}
.md-content .pop_contents_wrap .pop_img img {width: 100%;}
.md-content .pop_contents_wrap .pop_txt {font-size: 14px; color: #a5a5a5; padding-bottom: 30px;}
.md-content .pop_contents_wrap .btn_app button {width: 100%; padding: 15px; background-color: #f15112; border: none; border-radius: 8px; color: #fff; font-size: 18px; font-weight: 700; margin-top: 20px;}
.md-modal.banner .bnr-item {overflow: visible; padding-bottom: 0 !important;}
.md-modal.toast>.md-content {width: 100%; -webkit-border-bottom-right-radius: 0; -webkit-border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; background-clip: padding-box; box-shadow: 0 0 15px rgb(0 0 0 / 30%); -webkit-transform: translate3d(0, 60%, 0); transform: translate3d(0, 60%, 0); -webkit-transition-property: transform, height, opacity; transition-property: transform, height, opacity; -webkit-transition-duration: .3s; transition-duration: .3s; -webkit-transition-timing-function: cubic-bezier(0.25, 0.5, 0.5, 0.9); transition-timing-function: cubic-bezier(0.25, 0.5, 0.5, 0.9); opacity: 0;}
.bnr-item {position: relative;}
.md-modal.banner .pop_oneday {position: absolute; top: -30px; left: 10px; font-size: 14px; color: #fff;}
.md-modal.banner .bnr-item .close-btn {position: absolute; box-sizing: border-box; display: inline-block; top: -26px; width: 20px; height: 20px; right: 20px; background-image: url(/images/common/close_white.svg); background-size: 16px auto; background-position: center; background-repeat: no-repeat;}





/* footer */
.footer {margin-top: 10px;}
.footer .kakao {background-color: #ffe812; text-align: center; padding: 20px 4%; border-top: 8px solid #eeeeee; border-bottom: 8px solid #eeeeee;}
.footer .kakao > em {display: block; font-weight: 700;}
.footer .kakao p {font-size: 13px; margin-top: 10px; line-height: 1.5;}
.footer .kakao a {font-size: 14px; background-color: #372c23; display: inline-block; width: 65%; text-align: center; color: #fff; padding: 10px 30px; border-radius: 30px; margin-top: 12px;}
.footer .cs {background-color: #fff; text-align: center; padding: 20px 4%;}
.footer .cs > em {font-weight: 700;}
.footer .cs p {font-size: 13px; margin-top: 10px; line-height: 1.5;}
.footer .cs a {font-size: 14px; background-color: #372c23; display: inline-block; width: 65%; text-align: center; color: #fff; padding: 10px 30px; border-radius: 30px; margin-top: 12px;}
.footer .info {background-color: #eee; text-align: center; font-size: 13px; color: #777; padding: 20px 4% 40px 4%;}
.footer .info ul {}
.footer .info ul li {display: inline-block; position: relative;}
.footer .info ul li:first-child {padding-right: 10px;}
.footer .info ul li:first-child::after {content: ''; display: block; position: absolute; top: 50%; transform: translate(0,-50%); right: 2px; width: 1px; height: 10px; background: #777;}
.footer .info p {margin: 0 auto; line-height: 1.5; font-size: 12px;}
.footer .info p:nth-of-type(1) {margin-top: 10px;}
.footer .info p:nth-of-type(2) {}
.footer .info p:nth-of-type(3) {margin-top: 10px;}
.footer .info address {font-size: 12px;}


#kakao-popup {position: fixed; left: 50%; top: 50%; width: 600px; height: auto; max-width: 90vw; max-height: 90vh; transform: translate(-50%,-50%); background-color: #fff; overflow: hidden; box-shadow: 5px 5px 14px 0 rgba(0, 0, 0, 0.3); z-index: 5000; box-sizing: border-box; display: none;}
#kakao-popup.on {display: block; animation: show-up-popup 0.6s ease 0s 1 normal forwards;}
#kakao-popup .header {}
#kakao-popup .header a.close {position: absolute; right: 5px; top: 5px; padding: 0 10px; font-size: 20px; color: #fff; z-index: 1;}
#kakao-popup .body {height: 100%;}
#kakao-popup .body .wrapper {position: relative; height: 100%;}
#kakao-popup .body .wrapper > div:first-child {background-color: #016b4c; padding: 15px; color: #fff; text-align: center; letter-spacing: -0.6px;}
#kakao-popup .body .wrapper > div:first-child em {font-size: 22px; font-weight: 700; margin-bottom: 10px; display: block;}
#kakao-popup .body .wrapper > div:first-child > div {border: 1px solid #fff; border-radius: 5px; padding: 10px;}
#kakao-popup .body .wrapper > div:first-child > div p:nth-of-type(1) {font-size: 18px;}
#kakao-popup .body .wrapper > div:first-child > div p:nth-of-type(2) {font-size: 18px;}
#kakao-popup .body .wrapper > div:first-child > div p:nth-of-type(3) {font-size: 14px; font-weight: 300;}
#kakao-popup .body .wrapper > div:last-child {padding: 15px;}
#kakao-popup .body .wrapper > div:last-child em {font-size: 16px; font-weight: 500; position: relative; padding-left: 25px;}
#kakao-popup .body .wrapper > div:last-child em::before {content: ''; width: 20px; height: 20px; background-color: #016b4c; position: absolute; border-radius: 50%; top: 50%; transform: translate(0,-50%); left: 0;}
#kakao-popup .body .wrapper > div:last-child em::after {content: ''; width: 8px; height: 8px; background-color: #016b4c; position: absolute; border-radius: 50%; top: 50%; transform: translate(0,-50%); left: 3px; border: 3px solid #fff;}
#kakao-popup .body .wrapper > div:last-child em:nth-of-type(2) {margin-top: 20px; display: block;}
#kakao-popup .body .wrapper > div:last-child p {color: #016b4c; font-size: 14px; letter-spacing: -1px; line-height: 1.3; margin-top: 5px;}
#kakao-popup .body .wrapper > div:last-child ul {border: 1px solid #ccc; margin-top: 15px;}
#kakao-popup .body .wrapper > div:last-child ul li {text-align: center;}
#kakao-popup .body .wrapper > div:last-child ul li + li {border-top: 1px solid #ccc;}
#kakao-popup .body .wrapper > div:last-child ul li a {display: block; font-size: 14px; color: #016b4c; font-weight: 500; line-height: 40px;}


/* 플로팅버튼(퀵버튼/스크롤탑) */
.quick_button_area {position: fixed; bottom: 80px; right: 10px; z-index: 1; opacity: 0; transition: opacity 0.3s;}
.quick_button_area.on {opacity: 1;}
.quick_button_area > a {display: block; width: 45px;}
.quick_button_area > a img {width: 100%;}
.quick_button_area > div {background: rgba(0, 0, 0, .9); color: #ddd; text-align: center; border-radius: 30px; padding: 10px 0px; position: relative; width: 45px;}
.quick_button_area > div::after {content: ''; position: absolute; left: 0; top: 50%; background-color: #ddd; width: 100%; height: 1px; opacity: 0.6;}
.quick_button_area > div a.quick_button {display: block; width: 100%; height: 100%; color: #ddd; text-decoration: none;}
.quick_button_area > div a.quick_button:nth-of-type(1) {padding-bottom: 7px;}
.quick_button_area > div a.quick_button:nth-of-type(1) img {width: 23px;}
.quick_button_area > div a.quick_button:nth-of-type(2) img {width: 13px;}
.quick_button_area > div a.quick_button span {display: block; font-size: 10px; letter-spacing: -0.9px; margin: 3px 0;}
@media (min-width: 680px){
    .quick_button_area {position: fixed !important; right: auto !important; margin-left: 660px;}
}

body.sub.product_detail .quick_button_area > a {display: block; width: 56px;}


/* pc-area */
.pc-area {position: fixed; top: 0; left: calc(50% + 300px); height: 100%; width: 300px; border: solid 1px #ffcc00; display: none;}
@keyframes up-down {
    from {transform: translatey(0px);}
    to {transform: translatey(-10px);}
}


/* pc-area left */
.pc-area_left {position: fixed; top: 0; left: calc(50% - 761px); height: 100%; width: 400px; display: flex; align-items: center; z-index: 0;}
.pc-area_left .BrandLeft {width: 400px; height: 100%;}
.pc-area_left .BrandLeft .BLfixed {height: 100%; position: fixed; display: flex; flex-direction: column; width: 400px; align-items: center; justify-content: center;}
.pc-area_left .BrandLeft .BLfixed .brandimgbox {align-items: center; display: flex; flex-direction: column;}
.pc-area_left .BrandLeft .BLfixed ul.actions {display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 10px;}
.pc-area_left .BrandLeft .BLfixed ul.actions li {display: inline-block; vertical-align: top; margin: 0 1px;}
.pc-area_left .BrandLeft .BLfixed ul.actions li .btn {display: block; width: 144px; height: 45px; margin: 0 2px;}
.pc-area_left .BrandLeft .BLfixed ul.actions li .btn img {width: 100%;}
.pc-area_left .BrandLeft .BLfixed ul.actions li a.btn.google {width: 250px; background-color: #232323; text-align: center; border-radius: 5px; margin-left: 18px;}
.pc-area_left .BrandLeft .BLfixed ul.actions li a.btn.google img {width: 144px;}


/* pc-area right */
.pc-area_right {position: fixed; top: 0; left: calc(50% + 361px); height: 100%; width: 400px; display: flex; align-items: center; z-index: -1;}
.pc-area_right .brd-recommen {animation: up-down 1.4s infinite ease-in-out alternate;}
.pc-area_right .brd-recommen:hover {animation-play-state: paused;}
.pc-area_right .brd-recommen {width: 360px; height: auto; background: #fff; padding: 15px; margin-left: 40px; position: absolute; border-radius: 20px; border-width: 1px; border-style: solid; border-color: #ffffff; box-shadow: 0px 0px 15px 3px rgb(50 51 51 / 15%); padding: 7% 4%;}
.pc-area_right .brd-recommen .section-title-wrapper {padding: 0px; display: flex; align-items: center;}
.pc-area_right .brd-recommen .section-title-wrapper .section-title {line-height: 27px; font-size: 18px; font-weight: 500; position: relative; margin: 0; display: block; color: #323333;}
.pc-area_right .brd-recommen .itembox {}
.pc-area_right .brd-recommen .itembox .col-xs-6 {width: 48%; float: left; position: relative; margin-top: 4%;}
.pc-area_right .brd-recommen .itembox .col-xs-6:nth-child(odd) {margin-right: 4%;}
.pc-area_right .brd-recommen .itembox .col-xs-6 .panel {width: 100%;}
.pc-area_right .brd-recommen .itembox .col-xs-6 .panel .panel-heading {position: relative;}
.pc-area_right .brd-recommen .itembox .col-xs-6 .panel .panel-heading .img-responsive {width: 100%; height: 160px;}
.pc-area_right .brd-recommen .itembox .col-xs-6 .panel .panel-heading .img-responsive img {width: 100%; height: 100%; object-fit: cover;}
.pc-area_right .brd-recommen .itembox .col-xs-6 .panel .panel-body {width: 100%; padding: 12px 0px 0px; position: relative;}
.pc-area_right .brd-recommen .itembox .col-xs-6 .panel .panel-body:before {content: " "; display: table;}
.pc-area_right .brd-recommen .itembox .col-xs-6 .panel .panel-body .prod-title {overflow: hidden; text-overflow: ellipsis; white-space: normal; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 38px; max-height: 38px; line-height: 19px; font-size: 14px;}
.pc-area_right .brd-recommen .itembox .col-xs-6 .panel .panel-body .price-box {}
.pc-area_right .brd-recommen .itembox .col-xs-6 .panel .panel-body .price-box .price-wrapper {display: inline-block; line-height: 1; white-space: nowrap; color: #484848; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; width: 100%; position: relative;}
.pc-area_right .brd-recommen .itembox .col-xs-6 .panel .panel-body .price-box .price-wrapper .org-price {display: inline-block; color: #aeaeae; height: 16px; letter-spacing: -0.2px; font-size: 12px; min-height: 14px; max-height: 14px; text-decoration: line-through;}
.pc-area_right .brd-recommen .itembox .col-xs-6 .panel .panel-body .price-box .price-wrapper .price_box {align-items: center; justify-content: space-between;}
.pc-area_right .brd-recommen .itembox .col-xs-6 .panel .panel-body .price-box .price-wrapper .price_box .dc-rate {font-size: 18px; font-weight: 700; color: #f15112; float: right; right: 0;}


/* MY 페이지 */
/*.sidenav {height: 100%; width: 100%; max-width: 720px; position: absolute; z-index: 301; top: 0; left: -100%; background-color: #fff; overflow-y: hidden; overflow-x: hidden; transition: 0.5s; text-align: center;}*/
.sidenav {height: 100%; width: 100%; max-width: 720px; position: fixed; z-index: 301; top: 0; left: -100%; margin: 0 auto; background-color: #fff; overflow-y: hidden; overflow-x: hidden; transition: 0.3s; text-align: center;}
.sidenav.open {left: 0;right: 0;}
.sidenav .mypage-top {height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0 4%;}
.sidenav .mypage-top a.closebtn {font-size: 16px; display: block; transition: 0.1s;}
.sidenav .mypage-top a.closebtn img {height: 20px; margin-right: 10px; vertical-align: middle;}
.sidenav .mypage-top a.closebtn span {vertical-align: -2px;}
.sidenav .mypage-top a.closebtn2 {font-size: 18px; display: block; transition: 0.1s; background: url(/images/web/common/icon/close.png) no-repeat; background-size: 15px; display: inline-block; text-indent: -9999px; width: 15px; height: 15px;}
.sidenav .mypage-top a.closebtn2 span {}
.sidenav .sidemenu-wrapper {overflow-y: auto; height: 100%; margin-bottom: 100px;}
.sidenav .sidemenu-wrapper::-webkit-scrollbar {width: 6px;}
.sidenav .sidemenu-wrapper::-webkit-scrollbar-thumb {height: 17%; background-color: #eaeaea; border-radius: 10px;} /* 스크롤바 막대 설정*/
.sidenav .sidemenu-wrapper::-webkit-scrollbar-track {background-color: #f6f6f6;} /* 스크롤바 뒷 배경 설정*/
.sidenav .sidemenu-wrapper .menulist-wrapper {margin-right: auto; margin-left: auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-content: center; padding: 30px 0;}
.sidenav .sidemenu-wrapper .menulist-wrapper .menulist {width: calc(100% / 4); text-align: center; margin: 10px 0 20px;}
.sidenav .sidemenu-wrapper .menulist-wrapper .menulist > span {display: inline-block; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; height: 62px; position: relative;}
.sidenav .sidemenu-wrapper .menulist-wrapper .menulist > span .list-icon {font-weight: 400; color: #000; text-align: center; padding: 0 0px 5px; margin: 0 0; border: 0; background: none; text-decoration: none;}
.sidenav .sidemenu-wrapper .menulist-wrapper .menulist > span .list-icon img {width: 60px; height: 60px; display: block; margin: 0 auto 10px; opacity: 1;}
.sidenav .sidemenu-wrapper .menulist-wrapper .menulist > span .list-icon p {font-size: 14px;}
.sidenav .sidemenu-wrapper .side-name {background-color: #016b4c; color: #fff; text-align: left; position: relative; padding: 20px 4%;}
.sidenav .sidemenu-wrapper .side-name p:nth-of-type(1) {font-size: 18px;}
.sidenav .sidemenu-wrapper .side-name p:nth-of-type(2) {margin-top: 5px; font-size: 14px;}
.sidenav .sidemenu-wrapper .side-name a {display: inline-block; border: 1px solid #fff; border-radius: 20px; padding: 3px 10px; position: absolute; right: 20px; top: 40px; font-size: 13px;}
.sidenav .sidemenu-wrapper .side-login {background-color: #016b4c; color: #fff; text-align: left; position: relative; padding: 35px 4%;}
.sidenav .sidemenu-wrapper .side-login a {display: block; font-size: 22px;}
.sidenav .sidemenu-wrapper .side-login p {}
.sidenav .sidemenu-wrapper .my-icon {background-color: #eef3ef;}
.sidenav .sidemenu-wrapper .my-icon ul.icon-list {}
.sidenav .sidemenu-wrapper .my-icon ul.icon-list > li {width: calc(100% / 3); float: left; padding: 20px 4%; box-sizing: border-box; position: relative;}
.sidenav .sidemenu-wrapper .my-icon ul.icon-list > li a.list-icon {font-weight: 400; color: #000; text-align: center; height: 60px; display: flex; align-items: center; position: relative; justify-content: end;	flex-direction: column;}
.sidenav .sidemenu-wrapper .my-icon ul.icon-list > li a.list-icon::after {content: ''; position: absolute; border-right: 1px dashed #bbb; height: 100%; right: -16%; top: 0; transform: translate(-50%,0);}
.sidenav .sidemenu-wrapper .my-icon ul.icon-list > li:last-child a.list-icon::after {display: none;}
.sidenav .sidemenu-wrapper .my-icon ul.icon-list > li a.list-icon .icon {position: relative; display: inline-block;}
.sidenav .sidemenu-wrapper .my-icon ul.icon-list > li a.list-icon .icon span.re_badge {font-weight: 500; position: absolute; top: -5px; right: -10px; box-sizing: border-box; line-height: 18.5px; border-radius: 50%; background: #f15112; color: #fff; width: 20px; height: 20px; font-size: 12px; text-align: center; letter-spacing: -0.5px;display: none;}
.sidenav .sidemenu-wrapper .my-icon ul.icon-list > li a.list-icon > span {width: auto; height: 40px; display: block; font-size: 28px; color: #000;}
.sidenav .sidemenu-wrapper .my-icon ul.icon-list > li a.list-icon img {width: auto; height: 32px; display: block; margin: 0 auto; opacity: 1;}
.sidenav .sidemenu-wrapper .my-icon ul.icon-list > li a.list-icon p {font-size: 15px; margin-top: 7px;}
.sidenav .sidemenu-wrapper .shipping-wrapper {padding: 5px 4%;}
.sidenav .sidemenu-wrapper .shipping-wrapper > p {text-align: left; font-size: 16px; margin: 10px 0 10px 0;}
.sidenav .sidemenu-wrapper .shipping-wrapper .shipping {overflow: hidden;}
.sidenav .sidemenu-wrapper .shipping-wrapper .shipping > li {width: 20%; float: left;}
.sidenav .sidemenu-wrapper .shipping-wrapper .shipping > li a {}
.sidenav .sidemenu-wrapper .shipping-wrapper .shipping > li a img {border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px;}
.sidenav .sidemenu-wrapper .shipping-wrapper .shipping > li a.list-icon {display: block; height: 100%; font-weight: 400; color: #000; text-align: center; padding: 0 0px 5px; margin: 0; border: 0; background: none;}
.sidenav .sidemenu-wrapper .shipping-wrapper .shipping > li a.list-icon span {width: 60px; height: 50px; display: block; margin: 0 auto 0; opacity: 1; font-size: 28px; color: #ccc;}
.sidenav .sidemenu-wrapper .shipping-wrapper .shipping > li a.list-icon span.on {color: #000;}
.sidenav .sidemenu-wrapper .shipping-wrapper .shipping > li a.list-icon p {font-size: 14px;}
.sidenav .sidemenu-wrapper .oder-list {height: 45px; border-top: 1px solid #eee;}
.sidenav .sidemenu-wrapper .oder-list a {display: block; width: 100%; text-align: center; line-height: 45px; font-size: 15px;}
.sidenav .sidemenu-wrapper .oder-list a span {color: #016b4c;}
.sidenav .sidemenu-wrapper .oder-list a i {vertical-align: -0.5px;}
.sidenav .sidemenu-wrapper .side-category-wrapper {background-color: #eee; padding: 12px 0 0 0;}
.sidenav .sidemenu-wrapper .side-category-wrapper ul.categoryList {background-color: #fff;}
.sidenav .sidemenu-wrapper .side-category-wrapper ul.categoryList li.side-category {width: 50%; float: left;}
.sidenav .sidemenu-wrapper .side-category-wrapper ul.categoryList li.side-category:nth-child(odd) {border-right: 1px solid #ddd; box-sizing: border-box;}
.sidenav .sidemenu-wrapper .side-category-wrapper ul.categoryList li.side-category a.category-list {border-bottom: solid 1px #ddd; height: 50px; display: block; position: relative; box-sizing: border-box;}
.sidenav .sidemenu-wrapper .side-category-wrapper ul.categoryList li.side-category a.category-list div {display: inline-block; position: absolute; left: 30px; top: 50%; transform: translate(0,-50%);}
.sidenav .sidemenu-wrapper .side-category-wrapper ul.categoryList li.side-category a.category-list div img {width: 20px; height: auto;}
.sidenav .sidemenu-wrapper .side-category-wrapper ul.categoryList li.side-category a.category-list div span {vertical-align: middle; margin-left: 5px; font-size: 14px;}
.sidenav .sidemenu-wrapper .side-product {}
.sidenav .sidemenu-wrapper .side-product {}
.sidenav .sidemenu-wrapper .side-product .tab {}
.sidenav .sidemenu-wrapper .side-product .tab > ul {border-bottom: 1px solid #ddd; overflow: hidden;}
.sidenav .sidemenu-wrapper .side-product .tab > ul li {}
.sidenav .sidemenu-wrapper .side-product .tab > ul li a {display: block; width: 50%; float: left; padding: 12px 0; font-size: 14px;}
.sidenav .sidemenu-wrapper .side-product .tab > ul li.on a {border-bottom: 3px solid #016b4c;}
.sidenav .sidemenu-wrapper .side-product .tab .product-cont {position: relative; padding-bottom:10px; }
.sidenav .sidemenu-wrapper .side-product .tab .product-cont .cont {}
.sidenav .sidemenu-wrapper .side-product .tab .product-cont .cont ul {overflow: hidden;}
.sidenav .sidemenu-wrapper .side-product .tab .product-cont .cont ul li {}
.sidenav .sidemenu-wrapper .side-product .tab .product-cont .cont {display: none;}
.sidenav .sidemenu-wrapper .side-product .tab .product-cont .cont.on {display: block;}
.sidenav .sidemenu-wrapper .side-product .tab .product-cont .cont ul {}
.sidenav .sidemenu-wrapper .side-product .tab .product-cont .cont ul li {float: left; width: calc(50% - 15px); padding: 1% 0; box-sizing: border-box;}
.sidenav .sidemenu-wrapper .side-product .tab .product-cont .cont ul li:nth-child(odd) {margin: 0 10px;}
.sidenav .sidemenu-wrapper .side-product .tab .product-cont .cont ul li:nth-child(even) {margin-right: 10px;}
.sidenav .sidemenu-wrapper .side-product .tab .product-cont .cont ul li a {display: block; width: 100%; height: 100%;}
.sidenav .sidemenu-wrapper .side-product .tab .product-cont .cont ul li a .thum-img {position: relative; width: 100%;}
.sidenav .sidemenu-wrapper .side-product .tab .product-cont .cont ul li a .thum-img::after {content: ''; display: block; padding-bottom: 100%;}
.sidenav .sidemenu-wrapper .side-product .tab .product-cont .cont ul li a .thum-img img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.sidenav .sidemenu-wrapper .side-product .tab .product-cont .cont ul li .tit {text-align: left; padding: 5px 0;}
.sidenav .sidemenu-wrapper .side-product .tab .product-cont .cont ul li .tit em {display: -webkit-box; font-size: 15px; line-height: 1.3; white-space: normal; overflow: hidden; word-wrap: break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.sidenav .sidemenu-wrapper .side-product .tab .product-cont .cont ul li .tit span {display: block; font-size: 14px; margin-top: 5px; font-weight: 500;}
.sidenav .sidemenu-wrapper .side-product .tab .product-cont .cont {display: none;}
.sidenav .sidemenu-wrapper .side-product .tab .product-cont .cont.on {display: block;}
.sidenav .sidemenu-wrapper .side-product a.more {border: 1px solid #ddd; display: none; height: 45px; line-height: 40px; box-sizing: border-box; font-size: 13px; margin: 0 auto; width: 95%;}


/* 서브페이지 헤더 */
.sub.header .navbar {display: block;}
.sub.header {z-index: 300;}
.sub.header .navbar .menu-wrapper {position: relative; height: 60px; padding: 0 10px; border-bottom: solid 1px #f6f6f6; box-sizing: border-box; display: flex; justify-content: center;}
.sub.header .navbar .menu-wrapper .back {position: absolute; left: 4%; top: 50%; transform: translate(0,-50%);}
.sub.header .navbar .menu-wrapper .back a {display: block;}
.sub.header .navbar .menu-wrapper .back a img {width: 12px;}
.sub.header .navbar .menu-wrapper .sub-header-logo {display: flex; align-items: center; justify-content: center;}
.sub.header .navbar .menu-wrapper .sub-header-logo img {width: 90px;}
.sub.header .navbar .menu-wrapper .title-wrapper {position: absolute; left: 10%; top: 50%; transform: translate(0,-50%);}
.sub.header .navbar .menu-wrapper .title-wrapper h2 {font-size: 18px; font-weight: 700;}
.sub.header .navbar .menu-wrapper .logo-wrapper {width: 120px; position: absolute; top: 50%; left: 4%; transform: translate(0,-50%);}
.sub.header .navbar .menu-wrapper .logo-wrapper a.logo {display: inline-block;}
.sub.header .navbar .menu-wrapper .logo-wrapper a.logo img {width: 100%;}
.sub.header .navbar .menu-wrapper .btn_right {z-index: 9; position: absolute; top: 50%; right: 4%; transform: translate(0,-50%); display: flex; justify-content: flex-end;}
.sub.header .navbar .menu-wrapper .btn_right span {}
.sub.header .navbar .menu-wrapper .btn_right span .btn_home {width: 25px; display: inline-block; margin-right: 10px;}
.sub.header .navbar .menu-wrapper .btn_right span .btn_home img {}
.sub.header .navbar .menu-wrapper .btn_right span .btn_search {width: 25px; display: inline-block; margin-right: 10px;}
.sub.header .navbar .menu-wrapper .btn_right span .btn_search img {}
.sub.header .navbar .menu-wrapper .btn_right span .btn_cart {width: 25px; display: inline-block; position: relative;}
.sub.header .navbar .menu-wrapper .btn_right span .btn_cart img {width: 25px;}
.sub.header .navbar .menu-wrapper .btn_right span .btn_cart .cart_badge {font-weight: 500; position: absolute; top: -7px; right: -7px; box-sizing: border-box; line-height: 18.5px; border-radius: 50%; background: #016b4c; color: #fff; width: 20px; height: 20px; font-size: 12px; text-align: center; letter-spacing: -0.5px;display:none;}
/* .header.drop {position: fixed; animation: dropHeader 0.3s; top: 0; z-index: 2; transition: animation 0.3s ease;}  */
.sub.header.drop {position: fixed; animation: dropHeader 0.3s; width: 100%; top: 0;}
.sub.header.drop .navbar {max-width: 720px; background-color: #fff;}
@keyframes dropHeader {
    0% {top: -30rem;}
    100% {top: 0;}
}

/* 레이어마스크(팝업bg) */
#layer-mask {position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 5000; background-color: rgba(0, 0, 0, 0.3); display: none;}
#layer-mask.on {display: block; animation: show-up-mask 1s ease 0s 1 normal forwards;}
@keyframes show-up-mask {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

/* 검색필터 */
.search-filter {overflow: hidden; margin-bottom: 10px; margin-top: 10px; padding: 0 4%;}
.search-filter .container {position: relative;}
.search-filter .container ul.search-filter-menu {float: right;}
.search-filter .container ul.search-filter-menu li {float: left; margin-left: 10px;}
.search-filter .container ul.search-filter-menu li a {display: block; font-size: 13px; color: #555; position: relative; padding-right: 15px;}
.search-filter .container ul.search-filter-menu li:nth-child(1) a::after {content: ''; position: absolute; width: 10px; height: 10px; right: 0; top: 50%; transform: translate(0, -50%); background: url(/images/web/common/icon/filter.png) center center no-repeat; vertical-align: middle; background-size: 10px;}
.search-filter .container ul.search-filter-menu li:nth-child(2) a::after {content: ''; position: absolute; width: 10px; height: 10px; right: 0; top: 50%; transform: translate(0, -50%); background: url(/images/web/common/icon/filter.png) center center no-repeat; vertical-align: middle; background-size: 10px;}
.search-filter .container ul.search-filter-menu li:last-child {margin-top: -2px;}
.search-filter .container ul.search-filter-menu li:last-child input[type="checkbox"] {display: none;}
.search-filter .container ul.search-filter-menu li:last-child input[type="checkbox"] + label {font-size: 13px; color: #555;}
.search-filter .container ul.search-filter-menu li:last-child input[type="checkbox"] + label span {display:inline-block; width:13px; height:13px; margin:-2px 5px 0 0; vertical-align:middle; background:url(/images/web/common/icon/checkbox_line.png) no-repeat; background-size: 13px; cursor:pointer;}
.search-filter .container ul.search-filter-menu li:last-child input[type="checkbox"]:checked + label span {background:url(/images/web/common/icon/checkbox_full.png) no-repeat; background-size: 13px;}
.search-filter .container .search_filter_layer1 {position: fixed; width: 100%; max-width: 720px; bottom: -100%; width: 100%; transition: bottom 0.5s; z-index: 100; background-color: #fff; padding: 20px 20px; box-sizing: border-box; border-top-left-radius: 20px; border-top-right-radius: 20px; left: 50%; transform: translate(-50%,0); transition: bottom ease-out 1s;}
.search-filter .container .search_filter_layer1 em {font-size: 18px; margin-bottom: 10px; display: block;}
.search-filter .container .search_filter_layer1 ul {}
.search-filter .container .search_filter_layer1 ul li {padding: 15px 0; border-bottom: 1px solid #ddd; position: relative;}
.search-filter .container .search_filter_layer1 ul li a {}
.search-filter .container .search_filter_layer1 ul li.on a::after {content: ''; position: absolute; right: 5px; top: 50%; transform: translate(0,-50%); background: url(/images/web/common/icon/check.png) no-repeat; width: 15px; height: 15px; background-size: 15px;}
.search-filter .container .search_filter_layer1 ul li:last-child {border-bottom: 0;}
.search-filter .container .search_filter_layer1 ul li a {display: block; color: #777; font-size: 14px;}
.search-filter .container .search_filter_layer1 > a {position: absolute; right: 20px; top: 20px; background: url(/images/web/common/icon/close.png) no-repeat; width: 15px; height: 15px; background-size: 15px;}
.search-filter .container.on .search_filter_layer1.on {bottom: 0; z-index: 5001; transition: bottom ease-out 0.4s;}
.search-filter .container .search_filter_layer2 {position: fixed; width: 100%; max-width: 720px; bottom: -100%; width: 100%; transition: bottom 0.5s; z-index: 100; background-color: #fff; padding: 20px 20px; box-sizing: border-box; border-top-left-radius: 20px; border-top-right-radius: 20px; left: 50%; transform: translate(-50%,0); transition: bottom ease-out 1s;}
.search-filter .container .search_filter_layer2 em {font-size: 18px; margin-bottom: 10px; display: block;}
.search-filter .container .search_filter_layer2 ul {}
.search-filter .container .search_filter_layer2 ul li {padding: 15px 0; border-bottom: 1px solid #ddd; position: relative;}
.search-filter .container .search_filter_layer2 ul li.on a::after {content: ''; position: absolute; right: 5px; top: 50%; transform: translate(0,-50%); background: url(/images/web/common/icon/check.png) no-repeat; width: 15px; height: 15px; background-size: 15px;}
.search-filter .container .search_filter_layer2 ul li:last-child {border-bottom: 0;}
.search-filter .container .search_filter_layer2 ul li a {display: block; color: #777; font-size: 14px;}
.search-filter .container .search_filter_layer2 > a {position: absolute; right: 20px; top: 20px; background: url(/images/web/common/icon/close.png) no-repeat; width: 15px; height: 15px; background-size: 15px;}
.search-filter .container.on .search_filter_layer2.on {bottom: 0; z-index: 5001; transition: bottom ease-out 0.4s;}