:root {
  --sr-color-black: #333333;
  --sr-color-lightorange: #ffa319;
  --sr-color-orange: #ff6b00;
  --sr-color-kakao: #ffe91f;
  --sr-font-bold: 'Pretendard-Bold';
  --sr-font-medium: 'Pretendard-Medium';
  --sr-font-regular: 'Pretendard-Regular';
  --sr-font-semibold: 'Pretendard-SemiBold';
}

@font-face {
  font-family: 'Pretendard-Bold';
  src: url('https://cdn.banggooso.com/sr/assets/fonts/Pretendard-Bold.otf') format('opentype'),
    url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.woff2https://cdn.banggooso.com/sr/assets/fonts/Pretendard-Bold.woff2')
      format('woff2'),
    url('https://cdn.banggooso.com/sr/assets/fonts/Pretendard-Bold.woff') format('woff');
  font-style: normal;
}

@font-face {
  font-family: 'Pretendard-Medium';
  src: url('https://cdn.banggooso.com/sr/assets/fonts/Pretendard-Medium.otf') format('opentype'),
    url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.woff2https://cdn.banggooso.com/sr/assets/fonts/Pretendard-Medium.woff2')
      format('woff2'),
    url('https://cdn.banggooso.com/sr/assets/fonts/Pretendard-Medium.woff') format('woff');
  font-style: normal;
}

@font-face {
  font-family: 'Pretendard-Regular';
  src: url('https://cdn.banggooso.com/sr/assets/fonts/Pretendard-Regular.otf') format('opentype'),
    url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.woff2https://cdn.banggooso.com/sr/assets/fonts/Pretendard-Regular.woff2')
      format('woff2'),
    url('https://cdn.banggooso.com/sr/assets/fonts/Pretendard-Regular') format('woff');
  font-style: normal;
}

@font-face {
  font-family: 'Pretendard-SemiBold';
  src: url('https://cdn.banggooso.com/sr/assets/fonts/Pretendard-SemiBold.otf') format('opentype'),
    url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.woff2https://cdn.banggooso.com/sr/assets/fonts/Pretendard-SemiBold.woff2')
      format('woff2'),
    url('https://cdn.banggooso.com/sr/assets/fonts/Pretendard-SemiBold') format('woff');
  font-style: normal;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  font-family: 'Pretendard-Medium';
}

body {
  margin: 0 auto;
}
.app-body {
  width: 500px;
  margin: 0 auto;
}
/* 공통 css 객체화 */
/* 이미지 맞춤 */
.img-width {
  width: 100%;
  object-fit: cover;
}
/* 배경 검정일떄 */
.bg-black {
  background-color: var(--sr-color-black);
}
/* 공유 아이콘 */
.iconbox {
  margin: auto;
  display: flex;
  width: 70%;
  justify-content: space-around;
}
.icon-width {
  width: 20%;
}
/* flex처리-col */

