/* 2019-3.27 修改：
  去掉了购买页的 level 级别
  右边的套餐 padding-top 去掉了
*/

.buy-container-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    z-index: 33;
}

.buy-container {
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100%;
    max-width: 7.5rem;
    /* height: 8.53rem; */
    /* height: 8.03rem; */
    height: 7.23rem;
    background: #fff;
}

.buy-header {
    position: absolute;
    top: -0.3rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 2.91rem;
    height: 0.82rem;
    background: url("../img/buy/buy-header-bg.png?v=1.1") no-repeat center;
    background-size: contain;
}

/* 手机的 level 名称 */

.buy-level {
    position: relative;
    height: 0.32rem;
    text-align: center;
    font-size: 0.32rem;
    line-height: 0.32rem;
    color: #575757;
    margin: 0.91rem 0 0.38rem;
    padding-right: 0.5rem;
    display: none;
}

.buy-level-question {
    position: absolute;
    top: -0.05rem;
    right: 2.78rem;
    width: 0.4rem;
    height: 0.4rem;
    background: url("../img/buy/que.png") no-repeat center;
    background-size: 0.28rem 0.28rem;
    cursor: pointer;
}

/* ipad 的 level 名称 */

.fixed-right .buy-level {
    position: absolute;
    top: 0.34rem;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    margin: 0;
    padding: 0;
    width: 1.28rem;
    height: 0.32rem;
    text-align: center;
    font-size: 0.18rem;
    line-height: 0.32rem;
    color: #575757;
    z-index: 110;
    display: none;
}

.fixed-right .buy-level-num {
    display: inline-block;
    width: 1.16rem;
    height: 0.32rem;
    border-radius: 0.16rem;
    background: linear-gradient(to bottom, #ffc300, #ffa100);
    text-align: center;
    color: #fff;
}

.fixed-right .buy-level-question {
    position: absolute;
    top: 0.03rem;
    right: -0.32rem;
    width: 0.26rem;
    height: 0.26rem;
    background: url("../img/buy/ipad-que.png") no-repeat center;
    background-size: 0.26rem 0.26rem;
    cursor: pointer;
}

/* 结束 */

.gray-line {
    position: absolute;
    width: 100%;
    height: 0.02rem;
    background: #f9f9f9;
}

.gray-line-top {
    /* bottom: 7.74rem; */
    /* bottom: 7.24rem; */
    /* bottom: 6.44rem; */
    top: 0.85rem;
}

.gray-line-bottom {
    bottom: 1.7rem;
}

.buy-title {
    width: 100%;
    margin: 1rem 0 0.36rem;
    margin-bottom: 0.5rem;
    text-align: center;
    color: #575757;
    font-size: 0.22rem;
}

.course-container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    width: 100%;
}

.buy-agree-pass {
    opacity: 1 !important;
}

/* 普通 */

/* 三个 */

.course-unit {
    position: relative;
    width: 2.33rem;
    /* height: 3.81rem; */
    height: 3.08rem;
    margin: 0 0.13rem;
    border-radius: 0.1rem;
    box-sizing: border-box;
    box-shadow: 0 0 0.4rem #ece6f7;
}

