.wrap {margin: 0 auto; width: 95%;}
.wrap[max='1800'] {max-width: 1800px;}
.wrap[max='1600'] {max-width: 1600px;}
.wrap[max='1440'] {max-width: 1440px;}
.wrap[max='1280'] {max-width: 1280px;}

.scrollDown {position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; flex-direction: column; align-items: center;}
.scrollDown .arrWrap {position: relative; display: flex; flex-direction: column; align-items: center; margin-bottom: 5px; animation: upDown 1.5s ease-in-out infinite;}
.scrollDown .arrWrap .arr {font-size: 16px; letter-spacing: -0.03em; color: #fff; opacity: .3;}
.scrollDown .arrWrap .arr+.arr {transform: translateY(-10px); opacity: 1;}
.scrollDown span {font-family: "Roboto"; font-size: 14px; color: #fff; letter-spacing: -0.03em; text-align: center;}
@keyframes upDown {
    0% {transform: translateY(0);}
    50% {transform: translateY(10px);}
    100% {transform: translateY(0);}
}

.sub .vs {position: relative; display: flex; align-items: center; justify-content: center; height: 560px; margin-bottom: 200px; overflow: hidden;}
.sub .vs .bg {position: absolute; left: 50%; top: 0%; transform: translateX(-50%); width: 100%; height: 100%;}
.sub .vs .bg img {object-fit: cover; position: absolute; left: 50%; top: 0%; transform: translate(-50%, 0%);}
@media screen and (min-width: 1921px) {
    .sub .vs .bg img {width: 100%;}
}
.sub .vs h1 {position: relative; z-index: 1; font-family: 'Roboto'; font-weight: 500; letter-spacing: -0.03em; font-size: 80px; color: #fff;}
.chi .sub .vs h1 {font-family: "Noto Sans SC";}
.eng .sub .vs h1 {font-family: "Inter";}
.jap .sub .vs h1 {font-family: "Noto Sans JP";}
@media screen and (max-width: 1280px) {
    .sub .vs {height: 450px; margin-bottom: 120px;}
}
@media screen and (max-width: 1024px) {
    .sub .vs h1 {font-size: 70px;}
}
@media screen and (max-width: 820px) {
    .sub .vs .bg img {max-width: none; width: 1280px;}
    .sub .vs {height: 300px; margin-bottom: 120px;}
    .sub .vs h1 {font-size: 40px;}
}
@media screen and (max-width: 500px) {
    .sub .vs {margin-bottom: 100px;}
    .sub .vs h1 {font-size: 35px;}
}

.list_paging {display: flex; align-items: center; justify-content: center; padding-top: 85px;}
.list_paging > div {display: flex; align-items: center;}
.list_paging > .num {padding: 0 20px;}
.list_paging a {padding: calc(15/18*1em); color: #fff; font-family: 'SUIT'; font-weight: 500; font-size: 18px; letter-spacing: -0.03em; color: #fff; opacity: .3;}
.list_paging a.act {opacity: 1;}
.list_paging .arr a {padding: calc(10/18*1em);}

@media screen and (max-width: 820px) {
    .list_paging > .num {padding: 0 10px;}
    .list_paging a {font-size: 14px;}
}
@media screen and (max-width: 500px) {
    .list_paging > .num {padding: 0 10px;}
    .list_paging a {font-size: 12px;}
}