@keyframes lis_2 {
  0% {
    transform: translateY(-116px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes lis_3 {
  0% {
    transform: translateY(-232px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes lis_4 {
  0% {
    transform: translateY(-348px);
  }
  100% {
    transform: translateY(0px);
  }
}
.project_page {
  background: url(../imgs/index_nav.jpg) no-repeat center 0;
}
.title_Box {
  background-color: white;
}
.title_Box .title {
  line-height: 100px;
  height: 100px;
}
.title_Box .title img {
  padding-top: 5px;
  margin-left: 50px;
}
.title_Box .title ul {
  margin-left: 255px;
  display: flex;
}
.title_Box .title ul li {
  padding: 0 20px;
  font-size: 20px;
  color: #333333;
}
.title_Box .title ul li a {
  display: block;
}
.title_Box .title ul li:hover {
  background: url(../imgs/index_nav.jpg) no-repeat center 0;
  font-weight: bold;
}
.title_Box .title ul li:hover a {
  color: red;
}
.banner {
  position: relative;
  background: url(../imgs/project/banner3500.png) no-repeat center 0;
  height: 840px;
}
/* .banner .btn {
  box-shadow: 5px 2px 4px 1px #b8a6a7;
  border: 1px solid #e8302e;
  top: 642px;
  left: -59px;
  transform: translateX(-268px);
}
.banner .btn button {
  background-color: #e8302e;
}
.banner .btn input {
  color: #e8302e;
}
.banner img {
  position: absolute;
  top: 703px;
  left: -114px;
  animation: shan linear 2.2s infinite;
} */
@keyframes shan {
  0% {
    opacity: 1;
  }
  23% {
    opacity: 0;
  }
  24% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
.adv_Box {
  /* min-width: 1900px; */
  padding-top: 42px;
  background-color: #eee;
  height: 108px;
}
.adv_Box .adv ul {
  display: flex;
  justify-content: space-between;
}
.adv_Box .adv ul li {
  position: relative;
  width: 196px;
}
.adv_Box .adv ul li::before {
  background: url(../imgs/tender/youshi.png) -256px 0;
  position: absolute;
  content: '';
  display: block;
  width: 72px;
  height: 71px;
}
.adv_Box .adv ul li div {
  text-align: center;
  width: 123px;
  float: right;
  color: #333;
}
.adv_Box .adv ul li div span {
  font-size: 30px;
}
.adv_Box .adv ul li div p {
  font-size: 24px;
}
.adv_Box .adv ul li:nth-child(2)::before {
  background-position: 0 0;
}
.adv_Box .adv ul li:nth-child(3)::before {
  background-position: -555px 0;
}
.adv_Box .adv ul li:nth-child(4)::before {
  background-position: -833px 0;
}
.adv_Box .adv ul li:nth-child(5)::before {
  background-position: -1128px 0;
}
.bus_Box {
  /* min-width: 1900px; */
  height: 1162px;
  background-color: #fff;
}
.bus_Box .bus {
  background: url(../imgs/tender/y_h_bg.png) no-repeat center 146px;
  text-align: center;
}
.bus_Box .bus h3 {
  font-weight: bold;
  padding-top: 87px;
  font-size: 48px;
  color: #2c2c2c;
}
.bus_Box .bus h4 {
  margin-top: 20px;
  font-size: 30px;
  color: #2c2c2c;
}
.bus_Box .bus ul {
  margin-top: 41px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.bus_Box .bus ul li {
  position: relative;
  margin-bottom: 50px;
  background: url(../imgs/project/fuwu_2.png) no-repeat center 0;
  width: 356px;
  height: 385px;
  box-shadow: 0px 12px 29px 0px rgba(0, 0, 0, 0.15);
  border-radius: 30px;
}
.bus_Box .bus ul li h5 {
  padding: 20px 0 5px 0;
  font-size: 36px;
  font-weight: bold;
  color: #fd6866;
}
.bus_Box .bus ul li p {
  font-size: 20px;
  color: #fd6866;
}
.bus_Box .bus ul li::before {
  content: '';
  width: 146px;
  height: 146px;
  display: block;
  position: absolute;
  top: 136px;
  left: 0;
  right: 0;
  margin: auto;
  background: url(../imgs/project/fuwu_icon.png) no-repeat;
}
.bus_Box .bus ul li:nth-child(2)::before {
  background-position: -516px 0;
}
.bus_Box .bus ul li:nth-child(3)::before {
  background-position: -1030px 0;
}
.bus_Box .bus ul li:nth-child(4)::before {
  background-position: 0 -435px;
}
.bus_Box .bus ul li:nth-child(5):before {
  background-position: -516px -435px;
}
.bus_Box .bus ul li:nth-child(6)::before {
  background-position: -1030px -435px;
}
.bus_Box .bus ul li button {
  width: 200px;
  height: 38px;
  background: #fd6866;
  border-radius: 19px;
  margin: 217px auto 0;
  line-height: 38px;
  color: white;
}
.bus_Box .bus ul li button h6 {
  font-size: 24px;
}
.bus_Box .bus ul li:hover {
  background: url(../imgs/project/fuwu_1.png) no-repeat center 0;
}
.bus_Box .bus ul li:hover h5 {
  color: white;
}
.bus_Box .bus ul li:hover p {
  color: white;
}
.bus_Box .bus ul li:hover button {
  background-color: #fff;
}
.bus_Box .bus ul li:hover button h6 {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #fd6866;
  background-image: url(../imgs/tender/btn_r.jpg);
  animation: sports linear 6s infinite;
}
@keyframes sports {
  0% {
    background-position: 40px 4px;
  }
  20% {
    background-position: 80px 4px;
  }
  40% {
    background-position: 120px 4px;
  }
  60% {
    background-position: 160px 4px;
  }
  80% {
    background-position: 200px 4px;
  }
  100% {
    background-position: 240px 4px;
  }
}
.advantage_Box {
  /* min-width: 1900px; */
  background: url(../imgs/project/youshi.png) no-repeat center 0;
  background-size: 100% 100%;
  height: 732px;
}
.advantage_Box .advantage {
  position: relative;
}
.advantage_Box .advantage ul {
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.advantage_Box .advantage ul li {
  height: 374px;
  flex: 50%;
}
.advantage_Box .advantage ul li h4 {
  position: relative;
  margin-top: 59px;
  font-size: 36px;
  color: white;
  margin-bottom: 15px;
}
.advantage_Box .advantage ul li p {
  width: 438px;
  height: 51px;
  color: white;
  font-size: 30px;
}
.advantage_Box .advantage div {
  position: absolute;
  top: 252px;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
}
.advantage_Box .advantage div h5 {
  font-size: 60px;
  color: white;
  font-weight: bold;
  margin-bottom: 15px;
}
.advantage_Box .advantage div span {
  font-size: 30px;
  color: white;
}
.advantage_Box .advantage div button {
  display: block;
  font-size: 30px;
  color: white;
  width: 238px;
  height: 63px;
  background: #e8302e;
  border-radius: 30px;
  margin: 35px auto 0;
}
.copy {
  background: url(../imgs/tender/y_h_bg.png) no-repeat center 146px;
  text-align: center;
}
.copy h3 {
  font-weight: bold;
  padding-top: 87px;
  font-size: 48px;
  color: #2c2c2c;
}
.copy h4 {
  font-size: 30px;
  color: #2c2c2c;
}
.copy ul {
  height: 444px;
  margin-top: 55px;
}
.copy ul li {
  position: relative;
  margin-top: 20px;
  display: none;
  height: 96px;
}
.copy ul li div {
  display: flex;
  justify-content: space-between;
}
.copy ul li span {
  height: 96px;
  width: 216px;
  display: inline-block;
}
.copy ul li span:hover {
  box-shadow: 3px 4px 13px 0px rgba(140, 139, 139, 0.26);
}
.copy ul li:nth-child(1) {
  z-index: 4;
  background: url(../imgs/project/soft_1.png) no-repeat;
}
.copy ul li:nth-child(2) {
  z-index: 3;
  background: url(../imgs/project/soft_2.png) no-repeat;
}
.copy ul li:nth-child(3) {
  z-index: 2;
  background: url(../imgs/project/soft_3.png) no-repeat;
}
.copy ul li:nth-child(4) {
  z-index: 1;
  background: url(../imgs/project/soft_4.png) no-repeat;
}
.copy .tel {
  opacity: 0;
  top: 100px;
  margin: 86px 0 82px 0;
}
.lis_2 {
  animation: lis_2 linear 0.6s;
}
.lis_3 {
  animation: lis_3 linear 1.2s;
}
.lis_4 {
  animation: lis_4 linear 1.8s;
}
.flow_Box {
  height: 720px;
  background: #fff url(../imgs/tender/y_h_bg.png) no-repeat center 146px;
  text-align: center;
}
.flow_Box .flow h3 {
  font-weight: bold;
  padding-top: 87px;
  font-size: 48px;
  color: #2c2c2c;
}
.flow_Box .flow h4 {
  margin-top: 20px;
  font-size: 30px;
  color: #2c2c2c;
}
.flow_Box .flow ul {
  margin-top: 80px;
  display: flex;
  justify-content: space-around;
}
.flow_Box .flow ul li {
  position: relative;
  text-align: center;
  width: 204px;
}
.flow_Box .flow ul li h5 {
  margin-top: 168px;
  font-weight: bold;
  font-size: 30px;
  color: #008acc;
  margin-bottom: 20px;
}
.flow_Box .flow ul li p {
  pointer-events: none;
  cursor: default;
  position: relative;
  font-size: 24px;
  color: #008acc;
}
.flow_Box .flow ul li p::after {
  transition: 1s all;
  display: none;
  content: '';
  position: absolute;
  z-index: 2;
  left: -73px;
  top: 65px;
  height: 54px;
  width: 54px;
  border-radius: 50%;
  background: url(../imgs/project/liucheng_1.png) no-repeat;
  box-shadow: 6px 9px 24px 0px rgba(0, 0, 0, 0.1);
}
.flow_Box .flow ul li p::before {
  transition: 1s all;
  display: block;
  position: absolute;
  z-index: 2;
  left: -73px;
  top: 65px;
  content: '1';
  font-size: 24px;
  text-align: center;
  line-height: 54px;
  height: 54px;
  width: 54px;
  border-radius: 50%;
  color: #008acc;
  background-color: #fff;
  box-shadow: 6px 9px 24px 0px rgba(0, 0, 0, 0.1);
}
.flow_Box .flow ul li::before {
  content: '';
  width: 188px;
  height: 144px;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  background: url(../imgs/project/liucheng_2.png) no-repeat;
}
.flow_Box .flow ul li::after {
  content: '';
  width: 0px;
  height: 10px;
  display: none;
  position: absolute;
  left: -72px;
  border-radius: 3px 3px;
  top: 315px;
  background-color: #008acc;
}
.flow_Box .flow ul li:nth-child(2) p::before {
  content: '2';
}
.flow_Box .flow ul li:nth-child(2)::before {
  background-position: -354px 0;
}
.flow_Box .flow ul li:nth-child(3) p::before {
  content: '3';
}
.flow_Box .flow ul li:nth-child(3) ::before {
  background-position: -708px 0;
}
.flow_Box .flow ul li:nth-child(4) p::before {
  content: '4';
}
.flow_Box .flow ul li:nth-child(4) ::before {
  background-position: -1064px 0;
}
.flow_Box .flow ul li:hover::after {
  display: block;
  animation: zhang 1s linear forwards;
}
@keyframes zhang {
  0% {
    width: 0px;
  }
  100% {
    width: 300px;
  }
}
.flow_Box .flow ul li:hover p::before {
  pointer-events: none;
  cursor: default;
  display: none;
}
.flow_Box .flow ul li:hover p::after {
  pointer-events: none;
  cursor: default;
  display: block;
  animation: huadong 1s linear forwards;
}
@keyframes huadong {
  0% {
    left: '';
  }
  100% {
    left: 223px;
  }
}
.flow_Box .flow div {
  position: relative;
  margin-top: 55px;
  height: 9px;
  border-radius: 4.5px 4.5px;
  border: 1px solid #008acc;
}
.cost {
  position: relative;
  background: url(../imgs/tender/y_h_bg.png) no-repeat center 146px;
}
.cost h3 {
  text-align: center;
  font-weight: bold;
  padding-top: 87px;
  font-size: 48px;
  color: #2c2c2c;
}
.cost h4 {
  text-align: center;
  margin-top: 20px;
  font-size: 30px;
  color: #2c2c2c;
}
.cost > ul {
  margin-top: 50px;
}
.cost + div {
  margin-top: 50px;
}
.cost ul li {
  margin-bottom: 20px;
  background-color: #fff;
  padding: 15px 15px 20px 18px;
  width: 1010px;
  height: 110px;
}
.cost ul li div {
  margin-top: 4px;
  margin-right: 35px;
  text-align: center;
  border: 1px solid #000;
  width: 106px;
  height: 106px;
  border-radius: 50%;
  color: #333;
}
.cost ul li div span {
  display: block;
  padding-top: 15px;
  font-size: 30px;
}
.cost ul li div p {
  font-size: 18px;
}
.cost ul li h5 {
  margin-top: 15px;
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: bold;
}
.cost ul li > p {
  font-size: 18px;
  line-height: 28px;
  height: 52px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.cost ul li:hover div {
  background: #e52c2a;
  color: #fff;
  border: 1px solid #fff;
}
.cost ul li:hover h5 {
  color: #e52c2a;
}
.cost .cost_right {
  position: relative;
  margin-top: 50px;
  width: 334px;
  background-color: #fff;
}
.cost img {
  width: 334px;
  height: 638px;
  top: 436px;
  right: 0px;
}
.acc_Box {
  background-color: #fff;
}
.acc_Box .acc {
  height: 500px;
}
.acc_Box .acc h3 {
  text-align: center;
  font-weight: bold;
  padding-top: 87px;
  font-size: 36px;
  color: #2c2c2c;
}
.acc_Box .acc p {
  margin-top: 44px;
  display: flex;
  justify-content: center;
}
.acc_Box .acc p span {
  text-indent: 1px;
  overflow: hidden;
  position: relative;
  box-shadow: 0px 10px 16px 0px rgba(52, 1, 3, 0.2);
  border-radius: 10px;
  color: white;
  font-size: 80px;
  line-height: 133px;
  margin: 0 1px;
  text-align: center;
  display: inline-block;
  height: 132px;
  width: 95px;
  background: url(../imgs/project/renshu_2.png) no-repeat;
}
.acc_Box .acc p span::before {
  content: '';
  display: block;
  position: absolute;
  height: 132px;
  width: 95px;
  top: 0;
  left: -72px;
  background: url(../imgs/project/renshu_2.png) no-repeat;
}
.acc_Box .acc p span::after {
  content: '';
  display: block;
  position: absolute;
  height: 132px;
  width: 95px;
  top: 0;
  right: -72px;
  background: url(../imgs/project/renshu_2.png) no-repeat;
}
.acc_Box .acc p .perch {
  box-shadow: none;
  width: 36px;
  margin-top: 15px;
  background: url(../imgs/project/renshu_1.png) no-repeat center 103px;
}
.acc_Box .acc button {
  display: block;
  margin: 44px auto 0;
  width: 233px;
  height: 66px;
  border: 1px solid #e52c2a;
  border-radius: 10px;
  font-size: 36px;
  font-weight: bold;
  color: #e62e2c;
  line-height: 66px;
  background-color: #fff;
}
@keyframes bounce {
  0%,
  20%,
  53%,
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -100px, 0) scaleY(1.1);
    transform: translate3d(0, -100px, 0) scaleY(1.1);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -50px, 0) scaleY(1.05);
    transform: translate3d(0, -50px, 0) scaleY(1.05);
  }
  80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translateZ(0) scaleY(0.95);
    transform: translateZ(0) scaleY(0.95);
  }
  90% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(1.02);
    transform: translate3d(0, -10px, 0) scaleY(1.02);
  }
}
