.popup-w521-content{width:520px;padding:0!important;height: 80%!important;max-height:750px;border: none !important;}
.subscribe-popup{height:100%;background:rgba(255,255,255,1);padding-top: 24px;padding-bottom: 24px;}

.note{display: none; flex-direction: column; position: absolute;width: 284px;height: 240px; right: 0px;top: 50px;box-shadow:0px 9px 28px 8px rgba(0,0,0,0.05),0px 6px 16px 0px rgba(0,0,0,0.08),0px 3px 6px -4px rgba(0,0,0,0.12);background-color: #FFF;}
.note-title{border-bottom: 1px solid rgba(0,0,0,0.06);padding: 12px;height: 38px; font-size:14px;font-weight:500;line-height:22px;}
.note-content{height: 202px; padding: 12px;font-size:12px;font-weight:400;line-height:17px;overflow: scroll;white-space: pre-wrap;}
.subscribe-popup-title{display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-bottom: 24px;padding-left: 24px;padding-right: 24px;}
.subscribe-popup-title-left{font-size: 18px;}
.subscribe-popup-userinfo{height: 50px;display: flex;flex-direction: row;align-items: center;justify-content: space-between;position: relative;padding-left: 24px;padding-right: 24px;}
.subscribe-popup-left{height: 100%;display: flex;flex-direction: row;}
.subscribe-popup-avatar-head{border-radius:50%;color:#fff;text-align:center;font-size:20px;height:50px;width:50px;min-width:50px;line-height:50px;cursor: pointer;object-fit: cover;margin:0px}
.subscribe-popup-name{display: flex;flex-direction: column;height: 100%;justify-content: space-around;padding-top: 3px;margin-left: 6px;}
.subscribe-popup-intro{color: #999999;display: flex;flex-direction: row;align-items: center;}
.subscribe-popup-intro:hover +.note{display: flex;}
.subscribe-popup-askicon{height: 14px;width: 14px;border-radius: 50%;border: 1px solid #999999; color:#999999;display: flex;justify-content: center;align-items: center;line-height: 15px;font-size: 10px;margin-left: 3px;}
.subscribe-popup-membertype{height: 178px;display: flex;flex-direction: row;justify-content: space-between;padding-top: 40px;background-color: rgba(250,251,252,1);padding-left: 24px;padding-right: 24px;}
.subscribe-popup-membertypeitem{width:146px;height:138px;border-radius:4px;border:2px solid rgba(0,0,0,0.1);display: flex;flex-direction: column;align-items: center;justify-content: space-between;padding-top:35px ;}
.subscribe-popup-membertypeitem-active{width:146px;height:138px;border-radius:4px;border:2px solid var(--brandColor);display: flex;flex-direction: column;align-items: center;justify-content: space-between;padding-top:35px ;background:var(--brandColorOpacity);}
.subscribe-popup-membertext{ font-size: 16px;color: #5D5D5D;text-align: center;}
.subscribe-popup-price{height: 20px;font-size: 18px;display: flex;flex-direction: row;justify-content: center;align-items: flex-end;margin-top: 8px;}
.subscribe-popup-pricenum{font-weight:500;font-size: 25px;margin-right: 10px;}
.subscribe-popup-auto{display: flex;flex-direction: row;justify-content: space-between;padding-top: 17px;padding-bottom: 24px;font-size: 14px;background-color: rgba(250,251,252,1);padding-left: 24px;padding-right: 24px;}
.subscribe-popup-check{border: 1px; zoom:120%;}
.subscribe-popup-discount{color:var(--brandColor);margin-left: 5px;font-size: 12px;margin-bottom: 6px;}
.subscribe-popup-tip{height: 205px;}
.subscribe-popup-notestitle{font-size: 14px;margin-bottom: 6px;font-weight: 500;padding-left: 24px;padding-right: 24px;margin-top: 16px;}
.subscribe-popup-notes{font-size: 12px;line-height:17px;margin: 0;padding-left: 24px;padding-right: 24px;}
.subscribe-popup-bottom{padding-left: 40px;padding-right: 40px;display: flex;flex-direction: row;justify-content: flex-end;margin-top: 20px;}
.subscribe-popup-gosubscribe{color: white;width:120px;height:40px;background:var(--brandColor);border-radius:2px;display: flex;justify-content: center;align-items: center;cursor: pointer;}
.subscribe-popup-gosubscribe:hover{background:var(--color-brand-2)}

.auto-renew-checkbox{height: 13px;width: 13px;border: 1px solid var(--brandColor);color: var(--brandColor);}


/* update */
.subscribe-popup *{box-sizing: border-box;}
.subscribe-popup{width:100%;background:var(--color-card-2) !important;padding-top: 0 !important;padding-bottom: 55px !important;border-radius: 16px;}
.subscribe-popup-scroll{width: 100%;height: calc(100% - 98px); scrollbar-width: none;overflow: scroll;padding: 0 16px;margin-bottom: 8px;padding-right: 11px;}
.subscribe-popup-scroll::-webkit-scrollbar {
    width: 5px !important;
    height: 0px;
}
.subscribe-popup-scroll::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
        background:var(--color-divider-1);
    }

.note{display: none; flex-direction: column; position: absolute;width: 284px;height: 240px; right: 0px;top: 50px;background-color: white;box-shadow:0px 9px 28px 8px rgba(0,0,0,0.05),0px 6px 16px 0px rgba(0,0,0,0.08),0px 3px 6px -4px rgba(0,0,0,0.12);}
.note-title{border-bottom: 1px solid rgba(0,0,0,0.06);padding: 12px;height: 38px; font-size:14px;font-weight:500;color:rgba(0,0,0,0.85);line-height:22px;}
.note-content{height: 202px; padding: 12px;font-size:12px;font-weight:400;color:rgba(51,51,51,1);line-height:17px;overflow: scroll;white-space: pre-wrap;}
.subscribe-popup-title{display: flex;flex-direction: row;justify-content: space-between;align-items: center;padding: 24px 40px;padding-right: 24px;margin-bottom: 10px;}
.subscribe-popup-title svg{width: 16px;height: 16px;fill: var(--color-text-4);cursor: pointer;}
.subscribe-popup-title > span:last-child{font-size: 20px;}
.subscribe-popup-title-left{font-size: 18px;font-weight: bold;}
.subscribe-popup-userinfo{height: auto !important;width: 100%; display: flex;flex-direction: row;align-items: center;justify-content: space-between;position: relative;padding-left: 24px;padding-right: 24px;}
.subscribe-popup-left{height: auto !important;display: flex;flex-direction: row;}
.subscribe-popup-left .avatar-head{margin:0px}
.subscribe-popup-left .subscribe-popup-name{padding-top: 0px;margin-left: 16px;height: auto !important;}
.subscribe-popup-name .nickname{font-weight: 600;font-size: 16px;color:var(--color-text-1);display: flex;align-items: center;}
.subscribe-popup-name .nickname .vip-icon{margin-left: 4px;}
.subscribe-popup-intro{color: #999999;display: flex;flex-direction: row;align-items: center;}
.subscribe-popup-intro:hover +.note{display: flex;}
.subscribe-popup-askicon{height: 14px;width: 14px;border-radius: 50%;border: 1px solid #999999; color:#999999;display: flex;justify-content: center;align-items: center;line-height: 15px;font-size: 10px;margin-left: 3px;}
.subscribe-popup-membertype{height: auto !important;width: 100%;background-color: transparent !important;padding-bottom: 16px;}
.subscribe-popup-membertypeitem{width:148px;height:148px;border-radius:8px !important;border:2px solid var(--color-divider-2) !important;display: flex;flex-direction: column;align-items: center;justify-content: space-between;padding-top:28px !important;padding-bottom: 20px !important;background: var(--color-card-2);}
.subscribe-popup-membertypeitem-active{width:148px;height:148px;border-radius:8px !important;border:1px solid var(--color-funct-4) !important;display: flex;flex-direction: column;align-items: center;justify-content: space-between;padding-top:28px !important;padding-bottom: 20px !important;background: var(--color-cmpt-3) !important;}
div.subscribe-popup-membertext{ font-size: 14px;color: var(--color-text-1);text-align: center;height: 40px;line-height:100%}
.subscribe-popup-price{height: 20px;font-size: 18px;color:#333;display: flex;flex-direction: row;justify-content: center;align-items: center !important;margin-top: 8px;margin-bottom:5px}
.subscribe-popup-pricenum{font-weight:600 !important;font-size: 32px !important;margin-right: 10px;color: var(--color-funct-3)}
.subscribe-popup-currency{font-weight:600;font-size: 32px;color: var(--color-funct-3)}
.subscribe-popup-membertype .discount{font-size: 14px;margin-top: 16px;color: var(--color-text-3) !important;}
.subscribe-popup-auto{width: 100%;display: flex;flex-direction: row;justify-content: flex-start !important;align-items: center; padding-top: 8px !important;font-size: 14px;background-color: transparent !important;padding-left: 24px;padding-right: 24px;padding-bottom: 0px !important;align-items: center;color: var(--color-text-1);}
.subscribe-popup-auto div{margin-top: 2px;}
.subscribe-popup-auto input{margin-right:8px;}
.subscribe-popup-auto input[type=checkbox]{visibility: hidden;}
.subscribe-popup-auto input[type=checkbox]{cursor: pointer; position: relative;width: 16px;height: 16px;font-size: 12px;}
.subscribe-popup-auto input[type=checkbox]::after{ position: absolute; top: 0;border: 2px solid #c5c5c5;box-sizing: border-box;color: #fff; width: 17px; height: 17px; display: inline-block; visibility: visible; padding-left: 0px; text-align: center; content: ' '; border-radius: 3px;}
.subscribe-popup-auto  input[type=checkbox]:checked::after{ background-color: var(--brandColor); content: "✓"; font-size: 12px; /* transform: scale(.8); */ line-height: 19px; font-weight: bold;border: none;}
.subscribe-popup-check{color: #c5c5c5 !important;}
.subscribe-popup-discount{margin-left: 8px !important;font-size: 12px;margin-bottom: 0px !important;padding: 1px 8px;
    font-weight: 500;
    color: var(--color-funct-4) !important;
    line-height: 18px;
    background: rgba(255, 134, 13, 0.08);
}
.subscribe-popup-tip-container{background: var(--color-card-3) !important;padding: 24px;border-radius: 8px;margin: 0 24px;}
.subscribe-popup-tip{height: auto !important;}
.subscribe-popup-tip p{
    white-space: break-spaces;
    font-weight: 500;
    color: var(--color-text-2) !important;
    line-height: 21px !important;
}
.subscribe-popup-notestitle, .subscribe-popup-notes{padding-left: 0px!important;padding-right: 0px!important;}
.subscribe-popup-notestitle{font-size: 16px!important;font-weight: 600!important;margin-bottom: 8px !important;margin-top: 0 !important;color: var(--color-text-1);}
.subscribe-popup-notes{font-size: 14px!important;line-height:22px!important;margin: 0!important;padding-left: 24px;padding-right: 24px;}
.subscribe-popup-bottom{width: 100%;padding-left: 40px;padding-right: 40px;display: flex;flex-direction: row;justify-content: flex-end;margin-top: 18px !important;}
.subscribe-popup-gosubscribe{color: #FFF !important;width: unset !important;padding: 0 8px;min-width:120px;height:40px;background: var(--brandColor) !important;border-radius: 4px !important;display: flex;justify-content: center;align-items: center;font-size: 16px;font-weight: 500;}

.subscribe-popup-avatar-head {
    width: 48px !important;
    height: 48px !important;
    line-height: 48px !important;
    min-width: 48px !important;
}
.subscribe-popup-avatar-head>span {font-size:14px !important;}
.flex .subscribe-popup-special:nth-child(1) {
    padding: 3px 7px;
    margin-right: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-funct-4);
    line-height: 12px;
    background: rgba(255, 134, 13, 0.08);
    border-radius: 2px;
}

.flex .subscribe-popup-special:nth-child(2) {
    padding: 3px 7px;
    margin-right: 8px;
    font-size: 12px;
    font-weight: 500;
    line-height: 12px;
    border-radius: 2px;
    color: var(--color-funct-2);
    background: rgba(17, 173, 122, 0.08);
}

.subscribe-popup-introduction {
    padding: 24px;
    border-radius: 8px;
}
.subscribe-popup-introduction > div:first-child {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-1);
    line-height: 25px;
    margin-bottom: 8px;
}
.subscribe-popup-plain {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-2) !important;
    line-height: 22px;
    white-space: pre-line;
    word-break: break-word;
}
.subscribe-popup-plain-fold {
    font-size: 14px;
    
    font-weight: 500;
    color: var(--brandColor);
    line-height: 22px;
    cursor: pointer;
}