﻿@charset "utf-8";

.new-footer-nav{position: fixed; bottom: 0; z-index:9999; min-width: 320px;width: 100%; max-width: 640px; height:60px; padding-top: 15px; margin: 0 auto; }
.new-footer-nav ul{height: 60px;background-color:#006464;}
.new-footer-nav li{float: left;position: relative;width: 20%; height: 60px;  box-sizing:border-box;}
.new-footer-nav li:nth-child(1),.new-footer-nav li:nth-child(4){border-right: 1px solid #fff;}
.new-footer-nav li a{width: 100%; height: 100%;display: block;font-family: '微软雅黑';}
.new-footer-nav li span{width:34px;height:34px;display: block;margin: 0 auto;}
.new-footer-nav li img{width: 100%; display: block;}
.new-footer-nav li p{font-size: 14px; line-height: 24px;color: #fff; text-align: center;}
.new-footer-nav li .ty{position: absolute; top:-1px; left: 50%; margin-left: -19px; z-index: 2; width: 38px; height: 30px;animation: bounce 2s infinite; -webkit-animation: bounce 2s infinite;}
.new-footer-nav li .ty img{width: 38px; height: 30px; display: block;}
.new-footer-nav li .ty em{position: absolute;left: 50%;margin-left:34%;top:5px;z-index: 3;width: 32px;height: 20px;background: #ff0000;border-radius:4px; color: #fff; font-size: 12px; line-height: 20px; text-align: center;}
.new-footer-nav li .zixun{position: absolute;bottom: 0; left:50%; margin-left: -49px;  width: 98px; height: 75px;}

.new-footer-nav li a.active{background-color:#023c3c;}
.new-foot-subCon{position:absolute;left:0;top:0;width:120px;height:0;overflow:hidden;}
.new-foot-subCon .foot-subNav{width: 100%; height:170px; background-color:#4d4d4d;}
.new-foot-subCon .foot-subNav a{width:80%;height:32px;margin:0 auto;display:block;border-bottom:1px solid #808080;color:#fff;font-size:12px;line-height:32px;text-align:center;}
.new-foot-subCon i{position: absolute; bottom:0; left: 50%; margin-left: -8px; width: 0;height: 0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:10px solid #4d4d4d; display: none;}

@media screen and (min-width:360px){
    .new-footer-nav li p{font-size: 16px;}
}
@-webkit-keyframes bounce {
  0%{
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: scale(0.5) translate3d(0,100px,0);
            transform: scale(0.5) translate3d(0,100px,0);
  }

  50% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -6px, 0);
            transform: translate3d(0, -6px, 0);
  }

  75% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0, 2px, 0);
            transform: translate3d(0, 2px, 0);
  }

  100% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: scale(1) translate3d(0,0,0);
            transform: scale(1) translate3d(0,0,0);
  }
}
@keyframes bounce {
  0%{
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: scale(0.5) translate3d(0,100px,0);
            transform: scale(0.5) translate3d(0,100px,0);
    
  }

  50% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -6px, 0);
            transform: translate3d(0, -6px, 0);
  }

  75% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0, 2px, 0);
            transform: translate3d(0, 2px, 0);
  }

  100% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: scale(1) translate3d(0,0,0);
            transform: scale(1) translate3d(0,0,0);
  }
}
