.header {
    height: 71.3vw; /* 1369px / 1920px * 100 */
    background: url('../images/head.webp') no-repeat center;
    background-size: 100% 100%;
    position: relative;
}

.header-content {
    position: absolute;
    top: 29.8vw;
    text-align: center;
    width: 100%;
    z-index: 10;
}

.title-img {margin-bottom: -0.68vw; /* -13px / 1920px * 100 */}
.title-img img{
    
width: 36.8vw; /* 706px / 1920px * 100 */
    
height: 12.3vw; /* 237px / 1920px * 100 */
}

.download-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.63vw; /* 12px / 1920px * 100 */
}

.button-row {
    display: flex;
    gap: 0.63vw; /* 12px / 1920px * 100 */
}

.first-row {
    justify-content: center;
}

.second-row {
    justify-content: center;
}

.btn-ios, .btn-android, .btn-pc, .btn-apk, .btn-pay, .btn-blue-stacks, .btn-thunder-and-lightning {
    display: inline-block;
    transition: transform 0.2s ease;
}


.btn-ios:hover, .btn-android:hover, .btn-pc:hover, .btn-apk:hover, .btn-pay:hover, .btn-blue-stacks:hover, .btn-thunder-and-lightning:hover {
    transform: translateY(-0.1vw); /* -2px / 1920px * 100 */
}

.btn-ios img, .btn-android img, .btn-pc img, .btn-apk img, .btn-pay img, .btn-blue-stacks img, .btn-thunder-and-lightning img {
    display: block;
    width: 16.2vw; /* 311px / 1920px * 100 */
    height: 4.84vw; /* 93px / 1920px * 100 */
}


.title {
    height: 9.48vw; /* 182px / 1920px * 100 */
    position: relative;
    z-index: 9999;
    text-align: center;
}
.title img{
    width: 29.27vw; /* 562px / 1920px * 100 */
}
@media (min-width: 1546px) {
    .main{
        width: 80.5vw; /* 1546px / 1920px * 100 */
    }
}
.part1 .main{
    top: -15.36vw; /* -295px / 1920px * 100 */
}
.part2 .main{
    top: 5.68vw; /* 109px / 1920px * 100 */
}
.part3 .main{
    top: -9.48vw; /* -182px / 1920px * 100 */
    width: 86.15vw; /* 1654px / 1920px * 100 */
}
.part4 .main{
    top: -9.48vw; /* -182px / 1920px * 100 */
}
@media (max-width: 1546px) {
    .part3 .main{
        /* width: auto; */
    }
    .part3 .map{
        width: 86.15vw;
        margin: auto;
    }
}

.part1 {
    height: 86.7vw; /* 1664px / 1920px * 100 */
    background: url('../images/p1.webp') no-repeat  center;
    background-size: 100% 100%;
    margin-top: -0.05vw; /* -1px / 1920px * 100 */
}

.part1 .bn {
    margin-top: 2.6vw; /* 50px / 1920px * 100 */
    margin-bottom: 7.14vw; /* 137px / 1920px * 100 */
    display: flex;
    justify-content: space-between;
    background: url('../images/bottom_frame.webp') no-repeat;
    background-size: 100% 100%;
}
.announcement{
    float: left;
}
.announcement img{
    width: 36.8vw; /* 706px / 1920px * 100 */
    padding: 2.5vw 1.93vw; /* 48px / 1920px * 100, 37px / 1920px * 100 */
}

.banner {
    width: 33.33vw; /* 640px / 1920px * 100 */
    float: left;
}

.banner .swiper-container {
    height: 20.68vw; /* 397px / 1920px * 100 */
    overflow: hidden;
    width: 100%
}

.banner .pagination {
    display: flex;
    justify-content: center;
    margin-top: 0.89vw; /* 17px / 1920px * 100 */
}

.banner .swiper-pagination-bullet {
    width: 2.08vw; /* 40px / 1920px * 100 */
    height: 0.21vw; /* 4px / 1920px * 100 */
    background: #bcbcbc;
    border-radius: 0;
    margin: 0 0.21vw; /* 4px / 1920px * 100 */
    opacity: 1;
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
}

.banner .swiper-pagination-bullet-active {
    width: 4.69vw; /* 90px / 1920px * 100 */
    background: #e9d794;
}

