body 
{
    background-image: url(/images/bag.jpg);
}
/*.login_box
{
    position: absolute;
    top: 50%;
    left: 45%;
    margin-left: -190px;
    margin-top: -270px;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    background-color: #fff;
    width: 600px;
    height: 450px;
    box-shadow: 0 2px 10px #999;
    -moz-box-shadow: #999 0 2px 10px;
    -webkit-box-shadow: #999 0 2px 10px;
 }*/
 .login_box {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -300px;
        margin-top: -300px;
        /* border-radius: 8px; 
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px; 
        background-color: #fff;*/
        width: 600px;
        height: 560px;
        /* box-shadow: 0 2px 10px #999; 
        -moz-box-shadow: #999 0 2px 10px;*/
        /* -webkit-box-shadow: #999 0 2px 10px; */
        background-color:transparent;
        overflow: hidden;
}
 
.login_box .qrcode
{
    position: relative;
    text-align: center;        
}
.login_box .qrcode .img
{
   display: block;
   -webkit-border-radius: 4px;
   width: 270px;
   height: 270px;
   /*margin: 42px auto 12px;*/
   margin: 0px auto 12px;
}
 
.login_box .qrcode .qrcode_expired{opacity:.1;}
.login_box .qrcode .refresh_qrcode_mask{position:absolute;left:0;top:0;width:100%;height:270px}
.icon-refresh {
    width: 96px;
    background: url(/images/wx_icons.png) no-repeat;
    background-position: 0 -150px;
    -webkit-background-size: 487px 462px;
    background-size: 487px 462px;
}
.icon-broken-logo, .icon-refresh {
    display: inline-block;
    vertical-align: middle;
    height: 96px;
}
.login_box .qrcode .refresh_qrcode_mask .icon-refresh {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -48px;
    margin-top: -48px;
    cursor: pointer;
}

.rotate
{
    -webkit-animation: spin 1s linear infinite;
    animation:spin 1s linear infinite;    
}

.login_box .avatar
{
    display:none;
    text-align: center; 
}
.login_box .avatar .img
 {
    width: 160px;
    height: 160px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    margin-bottom: 40px;
    border: 1px solid rgba(0,0,0,.1);    
 }
 .login_box .avatar .action {
    display: block;
    margin: 30px auto;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    line-height: 2.55555556;
    border-radius: 6px;
    color: #000;
    width: 220px;
    border: 1px solid rgba(0,0,0,.2);
}

.login_box .authPhone
{
    display:none;
    text-align: center; 
}
.login_box .authPhone .img
 {
    width: 160px;
    height: 160px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    margin-bottom: 40px;
    border: 1px solid rgba(0,0,0,.1);    
 }
 .login_box .authPhone .subAuth {
    display: block;
    margin: 30px auto;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    line-height: 2.55555556;
    border-radius: 6px;
    color: #000;
    width: 220px;
    border: 1px solid rgba(0,0,0,.2);
}
        
.sub_title
{
    text-align: center;
    font-size: 18px;
    margin-bottom: 20px;
}
.sub_desc
{
    text-align: center;
    font-size: 18px;
    color: #888;
}
.refresh_tips
{
    text-align: center;
    font-size: 18px;
}
.topimage
{
    max-width: 100%;
    width: 158px;
    height: 47px;
}
.hrefIcon
{
    width: 60px;
    height: 60px;
    position: absolute;
    right: 5px;
    top:-38px;
}
.login-tip
{
    position: absolute;
    top: 5px;
    right: 58px;
}
.poptip
{
    border: 1px solid #00FFFF;
    height: 16px;
    line-height: 16px;
    padding: 5px 150px 10px 15px;
    background: #E0FFFF;
    position: relative;
    left: -15px;
    top: 5px;
}
.poptip-arrow
{
    top: 8px;
}
.poptip-arrow em
{
    border: solid 1px transparent;
    left: 100%;
    position: absolute;
    border-width: 10px;
    border-left-color: #E0FFFF;
    top: 6px;
}
    
.poptip-content
{
    position: absolute;
    left: 35px;
    top: 10px;
    color: #20B2AA;
    font-size: 14px;
}
.lose
{
    position:absolute;
    top:100px;
    right:260px;
    font-size:18px;
    color:#3c3c3c;
    margin-top:38px;
    margin-bottom:8px;
    text-align:center;
    color:red
           
}
.QRCodeRefresh
{
    border-radius:3px;
    position:absolute;
    top:175px;
    right:240px;
    width:120px;
    height:36px;
    line-height:36px;
    text-align:center;
    background:red;
    display:block;
    color:#fff;
    text-decoration:none;
           
}
.tip_failure
{
    display:none;    
}

@keyframes spin
{
    0%
    {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%
    {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }    
}