/*
**banner
*/
#banner{
  background:url('../img/wms/banner.png') center center no-repeat;
}

/*
**为什么选择WMS
*/
#choice{
  width:100%;
  height:1524px;
  text-align:center;
}
#choice .container >ul{
  margin-right:10px;
  margin-top:36px;
  overflow: hidden;
}
#choice .container >ul >li{
  float:left;
  width:506px;
  height:520px;
  text-align: left;
}
#choice .container >ul >li:nth-child(2n){
  float:right;
  width:466px;
}
#choice .container >ul >li div h3{
  text-align: left;
}
#choice .container >ul >li div p{
  line-height:28px;
}
/*
**我们能做什么
*/
#effect{
  width:100%;
  height: 913px;
  text-align:center;
  background-color: #f7f8f9;
}
#effect .detail ul{
  margin-top:50px;
}
#effect .detail ul li{
  float:left;
  width: 562px;
  height: 134px;
  margin-top:26px;
  background-color: #ffffff;
  box-shadow: 2px 4px 7px 0 rgba(20, 116, 205, 0.12);
  border: solid 1px #e1e1e1;
  padding-top:20px;
}
#effect .detail ul li:hover{
  background-color: #f2f9ff;
  border: solid 1px #94c5f3;
}
#effect .detail ul li:nth-child(2n){
  margin-left:26px;
}
#effect .detail ul li >img,#effect .detail ul li >div{
  float:left;
}
#effect .detail ul li >img{
  margin-top:12px;
  margin-left:38px;
}
#effect .detail ul li >div{
  width:389px;
  margin-right:33px;
  margin-left:32px;
}
#effect .detail ul li div p{
  font-size:18px;
  color:#333;
  text-align: left;
  margin-bottom:6px;
}
#effect .detail ul li div div{
  color:#666;
  font-size:14px;
  text-align:justify;
}
/*
**为您提供仓库规划
*/
#provide{
  width:100%;
  height:1030px;
  text-align:center;
  background:url('../img/wms/15.png') no-repeat center bottom;
}
#provide .container h4{
  color: #1d84e4;
  margin-top:40px;
}
#provide .container ul{
  width:672px;
  margin-left:-336px;
  left:50%;
  top:30px;
  overflow: hidden;
  position:absolute;
}
#provide .container ul.ul{
  animation:common 600ms linear 0ms,top 600ms linear 0ms;
}
#provide .container ul li{
  float:left;
  width: 112px;
  height: 39px;
  border: solid 1px #1d84e5;
  border-radius: 5px;
  margin-top:20px;
  margin-left:28px;
  font-family: SourceHanSansCN-Medium;
  font-size: 16px;
  color:#085fb1;
  line-height:38px;
}
#provide .container .arrow{
  position: relative;
}
#provide .container .entrance{
  position: relative;
}
#provide .container .arrow img{
  position:absolute;
}
#provide .container .arrow .img{
  animation:common 1200ms linear 0ms,arrow 1200ms linear 0ms;
}
#provide .container .entrance img{
  position:absolute;
  top:128px;
  left:228px;
}
#provide .container .entrance .img02{
  animation:common 1800ms linear 0ms,entrance 1500ms linear 0ms;
}
/*动画*/
@-webkit-keyframes top {
  from   {top:-200px;}
  to     {top:30px;}
}
@-moz-keyframes top {
  from   {top:-200px;}
  to     {top:30px;}
}
@-o-keyframes top {
  from   {top:-200px;}
  to     {top:30px;}
}
@keyframes top {
  from   {top:-200px;}
  to     {top:30px;}
}

@-webkit-keyframes arrow {
  from   {top:-100px;}
  to     {top:0;}
}
@-moz-keyframes arrow {
  from   {top:-100px;}
  to     {top:0;}
}
@-o-keyframes arrow {
  from   {top:-100px;}
  to     {top:0;}
}
@keyframes arrow {
  from   {top:-100px;}
  to     {top:0;}
}


@-webkit-keyframes entrance {
  from   {top:-10px;width:0;}
  to     {top:128px;}
}
@-moz-keyframes entrance {
  from   {top:-10px;width:0;}
  to     {top:128px;}
}
@-o-keyframes entrance {
  from   {top:-10px;width:0;}
  to     {top:128px;}
}
@keyframes entrance {
  from   {top:-10px;width:0;}
  to     {top:128px;}
}

/*
**完美覆盖全行业
*/
#coverage{
  width:100%;
  height:853px;
  background-color: #f7f8f9;
  text-align:center;
}
#coverage .container ul{
  overflow: hidden;
  margin-top:40px;
  margin-bottom:78px;
  color:#fff;
  font-size:20px;
}
#coverage .container ul li{
  float:left;
  width: 264px;
  height: 184px;
  margin-top:36px;
  line-height:184px;
}
#coverage .container ul li div{
  /*background-color:rgba(10, 15, 52,0.08);*/
}
#coverage .container ul li+li{
  margin-left:38px;
}
#coverage .container ul li:hover div{
  cursor: pointer;
  background:url('../img/wms/hover.png') center center no-repeat;
}

