@charset "utf-8"; /* -------------------------------- Primary style -------------------------------- */ html * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin:0; padding:0;list-style:none; text-decoration:none; } .overflow-hidden { overflow: hidden; } /* -------------------------------- Main components -------------------------------- */ .cd-main-content { /* set a min-height and a z-index to be sure that the main element completely covers the lateral menu */ min-height: 100%; position: relative; z-index: 2 !important; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; transition-duration: 0.4s; } .cd-main-content.lateral-menu-is-open { /* translate to show the lateral menu - all content needs to be put in the .cd-main-content to translate*/ -webkit-transform: translateX(-200px); -moz-transform: translateX(-200px); -ms-transform: translateX(-200px); -o-transform: translateX(-200px); transform: translateX(-200px); } header { position: fixed; top: 0; right: 0; height: auto; width: 100%; background: none; z-index: 3; -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; transition-duration: 0.4s; background-color: #fff; } header.lateral-menu-is-open { /* translate to show the lateral menu */ -webkit-transform: translateX(-200px); -moz-transform: translateX(-200px); -ms-transform: translateX(-200px); -o-transform: translateX(-200px); transform: translateX(-200px); } header.is-fixed { position: fixed; } @media only screen and (min-width: 768px) { header { height: auto; } } #cd-top-nav { position: absolute; top: 0; right: 120px; height: 100%; display: none; } #cd-top-nav ul { height: 100%; padding-top: 18px; } #cd-top-nav li { display: inline-block; margin-right: 1em; } #cd-top-nav a { display: inline-block; padding: .5em; color: #FFF; text-transform: uppercase; font-weight: 600; } #cd-top-nav a.current { background-color: #242e30; } .no-touch #cd-top-nav a:hover { color: rgba(255, 255, 255, 0.7); } @media only screen and (min-width: 768px) { #cd-top-nav { display: block; } } /*#cd-menu-trigger { position: absolute; right: 0; top: 0; height: 100%; width: 50px; z-index:9999999999999999; }*//*三条线*/ #cd-menu-trigger { position: absolute; right: 0; top: 0; height: 100%; width:60px; z-index:9999999999999999; } #cd-menu-trigger .cd-menu-text { height: 100%; text-transform: uppercase; color: #FFF; font-weight: 600; display: none; } /*#cd-menu-trigger .cd-menu-icon { display: inline-block; position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 30px; height: 2px; background-color: #FFF; }*//*三条线*/ #cd-menu-trigger .cd-menu-icon { display: inline-block; position: absolute; left: 70%; top: 50%; bottom: auto; right: auto; transform: translateX(-50%) translateY(-50%); color: #e50020; font-size: 0.5rem; } /*#cd-menu-trigger .cd-menu-icon::before, #cd-menu-trigger .cd-menu-icon:after { content: ''; width: 100%; height: 100%; position: absolute; background-color: inherit; left: 0; -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; }*//*三条线*/ /*#cd-menu-trigger .cd-menu-icon::before { bottom: 8px; } #cd-menu-trigger .cd-menu-icon::after { top: 8px; }*//*三条线*/ #cd-menu-trigger.is-clicked .cd-menu-icon { background-color: rgba(255, 255, 255, 0); } #cd-menu-trigger.is-clicked .cd-menu-icon::before { bottom: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #cd-menu-trigger.is-clicked .cd-menu-icon::after { top: 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } @media only screen and (min-width: 768px) { #cd-menu-trigger { width: 110px; padding-left: 1.25em; } #cd-menu-trigger .cd-menu-text { display: inline-block; line-height: 70px; } #cd-menu-trigger .cd-menu-icon { left: auto; right: 1.25em; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } #cd-lateral-nav { position: fixed; height: 100%; right:-200px; top: 0; /* the secondary navigation is covered by the main element */ z-index:999; width: 200px; background:#fff /*url(../img/left_navbg.png) repeat-y left top*/; overflow-y: auto; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; transition-duration: 0.4s; /* this creates the subtle slide in animation of the navigation */ -webkit-transform: translateX(80px); -moz-transform: translateX(80px); -ms-transform: translateX(80px); -o-transform: translateX(80px); transform: translateX(80px); } #cd-lateral-nav .cd-navigation { margin:0.5rem 0 0 0; } #cd-lateral-nav .sub-menu { padding: 0 10px 0px 15px; display: none; } #cd-lateral-nav a { display: block; line-height: 2em; padding: 8px 30px 8px 45px; color: #333; font-family:"微软雅黑"; } #cd-lateral-nav a.current { background-color: #917264; color: #FFF; } .no-touch #cd-lateral-nav a:hover { color: #FFF; } @media only screen and (min-width: 768px) { #cd-lateral-nav .cd-navigation { margin: 20px 0; } } #cd-lateral-nav.lateral-menu-is-open { -webkit-transform: translateX(-200px); -moz-transform: translateX(-200px); -ms-transform: translateX(-200px); -o-transform: translateX(-200px); transform: translateX(-200px); /* smooth the scrolling on touch devices - webkit browsers */ -webkit-overflow-scrolling: touch; } /* style menu items which have a submenu */ #cd-lateral-nav .item-has-children > a { position: relative; text-transform: uppercase; font-weight: normal; /* this is the right arrow to show that the item has a submenu */ } /*#cd-lateral-nav .item-has-children > a::after { content: ''; display: block; height: 11px; width: 8px; position: absolute; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); right: 1em; background: url("../img/cd-arrow.svg") no-repeat center center; background-size: 8px 11px; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; } #cd-lateral-nav .item-has-children > a.submenu-open::after { -webkit-transform: translateY(-50%) rotate(90deg); -moz-transform: translateY(-50%) rotate(90deg); -ms-transform: translateY(-50%) rotate(90deg); -o-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg); } */ /*==========================================新增样式========================================*/ .LOGO { width: 65%; margin-left: 5%; padding: 0.2rem 0; } .LOGO img { width: 100%; }