@charset "utf-8";

@import url(./reset.css);
@import url(./base.css);
@import url(./fonts.css);

/*  */

.hidden-text {
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
	-webkit-clip-path:inset(50%);
	clip-path:inset(50%);
	border:0;
	font-family: 'Pretendard-Medium';
}

::-webkit-scrollbar {
	display:none;
}
::-webkit-inner-spin-button {
	display:none;
}
html, body {
	height: calc(var(--vh, 1vh) * 100);
}
body {
	font-family: 'SUITE-Medium';
}
#confirm, #close {
	opacity:0;
	visibility:hidden;
}
#wrap {
	width:100%;
	height:100%;
}

.confirm-btn-wrap {
	display:flex;
	justify-content:center;
	align-items: center;
	width: 100%;
}

#sound-controller {
	position:fixed;
	right:68px;
	bottom:45px;
	display:inline-flex;
	flex-direction:column;
	align-items:center;
	gap:5px;
	cursor:pointer;
	filter:invert(1);
	z-index:1;
}
#sound-controller .sound-icon {
	width:54px;
	height:54px;
}
#sound-controller span {
	color:#222A30;
	font-size:22px;
	font-weight:700;
	line-height:26px;
}
#notice-wrap {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 10;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
#notice-wrap .notice-deco {
	position: absolute;
	top: 3%;
	left: 50%;
	transform: translateX(-50%);
	width: 430px;
	height: auto;
	aspect-ratio: 1 / 1;
	z-index: -1;
}
#notice-wrap .notice {
/* 	min-width: 900px;
	max-height: 660px; */
	border: 8px solid #EC303A;
	box-sizing: border-box;
	border-radius: 24px;
	background-color: var(--whiteBg);
	padding: 65px 70px 75px 94px;
	box-shadow: 0 8px 20px 0 #111111B2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 30px;
	text-align: center;
	margin-top: 2%;
}
#notice-wrap .notice-title {
	color: var(--redFontColor);
	font-size: 34px;
	font-weight: 800;
	line-height: 46px;
}
#notice-wrap .notice-list-wrap .notice-list {
	text-align:left;
	font-family: 'Pretendard-Medium';
	font-weight:400;
	display:flex;
	flex-direction:column;
	gap:25px;
}
#notice-wrap .notice-desc {
	display:flex;
	align-items:center;
	font-size:20px;
	line-height:24px;
}
#notice-wrap .notice-desc img {
	display:inline-block;
	margin-right:15px;
}

#notice-wrap .notice-desc b, #notice-wrap .notice-detail li b {
	font-weight:700;
}
#notice-wrap .notice-detail {
	margin-left:55px;
	font-size:18px;
	list-style-position:outside;
}
#notice-wrap .notice-detail li {
	line-height:32px;
	list-style-type:disc;
	margin-left:20px;
}

#content-wrap {
	width:100%;
	height:100%;
	background:url(/images/frida/game/main-bg.png) no-repeat 0 0 / 100% 100vh;
	background-color: rgba(0,0,0,.85);
	background-blend-mode: multiply;
}
#start-page {
	width:100%;
	height:100vh;
	text-align: center;
	display:flex;
	flex-direction: column;
	align-items:center;
	justify-content: center;
	gap:40px;
	position:relative;
	left:0;
	top:0;
}
#start-page #letter-wrap {
	position:absolute;
	left:50%;
	top:28%;
	transform: translateX(-50%);
	background-image: url(/images/frida/game/letter.png);
	background-repeat: no-repeat;
	background-size:100%;
	background-position: 50% 50%;
	width:17%;
	height:15%;
	animation: letterAni 3s linear infinite;
	cursor: pointer;
}
@keyframes letterAni {
	0% {background-image: url(/images/frida/game/letter.png);}
	50% {background-image: url(/images/frida/game/letter_bright.png);}
	100% {background-image: url(/images/frida/game/letter.png);}
}
#start-page #letter-wrap.moveLetter {
	animation:moveLetter 3s linear forwards;
}
@keyframes moveLetter {
	0% {
		left:50%;
		top:30%;

	}
	50% {
		top:25%;
		left:34%;
		transform: rotate(-15deg);
	}
	100% {
		left: 12%;
		top: 69%;
	}
}
#start-page .typing-effect {
	font-family: "BookkMyungjo-Lt";
	font-weight: 300;
	color: var(--typingFontColor);
	display: inline-flex;
	border: 1px solid #ec303a;
	border-left: none;
	border-right: none;
	padding: 4px 0;
}
#start-page .typing-effect .type-wrap {
	border: 1px solid #ec303a80;
	min-width: 60px;
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
}
#start-page .typing-effect .type-wrap span {
	opacity:0;
	font-size: clamp(1.75rem, 1.5769rem + 0.7692vw, 2.5rem);
}
#start-page .typing-effect .type-wrap span.show {
	opacity: 1;
	transition: opacity .3s ease-in-out;
}

