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.35);position: absolute;top:40%;left: 50%;margin-left: -5.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 .challeng 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: 9.65625rem;height: 9.25rem;left:-1.80rem;top:3.30rem;z-index:3;background: url("../images/challenge125-active.png") center center no-repeat;background-size: 100% 100%;}
.active-items .challeng 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.90625rem;height: 8.96875rem;left:7.40rem;top:3.60rem;z-index:2;background: url("../images/valentines-day-active.png") center center no-repeat;background-size: 100% 100%;}
.active-items .challeng 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:12.8rem;top:3.0rem;z-index:1;background: url("../images/up-combat.png") center center no-repeat;background-size: 100% 100%;}
.active-items .challeng div .active{width: 9.65625rem;height: 9.25rem;background: url("../images/challenge125-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:absolute;bottom: 0;text-align: center;left:0;}
.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: 35.5rem;background: #040418 url("../images/challenge-inner-bg.jpg") top center no-repeat;background-size: 100% auto;}
.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%;}

.active-con .active-sec .title{width: 100%;height: 2.125rem;margin-bottom: 0.78125rem;}
.active-con .active-sec .title a{width: 100%;height: 2.125rem;background: url("../images/active-reward.png") center center no-repeat;background-size: 8.40625rem 2.125rem;}
.active-con .active-sec .title .reward-title{width: 100%;height: 2.125rem;background: url("../images/active-reward.png") center center no-repeat;background-size: 8.40625rem 2.125rem;}
.active-con .active-sec .title .rule-title{width: 100%;height: 2.125rem;background: url("../images/active-rule.png") center center no-repeat;background-size: 8.40625rem 2.125rem;}
.active-con .active-sec .title .signup-title{width: 100%;height: 2.125rem;background: url("../images/active-signup.png") center center no-repeat;background-size: 8.40625rem 2.125rem;}
/* reward */
.active-con .active-reward{padding-top: 9rem;}
.active-con .active-reward .reward-list{height: 17.8rem;padding: 0 1.375rem;}
.active-con .active-reward .reward-list dl{width:100%;}
.active-con .active-reward .reward-list dl dd{width:8.5125rem;height: 8.5125rem;margin-bottom: 0.2rem;}
.active-con .active-reward .reward-list dl dd:first-child{float: left;}
.active-con .active-reward .reward-list dl dd:last-child{float: right;}
.active-con .active-reward .reward-list dl dd a img{width:100%;}
/* rule */
.active-rule{margin-bottom: 0.625rem;}
.rule-wrapper {width: 17rem;height: 31.2rem;border: solid 1px #535971;background: rgb(8, 17, 52);margin: 0.2666666rem auto 0;position: relative;}
.rule-wrapper #demo {width: 17rem;height: 30.2rem;overflow: hidden;margin: 1rem auto 0;  }
.rule-wrapper #changpage {width: 100%;position: absolute;height: 2.773rem;z-index: 10;bottom: 0.8rem;text-align: center;}
.rule-wrapper #changpage a,.rule-wrapper #changpage span {display: inline-block;text-align: center;  }
.rule-wrapper #changpage img {width: 7.625rem;height: 2.2625rem;}
.rule-wrapper p span{  display: block;color: #fff;font-size: 0.5625rem;text-align: left;line-height: 1.1rem;margin: 0 1.09375rem 0 1.09375rem;}
.rule-wrapper p .rule-con-title{  display: block;color: #328cfb;font-size: 0.5625rem;text-align: left;font-weight:600;padding: 0.5rem 0;}
.rule-wrapper p span a{display: block;color: #328cfb;font-size: 0.5625rem;text-align: left;}

/* sign up from */
.signup-form{width: 100%;}
.signup-form .sign-fm{width: 17.075rem;height: 16.4rem;margin:0 auto;padding-top: 1.5rem;border-right: solid 1px #3c4056;border-bottom: solid 1px #3c4056;background: url("../images/form-bg.jpg") center center no-repeat;background-size: 100% 100%;position: relative;}
.signup-form .sign-fm .form-item{padding: 0.35rem 0.8rem;}
.signup-form .sign-fm .form-item label{display: inline-block;font-size: 0.5625rem;color:#fff;width: 4.25rem;}
.signup-form .sign-fm .form-item label i{font-size: 0.5625rem;color:#ff4848;position: relative;top:0.1rem;right: 0.1rem;}
.signup-form .sign-fm .form-item input[type="text"]{width: 10.825rem;height:1rem;line-height:1rem;padding:0.3rem 0;border-radius: 2rem;background: #0b1f6c;border: 0;text-align: center;color:#fff;font-weight: 500;}
input[type="text"]:-webkit-autofill {-webkit-text-fill-color: rgb(11, 31, 108) !important;}
.signup-form .sign-fm .form-btn label{display:block;width: 100%;}
.signup-form .sign-fm .form-btn label i{right: 0;}
.signup-form .sign-fm .form-btn label i strong{font-size: 0.5rem;position: relative;top:-0.1rem;}
.signup-form .sign-fm .form-btn #submit{display:block;;width: 4.8125rem;height: 1.6875rem;text-align: center;color:#866006;font-size: 0.5625rem;background: #ffcb18;border: 0;margin: 0 auto;margin-top: 0.2rem;}
.signup-form .sign-fm .pormpt-alert{position: absolute;width: 8rem;top:32%;left:54%;margin-left: -4rem;z-index: 99;}
.signup-form .sign-fm .pormpt-alert div{position: relative;width:8rem;margin: 0 auto;}
.signup-form .sign-fm .pormpt-alert div span{display: none;text-align: center;height: 1.4625rem;border-radius: 2rem;position: absolute;top:0;padding: 0.2rem 0.8rem;}
.signup-form .sign-fm .pormpt-alert div #fm-prompt{background:rgba(255, 255, 255, 0.71) url("../images/wran-icon.png") 0.4rem center no-repeat;background-size: 1.125rem 1.125rem;}
.signup-form .sign-fm .pormpt-alert div #fm-success{background:rgba(255, 255, 255, 0.71) url("../images/success-icon.png") 0.4rem center no-repeat;background-size: 1.125rem 1.125rem;}
.signup-form .sign-fm .pormpt-alert div span i{font-size: 0.6875rem;color:#fff;padding-left: 1.25rem;height:1.4625rem;line-height: 1.4625rem;}


/* inner download */
.active-con .download{width: 100%;text-align: center;padding:2.5rem 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 */

@keyframes scales {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}
@-webkit-keyframes scales {
    0% {
        -webkit-transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.2);
    }
    100% {
        -webkit-transform: scale(1);
    }
}
@-moz-keyframes scales {
    0% {
        -webkit-transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.2);
    }
    100% {
        -webkit-transform: scale(1);
    }
}
@-o-keyframes scales {
    0% {
        -webkit-transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.2);
    }
    100% {
        -webkit-transform: scale(1);
    }
}
@-ms-keyframes scales {
    0% {
        -webkit-transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.2);
    }
    100% {
        -webkit-transform: scale(1);
    }
}
/* 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; }}
