@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
border: none;
zoom: 1;
}
ul li {
list-style: none;
}
.boxs {
float:left;
width: 170px;
height: 900px;
border: 0px solid #ccc;
padding-top:15px;
padding-left: 55px;
position: relative;
}
.box {
float:left;
width: 172px;
height: 900px;
position: relative;
}
.boxs ul li {
width: 172px;
display: block;
height: 40px;
padding: 2px;
}
/****** 1 ******/
.weixin {
background: url(../ing/elevator-1-2.png) no-repeat;
background-position: 0 87%;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
}
.weixin:hover {
background-position: 0 93%
}
.weixin:hover .weixin-logo {
width: 172px;
height: 185px;
}
.weixin-logo {
background: url(../ing/elevator-1-2.png) no-repeat;
background-position: 0 0;
width: 0px;
height: 0px;
overflow: hidden;
position: absolute;
top: 40px;
left: -3px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
}
/****** 2 ******/
.app {
background: url(../ing/elevator-1-2.png) no-repeat;
background-position: 0 55%;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
}
.app:hover {
background-position: 0 61%;
}
.app:hover .app-logo {
width: 172px;
height: 185px;
}
.app-logo {
background: url(../ing/elevator-1-2.png) no-repeat;
background-position: 0 26%;
width: 0px;
height: 0px;
overflow: hidden;
position: absolute;
top: -134px;
left: -3px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
}
/****** 3 ******/
.weixin3 {
background: url(../ing/elevator-3-4.png) no-repeat;
background-position: 0 87%;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
}
.weixin3:hover {
background-position: 0 93%
}
.weixin3:hover .weixin3-logo {
width: 172px;
height: 204px;
}
.weixin3-logo {
background: url(../ing/elevator-3-4.png) no-repeat;
background-position: 0 0;
width: 0px;
height: 0px;
overflow: hidden;
position: absolute;
top: -114px;
left: -3px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
}
/****** 4 ******/
.app4 {
background: url(../ing/elevator-3-4.png) no-repeat;
background-position: 0 55%;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
}
.app4:hover {
background-position: 0 61%;
}
.app4:hover .app4-logo {
width: 172px;
height: 185px;
}
.app4-logo {
background: url(../ing/elevator-3-4.png) no-repeat;
background-position: 0 26%;
width: 0px;
height: 0px;
overflow: hidden;
position: absolute;
top: -54px;
left: -3px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
}
/****** 5 ******/
.weixin5 {
background: url(../ing/elevator-5-6.png) no-repeat;
background-position: 0 87%;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
}
.weixin5:hover {
background-position: 0 93%
}
.weixin5:hover .weixin5-logo {
width: 172px;
height: 204px;
}
.weixin5-logo {
background: url(../ing/elevator-5-6.png) no-repeat;
background-position: 0 0;
width: 0px;
height: 0px;
overflow: hidden;
position: absolute;
top: -30px;
left: -3px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
}
/****** 6 ******/
.app6 {
background: url(../ing/elevator-5-6.png) no-repeat;
background-position: 0 55%;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
}
.app6:hover {
background-position: 0 61%;
}
.app6:hover .app6-logo {
width: 172px;
height: 185px;
}
.app6-logo {
background: url(../ing/elevator-5-6.png) no-repeat;
background-position: 0 26%;
width: 0px;
height: 0px;
overflow: hidden;
position: absolute;
top: 30px;
left: -3px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
}
/****** 7 ******/
.weixin7 {
background: url(../ing/elevator-7-8.png) no-repeat;
background-position: 0 87%;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
}
.weixin7:hover {
background-position: 0 93%
}
.weixin7:hover .weixin7-logo {
width: 172px;
height: 204px;
}
.weixin7-logo {
background: url(../ing/elevator-7-8.png) no-repeat;
background-position: 0 0;
width: 0px;
height: 0px;
overflow: hidden;
position: absolute;
top: 60px;
left: -3px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
}
/****** 8 ******/
.app8 {
background: url(../ing/elevator-7-8.png) no-repeat;
background-position: 0 55%;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
}
.app8:hover {
background-position: 0 61%;
}
.app8:hover .app8-logo {
width: 170px;
height: 185px;
}
.app8-logo {
background: url(../ing/elevator-7-8.png) no-repeat;
background-position: 0 26%;
width: 0px;
height: 0px;
overflow: hidden;
position: absolute;
top: 120px;
left: -3px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
}
/****** 9 ******/
.weixin9 {
background: url(../ing/elevator-9-10.png) no-repeat;
background-position: 0 87%;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
}
.weixin9:hover {
background-position: 0 93%
}
.weixin9:hover .weixin9-logo {
width: 170px;
height: 204px;
}
.weixin9-logo {
background: url(../ing/elevator-9-10.png) no-repeat;
background-position: 0 0;
width: 0px;
height: 0px;
overflow: hidden;
position: absolute;
top: 140px;
left: -3px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
}
/****** 10 ******/
.app10 {
background: url(../ing/elevator-9-10.png) no-repeat;
background-position: 0 55%;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
}
.app10:hover {
background-position: 0 61%;
}
.app10:hover .app10-logo {
width: 170px;
height: 185px;
}
.app10-logo {
background: url(../ing/elevator-9-10.png) no-repeat;
background-position: 0 26%;
width: 0px;
height: 0px;
overflow: hidden;
position: absolute;
top: 210px;
left: -3px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
}
/****** 11 ******/
.weixin11 {
background: url(../ing/elevator-11-12.png) no-repeat;
background-position: 0 87%;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
}
.weixin11:hover {
background-position: 0 93%
}
.weixin11:hover .weixin11-logo {
width: 170px;
height: 204px;
}
.weixin11-logo {
background: url(../ing/elevator-11-12.png) no-repeat;
background-position: 0 0;
width: 0px;
height: 0px;
overflow: hidden;
position: absolute;
top: 230px;
left: -3px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
}
/****** 12 ******/
.app12 {
background: url(../ing/elevator-11-12.png) no-repeat;
background-position: 0 55%;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
}
.app12:hover {
background-position: 0 61%;
}
.app12:hover .app12-logo {
width: 170px;
height: 185px;
}
.app12-logo {
background: url(../ing/elevator-11-12.png) no-repeat;
background-position: 0 26%;
width: 0px;
height: 0px;
overflow: hidden;
position: absolute;
top: 300px;
left: -3px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
}
/****** 13 ******/
.weixin13 {
background: url(../ing/elevator-13-14.png) no-repeat;
background-position: 0 87%;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
}
.weixin13:hover {
background-position: 0 93%
}
.weixin13:hover .weixin13-logo {
width: 170px;
height: 204px;
}
.weixin13-logo {
background: url(../ing/elevator-13-14.png) no-repeat;
background-position: 0 0;
width: 0px;
height: 0px;
overflow: hidden;
position: absolute;
top: 320px;
left: -3px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
}
/****** 14 ******/
.app14 {
background: url(../ing/elevator-13-14.png) no-repeat;
background-position: 0 55%;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
}
.app14:hover {
background-position: 0 61%;
}
.app14:hover .app14-logo {
width: 170px;
height: 185px;
}
.app14-logo {
background: url(../ing/elevator-13-14.png) no-repeat;
background-position: 0 26%;
width: 0px;
height: 0px;
overflow: hidden;
position: absolute;
top: 390px;
left: -3px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
}
/****** 15 ******/
.weixin15 {
background: url(../ing/elevator-15-16.png) no-repeat;
background-position: 0 87%;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
}
.weixin15:hover {
background-position: 0 93%
}
.weixin15:hover .weixin15-logo {
width: 170px;
height: 204px;
}
.weixin15-logo {
background: url(../ing/elevator-15-16.png) no-repeat;
background-position: 0 0;
width: 0px;
height: 0px;
overflow: hidden;
position: absolute;
top: 410px;
left: -3px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
}
/****** 16 ******/
.app16 {
background: url(../ing/elevator-15-16.png) no-repeat;
background-position: 0 55%;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
}
.app16:hover {
background-position: 0 61%;
}
.app16:hover .app16-logo {
width: 170px;
height: 185px;
}
.app16-logo {
background: url(../ing/elevator-15-16.png) no-repeat;
background-position: 0 26%;
width: 0px;
height: 0px;
overflow: hidden;
position: absolute;
top: 470px;
left: -3px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
}
/****** 17 ******/
.weixin17 {
background: url(../ing/elevator-17-18.png) no-repeat;
background-position: 0 87%;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
}
.weixin17:hover {
background-position: 0 93%
}
.weixin17:hover .weixin17-logo {
width: 170px;
height: 204px;
}
.weixin17-logo {
background: url(../ing/elevator-17-18.png) no-repeat;
background-position: 0 0;
width: 0px;
height: 0px;
overflow: hidden;
position: absolute;
top: 500px;
left: -3px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
}
/****** 18 ******/
.app18 {
background: url(../ing/elevator-17-18.png) no-repeat;
background-position: 0 55%;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
}
.app18:hover {
background-position: 0 61%;
}
.app18:hover .app18-logo {
width: 170px;
height: 185px;
}
.app18-logo {
background: url(../ing/elevator-17-18.png) no-repeat;
background-position: 0 26%;
width: 0px;
height: 0px;
overflow: hidden;
position: absolute;
top: 560px;
left: -3px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
}
/****** 19 ******/
.weixin19 {
background: url(../ing/elevator-19-20.png) no-repeat;
background-position: 0 87%;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
}
.weixin19:hover {
background-position: 0 93%
}
.weixin19:hover .weixin19-logo {
width: 170px;
height: 204px;
}
.weixin19-logo {
background: url(../ing/elevator-19-20.png) no-repeat;
background-position: 0 0;
width: 0px;
height: 0px;
overflow: hidden;
position: absolute;
top: 580px;
left: -3px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
}
/****** 20 ******/
.app20 {
background: url(../ing/elevator-19-20.png) no-repeat;
background-position: 0 55%;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
}
.app20:hover {
background-position: 0 61%;
}
.app20:hover .app20-logo {
width: 170px;
height: 185px;
}
.app20-logo {
background: url(../ing/elevator-19-20.png) no-repeat;
background-position: 0 26%;
width: 0px;
height: 0px;
overflow: hidden;
position: absolute;
top: 650px;
left: 0px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
}