* {
    padding: 0;
    margin: 0;
    box-sizing: border-box
}

[v-cloak] {
    display: none
}

.clear {
    clear: both
}

body {
    font-size: 12px;
    background: #fff;
    font-family: "Microsoft YaHei", Arial, serif;
}

html, body {
    width: 100%;
}

img {
    border: none
}

.icon-error {
    display: inline-block;
    width: 30px;
    height: 50px;
    background: url(./sprite.png) -265px 17px no-repeat
}

.icon-check {
    display: inline-block;
    width: 30px;
    height: 50px;
    background: url(./sprite.png) -225px 17px no-repeat
}

.tab-main {
    text-align: center;
    padding-top: 40px
}

.tab-main .tab-item {
    display: inline-block;
    font-size: 16px;
    background: #fff;
    width: 140px;
    height: 38px;
    line-height: 38px;
    border-radius: 20px;
    margin-right: 65px;
    cursor: pointer
}

.tab-main .tab-item:last-child {
    margin-right: 0
}

.tab-main .active {
    background: #496bed;
    color: #fff
}

.table-main {
    padding-top: 40px;
    margin: 0 auto 0;
    text-align: center;
    font-size: 18px;
    color: #595959;
    overflow-x: auto;
}

.table-main table {
    margin: 0 auto 0;
    border-right: 1px solid #e8e8e8
}

.table-main .th {
    height: 186px;
    border-bottom: 1px solid #e2e2e2;
    border-right: 1px solid #e2e2e2;
    border-left: 1px solid #e2e2e2;
    background: #fff;
    top: 0
}

.table-main .left-bottom {
    border-bottom: 2px solid #a6b9d3;
    padding-bottom: 4px;
    width: 376px
}

.table-main .th .left {
    border-top: 4px solid #a6b9d3;
    width: 378px
}

.table-main .th .item-all {
    position: relative
}

.table-main .th .item-all-tmp {
    overflow: hidden;
    height: 187px;
    float: left;
    width: 100%
}

.table-main .th .left .left-top {
    height: 138px;
    line-height: 138px;
    border-bottom: 1px solid #e2e2e2
}

.table-main .th .bottom {
    position: relative
}

.table-main .th .bottom .td-left,
.table-main .th .bottom .td-right {
    float: left;
    height: 43px;
    line-height: 48px;
    border: none
}

.table-main .th .bottom .tip {
    position: absolute;
    top: 11px;
    left: 130px
}

.table-main .th .td-left {
    width: 115px
}

.table-main .th .td-right {
    width: 256px
}

.table-main .th .th-td {
    height: 187px;
    overflow: hidden
}

.table-main .th .photo {
    width: 100%;
    height: 110px
}

.table-main .th .photo-0 {
    background: url(./0.png) no-repeat center center
}

.table-main .th .photo-1 {
    background: url(./1.png) no-repeat center center
}

.table-main .th .photo-2 {
    background: url(./2.png) no-repeat center center
}

.table-main .th .photo-3 {
    background: url(./3.png) no-repeat center center
}

.table-main .th .photo-4 {
    background: url(./4.png) no-repeat center center;
    border-radius: 18px
}

.table-main .th .photo-5 {
    background: url(./5.png) no-repeat center center;
    border-radius: 18px
}

.table-main .th .photo-mall4 {
    background: url(./mall4.png) no-repeat center center;
    border-radius: 18px
}

.table-main .th .photo-6 {
    background: url(./mall6.png) no-repeat center center;
    border-radius: 18px
}

.table-main .th .th-td-0 {
    border-top: 4px solid #88a2c9
}

.table-main .th .th-td-bottom-0 {
    border-bottom: 2px solid #88a2c9
}

.table-main .th .price-0 {
    color: #88a2c9
}

