@CHARSET "UTF-8";
* {
    padding: 0;
    margin: 0;
}

body {
    margin: 0;
    background-color: #ffffff;
    min-height: 100%;
    min-width: 1250px;
    line-height: inherit;
}

/*清除浮动*/
.clearfix {
    *zoom: 1;
}

.clearfix:after {
    display: table;
    content: "";
    line-height: 0;
}

.clearfix::after {
    clear: both;
}

.member-ship-banner {
    background: url("/torch/img/yijing/vip-banner-new.jpg")  no-repeat center top;
    background-size: 1920px auto;
    width: 100%;
    height: 760px;
    position: relative;
}

/* #header header{
	box-shadow:none!important;
	border-bottom: 1px solid #bdc9d5;
} */
.privilegeList {
    width: 1200px;
    min-width: 1200px;
    margin: -44px auto 110px;
    background: #fff;
    border-radius: 10px;
    height: 455px;
    box-shadow: 0px 0px 10px #e4e4e5;
    text-align: center;
    background: url("/img/membership/diamond.png") no-repeat left;
    background-color: #FFF;
}

.titleImg {
    margin-top: 80px;
}

.privilegeList ul {
    list-style: none;
    margin: 62px 0 0 0;
    padding: 0;
}

.privilegeList ul li {
    float: left;
    width: 25%;
}

.privilegeList ul li p {
    font-size: 24px;
    color: #888888;
    margin-top: 37px;
}

.privilegeList ul li div {
    height: 97px;
}

.privilegeList ul li:hover img {
    margin-top: -8px;
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
}

.memberPrice, .questionBox {
    text-align: center;
}

.questionBox {
    padding-bottom: 1px;
    background: transparent;
}
.memberInfoBox {
    left: 0;
    right: 0;
    position: absolute;
    top: 342px;
}
.answerBox {
    width: 1200px;
    margin: 0 auto;
}

.memberInfoBox .wrapBox {
    width: 1200px;
    margin: 0 auto;
}

.memberInfoBox #popup_container {
    position: absolute !important;
    top: 110px !important;
    left: 0 !important;
    right: 0 !important;
    width: 305px !important;
    margin: 0 auto !important;
}

.memberInfoBox #popup_message {
    text-align: left !important;
}

.wrapBox {
    position: relative;
}
.wrapBox ul {
    list-style: none;
    margin: 0 0 0 280px;
    display: flex;
    background: white;
    height: 222px;
    border-radius: 0 12px 12px 0;
    position: relative;
    z-index: 9;
    padding-left: 10px;
}
.wrapBox ul li {
    padding: 0 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.wrapBox ul li + li {
    border-left: 1px dotted #DCDFE6;
}
.wrapBox ul li#week_member_li {
    filter: opacity(0);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: none;
}

.wrapBox ul li a{
    box-sizing: border-box;
    width: 260px;
    height: 320px;
    background-size: 100% 100%;
    text-align: center;
    transition: all .4s;
    -moz-transition: all .4s;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    cursor: pointer;
}


.wrapBox ul li:hover .member-item-top .openBtn{
    color: white;
    background: #15171A;
}

.wrapBox ul li.disabled {
    pointer-events: none;
}
.wrapBox ul li:hover a{
    transform: translateY(-10px);
}
.wrapBox ul li .member-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    width: 260px;
    height: 100px;
    padding: 0 10px;
    box-sizing: border-box;
    border-radius: 8px;
}


.wrapBox ul li .member-item-top .title {
    color: #303440;
    font-size: 18px;
    font-weight: bold;
}

.wrapBox ul li .member-item-top .sub-title {
    color: #303440;
    font-size: 12px;
    margin-top: 6px;
}

.wrapBox ul li .member-item-top .openBtn {
    width: 76px;
    height: 28px;
    background: #fff;
    border-radius: 24px;
    color: #303440;
    font-size: 12px;
    line-height: 28px;
    text-align: center;
}
.wrapBox ul li a{
  display: inline-block;
}
.wrapBox ul li:nth-child(1) a .member-item-top{
    background-image: url("/torch/img/vip/week-bg.png");
}

.wrapBox ul li:nth-child(2) a .member-item-top{
    background-image: url("/torch/img/vip/month-bg.png");
}

.wrapBox ul li:nth-child(3) a .member-item-top{
    background-image: url("/torch/img/vip/quarter-bg.png");
}

.wrapBox ul li:nth-child(4) a .member-item-top{
    background-image: url("/torch/img/vip/year-bg.png");
}

.wrapBox ul li .desc {
    color: #303440;
    margin-top: 12px;
}

