@charset "utf-8";
:root {
    --base-font-size: 18px;
    --base-font-color: #fff;
    --base-min-width: 1620px;
    --base-bgcolor: #171d26;
}
html {
    font-size: 100px;
}
body {
    font-family: "Microsoft YaHei", "PingFang SC", Arial, Helvetica, sans-serif;
    font-size: var(--base-font-size);
    line-height: 1.6;
    color: var(--base-font-color);
    padding-top: 90px;
    min-width: var(--base-min-width);
    background: url("//content-us.game-bean.com/image/rot/website2501/bg.jpg") no-repeat center 90px;
    background-size: cover;
}
a {
    text-decoration: none;
    color: #fff;
}
a:hover {
    color: #35c3fe;
}
p {
    margin: 1em 0;
}
ul,
ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.topnav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    width: 100%;
    height: 90px;
    min-width: var(--base-min-width);
    margin: 0 auto;
    padding: 0 20px;
    border-bottom: 1px solid #444;
    background-color: #000;
    box-sizing: border-box;
}
.topnav h1 {
    flex: none;
    margin: 0 50px 0 0;
    height: 50px;
    font-size: 0;
    line-height: 0;
}
.topnav h1 img {
    display: block;
    height: 100%;
    width: auto;
}
.topnav nav {
    flex: auto;
}
.topmenu {
    display: flex;
}
.topmenu li {
    flex: none;
    height: 89px;
    margin: 0 25px;
}
.topmenu li a {
    display: block;
    height: 100%;
    font-size: 0;
    line-height: 0;
}
.topmenu li .home {
    width: 89px;
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-sprit.png") no-repeat 0 0;
}
.topmenu li .introduction {
    width: 198px;
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-sprit.png") no-repeat -89px 0;
}
.topmenu li .characteristic {
    width: 231px;
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-sprit.png") no-repeat -288px 0;
}
.topmenu li .topup {
    width: 111px;
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-sprit.png") no-repeat -519px 0;
}
.topmenu li.active .home,
.topmenu li:hover .home {
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-sprit.png") no-repeat 0 -89px;
}
.topmenu li.active .introduction,
.topmenu li:hover .introduction {
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-sprit.png") no-repeat -89px -89px;
}
.topmenu li.active .characteristic,
.topmenu li:hover .characteristic {
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-sprit.png") no-repeat -288px -89px;
}
.topmenu li.active .topup,
.topmenu li:hover .topup {
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-sprit.png") no-repeat -519px -89px;
}

.cn .topmenu li .home {
    width: 91px;
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-cn.png") no-repeat 0 0;
}
.cn .topmenu li .introduction {
    width: 165px;
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-cn.png") no-repeat -91px 0;
}
.cn .topmenu li .characteristic {
    width: 165px;
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-cn.png") no-repeat -256px 0;
}
.cn .topmenu li .topup {
    width: 92px;
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-cn.png") no-repeat -421px 0;
}
.cn .topmenu li.active .home,
.cn .topmenu li:hover .home {
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-cn.png") no-repeat 0 -89px;
}
.cn .topmenu li.active .introduction,
.cn .topmenu li:hover .introduction {
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-cn.png") no-repeat -91px -89px;
}
.cn .topmenu li.active .characteristic,
.cn .topmenu li:hover .characteristic {
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-cn.png") no-repeat -256px -89px;
}
.cn .topmenu li.active .topup,
.cn .topmenu li:hover .topup {
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-cn.png") no-repeat -421px -89px;
}

.de .topmenu li .home {
    width: 87px;
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-de.png") no-repeat 0 0;
}
.de .topmenu li .introduction {
    width: 173px;
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-de.png") no-repeat -87px 0;
}
.de .topmenu li .characteristic {
    width: 231px;
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-de.png") no-repeat -260px 0;
}
.de .topmenu li .topup {
    width: 145px;
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-de.png") no-repeat -491px 0;
}
.de .topmenu li.active .home,
.de .topmenu li:hover .home {
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-de.png") no-repeat 0 -89px;
}
.de .topmenu li.active .introduction,
.de .topmenu li:hover .introduction {
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-de.png") no-repeat -87px -89px;
}
.de .topmenu li.active .characteristic,
.de .topmenu li:hover .characteristic {
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-de.png") no-repeat -260px -89px;
}
.de .topmenu li.active .topup,
.de .topmenu li:hover .topup {
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-de.png") no-repeat -491px -89px;
}

