.l_01_middle { }


#userinfoContainer { flex: 1; flex-direction: column; justify-content: space-evenly; width: 700px; margin: 30px auto 0px; }

.infoItem { }

    .infoItem:before { content: attr(title); width: 50px; text-align: right; font-size: 12px; }

.blk_1 { display: flex; box-sizing: border-box; padding: 10px; border: 1px dashed #ccc; border-radius: 8px; }
    .blk_1 .blk_1_s1 { }
    .blk_1 .blk_1_s2 { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
        .blk_1 .blk_1_s2 .blk_1_s1_s2 { display: flex; justify-content: space-between; align-items: end; }
            .blk_1 .blk_1_s2 .blk_1_s1_s2 .note { color: #ccc; box-sizing: border-box; padding-left: 70px; display: inline-block; }

.headImgContainer { width: 100px; height: 100px; position: relative; overflow: hidden; border-radius: 100%; box-sizing: border-box; border: 1px solid #ccc; }
    .headImgContainer .UserInfoHeadImg { width: 100%; height: 100%; }
    .headImgContainer .btnSelectImg { background-color: rgba(0,0,0,0.7); color: #ccc; position: absolute; bottom: 0; width: 100%; text-align: center; display: inline-block; height: 2.5em; line-height: 2em; cursor: pointer; }

#displayNameContainer { position: relative; width: 100%; display: flex; align-items: center; }

#viptag { position: absolute; top: 0px; left: 0px; width: 26px; height: auto; }

    #viptag svg { fill: var(--PrimaryColor); }

#displayName { margin-left: 20px; flex: 1; height: 2.5em; line-height: 2.5em; border: 1px solid var(--BorderColor); padding: 0 7px; box-sizing: border-box; }

#btnSave { font-size: 14px; width: 6.5em; height: 2.5em; line-height: 2.5em; text-align: center; color: var(--PrimaryColor2); background-color: var(--PrimaryBackColor); cursor: pointer; }


.balanceContainer {display:flex;justify-content:center;align-items:center; }
    .balanceContainer #balance { }
        .balanceContainer #balance:before { content: "余额：￥";padding-left:5px; }
    .balanceContainer #btnRecharge {margin-left:4px; }

#expireTimeContainer { margin-top: 20px; width: 100%; display: flex; align-items: center; }

#expireTime { color: var(--PrimaryColor2); margin: 0 20px; }

#vipSection { flex: 0; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; margin: 20px auto; width: 700px; }

#vipItemContainer { flex: 1; display: flex; justify-content: flex-start; width: 100%; flex-wrap: wrap; }

.vipItem { display: flex; flex-direction: column; justify-content: space-between; align-items: center; border-radius: 8px; background-color: var(--SecondaryColor); width: 184px; height: 191px; padding: 36px 0px 30px; box-sizing: border-box; position: relative; overflow: hidden; cursor: pointer; margin-bottom: 30px; }

    .vipItem:not(:nth-child(3n)) { margin-right: 74px; }

    .vipItem:before { content: "VIP"; position: absolute; top: 0px; left: -62px; width: 171px; height: 2.3em; line-height: 2.5em; transform: rotate(-45deg); background-color: black; text-align: center; color: white; font-size: 16px; }

.vipItemName { font-size: 24px; }

.price { display: flex; align-items: flex-end; position: relative; }

.lmtIcon { width: 25px; height: 25px; position: absolute; top: 7px; left: -30px; animation: sli ease-in-out 3s infinite normal; fill: var(--SecondaryColor2) }

@keyframes sli {
    0% { fill: var(--SecondaryColor2) }
    50% { fill: var(--PrimaryColor) }
    100% { fill: var(--SecondaryColor2) }
}

.vipItemAmount { font-size: 36px; color: var(--PrimaryColor); }

    .vipItemAmount:before { content: "￥"; font-size: 16px; }

.vipOriginalPrice { font-size: 12px; color: var(--SecondaryColor2); text-decoration: line-through; position: absolute; right: -35px; bottom: 6px; }
    .vipOriginalPrice:before { content: "￥"; }

.vipItemDescrip { font-size: 14px; }

.vipItemHightLight { color: var(--PrimaryColor); }

.vipItem[slctd=true] { background-color: var(--PrimaryColor); }

    .vipItem[slctd=true] .vipItemName { color: var(--PrimaryColor3); }

    .vipItem[slctd=true] .vipItemDescrip { color: var(--PrimaryColor3); }

    .vipItem[slctd=true] .vipItemAmount { color: white; }

    .vipItem[slctd=true] .vipItemHightLight { color: white; }


.tryTag { position: absolute; top: 30px; left: -29px; background-color: black; transform: rotate(-45deg); color: var(--PrimaryColor); display: block; width: 150px; height: 22px; line-height: 22px; text-align: center; }
.vipItem[canbuy=false] { cursor: default; }
    .vipItem[canbuy=false] .vipItemAmount { color: #aaa; }
    .vipItem[canbuy=false] .tryTag { color: #aaa; }
    .vipItem[canbuy=false] .vipItemDescrip { display: none; }



#btnPay { border-radius: 8px; background-color: var(--PrimaryColor); width: 6.6em; height: 2.3em; line-height: 2.3em; font-size: 14px; text-align: center; color: white; cursor: pointer; }

#btnInviteCodeShow { cursor: pointer; text-decoration: underline; margin-left: 20px; }

#btnConsume { border-radius: 8px; background-color: var(--PrimaryColor); width: 7em; height: 2.3em; line-height: 2.3em; font-size: 14px; text-align: center; color: white; cursor: pointer; }

#inviteCodeContainer { border: solid 1px #ccc; display: flex; justify-content: space-between; padding: 10px 15px; position: relative; margin-top: 10px; border-radius: 4px; transition: none; }
    #inviteCodeContainer input { display: inline-block; flex: 1; border: 1px solid #eee; padding: 4px 5px; outline: none; }
    #inviteCodeContainer #btnConsume { display: inline-block; margin-left: 20px; }

.btnClose { width: 12px; height: 12px; background: url(../../Imgs/Common/delete2.png) center no-repeat; cursor: pointer; position: absolute; top: 2px; right: 2px; }


.btnPay_Disable { color: black !important; cursor: default !important; background-color: #999999 !important; background-image: url("../../Imgs/Common/BtnLoading.gif"); background-size: contain; background-repeat: no-repeat; background-position: center; }


#effQuata { display: flex; align-items: center; padding-left: 5px; box-sizing: border-box; }


#myDownload { margin-top: 20px; /*text-align: right;*/ color: var(--PrimaryColor); display: flex; align-items: center; }
    #myDownload a { color: var(--PrimaryColor); margin-left: 20px; }

.UserNameContainer { flex: 1; }
.UserName { cursor: pointer; color: var(--PrimaryColor); padding-left: 5px; box-sizing: border-box; display: inline; }
    .UserName:before { content: attr(title)"："; width: 50px; font-size: 12px; color: black; }

#explainContainer { color: var(--SecondaryColor2); align-self: flex-start; }

    #explainContainer:before { content: "说明"; }

.explainItem { display: flex; align-items: center; justify-content: flex-start; }

    .explainItem:before { content: ""; background-color: var(--SecondaryColor2); display: block; width: 6px; height: 6px; border-radius: 100%; margin-right: 10px; }

#explainEffDCPD { color: var(--SecondaryColor2); align-self: flex-start; margin-top: 10px; }
    #explainEffDCPD:before { content: "音效下载额度说明"; }

#explainInviteCode { color: var(--SecondaryColor2); align-self: flex-start; margin-top: 10px; }
    #explainInviteCode:before { content: "邀请码说明"; }
.codeTable { border-collapse: collapse; width: 100%; margin-top: 5px; }
    .codeTable td { border: solid 1px var(--PrimaryColor2); text-align: center; }

#payDomain { display: none; }

.myMusic { display: inline; }

/*-----------------finishInfoForm------Start-----------*/

#frmRecharge { display: flex; flex-direction: column; justify-content: space-between; align-items: center; min-height: 220px; }

    #frmRecharge #rechargeAmount { outline: none; width: 80%; height: 50px; box-sizing: border-box; font-size: 30px; padding: 0px 10px; border: #ccc 1px solid; }

    #frmRecharge #btnRechargeConfirm { width: 10em; height: 3.5em; font-size: 14px; line-height: 3.5em; padding: 0; }




/*-----------------finishInfoForm------End-----------*/