/* BASIC css start */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
.thumbnail { position:relative; }
.xans-project-package .title h2 {
	margin: 70px 0 26px;
	padding: 0;
	font-size: 20px;
	text-align: left;
}
.xans-project-package .title h2 span {
	color: #002325;
}
.xans-project-package .banner {
	margin:0 0px;
}
.xans-project-package .banner img {
	max-width:1200px !important;
}
.xans-project-package .menuCategory {
	margin:0 0 27px;
	border:0px solid #d7d5d5;
	border-top:0;
	font-size:0;
	line-height:0;
}
.xans-project-package .menuCategory>li {
	display:inline-block;
	margin:12px 0 12px 0px;
	padding:0 5px 0 0;
	font-size:12px;
	line-height:14px;
	vertical-align:top;
	*display:inline;
	*zoom:1;
	background:url(http://img.echosting.cafe24.com/skin/base_ko_KR/layout/ico_util2.gif) no-repeat 0 50%;
}
.xans-project-package .menuCategory>li:first-child {
	background:none;
}
.xans-project-package .menuCategory>li>a {
	padding:0 15px 0 20px;
	font-weight:bold;
	color:#353535;
}
.xans-project-package .menuCategory>li>a:hover {
	text-decoration:none;
	background-position:100% -95px
}
.xans-project-package .menuCategory>li .count {
	font-weight:normal;
}

.xans-project-list h3 {
	margin:0 0 16px;
	font-weight:normal;
	font-size:20px;
	color:#2e2e2e;
	text-align:center;
}

.xans-project-list .title {
	font-size:26px;
	text-align:center;
	margin:0px 0 50px !important;
	color:#666;
}
.xans-project-list .title p {
	font-size:16px;
	padding:9px 40px;
	display:inline-block;
	background-color:#fff;
	color:#777;
	position:relative;
}
.xans-project-list .title .bar {
	display:block;
	width:100%;
	height:1px;
	margin-top:-20px;
	border-top:2px #293e4f solid;
}
.xans-project-list .title span.won1 {
	width:12px;
	height:12px;
	position:absolute;
	left:0px;
	top:13px;
}
.xans-project-list .title span.won2 {
	width:12px;
	height:12px;
	position:absolute;
	right:0px;
	top:13px;
}


.xans-project {
    clear: both;
}

.title .clst{margin-bottom:50px;}
.title .clst li {
    display: inline-block;
    text-align: center;
    margin: 0 5px 10px;
}

/* 기획전 하위 카테고리: 둥근 선 버튼 */
.title .clst li a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 100px !important;
    height: 40px !important;
    padding: 0 24px !important;

    border: 1px solid #ddd !important;
    border-radius: 999px !important;
    background: #fff !important;

    color: #555 !important;
    font-family: "Pretendard", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    box-sizing: border-box !important;
    text-decoration: none !important;
}

.title .clst {
    position: relative;
    text-align: center;
}

.title .pick {text-align: center;margin: 50px 0 60px;}

.title .clst::after {content: '';clear: both;display: block;}

.title .pick select {
    padding: 9px 50px;
    box-sizing: content-box;
    color: #9a9a9a;
    border: 1px solid #dddddd !important;
    font-size: 15px;
}

#top h2 {
    margin: 0 !important;
    padding: 0 0 26px !important;

    font-family: "Pretendard", sans-serif !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #111 !important;
}

/* 현재 선택된 카테고리 */
.title .clst li a.sel {
    color: #fff !important;
    font-weight: 500 !important;
    border-color: #111 !important;
    background: #111 !important;
}

/* ==================================
   최종 상품 정보 배치
================================== */

