* { margin: 0; padding: 0; }
input { outline: 0; }
.login-btn button, .login-forgetPassword a { transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s; }
.login-box { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.login-inner { position: relative; height: 100%; width: 100%; }
.login-right { width: 60%; position: absolute; height: 100%; top: 0; right: 0; background: url(/images/login-right-bg.png) no-repeat 0 bottom; background-size: 100% auto; z-index: 1; }
.login-right-inner { position: relative; height: 100%; width: 100%; }
.login-right-icon { position: absolute; bottom: 10%; left: 11%; height: 614px; width: 70%; background: url(/images/login-right-icon.png) no-repeat 0 bottom; background-size: 100% auto; }
.login-left { width: 45%; position: absolute; height: 100%; top: 0; left: 0; z-index: 2; }
.login-left-inner { position: relative; height: 100%; width: 100%; }
.login-left-icon { position: absolute; top: 0; left: 8%; height: 295px; width: 30%; background: url(/images/login-left-icon.png) no-repeat 0 top; background-size: 100% auto; }
.login-cont { width: 400px; min-height: 520px; position: absolute; top: 25%; right: 10%; }
.login-cont-hd { font-size: 0; margin-bottom: 55px; height: 55px; }
.login-cont-hd i { display: inline-block; width: 55px; height: 55px; vertical-align: middle; margin-right: 18px; }
.login-cont-hd i img { display: inline-block; width: 100%; vertical-align: top; }
.login-cont-hd h2 { display: inline-block; vertical-align: middle; font-size: 32px; line-height: 1; margin-top: -8px; font-weight: bolder; color: #007cc3; }
.login-welcome { margin-bottom: 60px; }
.login-welcome strong { color: #ccc; font-size: 22px; line-height: 22px; display: inline-block; position: relative; }
.login-welcome strong:after { content: ""; position: absolute; z-index: 1; height: 2px; background: #ececec; left: 0; width: 100%; top: 40px; }
.login-welcome strong:before { content: ""; position: absolute; z-index: 2; height: 2px; background: #36a3f7; left: 0; width: 24px; top: 40px; }
.login-form ul li { list-style: none; height: 50px; width: 100%; position: relative; background: #f0f5f8; padding: 0 30px 0 55px; border-radius: 30px; box-sizing: border-box; margin-bottom: 30px; }
.login-form ul li i { display: inline-block; height: 20px; width: 20px; position: absolute; left: 24px; top: 50%; margin-top: -10px; }
.login-form ul li i img { width: 100%; }
.login-form ul li input { list-style: none; height: 50px; position: relative; background: none; width: 100%; border: 0; font-size: 18px; box-shadow: inset 0 0 0 1000px #f0f5f8 !important; }

/* checkbox */
.login-rememb .checkboxLabel { cursor: pointer; }
.login-rememb .checkboxInput { display: none }
.login-rememb .checkboxSpan { position: relative; display: inline-block; width: 21px; height: 21px; border: 1px solid #cadce7; vertical-align: top; margin-right: 10px; border-radius: 50%; }
.login-rememb .checkboxInput:checked + .checkboxSpan { background: #36a3f7; border: 1px solid #36a3f7; }
.login-rememb .checkboxInput:checked + .checkboxSpan:after { content: ""; position: absolute; width: 9px; height: 3px; top: 5px; left: 4px; border: 2px solid #fff; border-top-color: transparent; border-right-color: transparent; -ms-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -webkit-transform: rotate(-60deg); transform: rotate(-45deg); }
.login-rememb .checkboxLabel b { display: inline-block; vertical-align: top; font-size: 16px; font-weight: normal; color: #666666; line-height: 21px; }
.login-btn { margin: 45px 0; }
.login-btn button { font-size: 18px; height: 50px; width: 100%; background: #36a3f7; border-radius: 30px; text-align: center; box-shadow: 0 5px 10px rgba(54, 163, 247, 0.4); border: 0; color: #fff; cursor: pointer; }
.login-btn button:hover { background: #2794e8; box-shadow: 0 5px 10px rgba(54, 163, 247, 0.6); }
.login-forgetPassword a { text-decoration: underline; font-size: 16px; color: #36a3f7; }
.login-forgetPassword a:hover { color: #117acb; }
@media screen and (max-height:780px) {
    .login-left-icon { left: 5%; width: 25%; }
    .login-right-icon { bottom: 13%; left: 18%; width: 65%; }
    .login-cont { position: absolute; top: 15%; right: 0; }
    .login-cont-hd { margin-bottom: 50px; }
    .login-welcome { margin-bottom: 55px; }
    .login-form ul li { margin-bottom: 25px; }
    .login-btn { margin: 40px 0; }
}
@media screen and (max-width:480px) {
    .login-left { width: 100%; }
    .login-cont { width: 100%; top: 13%; right: 0;}
    .login-cont-hd { text-align: center; margin-bottom: 30px; }
    .login-cont-hd i { width: 45px; height: 45px; margin-right: 8px; }
    .login-cont-hd h2 { font-size: 24px; margin-top: -2px; }
    .login-welcome { margin: 0 10% 40px; }
    .login-welcome strong { font-size: 18px; line-height: 18px; }
    .login-welcome strong:after { top: 33px; height: 1px; }
    .login-welcome strong:before { top: 33px; height: 1px; }
    .login-form { margin: 0 10% 40px; }
    .login-form ul li { height: 42px; padding: 0 20px 0 45px; }
    .login-form ul li i { height: 18px; width: 18px; left: 15px; }
    .login-form ul li input { height: 42px; font-size: 14px; }
    .login-rememb .checkboxLabel b { font-size: 14px; }
    .login-rememb .checkboxSpan { width: 19px; height: 19px; margin-right: 6px; }
    .login-rememb .checkboxInput:checked + .checkboxSpan:after { width: 7px; height: 3px; top: 4px; }
    .login-btn { margin: 30px 0; }
    .login-forgetPassword a { font-size: 14px; }
    .login-btn button { height: 42px; font-size: 16px; }
    .login-right { width: 80%; }
    .login-right-icon { bottom: 2%; left: 10%; }
}