.news {
    width: 50%;
    float: right;
    padding: 2.5vw 1.93vw 0; /* 48px / 1920px * 100, 37px / 1920px * 100 */
}

.news-tab {
    position: relative;
    height: 2.24vw; /* 43px / 1920px * 100 */
    font-size: 1.25vw; /* 24px / 1920px * 100 */
}

.news-tab span {
    float: left;
    width: 7.92vw; /* 152px / 1920px * 100 */
    height: 2.29vw; /* 44px / 1920px * 100 */
    line-height: 2.6vw; /* 50px / 1920px * 100 */
    margin-right: 3.02vw; /* 58px / 1920px * 100 */
    margin-left: -0.26vw; /* -5px / 1920px * 100 */
    padding-right: 0.21vw; /* 4px / 1920px * 100 */
    text-align: center;
    color: #c8927e;
    cursor: pointer;
}

.news-tab span.cur {
    background: url('../images/new_tab.webp') center no-repeat;
    background-size: 100% 100%;
}
.news-tab span a{
    display: block;
    width: 100%;
    height: 100%;
    background-size: 100%;
}
.news-tab span:nth-child(1) a{
    background: url('../images/news1.webp') center no-repeat;
    background-size: 5.42vw 1.3vw; /* 104px 25px / 1920px * 100 */
}
.news-tab span:nth-child(2) a{
    background: url('../images/news2.webp') center no-repeat;
    background-size: 5.52vw 1.46vw; /* 106px 28px / 1920px * 100 */
}
.news-tab span:nth-child(3) a{
    background: url('../images/news3.webp') center no-repeat;
    background-size: 2.86vw 2.08vw; /* 55px 40px / 1920px * 100 */
}
.news-tab span.cur:nth-child(1) a{
    background: url('../images/news1_selected.webp') center no-repeat;
    background-size: 5.42vw 1.3vw; /* 104px 25px / 1920px * 100 */
}
.news-tab span.cur:nth-child(2) a{
    background: url('../images/news2_selected.webp') center no-repeat;
    background-size: 5.52vw 1.46vw; /* 106px 28px / 1920px * 100 */
}
.news-tab span.cur:nth-child(3) a{
    background: url('../images/news3_selected.webp') center no-repeat;
    background-size: 2.86vw 2.08vw; /* 55px 40px / 1920px * 100 */
}

.news-tab .more {
    float: right;
    line-height: 2.19vw; /* 42px / 1920px * 100 */
    background: url('../images/more.webp') no-repeat right center;
    background-size: 100% 100%;
    width: 2.19vw; /* 42px / 1920px * 100 */
    height: 2.24vw; /* 43px / 1920px * 100 */
}


.news-cont {
    height: 15.42vw; /* 296px / 1920px * 100 */
    overflow: hidden;
    margin-top: 1.3vw; /* 25px / 1920px * 100 */
}

.news-cont ul {
    display: none;
}

.news-cont li {
    height: 3.07vw; /* 59px / 1920px * 100 */
    line-height: 3.07vw; /* 59px / 1920px * 100 */
    font-size: 0.94vw; /* 18px / 1920px * 100 */
    display: flex;
    justify-content: space-between;
}

.news-cont li span {
    color: #d0a794;
}

.news-cont li a{
    color: #d0a794;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    margin-right: 4.17vw; /* 80px / 1920px * 100 */
}

.news-cont li a:hover {
    color: #974c39;
}


@media (max-width: 1546px) {
    .part1 .bn{
        background-size: 100%;
    }
    .part1 .announcement{
        width: calc(50% - 3.85vw);
    }
    .announcement img{
        width: 100%;
    }
    .part1 .news{
        width: calc(50% - 3.85vw);
        padding-top: 3vw;
    }
    .news-cont{
        margin-top: 3vw;
        height: auto;
    }
    .news-cont li{
        height: 4vw;
        line-height: 2.35vw;
    }
    .news-cont li a{
        margin-right: 0;
        height: 2.45vw;
        line-height: 1.56vw;
    }
}

.character-selection {
    text-align: center;
    width: 70.3vw; /* 1350px / 1920px * 100 */
    margin: 7.76vw auto 0; /* 149px / 1920px * 100 */
}


