.wrap, .service-panel ul li .icon-panel { margin-left: auto; margin-right: auto } .fl { float: left } .fr { float: right } .wrap:before, .wrapper:before, .header:before, .service-wrap ul:before, .service-wrap ul li:before, .service-wrap ul li .img-panel:before, .service-panel:before, .service-panel ul:before, .wrap:after, .wrapper:after, .header:after, .service-wrap ul:after, .service-wrap ul li:after, .service-wrap ul li .img-panel:after, .service-panel:after, .service-panel ul:after { content: ""; display: table } .wrap:after, .wrapper:after, .header:after, .service-wrap ul:after, .service-wrap ul li:after, .service-wrap ul li .img-panel:after, .service-panel:after, .service-panel ul:after { clear: both } main, article, aside, details, figcaption, figure, footer, header, nav, section, summary { display: block } audio, canvas, video { display: inline-block } audio:not([controls]) { display: none; height: 0 } [hidden], template { display: none } html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100% } html, button, input, select, textarea { font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif } body { margin: 0 } a { background: transparent } a:hover, a:active { outline: 0 } abbr[title] { border-bottom: 1px dotted } b, strong { font-weight: bold } dfn { font-style: italic } mark { background: #ff0; color: #000 } code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em } pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word } q { quotes: "\201C""\201D""\2018""\2019" } q:before, q:after { content: ''; content: none } small { font-size: 80% } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline } sup { top: -0.5em } sub { bottom: -0.25em } img { border: 0 } svg:not(:root) { overflow: hidden } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em } legend { border: 0; padding: 0; white-space: normal } button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; vertical-align: baseline; padding: 0; border: none } button:focus, input:focus, select:focus, textarea:focus { outline: none } button, input { line-height: normal } button, select { text-transform: none } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer } button[disabled], input[disabled] { cursor: default } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0 } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0 } textarea { overflow: auto; vertical-align: top } optgroup { font-weight: bold } html { -webkit-overflow-scrolling: touch; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100% } body { font-size: 12px; line-height: 1.5; color: #2b2a28; background-color: #fff; min-height: 100vh } body, button, input, select, textarea { font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif } img { vertical-align: middle } textarea { resize: vertical } h1, h2, h3, h4, h5, h6, p, figure, form { margin: 0 } ul, ol, li, dl, dd { margin: 0; padding: 0 } ul, ol { list-style: none outside none } h1, h2, h3 { line-height: 2 } h1 { font-size: 18px } h2 { font-size: 15.6px } h3 { font-size: 14.04px } h4 { font-size: 12px } h5, h6 { font-size: 10.2px; text-transform: uppercase } a { text-decoration: none; color: #333 } a:hover { color: #2a88c5 } input:-moz-placeholder, textarea:-moz-placeholder { color: #999 } input::-moz-placeholder, textarea::-moz-placeholder { color: #999 } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #999 } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #999 } input, textarea, button { -webkit-appearance: none; border-radius: 0; background: transparent } html { font-size: 75px } a, a:hover, a:active, a:visited, a:focus { text-decoration: none } .clear { display: block; clear: both; overflow: hidden } .wrap { position: relative; min-width: 320px; max-width: 750px } .wrapper { width: 100%; position: relative } .bg-white { background: #fff } .none { display: none } *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } @font-face { font-family: 'FsL'; src: url("../fonts/FuturaStd-Light.otf") format("opentype"); font-display: swap } @font-face { font-family: 'NDT'; src: url("../fonts/NeutraDisplayTitling.otf") format("opentype"); font-display: swap } @font-face { font-family: 'FT'; src: url("../fonts/FangTe.ttf") format("truetype"); font-display: swap } .header { width: 100%; padding: .8rem .8rem 1.6rem; position: relative } .header .logo { display: block; width: 4rem; float: left; overflow: hidden; line-height: 0 } .header .logo img { display: inline-block; width: 100%; vertical-align: middle } .header .icon-menu { width: .8rem; height: .8rem; margin-top: .24rem; float: right; position: relative; border-top: .10667rem solid #fff; border-bottom: .10667rem solid #fff; cursor: pointer } .header .icon-menu:before { content: ''; display: block; width: .58667rem; height: .10667rem; background: #fff; position: absolute; right: 0; top: 50%; margin-top: -.05333rem } .header .icon-menu.close { border: none } .header .icon-menu.close:before, .header .icon-menu.close:after { content: ''; display: block; width: 100%; height: .10667rem; background: #fff; position: absolute; left: 0; top: 50%; margin-top: -.05333rem } .header .icon-menu.close:before { transform: rotate(45deg) } .header .icon-menu.close:after { transform: rotate(-45deg) } .header .sub-nav { display: none; width: 2.66667rem; overflow: hidden; position: absolute; right: .8rem; top: 2rem; padding: .26667rem; background: #fff; z-index: 1080; -webkit-box-shadow: 0 0 .26667rem rgba(0, 0, 0, 0.2); box-shadow: 0 0 .26667rem rgba(0, 0, 0, 0.2) } .header .sub-nav li { width: 100%; overflow: hidden } .header .sub-nav li a { display: block; width: 100%; height: .85333rem; font-size: .37333rem; line-height: .85333rem } .header .sub-nav li a:hover { color: #dd2118 } .service-wrap { background: #f3f3f3; padding: 1.2rem .8rem 0 } .service-wrap h2 { width: 100%; height: .85333rem; line-height: .85333rem; font-size: .53333rem; font-weight: bold; color: #1d242c } .service-wrap h2 strong { color: #fff; background: #dd2118; display: inline-block; height: .85333rem; padding: 0 .13333rem } .service-wrap p { width: 100%; overflow: hidden; margin-top: .26667rem; font-size: .37333rem; line-height: .64rem; color: #999999 } .service-wrap ul { margin: .53333rem -.56rem 0 } .service-wrap ul li { width: 50%; padding: 0 .56rem; margin-top: .66667rem; float: left } .service-wrap ul li .img-panel { width: 100% } .service-wrap ul li .img-panel span { display: block; width: 100%; overflow: hidden; border-radius: .33333rem; position: relative } .service-wrap ul li .img-panel span img { display: block; width: 100% } .service-wrap ul li p { width: 100%; text-align: center; font-size: 0; margin-top: .13333rem } .service-wrap ul li p span { font-size: .34667rem; line-height: .66667rem; display: inline-block; vertical-align: middle; position: relative; color: #1d242c; font-weight: bold } .service-wrap ul li p span:before { content: ''; position: absolute; display: block; width: 100%; height: 2px; background: #dd2118; left: 50%; transform: translateX(-50%); bottom: 0; transition: width .5s ease-in-out } .service-wrap .swt-info { padding: 0 .6rem; overflow: hidden } .service-wrap .swt-info p { width: 100%; overflow: hidden; margin-top: .42667rem; padding: 0 } .service-wrap .swt-info p span { display: block; font-size: .32rem; color: #8193a6; height: .8rem; line-height: .8rem } .service-wrap .swt-info p span em { display: inline-block; vertical-align: middle; color: #dd2118; margin-right: .13333rem } .service-wrap .swt-info p .tel-link { display: block; width: 100%; height: 1.01333rem; border: 2px solid #53606d; border-radius: .26667rem; text-align: center; line-height: 1.01333rem; font-size: .45333rem; font-family: 'FT'; color: #54606d } .service-wrap .swt-info p .swt-link { width: 100%; height: 1.6rem; display: block; background: #dd2118; background: -webkit-linear-gradient(left, #ff512f, #dd2424); background: linear-gradient(to right, #ff512f, #dd2424); font-size: .4rem; color: #ffffff; font-weight: bold; text-align: center; line-height: 1.6rem; border-radius: .26667rem .26667rem 0 0 } .service-panel { margin: 0 -.13333rem } .service-panel .footer-logo { display: block; } .service-panel .footer-logo img { width: 100%; height: auto; } .service-panel>h2 { width: 100%; color: #999999; text-align: center; font-size: .53333rem; line-height: .85333rem; margin-top: .26667rem } .service-panel>h2 span { display: inline-block; width: .26667rem; height: .26667rem; border-radius: 100%; background: #999999; vertical-align: middle; margin: 0 .13333rem } .service-panel ul { width: 100%; margin-top: .4rem } .service-panel ul li { overflow: hidden; position: relative; width: 100%; margin-top: .53333rem; padding-top: .13333rem } .service-panel ul li:before { content: ''; display: block; width: 3.46667rem; position: absolute; right: 0; height: 2px; background: #dd2118; top: 0 } .service-panel ul li:after { clear: both; content: ''; display: block; width: 100% } .service-panel ul li .lf-panel { width: 2.13333rem; float: left; overflow: hidden } .service-panel ul li .rt-panel { width: 6.26667rem; float: right; overflow: hidden; display: table; height: 1.52rem } .service-panel ul li .icon-panel { width: .85333rem; height: .85333rem; margin-bottom: .13333rem; background-position: center center; background-repeat: no-repeat; -webkit-background-size: 100% 100%; background-size: 100% 100%; background-image: url(../mimages/icons_01.png) } .service-panel ul li h2 { line-height: .53333rem; font-size: .45333rem; width: 100%; text-align: center; color: #fff; font-weight: bold } .service-panel ul li p { display: table-cell; vertical-align: bottom; font-size: .34667rem; line-height: .48rem; color: #999999; width: 100%; overflow: hidden } .service-panel ul li+li .icon-panel { background-image: url(../mimages/icons_02.png) } .service-panel ul li+li+li .icon-panel { background-image: url(../mimages/icons_03.png) } .service-panel ul li+li+li+li .icon-panel { background-image: url(../mimages/icons_04.png) } .message-panel { width: 100%; z-index: 10; position: relative } .message-panel .message-content { position: relative; z-index: 2; border: 1px solid #e12a25; background: #171d24; overflow: hidden; width: 100%; padding: .66667rem .4rem 1.06667rem } .message-panel .message-content h2 { width: 100%; height: .96rem; line-height: .96rem; font-size: .45333rem; color: #fff; font-weight: bold; text-align: center } .message-panel .message-content .message-form { width: 100%; overflow: hidden; margin-top: .13333rem } .message-panel .message-content .message-form .item-form { width: 100%; border-bottom: 1px solid #76797d; padding-top: .26667rem; position: relative } .message-panel .message-content .message-form .item-form input, .message-panel .message-content .message-form .item-form textarea { height: .85333rem; font-size: .37333rem; background: none; width: 100%; color: #999999; border: none; outline: none; position: relative; z-index: 2 } .message-panel .message-content .message-form .item-form input { line-height: .85333rem } .message-panel .message-content .message-form .item-form textarea { resize: none; padding-top: .10667rem; padding-bottom: .10667rem; line-height: .64rem } .message-panel .message-content .message-form .item-button { width: 100%; overflow: hidden; padding-top: .93333rem } .message-panel .message-content .message-form .item-button input { display: block; border-radius: .53333rem; width: 5.33333rem; height: 1.06667rem; line-height: 1.06667rem; font-size: .4rem; font-weight: bold; color: #fff; background: #f23f2b; background: -webkit-linear-gradient(left, #ff512f, #dd2424); background: linear-gradient(to right, #ff512f, #dd2424); border: none; outline: none; margin: 0 auto } .placeholder { width: 100%; height: 2.42667rem } .fix-show { position: fixed; bottom: 0; width: 10rem; left: 50%; margin-left: -5rem; height: 1.6rem; z-index: 999; background: url(../mimages/btmflbg.png) center no-repeat; background-size: 100%; } .fix-show img { display: none; } .fix-fl { float: left; width: 40%; height: 100%; } .fix-fl span { width: 100%; height: 100%; font-size: 0; color: #FFF; display: block } .fix-fr { float: right; width: 60%; height: 100%; position: relative; } .fix-fr a { width: 100%; height: 100%; font-size: 0; color: #fff; font-weight: bold; display: block } .fix-fr a:before{ content: ""; width: 1.28rem; height: 1.25333rem; background: url(../mimages/fix-icon03.gif) center no-repeat; background-size: 100%; border-radius: 0.4rem 0 0 0; display: block; position: absolute; left: -0.28rem; top: 0.08rem; bottom: 0; margin: auto 0; } @keyframes strokeMove { 0% { stroke-dashoffset: 480px } 100% { stroke-dashoffset: 0 } } @-webkit-keyframes strokeMove { 0% { stroke-dashoffset: 480px } 100% { stroke-dashoffset: 0 } } @-webkit-keyframes heightMove { 0% { height: 0 } 100% { height: 100% } } @keyframes heightMove { 0% { height: 0 } 100% { height: 100% } } @-webkit-keyframes heightMove2 { 0% { height: 0 } 100% { height: 4rem } } @keyframes heightMove2 { 0% { height: 0 } 100% { height: 4rem } } @-webkit-keyframes heightMove3 { 0% { height: 0 } 100% { height: .66667rem } } @keyframes heightMove3 { 0% { height: 0 } 100% { height: .66667rem } } @-webkit-keyframes slideUp2 { 0% { opacity: 0; -webkit-transform: translateY(50%); transform: translateY(50%) } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } } @keyframes slideUp2 { 0% { opacity: 0; -webkit-transform: translateY(50%); transform: translateY(50%) } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } } @-webkit-keyframes widthMove { 0% { width: 0 } 100% { width: 100% } } @keyframes widthMove { 0% { width: 0 } 100% { width: 100% } } @-webkit-keyframes widthMove2 { 0% { width: 0 } 100% { width: .64rem } } @keyframes widthMove2 { 0% { width: 0 } 100% { width: .64rem } } @-webkit-keyframes opacityMove { 0% { opacity: 0 } 100% { opacity: 1 } } @keyframes opacityMove { 0% { opacity: 0 } 100% { opacity: 1 } } /* mzdzg */ .mzdzg-fix { max-width: 10rem; min-width: 4.26667rem; position: fixed; left: 0; right: 0; bottom: 0; margin: 0 auto; background: url(../mimages/mzdzg-bg.png) no-repeat center; background-size: contain; height: 2.38667rem; box-sizing: border-box; padding-top: 0.89333rem; z-index: 9999; } .mzdzg-fix .mzdzg-fl { float: left; font-size: 0.32rem; line-height: 1.49333rem; width: 68%; text-align: center; color: #fff; } .mzdzg-fix .mzdzg-liu { float: right; width: 32%; font-size: 0.37333rem; font-weight: bold; color: #fff; display: block; padding-left: 1.26667rem; line-height: 1.49333rem; background: url(../mimages/mzdzg-liuyan.png) no-repeat left 0.46667rem center; background-size: 0.56rem 0.68rem; }