.body .ban {
  background-image: url('../image/pro1_01.jpg');
}
.body .con .con-left > ul .mymargin {
  height: 50px;
}
.body .con .con-left > ul > li {
  cursor: pointer;
  height: auto;
  line-height: 20px;
}
.body .con .con-left > ul > li:hover .first-list {
  background-color: #da251c !important;
}
.body .con .con-left > ul > li:hover .first-list span {
  color: #fff !important;
}
.body .con .con-left > ul > li a {
  position: absolute;
  display: none;
}
.body .con .con-left > ul > li div:hover > span {
  color: #da251c !important;
}
.body .con .con-left > ul > li span {
  color: #323232;
  font-size: 14px;
}
.body .con .con-left > ul > li .first-list {
  position: relative;
  width: 100%;
  height: 50px;
}
.body .con .con-left > ul > li .first-list .pro {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  display: block;
  left: 20px;
  width: 190px;
}
.body .con .con-left > ul > li .first-list.active {
  background-color: #da251c !important;
}
.body .con .con-left > ul > li .first-list.active span {
  color: #fff !important;
}
.body .con .con-left > ul > li > ul {
  display: none;
  width: 100%;
}
.body .con .con-left > ul > li > ul > li {
  cursor: pointer;
  height: auto;
  margin: 0;
}
.body .con .con-left > ul > li > ul > li .country {
  border-bottom: 1px dashed #ababb0;
  padding: 0 15%;
  margin: 0 auto;
  position: relative;
  height: 50px;
}
.body .con .con-left > ul > li > ul > li .country span {
  line-height: 50px;
}
.body .con .con-left > ul > li > ul > li .country::before {
  position: absolute;
  content: '';
  width: 5px;
  height: 5px;
  background-color: #626263;
  display: block;
  top: 50%;
  left: 20px;
  transform: translateY(-50%) rotate(45deg);
}
.body .con .con-left > ul > li > ul > li ul {
  display: none;
  width: 70%;
  margin: 0 auto;
}
.body .con .con-left > ul > li > ul > li ul li {
  margin-bottom: 0;
}
.body .con .con-left > ul > li > ul > li ul li a {
  padding-left: 15px;
  position: static !important;
  display: block !important;
}
.body .con .con-left > ul > li > ul > li ul li:hover a {
  color: #da251c;
}
.body .con .con-left > ul > li:nth-last-of-type(1) .first-list a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 200;
}
.body .con .con-right .pro-list,
.body .con .con-right .down-list {
  width: 100%;
}
.body .con .con-right .pro-list ul,
.body .con .con-right .down-list ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.body .con .con-right .pro-list ul li,
.body .con .con-right .down-list ul li {
  margin-bottom: 20px;
  width: 32%;
  position: relative;
}
.body .con .con-right .pro-list ul li a,
.body .con .con-right .down-list ul li a {
  z-index: 1000;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.body .con .con-right .pro-list ul li > div,
.body .con .con-right .down-list ul li > div {
  overflow: hidden;
  position: relative;
}
.body .con .con-right .pro-list ul li > div .bg,
.body .con .con-right .down-list ul li > div .bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 500;
}
.body .con .con-right .pro-list ul li > div img,
.body .con .con-right .down-list ul li > div img {
  transition: all 1.5s;
  width: 100%;
  height: auto;
}
.body .con .con-right .pro-list ul li .down img,
.body .con .con-right .down-list ul li .down img {
  transition: all 1.5s;
}
.body .con .con-right .pro-list ul li .pro .bg::after,
.body .con .con-right .down-list ul li .pro .bg::after {
  content: '';
  position: absolute;
  background-image: url('../image/pro1_04.png');
  width: 40px;
  height: 40px;
  background-size: 100% 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.body .con .con-right .pro-list ul li .down .bg .title,
.body .con .con-right .down-list ul li .down .bg .title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.body .con .con-right .pro-list ul li .down .bg .title span,
.body .con .con-right .down-list ul li .down .bg .title span {
  text-align: center;
  display: block;
  font-size: 14px;
  color: #fff;
}
.body .con .con-right .pro-list ul li .down .bg .title span:nth-of-type(1),
.body .con .con-right .down-list ul li .down .bg .title span:nth-of-type(1) {
  font-size: 40px;
  margin-bottom: 20px;
}
.body .con .con-right .pro-list ul li > span,
.body .con .con-right .down-list ul li > span {
  width: 100%;
  display: inline-block;
  text-align: center;
  line-height: 50px;
  height: 50px;
}
.body .con .con-right .pro-list ul li:hover .pro img,
.body .con .con-right .down-list ul li:hover .pro img {
  transform: scale(1.1);
}
.body .con .con-right .pro-list ul li:hover .down img,
.body .con .con-right .down-list ul li:hover .down img {
  transform: scale(1.1);
}
.body .con .con-right .pro-list ul li:hover span,
.body .con .con-right .down-list ul li:hover span {
  color: #da251c;
}
.body .con .con-right .pro-view .view-head {
  margin-bottom: 80px;
  font-size: 14px;
  color: #787878;
}
.body .con .con-right .pro-view .view-head a {
  font-size: 14px;
  color: #787878;
}
.body .con .con-right .pro-view .view-head a:nth-last-of-type(1) {
  color: #da251c;
}
.body .con .con-right .pro-view .view-con {
  text-align: center;
}
.body .con .con-right .pro-view .view-con img {
  margin-bottom: 50px;
  max-width: 100%;
}
@media (max-width: 700px) {
  .body .con .con-right .pro-list ul li,
  .body .con .con-right .down-list ul li {
    width: 100%;
  }
  .view-head {
    display: none;
  }
  .body .con .con-right .pro-view .view-con img {
    width: 100%;
  }
}