.table-main .th .btn-0 {
    background: linear-gradient(0deg, #88a2c9, #a6b9d3)
}

.table-main .th .th-td-1 {
    border-top: 4px solid #23d39b
}

.table-main .th .th-td-bottom-1 {
    border-bottom: 2px solid #23d39b
}

.table-main .th .price-1 {
    color: #23d39b
}

.table-main .th .btn-1 {
    background: linear-gradient(0deg, #30dacb, #1dd59a)
}

.table-main .th .th-td-2 {
    border-top: 4px solid #12b4fe
}

.table-main .th .th-td-bottom-2 {
    border-bottom: 2px solid #12b4fe
}

.table-main .th .price-2 {
    color: #12b4fe
}

.table-main .th .btn-2 {
    background: linear-gradient(0deg, #12c1fe, #0da3fe)
}

.table-main .th .th-td-3 {
    border-top: 4px solid #a792ff
}

.table-main .th .th-td-bottom-3 {
    border-bottom: 2px solid #a792ff
}

.table-main .th .price-3 {
    color: #a792ff
}

.table-main .th .btn-3 {
    background: linear-gradient(0deg, #aba4ff, #a28cff)
}

.table-main .th .th-td-4 {
    border-top: 4px solid #ffbe0a
}

.table-main .th .th-td-bottom-4 {
    border-bottom: 2px solid #ffbe0a
}

.table-main .th .price-4 {
    color: #ffbe0a
}

.table-main .th .btn-4 {
    background: linear-gradient(0deg, #ffca04, #ffba13)
}

.table-main .th .th-td-5 {
    border-top: 4px solid #fd589c
}

.table-main .th .th-td-bottom-5 {
    border-bottom: 2px solid #fd589c
}

.table-main .th .price-5 {
    color: #fd589c
}

.table-main .th .btn-5 {
    background: linear-gradient(0deg, rgba(253, 90, 157, 1), rgba(253, 135, 182, 1))
}

.table-main .th .th-td-mall4 {
    border-top: 4px solid #fd973d
}

.table-main .th .th-td-bottom-mall4 {
    border-bottom: 2px solid #fd973d
}

.table-main .th .price-mall4 {
    color: #fd973d
}

.table-main .th .btn-mall4 {
    background: linear-gradient(0deg, rgba(253, 151, 61, 1), rgba(254, 179, 68, 1))
}

.table-main .th .th-td-6 {
    border-top: 4px solid #ff5e6e
}

.table-main .th .th-td-bottom-6 {
    border-bottom: 2px solid #ff5e6e
}

.table-main .th .price-6 {
    color: #ff5e6e
}

.table-main .th .btn-6 {
    background: linear-gradient(0deg, rgba(255, 94, 110, 1), rgba(255, 136, 103, 1))
}

.table-main .th .th-td-up .version {
    padding-top: 20px
}

.table-main .th .version {
    height: 70px;
    vertical-align: bottom;
    padding-bottom: 10px;
    padding-top: 30px
}

.table-main .th .price {
    font-size: 14px
}

.table-main .th .btn {
    margin: 10px auto 0;
    width: 118px;
    height: 35px;
    line-height: 35px;
    border-radius: 18px;
    color: #fff;
    cursor: pointer
}

.table-main .content {
    border-left: 1px solid #e2e2e2;
    border-right: 1px solid #e2e2e2;
    font-size: 16px;
    background: #fff;
    margin-bottom: 5px
}

.table-main .content .td-left {
    width: 135px;
    clear: both;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.table-main .content .td-value {
    width: 209px
}

.table-main td {
    vertical-align: middle;
    text-align: center;
    height: 50px;
    border-left: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2
}

.table-main .content .td-value .sp {
    font-size: 12px;
    color: #b5b5b5
}

.table-main .show-more {
    margin: 15px auto;
    width: 475px;
    height: 35px;
    background: #7db0ff;
    border-radius: 18px;
    text-align: center;
    line-height: 35px;
    cursor: pointer;
    color: #fff;
    font-size: 14px
}

.table-style-mall {
    width: auto !important
}

.table-style-mall .item-all-tmp,
.table-style-mall .th .th-td,
.table-style-mall tr td {
    width: 144px !important
}

.table-style-mall .th .td-right {
    width: 170px !important
}

.table-style-mall .th .bottom .tip {
    left: 112px !important
}

.table-style-mall .left-bottom {
    width: 286px !important
}

.content-tips {
    background: url(./mark.png) 0 no-repeat;
    width: 16px;
    height: 20px;
    margin-bottom: -5px;
    display: inline-block;
    position: relative;
    cursor: pointer
}

.content-tips .tips-des {
    display: none;
    position: absolute;
    background-color: #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, .3);
    border-radius: 4px;
    padding: 0 10px;
    height: 28px;
    line-height: 28px;
    left: 5px;
    white-space: nowrap;
    top: 25px;
    color: #ff9400;
    z-index: 9999
}

.content-tips:hover .tips-des {
    display: inline-block
}

.fontSize12 {
    font-size: 12px
}