@font-face {
    font-family: 'KidsMagazine';
    src: url('/static/fonts/KidsMagazine.ttf') format('truetype');
}
@font-face {
    font-family: 'BM HANNA Pro';
    src: url('/static/fonts/BM HANNA Pro.otf') format('truetype');
}
.google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #4285F4;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    margin-top: 10px;
}
.google-btn img {
    margin-right: 10px;
}
.container {
    display: flex;
}
.animation-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    position: relative;
    background: #fffff1;
    z-index: 3;
}
#intro_title, #intro_circle, #intro_play, #intro_object{
    position: absolute;
    justify-content: center;
    align-items: center;
    top: -30px;
    min-width: 200px;
    max-width: 450px;
    transform: translate(0%, 0%);
    z-index: 3;
}        
#intro_play {
    z-index: 4;
}
#intro_object {
    z-index: 3;
}
/* 이메일 입력 필드 스타일 */
.email-input-container {
    position: absolute;
    top: 60%; /* intro_object 이미지 내에서 상대적 위치 조정 */
    left: 20.5%; /* intro_object 이미지 내에서 상대적 위치 조정 */
    width: 57%; /* intro_object 이미지 너비의 n% */
    height: 4.5%;
    border-radius: 12px;
    background-color: #fff;
    border: 2px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
}
.email-input-container:hover {
    border-color: #888;
}
.email-input {
    position: absolute;
    width: 90%;
    border: none;
    outline: none;
    padding: 0 10px;
    font-size: clamp(2vh, 2vmin, 24px); /* 최소 12px, 뷰포트 최소값의 2%, 최대 24px */
    border-radius: 12px;
    background-color: transparent;
    z-index: 4;
    color: #4f4545;
}
/* 비밀번호 입력 필드 스타일 */
.pw-input-container {
    position: absolute;
    top: 66%; /* intro_object 이미지 내에서 상대적 위치 조정 */
    left: 20.5%; /* intro_object 이미지 내에서 상대적 위치 조정 */
    width: 57%; /* intro_object 이미지 너비의 n% */
    height: 4.5%;
    border-radius: 12px;
    background-color: #fff;
    border: 2px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
}
.pw-input-container:hover {
    border-color: #888;
}
.pw-input {
    position: absolute;
    width: 90%;            
    border: none;
    outline: none;
    padding: 0 10px;
    font-size: clamp(2vh, 2vmin, 24px); /* 최소 12px, 뷰포트 최소값의 2%, 최대 24px */
    border-radius: 12px;
    background-color: transparent;
    z-index: 4;
    color: #4f4545;
}
/* 비밀번호 확인 필드 스타일 */
.pwcheck-input-container {
    position: absolute;
    top: 72%; /* intro_object 이미지 내에서 상대적 위치 조정 */
    left: 20.5%; /* intro_object 이미지 내에서 상대적 위치 조정 */
    width: 57%; /* intro_object 이미지 너비의 n% */
    height: 4.5%;
    border-radius: 12px;
    background-color: #fff;
    border: 2px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
}
.pwcheck-input-container:hover {
    border-color: #888;
}
.pwcheck-input {
    position: absolute;
    width: 90%;            
    border: none;
    outline: none;
    padding: 0 10px;
    font-size: clamp(2vh, 2vmin, 24px); /* 최소 12px, 뷰포트 최소값의 2%, 최대 24px */
    border-radius: 12px;
    background-color: transparent;
    z-index: 4;
    color: #4f4545;
}
/* 닉네임 입력 필드 스타일 */
.nickname-input-container {
    position: absolute;
    top: 78%; /* intro_object 이미지 내에서 상대적 위치 조정 */
    left: 20.5%; /* intro_object 이미지 내에서 상대적 위치 조정 */
    width: 57%; /* intro_object 이미지 너비의 n% */
    height: 4.5%;
    border-radius: 12px;
    background-color: #fff;
    border: 2px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
}
.nickname-input-container:hover {
    border-color: #888;
}
.nickname-input {
    position: absolute;
    width: 90%;

    border: none;
    outline: none;
    padding: 0 10px;
    font-size: clamp(2vh, 2vmin, 24px); /* 최소 12px, 뷰포트 최소값의 2%, 최대 24px */
    border-radius: 12px;
    background-color: transparent;
    z-index: 4;
    color: #4f4545;
}
/* 비밀번호 찾기 필드 스타일 */
.reset-input-container {
    position: absolute;
    top: 70%; /* intro_object 이미지 내에서 상대적 위치 조정 */
    left: 20.5%; /* intro_object 이미지 내에서 상대적 위치 조정 */
    width: 57%; /* intro_object 이미지 너비의 n% */
    height: 4.5%;
    border-radius: 12px;
    background-color: #fff;
    border: 2px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
}
.reset-input-container:hover {
    border-color: #888;
}
.reset-input {
    position: absolute;
    width: 90%;            
    border: none;
    outline: none;
    padding: 0 10px;
    font-size: clamp(2vh, 2vmin, 24px); /* 최소 12px, 뷰포트 최소값의 2%, 최대 24px */
    border-radius: 12px;
    background-color: transparent;
    z-index: 4;
    color: #4f4545;
}
/* 광고 */
#ad-container {
    width: 80%;
    height: auto;
    margin: 10px auto;
    padding: 10px;
    background-color: #ffffff;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    position: absolute; /* 절대 위치 설정 */
    top: 85%; /* 세로 가운데 정렬 */
    left: 50%; /* 가로 가운데 정렬 */
    transform: translate(-50%, 0%); /* 컨테이너를 화면 중앙으로 이동 */
}