.wrap{
	height: 0.5rem!important;
}
.main{
	margin-top: 20px;
	padding: 0 18px;
	overflow-y: auto;
	/* height: calc(100vh - 70px)!important; */
	height: calc(100% - 70px)!important;
	scrollbar-width:none;
}
.main::-webkit-scrollbar{
	display:none;
}

.main>div{
	width: 27%;
	color: #fff;

}
.padding10{
	padding: 10px;
}
.left ,.right{
	position: relative;
	/* top: -30px; */
	display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.left .box{
	padding-bottom: 20px;
}
.box{
	position: relative;
	width: 100%;
	/* padding: 10px; */
	min-height: 200px;
	border-radius: 2px;
	margin-bottom: 20px;
	box-sizing: border-box;
	box-shadow:0 0 10px 4px #02246c inset;
	overflow: hidden;
}
.box::-webkit-scrollbar {
	width: 0 !important 
}
.box::before{
	content: '';
	width: 30px;
	height: 30px;
	position: absolute;
	bottom: 0;
	left: 0;
	background-image: url(../images/border_j.png);
	background-size: 100% 100%;
	transform: rotate(180deg);
}
.box::after{
	content: '';
	width: 30px;
	height: 30px;
	position: absolute;
	bottom: 0;
	right: 0;
	background-image: url(../images/border_j.png);
	background-size: 100% 100%;
	transform: rotate(90deg);
}
.box .title{
	width: 100%;
	height: 45px;
	line-height: 45px;
	font-size: 22px;
	font-weight: bold;
	color: #01aaff;
	padding-left: 17px;
	background: linear-gradient(to right, rgba(5,27,135,1),rgba(5,27,135,0));
}

.list1 .tit{
	width: 100%;
	height: 45px;
	line-height: 45px;
	font-size: 16px;
	color: #46ede8;
	text-align: center;
	margin: 5px 0;
	background-color: #13213a;
}
.list1 .con{
	width: 100%;
	height: 25px;
	line-height: 25px;
	font-size: 14px;
	text-align: center;
	margin-bottom: 3px;
	background-color: #13213a;
}
.list1 .tit>div
,.list1 .con>div{
	width: 25%;
}
.box1 .tits{
	width: 100%;
	justify-content: space-between;
	padding: 0 0.45rem;
	box-sizing: border-box;
	font-size: 14px;
	position: absolute;
	top: 270px;
	left: 0;
	color: #20E1DE;
}
.box1 .tits>div{
	width: 70px;
	text-align: center;
	/* height: 50px; */
	/* background: url(../images/tit_bg.png) no-repeat bottom center; */
}
.box1 .tits>div:nth-child(1){color:#C1232B}
.box1 .tits>div:nth-child(2){color:#B5C334}
.box1 .tits>div:nth-child(3){color:#FCCE10}
.box1 .tits>div:nth-child(4){color:#E87C25}
.box1 .tits>div:nth-child(5){color:#27727B}
.box2 .sec1 .tits{
	color: #01b6ff;
	font-size: 16px;
	text-align: center;
}
.box2 .sec2 .item{
	position: relative;
	padding-left: 20px;
	font-size: 12px;
	height: 30px;
	color: #00f7a1;
	white-space: nowrap;
}
.box2 .sec2 .item::before{
	content: '';
	width: 14px;
	height: 14px;
	position: absolute;
	left: 0;
	top: 9px;
	background-color: #fff;
}
.box2 .sec2 .item:nth-child(1)::before{
	background-color: #9f00ee;
}
.box2 .sec2 .item:nth-child(2)::before{
	background-color: #00c6ff;
}
.box2 .sec2 .item:nth-child(3)::before{
	background-color: #0482ec;
}
.box2 .sec2 .item:nth-child(4)::before{
	background-color: #34d160;
}
.box2 .sec2 .item:nth-child(5)::before{
	background-color: #f19713;
}
.box2 .sec2 .item .name{
	color: #08c1f4;
	width: 50px;
	min-width: 50px;
	text-align-last: justify;
}
.box2 .sec2 .item .num{
	margin-left: 12px;
}
.box2 .sec2 .item .num span{
	color: #fff;
	min-width: 35px;
	display: inline-block;
}
.box3 .sec1 .item{
	font-size: 14px;
	height: 30px;
	color: #fff;
	white-space: nowrap;
}
.box3 .sec1 .item .name{
	width: 60px;
	font-size: 15px;
	min-width: 60px;
	text-align-last: justify;
	color: #fff;
	margin: 0 35px;
	text-shadow: 2px 2px 8px #fff;
}
.box3 .sec1 .item .num{
	margin-right: 15px;
}
.box3 .sec1 .item .num span{
	color: #fff;
	min-width: 35px;
	display: inline-block;
}
.box3 .sec1 .item:nth-child(1){
	color: #86f0e7;
}
.box3 .sec1 .item:nth-child(2){
	color: #f6714e;
}
.box3 .sec1 .item:nth-child(3){
	color: #f6714e;
}
.box3 .sec1 .item:nth-child(4){
	color: #ac4ed3;
}
.box3 .sec1 .item:nth-child(5){
	color: #34d160;
}

/* --- */
.middle{
	min-width: 500px;
	height: 850px;
	 position: relative; 
	 height: 100%;
	/* height: 100vh; */
}
.middle img{
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 90%;
}
.middle .bottom{
	mix-blend-mode: screen;
}
.middle .pop-wrap{
	position: absolute;
	width: 100%;
	/* height: calc(100% - 20px) ; */
	bottom: 0;
	left: 0;
	height: 800px;
}
.middle .pop{
	display: inline-block;
	position: absolute;
}
.middle .pop1{
	left: 0.5rem;
	top: 0.1rem;
}
.middle .pop2{
	right: 0.2rem;
	top: 1rem;
}
.middle .pop3{
	left: 0.5rem;
	top: 5.50rem;
}
.middle .pop4{
	right: 0.2rem;
	top: 4.50rem;
}
.middle .line{
	position: absolute;
	left: 0px;
	top: 0;
}
.middle .line1{
	width: 2.26rem;
	height: 1.6rem;
	left: 2.65rem;
	top: 0.2rem;
}
.middle .line2{
	width: 1.9rem;
	height: 1.36rem;
	left: -0.9rem;
	top: 0.20rem;
}
.middle .line3{
	width: 1.80rem;
	height: 1.20rem;
	left: 2.15rem;
	top: -0.80rem;
}
.middle .line4{
	width: 2.10rem;
	height: 0.750rem;
	left: -1.05rem;
	top: 0;
}
.middle .pop .msg{
	display: inline-block;
	background-color: #051d87;
	border-radius: 5px;
	padding: 10px;
	font-size: 16px;
	line-height: 30px;
	white-space: nowrap;
	z-index: 99;
}
.middle .pop .msg>div:nth-child(1){
	font-size: 18px;
	display: inline-block;
	border-bottom: 1px solid #fff;
}