@charset "utf-8";
/* CSS Document */
/******** FONTS***********/
@font-face { font-family: MPReg; src: url('../fonts/Myriad Pro/MyriadPro-Regular.otf'); }
@font-face { font-family: MPSemiboldCond; src: url('../fonts/Myriad Pro/MyriadPro-SemiboldCond.otf'); }
@font-face { font-family: MPLightCond; src: url('../fonts/Myriad Pro/MyriadPro-LightCond.otf'); }
@font-face { font-family: MPCond; src: url('../fonts/Myriad Pro/MyriadPro-Cond.otf'); }
@font-face { font-family: MPLightIta; src: url('../fonts/Myriad Pro/MyriadPro-LightIt.otf'); }


html{
	width:100%;
	height:100%;
	background: #4A748C;
}
body{

}

.login-wrap{
	-webkit-box-shadow: 0px 0px 0px 12px rgba(255, 255, 255, 0.09);
	-moz-box-shadow: 0px 0px 0px 12px rgba(255, 255, 255, 0.09);
	box-shadow: 0px 0px 0px 12px rgba(255, 255, 255, 0.09);   
	width: 35%;
	background: rgb(243, 243, 243);
	/* margin: 0% 33%; */
	border-radius: 10px;
	max-width: 448px;
	overflow: hidden;
	/* min-width: 448px; */
	position: absolute;
	top: 31%;
	left: 34%;
	font-family: mpreg;
	font-size: 2vw;
	color: rgb(138, 138, 138);
}
.header-wrap{
    overflow: hidden;
    border-bottom: 1px solid #CACACA;
    width: 90%;
    margin: auto;
    padding-bottom: 1%;
    margin-bottom: 3%;
}
.header-wrap .register{
    font-family: mpreg;
    color: rgb(136, 136, 136);
    float: right;
    margin: 4% 0% 0 0;
    font-size: 1.1vw;
    position: relative;
    z-index: 1;
}
.header-wrap .register a{
    text-decoration: none;
    color: rgb(82, 82, 82);
    margin-left: 5px;
}
.login-wrap .header-wrap .title{
    font-family: mpsemiboldcond;
    font-size: 1.7vw;
    float: left;
    margin: 2% 0% 0 0%;
    width: 40%;
    color: rgb(102, 102, 102);
}
.login-wrap .login{
    float: left;
    margin: 0% 4% 6% 4%;
    width: 92%;
}
.login > .submit{
    width: 25%;
    margin: 4% 39% 0 0;
    float: right;
    cursor: pointer;
    -webkit-box-shadow: 1px 1px 1px 0px rgba(34, 34, 34, 0.75);
    -moz-box-shadow: 1px 1px 1px 0px rgba(34, 34, 34, 0.75);
    box-shadow: 1px 1px 1px 0px rgba(34, 34, 34, 0.75);   
}
.login input{
    width: 70%;
    margin: 0.2% 13%;
    border-radius: 5px;
    border: 1px solid #E4E4E4;
    padding: 2.5% 2%;
    font-family: mpreg;
    font-size: 1.7vw;
    font-style: italic;
    color: rgb(51, 51, 51);
}
#img-captcha{
    width: 35%;
    margin: 1% 0% 0 3%;
}
#digit{
    width: 30%;
    margin: 0.2% 0 0 13%;
    float: left;
}
#msgError{
    margin: 3% 13%;
	color:#753A00;
}

.login-wrap .logo{
    float: left;
    width: 21%;
    margin: -16% 0 -5% -3%;
    -webkit-transform: rotate(-17deg);
    -moz-transform:rotate(-17deg);
    -ms-transform:rotate(-17deg);
    -o-transform:rotate(-17deg);
    transform:rotate(-17deg);
    opacity: 0.8;
}
.powered {
	font-size:0.5em;
	display:block;
	float:right;
    margin: 0 5px 5px 0;
}

.link_system {
	margin-top:20px; 
    margin-right:5px; 
    text-align:right;
}
.powered a , .powered a:hover{
	color:inherit;
	text-decoration:none;
}
@media screen and (min-width:1280px){
	.header-wrap .register{
    font-size: 14px;
	}
	.login-wrap .header-wrap .title{
    font-size: 22px;
}
	.login input{
    font-size: 20px;
}
.submit{}
#img-captcha{}
.login-wrap{
    font-size: 20px;
}
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
	
	.login-wrap{
		-moz-box-shadow: 2px 2px 2px 0px rgba(34, 34, 34, 0.75);  
		width: 50%;
		left: 27%;
	}
	.header-wrap{}
	.header-wrap .register{
    font-size: 1.6vw;
}
	.header-wrap .register a{}
	.login-wrap .header-wrap .title{
    font-size: 2.55vw;
}
	.login-wrap .login{}
	.login > .submit{
    font-size: 1.8vw;
}
	.login input{
    font-size: 2.3vw;
	
}
#img-captcha{}

}
@media screen and (min-width: 480px) and (max-width: 768px) {
	.login-wrap{
    width: 60%;
    left: 20%;
    font-size: 3vw;
    /* text-align: center; */
}
	.header-wrap{}
	.header-wrap .register{
    font-size: 2vw;
}
	.header-wrap .register a{}
	.login-wrap .header-wrap .title{
    font-size: 3vw;
}
	.login-wrap .login{}
	.login > .submit{
    font-size: 2.2vw;
}
	.login input{
    font-size: 2.7vw;
}
#img-captcha{}

}
@media screen and (max-width: 480px) {
	.login-wrap{
    width: 90%;
    left: 5%;
    font-size: 4vw;
    top: 15%;
}
	.header-wrap{}
	.header-wrap .register{
    /* display: none; */
    font-size: 3vw;
    /* float: left; */
    width: 20%;
    margin-top: 6%;
}
	.header-wrap .register a{
    /* display: block; */
}
	.header-wrap .register span{
    display: none;
}
	.login-wrap .header-wrap .title{
    font-size: 6vw;
    width: 80%;
}
	.login-wrap .login{}
	.login > .submit{
    font-size: 4vw;
}
	.login input{
    font-size: 6vw;
}
#img-captcha{}

}