.course-header {
    position: absolute;
    top: -0.2rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 1.75rem;
    height: 0.45rem;
    background: linear-gradient(to right bottom, #a290f8, #9b61f6);
    background-size: contain;
    border-radius: 0.23rem;
    font-size: 0.3rem;
    color: #fff;
    text-align: center;
    line-height: 0.45rem;
}

.course-hours {
    font-size: 0.3rem;
    color: #f06c3e;
    text-align: center;
}

.course-price {
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 1.6rem;
    height: 0.25rem;
    line-height: 0.25rem;
    font-size: 0.25rem;
    color: #676767;
    text-align: center;
    /* 去掉课时数后加的 */
    margin: 0.6rem 0 0.2rem;
}

.course-price::after {
    position: absolute;
    content: "";
    display: block;
    bottom: 0.1rem;
    width: 100%;
    height: 0.02rem;
    background: #f06c3e;
    border-radius: 0.01rem;
}

.course-sell-price {
    height: 0.57rem;
    width: 100%;
    text-align: center;
    font-size: 0.32rem;
    color: #f06c3e;
    margin: 0.3rem auto 0.4rem;
}

.course-sell-price-num {
    font-size: 0.57rem;
    line-height: 0.57rem;
    height: 0.57rem;
    margin-right: -0.1rem;
    font-weight: 700;
}

.course-on-course {
    height: 0.25rem;
    line-height: 0.25rem;
    font-size: 0.25rem;
    color: #676767;
    text-align: center;
}

.course-on-mouths {
    height: 0.25rem;
    line-height: 0.25rem;
    font-size: 0.25rem;
    color: #676767;
    text-align: center;
}

/* 两个 */

/* .course-unit {
    position: relative;
    width: 3.13rem;
    height: 3.81rem;
    margin: 0 0.13rem;
    border-radius: 0.1rem;
    box-sizing: border-box;
    box-shadow: 0 0 0.4rem #ece6f7;
}

.course-header {
    position: absolute;
    top: -0.2rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 2.39rem;
    height: 0.45rem;
    background: linear-gradient(to right bottom, #a290f8, #9b61f6);
    background-size: contain;
    border-radius: 0.23rem;
    font-size: 0.3rem;
    color: #fff;
    text-align: center;
    line-height: 0.45rem;
}

.course-hours {
    margin: 0.6rem auto 0.2rem;
    font-size: 0.3rem;
    color: #f06c3e;
    text-align: center;
}

.course-sell-price {
    height: 0.57rem;
    width: 100%;
    text-align: center;
    font-size: 0.32rem;
    color: #f06c3e;
    margin: 0.4rem auto 0.4rem;
} */

/* 掌通定制 */

/* 一个 */

.course-unit-zt {
    position: relative;
    width: 4.55rem;
    height: 4.15rem;
    /* height: 3.51rem; */
    margin: 1.32rem 0.13rem 0;
    border-radius: 0.1rem;
    box-sizing: border-box;
    box-shadow: 0 0 0.4rem #ece6f7;
}

.course-header-zt {
    position: absolute;
    width: 3.44rem;
    height: 0.66rem;
    border-radius: 0.33rem;
    /* background: url("../img/buy/big-unit.png") no-repeat center; */
    background: linear-gradient(to right bottom, #a290f8, #9b61f6);
    background-size: contain;
    top: -0.33rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    font-size: 0.43rem;
    color: #fff;
    text-align: center;
    line-height: 0.66rem;
}

.course-hours-zt {
    margin: 0.6rem auto 0.2rem;
    font-size: 0.42rem;
    color: #f06c3e;
    text-align: center;
}

.course-price-zt {
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 2.1rem;
    height: 0.36rem;
    line-height: 0.36rem;
    font-size: 0.36rem;
    color: #676767;
    text-align: center;
}

.course-price-zt::after {
    position: absolute;
    content: "";
    display: block;
    bottom: 0.15rem;
    width: 100%;
    height: 0.02rem;
    background: #f06c3e;
    border-radius: 0.01rem;
}

.course-sell-price-zt {
    height: 0.57rem;
    width: 100%;
    text-align: center;
    font-size: 0.44rem;
    color: #f06c3e;
    margin: 0.3rem auto 0.4rem;
}

.course-sell-price-num-zt {
    font-size: 0.8rem;
    line-height: 0.57rem;
    height: 0.57rem;
    margin-right: -0.1rem;
    font-weight: 700;
}

.course-on-course-zt {
    height: 0.25rem;
    line-height: 0.25rem;
    font-size: 0.36rem;
    color: #676767;
    text-align: center;
}

.course-unit-active {
    border: 0.03rem solid #9d7ecf;
}

.course-unit-active .course-radio {
    border: none;
    background: url("../img/buy/radio-click.png") no-repeat center;
    background-size: cover;
}

.good::after {
    position: absolute;
    content: "";
    display: block;
    top: 0.38rem;
    right: 0.09rem;
    width: 0.39rem;
    height: 0.58rem;
    background: url("../img/buy/good.png") no-repeat center;
    background-size: cover;
}

.course-on-course-num {
    color: #f06c3e;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
}

.course-radio {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 0.24rem;
    height: 0.29rem;
    width: 0.29rem;
    box-sizing: border-box;
    border-radius: 50%;
    border: 0.02rem solid #e8e4f0;
}

.buy-team-container {}

.buy-alone-container {
    display: none;
}

.buy-ios-container,
.buy-weixin-container,
.buy-huawei-container,
.buy-oppo-container {
    display: none;
    width: 100%;
    height: 3rem;
}

.buy-ios,
.buy-weixin,
.buy-huawei,
.buy-oppo {
    position: absolute;
    bottom: 0.26rem;
    right: 0.2rem;
    width: 3.2rem;
    height: 0.92rem;
    border-radius: 0.46rem;
    font-size: 0.35rem;
    color: #fff;
    line-height: 0.92rem;
    text-align: center;
    background: linear-gradient(to right bottom, #fea367, #f06c3e);
    opacity: 0.3;
}

.buy-weixin {
    box-sizing: border-box;
    padding-left: 0.75rem;
    background: #57b33b url("../img/buy/weixin-logo.png") no-repeat 0.65rem center;
    background-size: 0.41rem 0.37rem;
}

.buy-huawei {
    box-sizing: border-box;
    padding-left: 0.75rem;
    background: #FFD2AA url("../img/buy/huawei-logo.png") no-repeat 0.65rem center;
    background-size: 0.41rem 0.37rem;
}

.buy-app-price {
    position: absolute;
    bottom: 0.26rem;
    left: 0.2rem;
    height: 0.92rem;
    font-size: 0.68rem;
    color: #f06c3e;
    text-align: center;
}

.buy-app-alone-tips::after,
.buy-app-team-tips::after {
    content: "限时优惠";
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    width: 1.1rem;
    height: 0.32rem;
    border-radius: 0.16rem;
    border: 1px solid #f06c3e;
    font-size: 0.22rem;
    color: #f06c3e;
    text-align: center;
    line-height: 0.32rem;
}

.buy-app-team-tips::after {
    width: 1.34rem;
    content: "新人拼团价";
}

.end-time {
    position: absolute;
    bottom: 1.05rem;
    width: 100%;
    height: 0.8rem;
    line-height: 0.8rem;
    font-size: 0.25rem;
    text-align: center;
    color: #575757;
}

.end-timer-num {
    display: inline-block;
    width: 0.3rem;
    color: #e64e58;
}

.m-second {
    width: 0.15rem;
}

.buy-alone {
    position: absolute;
    bottom: 0.26rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 6.88rem;
    height: 0.92rem;
    font-size: 0.35rem;
    color: #fff;
    line-height: 0.92rem;
    text-align: center;
    background: url("../img/buy/buy-alone.png") no-repeat center;
    background-size: contain;
}

.buy-team {
    position: absolute;
    bottom: 0.26rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 7.1rem;
    height: 0.92rem;
    font-size: 0.35rem;
    line-height: 0.92rem;
}

.buy-team-left {
    position: absolute;
    right: 0;
    width: 4rem;
    height: 0.92rem;
    margin-right: 0.17rem;
    color: #fff;
    background: url("../img/buy/team-left.png") no-repeat center;
    background-size: contain;
}

.buy-team-left-textl {
    position: absolute;
    left: 0.32rem;
}

.buy-team-left-textr {
    position: absolute;
    right: 0.43rem;
}

.buy-team-right {
    position: absolute;
    text-align: center;
    left: 0;
    width: 2.76rem;
    height: 0.92rem;
    color: #f06c3e;
    background: url("../img/buy/team-right.png") no-repeat center;
    background-size: contain;
}

/* 手机 用户协议样式 */

.user-agreement-container {
    position: absolute;
    bottom: 1.25rem;
    text-align: center;
}

/* ipad 用户协议样式 */

.ipad-box .user-agreement-container {
    position: absolute;
    bottom: 0.28rem;
    text-align: center;
}

/* 二维码弹窗 二维码的样式 */

.qrcode-mask {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    z-index: 50;
}

.qrcode-content {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 7.89rem;
    background: #fff;
    border-radius: 1rem 1rem 0 0;
    text-align: center;
}

.qrcode-mask-title {
    width: 100%;
    height: 0.7rem;
    margin-top: 0.7rem;
    line-height: 0.7rem;
    font-size: 0.4rem;
    box-sizing: border-box;
    padding-left: 0.7rem;
    background: url("../img/buy/weixin-logo-green.png") no-repeat 1.24rem center;
    background-size: 0.8rem 0.7rem;
}

.qrcode-mask-price {
    font-size: 0.8rem;
    color: #ff5151;
}

#qrcode {
    margin: 0.5rem auto 0;
    width: 3.4rem;
    height: 3.4rem;
}

#qrcode>img {
    width: 100%;
    height: 100%;
}

.qrcode-mask-footer {
    height: 0.3rem;
    margin-top: 0.6rem;
    font-size: 0.28rem;
    text-align: center;
    padding-left: 0.2rem;
    color: #8c8c8c;
}

.qrcode-mask-close {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    width: 0.32rem;
    height: 0.32rem;
    background: url("../img/buy/close.png") no-repeat center;
    background-size: contain;
}

/* 平板的二维码样式 */

.ipad-box .qrcode-content {
    height: 4.35rem;
    border-radius: 0.5rem 0.5rem 0 0;
}

.ipad-box .qrcode-mask-title {
    font-size: 0.2rem;
    height: 0.35rem;
    line-height: 0.35rem;
    padding-left: 0.7rem;
    background: url("../img/buy/weixin-logo-green.png") no-repeat 5.3rem center;
    background-size: 0.4rem 0.35rem;
}

.ipad-box .qrcode-mask-price {
    font-size: 0.4rem;
}

.ipad-box #qrcode {
    margin: 0.25rem auto 0;
    height: 1.7rem;
    width: 1.7rem;
}

