@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

* { padding: 0; margin: 0; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
em, b { font-style: normal; }
a { text-decoration: none; color: #9b8f61; }
a:hover { text-decoration: none; }
img { border: 0; }
button, input, select, textarea { font-size: 100%; outline: none; }
table { border-collapse: collapse; border-spacing: 0; }
ul, ol { list-style-type: none; }
.clearfix:after,.clearfix:before{ content: ""; display: table; }
.clearfix:after{ clear: both; }
.clearfix{ *zoom: 1; }
img { width: 100%; }
body { width: 100%; overflow-x: hidden; font: 16px/2 'Roboto', Arial, serif; background: url(../images/bg.jpg) no-repeat center 8vh; color: #fffde3; }



.wrap { width: 100vw; overflow: hidden; padding-top: 8vh; }
.ilink { width: 0; height: 0; opacity: 0; }
/*nav*/
.navbar { position: fixed; z-index: 2; left: 0; top: 0; width: 100%; background: url(https://ha.99.com/en/resource/images/2022/navbg.jpg) no-repeat center center/100% 100%; box-sizing: border-box; padding: 0 3%; }
.navbar .wrapper { width: 80%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; height: 8vh; }
.navbar .logo { flex-shrink: 0; }
.navbar .logo img { height: 8vh; display: block; width: auto; }
.nav { width: 70%; display: flex; justify-content: flex-start; align-items: center; }
.nav > ul { width: 100%; height: 100%; display: flex; justify-content: flex-start; align-items: center; }
.nav li { text-align: center; padding: 0 5%; }
.nav a { display: block; color: #d8d1b1; transition: font-size .2s .1s ease-in-out; white-space: nowrap; font-size: 2vh; color: #e6ce89; }
.nav a:hover { color: #fffad4; }
.social-btns { display: flex; justify-content: center; align-items: center; }
.social-btns a { display: flex; justify-content: center; align-items: center; height: 5vh; line-height: 5vh; background: url(../images/cbtn.jpg) repeat-x 0 center/auto 100%; color: #1a1313; font-weight: bold; margin: 0 1vh; padding: 0 4vh; border-radius: 0.5vh; font-size: 2vh; white-space: nowrap; }
.social-btns a.discord { background: #6b7efc; color: #fff; }
.social-btns a.visitrule { display: none; padding: 0; width: 50px; }
.ic1, .ic2 { display: block; width: 3vh; height: 3vh; }
.ic1 { background: url(../images/icon2.png) no-repeat center center/100% 100%; }
.ic2 { background: url(../images/icon1.png) no-repeat center center/100% 100%; margin-left: 1vh; }
.social-btns a:hover { filter: brightness(120%); }
/*nav*/



.section { position: relative; z-index: 1; padding-bottom: 100px; text-align: center; overflow: hidden; }
.section > p { padding-bottom: 2vh; }
.content { position: relative; z-index: 2; }
.s1 { width: 100%; height: 820px; display: flex; align-items: flex-end; justify-content: center; }
.title { position: relative; margin: 0 auto; width: 90%; text-align: center; color: #eecb8b; text-shadow: 0 0 10px #4f2911, 0 0 10px #4f2911, 0 0 10px #4f2911; font-size: 3rem; font-weight: bold; }
.title:before, .title:after { position: absolute; top: 50%; margin-top: -31px; content: ""; width: 537px; height: 62px; background: url(../images/line.png) no-repeat 0 0/100% 100%; }
.title:before { left: 0; transform: rotate(180deg); }
.title:after { right: 0; }
.s3 .title { font-size: 4vw; }
.subtit { text-align: center; width: 100%; }

a.btn1 { display: block; width: 230px; height: 65px; line-height: 65px; text-align: center; background: url(../images/btn1.png) no-repeat 0 0/100% 100%; font-size: 2rem; color: #1e1711; font-weight: bold; text-transform: uppercase; margin: 0 auto; }
a.btn1:hover { filter: brightness(120%); }
a.btn1.inactive { background-image: url(../images/btn1-dark.png); cursor: default; }
a.btn1.inactive:hover { filter: brightness(100%); }

/*s1*/
video { position: absolute; left: 50%; width: 1920px; margin-left: -960px; top: -8vh; z-index: 1; }
#v2 { display: none; }
#v1 { display: block; }
.dec { position: absolute; bottom: 0; z-index: 3; left: 50%; width: 1920px; margin-left: -960px; height: 70px; background: url(../images/line2.png) no-repeat center center/100% 100%; }

.playbtn { display: block; width: 112px; height: 112px; background: url(../images/play.png) no-repeat 0 0/100% 100%; margin: 0 auto; }
.slogan { background: url(../images/slogan.png) no-repeat center center/100% 100%; width: 920px; height: 171px; }
.reserve-section { display: flex; align-items: center; justify-content: space-between; width: 913px; height: 198px; background: url(../images/reservebg.png) no-repeat 0 0/100% 100%; margin-bottom: 20px; box-sizing: border-box; padding: 0 3%; }
.reserve-section p { width: 28%; flex-shrink: 0; }
.reserve-section p:nth-child(2) { width: 36%; }
.reservebtn a.btn1 { width: 100%; }
.reservebtn.reserved a { filter: grayscale(100%); }
.reservebtn a:hover, .playbtn:hover { filter: brightness(120%); }


/*s2*/
.rewards { position: relative; z-index: 1; margin: 2vh auto; }
.treasurebox { width: 92vh; height: 50.2vh; background: url(../images/treasure.png) no-repeat center center/auto 100%; margin: 0 auto; }
.circle { position: absolute; left: 50%; top: 50%; margin: -25.1vh 0 0 -25.1vh; width: 50.2vh; height: 50.2vh; background: url(../images/circle1.png) no-repeat center center/auto 100%; animation: turn 5s linear infinite; }
.claimbtn { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; }
.s2 a.btn1 { width: 30vh; height: 9vh; line-height: 9vh; font-size: 5vh; }
.s2 .claimbtn a.btn1 { width: auto; padding: 0 3vh; }


.milestone, .social-center { position: relative; width: 1000px; margin: 80px auto 0; }
.milestone .flag { width: 100%; height: 630px; position: relative; }
.flag li { position: absolute; top: 0; width: 204px; height: 287px; margin-left: -102px; box-sizing: border-box; padding-top: 20px; font-size: 0.9rem; }
.flag li:nth-child(1) { left: 10%; background: url(../images/m1.png) no-repeat 0 0/100% 100%; }
.flag li:nth-child(2) { left: 30%; top: auto; bottom: 0; background: url(../images/m2.png) no-repeat 0 0/100% 100%; }
.flag li:nth-child(3) { left: 50%; background: url(../images/m3.png) no-repeat 0 0/100% 100%; }
.flag li:nth-child(4) { left: 70%; top: auto; bottom: 0; background: url(../images/m4.png) no-repeat 0 0/100% 100%; }
.flag li:nth-child(5) { left: 90%; background: url(../images/m5.png) no-repeat 0 0/100% 100%; }
.flag li:nth-child(2), .flag li:nth-child(4) { padding-top: 40px; }

.pic { position: relative; width: 140px; height: 120px; background: url(../images/pic.png) no-repeat 0 0/100% 100%; margin: 10px auto; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pic img { width: 80%; }
.num { font-size: 2.2rem; text-shadow: 0 0 5px #835c11, 0 0 5px #835c11, 0 0 5px #835c11; line-height: 1.4; color: #fff; font-weight: bold; }
.achieved-icon { display: none; }
.flag li.reached { cursor: pointer; }
.flag li.reached:hover { filter: brightness(120%); }
.reached .achieved-icon { position: absolute; left: 50%; top: 50%; margin: -19px 0 0 -62px; display: block; width: 124px; height: 38px; background: url(../images/achieve.png) no-repeat 0 0/100% 100%; }
.moreinfo { position: absolute; left: 0; bottom: 190px; background: #130905; border: 1px solid #e4b85f; padding: 10px; line-height: 1.4; width: 100%; box-sizing: border-box; }
.moreinfo:after { content: ""; width: 10px; height: 10px; background: #130905; border: 1px solid #e4b85f; border-right: none; border-top: none; transform: rotate(-45deg); position: absolute; left: 50%; bottom: -6px; margin-left: -7px; }
.flag li:nth-child(2) .moreinfo, .flag li:nth-child(4) .moreinfo { bottom: 170px; }
.achieved-icon.claimed { background-image: url(../images/claimed.png); }


.progress { width: 100%; position: absolute; left: 0; top: 50%; margin-top: -5px; display: flex; align-items: center; justify-content: flex-start; }
.progress li { position: relative; width: 16.6%; height: 10px; background: #241c15; border: 1px solid #b18a2a; }
.progress li:nth-child(1), .progress li:nth-child(1) p { border-radius: 10px 0 0 10px; }
.progress li:nth-last-child(1), .progress li:nth-last-child(1) p { border-radius: 0 10px 10px 0; }

.progress li:before { z-index: 2; position: absolute; left: -22px; top: 50%; margin-top: -22.5px; display: block; content: "01"; width: 45px; height: 45px; background: url(../images/dot.png) no-repeat 0 0/100% 100%; text-align: center; line-height: 45px; color: #000; font-size: 0.9rem; font-weight: bold; }

.progress li:nth-child(1):before { display: none; }
.progress li:nth-child(3):before { content: "02"; }
.progress li:nth-child(4):before { content: "03"; }
.progress li:nth-child(5):before { content: "04"; }
.progress li:nth-child(6):before { content: "05"; }

.progress li:nth-child(1) { width: 10%; }
.progress li:nth-child(2) { width: 20%; }
.progress li:nth-child(3) { width: 20%; }
.progress li:nth-child(4) { width: 20%; }
.progress li:nth-child(5) { width: 20%; }
.progress li:nth-child(6) { width: 10%; }

.progress li p { z-index: 1; position: relative; height: 100%; background: #e4b231; }
.progress li p:after { content: ""; width: 20px; height: 38px; background: url(../images/light.png) no-repeat 0 0/100% 100%; position: absolute; right: -10px; top: 50%; margin-top: -19px; }


/*s3*/
.social-center { display: flex; align-items: center; justify-content: center; }
.social-center li { width: 442px; height: 600px; background: url(../images/cbg.png) no-repeat 0 0/100% 100%; margin: 0 20px; padding-left: 6px; box-sizing: border-box; }
.social-center li > p { line-height: 82px; font-size: 2rem; font-weight: bold; color: #eecb8b; text-shadow: 0 0 5px #805415, 0 0 5px #805415, 0 0 5px #805415; }


.footer { text-align: center; color: #d8d1b1; padding: 30px 0; }
.footer a { margin: 0 5px; color: #d8d1b1; }
.footer a:hover { text-decoration: underline; }

/*side nav*/
.sidebar { display: none; position: fixed; z-index: 999; right: 50px; top: 50%; margin-top: -200px; }
.sidenav { position: relative; z-index: 2; }
.sidenav:after { position: absolute; z-index: 1; right: 0; top: 0; content: ""; height: 100%; width: 2px; background: #ffd894; }
.sidenav a { position: relative; z-index: 2; display: block; text-align: right; line-height: 3; padding-right: 30px; color: #7e683e; }
.sidenav a:after { position: absolute; right: -11px; top: 50%; margin-top: -12px; content: ""; width: 24px; height: 25px; background: url(../images/select.png) no-repeat 0 0/100% 100%; }
.sidenav a.on, .sidenav a:hover { font-weight: bold; color: #ffd894; text-shadow: 0 0 1px #6f4c0e, 0 0 1px #6f4c0e; }
.sidenav a.on:after, .sidenav a:hover:after { background-image: url(../images/select-on.png); }

.sidenav a.home { position: absolute; right: -18px; top: -38px; width: 39px; height: 34px; background: url(../images/home.png) no-repeat 0 0/100% 100%; padding: 0; }
.sidenav a.back { position: absolute; right: -16px; bottom: -28px; width: 32px; height: 25px; background: url(../images/back.png) no-repeat 0 0/100% 100%; padding: 0; }
.sidenav a.home:after, .sidenav a.back:after { display: none; }

.reserve-now { position: absolute; z-index: 1; cursor: pointer; width: 158px; height: 187px; background: url(../images/reserve-icon.png) no-repeat 0 0/100% 100%; right: -20px; bottom: -190px; }
.reserve-now:hover, .sidenav a.home:hover, .sidenav a.back:hover { filter: brightness(120%); }

.reserved .reserve-now { display: none; }

/*box*/
.popbox { display: flex; z-index: 999; width: 100%; height: 100%; position: fixed; left: 0; top: 0; align-items: center; }
#commonbox {z-index: 99999}
.popbox.hide { display: none; }
.mask{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.4; filter: alpha(opacity=40); z-index: 1112;}
.msgbox { width: 40vw; position: relative; margin: 0 auto; z-index: 1113; color: #f7e69a; background: url(../images/box1.png) no-repeat center center/100% 100%; padding: 2vw 0; font-size: 1.2vw; }
a.close { position: absolute; right: 1vw; top: 1vw; width: 3vw; height: 3vw; line-height: 3vw; text-align: center; color: #ffd979; font-size: 300%; }
a.close:hover { opacity: 0.9; }
.msg h3 { text-align: center; text-transform: uppercase; font-size: 140%; color: #e6cd86; }
.msg .msgcont { width: 80%; padding: 2vw 0; margin: 0 auto; line-height: 1.4; }
.msg .msgcont span { color: #e3bf4e; }
.rwdimg { padding: 1.5vw 0; }
.rwdimg img { width: 140px; display: block; margin: 0 auto; }
.msghint { padding: 2vh 0 4vh; text-align: center; font-size: 1.4rem; }

#discordintro .msgbox { background: url(../images/box2.png) no-repeat center center/100% 100%; width: 50vw; }
#discordintro .msg .msgcont { width: 90%; padding: 0 0 2vw 0; }
.discordstep { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.discordstep li { width: 46%; margin: 2%; }

.btn2 { display: block; margin: 0 auto; width: 220px; height: 80px; background: url(../images/btn2.png) no-repeat 0 0/100% 100%; font-weight: bold; color: #fff; text-align: center; line-height: 80px; font-size: 1.5rem; text-shadow: 0.2vw 0.2vw 1vw #6f3b11; }
.btn2:hover { filter: brightness(120%); }
#discordintro .btn2 { position: absolute; left: 50%; bottom: -40px; margin-left: -111px; }


/*pop video*/
.popvideo { display: none; width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 999; }
.mask{ position: fixed; top: 0; left: 0; z-index: 1112; width: 100%; height: 100%; background: #000; opacity: 0.4; filter: alpha(opacity=40); }
.videocont { position: relative; z-index: 1113; }
.videocont a.close { right: -3vw; top: 0; background: #000; }
.popvideo iframe, .videocont { width: 800px; height: 450px; margin: 0 auto; }
.popvideo { top: 50%; margin-top: -225px; }



.loading { display: none; width:100%;height:100%;position:fixed;top:0;left:0;background:#000 url(https://co.99.com/resource/images/loader.gif) no-repeat center center;opacity:.7;z-index:10000}



@media only screen and (orientation:landscape ) {
	
	@media only screen and (max-width: 1600px) {
		body { font: 16px/2 'Roboto', Arial, serif; }
		.title:before, .title:after { margin-top: -1.8vw; content: ""; width: 28vw; height: 3.6vw; }
		.navbar .wrapper { width: 96%; }
		.nav a, .social-btns a { font-size: 1.2rem; }
		.social-btns a { padding: 0 2vw; margin: 0 1vw; }
	}

	@media only screen and (max-width: 1300px) {
		body { font: 1.2vw/2 'Roboto', Arial, serif; background: url(../images/bg.jpg) no-repeat center 8vh/140% auto; }
		video { width: 140%; margin-left: -70%; }
		.dec { width: 140vw; margin-left: -70vw; height: 5.1vw; }

		.navbar { padding: 0 1%; }
		.navbar .wrapper { width: 100%; }
		.navbar .wrapper, .navbar .logo img { height: 12vh; }
		.wrap { padding-top: 12vh; }
		.section { padding-bottom: 10vh; }
		.social-btns a { height: 8vh; line-height: 8vh; margin: 0 1vw; }
		.s1 { height: 60vw; }
		.playbtn { width: 8vw; height: 8vw; }
		.slogan { width: 64.6vw; height: 12vw; }
		.reserve-section { width: 64vw; height: 14vw; }
		.ic1, .ic2 { width: 2.6vw; height: 2.6vw; }

		.title { font-size: 3.6vw; }
		a.btn1 { width: 20vw; height: 5.6vw; line-height: 5.6vw; font-size: 1.6rem; }

		.msgcont a.btn1 { width: 16vw; height: 4.4vw; line-height: 4.4vw; font-size: 1.2rem; }

		/*s2*/
		/*.s2 .title { font-size: 6vh; line-height: 10vh; }*/
		.rewards { margin: 0; }
		.treasurebox { width: 92vh; height: 50.2vh; }
		.circle { margin: -25.1vh 0 0 -25.1vh; width: 50.2vh; height: 50.2vh; }
		.s2 a.btn1 { width: 30vh; height: 9vh; line-height: 9vh; font-size: 5vh; }


		.milestone { width: 66%; margin: 3vw auto 0; }
		.milestone .flag { width: 100%; height: 50vw; }
		.flag li { width: 16vw; height: 22.5vw; margin-left: -8vw; padding-top: 2vw; font-size: 0.9rem; }
		.flag li:nth-child(2), .flag li:nth-child(4) { padding-top: 3vw; }

		.pic { width: 10vw; height: 8.5vw; margin: 1vw auto; }
		.num { font-size: 3vw; text-shadow: 0 0 5px #835c11, 0 0 5px #835c11, 0 0 5px #835c11; line-height: 1.4; color: #fff; font-weight: bold; }
		.name { line-height: 1.2; padding-top: 0.5vw; font-size: 1.4vw; }
		.reached .achieved-icon { margin: -1.5vw 0 0 -5vw; width: 10vw; height: 3.1vw; }
		.moreinfo { bottom: 14vw; padding: 0.5vw; }
		.moreinfo:after { width: 1vw; height: 1vw; bottom: -0.6vw; margin-left: -0.7vw; }
		.flag li:nth-child(2) .moreinfo, .flag li:nth-child(4) .moreinfo { bottom: 11vw; }

		.progress { margin-top: -0.5vw; }
		.progress li { height: 1vw; border: 0.1vw solid #b18a2a; }
		.progress li:nth-child(1), .progress li:nth-child(1) p { border-radius: 1vw 0 0 1vw; }
		.progress li:nth-last-child(1), .progress li:nth-last-child(1) p { border-radius: 0 1vw 1vw 0; }

		.progress li:before { left: -2vw; margin-top: -2vw; width: 4vw; height: 4vw; line-height: 4vw;  }

		.progress li p:after { width: 2vw; height: 4vw; right: -1vw; margin-top: -2vw; }


		/*s3*/
		.social-center { width: 80%; margin: 6vw auto 0; }
		.social-center li { width: 36vw; height: 49vw; margin: 0 2vw; padding-left: 0.5vw; }
		.social-center li > p { line-height: 6.6vw; text-shadow: 0 0 5px #805415, 0 0 5px #805415, 0 0 5px #805415; }
		.fb-section, .discord-section iframe { width: 35.2vw; height: 41.6vw; overflow: hidden; }

		.footer { padding: 3vw 0; }
		.footer a { margin: 0 0.5vw; }

		/*side nav*/
		.sidebar { right: 2vw; top: auto; bottom: 17vw; margin-top: 0; }
		.sidenav:after { width: 0.2vw; }
		.sidenav a { padding-right: 3vw; font-size: 1.6vw; line-height: 4vw; }
		.sidenav a:after { right: -1vw; margin-top: -1vw; width: 2vw; height: 2vw; }
		.sidenav a.on, .sidenav a:hover { text-shadow: 0 0 1px #6f4c0e, 0 0 1px #6f4c0e; }

		.sidenav a.home { right: -1.4vw; top: -3vw; width: 3vw; height: 2.6vw; }
		.sidenav a.back { right: -1.4vw; bottom: -2.6vw; width: 3vw; height: 2.6vw; }
		.reserve-now { width: 11vw; height: 13vw; right: -2vw; bottom: -16vw; }

		/*pop video*/
		.videocont a.close { right: -4vw; width: 4vw; height: 4vw; line-height: 4vw; }
		.popvideo iframe, .videocont { width: 64vw; height: 36vw; margin: 0 auto; }
		.popvideo { margin-top: -18vw; }


		/*box*/
		.msg h3 { font-size: 3vw; }
		.msgbox { width: 50vw; padding: 2vw 0; font-size: 1.2vw; }
		a.close { right: 1vw; top: 1vw; width: 3vw; height: 3vw; line-height: 3vw; font-size: 4vw; }
		.msg .msgcont { width: 80%; padding: 2vw 0; margin: 0 auto; line-height: 1.2; font-size: 1.8vw; line-height: 1.4; }
		.rwdimg { padding: 1vw 0 2vw; }
		.rwdimg img { width: 10vw; }
		.msghint { font-size: 1.2rem; }

		#discordintro .msgbox { width: 90vw; }
		#discordintro .msg .msgcont { width: 96%;  }
		.discordstep li { width: 24%; margin: 0.5%; }
		.btn2 { display: block; margin: 0 auto; width: 18vw; height: 6vw; background: url(../images/btn2.png) no-repeat 0 0/100% 100%; font-weight: bold; color: #fff; text-align: center; line-height: 6vw; font-size: 140%; text-shadow: 0.2vw 0.2vw 1vw #6f3b11; }
		.btn2:hover { filter: brightness(120%); }
		#discordintro .btn2 { position: absolute; left: 50%; bottom: -3vw; margin-left: -8vw; }

		
	}


	@media only screen and (max-width: 1000px) {
		body { font: 1.4vw/2 'Roboto', Arial, serif; }
		.nav li { padding: 0 3%; }
		.nav a, .social-btns a { font-size: 1.6vw; }
		.sidebar { top: auto; bottom: 17vw; }
		.sidenav a { display: none; }
		.sidenav a.back { display: block; }
	}

	@media only screen and (max-width: 100vw) and (max-height: 50vw) {
		.sidebar { top: auto; bottom: 17vw; }
		.sidenav a { display: none; }
		.sidenav a.back { display: block; }
	}

	@media only screen and (width: 1024px) and (height: 768px) {
		.nav li { padding: 0 4%; }
	}
}


@media only screen and (orientation:portrait ) {
	body { font: 3.4vw/1.4 'Roboto', Arial, serif; background: url(../images/m/bg.jpg) no-repeat center 12vw/100% auto; background-color: #100700; }
	.wrap { padding-top: 12vw; }
	.navbar .wrapper { width: 100%; }
	.nav ul { display: none; }
	.navbar .wrapper, .navbar .logo img { height: 12vw; }
	.social-btns a { height: 8vw; line-height: 8vw; padding: 0 4vw; font-size: 3.4vw; margin: 0 0.5vw; }
	.social-btns a.visitrule { display: block; width: 8vw; text-align: center; }
	.ic1, .ic2 { width: 5vw; height: 5vw; }
	.section { padding-bottom: 12vw; }
	.section.s1 { padding-bottom: 20vw; }
	/*.section.s5 { padding-bottom: 10vw; }*/
	#v1 { display: none; }
	#v2 { display: block; }
	video { width: 100%; margin-left: -50%; }
	.dec { width: 100vw; height: 11.3vw; margin-left: -50vw; background-image: url(../images/m/line2.png); }

	.s1 { height: 154vw; }
	.playbtn { width: 18vw; height: 18vw; }
	.slogan { width: 100vw; height: 36vw; background-image: url(../images/m/slogan.png); }
	.reserve-section { width: 92vw; height: 50vw; padding: 0 3% 2vw; margin: 0 auto; background-image: url(../images/m/reservebg.png); flex-wrap: wrap; justify-content: center; }
	.reserve-section p:nth-child(1) { width: 40%; }
	.reserve-section p:nth-child(2) { width: 60%; }
	.reserve-section p.reservebtn { width: 40%; margin-top: -8vw; }

	.title { font-size: 6vw; margin-bottom: 2vw;  }
	.title:before, .title:after { margin-top: -3.3vw; content: ""; width: 10vw; height: 6.6vw; background-image: url(../images/m/line.png); }
	.s3 .title { font-size: 9vw; }
	a.btn1 { width: 32vw; height: 10vw; line-height: 10vw; font-size: 6vw; }
	.s2 a.btn1 { width: 32vw; height: 10vw; line-height: 10vw; font-size: 6vw; }

	/*s2*/
	.treasurebox { width: 100vw; height: 54.5vw; background-size: 100% auto; margin: 4vw auto; }
	.circle { margin: -27.2vw 0 0 -27.2vw; width: 54.5vw; height: 54.5vw; background-size: 100% auto; }


	.milestone, .social-center { width: 80%; margin: 6vw auto 0; }
	.milestone .flag { width: 100%; height: 80vw; }
	.flag li { width: 25vw; height: 35vw; margin-left: -12.5vw; padding-top: 3vw; font-size: 0.9rem; }
	.flag li:nth-child(2), .flag li:nth-child(4) { padding-top: 4vw; }

	.pic { width: 18vw; height: 15.3vw; margin: 1vw auto; }
	.num { font-size: 4vw; text-shadow: 0 0 5px #835c11, 0 0 5px #835c11, 0 0 5px #835c11; line-height: 1.4; color: #fff; font-weight: bold; }
	.name { line-height: 1.2; padding-top: 0.5vw; font-size: 2.4vw; }

	.reached .achieved-icon { margin: -2.7vw 0 0 -9vw; width: 18vw; height: 5.5vw; }
	.moreinfo { bottom: 23vw; padding: 1vw; line-height: 1; font-size: 3vw; }
	.moreinfo:after { width: 2vw; height: 2vw; bottom: -1.2vw; margin-left: -1.3vw; }
	.flag li:nth-child(2) .moreinfo, .flag li:nth-child(4) .moreinfo { bottom: 20vw; }

	.progress { margin-top: -0.9vw; }
	.progress li { height: 1.6vw; border: 0.1vw solid #b18a2a; }
	.progress li:nth-child(1), .progress li:nth-child(1) p { border-radius: 1vw 0 0 1vw; }
	.progress li:nth-last-child(1), .progress li:nth-last-child(1) p { border-radius: 0 1vw 1vw 0; }

	.progress li:before { left: -3.5vw; margin-top: -3.5vw; width: 7vw; height: 7vw; line-height: 7vw; font-size: 2vw;  }

	.progress li p:after { width: 2vw; height: 4vw; right: -1vw; margin-top: -2vw; }


	/*s3*/
	.social-center { width: 100%; }
	.social-center li { width: 46vw; height: 62.3vw; margin: 0 1vw; padding-left: 0.6vw; }
	.social-center li > p { line-height: 8.6vw; text-shadow: 0 0 5px #805415, 0 0 5px #805415, 0 0 5px #805415; font-size: 4vw; }
	.fb-section, .discord-section iframe { width: 45.2vw; height: 52.8vw; overflow: hidden; }

	.footer { padding: 3vw 0; font-size: 2vw }
	.footer a { margin: 0 0.5vw; font-size: 2vw }

	/*side nav*/
	.sidebar { right: 5vw; bottom: 25vw; }
	.sidenav { display: none; }
	.reserve-now { width: 20vw; height: 23.7vw; right: -4vw; bottom: -24vw; }

	/*pop video*/
	.videocont a.close { right: 0; top: -8vw; width: 8vw; height: 8vw; line-height: 8vw; }
	.popvideo iframe, .videocont { width: 100vw; height: 56.2vw; margin: 0 auto; }
	.popvideo { margin-top: -28.1vw; }


	/*box*/
	.msg h3 { font-size: 5vw; }
	.msgbox { width: 90vw; padding: 4vw 0; font-size: 1.2vw; }
	a.close { right: 2vw; top: 2vw; width: 6vw; height: 6vw; line-height: 6vw; font-size: 8vw; }
	.msg .msgcont { width: 80%; padding: 2vw 0; margin: 0 auto; line-height: 1.4;font-size: 3.6vw; line-height: 1.4; }
	.rwdimg { padding: 3vw 0; }
	.rwdimg img { width: 24vw; }
	.msghint { /*padding-bottom: 2vw;*/ font-size: 1.1rem; }

	#discordintro .msgbox { width: 96vw; }
	#discordintro .msg .msgcont { width: 96%;  }

	.btn2 { width: 36vw; height: 12vw; line-height: 12vw; font-size: 4.4vw; }
	#discordintro .btn2 { bottom: -6vw; margin-left: -18vw; }
}



@keyframes turn
{
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}