@font-face {
	font-family: "pf-b";
	src:url('../fonts/PingFang-Bold.ttf') format('truetype');
}
@font-face {
	font-family: "pf-m";
	src:url('../fonts/PingFang-Medium.ttf') format('truetype');
}
@font-face {
	font-family: "pf-r";
	src:url('../fonts/PingFang-Regular.ttf') format('truetype');
}

*{ margin: 0; padding: 0; color: #333;}
a{ text-decoration: none;}

img{ height: auto; max-width: 100%;}
.text-white{ color: #FFFFFF;}
.text-black{ color: #333333;}
.text-green{ color: #263a45;}
.text-grey{ color: #666666;}
.text-blue{ color: #015c65;}
.bg-white{ background: #FFFFFF;}
.bg-lightBlue{ background: #F0F3F7;}
.fl{ float: left;}
.fr{ float: right;}
.clr{ clear: both;}
.delay2{ -webkit-animation-delay: .2s; animation-delay: .2s;}
.delay4{ -webkit-animation-delay: .4s; animation-delay: .4s;}
.delay6{ -webkit-animation-delay: .6s; animation-delay: .6s;}
.delay8{ -webkit-animation-delay: .8s; animation-delay: .8s;}
.delay10{ -webkit-animation-delay: 1s; animation-delay: 1s;}
.delay12{ -webkit-animation-delay: 1.2s; animation-delay: 1.2s;}
.delay14{ -webkit-animation-delay: 1.4s; animation-delay: 1.4s;}
.width1200{ height: inherit; width: 1400px; margin: 0 auto;}
.boxWidth{ width: 100%; min-width: 1200px;}
.width1200 .theme{ visibility: hidden; text-align: center; font-family: "pf-b"; font-size: 24px; padding-top: 100px; margin-bottom: 10px;}
.width1200 .subTheme{ visibility: hidden; text-align: center; font-size: 14px;}
.item-theme{ margin-bottom: 5px; font-size: 26px; font-family: "pf-b";}
.item-subTheme{ font-size: 14px; font-family: "pf-m";}

.header{ box-shadow: 0 0 10px rgba(193,193,193,0.6); background: rgba(255,255,255,0.6); position: fixed; top: 0; left: 0; right: 0; height: 63px; width: 100%; z-index: 100;}
.header .width1200{ height: 63px;}
.header .header-logo{ height: 36px; margin: 13.5px 65px 13.5px 0;}
.header .header-nav a{ float: left; font-family: "pf-m"; font-size: 16px; display: inline-block; border-bottom: 2px solid rgba(1,92,102,0); height: 62px; line-height: 62px; padding: 0 15px;}
.header .header-nav a + a{ margin-left: 40px;}
.header .header-nav .cur{ border-bottom: 2px solid rgba(1,92,102,1);}
.header .fold{ display: none;}
.header .fold-btn{ display: none;}

.banner{ position: relative; width: 100%; height: 580px; display: block; overflow: hidden; background: url(../img/bg1.png) center center no-repeat;}
.banner .width1200{ position: relative; text-align: center;}
.banner .banner-theme{ padding-top: 200px;}
.banner .banner-subTheme{ margin-top: 35px; color: #02afa9; font-family: "pf-b"; font-size: 30px; text-shadow: 0 0 20px #02afa9;}
.banner .banner-img{ position: absolute; z-index: 0;}
.banner .banner-img1{ width: 355px; height: 450px; top: 130px; left: -120px;}
.banner .banner-img2{ top: 390px; left: 170px;}

.item1{ visibility: hidden; float: left; width: 33.33%;}
.item1 .item1-l,.item1 .item1-m,.item1 .item1-r{ margin: 0 auto;}
.item1 .item1-l,
.item1 .item1-r{ width: 320px; height: 400px;}
.item1 .item1-m{ position: relative; margin-top: 170px; width: 452px; height: 400px;}
.item1 .pos{ position: absolute; display: inline-block; text-align: center; font-size: 16px;}
.item1 .pos .text-black{ font-family: "pf-r";}
.item1 .pos .text-blue{ font-family: "pf-b";}
.item1 .item1-m .pos.pos-l{ left: 10px; top: 10px;}
.item1 .item1-m .pos.pos-r{ right: -5px; top: -55px;}
.item1 .item1-r .pos{ right: 15px; top: 50px;}
.item1-txt{ margin: 0 auto; font-family: "pf-b"; width: 320px; line-height: 50px; border-radius: 2px; background: #a4f1ff; box-shadow: 0 0 10px rgba(0,241,255,0.5); text-align: center;}
.item1-txt .text-white{ font-size: 16px;}
.item1-txt .text-blue{ font-size: 26px;}

.item2{ visibility: hidden; box-shadow: 0 0 20px rgba(0,0,0,0.1); text-align: center; margin-top: 50px; padding: 20px 0; height: 280px; float: left; width: calc((100% - 150px) / 5); margin: 50px 15px 0;}
.item2 .item2-txt{ padding: 0 20px;}

#location3{ margin-top: 100px; height: 600px; background: url(../img/bg2.png) no-repeat; background-position: center 0; background-size: cover;}
#location3 .width1200{ position: relative;}
#location3 .width1200 .theme{ padding-top: 50px;}
.item3{ width: 144px; height: 160px; line-height: 160px; text-shadow: 0 0 10px #3db6d4; background: url(../img/item3-ani.png) no-repeat; background-size: cover; font-family: "pf-b"; font-size: 24px; text-align: center; color: #FFFFFF; -webkit-transition: all 1s; -moz-transition: all 1s; transition: all 1s; position: absolute;}
.item3.item3-ani1{ left: 0px; top: 210px; -webkit-animation: one linear 2s 0.5s infinite; -moz-animation: one linear 2s 0.5s infinite; animation: one linear 2s 0.5s infinite;}
.item3.item3-ani2{ left: 210px; top: 120px; -webkit-animation: two linear 2s 0.7s infinite; -moz-animation: two linear 2s 0.7s infinite; animation: two linear 2s 0.7s infinite;}
.item3.item3-ani3{ left: 420px; top: 290px; -webkit-animation: three linear 2s 0.9s infinite; -moz-animation: three linear 2s 0.9s infinite; animation: three linear 2s 0.9s infinite;}
.item3.item3-ani4{ left: 640px; top: 210px; -webkit-animation: four linear 2s 0.5s infinite; -moz-animation: four linear 2s 0.5s infinite; animation: four linear 2s 0.5s infinite;}
.item3.item3-ani5{ right: 200px; top: 280px; -webkit-animation: five linear 2s 0.7s infinite; -moz-animation: five linear 2s 0.7s infinite; animation: five linear 2s 0.7s infinite;}
.item3.item3-ani6{ right: 0px; top: 140px; -webkit-animation: six linear 2s 0.9s infinite; -moz-animation: six linear 2s 0.9s infinite; animation: six linear 2s 0.9s infinite;}

.item4{ position: relative; margin-top: 50px; height: 500px; width: 50%; float: left; text-align: center;}
.item4 .item4-bg{ position: absolute; z-index: -1; left: calc(50% - (357px / 2));}
.item4 .dot-list{ width: 357px; height: 342px; position: relative; z-index: 10; left: calc(50% - (357px / 2));}
.item4 .dot-list img{ position: absolute; z-index: 10;}
.item4-dot1{ left: 30px; top: 220px;}
.item4-dot2{ left: 40px; top: 180px;}
.item4-dot3{ left: 25px; top: 200px;}
.item4-dot4{ left: 55px; top: 160px;}
.item4-dot5{ left: 50px; top: 140px;}
.item4-dot6{ left: 60px; top: 170px;}
.item4-dot7{ left: 55px; top: 200px;}
.item4-txt{ margin-top: 50px; padding: 0 120px;}

.scroll-wrap{ margin-top: 50px; overflow: hidden;}
.scroll-item{ visibility: hidden; height: 380px; display: block; border-radius: 3px; text-align: center; float: left; transition: background-color 1s;}
.scroll-item .text-green{ padding: 20px 10px; font-family: "pf-b"; font-size: 30px; color: #263a45; transition: color 1s;}
.scroll-item .text-grey{ padding: 0 10px; font-family: "pf-m"; font-size: 14px; color: #666666; transition: color 1s;}
.scroll-item:hover{ background: #4d8d94;}
.scroll-item:hover .text-green,
.scroll-item:hover .text-grey{ color: #FFFFFF; transition: color 1s;}
.owl-item{ height: 380px; float: left;}
.owl-item .scroll-item{ margin: 0 20px; width: calc(100% - 40px);}
.owl-controls{ display: block; text-align: center;}
.owl-controls .owl-page{ height: 6px; display: inline-block; margin: 10px 5px;}
.owl-controls .owl-page span{ width: 60px; height: 6px; display: inline-block; background: #ebebeb; border-radius: 3px;}
.owl-controls .owl-page.active span{ background: #015c66;}

.partners-row{ margin: 50px 0; padding: 0 10px;}
.partners-item{ visibility: hidden; float: left; width: calc(20% - 20px); margin: 10px;}

.footer{ background: #34383b; font-family: "pf-Regular";}
.footer .width1200{ padding-top: 20px;}
.footer .footer-item{ float: left; height: 205px; padding-top: 20px; width: calc(50% - 30px); padding-left: 30px;}
.footer .footer-item + .footer-item{ width: calc(50% - 31px); border-left: 1px solid #3B3F42;}
.footer .footer-item p{ color: #FFFFFF; margin-bottom: 20px; font-size: 16px;}
.footer .footer-item a{ line-height: 25px; display: block; color: #9b9ea0; font-size: 14px;}
.footer .footer-other{ text-align: center; height: 90px; padding-top: 45px;}
.footer .footer-other p{ font-size: 14px; color: #86898B; margin-bottom: 20px;}

/*移动端样式*/
@media screen and (max-width: 1024px) and (min-width: 0px){
	.width1200,.boxWidth{ overflow: hidden; width: 100%; min-width: 100%;}
	
	.header .header-logo{ margin-left: 15px;}
	.header .header-nav{ display: none;}	
	.header .fold-btn{ margin: 15px; display: inline-block; width: 36px; height: 32px; background: url(../img/nav.png) no-repeat;}
	.header .fold{ display: block; width: 0; height: 0; position: fixed; z-index: 10;}
	.header .fold .fold-bg{ background: #0b0d19; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
	.header .fold .fold-close{ opacity: 0; position: absolute; left: 15px; top: 15px;}
	.header .fold-main{ position: absolute; right: -70%; background: #000000; width: calc(70% - 30px); height: 100%; padding: 15px; overflow: hidden;}
	.header .fold-main a{ position: relative; border-bottom: 1px solid rgba(255,255,255,0.2); height: 61px; line-height: 61px; display: block; font-family: "pf-b"; font-size: 16px;}
	.header .fold-main a::after{ width: 2px; height: 30px; position: absolute; top: 15px; left: -15px; content: ''; display: block; background: rgba(1,92,102,0);}
	.header .fold-main a.cur::after{ background: rgba(1,92,102,1);}
	
	
	.banner{ height: 309px;}
	.banner .banner-theme{ margin: 0 auto; padding-top: 100px; max-width: 55%;}
	.banner .banner-subTheme{ font-size: 20px; margin-top: 20px;}
	.banner .banner-img1{ left: -10px; top: 95px; width: 166px; height: 210px;}
	.banner .banner-img2{ left: 120px; top: 225px; width: 134px; height: 60px;}
	
	.item1 .item1-l,
	.item1 .item1-r{ width: 177px; height: 221px;}
	.item1 .item1-m{ width: 250px; height: 221px;}
	.item1 .pos{ font-size: 12px;}
	.item1 .item1-m .pos.pos-l{ left: -5px; top: -5px;}
	.item1 .item1-m .pos.pos-r{ right: -20px; top: -40px;}	
	.item1 .item1-r .pos{ right: 35px; top: 20px;}
	
	.item1-txt{ width: 246px;}
	.item1-txt .text-white{ font-size: 12px;}
	.item1-txt .text-blue{ font-size: 18px;}
	
	.item2{ width: calc((100% - 120px) / 3);}
	
	#location3{ height: 320px;}
	.item3{ line-height: 100px; font-size: 14px; width: 90px; height: 100px;}
	.item3.item3-ani1{ left: 0px; top: 105px;}
	.item3.item3-ani2{ left: 105px; top: 60px;}
	.item3.item3-ani3{ left: 180px; top: 115px;}
	.item3.item3-ani4{ left: 320px; top: 160px;}
	.item3.item3-ani5{ right: 170px; top: 110px;}
	.item3.item3-ani6{ right: 30px; top: 70px;}
	
	.item4-txt{ padding: 0 20px;}
	.owl-item,
	.owl-item .scroll-item{ height: 420px;}
	
	.partners-item{ width: calc(33.33% - 20px);}
	
}
@media screen and (max-width: 767px){
	.width1200 .theme{ padding-top: 50px; font-size: 20px;}
	.width1200 .subTheme{ font-size: 12px;}
	
	.banner .banner-theme{ position: relative; padding-top: 120px; z-index: 10; max-width: 80%;}
	.banner .banner-subTheme{ font-size: 14px; margin-top: 10px;}
	.banner .banner-img1{ z-index: 1; left: -50px; top: 95px; width: 166px; height: 210px;}
	.banner .banner-img2{ left: 80px; top: 225px; width: 134px; height: 60px;}
	.banner canvas{ display: none;}
	
	.item1{ width: 100%; text-align: center;}
	.item1 .item1-txt{ width: calc(100% - 40px); margin: 0 auto;}
	.item1 .item1-l,
	.item1 .item1-r{ width: 226px; height:283px;}
	.item1 .pos{ font-size: 12px;}
	.item1 .item1-m{ margin-top: 75px; width: 320px; height: 283px;}
	.item1 .item1-m .pos.pos-l{ left: 5px; top: 5px;}
	.item1 .item1-m .pos.pos-r{ right: -10px; top: -40px;}
	.item1 .item1-r .pos{ right: 80px; top: 35px;}
	
	.item2{ width: 100%; margin: 25px 15px 0;}
	
	#location3{ margin-top: 50px; height: 240px;}
	#location3 .width1200 .theme{ padding-top: 25px;}
	.item3{ line-height: 80px; font-size: 12px; width: 72px; height: 80px;}
	.item3.item3-ani1{ left: 0px; top: 105px;}
	.item3.item3-ani2{ left: 85px; top: 60px;}
	.item3.item3-ani3{ left: 130px; top: 95px;}
	.item3.item3-ani4{ left: 210px; top: 160px;}
	.item3.item3-ani5{ right: 80px; top: 90px;}
	.item3.item3-ani6{ right: 0px; top: 70px;}
	
	.item4{ width: 100%;}
	.owl-controls .owl-page span{ width: 20px; height: 3px;}
	.owl-item,
	.owl-item .scroll-item{ height: 420px;} 
	.partners-row{ margin: 25px 0;}
	
	
	.footer .footer-item:nth-child(1){ width: calc(30% - 20px); padding-left: 20px;}
	.footer .footer-item:nth-child(2){ width: calc(70% - 21px); padding-left: 20px;}
	.footer .footer-item p{ font-size: 14px;}
	.footer .footer-item a{ font-size: 12px;}
	.footer .footer-other p{ font-size: 12px; margin-bottom: 10px;}
}

@-webkit-keyframes scan{
	from { top:0px; }
	to { top: 460px; }
}
@-moz-keyframes scan{
	from { top:0px; }
	to { top: 460px; }
}
@-o-keyframes scan{
	from { top:0px; }
	to { top: 460px; }
}
@keyframes scan{
	from { top:0px; }
	to { top: 460px; }
}
@-webkit-keyframes one{
	0%{ opacity: 0.4; transform: scale(1);}
	50%{ opacity: 1; transform: scale(0.5);}
	100%{ opacity: 0.4; transform: scale(1);}
}
@-moz-keyframes one{
	0%{ opacity: 0.4; transform: scale(1);}
	50%{ opacity: 1; transform: scale(0.5);}
	100%{ opacity: 0.4; transform: scale(1);}
}
@-o-keyframes one{
	0%{ opacity: 0.4; transform: scale(1);}
	50%{ opacity: 1; transform: scale(0.5);}
	100%{ opacity: 0.4; transform: scale(1);}
}
@keyframes one{
	0%{ opacity: 0.4; transform: scale(1);}
	50%{ opacity: 1; transform: scale(0.5);}
	100%{ opacity: 0.4; transform: scale(1);}
}
@-webkit-keyframes two{
	0%{ opacity: 0.6; transform: scale(0.6);}
	50%{ opacity: 1; transform: scale(1);}
	100%{ opacity: 0.6; transform: scale(0.6);}
}
@-moz-keyframes two{
	0%{ opacity: 0.6; transform: scale(0.6);}
	50%{ opacity: 1; transform: scale(1);}
	100%{ opacity: 0.6; transform: scale(0.6);}
}
@-o-keyframes two{
	0%{ opacity: 0.6; transform: scale(0.6);}
	50%{ opacity: 1; transform: scale(1);}
	100%{ opacity: 0.6; transform: scale(0.6);}
}
@keyframes two{
	0%{ opacity: 0.6; transform: scale(0.6);}
	50%{ opacity: 1; transform: scale(1);}
	100%{ opacity: 0.6; transform: scale(0.6);}
}
@-webkit-keyframes three{
	0%{ opacity: 0.7; transform: scale(0.9);}
	50%{ opacity: 1; transform: scale(0.5);}
	100%{ opacity: 0.7; transform: scale(0.9);}
}
@-moz-keyframes three{
	0%{ opacity: 0.7; transform: scale(0.9);}
	50%{ opacity: 1; transform: scale(0.5);}
	100%{ opacity: 0.7; transform: scale(0.9);}
}
@-o-keyframes three{
	0%{ opacity: 0.7; transform: scale(0.9);}
	50%{ opacity: 1; transform: scale(0.5);}
	100%{ opacity: 0.7; transform: scale(0.9);}
}
@keyframes three{
	0%{ opacity: 0.7; transform: scale(0.9);}
	50%{ opacity: 1; transform: scale(0.5);}
	100%{ opacity: 0.7; transform: scale(0.9);}
}
@-webkit-keyframes four{
	0%{ opacity: 0.3; transform: scale(0.7);}
	50%{ opacity: 1; transform: scale(1);}
	100%{ opacity: 0.3; transform: scale(0.7);}
}
@-moz-keyframes four{
	0%{ opacity: 0.3; transform: scale(0.7);}
	50%{ opacity: 1; transform: scale(1);}
	100%{ opacity: 0.3; transform: scale(0.7);}
}
@-o-keyframes four{
	0%{ opacity: 0.3; transform: scale(0.7);}
	50%{ opacity: 1; transform: scale(1);}
	100%{ opacity: 0.3; transform: scale(0.7);}
}
@keyframes four{
	0%{ opacity: 0.3; transform: scale(0.7);}
	50%{ opacity: 1; transform: scale(1);}
	100%{ opacity: 0.3; transform: scale(0.7);}
}
@-webkit-keyframes five{
	0%{ opacity: 0.6; transform: scale(0.8);}
	50%{ opacity: 1; transform: scale(1);}
	100%{ opacity: 0.6; transform: scale(0.8);}
}
@-moz-keyframes five{
	0%{ opacity: 0.6; transform: scale(0.8);}
	50%{ opacity: 1; transform: scale(1);}
	100%{ opacity: 0.6; transform: scale(0.8);}
}
@-o-keyframes five{
	0%{ opacity: 0.4; transform: scale(0.8);}
	50%{ opacity: 1; transform: scale(1);}
	100%{ opacity: 0.4; transform: scale(0.8);}
}
@keyframes five{
	0%{ opacity: 0.4; transform: scale(0.8);}
	50%{ opacity: 1; transform: scale(1);}
	100%{ opacity: 0.4; transform: scale(0.8);}
}
@-webkit-keyframes six{
	0%{ opacity: 0.4; transform: scale(1);}
	50%{ opacity: 1; transform: scale(0.7);}
	100%{ opacity: 0.4; transform: scale(1);}
}
@-moz-keyframes six{
	0%{ opacity: 0.4; transform: scale(1);}
	50%{ opacity: 1; transform: scale(0.7);}
	100%{ opacity: 0.4; transform: scale(1);}
}
@-o-keyframes six{
	0%{ opacity: 0.4; transform: scale(1);}
	50%{ opacity: 1; transform: scale(0.7);}
	100%{ opacity: 0.4; transform: scale(1);}
}
@keyframes six{
	0%{ opacity: 0.4; transform: scale(1);}
	50%{ opacity: 1; transform: scale(0.7);}
	100%{ opacity: 0.4; transform: scale(1);}
}