html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
background: transparent;
text-decoration:none;
font-size: 14px;
box-sizing: border-box;
/* outline: 0; */
/* font-size: 100%; */
/* vertical-align: baseline; */
}
body {
line-height: 1;
}
@media ( min-width: 990px){
body {
/* width: 1920px; */
/* margin: 0 auto; */
}
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before,blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
body,a{
font-family: Google Sans,-apple-system,BlinkMacSystemFont,sans-serif,"SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial";color: #1D1D1D;
}
a:hover{ text-decoration:none; color:#0071E3;}
body{overflow-x: hidden;}
img{display: block;max-width: 100%}
.boxs{border:3px solid #000000;box-shadow: 3px 3px 0 #000000;}
.wrapper{padding: 0 15px;}
.container{width: 1600px;max-width: 100%;margin: 0 auto;}
input,button {outline:none;}
.iconFlag {
width: 24px;
height: 24px;
background: url('csprites.png') no-repeat;
display: inline-block;
margin-right: 12px;
}
.bg-flag_01 {background-position: -10px -10px;}
.bg-flag_02 {background-position: -54px -10px;}
.bg-flag_03 {background-position: -98px -10px;}
.bg-flag_04 {background-position: -142px -10px;}
.bg-flag_05 {background-position: -186px -10px;}
.bg-flag_06 {background-position: -230px -10px;}
.bg-flag_07 {background-position: -274px -10px;}
.bg-flag_08 {background-position: -318px -10px;}
.bg-flag_09 {background-position: -362px -10px;}
.bg-flag_10 {background-position: -406px -10px;}
.bg-flag_11 {background-position: -450px -10px;}
.bg-flag_12 {background-position: -494px -10px;}
.bg-flag_13 {background-position: -538px -10px;}
.bg-flag_14 {background-position: -10px -48px;}
.bg-flag_15 {background-position: -55px -48px;}
.bg-flag_16 {background-position: -99px -48px;}
.bg-flag_17 {background-position: -143px -48px;}
.bg-flag_18 {background-position: -185px -48px;}
.iconMedia {
width: 24px;
height: 24px;
background: url('csprites.png') no-repeat;
display: inline-block;
}
.bg-media_01 {background-position: -10px -88px;}
.bg-media_02 {background-position: -54px -88px;}
.bg-media_03 {background-position: -98px -88px;}
.bg-media_04 {background-position: -142px -88px;}
.bg-media_05 {background-position: -186px -88px;}
.bg-media_06 {background-position: -230px -88px;}
.iconStar {
width: 150px;
height: 24px;
background: url('csprites.png') no-repeat;
display: inline-block;
}
.bg-star_00 {background-position: -5px -128px;}
.bg-star_01 {background-position: -5px -152px;}
.bg-star_02 {background-position: -155px -128px;}
.bg-star_03 {background-position: -155px -152px;}
.bg-star_04 {background-position: -305px -128px;}
.bg-star_05 {background-position: -305px -152px;}
.bg-star_06 {background-position: -455px -128px;}
.product_listMain .layer2 .layer2Right .form-submit {
border: none;
display: block;
text-align: center;
width: 173px;
height: 44px;
line-height: 28px;
font-size: 14px;
color: #fff;
border-radius: 22px;
color: #fff;
background: #0071e3;
}
.respForm {
padding: 3.125em;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 5px 5px 15px -1px rgba(0, 0, 0, 0.75);
background-color: #eff7fc;
width: 260px;
}
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}
#form-popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
z-index: 1000;
}
.form_container {
width: 450px;
height: 700px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 15px;
padding: 50px 40px 20px 40px;
box-shadow: 0px 106px 42px rgba(0, 0, 0, 0.01),
0px 59px 36px rgba(0, 0, 0, 0.05), 0px 26px 26px rgba(0, 0, 0, 0.09),
0px 7px 15px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
border-radius: 11px;
font-family: "Inter", sans-serif;
background-color:#eff7fc;
}
.title_container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
min-width:280px;
}
.title {
margin: 0;
font-size: 20px;
font-weight: 700;
color: #212121;
}
.subtitle {
font-size: 18px;
max-width: 80%;
text-align: center;
line-height: 1.1rem;
color: #8B8E98;
}
.input_container {
margin-top: 20px;
width: 100%;
height: fit-content;
position: relative;
display: flex;
flex-direction: column;
gap: 5px;
}
.input_label {
font-size: 18px;
color: #8B8E98;
font-weight: 600;
}
.input_field {
width: auto;
height: 40px;
padding: 0 0 0 10px;
border-radius: 7px;
outline: none;
border: 1px solid #e5e5e5;
filter: drop-shadow(0px 1px 0px #efefef)
drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
}
.input_field:focus {
border: 1px solid transparent;
box-shadow: 0px 0px 0px 2px #242424;
background-color: transparent;
}
.messageBox{
width: auto;
height: 80px;
padding: 10px;
border-radius: 7px;
outline: none;
border: 1px solid #e5e5e5;
filter: drop-shadow(0px 1px 0px #efefef)
drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
}
.sign-in_btn {
margin-top:15px;
width: 60%;
height: 40px;
border: 0;
margin-left: 20%;
background: #115DFC;
border-radius: 7px;
outline: none;
color: #ffffff;
cursor: pointer;
}
body{ max-width: 1750px; margin: 0 auto;}
.index_title{margin-top: 120px; margin-bottom:80px; display:flex;justify-content:space-between;}
.index_title span{font-size: 56px;line-height:56px}
.index_title a{display: flex;align-items: center;font-size: 17px;color: #0071E3}
.index_title a img{margin-left: 4px}
@media ( max-width: 1500px){
.index_title{margin: 100px 0 60px;height: 46px;}
.index_title span{font-size:46px;line-height: 46px;}
.index_title a{font-size: 17px}
}
@media ( max-width: 991px){
.index_title{margin: 40px 0 40px;height: 26px}
.index_title span{font-size:26px;line-height: 26px;}
.index_title a{font-size: 16px}
}
@media ( max-width: 768px){
}
#overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; }
#popformContainer { display: none; position: fixed; left: 50%; top: 50%;transform: translate(-50%, -50%);z-index: 1001; }
#thxformContainer { display: none; position: fixed; left: 50%; top: 50%;transform: translate(-50%, -50%);z-index: 1002; }
.image-fit{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.header{ position:fixed; left: 0; top:0; width:100%; z-index:100; padding: 0 15px;background-color: #ffffff}
.header .container{width: 1200px; display: flex;justify-content: space-between; align-items: center;height:80px; }
.header .nav_list{display: flex; align-items: center;}
.header .nav_list li{margin-right: 40px}
.header .nav_list a{color: #606060;font-size: 15px;}
.header .nav_list a:hover{color:#0071E3;}
.header .nav_list .btn_close{position: absolute; top: 18px;right: 15px; cursor: pointer;display: none;margin-right: 0;}
.header .right{display: flex; align-items: center;}
.header .languages{position: relative; padding-right: 15px;}
.header .languages span{cursor: pointer;}
.header .languages .options{position: absolute;background: #ffffff; border-radius: 12px; width: 200px; box-shadow: 0 4px 10px rgba(0, 0, 0,0.2); padding: 10px 20px; right: 0;top:36px;display:none}
.header .languages a{display: flex;align-items: center; height:56px;}
.header .languages .item a{display: flex;align-items: center; height:56px;}
.header .languages .item a img{margin-right: 12px}
.header .languages .options .btn_close{position: absolute; top: 18px;right: 15px; cursor: pointer;display: none}
.header_bg{height: 80px;}
.header_menu{display: none;margin-left: 20px;cursor: pointer;}
.header .logo{display:flex;}
.nav_list {
display: flex;
flex-wrap: wrap;
}
.nav_list > li {
position: relative;
}
.dropdown-menu {
display: none;
position: absolute;
left: 0;
background-color: #FFF;
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
min-width: 160px;
z-index: 1;
margin-top: 2px;
padding:10px;
border-radius: 10px;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu li {
white-space: nowrap;
padding:10px;
}
.header .nav_list .dropdown {
color: #606060;
font-size: 15px;
cursor: pointer;
}
.header .nav_list .dropdown:hover {
color: #0071E3;
}
@media ( max-width:1279px){
.header .languages{padding-right: 0;}
.header .nav_list li{margin-right: 30px}
}
@media ( max-width: 768px){
.header_menu{display:block;}
.header .nav_list{ position:absolute;right:0;top:0;width:50%; display:block;background:#fcfcfc;border-radius: 30px; padding-top: 60px;padding-left:30px;display:none }
.header .nav_list a{color: #1D1D1D;font-size: 16px; line-height: 46px;}
.header .nav_list .btn_close{display:block;}
.header .container{height:60px; }
.header .logo1{height:30px}
.header .logo2{display: none}
.header .languages{position: static; }
.header .languages .options{background:#fcfcfc;border-radius: 30px; width:50%;right: 0;top: 0; box-shadow: none; padding-top: 60px;}
.header .languages .item a{font-size: 22px;color: #1D1D1D;}
.header .languages .options .btn_close{display:block;}
.header_bg{height:60px;}
.nav_list li {
list-style-type: none;
margin: 0;
padding: 0;
text-align: left;
}
.dropdown-menu {
position: relative;
display: block;
background-color: #FFF;
box-shadow: none;
}
.dropdown-menu.active {
display: block;
}
.dropdown {
font-size:16px;
}
.dropdown-menu li {
font-size:12px;
margin: -10px 0;
padding: 0;
}
.nav_list .dropdown .dropdown-menu li a {
color: #5e5e5e;
}
.nav_list .dropdown {
padding-top:18px;
}
}
/*banner*/
.banner{ position: relative; overflow:hidden; width: 100%; }
.banner .swiper-slide img{width:1920px;margin: 0 auto}
.banner .swiper-slide{position: relative;}
.banner .swiper-slide .banner_wrap{position: absolute; left: 0;top: 0;width: 100%;height: 100%; padding: 0 15px}
.banner .swiper-slide .banner_wrap .container{display: flex;flex-flow: column;justify-content: center;height: 100%; width: 12rem}
.banner .btn_box{position: absolute; height:100%;width: 100%; left: 0;top: 0; padding: 0 15px}
.banner .btn_box .container{position: relative;height: 100%;width: 16rem}
.banner .swiper-button-next,.banner .swiper-button-prev{width: 0.48rem;height: 0.48rem;background: none;margin-top: -0.24rem}
.banner .swiper-pagination-bullet{width: 8px;height: 8px;border-radius: 8px;background: #ffffff;opacity: 1;}
.banner .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin: 0 0.08rem}
.banner .swiper-pagination-bullet-active{width: 0.24rem;background:#0071E3}
.banner .swiper-slide2{color: #ffffff;}
.banner .tit1{font-size: 0.4rem;margin-bottom: 0.4rem;font-weight: bold;}
.banner .tit2{font-size: 0.4rem;color: #0071E3;font-weight: bold; margin-bottom: 0.05rem; line-height: 0.45rem}
.banner .des{font-size: 0.24rem; line-height: 0.4rem;margin-bottom: 0.4rem}
.banner .btn a{display:inline-block; width: 2.63rem;height: 0.44rem;border-radius:0.44rem;text-align: center;line-height: 0.44rem;background:#0071E3;font-size: 0.17rem;color: #ffffff}
.banner .swiper-button-next:after{ display:none;}
.banner .swiper-button-prev:after{ display:none;}
@media ( max-width: 991px){
.banner .btn{display: none}
.banner .tit1{margin-left: -1.0rem;}
.banner .tit2{margin-left: -1.0rem;}
.banner .des{margin: -0.1rem -1.0rem 0 -1.0rem; line-height:0.8rem;}
.banner .swiper-button-next,.banner .swiper-button-prev{width: 1.2rem;height: 1.2rem; background: none; margin: -0.54rem -1.2rem 0 -1.2rem; }
}
/*new_product*/
.new_product{ padding:0 15px; }
.new_product .title{margin-bottom: 30px;}
.new_product_list{display: flex;justify-content: space-between;flex-wrap: wrap;}
.new_product_list > a{ width: calc(25% - 15px); border-radius: 25px;overflow: hidden; position: relative; }
.new_product_list .item > img{width: 100%; transition: all 0.3s ease}
.new_product_list .item .text_info{position: absolute;left: 0;top:0;width: 100%;height: 100%; padding: 32px; display: flex;flex-flow: column;justify-content: space-between;transition: all 0.3s}
.new_product_list .item .tit{font-size: 24px;line-height: 32px;margin-bottom: 10px;}
.new_product_list .item .des{font-size: 17px;line-height: 23px;display: none}
.new_product_list .item .text_info .bot{flex: 1;display: flex;align-items: center;justify-content: center;display: none;}
.new_product_list .item .text_info .bot span{ width:117px;height:36px;text-align:center;line-height:36px;display:inline-block;background:#0071E3;color:#ffffff;font-size:14px;border-radius:36px; }
@media ( max-width: 1300px){
.new_product_list .item{border-radius: 20px;}
.new_product_list .item .text_info{padding: 26px;}
.new_product_list .item .tit{font-size: 20px;line-height: 28px;margin-bottom: 10px;}
.new_product_list .item .des{font-size: 16px;line-height: 22px;}
}
@media ( max-width: 991px){
.new_product_list > a{width: 100%; border-radius: 10px}
.new_product_list > a{width: calc(50% - 7px); border-radius: 10px; margin-top:12px;}
.new_product_list .item .text_info{padding:10px 15px;}
.new_product_list .item .tit{font-size:14px;line-height: 22px;margin-bottom:5px;}
.new_product_list .item .des{font-size:12px;line-height: 20px;}
.new_product_list .item .text_info .bot a{width: 90px;height: 30px;line-height: 30px;font-size: 12px;}
}
@media ( min-width: 992px){
.new_product_list .item .text_info:hover{background: rgba(0, 0, 0,0.3);color: #ffffff}
.new_product_list .item .text_info:hover .bot{display:flex;}
.new_product_list .item .text_info:hover .des{display:block;}
.new_product_list .item:hover img{transform: scale(1.02);}
}
.new_product_list3c{display: flex;justify-content: space-between;flex-wrap: wrap;}
.new_product_list3c > a{ width: calc(25% - 15px); border-radius: 25px;overflow: hidden; position: relative; }
.new_product_list3c .item > img{width: 100%; transition: all 0.3s ease}
.new_product_list3c .item .text_info{position: absolute;left: 0;top:0;width: 100%;height: 100%; padding: 32px; display: flex;flex-flow: column;justify-content: space-between;transition: all 0.3s}
.new_product_list3c .item .tit{font-size: 24px;line-height: 32px;margin-bottom: 10px;}
.new_product_list3c .item .des{font-size: 17px;line-height: 23px;display: none}
.new_product_list3c .item .text_info .bot{flex: 1;display: flex;align-items: center;justify-content: center;display: none;}
.new_product_list3c .item .text_info .bot span{ width:117px;height:36px;text-align:center;line-height:36px;display:inline-block;background:#0071E3;color:#ffffff;font-size:14px;border-radius:36px; }
@media ( max-width: 1300px){
.new_product_list3c .item{border-radius: 20px;}
.new_product_list3c .item .text_info{padding: 26px;}
.new_product_list3c .item .tit{font-size: 20px;line-height: 28px;margin-bottom: 10px;}
.new_product_list3c .item .des{font-size: 16px;line-height: 22px;}
}
@media ( max-width: 991px){
.new_product_list3c > a{width: 100%; border-radius: 10px}
.new_product_list3c .item:nth-child(-n+2) {margin-bottom: 15px;}
.new_product_list3c .item .text_info{padding:10px 15px;}
.new_product_list3c .item .tit{font-size:14px;line-height: 22px;margin-bottom:5px;}
.new_product_list3c .item .des{font-size:12px;line-height: 20px;}
.new_product_list3c .item .text_info .bot a{width: 90px;height: 30px;line-height: 30px;font-size: 12px;}
}
@media ( min-width: 992px){
.new_product_list3c .item .text_info:hover{background: rgba(0, 0, 0,0.3);color: #ffffff}
.new_product_list3c .item .text_info:hover .bot{display:flex;}
.new_product_list3c .item .text_info:hover .des{display:block;}
.new_product_list3c .item:hover img{transform: scale(1.02);}
}
/*product_solutions*/
.product_solutions{padding: 0 15px}
.product_solutions_list{display: flex;justify-content: space-between;flex-wrap:wrap; }
.product_solutions_list a{ width: calc(50% - 10px); display: block;}
.product_solutions_list .tit{font-size: 28px;margin-bottom: 20px;color:#1D1D1D;margin-top: 20px;font-weight: bold;}
.product_solutions_list .des{font-size: 17px;color:#606060;}
.product_solutions_list a:hover .tit{color:#0071E3}
.product_solutions_list a:hover .des{color:#0071E3}
.product_solutions_list .img{overflow: hidden;border-radius: 30px}
.product_solutions_list .img:hover {transform: scale(1.02); transition: transform 0.3s ease; box-shadow: 0 4px 10px rgba(0, 0, 0,0.2);}
.product_solutions_list .img img{transition: all 0.3s ease}
.product_solutions_list .img:hover img{transform: scale(1.02);}
@media ( max-width: 1300px){
.product_solutions_list .tit{font-size: 24px;margin-bottom:20px;margin-top: 20px;}
.product_solutions_list .des{font-size: 16px;}
}
@media ( max-width: 991px){
.product_solutions_list a{width: 100%}
.product_solutions_list a:first-child{margin-bottom: 30px}
.product_solutions_list .tit{font-size: 14px;margin-bottom:15px;margin-top: 15px;}
.product_solutions_list .des{font-size: 12px;}
}
/*about_us*/
.about_us{padding: 0 15px;}
.about_us .big{font-size: 36px;font-weight: bold;text-align: center; margin-bottom: 30px; margin-left:50px;margin-right:50px; line-height:1.0rem;}
.about_us .small{font-size: 17px;text-align: center; width: 1075px; max-width: 100%;margin: 0 auto; line-height: 30px;margin-bottom: 80px}
.about_us .small br{display: none;}
.about_us_list{display:flex;justify-content: space-between;flex-wrap: wrap;}
.about_us_list .number .numArea{width:180px; text-align:right;}
.about_us_list .item{width: calc(33.3333% - 11px); border-radius: 30px;background: #FAFAFA;display: flex;flex-flow: column;align-items: center;justify-content: center; height: 320px;padding: 0 15px}
.about_us_list .item .number{display: flex; align-items: flex-end;color: #0071E3;font-size: 36px;margin-bottom: 36px}
.about_us_list .item .number span{font-size: 72px; display: flex;align-items: center;}
.about_us_list .item .number b{font-size: 72px; font-weight: initial;}
.about_us_list .item .number span img{margin-right: 15px;}
.about_us_list .item .text{font-size: 17px; width: 380px;max-width: 100%;line-height: 23px;text-align: center;}
@media ( max-width:1300px){
.about_us_list .item .number{font-size: 30px;}
.about_us_list .item .number span{font-size:52px;}
.about_us_list .item .number span img{width:36px}
}
@media ( max-width: 991px){
.about_us .big{font-size:14px; margin-bottom:20px}
.about_us .small{font-size:12px; line-height:22px;margin-bottom:30px}
.about_us .small br{display: inline;}
.about_us_list .item{width: 100%;border-radius: 5px; height: 200px;}
.about_us_list .item:nth-child(-n+2) {margin-bottom: 15px;}
.about_us_list .item .number{font-size:24px; margin-bottom: 20px}
.about_us_list .item .number span{font-size:36px;}
.about_us_list .item .number b{font-size: 36px;}
.about_us_list .item .number span img{width:28px}
.about_us_list .item .text{font-size: 14px;}
.about_us_list .number .numArea{width:100px; text-align:right;}
}
/*news_blogs*/
.news_blogs{padding: 0 15px}
.news_blogs_list{display: flex;justify-content: space-between;flex-wrap:wrap; }
.news_blogs_list .item{width: calc(33.3333% - 11px); display: block;}
.news_blogs_list .tit{font-size: 28px;margin-bottom: 20px;color:#1D1D1D;margin-top: 20px;font-weight: bold;}
.news_blogs_list .des{font-size: 17px;color:#606060;}
.news_blogs_list .text a{color: #0071E3;font-size: 17px;display: flex;margin-top:20px;}
.news_blogs_list .img{position: relative;border-radius: 30px;overflow: hidden; }
.news_blogs_list .img .item_cat{position:absolute;left: 0;top: 0;width: 143px;height: 35px;z-index: 2;background: #0071E3;font-size: 14px;color: #ffffff; border-radius: 30px 0 30px 0;text-align: center;line-height: 35px;}
.news_blogs_list .img:hover {transform: scale(1.02); transition: transform 0.6s ease; box-shadow: 0 4px 10px rgba(0, 0, 0,0.2);}
@media ( max-width: 1300px){
.news_blogs_list .tit{font-size: 24px;margin-bottom:20px;margin-top: 20px;}
.news_blogs_list .des{font-size: 16px;}
}
@media ( max-width: 991px){
.news_blogs_list .item{width: 100%}
.news_blogs_list .item:nth-child(-n+2) {margin-bottom:25px;}
.news_blogs_list .tit{font-size: 18px;margin-bottom:15px;margin-top: 15px;}
.news_blogs_list .des{font-size: 14px;}
.news_blogs_list .text a{font-size: 14px; margin-top: 15px}
}
/*footer*/
.footer{padding:80px 15px; margin-top: 80px;background:#FAFAFA}
.footer .container{width: 1200px;}
.footer_list{display:flex;justify-content: space-between;}
.footer_list .footer_col{max-width:300px;}
.footer_list .item_tit{display: flex;justify-content: space-between;margin-bottom: 20px;font-size: 17px; align-items: center;font-weight: bold;}
.footer_list .item_tit span{display: block; padding-left: 30px;cursor: pointer;}
.footer_list .item_tit img{width: 16px; display: none; transition: all 0.3s}
.footer_list .item_nav .nav a{margin-bottom: 20px;color:#606060;font-size: 14px;display:inline-block;}
.footer_list .footer_col .item{margin-bottom:10px;}
.footer_list .footer_col .share{display: flex;margin-bottom: 20px;}
.footer_list .footer_col .share a{display:inline-block;margin-right:10px;}
.footer_list .item_contact .item_tit{font-size: 32px;}
.footer_list .item_contact .line{display:flex; margin-bottom: 20px;}
.footer_list .item_contact .line .icon{display: inline-block;width:40px;}
.footer_list .item_contact .line .text{flex: 1}
.footer_list .item_contact .tel .text{font-size: 24px;color:#0071E3;padding-top:6px;}
.footer_list .item_contact .email .text{font-size: 24px;color:#0071E3;padding-top:6px;}
.footer_list .item_contact .addr .text{font-size:14px;color:#606060;line-height:19px;}
.footer_list .item_contact .btn button{
display: inline-flex;align-items: center;justify-content: center; height: 36px; width: 136px; border-radius:22px; text-align: center;
font-size: 14px; color: #fff; background: #0071e3;text-decoration: none; border:none;
}
@media ( max-width: 991px){
.footer_list{flex-flow: column;}
.footer_list .footer_col{max-width:100%;}
.footer{padding:40px 15px;margin-top: 40px}
.footer_list .item_tit{font-size: 16px;}
.footer_list .item_contact .item_tit{font-size: 16px;}
.footer_list .item_nav{display: none}
.footer_list .item_info{display: none}
.footer_list .footer_col .item{border-bottom: 1px solid #E1E1E1; margin-bottom: 20px}
.footer_list .item_tit img{width: 16px; display:block;}
.footer_list .item_contact .tel .text{font-size: 16px;}
.footer_list .item_contact .email .text{font-size: 16px;}
.footer_list .item.on .item_nav{display:inline-block;}
.footer_list .item.on .item_info{display:inline-block;}
.footer_list .item.on .item_tit img{transform: rotate(180deg);}
}
/*.product_listMain*/
.w1380{ width: 1380px; margin: 0 auto;}
.banner img{ display: block; width: 100%;}
.product_listMain .layer1{ width: 100%; overflow: hidden;}
.product_listMain .layer1 .swiper-container{ width: 100%; height: auto;}
.product_listMain .layer1 .icon{ padding-top: 130px; width: 100%;}
.product_listMain .layer1 .icon img{ display: block; width: 365px; margin: 0 auto; border-radius:50% ;}
.product_listMain .layer1 .swiper-wrapper{ display: block;}
.product_listMain .layer1 .swiper-slide{ width: 32%; float: left; margin: 0 2% 0 0;}
.product_listMain .layer1 .swiper-slide:nth-child(3n){ margin-right: 0;}
.product_listMain .layer1 .text{ padding: 20px 0; width: 100%;}
.product_listMain .layer1 .text .tit{ border-bottom: 1px solid #e1e1e1; padding: 55px 0 20px 0;}
.product_listMain .layer1 .text .tit h2{ font-size: 22px; color: #1d1d1d; margin-bottom: 25px;}
.product_listMain .layer1 .text .tit p{ font-size: 22px; line-height: 28px; height: 50px;}
.product_listMain .layer1 .textBox{ width: 100%; border-bottom: 1px solid #e1e1e1; padding: 25px 0;}
.product_listMain .layer1 .textBox h2{ font-weight: normal; font-size: 22px; color:#1d1d1d; margin-bottom: 25px; color: #000;}
.product_listMain .layer1 .textBox p{ font-size: 14px; line-height: 20px; color: #333;}
.product_listMain .layer1 .textBox h3{ font-size: 22px; color: #000; line-height: 48px; color: #000;}
.product_listMain .layer1 .textBox p span{ font-size: 22px; color: #000;}
.product_listMain .layer1 .textBox p.mg{ margin-top: 15px; height:48px;}
.product_listMain .layer1 .textBox li{ font-size: 14px; line-height: 32px; color: #333;}
.product_listMain .layer1 .textBox li span{ display: inline-block; vertical-align: middle; background: url(../images/pl_05.png); width: 15px; height: 15px; background-size:100% 100% ; margin-right: 6px; transform: translateY(-2px);}
.product_listMain .layer1 .textBox li .icon2{display:inline-block; height:15px;}
.product_listMain .layer1 .textBox li .icon2 img{ display:black; height:100%; width:auto;}
.product_listMain .layer1 .textBox li b{ font-size:14px; font-weight:normal;}
.product_listMain .layer1 .textBox li span.on{ background: url(../images/pl_03.png); background-size:100% 100%;}
.product_listMain .layer1 .nrBottom{ width: 100%; height: 95px; line-height: 95px; font-size: 14px; color: #000;}
.product_listMain .layer1 .nrBottom img{ display: inline-block; vertical-align: middle; margin-right: 15px;}
.product_listMain .layer1 .more{ display: block; text-align: center; width: 133px; height: 44px; line-height: 44px; font-size: 14px; color: #fff; border-radius:22px; color: #fff; background: #0071e3;}
.product_listMain .layer2{ width: 100; margin: 0 auto; padding: 110px 0 0 0; overflow: hidden;}
.product_listMain .layer2 .layer2Left{ float: left; width: 460px; float: left;}
.product_listMain .layer2 .layer2Left h2{ font-weight: normal; text-align: center; width: 100%; line-height: 42px; font-size: 16px; color: #000;}
.product_listMain .layer2 .layer2Left img.pic{ display: block; margin: 30px auto; width: 400px; height: auto; border-radius:50%;}
.product_listMain .layer2 .layer2Left ul{ width: 100%;}
.product_listMain .layer2 .layer2Left ul li{ height: 48px; line-height: 48px; font-size: 16px; color: #000;}
.product_listMain .layer2 .layer2Left ul li img{ display: inline-block; vertical-align: middle; transform: translateY(-2px); margin-right: 15px;}
.product_listMain .layer2 .layer2Right{ width: calc(100% - 460px); float: left; padding-left: 10%; box-sizing: border-box;}
.product_listMain .layer2 .layer2Right .tit{ width: 100%; height: 55px; font-size: 22px; font-weight: bold; color: #000;}
.product_listMain .layer2 .layer2Right ul{ width: 100%; overflow: hidden;}
.product_listMain .layer2 .layer2Right li{ font-size: 14px; color: #606060; width: 49%; float: left; margin: 0 2% 20px 0;}
.product_listMain .layer2 .layer2Right li:nth-child(2){ margin-right: 0;}
.product_listMain .layer2 .layer2Right li:nth-child(5){ margin-right: 0;}
.product_listMain .layer2 .layer2Right li input[type=text]{ display: block; width: 100%; height: 36px; border: 1px solid #e1e1e1; box-sizing: border-box; border-radius:4px; background: #fafafa; text-indent: 10px;}
.product_listMain .layer2 .layer2Right li.long{ width: 100%; margin-right: 0;}
.product_listMain .layer2 .layer2Right li select{ display: block; width: 100%; height: 36px; border: 1px solid #e1e1e1; box-sizing: border-box; border-radius:4px; background: #fafafa; text-indent: 10px;}
.product_listMain .layer2 .layer2Right li input[type=radio]{ vertical-align: middle; transform: translateY(-3px); margin-left: 25px;}
.product_listMain .layer2 .layer2Right li .text{ width: 100%; height: 130px; border: 1px solid #e1e1e1; box-sizing: border-box; border-radius:4px; background: #fafafa; padding: 12px;}
.product_listMain .layer2 .layer2Right li .text p{ line-height: 38px; font-size: 14px; color: #606060;}
.product_listMain .layer2 .layer2Right li .text textarea{ display: block; width: 100%; height: 100%; resize: none; outline: none; border: none; background: none; font-size: 14px; font-family: "微软雅黑";}
.product_listMain .layer2 .layer2Right button{ border: none; display: block; text-align: center; width: 173px; height: 44px; line-height: 44px; font-size: 14px; color: #fff; border-radius:22px; color: #fff; background: #0071e3;}
#submitBTN:hover {cursor: pointer;}
.product_listMain .layer3 .tit h2{ text-align: center; font-size: 36px; color: #333;}
.product_listMain .layer3{ width: 100%; padding: 125px 0 0 0; overflow: hidden;}
.product_listMain .layer3 .tit{ text-align: center; font-size: 38px; color: #000; padding-bottom: 90px;}
.product_listMain .layer3 .layer3Box{ float: left; width: 47%; margin-right: 6%;}
.product_listMain .layer3 .layer3Box:last-child{ margin-right: 0;}
.product_listMain .layer3 .layer3Box h2{ height: 60px; font-weight: normal; font-size: 16px; color: #000; line-height:24px;}
.product_listMain .layer3 .layer3Box ul{ overflow: hidden;}
.product_listMain .layer3 .layer3Box ul li{ overflow: hidden; width: 32%; float: left; margin: 0 2% 24px 0; position: relative; height: 213px; background: #fafafa; border-radius:24px ; position: relative;}
.product_listMain .layer3 .layer3Box ul li .icon img{ display: block; margin: 0 auto; border-radius:24px ; max-width:180px; max-height:180px;}
.product_listMain .layer3 .layer3Box ul li .bg{z-index:100; transition: 0.5s; opacity: 0; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0,0,0,0.4);}
.product_listMain .layer3 .layer3Box ul li p{ position: absolute; width: 100%; text-align: center; line-height: 22px; font-size: 14px; color: #000; transition: 0.5s; bottom: 20px; padding: 0 25px; box-sizing: border-box; z-index: 2;}
.product_listMain .layer3 .layer3Box ul li .bg .more{display: block; text-align: center; width: 133px; height: 44px; line-height: 44px; font-size: 14px; color: #fff; border-radius:22px; color: #fff; background: #0071e3; position: absolute; top: 50px; left: 50%; transform: translateX(-50%);}
.product_listMain .layer3 .layer3Box ul li:hover p{ color: #fff;}
.product_listMain .layer3 .layer3Box ul li:hover .bg{ opacity: 1;}
.product_listMain .layer3 .layer3Box ul li:nth-child(3n){ margin-right: 0;}
/* .bannerPage.on img{ transform: scale(1.1);} */
.bannerPage.on img{width:100%; margin: 0 auto}
.bannerPage .textBox{ width: 1200px; margin: 0 auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.bannerPage .textBox h2{ font-size: 30px; font-weight: bold; color: #0071e3;}
.bannerPage .textBox p{ line-height: 38px; font-size: 22px; color: #000; padding: 40px 0 60px 0;}
.bannerPage .textBox ul{ overflow: hidden;}
.bannerPage .textBox ul li{ text-align: center; float: left; margin-right: 50px;}
.bannerPage .textBox ul li h3{ margin-bottom: 12px; font-size: 22px; font-weight: bold; color:#000;}
.bannerPage .textBox ul li h3 span{ font-weight: normal; font-size: 12px;}
.bannerPage .textBox ul li h4{ font-weight: normal; font-size: 14px; color: #999}
@media (min-width:991px ) and (max-width:1380px) {
.w1380{ width: 100%; padding: 0 10px; box-sizing: border-box;}
}
@media(max-width:990px) {
.w1380{ width: 100%; padding: 0 10px; box-sizing: border-box;}
.product_listMain .layer1 .swiper-wrapper{ display: flex;}
.product_listMain .layer1 .icon{ padding: 2.6rem 0 0 0;}
.product_listMain .layer1 .icon img{ width: 95%;}
.product_listMain .layer1 .text .tit{padding: 1.05rem 0 .4rem 0;}
.product_listMain .layer1 .text .tit h2{ font-size: .8rem;}
.product_listMain .layer1 .text .tit p{ font-size: .6rem; line-height: 1.1rem;}
.product_listMain .layer1 .textBox{ padding: .64rem 0;}
.product_listMain .layer1 .textBox h2{ font-size: .68rem;}
.product_listMain .layer1 .textBox p{ font-size: .48rem; line-height: .84rem;}
.product_listMain .layer1 .textBox h3{ font-size: .76rem; line-height: 2rem;}
.product_listMain .layer1 .textBox p span{ font-size: .64rem;}
.product_listMain .layer1 .textBox li span{ width: .48rem; height: .48rem; margin-right: .15rem;}
.product_listMain .layer1 .textBox li{ font-size: .34rem;}
.product_listMain .layer1 .textBox li b{display:block; width:100%;}
.product_listMain .layer1 .textBox li .icon2{ height:.48rem;}
.product_listMain .layer1 .textBox p.mg{ margin-top: .7rem;}
.product_listMain .layer1 .nrBottom{ font-size: .4rem; overflow: hidden;}
.product_listMain .layer2{ width: 100%; }
.product_listMain .layer2 .layer2Left{ width: 100%;}
.product_listMain .layer2 .layer2Left img.pic{ width: 70%; margin: 30px auto;}
.product_listMain .layer2 .layer2Left ul li{ text-align: center;}
.product_listMain .layer2 .layer2Right{; width: 100%; padding: 0; padding-top: 30px}
.product_listMain .layer2 .layer2Right li{ width: 100%; margin: 0 0 20px 0;}
.product_listMain .layer3{ width: 100%; padding-top: 30px;}
.product_listMain .layer3 .layer3Box{ width: 100%; margin: 0 0 20px 0;}
.product_listMain .layer3 .layer3Box ul li{ width: 49%; float: left; margin: 0 2% 15px 0;}
.product_listMain .layer3 .layer3Box ul li .icon img{ display: block; margin: 0 auto; border-radius:24px; }
.product_listMain .layer3 .layer3Box ul li:nth-child(3n){ margin-right: 2%;}
.product_listMain .layer3 .layer3Box ul li:nth-child(2n){ margin-right: 0;}
.product_listMain .layer3 .layer3Box h2{ height: 80px; }
.product_listMain .layer3 .tit h2{ text-align: center; font-size: 24px; color: #333;}
}
/*Consumable*/
.Consumable{ width: 100%;}
.Consumable .Consumable_layer1{ padding-top: 130px;}
.Consumable .Consumable_layer1 ul{ width: 100%; overflow: hidden;}
.Consumable .Consumable_layer1 ul li{ width: 50%; float: left;}
/* .Consumable .Consumable_layer1 ul li:first-child{ width: 100%;} */
.Consumable .Consumable_layer1 ul li .icon{ height: 400px;}
.Consumable .Consumable_layer1 ul li .icon img{ height: 100%; width: auto; display: block; margin: 0 auto;}
.Consumable .Consumable_layer1 ul li:first-child .text{ width: 68%; margin: 0 auto;}
.Consumable .Consumable_layer1 ul li .text h2{ text-align: center; font-size: 26px; color: #000;}
.Consumable .Consumable_layer1 ul li .text h3{ line-height: 28px; padding: 20px 0; font-weight: normal; text-align: center; font-size: 22px; color: #000;}
.Consumable .Consumable_layer1 ul li .text p{ font-size: 16px; color: #333; text-align: center; line-height: 26px;}
.Consumable .Consumable_layer1 ul li .text{ width: 73%; margin: 0 auto;}
.Consumable .Consumable_layer1 ul li .text a{ display: block; margin: 25px auto 0 auto; width: 142px; height: 44px; border-radius:22px; text-align: center; line-height: 44px; font-size: 14px; color: #fff; background: #0071e3;}
.Consumable_layer2{ background: #fafafa; width: 100%; overflow: hidden; height: auto; position: relative;}
.Consumable_layer2 .icon{ width: 50%; height: 600px; float: left; overflow: hidden;}
.Consumable_layer2 .icon img{ display: block; width: 100%; height: auto; transition: 0.5s;}
.Consumable_layer2 .icon:hover img{ transform: scale(1.1);}
.Consumable_layer2 .text{ width: 50%; position: absolute; right: 0; height: 100%;}
.Consumable_layer2 .text .textBox{ position: absolute; width: 100%; top: 50%; transform: translateY(-50%); padding: 0 65px; box-sizing: border-box;}
.Consumable_layer2 .text .textBox h2{ margin-bottom: 15px; font-size: 32px; color: #333;}
.Consumable_layer2 .text .textBox p{ font-size: 20px; color: #333; line-height: 44px;}
.Consumable_layer2 .text .textBox p span{ font-weight: bold; margin-right: 5px;}
.Consumable .Consumable_layer1{ padding: 30px 20px; box-sizing: border-box;}
.Consumable .Consumable_layer1 ul li{ margin-bottom: 30px;}
.Consumable .Consumable_layer1 ul li .icon{ height: auto;}
.Consumable .Consumable_layer1 ul li{ width: 100%; height: auto;}
.Consumable .Consumable_layer1 ul li:first-child .text{ width: 100%;}
.Consumable .Consumable_layer1 ul li .text{ width: 100%;}
.Consumable_layer2 .icon{ width: 100%; height: auto;}
.Consumable_layer2 .text{ float: left; position: relative; width: 100%;}
.Consumable_layer2 .text .textBox{ position: relative; left: auto; top: auto; transform: none; padding:30px 20px; box-sizing: border-box;}
.Consumable_layer2 .text .textBox h2{ font-size: 24px;}
.Consumable_layer2 .text .textBox p{ font-size: 16px;}
/*Equipment*/
.Equipment{ width: 100%;}
.Equipment .Equipment_layer1{ padding-top: 130px;}
.Equipment .Equipment_layer1 ul{ width: 100%; overflow: hidden;}
.Equipment .Equipment_layer1 ul li{ height: 770px; width: 50%; float: left;}
.Equipment .Equipment_layer1 ul li:first-child{ width: 100%;}
.Equipment .Equipment_layer1 ul li .icon{ height: 400px;}
.Equipment .Equipment_layer1 ul li .icon img{ width: auto; display: block; margin: 0 auto;}
.Equipment .Equipment_layer1 ul li:first-child .text{ width: 68%; margin: 0 auto;}
.Equipment .Equipment_layer1 ul li .text h2{ text-align: center; font-size: 26px; color: #000;}
.Equipment .Equipment_layer1 ul li .text h3{ line-height: 28px; padding: 20px 0; font-weight: normal; text-align: center; font-size: 22px; color: #000;}
.Equipment .Equipment_layer1 ul li .text p{ font-size: 16px; color: #333; text-align: center; line-height: 26px;}
.Equipment .Equipment_layer1 ul li .text{ width: 73%; margin: 0 auto;}
.Equipment .Equipment_layer1 ul li .text a{ display: block; margin: 25px auto 0 auto; width: 142px; height: 44px; border-radius:22px; text-align: center; line-height: 44px; font-size: 14px; color: #fff; background: #0071e3;}
.Equipment_layer2{ background: #fafafa; width: 100%; overflow: hidden; height: auto; position: relative;}
.Equipment_layer2 .icon{ width: 50%; height: 600px; float: left; overflow: hidden;}
.Equipment_layer2 .icon img{ display: block; width: 100%; height: auto; transition: 0.5s;}
.Equipment_layer2 .icon:hover img{ transform: scale(1.1);}
.Equipment_layer2 .text{ width: 50%; position: absolute; right: 0; height: 100%;}
.Equipment_layer2 .text .textBox{ position: absolute; width: 100%; top: 50%; transform: translateY(-50%); padding: 0 65px; box-sizing: border-box;}
.Equipment_layer2 .text .textBox h2{ margin-bottom: 15px; font-size: 32px; color: #333;}
.Equipment_layer2 .text .textBox p{ font-size: 20px; color: #333; line-height: 44px;}
.Equipment_layer2 .text .textBox p span{ font-weight: bold; margin-right: 5px;}
/*newList*/
.w1600{ width: 1600px; margin: 0 auto;}
.newList_layer1{ overflow: hidden; padding-bottom: 100px;}
.newList_layer1 ul{ overflow: hidden;}
.newList_layer1 ul li{ width: 32%; float: left; margin: 0 2% 0 0; padding-bottom:40px;}
.newList_layer1 ul li:nth-child(3n){ margin-right: 0;}
.newList_layer1 ul li .bt{font-size: 14px; color: #333; width: 100%; height: 64px; line-height: 64px;}
.newList_layer1 ul li .icon{ width: 515px; height: 280px; overflow: hidden;}
.newList_layer1 ul li .icon img{ display: block; width: 100%; height: 100%; border-radius:18px;}
.newList_layer1 ul li .text{ width: 100%;}
.newList_layer1 ul li .text h2{ color: #000; font-size: 18px; padding: 12px 0; line-height:32px; height:72px;}
.newList_layer1 ul li .text p{ font-size: 14px; color: #666; line-height: 26px;}
.newList_layer2 .tit{ width: 100%; padding-bottom: 80px;}
.newList_layer2 .tit ul{ overflow: hidden;}
.newList_layer2 .tit ul li{ float: left; margin-right: 20px;}
.newList_layer2 .tit ul li select{ width: 388px; height: 36px; border: 1px solid #e4e4e4; box-sizing: border-box; border-radius:4px; padding: 0 12px; box-sizing: border-box; font-size: 16px; outline: none; background: #fafafa;}
.newList_layer2 .tit ul li button{ display: block;cursor: pointer; height: 36px; width: 84px; text-align: center; border-radius:18px; color: #fff; background: #0071e3; border: none; outline: none;}
.newList_layer2 .Main{ width: 100%;}
.newList_layer2 .Main ul li{ width: 100%; overflow: hidden; margin-bottom: 20px;}
.newList_layer2 .Main ul li .icon{ width: 200px; float: left;}
.newList_layer2 .Main ul li .icon img{ display: block; width: 100%; height: auto;}
.newList_layer2 .Main ul li .text{ width:calc(100% - 200px); float: left; overflow: hidden; padding-left: 40px; box-sizing: border-box;}
.newList_layer2 .Main ul li .text p{ height:150px; font-size: 18px; line-height: 40px; float: left; display: block; width: 33%;}
.newList_layer2 .Main ul li .text p button{ cursor: pointer; height: 36px; width: 105px; text-align: center; border-radius:18px; color: #fff; background: #0071e3; border: none; outline: none;}
.newList_layer2 .Main ul li .text p:last-child{ text-align: right;}
/*newDetails*/
.w1200{ width: 1200px; margin: 0 auto;}
.newDetails .title{ width: 100%; border-bottom: 1px solid #e4e4e4; box-sizing: border-box; padding-bottom: 20px;}
.newDetails .title h1{ padding: 15px 0; font-size: 42px; line-height: 56px; color: #000;}
.newDetails .title h2{ padding: 15px 0; font-size: 38px; line-height: 48px; color: #000;}
.newDetails .title h3{ padding: 15px 0; font-size: 32px; line-height: 46px; color: #000;}
.newDetails .title p{ font-size: 14px; color: #666;}
.newDetails .Main{ padding: 40px 0 0 0;}
.newDetails .Main .icon{ width: 100%; margin-bottom: 35px;}
.newDetails .Main .icon img{ display: block; width: 100%; height: auto;}
.newDetails .Main p{ margin-bottom: 35px; font-size: 14px; color: #333; line-height: 26px; }
.newDetails .Main .bt{font-weight: bold; margin-bottom: 30px; font-size: 20px; color: #000;}
.newLink{ width: 100%; height: 125px; border-top:1px solid #e4e4e4;}
.newLink ul{ overflow: hidden;}
.newLink ul li{font-size: 16px; color: #333; float: left; margin-right: 20px; line-height: 125px;}
.newLink ul li img{ display: inline-block; vertical-align: middle; transform: translateY(-2px);}
.Application{ width: 800px;}
.Application h2{ height: 70px; line-height: 70px; font-size: 28px; color: #000;}
.Application ul{ overflow: hidden;}
.Application ul li{ width: 49%; float: left; margin: 0 2% 20px 0;}
.Application ul li:nth-child(2n){ margin-right: 0;}
.Application ul li:last-child{ margin-right: 0; width: 100%; margin-bottom: 0;}
.Application ul li input{ width: 100%; height: 36px; border: 1px solid #e4e4e4; border-radius:4px; box-sizing: border-box; background: #fafafa; padding: 0 12px; font-size: 12px;}
.Application ul li select{ width: 100%; height: 36px; border: 1px solid #e4e4e4; border-radius:4px; box-sizing: border-box; background: #fafafa; padding: 0 12px; font-size: 12px;}
.Application ul li textarea{ box-sizing: border-box; padding: 10px; box-sizing: border-box; height: 80px;border: 1px solid #e4e4e4; border-radius:4px; background: #fafafa; resize: none; width: 100%;}
.Application h2{ height: 60px; line-height: 60px; color: #000; font-weight: normal; font-size: 14px; color: #000;}
.Application button{ display: block; width: 105px; height: 44px; border: none; outline: none; text-align: center; line-height: 44px; font-size: 14px; color: #fff; border-radius:22px ; background: #0d78e4;}
.ToLike .bt{ width: 100%; text-align: center; line-height: 205px; font-size: 32px; color: #000;}
.ToLike ul{ width: 100%; overflow: hidden;}
.ToLike ul li{ width: 32%; float: left; margin: 0 2% 0 0;}
.ToLike ul li:last-child{ margin-right: 0;}
.ToLike ul li .icon{ width: 100%; }
/* height: 347px; */
.ToLike ul li .icon img{ display: block; width: 100%; height: 100%;}
.ToLike ul li .text{ width: 100%; padding-top: 20px;}
.ToLike ul li .text h2{ font-size: 20px; color: #000; line-height: 34px; height: 68px; overflow: hidden;}
.ToLike ul li .text p{ padding-top: 15px; font-size: 14px; color: #3a3a3a;}
.newPop{ width: 48px; position: fixed; right: 40px; top: 50%; transform: translateY(-50%);}
.newPop ul{ width: 100%;}
.newPop ul li{ background: #fff; margin-bottom: 20px; width: 48px; height: 48px; border: 1px solid #e4e4e4; box-sizing: border-box; border-radius:50%; position: relative;}
.newPop ul li a{ display: block; width: 100%; height: 100%;}
.newPop ul li img{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.newPop ul li:last-child{ margin-bottom: 0;}
.bannerPage img{transition: 3s; display: block; width:1920px; margin: 0 auto}
.bannerPage{ width: 100%; position: relative; overflow: hidden; }
.bannerPage .bannerBox{ width: 100%; position: absolute; left: 0; padding: 0 8%; box-sizing: border-box; top: 50%; transform: translateY(-50%); }
.bannerPage .bannerBox h2{ margin-bottom:20px;}
.bannerPage .bannerBox p{ }
.bannerPage .bannerBoxBlock{height:30px;}
.bannerPage .bannerBox h2 span {
background-color: rgba(28, 77, 180, 0.8);
color: #fff;
padding: 5px 10px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
font-size: 40px; line-height: 62px;
}
.bannerPage .bannerBox p span {
background-color: rgba(28, 77, 180, 0.8);
color: #fff;
padding: 5px 10px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
font-size: 28px; line-height: 52px;
}
.bannerPage .playClick{ background: url(../images/banner_arrow.png); width: 64px; height: 64px; background-size:100% 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); cursor: pointer;}
.bannerPage .bannerBoxTxt{ width: 100%; position: absolute; left: 0; top: 50%; text-align:center; transform: translateY(-50%);}
.bannerPage .bannerBoxTxt h2{ font-size: 40px; line-height: 32px; color: #fff; padding-bottom:30px;}
.bannerPage .bannerBoxTxt p{ font-size: 24px; color: #fff; line-height: 36px;}
.aboutContainer{ width:100% ;}
.aboutContainer .about_Layer1{ overflow: hidden; padding-top: 170px; margin-bottom: 100px;}
.aboutContainer .about_Layer1 .NrBox{ position: relative; width: 100%; overflow: hidden; margin-bottom: 100px;}
.aboutContainer .about_Layer1 .NrBox .icon{ width: 50%; float: left; position: absolute; height: 100%; left: 0; top: 0;}
.aboutContainer .about_Layer1 .NrBox .icon img{ }
.aboutContainer .about_Layer1 .NrBox .aboutContainer .about_Layer1 .NrBox .text{ width: 50%; float: right;}
.aboutContainer .about_Layer1 .NrBox .text h2{ font-size: 28px; color: #000; line-height: 36px; margin-bottom: 20px;}
.aboutContainer .about_Layer1 .NrBox .text ul{ padding: 20px 0; width: 100%; overflow: hidden;}
.aboutContainer .about_Layer1 .NrBox .text ul li{ text-align: center; font-size: 12px; color: #0f0f0f; width: 25%; float: left;}
.aboutContainer .about_Layer1 .NrBox .text ul li b{ display: block; font-size: 20px; color: #000; margin-bottom: 15px;}
.aboutContainer .about_Layer1 .NrBox .text p{ font-size: 16px; color: #4b4b4b; line-height: 24px; margin-bottom: 10px;}
.aboutContainer .about_Layer1 .NrBox .text p span{ font-weight: bold; margin-right: 5px;}
.aboutContainer .about_Layer1 .NrBox .text a{ display: block; width: 140px; height: 44px; text-align: center; border-radius: 22px; text-align: center; font-size: 14px; color: #fff; background: #0071e3; text-align: center; line-height: 44px; margin-top: 20px;}
.aboutContainer .about_Layer2{ width: 100%; overflow: hidden; background: #fafafa;}
.aboutContainer .about_Layer2 .tit{ height: 170px; line-height: 170px; text-align: center; font-size: 28px; color: #333;}
.aboutContainer .about_Layer2 ul{ text-align: center;}
.aboutContainer .about_Layer2 ul li{padding-bottom: 80px; width: 304px; display: inline-block; margin: 0 10px;}
.aboutContainer .about_Layer2 ul li img{ display: block; width: 100%; height: 420px;}
.aboutContainer .about_Layer2 ul li p{ text-align: center; font-size: 16px; color: #000; padding-top: 20px;}
.aboutContainer .about_Layer3 .tit{ height: 170px; line-height: 170px; text-align: center; font-size: 28px; color: #333;}
.aboutContainer .about_Layer3{overflow: hidden; width: 100%; padding-bottom: 60px;}
.aboutContainer .about_Layer3 .Main{ width: 1200px; margin: 0 auto; height: 600px;}
.aboutContainer .about_Layer3 .Main .swiper-container{ width: 100%; height: 100%; overflow:inherit ;position: relative;}
.aboutContainer .about_Layer3 .Main .swiper-container img{ display: block; width: 100%; height:100%; transition: 0.5s; transform: scale(0.75);}
.aboutContainer .about_Layer3 .Main .swiper-container .swiper-slide-active img { transform: scale(1.0);}
.aboutContainer .about_Layer3 .Main .swiper-container .swiper-button-next{ background: url(../images/banner_arrow2.png); width: 48px; height: 48px; right: 42px;}
.aboutContainer .about_Layer3 .Main .swiper-container .swiper-button-prev{ background: url(../images/banner_arrow1.png); width: 48px; height: 48px; left: 42px;}
.aboutContainer .about_Layer3 .Main .swiper-container .swiper-button-next:after{ display: none;}
.aboutContainer .about_Layer3 .Main .swiper-container .swiper-button-prev:after{ display: none;}
.aboutContainer .about_Layer4{ width: 100%; background: #fafafa; overflow: hidden;}
.aboutContainer .about_Layer4 .tit{ height: 170px; line-height: 170px; text-align: center; font-size: 28px; color: #333;}
.aboutContainer .about_Layer4 .Main{overflow: hidden; width: 1200px; position: relative; height: 320px; margin: 0 auto;}
.aboutContainer .about_Layer4 .Main .swiper-container{ width: 100%; height: 100%;}
.aboutContainer .about_Layer4 .Main .MainBox{ margin: 0 auto; width: 900px; height: 320px; background: #fff; border-radius:25px; padding:30px; box-sizing: border-box;}
.aboutContainer .about_Layer4 .Main .MainBox h2{ height: 90px; border-bottom: 1px solid #e4e4e4; color: #1d1d1d; font-size: 42px;}
.aboutContainer .about_Layer4 .Main .MainBox p{ padding-top: 20px; font-size: 14px; color: #333; line-height: 24px;}
.aboutContainer .about_Layer4 .Main .MainBox p span{ color: #0056de;}
.aboutContainer .about_Layer4 .Main .swiper-button-next{ background: url(../images/banner_arrow2.png); width: 48px; height: 48px; right: 42px;}
.aboutContainer .about_Layer4 .Main .swiper-button-prev{ background: url(../images/banner_arrow1.png); width: 48px; height: 48px; left: 42px;}
.aboutContainer .about_Layer4 .Main .swiper-button-next:after{ display: none;}
.aboutContainer .about_Layer4 .Main .swiper-button-prev:after{ display: none;}
.aboutContainer .about_Layer4 .hd{ width: 100%;}
.aboutContainer .about_Layer4 .hd ul{ width: 100%; overflow: hidden;}
.aboutContainer .about_Layer4 .hd .nr{ cursor: pointer; width: 100%; float: left;}
.aboutContainer .about_Layer4 .hd .nr .icon{ width: 100%; height: 90px; border-bottom: 1px dashed #e1e1e1; position: relative;}
.aboutContainer .about_Layer4 .hd .nr .icon span{box-sizing: initial; display: block; width: 12px; height: 12px; border-radius:50%; position: absolute; left: 50%; bottom: 0; transform: translate(-50%,50%); background: #e1e1e1; border:6px solid #fafafa; border-radius:50% ;}
.aboutContainer .about_Layer4 .hd .nr p{ padding: 30px 0 60px 0; text-align: center; font-size: 22px; color: #474747; font-weight: bold;}
.aboutContainer .about_Layer4 .hd .swiper-slide-thumb-active .nr .icon span{ border:6px solid #0071e3; background: #fff;}
.aboutContainer .about_Layer5{ width: 1200px; margin: 0 auto;}
.aboutContainer .about_Layer5 .Main{ width: 1200px; margin: 0 auto; position: relative;}
.aboutContainer .about_Layer5 .tit{ height: 170px; line-height: 170px; text-align: center; font-size: 28px; color: #333;}
.aboutContainer .about_Layer5 .Main{ position: relative; width: 100%; overflow: hidden;}
.aboutContainer .about_Layer5 .swiper-container{ width: 100%;}
.aboutContainer .about_Layer5 .MainBox{ width: 900px; margin: 0 auto;}
.aboutContainer .about_Layer5 .MainBox p{ padding: 60px 0; background: url(../images/aboutBg_03.png) left top no-repeat; font-size: 14px; color: #000; line-height: 24px;}
.aboutContainer .about_Layer5 .MainBox .icon{ margin: 0 auto;}
.aboutContainer .about_Layer5 .MainBox .icon img{ display: block; margin: 0 auto; max-width:80px; border-radius:50%;}
.aboutContainer .about_Layer5 .MainBox .Name h2{ line-height: 54px; text-align: center; font-size: 18px; color: #181818;}
.aboutContainer .about_Layer5 .MainBox .Name span{ text-align: center; display: block; font-size: 14px; color: #666;}
.aboutContainer .about_Layer5 .MainBox .Name img{ display: block; margin:15px auto 0 auto; max-width:60px; border-radius:50%;}
.aboutContainer .about_Layer5 .Main .swiper-button-next{ background: url(../images/banner_arrow2.png); width: 48px; height: 48px; right: 42px;}
.aboutContainer .about_Layer5 .Main .swiper-button-prev{ background: url(../images/banner_arrow1.png); width: 48px; height: 48px; left: 42px;}
.aboutContainer .about_Layer5 .Main .swiper-button-next:after{ display: none;}
.aboutContainer .about_Layer5 .Main .swiper-button-prev:after{ display: none;}
.newDetails .newList2{ width: 100%;}
.newDetails .newList2 dl{ overflow: hidden; width: 100%; padding: 40px 0; border-bottom: 1px solid #e4e4e4;}
.newDetails .newList2 dl dd{ float: left; margin-right: 12px;}
.newDetails .newList2 dl dd a{ line-height: 40px; display: block; padding:0 15px; height: 40px; border-radius:20px; background:#fafafa; color: #404040;}
.newDetails .newList2 ul{ overflow: hidden; padding: 40px 0;}
.newDetails .newList2 ul li{ width: 31.5%; float: left; margin: 0 2% 0 0;}
.newDetails .newList2 ul li:last-child{ margin-right: 0;}
.newDetails .newList2 ul li .icon{ width: 100%; border-radius:8px; overflow: hidden;}
.newDetails .newList2 ul li .icon img{ display: block; width: 100%;}
.newDetails .newList2 ul li p{ padding-top: 20px; line-height: 22px; color: #000;}
.service{ width: 100%;}
.service .service_layer1{ padding-bottom: 100px; overflow: hidden;}
.service .service_layer1 .bt{ padding: 75px 0; text-align: center; line-height: 36px; color: #333; font-size: 24px;}
.service .service_layer1 dl{ overflow: hidden;}
.service .service_layer1 dl dd{ width: 32%; float: left; margin: 0 2% 0 0;}
.service .service_layer1 dl dd:last-child{ margin-right: 0;}
.service .service_layer1 dl dd .icon{ width: 100%; height: 282px; border-radius:25px; overflow: hidden;}
.service .service_layer1 dl dd .icon img{ display: block; width: 100%; height: 100%;}
.service .service_layer1 dl dd .text{ width: 100%;}
.service .service_layer1 dl dd .text h2{ height: 76px; color: #000; font-size: 22px; color: #000; line-height: 76px;}
.service .service_layer1 dl dd .text ul{ overflow: hidden;}
.service .service_layer1 dl dd .text li{ position: relative; padding-left: 20px; list-style:disc; line-height: 40px; color: #000; font-size: 16px;}
.service .service_layer1 dl dd .text a{ display: inline-block; padding:0 25px; height: 44px; border-radius:22px; font-size: 16px; color: #fff; background: #0071e3;}
.service .service_layer1 dl dd .text li:after{ content: '·'; width: 10px; line-height: 40px; font-weight: bold; position: absolute; left: 0; top: 0;}
.service .service_layer2{ width: 100%; overflow: hidden;}
.service .service_layer2{ background: #fafafa; width: 100%; overflow: hidden; height: auto; position: relative;}
.service .service_layer2 .icon{ width: 50%; height: auto; float: left; overflow: hidden;}
.service .service_layer2 .icon img{ display: block; width: 100%; height: auto; transition: 0.5s;}
.service .service_layer2 .icon:hover img{ transform: scale(1.1);}
.service .service_layer2 .text{ width: 50%; position: absolute; right: 0; height: 100%;}
.service .service_layer2 .text .textBox{ position: absolute; width: 100%; top: 50%; transform: translateY(-50%); padding: 0 65px; box-sizing: border-box;}
.service .service_layer2 .text .textBox h2{ margin-bottom: 15px; font-size: 32px; color: #333;}
.service .service_layer2 .text .textBox p{ font-size: 20px; color: #333; line-height: 44px;}
.service .service_layer2 .text .textBox p span{ font-weight: bold; margin-right: 5px;}
.service .service_layer2 .text .textBox a{ display: block; width: 165px; height: 44px; border-radius:22px; text-align: center; line-height: 44px; color: #fff; font-size: 16px; background: #0071e3; color: #fff; margin-top: 15px;}
.service_layer3{ width: 1080px; margin: 0 auto;}
.service_layer3 .tit{ padding: 130px 0 85px 0;}
.service_layer3 .tit h2{ text-align: center; font-size: 28px; font-weight: bold; color:#1d1d1d; margin-bottom: 35px;}
.service_layer3 .tit p{ text-align: center; font-size: 24px; color: #333;}
.service_layer3 ul{
width: 100%; overflow: hidden;
justify-content: flex-start;
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
}
.service_layer3 ul li{ width: 18.4%; float: left; margin: 0 2% 45px 0;}
.service_layer3 ul li .icon{ width: 100%; height: auto; position: relative;}
.service_layer3 ul li .icon img.pic{ display: block; width: 100%; height: auto;}
.service_layer3 ul li p{ text-align: center; padding: 20px 0 0 0; font-size: 14px; color: #333;}
.service_layer3 ul li .icon .downLoad{ display: block; background: url(../images/download.png); width: 48px; height: 48px; position: absolute; top: 80%; left: 50%; transform: translate(-50%,-50%); opacity: 0; transition: 0.5s;}
.service_layer3 ul li:hover .icon .downLoad{ opacity: 1; top: 50%;}
.service_layer3 ul li:nth-child(5n){ margin-right: 0;}
.service_layer3 .more{ display: block; width: 200px; height: 44px; border-radius:22px; text-align: center; line-height: 44px; color: #fff; font-size: 16px; background: #0071e3; color: #fff; margin-top: 15px; margin: 0 auto;}
.proDetails .proNav{
width: 100%; height: 64px; background: #fafafa;
position: -webkit-sticky;
position: sticky;
top: 0;
width: 100%;
z-index: 1000;
}
.content {
margin: 20px 0;
padding: 20px;
border: 1px solid #ddd;
}
:target {
padding-top: 60px;
margin-top: -60px;
}
.proDetails .proNav ul{ text-align: center;}
.proDetails .proNav ul li{ display: inline-block; margin: 0 10px; line-height: 64px;}
.proDetails .proNav ul li a{ font-size: 13px; color: #333;}
.proDetails .proNav .active a{ font-size: 18px; color: #333;}
.proDetails .proNav ul li:hover a{ color: #0055de;}
.proDetails .proNav ul li.on a{ color: #0055de;}
.proDetails .tit{ width: 100%; line-height: 235px; font-size: 44px; color: #000;}
.proDetails .proLayer1{ overflow: hidden;}
.proDetails .proLayer1 ul{ overflow: hidden;}
.proDetails .proLayer1 ul li{ width: 49%; margin: 0 2% 80px 0; float: left;}
.proDetails .proLayer1 ul li:nth-child(2n){ margin-right: 0;}
.proDetails .proLayer1 ul li .icon{ width: 100%; height: 430px; border-radius:25px; overflow: hidden;}
.proDetails .proLayer1 ul li .icon img{ display: block; width: 100%; height: 100%;}
.proDetails .proLayer1 ul li .text{ width: 100%;}
.proDetails .proLayer1 ul li .text h2{line-height: 38px; font-size: 22px; color: #000;}
.proDetails .proLayer1 ul li .text p{ font-size: 14px; line-height: 24px; color: #000; height: 48px; overflow: hidden;}
.proDetails .proLayer1 .bt{ padding: 40px 0;}
.proDetails .proLayer1 .bt h2{ font-size: 28px; color: #000; font-weight: bold; margin-bottom: 35px;}
.proDetails .proLayer1 .bt p{ font-size: 16px; color: #333;}
.proDetails .proLayer1 dl{ width: 100%; overflow: hidden; border-left:1px solid #e5e5e5; border-top:1px solid #e5e5e5; box-sizing: border-box;}
.proDetails .proLayer1 dl dd{ width: 25%; float: left; height: 72px; box-sizing: border-box; border-right:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5; padding: 10px;}
.proDetails .proLayer1 dl dd a{ display: block; width: 100%; height: 52px; border-radius:8px ; line-height: 52px; background: #ff7135; text-align: center; font-size: 14px; color: #fff;}
.proDetails .proLayer2{ overflow: hidden;}
.proDetails .proLayer2 ul{ width: 32%; float:left; margin: 0 2% 0 0;}
.proDetails .proLayer2 ul:last-child{ margin-right: 0;}
.proDetails .proLayer2 ul li{ width: 100%; margin-bottom: 20px; border: 1px solid #e5e5e5; border-radius:7px;}
.proDetails .proLayer2 ul li .click{ width: 100%; height: 62px; line-height: 62px; position: relative; font-size: 16px; color: #000; background: #fafafa; padding-left: 55px; box-sizing: border-box;cursor: pointer;}
.proDetails .proLayer2 ul li .click span{ display: block; width: 20px; height: 20px; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); border: 2px solid #c8ccd3; border-radius:4px; text-align: center; line-height: 15px; font-size: 14px; color: #3d495b; font-weight: bold;}
.proDetails .proLayer2 ul li .text{ display: none; width: 100%; padding: 25px 30px; box-sizing: border-box;}
.proDetails .proLayer2 ul li .text h2{ font-size: 16px; color: #000; line-height: 28px; margin-bottom: 15px;}
.proDetails .proLayer2 ul li .text p{ font-size: 14px; color: #555; line-height: 24px; margin-bottom: 20px;}
.proDetails .proLayer3{ margin-top: 60px;}
.proDetails .proLayer3 img{ display: block; width: 100%; height: auto;}
.proDetails .proLayer4{ width: 100%; padding: 125px 0 80px 0;}
.proDetails .proLayer4 h2{ text-align: center; font-size: 28px; color: #000; margin-bottom: 50px;}
.proDetails .proLayer4 .video{ width: 1200px; height: 670px; background: #000; margin: 0 auto; position: relative;}
.proDetails .proLayer4 .video .vidClick{ background: url(../images/banner_arrow.png); width: 64px; height: 64px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background-size:100% 100%;}
.proDetails .proLayer4 video{ width: 100%; display: block; height: 100%;}
.proDetails2 .proLayer1{ width: 100%; padding: 155px 0 120px 0;}
/* .proDetails2 .proLayer1 .icon{ width: 335px; height: 335px; border-radius:50%; margin: 0 auto; border: 6px solid #ff7b74; box-sizing: border-box; overflow: hidden;} */
.proDetails2 .proLayer1 .icon{ max-width: 350px; height: auto; margin: 0 auto; overflow: hidden;}
.proDetails2 .proLayer1 .icon img{ display: block; width: 100%; height: 100%;}
.proDetails2 .proLayer1 .text{ width: 800px; margin: 0 auto; padding: 60px 0 0 0;}
.proDetails2 .proLayer1 .text h2{ font-size: 24px; text-align: center; font-weight: bold; color: #303030; margin-bottom: 25px;}
.proDetails2 .proLayer1 .text p{ text-align: center; font-size: 16px; color: #3e3e3e; line-height: 28px; margin-bottom: 20px;}
.proDetails2 .proLayer1 .text a{ display: block; width: 140px; height: 44px; border-radius:22px; text-align: center; line-height: 44px; color: #fff; font-size: 16px; background: #0071e3; color: #fff; margin: 15px auto 0 auto;}
.proDetails2 .proLayer2{ background: #fafafa; width: 100%; overflow: hidden; height: auto; position: relative;}
.proDetails2 .proLayer2 .icon{ width: 50%; height: auto; float: left; overflow: hidden;}
.proDetails2 .proLayer2 .icon img{ display: block; width: 100%; height: auto; transition: 0.5s;}
.proDetails2 .proLayer2 .icon:hover img{ transform: scale(1.1);}
.proDetails2 .proLayer2 .text{ width: 50%; position: absolute; right: 0; height: 100%;}
.proDetails2 .proLayer2 .text .textBox{ position: absolute; width: 100%; top: 50%; transform: translateY(-50%); padding: 0 65px; box-sizing: border-box;}
.proDetails2 .proLayer2 .text .textBox h2{ margin-bottom: 15px; font-size: 18px; color: #333;}
.proDetails2 .proLayer2 .text .textBox p{ font-size: 14px; margin-bottom: 15px; color: #333; line-height: 44px;}
.proDetails2 .proLayer2 .text .textBox p span{ font-weight: bold; margin-right: 5px;}
.proDetails2 .proLayer2 h2{ font-size: 24px; line-height: 36px;}
.proDetails2 .proLayer2 p{ width: 730px; line-height: 24px!important; font-size: 16px;}
.proDetails2 .proLayer2 ul{ width: 100%;}
.proDetails2 .proLayer2 ul li{ line-height: 48px; font-size: 16px; color: #121212; padding-left: 28px; background: url(../images/duihao_03.png) left center no-repeat;}
.proDetails2 .proLayer3{ width: 100%; overflow: hidden; height: auto; position: relative; display: flex; flex-direction: row-reverse; align-items: center; }
.proDetails2 .proLayer3 .icon{ width: 50%; height: auto; float: left; overflow: hidden;}
.proDetails2 .proLayer3 .icon img{ display: block; width: 100%; height: auto; transition: 0.5s;}
.proDetails2 .proLayer3 .icon:hover img{ transform: scale(1.1);}
.proDetails2 .proLayer3 .textBox{ width: 100%; box-sizing: border-box; padding-left:100px; padding-right:50px; }
.proDetails2 .proLayer3 .textBox h2{ margin-bottom: 15px; font-size: 18px; color: #333;}
.proDetails2 .proLayer3 .textBox p{ font-size: 14px; margin-bottom: 15px; color: #333; line-height: 44px;}
.proDetails2 .proLayer3 .textBox p span{ font-weight: bold; margin-right: 5px;}
.proDetails2 .proLayer3 h2{ font-size: 24px; line-height: 36px;}
.proDetails2 .proLayer3 p{ width: 730px; line-height: 24px!important; font-size: 16px;}
.proDetails2 .proLayer3 ul{ width: 100%;}
.proDetails2 .proLayer3 ul li{ line-height: 48px; font-size: 16px; color: #121212; padding-left: 28px; background: url(../images/duihao_03.png) left center no-repeat;}
.proDetails2 .proLayer5 { width: 100%; padding: 125px 0 80px 0;}
.proDetails2 .proLayer5 h2{ text-align: center; font-size: 28px; color: #000; margin-bottom: 50px;}
.proDetails2 .proLayer5 .video{ width: 1200px; height: 670px; background: #000; margin: 0 auto; position: relative;}
.proDetails2 .proLayer5 .video .vidClick{ background: url(../images/banner_arrow.png); width: 64px; height: 64px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background-size:100% 100%; cursor: pointer;}
.proDetails2 .proLayer5 video{ width: 100%; display: block; height: 100%;}
.proDetails2 .proLayer6{ overflow: hidden;}
.proDetails2 .title2{ padding:50px 0 ;}
.proDetails2 .title2 h2{ font-size: 28px; font-weight: bold; color: #141414; text-align: center; margin-bottom: 35px;}
.proDetails2 .title2 p{ font-size: 14px; line-height: 24px; width: 900px; margin: 0 auto; text-align: center;}
.proDetails2 .proLayer6 ul{
overflow: hidden;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
}
.proDetails2 .proLayer6 ul li{ width: 32%; float: left; margin: 0 2% 0 0 ;}
.proDetails2 .proLayer6 ul li:last-child{ margin-right: 0;}
.proDetails2 .proLayer6 ul li img{ display: block; width: 100%; height: auto;}
.proDetails2 .proLayer6 ul li p{ padding: 0 0 0 0; text-align: center; font-size: 22px; color: #000; font-weight: bold;}
.proDetails2 .proLayer6 span:last-child{ display: block; padding-top: 25px; font-size: 14px; color: #000; text-align: left; line-height: 26px; padding:16px;}
.proDetails2 .proLayer7{ padding-top: 50px;}
.proDetails2 .proLayer7 .tab{ width: 100%; border-left: 1px solid #e4e4e4; border-top:1px solid #e4e4e4 ; box-sizing: border-box;}
.proDetails2 .proLayer7 .tab table{ width: 100%; height: 100%;}
.proDetails2 .proLayer7 .tab td{ vertical-align: middle; border-right: 1px solid #e4e4e4; border-bottom:1px solid #e4e4e4 ; height: 70px; font-size: 16px; color: #0a0a0a; text-align: center; background: #fafafa; box-sizing: border-box; width: 70px;}
.proDetails2 .proLayer7 .tab .bt2{ background: #fff; text-indent: 40px; text-align: left;}
.proDetails2 .proLayer7 .tab .bt1{ width: 220px; background: #fff;}
.bannerPage .app{ display: none;}
.bannerPage .pc{ display: block;}
@media (max-width:1680px ){
}
@media (max-width:768px ){
.w1200{ width: 100%;}
.w1380{ width: 100%;}
.w1600{ width: 100%;}
/* .bannerPage .bannerBox{ display: none;} */
.aboutContainer .about_Layer1{ padding: 20px;}
.aboutContainer .about_Layer1 .NrBox .icon{ width: 100%; position: relative; left: auto; top: auto; height: 300px;}
.aboutContainer .about_Layer1 .NrBox .icon img{ height: 80%; width: auto; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.aboutContainer .about_Layer1 .NrBox .text{ width: 100%;}
.aboutContainer .about_Layer1 .NrBox{ margin-bottom: 50px;}
.aboutContainer .about_Layer2 ul{ padding: 0 15px; box-sizing: border-box;}
.aboutContainer .about_Layer2 ul li{ width: 49%; margin: 0 2% 20px 0; float: left; padding-bottom: 0;}
.aboutContainer .about_Layer2 ul li img{ height: auto;}
.aboutContainer .about_Layer2 .tit{ line-height: 100px; height: 100px;}
.aboutContainer .about_Layer2 ul li:nth-child(2n){ margin-right: 0;}
.aboutContainer .about_Layer3 .Main{ width: 85%; margin: 0 auto; height: auto;}
.aboutContainer .about_Layer3 .Main .swiper-container .swiper-button-prev{ left: 0;}
.aboutContainer .about_Layer3 .Main .swiper-container .swiper-button-next{ right: 0;}
.aboutContainer .about_Layer4 .Main .MainBox{ width: 95%;}
.aboutContainer .about_Layer4 .Main{ z-index: 10; width: 100%; overflow: initial;}
.aboutContainer .about_Layer4 .hd{z-index: 9; width: 100%; overflow-x: scroll;}
.aboutContainer .about_Layer4 .hd ul{ width: 1000px;}
.aboutContainer .about_Layer4 .Main .swiper-button-next{ top: auto; bottom: -110px; right: 0; background: url(../images/arrow2.png); width: 36px; height: 36px; }
.aboutContainer .about_Layer4 .Main .swiper-button-prev{ top: auto; bottom:-110px; left: 0; background: url(../images/arrow1.png); width: 36px; height: 36px; }
.aboutContainer .about_Layer5{ width: 100%;}
.aboutContainer .about_Layer5 .Main{ width: 100%;}
.aboutContainer .about_Layer5 .MainBox{ width: 90%; margin: 0 auto;}
.aboutContainer .about_Layer5 .Main .swiper-button-prev{ width: 36px; height: 36px; background-size:100% 100%; top: auto;bottom: 140px;}
.aboutContainer .about_Layer5 .Main .swiper-button-next{ width: 36px; height: 36px; background-size:100% 100%; top: auto; bottom: 140px;}
.Equipment .Equipment_layer1{ padding: 30px 20px; box-sizing: border-box;}
.Equipment .Equipment_layer1 ul li{ margin-bottom: 30px;}
.Equipment .Equipment_layer1 ul li .icon{ height: auto;}
.Equipment .Equipment_layer1 ul li{ width: 100%; height: auto;}
.Equipment .Equipment_layer1 ul li:first-child .text{ width: 100%;}
.Equipment .Equipment_layer1 ul li .text{ width: 100%;}
.Equipment_layer2 .icon{ width: 100%; height: auto;}
.Equipment_layer2 .text{ float: left; position: relative; width: 100%;}
.Equipment_layer2 .text .textBox{ position: relative; left: auto; top: auto; transform: none; padding:30px 20px; box-sizing: border-box;}
.Equipment_layer2 .text .textBox h2{ font-size: 24px;}
.Equipment_layer2 .text .textBox p{ font-size: 16px;}
.newDetails .title{ width: 100%; padding: 20px 15px; box-sizing: border-box;}
.newDetails .title h1{ font-size: 24px;line-height: 32px;}
.newDetails .title h2{ font-size: 20px;line-height: 28px;}
.newDetails .Main{ padding: 20px 15px; box-sizing: border-box;}
.Application{ width: 100%; padding:0 15px; box-sizing: border-box;}
.Application ul li{ width: 100%; margin-right: 0;}
.newPop{ right: 10px; bottom: 10px; transform: none; top: auto;}
.newLink{ height: 80px; padding: 0 10px; box-sizing: border-box;}
.newLink ul li{ line-height: 80px;}
.ToLike .bt{ height: 120px; line-height: 120px;}
.ToLike ul{ padding: 0 15px; box-sizing: border-box;}
.ToLike ul li{ width: 100%; margin: 0 0 15px 0;}
.ToLike ul li .icon{ height: auto;}
.newDetails .newList2 dl{ padding: 15px;}
.newDetails .newList2 dl dd{ margin-bottom: 10px;}
.newDetails .newList2 ul{ padding: 20px 15px; box-sizing: border-box;}
.newDetails .newList2 ul li{ width: 100%; margin-bottom: 15px;}
.newList_layer1{ width: 100%; padding: 0 15px; box-sizing: border-box;}
.newList_layer1 ul li{ width: 100%; margin: 0 0 15px 0;}
.newList_layer1 ul li .icon{ height: auto;}
.newList_layer2{ padding: 0 15px; box-sizing:border-box;}
.newList_layer2 .tit ul li{ width: 37%; float: left; margin: 0 2% 0 0;}
.newList_layer2 .tit ul li select{ width: 100%;}
.newList_layer2 .tit ul li:last-child{ float: right; width: auto; margin-right: 0;}
.newList_layer2 .Main ul li .icon{ width: 100%; height: auto;}
.newList_layer2 .Main ul li .text{ width: 100%; padding: 0;}
.newList_layer2 .Main ul li .text p{ height: 100px; line-height: 50px;}
.newList_layer2 .Main ul li .text p:nth-child(2){ text-align: center;}
.newList_layer2 .Main ul li .text p button{ margin-top: 15px; transform: translateX(-260px);}
.bannerPage .pc{ display: none;}
.bannerPage .app{ display: block;}
.proDetails .proNav{ margin-top: 50px;}
.proDetails .tit{ font-size: 28px; height: 120px; line-height: 120px;}
.proDetails .proLayer1{ padding: 0 15px; box-sizing: border-box;}
.proDetails .proLayer1 ul li{ width: 100%; margin: 0 0 25px 0;}
.proDetails .proLayer1 ul li .icon{ width: 100%; height: auto;}
.proDetails .proLayer1 dl dd{ width: 33%; height: 62px;}
.proDetails .proLayer1 dl dd:nth-child(3n){ width: 34%;}
.proDetails .proLayer1 dl dd a{ height: 100%; line-height: 42px;}
.proDetails .proLayer2{ width: 100%; padding: 0 15px; box-sizing: border-box;}
.proDetails .proLayer2 ul{ width: 100%; margin: 0;}
.proDetails .proLayer4{ padding: 50px 0 0 0;}
.proDetails .proLayer4 .video{ width: 100%; height: 300px; }
.proDetails2 .proLayer1{ padding: 30px 15px; box-sizing: border-box;}
.proDetails2 .proLayer1 .icon{ width: 100%; }
.proDetails2 .proLayer1 .text{ width: 100%;}
.proDetails2 .proLayer1 .text h2{ line-height: 30px;}
.proDetails2 .proLayer1 .text p{ font-size: 14px;}
.proDetails2 .proLayer2 .icon{ width: 100%; height: auto;}
.proDetails2 .proLayer2 .text{ float: left; width: 100%; position: relative; left: auto; top: auto; transform: none;}
.proDetails2 .proLayer2 .text .textBox{position: relative; left: auto; top: auto; transform: none; width: 100%; padding: 25px 15px; box-sizing: border-box;}
.proDetails2 .proLayer2 .text .textBox p{ line-height: 28px; width: 100%;}
.proDetails2 .proLayer3{ background: #fafafa; width: 100%; display: flex; flex-direction:column;}
.proDetails2 .proLayer3 .icon{ width: 100%;}
.proDetails2 .proLayer3 .icon img{ max-width: 100%; height: auto; display: inline-block;}
.proDetails2 .proLayer3 .textBox{ width: 100%; display:block;padding:0 20px; }
.proDetails2 .proLayer3 .textBox h2{ width: 100%;line-height: 36px; }
.proDetails2 .proLayer3 .textBox p{ width: 100%;font-size: 14px;}
.proDetails2 .proLayer5 .video{ width: 100%; height: auto;}
.proDetails2 .proLayer5{ padding: 50px 0 0 0;}
.proDetails2 .title2{ padding: 20px 15px; box-sizing: border-box;}
.proDetails2 .title2 h2{ font-size: 22px; line-height: 26px;}
.proDetails2 .title2 p{ width: 100%;}
.proDetails2 .proLayer6 ul{ text-align: left; width: 100%; text-align: left; padding: 0 15px; white-space: nowrap; box-sizing: border-box; overflow-x: scroll;}
.proDetails2 .proLayer6 ul{
display: block;
flex-wrap: nowrap;
}
.proDetails2 .proLayer6 ul li{ display: inline-block; text-align: left; width: 300px; float: inherit;}
.proDetails2 .proLayer7 .tab{ border: none; padding: 0 15px; box-sizing: border-box; overflow-x: scroll;}
.proDetails2 .proLayer7 .tab table{ width: 1000px; border-left:1px solid #e4e4e4; border-top:1px solid #e4e4e4 ;}
.service .service_layer1{ padding: 0 0 50px 0;}
.service .service_layer1 .bt{ padding: 45px 15px; box-sizing: border-box; font-size: 16px; line-height: 28px;}
.service .service_layer1 dl{ padding: 0 15px; box-sizing: border-box;}
.service .service_layer1 dl dd{ width: 100%; margin: 0 2% 15px 0;}
.service .service_layer1 dl dd .icon{ height: auto;}
.service .service_layer2 .icon{ width: 100%; height: auto;}
.service .service_layer2 .text{ float: left; width: 100%; position: relative; left: auto; top: auto;}
.service .service_layer2 .text .textBox{ position: relative; left: auto; top: auto; transform: none; padding:20px 15px; box-sizing: border-box;}
.service .service_layer2 .text .textBox h2{ text-align: center; font-size: 24px;}
.service .service_layer2 .text .textBox p{ font-size: 16px; line-height: 28px; text-align: left;}
.service .service_layer2 .text .textBox a{ margin: 25px auto 0 auto;}
.service_layer3{ width: 100%;}
.service_layer3 .tit{ padding: 55px 0;}
.service_layer3 .tit h2{ margin-bottom: 15px;}
.service_layer3 ul{ padding: 0 15px; box-sizing: border-box;}
.service_layer3 ul li{ width: 28%; margin: 0 2% 15px 8px;}
.service_layer3 ul li:nth-child(3n){ margin-right: 0;}
}
.newsBlogNav {
max-width: 1600px;
margin: 30px auto;
display: flex;
align-items: flex-end;
}
.newsBlogNav .cate {
padding: 10px 5px;
margin: 10px 10px;
cursor: pointer;
text-align: center;
transition: color 0.3s, border 0.3s;
border-bottom: 2px solid transparent;
align-items: flex-end;
}
.newsBlogNav .cate a{
font-size: 24px;
color: #606060;
}
.newsBlogNav .cate.active {
border-bottom: 2px solid #0071E3;
}
.newsBlogNav .cate.active a{
color: #0071E3;
font-size:32px;
line-height:0.36rem;
}
.newsForm{
max-width: 900px;
margin: 30px auto;
}
.nbfTitle{
text-align: center;
font-size: 36px;
color: #333;
margin: 50px 12px 30px 12px;
}
.nbfDes{
text-align: center;
font-size: 17px;
line-height: 24px;
color: #333;
margin: 50px 0 30px 0;
}
@media (max-width: 900px) {
.newsBlogItem {
/* width: 100%; */
margin-bottom: 20px;
}
.newsBlogNav .cate a{
font-size: 20px;
}
.newsBlogNav .cate.active a{
font-size:28px;
}
.bannerPage .bannerBoxTxt h2{ font-size: 18px; line-height: 22px; color: #fff; padding-bottom:10px;}
.bannerPage .bannerBoxTxt p{ font-size: 12px; color: #fff; line-height: 16px;}
.bannerPage .bannerBox{ width: 100%; position: absolute; left: 0; padding: 0 3%; box-sizing: border-box; top: 50%; transform: translateY(-50%); }
/* .bannerPage .bannerBox h2{ font-size: 14px; line-height: 18px; color: #fff; } */
/* .bannerPage .bannerBox p{ font-size: 12px; color: #fff; line-height: 16px;} */
.bannerPage .bannerBoxBlock{height:36px;}
.bannerPage .bannerBox h2 span {
background-color: rgba(28, 77, 180, 0.8);
color: #fff;
padding: 5px 10px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
font-size: 14px; line-height: 26px;
}
.bannerPage .bannerBox p span {
background-color: rgba(28, 77, 180, 0.8);
color: #fff;
padding: 5px 10px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
font-size: 12px; line-height: 26px;
}
}
.materialBanner{
banner2 {
width: 1600px;
max-width: 100%;
margin: 0 auto;
overflow: hidden;
}
.title2 {
width: 100%;
padding: 10px;
box-sizing: border-box;
color: #fff;
font-size: 2em;
text-align: center;
}
.content-row2 {
display: flex;
justify-content: space-between;
padding: 20px;
box-sizing: border-box;
}
.des2, .mainImg2, .param2 {
padding: 10px;
box-sizing: border-box;
}
.des2{
flex-basis: calc(40%);
padding-left: 100px;
line-height: 30px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.param2{
flex-basis: calc(30%);
padding-right: 100px;
padding-top:50px;
padding-bottom:50px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.des2 {
}
.mainImg2 {
text-align: center;
}
.mainImg2 img.responsive {
max-width: 96%;
height: auto;
margin: 0 auto;
}
.param2 {
display: flex;
flex-direction: column;
}
.param2 div {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
}
@media (max-width: 768px) {
.materialBanner{
.content-row2 {
flex-direction: column;
}
.title2 {
width: 100%;
margin: 10px 0 -10px 0;
}
.des2, .mainImg2, .param2 {
width: 100%;
margin-bottom: 10px;
padding: 10px;
}
.param2 {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.param2 div {
width: calc(50% - 20px);
margin-bottom: 10px;
}
}
}
.materialBanner{
.mobile-only {
display: none;
}
.pc-only {
display: block;
}
@media (max-width: 768px) {
.mobile-only {
display: block;
}
.pc-only {
display: none;
}
}
}
.modal {
display: none;
z-index: 1;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 300px;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
/* News Page CSS update - 0813 */
.newsContainer {
width: 1600px;
margin: 0 auto;
padding: 0;
list-style-type: none;
margin-top:20px;
}
.newsList {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.newsList li {
width: calc(33.333% - 30px);
margin-right: 30px;
margin-bottom: 30px;
}
.newsList li:last-child {
margin-right: 0;
}
.newsList li a .icon:hover img{transform: scale(1.02);}
.newsList li a .icon img {
max-width:100%;
height: auto;
display: block;
margin-bottom: 5px;
border-radius: 16px;
object-fit: cover;
}
.newsList li a {
text-decoration: none;
color: inherit;
}
.newsList h2 {
margin: 0;
padding: 5px 0;
font-size: 20px;
line-height:28px;
word-wrap: break-word;
}
.newsList h3 {
margin: 0;
padding: 5px 0;
font-size: 14px;
font-weight:normal;
line-height:22px;
word-wrap: break-word;
color: #666;
}
.newsList .bt {
margin: 0;
padding: 16px 0;
font-size: 16px;
line-height:22px;
word-wrap: break-word;
}
.newsList p {
margin: 0;
padding: 5px 0;
font-size: 17px;
line-height: 23px;
color: #666;
}
.icon {
position: relative;
}
.icon img {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
.overlay img {
width: 50px;
height: 50px;
}
.newsContainerThin {
width: 1200px;
margin: 20px auto;
padding: 0;
list-style-type: none;
}
.newsContainerThin .newsList h2 {
margin: 0;
padding: 5px 0;
font-size: 16px;
line-height:24px;
word-wrap: break-word;
}
.newsContainerThin .newsList p {
margin: 0;
padding: 5px 0;
font-size: 12px;
line-height: 18px;
color: #666;
}
.pagination {
text-align: center;
margin: 20px 0;
}
.pagination a {
display: inline-block;
padding: 8px 15px;
margin-right: 5px;
border: 1px solid #ddd;
color: #333;
text-decoration: none;
border-radius: 4px;
}
.pagination a:hover {
background-color: #f2f2f2;
}
.pagination .current {
background-color: #1586c6;
color: white;
border-color: #1586c6;
pointer-events: none;
}
.pagination .prev, .pagination .next {
background-color: #f2f2f2;
}
.pagination .prev:hover, .pagination .next:hover {
background-color: #e0e0e0;
}
.newsBlogNav {
margin-left: 10px;
}
.navContainer {
max-width: 1600px;
display: flex;
margin: 30px auto;
}
.searchBox {
display: flex;
align-items: center;
margin-left: auto;
margin-right: 30px;
}
.searchBox input {
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
.searchBox button {
padding: 5px 10px;
margin-left: 5px;
border: none;
border-radius: 12px;
background-color: #0071E3;
color: white;
cursor: pointer;
}
.paginationDynamic {
display: inline-block;
}
.paginationDynamic a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
border: 1px solid #ddd;
margin:5px;
}
.paginationDynamic a.active {
background-color: #1586c6;
color: white;
border: 1px solid #1586c6;
}
@media (max-width: 768px) {
.newsContainer {
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
}
.newsContainer ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
.newsContainer li:before, li:after {
content: none;
}
.newsList li {
width: 100%;
margin: 10px 12px;
}
.newsList li:last-child {
margin-right: 0;
}
.newsList li.icon {
width: 100%;
}
.newsContainerThin{
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
}
.navContainer{
flex-direction: column;
align-items: flex-start;
}
}
.eventContainer {
box-sizing: border-box;
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding: 0 10px;
}
.eventItem {
box-sizing: border-box;
width: 100%;
margin-bottom: 30px;
display: flex;
align-eventItems: flex-start;
}
.eventItem img {
width: 240px;
height: auto;
border-radius:10px;
margin-right:20px;
}
.eventItem:hover img{transform: scale(1.02);}
.eventItemContent {
display: flex;
flex-direction: column;
width: 100%;
}
.eventTopRow {
display: flex;
justify-content: space-between;
}
.eventLeftCol {
padding-left:30px;
width:37%;
text-align:left;
font-size:20px;
}
.eventCentertCol {
width:45%;
font-size:20px;
text-align:left;
padding: 0;
}
.eventRightCol {
width:18%;
text-align:right;
font-size:20px;
}
.eventbottomRow {
text-align: right;
margin-top: 20px;
}
.eventbottomRow a{
display: inline-flex;align-items: center;justify-content: center; height: 36px; width: 105px; border-radius:22px; text-align: center; font-size: 14px; color: #fff; background: #0071e3;text-decoration: none;
}
@media (min-width: 768px) {
.eventItem {
flex-direction: row;
}
.eventTopRow {
justify-content: space-between;
}
.eventLeftCol {
text-align:left;
}
.eventRightCol {
text-align:right;
}
}
@media (max-width: 768px) {
.eventContainer {
width: 100%;
}
.eventItem {
margin: 0;
padding: 0;
flex-direction: column;
margin-bottom: 20px;
}
.eventItem img {
height: auto;
max-width:none;
width:100%;
margin-bottom: 10px;
}
.eventTopRow {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.eventLeftCol {
max-width:180px;
font-size:14px;
padding: 0;
}
.eventCentertCol {
padding-left:10px;
font-size:14px;
}
.eventRightCol {
width:auto;
font-size:14px;
}
.eventbottomRow {
margin-top: 0;
text-align:center;
}
}
.popformBox {
position: relative;
width: fit-content;
height: fit-content;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 15px;
padding: 50px 40px 20px 40px;
box-shadow: 0px 106px 42px rgba(0, 0, 0, 0.01),
0px 59px 36px rgba(0, 0, 0, 0.05), 0px 26px 26px rgba(0, 0, 0, 0.09),
0px 7px 15px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
border-radius: 11px;
font-family: "Inter", sans-serif;
background-color:#eff7fc;
}
.poptitleBox {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
min-width:280px;
}
.poptitle {
margin: 0;
font-size: 22px;
font-weight: 28px;
color: #212121;
}
.popsubtitle {
font-size: 12px;
max-width: 80%;
text-align: center;
line-height: 18px;
color: #8B8E98;
}
.popinputBox {
width: 100%;
height: fit-content;
position: relative;
display: flex;
flex-direction: column;
gap: 5px;
}
.popinputLabel {
font-size: 14px;
color: #8B8E98;
font-weight: 18px;
}
.popinputField {
width: auto;
height: 40px;
padding: 0 0 0 10px;
border-radius: 7px;
outline: none;
border: 1px solid #e5e5e5;
filter: drop-shadow(0px 1px 0px #efefef)
drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
}
.popinputField:focus {
border: 1px solid transparent;
box-shadow: 0px 0px 0px 2px #242424;
background-color: transparent;
}
.popmessageBox{
width: auto;
height: 80px;
padding: 10px;
border-radius: 7px;
outline: none;
border: 1px solid #e5e5e5;
filter: drop-shadow(0px 1px 0px #efefef)
drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
}
.popSubmitBTN {
margin-top:15px;
width: 60%;
height: 40px;
border: 0;
background: #1586c6;
border-radius: 7px;
outline: none;
color: #ffffff;
cursor: pointer;
}
.popnoteInfo {
font-size: 14px;
color: #8B8E98;
}
#closeButton {
width: 30px;
height: 30px;
cursor: pointer;
background-color: #ccc;
color: #fff;
text-align: center;
line-height: 30px;
border-radius: 50%;
}
#closeButton:hover {
background-color: #999;
}
.NEWpopformBox {
position: relative;
width: fit-content;
height: fit-content;
display: flex;
flex-direction: column;
align-items: left;
justify-content: center;
gap: 15px;
padding: 20px 20px 20px 20px;
box-shadow: 0px 106px 42px rgba(0, 0, 0, 0.01),
0px 59px 36px rgba(0, 0, 0, 0.05), 0px 26px 26px rgba(0, 0, 0, 0.09),
0px 7px 15px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
border-radius: 11px;
font-family: "Inter", sans-serif;
background-color:#fff;
min-width:360px;
}
.NEWpoptitleBox {
}
.NEWpoptitleBox {
display: flex;
justify-content: space-between;
margin-bottom:10px;
}
.NEWpoptitleBox .title-left {
font-size: 24px;
color: #1D1D1D;
align-items: center;
}
.NEWpoptitleBox .title-right {
align-items:top;
}
.NEWpoptitle {
margin: 0;
font-size: 36px;
font-weight: 42px;
color: #212121;
}
.NEWpopsubtitle {
font-size: 12px;
max-width: 80%;
text-align: center;
line-height: 18px;
color: #8B8E98;
}
.NEWpopinputBox {
width: 100%;
height: fit-content;
position: relative;
display: flex;
flex-direction: column;
gap: 5px;
}
.NEWpopinputLabel {
font-size: 14px;
color: #8B8E98;
font-weight: 18px;
}
.NEWpopinputField {
width: auto;
height: 40px;
padding: 0 0 0 10px;
border-radius: 7px;
outline: none;
border: 1px solid #e5e5e5;
filter: drop-shadow(0px 1px 0px #efefef)
drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
background-color:#fafafa;
}
.NEWpopinputField:focus {
border: 1px solid transparent;
box-shadow: 0px 0px 0px 2px #242424;
background-color: transparent;
}
.NEWpopmessageBox{
width: auto;
height: 80px;
padding: 10px;
border-radius: 7px;
outline: none;
border: 1px solid #e5e5e5;
filter: drop-shadow(0px 1px 0px #efefef)
drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
background-color:#fafafa;
}
.NEWpopSubmitBTN {
width: 100%;
height: 40px;
border: 0;
background: #0071E3;
border-radius: 20px;
outline: none;
color: #ffffff;
cursor: pointer;
}
.NEWpopnoteInfo {
font-size: 12px;
color: #8B8E98;
}
.thxformContainer {
}
.thxrespForm {
padding: 30px;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 5px 5px 15px -1px rgba(0,0,0,0.75);
background-color:#eff7fc;
width:260px;
}
.thxInfo {
color: rgb(77, 75, 75);
text-transform: uppercase;
letter-spacing: 2px;
display: block;
font-weight: bold;
font-size: 22px;
margin-bottom: 30px;
}
.thxDes {
display: flex;
margin-bottom: 30px;
align-items: center;
width:150px;
font-size: 14px;
text-align:center;
}
.thxcloseBTN {
width: 50%;
padding: 10px;
padding-bottom:10px;
border-radius: 5px;
color: white;
background-color: #1586c6;
border: none;
cursor: pointer;
}
.flex-divider {
display: flex;
align-items: center;
justify-content: center;
font-size: 0;
margin-top:10px;
}
.flex-divider .line-left,
.flex-divider .line-right {
flex-grow: 1;
border-bottom: 1px solid #ccc;
}
.flex-divider .text {
margin: 0 20px;
background-color: #fff;
font-size: 16px;
}
.popPhoneNum{
display:flex;
align-items: center;
margin: 6px auto;
}
.popPhoneNum .popPhoneText{
font-size: 20px;
color: #0071E3;
padding-left: 10px;
}
.machineContent{
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.machineContainer {
display: flex;
width: 100%;
max-width: 1600px;
margin: 50px auto;
}
.MCleft, .MCright {
flex: 1;
max-width:800px;
}
.MCleft {
text-align:center;
}
.machineContainer.left img {
max-width: 100%;
height: auto;
}
.machineContainer .text{ margin:0 50px;}
.machineContainer .text h2{ font-size: 28px; color: #000; line-height: 36px; margin-bottom: 20px;}
.machineContainer .text .horList { padding: 20px 0; width: 100%; overflow: hidden;list-style-type: none;}
.machineContainer .text .horList li{ text-align: center; font-size: 14px; color: #0f0f0f; width: 25%; float: left;}
.machineContainer .text .horList li b{ display: block; font-size: 20px; color: #000; margin-bottom: 15px;}
.machineContainer .text .verList {list-style-type: none; padding-left: 0;}
.machineContainer .text .verList li{ display: flex; align-items: flex-start; margin-bottom: 5px;line-height:24px;font-size: 16px;}
.machineContainer .text .verList li::before {content: "•"; margin-right: 10px; width: 20px; font-size: 24px;}
.machineContainer .text p{ font-size: 16px; color: #4b4b4b; line-height: 24px; margin-bottom: 10px;}
.machineContainer .text p span{ font-weight: bold; margin-right: 5px;}
.machineContainer .text a{ display: block; width: 140px; height: 44px; text-align: center; border-radius: 22px; text-align: center;
font-size: 14px; color: #fff; background: #0071e3; text-align: center; line-height: 44px; margin-top: 20px; text-decoration:none;}
@media (max-width: 768px) {
.machineContainer {
width: 100%;
flex-direction: column;
}
.machineContainer.MCleft {
width: 100%;
}
.machineContainer.MCright {
width: 100%;
}
.machineContainer .MCleft {
width: 100%;
height: auto;
margin: 0;
}
.machineContainer .MCleft img {
width: 100%;
}
.machineContainer .text{ margin:0 15px;}
}
.contactFABTop {
position: fixed;
bottom: 80px;
right: 20px;
background-color: #0071E3;
color: white;
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 0 2px 3px rgba(0,0,0,0.16), 0 2px 3px rgba(0,0,0,0.23);
overflow: hidden;
z-index: 1002;
}
.contactFABTop img {
width: 50%;
height: auto;
}
.contactFAB {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #0071E3;
color: white;
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 0 2px 3px rgba(0,0,0,0.16), 0 2px 3px rgba(0,0,0,0.23);
overflow: hidden;
z-index: 1003;
}
.contactFAB a {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
text-decoration: none;
}
.contactFAB img {
width: 50%;
height: auto;
}
@media (min-width: 1200px) {
.contactFABTop {
right: 100px;
}
.contactFAB {
right: 100px;
}
}
.articleList {
display: flex;
flex-direction: column;
width: 100%;
padding: 0 12px;
box-sizing: border-box;
}
.articleBlock {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.articleCate {
background-color: #d0edfe;
border-radius: 5px;
padding: 5px 10px;
color: #333;
margin-right: 10px;
}
.articleTTL {
text-decoration: none;
color: #000;
line-height: 28px;
overflow-wrap: break-word;
}
@media (min-width: 1201px) {
.articleList {
width: 1200px;
margin: 30px auto;
}
}
@media (max-width: 1200px) and (min-width: 601px) {
.articleList {
width: 95%;
margin: 30px auto;
}
}
@media (max-width: 768px) {
.articleList {
padding: 0 12px;
margin-top:20px;
}
.articleBlock {
flex-direction: column;
align-items: flex-start;
}
.articleCate {
margin-left: -2px;
}
}
.tagsIndex {
max-width: 1200px;
margin: 18px auto;
padding: 0;
}
.singleTag {
background-color: #d0edfe;
border-radius: 5px;
padding: 5px 10px;
color: #333;
display: inline-block;
margin: 12px;
padding: 10px 12px;
text-decoration: none;
}
.tagContainer {
display: flex;
justify-content: left;
align-items: center;
margin-top: 10px;
margin-bottom: 20px;
}
.tags-label {
font-weight: bold;
margin-right: 10px;
}
.tags-links a {
margin-right: 20px;
text-decoration: none;
}
.tags-links a:hover {
text-decoration: underline;
}
@media (max-width: 768px) {
.tagsIndex {
padding: 0 8px;
margin-top:20px;
}
.tagContainer {
flex-direction: column;
align-items: flex-start;
margin-left: 12px;
}
.tags-label {
margin-bottom:20px;
}
.tags-links a {
margin-top: 5px;
line-height: 28px;
}
}
.ptbContainer {
width: 100%;
max-width: 1600px;
margin: 20px auto;
margin-bottom:-30px;
}
.ptbTabs {
display: flex;
justify-content: space-around;
background-color: #fff;
border-bottom: 1px solid #ddd;
}
.ptbTab {
padding: 12px;
flex-grow: 1;
text-align: center;
cursor: pointer;
background-color: #ddf1fc;
transition: background-color 0.3s;
}
.ptbTab.active {
background-color: #a7d9f6;
}
.ptbContent {
display: none;
padding: 12px;
background-color: #fff;
}
.ptbContent.active {
display: block;
}
.ptbImage {
max-width: 100%;
height: auto;
margin-top:12px;
}
.ptbDualContent {
display: flex;
justify-content: space-around;
}
.ptbDualContent > div {
flex-basis: 50%;
padding: 10px;
}
.ptbDualContent h2{
padding:12px 0;
font-size:24px;
}
.ptbDualContent p{
padding:6px 0;
font-size:16px;
line-height:24px;
}
@media (max-width: 768px) {
.ptbDualContent {
flex-direction: column;
}
.ptbDualContent > div {
flex-basis: 100%;
}
}
/* new pages 11.22 - Consumable */
.csmContainer {width: 100%;max-width: 1600px;margin: 20px auto;display: flex;flex-wrap: wrap;padding: 12px;justify-content: space-between; }
.csmProduct {width: calc(50% - 24px);margin: 20px 12px;box-sizing: border-box;display: flex;flex-direction: column;align-items: center;}
.csmImg {width: 790px;height: 400px;overflow: hidden;margin-bottom: 20px;display: flex;justify-content: center;align-items: center;}
.csmImg img {max-width: 100%;height: auto;}
.csmImg:hover img {transform: scale(1.02); }
.csmText {width: 520px;display: flex;flex-direction: column;align-items: center;}
.csmText h2 {font-size: 28px;margin: 0;padding: 0;text-align:center;}
.csmText p {font-size: 17px;margin: 10px 0;padding: 0;line-height:22px;color: #606060;text-align:center;}
.csmText a {display: block; margin: 25px auto 0 auto; width: 142px; height: 44px; border-radius:22px; text-align: center; line-height: 44px; font-size: 14px; color: #fff; background: #0071e3;text-decoration: none; }
@media (max-width: 800px) {
.csmContainer {max-width: none;width: 100%;margin: 20px 0;padding: 0;}
.csmProduct {margin: 16px 6px;width: calc(50% - 12px);}
.csmImg {width: 100%;height: auto;}
.csmText {width: 100%;padding: 0 12px;}
.csmText h2 {font-size: 16px;line-height:22px;margin: 0;padding: 0; }
.csmText p {font-size: 13px;margin: 10px 0; padding: 0;line-height:16px;}
.csmText a {display: block; margin: 15px auto 0 auto; width: 122px; height: 34px; border-radius:16px; text-align: center; line-height: 34px; font-size: 14px; color: #fff; background: #0071e3;text-decoration: none;}
}
/* new pages 11.22 - Solutoin of Lab and Practice */
.slsContainer {width: 100%;max-width: 1600px; margin: 20px auto; display: flex;flex-wrap: wrap;justify-content: space-between; padding: 0 12px;}
.slsProduct {width: calc(33.333% - 24px); margin: 20px 12px; box-sizing: border-box;display: flex;flex-direction: column;align-items: center;}
.slsImg {width: 520px; height: 400px; margin-bottom: 20px;}
.slsImg img {width: 100%; height: 100%; object-fit: cover;}
.slsImg:hover img {transform: scale(1.02); }
.slsText {width: 520px; text-align: center;}
.slsText h2 {font-size: 28px;margin: 0;padding: 0;}
.slsText p {font-size: 17px;margin: 10px 0;padding: 0;line-height:22px;}
.slsText a {display: block; margin: 25px auto 0 auto; width: 142px; height: 44px; border-radius:22px; text-align: center; line-height: 44px; font-size: 14px; color: #fff; background: #0071e3;text-decoration: none;}
@media (max-width: 800px) {
.slsContainer {max-width: none;width: 100%;margin: 20px 0;padding: 0;}
.slsProduct {margin: 16px 6px;width: calc(50% - 12px); }
.slsImg {width: 100%;height: auto; }
.slsText {width: 100%;padding: 0 12px; }
.slsText h2 {font-size: 16px;line-height:22px;margin: 0;padding: 0;}
.slsText p {font-size: 13px;margin: 10px 0;padding: 0; line-height:16px;}
.slsText a {display: block; margin: 15px auto 0 auto; width: 122px; height: 34px; border-radius:16px; text-align: center; line-height: 34px; font-size: 14px; color: #fff; background: #0071e3;text-decoration: none;}
}
.slsNavContainer {width: 100%;max-width: 1600px; margin: 50px auto; display: flex;justify-content: space-between;align-items: center;padding: 12px; }
.slsNavHeader {display: flex;align-items: center;}
.slsCate {margin-right: 32px; position: relative;}
.slsCate a{font-size:30px;color:#606060;}
.slsCate.active a,.slsCate a:hover {font-size:30px;color:#0071e3;text-decoration: none; }
.slsCate.active:after {content: '';display: block;width: 100%;height: 2px;background-color: #0071e3;position: absolute;bottom: -10px; left: 0;}
.slsCate a {text-decoration: none; color: #555;}
.slsSearchBox {display: flex;align-items: center;}
.slsSearchBox #search-input {margin-right: 10px; }
.slsSearchBox input {padding: 5px; border: 1px solid #ccc; border-radius: 4px; height: 24px;}
.slsSearchBox button {padding: 10px 12px; margin-left: 5px; border: none; border-radius: 16px; background-color: #0071E3; color: white; cursor: pointer; }
@media (max-width: 800px) {
.slsNavContainer {flex-direction: column;align-items: center;margin: 20px auto;}
.slsNavHeader {box-sizing: border-box;width: 100%; padding: 0;margin: 0;overflow-x: auto;white-space: nowrap; }
.slsNavHeader::-webkit-scrollbar {display: none;}
.slsCate {display: inline-block;margin-right: 18px; }
.slsCate a{font-size:16px;}
.slsCate.active a,.slsCate a:hover {font-size:16px;}
.slsSearchBox {margin-top: 20px; width: 80%;}
.slsSearchBox #search-input {width: 100%; box-sizing: border-box; }
.slsSearchBox input { height: 28px;}
.slsSearchBox button {padding: 6px 12px;}
}
.equipmentBanner {
.banner2 {
width: 1600px;
max-width: 100%;
margin: 0 auto;
overflow: hidden;
}
.title2 {
width: 100%;
padding: 10px;
box-sizing: border-box;
color: #fff;
font-size: 2em;
text-align: center;
}
.content-row2 {
display: flex;
justify-content: space-between;
padding: 20px;
box-sizing: border-box;
}
.des2, .mainImg2, .param2 {
padding: 10px;
box-sizing: border-box;
}
.des2 {
flex-basis: calc(40%);
padding-left: 100px;
line-height: 30px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.param2 {
flex-basis: calc(30%);
padding-right: 100px;
padding-top: 50px;
padding-bottom: 50px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column; /* PC端时上下排列 */
}
.mainImg2 {
text-align: center;
}
.mainImg2 img.responsive {
max-width: 100%;
height: auto;
margin: 0 auto;
}
.param2 div {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
margin: 5px 0; /* 添加一些间距 */
}
}
@media (max-width: 768px) {
.equipmentBanner {
.content-row2 {
flex-direction: column; /* 手机端时上下排列 */
}
.title2 {
width: 100%;
margin: 10px 0 -10px 0;
}
.des2, .mainImg2, .param2 {
width: 100%;
margin-bottom: 10px;
padding: 10px;
}
.param2 {
flex-direction: row; /* 手机端时水平排列 */
flex-wrap: wrap; /* 允许换行 */
justify-content: center; /* 水平居中 */
}
.param2 div {
width: calc(50% - 20px); /* 每个div占50%宽度，减去间距 */
margin: 5px; /* 添加一些间距 */
}
}
}
/* Equipment and Material HeaderArea */
.equipmentBlock {
max-width: 1600px;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
/* background-color: #fff; */
}
.eqmTitle {
width: 100%;
text-align: center;
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
padding: 0 10px; /* 为小屏幕设备增加内边距 */
}
.eqmCnt {
display: -webkit-flex; /* 兼容iOS和X5内核 */
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.cntDes, .cntImg, .cntParam {
padding: 20px;
box-sizing: border-box;
/* background-color: #f9f9f9; */
}
.cntDes {
-webkit-flex: 0 0 30%;
flex: 0 0 30%;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
text-align: justify; /* 文本对齐 */
line-height: 1.4em;
}
.cntImg {
-webkit-flex: 0 0 40%;
flex: 0 0 40%;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.cntImg img {
max-width: 100%;
height: auto;
display: block;
}
.cntParam {
-webkit-flex: 0 0 30%;
flex: 0 0 30%;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.cntParam div {
margin: 10px 0;
text-align: center;
}
@media (max-width: 768px) {
.eqmCnt {
-webkit-flex-direction: column;
flex-direction: column;
}
.cntDes, .cntImg, .cntParam {
width: 100%;
margin-bottom: 12px; /* 添加间距 */
}
.cntParam {
-webkit-flex-direction: row;
flex-direction: row;
-webkit-justify-content: space-around;
justify-content: space-around;
}
.cntParam div {
margin: 0 10px;
display: flex;
-webkit-display: row;
align-items: center;
-webkit-align-items: center;
}
}
/* ************** */
/* 基础样式 */
.materialBlock {
width: 100%;
overflow: hidden;
}
.pc-only {
display: block; /* 默认在PC端显示 */
}
.mobile-only {
display: none; /* 默认在PC端隐藏 */
}
.title2 {
display: block; /* 默认在PC端显示 */
width: 100%;
padding: 10px;
box-sizing: border-box;
color: #fff;
font-size: 2em;
text-align: center;
}
.des2, .mainImg2, .param2 {
display: block; /* 默认在PC端显示 */
padding: 10px;
box-sizing: border-box;
}
.des2 {
line-height: 30px;
text-align: center;
}
.param2 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.param2 div {
margin-bottom: 10px;
text-align: center;
}
.mainImg2 img.responsive {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
/* 媒体查询：移动端 */
@media (max-width: 768px) {
.pc-only {
display: none; /* 在移动端隐藏 */
}
.mobile-only {
display: block; /* 在移动端显示 */
}
.title2 {
display: block; /* 在移动端显示 */
width: 100%;
padding: 10px;
box-sizing: border-box;
color: #0071E3;
font-size: 1.4em;
text-align: center;
}
.des2, .mainImg2, .param2 {
width: 100%;
margin-bottom: 10px;
}
.des2 {
text-align: left;
padding-left:20px;
}
.param2 {
display: flex;
flex-direction: row; /* 设置为行布局 */
justify-content: space-between; /* 水平对齐 */
align-items: center; /* 垂直对齐 */
padding: 0 10px; /* 调整内边距 */
}
.param2 div {
flex: 1; /* 每个div平分空间 */
margin: 0 5px; /* 添加间距 */
text-align: center;
}
}
/* homepage swiper 2025-09 */
.carousel {
position: relative;
width: 100%;
overflow: hidden;
}
.carousel-wrapper {
display: flex;
height: 100%;
transition: transform 0.5s ease-in-out;
}
.carousel-slide {
min-width: 100%;
height: 100%;
position: relative;
}
.carousel-slide img {
width: 100%;
height: auto;
display: block;
}
.carousel-nav {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
padding: 0 50px;
box-sizing: border-box;
z-index: 10;
}
.carousel-btn {
width: 58px;
height: 58px;
background-color: rgba(255, 255, 255, 0.5);
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s;
font-size:22px;
font-weight:normal;
color: #fff;
}
.carousel-btn:hover {
background-color: rgba(255, 255, 255, 0.8);
}
.carousel-indicators {
position: absolute;
bottom: 25px;
left: 0;
right: 0;
display: flex;
justify-content: center;
gap: 8px;
z-index: 10;
}
.indicator {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: all 0.3s;
border: none;
padding: 0;
}
.indicator.active {
width: 24px;
background-color: #0071E3;
border-radius: 4px;
}
.banner_wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.carousel-slide {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.carousel .carousel-slide .tit1{font-size: 2.4rem; font-weight: bold;line-height: 3.0rem; position: absolute; top: 30%; left: 12%; }
.carousel .carousel-slide .tit2{font-size: 2.4rem; color: #0071E3;font-weight: bold; line-height: 3.45rem; position: absolute; top: 18%; left: 12%;}
.carousel .carousel-slide .des{font-size: 1.8rem; line-height: 2.2rem; position: absolute; top: 50%; left: 12%;}
.carousel-slide .btn {
background-color: #0071e3;
border-radius: 22px;
padding: 12px 34px;
text-align: center;
margin: 10px;
display: inline-block;
font-size: 1.4rem;
transition: background-color 0.3s ease;
position: absolute; top: 70%; left: 12%;
}
.carousel-slide .btn a {
color: #ffffff;
text-decoration: none;
}
.carousel-slide .btn:hover {
background-color: #005ea3;
}
.carousel-slide .btn a:hover {
color: #ffffff;
}
.MOcarousel {
position: relative;
width: 100%;
overflow: hidden;
display: none;
}
.MOcarousel .carousel-slide img {
width: 100%;
object-fit: cover;
}
@media (max-width: 768px) {
.carousel {
display: none;
}
.MOcarousel {
display: block;
}
.carousel-btn {
width: 30px;
height: 30px;
font-size: 12px;
}
.tit1 {
font-size: 14px;
line-height: 1.6rem; position: absolute; top: 70%; left: 5%;
}
.carousel-indicators {
bottom: 20px;
}
.MOcarousel .carousel-nav {
padding: 0 20px;
}
.carousel-slide .btn {
background-color: #0071e3;
border-radius: 12px;
padding: 8px 18px;
text-align: center;
margin: 6px;
display: inline-block;
font-size: 12px;
position: absolute; top: 82%; right: 5%;
left: auto;
}
}
/* footer policy style */
.fstateline {
margin-top:30px;
}
.fstateline {
width: 100%;
text-align: left;
margin-bottom: 10px;
}
.fstateleft {
text-align: left;
}
.fstateright {
text-align: right;
}
@media screen and (min-width: 769px) {
.fstateleft, .fstateright {
display: inline-block;
width: 49%;
}
}
@media screen and (max-width: 768px) {
.fstateleft, .fstateright {
display: block;
width: 100%;
margin-bottom: 10px;
text-align: left;
}
}
.fstateright a {
color: #0071e3;
text-decoration: none;
font-weight: bold;
transition: color 0.3s ease;
}
.fstateright a:hover {
color: #005ea3;
}
/* ... style */
.fthNavContainer {
position: fixed;
bottom: 130px;
right: 80px;
z-index: 100;
display: flex;
flex-direction: column;
padding: 10px;
}
.fthNavHeader {
width: 100%;
}
.fthCate {
background-color: rgba(255, 0, 0, 0.6);
margin-bottom: 10px;
padding: 10px;
background-color: red;
opacity: 0.6;
border-radius: 8px;
}
.fthCate a {
color: white;
text-decoration: none;
cursor: pointer;
}
.fthCate.active {
background-color: darkred;
}
.fthContainer {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
padding: 10px;
}
.fthProduct {
width: calc(25% - 10px);
text-align: center;
box-sizing: border-box;
margin: 20px 0;
}
.fthImg img {
width: 100%;
height: auto;
}
.fthImg:hover img {transform: scale(1.02); transition: transform 0.3s ease;}
.fthText h2 {font-size: 22px;margin: 0 auto;padding: 0; max-width:380px;line-height: 26px;}
.fthText p {font-size: 14px;margin: 10px 0;padding: 0;line-height:18px;}
.fthText a {display: block; margin: 20px auto; width: 122px; height: 34px; border-radius:16px; text-align: center; line-height: 34px; font-size: 14px; color: #fff; background: #0071e3;text-decoration: none;}
@media (max-width: 768px) {
.fthProduct {
width: calc(50% - 10px);
}
.fthNavContainer {
bottom: 10px;
left: 0;
width: auto;
height: auto;
}
.fthCate {
font-size:12px;
width: 150px;
}
.fthProduct {
margin: 2px 0;
}
.fthText h2 {font-size: 16px;margin: 0;padding: 0; max-width:180px;line-height: 20px;}
.fthText p {font-size: 12px;margin: 10px 0;padding: 0;line-height:16px;}
.fthText a {display: block; margin: 20px auto; width: 100px; height: 30px; border-radius:16px; text-align: center; line-height: 30px; font-size: 13px; color: #fff; background: #0071e3;text-decoration: none;}
.fthCate {
margin-bottom: 6px;
padding: 8px;
}
}
/* blog bottom products */
.blogProducts {
max-width: 1380px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
padding: 10px;
box-sizing: border-box;
}
.sixProduct {
width: calc(16% - 10px);
text-align: center;
box-sizing: border-box;
margin: 20px 0;
}
.sixImg {
position: relative;
width: 100%;
padding-bottom: 100%;
}
.sixImg img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
margin: 0;
}
.sixImg:hover img {transform: scale(1.02); transition: transform 0.3s ease;}
.sixText h2 {font-size: 18px;margin: 0 auto;padding: 0; max-width:380px;line-height: 26px;}
.sixText p {font-size: 14px;margin: 10px 0;padding: 0;line-height:18px;}
.sixText a {display: block; margin: 20px auto; width: 122px; height: 34px; border-radius:16px; text-align: center; line-height: 34px; font-size: 14px; color: #fff; background: #0071e3;text-decoration: none;}
@media (max-width: 768px) {
.sixProduct {
width: calc(50% - 10px);
}
.sixProduct {
margin: 2px 0;
}
.sixText h2 {font-size: 16px;margin: 0;padding: 0; max-width:180px;line-height: 20px;}
.sixText p {font-size: 12px;margin: 10px 0;padding: 0;line-height:16px;}
.sixText a {display: block; margin: 20px auto; width: 100px; height: 30px; border-radius:16px; text-align: center; line-height: 30px; font-size: 13px; color: #fff; background: #0071e3;text-decoration: none;}
}
}
/* download product manual style */
.proDown {
width: 100%;
max-width: 1600px;
margin: 0 auto;
}
.proDown .download-section {
width: 100%;
background-color: #e0f7fa;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 30px;
margin: 0 auto;
margin-top: 50px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 20px;
}
.proDown .download-title {
font-size: 24px;
color: #333;
margin-bottom: 20px;
}
.proDown .download-description {
font-size: 16px;
color: #666;
}
.proDown .downLoadPDF {
display: inline-block;
padding: 15px 30px;
font-size: 18px;
color: #fff;
background-color: #cd3722;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.proDown .downLoadPDF:hover {
background-color: #437ae8;
cursor: pointer;
}
.proDown .downLoadPDF a {
color: #fff;
text-decoration: none;
display: block;
}
/* 媒体查询 */
@media (min-width: 768px) {
.proDown .download-section {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
/* ... style */