buildingLanding/css/styles.css

@charset "utf-8";
body{
	padding: 0;
  margin: 0;
  font-weight: normal;
  font-style: normal;
  font-size: 12px;
  font-family:"微软雅黑","Tahoma";
  vertical-align: baseline;
  text-align:justify;
  word-wrap:break-word;
  text-justify:inter-ideograph;
  color: #000000cc;
}
.navBody{
  background: rgba(33, 33, 41, 1);
  height: 36px;
  color: #fff;
}
.globalNav a{
  float:left;
  height:36px;
  line-height:36px;
  padding:0 10px;
  color:#eee;
  position: relative;
  cursor: pointer
}
.globalNav a:hover{
  background:#666E70;
  color:#fff
}
.globalNav a.now{
  background:#008FFF;
  color:#fff;
  font-weight:600
}
.globalNav .zhzd{
  float:left;
  height:36px;
  position: relative;
  z-index:999
}
.globalNav .zhzd a b{
  border-color: #FFDDC9 transparent transparent;
  border-right: 3px dashed transparent;
  border-style: solid dashed dashed;
  border-width: 3px 3px 0;
  display: inline-block;
  font-size: 0;
  height: 0;
  line-height: 0;
  width: 0;
  position: relative;
  top:-1px;
  left:4px
}
.globalNav .zhzd .zhzdMenu{
  position: absolute;
  left:0;
  top:29px;
  background:#fff;
  border:1px solid #ccc;
  border-top:none;
  box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 0;
  display:none
}
.globalNav .zhzd .zhzdMenu a{
  width:100%;
  padding:0;
  text-align:center;
  color:#3366cc
}
.globalNav .zhzd .zhzdMenu a:hover{
  background:#f2f2f2
}
.globalNav .zhzd a.now{
  background:#fff;
  border:1px solid #ccc;
  border-bottom:none;
  border-top:none;
  color:#3366cc;
  z-index:10
}
.width1200{
  max-width: 1200px;
  margin: 0 auto;
}
.logoCon{
	width: 100%;
	height: 60px;
	background: #fff;
	box-shadow: 0px -1px #0000001a inset;
}
.logo,.buttonCon{
	height: 60px;
	display:table;
	text-align:center;
}
.logoText{
	padding-left: 10px;
	font-weight: 500;
	font-size: 24px;
}
.table-cell{
	display: table-cell;
	vertical-align: middle;
}
.btnText{
	padding-right: 10px;
	font-size: 16px;
	font-weight: 500;
}
.bannerBox{
	height: 900px;
	background: rgba(245, 247, 253, 1);
}
.banner{
	position: relative;
	width: 100%;
	max-height: 950px;
	/*background: url(img/image_banner_01.png) no-repeat right -110px;*/
}
.banner .lottie{
  position: relative;
  z-index: 50;
  width: 100%;
  height: 100%;
}
.bannerTitleBox{
	position: absolute;
	top: 30%;
	z-index: 60;
}
.bannerTitle{
	font-size: 64px;
	font-weight: 600;
}
.bannerTitle1{
	color: rgba(47, 84, 235, 1);
	transition: all 0.4s ease-in 0s;
  transform: translateX(-400px);
}
.bannerTitle2{
	color: rgba(0, 0, 0, 0.8);
	transition: all 0.8s ease-in 0s;
  transform: translateX(-600px);
}
.bannerTitle3{
	color: rgba(0, 0, 0, 0.5);
	font-size: 24px;
	transition: all 1.2s ease-in 0s;
  transform: translateX(-600px);
}
.btnHand{
	font-size: 24px;
	font-weight: 500;
	padding: 16px 32px;
	transition: all 1.6s ease-in 0s;
  transform: translateX(-400px);
}
.moreBox{
	position: absolute;
}
.moreBox h4{
	font-size: 14px;
	color: rgba(47, 84, 235, 1);
}
.moreBox .iconMore{
	width: 32px;
	height: 54px;
	background: url(img/css_sprites.png) no-repeat -80px -1078px;
}
.slogan{
	height: 320px;
	text-align: center;
	background: #00000099 url(img/image_banner_02.png) no-repeat;
	color: #fff;
}
.sloganSmall{
	padding-top: 100px;
	font-size: 18px;
	color: #ffffffcc;
}
.sloganBig{
	padding-top: 30px;
	font-size: 48px;
}
.sloganBig .blueBg{
	background: #2f54eb;
	border-radius: 8px;
	margin: 0 8px;
	padding: 3px 12px;
}
.videoListCon{
	padding: 120px 0;
	background: #f5f7fd;
}
.videoLeft{
	max-width: 843px;
	height: 474px;
	/*background: #000 url(img/image_video_cover_07.png) no-repeat;*/
}
.videoRight{
	max-width: 357px;
	height: 474px;
}
.videoRight .vjs-playlist{
	height: 474px;
	overflow-y: auto;
}
.videoRight ul li{
	width: 280px;
	list-style-type: none;
	padding: 0;
	margin: 0 0 20px 0;
}
.videoList img{
	width: 130px;
	height: 72px;
}
.videoList .videoImg{
}
.videoList .videoTitle{
	font-size: 14px;
	font-weight: 500px;
	line-height: 20px;
}
.videoList .textRrey{
	color: #00000099;
}
.productCon{
	margin: 120px 0 0 0;
}
.bigtTitle h4{
	font-size: 48px;
	font-weight: 500;
}
.bigtTitle span{
	font-size: 18px;
}
.productList{
	padding: 48px 48px 0 48px;
}
.productLine{
	/*border-left: 2px solid rgba(0, 0, 0, 0.1);*/
}
.product{
	position: relative;	
}
.productOne{
	height: 800px !important;
}
.productOne,.productTwo{
	height: 730px;
	border-left: 2px solid rgba(0, 0, 0, 0.1);
}
.productThree{
	height: 700px;
}
.productIco{
	position: absolute;
	top: -5px;
	left: -24px;
	width: 48px;
	height: 48px;
}
.productOneIco{
	background: url(img/css_sprites.png) no-repeat -113px -1068px;
}
.productTwoIco{
	background: url(img/css_sprites.png) no-repeat -160px -1068px;
}
.productThreeIco{
	background: url(img/css_sprites.png) no-repeat 0px -1148px;
}
.prodectLeftTitle{
	margin: 0 0 0 35px;
}
.prodectLeftTitle h3{
	font-size: 36px;
	line-height: 48px;
}
.prodectLeftTitle .productText{
	font-size: 18px;
	line-height: 35px;
}
.productImg{
	width: 224px;
	height: 224px;
}
.show{
  transform: translateY(0px) !important;
  opacity:1 !important;
}
.hiddenTranX1{
	opacity:0;
  transition: all 0.8s ease-in 0s;
  transform: translateX(-200px);
}
.hiddenTranX2{
	opacity:0;
  transition: all 0.8s ease-in 0s;
  transform: translateX(200px);
}
.hiddenTranY1{
	opacity:0;
  transition: all 0.8s ease-in 0s;
  transform: translateY(-200px);
}
.hiddenTranY2{
	opacity:0;
  transition: all 0.8s ease-in 0s;
  transform: translateX(200px);
}
.productOneImg{
	/*background: url(img/css_sprites.png) no-repeat 0 0;*/
  /*transition-delay: 0.2s;*/
}
#productOneImg,#productTwoImg,#productThreeImg{
	position: relative;
  z-index: 50;
  width: 100%;
  height: 100%;
}
.productTwoImg{
	/*background: url(img/css_sprites.png) no-repeat 0 -224px;
	transition-delay: 0.2s;*/
}
.productThreeImg{
	/*background: url(img/css_sprites.png) no-repeat 0 -448px;
	transition-delay: 0.8s;*/
}
.productRImg{
	position: absolute;
	top: 0;
	left: 0;
}
.productOneRImg{
	width: 843px;
	height: 600px;
	background: url(img/image_cpgn_0103_bg.png) no-repeat;
  transition-delay: 0.2s;
}
.productTwoRImg1{
	width: 790px;
	height: 560px;
	background: url(img/image_cpgn_02_01.png) no-repeat;
	box-shadow: -20px -20px 40px -15px rgba(0, 0, 0, 0.24);
	transition-delay: 0.2s;
	transform: translateX(200px);
}
.productTwoRImg2{
	top: 64px;
	left: 95px;
	width: 695px;
	height: 496px;
	background: url(img/image_cpgn_02_02.png) no-repeat;
	box-shadow: -20px -20px 40px -10px rgba(0, 0, 0, 0.24);
	transition-delay: 1.2s;
	transform: translateX(600px);
}
.productTwoRImg3{
	top: 180px;
	left: 190px;
	width: 600px;
	height: 380px;
	background: url(img/image_cpgn_02_03.png) no-repeat;
	box-shadow: -20px -20px 40px -10px rgba(0, 0, 0, 0.24);
	transition-delay: 1.8s;
	transform: translateX(600px);
	/*box-shadow: 0px 13.3px 53.3px rgba(0, 0, 0, 0.24);*/
}
.productThreeRImg1{
	width: 843px;
	height: 600px;
	background: url(img/image_cpgn_0103_bg.png) no-repeat;
	transition-delay: 0.4s;
}
.productThreeRImg2{
	top: 107px;
	left: 171px;
	width: 502px;
	height: 386px;
	background: url(img/iamge_cpgn_03.png) no-repeat;
	box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.24);
	transition-delay: 0.8s;
}
.productOneR1{
  transition-delay: 0.4s;
}
.productOneR2{
  transition-delay: 0.6s;
}
.productOneR3{
  transition-delay: 0.8s;
}
.productOneR4{
  transition-delay:1s;
}
.productOneR5{
  transition-delay: 1.2s;
}
.productOneR6{
  transition-delay: 1.4s;
}
.productRT{
	position: absolute;
	top: 120px;
	left: 180px;
	width: 480px;
	height: 360px;
	background: rgba(255, 255, 255, 1);
	border-radius: 8px;
}
.productRT h4{
	text-align: center;
	font-size: 18px;
}
.productRT ul{
	padding-top: 2.5rem;
	padding-left: 1.8rem;
}
.productRT ul li{
	float: left;
	list-style-type: none;
	width: 140px;
	height: 120px;
	text-align: center;
	padding: 20px 0;
}
.productRLImg{
	margin: 0 auto;
}
.productOneRLImg1{
	width: 48px;
	height: 48px;
	background: url(img/css_sprites.png) no-repeat -48px -1152px;
}
.productOneRLImg2{
	width: 48px;
	height: 48px;
	background: url(img/css_sprites.png) no-repeat -193px -1152px;
}
.productOneRLImg3{
	width: 48px;
	height: 48px;
	background: url(img/css_sprites.png) no-repeat -144px -1152px;
}
.productOneRLImg4{
	width: 48px;
	height: 48px;
	background: url(img/css_sprites.png) no-repeat -96px -1152px;
}
.productOneRLImg5{
	width: 48px;
	height: 48px;
	background: url(img/css_sprites.png) no-repeat 0px -1194px;
}
.productOneRLImg6{
	width: 140px;
	height: 48px;
	background: url(img/css_sprites.png) no-repeat -48px -1200px;
}
.productRight{
	width: 100%;
	height: 730px;
	overflow: hidden;
}
.classify{
	padding: 120px 0 120px 0;
	background: rgba(245, 247, 253, 1);
}
.classifyList ul li{
	float: left;
	list-style-type: none;
	width: 275px;
	height: 275px;
	border-radius: 24px;
	text-align: center;
	background: #fff;	
}
.classifyImg{
	margin:80px 0 0 0;
	width: 80px;
	height: 80px;
}
.classifyImg1{
	background: url(img/css_sprites.png) no-repeat -80px -835px;
}
.classifyImg2{
	background: url(img/css_sprites.png) no-repeat -80px -672px;
}
.classifyImg3{
	background: url(img/css_sprites.png) no-repeat 0px -752px;
}
.classifyImg4{
	background: url(img/css_sprites.png) no-repeat -80px -990px;
}
.classifyImg5{
	background: url(img/css_sprites.png) no-repeat -160px -915px;
}
.classifyImg6{
	background: url(img/css_sprites.png) no-repeat 0px -1073px;
}
.classifyImg7{
	background: url(img/css_sprites.png) no-repeat 0px -915px;
}
.classifyImg8{
	background: url(img/css_sprites.png) no-repeat -160px -752px;
}
.classifyList ul li:hover h4{
	color: rgba(47, 84, 235, 1);
}
.classifyList ul li:hover .classifyImg1{
	background: url(img/css_sprites.png) no-repeat 0px -835px;
}
.classifyList ul li:hover .classifyImg2{
	background: url(img/css_sprites.png) no-repeat 0px -672px;
}
.classifyList ul li:hover .classifyImg3{
	background: url(img/css_sprites.png) no-repeat -160px -672px;
}
.classifyList ul li:hover .classifyImg4{
	background: url(img/css_sprites.png) no-repeat 0px -990px;
}
.classifyList ul li:hover .classifyImg5{
	background: url(img/css_sprites.png) no-repeat -80px -915px;
}
.classifyList ul li:hover .classifyImg6{
	background: url(img/css_sprites.png) no-repeat -160px -993px;
}
.classifyList ul li:hover .classifyImg7{
	background: url(img/css_sprites.png) no-repeat -160px -835px;
}
.classifyList ul li:hover .classifyImg8{
	background: url(img/css_sprites.png) no-repeat -80px -752px;
}
.classifyList h4{
	font-size: 24px;
	color: rgba(155, 162, 204, 1);
}
.version{
	margin:120px 0 120px 0;
}
.versionTable{
	margin-top: 65px;
}
.versionTableItem{
	height: 75px;
	color: #fff;
	border-radius: 24px 24px 0 0
}
.versionBgYellow{
	background: rgba(250, 173, 20, 1);
}
.versionBgBlue{
	background: rgba(47, 84, 235, 1);
}
.versionBigtitle{
	padding-top: 7px;
	font-size: 24px;
	font-weight: 600;
}
.versionMeta{
	font-size: 16px;
}
.versionTableTd{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 75px;
	font-size: 16px;
}
/*.versionTableItemW, .versionTableBodyW{
	width: 280px;
}*/
.versionTableTdBig{
	font-size: 18px;
	font-weight: 600;
}
.versionTableBodyBox{
	border-radius: 0 0 24px 24px;
	padding: 0 0 30px 0;
	box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
}
.iconWidth{
	display: inline-block;
	width: 24px;
	height: 24px;
}
.iconVersion{
	background: url(img/css_sprites.png) no-repeat -200px -1126px;
}
.iconCorrect{
	background: url(img/css_sprites.png) no-repeat -210px -1090px;
}
.iconWrong{
	background: url(img/css_sprites.png) no-repeat -83px -1125px;
}
.iconPhone{
	background: url(img/css_sprites.png) no-repeat -106px -1124px;
}
.iconQQ{
	background: url(img/css_sprites.png) no-repeat -153px -1124px;
}
.bottomBox{
	width: 100%;
	text-align: center;
	padding: 80px 0 20px 0;
	background: rgba(5, 13, 22, 1);
	color: #fff;
}
.bottomItem{
	text-align: left;
}
.bottomItem h4{
	font-size: 18px;
}
.bottomList{
	padding:0;
}
.bottomList .phone{
	font-size: 16px;
	color: rgba(255, 255, 255, 1);
}
.bottomList img{
	width: 160px;
	height: 160px;
}
.bottomList li{
	font-size: 16px;
	list-style-type: none;
	display: flex;
	/*justify-content: center;*/
	align-items: center;
	line-height: 24px;
	padding: 10px 0;
	color: rgba(255, 255, 255, 0.6);
}
.bottomList li a{
	color: rgba(255, 255, 255, 0.6);
}
.bottomList li a:hover{
	color: rgba(255, 255, 255, 1);
}
.backTop{
	display: none;
	position: fixed;
	bottom: 150px;
	right: 20px;
	z-index: 99;
	background: rgba(47, 84, 235, 1);
	color: #fff;
	width: 76px;
	height: 76px;
	cursor: pointer;
}
.backTopBox{
	width: 76px;
	height: 76px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.backTop:hover{
	background: rgba(30, 67, 222, 1);
}
.iconImgBox{
	text-align: center;
}
.iconTop{
	background: url(img/css_sprites.png) no-repeat -208px -1072px;
}