@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;700;900&family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap') html {
	overflow-y: scroll;
	margin: 0;
}

html {
	height: auto;
	background-color: #cef;
}

body {
	overflow: hidden;
}

button {
	outline: none;
}

.nav {
	width: 95%;
	margin: auto;
}

.nav .logo {
	max-height: 30px;
	margin-top: 8px;
	margin-left: 1rem;
}

.navall {
	padding: 5px 0px 5px 0px;
	background: #fff;
	box-shadow: 0px 1px 2px 0px rgb(108 108 108 / 20%);
	position: relative;
	width: 100%;
	z-index: 1;
}

#mobile_nav {
	display: none;
	float: right;
	margin-right: 1rem;
	border: 0px;
	height: 40px;
	background: transparent;
}

#pc_nav {
	display: block;
	float: right;
	margin-right: 1rem;
}

.navLink {
	width: 100%;
	float: none;
}

.navLink a {
	margin-left: 1.25rem;
	padding-top: 15px;
	display: inline-block;
	font-size: 1rem;
	cursor: pointer;
	text-decoration: none;
}

@media (max-width: 600px) {
	#mobile_nav {
		display: block;
	}
	#pc_nav {
		display: none;
		float: none;
		margin: auto;
	}
	.navLink a {
		width: 100%;
		text-align: center;
		padding: 1rem 0rem;
		margin: auto;
	}
}

body {
	overflow: hidden;
	height: 100%;
}

a,
a:link,
a:hover {
	cursor: pointer;
	color: #666666;
}

img {
	outline: none;
}

html {
	overflow-x: hidden;
	background-image: url('../images/bg.png');
	background-repeat: repeat;
}

.content {
	position: relative;
	z-index: 600;
}

.lefttop_c {
	position: absolute;
	left: 0;
	top: 3rem;
	z-index: 300;
}

.leftbottom_c {
	position: fixed;
	left: 0;
	bottom: -1rem;
	z-index: 300;
}

.righttop_c {
	position: absolute;
	right: 0;
	top: 3rem;
	z-index: 300;
}

.rightbottom_c {
	position: fixed;
	right: 0;
	bottom: -1rem;
	z-index: 300;
}

div.pi {
	float: left;
	width: 200px;
	height: 200px;
	background: red;
	-webkit-animation-name: test;
	-webkit-animation-duration: 10s;
	-webkit-animation-iteration-count: 2;
	-webkit-animation-direction: alternate;
	-webkit-animation-timing-function: steps(1, end);
}

.love {
	animation: love 2s infinite steps(1);
	animation-delay: 0s;
	display: block;
	width: 220px;
	height: 300px;
	background-image: url('../images/love.png');
	background-repeat: no-repeat;
	background-position: 0 0px;
	background-size: cover;
}

@keyframes love {
	0% {
		background-position: 0 0px;
	}
	50% {
		background-position: 0 -300px;
	}
	100% {
		background-position: 0 0px;
	}
}

.headlinediv {
	padding-top: 2.5rem;
}

.headline {
	display: inline-block;
}

.headline_m {
	display: none;
}

.letsplayagame {
	width: 100%;
	text-align: center;
	padding-top: 2rem;
	display: flex;
	margin: auto;
	max-width: 500px;
	align-items: center;
	flex-direction: column;
	justify-content: space-between;
	height: 80px;
}

.game {
	display: inline-block;
}

.game_m {
	display: none;
}

.arrow {
	animation: arrow 1s infinite steps(1);
	animation-delay: 0s;
	display: inline-block;
	width: 33px;
	height: 24px;
	background-image: url('../images/arrow.png');
	background-repeat: no-repeat;
	background-position: 0 0px;
}

.card {
	display: flex;
	max-width: 520px;
	justify-content: space-around;
	margin: auto;
	padding-top: 1rem;
}

.dare {
	animation: dare 2s infinite steps(1);
	animation-delay: 1s;
	display: block;
	width: 220px;
	height: 300px;
	background-image: url('../images/dare.png');
	background-repeat: no-repeat;
	background-position: 0 0px;
	background-size: cover;
}

.cardword {
	padding: 1rem 0;
	text-align: center;
}

.title {
	display: inline-block;
}

.title_m {
	display: none;
}

.loveword {
	display: inline-block;
}

.loveword_m {
	display: none;
}

.dareword {
	display: inline-block;
}

.dareword_m {
	display: none;
}

.notice {
	max-width: 560px;
	margin: auto;
	padding: 3rem 0 3rem 0;
	z-index: 400;
	position: relative;
	font-size: 0.75rem;
	color: #3f3f3f;
	line-height: 1.25rem;
}

.notice h5 {
	font-size: 0.875rem;
	text-align: center;
	margin-bottom: 0.75rem;
}

