:root {
    --bgdot-img: url(https://ossimg.xinli001.com/20180504/e50eeee7ce5df48ba552fa5174d3ad0f.png);
    --nianling-img: url();
    --nianling-img-size: 2500px 1500px;
    --maobg-img: url(https://ossimg.xinli001.com/20180504/d719185597cd127d2d8c465d422c60e8.png);
    --shujia-img: url(https://ossimg.xinli001.com/20180504/21ef5d582ed0fab9a1f88bedae7442d0.png);
    --shou-img: url(https://ossimg.xinli001.com/20180507/8ca4044bf39e5d2579690fd4732a2f55.png);
    --shou-img-size: 100% 494px;
    --shuru-color: #292964;
    --xiaoyu-img: url(https://ossimg.xinli001.com/20180509/25935205ebfcfe582130eba7efc62e15.png);
    --xiaoyu-img-size: 77px 29px;
    --yixinlilogo-img: url(https://ossimg.xinli001.com/20180509/2f1b37b5bc03041bc24071e582db2584.png);
    --yixinlilogo-img-size: 143px 30px;
    --reply-img: url(https://ossimg.xinli001.com/20180509/9c5679c00e3d2bf9e1ba211445001d5e.png);
    --reply-img-size: 133px 38px;
    --tushumeng-img: url(https://ossimg.xinli001.com/20180510/dbe733710570beac2e2ccf096f2bf7db.png);
    --tushumeng-img-size: 750px 1000px;
}
body {
    background-image: var(--bgdot-img);
    background-repeat: repeat;
    margin: 0;
}
.stage {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.stagego {
    -webkit-animation-name: stagegoframes;
    animation-name: stagegoframes;
}
@keyframes stagegoframes {
    0% {
        opacity: 1;
    }
    100% {
        transform: scale3d(5, 5, 5);
        opacity: 0;
    }
}
.yixinlilog {
    width: 143px;
    height: 30px;
    background-image: var(--yixinlilogo-img);
    background-size: var(--yixinlilogo-img-size);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99;
}
.nianlingfont {
    width: 303px;
    height: 107px;
    margin: auto;
    background-image: var(--nianling-img);
    background-size: var(--nianling-img-size);
    background-position: -1800px 0px;
    margin-top: 50px;
}
.text1 {
    text-align: center;
    margin: 30px 0;
    color: #262662;
}
.text1FadeInOut {
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
    -webkit-animation-name: text1FadeInOut;
    animation-name: text1FadeInOut;
}
@keyframes text1FadeInOut {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
.text1FadeIn {
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-name: text1FadeIn;
    animation-name: text1FadeIn;
}
@keyframes text1FadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.chuanghu {
    width: 267px;
    height: 267px;
    padding: 10px;
    margin: auto;
    background-image: var(--nianling-img);
    background-size: var(--nianling-img-size);
    background-position: -550px 0px;
    position: relative;
}
.anchuanghu {
    width: 268px;
    height: 270px;
    position: relative;
    background-image: var(--nianling-img);
    background-size: var(--nianling-img-size);
    background-position: 0px -325px;
}
.chuanghuplay {
    -webkit-animation: chuanghuopen 1s steps(1) 1;
    -webkit-animation-fill-mode: forwards;
    animation: chuanghuopen 1s steps(1) 1;
    animation-fill-mode: forwards;
}
@keyframes chuanghuopen
{
    0% {
        background-position: 0 -325px;
    }
    33% {
        background-position: -268px -325px;
    }
    66% {
        background-position: -536px -325px;
    }
    100% {
        background-position: -536px -325px;
    }
}
.chbtn {
    width: 39px;
    height: 39px;
    top: 124px;
    left: 124px;
    display: block;
    text-align: center;
    background-color: #fff;
    color: var(--shuru-color);
    margin: auto;
    -webkit-animation: chbtnframes 1000ms infinite;
    animation: chbtnframes 1000ms infinite;
    position: absolute;
    border-radius: 100px;
}
@keyframes chbtnframes {
    from {
        width: 39px;
        height: 39px;
        top: 124px;
        left: 124px;
    }
    to {
        width: 89px;
        height: 89px;
        top: 99px;
        left: 99px;
        opacity: .4;
    }
}
.chspan {
    position: absolute;
    display: block;
    text-align: center;
    line-height: 287px;
    width: 287px;
    height: 287px;
    color: #666;
    top: 0;
    left: 0;
}
.xiayu {
    background-image: var(--nianling-img);
    background-size: var(--nianling-img-size);
    background-position: 0px -650px;
    width: 375px;
    height: 410px;
    margin: auto;
    margin-top: 30px;
    -webkit-animation: xiayuplay 1000ms steps(1,start) infinite;
    animation: xiayuplay 1000ms steps(1,start) infinite;
}
@keyframes xiayuplay {
    0% {
        background-position: 0px -650px;
    }
    50% {
        background-position: -375px -650px;
    }
}
.yunduo {
    background-image: var(--nianling-img);
    background-size: var(--nianling-img-size);
    background-position: -155px 0px;
    width: 375px;
    height: 286px;
    margin: auto;
    margin-top: -380px;
}
.chengshi {
    background-image: var(--nianling-img);
    background-size: var(--nianling-img-size);
    background-position: -1350px 0px;
    width: 375px;
    height: 352px;
    margin: auto;
    margin-top: -73px;
}
.maobg {
    background-image: var(--maobg-img);
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.maotong {
    background-image: var(--nianling-img);
    background-size: var(--nianling-img-size);
    background-position: -1400px -400px;
    width: 133px;
    height: 183px;
    position: absolute;
    bottom: 80px;
    left: 5px;
    -webkit-animation: maoplay 1000ms steps(1,start) infinite;
    animation: maoplay 1000ms steps(1,start) infinite;
}
@keyframes maoplay {
    0% {
        background-position: -1400px -400px;
    }
    33% {
        background-position: -1533px -400px;
    }
    66% {
        background-position: -1666px -400px;
    }
    100% {
        background-position: -1400px -400px;
    }
}
.tongxue1 {
    width: 192px;
    height: 318px;
    background-image: var(--nianling-img);
    background-size: var(--nianling-img-size);
    background-position: -1400px -620px;
    position: absolute;
    bottom: 10px;
    left: 0;
}
.tongxue2 {
    width: 232px;
    height: 357px;
    background-image: var(--nianling-img);
    background-size: var(--nianling-img-size);
    background-position: -1620px -620px;
    position: absolute;
    right: 0;
    bottom: 80px;
}
.shujia {
    width: 100%;
    height: 345px;
    background-image: var(--shujia-img);
    background-repeat: no-repeat;
    background-size: 100% 345px;
}
.fangpi {
    width: 323.5px;
    height: 360.5px;
    background-image: var(--nianling-img);
    background-size: var(--nianling-img-size);
    background-position: 0 -1100px;
    position: absolute;
    right: 0px;
    bottom: 176px;
}
.fangpiplay {
    -webkit-animation: fangpiframes 4s steps(1,start) 1;
    -webkit-animation-fill-mode: forwards;
    animation: fangpiframes 4s steps(1,start) 1;
    animation-fill-mode: forwards;
}
@keyframes fangpiframes {
    0% {
        background-position: 0 -1100px;
    }
    20% {
        background-position: -323.5px -1100px;
    }
    40% {
        background-position: -647px -1100px;
    }
    60% {
        background-position: -970.5px -1100px;
    }
    80% {
        background-position: -1294px -1100px;
    }
    100% {
        background-position: 0 -1100px;
    }
}
.stage4meng {
    background-color: #000;
    opacity: .4;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: none;
}
.tushumeng {
    background-image: var(--tushumeng-img);
    background-size: var(--tushumeng-img-size);
    position: fixed;
    width: 750px;
    height: 1000px;
    display: none;
}
.ksyun1 {
    width: 125px;
    height: 195.5px;
    background-image: var(--nianling-img);
    background-size: var(--nianling-img-size);
    background-position: -1800px -150px;
    position: absolute;
    top: 0;
    left: 0;
}
.ksyun2 {
    width: 116.5px;
    height: 195.5px;
    background-image: var(--nianling-img);
    background-size: var(--nianling-img-size);
    background-position: -1950px -150px;
    position: absolute;
    top: 0;
    right: 0;
}
.kaoshiren {
    width: 351px;
    height: 528px;
    background-image: var(--nianling-img);
    background-size: var(--nianling-img-size);
    background-position: -2130px 0px;
    position: absolute;
    right: 0;
    bottom: 0;
}
.kaoshibi {
    width: 24px;
    height: 43px;
    background-image: var(--nianling-img);
    background-size: var(--nianling-img-size);
    background-position: -1850px -375px;
    position: absolute;
    right: 231px;
    bottom: 340px;
}
.kaoshibiplay {
    -webkit-animation: kaoshibiframes 2000ms steps(1,start) infinite;
    animation: kaoshibiframes 2000ms steps(1,start) infinite;
}
@keyframes kaoshibiframes {
    0% {
        background-position: -1850px -375px;
    }
    25% {
        background-position: -1874px -375px;
    }
    50% {
        background-position: -1898px -375px;
    }
    75% {
        background-position: -1922px -375px;
    }
    0% {
        background-position: -1850px -375px;
    }
}
.wenshou {
    background-image: var(--shou-img);
    background-size: var(--shou-img-size);
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 494px;
}
.peiqi1 {
    width: 119.5px;
    height: 198.5px;
    background-image: var(--nianling-img);
    background-size: var(--nianling-img-size);
    background-position: -1925px -560px;
    position: absolute;
    top: 60px;
    right: 30px;
    -webkit-animation: peiqi1frames 500ms steps(1,start) infinite;
    animation: peiqi1frames 500ms steps(1,start) infinite;
}
@keyframes peiqi1frames {
    0% {
        top: 60px;
    }
    50% {
        top: 62px;
    }
}
.peiqi2 {
    width: 96px;
    height: 113px;
    background-image: var(--nianling-img);
    background-size: var(--nianling-img-size);
    background-position: -2100px -560px;
    position: absolute;
    bottom: 40px;
    left: 20px;
    -webkit-animation: peiqi2frames 500ms steps(1,start) infinite;
    animation: peiqi2frames 500ms steps(1,start) infinite;
}
@keyframes peiqi2frames {
    0% {
        bottom: 40px;
        left: 20px;
    }
    50% {
        bottom: 38px;
        left: 22px;
    }
}
.peiqi3 {
    width: 102.5px;
    height: 132px;
    background-image: var(--nianling-img);
    background-size: var(--nianling-img-size);
    background-position: -2225px -560px;
    position: absolute;
    bottom: 40px;
    right: 20px;
    -webkit-animation: peiqi3frames 500ms steps(1,start) infinite;
    animation: peiqi3frames 500ms steps(1,start) infinite;
}
@keyframes peiqi3frames {
    0% {
        right: 20px;
    }
    50% {
        right: 18px;
    }
}
.peiqi4 {
    width: 107.5px;
    height: 112.5px;
    background-image: var(--nianling-img);
    background-size: var(--nianling-img-size);
    background-position: -2370px -560px;
    position: absolute;
    top: 60px;
    left: 20px;
    -webkit-animation: peiqi4frames 500ms steps(1,start) infinite;
    animation: peiqi4frames 500ms steps(1,start) infinite;
}
@keyframes peiqi4frames {
    0% {
        top: 60px;
        left: 20px;
    }
    50% {
        top: 62px;
        left: 18px;
    }
}
.shuben {
    width: 355.5px;
    height: 428.5px;
    background-image: var(--nianling-img);
    background-size: var(--nianling-img-size);
    background-position: -2000px -740px;
    position: absolute;
    bottom: 80px;
    left: 0px;
    color: var(--shuru-color);
}
.nicknamelabel {
    display: block;
    margin-top: 100px;
    text-align: center;
}
.nicknameinput {
    display: block;
    padding: 12px 10px;
    width: 180px;
    text-align: center;
    border: 1px solid var(--shuru-color);
    border-radius: 12px;
    margin-top: 20px;
    font-size: 1.1rem;
    color: var(--shuru-color);
}
.xingbiediv {
    display: block;
    margin: auto;
    width: 200px;
    margin-top: 10px;
}
.xingbie1 {
    float: left;
}
.xingbie2 {
    float: right;
}
.clear {
    clear: both;
}
.tansuobtn {
    width: 142px;
    height: 42.5px;
    background-image: var(--nianling-img);
    background-size: var(--nianling-img-size);
    background-position: -1850px -450px;
    text-align: center;
    line-height: 42.5px;
    margin: auto;
    margin-top: 80px;
    display: block;
}
.wenti {
    width: 300px;
    height: 325px;
    position: absolute;
    border: 2px solid var(--shuru-color);
    color: var(--shuru-color);
    border-radius: 15px;
    background-color: #fff;
    display: none;
}
.wenti h3 {
    text-align: center;
    margin-top: 30px;
}
.wtgenge {
    margin-top: 1px;
}
.wenti label {
    display: block;
    line-height: 45px;
    margin: 0 10px;
}
.wenti input[type=radio] {

}
.xiaoyubox {
    position: absolute;
    top: 100px;
    left: 50px;
}
.xiaoyu {
    width: 77px;
    height: 29px;
    margin: auto;
    background-image: var(--xiaoyu-img);
    background-size: var(--xiaoyu-img-size);
}
.xiaoyuimg {
    width: 77px;
    height: 29px;
    margin: auto;
    display: block;
}
.jindubox {
    margin-top: 10px;
}
.jindubox1 {
    width: 200px;
    border: 2px solid #292964;
    height: 10px;
    border-radius: 5px;
}
.jindubox2 {
    display: block;
    width: 0px;
    height: 10px;
    background-image: url(https://ossimg.xinli001.com/20180509/92d22d3166a1245c144e8c67a0c4a5c0.png);
    background-size: 230px 10px;
    -webkit-animation: jindubox2frames 5s 1;
    -webkit-animation-fill-mode: forwards;
    animation: jindubox2frames 6s 1;
    animation-fill-mode: forwards;
}
.jindutext {
    text-align: center;
    margin-top: 5px;
}
@keyframes jindubox2frames {
    0% {
        width: 0px;
    }
    80% {
        width: 200px;
    }
    100% {
        width: 200px;
    }
}
.nlbg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.nlshow {
    width: 100%;
    /* transform: scale(.85);
    margin-top: -30px; */
}
.sreplybtn {
    width: 133px;
    height: 38px;
    bottom: 23px;
    right: 21px;
    position: absolute;
    background-image: var(--reply-img);
    background-size: var(--reply-img-size);
}
.smeng {
    position: fixed;
    top: 0;
    left: 0;
    background-color: black;
    opacity: .5;
    width: 100%;
    height: 100%;
    display: none;
}
.sqrcode {
    width: 340px;
    height: 340px;
    position: absolute;
    display: none;
}
.zhiwen {
    background-image: url(https://ossimg.xinli001.com/20180517/99a3d28458376af4005d851ab53ee87c.png);
    width: 142px;
    height: 119px;
    position: absolute;
    bottom: 18px;
    right: 30px;
    background-size: 142px 119px;
}

.bg {
    opacity: 0.5;
    background: #000000;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 199;
}
.boxdiv1 {
    position: fixed;
    left: 45px;
    top: 100px;
    z-index: 200;
}
.boxdiv2 {
    width: 285px;
    height: 271px; 
    background: #E1F2FB;
    border-radius: 8px;
}
.label1 {
    font-size: 18px;
    color: #0D3371;
    text-align: center;
    font-weight: bold;
    padding-top: 15px;
}
.img {
    display: block;
    width: 165px;
    height: 165px;
    margin: auto;
    margin-top: 20px;
    border-radius: 4px;
}
.close {
    background: url("https://appimg.onexinli.com/marketing/20190722/jye6c9pd.png");
    background-size: 37px;
    width: 37px;
    height: 37px;
    margin: auto;
    margin-top: 15px;
}
.label201 {
    margin: auto;
    background: #fc6669;
    color: white;
    width: 300px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin-top: 20px;
    border-radius: 20px;
}