/* BASIC css start */
h2.tit{
    font-size: 18px;
    padding: 20px 0 30px 20px;
}

.pro_icons{
    display: none;
}

/* swiper */
      .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;
      }
      
      
/* style css */
      .eventBox {
        position: fixed;
        max-width: 138px;
        width: 17.25%;
        right: 3.875%;
        bottom: 4.416%;
        z-index: 10;
      }

      .eventBox a,
      .eventBox img {
        display: block;
        width: 100%;
      }

      .scrollBox {
        overflow: hidden;
      }

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

      .positionR {
        position: relative;
      }

      .positionA {
        position: absolute;
      }

      #prdBrand {
        position: relative;
      }

      .cut_lay {
        width: auto;
      }

      .overBox {
        overflow-x: hidden;
        left: 0;
        top: 0;
      }

      .item-wrap {
        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;
      }

      .over {
        max-width: 800px;
        width: 100%;
        margin: 0 auto;
      }

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

      header {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        top: 2.5%;
        z-index: 100;
        max-width: 640px;
        width: 100%;
        margin: 0 auto;
      }

      header a {
        width: 18%;
        display: block;
        margin-left: 4%;
      }

      header a img {
        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: 400px;
        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: 5%;
        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;
      }

      img.contain{
        object-fit: contain;
      }






    /* 다미 임의 추가 */
    .list_shopping2x ul{padding:0; margin-bottom: 100px;}
    .list_shopping2x li a{padding:1px;padding-bottom:0}
    .list_shopping2x .list_shoppingInfo{margin-top:12px!important;padding:0 8px}
    .list_shoppingInfo{margin-top:15px!important;padding:0 12px 0 4px;text-align:left!important}
    .list_shoppingInfo .listName,.SMS_base_mask .name{color:#000;font-weight:400;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .list_shoppingInfo .listPrice,.SMS_base_mask .price{font-weight:700;margin:5px 0 0;font-size:13px;display:inline-block;vertical-align:middle;margin-right:4px}
    .list_shoppingInfo .listDiscount{display:inline-block;vertical-align:top;font-size:11px;color:#aaa !important;text-decoration:line-through;display:inline-block;vertical-align:middle;margin:5px 0 0}
    .list_shoppingInfo .listDiscount.consumer{color:#aaa !important;}
    .list_shoppingInfo .consumer,.SMS_base_mask .priceStrike{font-size:11px;color:#aaa;text-decoration:line-through;display:inline-block;vertical-align:middle;margin:5px 0 0}
    .list_shoppingInfo .subName,.SMS_base_mask .subname{font-size:11px;color:#aaa !important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;margin-top:5px}
    .slick-slide img{display:block}
    .list_shopping1x .thumb_wrap_slider,body .list_shopping2x .thumb_wrap_slider,body .list_shopping3x .thumb_wrap_slider,body .best_product .thumb_wrap{position:relative}
    .SMS_base_img .thumb img{width:100%}
    .list_shopping1x .thumb_wrap_slider .pro_icons,body .list_shopping2x .thumb_wrap_slider .pro_icons,body .list_shopping3x .thumb_wrap_slider .pro_icons,body .best_product .thumb_wrap .MK-product-icons{position:absolute;bottom:0;left:1px;z-index:2}
    .list_shopping1x .thumb_wrap_slider .pro_icons img,body .list_shopping2x .thumb_wrap_slider .pro_icons img,body .list_shopping3x .thumb_wrap_slider .pro_icons img,body .best_product .thumb_wrap .MK-product-icons img{height:18px!important;width:auto;float:left}
    .list_shopping1x .thumb_wrap_slider .MK-product-icons img,body .list_shopping2x .thumb_wrap_slider .MK-product-icons img,body .list_shopping3x .thumb_wrap_slider .MK-product-icons img,body .best_product .thumb_wrap .MK-product-icons img{padding:0 0 0 0;vertical-align:top;display:inline-block;vertical-align:bottom;height:18px!important;width:auto}
    .MK-discount-icon{width:17px!important;height:17px!important}
    .thumb_wrap .slick-prev{display:none!important}
    .thumb_wrap .slick-next{background:url(/design/jstyle07/wib/img/icon/thump_arrow_next.png) no-repeat center center;width:20px;height:20px;background-size:100%;position:absolute;right:0;bottom:9px;background-color:transparent;border:0;z-index:2;display:none}
    .color_wrap{overflow:hidden;margin:6px 0 30px}
    .color_wrap>span{display:block;float:left;width:12px;height:5px;margin:0 2px 3px;border:1px solid #eaeaea;box-sizing:border-box;}
    .color_wrap>span.white{border-color:#b3b3b3;width:12px;height:6px}
    .list_shoppingInfo .dc_info,html .list_shoppingInfo .dc_perc{color: #512772 !important;display:inline-block;
        margin: 5px 0 0 5px;
        vertical-align: middle;
        font-size: 13px;
        font-weight: bold;
    }
    .tit {
        margin-top: 30px;
    }

    /* 다미 임의 추가 끝 */
/* BASIC css end */