.planWrap{padding:140px 0 127px}
.planWrap .planBl{display:block;margin:0 auto;width: 100%;}
.planWrap .list{display:flex;width:100%;align-items:center;position: relative;height: 352px;}
.planWrap .item:nth-child(2){  }
.planWrap .item:nth-child(2).hover{

}
.planWrap .item:nth-child(3){right: -28px;left: auto;}
.planWrap .item{position:relative;height:290px;-webkit-box-shadow:0 0 10px 0 rgba(0,0,0,0.3);-moz-box-shadow:0 0 10px 0 rgba(0,0,0,0.3);box-shadow:0 0 10px 0 rgba(0,0,0,0.3);left: 327px;top: -184px;-webkit-transition: width.3s;-moz-transition: width.3s;-o-transition: width.3s;transition: width.3s;width: 100%;}
.planWrap .item:nth-child(2) .picHidden,.planWrap .item:nth-child(3) .picHidden{margin-left:0;margin-right:0}
.planWrap .item:nth-child(2) .nameHidden{}
.planWrap .item:nth-child(3) .nameHidden{left:auto;right:-104px;}
.planWrap .item:nth-child(3) .picHidden{margin-left:0}

.planWrap .item.hover {

}


.planWrap .item:nth-child(1).hover + .item .nameHidden{
    left:43px;
}
.planWrap .item.hover .info .formaInfo,
.planWrap .item.hover .info .textInfo{
    opacity: 1;
}
.planWrap .item.hover:nth-child(3) {


}
.planWrap .item.hover,.planWrap .item:hover{height:392px;-webkit-box-shadow:0 0 10px 0 rgba(0,0,0,0.0);-moz-box-shadow:0 0 10px 0 rgba(0,0,0,0.0);box-shadow:0 0 10px 0 rgba(0,0,0,0.0);width: 660px;}
.planWrap .item.hover .picHidden,.planWrap .item.hover .nameHidden,.planWrap .item:hover .picHidden,.planWrap .item:hover .nameHidden{opacity: 0;}
.planWrap .item.hover .info,.planWrap .item:hover .info{opacity: 1;}

.planWrap .item.plan3 .picHidden}
.planWrap .item.plan2 .nameHidden,.planWrap .item.plan1 .info .textInfo{background-color:#24a246}
.planWrap .item.plan2 .nameHidden,.planWrap .item.plan2 .info .textInfo{background-color:#fd4e4e}
.planWrap .item.plan3 .nameHidden,.planWrap .item.plan3 .info .textInfo{background-color:#f39200}
.planWrap .item.plan4 .nameHidden,.planWrap .item.plan4 .info .textInfo{background-color:#15f2ff}

.planWrap .picHidden{width:230px;height:289px;background-position:center;background-size:cover;background-repeat:no-repeat}
.planWrap .info{overflow:hidden;align-items:center;display:flex;z-index:5;opacity: 10;position: absolute;left: 0;top: 0;-webkit-transition: opacity .3s;-moz-transition: opacity .3s;-o-transition: opacity .3s;transition: opacity .3s;}
.planWrap .info .formaInfo{width:400px;padding:50px 40px;background-image:url(../img/bgplan1.html);background-size:cover;background-color:#1f265a;-webkit-box-shadow:0 0 10px 0 rgba(0,0,0,0.3);-moz-box-shadow:0 0 10px 0 rgba(0,0,0,0.3);box-shadow:0 0 10px 0 rgba(0,0,0,0.3);opacity: 10;-webkit-transition: opacity .5s;-moz-transition: opacity .5s;-o-transition: opacity .5s;transition: opacity .5s;}
.planWrap .info .formaInfo .tit{font-size:30px;color:#fff;font-weight:700;display:block;text-align:center}
.planWrap .info .formaInfo .inputInfo{position:relative;margin-top:36px}
.planWrap .info .formaInfo .inputInfo:before{content:"$";position:absolute;right:15px;top:10px;font-size:17px;color:#fff;font-weight:700}
.planWrap .info .formaInfo .inputInfo input{background-color:#313970;-webkit-border-radius:50px;-moz-border-radius:50px;-ms-border-radius:50px;border-radius:50px;border:solid 1px #666d9d;font-size:17px;color:#fff;font-weight:700;width:100%;height:43px;padding:0 25px 0 20px}
.planWrap .info .formaInfo ul{width:300px;margin-top:33px}
.planWrap .info .formaInfo li{display:table;width:100%}
.planWrap .info .formaInfo li .tohka{position:relative;display:table-cell;vertical-align:middle;width:100%;height:1px;top:10px}
.planWrap .info .formaInfo li .tohka:before{content:"..................................................................";position:absolute;left:0;top:0;width:100%;color:rgba(255,255,255,.2);display:block;height:17px;overflow:hidden}
.planWrap .info .formaInfo li .name{font-weight:700;width:100%;height:40px;color:#fff;flex-grow:1;display:table-cell;vertical-align:middle;width:calc(100% / 3)}
.planWrap .info .formaInfo li .price{font-weight:700;height:40px;color:#0387fd;display:table-cell;vertical-align:middle;width:calc(100% / 3)}
.planWrap .item.plan1 .info .formaInfo li .price{color:#0387fd}
.planWrap .item.plan2 .info .formaInfo li .price{color:#9846db}
.planWrap .item.plan3 .info .formaInfo li .price{color:#00b9e1}
.planWrap .info .textInfo{color:#fff;width:260px;background-color:#24a246;height:461px;padding:34px 0;-webkit-box-shadow:0 0 10px 0 rgba(0,0,0,0.3);-moz-box-shadow:0 0 10px 0 rgba(0,0,0,0.3);box-shadow:0 0 10px 0 rgba(0,0,0,0.3);opacity: 10;-webkit-transition: opacity .5s;-moz-transition: opacity .5s;-o-transition: opacity .5s;transition: opacity .5s;}
.planWrap .info .textInfo .name{font-size:30px;font-weight:700;display:block;text-align:center}
.planWrap .info .textInfo .pr{font-size:70px;font-weight:700;display:block;text-align:center;margin-top:17px}
.planWrap .info .textInfo .desr{font-size:17px;text-align:center;display:block;font-weight:700;line-height:13px}
.planWrap .info .textInfo ul{width:135px;margin:20px auto 0}
.planWrap .info .textInfo ul li{overflow:hidden;font-size:15px}
.planWrap .info .textInfo ul li + li{margin-top:5px}
.planWrap .info .textInfo ul li span{float:left}
.planWrap .info .textInfo ul li span + span{float:right;font-weight:700}
.planWrap .info .textInfo .btn{padding:12px 26px;margin:37px auto 0;color: #fff}
.