*{ margin: 0; padding: 0; font-family: "AlbabaSans"; 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;}


.product_bg01{ background: url("../images/ser_bg.jpg") center no-repeat; background-size: cover;}
.product_title span{ font-family: DINPro; text-transform: uppercase;}
.product_title .product_hue{ color: #fff;}
.product_mid{ text-align: center;}
.serve{ overflow: hidden;}
.serve li{ float: left; transition: all 0.5s; background: #2663c4; position: relative; cursor: pointer;}
.serve li:last-child{ margin: 0 0 15px 0;}
.serve h1{ color: #fff;}
.serve p{ color: #8caee3; margin: 5px 0 0;}
.serve img{ position: absolute; right: 30px; top: 30px; z-index: 9;}
.serve .ser_img02{ display: none;}
.serve li:hover{ background: #fff;}
.serve li:hover h1{ color: #222327;}
.serve li:hover p{ color: #222327;}
.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: #006b47;}
.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: #006b47; color: #fff; border: solid 1px #006b47;}

.product_bg02{ background: #f1f6fb; position: relative;}
.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: #006b47;}
.record01{ width: 100%; background: #006b47; 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: #006b47;}
.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: #006b47;}
.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: #006b47;}

.contact{ background: #006b47;}
.contact01{ float: left;}
.contact01 h1{ color: #fff;}
.contact01 p{ color: #fff;}
.contact_form{ overflow: hidden;}
.contact_form input{ padding: 0 3%; color: #fff; background: #05a871; float: left;}
input::-webkit-input-placeholder{ color:#fff;}
input::-moz-placeholder{ color:#fff;}
input:-moz-placeholder{ color:#fff;}
input:-ms-input-placeholder{ color:#fff;}
.contact_form button{ color: #fff; border: solid 1px #05a871; float: right; cursor: pointer;}
.contact_form button:hover{ background: #05a871;}
.contact02{ width: 50%; position: absolute; bottom: 0; right: 0; z-index: 9; padding: 0 279px 0 5%;}
.contact02 ul{ overflow: hidden; width: 100%; margin-left:180px;}
.contact02 li{ float: left; text-align: center; width: 50%; text-align: center;}
.contact02 li img{ width: 100px;}
.contact02 p{ color: #fff; margin: 10px 0 0;}
.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;}
.footer_touch b{ display: block; font-family: DINPro; color: #fff;}
.footer_touch p{ color: #878990; line-height: 30px;}
.footer_touch span{ display: inline-block; color: #878990; margin-right: 30px;}
.footer01b{ float: left; width: 42%; margin-left: 8%; overflow: hidden;}
.footer_ul{ float: left;}
.footer_ul:nth-child(1){ width: 32%;}
.footer_ul:nth-child(2){ width: 32%;}
.footer_ul:nth-child(3){ width: 36%;}
.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;}
.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{ color: #878990;}
.footer02 a{ color: #878990;}
.footer_ul li:hover>a{ 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("../images/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: 15; 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: #cb1c1c; font-family: DINPro; margin-right: 10px;}

.product_bg04{ background: url("../images/idea_bg1.png") left bottom #006b47 no-repeat; background-size: auto 100%;}
.idea{ margin: 60px 0 0;}
.idea li{ border-top: solid 1px #05a871; 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("../images/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: #006b47; color: #fff;}

.content_bg{ width: 100%; background: #f1f6fb;}
.lead{ width: 100%; background: #fff;}
.lead_title{ border-left: solid 3px #006b47; padding: 25px 10%; border-bottom: solid 1px #e5e5e5;}
.lead_title span{ color: #006b47; font-family: DINPro; font-size: 18px; text-transform: uppercase;}
.lead_title h1{ font-size: 30px; color: #006b47; margin: 3px 0 0;}
.lead li{ transition: all 0.3s; cursor: pointer;}
.lead li:last-child{ border-bottom: 0;}
.lead li:hover{ background: #006b47;}
.lead li:hover>a{ color: #fff;}
.lead .lead_active{ background: #407dde; color: #fff;}
.lead .lead_active a{ color: #fff;}
.relation{ background: url("../images/con_bg.png") 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: #006b47;}
.case li:hover .case_word span{ color: #006b47; 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: #006b47; 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);}
.news_pic:hover>img{ transform: scale(1.08);}
.news li:hover .news_word h1{ color: #006b47;}
.news li:hover .news_word span{ color: #006b47; 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: #006b47;}
.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: 14px; color: #fff;}
.sketch_word a{ font-size: 14px; color: #fff;}
.caption{ border-bottom: solid 1px #e5e5e5;}
.caption span{ display: inline-block; background: #006b47;}
.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: #006b47; float: left;}

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