@charset "utf-8";
/* CSS Document */

#elevator_item {
width: 112px;
height: 24px;
position: absolute;
left: 50%;
top: -45px;
margin:0 0 0 -56px ;
-webkit-transition: opacity .4s ease-in-out;
-moz-transition: opacity .4s ease-in-out;
-o-transition: opacity .4s ease-in-out;
opacity: 1;
z-index: 1;
}
#elevator_item.off {
opacity: 0;
visibility: hidden
}
#elevator {
display: block;
width: 112px;
height: 24px;
background:url(../images/aroowTop.png) no-repeat center bottom #16776b;
border-radius: 5px 5px 0 0;
cursor: pointer;
margin: 0;
animation:eleBacRet 0.5s;

}
#elevator:hover {
background :url(../images/aroowTop.png) no-repeat center bottom #0a5d53;
animation:eleBac 1s;
}
@keyframes eleBac{
0%{background:url(../images/aroowTop.png) no-repeat center bottom #16776b;}
100%{background :url(../images/aroowTop.png) no-repeat center bottom #0a5d53;}	
}
@keyframes eleBacRet{
0%{background:url(../images/aroowTop.png) no-repeat center bottom #0a5d53;}
100%{background :url(../images/aroowTop.png) no-repeat center bottom #16776b;}	
}
#elevator:active {
background-color: rgba(0,0,0,.75)
}
#elevator_item .qr {
display: block;
width: 60px;
height: 40px;
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0,0,0,.2);
cursor: pointer;
background: url(img/icon_code.png) center center no-repeat;
background-color: #444;
background-color: rgba(0,0,0,.6)
}
#elevator_item .qr:hover {
background-color: rgba(0,0,0,.7)
}
#elevator_item .qr:active {
background-color: rgba(0,0,0,.75)
}
#elevator_item .qr-popup {
width: 170px;
height: 200px;
background: #fff;
box-shadow: 0 1px 8px rgba(0,0,0,.1);
position: absolute;
left: -180px;
bottom: 0;
border-radius: 2px;
display: none;
text-align: center
}
#elevator_item .qr-popup .code-link {
display: block;
margin: 10px;
color: #777
}
#elevator_item .qr-popup .code {
display: block;
margin-bottom: 10px
}
#elevator_item .qr-popup .arr {
width: 6px;
height: 11px;
background: url(img/code_arrow.png) 0 0 no-repeat;
position: absolute;
right: -6px;
bottom: 14px
}