html{height:100%;position:relative;}
body{background-color:#f4f7f9;position:relative;width:100%;height:100%;margin:0;padding:0;font-family:segoe ui;}
.footer{position:absolute;bottom:0;text-align:center;width:100%;background:#00a0e4;color:#fff;font-size:14px;padding:12px 0;}
.bg-design{position:absolute;width:100%;height:60%;background-color:#b5d9ff;}
.container{position:relative;z-index:1;width:1150px;height:100vh;margin:auto;overflow:hidden;}
.bg-title{width:528px;height:89px;background:url(/Assets/css/img/bg-title.png);position:absolute;left:0;top:52.8%;}
.container .content{width:388px;margin:auto;}
.container .content .img{margin-top:50px;text-align:center;}
.container .content .img img{min-width:auto;}
.login-form {position:relative;background-color:#f0f4f7;padding:40px 40px;margin-top:40px;}
.login-form p{font-size:15px;}
.login-form:before{content:"";position:absolute;width:100%;height:5px;background:url(/Assets/css/img/line-top.png);background-size:100%  100%;top:0;left:0;}
.login-form h2{font-size:23px;color:#f26522;font-weight:normal;text-transform:uppercase;text-align:center;margin:0;margin-bottom:20px;}
.login-form .textbox {margin-top:15px;position:relative;}
.login-form .textbox:before{content:"\f007";font-family:fontawesome;position:absolute;background:#00a0e4;color:#fff;height:100%;padding-top:8px;box-sizing:border-box;font-size:20px;width:45px;text-align:center;}
.login-form .password:before{content:"\f023";}
.login-form .txt{width:100%;font-size:14px;border:1px solid #dbdbdb;padding:13px 10px;padding-left:55px;box-sizing:border-box;}
.login-form .txt::-webkit-input-placeholder {color:#00a0e4;}
.login-form input:focus{outline:1px solid #7ac5e5;outline-offset:0;}
.login-form .bottom{position:relative;text-align:right;margin-top:30px;}
.login-form .check-remember{position:absolute;color:#e21c07;font-weight:600;top:10px;left:0;}
.login-form .bottom .btn{background-color:#00a0e4;color:#fff;font-size:14px;padding:10px 20px;border-radius:5px;}
.login-form .bottom .btn:active{background-color:#047fda}
@media only screen
  and (max-width :1279px){
      .container{width:96%;}
      .container .content .imgW{margin-top:100px;}
      .bg-title{width:380px;height:60px;background-size:100% 100%;top:50.8%}
      .bg-design{height:55%}
  }
@media only screen
  and (max-width :1023px){
      .container .content .img{margin-top:120px;}
      .bg-design{height:75%}
      .bg-title{bottom:0;top:72%;left:0;right:0;margin:0 auto;}
      .login-form{padding:}
      .login-form h2{margin-bottom:20px;}
      .login-form p{font-size:13px;}
      .login-form .txt{padding:8px;font-size:13px;padding-left:50px;}
      .login-form .textbox:before{font-size:15px;width:40px;}
  }
@media only screen
  and (max-width :767px){
      .container .content {margin-top:40px;}
      .container .content .img{display:none;}
      .container .content{width:300px;}
      .bg-design{height:50%}
      .bg-title{display:none;}
      .login-form{margin-top:30px;padding:30px 20px;}
      .login-form:before{height:3px;}
      .login-form h2{font-size:18px;margin-bottom:10px;}      
      .login-form .textbox{margin-top:10px;}
      .login-form h2:before,.login-form h2:after{width:50px;margin-bottom:6px;}
      .login-form .bottom{margin-top:20px;}
      .login-form .bottom .check-remember{font-size:13px;}
      .login-form .bottom .btn{padding:8px 10px;font-size:13px;}
      .footer{font-size:13px;padding:8px 0;}
  }
@media only screen
  and (max-width :467px){
      .container .content {margin-top:0;}
      .container .content .img{display:block;margin-top:50px;}
      .bg-design{height:70%}
      .bg-title{display:block;width:300px;height:45px;top:66.4%;}
  }