.ipad-box #qrcode>img {
    width: 1.7rem;
    height: 1.7rem;
}

.ipad-qrcode#qrcode img {
    width: 3rem;
    height: 3rem;
}

.ipad-box .qrcode-mask-footer {
    height: 0.14rem;
    margin-top: 0.3rem;
    font-size: 0.14rem;
}

.ipad-box .qrcode-mask-close {
    top: 0.2rem;
    right: 0.2rem;
    width: 0.16rem;
    height: 0.16rem;
}

/* 右边的套餐信息 */

.fixed-right {
    position: fixed;
    right: 0;
    top: 0;
    /* width: 4.22rem; */
    width: 40%;
    box-sizing: border-box;
    height: 100vh;
    padding: 0.36rem;
    /* padding-top: 0.9rem; */
    background: #FAF6FF;
    box-shadow: inset 8px 0px 32px 0px rgba(141, 109, 180, 0.32);
    display: none;
}

.fixed-right-container {
    height: 100%;
    width: 100%;
    display: table;
}

.course-info-right {
    /* height: 100%; */
    /* display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; */
    display: table-cell;
    vertical-align: middle;
    /* display: block; */
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.course-right-unit {
    position: relative;
    width: 3.5rem;
    height: 2.10rem;
    border-radius: 0.16rem;
    padding: 0.2rem 0.31rem 0.22rem;
    margin: 0 auto 0.2rem;
    color: #f9f9f9;
    box-sizing: border-box;
}

.course-right-unit>.course-hours-con {
    color: #f9f9f9;
}

.course-right-unit:nth-child(1) {
    background: #FFBF6F;
}

/* .course-right-unit:nth-child(2) { */
.course-right-unit:nth-child(1) {
    background: #FF8394;
}

.course-right-unit:nth-child(3) {
    background: #9191FF;
}

.course-right-unit:nth-child(1)>.course-right-buy-now,
.course-right-unit:nth-child(1) .course-right-sell-price {
    color: #FF6C39;
}

/* .course-right-unit:nth-child(2)>.course-right-buy-now { */
.course-right-unit:nth-child(1)>.course-right-buy-now {
    color: #F3687B;
}

.course-right-unit:nth-child(3)>.course-right-buy-now {
    color: #9B73F5;
}

/* .course-right-unit:nth-child(2) .course-right-sell-price, */
.course-right-unit:nth-child(1) .course-right-sell-price,
.course-right-unit:nth-child(3) .course-right-sell-price {
    color: #FEE722;
}

.course-right-title {
    display: inline-block;
    font-size: 0.3rem;
    height: 0.3rem;
    text-align: center;
}

.course-right-tips {
    position: absolute;
    right: 0.3rem;
    top: 0.3rem;
    font-size: 0.17rem;
}

.course-right-line {
    height: 0.01rem;
    width: 100%;
    background: #f9f9f9;
    margin: 0.14rem 0 0;
}

.course-hours-con {
    position: relative;
    height: 0.38rem;
    width: 100%;
    margin-top: 0.05rem;
    margin-bottom: 0.08rem;
}

.course-right-hours {
    position: absolute;
    top: 0.05rem;
    left: 0;
    height: 0.38rem;
    width: 50%;
    font-size: 0.26rem;
    box-sizing: border-box;
    padding-bottom: 0.2rem;
}

.course-right-mouths {
    position: absolute;
    top: 0.05rem;
    left: 0;
    height: 0.38rem;
    width: 50%;
    font-size: 0.26rem;
    box-sizing: border-box;
    padding-bottom: 0.2rem;
}

.course-right-sell-price {
    position: absolute;
    top: 0;
    right: 0;
    text-align: right;
    /* left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%); */
    height: 0.38rem;
    font-size: 0.38rem;
    text-align: center;
}

.course-right-origin-price {
    min-height: 0.05rem;
    height: 0.16rem;
    font-size: 0.16rem;
    text-align: right;
    /* text-align: center; */
    color: #fff;
    margin-bottom: 0.2rem;
}

.course-right-origin-price-content {
    position: relative;
}

.course-right-origin-price-content::after {
    position: absolute;
    display: block;
    content: "";
    top: 0.12rem;
    right: -5%;
    width: 110%;
    height: 1px;
    background: #fff;
}

.yellow-bg::after {
    position: absolute;
    display: block;
    content: "";
    top: 0.12rem;
    right: -5%;
    width: 110%;
    height: 1px;
    /* background: #ffef2f; */
}

.course-right-buy-now {
    width: 1.86rem;
    height: 0.42rem;
    border-radius: 0.21rem;
    margin: 0.14rem auto 0;
    background: #fff;
    font-size: 0.28rem;
    color: #e72e21;
    line-height: 0.42rem;
    text-align: center;
}

/* 平板购买的弹窗 */

.ipad-pay-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    z-index: 50;
    display: none;
}

