@charset "utf-8";

@media screen and (max-width: 767px) {
    a, input {outline:none;-webkit-tap-highlight-color:transparent;}
    a:focus
    a:active,
    input:focus {outline: none;-webkit-tap-highlight-color:transparent;}
    div:focus {outline: none; -webkit-tap-highlight-color:transparent;}
}
h3 {max-width:1380px;padding:10px;margin:30px auto;text-align:left;font-size: 28px;background:#eee;}
h4 {max-width:1380px;padding:10px;margin:30px auto;text-align:center;font-size: 17px;border-bottom: 1px solid #eee;}
.test + h3 {margin-top:60px;}
.test {max-width:1380px; margin:0 auto;}
.test ul {display:grid; grid-template-columns:repeat(4, minmax(calc((100% - 72px)/4), auto)); padding:14px 18px; max-width:1380px; gap:24px;}
.test ul * {font-family: "Pretendard";}
.test ul li {position: relative; border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.14);overflow:hidden; /*background:url(/kr/event/2025/01/14_apitest/images/testimg1_b.png) no-repeat top center;background-size:100% auto;*/}
.test ul li a {position:relative;display:block;height:100%;}
.test ul li .count {position: absolute; top: 3%; left: 5%; z-index: 3; display:inline-flex; justify-content:center; align-items:center; height: 6%; padding:0 1%; font-size:18px; font-weight:bold; color:#EA1917; border-radius:5px; border:1px solid #EA1917;}
.test ul li .sale {position: absolute; top: 2%; right: 3%; z-index: 3; display:inline-flex; justify-content:center; align-items:center; width: calc(61 / 318 * 100%); aspect-ratio:1 / 1; font-size:20px; font-weight:bold; color:#fff; border-radius:50%; border:1px solid #EA1917; background:#EA1917;}
.test ul li .pd {display: flex ; flex-direction: column; justify-content: space-between; height: 100%;}
/* .test ul li .img {display:flex;justify-content:center;align-items:center;width:100%;} */
.test ul li .img {position: relative; z-index: 1; flex-shrink:0;display:flex;justify-content:center;align-items:center; width:100%; height:auto; max-height:300px; aspect-ratio:1 / 1.06; overflow: hidden;}
.test ul li .img img {width:auto;height:100%;max-height:200px;}
.test ul li .txt {flex-grow: 1; display: flex; flex-direction: column;justify-content: space-around;}
.test ul li strong {display:block;padding:0 24px;min-height:112px;text-align:left;font-size:22px;line-height:1.4;}
.test ul li strong em {display:block;padding:5px 0 0 0;color:#777;font-weight:300;font-size:19px;}
.test ul li .soldout::before {content:''; position:absolute; top:0; bottom:0; left:0; right:0; z-index: 5; background:rgba(0,0,0,.8) url(/kr/event/2025/01/14_apitest/images/img_soldout.png) no-repeat center;background-size:100%;}
.test ul li dl {display:grid;align-items:center;grid-template-columns:auto auto;grid-template-rows:36px 36px 41px;padding:0 24px 24px;letter-spacing:-1px;white-space:nowrap;}
.test ul li dl dt {font-size:18px; text-align:left; color:#666666;}
.test ul li dl dd {font-size:28px; text-align:right; font-weight:600;}
.test ul li dl dd em {margin-left:2px; font-size:20px; font-weight:400;}
.test ul li dl dd del {font-size:22px;}
.test ul li .thisP {color:#EA1917;}
.test ul li dt.thisP em {display:inline-block; padding:6px 9px 4px 8px; font-weight:600; border:1px solid #EA1917; border-radius:4px;}
.test ul li dl .month {grid-column:span 2; display:flex; justify-content:space-between; font-size:18px; color:#B17870;}
.test ul li dl .month * {font-style:normal; font-size:18px;}
.test ul li dl .month i {padding-left:25px; font-weight:400; background:url(/kr/event/2025/01/14_apitest/images/icon.png) no-repeat center left; background-size: auto 70%;}
.test ul li dl .visitNum {font-size: 18px; font-weight: 300; color: #666666;}
.test ul li.type2 span {position:absolute; left:0; right:0; bottom:0;}
.test ul li.type2 dl dt {font-size:0;}
.test ul li.type2 dl dt em {border:0}
.test ul li.type2 dl .month i {font-size:0;background:none;}

.skeleton{
    position: relative;
    overflow: hidden;
    z-index: 2;
    /* background-color: #030303; */
  }
  .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; 
    overflow:hidden; 
    background: #e3e3e3;
}
.skeleton .pd strong em i {
    width: 50%;
}
.skeleton .pd dl {
    grid-template-columns: 50% 50%;
}
/* .skeleton .pd i::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;
  } */
  
  @keyframes skeleton-loader{
    0%{
      transform: translateX(-100%);
    }
    100%{
      transform: translateX(100%);
    }
  }

@media screen and (max-width: 1380px) {
    .test ul {grid-template-columns:repeat(3, 1fr);}
}
@media screen and (max-width: 1070px) {
    .test ul {grid-template-columns:repeat(2, 1fr);}
}
@media screen and (max-width: 767px) {
    .test ul {padding:calc(14 / 760* 100vw) calc(18 / 760* 100vw); gap:calc(24 / 760* 100vw);}
    .test ul li dl {grid-template-rows:calc(39 / 760* 100vw) calc(39 / 760* 100vw) calc(44 / 760* 100vw);padding:0 calc(24 / 760* 100vw) calc(24 / 760* 100vw);}
    .test ul li dl dt {font-size:calc(18 / 760* 100vw);}
    .test ul li dl dd {font-size:calc(28 / 760* 100vw);}
    .test ul li dl dd em {font-size:calc(20 / 760* 100vw);}
    .test ul li dl dd del {font-size:calc(22 / 760* 100vw);}
    .test ul li dt.thisP em {padding:calc(6 / 760* 100vw) calc(9 / 760* 100vw) calc(4 / 760* 100vw) calc(8 / 760* 100vw);}
    .test ul li dl .month {font-size:calc(18 / 760* 100vw);}
    .test ul li dl .month * {font-size:calc(18 / 760* 100vw);}
    .test ul li dl .month i  {padding-left:calc(25 / 760* 100vw); background-size: auto 74%; background-position-y: 24%;}
	.test ul li dl .visitNum {font-size: calc(18 / 760* 100vw);}
    .test ul li .count {font-size:calc(18 / 760* 100vw);}
    .test ul li .sale {font-size:calc(20 / 760* 100vw);}
    .test ul li .img {max-height:calc(300 / 760* 100vw); }
    .test ul li .img img {max-height:calc(200 / 760* 100vw);}
    .test ul li strong {padding:0 calc(24 / 760* 100vw) calc(24 / 760* 100vw);min-height:calc(112 / 760* 100vw);font-size:calc(22 / 760* 100vw);}
    .test ul li strong em {padding:calc(5 / 760* 100vw) 0 0 0;font-size:calc(18 / 760* 100vw);}
}
@media screen and (max-width: 480px) {
    .test ul li dl dt {font-size:calc(22 / 760* 100vw);}
    .test ul li dl dd {font-size:calc(34 / 760* 100vw);}
    .test ul li dl dd em {font-size:calc(26 / 760* 100vw);}
    .test ul li dl dd del {font-size:calc(28 / 760* 100vw);}
    .test ul li dl .month {font-size:calc(22 / 760* 100vw);}
    .test ul li dl .month * {font-size:calc(22 / 760* 100vw);}
    .test ul li dl .month i  {padding-left:calc(25 / 760* 100vw); background-size: auto 74%; background-position-y: 24%;}
	.test ul li dl .visitNum {font-size: calc(22 / 760* 100vw);}
    .test ul li .count {font-size:calc(20 / 760* 100vw);}
    .test ul li .sale {font-size:calc(22 / 760* 100vw);}
    .test ul li strong {font-size:calc(28 / 760* 100vw);}
    .test ul li strong em {font-size:calc(22 / 760* 100vw);}
}






/* API 제품목록 */
.prdList {max-width:1380px; margin:0 auto;}
.prdList ul {display:grid; grid-template-columns:repeat(4, minmax(calc((100% - 60px)/4), auto)); max-width:1380px; gap:20px;}
.prdList ul * {font-family: "Pretendard";}
.prdList ul li {position: relative;}
.prdList ul li > span {display:block;height:100%;border:1px solid #DEDEDE;background:#fff;}
.prdList ul li a.base {position:relative;display:block;height:100%; padding-bottom:18px;}
.prdList ul li .tLeft {position:absolute; top:18px; left:18px; z-index: 3; display:inline-flex; flex-direction:column; align-items: flex-start; gap:6px; overflow:visible;}
.prdList ul li .tLeft em {display:inline-block; padding:4% 10px; font-size:16px; font-weight:600; color:#6C6C6C; white-space: nowrap; border-radius:90px; background: #F7F3F3;}
.prdList ul li .tLeft em.p {color:#EA1917;}
.prdList ul li .tRight {position: absolute; top:18px; right:18px; z-index: 3; width: calc(59 / 286 * 100%); overflow:visible;}
.prdList ul li .tRight em {display:inline-flex; justify-content:center; align-items:center; width:100%; aspect-ratio:1 / 1; line-height: 1.15; font-size:18px; font-weight:500; color:#fff; border-radius:50%; border:1px solid #EA1917; background:#EA1917;}
.prdList ul li .tRight em.limted {border-radius:9px;}
.prdList ul li .tRight .count {float:right; display:inline-flex; justify-content:center; align-items:center; width:auto; height:auto; min-width:97px; max-height:26px; padding:5% 5%; white-space: nowrap; font-size:18px; font-weight:500; color:#EA1917; border-radius:5px; border:1px solid #EA1917;}
.prdList ul li .pd {display: flex ; flex-direction: column; justify-content: space-between; height: 100%;}
.prdList ul li .pd .img {position: relative; z-index: 1; flex-shrink:0;display:flex;justify-content:center;align-items:center; width:100%; height:auto; max-height:252px; aspect-ratio:1 / 1.06; overflow: hidden;}
.prdList ul li .pd .img img {width:auto;height:100%;max-height:200px;}
.prdList ul li .pd .txt {flex-grow: 1; display: flex; flex-direction: column;justify-content:space-between; min-height:220px;}
.prdList ul li .pd strong {display:block;padding:0 18px 10px;text-align:left;font-size:21.6px;line-height:1.3;font-weight:600;}
.prdList ul li .pd strong em {display:block;padding:2px 0 0 0;color:#777;font-weight:300;font-size:19px;}
.prdList ul li .pd dl {display:grid;align-items:center;grid-template-columns:auto auto;grid-template-rows:30px 32px 32px;padding:0 18px;letter-spacing:-1px;white-space:nowrap;}
.prdList ul li .pd dl dt {font-size:18px; text-align:left; color:#666666;}
.prdList ul li .pd dl dt em {font-size:18px; font-weight:500; color:#000;}
.prdList ul li .pd dl dt span {display:inline-block; padding:4px 7px; font-size:18px; font-weight:500; color:#fff; background:#EA1917; border-radius:3.6px;}
.prdList ul li .pd dl dd {font-size:27px; color:#000;}
.prdList ul li .pd dl dd {text-align:right;}
.prdList ul li .pd dl dd del {font-size:20px; color:#666666;}
.prdList ul li .pd dl dd del::after {content:' 원'; font-size:20px;}
.prdList ul li .pd dl dd em {font-weight:500;}
.prdList ul li .pd dl dd em::after {content:' 원'; font-size:20px;}
.prdList ul li .pd dl dd.lastPrice {color:#EA1917;}
.prdList ul li .pd dl dd i {font-size: 20px;}
.prdList ul li .soldout::before {content:''; position:absolute; top:0; bottom:0; left:0; right:0; z-index: 5; background:rgba(0,0,0,.8) url(/kr/event/2025/01/14_apiprdList/images/img_soldout.png) no-repeat center;background-size:100%;}
.prdList ul li .soldoutAll::before {content:''; position:absolute; top:0; bottom:0; left:0; right:0; z-index: 5; background:rgba(0,0,0,.8) url(/kr/event/2025/01/14_apiprdList/images/img_soldout.png) no-repeat center;background-size:100%;}
.prdList ul li .soldoutAll + .typeBtn .soldout::before {display:none;}
.prdList ul li .pd dl .visitNum {grid-column:span 2; padding-top:9px; font-size: 18px; font-weight: 300; color: #666666;}
.prdList ul .prdType {position:relative; display:block; height:100%;}
.prdList ul .prdType a.base {padding-bottom:70px;}
.prdList ul .prdType .pd .txt {min-height:auto;}
.prdList ul .prdType .typeBtn {position:absolute; left:18px; right:18px; bottom:18px; display:flex; gap:10px; justify-content: space-between;}
.prdList ul .prdType .typeBtn a {flex:1; display:flex; justify-content:center; align-items:center; height:40px; border-radius:3.6px; background: #666666; overflow:hidden;}
.prdList ul .prdType .typeBtn a img {width:auto; height:100%;}
.prdList ul.careCase li {border:none;}
.prdList ul.careCase li > span {height:auto;border-bottom:0;}
.prdList ul.careCase li a.base {height:auto;}
.prdList ul.careCase li .pd dl dd em {font-size:28px;}
.prdList ul.careCase li .pd dl dd em::before {content:'월 '; font-size:22px;}
.prdList ul.careCase li .pd dl dd em::after {content:' 원 ~'; font-size:22px;}
.prdList ul.careCase li .pd dl dt span {display:inline-block; padding:4px 7px; font-size:18px; font-weight:500; color:#EA1917; border:1px solid #EA1917; background:#fff; border-radius:3.6px;}
.prdList ul.careCase li .careItem {border:1px solid #DEDEDE; border-top:0;}
.prdList ul.careCase li .careItem dd {display:none;}
.prdList ul.careCase li .careItem.active dd {display:block;}
.prdList ul.careCase .prdType {height:490px;}
.prdList ul.careCase .prdType a.base { height:100%;}
.prdList ul.colorChip li {position:relative;display:flex;flex-direction:column;}
.prdList ul.colorChip li .pd .img {margin-bottom:11%;}
.prdList ul.colorChip .colorSelect {display:inline-flex; gap:9px; position:absolute;left:50%;top:242px;z-index:3; height:20px; transform:translateX(-50%);}
.prdList ul.colorChip .colorSelect button {display:inline-block; aspect-ratio:1 / 1; height:100%; border-radius:100%; border:1px solid rgba(0, 0, 0, 0.5)}
.colorSelect .cmBeige {background:#DFDAD4;}
.colorSelect .cmBrown {background:#C8B2A6;}
.colorSelect .cmWhite {background:#F6F8F5;}
.colorSelect .slBeige {background:#EEE9E5;}
.colorSelect .slWhite {background:#F5F3F1;}
.colorSelect .slBlack {background:#404144;}
.colorSelect .slGray {background:#CCCBD3;}
.colorSelect .slPink {background:#F0DDD9;}
.colorSelect .white {background:#F7F6F6;}
.colorSelect .black {background:#000000;}
.prdList.landscape ul {display:block; max-width:585px;}
.prdList.landscape ul li {position: relative; height:189px;}
.prdList.landscape ul li a.base {padding-bottom:0;}
.prdList.landscape ul li .tRight {width:56px;}
.prdList.landscape ul li .pd {padding:0 18px; flex-direction: row; align-items:center; gap:18px;}
.prdList.landscape ul li .pd .img {width:38.29%; max-height:150px;}
.prdList.landscape ul li .pd .txt {padding:18px 0;min-height:auto}
.prdList.landscape ul li .pd dl {grid-template-rows: 30px 32px 0;}
.prdList.landscape ul li .pd dl dt:nth-child(3) {display:none;}
.prdList.landscape ul li .pd dl dd:nth-child(2) {display:none;}

.skeleton{ position: relative; overflow: hidden; z-index: 2;}
.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 em i {width: 50%;}
.skeleton .pd dl {grid-template-columns: 50% 50%;}
@keyframes skeleton-loader{
    0%{
        transform: translateX(-100%);
    }
    100%{
        transform: translateX(100%);
    }
}

/* @media screen and (max-width: 1380px) {
    .prdList ul {grid-template-columns:repeat(3, 1fr);}
}
@media screen and (max-width: 1070px) {
    .prdList ul {grid-template-columns:repeat(2, 1fr);}
} */
@media screen and (max-width: 767px) {
    .prdList ul {grid-template-columns:repeat(2, 1fr); gap:calc(20 / 760* 100vw); padding:calc(14 / 760* 100vw) calc(29 / 760* 100vw); gap:calc(24 / 760* 100vw);}
    /* .prdList ul li dl {grid-template-rows:calc(39 / 760* 100vw) calc(39 / 760* 100vw) calc(44 / 760* 100vw);padding:0 calc(24 / 760* 100vw) calc(24 / 760* 100vw);}
    .prdList ul li dl dt {font-size:calc(18 / 760* 100vw);}
    .prdList ul li dl dd {font-size:calc(28 / 760* 100vw);}
    .prdList ul li dl dd em {font-size:calc(20 / 760* 100vw);}
    .prdList ul li dl dd del {font-size:calc(22 / 760* 100vw);}
    .prdList ul li dt.thisP em {padding:calc(6 / 760* 100vw) calc(9 / 760* 100vw) calc(4 / 760* 100vw) calc(8 / 760* 100vw);}
    .prdList ul li dl .month {font-size:calc(18 / 760* 100vw);}
    .prdList ul li dl .month * {font-size:calc(18 / 760* 100vw);}
    .prdList ul li dl .month i  {padding-left:calc(25 / 760* 100vw); background-size: auto 74%; background-position-y: 24%;}
	.prdList ul li dl .visitNum {font-size: calc(18 / 760* 100vw);}
    .prdList ul li .count {font-size:calc(18 / 760* 100vw);}
    .prdList ul li .sale {font-size:calc(20 / 760* 100vw);}
    .prdList ul li .img {max-height:calc(300 / 760* 100vw); }
    .prdList ul li .img img {max-height:calc(200 / 760* 100vw);}
    .prdList ul li strong {padding:0 calc(24 / 760* 100vw) calc(24 / 760* 100vw);min-height:calc(112 / 760* 100vw);font-size:calc(22 / 760* 100vw);}
    .prdList ul li strong em {padding:calc(5 / 760* 100vw) 0 0 0;font-size:calc(18 / 760* 100vw);} */
    /*.prdList ul li::before {content:''; position:absolute; top:0; bottom:0; left:0; right:0; z-index: 5; background: url(/kr/event/2025/02/00_api_total/images/img_mobileSample.png) no-repeat center;background-size:100% 100%;}*/
    .prdList ul li a.base {padding-bottom:calc(20 / 760* 100vw);}
    .prdList ul li .tLeft {top:calc(12 / 760* 100vw); left:calc(16 / 760* 100vw);gap:6px;}
    .prdList ul li .tLeft em {padding:4% 10px; font-size:16px;border-radius:90px;}
    .prdList ul li .tRight {top:calc(12 / 760* 100vw); right:calc(16 / 760* 100vw); width: calc(62 / 318 * 100%); }
    .prdList ul li .tRight em {font-size:calc(20 / 760* 100vw);}
    .prdList ul li .tRight em.limted {border-radius:5px;}
    .prdList ul li .pd .img {width:100%; height:auto; max-height:calc(280 / 760* 100vw); aspect-ratio:1 / 1.06;}
    .prdList ul li .pd .img img {max-height:calc(210 / 760* 100vw);}
    .prdList ul li .pd .txt {min-height:calc(250 / 760* 100vw);}
    .prdList ul li .pd strong {padding:0 calc(20 / 760* 100vw) 10px;font-size:calc(28 / 760* 100vw);}
    .prdList ul li .pd strong em {font-size:calc(22 / 760* 100vw);}
    .prdList ul li .pd dl {grid-template-rows:calc(30 / 760* 100vw) calc(36 / 760* 100vw) calc(36 / 760* 100vw);padding:0 calc(20 / 760* 100vw); letter-spacing:0;}
    .prdList ul li .pd dl dt {font-size:calc(23 / 760* 100vw);}
    .prdList ul li .pd dl dt em {font-size:calc(23 / 760* 100vw);}
    .prdList ul li .pd dl dt span {padding:3px 3px; font-size:calc(23 / 760* 100vw);}
    .prdList ul li .pd dl dd {font-size:calc(31 / 760* 100vw);}
    .prdList ul li .pd dl dd del {font-size:calc(23 / 760* 100vw);}
    .prdList ul li .pd dl dd del::after {font-size:calc(23 / 760* 100vw);}
    .prdList ul li .pd dl dd em::after {font-size:calc(23 / 760* 100vw);}
    .prdList ul li .pd dl dd i {font-size: calc(23 / 760* 100vw);}
    .prdList ul li .pd dl .visitNum {padding-top:9px; font-size:calc(23 / 760* 100vw);}
    .prdList ul .prdType a.base {padding-bottom:calc(80 / 760* 100vw);}
    .prdList ul .prdType .typeBtn {left:calc(20 / 760* 100vw); right:calc(20 / 760* 100vw); bottom:calc(20 / 760* 100vw); gap:calc(10 / 760* 100vw);}
    .prdList ul .prdType .typeBtn a {height:calc(40 / 760* 100vw); border-radius:3.6px;}
    .prdList ul .prdType .typeBtn a img {width:100%; height:auto;}
    .prdList ul.careCase li .pd dl dd em {font-size:28px;}
    .prdList ul.careCase li .pd dl dd em::before {font-size:calc(22 / 760* 100vw);}
    .prdList ul.careCase li .pd dl dd em::after {font-size:calc(22 / 760* 100vw);}
    .prdList ul.careCase li .pd dl dt span {padding:3px 3px; font-size:calc(23 / 760* 100vw);}
    .prdList ul.careCase .prdType {height:auto; min-height:calc(553 / 760* 100vw);}
    .prdList ul.colorChip .colorSelect {top:calc(270 / 760* 100vw);height:calc(22 / 760* 100vw);}
    /* .prdList ul li dl dt {font-size:calc(22 / 760* 100vw);}
    .prdList ul li dl dd {font-size:calc(34 / 760* 100vw);}
    .prdList ul li dl dd em {font-size:calc(26 / 760* 100vw);}
    .prdList ul li dl dd del {font-size:calc(28 / 760* 100vw);}
    .prdList ul li dl .month {font-size:calc(22 / 760* 100vw);}
    .prdList ul li dl .month * {font-size:calc(22 / 760* 100vw);}
    .prdList ul li dl .month i  {padding-left:calc(25 / 760* 100vw); background-size: auto 74%; background-position-y: 24%;}
	.prdList ul li dl .visitNum {font-size: calc(22 / 760* 100vw);}
    .prdList ul li .count {font-size:calc(20 / 760* 100vw);}
    .prdList ul li .sale {font-size:calc(22 / 760* 100vw);}
    .prdList ul li strong {font-size:calc(28 / 760* 100vw);}
    .prdList ul li strong em {font-size:calc(22 / 760* 100vw);} */
    .skeleton .pd i { height:10px;}
}