#wrapper{position: relative;margin:0}
.btn-blue{height:40px;line-height:40px;padding:0;border:none;background-color: #66b7ff;color: #fff !important;}
.btn-blue:hover{background-color: #4DAAFF;}
.btn-blue:active{background-color: #339DFF;}
.whz-register-box{height: auto;margin:20px auto 30px;padding:20px 0;background:#fff;border-radius:5px;text-align: center;}
.whz-register-box h1{margin:45px 0 0;font-size: 20px;color: #666666;}  
.whz-register-box .mod-body{width: 500px;margin:0 auto;padding: 40px;} 
.whz-register-box ul li{position:relative;line-height:30px;margin-bottom: 20px; overflow: hidden;}
.whz-register-box ul li input[type="text"], .whz-register-box ul li input[type="password"]{float:left;width:300px;height: 40px;line-height: 28px\0;padding-left:15px !important;box-shadow: none;border-color: #e6e6e6;}
.whz-register-box ul li label { width:120px;text-align: right;padding-right:10px;}
.whz-register-box ul li.last{text-align: left;color:#666;}
.whz-register-box ul li.last input{vertical-align: -2px\0;}
.whz-register-box ul li.alert-danger i{margin-right: 5px;}
.whz-register-box ul li hr{margin:30px 0;}
.whz-register-box ul .whz-register-verify input{width: 150px !important;}
.whz-register-box ul .whz-register-verify img{cursor: pointer;}
.whz-register-box .more-information ul li{padding:5px 0;text-align: left;}
.whz-register-box .more-information .select_area{max-width: 120px;} 

.whz-regiter-agreement{position:relative;width:712px;margin:10px 0 0 -201px;padding: 20px;background:#f5f5f5;}
.whz-register-agreement-txt{max-height: 200px;overflow-x:hidden;overflow-y:auto;}
.whz-register-box li span{/*position:absolute*/;top:0;right:-145px;width: 130px;padding:5px;font-size:12px;border-radius: 5px;overflow: hidden;text-align: left;}
.whz-reg-tips{line-height:15px;background: #EEF7FD;border: 1px solid #CFDDE6;color:#999;}
.whz-reg-err{line-height: 28px;background: #FFEAEA;border:1px solid #E5C3C4;color:#CC0000;}
.whz-reg-right{background: none;border: none;}
.whz-register-open-box{padding-top:30px;}
.whz-register-open-box p{width: 240px;text-align: left;margin: 0 auto 10px;}
.whz-register-open-box ul{padding-top:0px;}
.whz-register-open-tabs i{margin-left:5px;}
.whz-register-open-tabs.active .i-triangle-down{background-position: -210px -110px;}
.whz-find-pwd{padding-bottom: 0;}
.whz-find-pwd .mod-body{margin: 30px auto 100px;}
.whz-find-pwd .mod-footer{height: 70px;line-height: 70px;background-color: #f5f5f5;border-radius: 0 0 3px 3px;}
.whz-register-box ul li.error p {background: none repeat scroll 0 0 #FFF480;border: 1px solid #EBEBEB;border-radius: 5px 5px 5px 5px;color: #666666;height: 40px;line-height: 40px;padding-left: 12px;text-align: left;}
.whz-register-box ul li.error p .i-no{margin-right: 10px;position: relative;top:4px;}
@media (max-width:640px){
	.whz-register-box .mod-body{width:100%;padding:10px;}
	.whz-register-box, .whz-register-box ul li{width: auto;}
}
@media (max-width:321px){
	/*.whz-register-box{width: 270px !important;}*/   
	.whz-regiter-agreement{width: 240px;margin:10px 0 0;}
}
a { color:#4DAAFF}
.whz-register-box .self_content {
	display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex; 
    flex-direction: row;
    -webkit-justify-content:space-around;
    justify-content:space-around;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center; 
}

.loginWrapper{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin:  5% auto 0 auto;
    flex-direction: row;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;  
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center; 
    justify-content: center;
    width:  50%;
    /*max-width: 600px;*/   
    height: 720px;      
    font-size: 14px; 
    color: #909090;
}

.banWrapper{
    flex:  0 0 50%;
    width: 50%;
    height:100%;          
}
.banContent{
    height: 100%;   
}
.banContent a{display: block; width: 100%; height: 100%;}  
.banContent a img{
    object-fit: cover;
    width: 100%;
    height: 100%;    
}
.loginMain{
    flex: 1;
    width: 100%;
    height: 100%;
    background-color: #fff; 
}
.loginWidth{
   display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-content: space-around;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-around;
    -ms-flex-pack: justify;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center; 
    align-items: center;
    height: 100%;  
}
.loginLogoDiv{ margin: 0 auto;}
.loginLogo{
    display: block;
    width: 200px; 
    height: 100px;   
    /*background: url('./resource/images/loginlogo.png') no-repeat;  */
/*  background:url('{$logo}') no-repeat; */

}  
.remember {
    display: flex;
    flex-direction: row; 
    justify-content: space-between;
    align-items: center; 
}     
.formLogin{width: 310px; padding-top: 40px; margin: 0 auto;}
.loginList{position: relative; height: 38px; line-height: 38px; width: 260px; padding: 2px 18px 2px 32px; margin-bottom: 16px; border-bottom: 1px solid #e7e7e7;}
.loginList .loginText{height: 30px; line-height: 15px; padding: 7px 0; width: 100%;color: #606060; border: 0 none;-webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none;}
.loginList label{position: absolute;left: 2px; top: 8px; width: 10%; height: 24px;} 

 
.loginListCode {
    display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box; /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox; /* 混合版本语法: IE 10 */
    display: -webkit-flex; /* 新版本语法: Chrome 21+ */
    display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -moz-align-items: center;
    -webkit-align-items: center;  
    align-items: center; 
}
.loginListGetby {
    margin-bottom: 14px;    
}
.loginListWant  {
    height: 80px;
    line-height: 10px; 
}

.loginListWant .check_box { 
    display: none; 
} 
 
.loginListWant .check_box + label {
    height:15px;    
    background-color: #FFF; 
    border: 1px solid #C1CACA; 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05); 
    padding:6px; 
    border-radius: 3px; 
    display: inline-block; 
    position: relative; 
    margin-right: 10px;  
} 
.loginListWant .check_box + label:active { 
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); 
} 
 
.loginListWant .check_box:checked + label { 
    background-color: #ECF2F7; 
    border: 1px solid #92A1AC; 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1); 
    color: #243441; 
} 
 
.loginListWant .check_box:checked + label:after { 
    content: '\2714';
    position: absolute; 
    top: 0px; 
    left: 0px; 
    color: #758794; 
    width: 100%; 
    text-align: center; 
    font-size: 1em;  
    vertical-align: text-top; 
} 
.loginListWant .self_content {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    padding: 0;   
}
.loginListWant .self_content > div {
    flex: 0 0 50%;
    width: 50%; 
}
.loginListTel label{background: url(../images/telicon.png) 2px 0 no-repeat;}
.loginListKey label{background: url(../images/keyicon.png) 0 0 no-repeat;}
.errorTips{display: none; font-size: 12px; color: #fe514a; height: 20px; line-height: 20px; position: absolute; left: 310px; top: 10px; min-width: 100px;white-space:nowrap;}
.errorTips i,.sysError i{padding: 0 9px; line-height: 20px; height: 20px; display: inline-block; vertical-align: middle; background: url(../../public/images/loginIcon.png) -32px -35px no-repeat;}
.errorTips em,.sysError em{font-style: normal; line-height: 20px; height: 20px; display: inline-block; vertical-align: middle; white-space:nowrap; }
p.loginList{text-align: right; width: 100px; padding: 0; font-size: 13px; margin-bottom:0; height: 16px; line-height: 16px; border: 0 none;}
p.loginList a{color: #03c5ff;}
.loginBtn{width: 100%; height: 46px; line-height: 46px;text-align: center; margin-top: 20px;  border-radius: 2px; color: #fff; border: 0 none; letter-spacing:4px; font-size:16px;background-color: #e4572e;} 
.loginBtn:hover{background: #04bff7;}
.have{height: 20px; line-height: 20px; padding-top: 16px;}
.have i{height: 20px; padding: 0 10px;background: url(../../public/images/loginIcon.png) -52px -37px no-repeat;}
.have a{color: #03c5ff;}
.loginListCode img{position: absolute; right: 30px; top:-1px; height: 42px; border: 0; background: #f7f7f7; border-top-right-radius: 2px; border-bottom-right-radius: 2px; color: #909090;}
.loginListCode .getImg{position: absolute; right: 5px; top: 8px; width: 19px; height: 21px; background: url(../images/loginIcon.png) -2px -33px no-repeat;}

.sysError{color:#fe514a;font-size: 12px;height: 20px; line-height: 20px; position: relative; top:-5px;}  
.sysError a{color: #03c5ff;} 
.iphone {
    display: none;
}
#readdetail {width:500px;height:800px;left:0;right:0;top:0;margin:auto;background:white;position:absolute;border-radius:1em;}
.desc_container {left:20px;right:20px;top:62px;bottom:62px;position:absolute;overflow:auto;}
@media only screen and (max-width: 480px) {
    body {
        background-image: none; 
    }
    .loginWrapper {
        display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
        display: -moz-box; /* 老版本语法: Firefox (buggy) */
        display: -ms-flexbox; /* 混合版本语法: IE 10 */
        display: -webkit-flex; /* 新版本语法: Chrome 21+ */
        display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
        margin: 0;
        -webkit-box-direction: normal;
        -webkit-box-orient: vertical;
        -moz-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;

        -webkit-box-pack: space-between;
        -moz-justify-content: space-between;
        -webkit-justify-content: space-between;
        justify-content: space-between;

        -webkit-box-align: center;
        -moz-align-items: center;
        -webkit-align-items: center;
        align-items: center; 
        width: 100%;
    }
    .loginWrapper > div {  
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        min-height: 700px;       
    }
    .loginWrapper > div:last-child {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        min-height: 60px; 
    } 
    .banWrapper {
        display: none;    
    }
    .whz-footer-wrap {
        display: none;  
    }
    .iphone {
        display: none;
        flex: 0 0 100%;
        width: 100%; 
    }
    .self_desc {
        flex: 0 0; 
    }
    .banContent a img {
        object-fit: contain;              
    }
    .loginList .loginText {
        height: 30px;
        line-height: 15px;
        padding: 7px 0;
        width: 200px;
        color: #606060;
        border: 0 none;
        -webkit-appearance: none;
        -moz-appearance: none;
        -o-appearance: none;
        appearance: none; 
    }
    .loginListCode .loginText {
        width: 100px; 
    }
    #readdetail{ 
        width: 100%;  
    }
    .desc_container {
        top: 95px;
    }
}

@media only screen and (min-width:481px) and (max-width:1366px){
    .loginWrapper{
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        margin:  10% auto;
        flex-direction: row;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;  
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center; 
        justify-content: center;
        width:  80%; 
        /*max-width: 600px;*/   
        height: 720px;      
        font-size: 14px;      
        color: #909090;
    }
}

@media only screen and (min-width:1367px)and (max-width:1600px){            
    .loginWrapper{
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        margin:  10% auto;
        flex-direction: row;
        -webkit-box-pack: justify;  
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;  
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center; 
        justify-content: center;
        width:  65%;  
        /*max-width: 600px;*/   
        height: 720px;        
        font-size: 14px;  
        color: #909090;
    } 
}