.character-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.info-panel {
    width: 51.15vw; /* 982px / 1920px * 100 */
    text-align: left;
    position: relative;
    margin-left: 1.35vw; /* 26px / 1920px * 100 */
    top: 0.63vw; /* 12px / 1920px * 100 */
}

.gender-selector {
    display: flex;
    gap: 1.61vw; /* 31px / 1920px * 100 */
    position: absolute;
    z-index: 10;
    top: 6.77vw; /* 130px / 1920px * 100 */
    left: 11.93vw; /* 229px / 1920px * 100 */
}

.gender-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.gender-btn img {
    width: 5.364583333vw;
    height: 1.614583333vw;
    display: block;
}

.character-info {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-content {
    max-width: 100%;
    max-height: 100%;
}

.info-content img {
    width: 100%;
    height: auto;
}

.character-display {
    width: 52.24vw; /* 1003px / 1920px * 100 */
    text-align: center;
    position: absolute;
    right: -17.03vw; /* -327px / 1920px * 100 */
    top: -11.2vw; /* -215px / 1920px * 100 */
}

.character-display img {
    max-width: 100%;
    height: auto;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-0.52vw); } /* -10px / 1920px * 100 */
    100% { transform: translateY(0px); }
}

.class-selector {
    position: absolute;
    right: 0px;
    top: -3.02vw; /* -58px / 1920px * 100 */
    width: 10.99vw; /* 211px / 1920px * 100 */
    height: 35.21vw; /* 676px / 1920px * 100 */
    background: url('../images/radian.webp') no-repeat;
    background-size: 100% 100%;
}


.class-btn {
    position: absolute;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1;
    width: 4.84vw; /* 93px / 1920px * 100 */
}

.class-btn img {
    display: block;
    width: 100%;
    margin: 0 auto;
}


.class-btn.sword-btn {
    top: 1.35vw; /* 26px / 1920px * 100 */
    left: 3.91vw; /* 75px / 1920px * 100 */
}


.class-btn.knife-btn {
    top: 7.97vw; /* 153px / 1920px * 100 */
    left: 6.77vw; /* 130px / 1920px * 100 */
}


.class-btn.gun-btn {
    top: 14.53vw; /* 279px / 1920px * 100 */
    left: 8.49vw; /* 163px / 1920px * 100 */
}


.class-btn.doctor-btn {
    top: 21.15vw; /* 406px / 1920px * 100 */
    left: 6.77vw; /* 130px / 1920px * 100 */
}


.class-btn.arrow-btn {
    top: 27.71vw; /* 532px / 1920px * 100 */
    left: 3.91vw; /* 75px / 1920px * 100 */
}

.part2 {
    height: 82.3vw; /* 1580px / 1920px * 100 */
    background: url('../images/p2.webp') no-repeat  center;
    background-size: 100% 100%;
    margin-top: -0.05vw; /* -1px / 1920px * 100 */
}

.video-box {
    position: relative;
    width: 100%;
    max-width: 64.06vw; /* 1230px / 1920px * 100 */
    margin: 0 auto;
    text-align: center;
    padding-top: 2.6vw; /* 50px / 1920px * 100 */
}

.video-frame {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 50;
    pointer-events: none;
}

.video-frame img {
    width: 100%;
    height: auto;
}

.video-content {
    position: relative;
    display: inline-block;
    margin-top: 9.63vw; /* 185px / 1920px * 100 */
    width: 44.17vw; /* 848px / 1920px * 100 */
    height: 24.79vw; /* 476px / 1920px * 100 */
}

.video-cover {
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 20;
}

.video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: none;
    border: none;
    cursor: pointer;
    width: 5.78vw; /* 111px / 1920px * 100 */
    height: 6.46vw; /* 124px / 1920px * 100 */
    z-index: 100;
}

.video-play-btn img {
    width: 100%;
    height: 100%;
}

.video-player {
    width: 100%;
    height: auto;
    display: none;
    z-index: 20;
}
.part2-footer{
    position: relative;
    width: 100vw;
    top: 0.73vw; /* 14px / 1920px * 100 */
    left: 0;
    z-index: 100;
    pointer-events: none;
}
.trunk {
    width: 100%;
    z-index: 999;
    position: relative;
}
.female-bow {
    position: absolute;
    top: -6.62vw; /* -127px / 1920px * 100 */
    right: 0.68vw; /* 13px / 1920px * 100 */
    width: 16.56vw; /* 318px / 1920px * 100 */
    height: 26.93vw; /* 517px / 1920px * 100 */
}

