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

.header > .navigation > a.icon.icon-back {display:block;}
.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 > .banner > ul > li {display:flex; align-items:flex-end; height:390px; background-color:#333; background-position:center center; background-repeat:no-repeat; background-size:cover;}
.main > .banner > ul > li > a {display:flex; margin:32px 16px; flex-direction:column; color: #fff; font-size:15px; line-height:22px;}
.main > .banner > ul > li > a > strong {font-size:22px; font-weight:600; line-height:24px; margin-bottom:6px;}
.main > .banner > ul > li > a > br {display:none;}
.main > .banner > .swiper-notification {display:inline-block; 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 > .category {display:flex; align-items:center; padding:0; border-bottom:1px solid #eee;}
.main > .category > strong {display:block; width:80px; margin-left:16px;}
.main > .category > .category-list {display:block; width:calc(100% - 80px - 16px);}
.main > .category > .category-list > ul {display:flex; width:100%;}
.main > .category > .category-list > ul > li {display:inline-flex; justify-content:center; align-items:center; width:auto;}
.main > .category > .category-list > ul > li:after {display:inline-flex; justify-content:center; align-items:center; content:'|'; color:#eee;}
.main > .category > .category-list > ul > li:last-child:after {display:none;}
.main > .category > .category-list > ul > li > a {display:block; padding:16px 8px; line-height:16px; box-sizing:border-box;}

.main > .brand {padding:16px 0; border-bottom:1px #e4e2e0 solid;}
.main > .brand > ul > li {width:66px; margin-right:16px;}
.main > .brand > ul > li:last-child {margin-right:0;}
.main > .brand > ul > li > a {display:inline-flex; flex-direction:column; width:100%; text-align:center;}
.main > .brand > ul > li > a > strong {position:relative; display:block; width:64px; height:64px; margin-bottom:6px; border:1px #ebedee solid; border-radius:100%; overflow:hidden;}
.main > .brand > ul > li > a > strong > img {position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%;}
.main > .brand > ul > li > a > span {font-size:12px; line-height:1.33; letter-spacing:-1px; word-break:keep-all;}

/* 카테고리 */
.category {padding-bottom:32px;}
.category > .recommend {position:relative; height:273px; background-repeat:no-repeat; background-position:center center; background-size:cover;}
.category > .recommend > dl {display:flex; flex-direction:column; justify-content:flex-end; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.3);}
.category > .recommend > dl > dt {padding:0 16px; font-size:22px; font-weight:600; line-height:24px; color:#fff;}
.category > .recommend > dl > dd {padding:0 16px; margin-top:6px; line-height:22px; color:#fff;}
.category > .recommend > dl > dd.list {padding:0; margin-bottom:16px;}
.category > .recommend > dl > dd.list {width:calc(100% - 16px); height:82px; padding:0; margin-left:16px; margin-top:16px; overflow:hidden;}
.category > .recommend > dl > dd.list > ul > li {display:inline-block; width:242px; height:82px; padding:10px; margin-left:6px; background-color:#fff; background-color:rgba(255, 255, 255, 0.9); border-radius:3px; box-sizing:border-box; vertical-align:middle;}
.category > .recommend > dl > dd.list > ul > li:first-child {margin-left:0;}
.category > .recommend > dl > dd.list > ul > li:last-child {margin-right:16px;}
.category > .recommend > dl > dd.list > ul > li > a {display:block;}
.category > .recommend > dl > dd.list > ul > li > a:after {display:block; content:''; clear:both;}
.category > .recommend > dl > dd.list > ul > li > a > .img {float:left; position:relative; width:62px; height:62px; overflow:hidden;}
.category > .recommend > dl > dd.list > ul > li > a > .img > img {position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%;}
.category > .recommend > dl > dd.list > ul > li > a > .txt {float:right; width:150px; font-size:12px; line-height:14px;}
.category > .recommend > dl > dd.list > ul > li > a > .txt > strong {display:block; margin-bottom:6px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.category > .recommend > dl > dd.list > ul > li > a > .txt > .name {overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.category > .recommend > dl > dd.list > ul > li > a > .txt > .price {position:relative; margin-top:6px; font-size:13px; font-weight:600; line-height:15px;}
.category > .recommend > dl > dd.list > ul > li > a > .txt > .price > s {font-size:12px; font-weight:400; color:#bbb;}
.category > .recommend > dl > dd.list > ul > li > a > .txt > .price > em {position:absolute; right:0; top:0; font-weight:600; color:#fa6c6c;}
.category > .recommend > dl > dd.list > ul > li > a small {position:absolute; left:10px; top:10px; display:block; width:62px; height:62px; font-size:0; line-height:0; background-repeat:no-repeat; background-position:center center; background-size:contain;}
.category > .recommend > dl > dd.list > ul > li > a small i {display:block; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.02);}
.category > .recommend > dl > dd.list > ul > li > a strong {display:block; margin-top:4px; font-size:11px; line-height:13px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.category > .recommend > dl > dd.list > ul > li > a span {display:block; margin-top:4px; font-size:12px; line-height:14px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.category > .recommend > dl > dd.list > ul > li > a span.price {display:block; position:absolute; left:84px; bottom:14px; font-size:13px; font-weight:600; line-height:15px; color:#222;}
.category > .recommend > dl > dd.list > ul > li > a span.price em {font-style:normal; color:#ff5656;}
.category > .recommend > dl > dd > br {display:none;}

.category > .goods > .category-area {display:flex; align-items:center; margin-bottom:16px; border-bottom:1px solid #eee;}
.category > .goods > .category-area > strong {display:block; width:80px; margin-left:16px;}
.category > .goods > .category-area > .category-list {width:calc(100% - 80px - 16px);}
.category > .goods > .category-area > .category-list > ul {display:flex;}
.category > .goods > .category-area > .category-list > ul > li {display:inline-flex; justify-content:center; align-items:center; width:auto;}
.category > .goods > .category-area > .category-list > ul > li:after {display:inline-flex; justify-content:center; align-items:center; content:'|'; color:#eee;}
.category > .goods > .category-area > .category-list > ul > li:last-child:after {display:none;}
.category > .goods > .category-area > .category-list > ul > li > a {display:block; padding:16px 8px; line-height:16px; box-sizing:border-box;}
.category > .goods > .category-area > .category-list > ul > li > a.on {font-weight:600; text-decoration:underline;}

/* 브랜드 */
.brand-form {padding:0 16px; margin-top:16px;}
.brand-form > strong {display:none; font-size:20px; line-height:22px;}
.brand-form > div {position:relative;}
.brand-form > div > input {height:46px; border-radius:23px;}
.brand-form > div > button {position:absolute; top:0; right:0; height:100%; width:54px; background:url(../images/icon-search-form.png) no-repeat; background-size:22px auto; background-position:center center;}

.brand-list {margin-top:16px; border-top:1px solid #eee;}
.brand-list > ul {display:flex; flex-flow:wrap; padding-top:16px;}
.brand-list > ul > li {width:calc((100% - 32px) / 3); margin-right:16px; margin-bottom:16px; text-align:center;}
.brand-list > ul > li:nth-child(3n) {margin-right:0;}
.brand-list > ul > li > a {display:block;}
.brand-list > ul > 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;}
.brand-list > ul > li > a > strong > img {position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%;}
.brand-list > ul > li > a > span {display:block; margin-top:4px;}
.brand-list > ul > li > a > span > span {font-size:12px; color:#999;}
.brand-list > ul > li > a > span > span:before {content:', ';}
.brand-list > ul > li > a > span > span:first-child:before {content:'';}

.brand-view .screen {position:relative; display:flex; align-items:center; flex-direction:column; height:273px; padding-bottom:48px; color:#fff; background-color:#333; background-repeat:no-repeat; background-size:cover;}
.brand-view .screen:before {position:absolute; left:0; top:0; display:block; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.1); content:'';}
.brand-view .screen > strong {position:relative; margin-top:32px; margin-bottom:4px; font-size:28px; font-weight:600; text-align:center; line-height:32px;}
.brand-view .screen > span {position:relative; margin-bottom:8px; text-align:center;}
.brand-view .screen > a {position:relative; display:block; width:40px; padding-top:44px; margin:0 auto; font-size:12px; line-height:14px; letter-spacing:-0.5px; color:#fff; text-align:center; background:url(../images/icon-wish.png) no-repeat center top; background-size:40px 40px;}
.brand-view .screen > a.on {background-image:url(../images/icon-wish-on.png);}
.brand-view .screen > p {max-height:63px; padding:0 16px; font-size:15px; line-height:21px; letter-spacing:-0.4px; text-align:center; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; word-break:keep-all;}
.brand-view .screen > p > br {display:none;}
.brand-view .screen > em {position:relative; margin-top:8px; margin-bottom:32px; text-align:center;}
.brand-view > .tags {padding:16px; display:flex; flex-wrap:wrap; border-bottom:1px solid #eee;}
.brand-view > .tags > span {display:inline-flex; align-items:center; height:26px; padding:0 10px; margin-right:6px; font-size:13px; line-height:14px; letter-spacing:-0.5px; border:1px solid #dcdee0; border-radius:2px;}
.brand-view > .career {padding:16px; border-bottom:1px solid #eee;}
.brand-view > .career > dl {padding-top:16px; margin-top:16px; border-top:1px solid #f0f2f4;}
.brand-view > .career > dl:first-child {padding-top:0; margin-top:0; border-top-style:none;}
.brand-view > .career > dl > dt {margin-bottom:4px; font-weight:500;}
.brand-view > .career > dl > dd {position:relative; padding-left:88px; font-size:13px; word-break:keep-all;}
.brand-view > .career > dl > dd > strong {position:absolute; left:0; top:0; display:inline-block; width:88px; font-weight:400; font-family:'Tahoma'; line-height:18px;}
.brand-view > .relation {display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid #eee;}
.brand-view > .relation > a {width:100%; margin-left:16px; font-weight:500; font-size:16px; line-height:50px; text-align:center; color:#fff; background:#6b60eb; border-radius:4px;}
.brand-view > .relation > a:first-child {margin-left:0;}
.brand-view > .relation > a[href="#review"] {background-color:#333;}
/* [S] 2024.01.31 */
.brand-view .screen > a,
.brand-view .screen > em {display:none;}
.brand-view .screen > p {position:absolute; left:0; bottom:48px;}
.brand-view > .career > dl > dd {padding-left:0;}
.brand-view > .career > dl > dd > strong {display:none;}
/* [E] 2024.01.31 */

/* 검색 필터 */
.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;}
.search-filter > .closed {position:absolute; left:0; top:0; width:100%; height:30vh;}
.search-filter > .screen {position:absolute; left:0; bottom:-70vh; width:100%; height:70vh; padding:16px 16px 0 16px; background-color:#fff; border-radius:10px 10px 0 0; box-sizing:border-box;}
.search-filter > .screen > .head {position:relative;}
.search-filter > .screen > .head ul:after {clear:both; display:block; content:'';}
.search-filter > .screen > .head ul li {float:left; margin-left:18px;}
.search-filter > .screen > .head ul li:first-child {margin-left:0;}
.search-filter > .screen > .head ul li a {font-size:16px; font-weight:600; color:#c8cacc; line-height:22px;}
.search-filter > .screen > .head ul li a.on {color:#333}
.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;}
.search-filter > .screen > * > .foot {display:flex; align-items:center; justify-content:space-between; padding:14px 0; text-align:right; border-top:1px solid #f0f2f4;}
.search-filter > .screen > * > .foot > button {min-width:150px; height:50px; color:#fff; font-size:16px; font-weight:600; background-color:#111; border-radius:4px;}
.search-filter > .screen > * > .foot > a {display:block; padding-left:22px; font-size:16px; font-weight:600; line-height:50px; color:#111; background:url(../images/icon-clear.png) no-repeat left center;}
.search-filter > .screen > .tab-list {display:none;}
.search-filter > .screen > .tab-list.on {display:block;}
.search-filter > .screen > .brand > div:not(.foot) {height:calc(70vh - 16px - 22px - 16px - 79px); margin-top:16px; overflow-x:hidden; overflow-y:auto;}
.search-filter > .screen > .brand > div:not(.foot) > ul > li > a {display:block; font-size:15px; line-height:50px; border-bottom:1px solid #f0f2f4;}
.search-filter > .screen > .brand > div:not(.foot) > ul > li:last-child > a {border-bottom-style:none;}
.search-filter > .screen > .brand > div:not(.foot) > ul > li > a.on {font-weight:600; background:url(../images/icon-check.png) no-repeat right center;}
.search-filter > .screen > .price {margin-top:32px;}
.search-filter > .screen > .price > .scope {display:flex; align-items:center; justify-content:center; font-size:19px; font-weight:600; line-height:54px; border:1px solid #ebedee; background-color:#f6f8fa; border-radius:4px;}
.search-filter > .screen > .price > .scroll {height:calc(70vh - 16px - 22px - 32px - 56px - 32px - 79px); margin:0 10px; margin-top:32px;}
.search-filter > .screen > .type {margin-top:32px;}
.search-filter > .screen > .type > ul {height:calc(70vh - 16px - 22px - 32px - 79px); margin-top:32px;}
.search-filter > .screen > .type > ul > li {margin-right:6px; margin-bottom:12px; display:inline-flex;}
.search-filter > .screen > .type > ul > li > a {display:inline-block; min-width:60px; height:34px; padding:0 12px; font-size:14px; line-height:34px; color:#bbb; border:1px #dcdee0 solid; border-radius:19px; text-align:center;}
.search-filter > .screen > .type > ul > li > a.on {background-color:#333; border-color:#333; color:#fff; font-weight:600;}
.search-filter .ui-widget-content.ui-widget {
	height:6px !important;
	border-style:none !important;
	background:#ebedee !important;
	border-radius:3px !important;
}
.search-filter .ui-widget-header {
	background-color:#333 !important;
}
.search-filter .ui-slider-handle {
	width:24px !important;
	height:24px !important;
	border-radius:12px !important;
	box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.1) !important;
	border:solid 1px rgba(0, 0, 0, 0.1) !important;
	background:#fff !important;
	top:-10px !important;
	box-sizing:border-box;
}
.search-filter .ui-slider-horizontal .ui-slider-handle {
	margin-left:-0.8em;
}

/* 검색 결과 */
.goods > .where {display:none; padding:0 16px; margin-top:16px;}
.goods > .where.on {display:block;}
.goods > .where > a {display:inline-block; padding:0 34px 0 14px; margin-left:2px; font-weight:600; line-height:32px; color:#616161; border:1px solid #dcdee0; background:url(../images/icon-dropdown-filter.png) no-repeat right center; background-position:calc(100% - 14px) center; box-sizing:border-box; border-radius:16px;}
.goods > .where > a:first-child {margin-left:0;}

.goods > .filter {display:none; background-color:#fff;}
.goods > .filter.on {display:block;}
.goods > .filter > div {height:34px; padding-left:16px; margin-top:16px; white-space:nowrap; overflow-x:auto; overflow-y:hidden;}
.goods > .filter > div::-webkit-scrollbar {display:none;}
.goods > .filter > div > a {display:inline-block; padding:7px 29px 9px 14px; margin-right:2px; line-height:16px; color:#fff; background:#333 url(../images/icon-filter-x.png) no-repeat right center; background-position:calc(100% - 14px) center; border-radius:16px; box-sizing:border-box;}
.goods > .filter > div > a.clear {font-weight:600; color:#616161; border:1px solid #dcdee0; background-color:#fff; background-image:url(../images/icon-filter-clear.png);}
.goods > .filter > div > a:last-child {margin-right:16px;}

.goods > .screen > .count {display:flex; position:relative; padding:0 16px; margin-top:16px; line-height:20px;}
.goods > .screen > .count > strong {margin-left:4px;}
.goods > .screen > .count > .sort {display:flex; align-items:center; position:absolute; right:0; top:0;}
.goods > .screen > .count > .sort > a.sortOrdr {display:inline-flex; align-items:center; padding-right:16px; font-size:14px; line-height:20px;}
.goods > .screen > .count > .sort > a.sortOrdr > s {width:10px; height:20px; margin-left:4px; background:url(../images/icon-dropdown-sort.png) no-repeat center center;}
.goods > .screen > .count > .sort.on > a.sortOrdr > s {background-image:url(../images/icon-dropdown-sort-on.png);}
.goods > .screen > .count > .sort > div {padding: 8px 16px; display:none; position:absolute; width:111px; top:26px; right:0; border:1px #dcdee0 solid; border-right-style:none; background-color: #fff; z-index:200;}
.goods > .screen > .count > .sort.on > div {display:block;}
.goods > .screen > .count > .sort > div > ul > li {margin-top:6px;}
.goods > .screen > .count > .sort > div > ul > li:first-child {margin-top:0;}
.goods > .screen > .count > .sort > div > ul > li > a {display:block; padding:5px; font-size:13px; line-height:15px;}
.goods > .screen > .list {padding:0 16px;}

.fixed .goods > .filter {position:fixed; left:0; top:57px; width:100%; min-width:320px; padding-bottom:16px; border-bottom:1px solid #f0f2f4; z-index:900;}

/** PC */
@media all and (min-width:760px) {
	.main > .banner > ul > li {height:405px;}
	.main > .banner > ul > li > a {width:1320px; margin:0 auto; margin-bottom:32px; font-size:20px; line-height:32px;}
	.main > .banner > ul > li > a > strong {margin-bottom:12px; font-size:34px; line-height:46px;}
	.main > .banner > ul > li > a > br {display:block;}
	.main > .banner > .swiper-notification {right:calc((100% - 1320px) / 2);; bottom:32px; border-radius:12.5px;}
	
	.main > .category {display:flex; width:1320px; margin:0 auto;}
	.main > .category > strong {margin-left:0;}
	.main > .category > .category-list {width:calc(1320px - 80px);}
	
	.main > .brand {width:1320px; margin:0 auto;}
	.main > .brand > ul > li {width:80px; margin-right:24px;}
	.main > .brand > ul > li > a > strong {width:80px; height:80px; margin-bottom:8px;}
	.main > .brand > ul > li > a > span {font-size:13px;}
	
	.category > .recommend {height:405px;}
	.category > .recommend > dl {width:1320px; margin:0 auto; background-color:transparent;}
	.category > .recommend > dl > dt {padding-left:0; padding-right:0; font-size:28px; line-height:30px;}
	.category > .recommend > dl > dd {margin-top:12px; padding-left:0; padding-right:0; font-size:18px; line-height:20px;}
	.category > .recommend > dl > dd > br {display:block;}
	.category > .recommend > dl > dd.list {margin-left:0;}
	.category > .recommend > dl > dd > br {display:block;}
	
	.category > .goods > .category-area > strong {margin-left:0;}
	.category > .goods > .category-area > .category-list {width:calc(100% - 80px);}
	
	.brand-form {display:flex; align-items:center; justify-content:space-between; width:1320px; padding:0; margin:0 auto; margin-top:16px;}
	.brand-form > strong {display:block;}
	.brand-form > div {width:350px; margin-left:auto;}
	
	.brand-list {width:1320px; margin:0 auto; margin-top:16px;}
	.brand-list > ul {padding-top:36px;}
	.brand-list > ul > li {width:calc((100% - (5 * 36px)) / 6); margin-right:36px; margin-bottom:36px;}
	.brand-list > ul > li:nth-child(3n) {margin-right:36px;}
	.brand-list > ul > li:nth-child(6n) {margin-right:0;}
	.brand-list > ul > li > a > strong {width:165px; height:165px; margin-bottom:8px;}
	
	.brand-view .screen {height:405px; background-size:contain; background-position:right center;}
	.brand-view .screen:before {display:none;}
	.brand-view .screen > strong {position:static; width:1320px; margin:80px auto 8px auto; text-align:left;}
	.brand-view .screen > span {position:static; width:1320px; margin-bottom:12px; text-align:left;}
	.brand-view .screen > p {position:static; width:1320px; max-height:105px; padding:0; margin:0 auto; text-align:left; -webkit-line-clamp:5;}
	.brand-view .screen > p > br {display:inline;}
	.brand-view .screen > a {position:static; display:inline-block; width:1320px; height:40px; padding:0; padding-left:50px; line-height:40px; text-align:left; background-position:left top; box-sizing:border-box;}
	.brand-view .screen > em {position:static; width:1320px; margin-top:12px; text-align:left;}
	/* [S] 2024.01.31 */
	.brand-view .screen > p {margin-top:100px;}
	.brand-view .screen > a {display:none;}
	/* [E] 2024.01.31 */
	.brand-view > .tags {width:1320px; margin:0 auto; padding:16px 0;}
	.brand-view > .career {width:1320px; margin:0 auto; padding:16px 0; display:flex; align-items:flex-start; box-sizing:border-box;}
	.brand-view > .career > dl {width:calc(100% / 3); padding-top:0; margin-top:0; border-top-style:none;}
	.brand-view > .career > dl > dt {margin-bottom:6px;}
	.brand-view > .relation {width:1320px; margin:0 auto; padding:16px 0; justify-content:flex-end;}
	.brand-view > .relation > a {width:200px;}
	
	.search-filter > .closed {left:400px; height:100vh;}
	.search-filter > .screen {left:-400px; bottom:0; width:400px; height:100vh; border-radius:0 10px 10px 0;}
	.search-filter > .screen > .brand > div:not(.foot) {height:calc(100vh - 16px - 22px - 16px - 79px);}
	.search-filter > .screen > .price > .scroll {height:calc(100vh - 16px - 22px - 32px - 56px - 32px - 79px);}
	.search-filter > .screen > .type > ul {height:calc(100vh - 16px - 22px - 32px - 79px);}
	.search-filter > .screen > .brand > div:not(.foot)::-webkit-scrollbar {width:4px; height:4px;}
	.search-filter > .screen > .brand > div:not(.foot)::-webkit-scrollbar-track {background-color:#ccc;}
	.search-filter > .screen > .brand > div:not(.foot)::-webkit-scrollbar-thumb {background:#666;}
	.search-filter > .screen > .brand > div:not(.foot)::-webkit-scrollbar-thumb:hover {background:#333;}
	.search-filter > .screen > .brand > div:not(.foot)::-webkit-scrollbar-thumb:active {background:#000;}
	.search-filter > .screen > .brand > div:not(.foot)::-webkit-scrollbar-button {display:none;}
	
	.goods {width:1320px; margin:0 auto;}
	.goods > .where {padding:0;}
	.goods > .screen > .count {padding:0;}
	.goods > .screen > .count > .sort > a.sortOrdr {padding-right:0;}
	.goods > .screen > .count > .sort > div {border-right-style:solid;}
	.goods > .screen > .list {padding:0;}
	
	.goods > .filter {padding-left:0;}
	.goods > .filter > a:last-child {margin-right:0;}
	.goods > .filter > div {padding-left:0;}
	.goods > .filter > div > a:last-child {margin-right:0;}
	
	.fixed .goods > .filter {top:61px;}
	.fixed .goods > .filter > div {width:1320px; margin-left:auto; margin-right:auto;}
}