*{ margin: 0; padding: 0; font-family: "微软雅黑"; font-size: 16px; color: #0f0b0c; 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{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);
}
@font-face {
    font-family : DINProm;
    src : url(../font/DINPro-Medium.otf);
}
@font-face {
    font-family : DINPror;
    src : url(../font/DINPro-Regular.otf);
}
@font-face {
    font-family : Montserrat;
    src : url(../font/Montserrat-Bold.otf);
}
@font-face {
    font-family : Montserrata;
    src : url(../font/Montserrat-Medium.otf);
}
@font-face {
    font-family : Montserratb;
    src : url(../font/Montserrat-Regular.otf);
}

.header{ position: fixed; width: 100%; top: 0; left: 0; z-index: 99999; padding: 0 5%; transition: all 0.5s;}
.header .header_logo{ float: left; overflow: hidden;}
.header_logo img{ float: left;}
.header_pc{ float: left; margin-left: 4%;}
.header_pc ul{ position: relative; height: 80px;}
.header_pc .header_topic{ float: left; cursor: pointer; position: relative;}
.header_word01{ transition: all 0.3s; background-size: 100% 0; position: relative;}
.header_word01 a{ font-size: 16px; color: #fff; line-height: 50px; display: inline-block;}
.header_word01 span{ content: ''; display: block; position: absolute; width: 0; height: 3px; background: #198ff9; bottom: 12px; z-index: 999; transition: width 0.5s;}
.header_word01 img{ width: 10px; margin-left: 2px; transition: all 0.5s; vertical-align: middle;}
.header_word01 .header_arrow02{ display: none;}
.header_word02{ position: absolute; top: 100px; left: 50%; z-index: 99999; padding: 10px 15px; min-width: 120%; 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: 42px; display: block; font-size: 14px; white-space: nowrap; text-align: center;}
.header_tip{ float: right; overflow: hidden; margin: 15px 0 0; line-height: 50px;}
.header_tip img{ width: 26px; float: left; margin: 12px 0 0;}
.header_line{ float: left; margin: 0 35px 0 20px;}
.header_line span{ font-family: DINPro; font-size: 20px; color: #fff;}
.header_tip button{ width: 130px; height: 36px; line-height: 36px; border-radius: 8px; background: #198ff9; color: #fff; float: right; margin: 7px 0 0; cursor: pointer;}
.header_tip button a{ color:#fff;}
.header_tip button:hover{ background: #0f79f5;}
.header_tip .w{ display:flex;}
.header_tip .txt{color:#fff;text-align:center;line-height:24px;}
.header_topic:hover .header_word01 img{ transform: rotate(-180deg);}
.header_topic:hover .header_word02{ opacity: 1; visibility: visible; background: #fff; transform: translate(-50%,0);}
.header_topic:hover .header_word02 a{ width: 100%;}
.header_word02 a:hover{ color: #0f79f5; font-weight: bold;}

.header_col{ background: #fff; box-shadow: 0 0 5px #ccc;}
.header_logo02,.header_arrow02,.tell_pic02{ display: none;}
.header_col .header_word01 a{ color: #0f0b0c;}
.header_col .header_line span{ color: #0f0b0c;}
.header_col .header_tip .txt{color:#0f0b0c;}
.header_act{ -webkit-transform: translateY(-100%); transform: translateY(-100%);}

.header_title{ display: none; position: fixed; width: 100%; left: 0; top: 0; z-index: 999999; background: #198ff9;}
.header_title01{ padding: 1rem 8%; border-bottom: solid 1px #007ef0; 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 #007ef0;}
.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: #40a3fb;}
.dropdown-menu li{ line-height: 1.8rem; height: 1.8rem;} 
.dropdown-menu .dropdown-ul li{ width: 49%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff;}
.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;}
.container01::after{ content:''; display:block; width: 0; height:0; clear:both; visibility:hidden;}
.container02::after{ content:''; display:block; width: 0; height:0; clear:both; visibility:hidden;}
.rel{ position: relative;}
.flow{ overflow: hidden;}
.clear{ clear: both;}
.proL{ float: left;}
.proR{ float: right;}

.banner{ width: 100%; position: relative;}
.banner_pic{ display: block; width: 100%; overflow: hidden;}
.banner_pic img{ width: 100%; height: 100%; object-fit: cover;}
.banner_word{ width: 100%; position: absolute; top: 36%; left: 0; z-index: 9; text-align: center;}
.banner_word h1{ color: #fff; transition: all 0.8s; opacity: 0; visibility: hidden; transform: translateY(-100px);}
.banner_word p{ color: #fff; transition: all 0.8s ease 0.2s; opacity: 0; visibility: hidden; transform: translateY(80px);}
#swiper01{ position: relative;}
#swiper01 .swiper-pagination-bullet{ background: rgba(255,255,255,0.3);}
#swiper01 .swiper-pagination-bullet-active{ background: #fff;}
#swiper01 .swiper-slide-active .banner_word h1{ opacity: 1; visibility: visible; transform: translateY(0);}
#swiper01 .swiper-slide-active .banner_word p{ opacity: 1; visibility: visible; transform: translateY(0);}

.product_bg01{ background: #f7f7f7;}
.product_bg02{ background: url(../img/case_bg.png) center top 160px no-repeat #f7f7f7;}
.product_bg03{ background: url(../img/about_bg.png) right bottom no-repeat; background-size: 42%;}
.product_bg04{ background: url(../img/client_bg.jpg) center no-repeat; background-size: cover;}
.product_title{ position: relative;}
.product_title01{ text-align: center;}
.product_title p{ font-weight: bold;}
.product_title h1{ font-family: Montserrat; color: #198ff9; text-transform: uppercase;}
.product_title span{ display: block; color: #777;}
.product_title .product_hue{ color: #fff;}
.about_tip{color: #777;}

.serve ul{ width: 100%; text-align: justify;}
.serve ul::after{ content: ''; display: inline-block; width: 100%;}
.serve li{ display: inline-block; text-align: center; cursor: pointer;}
.serve p{ color: #777;}
.serve li img{ transition: all 0.5s;}
.serve li:hover>img{ transform: scale(1.1);}

.case ul::after{ content:''; display:block; width: 0; height:0; clear:both; visibility:hidden;}
.case li{ float: left; background: #fff; transition: all 0.5s; cursor: pointer;}
.case_pic{ width: 100%; overflow: hidden; position: relative;}
.case_pic .case_tu{ display: block; width: 100%; height: 100%; object-fit: cover; transition: all 0.5s; transform: scale(1);}
.case_pic .case_play{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 99; transition: opacity 0.5s; opacity: 0;}
.case_pic section{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 5% 5% 0; background: rgba(0,0,0,0.4); z-index: 99; opacity: 0; visibility: hidden; transition: all 0.8s;}
.case_pic section span{ color: #fff; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}
.case_pic p{ font-family: DINProm; color: #fff; position: absolute;}
.case_title{ width: 100%;}
.case_title h1{ font-weight: normal; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.case_time span{ color: #a5a5a5;}
.case_time p{ display: inline-block;}
.case li:hover{ box-shadow: 0 0 30px #ccc;}
.case li:hover .case_tu{ transform: scale(1.03);}
/*.case li:hover .case_play{ opacity: 1;}*/
.case li:hover .case_pic section{ opacity: 1; visibility: visible;}
.case li:hover .case_time span{ color: #0f0b0c;}
.look_cen{ text-align: center;}
.look button{ font-family: Montserrata; text-align: center; border-style: solid; border-color: #848383; text-transform: uppercase; cursor: pointer; transition: all 0.2s;}
.look button:hover{ background: #198ff9; color: #fff; border-color: #198ff9;}

.record ul{ width: 100%; overflow: hidden;}
.record li{ float: left; width: 33.3%; text-align: center;}
.record h1{ display: inline-block;}
.record01{ background: url(../img/about_tu.png) center no-repeat; background-size: cover;}
.record01 span{ font-family: DINPror; color: #fff;}
.record01 h1{ color: #fff; font-weight: normal; vertical-align: top;}
.record01 p{ color: #fff;}
.record02{ width: 80%; margin: 0 auto;}
.record02 span{ font-family: DINPro;}

.aboutbanner{ width: 100%;}
.about_pic{ width: 100%; overflow: hidden;}
.about_pic img{ width: 100%; height: 100%; object-fit: cover; transition: all 0.5s; cursor: pointer;}
.about_pic video{ width:100%; height:100%;}
.about_pic:hover>img{ transform: scale(1.05);}
.step{ overflow: hidden;}
.step li{ float: left;}
.step span{ font-family: DINProm; color: #198ff9;}
.step p{ color: #777;}
.step li:hover>span{ font-weight: bold;}
.step p:hover{ color: #0f0b0c;}

.client01 h1{ color: #fff;}
.client01 p{ color: #fff; font-weight: bold;}
.client01 span{ display: inline-block; background: #fff;}
.client02::after{ content:''; display:block; width: 0; height:0; clear:both; visibility:hidden;}
.client02 li{ float: left;}
.client02 li:nth-child(n+7){ display: none;}
.client02 img{ width: 100%; vertical-align: middle; transition: all 0.5s;}
.client02 li:hover>img{ transform: scale(1.1);}

.point{ overflow: hidden;}
.point li{ float: left; cursor: pointer;}
.point li:nth-child(3n){ margin-right: 0;}
.point_pic{ width: 100%; overflow: hidden;}
.point_pic img{ width: 100%; height: 100%; object-fit: cover; transition: all 0.5s;}
.point_word h1{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.point_word p{ color: #777; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
.point_time{ overflow: hidden;}
.point_time span{ float: left; font-family: Montserratb; color: #777;}
.point_time img{ float: right; transition: all 0.5s; transform: translateX(0);}
.point li:hover .point_pic img{ transform: scale(1.05);}
.point li:hover .point_time img{ transform: translateX(-12px);}

.touch_pack{ background: linear-gradient(to right,#0f79f5,#12bff8);}
.touch_title p{ color: #fff;}
.touch_title span{ color: #fff;}
.touch{ overflow: hidden;}
.touch01,.touch02{ float: left; background: #fff;}
.touch01 input,.touch02 input{ width: 100%; height: 100%;}
.touch button{ float: right; color: #fff; font-weight: bold; border-style: solid; border-color: #fff; cursor: pointer;}

.footer01{ overflow: hidden;}
.footer01a{ float: left;}
.footer_logo img{ display: block;}
.footer_logo span{ display: block; color: #777;}
.footer01 b{ display: block;}
.footer01b{ float: left;}
.footer_ul li{ color: #777; float: left; width: 50%; cursor: pointer;}
.footer_ul li a:hover{ text-decoration: underline;}
.footer01c{ float: left;}
.footer01d{ float: right;}
.footer_ul li:hover{ color: #0f0b0c;}
.footer_touch p{ color: #777;}
.footer02{ border-top: solid 1px #e2e2e2;}
.footer02 p{ color: #777;}
.footer02 span{ color: #777;}

.picture{ width: 100%; overflow: hidden; position: relative;}
.picture img{ display: block; width: 100%; height: 100%; object-fit: cover;}
.picture_word{ position: absolute; top: 43%; left: 50%; transform: translateX(-50%); z-index: 99;}
.picture_word h1{ color: #fff; text-align: center;}
.picture_word p{ color: #fff; font-family: Montserrata; text-transform: uppercase; text-align: center;}

.about_brief{ text-align: center;}
.about_brief p{ color: #777;}
.team ul{ overflow: hidden;}
.team li{ float: left;}
.team li img{ display: block; width: 100%; height: 100%; object-fit: cover;}
.team p{ background: #198ff9; color: #fff; width: 100%; height: 100%;}

.customer ul::after{ content:''; display:block; width: 0; height:0; clear:both; visibility:hidden;}
.customer li{ float: left; overflow: hidden; background: #fff; transition: all 0.5s; cursor: pointer;}
.customer li img{ display: block; width: 100%;} 
.customer li:hover{ box-shadow: 0 0 30px #c1c1c1;}

.content_bg{ background: #f7f7f7; overflow: hidden;}
.lead{ text-align: center;}
.lead span{ display: inline-block; color: #777; transition: all 0.2s;}
.lead .lead_active{ background: #198ff9; color: #fff;}
.lead span:hover{ background: #198ff9; color: #fff;}

.equip_w p{ color: #777; text-align: center;}
.equip ul::after{ content:''; display:block; width: 0; height:0; clear:both; visibility:hidden;}
.equip li{ float: left; overflow: hidden; background: #fff; cursor: pointer; transition: all 0.5s;}
.equip li:nth-child(2n){ margin-right: 0;}
.equip li:hover{ box-shadow: 0 0 30px #ccc;}
.equip01{ width: 50%; text-align: center; position: relative; float: left;}
.equip01 img{ width: 70%; vertical-align: middle; overflow: hidden;}
.equip01::after{ content: ''; position: absolute; height: 70%; top: 15%; right: 0; z-index: 9; background: #e5e5e5;}
.equip02{ width: 50%; float: right;}

.vision{ width: 100%; overflow: hidden; position: relative;}
.vision img{ display: block; width: 100%; height: 100%; object-fit: cover;}
.play{ position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 9;}
.play video{ display: block; outline: 0; border: 0;}

.explicit{ background: #fff;}
.explicit_p{ overflow: hidden; border-bottom: solid 1px #e1e1e1;}
.explicit_p01 p{ display: inline-block; color: #777;}
.explicit_p01 span{ color: #a5a5a5;}
.explicit_p02 li{ display: inline-block;}
.explicit_p02 img{ display: inline-block;}
.explicit_p02 span{ color: #a5a5a5;}
.explicit_tu{ display: inline-block; cursor: pointer;}
.explicit_tu .explicit_tu02{ display: none;}
.explicit_tu:hover .explicit_tu01{ display: none;}
.explicit_tu:hover .explicit_tu02{ display: inline-block;}
.explicit_word img{ width: 100%;}
.explicit_word p{ color: #3a3a3a;}
.explicit_tip{ width: 100%; border-top: solid 1px #e1e1e1; text-align: center; position: relative;}
.explicit_tip img{ vertical-align: middle;}
.explicit_tip p{ position: absolute; z-index: 99; cursor: pointer; color: #777;}
.explicit_tip span{ cursor: pointer; display: inline-block; vertical-align: middle; color: #777;}
.explicit_tip p:hover{ color: #0f0b0c;}
.explicit_tip span:hover{ color: #0f0b0c;}

.correlation{ width: 100%; background: #fff;}
.correle_bor{ border: solid 1px #e1e1e1;}
.correlate01 span{ display: inline-block; background: #198ff9; vertical-align: middle;}
.correlate01 p{ display: inline; vertical-align: middle;}
.correlate_pic{ width: 100%; overflow: hidden;}
.correlate_pic img{ display: block; width: 100%; height: 100%; object-fit: cover; transition: all 0.5s;}
.correlate02 p{ color: #777; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; overflow: hidden;}
.correlate02 li a:hover .correlate_pic img{ transform: scale(1.05);}
.correlate02 li a:hover>p{ color: #333;}

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

.contact_card{ width: 100%; background: url(../img/con_bg.png) center bottom no-repeat #f7f7f7; background-size: auto 92%; text-align: center; margin: 0 auto;}
.contact01 span{ display: inline-block; background: #ef3332;}
.contact02 p,.contact02 span{ color: #777;}
.paging{ text-align: center; margin: 60px 0 0;}
.paging p{ display: inline-block; padding: 8px 15px; background: #fff; margin: 0 5px; transition: all 0.3s;}
.paging p:hover{ color: #fff; background: #198ff9;}
/*首页视频显示
.propaganda{ width: 100%; height: 100vh; overflow: hidden;}
.propaganda video{ width: 100%; height: 100%; object-fit:fill;}
*/

/*首页视频隐藏*/
.propaganda{ width: 100%; height: 100vh; overflow: hidden; display:none;}
.propaganda video{ width: 100%; height: 100%; object-fit:fill; display:none;}