@charset "utf-8";/* CSS Document *//** * Navigation */.nav{position: fixed; top: 0; left: 0; width: 100%; z-index: 10000; background-color: #efefef;}/** * Nav container * 1. Ensure this slides in below parent* 2. Hide by default* 3. Smoother scrolling experience on iOS*/.nav-container{position: fixed; top: 50px; /* 1 */ left: 0; z-index: 9999; overflow-y: auto; visibility: hidden; /* 2 */ width: 100%; height: 100%; /*min-height: 100%;--無法滑到底的原因*/ overflow:auto; margin: 0; padding: 0; -webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); /* 2 */ background-color: #333333; -webkit-overflow-scrolling: touch; /* 3 */}/* 1. Show when `.is-visible` class is added */.nav-container.is-visible{visibility: visible; /* 1 */ -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); /* 1 */}/* Nav toggle */.nav-toggle{position:absolute; line-height: 1; display: inline-block; padding:15px; border: 0; top:0px;}/* Nav toggle icon */.nav-toggle .icon-menu{position: relative; display: inline-block; width: 28px; height: 20px; vertical-align: middle; fill: none;}/* Nav toggle icon lines */.icon-menu .line{position: absolute; left: 0; display: block; width: 100%; height: 4px; -webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1.000); -webkit-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000); transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000); background-color: #fff;}/* Nav toggle icon line 1 */.icon-menu .line-1{top: 0;}/* When active, rotate line 1 to be lefthand part of X */.is-active .icon-menu .line-1{-webkit-transform: translateY(8px) translateX(0) rotate(45deg); -ms-transform: translateY(8px) translateX(0) rotate(45deg); transform: translateY(8px) translateX(0) rotate(45deg);}/* Nav toggle icon line 2 */.icon-menu .line-2{top: 50%; margin-top: -2px;}/* When active, hide line 2 */.is-active .icon-menu .line-2{opacity: 0;}/* Nav toggle icon line 3 */.icon-menu .line-3{bottom: 0;}/* When active, rotate line 3 to be righthand part of X */.is-active .icon-menu .line-3{-webkit-transform: translateY(-8px) translateX(0) rotate(-45deg); -ms-transform: translateY(-8px) translateX(0) rotate(-45deg); transform: translateY(-8px) translateX(0) rotate(-45deg);}/* Remove default list styles for menus */.menu{list-style: none; margin: 0; padding: 0;}/** * 1. Give menu a lighter background than its container * 2. Prevent menu text from being accidentally highlighted*/.nav-menu{background-color: #333333; /* 1 */ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; /* 2 */}/* Give menu items a top border */.nav-menu .menu-item{border-bottom: 1px solid #434343; color: #ffffff;}/* Give last menu item a bottom border */.nav-menu > .menu-item:last-child{border-bottom: 1px solid #434343;}/* Darker background color on hover, and when toggled */.nav-menu > .menu-item:hover,.nav-menu > .menu-item.is-active{background-color: #5e5e5e;}/* 1. Menu links are block level, by default */.nav-menu .menu-link{display: block; text-decoration: none; color: #ffffff; padding: 1.5rem 1rem;}.nav-menu .menu-link span{margin-right:5px;vertical-align: text-bottom;}/* 1. Menu items with dropdowns appear clickable */.has-dropdown{position: relative; cursor: pointer; /* 1 */}/* 1. Parent menu links inlined so you can toggle the dropdown */.has-dropdown > .menu-link{display: inline-block;}/* 1. Add an icon to menu items that have sub menus */.has-dropdown:after{font-size: 24px; position: absolute; top: 14px; right: 1rem; bottom: 0; content: "+"; color: #ffffff; z-index: 1;}/* 1. Switch icon to n-dash when toggled */.has-dropdown.is-active:after{content: "\2013"; /* 1 */}/** * Dropdowns * 1. Hide dropdowns by default */.nav-dropdown{display: none; /* 1 */ background-color: #949494;}/* 1. Show dropdown when toggled */.has-dropdown.is-active > .nav-dropdown{display: block; /* 1 */}/* 2nd level dropdown */.nav-dropdown .nav-dropdown{background-color: #aaa;}.nav-dropdown .menu-item{border-color: #bcbcbc;}.nav-dropdown .nav-dropdown .menu-item{background-color: #c6c6c6; border-color: #909090; color:#333333;}/* Main content area */.content{margin-top: 60px;}.content .wrapper{padding: 1rem 0;} @media (min-width: 2000px){.nav{background-color: #dedede;}.nav, .nav-container, .nav-container.is-visible{position: static; top: auto; left: auto; z-index: auto; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);}.nav-container, .nav-container.is-visible{visibility: visible; height: auto; min-height: 0; overflow-y: visible;}/*.nav-toggle{display: none;}*//* 1. Display menu items inline */.nav-menu > .menu-item, .nav-menu > .menu-item.is-active{display: inline-block; /* 1 */ background-color: transparent; border: 0;}/* Remove bottom border on last child */.nav-menu > .menu-item:last-child{border: 0;}.nav-menu .menu-item{-webkit-transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out; transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;}/* Remove +/- icons */.has-dropdown:after{content: "" !important;}/* Add a caret to top-level menu items that have dropdowns */.nav-menu > .has-dropdown:after{position: absolute; top: 50%; right: 1rem; width: 0; height: 0; margin-top: -2px; margin-left: -4px; content: ""; border-width: 5px 5px 0 5px; border-style: solid; border-color: #ffffff transparent transparent transparent;}/* Increase padding to compensate for caret */.has-dropdown > .menu-link{padding-right: 2rem;}/* Re-style dropdowns for larger screens */.nav-dropdown{display: block; opacity: 0; position: absolute; top: 100%; width: 200px; margin: 0; padding: 0.5rem 0; background-color: #dedede; box-shadow: 0 0 4px hsla(0, 0%, 0%, 0.15); visibility: hidden; -webkit-transition: visibility 0s linear 0.25s, opacity 0.25s linear; transition: visibility 0s linear 0.25s, opacity 0.25s linear;}.has-dropdown:hover > .nav-dropdown{visibility: visible; opacity: 1; -webkit-transition-delay: 0s; transition-delay: 0s;}.nav-dropdown .menu-item{border: 0;}.nav-dropdown .menu-item:hover, .nav-dropdown .nav-dropdown .menu-item:hover{background-color: #d0d0d0;}.nav-dropdown .nav-dropdown, .nav-dropdown .nav-dropdown .menu-item{background-color: #dedede;}.nav-dropdown .nav-dropdown{z-index: 9998; top: 0; left: 100%;}.content{margin-top: 0;}}