#start-page .sub-title {
	font-family: "Cafe24Shiningstar";
	font-size: 28px;
	color: var(--subtitleFontColor);
	letter-spacing: 5px;
}
.fadeOut {
	animation: fadeOut 3s linear forwards;
}
@keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
}
@media screen and (max-width:575px) {
	#content-wrap {
		background:url(/images/frida/game/main-m-bg.jpg) no-repeat 0 0 / 100% calc(var(--vh, 1vh) * 100);
		background-color: rgba(0,0,0,.85);
		background-blend-mode: multiply;
	}
	#start-page {
		gap:20px;
	}
	#start-page #letter-wrap {
		width:40%;
		height:15%;
		top:49%;
	}

	@keyframes moveLetter {
		0% {
			left:50%;
			top:50%;

		}
		50% {
			left:73%;
			top:51%;
			transform: rotate(-15deg);
		}
		100% {
			left: 85%;
			top: 49%;
		}
	}
	#start-page .typing-effect {
		margin-bottom:45%;
	}
	#start-page .typing-effect .type-wrap {
		border: 1px solid #ec303a80;
		min-width: 25px;
		height: 35px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	#start-page .typing-effect .type-wrap span {
		font-size: clamp(1rem, 0.7789rem + 0.9828vw, 1.25rem);
	}
	#start-page .sub-title {
		font-size: clamp(1rem, 0.5814rem + 1.8605vw, 1.25rem);
	}
}

/* main-page */
#main-page {
	position: fixed;
	display:none;
	top:0;
	left:0;
	width:100%;
	height:100vh;
}
#main-page #letter {
	position:absolute;
	left: 12%;
	top: 69%;
	transform: translateX(-50%);
	background-image: url(/images/frida/game/letter.png);
	background-repeat: no-repeat;
	background-size:100%;
	background-position: 50% 50%;
	width:17%;
	height:15%;
	cursor: pointer;
	animation: letterAni 3s linear infinite;
}

#main-page #writer-letter {
	width:100%;
	height:100%;
	position:fixed;
	left:0;
	top:0;
	background-color: rgba(0,0,0,0.85);
	backdrop-filter: blur(4px);
	z-index: 10;
	display:none;
}

#main-page #writer-letter .letter-wrapper {
	position: relative;
	max-width: 800px;
	width:40%;
	min-width: 300px;
	height: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
#main-page .letter-wrapper .writerpad-wrapper {
	position: absolute;
	width:80%;
	left:50%;
	bottom:10%;
	transform: translateX(-50%);
	min-width: 600px;
}
#main-page .writerpad-wrapper #letter-contents {
	background-color: transparent;
	resize: none;
	border: none;
	position: absolute;
	top: 28%;
	left: 50%;
	transform: translateX(-50%);
	width: 80%;
	font-family: 'SUITE-Medium';
	font-size: 19px;
	line-height: 44px;
	height:auto;
}
textarea:focus {
	outline: none;
}
#main-page .writerpad-wrapper #counter {
	color:rgba(0,0,0,.8);
	font-size: clamp(0.625rem, 0.4583rem + 0.3472vw, 0.875rem);
	position:absolute;
	left: 9%;
	bottom: 24%;
}
#main-page .letter-wrapper .letter-back {
	width:105%;
	position:absolute;
	bottom:-9%;
	left:50%;
	transform: translateX(-50%);
	min-width: 790px;
}

#main-page .letter-wrapper .letter-front {
	width:100%;
	position:absolute;
	bottom:-20%;
	left:50%;
	transform: translateX(-50%);
	min-width:750px;
}

#main-page .letter-wrapper .btn-complete {
	position: absolute;
	left:50%;
	bottom:20px;
	transform: translateX(-50%);
}
#main-page #writed-letter {
	width:100%;
	height:100%;
	position:fixed;
	left:0;
	top:0;
	background-color: rgba(0,0,0,0.85);
	z-index: 10;
	display:none;
}

#main-page #writed-letter .writed-wrap {
	position: relative;
	max-width: 800px;
	width:40%;
	min-width: 300px;
	height: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
#main-page #writed-letter .writed-wrap .writerpad-wrapper {
	width:100%;
}
#main-page #writed-letter .writed-img {
	position: absolute;
	width:80%;
	left:50%;
	bottom:10%;
	transform: translateX(-50%);
}
#main-page #writed-letter .written-pad {
	margin: 0 auto;
	width: 540px;
	position:relative;
}
#main-page .writerpad-wrapper #writed-letter-contents {
	background-color: transparent;
	resize: none;
	border: none;
	position: absolute;
	top: 28%;
	left: 50%;
	transform: translateX(-50%);
	width: 80%;
	height:auto;
	font-family: 'SUITE-Medium';
	font-size: 17px;
	line-height: 39px;
	white-space: pre-wrap;
	word-wrap:break-word;
}

#main-page #writed-letter .btn-wrap{
	width:100%;
	display:flex;
	justify-content: center;
	align-items: center;
	gap:6px;
	position:absolute;
	left:50%;
	bottom:30px;
	transform: translateX(-50%);
}
#main-page #writer-letter .change-pad {
	width: 100%;
	position: absolute;
	display: flex;
	justify-content: center;
	gap: 280px;
	top: 16%;
}

#main-page .change-pad .prev-btn {
	width:40px;
	display:inline-block;
}
#main-page .change-pad .next-btn {
	width:40px;
	display:inline-block;
}

#send-letter {
	width:100%;
	height:100%;
	position:fixed;
	left:0;
	top:0;
	background-color: rgba(0,0,0,0.85);
	z-index: 10;
	display:none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap:40px;
}
#send-letter .send-letter-wrap {
	position: relative;
	display:flex;
	align-items: center;
	justify-content: center;
	background: url(/images/frida/game/send-letter.png) no-repeat 0 0 / 100%;
	width:880px;
	height: 560px;
}

