html {height: 100vh; width: 100vw;}
body{height: 100vh; width: 100vw; background: #000 url(../img/bg.jpg) top center no-repeat; background-size: 100% 100%;}
.bodybg{height: 100vh; width: 100vw; background: #000 url(../img/bg.jpg) top center no-repeat; background-size: 100% 100%;}
p.h4 { line-height: 1.5;}
.table{ font-family: 1.2rem;}
.table-sm th, .table-sm td{padding: 0.45rem;}

.header{ position: absolute; height:14.31rem; background:url(../img/header.png) top center no-repeat; background-size: 100% 100%;}
.header h1{ font-size: 2.37rem; line-height: 2rem;}

.part{position: absolute; top: 0.62rem; width:100vw; height:21.56rem; padding: 7.8rem 6rem 0; background:url(../img/partbg.png) top center no-repeat; background-size: 100% 100%;}
.part::after{ content: ""; position: absolute; left: 1.87rem; bottom: 6.7rem; width: 2.75rem; height: 9.81rem; background:url(../img/part-left.png) top center no-repeat; background-size: 100% 100%;}
.part::before{ content: ""; position: absolute; right: 1.87rem; bottom: 6.7rem; width: 2.75rem; height: 9.81rem; background:url(../img/part-right.png) top center no-repeat; background-size: 100% 100%;}
.part-title{ font-size: 1.25rem; font-weight: 600; text-shadow: 0.15rem 0.1rem 0.5rem rgba(0,0,0,0.3)}
.part-money{ /* font-size: 3rem; font-weight: 700; line-height: 1.2; text-shadow: 0.15rem 0.1rem 0.5rem rgba(251,92,200,0.6) */}
.h2{ text-shadow: 0.15rem 0.1rem 0.5rem rgba(251,92,200,0.6)}


.contenr{position: absolute; top: 20rem; width:100vw; padding:0 1.87rem;}

.box{ position: relative; width: 26.87rem; box-sizing: border-box; 
border: 2px solid red; border-image: url(../img/box-left.png) 60 48 40 120 fill;  
border-width: 3.75rem 3rem 2.25rem 7.5rem; 
margin-bottom: 1.25rem;  box-shadow: 0.15rem 0.1rem 0.5rem rgba(0,0,0,0.3)}

.box-body{ position: absolute; top: -3rem; right: -1.75rem; left: -6.25rem;bottom: 0;}

.box-header{position: relative;}
.box-title strong{font-size: 1.37rem; padding-bottom: 5px; color: #77e1fe;}
.box-title span{ color: #77e1fe;}
.box-title span.top10{color: #bff4ff}
.tab-nav a {display: inline-block; padding:3px 6px; margin: 0 4px; text-align: center; color: #0bace6;}
.tab-nav a.current {color: #fff; background: #56acfe; border-radius: 3px;}
.tab-con {overflow: hidden;}

#tab1 .tab-con{ height: 12rem;margin-top: 02rem; }
#tab2 .tab-con { height: 26rem;margin-top: 0.5rem; }


.box-one{ height: 19.06rem;}
.box-two{ height: 19.06rem;}
.box-three{ height: 30rem;border-image: url(../img/box-right.png) 60 48 40 120 fill;}
.box-four{ height: 9.87rem;border-image: url(../img/box-right.png) 60 48 40 120 fill;}

.box-map{ height: 41.1rem;}
.allnav{height: 100%;}

/* 在线人数 */
.on-line::after{ content: ""; position: absolute; left: 50%; width: 1px; height: 3.75rem; background: rgba(119, 255, 254, 0.3);}


.badge-purple { display: inline-block; color: #fff; width: 1.875rem; height: 1.25rem; border: 1px solid #666699; border-radius: 0; background: #40345d;}

.table-dark { margin-top: 0.5rem; background: none; }
.table-dark td { color: #bff4ff; padding:0.35rem 0.45rem;  border: none;}

.table-dark thead th{ border: none;}
.table-dark.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(7, 19, 39, 0.5);
}
.text-red{color: #dc3f39;}
.text-cyan{color: #02dbe2;}

.videobox{position: absolute; top:5.93rem; bottom: 0; left: 35%; right: 0; width: 50vw; height: calc(100vh - 5.93rem);mix-blend-mode:screen; transition: transform 600ms ease 0s;}
.video {width: 100%; height: 100%;}


.footer{position: absolute; bottom: 0; left: 0; right: 0; z-index: 1; width: 100vw; height: 7.25rem; background: url(../img/footer.png) center bottom no-repeat;}




/*翻页动画*/
@-webkit-keyframes flipTop {
0% {
-webkit-transform: perspective(400px) rotateX(0deg); }

100% {
-webkit-transform: perspective(400px) rotateX(-90deg); } }

@-webkit-keyframes flipBottom {
0% {
-webkit-transform: perspective(400px) rotateX(90deg); }

100% {
-webkit-transform: perspective(400px) rotateX(0deg); } }

@-moz-keyframes flipTop {
0% {
-moz-transform: perspective(400px) rotateX(0deg); }

100% {
-moz-transform: perspective(400px) rotateX(-90deg); } }

@-moz-keyframes flipBottom {
0% {
-moz-transform: perspective(400px) rotateX(90deg); }

100% {
-moz-transform: perspective(400px) rotateX(0deg); } }

@-ms-keyframes flipTop {
0% {
-ms-transform: perspective(400px) rotateX(0deg); }

100% {
-ms-transform: perspective(400px) rotateX(-90deg); } }

@-ms-keyframes flipBottom {
0% {
-ms-transform: perspective(400px) rotateX(90deg); }

100% {
-ms-transform: perspective(400px) rotateX(0deg); } }

@-keyframes flipTop {
0% {
transform: perspective(400px) rotateX(0deg); }

100% {
transform: perspective(400px) rotateX(-90deg); } }

@-keyframes flipBottom {
0% {
transform: perspective(400px) rotateX(90deg); }

100% {
transform: perspective(400px) rotateX(0deg); } }

/* .part-money{ font-size: 3rem; font-weight: 700; line-height: 1.2; text-shadow: 0.15rem 0.1rem 0.5rem rgba(251,92,200,0.6)} */

.dataStatistics {color: #fedec2;font-family: "Helvetica Neue", Helvetica, sans-serif;font-size: 2.37rem;font-weight: bold;line-height: 3.75rem;height: 3.75rem;  width: 31.25rem; margin: 0 auto;}

.dataStatistics .seperator {vertical-align: top;margin: 0 -20px;display: inline; }
.dataStatistics .seconds,.dataStatistics .minutes,.dataStatistics .hours,.dataStatistics .days {height: 100%;display: inline; }
.dataStatistics .digit_set {border-radius: 0.62rem;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);border: 1px solid #111111;width: 50px;height: 100%;display: inline-block;position: relative;margin: 0 1px; }

.dataStatistics .digit {position: absolute;height: 100%; }
.dataStatistics .digit > div {position: absolute;left: 0;overflow: hidden;height: 50%;width: 50px;padding: 0 0.93rem; }

.dataStatistics .digit > div.digit_top, .dataStatistics .digit > div.shadow_top { width: 50px;background-color: rgba(227,133,56,1);border-bottom: 1px solid #e38538;box-sizing: border-box;top: 0;z-index: 0;border-radius: 0.62rem 0.62rem 0 0; }
.dataStatistics .digit > div.digit_top:before, .dataStatistics .digit > div.shadow_top:before {content: "";
height: 100%;width: 100%;position: absolute;left: 0;top: 0; }
.dataStatistics .digit > div.shadow_top {width: 50px;opacity: 0;-webkit-transition: opacity 0.3s ease-in; }
.dataStatistics .digit > div.digit_bottom, .dataStatistics .digit > div.shadow_bottom {background-color: #e38538;bottom: 0;z-index: 0;border-radius: 0 0 0.62rem 0.62rem; }
.dataStatistics .digit > div.digit_bottom .digit_wrap, .dataStatistics .digit > div.shadow_bottom .digit_wrap {display: block;margin-top: -142%; }
.dataStatistics .digit > div.digit_bottom:before, .dataStatistics .digit > div.shadow_bottom:before {content: "";border-radius: 0 0 0.62rem 0.62rem;height: 100%;width: 100%;position: absolute;left: 0;top: 0; }
.digit_wrap{line-height: 3.75rem; display: block; overflow: hidden;}
.dataStatistics .digit > div.shadow_bottom {opacity: 0;-webkit-transition: opacity 0.3s ease-in; }
.dataStatistics .digit.previous .digit_top,.dataStatistics .digit.previous .shadow_top {opacity: 1;z-index: 2;
-webkit-transform-origin: 50% 100%;-webkit-animation: flipTop 0.3s ease-in both;-moz-transform-origin: 50% 100%;-moz-animation: flipTop 0.3s ease-in both;-ms-transform-origin: 50% 100%;-ms-animation: flipTop 0.3s ease-in both; transform-origin: 50% 100%;animation: flipTop 0.3s ease-in both;}
.dataStatistics .digit.previous .digit_bottom,.dataStatistics .digit.previous .shadow_bottom {z-index: 1;opacity: 1; }
.dataStatistics .digit.active .digit_top {z-index: 1; }
.dataStatistics .digit.active .digit_bottom {z-index: 2;-webkit-transform-origin: 50% 0%;-webkit-animation: flipBottom 0.3s 0.3s ease-out both;-moz-transform-origin: 50% 0%;-moz-animation: flipBottom 0.3s 0.3s ease-out both;-ms-transform-origin: 50% 0%;-ms-animation: flipBottom 0.3s 0.3s ease-out both;transform-origin: 50% 0%;animation: flipBottom 0.3s 0.3s ease-out both; }







/**自适应
@media screen and (max-width: 768px) {}
@media screen and (min-width: 768px) {html{font-size:14.2px;}}
@media screen and (min-width: 900px) {html{font-size:15px;}}
@media screen and (min-width: 1080px) {html{font-size:20px;}}
@media screen and (min-width: 1280px) {html{font-size:13.3px; }}
@media screen and (min-width: 1366px) {html{font-size:14.2px; }}
@media screen and (min-width: 1440px) {html{font-size:15px; }}
@media screen and (min-width: 1920px) {html{font-size:20px;}}
@media screen and (min-width: 2048px) {html{font-size:21.3px;}}
@media screen and (min-width: 4096px) {html{font-size:42.6px;}}
**/