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

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

.transparency .header > .navigation {position:fixed; left:0; top:0; min-width:320px; border-bottom-style:none; background-color:transparent;}
.transparency .header.banner > .navigation {top:43px;}
.transparency .header > .navigation > h1,
.transparency .header > .navigation > a {filter:brightness(0) invert(1);}
.transparency .header > .navigation > h1 {text-align:left;}
.transparency .header > .navigation > a.icon.icon-cart > em {display:none;}
.transparency .header > .navigation > em {position:absolute; right:7px; top:25px; display:inline-block; min-width:18px; height:18px; padding:0 4px; font-size:10px; font-weight:600; line-height:18px; text-align:center; color:#fff; background-color:#fa6c6c; border-radius:9px; box-sizing:border-box;}
.transparency .fixed .header > .navigation {top:0; border-bottom-style:solid;}
.transparency .fixed .header > .navigation > h1,
.transparency .fixed .header > .navigation > a {filter:unset;}
.transparency .fixed .header > .navigation > a.icon.icon-cart > em {display:inline-block;}
.transparency .fixed .header > .navigation > em {display:none;}

.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 {padding:0 16px;}
.main > .module > .goods.full,
.main > .module > .image.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 > .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;}
.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;}
.main > .module > .image > div > .swiper-pagination > a:last-child {margin-right:0;}
.main > .module > .image > div > .swiper-pagination > a.swiper-pagination-bullet-active {background-color:#333;}
.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 > div > .swiper-pagination {display:none;}
.main > .module > .image.full > div > .swiper-notification {display:inline-block;}
.main > .module > .image.full + .image.full {margin-top:0;}

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

/** PC */
@media all and (min-width:760px) {
	.transparency .header > .navigation {position:static !important;}
	.transparency .header > .navigation > em {display:none;}
	.transparency .fixed .header > .navigation {position:fixed !important;}
	
	.main > .module > div + div,
	.main > .module > div + * + div {margin-top:56px;}
	.main > .module > div > h2 {font-size:26px; line-height:38px;}
	.main > .module > div > h3 {font-size:16px; line-height:28px;}
	.main > .module > div > a.more {position:absolute; right:0; top:0; padding-right:12px; margin-top:0; font-size:13px; line-height:17px; border-style:none; background:url(../images/icon-go-2.png) no-repeat right center; background-size:auto 13px;}
	.main > .module > div > a.more.full {position:static; width:250px; margin:32px auto 0 auto !important; line-height:32px; border:1px solid #ddd; background-image:none; border-radius:16px;}
	.main > .module > .goods,
	.main > .module > .image,
	.main > .module > .html {width:1180px; padding:0; margin-left:auto; margin-right:auto;}
	.main > .module > .image.full {width:100%;}
	.main > .module > .goods.full > a.more,
	.main > .module > .image.full > a.more {margin-left:0; margin-right:0;}
	
	.main > .module > .goods.full h2,
	.main > .module > .goods.full h3 {padding:0;}
	.main > .module > .goods > .list.swiper-container > ul > li {width:300px !important;}
	.main > .module > .goods > .list.swiper-container > ul > li > a > .img {height:calc(300px * var(--prdt_img_rate)) !important;}
	.main > .module > .goods > .list.swiper-container > ul > li > a.adult > .img:after {background-size:50px;}
	
	.main > .module > .image.full > div > ul > li > div {left:32px;}
	.main > .module > .image.full > div > ul > li > div {left:calc((100% - 1180px) / 2);}
	
	.main > .module > .image > div > ul > li > div > strong {font-size:34px; line-height:46px;}
	.main > .module > .image > div > ul > li > div > span {margin-top:12px; font-size:18px; line-height:20px;}
	.main > .module > .image > div > .swiper-notification {right:calc((100% - 1180px) / 2); bottom:32px; border-radius:12.5px;}
	.main > .module > .image + .goods.item {margin-top:32px;}
	
	.main > .popup > .swiper-container {left:calc((100% - 500px) / 2); top:50%; bottom:auto; transform:translateY(-50%); width:500px; border-radius:5px;}
}