@charset "UTF-8";
:root {
  /* --vh: 1%; */
  /* 기본색상 */
  --color-main:#626AC9;
  --color-main-bg:#000;
  --color-sub:#349176;
  --color-event-bg:#178E6A;
  --color-link-apply:#6765C9
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Poppins"), url("https://fin.test.kakaobankcontent.com/common/font/poppins/Poppins-Bold.woff");
  src: local("Poppins"), url("./poppins/Poppins-Bold.woff"); /* local */
}
html,
body,
main {
  height: 100%;
  height: calc(var(--vh, 1vh) * 100);
  /* height:100vh; */
}
html,
body {
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:-moz-none;
  -o-user-select:none;
  user-select:none;
  min-width:initial;
}
* {
  font-family:'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', system-ui, sans-serif;
}
section,
.section {
  position:relative;
  z-index:2;
  box-sizing:border-box;
}
body {
  position:relative;
  /* background:#111;overflow:hidden; */
  /* height:auto !important; */
  overflow-y:auto;
}
::-webkit-scrollbar {
  display:none;
  /* Chrome, Safari, Opera*/
  scrollbar-width:none;
  /* Firefox */
  scroll-behavior:smooth;
}
body.hide {
  overflow:hidden;
  /* height:calc(var(--vh, 1vh) * 100); */
  height:100vh;
}
/* 공통 */
/* 공유하기 */
/* .theme-default #share {
  margin-top:-60px;
  padding-right:45px;
  padding-left:45px;
  background-color:transparent;
}
@media screen and (max-width: 373.98px) {
  .theme-default #share {
    padding-right:0;
    padding-left:0;
  }
} */
/* 꼭알아두세요 */
.theme-default #eventInfo .serial.serial-tline {
  margin-top:10px;
  font-size:16px;
}
.theme-default #eventInfo .serial.serial-tline .info-list {
  margin-top:0;
}
/* popup */
.popups .modal_layer {
  display:table;
  width:100%;
  height:100%;
  table-layout:fixed;
}
.popups .inner_layer {
  display:table-cell;
  width:100%;
  height:100%;
  vertical-align:middle;
  text-align:center;
}
.popups .layer_body {
  position:relative;
  max-width:330px;
  margin:0 auto;
  padding:14px;
  border-radius:20px;
  background:#fff;
  box-sizing:border-box;
}
.popups .title {
  font-size: 20px;
  font-weight: 700;
  line-height: 23.87px;
  letter-spacing: -0.5px;
  text-align: center;
}
.popups .title:not([class*="--b"]) {
  margin:26px auto 40px;
}
.popups .title[class*="--b"] {
  margin:35px auto;
}
.popups .area_apply {
  width:100%;
}
.popups .area_apply .link_g {
  display:inline-block;
  width:100%;
  padding:18px 0 18px;
  border-radius:10px;
  font-weight:800;
  font-size:20px;
  line-height:24px;
  color:#fff;
  text-align:center;
  background:#000;
  box-sizing:border-box;
}
.popups .sub {
  display:block;
  font-weight:400;
  font-size:15px;
  line-height:18px;
  letter-spacing:-1px;
  color:#333333;
}
.popups .sub:not([class*="--b"]) {
  margin:20px auto 35px;
}
.popups .sub[class*="--b"] {
  margin:40px auto 35px;
}
.popup-youtube {
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  box-sizing:border-box;
  padding:20px 0;
  background:rgba(0, 0, 0, 0.8);
  z-index:1;
  opacity:0;
  visibility:hidden;
}
.popup-youtube.on {
  opacity:1;
  transition:all 0.5s 0.8s;
  visibility:visible;
  z-index:99;
}
.popup-youtube .modal-table {
  display:table;
  width:100%;
  height:100%;
  table-layout:fixed;
}
.popup-youtube .modal-cell {
  display:table-cell;
  width:100%;
  height:100%;
  vertical-align:middle;
  text-align:center;
}
.popup-youtube .iframe-wrap {
  display:inline-block;
  width:100%;
  height:80%;
}
.popup-youtube .modal-open {
  display:block;
  z-index:1000;
}
.popup-youtube .btn-close-modal {
  position:fixed;
  top:22px;
  right:17px;
  color:transparent;
  font-size:0;
  width:36px;
  height:36px;
  padding:11px;
}
/* .popup-single {opacity:1; visibility:visible;} */
/* 팝업 모달
.popups .modal-content {
  max-width: 305px;
} */
.popup-single .modal-content .modal-image .pu-img {
  width:80px;
  height:80px;
}
.popup-single .modal-btn {
  display:flex;
  gap:8px;
}
.popup-single .modal-btn .okay-btn:not([class*='--info']) {
  flex:0 0 80px;
}
.popup-single .modal-btn .okay-btn .btn-ok {
  padding:18px 0;
  color:#000;
  font-weight:700;
  font-size:18px;
  background-color:#E2E2E2;
}
.popup-single .modal-btn .okay-btn .btn-ok[class*='--info'] {
  background-color:#ffd600;
}
.popup-single .modal-btn .close-on {
  display: none;
}

