@charset "utf-8";
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: 0
}
body, div, span, h1, h2, h3, h4, h5, h6, p, em, img, strong, b, small, u, i, center, dl, dt, dd, ol, ul, li, sub, sup, tt, var, del, dfn, ins, kbd, q, s, samp, strike, applet, object, iframe, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, blockquote, pre, a, abbr, acronym, address, big, cite, code, mark, audio, video, input, textarea, select {
margin: 0;
padding: 0
}
* {
margin: 0;
padding: 0
}
body {
font-family: 'Microsoft YaHei',arial;
font-size: 14px;
color: #666;
line-height: 1.5;
margin: 0 auto;
background: #fff;
max-width: 1920px;
-webkit-tap-highlight-color: transparent
}
a:link, a:visited {
text-decoration: none;
outline: 0;
color: #666
}
a:hover, a:active, a:focus {
color: #666;
text-decoration: none
}
ul, li {
list-style: none
}
ul {
padding: 0
}
li {
zoom: 1;
vertical-align: middle
}
ol {
margin: 0;
padding: 0;
padding-left: 36px
}
fieldset, img {
border: 0
}
img {
border: 0;
max-width: 100%
}
div {
outline: 0
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-size: 100%
}
table {
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
border: 0;
width: 100%
}
th, td {
padding: 0
}
input, textarea {
font-family: arial;
font-size: 14px
}
input {
outline: 0
}
textarea {
outline: 0
}
input[type='reset'], input[type='button'], input[type='submit'], input[type='radio'] {
cursor: pointer;
outline: 0
}
input[type='checkbox'], input[type='radio'] {
position: relative;
vertical-align: middle;
margin-bottom: 1px;
margin-left: 5px;
margin-right: 5px
}
textarea, input[type='email'], input[type='date'], input[type='password'], input[type='text'] {
padding: 0;
color: #666;
outline: 0
}
input, textarea {
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
border-radius: 0;
overflow-y: hidden;
overflow-x: hidden
}
::-webkit-input-placeholder {
color: #333
}
:-moz-placeholder {
color: #333;
opacity: 1
}
::-moz-placeholder {
color: #333;
opacity: 1
}
:-ms-input-placeholder {
color: #333
}
.fl {
float: left
}
.fr {
float: right
}
.clearfix {
clear: both
}
.clearfix:after {
clear: both;
height: 0;
content: "";
line-height: 0;
font-size: 0;
display: block
}
.pic {
width: 100%;
overflow: hidden;
position: relative
}
.pic:after {
content: '';
display: block;
padding-bottom: 100%
}
.middleCenter {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
max-width: 100%;
max-height: 100%;
display: block;
vertical-align: middle;
text-align: center;
margin: auto
}
.container {
width: 1724px;
margin-left: auto;
margin-right: auto
}
.container02 {
width: 1440px;
margin-left: auto;
margin-right: auto
}
@media(max-width:1800px) {
.container {
width: 1440px;
padding: 0 30px
}
}
@media(max-width:1500px) {
.container {
width: 1260px
}
.container02 {
width: 1260px;
padding: 0 30px
}
}
@media(max-width:1260px) {
.container {
width: 1150px
}
.container02 {
width: 1150px
}
}
@media(max-width:1160px) {
.container {
width: 1023px;
padding: 0 20px
}
.container02 {
width: 1023px;
padding: 0 20px
}
}
@media(max-width:1023px) {
.container {
width: 100%
}
.container02 {
width: 100%
}
}
.prompt {
position: fixed;
width: 100%;
height: 100%;
background: url(../images/ie_sosad.png) no-repeat center 35% #fff;
left: 0;
bottom: 0;
display: none;
z-index: 999;
filter: alpha(opacity=80);
opacity: 80
}
.prompt span {
position: absolute;
font-size: 14px;
font-family: 'Microsoft YaHei';
top: 55%;
left: 50%;
margin-left: -152px;
width: 304px;
display: block;
line-height: 24px;
color: #666
}
.prompt span a {
text-decoration: underline
}
.prompt_close {
width: 30px;
height: 30px;
position: absolute;
right: 30px;
top: 30px;
background: url(../images/closed.png) no-repeat center center;
cursor: pointer
}
#container {
overflow: hidden;
position: relative
}
.header {
height: 106px;
transition: .5s;
position: fixed;
top: 0;
left: 0;
z-index: 10;
background: rgba(21,63,128,0.95);
width: 100%
}
.header .logo {
float: left;
z-index: 4;
transition: .5s;
padding-top: 10px
}
.header .logo a {
float: left;
position: relative
}
.header .logo a img {
transition: .5s;
display: block
}
.header .header-right {
float: right;
transition: .5s;
margin-right: -56px
}
.header .header-right .nav {
float: right;
padding-right: 30px
}
.header .header-right .nav ul li {
float: left;
margin-left: 20px;
position: relative
}
.header .header-right .nav ul li > a {
display: block;
color: #fff;
font-size: 18px;
line-height: 106px;
padding: 0 1px;
width: 127px;
text-align: center;
position: relative;
transition: .5s;
text-transform: uppercase
}
.header .header-right .nav ul li > a:after {
content: '';
display: block;
opacity: 0;
width: 100%;
transition: .5s;
height: 43px;
background: #ce1220;
position: absolute;
border-radius: 5px;
bottom: 31px;
left: 0;
z-index: -1
}
.header .header-right .nav ul li .subnav {
position: absolute;
top: 90px;
left: 50%;
width: 160px;
margin-left: -80px;
display: none;
padding: 16px 0;
text-align: center
}
.header .header-right .nav ul li .subnav:after {
width: 0;
height: 0;
display: block;
position: absolute;
left: 40px;
top: 0;
z-index: 5;
content: '';
border-top: 8px transparent dashed;
border-left: 8px transparent dashed;
border-right: 8px transparent dashed;
border-bottom: 8px white solid;
overflow: hidden
}
.header .header-right .nav ul li .subnav ul {
background: #fff;
padding: 5px;
box-shadow: 0 0 5px 0 rgba(0,0,0,0.1)
}
.header .header-right .nav ul li .subnav ul li {
float: none;
margin: 0;
padding: 0;
background: 0
}
.header .header-right .nav ul li .subnav ul li a {
line-height: 50px;
font-size: 14px;
color: #333;
height: 50px;
width: auto;
padding: 0 15px;
overflow: hidden;
transition: .5s;
font-weight: normal;
text-transform: inherit
}
.header .header-right .nav ul li .subnav ul li a:after {
display: none
}
@media(min-width:1025px) {
.header .header-right .nav ul li .subnav ul li:hover a {
color: #0f336d;
text-decoration: underline
}
}
@media(min-width:1025px) {
.header .header-right .nav ul li:hover a:after {
opacity: 1
}
}
.header .header-right .nav ul:nth-child(1) {
background: 0
}
.header .header-right .nav ul .active a:after {
opacity: 1
}
.header .header-right .lan {
float: right;
font-size: 16px;
color: #fff;
padding-left: 22px
}
.header .header-right .lan a {
color: #fff;
line-height: 106px
}
.header .header-right .search {
height: 40px;
float: right;
position: relative;
margin: 33px 0
}
.header .header-right .search input {
width: 240px;
transition: .5s;
height: 40px;
padding: 0 43px 0 19px;
font-size: 14px;
color: #333;
z-index: 1;
border: 1px solid rgba(181,181,181,0.52);
background: rgba(255,255,255,0.52);
border-radius: 30px
}
.header .header-right .search a {
position: absolute;
top: 2px;
right: 3px;
z-index: 2;
height: 35px;
width: 35px;
border-radius: 50%;
background: #fff url("../images/search.png") no-repeat center center;
display: block;
background-size: 20px
}
.headerFixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
box-shadow: 0 4px 10px 0 rgba(4,0,0,0.2)
}
@-webkit-keyframes dong {
0% {
-webkit-transform: translateY(-100px);
transform: translateY(-100px)
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
@keyframes dong {
0% {
-webkit-transform: translateY(-100px);
transform: translateY(-100px)
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
@-webkit-keyframes bmove1 {
0% {
-webkit-transform: scale(1.1);
transform: scale(1.1)
}
100% {
-webkit-transform: scale(1);
transform: scale(1)
}
}
@keyframes bmove1 {
0% {
-webkit-transform: scale(1.1);
transform: scale(1.1)
}
100% {
-webkit-transform: scale(1);
transform: scale(1)
}
}
@-webkit-keyframes myfirst04 {
0% {
-webkit-transform: translateY(30px);
transform: translateY(30px)
}
50% {
-webkit-transform: translateY(60px);
transform: translateY(60px)
}
100% {
-webkit-transform: translateY(80px);
transform: translateY(80px)
}
}
@keyframes myfirst04 {
0% {
-webkit-transform: translateY(30px);
transform: translateY(30px)
}
50% {
-webkit-transform: translateY(60px);
transform: translateY(60px)
}
100% {
-webkit-transform: translateY(80px);
transform: translateY(80px)
}
}
.home-banner {
overflow: hidden;
width: 100%;
position: relative;
z-index: 1
}
.home-banner .home-banner-slick .slick-list {
position: relative;
display: block
}
.home-banner .home-banner-slick .item {
position: relative;
overflow: hidden
}
.home-banner .home-banner-slick .item img {
display: block;
transition: 5s
}
.home-banner .home-banner-slick .banner-hover {
position: absolute;
bottom: 20%;
left: 0;
width: 100%;
z-index: 5
}
.home-banner .home-banner-slick .banner-hover .bt {
font-size: 55px;
font-weight: bold;
color: #fff;
line-height: 67px;
margin-bottom: 39px
}
.home-banner .home-banner-slick .banner-hover .p {
font-size: 18px;
color: #fff;
line-height: 26px;
font-weight: bold;
margin-bottom: 96px
}
.home-banner .home-banner-slick .banner-hover .span {
position: relative
}
.home-banner .home-banner-slick .banner-hover .span:after {
content: '';
display: block;
width: 235px;
height: 167px;
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
background: #ce1220;
position: absolute;
top: 0;
left: -43px;
z-index: 1
}
.home-banner .home-banner-slick .banner-hover .span .num {
font-size: 60px;
color: #fff;
width: 192px;
float: left;
margin-top: 17px;
position: relative;
z-index: 2
}
.home-banner .home-banner-slick .banner-hover .span .pic {
float: left;
width: 285px;
height: 167px;
position: relative;
z-index: 2
}
.home-banner .home-banner-slick .slick-prev:before, .home-banner .home-banner-slick .slick-next:before {
content: ''
}
.home-banner .home-banner-slick .slick-prev {
height: 29px;
width: 29px;
left: 11%;
top: auto;
bottom: 22%;
margin: 0;
z-index: 6;
background: url("../images/left.png") no-repeat center center
}
.home-banner .home-banner-slick .slick-next {
height: 29px;
width: 29px;
left: 14%;
top: auto;
bottom: 22%;
margin: 0;
z-index: 6;
background: url("../images/right.png") no-repeat center center
}
.home-banner .home-banner-slick .slick-active a img {
transition: 5s;
animation: mymove4 5s
}
.home-banner .home-banner-slick .slick-active .banner-hover .bt {
transition: 2s;
animation: fadeInLeft2 2s
}
.home-banner .home-banner-slick .slick-active .banner-hover .p {
transition: 3s;
animation: fadeInLeft2 3s
}
.home-banner .home-banner-slick-phone {
display: none
}
.home-banner .home-banner-slick-phone .slick-list {
position: relative
}
.home-banner .home-banner-slick-phone .item {
position: relative;
overflow: hidden
}
.home-banner .home-banner-slick-phone .item img {
display: block;
transition: 5s
}
.home-banner .home-banner-slick-phone .banner-hover {
position: absolute;
bottom: 30px;
left: 0;
width: 100%;
z-index: 5
}
.home-banner .home-banner-slick-phone .banner-hover .bt {
font-size: 25px;
font-weight: bold;
color: #fff;
line-height: 40px;
margin-bottom: 10px
}
.home-banner .home-banner-slick-phone .banner-hover .p {
font-size: 16px;
color: #fff;
line-height: 25px;
font-weight: bold;
margin-bottom: 10px
}
.home-banner .home-banner-slick-phone .banner-hover .span {
position: relative
}
.home-banner .home-banner-slick-phone .banner-hover .span:after {
content: '';
display: block;
width: 100px;
height: 59px;
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
background: #ce1220;
position: absolute;
top: 0;
left: 0;
z-index: 1
}
.home-banner .home-banner-slick-phone .banner-hover .span .num {
font-size: 18px;
color: #fff;
width: 100px;
float: left;
padding-top: 3px;
position: relative;
z-index: 2;
padding-left: 33px
}
.home-banner .home-banner-slick-phone .banner-hover .span .pic {
float: left;
width: 100px;
height: 59px;
position: relative;
z-index: 2
}
.home-banner .home-banner-slick-phone .slick-prev:before, .home-banner .home-banner-slick-phone .slick-next:before {
content: ''
}
.home-banner .home-banner-slick-phone .slick-prev {
height: 29px;
width: 29px;
left: 30px;
top: auto;
bottom: 35px;
margin: 0;
z-index: 6;
background: url("../images/left.png") no-repeat center center;
background-size: 20px
}
.home-banner .home-banner-slick-phone .slick-next {
height: 29px;
width: 29px;
left: 70px;
top: auto;
bottom: 35px;
margin: 0;
z-index: 6;
background: url("../images/right.png") no-repeat center center;
background-size: 20px
}
.home-banner .home-banner-slick-phone .slick-active a img {
transition: 5s;
animation: mymove4 5s
}
@media(max-width:1600px) {
.home-banner .home-banner-slick .banner-hover .bt {
font-size: 45px;
}
.home-banner .home-banner-slick .banner-hover .p {
font-size: 14px;
}
}
@media(max-width:1023px) {
.home-banner .home-banner-slick {
display: none
}
.home-banner .home-banner-slick-phone {
display: block
}
}
@media(max-width:414px) {
.home-banner .home-banner-slick-phone .banner-hover {
bottom: 20px
}
.home-banner .home-banner-slick-phone .banner-hover .bt {
font-size: 20px;
line-height: 30px
}
.home-banner .home-banner-slick-phone .banner-hover .p {
font-size: 14px;
line-height: 21px
}
.home-banner .home-banner-slick-phone .slick-prev {
bottom: 25px
}
.home-banner .home-banner-slick-phone .slick-next {
bottom: 25px
}
}
@keyframes jump {
0% {
-webkit-transform: translateY(-40px);
transform: translateY(-40px)
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
@keyframes jump1 {
0% {
-webkit-transform: translateY(100px);
transform: translateY(100px)
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
.inbanner {
overflow: hidden;
width: 100%;
position: relative
}
.inbanner .inbanner-slick {
width: 1920px;
height: 480px;
left: 50%;
margin-left: -960px;
position: relative
}
.inbanner .inbanner-slick img {
transition: 5s;
animation: mymove4 5s;
display: block
}
.inbanner .inbanner-slick .banner-info {
position: absolute;
bottom: 73px;
left: 0;
width: 100%;
color: #fff
}
.inbanner .inbanner-slick .banner-info .h3 {
margin-bottom: -3px;
font-size: 35px;
font-weight: bold
}
.inbanner .inbanner-slick .banner-info .jsh {
font-size: 25px;
font-family: "HelveticaNeueLTPro-Lt"
}
.inbanner .inbanner-slick-phone {
display: none
}
.inbanner .inbanner-slick-phone img {
display: block;
transition: 5s;
animation: mymove4 5s
}
.inbanner .inbanner-slick-phone .banner-info {
position: absolute;
bottom: 10px;
left: 0;
width: 100%;
color: #fff
}
.inbanner .inbanner-slick-phone .banner-info .h3 {
margin-bottom: -3px;
font-size: 20px;
font-weight: bold
}
.inbanner .inbanner-slick-phone .banner-info .jsh {
font-size: 16px;
font-family: "HelveticaNeueLTPro-Lt"
}
@font-face {
font-family: "HelveticaNeueLTPro-Lt";
src: url("../font/HelveticaNeueLTPro-Lt.woff2") format("woff2"),url("../font/HelveticaNeueLTPro-Lt.woff") format("woff"),url("../font/HelveticaNeueLTPro-Lt.ttf") format("truetype"),url("../font/HelveticaNeueLTPro-Lt.eot") format("embedded-opentype"),url("../font/HelveticaNeueLTPro-Lt.svg") format("svg");
font-weight: normal;
font-style: normal
}
@media(max-width:1023px) {
.inbanner {
margin-top: 60px
}
.inbanner .inbanner-slick {
display: none
}
.inbanner .inbanner-slick-phone {
display: block
}
}
@keyframes mymove4 {
0% {
transform: scale(1)
}
50% {
transform: scale(1.03)
}
100% {
transform: scale(1)
}
}
@-webkit-keyframes mymove4 {
0% {
transform: scale(1)
}
50% {
transform: scale(1.03)
}
100% {
transform: scale(1)
}
}
.ellipsis {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden
}
.phone-nav {
position: fixed;
right: 15px;
top: 0;
line-height: 60px;
display: none;
color: #666;
z-index: 15
}
.phone-nav svg {
height: 22px;
margin-top: 19px;
display: block;
fill: #fff
}
.aboutlist {
margin: 0 -40px
}
.aboutlist li {
width: 25%;
float: left;
padding: 0 40px
}
.aboutlist li .pic {
width: 90px;
height: 90px
}
.aboutlist li .text .bt {
font-size: 24px;
color: #333;
font-weight: bold;
margin-bottom: 11px
}
.aboutlist li .text .jsh {
font-size: 16px;
color: #333;
line-height: 30px
}
.home-about {
position: relative;
padding: 93px 0 95px 0;
background: #f7f7f7 url("../images/bg.png") no-repeat bottom center
}
.home-about .container {
position: relative
}
.home-about .container .home-top {
margin-bottom: 71px
}
.home-about .container .home-top .text {
float: left;
width: 38%;
padding-top: 57px
}
.home-about .container .home-top .text .bt {
font-size: 48px;
color: #0f336d;
font-weight: bold;
margin-bottom: 17px
}
.home-about .container .home-top .text .span {
font-size: 24px;
color: #333;
font-weight: bold
}
.home-about .container .home-top .text .span:after {
content: '';
display: block;
width: 65px;
height: 4px;
background: #0f336d;
margin: 32px 0 44px 0
}
.home-about .container .home-top .text .jsh {
font-size: 16px;
color: #2f2f2f;
letter-spacing: 1px;
line-height: 30px;
margin-bottom: 23px;
height: 240px;
overflow: hidden
}
.home-about .container .home-top .img {
float: right;
width: 60.9%;
position: relative;
z-index: 3
}
.home-about .num {
position: absolute;
top: 43px;
right: -54px
}
.more a {
display: block;
width: 174px;
height: 43px;
line-height: 43px;
font-size: 18px;
color: #fff;
background: #0f336d url(../images/more.png) no-repeat 86% center;
padding-left: 32px
}
@media(min-width:1025px) {
.more a:hover {
background: #0e2e63 url(../images/more.png) no-repeat 86% center
}
}
.more p {
display: block;
width: 174px;
height: 43px;
line-height: 43px;
font-size: 18px;
color: #fff;
background: #0f336d url(../images/more.png) no-repeat 86% center;
padding-left: 32px
}
@media(min-width:1025px) {
.more p:hover {
background: #0e2e63 url(../images/more.png) no-repeat 86% center
}
}
.more b {
display: block;
width: 118px;
height: 31px;
line-height: 29px;
font-size: 14px;
color: #0f336d;
font-weight: normal;
border: 1px solid #0f336d;
background: url(../images/more2.png) no-repeat 90% center;
padding-left: 13px
}
.more span {
display: block;
width: 33px;
height: 33px;
line-height: 33px;
border-radius: 50%;
background: #cd1422 url("../images/more1.png") no-repeat center center;
background-size: 15px
}
.home-title {
text-align: center
}
.home-title h3 {
font-size: 48px;
color: #0f336d;
font-weight: bold;
margin-bottom: -1px
}
.home-title p {
font-size: 24px;
color: #1b1c1c;
letter-spacing: 2px
}
.home-product {
padding: 41px 0 73px 0
}
.home-product .home-bottom {
padding-top: 68px
}
.home-product .home-bottom ul li {
width: 50%;
float: left;
padding: 68px 35px 69px 58px;
background: #fefefe;
border-right: 3px solid #f5f5f5;
border-bottom: 3px solid #f5f5f5
}
.home-product .home-bottom ul li .box {
position: relative;
padding-right: 421px;
min-height: 302px
}
.home-product .home-bottom ul li .pic {
float: right;
position: absolute;
top: 0;
right: 0;
width: 413px
}
.home-product .home-bottom ul li .pic img {
transition: .5s
}
.home-product .home-bottom ul li .pic:after {
padding-bottom: 73.12348668280872%
}
.home-product .home-bottom ul li .text {
padding-top: 19px
}
.home-product .home-bottom ul li .text .bt {
font-size: 24px;
color: #333;
font-weight: bold;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin-bottom: 23px
}
.home-product .home-bottom ul li .text .jsh {
font-size: 16px;
color: #333;
line-height: 24px;
letter-spacing: 1px;
margin-bottom: 29px;
height: 72px;
overflow: hidden
}
.home-product .home-bottom ul li .text .span {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin-bottom: 40px
}
.home-product .home-bottom ul li .text .span span {
color: #fff;
font-size: 18px;
line-height: 28px;
background: #cd1422;
margin-right: 37px;
display: inline-block;
padding: 0 7px
}
@media(min-width:1025px) {
.home-product .home-bottom ul li:hover {
background: #0f336d
}
.home-product .home-bottom ul li:hover .pic img {
transform: scale(1.04)
}
.home-product .home-bottom ul li:hover .text .bt {
color: #fff
}
.home-product .home-bottom ul li:hover .text .jsh {
color: #fff
}
}
.home-product .home-bottom ul li:nth-child(2n) {
border-right: 0
}
@font-face {
font-family: "constantia";
src: url("../font/constantia.woff2") format("woff2"),url("../font/constantia.woff") format("woff"),url("../font/constantia.ttf") format("truetype"),url("../font/constantia.eot") format("embedded-opentype"),url("../font/constantia.svg") format("svg");
font-weight: normal;
font-style: normal
}
.home-service {
padding: 83px 0 105px 0;
background: #f7f7f7
}
.home-service .home-bottom {
font-size: 0;
padding-top: 74px
}
.home-service .home-bottom .left {
display: inline-block;
width: 20.3%;
vertical-align: middle
}
.home-service .home-bottom .left .bt {
font-size: 42px;
color: #1b1c1c;
font-weight: bold;
letter-spacing: 4px;
margin-bottom: 7px
}
.home-service .home-bottom .left .span {
font-size: 20px;
color: #1b1c1c;
background: url("../images/line.jpg") no-repeat bottom left;
letter-spacing: 1px;
padding-bottom: 36px;
margin-bottom: 72px
}
.home-service .home-bottom .left .num {
font-family: "constantia";
font-size: 40px;
color: #d5d5d5;
line-height: 39px;
text-transform: uppercase;
margin-bottom: 58px;
letter-spacing: 4px
}
.home-service .home-bottom .left .jsh {
font-size: 16px;
color: #d5d5d5;
line-height: 24px;
text-transform: uppercase;
font-family: "constantia";
letter-spacing: .8px
}
.home-service .home-bottom ul {
width: 79.7%;
display: inline-block;
vertical-align: middle
}
.home-service .home-bottom ul li {
width: 33.333333333333336%;
float: left;
padding-left: 32px
}
.home-service .home-bottom ul li .box {
position: relative;
overflow: hidden
}
.home-service .home-bottom ul li .pic:after {
padding-bottom: 167.2941176470588%
}
.home-service .home-bottom ul li .hover {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 61px 20px 80px 20px;
text-align: center;
background: #fff;
transition: .5s
}
.home-service .home-bottom ul li .hover .pic {
width: 73px;
height: 73px;
margin: 0 auto
}
.home-service .home-bottom ul li .hover .bt {
font-size: 30px;
color: #0f336d;
margin-top: 19px;
font-weight: bold;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden
}
.home-service .home-bottom ul li .hover1 {
position: absolute;
bottom: -100%;
left: 0;
width: 100%;
height: 100%;
text-align: center;
transition: .5s;
background: rgba(15,51,109,0.76)
}
.home-service .home-bottom ul li .hover1 .info {
padding: 0 29px;
position: absolute;
top: 50%;
left: 0;
width: 100%;
transform: translateY(-50%)
}
.home-service .home-bottom ul li .hover1 .pic {
width: 73px;
height: 73px;
margin: 0 auto
}
.home-service .home-bottom ul li .hover1 .bt {
font-size: 30px;
color: #fff;
font-weight: bold;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin-top: 46px;
margin-bottom: 29px
}
.home-service .home-bottom ul li .hover1 .jsh {
font-size: 16px;
color: #f7f7f7;
line-height: 24px;
height: 96px;
overflow: hidden;
letter-spacing: 1px
}
@media(min-width:1025px) {
.home-service .home-bottom ul li:hover .hover {
bottom: -100%
}
.home-service .home-bottom ul li:hover .hover1 {
bottom: 0
}
}
.home-news {
padding: 39px 0 20px 0
}
.home-news .home-bottom {
padding-top: 82px
}
.home-news .home-bottom .one {
float: left;
width: 32.5%;
padding: 25px 47px 75px 47px;
background: #f7f7f7 url("../images/bg1.jpg") no-repeat top center;
background-size: 100%
}
.home-news .home-bottom .one .title {
color: #fff;
margin-bottom: 27px
}
.home-news .home-bottom .one .title h3 {
font-size: 29px;
color: #fff;
font-weight: bold;
letter-spacing: 2px
}
.home-news .home-bottom .one .title p {
font-size: 18px;
color: #fff;
text-transform: uppercase;
letter-spacing: 2px
}
.home-news .home-bottom .one .item .bt {
font-size: 22px;
color: #333;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin-top: 38px;
font-weight: bold;
margin-bottom: 34px
}
.home-news .home-bottom .one .item .bt span {
font-weight: normal;
color: #fff;
font-size: 15px;
width: 48px;
height: 29px;
line-height: 29px;
text-align: center;
display: inline-block;
border-radius: 5px;
background: #cd1422;
text-transform: uppercase;
margin-left: 10px
}
.home-news .home-bottom .one .item .jsh {
font-size: 16px;
color: #333;
line-height: 24px;
letter-spacing: 1px;
height: 72px;
overflow: hidden;
margin-bottom: 38px
}
.home-news .home-bottom .one .item .date span {
font-size: 20px;
color: #333;
background: url("../images/date.png") no-repeat center left;
line-height: 32px;
padding-left: 35px;
float: left
}
.home-news .home-bottom .one .item .date .more {
float: right
}
.home-news .home-bottom .one .pic img {
transition: .5s
}
.home-news .home-bottom .one .pic:after {
padding-bottom: 68.81720430107526%
}
.home-news .home-bottom ul {
float: right;
width: 65.2%
}
.home-news .home-bottom ul li {
padding: 36px 34px;
background: #f7f7f7;
margin-bottom: 56px
}
.home-news .home-bottom ul li .box {
position: relative
}
.home-news .home-bottom ul li .date {
font-weight: bold;
width: 120px;
height: 120px;
text-align: center;
position: absolute;
top: 13px;
left: 0;
padding-top: 15px;
background: #fff
}
.home-news .home-bottom ul li .date h3 {
font-size: 32px;
color: #c0c0c0
}
.home-news .home-bottom ul li .date p {
font-size: 29px;
color: #c0c0c0
}
.home-news .home-bottom ul li .text {
padding-left: 154px
}
.home-news .home-bottom ul li .text .bt {
font-size: 22px;
color: #333;
font-weight: bold;
letter-spacing: 2px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin-bottom: 18px
}
.home-news .home-bottom ul li .text .jsh {
font-size: 16px;
color: #333;
line-height: 24px;
height: 48px;
overflow: hidden;
letter-spacing: 1px;
margin-bottom: 20px
}
@media(min-width:1025px) {
.home-news .home-bottom ul li:hover {
background: #0f336d
}
.home-news .home-bottom ul li:hover .text .bt {
color: #fff
}
.home-news .home-bottom ul li:hover .text .jsh {
color: #fff
}
.home-news .home-bottom ul li:hover .text .more b {
border: 1px solid #fff;
color: #fff;
background: url(../images/more2h.png) no-repeat 90% center
}
}
.footer .footer-top {
padding: 74px 0 34px 0;
background: url("../images/bg2.jpg") no-repeat top center;
background-size: cover
}
.footer .footer-top .item {
width: 33.333333333333336%;
float: left
}
.footer .footer-top .item .item-title {
font-size: 16px;
color: #fff;
font-weight: bold;
margin-bottom: 23px
}
.footer .footer-top .item .item-title:after {
content: '';
display: block;
width: 40px;
height: 2px;
background: #cd1422;
margin-top: 15px
}
.footer .footer-top .item .list {
padding-top: 27px
}
.footer .footer-top .item .list li {
width: 57%;
margin-bottom: 19px
}
.footer .footer-top .item .list li .box {
position: relative;
padding-left: 89px;
height: 70px;
color: #fff
}
.footer .footer-top .item .list li .pic {
width: 70px;
position: absolute;
top: 0;
left: 0
}
.footer .footer-top .item .list li .bt {
font-size: 14px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin-bottom: 6px
}
.footer .footer-top .item .list li .jsh {
font-size: 13px;
color: #7d7b92;
line-height: 18px;
height: 36px;
overflow: hidden
}
.footer .footer-top .item .list2 {
margin: 0 -5px
}
.footer .footer-top .item .list1 {
width: 50%;
float: left;
padding: 0 5px
}
.footer .footer-top .item .list1 li {
margin-bottom: 12px
}
.footer .footer-top .item .list1 li .box {
padding: 16px 5px 14px 58px
}
.footer .footer-top .item .list1 li .bt {
font-size: 14px;
color: #7d7b92
}
.footer .footer-top .item .list1 li .jsh {
color: #7d7b92;
font-size: 14px;
line-height: 24px
}
.footer .footer-top .item .list1 li .jsh span {
color: #fff;
font-size: 20px
}
.footer .footer-top .item .list1 li .jsh a {
color: #cd1422
}
.footer .footer-top .item .list1 .ic01 .box {
background: rgba(255,255,255,0.05) url("../images/ic01.png") no-repeat 15px 25px
}
.footer .footer-top .item .list1 .ic02 .box {
background: rgba(255,255,255,0.05) url("../images/ic02.png") no-repeat 15px 22px
}
.footer .footer-top .item .list1 .ic03 .box {
background: rgba(255,255,255,0.05) url("../images/ic03.png") no-repeat 16px 25px
}
.footer .footer-top .item .list1h li .box {
padding: 16px 5px 47px 58px
}
.footer .footer-bottom {
font-size: 13px;
padding: 21px 0;
background: #101d33;
color: #7d7b92
}
.return-top {
position: fixed;
bottom: 20px;
right: 20px;
width: 51px;
height: 51px;
line-height: 51px;
background: #cd1422;
border-radius: 50%;
text-align: center;
z-index: 999;
display: none
}
.return-top.display {
display: block
}
.bg {
background: url("../images/bg3.jpg") no-repeat top center
}
.bread {
height: 55px
}
.inmain-title {
text-align: center
}
.inmain-title .h3 {
font-size: 40px;
font-weight: bold;
color: #0f336d;
padding-bottom: 11px;
margin-bottom: 15px;
background: url(../images/line01.png) no-repeat bottom center
}
.inmain-title .p {
font-size: 16px;
color: #333
}
.in {
padding: 76px 0
}
.second-nav {
padding: 59px 0 46px 0
}
.second-nav ul {
text-align: center
}
.second-nav ul li {
display: inline-block;
vertical-align: top;
padding: 0 46px;
position: relative
}
.second-nav ul li:after {
content: '';
display: block;
width: 1px;
height: 16px;
background: #d8d8d8;
position: absolute;
top: 50%;
margin-top: -8px;
right: 0
}
.second-nav ul li a {
font-size: 20px;
color: #333;
font-weight: bold;
display: block;
line-height: 46px;
padding: 0 16px
}
@media(min-width:1025px) {
.second-nav ul li:hover a {
background: #ce1220;
color: #fff
}
}
.second-nav ul li:nth-last-child(1):after {
display: none
}
.second-nav ul .active a {
background: #ce1220;
color: #fff
}
.title1 {
position: relative;
margin-bottom: 9px
}
.title1 h3 {
font-size: 25px;
color: #333;
font-weight: bold;
position: absolute;
top: 28px;
left: 0;
background: url(../images/dot.png) no-repeat center left;
padding-left: 23px
}
.title1 p {
font-size: 83px;
color: #f1f1f5;
text-transform: uppercase;
line-height: 90px;
font-family: "Impact";
padding-left: 29px;
letter-spacing: 12px
}
.service .service-info .jsh {
font-size: 16px;
color: #333;
margin-bottom: 85px
}
.service .product-pic {
overflow: hidden;
position: relative;
width: 863px;
margin: 0 auto
}
.service .product-pic .big {
width: 100%;
float: left;
padding-right: 194px;
position: relative
}
.service .product-pic .bigImage .pic {
position: relative
}
.service .product-pic .bigImage .pic:after {
content: '';
padding-bottom: 75%;
display: block
}
.service .product-pic .smallImage {
float: right;
width: 184px;
position: absolute;
top: 0;
right: 0;
padding: 34px 0;
height: 100%
}
.service .product-pic .smallImage .slick-prev:before, .service .product-pic .smallImage .slick-next:before {
content: ''
}
.service .product-pic .smallImage .slick-prev {
height: 29px;
width: 100%;
left: 0;
top: 0;
margin: 0;
background: #e0e0e0 url("../images/prev.png") no-repeat center center
}
@media(min-width:1025px) {
.service .product-pic .smallImage .slick-prev:hover {
background: #0f336d url("../images/prevh.png") no-repeat center center
}
}
.service .product-pic .smallImage .slick-next {
height: 29px;
width: 100%;
left: 0;
top: auto;
bottom: 0;
margin: 0;
background: #e0e0e0 url("../images/next.png") no-repeat center center
}
@media(min-width:1025px) {
.service .product-pic .smallImage .slick-next:hover {
background: #0f336d url("../images/nexth.png") no-repeat center center
}
}
.service .product-pic .smallImage .box {
width: 100%;
cursor: pointer;
margin-bottom: 5px;
position: relative;
border: 1px solid #e4e4e4
}
.service .product-pic .slick-vertical .slick-slide {
border: 0
}
.service .product-pic .smallImage .pic {
cursor: pointer;
position: relative
}
.service .product-pic .smallImage .pic:after {
padding-bottom: 75%
}
.service .product-pic .smallImage .slick-current .box {
border: 1px solid #0f336d
}
@font-face {
font-family: "Impact";
src: url("../font/Impact.woff2") format("woff2"),url("../font/Impact.woff") format("woff"),url("../font/Impact.ttf") format("truetype"),url("../font/Impact.eot") format("embedded-opentype"),url("../font/Impact.svg") format("svg");
font-weight: normal;
font-style: normal
}
.about .about-info {
padding: 46px 0 0 0
}
.about .about-info .jsh {
font-size: 16px;
color: #333;
line-height: 30px;
margin-bottom: 85px
}
.about .about-info .aboutlist {
padding: 0 177px
}
.about .about-info .list {
padding: 54px 46px 0 46px;
position: relative;
margin: 0 42px
}
.about .about-info .list .slick-track {
padding-top: 175px;
padding-bottom: 185px
}
.about .about-info .list li {
width: 33.33333333%;
float: left;
-webkit-transition: all .5s;
transition: all .5s;
z-index: 1;
position: relative
}
.about .about-info .list li .box {
padding: 10px;
background: #fff;
cursor: pointer;
-webkit-transition: all .5s;
transition: all .5s;
text-align: center;
opacity: .5;
border: 3px solid #e2e2e2
}
.about .about-info .list li .icon {
display: block;
width: 100%;
position: relative;
margin: auto auto auto auto
}
.about .about-info .list li .icon:after {
content: '';
display: block;
padding-bottom: 58.38068181818182%
}
.about .about-info .list li .hover {
display: none
}
.about .about-info .list li .title {
font-size: 18px;
margin-top: 3px;
color: #333;
opacity: 0;
text-align: center
}
.about .about-info .list .slick-center {
-webkit-transform: scale(1.8);
transform: scale(1.8);
z-index: 3
}
.about .about-info .list .slick-center .box {
border: 3px solid #fff;
opacity: 1
}
.about .about-info .list .slick-center .box {
-webkit-box-shadow: 0 0 30px 0 rgba(0,0,0,0.2);
box-shadow: 0 0 30px 0 rgba(0,0,0,0.2);
z-index: 1
}
.about .about-info .list .slick-prev, .about .about-info .list .slick-next {
width: 46px;
height: 46px;
margin-top: -20px;
transition: .5s;
z-index: 4
}
.about .about-info .list .slick-prev:before, .about .about-info .list .slick-next:before {
content: ''
}
.about .about-info .list .slick-prev {
left: 0;
background: #e5e5e5 url(../images/lefth.png) no-repeat center center !important;
background-size: 10px !important
}
@media(min-width:1025px) {
.about .about-info .list .slick-prev:Hover {
background: #e60e1f url(../images/lefth.png) no-repeat center center !important;
background-size: 10px !important
}
}
.about .about-info .list .slick-next {
right: 0;
background: #e5e5e5 url(../images/righth.png) no-repeat center center !important;
background-size: 10px !important
}
@media(min-width:1025px) {
.about .about-info .list .slick-next:Hover {
background: #e60e1f url(../images/righth.png) no-repeat center center !important;
background-size: 10px !important
}
}
.contact {
padding-bottom: 0
}
.contact01 .contactlist {
overflow: hidden;
background: url(../images/line03.png) no-repeat top center;
padding-top: 85px;
margin-top: 12px;
font-size: 0;
text-align: center
}
.contact01 .contactlist li {
width: 22%;
text-align: center;
display: inline-block;
vertical-align: top
}
.contact01 .contactlist li .box {
overflow: hidden;
border-right: 1px solid #ebebeb;
margin-bottom: 32px;
padding: 35px 10px 44px 10px;
min-height: 270px
}
.contact01 .contactlist li .pic {
height: 50px;
margin-bottom: 19px
}
.contact01 .contactlist li .bt {
font-size: 16px;
color: #666;
margin-bottom: 19px
}
.contact01 .contactlist li .jsh {
font-size: 17px;
font-family: arial;
line-height: 28px;
color: #333
}
.contact01 .contactlist li .jsh a {
color: #333
}
.contact01 .contactlist li:nth-last-child(1) .box {
border: 0
}
.contact02 {
padding: 30px 0 20px 0
}
.contact02 ul {
margin: 0 -33px
}
.contact02 ul li {
width: 50%;
float: left;
padding: 0 33px
}
.contact02 ul li .box {
padding: 0 9px 10px 0;
position: relative;
overflow: hidden
}
.contact02 ul li .box:after {
content: '';
display: block;
width: 100%;
top: 10px;
left: 9px;
height: 100%;
background: #eee;
position: absolute;
z-index: 1
}
.contact02 ul li .box .info {
border: 1px solid #e5e5e5;
padding: 25px 38px 25px 38px;
overflow: hidden;
min-height: 332px;
position: relative;
z-index: 2;
background: #fff
}
.contact02 ul li .box .info .bt {
font-size: 20px;
color: #0f336d;
font-weight: bold;
margin-bottom: 22px
}
.contact02 ul li .box .info .jsh {
font-size: 16px;
color: #6a6a6a;
line-height: 28px
}
.contact02 ul li .box .info .jsh p img {
vertical-align: middle;
margin-right: 10px
}
.contact02 ul li .box .info .jsh p span {
display: block;
padding-left: 26px
}
.inmain-title1 {
text-align: center;
position: relative;
margin-bottom: 18px
}
.inmain-title1 h3 {
font-size: 27px;
color: #0f336d;
font-weight: bold;
position: relative;
z-index: 5
}
.message {
padding: 39px 0 71px 0;
overflow: hidden;
position: relative
}
.message .jsh {
text-align: center;
font-size: 16px;
color: #666;
line-height: 25px;
margin-bottom: 37px
}
.message .jsh span {
color: #f00
}
.message ul {
margin: 0 -9px;
overflow: hidden;
padding: 0 70px
}
.message ul li {
width: 50%;
float: left;
padding: 0 9px;
margin-bottom: 20px
}
.message ul li .box {
position: relative
}
.message ul li .input {
background: #f2f3f5;
width: 100%;
height: 43px;
font-size: 15px;
outline: 0;
padding: 0 29px;
border: 1px solid #f2f3f5
}
.message ul li .input:focus {
border: 1px solid #0f336d
}
.message ul li textarea {
background: #f2f3f5;
width: 100%;
height: 192px;
font-size: 15px;
border: 1px solid #f2f3f5;
outline: 0;
padding: 10px 29px
}
.message ul li textarea:focus {
border: 1px solid #0f336d
}
.message ul li font {
color: #f00;
font-size: 14px;
position: absolute;
top: 12px;
left: 14px
}
.message ul li #submit {
margin: 0 10px;
width: 360px;
height: 43px;
text-align: center;
line-height: 41px;
border: 1px solid #0f336d;
background: #0f336d;
color: #fff;
display: inline-block;
font-size: 18px
}
@media(min-width:1025px) {
.message ul li #submit:hover {
background: #0f336d
}
}
.message ul li #submit1 {
margin: 0 10px;
width: 360px;
height: 43px;
text-align: center;
line-height: 41px;
border: 1px solid #dadada;
background: 0;
color: #666;
display: inline-block;
font-size: 18px
}
@media(min-width:1025px) {
.message ul li #submit1:hover {
background: #1b4fa2;
border: 1px solid #1b4fa2;
color: #fff
}
}
.message ul .textarea {
margin-bottom: 25px;
width: 100%;
text-align: center
}
.message .bottom {
position: relative
}
.message .bottom:after {
content: '';
display: block;
width: 120px;
height: 129px;
background: url("../images/bi.png") no-repeat center center;
position: absolute;
bottom: 140px;
right: 23px
}
.map {
width: 100%
}
#allmap {
height: 540px;
width: 100%
}
#allmap img {
max-width: initial;
max-height: inherit
}
#allmap .anchorBL {
display: none
}
.join .job1 {
padding: 10px 0 0 0;
overflow: hidden
}
.join .job1 ul {
margin: 0 -42px;
text-align: left
}
.join .job1 ul li {
width: 25%;
float: left;
padding: 0 42px;
position: relative;
min-height: 206px
}
.join .job1 ul li:after {
position: absolute;
top: 0;
right: 0;
width: 1px;
background: #e1e1e1;
height: 166px
}
.join .job1 ul li .img {
height: 70px;
transition: .5s
}
.join .job1 ul li .text {
padding-top: 19px
}
.join .job1 ul li .text .bt {
font-size: 20px;
font-weight: bold;
color: #333;
margin-bottom: 6px
}
.join .job1 ul li .text .jsh {
font-size: 16px;
line-height: 27px;
color: #333
}
.join .job1 ul li:nth-child(4):after {
display: none
}
.join .bd {
padding-top: 26px;
margin-left: auto;
margin-right: auto
}
.join .bd dl {
position: relative
}
.join .bd .span-01 {
display: block;
width: 25%;
float: left;
padding-left: 67px
}
.join .bd .span-02 {
display: block;
width: 12%;
float: left;
text-align: center;
margin-right: 9%
}
.join .bd .span-03 {
display: block;
width: 15%;
float: left;
text-align: center;
margin-right: 4%
}
.join .bd .span-04 {
display: block;
width: 14%;
float: left;
text-align: center;
margin-right: 4%
}
.join .bd .span-05 {
display: block;
width: 17%;
float: left;
text-align: center
}
.join .bd .bt {
background: #0f336d;
color: #fff;
font-size: 15px;
line-height: 46px;
height: 46px
}
.join .bd dl {
margin-bottom: 3px
}
.join .bd dt {
overflow: hidden;
background: #f4f3f3;
padding: 12px 0;
cursor: pointer;
font-size: 16px;
position: relative;
transition: all .5s
}
@media(min-width:1025px) {
.join .bd dt:hover {
background: #e0eaf4
}
}
.join .bd .icon {
display: block;
position: absolute;
top: 15px;
right: 20px;
margin: auto;
width: 16px;
height: 16px
}
.join .bd .icon:before, .join .bd .icon:after {
content: "";
display: block;
background: #0f336d;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto
}
.join .bd .icon:before {
width: 100%;
height: 2px
}
.join .bd .icon:after {
width: 2px;
height: 100%;
transition: all .5s
}
.join .bd dd {
background: #fff;
height: 0;
overflow: hidden
}
.join .bd dd .nr {
padding: 22px 30px 50px 30px;
color: #777;
font-size: 16px;
line-height: 30px
}
.join .bd dd a.toudi {
width: 200px;
height: 40px;
line-height: 40px;
color: #fff;
background: #ce1220 url(../images/t.png) no-repeat 81% center;
padding-left: 45px;
border-radius: 30px;
font-size: 20px;
background-size: 25px;
display: block;
margin-top: 24px
}
.join .bd .cur dt {
background: #e0eaf4;
color: #666
}
.join .bd .cur dt .icon:after {
height: 0
}
.join .bd .cur dd {
height: auto
}
.join .bd .p-01 {
color: #333;
font-size: 20px;
margin-bottom: 5px
}
.join .bd .red {
color: #f00
}
@media(max-width:1023px) {
.join .bd {
padding-top: 30px;
padding-bottom: 30px
}
.join .bd .title {
font-size: 20px
}
.join .bd .tips {
font-size: 12px;
padding-top: 20px;
padding-bottom: 20px
}
.join .bd .bt {
font-size: 12px;
text-align: center
}
.join .bd .span-01 {
padding-left: 0
}
.join .bd dt {
font-size: 12px;
text-align: center
}
.join .bd dd .nr {
font-size: 12px;
padding: 10px 10px
}
}
.news .page {
background: #f3f3f3;
padding: 20px 0
}
.news .list {
margin-bottom: 30px;
margin-top: 65px
}
.news li {
width: 100%;
clear: both;
margin-bottom: 14px;
padding-bottom: 15px;
border-bottom: 2px solid #f3f3f3
}
.news li:last-child {
margin-bottom: 0
}
.news li .box {
display: block;
position: relative;
background: #f3f3f3;
min-height: 190px;
padding: 15px 365px 15px 192px
}
.news li .date {
position: absolute;
top: 34px;
left: 56px;
font-size: 20px;
color: #8e8e8e;
line-height: 40px
}
.news li .pic {
width: 268px;
height: 165px;
float: left;
position: absolute;
top: 13px;
right: 11px;
overflow: hidden
}
.news li .pic img {
transition: all .5s
}
.news li .text {
padding: 18px 0 0 0
}
.news li .text .more {
position: absolute;
left: 60px;
bottom: 47px
}
.news li .title {
color: #0f336d;
font-weight: 700;
font-size: 20px;
line-height: 40px;
height: 40px;
margin-bottom: 20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis
}
.news li .info {
color: #626262;
font-size: 16px;
line-height: 30px;
max-height: 60px;
overflow: hidden;
display: -moz-box;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2
}
.news li .more {
display: block;
width: 30px;
height: 30px;
border: 1px #0f336d solid;
text-align: center;
line-height: 28px;
color: #0f336d
}
@media(min-width:1025px) {
.news li .box:hover {
background: #0f336d
}
.news li .box:hover img {
transform: scale(1.1)
}
.news li .box:hover .date {
color: #fff
}
.news li .box:hover .title {
color: #fff
}
.news li .box:hover .info {
color: #fff
}
.news li .box:hover .more {
border-color: #fff;
color: #fff
}
}
.page {
clear: both;
text-align: center;
font-size: 0;
color: #947d58;
font-family: arial
}
.page em {
font-style: normal;
font-size: 18px
}
.page a, .page span {
background: #e2e2e2;
color: #999;
display: inline-block;
text-align: center;
font-size: 18px;
min-width: 40px;
line-height: 40px;
height: 40px;
border-radius: 40px;
margin: 0 3px;
padding: 0 5px;
vertical-align: middle;
-webkit-transition: background .5s;
transition: background .5s
}
.page a.cur, .page span.cur, .page a:hover, .page span:hover {
background: #0f336d;
color: #fff
}
.page a.prev, .page span.prev, .page a.next, .page span.next {
font-size: 15px;
color: #666
}
.page a.prev, .page span.prev {
background: url(../images/icon/prev.svg) no-repeat left center;
padding-left: 22px;
margin-right: 5px
}
.page a.prev:hover, .page span.prev:hover {
color: #0f336d;
background: url(../images/icon/prev-02.svg) no-repeat left center
}
.page a.next, .page span.next {
background: url(../images/icon/next.svg) no-repeat right center;
padding-right: 22px;
margin-left: 5px
}
.page a.next:hover, .page span.next:hover {
color: #0f336d;
background: url(../images/icon/next-02.svg) no-repeat right center
}
@media(max-width:768px) {
.page a, .page em {
display: none
}
.page a.prev, .page a.next {
display: inline-block
}
}
.news-show .h1 {
text-align: center;
font-size: 30px;
color: #333;
margin-bottom: 20px
}
.news-show .h2 {
text-align: center;
font-size: 14px;
color: #333;
padding: 9px 0;
background: #eee
}
.news-show .h2 span {
background: url("../images/shu.png") no-repeat center left;
padding-left: 30px;
margin: 0 20px
}
.news-show .nr {
color: #333;
font-size: 16px;
line-height: 30px;
padding: 35px 0 75px 0
}
.share {
text-align: right;
padding: 34px 17px;
background: #f3f3f3;
margin-bottom: 25px
}
.share span {
font-size: 14px;
color: #333;
line-height: 26px;
display: inline-block;
vertical-align: middle
}
.share .link {
display: inline-block
}
.share .link .bshare-custom a {
width: 26px;
height: 26px;
margin-right: 10px;
display: inline-block;
vertical-align: middle
}
.share .link .bshare-custom .bshare-weixin {
background: url("../images/icon/weixin.png") no-repeat center center;
background-size: 26px
}
.share .link .bshare-custom .bshare-qzone {
background: url("../images/icon/qzone.png") no-repeat center center;
background-size: 26px
}
.share .link .bshare-custom .bshare-sinaminiblog {
background: url("../images/icon/weibo.png") no-repeat center center;
background-size: 26px
}
.list-page-news {
overflow: hidden
}
.list-page-news li {
width: 50%;
float: left;
padding-left: 40px
}
.list-page-news li p {
height: 40px;
line-height: 40px;
font-size: 16px;
overflow: hidden;
padding: 0 70px;
background-color: #eee
}
.list-page-news li:first-child {
padding-left: 0
}
.list-page-news li:hover p {
color: #fff;
background-color: #0f336d
}
.list-page-news li:hover p a {
color: #fff
}
.float {
position: fixed;
top: 30%;
right: 20px;
z-index: 999
}
.float ul li {
height: 23px
}
.float ul li a {
color: #fff;
border: 1px solid #0f336d;
line-height: 9px;
display: block;
height: 9px;
width: 9px;
border-radius: 50%
}
.float ul .active a {
background: #0f336d
}
@media(max-width:1800px) {
.header .header-right .nav ul li {
margin-left: 15px
}
.header .header-right .nav ul li > a {
font-size: 16px;
width: 110px
}
.home-about .container .home-top .text {
padding-top: 30px
}
.home-about .container .home-top .text .bt {
font-size: 40px;
margin-bottom: 10px
}
.home-about .container .home-top .text .span:after {
margin: 25px 0 30px 0
}
.home-about .container .home-top .text .jsh {
line-height: 28px;
margin-bottom: 15px;
height: 224px
}
.aboutlist li .text .jsh {
font-size: 15px;
line-height: 26px
}
.aboutlist {
margin: 0 -30px
}
.aboutlist li {
padding: 0 30px
}
.home-product .home-bottom ul li .text .span span {
font-size: 15px;
margin-right: 24px
}
.home-product .home-bottom ul li {
padding: 68px 35px 69px 35px
}
.home-news .home-bottom ul li {
padding: 29px 34px;
margin-bottom: 38px
}
}
@media(max-width:1500px) {
.header .logo a img {
width: 170px
}
.header {
height: 80px
}
.header .header-right .nav ul li > a {
line-height: 80px;
font-size: 15px;
width: 100px
}
.header .header-right .nav ul li > a:after {
height: 40px;
bottom: 20px
}
.header .header-right .nav ul li .subnav {
top: 64px
}
.header .header-right {
margin-right: 0
}
.header .header-right .search {
margin: 20px 0
}
.header .header-right .lan a {
line-height: 80px
}
.home-banner .home-banner-slick .banner-hover {
bottom: 15%
}
.home-banner .home-banner-slick .banner-hover .bt {
font-size: 36px;
line-height: 55px;
margin-bottom: 20px
}
.home-banner .home-banner-slick .banner-hover .p {
font-size: 12px;
margin-bottom: 65px
}
.home-banner .home-banner-slick .slick-next, .home-banner .home-banner-slick .slick-prev {
bottom: 17%
}
.home-banner .home-banner-slick .banner-hover .span .pic {
width: 200px;
height: 117px
}
.home-banner .home-banner-slick .banner-hover .span:after {
width: 200px;
height: 117px;
left: 0
}
.home-banner .home-banner-slick .banner-hover .span .num {
font-size: 32px;
width: 128px;
margin-top: 5px;
padding-left: 30px
}
.aboutlist li .text .jsh {
font-size: 14px;
line-height: 25px
}
.home-about .container .home-top .text .bt {
font-size: 30px
}
.home-about .container .home-top .text .span {
font-size: 18px
}
.home-about .container .home-top .text .span:after {
margin: 15px 0 20px 0
}
.home-about .container .home-top .text .jsh {
line-height: 25px;
height: 200px;
font-size: 14px
}
.more a {
width: 120px;
height: 40px;
line-height: 40px;
font-size: 14px;
background: #0f336d url(../images/more.png) no-repeat 86% 15px !important;
padding-left: 19px;
background-size: 22px !important
}
.more p {
width: 120px;
height: 40px;
line-height: 40px;
font-size: 14px;
background: #0f336d url(../images/more.png) no-repeat 86% 15px !important;
padding-left: 19px;
background-size: 22px !important
}
.aboutlist li .text .bt {
font-size: 18px
}
.aboutlist li .pic {
width: 50px;
height: 60px
}
.home-title h3 {
font-size: 30px
}
.home-title p {
font-size: 18px
}
.home-product .home-bottom ul li {
padding: 30px
}
.home-product .home-bottom ul li .pic {
width: 213px
}
.home-product .home-bottom ul li .box {
padding-right: 225px;
min-height: 156px
}
.home-product .home-bottom ul li:hover .text .bt {
color: #fff
}
.home-product .home-bottom ul li .text .bt {
font-size: 18px;
margin-bottom: 10px
}
.home-product .home-bottom ul li .text .jsh {
font-size: 14px;
margin-bottom: 10px;
line-height:16px;
height: 48px
}
.home-product .home-bottom ul li .text .span {
margin-bottom: 20px;
}
.home-service .home-bottom ul li .hover .pic {
width: 50px;
height: 50px
}
.home-service .home-bottom ul li .hover .bt {
font-size: 18px
}
.home-service .home-bottom ul li .hover {
padding: 40px 20px
}
.home-service .home-bottom ul li .hover1 .bt {
font-size: 18px;
margin-top: 26px;
margin-bottom: 19px
}
.home-service .home-bottom ul li .hover1 .pic {
width: 50px;
height: 50px
}
.home-service .home-bottom ul li .hover1 .jsh {
font-size: 14px
}
.home-service .home-bottom .left .bt {
font-size: 32px
}
.home-service .home-bottom .left .span {
font-size: 16px;
padding-bottom: 20px;
margin-bottom: 40px
}
.home-service .home-bottom .left .num {
font-size: 30px;
margin-bottom: 28px
}
.home-news .home-bottom .one .item .bt {
font-size: 18px;
margin-bottom: 24px
}
.home-news .home-bottom .one .item .jsh {
font-size: 14px;
margin-bottom: 28px
}
.home-news .home-bottom .one .item .date span {
font-size: 14px;
padding-left: 27px;
background-size: 20px
}
.home-news .home-bottom .one {
padding: 25px 47px 46px 47px
}
.home-news .home-bottom ul li .text .bt {
font-size: 16px;
margin-bottom: 10px
}
.home-news .home-bottom ul li .text .jsh {
font-size: 14px;
margin-bottom: 10px
}
.home-news .home-bottom ul li .date {
top: 6px;
padding-top: 26px
}
.home-news .home-bottom ul li .date h3 {
font-size: 22px
}
.home-news .home-bottom ul li .date p {
font-size: 22px
}
.home-news .home-bottom ul li {
margin-bottom: 30px
}
.footer .footer-top .item .list li {
width: 71%
}
.footer .footer-top .item .list1 li .jsh span {
font-size: 16px
}
.footer .footer-top .item .list1h li .box {
padding: 16px 5px 46px 58px
}
.inmain-title .h3 {
font-size: 30px
}
.title1 h3 {
font-size: 18px;
top: 28px
}
.title1 p {
font-size: 60px;
line-height: 80px;
letter-spacing: 2px
}
.about .about-info .jsh {
font-size: 14px;
line-height: 25px;
margin-bottom: 45px
}
.about .about-info .list .slick-track {
padding-top: 160px
}
.second-nav ul li a {
font-size: 16px
}
.second-nav ul li {
padding: 0 35px
}
.service .service-info .jsh {
font-size: 14px;
margin-bottom: 45px
}
.news li .title {
font-size: 16px
}
.news li .info {
font-size: 14px;
line-height: 25px;
max-height: 50px
}
.news li .date {
font-size: 16px
}
.news-show .h1 {
font-size: 22px
}
.news-show .nr {
font-size: 14px;
line-height: 25px
}
.share {
padding: 15px
}
.list-page-news li p {
font-size: 14px;
padding: 0 30px
}
.contact02 ul li .box .info .jsh {
font-size: 14px;
line-height: 25px
}
.contact02 ul li .box .info {
padding: 20px;
min-height: 294px
}
.inbanner .inbanner-slick .banner-info .h3 {
font-size: 26px
}
.inbanner .inbanner-slick .banner-info .jsh {
font-size: 20px
}
.inbanner .inbanner-slick .banner-info {
bottom: 40px
}
.contact01 .contactlist li {
width: 25%
}
}
@media(max-width:1260px) {
.header .header-right .nav ul li {
margin-left: 10px
}
.header .header-right .nav ul li > a {
font-size: 14px;
width: 85px
}
.header .header-right .search input {
width: 200px
}
.home-news .home-bottom ul li {
padding: 25px 34px
}
}
@media(max-width:1150px) {
.header .header-right .search {
display: none
}
.header .header-right .nav{
display: none
}
.header .header-right .lan {
padding-right: 50px;
}
.header .header-right .lan a {
height:60px;
line-height:60px;
}
.phone-nav {
display: block
}
.aboutlist li {
padding: 0 10px
}
.aboutlist {
margin: 0 -10px
}
.footer .footer-top .item {
width: 100%;
float: left;
display: none
}
.footer .footer-top .item .list1 {
width: 100%
}
.footer .footer-top .item:nth-child(3) {
display: block
}
.header {
height: 60px
}
.header .logo a img {
width: 114px
}
.in {
padding: 30px 0
}
.contact02 ul li {
width: 100%;
margin-bottom: 20px
}
.contact02 ul li .box .info {
padding: 20px;
min-height: 0
}
.contact {
padding-bottom: 0
}
.footer .footer-top {
padding: 30px 0
}
.footer .footer-top .item .list1 li .box {
padding: 14px 5px 14px 58px
}
.footer .footer-top .item .list1h li .box {
padding: 14px 5px 14px 58px
}
}
@media(max-width:1024px) {
.about .about-info .list .slick-center {
-webkit-transform: scale(1);
transform: scale(1)
}
.about .about-info .list {
padding: 20px 0 0 0;
margin: 0
}
.about .about-info .list .slick-track {
padding: 0
}
}
@media(max-width:1023px) {
.footer .footer-bottom {
font-size: 12px;
padding: 15px 0;
text-align: center
}
.footer .footer-bottom span {
display: block;
float: none
}
.home-about .container .home-top .text {
width: 100%;
padding-top: 0
}
.home-about {
padding: 30px 0
}
.home-about .container .home-top .text .bt {
font-size: 20px
}
.home-about .container .home-top .text .span {
font-size: 16px
}
.float {
display: none !important
}
.home-about .container .home-top .text .jsh {
height: auto;
max-height: 200px
}
.home-about .container .home-top .img {
width: 100%;
margin-top: 10px
}
.home-about .container .home-top {
margin-bottom: 20px
}
.aboutlist li {
width: 100%;
margin-bottom: 5px
}
.home-product {
padding: 30px 0
}
.home-title h3 {
font-size: 20px
}
.home-title p {
font-size: 16px
}
.home-product .home-bottom {
padding-top: 20px
}
.home-product .home-bottom ul li {
width: 100%;
padding: 20px
}
.home-product .home-bottom ul li .text .bt {
font-size: 16px;
margin-bottom: 5px
}
.home-product .home-bottom ul li .pic {
width: 180px
}
.home-product .home-bottom ul li .box {
padding-right: 186px;
min-height: 132px
}
.home-product .home-bottom ul li .text {
padding-top: 15px
}
.home-product .home-bottom ul li .text .more {
display: none
}
.home-product .home-bottom ul li .text .jsh {
margin-bottom: 0;
height: 72px
}
.home-service {
padding: 30px 0
}
.home-service .home-bottom {
padding-top: 20px
}
.home-service .home-bottom .left {
width: 100%
}
.home-service .home-bottom .left .bt {
font-size: 22px
}
.home-service .home-bottom .left .span {
margin-bottom: 20px
}
.home-service .home-bottom .left .num {
font-size: 20px;
line-height: 29px;
margin-bottom: 10px
}
.home-service .home-bottom .left .jsh {
font-size: 14px
}
.home-service .home-bottom ul {
width: 100%
}
.home-service .home-bottom ul li {
width: 100%;
padding-left: 0;
margin-top: 20px
}
.home-news {
padding: 30px 0
}
.home-news .home-bottom {
padding-top: 20px
}
.home-news .home-bottom .one {
width: 100%;
padding: 20px
}
.home-news .home-bottom .one .title h3 {
font-size: 20px
}
.home-news .home-bottom .one .title p {
font-size: 16px
}
.home-news .home-bottom .one .title {
margin-bottom: 10px
}
.home-news .home-bottom .one .item .bt {
font-size: 16px;
margin-bottom: 15px;
margin-top: 15px
}
.home-news .home-bottom .one .item .bt span {
font-size: 12px
}
.home-news .home-bottom ul {
width: 100%;
margin-top: 15px
}
.home-news .home-bottom ul li {
padding: 20px;
margin-bottom: 10px
}
.home-news .home-bottom ul li .date {
top: 0;
padding-top: 11px;
width: 60px;
height: 60px
}
.home-news .home-bottom ul li .date h3 {
font-size: 12px
}
.home-news .home-bottom ul li .date p {
font-size: 16px
}
.home-news .home-bottom ul li .text {
padding-left: 74px
}
.inmain-title .h3 {
font-size: 20px
}
.inmain-title .p {
font-size: 14px
}
.about .about-info {
padding: 20px 0 0 0
}
.title1 h3 {
font-size: 16px;
position: relative;
top: auto;
left: auto
}
.title1 p {
font-size: 30px;
line-height: 40px
}
.about .about-info .jsh {
margin-bottom: 20px
}
.about .about-info .aboutlist {
padding: 0
}
.aboutlist li .text .bt {
font-size: 16px
}
.news-show .nr {
padding: 20px 0
}
.list-page-news li {
width: 100%;
padding-left: 0;
margin-bottom: 5px
}
.second-nav ul li a {
font-size: 13px;
line-height: 35px;
padding: 0 10px
}
.second-nav ul li {
padding: 0 5px
}
.second-nav {
padding: 20px 0
}
.contact01 .contactlist li {
width: 100%
}
.contact01 .contactlist li .box {
margin-bottom: 10px;
padding: 10px;
min-height: 0;
border-right: 0
}
.contact01 .contactlist li .pic {
height: 30px;
width: 30px;
margin: 0 auto 10px auto
}
.contact01 .contactlist li .bt {
margin-bottom: 5px
}
.message ul li {
width: 100%;
margin-bottom: 10px
}
.message ul {
padding: 0
}
.message .bottom:after {
display: none
}
.message ul li #submit {
width: 130px;
font-size: 14px
}
.message ul li #submit1 {
width: 130px;
font-size: 14px
}
.message {
padding: 30px 0
}
#allmap {
height: 340px
}
.join .job1 ul li {
width: 100%;
min-height: 0
}
.join .job1 ul li .img {
height: 40px
}
.join .job1 ul li .img img {
height: 40px
}
.join .job1 ul li .text {
padding-top: 5px
}
.join .job1 ul li .text .bt {
font-size: 16px;
margin-bottom: 0
}
.join .job1 ul li .text .jsh {
font-size: 14px;
margin-bottom: 10px
}
.join .bd {
overflow: auto
}
.join .bd .list {
width: 1023px
}
.join .bd .p-01 {
font-size: 16px
}
.join .bd dd a.toudi {
width: 100px;
height: 35px;
line-height: 35px;
padding-left: 16px;
font-size: 12px;
background-size: 15px;
margin-top: 15px
}
}
@media(max-width:992px) {
.service .product-pic {
width: 100%
}
.service .product-pic .smallImage {
display: none
}
.service .product-pic .big {
padding-right: 0
}
.service .service-info .jsh {
margin-bottom: 20px
}
}
@media(max-width:768px) {
.news li .box {
padding: 15px 300px 15px 120px
}
.news li .date {
left: 16px
}
}
@media(max-width:414px) {
.news li .box {
min-height: 0;
padding: 15px
}
.news li .date {
position: relative;
top: auto;
left: auto;
font-size: 14px;
line-height: 40px
}
.news li .pic {
width: 100%;
height: auto;
float: none;
position: relative;
top: auto;
right: auto
}
.news li .pic:after {
padding-bottom: 61.56716417910448%
}
.news li .text .more {
position: absolute;
right: 20px;
top: 20px;
left: auto;
bottom: auto;
display: none
}
.news li .title {
margin-bottom: 5px
}
}
.youqi .title {
font-size: 20px;
color: #0f336d;
font-weight: bold;
text-align: center
}
.youqi .jsh {
font-size: 16px;
color: #000;
line-height: 30px;
padding: 25px 0
}
.youqi .jsh .list {
margin-bottom: 50px
}
.youqi .jsh .list li {
width: 25%;
float: left
}
.youqi .jsh .list li .bt {
font-weight: bold
}
.yeye ul {
margin: 0 -13px
}
.yeye ul li {
width: 50%;
float: left;
padding: 0 13px;
margin-bottom: 41px
}
.yeye ul li .pic {
border: 1px solid #e5e5e5
}
.yeye ul li .pic img {
transition: .5s
}
.yeye ul li .pic:after {
padding-bottom: 60.416666666666664%
}
.yeye ul li .bt {
width: 63%;
margin: -24px auto 0 auto;
position: relative;
z-index: 2;
line-height: 49px;
font-size: 18px;
padding: 0 5px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
text-align: center;
background: #f1f7fb
}
@media(min-width:1025px) {
.yeye ul li:hover .pic img {
transform: scale(1.04)
}
.yeye ul li:hover .bt {
color: #fff;
background: #0f336d
}
}
@media(max-width:1023px) {
.yeye ul li .bt {
width: 90%;
margin: -20px auto 0 auto;
line-height: 40px;
font-size: 14px
}
.yeye ul li {
padding: 0 5px;
margin-bottom: 20px
}
.yeye ul {
margin: 0 -5px
}
.youqi .title {
font-size: 20px
}
.youqi .jsh {
font-size: 14px;
padding: 20px 0
}
.youqi .jsh .list {
margin-bottom: 20px
}
.youqi .jsh .list li {
width: 100%
}
}
.bread {
border-bottom: 1px #ededed solid;
line-height: 30px;
padding: 10px 0;
color: #777;
font-size: 14px;
font-weight: 400
}
.bread .icon {
float: left;
margin-top: 5px;
margin-right: 5px;
width: 18px;
height: 18px
}
.bread a {
color: #777
}
.bread a:hover {
color: #0f336d
}
.bread span {
color: #0f336d
}
.inside .aside {
width: 15.625%;
float: left
}
.inside .aside .category {
margin-bottom: 15px
}
.inside .aside .category .titleBig {
background: #0f336d;
color: #fff;
padding: 15px 0 15px 20px;
position: relative
}
.inside .aside .category .titleBig:after {
content: "";
display: block;
width: 50px;
height: 50px;
background: url(../images/icon/product.svg) no-repeat center;
opacity: .5;
margin: auto;
position: absolute;
right: 20px;
top: 0;
bottom: 0
}
.inside .aside .category .titleBig .cn {
font-size: 25px;
line-height: 35px;
font-weight: 700;
color: #fff;
position: relative
}
.inside .aside .category .titleBig .en {
font-size: 17px;
line-height: 25px
}
.inside .aside .category .list {
border-right: 1px #f3f3f3 solid;
border-bottom: 2px #0f336d solid;
border-left: 1px #f3f3f3 solid;
padding: 10px 10px
}
.inside .aside .category li {
position: relative;
padding: 10px 0 10px 0;
border-bottom: 1px #ccc dashed
}
.inside .aside .category li > a {
z-index: 1;
display: block;
color: #333;
font-size: 20px;
line-height: 40px;
padding: 0 10px 0 35px;
position: relative;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
transition: padding .5s
}
.inside .aside .category li > a:before {
content: ">>";
color: #333;
display: block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
font-size: 18px;
position: absolute;
left: 8px;
top: 0;
bottom: 0;
margin: auto;
transition: transform .5s
}
.inside .aside .category li:last-child {
border-bottom: 0
}
.inside .aside .category li:hover > a {
background: #0f336d;
border-color: #0f336d;
color: #fff;
padding-left: 35px
}
.inside .aside .category li:hover > a:before {
color: #fff;
transform: rotate(90deg)
}
.inside .aside .category .sencond {
padding: 10px 0;
display: none
}
.inside .aside .category .sencond a {
overflow: hidden;
display: block;
color: #333;
font-size: 18px;
line-height: 40px;
padding-left: 30px;
position: relative
}
.inside .aside .category .sencond a:before {
content: "";
display: block;
width: 5px;
height: 5px;
border-radius: 50%;
background: #333;
margin: auto;
position: absolute;
left: 13px;
top: 18px;
transition: all .5s
}
.inside .aside .category .sencond a:hover {
color: #ce1220
}
.inside .aside .category .sencond a:hover:before {
background: #ce1220
}
.inside .aside .category .sencond .active a {
color: #ce1220
}
.inside .aside .category .sencond .active a:before {
background: #ce1220
}
.inside .aside .category li.active > a {
background: #0f336d;
border-color: #0f336d;
color: #fff;
padding-left: 30px
}
.inside .aside .category li.active > a:before {
color: #fff;
transform: rotate(90deg)
}
.inside .aside .category li.active .sencond {
display: block
}
.inside .mainRight {
width: 84.375%;
float: left;
padding: 15px 0 50px 40px;
position: relative
}
.inside .mainRight .titleBig {
padding: 10px 0;
border-bottom: 1px #e9e9e9 solid;
font-weight: 700;
font-size: 20px;
color: #2e2e2f;
margin-bottom: 30px
}
.inside .mainRight .titleBig .icon {
margin: 0 4px
}
.mCategory {
display: none;
margin-bottom: 10px
}
.mCategory .list {
margin-left: -5px;
margin-right: -5px
}
.mCategory li {
width: 50%;
padding: 0 5px;
float: left
}
.mCategory select {
width: 100%;
height: 30px;
line-height: 30px
}
.product img, .productRelated img {
vertical-align: middle
}
.product .list, .productRelated .list {
margin-left: -15px;
margin-right: -15px
}
.product .list li, .productRelated .list li {
width: 50%;
float: left;
padding: 0 15px 30px 15px
}
.product .list .box, .productRelated .list .box {
display: block;
position: relative
}
.product .list .box:after, .productRelated .list .box:after {
content: "";
display: block;
background: rgba(15,51,109,0.75);
width: 100%;
height: 100%;
opacity: 0;
position: absolute;
left: 0;
top: 0;
transition: all .5s
}
.product .list .pic, .productRelated .list .pic {
position: relative
}
.product .list .pic:after, .productRelated .list .pic:after {
content: "";
display: block;
padding-top: 60.37735849056604%;
padding-bottom: 0
}
.product .list .text, .productRelated .list .text {
opacity: 0;
color: #fff;
width: 100%;
height: 100%;
padding: 0 30px;
text-align: center;
position: absolute;
z-index: 9;
top: 0;
left: 0
}
.product .list .txt, .productRelated .list .txt {
width: 100%;
position: absolute;
padding: 0 30px;
left: 0;
top: 50%;
transform: translateY(-100%);
margin-top: -20px;
transition: all .5s
}
.product .list .title, .productRelated .list .title {
font-size: 18px;
font-weight: 700;
height: 40px;
line-height: 40px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.product .list .info, .productRelated .list .info {
font-size: 16px;
height: 30px;
line-height: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.product .list .btn, .productRelated .list .btn {
text-align: right;
position: absolute;
bottom: 10px;
right: 30px;
transition: all .5s
}
@media(min-width:1025px) {
.product .list .box:hover:after, .productRelated .list .box:hover:after {
opacity: 1
}
.product .list .box:hover .text, .productRelated .list .box:hover .text {
opacity: 1
}
.product .list .box:hover .txt, .productRelated .list .box:hover .txt {
transform: translateY(-50%)
}
.product .list .box:hover .btn, .productRelated .list .box:hover .btn {
bottom: 40px
}
}
.product {
padding: 0 0 30px 0
}
.product .shm {
margin-bottom: 30px;
min-height: 165px;
padding-left: 225px;
position: relative
}
.product .shm .pic {
width: 225px;
height: 165px;
float: left;
text-align: center;
position: absolute;
left: 0;
top: 0
}
.product .shm .pic:after {
display: none
}
.product .shm .text {
color: #333;
font-size: 18px;
line-height: 32px;
padding-left: 25px
}
.product .list {
margin-bottom: 50px
}
.productRelated .titleRelated {
margin-bottom: 35px;
position: relative;
background: url(../images/title-bg.svg) no-repeat left bottom
}
.productRelated .titleRelated span {
display: inline-block;
line-height: 60px;
font-weight: 700;
color: #333;
font-size: 20px;
padding-left: 80px;
position: relative;
z-index: 1
}
.productRelated .list {
margin-left: -8px;
margin-right: -8px
}
.productRelated .list li {
width: 33.333333333333336%;
padding: 0 8px
}
.product-show img {
vertical-align: middle
}
.product-show .titleBig-02 {
text-align: center;
font-weight: 700;
color: #333;
font-size: 25px;
background: #f6f6f6;
line-height: 50px;
margin-bottom: 35px
}
.product-show .switch {
padding-bottom: 20px
}
.product-show .switch .picBig {
width: 45%;
float: left;
border-top: 7px #0f336d solid;
position: relative
}
.product-show .switch .picBig .arrows {
background: #e4e4e4;
height: 40px;
line-height: 40px;
text-align: right
}
.product-show .switch .picBig .prev {
cursor: pointer;
display: inline-block;
margin: 0 15px;
position: relative
}
.product-show .switch .picBig .prev:before {
content: "";
display: inline-block;
width: 9px;
height: 17px;
background: url(../images/icon/prev-03.svg) no-repeat center;
vertical-align: middle;
margin-top: -4px;
margin-right: 10px
}
.product-show .switch .picBig .next {
cursor: pointer;
display: inline-block;
margin: 0 15px;
position: relative
}
.product-show .switch .picBig .next:after {
content: "";
display: inline-block;
width: 9px;
height: 17px;
background: url(../images/icon/next-03.svg) no-repeat center;
vertical-align: middle;
margin-top: -4px;
margin-left: 10px
}
.product-show .switch .picBig .pic {
overflow: hidden
}
.product-show .switch .picBig .pic:after {
padding-bottom: 60.37735849056604%
}
.product-show .switch .text-picSmall {
width: 55%;
float: left;
padding-left: 55px
}
.product-show .switch .picSmall {
position: relative;
padding-left: 15px;
padding-right: 15px
}
.product-show .switch .picSmall .list {
position: relative
}
.product-show .switch .picSmall .slick-slide {
padding: 0 5px
}
.product-show .switch .picSmall .pic {
cursor: pointer;
overflow: hidden
}
.product-show .switch .picSmall .pic:after {
padding-bottom: 60.37735849056604%
}
.product-show .switch .picSmall .pic:before {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
top: 0;
left: 0
}
.product-show .switch .picSmall .pic img {
transition: all .5s
}
.product-show .switch .picSmall .pic:hover:before {
box-shadow: 0 0 0 1px #0f336d inset
}
.product-show .switch .picSmall .pic:hover img {
transform: scale(1.1)
}
.product-show .switch .picSmall .slick-current .pic:before {
box-shadow: 0 0 0 1px #0f336d inset
}
.product-show .switch .picSmall .prev {
width: 40px;
height: 40px;
border-radius: 50%;
background: #ddd url(../images/icon/prev-03.svg) no-repeat center;
cursor: pointer;
position: absolute;
z-index: 9;
left: 0;
top: 50%;
transform: translateY(-50%)
}
.product-show .switch .picSmall .prev:hover {
background: #d01d2a url(../images/icon/prev-04.svg) no-repeat center
}
.product-show .switch .picSmall .next {
width: 40px;
height: 40px;
border-radius: 50%;
background: #ddd url(../images/icon/next-03.svg) no-repeat center;
cursor: pointer;
position: absolute;
z-index: 9;
right: 0;
top: 50%;
transform: translateY(-50%)
}
.product-show .switch .picSmall .next:hover {
background: #d01d2a url(../images/icon/next-04.svg) no-repeat center
}
.product-show .switch .title {
color: #000;
font-size: 24px;
padding: 10px 0;
border-bottom: 1px #e5e5e5 solid
}
.product-show .switch .zhl {
max-width: calc(100% - 20px);
display: inline-block;
padding-left: 27px;
margin-bottom: 20px;
position: relative
}
.product-show .switch .zhl:after {
content: "";
display: block;
width: 50%;
height: 100%;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
background: #0f3c86;
transform: skew(30deg);
position: absolute;
z-index: -1;
top: 0;
right: -20px
}
.product-show .switch .zhl .icon {
display: block;
width: 54px;
height: 54px;
border-radius: 50%;
background: #0f336d;
float: left;
position: absolute;
left: 0;
top: -8px
}
.product-show .switch .zhl .txt {
display: block;
background: #0f3c86;
color: #fff;
font-size: 18px;
padding-left: 37px;
line-height: 38px;
height: 38px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.product-show .switch .info {
color: #333;
font-size: 16px;
line-height: 30px;
margin-top: 25px;
min-height: 180px;
margin-bottom: 25px
}
.product-show .item {
border-bottom: 1px #e9e9e9 solid;
padding-bottom: 30px;
margin-bottom: 30px
}
.product-show .item:last-child {
margin-bottom: 0
}
.product-show .gsh {
padding-top: 30px;
font-size: 16px;
line-height: 30px;
color: #000
}
.product-show .gsh .p-01 {
font-size: 18px;
font-weight: 700
}
.product-show .gsh .p-02 {
padding-left: 16px;
position: relative
}
.product-show .gsh .p-02:before {
content: "";
display: block;
width: 3px;
height: 3px;
border-radius: 50%;
background: #333;
position: absolute;
left: 0;
top: 15px
}
.product-show .titleGsh {
margin-bottom: 35px;
position: relative;
background: #f7f7f7 url(../images/title-bg.svg) no-repeat left bottom
}
.product-show .titleGsh span {
display: inline-block;
line-height: 60px;
font-weight: 700;
color: #333;
font-size: 20px;
padding-left: 80px;
position: relative;
z-index: 1
}
.product-show .pics-01 {
text-align: center;
margin: 40px 0
}
.product-show .pics-01 .list {
display: flex;
align-items: center;
justify-content: center
}
.product-show .pics-01 li {
display: inline-block;
padding: 0 4px;
vertical-align: middle
}
.product-show .pics-01 .box {
border: 1px #dedede solid
}
.gyxt {
font-size: 16px;
line-height: 30px
}
.gyxt .title-01 {
color: #0f336d;
text-align: center;
font-weight: 700;
font-size: 20px
}
.gyxt .title-02 {
color: #0f336d;
font-weight: 700;
font-size: 18px
}
.gyxt .title-03 {
color: #000;
text-align: center;
font-weight: 700;
font-size: 20px
}
.gyxt .liucheng {
margin-top: 20px;
margin-bottom: 20px;
-webkit-overflow-scrolling: touch
}
.gyxt .liucheng .list {
margin-left: -40px;
margin-right: -40px
}
.gyxt .liucheng li {
display: inline-block;
text-align: center;
float: left;
color: #333;
font-size: 18px;
position: relative;
width: 14.285714285714286%
}
.gyxt .liucheng li:last-child {
min-width: auto
}
.gyxt .liucheng .box {
display: inline-block;
text-align: center
}
.gyxt .liucheng .arrow {
position: absolute;
z-index: 9;
top: 25px;
right: -38px
}
.gyxt .liucheng .arrow img {
height: 11px
}
.gyxt .liucheng .pic {
width: 70px;
height: 70px;
margin: auto
}
.gyxt .liucheng .pic:after {
display: none
}
.gyxt .liucheng .hover {
display: none
}
.gyxt .liucheng .text {
padding: 10px 0
}
.gyxt .liucheng .box:hover .default {
display: none
}
.gyxt .liucheng .box:hover .hover {
display: block
}
.gyxt .div-01 {
text-align: center
}
.gyxt .div-01 .title-03 {
margin-bottom: 30px
}
.gyxt .div-01 > div {
width: 50%;
float: left;
text-align: center
}
@media screen and (max-width:1280px) {
.inside .container03 {
padding-top: 30px
}
.inside .aside {
width: 22%
}
.inside .aside .category li > a {
font-size: 16px
}
.inside .aside .category li > a:before {
font-size: 14px
}
.inside .aside .category .sencond a {
font-size: 14px
}
.inside .mainRight {
width: 78%;
padding-left: 40px;
padding-bottom: 0
}
.product .list, .productRelated .list {
margin-left: -15px;
margin-right: -15px
}
.product .list li, .productRelated .list li {
padding: 0 15px 30px 15px
}
.product .list .title, .productRelated .list .title {
font-size: 16px
}
.product .list .info, .productRelated .list .info {
font-size: 14px
}
.product .shm .text {
font-size: 14px;
line-height: 2
}
.product .list {
margin-bottom: 10px
}
.product-show .titleBig-02 {
margin-bottom: 30px
}
.product-show .switch .text-picSmall {
padding-left: 30px
}
.product-show .switch .zhl {
margin-top: 20px
}
.product-show .switch .zhl .txt {
font-size: 16px
}
.product-show .switch .info {
font-size: 14px;
line-height: 2;
margin-top: 8px;
min-height: 140px
}
.gyxt {
font-size: 14px
}
.gyxt .liucheng li {
font-size: 14px
}
}
@media screen and (max-width:1260px) {
.product-show .switch .picSmall {
display: none
}
.product-show .switch .info {
min-height: auto;
margin-bottom: 0
}
.gyxt .liucheng {
overflow: auto
}
.gyxt .liucheng .list {
width: 900px;
margin-left: -20px;
margin-right: -20px
}
.gyxt .liucheng .pic {
width: 50px;
height: 50px
}
.gyxt .liucheng .arrow {
top: 12px
}
}
@media screen and (max-width:1023px) {
.inside .aside {
width: 100%;
display: none
}
.inside .mainRight {
width: 100%;
padding: 0
}
.mCategory {
display: block
}
.product .shm {
padding-left: 170px;
min-height: 125px;
line-height: 1.5
}
.product .shm .pic {
width: 170px;
height: 125px
}
.product .list {
margin-left: -5px;
margin-right: -5px;
margin-bottom: 20px
}
.product .list li {
padding: 0 5px 10px 5px
}
}
@media screen and (max-width:767px) {
.productRelated .titleRelated {
background-size: 800px 20px;
margin-bottom: 20px
}
.productRelated .titleRelated span {
font-size: 18px;
line-height: 50px;
padding-left: 45px
}
.productRelated .list {
margin-left: -5px;
margin-right: -5px
}
.productRelated .list li {
padding: 0 5px 10px 5px
}
.product-show .titleBig-02 {
font-size: 20px;
margin-bottom: 20px
}
.product-show .switch .item {
padding-bottom: 20px;
margin-bottom: 20px
}
.product-show .switch .item:last-child {
margin-bottom: 0
}
.product-show .switch .picBig {
width: 100%
}
.product-show .switch .text-picSmall {
width: 100%;
padding-top: 10px;
padding-left: 0
}
.product-show .switch .title {
font-size: 18px
}
.product-show .titleGsh {
background-size: 800px 20px
}
.product-show .titleGsh span {
font-size: 18px;
line-height: 50px;
padding-left: 45px
}
}
.bsBox {
height: 256px !important;
width: 232px !important
}
@media(max-width:801px) {
.bread{
border-bottom:0px;
}
.bread::after{
display:block;
content:"";
border-bottom:1px solid #ededed;
clear:both;
margin-top:10px;
}
}
@media (max-width:1366px){
.home-banner .home-banner-slick .slick-next{
left: 12%;
}
.home-banner .home-banner-slick .slick-prev {
left: 8%;
}
}
@media (max-width:1280px){
.home-banner .home-banner-slick .slick-next{
left: 9%;
}
.home-banner .home-banner-slick .slick-prev {
left: 5%;
}
}