.ucheadwarpper {
    padding-top: 48.6%;
    position: relative;
    background: url(/Images/bg/ucbanner.png) left top no-repeat;
    background-size: 100% 100%;
}

.ucbanner {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 2% 0;
    width: 100%;
    box-sizing: border-box;
}

    .ucbanner .avator {
        float: left;
        text-align: right;
        width: 30%;
    }

    .ucbanner .title {
        float: left;
        padding-left: 7px;
        width: 64%;
        line-height: 0;
        margin-top: 14px;
        box-sizing: border-box;
        position: relative;
    }

        /*.ucbanner .title:before {
            content: "";
            position: absolute;
            right: -2px;
            top: 50%;
            padding: 2px 8px 1px;
            background: #fff;
            border-radius: 100px;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            margin-top: -5px;
        }

        .ucbanner .title:after {
            content: "";
            position: absolute;
            right: -2px;
            top: 50%;
            padding: 2px 8px 1px;
            background: #fff;
            border-radius: 100px;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            margin-top: 5px;
        }*/

        .ucbanner .title div {
            padding: 7% 0;
            height: 0;
        }

            .ucbanner .title div:first-child {
                padding: 4% 0 8%;
            }

        .ucbanner .title #editusername {
            font-size: 115%;
            position: relative;
            display: inline-block;
            padding: 3% 0;
            padding-right: 25px;
        }

            .ucbanner .title #editusername:after {
                content: "设置";
                position: absolute;
                right: 0;
                bottom: 41%;
                font-size: 75%;
                color: #666;
            }

        .ucbanner .title a {
            color: #000;
        }

    .ucbanner.partner .title #editusername:before {
        content: "";
        position: absolute;
        right: -20px;
        top: 50%;
        padding: 9px;
        background: center no-repeat;
        background-size: auto 90%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .ucbanner.partner.p0 .title #editusername:before {
        background-image: url('/Images/icon/l0.png?1');
    }

    .ucbanner.partner.p1 .title #editusername:before {
        background-image: url('/Images/icon/l1.png?1');
    }

    .ucbanner .bubble {
        position: absolute;
        top: 63.5%;
        right: 2%;
        display: inline-block;
        padding: 7%;
        border-radius: 200%;
        background: #fff center 24% no-repeat;
        background-clip: padding-box;
        background-size: auto 39%;
        border: 3px solid rgba(255,255,255,.5);
        transition: all .5s;
    }

        .ucbanner .bubble:after {
            position: absolute;
            font-size: 80%;
            top: 56%;
            left: 50%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            white-space: nowrap;
        }

        .ucbanner .bubble#mycollect {
            right: 54%;
            background-image: url(/Images/icon/collect2.png);
        }

            .ucbanner .bubble#mycollect:after {
                content: "收藏";
                color: #ffa72a;
            }

        .ucbanner .bubble#qrcode {
            top: 46%;
            right: 36%;
            background-image: url(/Images/icon/qrcode.png);
        }

            .ucbanner .bubble#qrcode:after {
                content: "二维码";
                color: #5a9ffb;
            }

        .ucbanner .bubble#mysign {
            right: 18%;
            background-image: url(/Images/icon/sign.png);
        }

            .ucbanner .bubble#mysign:after {
                content: "签到";
                color: #58c544;
            }

            .ucbanner .bubble#mysign.ed:before {
                content: attr(title);
                color: red;
                position: absolute;
                left: 50%;
                top: 50%;
                -webkit-transform: translate(-50%,-50%);
                transform: translate(-50%,-50%);
                transition: all 1s;
                font-size: 90%;
            }

            .ucbanner .bubble#mysign.fade:before {
                top: -5%;
                opacity: 0;
            }

            .ucbanner .bubble#mysign.ed:after {
                content: "已签到";
            }

        .ucbanner .bubble#myscore {
            top: 46%;
            background-color: #977dd6;
            background-image: url(/Images/icon/score.png);
            border-color: rgba(151,125,214,.5);
        }

            .ucbanner .bubble#myscore:after {
                content: "学分";
                color: white;
            }

        .ucbanner .bubble#myrecom {
            opacity: 0;
            display: none;
            background-image: url(/Images/icon/recom.png);
        }

            .ucbanner .bubble#myrecom:after {
                content: "推荐";
                color: #00bb9c;
            }