#send-letter .send-letter {
	width:40%;
}
#send-letter .change-sticker-wrap {
	width: 20%;
	position: absolute;
	left:50%;
	top:35%;
	transform: translateX(-50%);
	border-radius: 50%;
	box-shadow:0px 8px 20px 0px rgba(17, 17, 17, 0.70);
}

#send-letter .change-sticker {
	width: 100%;
	position: absolute;
	display: flex;
	justify-content: center;
	gap: 30%;
	top: 47%;
}

#send-letter .change-sticker .prev-btn {
	width:40px;
	display:inline-block;
}

#send-letter .change-sticker .next-btn {
	width:40px;
	display:inline-block;
}

#send-letter .letter-title {
	position: absolute;
	padding:16px 20px;
	top:20px;
	font-family: 'SUITE-Medium';
	font-size: 24px;
	border:none;
	background-color:#671C1B66;
	border-radius: 4px;
}
#send-letter .letter-title::placeholder {
	color: #FFB1B1;
}
#send-letter .letter-title:focus {
	color: var(--whiteFontColor);
	border:1px solid #fff;
	outline: none;
}

#apply-wrap {
	width:100%;
	height:100%;
	position:fixed;
	left:0;
	top:0;
	background-color: rgba(0,0,0,0.85);
	z-index: 10;
	display:none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
#apply-wrap .apply-deco {
	position:absolute;
	top:0;
	left:50%;
	transform:translateX(-50%);
	width:20%;
	height:auto;
	aspect-ratio:1/1;
	z-index:-1;
	min-width: 200px;
}
#apply-wrap .apply {
	min-width: 900px;
	max-height: 660px;
	border:8px solid #EC303A;
	box-sizing: border-box;
	border-radius: 24px;
	background-color: var(--whiteBg);
	padding:65px 100px;
	box-shadow: 0 8px 20px 0 #111111B2;
	display:flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap:30px;
	text-align: center;
	margin-top:2%;
}

#apply-wrap .apply .apply-title {
	color:var(--redFontColor);
	font-size: 34px ;
	font-weight: 800;
	line-height: 46px;
}
#apply-wrap .apply .apply-info {
	width: 100%;
}
#apply-wrap .apply .apply-info ul {
	width:50%;
	margin:0 auto;
	list-style: disc;
	list-style-position: inside;
}
#apply-wrap .apply .apply-info ul li {
	text-align: left;
	display:flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 5px;
	position: relative;
}
#apply-wrap .apply .apply-info ul li:last-child {
	margin-bottom: 0;
}

#apply-wrap .apply-info input {
	border:transparent;
	box-sizing: border-box;
	background-color: #F9F6F6;
	border-radius: 4px;
	font-size: 18px;
	padding:10px 15px;
	min-width: 120px;
	outline: none;
	height: 40px;
	overflow: hidden;
}

#apply-wrap .apply-info input:focus {
	outline: none;
	border:1px solid #ec303a;
	box-sizing: border-box;
}

#apply-wrap .apply-info input::placeholder {
	font-size: 18px;
	color:#000;
	font-family: 'SUITE-Medium';
	font-weight: 500;
}
.apply-agree label {
	cursor: pointer;
}
.apply-agree label:first-child {
	margin-right: 60px;
}
.apply-agree [type="radio"] {
	margin-right:5px;
}
.apply-agree [type="radio"], .apply-agree span {
	vertical-align: middle;
}
[type="radio"] {
	appearance: none;
	background: url(/images/frida/game/check_off.png) no-repeat 0 0 / 100%;
	width:28px;
	height: 28px;
	margin:0;
}
[type="radio"]:checked {
	background: url(/images/frida/game/check_on.png) no-repeat 0 0 / 100%;
}
#apply-wrap .apply-desc p{
	font-weight: 500;
	font-size: 20px;
	line-height: 28px;
}

#apply-wrap .apply-desc small{
	font-weight: 400;
	line-height: 28px;
	font-size: 16px;
	color:var(--redFontColor);
}

#apply-wrap .apply-table {
	width:100%;
	text-align: center;
}
#apply-wrap .apply-table table {
	width: 100%;
}
#apply-wrap .apply-table tr:first-child {
	border-top:2px solid #000;
	border-bottom: 1px solid #00000030;
}
#apply-wrap .apply-table tr:last-child {
	border-bottom: 1px solid #00000030;
}
#apply-wrap .apply-table table td{
	width:calc(100% / 3);
	padding:12px 0;
}

#main-page #total-wrap {
	position:absolute;
	left:0;
	top:5%;
	width:190px;
	height:140px;
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap:10px;
	border:2px solid #983C41;
	border-radius: 0 24px 24px 0;
	background: url(/images/frida/game/totalBg.png) no-repeat 0 0 / cover;
	background-color: #BE4B51;
	color:#fff;
	cursor: pointer;
}
#total-wrap .total-text {
	font-family: 'SUIT-Medium';
	font-weight: 700;
	font-size: 20px;
}
#total-wrap #total {
	font-family: 'SUITE-Bold';
	font-weight: 800;
	font-size:80px;
}

