@charset "utf-8";

/* global */
* {margin:0;padding:0;box-sizing:border-box;}
html, body {
	width:100%;
	min-width:1200px;
	height: 100%;
}
html{
	background:#000;
	background-size: cover;
}
@font-face {font-family: "Montserrat";
  src: url('Montserrat.ttf'); /* IE9 */
}
body {
	position:relative;
	font-family:"Montserrat","PingFang SC","Microsoft YaHei","Helvetica Neue","Hiragino Sans GB","WenQuanYi Micro Hei",Arial,sans-serif;
	color: #C5EEFE;
}

*{
	box-sizing: border-box;
}
img{
	vertical-align: middle;
}
/* layout */
#header {
	position:relative;
	background:#000614;
	background: url(../img/topbg.png) center center no-repeat;
	height: 150px;
}

.header-title-box{
	text-align: center;
}

.header-title{
	cursor: pointer;
	background-image: -webkit-linear-gradient(bottom, rgba(6, 175, 242,1),rgb(220, 244, 253), rgb(255, 255, 255));
	-webkit-background-clip: text;
	  -webkit-text-fill-color: transparent;
}
.header-title {
	height: 78px;
	text-align:center;
	font-size:32px;
	color:#fff;
	position: relative;
	padding-right: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.header-title span{
	margin-right: 8px;
}
.header-title span img{
	vertical-align: inherit;
}
.header-name,.header-name2{
	position:absolute;
	width:386px;
	left:50%;
	margin-left: -190px;
	padding:15px;
	top: 70px;
	max-height: 0;
	z-index: 200;
	display: none;
	border-top: 0;
	background-color: #000;
}
.header-name3{
	background-color: #000;
	height: auto;
	border: 1px solid #2f4e7d;
	z-index: 9999;
	text-align: center;
	padding: 0px 0 15px 0;
	display: none;
}
.home-menu:hover .header-name3{
	display: block;
}
.home-menu:hover .header-name3 >a{
	position: relative;
	display: inline-block;
}
.home-menu >a{
	display: inline-block;
	width: 85px;
}
.home-menu >a:after{
	position: absolute;
	right: 2px;
	top: 18px;
	width: 9px;
	height: 5px;
	background: url(../img/down.png) no-repeat;
	background-size: cover;
	z-index: 10;
	content: "";
	display: block;
}
.header-name3 li{
	padding: 5px 0;
}
.blue{color: #5ac8fa;}
.h-show{
	display: block;
	max-height: 9999px;
	transition: max-height .2s linear;
	transform-origin: 50% 0;
	animation: showAnimation 0.2s linear;
	-webkit-animation: showAnimation 0.2s linear;
	border: 1px solid #2f4e7d;
}
@keyframes showAnimation {
 0%{transform:scale(1,0);}
 100%{transform:scale(1,1);}
}
@-webkit-keyframes showAnimation {
 0%{transform:scale(1,0);}
 100%{transform:scale(1,1);}
}

 ul,li{
	list-style: none;
}
.header-name li {
	width: 100%;
	float: left;
	text-align: center;
}
.header-name li a{
	text-decoration: none;
	color: #bef2ff;
	font-size: 17px;
	font-weight: bold;
	display: block;
	padding:10px 5px;
}
.header-name li a:hover{
	color: #03c5f7;
	background-color: ;
}
.header-name li.current a{
	color: #03c5f7;
}

.header-name2 li{
	display: inline-block;
	float: left;
	width: auto;
	padding:px;
	width: 20%;
}
.header-name2 li a{
	padding: 5px;
}
.header-child{
	padding: 0 10px;
	padding-top: 12px;
	border-top: 1px solid rgba(255,255,255,0.1);
	margin-top: 15px;
}
.header-child a{
	display: inline-block;
	font-size: 16px;
	float: left;
	padding:5px 8px;
	color: #bef2ff;
	text-decoration: none;
}
.header-child a:hover{
	color: #03c5f7;
}
.logo-qz{
	position: absolute;
	left: 30px;
	padding-top: 17px;
	z-index: 100;
}
.logo-qz img{
	height: 38px;
}
.global-tab{
	position: absolute;
	top: 90px;
	left: 16px;
	z-index: 10;
}
.header-top-right{
	position: absolute;
	z-index: 100;
	top: 10px;
	right: 30px;
	font-size: 14px;
}
.header-top-right a{
	color: #bef2ff;
	text-decoration: none;
	font-size: 14px;
	padding: 10px 10px;
}
.header-top-right a:hover{
	color: #03c5f7;
}
.global-tab a{
	display: inline-block;
	border-style: solid;
	color: #bef2ff;
	font-size: 15px;
	font-weight: bold;
	text-decoration: none;
	border-width: 10px;
	margin-right: 8px;
	line-height: 10px;
	border-radius: 6px;
	border-image: url(../img/chart-wrapper.png) 20 fill / 1 / 0 repeat;
}
.global-tab a.current{
	color: #fff;
	background-color: #06AFF2;
}
.global-tab a:hover{
	color: #03c5f7;
}
.global-tab a.current:hover{
	color: #fff;
}
#container {
	margin-top: -20px;
	/* position:absolute;top:64px;bottom:15px;left:0;right:0; */
}

#flexCon {
	height:100%;
}
.f-cb:after,.f-cbli li:after {
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
	overflow: hidden;
	content: ".";
}
.f-cb,.f-cbli li {
	zoom: 1;
}
.flex-row {
	
	-webkit-flex:1;
	-ms-flex:1;
	flex:1;
	height:100%; 
	
}
.flex-cell {display: block;padding:10px 15px;float: left;}
/* 
.flex-cell-l,
.flex-cell-r {-webkit-flex:2;-ms-flex:2;flex:2;}
.flex-cell-c {-webkit-flex:3;-ms-flex:3;flex:3;}
.flex-cell-lc {-webkit-flex:5;-ms-flex:5;flex:5;}

.flex-cell-l{
	-webkit-flex:4;-ms-flex:4;flex:4;
}
.flex-cell-l,
.flex-cell-r {-webkit-flex:4;-ms-flex:4;flex:4;}
.flex-cell-c {-webkit-flex:3;-ms-flex:3;flex:3;} */

