*{ margin: 0; padding: 0; font-family: word; font-size: 16px; color: #222327; box-sizing: border-box;}
img{ border: 0; -ms-interpolation-mode: bicubic;}
a,p,span,h1,i{ text-decoration: none; margin: 0;}
li,ul{ list-style: none;}
input,button{ border: none; outline: none; background: none; margin: 0;}
a{cursor: pointer;}
a,li,div{cursor: pointer;-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-user-select: none;
-moz-user-focus: none;
-moz-user-select: none;}
@font-face {
    font-family : DINPro;
    src : url(../font/DINPro-Bold.otf);
}




.header{ position: fixed; width: 100%; height: 80px; top: 0; left: 0; z-index: 99999;}
.header .header_logo{ float: left; overflow: hidden;}
.header_logo img{ width: 280px; float: left;}
.header_logo span{ font-size: 14px; color: #fff; float: left; line-height: 18px; margin-left: 20px;}
.header_pc{ float: right; margin-right: 2%;}
.header_pc ul{ position: relative; height: 80px;}
.header_pc .header_topic{float: left; cursor: pointer; position: relative;}
.header_word01{ padding: 0 24px; transition: all 0.3s; background-size: 100% 0;}
.header_word01 a{ font-size: 16px; color: #fff; line-height: 80px; display: inline-block;}
.header_word01 img{ width: 10px; margin-left: 5px; transition: all 0.5s;}
.header_word01 .header_arrow02{ display: none;}
.header_word02{ position: absolute; top: 80px; left: 50%; z-index: 99999; padding: 0 15px; min-width: 100%; box-shadow: 0 0 4px #eee;
background: transparent; opacity: 0; visibility: hidden; transition: all 0.5s; transform: translate(-50%, 50px);}
.header_word02 a{ line-height: 60px; display: block; font-size: 14px; white-space: nowrap; text-align: center; transition: border-bottom 0.7s; border-bottom: solid 1px transparent;}
.header_tip{ float: right; overflow: hidden; margin: 26px 0 0;}
.header_tip img{ width: 18px; float: left; margin: 6px 0 0;}
.header_tip span{ font-family: DINPro; font-size: 20px; color: #fff; margin-left: 10px; float: left;}
.header_topic:hover .header_word01 a{ color: #03c087;}
.header_topic:hover .header_word02{ opacity: 1; visibility: visible; background: #fff; transform: translate(-50%,0);}
.header_topic:hover .header_word02 a{ border-bottom: solid 1px #f2f2f2;}
.header_topic:hover .header_word01 img{ transform: rotate(-180deg);}
.header_word02 a:hover{ color: #03c087;}
.header_col{ background: #fff; box-shadow: 0 0 5px #ccc; opacity:0}
.header_logo02,.header_arrow02,.tell_pic02{ display: none;}
.header_word01 .header_hue{ color: #222327;}
.header_logo .header_hue{ color: #222327;}
.header_tip .header_hue{ color: #03c087;}

.header_title{ display: none; position: fixed; width: 100%; left: 0; top: 0; z-index: 999999; background: #03c087;}
.header_title01{ padding: 1rem 8%; border-bottom: solid 1px #3460a3; overflow: hidden; line-height: 1.2rem;}
.header_title01 p{ color: #fff; font-weight: bold; float: left; font-size: 0.8rem;}
.header_title01 span{ color: #fff; font-weight: bold; float: right; font-size: 0.9rem; padding: 0 0 0.15rem 0.3rem;}
.header_title02{ max-height: 80vh; overflow-y: scroll;}
.dropdown-menu{ border-bottom: solid 1px #3460a3;}
.dropdown-menu:last-child{ border-bottom: 0;}
.dropdown-menu p{ font-size: 0.7rem; color: #fff; padding: 0 8%; line-height: 2.2rem;}
.dropdown-menu ul{ display: flex; align-items: center; flex-wrap: wrap; padding: 0.3rem 0 0.3rem 8%; background: #407dde;}
.dropdown-menu li{ width: 50%; line-height: 1.8rem; height: 1.8rem;} 
.dropdown-menu .dropdown-ul li{ width: 90%;}
.dropdown-menu li a{ font-size: 0.65rem; color: #fff;}

.container{ margin: 0 auto;}
.container::after{ content:''; display:block; width: 0; height:0; clear:both; visibility:hidden;}
.rel{ position: relative;}
.flow{ overflow: hidden;}
.clear{ clear: both;}

.banner{ width: 100%; position: relative;}
.banner_pic{ display: block; width: 100%; overflow: hidden;}
.banner_pic img{ display: block; width: 100%; height: 100%; object-fit: cover;}
.bannertu_mob{ display: none;}
.banner_word{ width: 100%; position: absolute; top: 38%; left: 0; z-index: 9; transition: all 0.8s; opacity: 0; visibility: hidden; transform: translateY(-100px);}
.bannerwrite_mob{ display: none;}
#pagination01{ text-align: left;}
#swiper01 .swiper-pagination-bullet{ border-radius: 0; background: rgba(255,255,255,0.4);}
#swiper01 .swiper-pagination-bullet-active{ border-radius: 0; background: rgba(255,255,255,1);}
#swiper01 .swiper-slide-active .banner_word{ opacity: 1; visibility: visible; transform: translateY(0);}

.facility::after{ content:''; display:block; width: 0; height:0; clear:both; visibility:hidden;}
.facility li{ float: left; background: #e9f1fa; transition: all 0.5s; cursor: pointer;}
.facility li:nth-child(1){ background: url(../img/fac_img01.png) center bottom #e9f1fa no-repeat;}
.facility li:nth-child(2){ background: url(../img/fac_img02.png) center bottom #e9f1fa no-repeat;}
.facility li:nth-child(3){ background: url(../img/fac_img03.png) center bottom #e9f1fa no-repeat;}
.facility a{ display: block;}
.facility p{ }
.facility span{ display: inline-block; font-weight: bold; transition: all 0.5s; transform: translateX(0);}
.facility li:hover{ box-shadow: 0 0 15px #ccc;}
.facility li:hover h1{ color: #03c087;}
.facility li:hover span{ transform: translateX(10px); color: #03c087;}

.product_bg01{ background: url(../img/ser_bg.jpg) center no-repeat; background-size: cover;}
.product_title span{ font-family: DINPro; text-transform: uppercase; color:#0ac189;}
.product_title .product_hue{ color: #fff;}
.product_mid{ text-align: center;}
.serve{ overflow: hidden;}
.serve li{ float: left; transition: all 0.5s; background: #fff; position: relative; cursor: pointer;}
.serve li:last-child{ margin: 0 0 15px 0;}
.serve h1{ color: #222327;}
.serve p{ color: #6b6c70; margin: 5px 0 0;}
.serve img{ position: absolute; right: 20px; top: 20px; z-index: 9;}
.serve .ser_img02{ display: none;}
.serve li:hover{ /*background: #fff;*/background-image: linear-gradient( -40deg, rgb(51,176,247) 0%, rgb(147,250,166) 100%);
 }
.serve li:hover h1{ color: #fff;}
.serve li:hover p{ color: #fff;}
.serve li:hover .ser_img01{ display: none;}
.serve li:hover .ser_img02{ display: block;}

.client::after{ content:''; display:block; width: 0; height:0; clear:both; visibility:hidden;}
.client li{ float: left; box-shadow: 0 0 15px #ddd; cursor: pointer;}
.client_pic{ width: 100%; overflow: hidden; transition: all 0.5s;}
.client_pic img{ display: block; width: 100%; height: 100%; object-fit: cover; transition: all 0.5s; transform: scale(1);}
.client_word{ background: #fff; position: relative;}
.client_word b{ display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.client_word p{ color: #6b6c70; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.client_word span{ position: absolute; z-index: 99; display: inline-block; line-height: 30px; font-weight: bold; transition: all 0.5s; transform: translateX(0);}
.client li:hover .client_pic img{ transform: scale(1.1);}
.client li:hover .client_word b{ color: #03c087;}
.client li:hover .client_word span{ transform: translateX(20px);}
.look{ text-align: center;}
.look button{ border: solid 1px #222327; text-align: center; transition: all 0.5s; cursor: pointer;}
.look button:hover{ background: #03c087; color: #fff; border: solid 1px #03c087;}

.product_bg02{ background: #fff; position: relative; box-shadow: 0px 2px 53px 0px rgba(25, 27, 32, 0.1);}
.about_loc{ position: absolute; left: 0; top: 0; z-index: 90; height: 100%;}
.about_r{ float: right;}
.about_pic{ width: 100%; overflow: hidden; cursor: pointer;}
.about_pic img{ display: block; width: 100%; height: 100%; object-fit: cover; transition: all 0.5s; transform: scale(1);}
.about_con{ padding: 20px 0 0;}
.about_con p{ color: #6b6c70; margin: 0 0 50px;}
.about_con a{ font-weight: bold;}
.about_con a:hover{ color: #03c087;}
.record01{ width: 100%;/* background: #03c087; */background-image: linear-gradient(101deg, rgb(65,174,236) 0%, rgb(133,235,152) 100%);
text-align: justify; position: absolute; left: 0; transform: translate(0,50%); z-index: 999;}
.record01 li{ display: inline-block;}
.record01 h1{ color: #fff; font-weight: normal;}
.record01 span{ color: #fff; font-family: DINPro; margin-right: 10px;}
.record01 p{ color: #fff; padding-left: 10px;}
.about_pic:hover img{ transform: scale(1.08);}

.information::after{ content:''; display:block; width: 0; height:0; clear:both; visibility:hidden;}
.information01{ float: left; box-shadow: 0 0 20px #e1e1e1; cursor: pointer;}
.information_pic{ width: 100%; overflow: hidden; }
.information_pic img{ display: block; width: 100%; height: 100%; object-fit: cover; transition: all 0.5s; transform: scale(1);}
.information_p h1{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.information_p p{ color: #6b6c70; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3; overflow: hidden;}
.information_p img{ width: 28px; transition: all 0.5s; transform: translateX(0);}
.information02{ float: right; overflow: hidden;}
.information02 li{ border-top: solid 1px #e6e6e6; cursor: pointer;}
.information02 li:nth-child(2n+1){ float: left;}
.information02 li:nth-child(2n){ float: right;}
.tab-pic{ position: relative;}
.infor_title{ position: absolute; top: -82px; right: 0; z-index: 99; text-align: right;}
.infor_title li{ display: inline-block; text-align: right; margin-left: 50px;}
.infor_title span{ display: inline-block; font-size: 18px; border-bottom: solid 3px transparent; line-height: 40px; cursor: pointer;}
.infor_title .on span{ border-bottom: solid 3px #222327;}
.information01:hover .information_pic img{ transform: scale(1.08);}
.information01:hover .information_p h1{ color: #03c087;}
.information01:hover .information_p img{ transform: translateX(15px);}
.information02 li:hover .information_pic img{ transform: scale(1.08);}
.information02 li:hover .information_p h1{ color: #03c087;}
.information02 li:hover .information_p img{ transform: translateX(15px);}
.lookmore{ display: inline-block; font-weight: bold; position: absolute; right: 0; z-index: 99;}
.lookmore:hover{ color: #03c087;}

.contact{ /*background: #03c087;*/background-image: linear-gradient(101deg, rgb(65,174,236) 0%, rgb(133,235,152) 100%);}
.contact01{ float: left;}
.contact01 h1{ color: #fff;}
.contact01 p{ color: #fff;}
.contact_form{ overflow: hidden;color:#222}
.contact_form input{ padding: 0 3%; color: #333; background: #fff; float: left;}
input::-webkit-input-placeholder{ color:#222;}
input::-moz-placeholder{ color:#222;}
input:-moz-placeholder{ color:#222;}
input:-ms-input-placeholder{ color:#222;}
.contact_form button{ color: #fff; border: solid 1px #fff; float: right; cursor: pointer;}
.contact_form button:hover{ background: #fff; color:#00bf86;}
.contact02{ width: 50%; position: absolute; bottom: 0; right: 0; z-index: 9; padding: 0 0 0 15%;}
.contact02 ul{ overflow: hidden; width: 100%;}
.contact02 li{ float: right; text-align: center; width: 50%; text-align: center;}
.contact02 li img{ width: 150px;}
.contact02 p{ color: #fff; margin: 10px 0 0; font-size:20px;}
.contact_img{ width: 279px; position: absolute; bottom: -82px; right: -30px; z-index: 9;}

.footer{ background: #222327;}
.footer01{ overflow: hidden;}
.footer01a{ float: left;}
.footer_logo span{ display: inline-block; color: #fff; margin-left: 20px}
.footer_touch b{ display: block; font-family: DINPro; color: #fff;}
.footer_touch p{ color: #878990; line-height: 30px; font-size:14px;}
.footer_touch span{ display: inline-block; color: #878990; margin-right: 30px;  font-size:14px;}
.footer01b{ float: left; width: 42%; margin-left: 13%; overflow: hidden;}
.footer_ul{ float: left; width: 33.3%;}
.footer_ul b{ display: block; color: #fff; margin: 0 0 50px;}
.footer_ul li{ color: #878990; line-height: 36px; cursor: pointer; }
.footer_ul li a{ color:#878990;font-size:14px;}
.footer_ul li a:hover{color:#fff;}
.footer01c{ float: right;}
.footer01c b{ display: block; color: #fff; margin: 0 0 50px;}
.footer01c img{ width: 145px;}
.footer02{ border-top: solid 1px #2f3136;}
.footer02 p,.footer02 a{ color: #878990;}
.footer_ul li:hover{ color: #fff;}

.picture{ width: 100%; overflow: hidden; position: relative;}
.picture img{ display: block; width: 100%; height: 100%; object-fit: cover;}
.picture_word{ position: absolute; left: 0; width: 100%; z-index: 99;}
.picture_word h1{ color: #fff;}
.picture_word p{ color: #fff;}

.product_bg03{ background: url(../img/about_bg01.jpg) right bottom no-repeat;}
.productL{ float: left;}
.productR{ float: right;}
.intro{ color: #6b6c70; text-align: justify; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 10; overflow: hidden;}
.record02{ width: 100%; text-align: justify;}
.record02::after{ content: ''; display: inline-block; width: 100%;}
.record02 li{ display: inline-block;}
.record02 h1{ font-size: 16px; font-weight: normal;}
.record02 span{ color: #03c087; font-family: DINPro; margin-right: 10px;background-image: linear-gradient(to right,#45afec,#98f3a9);
 -webkit-background-clip: text; -webkit-text-fill-color: transparent;}

.product_bg04{ background: url(../img/idea_bg.jpg) left bottom  no-repeat; background-size: cover;}
.idea{ margin: 60px 0 0;}
.idea li{ border-top: solid 1px rgba(255,255,255,0.3); overflow: hidden;}
.idea li:last-child{ padding: 30px 0 0;}
.idea p{ color: #fff; float: left;}
.idea span{ color: #fff; float: left;}

.technology_pic{ width: 100%; overflow: hidden;}
.technology_pic img{ display: block; width: 100%; height: 100%; object-fit: cover; transition: all 0.5s; transform: scale(1);}
.technology_word h1{ font-family: DINPro; text-transform: uppercase;}
.technology_word p{ color: #6b6c70; 
/*text-align: justify; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 7; overflow: hidden;*/
    
}
.technology_pic:hover>img{ transform: scale(1.08);}

.product_bg05{ background: url(../img/elegant_bg.jpg) center center no-repeat; background-size: cover;}
.elegant{ position: relative;}
.elegant::after{ content:''; display:block; width: 0; height:0; clear:both; visibility:hidden;}
.elegant section{ color: #fff; position: absolute; z-index: 9;}
.tac{ position: absolute; z-index: 99;}
.tac span{ display: inline-block; border: solid 1px #eee; color: #fff; margin-right: 5px; outline: 0; cursor: pointer;}
.tac span:hover{ color: #1f519f; background: #fff;}
#swiper02{ padding: 0 0 30px;}
#swiper02 .swiper-slide{ width: auto;}
.elegant_pic{ overflow: hidden;}
.elegant_pic img{ display: block; width: 100%; height: 100%; object-fit: cover; transition: all 0.5s; transform: scale(1);}
.elegant_pic:hover>img{ transform: scale(1.08);}
#swiper02_bar{ left: 0; bottom: 0;}
#swiper02_bar .swiper-scrollbar-drag{ background: #407dde;}

.swiperhold{ margin: 0 auto; position: relative;}
.qualify{ background: #fff; box-shadow: 0 0 20px #e1e1e1; padding: 40px 0 0;}
.qualify img{ display: block; margin: 0 auto;}
.qualify_p{ border-top: solid 1px #eee; margin: 40px auto 0; overflow: hidden;}
.qualify_p p{ float: left; width: 82%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.qualify_p span{ float: right; width: 15px; height: 2px; background: #dcdcdc; margin: 10px 0 0;}
.swiper03btn{ position: absolute; z-index: 99;}
.swiper03btn span{ display: inline-block; border: solid 1px #eee; color: #b2b2b2; margin-right: 5px; outline: 0; cursor: pointer;}
.swiper03btn span:hover{ background: #03c087; color: #fff;}

.content_bg{ width: 100%; background: #f1f6fb;}
.lead{ width: 100%; background: #fff;}
.lead_title{ border-left: solid 3px #03c087; padding: 25px 10%; border-bottom: solid 1px #e5e5e5;}
.lead_title span{ color: #03c087; font-family: DINPro; font-size: 18px; text-transform: uppercase;}
.lead_title h1{ font-size: 30px; color: #03c087; margin: 3px 0 0; background-image: linear-gradient(to right,#45afec,#98f3a9); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.lead li{ transition: all 0.3s; cursor: pointer;}
.lead li:last-child{ border-bottom: 0;}
.lead li:hover{/* background: #407dde; */background-image: linear-gradient(to right,#45afec,#98f3a9); color: #fff;}
.lead li:hover a{color:#fff;}

.relation{ background: url(../img/con_bg.jpg) center no-repeat; background-size: cover; padding: 50px 10%; margin: 50px 0 0;}
.relation h1{ font-size: 24px; font-weight: normal; color: #fff; margin: 0 0 40px;}
.relation p{ font-size: 14px; color: #fff; padding: 10px 0;}

.case{ background: #fff; overflow: hidden;}
.case li{ float: left; border-bottom: solid 1px #e5e5e5; cursor: pointer;}
.case li:nth-child(3n){ margin-right: 0;}
.case_pic{ width: 100%; overflow: hidden;}
.case_pic img{ display: block; width: 100%; height: 100%; object-fit: cover; transition: all 0.5s; transform: scale(1);}
.case_word{ overflow: hidden;}
.case_word p{ float: left; width: 82%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.case_word span{ float: right; font-size: 20px; color: #dcdcdc; transition: all 0.5s; transform: translateX(0);}
.case li:hover .case_pic img{ transform: scale(1.08);}
.case li:hover .case_word p{ color: #03c087;}
.case li:hover .case_word span{ color: #03c087; transform: translateX(-5px);}

.news{ background: #fff;}
.news li{ border-bottom: solid 1px #e5e5e5; cursor: pointer;}
.news li:last-child{ border-bottom: 0;}
.news a{ display: block; overflow: hidden;}
.news_pic{ overflow: hidden; position: relative; float: left;}
.news_pic img{ display: block; width: 100%; height: 100%; object-fit: cover; transition: all 0.5s; transform: scale(1);}
.news_date{ background-image: linear-gradient(to right,#45afec,#98f3a9);  text-align: center; position: absolute; top: 0; left: 5%; z-index: 99;}
.news_date h1{ font-family: DINPro; color: #fff;}
.news_date p{ color: #fff;}
.news_word{ float: right;}
.news_word h1{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.news_word p{ color: #6b6c70; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; overflow: hidden;}
.news_word span{ font-weight: bold; display: inline-block; transition: all 0.5s; transform: translateX(0); color:#03c087;}
.news_pic:hover>img{ transform: scale(1.08);}
.news li:hover .news_word h1{ color: #03c087;}
.news li:hover .news_word span{ color: #03c087; transform: translateX(5px);}

.article{ background: #fff;}
.article_title{ font-weight: bold; text-align: center;}
.article_date{ border-top: solid 1px #e5e5e5; border-bottom: solid 1px #e5e5e5; overflow: hidden;}
.article_date p{ color: #6b6c70; float: left;}
.article_date span{ color: #6b6c70; float: right;}
.article_p{ color: #6b6c70;}
.art_tip{ width: 100%; text-align: center; background: #fff; position: relative;}
.art_tip img{ vertical-align: middle;}
.art_tip p{ position: absolute; z-index: 99; cursor: pointer; vertical-align: middle; color: #6b6c70;}
.art_tip span{ cursor: pointer; display: inline-block; vertical-align: middle; color: #6b6c70;}
.art_tip p:hover{ color: #222327;}
.art_tip span:hover{ color: #222327;}
.production{ background: #fff;}
.production_h1 span{ display: inline-block; background: #03c087;}
.production_h1 p{ font-weight: bold; display: inline-block;}

.sketch{ width: 100%; overflow: hidden; position: relative;}
.sketch img{ display: block; width: 100%; height: 100%; object-fit: cover;}
.sketch_word{ position: absolute; left: 0; width: 100%; z-index: 99;}
.sketch_word p{ font-size: 1px; color: #fff;}
.sketch_word a{ color:#fff;}
.caption{ border-bottom: solid 1px #e5e5e5;}
.caption span{ display: inline-block; background: #03c087;}
.caption p{ font-weight: bold; display: inline-block;}

.project{ background: #fff; overflow: hidden;}
.project_pic{ overflow: hidden; float: left;}
.project_pic img{ display: block; width: 100%; height: 100%; object-fit: cover; transition: all 0.5s; transform: scale(1);}
.project_pic:hover>img{ transform: scale(1.08);}
.project_word{ float: right;}
.project_word h1{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.project_word p{ color: #6b6c70;}
.project_word span{ color: #6b6c70; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; overflow: hidden;}
.project_tell{ overflow: hidden;}
.project_tell img{ float: left;}
.project_tell p{ font-family : DINPro; font-weight: bold; color: #03c087; float: left;}

.connect p{ color: #03c087; font-family: DINPro; text-transform: capitalize;}

/*2024.10.8*/
.pagination{
    display: flex;
    justify-content: center;
    padding: 30px 0 0 0;
}
.pagination li{
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 1px;
    margin: 0 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pagination li:hover,.pagination li.active{
    background: #03c087;
    color: #fff;
}
.pagination li:hover a,.pagination li:hover span,.pagination li.active a,.pagination li.active span{
    color: #fff;
}