
.middle{
	text-align: center;
	width: 100%;
}
.contant{
	
	margin: auto;
	width: 960px;
	height: 100%;
	/*border: 1px solid black;*/
}

/*mid1第一部分*/
.mid1{
	width: 100%;
	height: 410px;
	background: #070A2F;
}
.mid1 .letter36nor{
	padding-top:35px;
	color: #FFFFFF;
}
.mid1 .letter18nor{
	line-height: 20px;
	font-size: 16px;
	margin: 8px 0 40px 0;;
	color: #8DA2B5; 
}
.mid1 .downbox{ 
	display: flex;
	justify-content: space-between;
 }
 .mid1 .downbox .page{
	 text-align: center;
 }
.mid1 .page .img{
	width: 128px;
	height: 128px;
	margin: 0 auto;
}
.mid1 .downbox .page .img img{
	width: 100%;
	height: 100%;
}
.mid1 .page .down-btn{
	margin: 24px auto 0; 
	height: 40px;
	line-height: 40px;
	width: 180px;
	font-size: 14px;
	color: #1F2122;  
	background: #FFFFFF;
	border-radius: 2px; 
	cursor: pointer;
}
.mid1 p.down-btn:hover{
	background: rgba(255,255,255,0.8);
}
.mid1 p.down-btn:active{
	background: #FFFFFF;
}
.mid1 .page p.down-btn label{
	padding-left: 24px;
	background: url(../img/DownloadPage/normal.png);
	background-image: url(../img/DownloadPage/normal.svg),none;
	background-repeat: no-repeat;
	background-position: -4px -4px;
	cursor: pointer;
}
.mid1 .downbox .phoneQR .down-btn{
	width:180px;
	height:40px; 
	opacity:0.5;
	line-height: 40px;
	color: #FFFFFF;
	opacity: 0.8;
	border:1px solid rgba(255,255,255,0.8);
	margin-top: 23px; 
	background: none;
	margin-bottom: 6px;
}
.mid1 .downbox .phoneQR .img {
	width: 128px;
	height: 128px;
}
.mid1 .phoneQR .support img{ 
	 width: 180px;
	 display: block;
}

/*mid2,第二部分*/
.mid2{
	width: 100%;
	height: 40px;
	background: #F6F7FC;
	text-align: left;
	line-height: 40px;
	font-size: 12px;
}
.mid2 .download_link {
	margin-left:20px;
	color:#1798FC;
}
.mid2 .download_link:hover{
	color: #4EB1FD;
}

/*左边部分，选择版本*/
.mid2 .leftbox{
	float: left;
}
.mid2 .choose-Edition{
	padding-top: 36px;
	width: 640px;
	height: 56px;
	text-align: left;
	box-shadow: inset 0 -1px 0 0 #C9CDCF;
}
.mid2 .choose-Edition span{
display: inline-block;
	margin-right: 64px;
	line-height: 54px;
	cursor: pointer;
}
.mid2 .choose-Edition span:hover{
	color: #4EB1FD;
}
.mid2 .choose-Edition span.seled{
	border-bottom:  2px solid #1798FC;
	color: #1798FC;
}
.mid2 .all-items>div.items{
	display: none;
}
.mid2 .all-items div.windows-items{
	display: block;
}
.mid2 .item{
	width: 640px;
	height: 144px;
	box-shadow: inset 0 -1px 0 0 #E1E4E6;
}
.mid2 .item:hover{
	background: #F2F8FF;
}
.mid2 .item:hover .downicon{
	background: #F2F8FF;
}
.mid2 .item .downicon{
	margin-left: 16px;
background: #FFFFFF;
margin-top: 55px;
	float: left;
	width: 72px;
	height: 40px;
	border: 1px solid #7E878B;
	border-radius: 29px;
	box-sizing: border-box;
	cursor: pointer;
}
.mid2 .item .downicon:hover{
	background:  #4EB1FD;
	border: none;
}
.mid2 .item .downicon:active{
	background:  #127FDC;
	border: none;
}
.mid2 .item .downicon p.bg:hover{
	background: url(../img/DownloadPage/hover.png);
	background: url(../img/DownloadPage/hover.svg);
	background-position: center;
	background-repeat: no-repeat;
}
.mid2 .item .downicon p.bg:active{
	background: url(../img/DownloadPage/hover.png);
	background: url(../img/DownloadPage/hover.svg);
	background-position: center;
	background-repeat: no-repeat;
}
.mid2 .item .downicon p.bg{
	width: 100%;
	height: 100%;

	background: url(../img/DownloadPage/normal.png);
	background: url(../img/DownloadPage/normal.svg);
	background-position: center;
	background-repeat: no-repeat;

}
.mid2 .item .downicon:hover{
	
}
.mid2 .item .rightLetter{
	text-align: left;
	width: 500px;
	margin-left: 104px;
} 
.mid2 .item .rightLetter p.letter18nor{
	padding-top: 20px;
	line-height: 24px;
}
.mid2 .item .rightLetter div.letter12nor{
	margin-top: 10px;
	height: 40px;
	line-height: 20px;
	color: #43484A;
}
.mid2 .item .rightLetter p.letter12ass1{
	margin-top: 20px;
	line-height: 16px;
	display: inline-block;
	margin-right: 14px;
}