/* 가격 행 */
html body #contents
.xans-project-productlist .spec_wrap {
    position: relative !important;
    display: flex !important;
    align-items: baseline !important;

    width: 100% !important;
    min-height: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 가격 목록 */
html body #contents
.xans-project-productlist .spec_wrap > .spec {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 8px !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* 가격 항목 */
html body #contents
.xans-project-productlist .spec_wrap > .spec > li {
    display: block !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 할인 후 가격을 왼쪽 첫 번째로 */
html body #contents
.xans-project-productlist .price-after {
    order: 1 !important;
}

html body #contents
.xans-project-productlist .price-after,
html body #contents
.xans-project-productlist .price-after span {
    color: #000 !important;
    font-family: "Pretendard", sans-serif !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: -1px !important;
    word-spacing: -3px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

/* 할인 전 가격을 할인 후 가격 뒤로 */
html body #contents
.xans-project-productlist .price-before {
    order: 2 !important;
}

html body #contents
.xans-project-productlist .price-before,
html body #contents
.xans-project-productlist .price-before span {
    color: #aaa !important;
    font-family: "Pretendard", sans-serif !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    word-spacing: -3px !important;
    text-decoration: line-through !important;
    white-space: nowrap !important;
}

/* 할인율 오른쪽 끝 */
html body #contents
.xans-project-productlist .spec_wrap > .rate {
    position: absolute !important;
    top: -10px !important;
    right: 0 !important;

    color: #ff7f8a !important;
    font-family: "Pretendard", sans-serif !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 26px !important;
}


/* 리뷰: 아이콘과 같은 줄 오른쪽 */
html body #contents
.xans-project-productlist .description > .reviewcount {
    display: block !important;
    grid-column: 2 !important;
    grid-row: 3 !important;
    justify-self: end !important;
    align-self: start !important;

    width: auto !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;

    color: #777 !important;
    text-align: right !important;
    white-space: nowrap !important;
}

/* 스냅리뷰 내부 스타일 강제 적용 */
html body #contents
.xans-project-productlist .reviewcount,
html body #contents
.xans-project-productlist .reviewcount *,
html body #contents
.xans-project-productlist .snap_review_count,
html body #contents
.xans-project-productlist .snap_review_count * {
    color: #777 !important;
    font-family: "Pretendard", sans-serif !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    text-align: right !important;
}
/* ==================================
   기획전 상품 영역 좌우 폭 복구
================================== */

/* 1200px로 제한된 기획전 내부 영역 해제 */
html body #contents .xans-project-list,
html body #contents .xans-project-productlist {
    width: 100% !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    box-sizing: border-box !important;
}

/* 카테고리 제목도 상품 영역과 동일한 선에 배치 */
html body #contents
.xans-project-productlist > .page-hd {
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

html body #contents
.xans-project-productlist > .page-hd > h2 {
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* 상품 목록을 상위 카테고리 영역 전체 너비로 확장 */
html body #contents
.xans-project-productlist > .prdList.grid4 {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    column-gap: 22px !important;
    row-gap: 65px !important;

    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* 기존 상품별 폭·여백 제거 */
html body #contents
.xans-project-productlist > .prdList.grid4 > li {
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* 썸네일을 확장된 칸에 맞춤 */
html body #contents
.xans-project-productlist .thumbnail,
html body #contents
.xans-project-productlist .thumbnail > a {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body #contents
.xans-project-productlist .thumbnail img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
}
/* ==================================
   기획전 전체 영역을 상단 메뉴 선에 맞춤
================================== */
html body #contents {
    width: calc(100% - 40px) !important;
    max-width: 1400px !important;
    min-width: 0 !important;

    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 0 !important;
    padding-left: 0 !important;

    box-sizing: border-box !important;
}

/* 모든 기획전 내부 부모의 폭 제한 제거 */
html body #contents > .xans-project-package,
html body #contents .xans-project-list,
html body #contents .xans-project-productlist {
    width: 100% !important;
    max-width: none !important;

    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;

    box-sizing: border-box !important;
}

/* 제목과 상품 목록의 추가 들여쓰기 제거 */
html body #contents
.xans-project-productlist > .page-hd,
html body #contents
.xans-project-productlist > .page-hd > h2,
html body #contents
.xans-project-productlist > .prdList.grid4 {
    width: 100% !important;
    max-width: none !important;

    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;

    box-sizing: border-box !important;
}

/* 상품 4개를 확장된 영역에 균등 배치 */
html body #contents
.xans-project-productlist > .prdList.grid4 {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    column-gap: 22px !important;
    row-gap: 65px !important;
}

/* 상품별 기존 폭 제거 */
html body #contents
.xans-project-productlist > .prdList.grid4 > li {
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

/* 상품 이미지 */
html body #contents
.xans-project-productlist .thumbnail,
html body #contents
.xans-project-productlist .thumbnail > a,
html body #contents
.xans-project-productlist .thumbnail img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* 작은 화면 대응 */
@media screen and (max-width: 1024px) {
    html body #contents {
        width: calc(100vw - 60px) !important;
    }
}

@media screen and (max-width: 768px) {
    html body #contents {
        width: calc(100vw - 30px) !important;
    }

    html body #contents
    .xans-project-productlist > .prdList.grid4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 12px !important;
    }
}
/* 기획전 콘텐츠 전체 Pretendard 고정 */
html body #contents,
html body #contents *,
html body #contents *::before,
html body #contents *::after {
    font-family: "Pretendard", sans-serif !important;
}
/* 상품명 아래 회색 구분선 제거 */
html body #contents
.xans-project-productlist .description > .name,
html body #contents
.xans-project-productlist .description > .spec_wrap,
html body #contents
.xans-project-productlist .spec_wrap {
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    background-image: none !important;
}
/* 상품명과 가격 사이 간격 */
/* 상품명이 두 줄이면 실제 높이도 두 줄만큼 확장 */
html body #contents
.xans-project-productlist .description > .name {
    display: block !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 0 25px !important;
    padding: 0 !important;

    line-height: 20px !important;
    white-space: normal !important;
    overflow: visible !important;
}

/* 상품명 내부 요소도 높이 제한 해제 */
html body #contents
.xans-project-productlist .description > .name > a,
html body #contents
.xans-project-productlist .description > .name > a > span {
    display: inline !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    line-height: 20px !important;
    white-space: normal !important;
    overflow: visible !important;
}

html body #contents
.xans-project-productlist .description > .spec_wrap {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* 상품명은 유지하고 가격 영역만 위로 이동 */
html body #contents
.xans-project-productlist .description > .spec_wrap {
    position: relative !important;
    top: -10px !important;
}
/* 상품정보를 3행 그리드로 고정 */
html body #contents
.xans-project-productlist .description {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto !important;
    grid-template-areas:
        "name name"
        "price price"
        "icon review" !important;

    align-items: start !important;
    width: 100% !important;
    row-gap: 0 !important;
}

/* 상품명 */
html body #contents
.xans-project-productlist .description > .name {
    grid-area: name !important;
}

/* 가격 */
html body #contents
.xans-project-productlist .description > .spec_wrap {
    grid-area: price !important;
}


/* 아이콘: 세 번째 행 왼쪽 */
html body #contents
.xans-project-productlist .description > .icon {
    display: block !important;
    grid-area: icon !important;
    justify-self: start !important;
    align-self: start !important;

    position: relative !important;
    top: -3px !important;

    width: auto !important;
    height: auto !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
    transform: none !important;
}

/* 리뷰: 아이콘과 동일한 세 번째 행 오른쪽 */
html body #contents
.xans-project-productlist .description > .reviewcount {
    display: block !important;
    grid-area: review !important;
    justify-self: end !important;
    align-self: start !important;

    width: auto !important;
    height: auto !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
    transform: none !important;

    color: #777 !important;
    line-height: 18px !important;
    text-align: right !important;
    white-space: nowrap !important;
}
/* 카테고리 상품 교체 효과 */
.xans-project-list {
    transition: opacity 0.2s ease;
}

.xans-project-list.is-loading {
    opacity: 0.35;
    pointer-events: none;
}
/* 기획전 상품 페이지네이션 */
.project-pagination {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 22px;

    width: 100%;
    margin: 20px 0 70px;
    padding: 30px 0 0;
}

.project-pagination button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 14px;
    height: 30px;
    margin: 0;
    padding: 0;

    color: #aaa;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    font-weight: 400;

    border: 0;
    background: transparent;
    cursor: pointer;
}

/* 현재 페이지 */
.project-pagination .paging-number.is-current {
    color: #111;
    font-weight: 600;
}

.project-pagination .paging-number.is-current::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;

    width: 7px;
    height: 1px;
    background: #111;
    transform: translateX(-50%);
}

/* 비활성 화살표 */
.project-pagination button:disabled {
    opacity: 0.35;
    cursor: default;
}

/* 화살표 공통 */
.project-pagination .paging-prev::before,
.project-pagination .paging-next::before,
.project-pagination .paging-first::before,
.project-pagination .paging-first::after,
.project-pagination .paging-last::before,
.project-pagination .paging-last::after {
    content: "";
    position: absolute;
    top: 9px;

    width: 6px;
    height: 6px;
}

/* 왼쪽 화살표 */
.project-pagination .paging-prev::before,
.project-pagination .paging-first::before,
.project-pagination .paging-first::after {
    border-top: 1px solid #999;
    border-left: 1px solid #999;
    transform: rotate(-45deg);
}

.project-pagination .paging-prev::before {
    left: 4px;
}

.project-pagination .paging-first::before {
    left: 1px;
}

.project-pagination .paging-first::after {
    left: 5px;
}

/* 오른쪽 화살표 */
.project-pagination .paging-next::before,
.project-pagination .paging-last::before,
.project-pagination .paging-last::after {
    border-top: 1px solid #999;
    border-right: 1px solid #999;
    transform: rotate(45deg);
}

.project-pagination .paging-next::before {
    right: 4px;
}

.project-pagination .paging-last::before {
    right: 5px;
}

.project-pagination .paging-last::after {
    right: 1px;
}
/* 기획전 상세 콘텐츠 전체 860px + 가운데 정렬 */
html body #contents
.xans-project-package
.xans-product-headcategory.title
.banner {
    display: block !important;
    width: 860px !important;
    max-width: 860px !important;
    margin-top: 40px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding: 0 !important;
    overflow: visible !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* 기획전 HTML 내부의 고정 폭을 860px 안으로 제한 */
html body #contents
.xans-project-package
.xans-product-headcategory.title
.banner > * {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
    box-sizing: border-box !important;
}

/* 원본 이미지 크기와 관계없이 비율 유지 */
html body #contents
.xans-project-package
.xans-product-headcategory.title
.banner img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-right: auto !important;
    margin-left: auto !important;
    object-fit: contain !important;
}
/* BASIC css end */