.wrap{width:100%;height:100%;overflow:hidden}
.wrap2{width:100%;height:1000%;transition:.3s linear}
.page{
    width:100%;
    height:10%;
    background:url('../images/huikui/bg-img.png');
    font-size:.12rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 5% 0 0 0;
    box-sizing: border-box;
    background-color: #fff8f5;
    position: relative;
}
.page.page10{
    background:url('../images/huikui/page10_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.page .tit,.page .content,.page .tit2{
    padding-left: 12.4%;
}
.fan{
    position: fixed;
    width: 100%;
    text-align: center;
    z-index: 2;
}
.fan img{
    width: .15rem;
}
.fan-up{
    top: .1rem;
    font-size: .16rem;
}
.fan-down{
    bottom: .1rem;
    font-size: .16rem;
}
.page .tit img{
    width: 47%;
}
.red{
    color: #C04843;
}
.page .content{
    margin-top: 2%;
    line-height: 2em;
    font-size: 1.4em;
    font-family: 'PingFangR';
    color: #475165;
}
.page1 .content>div{
    margin-top: .1rem;
}
.page1 .rili-tit{
    text-align: center;
    color: white;
    font-weight:bold;
    /* -webkit-text-stroke:1px #A52924;
    text-stroke:1px #A52924; */
    font-size: .15rem;
    margin-bottom: .08rem;
}
.page1 .rili-box {
    height: 2.5rem;
    width: 92%;
    background:url('../images/huikui/page1_rili.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: .3rem auto;
}
.page1 .rili-box>div{
    padding: .5rem .4rem .4rem .4rem;
    transform: rotate(6deg);
    -ms-transform: rotate(6deg);
    -moz-transform: rotate(6deg);
    -webkit-transform: rotate(6deg);
    -o-transform: rotate(6deg);
}
.page1 .rili>div{
    width: 14.2%;
    height: .2rem;
    float: left;
    font-family: 'lingxin';
    font-size: .14rem;
}
.page1 .rili>div span{
    text-align: center;
    color: #FFFFFF;
    font-weight:bold;
    /* -webkit-text-stroke:1px #A52924; */
    /* text-stroke:1px #A52924; */
}
.today_box{
    position: relative;
}
.page1 .rili .today{
    min-width: .21rem;
    min-height: .21rem;
    display: inline-block;
    position: absolute;
    left: -6px;
}
.page .font-c04-s3{
    color: #C04843;
    font-size: .3rem;
}
.margint-20{
    /* margin-top: .1rem; */
}
.page2 .bottom-box{
    width: 100%;
    margin-top: .2rem;
    position: absolute;
    text-align: center;
}
.page2 .bottom-box img.page2_ren{
    width: 98%;
    position: relative;
    z-index: 2;
}
.page2 .bottom-box img.page2_tanzi{
    width: 80%;
    position: relative;
    bottom: 1.1rem;
    right: -.8rem;
}
.page2 .bottom-box p{
    position: absolute;
    z-index: 3;
    width: 100%;
    padding-top: .75rem;
    font-size: .12rem;
    padding-left: .05rem;
    font-family: 'PingFangR';
    color: #475165;
}
.page3 .page3_shiz{
    width: 80%;
    padding-top: .3rem;
    margin: 0 auto;
}
.page3 .page3_shiz img{
    width: 100%;
}
.page4{
    padding-left: .1rem;
}
.page4 .page4_shiz{
    text-align: center;
}
.page4 .page4_shiz img{
    width: 85%;
}
.page5{
    font-family: 'PingFangR';
    color: #475165;
}
.page5 .content{
    margin-top: 0;
}
.page5 #fenshu{
    font-size: 1rem;
    color: #E27E6E;
    font-weight: bold;
}
.page5 .danmu{
    height: 1.5rem;
    position: relative;
    overflow: hidden;
    width: 100%;
}
.page5 .danmu div{
    
}
.page5 .page5_img{
    width: 80%;
    margin: 0 auto;
    text-align: center;
}
.page5 .page5_img img{
    width: 90%;
}
.page6 .line_box div{
    width: 88%;
    height: 1.8rem;
    margin: .1rem auto 0 auto;
}
.page6 .xianlu,.page6 .nianling{
    background:url('../images/huikui/page6_xianl.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.page6 .nianling{
    background:url('../images/huikui/page6_nian.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.page6 #xianluEchart, .page6 #nianlingEchart{
    padding-top: 0.15rem;
}
.page7 .page7_img, .page8 .page8_img{
    width: 100%;
    text-align: center;
}
.page7 .page7_img img,.page8 .page8_img img{
    width: 95%;
    text-align: center;
}
.page9{
    background:url('../images/huikui/bg2-img.png');
    font-size:.12rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.page9 .page9_img{
    width: 96%;
    margin: 0 auto;
    text-align: center;
}
.page9 .page9_img img{
    width: 90%;
}
.page9 .shuoming{
    width: 90%;
    margin: 0 auto;
    position: absolute;
    left: 5%;
    bottom: .1rem;
}
.page9 .shuoming .shuoming_box{
    width: 100%;
    background-color: rgba(255,255,255, .8);
    border: 1px solid rgba(226, 126, 110, 1);
    border-radius: .1rem;
    padding: .1rem .15rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.page9 .shuoming .shuoming_box .tiaokuan{
    height: 1rem;
    overflow: auto;
}
.shuoming_box .more{
    display: flex;
    align-items: center;
    color: #999999;
}
.shuoming_box .more img{
    width: .1rem;
    margin-left: .1rem;
}
.circleProgress_wrapper{
    width: 200px;
    height: 200px;
    position: absolute;
    zoom: 0.1;
    left: -55px;
    top: -22px;
  }
  .wrapper{
    width: 100px;
    height: 200px;
    position: absolute;
    top:0;
    overflow: hidden;
  }
  .right{
    right:0;
  }
  .left{
    left:0;
  }
  .circleProgress{
    width: 160px;
    height: 160px;
    border:20px solid rgb(255, 255, 255);
    border-radius: 50%;
    position: absolute;
    top:0;
    -webkit-transform: rotate(45deg);
  }
  .rightcircle{
    border-top:20px solid rgb(255, 255, 255);
    border-right:20px solid rgb(255, 255, 255);
    right:0;
    -webkit-animation: circleProgressLoad_right 1s linear 1;
  }
  .leftcircle{
    border-bottom:20px solid rgb(255, 255, 255);
    border-left:20px solid rgb(255, 255, 255);
    left:0;
    -webkit-animation: circleProgressLoad_left 1s linear 1;
  }
  @-webkit-keyframes circleProgressLoad_right{
    0%{
      border-top:20px solid rgba(255, 255, 255, 0);
      border-right:20px solid rgba(255, 255, 255, 0);
      -webkit-transform: rotate(45deg);
    }
    50%{
      border-top:20px solid rgba(255, 255, 255, 0);
      border-right:20px solid rgba(255, 255, 255, 0);
      border-left:20px solid rgba(255, 255, 255, 1);
      border-bottom:20px solid rgba(255, 255, 255, 1);
      -webkit-transform: rotate(225deg);
    }
    100%{
      border-left:20px solid rgb(255, 255, 255);
      border-bottom:20px solid rgb(255, 255, 255);
      -webkit-transform: rotate(225deg);
    }
  }
  @-webkit-keyframes circleProgressLoad_left{
    0%{
      border-bottom:20px solid rgba(255, 255, 255, 1);
      border-left:20px solid rgba(255, 255, 255, 1);
      -webkit-transform: rotate(45deg);
    }
    50%{
        border-top:20px solid rgba(255, 255, 255, 1);
        border-right:20px solid rgba(255, 255, 255, 1);
        border-left:20px solid rgba(255, 255, 255, 0);
        border-bottom:20px solid rgba(255, 255, 255, 0);
      -webkit-transform: rotate(45deg);
    }
    100%{
      border-top:20px solid rgb(255, 255, 255);
      border-right:20px solid rgb(255, 255, 255);
      border-bottom:20px solid rgb(255, 255, 255);
      border-left:20px solid rgb(255, 255, 255);
      -webkit-transform: rotate(225deg);
    }
  }
  .tanchuang{
    position: absolute;
    top: 6%;
    left: 3.5%;
    width: 93%;
    background-color: rgba(255,255,255, 1);
    border: 1px solid rgba(226, 126, 110, 1);
    border-radius: .1rem;
    padding: .1rem .15rem;
    box-sizing: border-box;
  }
  .tanchuang .tit3{
    text-align: center;
    margin-bottom: .1rem;
  }
  .tanchuang img{
    position: absolute;
    right: .1rem;
    width: .2rem;
    font-size: .18rem;
    font-family: 'PingFangR';
  }
  .tiaokuan{
    color: #4E5870;
    line-height: .2rem;
  }
  .jieshi{
    padding: .1rem 0;
    text-align: center;
  }
  .rule{
    color: #647DE4;
  }
 #danmu .list {
    font-size: .14rem;
    background:rgba(255,255,255,0.6);
    border:2px solid rgba(226, 126, 110, 1);
    border-radius:12px;
    height: .2rem;
    line-height: .2rem;
    overflow: hidden;
    color:#E27E6E;
    padding: .01rem .04rem;
    position:absolute;
    -webkit-transition: -webkit-transform 100s linear;
    -moz-transition: -moz-transform 100s linear;
    -o-transition: -o-transform 100s linear;
    transition: transform 100s linear;
    z-index: 999;
    left: 100%;
    white-space: nowrap;
  }
  /*此处弹幕的移动动画，使用transform不会引起页面的重绘，性能更好*/
  #danmu .list.animate {
    -webkit-transform: translateX(-9920px);
    -moz-transform: translateX(-9920px);
    -ms-transform: translateX(-9920px);
    -o-transform: translateX(-9920px);
    transform: translateX(-9920px);
  }
  .rule_box{
    width: 80%;
    height: 3rem;
    background:url('../images/huikui/page10_rule.png');
    font-size:.12rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: 0 auto;
    margin-top: 1rem;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
  }
  .rule_box .rule_box_tit{
    width: 70%;
    height: .5rem;
    background:url('../images/huikui/page10_tit.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%)
  }
  .rule_box .rule_box_tit img{
    position: absolute;
    left: 3%;
    bottom: 46%;
    width: .5rem;
  }
  .rule_box .rule_box_tit P{
    text-align: center;
    line-height: .5rem;
    font-size: .2rem;
    font-family: 'PingFangR';
  }
  .rule_box2{
    width: 94%;
    margin: 0 auto;
    margin-top: .3rem;
  }
  .rule_box2 img{
    width: 100%;
  }