.inmotion {
  transform:translate(0, 50px); 
  opacity: 0;
}
.play-inmotion.inmotion,
.play.inmotion {
  transform:translate(0, 0); 
  opacity: 1; 
  transition:transform 0.6s 0.1s, opacity 0.6s 0.1s; 
  -webkit-transition:transform 0.6s 0.1s, opacity 0.6s 0.1s; 
  -moz-transition:transform 0.6s 0.1s, opacity 0.6s 0.1s; 
  -ms-transition:transform 0.6s 0.1s, opacity 0.6s 0.1s; 
  -o-transition:transform 0.6s 0.1s, opacity 0.6s 0.1s; 
}
.accordion-block .accordion-btn span:first-child {
  width: calc(100% - 22px);
  display: inline-block;
  word-break: keep-all;
}
/* 하단으로 이동 */
.scroll-down {
  position: absolute;
  left: 50%;
  bottom: 53px;
  bottom: 7.5vh;
  width: 18px;
  height: 9px;
  -webkit-animation: mouseloop 0.8s infinite alternate;
  animation: mouseloop 0.8s infinite alternate;
  z-index: 10;
}
@-webkit-keyframes mouseloop {
  0% {-webkit-transform: translateY(0) translateX(-50%);opacity: 0.85;}
  100% {-webkit-transform: translateY(-12px) translateX(-50%);opacity: 1;}
}
@keyframes mouseloop {
  0% {transform: translateY(0) translateX(-50%);opacity: 0.85;}
  100% {transform: translateY(-12px) translateX(-50%);opacity: 1;}
}

/* 컨텐츠 영역 */
.section {
  color:#fff;
}
/* 컨텐츠 공통 */

/* section-top : intro 영역 */
.section-top {
  background:var(--color-main-bg);
  overflow:hidden;
}
.section-top .inner {
  position:relative;
  padding-top:21px;
  padding-bottom:39px;
  height: calc(var(--vh, 1vh) * 100);
  /* height:100vh; */
  text-align: center;
  overflow: visible;
  z-index: 1;
}
.section-top .logo-mma2024 {
  position: relative;
  display: block;
  margin: 0 auto;
  max-width:327px;
  z-index:1;
}

.section-top .logo-mma2024::after {
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
  background-color:#000;
}

.section-top.on .logo-mma2024::after {
  width:0;
  transition:width 0.2s 0.6s ease-in-out;
}

.section-top .div-choonsik {
  position: absolute;
  top:50%;
  left:50%;
  width:327px;
  height:327px;
  margin: -213px -163px;
  overflow: hidden;
}
.section-top .div-choonsik .radius {
  border-radius: 50%;
  overflow: hidden;
}
.section-top .img-choonsik {
  font-size: 0;
  opacity:0;
  /* animation:kv-bounce-ani 2.4s steps(62) infinite; */
  /* transform: scale(0.5); */
}
/* @keyframes kv-bounce-ani {
  100% {transform:translate(0,-20274px)}
} */
/* .section-top .img-choonsik img {
  position:absolute;
  top:0;
  left:0;
  opacity:0;
} */
.section-top .img-choonsik img:first-child {
  position:relative;
  opacity:1;
}
.section-top.on .img-choonsik {
  /* transform: scale(1); */
  opacity:1;
  transition:opacity 0.3s 0.2s;
}

.section-top .tit-box {
  position: absolute;
  /* bottom:126px; */
  bottom:17.3vh;
  left:50%;
  transform: translate(-50%, 50px);
  width:100%;
  text-align: center;
  z-index: 1;
  opacity: 0;
}
.section-top .tit-box span {
  font-size: 17px;
  font-weight: 600;
  line-height: 25.5px;
}
.section-top .tit-box strong {
  display:block;
  margin-top:5px;
  font-size: 26px;
  font-weight: 800;
  line-height: 38px;
}
.section-top a.btn-cashbag {
  position: absolute;
  /* bottom:39px; */
  bottom: 5.3vh;
  left:50%;
  transform: translate(-50%, 50px);
  display:inline-flex;
  align-items: center;
  width: 290px;
  height: 57px;
  padding:0 19px 0 7px;
  color:#fff;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.5px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.09) url(https://og.kakaobank.io/view/e5ccb376-e20e-4a19-b102-f53a10cecb7d) no-repeat calc(100% - 17px) / 10px;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  box-sizing: border-box;
  z-index: 1;
  opacity:0;
}
.section-top a.btn-cashbag .img-coin {
  width:43px;
  height:auto;
}

.section-top .div-intro {
  position: absolute;
  /* bottom: 420px; */
  bottom: 27vh;
  left:83px;
  width:208px;
  height:192px;
  margin: 0px -140px;
}
.section-top .img-intro {
  opacity:0;
  transform: scale(0.5);
}
.section-top.on .img-intro {
  transform: scale(1);
  opacity:1;
  transition:transform 0.3s 0.2s, opacity 0.3s 0.2s;
}

