/*全局样式*/ html, body { color: #333; margin: 0; background: #ffffff; color: #3e3e3e; font-family: sans-serif; overflow-y: visible; } * { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; outline: none; } a { text-decoration: none; color: #3e3e3e } a, label, button, input, select { -webkit-tap-highlight-color: transparent; } img { max-width: 100%; height: auto; border: 0; pointer-events: none; } img[src=""], img:not([src]) { opacity: 0; } button, input, optgroup, select, textarea { margin: 0; font: inherit; color: inherit; outline: none; -webkit-appearance: none; } ul, li { list-style: none; float: left; } input, button, textarea { border: 0; background: none } video:focus { outline: none; } input[type=number] { -moz-appearance: textfield; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } body.active { height: 100vh; overflow-y: hidden; } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px #6F6F6F; } ::-webkit-scrollbar-thumb { background: #6F6F6F; -webkit-box-shadow: inset 0 0 6px #6F6F6F; } ::-webkit-scrollbar-thumb:window-inactive { background: #6F6F6F; } .grayFilter { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } /*共享样式*/ .all { width: 100%; margin: 0 auto; } .w1400 { width: 87.5rem; margin: 0 auto; } .time05 { -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .pos-center-center { left: 50%; top: 50%; transform: translate(-50%, -50%); } .pos-left-center { position: absolute; left: 0%; top: 50%; transform: translate(0%, -50%); } .hidden { overflow: hidden; } .mobile { display: none; } .web { display: inline-block; } .clear { clear: both; } .line-one { text-overflow: ellipsis; white-space: nowrap; } .line-more { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .animateNum { display: inline-block; float: left; font-size: 3.75rem; line-height: 4rem; position: relative; left: 50%; transform: translate(-50%, 0); padding-right: 1.5rem; } .animateNum::before { position: absolute; right: 0; top: 0; // transform: translateX(100%); content: '+'; font-size: 2rem; line-height: 2rem; font-weight: bold; } .animateNum.hidenum::before { opacity: 0; } .newClass20230307 .animateNum { display: inline-block; float: initial; font-size: 3.75rem; line-height: 4rem; position: relative; left: 0%; transform: translate(0%, 0); padding-right: 0rem; -webkit-transform: translate(0%, 0); -moz-transform: translate(0%, 0); -ms-transform: translate(0%, 0); -o-transform: translate(0%, 0); } .newClass20230307 .animateNum::before { position: absolute; right: 0; top: 0; transform: translateX(100%); content: '+'; font-size: 2rem; line-height: 2rem; font-weight: bold; } /*头部样式*/ header.layui-header { position: fixed; height: 5rem; display: flex; border-bottom: rgba(168, 168, 168, 0.3) 1px solid; color: #fff; } header a { color: #fff; } header .logo { height: 100%; float: left; margin-left: 3.125rem; position: relative; } header .logo a { display: inline-block; float: left; position: relative; height: 100%; } header .logo img { height: 3.75rem; position: relative; } header .phone-toggle { width: 5rem; height: 100%; float: right; cursor: pointer; } header .phone-toggle .box { width: 30px; float: left; height: auto; position: relative; } header .phone-toggle .bar { width: 100%; height: 2px; float: left; background: #fff; } header .phone-toggle .bar.bar2 { margin: 0.5rem 0; } header.active .phone-toggle .bar.bar1 { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); margin-top: 1px; } header.active .phone-toggle .bar.bar2 { opacity: 0; margin: 0; height: 0; } header.active .phone-toggle .bar.bar3 { -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: -2px; } header:hover .phone-toggle .bar, header.headbg .phone-toggle .bar, header.nyhead .phone-toggle .bar { background: #000; } header .navigation { height: 100%; float: right; } header .navigation>div { height: 100%; float: right; cursor: pointer; } header .navigation>div .box { position: relative; height: 100%; } header .company { border-left: rgba(168, 168, 168, 0.3) 1px solid; } header .company .box { width: 5rem; height: 100%; cursor: pointer; position: relative; } header .company .text { position: absolute; width: 3.5rem; height: 2rem; color: #2685C5; } header .company span { display: inline-block; font-size: 0.75rem; height: 2rem; line-height: 1rem; width: 2rem; float: left; } header .company .text ul { width: 1.25rem; height: 1.5625rem; margin-top: 0.25rem; position: relative; } header .company .text li { position: absolute; right: 0; width: 60%; height: 0.125rem; background: #2685C5; } header .company .text li:nth-child(1) { width: 100%; top: 0; } header .company .text li:nth-child(2) { top: 0.5125rem; } header .company .text li:nth-child(3) { top: 1rem; } header .company .text li:nth-child(4) { width: 100%; bottom: 0; } header .company .toggle { position: absolute; top: 100%; right: 0; background: #fff; width: 10rem; max-height: 23rem; overflow-x: hidden; overflow-y: auto; padding: 2rem 0; color: #333; opacity: 0; visibility: hidden; transform: translateY(10px); border: #E5E5E5 1px solid; } header .company .toggle::-webkit-scrollbar { width: 5px; } header .company .toggle::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px #D4D9E0; } header .company .toggle::-webkit-scrollbar-thumb { background: #007AC1; -webkit-box-shadow: inset 0 0 6px #007AC1; opacity: 1 } header .company .toggle::-webkit-scrollbar-thumb:window-inactive { background: #D4D9E0; } header .company:hover .toggle, header .company .toggle.cur { top: 100%; opacity: 1; visibility: visible; transform: translateY(0px); } header .company .toggle li { width: 100%; text-align: center; line-height: 3.125rem; height: 3.125rem; font-size: 1rem; overflow: hidden; padding: 0 0.5rem; } header .company .toggle li a { display: inline-block; width: 100%; float: left; color: #333; } header .company .toggle li:hover { background: #DDDDDD } header .hflist { width: initial; } header .hflist ul { height: 50%; float: initial; position: relative; } header .hflist ul:nth-child(1):before { position: absolute; content: ''; width: 100%; height: 1px; left: 0; bottom: 0%; transform: translate(0, -50%); background: #EBEBEB; } header .hflist ul li { width: 50%; min-width: 8rem; height: 100%; float: left; position: relative; } header .hflist ul li .box { width: 100%; float: left; text-align: center; } header .hflist ul li .box a { display: inline-block; width: 100%; float: left; height: 2.5rem; line-height: 2.5rem; font-size: 0.875rem; overflow: hidden; } header .hflist ul li:nth-child(2n-1) { border-left: #EBEBEB 1px solid; } header .hflist ul li:nth-child(2n)::before { position: absolute; content: ''; width: 1px; height: 30%; top: 35%; left: 0; background: #EBEBEB; } header .hflist ul li.lang .box .layui-icon-website { font-size: 0.875rem; color: #E60113; } header .hflist ul li.lang .box .layui-icon-down { font-size: 0.5rem; } header .hflist ul li.search .box font { display: inline-block; color: #BFBFBF; float: left; margin-left: 1rem; } header .hflist ul li.search .box i { display: inline-block; width: 0.75rem; height: 0.75rem; top: 40%; transform: translate(0, -50%); float: right; margin-right: 1.5rem; line-height: 2rem; position: relative; } header .hflist ul li.search .box i:before, header .hflist ul li.search .box i:after { position: absolute; content: ''; } header .hflist ul li.search .box i:before { width: 100%; height: 100%; border: #4F4F4F 2px solid; border-radius: 100%; left: 0; top: 0; } header .hflist ul li.search .box i:after { width: 70%; height: 2px; background: #4F4F4F; right: -70%; bottom: -35%; transform: rotate(45deg); } header .hflist ul li .toggle.cur { display: inline-block; } header .lang .toggle { position: absolute; left: 0; top: 100%; z-index: 3; width: 100%; padding: 0.625rem; border-radius: 10px; background: #484848; opacity: 0; visibility: hidden; transform: translateY(10px); } header .lang .toggle p { width: 100%; line-height: 2rem; text-align: center; color: #fff; } header .lang .toggle a { color: #fff; } header .lang:hover .toggle, header .lang .toggle.cur { top: 100%; opacity: 1; visibility: visible; transform: translateY(0px); } header .search .toggle { visibility: hidden; position: absolute; z-index: 3; right: 0; top: 100%; width: 18rem; height: 3rem; background: #606060; border-radius: 3rem; opacity: 0; visibility: hidden; transform: translateY(10px); } header .search .toggle .search-input { width: 100%; padding: 0.25rem 3.25rem 0.25rem 1rem; float: left; } header .search .toggle .search-input input { width: 100%; line-height: 2.5rem; font-size: 0.875rem; color: #fff; } header .search .toggle .search-input input::-webkit-input-placeholder { color: #ccc; } header .search .toggle .search-input input::-moz-input-placeholder { color: #ccc; } header .search .toggle .search-input input::-ms-input-placeholder { color: #ccc; } header .search .toggle button.search-go { position: absolute; right: 0.5rem; top: 50%; transform: translate(0%, -50%); display: inline-block; float: left; width: 2.1875rem; height: 2.1875rem; border-radius: 2.1875rem; background: #fff; cursor: pointer; } header .search .toggle button.search-go .icon-right { position: absolute; left: 25%; top: 60%; content: ''; width: 0; height: 0; border-right: 2px solid #606060; border-top: 2px solid #606060; height: 0.875rem; width: 0.875rem; -webkit-transform: rotate(45deg) translate(-50%, -50%); border-left: 2px solid transparent; border-bottom: 2px solid transparent; } header .search:hover .toggle, header .search .toggle.cur { top: 100%; background: #484848; opacity: 1; visibility: visible; transform: translateY(0px); } header .menu { flex: 1; width: 100%; height: 100%; line-height: 100%; display: flex; justify-content: center; align-items: center; } header .menu>ul { height: 100%; } header .menuli { line-height: 100%; height: 100%; padding: 0 1.5rem; } header .menuli .box { cursor: pointer; position: relative; } header .menuli .box { width: 100%; height: 100%; float: left; line-height: 100%; overflow: hidden; font-size: 1rem; } header .menuli .box>a { width: 100%; height: 100%; float: left; display: inline-block; position: relative; top: 50%; transform: translate(0, -50%); } header .menuli .box span { display: inline-block; width: 100%; float: left; position: relative; top: 50%; transform: translate(0, -50%); } header .menuli .box:before { position: absolute; content: ''; left: 50%; z-index: 1; bottom: 0; width: 0%; height: 2px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } header .menuli .toggle { width: 100%; position: fixed; left: 0; top: 5rem; background: rgba(255, 255, 255, 1); box-shadow: 0 0.5rem 1rem 0px rgba(198, 200, 204, 0.4); overflow: hidden; color: #282828; opacity: 0; height: 0; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } header .menuli .toggle a { color: #282828; } header .menuli .toggle ul { height: initial; position: relative; left: 50%; padding: 2rem 0 4rem 0; transform: translate(-50%, 0%); } header .menuli:hover .toggle ul { padding: 2rem 0 4rem 0; height: initial; } header .menuli .toggle li { width: 16.25rem; margin-left: 1.5625rem; } header .menuli>.toggle>ul>li .moretoggle { max-height: 21rem; width: 100%; float: left; overflow-y: auto; overflow-x: hidden; } header .menuli>.toggle>ul>li .moretoggle::-webkit-scrollbar { width: 5px; } header .menuli>.toggle>ul>li .moretoggle::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px #D4D9E0; } header .menuli>.toggle>ul>li .moretoggle::-webkit-scrollbar-thumb { background: #007AC1; -webkit-box-shadow: inset 0 0 6px #007AC1; opacity: 1 } header .menuli>.toggle>ul>li .moretoggle::-webkit-scrollbar-thumb:window-inactive { background: #D4D9E0; } header .menuli .toggle li:nth-child(1) { margin-left: 0; } header .menuli .toggle li .box1 { width: 100%; float: left; font-size: 1.5rem; line-height: 2rem; padding: 0.75rem 0; border-bottom: #E6E6E6 1px solid; margin-bottom: 1.25rem; } header .menuli .toggle li .box1 a { padding-right: 1rem; } header .menuli .toggle li .toggle1 { width: 100%; float: left; } header .menuli .toggle li .box2 { width: 100%; float: left; } header .menuli .toggle li .box2 a { display: inline-block; width: 100%; float: left; line-height: 2rem; color: #007AC1; overflow: hidden; } header .menuli .toggle li .toggle2, header .menuli .toggle li .toggle2.nomh.hasmh { width: 100%; float: left; margin-bottom: 1rem; } header .menuli .toggle li .toggle2.nomh { margin: 0; } header .menuli .toggle .box3 { width: 100%; float: left; } header .menuli .toggle .box3 a { display: inline-block; width: 100%; float: left; color: #666666; font-size: 1rem; line-height: 1.3125rem; position: relative; padding-left: 0.875rem; margin: 0.5rem 0; } header .menuli .toggle .box3 a:before { position: absolute; left: 0; top: calc(1rem - 6px); content: ''; width: 2px; height: 2px; background: #666; border-radius: 2px; } header .menuli { position: relative; } header .menuli .subtext { position: absolute; overflow: inherit; width: 12rem; } header .menuli .toggle.subtext ul { height: 0; padding: 0; overflow: hidden; } header .menuli .toggle.subtext:before { display: none; } header .menuli .toggle.subtext ul:before { position: fixed; content: ''; left: 0; top: 0; width: 200vw; height: 100%; background: #fff; transform: translate(-50%, 0) translateY(0px); box-shadow: 0 0.5rem 1rem 0px rgba(198, 200, 204, 0.4); } header .menuli .toggle.subtext li { padding: 0 0.5rem; width: 100%; } /**整体变色 开始**/ header.nyhead { position: relative; } header.headbg, header.nyhead { background: #fff; color: #000; } header.headbg a, header.nyhead a { color: #000; } header a:hover, header .lang:hover .text font, header .lang:hover .text .layui-icon-website, header .lang:hover .text .layui-icon-down, header .search .box:hover i, header .search .box:hover i { color: #2685C5; } header.headbg { height: 5rem; position: fixed; } header.headbg .menuli .toggle { top: 5rem; } header .logo img { height: 3.1rem; } header.headbg .hflist ul li .box a { line-height: 2.3rem; height: 2.3rem; } header .menuli:hover .box:before, header.headbg .menuli:hover .box:before, header .menuli.active .box:before { width: 100%; left: 0; background: #007AC1; } header .menuli .toggle .box3 a:hover, header .menuli .toggle li .box1 a:hover, header .menuli .toggle li .box2 a:hover { color: #007AC1; } header .menuli:hover .toggle { opacity: 1; height: initial; } header .menuli:hover .subtext ul { height: initial; overflow: initial; padding: 2rem 0 4rem 0; } .nothingdiv { width: 100%; float: left; height: 5rem; } /**内页顶部占位符、banner、内页子导航**/ main { min-height: 20rem; float: none !important; } .floatleft { float: left !important; } .mt0 { margin-top: 0 !important; } main:before, main:after { clear: both; content: ""; display: block; } main .nothing { height: 5.625rem; } main .nybanner { position: relative; } main .nybanner .img img { float: left; } main .nybanner .text { position: absolute; left: 0; top: 0; color: #fff; width: 100%; height: 100%; margin: 0 auto; } main .nybanner .w1400 { position: relative; height: 100%; } main .nybanner .nybanner-box { float: left; position: absolute; left: 0; top: 50%; transform: translate(0%, -50%; ); } main .nybanner .name { font-size: 2.5rem; line-height: 3rem; letter-spacing: 0.2rem; } main .nymenu { height: 3.75rem; line-height: 3.75rem; border-bottom: #E6E6E6 1px solid; } main .nymenu .nymenu-info, main .nymenu .nymenu-ul { width: 100%; float: left; } main .nymenu .nymenu-info { position: relative; } main .nymenu .nymenu-li { margin-right: 3.125rem; } main .nymenu .line { position: absolute; left: 0; bottom: 0; width: auto; height: 2px; background: #007AC1; } footer { float: left; background: #333333; color: #ADADAD; position: relative; padding-top: 6.6875rem; } footer .server { position: absolute; width: 100%; top: 0%; right: 0; float: left; transform: translate(0%, -50%); } footer .server ul { float: right; } footer .server ul li { background: #005F90; position: relative; } footer .server ul li a { float: left; display: inline-block; padding: 3.6875rem 0; height: 13.375rem; } footer .server ul li:nth-child(1) { background: #007AC1; padding-right: 4rem; padding-left: 2rem; } footer .server ul li:nth-child(2) { background: #006DA5; } footer .server ul li:before { position: absolute; content: ''; left: 0; top: 0; transform: translate(-50%, 0%); width: 0; height: 0; border-left: 6.6875rem solid transparent; border-right: 6.6875rem solid transparent; } footer .server ul li:nth-child(1):before { border-bottom: 13.375rem solid #007AC1; } footer .server ul li:nth-child(2):before { border-bottom: 13.375rem solid #006DA5; } footer .server ul li:nth-child(3):before { border-bottom: 13.375rem solid #005F90; } footer .server li .name, footer .server li .desc { width: 100%; float: left; color: #fff; } footer .server li .name { padding-left: 2.5rem; line-height: 4rem; font-size: 1.5rem; position: relative; } footer .server li .name i { display: inline-block; position: absolute; content: ''; left: 0; top: 50%; width: 1.875rem; height: 1.875rem; transform: translate(0%, -50%); } footer .server li .name i img { float: left; } footer .server li:nth-child(3) .name i { background-position: 0 -3.75rem; } footer .server li .desc { line-height: 2rem; font-size: 0.875rem; } footer .server li .desc font { display: inline-block; position: relative; padding-right: 1.25rem; position: relative; } footer .server li .desc font:before { position: absolute; right: 0; top: 48%; content: ''; width: 0; height: 0; border-right: 2px solid #fff; border-top: 2px solid #fff; height: 0.4rem; width: 0.4rem; transform: rotate(deg); -webkit-transform: rotate(45deg) translate(-50%, 0%); border-left: 2px solid transparent; border-bottom: 2px solid transparent; } footer .server li .desc font:after { position: absolute; content: ''; left: 0; bottom: 0; width: 0; height: 1px; background: #fff; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } footer .server li .img { position: absolute; left: 40%; top: 50%; transform: translate(-50%, -50%); opacity: 0; } footer .server li .img img { width: 10rem; height: 10rem; } footer .server li:nth-child(1).active .img, footer .server li:nth-child(2).active .img { opacity: 1; } footer .server li:nth-child(2).active .name, footer .server li:nth-child(2).active .desc { opacity: 0 } footer .server li:nth-child(3):hover .desc font:after { width: 100%; } footer .logo { position: relative; width: 100%; float: left; border-bottom: #515151 1px solid; } footer .logo .left { float: left; padding: 3rem 0; } footer .logo .left img { width: 21.5625rem; float: left; } footer .logo ul { position: absolute; right: 0; top: 50%; transform: translate(0%, -50%); float: right; } footer .logo ul li { background: #333; margin-left: 0.625rem; border: #515151 1px solid; border-radius: 0.3125rem; } footer .logo ul li a { display: inline-block; float: left; } footer .logo ul li i { display: inline-block; width: 2.75rem; height: 2.75rem; float: left; background-image: url(../images/comm/foot-link.png); background-repeat: no-repeat; background-size: cover; } footer .logo ul li.flk1 i { background-position: 0 0; } footer .logo ul li.flk3 i { background-position: 0 -2.75rem; } footer .logo ul li.flk2 i { background-position: 0 -5.5rem; } footer .logo ul li.flk4 i { background-position: 0 -8.25rem; } footer .logo ul li.flk5 i { background-position: 0 -11rem; } footer .logo ul li.flk6 i { background-position: 0 -13.75rem; } footer .logo ul li:hover { background: #999; border: #999 1px solid; } footer .logo ul li.flk1:hover i { background-position: 0 -16.5rem; } footer .logo ul li.flk3:hover i { background-position: 0 -19.25rem; } footer .logo ul li.flk2:hover i { background-position: 0 -22rem; } footer .logo ul li.flk4:hover i { background-position: 0 -24.75rem; } footer .logo ul li.flk5:hover i { background-position: 0 -27.5rem; } footer .logo ul li.flk6:hover i { background-position: 0 -30.25rem; } footer .menu { width: 100%; float: left; position: relative; margin: 2rem 0 4.625rem 0; } footer .menu ul { width: 100%; } footer .menu ul li { width: 10rem; padding-right: 1rem; } footer .menu ul li h3 { font-weight: inherit; } footer .menu ul li h3 a { color: #007AC1; line-height: 3rem; font-size: 1rem; } footer .menu ul li p a { color: #A1A1A1; font-size: 0.875rem; line-height: 1.875rem; } footer .menu ul li h3 a:hover { color: #006DA5; } footer .menu ul li p a:hover { color: #fff; } footer .menu .online { width: 22rem; float: right; } footer .menu .online .tel { width: 100%; float: left; } footer .menu .online .tel p:nth-child(1) { color: #007AC1; line-height: 2rem; float: 1rem; } footer .menu li.online .tel p:nth-child(2), footer .menu li.online .tel p:nth-child(2) a { color: #fff; font-size: 2.5rem; } footer .menu .online .tel p:nth-child(2) a { color: #fff; } footer .menu .online .add { width: 100%; float: left; font-size: 0.875rem; margin-top: 2rem; color: #ADADAD; } footer .menu .online .add a { color: #ADADAD; padding-left: 4.625rem; float: left; text-align: left; line-height: 1.875rem; } footer .menu .online .add p { line-height: 1.875rem; position: relative; float: left; } footer .menu .online .add font { display: inline-block; width: 4.625rem; padding-left: 2rem; position: absolute; left: 0; top: 0; } footer .menu .online .add font:before { position: absolute; content: ''; left: 0; top: 0.25rem; width: 1.375rem; height: 1.375rem; background-image: url(../images/comm/foot-ico.png); background-repeat: no-repeat; background-size: cover; } footer .menu .online .add p:nth-child(1) font:before { background-position: 0 -1.375rem; } footer .menu .online .add p:nth-child(2) font:before { background-position: 0 0; } #copyright { width: 100%; float: left; background: #212121; line-height: 2rem; padding: 1.5rem 0; font-size: 0.875rem; color: #727272; } #copyright p { float: left; } #copyright a { margin-left: 1rem; color: #727272; } #copyright .left { float: left; } #copyright ul { float: right; } #copyright ul li { margin-left: 2rem; } #copyright a:hover { color: #ccc; } .otherimg { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; position: relative; z-index: 99999; display: none; } .otherimg:before { position: absolute; content: ''; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.4); } .otherimg img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 100000; max-height: 96%; max-width: 96%; } .otherimg.on { display: inline-block; position: fixed; left: 0; top: 0; } /**在线客服******/ #gotop { position: fixed; z-index: 3; right: 0.25rem; bottom: 10%; width: 3.125rem; visibility: hidden; -webkit-transform: translateY(120px); transform: translateY(120px); opacity: 0; } #gotop ul { width: 100%; } #gotop ul li { width: 100%; height: 3.125rem; margin-top: 2px; border: #E6E6E6 1px solid; border-radius: 0.3125rem; background: #fff; color: #818181; position: relative; } #gotop ul li:nth-child(1) { margin-top: 0; } #gotop ul li a { display: inline-block; width: 100%; float: left; } #gotop ul li i.gotop-ico { display: inline-block; width: 2.25rem; height: 2.25rem; float: left; margin: 0.375rem; /*background-image: url(../images/comm/kf.png);*/ background-size: 100% 100%; background-repeat: no-repeat; } #gotop ul li p { display: inline-block; width: 100%; float: left; text-align: center; font-size: 0.75rem; line-height: 1rem; margin-bottom: 0.375rem; } #gotop ul li .img { display: none; position: absolute; right: 110%; top: 50%; transform: translate(0, -50%); width: 15rem; height: 15rem; overflow: hidden; } #gotop ul li .text { width: 0; position: absolute; height: 3.125rem; background: #007AC1; color: #fff; line-height: 3.125rem; font-size: 1rem; right: 100%; top: -1px; border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; overflow: hidden; } #gotop ul li .text a { color: #fff; white-space: pre } #gotop ul li .img img { position: absolute; top: 50%; right: 0%; transform: translate(0%, -50%); max-width: 100%; max-height: 100%; float: left; object-fit: cover; } #gotop ul li.lqr:hover .img { display: inline-block; } #gotop ul li:hover { background: #007AC1; border: #007AC1 1px solid; border-top-left-radius: initial; border-bottom-left-radius: initial; } #gotop ul li#ToTop:hover { border-top-left-radius: 0.3125rem; border-bottom-left-radius: 0.3125rem; } #gotop ul li:hover .text { width: initial; padding: 0 1rem; } #gotop ul li:hover p { color: #fff; } #gotop ul li.lqr:hover i.gotop-ico { background-image: url(../images/icon/kf_06.png); } #gotop ul li.ltel:hover i.gotop-ico { background-image: url(../images/icon/kf_11.png); } #gotop ul li.lqq:hover i.gotop-ico { background-image: url(../images/icon/kf_16.png); } #gotop ul li#ToTop:hover i.gotop-ico { background-image: url(../images/icon/kf_20.png); } #gotop ul li.lqr i.gotop-ico { background-image: url(../images/icon/kf_03.png); } #gotop ul li.ltel i.gotop-ico { background-image: url(../images/icon/kf_09.png); } #gotop ul li.lqq i.gotop-ico { background-image: url(../images/icon/kf_14.png); } #gotop ul li#ToTop i.gotop-ico { background-image: url(../images/icon/kf_18.png); } #gotop.active { visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); opacity: 1; } @media(max-width:1680px) { header .link { margin-right: 1.5rem; } header .search { margin-left: 0; } header .menuli { padding: 0 0.5rem; } header .company .box { width: 5rem; } footer { padding-top: 5.5rem; } footer .logo .left { padding: 2rem 0; } footer .server ul li a { padding: 2.5rem 0; height: 11rem; width: 22rem; } footer .server ul li:before { border-left: 5.5rem solid transparent; border-right: 5.5rem solid transparent; } footer .server ul li:nth-child(1) { padding-left: 1rem; padding-right: 0rem; } footer .server ul li:nth-child(1):before { border-bottom: 11rem solid #007AC1; } footer .server ul li:nth-child(2):before { border-bottom: 11rem solid #006DA5; } footer .server ul li:nth-child(3):before { border-bottom: 11rem solid #005F90; } footer .menu .online { margin-right: 2rem; } } @media(max-width:1440px) { header .navigation .menu { margin-left: 5%; } header .menuli { padding: 0 0.4rem; } header .menuli .toggle li { width: 19%; margin-left: 1.25%; } header .company .box { width: 4.5rem; } header .search .box { width: 3rem; } header .link { margin-right: 1rem; } header .logo { margin-left: 1.5rem; } header .menuli .toggle.subtext ul { left: calc(50% - 0.5rem); } .w1400 { width: 96%; margin: 0 2%; } footer .menu ul li { width: 12%; padding-right: 1%; } footer .menu .online { width: 25%; } #copyright ul li a { margin: 0; } } @media(max-width:1366px) { header .logo { margin-left: 0.5rem; } header .menuli .box { font-size: 0.875rem; } header .menuli:hover .toggle ul { padding: 1rem 0 2rem 0; } footer { padding-top: 0; } footer .server { position: inherit; top: inherit; right: inherit; transform: translate(0%, 0%); } footer .server ul { width: 100%; } footer .server ul li { padding: 2rem 0; width: 33.3333%; } footer .server ul li:nth-child(1) { padding-left: 0; } footer .server ul li a { display: inline-block; float: left; width: 85%; margin-left: 15%; height: 100%; padding: 0; } footer .server ul li:before { display: none; } footer .server li .img { left: 50%; } } @media(max-width:1279px) { .web { display: none; } .mobile { display: inline-block; } header.active { background: #fff; } header.layui-header { display: initial; width: 100%; float: left; } header .navigation { flex: initial; width: 100%; top: 5rem; height: calc(100vh - 5rem); float: left; background: #fff; position: fixed; padding-bottom: 8rem; left: 100vw; } header .navigation .hflist { height: 3rem; float: right; width: 92%; position: absolute; top: 2rem; left: 4%; } header .navigation .hflist ul { width: 100%; height: 100%; float: left; } header .hflist ul li:nth-child(2n-1) { border: none; } header .menuli .toggle li .toggle2, header .menuli .toggle li .toggle2.nomh.hasmh { margin-bottom: 0; } header .menuli>.toggle>ul>li .moretoggle { overflow-y: initial; max-height: initial; display: none; } header .menuli .toggle .box3 a:before { top: calc(50% - 1px); } header .hflist ul:nth-child(1) { width: 100%; position: absolute; top: calc(100% + 1rem); left: 0%; } header .hflist ul:nth-child(1):before { display: none; } header .hflist ul:nth-child(1) li { min-width: initial; width: calc(50% - 0.5rem); border: #EBEBEB 1px solid; } header .hflist ul:nth-child(1) li:nth-child(2) { margin-left: 1rem; } header .hflist ul li:nth-child(2n)::before { display: none; } header .navigation .company { display: inline-block; width: 92%; border: #EBEBEB 1px solid !important; height: 3rem; float: left; position: initial; top: initial; right: initial; z-index: initial; position: relative; top: 9.5rem; left: 4%; border-left: initial; margin: 0; z-index: 3; } header .company .text { width: initial; } header .navigation .company span { width: initial; line-height: 2rem; margin-right: 1rem; font-size: 0.875rem; } header .navigation .company .box { width: 100%; } header .navigation .company:hover .toggle, header .navigation .company .toggle.active { top: initial; opacity: 0; visibility: hidden; transform: translateY(10px); ; } header .navigation .search { display: inline-block; position: initial; top: initial; width: calc(100% - 5rem); height: 2.5rem; margin-top: 0.25rem; padding: initial; z-index: initial; float: right; } header .navigation .search .box { display: none; } header .navigation .search .toggle { position: initial; left: initial; top: initial; right: initial; opacity: 1; visibility: visible; transform: translateY(0px); width: 100%; height: 100%; border-radius: 0.15rem; background: #fff; border: #ccc 1px solid; } header .navigation .search .toggle .search-input { padding: 0 2rem 0 1.5rem; } header .navigation .search .toggle .search-input input { color: #333; line-height: 2.5rem; } header .navigation .search:hover .toggle, header .navigation .search .toggle.cur { background: #fff; } header .search .toggle button.search-go { right: 0; } header .search .toggle button.search-go .icon-right { width: 0.5rem; height: 0.5rem; left: 40%; } header .navigation .link, header.active .lang { display: inline-block; position: initial; top: initial; left: initial; height: 3rem; margin: initial; z-index: initial; } header .navigation .lang { left: initial; right: initial; position: relative; float: left; width: 5rem; min-width: initial; padding: 0; } header.headbg .hflist ul li .box a { margin-top: 0.35rem; } header .navigation .lang .toggle { background: #fff; color: #000; border: #eee 1px solid; border-bottom: none; border-radius: initial; left: initial; } header .navigation .lang .toggle a { color: #000; } header .navigation .lang .toggle li:hover { background: #ddd; } header .lang:hover .toggle, header .lang .toggle.active { top: initial; opacity: 0; visibility: hidden; transform: initial; } header .navigation .link { width: 100%; float: left; } header .navigation .link>div { width: initial; float: left; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); } header .menu { border-top: initial; display: inline-block; position: initial; top: initial; left: initial; width: 100%; float: left; padding: initial; margin: initial; margin-top: initial; line-height: initial; border-top: initial; overflow-y: auto; padding: 0 4%; display: none; opacity: 1; } header.active .menu { display: inline-block; position: fixed; width: 100%; height: calc(100% - 18rem); top: 5rem; left: 0; background: #fff; z-index: 2; } header .menu ul { height: 100%; } header .menu ul, header .menu li { width: 100%; } header .menu li.menuli { height: initial; padding: 0; margin: 0; border-bottom: #e6e6e6 1px solid; } header .menu li.menuli:nth-last-child(1) { border-bottom: none; } header .menu .menuli .box { position: relative; } header .menu .menuli.active .box:before { background: none; } header .menu .menuli .box:before, header .menu .menuli:nth-child(1) .toggle li .box1:before { position: absolute; content: ''; left: initial; bottom: initial; right: 2%; top: 43%; width: 0; height: 0; border-right: 1px solid #333; border-top: 1px solid #333; height: 0.5rem; width: 0.5rem; transform: rotate(45deg) translate(-50%, 0%); -webkit-transform: rotate(45deg) translate(-50%, 0%); -moz-transform: rotate(45deg) translate(-50%, 0%); -ms-transform: rotate(45deg) translate(-50%, 0%); -o-transform: rotate(45deg) translate(-50%, 0%); transition: all 0.5s; border-left: 2px solid transparent; border-bottom: 2px solid transparent; } header .menu .menuli .toggle li .box1:before { top: 1.25rem; } header .menu .menuli:nth-last-child(1) .box:before { display: none } header .menu .menuli:hover .box:before { width: 0.5rem; height: 0.5rem; left: initial; background: initial; } header .menuli:hover .toggle { height: 0; overflow: hidden; } header .menu .menuli .box>a { width: initial; } header .menu li .box { line-height: 3rem; font-size: 1.125rem; overflow: inherit; } header .menu .menuli .box.on:before, header .menu .menuli .toggle li .box1.cur:before { transform: rotate(135deg) translate(0%, 50%); -webkit-transform: rotate(135deg) translate(0%, 50%); -moz-transform: rotate(135deg) translate(0%, 50%); -ms-transform: rotate(135deg) translate(0%, 50%); -o-transform: rotate(135deg) translate(0%, 50%); } header .menu .menuli .box>a, header .menu .menuli .box span { position: initial; top: initial; transform: inherit; } header .menu .menuli .toggle { top: initial; position: initial; left: initial; background: inherit; box-shadow: initial; padding: 0; opacity: 1; transform: initial; transition: initial; width: 100%; height: initial; float: left; display: none; } header .menu .menuli .toggle ul { margin: 0; padding: 0; padding-bottom: 0.5rem; position: initial; left: initial; transform: initial; float: left; } header .menu .menuli .toggle li { width: 100%; margin-left: 0; } header .menu .menuli .toggle li .toggle1 { margin-bottom: 0; } header .menu .menuli .toggle li .box1, header .menu .menuli .toggle li .box2, header .menu .menuli .toggle li .box3 { margin-bottom: initial; border-bottom: initial; line-height: 2.8rem; font-size: 1.125rem; } header .menu .menuli .toggle li .box1 { padding: 0; padding-left: 1rem; position: relative; } header .menu .menuli .toggle li .box2 { padding-left: 2rem; } header .menu .menuli .toggle li .box3 { padding-left: 2rem; } header .menu .menuli .toggle li .box2 a { color: initial; } header .menuli .toggle.subtext ul:before { display: none; } header .menuli .toggle.subtext ul { height: initial; padding: 0; } header .menuli>.toggle>ul>li:nth-child(2) .moretoggle { height: initial; width: 100%; float: left; overflow-y: initial; } header .menuli>.toggle>ul>li:nth-child(2) .moretoggle::-webkit-scrollbar { width: initial; } header .menuli>.toggle>ul>li:nth-child(2) .moretoggle::-webkit-scrollbar-track { -webkit-box-shadow: initial; } header .menuli>.toggle>ul>li:nth-child(2) .moretoggle::-webkit-scrollbar-thumb { background: initial; -webkit-box-shadow: initial; opacity: initial } header .menuli>.toggle>ul>li:nth-child(2) .moretoggle::-webkit-scrollbar-thumb:window-inactive { background: initial; } /**手机专属样式 header.active **/ header.active { display: initial; } header.active a, header.active { color: #3e3e3e; } header.active .navigation { float: right; flex: initial; top: calc(100% - 14rem); left: 0; z-index: 2; } header.active .phone-toggle li { background: #000; } header .company .toggle { right: -10rem; transform: translateY(0px); top: initial; bottom: 140%; border: #eee 1px solid; border-bottom: none; padding: 0; } header.active .navigation .company .toggle.active { right: 0%; opacity: 1; visibility: visible; z-index: 3; background: #fff; overflow: hidden; } header .lang .toggle { top: initial; bottom: 100%; } header.active .navigation .lang .toggle { bottom: 100%; transform: translateY(0px); left: -5rem; } header .lang .toggle p { line-height: 3rem; } header.active .navigation .lang .toggle.active { left: 0; opacity: 1; visibility: visible; } footer .server ul li { padding: 1rem 0; } footer .server ul li a { width: 100%; margin-left: 0; padding-left: 10%; } footer .server li .img img { width: 7rem; height: 7rem; } footer .menu { margin: 1rem 0; } footer .menu ul li { width: 16.6666%; padding: 0; text-align: center; } footer .menu li.online .tel p:nth-child(2), footer .menu li.online .tel p:nth-child(2) a { font-size: 1.5rem; } footer .menu li.online .tel a.pc { display: none; } footer .menu .online { width: 100%; padding: 0; margin: 0; margin: 1.5rem 0 0.5rem 0; } footer .menu .online .tel { width: 33.3333%; } footer .menu .online .add { width: 33.3333%; margin-top: 0.75rem; } #copyright .left, #copyright ul { width: 100%; text-align: center; } #copyright .left .box { float: left; position: relative; left: 50%; transform: translate(-50%, 0); } #copyright ul { display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } } @media(max-width:1024px) { .web, .pc { display: none; } .mobile { display: inline-block; } footer .server ul li a { padding: 0 8% 0 8%; } footer .server li .name { font-size: 1.25rem; } footer .server li .desc { min-height: 3rem; line-height: 1.5rem; } } @media(max-width:768px) { header.active .menu { top: 4rem; } header.layui-header { height: 4rem; } header.active .navigation { top: calc(100% - 14rem); } .nothingdiv { height: 4rem; } header .logo { margin-left: 1rem; } header .logo img, header.headbg .logo img { height: 2.5rem; } header .phone-toggle { width: 4rem; } header .navigation .menuli .toggle li .box1, header .navigation .menuli .toggle li .box2, header .navigation .menuli .toggle li .box3, header .menuli .toggle .box3 a { font-size: 0.875rem; line-height: 2rem; } footer .server ul li { width: 100%; height: inherit; padding: 1rem 0; } footer .server ul li a { padding: 0 2%; } footer .server li .name { font-size: 1rem; line-height: 2rem; padding-left: 2.25rem; } footer .server li .name i { top: 0.875rem; transform: initial; } footer .server li .desc { width: 100%; max-width: 100%; padding-left: 0; padding-right: 0; min-height: 1.25rem; } footer .server li .desc font:before { display: none; } footer .server li .desc font:after { display: none; } footer .server li .desc font { font-size: 0.875rem; line-height: 1.125rem; float: left; padding-left: 2.25rem; overflow: hidden; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } footer .server li .img img { width: 5rem; height: 5rem; } footer .logo { padding: 2rem 0; } footer .logo .left { width: 100%; padding: 0; text-align: center; } footer .logo .left img { width: 60%; position: relative; margin-left: 50%; transform: translate(-50%, 0%); } footer .logo ul { position: relative; right: inherit; top: inherit; padding-top: 2rem; width: auto; float: left; left: 50%; transform: translate(-50%, 0%); } footer .menu { margin: 0; } footer .menu ul li { display: none; } footer .menu ul li.online { display: inline-block; margin: 0; } footer .menu .online .tel { width: 100%; margin-top: 1.5rem; } footer .menu .online .tel:nth-child(2) { margin-top: 0.3125rem; } footer .menu .online .add { width: 100%; margin: 0.5rem 0 1.5rem; } footer .menu .online .add a { padding: 0; float: initial; } footer .menu .online .add font { position: inherit; width: 4.5rem; padding-left: 1.5rem; } #copyright { padding: 1.5rem 0; line-height: 1.25rem; text-align: center; } #copyright .left { width: 100%; } #copyright .left a { display: inline-block; width: 100%; text-align: center; } #copyright ul { display: none; } #copyright a { margin: 0.25rem 0; } #gotop ul li {} #gotop ul li#ToTop { display: inline-block; } #gotop ul li p { display: none; } }