.main{
  width: 1200px;
  margin: 0 auto;
}

.ellipsis1{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ellipsis2{
  display:-webkit-box;
  overflow:hidden;

  white-space:normal!important;
  text-overflow:ellipsis;
  word-wrap:break-word;

  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.ellipsis3{
  display:-webkit-box;
  overflow:hidden;
  
  white-space:normal!important;
  text-overflow:ellipsis;
  word-wrap:break-word;
  
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
}
.ellipsis4{
  display:-webkit-box;
  overflow:hidden;

  white-space:normal!important;
  text-overflow:ellipsis;
  word-wrap:break-word;

  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
}
.ellipsis5{
  display:-webkit-box;
  overflow:hidden;

  white-space:normal!important;
  text-overflow:ellipsis;
  word-wrap:break-word;

  -webkit-line-clamp:5;
  -webkit-box-orient:vertical;
}

.left{
  float: left;
}
.right{
  float: right;
}

/* 侧滑 */
 /*Hiding the checkbox*/

 #tm {
  display: none;
}
.mobile{
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}
.mobile section {
  background: #f0f2f5;
  width: 100%;
  min-height: calc(100vh - 0.91rem);
  height: 100%;
  position: relative;
  transition: all 0.25s;
}


/*Nav styles*/

.sidenav {

  background: rgb(7 21 21);
  width: 150px;

  position: fixed;
  right: 0;
  top: 44px;
  bottom: 0;
  padding-top: 60px;

}

.sidenav li {
  text-align: center;
  list-style-type: none;
  margin-top: 20px;
  height: 70px;
}

.sidenav a {
  color: white;
  font-size: 0.32rem;
  text-decoration: none;
  padding-top: 70px;
}

.sidenav li a{
  background: url('../images/home.png') no-repeat center center;
  background-size: 36px;
}
.sidenav li.on a{
  background: url('../images/home-on.png') no-repeat center center;
  background-size: 36px;
  color: #1787c1;
}
.sidenav li:nth-child(2) a{
  background: url('../images/about.png') no-repeat center center;
  background-size: 36px;
}
.sidenav li.on:nth-child(2) a{
  background: url('../images/about-on.png') no-repeat center center;
  background-size: 36px;
  color: #1787c1;
}
.sidenav li:nth-child(3) a{
  background: url('../images/product.png') no-repeat center center;
  background-size: 36px;
}
.sidenav li.on:nth-child(3) a{
  background: url('../images/product-on.png') no-repeat center center;
  background-size: 36px;
  color: #1787c1;
}
.sidenav li:nth-child(4) a{
  background: url('../images/contact.png') no-repeat center center;
  background-size: 36px;
}
.sidenav li.on:nth-child(4) a{
  background: url('../images/contact-on.png') no-repeat center center;
  background-size: 36px;
  color: #1787c1;
}
.sidenav li:nth-child(5) a{
  background: url('../images/message.png') no-repeat center center;
  background-size: 36px;
}
.sidenav li.on:nth-child(5) a{
  background: url('../images/message-on.png') no-repeat center center;
  background-size: 36px;
  color: #1787c1;
}
.sidenav li:nth-child(6) a{
  background: url('../images/map.png') no-repeat center center;
  background-size: 36px;
}
.sidenav li.on:nth-child(6) a{
  background: url('../images/map-on.png') no-repeat center center;
  background-size: 36px;
  color: #1787c1;
}
/*Animation controls using checkbox hack*/

/*Animate content area to the right*/

#tm:checked~section {
  transform: translateX(-150px);
}

/*Animate links from right to left + fade in effect*/

#tm:checked~.sidenav b {
  opacity: 1;
  transform: translateX(0);
}



/*Adding delay to link animation - in multiples of .08s*/

/*One can use jQuery also for creating the delayed effect. But I will stick to manual CSS for this walkthrough.*/

#tm:checked~.sidenav li:nth-child(1) b {
  transition-delay: 0.08s;
}