@media (max-width: 1546px) {
    .part2-footer{
        top: 3.75vw;
    }
    .trunk {
        width: calc(100% + 6.25vw);
        margin-left: -3.13vw;
    }
    .female-bow{
        top: -3.8vw;
        width: 10.26vw;
        height: auto;
    }
}

.role {
    height: 35.1vw; /* 674px / 1920px * 100 */
    margin-top: 12.34vw; /* 237px / 1920px * 100 */
    position: relative;
}

.role-tab {
    position: absolute;
    left: 1.3vw; /* 25px / 1920px * 100 */
    bottom: 3.7vw; /* 71px / 1920px * 100 */
    background: url('../images/role_tab.png') no-repeat;
    width: 29.69vw; /* 570px / 1920px * 100 */
    height: 17.24vw; /* 331px / 1920px * 100 */
}

.role-tab li {
    width: 7.08vw; /* 136px / 1920px * 100 */
    height: 6.88vw; /* 132px / 1920px * 100 */
    background: url('../images/role_tx.png') no-repeat;
    font-size: 0;
    position: absolute;
    cursor: pointer;
}

.role-tab li:nth-child(1) {
    background-position: 0 0;
    left: -0.89vw; /* -17px / 1920px * 100 */
    top: 4.38vw; /* 84px / 1920px * 100 */
}

.role-tab li:nth-child(2) {
    background-position: -7.66vw 0; /* -147px / 1920px * 100 */
    left: 6.67vw; /* 128px / 1920px * 100 */
    top: 12.08vw; /* 232px / 1920px * 100 */
}

.role-tab li:nth-child(3) {
    background-position: -15.21vw 0; /* -292px / 1920px * 100 */
    left: 18.18vw; /* 349px / 1920px * 100 */
    top: 13.75vw; /* 264px / 1920px * 100 */
}

.role-tab li.cur {
    background-position-y: -7.39vw; /* -142px / 1920px * 100 */
}

.role-main .item {
    position: relative;
    height: 35.1vw; /* 674px / 1920px * 100 */
    display: none;
}

.name {
    width: 6.82vw; /* 131px / 1920px * 100 */
    height: 16.88vw; /* 324px / 1920px * 100 */
    position: absolute;
    left: -1.98vw; /* -38px / 1920px * 100 */
    top: -2.6vw; /* -50px / 1920px * 100 */
    background: url('../images/role_name.png') no-repeat;
    font-size: 0;
    -webkit-animation: fadeInDown .5s forwards .3s 0 ease;
    animation: fadeInDown .5s forwards;
}

.role-img {
    position: absolute;
    -webkit-animation: fadeInLeft .5s forwards .3s 0 ease;
    animation: fadeInLeft .5s forwards;
}

.nz .name {
    background-position: 0 0;
}

.nz .role-img {
    width: 63.96vw; /* 1228px / 1920px * 100 */
    height: 52.86vw; /* 1015px / 1920px * 100 */
    left: -2.97vw; /* -57px / 1920px * 100 */
    bottom: 0;
}

.wk .name {
    background-position: -7.34vw 0; /* -141px / 1920px * 100 */
}

.wk .role-img {
    width: 52.71vw; /* 1012px / 1920px * 100 */
    height: 52.55vw; /* 1009px / 1920px * 100 */
    left: -6.77vw; /* -130px / 1920px * 100 */
    bottom: -8.23vw; /* -158px / 1920px * 100 */
}

.yj .name {
    background-position: -14.69vw 0; /* -282px / 1920px * 100 */
}

.yj .role-img {
    width: 73.75vw; /* 1416px / 1920px * 100 */
    height: 56.72vw; /* 1089px / 1920px * 100 */
    left: -7.71vw; /* -148px / 1920px * 100 */
    bottom: -2.6vw; /* -50px / 1920px * 100 */
}

