body{
color: #353c4b;
}
html, body {
scroll-behavior:smooth;
overflow-x: hidden;
}
li {
list-style: none;
}
a {
color: #353c4b;
transition: all 0.3s ease;
}
a:hover {
color: #353c4b;
text-decoration: none;
}
p, dl, dt, dd, ul {
margin: 0px;
padding: 0px;
}
@media (min-width: 768px) {
.container-fluid{
padding: 0 6.25%;
}
}
.index-about-title a:hover{
font-size: 18px;
color: #01aae5;
}
.news-list ul li:hover p.desc{
border-color: #01aae5;
}
.index-menu .lang-list{
height: 32px;
width: 100px;
font-size: 14px;
font-weight: bold;
display: flex;
margin-left: auto;
align-items: center;
justify-content: center;
border: 2px solid #93979f;
}
.index-menu .lang-list span{
margin: 0 8px;
color: #353c4b;
}
.index-menu .lang-list a{
color: #353c4b;
}
.index-menu .lang-list a:hover{
color: #01aae5;
}
.index-menu .list .item ul li > a:hover,
.index-menu .list .item ul li p a:hover{
color: #01aae5;
}
.swiper-button-prev:after,
.swiper-button-next:after{
color: #ffffff;
}
.pc .swiper-button-next,
.pc .swiper-rtl .swiper-button-prev{
right: 6.25%;
}
.pc .swiper-button-prev,
.pc .swiper-rtl .swiper-button-next{
left: 6.25%;
}
.wap .swiper-button-next,
.wap .swiper-rtl .swiper-button-prev{
right: 15px;
}
.wap .swiper-button-prev,
.wap .swiper-rtl .swiper-button-next{
left: 15px;
}
.header{
padding: 10px 0;
background: #ffffff;
}
.header.collapsed{
position: fixed;
top: 0;
left: 0;
right: 0;
transition: color 0.3s ease;
z-index: 9999;
box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.3);
}
.header .container-fluid{
display: flex;
align-items: center;
}
.header .logo img{
height: 30px;
}
.header .lang-list{
height: 27px;
width: 82px;
display: none;
font-size: 12px;
font-weight: bold;
align-items: center;
margin-left: 10px;
justify-content: center;
border: 2px solid #93979f;
}
.header .lang-list span{
margin: 0 8px;
color: #353c4b;
}
.header .lang-list a{
color: #353c4b;
}
.header .nav-list{
display: none;
font-size: 14px;
line-height: 24px;
margin-left: auto;
}
.header .nav-list a{
color: #353c4b;
margin: 0 10px;
letter-spacing: 3px;
position: relative;
}
.header .nav-list a::before,
.header .nav-list a::after{
content: "";
position: absolute;
left: 0;
width: 0;
height: 2px;
top: -5px;
background: #ffeea5;
transition: all 0.5s ease;
}
.header .nav-list a::after{
top: auto;
left: auto;
right: 0;
bottom: -5px;
}
.header .nav-list a:hover::before,
.header .nav-list a.active::before,
.header .nav-list a.active::after,
.header .nav-list a:hover::after{
width: 100%;
}
.header .menu {
width: 40px;
height: 40px;
margin-left: auto;
background: #ffdb3f;
border-radius: 50%;
display: block;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.6rem;
}
@media (min-width: 768px) {
.header{
padding: 50px 0 30px;
}
.header.collapsed{
padding: 20px 0;
}
.header .menu{
display: none;
}
.header .logo img{
height: 36px;
}
.header .nav-list{
display: flex;
}
.header .lang-list{
display: flex;
}
}
@media (min-width: 992px) {
.header .logo img{
height: 40px;
}
.header{
padding: 100px 0 60px;
}
.header.collapsed{
padding: 30px 0;
}
.header .nav-list a{
font-size: 16px;
margin: 0 20px;
}
.header .lang-list{
width: 92px;
margin-left: 20px;
}
.header .lang-list span{
margin: 0 10px;
}
}
@media (min-width: 1200px) {
.header .nav-list a{
margin: 0 30px;
}
.header .lang-list{
margin-left: 30px;
}
}
@media (min-width: 1400px) {
.header .nav-list a{
margin: 0 40px;
}
.header .lang-list{
margin-left: 40px;
}
}
@media (min-width: 1600px) {
.header .nav-list a{
margin: 0 50px;
}
.header .lang-list{
margin-left: 50px;
}
}
/**
* 联系我们
* */
.contact-fluid{
position: relative;
}
.contact-fluid img{
display: block;
width: 100%;
}
.contact-fluid .contact-content{
background: #ffffff;
padding: 30px 0 0;
}
.contact-fluid .contact-content h3.title{
font-size: 20px;
margin: 0 0 15px;
font-weight: 600;
}
.contact-fluid .contact-content div.content{
font-size: 14px;
}
@media (min-width: 992px) {
.contact-fluid{
padding-left: 100px;
}
.contact-fluid .contact-content{
width: 430px;
position: absolute;
bottom: 0;
left: 0;
}
.contact-fluid .contact-content h3.title{
font-size: 24px;
}
.contact-fluid .contact-content div.content{
font-size: 16px;
padding: 0 30px 30px;
}
}
@media (min-width: 1400px) {
.contact-fluid .contact-content{
padding: 50px 0 0;
}
.contact-fluid{
padding-left: 180px;
}
.contact-fluid .contact-content h3.title{
font-size: 32px;
margin: 0 0 20px;
}
.contact-fluid .contact-content{
width: 510px;
}
.contact-fluid .contact-content div.content{
padding: 0 50px 50px;
line-height: 30px;
}
}
.contact-message{
max-width: 1320px;
margin: 0 auto;
padding: 30px 0;
}
.contact-message input,
.contact-message textarea{
width: 100%;
display: block;
background: #f8f8f8;
border: none;
height: 40px;
margin: 0 0 15px;
padding: 0 8px;
outline: none;
border-radius: 5px;
}
.contact-message textarea{
height: 150px;
resize: none;
padding: 8px;
}
.contact-message button{
background: #ffdb3f;
border: none;
width: 34.375%;
height: 40px;
color: #353c4b;
}
.contact-message .qrcode{
padding-top: 30px;
align-items: center;
justify-content: center;
display: flex;
}
.contact-message .qrcode img{
display: block;
max-width: 100%;
}
@media (min-width: 768px) {
.contact-message{
padding: 50px 0;
}
}
@media (min-width: 992px) {
.contact-message{
padding: 80px 0;
}
}
@media (min-width: 1200px) {
.contact-message{
padding: 100px 0;
}
}
.contact-text .row .col{
background: #01aae5;
color: #ffffff;
padding: 30px 30px;
}
.contact-text .row .col:nth-child(2){
background: #ffdb3f;
color: #353c4b;
}
.contact-text h3.name{
font-size: 16px;
line-height: 20px;
padding-left: 5px;
border-left: 3px solid #ffffff;
}
.contact-text .row .col:nth-child(2) h3.name{
border-color: #353c4b;
}
.contact-text .item{
line-height: 30px;
font-size: 14px;
}
@media (min-width: 768px) {
.contact-text h3.name{
border-left-width: 6px;
}
.contact-text .item{
line-height: 40px;
}
.contact-text .row{
margin: 0;
}
.contact-text .row .col{
padding: 60px 0;
}
.contact-text .row .col:nth-child(1){
padding-left: 6.25%;
}
.contact-text .row .col:nth-child(2) .box{
padding-left: 30px;
}
.contact-text .row .col:nth-child(1) .box{
padding-right: 30px;
}
}
@media (min-width: 992px) {
.contact-text .row .col:nth-child(1) .box{
max-width: 660px;
margin-left: auto;
}
.contact-text .row .col:nth-child(2) .box{
padding-left: 60px;
}
.contact-text .row .col:nth-child(1) .box{
padding-right: 60px;
}
}
@media (min-width: 1200px) {
.contact-text .row .col .box{
display: flex;
}
.contact-text .row .col .box h3.name{
margin-right: 30px;
height: 20px;
margin-top: 10px;
flex: 0 0 auto;
}
}
@media (min-width: 1400px) {
.contact-text .row .col .box h3.name{
margin-right: 60px;
}
}
.contact-map{
width: 100%;
height: 50vh;
background: #343b49;
}
/**
* 新闻中心
* */
.container-fluid.news-fluid{
padding-bottom: 40px;
background: url(../images/news.jpg) no-repeat center bottom #ffffff;
}
.news-banner img{
display: block;
width: 100%;
}
.news-banner img.pc{
display: none;
}
@media (min-width: 768px) {
.container-fluid.news-fluid{
padding-bottom: 60px;
}
.news-banner img{
display: none;
}
.news-banner img.pc{
display: block;
}
}
.news-list{
max-width: 1320px;
margin: 0 auto;
padding: 40px 0;
}
.news-list ul li{
margin: 0 0 30px;
}
.news-list ul li .p-img{
overflow: hidden;
}
.news-list ul li img{
display: block;
max-width: 100%;
transition: all 0.3s ease;
}
.news-list ul li:hover img{
transform: scale(1.2);
}
.news-list ul li h3{
font-weight: normal;
font-size: 16px;
margin: 15px 0 0;
}
.news-list ul li p{
font-size: 14px;
color: #8e8e8e;
}
.news-list ul li:hover p{
color: #353c4b;
}
.news-list ul li p.desc{
padding: 20px 0;
border-bottom: 1px solid #8e8e8e;
}
.news-list ul li p.date{
padding: 20px 0 0;
}
.page-box{
display: flex;
justify-content: center;
}
.page-box a,
.page-box span{
width: 32px;
height: 32px;
text-align: center;
line-height: 30px;
margin: 0 5px;
border-radius: 5px;
border: 1px solid #c3c3c3;
}
.page-box a.page-num-current,
.page-box a:hover{
border-color: #ffe300;
background: #ffe300;
}
.page-box{
padding: 20px 0 0;
}
@media (min-width: 768px) {
.news-list{
padding: 60px 0;
}
.news-list ul li{
display: flex;
align-items: center;
}
.news-list ul li .p-img{
width: 200px;
flex: 0 0 auto;
margin-right: 30px;
}
.news-list ul li h3{
margin: 0;
}
.page-box{
padding: 30px 0 0;
}
}
@media (min-width: 992px) {
.container-fluid.news-fluid{
padding-bottom: 80px;
}
.news-list ul li h3{
font-size: 18px;
}
.news-list ul li p.desc{
line-height: 30px;
}
.news-list ul li{
margin: 0 0 50px;
}
.news-list ul li .p-img{
width: 300px;
}
.news-list{
padding: 100px 0;
}
.page-box{
padding: 40px 0 0;
}
}
@media (min-width: 1200px) {
.container-fluid.news-fluid{
padding-bottom: 100px;
}
.news-list ul li .p-img{
width: 400px;
}
.news-list ul li p.desc{
padding: 30px 0;
}
.news-list ul li p.date{
padding: 30px 0 0;
}
}
.news-top{
width: 100%;
max-width: 1320px;
margin: 0 auto;
padding: 30px 15px 20px;
color: #ffffff;
border-radius: 10px;
background-size: cover;
}
.news-top a{
color: #ffffff;
}
.news-top h3{
font-size: 16px;
margin: 0;
font-weight: normal;
}
.news-top p{
font-size: 14px;
}
.news-top p.desc{
padding: 10px 0 30px;
border-bottom: 1px solid #ffffff;
}
.news-top p.date{
margin: 10px 0;
}
@media (min-width: 768px) {
.news-top{
padding: 40px 30px 30px;
}
}
@media (min-width: 992px) {
.news-top{
padding: 135px 60px 60px;
}
.news-top p.desc{
padding: 15px 0 40px;
}
.news-top p.date{
margin: 15px 0;
}
}
.show-news{
width: 100%;
padding: 40px 0;
margin: 0 auto;
max-width: 1320px;
}
.show-news h2.title{
font-size: 18px;
margin: 0 0 10px;
}
.show-news p.date{
color: #a6a6a6;
}
.show-news .content{
margin: 30px 0 0;
}
.show-news .content img{
max-width: 100%;
}
.show-news .p-n{
margin: 30px 0 0;
justify-content: center;
}
.show-news .p-n p{
color: #ffffff;
width: 100%;
line-height: 30px;
margin: 10px 0;
padding: 10px 10px;
background: #353c4b;
}
.show-news .p-n p a{
color: #ffffff;
}
.show-news .p-n span{
display: none;
background: #353c4b;
}
.show-news .p-n p a:hover{
color: #ffdb3f;
}
@media (min-width: 768px) {
.show-news{
padding: 60px 0;
}
.show-news .p-n{
display: flex;
}
.show-news .p-n p{
width: auto;
margin: 0;
padding: 15px 0;
}
.show-news .p-n p.p{
padding-left: 30px;
}
.show-news .p-n p.n{
padding-right: 30px;
}
.show-news .p-n span{
display: block;
color: #ffffff;
line-height: 30px;
padding: 15px 10px;
}
.show-news .p-n{
margin: 60px 0 0;
}
}
@media (min-width: 992px) {
.show-news .p-n span{
padding: 15px 20px;
}
.show-news{
padding: 100px 0;
}
.show-news .p-n p.p{
padding-left: 100px;
}
.show-news .p-n p.n{
padding-right: 100px;
}
.show-news .p-n{
margin: 100px 0 0;
}
}
/**
* 产品中心
* */
.product-banner{
position: relative;
}
.product-banner-box{
position: relative;
}
.product-banner img{
width: 100%;
display: block;
}
.product-banner .product-banner-text{
font-size: 14px;
}
.product-banner .product-banner-text h3.name{
font-size: 20px;
margin: 0 0 20px;
}
.product-banner .product-banner-text .text-desc{
line-height: 24px;
padding-left: 20px;
}
.product-banner .model{
color: #ffffff;
padding: 20px 15px;
background: #01aae5;
margin: 0 0 30px;
border-radius: 0 0 15px 15px;
}
.product-banner .model p{
font-size: 12px;
line-height: 24px;
}
.product-banner .model h3{
font-size: 20px;
margin: 15px 0;
}
.product-banner .model a{
font-size: 12px;
line-height: 24px;
color: #ffffff;
}
@media (min-width: 768px) {
.product-banner .model{
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0;
padding: 0 30px 30px;
background: none;
}
.product-banner-box{
margin: 0 0 40px;
}
.product-banner .model a{
font-size: 14px;
line-height: 30px;
}
.product-banner .model p{
font-size: 14px;
line-height: 30px;
}
.product-banner .model h3{
font-size: 24px;
margin: 20px 0;
}
.product-banner .product-banner-text h3.name{
font-size: 24px;
margin: 0 0 30px;
}
.product-banner .product-banner-text .text-desc{
font-size: 14px;
line-height: 30px;
padding-left: 60px;
}
}
@media (min-width: 992px) {
.product-banner{
padding-left: 250px;
}
.product-banner-box{
margin: 0;
}
.product-banner .product-banner-text{
position: absolute;
left: 0;
width: 235px;
bottom: 0;
}
.product-banner .product-banner-text .text-desc{
padding-left: 20px;
font-size: 12px;
line-height: 24px;
}
}
@media (min-width: 1200px) {
.product-banner{
padding-left: 400px;
}
.product-banner .product-banner-text{
width: 380px;
}
.product-banner .product-banner-text .text-desc{
padding-left: 30px;
font-size: 14px;
line-height: 30px;
}
.product-banner .product-banner-text h3.name{
font-size: 30px;
}
.product-banner .model h3{
font-size: 30px;
margin: 30px 0;
}
}
@media (min-width: 1400px) {
.product-banner{
padding-left: 500px;
}
.product-banner .product-banner-text{
width: 450px;
}
.product-banner .product-banner-text .text-desc{
padding-left: 50px;
}
}
.product-album{
width: 100%;
max-width: 1320px;
margin: 30px auto;
}
.product-album h4{
font-weight: normal;
font-size: 18px;
margin: 0;
padding-left: 20px;
background: url(../images/icon.jpg) no-repeat left center;
text-transform: uppercase;
}
.product-album a{
display: block;
line-height: 20px;
font-size: 14px;
font-weight: bold;
padding: 10px 0 10px 15px;
border-bottom: 3px solid #353c4b;
position: relative;
}
.product-album a::after{
content: "";
width: 0%;
height: 3px;
position: absolute;
left: 0;
bottom: -3px;
background: #ffdb3f;
transition: all 0.3s ease;
}
.product-album a:hover::after{
width: 100%;
}
.product-album .col:nth-child(1){
margin: 0 0 30px;
}
@media (min-width: 576px) {
.product-album .col:nth-child(1){
margin: 0;
}
}
@media (min-width: 768px) {
.product-album{
margin: 50px auto;
}
}
@media (min-width: 992px) {
.product-album{
margin: 80px auto;
}
}
@media (min-width: 1200px) {
.product-album{
margin: 100px auto;
}
}
.product-list{
padding: 30px 0;
background: url(../images/bg1.jpg) no-repeat center bottom #f8f8f8;
}
.product-list .pro-item{
background: #ffffff;
}
.product-list .p-img{
overflow: hidden;
}
.product-list .p-img img{
display: block;
width: 80%;
margin: 0 auto;
transition: all 0.3s ease;
}
.product-list .p-text{
padding: 0 30px 30px;
}
.product-list .p-text h3{
font-size: 16px;
margin: 0 0 10px;
text-align: center;
}
.product-list .p-text p{
font-size: 12px;
text-align: center;
line-height: 24px;
}
.product-list .p-text p.desc{
margin: 0 0 10px;
}
.product-list .pro-item a:hover .p-img img{
transform: scale(0.8);
}
.product-list .col{
margin: 0 0 15px;
}
@media (min-width: 576px) {
.product-list .row{
margin: 0 -7.5px;
}
.product-list .col{
padding: 0 7.5px;
}
.product-list .pro-item{
height: 100%;
}
}
@media (min-width: 768px) {
.product-list{
padding: 50px 0;
}
}
@media (min-width: 992px) {
.product-list{
padding: 80px 0;
}
.product-list .p-text p{
font-size: 14px;
}
}
@media (min-width: 1200px) {
.product-list{
padding: 100px 0;
}
}
.pro-list{
background: #f8f8f8;
}
.pro-list-fluid{
width: 100%;
max-width: 1320px;
margin: 0 auto;
padding: 30px 0;
}
.pro-list-fluid .sort-name{
font-size: 18px;
font-weight: bold;
padding-left: 20px;
background: url(../images/icon.jpg) no-repeat center left;
}
.pro-list-fluid .sort-nav{
padding: 15px 0 0;
}
.pro-list-fluid .sort-nav a{
display: inline-block;
font-size: 14px;
background: #01aae5;
color: #ffffff;
line-height: 22px;
padding: 0 10px;
margin: 0 20px 10px 0;
border-radius: 11px;
}
.pro-list-fluid .sort-nav a:hover,
.pro-list-fluid .sort-nav a.active{
background: #ffdb3f;
color: #353c4b;
}
@media (min-width: 768px) {
.pro-list-fluid .sort-nav{
padding: 20px 0 0;
}
.pro-list-fluid{
padding: 50px 0;
}
}
@media (min-width: 992px) {
.pro-list-fluid{
padding: 80px 0;
}
.pro-list-fluid .sort-nav{
padding: 30px 0 0;
}
.pro-list-fluid .sort-name{
font-size: 20px;
}
}
@media (min-width: 1200px) {
.pro-list-fluid{
padding: 100px 0;
}
}
.pro-list-box{
padding: 30px 0 0;
}
.pro-list-box .col{
margin: 0 0 30px;
}
.pro-list-box .p-img{
border-radius: 20px;
overflow: hidden;
}
.pro-list-box .p-img img{
display: block;
width: 100%;
transition: all 0.3s ease;
}
.pro-list-box h3{
font-size: 16px;
font-weight: 600;
margin: 20px 0 0;
}
.pro-list-box .p-desc{
position: relative;
font-size: 12px;
line-height: 24px;
padding: 15px 0;
border-bottom: 2px solid #696e79;
}
.pro-list-box .p-desc::after{
content: "";
width: 0;
height: 2px;
left: 0;
bottom: -2px;
transition: all 0.3s ease;
position: absolute;
background: #ffdb3f;
}
.pro-list-box p{
width: 100%;
height: 28px;
margin: 20px 0 0;
position: relative;
}
.pro-list-box p span{
width: 28px;
height: 28px;
position: absolute;
display: block;
right: 0;
top: 0;
line-height: 28px;
z-index: 2;
text-align: center;
}
.pro-list-box p::after{
content: "";
width: 28px;
height: 28px;
position: absolute;
right: 0;
top: 0;
transform: scale(0);
z-index: 1;
border-radius: 50%;
transition: all 0.3s ease;
background: #ffdb3f;
}
.pro-list-box a:hover p::after{
transform: scale(1);
}
.pro-list-box a:hover .p-desc::after{
width: 100%;
}
.pro-list-box a:hover .p-img img{
transform: scale(1.2);
}
@media (min-width: 576px and max-width:767px) {
.pro-list-box .row{
margin: 0 -7.5px;
}
.pro-list-box .row .col{
padding: 0 7.5px;
}
}
@media (min-width: 768px) {
.pro-list-box{
padding: 50px 0 0px;
}
}
@media (min-width: 992px) {
.pro-list-box{
padding: 80px 0 0px;
}
.pro-list-box .row{
margin: 0 -30px;
}
.pro-list-box .row .col{
padding: 0 30px;
}
.pro-list-box .col{
margin: 0 0 40px;
}
.pro-list-box p{
margin: 30px 0 0;
}
.pro-list-box h3{
margin: 25px 0 0;
}
.pro-list-box .p-desc{
padding: 20px 0;
}
}
/**
* 产品详情
* */
.product-item-fluid{
background: #f8f8f8;
}
.product-item{
max-width: 1320px;
margin: 0 auto;
padding: 40px 0 0;
}
.product-item .row{
margin: 0;
}
.product-item .row .col{
padding: 0;
}
.product-item .product-dimg{
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.product-item .product-dimg::after{
content: "";
width: 60%;
height: 100%;
z-index: 1;
position: absolute;
right: 0;
top: 0;
background: #ffdb3f;
}
.product-item .product-dimg img{
display: block;
width: 100%;
position: relative;
z-index: 2;
}
.product-item .product-info .sort-name{
font-size: 14px;
padding: 30px 0 0;
font-weight: 600;
}
.product-item .product-info h1{
font-size: 20px;
font-weight: 600;
margin: 15px 0 25px;
}
.product-item .product-info p{
font-size: 14px;
line-height: 26px;
}
.product-item .product-info .param-list{
display: flex;
padding: 30px 0;
}
.product-item .product-info .param-list .param-item{
text-align: center;
}
.product-item .product-info .param-list .param-item:nth-child(2){
margin: 0 20px;
}
.product-item .product-info .param-list .param-item p{
font-weight: 600;
font-size: 14px;
line-height: 20px;
padding: 10px 0 0;
}
.product-item .product-info .param-list .radius{
background: #01aae5;
border-radius: 50%;
color: #ffffff;
width: 80px;
height: 80px;
text-align: center;
line-height: 80px;
}
.product-item .product-info .param-list .radius b{
font-size: 24px;
font-weight: 400;
margin-right: 3px;
}
@media (min-width: 768px) {
.product-item .row .product-info{
padding-left: 30px;
}
.product-item .product-info .sort-name{
padding: 0;
}
}
@media (min-width: 992px) {
.product-item .row .product-info{
padding-left: 50px;
}
.product-item .product-info .param-list .radius{
width: 90px;
height: 90px;
line-height: 90px;
}
.product-item .product-info .param-list .radius b{
font-size: 30px;
}
.product-item .product-info .param-list .param-item:nth-child(2){
margin: 0 50px;
}
.product-item .product-info h1{
font-size: 24px;
margin: 25px 0 35px;
}
.product-item .product-info .param-list{
padding: 50px 0;
}
}
@media (min-width: 1200px) {
.product-item .product-info h1{
font-size: 28px;
}
.product-item .product-info .param-list{
padding: 100px 0 80px;
}
}
@media (min-width: 1400px) {
.product-item .product-info h1{
font-size: 32px;
}
.product-item .product-info .param-list{
padding: 130px 0 100px;
}
}
.product-content-fluid{
background: url(../images/bg.jpg) no-repeat center bottom;
}
.product-content{
width: 100%;
max-width: 1320px;
margin: 0 auto;
padding: 40px 0;
}
.product-content .content{
margin: 0 0 40px;
}
.product-content .content img{
max-width: 100%;
}
@media (min-width: 768px) {
.product-content{
padding: 60px 0;
}
.product-content .content{
margin: 0 0 60px;
}
}
@media (min-width: 992px) {
.product-content{
padding: 80px 0;
}
.product-content .content{
margin: 0 0 80px;
}
}
@media (min-width: 1400px) {
.product-content{
padding: 100px 0;
}
.product-content .content{
margin: 0 0 100px;
}
}
.pre-next{
}
.pre-next p{
width: 100%;
margin: 15px 0 0;
color: #ffffff;
line-height: 30px;
font-size: 14px;
padding: 0 30px;
background: #353c4b;
}
.pre-next p a{
color: #ffffff;
}
.pre-next p a:hover{
color: #ffdb3f;
}
.pre-next a.sort{
display: none;
}
@media (min-width: 768px) {
.pre-next{
justify-content: center;
display: flex;
}
.pre-next p{
max-width: 375px;
width: 50%;
margin: 0;
line-height: 40px;
position: relative;
}
.pre-next p:nth-child(1){
text-align: right;
}
.pre-next a.sort{
display: block;
line-height: 30px;
display: flex;
align-items: center;
background: #353c4b;
}
.pre-next a.sort i{
color: #ffffff;
font-size: 20px;
}
}
@media (min-width: 992px) {
.pre-next p{
line-height: 50px;
}
.pre-next a.sort i{
font-size: 24px;
}
}
@media (min-width: 1400) {
.pre-next p{
line-height: 60px;
}
}
/**
* 关于我们
* */
.about-number{
width: 100%;
padding: 40px 0;
margin: 0 auto;
}
.about-number .item:nth-child(2){
margin: 30px 0;
}
.about-number .item p{
font-size: 16px;
}
.about-number .item span{
font-size: 20px;
}
.about-number .item .number{
font-size: 50px;
line-height: 50px;
font-weight: 600;
}
@media (min-width: 768px) {
.about-number{
display: flex;
padding: 60px 0;
}
.about-number .item:nth-child(2){
margin: 0 auto;
}
}
@media (min-width: 992px) {
.about-number{
padding: 80px 0;
}
.about-number .item .number{
font-size: 80px;
line-height: 80px;
}
}
@media (min-width: 1400px) {
.about-number{
padding: 100px 0;
}
.about-number .item .number{
font-size: 100px;
line-height: 100px;
}
}
.about-desc{
line-height: 30px;
font-size: 14px;
padding: 0 0 40px;
}
@media (min-width: 768px) {
.about-desc{
padding: 0 0 60px;
}
}
@media (min-width: 992px) {
.about-desc{
padding: 0 0 80px;
}
}
@media (min-width: 1400px) {
.about-desc{
padding: 0 0 100px;
}
}
.about-img img{
height: 200px;
display: block;
cursor: pointer;
transition: all 0.3s ease;
}
.about-img img:hover{
transform: scale(1.2);
}
.about-img .swiper-slide{
width: auto;
position: relative;
overflow: hidden;
}
.about-img .swiper-slide::after{
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
cursor: pointer;
position: absolute;
background: rgba(0, 0, 0, 0.5);
}
.about-img .swiper-slide.swiper-slide-active::after,
.about-img .swiper-slide:hover::after{
background: no-repeat;
display: none;
}
@media (min-width: 768px) {
.about-img img{
height: 270px;
}
}
.about-content{
width: 100%;
max-width: 1320px;
margin: 0 auto;
padding: 40px 0;
}
.about-content .content-title img{
display: block;
width: 200px;
}
.about-content .content-title p{
line-height: 20px;
font-size: 16px;
font-weight: 600;
padding-left: 20px;
margin: 30px 0;
border-left: 3px solid #353c4b;
}
@media (min-width: 768px) {
.about-content{
padding: 60px 0;
}
.about-content .content-title p{
border-left-width: 6px;
margin: 40px 0;
}
.about-content .content-title img{
width: 256px;
}
}
@media (min-width: 992px) {
.about-content{
display: flex;
padding: 80px 0;
}
.about-content .content-title{
flex: 0 0 auto;
margin-right: 60px;
}
.about-content .content-title img{
width: 200px;
}
}
@media (min-width: 1400px) {
.about-content .content-title img{
width: 256px;
}
.about-content{
padding: 100px 0;
}
.about-content .content-title{
margin-right: 120px;
}
}
.about-process{
width: 100%;
height: 400px;
background: url(../images/process-bg.jpg);
background-size: cover;
background-position: center;
}
.about-process .container-fluid{
height: 100%;
}
.about-process-box{
width: 100%;
height: 100%;
padding: 80px 0 0;
margin: 0 auto;
max-width: 1320px;
color: #ffffff;
}
.about-process-box .swiper{
height: 100%;
}
.about-process-box .swiper-slide{
height: 100%;
}
.about-process-box .year{
text-align: center;
line-height: 30px;
font-size: 16px;
opacity: 0.6;
padding: 30px 0 0;
cursor: pointer;
transition: all 0.3s ease;
}
.about-process-box .year:hover{
opacity: 1;
font-size: 18px;
}
.about-process-box i{
display: block;
width: 11px;
height: 0;
transition: all 0.3s ease;
background: url(../images/icon.png);
background-size: cover;
margin: 0 auto;
}
.about-process-box .content{
background: #ffdb3f;
border-radius: 10px;
min-height: 130px;
margin-top: 26px;
display: none;
left: calc(-100% + 30px);
right: -100%;
max-width: 360px;
position: absolute;
padding: 20px 20px 20px 130px;
}
.about-process-box .content::after{
content: "";
position: absolute;
left: -30px;
bottom: 0;
width: 140px;
height: 156px;
background: url(../images/ip.png) no-repeat;
}
.about-process-box .swiper-slide-active .content{
display: block;
}
.about-process-box .swiper-slide-active i{
height: 19px;
}
.about-process-box .swiper-slide-active .year{
opacity: 1;
padding: 0;
}
@media (min-width: 500px) {
.about-process-box .content{
width: 360px;
left: 50%;
right: 0;
margin-left: -180px;
}
}
@media (min-width: 992px) {
.about-process{
height: 500px;
}
.about-process-box .content{
margin-left: -40px;
margin-top: 15px;
}
.about-process-box{
padding: 180px 0 0;
}
}
@media (min-width: 1400px) {
.about-process{
position: relative;
border-radius: 250px 0 250px 0;
}
.about-process::after{
content: "";
width: 50%;
height: 50%;
bottom: 0;
right: 0;
z-index: -1;
position: absolute;
background: #f8f8f8;
}
}
.about-honor{
padding: 40px 0;
background: url(../images/bg1.jpg) no-repeat center bottom #f8f8f8;
}
@media (min-width: 768px) {
.about-honor{
padding: 60px 0;
}
}
@media (min-width: 992px) {
.about-honor{
padding: 80px 0;
}
}
@media (min-width: 1400px) {
.about-honor{
padding: 100px 0;
}
}
.about-honor-box{
width: 100%;
max-width: 1320px;
margin: 0 auto;
}
.about-honor-title{
font-size: 18px;
line-height: 18px;
font-weight: 600;
text-align: center;
padding: 0 0 40px;
}
@media (min-width: 768px) {
.about-honor-title{
font-size: 20px;
line-height: 20px;
padding: 0 0 60px;
}
}
@media (min-width: 992px) {
.about-honor-title{
padding: 0 0 80px;
}
}
@media (min-width: 1400px) {
.about-honor-title{
padding: 0 0 100px;
}
}
.about-honor-qrcode{
padding: 25px 0;
border-top: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
}
.about-honor-qrcode .qrcode-box{
display: flex;
}
.about-honor-qrcode .col:nth-child(2){
margin: 25px 0;
}
.about-honor-qrcode .qrcode-box .qrcode-img{
margin-right: 20px;
flex: 0 0 auto;
width: 100px;
}
.about-honor-qrcode .qrcode-box img{
display: block;
width: 100%;
}
.about-honor-qrcode .qrcode-box .qrcode-info{
display: flex;
flex-flow: column;
}
.about-honor-qrcode .qrcode-box .qrcode-info .text{
margin-top: auto;
}
.about-honor-qrcode .qrcode-box .qrcode-info .view{
font-size: 14px;
color: #a7a7a7;
}
.about-honor-qrcode .qrcode-box .qrcode-info .sn{
color: #353c4b;
font-weight: bold;
font-size: 14px;
line-height: 30px;
}
.about-honor-qrcode .qrcode-box .qrcode-info .title{
font-size: 14px;
line-height: 30px;
padding: 0 0 5px;
}
@media (min-width: 768px) {
.about-honor-qrcode{
padding: 50px 0;
}
.about-honor-qrcode .col:nth-child(2){
margin: 0;
}
.about-honor-qrcode .qrcode-box{
display: block;
}
.about-honor-qrcode .qrcode-box .qrcode-img{
margin: 0 0 15px;
width: 100px;
}
.about-honor-qrcode .qrcode-box .qrcode-info .sn{
line-height: 26px;
}
.about-honor-qrcode .qrcode-box .qrcode-info .title{
line-height: 26px;
padding: 0;
}
}
@media (min-width: 1200px) {
.about-honor-qrcode .qrcode-box{
display: flex;
}
.about-honor-qrcode .qrcode-box .qrcode-img{
margin: 0 30px 0 0;
}
}
@media (min-width: 1400px) {
.about-honor-qrcode .qrcode-box .qrcode-img{
width: 140px;
}
.about-honor-qrcode .qrcode-box .qrcode-info .sn{
line-height: 40px;
font-size: 16px;
}
.about-honor-qrcode .qrcode-box .qrcode-info .title{
line-height: 40px;
font-size: 16px;
padding: 0 0 5px;
}
}
@media (min-width: 1600px) {
.about-honor-qrcode .qrcode-box .qrcode-img{
width: 156px;
}
}
.honor-img{
width: 100%;
margin: 0 auto;
max-width: 1320px;
}
.honor-img img{
display: block;
width: 100%;
}
.honor-img .row{
margin: 0 -7.5px;
}
.honor-img .row .col{
padding: 0 7.5px;
margin: 15px 0 0;
}
.honor-img .row .col a{
display: block;
position: relative;
overflow: hidden;
}
.honor-img .row .col a:hover .model{
bottom: 0;
}
.honor-img .row .col a .model{
position: absolute;
bottom: -100px;
left: 0;
right: 0;
display: flex;
justify-content: center;
transition: all 0.3s ease;
}
.honor-img .row .col a .model p{
background: #ffdb3f;
line-height: 40px;
padding: 0 20px;
font-size: 12px;
border-radius: 15px 15px 0 0;
}
@media (min-width: 992px) {
.honor-img .row .col{
margin: 30px 0 0;
}
}
@media (min-width: 992px) {
.honor-img .row{
margin: 0 -15px;
}
.honor-img .row .col{
padding: 0 15px;
margin: 50px 0 0;
}
.honor-img .row .col a .model p{
font-size: 14px;
line-height: 50px;
}
}
.index-banner{
width: 100%;
position: relative;
}
.index-banner .swiper.pc{
width: 100%;
height: 100%;
display: none;
}
.index-banner .swiper.wap{
display: block;
}
.index-banner .swiper.pc .swiper-slide{
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.index-banner .swiper.pc .swiper-slide a{
display: block;
width: 100%;
height: 100%;
}
.index-banner .swiper.wap .swiper-slide img{
width: 100%;
}
@media (min-width: 992px) {
.index-banner{
height: 100vh;
}
.index-banner .swiper.pc{
display: block;
}
.index-banner .swiper.wap{
display: none;
}
}
.index-header{
width: 100%;
top: 0;
left: 0;
padding: 10px 0;
z-index: 9999;
overflow: hidden;
position: absolute;
}
.index-header.collapsed{
position: fixed;
background: #ffffff;
padding: 10px 0;
transition: color 0.3s ease;
box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.3);
}
.index-header .container-fluid{
display: flex;
align-items: center;
}
.index-header h1.logo{
height: 30px;
overflow: hidden;
margin: 0;
}
.index-header h1.logo img{
height: 30px;
display: block;
}
.index-header .menu{
width: 40px;
height: 40px;
margin-left: auto;
background: #ffdb3f;
border-radius: 50%;
display: block;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.6rem;
}
@media (min-width: 768px) {
.index-header{
padding: 30px 0 0;
}
.index-header.collapsed{
padding: 20px 0;
}
.index-header h1.logo{
height: 36px;
}
.index-header h1.logo img{
height: 36px;
}
}
@media (min-width: 992px) {
.index-header h1.logo{
height: 40px;
}
.index-header h1.logo img{
height: 40px;
}
.index-header{
padding: 100px 0;
}
.index-header.collapsed{
padding: 30px 0;
height: auto;
}
}
.index-about{
width: 100%;
margin: 0 auto;
padding: 40px 0;
max-width: 1320px;
}
.index-about-title{
font-size: 16px;
font-weight: 600;
line-height: 20px;
padding: 15px 0 0;
margin: 0 0 40px;
border-top: 1px solid #f2f2f3;
position: relative;
}
.index-about-title::after{
content: "";
width: 100%;
height: 1px;
left: 0;
top: 0;
position: absolute;
background: #424957;
}
.index-about-title a{
float: right;
color: #414d64;
}
@media (min-width: 768px) {
.index-about{
padding: 60px 0;
}
.index-about-title{
margin: 0 0 60px;
}
}
@media (min-width: 992px) {
.index-about{
padding: 80px 0;
}
.index-about-title{
margin: 0 0 80px;
}
}
@media (min-width: 1400px) {
.index-about{
padding: 100px 0;
}
.index-about-title{
margin: 0 0 100px;
}
}
.index-about .video-box{
width: 100%;
position: relative;
}
.index-about .video-box .video-js{
width: 100%;
}
.index-about .video-title h3{
font-size: 24px;
font-weight: 600;
margin: 0 0 30px;
}
.index-about .index-about-content{
font-size: 14px;
line-height: 24px;
margin: 30px 0 0;
}
.index-about .index-more{
display: flex;
margin: 40px 0 0;
}
.index-about .index-more a{
display: block;
position: relative;
padding-left: 70px;
}
.index-about .index-more a span{
display: block;
line-height: 30px;
font-size: 14px;
transition: all 0.3s ease;
border-bottom: 2px solid #414d64;
}
.index-about .index-more a span b{
font-weight: normal;
}
.index-about .index-more a::after{
content: "";
width: 50px;
height: 50px;
left: 0;
background: #ffdb3f;
position: absolute;
border-radius: 50%;
top: 50%;
margin-top: -25px;
transition: all 0.3s ease;
}
.index-about .index-more a:hover{
padding-left: 50px;
}
.index-about .index-more a:hover span{
font-size: 16px;
}
.index-about .index-more a:hover::after{
width: 80px;
height: 80px;
z-index: -1;
margin-top: -40px;
}
.index-about .row{
margin: 0;
}
.index-about .row .col{
padding: 0;
}
@media (min-width: 768px) {
.index-about .row .col-lg-5{
padding-left: 40px;
}
.index-about .index-about-content{
margin: 0;
}
.index-about .row .col{
align-items: center;
display: flex;
}
.index-about .video-title h3{
font-size: 28px;
}
}
@media (min-width: 992px) {
.index-about .video-title h3{
font-size: 32px;
}
}
@media (min-width: 1400px) {
.index-about .index-about-content{
font-size: 16px;
line-height: 30px;
}
.index-about .row .col-lg-5{
padding-left: 80px;
}
.index-about .video-title h3{
font-size: 36px;
}
}
.index-product{
width: 100%;
padding: 40px 0 30px;
position: relative;
background: #b1c1ec;
}
.index-product .index-sample{
display: flex;
line-height: 40px;
font-size: 12px;
margin: 0 0 60px;
}
.index-product .index-sample span{
text-align: center;
background: #ffdb3f;
color: #414d64;
flex: 0 0 auto;
padding: 0 10px;
}
.index-product .index-sample p{
flex: 0 0 auto;
background: #414d64;
text-align: center;
color: #ffffff;
padding: 0 15px;
text-transform: uppercase;
}
.index-product .index-sample p b{
font-weight: normal;
margin: 0 10px;
}
.index-product .index-sample a{
color: #ffffff;
}
.index-product .mySwiper .swiper-wrapper{
transition-delay:.3s;
}
.index-product .swiper-slide .dimg{
width: 100%;
display: flex;
justify-content: center;
flex-flow: column;
position: relative;
}
.index-product .swiper-slide .dimg::after{
content: ""attr(title)"";
text-transform: uppercase;
font-weight: bold;
color: #c1cdf0;
font-size: 80px;
position: absolute;
z-index: 1;
display: flex;
align-items: center;
width: 100%;
overflow: hidden;
justify-content: center;
transform:translateX(-300px);
opacity:0;
transition: all 0.4s ease;
}
.index-product .swiper-slide .dimg img{
display: block;
width: 80%;
z-index: 2;
margin: 0 auto;
background: rgba(255, 255, 255, 0.5);
border-radius: 50%;
position: relative;
}
.index-product .swiper-slide.ani-slide .dimg::after{
transform:translateX(0);
opacity:1;
}
.index-product .swiper-slide .info{
width: 100%;
margin: 0 auto;
color: #ffffff;
font-size: 14px;
line-height: 24px;
max-width: 1320px;
position: relative;
padding: 0 0 30px;
}
.index-product .swiper-slide .info .line{
display: none;
}
.index-product .swiper-slide .info p{
margin: 15px 0 45px;
transform:translateY(300px);
opacity:0;
transition: all 0.3s ease;
}
.index-product .swiper-slide .info a{
display: inline-block;
padding-left: 70px;
position: relative;
transform:translateY(300px);
opacity:0;
transition: all 0.3s ease;
}
.index-product .swiper-slide.ani-slide .info p,
.index-product .swiper-slide.ani-slide .info a{
transform:translateY(0px);
opacity:1;
}
.index-product .swiper-slide .info a::after{
content: "";
width: 50px;
height: 50px;
left: 0;
background: #ffdb3f;
position: absolute;
border-radius: 50%;
top: 50%;
margin-top: -25px;
transition: all 0.3s ease;
}
.index-product .swiper-slide .info a:hover::after{
width: 80px;
height: 80px;
z-index: -1;
margin-top: -40px;
}
.index-product .swiper-slide .info a:hover{
padding-left: 45px;
font-size: 16px;
}
.index-product .swiper-slide .info a span{
color: #ffffff;
display: inline-block;
line-height: 30px;
border-bottom: 2px solid #ffffff;
}
.index-product .mySwiper1 .swiper-slide img{
display: block;
width: 100%;
opacity: 0.7;
cursor: pointer;
}
.index-product .mySwiper1 .swiper-slide-thumb-active img{
opacity: 1;
}
@media (min-width: 550px) {
.index-product .swiper-slide .dimg img{
width: 70%;
}
}
@media (min-width: 768px) {
.index-product{
padding: 60px 0 50px;
}
.index-product .swiper-slide .dimg img{
width: 60%;
}
.index-product .index-sample{
font-size: 14px;
}
}
@media (min-width: 992px) {
.index-product{
height: 700px;
padding: 80px 0 70px;
}
.index-product .index-sample{
position: absolute;
left: 0;
font-size: 16px;
line-height: 50px;
z-index: 98;
}
.index-product .swiper-slide .dimg{
width: 100%;
height: 100%;
position: absolute;
}
.index-product .swiper-slide .dimg img{
width: 40%;
}
.index-product .swiper0 .container-fluid,
.index-product .swiper0 .container-fluid .info{
height: 100%;
}
.index-product .swiper0 .container-fluid .info{
display: flex;
flex-flow: column;
justify-content: flex-end;
}
.index-product .swiper1{
right: 6.25%;
top: 70px;
bottom: 70px;
width: 100px;
padding: 0;
position: absolute;
z-index: 100;
}
.index-product .swiper1 .swiper{
height: 100%;
width: 100%;
}
.index-product .swiper1 .swiper .swiper-slide{
display: flex;
align-items: center;
}
.index-product .swiper0{
width: 100%;
height: 100%;
}
.index-product .swiper-slide .info .line{
width: 2px;
height: 0;
display: block;
margin-left: 15px;
z-index: 2;
position: relativee;
background: #ffffff;
transition: all 0.3s ease;
}
.index-product .swiper-slide.ani-slide .info .line{
height: 80px;
}
}
@media (min-width: 1200px) {
.index-product{
height: 960px;
padding: 100px 0 90px;
}
.index-product .index-sample{
line-height: 60px;
}
.index-product .index-sample span{
width: 100px;
}
.index-product .index-sample p{
width: 420px;
}
.index-product .swiper-slide .dimg img{
width: 45%;
}
.index-product .swiper1{
top: 200px;
bottom: 200px;
}
}
@media (min-width: 1600px) {
.index-product .swiper-slide .dimg img{
width: 36%;
}
}
@media (min-width: 1920px) {
.index-product .swiper-slide .dimg img{
width: auto;
max-height: 100%;
}
}
.index-apply{
width: 100%;
max-width: 1320px;
margin: 0 auto;
padding: 40px 0;
}
.index-apply .pimg{
margin: 0 0 40px;
}
.index-apply .pimg img{
display: block;
width: 100%;
}
.index-apply .ptext{
max-width: 500px;
margin-left: auto;
}
.index-apply .ptext h3{
font-size: 16px;
font-weight: normal;
line-height: 20px;
}
.index-apply .ptext .more{
line-height: 28px;
display: flex;
border-bottom: 1px solid #a0a6b1;
}
.index-apply .ptext .more a{
display: block;
width: 100%;
margin-left: auto;
padding: 15px 0;
background: url(../images/more.jpg) no-repeat center right;
}
.index-apply .ptext .more a:hover{
padding: 15px;
color: #01aae5;
font-weight: bold;
}
@media (min-width: 768px) {
.index-apply{
padding: 60px 0;
}
.index-apply .pimg{
margin: 0 0 60px;
}
}
@media (min-width: 992px) {
.index-apply .ptext{
max-width: 700px;
}
.index-apply{
padding: 80px 0;
}
.index-apply .ptext h3{
font-size: 20px;
}
.index-apply .pimg{
margin: 0 0 80px;
}
.index-apply .ptext .more a{
padding: 22px 0;
}
.index-apply .ptext .more a:hover{
padding: 22px 15px;
}
}
@media (min-width: 1400px) {
.index-apply{
padding: 100px 0;
}
}
.index-partner{
padding: 50px 15px;
background: url(../images/index-partner.jpg);
background-size: cover;
}
.index-partner-box{
width: 100%;
max-width: 1320px;
margin: 0 auto;
}
.index-partner-box .about-number{
padding: 0 0 30px;
}
.index-partner-box .partner-list{
display: flex;
flex-wrap: wrap;
}
.index-partner-box .partner-list{
margin: 0 -7.5px;
}
.index-partner-box .partner-list div.img{
padding: 0 7.5px;
width: 33.33333%;
margin: 0 0 15px;
}
.index-partner-box .partner-list div.img img{
display: block;
width: 100%;
transition: all 0.3s ease;
cursor: pointer;
}
.index-partner-box .partner-list div.img div{
overflow: hidden;
}
.index-partner-box .partner-list div.img img:hover{
transform: scale(1.3);
}
@media (min-width: 768px) {
.index-partner{
padding: 80px 6.25%;
}
.index-partner-box .about-number{
padding: 0 0 50px;
}
.index-partner-box .partner-list div.img{
width: 20%;
}
.index-partner-box .partner-list div.img:nth-child(16),
.index-partner-box .partner-list div.img:nth-child(17),
.index-partner-box .partner-list div.img:nth-child(18){
display: none;
}
}
@media (min-width: 992px) {
.index-partner{
padding: 100px 6.25%;
}
.index-partner-box .about-number{
padding: 0 0 70px;
}
.index-partner-box .partner-list div.img{
width: 16.66666%;
}
.index-partner-box .partner-list div.img:nth-child(16),
.index-partner-box .partner-list div.img:nth-child(17),
.index-partner-box .partner-list div.img:nth-child(18){
display: block;
}
}
@media (min-width: 1200px) {
.index-partner{
padding: 120px 6.25%;
}
.index-partner-box .partner-list div.img{
width: 12.5%;
}
.index-partner-box .partner-list div.img:nth-child(17),
.index-partner-box .partner-list div.img:nth-child(18){
display: none;
}
}
@media (min-width: 1400px) {
.index-partner{
padding: 150px 6.25%;
}
.index-partner-box .about-number{
padding: 0 0 90px;
}
}
@media (min-width: 1600px) {
.index-partner{
padding: 180px 6.25%;
}
}
@media (min-width: 1920px) {
.index-partner{
padding: 200px 6.25%;
}
}
.index-news{
padding: 40px 15px 60px;
background: url(../images/bg1.jpg) no-repeat center bottom #f8f8f8;
}
.index-news-box{
max-width: 1320px;
margin: 0 auto;
}
.index-news-title a{
display: inline-block;
padding-left: 70px;
position: relative;
z-index: 2;
font-size: 14px;
}
.index-news-title a::after{
content: "";
width: 50px;
height: 50px;
left: 0;
background: #ffdb3f;
position: absolute;
border-radius: 50%;
top: 50%;
margin-top: -25px;
transition: all 0.3s ease;
}
.index-news-title a:hover::after{
width: 75px;
height: 75px;
z-index: -1;
margin-top: -35px;
}
.index-news-title a:hover{
padding-left: 45px;
font-size: 16px;
}
.index-news-title a span{
display: inline-block;
line-height: 30px;
border-bottom: 2px solid #191919;
}
.index-news-title h3{
font-size: 16px;
font-weight: 600;
margin: 0;
}
.index-news-title p{
font-size: 14px;
margin: 30px 0;
}
.index-news-list{
margin: 40px 0 0;
border-top: 1px solid #e3e3e3;
}
.index-news-list ul li{
padding: 20px 0;
border-bottom: 1px solid #e3e3e3;
}
.index-news-list ul li .title{
font-size: 14px;
line-height: 24px;
margin: 8px 0 0;
}
.index-news-list ul li .date{
font-size: 14px;
color: #5c5c5c;
line-height: 20px;
}
.index-news-list ul li .more{
display: none;
}
.index-news-list ul li:hover a{
text-decoration: underline;
color: #01aae5;
font-weight: bold;
}
.index-news-list ul li:hover .date{
font-weight: bold;
}
@media (min-width: 768px) {
.index-news{
padding: 60px 6.25%;
}
.index-news-box{
display: flex;
}
.index-news-box .index-news-title{
width: 166px;
flex: 0 0 auto;
}
.index-news-title h3{
font-size: 20px;
}
.index-news-title p{
margin: 70px 0;
}
.index-news-list{
margin: 0;
width: 100%;
margin-left: 75px;
}
.index-news-list ul li{
padding: 30px 0;
}
}
@media (min-width: 992px) {
.index-news{
padding: 80px 6.25%;
}
.index-news-list ul li{
padding: 40px 0;
}
}
@media (min-width: 1200px) {
.index-news-list ul li{
padding: 64px 0;
display: flex;
}
.index-news-list ul li .title{
margin: 0;
line-height: 30px;
}
.index-news-list ul li .date{
line-height: 30px;
margin-right: 80px;
}
.index-news-list ul li .more{
display: block;
line-height: 30px;
margin-left: auto;
}
.index-news-list ul li .more i{
font-weight: bold;
font-size: 20px;
}
.index-news-list{
margin-left: 120px;
}
}
@media (min-width: 1400px) {
.index-news{
padding: 100px 6.25%;
}
.index-news-list{
margin-left: 150px;
}
}
@media (min-width: 450px) {
.index-product .swiper-slide .dimg::after{
font-size: 90px;
}
}
@media (min-width: 550px) {
.index-product .swiper-slide .dimg::after{
font-size: 110px;
}
}
@media (min-width: 650px) {
.index-product .swiper-slide .dimg::after{
font-size: 130px;
}
}
@media (min-width: 750px) {
.index-product .swiper-slide .dimg::after{
font-size: 150px;
}
}
@media (min-width: 850px) {
.index-product .swiper-slide .dimg::after{
font-size: 170px;
}
}
@media (min-width: 950px) {
.index-product .swiper-slide .dimg::after{
font-size: 190px;
}
}
@media (min-width: 1050px) {
.index-product .swiper-slide .dimg::after{
font-size: 210px;
}
}
@media (min-width: 1150px) {
.index-product .swiper-slide .dimg::after{
font-size: 230px;
}
}
@media (min-width: 1250px) {
.index-product .swiper-slide .dimg::after{
font-size: 250px;
}
}
@media (min-width: 1350px) {
.index-product .swiper-slide .dimg::after{
font-size: 270px;
}
}
@media (min-width: 1450px) {
.index-product .swiper-slide .dimg::after{
font-size: 290px;
}
}
@media (min-width: 1550px) {
.index-product .swiper-slide .dimg::after{
font-size: 310px;
}
}
@media (min-width: 1650px) {
.index-product .swiper-slide .dimg::after{
font-size: 330px;
}
}
@media (min-width: 1750px) {
.index-product .swiper-slide .dimg::after{
font-size: 350px;
}
}
@media (min-width: 1850px) {
.index-product .swiper-slide .dimg::after{
font-size: 370px;
}
}
@media (min-width: 1900px) {
.index-product .swiper-slide .dimg::after{
font-size: 400px;
}
}
.footer{
width: 100%;
max-width: 1320px;
margin: 0 auto;
padding: 40px 0 20px;
}
.footer-copyright{
font-size: 12px;
line-height: 20px;
text-align: center;
}
.footer-copyright a{
display: inline-block;
}
.footer-logo{
margin: 0 0 20px;
}
.footer-logo img{
display: block;
height: 42px;
}
.footer-email{
font-size: 14px;
}
.footer-email h4{
font-size: 16px;
font-weight: 600;
margin: 10px 0;
}
.footer-email a{
width: 240px;
display: flex;
height: 40px;
border-radius: 15px;
justify-content: center;
align-items: center;
border: 2px solid #e5e5e5;
color: #353c4b;
}
.footer-email a i{
font-size: 20px;
margin-left: 10px;
color: #353c4b;
}
.footer-tel{
margin: 30px 0 20px;
font-size: 14px;
}
.footer-tel p{
font-size: 12px;
}
.footer-tel a{
font-size: 20px;
font-weight: bold;
}
.footer-nav{
display: none;
}
@media (min-width: 550px) {
.footer-email h4{
margin: 10px 0 20px;
}
.footer-text{
display: flex;
margin: 30px 0;
}
.footer-tel{
margin: 0;
margin-left: auto;
}
}
@media (min-width: 768px) {
.footer{
padding: 80px 0 30px;
}
.footer-email h4{
margin: 10px 0 30px;
}
.footer-text{
display: flex;
margin: 40px 0 60px;
}
}
@media (min-width: 992px) {
.footer{
padding: 100px 0 40px;
}
.footer-text{
display: block;
margin: 60px 0 60px;
}
.footer-email{
display: flex;
}
.footer-email a{
position: relative;
margin-left: 50px;
}
.footer-logo img{
margin: 0 auto;
}
.footer-nav{
margin: 40px 0 0;
display: flex;
}
.footer-nav dl:nth-child(1),
.footer-nav dl:nth-child(2){
flex: 0 0 auto;
margin-right: 80px;
}
.footer-nav dl:nth-child(3) dd{
display: flex;
flex-flow: wrap;
}
.footer-nav dl:nth-child(3) dd div{
width: 33.3333%;
line-height: 24px;
}
.footer-nav dl:nth-child(3) dd div:nth-child(8){
width: 66.6667%;
}
.footer-nav dt{
font-weight: 600;
font-size: 14px;
line-height: 30px;
}
.footer-nav dt a{
color: #5c5c5c;
}
.footer-nav dd{
margin: 5px 0 0;
font-size: 12px;
line-height: 24px;
}
.footer-nav dd a{
color: #969696;
}
.footer-nav dd a:hover,
.footer-nav dt a:hover{
color: #01aae5;
text-decoration: underline;
}
.footer-copyright{
text-align: right;
}
}
@media (min-width: 1200px) {
.footer-layout{
display: flex;
margin: 0 0 60px;
}
.footer-text{
margin: 0;
}
.footer-logo{
flex: 0 0 auto;
margin-right: 100px;
}
.footer-nav dl:nth-child(1),
.footer-nav dl:nth-child(2){
margin-right: 50px;
}
.footer-nav{
margin: 120px 0 0;
}
.footer-email h4{
margin: 10px 0 40px;
}
.footer-email a:after{
content: "";
width: 588px;
height: 228px;
position: absolute;
top: 0;
background: url(../images/footer-img.jpg) no-repeat center;
left: 340px;
}
.footer-email a:hover{
background: #01aae5;
border-color: #01aae5;
color: #ffffff;
}
.footer-email a:hover i{
color: #ffffff;
}
}
@media (min-width: 1400px) {
.footer-logo{
margin-right: 200px;
}
.footer-nav dl:nth-child(1),
.footer-nav dl:nth-child(2){
margin-right: 80px;
}
}
@media (min-width: 1500px) {
.footer-nav dl:nth-child(1),
.footer-nav dl:nth-child(2){
margin-right: 100px;
}
}
@media (min-width: 1600px) {
.footer-nav dl:nth-child(1),
.footer-nav dl:nth-child(2){
margin-right: 120px;
}
}
@media (min-width: 1800px) {
.footer-email a:after{
left: 410px;
}
}
.index-menu{
position: fixed;
left: 0;
right: 0;
top: 0;
display: none;
bottom: 0;
z-index: 9999;
background: #353c4b;
transition: all 0.3s ease;
}
.index-menu .row{
margin: 0 -6px;
height: 100%;
}
.index-menu .row .col{
padding: 0 6px;
height: 100%;
}
.index-menu .row .col .menu{
height: 100%;
overflow: hidden;
display: flex;
right: -110%;
position: relative;
flex-flow: column;
background: #353c4b;
transition: all 0.5s ease;
}
.index-menu .row .col .menu img{
margin-top: auto;
width: 100%;
display: block;
}
.index-menu .menu-box{
display: flex;
height: 100%;
flex-flow: column;
}
.index-menu .menu-box .top{
width: 100%;
flex: 1;
left: -110%;
position: relative;
transition: all 0.3s ease;
background: url(../images/menu-bg1.jpg) no-repeat right bottom #ffffff;
}
.index-menu.active .menu-box .top{
left: 0;
text-transform: uppercase;
}
.index-menu.active .menu-box .bottom .right,
.index-menu.active .menu-box .bottom .left{
bottom: 0;
}
.index-menu.active .row .col .menu{
right: 0;
}
.index-menu .menu-box .bottom{
width: 100%;
height: 200px;
flex: 0 0 auto;
margin-top: 12px;
display: flex;
}
.index-menu .menu-box .bottom .right{
width: 229px;
height: 200px;
flex: 0 0 auto;
bottom: -110%;
transition: all 0.8s ease;
position: relative;
background: url(../images/menu-bg3.jpg) no-repeat center;
}
.index-menu .menu-box .bottom .left{
flex: 1;
margin-right: 12px;
bottom: -110%;
transition: all 0.7s ease;
position: relative;
background: url(../images/menu-bg2.jpg) no-repeat right center #ffffff;
}
.index-menu-header{
position: fixed;
left: 0;
right: 0;
z-index: 9;
padding: 10px 0;
}
.index-menu-header.collapsed{
padding: 10px 0;
height: 60px;
}
.index-menu-header .container-fluid{
display: flex;
align-items: center;
}
.index-menu.active .index-menu-header .logo img{
opacity: 1;
}
.index-menu-header .logo img {
height: 30px;
opacity: 0;
transition: all 0.3s ease;
display: block;
}
.index-menu-header .menu {
width: 40px;
height: 40px;
margin-left: auto;
background: #ffdb3f;
border-radius: 50%;
display: block;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.6rem;
}
@media (min-width: 768px) {
.index-menu-header{
padding: 30px 0 0;
}
.index-menu-header .logo img {
height: 36px;
}
}
@media (min-width: 992px) {
.index-menu-header .logo img {
height: 40px;
}
.index-menu-header{
padding: 100px 0;
}
.index-menu-header.collapsed{
padding: 20px 0;
height: 80px;
}
}
.index-menu .top{
padding: 100px 0 0;
}
.index-menu .link{
font-size: 12px;
font-weight: bold;
text-align: right;
padding-right: 50px;
line-height: 20px;
z-index: 10;
margin: 40px 0 0;
position: relative;
}
.index-menu .link span{
color: #9da1a9;
}
.index-menu .link b{
margin: 0 5px;
}
.index-menu .list{
display: flex;
position: relative;
z-index: 10;
margin: 50px 0 0;
padding-left: 8.35073%;
}
.index-menu .list .item{
margin-left: 100px;
}
.index-menu .list .item ul li{
margin: 0 0 40px;
line-height: 30px;
}
.index-menu .list .item ul li>a{
font-size: 16px;
font-weight: 600;
}
.index-menu .list .item ul li p{
font-size: 14px;
padding-left: 1px;
}
.index-menu .list .item ul li p a{
color: #353c4b;
}
@media (min-width: 992px) {
.index-menu .link{
padding-right: 150px;
}
}
@media (min-width: 1600px) {
.index-menu .list .item{
margin-left: 180px;
}
}
@media (max-width: 767px) {
.index-menu .menu-box{
width: 100%;
flex: 0 0 100%;
max-width: 100%;
}
.index-menu .col-3{
display: none;
}
.index-menu .menu-box .bottom{
display: none;
}
.index-menu .menu-box .top{
background: url(../images/menu-bg4.jpg) no-repeat right bottom #ffffff;
background-size: auto 50%;
transition: all 0.4s ease;
padding: 100px 15px 0;
}
.index-menu .link{
padding: 0;
margin: 0;
text-align: left;
}
.index-menu .list{
margin: 50px 0 0;
padding: 0;
justify-content: center;
}
.index-menu .list .item{
margin: 0;
margin: 0 30px;
}
.index-menu .list .item ul li{
margin: 0 0 30px;
}
}
.menu .span{
width: 20px;
}
.menu .span span{
width: 100%;
height: 2px;
display: block;
margin: 1.5px 0;
float: right;
border-radius: 1px;
background: #353c4b;
animation: arrow1 1.5s ease-in-out infinite;
-webkit-animation: arrow1 1.5s ease-in-out infinite;
}
.menu .span span:nth-child(even){
width: 60%;
animation: arrow 1.5s ease-in-out infinite;
-webkit-animation: arrow 1.5s ease-in-out infinite;
}
@keyframes arrow1{
0%,
100%{
width: 100%;
}
50%{
width: 60%;
}
}
@keyframes arrow{
0%,
100%{
width: 60%;
}
50%{
width: 100%;
}
}
.index-header{
background: none;
}
.index-header .nav-list,
.index-header .lang-list{
display: none;
}
@media (min-width: 768px) {
.index-header.collapsed .menu{
display: none;
}
.index-header.collapsed .nav-list,
.index-header.collapsed .lang-list{
display: flex;
}
}