html {
font-size: 12px;
overflow-x: hidden;
}
html, body {
position: relative;
/*height: 100%;*/
}
a {
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
text-decoration: none !important;
}
a:hover {
text-decoration: none;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s
}
em {
font-style: normal;
}
ol,ul{list-style:none}
li{display:list-item}
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, meter, nav, object, ol, output, p, pre, progress, q, rp, rt, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video, xmp {
border: 0;
margin: 0;
padding: 0;
font-size: 100%;
}
body, button, input, select, textarea {
font: 14px/1 Microsoft YaHei;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
}
.containers {
width: 1500px;
margin: 0 auto;
}
.headers {
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 999;
/*border-bottom: 1px solid #E2E5EA;*/
background: rgba(0,0,0,0);
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
/*position: relative;*/
}
.headers.bg,.headers:hover {
background: #fff;
box-shadow: 0 3px 5px rgb(0 0 0 / 10%);
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.headers .header {
display: flex;
align-items: center;
justify-content: space-between;
}
.headers .header .logo {
height: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.headers .header .logo em {
width: 1px;
height: 40px;
margin: 0 10px 0 10px;
background: #555;
}
.headers .header .logo h6{
font-size: 16px;
color: #333;
}
.headers .header .logo img {
height: 50px;
}
.headers .header .navs {
display: flex;
align-items: center;
justify-content: flex-end;
}
.headers .header .navs .nav-box {
display: flex;
align-items: center;
justify-content: center;
height: 80px;
position: relative;
}
.headers .header .navs .nav-box .children {
position: absolute;
left: -30px;
top: 79px;
background: #fff;
width: calc(100% + 60px);
border-top: 1px solid #ddd;
height: 0;
overflow: hidden;
opacity: 0;
-webkit-transition: all 0s;
-o-transition: all 0s;
transition: all 0s;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
}
.headers .header .navs .nav-box:hover .children {
height: auto!important;
opacity: 1;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
z-index: 9999999;
}
.headers .header .navs .nav-box .children a {
font-size: 16px;
color: #000;
background: #fff;
padding: 15px 10px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 100%;
text-align: center;
-webkit-transition: all 0s;
-o-transition: all 0s;
transition: all 0s;
}
.headers .header .navs .nav-box .children a:hover {
color: #fff;
background: #1760AD;
-webkit-transition: all 0s;
-o-transition: all 0s;
transition: all 0s;
}
.headers .header .nav-flex-box-width {
position: absolute;
left: 0;
top: 78px;
background: #fff;
width: 100%;
border-top: 1px solid #ddd;
padding: 0 0;
box-shadow: 0 3px 5px #ddd;
height: 0;
overflow: hidden;
opacity: 0;
-webkit-transition: all 0s;
-o-transition: all 0s;
transition: all 0s;
}
.headers .header .nav-flex-box-width.flexs {
height: auto !important;
opacity: 1;
padding: 40px 0;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.headers .header .nav-flex-box-width .nav-flex-box {
display: flex;
align-items: center;
justify-content: flex-start;
}
.headers .header .nav-flex-box-width .nav-flex-box .image {
width: 360px;
height: 260px;
margin-right: 30px;
}
.headers .header .nav-flex-box-width .nav-flex-box .nav-intro {
width: 340px;
max-height: 260px;
margin-right: 100px;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
}
.headers .header .nav-flex-box-width .nav-flex-box .nav-intro h3 {
font-size: 22px;
color: #000;
width: 100%;
}
.headers .header .nav-flex-box-width .nav-flex-box .nav-intro span {
font-size: 16px;
line-height: 28px;
color: #000;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
margin-top: 15px;
}
.headers .header .nav-flex-box-width .nav-flex-box .nav-intro a {
font-size: 18px;
color: #FE6B03;
font-weight: bold;
border: 1px solid #FE6B03;
height: 36px;
padding: 0 20px;
border-radius: 30px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 30px;
}
.headers .header .nav-flex-box-width .nav-flex-box .nav-flex-list {
display: flex;
flex-wrap: wrap;
width: calc(100% - 830px);
}
.headers .header .nav-flex-box-width .nav-flex-box .nav-flex-list a {
display: flex;
align-items: center;
justify-content: space-between;
width: calc(50% - 120px);
margin-right: 120px;
border-bottom: 1px solid #ddd;
padding: 15px 0;
}
.headers .header .nav-flex-box-width .nav-flex-box .nav-flex-list a span {
width:calc(100% - 20px);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-size: 16px;
color: #000;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.headers .header .nav-flex-box-width .nav-flex-box .nav-flex-list a:hover span {
color: #1760AD;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.headers .header .nav-flex-box-width .nav-flex-box .nav-flex-list a em {
width:14px;
height:14px;
background-image: url("../image/icon_nav_r.png");
background-repeat: no-repeat;
background-position: 0 0;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.headers .header .nav-flex-box-width .nav-flex-box .nav-flex-list a:hover em {
background-position: -16px 0;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.headers .header .navs .nav-box .nav-item {
height: 80px;
line-height: 80px;
position: relative;
padding: 0 20px;
font-size: 18px;
color: #000;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.headers.bg .header .navs .nav-item {
color: #000;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.headers .header .navs .nav-item:hover,.headers .header .navs .nav-item.active {
color: #1760AD;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.headers.bg .header .navs .nav-item:hover::before,.headers.bg .header .navs .nav-item.active::before {
content: '';
position: absolute;
left: 20px;
top: calc(100% - 4px);
width: calc(100% - 40px);
height: 4px;
background: #1760AD;
border-radius: 2px;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.headers .header .navs .search {
display: flex;
align-items: center;
justify-content: center;
padding:0 0 0 20px;
}
.headers .header .navs .search em {
width: 2px;
height: 16px;
background: #1760AD;
margin: 0 15px;
}
.headers .header .navs .search img {
width: 20px;
}
.headers .header .navs .search img:first-of-type {
cursor: pointer;
}
.headers .header .navs .search img:last-of-type {
width: 18px;
margin-right: 5px;
}
.headers .header .navs .search span {
font-size:18px;
font-weight: bold;
color: #1760AD;
}
.headers .header .navs .search .se {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
position: relative;
height: 70px;
}
.headers .header .navs .search .se .se-box {
position: absolute;
left: 0;
top: 16px;
width: 0;
border-radius: 5px;
border: 1px solid #1760AD;
background: #fff;
height: 36px;
overflow: hidden;
-webkit-transition: all .1s;
-o-transition: all .1s;
transition: all .1s;
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
}
.headers .header .navs .search .se .se-box .se-input {
height: 36px;
line-height: 36px;
border: none;
outline: none;
width: calc(100% - 40px);
padding: 0 15px;
}
.headers .header .navs .search .se .se-box .se-btn {
width: 40px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
}
.headers .header .navs .search .se:hover .se-box {
width: 220px;
opacity: 1;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.banners {
width: 100%;
}
.banners .banner {
min-height: 900px;
width: 100%;
overflow: hidden;
position: relative;
}
.banners .banner .swiper-wrapper .swiper-slide {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.banners .banner .swiper-wrapper .swiper-slide .image {
width: auto;
}
.banners .banner .swiper-button-next {
right: 50px;
left: unset;
top: 50%;
bottom:unset;
border: 1px solid #ccc;
background: none;
width: 50px;
height: 50px;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.banners .banner .swiper-button-prev {
right: unset;
left: 50px;
top: 50%;
bottom: unset;
border: 1px solid #ccc;
background: none;
width: 50px;
height: 50px;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.banners .banner .swiper-button-next:after,.banners .banner .swiper-button-prev:after {
font-size: 16px;
color: #ccc;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.banners .banner .swiper-button-next:hover,.banners .banner .swiper-button-prev:hover {
border: 1px solid #1760AD;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.banners .banner .swiper-button-next:hover:after,.banners .banner .swiper-button-prev:hover:after {
color: #1760AD;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.banners .banner .swiper-pagination-banner {
position: absolute;
z-index: 999;
left: 0;
width: 100%;
text-align: center;
font-size: 0;
bottom: 15px;
}
.banners .banner .swiper-pagination-banner .swiper-pagination-bullet{
display: inline-block;
vertical-align: middle;
font-size: 14px;
margin: 0 5px;
outline: none;
width: 1em;
height: 1em;
border-radius: 50%;
border: 1px solid #fff;
background-color: #fff;
opacity : 1;
}
.banners .banner .swiper-pagination-banner .swiper-pagination-bullet.swiper-pagination-bullet-active {
border: 1px solid #1760AD;
background-color: #1760AD;
}
.G-title {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
position: relative;
}
.G-title .GT-name {
display: flex;
align-items: center;
justify-content: center;
position: relative;
font-size: 48px;
font-weight: bold;
letter-spacing: 4px;
z-index: 2;
}
.G-title .GT-name .c-black {
color: #333;
}
.G-title .GT-name .c-blue {
color: #1760AD;
}
.G-title .GT-name .c-white {
color: #ffffff;
}
.G-title .GT-name .yuan {
width: 14px;
height: 14px;
background: #333333;
border-radius: 50%;
margin: 0 7px 0 4px;
}
.G-title .GT-name .yuan.blue {
background: #1760AD;
}
.G-title .G-tip {
display: flex;
align-items: center;
justify-content: center;
margin-top: 18px;
}
.G-title .G-tip .G-text {
font-size: 18px;
color: #111;
margin: 0 20px;
letter-spacing: 2px;
}
.G-title .G-tip .c-black {
color: #333;
}
.G-title .G-tip .c-white {
color: #fff;
}
.G-title .G-tip .c-blue {
color: #1760AD;
}
.G-title .G-tip .c-line {
width: 160px;
height: 1px;
background-color: #1760AD;
position: relative;
}
.G-title .G-tip .c-line:after {
content: "";
position: absolute;
right: 0;
top: -2px;
width: 5px;
height: 5px;
border-radius: 50%;
background: #1760AD;
}
.G-title .G-tip .c-line:last-of-type:after{
right: unset;
left: 0;
}
.section-services {
padding: 70px 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
background-image: url("../image/bg_1.png");
background-position: left top;
background-repeat: no-repeat;
background-size: cover;
}
.section-services .services .s-title {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
margin-bottom: 30px;
}
.section-services .services .s-title .tag {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to right, rgba(23,101,187,0) 0%, rgba(23,101,187,1) 20%, rgba(23,101,187,1) 80%,rgba(23,101,187,0) 100%);
}
.section-services .services .s-title .tag .tag-text {
font-size: 26px;
color: #fff;
margin: 4px 10px;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
padding: 5px 40px 6px;
letter-spacing: 2px;
}
.section-services .services .s-title .image {
margin-top: 5px;
}
.section-services .services .s-box {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
width: 100%;
}
.section-services .services .s-box .box {
width: 100%;
height: 480px;
display: none;
align-items: center;
justify-content: center;
overflow: hidden;
}
.section-services .services .s-box .box.active {
display: flex;
}
.section-services .services .s-box .box .image {
width: 100%;
height: 480px;
}
.section-services .services .s-item {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin-top: 20px;
background: #fff;
}
.section-services .services .s-item .item {
display: flex;
align-items: center;
justify-content: space-between;
width: 20%;
padding: 30px 20px 35px;
background: #fff;
position: relative;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
cursor: pointer;
}
.section-services .services .s-item .item:before {
content: "";
position: absolute;
right: 0;
top: 0;
width: 1px;
height: calc(100% - 5px);
background: #eee;
}
.section-services .services .s-item .item .xian {
position: absolute;
left: 0;
bottom: 3px;
width: 100%;
height: 2px;
background-color: #E7EAF3;
}
.section-services .services .s-item .item.active {
background: #1760AD;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.section-services .services .s-item .item .name {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
}
.section-services .services .s-item .item .name span {
font-size: 26px;
font-weight: bold;
letter-spacing: 2px;
color: #000;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.section-services .services .s-item .item.active .name span {
color: #fff;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.section-services .services .s-item .item .name em {
font-size: 12px;
color: #000;
letter-spacing: 1px;
margin-top: 10px;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.section-services .services .s-item .item.active .name em {
color: #fff;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.section-services .services .s-item .item .number {
background-image: url("../image/icon_number.png");
width: 80px;
height: 62px;
background-repeat: no-repeat;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.section-services .services .s-item .item.active .number {
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.section-services .services .s-item .item .number.number-1 {
background-position: 0 0;
}
.section-services .services .s-item .item.active .number.number-1 {
background-position: -80px 0;
}
.section-services .services .s-item .item .number.number-2 {
background-position: 0 -62px;
}
.section-services .services .s-item .item.active .number.number-2 {
background-position: -80px -62px;
}
.section-services .services .s-item .item .number.number-3 {
background-position: 0 -124px;
}
.section-services .services .s-item .item.active .number.number-3 {
background-position: -80px -124px;
}
.section-services .services .s-item .item .number.number-4 {
background-position: 0 -186px;
}
.section-services .services .s-item .item.active .number.number-4 {
background-position: -80px -186px;
}
.section-services .services .s-item .item .number.number-5 {
background-position: 0 -248px;
}
.section-services .services .s-item .item.active .number.number-5 {
background-position: -80px -248px;
}
.section-category {
padding: 70px 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
}
.category {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
}
.category .lists {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin-top: 60px;
}
.category .lists .item {
width: 360px;
height: 420px;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
}
.category .lists .item .image {
width: 360px;
height: 320px;
display: flex;
align-items: center;
justify-content: center;
background-image: url("../image/icon_p1_bg.png");
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.category .lists .item .image img {
position: absolute;
top: 30px;
}
.category .lists .item .info {
display: flex;
align-items: center;
justify-content: flex-start;
background: #ECECEC;
width: 100%;
height: 100px;
padding: 20px 18px 0;
margin-top: 10px;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
background-image: url("../image/icon_02.png");
background-position: 370px 45px;
background-repeat: no-repeat;
}
.category .lists .item:hover .info {
background-color: #1760AD;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
background-image: url("../image/icon_02.png");
background-position: 290px 45px;
background-repeat: no-repeat;
}
.category .lists .item .info .icon {
background-repeat: no-repeat;
margin-right: 20px;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.category .lists .item:hover .info .icon {
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.category .lists .item .info .icon.icon-1 {
width: 38px;
height: 48px;
background-image: url("../image/icon_cate_01.png");
background-position: 0 0;
}
.category .lists .item:hover .info .icon.icon-1 {
background-position: -38px 0;
}
.category .lists .item .info .icon.icon-2 {
width: 45px;
height: 47px;
background-image: url("../image/icon_cate_02.png");
background-position: 0 0;
}
.category .lists .item:hover .info .icon.icon-2 {
background-position: -45px 0;
}
.category .lists .item .info .icon.icon-3 {
width: 49px;
height: 48px;
background-image: url("../image/icon_cate_03.png");
background-position: 0 0;
}
.category .lists .item:hover .info .icon.icon-3 {
background-position: -49px 0;
}
.category .lists .item .info .icon.icon-4 {
width: 70px;
height: 45px;
background-image: url("../image/icon_cate_04.png");
background-position: 0 0;
}
.category .lists .item:hover .info .icon.icon-4 {
background-position: -70px 0;
}
.category .lists .item .info .name {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
}
.category .lists .item .info .name .cn {
font-size: 24px;
letter-spacing: 2px;
color: #000;
margin-bottom: 5px;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.category .lists .item .info .name .en {
font-size: 13px;
color: #555;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.category .lists .item:hover .info .name .cn,.category .lists .item:hover .info .name .en {
color: #fff;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.category .lists .pro-nav .t em {
font-size: 20px;
color: #fff;
}
.show-more {
display: flex;
align-items: center;
justify-content: center;
border:1px solid #FE6B03;
background: #FE6B03;
color: #fff;
padding: 10px 20px;
border-radius: 30px;
font-size: 20px;
font-weight: bold;
margin-top: 30px;
position: relative;
}
.show-more.no-top {
margin-top: 0;
}
.show-more:hover {
background: #fff;
color: #FE6B03;
}
.show-more:before{
animation: wipes 1.6s infinite;
background-image: linear-gradient(45deg,#fff0 40%,#fff9,#fff0 60%);
background-size: 300%;
border-radius: 30px;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
@keyframes wipes{0%{background-position:150% 150%}to{background-position:-150% -150%}}
.section-ad {
padding: 40px 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
background-image: url("../image/ad_bg_01.png");
background-repeat: no-repeat;
background-size: cover;
}
.section-ad.section-ad3 {
background-image: url("../image/ad_bg_03.png");
position: relative;
z-index: 1;
}
.section-ad.section-ad4 {
background-image: url("../image/ad_bg_04.png");
}
.ad {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
position: relative;
}
.ad .t {
display: flex;
align-items: center;
justify-content: center;
}
.ad .t em {
width: 2px;
height: 20px;
background: #fff;
}
.ad .t span {
margin: 0 15px;
font-size: 22px;
letter-spacing: 1px;
color: #fff;
}
.ad .c {
display: flex;
align-items: center;
justify-content: center;
font-size: 44px;
font-weight: bold;
letter-spacing: 3px;
color: #fff;
margin: 15px 0 20px;
}
.ad .c em {
color: #FE6B03;
}
.ad4-btn {
display: flex;
align-items: center;
justify-content: center;
}
.zx {
font-size: 20px;
border: 1px solid #fff;
border-radius: 30px;
padding: 8px 20px;
color: #fff;
font-weight: bold;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
position: relative;
}
.zx:hover {
border: 1px solid #FE6B03;
background: #FE6B03;
color: #fff;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.zx.shan:before{
animation: wipes 1.6s infinite;
background-image: linear-gradient(45deg,#fff0 40%,#fff9,#fff0 60%);
background-size: 300%;
border-radius: 30px;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.zxx {
font-size: 20px;
border: 1px solid #FE6B03;
background: #FE6B03;
border-radius: 30px;
padding: 8px 20px;
color: #fff;
font-weight: bold;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
position: relative;
}
.ad4-btn .zxx {
margin-right: 30px;
}
.zxx:hover {
border: 1px solid #FE6B03;
background: #FE6B03;
color: #fff;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.zxx.shan:before{
animation: wipes 1.6s infinite;
background-image: linear-gradient(45deg,#fff0 40%,#fff9,#fff0 60%);
background-size: 300%;
border-radius: 30px;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.ad3 {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
padding: 24px 0;
}
.ad3 .ad3-left {
width: 770px;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
margin-left: 160px;
}
.ad3 .ad3-left .hd {
display: flex;
align-items: center;
justify-content: center;
font-size: 44px;
color: #fff;
}
.ad3 .ad3-left .hd span {
margin-right: 30px;
}
.ad3 .ad3-left .ad3-item {
display: flex;
align-items: center;
justify-content: center;
}
.ad3 .ad3-left .ad3-item .item {
margin-right: 30px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #fff;
margin-top: 16px;
}
.ad3 .ad3-left .ad3-item .item:last-of-type {
margin-right: 0;
}
.ad3 .ad3-left .ad3-item .item span {
border: 1px solid #fff;
width: 14px;
height: 14px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
}
.ad3 .ad3-left .ad3-item .item em {
background-color: #fff;
width: 8px;
height: 8px;
border-radius: 50%;
}
.ad3 .ad3-line {
width: 1px;
height: 80px;
background-color: rgba(255,255,255,0.5);
}
.ad3 .ad3-right {
width: calc(100% - 930px);
display: flex;
align-items: center;
justify-content: center;
}
.ad3 .ad3-right .inf {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
width: calc(100% - 144px);
}
.ad3 .ad3-right .inf span {
font-size: 20px;
color: #eee;
}
.ad3 .ad3-right .inf strong {
font-size: 40px;
color: #fff;
margin: 12px 0;
}
.ad3 .ad3-right .inf .ad3-btn {
width: 140px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: bold;
background: #FE6B03;
color: #fff;
border-radius: 20px;
}
.ad3 .ad3-right .qr {
width: 144px;
height: 144px;
}
.clear-bg {
background: none;
padding: 0;
}
.clear-bg .ad {
height: 110px;
}
.ad .adx {
padding: 20px 0;
position: absolute;
left: 600px;
top: 0;
width: calc(((100vw - 1500px) / 2) + 900px);
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
background-image: url("../image/ad_bg_02.png");
background-repeat: no-repeat;
background-size: cover;
}
.ad .adx .adxx {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
height: 70px;
width: 900px;
}
.ad .adx .adxx .tx {
color: #fff;
font-size: 24px;
letter-spacing: 2px;
}
.ad .adx .adxx .ad-btn {
display: flex;
align-items: center;
justify-content: center;
margin-top: 10px;
}
.ad .adx .adxx .ad-btn .show-more {
padding: 8px 20px;
margin-right: 20px;
margin-top: 0;
}
.section-advantage {
padding: 0 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
background-image: url("../image/bg_2.png");
background-repeat: no-repeat;
background-size: cover;
}
.advantage {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.advantage .left-image {
width: 600px;
min-height: 858px;
position: relative;
}
.advantage .left-image .image {
position: absolute;
top: 0;
right: 0;
display: none;
align-items: flex-start;
justify-content: flex-start;
width: calc(((100vw - 1500px) / 2) + 600px );
}
.advantage .left-image .image.active {
display: flex;
}
.advantage .left-image .image img {
width: 100%;
}
.advantage .box {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
width: calc(100% - 670px);
min-height: 858px;
position: relative;
}
.advantage .box .icon-t {
position: absolute;
left: -150px;
top: 120px;
}
.advantage .box .t {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
font-size: 48px;
letter-spacing: 4px;
color: #333;
font-style: italic;
margin-top:210px;
padding-left: 24px;
}
.advantage .box .t .yuan {
width: 12px;
height: 12px;
background: #333;
border-radius: 50%;
margin: 0 8px 0 10px;
}
.advantage .box .adv-list {
background: #33342E;
width: calc(100% - 30px);
margin-left: 30px;
margin-top: 50px;
height: 460px;
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.advantage .box .adv-list .l {
width: 160px;
display: flex;
align-items: flex-start;
justify-content: flex-start;
position: relative;
}
.advantage .box .adv-list .l .item {
position: absolute;
right: 0;
width: 196px;
height: 80px;
border-radius: 50px 0 0 50px;
background: #33342E;
display: flex;
align-items: center;
justify-content: flex-start;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
cursor: pointer;
}
.advantage .box .adv-list .l .item.active {
background: #1760AD;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.advantage .box .adv-list .l .item.item-1 {
top: calc(140px / 5);
}
.advantage .box .adv-list .l .item.item-2 {
top: calc(((140px / 5) * 2) + 80px);
}
.advantage .box .adv-list .l .item.item-3 {
top: calc(((140px / 5) * 3) + 160px);
}
.advantage .box .adv-list .l .item.item-4 {
top: calc(((140px / 5) * 4) + 240px);
}
.advantage .box .adv-list .l .item .num {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
margin-left: 16px;
background: #1760AD;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
margin-right: 15px;
}
.advantage .box .adv-list .l .item .num span {
width: 21px;
height: 17px;
background-image: url("../image/icon_adv.png");
background-repeat: no-repeat;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.advantage .box .adv-list .l .item.active .num span {
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.advantage .box .adv-list .l .item .num span.num-1 {
background-position: -21px 0;
}
.advantage .box .adv-list .l .item.active .num span.num-1 {
background-position: 0 0;
}
.advantage .box .adv-list .l .item .num span.num-2 {
background-position: -21px -17px;
}
.advantage .box .adv-list .l .item.active .num span.num-2 {
background-position: 0 -17px;
}
.advantage .box .adv-list .l .item .num span.num-3 {
background-position: -21px -34px;
}
.advantage .box .adv-list .l .item.active .num span.num-3 {
background-position: 0 -34px;
}
.advantage .box .adv-list .l .item .num span.num-4 {
background-position: -21px -51px;
}
.advantage .box .adv-list .l .item.active .num span.num-4 {
background-position: 0 -51px;
}
.advantage .box .adv-list .l .item.active .num {
background: #fff;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.advantage .box .adv-list .l .item .lab {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
}
.advantage .box .adv-list .l .item .lab span {
color: #fff;
font-weight: bold;
font-size: 22px;
letter-spacing: 2px;
}
.advantage .box .adv-list .l .item .lab em {
color: #888;
font-size: 14px;
margin-top: 8px;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.advantage .box .adv-list .l .item.active .lab em {
color: #fff;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.advantage .box .adv-list .r {
background: #1765BB;
width: calc(100% - 160px);
height: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
}
.advantage .box .adv-list .r .r-box {
display: none;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
width: 100%;
height: 100%;
padding: 80px 50px;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.advantage .box .adv-list .r .r-box.active {
display: flex;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.advantage .box .adv-list .r .r-box h4 {
font-size: 30px;
color: #fff;
font-weight: bold;
letter-spacing: 2px;
}
.advantage .box .adv-list .r .r-box span {
font-size: 22px;
color: #eee;
margin-top: 10px;
}
.advantage .box .adv-list .r .r-box .line {
width: 55px;
height: 5px;
border-radius: 3px;
background: #fff;
/*margin-top: 30px;*/
}
.advantage .box .adv-list .r .r-box p {
margin-top: 20px;
line-height: 28px;
font-size: 16px;
color: #ddd;
margin-left: -15px;
padding-left: 15px;
position: relative;
}
.advantage .box .adv-list .r .r-box p:before {
position: absolute;
left: 0;
top: 11px;
content: "";
width: 8px;
height: 8px;
background: #ddd;
border-radius: 50%;
}
.section-cases {
padding: 40px 0 40px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
background: #fff;
}
.cases {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
}
.cases .hd-image {
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 15px;
}
.cases .hd {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin-bottom: 44px;
}
.cases .hd .hd-name {
font-size: 44px;
color: #333;
display: flex;
align-items: center;
justify-content: flex-start;
font-weight: bold;
letter-spacing: 3px;
}
.cases .hd .hd-name em {
width: 14px;
height: 14px;
border-radius: 50%;
background: #333;
margin: 0 10px;
}
.cases .hd .hd-link {
display: flex;
align-items: center;
justify-content: flex-end;
}
.cases .hd .hd-link .b-link {
font-size: 20px;
color: #1760AD;
font-weight: bold;
padding: 8px 15px 8px 18px;
border-radius: 30px;
background: #fff;
border: 1px solid #1760AD;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20px;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.cases .hd .hd-link .b-link.active,.cases .hd .hd-link .b-link:hover {
color: #fff;
background: #1760AD;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.cases .hd .hd-link .b-link .icon {
width: 21px;
height: 17px;
margin-left: 5px;
background-repeat: no-repeat;
background-image: url("../image/icon_right.png");
background-position: -21px 0;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.cases .hd .hd-link .b-link.active .icon,.cases .hd .hd-link .b-link:hover .icon {
background-position: 0 0;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.cases .hd .hd-link .c-link {
font-size: 20px;
color: #333;
border-bottom: 1px solid #333;
display: flex;
align-items: center;
justify-content: center;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
padding: 5px 0;
margin-left: 20px;
}
.cases .hd .hd-link .c-link:hover {
color: #1760AD;
border-bottom: 1px solid #1760AD;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.cases .hd .hd-link .c-link .icon {
width: 22px;
height: 22px;
margin-left: 5px;
background-repeat: no-repeat;
background-image: url("../image/icon_more.png");
background-position: 0 0;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.cases .hd .hd-link .c-link:hover .icon {
background-position: -22px 0;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.cases .lists {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
width: 100%;
}
.cases .lists .bx {
display: none;
align-items: flex-start;
justify-content: space-between;
width: 100%;
}
.cases .lists .bx.active {
display: flex;
}
.cases .lists .big {
width: 750px;
height: 610px;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
}
.cases .lists .big .image {
width: 750px;
height: 530px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.cases .lists .big .image img {
width: 750px;
height: 530px;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.cases .lists .big:hover .image img {
-webkit-transform: scale(1.05);
transform: scale(1.05);
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.cases .lists .big .info {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 80px;
background: #1760AD;
padding: 10px 20px;
}
.cases .lists .big .info .name {
width: calc(100% - 150px);
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
}
.cases .lists .big .info .name h4 {
font-size: 20px;
font-weight: bold;
color: #fff;
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.cases .lists .big .info .name .time {
font-size: 14px;
margin-top: 10px;
color: #fff;
}
.cases .lists .big .info .more {
width: 140px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: bold;
background: #FE6B03;
color: #fff;
border-radius: 20px;
}
.cases .lists .sm-div {
width: calc(100% - 765px);
height: 610px;
display: flex;
flex-wrap: wrap;
}
.cases .lists .sm-div a {
width: 360px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
margin-right: calc(100% - 720px);
}
.cases .lists .sm-div a:nth-child(2n){
margin-right: 0;
}
.cases .lists .sm-div a:nth-child(1),.cases .lists .sm-div a:nth-child(2){
margin-bottom: 11px;
}
.cases .lists .sm-div a .image {
width: 360px;
height: 260px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.cases .lists .sm-div a .image img {
width: 360px;
height: 260px;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.cases .lists .sm-div a:hover .image img {
-webkit-transform: scale(1.05);
transform: scale(1.05);
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.cases .lists .sm-div a .tt {
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 10px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-size: 18px;
color: #fff;
background: #1760AD;
text-align: center;
width: 100%;
}
.section-abouts {
padding: 112px 0 70px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
background-image: url(../image/bg_3.png);
background-position: left top;
background-repeat: no-repeat;
background-size: cover;
margin-top: -42px;
}
.section-abouts.section-aboutsx {
padding: 40px 0 40px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
background:none;
margin-top: 0;
}
.abouts {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
}
.abouts .box {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 40px;
}
.abouts .boxx {
align-items: flex-start;
}
.abouts .box .image {
width: 760px;
height: 500px;
/*overflow: hidden;*/
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.abouts .box .image img {
width: 760px;
height: 500px;
position: relative;
z-index: 2;
}
.abouts .box .image:before {
position: absolute;
left: -6px;
top: -6px;
content: '';
width: 40px;
height: 40px;
background: #1760AD;
}
.abouts .box .image:after {
position: absolute;
right: -6px;
bottom: -6px;
content: '';
width: 40px;
height: 40px;
background: #1760AD;
}
.abouts .box .bx {
width: calc(100% - 800px);
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
}
.abouts .box .bxx {
width: calc(100% - 800px);
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
font-size: 18px;
line-height: 36px;
}
.abouts .box .bx .h3 {
font-size: 32px;
letter-spacing: 1px;
color: #1760AD;
font-weight: bold;
width: 100%;
}
.abouts .box .bx .intro {
font-size: 18px;
color: #111;
line-height: 32px;
max-height: 128px;
position: relative;
width: 100%;
margin-top: 10px;
overflow: hidden;
}
.abouts .box .bx .intro a {
font-size: 14px;
color: #1760AD;
font-weight: bold;
position: absolute;
right: 0;
bottom: 0;
}
.abouts .box .bx .intro a:hover {
color: #FE6B03;
}
.abouts .box .bx .tags {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin: 40px 0 60px;
}
.abouts .box .bx .tags .tag-item {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
}
.abouts .box .bx .tags .tag-item .nm {
display: flex;
align-items: center;
justify-content: center;
}
.abouts .box .bx .tags .tag-item .nm .count {
position: relative;
font-size: 64px;
font-weight: bold;
color: #1760AD;
}
.abouts .box .bx .tags .tag-item .nm .count em {
position: absolute;
right: -20px;
top: -12px;
font-size: 30px;
}
.abouts .box .bx .tags .tag-item .nm .unit {
font-size: 22px;
color: #333;
margin-top: 20px;
padding-left: 5px;
}
.abouts .box .bx .tags .tag-item .name {
font-size: 22px;
color: #333;
margin-top: 10px;
}
.abouts .box .bx .about-btn {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
}
.abouts .box .bx .about-btn .abtn {
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: bold;
background: #FE6B03;
color: #fff;
padding: 0 30px;
border-radius: 20px;
cursor: pointer;
}
.abouts .box .bx .about-btn .abtn .icon {
margin-right: 5px;
}
.abouts .box .bx .about-btn .abtn:first-of-type {
margin-right: 40px;
}
.abouts .box .bx .about-btn .abtn:last-of-type {
background: #1760AD;
}
.abouts .box .bx .tags .tag-line {
width: 1px;
height: 40px;
background: #1760AD;
}
.section-factory {
padding: 40px 0;
width: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
}
.factory {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
}
.factory .menu-item {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
border-bottom: 1px solid #ddd;
}
.factory .menu-item .items {
width: 25%;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
position: relative;
padding: 15px 0;
cursor: pointer;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.factory .menu-item .items.active {
background: #F1F5F9 ;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.factory .menu-item .items.active:before {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 5px;
background: #1760AD;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.factory .menu-item .items .icon {
width: 43px;
height: 42px;
background-repeat: no-repeat;
background-image: url("../image/icon_factory.png");
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.factory .menu-item .items.active .icon {
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.factory .menu-item .items .icon.icon-1 {
background-position: 0 0;
}
.factory .menu-item .items.active .icon.icon-1 {
background-position: -43px 0;
}
.factory .menu-item .items .icon.icon-2 {
background-position: 0 -42px;
}
.factory .menu-item .items.active .icon.icon-2 {
background-position: -43px -42px;
}
.factory .menu-item .items .icon.icon-3 {
background-position: 0 -84px;
}
.factory .menu-item .items.active .icon.icon-3 {
background-position: -43px -84px;
}
.factory .menu-item .items .icon.icon-4 {
background-position: 0 -126px;
}
.factory .menu-item .items.active .icon.icon-4 {
background-position: -43px -126px;
}
.factory .menu-item .items .name {
font-size: 22px;
color: #333;
margin-top: 10px;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.factory .menu-item .items.active .name {
color: #000;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.factory .lists {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
width: 100%;
margin-top:30px
}
.factory .lists .box {
width: 100%;
position: relative;
height: 0!important;
overflow: hidden;
}
.factory .lists .box.active {
height: auto !important;
overflow: unset;
}
.swiper-bbx {
width: 100%;
height: 420px;
overflow: hidden;
}
.swiper-bbx .swiper-wrapper .swiper-slide {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
width: 100%;
}
.swiper-bbx .swiper-wrapper .swiper-slide img {
width: 100%;
height: 390px
}
.swiper-bbx .swiper-wrapper .swiper-slide span {
width: 100%;
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-size: 20px;
color: #000;
text-align: center;
height: 30px;
line-height: 30px;
}
.factory .lists .box .swiper-button-next {
right: -60px;
left: unset;
top: 50%;
bottom: unset;
border: 1px solid #ddd;
width: 40px;
height: 40px;
border-radius: 50%;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.factory .lists .box .swiper-button-prev {
right: unset;
left: -60px;
top: 50%;
bottom: unset;
border: 1px solid #ddd;
background: #fff;
width: 40px;
height: 40px;
border-radius: 50%;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.factory .lists .box .swiper-button-prev:hover,.factory .lists .box .swiper-button-next:hover {
border: 1px solid #1760AD;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.factory .lists .box .swiper-button-next:after,.factory .lists .box .swiper-button-prev:after {
font-size: 18px;
color: #ddd;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.factory .lists .box .swiper-button-next:hover:after,.factory .lists .box .swiper-button-prev:hover:after {
color: #1760AD;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.section-news {
padding: 70px 0;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
width: 100%;
background: #F7F8FA;
}
.news {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
}
.news .new-box {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-top: 40px;
width: 100%;
}
.news .new-box .left {
display: flex;
align-items: center;
justify-content: center;
width: 750px;
height: 500px;
position: relative;
}
.swiper-bbxx {
width: 100%;
height: 500px;
overflow: hidden;
}
.swiper-bbxx .swiper-wrapper .swiper-slide {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
width: 100%;
position: relative;
}
.swiper-bbxx .swiper-wrapper .swiper-slide img {
width: 100%;
height: 500px
}
.swiper-bbxx .swiper-wrapper .swiper-slide span {
width: 100%;
position: absolute;
left: 0;
bottom: 0;
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-size: 20px;
padding: 0 10px;
color: #fff;
text-align: center;
height: 40px;
line-height: 40px;
background: #1760AD;
}
.news .new-box .left .swiper-button-next {
right: 20px;
left: unset;
top: 50%;
bottom: unset;
border: none;
background: #fff;
width: 40px;
height: 40px;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.news .new-box .left .swiper-button-prev {
right: unset;
left: 20px;
top: 50%;
bottom: unset;
border: none;
background: #fff;
width: 40px;
height: 40px;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.news .new-box .left .swiper-button-prev:hover,.news .new-box .left .swiper-button-next:hover {
background: #1760AD;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.news .new-box .left .swiper-button-next:after,.news .new-box .left .swiper-button-prev:after {
font-size: 18px;
color: #1760AD;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.news .new-box .left .swiper-button-next:hover:after,.news .new-box .left .swiper-button-prev:hover:after {
color: #fff;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.news .new-box .new-content {
display: flex;
align-items: flex-start;
justify-content: flex-start;
width: calc(100% - 760px);
}
.news .new-box .new-content .news-items {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
width: 190px;
height: 500px;
margin-right: 10px;
background: #EFEFEF;
}
.news .new-box .new-content .news-items .items {
width: 100%;
height: calc((500px - 3px) / 4);
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
border-bottom: 1px solid #fff;
cursor: pointer;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
background-image: url("../image/icon_sanjiao.png");
background-repeat: no-repeat;
background-position: 120% 45px;
}
.news .new-box .new-content .news-items .items:last-of-type {
border-bottom: none;
}
.news .new-box .new-content .news-items .items .cn {
font-size: 22px;
font-weight: bold;
color: #333;
letter-spacing: 2px;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.news .new-box .new-content .news-items .items .en {
font-size: 13px;
color: #444;
margin-top: 5px;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.news .new-box .new-content .news-items .items.active {
background-position: 165px 45px;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.news .new-box .new-content .news-items .items.active .cn {
color: #1760AD;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.news .new-box .new-content .news-items .items.active .en {
color: #1760AD;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.news .new-box .new-content .new-list {
display: flex;
align-items: flex-start;
justify-content: center;
width: calc(100% - 200px);
}
.news .new-box .new-content .new-list .new-show {
display: none;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
width: 100%;
height: 500px;
}
.news .new-box .new-content .new-list .new-show.active {
display: flex;
}
.news .new-box .new-content .new-list .new-show a {
width: 100%;
margin: 20px 0;
display: flex;
align-items: center;
justify-content: flex-start;
}
.news .new-box .new-content .new-list .new-show a .date {
width: 84px;
height: 84px;
background: #1760AD;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
margin-right: 10px;
}
.news .new-box .new-content .new-list .new-show a .date .day {
font-size: 30px;
letter-spacing: 2px;
color: #fff;
}
.news .new-box .new-content .new-list .new-show a .date .month {
font-size: 14px;
color: #fff;
margin-top: 6px;
}
.news .new-box .new-content .new-list .new-show a .info {
width: calc(100% - 94px);
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
}
.news .new-box .new-content .new-list .new-show a .info .t {
font-size: 22px;
color: #333;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
margin-bottom: 10px;
}
.news .new-box .new-content .new-list .new-show a:hover .info .t {
color: #1760AD;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.news .new-box .new-content .new-list .new-show a .info .intro {
font-size: 16px;
line-height: 24px;
color: #888;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
width: 100%;
}
.section-footers {
background: #F7F7F7 ;
padding: 0;
}
.footer {
padding: 50px 0 30px;
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.footer .bottom-menu {
width: 960px;
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.footer .bottom-menu .box {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
width: calc((100% - 60px) / 4);
margin-right: 15px;
}
.footer .bottom-menu .box h3 {
font-size: 18px;
font-weight: bold;
color: #000;
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
}
.footer .bottom-menu .box a {
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: #777;
font-size: 16px;
margin-top: 20px;
}
.footer .bottom-menu .box a:hover {
color: #1760AD;
}
.footer .bottom-contact {
width: calc(100% - 960px);
border-left: 1px solid #eee;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
padding-bottom: 15px;
}
.footer .bottom-contact .bottom-logo {
}
.footer .bottom-contact .bottom-tel {
background: #1760AD;
margin-top: 15px;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 4px;
font-size: 28px;
font-weight: bold;
color: #fff;
padding: 5px 8px;
border-radius: 30px;
}
.footer .bottom-contact .bottom-tel img {
margin-right: 10px;
}
.footer .bottom-contact .bottom-item {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
width: 330px;
}
.footer .bottom-contact .bottom-item .item {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
margin-top: 10px;
font-size: 17px;
color: #666;
}
.footer .bottom-contact .bottom-item .item img {
margin-right: 10px;
}
.footer .bottom-contact .bottom-scan {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin-top: 20px;
}
.footer .bottom-contact .bottom-scan .scan {
width: 94px;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
margin-right: 25px;
}
.footer .bottom-contact .bottom-scan .scan img {
width: 94px;
height: 94px;
}
.footer .bottom-contact .bottom-scan .scan span {
width: 100%;
font-size: 14px;
font-weight: bold;
color: #666;
text-align: center;
margin-top: 5px;
}
.section-links {
border-top: 1px solid #ddd;
background: #F7F7F7;
padding: 20px 0;
}
.links {
display: flex;
align-items: center;
justify-content: flex-start;
}
.links .lab {
font-size: 16px;
color: #000;
}
.links a {
color: #666;
font-size: 16px;
}
.links a:hover {
color: #1760AD;
}
.links em {
width: 1px;
height: 14px;
margin: 0 10px;
background: #999;
}
.section-copyright {
padding: 10px 0;
}
.copyright {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
}
.copyright .cov {
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #333;
line-height: 32px;
}
.copyright .cov a {
color: #333;
}
.copyright .cov a:hover {
color: #1760AD;
}
.copyright .cov p {
margin-right: 40px;
}
.copyright .cov p:last-of-type {
margin-right: 0;
}
#toolbar {
position: fixed;
z-index: 99999999;
right: 0;
top: 25%;
}
#toolbar li {
margin-bottom: 3px;
font-size: 0;
width: 57px;
height: 57px;
right: 0;
position: relative;
}
#toolbar li.tool-logo {
width: 50px;
height: auto !important;
margin-bottom: 5px;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
}
#toolbar li.tool-logo img {
width: 100%;
}
#toolbar li.tool-message {
width: 50px;
height: 90px;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
background: linear-gradient(to bottom, #0170BB, #015EA8, #0170BB);
border-radius: 10px;
cursor: pointer;
}
#toolbar li.tool-message img {
width: 24px;
/*height: 27px;*/
margin-bottom: 2px;
}
#toolbar li.tool-message .span {
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: inherit;
color: #fff;
letter-spacing: 1px;
line-height: 20px;
/*padding-left: 5px;*/
}
#toolbar li.wx {
border: 2px solid #024C95;
border-radius: 10px 10px 0 0;
width: 50px;
height: 90px;
background: #fff;
}
#toolbar li.wx.wx-1 {
margin-top: 5px;
border-bottom: none;
}
#toolbar li.wx.wx-2 {
margin-top: -5px;
border-radius: 0 0 10px 10px;
border-top: none;
position: relative;
}
#toolbar li.wx.wx-2 .line {
width: 20px;
height: 2px;
background: #eee;
left: 15px;
top: 3px;
position: absolute;
}
#toolbar li.wx a {
width: 50px;
height: 90px;
}
#toolbar li.wx a .span {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
width: 50px;
height: 90px;
}
#toolbar li.wx a .span img {
width: 24px;
margin-bottom: 5px;
/*margin-right: 2px;*/
/*height: 28px;*/
}
#toolbar li.wx a em {
font-size: 14px;
color: #444;
letter-spacing: 1px;
padding-left: 0;
line-height: 16px;
font-weight: inherit;
}
#toolbar li .wz {
position: absolute;
width: 00px;
height: 50px;
line-height: 50px;
right: 100%;
top: 25px;
font-size: 20px;
color: #333;
background: #fff;
box-shadow: 0 0 10px #888;
overflow: hidden;
-webkit-transition: all .5s ease;
transition: all .5s ease;
text-align: center;
}
#toolbar li.wx-2:hover .wz {
width: 180px;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
#toolbar li .ewm-box {
position: absolute;
z-index: 1;
padding: 0 5px;
width: 90px;
height: 90px;
right: 100%;
top: 0px;
opacity: 0;
visibility: hidden;
-webkit-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: all .7s;
transition: all .7s;
}
#toolbar li.ewm .ewm-box p {
margin-bottom: 0;
}
#toolbar li.wx-1 .ewm-box img {
width: 90px;
height: 90px;
}
#toolbar li.ewm .ewm-box:after {
content: '';
position: absolute;
right: -5px;
bottom: 20px;
width: 0;
height: 0;
line-height: 0;
font-size: 0;
overflow: hidden;
border-width: 5px;
cursor: pointer;
border-style: dashed dashed dashed solid;
border-color: transparent transparent transparent #0984D1;
border-right: none;
}
#toolbar li.ewm:hover .icon {
background-position: -57px -180px;
}
#toolbar li.wx-1:hover .ewm-box {
opacity: 1;
visibility: visible;
-webkit-transform: translateY(0);
transform: translateY(0);
}
#toolbar li.backtop {
cursor: pointer;
border: 2px solid #1786CC;
border-radius: 10px;
width: 50px;
height: 90px;
background: #fff;
margin-top: 5px;
}
#toolbar li.backtop.no-back {
display: none;
}
#toolbar li.backtop .iconfont {
color: #fff;
background-color: #0984D1;
}
#toolbar li:hover a {
width: 200px;
}
#toolbar li:hover .icon-font {
background-color: #0984D1;
}
#toolbar li:hover .icon-font:after {
left: 15px;
}
#toolbar li:hover .icon-qq:after {
background-position: -30px -150px;
}
#toolbar li:hover .icon-phone:after {
background-position: -30px -90px;
}
#toolbar li:hover .icon-ewm:after {
background-position: -30px -30px;
}
#toolbar li:hover .icon-message:after {
background-position: -30px -120px;
}
#toolbar li:hover .icon-wangwang:after {
background-position: -30px 0;
}
#toolbar li:hover .icon-top:after {
background-position: -30px -60px;
}
.modal-header-message {
display: flex;
align-items: center;
justify-content: space-between;
}
.modal-header-message::before,.modal-header-message::after {
display: none;
}
.modal-dialog-message {
width:540px;
}
.form-message .form-group label {
margin-bottom: 10px;
}
.form-message .form-group .code-box {
display: flex;
align-items: center;
justify-content: flex-start;
}
.form-message .form-group .code {
width: 200px;
margin-right: 10px;
}
.form-message .form-group .codeimg {
height: 30px;
}
.form-message .message-btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin: 30px 0 10px;
}
.page-banners .page-banner {
display: flex;
align-items: center;
justify-content: center;
font-size: 0;
width: 100%;
position: relative;
}
.page-banners .page-banner .image {
width: auto;
max-width: 100%;
}
.cons {
margin-bottom: 40px;
}
.page-position {
display: flex;
align-items: center;
justify-content: flex-start;
margin: 15px auto;
}
.page-position .icon-home {
width: 20px;
height: 20px;
margin-right: 5px;
}
.page-position span {
color: #333;
font-size: 16px;
}
.page-position a {
font-size: 16px;
color: #333;
}
.page-position a:hover {
color: #1760AD;
}
.page-position .icon-r {
width: 18px;
height: 18px;
margin: 0 5px;
}
.cons .con {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.cons .con .page-menus {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
width: 280px;
margin-right: 20px;
}
.cons .con .page-menus .nav {
width: 280px;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
border: 1px solid #ddd;
background: #fff;
border-radius: 11px 11px 0 0;
}
.cons .con .page-menus .nav .nav-title {
width: 100%;
padding: 30px 0;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
border-radius: 10px 10px 0 0;
background: linear-gradient(to bottom, #01468F, #016FBA);
}
.cons .con .page-menus .nav .nav-title .icons {
margin-bottom: 10px;
}
.cons .con .page-menus .nav .nav-title .name {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
}
.cons .con .page-menus .nav .nav-title .name.other {
align-items: center;
justify-content: center;
}
.cons .con .page-menus .nav .nav-title .name .cn {
font-size: 30px;
font-weight: bold;
color: #fff;
letter-spacing: 5px;
}
.cons .con .page-menus .nav .nav-title .name .en {
font-size: 15px;
color: #fff;
letter-spacing: 0px;
margin-top: 10px;
}
.cons .con .page-menus .nav .list {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
width: 100%;
}
.cons .con .page-menus .nav .list .cate {
padding: 10px 20px;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
background: linear-gradient(to bottom, #01468F, #016FBA);
font-size: 18px;
color: #fff;
margin-top: 10px;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s
}
.cons .con .page-menus .nav .list .cate:hover {
background: linear-gradient(to bottom, #016FBA, #01468F);
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s
}
.cons .con .page-menus .nav .list .cate .icons {
/*height:20px;*/
margin-right: 5px;
}
.cons .con .page-menus .nav .list .children {
padding: 10px 15px;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
background: #FAFAFA;
font-size: 16px;
color: #fff;
margin-top: 10px;
}
.cons .con .page-menus .nav .list .children .s-icons {
margin-right: 10px;
width: 8px;
height: 12px;
}
.cons .con .page-menus .nav .list .children .line .s1 {
width: 2px;
height: 2px;
border-radius: 50%;
background: #333;
margin-right: 2px;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s
}
.cons .con .page-menus .nav .list .children .line .s2 {
width: 12px;
height: 2px;
border-radius: 1px;
background: #777;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s
}
.cons .con .page-menus .nav .list .children span {
width: calc(100% - 26px);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: #777;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s
}
.cons .con .page-menus .nav .list .children:hover span{
color: #3A82D2;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s
}
.cons .con .page-menus .boxs {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
width: 100%;
margin-top: 20px;
}
.cons .con .page-menus .boxs .title {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
width: 100%;
background: linear-gradient(to right, #2054A8, #0A8AD5, #2054A8);
padding: 15px 20px;
border-radius: 10px 10px 0 0;
}
.cons .con .page-menus .boxs .title h1 {
font-size: 28px;
color: #fff;
letter-spacing: 2px;
}
.cons .con .page-menus .boxs .title h6 {
font-size: 14px;
color: #fff;
margin-top: 10px;
}
.cons .con .page-menus .boxs .list {
border: 1px solid #ddd;
width: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
padding: 0 20px;
}
.cons .con .page-menus .boxs .list a {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
border-bottom: 1px dashed #ddd;
padding: 15px 15px;
}
.cons .con .page-menus .boxs .list a:last-of-type {
border-bottom: none;
}
.cons .con .page-menus .boxs .list a .icon {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
background-color: #0984D1;
border-radius: 50px;
margin-right: 5px;
}
.cons .con .page-menus .boxs .list a .icon img {
width: 14px;
}
.cons .con .page-menus .boxs .list a span {
font-size: 16px;
color: #888;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.cons .con .page-menus .boxs .list a:hover span {
color: #0984D1;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.cons .con .page-menus .boxs .list.left-pro-list {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
}
.cons .con .page-menus .boxs .list.left-pro-list a {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
width: 100%;
}
.cons .con .page-menus .boxs .list.left-pro-list a .image {
width: 160px;
height: 160px;
overflow: hidden;
}
.cons .con .page-menus .boxs .list.left-pro-list a .image img {
width: 160px;
height: 160px;
}
.cons .con .page-menus .boxs .list.left-pro-list a .name {
display: inline-block;
width: 100%;
height: 40px;
line-height: 40px;
font-size: 16px;
color: #000;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
text-align: center;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.cons .con .page-menus .boxs .list.left-pro-list a:hover .name {
color: #0b5ed7;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.cons .con .page-menus .boxs .contact {
border: 1px solid #ddd;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
flex-flow: column;
padding: 20px 20px;
}
.cons .con .page-menus .boxs .contact p {
font-size: 18px;
color: #222;
margin-bottom: 10px;
}
.cons .con .page-menus .boxs .contact .qr {
width: 140px;
height: 140px;
border: 1px solid #0984D1;
}
.cons .con .page-menus .boxs .contact .sao {
font-size: 14px;
margin-top: 5px;
text-align: center;
width: 100%;
color: #555;
}
.smen {
height: 50px;
line-height: 50px;
width: 100%;
background: linear-gradient(to right, #2054A8, #0E7CC9, #0A8AD5,#0E7CC9, #2054A8);
border-radius: 5px;
margin-bottom: 20px;
}
.plc, .plc2 {
height: 50px;
padding-left: 20px;
padding-right: 20px;
position: relative;
color: #666;
overflow: hidden;
font-size: 16px;
border-bottom: 2px solid #ffffff;
/*padding-bottom: 10px;*/
font-family: "Microsoft Yahei", "微软雅黑";
border-radius: 5px;
display: flex;
align-items: center;
justify-content: space-between;
}
.plc span, .plc2 .red_x {
color: #000 !important;
font-weight: 700;
font-size: 18px;
}
.plc-so .red_x {
color: #ffffff !important;
font-family: "Microsoft YaHei";
font-size: 20px;
display: flex;
align-items: center;
justify-content: flex-start;
}
.plc a {
color: #fff;
}
.red_x .em-icon {
background-image: url("../image/icon_04.png");
background-repeat: no-repeat;
margin-right: 5px;
}
.red_x .em-icon.em-icon-1 {
background-position: 0 0;
width: 20px;
height: 24px;
}
.red_x .em-icon.em-icon-2 {
background-position: 0 -24px;
width: 23px;
height: 24px;
}
.red_x .em-icon.em-icon-3 {
background-position: 0 -48px;
width: 24px;
height: 24px;
}
.red_x .em-icon.em-icon-4 {
background-position: 0 -72px;
width: 38px;
height: 22px;
}
.cons .con .details {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
width: calc(100% - 300px);
}
.cons .con .details .pro-list {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.cons .con .details .pro-list .pro {
width: 390px;
/*height: 318px;*/
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
margin-right: calc((100% - (390px * 3)) / 2);
border: 1px solid #ddd;
-webkit-transition: all .5s ease;
transition: all .5s ease;
margin-bottom: 20px;
}
.cons .con .details .pro-list .pro:hover {
border: 1px solid #0984D1;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.cons .con .details .pro-list .pro:nth-child(3n) {
margin-right: 0;
}
.cons .con .details .pro-list .pro .image {
width: 390px;
height: 390px;
overflow: hidden;
/*border: 1px solid #0A8AD5;*/
display: flex;
padding: 1px;
}
.cons .con .details .pro-list .pro .image.image-200 {
height:190px;
}
.cons .con .details .pro-list .pro .image img {
width: 100%;
height: auto;
object-fit: contain;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.cons .con .details .pro-list .pro .image.image-200 img {
height:190px;
}
.cons .con .details .pro-list .pro:hover .image img {
-webkit-transform: scale(1.05);
transform: scale(1.05);
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.cons .con .details .pro-list .pro .name {
width: 100%;
height: 40px;
line-height: 40px;
padding: 0 10px;
background-color: #DDDDDD;
-webkit-transition: all .5s ease;
transition: all .5s ease;
display: flex;
align-items: center;
justify-content: space-between;
}
.cons .con .details .pro-list .pro .name .text {
display: inline-block;
width: 100%;
height: 40px;
line-height: 40px;
font-size: 16px;
color: #000;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
text-align: center;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.cons .con .details .pro-list .pro .name .icon {
width: 0px;
height: 20px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.cons .con .details .pro-list .pro:hover .name{
background: linear-gradient(to bottom, #01468F, #016FBA);
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.cons .con .details .pro-list .pro:hover .name .text {
width: calc(100% - 33px);
color: #fff;
-webkit-transition: all .5s ease;
transition: all .5s ease;
text-align: left;
}
.cons .con .details .pro-list .pro:hover .name .icon {
width: 33px;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.cons .con .details .title {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
width: 100%;
}
.cons .con .details .title h1 {
font-size:28px;
font-weight: bold;
color: #333;
}
.cons .con .details .title .line {
width: 400px;
height: 1px;
position: relative;
background-color: #ddd;
margin: 15px 0;
}
.cons .con .details .title .line em {
position: absolute;
width: 20px;
height: 5px;
border: 1px solid #0984D1;
left: calc((100% - 22px) / 2);
top: -2px;
}
.cons .con .details .title h6 {
font-size: 15px;
color: #ccc;
}
.cons .con .details .page-about {
display: inline-block;
width: 100%;
line-height: 30px;
font-size: 16px;
color: #666;
overflow: hidden;
margin-top: 20px;
}
.cons .con .details .video-box {
margin: 50px 0;
}
.cons .con .details .wenhua {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.cons .con .details .page-about-info {
margin: 40px 0;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
background-color: #F4F4F4;
border-radius: 5px;
box-shadow: 0 0 5px #ccc;
padding: 20px 20px;
}
.cons .con .details .page-about-info .box {
display: flex;
align-items: center;
justify-content: center;
}
.cons .con .details .page-about-info .box .num {
font-size: 64px;
font-weight: bold;
color: #0984D1;
margin-right: 5px;
}
.cons .con .details .page-about-info .box .text {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
}
.cons .con .details .page-about-info .box .text em {
font-size: 18px;
font-weight: bold;
color: #0984D1;
}
.cons .con .details .page-about-info .box .text span {
font-size: 18px;
color: #333;
font-weight: 600;
margin-top: 5px;
}
.cons .con .details .page-about-info .xie {
position: relative;
height: 50px;
width: 2px;
}
.cons .con .details .page-about-info .xie::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50px; /* 鏂滅嚎鐨勭矖缁� */
background-color: #0984D1; /* 鏂滅嚎鐨勯鑹� */
transform: rotate(-345deg); /* 鏃嬭浆瑙掑害锛屾牴鎹渶瑕佽皟鏁� */
transform-origin: left top; /* 鏃嬭浆鐨勫熀鐐� */
}
.cons .con .details .amp {
display: flex;
align-items: flex-start;
justify-content: flex-start;
width: 100%;
margin-top: 30px;
}
.cons .con .details .amp .pro {
width: 278px;
height: 318px;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
margin-right: calc((100% - (278px * 3)) / 2);
border: 1px solid #ddd;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.cons .con .details .amp .pro:hover {
border: 1px solid #0984D1;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.cons .con .details .amp .pro:last-of-type {
margin-right: 0;
}
.cons .con .details .amp .pro .image {
width: 278px;
height: 278px;
overflow: hidden;
}
.cons .con .details .amp .pro .image img {
width: 278px;
height: 278px;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.cons .con .details .amp .pro:hover .image img {
-webkit-transform: scale(1.05);
transform: scale(1.05);
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.cons .con .details .amp .pro span {
width: 100%;
height: 40px;
line-height: 40px;
padding: 0 10px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
background-color: #d1d1d1;
color: #333;
font-size: 15px;
-webkit-transition: all .5s ease;
transition: all .5s ease;
text-align: center;
}
.cons .con .details .amp .pro:hover span {
background-color: #0984D1;
color: #fff;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.cons .con .details .gl-box {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
width: 100%;
margin-top: 50px;
}
.cons .con .details .gl-box.mt50 {
margin-bottom: 50px;
}
.cons .con .details .gl-box .gl-title {
display: flex;
align-items: center;
justify-content: space-between;
width:100%;
border: 1px solid #ddd;
border-right:2px solid #016FBA;
border-bottom: 2px solid #016FBA;
}
.cons .con .details .gl-box .gl-title .name {
background: linear-gradient(to bottom, #01468F, #016FBA);
color: #fff;
font-size: 22px;
padding: 0 20px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.cons .con .details .gl-box .gl-title .name:before{
position: absolute;
right: -6px;
top: 0;
width: 12px;
height: 48px;
content: "";
background: #FF7E00;
transform: skew(-10deg, 0deg);
}
.cons .con .details .gl-box .gl-title .more {
font-size: 16px;
margin-right: 10px;
color: #888;
}
.cons .con .details .gl-box .gl-title .more:hover {
color: #0984D1;
}
.cons .con .details .gl-box .gl-contact {
display: flex;
align-items: flex-start;
justify-content: space-between;
width: 100%;
}
.cons .con .details .gl-box .gl-contact .glc-info {
border:1px solid #ddd;
border-radius: 5px;
padding: 20px 30px;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
width: 48%;
margin-top: 40px;
height:342px;
}
.cons .con .details .gl-box .gl-contact .glc-info .glc-title {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
width: 100%;
border-bottom: 2px solid #eee;
padding-bottom: 8px;
}
.cons .con .details .gl-box .gl-contact .glc-info .glc-title h4 {
font-size: 18px;
color: #1760AD;
font-weight: bold;
}
.cons .con .details .gl-box .gl-contact .glc-info .glc-title span {
font-size: 12px;
color: #999;
margin-top: 8px;
}
.cons .con .details .gl-box .gl-contact .glc-info .glc-list {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
width: 100%;
position: relative;
margin-top: 10px;
}
.cons .con .details .gl-box .gl-contact .glc-info .glc-list .glc-line {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
font-size: 18px;
color: #000;
padding: 10px 0;
border-bottom: 1px solid #eee;
}
.cons .con .details .gl-box .gl-contact .glc-info .glc-list .glc-line:nth-child(1),.cons .con .details .gl-box .gl-contact .glc-info .glc-list .glc-line:nth-child(2) {
width: calc(100% - 120px);
}
.cons .con .details .gl-box .gl-contact .glc-info .glc-list .glc-qr {
position: absolute;
right: 0;
top: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
}
.cons .con .details .gl-box .gl-contact .glc-info .glc-list .glc-qr img {
width: 100px;
height: 100px;
}
.cons .con .details .gl-box .gl-contact .glc-info .glc-list .glc-qr span {
font-size: 16px;
color: #888;
margin-top: 5px;
}
.cons .con .details .gl-box .gl-contact .glc-info .glc-list .glc-line .icon {
width:30px;
height: 30px;
background-image: url("../image/icon_contact.png");
background-repeat: no-repeat;
margin-right: 10px;
}
.cons .con .details .gl-box .gl-contact .glc-info .glc-list .glc-line .icon.icon-1 {
background-position: 0 0;
}
.cons .con .details .gl-box .gl-contact .glc-info .glc-list .glc-line .icon.icon-2 {
background-position: 0 -30px;
}
.cons .con .details .gl-box .gl-contact .glc-info .glc-list .glc-line .icon.icon-3 {
background-position: 0 -60px;
}
.cons .con .details .gl-box .gl-contact .glc-info .glc-list .glc-line .icon.icon-4 {
background-position: 0 -90px;
}
.cons .con .details .gl-box .gl-contact .glc-info .glc-form {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
width: 100%;
}
.cons .con .details .gl-box .gl-contact .glc-info .glc-form .form-line {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
margin-top: 15px;
}
.cons .con .details .gl-box .gl-contact .glc-info .glc-form .form-line input {
outline: none;
border: 1px solid #ddd;
height: 40px;
line-height: 40px;
padding:0 10px;
font-size: 16px;
width: 100%;
}
.cons .con .details .gl-box .gl-contact .glc-info .glc-form .form-line textarea {
outline: none;
border: 1px solid #ddd;
height: 70px;
line-height: 24px;
padding:10px 10px;
font-size: 16px;
width: 100%;
}
.cons .con .details .gl-box .gl-contact .glc-info .glc-form .form-line .form-btn {
width: 140px;
height: 40px;
line-height: 40px;
text-align: center;
color: #fff;
font-weight: bold;
font-size: 18px;
background: linear-gradient(to bottom, #01468F, #016FBA);
cursor: pointer;
}
.cons .con .details .gl-box .gl-pro-list {
display: flex;
align-items: flex-start;
justify-content: flex-start;
width: 100%;
margin-top: 30px;
}
.cons .con .details .gl-box .gl-pro-list .pro {
width: 390px;
height: 430px;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
margin-right: calc((100% - (390px * 3)) / 2);
border: 1px solid #ddd;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.cons .con .details .gl-box .gl-pro-list .pro:hover {
border: 1px solid #0984D1;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.cons .con .details .gl-box .gl-pro-list .pro:last-of-type {
margin-right: 0;
}
.cons .con .details .gl-box .gl-pro-list .pro .image {
width: 390px;
height: 390px;
overflow: hidden;
}
.cons .con .details .gl-box .gl-pro-list .pro .image img {
width: 390px;
height: 390px;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.cons .con .details .gl-box .gl-pro-list .pro:hover .image img {
-webkit-transform: scale(1.05);
transform: scale(1.05);
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.cons .con .details .gl-box .gl-pro-list .pro .name {
height: 40px;
line-height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0 10px;
background:#DDDDDD;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.cons .con .details .gl-box .gl-pro-list .pro .name .text {
display: inline-block;
width: 100%;
height: 40px;
line-height: 40px;
font-size: 16px;
color: #000;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
text-align: center;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.cons .con .details .gl-box .gl-pro-list .pro .name .icon {
width: 0px;
height: 20px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.cons .con .details .gl-box .gl-pro-list .pro:hover .name{
background: linear-gradient(to bottom, #01468F, #016FBA);
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.cons .con .details .gl-box .gl-pro-list .pro:hover .name .text {
width: calc(100% - 33px);
color: #fff;
-webkit-transition: all .5s ease;
transition: all .5s ease;
text-align: left;
}
.cons .con .details .gl-box .gl-pro-list .pro:hover .name .icon {
width: 33px;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.cons .con .details .gl-box .gl-new-list {
display: flex;
flex-wrap: wrap;
width: 100%;
margin-top: 30px;
}
.cons .con .details .gl-box .gl-new-list .newsx {
display: flex;
align-items: center;
justify-content: flex-start;
width: calc(50% - 10px);
border-bottom: 1px solid #ddd;
margin-right: 20px;
margin-bottom: 15px;
padding-bottom: 15px;
}
.cons .con .details .gl-box .gl-new-list .newsx:nth-child(2n){
margin-right: 0;
}
.cons .con .details .gl-box .gl-new-list .newsx .text {
width: calc(100% - 90px);
font-size: 16px;
color: #888;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.cons .con .details .gl-box .gl-new-list .newsx .time {
text-align: right;
width:90px;
font-size: 15px;
color: #999;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.cons .con .details .gl-box .gl-new-list .newsx:hover .text {
color: #0984D1;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.cons .con .details .gl-box .gl-new-list .newsx:hover .time {
color: #0984D1;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.cons .con .details .contact-box {
display: flex;
align-items: flex-start;
justify-content: space-between;
width: 100%;
margin-top: 30px;
}
.cons .con .details .contact-box .box {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
width: calc((100% - 60px) / 4);
border: 1px solid #0984D1;
border-radius: 5px;
}
.cons .con .details .contact-box .box .name {
width: 100%;
font-size: 16px;
color: #fff;
background: linear-gradient(to right, #26469D, #0F7DCA, #26469D);
text-align: center;
padding: 15px 0;
}
.cons .con .details .contact-box .box .infos {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
width: 100%;
}
.cons .con .details .contact-box .box .infos .icon {
/*width: 44px;*/
height: 43px;
margin: 15px 0;
}
.cons .con .details .contact-box .box .infos p {
height: 40px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
line-height: 20px;
width: 100%;
padding: 0 10px;
font-size: 14px;
color: #333;
margin-bottom: 15px;
}
.cons .con .details .contact-box .box .infos p.num {
font-size: 16px;
}
.cons .con .details .contact-content {
margin: 30px 0;
}
.cons .con .details .contact-content img {
max-width: 100%;
}
.cons .con .details .news-list {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
width: 100%;
}
.cons .con .details .news-list .box {
display: flex;
align-items: flex-start;
justify-content: flex-start;
width: 100%;
padding-bottom: 30px;
border-bottom: 1px solid #EEE;
margin-bottom: 30px;
}
.cons .con .details .news-list .box .image {
width: 282px;
height: 182px;
overflow: hidden;
margin-right: 20px;
border: 1px solid #DDD;
}
.cons .con .details .news-list .box .image img {
width: 280px;
height: 180px;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.cons .con .details .news-list .box .info {
width: calc(100% - 302px);
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
}
.cons .con .details .news-list .box .info h1 {
overflow: hidden;
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
color: #333;
font-weight: 700;
font-size: 20px;
line-height: 55px;
width: 100%;
}
.cons .con .details .news-list .box .info .tag {
display: block;
font-size: 16px;
width: 100%;
line-height: 28px;
height: 86px;
overflow: hidden;
margin-top: 0;
text-indent: 2rem;
color: #888;
}
.cons .con .details .news-list .box .info .time {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin-top: 10px;
}
.cons .con .details .news-list .box .info .time .t {
color: #ccc;
}
.cons .con .details .news-list .box .info .time .g {
display: flex;
align-items: center;
justify-content: center;
color: #666666;
}
.cons .con .details .news-list .box .info .time .g img {
width: 22px;
margin-top: 1px;
}
.section-abxx {
padding: 40px 0;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
width: 100%;
background-image: url(../image/ad_bg_05.png);
background-repeat: no-repeat;
background-size: cover;
}
.abxx {
display: flex;
align-items: center;
justify-content: space-between;
}
.abxx .abxx-box {
display: flex;
align-items: center;
justify-content: center;
padding:0 60px;
}
.abxx .abxx-box img {
margin-right: 30px;
}
.abxx .abxx-box .inf {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
color: #fff;
}
.abxx .abxx-box .inf .count {
display: flex;
align-items: center;
justify-content: center;
}
.abxx .abxx-box .inf .count strong {
font-size:60px;
}
.abxx .abxx-box .inf .count span {
font-size: 20px;
margin-top: 20px;
margin-left: 10px;
}
.abxx .abxx-box .inf .name {
margin-top: 10px;
font-size: 20px;
}
.abxx .abxx-line {
width:1px;
height:70px;
background: rgba(255,255,255,0.6);
}
.yuanjings {
padding: 70px 0;
}
.yuanjings .yuanjing {
display: flex;
align-items: center;
justify-content: space-between;
}
.yuanjings .yuanjing .boxs {
width: calc((100% - 20px) / 3);
height: 550px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.yuanjings .yuanjing .boxs .bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 550px;
z-index: 1;
}
.yuanjings .yuanjing .boxs .tm {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 550px;
z-index: 2;
background: none;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.yuanjings .yuanjing .boxs.active .tm {
background: #1760AD;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.yuanjings .yuanjing .boxs .box {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
width: 100%;
height:550px;
position: relative;
z-index:3;
}
.yuanjings .yuanjing .boxs .box img {
width: 153px;
height: 153px;
}
.yuanjings .yuanjing .boxs .box h3 {
font-size: 26px;
font-weight: bold;
color: #fff;
margin: 20px 0;
}
.yuanjings .yuanjing .boxs .box p {
font-size: 18px;
color: #fff;
line-height: 28px;
}
.certs {
padding: 60px 0 150px;
display: inline-block;
width: 100%;
/*background-image: url(../images/about_bg.png);*/
/*background-position: center bottom;*/
/*background-repeat: repeat-y;*/
}
.certs .cert {
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.certs .cert .cert-cate {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
width: 130px;
margin-right: 20px;
}
.certs .cert .cert-cate .item {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
width: 100%;
height: 210px;
border-bottom: 1px solid #ddd;
background: #eee;
cursor: pointer;
}
.certs .cert .cert-cate .item.active {
background: #1760AD;
}
.certs .cert .cert-cate .item:last-of-type {
border-bottom: none;
}
.certs .cert .cert-cate .item .icon {
width: 44px;
height: 50px;
background: url("../image/icon_honor.png");
background-repeat: no-repeat;
margin-bottom: 10px;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.certs .cert .cert-cate .item.active .icon {
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.certs .cert .cert-cate .item .icon.icon-1 {
background-position: 0 0;
}
.certs .cert .cert-cate .item.active .icon.icon-1 {
background-position: -44px 0;
}
.certs .cert .cert-cate .item .icon.icon-2 {
background-position: 0 -50px;
}
.certs .cert .cert-cate .item.active .icon.icon-2 {
background-position: -44px -50px;
}
.certs .cert .cert-cate .item span {
font-size: 20px;
color: #666;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.certs .cert .cert-cate .item.active span {
color: #fff;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.certs .cert .lists {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
width: calc(100% - 150px);
/*padding-bottom: 100px;*/
}
.certs .cert .lists .box {
width: 100%;
position: relative;
height: 0!important;
overflow: hidden;
}
.certs .cert .lists .box.on {
height: auto !important;
overflow: unset;
}
.swiper-bxbx {
width: 100%;
height: 450px;
overflow: hidden;
}
.swiper-bxbx .swiper-wrapper .swiper-slide {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
width: 100%;
}
.swiper-bxbx .swiper-wrapper .swiper-slide img {
width: 100%;
height: 420px
}
.swiper-bxbx .swiper-wrapper .swiper-slide span {
width: 100%;
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-size: 20px;
color: #000;
text-align: center;
height: 30px;
line-height: 30px;
}
.certs .cert .lists .box .swiper-button-next {
right: unset;
left: calc((100% / 2) + 5px);
top: unset;
bottom: -80px;
border: 1px solid #ddd;
background: #fff;
width: 44px;
height: 44px;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.certs .cert .lists .box .swiper-button-prev {
right: unset;
left: calc((100% / 2) - 49px);
top: unset;
bottom: -80px;
border: 1px solid #ddd;
background: #fff;
width: 44px;
height: 44px;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.certs .cert .lists .box .swiper-button-prev img {
width: 24px;
}
.certs .cert .lists .box .swiper-button-prev:hover,.certs .cert .lists .box .swiper-button-next:hover {
border: 1px solid #1760AD;
background: #1760AD;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.certs .cert .lists .box .swiper-button-next:after,.certs .cert .lists .box .swiper-button-prev:after {
font-size:16px;
color:#999;
}
.certs .cert .lists .box .swiper-button-next:hover:after,.certs .cert .lists .box .swiper-button-prev:hover:after {
color:#fff;
}
.section-team {
padding: 0 0 70px;
width: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
}
.team {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
}
.team .lists {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
width: 100%;
margin-top:30px;
position: relative;
}
.swiper-team-bbx {
width: 100%;
height: 430px;
overflow: hidden;
}
.swiper-team-bbx .swiper-wrapper .swiper-slide {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
width: 100%;
position: relative;
}
.swiper-team-bbx .swiper-wrapper .swiper-slide img {
width: 100%;
height: 430px
}
.swiper-team-bbx .swiper-wrapper .swiper-slide span {
width: 100%;
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-size: 20px;
color: #000;
background: #f2f2f2;
text-align: center;
height: 40px;
line-height: 40px;
position: absolute;
left: 0;
bottom: 0;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.swiper-team-bbx .swiper-wrapper .swiper-slide:hover span {
background: #1760AD;
color: #fff;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.team .lists .swiper-button-next {
right: -60px;
left: unset;
top: 50%;
bottom: unset;
border: 1px solid #ddd;
width: 40px;
height: 40px;
border-radius: 50%;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.team .lists .swiper-button-prev {
right: unset;
left: -60px;
top: 50%;
bottom: unset;
border: 1px solid #ddd;
background: #fff;
width: 40px;
height: 40px;
border-radius: 50%;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.team .lists .swiper-button-prev:hover,.team .lists .swiper-button-next:hover {
border: 1px solid #1760AD;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.team .lists .swiper-button-next:after,.team .lists .swiper-button-prev:after {
font-size: 18px;
color: #ddd;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.team .lists .swiper-button-next:hover:after,.team .lists .swiper-button-prev:hover:after {
color: #1760AD;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.section-xuanze {
padding: 70px 0;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
width: 100%;
background: #F6F8FA;
}
.xuanze {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
}
.xuanze .lists {
margin-top: 60px;
display: flex;
flex-wrap: wrap;
width: 100%;
}
.xuanze .lists .box {
display: flex;
align-items: flex-start;
justify-content: flex-start;
width: calc(50% - 25px);
margin-right: 50px;
cursor: pointer;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.xuanze .lists .box:nth-child(1),.xuanze .lists .box:nth-child(2) {
margin-bottom: 50px;
}
.xuanze .lists .box:nth-child(2n) {
margin-right: 0;
}
.xuanze .lists .box .l {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
width: calc(100% - 368px);
height: 276px;
position: relative;
background: #fff;
}
.xuanze .lists .box .l .bg {
position: absolute;
left: -16px;
top: 20px;
z-index: 1;
}
.xuanze .lists .box .l .active-bg {
position: absolute;
left: -16px;
top: 20px;
display: none;
z-index: 1;
}
.xuanze .lists .box.active .l .bg {
display: none;
}
.xuanze .lists .box.active .l .active-bg {
display: flex;
}
.xuanze .lists .box .l .ta {
position: relative;
z-index: 2;
display: flex;
align-items: flex-start;
justify-content: flex-start;
margin: 40px 0 0 20px;
}
.xuanze .lists .box .l .ta .num {
width: 34px;
height: 25px;
overflow: hidden;
background-position: 0 0;
background-repeat: no-repeat;
margin-right: 10px;
margin-top: 2px;
}
.xuanze .lists .box .l .ta .num.num1 {
background-image: url("../images/h_1.png");
}
.xuanze .lists .box .l .ta .num.num2 {
background-image: url("../images/h_2.png");
}
.xuanze .lists .box .l .ta .num.num3 {
background-image: url("../images/h_3.png");
}
.xuanze .lists .box .l .ta .num.num4 {
background-image: url("../images/h_4.png");
}
.xuanze .lists .box.active .l .ta .num {
background-position: -34px 0;
}
.xuanze .lists .box .l .ta .text {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
font-size: 26px;
letter-spacing: 2px;
color: #333;
font-weight: bold;
}
.xuanze .lists .box.active .l .ta .text {
color: #fff;
}
.xuanze .lists .box .l .ta .text span:first-of-type {
margin-bottom: 5px;
}
.xuanze .lists .box .l .tc {
position: relative;
z-index: 2;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
margin: 60px 0 0 50px;
font-size: 22px;
line-height: 40px;
color: #333;
}
.section-page-position {
padding: 20px 0;
}
.section-detail {
padding:0 0 70px;
}
.section-detail .product .lists {
margin-top: 0;
}
.product .lists .left .boxs {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
width: 100%;
margin-top: 20px;
}
.product .lists .left .boxs .title {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
width: 100%;
background: #FE6B03;
padding: 15px 20px;
}
.product .lists .left .boxs .title h1 {
font-size: 30px;
color: #fff;
letter-spacing: 2px;
}
.product .lists .left .boxs .title h6 {
font-size: 18px;
color: #fff;
margin-top: 10px;
}
.product .lists .left .boxs .list {
border: 1px solid #ddd;
width: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
padding: 0 20px;
margin-top: 10px;
}
.product .lists .left .boxs .list a {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
border-bottom: 1px solid #ddd;
padding: 15px 15px;
}
.product .lists .left .boxs .list a:last-of-type {
border-bottom: none;
}
.product .lists .left .boxs .list a .icon {
display: flex;
align-items: center;
justify-content: center;
border-radius: 50px;
margin-right: 5px;
}
.product .lists .left .boxs .list a span {
font-size: 18px;
color: #333;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.product .lists .left .boxs .list a:hover span {
color: #FE6B03;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.product .lists .left .boxs .contact {
border: 1px solid #ddd;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
padding: 20px 20px;
}
.product .lists .left .boxs .contact p {
font-size: 18px;
color: #222;
margin-bottom: 10px;
}
.product .lists .left .boxs .contact .qr {
width: 154px;
height: 154px;
margin-top: 15px;
}
.product .lists .left .boxs .contact .sao {
font-size: 14px;
margin-top: 5px;
text-align: center;
width: 100%;
color: #555;
}
.section-detail .gl-box {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
width: 100%;
margin-top: 50px;
}
.section-detail .gl-box.mt50 {
margin-bottom: 50px;
}
.section-detail .gl-box .gl-title {
display: flex;
align-items: center;
justify-content: space-between;
width:100%;
border: 1px solid #ddd;
border-right:2px solid #FE6B03;
border-bottom: 2px solid #FE6B03;
}
.section-detail .gl-box .gl-title .name {
background: #FE6B03;
color: #fff;
font-size: 16px;
padding: 12px 20px;
display: flex;
align-items: center;
justify-content: center;
}
.section-detail .gl-box .gl-title .name img {
width: 20px;
height: 20px;
margin-top: 2px;
/*margin-right: 5px;*/
}
.section-detail .gl-box .gl-title .more {
font-size: 16px;
margin-right: 10px;
color: #888;
}
.section-detail .gl-box .gl-title .more:hover {
color: #FE6B03;
}
.section-detail .gl-box .gl-contact {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.section-detail .gl-box .gl-contact img {
width: 100%;
}
.section-detail .gl-box .gl-pro-list {
display: flex;
align-items: flex-start;
justify-content: flex-start;
width: 100%;
margin-top: 30px;
}
.section-detail .gl-box .gl-pro-list .pro {
width: 390px;
height: 430px;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
margin-right: calc((100% - (390px * 3)) / 2);
border: 1px solid #ddd;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.section-detail .gl-box .gl-pro-list .pro:hover {
border: 1px solid #FE6B03;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.section-detail .gl-box .gl-pro-list .pro:last-of-type {
margin-right: 0;
}
.section-detail .gl-box .gl-pro-list .pro .image {
width: 390px;
height: 390px;
overflow: hidden;
}
.section-detail .gl-box .gl-pro-list .pro .image img {
width: 390px;
height: 390px;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.section-detail .gl-box .gl-pro-list .pro:hover .image img {
-webkit-transform: scale(1.05);
transform: scale(1.05);
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.section-detail .gl-box .gl-pro-list .pro .name {
height: 40px;
line-height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0 10px;
background:#DDDDDD;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.section-detail .gl-box .gl-pro-list .pro .name .text {
display: inline-block;
width: 100%;
height: 40px;
line-height: 40px;
font-size: 18px;
color: #000;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
text-align: center;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.section-detail .gl-box .gl-pro-list .pro .name .icon {
width: 0px;
height: 20px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.section-detail .gl-box .gl-pro-list .pro:hover .name{
background: #FE6B03;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.section-detail .gl-box .gl-pro-list .pro:hover .name .text {
width: calc(100% - 44px);
color: #fff;
-webkit-transition: all .5s ease;
transition: all .5s ease;
text-align: left;
}
.section-detail .gl-box .gl-pro-list .pro:hover .name .icon {
width: 44px;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.section-detail .gl-box .gl-new-list {
display: flex;
flex-wrap: wrap;
width: 100%;
margin-top: 30px;
}
.section-detail .gl-box .gl-new-list .newsx {
display: flex;
align-items: center;
justify-content: flex-start;
width: calc(50% - 10px);
border-bottom: 1px solid #ddd;
margin-right: 20px;
margin-bottom: 15px;
padding-bottom: 15px;
}
.section-detail .gl-box .gl-new-list .newsx:nth-child(2n){
margin-right: 0;
}
.section-detail .gl-box .gl-new-list .newsx .text {
width: calc(100% - 90px);
font-size: 18px;
color: #333;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.section-detail .gl-box .gl-new-list .newsx .time {
text-align: right;
width:90px;
font-size: 16px;
color: #666;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.section-detail .gl-box .gl-new-list .newsx:hover .text {
color: #FE6B03;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.section-detail .gl-box .gl-new-list .newsx:hover .time {
color: #FE6B03;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.section-detail .contact-title {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
width: 100%;
}
.section-detail .contact-title h1 {
font-size:44px;
font-weight: bold;
color: #333;
}
.section-detail .contact-title .line {
width: 400px;
height: 1px;
position: relative;
background-color: #ddd;
margin: 15px 0;
}
.section-detail .contact-title .line em {
position: absolute;
width: 20px;
height: 5px;
border: 1px solid #FE6B03;
left: calc((100% - 22px) / 2);
top: -2px;
}
.section-detail .contact-title h6 {
font-size: 18px;
color: #333;
}
.section-detail .contact-box {
display: flex;
align-items: flex-start;
justify-content: space-between;
width: 100%;
margin-top: 30px;
}
.section-detail .contact-box .box {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
width: calc((100% - 40px) / 3);
border: 1px solid #FE6B03;
border-radius: 5px;
}
.section-detail .contact-box .box .name {
width: 100%;
font-size: 18px;
color: #fff;
background: #FE6B03;
text-align: center;
padding: 15px 0;
}
.section-detail .contact-box .box .infos {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
width: 100%;
padding: 20px 0;
}
.section-detail .contact-box .box .infos .icon {
width: 44px;
height: 44px;
margin: 15px 0;
}
.section-detail .contact-box .box .infos p {
height: 40px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
line-height: 20px;
width: 100%;
padding: 0 10px;
font-size: 22px;
color: #333;
margin-bottom: 15px;
}
.section-detail .contact-box .box .infos p.num {
font-size: 22px;
}
.services-apps {
padding: 70px 0 70px;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
}
.apps {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
}
.apps .boxs {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
margin-top: 60px;
}
.apps .boxs .box {
width:360px;
height: 410px;
margin-right: calc((100% - (360px * 4)) / 3);
background: #F2F2F2;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.apps .boxs .box:hover {
background: #FE6B03;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.apps .boxs .box:nth-child(4n){
margin-right: 0;
}
.apps .boxs .box .image {
width: 360px;
height: 360px;
overflow: hidden;
position: relative;
}
.apps .boxs .box .image img {
width: 360px;
height: 360px;
}
.apps .boxs .box .image .bg {
position: absolute;
left: 0;
top: 0;
width:100%;
height:100%;
background: rgba(0,0,0,0.5);
opacity: 0;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.apps .boxs .box:hover .image .bg {
opacity: 1;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.apps .boxs .box .image .more {
width: 160px;
height: 160px;
border: 1px solid #FE6B03;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 100px;
top: 100px;
opacity: 0;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.apps .boxs .box .image .more {
opacity: 1;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.apps .boxs .box .image .more .s-more {
width: 150px;
height:150px;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
background: #FE6B03;
border-radius: 50%;
font-size: 22px;
color: #fff;
line-height: 28px;
}
.apps .boxs .box .bottom-title {
display: inline-block;
width: 100%;
padding: 0 10px;
text-align: center;
height: 50px;
line-height: 50px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: #333;
font-size: 20px;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.apps .boxs .box:hover .bottom-title {
color: #fff;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.services-yyal {
padding: 70px 0;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
background: #F6F8FA;
}
.yyal {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
}
.yyal .boxs {
display: flex;
flex-wrap: wrap;
width: 100%;
margin-top: 60px;
}
.yyal .boxs .box {
width:488px;
height: 426px;
margin-right: calc((100% - (488px * 3)) / 2);
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
margin-bottom: 20px;
}
.yyal .boxs .box:nth-child(3n){
margin-right: 0;
}
.yyal .boxs .box .image {
width:488px;
height: 376px;
}
.yyal .boxs .box .bottom-title {
display: inline-block;
width: 100%;
padding: 0 10px;
text-align: center;
height: 50px;
line-height: 50px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: #333;
font-size: 20px;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
background: #fff;
}
.yyal .boxs .box:hover .bottom-title {
background: #FE6B03;
color: #fff;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.yyal .boxs .more {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.section-cooperation {
padding: 70px 0 70px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
}
.cooperation {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
}
.cooperation .cooperation-box {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
width: 100%;
background: #fff;
margin-top: 60px;
position: relative;
}
.swiper-cooperation {
width: 100%;
height: 200px;
overflow: hidden;
}
.swiper-cooperation .swiper-wrapper .swiper-slide {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
width: 100%;
height: 200px;
background: #F6F8FA;
}
.swiper-cooperation .swiper-wrapper .swiper-slide img {
width: 100%;
height: 150px;
}
.swiper-cooperation .swiper-wrapper .swiper-slide .cont {
width: 100%;
height: 50px;
line-height: 50px;
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: #000;
font-size: 18px;
text-align: center;
}
.cooperation-box .swiper-button-next {
right: -50px;
left: unset;
top: 100px;
bottom:unset;
background: none;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid #ddd;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
.cooperation-box .swiper-button-next img {
width: 24px;
}
.cooperation-box .swiper-button-prev {
right: unset;
left: -50px;
top: 100px;
bottom: unset;
background: none;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid #ddd;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
.cooperation-box .swiper-button-prev img {
width: 24px;
}
.cooperation-box .swiper-button-next:after,.cooperation-box .swiper-button-prev:after {
display: none;
}
.services-abs {
padding: 40px 0 70px;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
width: 100%;
}
.abs {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
}
.abs .boxs{
margin-top: 60px;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
width: 100%;
}
.abs .boxs .video {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.abs .boxs .video .video-image {
width: 100%;
}
.abs .boxs .ab-title {
margin-top: 40px;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.abs .boxs .ab-title em {
width: calc((100% - 132px) / 2);
height: 1px;
background: #ddd;
}
.abs .boxs .ab-title .icon {
margin: 0 20px;
}
.abs .boxs .ab-intro {
margin-top: 30px;
display: inline-block;
width: 100%;
text-align: center;
line-height: 36px;
font-size: 18px;
color: #333;
}
.abs .boxs .ab-list {
margin-top: 40px;
display: flex;
align-items: flex-start;
justify-content: space-between;
width: 100%;
}
.abs .boxs .ab-list .bx {
width: 480px;
height: 480px;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
background: #F6F8FA;
}
.abs .boxs .ab-list .bx .image {
width: 132px;
height: 121px;
background-repeat: no-repeat;
background-position: 0 0;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.abs .boxs .ab-list .bx .image.image1 {
background-image: url("../images/icon_45.png");
}
.abs .boxs .ab-list .bx .image.image2 {
background-image: url("../images/icon_46.png");
}
.abs .boxs .ab-list .bx .image.image3 {
background-image: url("../images/icon_47.png");
}
.abs .boxs .ab-list .bx.active .image {
background-position: -132px 0;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.abs .boxs .ab-list .bx h3 {
font-size: 28px;
color:#333;
font-weight: bold;
margin: 20px 0 40px;
width: 100%;
text-align: center;
}
.abs .boxs .ab-list .bx .t {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
font-size: 22px;
color: #333;
line-height: 32px;
}
/* ----- PB分页数字条效果 结束 ----- */
.pagebar {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.pagebar .pagination {
display: flex;
justify-content: center;
margin: 30px 0;
}
.pagination a {
background: #fff;
border: 1px solid #ccc;
color: #000;
font-size: 18px;
padding: 10px 14px;
margin: 0 5px;
border-radius: 3px;
}
.pagination span {
color: #000;
font-size: 14px;
padding: 8px 2px;
margin: 0 5px;
border-radius: 3px;
}
.pagination a:hover {
color: #1760AD;
border: 1px solid #1760AD;
}
.pagination a.page-num-current {
color: #fff;
background: #1760AD;
border: 1px solid #1760AD;
}
/* ----- PB分页数字条效果 结束 ----- */
.cons .con .details .pro-detail {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
width: 100%;
}
.cons .con .details .pro-detail .boxs {
display: flex;
align-items: flex-start;
justify-content: space-between;
width: 100%;
}
.cons .con .details .pro-detail .boxs .photos{
width: 400px;
position: relative;
display: inline-block;
float: left;
}
.cons .con .details .pro-detail .boxs .photos .photos-box{
overflow: hidden;
position: relative;
width: 400px;
height: 400px;
}
.cons .con .details .pro-detail .boxs .photos .photos-box .images-cover{
height: 100%;
width: 100%;
position: relative;
box-sizing: border-box;
}
.cons .con .details .pro-detail .boxs .photos .photos-box .images-cover img {
padding: 1px;
display: inline-block;
float: left;
border: 1px solid #cfcfcf;
box-sizing: border-box;
position: absolute;
}
.cons .con .details .pro-detail .boxs .photos .photos-box .move-view{
width: 100px;
height: 100px;
position: absolute;
background-image: url('../image/move-box.png');
}
.cons .con .details .pro-detail .boxs .photos .magnifier-assembly {
height: 92px;
overflow: hidden;
position: relative;
padding-left: 30px;
padding-right: 30px;
}
.cons .con .details .pro-detail .boxs .photos .magnifier-assembly .magnifier-btn {
position: absolute;
width: 100%;
top: 50%;
left: 0;
margin-top: -40px;
}
.cons .con .details .pro-detail .boxs .photos .magnifier-assembly .magnifier-btn span {
line-height: 75px;
height: 75px;
width: 20px;
background: linear-gradient(to bottom, #01468F, #016FBA);
color: #ffffff;
display: block;
z-index: 9998;
text-align: center;
font-size: 20px;
cursor: pointer;
border-radius: 3px;
transition: background ease .5s;
-webkit-transition: background ease .5s;
}
.cons .con .details .pro-detail .boxs .photos .magnifier-assembly .magnifier-btn .magnifier-btn-left {
float: left;
}
.cons .con .details .pro-detail .boxs .photos .magnifier-assembly .magnifier-btn .magnifier-btn-right{
float: right;
}
.cons .con .details .pro-detail .boxs .photos .magnifier-assembly .magnifier-line {
position: relative;
overflow: hidden;
height: 92px;
}
.cons .con .details .pro-detail .boxs .photos .magnifier-assembly .magnifier-line ul {
overflow: hidden;
margin: 0 auto;
display: block;
font-size: 0;
width: 10000%;
position: absolute;
left: 0;
z-index: 997;
}
.animation03 {
transition: all .3s ease-in .1s;
-ms-transition: all .3s ease-in .1s;
-moz-transition: all .3s ease-in .1s;
-webkit-transition: all .3s ease-in .1s;
-o-transition: all .3s ease-in .1s;
}
.clearfix:after, .clearfix:before {
display: table;
line-height: 0;
content: "";
}
.cons .con .details .pro-detail .boxs .photos .magnifier-assembly .magnifier-line ul li {
list-style: none;
cursor: pointer;
float: left;
width: 115px;
height: 99px;
}
.cons .con .details .pro-detail .boxs .photos .magnifier-assembly .magnifier-line ul li img {
padding: 1px;
display: inline-block;
float: left;
border: 1px solid #cfcfcf;
box-sizing: border-box;
}
.small-img {
display: flex;
align-items: center;
justify-content: center;
height: 78px;
width: 78px;
padding: 1px;
margin: 5px;
overflow: hidden;
text-align: center;
}
.small-img img {
width: 100%;
height: 100%;
}
.active {
transition: .3s;
}
.magnifier-view {
width: 100%;
height: 100%;
position: absolute;
right: -105%;
top: 0;
z-index: 9999;
background-color: #fff;
display: none;
overflow: hidden;
}
.magnifier-view img {
display: block;
}
.pro_tinfo_r {
display: inline-block;
float: left;
width: calc(100% - 430px);
}
.pro_tinfo_r .tit {
color: #222222;
line-height: 39px;
padding-bottom: 10px;
border-bottom: 1px dashed #ccc;
font-size: 28px;
font-weight: bold;
margin-bottom: 20px;
margin-top: 20px;
display: block;
width: 100%;
}
.pro_tinfo_r p {
color: #424242;
font-size: 18px;
line-height: 30px;
margin-top: 23px;
}
.cpdh {
font-size: 33px;
color: #000;
margin-top: 26px;
/*line-height: 45px;*/
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column;
}
.cpdh span {
display: flex;
align-items: center;
justify-content: flex-start;
font-size: 20px;
color: #666;
}
.cpdh span img {
width: 24px;
height: 24px;
margin-right: 10px;
}
.cpdh em {
padding-top:20px;
}
.diysr {
line-height: 49px;
color: #ffffff;
font-size: 23px;
padding-left: 50px;
background: linear-gradient(to bottom, #01468F, #016FBA);
font-weight: initial;
position: relative;
height: 49px;
overflow: hidden;
border-radius: 5px;
width: 100%;
margin-top: 30px;
}
.diysr i {
font-size: 14px;
font-family: arial;
font-weight: 400;
text-transform: uppercase;
font-style: normal;
padding-left: 5px;
}
.i-isdbt:after, .diysr:after {
width: 47px;
height: 48px;
content: '';
position: absolute;
left: 0px;
top: 0px;
background: url('../image/sanjiao2.png') no-repeat 9px 5px;
background-size: 40px;
}
.cp-body {
margin-top: 20px;
line-height: 28px;
width: 100%;
}
.cp-body img {
max-width: 100%;
}
.cons .con .details .news-detail {
width: 100%;
}
.cons .con .details .d-title {
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
color: #222;
margin-top: 30px;
}
.cons .con .details .d-tag {
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
color: #888;
font-size: 14px;
border-bottom: 1px dashed #eee;
padding-bottom: 20px;
}
.cons .con .details .d-tag span {
margin-right: 20px;
}
.cons .con .details .detail {
margin: 40px 0;
line-height: 36px;
font-size: 16px;
width: 100%;
overflow-x: hidden;
}
.cons .con .details .detail img {
max-width: 100%;
}
.gduo {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.gduo .pg {
width: 48%;
}