li { list-style:none; } body,ul,li,span,label { margin:0; padding:0; } .ac-gn-content { padding:0; position:absolute; top:0; width:100%; height:100%; } .ac-gn-header { position:absolute; z-index:3; top:0; left:0; width:100%; height:48px; overflow:hidden; display:block; } .ac-gn-item { height:48px; } .logo-m { position:absolute; width:100px; top:0; left:10%; margin-left:-24px; text-align:center; z-index:1; } .logo-m a { display:block; line-height:48px; } .logo-m img { width:100%; } .ac-gn-menuicon-bread-top { webkit-transition:-webkit-transform 0.25s cubic-bezier(0.4,0.01,0.165,0.99); transition:-webkit-transform 0.25s cubic-bezier(0.4,0.01,0.165,0.99); transition:transform 0.25s cubic-bezier(0.4,0.01,0.165,0.99); transition:transform 0.25s cubic-bezier(0.4,0.01,0.165,0.99),-webkit-transform 0.25s cubic-bezier(0.4,0.01,0.165,0.99); -webkit-transform:rotate(0); -ms-transform:rotate(0); transform:rotate(0); z-index:4; } .ac-gn-menuicon-bread { position:absolute; z-index:3; top:0; left:0; width:48px; height:48px; -webkit-transition:opacity 0.2s cubic-bezier(0.645,0.045,0.355,1); transition:opacity 0.2s cubic-bezier(0.645,0.045,0.355,1); } .ac-gn-menuicon-bread-bottom { webkit-transition:-webkit-transform 0.25s cubic-bezier(0.4,0.01,0.165,0.99); transition:-webkit-transform 0.25s cubic-bezier(0.4,0.01,0.165,0.99); transition:transform 0.25s cubic-bezier(0.4,0.01,0.165,0.99); transition:transform 0.25s cubic-bezier(0.4,0.01,0.165,0.99),-webkit-transform 0.25s cubic-bezier(0.4,0.01,0.165,0.99); -webkit-transform:rotate(0); -ms-transform:rotate(0); transform:rotate(0); } .ac-gn-menuicon-bread-crust { display:block; width:17px; height:1px; background:#fff; position:absolute; left:16px; z-index:1; -webkit-transition:-webkit-transform 0.2s; transition:-webkit-transform 0.2s; transition:transform 0.2s; transition:transform 0.2s,-webkit-transform 0.2s; } .ac-gn-menuicon { right:0; position:absolute; z-index:2; top:0; width:48px; border-bottom:none; } nav { position:absolute; top:0; right:0; left:0; z-index:9999; display:block; margin:0; width:100%; min-width:320px; height:48px; background:#333; background:rgba(0,0,0,0.8); font-size:17px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); } .check { height:100%; background:#000; -webkit-transition:background 0.35s linear,height 0.35s ease-in 200ms; transition:background 0.35s linear,height 0.35s ease-in 200ms; } nav { max-height:none; -webkit-transition:background 0.35s linear,height 0.35s ease-in; transition:background 0.35s linear,height 0.35s ease-in; } .check .ac-gn-menuicon-label { webkit-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg); display:block; position:absolute; z-index:3; top:0; width:48px; height:48px; cursor:pointer; -webkit-transition:opacity 0.2s cubic-bezier(0.645,0.045,0.355,1),-webkit-transform 0.4s cubic-bezier(0.4,0.01,0.165,0.99); transition:opacity 0.2s cubic-bezier(0.645,0.045,0.355,1),-webkit-transform 0.4s cubic-bezier(0.4,0.01,0.165,0.99); transition:opacity 0.2s cubic-bezier(0.645,0.045,0.355,1),transform 0.4s cubic-bezier(0.4,0.01,0.165,0.99); transition:opacity 0.2s cubic-bezier(0.645,0.045,0.355,1),transform 0.4s cubic-bezier(0.4,0.01,0.165,0.99),-webkit-transform 0.4s cubic-bezier(0.4,0.01,0.165,0.99); -webkit-tap-highlight-color:transparent; } .ac-gn-menuicon-label { opacity:1; -webkit-transition:-webkit-transform 0.4s cubic-bezier(0.4,0.01,0.165,0.99); transition:-webkit-transform 0.4s cubic-bezier(0.4,0.01,0.165,0.99); transition:transform 0.4s cubic-bezier(0.4,0.01,0.165,0.99); transition:transform 0.4s cubic-bezier(0.4,0.01,0.165,0.99),-webkit-transform 0.4s cubic-bezier(0.4,0.01,0.165,0.99); display:block; position:absolute; z-index:3; top:0; width:48px; height:48px; cursor:pointer; -webkit-transition:opacity 0.2s cubic-bezier(0.645,0.045,0.355,1),-webkit-transform 0.4s cubic-bezier(0.4,0.01,0.165,0.99); transition:opacity 0.2s cubic-bezier(0.645,0.045,0.355,1),-webkit-transform 0.4s cubic-bezier(0.4,0.01,0.165,0.99); transition:opacity 0.2s cubic-bezier(0.645,0.045,0.355,1),transform 0.4s cubic-bezier(0.4,0.01,0.165,0.99); transition:opacity 0.2s cubic-bezier(0.645,0.045,0.355,1),transform 0.4s cubic-bezier(0.4,0.01,0.165,0.99),-webkit-transform 0.4s cubic-bezier(0.4,0.01,0.165,0.99); -webkit-tap-highlight-color:transparent; } .check .ac-gn-menuicon-bread-top { webkit-transition:-webkit-transform 0.25s 0.2s cubic-bezier(0.4,0.01,0.165,0.99); transition:-webkit-transform 0.25s 0.2s cubic-bezier(0.4,0.01,0.165,0.99); transition:transform 0.25s 0.2s cubic-bezier(0.4,0.01,0.165,0.99); transition:transform 0.25s 0.2s cubic-bezier(0.4,0.01,0.165,0.99),-webkit-transform 0.25s 0.2s cubic-bezier(0.4,0.01,0.165,0.99); -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); } .check .ac-gn-menuicon-bread-crust-top { webkit-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0); -webkit-transition-delay:0; transition-delay:0; } .check .ac-gn-menuicon-bread-crust-bottom { webkit-transition:-webkit-transform 0.2s; transition:-webkit-transform 0.2s; transition:transform 0.2s; transition:transform 0.2s,-webkit-transform 0.2s; -webkit-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0); } .check .ac-gn-menuicon-bread-bottom { webkit-transition:-webkit-transform 0.25s 0.2s cubic-bezier(0.4,0.01,0.165,0.99); transition:-webkit-transform 0.25s 0.2s cubic-bezier(0.4,0.01,0.165,0.99); transition:transform 0.25s 0.2s cubic-bezier(0.4,0.01,0.165,0.99); transition:transform 0.25s 0.2s cubic-bezier(0.4,0.01,0.165,0.99),-webkit-transform 0.25s 0.2s cubic-bezier(0.4,0.01,0.165,0.99); -webkit-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg); } .ac-gn-menuicon-bread-crust-top { top:23px; -webkit-transition:-webkit-transform 0.2s 0.2s; transition:-webkit-transform 0.2s 0.2s; transition:transform 0.2s 0.2s; transition:transform 0.2s 0.2s,-webkit-transform 0.2s 0.2s; -webkit-transform:translateY(-3px); -ms-transform:translateY(-3px); transform:translateY(-3px); } .ac-gn-menuicon-bread-crust-bottom { bottom:23px; -webkit-transform:translateY(3px); -ms-transform:translateY(3px); transform:translateY(3px); }