html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
}
*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    font: 12px/1.5 '微软雅黑', tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
    color: #333;
    background-color: #f8f9fc;
}

.clearfix:after {
    clear: both;
    content: '.';
    display: block;
    width: 0;
    height: 0;
    visibility: hidden;
}

.clearfix {
    zoom: 1;
}

.left {
    float: left
}

.right {
    float: right
}
.login-box{
    background-color:#73d5fc;
    padding: 30px 0;
}
.login-box .login-content,
.login-header
{
    width: 90%;
    margin: 0 auto;
}
.login-header{
    padding: 20px 0;
}
.login-content-right{
    background-color:#a2e3fd;
    padding: 20px 30px;
    height: 350px;
}
.login-content-left,
.login-content-right,
.login-input-area,
.login-arc-area
{
    width: 50%;
}
.login-input-area{
    position: relative;
    height: 100%;
}
.login-arc-area{
    height: 100%;
    padding-left: 20px;
    border-left: 1px solid #dedede;
    position:relative;
}
.login-input-area .login-list
{
    width: 100%;
    min-height: 158px;
    position: absolute;
    top: 50%;
    margin-top: -86px;
}
.login-input-area .login-list.add-check-input{
    margin-top: -111px;
}
.login-input-area .login-list li + li{
    margin-top: 15px;
    position: relative
}
.login-input-area .login-list li .close-input-text{
    position: absolute;
    right: 34px;
    top: 4px;
    display: none;
}
.login-input-area .login-list li.check-code-li{display: none}
.login-list .login-input{
    width: 90%;
}
.login-list .login-input,
.login-core-input
{
    display: inline-block;
    padding: 6px 8px;
    border:1px solid #eceeef;
    height: 35px;
}
.login-core-input{
    width: 55%;
}
.login-list .login-input:focus,
.login-core-input:focus{
    box-shadow: rgb(45, 178, 255) 0px 0px 2px;
    border-color: rgb(45, 178, 255);
    outline: none;
}
.login-input-btn{
    display: block;
    width: 90%;
    padding: 6px 8px;
    height: 38px;
    color: #fff;
    background-color: #27aee6;
    border: none;
    cursor: pointer;
    font-size: 14px;
}
.check-date{
    display: inline-block;
    width: 13px;
    height: 13px;
    vertical-align: middle;
    margin-right: 5px;
    cursor: pointer;
}
.login-arc-img{
    width: 160px;
    height: 200px;
    background: url('../img/qtone_qr.png') no-repeat center center;
    background-size: cover;
    margin: auto;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
}
.layout-inner{
    margin-top: 10px;
    margin-bottom: 7px;
    border-bottom: 1px solid #dedede;
    text-align: center
}
.layout-inner h3{
    width: 106px;
    font-size: 14px;
    margin: 0 auto -8px;
    background-color: #a2e3fd;
    font-weight: 400;
    color: #666;
}
.login-arc-icon{
    text-align: center;
    margin-top: 15px;
}
.login-arc-icon .login-arc-link{
    display: inline-block;
    margin: 0 20px;
}
.login-arc-icon .passport-icon{
    display: inline-block;
    width: 55px;
    height: 55px;
    background: url('../img/fouricon.png') no-repeat;
    vertical-align: middle;
    background-size: 298px 120px;
}
.login-arc-icon .qq-icon{
    background-position: 0 -65px;

}
.login-arc-icon .wechat-icon{
    background-position: -162px -65px;
}
.login-arc-icon .qq-icon:hover{
    background-position: 0 0;
}
.login-arc-icon .wechat-icon:hover{
    background-position: -162px 0;
}

.check-code-img{
    float: right;
    vertical-align: top;
    margin-right: 10%;
    cursor: pointer;
}