* { 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 { outline: none; border: none } textarea { border: none; outline: 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 { width: 100%; 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-b"; min-width: 960px } .container { width: 1560px; margin: 0 auto } .container:after { content: ''; display: block; clear: both } @font-face { font-family: 'sans-b'; src: url("../fonts/OpenSans-Bold.woff") format("woff"), url("../fonts/OpenSans-Bold.ttf") format("truetype"); font-display: swap; } @font-face { font-family: 'sans-s'; src: url("../fonts/OpenSans-SemiBold.woff") format("woff"), url("../fonts/OpenSans-SemiBold.ttf") format("truetype"); font-display: swap; } @font-face { font-family: 'sans-e'; src: url("../fonts/OpenSans-ExtraBold.woff") format("woff"), url("../fonts/OpenSans-ExtraBold.ttf") format("truetype"); font-display: swap; } @font-face { font-family: 'sans-l'; src: url("../fonts/OpenSans-Light.woff") format("woff"), url("../fonts/OpenSans-Light.ttf") format("truetype"); font-display: swap; } .product-body { background: url(../img/top-banner.jpg) center top no-repeat; background-size: auto 1400px; max-width: 1920px; margin: auto } .header { height: 140px; width: 100%; position: relative } .header .logo { width: 190px; margin-top: 30px; float: left } .header ul { float: right; font-size: 0; text-align: right; width: 80% } .header ul li { text-align: center; display: inline-block; vertical-align: top; padding: 0 2.5% } .header ul li a { display: block; font-size: 18px; line-height: 36px; color: #fff; font-family: 'sans-s'; padding: 20px 0; margin-top: 38px } .header ul li a:hover { color: #e39c6c } .header ul li a:before { content: ''; display: inline-block; width: 9px; height: 9px; background: url(../img/add-yellow.png) center center no-repeat; background-size: 100% auto; margin-top: 13px; margin-right: 9px } .header:before { content: ''; display: block; width: 100%; height: 1px; position: absolute; bottom: 0; left: 0; background: -webkit-linear-gradient(180deg, #111f28 0%, #e07d12 100%); background: -moz-linear-gradient(180deg, #111f28 0%, #e07d12 100%); background: -o-linear-gradient(180deg, #111f28 0%, #e07d12 100%); background: linear-gradient(90deg, #111f28 0%, #e07d12 100%) } .product-box { margin-top: 56px } .product-box .product-left { width: 50%; padding-left: 86px; padding-bottom: 106px } .product-box .product-left h1 { color: #ffffff; font-size: 70px; font-family: 'sans-e'; line-height: 80px; margin-top: 60px } .product-box .product-left p { font-size: 18px; line-height: 35px; color: #a9b4ba; margin-top: 20px; font-family: 'sans-l' } .product-box .product-left .canshu { font-size: 0; margin-top: 28px } .product-box .product-left .canshu li { display: inline-block; vertical-align: top; width: 170px; margin-left: 40px; text-align: center } .product-box .product-left .canshu li strong { display: flex; display: block\9; justify-content: center; align-items: center; text-align: center; width: 100%; height: 75px; line-height: 1.1; position: relative; font-size: 24px; color: #2f7eac; background: -webkit-linear-gradient(270deg, #43abe8, #2f7eac); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding: 5% 0\9; } .product-box .product-left .canshu li strong:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: url(../img/canshu-bg.png) left top no-repeat; background-size: 100% auto } .product-box .product-left .canshu li span { display: block; font-size: 16px; line-height: 24px; color: #fff; font-family: 'sans-l'; margin-top: 20px } .product-box .product-left .canshu li:first-child { margin-left: 0 } .product-box .product-left h3 { position: relative; margin-top: 40px } .product-box .product-left h3 b { position: relative; padding-left: 30px; font-size: 22px; line-height: 35px; color: #fefefe } .product-box .product-left h3 b:before, .product-box .product-left h3 b:after { content: ''; display: block; position: absolute; border-radius: 50% } .product-box .product-left h3 b:before { width: 5px; height: 5px; background-color: #eb920d; top: 15px; left: 6px; z-index: 1 } .product-box .product-left h3 b:after { width: 13px; height: 13px; background-color: #246281; position: absolute; left: 2px; top: 11px; box-shadow: 0 0 12px #2a90c2 } .product-box .product-left img { width: 70%; margin-top: 30px } .product-box .product-left .top-zx { position: relative; display: inline-block } .product-box .product-left .top-zx p { color: #9cbecd; font-size: 16px; line-height: 47px; padding: 0 14px; border-radius: 16px; border: 1px dashed rgba(255, 255, 255, 0.25); font-family: 'sans-l'; display: inline-block } .product-box .product-left .top-zx .zixun { position: absolute; width: 325px; height: 325px; border-radius: 50%; z-index: 2; bottom: -59px; right: -439px; background: url(../img/circle-blue.png) left top no-repeat; background-size: 100% auto } .product-box .product-left .top-zx .zixun h3 { padding: 72px 44px 0; font-size: 24px; line-height: 35px; color: #fff; margin-top: 0 } .product-box .product-left .top-zx .zixun a { display: block; margin: 52px auto 0; position: relative; width: 222px; height: 60px; font-size: 24px; line-height: 60px; position: relative; border-radius: 30px; color: #fff; text-align: center } .product-box .product-left .top-zx .zixun a:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: #efaa05; border-radius: 30px; background: -webkit-linear-gradient(180deg, #efaa05 0%, #eb910d 100%); background: -moz-linear-gradient(180deg, #efaa05 0%, #eb910d 100%); background: -o-linear-gradient(180deg, #efaa05 0%, #eb910d 100%); background: linear-gradient(90deg, #efaa05 0%, #eb910d 100%); z-index: -1 } .product-box .product-left .top-zx .zixun a:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: -1px; background: #fff; border-radius: 30px; z-index: -2; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s } .product-box .product-left .top-zx .zixun a:hover:before { top: 3px; left: 2px; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; background: #956900 } .product-box .product-left .top-zx .zixun:before { content: ''; display: block; width: 164px; height: 62px; background: url(../img/arrow-white.png) left top no-repeat; background-size: 100% auto; position: absolute; bottom: 50px; left: -117px; z-index: 3 } .product-box .product-left .wuliu { position: relative; font-size: 0; margin-top: 56px } .product-box .product-left .wuliu li { display: inline-block; vertical-align: top; position: relative; width: 33% } .product-box .product-left .wuliu li span { position: absolute; color: #3894cd; font-size: 16px; line-height: 36px; padding: 7px 0; font-family: 'sans-l'; left: 0; top: 0 } .product-box .product-left .wuliu li strong { display: block; color: #efa905; font-size: 16px; font-family: 'sans-s'; line-height: 32px; padding: 64px 0 0; position: relative } .product-box .product-left .wuliu li strong:before, .product-box .product-left .wuliu li strong:after { content: ''; display: block; border-radius: 50%; position: absolute } .product-box .product-left .wuliu li strong:before { width: 15px; height: 15px; border: 1px dashed rgba(255, 255, 255, 0.6); left: 18%; margin-left: -12px; top: 38px; background: #073046; -moz-animation: circle 6s linear infinite; -webkit-animation: circle 6s linear infinite; -o-animation: circle 6s linear infinite; animation: circle 6s linear infinite } .product-box .product-left .wuliu li strong:after { width: 7px; height: 7px; background-color: #ff8c00; left: 18%; margin-left: -7px; top: 43px } .product-box .product-left .wuliu li:first-child { left: 0; } .product-box .product-left .wuliu li:first-child span { padding-left: 40px; left: 6px } .product-box .product-left .wuliu li:first-child span:before { content: ''; display: block; position: absolute; width: 29px; height: 33px; left: 0; top: 14px; background: url(../img/china-icon.png) left top no-repeat; background-size: 100% auto } .product-box .product-left .wuliu li+li { left: -7px; } .product-box .product-left .wuliu li+li span { padding-left: 61px; left: -18px } .product-box .product-left .wuliu li+li span:before { content: ''; display: block; position: absolute; width: 49px; height: 23px; background: url(../img/ship-icon.png) left top no-repeat; background-size: 100% auto; left: 0; top: 10px } .product-box .product-left .wuliu li+li+li span { padding-left: 45px; left: 0px } .product-box .product-left .wuliu li+li+li span:before { content: ''; display: block; position: absolute; left: 0; top: 7px; width: 33px; height: 33px; background: url(../img/earth-icon.png) left top no-repeat; background-size: 100% auto } .product-box .product-left .wuliu:before { content: ''; display: block; width: 724px; height: 25px; background: url(../img/dashed-line.png) left top no-repeat; background-size: 100% auto; left: -85px; bottom: 25px; position: absolute } .product-box .product-right { width: 50%; padding-left: 50px } .product-box .product-right .product-img { position: relative; width: 727px; height: 727px; border-radius: 50%; background: url(../img/circle-black.png) left top no-repeat; background-size: 100% auto; text-align: right } .product-box .product-right .product-img img { margin: 45px 62px 0 0; width: 75% } .product-box .product-right .product-img:before { content: ''; display: block; width: 82%; height: 82%; position: absolute; left: 9%; top: 9%; background-image: -webkit-linear-gradient(243deg, rgba(52, 103, 142, 0.49) 0%, rgba(35, 89, 115, 0.49) 100%); background-image: -moz-linear-gradient(243deg, rgba(52, 103, 142, 0.49) 0%, rgba(35, 89, 115, 0.49) 100%); background-image: -o-linear-gradient(243deg, rgba(52, 103, 142, 0.49) 0%, rgba(35, 89, 115, 0.49) 100%); background-image: linear-gradient(153deg, rgba(52, 103, 142, 0.49) 0%, rgba(35, 89, 115, 0.49) 100%); z-index: -1; border-radius: 50% } .product-box .product-right p { margin-left: 205px; padding-left: 52px; width: 480px; font-size: 18px; color: #fff; font-family: 'sans-l'; background: url(../img/email-c.png) left top no-repeat; background-size: 34px 36px; line-height: 35px } .product-box .product-right p a { color: #3892c9; font-size: 20px; font-family: 'sans-b' } .product-intro { background: #fff; } .product-intro .p-intro-img { width: 46%; background: url(../img/intro-bg.png) left top no-repeat; background-size: 100% auto; position: relative; padding-top: 35px } .product-intro .p-intro-img img { width: 60%; display: block; margin: 0 auto } .product-intro .p-intro-img:before { content: ''; display: block; position: absolute; left: 15%; top: 0; width: 0; height: 0; border-top: 21px solid #39576e; border-right: 24px solid transparent } .product-intro .intro-desc { width: 54%; padding: 70px 0 70px 105px; background-color: #204c65; background-image: linear-gradient(0deg, #204c65 0%, #38779b 100%) } .product-intro .intro-desc h3 { width: 80%; position: relative; font-size: 40px; color: #fff; line-height: 50px; margin-bottom: 30px } .product-intro .intro-desc h3:before, .product-intro .intro-desc h3:after { content: ''; display: block; position: absolute; border-radius: 50% } .product-intro .intro-desc h3:before { width: 18px; height: 18px; background-color: #f5f8fc; opacity: 0.23; left: -35px; top: 16px } .product-intro .intro-desc h3:after { width: 10px; height: 10px; background-color: #e39321; left: -31px; top: 20px } .product-intro .intro-desc p { font-size: 18px; color: #fff; line-height: 30px; margin-bottom: 45px; font-family: 'sans-l'; width: 80% } .intro-kinds { margin-top: 80px } .intro-kinds .kinds-left { width: 64%; border-radius: 0px 0px 148px 0px; position: relative } .intro-kinds .kinds-left .wuliao-img { width: 100%; position: relative } .intro-kinds .kinds-left .wuliao-img img { border-radius: 0px 0px 148px 0px } .intro-kinds .kinds-left .wuliao-img:before { content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 0px 0px 148px 0px; box-shadow: inset 0px -5px 5px 0px rgba(44, 149, 209, 0.06) } .intro-kinds .kinds-left .kind-desc { padding-top: 150px; margin-top: -150px; width: 100%; height: 100%; background-color: #ffffff; box-shadow: 0px 5px 5px 0px rgba(51, 147, 203, 0.12); border-radius: 0px 0px 148px 0px } .intro-kinds .kinds-left .kind-desc p { padding-left: 40px; color: #265672; font-size: 18px; line-height: 34px; width: 80%; padding: 22px 0; margin-left: 13%; font-family: "sans-l"; position: relative } .intro-kinds .kinds-left .kind-desc p:before { content: ''; display: block; width: 27px; height: 3px; background: #25546f; position: absolute; left: -40px; top: 38px } .intro-kinds .kinds-left .kind-desc p:after { content: ''; display: block; position: absolute; left: -12%; top: -26px; width: 52px; height: 52px; background: #fff url(../img/a-yellow.png) center center no-repeat; background-size: 17px 25px; border-radius: 50%; z-index: 2 } .intro-kinds .kind-right { width: 25%; padding-left: 50px } .common-detail h3 { color: #292c33; font-size: 40px; line-height: 58px; font-family: 'sans-e'; margin-bottom: 28px } .common-detail p { color: #292c33; font-size: 18px; line-height: 34px; font-family: "sans-l"; margin-bottom: 34px } .intro-youshi { margin-top: 105px; display: table } .intro-youshi .ys-left, .intro-youshi .ys-right { width: 50%; display: table-cell; vertical-align: middle } .intro-youshi .ys-left { position: relative } .intro-youshi .ys-left h3, .intro-youshi .ys-left p { padding-left: 22%; padding-right: 15% } .intro-youshi .ys-left a { display: block; margin-top: 110px; width: 303px; height: 100px; margin-left: 22%; font-size: 28px; line-height: 34px; font-family: "sans-s"; color: #fff; padding-left: 100px; padding-top: 34px; background: url(../img/kefu-bg.png) left top no-repeat; background-size: 100% auto; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s } .intro-youshi .ys-left a:hover { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s } .intro-youshi .ys-left:before { content: ''; display: block; width: 100%; height: 50%; position: absolute; left: 0; top: 50%; background: url(../img/ys-bg.png) left top no-repeat; background-size: 465px auto; z-index: -1 } .intro-youshi .ys-right ul { padding: 32px 0; width: 100%; background: #fff; text-align: center; box-shadow: 0px 5px 13px 0px rgba(34, 102, 179, 0.11); position: relative } .intro-youshi .ys-right ul li { display: inline-block; vertical-align: top; margin-left: 5%; position: relative } .intro-youshi .ys-right ul li img { width: 45px; height: 38px; display: block; margin: 0 auto } .intro-youshi .ys-right ul li p { padding-top: 86px; background: url(../img/lc-img1.png) center top no-repeat; background-size: 45px 38px; transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s } .intro-youshi .ys-right ul li p span { display: block; color: #1b1d1e; font-size: 16px; line-height: 24px; font-family: "sans-l" } .intro-youshi .ys-right ul li:before, .intro-youshi .ys-right ul li:after { content: ''; display: block; position: absolute; border-radius: 50%; left: 50% } .intro-youshi .ys-right ul li:before { width: 23px; height: 23px; background-color: #5d656e; margin-left: -11px; top: 59px } .intro-youshi .ys-right ul li:after { width: 7px; height: 7px; background-color: #ffffff; margin-left: -3px; top: 67px } .intro-youshi .ys-right ul li:first-child { margin-left: 0 } .intro-youshi .ys-right ul li+li p { background: url(../img/lc-img2.png) center top no-repeat } .intro-youshi .ys-right ul li+li+li p { background: url(../img/lc-img3.png) center top no-repeat } .intro-youshi .ys-right ul li+li+li+li p { background: url(../img/lc-img4.png) center top no-repeat } .intro-youshi .ys-right ul li+li+li+li+li p { background: url(../img/lc-img5.png) center top no-repeat } .intro-youshi .ys-right ul li:hover p { background-position: center 15px; transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s } .intro-youshi .ys-right ul:before { content: ''; display: block; width: 76.4%; height: 1px; background: #c0c4c9; position: absolute; left: 11.8%; top: 102px } .pro-types { padding-top: 80px; margin-top: 52px; background: url(../img/pro-type-bg.jpg) left top no-repeat; background-size: 90% auto } .pro-types h3 { font-size: 40px; line-height: 58px; color: #ffffff; font-family: "sans-e" } .pro-types p { font-size: 18px; line-height: 36px; color: #ffffff; font-family: "sans-l"; margin-top: 14px; width: 80% } .pro-types ul { margin-top: 42px; font-size: 0 } .pro-types ul li { display: inline-block; vertical-align: top; width: 30%; margin-left: 36px } .pro-types ul li a { display: block } .pro-types ul li a span { display: block; box-shadow: 3px 4px 5px 0px rgba(28, 112, 227, 0.26); border-radius: 15px; position: relative } .pro-types ul li a span img { border-radius: 15px } .pro-types ul li a span:before { position: absolute; left: -0.3%; top: -0.3%; content: ''; display: block; width: 100.6%; height: 100.6%; background: -webkit-linear-gradient(90deg, #dc8222 0%, #31627e 100%); background: -moz-linear-gradient(90deg, #dc8222 0%, #31627e 100%); background: -o-linear-gradient(90deg, #dc8222 0%, #31627e 100%); background: linear-gradient(0deg, #dc8222 0%, #31627e 100%); z-index: -1; border-radius: 15px } .pro-types ul li a strong { padding: 15px; font-size: 20px; line-height: 36px; color: #1f4a63; font-family: "sans-s"; padding-left: 40px; position: relative; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s } .pro-types ul li a strong:before { content: ''; display: block; width: 25px; height: 2px; background: #204b64; position: absolute; left: 8px; top: 32px; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s } .pro-types ul li a:hover strong { padding-left: 70px; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s } .pro-types ul li a:hover strong:before { width: 55px; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s } .pro-types ul li:first-child { margin-left: 0 } .pro-items { margin-top: 80px; padding-bottom: 34px; position: relative } .pro-items h3 { font-size: 40px; line-height: 58px; color: #2c2a2a; font-family: "sans-e" } .pro-items .pro-videos ul { font-size: 0; margin-top: 40px } .pro-items .pro-videos ul li { display: inline-block; vertical-align: top; width: 48%; margin-left: 4%; position: relative; border-radius: 8px; overflow: hidden } .pro-items .pro-videos ul li video { display: block; width: 100% } .pro-items .pro-videos ul li .video-cover { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1 } .pro-items .pro-videos ul li .video-cover .img-cover { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(1, 13, 19, 0.7); background-image: -webkit-linear-gradient(90deg, rgba(4, 50, 72, 0.7) 0%, rgba(1, 13, 19, 0.7) 100%); background-image: linear-gradient(0deg, rgba(4, 50, 72, 0.7) 0%, rgba(1, 13, 19, 0.7) 100%) } .pro-items .pro-videos ul li .video-cover .img-cover h3 { font-size: 22px; line-height: 43px; color: #ffffff; font-family: "sans-e"; width: 60%; padding-top: 10%; padding-left: 8%; text-transform: Capitalize } .pro-items .pro-videos ul li .video-cover .img-cover span { position: absolute; right: 20%; top: 50%; margin-top: -60px; width: 120px; height: 120px; border: 1px dashed rgba(255, 255, 255, 0.31); border-radius: 50%; cursor: pointer } .pro-items .pro-videos ul li .video-cover .img-cover span:before { content: ''; display: block; width: 38px; height: 38px; position: absolute; left: 40px; top: 40px; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, 0.31) } .pro-items .pro-videos ul li .video-cover .img-cover span:after { content: ''; display: block; position: absolute; width: 0; height: 0; border-left: 9px solid #fff; border-top: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid transparent; top: 54px; left: 57px } .pro-items .pro-videos ul li .video-cover .img-cover em { width: 120px; height: 119px; position: absolute; left: 0; top: 0; display: block; transform: -webkit-rotate(-50deg); transform: -moz-rotate(-50deg); transform: -o-rotate(-50deg); transform: rotate(-50deg); -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; transition: 1s } .pro-items .pro-videos ul li .video-cover .img-cover em:before { content: ''; display: block; position: absolute; left: 0; top: -1px; width: 60px; height: 117px; border-radius: 60px 0 0 60px; border-left: 2px solid #fff; border-top: 2px solid #fff; border-bottom: 2px solid #fff } .pro-items .pro-videos ul li .video-cover .img-cover em:after { content: ''; display: block; width: 7px; height: 7px; position: absolute; left: 50px; bottom: -3px; background: #fff; border-radius: 50% } .pro-items .pro-videos ul li .video-cover .img-cover b { display: block; font-size: 14px; color: #fff; line-height: 40px; text-align: center; position: absolute; bottom: 0; left: 0; width: 100%; font-family: "sans-s" } .pro-items .pro-videos ul li:hover .video-cover .img-cover { background: -webkit-linear-gradient(90deg, rgba(4, 50, 72, 0.3) 0%, rgba(1, 13, 19, 0.3) 100%); background: -moz-linear-gradient(90deg, rgba(4, 50, 72, 0.3) 0%, rgba(1, 13, 19, 0.3) 100%); background: -o-linear-gradient(90deg, rgba(4, 50, 72, 0.3) 0%, rgba(1, 13, 19, 0.3) 100%); background: linear-gradient(0deg, rgba(4, 50, 72, 0.3) 0%, rgba(1, 13, 19, 0.3) 100%) } .pro-items .pro-videos ul li:hover .video-cover .img-cover span em { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg) } .pro-items .pro-videos ul li:first-child { margin-left: 0 } .pro-items .pro-cases { margin-top: 105px } .pro-items .pro-cases .case-left { width: 42% } .pro-items .pro-cases .case-left a { margin-top: 52px } .pro-items .pro-cases .case-right { width: 52%; margin-left: 6% } .pro-items .pro-cases .case-right a+a { margin-top: 12px; width: 70% } .pro-items .pro-cases a { display: block } .pro-items .pro-cases a img { border-radius: 8px } .pro-items .pro-cases a strong { font-size: 20px; line-height: 36px; color: #1f4a63; padding: 26px 0 26px 45px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; display: block } .pro-items .pro-cases a strong:after { content: ''; display: block; width: 25px; height: 2px; background: #204b64; position: absolute; left: 10px; top: 42px; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s } .pro-items .pro-cases a:hover strong { padding-left: 70px; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s } .pro-items .pro-cases a:hover strong:after { width: 55px; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s } .pro-items:before { content: ''; display: block; width: 100%; height: 83%; background: #e8eff6; z-index: -2; position: absolute; left: 0; bottom: 0 } .pro-items:after { content: ''; display: block; width: 683px; height: 447px; background: url(../img/pro-case.png) left top no-repeat; background-size: 100% auto; z-index: -1; position: absolute; right: 0; bottom: 0 } .pro-about { margin-top: 80px; position: relative } .pro-about .about-title { text-align: center; position: relative; z-index: 1 } .pro-about .about-title strong { display: inline-block; vertical-align: top; font-size: 40px; line-height: 58px; color: #f5f8fc; font-family: "sans-e"; padding: 42px 50px 26px 50px; position: relative; background-color: #204c65; background: -webkit-linear-gradient(90deg, #38779b 0%, #204c65 100%); background: -moz-linear-gradient(90deg, #38779b 0%, #204c65 100%); background: -o-linear-gradient(90deg, #38779b 0%, #204c65 100%); background: linear-gradient(0deg, #38779b 0%, #204c65 100%) } .pro-about .about-title strong:before, .pro-about .about-title strong:after { content: ''; display: block; width: 0; height: 0; position: absolute; top: 0; border-bottom: 29px solid #194158 } .pro-about .about-title strong:before { left: -21px; border-left: 21px solid transparent } .pro-about .about-title strong:after { right: -21px; border-right: 21px solid transparent } .pro-about .about-block { margin-top: 174px } .pro-about .about-block .about-left { width: 38% } .pro-about .about-block .about-left h3 { color: #101011; font-size: 40px; font-family: "sans-e"; line-height: 46px; margin-top: 75px } .pro-about .about-block .about-left ul { margin-top: 170px } .pro-about .about-block .about-left ul li { font-size: 0; position: relative; padding-top: 15px; margin-top: 10px } .pro-about .about-block .about-left ul li i { display: inline-block; vertical-align: top; color: #101011; font-size: 122px; font-family: 'Impact'; line-height: 173px } .pro-about .about-block .about-left ul li p { display: inline-block; vertical-align: top; width: 50%; font-size: 18px; color: #101011; line-height: 26px; font-family: "sans-s"; margin-top: 85px; margin-left: 20px } .pro-about .about-block .about-left ul li:before { content: ''; display: block; width: 85%; height: 100%; position: absolute; right: 0; bottom: 0; background: -webkit-linear-gradient(180deg, rgba(16, 48, 66, 0.24) 0%, rgba(255, 255, 255, 0.24) 80%); background: -moz-linear-gradient(180deg, rgba(16, 48, 66, 0.24) 0%, rgba(255, 255, 255, 0.24) 80%); background: -o-linear-gradient(180deg, rgba(16, 48, 66, 0.24) 0%, rgba(255, 255, 255, 0.24) 80%); background: linear-gradient(90deg, rgba(16, 48, 66, 0.24) 0%, rgba(255, 255, 255, 0.24) 80%); z-index: -1 } .pro-about .about-block .about-left li+li i { color: #fff; text-shadow: #949596 1px 0 0, #949596 0 1px 0, #949596 -1px 0 0, #949596 0 -1px 0 } .pro-about .about-block .about-left li+li:before { display: none } .pro-about .about-block .about-left li+li+li i { color: #101011 } .pro-about .about-block .about-left li+li+li:before { display: block } .pro-about .about-block .about-right { width: 54%; margin-left: 8%; position: relative } .pro-about .about-block .about-right .about-swiper { margin-right: 22px; text-align: right; padding-bottom: 44px } .pro-about .about-block .about-right .about-swiper .slick-prev, .pro-about .about-block .about-right .about-swiper .slick-next { width: 32px; height: 24px; margin-top: 20px; font-size: 0; cursor: pointer; position: absolute; right: 0; bottom: 0 } .pro-about .about-block .about-right .about-swiper .slick-prev { background: url(../img/l-a-b.png) left top no-repeat; background-size: 100% auto; right: 78px } .pro-about .about-block .about-right .about-swiper .slick-prev.slick-disabled { background: url(../img/l-a-g.png) left top no-repeat; background-size: 100% auto } .pro-about .about-block .about-right .about-swiper .slick-next { margin-left: 44px; background: url(../img/r-a-b.png) left top no-repeat; background-size: 100% auto } .pro-about .about-block .about-right .about-swiper .slick-next.slick-disabled { background: url(../img/r-a-g.png) left top no-repeat; background-size: 100% auto } .pro-about .about-block .about-right p { font-size: 18px; line-height: 46px; color: #aabccf; margin-top: 70px; width: 80% } .pro-about .about-block .about-right:before { content: ''; display: block; width: 80%; height: 100%; position: absolute; right: 0; top: 35px; background: url(../img/about-bg.png) right top no-repeat; background-size: 100% auto; z-index: -1 } .pro-about .about-cover { width: 100%; padding-top: 137px; border-radius: 21px; position: relative; margin-top: -98px } .pro-about .about-cover .canshu-table { padding-bottom: 50px; display: none } .pro-about .about-cover table { width: 96%; margin-left: 2%; position: relative; font-family: "sans-l"; border-collapse: collapse } .pro-about .about-cover table th { background: #38779b; color: #fff; padding: 5px 0 } .pro-about .about-cover table td { text-align: center; font-size: 16px; border: 1px solid #ccc; padding: 10px 0 } .pro-about .about-cover span { width: 64px; height: 64px; background-color: #ffffff; box-shadow: 0px -5px 5px 0px rgba(52, 130, 175, 0.11); border-radius: 50%; position: absolute; text-align: center; padding-top: 16px; left: 50%; margin-left: -32px; bottom: -42px; cursor: pointer } .pro-about .about-cover span img { width: 22px; height: 34px; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s } .pro-about .about-cover span:before { content: ''; display: block; width: 100%; height: 100%; border-radius: 50%; position: absolute; left: 0; top: 0 } .pro-about .about-cover span:after { content: ''; display: block; width: 66px; height: 66px; position: absolute; background: -webkit-linear-gradient(90deg, #ffb700 0%, #fff 100%); background: -moz-linear-gradient(90deg, #ffb700 0%, #fff 100%); background: -o-linear-gradient(90deg, #ffb700 0%, #fff 100%); background: linear-gradient(0deg, #ffb700 0%, #fff 100%); border-radius: 50%; z-index: -1; left: -1px; top: -1px; -webkit-animation: rotateMove 1.5s infinite linear; animation: rotateMove 1.5s infinite linear; } @keyframes rotateMove { from { transform: rotate(0); -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); -ms-transform: rotate(0) } to { transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg) } } @-webkit-keyframes rotateMove { from { transform: rotate(0); -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); -ms-transform: rotate(0) } to { transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg) } } .pro-about .about-change span img { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s } .pro-about .about-cover:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; border-radius: 21px; background-color: #f5f8fc } .pro-about .about-cover:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 6px; background: -webkit-linear-gradient(90deg, #38779b 0%, #204c65 100%); background: -moz-linear-gradient(90deg, #38779b 0%, #204c65 100%); background: -o-linear-gradient(90deg, #38779b 0%, #204c65 100%); background: linear-gradient(0deg, #38779b 0%, #204c65 100%); border-radius: 21px; z-index: -2 } .pro-contact { margin-top: 85px; background: url(../img/contact-c.jpg) center center no-repeat; background-size: cover; position: relative } .pro-contact .contact-left { width: 50%; padding: 90px 0 94px; position: relative } .pro-contact .contact-left h3 { font-size: 40px; line-height: 46px; color: #ffffff; font-family: "sans-e" } .pro-contact .contact-left p { font-size: 18px; line-height: 46px; color: #fff; margin-top: 13px; font-family: "sans-l"; } .pro-contact .contact-left .form input { display: inline-block; vertical-align: top; width: 46%; padding: 26px 0; margin-top: 52px; font-size: 18px; font-family: "sans-s"; background: none; border-bottom: 2px solid #ccc; margin-right: 2%; color: #fbfbfb; } .pro-contact .contact-left .form input:-ms-input-placeholder, .pro-contact .contact-left .form textarea:-ms-input-placeholder { color: #ccc } .pro-contact .contact-left .form input:-webkit-input-placeholder, .pro-contact .contact-left .form textarea:-webkit-input-placeholder { color: #ccc } .pro-contact .contact-left .form input:-moz-placeholder, .pro-contact .contact-left .form textarea:-moz-placeholder { color: #ccc } .pro-contact .contact-left .form input::placeholder, .pro-contact .contact-left .form textarea::placeholder { color: #ccc } .pro-contact .contact-left .form h4 { font-size: 18px; line-height: 24px; color: #ccc; font-family: "sans-s"; margin-top: 54px; } .pro-contact .contact-left .form h4 span { color: #e39c6c } .pro-contact .contact-left .form textarea { width: 94%; height: 100px; padding: 12px 0; background: none; resize: none; border: none; border-bottom: 2px solid #ccc; color: #ccc; font-size: 16px; font-family: "sans-l"; } .pro-contact .contact-left .form label { display: inline-block; margin-top: 32px; position: relative } .pro-contact .contact-left .form label .choose { position: absolute; width: 100%; height: 100%; opacity: 0; padding: 0; margin: 0 } .pro-contact .contact-left .form label span { display: inline-block; padding-left: 47px; font-size: 16px; line-height: 34px; font-family: "sans-l"; color: #808692; background: url(../img/check-icon.png) left top no-repeat; background-size: 34px 34px } .pro-contact .contact-left .form label .choose:checked+span { background: url(../img/checked-icon.png) left top no-repeat } .pro-contact .contact-left .form .submit-btn { width: 222px; height: 60px; margin-top: 69px; position: relative; border-radius: 30px; cursor: pointer; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s } .pro-contact .contact-left .form .submit-btn input { position: absolute; margin: 0; padding: 0; border: none; left: 0; top: 0; width: 100%; height: 100%; font-size: 34px; line-height: 60px; text-align: center; color: #fff; font-family: "sans-s"; z-index: 2 } .pro-contact .contact-left .form .submit-btn:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s } .pro-contact .contact-left .form .submit-btn:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; border-radius: 30px; background-color: #efaa05; background-image: -webkit-linear-gradient(180deg, #efaa05 0%, #eb910d 100%); background-image: -moz-linear-gradient(180deg, #efaa05 0%, #eb910d 100%); background-image: -o-linear-gradient(180deg, #efaa05 0%, #eb910d 100%); background-image: linear-gradient(90deg, #efaa05 0%, #eb910d 100%); z-index: 1 } .pro-contact .contact-left .form .submit-btn:after { content: ''; display: block; width: 224px; height: 62px; position: absolute; left: -1px; top: -1px; border-radius: 30px; background-image: -webkit-linear-gradient(90deg, #2c688d 0%, #fff 100%); background-image: -moz-linear-gradient(90deg, #2c688d 0%, #fff 100%); background-image: -o-linear-gradient(90deg, #2c688d 0%, #fff 100%); background-image: linear-gradient(0deg, #2c688d 0%, #fff 100%) } .pro-contact .contact-left:before { content: ''; display: block; width: 2px; height: 100%; background: rgba(213, 213, 213, 0.03); position: absolute; top: 0; left: -10% } .pro-contact .contact-right { position: absolute; left: 65%; top: 0; width: 390px; height: 100%; border-left: 2px solid rgba(213, 213, 213, 0.03); border-right: 2px solid rgba(213, 213, 213, 0.03) } .pro-contact .contact-right .contact-msg { position: absolute; left: 0; top: 50%; margin-top: -254px; width: 100% } .pro-contact .contact-right .contact-msg .contact-img { width: 229px; margin: 0 auto; position: relative } .pro-contact .contact-right .contact-msg .contact-img i { width: 229px; height: 229px; position: absolute; left: 0; bottom: 0; -moz-animation: turn 10s linear infinite; -webkit-animation: turn 10s linear infinite; -o-animation: turn 10s linear infinite; animation: turn 10s linear infinite } .pro-contact .contact-right .contact-msg .contact-img i:before { width: 6px; height: 6px; background-color: #3367ae; content: ''; display: block; position: absolute; left: -3px; top: 115px; border-radius: 50% } @keyframes turn { 0% { transform: rotate(0deg) } 50% { transform: rotate(-180deg) } 100% { transform: rotate(0deg) } } @-moz-keyframes turn { 0% { -moz-transform: rotate(0deg) } 50% { -moz-transform: rotate(-180deg) } 100% { -moz-transform: rotate(0deg) } } @-webkit-keyframes turn { 0% { -webkit-transform: rotate(0deg) } 50% { -webkit-transform: rotate(-180deg) } 100% { -webkit-transform: rotate(0deg) } } @-o-keyframes turn { 0% { -o-transform: rotate(0deg) } 50% { -o-transform: rotate(-180deg) } 100% { -o-transform: rotate(0deg) } } .pro-contact .contact-right .contact-msg ul { background-image: linear-gradient(0deg, #1f1f27 0%, #1e252f 100%); padding-top: 192px; margin-top: -116px; padding-left: 38px; padding-bottom: 60px } .pro-contact .contact-right .contact-msg ul li { padding-left: 54px; font-size: 18px; line-height: 46px; color: #768497; font-family: "sans-s"; margin-top: 20px; position: relative } .pro-contact .contact-right .contact-msg ul li:before { content: ''; display: block; width: 43px; height: 1px; background: #778598; position: absolute; left: 0; top: 23px } .pro-contact .contact-right:before, .pro-contact .contact-right:after { width: 4px; background: #d5d5d5; border-radius: 2px; content: ''; display: block; position: absolute } .pro-contact .contact-right:before { top: 5%; height: 26px; left: -3px; -moz-animation: move 30s linear infinite; -webkit-animation: move 30s linear infinite; -o-animation: move 30s linear infinite; animation: move 30s linear infinite } .pro-contact .contact-right:after { top: 15%; height: 52px; right: -3px; -moz-animation: move2 18s linear infinite; -webkit-animation: move2 18s linear infinite; -o-animation: move2 18s linear infinite; animation: move2 18s linear infinite } @keyframes move { 0% { top: 0 } 50% { top: 100%; margin-top: -26px } 100% { top: 0; margin-top: 0 } } @-webkit-keyframes move { 0% { top: 0 } 50% { top: 100%; margin-top: -26px } 100% { top: 0; margin-top: 0 } } @-moz-keyframes move { 0% { top: 0 } 50% { top: 100%; margin-top: -26px } 100% { top: 0; margin-top: 0 } } @-o-keyframes move { 0% { top: 0 } 50% { top: 100%; margin-top: -26px } 100% { top: 0; margin-top: 0 } } @keyframes move2 { 0% { top: 0 } 50% { top: 100%; margin-top: -52px } 100% { top: 0; margin-top: 0 } } @-webkit-keyframes move2 { 0% { top: 0 } 50% { top: 100%; margin-top: -52px } 100% { top: 0; margin-top: 0 } } @-moz-keyframes move2 { 0% { top: 0 } 50% { top: 100%; margin-top: -52px } 100% { top: 0; margin-top: 0 } } @-o-keyframes move2 { 0% { top: 0 } 50% { top: 100%; margin-top: -52px } 100% { top: 0; margin-top: 0 } } @keyframes circle { from { transform: rotate(0deg) } to { transform: rotate(360deg) } } @-moz-keyframes circle { from { -moz-transform: rotate(0deg) } to { -moz-transform: rotate(360deg) } } @-webkit-keyframes circle { from { -webkit-transform: rotate(0deg) } to { -webkit-transform: rotate(360deg) } } @-o-keyframes circle { from { -o-transform: rotate(0deg) } to { -o-transform: rotate(360deg) } } @media screen and (max-width: 1760px) { .container { width: 1440px } .product-body { /* background-size: auto 990px; */ } .product-box { margin-top: 45px } .product-box .product-left { padding-left: 50px; padding-bottom: 58px } .product-box .product-left h1 { margin-top: 45px; font-size: 60px } .product-box .product-left h3 { margin-top: 32px } .product-box .product-left .wuliu li:first-child span { left: 0 } .product-box .product-left .wuliu li+li { margin-left: -5px } .product-box .product-left .wuliu li+li+li { margin-left: -4px } .product-box .product-left .wuliu li+li+li strong:before { margin-left: -6px } .product-box .product-left .wuliu li+li+li strong:after { margin-left: -1px } .product-box .product-left .wuliu:before { width: 710px } .product-box .product-right .product-img { width: 670px; height: 670px } .product-intro .intro-desc h3 { width: 90% } .product-intro .intro-desc p { width: 90% } .intro-kinds .kinds-left .wuliao-img img { border-radius: 0px 0px 130px 0px } .intro-kinds .kinds-left .wuliao-img:before { border-radius: 0px 0px 130px 0px } .intro-kinds .kinds-left .kind-desc p:before { width: 20px; left: -30px } .intro-youshi .ys-right ul li { margin-left: 4% } .intro-youshi .ys-right ul:before { width: 78%; left: 11% } .pro-types ul li { width: 29% } } @media screen and (max-width: 1600px) { .container { width: 1280px } .header { height: 120px } .header .logo { width: 220px; margin-top: 30px } .header ul li { padding: 0 2% } .header ul li a { margin-top: 24px } .product-box .product-left { padding-left: 20px; padding-bottom: 83px } .product-box .product-left .top-zx .zixun { width: 260px; height: 260px; right: -374px; bottom: -68px } .product-box .product-left .top-zx .zixun h3 { font-size: 20px; padding: 60px 24px 0 } .product-box .product-left .top-zx .zixun a { width: 190px; height: 52px; line-height: 52px; font-size: 20px; margin-top: 35px } .product-box .product-left .top-zx .zixun:before { width: 142px } .product-box .product-left .wuliu li+li { width: 30%; margin-left: 18px } .product-box .product-left .wuliu li+li+li { margin-left: 34px; width: 28% } .product-box .product-right { padding-left: 40px } .product-box .product-right .product-img { width: 580px; height: 580px } .product-box .product-right p { margin-left: 120px; margin-top: 90px } .product-intro .intro-desc { padding: 50px 0 50px 80px } .product-intro .intro-desc h3 { font-size: 34px; margin-bottom: 20px } .product-intro .intro-desc p { font-size: 16px; line-height: 30px; margin-bottom: 20px } .intro-kinds .kinds-left .wuliao-img img { border-radius: 0px 0px 110px 0px } .intro-kinds .kinds-left .wuliao-img:before { border-radius: 0px 0px 110px 0px } .intro-kinds .kinds-left .kind-desc p { font-size: 16px; line-height: 32px } .intro-kinds .kinds-left .kind-desc p:before { width: 20px; left: -30px } .intro-kinds .kind-right { width: 32%; padding-left: 40px } .common-detail h3 { font-size: 34px; margin-bottom: 20px } .common-detail p { font-size: 16px; margin-bottom: 25px } .intro-youshi .ys-right ul li { margin-left: 3% } .intro-youshi .ys-right ul li p span { font-size: 15px } .intro-youshi .ys-right ul:before { width: 76%; left: 12% } .pro-types { padding-top: 60px } .pro-types h3 { font-size: 34px } .pro-types p { font-size: 16px; line-height: 34px } .pro-types ul { margin-top: 30px } .pro-types ul li a strong { font-size: 18px; line-height: 34px } .pro-items h3 { font-size: 34px; line-height: 50px } .pro-items .pro-videos ul li .video-cover .img-cover h3 { font-size: 20px } .pro-items .pro-videos ul li .video-cover .img-cover span { right: 15% } .pro-items .pro-cases a strong { font-size: 18px } .pro-about .about-title strong { font-size: 34px } .pro-about .about-block .about-left h3 { font-size: 34px } .pro-contact .contact-left h3 { font-size: 34px } .pro-contact .contact-left p { line-height: 40px } } @media screen and (max-width: 1440px) { .container { width: 1120px } .product-body { /* background-size: auto 860px; */ } .header .logo { width: 200px } .header ul li { padding: 0 2% } .header ul li a { font-size: 16px } .header ul li a:before { margin-right: 3px } .product-box .product-left { padding-left: 0; padding-bottom: 61px } .product-box .product-left h1 { margin-top: 10px; font-size: 50px } .product-box .product-left p { font-size: 16px; line-height: 30px } .product-box .product-left .canshu { margin-top: 20px } .product-box .product-left .canshu li { margin-left: 30px; width: 150px } .product-box .product-left .canshu li strong { height: 68px; font-size: 20px; } .product-box .product-left .canshu li span { font-size: 15px; margin-top: 12px } .product-box .product-left h3 { margin-top: 25px } .product-box .product-left img { margin-top: 20px } .product-box .product-left .top-zx .zixun { width: 220px; height: 220px; right: -297px; bottom: -56px } .product-box .product-left .top-zx .zixun h3 { font-size: 18px; padding: 60px 15px 0 } .product-box .product-left .top-zx .zixun a { width: 160px; height: 46px; line-height: 46px; font-size: 16px; margin-top: 15px } .product-box .product-left .top-zx .zixun:before { width: 100px; left: -80px; bottom: 30px } .product-box .product-left .wuliu { margin-top: 40px } .product-box .product-left .wuliu li strong:before { left: 20% } .product-box .product-left .wuliu li strong:after { left: 20% } .product-box .product-left .wuliu li+li { width: 30%; margin-left: 10px } .product-box .product-left .wuliu li+li+li { width: 30%; margin-left: 20px } .product-box .product-left .wuliu:before { width: 620px; left: -70px } .product-box .product-right { padding-left: 40px } .product-box .product-right .product-img { width: 510px; height: 510px } .product-box .product-right p { margin-left: 50px; line-height: 32px; margin-top: 55px } .product-intro .p-intro-img img { width: 70% } .intro-kinds .kinds-left .wuliao-img img { border-radius: 0px 0px 100px 0px } .intro-kinds .kinds-left .wuliao-img:before { border-radius: 0px 0px 100px 0px } .intro-kinds .kinds-left .kind-desc p { font-size: 16px; line-height: 32px } .intro-kinds .kinds-left .kind-desc p:before { width: 20px; left: -30px } .intro-kinds .kind-right { width: 32%; padding-left: 40px } .intro-youshi .ys-left a { width: 242px; height: 80px; margin-top: 50px; padding-left: 80px; padding-top: 24px; font-size: 22px } .intro-youshi .ys-right ul li { margin-left: 2.6% } .intro-youshi .ys-right ul li p span { font-size: 14px } .intro-youshi .ys-right ul:before { width: 77%; left: 11.5% } .pro-types { padding-top: 30px } .pro-items .pro-videos ul li .video-cover .img-cover span { right: 10%; width: 80px; height: 80px; margin-top: -40px } .pro-items .pro-videos ul li .video-cover .img-cover span em { width: 80px; height: 80px } .pro-items .pro-videos ul li .video-cover .img-cover span em:before { width: 40px; height: 77px; border-radius: 40px 0 0 40px } .pro-items .pro-videos ul li .video-cover .img-cover span em:after { left: 31px; bottom: -2px } .pro-items .pro-videos ul li .video-cover .img-cover span:before { width: 30px; height: 30px; left: 24px; top: 25px } .pro-items .pro-videos ul li .video-cover .img-cover span:after { top: 34px; left: 36px } .pro-items .pro-videos ul li .video-cover .img-cover b { font-size: 12px; line-height: 20px } .pro-about .about-block .about-left h3 { margin-top: 45px } .pro-about .about-block .about-left ul { margin-top: 80px } .pro-about .about-block .about-left ul li i { font-size: 90px; line-height: 150px } .pro-about .about-block .about-left ul li p { width: 56%; margin-top: 62px; font-size: 16px } .pro-about .about-block .about-right p { font-size: 16px; line-height: 36px } .pro-contact .contact-left .form input { margin-top: 40px } .pro-contact .contact-left .form h4 { margin-top: 40px } .pro-contact .contact-left .form label span { padding-left: 36px; background-size: 28px 28px } .pro-contact .contact-left .form label .choose:checked+span { background-size: 28px 28px } .pro-contact .contact-left .form .submit-btn { line-height: 56px; height: 56px; margin-top: 50px } .pro-contact .contact-left .form .submit-btn input { font-size: 28px; line-height: 54px } .pro-contact .contact-left .form .submit-btn:after { height: 56px } .pro-contact .contact-right { left: 60% } .pro-contact .contact-right .contact-msg ul { padding-top: 140px } .pro-contact .contact-right .contact-msg ul li { font-size: 16px } } @media screen and (max-width: 1280px) { .container { width: 960px } .product-body { background-size: auto 807px } .header .logo { width: 180px } .header ul li { padding: 0 1.4% } .product-box { margin-top: 30px } .product-box .product-left { padding-bottom: 61px } .product-box .product-left h1 { margin-top: 0px; font-size: 42px } .product-box .product-left p { font-size: 16px; line-height: 26px } .product-box .product-left .canshu { margin-top: 14px } .product-box .product-left .canshu li { margin-left: 25px; width: 130px } .product-box .product-left .canshu li strong { height: 58px; font-size: 18px; } .product-box .product-left .canshu li span { font-size: 14px; margin-top: 10px } .product-box .product-left h3 { margin-top: 20px } .product-box .product-left img { margin-top: 16px } .product-box .product-left .top-zx p { font-size: 14px; line-height: 36px } .product-box .product-left .top-zx .zixun { width: 220px; height: 220px; right: -297px; bottom: -56px } .product-box .product-left .top-zx .zixun h3 { font-size: 18px; padding: 60px 15px 0 } .product-box .product-left .top-zx .zixun a { width: 160px; height: 46px; line-height: 46px; font-size: 16px; margin-top: 15px } .product-box .product-left .top-zx .zixun:before { width: 100px; left: -80px; bottom: 30px } .product-box .product-left .wuliu { margin-top: 30px } .product-box .product-left .wuliu li span { font-size: 14px } .product-box .product-left .wuliu li strong { font-size: 14px } .product-box .product-left .wuliu li:first-child span { padding-left: 28px } .product-box .product-left .wuliu li:first-child span:before { width: 22px; height: 27px } .product-box .product-left .wuliu li+li { margin-left: 12px } .product-box .product-left .wuliu li+li span { padding-left: 48px } .product-box .product-left .wuliu li+li span:before { width: 40px; height: 20px; top: 14px } .product-box .product-left .wuliu li+li+li { width: 28%; margin-left: 30px } .product-box .product-left .wuliu li+li+li span { padding-left: 36px } .product-box .product-left .wuliu li+li+li span:before { width: 28px; height: 28px; top: 11px } .product-box .product-left .wuliu:before { width: 563px } .product-box .product-right { padding-left: 20px } .product-box .product-right .product-img { width: 460px; height: 460px } .product-box .product-right p { width: 400px; margin-top: 75px; font-size: 16px } .product-box .product-right p a { font-size: 18px } .product-intro .intro-desc { padding: 40px 0 30px 60px } .product-intro .intro-desc h3 { font-size: 28px; line-height: 40px } .product-intro .intro-desc p { font-size: 14px; line-height: 28px; margin-bottom: 16px } .product-intro .p-intro-img img { width: 80% } .intro-kinds .kinds-left .wuliao-img img { border-radius: 0px 0px 90px 0px } .intro-kinds .kinds-left .wuliao-img:before { border-radius: 0px 0px 90px 0px } .intro-kinds .kinds-left .kind-desc p { font-size: 14px; line-height: 28px } .intro-kinds .kinds-left .kind-desc p:before { width: 12px; left: -20px; top: 35px } .intro-kinds .kind-right { width: 32%; padding-left: 30px } .common-detail h3 { font-size: 28px; line-height: 40px; margin-bottom: 16px } .common-detail p { font-size: 14px; margin-bottom: 18px } .intro-youshi .ys-left { width: 40% } .intro-youshi .ys-left h3, .intro-youshi .ys-left p { padding-left: 15%; padding-right: 10% } .intro-youshi .ys-right { width: 60% } .intro-youshi .ys-right ul li { margin-left: 1% } .intro-youshi .ys-right ul:before { width: 66%; left: 17% } .pro-types { background-size: 96% auto } .pro-types h3 { font-size: 28px; line-height: 40px } .pro-types p { font-size: 14px; width: 90% } .pro-items h3 { font-size: 28px; line-height: 40px } .pro-about .about-block .about-left h3 { font-size: 28px; margin-top: 20px } .pro-about .about-block .about-left ul { margin-top: 40px } .pro-about .about-block .about-left ul li i { font-size: 80px } .pro-about .about-block .about-left ul li p { width: 56%; margin-top: 62px; font-size: 16px } .pro-about .about-block .about-right p { font-size: 16px; line-height: 36px } .pro-contact .contact-left h3 { font-size: 28px } .pro-contact .contact-left p { font-size: 16px; line-height: 32px } .pro-contact .contact-left .form input { margin-top: 30px; padding: 18px 0; font-size: 16px } .pro-contact .contact-left .form h4 { margin-top: 30px } .pro-contact .contact-left .form label span { padding-left: 36px; background-size: 28px 28px } .pro-contact .contact-right { left: 58% } .pro-contact .contact-right .contact-msg ul li { margin-top: 10px } } @media screen and (max-width: 1160px) { .intro-youshi .ys-right ul:before { width: 72%; left: 14% } } @media screen and (max-width: 1080px) { .intro-youshi .ys-right ul:before { width: 76%; left: 12% } } .ie9-hack .product-box .product-left .canshu li strong { color: #2f7eac } .ie9-hack .intro-kinds .kinds-left ul li i { margin-top: 0 } .ie9-hack .pro-items .pro-videos ul li { min-height: 300px } .ie9-hack .pro-about .about-block .about-left li+li i { color: #101011 } .ie9-hack .pro-contact .contact-left .form label .choose { position: relative; width: 20px; height: 20px; margin-left: 0; margin-top: 5px } .ie9-hack .pro-contact .contact-left .form label span { padding-left: 10px; background: none } #toTop { display: none; transition: background 0.5s; text-decoration: none; position: fixed; bottom: 0; right: 0px; overflow: hidden; width: 107px; height: 50px; z-index: 999; text-align: center; background-color: #204c65 } #toTop span { padding: 15px 30px 0px 30px; display: block; clear: both } #toTop span img { width: 100% } @keyframes scaleToggleOne { 0% { transform: scale(1); -webkit-transform: scale(1) } 50% { transform: scale(2); -webkit-transform: scale(2) } 100% { transform: scale(1); -webkit-transform: scale(1) } } @keyframes scaleToggleTwo { 0% { transform: scale(1); -webkit-transform: scale(1) } 20% { transform: scale(1); -webkit-transform: scale(1) } 60% { transform: scale(2); -webkit-transform: scale(2) } 100% { transform: scale(1); -webkit-transform: scale(1) } } @keyframes scaleToggleThree { 0% { transform: scale(1); -webkit-transform: scale(1) } 33% { transform: scale(1); -webkit-transform: scale(1) } 66% { transform: scale(2); -webkit-transform: scale(2) } 100% { transform: scale(1); -webkit-transform: scale(1) } } .animated { -webkit-animation-duration: .5s; animation-duration: .5s; -webkit-animation-fill-mode: both; animation-fill-mode: both } .livechat-girl { width: 100px; height: 100px; border-radius: 50%; position: fixed; bottom: 400px; right: 40px; opacity: 0; -webkit-box-shadow: 0 5px 10px 0 rgba(35, 50, 56, 0.3); box-shadow: 0 5px 10px 0 rgba(35, 50, 56, 0.3); z-index: 700; transform: translateY(0); -webkit-transform: translateY(0); -ms-transform: translateY(0); cursor: pointer; -webkit-transition: all 1s cubic-bezier(0.86, 0, 0.07, 1); transition: all 1s cubic-bezier(0.86, 0, 0.07, 1) } .livechat-girl a { color: #fff } .livechat-girl a.round { font-size: 0; display: block; clear: both; position: relative; z-index: 90; border-radius: 50%; overflow: hidden; border: 5px solid #204c65 } .livechat-girl:focus { outline: 0 } .livechat-girl.animated { opacity: 1; transform: translateY(-40px); -webkit-transform: translateY(-40px); -ms-transform: translateY(-40px) } .livechat-girl:after { content: ''; width: 12px; height: 12px; border-radius: 50%; background-image: linear-gradient(to bottom, #204c65, #204c65); position: absolute; right: 1px; top: 1px; z-index: 50 } .livechat-girl .girl { position: relative; width: 100%; height: auto; z-index: 50; background: #fff; border-radius: 100% } .livechat-girl .girl01 { position: absolute; top: 0; left: 0; z-index: 51 } .livechat-girl a:hover .girl01 { display: none } .livechat-girl .animated-circles { position: absolute; top: 0px } .livechat-girl .animated-circles .circle { background: rgba(32, 76, 101, 0.25); width: 100px; height: 100px; border-radius: 50%; position: absolute; z-index: 49; transform: scale(1); -webkit-transform: scale(1) } .livechat-girl .animated-circles.animated .c-1 { animation: 2s scaleToggleOne cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards } .livechat-girl .animated-circles.animated .c-2 { animation: 2.5s scaleToggleTwo cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards } .livechat-girl .animated-circles.animated .c-3 { animation: 3s scaleToggleThree cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards } .livechat-girl.animation-stopped .circle { opacity: 0 !important } .livechat-girl.animation-stopped .circle { opacity: 0 !important } .hide_hint { display: none } .show_hint { display: block } @media only screen and (max-width: 1599px) { .livechat-girl .livechat-hint.rd-notice-tooltip { max-width: 1060px !important } } @media only screen and (max-width: 1309px) { .livechat-girl .livechat-hint.rd-notice-tooltip { max-width: 984px !important } } @media only screen and (max-width: 1124px) { .livechat-girl .livechat-hint.rd-notice-tooltip { max-width: 600px !important } } .livechat-girl .livechat-hint { background-color: #204c65; left: -200px; top: 50%; margin-top: -30px; z-index: 0; -webkit-transition: all 0.3s cubic-bezier(0.86, 0, 0.07, 1); transition: all 0.3s cubic-bezier(0.86, 0, 0.07, 1); -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); font-size: 14px; border-radius: 3px; position: absolute; z-index: 65; max-width: 150px } .livechat-girl .livechat-hint.show_hint { -webkit-transform: translateX(40px); transform: translateX(40px); opacity: 1 } .livechat-girl .livechat-hint.hide_hint { opacity: 0; -webkit-transform: translateX(0); transform: translateX(0) } .livechat-girl .livechat-hint .rd-notice-content { background-color: #204c65; background: 0; border-radius: 3px; width: 100%; color: #fff; position: relative; z-index: 60; padding: 10px 15px; font-weight: 400; line-height: 1.45 } .livechat-girl .livechat-hint:after { position: absolute; display: block; content: ''; height: 20px; width: 20px; -webkit-box-shadow: none; box-shadow: none; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; z-index: 50; background-color: #204c65; -webkit-box-shadow: 3px 3px 10px 0 rgba(24, 37, 167, 0.2); box-shadow: 3px 3px 10px 0 rgba(24, 37, 167, 0.2); right: -6px; top: 50%; margin-top: -10px } #toTop { display: none; transition: background 0.5s; text-decoration: none; position: fixed; bottom: 0; right: 0px; overflow: hidden; width: 107px; height: 50px; z-index: 999; text-align: center; background-color: #204c65 } #toTop span { padding: 15px 30px 0px 30px; display: block; clear: both } #toTop span img { width: 100% } #toTop:hover { background-color: #222931; transition: background 0.5s } .shaft-detail-cont { display: none; } .timer-scale { width: 96%; margin: 0 2% 20px; position: relative; } .timer-scale .timer-scale-cont { line-height: 50px; padding: 0 30px; border-radius: 25px; display: inline-block; vertical-align: top; margin-right: 20px; margin-bottom: 20px; font-size: 16px; color: #fff; background: #367396; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; } .timer-scale .timer-scale-cont:hover { background: #efaa05; } .timer-scale .hov { background: #efaa05; } /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: none; touch-action: none; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-list, .slick-track, .slick-slide, .slick-slide img { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; left: 0; top: 0; display: block; zoom: 1; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { float: left; height: 100%; min-height: 1px; display: none; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-prev:focus, .slick-next:focus { outline: none; } .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: 0.25; } .slick-prev:before, .slick-next:before { font-family: "slick"; font-size: 20px; line-height: 1; color: white; opacity: 0.85; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Dots */ .slick-slider { margin-bottom: 30px; } .slick-dots { position: absolute; bottom: -45px; list-style: none; display: block; text-align: center; padding: 0px; width: 100%; } .slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0px 5px; padding: 0px; cursor: pointer; } .slick-dots li button { border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0; font-size: 0; color: transparent; padding: 5px; cursor: pointer; outline: none; } .slick-dots li button:focus { outline: none; } .slick-dots li button:before { position: absolute; top: 0; left: 0; content: "\2022"; width: 20px; height: 20px; font-family: "slick"; font-size: 6px; line-height: 20px; text-align: center; color: black; opacity: 0.25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-dots li.slick-active button:before { opacity: 0.75; }