.clearfix {
	clear: both;
}
body {
	font-family: "Fredoka One","cursive","Noto Sans","·L³n¥¿¶ÂÅé"; background-color: rgb(217, 164, 96);
}
img {
	cursor: move;
}
.start {
	left: 0px; top: 0px; right: 0px; bottom: 0px; position: fixed; z-index: 100; background-color: hsla(0, 0%, 0%, 0.5);
}
.welcome .welcome_bg {
	left: 50%; top: 50%; width: 900px; position: absolute; transform: translate(-50%, -50%); object-fit: contain; -webkit-transform: translate(-50%, -50%);
}
.btn {
	padding: 0px; border: 0px currentColor; transition:0.3s; border-image: none; left: 50%; text-align: center; position: absolute; z-index: 999; cursor: pointer; transform: translate(-50%, -50%); background-color: transparent; -webkit-transform: translate(-50%, -50%); -webkit-transition: all ease .3s;
}
.btn:hover {
	transform: translate(-50%, -65%);
}
.btn-start {
	top: 65%;
}
.btn-back {
	top: 75%;
}
.btn img {
	cursor: pointer;
}
.wrapper {
	overflow: hidden;
}
.wrapper::before {
	background: url("../_images/bg.jpg") no-repeat 50% 50% / cover; left: 50%; width: 100%; height: 100%; position: fixed; content: ""; transform: translateX(-50%);
}
header {
	margin: 0px auto; width: 100%; position: relative;
}
.container {
	margin: 0px auto; width: 100%; position: relative;
}
.one {
	background: url("../_images/shop-top.png") repeat-x 0px 0px; width: 100%; height: 165px; position: relative;
}
.one h1 {
	margin: -0.06rem; padding: 0px; border: 0px currentColor; border-image: none; width: 0.06rem; height: 0.06rem; overflow: hidden; position: absolute; clip: rect(0px, 0px, 0px, 0px);
}
.main {
	width: 100%; height: calc(100% - 85px); overflow: hidden; padding-bottom: 250px; clear: both; position: relative;
}
.timebox::before {
	left: 20px; top: 18px; width: 54px; height: 50px; position: absolute; z-index: 2; content: ""; background-image: url("../_images/icon_time.png"); background-repeat: no-repeat; background-size: contain;
}
#time_text {
	top: 23px; right: 30px; color: rgb(235, 104, 112); letter-spacing: 2.2px; font-size: 2.6em; position: absolute;
}
.title {
	margin: 20px auto 10px; width: 340px;
}
.flex {
	padding: 0px 130px; display: flex;
}
.right-light {
	top: -50px; position: relative;
}
.lampshade {
	background: url("../_images/lampshade.png") no-repeat 0px 0px; width: 100px; height: 110px;
}
.light {
	background: url("../_images/light.png") no-repeat 0px 0px; animation:light 5s infinite; left: -15px; top: 110px; width: 130px; height: 250px; position: absolute;
}
.restart {
	background: url("../_images/restart.png") no-repeat 0px 0px; left: -30px; width: 160px; height: 165px; bottom: -55px; position: absolute; cursor: pointer;
}
.center {
	margin: 40px auto 0px; width: 1080px;
}
.borderColor {
	background-position: center; width: 570px; height: 400px; margin-right: 100px; position: relative; background-image: url("../_images/borderColor.jpg"); background-repeat: no-repeat; background-size: contain;
}
.bookcase {
	padding: 10px; left: 50%; top: 50%; width: 510px; height: 340px; position: absolute; transform: translate(-50%, -50%);
}
.flex-center {
	display: flex; flex-wrap: wrap; justify-content: center; -webkit-box-pack: center;
}
.case-sea {
	background: rgb(242, 190, 134);
}
.case-land {
	background: rgb(129, 112, 84); border: 3px solid rgb(75, 57, 26); border-image: none;
}
.navbar {
	width: 100%; text-align: center; margin-bottom: 10px;
}
.book {
	width: calc(100% /3); height: calc(100% /2); display: inline-flex; flex-wrap: wrap; justify-content: center; -webkit-box-pack: center;
}
.box-bg {
	width: 100%; height: 100%;
}
.box-bg1 {
	background: url("../_images/puzzle-bg_01.jpg") no-repeat 0px 0px / contain;
}
.box-bg2 {
	background: url("../_images/puzzle-bg_02.jpg") no-repeat 0px 0px / contain;
}
.box-bg3 {
	background: url("../_images/puzzle-bg_03.jpg") no-repeat 0px 0px / contain;
}
.box-bg4 {
	background: url("../_images/puzzle-bg_04.jpg") no-repeat 0px 0px / contain;
}
.box-bg5 {
	background: url("../_images/puzzle-bg_05.jpg") no-repeat 0px 0px / contain;
}
.box-bg6 {
	background: url("../_images/puzzle-bg_06.jpg") no-repeat 0px 0px / contain;
}
.gallery {
	margin: 30px auto 0px; width: 1080px; display: flex; flex-wrap: wrap;
}
.gallery > li {
	display: inline-block;
}
.bottom-book {
	margin-right: 10px; z-index: 99;
}
.success {
	position: relative; background-color: transparent !important;
}
.success::after {
	background: url("../_images/ok.png") no-repeat 0px 0px; left: 50%; top: 50%; width: 100px; height: 70px; position: absolute; z-index: 9; content: ""; transform: translate(-50%); -webkit-transform: translate(-50%);
}
.navbox .nav > li {
	margin-left: 35px; float: left;
}
.boo {
	left: 24%; top: 0px; width: 272px; height: 1010px; right: inherit; position: absolute;
}
.boo.b2 {
	left: inherit; width: 220px; height: 815px; right: 20%;
}
.boomove {
	animation:mymove 2s infinite; -webkit-animation: mymove 2s infinite;
}
.sa-confirm-button-container {
	float: left;
}
button.cancel {
	float: right;
}
button.confirm {
	float: left;
}
.btn-back-home {
	top: 20vh; right: 20px; position: fixed; z-index: 99;
}
.btn-back-home a {
	display: block;
}
.sr-only {
	padding: 0px; border: 0px currentColor; border-image: none; width: 1px; height: 1px; overflow: hidden; white-space: nowrap; position: absolute; clip: rect(0px, 0px, 0px, 0px); -webkit-clip-path: inset(50%);
}
.sr-only-focusable:active {
	width: auto; height: auto; overflow: visible; white-space: normal; position: static; clip: auto; clip-path: none; -webkit-clip-path: none;
}
.sr-only-focusable:focus {
	width: auto; height: auto; overflow: visible; white-space: normal; position: static; clip: auto; clip-path: none; -webkit-clip-path: none;
}
.puzzle {
	left: 100px; top: 50px; position: relative;
}
.puzzleWord {
	background: url("../_images/puzzle-bg.png") no-repeat 0px 0px; width: 190px; height: 140px; position: absolute;
}
.puzzleWord span {
	left: 30px; top: 70px; color: rgb(235, 104, 112); overflow: hidden; font-size: 2.6em; font-weight: bold; white-space: nowrap; position: absolute; transform: rotate(-8deg);
}
.timebox {
	background: url("../_images/time_bg.png") no-repeat 0px 0px; top: 50px; width: 240px; height: 86px; right: 40px; position: absolute;
}
.left_flower {
	background: url("../_images/left_flower.png") no-repeat 0px 0px; left: -65px; width: 530px; height: 230px; bottom: -10px; position: absolute;
}
.right_flower {
	background: url("../_images/right_flower.png") no-repeat 0px 0px; width: 530px; height: 210px; right: -75px; bottom: -5px; position: absolute;
}
.butterfly1 {
	animation:horizontal 2s ease-in-out infinite alternate; left: 0px; top: 0px; width: 40px; height: 38px; position: absolute;
}
.butterfly2 {
	animation:horizontal 2s ease-in-out infinite alternate; left: 0px; top: 50px; width: 40px; height: 38px; position: absolute;
}
.butterfly2::after {
	background: url("../_images/butterfly2.png") no-repeat 0px 0px; animation:vertical 2s ease-in-out infinite; width: 40px; height: 38px; display: block; position: absolute; content: "";
}
.butterfly3 {
	width: 30px; height: 29px; position: absolute;
}
.butterfly4 {
	left: 0px; top: 0px; width: 30px; height: 31px; position: absolute;
}
.left_flower .butterfly1 {
	animation:horizontal-l1 3s ease-in-out infinite alternate; left: 160px; top: 18px;
}
.left_flower .butterfly1::after {
	background: url("../_images/butterfly.png") no-repeat 0px 0px; animation:vertical-l1 3s ease-in-out infinite; width: 40px; height: 38px; display: block; position: absolute; content: "";
}
.left_flower .butterfly3 {
	animation:horizontal-l3 3s infinite alternate; left: 130px; top: 130px;
}
.left_flower .butterfly3::after {
	background: url("../_images/butterfly3.png") no-repeat 0px 0px; animation:vertical-l3 2s infinite; width: 30px; height: 29px; display: block; position: absolute; content: "";
}
.left_flower .butterfly4 {
	animation:horizontal-l4 2.2s ease-in-out infinite alternate; left: 420px; top: 100px;
}
.left_flower .butterfly4::after {
	background: url("../_images/butterfly4.png") no-repeat 0px 0px; animation:vertical-l4 2.5s ease-in-out infinite; width: 30px; height: 31px; display: block; position: absolute; content: "";
}
.right_flower .butterfly2 {
	animation:horizontal-r2 2s ease-in-out infinite alternate; left: 220px; top: 10px;
}
.right_flower .butterfly2::after {
	background: url("../_images/butterfly2.png") no-repeat 0px 0px; animation:vertical-r2 2s ease-in-out infinite; width: 40px; height: 38px; display: block; position: absolute; content: "";
}
.right_flower .butterfly3 {
	animation:horizontal-r3 5s ease-in-out infinite alternate; left: 45px; top: 110px;
}
.right_flower .butterfly3::after {
	background: url("../_images/butterfly3.png") no-repeat 0px 0px; animation:vertical-r3 5s ease-in-out infinite; width: 30px; height: 29px; display: block; position: absolute; content: "";
}
.right_flower .butterfly4 {
	animation:horizontal-r4 2s ease-in-out infinite alternate; left: 360px; top: 95px;
}
.right_flower .butterfly4::after {
	background: url("../_images/butterfly4.png") no-repeat 0px 0px; animation:vertical-r4 2s ease-in-out infinite; width: 30px; height: 31px; display: block; position: absolute; content: "";
}
@media all and (max-width:1500px)
{
.puzzle {
	left: 10px;
}
.timebox {
	width: 200px; height: 73px; right: 10px; background-size: contain;
}
.timebox::before {
	width: 41px; height: 38px;
}
#time_text {
	top: 18px;
}
}
@media all and (max-width:1200px)
{
.center {
	width: auto;
}
#trash .flex {
	margin: 0px auto; padding: 65px 0px 0px; width: auto; display: flex; justify-content: center; align-items: center;
}
.puzzle {
	display: none;
}
.gallery {
	width: 550px;
}
.timebox {
	top: 10px;
}
#time_text {
	font-size: 2em;
}
.bottom-book {
	margin-right: 10px; margin-bottom: 10px;
}
.borderColor {
	margin-right: 0px;
}
.right-light {
	display: none;
}
}
@media all and (max-width:900px)
{
.welcome .welcome_bg {
	width: 100%;
}
.btn-start {
	top: 62%;
}
.btn-back {
	top: 70%;
}
.btn img {
	width: 250px; object-fit: contain;
}
}
@media all and (max-width:600px)
{
.one {
	height: 100px; background-size: contain;
}
.timebox {
	top: 25px; width: 155px; height: 55px;
}
.timebox::before {
	left: 12px; top: 11px; width: 35px; height: 35px;
}
#time_text {
	left: 55px; top: 13px;
}
.btn img {
	width: 200px;
}
.btn-start {
	top: 59%;
}
.btn-back {
	top: 65%;
}
.bookcase {
	width: 273px; height: 182px;
}
.borderColor {
	width: 320px; height: 220px;
}
.gallery {
	width: 303px;
}
.gallery img {
	width: 91px; height: 91px; object-fit: contain;
}
}
@media all and (max-width:500px)
{
.sweet-alert .sa-icon.sa-custom {
	width: 100% !important;
}
}
@media all and (max-width:400px)
{
.btn img {
	width: 150px;
}
.btn-start {
	top: 56%;
}
.btn-back {
	top: 60%;
}
}
@media all and (max-width:375px)
{
.sa-button-container {
	display: flex; flex-direction: column;
}
.sweet-alert .sa-confirm-button-container {
	padding: 0px 5px;
}
.sweet-alert button.confirm {
	margin: 15px 0px; width: 100%;
}
}