*{margin: 0; padding: 0; border: 0;-webkit-tap-highlight-color:transparent;}
html, body,input{font-family: Microsoft YaHei, Helvetica Neue, Helvetica, Roboto, Heiti SC, STHeiTi, Arial, sans-serif;}
body{font-size: 12px; color: #fff; width: 100%; height: 100%; overflow: hidden; position: relative; background-color: #fd8586; background-image:-webkit-linear-gradient(280deg, #ff3b91, #fd8586); background-image: -moz-linear-gradient(280deg, #ff3b91, #fd8586); background-image: -o-linear-gradient(280deg, #ff3b91, #fd8586); background-image: -ms-linear-gradient(280deg, #ff3b91, #fd8586); background-image: linear-gradient(280deg, #ff3b91, #fd8586);}
ul li{list-style: none}
a,span,label{display: inline-block}
a{color: #fff; text-decoration: none;outline:none;}
a:hover{color: #fff}
.clearfix:after{content: ''; display: block; height: 0; clear: both}
.clearfix{*zoom: 1}
html,body{min-height: 100vh;min-width: 1200px;overflow-y: auto;overflow-x: hidden;}
.bgw{background: #FAFAFA;}
.con_wrap{max-width: 1200px;margin: 0 auto;position: relative;}

header{
    width: 100%; 
    height: 50px; 
    padding: 15px 0;
    position: absolute; 
    z-index: 5;
    background: #fff;
    box-shadow:0px 8px 10px 0px rgba(1,1,1,0.03);
}
header .con_wrap{
    display: flex;
    justify-content: space-between;
}
header .logo{width: 200px;height: 51px;background: url(../images/logo2.png) no-repeat;background-size: auto 100%;}
header nav a{color: #000; font-size: 20px; display: inline-block; line-height: 53px; position: relative; margin: 0 36px;}
header nav a:hover,header nav a.active{color: #7c64fc;}
header nav a.active::after{content: ''; position: absolute; left: 50%; bottom: 5px; width:16px; height:4px; background:#7c64fc; border-radius:2px; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);}

.theme1{
    background: none;
    box-shadow: none;
}
.theme1 .logo{background: url(../images/logo.png) no-repeat;background-size: auto 100%;}
.theme1 nav a{
    color: #fff;
}
.theme1 nav a:hover,.theme1 nav a.active{
    color: #fff;
}
.theme1 nav a.active::after{
    background: #fff;
}

.main{max-width: 1200px;margin: 0 auto;position: relative;padding-bottom: 50px;}
.indexCon{height: 100vh;padding-bottom: 0;overflow: hidden;}
.main .con{width: 100%;height: 810px;position: absolute;top: 50%;left: 50%;z-index: 2;margin: -400px 0 0 -50%;}
.main .info{
    padding: 200px 0 210px 400px;
    margin: 0 auto;
    background: url(../images/logo_about.png) no-repeat 60px center/293px 214px;
}
.main .info p{
    font-size: 16px;
    color: #333;
    line-height: 30px;
    /* text-indent: 32px; */
    margin-bottom: 10px;
}
.main .info p:last-child{margin-bottom: 0;}

/*--标语--*/
.slogan{width: 570px;height: 325px;background: url(../images/txt.png) no-repeat;margin-top: 220px;float: left;position: relative;z-index: 6}

/*--下载按钮--*/
.btn{width: 400px;height:50px;padding: 40px 0 200px 50px;float: left;
    /* background: url(../images/ecode.png) left bottom no-repeat; */
}
.btn a{width: 188px;height: 50px;margin-bottom: 28px;display: block;float: left;border-radius: 25px;transition: all .3s;}
.btn a:hover{box-shadow: 0 0 15px rgba(255, 255, 255, .6);}
.btn a.btn_android{background: url(../images/btn_android.png) no-repeat}
.btn a.btn_ios{background: url(../images/btn_ios.png) no-repeat;margin-right: 15px;}

/*--直播--*/
.live{width: 570px;height: 810px;float: right;background: url(../images/zb.png) no-repeat;position: relative;z-index: 2;transform: scale(.98);}

/*--心心动画--*/
.heart{position: absolute;right: 80px;bottom: 20px;z-index: 100;width: 63px;height: 53px;cursor: pointer;background: url(../images/xin.png) no-repeat}
.heartBox{position: absolute;right: 85px;bottom: 40px;z-index: 99;width: 100px;height: 400px;}
.heartBox svg{position: absolute}

/*--弹幕动画--*/
.dm1,.dm2{width: 414px;height: 70px; position: absolute;top: 50%;left: 2%;z-index: 10;background: url(../images/danmu1.png) no-repeat;opacity: 0}
.dm2{background: url(../images/danmu2.png) no-repeat;}
.gift_boxAnimation{pointer-events: none;animation: FadeOutT 1s 2s linear both;-webkit-animation: FadeOutT 1s 2s linear both;}
.comeInAnimation{animation: comeIn 2.5s 1s linear both;-webkit-animation: comeIn 2.5s 1s linear both;}

/*--留言--*/
.msg{width: 280px;height: 200px;position: absolute;bottom: 20px;left: 65px;overflow: hidden;z-index: 2;background: url(../images/msg.png) ;-webkit-animation: marquee 500s both linear infinite;animation: marquee 500s both linear infinite;}

.aboutInfo,.contactInfo{
    min-height: 640px;
    padding: 120px 0 20px 0;
}
.aboutInfo img{
    width: 100%;
    margin-bottom: 10px;
}
.aboutInfo p{
    font-size: 16px;
    color: #333;
    line-height: 30px;
}
.contactInfo .mapBox{
    width: 100%;
    height: 460px;
}
.contactInfo ul{margin-top: 30px;}
.contactInfo ul li{font-size: 16px;color: #333;line-height: 30px;}
.contactInfo ul li a{color: #7c64fc;}

footer{
    width: 100%;
    text-align: center;
    position: relative;
    z-index: 99;
    background: #f3f3f3;
    padding: 20px 0;
}
footer a,footer p{
    padding: 2px 0;
    color: #666;
}
footer a:hover{
    color: #7c64fc;
}
.noBg{
    background: none;
    position: absolute;
    bottom: 0;
    left: 0;    
}
.noBg a,.noBg p,.noBg a:hover{color: #fff;}

/*--背景动画--*/
.bg span{display: block;position: absolute;z-index: 1;}
.bg .c_1{width: 210px;height: 425px;background: url(../images/circle/1.png) no-repeat;top: -20px;left: -200px;-webkit-animation:wave2 6s .1s infinite linear;animation:wave2 6s .1s infinite linear}
.bg .c_2{width: 544px;height: 544px;background: url(../images/circle/2.png) no-repeat;top: -220px;right: -220px;-webkit-animation:wave 8s .3s infinite linear;animation:wave 8s .3s infinite linear}
.bg .c_3{width: 110px;height: 110px;background: url(../images/circle/3.png) no-repeat;z-index:5;top: 280px;left: 615px;-webkit-animation:wave 5s .5s infinite linear;animation:wave 5s .5s infinite linear}
.bg .c_4{width: 258px;height: 260px;background: url(../images/circle/4.png) no-repeat;bottom: -30px;left: 500px;-webkit-animation:wave 6s .1s infinite linear;animation:wave 6s .1s infinite linear}
.bg .c_5{width: 130px;height: 130px;background: url(../images/circle/5.png) no-repeat;bottom: 100px;right: -100px;-webkit-animation:wave 6s .1s infinite linear;animation:wave 6s .1s infinite linear}

@keyframes FadeOutT{0%{opacity:1;transform:translateY(0);} 100%{opacity:0;transform:translateY(-200px);}}
@-webkit-keyframes FadeOutT{0%{opacity:1;transform:translateY(0);} 100%{opacity:0;transform:translateY(-200px);}}
@keyframes comeIn{0%{opacity:0;transform:translateX(-100px);} 10%{opacity:1;transform:translateX(10px);} 20%{transform:translateX(-10px);} 30%{transform:translateX(0);} 70%{transform:translateX(0);} 80%{opacity:1;transform:translateY(0);} 100%{opacity:0;transform:translateY(-10px);}}
@-webkit-keyframes comeIn{0%{opacity:0;transform:translateX(-100px);} 10%{opacity:1;transform:translateX(10px);} 20%{transform:translateX(-10px);} 30%{transform:translateX(0);} 70%{transform:translateX(0);} 80%{opacity:1;transform:translateY(0);} 100%{opacity:0;transform:translateY(-10px);}}
@-webkit-keyframes wave{0%{-webkit-transform:rotateZ(0) translate3d(0,-8%,0) rotateZ(0);transform:rotateZ(0) translate3d(0,-8%,0) rotateZ(0)} 100%{-webkit-transform:rotateZ(360deg) translate3d(0,-8%,0) rotateZ(-360deg);transform:rotateZ(360deg) translate3d(0,-8%,0) rotateZ(-360deg)}}
@keyframes wave{0%{-webkit-transform:rotateZ(0) translate3d(0,-8%,0) rotateZ(0);transform:rotateZ(0) translate3d(0,-8%,0) rotateZ(0)} 100%{-webkit-transform:rotateZ(360deg) translate3d(0,-8%,0) rotateZ(-360deg);transform:rotateZ(360deg) translate3d(0,-8%,0) rotateZ(-360deg)}}
@-webkit-keyframes wave2{0%{-webkit-transform:rotateZ(0) translate3d(0,-2%,0) rotateZ(0);transform:rotateZ(0) translate3d(0,-2%,0) rotateZ(0)} 100%{-webkit-transform:rotateZ(360deg) translate3d(0,-2%,0) rotateZ(-360deg);transform:rotateZ(360deg) translate3d(0,-2%,0) rotateZ(-360deg)}}
@keyframes wave2{0%{-webkit-transform:rotateZ(0) translate3d(0,-2%,0) rotateZ(0);transform:rotateZ(0) translate3d(0,-2%,0) rotateZ(0)} 100%{-webkit-transform:rotateZ(360deg) translate3d(0,-2%,0) rotateZ(-360deg);transform:rotateZ(360deg) translate3d(0,-2%,0) rotateZ(-360deg)}}
@-webkit-keyframes marquee{0%{background-position: 0 10000px} 100%{background-position: 0 0}}
@keyframes marquee{0%{background-position: 0 10000px} 100%{background-position: 0 0}}

/* 充值中心 */
.payInfo{flex: 1; display: flex; padding-top: 120px;}
.payInfo .menu{height: 74vh; width: 200px; background: #fff;}
.payInfo .menu a{display: block; height: 63px; line-height: 63px; padding-left: 36px; background: linear-gradient(90deg, #9759f9 0%, #d045f3 100%); font-size: 14px; font-weight: 500; color: #FFFFFF;}
.payInfo .payForm{background: #fff; margin: 0 0 0 24px; flex: 1;}
.payInfo .payForm .line{display: flex; align-items: center; margin-bottom: 30px;}
.payInfo .payForm .line label{width: 200px; text-align: right; font-size: 16px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #999999; margin-left: 16%;}
.payInfo .payForm .user-id{margin-top: 48px;}
.payInfo .payForm .user-id input{width: 288px; height: 42px; border-radius: 4px; border: 1px solid #E6E6E6; padding: 0 5px;}
.payInfo .payForm .incharge-line input{width: 132px; height: 42px; border-radius: 4px; border: 1px solid #E6E6E6; margin-right: 8px; padding: 0 5px;}
.payInfo .payForm .incharge-line p{height: 100%; display: inline-block; color: rgba(153, 153, 153, 1); font-size: 14px;}
.payInfo .payForm .incharge-line p span{color: rgba(51, 51, 51, 1); font-size: 16px;}
.payInfo .payForm .should .right-line p span{color: rgba(242, 60, 60, 1);}
.payInfo .payForm .should{margin-bottom: 40px;}
.payInfo .payForm .platform .right-line img{width: 176px; height: 72px;}
.payInfo .payForm .platform{align-items: flex-start;}
.payInfo .payForm .pay{display: inline-block; width: 288px; height: 58px; line-height: 58px; text-align: center; background: linear-gradient(90deg, #9759f9 0%, #d045f3 100%); border-radius: 4px; font-size: 18px; color: #FFFFFF;}
.payInfo .payForm .userAccept span{display: inline-block; width: 14px; height: 14px; background: url(../images/iconradio-normal@2x.png) no-repeat; background-size: 100% 100%; -webkit-background-size: 100% 100%;}
.payInfo .payForm .userAccept .active{width: 14px; height: 14px; background: url(../images/iconselected@2x.png) no-repeat; background-size: 100% 100%; -webkit-background-size: 100% 100%;}
.payInfo .payForm .userAccept p{height: 100%; display: inline-block; color: rgba(51, 51, 51, 1); margin-top: -2px;}
.payInfo .payForm .userAccept p a{color: rgba(255, 67, 93, 1);}
.payInfo .payForm .tips{color: #999999;}

.agreement{max-width: 960px;margin: 0 auto;padding: 20px;color: #666;font-size: 14px;line-height: 26px;}
.agreement h4{color: #333;}

/*--分辨率自适应--*/

@media (max-height:900px) and (min-width: 1300px) { 
    header{width: 100%; height: 40px; padding: 10px 0;}
    header .logo{width: 180px;height: 40px;}
    header nav a{font-size: 16px;line-height: 40px;margin: 0 20px;}

    .main{max-width: 1000px;}
    .main .con{zoom: .7}
    .main .info{
        padding: 170px 0 180px 300px;
        margin: 0 auto;
        background: url(../images/logo_about.png) no-repeat 50px center/200px auto;
    }
    .main .info p{
        font-size: 14px;
        line-height: 20px;
    }
    .aboutInfo,.contactInfo{
        max-width: 1000px;
        min-height: 100px;
        padding: 80px 0 20px 0;
    }
    .aboutInfo p{font-size: 14px;}
 }

 @media (max-width: 800px) { 
    html, body{min-width: 100vw;}
    header{ height: 35px;}
    header .logo{width: 120px;height: 35px; margin-left: 10px;background-size: auto 80% !important; background-position: center !important;}
    header nav{ padding-right: 10px;}
    header nav a{ 
        font-size: 12px;
        margin: 0 3px;
        line-height: 35px;
    }
    header nav a.active::after{
        height: 3px;
        bottom: 3px;
    }

    .main{max-width: 100%;}
    .main .con{
        width: 100%;
        height: auto;
        margin: -36% 0 0 -50%;
    }
    .main .con .live{
        display: none;
    }
    .main .con .slogan{
        width: 100%;
        height: 200px;
        margin-top: 0;
        background-size: 86% auto;
        background-position: center;
    }
    .main .btn{
        width: 100%;
        height: 50px;
        padding: 40px 0 00px;
    }
    .main .btn a{
        float: none;
        margin: 0 auto;
        transform: scale(.8);
    }

    .main .info{
        padding: 100px 35px 0;
        background: none;
    }
    .main .info p,.main .aboutInfo p,.contactInfo ul li{
        font-size: 14px;
        line-height: 26px;
        margin-bottom: 10px;
    }
    .main .aboutInfo,.main .contactInfo{
        padding: 60px 0 0;
        min-height: 72vh;
    }
    .main .aboutInfo p,.contactInfo ul{
        padding: 0 20px;
    }

    .main .payInfo{
        padding-top: 100px;
    }
    .main .payInfo .menu{
        display: none;
    }
    .main .payInfo .payForm{
        margin: 0;
        padding: 20px;
    }
    .main .payInfo .payForm .line{
        margin: 10px 0;
        display: block;
    }
    .main .payInfo .payForm .line label{
        margin: 0 0 10px 0;
        text-align: left;
        font-size: 12px;
    }
    .payInfo .payForm .user-id input{
        width: 100%;
        height: 30px;
        box-sizing: border-box;
    }
    .payInfo .payForm .incharge-line input{
        height: 30px;
    }
    .payInfo .payForm .incharge-line p{
        font-size: 12px;
    }
    .payInfo .payForm .platform .right-line img{
        width: 14   0px;
        height: auto;
    }
    .payInfo .payForm .pay{
        width: 100%;
        font-size: 14px;
        height: 40px;
        line-height: 40px;
    }
    .payInfo .payForm .userAccept{
        margin: 20px 0 0 0 !important;
    }
 }