.wrapBox ul li .desc .jieshen {
    display: block;
    text-align: center;
    line-height: 24px;
    font-size: 14px;
    letter-spacing: 1px;
    color: #888;
    margin-top: 6px;
}

.wrapBox ul li .desc .desc-content {
    min-height: 100px;
    font-size: 12px;
    display: none;
}

.wrapBox ul li .desc .decoration {
    text-decoration: line-through;
    color: #B3B9C7;
}

.wrapBox ul li .desc p {
    margin-top: 10px;
}

.coupon-list-extra-info {
    font-size: 13px;
    color: #ff1e1e;
    font-weight: bold
}

.coupon-list-extra-info:before {
    content: '';
    display: inline-block;
    background: url("/torch/page/member-ship/img/gif.png") left center no-repeat scroll transparent;
    background-size: 20px 20px;
    width: 22px;
    height: 20px;
    margin: 0px 2px -3px 2px;
}

.wrapBox ul li .coupon-wrap .original-price {
    color: #CED5E6;
    font-size: 14px !important;
    font-weight: 400;
    text-decoration: line-through;
    margin-left: 8px;
    position: relative;
}

.wrapBox ul li .coupon-wrap .original-price.hidden{
    display: none;
}
.wrapBox ul li .coupon-wrap .coupon-tip {
    background-image: url("/torch/img/index/bubble-tip.png");
    background-size: 100% 100%;
    white-space: nowrap;
    padding: 0 5px;
    min-width: 75px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: #58481F;
    font-size: 12px;
    font-weight: 400;
    position: absolute;
    left: 0;
    bottom: 20px;
    border-radius: 0 0 10px 0;
}
.wrapBox ul li .coupon-wrap .coupon-tip::after {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px;
    top: 12px;
    left: -6px;
    border-color: #FFD38D transparent transparent;
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
}

/* .wrapBox ul li:nth-child(2){
	background: url("/img/membership/bg2.png") no-repeat center center;
}
.wrapBox ul li:nth-child(3){
	background: url("/img/membership/bg3.png") no-repeat center center;
} */
.priceNum {
    font-size: 16px;
    color: #303440;
    padding-top: 10px;
    letter-spacing: 1px;
    line-height: 30px;
}

.priceNum strong {
    font-size: 24px;
    letter-spacing: 2px;
}

.priceNum .day {
    font-size: 12px;
}

.oldPrice {
    margin-left: 18px;
    text-decoration: line-through;
    color: red;
}

.publicQ {
    height: 94px;
    background: url("/img/membership/icon5.png") no-repeat center center;
    color: #fff;
    font-size: 24px;
    text-align: left;
    padding-left: 150px;
    line-height: 94px;
    margin-bottom: 20px;
}

.answerP {
    height: 254px;
    background: url("/img/membership/icon6.png") no-repeat center center;
    color: #888888;
    font-size: 24px;
    text-align: left;
    padding-left: 150px;
    margin-bottom: 28px;
}

.answerP span, .answerPTwo span, .answerPThree span {
    display: block;
    line-height: 40px;
}

.answerP span:nth-child(1), .answerPTwo span:nth-child(1) {
    padding-top: 30px;
}

.answerPTwo {
    height: 344px;
    background: url("/img/membership/icon7.png") no-repeat center center;
    color: #888888;
    font-size: 24px;
    text-align: left;
    padding-left: 150px;
    margin-bottom: 28px;
}

.answerPThree {
    height: 176px;
    background: url("/img/membership/icon8.png") no-repeat center center;
    color: #888888;
    font-size: 24px;
    text-align: left;
    padding-left: 150px;
    margin-bottom: 30px;
}

.answerPThree span:nth-child(1) {
    padding-top: 45px;
}

.answerPFore {
    width: 100%;
    height: 340px;
    background: url("/img/membership/icon9.png") no-repeat center center;
    color: #888888;
    font-size: 24px;
    text-align: left;
    padding-left: 150px;
    margin-bottom: 30px;
    line-height: 40px;
}

.payment {
    width: 743px;
    height: 574px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -371.5px;
    margin-top: -274px;
    display: none;
    z-index: 333;
    background: #fff;
    border-radius: 10px;
}

.paymentTitle {
    color: #fff;
    font-size: 22px;
    line-height: 64px;
    background: #535980;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding-left: 43px;
}

.package {
    margin-left: 43px;
    margin-top: 6px;
    margin-right: 43px;
}

.packageTitle {
    font-size: 18px;
    color: #555;
    line-height: 52px;
}
.listBox-wrap {
    display: flex;
    justify-content: space-between;
}
.listBox-wrap.listBox-wrap-larger .listBox{
    width: 200px;
}
.listBox {
    min-width: 141px;
    box-sizing: border-box;
    border: 1px solid #e5e5e5;
    text-align: center;
    cursor: pointer;
    position: relative;
}

