/* BASIC css start */
.goBtn{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: clamp(250px, 78.125vw, 500px);
    background-color: black;
    color: #fff;
    padding: clamp(15px, 4.6875vw, 30px) 0;
    margin: clamp(20px, 6.25vw, 40px) auto 0;
    font-size: clamp(11px, 3.4375vw, 22px);
    line-height: clamp(15px, 4.6875vw, 30px);
}

.list_shopping2x{text-align: left;}

.list_shopping2x h2{
    text-transform: uppercase;
    font-size: 1.2em;
    font-weight: 300;
    padding: 10px;
    border-top: 1px solid #737373;
    border-bottom: 1px solid #737373;
    width: calc(100% - 4px);
    margin: 55px auto 25px;
    box-sizing: border-box;
}

html .list_shoppingInfo .dc_perc,
html .list_shoppingInfo .dc_info{
    color: #512772 !important;
    font-weight: bold !important;
}

body .list_shoppingInfo .listPrice{margin: 0 !important;}
body .list_shoppingInfo .consumer{margin: 0 !important;}

body .list_shopping2x .thumb_wrap_slider .pro_icons{
    position: static !important;
}

.styleLogWrap .topSwiper::after{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
}

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

.styleLogWrap .centerSwiper {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 31.2666%;
    width: 100%;
    max-width: 1250px;
    padding: 0 0 24%;
    overflow: visible;
    overflow-x: clip;
}

.styleLogWrap .slideWrap {
    position: relative;
}

.styleLogWrap .centerSwiper .swiper-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: .2s;
    filter: brightness(50%);
    transform: scale(1);
}

.styleLogWrap .centerSwiper .swiper-slide img {
    display: block;
    width: 100%;
}

.styleLogWrap .centerSwiper .swiper-slide-active {
    transform: scale(1.26376);
    z-index: 10;
    filter: brightness(100%)
}

.styleLogWrap .centerSwiper .swiper-horizontal>.swiper-pagination-bullets,
.styleLogWrap .centerSwiper .swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: 0;
    transform: scale(1.2) translateX(-50%);
}

.styleLogWrap .centerSwiper .swiper-pagination-bullet-active {
    background: #000;
}

/* slide2 */
.styleLogWrap .cardSwiper {
    position: absolute;
    width: calc(100% - 5.75%);
    top: 30.1666%;
    left: 0;
    padding: 0 0 4.75% 5.75%;
}

.styleLogWrap .cardSwiper .swiper-wrapper {
    width: 52.625%;
}

.styleLogWrap .swiper-horizontal>.swiper-pagination-progressbar,
.styleLogWrap .swiper-pagination-progressbar.swiper-pagination-horizontal {
    top: auto;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 88.125%;
}

.styleLogWrap .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: #000;
}

/* 무한 롤릴 애니메이션 */
.rollingBox .overImg01,
.rollingBox .overImg02,
.rollingBox .overImg03 {
    position: absolute;
    z-index: 1;
}

.rollingBox .overImg01 {
    width: 88.5%;
    left: 50%;
    transform: translateX(-50%);
    top: 25.555555%;
    z-index: 1;
}

.rollingBox {
    position: relative;
}

.rollringIng {
    position: absolute;
    top: 30.238%;
    left: 50%;
    transform: translateX(-50%);
    width: 88.5%;
    overflow: hidden;
    background-color: #000;
}

.rollringIng::after {
    content: '';
    display: block;
    width: 100%;
    padding-bottom: 70.62146%;
}

.rollringIng .roller {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: auto;
    max-width: none;
}

.roller.original {
    animation: 18s linear 0s infinite normal forwards running rollingleft1;
}

.roller.clone {
    animation: 18s linear 0s infinite normal forwards running rollingleft2;
}

@keyframes rollingleft1 {

    /* 원본용 */
    0% {
        transform: translateX(0);
    }

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

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

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

@keyframes rollingleft2 {

    /* 클론용 */
    0% {
        transform: translateX(100%);
    }

    50% {
        transform: translateX(0);
    }

    50.01% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}
/* BASIC css end */