* {
    box-sizing: border-box
}

#header,
.footer {
    display: none
}

body {
    font-family: 'spartan';
    height: 100vh;
    display: flex;
    flex-direction: column
}

body main {
    flex: 1
}

body.flow {
    height: auto;
    display: block
}
body.bfpdf .purchase{
  box-sizing: border-box;
  padding: 130px 0 0 0;
  height: 780px;
  background: url(../images/pdf-purchase/bf/bf_bg.jpg) no-repeat center / cover;
  width: 100% !important;
  max-width: 1920px;
}
.bfpdf main.purchase .banner_box li{
  background: #fff;
}
.bfpdf main.purchase .table li:nth-of-type(2n){
  background: rgba(255, 255, 255, .2);
}
.bfpdf main.purchase .table li p{
  color: #fff;
}
.bfpdf main.purchase .table li p:nth-of-type(2) i.true{
  width: 20px;
  height: 20px;
  background: url(../images/pdf-purchase/bf/bf_yes.png) no-repeat center / cover;
}
.bfpdf main.purchase .table li p:nth-of-type(2) i.false{
  width: 20px;
  height: 20px;
  background: url(../images/pdf-purchase/bf/bf_no.png) no-repeat center / cover;
}
.bfpdf main.purchase .table li p:nth-of-type(3) i.true{
  width: 20px;
  height: 20px;
  background: url(../images/pdf-purchase/bf/yellow_yes.png) no-repeat center / cover;
}
.bfpdf main.purchase .table li p:nth-of-type(3){
  color: #FFDB45;
}
.bfpdf main.purchase .banner_box li ._billed{
  min-height: 24px;
}
.bfpdf main.purchase .banner_box li ._price.trial{
  margin-bottom: 40px;
}
.wrapper {
    width: 900px !important
}

._btn {
    display: block;
    width: 244px;
    height: 42px;
    border: 2px solid #FFC1C1;
    padding: 0 25px;
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer
}

._btn span {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    height: 100%;
    line-height: 42px;
    font-size: 12px;
    font-weight: bold;
    color: #FF4A4A;
    text-align: center;
    transition: all 0.3s
}

._btn i {
    position: relative;
    display: block;
    width: 12px;
    height: 9px;
    background: url(../images/pdf-purchase/arrow-right.svg) no-repeat;
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.3s
}

._btn.red {
    background: #FF4A4A;
    border: none
}

._btn.red span {
    color: #fff
}

._btn.red:hover {
    justify-content: space-between
}

._btn.red:hover span {
    left: 35%;
    transition: all 0.3s
}

._btn.red:hover i {
    opacity: 1;
    transform: translateX(0);
    transition: all 0.3s
}

.loading {
    position: relative;
    text-indent: -9999px
}

.loading span,
.loading i {
    display: none
}

.loading::after {
    position: absolute;
    content: "";
    width: 27px;
    height: 29px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background: url(../images/pdf-purchase/load-icon.svg);
    animation: loading 1s 0s cubic-bezier(0.51, 0.48, 0.56, 0.54) infinite
}

@keyframes loading {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg)
    }
}

header {
    height: 100px;
    border-bottom: 1px solid #DFDFEB;
    display: flex;
    justify-content: space-between;
    align-items: center
}

header .logo {
    display: block;
    width: 117px;
    height: 32px;
    background: url(../images/pdf-purchase/logo.png) no-repeat
}