#tm:checked~.sidenav li:nth-child(2) b {
  transition-delay: 0.16s;
}

#tm:checked~.sidenav li:nth-child(3) b {
  transition-delay: 0.24s;
}

#tm:checked~.sidenav li:nth-child(4) b {
  transition-delay: 0.32s;
}

#tm:checked~.sidenav li:nth-child(5) b {
  transition-delay: 0.40s;
}

#tm:checked~.sidenav li:nth-child(6) b {
  transition-delay: 0.48s;
}
/*  */
.ind-header-wrap{
  position: fixed;
  top: 0;
  left: 0;
  width: 7.5rem;
  height: 0.9rem;
  z-index: 2;
  background-color: #3285ff;
}
.ind-header-title{
  font-size: 0.36rem;
  color:#fff;
  text-align: center;
  line-height: 0.9rem;
}
.nav-btn{
  position: fixed;
  top: 0.26rem;
  right: 0.2rem;
  width: 0.34rem;
  height: 0.34rem;
  z-index: 2;
  background:url('../images/nav.png')no-repeat center center;
  background-size: cover;
}
.ind-banner{
  margin-top: 0.9rem;
  width: 100%;
  height: 3rem;
}
.swiper-container,.swiper-wrapper {
  width: 100%;
  height: 100%;
}
.swiper-wrapper img{
  width: 100%;
  height: 100%;
}
.nav-wrap{
  width: 100%;
  height: 2.1rem;
  background: #0f67ff;
}
.nav-wrap li{
  width: 23%;
  margin:0.31rem 1%;
  float: left;
  text-align: center;
}
.nav-wrap li a{
  float: left;
  width: 100%;
  text-align: center;
  margin: 0 auto;
}
.nav-top{
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  margin: 0 auto;
  background-color: #26a9fd;
}
.nav-top img{
  width: 0.6rem;
  margin: 0.2rem;
}
.nav-name{
  padding-top: 0.1rem;
  text-align: center;
  color:#fff;
  font-size: 0.30rem;
}
.nav-wrap li:nth-child(2) .nav-top{
  background-color: #32ce9a
}
.nav-wrap li:nth-child(3) .nav-top{
  background-color: #ffa352
}
.nav-wrap li:nth-child(4) .nav-top{
  background-color: #fd6190
}
/*  */
.about-us{
  margin-top: 0.2rem;
}
.item-title-wrap{
  background-color: #fff;
  display: flex;
  align-items: center;
  padding:0.25rem 0.1rem;
}
.item-icon{
  width: 0.4rem;
  height: 0.4rem;
  flex-shrink: 0;
}
.item-title{
  flex-grow: 1;
  padding-left: 0.1rem;
  font-size: 0.28rem;
  color:#333;
}
.item-more{
  flex-shrink: 0;
}
.item-more{
  width: 0.4rem;
  height: 0.4rem;
  background: url('../images/more.png')no-repeat center center;
  background-size: cover;
}
.about-us-cont{
  background-color: #fff;
}
.about-us-cont img{
  width: 100%;
}
.about-us-cont p{
  padding:0.1rem;
  font-size: 0.28rem;
  line-height: 0.42rem;
  color: #666;
}
.about-us-cont p>span{
  display: inline-block;
}
.about-more{
  color: #0f67ff;
  font-size: 0.28rem;
}
/*  */
.ind-product-wrap{
  margin-top: 0.2rem;
  background-color: #fff;;
}
.swiper2-li{
  margin: 0.1rem;
  width: 2.8rem;
  border:0.01rem solid #eee;
  border-radius: 0.08rem;
  overflow: hidden;
}
.swiper2-li img{
  width: 100%;
  height: 2.3rem;
}
.swiper2-li >p{
  height: 0.4rem;
  text-align: center;
  color: #333;
  font-size: 0.28rem;
}
.ind-product-wrap .swiper-slide{
  width: 3rem!important;
}
/* 新闻动态 */
.ind-news-wrap{
  margin-top: 0.2rem;
  background-color: #fff;;
}
.index-news-one{
  margin: 0 2%;
  position: relative;
  width: 96%;
  height: 2.8rem;
  overflow: hidden;
}
.index-news-one img{
  width: 100%;
  height: 100%;
}
.news-one-tile{
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 96%;
  padding:0.2rem 2%;
  height: 0.8rem;
  background-color: rgba(50, 60, 60,0.8);
  
}
.news-one-tile span{
  display: block;
  color: #fff;
  font-size: 0.3rem;
  line-height: 0.48rem;
}
.index-news-ul{
  padding:0 2%;
}
.index-news-ul a{
  display: flex;
  align-items: center;
  padding:0.2rem 0;
}
.index-news-ul i{
  flex-shrink: 0;
  width: 0.1rem;
  height: 0.1rem;
  border-radius: 50%;
  background-color: #999;
}
.index-news-ul span{
  font-size: 0.28rem;
  padding-left: 0.1rem;
  flex-grow: 1;
  padding-right: 0.3rem;
  background: url('../images/more02.png')no-repeat center right;
  background-size: 0.25rem;
}
.footer{
  height: 1rem;
  padding:0.3rem;
  background-color: #0f67ff;
}
.footer p{
  text-align: center;
  color:#fff;
  font-size: 0.28rem;
  line-height: 0.42rem;
}
.head-top{
  margin-top: 0.9rem;
}
.min-h{
  min-height: 100vh;
}
.pages{
  padding: 0.2rem 0;
  text-align: center;
}
.pages span,.pages a{
  cursor: pointer;
  display: inline-block;
  height: 0.46rem;
  line-height: 0.46rem;
  color: #666;
  border:0.01rem solid #eee;
  border-radius: 0.05rem;
  margin:0 0.01rem;
  font-size: 0.28rem;
}
.pages a{
  width: 0.46rem;
  text-align: center;
  
}
.pages span{
  padding:0 0.2rem;
}
.pages a.on{
  color:#fff;
  background-color: #1e50ae;
  border-color: #1e50ae;
}
.list-news-wrap{
  padding:0 0.2rem;
  background-color: #fff;
  min-height: calc(100vh - 2.5rem);
}
.details-info{
  padding:0.2rem;
  background-color: #fff;
}
/* 详情 */
.details-title{
  font-size: 0.32rem;
  color: #333;
}
.details-other{
  padding-top: 0.2rem;
  margin: 0;
}
.details-other span{
  float: left;
  margin-right: 0.5rem;
  font-size: 0.28rem;
  color: #999;
}
.details-desc{
  padding-top: 0.2rem;
}
.details-desc p{
  margin-top: 0.1rem;
  font-size: 0.28rem;
  color: #999;
  line-height: 0.46rem;
}
/*  */
.list-product-ul{}
.list-product-ul li{
  float: left;
}
.list-product-ul .swiper2-li{
    margin: 0.1rem 0.15rem;
    width: 3.2rem;
    border: 0.01rem solid #eee;
    border-radius: 0.08rem;
    overflow: hidden;
    height: 3.3rem;
}
.list-product-ul .swiper2-li img{
  height: 2.5rem;
}
/* tab */
/* The tabs */
.pro-tab{
  background-color: #fff;
  margin-top: 0.2rem;
}
.pro-tab-ul{
  list-style: none;
  text-align: left;

  margin: 0;
  padding: 0;
  border-bottom: 0.01rem solid #eee;
}

