@charset "utf-8";
@import url('goods.css?ver=20250627001');

.header > .navigation > h1 {text-align:left;}

.header > .navigation > a.icon.icon-back {display:none;}
.header > .navigation > a.icon.icon-home {display:none;}
.header > .navigation > a.icon.icon-search {display:block;}
.header > .navigation > a.icon.icon-cart {display:block}

.main > .module {padding-bottom:32px;}
.main > .module > div {position:relative;}
.main > .module > div + div,
.main > .module > div + * + div {margin-top:32px;}
.main > .module > div > h2 {font-size:20px; font-weight:600;}
.main > .module > div > h3 {font-size:13px; font-weight:400; line-height:16px; color:#666;}
.main > .module > div > h2 + h3 {margin-top:6px;}
.main > .module > div:first-child > h2,
.main > .module > div:first-child > h3 {margin-top:16px;}
.main > .module > div:first-child > h2 + h3 {margin-top:6px;}
.main > .module > div > a.more {display:block; margin-top:16px; font-size:12px; line-height:32px; text-align:center; border:1px solid #ddd; border-radius:16px;}
.main > .module > .goods,
.main > .module > .image,
.main > .module > .html,
.main > .module > .cpns {padding:0 16px;}
.main > .module > .goods.full,
.main > .module > .html.full {padding:0;}
.main > .module > .goods.full > a.more,
.main > .module > .image.full > a.more {margin-left:16px; margin-right:16px;}
.main > .module > hr {position:relative; height:48px; margin-block-start:16px; margin-block-end:0; border-style:none; background:url(../images/addon/hr-3.png) repeat-x 0 center;}
.main > .module > hr:before {position:absolute; left:0; top:0; display:block; width:16px; height:48px; content:''; background:url(../images/addon/hr-1.png) no-repeat center center;}
.main > .module > hr:after {position:absolute; right:0; top:0; display:block; width:16px; height:48px; content:''; background:url(../images/addon/hr-2.png) no-repeat center center;}
.main > .module > hr + div {margin-top:16px;}
.main > .module > .image.full + hr {height:16px; margin-block-start:0; background:unset;}
.main > .module > .image.full + hr:before {height:16px; background-position:left bottom;}
.main > .module > .image.full + hr:after {height:16px; background-position:left bottom;}
.main > .module > hr + .image.full {margin-top:-32px;}

/* 상품 */
.main > .module > .goods.full h2,
.main > .module > .goods.full h3 {padding:0 16px;}
.main > .module > .goods > .category-tab {display:flex; align-items:center; margin-top:8px; overflow-x:auto;}
.main > .module > .goods > .category-tab::-webkit-scrollbar {display:none; width:0;}
.main > .module > .goods > .category-tab > a {position:relative; display:inline-block; line-height:16px; color:#888; white-space:nowrap;}
.main > .module > .goods > .category-tab > a + a {margin-left:8px;}
.main > .module > .goods > .category-tab > a.on {font-weight:600; color:#333; text-decoration:underline;}
.main > .module > .goods > .list {margin-top:4px;}
.main > .module > .goods > .list.swiper-container {margin-top:12px !important;}
.main > .module > .goods > .list.swiper-container > ul {height:auto !important; flex-wrap:unset !important;}
.main > .module > .goods > .list.swiper-container > ul > li {width:200px !important; margin-top:0 !important; margin-left:0 !important; margin-right:16px !important;}
.main > .module > .goods > .list.swiper-container > ul > li:last-child {margin-right:0 !important;}
.main > .module > .goods > .list.swiper-container > ul > li > a > .img {height:calc(200px * var(--prdt_img_rate)) !important;}
.main > .module > .goods > .list.category {display:none;}
.main > .module > .goods > .list.category.on {display:block;}

/* 이미지 */
.main > .module > .image > img,
.main > .module > .image > * > img {display:block; max-width:100%; margin:0 auto; border-radius:12px;}
.main > .module > .image > h2 ~ img,
.main > .module > .image > h3 ~ img,
.main > .module > .image > h2 ~ * > img,
.main > .module > .image > h3 ~ * > img,
.main > .module > .image > h2 + div.list,
.main > .module > .image > h3 + div.list {margin-top:12px;}
.main > .module > .image > div > ul > li {position:relative; text-align:center; overflow:hidden;}
.main > .module > .image > div > ul > li > a {display:block;}
.main > .module > .image > div > ul > li > div {position:absolute; left:16px; bottom:32px; text-align:left;}
.main > .module > .image > div > ul > li > div > strong {display:block; font-size:22px; line-height:24px; color:#fff;}
.main > .module > .image > div > ul > li > div > span {display:block; margin-top:8px; font-size:15px; color:#fff;}
.main > .module > .image > div > ul > li > img,
.main > .module > .image > div > ul > li > * > img {display:block; width:100%;}
.main > .module > .image > div > .swiper-pagination > a {margin:0; margin-right:4px; font-size:0; line-height:0; background-color:#fff; opacity:unset !important; border-radius:4px !important;}
.main > .module > .image > div > .swiper-pagination > a:last-child {margin-right:0;}
.main > .module > .image > div > .swiper-pagination > a.swiper-pagination-bullet-active {width:24px; background-color:#000;}
.main > .module > .image > div > .swiper-notification {display:none; left:auto; right:0; top:unset; bottom:0; padding:0 11px; line-height:25px; opacity:1; text-align:right; color:#fff; font-size:11px; font-weight:500; letter-spacing:2px; background-color:#333; background-color:rgba(0, 0, 0, 0.2); z-index:10;}
.main > .module > .image + .goods.item {margin-top:16px;}
.main > .module > .image.full {padding:16px; background-color:#f6f8fa;}
.main > .module > .image.full > .list {border-radius:12px;}
.main > .module > .image.full:first-child > .list {border-radius:16px;}
.main > .module > .image.full + .image.full {padding:0; margin-top:0; background-color:#fff;}
.main > .module > .image.full + .image.full > .list {border-radius:0;}
.main > .module > .image.full + .image.full > img,
.main > .module > .image.full + .image.full > * > img {border-radius:0;}

/* 쿠폰구매 */
.main > .module > .cpns {padding:0;}
.main > .module > .cpns + div {margin-top:44px;}
.main > .module > .cpns > h2,
.main > .module > .cpns > h3 {padding:0 16px;}
.main > .module > .cpns > div {padding:0 16px 24px 16px; border-bottom:1px solid #f4f6fa; box-shadow:0 6px 12px 0 #f6f8fa; background-color:#fff;}
.main > .module > .cpns > h2 + div,
.main > .module > .cpns > h3 + div {margin-top:12px;}
.main > .module > .cpns > div > form > * {display:flex; align-items:center; justify-content:space-between;}
.main > .module > .cpns > div > form > * > div {width:calc((100% - 60px - 12px) / 2);}
.main > .module > .cpns > div > form > * > div.quantity {width:60px;}
.main > .module > .cpns > div > form > * > div > a {display:block; width:100%; height:40px; padding:0 14px; padding-right:30px; line-height:38px; border:1px solid #dcdee0; border-radius:3px; box-sizing:border-box; background:url(../images/icon-dropdown.png) no-repeat right center; background-position:calc(100% - 14px) center; overflow:hidden;}
.main > .module > .cpns > div > form > * > div > input {text-align:center;}
.main > .module > .cpns > div > form > * > button {display:none;}
.main > .module > .cpns > div > div.sum {display:flex; align-items:center; justify-content:space-between; margin-top:8px; font-weight:600; font-size:15px;}
.main > .module > .cpns > div > button {display:block; width:100%; height:50px; margin-top:12px; font-size:15px; font-weight:600; color:#fff; background-color:#0c38ae; border-radius:3px;}
.main > .module > .cpns > div > .other {display:flex; align-items:center; justify-content:flex-end; margin-top:16px;}
.main > .module > .cpns > div > .other > a {display:inline-block; margin-left:16px; font-size:15px; font-weight:500; background-repeat:no-repeat; background-position:left center; background-size:16px auto;}
.main > .module > .cpns > div > .other > a:first-child {margin-left:0;}
.main > .module > .cpns > div > .other > a.budget {padding-left:24px; background-image:url(../images/icon-search.png);}

.main > .search-filter {display:none; position:fixed; left:0; top:0; width:100%; height:100%; background-color:#333; background-color:rgba(0, 0, 0, 0.7); z-index:999;}
.main > .search-filter > .closed {position:absolute; left:0; top:0; width:100%; height:30vh;}
.main > .search-filter > .screen {position:absolute; left:0; /*bottom:-70vh;*/ bottom:0; width:100%; height:70vh; padding:16px 16px 0 16px; background-color:#fff; border-radius:10px 10px 0 0; box-sizing:border-box;}
.main > .search-filter > .screen > .head {position:relative;}
.main > .search-filter > .screen > .head ul:after {clear:both; display:block; content:'';}
.main > .search-filter > .screen > .head ul li {float:left; margin-left:18px; font-size:16px; font-weight:600; color:#333; line-height:22px;}
.main > .search-filter > .screen > .head ul li:first-child {margin-left:0;}
.main > .search-filter > .screen > .head a.close {position:absolute; right:6px; top:3px; width:15px; height:15px; font-size:0; line-height:0; background:url(../images/icon-x.png) no-repeat center center;}
.main > .search-filter > .screen > .item {height:calc(70vh - 16px - 22px - 16px - 16px); margin-top:16px; overflow-x:hidden; overflow-y:auto;}
.main > .search-filter > .screen > .item > ul {display:flex; flex-flow:wrap;}
.main > .search-filter > .screen > .item > ul.brand > li {width:calc((100% - 32px) / 3); margin-right:16px; margin-bottom:16px; text-align:center;}
.main > .search-filter > .screen > .item > ul.brand > li:nth-child(3n) {margin-right:0;}
.main > .search-filter > .screen > .item > ul.brand > li > a {display:block;}
.main > .search-filter > .screen > .item > ul.brand > li > a > strong {position:relative; display:block; width:64px; height:64px; margin:0 auto; margin-bottom:6px; border:1px #ebedee solid; border-radius:100%; overflow:hidden;}
.main > .search-filter > .screen > .item > ul.brand > li > a > strong > img {position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%;}
.main > .search-filter > .screen > .item > ul.goods > li {width:100%; margin-top:12px;}
.main > .search-filter > .screen > .item > ul.goods > li:first-child {margin-top:0;}
.main > .search-filter > .screen > .item > ul.goods > li > a {display:flex; justify-content:space-between;}
.main > .search-filter > .screen > .item > ul.goods > li > a > strong {position:relative; display:block; width:64px; height:64px; overflow:hidden; border-radius:3px;}
.main > .search-filter > .screen > .item > ul.goods > li > a > strong > img {position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%;}
.main > .search-filter > .screen > .item > ul.goods > li > a > span {display:flex; flex-direction:column; justify-content:space-between; width:calc(100% - (64px + 12px));}
.main > .search-filter > .screen > .item > ul.goods > li > a > span > em {position:relative; display:block;}
.main > .search-filter > .screen > .item > ul.goods > li > a > span > em > s {font-size:12px; font-weight:300; color:#999;}
.main > .search-filter > .screen > .item > ul.goods > li > a > span > em > em {position:absolute; right:0; top:0; font-weight:500; color:#fa6c6c;}

/* 팝업 */
.main > .popup {display:none; position:fixed; left:0; top:0; width:100%; min-width:320px; height:100%; text-align:center; color:#333; font-weight:bold; background-color:#333; background-color:rgba(0, 0, 0, 0.5); z-index:999; box-sizing:border-box;}
.main > .popup.on {display:block;}
.main > .popup > .swiper-container {position:absolute; left:0; bottom:0; width:100%; background-color:#fff; background-color:rgba(255, 255, 255, 0.95); border-radius:8px 8px 0 0;}
.main > .popup > .swiper-container > .swiper-wrapper > .swiper-slide {position:relative; padding:0; text-align:left; font-weight:normal; box-sizing:border-box;}
.main > .popup > .swiper-container > .swiper-wrapper > .swiper-slide > .image {width:100%; min-height:30vh; max-height:calc(100vh - 57px - 42px - 47px); border-style:none; overflow-y:auto; box-sizing:border-box; border-radius:8px 8px 0 0;}
.main > .popup > .swiper-container > .swiper-wrapper > .swiper-slide > .image > a > img {display:block; max-width:100%; margin:0 auto;}
.main > .popup > .swiper-container > .swiper-wrapper > .swiper-slide > .today {padding:16px 20px; line-height:15px; text-align:right; background-color:#fff;}
.main > .popup > .swiper-container > .swiper-wrapper > .swiper-slide > .today > a {display:inline-block; font-size:13px; line-height:15px; color:#111;}
.main > .popup > .swiper-container > .swiper-wrapper > .swiper-slide > .close {display:inline-block; position:absolute; left:20px; bottom:16px; font-size:13px; line-height:15px; color:#111;}
.main > .popup > .swiper-container > .swiper-notification {display:inline-block; left:auto; right:16px; top:16px; padding:0 11px; line-height:25px; opacity:1; text-align:right; color:#fff; font-size:11px; font-weight:500; letter-spacing:2px; background-color:#333; background-color:rgba(255, 255, 255, 0.2); border-radius:12.5px; z-index:1000;}

/* 미리보기 */
.preview .main > .module > * {margin-top:16px !important;}
.preview .main > .module > .image.full {margin-top:0 !important;}

/* 리뷰 */
.main > .module > .rvws {padding:16px 0; width:100%;}
.main > .module > .rvws > h2,
.main > .module > .rvws > h3 {padding:0 16px;}
.main > .module > .rvws > div > ul {display:flex; align-items:center; margin-top:16px;}
.main > .module > .rvws > div > ul > li {width:70vw; background-color:#f2f3fb; opacity:0.3; border-radius:8px;}
.main > .module > .rvws > div > ul > li.swiper-slide-active {opacity:1;}
.main > .module > .rvws > div > ul > li > a {display:block; width:100%; height:100%; padding:16px; box-sizing:border-box;}
.main > .module > .rvws > div > ul > li > a > span {display:block; margin-top:8px;}
.main > .module > .rvws > div > ul > li > a > span > span {position:relative; display:inline-block; width:80px; height:16px; font-size:0; line-height:0; vertical-align:middle; background:url(../images/star-on-2.png) repeat-x left center; background-size:16px 15px;}
.main > .module > .rvws > div > ul > li > a > span > span > em {position:absolute; right:0; top:0; display:inline-block; width:100%; height:16px; padding:0; font-size:0; line-height:0; background:#fff url(../images/star-2.png) repeat-x left center; background-size:16px 15px;}
.main > .module > .rvws > div > ul > li > a > strong {display:flex; text-align:center;}
.main > .module > .rvws > div > ul > li > a > strong > strong {width:calc(100% - 35px * 2); font-size:16px; line-height:40px; vertical-align:middle; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.main > .module > .rvws > div > ul > li > a > strong > em {width:19px; height:40px; font-size:0; line-height:0; vertical-align:middle;}
.main > .module > .rvws > div > ul > li > a > strong > em:first-child {margin-right:16px; background:url(../images/addon/icon-quotation-01.png) no-repeat left top;}
.main > .module > .rvws > div > ul > li > a > strong > em:last-child {margin-left:16px; background:url(../images/addon/icon-quotation-02.png) no-repeat right bottom;}
.main > .module > .rvws > div > ul > li > a > em {display:block; height:46px; margin-top:8px; font-size:14px; line-height:23px; color:#999; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.main > .module > .rvws > div > ul > li > a > small {display:flex; align-items:flex-end; justify-content:end; height:25px; margin-top:5px; font-size:14px; color:#999;}
.main > .module > .rvws > div > ul > li > a > small > em {width:25px; height:25px; margin-left:16px; font-size:0; line-height:0; background:url(../images/addon/icon-pencil.png) no-repeat center center; background-size:25px auto;}
.main > .module > .rvws > div > ul > li > a > i {position:relative; display:block; width:100%; height:calc(70vw - 32px); margin-top:16px; overflow:hidden; border-radius:3px;}
.main > .module > .rvws > div > ul > li > a > i > img,
.main > .module > .rvws > div > ul > li > a > i > video {position:absolute; left:0; top:50%; transform:translateY(-50%); display:block; width:100%;}
.main > .module > .rvws > div > .swiper-button-prev,
.main > .module > .rvws > div > .swiper-button-next {width:17px; height:27px; margin-top:0; background-size:auto; transform:translateY(-50%);}
.main > .module > .rvws > div > .swiper-button-prev {left:16px; background-image:url(../images/addon/icon-main-prev.png);}
.main > .module > .rvws > div > .swiper-button-next {right:16px; background-image:url(../images/addon/icon-main-next.png);}

/* 카테고리 */
.main > .module > .cates {padding:16px;}
.main > .module > .cates > h2 + div,
.main > .module > .cates > h3 + div {margin-top:16px;}
.main > .module > .cates > div {padding-bottom:24px;}
.main > .module > .cates > div > ul > li {box-sizing:border-box;}
.main > .module > .cates > div > ul > li > ul {display:flex; flex-wrap:wrap; gap:16px;}
.main > .module > .cates > div > ul > li > ul > li {width:calc((100% - 64px) / 5);}
.main > .module > .cates > div > ul > li > ul > li > a {display:inline-flex; flex-direction:column; width:100%; text-align:center;}
.main > .module > .cates > div > ul > li > ul > li > a > strong {display:block; width:100%; height:calc((100vw - 32px - 64px) / 5); padding:12px; background-color:#f6f8fa; box-sizing:border-box; border-radius:8px; box-shadow:0 6px 12px 0 #f6f8fa;}
.main > .module > .cates > div > ul > li > ul > li > a > strong > img {display:block; width:100%; height:100%;}
.main > .module > .cates > div > ul > li > ul > li > a > span {display:block; margin-top:12px; font-weight:600; font-size:13px; letter-spacing:-1.5px; word-break:keep-all;}
.main > .module > .cates > div > .swiper-pagination {bottom:0;}
.main > .module > .cates > div > .swiper-pagination > a {margin:0; margin-right:4px; font-size:0; line-height:0; background-color:#eee; opacity:unset !important; border-radius:4px !important;}
.main > .module > .cates > div > .swiper-pagination > a:last-child {margin-right:0;}
.main > .module > .cates > div > .swiper-pagination > a.swiper-pagination-bullet-active {background-color:#000;}
.main > .module > .cates.full {margin-top:16px;}
.main > .module > .cates.hide > div {padding-bottom:0;}
.main > .module > .cates.hide > div > .swiper-pagination {display:none;}
.main > .module > hr + .cates.full {margin-top:0;}

/* 아이콘 */
.main > .module > .icons {padding:16px 0;}
.main > .module > .icons > h2,
.main > .module > .icons > h3 {padding-left:16px;}
.main > .module > .icons > h2 + div,
.main > .module > .icons > h3 + div {margin-top:16px;}
.main > .module > .icons > div > ul > li {width:calc((100% - 32px) / 5);}
.main > .module > .icons > div > ul > li > a {display:inline-flex; flex-direction:column; width:100%; text-align:center;}
.main > .module > .icons > div > ul > li > a > strong {display:flex; align-items:center; justify-content:center; width:100%; height:calc((100vw - 32px) / 5); border:1px solid #f1f1f1; background-color:#fff; box-sizing:border-box; border-radius:100%;}
.main > .module > .icons > div > ul > li > a > strong > img {display:block; width:auto; height:60%;}
.main > .module > .icons > div > ul > li > a > strong.none {border-style:none;}
.main > .module > .icons > div > ul > li > a > strong.none > img {width:100%; height:100%;}
.main > .module > .icons > div > ul > li > a > span {display:block; margin-top:12px; font-weight:600; font-size:13px; letter-spacing:-1.5px; word-break:keep-all;}
.main > .module > .icons.full {margin-top:16px;}
.main > .module > hr + .icons.full {margin-top:0;}
.main > .module > .icons + div {margin-top:16px;}

/** PC */
@media all and (min-width:1180px) {
	.main > .search-filter {width:580px; left:calc((100% - 1180px) / 2 + 600px);}
	.main > .search-filter > .screen > .item > ul.brand > li > a > strong {}
	.main > .search-filter > .screen > .item > ul.brand > li {width:calc((100% - 64px) / 5);}
	.main > .search-filter > .screen > .item > ul.brand > li:nth-child(3n) {margin-right:16px;}
	.main > .search-filter > .screen > .item > ul.brand > li:nth-child(5n) {margin-right:0;}
	
	.main > .module > .rvws > div > ul > li {width:calc(580px * 0.5);}
	.main > .module > .rvws > div > ul > li > a > i {height:calc(580px * 0.5 - 32px);}
	.main > .module > .rvws > div > .swiper-button-prev {left:calc((580px * 0.25 - 16px) / 2);}
	.main > .module > .rvws > div > .swiper-button-next {right:calc((580px * 0.25 - 16px) / 2);}
	
	.main > .module > .cates > h2 + div,
	.main > .module > .cates > h3 + div {margin-top:32px;}
	.main > .module > .cates > div > ul > li > ul {gap:24px;}
	.main > .module > .cates > div > ul > li > ul > li {width:calc((100% - 96px) / 5);}
	.main > .module > .cates > div > ul > li > ul > li > a > strong {height:calc((580px - 32px - 96px) / 5); padding:24px;}
	.main > .module > .cates > div > ul > li > ul > li > a > span {margin-top:16px; font-size:14px;}
	.main > .module > .cates > div {padding-bottom:32px;}
	.main > .module > .cates.full {margin-top:32px;}
	
	.main > .module > .icons > div > ul > li > a > strong {height:calc((580px - 32px) / 5);}
	
	.main > .popup {width:580px; left:calc((100% - 1180px) / 2 + 600px);}
}