/* div {
    opacity: 0;
    transition: all 600ms;
    transform: translateY(20px);
}
.show {
    opacity: 1;
    transform: translateY(0);
} */
.chose {
  background-color: #F7F8FA;
  padding: 80px 0;
  padding-bottom: 40px;
}
.chose .title {
  text-align: center;
  pointer-events: none;
}
.chose .title .p1 {
  color: #222222;
  font-size: 48px;
  font-family: "FZCYSK--GBK1-0";
}
.chose .title .p2 {
  color: #888888;
  font-size: 24px;
  font-family: "FZCYSK--GBK1-0";
  margin-top: 30px;
}
.chose .allItems {
  width: 70%;
  margin: 60px auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
.chose .allItems .item {
  width: 49%;
  background-color: #fff;
  padding: 60px 2%;
  position: relative;
  margin-bottom: 25px;
}
.chose .allItems .item span {
  position: absolute;
  right: 5%;
  top: 8%;
  color: #E9E9E9;
  font-size: 48px;
  font-family: "FZCYSK--GBK1-0";
  transition: all 600ms;
}
 .chose .allItems .item:hover span {
  color: #8C111B;
  opacity: 0.5;
}
.chose .allItems .item .p1 {
  color: #333333;
  font-size: 24px;
  font-family: "SOURCEHANSANSCN-REGULAR";
}
.chose .allItems .item .p2 {
  color: #666666;
  font-size: 14px;
  font-family: "SOURCEHANSANSCN-REGULAR";
  margin-top: 5px;
}
.service {
    width: 100%;
    background: url(../image/fBg.png) no-repeat;
    background-size: cover;
    padding: 100px 0;
}
.service .title {
  text-align: center;
  pointer-events: none;
}
.service .title .p1 {
  color: white;
  font-size: 48px;
  font-family: "FZCYSK--GBK1-0";
}
.service .title .p2 {
  color: #888888;
  font-size: 24px;
  font-family: "FZCYSK--GBK1-0";
  margin-top: 30px;
}
.service .allItems {
  width: 70%;
  margin: 60px auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-top: 60px;
  position: relative;
}
.service .allItems .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.service .allItems .item .pic {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #8C111B;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 600ms;
}
.service .allItems .item .text {
  font-size: 18px;
  font-family: "MicrosoftYaHei";
  position: relative;
  transition: all 600ms;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 60px auto;
}
.service .allItems .item .text .circle {
  width: 13px;
  height: 13px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  margin-bottom: 20px;
  position: relative;
  transition: all 600ms;
}
.service .allItems .item .text .circle span {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: 60%;
  background-color: white;
  border-radius: 50%;
  opacity: 0;
  transition: all 600ms;
}
.service .allItems .item .text .circle::before, .service .allItems .item .text .circle::after {
  content: "";
  display: inline-block;
  width: 98px;
  height: 1px;
  background-color: white;
  position: absolute;
}
.service .allItems .item .text .circle::before {
  content: "";
  display: inline-block;
  left: -100px;
  top: 50%;
  transform: translateY(-50%);
}
.service .allItems .item .text .circle::after {
  content: "";
  display: inline-block;
  right: -100px;
  top: 50%;
  transform: translateY(-50%);
}
.service .allItems .item .text p {
  opacity: 0.54;
  color: white;
  font-family: "MicrosoftYaHei";
  font-size: 18px;
  transition: all 600ms;
}
.service .allItems .item:hover .pic {
  background-color: #B80211;
}
.service .allItems .item:hover .text .circle {
  border-color: white;
  transform: scale(1.2);
}
.service .allItems .item:hover .text .circle span {
  opacity: 1;
}
.service .allItems .item:hover .text p {
  opacity: 1;
  transform: scale(1.2);
}
.service .allItems .item:last-child .text p {
  /* transform: scale(1.3); */
}
.service .allItems .active .pic {
  background-color: #B80211;
}
.service .allItems .active .text .circle {
  border-color: white;
  transform: scale(1.2);
}
.service .allItems .active .text .circle span {
  opacity: 1;
}
.service .allItems .active .text p {
  opacity: 1;
  transform: scale(1.2);
}

@media (max-width: 768px){
	.chose {
	    background-color: #F7F8FA;
	    padding: 40px 0;
	}
	.chose .title {
	    text-align: center;
	    pointer-events: none;
	    width: 97%;
	    margin: 0 auto;
	}
	.chose .title .p1 {
	    color: #535353;
	    font-size: 24px;
	    font-family: "FZCYSK--GBK1-0";
	}
	.chose .title .p2 {
	    color: #888888;
	    font-size: 14px;
	    font-family: "FZCYSK--GBK1-0";
	    margin-top: 20px;
	    opacity: 0.5;
	}
	.chose .allItems {
	    width: 95%;
	    margin: 30px auto;
	    display: flex;
	    flex-direction: row;
	    flex-wrap: wrap;
	    justify-content: space-between;
	}
	.chose .allItems .item {
	    width: 100%;
	    background-color: white;
	    padding: 40px 5%;
	    position: relative;
	    margin-bottom: 15px;
	}
	.chose .allItems .item .p1 {
	    color: #333333;
	    font-size: 18px;
	    font-family: "SOURCEHANSANSCN-REGULAR";
	}
	.chose .allItems .item .p2 {
	    color: #666666;
	    font-size: 14px;
	    font-family: "SOURCEHANSANSCN-REGULAR";
	    margin-top: 5px;
	}
	.chose .allItems .item span {
	  position: absolute;
	  right: 5%;
	  top: 8%;
	  color: #E9E9E9;
	  font-size: 28px;
	  font-family: "FZCYSK--GBK1-0";
	  transition: all 600ms;
	}
	.service {
	  width: 100%;
	  background: url("../image/fBg.png") no-repeat;
	  background-size: cover;
	  padding: 50px 0;
	}
	.service .title {
	  text-align: center;
	  pointer-events: none;
	  width: 90%;
	  margin: 0 auto;
	}
	.service .title .p1 {
	  color: white;
	  font-size: 24px;
	  font-family: "FZCYSK--GBK1-0";
	}
	.service .title .p2 {
	  color: #888888;
	  font-size: 14px;
	  font-family: "FZCYSK--GBK1-0";
	  margin-top: 30px;
	}
	.service .allItems {
	  width: 95%;
	  margin: 60px auto;
	  margin-bottom: 0;
	  display: flex;
	  padding-top: 0;
	  flex-direction: row;
	  justify-content: space-between;
	  position: relative;
	}
	.service .allItems .item {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  z-index: 10;
	}
	.service .allItems .item .pic {
	  width: 35px;
	  height: 35px;
	  border-radius: 50%;
	  background-color: #8C111B;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  transition: all 600ms;
	}
	.service .allItems .item .pic img {
	  width: 20px;
	  height: 20px;
	  object-fit: contain;
	}
	.service .allItems .item .text {
	  font-size: 14px;
	  font-family: "MicrosoftYaHei";
	  position: relative;
	  transition: all 600ms;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  margin: 30px auto;
	}
	.service .allItems .item .text .circle {
	  width: 13px;
	  height: 13px;
	  border: 1px solid rgba(255, 255, 255, 0.6);
	  border-radius: 50%;
	  margin-bottom: 20px;
	  position: relative;
	  transition: all 600ms;
	}
	.service .allItems .item .text .circle span {
	  display: block;
	  position: absolute;
	  left: 50%;
	  top: 50%;
	  transform: translate(-50%, -50%);
	  width: 60%;
	  height: 60%;
	  background-color: white;
	  border-radius: 50%;
	  opacity: 0;
	  transition: all 600ms;
	}
	.service .allItems .item .text .circle::before, .service .allItems .item .text .circle::after {
	  content: "";
	  display: inline-block;
	  width: 20px;
	  height: 1px;
	  background-color: white;
	  position: absolute;
	}
	.service .allItems .item .text .circle::before {
	  content: "";
	  display: inline-block;
	  left: -20px;
	  top: 50%;
	  transform: translateY(-50%);
	}
	.service .allItems .item .text .circle::after {
	  content: "";
	  display: inline-block;
	  right: -21px;
	  top: 50%;
	  transform: translateY(-50%);
	}
	.service .allItems .item .text p {
	  opacity: 0.54;
	  color: white;
	  font-family: "MicrosoftYaHei";
	  font-size: 14px;
	  transition: all 600ms;
	}
	.service .allItems .item:last-child .text p {
	  /* transform: scale(1.3); */
	}
	.service .allItems .active .pic {
	  background-color: #B80211;
	}
	.service .allItems .active .text .circle {
	  border-color: white;
	  transform: scale(1.2);
	}
	.service .allItems .active .text .circle span {
	  opacity: 1;
	}
	.service .allItems .active .text p {
	  opacity: 1;
	  transform: scale(1.2);
	}
}