:root{ --theme-color:#2270b7; } * { padding: 0; margin: 0; word-break: break-word; font-family: 微软雅黑; } body{ overflow-X:hidden; } ::-webkit-scrollbar { width: 6px; } /* Track */ ::-webkit-scrollbar-track { background: #d7d7d7; border-radius: 6px; } /* Handle */ ::-webkit-scrollbar-thumb { background: #888; border-radius: 6px; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background:var(--theme-color); } /*翻页*/ .p_page .pageNum.active,.p_page .pageNum:hover,.p_page .next:hover,.p_page .pre:hover,.p_pagebox .next,.p_pagebox .pre { background-color:var(--theme-color)!important; color: #fff!important; border-color: var(--theme-color); border-radius: 0px; } .p_page .next,.p_page .pre,.p_page .pageNum{ border-radius: 0px; line-height: 30px; background-color: #f1f1f1!important; color: #444!important; border:; border: none; border: none; border: alicebluenone; border: aliceblue; border: aliceblue; border: aliceblue; border: aliceblue; border: aliceblue; border: aliceblue; border: aliceblue; } .p_page .next,.p_page .pre{ padding-right: 20px; padding-left: 20px; } .p_page .next .iconfont,.p_page .pre .iconfont{display:none;} .p_page .next .i_next,.p_page .pre .i_pre{display:block;} /**/ /* CSS Document */ * { word-wrap: normal; word-break: normal; } a:active, a:hover { color: var(--theme-color); text-decoration: none; } a:hover, a:focus { color: var(--theme-color); text-decoration: underline; } .container { width: 100%; max-width: 100%; } .fa_ani * { transition: all 0.5s; -moz-transition: all 0.5s; /* Firefox 4 */ -webkit-transition: all 0.5s; /* Safari 和 Chrome */ -o-transition: all 0.5s; /* Opera */ } .fa_ani *:before { transition: all 0.5s; -moz-transition: all 0.5s; /* Firefox 4 */ -webkit-transition: all 0.5s; /* Safari 和 Chrome */ -o-transition: all 0.5s; /* Opera */ } .fa_ani *:after { transition: all 0.5s; -moz-transition: all 0.5s; /* Firefox 4 */ -webkit-transition: all 0.5s; /* Safari 和 Chrome */ -o-transition: all 0.5s; /* Opera */ } a { cursor: pointer; } body, html { overflow-x: hidden !important; } a:focus, a:active, a:hover, a:visited { outline: none !important; text-decoration: none; } i { font-style: normal; } /* .w_grid-000 > div > .p_gridbox { overflow: visible; } .w_grid-000 > div > .p_gridbox:before, .w_grid-000 > div > .p_gridbox:after { clear: both; display: table; content: " "; min-height: 0px; } */ .fa_clearfix:before, .fa_clearfix:after { display: table; clear: both; content: ""; } .fa_imgbig { overflow: hidden; width: 100%; } .fa_imgbig:hover img { transform: scale(1.2); -ms-transform: scale(1.2); /* IE 9 */ -webkit-transform: scale(1.2); /* Safari 和 Chrome */ -o-transform: scale(1.2); /* Opera */ -moz-transform: scale(1.2); /* Firefox */ } .fa_flexline { display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */ display: -moz-box; /* 老版本语法: Firefox (buggy) */ display: -ms-flexbox; /* 混合版本语法: IE 10 */ display: -webkit-flex; /* 新版本语法: Chrome 21+ */ display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */ -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; -moz-flex-wrap: nowrap; flex-wrap: nowrap; } .fa_flexwrap { display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */ display: -moz-box; /* 老版本语法: Firefox (buggy) */ display: -ms-flexbox; /* 混合版本语法: IE 10 */ display: -webkit-flex; /* 新版本语法: Chrome 21+ */ display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */ -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; -moz-flex-wrap: wrap; flex-wrap: wrap; } .fa_flex_between { -webkit-box-pack: justify; -moz-justify-content: space-between; -webkit-justify-content: space-between; justify-content: space-between; } .fa_flex_Xend { -webkit-box-pack: end; -moz-justify-content: flex-end; -webkit-justify-content: flex-end; justify-content: flex-end; } .fa_flex_Xcenter { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .fa_flex_Yend { -webkit-align-items: flex-end; align-items: flex-end; } .fa_flex_Ycenter { -webkit-box-align: center; -moz-align-items: center; -webkit-align-items: center; align-items: center; } .fa_centerY { position: relative; top: 50%; /*偏移*/ transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); } .fa_textoverflow { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; opacity: 1; text-transform: uppercase; } .fa_Img{ position:relative; width:100%; overflow: hidden; } .fa_Img img{ position: absolute; width: 100%; min-height: 100%; left: 50%; top:50%; transform: translate(-50%,-50%); transition: all 0.5s; } .container { width: 100%; margin: 0; padding: 0; } .p_NewsDetail img { max-wight: 100%; } /*内页导航*/ .p_problemCategory { display: none; } .fa_PageNav{font-size:0;text-align:right;} .fa_PageNav a{ display: inline-block; transition: all 0.5s; position: relative; margin: 20px 25px; font-size:16px; color:#fff; opacity:0.8; } .fa_PageNav a:hover,.fa_PageNav a.fa_navon{ color:#fff; opacity:1; } .fa_PageNav a:last-child{margin-right:0;} .fa_PageNav a:after{ content:""; position:absolute; left:-25px; width:1px; background:#fff; opacity:0.3; height:20px; } .fa_PageNav a:first-child:after{display:none;} .fa_PageNav a:before{ position:absolute; left:50%; width:0%; height:3px; background:#fff; bottom:-18px; content:""; transform:translateX(-50%); transition: all 0.5s; display:block; } .fa_PageNav a:hover:before{ width:80%; } .fa_PageNav a.fa_navon:before{ width:80%; } /*关联产品*/ .fa_Related > a { display: block; width: calc((100% - 60px)/4); float: left; padding: 20px; margin-right: 20px; } .fa_Related > a:last-child { margin-right: 0; } .fa_Related > a img { width: 100%; } .fa_Related > a p { margin-top: 20px; font-size: 18px; text-align: center; color: #333; } /**/ .fa_AbList { margin: 80px 0 30px; } .fa_AbList h3 { font-size: 24px; color: #333; font-weight: 300; margin-bottom: 30px; } .fa_AbList .fa_Abli { display: block; width: calc((100% - 60px) / 4); margin-right: 20px; margin-bottom: 20px; background: #fafafa; } .fa_AbList .fa_Abli .fa_ABli_img { overflow: hidden; width: 100%; } .fa_AbList .fa_Abli .fa_ABli_img img { width: 100%; transition: all 0.5s; } .fa_AbList .fa_Abli:nth-child(4n) { margin-right: 0; } .fa_AbList .fa_Abli:hover img { transform:translate(-50%,-50%) scale(1.2); -ms-transform: scale(1.2); /* IE 9 */ -webkit-transform:translate(-50%,-50%) scale(1.2); /* Safari 和 Chrome */ -o-transform:translate(-50%,-50%) scale(1.2); /* Opera */ -moz-transform:translate(-50%,-50%) scale(1.2); /* Firefox */ } .fa_AbList .fa_Abli .fa_ABli_tit { padding: 20px 15px; color: #333; width: 100%; text-align: center; text-transform: capitalize; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .fa_PageCate .fa_CateTit h3{ font-size:30px; font-weight:bold; margin-bottom:10px; color:#ea5514; text-align:center; } .fa_PageCate .fa_CateTit article{ font-size:16px; line-height: 2; margin:auto; max-width: 800px; color:#666; width:80%; text-align:center; } .fa_PageCate{ margin-bottom:30px; } .fa_l4 { display: block; width: calc((100% - 60px) / 4); margin-right: 20px; margin-bottom: 20px; } .fa_l4:nth-child(4n) { margin-right: 0; } .fa_l3 { display: block; width: calc((100% - 60px) / 4); margin-right: 20px; margin-bottom: 20px; } @media screen and (min-width:769px) { .fa_l3:nth-child(4n) { margin-right: 0; } .fa_pchide{display:none!important;} .fa_100vh{height:100vh;} } .fa_More a{display:inline-block;padding:10px 30px;background:#000000;transition:all 0.5s; min-width:120px; text-align:center; } .fa_More a:hover{ background:#ea5514; } .fa_More a span{ display:inline-block; padding-left:50px; transition:all 0.5s; position:relative; line-height:10px; } .fa_More a:hover span{ padding-left:25px; } .fa_More a span i{ font-size:12px; vertical-align:middle; opacity:1; transform:scaleX(2); color:#fff; } .fa_More a span:before{ position:absolute; left:0; top:50%; transform:translateY(-50%); background:#fff; content:""; display:block; height:1px; width:auto; right:4px; opacity:1; } .fa_More2{ text-align:center; } .fa_More2 a{ display:inline-block; min-width:260px; height:60px; text-align:center; transition:all 0.5s; position:relative; overflow:hidden; line-height:60px; } .fa_More2 a span{position:relative;z-index:10;transition:all 0.5s; display: block;} .fa_More2 a span:before{content:"GO⇢";position:absolute;transform:translate(-50%,50%);left:50%;top:50%;display:block;width:100%; color:#fff;font-size:18px; } .fa_More2 a:hover span{ transform: translateY(-100%);} .fa_More2 a:before{ background:rgba(255,255,255,0.8); display:block; width:100%; height:100%; position:absolute; content:""; border-radius:10px; transition:all 0.5s; left:50%; transform:translateX(-50%); } .fa_More2 a:hover:before{ width:60%; background:rgba(1,78,146,0.9); } .fa_More2 a:hover{color:#fff;} .fa_More2 a:after{ position:absolute; width:100%; transform:translate(100%,-50%); display:block; left:0; background:#ea5514; opacity:0.5; transition:all 0.5s; height:3px; content:""; top:50%; } .fa_More2 a:hover:after{ transform:translate(-100%,-50%); background:#fff; } .fa_More3{ text-align:center; } .fa_More3 a{ display: inline-block; width: 40px; height: 40px; line-height: 42px; color: #000; font-size: 28px; text-align: center; position: relative; } .fa_More3 a i{ transition: all 0.5s; } .fa_More3 a:hover i{ transform:scale(1.1); } .fa_More3 .fa_svg{ position:absolute; top:0; left:0; } .fa_More3 .fa_svg .fa_cir{ fill: none; stroke: #333; stroke-width: 1; stroke-dasharray: 30, 0; transition: all 1s ; } .fa_More3 a:hover .fa_svg .fa_cir{ stroke-width: 1; stroke-dasharray: 0, 30; stroke-dashoffset: 20; } @media screen and (max-width:768px) { .fa_mf26{font-size:26px!important;} .fa_mf24{font-size:24px!important;} .fa_mf22{font-size:22px!important;} .fa_mf20{font-size:20px!important;} .fa_mf18{font-size:18px!important;} .fa_mf16{font-size:16px!important;} .fa_mf14{font-size:14px!important;} .fa_mohide{display:none!important;} .fa_More a{padding:5px 10px;} .fa_More a i{right: 10px;} .fa_More a,.fa_More2 a{ height:auto; line-height:30px; } .fa_l3,.fa_l2 { display: block; width: 100%; margin:10px 0; } .fa_PageCate .fa_CateTit h3{ font-size:18px; } .fa_Related > a, .fa_AbList .fa_Abli { width: calc((100% - 20px)/2); } .fa_Related > a:nth-child(2n), .fa_AbList .fa_Abli:nth-child(2n) { margin-right: 0; } .p_btn-hide { background: #333; } .p_btn-hide .p_c-fff { background: #333; } .fa_PageNav { display: none; } .p_problemCategory { display: block; } .p_problemCategory .btn-primary { width: 100%; border: none; border-radius: 0; text-align: left; background: #333; padding: 10px 20px; text-align: center; text-transform: uppercase; } input::-webkit-input-placeholder { font-size: 14px; line-height: 1.42857143; } input::-moz-placeholder { font-size: 14px; line-height: 1.42857143; } input:-ms-input-placeholder { font-size: 14px; line-height: 1.42857143; } input:-moz-placeholder { font-size: 14px; line-height: 1.42857143; } } #easy_zoom { transition: all 0s; -moz-transition: all 0s; /* Firefox 4 */ -webkit-transition: all 0s; /* Safari 和 Chrome */ -o-transition: all 0s; } #easy_zoom * { transition: all 0s; -moz-transition: all 0s; /* Firefox 4 */ -webkit-transition: all 0s; /* Safari 和 Chrome */ -o-transition: all 0s; /* Opera */ } .p_ProductDetail img, .p_NewsDetail img ,.p_contentBox img{ max-width: 100%; height: auto!important; width: auto!important; max-height: 100%; } .p_content .reset_style { line-height:2; } .btn-primary:active:hover, .btn-primary.active:hover, .open > .dropdown-toggle.btn-primary:hover, .btn-primary:active:focus, .btn-primary.active:focus, .open > .dropdown-toggle.btn-primary:focus, .btn-primary:active.focus, .btn-primary.active.focus, .open > .dropdown-toggle.btn-primary.focus .p_pagebox .next, .p_pagebox .pre { background-color: var(--theme-color); } /*加载动效 topshow(从上往下)fa_LeftShow (从左往右) */ .delighter{ overflow:hidden; position:relative; } .fa_TopShow.delighter:before{ width:100%; position:absolute; height:100%; top:0; left:0; transform: translateY(0%); display:block; background:#fff; z-index:10; content:""; transition: 1s cubic-bezier(0.68, 0.54, 0.14, 0.96) 0.5s; } .fa_TopShow.started.delighter:before{ transform: translateY(100%); } .fa_LeftShow.delighter:before{ width:100%; position:absolute; height:100%; top:0; left:0; transform: translateX(0%); display:block; background:#fff; z-index:10; content:""; transition: 1s cubic-bezier(0.68, 0.54, 0.14, 0.96) 0.5s; } .fa_LeftShow.started.delighter:before{ transform: translateX(100%); } .fa_RightShow.delighter:before{ width:100%; position:absolute; height:100%; top:0; left:0; transform: translateX(0%); display:block; background:#fff; z-index:10; content:""; transition: 1s cubic-bezier(0.68, 0.54, 0.14, 0.96) 0.5s; } .fa_RightShow.started.delighter:before{ transform: translateX(-100%); } .fa_BottomShow.delighter:before{ width:100%; position:absolute; height:100%; top:0; left:0; transform: translateX(0%); display:block; background:#fff; z-index:10; content:""; transition: 1s cubic-bezier(0.68, 0.54, 0.14, 0.96) 0.5s; } .fa_BottomShow.started.delighter:before{ transform: translateY(-100%); } /*内页banner动画*/ @-webkit-keyframes fa_scale_b { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); } 100% { -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); transform: scale(2); } } @-moz-keyframes fa_scale_b { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); } 100% { -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); transform: scale(2); } } @-o-keyframes fa_scale_b { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); } 100% { -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); transform: scale(2); } } @-webkit-keyframes fa_scale_a { 0% { -webkit-transform:translateX(-50%) scale(1); -moz-transform:translateX(-50%) scale(1); -ms-transform:translateX(-50%) scale(1); -o-transform:translateX(-50%) scale(1); transform:translateX(-50%) scale(1); } 50% { -webkit-transform:translateX(-50%) scale(1.5); -moz-transform:translateX(-50%) scale(1.5); -ms-transform:translateX(-50%) scale(1.5); -o-transform:translateX(-50%) scale(1.5); transform:translateX(-50%) scale(1.5); } 100% { -webkit-transform:translateX(-50%) scale(2); -moz-transform:translateX(-50%) scale(2); -ms-transform:translateX(-50%) scale(2); -o-transform:translateX(-50%) scale(2); transform:translateX(-50%) scale(2); } } @-moz-keyframes fa_scale_a { 0% { -webkit-transform:translateX(-50%) scale(1); -moz-transform:translateX(-50%) scale(1); -ms-transform:translateX(-50%) scale(1); -o-transform:translateX(-50%) scale(1); transform:translateX(-50%) scale(1); } 50% { -webkit-transform:translateX(-50%) scale(1.5); -moz-transform:translateX(-50%) scale(1.5); -ms-transform:translateX(-50%) scale(1.5); -o-transform:translateX(-50%) scale(1.5); transform:translateX(-50%) scale(1.5); } 100% { -webkit-transform:translateX(-50%) scale(2); -moz-transform:translateX(-50%) scale(2); -ms-transform:translateX(-50%) scale(2); -o-transform:translateX(-50%) scale(2); transform:translateX(-50%) scale(2); } } @-o-keyframes fa_scale_a { 0% { -webkit-transform:translateX(-50%) scale(1); -moz-transform:translateX(-50%) scale(1); -ms-transform:translateX(-50%) scale(1); -o-transform:translateX(-50%) scale(1); transform:translateX(-50%) scale(1); } 50% { -webkit-transform:translateX(-50%) scale(1.5); -moz-transform:translateX(-50%) scale(1.5); -ms-transform:translateX(-50%) scale(1.5); -o-transform:translateX(-50%) scale(1.5); transform:translateX(-50%) scale(1.5); } 100% { -webkit-transform:translateX(-50%) scale(2); -moz-transform:translateX(-50%) scale(2); -ms-transform:translateX(-50%) scale(2); -o-transform:translateX(-50%) scale(2); transform:translateX(-50%) scale(2); } } @-ms-keyframes fa_scale_a { 0% { -webkit-transform:translateX(-50%) scale(1); -moz-transform:translateX(-50%) scale(1); -ms-transform:translateX(-50%) scale(1); -o-transform:translateX(-50%) scale(1); transform:translateX(-50%) scale(1); } 50% { -webkit-transform:translateX(-50%) scale(1.5); -moz-transform:translateX(-50%) scale(1.5); -ms-transform:translateX(-50%) scale(1.5); -o-transform:translateX(-50%) scale(1.5); transform:translateX(-50%) scale(1.5); } 100% { -webkit-transform:translateX(-50%) scale(2); -moz-transform:translateX(-50%) scale(2); -ms-transform:translateX(-50%) scale(2); -o-transform:translateX(-50%) scale(2); transform:translateX(-50%) scale(2); } } /*swiper*/ .fa_SwpBtn>div{ position:absolute; transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transition: all 0.5s; top:50%; z-index: 20; cursor: pointer; color:#fff; font-size:1.5vw; width:2.5vw; height:2.5vw; line-height:2.5vw; border-radius:50%; text-align:center; border:#fff dotted 1px; } .fa_SwpBtn>div:hover{ opacity:1; } .fa_SwpBtn .fa_SwpBtn_l{ left:2vw; } .fa_SwpBtn .fa_SwpBtn_r{ right:2vw; } .fa_pagination{ position:absolute; bottom:5%; width:100%; left:0; right:0; text-align:center; z-index:99; } .fa_pagination span{ width:8px; height:8px; background:rgba(255,255,255,0.5); display:inline-block; border-radius:500px; margin:0 5px; transition: all 0.5s; cursor: pointer; } .fa_pagination span.swiper-pagination-bullet-active{ background:rgba(255,255,255,0.5); width:50px; } .fa_Imgmax img{ max-width:100%!important; max-height:100%!important; min-width:0%!important; min-height:0%!important; width:auto!important; height:auto!important; } .fa_Imgmin img{ min-width:100%!important; min-height:100%!important; max-width:130%!important; max-height:130%!important; width:auto!important; height:auto!important; } @keyframes anim_load1 { 0% { transform: translate3d(-100%,0%,0); } 50% { transform: translate3d(0,0%,0); } 100% { transform: translate3d(100%,0%,0); } }