@font-face { font-family: 'sans-b'; src: url("../fonts/OpenSans-Bold.woff") format("woff"), url("../fonts/OpenSans-Bold.ttf") format("truetype") } @font-face { font-family: 'sans-s'; src: url("../fonts/OpenSans-SemiBold.woff") format("woff"), url("../fonts/OpenSans-SemiBold.ttf") format("truetype") } @font-face { font-family: 'sans-e'; src: url("../fonts/OpenSans-ExtraBold.woff") format("woff"), url("../fonts/OpenSans-ExtraBold.ttf") format("truetype") } @font-face { font-family: 'sans-l'; src: url("../fonts/OpenSans-Light.woff") format("woff"), url("../fonts/OpenSans-Light.ttf") format("truetype") } * { margin: 0; padding: 0; font-style: normal; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } ul, ol, li { margin: 0; padding: 0; list-style: none } input, textarea { outline: none; border: none } a { outline: none; color: inherit } a:link { text-decoration: none; color: inherit } a:visited { text-decoration: none; color: inherit } a:hover { text-decoration: none; color: inherit } a, a:hover, a:active, a:visited, a:link, a:focus { -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent; outline: none; background: none; text-decoration: none } video { height: auto; border: none; outline: none } button { border: none; outline: none } a:focus { outline: 0; color: inherit; text-decoration: none } img { width: 100%; height: auto; border-width: 0px } .f-left { float: left } .f-right { float: right } .clear { clear: both } .inline-block { display: inline-block; vertical-align: top } .dis-none { display: none } .dis-block { display: block } .font0 { font-size: 0 } body { font-family: "sans-l"; min-width: 960px; font-size: 16px } a { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease } *:hover { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease } .trans, .main-introduce .intro-text .intro-more, .online-quote .zixun-btn, .canshu-table .canshu-title .canshu-btn, .main-project .project-list li, .about-customer .customer-img .c-cover .cover-vline .cover-active, .contact-box .form .submit-btn:before { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease } .container { width: 1220px; margin: 0 auto } .container:after { content: ''; display: block; clear: both } .inline-ul { font-size: 0 } .inline-ul li { display: inline-block; vertical-align: top } @media screen and (max-width: 1280px) { .container { width: 960px } } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #1c3a62 } input:-moz-placeholder, textarea:-moz-placeholder { color: #1c3a62 } input::-moz-placeholder, textarea::-moz-placeholder { color: #1c3a62 } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #1c3a62 } h1, h2 { color: #262626; font-size: 40px; line-height: 45px; font-family: 'sans-b' } p { color: #262626; font-size: 18px; line-height: 32px; font-family: 'sans-l' } @media screen and (max-width: 1280px) { h1, h2 { font-size: 36px; line-height: 40px } p { font-size: 16px; line-height: 28px } } .top-welcome { background: #e3870b; background: linear-gradient(to right, #fab248, #e3870b); height: 49px } .top-welcome p { color: #fff; font-size: 18px; font-family: 'sans-s'; line-height: 49px; position: relative; padding-left: 20px } .top-welcome p:before { content: ''; display: block; width: 7px; height: 7px; background: #fff; border-radius: 50%; position: absolute; left: 0; top: 21px } .top-email { text-align: right; height: 39px; background-color: #000000; padding-right: 9% } .top-email a { display: inline-block; padding-left: 28px; color: #8d8d8d; font-family: 'sans-l'; line-height: 39px; color: #8d8d8d; background: url(../images_pc/proshow/email-gray.png) left center no-repeat; background-size: 16px auto } .top-email a:hover { color: #ffbf00 } .header { position: relative; background-color: #fff; height: 80px; padding: 0 14% } .header a { display: block } .header .logo { width: 110px; float: left; padding-top: 20px } .header .nav-menu { float: right } .header .nav-menu li { display: inline-block; vertical-align: top; margin-top: 10px } .header .nav-menu li a { display: block; font-size: 18px; line-height: 30px; color: #201f1f; text-align: center; padding: 15px 28px; position: relative; font-family: 'sans-s' } .header .nav-menu li a:hover { color: #ffbf00 } .header:after { content: ''; display: block; clear: both } @media screen and (max-width: 1760px) { .header { padding: 0 12% } } @media screen and (max-width: 1600px) { .header { padding: 0 8% } } @media screen and (max-width: 1440px) { .header { padding: 0 6% } .top-welcome p { font-size: 17px } .header .nav-menu li a { font-size: 17px } } @media screen and (max-width: 1280px) { .header { padding: 0 4% } .top-welcome p { font-size: 16px } .header .nav-menu li a { font-size: 16px; padding: 15px 18px } } .banner-img { font-size: 0; } .main-intro { background: #f5f5f5 } .main-intro .intro-top .intro-desc { float: left; width: 72%; margin-top: 65px } .main-intro .intro-top .intro-desc h1 { width: 76% } .main-intro .intro-top .intro-desc p { width: 76%; margin-top: 42px } .main-intro .intro-top .intro-desc .swtbtn { width: 210px; height: 60px; background-color: #ffbf00; background-image: linear-gradient(to right, #ffbf00, #ffd865); border: 1px solid #ffbf00; font-size: 24px; color: #000000; line-height: 58px; text-align: center; font-weight: bold; font-family: Arial; display: block; box-shadow: 0 20px 20px -10px rgba(255, 191, 0, 0.4); margin-top: 40px; cursor: pointer; } .main-intro .intro-top .intro-desc .swtbtn:hover { background-image: linear-gradient(to right, #ffd865, #ffbf00); } .main-intro .intro-top .intro-app { float: right; position: relative; top: -80px; width: 28%; background: #fff; border-top: 6px solid #ffbf00; padding: 24px 20px 24px 26px; z-index: 1; } .main-intro .intro-top .intro-app h3 { font-size: 24px; color: #262626; font-family: 'sans-b'; line-height: 26px; margin-bottom: 30px } .main-intro .intro-top .intro-app h4 { color: #262626; font-size: 18px; font-family: 'sans-b'; line-height: 26px; margin-top: 20px } .main-intro .intro-top .intro-app p { color: #515151; font-size: 16px; line-height: 28px; font-family: 'sans-l'; padding-left: 14px; position: relative; margin-top: 5px } .main-intro .intro-top .intro-app p:before { content: ''; display: block; width: 4px; height: 4px; background: #515151; position: absolute; left: 3px; top: 12px; border-radius: 50% } .main-intro .intro-top .intro-app .email { height: 73px; background: #fff; padding-left: 77px; font-size: 20px; color: #262626; line-height: 73px; font-weight: bold; position: absolute; left: 0; right: 0; bottom: -86px; } .main-intro .intro-top .intro-app .email::before { content: ""; width: 32px; background: url(../images_pc/proshow/emailTB.png) center no-repeat; background-size: 100%; position: absolute; left: 26px; top: 0; bottom: 0; } .main-intro .intro-top .intro-app .email span { color: #ffbf00; border-bottom: 1px solid #ffbf00; } .main-intro .intro-middle { margin-top: 30px; } .main-intro .intro-middle .intro-desc { width: 54% } .main-intro .intro-middle .intro-desc p { margin-top: 42px; color: #282726 } .main-intro .intro-middle .intro-material { margin-top: 75px; padding-bottom: 95px } .main-intro .intro-middle .intro-material .material-list { display: inline-block; vertical-align: top; margin-top: 15px; position: relative } .main-intro .intro-middle .intro-material .material-list li { float: left } .main-intro .intro-middle .intro-material .material-list li img { box-shadow: 0px 2px 7px 0px rgba(5, 24, 32, 0.59); border: solid 2px #ffffff; transform: rotate(45deg); width: 110px; height: 110px } .main-intro .intro-middle .intro-material .material-list li span { display: block; color: #151515; font-size: 18px; line-height: 38px; font-family: 'sans-s'; text-align: center; margin-top: 30px } .main-intro .intro-middle .intro-material .material-list li+li { margin-left: 90px } .main-intro .intro-middle .intro-material .material-list li+li+li+li { margin-left: 40px; position: relative; color: #926b15; font-size: 14px; line-height: 24px; font-family: 'sans-l'; padding-left: 34px; padding-right: 18px; margin-top: 30px; font-weight: 800 } .main-intro .intro-middle .intro-material .material-list li+li+li+li:before, .main-intro .intro-middle .intro-material .material-list li+li+li+li:after { content: ''; display: block; position: absolute; left: -18px; top: 12px; width: 0; height: 0; border-right: 18px solid #e4b348; border-top: 13px solid transparent; border-left: 18px solid transparent; border-bottom: 13px solid transparent } .main-intro .intro-middle .intro-material .material-list li+li+li+li:after { -webkit-animation: arrowleft 1s linear infinite; animation: arrowleft 1s linear infinite } .main-intro .intro-middle .intro-material .material-list:before { content: ''; display: block; position: absolute; left: 0; top: 55px; width: 100%; height: 1px; background: url(../images_pc/proshow/material-line.png) left top no-repeat; background-size: 100% auto } .main-intro .intro-middle .intro-material .material-list:after { content: ''; display: block; clear: both } .main-intro .intro-middle .intro-material .mater-imgs { display: inline-block; vertical-align: top; position: relative; } .main-intro .intro-middle .intro-material .mater-imgs img { position: absolute; top: -330px; left: 0; width: 496px } @-webkit-keyframes arrowleft { 0% { transform: scale(1); opacity: 1; left: -18px } 40% { transform: scale(2); left: -30px } 45% { opacity: 0 } 100% { left: -18px; opacity: 0 } } @keyframes arrowleft { 0% { transform: scale(1); opacity: 1; left: -18px } 40% { transform: scale(2); left: -30px } 45% { opacity: 0 } 100% { left: -18px; opacity: 0 } } @media screen and (max-width: 1280px) { .main-intro .intro-middle .intro-material .material-list li img { width: 90px; height: 90px } .main-intro .intro-middle .intro-material .material-list li+li { margin-left: 60px } .main-intro .intro-middle .intro-material .material-list:before { top: 45px } .main-intro .intro-middle .intro-material .material-list li span { margin-top: 20px } .main-intro .intro-middle .intro-material .mater-imgs img { top: -255px; width: 390px } .main-intro .intro-middle .intro-material .material-list li+li+li+li { margin-top: 20px } .main-intro .intro-top .intro-desc { width: 64%; } .main-intro .intro-top .intro-app { width: 36%; } } .main-youshi { position: relative; padding-top: 36px; background: url(../images_pc/proshow/desc-bg.jpg) center top no-repeat; background-size: cover; padding-bottom: 70px; font-size: 0 } .main-youshi .youshi-text { display: inline-block; vertical-align: middle; width: 50%; margin-top: 60px } .main-youshi .youshi-text h2 { color: #262626; letter-spacing: -1px } .main-youshi .youshi-text p { color: #262626; margin-top: 40px } .main-youshi .youshi-img { display: inline-block; vertical-align: middle; width: 50%; padding: 0 30px; text-align: center } .main-youshi .youshi-img img { width: auto; max-width: 100% } @media screen and (max-width: 1280px) { .main-youshi { padding-top: 40px } } .hot-product { padding: 70px 0; font-size: 0 } .hot-product h2 { margin-bottom: 32px; font-size: 40px } .hot-product .hot-text { width: 785px; display: inline-block; vertical-align: middle; padding-right: 130px } .hot-product .hot-text h3 { font-size: 20px; line-height: 34px; color: #262626; font-family: 'sans-s'; margin-top: 20px; position: relative; padding-left: 20px } .hot-product .hot-text h3:before { content: ''; display: block; width: 7px; height: 7px; position: absolute; left: 0; top: 13px; border-radius: 50%; background: #1e1e1e; opacity: 0.45 } .hot-product .hot-text p { line-height: 28px; margin-top: 8px } .hot-product .hot-img { display: inline-block; vertical-align: middle; width: 435px; position: relative; text-align: center } .hot-product .hot-img img { width: 100%; } @media screen and (max-width: 1280px) { .hot-product .hot-img { width: 320px; margin-left: 25px } .hot-product .hot-text { width: 615px } .hot-product .hot-text h3 { font-size: 16px; line-height: 32px } .hot-product .hot-text p { margin-top: 0 } } .main-introduce { padding: 70px 0; background: #f5f5f5; position: relative } .main-introduce .intro-img { float: left; width: 58% } .main-introduce .intro-text { float: right; width: 38%; height: 540px; overflow-y: scroll; padding-right: 30px } .main-introduce .intro-text h2 { color: #282726; font-size: 30px; line-height: 43px; font-family: 'sans-b' } .main-introduce .intro-text p { color: #282726; margin-top: 36px } .main-introduce .intro-text .intro-main h3 { font-size: 20px; line-height: 35px; color: #000000; font-family: 'sans-s'; margin-top: 16px } .main-introduce .intro-text .intro-main p { padding-left: 22px; position: relative; margin-top: 10px } .main-introduce .intro-text .intro-main p:before { content: ''; display: block; width: 5px; height: 5px; background-color: #848484; position: absolute; left: 2px; top: 18px; border-radius: 50% } .main-introduce .intro-text .intro-more { display: inline-block; color: #262626; font-size: 16px; line-height: 43px; font-family: 'sans-s'; padding-right: 23px; background: url(../images_pc/proshow/gray-more.png) right center no-repeat; background-size: 15px 11px; margin-top: 12px } .main-introduce .intro-text .intro-more:hover { color: #ffbf00; padding-right: 30px; background: url(../images_pc/proshow/yellow-more.png) right center no-repeat; background-size: 15px 11px } @media screen and (max-width: 1280px) { .main-introduce .intro-text { width: 38%; height: 423px } .main-introduce .intro-text p { margin-top: 20px } .main-introduce .intro-text .intro-main h3 { font-size: 18px; line-height: 32px; margin-top: 10px } .main-introduce .intro-text .intro-main p { margin-top: 8px } } .online-quote { position: relative; overflow: hidden } .online-quote .container { padding: 32px 0 42px 50px; position: relative } .online-quote .container:before { content: ''; display: block; position: absolute; left: 0; top: 0; width: 150%; height: 100%; background: #e3870b; background: linear-gradient(to right, #fab248, #e3870b); z-index: -1 } .online-quote .zixun-text { float: left; width: 70%; color: #fff; } .online-quote .zixun-text h2 { color: #fff; } .online-quote p { margin-top: 20px; color: #ffff; } .online-quote p span { font-family: 'sans-b'; } .online-quote p i { font-size: 24px; font-family: 'sans-b'; text-decoration: underline } .online-quote .zixun-btn { font-family: 'sans-b'; width: 16%; height: 55px; background-color: #000000; font-size: 24px; line-height: 55px; text-align: center; display: block; color: #fff; float: right; margin-top: 34px } .online-quote .zixun-btn:hover { border-radius: 10px } @media screen and (max-width: 1280px) { .online-quote .zixun-btn { font-size: 20px; margin-top: 22px } } .canshu-table { margin-top: 92px; margin-bottom: 120px } .canshu-table .canshu-title { padding: 25px 30px 25px 45px; background-color: #000000; } .canshu-table .canshu-title h2 { color: #ffffff; line-height: 48px; float: left; width: 60% } .canshu-table .canshu-title .canshu-btn { width: 48px; height: 48px; background: #e3870b; background: linear-gradient(to right, #fab248, #e3870b); float: right; border-radius: 50%; position: relative; cursor: pointer } .canshu-table .canshu-title .canshu-btn:before { content: ''; display: block; position: absolute; left: 11px; top: 23px; width: 26px; height: 1px; background: #fff; } .canshu-table .canshu-title .canshu-btn:after { content: ''; display: block; position: absolute; left: 23px; top: 11px; width: 1px; height: 26px; background: #fff; } .canshu-table .canshu-title .canshu-btn:hover { -webkit-transform: rotate(45deg); transform: rotate(45deg) } .canshu-table .canshu-title .canshu-active { -webkit-transform: rotate(45deg); transform: rotate(45deg) } .canshu-table .canshu-title:after { content: ''; display: block; clear: both } .canshu-table .table-box { margin-top: 50px; display: none } .canshu-table .table-box table td { padding: 10px 0; font-size: 18px } .main-project .project-top .project-text { float: left; width: 45% } .main-project .project-top .project-text p { margin-top: 45px } .main-project .project-top .video-block { position: relative; width: 43%; float: right; overflow: hidden; font-size: 0 } .main-project .project-top .video-block video { width: 100%; display: block } .main-project .project-top .video-block .video-btn { position: absolute; width: 58px; height: 58px; background: url(../images_pc/proshow/play-btn.png) center center no-repeat; background-size: 100% auto; left: 50%; top: 50%; margin-top: -29px; margin-left: -29px; cursor: pointer; z-index: 1 } .main-project .project-top .video-block:before { content: ''; display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: url(../images_pc/proshow/video-cover.png) left top no-repeat; background-size: cover; z-index: 1 } .main-project .project-top .video-active .video-btn { display: none } .main-project .project-top .video-active:before { display: none } .main-project .project-top:after { content: ''; display: block; clear: both } .main-project .project-list { margin-top: 30px } .main-project .project-list li { width: 27%; float: left; height: 261px; position: relative; box-shadow: 0px 7px 30px 0px rgba(33, 112, 162, 0.35); overflow: hidden } .main-project .project-list li a { display: block } .main-project .project-list li h3 { position: absolute; left: 0; bottom: 0; right: 0; background: #434448; height: 66px; line-height: 66px } .main-project .project-list li h3 a { display: inline-block; padding: 5px 15px; font-size: 18px; line-height: 27px; color: #fff; font-family: 'sans-l' } .main-project .project-list li+li { margin-left: 2% } .main-project .project-list li+li+li { width: 42%; height: 289px } .main-project .project-list li:hover { border-radius: 10px } .main-project .project-list:after { content: ''; display: block; clear: both } @media screen and (max-width: 1280px) { .main-project .project-list li { height: 246px } } .main-about { position: relative; padding: 72px 0 76px; background: url(../images_pc/proshow/about-bg.jpg) left bottom no-repeat; background-size: 100% auto } .main-about .container { position: relative } .main-about h2 { text-align: center } .main-about p { text-align: center; color: #282726; margin-top: 36px } .main-about img { width: 95%; margin-top: 70px; display: block; margin-left: auto; margin-right: auto } .about-customer { position: relative } .about-customer .customer-img { position: relative } .about-customer .customer-img .c-cover { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden } .about-customer .customer-img .c-cover .cover-vline { height: 100%; float: left } .about-customer .customer-img .c-cover .cover-vline .cover-item { width: 100%; height: 31.9%; background-color: #30465d; opacity: 0.85; -webkit-transition: all 1s ease; transition: all 1s ease } .about-customer .customer-img .c-cover .cover-vline .cover-item+.cover-item { height: 33.25% } .about-customer .customer-img .c-cover .cover-vline .cover-item+.cover-item+.cover-item { height: 34.2% } .about-customer .customer-img .c-cover .cover-vline .cover-item:hover { opacity: 0 } .about-customer .customer-img .c-cover .cover-vline .cover-active { opacity: 0 } .about-customer .customer-img .c-cover .cover-vline1 { width: 6.9% } .about-customer .customer-img .c-cover .cover-vline2 { width: 6.8% } .about-customer .customer-img .c-cover .cover-vline3 { width: 6.9% } .about-customer .customer-img .c-cover .cover-vline4 { width: 6.85% } .about-customer .customer-img .c-cover .cover-vline5 { width: 6.8% } .about-customer .customer-img .c-cover .cover-vline5 .cover-item+.cover-item { height: 33.05% } .about-customer .customer-img .c-cover .cover-vline6 { width: 6.9% } .about-customer .customer-img .c-cover .cover-vline6 .cover-item+.cover-item { height: 33.4% } .about-customer .customer-img .c-cover .cover-vline7 { width: 6.9% } .about-customer .customer-img .c-cover .cover-vline8 { width: 6.84% } .about-customer .customer-img .c-cover .cover-vline9 { width: 7.8% } .about-customer .customer-img .c-cover .cover-vline10 { width: 7.5% } .about-customer .customer-img .c-cover .cover-vline10 .cover-item { height: 31.9% } .about-customer .customer-img .c-cover .cover-vline10 .cover-item+.cover-item { height: 32.3% } .about-customer .customer-img .c-cover .cover-vline10 .cover-item+.cover-item+.cover-item { height: 35% } .about-customer .customer-img .c-cover .cover-vline11 { width: 7.5% } .about-customer .customer-img .c-cover .cover-vline11 .cover-item { height: 31.9% } .about-customer .customer-img .c-cover .cover-vline11 .cover-item+.cover-item { height: 32.2% } .about-customer .customer-img .c-cover .cover-vline11 .cover-item+.cover-item+.cover-item { height: 35% } .about-customer .customer-img .c-cover .cover-vline12 { width: 7.5% } .about-customer .customer-img .c-cover .cover-vline12 .cover-item { height: 31.9% } .about-customer .customer-img .c-cover .cover-vline12 .cover-item+.cover-item { height: 32.2% } .about-customer .customer-img .c-cover .cover-vline12 .cover-item+.cover-item+.cover-item { height: 35% } .about-customer .customer-img .c-cover .cover-vline13 { width: 7.4% } .about-customer .customer-img .c-cover .cover-vline13 .cover-item { height: 31.9% } .about-customer .customer-img .c-cover .cover-vline13 .cover-item+.cover-item { height: 32.3% } .about-customer .customer-img .c-cover .cover-vline13 .cover-item+.cover-item+.cover-item { height: 35% } .about-customer .customer-img .c-cover .cover-vline14 { width: 7.31% } .about-customer .customer-img .c-cover .cover-vline14 .cover-item { height: 31.9% } .about-customer .customer-img .c-cover .cover-vline14 .cover-item+.cover-item { height: 32.3% } .about-customer .customer-img .c-cover .cover-vline14 .cover-item+.cover-item+.cover-item { height: 35% } .about-customer .customer-img .c-cover:after { content: ''; display: block; clear: both } .about-customer .customer-img .c-cover .cover-active { background: none } .about-customer .customer-img:after { content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../images_pc/proshow/customer-bg.png) left top no-repeat; background-size: 100% auto } .about-customer .customer-title { position: absolute; left: 20.5%; top: 23% } .about-customer .customer-title h2 { display: inline-block; letter-spacing: -1px; color: #ffffff; font-size: 50px; line-height: 54px; font-family: 'sans-e'; text-shadow: #e2cd90 1px 0 0, #e2cd90 0 1px 0, #e2cd90 -1px 0 0, #e2cd90 0 -1px 0; padding: 10px 30px; background-image: linear-gradient(90deg, #ffbf00 5%, rgba(255, 191, 0, 0.6) 25%, rgba(255, 191, 0, 0) 40%, rgba(255, 191, 0, 0) 100%) } .about-customer .customer-text { position: absolute; right: 43.5%; bottom: 5% } .about-customer .customer-text p { color: #151515; font-size: 22px; line-height: 34px; font-family: 'sans-l'; text-align: right } .about-customer .customer-text p span { color: #ffbf00; font-size: 45px; font-family: 'Impact'; display: block; margin-bottom: 7% } @media screen and (max-width: 1760px) { .about-customer .customer-title h2 { font-size: 46px; line-height: 50px } .about-customer .customer-text p span { font-size: 42px } .about-customer .customer-text { right: 43% } } @media screen and (max-width: 1600px) { .about-customer .customer-img .c-cover .cover-vline .cover-item { height: 31.8% } .about-customer .customer-title h2 { font-size: 42px; line-height: 46px } .about-customer .customer-text p span { font-size: 36px } .about-customer .customer-text { right: 43% } .about-customer .customer-text p span { margin-bottom: 2% } } @media screen and (max-width: 1440px) { .about-customer .customer-img .c-cover .cover-vline11 .cover-item+.cover-item { height: 32.1% } .about-customer .customer-img .c-cover .cover-vline12 .cover-item+.cover-item { height: 32.1% } .about-customer .customer-title h2 { font-size: 36px; line-height: 40px } .about-customer .customer-text p span { font-size: 32px } .about-customer .customer-text p { font-size: 20px; line-height: 30px } } @media screen and (max-width: 1280px) { .about-customer .customer-img .c-cover .cover-vline .cover-item+.cover-item { height: 33.1% } .about-customer .customer-img .c-cover .cover-vline10 .cover-item+.cover-item { height: 32.3% } .about-customer .customer-img .c-cover .cover-vline11 .cover-item+.cover-item { height: 32% } .about-customer .customer-img .c-cover .cover-vline12 .cover-item+.cover-item { height: 32% } .about-customer .customer-img .c-cover .cover-vline13 .cover-item+.cover-item { height: 32% } .about-customer .customer-img .c-cover .cover-vline14 .cover-item+.cover-item { height: 32% } .about-customer .customer-title h2 { font-size: 32px; line-height: 36px } .about-customer .customer-text p span { font-size: 28px } .about-customer .customer-text p { font-size: 18px; line-height: 26px } } .service-progress { width: 1398px; margin-left: auto; margin-right: auto; margin-top: 84px } .service-progress .progress-title { position: relative } .service-progress .progress-title h2 { width: 36%; padding-right: 9%; background: url(../images_pc/proshow/sanjiao-img.png) right center no-repeat; background-size: 28px 24px; letter-spacing: -1px; position: relative } .service-progress .progress-title:after { content: ''; display: block; position: absolute; right: 0; top: 0; width: 62%; height: 100%; background: url(../images_pc/proshow/progress-titleline.png) right center no-repeat; background-size: 100% auto } .service-progress ul { margin-top: 92px; position: relative } .service-progress ul li { float: left; width: 14%; text-align: center; position: relative } .service-progress ul li img { height: 79px; width: auto } .service-progress ul li .s-num { margin-top: 26px; margin-left: auto; margin-right: auto; width: 31px; height: 31px; background: #e3870b; background: linear-gradient(to right, #fab248, #e3870b); border-radius: 50%; font-size: 26px; line-height: 36px; letter-spacing: -1px; color: #fff; font-family: 'sans-b'; padding-left: 11px; padding-top: 4px; -webkit-animation: big1 5s linear infinite; animation: big1 5s linear infinite } .service-progress ul li .s-text { margin-top: 36px; margin-bottom: 58px } .service-progress ul li .s-text span { font-size: 20px; line-height: 28px; color: #282726; font-family: 'sans-s'; display: block } .service-progress ul li .s-text span+span { font-size: 18px; font-family: 'sans-l' } .service-progress ul li+li { margin-left: 7.5% } .service-progress ul li+li .s-num { -webkit-animation: big2 5s linear infinite; animation: big2 5s linear infinite } .service-progress ul li+li:before { content: ''; display: block; width: 16px; height: 26px; position: absolute; top: 31px; left: -36%; background: url(../images_pc/proshow/right-gray.png) center center no-repeat; background-size: 100% auto } .service-progress ul li+li+li .s-num { -webkit-animation: big3 5s linear infinite; animation: big3 5s linear infinite } .service-progress ul li+li+li+li .s-num { -webkit-animation: big4 5s linear infinite; animation: big4 5s linear infinite } .service-progress ul li+li+li+li+li .s-num { -webkit-animation: big5 5s linear infinite; animation: big5 5s linear infinite } .service-progress ul:before { content: ''; display: block; left: 7%; right: 7%; top: 128px; height: 1px; position: absolute; background: url(../images_pc/proshow/progress-line.png) center center no-repeat; background-size: 100% auto } .service-progress ul:after { content: ''; display: block; clear: both } @-webkit-keyframes big1 { 0% { transform: scale(1) } 8% { transform: scale(1.5) } 16% { transform: scale(1) } } @keyframes big1 { 0% { transform: scale(1) } 8% { transform: scale(1.5) } 16% { transform: scale(1) } } @-webkit-keyframes big2 { 18% { transform: scale(1) } 26% { transform: scale(1.5) } 34% { transform: scale(1) } } @keyframes big2 { 18% { transform: scale(1) } 26% { transform: scale(1.5) } 34% { transform: scale(1) } } @-webkit-keyframes big3 { 36% { transform: scale(1) } 44% { transform: scale(1.5) } 52% { transform: scale(1) } } @keyframes big3 { 36% { transform: scale(1) } 44% { transform: scale(1.5) } 52% { transform: scale(1) } } @-webkit-keyframes big4 { 54% { transform: scale(1) } 62% { transform: scale(1.5) } 70% { transform: scale(1) } } @keyframes big4 { 54% { transform: scale(1) } 62% { transform: scale(1.5) } 70% { transform: scale(1) } } @-webkit-keyframes big5 { 72% { transform: scale(1) } 80% { transform: scale(1.5) } 88% { transform: scale(1) } } @keyframes big5 { 72% { transform: scale(1) } 80% { transform: scale(1.5) } 88% { transform: scale(1) } } @media screen and (max-width: 1440px) { .service-progress { width: 1200px } } @media screen and (max-width: 1280px) { .service-progress { width: 960px } .service-progress ul li .s-text span { font-size: 16px } .service-progress ul li .s-text span+span { font-size: 16px } .service-progress ul li img { height: 60px } .service-progress ul li+li:before { width: 12px; top: 22px } .service-progress ul:before { top: 108px } } .contact-box { padding: 52px 0 48px; background: url(../images_pc/proshow/contact-bg.jpg) center center no-repeat; background-size: cover } .contact-box .container { background-color: rgba(238, 247, 253, 0.79); padding: 64px 10% 52px } .contact-box .contact-top { text-align: center; max-width: 680px; margin: 0 auto } .contact-box .contact-top h2 { color: #1c1b1b } .contact-box .contact-top p { color: #1c1b1b; margin-top: 24px } .contact-box .form { margin-top: 28px; font-size: 0 } .contact-box .form .input-item { position: relative; display: inline-block; vertical-align: top; border: solid 4px #f1f1f1; width: 47%; height: 54px; background: #fff; margin-bottom: 26px } .contact-box .form .input-item input { position: absolute; display: block; width: 100%; height: 45px; left: 0; bottom: 0; line-height: 45px; padding: 0 20px; font-size: 18px; color: #232323; font-family: 'sans-s'; background: none } .contact-box .form .input-item span { display: block; font-size: 18px; line-height: 45px; padding: 0 20px; color: #232323; font-family: 'sans-s' } .contact-box .form .input-item span i { color: #e98a2f } .contact-box .form .input-item .focus-span { opacity: 0 } .contact-box .form .l6 { margin-left: 6% } .contact-box .form .textarea-item { width: 100%; height: 221px; width: 100%; border: 4px solid #f1f1f1; position: relative; background: #fff } .contact-box .form .textarea-item textarea { width: 100%; height: 217px; position: absolute; left: 0; top: 0; background: none; resize: none; font-size: 18px; line-height: 45px; padding: 4px 20px; color: #232323; font-family: 'sans-s' } .contact-box .form .textarea-item span { display: block; font-size: 18px; line-height: 1.6; padding: 8px 20px; color: #232323; font-family: 'sans-s' } .contact-box .form .textarea-item span i { color: #e98a2f } .contact-box .form .submit-btn { width: 260px; height: 60px; margin: 38px auto 0; position: relative; z-index: 1 } .contact-box .form .submit-btn input { display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; font-size: 34px; font-family: 'sans-b'; text-align: center; width: 100%; line-height: 60px; letter-spacing: -1px; color: #ffffff; background: none; cursor: pointer } .contact-box .form .submit-btn:before { content: ''; display: block; position: absolute; left: -1px; right: -1px; bottom: -3px; top: -1px; background-color: #fa8f11; background-image: linear-gradient(0deg, #ec700c 0%, #fff 100%); z-index: -1; border-radius: 5px } .contact-box .form .submit-btn:after { content: ''; display: block; position: absolute; left: 0; right: 0; bottom: 0; top: 0; background: #e3870b; background: linear-gradient(to right, #fab248, #e3870b); z-index: -1; border-radius: 5px; box-shadow: 0px 3px 7px 0px rgba(252, 159, 11, 0.35); } .contact-box .form .submit-btn:hover:before { left: 0px; right: 0px; top: 0px; bottom: -5px } .copyright { padding: 35px 0; background-color: #000000; } .copyright p { font-size: 16px; line-height: 46px; color: #ffffff; text-align: center } .timer-shaft-box { width: 100%; padding: 10px 20px 50px 20px; box-sizing: border-box } .timer-shaft { position: relative; width: 100% } .timer-right, .timer-left { display: none } .timer-scale-cont { display: inline-block; height: 100%; padding: 0; margin-right: 15px; vertical-align: middle; line-height: 22px; text-align: center; font-size: 18px; color: #00355d; transition: all .3s; cursor: pointer; background: #fff; overflow: hidden; border-radius: 10px; position: relative; box-shadow: 0 0 9px rgba(0, 53, 93, 0.4) } .timer-scale-cont:after, .timer-scale-cont:before { position: absolute; content: ''; bottom: 0; top: 0; left: 0; right: 0 } .timer-shaft-box .timer-scale-cont p.time-circle { display: block; vertical-align: middle; line-height: 22px; text-align: center; font-size: 18px; color: #00355d; transition: all .3s; cursor: pointer; overflow: hidden; border-radius: 10px; position: relative; height: 50px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; display: -webkit-flex; align-items: center; justify-content: center; -webkit-align-items: center; -webkit-justify-content: center; z-index: 3; padding: 0 20px } .time-circle span { clear: both; display: block; position: relative; z-index: 3 } .hov .time-circle { color: #00355d; font-weight: bold } .hov.timer-scale-cont:after { background: url(../images_pc/proshow/tabicon02.png) no-repeat right center } .hov.timer-scale-cont:before { background: url(../images_pc/proshow/tabicon01.png) no-repeat left bottom } .timer-shaft-content { width: 100%; overflow: hidden; margin: 30px 0 0 } .fdftm { position: fixed; width: 8.4167%; min-width: 100px; max-width: 200px; right: 10px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); z-index: 9999 } .back-top { width: 75px; height: 75px; position: fixed; z-index: 1050; bottom: 50px; right: 50px; cursor: pointer; display: none } .back-top img { display: block; width: 100%; height: 100% } #LRdiv0, #LRfloater0 { display: none } .msg-confirm { overflow: hidden; background: rgba(0, 0, 0, 0.5); position: fixed; left: 0; right: 0; top: 50%; bottom: 50%; z-index: 9999; transition: all .5s } .msg-confirm .msg-box { width: 629px; background: #1d2c3d; padding: 30px; position: absolute; left: 50%; top: 50%; margin: -100px 0 0 -315px } .msg-confirm .msg-box .text { font-size: 18px; color: #d7d7d7; text-align: center } .msg-confirm dl { font-size: 0 } .msg-confirm dl dd, .msg-confirm dl dt { display: inline-block; vertical-align: middle } .msg-confirm dl dt { margin-left: 85px } .msg-confirm dl dd p { font-size: 20px; color: #fff; text-align: center; position: relative; margin-top: 40px } .msg-confirm dl dd p label { background: #1d2c3d; font-size: 15px; color: #ababab; font-family: FuturaStd_Medium; line-height: 1; padding: 0 10px; display: block; position: absolute; left: 15px; top: -6px } .msg-confirm dl dd p input { width: 340px; height: 53px; background: 0 0; border: 1px solid #51534f; font-size: 18px; color: #ceaa61; font-family: FuturaStd_Light; padding: 10px 0 0 22px } .msg-confirm dl dt a { width: 130px; height: 42px; background: #fff; border-radius: 50px; font-size: 18px; color: #1d2c3d; font-family: FuturaStd_Light; text-align: center; line-height: 42px; display: block; margin-top: 40px } .msg-confirm dl dt .submit { background: #ffa23f; margin-top: 44px; box-shadow: 0 6px 9px rgba(233, 144, 48, 0.6) } .msg-show { top: 0; bottom: 0 } .swt-panel { position: fixed; width: 168px; right: 0; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); z-index: 9999 } .swt-panel .swt-content { cursor: pointer; width: 100%; height: 240px; background: url("../images/swt_bg.png") center top no-repeat } .swt-panel .swt-content p { position: absolute; top: 144px; width: 149px; left: 10px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; background: #fff; display: block; line-height: 22px; font-size: 16px; color: #c8ae79; font-family: 'Lato_Regular', Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; padding: 10px 15px 10px; -webkit-box-shadow: 0 6px 6px rgba(64, 8, 29, 0.2); -moz-box-shadow: 0 6px 6px rgba(64, 8, 29, 0.2); -ms-box-shadow: 0 6px 6px rgba(64, 8, 29, 0.2); -o-box-shadow: 0 6px 6px rgba(64, 8, 29, 0.2); box-shadow: 0 6px 6px rgba(64, 8, 29, 0.2) } .swt-panel .swt-content p strong { color: #c88600; font-size: 18px; line-height: 24px; font-family: 'FuturaBT_Bold', Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; font-weight: normal }