@charset "utf-8";
.header {
	text-align: center;
	margin: 60px 0 30px;
	animation: fadeInDown 0.8s ease-out;
}

.header-badge {
	display: inline-block;
	background: linear-gradient(135deg, #632880, #9640ca);
	color: white;
	padding: 8px 20px;
	border-radius: 50px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.5px;
	margin-bottom: 20px;
	box-shadow: #eee;
}

h1 {
	font-size: clamp(28px, 5vw, 42px);
	font-weight: 700;
	color: var(--primary-dark);
	margin-bottom: 16px;
	letter-spacing: -0.5px;
}

.header-subtitle {
	font-size: 16px;
	color: var(--text-secondary);
	max-width: 600px;
	margin: 0 auto;
}
/***
    mobile-wrap
***/
/* sub - header */
.header-sub {display: flex; align-items: center; justify-content: center; height: 52px; border-bottom: 1px solid #eaeaea; background-color: #fff; z-index: 10;}
.header-sub .header-tit {width: calc(100% - 200px); text-align: center; font-size: 18px; line-height: 20px;}
.header-sub .header-box {display: flex; align-items: center; position: absolute; top: 0; height: 100%;}
.header-sub .header-box.header-left {left: 14px;}
.header-sub .header-box.header-left .header-home {margin-left: 16px;}
.header-sub .header-box.header-right {right: 14px;}
.header-sub .header-prev {width: 24px; height: 20px;}
.header-sub .header-home {width: 24px; height:25px;}

/* sub - buttom */
.bottom-sub {display: flex; align-items: center; height: 66px; padding: 0 16px;}
.bottom-sub .btn-want {width: 42px; height: 48px; margin: 8px 8px 0 0; display: flex; align-items: center; flex-direction: column; font-size: 10px;}
.bottom-sub .btn-want:before {content:''; width: 32px; height: 32px; background: url('../images/sub/ico_want.svg') no-repeat 0 0 / 100% 100%;}
.bottom-sub .btn-want.active:before {content:''; width: 32px; height: 32px; background-image: url('../images/sub/ico_want_active.svg');}
.bottom-sub.w-100 {padding: 0; height: 56px;}
.bottom-sub.w-100 button {border-radius: 0; height: 100%;}

.bottom-sub .btn-list {width: 42px; height: 48px; margin: 8px 8px 0 0; display: flex; align-items: center; flex-direction: column; font-size: 10px;}
.bottom-sub .btn-list:before {content:''; width: 32px; height: 32px; background: url('../images/sub/list-box-svgrepo-com.svg') no-repeat 0 0 / 100% 100%;}


/* sub - footer */
.sub-footer {padding-left: 20px; padding-right: 20px; background-color: #f9f9f9; border-top: 2px solid #eaeaea;}
.sub-footer strong {margin-bottom: 16px; font-size: 12px; line-height: 15px; color: #444;}
.sub-footer .middle p {font-weight: 400; font-size: 10px; line-height: 13px;}
.sub-footer .middle .link {cursor: pointer; font-size: 9px; color: #b0b0b0;}
.sub-footer .bottom {margin-top: 16px;}
.sub-footer .bottom a { position: relative; margin-right: 11px; padding-left: 11px; font-weight: 400; font-size: 10px; color: #999;}
.sub-footer .bottom a:last-child {margin-left: 0;}
.sub-footer .bottom a:last-child:after {display: none;}
.sub-footer .bottom a:after {content: ''; display: block; position: absolute; top:50%; transform: translateY(-50%); right: -11px; width: 1px; height: 8px; background-color: #9e9e9e;}
.sub-footer .middle-2 { padding:0 16px; background-color: #fff; border-radius: 6px; font-size: 10px;}
.sub-footer .middle-2 dl {display: flex; align-items: center; justify-content: center; height: 40px; color: #888;}
.sub-footer .middle-2 dl dt {margin-right: 17px; font-weight: 700;}
.sub-footer .middle-2 dl dd:not(:first-of-type) {position: relative; padding-left: 12px; margin-left: 12px;}
.sub-footer .middle-2 dl dd:after {content: ''; display: block; position: absolute; top:50%; transform: translateY(-50%); left: 0; width: 1px; height: 8px; background-color: #9e9e9e;}
.sub-footer .middle-2 dl dd > a {text-decoration: underline; color: #3d6ef6;}
.sub-footer .btn-wrap button {width: auto; height: auto; padding: 0; border: none; font-weight: 400; font-size: 10px; text-decoration: underline; color: #bdbdbd;}
.sub-footer .sns a {width: 22px; height: 22px;}
.sub-footer .sns a + a {margin-left: 24px;}


/***
    common
***/
.mgt-0 {margin-top: 0 !important;}
.mgt-5 {margin-top: 5px !important;}
.mgt-10 {margin-top: 10px !important;}
.mgt-24 {margin-top: 24px !important;}
.pdb-0 {padding-bottom: 0 !important;}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}

/* 버튼 */
.btn {display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; border: 1px solid; line-height: 100%; font-family: arial, sans-serif; font-size: 16px; font-weight: 700; border-radius: 6px;}
.btn-dark {background-color: #000; color: #fff; border-color: #000;}
.btn-primary {background-color: #7b4897; color: #fff; border-color: #7b4897;}
.btn-white {background-color: #fff; color: #000; border-color: #000;}
.btn-default {background-color: #fff; color: #7b4897; border-color: #7b4897;}

/* 별점 */
.grade-star-wrap {overflow: hidden; position: relative; width: 60px; height: 12px;}
.grade-star {position: absolute; height: 100%; background-repeat: repeat-x; background-position: 0 0; background-size: 12px 12px;}
.grade-star.type-active {overflow: hidden; background-image: url('../images/sub/ico_star_active.svg'); z-index: 2;}
.grade-star.type-default {width: 100%; background-image: url('../images/sub/ico_star_default.svg'); z-index: 1;}
.grade-star-wrap.size-big {width: 80px; height: 19px;}
.grade-star-wrap.size-big .grade-star {background-size: 16px 16px;}

/* 말줄임 */
.ellipsis {overflow: hidden; text-overflow: ellipsis; display: -webkit-box;-webkit-box-orient: vertical;}
.ellipsis.line2 {-webkit-line-clamp: 2;}
.ellipsis.line3 {-webkit-line-clamp: 3;}

/* 체크박스 커스텀 */
.ipt-checkbox input[type="checkbox"] {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;}
.ipt-checkbox input[type="checkbox"] + label {display: inline-block; position: relative; padding-left: 28px; line-height: 22px; font-size: 12px; color: #444; cursor: pointer;}
.ipt-checkbox input[type="checkbox"] + label:before {content: ''; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border: 1px solid #bdbdbd; border-radius: 4px;}
.ipt-checkbox input[type="checkbox"]:checked + label:after {content: ''; position: absolute; top: 0; left: 0; width: 22px; height: 22px; border: 1px solid #7b4897;  background:#7b4897 url('../images/sub/ico_checkbox_w.svg') no-repeat center center / 12px 9px; border-radius: 4px;} 

/* 셀렉트박스 커스텀 */
select {
    -webkit-appearance:none; /* 크롬 화살표 없애기 */
    -moz-appearance:none; /* 파이어폭스 화살표 없애기 */
    appearance:none;
}
.select-box {height: 24px; border: 1px solid #bdbdbd; border-radius: 20px; padding-left: 12px; padding-right: 28px; font-size: 13px; color: #444; background:#fff url('../images/sub/ico_select_arrow.svg') no-repeat center right 10px / 8px 8px; outline: none;}


/***
    pop
***/
/* layer-pop */
.pop-mobile {position: fixed; top: 0; left: 0; width: 100%; height: 100%; min-height: 100vh; z-index: 102;}
.layer-pop {display: none; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.7);}
.layer-pop .pop-area {position: relative; width: calc(100vw - 80px); max-width: 340px; margin: 0 auto; padding: 24px; text-align: center; background-color: #fff; border-radius: 10px;}
.layer-pop.w-286 .pop-area {max-width: 286px !important;}
.layer-pop .pop-area .btn-pop-close {width: 14px; position: absolute; top: 12px; right: 12px;}
.layer-pop .pop-area .pop-tit {font-size: 16px; font-weight: 700; /*white-space: pre-wrap; word-break: keep-all;*/}
.layer-pop .pop-area .pop-ico {margin: 0 auto 1rem;}
.layer-pop .pop-area .pop-ico.chk {width: 56px;}
.layer-pop .pop-area .pop-ico.mark {width: 25px;}
.layer-pop .pop-area .pop-txt {margin-top: 8px; font-size: 14px; line-height: 18px;}
.layer-pop .pop-area .btn-wrap {display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px;}
.layer-pop .pop-area .btn-wrap .btn {width: 120px; height: 40px; line-height: 38px; font-size: 14px;}
.layer-pop .pop-area .btn-wrap.column {flex-direction: column;}
.layer-pop .pop-area .btn-wrap.column.w-100 .btn {width: 100%;}
.layer-pop .pop-area .btn-wrap.column .btn {width: 174px;}

/* pop-sns */
.pop-sns .pop-area {background-color: transparent; text-align: center;}
.pop-sns .prd-img {overflow: hidden; position: relative; width: 128px; height: 128px; margin: 0 auto; border-radius: 100%; }
.pop-sns .prd-img img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover;}
.pop-sns .prd-name {margin-top: 24px; font-size: 14px; line-height: 18px; color: #fff;}
.pop-sns .sns-list {display: flex; flex-direction: column; align-items: center; margin-top: 48px;}
.pop-sns .sns-list .sns-item {overflow: hidden; width: 48px; height: 48px; border-radius: 100%;}
.pop-sns .sns-list .sns-item:not(:first-child) {margin-top: 16px;}
.pop-sns .sns-list .sns-item > a {display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: 24px 24px;}
.pop-sns .sns-list .sns-item.facebook {background-color: #3B5998;}
.pop-sns .sns-list .sns-item.facebook > a {background-image: url('../images/sub/ico_sns_facebook.svg');}
.pop-sns .sns-list .sns-item.kakao {background-color: #FBE34D;}
.pop-sns .sns-list .sns-item.kakao > a {background-image: url('../images/sub/ico_sns_kakao.svg');}
.pop-sns .sns-list .sns-item.twitter {background-color: #1DA1F2;}
.pop-sns .sns-list .sns-item.twitter > a {background-image: url('../images/sub/ico_sns_twitter.svg');}
.pop-sns .sns-list .sns-item.url {background-color: #fff;}
.pop-sns .sns-list .sns-item.url > a {display: flex; align-items: center; justify-content: center; font-size: 14px; font-family: arial; font-weight: 700; color: #000;}
.pop-sns .sns-list .sns-item.url a:before {content: 'URL';}
.pop-sns .btn_pop_sns_close {margin-top: 16px; width: 24px; height: 24px; background: url('../images/sub/ico_pop_sns_close_w.svg') no-repeat 0 0 / 100% 100%;}

/* page-pop */
.page-pop {background-color: #fff;}
.page-pop .pop-area {display: flex; flex-direction: column; align-items: center; width: 100%;}
.page-pop .pop-area .pop_header {position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 54px; border-bottom: 1px solid #eaeaea;}
.page-pop .pop-area .pop_header .pop-tit {font-size: 16px; font-weight: 700;}
.page-pop .pop-area .pop_header .btn-pop-close {position: absolute; top: 50%; right: 14px; transform: translateY(-50%);}
.page-pop .pop-cnt {overflow-y: scroll; width: 100%; height: calc(100vh - 55px);}
.page-pop .pop-thumb {position: relative; width: 100%; height: 0; padding-top: 59%;}
.page-pop .pop-thumb > img {position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover;}

/* pop-footer */
.pop-footer .pop-area {width: 295px;}
.pop-footer .store-list {margin-top: 16px;}
.pop-footer .store-list li {padding: 9px; border: 1px solid #bdbdbd; border-radius: 60px;}
.pop-footer .store-list li:not(:first-child) {margin-top: 8px;}
.pop-footer .store-list li a {display: block; font-size: 12px; line-height: 15px;}
.pop-footer .store-list li a .store-name {color: #444;}
.pop-footer .store-list li a .email {margin-top: 2px; color: #3d6ef6;}

/* pop-배송지 등록 완료 */
.pop-delivery-finish .pop-area {max-width: 380px;}
.pop-delivery-finish .pop-txt {font-weight: 700; margin-top: 0 !important;}
.pop-delivery-finish .pop-txt .tit {font-size: 20px; color: #222}
.pop-delivery-finish .pop-txt .txt {margin-top: 6px; font-size: 14px; color: #666;}
.pop-delivery-finish .delivery-img {width: 180px; margin: 26px auto 0;}
.pop-delivery-finish .delivery-img > img {max-width: 100%;}
.pop-delivery-finish .pop-txt-box {margin-top: 28px; height: 109px; padding: 16px; background-color: #f8f8f8; border-radius: 12.32px;}
.pop-delivery-finish .pop-txt-box .tit {font-size: 16px; font-weight: 700; color: #222;}
.pop-delivery-finish .pop-txt-box .txt {font-size: 12px; font-weight: 400; color: #888;}
.pop-delivery-finish .pop-txt-box .txt:not(:first-child) {margin-top: 14px;}
.pop-delivery-finish .pop-txt-box .txt + .txt {margin-top: 7px;}

/* tab */
.tab .tab-cnt {display: none;}
.tab .tab-cnt.active {display: block;}

/* pop-tab */
.pop-tab .tab-nav {position: relative;}
.pop-tab .tab-nav ul {display: flex; align-items: center; height: 48px;}
.pop-tab .tab-nav li {flex: 0 0 25%; height: 100%; text-align: center; font-size: 13px; color: #444;}
.pop-tab .tab-nav li button {width: 100%; height: 100%;}
.pop-tab .tab-nav li.active button { font-weight: 700; color: #7b4897;}
.pop-tab .tab-nav .tab-highlight {position: absolute; bottom: 0; left: 0; width: 25%; height: 2px; background-color: #7b4897; transition: transform 0.2s ease-in-out 0s;}

/* toast popup */
.toast-pop {position: fixed; bottom: 70px; width: 100%; max-width: 600px; z-index: 101; transform: translateY(200px); animation: toast-motion 2.8s ease-in-out 0s forwards; }
.toast-pop .toast-pop-area {display: flex; align-items: center; justify-content: space-between; width: calc(100% - 36px); height: 52px; margin: 0 16px; padding: 0 22px; font-size: 12px; color: #fff; border-radius: 6px; background-color: rgba(0, 0, 0, 0.8);}
.toast-pop .toast-pop-area button {height: 28px; padding: 0 10px; line-height: 28px; border-radius: 6px; font-size: 12px; color: #fff; background-color: #7b4897;}
.toast-pop .toast-pop-area .txt.flex-center {display: flex; align-items: center; justify-content: center; width: 100%;}
@keyframes toast-motion {
    10% {
        opacity: 1;
        transform: translateY(0);
    }
    85% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(200px);
    }
}

/* tooltip */
.tooltip {position: absolute;}
.tooltip:after {content: ''; position: absolute; left: 50%; transform: translateX(-50%); }
.tooltip .tooltip-txt {font-size: 11px; line-height: 16px;}

.tooltip-blue {padding: 4px 16px; border-radius: 10px; color: white; background: #3d6ef6;}
.tooltip-blue:after {border-top: 6px solid #3d6ef6; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 0px solid transparent;}
.tooltip-blue.arrow-down:after {bottom: -5px;}
.tooltip-blue.arrow-up:after {top: -5px; transform: rotate(-180deg);}
.tooltip-blue.arrow-right:after {left: calc(100% - 5px); top: 50%;  transform:translateY(-50%) rotate(-90deg);}

.tooltip-blue2 {left: calc(50% - 65px);padding: 4px 16px; border-radius: 10px; color: white; background: #3d6ef6;animation: tooltipBounce 1.5s ease-in-out infinite;}
.tooltip-blue2:after {border-top: 6px solid #3d6ef6; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 0px solid transparent;}
.tooltip-blue2.arrow-down:after {bottom: -5px;}
.tooltip-blue2.arrow-up:after {top: -5px; transform: rotate(-180deg);}
.tooltip-blue2.arrow-right:after {left: calc(100% - 5px); top: 50%;  transform:translateY(-50%) rotate(-90deg);}

.tooltip-s {padding: 4px 6px; border-radius: 4px; width:60px;}
.tooltip-s .tooltip-txt {font-size: 10px;}

.tooltip-join {left: 200px; bottom: 68px;}
.tooltip-join .tooltip-txt {padding-right: 48px; line-height: 18px;}
.tooltip-join .ico-dog {position: absolute; top: -14px; right: 5px; height: 50px; margin-left: 3px;}
.tooltip-join .ico-dog > img {height: 50px}

.tooltip-guide {display: flex; align-items: center; justify-content: center; left: 0; top: -15px; padding: 2px 6px; border-radius: 4px; background: #7b4897; animation: toggle-motion 1.4s ease infinite forwards;}
.tooltip-guide:after {bottom: -4px; border-top: 4px solid #7b4897; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 0px solid transparent;;}
.tooltip-guide .tooltip-txt {font-size: 10px; color: #fff;}
.tooltip-guide .ico {width: 12px; height: 16px;}
@keyframes toggle-motion {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
    0% {
        transform: translateY(0);
    }
}

@keyframes tooltipBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

.tooltip-yellow {
    position:relative;
	left: calc(50% - 65px);
	top:30px;
	width:130px;
	text-align:center;
	padding: 4px 16px;
    border-radius: 10px;
    color: white;
    background: #ff9900;
    animation: tooltipBounce 1.5s ease-in-out infinite;
}

.tooltip-yellow:after {
    border-top: 6px solid #ff9900;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 0px solid transparent;
}

.tooltip-yellow.arrow-down:after {bottom: -4px;}
.tooltip-yellow.arrow-up:after {top: -6px; transform: rotate(-180deg);}
.tooltip-yellow.arrow-right:after {left: calc(100% - 5px); top: 50%; transform:translateY(-50%) rotate(-90deg);}




/***
    제품 상세
***/
.prd {margin-top:10px; }
.sub-wrap .prd-sub {padding: 24px 16px 32px; border-top: 1px solid #eaeaea;}
.sub-wrap .prd-sub.line-none {padding-top: 16px; border-top: none;}
.sub-wrap .prd-sub .prd-top {padding: 0; margin-bottom: 16px;}
.sub-wrap .prd-sub .prd-top h2 {font-size: 18px;}
.sub-wrap .side-pd-reset,
.sub-wrap .prd-cnt.swiper {margin-left: -16px; width: calc(100% + 32px); }
.sub-wrap .side-pd {padding-left: 16px; padding-right: 16px;}
.btn-arrow-w {display: inline-flex; align-items: center; justify-content: center;}
.btn-arrow-w:after {content: ''; width: 16px; height: 16px; margin-left: 4px; background: url('../images/sub/ico_btn_arrow_w.svg') no-repeat 0 0 / 100% 100%;}

/* 메인 스와이프 */
.swiper-prd-detail {width:100%;}
.swiper-prd-detail .swiper-button-next, 
.swiper-prd-detail .swiper-button-prev {width: 28px; height: 43px; color: #000; background-color: rgba(255, 255, 255, 0.5); font-weight:400}
.swiper-prd-detail .swiper-button-next:after,
.swiper-prd-detail .swiper-button-prev:after {font-size: 10px;}
.swiper-prd-detail .swiper-button-next {right: 0;}
.swiper-prd-detail .swiper-button-prev {left: 0;}
.swiper-prd-detail .swiper-button-next.swiper-button-disabled, 
.swiper-prd-detail .swiper-button-prev.swiper-button-disabled {opacity: 0;}
.swiper-prd-detail .swiper-pagination {bottom: 16px; left: initial; right: 16px; width: auto; font-size: 10px; padding: 2px 8px; color: #000; background-color: rgba(255, 255, 255, 0.5); border-radius: 20px;}
.swiper-prd-detail .swiper-pagination-current {font-weight: 700;} 
.swiper-prd-detail .swiper-slide .thumb-img {position:relative; height: 0; padding-top: 100%;}
.swiper-prd-detail .swiper-slide .thumb-img img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

/* 제품 정보 */
.detail-info .prd-cmt {display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px;}
.detail-info .prd-cmt .prd-cmt-inner {display: flex; align-items: center;}
.detail-info .prd-cmt .prd-tag {margin-right: 8px; padding: 3px 6px; border: 1px solid #7b4897; line-height: 13px; font-size: 10px; color: #7b4897; border-radius: 10px;}
.detail-info .prd-cmt .btn-shared {width: 24px; height: 24px; background: url('../images/sub/ico_shared.svg') no-repeat 0 0 / 100% 100%;}
.detail-info .prd-name {margin-bottom: 16px; font-size: 20px; font-weight: 700; line-height: 26px;}
.detail-info .prd-review {display: inline-flex; align-items: center;}
.detail-info .prd-review .btn-review {margin-left: 5px; border-bottom: 1px solid #888; line-height: 100%; font-size: 12px; color: #888;}

.detail-info .prd-price-wrap {display: flex; align-items: flex-start; flex-direction:row; gap: 20px; ; margin-top: 8px;}

.detail-info .prd-price,
.detail-info .prd-price2 {
    display: flex;
    flex-direction: column; /* 각 영역 내부는 위아래로 */
    flex: 1;                /* 좌우 균등 배분 */
}
.detail-info .prd-price2 {border-left: 1px solid #aaa; padding-left: 20px;}

.detail-info .prd-price .sale-percent { margin-right: 4px; font-size: 16px; font-weight: 700; line-height: 20px; color: #e80000;}
.detail-info .prd-price .price-sale-before {font-size: 14px; color: #888; text-decoration: line-through;}
.detail-info .prd-price .price {margin-left: 8px; font-size: 14px; font-weight: 400;}
.detail-info .prd-price .price em {font-size: 22px; font-weight: 700;}

.detail-info .prd-price2 .sale-percent { margin-right: 4px; font-size: 16px; font-weight: 700; line-height: 20px; color: #e80000;}
.detail-info .prd-price2 .price-sale-before {font-size: 14px; color: #888;}
.detail-info .prd-price2 .price {margin-left: 8px; font-size: 14px; font-weight: 400;}
.detail-info .prd-price2 .price em {font-size: 22px; font-weight: 700; color:#7a2e67;}


.detail-info .prd-price-point {display: inline-flex; align-items: center; margin-top: 4px; color: #888; font-size: 12px;}
.detail-info .prd-price-point .btn-point {width: 16px; height: 16px; background: url('../images/sub/ico_point_info.svg') no-repeat 0 0 / 100% 100%;}
.detail-info .prd-price-point .point-txt {display: flex; align-items: center; gap: 3px;}
.detail-info .prd-price-point .point-txt .point-price {color: #7b4897;}

.detail-info .prd-viewer-count {margin-top: 24px; padding: 12px 16px; border: 1px solid #007aff; font-size: 12px; font-weight: 700; line-height: 15px; border-radius: 6px; color: #007aff;}

.detail-info .top-review-wrap .grade-txt {margin-top: 24px;}
.detail-info .top-review-wrap .grade-txt-inner {display: flex; align-items: center;}
.detail-info .top-review-wrap .grade-txt-inner .ico_comment {height: 16px;}
.detail-info .top-review-wrap .grade-txt-inner .txt {margin-left: 4px; font-size: 14px; font-weight: 700;}
.detail-info .top-review-wrap .grade-txt-inner .txt .percent {color: #7b4897;}
.detail-info .top-review-wrap .top-review {display: flex; align-items: center; justify-content: space-between; padding: 16px; margin-top: 16px; border: 1px solid #eaeaea; background-color: #f9f9f9; border-radius: 10px;}
.detail-info .top-review-wrap .top-review .thumb-img {overflow: hidden; position: relative; width: 80px; height: 83px; border-radius: 10px;}
.detail-info .top-review-wrap .top-review .thumb-img img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.detail-info .top-review-wrap .top-review .review-info {width: calc(100% - 80px); margin-left: 16px;}
.detail-info .top-review-wrap .top-review .review-info-top {display: flex; align-items: center;}
.detail-info .top-review-wrap .top-review .review-info-top .name {margin-right: 4px; font-size: 12px; font-weight: 700;}
.detail-info .top-review-wrap .top-review .review-info-txt {margin-top: 8px; font-size: 12px;}

.detail-info .prd-delivery {display: flex; align-items: center; justify-content: space-between; margin-top: 24px; padding-top: 24px; border-top: 1px solid #eaeaea;}
.detail-info .prd-delivery .txt {line-height: 18px; color: #444;}
.detail-info .prd-delivery .txt > button {line-height: 18px; text-decoration: underline; vertical-align: top; color: #3d6ef6;}
.detail-info .prd-delivery .btn-address-enter {display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; line-height: 16px; font-size: 12px; color: #fff; background-color: #7b4897; border-radius: 40px;}

.chk-point .chk-list {margin-top: 25px; display: flex; align-items: flex-start; justify-content: space-between; padding: 0 10px;}
.chk-point .chk-list li {position: relative; text-align: center;}
.chk-point .chk-list li button {display: block;}
.chk-point .chk-list li .img-box {position: relative; max-width: 86px; margin: 0 auto;}
.chk-point .chk-list li .grade {display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 16px; font-weight: 700; color: #444;}
.chk-point .chk-list li .txt {display: inline-flex; align-items: baseline; justify-content: center; margin-top: 4px; line-height: 18px; font-size: 14px; font-family: Arial, sans-serif;}
.chk-point .chk-list li .txt:before {content: ''; width: 13px; height: 14px; margin-right: 3px; background: url('../images/sub/ico_prd_chk_list_checkbox.svg') no-repeat 0 0 / 100% 100%;}
.chk-point .chk-img {overflow: hidden; position: relative; width: 100%; height: 0; margin-top: 25px; padding-top: 76.5%;}
.chk-point .chk-img img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

.prd-detail .detail-list {border: 1px solid #bdbdbd;}
.prd-detail .detail-list li {display: flex; flex-wrap: wrap; font-size: 12px; line-height: 15px; letter-spacing: -0.2px;}
.prd-detail .detail-list li.toggle-visible {display: none;}
.prd-detail .detail-list li:not(:first-of-type) {border-top: 1px solid #bdbdbd;}
.prd-detail .detail-list .tit {width: 130px; padding: 8px; background-color: #f9f9f9;}
.prd-detail .detail-list .txt {width: calc(100% - 130px); padding: 8px; color: #444;}
.prd-detail .btn-visible {display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; padding: 8px;}
.prd-detail .btn-visible:after {content:''; width: 16px; height: 16px;  line-height: 16px; background-position: 0 0; background-size: 100% 100%; background-repeat: no-repeat;}
.prd-detail .btn-txt-visible {border: 1px solid #bdbdbd; border-top: 0; font-size: 12px; color: #888;}
.prd-detail .btn-txt-visible:after {background-image: url('../images/sub/ico_prd_detail_arrow.svg');}
.prd-detail .detail-list-wrap.open li.toggle-visible {display: flex;}
.prd-detail .detail-list-wrap.open .detail-list + .btn-txt-visible:after {transform: rotate(180deg);} 
.prd-detail .txt-info {margin-top: 16px; padding: 12px; text-align: center; font-size: 12px; background-color: #f9f9f9;}
.prd-detail .txt-info > em {color: #7b4897;}
.prd-detail .detail-img {overflow: hidden; position: relative; height: 600px; padding-bottom: 66px;}
.prd-detail .detail-img .btn-wrap {position: absolute; bottom: 0; left: 0; width: 100%; background:#fff;}
.prd-detail .detail-img .btn-wrap:before {content:''; display: block; position: absolute; bottom: 48px; left: 0; width: 100%; height: 300px; background: linear-gradient(rgba(255, 255, 255, 0.01) 0px, rgb(255, 255, 255)); z-index: 1;}
.prd-detail .detail-img .btn-img-visible {width: calc(100% - 32px); height: 48px; margin: 0 auto; line-height: 48px; font-size: 16px; font-family: Arial, sans-serif; font-weight: 700; border: 1px solid #000; background-color: #fff; border-radius: 6px;}
.prd-detail .detail-img .btn-img-visible:after {background-image: url('../images/sub/ico_prd_detail_arrow2.svg');}
.prd-detail .detail-img.open {height: auto;}
.prd-detail .detail-img.open .btn-wrap:before {display: none;}
.prd-detail .detail-img.open .btn-img-visible:after {transform: rotate(180deg);}

.order-info {padding: 24px 0 48px;}
.order-info .btn-order-info {display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 16px; color: #444; background-color: #f9f9f9; }
.order-info .btn-order-info:after {content:''; width: 16px; height: 16px; background: url('../images/sub/ico_prd_detail_arrow.svg') no-repeat 0 0 / 100% 100%; transform: rotate(-90deg);}

/* 상품 후기 */
.review {}
.review .review-top {display: flex; align-items: center; justify-content: space-between;}
.review .review-top .btn-wrap {position: relative;}
.review .review-top .btn-wrap .tooltip {left: -62px; bottom: 0;}
.review .review-top .btn-review {font-size: 12px; font-family: Arial, sans-serif; color: #888; text-decoration: underline;}

.review .review-like {display: flex; align-items: center; margin: 16px auto; padding: 16px 24px; background-color: #f9f9f9;}
.review .review-like .like-grade {padding-right: 24px; margin-right: 24px; border-right: 1px solid #eaeaea; font-size: 12px; text-align: center;}
.review .review-like .like-grade .grade {font-size: 30px; font-weight: 700;}
.review .review-like .like-grade .grade-star-wrap {margin: 8px 0;}
.review .review-like .like-graph li {display: flex; align-items: center; font-size: 10px; color: #888;}
.review .review-like .like-graph li:not(:first-child) {margin-top: 6px;}
.review .review-like .like-graph li:first-child {color: #7b4897;}
.review .review-like .like-graph li .bar {position: relative; width: 100px; height: 6px; margin: 0 8px; border-radius: 10px; background-color: #eaeaea;}
.review .review-like .like-graph li .bar .bar-indicator {position: absolute; top: 0; left: 0; height: 100%; border-radius: 10px; background-color: #7b4897;}
.review .review-filter {padding: 16px; border-top: 1px solid #eaeaea;  border-bottom: 1px solid #eaeaea;}
.review .review-filter .review-filter-area {display: flex; align-items: center; justify-content: space-between;}
.review .review-filter .review-filter-area .checkbox-box {display: flex; align-items: center;}
.review .review-filter .review-filter-area .checkbox-box .ipt-checkbox + .ipt-checkbox {margin-left: 13px;}

.review-item {position: relative; padding-top: 24px;  font-size: 12px;}
.review-item:before {content:''; position: absolute; bottom: 0; left: -16px; width: calc(100% + 32px); height: 1px; background-color: #eaeaea;}
.review-item .user-info {position: relative; display: flex; align-items: center;}
.review-item .user-info-area {margin-left: 16px;}
.review-item .date {position: absolute; top: 8px; right: 0; color: #888;}
.review-item .user-info .user-img {position: relative; overflow: hidden; width: 48px; height: 48px; border-radius: 100%;}
.review-item .user-info .user-img > img {position: absolute; top: 0; left: 0; object-fit: cover;}
.review-item .user-info .user-name {display: flex; align-items: center; font-weight: 700; color: #000;}
.review-item .user-info .user-name .name {margin-right: 4px;}
.review-item .user-info .user-name-detail {margin-top: 4px;}
.review-item .user-info .user-name-detail > span {position: relative; line-height: 100%; color: #888;}
.review-item .user-info .user-name-detail > span:not(:first-child) {padding-left: 10px; margin-left: 4px;}
.review-item .user-info .user-name-detail > span:not(:first-child):before {content:''; position: absolute; top: 5px; left: 0; width: 1px; height: 10px; background-color: #888;}
.review-item .review-info-view {margin-top: 16px;}
.review-item .review-info-view .review-info-thumb {display: flex; align-items: flex-start; gap: 8px;}
.review-item .review-info-view .review-info-thumb .thumb-item {position: relative; overflow: hidden; width: 120px; height: 120px; border-radius: 10px;}
.review-item .review-info-view .review-info-thumb .thumb-item img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover;}
.review-item .review-info-view .review-info-thumb .thumb-item.type-video {position: relative;}
.review-item .review-info-view .review-info-thumb .thumb-item.type-video .video-thumb {display: block;}
.review-item .review-info-view .review-info-thumb .thumb-item.type-video .video-player {display: none; background-color: #000;}
.review-item .review-info-view .review-info-thumb .thumb-item.type-video .video-player > video {width: 100%; height: 100%; object-fit: contain;}
.review-item .review-info-view .review-info-thumb .thumb-item.type-video .type-video-cntr {display: flex; align-items: flex-end; position: absolute; gap: 4px; width: 100%; height: 100%; bottom: 0; left: 0; padding: 8px; color: #fff; background-color: rgba(0, 0, 0, 0.3) ;}
.review-item .review-info-view .review-info-thumb .thumb-item.type-video .type-video-cntr:before {content:''; width: 16px; height: 16px; background: url('../images/sub/ico_prd_video_play.svg') no-repeat 0 0 / 16px 16px; }  
.review-item .review-info-view .review-info-txt {margin-top: 16px; font-size: 14px; color: #444; line-height: 22px;}
.review-item .review-like-count {display: flex; align-items: center; gap: 4px; margin: 16px 0 10px; line-height: 100%; font-size: 12px;}
.review-item .review-like-count:before {content: ''; width: 16px; height: 16px; background: url('../images/sub/ico_review_like_count.png') no-repeat 0 bottom / 100% 100%;}
.review-item .review-btn {display: flex; align-items: center; height: 48px; border-top: 1px solid #eaeaea;}
.review-item .review-btn button {display: flex; align-items: center; justify-content: center; gap: 4px; flex: 0 0 50%; font-family: arial, sans-serif; font-size: 12px; line-height: 100%; color: #888;}
.review-item .review-btn button:before {content:''; width: 16px; height: 16px; background-repeat: no-repeat; background-position: 0 0; background-size: 100% 100%;}
.review-item .review-btn button.ico-review-like:before {background-image: url('../images/sub/ico_review_like.svg');}
.review-item .review-btn button.ico-review-edit:before {background-image: url('../images/sub/ico-review-edit.svg');}

.review-item.active .review-info-view .review-info-thumb {flex-direction: column;}
.review-item.active .review-info-view .review-info-thumb .thumb-item {width: 100%; height: auto;}
.review-item.active .review-info-view .review-info-thumb .thumb-item img {position: static; transform: none;}
.review-item.active .review-info-view .review-info-thumb .thumb-item.type-video .video-thumb {display: none;}
.review-item.active .review-info-view .review-info-thumb .thumb-item.type-video .video-player {display: block;}


/***
    맘마 샘플
***/
.tab-banner {padding-top: 100%; height: 0; position: relative;}
.tab-banner > img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover;}
.sample-tab {}
.sample-tab .tab-nav {}
.sample-tab .tab-nav ul {display: flex; align-items: center;}
.sample-tab .tab-nav ul li {flex: 0 0 33.33%; height:51px; background-color:#f0f0f0; border-bottom: 1px solid #e0e0e0;}
.sample-tab .tab-nav ul li:not(:first-child) {border-left: 1px solid #e0e0e0;}
.sample-tab .tab-nav ul li > button {position: relative; width: 100%; height: 100%; text-align: left; padding-left: 20px; font-size: 14px; font-weight: 700; color: #555; letter-spacing: -.35px;}
.sample-tab .tab-nav ul li > button:before,
.sample-tab .tab-nav ul li > button:after {content:''; position: absolute; top: 50%; transform: translateY(-50%); right: 20px; width: 15px; height: 1px; background-color: #aaa;}
.sample-tab .tab-nav ul li > button:after {display: block; transform: translateY(-50%) rotate(90deg);}
.sample-tab .tab-nav ul li.active {background-color: #fff; border-color: #fff;}
.sample-tab .tab-nav ul li.active > button:after {display: none;}
.swiper-tab {padding: 0 20px 20px 20px;}
.swiper-tab .swiper-slide ul {display: flex; flex-wrap: wrap; align-items: center; width: 333px; margin: 0 auto;}
.swiper-tab .swiper-slide ul li {width: 33.33%; padding: 10px;}
.swiper-tab .swiper-slide ul li > a { display: block; font-size: 14px; color: #555; letter-spacing: -.35px;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.swiper-tab .swiper-slide ul li.active > a {font-weight: 700; color: #7b4897;}
.swiper-tab .swiper-flex {display: flex; align-items: center; justify-content: center;}
.swiper-tab .swiper-pagination {position: static; width: auto; font-size: 12px; margin-top: 20px;}
.swiper-tab .swiper-button-next, 
.swiper-tab .swiper-button-prev {position: static; width: 30px; height: 15px;  margin-top: 20px;}
.swiper-tab .swiper-button-next:after, 
.swiper-tab .swiper-button-prev:after {font-size: 10px; color: #555;}
.swiper-tab .swiper-button-next.swiper-button-disabled, 
.swiper-tab .swiper-button-prev.swiper-button-disabled {opacity: 0;}

.prd-cnt.prd-cnt-list {padding-top: 20px; padding-bottom: 30px; flex-direction: column; align-items: flex-end; border-top: 1px solid rgb(224, 224, 224);}
.prd-cnt-list .prd-wrap {padding-top: 20px; flex-wrap: wrap; justify-content: space-between;}
.prd-cnt-list .prd-item {height: 330px; flex-direction: column; width: calc(50% - 14px);}
.prd-cnt-list .prd-item .prd-img {position: relative; overflow: hidden; width: 190px; height: 190px; border-radius: 10px;}
.prd-cnt-list .prd-info  {margin-top: 10px;}
.prd-cnt-list .prd-info .item-tit {height: 42px; font-size: 16px; line-height: 20px;}
.prd-cnt-list .prd-info .item-price .price {font-size: 19px;}
.prd-cnt-list .prd-info .item-price .currency {font-size: 16px;}
.prd-cnt-list .prd-info .item-price .item-sale {font-size: 19px;}

.soldout {display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.5); color: #fff;}
.soldout .tit {font-size: 24px; font-weight: 700;}
.soldout .txt {display: flex; align-items: center; justify-content: center;  gap: 4px; margin-top: 6px; font-size: 11px;}
.soldout .txt > i {height: 6px;}

/***
    장바구니 추가
***/
.cart-opt {visibility: hidden; opacity: 0; display: flex; flex-direction: column; justify-content: flex-end; z-index: 100; background-color: rgba(0, 0, 0, 0.5); transition: visible 0.4s, opacity 0.2s ease-in-out;}
.cart-opt.open {visibility: visible; opacity: 1;}
.cart-opt.open .cart-area {transform: translateY(0);}
.cart-area {position: relative; padding: 42px 16px 24px 16px; width: 100%; max-width: 600px; margin: 0 auto 66px; background-color: #fff;border-top-left-radius: 20px; border-top-right-radius: 20px; transform: translateY(100%); transition: transform 0.3s ease-in-out;}
.cart-area:before {content: ''; position: absolute; top: 8px; left: 0; right: 0; width: 32px; height: 5px; margin: 0 auto; background-color: #bdbdbd; border-radius: 10rem;}
.cart-top {display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; background-color: #f9f9f9;}
.cart-top .idx-price {font-size: 12px; color: #32898c;}
.cart-sel {display: flex; justify-content: space-between; margin-top: 16px; }
.cart-sel .sel-input {display: flex; align-items: center; height: 26px;}
.cart-sel .sel-input input[type="number"] {width: 48px; height:100%; border: 1px solid #bdbdbd;text-align: center; font-size: 13px;}
.cart-sel .sel-input input[type="number"]:focus {border-color: #7b4897;}
.cart-sel .sel-input .btn-count {position: relative; width: 28px; height: 26px; border: 1px solid #bdbdbd;} 
.cart-sel .sel-input .btn-count:disabled {background-color: #eaeaea;}
.cart-sel .sel-input .btn-count-minus {display: flex; align-items: center; justify-content: center; border-right: 0;}
.cart-sel .sel-input .btn-count-minus:before {content: ''; display: block; width: 8px; height: 1.5px; background-color: #444;}
.cart-sel .sel-input .btn-count-plus {border-left: 0;}
.cart-sel .sel-input .btn-count-plus:before,
.cart-sel .sel-input .btn-count-plus:after {content: ''; position: absolute; top: 50%; left: 50%; background-color: #444; transform: translate(-50%, -50%);}
.cart-sel .sel-input .btn-count-plus:before {width: 8px; height: 1.5px;}
.cart-sel .sel-input .btn-count-plus:after {width: 1.5px; height: 8px;}
.cart-sel .sel-input .btn-count:disabled:before,
.cart-sel .sel-input .btn-count:disabled:after {background-color: #bdbdbd;}
.cart-sel .sel-input .total {margin-left: 8px; font-size: 12px; color: #888;}
.cart-sel .sel-price .price-total {display: flex; align-items: flex-end; margin-top: 8px; line-height: 100%; font-size: 14px;}
.cart-sel .sel-price .price-total > em {margin: 0 4px; font-size: 20px; font-weight: 700;}
.cart-sel .sel-price .price-point {margin-top: 10px; font-size: 12px; color: #888;}
.cart-sel .sel-price .price-point > em {color: #7b4897;}
.cart-address {display: flex; align-items: center; justify-content: space-between; margin-top: 26px; padding-top: 26px; border-top: 1px solid #eaeaea;}
.cart-address .address {font-size: 12px; color: #444;}
.cart-address .address > em {color: #568eda;}
.cart-address .btn-arrow {color: #888; font-weight: 400;}

/* 장바구니 담기 - 지역 수정하기 */
.search-bar-container {position: relative; padding: 10px 16px;}
.search-bar-container .search-bar {position: relative; height: 46px; z-index: 2;}
.search-bar-container .search-bar input {width: 100%; height: 100%; background-color: #fff; padding: 0 70px 0 16px; border: 2px solid #bdbdbd; font-size: 18px; border-radius: 6px;}
.search-bar-container .search-bar button {position: absolute; top: 50%; right: 4px; width: 40px; height: 40px; transform: translateY(-50%); background: url('../images/sub/ico_search_pink.png') no-repeat center center / 100% auto;}
.search-bar-container .search-bar.focus {width: calc(100% - 42px);}
.search-bar-container .search-bar.focus input {border-color: #7b4897;}
.search-bar-container .search-bar.focus button {background-image: url('../images/sub/ico_x.png'); background-size: 18px 18px;}
.search-bar-container .btn-search-bar {position: absolute; top: 50%; right: 16px; transform: translateY(-50%); font-size: 14px; height: 30px; padding: 4px; z-index: 1;}

.search-address-list-container {padding: 0 12px; margin: 30px 0 90px;}
.search-address-list-container .tit {color: #4a4a4a; font-size: 20px; font-weight: 700;}
.search-address-list li {display: flex; align-items: center; justify-content: space-between; padding: 10px 0 10px 22px; border-bottom: 1px solid #c8c8c8; background: url('../images/sub/ico_search_address.png') no-repeat 0 12px / 10px 14px;}
.search-address-list.bd-0 li{border: none}
.search-address-list li a {width: 100%; color: #4a4a4a; line-height: 1.2; font-size: 14px; word-break: break-all;}
.search-address-list li .address { font-weight: 700;}
.search-address-list li .address_detail {margin-top: 6px;}
.search-address-list li button {width: 18px; height: 18px; margin-left: 10px; margin-right: 10px;}

.search-map {position: relative; height: 210px; overflow: hidden;}
.search-map > img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover;}
.search-detail-ipt {padding: 10px 0 23px;}
.search-detail-ipt input {width: 100%; height: 50px; font-size: 14px; line-height: 50px; padding: 1rem; margin-bottom: 8px; border: 1px solid #bdbdbd; border-radius: 6px;}
.search-detail-ipt input:focus {border-color: #7b4897;}

/***
    검색
***/
.search-input input::-ms-clear,
.search-input .input::-ms-reveal{
	display:none;width:0;height:0;
}
.search-input input::-webkit-search-decoration,
.search-input input::-webkit-search-cancel-button,
.search-input input::-webkit-search-results-button,
.search-input input::-webkit-search-results-decoration{
	display:none;
}
.search-top {position: sticky; top: 0; width: 100vw; max-width: 600px; z-index: 100;}
.search-top-form {padding:0 16px 10px 16px;display: flex; max-width: 600px; background-color: #fff; position: relative;}
.search-top-form .search-input > img {position: absolute; left: 15px; top: 25%; width: 24px;}
.search-top-form .search-input {position: relative; width: 88%; transition: left .2s ease .1s; left: 13px;}

.search-top-form .search-input input {padding: 9.5px 20px 9.5px 44px; font-size: 14px; font-weight: 400; height: 48px; line-height: 20px; border: 1px solid #777; border-radius: 25px; transition: all .2s; caret-color: #000; width: 100%; }
.search-top-form .search-input.cursor {left: 5px;}
.search-top-form .search-input.cursor input {padding: 9.5px 62px 9.5px 20px; }
.search-top-form .btn-input-del {display: none; width: 24px; height: 24px; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);}
.search-top-form .btn-reset {display: none; margin-left: 20px;}
.search-recent {padding-top: 20px;}
.search-recent .prd-top h2 {font-size: 16px;}
.search .prd-wrap .swiper-slide {width: 120px;}
.search .prd-item.wd120 .prd-img img {border-radius: 10px;}
.search .prd-info .item-tit {font-weight: 400; font-size: 12px;}

.hot-word {padding: 30px 0;}
.hot-word h2 {font-size: 16px; color: #050505; padding: 0 16px; font-weight: 700;}
.hot-word .hot-word-top-txt {padding-bottom: 20px; margin: 10px 16px 0; border-bottom: 1px solid #eee; display: flex; justify-content: space-between;}
.hot-word .hot-word-top-txt .sub-tit {font-size: 12px; color: #444;}
.hot-word .hot-word-top-txt .date {font-size: 12px; color: #bdbdbd;}
.hot-list {margin: 0 16px; padding: 0 5px; border-bottom: 1px solid #eee;}
.hot-list .list-item {display: flex; align-items: center; height: 50px; font-size: 15px;}
.hot-list .list-item .list-item-ico {width: 15px; height: 11px; margin: 0 17px 0 4px; display: flex;}
.hot-list .list-item .type {margin-left: 10px; min-width: 25px; line-height: 9px; display: flex; align-items: center;}
.hot-list .list-item .type .ranking{padding: 1px 4px; border-radius: 20px; display: flex; align-items: center;}
.hot-list .list-item .type .ranking.up {font-weight: 700; color: #3d6ef6; font-size: 10px; background-color: #e2e9fb;;}
.hot-list .list-item .type .ranking.down {font-weight: 700; color: #888; font-size: 10px; background-color: #f5f5f5;}
.hot-list .list-item .type .ranking.new {font-weight: 700; color: #7b4897; font-size: 10px; background-color: #fff2f6; height: 17px;}
.hot-list .list-item .type .ranking img {width: 15px; margin: 0 auto;}
.hot-list .list-item .type .ranking .count {padding-left: 0; min-width: 10px;} 
.hot-list .list-item .arrow {display: flex; align-items: center; margin: auto 0 auto auto; min-width: 30px; text-align: center;}
.hot-list .list-item .arrow img {transition: transform .4s ease-out;}
.hot-list .product-list {display: none; margin: 0 -20px;}
.hot-list .product-list .prd-item.wd120 {height: 218px;}
.hot-list.active .list-item .arrow img {transform: scaleY(-1);}
/* .hot-list .product-list.active {opacity: 1; height: 218px;} */

.searching-list {display: none; position: fixed; top: 110px; width: 100%; height: calc(100vh - 110px); background: #fff; z-index: 100; max-width: 600px;  }
.searching-list .fade {animation: fadein 1.2s; background-color: #fff;}
.recent-top {padding: 20px 20px 0; margin-top: 15px; min-height: 16px; display: flex; justify-content: space-between; align-items: center;}
.recent-top h2 {font-size: 14px; line-height: 16px; color: #050505; font-weight: 700;}
.recent-top .btn-txt {font-size: 11px; color: #888; font-weight: 400; border-bottom: 0.5px solid #888;}
.recent-wrap {padding: 13px 20px 0;}
.recent-wrap li {padding: 0 10px; border-bottom: 1px solid #eee; display: flex; align-items: center;}
.recent-wrap li .btn-list {height: 50px; line-height: 50px; width: calc(100% - 50px);}
.recent-wrap li .btn-list span {display: block; font-size: 15px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1; text-align: left;}
.recent-wrap li .btn-delete {width: 50px; height: 50px; text-align: center; display: flex; align-items: center;}
.recent-wrap li .btn-delete img {width: 10px; margin: 0 0 0 auto; }
.theme-list {padding: 30px 20px;}
.theme-top h2 {font-size: 14px; font-weight: 700; color: #050505;}
.theme-wrap {display: flex; justify-content: space-around; margin-top: 15px; text-align: center;}
.theme-wrap .theme-item {cursor: pointer; padding: 0 2px; width: 74px;}
.theme-wrap .theme-item img {width: 100%; margin-bottom: 8px; border-radius: 50%;}
.theme-wrap .theme-item p {font-size: 12px; color: #050505; margin-top: 3px;}

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/***
    media query
***/
@media only screen and (max-width: 320px) {
    .header-sub .header-tit {font-size: 16px;}
    .chk-point .chk-list {padding: 0;}
    .chk-point .chk-list li .txt {font-size: 12px; letter-spacing: -0.2px;}
}
@media only screen and (max-width: 400px) {
	.tooltip-join {left: 80px; bottom: 68px;}
	.tooltip-join .tooltip-txt {padding-right: 48px; line-height: 18px;}
	.tooltip-join .ico-dog {position: absolute; top: -14px; right: 5px; height: 50px; margin-left: 3px;}
	.tooltip-join .ico-dog > img {height: 50px}
}
@media only screen and (min-width: 1024px) {
    .pop-mobile {left: inherit; max-width: 600px;}
}

/* 알림 설정 팝업 */
#pushSettingPop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}
#pushSettingPop .pop-inner {
    background: #fff;
    border-radius: 15px;
    width: 90%;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
}
#pushSettingPop .push-setting-content {
    padding: 20px;
}
#pushSettingPop .push-setting-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
#pushSettingPop .push-setting-header h2 {
    margin: 0;
    font-size: 18px;
    color: #633e84;
}
#pushSettingPop .pop-close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #999;
}
#pushSettingPop .push-setting-desc {
    color: #666;
    font-size: 14px;
    margin-bottom: 20px;
}
#pushSettingPop .form-group {
    margin-bottom: 15px;
}
#pushSettingPop .form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 14px;
}
#pushSettingPop .form-group select,
#pushSettingPop .form-group input[type="number"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
}
#pushSettingPop .form-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
#pushSettingPop .form-row input {
    flex: 1;
}
#pushSettingPop .range-divider {
    color: #999;
}
#pushSettingPop .checkbox-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
}
#pushSettingPop .checkbox-group input {
    width: 20px;
    height: 20px;
}
#pushSettingPop .btn-save {
    width: 100%;
    padding: 15px;
    background: #633e84;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}
#pushSettingPop .btn-save:hover {
    background: #4a2d63;
}