.partner.p0 .bubble {
    margin-right: 17%;
}

    .partner.p0 .bubble:last-child {
        margin-right: 0;
    }

    .partner.p0 .bubble#myrecom {
        display: inline-block;
    }

#typedes span {
    padding: 0 10px 0 13px;
    font-size: 90%;
    background: left center no-repeat;
}

    #typedes span i {
        font-style: normal;
    }

    #typedes span:first-child {
        background-image: url('/Images/icon/level.png');
        background-size: auto 93%;
    }

    #typedes span:last-child {
        background-image: url('/Images/icon/sno.png');
        background-size: auto 84%;
        padding-left: 15px;
    }

#qrcodewarpper {
    position: absolute;
    left: 50%;
    top: 5%;
    width: 88%;
    min-height: 300px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 100;
    background: #fff;
    text-align: center;
    box-sizing: border-box;
    border-radius: 5px;
    padding: 5%;
}

    #qrcodewarpper .qruserinfo {
        text-align: left;
        padding-bottom: 4%;
    }

        #qrcodewarpper .qruserinfo .b1 {
            float: left;
            padding-left: 2%;
        }

            #qrcodewarpper .qruserinfo .b1 span {
                display: inline-block;
                width: 60px;
                height: 60px;
                padding: 3px;
                background-color: rgba(151,125,214,.8);
                background-clip: padding-box;
                border-radius: 50%;
                position: relative;
            }

                #qrcodewarpper .qruserinfo .b1 span img {
                    width: 100%;
                    border-radius: 50%;
                }

        #qrcodewarpper .qruserinfo .b2 {
            text-indent: 7%;
            padding-top: 5%;
            font-size: 85%;
        }

        #qrcodewarpper .qruserinfo .b3 {
            text-indent: 7%;
            font-size: 85%;
        }

    #qrcodewarpper .qrimg {
        min-height: 200px;
    }

        #qrcodewarpper .qrimg img {
            width: 100%;
        }

    #qrcodewarpper:before {
        content: "加载中,请稍等…";
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -20px 0 0 -60px;
        z-index: -1;
        color: #ccc;
    }

    #qrcodewarpper div:last-child {
        height: 30px;
        line-height: 30px;
        color: #999;
    }

.bar1 {
    overflow-y: auto;
    position: relative;
    padding-top: 31%;
    width: 100%;
    border-bottom: 1px solid #ddd;
}

    .bar1 .item {
        position: absolute;
        height: 100%;
        top: 0;
        left: 0;
        box-sizing: border-box;
    }

#accountinfo {
    width: 66.6%;
    border-right: 1px solid #ddd;
    z-index: 1;
}

    #accountinfo div.b1, #accountinfo div.b2 {
        float: left;
        width: 70%;
        line-height: 0;
        padding: 18% 0 5.5%;
        font-size: 110%;
        text-align: center;
    }

    #accountinfo div.b2 {
        padding: 5.5% 0 18%;
    }

    #accountinfo div.b3 {
        float: right;
        width: 30%;
        position: relative;
    }

        #accountinfo div.b3 a {
            position: absolute;
            top: 50%;
            left: 40%;
            width: 70%;
            -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
            background-color: #977dd6;
            color: white;
            text-align: center;
            line-height: 0;
            padding: 18% 3%;
            border-radius: 3px;
        }

#vipstatus {
    left: 66.6%;
    font-size: 110%;
    text-align: center;
    width: 33.3%;
}

    #vipstatus div.warpper {
        padding: 60% 0 20%;
        background: #fff center 44% no-repeat;
        background-size: auto 29.7%;
        line-height: 0;
        transition: all .2s;
    }

    #vipstatus.sp div.warpper {
        font-size: 90%;
        line-height: 1.4;
        padding: 46% 0 20%;
        background: #fff center 33% no-repeat;
        background-size: auto 21.7%;
    }

    #vipstatus a {
        color: black;
    }


.shortcutwarpper {
    overflow-y: auto;
}

