body {
    font: normal 100% Helvetica�� Arial�� sans-serif;
    font-size:10px;
}
html,body{
    height:100%
}
a {
    color: #669;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
h1 {
    font: bold 36px/100% Arial, Helvetica, sans-serif;
}
.pagewrap {
    width: 100%;
    height: 100%;
    position: relative;
}
.page-top-frame {
    width: 100%;
    height: 100%;
    background: url(../img/top.png) no-repeat center center;
    background-repeat:no-repeat;
    background-attachment: fixed;
    flex-direction: column;
  	background-size: 110% 240%;
        
}


/* .page-bottom-frame {
    width:100%;
    height: 30%;
    background: rgba(46, 47, 49, 1);
    background-size:100%
    position: relative;
}  */
.back-color{
    background:rgba(45,181,219,1);
    position: relative;
}
.page-center-frame{
    width:70em;
    height:30em;
}
.Blogo{
    width:26%;
    height:75%;
    position: absolute;
    left:0;
    top:0;
    background: url(../img/Blogo.png) no-repeat center;
    background-size:100% 100%;
}
.reminder{
    width:24%;
    height:30%;
    position: absolute;
    top: 0px;
    bottom:0;
    margin:auto;
    left:11%;
}
.reminder-title{
    width:100%;
    height:50%;
    font-family:SimHei;
    font-weight:400;
    color:rgba(255,255,255,1);
}
.title-font{
    font-size:2.3em;
}
.reminder-content{
    width:100%;
    height:50%;
    font-size:1.2em;
    font-family:SimHei;
    font-weight:400;
    color:rgba(255,255,255,1);
}
.content-font{
    font-size:1.2em;
}
.login-frame{
    width:36em;
    height:34em;
    margin-right:2em;
    margin-top:-2em;
}
.logo-frame{
    width:12em;
    height:4.32em;
}
.info-input-frame{
    width:72%;
    height:72%;
    position: relative;
}
.li-height{
    height:4.4em;
}
.li-style {
    width: 100%;
    display: flex;
    display: -webkit-flex; /* Safari */
    border-bottom:0.05em solid rgba(204,204,204,1);
}
.info-input-name {
    flex: 2;
    color: rgba(63, 63, 63, 1);
    font-family: SimHei;
    font-weight: 400;
    text-align: left;
}
.name-font{
    font-size:1.3em;
    line-height: 3.3em;
}
.input-font{
    font-size:1.2em;
}
.info-input-content{
    flex:8;
    background-color: rgba(255,255,255,0);
    font-family:SimHei;
    font-weight:400;
    border: none;
    outline: none;
    color:rgba(63,63,63,1);
}
.info-input-icon{
    flex:1;
}
.icon-style{
    width:1.5em;
    height:1.5em;
    background-repeat:no-repeat;
}
.icon-email-style{
    width:1.5em;
    height:1.2em;
    background-repeat:no-repeat;
}
.logo-local{
    position: absolute;
    left:10%;
    top:5%;
}
.logo-url{
    background: url(../img/logo.png) no-repeat center;
    background-size:100% 100%;
}
.back-style{
    background:rgba(255,255,255,1);
    box-shadow:0px 0.4em 0.7em 0px rgba(63,115,152,0.65);
    border-radius:0.5em;
    float:right;
}
.info-button-frame{
    width:100%;
    height:30%;
    position:relative;
}
.button-frame{
    width:32%;
    height:34%;
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
    right:0;
}
.button-frame button{
    width: 100%;
    height: 40px;
    font-family:SimHei;
    font-weight:400;
    color:rgba(255,255,255,1);
    background:rgba(82,189,223,1);
    border:1px solid rgba(26,156,195,1);
    border-radius:2px;
    float: right;
}
.button-font{
    font-size:1.3em;
}
.logo-code-frame{
    width:20em;
    height:100%;
    position:relative;
}
.logo-top{
    width:7.5em;
    height:2.7em;
    margin-top:0.5em;
}
.logo-center{
    width:9em;
    height:9em;
    margin-top: 1em;
}
.logo-bottom{
    margin-top:1em;
    width:100%;
    text-align: center;
    font-size:1em;
    font-family:SimHei;
    font-weight:400;
    color:rgba(255,255,255,1);
}
.code-url{
    background: url(../img/code.png) no-repeat center;
    background-size:100% 100%;
}
@media screen and (max-width: 1400px) {
    .page-center-frame{
        width:56em;
        height:22em;
    }
    .login-frame{
        width:28em;
        height:25em;
        margin-right:1.5em;
        margin-top:-1.5em;
    }
    .li-height{
        height:3.0em;
    }
    .name-font{
        font-size:1.1em;
        line-height: 2.5em;
    }
    .input-font{
        font-size:1.0em;
    }
    .title-font{
        font-size:1.8em;
    }
    .content-font{
        font-size:1.0em;
    }
    .icon-style{
        width:1.2em;
        height:1.2em;
        background-repeat:no-repeat;
    }
    .icon-email-style{
        width:1.2em;
        height:1.0em;
        background-repeat:no-repeat;
    }
    .button-font{
        font-size:1.1em;
    }
}
@media screen and (max-width: 992px) {
    .page-center-frame {
        width: 49em;
        height: 20em;
    }

    .login-frame {
        width: 25em;
        height: 23em;
        margin-right: 1.5em;
        margin-top: -1.5em;
    }
    .li-height{
        height:3.0em;
    }
    .logo-frame {
        width: 10em;
        height: 3.6em;
    }

    .name-font {
        font-size: 1.0em;
        line-height: 2.8em;
    }

    .input-font {
        font-size: 0.9em;
    }

    .title-font {
        font-size: 1.7em;
    }

    .content-font {
        font-size: 0.9em;
    }

    .icon-style {
        width: 1.0em;
        height: 1.0em;
        background-repeat: no-repeat;
    }

    .icon-email-style {
        width: 1.0em;
    }
}
@media screen and (max-width: 768px) {
    .page-center-frame{
        width:35em;
        height:15em;
    }
    .login-frame{
        width:20em;
        height:17em;
        margin-right:1em;
        margin-top:-1em;
    }
    .li-height{
        height:2.3em;
    }
    .logo-frame{
        width:10em;
        height:3.6em;
    }
    .name-font{
        font-size:0.8em;
        line-height: 2.8em;
    }
    .input-font{
        font-size:0.7em;
    }
    .title-font{
        font-size:1.2em;
    }
    .content-font{
        font-size:0.7em;
    }
    .icon-style{
        width:0.8em;
        height:0.8em;
        background-repeat:no-repeat;
    }
    .icon-email-style{
        width:0.8em;
        height:0.6em;
        background-repeat:no-repeat;
    }
    .button-font{
        font-size:0.8em;
    }
}
@media only screen and (max-width: 420px) {
    .page-center-frame{
        width:26em;
        height:11em;
    }
    .login-frame{
        width:13em;
        height:12em;
        margin-right:1em;
        margin-top:-0.5em;
    }
    .li-height{
        height:1.6em;
    }
    .logo-frame{
        width:10em;
        height:3.6em;
    }
    .name-font{
        font-size:0.5em;
        line-height: 3.2em;
    }
    .input-font{
        font-size:0.4em;
    }
    .title-font{
        font-size:0.9em;
    }
    .content-font{
        font-size:0.5em;
    }
    .icon-style{
        width:0.6em;
        height:0.6em;
        background-repeat:no-repeat;
    }
    .icon-email-style{
        width:0.6em;
        height:0.5em;
        background-repeat:no-repeat;
    }
    .button-font{
        font-size:0.5em;
    }
}
.margin-center{
    position: absolute;
    left:0;
    right: 0;
    top:0;
    bottom: 0;
    margin:auto;
}
.center{
    position:relative;
    display: flex;
    display: -webkit-flex; /* Safari */
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    flex-direction:column;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center;
}
input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color:rgba(63,63,63,1);
}
input::-moz-placeholder { /* Firefox 19+ */
    color:rgba(63,63,63,1);
}
input::-ms-input-placeholder { /* IE 10+ */
    color:rgba(63,63,63,1);
}
input::-moz-placeholder { /* Firefox 18- */
    color: rgba(63, 63, 63, 1);
}

