﻿html,
body {
  position: relative;
  height: 100%;
  font-family: 思源黑体;

} 

body {
  background-color: #ecf4fc;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
  /* border: 1px solid transparent; */
  /* box-sizing: border-box; */
}

body::-webkit-scrollbar {
  background-color: rgba(0, 148, 72,0.4);
  width: 5px;
}

body::-webkit-scrollbar-thumb {
  background-color: rgb(0, 148, 72);

}

ul {
  list-style: none;
  padding: 0;
}

@font-face {
  font-family: DinCond;
  src: url(../font/DINCond-Regular.otf);
}

a {
  text-decoration: none;
  color: inherit;
  position: relative;
  display: inline-block;
  cursor: pointer;
}
 
a:hover {
  color:#009448;
}

img {
  width: 100%;
  height: 100%;
  transition: 0.5s all;
}

.swiper-container {
  width: 100%;
  max-height: 100vh;
  position: relative;
  /* margin-top: 100px; */

}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}











/* 按钮 */


.nav-btn{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
	background-color: #009448;
  position: fixed;
	width: 90px;
	height: 90px;
top: 0px;
right: 0%;
z-index: 50;
/* background: linear-gradient(135deg, #01bbf5, #dde2e4) center center no-repeat; */
}
.nav-btn span{
top: 35px;
left: 30%;
display: block;
width: 40%;
height: 3px;
background-color: #FFFFFF;
margin: 5px 0px;
}
.nav-btn span:before{
 top: -10px;
width: 100%;
}
.nav-btn span:after{
top: 10px;
width: 100%;
}
.nav-btn span, .nav-btn span:after, .nav-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;
}
.nav-btn span:after, .nav-btn span:before{
content: "";
left: 0;
-webkit-transform: translateY(0px) rotate(0deg);
}
.nav-btn span, .nav-btn span:after, .nav-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;
}
.nav-btn.active span{
  background-color: transparent;
}
.nav-btn.active span:after, .nav-btn.active span:before{
  width: 25px;
}
.nav-btn.active span:before{
  -webkit-transform: translateY(6px) rotate(-45deg);
}
.nav-btn.active span:after{
-webkit-transform: translateY(-6px) rotate(45deg);
}


/* 按钮end */



/* 展开菜单 */
.menuFigure{ width:24%; position:fixed; left:-25%; top:0; height:100%; z-index:9999999999999; opacity:0; transition:all 0.5s; -webkit-transition:all 0.5s; overflow:hidden;}
.menuFigure.on{opacity: 1;left:0%}
.menuFigure img{ max-width:inherit !important; width:100%; display:block; transform:scale(1.1); -webkit-transform:scale(1.1); transition:all 2s; -webkit-transition:all 2s; transition-delay:0.5s;}
.menuFigure.on img{transform:scale(1);-webkit-transform:scale(1);}

