#left_service .wyz{
position:fixed;
left:0%;
top:40%;
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-ms-transform:translateY(-50%);
-o-transform:translateY(-50%);
transform:translateY(-50%);
padding:50px 0;
height:482px;
-moz-box-sizing:border-box;
box-sizing:border-box;
z-index:99;
}
#left_service .wyz-form.cur{
width:200px;
opacity:1;
}
#left_service .wyz .transition{
-webkit-transition-duration:.8s;
-moz-transition-duration:.8s;
-o-transition-duration:.8s;
transition-duration:.8s;
}
#left_service .wyz .wyz-title{
background-color:rgba(32, 176, 159, .8);
color:#fff;
padding:15px 20px 0;
white-space:nowrap;
position:relative;
}
#left_service .wyz .wyz-title .cf-close{
position:absolute;
left:166px;
top:0;
padding:10px;
}
#left_service .wyz-item-block{
position:absolute;
left:0;
width:70px;
height:70px;
background-color:rgba(0, 0, 0, .4);
border:1px solid #20b09f;
border-right:none;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
#left_service .wyz-item-block:nth-child(1){
top:50px;
}
#left_service .wyz-item-block:nth-child(2){
top:128px;
}
#left_service .wyz-item-block:nth-child(3){
top:206px;
}
#left_service .wyz-item-block:nth-child(4){
top:284px;
}
#left_service .wyz-item-block:nth-child(5){
top:362px;
}
#left_service .wyz-item{
width:100%;
height:100%;
}
#left_service .wyz-item-p{
color:#fff;
font-size:12px;
margin-top:5px;
}
#left_service .wyz-item-in{
height:100%;
display:none;
position:relative;
z-index:1;
overflow:hidden;
}
#left_service .wyz-item-in-p{
color:#fff;
text-align:center;
line-height:68px;
height:68px;
white-space:nowrap;
}
#left_service .wyz-in.cur{
width:120px;
background-color:transparent;
}
#left_service .wyz-in.cur .wyz-item-in{
width:100%;
display:block;
}
#left_service .wyz-in.cur .wyz-item{
display:none;
}
#left_service .wyz-in:before{
content:"";
background-color:rgba(32, 176, 159, .8);
position:absolute;
height:100%;
width:0;
-webkit-transition:all .8s ease;
-o-transition:all .8s ease;
-moz-transition:all .8s ease;
transition:all .8s ease;
}
#left_service .wyz-in.cur:before{
width:100%;
}
#left_service .wyz-item-block.wyz-top{
display:none;
cursor:pointer;
width:46px;
height:46px;
top:480px;
}
#left_service .wyz-item-block.wyz-top .wyz-item-p{
font-size:14px;
margin-top:0;
}
#left_service .wyz-in.wyz-search.cur{
border-left:none;
}
#left_service .wyz-form{
position:absolute;
width:0;
right:156px;
bottom:-1px;
z-index:999;
overflow:hidden;
opacity:0;
}
#left_service .wyz-form .cf-form{
background-color:rgba(32, 176, 159, .8);
-moz-box-sizing:border-box;
box-sizing:border-box;
padding:10px 20px 20px;
border-bottom:1px solid #20b09f;
}
#left_service .wyz-form .cf-form-item{
margin-bottom:10px;
font-size:0;
white-space:nowrap;
}
#left_service .wyz-form .cf-form-item:last-of-type{
margin:0;
}
#left_service .wyz-form input{
padding:0 8px;
margin:0;
border:none;
-moz-box-sizing:border-box;
box-sizing:border-box;
width:160px;
height:28px;
line-height:28px;
font-size:12px;
display:inline-block;
vertical-align:middle;
background-color:#fff;
}
#left_service .wyz-form .verify{
width:86px;
margin-right:5px;
}
#left_service .wyz-form .submit{
width:160px;
height:28px;
line-height:28px;
font-size:14px;
}
#left_service .wyz-qr-show{
position:absolute;
z-index:1;
border:1px solid rgba(32, 176, 159, .8);
left:100%;
top:-61px;
}
#left_service .flex-col{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}