@media screen and (max-width:900px){
    .button-frame button{width: 75px;height:25px;font-size: 13px;}
    .page-top-frame {
          /* background-size:auto !important; */
          background-origin: border-box;
    }
    .page-center-frame{
        width: 73%;
        height: 64%;
        top: 6%;
    }
    .Blogo{
        width: 126px;
        height:150px;
    }
    .reminder{
        width: 60%;
        height: 86%;
        position: absolute;
        /* top: 10px; */
        bottom: 0;
        /* margin: auto; */
        left: 0px;
        /* padding: 0px; */
        right: -20%;
        text-align: left;
        }
    .title-font{font-size: 24px;}
    .content-font{font-size: 12px;width: 100%;}
    .login-frame{width:92%;height: 20em;/* margin: 0px 4%; */position: fixed !important;left: 4%;right: 4%;top: 45%;}
    .info-input-frame{width: 90%;}
    .li-height{height: 3.6em;position: relative;}
    .li-height label:nth-child(1){display: block;width: 40px;height: 40px;line-height: 40px;font-size: 11px;margin-top:8px;color: #3f3f3f;}
    .info-input-name{flex:none}
    .info-input-icon{flex: none;right: 0px;position: absolute;top: 9px;}
    .icon-style{width: 14px;height: 14px;margin-top: 10px;}
    .icon-email-style{width: 14px;height: 14px;margin-top: 10px;}
    .info-input-frame{margin-top: -96px;}
    .button-frame{width: 100%;height:68%;top: 30%;}
    .info-input-content{flex: none;width:77%;}
    .input-font{font-size: 12px;padding-top: 13px;}
    .reminder-title{height: 10%;text-align: left;/* padding-right: 30px; */width: 100%;float: right;}
    .button-font{font-size: 18px;}
    .logo-frame{top: 7%;width: 80px;height: 30px;}
    .page-top-frame{background:url(../img/tops.png) !important;background-size: 100% 100% !important;}
}