.section-top.on .tit-box {
  opacity:1;
  transform:translate(-50%, 0);
  transition:opacity 0.7s 0.3s, transform 0.7s 0.3s;
}

.section-top.on a.btn-cashbag {
  opacity:1;
  transform:translate(-50%, 0);
  transition:opacity 0.7s 0.4s, transform 0.7s 0.4s;
}

.section-top .img-intro {
  transform-origin: 0 0;
  -webkit-animation: intro-bounce-ani 2.6s ease-in-out 0s infinite;
  animation: intro-bounce-ani 2.6s ease-in-out 0s infinite;
}
@-webkit-keyframes intro-bounce-ani {
  0%, 100% { -webkit-transform: translateY(15px); }
  50% { -webkit-transform: translateY(-10px); }
}
@keyframes intro-bounce-ani {
  0%, 100% { transform: translateY(15px); }
  50% { transform: translateY(-10px); }
}
.section-top .div-intro2 {
  position: absolute;
  /* bottom:238px; */
  bottom:-3vh;
  right:74px;
  width:234px;
  height:216px;
  margin: 0px -140px;
}
.section-top .img-intro2 {
  opacity:0;
  transform: scale(0.5);
}
.section-top.on .img-intro2 {
  transform: scale(1);
  opacity:1;
  transition:transform 0.3s 0.2s, opacity 0.3s 0.2s;
}

