.purchase-main { padding: 40px 0 64px; }
.purchase-heading { margin-bottom: 40px; text-align: center; }
.purchase-heading h1 { height: 40px; color: #333; font-size: 30px; line-height: 40px; }
.purchase-heading p { margin-top: 12px; color: #999; font-size: 14px; line-height: 24px; }
.edition-switch { width: 296px; height: 56px; margin: 0 auto; background: #f5f5f5; border-radius: 30px; }
.edition-switch a { float: left; display: block; width: 148px; height: 56px; color: #999; font-size: 16px; line-height: 56px; text-align: center; border-radius: 30px; transition: color .2s, background-color .2s, box-shadow .2s; }
.edition-switch a.active { background: #fff; color: #f88476; box-shadow: 0 2px 8px #eee; }
.price-list { width: 674px; height: 196px; margin: 48px auto 0; }
.price-card { position: relative; float: left; display: block; width: 180px; height: 192px; margin-right: 32px; background: #fff; border: 2px solid #fff; text-align: center; box-shadow: 0 8px 26px #faf5f2; transition: border-color .2s, box-shadow .2s, transform .2s; }
.price-card.last { margin-right: 0; }
.price-card.selected { border-color: #f88476; }
.price-card:hover { box-shadow: 0 10px 30px #f5e8e2; transform: translateY(-3px); }
.price-title { display: block; margin-top: 30px; color: #333; font-size: 16px; line-height: 24px; }
.price-title b { font-weight: normal; }
.price-number { display: block; margin-top: 16px; color: #f88476; line-height: 42px; }
.price-number small { font-size: 22px; }
.price-number b { font-size: 34px; font-weight: normal; }
.price-note { display: block; margin-top: 14px; color: #aaa; font-size: 12px; line-height: 20px; }
.recommend-ribbon { position: absolute; left: -2px; top: -18px; height: 30px; padding: 0 10px; background: #fa765e; color: #fff; font-size: 14px; line-height: 30px; border-radius: 14px; }
.payment { height: 158px; margin-top: 48px; }
.benefits { float: left; width: 310px; height: 158px; margin-left: 78px; border-right: 1px solid #f3f3f3; }
.benefits h3 { margin: 10px 0 6px; font-size: 14px; line-height: 24px; }
.benefits h3 span { color: #f88476; }
.benefits li { float: left; width: 130px; padding-left: 24px; color: #999; font-size: 12px; line-height: 40px; }
.benefits li:before { content: "✓"; display: inline-block; width: 16px; height: 16px; margin: 0 6px 0 -22px; background: #f9a197; color: #fff; line-height: 16px; text-align: center; vertical-align: 2px; border-radius: 8px; }
.qr-code { position: relative; float: left; width: 150px; text-align: center; }
.qr-code img { display: block; width: 110px; height: 110px; margin: 4px 20px 0; }
.qr-disabled { position: absolute; left: 20px; top: 4px; z-index: 2; display: block; width: 110px; height: 110px; background: #fff; background: rgba(255, 255, 255, .94); color: #777; font-size: 14px; line-height: 110px; text-align: center; }
.qr-code p { margin-top: 4px; color: #999; font-size: 12px; line-height: 24px; }
.pay-icon { display: inline-block; width: 16px; height: 16px; margin-right: 3px; color: #fff; line-height: 16px; text-align: center; border-radius: 3px; }
.wechat { background: #62c886; }
.alipay { background: #4aa9df; }
.payment-info { float: left; width: 280px; }
.payment-info h3 { margin-top: 8px; color: #999; font-size: 14px; line-height: 24px; font-weight: normal; }
.payment-price { height: 38px; margin-top: 2px; line-height: 38px; }
.payment-price > span { color: #f88476; font-size: 20px; }
.payment-price b { font-size: 26px; font-weight: normal; }
.payment-price i { display: inline-block; height: 24px; margin-left: 8px; padding: 0 10px; background: #fa765e; color: #fff; font-size: 12px; font-style: normal; line-height: 24px; vertical-align: 4px; border-radius: 12px; }
.terms { margin-top: 10px; color: #aaa; font-size: 12px; line-height: 24px; }
.comparison { position: relative; margin-top: 56px; }
.comparison table { width: 900px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.comparison th, .comparison td { width: 180px; height: 58px; border: 0; color: #666; font-size: 14px; line-height: 24px; text-align: center; font-weight: normal; }
.comparison th { color: #333; font-weight: bold; }
.comparison tbody tr.odd { background: #f6f6f6; }
.comparison .lifetime-col { background: #fffdf5; color: #e6b94f; border-left: 1px solid #e8ca78; border-right: 1px solid #e8ca78; }
.comparison thead .lifetime-col { border-top: 1px solid #e8ca78; }
.comparison tbody tr.last .lifetime-col { border-bottom: 1px solid #e8ca78; }
.table-recommend { position: absolute; right: 57px; top: -18px; width: 66px; height: 32px; background: #edbb4f; color: #fff; font-size: 16px; line-height: 32px; text-align: center; border-radius: 14px; }
.yes { color: #55c995; font-size: 24px; font-weight: bold; }
.no { color: #f49b90; font-size: 24px; }
.lifetime-col .yes { color: #e6b94f; }
.purchase-footer { height: 88px; background: #fff8f4; color: #999; font-size: 14px; line-height: 88px; text-align: center; }
.purchase-footer span { margin: 0 20px; color: #e8c9c0; }