@keyframes mymove {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}


#navBar{ transition: all 0.5s; position:fixed;right:4vw;left:inherit !important;top:50%; transform: translateY(-50%); z-index:200;width:50px !important; height: auto; }
.btn { width: 30px; height: 30px; margin: 0 auto; padding: 0; border:double 10px #fdca31; border-radius: 50%; position: fixed; top:50%; transform: translateY(-342px); right: 4vw; z-index: 200; }
.btn span {  display: block; width: 30px; height: 30px; line-height: 30px; text-align: center; background: #fdca31; color: #fff; border-radius: 50%;}

#navBar.close { height: 0 !important; overflow: hidden;}

#navBar li{display:block; cursor: pointer; width:50px; height:50px; background:none; opacity:1; margin:30px 0 !important; position:relative; transition:ease .65s;}
#navBar li i{display:block; width:50px; height:50px; border-radius:50%; overflow: hidden; border:2px solid #fdca31; text-align:center; line-height:50px; color:#fdca31; font-size:24px; position:relative; z-index:5; transition:ease .65s;}
#navBar li:before{content:'';display:block;width:1px;height:20px;position:absolute;left:50%;top:-25px;background:#fdca31;}
#navBar li:last-child:after{content:''; display:block; width:1px; height:20px; position:absolute; left:50%; bottom:-25px; background:#fdca31;}
#navBar li span{display:block; width:0; height:30px; color:#fff; border-radius:30px; background:#fdca31; line-height:30px; position:absolute; right:68%; top:50%; margin-top:-15px; z-index:-1; transition:ease-in .65s;}
#navBar li.active i{ box-shadow:0 0 8px rgba(12,3,6,.38); transform:rotate(360deg);}
#navBar li.active i{color:#fff;}
#navBar li.active span{width:110px;transition-delay:.65s;}
#navBar li.active span:after{transition:ease .65s; }
#navBar li:nth-child(1) span:after{content:'米婶儿'; color:#fff; position:absolute; left:20px; top:0; opacity:0;transform:translateX(100%);}
#navBar li:nth-child(2) span:after{content:'米之道'; color:#fff; position:absolute; left:20px; top:0; opacity:0;transform:translateX(100%);}
#navBar li:nth-child(3) span:after{content:'米之语'; color:#fff; position:absolute; left:20px; top:0; opacity:0;transform:translateX(100%);}
#navBar li:nth-child(4) span:after{content:'米之品'; color:#fff; position:absolute; left:20px; top:0; opacity:0;transform:translateX(100%);}
#navBar li:nth-child(5) span:after{content:'米之道'; color:#fff; position:absolute; left:20px; top:0; opacity:0;transform:translateX(100%);}
#navBar li:nth-child(6) span:after{content:'米之缘'; color:#fff; position:absolute; left:20px; top:0; opacity:0;transform:translateX(100%);}
#navBar li:nth-child(7) span:after{content:'米之神'; color:#fff; position:absolute; left:20px; top:0; opacity:0;transform:translateX(100%);}
#navBar li.active span:after{opacity:1; transition-delay:1.3s;transform:translateX(0);}

#navBar li:nth-child(1) i { background: url(../images/index/i1.png) center no-repeat; }
#navBar li:nth-child(2) i { background: url(../images/index/i2.png) center no-repeat; }
#navBar li:nth-child(3) i { background: url(../images/index/i3.png) center no-repeat; }
#navBar li:nth-child(4) i { background: url(../images/index/i4.png) center no-repeat; }
#navBar li:nth-child(5) i { background: url(../images/index/i5.png) center no-repeat; }
#navBar li:nth-child(6) i { background: url(../images/index/i6.png) center no-repeat; }
#navBar li:nth-child(7) i { background: url(../images/index/i7.png) center no-repeat; }

#navBar li.active:nth-child(1) i { background: url(../images/index/i11.png) center no-repeat #fdca31; }
#navBar li.active:nth-child(2) i { background: url(../images/index/i22.png) center no-repeat #fdca31; }
#navBar li.active:nth-child(3) i { background: url(../images/index/i33.png) center no-repeat #fdca31; }
#navBar li.active:nth-child(4) i { background: url(../images/index/i44.png) center no-repeat #fdca31; }
#navBar li.active:nth-child(5) i { background: url(../images/index/i55.png) center no-repeat #fdca31; }
#navBar li.active:nth-child(6) i { background: url(../images/index/i66.png) center no-repeat #fdca31; }
#navBar li.active:nth-child(7) i { background: url(../images/index/i77.png) center no-repeat #fdca31; }