/* CSS Document */ .phone_dh { display: none; position: fixed; top: 0px; left: 0px; height: 60px; width: 100%; z-index: 101; background: rgba(0, 0, 0, 0.5); } .phone_dh_img { height: 100%; box-sizing: border-box; padding: 17px 0px; float: left; padding-left: 15px; } .phone_dh_img img { height: 100%; } .phone-header { margin-top: 20px; } .phone-header-box { top: 0; left: 0; z-index: 999; } .phone-header h1 { line-height: 20px; margin: 0 0 0 15px; } .phone-header .menu-push { width: 25px; height: 36px; display: inline-block; z-index: 999; } .phone-header .menu-push.fixed { position: fixed; background: rgba(255, 255, 255, .8); } .phone-header .menu-push.fixed.menu-open { width: 100%; background: rgba(255, 255, 255, 1); } .phone-header .menu-push .push-line { float: right; width: 25px; height: 25px; } .phone-header .menu-push .line { display: block; width: 25px; height: 3px; margin-bottom: 5px; background: #333; overflow: hidden; transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); -moz-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); -o-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); } .phone-header .menu-push .line-2 { margin-left: 5px; } .phone-header .menu-push.menu-open {} .phone-header .menu-push.menu-open .line { background: #333; } .phone-header .menu-push.menu-open .line-1 { width: 25px; transform: translate(0px, 8px) rotate(45deg); -webkit-transform: translate(0px, 8px) rotate(45deg); -moz-transform: translate(0px, 8px) rotate(45deg); -o-transform: translate(0px, 8px) rotate(45deg); } .phone-header .menu-push.menu-open .line-2 { width: 0px; transform: translateX(27px); -webkit-transform: translateX(27px); -moz-transform: translateX(27px); -o-transform: translateX(27px); } .phone-header .menu-push.menu-open .line-3 { width: 25px; transform: translate(0px, -8px) rotate(-45deg); -webkit-transform: translate(0px, -8px) rotate(-45deg); -moz-transform: translate(0px, -8px) rotate(-45deg); -o-transform: translate(0px, -8px) rotate(-45deg); } .phone-header .menu-list { position: fixed; background:#fff; box-sizing: border-box; padding: 10px; left: 0; overflow-y: auto; top: 60px; width: 100%; height: calc(100% - 98px); z-index: 1000; display: none; }