html, body, p, h1, h2 { margin: 0; padding: 0; } ul, li { list-style: none; margin: 0; padding: 0; } button { border: none; background: none; } table { border-collapse: collapse; text-align: center; vertical-align:middle} td,th{text-align:center;vertical-align:middle} * { box-sizing: border-box; } .w { max-width: 1200px; margin: 0 auto; } .price-content{ padding-top:94px; } .price-header { height: 200px; background: no-repeat; background-size: 100% 100%; } .info { overflow: hidden; padding-left: 20px; } .info-title { margin: 59px 0 12px 0; font-size: 32px; color: #fff; } .info-summary { color: #fff; font-size: 18px; } .price-nav { text-align: center; } .price-nav ul { display: inline-block; } .price-nav li { display: inline-block; height: 70px; line-height: 70px; width: 110px; text-align: center; font-size: 16px; color: #3f4354; margin-right: 50px; } .price-nav li a{display:block;} .price-nav .active { position: relative; } .price-nav .active:after { display: block; content: ''; height: 3px; width: 100%; background: #00a0e8; border-radius: 1.5px; } .menu { height: 384px; padding-top: 81px; padding-left: 103px; } .menu .img { width: 100px; height: 100px; margin: 0 auto 26px; } .menu .img img { width: 100%; height: 100%; } .menu .menu-type { font-size: 18px; color: #3f4354; margin-bottom: 12px; } .menu .menu-info { font-size: 14px; color: #878a9a; } .menu ul { height: 100%; } .menu li { display: block; float: left; width: 154px; text-align: center; margin-left: 126px; } .menu li:first-child { margin-left: 0 !important; } .product { background: #f6f7fa; } .product .content { padding: 70px 100px; } .product .content-title { text-align: center; font-size: 32px; color: #3f4354; margin-bottom: 39px; } .product .t-border { border-left: 1px solid #e7e6e9; border-right: 1px solid #e7e6e9; } .product table { background-color: white; text-align: center; } .product th { background: #789bc3; font-size: 14px; color: #ffffff; } .product td { font-size: 14px; color: #3f4354; } .product th, .product td { height: 40px; } .product td { border: 1px solid #e7e6e9; } .product .link { display: block; margin-top: 40px; text-align: center; font-size: 14px; color: #4facfe; } .price-set-price{ font-size: 22px; } .price-max-users{ color: #4facfe; font-size: 26px; } .price-max-users-text{ color: #878a9a; } /*.reduce{ display: inline-block; width: 40px; height: 40px; border: 1px solid #e5e5e9; line-height: 40px; text-align: center; font-weight: bold; cursor: pointer; }*/ .reduce { display: inline-block; border: 1px solid #e5e5e9; width: 40px; height: 40px; color: #ccc; transition: color .25s; position: absolute; cursor:pointer; } .reduce::before{ content: ''; position: absolute; left: 50%; top: 50%; width: 20px; margin-left: -9px; margin-top: 1px; border-top: 2px solid; color: #3f4354; } .add { display: inline-block; border: 1px solid #e5e5e9; width: 40px; height: 40px; color: #ccc; transition: color .25s; position: absolute; cursor:pointer; } .add::before{ content: ''; position: absolute; left: 50%; top: 50%; width: 20px; margin-left: -9px; margin-top: 1px; border-top: 2px solid; color: #3f4354; } .add::after { content: ''; position: absolute; left: 50%; top: 56%; height: 20px; margin-left: 0px; margin-top: -11px; border-left: 2px solid; color: #3f4354; } .price { padding: 80px 100px; overflow: hidden; } .price .price-title { font-size: 32px; color: #3f4354; text-align: center; margin-bottom: 40px; } .price .price-left { display: none; width: 355px; margin-right: 71px; float: left; } .price .price-right { width: 1000px; height: 603px; float: left; border: 1px solid #e7e6e9; padding: 20px; } .price .price-right .price-top { padding-top:30px; padding-left: 10px; } .price .price-right .text { font-size: 18px; color: #3f4354; margin-bottom: 15px; } .price .price-right .number { height: 40px; width: 238px; padding: 0 15px; font-size: 18px; color: #3f4354; border: 1px solid #c0c2cc; border-radius: 2px; margin: 0 0px 22px 0; } .price .price-right .label { font-size: 14px; color: #878a9a; } .price .price-right .check-box { height: 40px; margin-bottom: 30px; } .price .price-right .check-box span { display: inline-block; height: 40px; width: 80px; line-height: 40px; text-align: center; border: 1px solid #c0c2cc; border-radius: 2px 0 0 2px; font-size: 18px; color: #3f4354; } .price .price-right .check-box .active { background: #f0f8ff; border: 1px solid #4facfe !important; } .price .price-right .check-box .border-l-none { /*border-left: none; */ } .price .price-right .check-box .border-r-none { /*border-left: none; */ } .price .price-right .submit { height: 40px; line-height: 40px; background: none; color: #4facfe; font-size: 16px; width: 240px; text-align: center; border: 1px solid #4facfe; margin-bottom: 40px; } .price .price-right .computed { width: 960px; height: 232px; background: #f6f7fa; padding: 16px 22px; } .price .price-right .computed-label { font-size: 18px; color: #3f4354; } .price .price-right .computed-label label { display: inline-block; height: 37px; line-height: 25px; vertical-align: middle; padding-right: 8px; } .price .price-right .computed-label strong { font-size: 26px; color: #4facfe; line-height: 37px; } .price .price-right .computed-label span { font-size: 18px; color: #4facfe; } .price .price-right .text-label { margin-top: 20px; font-size: 14px; color: #878a9a; } .price .price-right .submit-buy { background: #4facfe; border-radius: 2px; width: 220px; height: 40px; font-size: 14px; color: #ffffff; margin-top: 12px; line-height: 40px; text-align: center; cursor: pointer; } .price td { border: 1px solid #e7e6e9; height: 40px; font-size: 14px; color: #3f4354; } .price th { height: 80px; background: #789bc3; font-size: 14px; color: #ffffff; } .price .th-b { border-right: 1px solid #fff; } .service { background: #f6f7fa; } .service-box { text-align: center; padding: 80px 41px; } .service-box h2 { font-size: 32px; color: #3f4354; text-align: center; margin-bottom: 20px; } .service-box .service-info { font-size: 22px; color: #3f4354; margin-bottom: 50px; } .service-box ul { height: 480px; } .service-box li { position: relative; width: 280px; padding: 26px 30px; border: 1px solid #e7e6e9; height: 480px; float: left; background: #fff; margin-right: 40px; text-align: left; } .service-box .mr0 { margin-right: 0 !important; } .service-box .service-middle { width: 478px !important; } .service-box .service-title { font-size: 22px; color: #3f4354; padding-bottom: 26px; border-bottom: 1px solid #e7e6e9; } .service-box .service-right, .service-box .service-left { width: 180px; float: left; } .service-box .service-right { margin-left: 55px; } .service-box .service-content { padding-top: 27px; font-size: 14px; color: #3f4354; } .service-box .service-content p { margin-bottom: 17px; } .service-box .service-content strong { font-size: 16px; color: #3f4354; } .service-box .tr { text-align: right; } .service-box .service-footer { position: absolute; bottom: 26px; font-size: 14px; color: #3f4354; } .service-box .service-link { color: #4facfe; } .price-li-list{ cursor: pointer; }