.fr .topmenu li .home {
    width: 112px;
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-fr.png") no-repeat 0 0;
}
.fr .topmenu li .introduction {
    width: 179px;
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-fr.png") no-repeat -112px 0;
}
.fr .topmenu li .characteristic {
    width: 234px;
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-fr.png") no-repeat -291px 0;
}
.fr .topmenu li .topup {
    width: 149px;
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-fr.png") no-repeat -525px 0;
}
.fr .topmenu li.active .home,
.fr .topmenu li:hover .home {
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-fr.png") no-repeat 0 -89px;
}
.fr .topmenu li.active .introduction,
.fr .topmenu li:hover .introduction {
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-fr.png") no-repeat -112px -89px;
}
.fr .topmenu li.active .characteristic,
.fr .topmenu li:hover .characteristic {
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-fr.png") no-repeat -291px -89px;
}
.fr .topmenu li.active .topup,
.fr .topmenu li:hover .topup {
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-fr.png") no-repeat -525px -89px;
}

.es .topmenu li .home {
    width: 95px;
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-es.png") no-repeat 0 0;
}
.es .topmenu li .introduction {
    width: 200px;
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-es.png") no-repeat -95px 0;
}
.es .topmenu li .characteristic {
    width: 246px;
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-es.png") no-repeat -295px 0;
}
.es .topmenu li .topup {
    width: 133px;
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-es.png") no-repeat -541px 0;
}
.es .topmenu li.active .home,
.es .topmenu li:hover .home {
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-es.png") no-repeat 0 -89px;
}
.es .topmenu li.active .introduction,
.es .topmenu li:hover .introduction {
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-es.png") no-repeat -95px -89px;
}
.es .topmenu li.active .characteristic,
.es .topmenu li:hover .characteristic {
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-es.png") no-repeat -295px -89px;
}
.es .topmenu li.active .topup,
.es .topmenu li:hover .topup {
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-es.png") no-repeat -541px -89px;
}

.pt .topmenu li .home {
    width: 95px;
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-pt.png") no-repeat 0 0;
}
.pt .topmenu li .introduction {
    width: 177px;
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-pt.png") no-repeat -95px 0;
}
.pt .topmenu li .characteristic {
    width: 247px;
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-pt.png") no-repeat -272px 0;
}
.pt .topmenu li .topup {
    width: 134px;
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-pt.png") no-repeat -519px 0;
}
.pt .topmenu li.active .home,
.pt .topmenu li:hover .home {
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-pt.png") no-repeat 0 -89px;
}
.pt .topmenu li.active .introduction,
.pt .topmenu li:hover .introduction {
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-pt.png") no-repeat -95px -89px;
}
.pt .topmenu li.active .characteristic,
.pt .topmenu li:hover .characteristic {
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-pt.png") no-repeat -272px -89px;
}
.pt .topmenu li.active .topup,
.pt .topmenu li:hover .topup {
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-pt.png") no-repeat -519px -89px;
}

.tr .topmenu li .home {
    width: 144px;
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-tr.png") no-repeat 0 0;
}
.tr .topmenu li .introduction {
    width: 109px;
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-tr.png") no-repeat -144px 0;
}
.tr .topmenu li .characteristic {
    width: 147px;
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-tr.png") no-repeat -253px 0;
}
.tr .topmenu li .topup {
    width: 119px;
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-tr.png") no-repeat -400px 0;
}
.tr .topmenu li.active .home,
.tr .topmenu li:hover .home {
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-tr.png") no-repeat 0 -89px;
}
.tr .topmenu li.active .introduction,
.tr .topmenu li:hover .introduction {
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-tr.png") no-repeat -144px -89px;
}
.tr .topmenu li.active .characteristic,
.tr .topmenu li:hover .characteristic {
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-tr.png") no-repeat -253px -89px;
}
.tr .topmenu li.active .topup,
.tr .topmenu li:hover .topup {
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-tr.png") no-repeat -400px -89px;
}

.id .topmenu li .home {
    width: 134px;
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-id.png") no-repeat 0 0;
}
.id .topmenu li .introduction {
    width: 165px;
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-id.png") no-repeat -134px 0;
}
.id .topmenu li .characteristic {
    width: 89px;
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-id.png") no-repeat -299px 0;
}
.id .topmenu li .topup {
    width: 143px;
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-id.png") no-repeat -388px 0;
}
.id .topmenu li.active .home,
.id .topmenu li:hover .home {
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-id.png") no-repeat 0 -89px;
}
.id .topmenu li.active .introduction,
.id .topmenu li:hover .introduction {
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-id.png") no-repeat -134px -89px;
}
.id .topmenu li.active .characteristic,
.id .topmenu li:hover .characteristic {
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-id.png") no-repeat -299px -89px;
}
.id .topmenu li.active .topup,
.id .topmenu li:hover .topup {
    background: url("//content-us.game-bean.com/image/rot/website2501/topmenu-id.png") no-repeat -388px -89px;
}

