@charset "utf-8";
/* CSS Document */
@font-face {
    font-family: "Chakra Petch";
    src: url('font/ChakraPetch-Regular.ttf');
}
*,body,html{
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
*{
	padding:0;
	margin:0;
	list-style:none;
}
a{
	color:#fff;
	text-decoration:none;
	outline: none;
}
body{
	background:#0b141b;
	color:#fff;
	font-family: "Chakra Petch";
	line-height:1.5;
}
img{
	vertical-align:middle;
	max-width:100%;
}
.mainContent{
	width:1200px;
	margin:0 auto 364px;
}
.footer{
	background:#0C1830;
}

.mlist{
	margin:205px 0 0 ;
}
.mlist ul{
	display:flex;
	justify-content:space-between;
}
.mlist li{
	width:396px;
	background:#0C1830;
	box-shadow:0 0 6px #0b141b;
}
.mlist li .pic{
	overflow:hidden;
}
.mlist li .pic img{
	transition: all 0.3s; 
}
.mlist li a:hover .pic img{
	transform: scale(1.2);
}
.mlist li .icon{
	padding:35px 30px 25px;
	height:53px;
	display:flex;
	align-items:center;
}
.mlist li .stl{
	font-size:30px;
	line-height:39px;
	font-style:italic;
	font-weight:600;
	padding:0 30px;
}
.mlist li .desc{
	font-size:15px;
	line-height:1.3;
	font-style:italic;
	letter-spacing:-2%;
	padding:9px 30px 30px;
	font-style:italic;
}
.mlist li a{
	display:block;
	height:100%;
}
.mlist li:hover{
	box-shadow:0 0 6px #220;
}
.section{
	width:1140px;
	margin:0 auto;
}
.flogo{
	width:422px;
}
.fbar{
	padding:80px 0 0;
	display:flex;
	justify-content:space-between;
}
.copyright{
	text-align:center;
	padding:40px 0;
	font-size:15px;
}
.qlink{
	display:flex;
	justify-content:space-between;
}
.qlink a{
	text-decoration:none;
	height:36px;
	line-height:36px;
	display:block;
}
.qlink dl{
	margin:0 0 0 120px;
}
.qlink dt{
	font-style: italic;
	font-weight: bold;
	font-size: 30px;
}
.qlink dd{
	font-size: 15px;
	line-height: 20px;
	margin-top:21px;
}
.sns a{
	height:36px;
	line-height:36px;
	display:block;
	overflow:hidden;
	padding-left:42px;
}
.sns .twitter{
	background:url(../img/twitter.png) left center no-repeat;
	background-size:36px;
}
.sns .discord{
	background:url(../img/discord.png) left center no-repeat;
	background-size:36px;
}
.sns .telegram{
	background:url(../img/telegram.png) left center no-repeat;
	background-size:36px;
}
.sns .medium{
	background:url(../img/medium.png) left center no-repeat;
	background-size:36px;
}
.h_banner{
	width:70%;
	min-width:1240px;
	box-sizing:border-box;
	position:relative;
	z-index:3;
	display:flex;
	height:100vh;
	flex-direction:column;
	justify-content: center;
	margin:0 auto;
}
.h_banner .desc{
	font-size:28px;
	line-height:30px;
	font-style: italic;
	margin:20px 0 20px;
}
.h_banner .coming{
	font-style: italic;
	font-weight: bold;
	font-size: 60px;
	text-shadow: 0px 4.46756px 4.46756px rgba(0, 0, 0, 0.25);
}
.h_banner .vbtn{
	margin:0 0 0 -20px;
	background:url(../img/x1.png) center center no-repeat;
}
.h_banner .vbtn:not(.disabled):hover{
	background:url(../img/x1_on.png) center center no-repeat;
}
.h_banner .go{
}
.blue {
    color: #00e0ff;
}
.header{
	/*padding:33px 54px;*/
	display:flex;
	align-items:center;
	box-sizing:border-box;
	min-width:1140px;
	margin:0 auto;
	position:fixed;
	z-index:30;
	left:0;
	top:0;
	right:0;
}
.header .hleft{
	background:url(../img/ve_01.png) left top no-repeat;
	height:130px;
	height:112px;
	padding-bottom:18px;
	display:flex;
	align-items:center;
}
.header .hmid{
	background:url(../img/ve_02.png) left top repeat-x;
	flex:auto;
	height:130px;
	display:flex;
	justify-content:flex-end;
	align-items:center;
}
.header .hright{
	background:url(../img/ve_03.png) left top no-repeat;
	width:100px;
	height:130px;
}
.logo{
	width:340px;
	/*width:460px;*/
	padding:0 60px;
	text-align:center;
}
.gnav{
	margin:0 0 0 0;
	font-style: italic;
}
.gnav ul{
	display:flex;
	padding:5px 0 0;
}
.gnav li{
	font-weight: 500;
	font-size: 19.6874px;
	line-height: 26px;
	letter-spacing: -0.02em;
	margin-right:5px;
}
.gnav li a{
	display:block;
	width:130px;
	text-align:center;
	padding:12px 10px 0 0;
	background:url(https://www.metaderby.com/static/img/bginav.png) center -10px no-repeat;
	background-size:130px 41px;
}
.gnav li a:hover, .gnav li a.on{
    color: #00e0ff;
	background:url(https://www.metaderby.com/static/img/bginav2.png) 21px 4.5px no-repeat;
	background-size:99px auto;
}
.headArea{
	height:100vh;
	background:url(../img/hbg.png) center center no-repeat;
	background-size:cover;
	position:relative;
}
.headArea::after{
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	top:0;
	content:'';
	background:url(../img/r135.png) center bottom no-repeat;
	background-size:cover;
}
#gsns{
	position:fixed;
	top:170px;
	right:41px;
	z-index: 999;
}
#gsns dd{
	margin-bottom:15px;
}
#gsns dd a{
	height:39px;
	width:39px;
	background-size:38px;
	border-radius:50%;
	text-indent:-99em;
	overflow:hidden;
	padding-left:0;
	box-sizing:border-box;
}

