@charset "utf-8";
/*通用样式*/
html, body, div, span, iframe, map, font, img, a img, samp,  hr, h1, h2, h3, h4, h5, h6, p, blockquote, a, address, code, dl, dt, dd, ol, ul, li, form, label, table, tr, td, th{ padding: 0; margin: 0; border: 0; font-weight: normal; font-family:arial, 'Microsoft YaHei', Arial, Helvetica, sans-serif;  list-style:none;}
html, body { position: relative; height: 100%;}
body{ background:#fff;  font:normal 12px/22px "arial"; overflow-x: hidden; color: #555; }
img{ border:0; max-width: 100%;  }
a{ text-decoration:none; color:#555;  }
a:hover{ color:#55b3d5;  }
.clear { clear:both;}
.dn { display: none;}
div,section { box-sizing:border-box;}
.clearfix::after {content: ''; display: block; clear: both; height: 0;}
.container {
    width: 1630px;
	margin: 0 auto;
	max-width: 92%;
}
/* CSS Document */
.header { transition: all .5s; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; border-bottom: 1px solid rgba(255,255,255,0.15);}
.header.act { background: #333;}
.headerCont { width: 1630px; max-width: 100%; margin: 0 auto; padding: 0 15px;}
.headerCont::after { content: ''; display: block; height: 0;clear: both;}
.header .logo { float: left; width: 450px; transition: all .6s; margin-top: 10px;}
.header .logo img { display: block; width: 100%;}
.topRight { float: right;}
.language{float: right;list-style: none;overflow: hidden; margin-left: 42px;transition: 0.8s all;-webkit-transition: 0.5s all; -moz-transition: 0.5s all;-ms-transition: 0.5s all;}

.language:hover{overflow: inherit;}

.language .menu{display: block;position: relative;cursor: pointer;}

.language .menu-title{display: block;text-align: center;color: #dbdbdb;text-transform: capitalize;font-size: 13px;transition: 0.5s background-color;position: relative;z-index: 5; font-style: normal; background: #55b3d5 url(../images/language_bg.png) no-repeat 80% center; padding: 15px 10px;}
.language .menu-title p{display: inline-block;margin:0;color: #fff;font-size: 13px;line-height: 40px;text-align: left;vertical-align: middle;text-transform: capitalize;}
.language .menu-title img{vertical-align: middle;margin-top: -2px;margin-right: 5px; border-radius: 50%;} 
.language .menu-title i{ position: relative;margin-left: 0; display: inline-block; margin-left: 0px; font-style: normal;display: inline-block;background: url(../images/langDown.png) center no-repeat; width: 14px; height: 14px;}

.language:hover .menu-title p{color: #fff;}
.language:hover .menu-title span{color: #fff;}
.language:hover .menu-title i{ display: inline-block;background: url(../images/langDown.png) center no-repeat; width: 14px; height: 14px;}
.language .menu:hover > .menu-title:before { border-top-width: 0;transition: 0.2s border-top-width ease-in, 0.3s border-top-color;}
.language .menu:hover > .menu-title:after {border-bottom-width: 5px;transition: 0.2s 0.2s border-bottom-width ease-out;}
.language .menu-dropdown {min-width: 100%;padding: 5px 0 0 0;position: absolute;background: #fff;z-index: 100;transition: 0.5s padding, 0.5s background;box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.15);opacity: 0;min-width: 100%;left: 0;width: 120px;}
.language:hover .menu-dropdown{opacity: 1;}
.language .menu:not(:hover) > .menu-dropdown {padding: 4px 0;background: #fff;z-index: 99;}
.language .menu:not(:hover) > .menu-title:after {border-bottom-color: #fff;}
.language .menu-dropdown > * {overflow: hidden;padding: 5px 10px;background: transparent;white-space: nowrap;
transition: 0.5s height cubic-bezier(0.73, 0.32, 0.34, 1.5), 0.5s padding cubic-bezier(0.73, 0.32, 0.34, 1.5), 0.5s margin cubic-bezier(0.73, 0.32, 0.34, 1.5), 0.5s 0.2s color, 0.2s background-color;}
.language .menu-dropdown > *:hover {background: rgba(0, 0, 0, 0.05);}
.language .menu:not(:hover) > .menu-dropdown > * {visibility: hidden;height: 0;padding-top: 0;padding-bottom: 0;
margin: 0;color: rgba(25, 25, 25, 0);transition: 0.5s 0.1s height, 0.5s 0.1s padding, 0.5s 0.1s margin, 0.3s color, 0.6s visibility;z-index: 99;}
.menu-dropdown li a { color: #808080;}
.language .menu-dropdown li{border-bottom: 1px solid #e5e5e5;}
.language .menu-dropdown li:last-child{border-bottom-color:#fff;}
.language .menu-dropdown li a{display: block;}
.language .menu-dropdown li a img{ width: 16px; height: 16px; border-radius: 50%;}
.language .menu-dropdown li p{margin: 0;font-size: 13px;padding-left: 5px;text-transform: capitalize;display: inline-block;}
.nav li { float: left; margin-right: 60px; line-height: 72px;}
.nav li h2 a { transition: all .6s; display: block; line-height: 72px; position: relative; font-size: 18px; color: #ffffff;}
.nav { float: left;}
.nav li.cur h2 a { color: #55b3d5;}
.nav li h2 { position: relative;}
.nav li h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: #55b3d5; transition: all .6s;}
.nav li:hover h2::after,.nav li.cur h2::after { width: 100%;}
.nav li:hover h2 a{ color:#55b3d5;}
.banner img { display: block; width: 100%;}
.banner .swiper-pagination span { width: 12px; height: 12px; background: #ffffff; opacity: 1; border-radius: 50%;}
.banner .swiper-pagination span.swiper-pagination-bullet-active { background: #55b3d5;}
.subBox {transform-origin: 0 0 0; visibility: hidden; transition: .3s ease;opacity: 0; transform: scaleY(0); box-shadow: 0 15px 15px rgba(0,0,0,.09); padding: 10px; background: #ffffff;}
.nav li:hover .subBox { opacity: 1; visibility: visible; transform: scaleY(1);}
.subBox dl { padding: 0 15px;}
.subBox dt { transition: all .5s; margin-bottom: 20px; float: left; width: 25%; box-sizing: border-box; padding: 10px;}
.subBox dt:hover{ box-shadow:0 5px 9px rgba(0,0,0,0.08);-webkit-box-shadow:0 5px 9px rgba(0,0,0,0.08);-moz-box-shadow:0 5px 9px rgba(0,0,0,0.08); transform:translate3d(0,-3px,0);-webkit-transform:translate3d(0,-3px,0);}
.subTop { border-bottom: 1px solid #eee; overflow: hidden;}
.subImg { float:left; overflow: hidden; width: 60px; margin-right: 10px;}
.subTitle {color: #333;
    font-size: 16px;
    display: block;
    line-height: 18px;
    height: 54px;
    margin-bottom: 10px;
    margin-top: 10px;
    overflow: hidden;}
.subTitle a { color: #333333; font-size: 16px;}
.subBox { position: absolute; left: 0; width: 100%; top: 72px;}
.subList a { transition: all .5s; font-weight: 200; margin-bottom: 6px; font-size: 14px; line-height: 26px; display: block; color: #808080;}
.subList a:hover { text-decoration: underline; color: #55b3d5;}
.nav dt:nth-child(4n+1) {
    clear: both;
}
.searchBox { cursor: pointer; float: right; background: url(../images/search.png) center no-repeat; width: 40px; height: 72px;}
.video_section { position: relative;}
.video_section::before {position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 500px;
    background: #f9f9f9;
    content: '';
    z-index: -1; }
.video_section{position: relative; overflow: hidden;}

.video_section:before{ position: absolute; left: 0px; top: 0px; width: 100%; height: 500px; background: #f9f9f9; content: ''; z-index: -1;}

.video_section .video_title {background: url(../images/video_bg.jpg) no-repeat center right; margin: 60px 0 42px;}

.video_section .video_title .title{ font-weight: bold; font-size: 46px; color: #333; float: left;font-family: "montserrat_blod";  padding-left: 62px; background: url(../images/video.png) no-repeat center left; line-height: 112px;}

.video_section .video_title p{ font-size: 15px; color: #999; line-height: 28px; max-height: 56px; float: left; max-width: 650px; margin-left: 56px; margin-top: 26px;}

.video_section .video_main{ position: relative;}

.video_section .video_main:before{ position: absolute; left:-20px; bottom: -20px; width: 33.33%; height: 90%; content: ''; background: url(../images/bg.png) repeat;}

.video_section .video_main .img{ position: relative; z-index: 666;}

.video_section .icon{ position: absolute; left: 50%; top: 50%;display: inline-block; width: 116px; height: 116px; border-radius: 50%; background: rgba(255,255,255,0.8);  color: #55b3d5;  margin-left: -58px; margin-top: -58px; text-align: center; z-index: 888;}

.video_section .icon i{ line-height: 116px;color: #55b3d5; font-size: 40px;}

.container2{padding-left: 15px; padding-right: 15px;}
.videoCont { height: 630px;}
.videoCont video { display: block; width: 100%; height: 100%; object-fit: cover;}
.ser_section { margin: 100px 0;}
.ser_section li { box-sizing: border-box; width: 33.33%; float: left;}
.ser_section li .icon {width: 76px; transition: all .6s; height: 76px; float: left; margin-right: 20px; display: inline-block;}
.ser_section li .title {    color: #333;
    font-size: 20px;
    font-family: "montserratB";
    margin-bottom: 10px;
    display: block;}
.ser_section li p {font-size: 15px; color: #999; line-height: 22px; height: 44px; overflow: hidden; max-width: 270px;}
.ser_section li:hover .icon {transform: translate3d(0,-10px,0);}
.pro_title{ text-align: center; padding: 90px 0 155px;}

.pro_title .year{font-size: 26px; color: #fff; line-height: 40px; font-family: "montserratB"; position: relative; padding: 0px 80px;display: inline-block;}

.pro_title .year p{ font-size: 130px; line-height: 150px; color: #55b3d5;font-family: "BarlowCondensed"; margin-bottom: 20px;}

.pro_title .year:before{ position: absolute; left: 0px; top: 50%; margin-top: -93px;  width: 23px; height: 186px; content: ''; background: url(../images/year_line.png) no-repeat center center;}

.pro_title .year:after{ position: absolute; right: 0px; top: 50%; margin-top: -93px;  width: 23px; height: 186px; content: ''; background: url(../images/year_line.png) no-repeat center center;filter:FlipH; transform: rotateY(180deg);}

.pro_title .p{ font-size: 16px; color: #fff; line-height: 30px; margin: 20px  auto; max-width: 1120px;}
.tabChose li { padding: 10px 12px; box-sizing: border-box; width: 25%; float: left;}
.tabChose .num {
    background: #fff;
    line-height: 54px;
    margin-top: -18px;
    width: 175px;
    font-size: 24px;
    color: #55b3d5;
    height: 54px;
    position: relative;
    padding-left: 10px;
    font-family: "montserrat";
}
.tabChose li:hover .tabPic {background: #55b3d5;}
.tabChose li:hover .tabPic img { transform: scale(1.1);opacity: .2; }
.tabPic { height: 285px; transition: all .5s; overflow: hidden;}
.tabPic img { transition: all .5s; height: 100%; object-fit: cover;  display: block; width: 100%;}
.num:after {
    display: inline-block;
    width: 74px;
    height: 1px;
    background: #e5e5e5;
    content: '';
    position: absolute;
    left: 46px;
    top: 50%;
}
.tabChose li h2 {font-size: 20px;
    color: #333;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "montserratB";
    margin-bottom: 12px;}
.tabChose li p {font-size: 14px;
    line-height: 20px;
    height: 40px; font-weight: 200; color: #999; overflow: hidden;}
.tabChose { position: relative; margin-top: -110px;}
.tabChose .container { background: #fff; padding: 30px;}
.tabChose li.active {border: 4px solid #55b3d5;
    border-bottom: #fff;}
.tabList { background: #fff;
    border: 4px solid #55b3d5;
    margin-top: -2px;}
.tabList .swiper {padding: 15px 10px;}
.proCont { transition: all .5s; padding: 4px;}
.proCont p {text-align: center;font-size: 15px; color: #555; display: block; line-height: 22px; height: 44px; margin: 10px 0 0; font-weight: 200; overflow: hidden;}
.proCont:hover {box-shadow: 0 5px 9px rgba(0,0,0,0.08);transform: translate3d(0,-3px,0);}
.proImg img { display: block;}
.about_section{ overflow: hidden; background: #f9f9f9 url(../images/about_bg.jpg) no-repeat center bottom; padding: 80px 0;}

.about_section .about_l{ float: left; width: 50%; position: relative;}

.about_section .about_l .icon{ position: absolute; left: 50%; top: 50%;display: inline-block; width: 100px; height: 100px; border-radius:0s; background: #55b3d5;  color: #fff;  margin-left: -50px; margin-top: -50px; text-align: center; z-index: 888;}

.about_section .about_l .icon i{ line-height: 100px;color: #fff; font-size: 40px;}



.about_section .about_r{ float: left; width: 50%; max-width: 680px;}

.about_section .about_title{ padding-left: 50px;}

.about_section .about_title .title{ font-size: 46px; color: #333; background: url(../images/title_line.png) no-repeat left bottom; padding-bottom:30px; margin-bottom: 20px; line-height: 50px;font-family: "montserrat_blod";}

.about_section .about_title p{font-size: 18px; line-height: 30px; color: #333;font-family: "montserratB";}

.about_l video { display: block; width: 100%;}
.tagBox { margin-top: 40px;}
.txtCont {background: #fff;
    margin-left: -46px;
    padding: 40px;
    margin-top: 20px;
    position: relative;}
.txtCont::before{position: absolute;
    right: -30px;
    bottom: 0;
    width: 30px;
    height: 306px;
    content: '';
    background: url(../images/bg.png) repeat;}
.txtCont::after {position: absolute;
    right: -30px;
    bottom: -30px;
    width: 440px;
    height: 30px;
    content: '';
    background: url(../images/bg.png) repeat;}
.txtCont .more {font-size: 14px;
    color: #666;
    text-transform: uppercase;
    font-family: 'montserratB';
    margin-top: 30px;
    display: inline-block;
    margin-bottom: 10px;}
.txtCont .more i {display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background:url(../images/enter.png) center no-repeat #55b3d5;
    color: #fff;
    font-size: 18px;
    line-height: 30px;
    color: #fff;
    border-radius: 50%;
    margin-right: 10px; vertical-align: -8px;}
.textArt {font-size: 15px;
    color: #808080;
    line-height: 30px;
    max-height: 150px;
    overflow: hidden;}
.tagSlide { position: relative; float: left; width: 50%; padding-left: 86px;}
.tagImg {margin-right: 20px;
    position: absolute;
    left: 0px;
    top: 0px;}
.tagNum {color: #55b3d5;
    font-size: 30px;
    line-height: 30px;
    display: inline-block;
    font-family: "montserratB";
    margin-bottom: 5px;
    position: relative;}
.tagNum i { font-style: normal;}
.tagDec {color: #999;
    font-size: 13px;
    line-height: 20px;
    position: relative;
    max-width: 160px;}



*:focus {outline: none;} 

#footer .title_h4{font-size:20px; color:#fff; font-family: "montserratB"; text-transform:capitalize; margin-bottom:20px; position: relative; margin-top: 10px;}
.closeBtn { background: url(../images/closeBtn.jpg) center no-repeat; width: 28px; height: 28px; cursor: pointer; display: block; position: absolute; right:20px;}
.searchPage { z-index: 10000; position: fixed; left: 0; top: -100%; width: 100%; padding: 10px 20px 20px; background:#F7F7F7;}
.searchPage h2 { line-height: 60px; margin: 10px 0; text-align: center; font-size: 20px; color: #333333;}
.searchCont { width: 800px; margin: 0 auto; max-width: 92%; overflow: hidden; background-color: #ffffff;}
.searchCont input { text-indent: 20px; height: 50px; float: left; box-sizing: border-box; border: none; width: calc(100% - 60px);}
.searchCont button { outline: none; border: none; float: right; width: 60px; height: 50px; background: url(../images/search.png) center no-repeat #2dbbe5 ;}
#screen { position: fixed; display: none; z-index: 10; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5);}
/*fixed-contact*/

.fixed-contact {

    z-index:999999;

    position:fixed;

    right:0;

    top:40%;

    width:50px;

    margin-top:-90px;

    overflow:hidden;

    opacity:0;

	filter:alpha(opacity=0);

    transition:all .4s;

    transform: translateX(95px);

    -webkit-transform: translateX(95px);

    -moz-transform: translateX(95px);

}

.fixed-contact.show{  transform:none; opacity:1;filter:alpha(opacity=100); }

.fixed-contact.active {width:260px;}

.fixed-contact li {position:relative;height:50px;overflow:hidden;transition:all .4s;list-style: none;background:#55b3d5;  border-bottom: 1px solid rgba(255,255,255,0.2);}

.fixed-contact li:nth-child(2n){ background: #55b3d5;}

.fixed-contact.active li a {opacity: 1;}

.fixed-contact li a {position:relative;z-index:1000;display:block;}

.fixed-contact li i {

    z-index:1000;

    position:absolute;

    left:0;

    display:block;

    width:50px;

    height:50px;

    transition:all .4s;

	background-repeat: no-repeat;

	background-position: center center;

	background-image:url(../images/icon.png);

}



.fixed-contact.active li:last-child:after {display:none;}

.fixed-contact li:hover i,.fixed-contact li:hover a{ color: #fff;}

.fixed-contact .online_p i {

	background-position: 0 -262px;

    border-top-left-radius:30px;

    -moz-border-top-left-radius:30px;

    -webkit-border-top-left-radius:30px;

    border-top-right-radius:30px;

    -moz-border-top-right-radius:30px;

    -webkit-border-top-right-radius:30px;

}

.fixed-contact .online_e i {background-position: -50px -262px;}

.fixed-contact .online_w i {background-position: -150px -262px;}

.fixed-contact .online_s i {background-position: -100px -262px;}

.fixed-contact .online_f i {background-position: -250px -262px;}

.fixed-contact .online_i i {background-position: -300px -262px;}

.fixed-contact .online_code i {background-position: -200px -262px;}



.fixed-contact li a {

    position:absolute;

    top:0;

    right:-135px;

    display:block;

    width:210px;

	line-height:110%;

    padding:18px 0 0 50px;

    color:#fff;

    white-space:nowrap;

    transition:all .4s;

	font-size:14px;

	text-align: left;

	font-weight: normal;

	opacity: 0;

}

.fixed-contact.active li a {right:0;}

.fixed-contact .online_code a img{max-width:80px;}

.fixed-contact.active .online_code{height:130px;}

.fixed-contact.active .online_code a p{margin:0;margin-bottom:5px;}

.fixed-contact li.online_code:hover a{opacity:1; right: auto;left: 0;}

.back_top{ display: none; width:40px;height:40px;text-align:center; position:fixed; right:28px;bottom:20px; z-index:99999999; display:none;-moz-transition: all 0.5s;-o-transition: all 0.5s;-webkit-transition: all 0.5s;transition: all 0.5s;}

.back_top:before{content:""; color:#fff;font-size:22px;display:block;line-height:40px; height: 40px; background:url(../images/up.png) center no-repeat rgba(28,28,28,0.5); border: 1px solid rgba(255,255,255,0.5); border-radius: 50%;}

.back_top:hover{text-decoration:none;box-shadow:0 0 10px 2px rgba(0,0,0,0,0.2);}

.back_top:hover:before {animation: scroll_up_anim 1.5s infinite; background:url(../images/up.png) center no-repeat #55b3d5;}

@keyframes scroll_up_anim {

0% {

transform: translateY(-3px); }

50% {

transform: translateY(3px); }

100% {

transform: translateY(-3px); } }

.back_top:link{text-decoration:none;}

.back_top:hover:before{color:#fff;text-decoration:none;}

@media only screen and (max-width: 768px) {

.back_top{ right: 16px; bottom: 60px;}

}


@media only screen and (max-width: 768px) {

	.fixed-contact{display:none !important;}

	.fixed-contact.show{opacity:0;}

}

@media only screen and (max-width: 992px) {
.toggle_content { display: none;}
#footer .title_h4{ position:relative; margin-top:0; background:none; font-size:16px; padding-bottom:0px; padding:6px 10px; margin-bottom:15px; background:rgba(255,255,255,0.1); text-transform: capitalize;}

#footer .title_h4:after { content: ''; width: 12px; height: 12px; display: block; background: url(../images/enter.png) center no-repeat; position: absolute;  right:15px;  cursor:pointer; font-size:14px; top:12px;  color:#fff;}

#footer .title_h4.active:after { content: "\f077";}

}

@media only screen and (min-width:1390px) {

.container2{width: 1390px; margin: 0 auto;}

}
@media screen and  (max-width:1600px){
	.nav li { margin-right: 30px;}
	.tabPic { height: 213px;}
}

@media screen and  (max-width:1360px){
.nav li { margin-right: 15px;}
.nav li h2 a { font-size: 16px;}

}

@media (min-width: 1290px){
	.container {
	    width: 1290px;
	}
	
}
@media (min-width: 1630px){
	
	.container {
	    width: 1630px;
	}
}
@media (min-width: 1200px){
	.container {
		width: 90%; max-width:1630px;
	}
}
@media (max-width: 1280px){
	.pro_title .year p { font-size: 100px;}
	.ser_section { margin: 30px 0;}
	.video_section .video_title { margin: 30px 0;}
	.header .logo { width: 240px; margin-top:15px;}
	.nav li h2 a { font-size: 14px;}	
	.video_section .video_title .title {font-size: 30px;
    background: none;
    line-height: 30px;
    padding: 0;
    display: block;
    float: none;}
	.video_section .video_title p{font-size: 15px;
    color: #999;
    line-height: 28px;
    max-height: 56px;
    float: left;
    max-width: 650px;
    margin-left: 56px;
    margin-top: 26px; margin: 10px 0 0;}
}
@media (max-width: 1080px){
	.menuBtn { float: right; display: block; background: url(../images/menu.png) center no-repeat; width: 40px; height: 40px; margin-top: 10px; margin-right: 10px;}
	.about_section .about_title {padding-left: 0; margin: 20px 0 0;}
	.about_section .about_title .title { font-size: 30px;}
	.ser_section li {width: 100%;
    background: #f7f7f7;
    margin-top: 20px;
    padding: 10px; float: none; width: 100%;}
	.ser_section li p { max-width: none;}
	.tabPic { display: none;}
	.tabChose .num { display: none;}
	.tabChose li p { display: none;}
	.tabChose li h2,.nav li { font-size: 14px; line-height: 20px; height: 40px;}
	.language { display: none;}
	.nav { overflow-y: auto; position: fixed; left: -110%; top: 60px; background: #333; bottom: 0; width: 200px;}
	.nav li { margin: 0; float: none;}
	.nav li h2 { text-indent: 10px;}
	.pro_title { padding: 40px 0;}
	.searchBox { height: 60px;}
	.nav li h2 a{ text-indent: 10px; line-height: 42px;}
	.tabChose { margin: 0 auto;}
	.tabChose li { width: 50%; margin-bottom: 5; border: 2px solid #fff; background: #f7f7f7; box-sizing: border-box; padding: 8px;}
	.tabChose li.active{ border: 2px solid #55b3d5!important;}
	.tabChose li h2 { height: 36px; margin: 0; white-space: normal;}
	.tabChose .container { padding: 30px 20px;}
	.videoCont { height: auto;}
	.pro_title .year { font-size: 16px;}
	.about_section .about_l { float: none; width: 100%;}
	.about_section .about_r { float: none; width: 100%;}
	.tagSlide { float: none; width: 100%;}
	.txtCont { padding: 10px; margin: 0 auto;}
	.about_section {padding-top: 30px;}
	.tabChose ul { margin-bottom: 10px;}
	.tabList { margin: 0 auto; border: 2px solid #55b3d5;}
	.nav li h2 a { display: inline;}
	.subBox dt { float: none; width: 100%;}
	.subTop { display: none;}
	.subBox dl { padding: 0;}
	.subBox { position: static;}
	.subBox dt { margin-bottom: 0;}
}