/* -------------------------------- Primary style -------------------------------- */ html * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } i{font-style:normal;} *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html, body { /* you need to set this to assign to the main element a min height of 100% */ height: 100%; } body { font-size: 90%; font-family: "Microsoft Yahei","Titillium Web", sans-serif; color: #4e6361; background-color: #fafafa; } a { color: #329a40; text-decoration: none; } /* -------------------------------- Modules - reusable parts of our design -------------------------------- */ .cd-img-replace { /* replace text with a background-image */ display: inline-block; overflow: hidden; text-indent: 100%; white-space: nowrap; } .overflow-hidden { overflow: hidden; overflow-x: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; background-color: #fafafa; z-index: 2; padding-top: 44px; /* 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(260px); -moz-transform: translateX(260px); -ms-transform: translateX(260px); -o-transform: translateX(260px); transform: translateX(260px); } @media only screen and (min-width: 768px) { .cd-main-content { /*padding-top: 70px;*/ } } header { position: fixed; top: 0; left: 0; height: 44px; width: 100%; background: #2dcded; z-index: 3; /* 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; } header.lateral-menu-is-open { /* translate to show the lateral menu */ -webkit-transform: translateX(260px); -moz-transform: translateX(260px); -ms-transform: translateX(260px); -o-transform: translateX(260px); transform: translateX(260px); } header.is-fixed { position: fixed; } @media only screen and (min-width: 768px) { header { height: 44px; } } /* #cd-logo { display: block; float: left; margin: 12px 0 0 20px; } #cd-logo img { display: block; } @media only screen and (min-width: 768px) { #cd-logo { margin: 22px 0 0 30px; } } #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; } } */ .ckuheader{height:44px;background:#2dcded;position:relative;} .ckuheader h2{height:44px;line-height:44px;font-weight:normal;font-size:1.2em;color:#fff;text-align:center} /*.ckuheader a.backhref{display:block;float:left;height:24px;position:absolute;right:10px;line-height:22px;top:11px;color:#dff3e2;font-weight:normal;font-size:0.8em;border:1px solid #1d7629;border-radius:3px;padding:0 5px;z-index:2;background:#268d34;}*/ .ckuheader a.backhref{display:block;float:left;width:33px;height:28px;position:absolute;right:10px;top:9px;border:1px solid #1d7629;border-radius:3px;z-index:2;background:url(../images/shopcart.png) no-repeat;background-size:100% 100%;text-indent:-99999em} #cd-menu-trigger { position: absolute; left: 0; top: 0; height: 100%; width: 44px; background-color: #2dcded; } #cd-menu-trigger .cd-menu-text { height: 100%; text-transform: uppercase; color: #FFF; font-weight: 600; display: none; } #cd-menu-trigger .cd-menu-icon { /* this span is the central line in the menu menu */ 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: 18px; height: 2px; background-color: #FFF; /* these are the upper and lower lines in the menu menu */ } #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; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; } #cd-menu-trigger .cd-menu-icon::before { bottom: 5px; } #cd-menu-trigger .cd-menu-icon::after { top: 5px; } #cd-menu-trigger.is-clicked .cd-menu-icon { background-color: rgba(255, 255, 255, 0); } #cd-menu-trigger.is-clicked .cd-menu-icon::before, #cd-menu-trigger.is-clicked .cd-menu-icon::after { background-color: white; } #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: 44px; } #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%; left: 0; top: 0; /* 二级导航覆盖的主要元素 */ z-index: 1; width: 260px; /*background-color:#414141;*/ background-color: #0b333b; overflow-y:auto; /* 在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; /* 创建导航动画 */ -webkit-transform: translateX(-260px); -moz-transform: translateX(-260px); -ms-transform: translateX(-260px); -o-transform: translateX(-260px); transform: translateX(-260px); } #cd-lateral-nav .cd-navigation { margin: 0; } .item-has-children {border-bottom:1px solid #FFF} .item-has-children a { display: block; line-height: 3em; padding: 0 16px 0 15px; color: #FFF;font-size:120%; } .item-has-children a.current { background-color: #3a4a4d; color: #FFF; } .no-touch .item-has-children a:hover { color: #FFF; } #cd-lateral-nav .sub-menu { padding: 0 10px 10px 15px; display: none; } #cd-lateral-nav .sub-menu li{padding-left:1em;background:url(../images/lflistico.png) 0 .5em no-repeat;background-size:2em 2em} #cd-lateral-nav .sub-menu a {font-size:100%;line-height:3em;color:#FFF} @media only screen and (min-width: 768px) { #cd-lateral-nav .cd-navigation { margin:10px 0; } } #cd-lateral-nav.lateral-menu-is-open { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); /* 平滑滚动的触摸设备的WebKit浏览器 */ -webkit-overflow-scrolling: touch; } /* 菜单项的子菜单 */ #cd-lateral-nav .item-has-children > a { position: relative; text-transform: uppercase; /*font-weight: 600;outline:none;*/ outline:none; /* 菜单右箭头 */ } #cd-lateral-nav .item-has-children > a::after { content: ''; display: block; height: 15px; width: 20px; 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("../images/lftprtico.png") no-repeat center center; background-size: 20px 15px; -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); } .lfside_home{background:url(../images/lftphomeico.png) 15px center no-repeat;border-bottom:1px solid #FFF;} .lfside_home a{ display: block; line-height: 3em; padding: 0 16px 0 45px; color: #FFF;font-size:120%} .item-no-children {border-bottom:1px solid #FFF} .item-no-children a { display: block; line-height: 3em; padding: 0 16px 0 15px; color: #FFF;font-size:120%; } #cd-lateral-nav .item-no-children a { position: relative; text-transform: uppercase; /*font-weight: 600;*/ outline:none; /* 菜单右箭头 */ } #cd-lateral-nav .item-no-children a:after { content: ''; display: block; height: 15px; width: 20px; 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("../images/lftprtico.png") no-repeat center center; background-size: 20px 15px; -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; }