@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 {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 {padding:0 16px;}
.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:#fa3246; 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 > div > a.more {display:block; margin-top:16px; font-size:12px; line-height:32px; text-align:center; border:1px solid #ddd; border-radius:16px;}
.exhibition > .view > .contents > div.full > a.more {margin-left:16px; margin-right:16px;}

@media all and (min-width:760px) {
	.exhibition > .view > .contents > div > a.more {width:250px; margin:32px auto 0 auto !important; font-size:13px; line-height:32px; border:1px solid #ddd; border-radius:16px;}
}