#total-letter {
	width:100%;
	height:100%;
	position:fixed;
	left:0;
	top:0;
	background-color: rgba(0,0,0,0.85);
	z-index: 10;
	display:none;
}
#total-letter .total-letter-wrap {
	height:80%;
	margin:100px 0;
	overflow-y: auto;
}
#total-letter .letter-grid {
	display:grid;
	justify-content: center;
	align-items: center;
	grid-template-columns: repeat(3, auto);
	gap:85px;
	width:100%;
	padding:30px 0;
}
.letter-grid .letter-wrapper {
	position: relative;
	font-family: 'SUIT-Medium';
	cursor: pointer;
}
.letter-grid .letter-wrapper .letter-wrap img {
	transition: all .3s;
}
.letter-grid .letter-wrapper:hover .letter-wrap img {
	box-shadow: 0px 0px 20px 10px #d31f28de;
	;
}
.letter-grid .letter-wrap {
	max-width:252px;
	max-height:160px;
	box-shadow: 0 8px 20px #1E1919B2;
}
.letter-grid .sticker {
	position: absolute;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
	width:58px;
	height:58px;
	border-radius: 50%;
	box-shadow: 0px 8px 20px 0px #1E1919B2;
}
.letter-grid .letter-name {
	position:absolute;
	left:50%;
	top:-22px;
	transform: translateX(-50%);
	padding:7px 16px;
	font-size: clamp(1rem, 0.6674rem + 0.6938vw, 1.5rem);
	font-weight: 700;
	color:var(--redFontColor);
	background-color: var(--whiteBg);
	border-radius: 28px;
	display:inline-block;
	text-align: center;
	white-space: nowrap;
}

.letter-grid .letter-title {
	position:absolute;
	bottom:-40px;
	transform: translateX(-50%);
	left:50%;
	font-size: clamp(1.125rem, 0.7092rem + 0.8673vw, 1.75rem);
	font-weight: 400;
	color:var(--whiteFontColor);
	width:100%;
	text-align: center;
}
#total-letter .open-letter-wrap {
	display:none;
	justify-content: center;
	align-items: center;
	width:100%;
	height:100%;
}
#total-letter .open-letter-wrap .open-letter {
	width:33%;
	box-shadow: 0px 8px 20px 0px #111111B2;
	position:relative;
}
#total-letter .open-letter-wrap  .letter-rain {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: -1;
}
#total-letter .open-letter-wrap  .letter-rain > * {
	position: absolute;
	width:11.2%;
	max-width:252px;
	box-shadow: 0px 8px 20px 0px #111111B2;
}
.open-letter-wrap  .letter-rain img:first-child {
	bottom: 50%;
	left: 31%;
	rotate: 25deg;
}
.open-letter-wrap  .letter-rain img:nth-child(2) {
	bottom: 50%;
	left: 60%;
	rotate: -15deg;
}
.open-letter-wrap  .letter-rain img:nth-child(3) {
	bottom: 50%;
	left: 24%;
	rotate: 13deg;
	animation-delay: .2s;
}
.open-letter-wrap  .letter-rain img:nth-child(4) {
	bottom: 50%;
	left:65%;
	rotate: 15deg;
	animation-delay: .2s;
}
.open-letter-wrap  .letter-rain img:nth-child(5) {
	bottom: 50%;
	left: 27%;
	rotate: -23deg;
	animation-delay: .3s;
}
.open-letter-wrap  .letter-rain img:nth-child(6) {
	bottom: 50%;
	left: 61%;
	rotate: -16deg;
	animation-delay: .3s;
}
.open-letter-wrap  .letter-rain img:nth-child(7) {
	bottom: 50%;
	left: 45%;
	rotate: 25deg;
	animation-delay: .3s;
}
.open-letter-wrap  .letter-rain img:last-child {
    bottom: 50%;
	left: 64%;
	rotate: 14deg;
	animation-delay: .3s;
}
.rain {
	animation: letterRain 1s forwards alternate;
}
@keyframes letterRain {
	100% {
		bottom:-15%;
		display:none;
	}
}

.open-letter #open-letter-title {
	border:none;
	outline:none;
	background-color:transparent;
	position:absolute;
	top:23%;
	left:10%;
	font-family: 'SUITE-Medium';
	font-weight:800;
	font-size: clamp(1.5rem, 1.3333rem + 0.3472vw, 1.75rem);
}
.open-letter #open-letter-contents {
	position:absolute;
	top:28%;
	left:10%;
	font-family: 'SUITE-Medium';
	font-size:clamp(0.875rem, 0.7083rem + 0.3472vw, 1.125rem);
	color:#222;
	line-height:42px;
	width:80%;
}
.open-letter #open-letter-name {
	border:none;
	outline:none;
	background-color:transparent;
	font-family: 'SUITE-Medium';
	color:var(--redFontColor);
	font-size: clamp(0.875rem, 0.7083rem + 0.3472vw, 1.125rem);
	position:absolute;
	top:74%;
	left:10%;
}

.total-prev-btn {
	position: absolute;
	left:30px;
	top:30px;
	display:inline-block;
	width:80px;
	height:80px;
}
.close-btn {
	position: absolute;
	right:30px;
	top:30px;
	display:inline-block;
	width:80px;
	height:80px;
}

#current-letter .letter {
	position: absolute;
	width: 9%;
	max-width: 150px;
	min-width: 80px;
	cursor: pointer;
}
#current-letter .letter .sticker-wrap {
	border-radius: 50%;
}
.sticker1Ani {animation:twinkle1 3s linear infinite;}
.sticker2Ani {animation:twinkle2 3s linear infinite;}
.sticker3Ani {animation:twinkle3 3s linear infinite;}
.sticker4Ani {animation:twinkle4 3s linear infinite;}
.sticker5Ani {animation:twinkle5 3s linear infinite;}