.intro {
    width: 20.99vw; /* 403px / 1920px * 100 */
    position: absolute;
    top: 0.78vw; /* 15px / 1920px * 100 */
    right: 0;
    -webkit-animation: fadeInRight .6s forwards;
    animation: fadeInRight .6s forwards;
}

.intro .text {
    background: url('../images/td.png') no-repeat;
    padding-top: 3.44vw; /* 66px / 1920px * 100 */
    color: #20252c;
    font-size: 1.04vw; /* 20px / 1920px * 100 */
    font-family: 'Microsoft YaHei';
    line-height: 1.88vw; /* 36px / 1920px * 100 */
    height: 7.5vw; /* 144px / 1920px * 100 */
}

.skill {
    background: url('../images/jn.png') no-repeat;
    padding-top: 4.17vw; /* 80px / 1920px * 100 */
    padding-left: 1.15vw; /* 22px / 1920px * 100 */
    display: flex;
    justify-content: space-between;
}

.skill li {
    width: 3.75vw; /* 72px / 1920px * 100 */
    height: 3.75vw; /* 72px / 1920px * 100 */
    border-radius: 0.42vw; /* 8px / 1920px * 100 */
    overflow: hidden;
    border: 0.05vw solid #ebd48f; /* 1px / 1920px * 100 */
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
}

.skill li:hover {
    -webkit-transform: translateY(-0.26vw); /* -5px / 1920px * 100 */
    transform: translateY(-0.26vw); /* -5px / 1920px * 100 */
    box-shadow: 0 0.21vw 0.21vw rgba(0, 0, 0, .2); /* 4px 4px / 1920px * 100 */
}

.chart {
    float: right;
    margin-top: 1.3vw; /* 25px / 1920px * 100 */
    width: 11.98vw; /* 230px / 1920px * 100 */
    height: 11.98vw; /* 230px / 1920px * 100 */
}

.part3 {
    height: 56.04vw; /* 1076px / 1920px * 100 */
    background: url('../images/p3.webp') no-repeat  center;
    background-size: 100% 100%;
    margin-top: -0.05vw; /* -1px / 1920px * 100 */
}
.map{
    /* margin-top: 8.02vw; 154px / 1920px * 100 */
}
.map-content{
    max-width: 52.08vw; /* 1000px / 1920px * 100 */
    position: absolute;
    top: 9.38vw; /* 180px / 1920px * 100 */
    width: 100%;
    text-align: center;
}

/* 地图图标从下到上出现的动画 */
@keyframes mapIconAppear {
    from {
        opacity: 0;
        transform: translateY(-13.02vw); /* -250px / 1920px * 100 */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.map-bg {
    position: absolute;
    width: 10.89vw; /* 209px / 1920px * 100 */
    height: 12.97vw; /* 249px / 1920px * 100 */
    opacity: 0;
    animation: mapIconAppear 0.1s ease-in forwards;
    animation-delay: 2s;
}
.map-bg::after{
    content: '';
    position: absolute;
    bottom: -2.86vw; /* -55px / 1920px * 100 */
    left: 2.76vw; /* 53px / 1920px * 100 */
    width: 5.68vw; /* 109px / 1920px * 100 */
    height: 2.4vw; /* 46px / 1920px * 100 */
    background: url('../images/map_footer.webp') no-repeat;
    background-size: 100% auto;
}

.map-bg img {
    width: 100%;
    height: auto;
}

/* 根据设计图定位各个地图图标 */
.map-bg1 {
    top: 3.75vw; /* 72px / 1920px * 100 */
    left: 17.5vw; /* 336px / 1920px * 100 */
    animation-delay: 2.1s;
}

.map-bg2 {
    top: 6.25vw; /* 120px / 1920px * 100 */
    left: 37.66vw; /* 723px / 1920px * 100 */
    animation-delay: 2.2s;
}

.map-bg3 {
    top: 3.75vw; /* 72px / 1920px * 100 */
    left: 56.3vw; /* 1081px / 1920px * 100 */
    animation-delay: 2.3s;
}

.map-bg4 {
    top: 16.15vw; /* 310px / 1920px * 100 */
    left: 7.55vw; /* 145px / 1920px * 100 */
    animation-delay: 2.4s;
}

.map-bg5 {
    top: 18.96vw; /* 364px / 1920px * 100 */
    left: 27.66vw; /* 531px / 1920px * 100 */
    animation-delay: 2.5s;
}
.map-bg6 {
    top: 18.96vw; /* 364px / 1920px * 100 */
    left: 47.29vw; /* 908px / 1920px * 100 */
    animation-delay: 2.6s;
}
.map-bg7 {
    top: 16.15vw; /* 310px / 1920px * 100 */
    left: 66.35vw; /* 1274px / 1920px * 100 */
    animation-delay: 2.7s;
}
.map-body{
    width: 86.15vw; /* 1654px / 1920px * 100 */
    height: 28.8vw; /* 553px / 1920px * 100 */
    margin: 8.02vw auto 0; /* 154px / 1920px * 100 */
}

/* 弹窗样式 */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    z-index: 100000;
}

.popup-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100100;
    pointer-events: none;
}

