.nav-menu{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    float: left;
    margin: 0;
    padding: 0;
    font-size: 1.6rem;
    font-weight: 400;
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    -o-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    transform: rotateX(180deg);
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    z-index: 1;
    border-left: 1px solid #fff;
}

.nav-menu li{
    line-height: 0;
    text-align: center;
    list-style: none;
}

.choose-menu{
  width: 33.33333333%;
  padding-bottom: 33.33333333%;
  visibility: hidden;
  background-color: #484949;
  position: relative;
  float: left;
  opacity: 1;
  -webkit-transform: scale(.5);
  -moz-transform: scale(.5);
  -o-transform: scale(.5);
  -ms-transform: scale(.5);
  transform: scale(.5);
      -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.choose-menu div, .choose-menu div:after, .choose-menu div:before{
    color: transparent;
    height: 8%;
    background: #fff;
    border-radius: 20px;
}

.choose-menu div{
    font-size: 0;
    position: absolute;
    top: 50%;
    margin: -5% 0 0 -30%;
    width: 60%;
    left: 50%;
}

.choose-menu div:after, .choose-menu div:before{
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: -260%;
}

.choose-menu div:after{
    top:260%;
}

.choose-menu div:before{

}

/*.nav-menu li:nth-child(1){
    border:none;
}
.nav-menu li:nth-child(2), .nav-menu li:nth-child(3), .nav-menu li:nth-child(4), .nav-menu li:nth-child(5), .nav-menu li:nth-child(6), .nav-menu li:nth-child(7) {
    border-right:1px solid #fff;
    border-top:1px solid #fff; 
}*/

/*.nav-menu li{
    border-left:1px solid #fff;
    border-top:1px solid #fff; 
}*/

.list-menu{
    position: relative;
    width: 33.33333333%;
    padding-bottom: 33.33333333%;
    float: left;
    color: #fff;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: rotateX(180deg) translateY(-250px) translateZ(0);
    -moz-transform: rotateX(180deg) translateY(-250px) translateZ(0);
    -o-transform: rotateX(180deg) translateY(-250px) translateZ(0);
    -ms-transform: rotateX(180deg) translateY(-250px) translateZ(0);
    transform: rotateX(180deg) translateY(-250px) translateZ(0);
    transition: all .5s;
}

.list-num-1{
    transition: all .3s;
}

.list-num-2{
    transition: all .4s;
}

.list-num-3{
    transition: all .5s;
}

.list-num-4{
    transition: all .6s;
}

.list-num-5{
    transition: all .7s;
}

.list-num-6{
    transition: all .8s;
}

.list-menu a{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    color: inherit;
    text-decoration: none;
    padding-top: 50%;
    line-height: 0;
    white-space: nowrap;
    font-size: 20px;
}

.nav-menu li{
    border-right: 1px solid #fff;
    border-top:1px solid #fff;
}

@media  screen and (max-width: 500px){
  .choose-menu{
    visibility: visible;

  }
  .nav-menu-position{
    margin-bottom: 200%;
  }
  .choose-menu-position{
    margin-top: -200%;
  }
  .nav-menu-layer{
    z-index: 9;
  }
}

/**********nav-menu*************/


.extra-menu{
    float: left;
    margin: 0;
    padding: 0;
    font-size: 1.6rem;
    font-weight: 400;
    z-index: 1;
    width: 100%;
    position: fixed;
    top: 100%;
    left: 0;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    border-bottom: 1px solid #fff;
    border-right:1px solid #fff;
}
.extra-menu li{
    line-height: 0;
    text-align: center;
    list-style: none;
}

.extra-list{
    background-color:#ADADAD;;
    float: left;
    -webkit-transform: translateY(0) rotate(180deg);
    -moz-transform: translateY(0) rotate(180deg);
    -o-transform: translateY(0) rotate(180deg);
    -ms-transform: translateY(0) rotate(180deg);
    transform: translateY(0) rotate(180deg);
    color: #403e3f;
    text-align: center;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    position: relative;
    width: 33.33333333%;
    padding-bottom: 33.33333333%;
    color: #fff;
    opacity: 0;
    visibility: hidden;
}

.extra-menu li{
    border-left:1px solid #fff;
    border-top:1px solid #fff; 
}

.extra-list a{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    color: inherit;
    text-decoration: none;
    padding-top: 50%;
    line-height: 0;
    white-space: nowrap;
    font-size: 20px;
}

/**********extra-menu*************/


.menu-open{
    -webkit-transform: scale(1) ;
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);

}


.menu-close-open div{
   background: 0 0;
}

.menu-close-open div:before{
    top: 0;
    left: 0;
    right: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 100%;
    -webkit-transition: top .1s,-webkit-transform .1s .2s;
    -moz-transition: top .1s,-moz-transform .1s .2s;
    -o-transition: top .1s,-o-transform .1s .2s;
    transition: top .1s,-webkit-transform .1s .2s,-moz-transform .1s .2s,-o-transform .1s .2s,transform .1s .2s;
}

.menu-close-open div:after{
    top: 0;
    left: 0;
    right: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 100%;
    -webkit-transition: top .1s,-webkit-transform .1s .2s;
    -moz-transition: top .1s,-moz-transform .1s .2s;
    -o-transition: top .1s,-o-transform .1s .2s;
    transition: top .1s,-webkit-transform .1s .2s,-moz-transform .1s .2s,-o-transform .1s .2s,transform .1s .2s;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.list-menu-open{
    -webkit-transform: translateY(0) rotateX(180deg);
    -moz-transform: translateY(0) rotateX(180deg);
    -o-transform: translateY(0) rotateX(180deg);
    -ms-transform: translateY(0) rotateX(180deg);
    transform: translateY(0) rotateX(180deg);
    opacity: 1;
    visibility: visible;

}

.list-menu-border li{

}

.list-menu-border li:nth-child(1){
    border-bottom: none;
    border-left: none;
    border-right: 1px solid #fff;
    border-top: none;
}
/**********choose-menu-click*************/

.more-feature-close{
    width: 0;
    padding: 0;
  display: none;
  border-right:none !important;
  border-left:none !important;
  border-top:none !important;
  border-bottom:none !important;
  border:none !important;
}

.menu-next-space{
    margin-bottom: 66.352%;

}
.menu-next-space li{
    width: 33.33333333%;
    padding-bottom: 33.33333333%;
    border-right: 1px solid #fff;
    border-top: 1px solid #fff;
}
.menu-next-space li:nth-child(1){

}
.extra-menu-open{
    margin-top: -66.352%;
}

.extra-list-open{
    opacity: 1;
    visibility: visible;
}
.extra-list-adjust{
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}

/**********more-feature-click*************/


@media  screen and (min-width: 501px){
    .nav-menu, .extra-menu{
        display: none;
    }
}