@charset "utf-8"; /* CSS Document */ html, body { height: 100%; font-size: 16px; line-height: 1.5; color: #333; } body { max-width: 1920px; margin: 0 auto; padding: 0; font-family: 'Microsoft YaHei', Arial; padding-top: 100px; } article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } a { background: transparent; text-decoration: none; -webkit-tap-highlight-color: transparent; color: #333; } a:focus, a:hover { color: #c8a176; text-decoration: none; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } img { border: 0; vertical-align: middle; max-width: 100%; border: none; margin: 0; } svg:not(:root) { overflow: hidden; } em, i { font-style: normal; } hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } pre { overflow: auto; white-space: pre; white-space: pre-wrap; word-wrap: break-word; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } button { overflow: visible; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; } textarea { overflow: auto; resize: vertical; } optgroup { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } html, button, input, select, textarea { font-family: "Microsoft YaHei"; } input::-moz-placeholder, textarea::-moz-placeholder { color: #666; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #666; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #666; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, h5, h6, p, figure, form, blockquote { margin: 0; } ul, ol, li, dl, dd { margin: 0; padding: 0; } li { list-style: none; } ul, ol { list-style: none outside none; } .fl { float: left; } .fr { float: right; } .left { float: left; } .right { float: right; } .tr { text-align: right; } .tl { text-align: left; } .tc { text-align: center; } .clear { clear: both; height: 0px; line-height: 0px; zoom: 1; } .clear:before, .clear:after { content: ""; display: table; } .clear:after { clear: both; } .clearfix:after, .clearfix:before { content: ""; display: table; clear: both; } .clearfix:after { clear: both; zoom: 1; } .rel { position: relative; } .abs { position: absolute; } .ov { overflow: hidden; } input, textarea { font-family: "Microsoft yahei"; font-size: 0.14rem; color: #fff; border: none; outline: medium none; } .wrapper { overflow: hidden; } .container { margin: 0 auto; width: 1200px; } /*手机版菜单按钮点击效果样式*/ .menu-bar { position: absolute; display: none; right: 15px; top: 50%; margin-top: -12px; -webkit-transition: -webkit-transform .25s ease-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; transition: transform .25s ease-out; transition: top .25s ease-in-out; } .menu-bar .btn-menu { display: block; box-sizing: border-box; width: 30px; text-align: center; text-decoration: none; border-bottom: none; } .menu-bar .btn-menu .menu-line { display: block; width: 30px; height: 3px; margin: 8px auto; border-radius: 2px; background-color: #c8a176; } .menu-bar .btn-menu .menu-line.menu-line-top { margin-top: 0; -webkit-transition: -webkit-transform .25s ease-out, background-color .25s ease-out; transition: transform .25s ease-out, background-color .25s ease-out; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50%; } .menu-bar.is-open .btn-menu .menu-line.menu-line-top { width: 36px; -webkit-transform: rotate(45deg) translate(-1px, -1px) scaleX(1); -ms-transform: rotate(45deg) translate(-1px, -1px) scaleX(1); transform: rotate(45deg) translate(-1px, -1px) scaleX(1); background-color: #c8a176; } .menu-bar .btn-menu .menu-line.menu-line-middle { -webkit-transition: opacity .25s ease-out, background-color .25s ease-out; transition: opacity .25s ease-out, background-color .25s ease-out; opacity: 1; } .menu-bar.is-open .btn-menu .menu-line.menu-line-middle { opacity: 0; } .menu-bar .btn-menu .menu-line.menu-line-bottom { margin-bottom: 0; -webkit-transition: -webkit-transform .25s ease-out, background-color .25s ease-out; transition: transform .25s ease-out, background-color .25s ease-out; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50%; } .menu-bar.is-open .btn-menu .menu-line.menu-line-bottom { width: 36px; -webkit-transform: rotate(-45deg) translate(-2px, 1px) scaleX(1); -ms-transform: rotate(-45deg) translate(-2px, 1px) scaleX(1); transform: rotate(-45deg) translate(-2px, 1px) scaleX(1); background-color: #c8a176; } /* Header 样式end */ #menuBox { display: none; } /**** Header--style--begin ****/ #Header { width: 100%; z-index: 99; position: fixed; left: 0; top: 0; background: #fff; height: 100px; } #Header .logo { padding: 10px 0; } #Header.active { box-shadow: 0px 0px 5px #888; } #Header .nav { width: 100%; } #Header .nav .nav-li { float: left; text-align: center; position: relative; margin: 0 25px; } #Header .nav .nav-li > a { padding: 0 10px; line-height: 100px; font-size: 16px; color: #333; display: block; position: relative; transition: all 0.5s linear; -o-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -webkit-transition: all 0.5s linear; } #Header .nav .nav-li:hover a, #Header .nav .nav-li.cur a { color: #c8a176; } #Header .nav .nav-li .nav-down { display: none; position: absolute; left: 0; top: 100px; width: 200px; z-index: 99; background: #fff; text-align: center; overflow: hidden; box-shadow: 1px 1px 5px #888; } #Header .nav .nav-li .nav-down li { float: none; display: block; width: 100%; } #Header .nav .nav-li .nav-down li a { position: relative; font-size: 14px; line-height: 50px; color: #7d7d7d; padding: 0 20px; text-align: left; display: block; transition: all 0.1s linear; } #Header .nav .nav-li .nav-down li a > .icon-Arrow { position: absolute; right: 30px; line-height: 50px; height: 50px; display: block; top: 0; font-size: 16px; transition: all 0.3s linear; opacity: 0; filter: alpha(opacity=0); } #Header .nav .nav-li .nav-down li > a::after { z-index: -1; position: absolute; width: 0; height: 100%; background: #c8a176; display: block; content: ""; left: 0; top: 0; transition: all 0.2s linear; } #Header .nav .nav-li .nav-down li > a:hover { color: #fff; } #Header .nav .nav-li .nav-down li > a:hover::after { width: 100%; } #Header .nav .nav-li .nav-down li > a:hover > .icon-Arrow { right: 20px; opacity: 1; filter: alpha(opacity=100); } #Header .nav .tool-li { float: left; } .tool-ul > li { float: left; position: relative; margin: 0 10px; } .tool-ul > li > ul { position: absolute; right: 50%; background: #fff; border-top: 2px solid #c8a176; padding: 10px; display: none; } .tool-ul > li > ul li { font-size: 14px; color: #333; line-height: 30px; text-align: center; } .tool-ul > li > .span-top { display: block; line-height: 100px; height: 100px; font-size: 24px; color: #666; text-align: center; padding: 0 5px; cursor: pointer; } .tool-ul > li > .icon-weixin { font-size: 26px; } .tool-ul > li.tool-group > .span-top { font-size: 14px; color: #666; } .tool-ul > li.tool-group .icon-next { font-size: 12px; float: right; margin-left: 10px; } .tool-ul > li.tool-group ul { width: 150px; right: 50%; margin-right: -75px; } .tool-ul > li.tool-lang .icon-lang { display: none; } .tool-ul > li.tool-lang ul { position: relative; border: none; right: auto; margin: 0; display: block; padding: 0; } .tool-ul > li.tool-lang ul li { float: left; position: relative; height: 100px; } .tool-ul > li.tool-lang ul li a { line-height: 100px; color: #666; padding: 0 10px; font-size: 15px; } .tool-ul > li.tool-lang ul li a:hover{color:#c8a176;} .tool-ul > li.tool-lang ul li:first-child::after { display: block; content: ""; position: absolute; right: 0; top: 50%; margin-top: -8px; width: 1px; height: 16px; background: #555; } #Header .tool-search { position: relative; } #Header .tool-search .icon-search { font-size: 20px; } #Header .tool-search #form_s { position: absolute; top: 100px; right: 0; display: none; width: 320px; padding: 10px; background: #fff; overflow: hidden; box-sizing: border-box; z-index: 100; box-shadow: 0px 0px 5px #888; } #Header .tool-search #form_s input { border: 1px solid #999999; font-size: 12px; color: #333; line-height: 40px; height: 40px; padding: 0 5px; float: left; } #Header .tool-search #form_s input[name="KeyWord"] { width: 85%; } #Header .tool-search #form_s input[type="submit"] { width: 15%; border-left: none; background: url('../images/icon-s.png') no-repeat center center; background-size: 16px; } /**** Header--style--end ****/ #Header .nav .nav-li #Pro-sub { position: fixed; top: 100px; left: 0; width: 1920px; padding: 30px; } #Header .nav .nav-li #Pro-sub ul { width: 1200px; margin: 0 auto; } #Header .nav .nav-li #Pro-sub li { float: left; width: 14%; border-right: 1px solid #ddd; height: 290px; } #Header .nav .nav-li #Pro-sub li:last-child { border: none; } #Header .nav .nav-li #Pro-sub dl { text-align: left; } #Header .nav .nav-li #Pro-sub dl dt a { font-size: 14px; color: #000; font-weight: bold; } #Header .nav .nav-li #Pro-sub dl dd a { border-bottom: none; font-size: 14px; color: #666; line-height: 40px; padding-right: 10px; } #Header .nav .nav-li #Pro-sub dl dd a i { font-size: 12px; float: left; margin-right: 5px; } #Header .nav .nav-li #Pro-sub dl dd a:hover { color: #c8a176; } /**** Footer--style--begin ****/ #Footer { position: relative; } .footer .main { background: #161616; padding: 40px 0; } .footer .main .left { float: left; width: 36%; } .footer .main .right { width: 59%; } .f-contact h3 { font-size: 18px; color: #d5d5d5; line-height: 50px; font-weight: 500; margin-bottom: 10px; } .f-contact p { font-size: 16px; color: #d5d5d5; line-height: 40px; position: relative; padding-left: 30px; } .f-contact p .iconfont { position: absolute; left: 0; font-size: 22px; line-height: 30px; height: 30px; top: 5px; } .f-contact p .icon-mail { font-size: 18px; } .f-nav { float: left; width: 70%; } .f-nav h3 { font-size: 18px; color: #d5d5d5; line-height: 50px; font-weight: 500; } .f-nav li { float: left; width: 135px; height: 40px; margin: 10px 25px 10px 0; border: 1px solid #262626; text-align: center; } .f-nav li a { line-height: 40px; color: #d5d5d5; font-size: 14px; display: block; transition: all 0.2s linear; } .f-nav li a:hover { background: #c8a176; color: #fff; } .footer .Qcrod { float: right; padding-top: 60px; width: 25%; text-align: center; } .footer .Qcrod p { font-size: 14px; color: #fff; line-height: 50px; text-align: center; } #Footer .bottom { padding: 25px 0; background: #000; } #Footer .bottom .left p { font-size: 14px; color: #b6b6b6; line-height: 46px; } #Footer .bottom .left a { font-size: 14px; color: #b6b6b6; line-height: 46px; display: inline-block; margin: 0 10px; } .link_con { position: relative; } .link_con .name { display: block; height: 46px; width: 280px; border: 1px solid #383838; padding: 0 20px; font-size: 14px; color: #b6b6b6; line-height: 46px; background: url('../testimg/icon_sj01.jpg') no-repeat right 20px center; } .link_con .link_son { position: absolute; bottom: 46px; width: 100%; text-align: center; background: #fff; display: none; } .link_con .link_son a { font-size: 14px; color: #333; line-height: 40px; } .link_con .link_son a:hover { color: #c8a176; } .new_link{overflow:hidden;width:100%} .new_link ul{display:flex;flex-flow:wrap} .new_link ul li{margin-right:20px;color:#b6b6b6;font-size:14px} .new_link ul li a{color:inherit} /**** youlian--style--end ****/ .Fot-link li { float: left; } .Fot-link li a { margin-right: 20px; color: #ababab; font-size: 12px; line-height: 20px; } .Fot-link li a:hover { color: #c8a176; } /**** Footer--style--end ****/ /*右侧公共客服组件样式begin*/ #fixedTop { position: fixed; right: 5%; bottom: 6%; width: 46px; height: 46px; z-index: 999; cursor: pointer; opacity: 0; filter: alpha(opacity=0); transition: all 0.5s linear; -moz-transition: all 0.5s linear; -webkit-transition: all 0.5s linear; transform: translateY(300%); -moz-transform: translateY(300%); -webkit-transform: translateY(300%); } #fixedTop.show { opacity: 1; filter: alpha(opacity=1); transform: translateY(0); -moz-transform: translateY(0); -webkit-transform: translateY(0); } /*右侧公共客服组件样式end*/ /*关注我们弹窗二维码begin*/ .bg-colCode { display: none; background-image: url('../images/bg-col.png'); position: fixed; z-index: 997; width: 100%; height: 100%; left: 0; top: 0; } .fixedQcrod { display: none; position: fixed; width: 140px; height: 180px; left: 50%; top: 50%; margin-left: -70px; margin-top: -60px; z-index: 998; } .fixedQcrod .Qcrod01 { position: absolute; left: -140px; width: 140px; opacity: 0.3; } .fixedQcrod .Qcrod02 { position: absolute; right: -140px; width: 140px; opacity: 0.3; } .fixedQcrod .pic { box-shadow: 0 0 15px #000; } .fixedQcrod .pic img { margin: 0 auto; width: 100%; max-width: 100%; } .fixedQcrod p { font-size: 16px; color: #fff; line-height: 50px; text-align: center; } @media (min-width: 1200px) { #Header .nav > ul { display: flex; display: -webkit-box; width: 100%; } } @media (max-width: 1360px) { .container { width: 1000px; } #Header .nav .nav-li { margin: 0 15px; } } @media (max-width: 1025px) { body { padding-top: 61px; } .container { padding: 0 15px; width: 100%; } .menu-bar { display: block; } #Header { height: 60px; } #Header .logo { padding: 0; } #Header .logo img { height: 60px; } #Header .tool { margin-right: 40px; display: none; } #Header .search .icon-search { padding: 0 15px; } #Header .Language .Tit span { padding: 10px 0; } #Header .Language ul { top: 60px; } #Header .nav { background: #fff; display: none; position: fixed; background: #fff; left: 0; top: 60px; width: 100%; overflow: scroll; height: 100%; } #Header .nav > ul { overflow: scroll; padding-bottom: 100px; height: 100%; } #Header .nav .nav-li { float: none; width: 100%; position: relative; margin: 0; } #Header .nav .nav-li > a { padding: 0 10px; line-height: 50px; text-align: left; } #Header .nav .nav-li .Down { background: url('../images/icon_hide01.png') no-repeat right 10px center; } #Header .nav .nav-li.cur .Down { background-image: url('../images/icon_show01.png'); color: #c8a176; } #Header .nav .nav-li .nav-down { display: none; text-align: left; width: auto; position: relative; top: auto; left: auto; padding-left: 20px; } #Header .nav .nav-li .nav-down li a { font-size: 14px; color: #333; line-height: 40px; border-bottom: 1px solid #f1f1f1; display: block; } #Header .nav .nav-li .nav-down li a > .icon-Arrow { line-height: 40px; height: 40px; } #Header .nav .nav-li .nav-down li:hover a { color: #fff; } #Header .nav .nav-li #Pro-sub { position: relative; left: auto; top: auto; padding: 0; width: auto; } #Header .nav .nav-li #Pro-sub li { float: left; width: 100%; height: auto; } #Header .nav .nav-li #Pro-sub dl dd { padding-left: 15px; } #Header .nav .nav-li #Pro-sub dl dd a { border-bottom: 1px solid #f1f1f1; margin-left: 10px; padding: 0; } #Header .nav .nav-li > a .icon-down { display: none; } #Header .nav .nav-li #Pro-sub dl dd > a { background: none; } #Header .nav .nav-li #Pro-sub dl dd { display: none; } #Header .nav .tool-li { float: none; } .tool-ul { text-align: center; } .tool-ul > li { margin: 0 5px; } .tool-ul > li > .span-top { height: 50px; line-height: 50px; } .tool-ul > li.tool-lang { margin: 0; } .tool-ul > li.tool-lang ul li { height: 50px; } .tool-ul > li.tool-lang ul li a { line-height: 50px; } #Header .tool-search #form_s { position: fixed; right: 2%; top: auto; bottom: 10px; width: 96%; } .footer .main .left { float: none; width: 100%; text-align: left; } .footer .main .right { float: none; width: 100%; } .f-contact h3 { text-align: left; } #Footer .bottom .left { width: 100%; text-align: center; } #Footer .bottom .right { width: 100%; } #link { margin: 0 auto; width: 280px; } } @media (max-width: 768px) { html, body { font-size: 14px; } #Footer .bottom .left p { line-height: 30px; margin-bottom: 10px; } #Footer .bottom .left .hidden { display:none; } #Footer .bottom .left a { line-height: 30px; } .f-nav li { margin: 5px; margin-left: 0; } } @media (max-width: 640px) { .container { padding: 0 10px; } .footer .main { padding: 20px 0; } .f-contact p { font-size: 14px; line-height: 30px; } } @media (max-width: 480px) { .f-nav { width: 65%; } .f-nav li { width: 120px; } .f-nav li a { font-size: 12px; } .footer .Qcrod { width: 35%; } .footer .Qcrod p { font-size: 12px; line-height: 30px; } } @media (max-width: 420px) { html, body { font-size: 12px; } .f-nav li { width: 90px; } } @media (max-width: 380px) { #Footer .Contact p { font-size: 12px; line-height: 30px; } } @media (max-width: 321px) { #Footer .f-nav li a { font-size: 12px; margin: 0 5px; } } #SC_pager { text-align: center; } #SC_pager .pages { margin: 20px 0; } #SC_pager .pages a { display: inline-block; text-align: center; font-size: 12px; line-height: 36px; color: #000; margin: 0 10px 0 0; height: 36px; min-width: 36px; font-weight: bold; border: 1px solid #e7e7e7; cursor: pointer; padding: 0 10px; border-radius: 3px; } #SC_pager .pages a.pgnext, #dcms_pager .pages a.pgnext { padding: 0 10px; font-weight: 100; font-family: "ËÎÌå"; } #SC_pager .pages a.pgempty { display: inline-block; text-align: center; font-size: 12px; line-height: 36px; color: #333; height: 36px; border: 1px solid #e7e7e7; padding: 0 10px; cursor: pointer; } #SC_pager .pages .pgcurrent { background: #c8a176; color: #ffffff; border: 1px solid #c8a176; } #SC_pager .pages a:hover { background: #c8a176; color: #ffffff; border: 1px solid #c8a176; }