.ucshortcut {
    border: solid #ddd;
    border-width: 0 1px 1px 0;
    background: white;
    float: left;
    width: 33.3%;
    box-sizing: border-box;
    text-align: center;
}



    .ucshortcut:nth-child(3n) {
        border-right-width: 0;
    }

    .ucshortcut a {
        display: inline-block;
        width: 100%;
    }

    .ucshortcut div.warpper {
        padding: 39.5% 0 20%;
        background: center 34% no-repeat;
        background-size: auto 21%;
    }

    .ucshortcut .warpper:after {
        position: absolute;
        font-size: 80%;
        top: 56%;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        white-space: nowrap;
    }

    .ucshortcut a div {
        text-decoration: none;
        color: Black;
    }

#sharebtn {
    padding: 4% 4% 2%;
    text-align: center;
}

    #sharebtn a.btn {
        border-radius: 20px;
        height: 39px;
        line-height: 39px;
    }


.selareahandler {
    background: url('/Images/icon/downarrow.png') no-repeat 90% center;
    background-size: 20px;
    cursor: pointer;
}



#sui .setwarpper .item .warpper {
    padding-left: 8%;
    background: no-repeat left center;
    background-size: 4% auto;
}

    #sui .setwarpper .item .warpper#editusername {
        background-image: url('/Images/set/nickname.png');
    }

    #sui .setwarpper .item .warpper#suilevel {
        background-image: url('/Images/set/level.png');
    }

    #sui .setwarpper .item .warpper#suisno {
        background-image: url('/Images/set/sno.png');
    }

    #sui .setwarpper .item .warpper#suicredit {
        background-image: url('/Images/set/credit.png');
    }

    #sui .setwarpper .item .warpper#suisign {
        background-image: url('/Images/set/sign.png');
    }

    #sui .setwarpper .item .warpper#suisp {
        background-image: url('/Images/set/sp.png');
    }

    #sui .setwarpper .item .warpper#suilocation {
        background-image: url('/Images/set/location.png');
    }

    #sui .setwarpper .item .warpper#suimail {
        background-image: url('/Images/set/mail.png');
    }

.commontitle {
    border-bottom: 1px solid #ccc;
    background-color: white;
    height: 40px;
    line-height: 40px;
    position: relative;
    padding: 0.5% 2%;
    overflow: hidden;
}

    .commontitle div {
        float: left;
        width: 48%;
        margin: 0 1%;
        text-align: center;
    }

        .commontitle div.sel {
            color: #977dd6;
        }

    .commontitle:after {
        content: "";
        position: absolute;
        left: 1%;
        bottom: 0;
        width: 48%;
        height: 2px;
        border-bottom: 2px solid #977dd6;
        transition: left .5s;
    }

    .commontitle.col0:after {
        left: 1%;
    }

    .commontitle.col1:after {
        left: 51%;
    }

.walletb1 {
    padding-top: 30.7%;
    background-color: #977dd6;
}

    .walletb1 .warpper {
        padding: 0 9%;
        color: #fff;
        box-sizing: border-box;
    }

    .walletb1 div.top {
        float: left;
        font-size: 130%;
        line-height: 0;
    }

        .walletb1 div.top div:first-child {
            padding: 50% 0 10%;
        }

        .walletb1 div.top div:last-child {
            padding: 36% 0 10%;
        }


    .walletb1 a {
        position: absolute;
        right: 10%;
        top: 34.5%;
        color: #fff;
        line-height: 0;
        padding: 4.5% 5%;
        border: 1px solid #fff;
        border-radius: 5px;
        display: inline-block;
        white-space: nowrap;
    }

.wallettitle {
    margin-top: 10px;
    border: solid #ccc;
    border-width: 1px 0;
    background-color: white;
    height: 40px;
    line-height: 40px;
    position: relative;
    padding: 0 2%;
}

    .wallettitle div {
        float: left;
        width: 31.3%;
        margin: 0 1%;
        text-align: center;
    }

        .wallettitle div.sel {
            color: #977dd6;
        }

    .wallettitle:after {
        content: "";
        position: absolute;
        left: 4%;
        bottom: 0;
        width: 25.3%;
        height: 2px;
        border-bottom: 2px solid #977dd6;
        transition: left .5s;
    }

    .wallettitle.col0:after {
        left: 4%;
    }

    .wallettitle.col1:after {
        left: 37.3%;
    }

    .wallettitle.col2:after {
        left: 70.6%;
    }


