@charset "utf-8";
 @media (max-width:767px) {
#tabBar { position: fixed; left: 20px; bottom: 20px; z-index: 99; width: calc(100% - 40px); height: 50px; }
#tabBar.active { animation: tabBarAnimation 3s 1s infinite linear; }
#tabBar .clickbtn { position: absolute; right: 0; bottom: 0; z-index: 2; width: 50px; height: 50px; font-size: 0; line-height: 50px; background: rgba(255,255,255,0.8); border-radius: 50%; }
#tabBar .clickbtn span { display: block; position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; }
#tabBar .clickbtn img { width: 22px; margin: 15px 0; }
#tabBar .clickbtn.on { animation: clickbtnAnimation 10s 0s infinite linear; box-shadow: 0 3px 5px rgba(0,0,0,0.5); }
#tabBar .clickbtn.on:before { content: ""; position: absolute; left: 0; bottom: -5px; z-index: 1; width: 20px; height: 5px; }
#tabBar .clickbtn.active { background: url(../images/xian2.png) rgba(110,209,207,1); background-size: 100% 100%; }
#tabBar .clickbtn.active:before { content: ""; position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%; border: solid 1px rgba(255,255,255,0.2); border-radius: 50%; }
#tabBar .clickbtn.active > img { opacity: 0; }
#tabBar .clickbtn.active span { opacity: 1; }
#tabBar .navigation { position: absolute; left: calc(100% - 100px); bottom: 0; z-index: 1; width: 0; height: 50px; border-radius: 25px; transition: all 0.3s; }
#tabBar .navigation:before { content: ""; position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; border-radius: 25px; background: -moz-linear-gradient(left, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.6) 100%); background: -webkit-linear-gradient(left, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.6) 100%); background: linear-gradient(to right, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.6) 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccffffff', endColorstr='#99ffffff', GradientType=1 );
}
#tabBar .navigation ul { position: relative; z-index: 2; padding: 0 60px 0 20px; }
#tabBar .navigation ul li { width: calc(100% / 3); font-size: 0; }
#tabBar .navigation ul li a { position: relative; left: 10px; display: inline-block; vertical-align: top; line-height: 50px; opacity: 0; }
#tabBar .navigation ul li a .tab-icon { margin-right: 5px; }
#tabBar .navigation ul li a .tab-icon img { width: 22px; margin: 15px 0; }
#tabBar .navigation ul li a .tab-title { font-size: 12px; color: #333; }
#tabBar .navigation.active { box-shadow: 5px 5px 10px rgba(0,0,0,0.2); animation: navigationAnimation 0.5s 0s linear forwards; }
#tabBar .navigation.active ul li:nth-child(1) a { animation: navigationAAnimation 0.3s 0.5s linear forwards; }
#tabBar .navigation.active ul li:nth-child(2) a { animation: navigationAAnimation 0.3s 0.6s linear forwards; }
#tabBar .navigation.active ul li:nth-child(3) a { animation: navigationAAnimation 0.3s 0.7s linear forwards; }
 @keyframes tabBarAnimation {  0% {
transform:translate(0, 0);
}
 30% {
transform:translate(0, 5px);
}
 50% {
transform:translate(0, 0);
}
 70% {
transform:translate(0, -5px);
}
 100% {
transform:translate(0, 0);
}
}
 @keyframes navigationAnimation {  0% {
left:calc(100% - 100px);
width: 0;
}
 80% {
left: -10px;
width:100%;
}
 90% {
left:  5px;
width:100%;
}
 100% {
left: 0;
width:100%;
}
}
 @keyframes navigationAAnimation {  from {
left: -10px;
opacity: 0;
}
to { left: 0; opacity: 1; }
}
 @keyframes clickbtnAnimation {  0% {
transform: rotateY(0deg);
}
 10% {
transform: rotateY(270deg);
}
 15% {
transform: rotateY(180deg);
}
 30% {
transform: rotateY(0deg);
}
 100% {
transform: rotateY(0deg);
}
}
}