.menuItem{ background-color:#fff; width:0%; height:100%; position:fixed; right:0; top:0; z-index:99998; opacity:0; transition:all 0.5s; -webkit-transition:all 0.5s; box-shadow:-1px 0 10px 0 rgba(0,0,0,0.2); overflow:hidden; overflow-y:auto;}
.menuItem.on{ opacity: 1;width:76%;}
.menuItem-padd{ width:100%; height:100%; padding:50px 9%;box-sizing: border-box;}
.menuItem-close{ background:#009448 url(../images/menu-close.png) no-repeat center; width:90px; height:90px; text-align:center; line-height:90px; color:#fff; font-size:30px; position:absolute; right:0; top:0;}

.menuItem-title{ font-size:30px; font-weight:bold; line-height:1; color:#009448; position:relative; padding-bottom:12px; opacity:0; transition:all 0.5s; -webkit-transition:all 0.5s; transform:translateY(5%);}
.menuItem-title.on{ opacity:1; transform:translateY(0);}
.menuItem-title .en{ font-size:48px; color:#cbcbcb; text-transform:capitalize; display:inline-block; line-height:1; vertical-align:-7px; padding-left:15px; font-weight:normal;}
.menuItem-title:before{ content:''; background:#009448; width:59px; height:3px; position:absolute; left:0; bottom:0;}

.menuItem-list{ font-size:0; opacity:0; transition:all 0.5s; -webkit-transition:all 0.5s; position:relative; transform:translateY(5%);}
.menuItem-list.on{ transform:translateY(0); opacity:1;}
.menuItem-list dl{ width:25%; display:inline-block; margin-top:6%; vertical-align:top;}
.menuItem-list dl dt{ font-size:24px; line-height:1; text-align:left; padding-bottom:18px; }
.menuItem-list dl dt .num{ font-size:18px; color:#a5a5a5;}
.menuItem-list dl dd a{ display:block; line-height:36px; color:#555; font-size:14px; padding-left:30px; position:relative;}
.menuItem-list dl dd a:before{ content:''; background:#009448; width:0; height:1px; position:absolute; left:20px; top:21px; transition:all 0.4s;}
.menuItem-list dl dd a:hover{ padding-left:40px; color:#009448;}
.menuItem-list dl dd a:hover:before{ width:14px;}
/* 展开菜单END */




header{
  width: 100%;
  height: 100px;
  background-color: #FFFFFF;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999999;
}


.wrapper{
  width: 14rem;
  height: 100%;
  margin: 0 auto;
}
header .wrapper{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header .wrapper .left a{
  display: block;
  width: 2.1rem;
  height: 100%;
}
header .wrapper .right ul{
  display: flex;
  height: 100%;
  align-items: center;
}
header .wrapper .right ul li{
  font-size: 16px;;
	color: #333333;
  margin: 0rem 0.3rem;
  text-align: center;

}
header .wrapper .right ul li a{
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.2rem;
  text-align: justiswiperContainerfy;
}
header .wrapper .right ul li:nth-child(1) a{
  letter-spacing: 0.03rem;
}
header .wrapper .right ul .active a{
  position: relative;
  text-align: center;
  color: #0496ac;
}
header .wrapper .right ul .active a::after{
  content: "";
  width: 56px;
	height: 6px;
	background-color: #0496ac;
	border-radius: 3px;
  position: absolute;
  left:0.2rem;
  bottom: 0;
}
.indexSwiper{
  width: 100%;
  max-height: 600px;
  margin-top: 100px;
}

.swiper-container .swiper-slide{
  position: relative;
  
}
.swiper-container .swiper-slide img{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.swiper-container .swiper-slide .wrapper{
  position: relative;
  z-index: 2;
 height: 34.4vw;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: flex-start;
}
.swiper-wrap  .wrapper{
  position: relative;
}
.swiper-wrap  .wrapper .card{
  width: 4.94rem;
	height: auto;
	background-color: #07aac3;
  box-sizing: border-box;
  padding: 0.56rem 0.4rem;
  position: absolute;
  left: 0;
  top: -3rem;
  z-index: 99999;
}
.swiper-wrap  .wrapper .card .title{
  font-size: 24px;
	font-weight: 600;
	color: #ffffff;
}
.swiper-wrap  .wrapper .card  .time{
  font-size: 16px;
  margin: 0.3rem 0;
	color: #ffffff;
}
.swiper-wrap  .wrapper .card  .desc{
  font-size: 16px;
	line-height: 30px;
	letter-spacing: 0px;
	color: #ffffff;
  overflow:hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
 .swiper-wrap .handle{
  display: flex;
  width: 14rem;
  margin: 0 auto;
  justify-content: flex-end;
 }
 .swiper-wrap .handle div{
  width: 56px;
	height: 56px;
	background-color: #0496ac;
  display: flex;
  align-items: center;
  justify-content: center;
 }
 .swiper-wrap .handle div img{
  width: 7px;
  height: 12px;
 }
footer{
  width: 100%;
	/* height: 2.1rem; */
  box-sizing: border-box;
  padding: 0.25rem 0rem;
	background-color: #333333;
}

footer .wrapper{
  display: flex;
  justify-content: space-between;
}
footer .wrapper .left .logo{
  width: 1.6rem;
  height: 1.1rem;
  margin-bottom: 0.2rem;
}
footer .wrapper .left{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

footer .wrapper .left .phone{
  display: flex;
}
footer .wrapper .left .phone img:nth-child(1){
  margin-right: 5px;
}

footer .wrapper .code img{
  width: 1.2rem;
  height: 1.2rem;
}
footer .wrapper .code p{
  text-align: center;
  font-size: 12px;
	line-height: 40px;
	letter-spacing: 0px;
	color: #ffffff;
}
footer .wrapper .middle{
  padding-left: 0.5rem;
  border-left: 1px solid #ccc;
  box-sizing: border-box;
  margin-left: 0.5rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  
}
footer .wrapper .middle .cell:nth-child(1) {
  margin-bottom: 0.5rem;
}
footer .wrapper .middle .cell p{
  font-size: 16px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 30px;
	letter-spacing: 0px;
	color: #ffffff;
}
footer .wrapper .middle .cell a{
  font-size: 14px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 26px;
	letter-spacing: 0px;
	color: #999999;
}
.gxHead {
  display: none;
  width: 100%;
  background-color: #fff;
  height: 70px;
  line-height: 70px;
  overflow: hidden;
  position: fixed;
  top: 0px;
  z-index: 99999;
}

.gxHead .logo {
  margin:5px 15px;
  width:200px;
  height: 56px;
}


/*  移动端*/
.mobileNav {
  position: fixed;
  top: 70px;
  left: 0px;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999999;
  width: 100%;
  transition: 0.3s linear;
  overflow: hidden;
}

.mobileNav ul {
  width: 50%;
  background-color: #0496ac;
  margin-top: 0vw;
  float: right;
}

.mobileNav ul li {
  width: 100%;
  line-height: 10vw;
  text-align: center;

}

.mobileNav ul li a {
  font-size: 4vw;
  color: white;
}

.hideNav {
  height: 0;
}

.menu_btn {
  position: fixed;
  width: 70px;
  height: 70px;
  top: 0px;
  right: 0%;
  z-index: 50;
  background: linear-gradient(135deg, #0496ac, #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);
}


.serve-wrap{
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 1rem;
}
.serve-wrap .title{
  font-size: 30px;
  text-align: center;
  font-weight: 600;
  margin-top: 1rem;
	line-height: 30px;
	letter-spacing: 0px;
	color: #085b79;
}
.serve-wrap ul{
  display: flex;
  margin-top: 0.5rem;
}
.serve-wrap ul li{
  width: 2.7rem;
	min-height: 3.15rem;
  height:auto;
  margin-right: 0.12rem;
	background-color: #ffffff;
  transition: 0.7s all;
}
.serve-wrap ul .active{
  background-color: #0085ca;
	box-shadow: 0px 5px 8px 0px 
		#adbecf;
}
.serve-wrap ul li:nth-child(5){
  margin-right: 0px;
}
.serve-wrap ul li a{
  display: block;
  width:100%;
  box-sizing:border-box;
  height: 100%;
  padding: 0.31rem;
}
.serve-wrap ul li img{
  width: 0.54rem;
  height: 0.54rem;
}

.serve-wrap ul li .name{
  font-size: 18px;
  font-weight: 600;
  margin: 0.3rem 0rem;
	line-height: 30px;
	letter-spacing: 0px;
	color: #000000;
}

.serve-wrap ul li p{
  font-size: 14px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 24px;
	letter-spacing: 0px;
	color: #336699;
}

.serve-wrap ul li .more{
  width: 109px;
	height: 31px;
  display: flex;
  align-items: center;
  font-size: 14px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 30px;
	letter-spacing: 0px;
	color: #8b790d;
}
.serve-wrap ul li .more img{
  width: 12px;
	height: 8px;
  margin-left: 5px;
}
.serve-wrap ul li .more img:nth-child(2){
  display: none;
}

.serve-wrap ul li .imgs img:nth-child(2){
  display: none;
}
.serve-wrap ul .active .name{
  color: #FFFFFF;
}
.serve-wrap ul .active p{
  color: #FFFFFF;
}
.serve-wrap ul .active .more{
  color: #FFFFFF;
  width: 109px;
	height: 31px;
	background-color: #e4a600;
	border-radius: 5px;
  text-align: center;
  justify-content: center;
}
.serve-wrap ul .active .more img:nth-child(1){
  display: none;
}
.serve-wrap ul .active .more img:nth-child(2){
  display: block;
}
.serve-wrap ul .active .imgs img:nth-child(1){
  display: none;
}
.serve-wrap ul .active .imgs img:nth-child(2){
  display: block;
}
.info-wrap{
  width: 100%;
  min-height: 9rem;
  position: relative;
  background-color: #FFFFFF;
  box-sizing: border-box;
  padding-top: 0.8rem;
}
.info-wrap::after{
 // content: "";
  height: 5.06rem;
  width: 12rem;
  background-color: #0085ca;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
}
.info-wrap .title{
  font-size: 30px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 30px;
	letter-spacing: 0px;
	color: #0162a0;
  text-align: center;
}
.info-wrap  h1{
  margin: 0.26rem 0rem;
  text-align: center;
  font-size: 30px;
	color: #0162a0;
}

.info-wrap .wrapper{
  background-image: url(../images/indexbg1.png);
  background-repeat: no-repeat;
  height: 6.1rem;
  display: flex;
  justify-content: space-between;
  background-position: 0% -7%;
}

.info-wrap .wrapper .right{
  width: 5.22rem;
	height: 100%;
  flex-shrink: 0;
	background-color: #87c4f7;
  position: relative;z-index: 2;
}
.info-wrap .wrapper .right::after{
  width: 3.58rem;
	height: 5rem;
	background-color: #0496ac;
	opacity: 0.15;
  content: "";
  position: absolute;
  top: -0.4rem;
  right: -2.55rem;
  z-index: 1;
}
.info-wrap .wrapper .left {
  box-sizing: border-box;
  padding-top:1.7rem;
  position: relative;
  z-index: 4;
}
.info-wrap .wrapper .left .content{
  font-size: 0.16rem;
	font-weight: normal;
	font-stretch: normal;
	line-height: 36px;
	letter-spacing: 0px;
	color: #ffffff;
}
.info-wrap .wrapper .left .sub-title{
  font-size: 0.24rem;
	font-weight: 600;
  margin:20px 0px;
	font-stretch: normal;
	line-height: 36px;
	letter-spacing: 0px;
	color: #ffffff; 
  
}
.info-wrap .wrapper .left ul li img{
  width: 16px ;
  height: 16px;
  margin-right: 0.22rem;
}
.info-wrap .wrapper .left ul li {
  display: flex;
  margin: 15px 0px;
  align-items: center;
  color: #FFFFFF;
  font-size: 0.16rem;
}

.news-wrap .title{
  font-size: 30px;
	font-weight: 600;
  text-align: center;
	font-stretch: normal;
	line-height: 30px;
	letter-spacing: 0px;
	color: #0162a0;
}

.news-wrap .desc{
  font-size: 16px;
	color: #668498;
  text-align: center;
  margin: 20px 0px;
}
.news-wrap {
  box-sizing: border-box;
  background-color: #FFFFFF;
  padding: 0.8rem 0rem 0.5rem 0rem;
}
.news-wrap  ul{
  display: flex;
}

.news-wrap  ul li{
  width: 4.3rem;
	height: 4.14rem;
  margin-right: 0.55rem;
	background-color: #ffffff;
	border: solid 2px #f4f4f4;
  transition: 0.6s all;
  box-sizing: border-box;
}
.news-wrap  ul li:nth-child(3){
  margin-right: 0px;
}
.news-wrap  ul li a{
  display: block;
  width: 100%;
  height: 100%;
}
.news-wrap  ul li .imgs{
  width: 100%;
	height: 2.05rem;
	background-color: #1a130d;
  overflow: hidden;
}

.news-wrap  ul li .info{
  box-sizing: border-box;
  padding: 0.24rem ;
}
.news-wrap  ul li .info .name{
  font-family: MicrosoftYaHei-Bold;
	font-size: 0.18rem;
	font-weight: 600;
	color: #000000;
}
.news-wrap  ul li .info .time{
  font-size: 14px;
	line-height: 0.4rem;
	letter-spacing: 0px;
	color: #bababa;
}
.news-wrap  ul li .info .line{
  width: 100%;
	height: 1px;
	background-color: #e9e5e3;
  margin: 0.15rem 0rem;
}
.news-wrap  ul li .info  .content{
  font-size: 14px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 0.3rem;
	letter-spacing: 0px;
	color: #666666;
  overflow:hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.news-wrap  ul li:hover .imgs img{
  transform: scale(1.08);
}
.news-wrap  ul li:hover .name{
  color: #0085ca;
}
.news-wrap  ul li:hover{ 
  border: 2px solid #0085ca;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
}
.about-container{
  width: 100%;
  min-height: 12rem;
  background-image: url(../images/about-banner-bg.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  overflow: hidden;
}

.about-container .wrapper{
  width: 14rem;
  margin: 0 auto;
  background-color: #FFFFFF;
  display: flex;
  margin-top: 2.4rem;
  box-sizing: border-box;
  padding: 0.48rem;
  justify-content: space-between;
}
.about-container .wrapper .left {
  flex-shrink: 0;
  width: 6.6rem;
}
.about-container .wrapper .left .logo{
  width: 2.5rem;
  height: 1.6rem;
}
.about-container .wrapper .left .logo img{
  width: auto;
}
.about-container .wrapper .left .introduce{
  font-size: 16px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 36px;
	letter-spacing: 0px;
	color: #000000;
  text-indent: 32px;
}
.about-container .wrapper .left .title{
  font-size: 30px;
	font-weight: 600;
	font-stretch: normal;
	line-height: 30px;
	letter-spacing: 0px;
	color: #000000;
  margin: 0.2rem 0rem;
}
.about-container .wrapper .left .serve{
  font-size: 24px;
	font-weight: 600;
	font-stretch: normal;
	line-height: 36px;
	letter-spacing: 0px;
	color: #000000;
  margin-top: 1rem;
}
.about-container .wrapper .left ul {
  margin-top: 0.4rem;
}
.about-container .wrapper .left ul li  a{
  display: flex;
  align-items: center;
  font-size: 16px;
}
.about-container .wrapper .left ul li img{
  width: 16px;
  height: 15px;
  margin-right: 22px;
}
.about-container .wrapper .left ul li{
  line-height: 0.4rem;
  font-size:16px;
}
.about-container .wrapper .right{
  width: 6rem;
  height: 3.5rem;
  flex-shrink: 0;
  margin-top: 2rem;
}


.contact-banner{
  width: 100%;
  height: 3rem;
  margin-top: 100px;
  
}
.contact-container{
  width: 100%;
  background-color: #FFFFFF;
  box-sizing: border-box;
  padding: 0.44rem 0rem;
}

.contact-form{
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
}

.contact-form .left .En-title{
  font-size: 0.48rem;
  font-weight: 600;
}

.contact-form .left  .Cn-title{
  font-size: 0.48rem;
  font-weight: 600;
}
.contact-form .left  p{
  font-size: 18px;
	letter-spacing: 0px;
	color: #999999;
}

.contact-form .right ul{
  display: flex;
  align-items: center;
}
.contact-form .right ul li{
  width: 2.6rem;

}

.contact-form .right ul li .icon{
  width: 0.26rem;
  height: 0.3rem;
}
.contact-form .right ul li:nth-child(2) .icon{
  width: 0.28rem;
	height: 0.3rem;
}

.contact-form .right ul li:nth-child(3) .icon{
  width: 0.3rem;
	height: 0.3rem;
}

.contact-form .right ul li .title{
  font-size: 18px;
	font-weight: 600;
  margin: 0.2rem 0rem;
	font-stretch: normal;
	line-height: 40px;
	letter-spacing: 0px;
	color: #000000;
}

.contact-form .right ul li  .address{
  font-size: 14px;
	color: #666666;
}
.contact-form .right ul li:nth-child(2) .address{
  font-size: 18px;
  font-weight: 600;
  color: #000000;
}

.tabs{
  width: 14rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  height: 0.9rem;
	background-color: #ffffff;
	box-shadow: 0px 0.05rem 0.08rem 0px 
		rgba(184, 184, 184, 0.3);
  margin-top: -0.45rem;
  position: relative;
  z-index: 999;
  box-sizing: border-box;
  padding: 0rem 0.9rem;
}

.tabs .tab{
  min-width: 1.3rem;
  font-size: 0.15rem;
  margin-right:0.5rem ;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
}
.tabs .active{
  font-size: 0.15rem;
	font-weight: 600;
	font-stretch: normal;
	line-height: 30px;
	letter-spacing: 0px;
	color: #009bbc;
  position: relative;
}
.tabs .active::after{
  content: "";
  position: absolute;
  width: 100%;
	height: 5px;
	background-color: #38b1c0;
	border-radius: 3px;
  left: 0;
  bottom: -0.1rem;
}

.news-container ul{
  display: flex;
  margin: 0 auto;
  width: 100%;
  flex-wrap: wrap;
  margin-top: 0.78rem;
}

.news-container ul li {
  width: 4.3rem;
	height: 4.14rem;
  margin-right: 0.55rem;
	background-color: #ffffff;
	border: solid 2px #f4f4f4;
  transition: 0.6s all;
  margin-bottom: 0.3rem;
  box-sizing: border-box;
}

.news-container ul li:nth-child(3n){
  margin-right: 0px;
}
.news-container ul li a{
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
}

.news-container ul li  a .imgs{
  width:100%;
  height: 2rem;
  background-color: #1a130d;
  overflow: hidden;
}



.news-container ul li  a .info{
  width: 100%;
  box-sizing: border-box;
  padding: 0rem 0.24rem;
}
.news-container ul li  a .time{
  font-size: 14px;
	color: #bababa;
  
}
.news-container ul li  a .line{
  width: 100%;
  height: 1px ;
  background-color:#e9e5e3 ;
  margin: 10px 0rem;
}

.news-container ul li  a  .content{
  font-size: 14px;
	line-height: 30px;
	letter-spacing: 0px;
	color: #666666;
  overflow:hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.news-container  ul li:hover .imgs img{
  transform: scale(1.08);
}

.news-container .wrapper ul li:hover a .title{
  color: #0085ca;
}
.news-container  ul li:hover{ 
  border: 2px solid #0085ca;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
}
.crumb-nav{
  display: flex;
  align-items: center;
  width: 14rem;
  margin: 0 auto;
  justify-content: flex-end;
  align-items: center;
  height: 0.7rem;
}

.crumb-nav .icon{
  margin-right: 10px;
}

.crumb-nav .active{
  color: #009999;

}


.news-container .line{
  width: 100%;
  height: 1px ;
  background-color: #ccc;
  margin: 0.3rem 0rem;
}

.news-container .wrapper{
  width: 14rem;
  margin: 0 auto;
  padding-bottom: 0.5rem;
    padding-top: 40px;
}

.news-container .wrapper .title{
  font-size: 30px;
  font-weight: 600;
  text-align: center;
	line-height: 30px;
	letter-spacing: 0px;
	color: #000000;
}
.news-container .wrapper  .time{
  font-size: 14px;
	line-height: 30px;
	letter-spacing: 0px;
	color: #666666;
  text-align: center;
  margin: 0.3rem 0rem 0.2rem 0rem;
  
}

.news-container .wrapper  .content{
  font-size: 16px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 30px;
	letter-spacing: 0px;
	color: #666666;
}

.news-container .wrapper  .content img{
  max-width: 100%;
  width: auto;
  height: auto;
}

.news-container .wrapper .handle {
  display: flex;
  align-items: center;
  justify-content: space-between;
 
}

.news-container .wrapper .handle  a{
  font-size: 16px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 30px;
	letter-spacing: 0px;
	color: #000000;
}
.news-container .wrapper .handle  span {
  color: #666600;
}

.news-container .wrapper .list .time{
  margin: 0;
  text-align: left;
}

.news-container .wrapper ul li  a .title{
  font-size: 18px;
  font-weight: 600;
	line-height: 40px;
	letter-spacing: 0px;
	color: #000000;
  overflow:hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  display: -webkit-box;
  text-align: left;
  -webkit-box-orient: vertical;
}

.news-container .wrapper .products-list{
  display: flex;
}


.news-container .wrapper .products-list li{
  width: 4.2rem;
	min-height: 2rem;
  height: 100%;
	background-color: #ffffff;
  flex-shrink: 0;
	border: solid 1px rgba(204, 204, 204, 0.85);
  margin:0rem 0.2rem;
  margin-bottom: 0.6rem;
}
.news-container .wrapper .products-list li a{
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 15px ;
}

.news-container .wrapper .products-list li .cell {
  font-size: 14px;
	line-height: 30px;
	letter-spacing: 0px;
	color: #666666;
}

.news-container .wrapper .products-list li  .goods-name{
  font-size: 30px;
	font-weight: 600;
	font-stretch: normal;
	line-height: 30px;
	letter-spacing: 0px;
	color: #000000;
}
.news-container .wrapper .products-list li  .line{
  margin: 0.2rem 0rem;
}
.news-container .wrapper .products-list li .more{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #44ac8b;
}

.news-container .wrapper .products-list li .more img{
  width: 19px;
  height: 6px;
  margin-left: 5px;
}

.news-container .wrapper .products-list li:hover{
  border: 5px solid rgba(55,160,122,0.85);
}
.pagination{
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapper .pagination li{
  width: 42px;
	height: 42px;
	background-color: #FFF;
	border: solid 1px #d4d5e3;
  text-align: center;
  line-height: 42px;
  margin: 0px 5px;
}

.wrapper .pagination .active{
  background-color: #38b1c0;
  color: #FFF;
}
.mask{
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  display: none;
}

.mask .card{
  width: 12rem;
  height: 6rem;
  background-image: url(../images/product-bg.jpg);
  background-repeat: no-repeat;
  box-sizing: border-box;
  padding: 0.8rem;
}
.exit{
 width: 44px;
 height: 44px; 
 margin-top: 20px;
 cursor: pointer;
}
.mask .card .goods-title{
  font-family: MicrosoftYaHei-Bold;
  font-size: 28px;
  font-weight: 600;
  font-stretch: normal;
  line-height: 30px;
  letter-spacing: 0px;
  color: #16989a;
  margin-top: 0.2rem;
}
.mask .card .title{
  font-size: 24px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 30px;
  letter-spacing: 0px;
  color: #000000;
  text-align: left;
  margin-top: 0.5rem;
}

.mask .card .goods-line{
  width: 100%;
  height: 1px;
  background-color: #e8e8e8;
  position: relative;
  margin: 0.3rem 0rem;
}
.mask .card .goods-line::after{
  content: "";
  width: 103px;
	height: 3px;
	background-color: #029f92;
  position: absolute;
  left: 0;
}

.mask .card  .cell-wrap{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.mask .card  .cell-wrap .cell{
  width: 4.7rem;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  align-items: center;
  height: 0.75rem;
  font-size: 16px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 72px;
	letter-spacing: 0px;
	color: #666666;
}
.form {
box-sizing:border-box;
padding:0.3rem 0rem;
background:#07aac3;
display:flex;
    flex-direction: column;

}

.form .left{
margin:0 auto;
width:14rem;
color:#FFFFFF;
}
.form form {

width:14rem;
margin:0 auto;
}
form .li {
    width: 100%;
    margin-bottom: .2rem;
    position: relative
}
form .li .t {
        font-size: 14px;
 color: #fff;
    font-weight: bold;
    font-size: .16rem;
    position: absolute;
    left: .18rem;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%)
    }
    form .li .input,
    form .li textarea,
    form .li textarea::-webkit-input-placeholder {
        font-size: 14px;
    }
form .li .input {
        height: 36px;
    display: block;
    width: 100%;
    height: .5rem;
    border: .02rem solid rgba(255, 255, 255, 0.2);
    padding-left: .65rem;
    background-color: transparent;
    color: #fff;
    font-size: .16rem;
    font-weight: bold;
    box-sizing: border-box;
    }
form .li .input:foucs{
    outline:1px solid #FFF;
}
form .li textarea {
        height: 90px;
    }

form .li textarea {
    display: block;
    width: 100%;
    height: 1.2rem;
    border: .02rem solid rgba(255, 255, 255, 0.2);
    background-color: transparent;
    color: #fff;
    font-size: .16rem;
    font-weight: bold;
    padding: .15rem;
box-sizing: border-box;
}

form .li textarea:focus {
    border-color: #fff
}

form .li textarea::-webkit-input-placeholder {
    color: #fff;
    font-size: .16rem;
    font-weight: bold
}

form .btn {
    width: 100%;
    height: .54rem;
    border: none;
    background-color: #e4a600;
    color: #fff;
    font-size: .16rem;
    margin-top: .1rem
}