@keyframes twinkle1 {
	0% {box-shadow:0 0 16px #FF8AC0CC;}
	50% {box-shadow:none;}
	100% {box-shadow:0 0 16px #FF8AC0CC;}
}
@keyframes twinkle2 {
	0% {box-shadow:0 0 16px #17BEDACC;}
	50% {box-shadow:none;}
	100% {box-shadow:0 0 16px #17BEDACC;}
}
@keyframes twinkle3 {
	0% {box-shadow:0 0 16px #FFEB4ECC;}
	50% {box-shadow:none;}
	100% {box-shadow:0 0 16px #FFEB4ECC;}
}
@keyframes twinkle4 {
	0% {box-shadow:0 0 16px #FF7550CC;}
	50% {box-shadow:none;}
	100% {box-shadow:0 0 16px #FF7550CC;}
}
@keyframes twinkle5 {
	0% {box-shadow:0 0 16px #8AD63ECC;}
	50% {box-shadow:none;}
	100% {box-shadow:0 0 16px #8AD63ECC;}
}
.recentletter1 {
	top:7%;
	left:32%;
}
.recentletter2 {
	top:10%;
	left:43%;
}
.recentletter3 {
	top:7%;
	left:55%;
}
.recentletter4 {
	top:10%;
	left:66%;
}
.recentletter5 {
	top:29%;
	left:39%;
}
.recentletter6 {
	top:26%;
	left:57%;
}
#current-letter .letter .name {
	position: absolute;
	left:50%;
	top:-15px;
	transform: translateX(-50%);
	padding: 7px 16px;
	font-family: 'SUITE-Bold';
	font-weight: 700;
	font-size: clamp(0.75rem, 0.6346rem + 0.5128vw, 1.25rem);
	white-space: nowrap;
	border-radius: 20px;
	background-color: #17BEDA;
	box-shadow: 0 0 16px #17BEDACC;
}
#current-letter .letter .name span {
	display:inline-block;
	text-align: center;
}

.current-letter-wrap {
	width:100%;
	height:100%;
	position:fixed;
	left:0;
	top:0;
	background-color: rgba(0,0,0,0.85);
	z-index: 10;
	display:none;
	align-items: center;
	justify-content: center;
}

.current-letter-wrap .open-current-letter {
	width:30%;
	min-width: 500px;
	box-shadow: 0px 8px 20px 0px #111111B2;
	position:relative;
}
.current-letter-wrap #current-letter-title {
	border:none;
	outline:none;
	background-color:transparent;
	position:absolute;
	top:22%;
	left:9%;
	font-family: 'SUITE-Bold';
	font-weight:800;
	font-size: clamp(1.5rem, 1.3333rem + 0.3472vw, 1.75rem);
}
.current-letter-wrap #current-letter-content {
	position:absolute;
	top:28%;
	left:10%;
	font-family: 'SUITE-Medium';
	font-size:15px;
	color:#222;
	line-height:34px;
	width:380px;
	padding:0;
}
.current-letter-wrap #current-letter-name {
	border:none;
	outline:none;
	background-color:transparent;
	font-family: 'SUITE-Medium';
	color:var(--redFontColor);
	font-size: clamp(0.875rem, 0.7083rem + 0.3472vw, 1.125rem);
	position:absolute;
	top:74%;
	left:10%;
}
@media screen and (min-width:1023px) {
	#total-letter .open-letter-wrap .open-letter {
		width:600px;
	}
	.current-letter-wrap .open-current-letter {
		min-width:unset;
		width:480px;
	}
}

/* PC 가로 + 테블릿 {S}  */
@media screen and (min-width:768px) and (max-width:1600px) {

	#send-letter .send-letter-wrap {
		width:60%;
		height: auto;
		aspect-ratio: 2/1.4;
	}
	#apply-wrap .apply, #notice-wrap .notice {
		scale:.7;
	}
	#notice-wrap .notice-deco {
		width:20%;
		min-width:200px;
		top:14%;
	}
	#apply-wrap .apply-deco {
		top: 14%;
	}
	#main-page .letter-wrapper .btn-complete {
		font-size: clamp(1.25rem, 1.0289rem + 0.9828vw, 1.5rem);
		padding: 2% 10%;
		bottom: 2%;
	}
	#main-page #writed-letter .writed-wrap {
		width:60%;
		max-width:unset;
	}
	#main-page #writed-letter .btn-wrap .btn {
		padding: 2% 10%;
	}

}

/* PC 가로 + 테블릿 {E}  */

