@charset "utf-8";
html {
  overflow-x: hidden;
}
body {
  color: #333;
  font: 14px 'Arial', 'SourceHanSansCN-Regular' !important;
}
body,
dd,
div,
dl,
dt,
h1,
h2,
h3,
h4,
h5,
h6,
img,
input,
li,
ol,
p,
span,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  color: #333;
  text-decoration: none;
}
a:focus {
  outline: 0;
}
img {
  border: none;
}
.vam {
  vertical-align: middle;
}
.clear {
  clear: both;
  height: 0;
  line-height: 0;
  font-size: 0;
}
p {
  word-spacing: 0;
}
em,
i {
  font-style: normal;
}
.tr {
  text-align: right;
}
.tl {
  text-align: left;
}
.center {
  text-align: center;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.pa {
  position: absolute;
}
.pr {
  position: relative;
}
.clearfix:after {
  content: '';
  height: 0;
  clear: both;
  display: block;
  visibility: hidden;
}
.clearfix {
  zoom: 1;
}

.content22 {
  width: 1400px;
  margin: 0 auto;
  position: relative;
}
@media screen and (max-width: 1440px) {
  .content22 {
    width: 1200px;
    margin: 0 auto;
  }
}

.pic {
  width: 100%;
  overflow: hidden;
}
.pic img {
  -o-transition: all 1s linear 0s;
  transition: all 1s linear 0s;
}
.pic:hover img {
  -webkit-transform: scale(1.05) rotate(0) translateY(0);
  -ms-transform: scale(1.05) rotate(0) translateY(0);
  transform: scale(1.05) rotate(0) translateY(0);
}

.white,
.whites {
  position: relative;
  overflow: hidden;
}
.white:after,
.whites:after {
  content: '';
  cursor: pointer;
  position: absolute;
  left: -100%;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: -moz-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0)
  );
  background-image: -webkit-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0)
  );
  transform: skewx(-25deg);
}
.white:hover:after {
  left: 100%;
  -moz-transition: 1s;
  -o-transition: 1s;
  -webkit-transition: 1s;
  transition: 1s;
}
.whites:hover:after {
  left: 100%;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
body {
  min-width: 1200px;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  overflow-x: hidden;
}
em,
i {
  font-style: normal;
}

input::-webkit-input-placeholder {
  color: #999;
  font-size: 14px;
  text-transform: capitalize;
}
input::-moz-placeholder {
  color: #999;
  font-size: 14px;
  text-transform: capitalize;
}
input:-moz-placeholder {
  color: #999;
  font-size: 14px;
  text-transform: capitalize;
}
input:-ms-input-placeholder {
  color: #999;
  font-size: 14px;
  text-transform: capitalize;
}
@keyframes myfirst {
  0% {
    background-position: 0 bottom;
  }
  100% {
    background-position: 100% bottom;
  }
}
.line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clear {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: ' ';
  clear: both;
  height: 0;
}

.banner {
  height: auto;
  max-width: 1920px;
  margin: 0 auto !important;
  position: relative;
  margin-top: -34px;
}
.banner .bd li {
  float: left;
  width: 100%;
  line-height: 0;
}
.banner .bd li img {
  width: 100%;
}
.banner .bd li a {
  display: block;
}
.banner .hd {
  position: absolute;
  bottom: 120px;
  width: 100%;
  height: 16px;
  cursor: pointer;
  text-align: center;
  z-index: 9;
  font-size: 0;
}
.banner .hd li {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: #fff;
  margin: 0 10px;
  opacity: 1;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  border-radius: 8px;
}
.banner .hd li.on {
  background: #d60b0e;
}
.banner p {
  position: absolute;
  font-size: 0;
  top: 50%;
  z-index: 9;
  width: 36px;
  height: 70px;
  margin-top: -35px;
  border: 0;
  outline: none;
  cursor: pointer;
  transition: 0.5s;
}
.banner .prev {
  left: 3%;
  background: url(../images/prev1.png) no-repeat center center;
  opacity: 0;
}
.banner .next {
  right: 3%;
  background: url(../images/next1.png) no-repeat center center;
  opacity: 0;
}
.banner:hover .prev {
  left: 5%;
  opacity: 1;
}
.banner:hover .next {
  right: 5%;
  opacity: 1;
}

.tit {
  font-size: 0;
  line-height: 0;
  text-align: center;
}
.tit span {
  display: block;
  font-size: 48px;
  line-height: 48px;
  color: #333333;
  font-weight: bold;
  text-transform: uppercase;
  position: relative;
  text-align: center;
}
.tit span:after {
  position: absolute;
  width: 156px;
  height: 33px;
  content: '';
  background: url(../images/tit.png) no-repeat center;
  left: 50%;
  top: 59px;
  z-index: 20;
  margin-left: -78px;
}
.tit i {
  display: block;
  font-size: 20px;
  color: #333333;
  line-height: 20px;
  margin-top: 60px;
  position: relative;
  font-weight: normal;
}

.sp {
  height: 857px;
  background: url(../images/yz_bg.jpg) no-repeat center;
}
.yz_sz li {
  float: left;
  height: 140px;
  box-sizing: border-box;
  box-shadow: 0px 22px 18px 0px rgba(0, 0, 0, 0.08);
  padding-top: 26px;
  box-sizing: border-box;
  text-align: center;
  width: 340px;
  margin-left: 13px;
  border-radius: 10px;
  margin-top: -70px;
  position: relative;
  background: #fff;
}
.yz_sz li:after {
  position: absolute;
  width: 44px;
  height: 44px;
  content: '';
  background: url(../images/yz_dd.png) no-repeat center;
  right: -26px;
  top: 49px;
  z-index: 60;
}
.yz_sz li:first-child {
  margin-left: 0;
}
.yz_sz li:last-child:after {
  background: 0;
}
.yz_sz li em {
  display: block;
  font-size: 56px;
  line-height: 42px;
}
.yz_sz li b {
  display: inline-block;
  font-size: 56px;
  font-family: 'DIN';
  font-weight: 700;
  color: #333333;
  line-height: 1;
}
.yz_sz li sup {
  display: inline-block;
  font-size: 20px;
  color: #333333;
  line-height: 100%;
  vertical-align: 2px;
  margin-left: 6px;
  font-weight: bold;
  vertical-align: 25px;
}
.yz_sz li span {
  display: block;
  font-size: 18px;
  color: #333333;
  line-height: 100%;
  margin-top: 6px;
}
.sp_con {
  padding: 80px 0 0;
}
.sp_con dt {
  float: left;
  width: 669px;
  height: 616px;
}
.sp_con dt img {
  display: block;
  width: 669px;
  height: 616px;
}
.sp_con dd {
  float: right;
  width: 657px;
}
.sp_con dd h4 img {
  display: block;
  width: 549px;
  height: 157px;
  padding-top: 40px;
}
.sp_con dd p {
  display: block;
  font-size: 16px;
  line-height: 30px;
  color: #666666;
  margin-top: 40px;
  height: 228px;
}
.sp_con .yz_s {
  display: block;
}
.sp_con .yz_s a {
  width: 288px;
  height: 80px;
  line-height: 80px;
  border-radius: 50px;
  background: #d11125;
  display: block;
  font-size: 24px;
  color: #fff;
  float: left;
  position: relative;
  margin-right: 20px;
}
.sp_con .yz_s a > img {
  display: inline-block;
  width: 60px;
  height: 60px;
  padding-left: 11px;
  padding-right: 20px;
  vertical-align: -21px;
}
.sp_con .yz_s a:last-child {
  background: #de9427;
  margin-right: 0;
}
.sp_con .yz_s a .ewm {
  display: none;
  width: 120px;
  height: 120px;
  position: absolute;
  left: 60px;
  top: 100px;
}
.sp_con .yz_s a .ewm img {
  display: block;
  width: 120px;
  height: 120px;
}
.sp_con .yz_s .more2:hover .ewm {
  display: block;
}

@media screen and (max-width: 1440px) {
  .yz_sz li {
    width: 290px;
  }
  .sp dt {
    float: left;
    width: 573px;
    height: 528px;
  }
  .sp dt img {
    display: block;
    width: 573px;
    height: 528px;
  }
  .sp dt video,
  .sp dt iframe {
    display: block;
    width: 573px;
    height: 528px;
  }
  .sp dd {
    float: right;
    width: 554px;
  }
  .sp_con {
    padding: 100px 0 0;
  }
  .sp_con .yz_s a {
    width: 260px;
  }
  .sp_con .yz_s a > img {
    padding-right: 10px;
  }
  .sp_con dd p {
    height: 200px;
  }
}

.pro {
  padding: 110px 0 0;
  box-sizing: border-box;
}
.pro_t {
  margin: 50px 0px 0;
  position: relative;
  height: 4.6rem;
}
.pro_t li > a {
  background: #fff;
  float: left;
  width: 22.8%;
  position: relative;
  height: 4.6rem;
  font-size: 1.1rem;
  text-align: center;
  line-height: 4.6rem;
  border-top: 1px solid #e5e5e5;
  box-sizing: border-box;
  color: #333;
  display: block;
  margin-right: 2.93%;
}
.pro_t li:last-child > a {
  margin-right: 0;
}
.pro_t li em {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: 0.6rem;
  vertical-align: -0.1rem;
  background: url(../images/pro_ic.png) no-repeat center;
  background-size: 100% 100%;
}
.pro_t li span {
  display: inline-block;
}
.pro_t li.cur > a {
  color: #d60b0e;
  border-color: #d60b0e;
}
.pro_t li.cur span {
  color: #d60b0e;
}
.pro_t li.cur em {
  background: url(../images/pro_ich.png) no-repeat center;
  background-size: 100% 100%;
}
.pro_con dt {
  display: block;
  width: 43.64%;
  height: 37.55rem;
  float: right;
  position: relative;
}
.pro_con dt img {
  display: block;
  width: 100%;
  height: 37.55rem;
}
.pro_con dt i > img {
  position: absolute;
  left: -6rem;
  top: 4.7rem;
  display: block;
  width: 16.15rem;
  height: 30.8rem;
}
.pro_con dd {
  float: left;
  width: 56.36%;
  padding-top: 1.4rem;
  height: 37.55rem;
  padding-left: 13rem;
  box-sizing: border-box;
  background: url(../images/pro_dd.jpg) no-repeat center;
  padding-top: 4.8rem;
  background-size: 100% 100%;
}
.pro_con dd h4 a {
  font-size: 1.8rem;
  color: #333333;
  font-weight: bold;
  line-height: 1.8rem;
  display: block;
  position: relative;
}
.pro_con dd h4 a:after {
  width: 1.8rem;
  height: 0.1rem;
  position: absolute;
  left: 0px;
  background: #d60b0e;
  top: 2.7rem;
  content: '';
}
.pro_con dd h3 a {
  font-size: 0.9rem;
  color: #333333;
  font-weight: normal;
  line-height: 0.9rem;
  display: block;
  position: relative;
  padding-left: 0.6rem;
  border-left: 3px solid #666666;
  box-sizing: border-box;
  border-radius: 3px;
  float: left;
  margin-bottom: 0.9rem;
}
.pro_con dd h3 a:after {
  width: 22.8rem;
  height: 1px;
  position: absolute;
  left: 4.7rem;
  background: #dfe2e2;
  top: 0.5rem;
  content: '';
}
.pro_con dd p {
  font-size: 0.8rem;
  color: #666666;
  line-height: 1.5rem;
  display: block;
  margin-top: 1.5rem;
  height: 6rem;
  width: 30.4rem;
  overflow: hidden;
}
.pro_con dd .more {
  display: block;
  width: 8.4rem;
  height: 2.4rem;
  line-height: 2.4rem;
  border-radius: 1.3rem;
  background: #d60b0e;
  text-align: center;
  font-size: 0.9rem;
  color: #fff;
  float: left;
  transition: all 0.5s ease;
}
.pro_con dd .more img {
  display: inline-block;
  width: 1.2rem;
  height: 0.75rem;
  margin-left: 0.5rem;
  vertical-align: -0.1rem;
}
.pro_con dd .zx {
  display: block;
  width: 8.4rem;
  height: 2.4rem;
  line-height: 2.4rem;
  border-radius: 1.2rem;
  background: #de9427;
  text-align: center;
  font-size: 0.9rem;
  color: #fff;
  float: left;
  margin-left: 0.6rem;
  transition: all 0.5s ease;
  margin-top: 40px;
}
.pro_con dd .more:hover,
.pro_con dd .zx:hover {
  transform: translateY(-5px);
}

.pro_con dd .pro_s {
  position: relative;
  margin-top: 2.7rem;
}
.pro_con dd .pro_s li {
  float: left;
  width: 9.5rem;
  height: 12.7rem;
  margin-right: 0.9rem;
}
.pro_con dd .pro_s li img {
  display: block;
  width: 9.5rem;
  height: 12.7rem;
}
.pro_con dd .pro_s li span {
  display: block;
  font-size: 0.8rem;
  color: #333333;
  line-height: 3.5rem;
  text-align: center;
}
.sprev {
  width: 0.5rem;
  height: 0.8rem;
  float: left;
  margin-left: 24.2rem;
  margin-right: 0.9rem;
}
.snext {
  width: 0.5rem;
  height: 0.8rem;
  float: left;
}
.sprev img,
.snext img {
  display: block;
  width: 0.5rem;
  height: 0.8rem;
}

@media screen and (max-width: 1440px) {
  /*.pro_con dt{margin-right: -18rem; }*/

  /*.pro_con dt i>img{position: absolute;left:-4.5rem;top:4.7rem;display: block;width: 16.15rem;height: 30.8rem;}*/
  /*.pro_con dd{margin-left: -18rem;padding-left: 18rem;box-sizing: border-box;padding-top: 4.7rem;}*/
}

.ys {
  padding-top: 108px;
  box-shadow: 0px 22px 18px 0px rgba(0, 0, 0, 0.08);
}
.ys_con {
  margin-top: 48px;
  position: relative;
}
.ys_con dt {
  display: block;
  width: 100%;
  height: 66vh;
  overflow: hidden;
}

.ys_con dt video {
  display: block;
  width: 100%;
  position: relative;
}

.ys_con dd {
  padding-left: 14.7rem;
  height: 22vh;
  width: 70rem;
  margin: 0 auto;
  box-sizing: border-box;
}
.ys_con dd h4 {
  font-size: 1.2rem;
  color: #333333;
  font-weight: bold;
  line-height: 1.2rem;
  display: block;
  position: relative;
  margin-top: 1.8rem;
}
.ys_con dd h4:after {
  width: 1.8rem;
  height: 2px;
  position: absolute;
  left: 0px;
  background: #d60b0e;
  top: 2.1rem;
  content: '';
}
.ys_con dd p {
  font-size: 0.8rem;
  color: #666666;
  line-height: 1.4rem;
  display: block;
  margin-top: 2rem;
}
.ys_con dd .ysz {
  float: left;
  width: 40rem;
  padding-right: 2rem;
  box-sizing: border-box;
  position: relative;
}
.ys_con dd i {
  float: right;
  width: 15rem;
  margin-top: 2rem;
  height: 7.25rem;
  border-left: 1px solid #cccccc;
  box-sizing: border-box;
  font-size: 0.8rem;
  color: #333333;
  line-height: 16px;
  text-align: center;
}
.ys_con dd i b {
  display: block;
  font-size: 1.2rem;
  color: #333333;
  line-height: 1.3rem;
  font-family: Arial;
  margin-top: 0.9rem;
}
.ys_con dd i img {
  display: block;
  width: 2.2rem;
  height: 2.2rem;
  margin: 0.9rem auto 0;
}

.ys_t {
  width: 11rem;
  height: 88vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 60;
  float: left;
  margin-left: 13rem;
}
.ys_t li {
  width: 11rem;
  height: 22vh;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  box-sizing: border-box;
  padding-top: 1.8rem;
  padding-bottom: 2rem;
  padding-left: 1.5rem;
  position: relative;
  background-color: #d60b0e;
}
.ys_t li.cur {
  background-color: #de9427;
}
.ys_t li > img {
  display: block;
  width: 2.4rem;
  height: 2.4rem;
}
.ys_t li span {
  display: block;
  font-size: 1.4rem;
  color: #fff;
  line-height: 1.4rem;
  position: relative;
  padding-top: 1rem;
  font-weight: bold;
}
.ys_t li i {
  display: block;
  font-size: 0.6rem;
  color: #fff;
  line-height: 0.6rem;
  margin-top: 0.4rem;
  position: relative;
  text-transform: uppercase;
  opacity: 0.5;
}
.ys_t li em > img {
  display: block;
  width: 3.75rem;
  height: 2.7rem;
  position: absolute;
  right: 0;
  bottom: 0;
}

@media screen and (max-width: 1440px) {
  /*.ys_con dt{margin-right: -18rem; }*/
  /*.ys_con dd{padding-left: 12.7rem;}*/
  /*.ys_con dd .ysz{float: left;width: 36rem;padding-right: 1.5rem;box-sizing: border-box;position: relative;}*/
  /*.ys_con dd i{float: right;width: 10.5rem;}*/
}

.case {
  /* height: 1374px; */
  background: url(../images/case_bg.jpg) no-repeat center;
  padding-top: 108px;
  box-sizing: border-box;
  overflow: hidden;
}
.case_con {
  margin-top: 172px;
}
.case_con dl {
  float: left;
  width: 32%;
  height: 356px;
  margin-right: 2%;
  margin-bottom: 170px;
  background: #fff;
  border-radius: 9px;
  box-shadow: 0px 22px 18px 0px rgba(0, 0, 0, 0.08);
  position: relative;
}
.case_con dl:nth-child(3n) {
  margin-right: 0;
}
.case_con dt {
  display: block;
  width: 91%;
  margin: -126px auto 0;
}
.case_con dt iframe {
  display: block;
  width: 100%;
}
.case_con dt img {
  display: block;
  width: 100%;
}
.case_con dd {
  padding: 0 9%;
  width: 100%;
  box-sizing: border-box;
}
.case_con dd h4 a {
  display: block;
  font-size: 24px;
  color: #333333;
  line-height: 24px;
  position: relative;
  padding-top: 25px;
  font-weight: bold;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.case_con dd > p {
  font-size: 16px;
  color: #666666;
  line-height: 16px;
  padding-top: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.case_con dd .more {
  display: block;
  width: 140px;
  height: 38px;
  line-height: 38px;
  border-radius: 25px;
  border: 1px solid #d60b0e;
  text-align: center;
  font-size: 16px;
  color: #d60b0e;
  margin-top: 25px;
  transition: all 0.5s ease;
}
.case_con dd .more img {
  display: inline-block;
  width: 25px;
  height: 16px;
  margin-left: 6px;
  vertical-align: -2px;
  transition: all 0.5s ease;
}
.case_con dd .more:hover {
  transform: translateY(-5px);
}
.case_con dd .more:hover img {
  transform: translateX(4px);
}

.case_con .xx {
  height: 0;
  overflow: hidden;
  position: absolute;
  left: 0;
  bottom: 0;
  transition: all 0.5s;
  padding: 0 38px;
  transition: all 0.5s;
  z-index: 50;
  background: #f2f2f2;
  width: 448px;
  box-sizing: border-box;
}

.case_con dd:hover .xx {
  height: 482px;
}
.case_con .xx h3 a {
  display: block;
  font-size: 22px;
  color: #333333;
  line-height: 28px;
  font-weight: normal;
  padding: 45px 0 0;
}
.case_con .xx h3 a:hover {
  color: #d20e26;
}
.case_con .xx > p {
  display: block;
  font-size: 16px;
  color: #666666;
  line-height: 28px;
  font-weight: normal;
  padding: 20px 0 0;
  height: 177px;
}
.case_con .more2 {
  display: block;
  width: 138px;
  height: 40px;
  float: left;
  margin-right: 10px;
  border: 1px solid #d20e26;
  box-sizing: border-box;
  line-height: 40px;
  text-align: center;
  font-size: 16px;
  color: #d20e26;
}
.case_con .zx {
  display: block;
  width: 138px;
  height: 40px;
  float: left;
  margin-right: 10px;
  background: #d20e26;
  box-sizing: border-box;
  line-height: 40px;
  text-align: center;
  font-size: 16px;
  color: #fff;
}
@media screen and (max-width: 1440px) {
  .case_con .xx {
    width: 384px;
    box-sizing: border-box;
  }
}

.hz {
  background: url(../images/hz_bg.jpg) no-repeat center;
  padding-top: 130px;
  box-sizing: border-box;
  height: 900px;
}
.hz h2 {
  float: left;
  width: 30.7%;
}
.hz h2 span {
  display: block;
  font-size: 80px;
  color: #fff;
  line-height: 99px;
  font-weight: bold;
  margin-top: -12px;
}
.hz h2 i {
  display: block;
  font-size: 30px;
  color: #fff;
  line-height: 36px;
  font-weight: bold;
  text-transform: uppercase;
  margin-top: 22px;
  opacity: 0.6;
}
.hz h2 em {
  display: block;
  font-size: 25px;
  color: #fff;
  line-height: 36px;
  font-weight: bold;
  text-transform: uppercase;
  margin-top: 80px;
}
.hz h2 .more {
  display: block;
  width: 220px;
  height: 60px;
  line-height: 60px;
  border-radius: 30px;
  border: 1px solid #fff;
  text-align: center;
  font-size: 16px;
  color: #fff;
  margin-top: 140px;
  font-weight: normal;
  transition: all 0.5s ease;
}
.hz h2 .more img {
  display: inline-block;
  width: 24px;
  height: 15px;
  margin-left: 12px;
  vertical-align: -2px;
  transition: all 0.5s ease;
}
.hz h2 .more:hover {
  transform: translateY(-5px);
}
.hz h2 .more:hover img {
  transform: translateX(4px);
}

.hz_con {
  float: right;
  width: 69.3%;
}
.hz_con dl {
  float: left;
  width: 48.86%;
  height: 310px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 9px;
  position: relative;
  padding: 45px 40px 0;
  margin-bottom: 18px;
  transition: all 0.3s ease;
  overflow: hidden;
}
.hz_con dl:nth-child(2n) {
  float: right;
}
.hz_con dt {
  width: 99px;
  height: 99px;
  margin: 0 auto;
  transition: all 0.3s ease;
}
.hz_con dt img {
  display: block;
  width: 99px;
  height: 99px;
  margin: 0 auto;
}
.hz_con dd h4 {
  display: block;
  font-size: 24px;
  line-height: 24px;
  color: #333333;
  font-weight: bold;
  text-align: center;
  padding-top: 27px;
}
.hz_con dd p {
  display: block;
  font-size: 16px;
  line-height: 28px;
  color: #333333;
  font-weight: normal;
  text-align: center;
  padding-top: 15px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.hz_con dd .more {
  display: block;
  width: 140px;
  height: 38px;
  line-height: 38px;
  border-radius: 30px;
  border: 1px solid #fff;
  text-align: center;
  font-size: 16px;
  color: #fff;
  font-weight: normal;
  margin: 0 auto;
  display: none;
  transition: all 0.5s ease;
}
.hz_con dd .more img {
  display: inline-block;
  width: 24px;
  height: 15px;
  margin-left: 6px;
  vertical-align: -2px;
  transition: all 0.5s ease;
}
.hz_con dl.cur {
  background: #d60b0e;
}
.hz_con dl.cur dt {
  margin-top: -144px;
}
.hz_con dl.cur h4 {
  padding-top: 60px;
  color: #fff;
}
.hz_con dl.cur p {
  color: #fff;
  height: 125px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}
.hz_con dl.cur .more {
  display: block;
}
.hz_con dd .more:hover {
  transform: translateY(-5px);
}
.hz_con dd .more:hover img {
  transform: translateX(4px);
}

.news {
  padding: 108px 0;
  box-sizing: border-box;
}
.news_con {
  margin-top: 60px;
}
.news_l {
  width: 640px;
  float: left;
  position: relative;
}
.news h3 {
  height: 55px;
}
.news h3 em a {
  display: block;
  float: right;
  width: 70px;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  color: #333333;
  text-align: center;
  font-weight: normal;
  font-family: Arial;
  text-transform: uppercase;
  transition: all 0.3s;
  border-radius: 10px;
}
.news h3 span a {
  display: block;
  font-size: 20px;
  color: #999999;
  line-height: 20px;
  text-transform: uppercase;
  font-weight: normal;
  float: left;
  margin-right: 28px;
  position: relative;
}
.news h3 span a:after {
  width: 80px;
  height: 2px;
  position: absolute;
  left: 0px;
  background: #d60b0e;
  top: 27px;
  content: '';
}
.news h3 span.cur a {
  color: #333;
  font-weight: bold;
}
.news h3 em:hover {
  background: #008cd6;
  border-color: #008cd6;
  color: #fff;
}
.news_l dt {
  width: 640px;
  height: 360px;
  line-height: 0;
  overflow: hidden;
}
.news_l dt img {
  width: 640px;
  height: 360px;
  display: block;
}
.news_l dd {
  width: 640px;
  padding: 28px 60px 0 48px;
  box-sizing: border-box;
  height: 204px;
  box-shadow: 0px 22px 18px 0px rgba(0, 0, 0, 0.08);
}
.news_l dd h4 a {
  font-size: 18px;
  color: #333;
  display: block;
  line-height: 18px;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.news_l dd p {
  font-size: 16px;
  color: #666666;
  padding: 20px 0 0;
  line-height: 24px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.news_l dd span {
  font-size: 14px;
  color: #999999;
  line-height: 16px;
  display: block;
  font-weight: normal;
  margin-top: 6px;
}
.news_l dd .more img {
  display: block;
  float: right;
  margin-right: -20px;
  width: 37px;
  height: 37px;
}

.news_hd {
  z-index: 1;
  position: absolute;
  cursor: pointer;
  right: 46px;
  bottom: 32px;
}
.news_hd li {
  width: 14px;
  height: 14px;
  background: #ccc;
  display: inline-block;
  margin: 0 0 0 10px;
  border-radius: 13px;
  vertical-align: middle;
}
.news_hd li.on {
  background: #008cd6;
}
.news_r {
  width: 690px;
  float: right;
}
.news_r dl {
  padding-bottom: 38px;
  position: relative;
}
.news_r dt {
  width: 163px;
  height: 123px;
  line-height: 0;
  overflow: hidden;
  float: right;
}
.news_r dt img {
  width: 163px;
  height: 123px;
  display: block;
  transition: all 0.5s;
}
.news_r dl:hover dt img {
  transform: scale(1.05);
}
.news_r dd {
  width: 493px;
  float: left;
}
.news_r dd h4 a {
  font-size: 18px;
  color: #333;
  display: block;
  line-height: 18px;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.news_r dd p {
  font-size: 16px;
  color: #666666;
  padding: 18px 0 0;
  line-height: 24px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.news_r ul {
  border-top: 1px solid #e5e5e5;
  box-sizing: border-box;
  padding: 28px 0;
  border-bottom: 1px solid #e5e5e5;
}
.news_r li a {
  display: block;
  font-size: 16px;
  line-height: 45px;
  color: #333333;
  padding-left: 18px;
  background: url(../images/news_line.png) no-repeat 0 23px;
}
.news_r li em {
  float: right;
  font-size: 14px;
  color: #999999;
  line-height: 45px;
  font-family: Arial;
}
.news_r dl:hover dd h4 a,
.news_l dl:hover dd h4 a,
.news_r li a:hover {
  color: #d60b0e;
}

@media screen and (max-width: 1440px) {
  .news_l {
    width: 551px;
    float: left;
    position: relative;
  }
  .news_l dt {
    width: 551px;
    height: 310px;
    line-height: 0;
    overflow: hidden;
  }
  .news_l dt img {
    width: 551px;
    height: 310px;
    display: block;
  }
  .news_l dd {
    width: 551px;
  }
  .news_r {
    width: 590px;
    float: right;
  }
  .news_r dl {
    padding-bottom: 30px;
    position: relative;
  }
  .news_r dt {
    width: 140px;
    height: 105px;
    line-height: 0;
    overflow: hidden;
  }
  .news_r dt img {
    width: 140px;
    height: 105px;
    display: block;
    transition: all 0.5s;
  }
  .news_r dd {
    width: 422px;
  }
}

@-webkit-keyframes fadeInDown1 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDown1 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.fadeInDown1 {
  -webkit-animation-name: fadeInDown1;
  animation-name: fadeInDown1;
}
@-webkit-keyframes fadeInDown2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDown2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.fadeInDown2 {
  -webkit-animation-name: fadeInDown2;
  animation-name: fadeInDown2;
}
@-webkit-keyframes fadeInLeft1 {
  from {
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes fadeInLeft1 {
  from {
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.fadeInLeft1 {
  -webkit-animation-name: fadeInLeft1;
  animation-name: fadeInLeft1;
}
@-webkit-keyframes fadeInLeft2 {
  from {
    -webkit-transform: translate3d(-5%, 0, 0);
    transform: translate3d(-5%, 0, 0);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes fadeInLeft2 {
  from {
    -webkit-transform: translate3d(-5%, 0, 0);
    transform: translate3d(-5%, 0, 0);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.fadeInLeft2 {
  -webkit-animation-name: fadeInLeft2;
  animation-name: fadeInLeft2;
}
@-webkit-keyframes fadeInRight1 {
  from {
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes fadeInRight1 {
  from {
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.fadeInRight1 {
  -webkit-animation-name: fadeInRight1;
  animation-name: fadeInRight1;
}
@-webkit-keyframes fadeInRight2 {
  from {
    -webkit-transform: translate3d(5%, 0, 0);
    transform: translate3d(5%, 0, 0);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes fadeInRight2 {
  from {
    -webkit-transform: translate3d(5%, 0, 0);
    transform: translate3d(5%, 0, 0);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.fadeInRight2 {
  -webkit-animation-name: fadeInRight2;
  animation-name: fadeInRight2;
}
@-webkit-keyframes zoomLeft {
  from {
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes zoomLeft {
  from {
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
.zoomLeft {
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-animation-name: zoomLeft;
  animation-name: zoomLeft;
}
.zoomRight {
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-animation-name: zoomLeft;
  animation-name: zoomLeft;
}
@-webkit-keyframes fadeInUp1 {
  from {
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes fadeInUp1 {
  from {
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.fadeInUp1 {
  -webkit-animation-name: fadeInUp1;
  animation-name: fadeInUp1;
}
@-webkit-keyframes fadeInUp2 {
  from {
    -webkit-transform: translate3d(0, 2%, 0);
    transform: translate3d(0, 2%, 0);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes fadeInUp2 {
  from {
    -webkit-transform: translate3d(0, 2%, 0);
    transform: translate3d(0, 2%, 0);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.fadeInUp2 {
  -webkit-animation-name: fadeInUp2;
  animation-name: fadeInUp2;
}