@charset "Gb2312";
/* banner */
.banner{ width:100%; height:calc(100% - 45px); background:url(../img/banner.jpg) no-repeat top center;background-size:contain;}
.banner .login-area .login-box{ right:100px; top:160px; width:280px;background-color: rgba(255, 255, 255, 0.7); border-radius: 0.5rem;box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);border: 1px solid #ccc;}
.banner .login-area .login-box h3{ margin:20px 0 20px 105px; height:20px; line-height:20px; color:#87c7ed}
.banner .login-area .login-box label{ display:none}
.banner .login-area .login-box .login_input{  margin:0 20px 20px; height:36px; }
.banner .login-area .login-box .login_input .username{ width:235px; padding:3px; text-align:left;height:32px; border:1px solid #999999; font-size:16px;background-color: rgba(255, 255, 255, 0.7); line-height:14px; text-indent:5px;border-radius: 0.2rem;box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);}
.banner .login-area .login-box .password_input{  margin:0 20px 20px; height:36px;}
.banner .login-area .login-box .password_input .password{ width:235px; height:32px; padding:3px; text-align:left;border:1px solid #999999; font-size:16px;background-color: rgba(255, 255, 255, 0.7); line-height:14px; text-indent:5px;border-radius: 0.2rem;box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);}
.banner .login-area .login-box .pass-form-submit{ margin:0 20px 20px; overflow:hidden; zoom:1; clear:both}
.banner .login-area .login-box .pass-form-submit #submit{ width:240px; height:40px; border:0; cursor:pointer; background:#6da6d6; border-radius: 0.2rem;box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); color:#FFF; font-size: 18px; line-height:18px; font-family:"Microsoft YaHei",\5fae\8f6f\96c5\9ed1,arial,\5b8b\4f53; letter-spacing: 10px}
.banner .login-area .login-box .pass-form-submit #submit:hover{background:#87c7ed; }
.banner .login-area .login-box .pass-form-submit #submit:active{background:#2570af; }
.banner .login-area .login-box .pass-form-bottom{ margin:0 20px 20px; overflow:hidden; zoom:1; clear:both}
.banner .login-area .login-box .pass-form-bottom .register{ width:100px; height:14px; padding:11px 0; float:left; background:#2cb0dc;border-radius: 0.2rem;box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); text-align:center; font-size:14px; font-family:"Microsoft YaHei",\5fae\8f6f\96c5\9ed1,arial,\5b8b\4f53; line-height:14px; color:#FFF}
.banner .login-area .login-box .pass-form-bottom a:hover.register{ background:#09F}
.banner .login-area .login-box .pass-form-bottom a:active.register{ background:#06F}
.banner .login-area .login-box .pass-form-bottom .forget-password{ float:left; margin-left:20px; padding:11px 0; font:"Microsoft YaHei",\5fae\8f6f\96c5\9ed1,arial,\5b8b\4f53, 14px; line-height:14px; color:#999999}
.banner .login-area .login-box .pass-form-bottom a:hover.forget-password{ color:#666}
.banner .login-area .login-box .pass-form-bottom a:active.forget-password{ color:#999}
.banner .login-area .login-box .pass-form-bottom .androiddown{ width:50px; height:40px;float:left;background-size: contain; background-position: center center;background:url(../img/android.png) no-repeat;border-radius: 0.2rem; }
.banner .login-area .login-title { margin-top: 120px;float: right;margin-right: 150px;}
/*蒙版*/
.mask {  position: fixed; top: 0;left: 0; width: 100%;height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 100;  }
.mask .mask-title {width: 100%;display: flex; justify-content: center; align-items: center;margin-top: 220px;color: azure;}
.mask .image-container{display: flex; justify-content: center; align-items: center;margin-top: 20px; }
.mask .image-container img {width: 200px;}
.mask .mask-a-ddown{ width: 100%;display: flex; justify-content: center; align-items: center;margin-top: 10px;color: aqua;font-size: 18px;}
/* advantages */
.advantages ul{ margin:0 auto; padding:15px 10px 15px; overflow:hidden; zoom:1; clear:both}
.advantages ul li{ width:240px; margin-bottom:30px}
.advantages ul li .info_pic, .advantages ul li h3, .advantages ul li p{ margin:0 auto}
.advantages ul li h3, .advantages ul li p{ text-align:center}
.advantages ul li h3{ padding-top:20px; font-weight:bold}
.advantages ul li p{ width:240px; padding:5px 0; font-size:12px; color:#666}

.info_pic{ width:128px; height:128px}
.info_pic_ios{ width:128px; height:128px; margin-left:50px;}
.info-1 .info_pic{ background:url(../img/info_pic_4.png) no-repeat}
.info-2 .info_pic{ background:url(../img/info_pic_5.png) no-repeat}
.info-3 .info_pic{ background:url(../img/info_pic_6.png) no-repeat}

.info-download .info_pic{ background:url(../img/android-ola2.png) no-repeat}
.info-download-ios .info_pic_ios{ background:url(../img/ios-ola2.png) no-repeat}

.info-download span{ margin-left:65px; padding:5px 0; font-size:12px; color:#666; line-height:21px}
.info-download-ios span{ margin-left:65px; padding:5px 0; font-size:12px; color:#666; line-height:21px}

.info-download .andorid_download{ z-index:9; display:block; width:235px; height:66px; background:url(../img/d_btn.png) 0 0 no-repeat; margin-bottom:5px}
.info-download-ios .ios_download{ z-index:10; display:block; width:235px; height:66px; background:url(../img/d_btn_ios.png) 0 0 no-repeat; margin-bottom:5px}
.info-download a{color:#2871d5}

@media screen and (min-width:1200px){
    .banner .login-area .login-box{
        right: 100px;
    }
    .banner .login-area .login-title{
        margin-right: 150px;
    }
    .banner{
        background-size: 100% auto;
    }
}
@media screen and (max-width:1199px) and (min-width:501px){
    .banner .login-area .login-box{
        right: 100px;
    }
    .banner .login-area .login-title{
        margin-right: 150px;
    }
    .banner{
        background-size:auto;
    }
}
@media screen and (max-width:500px){
    .banner .login-area .login-box{
        right: 15px;
    }
    .banner .login-area .login-title{
        margin-right: 75px;
    }
    .banner{
        background-size:cover;
    }
}