.listBox > div {
    width: 51px;
    height: 20px;
    background-color: #cecece;
    color: #fff;
    font-size: 12px;
    border-radius: 6px;
    position: absolute;
    top: 8px;
    right: -14px;
}

.listBox .active {
    background-color: #de9846;
}

.listBox p:nth-child(1) {
    font-size: 18px;
    color: #333333;
    font-weight: bold;
    margin-top: 21px;
    margin-bottom: 25px;
}

.listBox p:nth-child(2){
    font-size: 14px;
    color: #888888;
    margin-bottom: 16px;
    margin-top: 5px;
}
.listBox p:nth-child(3) {
    font-size: 14px;
    color: #888888;
    margin-bottom: 16px;
    margin-top: 5px;
}
.listBox p:nth-child(2) span {
    font-size: 36px;
    color: black;
    font-family: "Impact",黑体;
}

.selectListBox {
    border: 1px solid #de8c17;
    background: linear-gradient(#f3d6ab, #fff);
}

.selectListBox p:nth-child(1), .selectListBox p:nth-child(2), .selectListBox p:nth-child(3) {
    color: #de8c17;
}

.ewmBox {
    margin-left: 43px;
    margin-top: 25px;
}

.ewmImg {
    width: 658px;
    height: 186px;
    border: 1px solid #e5e5e5;
}

.ewmList {
    display: inline-block;
    margin-top: 6px;
    margin-left: 37px;
    text-align: center;
    font-size: 14px;
    vertical-align: top;
}

.ewmList > p {
   position: relative;
   top: -6px;
    letter-spacing: 1px;
}

.ewmBg {
    width: 133px;
    height: 133px;
    background: url("/img/membership/ewm.png") no-repeat center center;
    margin-bottom: -2px;
    padding: 4px;
    position: relative;
}

.ewmBg canvas {
    margin-top: 18px;
}

.ewmBg .WeChat {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    margin-top: -11px;
    margin-left: -12.5px;
    width: 25px;
    height: 22px;
}

.ewmBg iframe {
    width: 115px;
    height: 114px;
    overflow: hidden;
    border: none;
    margin: 6px;
}

.inb_info {
    display: inline-block;
    vertical-align: top;
    padding-left: 60px;
    padding-top: 60px;
    box-sizing: border-box;
}

.inb_info > .coupon-count-down {
    margin-top: 12px;
    color: #888;
    display: none;
}

.inb_info > .coupon-count-down > span {
    color: #ff1e1e;
}

.paymentNum {
    font-size: 16px;
    color: #888;
}

.paymentNum span {
    font-size: 30px;
    color: #de8c17;
    padding-left: 2px;
}

#priceBg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 222;
    background-color: #000000;
    display: none;
    opacity: 0.5;
}

.costNum {
    position: relative;
    display: none;
    padding-right: 20px;
    margin-top: 12px;
    padding-right: 15px;
}

.costNum .xauibt {
    color: #888;
    font-size: 14px;
    text-decoration: line-through;
    font-weight: 500;
    display: none;
}

.costNum .coin-discount {
    display: inline-block;
    position: absolute;
    padding: 0 5px;
    background-color: #ffe2e2;
    font-size: 12px;
    color: #ff1e1e;
    white-space: nowrap;
    border: 1px solid #ff1e1e;
    left: 100%;
    top: -1px;
}

.costNum .coin-discount s {
    width: 0;
    height: 0;
    border-width: 8px 8px 8px 0;
    border-style: solid;
    border-color: transparent #ff1e1e transparent transparent;
    position: absolute;
    left: -8px;
    top: 0;
}

.costNum .coin-discount i {
    width: 0;
    height: 0;
    border-width: 7px 7px 7px 0;
    border-style: solid;
    border-color: transparent #ffe2e2 transparent transparent;
    position: absolute;
    left: 1px;
    top: -7px;
}

