@charset "utf-8";
/* CSS Document */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
textarea{ resize:none;}
fieldset, img ,button{ border: none; }
a,button,input,textarea{ -webkit-tap-highlight-color: rgba(255,255,255,0); tap-highlight-color: rgba(255,255,255,0); -webkit-appearance: none; -moz-appearance: none; appearance: none;}
em, i ,strong{ font-style: normal; font-weight: normal;}
address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; }
ol, ul { list-style:none; }
h1, h2, h3, h4, h5, h6 { font-weight: normal;}
abbr, acronym { border: 0;}
.clear{ zoom: 1;}
.clear:after{ content: ""; display: block; clear: both;}
a{ text-decoration: none; cursor: pointer;}
a:hover{ text-decoration: none;}
html,body{ width:100%;height: 100%; background-color:#000;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
html,body,h1,h2{ font:400 14px/100% "microsoft yahei",Arial,Tahoma,sans-serif;}

@font-face {
	font-family: 'Colus';
	src:  url('../fonts/Colus-Regular.otf') format('otf');
}
.font-colus {
	font-family: 'Colus', sans-serif;
}

body::-webkit-scrollbar {
    display: none;
}
.download-notice.hide {
    display: none;
}
.download-notice {
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	width: 238px;
	height: 239px;
	position: fixed;
	bottom: 18px;
	left: 6px;
	animation: 0.5s ease-in-out 1.5s 1 normal forwards running btnVisibility, 2s ease-in-out 1.5s infinite normal forwards running btnMove;
	z-index: 10000;
	opacity: 0;
}
.download-notice.treasure {
	animation: 0.5s ease-in-out 3s 1 normal forwards running btnVisibility;
}
.notice-icon {
    width: 238px;
    height: 239px;
}

@keyframes btnMove {
    0% {
    transform: translate(0%, 0%);
    }
    35% {
    transform: translate(0%, 20%);
    }
    50% {
    transform: translate(0%, 15%);
    }
    65% {
    transform: translate(0%, 20%);
    }
    100% {
    transform: translate(0%, 0%);
    }
}

@keyframes btnVisibility {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}

.page-wrap.static #scene {
	background-size: cover;
	overflow: hidden;
}
.page-wrap.static .cover {
	width: 34.8vw;
	height: 100vh;
	position: absolute;
	right: 10vw;
	background-image: url(/static//img/cover-bg.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center 20%;
	text-align: center;
}
.page-wrap.static .cover .logo {
	height: 16vh;
	display: flex;
	justify-content: center;
	align-items: center;
}
.page-wrap.static .cover .logo img {
	max-width: 20vw;
}
.page-wrap.static .cover .giftcode-3 {
	position: relative;
}
.page-wrap.static .cover .giftcode-3 .tooltip {
	bottom: auto;
	top: calc(50px + 22%);
}
.page-wrap.static .cover .giftcode-3 .tooltip img {
	max-width: 1.5vw;
}
.page-wrap.static .cover .giftcode-3 img.gift {
	padding-top: 5vh;
	max-width: 26vw;
}
.page-wrap.static .cover .rewards-3 img {
	max-width: 20vw;
}
.page-wrap.static .cover .btn {
	bottom: 10vh;
}
.banner {
	position: absolute;
	z-index: 3;
	display: block;
	box-sizing: content-box;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 50px;
}
.banner .logo {
	height: 4vh;
}
.banner .slogen {
	margin-top: 25px;
	height: 6vh;
}
#scene {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-position: center;
}
#scene .dragon-l {
	position: absolute;
	height: 100%;
	width: 55%;
	left: -20px !important;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: right center;
}
#scene .fire {
	position: absolute;
	bottom: 0;
	top: 0;
	right: 45%;
	left: 0;
	background-size: cover;
	background-position: right center;
}
#scene .h_l {
	position: absolute;
	bottom: 0;
	top: auto !important;
	left: -100px !important;
	right: 60%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 10% 10%;
}
#scene .h_m {
	position: absolute;
	bottom: -5vh;
	top: auto !important;
	left: 15% !important;
	width: 80vh;
	height: 50vh;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center bottom;
}
#scene .yg {
	position: absolute;
	bottom: 0;
	top: 0;
	right: 0;
	left: 20%;
	background-size: cover;
	background-position: right 5%;
}
#scene .dragon-r {
	position: absolute;
	bottom: 0;
	top: 0;
	left: 20% !important;
	width: 85%;
	background-size: cover;
	background-position: left center;
}
#scene .yg2 {
	position: absolute;
	bottom: 0;
	right: 0;
	top: auto !important;
	left: auto !important;
	height: 35vh;
	width: 70vh;
	background-size: cover;
	background-position: right bottom;
}
#scene .snow {
	position: absolute;
	bottom: 0;
	top: 0;
	width: 85%;
	left: 20% !important;
	background-size: cover;
	background-position: left center;
}
#scene .tree {
	position: absolute;
	bottom: 0;
	right: -16vh;
	top: auto !important;
	left: auto !important;
	height: 50vh;
	width: 50vh;
	background-size: contain;
	background-position: right center;
	background-repeat: no-repeat;
}
#scene .dragon-soldier {
	background-size: cover;
	width: 110%;
	height: 100%;
	margin-left: -5%;
	background-position: 50% center;
}
#scene .fragment {
	background-size: cover;
    width: 110%;
    height: 110%;
	margin-left: -5%;
	margin-top: -5%;
    background-position: center;
}
#scene .static, #scene .fit {
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 100%;
	margin-left: 0;
	margin-right: 0;
}
#scene .fragment.pre-dragon {
	width: 100%;
	height: 100%;
	padding-top: 10% !important;
	margin-left: 10% !important;
	overflow: visible;
}
.btn {
    position: absolute;
    bottom: 100px;
    z-index: 100;
    left: 50%;
    transform: translateX(-50%);
}
.btn.left {
	left: 10%;
	transform: none;
}
.btn.right {
	right: 10%;
	left: auto;
	transform: none;
}
.btn.big {
	max-width: 40vw;
}
.btn.medium img {
	max-width: 40vw;
}
.btn.small img {
	max-width: 20vw;
}
.btn.low {
	bottom: 60px;
}
.btn.bottom {
	bottom: 0;
}
.btn img {
    max-width: 25vw;
}
.btn.boom img {
	max-width: 40vw;
}
.btn.boom.battle img {
	max-width: 40vw;
	opacity: 0;
}
.btn.large img {
	max-width: 50vw;
}

/* Copyright */
footer {
    position: absolute;
    bottom: 0;
    width: 100%;
	z-index: 999;
}

.copyright {
    height: 35px;
    line-height: 35px;
    text-align: center;
    font-size: 12px;
    background: rgba(3, 7, 9, 0.8);
    font-family: sans-serif;
    width: 100%;
	color: #fff;
	bottom: 0;
	z-index: 2;
}

.breathe {
	animation: breathe 1s ease-in-out infinite alternate-reverse;;
	-webkit-animation: breathe 1s ease-in-out infinite alternate-reverse;;
}
@keyframes breathe {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.2);
	}
}