.vbtn{
	width:259px;
	height:69px;
	line-height:65px;
	color:#fff;
	text-align:center;
	font-size:28px;
	font-weight:700;
	padding:0 25px 0 0;
	font-style:italic;
	background:url(../img/bgbtn.png) center center no-repeat;
	display:block;
	cursor:pointer;
}
.vbtn:not(.disabled):hover{
	background:url(../img/bgbtn_on.png) center center no-repeat;
}
.vbtn.disabled{
	-webkit-filter: grayscale(100%);
	filter: gray;
	cursor:inherit;
}
.header .hmid .vbtn{
	margin:0 -45px 12px 0;
	transform:scale(0.85)
}
/**/
.secAbout{
	width:1140px;
	margin:0 auto;
	display:flex;
	height:100vh;
	align-items:center;
	justify-content:space-between;
}
.secAbout .pic{
	width:50%;
	overflow:hidden;
}
.secAbout .pic img{
	margin:0 0 0 -60px;
	width:640px;
	max-width:inherit;
	/*animation:whirling 3s linear infinite*/
}
.secAbout .desc{
	font-style:italic;
}
.secAbout .t1{
	font-size:60px;
	text-shadow: 0px 0px 15px rgba(255, 255, 255, 0.75), 0px 0px 6px #FFFFFF, 0px 0px 25px rgba(255, 255, 255, 0.5);
	margin:0 0 8px;
}
.secAbout .t1 strong{
	font-style:normal;
}
.secAbout .t1 i{
	font-weight:normal;
}
.secAbout .t2{
	font-size:24px;
	line-height:1.414;
}
.secAbout .t3{
}
.secAbout .t4{
	margin:45px 0 12px;
	display:flex;
}
.secAbout .t4 input{
	width: 318.1px;
	height: 34.87px;
	padding:0 10px;
	margin:0;
	box-sizing:border-box;
	border:none;
	font-style:italic;
}
.secAbout .t4 span{
	background:#00E0FF;
	display:inline-block;
	height:34.87px;
	vertical-align:middle;
	display:flex;
	align-items:center;
	width:34.87px;
	justify-content:center;
	cursor: pointer;
}
.secAbout .t4 span:hover{
    background: #00B2CA;
}
.secAbout .t5{
	font-size:20px;
	font-weight: normal;
	font-style: normal;
}
@keyframes whirling{
	0%{
		/*transform:rotate(0deg);*/
		transform:rotateY(0deg)
	}
	50%{
		transform:rotateY(150deg);
	}
	100%{
		transform:rotateY(0deg);
	}
}

/**/
.secServe{
	height:100vh;
	display:flex;
	align-items:center;
	background:url(../img/wg.png) center center no-repeat;
	background-size:cover;
}
.secServe ul{
	width:1140px;
	margin:0 auto;
	display:flex;
	justify-content:space-between;
}
.secServe li{
	width:31%;
	vertical-align:top;
	display:flex;
	flex-direction:column;
	background:url(../img/su.png) center center no-repeat;
	background-size:100% 100%;
	padding:20px 10px;
	box-sizing:border-box;
	font-style:italic;
}
.secServe li .pic{
	overflow: hidden;
}

.secServe li .pic img{
	transition: all 0.3s; 
}
.secServe li:hover .pic img{
	transform: scale(1.05);
}

