*{margin:0;padding:0}
ul,li{list-style:none}
h1,div,ul,li,em,form,h1{margin:0;padding:0;font-size:100%;font-weight:normal;-webkit-tap-highlight-color:transparent;font-style:normal}
em,i{font-style:normal}
html{-webkit-tap-highlight-color:transparent;width:100%;height:100%;font-size:300%}
body,html{position:relative;overflow-x:auto;overflow:auto;height:auto;overflow-x: hidden;}
body{font-family:'Palatino Linotype','microsoft yahei',Verdana,Arial,Helvetica,sans-serif;background:#000;width:100%;height:100%;}
a{text-decoration:none;color:#FFF;outline:none}
div,p,nav,ul,li,input{box-sizing:border-box}
input{border:none;outline-style:none;outline:none;background:transparent;vertical-align:top}
::-webkit-input-placeholder{color:rgba(255,255,255,.2);font-size:0.24rem}
:-moz-placeholder{color:rgba(255,255,255,.2);font-size:0.24rem}
::-moz-placeholder{color:rgba(255,255,255,.2);font-size:0.24rem}
:-ms-input-placeholder{color:rgba(255,255,255,.2);font-size:0.24rem}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(14,25,31,.3);background-color:#869bb4;border-radius:6px}
::-webkit-scrollbar-thumb{border-radius:6px;-webkit-box-shadow:inset 0 0 6px rgba(28,41,50);background-color:#cad6ed}
::-webkit-scrollbar-button{display:none}
::-webkit-scrollbar-corner{}
.flex{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex}
.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
.flex-justify-content{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}
.flex-space-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}
.swiper-pagination .swiper-pagination-bullet:focus{outline:none}
.swiper-pagination-clickable .swiper-pagination-bullet{cursor:auto}
input::-webkit-input-placeholder{font-size:0.18rem}
input:-moz-placeholder{font-size:0.18rem}
input::-moz-placeholder{font-size:0.18rem}
input:-ms-input-placeholder{font-size:0.18rem}
img {width: auto; height: 100%;vertical-align: top;}

.wrap {
    width: 100%;
    position: relative;
    margin: 0 auto;
}
.banner-wrap {
    width: 100%;
    position: relative;
    height: 11.36rem;
}
.banner-wrap .header-wrap {
    height: .96rem;
    background: #0B0B0B;
    padding: 0 .35rem;
}
.banner-wrap .header-wrap .header {
    width: 100%;
    background: url(//content.game-bean.com/image/coc-jp/pc_new/logo_jp.png) no-repeat;
    background-size: 2.68rem auto;
    background-position: center .12rem;
    height: 100%;
    position: relative;
}
.banner-wrap .header-wrap .nav-btn {
    width: .54rem;
    height: .06rem;
    background: #fdaf18;
    border-radius: .3rem;
    position: relative;
}

.banner-wrap .header-wrap .nav-btn::before {
    content: '';
    position: absolute;
    top: -.18rem;
    left: 0;
    width: 100%;
    height: .06rem;
    background: #fdaf18;
    border-radius: .3rem;
    transform: rotateZ(0deg);
    transition: all .3s;
}
.banner-wrap .header-wrap .nav-btn::after {
    content: '';
    position: absolute;
    bottom: -.18rem;
    left: 0;
    width: 100%;
    height: .06rem;
    background: #fdaf18;
    border-radius: .3rem;
    transform: rotateZ(0deg);
    transition: all .3s;
}
.banner-wrap .header-wrap .nav-btn.active {
    background-color: transparent;
}
.banner-wrap .header-wrap .nav-btn.active::before {
    content: '';
    transform: rotateZ(42deg);
    transform-origin: left center;
}
.banner-wrap .header-wrap .nav-btn.active::after {
    content: '';
    transform: rotateZ(-42deg);
    transform-origin: left center;
}
.banner-wrap .header-wrap .nav-list {
    position: absolute;
    top: .96rem;
    left: -.28rem;
    width: 2.5rem;
    background: rgba(0,0,0,.9);
    border-radius: 0 0 .12rem .12rem;
    display: none;
}
.banner-wrap .header-wrap .nav-list.show-nav-list {
    display: block;
}
.banner-wrap .header-wrap .nav-list .nav-item {
    width: 100%;
    height: .6rem;
    border-bottom: 1px solid #303030;
}
.banner-wrap .header-wrap .nav-list .nav-item a {
    display: block;
    width: 100%;
    height: 100%;
    background: url(//content.game-bean.com/image/coc-jp/pc_new/mobile_gat/nav_text.png) no-repeat;
    background-size: 1.36rem auto;
    font-size: 0;
}
.banner-wrap .header-wrap .nav-list .nav-home a {
    background-position: center .18rem ;
}
.banner-wrap .header-wrap .nav-list .nav-introduce a {
    background-position: center -.42rem;
}
.banner-wrap .header-wrap .nav-list .nav-feature a {
    background-position: center -1.02rem;
}
.banner-wrap .header-wrap .nav-list .nav-pay .pay-btn {
    width: 100%;
    height: .6rem;
    background: url(//content.game-bean.com/image/coc-jp/pc_new/mobile_gat/nav_text.png) no-repeat;
    background-size: 1.36rem auto;
    background-position: center -1.62rem;
}
.banner-wrap .header-wrap .nav-list .nav-pay .pay-item {
    width: 100%;
    height: .6rem;
    border-bottom: 1px solid #303030;
    display: none;
}
.banner-wrap .header-wrap .nav-list .nav-pay.show-nav-pay .pay-item {
    display: block;
}
.banner-wrap .header-wrap .nav-list .nav-pay .pay-boa {
    background: url(//content.game-bean.com/image/coc-jp/pc_new/boacompra.png) center no-repeat;
    background-size: 1.7rem auto;
    background-color: rgba(0,0,0,.6);
}
.banner-wrap .header-wrap .nav-list .nav-pay .pay-xsolla {
    background: url(//content.game-bean.com/image/coc-jp/pc_new/Xsolla.png) center no-repeat;
    background-size: 1.26rem auto;
    background-color: rgba(0,0,0,.6);
}
.banner-wrap .header-wrap .nav-list .links-wrap {
    height: .6rem;
}
.banner-wrap .header-wrap .nav-list .links-wrap .link {
    width: .4rem;
    height: .4rem;
    background: url(//content.game-bean.com/image/coc-jp/pc_new/mobile_gat/nav_media_links.png) no-repeat;
    background-size: 1.23rem auto;
    margin: 0 .1rem;
}
.banner-wrap .header-wrap .nav-list .links-wrap .link-fb {
    background-position: .1rem center;
}
.banner-wrap .header-wrap .nav-list .links-wrap .link-twitter {
    background-position: -.35rem center;
}
.banner-wrap .header-wrap .nav-list .links-wrap .link-discord {
    background-position: -.85rem center;
}
.banner-wrap .header-wrap .language-wrap {
    width: .8rem;
    position: relative;
}
.banner-wrap .header-wrap .language-wrap .lang-icon {
    width: 100%;
    height: .96rem;
    background: url(//content.game-bean.com/image/coc-jp/pc_new/mobile_gat/icon_language.png) left center no-repeat;
    background-size: .52rem auto;
    position: relative;
}
.banner-wrap .header-wrap .language-wrap .lang-icon::after {
    content: '';
    display: block;
    width: .22rem;
    height: .2rem;
    background: url(//content.game-bean.com/image/coc-jp/pc_new/icon_header_arrow.png) center no-repeat;
    background-size: 100% auto;
    position: absolute;
    top: .38rem;
    right: 0;
    transform: rotateZ(-180deg);
    transition: all .3s;
}
.banner-wrap .header-wrap .language-wrap.show-lang-list .lang-icon::after {
    content: '';
    transform: rotateZ(0);
}
.banner-wrap .header-wrap .language-wrap .lang-list {
    display: none;
    width: 2rem;
    position: absolute;
    top: .96rem;
    right: -.28rem;
    background: rgba(0,0,0,.9);
    line-height: .4rem;
    color: #ffffff;
    font-size: .18rem;
    border-radius: 0 0 .12rem .12rem;
}
.banner-wrap .header-wrap .language-wrap.show-lang-list .lang-list {
    display: block;
}
.banner-wrap .header-wrap .language-wrap .lang-list li {
    height: .4rem;
}
.banner-wrap .header-wrap .language-wrap .lang-list li a {
    display: block;
    text-align: center;
    font-family: PingFangSC;
    font-weight: 400;
}
.banner-wrap .header-wrap .language-wrap .lang-list li a.active {
    color: #1B1B1B;
    background-color: #fdaf18;
}
.banner-wrap .banner-bg {
    position: absolute;
    top: .96rem;
    left: 0;
    width: 100%;
    z-index: -1;
}
.banner-wrap .banner-bg img {
    width: 100%;
    height: auto;
}
.banner-wrap .download-wrap {
    width: 100%;
    padding: .3rem;
    position: absolute;
    bottom: .2rem;
}
.banner-wrap .download-wrap a {
    width: 3.2rem;
    height: .74rem;
}
.banner-wrap .download-wrap a img {
    width: 100%;
    height: auto;
}
.content {
    width: 100%;
    background: url(//content.game-bean.com/image/coc-jp/pc_new/mobile_gat/content_bg.jpg) center top no-repeat;
    background-size: 100% auto;
    height: 21.03rem;
}
.content .part {
    width: 100%;
    padding-top: .5rem;
}
.content .part .part-title {
    width: 100%;
    text-align: center;
    height: .74rem;
    margin-bottom: .5rem;
}
.content .part .part-title img {
    width: auto;
    height: 100%;
    
}
/* 游戏介绍 */
.introduce-wrap {
    position: relative;
}
.introduce-wrap .introduce-swiper{
    width: 100%;
    height: 10.5rem;
    position: relative;
}
.introduce-wrap .introduce-swiper .swiper-slide .career-pic {
    height: 6.15rem;
    padding-left: .2rem;
}

.introduce-wrap .introduce-swiper .swiper-slide .career-name {
    height: .54rem;
    padding-left: .6rem;
    margin: .1rem 0;
}
.introduce-wrap .introduce-swiper .swiper-slide .career-text {
    padding: 0 .6rem;
    font-size: .18rem;
    font-family: HiraKakuProN;
    font-weight: normal;
    color: #FFFFFF;
    line-height:  .3rem;
}
.introduce-wrap .swiper-button-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: .8rem;
    height: .68rem;
    margin: auto;
    /* background-color: pink; */
    width: 43%;
}
.introduce-wrap .swiper-button-prev {
    width: 1.1rem;
    height: .68rem;
    background: url(//content.game-bean.com/image/coc-jp/pc_new/swiper_arrow.png) no-repeat;
    background-size: 2rem auto;
    background-position: 0 -2.8rem;
    position: absolute;
    /* bottom: .8rem;
    left: 2.5rem;
    top: auto; */
    /* width: 100%; */
}
.introduce-wrap .swiper-button-prev:hover {
    background-position: 0 0;
}

.introduce-wrap .swiper-button-next {
    width: 1.1rem;
    height: .68rem;
    background: url(//content.game-bean.com/image/coc-jp/pc_new/swiper_arrow.png) no-repeat;
    background-size: 2rem auto;
    background-position: 0 -1.8rem;
    position: absolute;
    /* bottom: .8rem;
    right: 2.5rem;
    top: auto; */
}
.introduce-wrap .swiper-button-next:hover {
    background-position: 0 -.83rem;
}
.swiper-button-next:after, .swiper-button-prev:after {
    display: none !important;
}
.introduce-bg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
}
/* 游戏特色 */
.feature-wrap {
    width: 100%;
    /* margin-top: .5rem; */
}
.feature-wrap .feature-swiper {
    width: 100%;
    height: 4.7rem;
    position: relative;
}
.feature-wrap .feature-swiper .swiper-slide {
    width: 100%;
    padding: 0 .3rem;
}
.feature-wrap .feature-swiper .swiper-slide img {
    width: 100%;
    height: auto;
}

.feature-wrap .feature-swiper .swiper-pagination-bullet {
    width: .56rem;
    height: .10rem;
    background: #3E3E3E;
    border-radius: .05rem;
    opacity: 1;
    /* margin: 0 .4rem; */
}
.feature-wrap .feature-swiper .swiper-pagination-bullet-active {
    background-color: rgba(253, 175, 24, 1);
}
.feature-wrap .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 .2rem;
}
/* 媒体链接 */
.media-links {
    width: 100%;
    position: absolute;
    bottom: .25rem;
    text-align: center;
    font-size: 0;
}
.media-links a {
    display: inline-block;
    width: .7rem;
    height: .7rem;
    margin: 0 .1rem;
    background: url(//content.game-bean.com/image/coc-jp/pc_new/mobile_gat/media_links.png) no-repeat;
    background-size: 2.5rem auto;
}
.media-links a.media-links-fb {
    background-position: 0 center;
}
.media-links a.media-links-twitter {
    background-position: -.9rem center;
}
.media-links a.media-links-dc {
    background-position: right center;
}
/* 底部 */
footer {
    width: 100%;
    padding: .6rem;
    background: #0E0C0C;
    position: relative;
    z-index: 9;
    padding: .25rem 0;
    text-align: center;
}
footer .footer-logo-wrap {
    height: 1.28rem;
    margin-bottom: .1rem;
}
footer .links {
    line-height: .28rem;
    padding: 0 .3rem;
    font-size: 0;
}
footer .links a {
    font-size: .14rem;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #DEDEDE;
    line-height: 2;
    opacity: 0.7;
    padding-right: .4rem;
    position: relative;
}
footer .links a:hover {
    color: #FFF;
}
footer .links a::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: .2rem;
    height: .14rem;
    width: 1px;
    margin: auto;
    background: #393737;
}
footer .links a:nth-last-child(1):after {
    display: none;
}
footer .footer-text {
    font-size: .12rem;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #DEDEDE;
    line-height: 2;
}
/* giftcode  backtop */
.gift-code {
    position: fixed;
    bottom: 1.7rem;
    right: .2rem;
    height: 1.5rem;
    z-index: 10;
}

.backTop{
    width: 0.8rem;
    height: 0.8rem;
    background: url("//content.game-bean.com/image/coc-cn/pc/btn-20221021-backtop.png") no-repeat;
    background-size: 100% 100%;
    position: fixed;
    z-index: 9;
    bottom: .8rem;
    right: .8rem;
    cursor: pointer;
    display: none;
}

.banner-wrap .header-wrap .nav-list .nav-pay a {
    background: none;
    font-size: 14px;
    text-align: center;
    line-height: 30px;
}
/*弹层样式*/
.mask {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.7);
}
.mask-box {
    width: 90vw;
    max-width: 600px;
    margin: 30% auto 0;
    border: 1px solid #595959;
    box-sizing: border-box;
    background: #000 url("//content-us.game-bean.com/image/coc-en/vip-center/bg-black.jpg") no-repeat;
    background-size: cover;
}
.mask-header {
    position: relative;
    padding: 15px;
    text-align: center;
}
.mask-header h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: #ffe29b;
}
.mask-body {
    padding: 15px;
    font-size: 14px;
    color: #000;
    background: #e5e5e5 url("//content-us.game-bean.com/image/coc-en/vip-center/bg-white.jpg") no-repeat;
    background-size: cover;
}
.mask-ad {
    position: relative;
    width: 90vw;
    margin: 40% auto 0;
    box-sizing: border-box;
}
.mask-ad img {
    display: block;
    max-width: 100%;
}
.btn-close {
    display: block;
    position: absolute;
    top: 10px;
    right: 8px;
    width: 25px;
    height: 25px;
    font-size: 0;
    line-height: 0;
    background: transparent url("//content-us.game-bean.com/image/coc-en/vip-center/icon-close.png") no-repeat;
    background-size: 100% 100%;
}
.btn-lg-yellow {
    display: inline-block;
    padding: 10px 30px;
    border-radius: 6px;
    font-size: 16px;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    color: #000;
    background-color: #f6be10;
}
.mask-ad .btn-close {
    top: -35px;
    right: 0;
    width: 30px;
    height: 30px;
    background: transparent url("//content-us.game-bean.com/image/coc-en/pay-center/icon-close2.png") no-repeat;
    background-size: 100% 100%;
}
a.btn-user {
    display: block;
    width: 56px;
    height: 30px;
}
a.btn-user img, a.btn-vip img {
    display: block;
    width: auto;
    height: 100%;
}
a.btn-vip {
    display: block;
    width: 36px;
    height: 30px;
}
.none {
    display: none !important;
}
.block {
    display: block !important;
}