/* BASIC css start */
/* º°µµ css */

.bestarchiveWrap{max-width: 900px; margin: 0 auto;}


/* º°µµ css */








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

.bestarchiveWrap>div {
    position: relative;
    overflow: hidden;
}

.bestarchiveWrap .rollingImg img {
    width: auto;
    object-fit: cover;
}

.bestarchiveWrap .rollingImg1 {
    display: flex;
    position: absolute;
    bottom: 38.540899042%;
    left: 0;
    height: 21.73913043478%;
}

.bestarchiveWrap .rollingImg1 .roller.original {
    animation: 50s linear 0s infinite normal forwards running rollingleft1;
    height: 100%;
}

.bestarchiveWrap .rollingImg1 .roller.clone {
    animation: 50s linear 0s infinite normal none running rollingleft2;
    height: 100%;
}

.bestarchiveWrap .sec01 .rollingImg2 {
    display: flex;
    position: absolute;
    bottom: 34.46647%;
    left: 0;
    height: 28.29771554901%;
}

.bestarchiveWrap .sec01 .rollingImg2 .roller.original {
    height: 100%;
    transform: translateX(-5%);
}

@keyframes rollingleft1 {

    /* ¿øº»¿ë */
    0% {
        transform: translateX(0);
    }

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

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

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

@keyframes rollingleft2 {

    /* Ŭ·Ð¿ë */
    0% {
        transform: translateX(0);
    }

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

.bestarchiveWrap .sec02{
    position: relative;
}

.bestarchiveWrap .sec02 .sec02Swiper {
    position: absolute;
    bottom: 22.36524537409%;
    left: 0;
    width: 100%;
    height: 42.63877715205%;
    box-sizing: border-box;
}

.bestarchiveWrap .sec02 .sec02Swiper {
    padding: 0 4.111111% 5.77777%;
}

.bestarchiveWrap .sec02 .sec02Swiper.swiper-backface-hidden .swiper-slide {
    padding-right: .878972%;
    box-sizing: border-box;
}

.bestarchiveWrap .sec02 .sec02Swiper .swiper-horizontal>.swiper-scrollbar,
.bestarchiveWrap .sec02 .sec02Swiper .swiper-scrollbar.swiper-scrollbar-horizontal {
    bottom: 0;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    background-color: #fff;
    width: calc(100% - 8.22222%);
    height: 1.661129%;
    border-radius: 0;
}

.bestarchiveWrap .sec02 .sec02Swiper .swiper-scrollbar{
    background-color: #fff;
}

.bestarchiveWrap .sec02 .sec02Swiper .swiper-scrollbar-drag {
    border-radius: 0;
    background-color: rgba(0,0,0,.5);
}

.bestarchiveWrap .sec04Swiper {
    position: absolute;
    width: 100%;
    height: 43.547110055%;
    bottom: 22.1694378464%;
    left: 50%;
    transform: translate(-50%);
}

.bestarchiveWrap .sec04Swiper .swiper-slide {
    text-align: center;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    transform: scale(0.818181);
    transition: .4s;
}

.bestarchiveWrap .sec04Swiper .swiper-slide-active {
    transform: scale(1);
}

.bestarchiveWrap .sec04Swiper .swiper-slide img{
    height: 100%;
    width: auto;
}

.bestarchiveWrap > div > a{
    position: absolute;
    width: 77.777777777%;
    left: 50%;
    transform: translate(-50%);
}

.bestarchiveWrap .sec02 > a {
    bottom: 7.84313725%;
}

.bestarchiveWrap .sec03 > a {
    bottom: 8.771929824%;
}

.bestarchiveWrap .sec04 > a {
    bottom: 9.5011876%;
}

.bestarchiveWrap .sec05 > a {
    bottom: 4.63309352518%;
}

.bestarchiveWrap .sec06 {
    background-color: #111;
    padding-bottom: 70%;
}

.bestarchiveWrap .sec06 > img:nth-child(2) {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: 58.967373%;
    width: 30.3333333%;
    z-index: 2;
}

.bestarchiveWrap .sec06 .rollingImg2 {
    display: flex;
    position: absolute;
    bottom: 59%;
    left: 0;
    height: 14%;
}

.bestarchiveWrap .sec06 .rollingImg2 .roller.original {
    animation: 200s linear 0s infinite normal forwards running rollingleft1;
    height: 100%;
}

.bestarchiveWrap .sec06 .rollingImg2 .roller.clone {
    animation: 200s linear 0s infinite normal none running rollingleft2;
    height: 100%;
}

.bestarchiveWrap .sec06Swiper {
    position: absolute;
    width: 100%;
    height: 36%;
    bottom: 9%;
    left: 50%;
    transform: translate(-50%);
}

.bestarchiveWrap .sec06Swiper .swiper-slide {
    text-align: center;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    transition: .4s;
    padding-right: 7%;
}

.bestarchiveWrap .sec06Swiper .swiper-slide img{
    height: 100%;
    width: auto;
}

.bestarchiveWrap .sec06Swiper .swiper-button-prev:after,
.bestarchiveWrap .sec06Swiper .swiper-button-next:after{
    width: 100%;
    height: 100%;
}

.bestarchiveWrap .sec06Swiper .swiper-button-prev:after{
    content: '';
    background: url('http://jstyle07.jpg3.kr/SITE/EVENT/2022/bestarchive/arrow_ylow.png') no-repeat center / contain;
    transform: scaleX(-1);
}

.bestarchiveWrap .sec06Swiper .swiper-button-next:after{
    content: '';
    background: url('http://jstyle07.jpg3.kr/SITE/EVENT/2022/bestarchive/arrow_ylow.png') no-repeat center / contain;
}

.bestarchiveWrap .sec06 .swiper-pagination{
    bottom: 5%;
}

.bestarchiveWrap .sec06 .swiper-pagination-bullet{
    background-color: #fff;
    width: 12px;
    height: 12px;
    margin: 8px;
}

.bestarchiveWrap .sec06 .swiper-pagination-bullet-active{
    background-color: #ff9c00;
}
/* BASIC css end */