@charset "UTF-8";
/* ==========================================================================
    loginbg
========================================================================== */
body,html{height:100%; }
.main{background:#e8ebf2; height:100%;}
.main .maintenance{position:absolute;top:120px;width:100%;text-align:center;}
.main .maintenance h1{margin-bottom:10px;font-size:2em}
.login{display:flex; align-items:center; justify-content:center; height:100%; flex-direction: column;}
.login > div + div{margin-top:20px; color:#ccc; font-size:15px; text-align:center; padding:0 10px}

.login .inner_login{max-width:1200px; width:90%; background:#fff; border-radius:15px; display:flex; align-items:center; justify-content:center; overflow:hidden;
	box-shadow:0px 5px 15px rgba(0,0,0,0.3);
	-webkit-box-shadow:0px 5px 15px rgba(0,0,0,0.3);
	-moz-box-shadow:0px 5px 15px rgba(0,0,0,0.3);
	-o-box-shadow:0px 5px 15px rgba(0,0,0,0.3);
	transition:all 0.3s ease-out
}
.login .inner_login .box:first-child{width:50%; padding:40px}
.login .inner_login .box:last-child{width:50%; height:100%; background:url(../images/login_img.jpg) no-repeat center center; background-size:cover;}
.login .inner_login .box:last-child > img{width:100%;}

.login .inner_login .box h1{margin-bottom:50px;}
.login .inner_login .box h2{font-size:30px; font-family:"Myriad Pro"; font-weight:600; margin-bottom:5px;}
.login .inner_login .box h3{margin-bottom:60px;}
.login .inner_login .box form{width:80%; margin:0 auto; text-align:center;}
.inner_login .box .input_group{ display:flex; align-items:center; padding:5px 10px; border:1px solid #d1dce7; border-radius:13px}
.inner_login .box .input_group:focus-within{border-color:#0962ee !important;}
.inner_login .box .input_group > p:first-child{width:40px; flex-shrink:0;}
.inner_login .box .input_group > p > img{width:20px; max-width:100%;}
.inner_login .box .input_group > p input[type="text"],
.inner_login .box .input_group > p input[type="password"]{border:0}
.inner_login .box .input_group > p:last-child{flex:1;}

.inner_login .box .input_btn button{width:100%; height:55px; font-size:18px; font-weight:500; transition:all 0.3s ease-in; color:#fff; background:#ff2c55; border-radius:13px}
.inner_login .box .input_btn button:hover{background:#222}

@media screen and (max-width:1076px){
    .login .inner_login{display:block;}
    .login .inner_login .box h1{text-align:center; margin-bottom:30px;}
	.login .inner_login .box h2{font-size:27px;}
	.login .inner_login .box h3{margin-bottom:30px;}
	.login .inner_login .box h1 img{width:150px; max-width:100%}
    .login .inner_login{max-width:480px;}
	.login .inner_login .box:first-child{width:100%; padding:40px 20px 0 20px}
    .login .inner_login .box:last-child{display:none;}
	.login .inner_login .box form{width:100%;}
}
@media screen and (max-width:414px){
	.login .inner_login .box h2{font-size:21px;}
	.login .inner_login .box h3{margin-bottom:30px; font-size:15px;}
	.login .inner_login .box h1 img{width:130px;}
}