/* 모바일 세로모드 {S} */
@media screen and (max-width:575px) {
	#sound-controller {
		scale:.5;
		bottom: 0;
		right: 0;
	}

	#notice-wrap .notice-deco {
		position: absolute;
		top: 12%;
		left: 50%;
		transform: translateX(-50%);
		width: 150px;
		height: auto;
		aspect-ratio: 1 / 1;
		z-index: -1;
	}

	#notice-wrap .notice {
		min-width: unset;
		width:90%;
		max-height: 500px;
		padding:4% 3.5%;
		gap:15px;
		border: 5px solid #EC303A;
	}

	#notice-wrap .notice-title {
		color: var(--redFontColor);
		font-size: 34px;
		font-weight: 800;
		line-height: 46px;
	}

	#notice-wrap .notice-list-wrap .notice-list {
		text-align:left;
		font-family: 'Pretendard-Medium';
		font-weight:400;
		display:flex;
		flex-direction:column;
		gap:25px;
	}

	#notice-wrap .notice-desc {
		font-size:13px;
		line-height:16px;
		margin-bottom:5px;
	}

	#notice-wrap .notice-desc img {
		margin-right:9px;
		width:30px;
		height:30px;
	}

	#notice-wrap .notice-detail {
		margin-left:40px;
		font-size:11px;
	}

	#notice-wrap .notice-detail li {
		line-height:18px;
	}

	#main-page #letter {
		width:40%;
		height:15%;
		top:49%;
		left:85%;
	}

	#main-page .writerpad-wrapper #letter-contents {
		line-height:22px;
		top:27%;
		font-size: 14px;
	}

	#main-page #writer-letter .letter-wrapper {
		max-width: none;
		width:340px;
		min-width: unset;
	}

	#main-page .letter-wrapper .writerpad-wrapper {
		width:300px;
		bottom:52%;
		transform: translate(-50%,50%);
		min-width: unset;
	}

	#main-page .writerpad-wrapper #writed-letter-contents {
		top: 28%;
		font-size: 14px;
		width: 240px;
		line-height: 21px;
	}

	#main-page .letter-wrapper .letter-back {
		bottom:10%;
		min-width: 350px;
	}

	#main-page .letter-wrapper .letter-front {
		bottom:4%;
		min-width:340px;
	}

	#main-page .letter-wrapper .btn-complete {
		font-size: clamp(1.25rem, 1.0289rem + 0.9828vw, 1.5rem);
		padding: 2% 10%;
		bottom:10%;
	}

	#main-page #writed-letter .writed-wrap {
		position: relative;
		max-width: none;
		width:90%;
		min-width: unset;
		justify-content: center;
	}
	#main-page #writed-letter .writed-img {
		width:100%;
		bottom:50%;
		transform: translate(-50%,50%);
	}
	#main-page #writed-letter .written-pad {
		width:300px;
		line-height:22px;
	}
	#main-page #writed-letter .btn-wrap{
		bottom:7%;
	}
	#main-page #writer-letter .change-pad {
		top: 12%;
		gap:50%;
	}
	#main-page .change-pad .prev-btn {
		width:20px;
		padding:10px;
	}
	#main-page .change-pad .next-btn {
		width:20px;
		padding:10px;
	}

	#send-letter .send-letter-wrap {
		width:90%;
		height: auto;
		aspect-ratio: 2/1.3;
	}
	#send-letter .send-letter {
		width:40%;
	}
	#send-letter .change-sticker-wrap {
		top:50%;
		transform: translate(-50%,-50%);
	}

	#send-letter .change-sticker {
		top: 50%;
		transform: translateY(-50%);
	}

	#send-letter .change-sticker .prev-btn {
		width:20px;
		padding:10px;
	}

	#send-letter .change-sticker .next-btn {
		width:20px;
		padding:10px;
	}
	#send-letter .letter-title {
		padding:1% 5%;
		top:20px;
		font-size: clamp(0.875rem, 0.6539rem + 0.9828vw, 1.125rem);
	}

	#apply-wrap .apply {
		min-width: unset;
		width:90%;
		max-height: 500px;
		padding:4% 3.5%;
		gap:15px;
		border: 5px solid #EC303A;
	}
	#apply-wrap .apply-deco{
		top:5.5%;
		max-width:250px;
	}
	#apply-wrap .apply .apply-title, #notice-wrap .notice-title {
		font-size: clamp(1rem, 0.5814rem + 1.8605vw, 1.25rem);
		line-height: 24px;
	}

	#apply-wrap .apply .apply-info ul {
		width:80%;
		font-size: clamp(0.75rem, 0.5289rem + 0.9828vw, 1rem);
	}
	#apply-wrap .apply .apply-info ul li span {
		width:50px;
	}
	#apply-wrap .apply-info input {
		font-size: clamp(0.75rem, 0.5289rem + 0.9828vw, 1rem);
		padding:0.5% 2.5%;
		min-width: 60px;
		height: 25px;
	}

	#apply-wrap .apply-info input::placeholder {
		font-size: clamp(0.75rem, 0.5289rem + 0.9828vw, 1rem);
	}

	[type="radio"] {
		appearance: none;
		background: url(/images/frida/game/check_off.png) no-repeat 0 0 / 100%;
		width:18px;
		height: 18px;
		margin:0;
	}
	[type="radio"]:checked {
		background: url(/images/frida/game/check_on.png) no-repeat 0 0 / 100%;
	}
	#apply-wrap .apply-desc p{
		font-size: clamp(0.6875rem, 0.4664rem + 0.9828vw, 0.9375rem);
		line-height: 20px;
	}

	#apply-wrap .apply-desc small{
		line-height: 16px;
		font-size: clamp(0.625rem, 0.4039rem + 0.9828vw, 0.875rem);
	}
	#apply-wrap .apply-table table {
		font-size: clamp(0.5rem, 0.1683rem + 1.4742vw, 0.875rem);
	}
	#apply-wrap .apply-table table td{
		width:calc(100% / 3);
		padding:2% 0;
	}

	.apply-agree [type="radio"], .apply-agree span {
		font-size: clamp(0.625rem, 0.4039rem + 0.9828vw, 0.875rem);
	}
	#main-page #total-wrap {
		left:unset;
		right:0;
		top:5%;
		max-width: 120px;
		min-width: 100px;
		width: 30%;
		height:80px;
		border:2px solid #983C41;
		border-radius: 20px 0 0 20px;
		background: url(/images/frida/game/totalBgM.png) no-repeat 0 0 / cover;
		background-color: #BE4B51;
		background-blend-mode: multiply;
	}
	#total-wrap .total-text {
		font-size: 14px;
	}
	#total-wrap #total {
		font-size:40px;
	}

	#total-letter .total-letter-wrap {
		height:80%;
		margin:100px 0;
		overflow-y: auto;
	}
	#total-letter .letter-grid {
		grid-template-columns: repeat(2, auto);
		gap:60px;
		padding: 30px 10px;
		box-sizing: border-box;
	}

	.letter-grid .letter-wrap {
		width: 110px;
		margin: 0 auto;
		max-height: none;
		max-width: none;
		height: auto;
		aspect-ratio: 2 / 1;
	}
	.letter-grid .sticker {
		width:30px;
		height:30px;
	}
	.letter-grid .letter-name {
		top:-15px;
		transform: translateX(-50%);
		padding:5px 14px;
		font-size: clamp(0.875rem, 0.6539rem + 0.9828vw, 1.125rem);
	}

	.letter-grid .letter-title {
		bottom:-20px;
		font-size: clamp(0.6875rem, 0.5671rem + 0.6424vw, 0.875rem);
	}
	#total-letter .open-letter-wrap .open-letter {
		width: 300px;
	}
	#total-letter .open-letter-wrap  .letter-rain > * {
		width:40%;
	}
	.open-letter-wrap  .letter-rain img:first-child {
		left: 1%;
	}
	.open-letter-wrap  .letter-rain img:nth-child(2) {
		left: 60%;
	}
	.open-letter-wrap  .letter-rain img:nth-child(3) {
		left: 15%;
	}
	.open-letter-wrap  .letter-rain img:nth-child(4) {
		left:50%;
	}
	.open-letter-wrap  .letter-rain img:nth-child(5) {
		left: 27%;
	}
	.open-letter-wrap  .letter-rain img:nth-child(6) {
		left: 61%;
	}
	.open-letter-wrap  .letter-rain img:nth-child(7) {
		left: 45%;
	}
	.open-letter-wrap  .letter-rain img:last-child {
		left: 64%;
	}

	.open-letter #open-letter-title {
		font-size: 13px;
	}
	.open-letter #open-letter-contents {
		font-size: 10px;
		line-height: 21px;
	}
	.open-letter #open-letter-name {
		font-size: clamp(0.6875rem, 0.5217rem + 0.7371vw, 0.875rem);
		top:73%;
	}

	.total-prev-btn {
		width:40px;
		height:40px;
	}
	.close-btn {
		width: 40px;
		height:40px;
	}

	#current-letter .letter {
		position: absolute;
		width:15%;
		min-width:75px;
		cursor: pointer;
	}
	.recentletter1 {
		top:3%;
		left:12%;
	}
	.recentletter2 {
		top:5%;
		left:42%;
	}
	.recentletter3 {
		top:18%;
		left:16%;
	}
	.recentletter4 {
		top:22%;
		left:43%;
	}
	.recentletter5 {
		top:33%;
		left:16%;
	}
	.recentletter6 {
		top:36%;
		left:42%;
	}
	#current-letter .letter .name {
		padding: 5px 14px;
	}

	.current-letter-wrap .open-current-letter {
		width:330px;
		min-width: unset;
	}
	.current-letter-wrap .open-current-letter #current-letter-title {
		font-size: 15px;
		top:22%;
		left:7%;
	}
	.current-letter-wrap #current-letter-content {
		font-size: 13px;
		line-height: 24px;
		width:270px;
	}
	.current-letter-wrap #current-letter-name {
		top:73%;
		font-size: clamp(0.75rem, 0.5289rem + 0.9828vw, 1rem);
	}
}
/* 모바일 세로모드 {E}  */


