.container{
  overflow: hidden;
}
.banner{
  position: relative;
  width:100%;
  height:37.5rem;
  background: url(../images/scene/banner.png) no-repeat;
  background-size: 100%;
}
.banner .menu{
  padding: 0.625rem 11.25rem;
}
.banner .menu img{
  width: 17.75rem;
  height: 1.875rem;
}
.banner .menu ul li a{
  color:rgba(255,255,255,.8);
  padding: 0.625rem;
  font-size:1.125rem;
  margin-right: 2.375rem;
}
.banner .menu ul li:nth-child(2) a{
  border-bottom: 0.1875rem solid #3377FF;
}
.banner .menu ul li:hover a{
  border-bottom: 0.1875rem solid #3377FF;
}
.banner .menu ul li:nth-child(5) a,
.banner .menu ul li:last-child a{
  border:0.0625rem solid #ccc;
  border-radius: 0.3125rem;
  padding: 0.3125rem 1.25rem;
}
.details{
  position: absolute;
  top: 70%;
  left: 21%;
}
.details a{
  color: #fff;
  padding: 0.625rem 2.5rem;
  border: 0.0625rem solid #fff;
}
.title{
  font-size:2.125rem;
  font-family:MicrosoftYaHei;
  font-weight:400;
  color:rgba(51,51,51,1);
  padding-top: 6.25rem;
}
.case{
  height: 46rem;
  text-align: center;
}
.case ul{
  padding: 7.1875rem 22.5rem;
}
.case ul li{
  position: relative;
  width:18.625rem;
  height:19.375rem; 
}
.case ul li img{
  padding-top: 4.375rem;
  width: 6.25rem;
  height: 6.25rem;
}
.case ul li:nth-child(1){
  background: url(../images/scene/app.png) no-repeat center;
  background-size: 101%;
}
.case ul li:nth-child(2){
  background: url(../images/scene/web.png) no-repeat center;
  background-size: 101%;
}
.case ul li:nth-child(3){
  background: url(../images/scene/saoma.png) no-repeat center;
  background-size: 101%;
}
.case ul li:nth-child(4){
  background: url(../images/scene/accounts.png) no-repeat center;
  background-size: 101%;
}
.case ul li .pay-title{
  font-size:1.25rem;
  font-family:MicrosoftYaHei;
  font-weight:bold;
  color:rgba(255,255,255,1);
  padding-top: 2.8125rem;
}
.case ul li p{
  font-size:0.875rem;
  font-family:MicrosoftYaHei;
  color:rgba(255,255,255,1);
  line-height: 180%;
  padding-left: 1.25rem;
  width: 12rem;
}
.case ul li p:nth-child(3){
  margin-top: 2rem;
}
.case ul li .particulars{
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  overflow: hidden;
  background:rgba(0,41,130,.4);
  text-align: left;
  transition: all 0.5s;
  box-sizing: border-box;
}
.case ul li .particulars .line{
  width: 2.5rem;
  height: 0.125rem;
  margin-top: 0.625rem;
  background:rgba(255,188,77,1);
  margin-left: 1.25rem;
}
.case ul li .particulars a{
  position: absolute;
  bottom: 10%;
  left: 50%;
  width: 4.5rem;
  color: #fff;
  transform: translateX(-50%);
  padding: 0.3125rem 1.25rem;
  border:0.0625rem solid #fff;
  font-size: 1.125rem;
  z-index: 2;
}
.case ul li .content{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0.05rem 0;
  text-align: center;
  background:rgba(0,41,130,.4);
  z-index: 1;
  transition: all 0.5s;
  overflow: hidden;
}
.case ul li:hover .particulars{
  width: 100%;
  background: rgba(28,90,214, .7);
}
.case ul li:hover .content{
  opacity: 0;
  height: 0;
}
.footer{
  height:2.5rem;
  background:rgba(255,255,255,1);
  text-align: center;
}
.footer p{
  font-size:0.875rem;
  line-height: 2.5rem;
  font-family:MicrosoftYaHei;
  font-weight:400;
  color:rgba(102,102,102,1);
}