.nav-open .lower-screen { -webkit-transform: scale(0.8, 0.8); -ms-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); } .nav-open .nav { -webkit-transform: translateY(0); transform: translateY(0); } .nav-open .nav-toggle { box-shadow: none; } .nav-open .nav-toggle:before { width: 4000px; height: 4000px; background-color: rgba(74, 117, 230, 0.95); } .nav-open .nav-toggle .icon { width: 0; } .nav-open .nav-toggle .icon:before { -webkit-transform: translateY(9px) rotate(45deg); -ms-transform: translateY(9px) rotate(45deg); transform: translateY(9px) rotate(45deg); } .nav-open .nav-toggle .icon:after { -webkit-transform: translateY(-9px) rotate(-45deg); -ms-transform: translateY(-9px) rotate(-45deg); transform: translateY(-9px) rotate(-45deg); } .nav{ display: none; } .phone { display: none; position: fixed; top: 0; left: 0; z-index: 100; } .nav-open .nav{ display: block; } .nav-open .phone { position: fixed; bottom: 0; right: 0; z-index: 100; } .nav-toggle { width: 60px; height: 60px; z-index: 2; border-radius: 50%; margin: 10px; position: absolute; cursor: pointer; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2); -webkit-transition-duration: 0.66s; transition-duration: 0.66s; -webkit-transition-timing-function: swing; transition-timing-function: swing; } .nav-toggle:before { width: 60px; height: 60px; border-radius: 50%; background-color: #4A75E6; content: ""; position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -webkit-transition-duration: 0.66s; transition-duration: 0.66s; -webkit-transition-timing-function: swing; transition-timing-function: swing; } .nav-toggle .icon { width: 30px; height: 4px; background-color: white; border-radius: 2px; position: absolute; top: 28px; left: 15px; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; transiting-timing-function: swing; } .nav-toggle .icon:before, .nav-toggle .icon:after { width: 30px; height: 4px; background-color: white; border-radius: 2px; content: ""; position: absolute; left: 0; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: swing; transition-timing-function: swing; } .nav-toggle .icon:before { top: -9px; } .nav-toggle .icon:after { top: 9px; } .lower-screen { padding: 60px 0 20px 0; overflow-y: scroll; height: 450px; -webkit-transition-duration: 0.66s; transition-duration: 0.66s; -webkit-transition-timing-function: swing; transition-timing-function: swing; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .lower-screen::-webkit-scrollbar { display: none; } .card { width: 90%; margin-left: 5%; padding: 20px 20px 0 20px; background-color: white; border-radius: 5px; text-align: center; overflow: hidden; border-bottom: 3px solid rgba(0, 0, 0, 0.12); margin-bottom: 20px; } .card h2 { margin-bottom: 5px; } .card p { font-size: 14px; color: #666666; margin-bottom: 20px; } .card p a { text-decoration: none; color: #4A75E6; } .nav { position: absolute; box-sizing: border-box; top: 80px; left: 0; width: 100%; height: 100%; box-sizing: border-box; z-index: 9; padding: 0 20px; -webkit-transition-duration: 0.66s; transition-duration: 0.66s; -webkit-transition-timing-function: swing; transition-timing-function: swing; -webkit-transform: translateY(100%); transform: translateY(100%); } .nav ul li { list-style: none; } .nav ul li span, .nav ul li .pm-menu-item, .nav ul li .pm-menu-item ul li{ display: block; padding: 10px 0; text-align: center; text-decoration: none; font-size: 20px; color: white; -webkit-transition-duration: 0.25s; transition-duration: 0.25s; } .nav ul li .pm-menu-item ul li:last-child{ padding-bottom: 2rem; } .nav ul li span a, .nav ul li a, .nav ul li .pm-menu-item ul li a{ color: white; } .nav ul:hover li span, .nav ul:hover .pm-menu-item{ opacity: 0.5; } .nav ul:hover li:hover span, .nav ul:hover li:hover .pm-menu-item{ opacity: 1; } /* 瀛愯彍鍗曟帶鍒 */ .pm-menu-item{ width: 100%; position: absolute; right: 0; top: 0; transform: translateX(100%); transition: all 1s; } .pm-menu-item .pm-menu-scroll{ height: calc(100vh - 80px); overflow: hidden; overflow-y: scroll; margin-bottom: 40px; } .pm-menu-animate span{ transform: translateX(-100%); } .pm-menu-animate .pm-menu-animate .pm-menu-item{ transform: translateX(0); } /* 瀛愯彍鍗曟帶鍒 */ .pm-menu-item{ width: 100%; position: absolute; right: 0; top: 0; transform: translateX(100%); transition: all 1s; } .pm-menu-item .pm-menu-scroll{ height: calc(100vh - 80px); overflow: hidden; overflow-y: scroll; margin-bottom: 40px; } .pm-menu-animate span{ transform: translateX(-100%); } .pm-menu-animate .pm-menu-animate .pm-menu-item{ transform: translateX(0); } .mc-title-pages{ padding: 1.25rem 0; } .mc-title-pages span{ font-size: 1rem; font-weight: 400; color: #999999; } .mc-title-pages span a{ font-size: 1rem; font-weight: 400; color: #999999; }