/* 모바일 가로모드 {S}*/
@media screen and (min-width:576px) and (max-width:767px) {
	#sound-controller {
		scale:.5;
		bottom: 2%;
		right: 5%;
	}
	#content-wrap {
		background:url(/images/frida/game/main-bg.png) no-repeat 0 0 / 100% calc(var(--vh, 1vh) * 100);
		background-color: rgba(0, 0, 0, .85);
	}
	#start-page {
		gap:10px;
	}
	#start-page #letter-wrap {
		top:18%;
	}
	@keyframes moveLetter {
		0% {
			left:50%;
			top:18%;

		}
		50% {
			top:34%;
			left:34%;
			transform: rotate(-15deg);
		}
		100% {
			left: 12%;
			top: 61%;
		}
	}
	#start-page .typing-effect {
		scale:0.7;
	}
	/* main-page */
	#main-page {
		position: fixed;
		display:none;
		top:0;
		left:0;
		width:100%;
		height:100vh;
	}
	#main-page #letter {
		position:absolute;
		left: 12%;
		top: 61%;
		transform: translateX(-50%);
		background-image: url(/images/frida/game/letter.png);
		background-repeat: no-repeat;
		background-size:100%;
		background-position: 50% 50%;
		width:17%;
		height:15%;
		cursor: pointer;
		animation: letterAni 3s linear infinite;
	}

	#main-page #writer-letter .letter-wrapper {
		max-width: none;;
		min-width: unset;
	}
	#main-page .letter-wrapper .writerpad-wrapper {
		width:70%;
		min-width: unset;
	}
	#main-page .writerpad-wrapper #letter-contents {
		top: 27%;
		font-size: 10px;
		line-height: 13.2px;
	}
	#main-page .writerpad-wrapper #counter {
		font-size: 10px;
		bottom: 23%;
	}
	#main-page .letter-wrapper .letter-back {
		width:105%;
		position:absolute;
		bottom:-9%;
		left:50%;
		transform: translateX(-50%);
		min-width: unset;
	}

	#main-page .letter-wrapper .letter-front {
		width:100%;
		position:absolute;
		bottom:-20%;
		left:50%;
		transform: translateX(-50%);
		min-width:unset;
	}

	#main-page .letter-wrapper .btn-complete {
		position: absolute;
		left:50%;
		bottom:20px;
		transform: translateX(-50%);
	}

	#main-page #writed-letter .written-pad {
		width: 50%;
		max-width: none;
		min-width:160px;
	}
	#main-page .writerpad-wrapper #writed-letter-contents {
		font-size: 10px;
		line-height:11.2px;
	}

	#main-page #writer-letter .change-pad {
		gap: 45%;
		top:10%;
	}

	#main-page .change-pad .prev-btn {
		width:20px;
		padding:10px;
	}
	#main-page .change-pad .next-btn {
		width:20px;
		padding:10px;
	}

	#send-letter {
		gap:15px;
	}
	#send-letter .send-letter-wrap {
		width:350px;
		height: 220px;
	}

	#send-letter .change-sticker {
		top: 50%;
		transform:translateY(-50%);
	}

	#send-letter .change-sticker .prev-btn {
		width:20px;
		padding:10px;
	}

	#send-letter .change-sticker .next-btn {
		width:20px;
		padding:10px;
	}

	#send-letter .letter-title {
		top:12px;
		font-size: 12px;
		padding: 5px 10px;
	}
	#apply-wrap .apply-deco,#notice-wrap .notice-deco {
		display:none;
		position:absolute;
		top:14%;
		left:50%;
		transform:translateX(-50%);
		width:20%;
		height:auto;
		aspect-ratio:1/1;
		z-index:-1;
		min-width: 200px;
	}
	#apply-wrap .apply, #notice-wrap .notice {
		scale:.4;
		border: 5px solid #EC303A;
		padding:35px 50px;
		margin-top:0;
	}

	#main-page #writed-letter .writed-wrap {
		gap:15px;
	}
	#main-page #writed-letter .btn-wrap {
		position:static;
		transform:none;
	}
	#main-page #total-wrap {
		width:80px;
		height:60px;
		gap:5px;
		border:2px solid #983C41;
		border-radius: 0 16px 16px 0;
	}
	#total-wrap .total-text {
		font-size: 10px;
	}
	#total-wrap #total {
		font-size:24px;
	}

	#total-letter {
		width:100%;
		height:100%;
		position:fixed;
		left:0;
		top:0;
		background-color: rgba(0,0,0,0.85);
		z-index: 10;
		display:none;
	}
	#total-letter .total-letter-wrap {
		margin:40px 0;
	}
	#total-letter .letter-grid {
		scale: .5;
		height:100%;
		padding:0;
		height:20%;
	}
	#total-letter .open-letter-wrap .open-letter {
		width:220px;
	}
	#total-letter .open-letter-wrap  .letter-rain > * {
		width:15%;
	}
	@keyframes letterRain {
		100% {
			bottom:-40%;
			display:none;
		}
	}
	.open-letter #open-letter-title {
		top:21.5%;
		font-size: 15px;
	}
	.open-letter #open-letter-contents {
		top:28%;
		font-size: 10px;
		width: 180px;
		padding: 0;
		line-height: 16px;
	}
	.open-letter #open-letter-name {
		font-size: 10px;
		top:73%;
	}

	.total-prev-btn {
		width:40px;
		height:40px;
		padding:10px;
		top: 2%;
		right: 2%;
	}
	.close-btn {
		width:40px;
		height:40px;
		padding:10px;
		top: 2%;
		right: 2%;
	}
	.letter-grid .letter-name {
		top:-15px;
	}
	#current-letter .letter {
		width: 55px;
		max-width: none;
		min-width: unset;
	}
	.recentletter1 {
		top:7%;
		left:30%;
	}
	.recentletter2 {
		top:10%;
		left:43%;
	}
	.recentletter3 {
		top:7%;
		left:55%;
	}
	.recentletter4 {
		top:10%;
		left:66%;
	}
	.recentletter5 {
		top:31%;
		left:37%;
	}
	.recentletter6 {
		top:29%;
		left:59%;
	}
	#current-letter .letter .name {
		padding: 5px 10px;
		font-size: 10px;
		top:-10px;
	}
	#current-letter .letter .name span {
		display:inline-block;
		text-align: center;
	}

	.current-letter-wrap .open-current-letter {
		width:220px;
		min-width:unset;
	}
	.current-letter-wrap #current-letter-title {
		font-size: 14px;
		top: 20%;
		left:6.5%;
	}
	.current-letter-wrap #current-letter-content {
		font-size: 10px;
		width: 180px;
		padding: 0;
		line-height: 16px;
		top: 28%;
	}
	.current-letter-wrap #current-letter-name {
		font-size: 10px;
		top: 72%;
		left:8%;
	}
}