/* BASIC css start */
#overlay_layer{display: none !important;}

/* 공통 상품 기본폼 */
.normal_prod_wrap{font-size:0;letter-spacing:0}
.normal_item .prod_thumb{margin-bottom:20px;position:relative}
.normal_item .prod_thumb .thumb_img{width:100%}
.normal_item .prod_thumb .thumb_ov{background:rgba(255,255,255,.75);position:absolute;width:100%;bottom:0;left:0;text-align:center;opacity:0;visibility:hidden;transition:all .35s;-webkit-transition:all .35s;-ms-transition:all .35s}
.normal_item:hover .prod_thumb .thumb_ov{opacity:1;visibility:visible}
.normal_item .prod_thumb .thumb_ov a{height:12px;display:inline-block;vertical-align:top;padding:0 17px;margin:15px 0}
.normal_item .prod_thumb .thumb_ov a:last-child{border-right:none}
.normal_item .prod_thumb .thumb_ov a img{margin-top:-2px}
.normal_item .prod_thumb .prod_icon{position:absolute;bottom:0;left:0;display:block}
.normal_item .prod_color span,.normal_item .prod_thumb .prod_icon img{display:inline-block;vertical-align:top;float:left;}
.normal_item .normal_price{font-size:15px;font-weight:600;padding-right:8px;color: #1B1B1B !important;letter-spacing: 0.02em;}
.normal_item .consumer_price strike{color: #9C9C9C;}
.normal_item .consumer_price1 strike{color: #9C9C9C;    padding-right: 8px;}
.normal_item .consumer_price2 {padding-left:5px;}
.normal_item .prod_name,.normal_item .prod_price{margin-bottom:10px;position:relative;}
.normal_item .prod_price .sold_out b{color:red;display: inline-block;margin-left:5px;font-size: 13px;line-height: 13px;margin-top:-2px}
.normal_item .prod_subname{
    width: 320px;
    color:#9C9C9C;
    margin-bottom: 12px;
    word-wrap: break-word;
}
.normal_item .prod_color span{width:20px;height:3px;margin-right:5px;margin-bottom:5px;}
.normal_item .prod_color span.border{border: 1px solid #e2e2e2 !important;;width:20px;height:3px;box-sizing:border-box}
.normal_item .prod_thumb a.link_wrap{vertical-align: top;}

.normal_item{
    width: 31.9%;
    vertical-align: top;
    font-size: 13px;
    margin-bottom: 72px;
}

html .normal_item .prod_thumb .thumb_ov {
    background: rgba(0,0,0,0.7);
}

/* swiper */
      html,
      body {
        position: relative;
        height: 100%;
      }

      body {
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
      }

      .swiper {
        width: 100%;
        height: 100%;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .swiper-horizontal > .swiper-pagination-progressbar,
      .swiper-pagination-progressbar.swiper-pagination-horizontal {
        top: auto !important;
        bottom: 0;
        background-color: #dfdfdf;
      }

      :root .weSwiper {
        --swiper-theme-color: #3c3c3c;
      }

      :root .profileSwiper {
        --swiper-theme-color: #fff;
      }

      .profileSwiper .swiper-pagination-bullet {
        background-color: #fff;
      }

      .weSwiper .swiper-button-prev {
        left: 4%;
      }

      .weSwiper .swiper-button-next {
        right: 4%;
      }

      .profileSwiper .swiper-button-prev {
        left: 4%;
      }

      .profileSwiper .swiper-button-next {
        right: 4%;
      }

      :root .weSwiper .swiper-button-prev {
        --swiper-theme-color: #fff;
      }
      :root .weSwiper .swiper-button-next {
        --swiper-theme-color: #fff;
      }

      .swiper-button-prev:after {
        width: 34px;
        height: 69px;
      }

      .swiper-button-next:after {
        width: 34px;
        height: 69px;
      }


      /* 추가 분할 페이지 */
      
      .scrollBox {
        overflow: hidden;
      }

      body {
        margin: 0 auto;
        padding: 0;
        overflow: hidden;
      }

      .positionR {
        position: relative;
      }

      .positionA {
        position: absolute;
      }

      #prdBrand {
        padding-left: 41.67vw;
        position: relative;
      }

      .cut_lay {
        width: auto;
      }

      .over {
        position: relative;
      }

      .overBox {
        position: absolute;
        width: 41.67vw;
        height: 100vh;
        overflow-y: scroll;
        overflow-x: hidden;
        left: 0;
        top: 0;
      }

      .overBox::-webkit-scrollbar,
      .item-wrap::-webkit-scrollbar {
        width: 8px;
      }

      .overBox:hover::-webkit-scrollbar-thumb,
      .item-wrap:hover::-webkit-scrollbar-thumb {
        height: 10%;
        background: #000;
        border-radius: 10px;
      }

      .overBox:hover::-webkit-scrollbar-track,
      .item-wrap:hover::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.1);
      }

      .item-wrap {
        overflow-y: scroll;
        height: 100vh;
        padding: 0 5.25%;
        box-sizing: border-box;
      }

      .ffw {
        display: none;
      }

      #contentWrapper {
        padding-top: 0;
      }

      .flexBox {
        width: 58.33vw;
        flex-wrap: wrap;
        padding-left: 41.67vw;
        position: relative;
        height: 100vh;
      }

      .tb-center {
        width: 29.3%;
      }

      .tb-center .info li a {
        display: block;
      }

      .tb-center .info li .thumb a img {
        width: 100%;
      }

      .tb-center:not(:nth-child(3n)) {
        margin-right: 2%;
      }

      .normal_prod_box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }

      .item-wrap h2 {
        padding: 50px 0 30px;
        font-size: 24px;
        font-family: "NanumGothic";
        font-weight: 700;
      }

      .copy {
        cursor: pointer;
      }

      .overBox img {
        display: block;
        width: 100%;
        object-position: top;
        object-fit: cover;
      }

      header {
        position: fixed;
        left: 2.03%;
        top: 2.5%;
        z-index: 100;
        width: 7.46%;
      }

      header a {
        display: block;
      }

      header a img {
        width: 100%;
      }

      .over {
        max-width: 41.67vw;
        width: 100%;
      }

      .sec1 {
        position: relative;
        height: 100vh;
        overflow: hidden;
      }

      .sec1 > img {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
      }

      .sec1 > img:nth-child(1) {
        max-width: 424px;
        width: 53.625%;
        top: 20.83vh;
      }
      .sec1 > img:nth-child(2) {
        max-width: 532px;
        width: 67.25%;
        left: 53%;
        top: 31.25vh;
      }
      .sec1 > img:nth-child(3) {
        max-width: 220px;
        width: 27.875%;
        top: 70vh;
      }
      .sec1 > img:nth-child(4) {
        max-width: 143px;
        width: 18.125%;
        top: 78vh;
      }

      .sec01Swiper {
        pointer-events: none;
      }

      .sec1 .sec01Swiper img {
        height: 100vh;
      }

      .sec1 .scrollBox {
        position: absolute;
        bottom: 5%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
      }

      .sec1 .scrollBox span {
        margin: 0 auto;
        display: block;
        width: 1px;
        height: 40px;
        background-color: #fff;
        animation: 2.3s linear 0s infinite normal none running scrollBar;
      }

      .sec1 .scrollBox img {
        animation: 2.3s linear 0s infinite normal none running scrollImg;
      }

      [data-title="transform"] {
        opacity: 0;
        z-index: 10;
        transition-duration: 0.5s;
        transform: translateY(20px);
      }

      .fadeIn {
        opacity: 1;
        transform: translateY(0);
      }

      @keyframes scrollBar {
        0% {
          transform: translateY(-10px);
        }
        50% {
          transform: translateY(-20px);
        }
        100% {
          transform: translateY(-10px);
        }
      }

      @keyframes scrollImg {
        0% {
          opacity: 0;
        }
        50% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }

      .sec2,
      .sec4,
      .sec24,
      .sec32 {
        height: 7.4vh;
        background-color: #000;
        position: relative;
      }

      .sec2 img,
      .sec4 img,
      .sec24 img,
      .sec32 img {
        position: absolute;
        top: 50%;
      }

      .sec2 .original,
      .sec4 .original,
      .sec24 .original,
      .sec32 .original {
        padding: 0 12px;
        animation: 10s linear 0s infinite normal forwards running rollingleft1;
      }

      .sec2 .clone,
      .sec4 .clone,
      .sec24 .clone,
      .sec32 .clone {
        padding: 0 12px;
        animation: 10s linear 0s infinite normal none running rollingleft2;
      }

      @keyframes rollingleft1 {
        0% {
          transform: translate(0, -50%);
        }
        50% {
          transform: translate(-100%, -50%);
        }
        50.01% {
          transform: translate(100%, -50%);
        }
        100% {
          transform: translate(0, -50%);
        }
      }

      @keyframes rollingleft2 {
        0% {
          transform: translate(100%, -50%);
        }
        100% {
          transform: translate(-100%, -50%);
        }
      }

      .sec3 {
        position: relative;
      }

      .sec3 .positionA {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        z-index: 1;
        transition-duration: 1s;
      }

      .sec3 .positionA.active {
        opacity: 1;
      }

      [data-title="transform"] {
        position: absolute;
      }

      .sec3 .title1 {
        top: 10.2%;
        left: 24.5%;
        width: 50.87%;
      }

      .sec3 .title2 {
        top: 77.91%;
        left: 13.375%;
        width: 73.375%;
      }

      .sec3 .title3 {
        top: 87%;
        left: 21%;
        width: 58.125%;
      }

      .sec5 img:nth-child(2) {
        width: 40.25%;
        right: 7.375%;
        top: 61.6%;
      }

      .video-container {
        position: relative;
        height: 0;
        padding-bottom: 177%;
        width: 100%;
      }

      .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

      .sec8 img:nth-child(2) {
        bottom: 13.33%;
        left: 8.875%;
        max-width: 476px;
        width: 59.5%;
      }

      .sec9 .positionA {
        max-width: 398px;
        width: 49.75%;
        left: 8.875%;
        bottom: 13.75%;
      }

      .sec11 .positionA2 {
        top: 10.66%;
        left: 14.625%;
        width: 73.875%;
      }

      .sec11 .positionA1 {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        z-index: 1;
        transition-duration: 1s;
      }

      .sec11 .positionA1.active {
        opacity: 1;
      }

      .sec12 .positionA {
        z-index: 10;
        width: 43.75%;
        left: 8.875%;
        bottom: 13.33%;
      }

      .sec14 .positionA {
        z-index: 10;
        width: 63.375%;
        right: 7.375%;
        bottom: 15.71%;
      }

      .sec15 .positionA {
        width: 68.375%;
        left: 8.625%;
        bottom: 13.16%;
      }

      .sec17 .positionA {
        width: 64%;
        left: 8.625%;
        bottom: 13.33%;
      }

      .sec18 .positionA {
        width: 43.625%;
        left: 8.625%;
        bottom: 13.33%;
      }

      .sec19 .positionA {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        z-index: 1;
        transition-duration: 1s;
      }

      .sec19 .positionA.active {
        opacity: 1;
      }

      .sec20 {
        overflow: hidden;
      }

      .sec20 .positionA {
        width: 54.125%;
        left: 8.625%;
        bottom: 13.33%;
      }

      .sec20 .original,
      .sec20 .clone {
        position: absolute;
        bottom: 0;
        left: 95%;
        width: 2.125%;
      }

      .sec20 .original {
        padding: 0 12px;
        animation: 20s linear 0s infinite normal forwards running rollingTop1;
      }

      .sec20 .clone {
        padding: 0 12px;
        animation: 20s linear 0s infinite normal none running rollingTop2;
      }

      @keyframes rollingTop1 {
        0% {
          transform: translate(-50%, 0);
        }
        50% {
          transform: translate(-50%, -100%);
        }
        50.01% {
          transform: translate(-50%, 100%);
        }
        100% {
          transform: translate(-50%, 0);
        }
      }

      @keyframes rollingTop2 {
        0% {
          transform: translate(-50%, 100%);
        }
        100% {
          transform: translate(-50%, -100%);
        }
      }

      .sec21 .positionA {
        width: 63%;
        left: 8.625%;
        bottom: 13.25%;
      }

      .sec22 .positionA1 {
        width: 49.625%;
        transform: translateX(-50%);
        left: 50%;
        top: 10.41%;
      }

      .sec22 .positionA2 {
        width: 69.125%;
        left: 15.5%;
        bottom: 13.25%;
      }

      .sec23 .positionA {
        width: 58.875%;
        left: 20.5%;
        top: 45.35%;
      }

      .sec24,
      .sec32 {
        background-color: #e4ff69;
      }

      .sec25 .positionA {
        width: 73.375%;
        transform: translateX(-50%);
        left: 50%;
        top: 13.11%;
      }

      .addBox div > img {
        cursor: pointer;
        z-index: 1;
      }

      .addBox div > img {
        position: absolute;
        object-fit: contain;
        width: 3.875%;
        height: auto;
      }

      .addBox .positionA2 {
        position: absolute;
      }

      .swiper-slide div .positionA2 {
        width: 37.5%;
        opacity: 0;
        pointer-events: none;
      }
      .swiper-slide div.active .positionA2 {
        opacity: 1;
        pointer-events: auto;
      }

      .sec27 .addBox .clickBox01 .positionA1 {
        top: 24.5%;
        right: 53.125%;
      }

      .sec27 .addBox .clickBox01 .positionA2 {
        top: 24.75%;
        right: 54.125%;
      }

      .sec27 .addBox .clickBox02 .positionA1 {
        bottom: 36.5%;
        left: 56.625%;
      }

      .sec27 .addBox .clickBox02 .positionA2 {
        bottom: 37%;
        left: 57.625%;
      }

      .sec27 .addBox .clickBox03 .positionA1 {
        bottom: 33.5%;
        right: 16.875%;
      }

      .sec27 .addBox .clickBox03 .positionA2 {
        bottom: 34%;
        right: 17.875%;
      }

      .sec27 .addBox .clickBox04 .positionA1 {
        bottom: 73.25%;
        right: 21.875%;
      }

      .sec27 .addBox .clickBox04 .positionA2 {
        bottom: 73.75%;
        right: 22.875%;
      }

      .sec27 .addBox .clickBox05 .positionA1 {
        bottom: 57.33%;
        left: 17.625%;
      }

      .sec27 .addBox .clickBox05 .positionA2 {
        bottom: 57.83%;
        left: 18.625%;
      }

      .sec27 .addBox .clickBox06 .positionA1 {
        top: 58.08%;
        right: 48.5%;
      }

      .sec27 .addBox .clickBox06 .positionA2 {
        top: 58.58%;
        right: 49.5%;
      }

      .sec27 .addBox .clickBox07 .positionA1 {
        bottom: 15.083%;
        right: 40.375%;
      }

      .sec27 .addBox .clickBox07 .positionA2 {
        bottom: 15.583%;
        right: 41.375%;
      }

      .sec28 .addBox .clickBox01 .positionA1 {
        bottom: 44.16%;
        right: 14.625%;
      }

      .sec28 .addBox .clickBox01 .positionA2 {
        bottom: 44.66%;
        right: 15.625%;
      }

      .sec28 .addBox .clickBox01 .positionA1 {
        bottom: 69.41%;
        left: 57.125%;
      }

      .sec28 .addBox .clickBox01 .positionA2 {
        bottom: 69.91%;
        left: 58.125%;
      }

      .sec28 .addBox .clickBox02 .positionA1 {
        bottom: 37.83%;
        right: 16.5%;
      }

      .sec28 .addBox .clickBox02 .positionA2 {
        bottom: 38.33%;
        right: 17.5%;
      }

      .sec28 .addBox .clickBox03 .positionA1 {
        bottom: 63.66%;
        right: 49.125%;
      }

      .sec28 .addBox .clickBox03 .positionA2 {
        bottom: 64.16%;
        right: 50.125%;
      }

      .sec28 .addBox .clickBox04 .positionA1 {
        bottom: 28.33%;
        left: 45.875%;
      }

      .sec28 .addBox .clickBox04 .positionA2 {
        bottom: 28.83%;
        left: 46.875%;
      }

      .sec29 .addBox .clickBox01 .positionA1 {
        bottom: 39.41%;
        left: 57.125%;
      }

      .sec29 .addBox .clickBox01 .positionA2 {
        bottom: 39.91%;
        left: 58.125%;
      }

      .sec29 .addBox .clickBox02 .positionA1 {
        bottom: 65.33%;
        right: 44.625%;
      }

      .sec29 .addBox .clickBox02 .positionA2 {
        bottom: 65.83%;
        right: 45.625%;
      }

      .sec29 .addBox .clickBox03 .positionA1 {
        bottom: 73.5%;
        right: 37.25%;
      }

      .sec29 .addBox .clickBox03 .positionA2 {
        bottom: 74%;
        right: 38.25%;
      }

      .sec29 .addBox .clickBox04 .positionA1 {
        top: 44.08%;
        right: 37.75%;
      }

      .sec29 .addBox .clickBox04 .positionA2 {
        top: 45.08%;
        right: 38.75%;
      }

      .sec29 .addBox .clickBox05 .positionA1 {
        bottom: 64.83%;
        left: 52.125%;
      }

      .sec29 .addBox .clickBox05 .positionA2 {
        bottom: 65.33%;
        left: 53.125%;
      }

      .sec29 .addBox .clickBox06 .positionA1 {
        bottom: 31.25%;
        left: 57.125%;
      }

      .sec29 .addBox .clickBox06 .positionA2 {
        bottom: 31.75%;
        left: 58.125%;
      }

      .sec30 .addBox .clickBox01 .positionA1 {
        bottom: 70.83%;
        right: 40.875%;
      }

      .sec30 .addBox .clickBox01 .positionA2 {
        bottom: 71.33%;
        right: 41.875%;
      }

      .sec30 .addBox .clickBox02 .positionA1 {
        bottom: 36.25%;
        left: 52.875%;
      }

      .sec30 .addBox .clickBox02 .positionA2 {
        bottom: 36.75%;
        left: 53.875%;
      }

      .sec30 .addBox .clickBox03 .positionA1 {
        bottom: 78.66%;
        right: 56.625%;
      }

      .sec30 .addBox .clickBox03 .positionA2 {
        bottom: 79.16%;
        right: 57.625%;
      }

      .sec30 .addBox .clickBox04 .positionA1 {
        bottom: 44.66%;
        left: 34.5%;
      }

      .sec30 .addBox .clickBox04 .positionA2 {
        bottom: 45.16%;
        left: 35.5%;
      }

      /* fin.sec27 */
      .sec31 .positionA {
        width: 73.375%;
        left: 50%;
        transform: translateX(-50%);
        top: 13.11%;
      }

      .sec33 .positionA {
        transform: translateX(-50%);
        left: 50%;
      }

      .sec33 .positionA1 {
        width: 27.875%;
        top: 16.83%;
      }

      .sec33 .positionA2 {
        width: 82.625%;
        top: 26.83%;
      }

      .sec33 .positionA3 {
        width: 24.375%;
        top: 60.41%;
      }

      .sec33 .positionA4 {
        width: 57%;
        top: 68.5%;
      }

      .sec33 .positionA5 {
        width: 57%;
        bottom: 13.16%; /*원래 79%였음 액티브버튼 빠지면서 다미수정*/
      }

      .sec34 .positionA1 {
        width: 100%;
        top: 0;
        left: 0;
      }

      .sec34 .positionA2 {
        width: 57%;
        bottom: 18.5%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
      }

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
/* BASIC css end */