.pro-tab-ul li{
  display: inline-block;
  width: 20%;
  margin: 0 14%;
  text-align: center;
}

.pro-tab-ul li a{
  display: block;
  text-decoration: none;
  color:  #7f888d;
  font-size: 0.28rem;
  padding-bottom: 0.1rem;
}

.pro-tab-ul li a.tab-active {
  color: #656a6d;
  border-bottom: 2px solid #629ebd;
}

/* The content */

.pro-tab .tabs-content-placeholder{
  overflow: hidden;
  font-weight: normal;
}

.pro-tab .tabs-content-placeholder div.tabs-cont{
  display: none;
}

.pro-tab .tabs-content-placeholder div.tab-content-active{
  padding: 0.2rem;
  display: block;
}
/*  */
.contact-pic{
  padding:0 0% 0.1rem;
}
.contact-pic img{
  width: 100%;
}
.cont-us-lft-paty{
  padding-bottom: 0.2rem;
}
.cont-us-lft-paty>h4{
  padding-bottom: 0.08rem;
  font-size: 0.30rem;
  color: #1e50ae;
}
.cont-us-lft-paty>p{
  color: #1e50ae;
  font-size: 0.28rem;
  line-height: 0.46rem;
}
.cont-us-lft-paty2>p{
  color: #666;
}
.mess-item{
  display: flex;
  margin-bottom: 0.3rem;
}
.mess-item-lab{
  flex-shrink: 0;
  width: 1rem;
  font-size: 0.3rem;
  line-height: 0.58rem;
}
.mess-item-val{
  flex-grow: 1;
}
.message-info{
  margin-top: 0.2rem;
}
.mess-item-val input{
  height: 0.58rem;
  line-height: 0.58rem;
  border: 0.01rem solid #eee;
  padding:0 2%;
  display: block;
  width: 94%;
}
.mess-item-val textarea{
  height: 1.74rem;
  line-height: 0.58rem;
  border: 0.01rem solid #eee;
  padding:0 2%;
  display: block;
  width: 94%;
  margin-bottom: 0.05rem;
  margin-top: 0.05rem;
}
.mess-btm{
  width: 100%;
  height: 0.8rem;
  background-color: #0f67ff;
  color: #fff;
  font-size: 0.32rem;
  text-align: center;
  line-height: 0.8rem;
  border:0;
  border-radius: 3px;
}
.map-inf-cont{
  width:100%;
  height:8rem;
  padding-top:0.3rem;
}
.list-map-wrap{
  min-height: calc(100vh - 2.5rem);
}
.BMap_bubble_title{
  font-size: 0.3rem!important;
}
.BMap_bubble_content{
  font-size: 0.3rem!important;
}
.list-map-wrap .details-desc{
  padding:0.2rem;
  background-color: #fff;
}