.flex-cell-1{
	width: 50%;float: left;
}
.chart-wrapper {position:relative;height:100%;}
.chart-title {height:30px;font-size:17px;font-weight:normal;color:#5ac8fa;position: absolute;top: 15px;left: 15px;font-weight: bold;}
.chart-div {
	position:absolute;
	top:10px;
	bottom:0;
	left:0;
	right:0;
	border-style:solid;
	border-width:15px;
	border-image:url("../img/chart-wrapper.png") 15 fill / 1 / 0 repeat;
}
.mt5{margin-top: 5px;}
.mt10{margin-top: 10px;}
.mt15{margin-top: 15px;}
.mt20{margin-top: 20px;}
.mt25{margin-top: 25px;}
.mt30{margin-top: 30px;}
.mt35{margin-top: 35px;}
.mt40{margin-top: 40px;}
.text-r{
	text-align: right;
}
.f-fl{
	float: left;
}
.num-scroll{
	font-size: 20px;
	font-weight: bold;
	position: absolute;
	left: 15px;
	top: 20px;
	color: #06AFF2;
}
.Odometer{
	line-height: 26px;
	display: inline-block;
	height: 26px;
	margin-left: 10px;
}
.number-animate{height: 26px;line-height: 26px;font-size: 26px;overflow: hidden; display: inline-block; position: relative;}
.number-animate .number-animate-dot{ width: 20px; float: left; text-align: center;margin-right: 2px;}
.number-animate .number-animate-dom{ width: 20px;  text-align: center; float: left; position: relative; top: 0;margin-right: 2px;}
.number-animate .number-animate-dom span,.number-animate .number-animate-dot span{float: left;width: 100%;height: 26px;color: #fff;font-weight: normal;line-height: 26px;
background-image: linear-gradient(to bottom, #00CFD6 , #0068F1);
}
.chart-table{
	width: 100%;
	background-color: #5ac8fa;
	font-size: 14px;
}
.chart-table span,.chart-table p{
	display: inline-block;
	padding: 8px 10px;
	color: #fff;
	float: left;
}
.scrollbox{
	font-size: 14px;
}
.scrollbox span,
.chart-table span{
	width: 100px;
}
.scrollbox .name,
.chart-table .name{
	width: 60%;
}

.type-table{
	color: #bef2ff;
	width: 100%;
	font-size: 14px;
	border-radius: 6px;
	overflow: hidden;
}
.type-table th,.type-table td{
	padding: 6px 5px;
}

.type-panel-body {
	height:500px;
	overflow:hidden;
	position:relative;
	color: #bef2ff;
}
.fixedThead {
	position:absolute;
	width:100%;
	background-image: linear-gradient(to right, #00CFD6 , #0068F1);
	z-index: 20;
	font-weight: bold;
	top:0;
	
	border-radius: 6px;
	overflow: hidden;
}
.fixedThead table td{
	padding: 6px 5px;
	font-size: 14px;
}
.class-menu{
	overflow: auto;
	height: 100%;
}
.class-menu li a{
	color: #bef2ff;
	text-decoration: none;
}
.class-menu li{
	position: relative;
	color: #bef2ff;
	line-height: 22px;
	font-size: 14px;
	padding-left: 10px;
}
.class-menu li:hover,.class-menu li.cur{
	background-color: #2c5484;
	cursor: pointer;
}
.class-menu li .name{
	padding: relative;
	display: inline-block;
	padding-right: 10px;
}
.class-menu li .name::after{
	position: absolute;
	right: 60px;
	content: "";
	left: 60px;
	top: 10px;
	border-bottom: 1px dotted rgba(255,255,255,0.3);
	height: 1px;
}
.class-menu li span.num{
	position: absolute;
	right: 0;
	top: 0;
}

.scrollTbody{
	position:absolute;
	padding-top:40px;
}

/* media query */
@media (max-width:1900px) {
	/* #header {height:48px;}
	#container {top:36px;bottom:10px;}
	.header-title {line-height:42px;font-size:22px;}
	.flex-cell {padding:10px;}
	.chart-title {height:24px;font-size:16px;}
	.chart-div {top:10px;}
	.header-name{
		top: 41px;
		width: 340px;
		margin-left: -170px;
	} */
}

/* chart-loader */
.chart-loader {
	position:absolute;
	top:0;
	left:0;
	z-index:99;
	width:100%;
	height:100%;
	background:rgba(255, 255, 255, 0);
	transition:all .8s;
}
.chart-loader .loader {
	position:absolute;
	left:50%;
	top:50%;
	width:60px;
	height:60px;
	margin:-30px 0 0 -30px;
	border:3px solid transparent;
	border-top-color:#3498db;
	border-radius:50% !important;
	-webkit-animation:spin 2s linear infinite;
	animation:spin 2s linear infinite;
}
.chart-loader .loader:before {
	content:"";
	position:absolute;
	top:3px;
	left:5px;
	right:5px;
	bottom:5px;
	border:3px solid transparent;
	border-top-color:#e74c3c;
	border-radius:50% !important;
	-webkit-animation:spin 3s linear infinite;
	animation:spin 3s linear infinite;
}
.chart-loader .loader:after {
	content:"";
	position:absolute;
	top:9px;
	left:10px;
	right:10px;
	bottom:10px;
	border:3px solid transparent;
	border-top-color:#f9c922;
	border-radius:50% !important;
	-webkit-animation:spin 1.5s linear infinite;
	animation:spin 1.5s linear infinite;
}

.chart-done .chart-loader {display:none;}
.index-canvas{
	position: absolute;
	width: 100%;
	height: 100%;
	background:rgba(255,255,255,0);
	z-index: -1;
	opacity: 0.1;
	top: 0;
	right: 0;
	left: 0;
}


.scrollTbody{
	 position:relative;
	animation:mymove 10s infinite linear;
	
}
.scrollTbody:hover{
	animation-play-state:paused;
	-webkit-animation-play-state:paused;
}
@-webkit-keyframes mymove {
	from {
	top:0px;
	}
	to {
		top:-460px;
	}
}


@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg)
	}
	100% {
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}
@keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg)
	}
	100% {
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}