.main {
	background: url(../img/bg.png) no-repeat;
	background-size: 100% 100%;
	width: 1280px;
	height: 645px;
	position: relative;
	font-size: 0;
}
.main2{
	position: absolute;
	top: 644px;
	left: 0;
	width: 1280px;
	background-color: #1E202F;
	height: 40px;
}
.logo{
	width: 79px;
	height: 80px;
	position: absolute;
	left: 24px;
	top: 26px;
}
.online{
	font-size: 28px;
	font-weight: bold;
	color:#5dd9e1;
	position: absolute;
	left: 47px;
	top: 143px;
}
.dCompare.newData{
	left: 48px;
	top: 200px;
}
.dCompare.newData img,.wCompare.newData img{
	margin: 0 5px;
}
.wCompare.newData{
	left: 267px;
	top: 200px;
}
.onlineNum{
	font-size: 100px;
	font-weight: bold;
	color:#FFF;
	position: absolute;
	left: 154px;
	top: 66px;
	 text-shadow: 0 0 0, 0 0 .4em;
}
.regionList{
	position: absolute;
	left: 45px;
	top: 254px;
}
.regionList div{
	display: inline-block;
	width: 100px;
	height: 40px;
	line-height: 40px;
	font-size: 14px;
	color:#64addb;
	font-weight: bold;
	background-color: #193D6F;
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	margin-right: 8px;
	text-align: center;
	overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.regionList div span{
	color:#69c8ff;
}
.smallBg{
	width: 233px;
	height: 240px;
	border-radius: 24px;
	position: absolute;
	top: 56px;
}
.smallBg img{
	width: 233px;
    height: 240px;
}
.newUser{
	left: 486px;
}
.newUserTitle{
	position: absolute;
	left: 28px;
	top: 20px;
	font-size: 28px;
	color:#5DD9E1;
	font-weight: bold;
}
.newUserNum{
	position: absolute;
	left: 26px;
	top: 60px;
	font-size: 40px;
	color:#FFF;
	font-weight: bold;
}
.newData{
	position: absolute;
	left: 28px;
	top: 135px;
	height: 35px;
	line-height: 35px;
	font-size: 0;
}

.newDataTitle{
	font-size: 24px;
	color:#64addb;
	font-weight: bold;
	vertical-align: 2px;
	
}
.newData img{
	width: 17px;
	height: 24px;
	margin: 0 8px 0 13px;
	vertical-align: -1px;
}
.newDataDetail{
	font-size: 26px;
	font-weight: bold;
	color:#F93E7A;
}
.wData.newData{
	top: 180px;
}
.blue.newDataDetail{
	color:#73fbac;
}
.dau{
	left: 746px;
}
.paid{
	left: 1006px;
}
.bigBg{
	width: 582px;
	height: 272px;
	position: absolute;
	left: 45px;
	top: 341px;
}
.bigBg img{
	width: 100%;
	height: 100%;
}
.cuntriesName{
	font-size: 16px;
	color:#FFF;
	font-weight: bold;
	position: absolute;
	left: 26px;
	top: 93px;
	width: 114px;
	text-align: center;
}
.circle-bar { font-size:114px; width: 114px; height: 114px; position: absolute;left: 26px;top: 120px;  background-color: #69c8ff; }
.circle-bar2,.cuntriesName2{
	left: 166px;
}
.circle-bar3,.cuntriesName3{
	left: 307px;
}
.circle-bar4,.cuntriesName4{
	left: 447px;
}
  .circle-bar-left,.circle-bar-right { width: 114px; height: 114px;  }
  .circle-bar-right { clip:rect(0,auto,auto,.5em);background-color: #455891; }
  .circle-bar-left { clip:rect(0,.5em,auto,0); background-color: #455891;}
  .mask { width: 100px;height: 100px; background-color: #232445;text-align: center;}
 .mask .maskNum{
 	font-size: 23px;
 	color:#FFF;
 	font-weight: bold;
 	top: 20px;
 }
.mask .percent{
	font-size: 23px;
	color:#64ADDB;
	top: 52px;
	font-weight: bold;
}
.mask .percent font{
	position: relative;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	display: inline-block;
	vertical-align: -1px;
	color:#69c8ff;
	font-weight: bold;
}
.mask .percent font.blue{
	color:#73fbac;
}
    /*所有的后代都水平垂直居中，这样就是同心圆了*/
    .circle-bar * {  position: absolute; top:0; right:0; bottom:0; left:0; margin:auto; }
    /*自身以及子元素都是圆*/
    .circle-bar, .circle-bar > * { border-radius: 50%; }
    
.recharge{
	left: 659px;
}
.rechargeMoney{
	position: absolute;
	left: 0;
	top: 67px;
	width: 100%;
}
.rechargeMoney1{
	top: 117px;
}
.rechargeMoney2{
	top: 167px;
}
.rechargeMoney3{
	top: 217px;
}
.rechargeMoney span{
	position: absolute;
	left: 0;
	top: 0;
	font-size: 26px;
	font-weight: bold;
}
.rechargeMoney .rechargeTitle1{
	left: 28px;
	color:#FFF;
}
.rechargeMoney .rechargeTitle2{
	font-size: 24px;
	top: 1px;
	left: 204px;
	color: #64addb;
}
.rechargeMoney .rechargeImg1,.rechargeMoney .rechargeImg2{
	position: absolute;
	left: 237px;
	top: 5px;
	width: 17px;
	height: 24px;
}
.rechargeMoney .rechargeTitle3{
	left: 265px;
	color: #f93e7a;
}
.rechargeMoney .rechargeTitle4{
	font-size: 24px;
	left: 395px;
	top: 1px;
	color: #64addb;
}
.rechargeMoney .rechargeImg2{
	left: 431px;
}
.rechargeMoney .rechargeTitle5{
	left: 459px;
	color: #f93e7a;
}
.rechargeMoney span.blue{
	color:#73fbac;
}
.breathe {
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-name: breathe;
	-webkit-animation-duration: 2000ms;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	overflow: hidden;
	border-radius: 24px;
}

.breathe2{
	animation-delay:2000ms;
}

@-webkit-keyframes breathe {
	0% {
		box-shadow: 0 1px 2px #3474bc;
	}
 
	100% {
		box-shadow: 0 1px 15px #3474bc;
	}

}