/*翻页---start---*/
.pagination-centered {
  text-align: center;
  margin: 20px 0;
}

.pagination ul {
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  display: inline-block;
}

.pagination ul > li {
  line-height: 20px;
  display: inline;
}

.pagination ul > li > a {
  background-color: #ffffff;
  border-color: #dddddd;
  border-image: none;
  border-style: solid;
  border-width: 1px 1px 1px 0;
  float: left;
  line-height: 20px;
  padding: 4px 12px;
  text-decoration: none;
  color: #545454;
}

.pagination ul > li > span {
  background-color: #ffffff;
  border-color: #dddddd;
  border-image: none;
  border-style: solid;
  border-width: 1px 1px 1px 0;
  float: left;
  line-height: 20px;
  padding: 4px 12px;
  text-decoration: none;
  color: #ff3709;
}

.pagination ul > li:first-child > a {
  border-bottom-left-radius: 4px;
  border-left-width: 1px;
  border-top-left-radius: 4px;
}

.pagination ul > li:first-child > span {
  border-bottom-left-radius: 4px;
  border-left-width: 1px;
  border-top-left-radius: 4px;
}

.pagination ul > li.disabled:first-child > span {
  color: #c3c3c3;
}

.pagination ul > li:last-child > a {
  border-bottom-right-radius: 4px;
  border-right-width: 1px;
  border-top-right-radius: 4px;
}

.pagination ul > li:last-child > span {
  border-bottom-right-radius: 4px;
  border-right-width: 1px;
  border-top-right-radius: 4px;
}

.pagination ul > li > a:hover {
  color: #ff3709;
  background: #f5f5f5;
}
/*翻页---end---*/

.layui-layer-dialog .layui-layer-content{
  color:#fff;
}
.details-desc img{
  max-width: 100%;
}