.ewmBg table {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

.wechat, .zhifub {
    width: 100%;
    height: 100%;
}

.closeImg {
    position: absolute;
    top: -24px;
    right: -26px;
    cursor: pointer;
    z-index: 3;
}

.userCouponBtn {
    padding: 3px 5px;
    border: 1px solid #ebba75;
    position: absolute;
    top: 17px;
    right: 32px;
    color: #ebba75;
    border-radius: 16px;
    cursor: pointer;
}

.couponBtnBox {
    width: 360px;
    height: 548px;
    position: absolute;
    border-radius: 10px;
    top: 0;
    right: -360px;
    background-color: #FFF;
    overflow: hidden;
    border-left: 1px solid #e5e5e5;
    z-index: 1;
    display: none;
}

.couponCentent {
    width: 100%;
    overflow-y: auto;
    height: 457px;
    padding: 20px 16px;
    box-sizing: border-box;
}

.couponCentent .couponBg {
    width: 320px;
    height: 132px;
    float: left;
    position: relative;
    user-select: none;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    margin: 0 auto 20px;
}

.closeBox_counpon {
    position: absolute;
    right: 16px;
    top: 21px;
    cursor: pointer;
    color: #ebba75;
}

.couponCentent .couponbgOne {
    background: url("/img/membership/Discount_q.png") no-repeat;
    background-size: 100% 100%;
}

.couponCentent .couponbgTwo {
    background: url("/img/membership/rebate_q.png") no-repeat;
    background-size: 100% 100%;
}

.couponBox {
    float: left;
    width: 225px;
    height: 100%;
    margin-left: 40px;
    box-sizing: border-box;
    padding: 18px 10px;
}

.couponBox h2 {
    font-size: 20px;
    color: #489afe;
    line-height: 20px;
}

.couponBox p {
    font-size: 12px;
    color: #666;
    line-height: 18px;
}

.couponBox p:nth-child(2) {
    margin-top: 5px;
}

.couponBox p:nth-child(3), .couponBox p:nth-child(4) {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
}

.maskBox {
    float: left;
    width: 54px;
    height: 100%;
    line-height: 132px;
    text-align: center;
}

.maskBox span {
    color: #489afe;
    cursor: pointer;
}

/*常见问题*/
.common-problem-wrap {
    height: 640px;
    width: 100%;
    position: relative;
}

.common-problem-wrap .title {
    margin: 0 auto;
    padding-top: 40px;
    width: 906px;
    height: 271px;
}

.common-problem-wrap .main {
    position: absolute;
    left: 0;
    right: 0;
    top: 164px;
    bottom: 0;
    width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.common-problem-wrap .main .item {
    width: 50%;
    box-sizing: border-box;
}

.common-problem-wrap .main .item:nth-child(2n) {
    padding-left: 40px;
}

.common-problem-wrap .main .item .item-top {
    display: flex;
    align-items: center;
}

.common-problem-wrap .main .item .item-top img {
    width: 60px;
    height: 60px;
    background: #FFD6B3;
    border-radius: 50%;
    margin-right: 20px;
}

.common-problem-wrap .main .item .item-top .bubble {
    height: 36px;
    background: #F1F1F1;
    line-height: 36px;
    position: relative;
    border-radius: 3px;
    font-size: 14px;
    color: #303440;
    padding: 0 10px;
}

.common-problem-wrap .main .item .item-top .bubble:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: 12px;
    border-top: 6px solid transparent;
    border-right: 8px solid #F1F1F1;
    border-bottom: 6px solid transparent;
    margin-left: -18px;
}

.common-problem-wrap .main .item .item-main {
    margin-left: 80px;
    color: #767E91;
    font-size: 12px;
}

.common-problem-wrap .main .item .item-main p {
    line-height: 24px;
}

.common-problem-wrap .main .item .item-main span {
    color: #303440;
}

.vip-problem-wrap {
    width: 1040px;
    padding: 40px 55px;
    position: relative;
    -webkit-box-shadow: 0px 2px 20px 1px rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0px 2px 20px 1px rgba(0, 0, 0, 0.16);
    box-shadow: 0px 2px 20px 1px rgba(0, 0, 0, 0.16);
    border-radius: 0 0 10px 10px;
    margin: 40px auto 100px;
    background: url("./img/line.png") no-repeat top center #fff;
    background-size: 100% auto;
}

.vip-problem-wrap .title {
    margin: 0 auto;
    line-height: 60px;
    text-align: center;
    font-weight: bold;
    font-size: 32px;
    letter-spacing: 2px;
}

.vip-problem-wrap .vip-problem-list .vip-problem-item .item-top {
    line-height: 35px;
    letter-spacing: 1px;
    font-weight: bold;
    font-size: 18px;
    margin-top: 25px;
}

.vip-problem-wrap .vip-problem-list .vip-problem-item .item-top>img{
    width: 35px;
    height: 35px;
    float: left;
    margin-right: 10px;
}

.vip-problem-wrap .vip-problem-list .vip-problem-item .item-main {
    background: #F6F6F6;
    border-radius: 0px 20px 20px 20px;
    padding: 10px 20px;
    margin-top: 5px;
    line-height: 20px;
    font-size: 14px;
}

.memberInfoBox .wrapBox .member-item-rank {
    width: 280px;
    height: 238px;
    position: absolute;
    left: 0;
    top: -8px;
    z-index: 8;

    background: -webkit-linear-gradient( 180deg, #FCE0B0 0%, #FECD7F 100%);
    background: -moz-linear-gradient( 180deg, #FCE0B0 0%, #FECD7F 100%);
    background: -o-linear-gradient( 180deg, #FCE0B0 0%, #FECD7F 100%);
    background: -ms-linear-gradient( 180deg, #FCE0B0 0%, #FECD7F 100%);
    background: linear-gradient( 180deg, #FCE0B0 0%, #FECD7F 100%);
    border-radius: 10px 0px 0px 10px;
}

.memberInfoBox .wrapBox .member-item-rank:before {
    content: '';
    display: block;
    position: absolute;
    left: 100%;
    top: 0;
    border: 119px solid rgba(0, 0, 0, 0);
    border-left-color: #D09F64;
}

.memberInfoBox .wrapBox .member-item-rank-head {
    width: 216px;
    margin: 48px auto 0;
    align-items: center;
    justify-content: center;
    display: flex;
}

.memberInfoBox .wrapBox .member-item-rank-head .member-message {
    display: none;
    margin-left: 10px;
    text-align: left;
}
.memberInfoBox .wrapBox .member-item-rank-head .exp-time {
    font-size: 12px;
    white-space: nowrap;
    word-break: keep-all;
}

.memberInfoBox .wrapBox .member-item-rank-head .exp-time b {
    padding-left: 1px;
    font-weight: normal;
}

.memberInfoBox .wrapBox .member-item-rank-head .nick-name {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
    white-space: nowrap;
    word-break: keep-all;
    text-overflow: ellipsis;
}

.memberInfoBox .wrapBox .member-item-rank-head img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 1px solid #AFAFAF;
}

.memberInfoBox .wrapBox .member-item-rank-level {
    margin: 24px auto 0 auto;
    width: 200px;
    text-align: left;
    display: none;
}

.memberInfoBox .wrapBox .member-item-rank-level .pop {
    position: absolute;
    color: #FF1E32;
    right: 0;
    bottom: 20px;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid red;
    background-color: #FFE0B3;
    font-size: 12px;
}

.memberInfoBox .wrapBox .member-item-rank-level .pop::after, .pop::before {
    content: "";
    display: block;
    border-width: 6px;
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    border-style: solid;
    border-color: #FF1E32 transparent transparent;
    font-size: 0;
    line-height: 0;
}

.memberInfoBox .wrapBox .member-item-rank-level .pop::after {
    bottom: -11px;
    border-color: #FFE0B3 transparent transparent;
}

.memberInfoBox .wrapBox .member-item-rank-level .member-item-rank-progress {
    width: 200px;
    height: 8px;
    background: #AFAFAF;
    border-radius: 4px;
    margin-top: 8px;
    position: relative;
}

.memberInfoBox .wrapBox .member-item-rank-level .member-item-rank-progress .progress-line {
    height: 8px;
    background: #898989;
    border-radius: 4px;
    position: absolute;
}

.memberInfoBox .wrapBox .member-item-rank-info {
    display: flex;
    width: 200px;
    margin: 24px auto 0;
    text-align: center;
    display: none;
}

.memberInfoBox .wrapBox .member-item-rank-info .member-item-rank-info-item {
    width: 50%;
}

.memberInfoBox .wrapBox .member-item-rank-info .member-item-rank-info-item.pointer, .memberInfoBox .wrapBox .member-item-rank-info .member-item-rank-info-item.pointer * {
    cursor: pointer;
}

.memberInfoBox .wrapBox .member-item-rank-info .member-item-rank-info-item .red-title {
    font-size: 16px;
    font-weight: bold;
    color: #FF1E32;
}

.memberInfoBox .wrapBox .member-item-rank-info .member-item-rank-info-item.right-border {
    border-left: 1px dotted #E0B343;
}

.memberInfoBox .wrapBox .member-item-rank-info .member-item-rank-info-item .text {
    font-weight: 400;
    color: #303440;
    font-size: 12px;
    margin-top: 2px;
}

.memberInfoBox .wrapBox .member-item-rank .member-item-rank-login-wrap {
    margin-top: 36px;
    text-align: center;
}

.memberInfoBox .wrapBox .member-item-rank .member-item-rank-login-wrap a {
    padding: 12px 72px;
    background: linear-gradient(90deg, #252221 0%, #575A54 100%);
    border-radius: 21px;
    color: white;
    font-size: 14px;
    cursor: pointer;
}