body {font-family: PingFang SC,Microsoft Yahei,\\5FAE\8F6F\96C5\9ED1,Arial,Hiragino Sans GB,\\5B8B\4F53,system;font-size: 12px;background: #000;}
html, body{width: 100%;height: 100%;position: relative;}
*{outline: none;padding:0;margin:0;}
ul,li,ol,dl,dd{display: inline-block;list-style: none;margin: 0;padding: 0}
/*button*/
.button{width:100%;height:48px;line-height: 48px; font-size: 18px;text-align: center;color: #FFFFFF;background: #0087ff;border-radius: 4px;border:0;cursor: pointer;}
.button:hover{background: rgba(0,135,255,.7);}
.button.useless{background:#D0D0D0;}
/*button end*/
.hide{display: none !important;}
.browser{display:none;position: relative; min-width: 1270px;height:34px;line-height: 34px;text-align: center;font-size: 14px; color: #BF4524;background: #FCF7CE;}
.browser a{color: #BF4524;}
.browser img{position:absolute;right:10px;top:50%;transform: translateY(-50%);cursor: pointer;width: 20px;}
.content{min-height:100vh; position: relative; background: url("https://p1.yqbimg.net/pc/vr/bportal/static/login_bg-bcdd8c.png") no-repeat 100% 100%;background-size: cover;}
.content .nav{min-width: 1270px;height:34px;line-height: 34px;font-size: 12px; background: rgba(0,0,0,0.50);}
.content .nav .inner{width:1270px;margin:0 auto;}
.content .nav a{color: #fff;margin-right: 36px; text-decoration: none;opacity: 0.8;}
.content .nav a:hover{opacity: 1;}
.content>.inner{position: relative; width:1270px;height:810px;margin:0 auto;}
.logo{position: absolute;top:24px;left:0; display: flex; align-items: center;}
.logo .logo-img { height: 24px;width: 95px; }
.logo *{display: inline-block;vertical-align: middle;color:#fff;}
.logo span.line{width:2px;height:18px;background: #fff;margin:0 12px 0 12px;}
.logo h3{font-size: 24px;color: #FFFFFF;font-weight: normal;}
.login-wrap{position: absolute;top:107px;right:115px;width:372px;}
.login-wrap>.form-card{padding:20px 36px;background: #fff;box-shadow: 0 2px 40px 0 rgba(0,35,98,0.20);
    border-radius: 4px;}
.login-wrap>.form-card h1{font-size: 24px;color: #000000;font-weight: normal;}
.login-wrap>.form-card>div{position: relative; height:60px;border-bottom: 1px solid #CCCCCC;}
.login-wrap>.form-card>div label{display: none; position: absolute;left:0;top:0px;font-size: 12px;color: #0087FF;}
.login-wrap>.form-card>div input{position: absolute;left:0;bottom:4px;width:250px; font-size: 18px;line-height: 18px;border:0;padding-left: 0px;}
.login-wrap>.form-card>div.imgcode input{width:210px;}
.login-wrap>.form-card>div.imgcode img{position: absolute;right:0;bottom:4px; width:70px;height:30px;}
.login-wrap>.form-card>div span.error{display: none;position: absolute;left:0;bottom:-16px;font-size: 12px;color: #FF0000;}
.login-wrap>.form-card>div.error span.error{display: block;}
.login-wrap>.form-card p.tips{line-height: 40px;padding-bottom: 10PX;color: #999999;}
.login-wrap>.form-card p.tips *{display: inline-block;vertical-align: middle;}
.login-wrap>.form-card p.tips i{margin-right:8px; display: inline-block;width:12px;height:12px;background: url('../image/hollow.png');}
.login-wrap>.form-card p.warn{padding-top:10px; color: #999999;line-height: 18px;}
.login-wrap .notice{position: relative; margin-top:8px; height:158px;font-size: 14px;line-height: 20px;color:#fff; background: rgba(0,0,0,.3);border-radius: 4px;overflow: hidden;}
.login-wrap .notice .inner{position: absolute;top:0;left:0; height:130px;transition: left .5s;}
.login-wrap .notice .inner pre{white-space:pre-wrap; /* css3.0 */
    white-space:-moz-pre-wrap; /* Firefox */
    white-space:-pre-wrap; /* Opera 4-6 */
    white-space:-o-pre-wrap; /* Opera 7 */
    word-wrap:break-word; /* Internet Explorer 5.5+ */
    height: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;}
.login-wrap .notice .inner>div{width:372px;padding:20px 34px;height:130px;float: left;box-sizing: border-box;cursor: pointer;}
.login-wrap .notice h2{font-size: 14px;font-weight: normal;}
.login-wrap .notice p{height:80px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;}
.login-wrap .notice ul{padding-left:34px; position: absolute;top:135px;left:0;}
.login-wrap .notice ul li{position: relative;float: left; display: inline-block;width:16px;height:6px;text-align: center;}
.login-wrap .notice ul li i{position: absolute;top:0;left:50%;transform: translateX(-50%); display: inline-block;width:6px;height:6px;opacity: 0.8;background: #FFFFFF;border-radius: 100px;}
.login-wrap .notice ul li.cur i{width:16px;}
.footer{position: absolute;bottom:0;left:50%;margin-left:-635px;width:1270px;height:33px;padding-bottom:24px; line-height: 33px;color:#fff;}
.footer a{color:#fff;text-decoration: none;}
.footer *{display: inline-block;vertical-align: middle;}
.footer .left{float: left;}
.footer .right{float: right;}
.footer .right span.line{opacity: .2;}
.footer .chop { overflow: hidden; }
.footer .chop .chop1{float: left; margin-right:5px; width:52px;height:33px;background: url(../image/login-icon.png);background-position: -89px -159px;}
.footer .chop .chop2{float: left; margin-right:5px; width:52px;height:33px;background: url(../image/login-icon.png);background-position: -143px -160px;}
.footer .chop .chop3{float: left; width:26px; }
.footer .chop .chop3 img { width: 100%; height:auto; }
.notice-detail{position: fixed;top:0;left:0;width:100%;height:100%;background: rgba(0,0,0,.5);}
.notice-detail .inner{position: absolute;width:640px;height:480px;top:50%;left:50%;margin-top:-240px;margin-left:-320px;padding:20px 30px; background: #fff;text-align: center;box-shadow: 0 6px 40px 0 rgba(0,0,0,0.20);
    border-radius: 4px;box-sizing: border-box;overflow: hidden}
.notice-detail .inner h2{font-size: 24px; line-height: 24px;text-align: left;}
.notice-detail .inner .lunbo{height:300px;position: absolute;left:0;transition: left .5s;}
.notice-detail .inner .item{font-size: 14px;line-height: 24px;margin:35px 0;text-align: left;height:300px;overflow-y: auto;color:#333;width: 580px;float: left;padding: 0 30px;}
.notice-detail .inner p{text-align: right}
.notice-detail .inner pre{white-space:pre-wrap; /* css3.0 */
    white-space:-moz-pre-wrap; /* Firefox */
    white-space:-pre-wrap; /* Opera 4-6 */
    white-space:-o-pre-wrap; /* Opera 7 */
    word-wrap:break-word; /* Internet Explorer 5.5+ */ }
.notice-detail .inner .button{width:124px;height:40px;line-height: 40px;}
.popup{position: fixed;top:0;left:0;width:100%;height:100%;background: rgba(0,0,0,.5);}
.popup .inner{position: absolute;width:340px;top:50%;left:50%;margin-left:-170px;padding:36px 40px 40px 90px; background: #fff;box-shadow: 0 6px 40px 0 rgba(0,0,0,0.20);
    border-radius: 4px;box-sizing: border-box;}
.popup .inner img{position: absolute;top:50%;transform:translateY(-50%);left:40px;width:32px;height: 32px;}
.popup .inner p{font-size: 16px;color: #333333;line-height: 22px;}

#noticeNav1{
    padding-left: 34px;
    position: absolute;
    left: 250px;
    bottom: 30px;
}
#noticeNav1 li{
    position: relative;
    float: left;
    display: inline-block;
    width: 16px;
    height: 6px;
    text-align: center;
}
#noticeNav1 li.cur i {
    width: 16px;
}
#noticeNav1 li i{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    width: 6px;
    height: 6px;
    opacity: 0.8;
    background: #666;
    border-radius: 100px;
}
.notice-detail .inner .closeImg{
    position: absolute;
    right: 20px;
    top: 10px;
    cursor: pointer;
}

@media screen and (max-width: 980px) {
    .browser {
        min-width: 100%;
    }
    .content {
        background: url(https://p1.yqbimg.net/pc/vr/bportal/static/login_bg-bcdd8c.png) no-repeat -450px 100%;
        background-size: cover;
    }
    .content .nav {
        min-width: 100%;
    }
    .content .nav .inner {
        width: 920px;
    }
    .content>.inner {
        width: 920px;
    }
    .login-wrap {
        right: 60px;
    }
    .footer {
        width: 100%;
        left: 0;
        margin-left: 0;
    }
}