html,
body {
position: relative;
height: 100%;
font-family: 微软雅黑;
}
body {
background: #fff;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: inherit;
position: relative;
display: inline-block;
cursor: pointer;
text-align: center;
font-family: 微软雅黑;
}
p {
font-family: 微软雅黑;
}
img {
width: 100%;
height: 100%;
}
a:hover {
color: #d61513;
}
p:hover {
color: #d61513;
}
iframe {
position: relative;
z-index: 999999;
width: 100%;
height: 88px;
margin: 0;
padding: 0;
}
.navBtn {
width: 62px;
height: 62px;
position: absolute;
right: 0;
top: 0;
cursor: pointer;
z-index: 999999999999999;
-webkit-transition: all ease 0.3s;
transition: all ease 0.3s;
}
.menu_btn{
position: fixed;
width: 70px;
height: 70px;
top: 0px;
right: 0%;
z-index: 50;
background: linear-gradient(135deg, #01bbf5, #dde2e4) center center no-repeat;
}
.menu_btn span{
top: 35px;
left: 22px;
width: 25px;
}
.menu_btn span:before{
top: -6px;
width: 18px;
}
.menu_btn span:after{
top: 6px;
width: 18px;
}
.menu_btn span, .menu_btn span:after, .menu_btn span:before{
position: absolute;
height: 2px;
background-color: #fff;
border-radius: 1px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.menu_btn span:after, .menu_btn span:before{
content: "";
left: 0;
-webkit-transform: translateY(0px) rotate(0deg);
}
.menu_btn span, .menu_btn span:after, .menu_btn span:before{
position: absolute;
height: 2px;
background-color: #fff;
border-radius: 1px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.menu_btn.active span{
background-color: transparent;
}
.menu_btn.active span:after, .menu_btn.active span:before{
width: 25px;
}
.menu_btn.active span:before{
-webkit-transform: translateY(6px) rotate(-45deg);
}
.menu_btn.active span:after{
-webkit-transform: translateY(-6px) rotate(45deg);
}
/* 移动端*/
.mobileNav {
position: fixed;
top: 70px;
left: 0px;
height: 100%;
/* background-color: white; */
background: linear-gradient(135deg, #01bbf5, #dde2e4) center center no-repeat;
z-index: 9999999;
width: 100%;
transition: 0.4s linear;
overflow: hidden;
/* opacity: 1; */
/* display: block; */
}
.mobileNav ul {
width: 100%;
margin-top: 10vw;
}
.mobileNav ul li {
width: 100%;
line-height: 10vw;
text-align: center;
}
.mobileNav ul li a {
font-size: 4vw;
color: #ffffff;
}
.hideNav {
height: 0;
/* display: none; */
/* opacity: 0; */
}
.gxHead {
display: none;
width: 100%;
background-color: white;
height: 70px;
line-height: 70px;
overflow: hidden;
position: fixed;
top: 0px;
z-index: 999;
}
.gxHead .logo {
/* margin: 15px; */
height: 0.56rem;
width:1.85rem;
margin: 10px;
}
.gxHead .logo img {
height: fit-content;
width: 80%;
}
/* footer end */
/* nav start */
.nav {
width: 100%;
box-sizing: border-box;
background-color:transparent;
padding: 0px 0.4rem;
display: flex;
justify-content: space-between;
height: 1rem;
align-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 999999999999999;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.nav .logo {
width: 1.85rem;
/* height: 0.56rem; */
}
.nav .logo a {
display: block;
width: 100%;
height: 100%;
}
.nav .nav-list {
height: 100%;
display: flex;
}
.nav .nav-list ul {
display: flex;
height: 100%;
width: 100%;
}
.nav .nav-list ul li {
min-width: 130px;
height: 100%;
flex-shrink: 0;
box-sizing: border-box;
padding: 0px 30px;
position: relative;
color: #ffffff;
}
.nav .nav-list ul li .sub-nav{
position: absolute;
width: 110%;
left: -5%;
top: calc(100% + 3px);
background-color: #FFF;
display: none;
}
.nav .nav-list ul li .sub-nav ul{
display: flex;
flex-direction: column;
}
.nav .nav-list ul li .sub-nav ul li a {
color: #000;
}
.nav .nav-list ul li .sub-nav ul .active{
border: none;
}
.nav .nav-list ul li .sub-nav ul li:hover{
border: none;
}
.nav .nav-list ul li .sub-nav ul li:hover a{
color: #d61513;
}
.nav .nav-list ul li a {
display: block;
width: 100%;
height: 100%;
line-height: 1rem;
font-size: 16px;
}
.nav .nav-list>ul>li:hover .sub-nav{
display: flex;
}
.nav .nav-list ul .active {
/* background-color: #f8f8f8; */
border-bottom: 3px solid #019fe6;
}
.nav .nav-list ul .active a {
/* color: #d61513; */
}
.nav .region {
display: flex;
align-items: center;
width: 1.7rem;
position: relative;
justify-content: center;
}
.nav .region::after{
content: "";
position: absolute;
left: 0;
top: 0.3rem;
width: 1px;
height: 36px;
background-color: #ffffff;
opacity: 0.2;
}
.nav .region img:nth-child(1) {
width: 24px;
height: 24px;
}
.nav .region img:nth-child(3) {
width: 20px;
height: 20px;
}
.nav .region .lan {
display: flex;
align-items: center;
margin: 0px 15px;
font-size: 14px;
}
.nav .region .lan a {
margin: 0px 5px;
color: #FFF;
}
.nav .region .lan a:hover {
font-weight: 600;
}
#nav1 a{
color: #000;
}
/* nav end */
.footer{
/* background-color: #FFF; */
}
.myfooter {
width: 100%;
min-height: 4.92rem;
background-image: url(../images/footer-bg.png);
background-size: 100% 100%;
background-repeat: no-repeat;
box-sizing: border-box;
padding: 1.25rem 0rem 0rem 0rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.myfooter .top {
width: 100%;
}
.myfooter .top .wrapper {
width: 16rem;
display: flex;
justify-content: space-between;
margin: 0 auto;
}
.myfooter .code{
width: 1.56rem;
height: 1.56rem;
}
.myfooter .top .left{
display: flex;
height: 2.2rem;
min-width: 6.1rem;
flex-shrink: 0;
/* border: 1px solid red; */
justify-content: space-around;
border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.myfooter .top .code p{
color: #FFF;
font-size: 14px;
text-align: center;
}
.myfooter .top .left .lf{
width: 300px;
}
.myfooter .top .left .lf h2{
font-family: Objectivity;
font-size: 0.36rem;
margin: 0.22rem 0rem;
color: #ffffff;
}
.myfooter .top .left .lf h4{
font-size: 0.18rem;
font-weight: 600;
margin: 0;
color: #ffffff;
}
.myfooter .top .left .lf .cell {
display: flex;
font-size: 14px;
margin-bottom: 0.15rem;
color: #FFF;
flex-wrap: wrap;
}
.myfooter .top .left .lf .cell .value{
line-height: 0.22rem;
}
.myfooter .top .right {
display: flex;
justify-content: space-between;
min-width: 8.6rem;
}
.myfooter .top .right ul li {
font-size: 16px;
font-weight: normal;
font-stretch: normal;
line-height: 36px;
letter-spacing: 0px;
color: #ffffff;
opacity: 0.7;
}
.myfooter .top .right ul li:hover {
opacity: 1;
}
.myfooter .top .right ul li a:hover {
color: #FFF;
opacity: 1;
}
.myfooter .top .right ul li:nth-child(1) {
font-size: 18px;
font-weight: normal;
font-stretch: normal;
line-height: 36px;
letter-spacing: 0px;
color: #ffffff;
opacity: 1;
position: relative;
font-weight: 600;
margin-bottom: 0.3rem;
}
.myfooter .top .right ul li:nth-child(1)::after{
width: 72px;
height: 1px;
background-color: rgba(255, 255, 255, 0.2);
content: "";
position: absolute;
top: 36px;
left: 0;
}
.myfooter .top .right ul li:nth-child(1)::before{
width: 25px;
height: 3px;
background-color: rgba(255, 255, 255, 1);
content: "";
position: absolute;
top: 35px;
left: 0;
}
.myfooter .bottom {
height: 0.78rem;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.myfooter .bottom .wrapper {
display: flex;
width: 16rem;
margin: 0 auto;
height: 0.78rem;
align-items: center;
justify-content: space-between;
color: #FFF;
}
#swiperContainer {
position: relative;
}
#swiperContainer .swiper-slide{
position: relative;
}
#swiperContainer .swiper-slide .more{
width: 7.8rem;
display: flex;
flex-direction: column;
position: absolute;
left: 1.6rem;
top: 2.8rem;
}
#swiperContainer .swiper-slide .more img{
width: 7.8rem;
height: auto;
}
#swiperContainer .swiper-slide .more .content{
font-size: 18px;
line-height: 36px;
letter-spacing: 0px;
color: #ffffff;
overflow:hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
margin: 0.4rem 0rem 1rem 0rem;
}
#swiperContainer .swiper-slide .more a{
width: 193px;
height: 58px;
border-radius: 0.29rem;
background-image: url(../images/addbg.png);
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
}
#swiperContainer .swiper-pagination{
left: 1.6rem;
width: auto;
bottom: 0.5rem;
}
#swiperContainer .swiper-pagination span{
background-color: transparent;
border: 1px solid #FFF;
opacity: 1;
}
#swiperContainer .swiper-pagination-bullet-active{
background-color: #FFF !important;
}
.upScroll{
position: absolute;
width: 100px;
left: calc(50% - 50px);
bottom: 50px;
font-size: 16px;
color: #FFF;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
cursor: pointer;
animation: upScroll 1s ease-in-out infinite;
}
.upScroll img{
width: 23px;
height: 36px;
}
.index-container{
width: 100%;
box-sizing: border-box;
min-height: 10rem;
background-color: #FFF;
}
@keyframes upScroll {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
.index-container .page1{
width: 100%;
height: 10.6rem;
background-color: #f5f5f5;
overflow: hidden;
}
.index-container .page1 .wrapper{
width: 16rem;
margin: 0.6rem auto;
}
.index-container .page1 .title{
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.index-container .page1 .title .gradient-text{
position: relative;
color: transparent;
font-size: 0.4rem;
font-weight: 600;
width: 160px;
}
.index-container .page1 .title p{
font-size: 16px;
font-weight: normal;
font-stretch: normal;
line-height: 40px;
letter-spacing: 0px;
color: #333333;
margin: 0;
}
.index-container .page1 .title .gradient-text::after{
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(to right, #019fe6, #a0ce0c);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.index-container .page1 .swiper-button-next:after,.index-container .page1 .swiper-button-prev:after {
display: none;
}
.index-container .page1 .swiper-button-next img,.index-container .page1 .swiper-button-prev img{
width: 86px;
height: 86px;
}
#goodsSwiper{
width: 100%;
height: 6.7rem;
margin-top: 0.5rem;
/* border: 1px solid red; */
}
#goodsSwiper .swiper-slide{
background-color: #FFF;
height: 100%;
border-radius: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding:0.7rem;
}
#goodsSwiper .swiper-slide .goods-name{
font-size: 0.28rem;
font-weight: 600;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #01bbf5;
font-weight: 600;
}
#goodsSwiper .swiper-slide-active{
background-color:#01bbf5 ;
color: #FFF;
}
#goodsSwiper .swiper-slide a{
display: flex;
width: 1.70rem;
height: 0.56rem;
background-color: #000000;
border-radius: 0.28rem;
align-items: center;
justify-content: center;
color: #01bbf5;
}
#goodsSwiper .swiper-slide-active .goods-name{
color: #FFF;
}
.index-container .page1 .swiper-button-next{
right: -20px;
}
.index-container .page1 .swiper-button-prev {
left: -20px;
}
.page2{
width: 100%;
height: 6.3rem;
background-color: #ffffff;
}
.page1 .more{
width: 1.8rem;
height: 0.6rem;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #c6c7c8;
margin: 0.6rem auto;
border-radius: 0.3rem;
}
.page1 .more img{
width: 30px;
margin: 0px 0.05rem;
height: auto;
}
.index-container .page2 .title .gradient-text{
position: relative;
color: transparent;
font-size: 0.4rem;
font-weight: 600;
width: 160px;
}
.index-container .page2 .title .gradient-text::after{
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(to right, #019fe6, #a0ce0c);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.index-container .page2 .wrapper{
width: 16rem ;
display: flex;
justify-content: space-between;
margin: 1rem auto;
overflow: hidden;
}
.index-container .page2 .wrapper .left{
width: 7.1rem;
display: flex;
flex-direction: column;
align-items: start;
justify-content: start;
}
.index-container .page2 .wrapper .left .en-name{
font-size: 0.48rem;
font-weight: 600;
margin-top: 0.3rem;
color: #333333;
}
.index-container .page2 .wrapper .left .cn-name{
font-size: 0.18rem;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #666666;
}
.index-container .page2 .wrapper .left .content{
font-size: 16px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #333333;
margin: 0.3rem 0rem;
line-height:0.3rem;;
overflow:hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.index-container .page2 .wrapper .left a{
width: 1.8rem;
height: 0.6rem;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #c6c7c8;
/* margin: 0.6rem auto; */
border-radius: 0.3rem;
margin-top: 0.5rem;
}
.index-container .page2 .wrapper .left a img{
width: 30px;
height: auto;
margin: 0rem 0.1rem;
}
.index-container .page2 .wrapper .right{
width: 7.8rem;
height: 2.36rem;
margin-top: 1rem;
flex-shrink: 0;
}
.index-container .page3{
width: 100%;
height: 5.2rem;
background-image: url(../images/index-bg3.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
overflow: hidden;
}
.index-container .page3 .wrapper{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #FFF;
margin: 1.4rem auto;
}
.index-container .page3 .wrapper a{
width: 1.8rem;
height: 0.6rem;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #c6c7c8;
/* margin: 0.6rem auto; */
border-radius: 0.3rem;
margin-top: 0.5rem;
}
.index-container .page3 .wrapper .title{
font-size: 24px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #ffffff;
}
.index-container .page3 .wrapper .title h1{
font-size: 40px;
color: #ffffff;
}
.index-container .page3 .wrapper a img{
width: 30px;
height: auto;
margin: 0rem 0.1rem;
}
.index-container .page4 {
height: 7.75rem;
}
.index-container .page4 .wrapper{
width: 16rem;
margin: 0.8rem auto;
overflow: hidden;
}
.index-container .page4 .wrapper .header{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.index-container .page4 .wrapper .header .gradient-text{
position: relative;
color: transparent;
font-size: 0.4rem;
font-weight: 600;
width: 160px;
}
.index-container .page4 .wrapper .header .gradient-text::after{
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(to right, #019fe6, #a0ce0c);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.index-container .page4 .wrapper .header a{
width: 1.8rem;
height: 0.6rem;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #c6c7c8;
/* margin: 0.6rem auto; */
border-radius: 0.3rem;
margin-top: 0rem;
}
.index-container .page4 .wrapper .header a img{
width: 30px;
height: auto;
margin: 0rem 0.1rem;
}
.news{
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 0.5rem;
}
.news .left{
width: 7.88rem;
border-radius: 20px;
height: 4.96rem;
overflow: hidden;
flex-shrink: 0;
}
.news .left #newsSwiper{
width: 100%;
height: 100%;
}
.news .left #newsSwiper .swiper-slide{
width: 100% !important;
height: 100%;
position: relative;
}
.news .left #newsSwiper .swiper-slide a{
display: block;
width: 100%;
height: 100%;
}
.news .left #newsSwiper .swiper-slide .title{
width: 100%;
position: absolute;
left: 0;
bottom: 0;
height: 0.96rem;
font-size: 0.2rem;
display: flex;
align-items: center;
color: #FFF;
box-sizing: border-box;
padding-left: 0.3rem;
background-image: linear-gradient(to bottom, rgba(0,0,0,0.2),rgba(0,0,0,0.7));
}
.news .right{
width: 7.7rem;
}
.news .right .show{
display: flex;
justify-content: space-between;
margin-bottom: 0.3rem;
}
.news .right .show .item{
width: 3.68rem;
}
.news .right .show .item .imgs{
width: 3.68rem;
height: 2.36rem;
overflow:hidden;
border-radius: 20px;
}
.news .right .show .item .imgs img{
transition: 0.7s all;
}
.news .right .show .item:hover img{
transform: scale(1.08);
}
.news .right .show .item h4{
margin: 0;
font-size: 18px;
text-align: left;
overflow:hidden;
margin-top: 0.1rem;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.news .right .cell{
width: 100%;
border-top:1px solid #e5e5e5 ;
}
.news .right .cell a{
display: flex;
justify-content: space-between;
height: 0.55rem;
align-items: center;
}
.news .right .cell a .label{
font-size: 16px;
color: #333333;
flex: 1;
overflow:hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
text-align: left;
}
.news .right .cell a .value{
font-size: 16px;
color: #999999;
width: 100px;
}
.news .right .cell:nth-last-child(1){
border-bottom: 1px solid #e5e5e5;
}
.news .right .cell:hover a .label {
color: #d61513;
}
.banner{
width: 100%;
height: 4rem;
margin-top: 1rem;
}
.drop-nav{
width: 100%;
background-color: #ffffff;
height: 0.73rem;
border-bottom: 1px solid rgba(220, 220, 220,0.6);
}
.drop-nav .wrapper{
width: 14rem;
margin: 0 auto;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.drop-nav .wrapper .left{
height: 100%;
}
.drop-nav .wrapper .left ul{
display: flex;
align-items: center;
height: 100%;
}
.drop-nav .wrapper .left ul li{
font-size: 18px;
color: #333333;
height: 100%;
margin-right: 0.3rem;
}
.drop-nav .wrapper .left ul li a{
display: block;
height: 100%;
line-height: 0.73rem;
}
.drop-nav .wrapper .left ul .active{
border-bottom:3px solid #019fe6 ;
}
.drop-nav .wrapper .left ul .active a{
font-weight: 600;
}
.drop-nav .wrapper .right{
display: flex;
align-items: center;
color: #888888;
}
.drop-nav .wrapper .right span{
margin: 0rem 0.08rem;
}
.drop-nav .wrapper .right img{
width: 20px;
height: 20px;
margin:0rem 0.1rem;
}
.drop-nav .wrapper .right ul{
display: flex;
align-items: center;
}
.about-container{
width: 100%;
}
.about-container .page1{
width: 100%;
background-color: #ffffff;
box-sizing: border-box;
padding: 0.6rem 0rem 0.4rem 0rem;
}
.about-container .page1 .wrapper{
width: 14rem;
margin: 0 auto;
}
.about-container .page1 .wrapper .title .gradient-text{
position: relative;
color: transparent;
font-size: 0.4rem;
font-weight: 600;
width: 160px;
margin: 0 auto;
}
.about-container .page1 .wrapper .title .gradient-text::after{
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(to right, #019fe6, #a0ce0c);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.about-container .page1 .wrapper ul{
display: flex;
justify-content: center;
margin: 0.4rem 0rem;
height: 1rem;
}
.about-container .page1 .wrapper ul li{
text-align: center;
display: flex;
height: 1rem;
justify-content: space-between;
min-width: 2rem;
flex-direction: column;
margin: 0 0.4rem;
}
.about-container .page1 .wrapper ul li .num{
font-family: DIN-Black;
font-size: 0.48rem;
font-weight: 600;
color: #019fe6;
}
.about-container .page1 .wrapper ul li .myNum{
display: flex;
justify-content: center;
}
.about-container .page1 .wrapper ul li .myNum sup{
font-size: 0.18rem;
line-height: 30px;
font-weight: 600;
color: #019fe6;
}
.about-container .page1 .wrapper ul li span{
color: #333333;
font-size: 16px;
}
.about-container .page1 .wrapper .content p{
font-size: 16px;
line-height: 30px;
color: #555555;
}
.about-container .page1 .wrapper .about-img{
width: 100%;
height: 5.6rem;
}
.about-container .page2{
width: 100%;
box-sizing: border-box;
padding: 0.6rem 0rem 0.7rem 0rem;
background-color: #f4f7f8;
}
.about-container .page2 .wrapper{
width: 14rem;
margin: 0 auto;
}
.about-container .page2 .wrapper .title{
text-align: center;
font-size: 0.4rem;
line-height: 0.36rem;
font-weight: 600;
letter-spacing: 0px;
color: #333333;
}
.about-container .page2 .wrapper ul{
display: flex;
justify-content: center;
margin-top: 0.6rem;
width: 100%;
border-bottom: 0.04rem solid rgba(0,0,0,0.04);
box-sizing: border-box;
}
.about-container .page2 .wrapper ul li{
width: 3.5rem;
height: 3.5rem;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
cursor: pointer;
box-sizing: border-box;
padding: 0.4rem 0.2rem ;
margin-top:0.04rem;
}
.about-container .page2 .wrapper ul li .imgs{
width: 0.9rem;
height: 0.9rem;
}
.about-container .page2 .wrapper ul .active{
background-color: #ffffff;
border-bottom: 0.04rem solid #019fe6;
}
.about-container .page2 .wrapper ul li p{
font-size: 16px;
margin: 0;
color: #666666;
text-align: center;
}
.about-container .page3 {
width: 100%;
height: 7.3rem;
background-color: #ffffff;
box-sizing: border-box;
padding: 0.7rem 0rem;
}
.about-container .page3 .wrapper{
width: 14rem;
margin: 0 auto;
position: relative;
}
.about-container .page3 .wrapper .title{
font-size: 40px;
font-weight: 600;
text-align: center;
line-height: 36px;
color: #333333;
}
.about-container .page3 .wrapper .swiper-container{
margin-top: 40px;
}
.about-container .page3 .wrapper .swiper-container .swiper-slide{
height: 3.2rem;
}
.about-container .page3 .wrapper .swiper-button-prev:after,.about-container .page3 .wrapper .swiper-button-next:after{
display: none;
}
.about-container .page3 .wrapper .swiper-button-prev img,.about-container .page3 .wrapper .swiper-button-next img{
width: 0.78rem;
height: 0.78rem;
}
.about-container .page3 .wrapper .swiper-button-prev,.about-container .page3 .wrapper .swiper-button-next{
bottom: -1.4rem;
top: unset;
}
.about-container .page3 .wrapper .swiper-button-prev {
left: calc(50% - 0.6rem);
}
.about-container .page3 .wrapper .swiper-button-next {
right: calc(50% - 0.6rem);
}
.goods-container{
width: 100%;
background-color: #f4f7f8;
overflow: hidden;
}
.goods-container .wrapper{
width: 14rem;
margin: 0.36rem auto;
}
.goods-container .wrapper .goodsList{
display: flex;
flex-wrap: wrap;
}
.goods-container .wrapper .goodsList li{
width: 3.32rem;
height: 3.32rem;
margin-right: 0.24rem;
background-color: #ffffff;
box-sizing: border-box;
padding: 0.15rem 0.2rem;
margin-bottom: 0.25rem;
}
.goods-container .wrapper .goodsList li:nth-child(4n){
margin-right: 0px;
}
.goods-container .wrapper .goodsList li a{
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
}
.goods-container .wrapper .goodsList li a .imgs{
width: 100%;
height: 2.36rem;
overflow: hidden;
}
.goods-container .wrapper .goodsList li a .imgs img{
transition: 0.7s all;
}
.goods-container .wrapper .goodsList li:hover img{
transform: scale(1.08);
}
.goods-container .wrapper .goodsList li a .title{
font-size: 18px;
font-weight: 600;
margin: 0.2rem 0rem;
color: #333333;
overflow:hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.goods-container .wrapper .goodsList li a .more{
font-size: 14px;
text-decoration: underline;
color: #333333;
}
.pagination{
width: 100%;
margin: 0.4rem auto;
display: flex;
justify-content: center;
flex-direction: row;
}
.pagination li{
width: 42px;
height: 42px;
background-color: #ffffff;
border: solid 1px #d4d5e3;
text-align: center;
line-height: 42px;
margin: 0rem 0.05rem;
cursor: pointer;
}
.pagination .active{
background-color: #019fe6;
color: #FFF;
}
.goods-detail{
margin-top: -6.4rem;
/* height: 100%; */
}
.goods-detail>.wrapper{
/* height: 10px; */
position: relative;
z-index: 10;
width: 14rem;
margin: 0 auto;
}
.goods-detail>.wrapper .goods-info{
display: flex;
width: 100%;
height: 5.7rem;
background-color: #ffffff;
display: flex;
box-sizing: border-box;
padding: 0.7rem;
justify-content: space-between;
}
.goods-detail>.wrapper .goods-info .left{
width: 5.58rem;
height: 4.18rem;
background-color: #ffffff;
border: solid 1px #dcdcdc;
}
.goods-detail>.wrapper .goods-info .left .swiper-slide img{
width: 100%;
height: 100%;
object-fit: cover;
}
.goods-detail>.wrapper .goods-info .right{
width: 6.65rem;
flex-shrink: 0;
}
.goods-detail>.wrapper .goods-info .left .swiper-container{
width: 100%;
height: 100%;
}
.goods-detail>.wrapper .goods-info .right .title{
font-size: 30px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 3px;
color: #333333;
margin-bottom: 0.4rem;
}
.goods-detail>.wrapper .goods-info .right ul{
display: flex;
flex-direction: column;
}
.goods-detail>.wrapper .goods-info .right ul li{
margin-bottom: 0.2rem;
position: relative;
box-sizing: border-box;
padding-left: 12px;
font-size: 18px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #333333;
}
.goods-detail>.wrapper .goods-info .right ul li::after{
content: "";
position: absolute;
left: 0;
top: 0.07rem;
width: 6px;
height: 6px;
border-radius: 3px;
background-color: #000;
}
.goods-detail>.wrapper .goods-content{
width: 100%;
background-color: #ffffff;
box-sizing: border-box;
padding: 0.5rem 0.8rem;
margin-top: 0.3rem;
margin-bottom: 0.5rem;
}
.goods-detail>.wrapper .goods-content .title{
font-size: 24px;
font-weight: 600;
font-stretch: normal;
letter-spacing: 0px;
color: #333333;
}
.goods-detail>.wrapper .goods-content img{
margin-top: 0.6rem;
}
.goods-container .wrapper .resource li{
height: 4.9rem;
box-sizing: border-box;
padding: 0.3rem;
}
.goods-container .wrapper .resource li a .imgs{
height: 3.7rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.goods-container .wrapper .resource li a .imgs img{
width: 100%;
height: auto;
}
.goods-container .wrapper .resource li a .name{
margin-top: 0.34rem;
font-size: 0.18rem;
color: #333333;
}
/* news */
.news-container .container .news{
width: 100%;
height: 220px;
background-color: white;
margin-bottom: 28px;
}
.news-container .container .news a{
display: flex;
width: 100%;
height: 100%;
position: relative;
box-sizing: border-box;
padding: 25px;
}
.news-container .container .news .left{
width: 2.8rem;
height: 100%;
flex-shrink: 0;
overflow: hidden;
}
.news-container .container .news .left img{
width: 100%;
transition: 0.7s linear;
height: 100%;
}
.news-container .container .news .time{
position: absolute;
width: 74px;
height: 74px;
/* line-height: 74px; */
text-align: center;
background-color: #019fe6;
right: 0px;
top: 0px;
color: white ;
}
.news-container .container .news .time h2{
font-family: 微软雅黑;
font-size: 24px;
font-weight: 600;
color: #ffffff;
line-height: 0px;
}
.news-container .container .news .right{
margin-left: 40px;
flex-grow: 1;
width: auto;
}
.news-container .container .news .right p{
overflow:hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
display: -webkit-box;
cursor: pointer;
-webkit-box-orient: vertical;
font-family: 微软雅黑;
font-size: 16px;
text-align: left;
color: #888888;
width: 90%;
}
.news-container .container .news .right .more{
font-family: MicrosoftYaHei;
font-size: 14px;
line-height: 60px;
letter-spacing: 0px;
color: #666666;
display: flex;
align-items: center;
}
.news-container .container .news .right .more img{
width: 11px;
height: 9px;
margin-left: 5px;
}
.news-container .container .news .right a:hover::before{
display: none;
}
.news-container .container .news .right h1{
display: inline-block;
width: 90%;
font-family: 微软雅黑;
font-size: 22px;
letter-spacing: 0px;
color: #333333;
overflow:hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
display: -webkit-box;
cursor: pointer;
-webkit-box-orient: vertical;
text-align: left;
}
.news-container .container .news:hover{
border-bottom: 2px solid #019fe6;
}
.news-container .container .news:hover .right h1{
color:#019fe6;
}
.news-container .container .news:hover .right a{
color:#019fe6;
}
.news-container .container .news:hover .left img{
transform: scale(1.09);
}
.newsDetail{
width: 100%;
background-color: #ffffff;
padding-bottom: 0.6rem;
}
.newsDetail .wrapper{
width: 14rem;
margin: 0 auto;
overflow: hidden;
}
.newsDetail .wrapper .title{
font-size: 36px;
font-weight: normal;
font-stretch: normal;
line-height: 66px;
letter-spacing: 0px;
color: #222222;
font-weight: 600;
text-align: center;
margin-top: 0.6rem;
}
.newsDetail .wrapper .info{
font-size: 16px;
font-weight: normal;
font-stretch: normal;
line-height: 66px;
letter-spacing: 0px;
color: #888888;
text-align: center;
}
.newsDetail .wrapper .line{
height: 1px;
width: 100%;
background-color: #e5e5e5;
margin: 0.4rem 0rem;
}
.newsDetail .wrapper .content{
font-size: 18px;
font-weight: normal;
font-stretch: normal;
line-height: 32px;
letter-spacing: 0px;
color: #333333;
}
.newsDetail .wrapper .content img{
width: auto;
}
.newsDetail .wrapper .handle {
width: 100%;
justify-content: space-between;
display: flex;
}
.newsDetail .wrapper .handle .right {
width: 218px;
height: 68px;
background-color: #019fe6;
border-radius: 34px;
color: #FFF;
display: flex;
align-items: center;
text-align: center;
justify-content: center;
flex-shrink: 0;
}
.newsDetail .wrapper .handle .right img {
width: 23px;
height: 20px;
margin: 0px 10px;
}
.newsDetail .wrapper .handle .left{
display: flex;
flex-direction: column;
align-items:start;
}
.newsDetail .wrapper .handle .left a {
font-size: 16px;
color: #999;
margin: 0.2rem 0rem;
}
.newsDetail .wrapper .handle .left a:hover {
color: #019fe6;
}
.contact-container{
width: 100%;
height: auto;
box-sizing: border-box;
padding: 0.7rem 0rem;
}
.contact-container .wrapper {
width: 14rem;
margin: 0 auto;
background-color: #f4f7f8;
display: flex;
height: 4.66rem;
}
.contact-container .wrapper .left{
width: 7rem;
height: 4.66rem;
}
.contact-container .wrapper .right{
background-image: url(../images/contactbg.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: auto;
flex-grow: 1;
height: 100%;
box-sizing: border-box;
padding: 0.8rem 0.5rem;
}
.contact-container .wrapper .right .title{
font-size: 0.32rem;
line-height: 0.35rem;
letter-spacing: 0px;
color: #333333;
}
.contact-container .wrapper .right .line{
width: 100%;
height: 1px;
background-color: #d2d2d2;
margin: 0.3rem 0rem;
}
.contact-container .wrapper .right .cell{
display: flex;
margin-bottom: 0.3rem;
font-size: 16px;
color: #333333;
}
.contact-container .wrapper .right .cell .value{
flex: 1;
}
.contact-container .wrapper .right .cell .label{
display: flex;
align-items: center;
margin-right: 0.1rem;
width: 95px;
}
.contact-container .wrapper .right .cell .label img{
width: 16px;
height: auto;
margin-right: 0.05rem;
}
.goods-content table{
width: 100%;
margin-top: 30px;
border: solid 1px #d2d2d2;
background-color: #FFF;
}
.goods-content table thead{
width: 100%;
height: 70px;
background-color: #019fe6;
}
.goods-content table thead th{
font-size: 18px;
color: #ffffff;
border-right: 1px solid rgba(210, 210, 210,0.5);
}
.goods-content table thead th:nth-last-child(1){
border: none;
}
.goods-content table tbody {
width: 100%;
}
.goods-content table tbody tr{
height: 56px;
}
.goods-content table tbody tr td:nth-child(1){
font-weight: 600;
}
.goods-content table tbody tr:nth-child(2n){
background-color: #d8e9fd;
}
.goods-content table tbody tr td{
font-size: 16px;
text-align: center;
border-right: 1px solid rgba(210, 210, 210,0.5);
}
.goods-content table tbody tr td:nth-last-child(1){
border: none;
}
.goods-content table tbody tr td img{
width: 18px;
height: 18px;
margin-top: 0 !important;
margin-right: 5px !important;
}
.goods-content table tbody tr td a{
display: flex;
height: 100%;
align-items: center;
justify-content: center;
text-decoration:underline;
}
.controllerbar .hanlder form {
display: flex;
justify-content: space-between;
position: relative;
/* width: 380px; */
height: 40px;
background-color: #ffffff;
border: solid 1px #019fe6;
/* margin-top: 33px; */
border-radius: 5px;
overflow: hidden;
}
.controllerbar .hanlder input {
width: 400px;
/* height: 40px; */
border: none;
outline: none;
font-size: 16px;
padding-left: 20px;
}
.controllerbar .hanlder input::placeholder {
/* padding-left: 20px; */
}
.controllerbar .hanlder button {
width: 64px;
height: 40px;
background-color: #019fe6;
text-align: center;
line-height: 40px;
outline: none;
border: none;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.controllerbar .search {
width: 100%;
display: flex;
height: 100%;
align-items: center;
}
.controllerbar .search .handle-title {
font-size: 18px;
margin-right: 20px;
color: #333333;
}
.search-list{
width: 1360px;
margin: 70px auto;
height: auto;
}
.search-list .tips{
display: flex;
align-items: center;
margin-left: 12px;
}
.search-list .item{
padding: 10px;
}
.search-list .item .title{
display: flex;
justify-content: space-between;
align-items: center;
font-size: 15px;
font-weight: 700;
}
.search-list .item .desc{
text-align: left;
}
.open {
width: 100%;
background-color: white;
}
.open .contents {
width: 1360px;
margin: 0 auto;
margin-top: 50px;
padding-bottom: 50px;
}
.open .controllerbar {
width: 1360px;
box-sizing: border-box;
padding: 0px 50px;
margin: 0 auto;
margin-top: -40px;
height: 70px;
background-color: #ffffff;
box-shadow: 0px 6px 11px 1px rgba(0, 0, 0, 0.09);
}
.open .controllerbar ul {
padding: 0;
width: 100%;
display: flex;
align-items: center;
}
.open .controllerbar ul li {
width: 98px;
text-align: center;
line-height: 38px;
color: #111;
flex-shrink: 0;
height: 38px;
border: none;
padding: 0;
}
.open .controllerbar ul li a {
width: 100%;
display: block;
height: 100%;
line-height: unset;
text-align: center;
}
.open .controllerbar ul .active {
background-color: #019fe6;
color: white;
border-radius: 5px;
}
.open .contents .container .item {
width: 100%;
display: flex;
flex-direction: column;
cursor: pointer;
}
.open .contents .container .item .top {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
background-color: white;
}
.open .contents .container .item .top .left {
display: flex;
align-items: center;
}
.open .contents .container .item .top .left .shap {
width: 5px;
height: 5px;
background-color: #019fe6;
opacity: 0.8;
margin-right: 5px;
border-radius: 50%;
}
.open .contents .container .item .top .left span {
color: #444;
font-size: 16px;
}
.open .contents .container .item:hover .top .left span {
color: #019fe6;
}
.open .contents .container .item .top .right {
font-size: 14px;
color: #999;
}
.open .contents .container .item .line_ {
width: 100%;
border: 1px dashed #e4e4e4;
}
#goodsSwiper .swiper-slide .goods-desc{
line-height: 30px;
color: #666666;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.about-container .page1 .wrapper .content p img{
width: auto;
height: auto;
}