/*右边*/
.mid2 .rightbox .letter18nor{
	line-height: 56px;
}
.mid2 .rightbox a.bltext{
	line-height: 32px;
}
/*产品说明文档*/
.mid2 .rightbox{
	float: left;
	margin-left: 40px;
	margin-top: 36px;
	text-align: left;
}
.mid2 .productDoc{

	width: 240px;
	border-bottom: 1px solid #C9CDCF;
}

/*查看更多*/
.mid2 .downRank p.letter14ass1{
	letter-spacing: 0.63px;
	line-height: 32px;
	cursor: pointer;
}

.mid2 .downRank p.letter14ass1:hover,
.mid2 .downRank p.letter14ass1:active
{
	color: #43484A;
}
.mid3{
	width: 100%;
	background: #fff;
	padding-top: 24px;
	padding-bottom: 48px;
}
.mid3 .letter18nor{

	margin-top: 24px;
	line-height: 56px;
	text-align: left;
	box-shadow: inset 0 -1px 0 0 #D8D8D8;
}
.mid3 .api_box{
	width: 212px;
	height: 142px;
	background: #FFFFFF;
	border-radius: 2px;
	margin-top: 16px;
	display: block;
	box-shadow:0;
	transition: 0.5s;
}
.mid3 .kfimg_box{
	position: relative;
	width:100px;
	height:100px;
	background:rgba(255,255,255,1);
	border-radius:2px;
	border:1px solid rgba(216,222,230,1);
	display: block;
	box-shadow: 0;
	transition: 0.5s;
	box-sizing: border-box;
	overflow: hidden;
	float: left;
	margin-left: 22px;
	margin-top: 0
}
.kfimg_box .img img{
	position: relative;
	width:80px;
	height:80px;
	top:10px
}
.kfimg_box .info{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    background: rgba(0,0,0,0.5);
    backface-visibility: hidden;
    opacity: 0;
    transition: all 0.35s ease-in-out;
}
.kfimg_box .info h3{
    position: relative;
    top: 40px;
    left: 21px;
    width:58px;
    height:20px;
    font-size:14px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(255,255,255,1);
    line-height:20px;
}
.kfimg_box:hover .info{
    opacity: 1;
}
.mid3 .api_box:hover{
	transition: 0.5s;
	box-shadow: 0 0 10px 0 rgba(74,144,226,0.40);
}
.mid3 .more-kfimg-box{
	width:100px;
	height:100px;
	background:rgba(244,246,252,1);
	border-radius:2px;
}
.mid3 .more-kfimg-box p{
	position: relative;
	top:40px;
	left: 20px;
	width:60px;
	height:20px;
	font-size:14px;
	font-family:PingFangSC-Regular,PingFang SC;
	font-weight:400;
	color:rgba(102,102,102,1);
	line-height:20px;
}
/* .mid3 .more-kfimg-box:hover{
	transition: 0.5s;
	box-shadow: 0 0 10px 0 rgba(74,144,226,0.40);
} */
.mid3 .yxsc{
	width: 100%;
	height: 104px;
	background: #FA7B4D url(../img/DownloadPage/dmp.png) center center no-repeat;
	border-radius: 2px 2px 0 0;
	background-size: 72px 72px;
	background-image: url(../img/DownloadPage/dmp.svg),none;
}
.mid3 .cpsy{
	width: 100%;
	height: 104px;
	background: #4DAFFA url(../img/DownloadPage/chanp.png) center center no-repeat;
	border-radius: 2px 2px 0 0;
	background-size: 72px 72px;
	background-image: url(../img/DownloadPage/chanp.svg),none;
}
.mid3 .kfxt_box{
	width: 100%;
	height: 104px;
	background: #A264FA url(../img/DownloadPage/kaifa.png) center center no-repeat;
	border-radius: 2px 2px 0 0;
	background-size: 72px 72px;
	background-image: url(../img/DownloadPage/kaifa.svg),none;
}
.mid3 .ios_box{
	width: 100%;
	height: 104px;
	background: #A264FA url(../img/DownloadPage/ios.png) center center no-repeat;
	border-radius: 2px 2px 0 0;
	background-size: 72px 72px;
	background-image: url(../img/DownloadPage/ios.svg?1),none;
}
.mid3 .android_box{
	width: 100%;
	height: 104px;
	background: #A264FA url(../img/DownloadPage/android.png) center center no-repeat;
	border-radius: 2px 2px 0 0;
	background-size: 72px 72px;
	background-image: url(../img/DownloadPage/android.svg?1),none;
}
.mid3 .api_box_p1 {
    font-size: 14px;
    color: #1F2122;
    letter-spacing: 0.89px;
    margin-top: 9px;
    line-height: 22px;
    text-align: center;
}

.mid3 .kfzn_box{
	width: 100%;
	padding-top: 16px;
}
.mid3 .kfzn_box::after{
	content:"";
	clear:both;
	display:block;
	visibility:hidden;
}
.mid3 .kfzn_box a{
	float: left;
}
.footer{
	background:rgb(246,247,252) !important;
}
