@charset "utf-8";
@font-face{
    font-family: FZQKBYSJW;
   /* src: url('FZQKBYSJW.TTF')*/
}
html,body{
    position: relative;
    height: 100%;max-width: 750px;
    margin: 0 auto;
}
body{
    background:#000;
    width: 100%;
    height:100%;
    overflow: hidden;
    color:#000;
    font-size:16px;
    font-family: FZQKBYSJW,"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
}
.container{height: 100%;width: 100%;overflow:hidden;overflow-y: scroll;-webkit-overflow-scrolling: touch;background: #f2f2f2;}
.answerBox>div.select{background:#ffdadb;}
div.dikou span{color:#f00;}
.dikou{text-align: center;padding: 10px;}
.zujin .btn{width: 70%;margin: 0 auto;padding:10px 0;}
.page1, .page2, .page3, .page4, .page5, .page6, .page7{box-shadow: 0px 1px 5px #888888;width: 90%;margin: 0 auto;border-radius:10px;margin:20px;overflow: hidden;background: #fff;}
.row{background:#fa696e;color:#fff;line-height: 30px;padding: 10px;font-size:16px;}
i{font-style: normal;}
.iosScroll{-webkit-overflow-scrolling: touch;}
textarea,
input{
    display: block;
    padding: 0px;
    width: 100%;
    border: none;
    border-radius: 0px;
    background:none;
    outline: none;    text-align: center;
    font-size: 16px;
    line-height: 24px;
}

textarea{
    padding: 7px 6px 5px;
    height: 48px;
    line-height: 16px;
}
:-moz-placeholder{color: #9f6654;}
::-webkit-input-placeholder{color: #9f6654;}


/*========================
公共
========================*/
.share{position:absolute;bottom:0;width:100%;left:0;}
.logo{
    position: absolute;
    left: 15px;top: 30px;
    width: 61px;
    height: 33px;
    /*background: url(../images/logo.png) 0 0 / 100% 100%;*/
    z-index: 6;
}

.lock-time{
  padding-top:2rem;
  text-align: center;
  box-sizing:border-box;
}

.curTime{
  font:4.5rem/5rem "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
  font-weight: 200;
  color: #fff;
}

.curDate,.curDay{
  font:1.5rem/2.5rem "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
  color: #fff;
}

.message{
    width: 92%;
    padding: 0.5rem;
    margin: 0.8rem auto;
    position: relative;
    background: rgba(255, 255, 255, 0.85);
    border-radius:0.8rem;margin-top: 3rem;
}

.icon{
  display: inline-block;
  width:1.2rem;
  height: 1.2rem;
  background:transparent url(https://static.21jingji.com/images/activity/gsjsq/iconfont-weixin.png) no-repeat center center;
  background-size:cover;
}
.appName{
  display: inline-block;
  vertical-align: top;
      font-size: 0.75rem;
    font-weight: bold;
    line-height: 1.2rem;
    color: #2e2e2e;width: 80%;
}

.appName span{
  padding: 0.5rem;
     color: #2e2e2e;    font-size:0.75rem;
    line-height:0.8rem;
    position: absolute;
    right: 0;
}


.sliding-bar{
  position: absolute;
  right:0;
  bottom:3rem;
  left: 0;
}

.sliding-bar p{
  font-size:16px;
  line-height: 3rem;
  color:#fff;
  text-align: center;
  animation: sliding_left_right 1.2s linear alternate infinite;
    -moz-animation: sliding_left_right 1.2s linear alternate infinite; /* Firefox 4 */
    -webkit-animation: sliding_left_right 1.2s linear alternate infinite; /* Safari 和 Chrome */
}
@keyframes sliding_left_right{
  0% {
    transform: translateX(-2rem);
  }

  100% {
    transform: translateX(2rem);
  }
}

@-webkit-keyframes sliding_left_right /* Firefox */
{
  0% {
    -webkit-transform: translateX(-2rem);
  }

  100% {
    -webkit-transform: translateX(2rem);
  }
}
.gif{
  display: none;
}

.sliding-bar p span:first-child{
  color:#7a7a7a;
}

.sliding-bar p span:nth-child(2){
  color:#737373;
}

.sliding-bar p span:nth-child(3){
  color:#9c9c9c;
}

.sliding-bar p span:nth-child(4){
  color:#aeaeae;
}

.sliding-bar p span:nth-child(5){
  color:#9e9e9e;
}

.sliding-bar p span:last-child{
  color:#818181;
}

.sliding-bar img{
  display: block;
  margin:0 auto;
  width:60%;
  animation: sliding_left_right 1.2s linear alternate infinite;
    -moz-animation: sliding_left_right 1.2s linear alternate infinite; /* Firefox 4 */
    -webkit-animation: sliding_left_right 1.2s linear alternate infinite; /* Safari 和 Chrome */
    -o-animation: sliding_left_right 1.2s linear alternate infinite; /* Opera */
} 


/* 页面容器 */
.pagewrap{
    position: fixed;
    left: 0;top: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% auto;
    z-index: 5;
    overflow-x: hidden;
    overflow-y: auto;
}
.abs{
    position:absolute;
}
.btn.press{
    transform: scale(.95);
    -webkit-transform: scale(.95);
}
.flexBox{
    display:flex; 
    justify-content: space-between; 
    width:100%;
}
.flexBox>div{
    display: inline-block;    padding:3px;
    border-radius: 10px;    text-align: center;width: 30%;
    background: #f1f1f1;font-size:16px;line-height:24px;
}
.flexBox>div.select{background:#ffdadb;}
/**==========pace==========**/

.pace-Box {
    width: 50%;
    left: 25%;
    position: absolute;
    top: 50%;
}

.pace {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background:#000;
    z-index: 9;
}
.pace .pace-progress {
    width: 94%;
    height:10px;
    /* background: rebeccapurple; */
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}
.pace .pace-progress-inner {
    width: 100%;
    height: 100%;
    background:#fa696e;
    right: 100%;
    position: relative;
}
.pace .pace-Box:after {
    content: '';
    position: absolute;
    z-index: 8;
    width: 11.4rem;
    height: 6.75rem;
    top: -5rem;
    left: -1rem;
}
.pace .pace-activity {
    text-align: center;
    font-size:16px;
    color: #e8d9b7;
    font-family: FZQKBYSJW;
    margin-top: 0.68rem;
}
.pace.pace-inactive {
    display: none;
}
/*===================
弹出层
===================*/
.pop{
    display:none;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
    background: rgba(0, 0, 0, 0.7);
}
.pop .content{
    width: 90%;
    position: absolute;
    top: 12%;
    left: 5%;
}
.pop .close{
    position: absolute;
    width: 12%;
    right: 6%;
    z-index: 9;
    top: 10%;
}
/*========================
首页
========================*/
.page-index{
    background:#102f8c url(https://static.21jingji.com/images/activity/gsjsq/bg.jpg?v=1) no-repeat;
    background-size:100% 100%;
}
@-webkit-keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}
@keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}
.message{-webkit-animation:swing 1s infinite;animation:swing 1s infinite;}
@keyframes moveAni{
    0%{
        transform: translateY(0px);
    }
    50%{
        transform: translateY(10px);
    }
    100%{
        transform: translateY(0px);
    }
}
/*========================
关注页面
========================*/
.top_s{display: block;margin: 0 auto;}
.talk-record {margin-top:1rem;position: relative;}
.head-portrait {float: left;width: 46px;height: 46px;margin-left: 10px;}
.head-portrait>img{width:45px;height:45px;}
.record-msg {margin-left: 65px;padding-right: 40px;font-size:16px;}
.talk-msg-container {position: relative;}
.talk-msg{margin-top: 0.8%;padding: 4%;font-size:16px;border-radius: 5px; border: 1px solid #d1d1d1;background-color: #fff;min-height: 0.28rem;line-height: 160%;}
.talk-msg img {vertical-align: middle;}
.triangle {position: absolute;left: -10px;top: 15px;z-index: 1;}
.rj{right: -10px;}
.triangle img{width: 10px;z-index: 0;margin-left: 3px;}
.rj{position: absolute;right: -10px;top: 15px;z-index: 1;}
.record-msg1{margin-right: 65px;padding-right: 0;font-size:16px;padding-left: 40px;}
.talk-name1{padding: 0.5%;color: #999;text-align: right;}
.head-portrait1{float: right;width: 46px;height: 46px;margin-right: 10px;}
.head-portrait1>img {width: 45px;height: 45px;}
/*========================
游戏页
========================*/

@keyframes scaleAni {
    0%{
        transform: scale(0.95);
    }
    50%{
        transform: scale(1);
    }
    100%{
        transform: scale(0.95);
    }
}
@keyframes scaleAni2 {
    0%{
        transform: scale(2);
    }
    100%{
        transform: scale(1);
    }
}
.scale{
    animation:scaleAni 2s linear infinite;
    transition:all 1s;
}

.text{
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 1.4rem;
    top: 12%;
    color: white;
}
@keyframes shakeAni{
    0%{
        transform: rotate(0deg);
    }
    49.9%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(15deg);
    }
    55%{
        transform: rotate(-15deg);
    }
    60%{
        transform: rotate(15deg);
    }
    65%{
        transform: rotate(-15deg);
    }
    90%{
        transform: rotate(0deg);
    }
}
.shake{
    animation: shakeAni 1.5s infinite;
}
/*  */
.page{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;background: #f2f2f2;
    left: 0
}

/*  */
@keyframes hideAni{
    0%{
        transform: scale(1.5);
        opacity: 1;
    }
    5%{
        transform: scale(1);
    }
    100%{
        transform: scale(1);
        opacity: 0;
    }
}
/*  */

.p1-1{
    position: relative;
    width:100%;
    margin-top: 4.3rem
}
#pageIndex .box{
    width:9.3rem;
    height:2.08rem;
    position: relative;
    margin: 2.12rem auto 0;
}
#pageIndex input{
    background:none;
    height:100%;
    text-align:center;
    color: #d29f8f;
    font-size: 1rem;
}
.button-Large{
    width:3.67rem;
    height:9.72rem;
    margin: 2.38rem auto 0;
}
.ani1{
    animation:inputAni 1s linear infinite alternate;
}
@keyframes inputAni {
    from { box-shadow: none; }
    to { box-shadow: 0px 0px 7px #fff; }
}
/*  */

.time{
    width:2.27rem;
    line-height:0.95rem;
    position: absolute;
    top: 1.93rem;
    right: 0.65rem;
    border-radius:0.25rem;
    background-color: #976961;
    text-align:center;
    color: #753227;
    font-size: 0.85rem;
}
.tit{
    width:100%;
    position: relative;
    margin-top: 3.45rem;
    padding:0 0.78rem;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content:space-between;
    font-family: FZQKBYSJW;
    font-size: 0.98rem;
    color:#150d02;
}
.tit>img{
    width:1.27rem;
    height:3.48rem;
    margin-left: 1.57rem;
    margin-right: 0.47rem;
}
.tit>div{
    flex:1;
}
.tit .t1{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.answerBox{
    width:100%;
    position: relative;
 /*   display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content:space-between;*/
    align-items: start;
}
input#numbers{border-radius: 1rem;
line-height: 24px;
padding: 8px;
position: relative;
color: #000;
width: 80%;
margin: 0 auto;
background: #f1f1f1;
text-align: center;}
.answerBox>div{
	border-radius:1rem;text-align:left;
        line-height: 24px;
    padding: 8px;
    position: relative;
    color: #000;
    width: 80%;
    margin: 20px auto;
    background: #f1f1f1;
}
.answerBox .key{
    width:1.68rem;
    position: absolute;
    z-index: 9;
    animation:scaleAni2 0.1s linear forwards;
}
.pageEnd{background: #f2f2f2;}
.top_re{font-size: 0.9rem;background: URL(https://static.21jingji.com/images/activity/gsjsq/0.png) no-repeat center;background-size: 100% 100%;padding: 2.5rem;color: #fff;}
.top_re span{color: #ee332c;font-weight: bold;}

.group{position:relative;border:none;padding:15px 30px;}
.group:after{content:'';position:absolute;left:4%;background:#ccc;width:92%;height:1px;-webkit-transform:scaleY(0.5);transform:scaleY(0.5);	-webkit-transform-origin:0 0;transform-origin:0 0;bottom:0;}
.flag{width:104px; height:40px; float:left;}
.control{ margin-left:150px;height:40px; line-height:40px; position:relative;}
.money{ float:left;width:150px; line-height:40px;position: relative;height: 40px;}
.money .select{top:40px;height:200px; overflow-y:auto;}
.control input{border:0; line-height:40px; height:40px; text-align:right;font-size:15px;color:#fff; width:100%;}
.tip{color:#989898;font-size:13px;line-height: 20px;position: absolute;bottom: 50px;left: 5%; width: 90%;}
.zujin .btn.select{color: #fa696e;}
#more, #cj, #intAmt{display:block;color:#fff; text-align:center;background: #fa696e;border-radius: 10px;}
.mortgage{padding:15px 20px;}
.mortgage:nth-child(2){padding-top:0;}
.mortgage:nth-child(2) .number{color:#e46964;font-size:16px;font-weight: bold;}
.left{width:50%; float:left; text-align:center;position:relative;border:none;}
.right{width:49%; float:right;text-align:center;}
.left:after{content:'';position:absolute;background:#ccc;width:100%;width:1px; height:110px;-webkit-transform:scaleY(0.5);transform:scaleY(0.5);	-webkit-transform-origin:0 0;transform-origin:0 0;bottom:0;right:0;top: 0;}
.title{font-size:16px;line-height:30px;font-weight:bold;}
.number{color:#c42f25;font-size:22px;line-height:30px;}
.number3, .number4{color:#fff;font-size:18px;line-height:30px;}
.line{position:relative;border:none;background:#ccc;width:92%;height:1px;-webkit-transform: scaleY(0.5); */transform: scaleY(0.5);-webkit-transform-origin: 0 0;transform-origin:0 0;margin:0 auto;}

.item{ float:left;font-size:14px; line-height:30px;width:115px;}
.control1{ margin-left:115px;text-align:right; position:relative;}
.control1 label{display:block;}
.control1 ul, .money ul{position:absolute;top:25px;background:rgba(0, 0, 0, 0.7);left:0;right:0;color:#fff;line-height:40px;z-index: 1; display:none;overflow-y: auto;}
.control1 ul li, .money ul li{border-bottom:1px solid #ccc; text-align:center;}
.control1 p{padding-right:20px;line-height:30px;font-size:18px; color: #c42f25;}
.control1 input{border:0;line-height:30px;font-size:14px;color:#292929;text-align:right;width:96%;padding:0 2%;}
.danw{position: absolute;top: 0;bottom: 0;display: block;width: 35px;line-height:30px;right: 0;}
#lilv, #lilv1, #pecent, #lilv2{padding-right:35px;}
 input::-webkit-input-placeholder {color:ccc;}