.walletlist {
    background-color: white;
    color: #666;
}

    .walletlist li {
        border-bottom: 1px solid #ccc;
        padding: 10px 4%;
        overflow: auto;
    }

        .walletlist li div:first-child {
            height: 25px;
            line-height: 25px;
            font-size: 110%;
        }

        .walletlist li div:last-child {
            font-size: 90%;
        }

        .walletlist li div span:first-child {
            float: left;
        }

        .walletlist li div span:last-child {
            float: right;
        }

        .walletlist li div:first-child span:last-child {
            color: #ff604e;
        }

.wdb1 {
    background-color: white;
    border: solid #d8d8d8;
    border-width: 1px 0;
}

    .wdb1 div {
        line-height: 0;
        padding: 6.4% 3%;
        font-size: 120%;
        position: relative;
    }

        .wdb1 div:first-child:after {
            content: "";
            position: absolute;
            left: 3%;
            bottom: 0;
            width: 100%;
            border-bottom: 1px solid #ddd;
        }

    .wdb1 .colorpink {
        color: #ff604e;
    }

.wdb2 {
    margin-top: 2.5%;
    background-color: white;
    border: solid #d8d8d8;
    border-width: 1px 0;
}

    .wdb2 .item {
        height: 40px;
        line-height: 40px;
        margin: 0 0 0 3%;
        border-bottom: 1px solid #dadada;
        background-size: 20px;
        padding: 1% 0;
        position: relative;
        white-space: nowrap;
    }

        .wdb2 .item.sp:after {
            content: "";
            position: absolute;
            right: 7%;
            top: 33%;
            padding: 1.5%;
            border: solid #adadad;
            border-width: 0 2px 2px 0;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        .wdb2 .item:last-child {
            border-bottom: none;
        }

        .wdb2 .item input {
            margin-left: 10px;
            border: none;
            width: 200px;
        }

            .wdb2 .item input[type=button] {
                border: 1px solid #d2d2d2;
            }

        .wdb2 .item span.right {
            margin-left: 10px;
        }

        .wdb2 .item input {
            font-size: 100%;
        }

        .wdb2 .item span.left {
            display: inline-block;
            width: 26%;
        }

.wdb3, .wdbaddbank {
    margin-top: 5px;
    padding: 3px 5%;
}

    .wdb3 .btn, .wdbaddbank .btn {
        background-color: #ff604e;
    }

.wdtips {
    margin-top: 2%;
    border: 1px solid #ddd;
    background-color: white;
    line-height: 0;
    color: #666;
}

    .wdtips div.title {
        font-size: 120%;
        position: relative;
        padding: 5.8% 0 7%;
        border-bottom: 1px solid #ddd;
        text-indent: 10%;
    }

        .wdtips div.title:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 3%;
            padding: 2.3%;
            border: 1px solid #666;
            border-radius: 1000%;
            background: url('/Images/icon/i.png') center 10% no-repeat;
            background-size: auto 80%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
        }

    .wdtips div:last-child {
        padding: 4% 3%;
        line-height: 1.5;
    }

        .wdtips div:last-child span {
            font-size: 115%;
        }

#bankwarpper {
    position: absolute;
    width: 300px;
    margin-left: -150px;
    left: 50%;
    top: 10%;
    z-index: 101;
    background-color: white;
    border-radius: 10px;
    display: none;
}

    #bankwarpper .title {
        padding: 7% 0;
        line-height: 0;
        background-color: #977dd6;
        text-align: center;
        font-weight: 700;
        border-bottom: 1px solid #949494;
        color: #fff;
    }

    #bankwarpper .bankbox {
        height: 300px;
        overflow-y: scroll;
    }

        #bankwarpper .bankbox div {
            width: 100%;
            float: left;
            text-align: center;
            height: 50px;
            padding: 1% 0;
            border-bottom: 1px solid #ddd;
        }

            #bankwarpper .bankbox div img {
                height: 100%;
            }

.suiavator {
    padding-top: 29.7%;
    background-color: #977dd6;
}

    .suiavator .warpper {
        box-sizing: border-box;
    }

        .suiavator .warpper span {
            display: inline-block;
            width: 70px;
            height: 70px;
            padding: 4px;
            background-color: rgba(255,255,255,.4);
            background-clip: padding-box;
            border-radius: 50%;
            position: absolute;
            top: 43%;
            left: 50%;
            -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
        }

            .suiavator .warpper span:after {
                content: "";
                position: absolute;
                bottom: 0;
                right: 2px;
                background: url('/Images/icon/camera5.png') no-repeat center;
                background-size: auto 100%;
                padding: 16%;
                border-radius: 100px;
            }

            .suiavator .warpper span img {
                width: 100%;
                border-radius: 50%;
            }

