﻿@charset "utf-8";
body {background:#f5f5f7}
.priceBox {padding: 0 1rem;}
.gn-banner {height:200px;margin:0 auto;position:relative}

.tableBody .table-cell {border-right:solid #f0f0f5 1px}
.table-title .table-cell {height:139px;background:#fff;float:left;text-align:center}
.table-title .table-classic {position:relative}
.table-title .table-classic-area {width:116px;height:82px;position:absolute;left:50%;top:50%;margin-left:-58px;margin-top:-42px}
.table-classic-top,.table-classic-bottom {width:auto;height:auto;position:absolute;z-index:1;font-size:16px;font-family:"微软雅黑";color:#333}
.table-classic-top {top:0;right:0}
.table-classic-bottom {bottom:0;left:0}
.table-classic-area .f-tri {position:absolute;left:0;top:0;z-index:0;border-right:solid transparent 58px;border-left:solid #e3e3e6 58px;border-top:solid transparent 41px;border-bottom:solid #e3e3e6 41px}
.table-classic-area .f-whiteTri {top:1px;border-bottom-color:#fff;border-left-color:#fff}

.website {background:0}

/* 合并的按钮样式 */
.btn {font-size:14px;display:block;border-radius:19px;color:#fff;text-align:center;text-decoration:none;}
.btn-free {background-color:#9bbed2}
.btn-start {background-color:#21d5ee}
.btn-stand {background-color:#35cf88}
.btn-pro {background-color:#34abf9}
.btn-crown {background-color:#f4c434}

.gn-tab {height:165px}
.gn-wrap {width:100%;margin:0 auto;height:76px;padding-top:30px;color:#333;text-decoration:none}
.gn-tab .gn-tmpWrap {margin:auto}
.productIntroduce {text-align:center;font-size:36px;font-weight:700;color:#333;margin-top:18px;margin-bottom:18px}
.slogan {text-align:center;font-size:16px;color:#929293}
.gn-tab .gn-tabItem {width:128px;height:36px;line-height:36px;border:1px solid #eee;text-align:center;background-color:#fff;font-size:16px;border-radius:28px;color:#333;margin-top:16px;cursor:pointer}
.gn-tab .gn-tabLine {position:absolute;background:#2f82ff;width:90px;height:4px;top:71px;display:block;left:0}
.gn-tab .gn-tabItem-active {border:1px solid #2f82ff;color:#fff;background-color:#2f82ff}
.website {left:0;width:100%;height:auto;margin-bottom:80px}
.abstract,.tableDiv {width:100%;margin:0 auto;padding:0;float:none}
.abstract {height:auto;margin-top:30px;float:none;display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;min-width:815px;}
.tableDiv {height:auto;margin-top:65px;background:#fff;position:relative;}

.plan-card {height:auto;display:inline-block;background-color:#fff;float:left;border-radius:7px;overflow:hidden;flex:1 1 calc(20% - 1rem);box-shadow:0 0 17px 3px rgba(207,221,213,0.35);-webkit-transition:all .5s;}
.plan-card:hover {box-shadow:0 0 15px 2px rgba(217,223,231,.8);-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0);}

.background {width:100%;height:155px;vertical-align:middle;color:#fff;text-align:center}
.background .title {font-size:20px;padding-top:20px;}
.background .btn,.background .price-txt {font-size:14px;}
.background .price-num {font-size:22px;}
.background .price-txt {margin:10px 0}
.background .price-btn {width:133px;height:30px;line-height:30px;margin:0 auto;border:1px solid rgba(255,255,255,0.3);border-radius:19px}
.info {width:100%;height:331px;font-size:16px;position:relative;text-align:center;color:#333}
.info .desc {padding-top:30px;margin:0 auto;display:inline-block;text-align:left}
.info .desc span {display:block;padding-bottom:20px}
.info .btn {display:block;width:124px;height:38px;line-height:38px;text-align:center;margin:0 auto;bottom:60px;position:absolute;left:0;right:0;color:#fff;border-radius:19px}
.tableDiv .table-title {width:initial;height:140px}
.tableDiv .table-cell {border-right:solid #f0f0f5 1px;border-bottom:solid #f0f0f5 1px;font-size:16px;color:#333}

.tableDiv .version {line-height:140px}
.tableDiv .version .table-cell-free,.tableDiv .version .table-cell-pro,.tableDiv .version .table-cell-start,.tableDiv .version .table-cell-stand {height:285px}
.tableDiv .version .table-cell-crown {height:285px;border-top-right-radius:7px}
.tableDiv .table-content {height:auto;text-align:center;min-width: 815px;}

.tableBody-block .table-left {width:82px;float:left;font-size:16px;color:#333;}
.tableBody-block .table-right {float:left;flex:1;}
.table-right .table-right-row {float:left;width:100%;display:flex;}
.table-right .table-right-row .option {float:left;width:202px;font-size:16px;color:#333;height:60px;line-height:60px;flex-shrink:0;}
.table-right .table-right-row .result {float:left;height:60px;line-height:60px;font-size:16px;flex:1;}
.tableDiv .classDesc {line-height:normal;width:100%;height:100%}
.tableDiv .vNode {display:inline-block;zoom:1;height:100%;vertical-align:middle}
.tableDiv .smallDescWrap {display:inline-block;vertical-align:middle;margin:0 auto}
.tableDiv .smallDesc {color:#666;font-size:14px;}
.table-webSpace {background:#fcfcfc;}
.table-interact {background:#fcfcfc;}

.version-hide{position:absolute;min-width:735px;left:80px;top:0;right:0px;bottom:0;padding:0;display:flex;}
.version-hide .item-option{flex:1;}
.version-hide .item{flex:1;padding:40px 0;position:relative;}
.version-hide .item:before{position:absolute;content:"";left:0;right:0;top:0;bottom:0;border:4px solid #098df9;border-radius:16px;z-index:19;display:none;}
.version-hide .item:hover:before{display:block;box-shadow:0 5px 40px 0 rgba(0,0,0,.2);}
.version-item:last-child{border-radius:0 0 10px 10px}

.website .info .btn-free {background-color:#9bbed2}
.website .info .btn-start {background-color:#21d5ee}
.website .info .btn-stand {background-color:#35cf88}
.website .info .btn-pro {background-color:#34abf9}
.website .info .btn-crown {background-color:#f4c434}
.website .start .background {position:relative;background:url(../images/price/start.png) center center no-repeat}
.website .free .background {background:url(../images/price/free.png) center center no-repeat}
.website .stand .background {background:url(../images/price/stand.png) center center no-repeat}
.website .crown .background {background:url(../images/price/crown.png) center center no-repeat}
.website .professional .background {background:url(../images/price/pro.png) center center no-repeat}
.flex-center {display:inline-flex;align-items: center;justify-content: center;}
.website .start .background .tip {width:53px;height:53px;position:absolute;top:0;right:0;background-image:url(../images/price/hot.png);background-repeat:no-repeat}
.website .tableDiv .version .table-cell-free {border-top:4px solid #9bbed2}
.website .tableDiv .version .table-cell-start {border-top:4px solid #21d5ee}
.website .tableDiv .version .table-cell-stand {border-top:4px solid #35cf88}
.website .tableDiv .version .table-cell-pro {border-top:4px solid #34abf9}
.website .tableDiv .version .table-cell-crown {border-top:4px solid #f4c434}

.icon-no {width:16px;height:16px;display:block;background-repeat:no-repeat;margin:22px auto;background-image:url("../images/price/icon-wrong.png")}
.icon-yes {width:24px;height:16px;display:block;background-repeat:no-repeat;margin:22px auto;background-image:url("../images/price/icon-right.png")}
.f-dot {display:inline-block;width:3px;height:3px;background:#333;vertical-align:middle;margin-right:10px}
.result mark {border-radius:800px;background-color:rgba(0,0,0,0);display:inline-block;line-height:2;padding:0 20px;color:#30cb63;border:#30cb63 solid 1px;background-color:rgba(51,204,102,.08);}

.website .free,.website .start,.website .stand,.website .professional,.website .crown {overflow: hidden;}
.website .professional .background .tip {right: -1px;}
.table-title {display:flex;min-width: 815px;}
.table-title .table-cell {flex:1;}
.table-title .table-cell-mid {flex:1;padding-left:83px;}
.tableBody-block {display:flex;}
.tableBody-block .table-right {display:flex;flex-direction:column;}
.table-right-row {display:flex;}
.table-right-row .option {flex:1;}
.table-right-row .result {flex:1;}

@media only screen and (max-width:1000px){
    .info {font-size:14px;}
    .priceBox {overflow-x:auto;}
    .table-right-row .option {width:150px;}
    .plan-card .info{font-size:12px;}
    .background .title {font-size:16px;}
    .table-right .table-right-row .option {font-size:14px;}
    .table-right .table-right-row .result {font-size:14px;}
}