html,body{
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.apply{
	width: 100%;
	height:100%;
	padding:6% 0 10% 0;
	font-size:0;
	-webkit-text-size-adjust:none;
}
.apply .list{
	width:12.5%;
	height:100%;
	display: inline-block;
	position: relative;
	cursor: pointer;
	-webkit-transition:width .6s ease-out;
	-moz-transition:width .6s ease-out;
	transition:width .6s ease-out;
	-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
	-moz-transform: matrix(1, 0, 0, 1, 0, 0);
	-ms-transform: matrix(1, 0, 0, 1, 0, 0);
	transform: matrix(1, 0, 0, 1, 0, 0);
}
.apply .list:hover{
	background-image: url(../img/appliance/apply_hover.png);
	-webkit-transform: matrix(1, 0, 0, 1, 0, -2);
	-moz-transform: matrix(1, 0, 0, 1, 0, -2);
	-ms-transform: matrix(1, 0, 0, 1, 0, -2);
	transform: matrix(1, 0, 0, 1, 0, -2); 
}
.apply .list:hover .icon{
	-webkit-transform: matrix(1, 0, 0, 1, 0, -60);
	-moz-transform: matrix(1, 0, 0, 1, 0, -60);
	-ms-transform: matrix(1, 0, 0, 1, 0, -60);
	transform: matrix(1, 0, 0, 1, 0, -60);
}
.apply .list.open:hover{
	/*background-color:transparent;*/
	background-image:none;
	opacity:1;
	-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
	-moz-transform: matrix(1, 0, 0, 1, 0, 0);
	-ms-transform: matrix(1, 0, 0, 1, 0, 0);
	transform: matrix(1, 0, 0, 1, 0, 0);
}
.apply .list + .list:after{
    content: '';
    position: absolute;
    top:0;
    left: 0;
    bottom: 0;
    background-image: url(../img/appliance/apply_line.png);
    width:2px;
}
.apply .list .icon{
	position: absolute;
	left: 50%;
	top:50%;
	width: 64px;
	margin-left:-32px;
	margin-top:-84px;
	text-align:center;
	-webkit-transition:all .6s ease;
	-moz-transition:all .6s ease;
	transition:all .6s ease;
	-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
	-moz-transform: matrix(1, 0, 0, 1, 0, 0);
	-ms-transform: matrix(1, 0, 0, 1, 0, 0);
	transform: matrix(1, 0, 0, 1, 0, 0);
}
.apply .list .icon .sign{
	display: inline-block;
	width: 40px;
}
.apply .list .icon .sign{ 
	height:52px;
	line-height:52px;
}
.apply .list .icon .sign img{
	display: inline-block; 
	vertical-align: middle;
}
.apply .list .icon p{
	font-size:16px;
	color: #535554;
	margin-top:30px;
	margin-bottom:60px;
}
.apply .list .icon i{
	display: inline-block;
	width:24px;
	height:24px;
	background: url(../img/appliance/icon_add.png) no-repeat center center;
	background-size:100% auto;	
}
.apply .list .msg{
	position: absolute;
	top:30%;
	left: 50%;
	margin-left:-8px;
	font-size:16px;
	color: #fff;
	opacity: 0;
	pointer-events: none;
}
.apply .list.open .icon{
	opacity:0;
	pointer-events: none;
}
.apply .list.open .desc{
	display: block;
	-webkit-transition:all .6s ease;
	-moz-transition:all .6s ease;
	transition:all .6s ease;
}
.apply .list.open .desc .mask{
	width: 100%;
	height: 100%;
	position: relative;
}
.apply .list.open .desc .mask:after{
	content: '';
	position: absolute;
	top: -20%;
	left: -20%;
	right: -20%;
	bottom: -20%;
	background: rgba(0,0,0,.20);
}
.apply .list .desc{
	display:none;
	width: 500px;
	position: absolute;
	top: 50%;
	left: 50%;
	pointer-events: none;
}
.apply .list .desc h1{
	font-size:24px;
	color: #fff;
} 
.apply .list .desc p{
	font-size: 14px;
	color: #fff;
	margin: 30px 0;
	line-height: 20px;
}
.apply .list .desc a{
	display: inline-block;
	width:100px;
	height:40px;
	background: #e76f0e;
	color: #fff;
	font-size:12px;
	text-align: center;
	line-height:40px;
	z-index:2;
	position:relative;
}
.apply .list .desc a:after{
	content: '';
	position: absolute;
	left: -5px;
	top: -5px;
	right:-5px;
	bottom: -5px;
	background: rgba(231,111,14,.37);
	z-index: -1;
}
.apply .list.open ~ .close{
	display: block;
}
.apply .close{
	display: none;
	width:40px;
	height:42px;
	background: url(../img/appliance/icon_close.png) no-repeat center center;
	background-size: 100% auto;
	position: absolute;
	bottom:100px;
	left: 50%;
	margin-left: -20px;
	cursor: pointer;
}
.apply .slideimg{
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -99;
}
.apply .slideimg .slideshow{
    width: 100%;
    height: 100%;
    position: relative;
}
.apply .slideimg .slideshow div{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
}