/*
*客户故事
*/
#story{
  height:377px;
}
#story .introduce{
  margin-top:0;
  background:url(../img/wms/23.jpg) no-repeat center center;
}
/*
*纵向时间轴
*/
#story .time-vertical {
  list-style-type: none;
  padding: 0;
  margin-left:90px;
  height: 377px;
}

#story .time-vertical li {
  height: 56px;
  border-left: 2px solid #fff;
  position: relative;
  margin-top:30px;
}
#story .time-vertical li a {
  display: inline-block;
  margin-left: 20px;
  margin-top: 15px;
  text-decoration: none;
  color: #000;
}

#story .time-vertical li b:before {
  content: '';
  position: absolute;
  left: -10px;
  width: 18px;
  top:-25px;
  height: 18px;
  border: 2px solid #ffffff;
  border-radius: 10px;
  background-color: #577cb5;
}

#story .time-vertical li span.before {
  position: absolute;
  color: #fff;
  top: 58px;
  left: -88px;
}
#story .time-vertical li span.after {
  position: absolute;
  color: #fff;
  font-size:14px;
  top: 48px;
  left: 25px;
  line-height:22px;
}
#story .time-vertical li span.special{
  width: 41px;
  height: 18px;
  background-color: #ffb321;
  border-radius: 2px;
  text-align:center;
  line-height:18px;
}
/*
*核心诉求
*/
#heart{
  width: 100%;
  height: 718px;
  background-color: #fff;
}
/*
*解决方案
*/
#solution{
  width:100%;
  height: 593px;
  background-color: #f7f8f9;
}
#solution .container div.content{
  width:100%;
  height:356px;
  background:url(../img/wms/25.png) center center no-repeat;
}
#solution .container div.content{
  position:relative;
}
#solution .container div.content >div{
  position:absolute;
}
#solution .container div.content >div img{
  float:left;
}
#solution .container div.content >div div{
  float:left;
  width:323px;
  margin-top:-10px;
}
#solution .container div.content >div.top{
  top:38px;
  text-align:right;
  margin-right:10px;
}
#solution .container div.content >div.center{
  left:650px;
  top:56px;
}
#solution .container div.content >div.bottom{
  top:268px;
  left:178px;
}
#solution .container div.content .top div{
  margin-right:20px;
}
#solution .container div.content .center div{
  margin-left:20px;
}
#solution .container div.content .bottom div{
  margin-right:-55px;
}
#solution .container div.content >div h4{
  color:#2d6ac3;
}

/*
*项目演进节点
*/
#item{
  background-color: #fff;
}
#item .time-horizontal li div{
  width:80px;
}
#item .time-horizontal li {
  width: 20%;
}
#item .time-horizontal li h6{
  background: url(../img/wms/26.png) no-repeat;
  font-size:14px;
  padding-top:15px;
  width:85px;
  height:98px;
}
#item .time-horizontal li div{
  margin-left:-43px;
}
#item .time-horizontal li div h4{
  font-size:16px;
}
/*
*价值
*/
#value{
  width:100%;
  height: 955px;
  text-align:center;
  background:url("../img/company/18.png") bottom center no-repeat #f7f8f9;
}
#value .container >div{
  height:343px;
  margin:0 10px;
  margin-top:60px;
  margin-bottom:52px;
}
#value .container >div ul li{
  height:346px;
  width:541px;
  float:left;
  background:url('../img/wms/27.png') center center no-repeat;
}
#value .container >div ul li+li{
  float:right;
  margin-left:60px;
  background:url('../img/wms/28.png') center center no-repeat;
}
#value .container >div ul li{
  box-shadow: 2px 4px 7px 2px rgba(116, 116, 116, 0.12);
  border: solid 1px #e3e3e3;
}
#value .container >div ul li:hover{
  box-shadow: 2px 4px 7px 0 rgba(20, 116, 205, 0.12);
  border: solid 1px #94c5f3;
}
#value .container >ul{
  height:346px;
  margin-top: 0;
}
#value .container >ul >li{
  bottom:30px;
}
#value .container >ul >li h2{
  margin-top:56px;
  font-size:18px;
}
#value .container >ul >li .current{
  margin-top:32px;
  width:210px;
}
#value .container >ul >li .change{
  margin-top:60px;
}
#value .container >ul >li:hover{
  height: 302px;
  animation: height 500ms linear 0ms;
}
#value .container >ul >li .change ul{
  margin-left:0;
}
#value .container >ul >li .change ul li{
  list-style:none;
}
/*动画*/
@-webkit-keyframes height {
  from {height: 302px;}
  to {height: 302px;}
}