.flex-col {
  display: flex;
  flex-direction: column;
}
/* flex처리-row */
.flex-row {
  display: flex;
  flex-direction: row;
}
.gap-loading {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
/* 텍스트 가운데 정렬 */
.text-mid {
  text-align: center;
}
/* 회색 텍스트 */
.grey-txt {
  color: rgba(51, 51, 51, 0.733);
}
/* 화면 height */
/* 영상 문제페이지에서는 따로 height 지정해서 스크롤 방지 */
.heightset {
  height: 100%;
}
/* fixed 처리 */
.fixed {
  position: fixed;
}
/* 문제-sign-결과 페이지 (url 없이 show/hide) */
.app-sign-page {
  display: none;
  /* font-family: 'Pretendard-Medium'; */
}
.app-result-page {
  display: none;
  color: #333333;
}

/* 애니메이션 적용부분 */
/* 1. 페이드효과*/
@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* 2. 문제페이지 타이머 효과 */
@keyframes stroke-ani {
  0% {
    stroke-dashoffset: 277;
    stroke: #ff6b00;
  }
  100% {
    stroke-dashoffset: 0;
    stroke: #ff6b00;
    opacity: 1;
  }
}

@keyframes blink-effect {
  50% {
    opacity: 0;
  }
}

/* 디바이스 화면 조정 */
/* 갤럭시 폴드는 폭이 너무 좁아서 얘만 폰트사이즈 좀 작게 기준두기!! */
@media screen and (max-width: 290px) {
  html {
    font-size: 10px !important;
  }
}
@media screen and (max-width: 500px) {
  html {
    font-size: 12px;
  }
}
@media (max-width: 500px) {
  .app-wrapper {
    position: absolute;
    top: 0;
    width: 100vw;
  }
}
/* 디바이스가 500px보다 가로길이 넓으면 서비스화면 최대 500px로 고정 */
@media (min-width: 500px) {
  .app-wrapper {
    position: absolute;
    top: 0;
    width: 500px;
    margin: 0 auto;
  }
  .select-wrap .modal-pop-show {
    width: 440px !important;
  }
  body .modal-dim {
    max-width: 500px;
  }
  .app-main-page .insert {
    max-width: 500px;
  }
  .mypage-tutorial {
    max-width: 500px;
  }
  main .select-wrap {
    font-family: 'Pretendard-Medium' !important;
    width: 500px !important;
    height: 100%;
    margin: 0 auto;
    padding-bottom: 1rem;
  }
  body .app-header {
    width: 500px;
  }
  .user-form {
    width: 500px;
  }
}

.app-main-page .answer-wrap .answer:hover {
  color: white;
  background: none;
  border-top: 0.75px solid #fff;
  border-bottom: none;
}

@media (hover: hover) and (pointer: fine) {
  /* when supported */
  .app-main-page .answer-wrap .answer:hover {
    background-color: #ffffff40;
    border-bottom: 0.75px solid rgba(255, 255, 255, 0.5);
    border-top: 0.75px solid rgba(255, 255, 255, 0.5);
    color: white;
  }
}

/* 캐릭터 효과 */
@keyframes animate {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}
/* app-wrapper 안에 app-header + app-main */
.app-main {
  padding-top: 4.75rem;
  width: 100%;
  height: 100%;
  max-width: 500px;
  position: relative;
  margin: auto;
  display: flex;
}

/* 헤더 */
.app-header {
  width: 100%;
  height: 4.75rem;
  position: fixed;
  top: 0;
  z-index: 999999;
}

.header {
  height: 100%;
  z-index: 99;
  width: 100%;
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  position: relative;
  justify-content: center;
}

.header-logo-div {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.header-logo-div div:nth-child(1) {
  width: 50%;
  margin-left: 0.5rem;
}
.header-logo-div div:nth-child(2) {
  margin-left: 0.3rem;
  width: 25%;
}
/* 기본 홈헤더 */
.homeheader {
  flex: 1;
  gap: 2.5rem;
  justify-content: space-between;
  padding: 0.7rem;
}

/* .homeheader div:nth-child(2){
  position: absolute;
  left: 27%;
} */

.homeheader .header-menu {
  justify-items: center;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
}

.header-icon-notion-img {
  width: 44px;
  margin-left: -0.3rem;
}

.header-icon-img {
  width: 3.25rem;
}
.header-icon-egg-img {
  width: 12px;
  height: 16px;
  display: flex;
  justify-content: center;
}
.homeheader .header-egg-div {
  width: 1rem;
  display: flex;
}

.homeheader .header-egg {
  justify-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  gap: 0.78rem;
  align-items: center;
  padding: 0.59rem 0.8rem;
  border-radius: 20px;
  border: 1px solid rgb(0, 0, 0, 0.2);
  font-size: 15px;
  margin-right: 1rem;

  height: 34px;
}

.homeheader .header-egg span {
  font-weight: 400;
}

.homeheader .header-egg:hover,
.homeheader .header-egg::after {
  background-color: #fffaf0b6;
}

/* 문제페이지에서 다크버전 헤더*/
.header-dark {
  background-color: black !important;
  color: white !important;
}
.homeheader .header-egg-dark {
  border: 1px solid white !important;
}
/* 이외 페이지 헤더 */
.page-header {
  padding: 0.7rem;
}
.header-back {
  position: absolute;
  left: 1.3rem;
  width: 0.8rem;
}
.header-back-img {
  width: 100%;
}
.header-txt {
  font-size: 1.5rem;
  font-family: var(--sr-font-bold);
  position: absolute;
}

.winner-bolder {
  font-family: var(--sr-font-semibold) !important;
  line-height: 1.875rem !important;
  font-size: 1.375rem !important;
  margin-bottom: 1rem;
}
/* --------------------------------------- */

/* 모달위 광고 pop 창 */
.modal-pop {
  height: 4.5rem;
  z-index: 15;
}
.modal-pop-hide {
  display: none;
  width: 3.7rem;
  height: 3.7rem;
  display: none;
  background-color: white;
  border-radius: 12px;
  padding: 0.8rem;
}

.modal-pop-show {
  height: 3.7rem;
  background-color: white;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 0rem;
  padding: 1rem;
  padding-left: 0rem;
  width: 100%;
}
.modal-pop-img-hide {
  width: 100%;
  display: flex;
  justify-content: center;
}
.modal-pop-img {
  width: 3.75rem;
  padding: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-pop-txt {
  font-family: var(--sr-font-bold);
  width: 92%;
  white-space: normal;
  font-size: 1.1rem;
}

.modal-pop-img-hide-width {
  width: 2rem;
  margin-top: 0.05rem;
  margin-right: 0.1rem;
}
.modal-pop-img-show-width {
  width: 2rem;
}
.modal-pop-show .modal-pop-closebox {
  width: 22px;
}

.select-wrap .modal-pop {
  position: absolute;
  left: 1.9rem;
  top: 5.65rem;
  z-index: 10 !important;
  text-align: left;
}
.select-wrap .modal-pop-show {
  width: 85.9vw;
}
/* 모달창들 */
/* Modal 모달 */
/* 모달종류
1. 비회원
  1-1. nonmember-playModal : 1번 문제 무조건 플레이
  1-2. nonmember-startModal : 로그인없이 이용 모달창
  1-3. nonmember-again : 중복참여 모달창
2. 회원
  2-1. start-modal : 첫 참여 모달창
  2-2. again-modal : 중복참여 모달창 (알 있음)
  2-3. noEgg-modal : 중복참여 모달창 (알 부족)
  2-4. invite-modal : 결과페이지 친구초대 모달창
  
*/

/* 우선 먼저 display:none 처리 */
.nonmembers-play-modal,
.nonmembers-start-modal,
.nonmembers-end-modal,
.nonmembers-again,
.modal-dim.start-modal,
.again-modal,
.noEgg-modal,
.invite-modal,
.info-modal {
  display: none;
}

body .modal-dim {
  width: 100%;
  margin: 0 auto;
  background-color: rgb(0, 0, 0, 0.5);
  z-index: 999;
  height: 100%;
  position: fixed;
  padding: 0.9rem 1.875rem 0 1.875rem;
  display: flex;
  flex-direction: column;
}
.modal-dim.play-modal {
  background-color: transparent;
}
.modal {
  margin: 45% auto;
  width: 95.5%;
  background-color: white;
  border-radius: 1.8rem;
  text-align: center;
  z-index: 1001;
}
.modal-title {
  font-family: var(--sr-font-bold);
  font-size: 1.125rem;
  line-height: 2.1rem;
  margin: 2rem auto 1rem auto;
}

.modal-txt {
  font-size: 1.125rem;
  font-weight: 500;
  color: #333333b2;
  line-height: 1.6rem;
  font-family: var(--sr-font-medium);
}

.modal-btn {
  font-family: var(--sr-font-bold);
  border-radius: 10px;
  width: 90%;
  margin: 1.25rem auto 0rem auto;
  padding: 1.3rem;
  cursor: pointer;
  font-size: 1.375rem;
  color: white;
  background-color: var(--sr-color-lightorange);
  border: none;
  cursor: pointer;
}
.modal-btn:hover,
.modal-btn:active {
  background-color: rgb(250, 151, 21, 0.7);
}
.modal-a {
  font-size: 1.25rem;
  color: #33333399;
  font-family: var(--sr-font-medium);
  cursor: pointer;
}
.again-modal .modal-a,
.start-modal .modal-a,
.noEgg-modal .modal-a,
.invite-modal .modal-a {
  gap: 0.7rem;
}
.modal-other-quiz {
  width: 10px;
  display: flex;
  align-items: center;
}
.modal-kakao-icon {
  width: 1.42rem;
}
.right-icon {
  width: 0.47rem;
}
.check-txt {
  display: flex;
  align-items: center;
  gap: 0.5rem !important;
}
.check-icon {
  width: 1.12rem;
}
.modal-right-img-width {
  width: 0.4rem;
  opacity: 70%;
}
.modal-share {
  width: 100%;
  margin: auto;
  gap: 0rem;
  margin-top: 1.2rem;
  display: flex;
  justify-content: center;
}
.start-modal .modal,
.again-modal .modal {
  margin: 35% auto;
}
.nonmembers-start-modal .modal {
  margin: 25% auto;
}

.nonmembers-start-modal .modal-a {
  width: 100%;
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
  margin: 0.875rem auto 2rem -1rem;
}

.nonmembers-play-modal .modal {
  width: 100%;
  aspect-ratio: 16 / 15;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  cursor: pointer;
}

.nonmembers-play-modal .modal .test {
  width: 10rem;
  height: 10rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
  color: white;
}
/* 2-1 회원 첫참여 */

.start-modal .modal-title {
  font-family: var(--sr-font-bold);
  padding-top: 2rem;
  font-size: 1.5rem;
  line-height: 2.125rem;
}
.start-modal .modal-a {
  padding-bottom: 2rem;
  display: flex;
  justify-content: center;
  margin: 1.5rem auto 2.37rem auto;
}
/* 2-2 회원 중복참여 */
.again-modal .modal-title {
  font-family: var(--sr-font-bold);
  font-size: 1.5rem;
  line-height: 2.125rem;
}
.again-modal .modal-a {
  display: flex;
  justify-content: center;
  margin: 1.25rem auto 2rem auto;
}

/* 2-3. 알부족 모달 */
.noEgg-modal .modal-title {
  font-family: var(--sr-font-bold);
  font-size: 1.5rem !important;
  line-height: 2rem;
  margin: 2rem auto 1rem auto;
}
.noEgg-modal .modal-share {
  width: 100%;
  margin: auto;
  gap: 1rem;
  margin-top: 1.5rem;
  display: flex;
  padding: 0 2.875rem 0 2.875rem;
  justify-content: center;
}
.noEgg-modal .modal-a,
.invite-modal .modal-a {
  margin: 1.25rem auto 2rem auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 2-4  결과페이지 친구초대 모달창*/
.invite-modal {
  display: none;
}
.invite-modal .modal {
  margin: 59% auto !important;
  position: relative;
}
.invite-modal .modal-title {
  margin: 2rem auto 0.5rem auto;
}

.closesvg {
  width: 1.178rem;
  position: absolute;
  right: 1.25rem;
  top: 1.25rem;
}

/* 모달 : 비회원 모달 */
/* 1-1, 1-2 */
.nonmembers-start-modal .modal-title,
.nonmembers-end-modal .modal-title,
.invite-modal .modal-title {
  font-size: 1.5rem;
  font-family: var(--sr-font-bold);
}
.nonmembers-end-modal .modal-txt {
  margin-top: 0.75rem;
  padding: 0 1.875rem;
}
.nonmembers-end-modal .modal-txt div {
  display: flex;
  align-items: center;
}
.nonmembers-start-modal .modal-txt {
  text-align: left !important;
}
.nonmembers-start-modal .modal,
.nonmembers-again .modal {
  position: relative;
}
.nonmembers-start-modal .modal-txt div {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0 1.875rem 0 1.875rem;
}
.nonmembers-start-modal .kakao,
.nonmembers-end-modal .kakao,
.nonmembers-again .kakao {
  font-family: var(--sr-font-bold);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background-color: var(--sr-color-kakao) !important;
  color: #333333 !important;
  justify-content: center;
  margin: 1.5rem auto 0.87rem auto;
}
.nonmembers-start-modal .nologin {
  font-family: var(--sr-font-bold);
  margin: 0 auto 0.87rem auto;
  background-color: #0000000f;
  color: #505050 !important;
}

.nonmembers-again .modal-title {
  font-family: var(--sr-font-bold);
  font-size: 1.5rem;
}
.nonmembers-again .modal-a,
.nonmembers-end-modal .modal-a {
  margin: 1.5rem auto 2.37rem -1rem;
  width: 100%;
  display: flex;
  gap: 1.5rem;
  justify-content: center;
}
.nonmembers-start-modal .modal-a .a-admin,
.nonmembers-again .modal-a .a-admin,
.nonmembers-end-modal .modal-a .a-admin {
  width: 57%;
  border-right: 2px solid #00000038;
}
.nonmembers-start-modal .modal-a .a-sign,
.nonmembers-again .modal-a .a-sign,
.nonmembers-end-modal .modal-a .a-sign {
  width: 20%;
}
.nonmembers-end-modal .modal {
  position: relative;
  margin: 59% auto;
}
.nonmembers-end-modal .closesvg {
  position: absolute;
  width: 1.178rem;
  padding-top: 0.2rem;
}
.nonmembers-end-modal .modal-title {
  font-family: var(--sr-font-bold);
  margin: 2rem auto 1rem auto;
}
.nonmembers-again .modal {
  margin: 50% auto;
}

.info {
  margin-top: 39%;
  padding: 0;
}
.info-modal .title {
  font-size: 1.375rem;
  margin: 1.5rem auto;
  line-height: 26px;
  text-align: center;
  font-family: var(--sr-font-bold);
}
.info-modal .modal {
  border-radius: 15px;
}
.info-modal .info-txt {
  font-size: 1rem;
  font-weight: 500;
  padding: 0 1.8rem;
  text-align: left;
  height: 15rem;
  color: #717171;
  overflow-y: scroll;
}
.info-modal .bolder {
  font-weight: 600;
}
.modal-info-btn {
  position: sticky;
  bottom: 0;
  border-radius: 0 0 15px 15px;
  width: 100%;
  margin-top: 1.3rem;
  padding: 1.4rem;
  cursor: pointer;
  font-size: 1.5rem;
  color: white;
  font-weight: 700;
  background-color: var(--sr-color-lightorange);
  border: none;
  cursor: pointer;
}

.modal-info-btn:hover {
  opacity: 70%;
}

/* -------------------------------- */
/* 문제 페이지 */

.app-main-page .main {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  margin: 0;
  background-color: black;
}

.app-main-page .quiz-page {
  width: 100%;
  height: 100%;
}
.app-main-page .video-wrap {
  width: 100%;
  position: absolute;
}

.app-main-page .video-wrap video {
  width: 100%;
  display: none;
}

.app-main-page .video-wrap video.active {
  display: block;
}

/* 문제페이지 : 로딩 카운트 화면 (5초 남았을때 카운트다운)*/
.app-main-page .loading-wrapper {
  width: 100%;
  height: 54%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.app-main-page .loading-wrapper-time {
  z-index: 1000;
  position: absolute;
  font-size: 6.9rem;
  font-family: var(--sr-font-bold);
  top: 37%;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.698);
}

.app-main-page .loading-wrapper-alert {
  display: none;
  z-index: 1000;
  position: absolute;
  bottom: 0.9%;
  font-size: 1.11rem;
  font-weight: 600;
  background-color: #ffffff94;
  color: #333333;
  padding: 0.59rem 1.25rem;
  border-radius: 1000px;
}

.loading-wrapper-img {
  width: 1.25rem;
}
/* 문제페이지 : 인서트 */
.app-main-page .insert {
  animation: fadeIn 2s;
  width: 100%;
  margin: 0 auto;
  background: linear-gradient(rgb(0, 0, 0, 0), rgb(0, 0, 0, 1));
  z-index: 999;
  height: 100%;
  position: relative;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
}

.app-main-page .insert-txt {
  position: absolute;
  top: 75%;
  width: 100%;
  text-align: center;
  left: 0;
  color: white;
  font-size: 1.3rem;
  font-family: var(--sr-font-bold);
}
.app-main-page .insert-timeout .insert-txt {
  font-family: var(--sr-font-bold);
  width: 100%;
  text-align: center;
  left: 0;
}

.app-main-page .insert-timeout,
.insert-finish {
  font-family: var(--sr-font-bold);
  display: none;
  height: 100%;
}
.app-main-page .insert-btn {
  font-family: var(--sr-font-bold);
  position: absolute;
  top: 80%;
  left: 5%;
  color: white;
  font-size: 1.3rem;
  width: 90%;
  margin-top: 0.5rem;
  border-radius: 0.7rem;
  border: 0.75px solid white;
  text-align: center;
  line-height: 2.1rem;
  padding: 1.125rem;
  cursor: pointer;
}

.app-main-page .insert-next-btn {
  background-color: #ffffff1a;
}
.app-main-page .insert-finish-btn {
  background-color: var(--sr-color-orange);
  border: none;
}
.app-main-page .insert-next-btn:hover {
  background-color: #ffffff52;
}
.app-main-page .insert-finish-btn:hover {
  background-color: #ff8c3aab;
}
/* 문제페이지 : 타이머 svg*/
.app-main-page .target-item {
  width: 15%;
  height: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
  gap: 8px;
}

.app-main-page .target-item .paging {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.12rem;
  font-family: var(--sr-font-regular);
  background-color: #ffffff1a;
  border-radius: 999px;
  padding: 0.375rem 0.9375rem 0.375rem 0.9375rem;
  height: 30px;
  margin: 0 auto;
}
.app-main-page .target-item svg {
  margin: auto;
  stroke-dashoffset: 0;
  width: 80%;
}

.app-main-page .target-item .target-circle {
  stroke: #cacaca;
  stroke-width: 12;
  stroke-dasharray: 277;
  transform: translate(-50%, -50%) rotate(-90deg);
}
.app-main-page .target-item .target-circle-c {
  stroke: #ff6b00;
  stroke-width: 12;
  stroke-dasharray: 277;

  transform: translate(-50%, -50%) rotate(-90deg);
}

/* 문제페이지 : 정답박스 */
.app-main-page .select-wrap {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
}

.app-main-page .sound-off {
  /* text-align: right; */
  width: 9%;
  position: absolute;
  right: 1.25rem;
  top: 6rem;
}
.app-main-page .sound-off-img {
  display: none;
}
.app-main-page .wrap {
  width: 100%;
  position: relative;
  height: 100%;
  margin: 0 auto;
  text-align: center;
  display: flex;
  justify-content: center;
}
/* 문제페이지 : 정답박스 -> 질문지 부분 */
.app-main-page .select-area-question {
  width: 90%;
  line-height: 1.875rem;
  text-align: left;
  color: white;
  font-family: var(--sr-font-bold);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.3rem;
  position: absolute;
  bottom: 29%;
}

.app-main-page .select-area-question .question {
  height: 100%;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
}
.app-main-page .question {
  width: 80%;
}

/* 문제페이지 : 정답박스 -> 선택지 부분 */
.app-main-page .answer-wrap {
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 90%;
  height: 30%;
  bottom: 1%;
  position: absolute;
  margin: auto;
  gap: 0;
}
.app-main-page .answer-wrap .answer {
  height: 100%;
  padding: 0.75rem 1.5rem;
  color: white;
  line-height: 2.125rem;
  font-size: 1.1rem;
  font-weight: 500;
  border-top: 0.75px solid #fff;
  display: flex;
  align-items: center;
}

.nextbtn {
  margin: 2rem auto;
  background-color: white;
  width: 70%;
  height: 3rem;
  border-radius: 10px;
  background-color: rgb(0, 0, 0, 0.5);
  color: white;
  font-family: var(--sr-font-bold);
  font-size: 1.2rem;
  cursor: pointer;
}
.nextbtn:hover {
  background-color: #ffffff40;
}

/* ------------------------------------ */
/*sign 신청폼 페이지*/
.app-sign-page .user-form {
  animation: fadeIn 2s;
  width: 100%;
  position: relative;
  background-color: rgb(255, 255, 255);
  margin: 0 auto;
  text-align: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
}

.app-sign-page .form-top {
  padding: 2.1875rem 1.87rem 0 1.87rem;
}

.app-sign-page .form-brand {
  padding: 0 1.5rem;
  text-align: center;
  font-size: 1.75rem;
  font-family: var(--sr-font-bold);
  color: #333333;
}
.app-sign-page .form-brandname p {
  margin: 0;
  padding: 0;
}
.app-sign-page .form-img {
  width: 100%;
  margin: 1rem auto;
}

.app-sign-page .form-announce {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 1.25rem auto;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.37rem;
  gap: 0.8rem;
  color: #717171;
}
.app-sign-page .form-announce .date {
  font-weight: 400 !important;
}

.app-sign-page .form-inputdiv {
  margin: 1rem auto 0 auto;
}

.app-sign-page .form-inputbox {
  margin: 0.5rem auto;
  padding: 1.25rem;
  font-size: 1.25rem;
  font-family: var(--sr-font-semibold);
  border: none;
  width: 100%;
  border-radius: 15px;
  background-color: #3333330d;
  color: #333333 !important;
  text-align: left;
}
.app-sign-page .form-inputbox::placeholder {
  color: #cdcdcd;
  font-family: var(--sr-font-medium);
}
.accept-area {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.2rem;
  margin-top: 0.2rem;
}
.app-sign-page .accept-text {
  font-size: 0.9rem;
  color: rgba(51, 51, 51, 0.8);
  text-align: left;
}
.app-sign-page .form-acceptbox {
  margin: 1.125rem auto 0rem auto;
  width: 100%;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
}
.app-sign-page .form-checkbox {
  accent-color: var(--sr-color-lightorange);
}
#agreeCheckbox {
  position: absolute;
  left: -999em;
}
.circle {
  display: inline-block; /* 영역적용가능해짐 */
  width: 20px;
  height: 20px;
  border: 2px solid #999999;
  box-sizing: border-box;
  border-radius: 10px; /* 모서리둥글게 처리 */
  position: relative;
  top: 4px;
  cursor: pointer; /* 마우스 올렸을때 손모양 처리 */

  background-size: 70%;
  background-repeat: no-repeat;
  background-position: center;
}

#agreeCheckbox:checked + .circle {
  background-color: var(--sr-color-lightorange);
  border-color: var(--sr-color-lightorange);
  background-image: url(https://blog.kakaocdn.net/dn/t7a2D/btrhtVgLYmG/dUxzAkBy9hIZ4gHmyllQrk/img.png);
}
.app-sign-page .checktxt {
  font-weight: 500;
  margin-left: 0.1rem;
  color: var(--sr-color-black);
  font-size: 1.37rem;
}
.app-sign-page .sign-label {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}
.app-sign-page .form-acceptbox .accept-toggle-box {
  font-size: 1.25rem;
  background-color: #3333331a;
  border-radius: 0.6rem;
  padding: 0.6rem 1rem;
}

.app-sign-page .form-btn {
  font-family: var(--sr-font-bold);
  padding: 1.5rem;
  border-radius: 0.9rem;
  width: 100%;
  margin: 1.8rem auto 3.125rem auto;
  font-size: 1.5rem;
  color: white;
  box-shadow: 0.2rem 0.2rem rgb(255, 255, 255, 0.5);
  border: none;
  background-color: #cfcfcf;
  cursor: pointer;
}

/* sign 신청폼 페이지 : 유의사항 부분 */
.app-sign-page .toggleicon {
  width: 0.8rem;
}
.app-sign-page .form-notice {
  flex: 1;
  width: 100%;
  background-color: #3333330d;
  font-weight: 500;
}
.app-sign-page .form-notice div:nth-child(1) {
  text-align: left;
  padding: 1.87rem;
  font-size: 1.18rem;
  line-height: 1.5rem;
  font-weight: 300;
}
.app-sign-page .form-notice-toggle {
  padding: 1.5rem;
  font-size: 1.375rem;
  background-color: #3333331a;
  text-align: center !important;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.79rem;
}
.app-sign-page .notice-close .form-notice-toggle {
  margin: 0 auto 5rem auto;
}
.app-sign-page .form-notice-ul-div {
  width: 100%;
}
.app-sign-page .form-notice-ul {
  margin: 2rem 1.7rem;
  text-align: left;
  font-size: 1.125rem;
  font-family: var(--sr-font-regular);
}
.app-sign-page .form-notice-ul li {
  line-height: 1.75rem;
  margin: 0.31rem auto 0 -1rem;
}

.app-sign-page .form-notice .notice-open {
  display: none;
}

/* ----------------------------------- */
/* result 페이지 */
.result-main-page {
  width: 100%;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 500px;
  height: 100%;
  margin: 0 auto;
  text-align: center;
}
.result-page {
  width: 100%;
  height: 100%;
  padding: 0 1.875rem;
  margin: 0 auto;
  text-align: center;
}
.result-page .result-participation {
  font-size: 1.25rem;
  background-color: #ffa8001a;
  color: #ff8a00b2;
  padding: 0.5rem 1.1rem;
  border-radius: 0.8rem;
  width: 80%;
  font-family: var(--sr-font-bold);
  margin: 2rem auto 0 auto;
}
.result-page .result-top-title {
  font-size: 2rem;
  font-family: var(--sr-font-bold);
  margin-top: 2rem;
}

.result-page .result-egg {
  margin: 1.25rem auto 2rem auto;
  width: 100%;
  height: 12rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 700;
  font-size: 1.25rem;
}
.result-page .result-eggdiv {
  background-color: #fff6d8;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 1.8rem;
  gap: 1rem;
}
.result-page .result-eggdiv-img {
  width: 100%;
  margin: auto;
  animation: animate 2s 3;
}
.result-main-page .result-share-area {
  width: 100%;
  background-color: rgba(246, 246, 246, 1);
  padding: 3.1rem 0 3.25rem 0;
}
.result-main-page .result-sharetxt {
  flex-direction: row;
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  font-family: var(--sr-font-bold);
  margin: 0.25rem auto 1rem auto;
  justify-content: center;
  gap: 0.7rem;
}
.result-main-page .result-share-icon {
  width: 0.91rem;
}
.share-num {
  color: #333333;
  font-family: var(--sr-font-regular);
  margin-left: -0.3rem;
}
.result-page .result-video-div {
  margin: 3rem auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.result-video {
  position: relative;
  width: 100%;
}
.result-iframe {
  height: 15.438rem;
  width: 100%;
  border-radius: 15px;
}

.result-main-page .result-iconbox {
  width: 17%;
}
.result-main-page .iconbox {
  margin: auto;
  display: flex;
  gap: 1rem;
  justify-content: center;
}
.result-main-page .no-egg-share-wrapper,
.invite-share-box {
  display: flex;
  justify-content: center;
  gap: 1rem;
  width: 80%;
  margin: auto;
  margin-top: 1.5rem;
}
.result-main-page .result-tooltip {
  background-color: #f6f6f6;
  color: #333333;
  border-radius: 999px;
  font-size: 1.3rem;
  font-weight: 700;
  padding: 0.6rem;
  width: 80%;
  margin: 3rem auto 2rem auto;
}
.result-page .result-video-div div:nth-child(1) {
  text-align: left !important;
  font-size: 1.7rem;
  font-family: var(--sr-font-bold);
  margin-bottom: 1rem;
}
.result-page .result-video {
  width: 100%;
  object-fit: cover;
  border-radius: 1.5rem;
}
.result-page .result-event {
  text-align: left !important;
  flex: 1;
  height: 100%;
  margin: 2rem auto;
}
.result-page .result-event-title {
  margin-bottom: 0.5rem;
  font-family: var(--sr-font-bold);
}
.result-page .result-event div:nth-child(1) {
  font-size: 1.75rem;
  font-family: var(--sr-font-bold);
}
.result-page .result-event div:nth-child(2) {
  font-size: 1.2rem;
  font-family: var(--sr-font-regular);
  color: #999999;
}
.result-page .result-event-time {
  font-size: 2rem;
  color: var(--sr-color-lightorange);
  font-family: var(--sr-font-bold);
  margin: 1rem auto;
}
.result-main-page .result-event-btn-div {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.result-main-page .result-event-btn-div div:nth-child(1) {
  margin: 2rem auto 0rem auto;
  font-weight: 500 !important;
  font-size: 1.25rem;
}
.result-main-page .result-event-btn {
  font-family: var(--sr-font-bold);
  font-size: 1.5rem;
  padding: 1.58rem;
  margin: 0.6rem auto;
  width: 100%;
  border-radius: 15px;
  color: white;
  border: none;
}
.result-main-page .friend {
  background-color: var(--sr-color-lightorange);
  font-family: var(--sr-font-bold);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
}
.result-main-page .myrank {
  background-color: #333333;
  font-family: var(--sr-font-bold);
}
.result-main-page .goagain {
  background-color: var(--sr-color-lightorange);
  font-family: var(--sr-font-bold);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
}
.result-main-page .replay-icon {
  width: 1.2rem;
}
/* ------------------------------- */

/* 퀴즈리스트 페이지 */
/* 상단 띠배너 */
.animated-title {
  display: flex;
  flex-direction: row;
  background-color: #3333331a;
  font-weight: 500;
  font-size: 1.125rem;
  position: relative;
  width: 100%;
  height: 3.5rem;
  overflow-x: hidden;
  overflow-y: hidden;
  align-items: center;
}

.notice-icon {
  background-color: rgb(236, 236, 236);
  z-index: 99;
  padding: 1rem;
  height: 100%;
  align-items: center;
  display: flex;
  justify-content: center;
}

.animated-title .track {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  padding-left: 3.8rem;
}

.animated-title .start-ani {
  padding-left: 12 !important;
  animation: marquee 10s linear infinite;
  animation-fill-mode: forwards;
  animation-delay: 2s;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}
.banner-area {
  display: flex;
  overflow-x: hidden;
  overflow: auto;
  cursor: pointer;
}
.banner-area::-webkit-scrollbar {
  display: none;
}
.list-banner {
  margin-top: 1rem;
  width: 25.7rem !important;
  cursor: pointer;
}
.list-banner-img {
  height: 4.3rem;
  object-fit: fill !important;
}
.list-banner-1 {
  margin-left: 1.25rem;
}
.list-banner-2 {
  margin-right: 1.25rem;
  width: 27.5rem !important;
}

/* 퀴즈리스트 페이지 : 오픈된 숏퀴즈 */
.quiz-list {
  animation: fadeIn 1s;
  width: 100%;
}
.quiz-list .open {
  position: relative;
  width: 100%;
  height: 35.625rem;
  background-color: rgb(255, 255, 255);
  padding: 1.25rem;
}
.quiz-list .open-title {
  font-family: var(--sr-font-bold);
  font-size: 1.75rem;
  margin: 1rem auto 0 auto;
}

.quiz-list .open-group {
  width: 100%;
  height: 35rem;
  display: flex;
  overflow-x: hidden;
  overflow: auto;
  cursor: pointer;
}
.open-img-height {
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
  width: 100%;
}
.quiz-list .open-group::-webkit-scrollbar {
  display: none;
}
.quiz-list .open-element {
  width: 12.8125rem;
  flex-shrink: 0;
  margin: 1.25rem 0.75rem auto 0;
  overflow: visible;
}
.quiz-list .open-element-video {
  border-radius: 15px;
  height: 100%;
}

.quiz-list .open-element-video img {
  width: 100%;
  border-radius: 17px;
  object-fit: cover;
}

.quiz-list .open-element-detail {
  width: 100%;
  margin: 1rem auto 0 auto;
}

.quiz-list .open-detail-txt {
  font-size: 1.3rem;
  font-family: var(--sr-font-bold);
  line-height: 1.7rem;
  margin-bottom: 0.57rem;
}

.quiz-list .open-mycheck {
  margin: 0 auto;
  font-size: 1.125rem;
  font-weight: 500;
}

.quiz-list .open-element-detail div:nth-child(3) {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
  gap: 15%;
  height: 2rem;
}
.quiz-list .open-check {
  color: #33333380;
  font-weight: 500;
  font-size: 0.89rem;
  width: 50%;
}
.quiz-list .open-element-contents {
  position: relative;
  height: 22.8125rem;
}
.quiz-list .open-overlay {
  width: 100%;
  z-index: 10;
  position: absolute;
  width: 100%;
  right: 0;
  height: 100%;
  background: linear-gradient(rgb(0, 0, 0, 0), rgb(0, 0, 0, 0.8));
  border-radius: 15px;
}
.quiz-list .open-overlay:hover {
  background: linear-gradient(rgb(0, 0, 0, 0), rgb(0, 0, 0, 0.5));
}
.quiz-list .open-overlay-bottom {
  color: white;
  position: absolute;
  bottom: 0.75rem;
  width: 100%;
  padding-left: 0.75rem;
  font-weight: 200;
  font-size: 0.89rem;
  line-height: 1.3rem;
}
.quiz-list .open-overlay-top {
  position: relative;
  height: 10%;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.open-overlay-bold {
  font-weight: 500;
}
.quiz-list .new-sticker {
  text-align: left;
  width: 27%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px 0 15px 0;
  background-color: #faac15;
  color: white;
  font-weight: 700;
}
.quiz-list .hot-sticker {
  text-align: left;
  width: 27%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px 0;
  background-color: var(--sr-color-orange);
  color: white;
  font-weight: 700;
}
.quiz-list .due-sticker {
  position: absolute;
  right: 0;
  width: 25%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1.2rem 0.5rem 0 0;
  border-radius: 9px;
  background-color: rgb(255, 255, 255, 0.3);
  box-shadow: 0 0 rgb(0, 0, 0, 0.2);
  color: rgb(255, 255, 255);
  text-shadow: 0 0 rgb(0, 0, 0, 0.4);
  font-weight: 700;
  font-size: 0.875rem;
}

/* 오픈중인 컨텐츠 없으면 */
.no-open {
  width: 100%;
  margin-top: 1rem;
}
.no-open-img {
  width: 100%;
}
/* 퀴즈리스트 페이지 : 오픈 예정인 컨텐츠 */

.quiz-list .coming {
  background-color: rgb(255, 255, 255);
  position: relative;
  padding: 0 1.25rem;
  width: 100%;
  margin: 3rem auto;
}
.quiz-list .coming-title {
  font-family: var(--sr-font-bold);
  font-size: 1.75rem;

  margin: 5rem auto 1.25rem auto;
}

.quiz-list .coming-group {
  width: 100%;
}
.quiz-list .coming-element {
  width: 100%;
  margin: auto;
  position: relative;
}

.quiz-list .coming-overlay {
  display: flex;
  flex-direction: column;
  border-radius: 15px;
  z-index: 10;
  position: absolute;
  width: 100%;
  height: 16.125rem;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  text-align: center;
  margin: 0.5rem auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.875rem;
}

.quiz-list .end-overlay:hover,
.quiz-list .end-overlay:active {
  background-color: rgba(0, 0, 0, 0.5);
}
.quiz-list .coming-date {
  font-size: 1.25rem;
}
.quiz-list .coming-video {
  border-radius: 15px;
  width: 100%;
  height: 16.125rem;
  opacity: 70%;
  object-fit: cover;
  margin: 0.5rem auto;
}

/* 오픈예정인 컨텐츠가 없으면 : no-coming */

.quiz-list .no-coming-img {
  width: 100%;
}

/* 퀴즈리스트 페이지 :  종료된 컨텐츠 */
.quiz-list .end {
  font-family: var(--sr-font-bold);
  background-color: rgb(255, 255, 255);
  position: relative;
  padding: 0 1.25rem;
  width: 100%;
  margin: 0 auto 6.25rem auto;
}
.quiz-list .end-title {
  font-size: 1.75rem;
  font-family: var(--sr-font-bold);
  margin: 3.125rem auto 1.25rem auto;
}
.quiz-list .end-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.quiz-list .end-element {
  width: 100%;

  margin: auto;
  position: relative;
}
.quiz-list .end-overlay {
  border-radius: 15px;
  z-index: 10;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  text-align: center;
  /* margin: 0.5rem auto; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 1.75rem;
  font-size: 1.5rem;
}
.quiz-list .end-video {
  border-radius: 15px;
  width: 100%;
  height: 17rem;
  opacity: 70%;
  object-fit: cover;
}
.quiz-list .end-video img {
  border-radius: 15px;
}
.quiz-list .end-winner {
  margin: 0.5rem auto;
  font-size: 1.25rem !important;
  font-family: var(--sr-font-bold);
  background-color: #ffffffe5;
  border: 0.1rem solid white;
  color: #333333;
  border-radius: 10px;
  padding: 0.75rem 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

body .winner-txt {
  padding: 1.87rem;
  font-size: 1.25rem;
  padding-top: 0;
  font-family: var(--sr-font-regular);
  line-height: 2.125rem;
}

/* ------------------------------------ */
/* 마이페이지 (참여현황) */

/* 비회원 튜토리얼 */
.mypage-tutorial .mypage-tutorial-detail {
  margin-top: 3.125rem;
  padding: 0 1.875rem;
}
.mypage-tutorial .tutorial-txt {
  margin: 2.188rem 0 0.625rem 0;
  color: #333333b2;
  font-weight: 500;
  text-align: center;
  font-size: 1.25rem;
  line-height: 2rem;
}
.mypage-tutorial .mypage-tutorial-btn {
  font-family: var(--sr-font-bold);
  font-size: 1.5rem;
  padding: 1.5rem;
  margin: 0.6rem auto;
  width: 100%;
  border-radius: 15px;
  color: white;
  border: none;
  cursor: pointer;
}
.mypage-tutorial .tutorial-login {
  background-color: #fa9715;
}
.mypage-tutorial .tutorial-list {
  background-color: #333333;
  margin-bottom: 6.25rem;
}
/* 회원 튜토리얼 */
.app-main #nonmember {
  display: none;
}
.mypage {
  animation: fadeIn 2s;
  font-family: 'Pretendard Variable';
  width: 100%;
  height: 100%;
  margin: 0 auto;
  text-align: center;
  background-color: rgb(255, 255, 255);
  position: relative;
  padding: 1.5rem;
}

.mypage .mypage-top {
  margin: 2rem auto 3rem auto;
  font-size: 2rem;
  font-weight: 700;
}
.mypage .mypage-top div:nth-child(1),
.mypage-username,
.mypage-userlv {
  font-size: 2rem;
  line-height: 2.7rem;
}
.mypage .mypage-userlv-span {
  color: var(--sr-color-lightorange);
}
.mypage .mypage-userlv-span-black {
  color: #333333;
}
.mypage .mypage-nogame-span {
  display: none;
  color: #333333;
}
.mypage .mypage-eggcnt {
  width: 32%;
  border-radius: 10px;
  margin: 2rem auto 0 auto;
  font-size: 1.25rem;
  padding: 0.5rem;
  background-color: #ffa8001a;
  color: var(--sr-color-lightorange);
}

.mypage .mypage-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 30rem;
  align-items: center;
}
.mypage .mypage-imgdiv {
  position: absolute;
  width: 83%;
  z-index: 999;
}
.mypage .mypage-img {
  width: 100%;
  z-index: 999;
  transform-origin: center;
  animation: goDown 1.5s;
}
@keyframes goDown {
  0% {
    transform: translate3d(0, -70%, 0);
  }
  to {
    transform: translateZ(0);
  }
}

/* 마이페이지 : 현황그래프 부분 */
.mypage .mypage-bottom {
  z-index: 10;
  position: absolute;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background-color: #fff6e6;
  width: 100%;

  height: 19rem;
  border-radius: 30px;
  justify-content: center;
}
.mypage .mypage-egg {
  padding-bottom: 2rem;
}
.mypage .mypage-lv,
.mypage-egg {
  width: 100%;
  padding: 0 1rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  text-align: left !important;
}
.mypage .mypage-lv {
  padding-top: 1.2rem;
}

.mypage .tag {
  font-family: var(--sr-font-medium);
  margin: 1rem 0.5rem;
  font-weight: 700;
  font-size: 1.25rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.mypage .tag div:nth-child(2) {
  color: #333333b2;
  font-weight: 100 !important;
  font-size: 1rem !important;
  margin-top: 0.25rem;
}
.mypage .egg3-div {
  text-align: right;
}
.mypage .egg3-div img {
  width: 50%;
}
.mypage-chart {
  width: 100%;
}
/* 그래프 겉에 */
.mypage .outer {
  background-color: #3333331a;
  width: 97%;
  height: 1.25rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  margin: auto;
}
/* 그래프 안에 */
.mypage .inner {
  height: 1.25rem;
  border-radius: 999px;

  display: flex;
  align-items: center;
}
/* 그래프 안에 : 레벨 */
.mypage .lv-in {
  background-color: #ffe55c;
  width: 30%;
}
/* 그래프 안에 : 알 */
.mypage .egg-in {
  background-color: var(--sr-color-lightorange);
  width: 70%;
}
.mypage .chart-mark {
  width: 97%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0.3rem auto;
  color: #716f6d;
}

.mypage .aboutegg-img {
  width: 100%;
  margin: 5rem auto 1rem auto;
}

.mypage .mypage-goquiz {
  font-family: var(--sr-font-bold);
  background-color: var(--sr-color-lightorange);
  border: none;
  padding: 1.5rem;
  color: white;
  font-size: 1.5rem;
  font-weight: 700;
  border-radius: 0.6rem;
  width: 100%;
  margin: 1rem auto 6rem auto;
}
.mypage-goquiz:hover,
.mypage-goquiz:active {
  background-color: rgb(255, 163, 25, 0.6);
}
/* ------------------------------- */

.play-container {
  position: absolute;
  width: 5rem;
  height: 5rem;
  z-index: 100;
  background: #ffffff5d;
  border-radius: 1rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.play {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.play img {
  width: 1.7rem;
}

.scale-small {
  -webkit-animation: small 0.2s ease-out forwards;
  -moz-animation: small 0.2s ease-out forwards;
  animation: small 0.2s ease-out forwards;
}

.scale-large {
  -webkit-animation: large 0.4s ease-out forwards;
  -moz-animation: large 0.4s ease-out forwards;
  animation: large 0.4s ease-out forwards;
}

@-webkit-keyframes large {
  0% {
    -webkit-transform: scale(0.7);
  }
  33% {
    -webkit-transform: scale(1.3);
  }
  67% {
    -webkit-transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
  }
}

@-moz-keyframes large {
  0% {
    -moz-transform: scale(0.7);
  }
  33% {
    -moz-transform: scale(1.3);
  }
  67% {
    -moz-transform: scale(0.8);
  }
  100% {
    -moz-transform: scale(1);
  }
}

@keyframes large {
  0% {
    transform: scale(0.7);
  }
  33% {
    transform: scale(1.3);
  }
  67% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}

@-webkit-keyframes small {
  0% {
    -webkit-transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.7);
  }
}

@-moz-keyframes small {
  0% {
    -moz-transform: scale(1);
  }
  100% {
    -moz-transform: scale(0.7);
  }
}

@keyframes small {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.7);
  }
}

/* 알리 페스타 영역 부분 */
.ali-area {
  background-color: rgba(255, 217, 232, 1);
}
.ali-btn {
  background-color: rgba(255, 5, 88, 1);
  font-family: var(--sr-font-bold);
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  display: flex;
}
.ali-btn:nth-child(1) {
  cursor: pointer;
}
.ali-btn-div {
  width: 100%;
  padding: 0 1.87rem 2.62rem 1.87rem;
}
.ali-btn-2 {
  margin-top: 1.75rem !important;
}

.myrank-div {
  width: 100%;
  margin-top: 2.2rem;
  padding: 0 1.87rem 2.62rem 1.87rem;
}
.ali-finish-notice {
  color: rgba(142, 76, 92, 1);
  line-height: 2rem;
  font-size: 1.12rem;
  font-family: var(--sr-font-medium);
}