*{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-tw/logo_tw.png) no-repeat;
    background-size: 2.3rem 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;
    text-align: center;
    color: #fff;
    font-size: .24rem;
    font-weight: bold;
}
.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;
    line-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 .mycard {
    background: url(//content.game-bean.com/image/coc-tw/mycard.png) center no-repeat;
    background-size: 1.24rem auto;
    background-color: rgba(0,0,0,.6);
}
.banner-wrap .header-wrap .nav-list .nav-pay .igamebuy {
    background: url(//content.game-bean.com/image/coc-tw/IGameBuy.png) center no-repeat;
    background-size: 1.62rem auto;
    background-color: rgba(0,0,0,.6);
}
.banner-wrap .header-wrap .nav-list .nav-pay .enjoypay {
    background: url(//content.game-bean.com/image/coc-tw/enjoypay.png) center no-repeat;
    background-size: 1.62rem auto;
    background-color: rgba(0,0,0,.6);
}
.banner-wrap .header-wrap .nav-list .nav-pay .deepgrow {
    background: url(//content.game-bean.com/image/coc-tw/deepgrow_m.png) center no-repeat;
    background-size: 1.9rem 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;
    font-size: .18rem;
}
.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;
    margin: 0 5px;
}
.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: 9.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: .4rem 0;
}
.introduce-wrap .introduce-swiper .swiper-slide .career-text {
    padding: 0 .6rem;
    font-size: .24rem;
    font-family: HiraKakuProN;
    font-weight: normal;
    color: #FFFFFF;
    line-height:  1.8;
}
.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{
    background: black;
    text-align: center;
    padding: .4rem 0;
}

.footer-logo {
   text-align: center;
   height: .4rem;
}
.footer-logo img{
    width: 1rem;
    height: auto;
}
.footer-15 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.2rem auto .2rem;
}
.footer-15 .text {
    font-size: .12rem;
    color: rgba(255,255,255, .6);
    line-height: 1.5;
    text-align: left;
    max-width: 6rem;
}
.footer-15 img {
    width: .75rem;
    margin-right: .1rem;
}

.footer .aggrements {
    text-decoration: none;
    font-size: .14rem;
}
.footer .aggrements a {
    color: rgba(255,255,255, .6);
    display: inline-block;
    margin: 0 .1rem;
}

.footer a:hover {
    color: rgb(254, 254, 255);
}
/* 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;
}