/* BASIC css start */
    .linkBox001 a {
        width: 100%;
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        background-color: #000;
        font-size: 22px;
    }

    /* 상품 영역 */
    .product_wrap h2 {
        padding: 40px 0 30px;
        font-size: 20px;
        font-family: "NanumGothic";
        font-weight: 700;
    }

    .sec001 {
        width: 100%;
        margin: 0;
        position: relative;
        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;
    }

    /* 공통 상품 기본폼 */
    .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;
    }

    .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;
    }

    /* 상품 영역 끝 */
    body{
        max-height: 100vh;
        overflow-y: hidden;
    }

    .twoScreenWrap .product_wrap>div {
        margin: 0 auto;
        padding: 0 5%;
        box-sizing: border-box;
    }

    .twoScreenWrap .product_wrap>div h1 {
        margin-top: 30px;
    }

    .twoScreenWrap .product_wrap>div h1 img {
        width: 160px;
        filter: invert(100%);
    }

    html body img {
        max-width: none;
    }

    .styleLog_wrap {
        max-width: 800px;
        width: 100%;
        margin: 0 auto;
        overflow-x: hidden;
    }

    .styleLog_wrap img {
        display: block;
        width: 100%;
    }

    .styleLog_wrap>div {
        position: relative;
    }

    .styleLog_wrap .sec01>img:nth-child(n+2) {
        position: absolute;
        animation: 3s linear 0s infinite normal forwards running scale;
        transform: scale(0);
    }

    .styleLog_wrap .sec01>img:nth-child(2) {
        width: 4.125%;
        top: 4.6206896%;
        left: 21.25%;
        animation: 2s linear 0.2s infinite normal forwards running scale;
    }

    .styleLog_wrap .sec01>img:nth-child(3) {
        width: 2.625%;
        top: 20.827586%;
        left: 19.5%;
        animation: 1.6s linear 0.4s infinite normal forwards running scale;
    }

    .styleLog_wrap .sec01>img:nth-child(4) {
        width: 4.125%;
        top: 9.379310%;
        left: 83.875%;
        animation: 1.8s linear 0.6s infinite normal forwards running scale;
    }

    .styleLog_wrap .sec01>img:nth-child(5) {
        width: 1%;
        top: 9.448275%;
        left: 10.5%;
        animation: 1s linear 0.2s infinite normal forwards running scale;
    }

    .styleLog_wrap .sec01>img:nth-child(6) {
        width: 1%;
        top: 6.275862%;
        left: 78.5%;
        animation: 1s linear 0.6s infinite normal forwards running scale;
    }

    .styleLog_wrap .sec01>img:nth-child(7) {
        width: 1%;
        top: 22.4137931%;
        left: 78.75%;
        animation: 1s linear 0.4s infinite normal forwards running scale;
    }

    @keyframes scale {
        0% {
            transform: scale(0);
        }

        50% {
            transform: scale(1);
        }

        100% {
            transform: scale(0);
        }
    }

    .styleLog_wrap .sec01 {
        overflow: hidden;
    }

    .styleLog_wrap .sec01 .rollingWrap {
        position: absolute;
        top: 31.75862%;
        left: 0;
        height: 55.03448275%;
        width: 100%;
    }

    .styleLog_wrap .sec01 .rollingWrap img {
        position: absolute;
        left: 0;
        right: 0;
        height: 100%;
        width: auto;
        object-fit: cover;
    }

    .styleLog_wrap .sec01 .rollingWrap .original {
        animation: 24s linear 0s infinite normal forwards running rollingleft1;
    }

    .styleLog_wrap .sec01 .rollingWrap .clone {
        animation: 24s linear 0s infinite normal none running rollingleft2;
    }

    @keyframes rollingleft1 {
        0% {
            transform: translateX(0);
        }

        50% {
            transform: translateX(-50%);
        }

        50.01% {
            transform: translateX(50%);
        }

        100% {
            transform: translateX(0);
        }
    }

    @keyframes rollingleft2 {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-100%);
        }
    }

    .styleLog_wrap .sec02 .imgWrap {
        position: absolute;
        top: 10.947368%;
        left: 50%;
        transform: translateX(-50%);
        width: 94.125%;
        height: 35.263157%;
        z-index: 1;
        display: flex;
        justify-content: space-between;
    }

    .styleLog_wrap .sec02 .imgWrap img {
        width: 32.403718%;
    }

    .styleLog_wrap .sec03 .imgWrap {
        position: absolute;
        top: 0%;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .styleLog_wrap .sec03 .imgWrap>* {
        position: absolute;
        opacity: 0;
        transform: translateY(40px);
        transition: all .7s ease;
        width: 30%;
    }

    .styleLog_wrap .sec03 .imgWrap div img {
        width: 100%;
        opacity: 0;
        transition: all .7s ease;
    }

    .styleLog_wrap .sec03 .imgWrap div.act img {
        width: 100%;
        opacity: 1;
    }

    .styleLog_wrap .sec03 .imgWrap div {
        width: 72%;
        top: 25.773195%;
        right: 24.875%;
    }

    .styleLog_wrap .sec03 .imgWrap>img:nth-child(2) {
        width: 56.125%;
        top: 54.0721649%;
        right: 1.625%;
    }

    .styleLog_wrap .sec03 .imgWrap>img:nth-child(3) {
        width: 45.125%;
        top: 73.8144329%;
        right: 60.25%;
    }

    .styleLog_wrap .sec03 .imgWrap>*.act {
        opacity: 1;
        transform: translateY(0);
    }

    .styleLog_wrap .sec04 a {
        width: 65.75%;
        position: absolute;
        left: 50%;
        bottom: 3.76712%;
        transform: translateX(-50%);
    }

    .styleLog_wrap .sec05 {
        background-color: #000;
    }

    .styleLog_wrap .sec05 img:nth-child(n + 2) {
        position: absolute;
        left: 0;
        top: 0;
    }

    .styleLog_wrap .sec05 img {
        opacity: 0;
        transition: .3s;
    }

    .styleLog_wrap .sec05 img:nth-child(1) {
        opacity: 1;
    }

    .styleLog_wrap .sec05 img.act {
        opacity: 1;
    }

    .styleLog_wrap .sec06 .imgWrap {
        position: absolute;
        top: 0%;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .styleLog_wrap .sec06 .imgWrap>* {
        position: absolute;
        opacity: 0;
        transform: translateY(40px);
        transition: all .7s ease;
        width: 30%;
    }

    .styleLog_wrap .sec06 .imgWrap div img {
        width: 100%;
        opacity: 0;
        transition: all .7s ease;
    }

    .styleLog_wrap .sec06 .imgWrap div.act img {
        width: 100%;
        opacity: 1;
    }

    .styleLog_wrap .sec06 .imgWrap div {
        width: 66.25%;
        top: 33.087248%;
        left: 3.125%;
    }

    .styleLog_wrap .sec06 .imgWrap>img:nth-child(2) {
        width: 48.375%;
        top: 61.47651%;
        left: 45.5%;
    }

    .styleLog_wrap .sec06 .imgWrap>*.act {
        opacity: 1;
        transform: translateY(0);
    }

    .styleLog_wrap .sec07 a {
        width: 65.75%;
        position: absolute;
        left: 50%;
        bottom: 5.445544%;
        transform: translateX(-50%);
    }

    .styleLog_wrap .sec08 img:nth-child(n + 2) {
        position: absolute;
        left: 0;
        top: 0;
    }

    .styleLog_wrap .sec08 img {
        opacity: 0;
        transition: .3s;
    }

    .styleLog_wrap .sec08 img:nth-child(1) {
        opacity: 1;
    }

    .styleLog_wrap .sec08 img.act {
        opacity: 1;
    }

    .styleLog_wrap .sec09 img:nth-child(2) {
        position: absolute;
        width: 91.625%;
        left: 50%;
        transform: translate(-50%, -30px);
        bottom: 4.5454545%;
        opacity: 0;
        transition-duration: .2s;
    }

    .styleLog_wrap .sec09 img:nth-child(2).act {
        opacity: 1;
        transform: translate(-50%, 0);
        transition-duration: .2s;
    }

    .styleLog_wrap .sec10>img:nth-child(n+2) {
        position: absolute;
        width: 49%;
        transform: translate(0, 30px);
        opacity: 0;
        transition-duration: .2s;
        bottom: 10.625%;
    }

    .styleLog_wrap .sec10>img:nth-child(2) {
        left: 1%;
    }

    .styleLog_wrap .sec10>img:nth-child(3) {
        right: 1%;
    }

    .styleLog_wrap .sec10>img:nth-child(n+2).act {
        opacity: 1;
        transform: translate(0, 0);
        transition-duration: .2s;
    }

    .styleLog_wrap .sec11 a {
        width: 65.75%;
        position: absolute;
        left: 50%;
        bottom: 4.75%;
        transform: translateX(-50%);
    }

    .styleLog_wrap .sec12 img:nth-child(n + 2) {
        position: absolute;
        left: 0;
        top: 0;
    }

    .styleLog_wrap .sec12 img {
        opacity: 0;
        transition: .3s;
    }

    .styleLog_wrap .sec12 img:nth-child(1) {
        opacity: 1;
    }

    .styleLog_wrap .sec12 img.act {
        opacity: 1;
    }

    .styleLog_wrap .sec13 .imgWrap {
        position: absolute;
        top: 0%;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .styleLog_wrap .sec13 .imgWrap>* {
        position: absolute;
        opacity: 0;
        transform: translateY(40px);
        transition: all .7s ease;
        width: 30%;
    }

    .styleLog_wrap .sec13 .imgWrap div img {
        width: 100%;
        opacity: 0;
        transition: all .7s ease;
    }

    .styleLog_wrap .sec13 .imgWrap div.act img {
        width: 100%;
        opacity: 1;
    }

    .styleLog_wrap .sec13 .imgWrap div {
        width: 66.25%;
        top: 32.26439%;
        left: 3.125%;
    }

    .styleLog_wrap .sec13 .imgWrap>img:nth-child(2) {
        width: 48.375%;
        top: 59.947643%;
        left: 45.5%;
    }

    .styleLog_wrap .sec13 .imgWrap>*.act {
        opacity: 1;
        transform: translateY(0);
    }

    .styleLog_wrap .sec14 a {
        width: 65.75%;
        position: absolute;
        left: 50%;
        bottom: 6.428571%;
        transform: translateX(-50%);
    }

    .styleLog_wrap .sec15 img:nth-child(n + 2) {
        position: absolute;
        left: 0;
        top: 0;
    }

    .styleLog_wrap .sec15 img {
        opacity: 0;
        transition: all .3s ease;
    }

    .styleLog_wrap .sec15 img:nth-child(1) {
        opacity: 1;
    }

    .styleLog_wrap .sec15 img.act {
        opacity: 1;
    }

    .styleLog_wrap .sec17 img:nth-child(2) {
        position: absolute;
        width: 91.625%;
        left: 50%;
        transform: translate(-50%, -30px);
        bottom: 4.5454545%;
        opacity: 0;
        transition-duration: .2s;
    }

    .styleLog_wrap .sec17 img:nth-child(2).act {
        opacity: 1;
        transform: translate(-50%, 0);
        transition-duration: .2s;
    }

    .styleLog_wrap .sec18 img:nth-child(2) {
        position: absolute;
        width: 85%;
        left: 50%;
        transform: translate(-50%, 30px);
        bottom: 10.95238%;
        opacity: 0;
        transition-duration: .2s;
    }

    .styleLog_wrap .sec18 img:nth-child(2).act {
        opacity: 1;
        transform: translate(-50%, 0);
        transition-duration: .2s;
    }

    .styleLog_wrap .sec19 .imgWrap {
        position: absolute;
        top: 0%;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .styleLog_wrap .sec19 .imgWrap>* {
        position: absolute;
        opacity: 0;
        transform: translateY(40px);
        transition: all .7s ease;
        width: 30%;
    }

    .styleLog_wrap .sec19 .imgWrap>img:nth-child(1) {
        width: 61.375%;
        bottom: 4.14893617%;
        right: 37.25%;
    }

    .styleLog_wrap .sec19 .imgWrap>img:nth-child(2) {
        width: 44.375%;
        bottom: 37.6595744%;
        right: 7.75%;
    }

    .styleLog_wrap .sec19 .imgWrap>*.act {
        opacity: 1;
        transform: translateY(0);
    }

    .styleLog_wrap .sec20 a {
        width: 65.75%;
        position: absolute;
        left: 50%;
        bottom: 9.3877551%;
        transform: translateX(-50%);
    }

    .styleLog_wrap .sec21 img:nth-child(n + 2) {
        position: absolute;
        left: 0;
        top: 0;
    }

    .styleLog_wrap .sec21 img {
        opacity: 0;
        transition: all .3s ease;
    }

    .styleLog_wrap .sec21 img:nth-child(1) {
        opacity: 1;
    }

    .styleLog_wrap .sec21 img.act {
        opacity: 1;
    }

    .styleLog_wrap .sec23 .imgWrap {
        position: absolute;
        top: 0%;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .styleLog_wrap .sec23 .imgWrap>* {
        position: absolute;
        opacity: 0;
        transform: translateY(40px);
        transition: all .7s ease;
        width: 30%;
    }

    .styleLog_wrap .sec23 .imgWrap>img:nth-child(1) {
        width: 44.375%;
        top: 4.21052631%;
        right: 50%;
    }

    .styleLog_wrap .sec23 .imgWrap>img:nth-child(2) {
        width: 61.375%;
        bottom: 5.7%;
        right: 1.125%;
    }

    .styleLog_wrap .sec23 .imgWrap>*.act {
        opacity: 1;
        transform: translateY(0);
    }

    .styleLog_wrap .sec24 a {
        width: 65.75%;
        position: absolute;
        left: 50%;
        bottom: 5.7%;
        transform: translateX(-50%);
    }

    .styleLog_wrap .sec25 img:nth-child(n + 2) {
        position: absolute;
        left: 0;
        top: 0;
    }

    .styleLog_wrap .sec25 img {
        opacity: 0;
        transition: all .3s ease;
    }

    .styleLog_wrap .sec25 img:nth-child(1) {
        opacity: 1;
    }

    .styleLog_wrap .sec25 img.act {
        opacity: 1;
    }

    /* 분리 작업 */
    .twoScreenWrap {
        container-name: main-container;
        container-type: inline-size;
    }

    .twoScreenWrap::after {
        content: '';
        display: block;
        clear: both;
    }

    @container main-container (min-width: 1100px) {
        .twoScreenWrap .styleLog_wrap {
            float: left;
            width: 30%;
            max-width: 700px;
            height: 100vh;
            overflow-y: scroll;
        }

        .twoScreenWrap .product_wrap {
            float: right;
            width: 70%;
            height: 100vh;
            overflow-y: scroll;
        }

        .styleLog_wrap::-webkit-scrollbar,
        .product_wrap::-webkit-scrollbar {
            width: 6px;
        }

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

        .styleLog_wrap:hover::-webkit-scrollbar-track,
        .product_wrap:hover::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.1);
        }
    }
/* BASIC css end */