@charset "utf-8";

.product {

padding: 0px 0;
}

.product .proTop:after {

  content: "";

  display: block;

  clear: both;

  font-size: 0;

  line-height: 0;

}

.product .proTop .proL {

  width: 290px;

  float: left;

}

.product .proNav {

  margin-top: 22px;

  border-top: 2px solid #e8e8e8;

  padding-top: 18px;

}

.product .proNav a {

  display: block;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  margin-top: 12px;

  height: 40px;

  line-height: 40px;

  font-size: 16px;

  color: #545454;

  background-repeat: no-repeat;

  background-image: -webkit-linear-gradient(left, #26af5f, #26af5f);

  background-image: linear-gradient(to right, #26af5f, #26af5f);

  -webkit-transition: all 0.5s;

  transition: all 0.5s;

  background-size: 0% 100%;

  background-position: 0 center;

  padding-left: 12px;

  padding-right: 20px;

  border-radius: 0 30px 30px 0;

}

.product .proNav a:before {

  content: "";

  display: inline-block;

  vertical-align: middle;

  width: 4px;

  height: 4px;

  background-color: #545454;

  margin-right: 15px;

  font-size: 16px;

  border-radius: 100%;

  position: relative;

  top: -2px;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.product .proNav a:hover {

  background-size: 100% 100%;

  color: #fff;

}

.product .proNav a:hover:before {

  background-color: #fff;

}

.product .proTabs {

  float: right;

  position: relative;

  margin-top: 44px;

}

.product .proTabs .bd {

  width: 860px;

  height: 400px;

  overflow: hidden;

}

.product .proTabs li {

  height: 400px;

  position: relative;

}

.product .proTabs li .pic {

  display: block;

  width: 560px;

  height: 400px;

  position: relative;

  overflow: hidden;

}

.product .proTabs li .pic img {

  display: block;

  position: absolute;

  width: 100%;

  height: 100%;

  object-fit: cover;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

  margin: auto;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.product .proTabs li .cont {

  position: absolute;

  right: 2px;

  top: 106px;

  width: 400px;

  height: 260px;

  background-color: #ffffff;

  box-shadow: 0px 3px 10px 0px rgba(29, 33, 29, 0.11);

  padding: 25px 90px 0 24px;

}

.product .proTabs li .cont .bt {

  display: block;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 20px;

  font-weight: bold;

  line-height: 40px;

  color: #545454;

}

.product .proTabs li .cont .bt:hover {

  -webkit-transform: translateX(5px);

  transform: translateX(5px);

}

.product .proTabs li .cont p {

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 3;

  overflow: hidden;

  line-height: 30px;

  height: 90px;

  margin-top: 10px;

  color: #8b8b8b;

}

.product .proTabs li .cont .more {

  width: 140px;

  height: 38px;

  background-color: #26af5f;

  border-radius: 30px;

  display: block;

  margin-top: 30px;

  text-align: center;

  color: #fff;

  line-height: 38px;

  text-transform: uppercase;

  -webkit-transition: background-color 0.6s, color 0.3s;

  transition: background-color 0.6s, color 0.3s;

  position: relative;

  overflow: hidden;

  -webkit-box-sizing: border-box;

  -ms-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

  z-index: 1;

}

.product .proTabs li .cont .more:before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  border: 2px solid #26af5f;

  border-radius: 30px;

  z-index: -1;

  opacity: 0;

  -webkit-transform: scale3d(0.6, 0.6, 1);

  transform: scale3d(0.6, 0.6, 1);

  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;

  transition: transform 0.3s, opacity 0.3s;

  -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);

  transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);

  box-sizing: border-box;

}

.product .proTabs li .cont .more:hover {

  background: none;

  color: #26af5f;

}

.product .proTabs li .cont .more:hover:before {

  -webkit-transform: scale3d(1, 1, 1);

  transform: scale3d(1, 1, 1);

  opacity: 1;

}

.product .proTabs li:hover .cont .bt {

  color: #26af5f;

}

.product .proTabs .page {

  position: absolute;

  width: 19px;

  top: 143px;

  right: 30px;

  z-index: 3;

}

.product .proTabs .page .proPrev {

  display: block;

  width: 19px;

  height: 10px;

  background: url(../images/prot.png) center center no-repeat;

  cursor: pointer;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.product .proTabs .page .proPrev:hover {

  opacity: 0.6;

  filter: alpha(opacity=60);

}

.product .proTabs .page .proNext {

  display: block;

  width: 19px;

  height: 10px;

  background: url(../images/prob.png) center center no-repeat;

  cursor: pointer;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.product .proTabs .page .proNext:hover {

  opacity: 0.6;

  filter: alpha(opacity=60);

}

.product .proTabs .page i {

  display: block;

  width: 1px;

  height: 94px;

  background-color: #e0e0e0;

  margin: 17px auto;

}

.product .list {

/* margin-top: 30px; */
}

.product .list ul {

  margin-right: -18px;

}

.product .list ul:after {

  content: "";

  display: block;

  clear: both;

  font-size: 0;

  line-height: 0;

}

.product .list li {

float: left;

position: relative;

margin-right: 18px;

transform-style: preserve-3d;

perspective: 1000px;

width: 380px;

height: 333px;

margin-bottom:18px;
}

.product .list li .item {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  transform-style: preserve-3d;

  transition: 1s ease;

}

.product .list li .imgBox {

border: solid 1px #dcdcdc;

width: 380px;

height: 290px;

/* padding: 9px; */

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

-webkit-transition: all 0.5s ease-out;

transition: all 0.5s ease-out;

z-index: 2;
}

.product .list li .imgBox .pic {

  display: block;

  width: 100%;

  height: 100%;

  position: relative;

  overflow: hidden;

}

.product .list li .imgBox .pic img {

display: block;

position: absolute;

/* width: 100%; */

/* height: 100%; */

object-fit: cover;

left: 0;

right: 0;

top: 0;

bottom: 0;

margin: auto;

-webkit-transition: all 0.5s ease-out;

transition: all 0.5s ease-out;
}

.product .list li .imgBox:hover .pic img {

  -webkit-transform: scale(1.1) rotate(0);

  -moz-transform: scale(1.1) rotate(0);

  -o-transform: scale(1.1) rotate(0);

  transform: scale(1.1) rotate(0);

}

.product .list li .imgBox .bt {

display: block;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

max-width: 340px;

text-align: right;

height: 50px;

line-height: 50px;

background-color: #26af5fba;

border-radius: 30px 0px 0px 0px;

position: absolute;

font-size: 16px;

padding: 0 50px 0 15px;

right: 0;

bottom: 0;

-webkit-transition: all 0.5s ease-out;

transition: all 0.5s ease-out; width:250px; color:#FFFFFF
}

.product .list li .imgBox .bt:after {

  content: '';

  position: absolute;

  display: block;

  right: 9px;

  top: 10px;

  width: 30px;

  height: 30px;

  border-radius: 5px;

  background: #26af5f url(../images/promore.png) center center no-repeat;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.product .list li .imgBox:hover {

  border-color: #26af5f;

}

.product .list li .imgBox:hover .bt {

  background-color: #26af5f;

  color: #fff;

}

.product .list li .imgBox:hover .bt:after {

  background: #fff url(../images/promoreh.png) center center no-repeat;

}

.product .list li .contentBx {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  transform-style: preserve-3d;

  transform: rotateY(180deg);

  border: 1px solid #26af5f;

  padding: 9px;

  background: #fff;

  z-index: 1;

}

.product .list li .contentBx .pic {

  display: block;

  width: 100%;

  height: 100%;

  position: relative;

  overflow: hidden;

}

.product .list li .contentBx .pic img {

  display: block;

  position: absolute;

  width: 100%;

  height: 100%;

  object-fit: cover;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

  margin: auto;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.product .list li .contentBx:hover .pic img {

  -webkit-transform: scale(1.1) rotate(0);

  -moz-transform: scale(1.1) rotate(0);

  -o-transform: scale(1.1) rotate(0);

  transform: scale(1.1) rotate(0);

}

.product .list li .contentBx div {

  transform-style: preserve-3d;

  width: 100%;

  padding: 25px 30px;

  background-color: #fff;

  background: #26af5f url(../images/lybg.jpg) center center repeat;

  transform: translateZ(70px);

  position: absolute;

  opacity: 0.9;

  left: 0;

  top: 50px;

  border-radius: 10px;

}

.product .list li .contentBx div .bt {

  display: block;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  color: #26af5f;

  color: #fff;

  font-weight: bold;

  line-height: 40px;

  font-size: 18px;

}

.product .list li .contentBx div .bt:hover {

  -webkit-transform: translateX(5px);

  transform: translateX(5px);

}

.product .list li .contentBx div p {

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 3;

  overflow: hidden;

  line-height: 30px;

  height: 90px;

  color: #fff;

  margin-top: 5px;

}

.product .list li:hover .item {

  transform: rotateY(180deg);

}

.product .list li:hover .imgBox{

  z-index: 1;

}

.product .list li:hover .contentBx{

  z-index: 2;

}



.news {

padding: 30px 0;
}

.news .newsTab:after {

  content: "";

  display: block;

  clear: both;

  font-size: 0;

  line-height: 0;

}

.news .newsTab .title {

  float: left;

}

.news .newsTab ul {

  float: right;

}

.news .newsTab ul li {

  float: left;

  margin-left: 20px;

}

.news .newsTab ul li a {

  display: block;

  text-align: center;

  width: 120px;

  height: 40px;

  background-color: #303030;

  border-radius: 5px;

  line-height: 40px;

  font-size: 16px;

  color: #fff;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.news .newsTab ul li.on a {

  background: #26af5f;

}

.news .newsTabs {

/* margin-top: 40px; */

overflow: hidden;

height: 650px;
}

.news .newsTabs .newsList:after {

  content: "";

  display: block;

  clear: both;

  font-size: 0;

  line-height: 0;

}

.news .newsT:after {

  content: "";

  display: block;

  clear: both;

  font-size: 0;

  line-height: 0;

}

.news .newsT .one {

float: left;

width: 540px;

height: 420px;

background-color: #f7f7f7;

padding: 30px 30px 0;
}

.news .newsT .one .pic {

  display: block;

  width: 100%;

  height: 290px;

  position: relative;

  overflow: hidden;

}

.news .newsT .one .pic img {

  display: block;

  position: absolute;

  width: 100%;

  height: 100%;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

  margin: auto;

  -webkit-transform: scale(1.1) rotate(0);

  -moz-transform: scale(1.1) rotate(0);

  -o-transform: scale(1.1) rotate(0);

  transform: scale(1.1) rotate(0);

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}


.news .newsT .one:hover .pic img {

  -webkit-transform: scale(1) rotate(0);

  -moz-transform: scale(1) rotate(0);

  -o-transform: scale(1) rotate(0);

  transform: scale(1) rotate(0);

}

.news .newsT .one .cont {

  height: 100px;

  padding: 15px 0 0;

}

.news .newsT .one .cont .bt {

display: block;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

font-size: 16px;

line-height: 36px;

color: #000;
}

.news .newsT .one .cont .bt:hover {

  -webkit-transform: translateX(5px);

  transform: translateX(5px);

}

.news .newsT .one .cont p {

display: block;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

color: #6b6969;

margin-top: 4px;

line-height: 24px;
}

.news .newsT .one:hover .bt {

  color: #26af5f;

}

.news .list1 {

  float: right;

  width: 620px;

}

.news .list1 ul:after {

  content: "";

  display: block;

  clear: both;

  font-size: 0;

  line-height: 0;

}

.news .list1 ul li {

  margin-top: 22px;

  border-bottom: 1px solid #e9e9e9;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

  height: 122px;

  position: relative;

  padding-right: 160px;

}

.news .list1 ul li:after {

  content: "";

  position: absolute;

  background: #26af5f;

  width: 100%;

  height: 1px;

  z-index: 1;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

  bottom: -1px;

  left: 0;

  transition: transform 0.7s;

  transform: scaleX(0);

  transform-origin: right;

}

.news .list1 ul li:hover:after,

.news .list1 ul li.on:after {

  transform: scaleX(1);

  transform-origin: left;

}

.news .list1 ul li:first-child {

  margin-top: 0;

}

.news .list1 ul li .date {

  position: absolute;

  width: 100px;

  right: 0;

  top: 5px;

}

.news .list1 ul li .date i {

display: block;

font-size: 22px;

color: #c6c6c6;

line-height: 20px;
}

.news .list1 ul li .date .more {

  border-left: 1px solid #c6c6c6;

  height: 24px;

  margin-top: 38px;

  margin-left: 3px;

  display: block;

  width: 66px;

  overflow: hidden;

  position: relative;

}

.news .list1 ul li .date .more:hover {

  -webkit-transform: translateX(5px);

  transform: translateX(5px);

}

.news .list1 ul li .date .more:before {

  content: "";

  display: block;

  position: absolute;

  right: 0;

  height: 100%;

  top: 0;

  width: 100%;

  background: url(../images/newsli.png) center center no-repeat;

  -webkit-transition: all 0.4s ease-out;

  transition: all 0.4s ease-out;

}

.news .list1 ul li .date .more:after {

  content: "";

  display: block;

  position: absolute;

  right: 31px;

  height: 100%;

  top: 0;

  width: 100%;

  background: url(../images/newslih.png) center center no-repeat;

  -webkit-transition: all 0.4s ease-out;

  transition: all 0.4s ease-out;

  opacity: 0;

  filter: alpha(opacity=0);

}

.news .list1 ul li .bt {

display: block;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

font-size: 16px;

line-height: 30px;

height: 30px;

color: #000;
}

.news .list1 ul li .bt:hover {

  -webkit-transform: translateX(5px);

  transform: translateX(5px);

}

.news .list1 ul li .bt:before {

  content: "";

  display: inline-block;

  vertical-align: middle;

  margin-right: 20px;

  width: 4px;

  height: 4px;

  background-color: #8b8b8b;

  border-radius: 100%;

  position: relative;

  top: -2px;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.news .list1 ul li p {

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 2;

overflow: hidden;

line-height: 24px;

height: 48px;

color: #6b6969;

margin-top: 15px;

padding-left: 25px;
}

.news .list1 ul li:hover .bt {

  color: #26af5f;

}

.news .list1 ul li:hover .more {

  border-color: #26af5f;

}

.news .list1 ul li:hover .more:before {

  right: -31px;

  opacity: 0;

  filter: alpha(opacity=0);

}

.news .list1 ul li:hover .more:after {

  right: 0;

  opacity: 1;

  filter: alpha(opacity=100);

}

.news .list2 {

  margin-top: 30px;

}

.news .list2 ul {

  margin-right: -30px;

}

.news .list2 ul:after {

  content: "";

  display: block;

  clear: both;

  font-size: 0;

  line-height: 0;

}

.news .list2 ul li {

  float: left;

  margin-right: 30px;

  width: 380px;

  height: 200px;

  background-color: #f8f8f8;

  padding: 32px 15px 0 98px;

  position: relative;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.news .list2 ul li .date {

  position: absolute;

  width: 98px;

  text-align: center;

  top: 50px;

  left: 0;

  color: #8b8b8b;

  line-height: 1;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.news .list2 ul li .date i {

  display: block;

  font-size: 48px;

}

.news .list2 ul li .date span {

  display: block;

  font-size: 14px;

  margin-top: 18px;

}

.news .list2 ul li .bt {

  display: block;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  height: 36px;

  font-size: 16px;

  line-height: 36px;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.news .list2 ul li .bt:hover {

  -webkit-transform: translateX(5px);

  transform: translateX(5px);

}

.news .list2 ul li p {

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 3;

  overflow: hidden;

  line-height: 30px;

  height: 90px;

  color: #8b8b8b;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

  margin-top: 10px;

}

.news .list2 ul li:hover {

  background: #26af5f;

}

.news .list2 ul li:hover .date,

.news .list2 ul li:hover .bt,

.news .list2 ul li:hover p {

  color: #fff;

}