﻿/* 轮播图 */
.swiper-container {
  padding-top: 100px;
  overflow: hidden;
}
.swiper-pagination span {
  width: 16px;
  height: 16px;
  display: inline-block;
  cursor: pointer;
  margin: 0 5px;
}
.swiper-container .swiper-pagination span.swiper-pagination-bullet-active {
  background-color: #f00;
}
.slogan {
  position: absolute;
  bottom: 10%;
  left: 5%;
  z-index: 101;
  animation-duration: 2s;
}
.swiper-pagination-bullet {
  background-color: #ddd;
  opacity: .8;
}
/* 新闻栏 */
.news {
  padding: 50px 0;
  background: url(../images/index-news_bg.jpg) no-repeat top center;
}
.news .news-pic {
  width: 44%;
  float: left;
  text-align: center;
  animation-duration: 2s;
}
.news .news-pic img {
  box-shadow: 5px 5px 10px #ccc;
}
.news .news-inner {
  width: 56%;
  float: right;
  padding-left: 50px;
  animation-duration: 2s;
}
.news .news-list li{
  margin-top: 20px;
  transition: all 0.3s ease;
}
.news .news-list time {
  width: 170px;
  float: left;
}
.news .news-list time .year {
	font-size: 36px;
	color: #e8390e;
	display: block;
	font-weight: bold;
}
.news .news-list time .mon {
  font-size: 36px;
}
.news .news-list time .mon i {
  font-size: 36px;
  font-style: normal;
}
.news .news-list .news-data {
  margin-left: 170px;
  border-bottom: #999 1px solid;
  margin-bottom: 30px;

  font-size: 18px;
  color: #666;
}
.news .news-data .news-tit {
	font-size: 24px;
	color: #333;
	margin-bottom: 10px;
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;
  -webkit-line-clamp: 1; 
	display: -webkit-box;
  -webkit-box-orient: vertical;
	font-weight: bold;
}
.news .news-data .news-info {
	font-size: 14px;
	color: #666;
	padding: 5px 0;
	line-height: 30px;
}
.news .news-list li:hover {
  transform: translateX(20px);
  color: #e8390e;
}
.news .news-list li:hover .news-data {
  border-bottom-color: #e8390e;
}
.news .news-list li:hover .news-tit{
	color: #e8390e;
	font-size: 24px;
	font-weight: bold;
}
.news .news-list li:hover .news-info{
  color: #333333;
}
.more {
  text-align: center;
  margin-top: 10px;
}
.more a {
  font-size: 16px;
  background: #e8390e;
  color: #fff;
  padding: 10px 50px;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
}
.more a:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #EB882E;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.more a:hover:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition-timing-function: cubic-bezier(0.52,1.64,.37,.66);
  transition-timing-function: cubic-bezier(0.52,1.64,.37,.66);
}

a:active, a:hover {
    outline-width: 0;
}
/* 图片栏 */
.pic li {
  width: calc(100% / 3);
  float: left;
  opacity: 0.5;
}
/* 关于我们 */
.about {
  padding: 80px 0;
  background: url(../images/index-about_bg.jpg) no-repeat top center;
}
.about .about-info {
  margin: 0 3%;
  padding: 0;
  width: 44%;
  float: left;
  animation-duration: 2s;
}
.about .about-info h2 {
  text-align: left;
}
.about .about-info .text {
  font-size: 18px;
  line-height: 39px;
}
.about .about-info .more {
  text-align: left;
}
.about .about-pic {
  width: 50%;
  float: right;
  animation-duration: 2s;
}
/* 商品列表 */
.product {
  padding: 50px 0;
  background-color: #f4f5f9;
  overflow: hidden;
}
.product .pro-list li {
  margin: 0 0.6% 5% .6%;
  width: 32%;
  float: left;
  text-align: center;
  overflow: hidden;
}
.product .pro-list li:nth-child(4),.product .pro-list li:nth-child(5),.product .pro-list li:nth-child(6) {
  margin-bottom: 2%;
}
.product .pro-pic img{
  transition: all .3s ease;
}
.product .pro-pic:hover a img {
  transform: scale(1.1);
}
.product .pro-list li .pro-info {
  max-width: 370px;
  margin: 20px auto 0;
  min-height: 80px;
}
.pro-info h3 {
  padding: 10px 0;
  font-size: 26px;
  margin: 0;
}
.pro-info span {
  display: block;
  font-size: 14px;
  color: #666;
  text-align: left;
  padding: 0 30px;
}
.pro-list li .pro-more {
  margin-top: 10px;
  text-align: center;
}
.pro-list li .pro-more a {
  font-size: 18px;
  color: #202020;
  display: inline-block;
  padding: 10px 30px;
  background-color: transparent;
  box-shadow: inset 0 0 0 1px #828282, 0 0 1px transparent;
  transition: all .3s ease;
}
.pro-list li .pro-more a:hover {
  box-shadow: inset 0 0 0 4px #e8390e, 0 0 1px transparent;
}
/* 优势介绍 */