.section-top .img-intro2 {
  -webkit-animation: intro2-bounce-ani 2.8s ease-in-out 0s infinite;
  animation: intro2-bounce-ani 2.8s ease-in-out 0s infinite;
}
@-webkit-keyframes intro2-bounce-ani {
  0%, 100% { -webkit-transform: translateY(-15px); }
  50% { -webkit-transform: translateY(5px); }
}
@keyframes intro2-bounce-ani {
  0%, 100% { transform: translateY(-15px); }
  50% { transform: translateY(5px); }
}
.section-top .bg-intro {
  position: absolute;
  right: -620px;
  bottom: -910px;
  width: 1964px;
  height:1692px;
  max-width: none;
  background:url(https://og.kakaobank.io/view/c776538e-ca62-4785-bb92-55af4619c737) no-repeat 0 / 100%;
  animation: bounceBg-ani-top 20s ease-in-out 0s infinite;
}
@keyframes bounceBg-ani-top {
  0% {transform:translate(0,0) rotate(0) }
  50% {transform:translate(50px,-160px) rotate(30deg) }
  /* 0%, 100% {transform:translate(0,0) rotate(0) }
  40%, 70% {transform:translate(100px,-100px) rotate(10deg) } */
}

/* section1 : ready */
.section1 {
  background:var(--color-main-bg);
  overflow:hidden;
}
.section1 .inner {
  position:relative;
  padding-top:50px;
  padding-bottom:100px;
  padding-right:0;
  padding-left:0;
  height: calc(var(--vh, 1vh) * 100);
  /* height:100vh; */
  text-align: center;
}
.section1 .bubletip-item {
  position: absolute;
  /* top:106px;  */
  top:14.6vh;
  left:50%;
  transform: translate(-50%, 30px);
  transform-origin: 0 0;
  display: inline-block;
  width:100%;
  max-width:241px;
  padding:15px 30px;
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  border-radius: 20px;
  background:#2e2e2e;
  box-sizing: border-box;
  z-index: 1;
  animation: bubletip-ani 0.5s forwards 0.7s;
  opacity: 0;
}
@keyframes bubletip-ani {
  0% { opacity: 0; transform:translate(-50%, 30px); }
  80% { transform: translate(-50%, -5px); }
  100% { opacity: 1; transform: translate(-50%, 0); }
}
/* .section1 .bubletip-item::after {
  content: '';
  position: absolute;
  top: calc(100% + -1px);
  left:50%;
  transform: translateX(-50%);
  display: block;
  width: 0;
  height: 0;
  border-color: #2e2e2e transparent transparent transparent;
  border-style:solid;
  border-width: 13px 11px 0;
} */

.section1 .div-cs {
  position: absolute;
  top:50%;
  left:50%;
  width:330px;
  height:330px;
  margin: -165px -165px;
}
.section1 .img-cs {
  opacity:0;
  transform: scale(0.5);
}
.section1 .img-cs.radius {
  border-radius: 50%;
  overflow: hidden;
}
.section1.on .img-cs {
  transform: scale(1);
  opacity:1;
  transition:transform 0.6s 0.1s, opacity 0.6s 0.1s;
}

.section1 .btn-box {
  position:absolute;
  /* bottom:51px; */
  bottom:7vh;
  width:100%;
  text-align: center;
  box-sizing:border-box;
  /* transition:all 0.3s 1s; */
  padding:0 16px;
  pointer-events: none;
}
.section1 .btn-box::before {
  content: "";
  display: block;
  width: 100%;
  height: 101px;
  position: absolute;
  right: 0;
  left: 0;
}
.section1 .btn-box > div {
  opacity: 0;
  -webkit-animation: btn-slideup-ani 0.7s forwards 1.7s;
  animation: btn-slideup-ani 0.7s forwards 1.7s, enable-clicks 0.1s forwards 1.9s;
}

@-webkit-keyframes btn-slideup-ani {
  0% { opacity: 0; -webkit-transform: translateY(100px); }
  100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes btn-slideup-ani {
  0% { opacity: 0; transform: translateY(100px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes enable-clicks {
  to {
    pointer-events : auto;
  }
}
.section1 .btn-box .btn-quiz {
  display:flex;
  justify-content: center;
  align-items: center;
  width:100%;
  height:60px;
  margin:0 auto 20px;
  font-size:17px;
  font-weight:700;
  line-height:21px;
  color:#000;
  text-align:center;
  border-radius:12px;
  text-decoration:none;
  background:#eafe00;
}
.section1 .btn-box .btn-playlist {
  /* position:absolute;
  bottom:0;
  left:50%;
  transform: translateX(-50%); */
  color:#A1E3C3;
  font-size: 16px;
  font-weight: 400;
  line-height: 19.09px;
}
/* playlist popups */
.popup-playlist .pop-content {
  position: absolute;
  left: 0;
  bottom: -500px;
  width: 100%;
  transition: bottom 0.3s;
}
.popup-playlist.on .pop-content {
  bottom:0;
}
.popup-playlist .btn-close {
  position: absolute;
  top: 15px;
  right: 15px;
  width:26px;
  height: 26px;
  background:url(https://og.kakaobank.io/view/863e5ac3-48da-4058-bc30-4ff8176fbccc) no-repeat 0 / 100%;
  text-indent: -99999px;
}
.popup-playlist.type-bottom .pop-content-inner {
  position: relative;
  margin: 0 auto;
  padding: 40px 30px 48px;
  background: #fff;
  border-radius: 30px 30px 0 0;
  text-align: center;
}
.popup-playlist .detail {
  text-align: left;
}
.popup-playlist .detail .title {
  display: block;
  margin-top:0;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  text-align: left;
}
.popup-playlist .detail .playlist-txt {
  display:flex;
  align-items: center;
}
.popup-playlist .detail .playlist-txt::before {
  content:"";
  display:inline-flex;
  flex:0 0 54px;
  margin-right:18px;
  width:54px;
  height:54px;
  border-radius:15px;
  background: #F4F8E5 url(https://og.kakaobank.io/view/3375e3af-b4ab-4911-8037-9a12b3180dd2) no-repeat center / 38px;
}
.popup-playlist .detail .playlist-txt span {
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  text-align: left;
}

/* section2 : quiz&result 영역 */
.section2 {
  background:var(--color-main-bg);
  overflow:hidden;
}
.section2 .inner {
  position:relative;
  /* padding-top:53px; */
  padding-bottom:34px;
  padding-right:0;
  padding-left:0;
  height: calc(var(--vh, 1vh) * 100);
  /* height:100vh; */
  text-align: center;
  z-index: 1;
}
.section2 .date {
  position:absolute;
  top:93px;
  top:12.8vh;
  left:50%;
  transform: translateX(-50%);
  display:inline-block;
  /* margin-top:40px; 1차모션때 top:93 , 2차모션 top: 53 | inner padding-top 53으로 셋팅 */
  height:39px;
  padding:9px 20px;
  font-size: 15px;
  font-weight: 600;
  line-height: 22.5px;
  border-radius: 80px;
  background:rgba(255, 255, 255, 0.16);
  box-sizing: border-box;
  -webkit-animation: date-ani 0.5s forwards;
  animation: date-ani 0.5s forwards;
  transition: 0.3s all;
  opacity: 0;
}
@-webkit-keyframes date-ani {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes date-ani {
  0% { opacity: 0;}
  100% { opacity: 1;}
}
.section2.quiz .date {
  top:53px;
  top:7.3vh;
}
.section2.result .date {
  -webkit-animation: date-result-ani 1s forwards;
  animation: date-result-ani 1s forwards;
} 
@-webkit-keyframes date-result-ani {
  0% { opacity: 1; -webkit-transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; -webkit-transform: translateX(-50%) translateY(-41px); height:0; padding:0;} 
}
@keyframes date-result-ani {
  0% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-41px); height:0; padding:0;} 
}
.section2 .div-lyrics {
  position:absolute;
  /* top:200px;
  top:27.5vh; 
  bottom: 51vh;*/
  width:100%;
  height:156px;
  box-sizing: border-box;
  opacity: 0;
}
.section2 .lyrics  {
  /* width:214px;
  height:156px; */
  margin:auto;
  padding:0 14px;
  font-size: 22px;
  font-weight: 800;
  line-height: 30px;
  box-sizing: border-box;
}
.section2 .lyrics > p {
  position: absolute;
  left:50%;
  transform: translateX(-50%);
  width: 100%;
}
.section2 .lyrics .lyrics-item2 {
  opacity: 0;
}
.section2 .div-lyrics {
  -webkit-animation: lyrics-slideup-ani 0.7s forwards 0.2s;
  animation: lyrics-slideup-ani 0.7s forwards 0.2s;
}
@-webkit-keyframes lyrics-slideup-ani {
  0% { opacity: 0; top:250px;top:34.5vh; -webkit-transform: scale(1); }
  100% { opacity: 1; top:200px;top:27.5vh; -webkit-transform: scale(1); }
}
@keyframes lyrics-slideup-ani {
  0% { opacity: 0; top:250px;top:34.5vh; transform: scale(1); }
  100% { opacity: 1; top:200px;top:27.5vh; transform: scale(1); }
}
.section2.quiz .div-lyrics {
  -webkit-animation: lyrics-quiz-slideup-ani 0.5s forwards;
  animation: lyrics-quiz-slideup-ani 0.5s forwards;
}
@-webkit-keyframes lyrics-quiz-slideup-ani {
  0% { opacity: 1; top:200px;top:27.5vh; }
  100% { opacity: 1; top:119px;top: 16.5vh; } 
}
@keyframes lyrics-quiz-slideup-ani {
  0% { opacity: 1; top:200px;top:27.5vh; }
  100% { opacity: 1; top:119px;top: 16.5vh; } 
}
.section2.result .div-lyrics {
  -webkit-animation: lyrics-result-slideup-ani 1s forwards;
  animation: lyrics-result-slideup-ani 1s forwards;
}
@-webkit-keyframes lyrics-result-slideup-ani {
  0% { opacity: 1; top:119px;top: 16.5vh; }
  100% { opacity: 1; top:41px;top: 5.5vh; } 
}
@keyframes lyrics-result-slideup-ani {
  0% { opacity: 1; top:119px;top: 16.5vh; }
  100% { opacity: 1; top:41px;top: 5.5vh; } 
}
.section2.result .lyrics .lyrics-item1 {
  -webkit-animation: lyrics-result-blur-ani 1s forwards;
  animation: lyrics-result-blur-ani 1s forwards;
}
@-webkit-keyframes lyrics-result-blur-ani {
  0% { opacity: 1; }
  80% { opacity:1; -webkit-filter: blur(2px);} 
  100% { opacity: 0; -webkit-filter: blur(4px); } 
}
@keyframes lyrics-result-blur-ani {
  0% { opacity: 1; }
  80% { opacity:1; filter: blur(2px);} 
  100% { opacity: 0; filter: blur(4px); } 
}
.section2.result .lyrics .lyrics-item2 {
  -webkit-animation: lyrics-result-blur2-ani 1s forwards 0.5s;
  animation: lyrics-result-blur2-ani 1s forwards 0.5s;
}
@-webkit-keyframes lyrics-result-blur2-ani {
  0%, 20% { opacity: 0; }
  100% { opacity: 1; } 
}
@keyframes lyrics-result-blur2-ani {
  0%, 20% { opacity: 0; }
  100% { opacity: 1; } 
}
.section2 .div-quiz-card {
  position: absolute;
  bottom: 0;
  width: 100%;
  height:150px;
}
.section2.result .div-quiz-card {
  height:180px;
  height: 47vh;
  transform-origin: center top;
}
.section2 .quiz-card {
  position:absolute;
  bottom:6.8vh;
  left:50%;
  /* transform: translateX(-50%) scale(0.7345); */
  transform: translateX(-50%) scale(0.7645);
  transform-origin: center bottom;
  display:flex;
  justify-content: center;
  gap:11px;
}
.section2 .quiz-card .card-item {
  position:relative;
  padding:20px 8px 8px;
  width:212px;
  height:290px;
  border-radius: 24px;
  text-align: left;
  background:#fff;
  box-sizing: border-box;
  opacity: 0;
  transition: 0.3s all ;
}
.section2 .quiz-card .card-item.item-type1 {
  animation: card-slideup-ani 0.7s forwards 0.5s;
}
.section2 .quiz-card .card-item.item-type2 {
  animation: card-slideup-ani 0.7s forwards 0.6s;
}
@-webkit-keyframes card-slideup-ani {
  0% { opacity: 0; -webkit-transform: translateY(200px); }
  100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes card-slideup-ani {
  0% { opacity: 0; transform: translateY(200px); }
  100% { opacity: 1; transform: translateY(0); }
}
.section2.quiz .quiz-card {
  -webkit-animation: card-quiz-slideup-ani 0.5s forwards;
  animation: card-quiz-slideup-ani 0.5s forwards;
}
@-webkit-keyframes card-quiz-slideup-ani {
  100% { opacity: 1; bottom:154px;bottom: 21.3vh  }
}
@keyframes card-quiz-slideup-ani {
  100% { opacity: 1; bottom:154px;bottom: 21.3vh  }
}
.section2.result .quiz-card {
  gap:0;
  animation: card-result-slideup-ani 1s forwards;
}
@keyframes card-result-slideup-ani {
  0% { opacity: 1; bottom:154px;bottom: 21.3vh  }
  100% { opacity: 1; bottom:210px;bottom: 29vh; transform: translateX(-50%) scale(1);}
}
/* 왼쪽 정답 선택시 */
.section2.result .quiz-card .card-item:not(.checked).item-type2 {
  animation: card-result-notchecked-ani2 1s forwards cubic-bezier(0.415, 0.547, 0, 0.809);
}
@keyframes card-result-notchecked-ani2 {
  0%{opacity:1;transform: translateX(0) translateY(0) rotateZ(0);}
  100% {opacity:0;transform: translateX(250px) translateY(300px) rotateZ(42deg);}
}
.section2.result .quiz-card .card-item.checked.item-type2 {
  -webkit-animation: quiz-result-sizeup-ani2 1s forwards;
  animation: quiz-result-sizeup-ani2 1s forwards;
}
@-webkit-keyframes quiz-result-sizeup-ani2 {
  0% { opacity: 1; -webkit-transform: translateX(0) scale(0.7345); }
  100% { opacity: 1; -webkit-transform: translateX(-50%) scale(0.9); }
}
@keyframes quiz-result-sizeup-ani2 {
  0% { opacity: 1; transform: translateX(0) scale(0.7345); }
  100% { opacity: 1; transform: translateX(-50%) scale(0.9); }
}
/* 오른쪽 정답 선택시 */
.section2.result .quiz-card .card-item:not(.checked).item-type1 {
  animation: card-result-notchecked-ani 1s forwards cubic-bezier(0.415, 0.547, 0, 0.809);
}
@keyframes card-result-notchecked-ani {
  0%{opacity:1;transform: translateX(0) translateY(0) rotateZ(0);}
  100% {opacity:0;transform: translateX(-250px) translateY(300px) rotateZ(-42deg);}
}
.section2.result .quiz-card .card-item.checked.item-type1 {
  -webkit-animation: quiz-result-sizeup-ani 1s forwards;
  animation: quiz-result-sizeup-ani 1s forwards;
}
@-webkit-keyframes quiz-result-sizeup-ani {
  0% { opacity: 1; -webkit-transform: translateX(0) scale(0.7345); }
  100% { opacity: 1; -webkit-transform: translateX(50%) scale(0.9); }
}
@keyframes quiz-result-sizeup-ani {
  0% { opacity: 1; transform: translateX(0) scale(0.7345); }
  100% { opacity: 1; transform: translateX(50%) scale(0.9); }
}
.section2.result .quiz-card .card-item.checked::after {
  display:none;
}
.section2 .quiz-card .card-item::after {
  content:"";
  position:absolute;
  top:12px;
  right:12px;
  display:inline-block;
  width:30px;
  height:30px;
  border-radius: 50%;
  background:rgba(0,0,0,0.2) url(https://og.kakaobank.io/view/2b55964a-5eee-407a-832a-a53613e94ba7) no-repeat center / 12px;
}
.section2 .quiz-card .card-item.checked::after {
  background-color:#000;
}
.section2 .quiz-card .card-item:not(.checked){
  cursor: pointer;
}
.section2 .quiz-card .card-item .artist-box {
  margin:2px 9px 0;
  /* height:67px; */
}
.section2 .quiz-card .card-item .artist-box .artist {
  color: #030300;
  font-size: 17px;
  font-weight: 500;
  line-height: 26px;
  opacity: 0.6;
  word-break: keep-all;
}
.section2 .quiz-card .card-item .artist-box .song {
  margin-top:6px;
  color: #000;
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
}
.section2 .quiz-card .card-item .photo {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  /* width:150px; */
  width:196px;
  text-align:center;
  line-height: 0;
}

.section2 .btn-box,
.section2 .btn-box2 {
  position:absolute;
  bottom:34px;
  bottom:4.6vh;
  width:100%;
  height:60px;
  text-align: center;                
  box-sizing:border-box;
  transition:all 0.3s 1s;
  padding:0 16px;
  opacity: 0;
  display:none;
}
.section2.quiz .btn-box {
  display:block;
  -webkit-animation: btn-quiz-slideup-ani 0.5s forwards 0.1s;
  animation: btn-quiz-slideup-ani 0.5s forwards 0.1s;
}
@-webkit-keyframes btn-quiz-slideup-ani {
  0% { opacity: 0; -webkit-transform: translateY(50px); }
  100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes btn-quiz-slideup-ani {
  0% { opacity: 0; transform: translateY(50px); }
  100% { opacity: 1; transform: translateY(0); }
}
.section2.result .btn-box {
  /* -webkit-animation: btn-quiz-slidedown-ani 0s forwards;
  animation: btn-quiz-slidedown-ani 0s forwards; */
  opacity: 0;
  display: none;
}
/* @-webkit-keyframes btn-quiz-slidedown-ani {
  0% { opacity: 1; -webkit-transform: translateY(0); }
  100% { opacity: 0; -webkit-transform: translateY(50px); }
}
@keyframes btn-quiz-slidedown-ani {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(50px); }
} */
.section2 .btn-box .btn-select {
  display:flex;
  justify-content: center;
  align-items: center;
  width:100%;
  height:100%;
  margin:0 auto 20px;
  font-size:17px;
  font-weight:700;
  line-height:21px;
  color:#000;
  text-align:center;
  border-radius:12px;
  text-decoration:none;
  background:#fff;
}
.section2.result .btn-box2 {
  display:block;
  -webkit-animation: btn-quiz-slideup-ani 0.5s forwards 0.7s;
  animation: btn-quiz-slideup-ani 0.5s forwards 0.7s;
} 
.section2 .btn-box2 .btn-entry {
  display:flex;
  justify-content: center;
  align-items: center;
  width:100%;
  height:100%;
  margin:0 auto 20px;
  font-size:17px;
  font-weight:700;
  line-height:21px;
  color:#000;
  text-align:center;
  border-radius:12px;
  text-decoration:none;
  background:#EAFE00;
}
/* result - 정답 */
.section2 .answer-box {
  position:absolute;
  bottom:0;
  width: 100%;
  opacity: 0;
}
.section2.result .answer-box {
  -webkit-animation: answer-result-slideup-ani 1.2s forwards ;
  animation: answer-result-slideup-ani 1.2s forwards ;
}
@-webkit-keyframes answer-result-slideup-ani {
  0%,10% { opacity: 0; bottom:114px; bottom:15.7vh}
  10%, 70% { opacity: 1; bottom:114px; bottom:15.7vh}
  100% { opacity: 1;  bottom:128px; bottom:17.6vh; }
}
@keyframes answer-result-slideup-ani {
  0%,10% { opacity: 0; bottom:114px;  bottom:15.7vh}
  10%, 70% { opacity: 1; bottom:114px; bottom:15.7vh}
  100% { opacity: 1;  bottom:128px; bottom:17.6vh; }
}
.section2 .answer-box .answer {
  display: none;
}
.section2 .answer-box .answer.on {
  display: block;
}
.section2 .answer-box strong {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #EAFE00;
  font-size: 19px;
  font-weight: 700;
  line-height: 23px;
}
.section2 .answer-box p {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top:9px;
}
.section2 .answer-box strong > span,
.section2 .answer-box p > span {
  display: flex;
  justify-content: center;
}
.section2 .answer-box strong > span::after,
.section2 .answer-box p > span::after {
  content:"";
  display:inline-block;
  margin-left:4px;
  background-repeat:no-repeat;
  background-position: 0;
  background-size:100%;
}
.section2 .answer-box strong > span::after {
  width:24px;
  height:24px;
}
.section2 .answer-box .correct-answer strong > span::after {
  background-image:url(https://og.kakaobank.io/view/9d54858a-f982-4008-8875-894df8f3b37c);
}
.section2 .answer-box  .correct-answer p > span::after {
  width:20px;
  height:20px;
  background-image:url(https://og.kakaobank.io/view/986f529a-22f8-4722-b9e9-eb8c3085444b);
}
.section2 .answer-box .wrong-answer strong > span::after {
  background-image:url(https://og.kakaobank.io/view/e4b125a8-4e6b-4ffc-9c6c-314546c3b114);
}
.section2 .bg-intro {
  position: absolute;
  /* right: -300px;
  bottom: -515px;
  width: 1327px; */
  right: -610px;
  bottom: -830px;
  width: 1964px;
  height:1692px;
  max-width: none;
  background:url(https://og.kakaobank.io/view/c776538e-ca62-4785-bb92-55af4619c737) no-repeat 0 / 100%;
  animation: bounceBg-ani 12s ease-in-out 0s infinite;
}
@keyframes bounceBg-ani {
  0%, 100% { transform: translateX(0px) translateY(50px); }
  40%, 70% { transform: translateX(90px) translateY(120px); }
}

/* section3 : cash 영역 */
.section3 {
  color:#000;
  background: #EAFE00;
}
.section3 .inner {
  position:relative;
  padding-top:56px;
  padding-bottom:0;
  text-align: center;
}
.section3 .img-cash {
  width:148px;
  height:185px;
}
.section3 .info-box {
  margin-top:19px;
  opacity:0;
  transform:translate(0, 50px);
}
.section3.on .info-box {
  opacity:1;
  transform:translate(0, 0);
  transition: opacity 0.6s 0.3s, transform 0.6s 0.3s;
}
.section3 .info-box strong {
  font-size: 26px;
  font-weight: 700;
  line-height: 30px;
}
.section3 .info-box p {
  margin-top:20px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}
.section3 .mma-box {
  position:relative;
  margin-top:46px;
  padding:80px 18px 30px;
  border-radius: 24px;
  background:#fff;
  box-sizing: border-box;
  opacity:0;
  transform:translate(0, 50px);
}
.section3.on .mma-box {
  opacity:1;
  transform:translate(0, 0);
  transition: opacity 0.6s 0.5s, transform 0.6s 0.5s;
}
.section3 .mma-box .badge {
  position:absolute;
  top:17px;
  right:18px;
  padding:8px 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 15.51px;
  border-radius: 8px;
  background: #EAFE00;
}
.section3 .mma-box .tit {
  display:block;
  margin-bottom:43px;
  font-size: 22px;
  font-weight: 700;
  line-height: 26.25px;
  letter-spacing: -0.005em;
}
.section3 .mma-box .img-mma {
  max-width:290px;
}
.section3 .mma-box .desc {
  margin-top:30px;
  font-size: 17px;
  font-weight: 700;
  line-height: 25.5px;
  word-break: keep-all;
}
.section3 .mma-box .desc span {
  color: #00E101;
}
.section3 .noti-box {
  display:flex;
  align-items: center;
  justify-content: space-between;
  margin-top:32px;
}
.section3 .noti-box .txt {
  font-size: 15px;
  font-weight: 700;
  line-height: 17.9px;
}
.section3 .noti-box .txt::before {
  content:"";
  display:inline-block;
  width:32px;
  height:32px;
  margin-right:4px;
  vertical-align: middle;
  background:url(https://og.kakaobank.io/view/1c254345-558c-4ced-831d-b5e3c206835c) no-repeat 0 / 100%;
}
.section3 .noti-box .btn-noti,
.section3 .noti-box .btn-noti-cancel {
  display:inline-block;
  padding: 12px 16px;
  color:#fff;
  border-radius: 10px;
  background: #333B58;
  display: none;
}

.section3 .noti-box .btn-noti-cancel {
  background:#999999;
}

.section3 .noti-box .btn-noti.on,
.section3 .noti-box .btn-noti-cancel.on {
  display: block;
}

/* 공유하기 커스텀 */
#share {
  padding-top:60px;
  padding-bottom:60px;
  background: #EAFE00;
}
.theme-default  #share .share-btn {
  color:#000;
  background:#fff;
}
.theme-default  #share .share-btn svg path {
  fill:#000;
}


@media screen and (min-width: 768px) {
}
@media screen and (max-width: 767.98px) {
}
@media screen and (max-width: 360.98px) {
  .section2 .quiz-card {
    transform: translateX(-50%) scale(0.7);
  }
  /* @-webkit-keyframes card-result-slideup-ani {
    100% { opacity: 1;bottom: 29vh;-webkit-transform: translateX(-50%) scale(0.9); }
  }
  @keyframes card-result-slideup-ani {
    100% { opacity: 1;bottom: 29vh;transform: translateX(-50%) scale(0.9); }
  } */
}
  @media screen and (min-height: 615px) and (max-height: 670.98px) {
  .section2 .quiz-card {
    -webkit-transform: translateX(-50%) scale(0.7);
    transform: translateX(-50%) scale(0.7);
  }
  @-webkit-keyframes quiz-result-sizeup-ani2 {
    100% {opacity: 1; -webkit-transform: translateX(-50%) scale(0.9);}
  }
  @keyframes quiz-result-sizeup-ani2 {
    100% {opacity: 1; transform: translateX(-50%) scale(0.9);}
  }
}
@media screen and (max-height: 614.98px) {
  @-webkit-keyframes lyrics-slideup-ani {
    0% { opacity: 0; top:34.5vh; -webkit-transform: scale(0.75); }
    100% { opacity: 1; top:23.5vh; -webkit-transform: scale(1); }
  }
  @keyframes lyrics-slideup-ani {
    0% { opacity: 0; top:34.5vh; transform: scale(0.75); }
    100% { opacity: 1; top:23.5vh; transform: scale(1); }
  }
  @-webkit-keyframes lyrics-quiz-slideup-ani {
    0% { opacity: 1; top:23.5vh; }
    100% { opacity: 1; top: 14.5vh; } 
  }
  @keyframes lyrics-quiz-slideup-ani {
    0% { opacity: 1; top:23.5vh; }
    100% { opacity: 1; top: 14.5vh; } 
  }
} 
@media screen and (min-height: 567px) and (max-height: 614.98px) {
  @keyframes card-result-slideup-ani {
    0% { opacity: 0;bottom: 23.5vh; }
    100% { opacity: 1; bottom: 26vh; transform: translateX(-50%); }
  }
} 
@media screen and (max-height: 566.98px) {
  .section2.quiz .date {
    top:6vh;
  }
  @keyframes lyrics-quiz-slideup-ani{
    0% { opacity: 1; top:23.5vh; }
    100% { opacity: 1; top:13.5vh;}
  }
  @keyframes answer-result-slideup-ani {
    0%,10% { opacity: 0;  bottom:17vh}
    10%, 70% { opacity: 1; bottom:17vh}
    100% { opacity: 1;   bottom:19.5vh; }
  }
  @keyframes card-result-slideup-ani {
    0% {opacity: 0;bottom: 21.3vh;}
    100% { opacity: 1;bottom: 25vh;transform: translateX(-50%) scale(1); }
  }
} 

.d-none {
  display: none;
}


a.click-mot {
  position:relative;
  transition:transform 0.1s;
}
a.click-mot::after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,0.25);
  opacity:0;
  transition:opacity 0.1s;
}
a.click-mot:active {
  transform: scale(0.95);
}

a.click-mot:active::after {
  opacity:1;
}

.section-top,
.section1,
.section2 {
  height:100vh;
}