body {background: #060e1b;width: 100%;height: 100%;margin: 0px;padding: 0px;box-sizing: border-box;}
   div{box-sizing: border-box;}
   *{margin: 0px;padding: 0px;}
   .container{padding-left: 0px;}
   ul li{list-style: none;}
   a{text-decoration: none;}
   a:hover{text-decoration: none;}
   .height-100{height: 100%;}
   [v-cloak] {display: none;} 
   .clear{clear: both;}
	#app{z-index: 9999;position: absolute;width: 100%;}
	canvas {position: fixed;opacity: 0.8;}
    #app{height: 100%;width: 100%;}
    .width-max{width: 100%;}
	.overflow{text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
	.color-black{color: #333333;}
	.color-blue{color: #3f62f7;}
	.color-gray{color:#999999}
	.color-white{color: white;}
	.color-red{color: #f04747;}
	.color-green{color: #49dc7a;}
	.color-orange{color: #fc9c56;}
	.color-violet{color: #bba6ff;}
	
	.color-black-bg{background-color: #333333;}
	.color-blue-bg{background-color: #3f62f7;}
	.color-blue-btn-bg{background-color: #627bfc;}
	.color-blue-table-bg{background-color: #162966;}
	.color-white-bg{background-color: white;}
	.color-red-bg{background-color: #f04747;}
	.color-green-bg{background-color: #49dc7a;}
	.color-orange-bg{background-color: #fc9c56;}
	.color-violet-bg{background-color: #bba6ff;}
	
	.float-right{float: right;}
	.float-left{float: left;}
    .text-center{text-align: center;}
	.text-right{text-align: right;}
	.text-left{text-align: left;}
	
	.font-weight{font-weight: bold;}
	.font-normol{font-weight: normal;}
	
	.img-max-widtd{width: 100%;}
	
	.position-r{position: relative;}
	.position-a{position: absolute;}
	.font-minsize{font-size: 12px;}
	.font-size-13{font-size: 13px;}
	.font-size-14{font-size: 14px;}
	.font-size-15{font-size: 15px;}
	.font-size-16{font-size: 16px;}
	.font-title{font-size: 18px;}
	.font-size-20{font-size: 30px;}
	
	.page-padding-bottom{padding-bottom: 50px;}
	.margin-auto{margin: 0 auto;}
	.padding-10{padding: 10px;}
	.div-margin{margin-top: 15px;}
	.mian-div{background: white;padding: 10px 20px;}
	.title-margin{margin-top:60px ;}

	.mainPage{z-index: 9999;position: relative;text-align: center;}
	.mainCont{position:relative;width:100%;}
	.page-padding{padding: 0px 10px;}
	.title{width:300px;height:60px;line-height: 60px;background: url(../img/title.png) no-repeat center;background-size: 100% 100%;margin-top: 50px;color: white;font-size: 17px;left: 50%;position: relative;margin-left: -150px;}
	.content-p{line-height: 2em;}
	.cont-img{width: 100%;height: 100%;}
	.cir-btn{width: 200px;height: 200px;border-radius: 50%;padding: 70px 20px;cursor: pointer;margin: 0 auto;margin-top: 5px;}
	.cir-btn:hover{animation:cirbtnanim 0.6s ;animation-fill-mode:forwards;-moz-animation-fill-mode: forwards;}
	@keyframes cirbtnanim{
		100%{
			transform:scale(0.9);
			box-shadow: 0px 0px 120px #EDEDED;
		}
	}
	@-webkit-keyframes cirbtnanim{
		100%{
			transform:scale(0.9);
			box-shadow: 0px 0px 120px #EDEDED;
		}
	}
	.logos-img{height: 60px;width: 100%;}
	.logos-img:hover{box-shadow: 0px 0px 20px #3f62f7;cursor: pointer;border: 2px solid #3f62f7;animation: logosanim 0.3s ease-in;animation-fill-mode: forwards;position: relative;z-index: 9999; }
	@keyframes logosanim{
		100%{
			transform:scale(1.2);
		}
	}
	@-webkit-keyframes logosanim{
		100%{
			transform:scale(1.2);
		}
	}
	
	.logos-tit{height: 60px;line-height: 60px;text-align: center;}
  	.paddding-3{padding-left: 0px;padding-right: 10px;padding-bottom: 15px;}
  	.fa-square{padding-right: 7px;}
  	.table-hover>tbody>tr:hover>td, .table-hover>tbody>tr:hover>th{background: none;opacity: 0.7;cursor: pointer;}
	.table th, .table td{text-align: center;vertical-align: middle!important;border:1px solid #5170f8 !important;}  
	.menu-btn{position: absolute;bottom: 5%;width: 100%;}
	.menu-title{position: absolute;bottom: 30%;width: 100%;}
	.footer-btn{width: 120px;height: 35px;line-height: 35px;border-radius: 20px;color:black;background: #3f62f7;cursor: pointer;}
	.active-img{cursor:pointer;-webkit-animation: scaleout 1.3s infinite ease-in-out;animation: scaleout 1.3s infinite ease-in-out;position: relative;}
	.match-menu-btn{width: 140px;height:40px;position: relative;}
	.titler{width:120px;height:50px;line-height:50px;background: url(../img/match/大赛标题框.png) no-repeat center;background-size: 100% 100%;margin-top: 50px;color: white;font-size: 17px;left: 50%;position: relative;margin-left: -60px;}
	.jishao{padding: 50px 150px;position: absolute;top: 0px;}
	.jishao-img{width: 100%;height: 380px;}
	.match-img-bg{width: 100%;height: 100px;margin-left: 10px;}
	.right-zu{position: absolute;height: 40px;line-height: 40px;width: 140px;text-align: center;}
	.right-fa{position: absolute;height: 40px;line-height: 40px;width: 140px;text-align: center;right: 15px;}
	.match-cont{position: absolute;width: 100%;height: 100px;bottom: 0px;}
	.match-div-padding{padding: 10px 5px 0px 25px;}
	@-webkit-keyframes scaleout {
	    0% { -webkit-transform: scale(1.0) }
	    100% {
	        -webkit-transform: scale(1.1);
	        opacity: 0;
	    }
	}
	@keyframes scaleout {
	    0% {
	        transform: scale(1.0);
	        -webkit-transform: scale(1.0);
	    } 100% {
	          transform: scale(1.1);
	          -webkit-transform: scale(1.1);
	          opacity: 0;
	      }
	}
	@media only screen and (min-width: 100px) and (max-width: 768px) {
		.font-size-16{font-size: 12px;}
		.font-size-20{font-size: 16px;}
		.cont-img{width: 50px;height: 50px;}
		.title-margin{margin-top: 20px;}
		.font-size-20{font-size: 12px;}
		.hi-icon {width: 50px;height: 50px;margin: 0px 12px;padding: 0px;}
		.menu-btn{bottom: 0px;}
		.menu-title{bottom: 35%;}
		.cir-btn{width: 114px;height: 114px;border-radius: 50%;padding:25px 5px 5px 5px;cursor: pointer;margin: 0 auto;margin-top: 5px;}
		.cir-btn-none{float: none;}
		.hi-icon-effect-9 .hi-icon{	width: 60px;height: 60px;line-height: 60px;font-size: 12px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
		.jishao{padding: 80px 70px;position: absolute;top: 0px;}
		.jishao-img{width: 100%;height: 550px;}
	}