/*css reset*/ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box;} html,body,p{ padding: 0; margin: 0; font-family: "syht light","PingFang SC","寰蒋闆呴粦","Microsoft YaHei", "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif; font-size: 12px;line-height: 1;} ol, ul {list-style: none; padding: 0; margin: 0;} blockquote, q {quotes: none;} blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none; } table {border-collapse: collapse; border-spacing: 0;} th,td { vertical-align: middle;padding: 0;} a{text-decoration:none; outline: none;hlbr:expression(this.onFocus=this.blur());} input, select {vertical-align: middle;padding: 0;border: 0 none;} img, iframe {border: none; text-decoration:none;} img{vertical-align: top;} strong {font-weight: bold;} h1,h2,h3,h4,h5,h6{padding: 0; margin: 0;} :focus {outline: 0;} ::-webkit-input-placeholder { /* WebKit browsers */ color: #999; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #999; opacity: 1; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #999; opacity: 1; } :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #999; } /*瀛椾綋*/ @font-face { font-family: 'egbt'; src: url('/bundles/frontend/font/ENGRAVERSGOTHICBT.eot') format('embedded-opentype'),url('/bundles/frontend/font/ENGRAVERSGOTHICBT.TTF') format('truetype'),url('/bundles/frontend/font/ENGRAVERSGOTHICBT.woff') format('woff'); } @font-face { font-family: 'hero light'; src: url('/bundles/frontend/font/HEROLIGHT.eot') format('embedded-opentype'),url('/bundles/frontend/font/HEROLIGHT.ttf') format('truetype'),url('/bundles/frontend/font/HEROLIGHT.woff') format('woff'); } @font-face { font-family: 'syht light'; src: url('/bundles/frontend/font/SOURCEHANSANSCNLIGHT.eot') format('embedded-opentype'),url('/bundles/frontend/font/SOURCEHANSANSCNLIGHT.ttf') format('truetype'),url('/bundles/frontend/font/SOURCEHANSANSCNLIGHT.woff') format('woff'); } /*css common*/ .f-left {float: left;} .f-right {float: right;} .clearfix:after{content: "";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;font-size:0;} .clearfix{*zoom:1;} .nodisplay{display: none;} html{margin: 0 auto;max-width: 1920px;} html, body, #wrap {height: 100%;} body > #wrap { height: auto; /*min-height: 100%;*/ } .inner{width: 1100px;margin: 0 auto;} .mobile{ display: none; } .web{ display: block; } #main{ padding-bottom: 80px; padding-top: 71px; } /*css 搴曢儴*/ #footer{ text-align: center; height: 80px; line-height: 80px; background-color: #666; margin-top: -80px; position: relative; } #footer .left{ position: absolute; top: 0; left: 7%; height: 80px; font-size: 0; } #footer .left a{ font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-size: 14px; color: #ddd; padding: 0 14px; display: inline-block; vertical-align: middle; border-right: 1px solid #858585; border-left: 1px solid #4d4d4d; height: 14px; line-height: 1; } #footer .left a:first-child{ border-left: 0 none; } #footer .left a.last-child{ border-right: 0 none; } #footer .middle{ line-height: 1; display: inline-block; vertical-align: middle; padding-bottom: 24px; } #footer .copyrights{ font-size: 14px; color: #fff; line-height: 1; position: absolute; left: 0; width: 100%; bottom: 10px; } #footer .copyrights a{ font-size: inherit; color: inherit; } #footer .middle a{ margin: 0 10px; transition: all 0.5s; line-height: 1; display: inline-block; vertical-align: middle; background-image: none; background-repeat: no-repeat; background-size: 100% 100%; position: relative; background-color: #ccc; } #footer .middle a.gongshang,#footer .middle a.gongshang:hover{ background-color: transparent; } #footer .middle a:hover{ background-color: #fff; } #footer .middle a .qr{ position: absolute; left: 50%; margin-left: -92px; bottom: 22px; width: 184px; height: 214px; background-repeat: no-repeat; background-size: 100% 100%; background-image: url(/bundles/frontend/images/footer_qr_box.png); padding: 14px 15px 0; display: none; } #footer .middle a:hover .qr{ display: block; } #footer .middle a .qr img{ width: 100%; } #footer .right{ font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-size: 14px; color: #ccc; height: 80px; position: absolute; right: 6%; top: 0; } /* 渚у鑸爮*/ #sidenav{ position: fixed; top: 0; left: -100%; background-color: rgba(27,27,27,0.5); width: 100%; height: 100%; z-index: 99; transition: all 0.5s; } #sidenav.active{ left: 0; } #sidenav .left{ background-color: #f2f2f2; width: 69%; height: 100%; position: relative; padding-top: 25px; } #sidenav .left .close-btn{ position: absolute; right: -46px; top: 30px; } #sidenav .left .close-btn img{ width: 21px; } #sidenav .left .search-box{ width: 80%; height: 35px; line-height: 33px; margin: 0 auto 5px; border: 1px solid #d2d2d2; background-color: #fff; border-radius: 4px; overflow: hidden; position: relative; font-size: 0; } #sidenav .left .search-box input{ padding: 0 10px; width: 81%; height: 100%; font-size: 1.3rem; color: #444; } #sidenav .left .search-box a{ display: inline-block; vertical-align: top; text-align: center; width: 19%; height: 100%; } #sidenav .left .search-box img{ vertical-align: middle; width: 20px; } #sidenav .left .tel{ font-size: 1.2rem; color: #444; font-weight: bold; float: left; margin-left: 10%; } #sidenav .left .tel img{ width: 12px; vertical-align: middle; margin-right: 6px; } #sidenav .left .language{ font-size: 1.2rem; color: #444; float: right; margin-right: 10%; } #sidenav .left .language a{ font-size: 1.2rem; color: #444; } #sidenav .left .language a.active{ color: #c3000f; } #sidenav .nav{ margin-bottom: 21px; } #sidenav .nav .level1{ font-size: 12px; color: #444; height: 50px; line-height: 50px; display: block; padding-left: 10%; position: relative; border-bottom: 1px solid #d9d9d9; transition: all 0.5s; } #sidenav .nav .level1 span{ width: 13px; height: 13px; position: absolute; right: 10%; top: 50%; margin-top: -6px; background-repeat: no-repeat; background-position: center center; background-size: 100% auto; background-image: url(/bundles/frontend/images/sidenav_plus.png); } #sidenav .nav .level1.active span{ background-image: url(/bundles/frontend/images/sidenav_minus.png); } #sidenav .nav ul{ background-color: #fff; display: none; } #sidenav .nav ul li > a{ padding-left: 10%; font-size: 12px; height: 50px; line-height: 50px; display: block; color: #444; border-bottom: 1px solid #eee; } #sidenav .nav ul li > a.active{ background-color: #d9d9d9; } /* header*/ #header{ height: 71px; line-height: 70px; position: fixed; top: 0; left: 0; width: 100%; background-color: #fff; border-bottom: 1px solid rgba(0,0,0,0.05); z-index: 10; } #header .menu img{ width: 35px; position: absolute; left: 5.5%; top: 50%; margin-top: -10px; display: none; } #header .logo{ vertical-align: middle; /*margin-left: 4.7%;*/ } #header .right{ float: right; height: 70px; margin-right: 4.5%; font-size: 0; } #header .nav{ display: inline-block; vertical-align: top; height: 100%; position:absolute; left:25%; } #header .nav > div{ display: inline-block; vertical-align: top; position: relative; height: 100%; } #header .nav > div > a{ font-size: 16px; color: #444; display: block; padding: 0 16px; height: 70px; transition: all 0.2s; } #header .nav > div.four > a{ padding: 0 25px; } #header .nav > div > a:hover,#header .nav > div.active > a{ color: #c3000f; } #header .nav > div.active a,#header .nav > div a:hover{ border-bottom: 3px solid #c3000f; } #header .nav ul{ line-height: 1; text-align: center; position: absolute; top: 71px; width: 100%; background-color: #c30b0d; padding: 8px 0; display: none; } #header .nav ul li{ padding: 8px 0; } #header .nav ul li a{ font-size: 14px; color: #fff; } #header .search-btn img{ vertical-align: middle; margin-right: 44px; } #header .tel{ display: inline-block; vertical-align: middle; margin-right: 24px; font-size: 16px; font-weight: bold; color: #444; } #header .tel img{ vertical-align: middle; margin-right: 6px; } #header .language{ display: inline-block; vertical-align: middle; color: #444; font-size: 14px; } #header .language a{ color: #444; font-size: 14px; } #header .language a.active,#header .language a:hover{ color: #cd000f; } .search-cover{ position: fixed; top: -100%; left: 0; width: 100%; height: 100%; z-index: 9; padding-top: 71px; text-align: center; transition: all 0.5s; } .search-cover .close{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; background-color: rgba(0,0,0,0.5); } .search-cover.active{ top: 0; } .search-cover .search-bar{ background-color: #fff; padding: 13px 0 12px; } .search-cover .search-bar .search-box{ width: 440px; height: 45px; line-height: 45px; border-radius: 22px; overflow: hidden; display: inline-block; vertical-align: top; background-color: #e5e5e5; position: relative; } .search-cover .search-bar .search-box input{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0 24px; background-color: transparent; } .search-cover .search-bar .search-box a{ display: block; padding: 0 20px; height: 100%; position: absolute; right: 0; top: 0; background-color: #e5e5e5; } .search-cover .search-bar .search-box img{ vertical-align: middle; } @media only screen and (max-width:1366px){ #header .logo{ width: 230px; } } @media only screen and (max-width:1280px){ #header{ height: 60px; line-height: 60px; border-bottom: 0 none; text-align: center; } #header .logo{ width: 173px; margin-left: 0; } #header .right{ display: none; } #header .menu img{ display: block; } } @media only screen and (max-width:1024px){ html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-size: 62.5%; } #footer{ line-height: 30px; } #footer .left{ height: 30px; width: 50%; left: 0; line-height: 30px; } #footer .left a{ font-size: 1rem; padding: 0 10px; height: auto; } #footer .middle{ position: absolute; right: 0; top: 0; height: 30px; line-height: 30px; padding-bottom: 0; } #footer .middle img{ width: 13px; } #footer .copyrights{ font-size: 1rem; bottom: 10px; } #footer .right{ right: 0; top: 35%; height: 30px; font-size: 1rem; text-align: center; width: 100%; line-height: 30px; } #main{ padding-top: 60px; } } @media only screen and (max-width:768px){ } @media only screen and (max-width:767px){ .mobile{ display: block; } .web{ display: none; } } @media only screen and (max-width:414px){ #footer .middle a .qr{ margin-left: -46px; width: 92px; height: 107px; padding: 7px 7.5px 0; } } @media only screen and (max-width:320px){ }