@charset "utf-8";
/* CSS Document */
*{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	font-family:  Roboto Condensed, Microsoft JhengHei, sans-serif;
	vertical-align:baseline;
	text-decoration:none;
}
a{
	color: #fff;
	cursor: pointer;
  transition: 0.3s;
}
a:hover{
	color: #ff887c;
}
body, html{
	overflow-anchor: none;
	width:100%;
	height: auto;
	color: #fff;
	background: #000;
}
html{
	font-size: 20px;
	font-weight: 300;
	line-height: 1.5;
  letter-spacing: .018em;
}
.hide{
	display: none;
}
#hd #pageContent-trigger-lang {
  top: 13%;
}
a.toplink{
	display: block;
	position: fixed;
	width: calc(100% - 40px);
	height: 40px;
	background: #000;
	color: #cb4b67;
	text-align: right;
	padding: 5px 20px 0 20px;
	z-index: 200;
	top: 50px;
	font-weight: 500;
	font-size: 24px;
  letter-spacing: 0;
	opacity: 0.8;
}
a.toplink:hover{
	filter: brightness(1.2);
	opacity: 1;
}
.sidenav{
	position: fixed;
	right: 0;
	bottom: calc(10% + 120px);
	z-index: 120;
}
.sidenav a{
	display: block;
	background: url(../img/nav.png) no-repeat right;
	width: 180px;
	height: 40px;
	margin: 15px 5px;
	text-align: right;
}
.sidenav a span{
	display: none;
	width: fit-content;
	color: #fff;
	background: #000;
	border-radius: 5px;
	padding: 2px 10px;
	margin-right: 35px;	
}
.sidenav a:hover,.sidenav a.on{
	color: #cb4b67;
	background: url(../img/nav_a.png) no-repeat right;
}
.sidenav a:hover span,.sidenav a.on span{
	display: inline-block;
}
a.water{
	position: fixed;
	display: block;
	background: url(../img/bot.png) no-repeat center right;
	background-size: contain;
	width: 120px;
	height: 65px;
	right: 2px;
	bottom: 10%;
	z-index: 120;
}
a.water:hover{
	background: url(../img/bot2.png) no-repeat center ;
}
i{
	font-size: 12px;
	vertical-align: super;
}
.kv{
	position: relative;
	background: url(../img/kv.jpg) no-repeat top center ;
	background-size: contain;
	width: 100%;
	height: 100vh;
}
.kv > div{
	position: absolute;
	width: 910px;
	left: calc(50% - 455px);
}
.kvt1{
	background: url(../img/tt1.png) no-repeat top left ;
	background-size: contain;
	height: 159px;
	top: 20%;	
}
.kvt2{
	background: url(../img/tt2.png) no-repeat top left ;
	background-size: contain;
	height: 283px;
	top: calc(20% + 180px);
}
.kvt3{
	background: url(../img/tt3.png) no-repeat top left ;
	background-size: contain;
	height: 78px;
	top: calc(20% + 480px);
}
.kvt4{
	background: url(../img/tt4.png) no-repeat top left ;
	background-size: contain;
	height: 70px;
	top: calc(20% + 580px);
}
.maininfo{
	width: 100%;
	text-align: center;
}
.txt1{
	background: url(../img/t01.png) no-repeat center ;
	background-size: contain;
	width: 100%;
	height: 88px;
	margin: 50px auto;
}
.txt2{
	background: url(../img/tt4.png) no-repeat center ;
	background-size: contain;
	width: 100%;
	height: 60px;
	margin: 50px auto 150px auto;
}
.txt3{
	background: url(../img/t03.png) no-repeat center ;
	background-size: contain;
	width: 100%;
	height: 26px;
	margin: 50px auto;
}
.maininfo p,.prize p,.Gleam p,.Story p,.ct3{
	width: 800px;
	margin: 0 auto;
}
.bg-main{
	position: relative;
}
.net_bg{
	position: absolute;
	background: url(../img/bg_1.png) no-repeat center;
	background-size: cover;
	width: calc(100vw - 20px);
	height: 100vh;
	top: 0;
}
.cont{
	position: relative;
	width: 100%;
	display: block;
	margin: 100px auto;
	text-align: center;
}
.ctbg{
	width: 100%;
	height: 1200px;
  transition: 0.3s;
}
.cont1 .ctbg{
	background: url(../img/bg2.png) no-repeat center top;
}
.cont2 .ctbg{
	background: url(../img/bg3.png) no-repeat center top;
}
.cont3 .ctbg{
	background: url(../img/bg4.png) no-repeat center top;
}
.cont4 .ctbg{
	background: url(../img/bg5.jpg) no-repeat center top;
	height: 1400px;
}
.conttxt{
	position: relative;
	z-index: 100;
	padding-top: 30px;
}
.ct1{
	height: 1100px;
}
.lv{
	width: 177px;
	height: 235px;
	margin: 0 auto 80px auto;
}
.conttxt .lv{
	box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.6);
}
.lv1{
	background: url(../img/lv1.png) #000 no-repeat center top;
}
.lv2{
	background: url(../img/lv2.png) #000 no-repeat center top;
}
.lv3{
	background: url(../img/lv3.png) #000 no-repeat center top;
}
.lv4{
	background: url(../img/lv4.png) #000 no-repeat center top;
}
.lv.lv4m{
	width: 202px;
	background: url(../img/lv4m.png) #000 no-repeat center top;
}
.lv5{
	background: url(../img/lv5.png) no-repeat center ;
}
a.but1,a.but3,a.but4,a.but5,a.but6{
	display: block;
	background: url(../img/but01.png) no-repeat center ;
	width: 200px;
	height: 50px;
	margin: 20px auto;
}
a.but1:hover{
	background: url(../img/but01a.png) no-repeat center ;
}
.cont_p{
	width: 800px;
	margin: 0 auto;
	text-align: left;
}
h3,h4{
	color: #cb4b67;
	font-size: 30px;
	font-weight: 700;
	text-decoration: underline;
	margin-bottom: 30px;
	text-align: center;
}
h4{
	margin-top: 50px;
	margin-bottom: 10px;
}
a.tag{
	font-size: 22px;
	font-weight: 700;
	color: #cb4b67;
	text-decoration: underline;
}
a.tag:hover{
	color: #ff887c;
}
a.butw{
	color: #fff;
	display: block;
	margin-top: 30px;
	font-style: italic;
}
a.butw:hover{
	font-weight: 300;
	color: #ff887c;
}
a.but3{
	background: url(../img/but02.png) no-repeat center ;
	width: 420px;
}
a.but3:hover{
	background: url(../img/but02a.png) no-repeat center ;
}
.c3block,.c4block{
	position: relative;
}
.c3block_cont{
	width: 100%;
	height: 600px;
	overflow: hidden;
}
.cont3 h3{
	margin-top: 20px;
	text-decoration: none;
}
.c3block_cont > div{
	display: inline-block;
	width: 20%;
	height: 600px;
	margin: 0 1%;
	transition: 0.3s;
	cursor: pointer;
}
.c3block_cont > div:hover{
	filter: brightness(1.2);
}
.bc1{
	background: url(../img/f3a.jpg) no-repeat center top;
	background-size: contain;
}
.bc2{
	background: url(../img/f3b.jpg) no-repeat center top;
	background-size: contain;
}
.bc3{
	background: url(../img/f3c.jpg) no-repeat center top;
	background-size: contain;
}
.bc4{
	background: url(../img/f3d.jpg) no-repeat center top;
	background-size: contain;
}
.pic1{
	background: url(../img/pic1.jpg) no-repeat center top;
	background-size: contain;
}
.pic2{
	background: url(../img/pic2.jpg) no-repeat center top;
	background-size: contain;
}
.pic3{
	background: url(../img/pic3.jpg) no-repeat center top;
	background-size: contain;
}
.pic4{
	background: url(../img/pic4.jpg) no-repeat center top;
	background-size: contain;
}
a.but4{
	background: url(../img/but03.png) no-repeat center ;
	width: 230px;
}
a.but4:hover{
	background: url(../img/but03a.png) no-repeat center ;
}
.cont4 .conttxt{
	padding-bottom: 100px;
}
.c4block{
	margin-top: 50px;
}
.c4block > div{
	display: inline-block;
	width: 40%;
	height: 400px;
	margin: 20px 2%;
}
.c4block > div iframe{
	width: 100%;
	height: 400px;
}
.c4block h4{
	vertical-align: top;
	text-decoration: none;
}
.phase{
	margin-top: 50px;
}
.phase_but > div{
	display: inline-block;
	width: calc(50% - 2px);
	padding: 10px 0;
	font-size: 24px;
	font-weight: 700;
	color: #cb4b67;
	text-align: center;
	margin: 20px auto 0 auto;
	cursor: pointer;
  transition: 0.3s;
  border: 1px solid #cb4b67;
	background: rgba(0, 0, 0, 0.6);
}
.phase_but > div.on,.phase_but > div:hover{
	background: #cb4b67;
	color: #fff;
}
.phase_cont{
  border: 1px solid #cb4b67;
  padding: 20px 30px;
  margin-bottom: 50px;
	background: rgba(0, 0, 0, 0.6);
}
.sp2{
	width: 100%;
	text-align: left;
	margin: 50px auto;
}
ul{
	list-style: disc;
	margin:0 0 30px 30px;
}
ul a{
	font-weight: 500;
	color: #cb4b67;
}
h6{
	font-weight: 700;
}
.prize{
	position: relative;
	text-align: center;
}
.txt4{
	background: url(../img/t04.png) no-repeat center ;
	background-size: contain;
	width: 100%;
	height: 76px;
	margin: 150px auto 50px auto;
}
.levelbar_out{
	width: calc(100vw - 20px);
	overflow: auto;
	/* For Internet Explorer and Edge */
	-ms-overflow-style: none;
	/* For Firefox */
	scrollbar-width: none;
}
/* For Chrome, Safari, and Opera (WebKit browsers) */
.hide-levelbar_out::-webkit-scrollbar {
  display: none;
}
.bar_t .lv{
	margin: 50px 20px 10px 20px;
  transition: 0.3s;
	cursor: pointer;
	filter: grayscale(0.9);
	opacity: 0.4;
}
.bar_t .lv:hover,.bar_t .lv.m-hover,.bar_t .lv.on{
	filter: grayscale(0);
	opacity: 1;
}
.bar_t > div{
	display: inline-block;
}
.bar_b{
	position: relative;
	background: url(../img/bar.png) no-repeat top center ;
	width: 1000px;
	height: 50px;
	margin: 0 auto;
}
.bar_b > span{
	position: absolute;
	background: url(../img/arr.png) no-repeat center ;
	width: 14px;
	height: 40px;
	bottom: 0;
}
.bar_b > span.m1{
	left: 50px;
}
.bar_b > span.m2{
	left: 380px;
}
.bar_b > span.m3{
	left: 715px;
}
.bar_b > span.m4{
	left: 935px;
}
.prize_table{
	width: 1200px;
	text-align: center;
	margin: 30px auto;
}
.prize_table table{
	width: 100%;
	border-collapse: collapse;
	background: #222;
}
.prize_table table td{
	padding: 15px 20px;
	text-align: left;
	vertical-align: middle;
}
.prize_table table td:first-child{
	width: 25%;
}
.prize_table table td:last-child{
	width: 75%;
	border-left: 1px dashed #444;
}
h5{
	color: #cb4b67;
	font-size: 22px;
	font-weight: 700;
	text-decoration: underline;
}
.tip{
	font-size: 15px;
	color: #ccc;
}
.p_pic{
	text-align: center;
}
.p_pic > div{
	display: inline-block;
	width: 40%;
	height: 200px;
	margin: 5px;
	font-size: 15px;
	line-height: 1.5;
	vertical-align: top;
}
.p_pic b{
	font-weight: 700;
	color: #cb4b67;
	font-size: 22px;
}
.prize p.line{
	width: 90%;
	height: 1px;
	border-top:1px dashed #444;
	margin-bottom: 20px;
}
.prize_p{
	width: 100%;
	height: calc(100% - 50px);
}
.p01{
	background: url(../img/p01.png) no-repeat center ;
	background-size: contain;
}
.p02{
	background: url(../img/p02.png) no-repeat center ;
	background-size: contain;
}
.p03{
	background: url(../img/p03.png) no-repeat center ;
	background-size: contain;
}
.p04{
	background: url(../img/p04.png) no-repeat center ;
	background-size: contain;
}
.p05{
	background: url(../img/p05.png) no-repeat center ;
	background-size: contain;
}
.p06{
	background: url(../img/p06.png) no-repeat center ;
	background-size: contain;
}
.p07{
	background: url(../img/p07.png) no-repeat center ;
	background-size: contain;
	margin-bottom: 10px;
}
.p08{
	background: url(../img/p08.png) no-repeat center ;
	background-size: contain;
	margin-bottom: 10px;
}
.p09{
	background: url(../img/p09.jpg) no-repeat center ;
	background-size: contain;
	width: 600px;
	height: 368px;
	text-align: center;
	margin: 0 auto;
}
.p_pic > div span{
	display: block;
}
.p_pic.mega_p > div{
	height: 250px;
	margin-top: 20px;
}
.p_pic.mega_p div.prize_p{
	height: calc(100% - 55px);
}
.txt5{
	background: url(../img/t05.png) no-repeat center ;
	background-size: contain;
	width: 100%;
	height: 26px;
	margin: 150px auto 50px auto;
}
a.but5{
	background: url(../img/but04.png) no-repeat center ;
	width: 271px;
	margin-top: 30px;
}
a.but5:hover{
	background: url(../img/but04a.png) no-repeat center ;
}
.Gleam p{
	margin-bottom: 30px;
	text-align: center;
}
.txt6{
	background: url(../img/t06.png) no-repeat center ;
	background-size: contain;
	width: 100%;
	height: 26px;
	margin: 150px auto 50px auto;
}
.Story p{
	text-align: center;
}
.story_cont{
	height: 100px;
}
.icon3{
	background: url(../img/icon03.png) no-repeat center ;
	background-size: contain;
	width: 100%;
	height: 46px;
	margin: 50px auto;
}
#hd #pageContent-dialog-lang {
    z-index: 120;
}
.popup{
	position: fixed;
	text-align: center;
	left: calc(50vw - 150px);
	top: calc(50vh - 70px);
	z-index: 130;
}
.sn{
  position: relative;
	width: 260px;
	height: 120px;
	max-width: 18em;
  background: black;
  box-shadow: 0 0 20px black, 0 0 50px black;
  border: 1px solid #45f0ff;
  border-radius: 10px;
  padding:20px;
}
a.but6{
	background: url(../img/but05.png) no-repeat center ;
	width: 195px;
}
a.but6:hover{
	background: url(../img/but05a.png) no-repeat center ;
}
.close{
	position: absolute;
	background: url(../img/close.png) no-repeat center ;
	width: 20px;
	height: 20px;
	right: 15px;
	top: 15px;
	cursor: pointer;
  transition: 0.3s;
}
.close:hover{
	transform: rotate(180deg);
}