/*main_style*/ body{ background:url(../img/bg3.jpg) no-repeat fixed 0 0 / cover ; } /*menu 开始*/ #menu {position:fixed;left: 0;top: 0;height: 100%;z-index:999;perspective: 2000px;perspective-origin: right center;transform: translateX(-340px);transition: 0.8s cubic-bezier(0.19, 1, 0.22, 1);} #menu.on {transform: translateX(0);transition: 0.8s cubic-bezier(0.19, 1, 0.22, 1);}#menu .toggle {display: block;position: absolute;right: -200px;padding:20px 30px;animation: sink-down 1s ease-out 2.5s both;} #menu .toggle .icon {width: 40px;height: 40px;transform: rotate(0);transition: 1s cubic-bezier(1, 0, 0, 1); cursor:pointer;} #menu .toggle span {position: absolute;display: inline-block;width: 40px;height: 4px;background-color: #7e4919;} #menu .toggle .hamburger1, #menu .toggle .hamburger2, #menu .toggle .hamburger3 {opacity: 1;transition: 0.5s 0.5s cubic-bezier(0.19, 1, 0.22, 1);} #menu .toggle .hamburger1 {transform: translateY(6px);} #menu .toggle .hamburger2 {transform: translateY(18px);} #menu .toggle .hamburger3 {transform: translateY(30px);} #menu .toggle .slash {transform: translateY(18px) rotate(90deg) scaleX(0.1);transition: 0.5s cubic-bezier(0.95, 0.05, 0.795, 0.035);} #menu.on .toggle{ right:-100px;} #menu.on .toggle .icon {transform: rotate(135deg);transition: 1s cubic-bezier(1, 0, 0, 1);} #menu.on .toggle .hamburger1, #menu.on .toggle .hamburger3 {opacity: 0;transition: 0.5s cubic-bezier(0.95, 0.05, 0.795, 0.035);} #menu.on .toggle .hamburger1 {transform: translateY(18px);} #menu.on .toggle .hamburger3 {transform: translateY(18px);} #menu.on .toggle .slash {transform: translateY(18px) rotate(90deg) scaleX(1);transition: 0.5s 0.5s cubic-bezier(0.19, 1, 0.22, 1);} #menu .panel {padding-top:70px;height: 100%;text-align: center;box-sizing: border-box;width: 240px;opacity: 0;transform: rotateY(-90deg) translateZ(-100px);transform-origin: 0px 0px -100px;transition: 0.8s cubic-bezier(0.19, 1, 0.22, 1); background:url(../img/headerBg.jpg) repeat;} #menu.on .panel {opacity: 1;transform: rotateY(0) translateZ(0px);transform-origin: 0px 0px 0px;transition: 0.8s cubic-bezier(0.19, 1, 0.22, 1);} #nav {font-size: 16px;line-height: 50px;margin: 40px 0;transform: translateX(-100px);opacity: 0;transition: 0.5s;} #menu.on #nav {transform: translateX(0px);opacity: 1;transition: 0.5s 0.1s;} #nav li {height: 50px;position: relative;} #nav a {display: block;width: 100%;height: 100%; color:#333333;} #nav a .ch {position: absolute;display: inline-block;transform: translateX(-50%);transition: 0.5s; font-size:16px;} #nav a .en {position: absolute;display: inline-block;font-style: oblique;font-family: Arial, Helvetica, sans-serif;font-weight: lighter;text-transform: upperbase;font-size: 14px;opacity: 0;transition: 0.5s;transform: translate(-50%, 2px);animation-play-state: paused;animation: nav-font-expand 0.5s ease 0.1s 2 alternate; text-transform:uppercase;} .f-tel{ width:240px; height:auto; overflow:hidden; background:url(../images/tel-icon.png) top center no-repeat; padding-top:55px; margin:0 auto;} .f-tel-txt{ width:240px; height:25px; line-height:25px; text-align:center; font-size:18px; color:#7e4919; margin-bottom:5px;} .f-tel-num{ width:240px; height:30px; line-height:30px; text-align:center; font-size:24px; color:#7e4919; font-weight:bold;} .f-tel-line{ width:100px; height:3px; background:#7e4919; margin:10px auto 0;} .m-company-name{ width:240px; height:25px; line-height:25px; text-align:center; font-size:16px; color:#666; margin:30px auto 0;} #nav a:hover{ color:#7e4919;} #nav a:hover .ch {transform: translateX(-100%);transition: 0.5s;} #nav a:hover .en {opacity: 1;transition: 0.5s;transform: translate(10px, 2px);} #menu.on #nav .en {animation-play-state: running;} #menu h1{ width:60%; height:auto; overflow:hidden; margin-bottom: 20px;transform: translateX(-100px);opacity: 0;transition: 0.5s; margin:0 auto; text-align:center;} #menu h1 img{ width:100%;} #menu.on h1 {transform: translateX(0px);opacity: 1;transition: 0.5s;} @media screen and (max-height:810px) { #menu h1{ width:50%;} #menu.on h1 {margin: 5px auto;} #nav li{ height:40px; line-height:40px;} .f-tel-line{ margin:10px auto 0;} .m-company-name{ margin:15px auto 0;} } /*menu 结束*/ .inner-copyright{ text-align:center; background:#000; color:#ccc; font-size:14px; width:100%; line-height:40px; } .inner-copyright a{ color:#ccc; font-size:14px; } /* 翻页样式*/ /* kkpager 翻页样式 */ .m-pager{ width: 1000px; margin: 0 auto;} #kkpager{clear:both;color:#999;padding:5px 0px 5px 0px;font-size:13px;} #kkpager a{float: left;border: 1px solid #ccc;display: inline;padding: 3px 10px 3px 10px;margin-right: 5px;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;cursor: pointer;background: #fff;text-decoration:none;color:#999;} #kkpager span.disabled{float: left;display: inline;padding: 3px 10px 3px 10px;margin-right: 5px;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;border:1px solid #DFDFDF;background-color:#FFF;color:#DFDFDF;} #kkpager span.curr{float: left;border: 1px solid #78b325;display: inline;padding: 3px 10px 3px 10px;margin-right: 5px;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;background: #78b325;color: #fff;} #kkpager a:hover{border:1px solid #78b325;background-color:#78b325;color:#fff;} #kkpager span.normalsize{} #kkpager_gopage_wrap{position:relative;left:0px;top:0px;} #kkpager_btn_go{width:44px;height:18px;border:0px;overflow:hidden;line-height:140%;padding:0px;margin:0px;text-align:center;cursor:pointer;background-color:#78b325;color:#FFF;position:absolute;left:0px;top:-2px;-moz-border-radius: 3px;-webkit-border-radius: 3px;display:none;} #kkpager_btn_go_input{width:36px;height:18px;color:#999;text-align:center;margin-left:1px;margin-right:1px;border:1px solid #DFDFDF;position:relative;-moz-border-radius: 3px;-webkit-border-radius: 3px;left:0px;top:0px;outline:none;} #kkpager_btn_go_input.focus{border-color:#78b325;} #kkpager .pageBtnWrap{float:left;} #kkpager .infoTextAndGoPageBtnWrap{float:right;} #kkpager .spanDot{float:left;margin-right:5px;} #kkpager .currPageNum{color:#78b325;} #kkpager .infoTextAndGoPageBtnWrap{padding-top:5px;}