header .header_right {
    height: 30px;
    border-left: 1px solid #DFDFEB;
    padding-left: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

header .header_right p {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    color: #999999
}

header .header_right p span {
    width: 20px;
    height: 20px;
    background: #E4E3E7;
    border-radius: 50%;
    font-size: 12px;
    color: #89898B;
    font-weight: bold;
    line-height: 24px;
    text-align: center;
    margin-right: 6px
}

header .header_right p.true {
    color: #000000
}

header .header_right p.true span {
    background: url(../images/pdf-purchase/right.svg) no-repeat;
    text-indent: -9999px
}

header .header_right>span {
    width: 75px;
    border-bottom: 2px dashed #9293B1;
    margin: 0 9px
}

main.purchase h1 {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #000000;
    margin: 44px 0
}

main.purchase .banner_box {
    display: flex;
    justify-content: space-between
}

main.purchase .banner_box li {
    position: relative;
    width: 290px;
    border: 2px solid #D9D9DE;
    padding: 29px 0;
    display: flex;
    flex-direction: column;
    align-items: center
}

main.purchase .banner_box li ._time {
    font-size: 12px;
    font-weight: bold;
    color: #000000;
    margin-bottom: 9px
}

main.purchase .banner_box li ._save {
    display: block;
    width: auto;
    height: 24px;
    padding: 0 10px;
    background: #CAC9CE;
    font-size: 12px;
    font-weight: bold;
    line-height: 28px;
    color: #fff;
    text-align: center;
    margin-bottom: 28px
}

main.purchase .banner_box li ._save.red {
    background: #FF4A4A
}

main.purchase .banner_box li ._save.purple {
    background: #A9A4FF
}

main.purchase .banner_box li ._save.trial {
    opacity: 0;
    margin-bottom: 0
}

main.purchase .banner_box li ._price {
    font-size: 12px;
    font-weight: bold;
    color: #000000;
    margin-bottom: 11px
}

main.purchase .banner_box li ._price big {
    font-size: 32px;
    font-weight: bold;
    color: #000000
}

main.purchase .banner_box li ._price.trial {
    margin-bottom: 27px
}

main.purchase .banner_box li ._billed {
    font-size: 12px;
    font-weight: 500;
    padding: 0 10px;
    text-align: center;
    color: #000000;
    margin-bottom: 25px
}

main.purchase .banner_box li ._billed del {
    color: #000000;
    font-weight: 500;
    margin-left: 3px
}

main.purchase .banner_box li ._time_free {
    display: none
}

main.purchase .banner_box li.purple {
    border: 2px solid #6C63FF
}

main.purchase .banner_box li.purple ._time_free {
    position: absolute;
    display: block;
    width: 290px;
    height: 24px;
    background: #6C63FF;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    line-height: 28px;
    left: -2px;
    top: -24px
}

main.purchase .table {
    margin-top: 40px;
    margin-bottom: 54px
}

main.purchase .table li {
    height: 28px;
    padding-left: 45px;
    display: flex;
    align-items: center
}

main.purchase .table li:nth-of-type(2n) {
    background: #F8F7FF
}

main.purchase .table li:nth-of-type(1) {
    height: 67px
}

main.purchase .table li p {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: #000000;
    font-weight: 500
}

main.purchase .table li p:nth-of-type(1) {
    width: 330px;
    justify-content: left
}

main.purchase .table li p:nth-of-type(2) {
    width: 250px
}

main.purchase .table li p:nth-of-type(2) i.true {
    display: block;
    width: 11px;
    height: 9px;
    background: url(../images/pdf-purchase/black_true.svg) no-repeat
}

main.purchase .table li p:nth-of-type(2) i.false {
    display: block;
    width: 8px;
    height: 8px;
    background: url(../images/pdf-purchase/black_false.svg) no-repeat
}

main.purchase .table li p:nth-of-type(3) {
    width: 261px;
    color: #6C63FF;
    font-weight: bold
}

main.purchase .table li p:nth-of-type(3) i.true {
    display: block;
    width: 11px;
    height: 9px;
    background: url(../images/pdf-purchase/purple_true.svg) no-repeat
}

main.purchase .table li p._title {
    font-weight: bold
}

main.purchase .table li p._vip {
    position: relative
}

main.purchase .table li p._vip::before {
    content: "";
    display: block;
    position: absolute;
    width: 26px;
    height: 26px;
    background: url(../images/pdf-purchase/vip_icon.svg) no-repeat;
    left: 50%;
    top: -13px;
    transform: translateX(-50%)
}

main.purchase .table li p._vip::after {
    content: "";
    display: block;
    position: absolute;
    width: 261px;
    height: 235px;
    background: transparent linear-gradient(180deg, #6c63ff14 0%, #ffffff14 100%) 0% 0% no-repeat padding-box;
    left: 0;
    top: 0
}

footer {
    background: #F2F2F5
}

footer>ul {
    display: flex;
    align-items: center;
    justify-content: space-between
}

footer>ul li {
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

footer>ul li img {
    width: 26px;
    margin-right: 12px
}

footer>ul li p {
    font-size: 12px;
    font-weight: bold;
    color: #8E8B9D
}

footer>p {
    width: 100%;
    height: 48px;
    background: #4B4C5D;
    text-align: center;
    line-height: 48px;
    font-size: 12px;
    color: #B6B4C2
}