.avatorwarpper {
    display: inline-block;
    width: 74px;
    height: 74px;
    padding: 4px;
    background-color: rgba(255,255,255,.4);
    background-clip: padding-box;
    border-radius: 50%;
    position: relative;
}

    .avatorwarpper img {
        width: 100%;
        border-radius: 50%;
    }

    .avatorwarpper i.level {
        position: absolute;
        bottom: 0;
        right: 2px;
        background: url('/Images/level/l0.png') rgba(255,255,255,.8) no-repeat center 5px;
        background-size: auto 57%;
        padding: 16%;
        border-radius: 100px;
        box-shadow: 0 0 .5px .5px #ccc;
    }

        .avatorwarpper i.level.l1 {
            background-image: url('/Images/level/l1.png');
        }

        .avatorwarpper i.level.l2 {
            background-image: url('/Images/level/l2.png');
        }

        .avatorwarpper i.level.l3 {
            background-image: url('/Images/level/l3.png');
        }

        .avatorwarpper i.level.l4 {
            background-image: url('/Images/level/l4.png');
        }


.ulevel {
    padding-top: 50.7%;
    background-color: #977dd6;
}

    .ulevel .b1 {
        padding-top: 2%;
        text-align: center;
    }

        .ulevel .b1 .avatorwarpper {
            width: 64px;
            height: 64px;
        }

    .ulevel .b2 {
        text-align: center;
        color: #fff;
        font-size: 95%;
        padding: 4.2% 0 2%;
        line-height: 0;
    }

    .ulevel .b3 {
        padding: 1% 5% 0;
        color: #fff;
        overflow-y: auto;
        position: relative;
    }

        .ulevel .b3:before {
            content: "";
            position: absolute;
            left: 19%;
            top: 34%;
            width: 62%;
            border-top: 1px solid #fff;
        }

        .ulevel .b3 span {
            display: inline-block;
            width: 25%;
            float: left;
            text-align: center;
            font-size: 88%;
            position: relative;
            padding-top: 12%;
            line-height: 0;
        }

            .ulevel .b3 span em {
                font-style: normal;
                padding: 9% 0;
                display: block;
            }

            .ulevel .b3 span:after {
                content: "";
                position: absolute;
                left: 50%;
                top: 30%;
                padding: 13%;
                border-radius: 100%;
                background: rgba(255,255,255,1) center no-repeat;
                -webkit-transform: translate(-50%,-50%);
                transform: translate(-50%,-50%);
                background-size: auto 57%;
                border: 1px solid #977dd6;
                box-shadow: 0 0 5px rgba(255,255,255,.9);
            }

            .ulevel .b3 span:first-child:after {
                background-image: url('/Images/level/l1.png?1');
            }

            .ulevel .b3 span:nth-child(4n+2):after {
                background-image: url('/Images/level/l2.png?1');
            }

            .ulevel .b3 span:nth-child(4n+3):after {
                background-image: url('/Images/level/l3.png?1');
            }

            .ulevel .b3 span:nth-child(4n+4):after {
                background-image: url('/Images/level/l4.png?1');
            }

        .ulevel .b3 i {
            position: absolute;
            top: 28%;
            left: 20%;
            display: inline-block;
            padding: 1%;
            background-color: white;
            border-radius: 1000%;
            box-shadow: 0 0 3px #fff;
            border: 1px solid #977dd6;
            transition: left 1s;
            background-clip: padding-box;
        }

.ulevel2 {
    background-color: #fff;
    color: #666;
    border-bottom: 1px solid #ddd;
}

    .ulevel2 .b1 {
        line-height: 0;
        padding: 6.3% 0;
        border-bottom: 1px solid #ddd;
        font-size: 115%;
        text-indent: 10%;
        background: url('/Images/icon/credit.png') 3.5% center no-repeat;
        background-size: auto 41%;
    }

    .ulevel2 .b2 {
        padding: 3% 4% 5%;
        line-height: 1.8;
    }