/* API 제품목록 */
.prdList {max-width:1000px; margin:0 auto;}
.prdList * {font-family: "Pretendard";}
.prdList ul {display:grid; grid-template-columns:repeat(4, 1fr); gap:25px;}
.prdList ul li {position:relative; max-width:231px; overflow:hidden;}
.prdList ul li .pd .img {display:flex; justify-content:center; align-items:center; margin-bottom:19px; width:100%; height:auto; max-height:231px; aspect-ratio:1 / 1; border-radius:16px; overflow: hidden; background:#fff;}
.prdList ul li .pd .img img {width:auto; height:100%; max-height:180px;}
.prdList ul li .badge {display:flex; flex-wrap:wrap; gap:7px 9px; width:100%; margin-top:13px;}
.prdList ul li .badge em {display:inline-block; padding:3px 6.5px; font-size:15px; font-weight:500; color:#FFFFFF; text-align:left; white-space: nowrap; border-radius:6px; background: #B7A095;}
.prdList ul li .badge em.p {color:#fff; background:#EA1917;}
.prdList ul li .badge em.sale {color:#fff; background:#EA1917;}
.prdList ul li .badge em.line {line-height:1.2;}
.prdList ul li .badge + .txt {padding-top:13px;}
.prdList ul li .badge .sale + .sale {display:none;}
.prdList ul li .pd .txt {text-align:left;}
.prdList ul li .pd strong {display:block; padding-bottom:16px; font-size:21px; line-height:1.1; color:#1A1A1A; font-weight:500; border-bottom:1px solid #CEC7B4;}
.prdList ul li .pd strong em {display:block; padding-top:6px; color:#7E7C77; font-weight:400; font-size:17px;}
.isIOS .prdList ul li.workBreak .pd strong {word-break: break-all;}
.prdList ul li .pd dl {display:flex; flex-wrap: wrap; align-items: center; gap:8px 8px; padding-top:12px; white-space:nowrap;}
.prdList ul li .pd dl dt {display:none; flex:0 1 10%; font-size:17px; font-weight:600; color:#000; letter-spacing: -0.05em;}
.prdList ul li .pd dl dt.last {display:inline-flex;}
.prdList ul li .pd dl dd {flex:1 0 100%; font-size:21px; color:#1A1A1A; letter-spacing: -0.05em; word-spacing:-0.06em;}
.prdList ul li .pd dl dd del {color:#7E7C77;}
.prdList ul li .pd dl dd del::after {content:' 원';}
.prdList ul li .pd dl dd em::after {content:' 원';}
.prdList ul li .pd dl dd.lastPrice {flex:1 0 50%;}
.prdList ul li .pd dl dd.lastPrice em {font-weight:500; font-size:22px;}
.prdList ul .typeBtn {display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:8px;}
.prdList ul .typeBtn a {position:relative; flex:1; display:flex; justify-content: center; align-items:center; height:42px; gap:11px; padding:3px; font-size:17px; font-weight:500; color:#000; border:1px solid #000; border-radius:9px; cursor:pointer; overflow:hidden;}
.prdList ul .typeBtn a::after {content:''; display:inline-block; width:8px; height:14px; background: url(/kr/event/2025/05/13_luckyGSale/images/img-pd-arrow-right.png) no-repeat center; background-size:cover;}
.prdList ul.careCase li .pd dl dd em::before {content:'월 ';}
.prdList ul.careCase li .pd dl dd em::after {content:' 원';}
.prdList ul.careCase li .pd dl dd.lastPrice em::after {content:' 원 ~';}
.prdList ul.careCase li .careItem {margin-top:8px; border:1px solid #000; border-radius:10px;}
.prdList ul.careCase li .careItem dt {display:flex; justify-content: center; align-items:center; height:42px; gap:14px; font-size:17px; font-weight:500; color:#000; cursor:pointer;}
.prdList ul.careCase li .careItem dt::after {content:''; display:inline-block; width:14px; height:8px; background: url(/kr/event/2025/05/13_luckyGSale/images/img-pd-arrow-down.png) no-repeat center; background-size:cover; transition:all 0.3s ease;}
.prdList ul.careCase li .careItem dd {display:none}
.prdList ul.careCase li .careItem.active dt::after {transform:rotate(180deg);}
.prdList ul.careCase li .careItem.active dd {display:block; padding:0 20px;}
.prdList ul.careCase li .careItem.active dd span {display:block; padding-top:10px; min-height:68px; text-align:right; font-weight:500; font-size:15px; color:#000; line-height:1.5; border-top:1px solid #000;}
.prdList ul.careCase li .careItem.active dd label {float:left; margin-right:5px; color:#7E7C77;}
.prdList.landscape ul {display:block; max-width:486px;}
/*  Case1 : 글씨 영역만 클릭 (이미지 영역 클릭 X)
.prdList.landscape ul li {position:relative; width:100%; padding:0 0 0 244px; min-height:220px;}
.prdList.landscape ul li .pd .img {position:absolute; left:0; top:0; width:220px; margin-bottom:0;}
.prdList.landscape ul li .pd .img img {max-height:160px;} */
/* Case2 : 글씨 높이 만큼만 클릭 (이미지 영역 글자에 따라 다름) */
.prdList.landscape ul li {max-width:none; width:100%; min-height:172px;}
.prdList.landscape ul li ~ li {margin-top:25px;}
.prdList.landscape ul li .pd {position:relative; display:block; width:100%; padding:0 0 0 190px; /*min-height:220px;*/}
.prdList.landscape ul li .pd .img {position:absolute; left:0; top:0; width:172px; margin-bottom:0;}
.prdList.landscape ul li .pd .img img {max-height:140px;}
.prdList.landscape ul li .badge {margin-left:190px; width: calc(100% - 190px);}
.prdList.landscape ul li .typeBtn {margin-left:190px;}
.prdList.landscape ul li .careItem {margin-left:190px;} 
/* // Case2 : 글씨 높이 만큼만 클릭 (이미지 영역 글자에 따라 다름) */
.prdList.landscape ul li .pd dl dd:nth-child(2) {flex: 0 1 auto;}
.prdList.landscape ul li .pd dl dd:nth-child(4) {flex: 0 1 51%;}
.prdList.landscape ul li .pd dl dd.lastPrice {flex:1 0 50%;}
.prdList.landscape ul.careCase  li .pd dl dd:nth-child(2) {flex: 0 1 100%;}
.prdList.landscape ul.careCase  li .pd dl dd:nth-child(4) {flex: 1 0 50%;}
.prdList.landscape ul.careCase  li .pd dl dd.lastPrice {flex:1 0 50%;}
.prdList.interior ul {display:flex;}
.prdList.interior ul li {width:316px; padding-bottom:24px; border-radius:24px; max-width:none; overflow:hidden; background:#fff;}
.prdList.interior ul li .pcImg {display:inline-flex; justify-content:center; align-items:center; margin-bottom:24px; width:100%; height:auto; max-height:624px; aspect-ratio:1 / 1; overflow: hidden; background:#fff;}
.prdList.interior ul li .pcImg img {display:block; width:100%;}
.prdList.interior ul li .pd .img {display:none;}
.prdList.interior ul li .pd .txt {display:block; padding:0 24px;}
.prdList.interior ul li .pd dl dd:nth-child(2) {flex: 0 1 22%;}
.prdList.interior ul li .pd dl dd:nth-child(4) {flex: 0 1 60%;}
.prdList.interior ul li .badge {padding:0 24px;}
.prdList.interior ul .typeBtn {padding:16px 24px 0;}
.prdList.interior ul.careCase li .pd dl dd:nth-child(2) {flex: 0 1 100%;}
.prdList.interior ul.careCase li .pd dl dd:nth-child(4) {flex: 1 0 50%;}
.prdList.interior ul.careCase li .pd dl dd.lastPrice {flex:1 0 50%;}
.prdList.interior ul.careCase li .careItem {margin:8px 24px 0; width: calc(100% - 48px);}

/* soldOut */
.prdList ul li.soldout::before {content:''; position:absolute; top:0; bottom:0; left:0; right:0; z-index: 3; background:rgba(0,0,0,.86) url(/kr/event/2025/05/13_luckyGSale/images/img_soldout.png) no-repeat center; background-size:140px;}
.prdList ul li.soldoutAll::before {content:''; position:absolute; top:0; bottom:0; left:0; right:0; z-index: 3; background:rgba(0,0,0,.86) url(/kr/event/2025/05/13_luckyGSale/images/img_soldout.png) no-repeat center; background-size:140px;}
.prdList.landscape ul li.soldout::before {background-size:120px;}
.prdList.landscape ul li.soldoutAll::before {background-size:120px;}
.prdList ul li .typeBtn a.soldout::before {content:'특가 종료'; position:absolute; top:0; bottom:0; left:0; right:0; z-index: 3; display:flex; justify-content:center; align-items:center; color:#fff; font-size:20px; background:rgba(0,0,0,.8);}
.prdList ul li.soldoutAll .typeBtn .soldout::before {display:none;}
/* // soldOut */
.skeleton {position: relative; overflow: hidden; z-index: 2; width:100%;}
.skeleton .pd::after { content : ""; width: 100%; height: 100%; position:absolute; top:0; left: 0; z-index: 2; 
    background-image: linear-gradient(270deg, 
        rgba(255,255,255,0.2), 
        rgba(255,255,255,0.1), 
        rgba(255,255,255,0.2));
    transform: translateX(-100%);
    animation: skeleton-loader 2s infinite;
}
.skeleton .pd i { display:block;  height:18px;  border-radius:10px;  font-size:0 !important;  overflow:hidden;  background: #e3e3e3;}
.skeleton .pd strong { padding-bottom: 33px !important;}
.skeleton .pd strong em i {width: 50%;}
.skeleton .pd dl {gap: 16px 8px !important;}
@keyframes skeleton-loader{
    0%{
        transform: translateX(-100%);
    }
    100%{
        transform: translateX(100%);
    }
}

@container article-inner-area (max-width: 1000px) {
    /* TODO gt.yang : 768 ~ 1024 사이즈 일 경우 고려 필요할 경우 아래 개선 필요. 
    .prdList.landscape ul li .typeBtn {
        margin-left: 0;
        padding-top: 40px;
    } */
}


@media screen and (max-width: 767px) {
    .prdList {padding:0;}
    .prdList ul {grid-template-columns:repeat(2, 1fr); gap:calc(32 / 760* 100vw);}
    .prdList ul li {max-width:none; width:auto;}
    .prdList ul li .pd .img {margin-bottom:calc(24 / 760* 100vw); max-height:calc(296 / 760* 100vw); border-radius:calc(16 / 760* 100vw);}
    .prdList ul li .pd .img img {max-height:calc(220 / 760* 100vw);}
    .prdList ul li .badge {gap:calc(8 / 760* 100vw) calc(12 / 760* 100vw); margin-top:calc(16 / 760* 100vw);}
    .prdList ul li .badge em {padding:calc(4 / 760* 100vw) calc(8 / 760* 100vw); font-size:calc(20 / 760* 100vw); border-radius:calc(8 / 760* 100vw);}
    .prdList ul li .badge + .txt {padding-top:calc(14 / 760* 100vw);}
    .prdList ul li .pd strong {padding-bottom:calc(16 / 760* 100vw); font-size:calc(26 / 760* 100vw);}
    .prdList ul li .pd strong em {padding-top:calc(6 / 760* 100vw); font-size:calc(22 / 760* 100vw);}
    .prdList ul li .pd dl {gap:calc(8 / 760* 100vw) calc(8 / 760* 100vw); padding-top:calc(16 / 760* 100vw);}
    .prdList ul li .pd dl dt {font-size:calc(22 / 760* 100vw);}
    .prdList ul li .pd dl dd {font-size:calc(26 / 760* 100vw);}
    .prdList ul li .pd dl dd.lastPrice em {font-size:calc(28 / 760* 100vw);}
    .prdList ul .typeBtn {gap:calc(16 / 760* 100vw); padding-top:calc(16 / 760* 100vw);}
    .prdList ul .typeBtn a {height:calc(54 / 760* 100vw); gap:calc(14 / 760* 100vw); font-size:calc(22 / 760* 100vw); border-radius:calc(12 / 760* 100vw);}
    .prdList ul .typeBtn a::after {width:calc(9 / 760* 100vw); height:calc(18 / 760* 100vw);}
    .prdList ul.careCase li .careItem {margin-top:calc(8 / 760* 100vw); border-radius:calc(12 / 760* 100vw);}
    .prdList ul.careCase li .careItem dt { height:calc(54 / 760* 100vw); gap:calc(14 / 760* 100vw); font-size:calc(22 / 760* 100vw);}
    .prdList ul.careCase li .careItem dt::after {width:calc(18 / 760* 100vw); height:calc(10 / 760* 100vw);}
    .prdList ul.careCase li .careItem.active dd {padding:0 calc(24 / 760* 100vw);}
    .prdList ul.careCase li .careItem.active dd span {padding-top:calc(10 / 760* 100vw); min-height:calc(80 / 760* 100vw); font-size:calc(19 / 760* 100vw);}    
    /*  Case1 : 글씨 영역만 클릭 (이미지 영역 클릭 X)
    .prdList.landscape ul li {padding:0 0 0 calc(244 / 760* 100vw); min-height:calc(220 / 760* 100vw);}
    .prdList.landscape ul li .pd .img {width:calc(220 / 760* 100vw);}
    .prdList.landscape ul li .pd .img img {max-height:calc(160 / 760* 100vw);} */
    /* Case2 : 글씨 높이 만큼만 클릭 (이미지 영역 글자에 따라 다름) */
    .prdList.landscape ul {max-width:none; }
    .prdList.landscape ul li {min-height:calc(220 / 760* 100vw); overflow:hidden;}
    .prdList.landscape ul li ~ li {margin-top:calc(32 / 760* 100vw);}
    .prdList.landscape ul li .pd {padding:0 0 0 calc(244 / 760* 100vw);}
    .prdList.landscape ul li .pd .img {width:calc(220 / 760* 100vw);}
    .prdList.landscape ul li .pd .img img {max-height:calc(160 / 760* 100vw);}
    .prdList.landscape ul li .typeBtn {margin-left:calc(244 / 760* 100vw);}
    .prdList.landscape ul li .careItem {margin-left:calc(244 / 760* 100vw);} 
    .prdList.landscape ul li .badge {margin-left: calc(244 / 760* 100vw); width: calc(100% - 244px);}

    .prdList.interior ul li {width:calc(460 / 720 * 100vw);}
    .prdList.interior ul li .badge {padding:0 calc(24 / 760* 100vw);}
    .prdList.interior ul li .pcImg {margin-bottom:calc(24 / 760* 100vw);}
    .prdList.interior ul li .pd .txt {display:block; padding:0 calc(24 / 760* 100vw);}
    .prdList.interior ul li .pd strong {font-size:calc(28 / 760* 100vw);}
    .prdList.interior ul li .pd dl dd {font-size:calc(28 / 760* 100vw);}
    .prdList.interior ul li .pd dl dd.lastPrice em {font-size:calc(28 / 760* 100vw);}
    .prdList.interior ul li .pd dl dd:nth-child(2) {flex: 0 1 22%;}
    .prdList.interior ul li .pd dl dd:nth-child(4) {flex: 0 1 64%;}
    .prdList.interior ul .typeBtn {padding:calc(16 / 760* 100vw) calc(24 / 760* 100vw) 0;}
    .prdList.interior ul.careCase li .pd dl dd:nth-child(2) {flex: 1 0 100%;}
    .prdList.interior ul.careCase li .pd dl dd:nth-child(4) {flex: 1 0 50%;}
    .prdList.interior ul.careCase li .pd dl dd.lastPrice {flex:1 0 50%;}
    .prdList.interior ul.careCase li .careItem {margin:calc(8 / 760* 100vw) calc(24 / 760* 100vw) 0; width: calc(100% - calc(48 / 760* 100vw));}

    .skeleton .pd strong { padding-bottom: calc(33 / 760* 100vw) !important;}
    .skeleton .pd strong em i {width: 50%;}
    .skeleton .pd dl {gap: calc(16 / 760* 100vw) calc(8 / 760* 100vw) !important;}

    .prdList ul li.soldout::before {background-size:calc(176 / 760* 100vw);}
    .prdList ul li.soldoutAll::before {background-size:calc(176 / 760* 100vw);}
    .prdList.landscape ul li.soldout::before {background-size:calc(156 / 760* 100vw);}
    .prdList.landscape ul li.soldoutAll::before {background-size:calc(156 / 760* 100vw);}
    .prdList ul li .typeBtn a.soldout::before {font-size:calc(22 / 760* 100vw);}
}
/* // API 제품목록 */