.popup {
    position: relative;
    display: none;
    pointer-events: auto;
    max-width: 90%;
    max-height: 90%;
}

.popup img {
    max-width: 100%;
    max-height: 100%;
    position: relative;
    top: 6px;
}

.popup-border {
    position: relative;
    background: url('../images/rectangle.webp') no-repeat center;
    padding: 1.04vw; /* 20px / 1920px * 100 */
    display: inline-block;
}

.popup-close {
    position: absolute;
    top: -2.86vw;
    right: -4.22vw;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.popup-close img {
    width: 3.99vw;
    height: 3.96vw;
}

.part4 {
    margin-top: -0.05vw; /* -1px / 1920px * 100 */
    height: 50.1vw; /* 962px / 1920px * 100 */
    background: url('../images/p4.webp') no-repeat  center;
    background-size: 100% 100%;
}

.feature {
    margin: 5.31vw auto 0; /* 102px / 1920px * 100 */
    position: relative;
    width: 39.74vw; /* 763px / 1920px * 100 */
    max-width: 62.5vw; /* 1200px / 1920px * 100 */
    right: -0.42vw; /* -8px / 1920px * 100 */
}

.feature .swiper-container {
    width: 100%;
    height: auto;
}

.feature .swiper-slide {
    width: 45.1vw; /* 866px / 1920px * 100 */
    height: 26.88vw; /* 516px / 1920px * 100 */
}

.feature .swiper-slide-shadow-left,
.feature .swiper-slide-shadow-right {
    background: rgba(0, 0, 0, .74);
}
.swiper-lazy{
    width: 39.74vw; /* 763px / 1920px * 100 */
    height: 22.34vw; /* 429px / 1920px * 100 */
}
.prev,
.next {
    position: absolute;
    top: 50%;
    margin-top: -4.79vw; /* -92px / 1920px * 100 */
    width: 3.65vw; /* 70px / 1920px * 100 */
    height: 3.7vw; /* 71px / 1920px * 100 */
    z-index: 10;
    cursor: pointer;
}

.prev {
    background: url('../images/pn1.webp') no-repeat;
    background-size: 100% 100%;
    left: -10.1vw; /* -194px / 1920px * 100 */
}

.next {
    background: url('../images/pn2.webp') no-repeat;
    background-size: 100% 100%;
    right: -9.06vw; /* -174px / 1920px * 100 */
}

.fp {
    display: flex;
    justify-content: center;
    margin-top: -3.02vw; /* -58px / 1920px * 100 */
}

.fp .pagination {
    display: flex;
    justify-content: center;
    width: 23.44vw; /* 450px / 1920px * 100 */
    padding-left: 0;
    align-items: center;
}

.fp .swiper-pagination-bullet {
    width: 0.47vw; /* 9px / 1920px * 100 */
    height: 0.47vw; /* 9px / 1920px * 100 */
    background: url('../images/dot1.webp') no-repeat center center;
    opacity: 1;
    position: relative;
    z-index: 1;
    margin: 0 0.26vw; /* 5px / 1920px * 100 */
}

.fp .swiper-pagination-bullet-active {
    background: url('../images/dot2.webp') no-repeat  center center;
    width: 1.56vw; /* 30px / 1920px * 100 */
    height: 1.51vw; /* 29px / 1920px * 100 */
    margin: 0;
}

.footer-content {
    width: 100%;
    height: 13.5vw;
    background-image: url('../images/mb-footer-bg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    bottom: 0px;
}