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

/* 기획전 */
.exhibition {padding-bottom:32px;}
.exhibition > .tab {position:sticky; top:57px; background:#fff; border-bottom:1px solid #eee; z-index:100;}
.exhibition > .tab > ul {display:flex;}
.exhibition > .tab > ul > li {width:25%; text-align:center;}
.exhibition > .tab > ul > li > a {display:block; font-weight:600; line-height:48px; color:#a0a0a0; box-sizing:border-box;}
.exhibition > .tab > ul > li > a.on {color:#333; border-bottom:2px solid #333;}
.exhibition > .list {padding:16px;}
.exhibition > .list > ul > li {margin-top:16px;}
.exhibition > .list > ul > li:first-child {margin-top:0;}
.exhibition > .list > ul > li > a {position:relative; display:block;}
.exhibition > .list > ul > li > a:before {position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.3); content:'';}
.exhibition > .list > ul > li > a > img {display:block; width:100%;}
.exhibition > .list > ul > li > a > strong {position:absolute; left:0; top:0; display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; height:100%; padding:32px; box-sizing:border-box; font-size:16px; color:#fff;}
.exhibition > .list > ul > li > a > strong > em {display:block; margin-top:8px; font-size:13px; font-weight:400; text-align:center; word-break:keep-all;}
.exhibition > .list > ul > li > a > strong > span {display:block; margin-top:8px;}
.exhibition > .list > ul > li > a > strong > span > span {display:inline-block; padding:0 8px; margin-left:6px; font-size:12px; font-weight:400; line-height:20px; border:1px solid #eee; border-radius:3px;}
.exhibition > .list > ul > li > a > strong > span > span:first-child {margin-left:0;}

.exhibition > .list > ul > li > a {position:static;}
.exhibition > .list > ul > li > a:before {display:none;}
.exhibition > .list > ul > li > a > strong {position:static; justify-content:unset; align-items:unset; padding:0; margin-top:10px; word-break:keep-all; color:#333;}
.exhibition > .list > ul > li > a > strong.n {margin-top:0;}
.exhibition > .list > ul > li > a > strong > em {line-height:16px; text-align:left;}

.exhibition > .view > h2 {padding:16px; font-size:20px; font-weight:600; line-height:22px;}
.exhibition > .view > .share {position:relative; padding:0 16px; padding-bottom:16px; margin-top:8px; border-bottom:1px solid #eee;}
.exhibition > .view > .share.f {display:none; margin-top:16px;}
.exhibition > .view > .share > span {display:block; padding:8px 0;}
.exhibition > .view > .share > span > span {display:inline-block; padding:0 8px; margin-left:6px; font-size:12px; font-weight:400; line-height:20px; color:#888; border:1px solid #eee; border-radius:3px;}
.exhibition > .view > .share > span > span:first-child {margin-left:0;}
.exhibition > .view > .share > span > span.none {border-color:#fff;}
.exhibition > .view > .share > a {position:absolute; right:16px; bottom:16px; display:block; width:36px; height:36px; font-size:0; line-height:0; border:1px solid #ebedee; background:#fff url(../images/icon-link.png) no-repeat center center; border-radius:18px;}

.exhibition > .view > .contents > div.full {padding:0;}
.exhibition > .view > .contents > div > h3 {font-size:20px; font-weight:600;}
.exhibition > .view > .contents > div:first-child > h3,
.exhibition > .view > .contents > div:first-child > h4 {margin-top:16px;}
.exhibition > .view > .contents > div > h4 {font-size:13px; font-weight:400; color:#a0a0a0;}
.exhibition > .view > .contents > div > h3 + h4 {margin-top:4px !important;}
.exhibition > .view > .contents > div + div,
.exhibition > .view > .contents > div + * + div {margin-top:32px;}
.exhibition > .view > .contents > .image > * > img {display:block; max-width:100%; margin:0 auto; margin-top:8px;}
.exhibition > .view > .contents > .image.full > * > img {margin-top:0;}
.exhibition > .view > .contents > .image > h3 + div.list,
.exhibition > .view > .contents > .image > h4 + div.list {margin-top:8px;}
.exhibition > .view > .contents > .image > div > ul > li > * > img {display:block; max-width:100%; margin:0 auto;}
.exhibition > .view > .contents > .image > div > .swiper-pagination > a {margin:0; margin-right:4px; font-size:0; line-height:0;}
.exhibition > .view > .contents > .image > div > .swiper-pagination > a:last-child {margin-right:0;}
.exhibition > .view > .contents > .image > div > .swiper-pagination > a.swiper-pagination-bullet-active {background-color:#333;}
.exhibition > .view > .contents > .comment form > fieldset {display:flex; margin-top:8px;}
.exhibition > .view > .contents > .comment form > fieldset > textarea {width:calc(100% - 50px); height:50px; border-right-style:none; border-radius:3px 0 0 3px;}
.exhibition > .view > .contents > .comment form > fieldset > button {width:50px; height:50px; color:#fff; background-color:#333; border-radius:0 3px 3px 0;}
.exhibition > .view > .contents > .comment form > fieldset > button[disabled="disabled"] {background-color:#888;}
.exhibition > .view > .contents > .comment > .list {padding-top:16px; margin-top:16px; border-top:1px solid #eee;}
.exhibition > .view > .contents > .comment > .list > ul > li {padding-top:12px; margin-top:12px; border-top:1px solid #f0f2f4;}
.exhibition > .view > .contents > .comment > .list > ul > li:first-child {padding-top:0; margin-top:0; border-top-style:none;}
.exhibition > .view > .contents > .comment > .list > ul > li > span.user {display:block; line-height:15px; color:#a0a0a0;}
.exhibition > .view > .contents > .comment > .list > ul > li > span.user > strong {display:inline-block; margin-right:3px; font-weight:400;}
.exhibition > .view > .contents > .comment > .list > ul > li > span.body {margin-top:8px; font-weight:400; line-height:22px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-overflow:ellipsis; overflow:hidden; cursor:pointer;}
.exhibition > .view > .contents > .comment > .list > ul > li > span.body.on {display:block; -webkit-line-clamp:unset; -webkit-box-orient:unset; text-overflow:unset; overflow:unset;}
.exhibition > .view > .contents > .comment > .list > ul > li > span.mngr {display:flex; justify-content:flex-end; margin-top:8px;}
.exhibition > .view > .contents > .comment > .list > ul > li > span.mngr > a {display:inline-block; padding:0 14px; margin-left:6px; line-height:26px; color:#a0a0a0; border:1px solid #dcdee0; background-color:#fff; border-radius:3px;}
.exhibition > .view > .contents > .comment > .list > ul > li > span.mngr > a:first-child {margin-left:0;}
.exhibition > .view > .contents > .comment > .list > ul > li > form {display:none;}
.exhibition > .view > .contents > .comment > .list > ul > li > form.on {display:flex;}
.exhibition > .view > .contents > .comment > .list > .more {padding:16px;}
.exhibition > .view > .contents > .comment > .list > .more > a {display:block; width:100%; font-weight:600; line-height:48px; letter-spacing:-0.4px; text-align:center; border:1px solid #dcdee0; background-color:#fff; border-radius:3px;}
.exhibition > .view > .contents > .comment > .list > .more > a > em {display:inline-block; width:11px; height:7px; margin-left:6px; background:url(../images/icon-down.png) no-repeat center center; vertical-align:middle;}
.exhibition > .view > .contents > .goods.full h3,
.exhibition > .view > .contents > .goods.full h4 {padding:0 16px;}
.exhibition > .view > .contents > .goods > .list.swiper-container {margin-top:8px !important;}
.exhibition > .view > .contents > .goods > .list.swiper-container > ul {height:auto !important; flex-wrap:unset !important;}
.exhibition > .view > .contents > .goods > .list.swiper-container > ul > li {width:200px !important; margin-top:0 !important; margin-left:0 !important; margin-right:16px !important;}
.exhibition > .view > .contents > .goods > .list.swiper-container > ul > li:last-child {margin-right:0 !important;}
.exhibition > .view > .contents > .goods > .list.swiper-container > ul > li > a > .img {height:calc(200px * var(--prdt_img_rate)) !important;}
.exhibition > .view > .contents > .video > video {display:block; max-width:100%; margin:0 auto; margin-top:8px;}
.exhibition > .view > .contents > .video.full > video {margin-top:0;}

/* 미리보기 */
.preview .exhibition {margin-top:16px !impportant;}

/** PC */
@media all and (min-width:760px) {
	.exhibition > .tab {top:61px;}
	.exhibition > .tab > ul {width:1180px; margin:0 auto;}
	.exhibition > .list {width:1180px; margin:0 auto; margin-top:32px;}
	.exhibition > .list > ul:after {clear:both; display:block; content:'';}
	.exhibition > .list > ul > li {float:left; width:calc((1180px - 32px) / 2); margin-top:0; margin-right:32px; margin-bottom:32px;}
	.exhibition > .list > ul > li:nth-child(2n) {margin-right:0;}
	
	.exhibition > .view {width:1180px; margin:0 auto;}
	.exhibition > .view > h2 {padding:32px 0 16px 0;}
	.exhibition > .view > .share {padding:0; padding-bottom:16px;}
	.exhibition > .view > .share > a {right:0;}
	.exhibition > .view > .contents > div {padding:0;}
	.exhibition > .view > .contents > div + div,
	.exhibition > .view > .contents > div + * + div {margin-top:56px;}
	.exhibition > .view > .contents > .goods.full h3,
	.exhibition > .view > .contents > .goods.full h4 {padding:0;}
	.exhibition > .view > .contents > .goods > .list.swiper-container > ul > li {width:300px !important;}
	.exhibition > .view > .contents > .goods > .list.swiper-container > ul > li > a > .img {height:calc(300px * var(--prdt_img_rate)) !important;}
	.exhibition > .view > .contents > .goods > .list.swiper-container > ul > li > a.adult > .img:after {background-size:50px;}
}

/* 제휴배너 */
.exhibition > .view > .contents > .partner {padding:16px 0;}
.exhibition > .view > .contents > .partner > h3,
.exhibition > .view > .contents > .partner > h4 {padding-left:16px;}
.exhibition > .view > .contents > .partner > h3 + div,
.exhibition > .view > .contents > .partner > h4 + div {margin-top:16px;}
.exhibition > .view > .contents > .partner > div > div > ul > li {width:calc((100% - 32px) / 1.5);}
.exhibition > .view > .contents > .partner > div > div > ul > li > a {display:block; width:100%; text-align:center;}
.exhibition > .view > .contents > .partner > div > div > ul > li > a > img {display:block; width:100%; border-radius:12px;}
.exhibition > .view > .contents > .partner > div > .swiper-button {display:none;}
.exhibition > .view > .contents > .partner.full {margin-top:16px;}
.exhibition > .view > .contents > hr + .partner.full {margin-top:0;}

@media all and (min-width:760px) {
	.exhibition > .view > .contents > .partner {margin-left:auto; margin-right:auto;}
	.exhibition > .view > .contents > .partner > h3,
	.exhibition > .view > .contents > .partner > h4 {padding-left:0;}
	.exhibition > .view > .contents > .partner > div {position:relative;}
	.exhibition > .view > .contents > .partner > div > div > ul > li {width:calc((100% - 96px) / 4);}
	.exhibition > .view > .contents > .partner > div > .swiper-button {position:absolute; left:0; top:0; display:block; width:100%; z-index:10;}
	.exhibition > .view > .contents > .partner > div > .swiper-button > .swiper-button-prev,
	.exhibition > .view > .contents > .partner > div > .swiper-button > .swiper-button-next {top:168px; width:46px; height:46px; margin-top:0; background-color:#ecf1f5; background-size:12px auto; transform:translateY(-50%)/*; filter:brightness(0) invert(1)*/; border-radius:35px;}
	.exhibition > .view > .contents > .partner > div > .swiper-button > .swiper-button-prev {left:-23px; background-image:url(../images/addon/icon-main-prev.png);}
	.exhibition > .view > .contents > .partner > div > .swiper-button > .swiper-button-next {right:-23px; background-image:url(../images/addon/icon-main-next.png);}
	.exhibition > .view > .contents > .partner > div > .swiper-button > .swiper-button-next.swiper-button-disabled,
	.exhibition > .view > .contents > .partner > div > .swiper-button > .swiper-button-prev.swiper-button-disabled {display:none;}
}

/* 아이콘 */
.exhibition > .view > .contents > .icons {padding:16px;}
.exhibition > .view > .contents > .icons > h3 + div,
.exhibition > .view > .contents > .icons > h4 + div {margin-top:16px;}
.exhibition > .view > .contents > .icons > div > div > ul {margin-bottom:24px;}
.exhibition > .view > .contents > .icons > div > div > ul > li {box-sizing:border-box;}
.exhibition > .view > .contents > .icons > div > div > ul > li > ul {display:flex; flex-wrap:wrap; gap:16px;}
.exhibition > .view > .contents > .icons > div > div > ul > li > ul > li {width:calc((100% - 64px) / 5);}
.exhibition > .view > .contents > .icons > div > div > ul > li > ul > li > a {display:inline-flex; flex-direction:column; width:100%; text-align:center;}
.exhibition > .view > .contents > .icons > div > div > ul > li > ul > li > a {display:inline-flex; flex-direction:column; width:100%; text-align:center;}
.exhibition > .view > .contents > .icons > div > div > ul > li > ul > li > a > strong {display:flex; align-items:center; justify-content:center; width:100%; height:calc((100vw - 32px - 64px) / 5); background-color:#fff; box-sizing:border-box;}
.exhibition > .view > .contents > .icons > div > div > ul > li > ul > li > a > strong > img {display:block; width:100%; height:100%;}
.exhibition > .view > .contents > .icons > div > 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;}
.exhibition > .view > .contents > .icons > div > div > .swiper-pagination {bottom:0;}
.exhibition > .view > .contents > .icons > div > 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;}
.exhibition > .view > .contents > .icons > div > div > .swiper-pagination > a:last-child {margin-right:0;}
.exhibition > .view > .contents > .icons > div > div > .swiper-pagination > a.swiper-pagination-bullet-active {background-color:#000;}
.exhibition > .view > .contents > .icons.hide > div > div {padding-bottom:0;}
.exhibition > .view > .contents > .icons.hide > div > div > .swiper-pagination {display:none;}
.exhibition > .view > .contents > .icons.full {margin-top:16px;}
.exhibition > .view > .contents > hr + .icons.full {margin-top:0;}
.exhibition > .view > .contents > .icons + div {margin-top:16px;}
.exhibition > .view > .contents > .icons > div > .swiper-button {display:none;}

@media all and (min-width:760px) {
	.exhibition > .view > .contents > .icons {padding:0;}
	.exhibition > .view > .contents > .icons > h2,
	.exhibition > .view > .contents > .icons > h3 {padding-left:0;}
	.exhibition > .view > .contents > .icons > div {position:relative;}
	.exhibition > .view > .contents > .icons > div > div > ul {padding-bottom:0;}
	.exhibition > .view > .contents > .icons > div > div > ul > li {padding:0;}
	.exhibition > .view > .contents > .icons > div > div > ul > li > ul {gap:16px 32px;}
	.exhibition > .view > .contents > .icons > div > div > ul > li > ul > li {width:calc((1180px - 288px) / 10);}
	.exhibition > .view > .contents > .icons > div > div > ul > li > ul > li > a > strong {height:calc((1180px - 288px) / 10);}
	.exhibition > .view > .contents > .icons > div > div > ul > li > ul > li > a > span {margin-top:16px; font-size:14px;}
	.exhibition > .view > .contents > .image.full + div.icons {margin-top:32px;}
	.exhibition > .view > .contents > .icons > div > div > .swiper-pagination {display:none;}
	.exhibition > .view > .contents > .icons > div > .swiper-button {position:absolute; left:0; top:0; display:block; width:100%; z-index:10;}
	.exhibition > .view > .contents > .icons > div > .swiper-button > .swiper-button-prev,
	.exhibition > .view > .contents > .icons > div > .swiper-button > .swiper-button-next {top:168px; width:46px; height:46px; margin-top:0; background-color:#ecf1f5; background-size:12px auto; transform:translateY(-50%)/*; filter:brightness(0) invert(1)*/; border-radius:35px;}
	.exhibition > .view > .contents > .icons > div > .swiper-button > .swiper-button-prev {left:-23px; background-image:url(../images/addon/icon-main-prev.png);}
	.exhibition > .view > .contents > .icons > div > .swiper-button > .swiper-button-next {right:-23px; background-image:url(../images/addon/icon-main-next.png);}
	.exhibition > .view > .contents > .icons > div > .swiper-button > .swiper-button-next.swiper-button-disabled,
	.exhibition > .view > .contents > .icons > div > .swiper-button > .swiper-button-prev.swiper-button-disabled {display:none;}
}

/* 상품 :: 이미지 */
.exhibition > .view > .contents > .goods > .image > .box {padding:0 16px; margin-top:12px;}
.exhibition > .view > .contents > .goods > .image > .box > img,
.exhibition > .view > .contents > .goods > .image > .box > a > img {display:block; width:100%; border-radius:12px;}
.exhibition > .view > .contents > .goods > .image > .list {margin-top:4px;}
.exhibition > .view > .contents > .goods > .image > .list.swiper-container {margin-top:12px !important;}
.exhibition > .view > .contents > .goods > .image > .list.swiper-container > ul {height:auto !important; flex-wrap:unset !important;}
.exhibition > .view > .contents > .goods > .image > .list.swiper-container > ul > li {width:200px !important; margin-top:0 !important; margin-left:0 !important; margin-right:16px !important;}
.exhibition > .view > .contents > .goods > .image > .list.swiper-container > ul > li:last-child {margin-right:0 !important;}
.exhibition > .view > .contents > .goods > .image > .list.swiper-container > ul > li > a > .img {height:calc(200px * var(--prdt_img_rate)) !important;}
.exhibition > .view > .contents > .goods > .image > .swiper-button {display:none;}

@media all and (min-width:760px) {
	.exhibition > .view > .contents > .goods > .image {position:relative; display:flex; align-items:flex-start; justify-content:space-between;}
	.exhibition > .view > .contents > .goods > .image > .box {width:300px; padding:0; margin-right:39px;}
	.exhibition > .view > .contents > .goods > .image > .list.swiper-container {width:calc(100% - 300px - 39px);}
	.exhibition > .view > .contents > .goods > .image > .list.swiper-container > ul > li {width:230px !important;}
	.exhibition > .view > .contents > .goods > .image > .list.swiper-container > ul > li > a > .img {height:calc(230px * var(--prdt_img_rate)) !important;}
	.exhibition > .view > .contents > .goods > .image > .list.swiper-container > ul > li > a.adult > .img:after {background-size:50px;}
	.exhibition > .view > .contents > .goods > .image > .swiper-button {position:absolute; left:calc(300px + 39px); top:0; display:block; width:calc(100% - 300px - 39px); z-index:10;}
	.exhibition > .view > .contents > .goods > .image > .swiper-button > .swiper-button-prev,
	.exhibition > .view > .contents > .goods > .image > .swiper-button > .swiper-button-next {top:150px; width:46px; height:46px; margin-top:0; background-color:#ecf1f5; background-size:12px auto; transform:translateY(-50%)/*; filter:brightness(0) invert(1)*/; border-radius:35px;}
	.exhibition > .view > .contents > .goods > .image > .swiper-button > .swiper-button-prev {left:-23px; background-image:url(../images/addon/icon-main-prev.png);}
	.exhibition > .view > .contents > .goods > .image > .swiper-button > .swiper-button-next {right:-23px; background-image:url(../images/addon/icon-main-next.png);}
	.exhibition > .view > .contents > .goods > .image > .swiper-button > .swiper-button-next.swiper-button-disabled,
	.exhibition > .view > .contents > .goods > .image > .swiper-button > .swiper-button-prev.swiper-button-disabled {display:none;}
}

/* 기아 */
.exhibition > .view > .contents > .image > * > img {border-radius:12px;}
.exhibition > .view > .contents > .image.full > * > img {border-radius:0;}
.exhibition > .view > .contents > .goods {padding:0 16px;}
.exhibition > .view > .contents > .goods.full {padding:0;}

@media all and (min-width:760px) {
	.exhibition > .view > .contents > div {padding:0 16px; margin-top:32px;}
	.exhibition > .view > .contents > div {margin-top:32px;}
	.exhibition > .view > .contents > .image > div {border-radius:12px;}
	.exhibition > .view > .contents > .goods {padding:0;}
}