.notice ul li {
	width: 80%;
	margin: auto;
	list-style-type: decimal;
	margin-bottom: 0.5rem;
	text-align: left;
}

.relativebutton {
	display: flex;
	max-width: 560px;
	margin: auto;
	padding: 0rem 0 2rem 0;
	justify-content: center;
}

.relativebutton a {
	display: inline-block;
	padding: 1rem;
}

.connect {
	display: flex;
	max-width: 560px;
	margin: auto;
	padding: 0rem 0 2rem 0;
	font-size: 0.75rem;
	color: #3f3f3f;
	line-height: 1.25rem;
	justify-content: center;
	text-align: center;
}

.shakeLeftRight_c1 {
	animation: shakeLeftRight_c1 30s linear infinite alternate;
}

.shakeLeftRight_c2 {
	animation: shakeLeftRight_c2 20s linear infinite alternate;
}

.shakeLeftRight_c3 {
	animation: shakeLeftRight_c3 20s linear infinite alternate;
}

.shakeLeftRight_Q {
	animation: shakeLeftRight_c3 25s linear infinite alternate;
}

.shakeTopBottom_B {
	animation: shakeTopBottom_B 10s linear infinite alternate;
}

.shakeTopBottom_A {
	animation: shakeTopBottom_A 15s linear infinite alternate;
}


/*
.shakeLeftRight_c1 { 
  -webkit-animation-name: shake; 
animation-name: shake;	

    -webkit-animation-duration: 10s; 
    animation-duration: 10s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-timing-function: linear; 
    animation-timing-function: linear; 
    animation-iteration-count:infinite; 
    -webkit-animation-iteration-count:infinite;
	  animation: shakeLeftRight_c1 20s linear infinite alternate;
} 
}*/

@-webkit-keyframes shakeLeftRight_c1 {
	0%,
	100% {
		-webkit-transform: translateX(0);
	}
	10%,
	30%,
	50%,
	70%,
	90% {
		-webkit-transform: translateX(-25px);
	}
	20%,
	40%,
	60%,
	80% {
		-webkit-transform: translateX(25px);
	}
}

@keyframes shakeLeftRight_c1 {
	0%,
	100% {
		transform: translateX(0);
	}
	10%,
	30%,
	50%,
	70%,
	90% {
		transform: translateX(-25px);
	}
	20%,
	40%,
	60%,
	80% {
		transform: translateX(25px);
	}
}

@-webkit-keyframes shakeLeftRight_c2 {
	0%,
	100% {
		-webkit-transform: translateX(0);
	}
	10%,
	30%,
	50%,
	70%,
	90% {
		-webkit-transform: translateX(-10px);
	}
	20%,
	40%,
	60%,
	80% {
		-webkit-transform: translateX(10px);
	}
}

@keyframes shakeLeftRight_c2 {
	0%,
	100% {
		transform: translateX(0);
	}
	10%,
	30%,
	50%,
	70%,
	90% {
		transform: translateX(-10px);
	}
	20%,
	40%,
	60%,
	80% {
		transform: translateX(10px);
	}
}

@-webkit-keyframes shakeLeftRight_c3 {
	0%,
	100% {
		-webkit-transform: translateX(0);
	}
	10%,
	30%,
	50%,
	70%,
	90% {
		-webkit-transform: translateX(-30px);
	}
	20%,
	40%,
	60%,
	80% {
		-webkit-transform: translateX(30px);
	}
}

@keyframes shakeLeftRight_c3 {
	0%,
	100% {
		transform: translateX(0);
	}
	10%,
	30%,
	50%,
	70%,
	90% {
		transform: translateX(-30px);
	}
	20%,
	40%,
	60%,
	80% {
		transform: translateX(30px);
	}
}

@-webkit-keyframes shakeLeftRight_Q {
	0%,
	100% {
		-webkit-transform: translateX(0);
	}
	10%,
	30%,
	50%,
	70%,
	90% {
		-webkit-transform: translateX(-10px);
	}
	20%,
	40%,
	60%,
	80% {
		-webkit-transform: translateX(10px);
	}
}

@keyframes shakeLeftRight_Q {
	0%,
	100% {
		transform: translateX(0);
	}
	10%,
	30%,
	50%,
	70%,
	90% {
		transform: translateX(-10px);
	}
	20%,
	40%,
	60%,
	80% {
		transform: translateX(10px);
	}
}

@-webkit-keyframes shakeTopBottom_B {
	0%,
	100% {
		-webkit-transform: translateY(0);
	}
	10%,
	30%,
	50%,
	70%,
	90% {
		-webkit-transform: translateY(-15px);
	}
	20%,
	40%,
	60%,
	80% {
		-webkit-transform: translateY(5px);
	}
}

