:root {
	--main-color: #1f6076;
	--minor-color: #240b06
}

html {
	font-size: 93.9%
}

body {
	margin: 0;
	padding: 0;
	font-size: 1rem;
	font-family: Arial, 'Microsoft JhengHei'
}

h1,
h2,
h3,
h4,
h5 {
	color: var(--main-color);
	font-weight: 700
}

p {
	font-size: 1.3rem;
	color: var(--minor-color)
}

button {
	box-shadow: none !important;
	outline: none !important
}

.body-wrap {
	position: relative;
	margin: 0 auto;
	overflow: hidden;
	width: 100%
}

#header img {
	position: fixed;
	width: 100%;
	top: 0;
	z-index: -1
}

#content .bg {
	margin-top: 31vw;
	margin-bottom: 38vw;
	padding-top: 52px;
	padding-bottom: 100px;
	background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #fff 3%, #fff 97%, rgba(255, 255, 255, 0) 100%)
}

#content .bg-inner {
	position: relative;
	margin: 0 auto;
	overflow: hidden;
	width: 100%
}

#content .bg-inner .circle {
	display: block;
	width: 73%;
	height: 100%;
	margin-left: 14vw
}

#content .picture img {
	width: 31%;
	overflow: hidden;
}

#content .picture .pic {
	width: 100%
}

#content .picture .pic>a {
	display: block
}

#content div.pic:nth-child(1) {
	position: absolute;
	top: .8%;
	left: 16.5%
}

#content div.pic:nth-child(2) {
	position: absolute;
	top: 11.9%;
	left: 53.8%
}

#content div.pic:nth-child(3) {
	position: absolute;
	top: 23%;
	left: 16.5%
}

#content div.pic:nth-child(4) {
	position: absolute;
	top: 34.2%;
	left: 53.5%
}

#content div.pic:nth-child(5) {
	position: absolute;
	top: 45.2%;
	left: 16.5%
}

#content div.pic:nth-child(6) {
	position: absolute;
	top: 56.3%;
	left: 53.2%
}

#content div.pic:nth-child(7) {
	position: absolute;
	top: 67.5%;
	left: 16.5%
}

#content div.pic:nth-child(8) {
	position: absolute;
	top: 78.8%;
	left: 53.5%
}

#content div.pic:nth-child(9) {
	position: absolute;
	top: 89.9%;
	left: 16.5%
}

#content div.pic:nth-child(10) {
	position: absolute;
	top: 91%;
	left: 55.5%
}

#content .bg-inner .start img {
	width: 25%;
}

#content .bg-inner .start a {
	display: inline
}

#content .bg-inner .start a:active,
#content .bg-inner .start a:active:focus {
	background: #faebd7;
	border: 5px solid #f3e4d0;
	border-radius: 8px
}

#content .bg-inner h1 {
	font-size: 4vw;
	letter-spacing: 1.5px
}

#content .bg-inner h1>small {
	font-size: 80%
}

#content .bg-inner p {
	font-size: 2.8vw;
	letter-spacing: 1px;
	line-height: 1.7;
	margin-bottom: 0
}

#content .start .start-btn {
	width: 100%
}

#content div.start-btn:nth-child(odd) {
	left: 20%
}

#content div.start-btn:nth-child(even) {
	left: 57%
}

#content div.start-btn:nth-child(1) {
	position: absolute;
	top: 8.9%;
}

#content div.start-btn:nth-child(2) {
	position: absolute;
	top: 19.9%
}

#content div.start-btn:nth-child(3) {
	position: absolute;
	top: 31.1%;
}

#content div.start-btn:nth-child(4) {
	position: absolute;
	top: 42.2%;
}

#content div.start-btn:nth-child(5) {
	position: absolute;
	top: 53.3%;
}

#content div.start-btn:nth-child(6) {
	position: absolute;
	top: 64.4%;
}

#content div.start-btn:nth-child(7) {
	position: absolute;
	top: 75.6%;
}

#content div.start-btn:nth-child(8) {
	position: absolute;
	top: 86.8%;
}

#content div.start-btn:nth-child(9) {
	position: absolute;
	top: 97.9%;
}

#content div.item:nth-child(odd) {
	left: 52%
}

#content div.item:nth-child(even) {
	left: 8%;
}

#content div.item:nth-child(even) .title {
	text-align: end;
	margin-right: 2vw;
}

#content div.item:nth-child(1) {
	position: absolute;
	top: 0%
}

#content div.item:nth-child(2) {
	position: absolute;
	top: 12%;
}

#content div.item:nth-child(3) {
	position: absolute;
	top: 23.5%
}

#content div.item:nth-child(4) {
	position: absolute;
	top: 34.5%;
}

#content div.item:nth-child(5) {
	position: absolute;
	top: 45%
}

