html,body{width: 100%;max-width: 100%;height: 100%;font-family: "Arial","微软雅黑";}
html{overflow-x: hidden;}
.pull-left{float:left;}
.pull-right{float:right;}
.absolute{position: absolute;}

/* home */

.container{width: 100%;}
.content-wrapper{width: 100%;height: 100%;max-width: 100%;}
.bg{width: 100%;height: 100%;position:absolute;top:0;left:0;z-index: -1;}
.bg .bg-img{width: 100%;position: absolute;top:0;left:0;}

/*  coming soon */
.coming-soon{display: none;width: 100%;height: 100%;position: fixed;top:0;left:0;overflow: hidden;background: rgba(0, 0, 0, 0.7);z-index: 100;}
.coming-soon .prompt-wrap{width: 100%;height: 100%;position: relative;}
.coming-soon .prompt-wrap .prompt-info{font-size:1.5rem;color: #feffe9;width: 11rem;height: 2.8rem;text-align:center;line-height: 2.8rem;border-radius:2rem;background: rgba(255, 255, 255, 0.5);position: absolute;top:40%;left: 50%;margin-left: -5.5rem;}
/* home-alert */

.home-alert{display: none;width: 100%;height: 100%;position: fixed;top:0;left:0;overflow: hidden;background: rgba(0, 0, 0, 0.7);z-index: 100;}
.home-alert .prompt-wrap{width: 100%;height: 100%;position: relative;}
.home-alert .prompt-wrap .prompt-title .close-alert{width:1.2rem;height:1.2rem;line-height: 1rem;z-index: 9;position: absolute;right: -0.5rem;top:-0.5rem;background: url("../images/video-close.png") no-repeat;background-size: 100% 100%;}
.home-alert .prompt-wrap .prompt-info{width: 12rem;height: 5rem;border-radius: 0;text-align: center;background: rgba(255, 255, 255, 0.5);position: absolute;top:35%;left: 50%;margin-left: -6rem;line-height: 1rem;}
.home-alert .prompt-wrap .prompt-info .prompt-title{font-size: 1rem;color: #feffe9;letter-spacing: 0.1rem;margin-top: 1.3em;}
.home-alert .prompt-wrap .prompt-info .xb-code{font-size: 0.9rem;color: #ff1c1c;letter-spacing: 0.1rem;margin-top: 0.5rem;}



.active-items{width: 100%;padding-top: 20rem;height: 14.2rem;overflow: hidden;position: relative;}
.active-items .active-btn div{width:100%;height:100%;position: relative;}
.active-items .active-btn div a{position: absolute;margin-top: 15.5rem;}

.active-items .combat div .challeng125{transition-delay: 0.01s;-webkit-transition-delay: 0.01s;-moz-transition-delay: 0.01s;-ms-transition-delay: 0.01s;-o-transition-delay: 0.01s;width: 8.65625rem;height: 8.25rem;left:-1.80rem;top:4.00rem;z-index:1;background: url("../images/challenge125.png") center center no-repeat;background-size: 100% 100%;}
.active-items .combat div .valentines-day{transition-delay: 0.5s;-webkit-transition-delay: 0.5s;-moz-transition-delay: 0.5s;-ms-transition-delay: 0.5s;-o-transition-delay: 0.5s;width: 7.60625rem;height: 8.36875rem;left:6.50rem;top:3.80rem;z-index:3;background: url("../images/valentines-day.png") center center no-repeat;background-size: 100% 100%;}
.active-items .combat div .up-combat{transition-delay: 0.99s;-webkit-transition-delay: 0.99s;-moz-transition-delay: 0.99s;-ms-transition-delay: 0.99s;-o-transition-delay: 0.99s;width: 10.40625rem;height: 8.96875rem;left:11.8rem;top:3.0rem;z-index:2;background: url("../images/up-combat-active.png") center center no-repeat;background-size: 100% 100%;}
.active-items .combat div .active{width: 10.65625rem;height: 9.25rem;background: url("../images/up-combat-active.png") center center no-repeat;background-size: 100% 100%;}

/*.active-ani{animation: uad 2.2s ease 0s infinite; -moz-animation: uad 2.2s ease 0s infinite; -webkit-animation: uad 2.2s ease 0s infinite; -o-animation: uad 2.2s ease 0s infinite;-ms-animation: uad 2.2s ease 0s infinite;}*/

.download-item{width: 100%;height: 2.5rem;position:relative;padding-top: 11.8rem;text-align: center;}
.download-item a{width: 8.03125rem;height: 2.46875rem;transition: 0.8s all;  -webkit-transition: 0.8s all;  -moz-transition: 0.8s all;  -o-transition: 0.8s all;  -ms-transition: 0.8s all;  transition-delay: 0s;  -webkit-transition-delay: 0s; -moz-transition-delay: 0s;  -o-transition-delay: 0s;  -ms-transition-delay: 0s;  opacity: 0;  transform: translateY(1.0625rem);  -webkit-transform: translateY(1.0625rem);  -moz-transform: translateY(1.0625rem);  -o-transform: translateY(1.0625rem);  -ms-transform: translateY(1.0625rem);}
.download-item-active a{opacity: 1;transform: translateY(0px);-webkit-transform: translateY(0px);-moz-transform: translateY(0px);-o-transform: translateY(0px);-ms-transform: translateY(0px);}
.download-item-active a:first-child {transition-delay: 1.5s;-webkit-transition-delay: 1.5s; -moz-transition-delay: 1.5s;  -o-transition-delay: 1.5s;  -ms-transition-delay: 1.5s;  }
.download-item-active a:first-child + a {  transition-delay: 1.8s;  -webkit-transition-delay: 1.8s;  -moz-transition-delay: 1.8s;  -o-transition-delay: 1.8s;  -ms-transition-delay: 1.8s;  }
.download-item a:hover,.download-item a:active{-webkit-box-shadow: 0 0 5px #fff;-moz-box-shadow: 0 0 5px #fff;-ms-box-shadow: 0 0 5px #fff;-o-box-shadow: 0 0 5px #fff;box-shadow: 0 0 5px #fff;border-radius: 0.3rem;}
.download-item .app{background: url("../images/googlePlay.png") center center no-repeat;background-size: 100% 100%;z-index: 4;position: relative;}
.download-item .appStore{background: url("../images/appStore.png") center center no-repeat;background-size: 100% 100%;}
.download-item .googlePlay{background: url("../images/googlePlay.png") center center no-repeat;background-size: 100% 100%;}
.download-item .facebook{background: url("../images/facebook.png") center center no-repeat;background-size: 100% 100%;z-index: 5;position: relative}

/* home end*/
/* inner page */

.active-con{width: 100%;height: 100%;min-height: 42.5rem;background: #040418 url("../images/combat-inner-bg.jpg") top center no-repeat;background-size: 100% 47.9rem;}
.active-con .home-icon-wrap{width: 100%;position: relative;}
.active-con .home-icon-wrap .home-icon{width: 1.625rem;height: 1.625rem;position: absolute;left: 1.0rem;top:0.80rem;background: url("../images/home-icon.png") center center no-repeat;background-size: 100% 100%;}

/* live */

.active-live .live-wrapper{width: 100%;padding-top: 9.5rem;}
.active-live .live-wrapper .live-front{width: 96%;margin: 0 auto;height: 11.58125rem;background: #000b2e;margin-bottom: 0.6rem;position: relative;}
.active-live .live-wrapper #iframe{width:100%;height: 100%;position: absolute;left: 0;top:0;background: #000b2e; }
.active-live .live-wrapper .live-front .poster{width: 100%;height: 100%;position: absolute;}
.active-live .live-wrapper .live-front .poster .poster-img{width: 100%;height: 100%;opacity: 0.8;}
.active-live .live-wrapper .live-front .poster .live-status{line-height: 0.9rem;position:absolute;left:0.5rem;top:0.5rem;border:1px solid #fff;font-size: 0.5625rem;color:#fff;padding: 0.1rem 0.6rem;border-radius: 0.2rem;-webkit-border-radius: 0.2rem;-moz-border-radius: 0.2rem;-ms-border-radius: 0.2rem;}
.active-live .live-wrapper .live-front .poster .play{width: 5.1875rem;height: 5.1875rem;position:absolute;top:50%;left:50%;margin-left:-2.59375rem;margin-top:-2.59375rem;background: url("../images/play.png") no-repeat;background-size: 100% 100%;}

.active-live .new-ticker{width:100% ;height:1.5625rem;background:#280079;}
.active-live .new-ticker .marquee{width:100%;height:1.5625rem;background:#280079;overflow:hidden;}
.active-live .new-ticker .marquee .marquee-wrapper{width:800% ;background:#280079;}
.active-live .new-ticker .marquee .marquee-wrapper .marquee-con1,.new-ticker .marquee .marquee-wrapper .marquee-con2{line-height:1.3025rem ;}
.active-live .new-ticker .marquee .marquee-wrapper .marquee-con1 a,.new-ticker .marquee .marquee-wrapper .marquee-con2 a{height:1.5625rem;line-height:1.5625rem ;padding:0 0.5rem;font-size: 0.5625rem;color:#fff;}


/* rule */
.active-rule{margin-bottom: 0.625rem;}
.rule-wrapper {width: 100%;height: 20.28125rem;background: url("../images/rule-bg.png") no-repeat;background-size: 100% 100%;position: relative;}
.rule-wrapper #demo {overflow: hidden;margin: 1rem auto 0;margin-top: 0; }
.rule-wrapper p{padding:0 1.4rem;}
.rule-wrapper p span{  display: block;color: #fff;font-size: 0.5625rem;text-align: left;line-height: 1rem;}
.rule-wrapper p .rule-con-title{width:4.375rem;height: 1.1875rem;margin:0.4rem 0 0.2rem 0;}
.rule-wrapper p .active-rule-title{background: url("../images/active-rule-title.png") no-repeat;background-size: 100% 100%;margin-top: 1.8rem;}
.rule-wrapper p .active-reward-title{background: url("../images/active-reward-title.png") no-repeat;background-size: 100% 100%;}
.rule-wrapper p .active-details-title{background: url("../images/active-details-title.png") no-repeat;background-size: 100% 100%;}
.rule-wrapper p span a{display: block;color: #328cfb;font-size: 0.5625rem;text-align: left;}

/* inner download */
.active-con .download{width: 100%;text-align: center;padding:1.3rem 0;}
.active-con .download a{width: 8.125rem;height: 2.46875rem;}
.active-con .download .inner-app{background: url("../images/inner-googlePlay.png") center center no-repeat;background-size: 100% 100%;z-index: 4;position: relative;}
.active-con .download .inner-appStore{background: url("../images/inner-appStore.png") center center no-repeat;background-size: 100% 100%;}
.active-con .download .inner-googlePlay{background: url("../images/inner-googlePlay.png") center center no-repeat;background-size: 100% 100%;}
.active-con .download .facebook{background: url("../images/inner-facebook.png") center center no-repeat;background-size: 100% 100%;z-index: 5;position: relative}

/* inner page  end */

/* keyframe */

/* active */
@keyframes uad {0%,100%{ transform: translateY(-3px);}50%{transform:translateY(0);}}
@-webkit-keyframes uad {0%,100%{-webkit-transform: translateY(-3px);}50%{-webkit-transform: translateY(0);}}
@-ms-keyframes uad {0%,100%{ -ms-transform: translateY(-3px);}50%{-ms-transform: translateY(0);}}
@-o-keyframes uad {0%,100%{-o-transform: translateY(-3px);}50%{ -o-transform: translateY(0);}}

.slideup3 {
    -webkit-transform: translateY(-15.5rem);
    -moz-transform: translateY(-15.5rem);
    -o-transform: translateY(-15.5rem);
    -ms-transform: translateY(-15.5rem);
    transform: translateY(-15.5rem);
    -webkit-transition: -webkit-transform 0.3s ease-in;
    -moz-transition: -moz-transform 0.3s ease-in;
    -o-transition: -o-transform 0.3s ease-in;
    -ms-transition: -ms-transform 0.3s ease-in;
    transition: transform 0.3s ease-in;
    animation: slideup 0.5s ease-in;
    -moz-animation: slideup 0.5s ease-in;
    -webkit-animation: slideup 0.5s ease-in;
    -o-animation: slideup 0.5s ease-in;
    -ms-animation: slideup 0.5s ease-in;
}

@-webkit-keyframes slideup {0%{ opacity: 0; }50%{ opacity: 0.5;}100%{opacity: 1; }}
@-moz-keyframes slideup {0%{ opacity: 0; }50%{ opacity: 0.5;}100%{opacity: 1; }}
@-ms-keyframes slideup {0%{ opacity: 0; }50%{ opacity: 0.5;}100%{opacity: 1; }}
@-o-keyframes slideup {0%{ opacity: 0; }50%{ opacity: 0.5;}100%{opacity: 1; }}
@keyframes slideup {0%{ opacity: 0; }50%{ opacity: 0.5;}100%{opacity: 1; }}