.ipad-pay-info {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 4rem;
    height: 3.84rem;
    background: #fff;
    border-radius: 0.16rem;
}

.ipad-info-title {
    height: 0.62rem;
    width: 100%;
    padding: 0 0.24rem;
    box-sizing: border-box;
    font-size: 0.2rem;
    color: #333;
    line-height: 0.62rem;
    border-bottom: 1px solid #f8f8f8;
}

.ipad-info-detail {
    padding: 0 0.24rem;
    box-sizing: border-box;
}

.ipad-info-detail>li {
    height: 0.52rem;
    border-bottom: 1px solid #f8f8f8;
    font-size: 0.16rem;
    line-height: 0.52rem;
    color: #333;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.ipad-info-detail>li>.ipad-info-detail-key {
    -webkit-flex: 1;
    flex: 1;
    color: #ff7000;
    text-align: left;
}

.ipad-info-detail>li:nth-child(1)>.ipad-info-detail-key {
    -webkit-flex: 1;
    flex: 1;
    color: #999;
    text-align: left;
}

.ipad-info-detail>li>.ipad-info-detail-value {
    -webkit-flex: 1;
    flex: 1;
    text-align: right;
}

.ipad-info-total {
    position: absolute;
    bottom: 1.44rem;
    width: 100%;
    height: 0.3rem;
    /* margin: 0.6rem auto 0.28rem; */
    line-height: 0.3rem;
    font-size: 0.16rem;
    padding-left: 1.4rem;
    color: #666;
}

