@charset "utf-8"; @import url('https://fonts.font.im/css?family=Montserrat:300,400,500,600,700,800,900'); #banner{position:relative;background:#fff; overflow:hidden; margin: 80px auto; transition:all .35s;} #banner .swiper{ position: relative;z-index: 80; height: 100%; margin: 0 auto;} #banner .swiper .swiper-slide{width: 100%;height:100%;overflow: hidden;position: relative;z-index: 10; background-position: center top;background-size: cover;} #banner .swiper .swiper-slide:after{ position: absolute;z-index: 1; left: 0;bottom: 0; width: 100%;height: 100%; background:linear-gradient(to bottom, rgba(0,0,0,0),rgba(0,0,0,.8)); content: '';} #banner .swiper .swiper-slide>.info{position: absolute;z-index: 80; left: 12%; bottom: 30%; text-align: left;} #banner .swiper .swiper-slide>.info>.title{font-size: 3.6rem; font-weight: bold; color: #fff;text-shadow: 0 2px 5px rgba(0,0,0,.2);} #banner .swiper .swiper-slide>.info>.text{ width: 56%; padding: 20px 0; font-size: 1.8rem; color: #fff; text-shadow: 0 2px 5px rgba(0,0,0,.1);} #banner .swiper .swiper-slide>.info>.more{ text-align: left;} #banner .swiper .swiper-slide>.info>.more>a{display: inline-block; background: #3ba5f4; color: #fff;font-size: 1.2rem;padding: 10px 20px;} #banner .swiper .swiper-pagination{ z-index: 80; text-align: left; left: 50%; width: 90%; transform: translateX(-50%); } #banner .swiper .swiper-pagination-bullet{width:6px;height:6px;background-color:#fff;margin-bottom: 10px!important; transition: all .3s;} #banner .swiper .swiper-pagination-bullet-active{opacity: 1;} #banner .swiper .control{position: absolute; z-index: 10; left: 50%;bottom: 50px; transform: translateX(-50%); text-align: right;} #banner .swiper .control>a{ display: inline-block; margin-left: 5px; width: 46px; height: 46px; line-height: 46px;text-align: center; color: #fff; background: rgba(0,0,0,.3); border-radius: 100%; transition: all .35s;} #banner .swiper .control>a:hover{background: #3ba5f4;} #banner .swiper .control>a i{font-size: 2rem; text-align: center;} #main{margin: 0 auto;} #main .about{margin: 0 auto; padding-top: 50px;} #main .about .layout{margin: 0 auto;} #main .about .layout>.title{ text-align: left; margin: 0 auto;} #main .about .layout>.title>h3{ position: relative; font-size: 5rem; font-weight: normal; color: #333;} #main .about .layout>.intro{padding: 50px 0; font-size: 2rem; color: #333;line-height: 3rem; margin: 0 auto;} #main .products{margin: 0 auto; padding: 50px 0; } #main .products .layout{margin: 0 auto; padding: 30px 0;} #main .products .layout>.title{ text-align: left; margin: 0 auto;} #main .products .layout>.title>h3{display: inline-block; padding-bottom: 5px; position: relative; font-size: 3rem; font-weight: normal; color: #333; } #main .products .layout>.title>h3:after{display: none; position: absolute;z-index: 12;left: 0;bottom: 0;width: 100%; height: 2px; background: #3ba5f4; content: '';} #main .products .layout>.container{position: relative; margin: 0 auto; padding: 50px 0;} #main .products .layout>.container .prev, #main .products .layout>.container .next{position: absolute;z-index: 50;left: -60px; top: 50%; transform: translateY(-50%); height: 80px; line-height: 80px; color: #3ba5f4; text-align: center; cursor: pointer; transition: all .35s;} #main .products .layout>.container .prev i, #main .products .layout>.container .next i{font-size: 6rem; font-weight: 100;} #main .products .layout>.container .next{position: absolute;z-index: 50;right: -60px; left: auto; } #main .products .layout>.container .prev:hover{ left: -60px;} #main .products .layout>.container .next:hover{ right: -60px;} #main .products .layout>.container .swiper-button-disabled{display: none;} #main .products .layout>.container .swiper{width: 100%;} #main .products .layout>.container .swiper .swiper-slide a{display: block; position: relative; height: 340px; background: #ddd; overflow: hidden; transition: all .35s;} #main .products .layout>.container .swiper .swiper-slide:after{ display: none; position: absolute;z-index: 10; left: 0;top: 0;width: 100%;height: 10px; background: #4b6b80; content: '';} #main .products .layout>.container .swiper .swiper-slide:nth-child(1n):after{ background: #4b6b80;} #main .products .layout>.container .swiper .swiper-slide:nth-child(2n):after{ background: #79142a;} #main .products .layout>.container .swiper .swiper-slide:nth-child(3n):after{ background: #333333;} #main .products .layout>.container .swiper .swiper-slide:nth-child(4n):after{ background: #8b7f39;} #main .products .layout>.container .swiper .swiper-slide a>p{position: absolute;z-index: 20; left: 50%; top: 40px; width: 80%; text-align: center; color: #333; font-size: 2rem; font-weight: bold; line-height: 2rem; transform: translateX(-50%); transition: all .35s;} #main .products .layout>.container .swiper .swiper-slide a>img{ position: absolute;z-index: 10; left: 50%; bottom: 20px; transform: translateX(-50%); width:200px;height: auto; display: block; transition: all .5s;} #main .products .layout>.container .swiper .swiper-slide:nth-child(1n) a:hover{ background: #4b6b80;} #main .products .layout>.container .swiper .swiper-slide:nth-child(2n) a:hover{ background: #79142a;} #main .products .layout>.container .swiper .swiper-slide:nth-child(3n) a:hover{ background: #333333;} #main .products .layout>.container .swiper .swiper-slide:nth-child(4n) a:hover{ background: #8b7f39;} #main .products .layout>.container .swiper .swiper-slide:hover a>p{color: #fff;} #main .products .layout>.container .swiper .swiper-slide:hover a>img{transform: translateX(-50%) translateY(-10px);} #main .industries{margin: 0 auto; padding: 50px 0; } #main .industries .layout{position: relative; margin: 0 auto; padding: 30px 0;} #main .industries .layout>.title{ text-align: left; margin: 0 auto;} #main .industries .layout>.title>h3{display: inline-block;position: relative; font-size: 3rem; font-weight: normal; color: #333; } #main .industries .layout>.title>h3:after{display: none; position: absolute;z-index: 12;left: 0;bottom: 0;width: 100%; height: 2px; background: #3ba5f4; content: '';} #main .industries .layout>.container{position: relative; margin: 0 auto; padding: 50px 0;} #main .industries .layout>.container .thumbs{ background: #eee; padding: 40px;margin: 0 auto;} #main .industries .layout>.container .thumbs .swiper{margin: 0 auto;} #main .industries .layout>.container .thumbs .swiper .swiper-slide>a{ display: block; text-align: center;} #main .industries .layout>.container .thumbs .swiper .swiper-slide>a img{height: 60px; width: auto;opacity: .5; transition: all .35s;} #main .industries .layout>.container .thumbs .swiper .swiper-slide>a p{display: block; padding-top: 10px; font-size: 1.3rem; color: #666; transition: all .35s;} #main .industries .layout>.container .thumbs .swiper .swiper-slide-thumb-active>a img{filter:grayscale(0);opacity: 1;} #main .industries .layout>.container .thumbs .swiper .swiper-slide-thumb-active>a p{color: #3ba5f4; transform: scale(1.1); font-weight: bold;} #main .industries .layout>.container .shows{position: relative;} #main .industries .layout>.container .shows .swiper-slide{position: relative;} #main .industries .layout>.container .shows .swiper-slide:after{ position: absolute;z-index: 1; left: 0;bottom: 0; width: 100%;height: 70%; background:linear-gradient(to bottom, rgba(0,0,0,0),rgba(0,0,0,.8)); content: '';} #main .industries .layout>.container .shows .swiper-slide>.info{position: absolute;z-index: 50; left: 10%;bottom: 20%; width: 60%; text-align: left;} #main .industries .layout>.container .shows .swiper-slide>.info>.tit{ font-size: 4rem; font-weight: bold; color: #fff; transition: all .36s;} #main .industries .layout>.container .shows .swiper-slide>.info>.txt{font-size: 1.6rem; color: #fff;line-height: 2.4rem;transition: all .6s;} #main .industries .layout>.container .shows .swiper-slide>.info>.more{ text-align: left; padding-top: 20px;transition: all .8s;} #main .industries .layout>.container .shows .swiper-slide>.info>.more>a{ position: relative; display: inline-block; background: #3ba5f4; padding: 10px 25px; font-size: 1.4rem; color: #fff;transition: all .35s;} #main .industries .layout>.container .shows .swiper-slide>.info>.more>a:after{position: absolute;z-index: 1; right: 15px; top: 50%; transform: translateY(-50%); opacity: 0; font-family: iconfont; font-size: 1.6rem; color: #fff; content: '\e612'; transition: all .35s;} #main .industries .layout>.container .shows .swiper-slide>.info>.more>a:hover{ background: #007ebe; padding-right: 40px;} #main .industries .layout>.container .shows .swiper-slide>.info>.more>a:hover:after{opacity: 1;} #main .industries .layout>.container .shows .swiper-slide:hover .info>.tit{ transform: translateY(-10px);} #main .industries .layout>.container .shows .swiper-slide:hover .info>.txt{ transform: translateY(-10px);} #main .industries .layout>.container .shows .swiper-slide:hover .info>.more{ transform: translateY(-10px);} #main .service{margin: 0 auto;} #main .service .layout{margin: 0 auto; } #main .service .layout>.title{ text-align: left; margin: 0 auto;} #main .service .layout>.title>h3{ position: relative; font-size: 3rem; font-weight: normal; color: #333;} #main .service .layout>.container{ position: relative; margin: 30px auto;} #main .service .layout>.container .tab-nav{position: absolute;z-index: 10; left: 0; top: 0; width: 100%; float: none;} #main .service .layout>.container .tab-nav>ul{margin: 0 auto; display: flex;align-content: center; align-items: center;} #main .service .layout>.container .tab-nav>ul>li{display: inline-block; background: #3ba5f4; margin-bottom: 2px; transition: all .35s;} #main .service .layout>.container .tab-nav>ul>li>a{display: block; padding: 10px 30px; font-size: 1.6rem; color: #fff;} #main .service .layout>.container .tab-nav>ul>li.active{ background: #007ebe;} #main .service .layout>.container .tab-box{ float: none; width: 100%; padding: 60px; box-sizing: border-box; background: rgba(0,162,245,.1); margin: 30px auto;} #main .service .layout>.container .tab-box>.tab-item{ display:none; text-align: left;} #main .service .layout>.container .tab-box>.current{display: block;} #main .service .layout>.container .tab-box>.tab-item>.img{ width: 40%;} #main .service .layout>.container .tab-box>.tab-item>.img>img{width: 100%;height: auto;} #main .service .layout>.container .tab-box>.tab-item>.box{ width: 50%; padding: 30px 0; } #main .service .layout>.container .tab-box>.tab-item>.box>.tit{font-size: 2.8rem; color: #333;} #main .service .layout>.container .tab-box>.tab-item>.box>.text{ padding-top: 20px; font-size: 1.6rem; color: #333;line-height: 2.4rem;} #main .service .layout>.container .tab-box>.tab-item>.box>.more{text-align: left; padding-top: 30px;} #main .service .layout>.container .tab-box>.tab-item>.box>.more>a{display: inline-block; border: 1px solid #3ba5f4; color: #3ba5f4; font-size: 1.4rem;padding: 10px 20px; transition: all .35s;} #main .service .layout>.container .tab-box>.tab-item>.box>.more>a:hover{background: #3ba5f4; color: #fff;} #main .news{margin: 0 auto; padding: 50px 0 150px 0; } #main .news .layout{position: relative; margin: 0 auto;} #main .news .layout>.title{ text-align: left; margin: 0 auto;} #main .news .layout>.title>h3{display: inline-block;position: relative; font-size: 3rem; font-weight: normal; color: #333; } #main .news .layout>.title>h3:after{ display: none; position: absolute;z-index: 12;left: 0;bottom: 0;width: 100%; height: 2px; background: #3ba5f4; content: '';} #main .news .layout>.container{ padding: 30px 0;} #main .news .layout>.container .shows{ position: relative; width: 50%;overflow: hidden;} #main .news .layout>.container .shows>a{position: relative; display: block;} #main .news .layout>.container .shows>a:after{position: absolute;z-index: 1;left: 0;top: 0; width: 100%;height: 100%; opacity: 0; background: rgba(0,0,0,.5); content: '';transition: all .35s;} #main .news .layout>.container .shows>a:before{position: absolute;z-index: 10;left: 50%;top: 50%; width: 60px;height:60px; line-height: 60px; background: rgba(0,162,245,.8); border-radius: 100%; text-align: center; transform: translate(-50%,-50%); opacity: 0; color: #fff; font-family: iconfont; font-size: 2.4rem; content: '\e600';transition: all .35s;} #main .news .layout>.container .shows img{width: 100%;height: auto; transition: all 2s;} #main .news .layout>.container .shows:hover img{ transform: scale(1.05);} #main .news .layout>.container .shows>a:hover:after{opacity: 1;} #main .news .layout>.container .shows>a:hover:before{opacity: 1;} #main .news .layout>.container .lists{ width:45%; text-align: left;} #main .news .layout>.container .lists>ul{display: block;margin: 0 auto;} #main .news .layout>.container .lists>ul>li{display: block; position: relative;} #main .news .layout>.container .lists>ul>li>a{display: block; border-bottom: 1px solid #eee; padding: 22px 0;} #main .news .layout>.container .lists>ul>li>a:after{position: absolute;z-index: 1; left: 0;bottom: -1px;width: 0; height: 1px;background: #3ba5f4; content: ''; transition: all .35s;} #main .news .layout>.container .lists>ul>li>a .date{ font-size: 1.3rem; color: #ccc;} #main .news .layout>.container .lists>ul>li>a .tit{font-size: 1.6rem; font-weight: bold; color: #333; overflow: hidden; text-overflow:ellipsis;white-space: nowrap; transition: all .35s;} #main .news .layout>.container .lists>ul>li>a:hover .tit{color: #3ba5f4;} #main .news .layout>.container .lists>ul>li>a:hover:after{ width: 100%;} #main .contact{ position: relative; background:url("../img/contact_bg.jpg") no-repeat; background-attachment: fixed; background-size: cover; margin: 0 auto; padding: 50px 0;} #main .contact:after{position: absolute;z-index: 1; left: 0; top:0; width: 100%;height: 100%; background: rgba(0,162,245,.3);content: '';} #main .contact .layout{ position: relative;z-index: 60; margin: 0 auto; width: 60%;} #main .contact .layout>.title{ width: 100%; text-align: left; margin: 0 auto;} #main .contact .layout>.title>h3{display: inline-block;position: relative; font-size: 2.4rem; font-weight: normal; color: #fff; } #main .contact .layout>.container{margin: 0 auto;padding: 30px 0; display: flex;justify-content: flex-start;align-items: center;} #main .contact .layout>.container .img{width: 120px;overflow: hidden; border-radius: 100%;} #main .contact .layout>.container .url{display: inline-block; padding-left: 50px;} #main .contact .layout>.container .url>a{display: inline-block; font-size: 1.6rem; color: #fff; background: #3ba5f4;padding: 12px 30px; transition: all .35s;} #main .contact .layout>.container .url>a:hover{background:#fff; color: #3ba5f4;} @media only screen and (max-width: 1560px) { #main .news .layout>.container .lists>ul>li>a { padding: 20px 0; } } @media only screen and (max-width: 1460px) { #main .products .layout>.container .swiper .swiper-slide a>p { font-size: 1.8rem; line-height: 1.8rem; } #main .news .layout>.container .lists>ul>li>a { padding: 18px 0; } } @media only screen and (max-width: 1380px) { #main .products .layout>.container .swiper .swiper-slide a { height: 300px;} #main .products .layout>.container .prev i, #main .products .layout>.container .next i{font-size: 5rem;} #main .industries .layout>.container .shows .swiper-slide>.info>.tit { font-size: 3rem;} #main .news .layout>.container .lists>ul>li>a { padding: 16px 0; } } @media only screen and (max-width: 1280px) { #main .news .layout>.container .lists>ul>li>a { padding: 13px 0; } } @media only screen and (max-width: 1200px) { #banner .swiper .swiper-slide>.info{bottom: 22%;} #banner .swiper .swiper-slide>.info>.title{font-size: 2.8rem;} #banner .swiper .swiper-slide>.info>.text{ width: 70%; padding: 10px 0 15px 0; font-size: 1.6rem; line-height: 2rem;} #main .news .layout>.container .lists>ul>li>a { padding: 10px 0; } } @media only screen and (max-width: 1080px) { #banner .swiper .control>a{ width: 36px; height: 36px; line-height: 36px;} #banner .swiper .control>a i{font-size: 1.8rem;} #main .about { padding-top: 20px;} #main .about .layout { width: 100%;} #main .about .layout>.title{width: 100%;} #main .about .layout>.title>h3 {font-size: 2.4rem; } #main .about .layout>.intro {width: 100%; padding: 20px 0; font-size: 1.4rem;line-height: 2.2rem;} #main .products { padding: 0;} #main .products .layout>.title { width: 100%;float: none;} #main .products .layout>.title>h3{ font-size: 2.4rem; } #main .products .layout>.container { width: 100%; float: none; padding-top: 20px;} #main .industries {padding: 0;} #main .industries .layout>.title>h3{font-size: 2.4rem;} #main .industries .layout>.container {padding: 20px 0; } #main .service .layout { width: 100%; } #main .service .layout>.title{width: 100%;} #main .service .layout>.title>h3 {font-size: 2.4rem;} #main .service .layout>.container{padding-top: 20px;} #main .service .layout>.container .tab-nav{position: relative;z-index: 10; left: 0; top: 0; width: 100%;} #main .service .layout>.container .tab-nav>ul>li { flex: auto; text-align: center;} #main .service .layout>.container .tab-nav>ul>li>a{padding:20px 10px;} #main .service .layout>.container .tab-box {padding: 60px;margin: 0 auto;} #main .service .layout>.container .tab-box>.tab-item>.box>.tit { font-size: 2rem;} #main .news{padding: 50px 0;} #main .news .layout>.title>h3{font-size: 2.4rem; } #main .news .layout>.container{padding-top: 20px;} #main .news .layout>.container .shows { width: 100%; float: none; } #main .news .layout>.container .lists { width: 100%; float: none; padding-top: 20px;} } @media only screen and (max-width: 860px) { #main .industries .layout>.container .shows .swiper-slide>.info>.tit { font-size: 2.4rem;} #main .industries .layout>.container .shows .swiper-slide>.info>.txt { font-size: 1.4rem;line-height: 2rem; } #main .industries .layout>.container .shows .swiper-slide>.info>.more>a {padding: 8px 20px; font-size: 1.2rem;} #main .service .layout>.container .tab-nav>ul>li>a{font-size: 1.4rem;} #main .service .layout>.container .tab-box>.tab-item>.img{ width: 100%; float: none;} #main .service .layout>.container .tab-box>.tab-item>.box{ width: 100%; float: none; padding: 30px 0; } #main .service .layout>.container .tab-box>.tab-item>.box>.text { font-size: 1.4rem; line-height: 2rem;} #main .service .layout>.container .tab-box>.tab-item>.box>.more>a {font-size: 1.2rem; padding: 8px 20px;} } @media only screen and (max-width: 780px) { #banner {margin: 80px auto 20px auto; height: 360px; } #banner .swiper .swiper-slide>.info { width: 60%;} #banner .swiper .swiper-slide>.info>.title {font-size: 2rem;} #banner .swiper .swiper-slide>.info>.text { width: 100%;font-size: 1.2rem; font-weight: 200; line-height: 1.6rem;} #banner .swiper .swiper-slide img{ object-fit: cover; height: 100%; width: auto;} #main .products .layout>.title>h3{ font-size: 2rem; } #main .products .layout>.container .prev, #main .products .layout>.container .next{left: -40px!important;} #main .products .layout>.container .prev i, #main .products .layout>.container .next i{font-size: 4rem;} #main .products .layout>.container .next{right: -40px!important; left: auto!important; } #main .industries .layout>.title>h3{font-size: 2rem;} #main .industries .layout>.container .thumbs {padding: 20px 30px; } #main .industries .layout>.container .thumbs .swiper .swiper-slide>a img {height: 50px;} #main .industries .layout>.container .thumbs .swiper .swiper-slide>a p {font-size: 1.2rem;} #main .industries .layout>.container .shows .swiper-slide>.info {bottom: 16%; width: 80%;} #main .industries .layout>.container .shows .swiper-slide>.info>.tit {font-size: 2rem;} #main .industries .layout>.container .shows .swiper-slide>.info>.txt { font-size: 1.2rem;line-height: 1.8rem; } #main .about .layout>.title>h3 {font-size: 2rem; } #main .service .layout>.title>h3 {font-size: 2rem;} #main .news .layout>.title>h3{font-size: 2rem; } #main .contact .layout>.title>h3 { font-size: 2rem; } #main .contact .layout>.container .img { width: 100px;} #main .contact .layout>.container .url>a { font-size: 1.4rem;padding: 10px 25px;} } @media only screen and (max-width: 640px) { #banner { height: 300px; } #banner .swiper .swiper-slide>.info { width: 80%;} #banner .swiper .control {bottom: 30px; } #banner .swiper .control>a{ width: 30px; height: 30px; line-height: 30px;} #banner .swiper .control>a i{font-size: 1.4rem;} #main .service .layout>.container .tab-nav>ul { display: block;} #main .service .layout>.container .tab-nav>ul>li {display: block; } #main .service .layout>.container .tab-nav>ul>li>a{padding:10px;} #main .service .layout>.container .tab-box { padding: 30px; } #main .contact .layout>.title{text-align: center;} #main .contact .layout>.container{display: block;} #main .contact .layout>.container .img { margin: 0 auto;} #main .contact .layout>.container .url { width: 100%; padding-top: 20px; text-align: center; padding-left: 0;margin: 0 auto;} } @media only screen and (max-width: 520px) { #main .products .layout>.container .prev, #main .products .layout>.container .next{left: -34px!important;} #main .products .layout>.container .next{right: -34px!important; left: auto!important; } #main .products .layout>.container .swiper .swiper-slide a { height: 270px; } }