/* BASIC css start */
.disc_in .dc_info{
    color: #5F0080 !important;
    font-weight: 700;
    font-size: 15px;
    padding-left: 8px;
}



/*sec001 */

.sec001{width:100%; margin:0 auto 120px;position:relative;padding: 0 45px; box-sizing: border-box;}
.sec001 h3{color: #1B1B1B;letter-spacing: -0.02em;font-weight: 600;font-size: 27px;line-height: 27px;margin:70px 0 35px; }

.sec001 .normal_item:nth-child(4n){margin-right:20px !important;}
.sec001 .swiper-button-next,.sec001 .swiper-button-prev{width:80px;height:78px;}
.sec001 .swiper-button-next::after,.sec001 .swiper-button-prev::after{display:none;}
.sec001 .swiper-button-next{background:url(/design/jstyle07/wib/img_pc/main/pnext.svg) no-repeat;background-position:center;right:-92px; transform: translateY(-50%);}
.sec001 .swiper-button-prev{background:url(/design/jstyle07/wib/img_pc/main/pprev.svg) no-repeat;background-position:center;left:-92px; transform: translateY(-50%);}

.sec001 .list{font-size:0; display: flex; flex-wrap: wrap;}
.sec001 .list>div{width:calc(33.33% - 15px);margin-right:20px;} 
.sec001 .list>div:nth-child(3n){margin-right:0 !important;}

#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 > *{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;
      }


      /* 추가 분할 페이지 */
      .eventBox {
        position: fixed;
        max-width: 95px;
        width: 4.94%;
        left: 35.1%;
        bottom: 4.416%;
        z-index: 1000;
      }

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

      .scrollBox {
        overflow: hidden;
      }

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

      .positionR {
        position: relative;
      }

      .positionA {
        position: absolute;
        z-index: 10;
      }

      #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: 6px;
      }

      .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 {
        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: 16px;
        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: 8%;
      }

      header a {
        display: block;
      }

      header a img {
        width: 100%;
      }

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

      .sec1 {
        position: relative;
        overflow: hidden;
      }

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

      .sec1 > img:nth-child(1) {
        width: 53.625%;
        top: 18.33%;
      }
      .sec1 > img:nth-child(2) {
        width: 67.25%;
        top: 32.91%;
        left: 53%;
        max-width: 450px;
      }
      .sec1 > img:nth-child(3) {
        width: 41%;
        top: 66.5%;
      }
      .sec1 > img:nth-child(4) {
        width: 18.75%;
        top: 81.83%;
      }
      .sec1 > img:nth-child(5) {
        object-fit: cover;
        height: 100%;
        position: static;
        transform: translateX(0);
      }

      .sec01Swiper {
        pointer-events: none;
      }

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

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

      .sec1 .scrollBox span {
        margin: 0 auto;
        display: block;
        width: 1px;
        height: 30px;
        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);
      }

      [data-titCenter="transform"] {
        opacity: 0;
        left: 50%;
        z-index: 10;
        transition-duration: 0.5s;
        transform: translate(-50%, 20px);
      }

      .fadeInCenter {
        transform: translate(-50%, 0);
        opacity: 1;
      }

      .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,
      .sec11,
      .sec13,
      .sec23,
      .sec28,
      .sec33 {
        height: 7.4vh;
        background-color: #5fcdff;
        position: relative;
      }

      .sec2 img,
      .sec4 img,
      .sec11 img,
      .sec13 img,
      .sec23 img,
      .sec28 img,
      .sec33 img {
        position: absolute;
        top: 50%;
      }

      .sec2 .original,
      .sec4 .original,
      .sec11 .original,
      .sec13 .original,
      .sec23 .original,
      .sec28 .original,
      .sec33 .original {
        padding: 0 12px;
        animation: 10s linear 0s infinite normal forwards running rollingleft1;
      }

      .sec2 .clone,
      .sec4 .clone,
      .sec11 .clone,
      .sec13 .clone,
      .sec23 .clone,
      .sec28 .clone,
      .sec33 .clone {
        padding: 0 12px;
        animation: 10s linear 0s infinite normal none running rollingleft2;
      }

      .sec37,
      .sec39 {
        height: 7.4vh;
        background: url("//jstyle07.jpg3.kr/SITE/EVENT/2023/runlog2/rollerBg.png")
          no-repeat center / cover;
        position: relative;
      }

      .sec37 img,
      .sec39 img {
        position: absolute;
        top: 50%;
      }

      .sec37 .original,
      .sec39 .original {
        padding: 0 12px;
        animation: 10s linear 0s infinite normal forwards running rollingleft1;
      }

      .sec37 .clone,
      .sec39 .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 .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;
      }

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

      .sec3 .title1 {
        top: 13.41%;
        left: 8.5%;
        width: 44.125%;
      }

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

      .sec5 img:nth-child(2) {
        width: 55.875%;
        right: 7.5%;
        bottom: 15.714%;
      }

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

      .sec7 .video-container {
        padding-bottom: 56.1%;
      }

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

      .sec8 img:nth-child(2) {
        top: 22.58%;
        right: 8.875%;
        width: 59.125%;
      }

      .sec8 img:nth-child(3) {
        bottom: 6.666%;
        left: 8.875%;
        width: 78.875%;
      }

      .sec8 img:nth-child(4) {
        top: 13.33%;
        left: 8.625%;
        width: 57.25%;
      }

      .sec9 .positionA {
        bottom: 13.33%;
        left: 8.625%;
        width: 48.75%;
      }

      .sec10 .positionA {
        bottom: 13.33%;
        left: 8.625%;
        width: 48.75%;
      }

      .sec11 .positionA2 {
        top: 10.66%;
        left: 8.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 img:nth-child(2) {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        z-index: 1;
        transition-duration: 1s;
      }

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

      .sec12 img:nth-child(3) {
        width: 66.5%;
        right: 7.5%;
        top: 20.357%;
      }

      .sec14 .positionA {
        z-index: 10;
        width: 33.375%;
        left: 8.625%;
        bottom: 13.333%;
      }

      .sec15 .positionA {
        bottom: 13.33%;
        left: 8.625%;
        width: 52.625%;
      }

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

      .sec16 img:nth-child(2) {
        width: 55.875%;
        right: 7.5%;
        bottom: 15.714%;
      }

      .sec18 img:nth-child(2) {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        z-index: 1;
        transition-duration: 1s;
      }

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

      .sec19 .positionA {
        z-index: 10;
        width: 44.875%;
        left: 8.25%;
        bottom: 13.5%;
      }

      .sec20 .positionA {
        width: 50.875%;
        left: 8.625%;
        bottom: 13.16%;
      }

      .sec21 .positionA {
        width: 55%;
        left: 8.625%;
        bottom: 13.16%;
      }

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

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

      .sec24 img:nth-child(2) {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        z-index: 1;
        transition-duration: 1s;
      }

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

      .sec24 img:nth-child(3) {
        width: 73%;
        top: 8.16%;
      }

      .sec25 img:nth-child(2) {
        width: 54.5%;
        left: 9.375%;
        top: 9%;
      }

      .sec25 img:nth-child(3) {
        width: 35.875%;
        right: 5%;
        top: 23%;
        z-index: 11;
      }

      .sec25 img:nth-child(4) {
        width: 47.375%;
        left: 6.75%;
        top: 32.2%;
        z-index: 11;
      }

      .sec25 img:nth-child(5) {
        width: 29.25%;
        left: 34%;
        top: 45.73%;
        z-index: 10;
      }

      .sec25 img:nth-child(6) {
        width: 30.375%;
        left: 6.75%;
        top: 59.93%;
        z-index: 9;
      }

      .sec25 img:nth-child(7) {
        width: 40.625%;
        right: 6.625%;
        top: 71.53%;
        z-index: 9;
      }

      .sec25 img:nth-child(8) {
        width: 40.625%;
        left: 16%;
        top: 75.4%;
        z-index: 10;
      }

      .sec26 .positionA {
        z-index: 10;
        width: 59.125%;
        left: 8.25%;
        bottom: 13.5%;
      }

      .sec27 img:nth-child(2) {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        z-index: 1;
        transition-duration: 1s;
      }

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

      .sec27 img:nth-child(3) {
        width: 57.25%;
        left: 8.25%;
        bottom: 13.5%;
      }

      .sec29 .positionA {
        z-index: 10;
        width: 75.25%;
        left: 50%;
        bottom: 50%;
        transform: translate(-50%, 50%);
      }

      .sec34 .positionA {
        z-index: 10;
        width: 67.75%;
        left: 8.25%;
        bottom: 13.5%;
      }

      .sec35 .positionA {
        z-index: 10;
        width: 54.5%;
        right: 8.25%;
        bottom: 13.5%;
      }

      .sec38 img:nth-child(2) {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        z-index: 1;
        transition-duration: 1s;
      }

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

      .sec40 ol {
        display: flex;
        top: 11.02%;
        left: 8.125%;
        width: 61.875%;
      }

      .sec40 ol li {
        justify-content: left;
        width: 33.33%;
        transform: translateY(14.92%);
        cursor: pointer;
      }

      .sec40 ol li.active {
        transform: translateY(0);
      }

      .sec40 ol li img {
        width: 100%;
        transition-duration: 0.2s;
      }

      .sec40 ol li img:nth-child(2) {
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
      }

      .sec40 ol li.active img:nth-child(2) {
        opacity: 1;
      }

      .sec40 ul {
        width: 83.625%;
        top: 16.5%;
        left: 50%;
        transform: translateX(-50%);
      }

      .sec40 ul li {
        display: none;
      }

      .sec40 ul li.active {
        z-index: 2;
        display: block;
      }

      .sec40 ul li a:nth-child(2) {
        position: absolute;
        width: 68.16%;
        bottom: 9.8%;
        left: 50%;
        transform: translateX(-50%);
      }

      .sec41 img:nth-child(2) {
        width: 41%;
        top: 17.916%;
        left: 50%;
        transform: translateX(-50%);
      }

      .sec41 img:nth-child(3) {
        width: 86.875%;
        top: 37.16%;
        left: 50%;
        transform: translateX(-50%);
      }

      .sec41 :nth-child(4) {
        width: 58.375%;
        top: 67.08%;
        left: 50%;
        transform: translateX(-50%);
      }

      .sec41 :nth-child(5) {
        width: 58.375%;
        top: 77.5%;
        left: 50%;
        transform: translateX(-50%);
      }
/* BASIC css end */