.ipad-info-price {
    position: absolute;
    font-size: 0.3rem;
    line-height: 0.3rem;
    color: #ff7000;
}

.ipad-info-buy-now,
.weixin-info-buy-now,
.huawei-info-buy-now,
.oppo-info-buy-now {
    position: absolute;
    bottom: 0.64rem;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    width: 2.76rem;
    height: 0.52rem;
    /* margin: 0 auto; */
    border-radius: 0.26rem;
    font-size: 0.26rem;
    color: #fff;
    text-align: center;
    line-height: 0.52rem;
    background: linear-gradient(to bottom, #ff9b5e, #ff4e10);
    opacity: 0.3;
}

.weixin-info-buy-now {
    box-sizing: border-box;
    padding-left: 0.75rem;
    background: #57b33b url("../img/buy/weixin-logo.png") no-repeat 0.65rem center;
    background-size: 0.41rem 0.37rem;
}

.huawei-info-buy-now {
    box-sizing: border-box;
    padding-left: 0.75rem;
    background: #FFD2AA url("../img/buy/huawei-logo.png") no-repeat 0.65rem center;
    background-size: 0.41rem 0.37rem;
}

/* 安卓平板的样式 */

.android-pad .fixed-right {
    padding-top: 0.15rem;
    padding-top: 0.8rem;
}

/* .android-pad .course-right-unit {
    height: 2rem;
} */

@media screen and (orientation: landscape) {
    #qrcode {
        margin: 0 auto;
        width: 140px;
        height: 140px;
    }

    #qrcode>img {
        display: block;
        margin: 0 auto;
        width: 140px !important;
        height: 140px !important;
    }
}