#content div.item:nth-child(6) {
	position: absolute;
	top: 56.8%
}

#content div.item:nth-child(7) {
	position: absolute;
	top: 67%
}

#content div.item:nth-child(8) {
	position: absolute;
	top: 79%
}

#content div.item:nth-child(9) {
	position: absolute;
	top: 89.5%
}

#content .game-content .description {
	width: 43vw;
	display: flex;
	flex-direction: column
}

#content .game-content .title>h1:before,
#content .game-content .title>h1:after {
	font-family: "Font Awesome 5 Free";
	display: inline-block;
}

#content .game-content .item:nth-child(odd) .title>h1:before {
	content: '\f0d9';
	margin-right: 10px
}

#content .game-content .item:nth-child(even) .title>h1:after {
	content: '\f0da';
	margin-left: 10px
}

#content div.item:nth-child(7)>div:nth-child(2) {
	width: 40vw
}

#content .game-content .description button {
	font-size: 3vw;
	padding: 3px 10px;
	letter-spacing: 1px
}

footer {
	position: fixed;
	width: 100%;
	bottom: 0;
	height: 100%;
	background: url(../../img/pattern/footer.png) no-repeat center bottom;
	background-size: contain;
	z-index: -1
}

.modal-title {
	font-size: 1.35rem;
	letter-spacing: 1.5px
}

.modal-body p {
	font-size: 1.25rem;
	letter-spacing: 1px;
	line-height: 1.8
}

.modal-body p span {
	color: #c73e1d;
}

@media (max-width: 450px) {
	#content .bg {
		margin-top: 45vw
	}

	#content div.start-btn:nth-child(odd) {
		left: 12.5%
	}

	#content div.start-btn:nth-child(even) {
		left: 58.5%
	}

	#content div.item:nth-child(even) .title {
		margin-right: 0;
	}

	#content div.item:nth-child(2n) {
		left: 6%;
	}

	#content .bg-inner .start img {
		width: 28%
	}

	#content .game-content .description button {
		font-size: 4vw
	}

	#content div.item:nth-child(1)>div:nth-child(2)>p:nth-child(2) {
		margin-top: -4vw
	}

	#content div.item:nth-child(5)>div:nth-child(2)>p:nth-child(2) {
		margin-top: -4vw
	}

	#content div.item:nth-child(5)>div:nth-child(2) {
		margin-top: -6px
	}

	#content div.pic:nth-child(odd) {
		left: 3%
	}

	#content .bg-inner h1 {
		font-size: 5vw
	}

	#content .bg-inner p {
		font-size: 3.2vw;
		line-height: 1.6
	}

	#content .bg-inner .circle {
		display: block;
		width: 100%;
		height: 100%;
		margin-left: 0
	}

	#content .picture img {
		width: 43%
	}

	#content div.pic:nth-child(1) {
		position: absolute;
		top: .8%;
		left: 3%
	}

	#content div.item:nth-child(odd) {
		left: 52%;
	}

	#content div.item:nth-child(1) {
		position: absolute;
		top: 1%
	}

	#content div.item:nth-child(2) {
		position: absolute;
		top: 11.8%;
	}

	#content div.item:nth-child(3) {
		position: absolute;
		top: 23.5%;
	}

	#content div.item:nth-child(4) {
		position: absolute;
		top: 34.5%;
	}

	#content div.item:nth-child(6) {
		position: absolute;
		top: 57%;
	}

	#content div.item:nth-child(7) {
		position: absolute;
		top: 67%;
	}

	#content div.item:nth-child(8) {
		position: absolute;
		top: 79.5%;
	}

	#content div.item:nth-child(9) {
		position: absolute;
		top: 89.3%;
	}
}

@media (max-width: 331px) {
	#content div.item:nth-child(1)>div:nth-child(2)>p:nth-child(2) {
		margin-top: -12vw
	}

	#content .bg-inner .instruction {
		margin-top: 0.5vw;
	}

	#content div.item:nth-child(1) {
		top: 0%;
	}

	#content div.item:nth-child(3) {
		top: 23%;
	}

	#content div.item:nth-child(4) {
		top: 34.5%;
	}

	#content div.item:nth-child(6) {
		top: 57%;
	}

	#content div.item:nth-child(8) {
		top: 79%;
	}

	#content div.item:nth-child(5)>div:nth-child(2)>p:nth-child(2) {
		margin-top: -12vw
	}

	#content div.item:nth-child(7)>div:nth-child(2)>p:nth-child(2) {
		margin-top: -11.5vw
	}

	#content div.item:nth-child(9) {
		top: 89.4%;
	}

	#content div.item:nth-child(9)>div:nth-child(2) {
		margin-top: -6px
	}

}