.proadv{ position:relative; z-index:99;padding: 50px;}
.traitul p {
  margin-block-start:0;
  margin-block-end:0
}
.traitul li{ max-width:301px; width:20%;float:left; height: 401px;position:relative; cursor:pointer; margin-bottom: 20px;animation-duration: 2s;}
.traitul li+li{ margin-left:5%;}
.traicon{ position:absolute; right:0px; left:0px; margin:0 auto; top:156px; width:99px; height:99px; border-radius:50%; border:10px solid #fff; background:#1f74b7;transition:all 0.5s ease;}
.traitul li:nth-child(2) .traicon,.traitul li:nth-child(4) .traicon{ background:#70b92b;}
.traline:after,.traline:before{ display:block; position:absolute; content:''; transition:all 0.5s ease;}
.traline1:after,.traline2:after{ width:1px; height:184px; background:#e0e0e0; top:205px; z-index:2;}
.traline1:before,.traline2:before{ width:1px; height:0px; background:#1f74b7; top:205px; z-index:3;}
.traline1:after,.traline1:before{ left:0px;}
.traline2:after,.traline2:before{ right:0px; top:auto; bottom:12px;}
.traitul li:hover .traline1:before,.traitul li:hover .traline2:before{ height:184px;}
.traline3:after,.traline3:before{ bottom:0px; left:0px; height:1px; right:0px; margin:0 auto; background:#e0e0e0; width:0px;}
.traline3:after{width:100%; z-index:1;}
.traline3:before{ z-index:3; background:#1f74b7;}
.traitul li:hover .traline3:before{width:100%;}
.traitul li:nth-child(1) .traline3:before,.traitul li:nth-child(1) .traline2:before,.traitul li:nth-child(1) .traline1:before{background:#70b92b;}
.traitul li:nth-child(3) .traline3:before,.traitul li:nth-child(3) .traline2:before,.traitul li:nth-child(3) .traline1:before{background:#70b92b;}
.traitul li:hover .traicon{ transform:rotate(360deg); background:#70b92b;}
.traitul li:nth-child(2):hover .traicon,.traitul li:nth-child(4):hover .traicon{ transform:rotate(360deg); background:#1f74b7;}
.trawa{ margin-top:100px; text-align:center; padding:0px 35px;}
.trawa p:nth-child(1){ font-size:24px; color:#343434;font-weight: 700;}
.trawa p:nth-child(2){ width:154px; margin:15px auto; height:1px; border-top:1px dashed #e0e0e0;}
.trawa p:nth-child(3){ font-size:13px; line-height:25px; color:#999;}
.trapic{ position:relative; overflow:hidden;}
.trapic img{ transition:all 0.5s ease; width: 100%;}
.traitul li:hover .trapic img{ transform: scale(1.2);}
@media (max-width:1200px) {
  .traitul {
    padding: 0 5%;
  }
  .traitul li {
    width: 48%;
    max-width: none;
    margin-right: 2%;
  }
  .traitul li:nth-child(2n) {
    margin-right: 0;
  }
  .traitul li+li {
    margin-left: 0;
  }
  .trawa {
    margin-top:20PX ;
  }
}
@media (max-width:800px) {
  /* 首页手机端样式 */
  .traitul li{ width:100%; float: none;margin-left: 0; max-width: none;}
  .traitul li+li {
    margin-left: 0;
  }
  .trawa {
    margin-top:90PX ;
  }
  .proadv {
    padding: 30px;
  }
  .slogan img{
    max-width: 300px;
  }
  .swiper-pagination {
    text-align: right;
    width: 90% !important;
  }
  .swiper-pagination span {
    width: 8px;
    height: 8px;
    display: inline-block;
    cursor: pointer;
    margin: 0 2px;
  }
  /* 新闻栏 */
  .news {
    padding: 30px 0;
  }
  .news .news-pic {
    width: 100%;
    float: none;
  }
  .news .news-inner {
    float: none;
    width: 100%;
    padding-left: 0;
    max-width: 500px;
    margin: auto;
  }

  .news .news-list time {
    float: none;
    width: 100%;
  }
  .news .news-list time .year {
    font-size: 24px;
    display: inline-block;
    margin-bottom: 6px;
  }
  .news .news-list time .mon {
    font-size: 24px;
    display: inline-block;
    margin-bottom: 6px;
  }
  .news .news-list time .mon i {
    font-size: 24px;
    display: inline-block;
    margin-bottom: 6px;
  }
  .news .news-list .news-data {
    clear: both;
    margin-left: 0;
    margin-bottom: 10px;
    padding-bottom: 10px;
    width: 100%;
    border-bottom: #999 1px solid;
    font-size: 18px;
    color: #666;
  }
  .news .news-data .news-tit {
    font-size: 18px;
  }
  /* 图片栏 */
  .pic li {
    width: 100%;
    float: none;
  }
  /* 关于我们 */
  .about {
    padding: 30px 0;
  }
  .about .about-info {
    margin-bottom: 20px;
    float: none;
    width: 100%;
  }
  .about .about-info .text {
    font-size: 18px;
    line-height: 3;
  }
  .about .about-info .more {
    text-align: left;
  }
  .about .about-pic {
    width: 100%;
    float: none;
  }
  /* 商品列表 */
  .product {
    padding: 30px 0;
  }
  .product .pro-list li {
    float: none;
    margin-bottom: 30px;
    width: 100%;
  }
  .product .pro-pic img{
    transition: all .3s ease;
  }
  .product .pro-pic:hover a img {
    transform: scale(1.1);
  }
  .product .pro-list li .pro-info {
    max-width: 370px;
    margin: 20px auto 0;
    min-height: 130px;
  }
  .pro-info h3 {
    padding: 26px 0;
    font-size: 26px;
  }
  .pro-info span {
    display: block;
    font-size: 16px;
    color: #666;
    text-align: left;
    padding: 0 30px;
  }
  .pro-list li .pro-more {
    margin-top: 30px;
    text-align: center;
  }
  .pro-list li .pro-more a {
    font-size: 18px;
    color: #990100;
    display: inline-block;
    padding: 10px 30px;
    background-color: transparent;
    box-shadow: inset 0 0 0 1px #990100, 0 0 1px transparent;
    transition: all .3s ease;
  }
  .pro-list li .pro-more a:hover {
    box-shadow: inset 0 0 0 4px #990100, 0 0 1px transparent;
  }
}
.pro-info span {
min-height: 40px
}

