@charset "utf-8";
/* CSS Document */
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(10, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.div1 { grid-area: 1 / 1 / 11 / 9; }
.div2 { grid-area: 1 / 9 / 11 / 13;}
.div3 { grid-area: 2 / 2 / 4 / 6; }
.div4 { grid-area: 5 / 1 / 7 / 9; line-height:30px;font-family : fantasy; text-align: center;font-style:italic;font-size: 60px;color: #eaeaea;}
.div5 { grid-area: 3 / 9 / 9 / 13; }

.bqBody{ width: 100vw; height: 100vh; background:url("../img/longintest3.png") no-repeat center center; background-size: cover; margin: 0px; padding: 0px; }
.bqMain{ width: 100%; height: 100vh; display: flex; justify-content: flex-end; align-items: center;}

.bqLogon{ padding-right: 10%;}
.bqLogonTop{ font-size: 32px;}
.bqLogonTop .wpd{ padding-bottom: 30px;}
.bqLogo{ line-height: 1; margin-bottom: 0.5em;}
.bqLogo img{ height: 4em; margin: 1em auto; display: block;}
.bqTitA{ text-align: center; color: #fff;}
.bqTitA h1{ font-size: 1em; line-height: 1.2; margin: 0px;}
.bqTitA em{ display: block; font-size: 0.48em; font-style: normal;}

.bqLogonBottom{ display: flex; justify-content: center; align-items: flex-start;}
.bqForm{ width:366px; margin: 0 auto; background: #fff; box-sizing: border-box; background: #fff; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.5); padding:30px;}
.bqForm dl{ margin:0 0 20px 0; padding: 0px; list-style: none; display: block; position: relative;}
.bqForm dt{margin: 0px; position: absolute; left: 0px; top: 0px; bottom: 0px; width: 40px; text-align: center; z-index: 2; line-height: 40px; font-size: 18px; color: #333;}
.bqForm dd{margin: 0px;}
.bqForm .pd{ display: block; position: relative;}
.bqForm input{transition: 0.3s all;}
.bqForm input:focus{ box-shadow:0 0 5px rgba(0,155,255,1); border-color:#009bff; outline:none;}
.ipt_t1{ height:40px; box-sizing: border-box; border: 1px  solid #eaeaea; width: 100%; padding: 0 15px 0 40px; border-radius: 6px !important; display: block;-webkit-appearance:none !important;}
.ipt_yzm{ position: absolute; right: 0px; top: 1px; cursor: pointer; height: 38px; width: auto;}
.ipt_yzm img{ height: 100%;width: auto;}
.ipt_b1{ display: block; text-align: center; width: 100%; background:#0a4298; background-size: 100% 100%; height: 40px; border: none; color: #fff;  font-weight: bold; letter-spacing: 0.5em; border-radius: 6px; transition: 0.3s all; box-shadow:2px 5px 15px rgba(10,66,152,0.5); cursor: pointer;}
.ipt_b1:hover{ transform: translateY(-3px); box-shadow: 0px 0px 5px rgba(10,66,152,0.5);}

.profile-img-card {width: 100px;height: 100px;display: block;-moz-border-radius: 50%;-webkit-border-radius: 50%;border-radius: 50%;margin: -93px auto 30px;border: 5px solid #fff;}
.profile-name-card {text-align: center;}
.login-head {background: #899fe1;}
.login-form {padding: 30px 20px;position: absolute;top: 28.5%;left: 30%;width: 40%;z-index: 99;border-radius: 30px;}
#login-form {opacity: 1;}
#login-form .input-group {margin-bottom: 15px;}
#login-form .form-control {font-size: 13px;}
.input-group-addon-yzm{padding:0;border:none;cursor:pointer;}
.btn-success{ background:#708eea;}
.bqBtnA{ text-align: right;}
.bqBtnA a{ color: #000;}
.bqBtnA a:hover{ text-decoration: underline;}
@media screen and (max-width:768px){
	.bqLogonTop{ font-size: 24px;}
	.bqBody{ background-position: right center;}
	.bqMain{    justify-content: center;}
	.bqLogon{ padding-right: 0px;}
}