.out_login {background-color: white;border: 1px solid #d1d1d1;margin-bottom: 10px;}
.out_login .user_info {
    border-bottom:0;
}
.out_login .login {
    display: flex;
    width: 100%;
    height: auto;
    padding: 15px 15px 10px;
    background-color: #fff;
    overflow: hidden;
    justify-content: space-between;
}
.login .login_input {
    width: calc(100% - 120px);
}

.login_input div {
    margin-bottom: 5px
}

.login_input div input {
    font-weight: 400;
    width: 100%;
    height: 38px;
    padding: 0 10px;
    text-align: left;
    border-radius: 4px;
    background: #fbfbfb
}

.login_input div input:focus {
    color: #545454;
    border: 1px solid #b5b5b5
}

.login button {
    font-size: 11px;
    top: 15px;
    right: 15px;
    width: 110px;
    height: 81px;
    padding: 0 10px;
    text-align: center;
    color: #999;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    background: #fbfbfb
}

.login button:hover {
    color: #444;
    border: 1px solid #b5b5b5
}


.button_box {
    display: flex;
    height: 56px;
    text-align: center;
    border-top: 1px solid #d1d1d1;
    border-bottom: 1px solid #d1d1d1;
    background: #f5f5f5;
    justify-content: space-between;
}

.button_box a {
    display: flex;
    width: 33.33%;
    height: 100%;
    letter-spacing: -1px;
    border-left: 1px solid #e1e1e1;
    align-items: center;
    justify-content: center;
}

.button_box a:first-child {
    border-left: none
}

.button_box a span {
    margin-right: 3px;
    vertical-align: middle;
}
.button_box a span:last-child {
}
.join {background-position: -16px -53px;}
.find_account {background-position:-32px -53px;}
.find_password {background-position: -48px -53px;}
.join:hover {background-position: -16px -69px;}
.find_account:hover {background-position:-32px -69px;}
.find_password:hover {background-position: -48px -69px;}

.epcg {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 3px;
}
.epcg.point {background-position:-18px -218px}
.epcg.cash {background-position: -36px -218px;}
.epcg.exp {background-position: 0px -218px;}
.epcg.egg {background-position: -54px -218px;}



.oauth {
    line-height: 56px;
    height: 55px;
    padding: 0 15px;
    text-align: center
}

.oauth .social {
    position: relative;
    top: -2px;
    margin-right: 1px;
    background-position: 0 -175px
}

.oauth a {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 5px;
}

.oauth .split {
    margin: 0 1px 0 0
}

.user_info {}
.user_info .profile {
    position: relative;
    height: 110px;
    padding: 15px 15px 15px 110px;
    background: #fff
}

.user_info .profile .user_photo {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    /* overflow: hidden; */
}
.user_info .profile .user_photo span {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden; 
}
.user_info .profile .user_photo span img {
    width: 100%;
    height: 100%;
    vertical-align: bottom
}
.user_info .profile .info_member {
    margin-top: 15px
}

.user_info .profile .info_level {
    margin-top: 8px
}

.user_info .profile .info_level .exp_bar_bg {
    position: relative;
    height: 10px;
    border: 1px solid #e5e5e5;
    background: #f5f5f5
}

.user_info .profile .info_level .exp_bar {
    position: relative;
    top: -1px;
    left: -1px;
    height: 10px;
    border: 1px solid #7fac49;
    background: #91c653
}

.user_info .profile .info_level .exp_text {
    font-size: 10px;
    position: relative;
    margin-top: 6px;
    padding-left: 3px;
    color: #777
}

.user_info .profile .info_level .exp_text span {
    position: absolute;
    right: 0
}

.user_info .profile .since {
    font-size: 9px;
    position: absolute;
    top: 15px;
    right: 15px;
    color: #999
}

.user_info .etc_box {
    display: flex;
    height: 56px;
    padding: 0 15px;
    border-top: 1px solid #d1d1d1;
    border-bottom: 1px solid #d1d1d1;
    background: #f5f5f5;
    align-items: center;
}

.user_info .etc_box a {
    margin-right: 10px;
    display: flex;
    align-items: center;
}

.user_info .user_button_box {
    display: flex;
    height: 55px;
    background: #fff
}

.user_info .user_button_box .button {
    line-height: 56px;
    display: block;
    width: calc(100% / 5);
    height: 56px;
    letter-spacing: -1px;
    border-left: 1px solid #e5e5e5;
    position: relative;
    float: left;
    text-align: center
}

.user_info .user_button_box .button:first-child {
    border-left: none
}

.user_info .user_button_box .button span.img {
    position: relative;
    top: -1px
}

.user_info .user_button_box .button:hover .in {
    color: #e62626
}

.user_info .user_button_box .button span.red {
    font-size: 10px;
    font-weight: 700
}

.user_info .user_button_box .button em.hbox {
    position: absolute;
    z-index: 101;
    top: -1px;
    left: -1px;
    width: 127px;
    height: 57px;
    border: 1px solid #888;
    border-bottom: 1px solid #fff
}

@media screen and (max-width:1200px) {
.out_login {margin-bottom:0;border: none;border-bottom: 1px solid #d1d1d1;}
.out_login .login {padding:5px}
.login .login_input {width: calc(100% - 65px);}
.login_input div:nth-child(2) {margin-bottom:0;}
.login button {width: 60px;height:80px;padding:0 5px;line-height:80px}
.button_box {height: auto;padding: 15px 0;border-bottom: none;}
.button_box a {font-size: 11px;}
.button_box a span {display: none;margin-right:1px;}
.oauth {display: none}
.user_info .profile {height: 90px;padding: 5px 5px 5px 80px;}
.user_info .profile .since {top: 5px}
.user_info .profile .user_photo {top: 5px;left: 0px;width: 70px;height: 70px;}
.user_info .profile .info_member {margin-top: 5px;}
.user_info .profile .info_level .exp_bar_bg {height:5px}
.user_info .profile .info_level .exp_bar {height: 5px;}
.user_info .profile .info_level .exp_text span {display: inline-block;position:relative;}
.user_info .etc_box {height: auto;padding: 0;flex-wrap: wrap;}
.user_info .etc_box a {display: inline-block;margin: 0;width: 50%;height: 25px;line-height: 25px;padding: 0 10px;}
.user_info .user_button_box {height: 35px;}
.user_info .user_button_box .button {line-height: 35px;height:35px;font-size:11px;}

}