@keyframes shakeTopBottom_B {
	0%,
	100% {
		transform: translateY(0);
	}
	10%,
	30%,
	50%,
	70%,
	90% {
		transform: translateY(-15px);
	}
	20%,
	40%,
	60%,
	80% {
		transform: translateY(5px);
	}
}

@-webkit-keyframes shakeTopBottom_A {
	0%,
	100% {
		-webkit-transform: translateY(0);
	}
	10%,
	30%,
	50%,
	70%,
	90% {
		-webkit-transform: translateY(-10px);
	}
	20%,
	40%,
	60%,
	80% {
		-webkit-transform: translateY(10px);
	}
}

@keyframes shakeTopBottom_A {
	0%,
	100% {
		transform: translateY(0);
	}
	10%,
	30%,
	50%,
	70%,
	90% {
		transform: translateY(-10px);
	}
	20%,
	40%,
	60%,
	80% {
		transform: translateY(10px);
	}
}

.A {
	position: absolute;
	top: 4rem;
	width: 300px;
	text-align: center;
	padding: 0 0rem 0 5rem;
	left: 3.5%;
}

.c1 {
	position: relative;
	top: 200px;
	left: -240px;
}

.c2 {
	top: 250px;
	position: relative;
	left: -100px;
}

.c3 {
	position: relative;
	right: -200px;
}

.Q {
	width: 250px;
	text-align: center;
}

.q2 {
	position: relative;
	top: 1rem;
}

.B {
	position: absolute;
	top: 6rem;
	width: 300px;
	padding: 0 3rem 0 0rem;
	right: 3.5%;
}

@keyframes dare {
	0% {
		background-position: 0 0px;
	}
	50% {
		background-position: 0 -300px;
	}
	100% {
		background-position: 0 0px;
	}
}

@keyframes arrow {
	0% {
		background-position: 0 0px;
	}
	50% {
		background-position: 0 -30px;
	}
	100% {
		background-position: 0 0px;
	}
}

@-webkit-keyframes mover {
	0% {
		transform: translateY(1rem);
	}
	100% {
		transform: translateY(2.6rem);
	}
}

@media (max-width: 1024px) {
	.A,
	.B {
		position: fixed;
	}
	.out,
	.lvl1,
	.lvl2 {
		width: fit-content !important;
		height: fit-content !important;
		border: 0 !important;
		padding: 0;
		margin: 0;
	}
	.Re-editNoteAndIdeaWrap {
		transform: initial !important;
		top: 3rem !important;
		overflow-y: scroll !important;
		max-height: initial !important;
	}
	.popup .alertBtnSet {
		position: fixed !important;
		bottom: 0px !important;
	}
	.leftbottom_c,
	.rightbottom_c,
	.lefttop_c,
	.righttop_c,
	.window_X,
	.Q,
	.c2 {
		display: none;
	}
	.content {
		width: 90%;
		text-align: center;
		margin: auto;
	}
	.popupTitle {
		display: inline-block;
		font-size: 1.25rem;
		font-weight: 700;
		position: absolute;
		top: -1rem;
		left: 1.5rem;
		z-index: 1;
		width: 95%;
	}
}

@media (max-width: 769px) {
	.letsplayagame {
		padding-top: 0rem;
		height: 70px;
	}
	.leftbottom_c,
	.rightbottom_c,
	.lefttop_c,
	.righttop_c,
	.Q,
	.c2 {
		display: none;
	}
	.content {
		width: 90%;
		text-align: center;
		margin: auto;
	}
	.love {
		width: 147px;
		height: 200px;
		background-image: url('../images/love_m.png');
	}
	.card {
		display: flex;
		max-width: 520px;
		justify-content: space-around;
		margin: auto;
		padding-top: 1rem;
	}
	.dare {
		width: 147px;
		height: 200px;
		background-image: url('../images/dare_m.png');
	}
	.loveword {
		display: none;
	}
	.loveword_m {
		display: inline-block;
		max-width: 67px;
	}
	.dareword {
		display: none;
	}
	.dareword_m {
		display: inline-block;
		max-width: 67px;
	}
	@keyframes love {
		0% {
			background-position: 0 0px;
		}
		50% {
			background-position: 0 -200px;
		}
		100% {
			background-position: 0 0px;
		}
	}
	@keyframes dare {
		0% {
			background-position: 0 0px;
		}
		50% {
			background-position: 0 -200px;
		}
		100% {
			background-position: 0 0px;
		}
	}
}

@media (max-width: 600px) {
	.headline {
		display: none;
	}
	.headline_m {
		display: inline-block;
		width: 220px;
	}
	.title {
		display: none;
	}
	.title_m {
		display: inline-block;
		width: 300px;
	}
	.game {
		display: none;
	}
	.game_m {
		display: inline-block;
		width: 266px;
	}
}