.language-box {
    position: relative;
    flex: none;
    align-self: flex-start;
    width: 180px;
    margin-top: 22px;
    border-radius: 10px;
    background-color: #282828;
    font-size: 16px;
    text-align: center;
    overflow: hidden;
}
.language-box > a {
    display: block;
    position: relative;
    padding: 10px 0;
    line-height: 1.5;
}
.language-box > a::before {
    content: "";
    display: block;
    position: absolute;
    top: 10px;
    left: 15px;
    width: 24px;
    height: 24px;
    font-size: 0;
    line-height: 0;
    background: url("//content-us.game-bean.com/image/dne/website2501/icon-language.png") no-repeat;
}
.language-box > a::after {
    content: "";
    display: block;
    position: absolute;
    top: 13px;
    right: 13px;
    width: 18px;
    height: 18px;
    font-size: 0;
    line-height: 0;
    background: url("//content-us.game-bean.com/image/dne/website2501/icon-down.png") no-repeat;
}
.languages {
    display: none;
    padding-bottom: 5px;
    background-color: #282828;
}
.languages li {
    margin: 5px 0;
}
.languages li a {
    display: block;
    padding: 10px 0;
}
.languages li a:hover {
    color: #000;
    background-color: #35c3fe;
}
.links {
    flex: none;
    display: flex;
    align-items: center;
    margin-left: 20px;
}
.links li {
    flex: none;
    margin: 0 10px;
}
.links li a {
    display: block;
    height: 45px;
}
.links li a img {
    display: block;
    height: 100%;
    width: auto;
}

.page1 {
    position: relative;
    width: 100%;
    min-width: var(--base-min-width);
    margin: 0 auto;
}

.page2 {
    position: relative;
    width: 100%;
    height: 10rem;
    min-width: var(--base-min-width);
    margin: 0 auto;
    background: url("//content-us.game-bean.com/image/rot/website2501/page2-role.png") no-repeat 95% top;
    background-size: auto 110%;
}
.page2 h3 {
    position: absolute;
    top: 1.4rem;
    left: 1.8rem;
    width: 3.72rem;
}
.page2 h3 img,
.page3 h3 img {
    display: block;
    width: 100%;
    height: auto;
}
.page2 article {
    position: absolute;
    top: 2.5rem;
    left: 1.8rem;
    width: 5.8rem;
}
.page3 {
    width: 100%;
    min-width: var(--base-min-width);
    margin: 0 auto;
    padding-bottom: 0.8rem;
    box-sizing: border-box;
}
.page3 h3 {
    margin: 0 0 0.6rem 1.8rem;
    width: 4.22rem;
}
.page3 article {
    position: relative;
    width: 9.93rem;
    margin: 0 auto;
}
.page3 .swiper2 {
    width: 100%;
    border: 2px solid #545662;
    overflow: hidden;
}
.page3 .swiper-button-prev,
.page3 .swiper-button-next {
    width: 0.35rem;
    height: 0.67rem;
}
.page3 .swiper-button-prev {
    left: -0.8rem;
    background: url("//content-us.game-bean.com/image/rot/website2501/swiper-arrow-left.png") no-repeat;
    background-size: 100%;
}
.page3 .swiper-button-next {
    right: -0.82rem;
    background: url("//content-us.game-bean.com/image/rot/website2501/swiper-arrow-right.png") no-repeat;
    background-size: 100%;
}
.page3 .swiper-button-prev::after,
.page3 .swiper-button-next::after {
    content: "";
}
.page3 .swiper-pagination {
    bottom: -0.4rem;
}
.page3 .swiper-pagination-bullet {
    width: 50px;
    height: 10px;
    margin: 0 10px !important;
    border-radius: 20px;
    background-color: #999;
}
.page3 .swiper-pagination-bullet-active {
    background-color: #35c3fe;
}
.page4 {
    position: relative;
    width: 100%;
    min-width: var(--base-min-width);
    height: 8.6rem;
    margin: 0 auto;
    background: url("//content-us.game-bean.com/image/rot/website2501/page4-bg.png") no-repeat center bottom;
    background-size: 100% auto;
}
.footer {
    width: 100%;
    min-width: var(--base-min-width);
    margin: 0 auto;
    padding: 30px 0 20px;
    background-color: #000;
}
.footer article {
    display: flex;
    width: 800px;
    margin: 0 auto;
}
.footer article header {
    flex: none;
    margin-right: 50px;
}
.footer article header img {
    display: block;
    width: 100%;
    height: auto;
}
.footer article footer {
    flex: auto;
    font-size: 16px;
}
.footer article footer p a {
    display: inline-block;
    margin-right: 30px;
}

.swiper {
    width: 100%;
}
.swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
}
.buttons {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    margin-top: 40px;
}
.buttons li {
    flex: none;
    margin: 0 30px;
}
.buttons li a {
    display: block;
    width: 363px;
}
.buttons li a img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}