.secServe li .txt{
	padding:20px 30px 30px;
	font-size:16px;
	line-height:1.414;
}
.secServe li strong{
	font-weight: 700;
	font-size: 24px;
	line-height: 31px;
	color: #00E0FF;
	display:inline-block;
	padding:0 0 5px;
}
.secMics{
	width:1140px;
	margin:0 auto;
	height:100vh;
	display:flex;
	/*align-items:center;*/
	justify-content:center;
	flex-direction:column;
}
.secMics .vtl{
	font-size:24px;
	font-style:italic;
}
.secMics .vtl strong{
	font-weight: 600;
    color: #00E0FF;
}
small.l3{
	display:inline-block;
	margin:0 0 0 8px;
}
.secMics .vdesc{
	margin:12px 0 0;
}
.secMics .vdesc table{
	border-collapse:collapse;
	width:100%;
}
.secMics .vdesc th, .secMics .vdesc td{
	border-bottom:1px solid #85898d;
	padding:20px;
	font-size:24px;
	width:33.33%;
	text-align:left;
}
.secMics .vdesc th, .secMics .vdesc tr td:first-child{
	font-weight:700;
}
.secMics .vdesc th{
	font-size: 64px;
	color: #FFFFFF;
	text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.7), 0px 0px 18px rgba(255, 255, 255, 0.5);
	font-style:italic;
}
.secMics .vdesc th i{
}
.secMics .vdesc th img{
	width:60px;
	vertical-align:middle;
	padding:0 0 5px 20px;
	margin:-5px 0 0;
}


/***********************/


/***********************/

.active_item_box{
	text-align:center;
}
.active_item_box .t1{
	font-family: 'Chakra Petch';
	font-style: italic;
	font-weight: 700;
	font-size: 28.134px;
	/*line-height: 37px;*/
	color: #FFFFFF;
	height:39px;
	line-height:39px;
	margin-top: 40px;
}
.active_item_box .t2{
	margin:40px 0 0;
	height:68px;
	line-height:68px;
}
.active_item_box .t3{
	font-weight: 400;
	font-size: 15px;
	line-height: 20px;
	margin:20px 0 0;
}
.active_item_box .t4{
	margin:22px 0 0;
}
.active_item_box .t5{
	font-weight: 400;
	font-size: 20px;
	color: #FFFFFF;
	margin:30px 0 0;
}
.active_item_box .vbtn{
	display:inline-block;
	padding-right:0;
	background:url(../img/bgbtn2.png) center center no-repeat;
}
.active_item_box .vbtn:not(.disabled):hover{
	background:url(../img/bgbtn2_on.png) center center no-repeat;
}

/*活动开始*/
.active_start_01{
}
.active_start_01 .t2{
	font-size: 50px;
	font-family: "Source Han Sans CN";
	font-weight: bold;
}
.active_start_01 .t2 small{
	font-size:20px;
	font-weight:normal;
}

/*活动进行中*/
.active_doing_01{
}
.active_doing_01 .t2{
	vertical-align:middle;
}
.active_doing_01 .t2 .opt_01{
	display:inline-block;
}
.active_doing_01 .t2 .btn_reduce{
	height: 68px;
	background:url(../img/l_on.png) left center no-repeat;
	background-size:cover;
	width:24px;
	display:inline-block;
}
.active_doing_01 .t2 .btn_add{
	height: 68px;
	background:url(../img/r_on.png) left center no-repeat;
	background-size:contain;
	width:24px;
	display:inline-block;
}
.active_doing_01 .t2 .num{
	width: 96px;
	height: 68px;
	line-height:68px;
	text-align:center;
	background:none;
	border: 1px solid #8A8888;
	box-sizing:border-box;
	padding:0;
	margin:0;
	color:#fff;
	font-size:38.0671px;
	margin:0 18px;
	vertical-align:top;
	display:inline-block;
}
.active_doing_01 .t2 .opt_01 .disabled{
	filter: grayscale(100%);
}
.active_doing_01 .t2 .opt_02{
	font-size: 38.0671px;
	line-height: 68px;
	display:inline-block;
	margin:0 0 0 42px;
	vertical-align:top;
	font-family: "Source Han Sans CN";
	font-weight: bold;
}
.active_doing_01 .t1 span{
	display:inline-block;
	background:url(../img/qb.png) left center no-repeat;
	padding-left:50px;
}
/*活动结束*/
.active_end_01 .t2{
	font-family: 'Source Han Sans SC';
	font-weight: 700;
	font-size: 38.0671px;
	line-height: 68px;
	text-align: center;
}

.bg_wg{
	background:url(../img/wg.png) center center no-repeat;
	background-size:cover;
}
.ac_area{
	width:1140px;
	margin:0 auto;
	display:flex;
	/*padding:130px 0;*/
	height:100vh;
	align-items:center;
}
.ac_area .pic{
	width:500px;
	text-align:center;
}
.ac_area .active_item_box{
	flex:1;
}
.swiper-container-vertical>.swiper-pagination-bullets{
	right: 53px;
	margin: 30px 0 0;
  }
input:focus{
	border: none;
	outline: none;
}
.vtop{
  position:fixed; 
  right:41px; 
  bottom:40px; 
  z-index:999;
  width: 39px;
  height: 39px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 99;
}
.vtop img{
  width: 39px;
  height: 39px;
  border-radius: 50%;
}
@media screen and (max-width:1280px) {
	.header, .h_banner{
		/* min-width:1140px; */
	}
	.mainContent{
		/* width:1140px; */
	}
	.mlist li{
		/* width:360px; */
	}
	.section{
		/* width:1140px; */
	}
	.videobox video{
		/* width:1140px; */
	}
}