/* pc 的样式 */

.buy-pc .fixed-bottom {
    height: 62px;
    line-height: 62px;
    font-size: 28px;
    background: #fff;
}

/* .buy-pc .fixed-bottom-left {
    text-align: right;
}

.buy-pc .fixed-bottom-right {
    left: 50%;
    top: 9px;
    width: 138px;
    height: 46px;
    margin-left: 50px;
    border-radius: 31px;
    line-height: 46px;
    background: linear-gradient(to right bottom, #ff6a6a, #fb3947);
    cursor: pointer;
} */

.buy-pc .buy-container {
    width: 750px;
    height: 426px;
    border-radius: 20px 20px 0 0;
}

.buy-pc .buy-header {
    width: 176px;
    height: 70px;
}

.buy-pc .buy-title {
    margin: 61px auto 21px;
    font-size: 14px;
}

.buy-pc .course-unit {
    width: 177px;
    height: 180px;
    cursor: pointer;
}

.buy-pc .course-header {
    top: 0;
    -webkit-transform: translateX(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 99px;
    height: 26px;
    font-size: 18px;
    line-height: 26px;
}

.buy-pc .course-hours {
    /* margin: 38px auto 0px; */
    font-size: 18px;
}

.buy-pc .course-price {
    /* 去掉课时数之后加的 */
    margin: 38px 0 0px;
    width: 86px;
    font-size: 14px;
}

.buy-pc .course-sell-price {
    margin: 0 auto;
    height: 50px;
    font-size: 18px;
    letter-spacing: 3px;
}

.buy-pc .course-sell-price-num {
    font-size: 32px;
    letter-spacing: 0px;
}

.buy-pc .course-radio {
    bottom: 15px;
    width: 18px;
    height: 18px;
}

.buy-pc .end-time {
    bottom: 82px;
    height: 15px;
    font-size: 14px;
    line-height: 15px;
}

.buy-pc .end-timer-num {
    width: 20px;
}

.buy-pc .end-timer-num.m-second {
    width: 10px;
}

.buy-pc .buy-app-price {
    bottom: 30px;
    left: 25%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 36px;
    font-size: 36px;
}

.buy-pc .buy-app-price::after {
    width: 64px;
    height: 17px;
    font-size: 12px;
    line-height: 17px;
}

.buy-pc .buy-weixin {
    bottom: 15px;
    left: 50%;
    -webkit-transform: translateX(10%);
    transform: translateX(10%);
    width: 170px;
    height: 50px;
    padding-left: 40px;
    font-size: 18px;
    line-height: 50px;
    background: #57b33b url("../img/buy/weixin-logo.png") no-repeat 30px center;
    background-size: 20px 17px;
    cursor: pointer;
}

.buy-pc .gray-line-top {
    bottom: 380px;
}

.buy-pc .gray-line-bottom {
    bottom: 114px;
}

.buy-pc .buy-container-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 14px;
    height: 14px;
    background: url("../img/buy/buy-close.png") no-repeat center;
    background-size: contain;
    cursor: pointer;
}

.buy-pc .qrcode-content {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 750px;
    height: 426px;
    border-radius: 20px 20px 0 0;
}

.buy-pc .qrcode-mask-title {
    height: 35px;
    line-height: 35px;
    font-size: 28px;
    margin-top: 35px;
    background: url(../img/buy/weixin-logo-green.png) no-repeat 200px center;
    background-size: 40px 35px;
}

.buy-pc .qrcode-mask-price {
    margin: 35px auto 30px;
    font-size: 30px;
}

.buy-pc .qrcode-mask-footer {
    font-size: 18px;
}

.buy-pc .qrcode-mask-close {
    top: 40px;
    right: 40px;
    width: 14px;
    height: 14px;
}

.buy-pc .buy-level {
    display: none;
}

.buy-pc .user-agreement-container {
    bottom: 0.7rem;
}

