.banner{ width: 100%; height: 52vw; background-image: url(../images/banner.png); background-size: 100% 100%;}
.banner .nav-box{width: 100%; height: 3.5vw;background: linear-gradient( 180deg, rgba(28,50,106,0.5) 0%, rgba(9,30,41,0) 100%);}
.banner .nav{ width: 65.6vw; height: 3.5vw; margin: 0 auto; display: flex; align-items: center; justify-content: flex-start}
.banner .nav .logo{ width: 4.6vw;}
.banner .nav ul.navlist{ height: 100%; display: flex; align-items: center; margin-left: 13.5vw;}
.banner .nav ul.navlist li{ color: #e7e7e7; font-size: 16px; margin-right: 4vw;}
.banner .nav ul.navlist li::before{content: ""; width: 80%; height: 3px; display: block;position: relative; bottom: -1.2vw; margin: 0 auto;}

.banner .nav ul.navlist li.cur{font-weight: bold; position: relative;}
.banner .nav ul.navlist li.cur::before{background-color: #e7e7e7; }
.banner .nav .lang-box{ width: 17vw; height: 100%; display: flex; align-items: center; justify-content: flex-end;margin-left: auto;  position: relative;}
.banner .nav .lang-box:hover .lang-list{display: block;}
.banner .nav .lang-box .lang-view{ width: 6.8vw;  height: 2vw; background-image: url(../images/lang-view-btn.png),url(../images/lang-bg.png); background-size: 1vw 1vw,100% 100%; padding: 5px 10px; display: flex; align-items: center;font-size: 14px;  background-repeat: no-repeat,no-repeat; background-position: 5.5vw center ,center;cursor: pointer;}
.banner .nav .lang-box .lang-view .lang-icon{ width: 1.5vw; height: 1.5vw; margin-right: 10px; }
.banner .nav .lang-box .lang-list{ width: 4vw; height: 5.4vw; background-image: url(../images/lang-list-bg.png); background-size: 100% 100%; position: absolute; top: 3vw; padding: 0.5vw 0; display: none;}
.banner .nav .lang-box .lang-list li{ width: 100%;height: calc(100% / 3); display: flex; align-items: center; justify-content: center;cursor: pointer;font-size: 14px}
.banner .nav .lang-box .lang-list li.cur{ color: #D95863;}


.banner-excess{ width: 100%; height: 2vw; background-image: url(../images/banner-excess.png); background-size: 100% 100%; margin-top: -1vw;position: relative; z-index: 3;}


.add-wishlist-box{ width: 100%; height: 48.5vw; background-image: url(../images/add-wishlist-bg.png); background-size: 100% 100%; margin-top: -1vw; position: relative;}
.add-wishlist-box .wishlist-btn{ width: 16.2vw; height: 3.7vw; background-image: url(../images/wishlist-btn-bg.png); background-size: 100% 100%; position: absolute; left: 56.5vw; top: 38.6vw; display: flex; align-items: center; justify-content: center; color: #E7E7E7; font-weight: bold; font-size: 24px; padding-top: 0.3vw;}
.add-wishlist-box .wishlist-btn img{ width: 1.25vw; height: 1.25vw; margin-left: 1vw;}

.video-box{ width: 100%; height: 44.6vw; background-image: url(../images/video-box-bg.png); background-size: 100% 100%;margin-top: -1vw; padding-top: 11vw;}
.video-box video{ width: 59.5vw; height: 33.33vw; background-image:url(../images/video-bg.png); background-size: 100% 100%; margin: 0 auto; display: block; position: relative; z-index: 3;}

.features{ width: 100%; height: 61.8vw; background-image: url(../images/screenshots-bg.png); background-size: 100% 100%; position: relative; margin-top: -4vw; padding-top: 12vw; z-index: 2;}
.features .features-content{ width: 55vw; margin: 0 auto; padding-bottom: 3vw; position: relative;}
.features .features-content .top-decoration{ width: 100%; height: 2.3vw; display: flex; align-items: center;  position: relative;}
.features .features-content .top-decoration .top-decoration-bg-1{ width: 52.6vw; position: relative;top: 0.4vw;}
.features .features-content .top-decoration .top-decoration-bg-2{ width: 3.33vw; position: absolute; right: 0; top: 0;}
.features .features-content .top-decoration .features-top-num{ width: 1vw; margin-right: 1vw;position: relative;top: 0.4vw;}
.features .features-content .title{ font-size: 24px; font-weight: 900; color: #E8E8E8; margin-top: 2vw;}
.features .features-content .desc{ font-size: 14px; color: #E8E8E8; margin-top: 0.8vw; letter-spacing: 1px; line-height: 150%;}
.features .features-content .gif{ width: 100%; margin-top: 2.3vw;}

.features .features-content .btn-box{ width: 6vw; height: 1.8vw; position: absolute; bottom: 0;}
.features .features-content .btn-box .prve{ width: 1.8vw; height: 1.8vw; background-image: url(../images/prve.png); background-size: 100% 100%;position: absolute; left: 0; cursor: pointer;}
.features .features-content .btn-box .next{ width: 1.8vw; height: 1.8vw; background-image: url(../images/next.png); background-size: 100% 100%;position: absolute; right: 0; cursor: pointer;}


.role-box{ width: 100%; height: 53.8vw; background-image: url(../images/role-box-bg.png); background-size: 100% 100%; margin-top: -4vw;
padding-top: 8vw;  position: relative; z-index: 1;}

.role-box .role-list{ width: 49.2vw; height: 8.4vw; margin: 0 auto; position: relative; z-index: 2; margin-top: -7vw;overflow:visible;}
.role-box .role-list ul{ width: 100%; display: flex;}
.role-box .role-list li{ width: 6.2vw; height: 7.4vw; background-image: url(../images/role-bg.png); background-size: 100% 100%; display:flex; justify-content: center; margin-right: 0.8vw; cursor: pointer;}
.role-box .role-list li.swiper-slide-thumb-active{background-image: url(../images/role-active-bg.png);}
.role-box .role-list li:last-child{margin-right: 0;}
.role-box .role-list li img{ width: 65%; position: relative; top: -1vw;}
.role-box .role-content{ width: 63vw; height: 37vw; margin: 0 auto; margin-top: 1.7vw; position: relative;}
.role-box .role-content .top-title-box{ width: 29vw; display: flex; margin: 0 auto;}
.role-box .role-content .top-title-box .title{ flex: 0.5; display: flex; align-items: center; justify-content: flex-start; padding-left: 2.5vw; font-size: 26px; font-weight: bold;letter-spacing: 1px;}
.role-box .role-content .top-title-box .desc{ flex: 0.5; display: flex; align-items: center; justify-content: flex-start;padding-left: 2.5vw; font-size: 16px; }
.role-box .role-content .role-combination{ width: 27vw; margin: 0 auto; display: block; margin-top: 2.8vw;}
.role-box .role-content .role-desc-box{ width: 21vw; height: 8.8vw; display: flex; position: absolute; }
.role-box .role-content .role-desc-box .img{margin-right: 1vw; display: flex; align-items: flex-end;}
.role-box .role-content .role-desc-box .img img{ width: 4vw; }
.role-box .role-content .role-desc-box .name{ width: 100%; height: 2.8vw; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: bold;}
.role-box .role-content .role-desc-box .desc-box{ width: 15.6vw; height: 100%;}
.role-box .role-content .role-desc-box .desc-box .desc{ width: 15.6vw; height: 5.8vw; background-image: url(../images/role-desc-bg.png); background-size: 100% 100%; padding: 1vw; font-size: 16px; color: #505050;}

.role-box .role-content .akane-role-box{top: 15vw;}
.role-box .role-content .bot-role-box{right: 0; top: 22vw;}

.role-box .role-content .commander-nile-role-box{right: 0; top: 8vw;}
.role-box .role-content .billy-role-box{right: 1.5vw; top: 22vw;}

.role-box .role-content .btn-box{ width: 45vw; position: absolute; top: 0; height: 2vw; z-index: 2; display: flex; align-items: center; justify-content: space-between; left: 9vw;}
.role-box .role-content .btn-box .prve,.role-box .role-content .btn-box .next{ width: 1.5vw; height: 1.5vw; background-size: 100% 100%; cursor: pointer;}
.role-box .role-content .btn-box .prve{background-image: url(../images/role-prve.png);}
.role-box .role-content .btn-box .next{background-image: url(../images/role-next.png);}

@media (max-width: 2199px) {
    
    .banner .nav ul.navlist{ height: 100%; display: flex; align-items: center; margin: 0 auto;}
    .banner .nav .lang-box{ width: auto; height: 100%; display: flex; align-items: center; justify-content: flex-end;  position: relative;margin-left: 0;}
    .banner .nav ul.navlist li::before{content: "";  height: 3px; display: block;position: relative; bottom: -2vw; margin: 0 auto;}

    .add-wishlist-box .wishlist-btn{ width: 18.2vw; height: 3.7vw; background-image: url(../images/wishlist-btn-bg.png); background-size: 100% 100%; position: absolute; left: 56.5vw; top: 38.6vw; display: flex; align-items: center; justify-content: center; color: #E7E7E7; font-weight: bold; font-size: 18px; padding-top: 0.3vw;}

    .role-box .role-content .role-desc-box .name{ width: 100%; height: 2.8vw; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold;}
    .role-box .role-content .role-desc-box .desc-box .desc{ width: 15.6vw; height: 5.8vw; background-image: url(../images/role-desc-bg.png); background-size: 100% 100%; padding: 1vw; font-size: 14px; color: #505050;}
}
@media (max-width: 1600px) {

    .banner .nav .lang-box .lang-list{ width: 5vw;}
    .banner .nav .lang-box .lang-view{font-size: 12px; width: 8vw; background-position: 6.5vw center ,center;}

    .banner .nav ul.navlist li{ font-size: 14px; }

}