/* 右侧固定导航 */
.right-sidebar {
position: fixed;
top: 50%;
right: 10px;
transform: translateY(-50%);
border-radius: 5px;
z-index: 15;
}
.right-sidebar ul li {
position: relative;
width: 55px;
height: 58px;
border-top: 1px solid #484848;
border-bottom: 1px solid #2b2b2b;
color: #fff;
}
.right-sidebar ul li:nth-child(1) {
background: #3e3e3e url("../images/right-sidebar.png") no-repeat -5px -20px;
border-top: none;
border-radius: 5px 5px 0 0;
}
.right-sidebar ul li:nth-child(2) {
display: none;
background: #3e3e3e url("../images/right-sidebar.png") no-repeat -5px -80px;
}
.right-sidebar ul li:nth-child(3) {
background: #3e3e3e url("../images/right-sidebar.png") no-repeat -5px -140px;
}
.right-sidebar ul li:nth-child(3) a {
display: block;
width: 100%;
height: 100%;
}
.right-sidebar ul li:nth-child(4) {
text-align: center;
background: #3e3e3e url("../images/right-sidebar.png") no-repeat -5px -200px;
}
.right-sidebar ul li:nth-child(4) span,
.right-sidebar ul li:nth-child(5) span {
line-height: 58px;
font-size: 20px;
opacity: 0;
}
.right-sidebar ul li:nth-child(4):hover,
.right-sidebar ul li:nth-child(5):hover {
background: #e65f25;
}
.right-sidebar ul li:nth-child(4):hover span,
.right-sidebar ul li:nth-child(5):hover span {
opacity: 1;
}
.right-sidebar ul li:nth-child(5) {
text-align: center;
background: #3e3e3e url("../images/right-sidebar.png") no-repeat -5px -257px;
border-bottom: none;
border-radius: 0 0 5px 5px;
}
.sidebar-phone,.sidebar-addr {
position: absolute;
top: -1px;
right: 0;
width: 210px;
height: 60px;
padding: 7px 20px;
box-sizing: border-box;
background-color: #e65f25;
border-radius: 5px 0 0 5px;
overflow: hidden;
opacity: 0;
visibility: hidden;
transition: 0.3s;
}
.sidebar-addr p {
font-size: 12px;
line-height: 20px;
}
.sidebar-addr p:nth-child(1) {
margin-top: 2px;
text-indent: 30px;
font-size: 12px;
line-height: 23px;
background: url("../images/addr.png") no-repeat -5px -8px/35px;
}
.sidebar-phone p:nth-child(2) {
text-indent: 30px;
font-size: 19px;
font-weight: 700;
background: url("../images/right-sidebar.png") no-repeat -10px -20px/45px;
}
.sidebar-weixin,.sidebar-weibo {
position: absolute;
top: 50%;
right: 70px;
width: 150px;
height: 150px;
padding: 7px;
box-sizing: border-box;
background-color: #fff;
margin-top: -55px;
border: 5px solid #e65f25;
border-radius: 10px;
overflow: hidden;
visibility: hidden;
opacity: 0;
transition: 0.3s;
}
.sidebar-weixin img,.sidebar-weibo img {
width: 100%;
}
.right-sidebar ul li:nth-child(4):after,
.right-sidebar ul li:nth-child(5):after{
content: "";
position: absolute;
top: 50%;
right: 58px;
margin-top: -6px;
border: 6px solid rgba(0,0,0,0);
border-left: 6px solid #e65f25;
opacity: 0;
visibility: hidden;
transition: 0.3s;
}
.right-sidebar ul li:hover {
background-color: #e65f25;
border-top: 1px solid #e65f25;
border-bottom: 1px solid #e65f25;
}
.right-sidebar ul li:nth-child(1):hover {
background-color: #e65f25;
border-top: none;
border-bottom: 1px solid #e65f25;
}
.right-sidebar ul li:nth-child(5):hover {
background-color: #e65f25;
border-bottom: none;
border-top: 1px solid #e65f25;
}
.right-sidebar ul li:nth-child(1):hover .sidebar-phone,
.right-sidebar ul li:nth-child(2):hover .sidebar-addr,
.right-sidebar ul li:nth-child(4):hover:after,
.right-sidebar ul li:nth-child(5):hover:after,
.right-sidebar ul li:nth-child(4):hover .sidebar-weixin,
.right-sidebar ul li:nth-child(5):hover .sidebar-weibo {
visibility: visible;
opacity: 1;
}
.right-sidebar .top-arrow {
display: block;
width: 55px;
height: 58px;
margin-top: 5px;
border-radius: 5px;
background: #e65f25 url("../images/right-sidebar.png") no-repeat -5px -325px;
opacity: 0;
filter:alpha(opacity=0);
-webkit-transition: 1s;
transition: 1s;
}