.buy-pc .course-on-mouths {
    font-size: 16px;
    font-weight: 200;
}

/* 套餐未加载出来的时候显示 loading */

.buy-loading-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 50;
    display: none;
}

.loading-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    width: 2.36rem;
    height: 2.36rem;
    color: #333;
    border-radius: 0.15rem;
    background: #f5f5f5;
}

.pad-box .loading-content {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.1rem;
}

/* .m-load2 {
    width: 0.36rem;
    height: 0.36rem;
} */

/** 加载动画的静态样式 **/

/* .m-load2 {
    position: absolute;
    left: 50%;
    top: 20%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.m-load2 .line {
    position: absolute;
    top: 30%;
    left: 50%;
    width: 100%;
    height: 100%;
}

.m-load2 .line div {
    position: absolute;
    width: 0.05rem;
    height: 0.84rem;
}

.pad-box .m-load2 .line div {
    position: absolute;
    width: 0.03rem;
    height: 0.36rem;
}

.m-load2 .line div:before, .m-load2 .line div:after {
    content: "";
    display: block;
    height: 50%;
    background: #333;
    border-radius: 5px;
}

.m-load2 .line div:nth-child(2) {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}

.m-load2 .line div:nth-child(3) {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
}

.m-load2 .line div:nth-child(4) {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.m-load2 .line div:nth-child(5) {
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg);
}

.m-load2 .line div:nth-child(6) {
    -webkit-transform: rotate(150deg);
    transform: rotate(150deg);
}

.m-load2 .circlebg {
    position: absolute;
    left: 10%;
    top: 115%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 0.42rem;
    height: 0.42rem;
    background: #f5f5f5;
    border-radius: 50%;
}

.pad-box .m-load2 .circlebg {
    left: 5%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 0.18rem;
    height: 0.18rem;
} */

/** 加载动画 **/

@keyframes load {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes load {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.m-load2 .line div:nth-child(1):before {
    animation: load 1.2s linear 0s infinite;
    -webkit-animation: load 1.2s linear 0s infinite;
}

.m-load2 .line div:nth-child(2):before {
    animation: load 1.2s linear 0.1s infinite;
    -webkit-animation: load 1.2s linear 0.1s infinite;
}

.m-load2 .line div:nth-child(3):before {
    animation: load 1.2s linear 0.2s infinite;
    -webkit-animation: load 1.2s linear 0.2s infinite;
}

.m-load2 .line div:nth-child(4):before {
    animation: load 1.2s linear 0.3s infinite;
    -webkit-animation: load 1.2s linear 0.3s infinite;
}

.m-load2 .line div:nth-child(5):before {
    animation: load 1.2s linear 0.4s infinite;
    -webkit-animation: load 1.2s linear 0.4s infinite;
}

.m-load2 .line div:nth-child(6):before {
    animation: load 1.2s linear 0.5s infinite;
    -webkit-animation: load 1.2s linear 0.5s infinite;
}

.m-load2 .line div:nth-child(1):after {
    animation: load 1.2s linear 0.6s infinite;
    -webkit-animation: load 1.2s linear 0.6s infinite;
}

.m-load2 .line div:nth-child(2):after {
    animation: load 1.2s linear 0.7s infinite;
    -webkit-animation: load 1.2s linear 0.7s infinite;
}

.m-load2 .line div:nth-child(3):after {
    animation: load 1.2s linear 0.8s infinite;
    -webkit-animation: load 1.2s linear 0.8s infinite;
}

.m-load2 .line div:nth-child(4):after {
    animation: load 1.2s linear 0.9s infinite;
    -webkit-animation: load 1.2s linear 0.9s infinite;
}

.m-load2 .line div:nth-child(5):after {
    animation: load 1.2s linear 1s infinite;
    -webkit-animation: load 1.2s linear 1s infinite;
}

.m-load2 .line div:nth-child(6):after {
    animation: load 1.2s linear 1.1s infinite;
    -webkit-animation: load 1.2s linear 1.1s infinite;
}

.loading-text {
    position: absolute;
    bottom: 0.3rem;
    width: 100%;
    height: 0.3rem;
    font-size: 0.3rem;
    color: #333;
    text-align: center;
}

.pad-box .loading-text {
    height: 0.2rem;
    font-size: 0.2rem;
}


/* course-unit、buy-container、 */