@charset "UTF-8";
.text-caption {
  font-size: 0.75rem;
} /* 12px */
.text-body-sm {
  font-size: 0.875rem;
} /* 14px */
.text-body {
  font-size: 1rem;
} /* 16px (기본) */
.text-subhead {
  font-size: 1.25rem;
} /* 20px */
.text-h3 {
  font-size: 1.5rem;
} /* 24px */
.text-h2 {
  font-size: 2rem;
} /* 32px */
.text-h1 {
  font-size: 2.5rem;
} /* 40px */
.text-display {
  font-size: 3.5rem;
}
.text-main-title {
  font-size: 5rem;
}
 /* 56px (매우 큰 강조 문구) */
/* 1. 모바일 기본 (화면 너비 576px 미만) */
html {
  font-size: 62.5%; /* 기본 16px -> 10px로 변환 (1rem = 10px) */
}
/* 2. 태블릿 화면 (576px 이상 ~ 992px 미만) */
@media (min-width: 576px) {
  html {
    font-size: 68.75%; /* 1rem = 11px로 약간 키움 */
  }
}
/* 3. 데스크톱/PC 화면 (992px 이상 ~ 1400px 미만) */
@media (min-width: 992px) {
  html {
    font-size: 75%; /* 1rem = 12px로 키움 */
  }
}
/* 4. 대형 모니터 화면 (1400px 이상) */
@media (min-width: 1400px) {
  html {
    font-size: 87.5%; /* 1rem = 14px로 대폭 키움 */
  }
}
* {
  margin: 0px;
}
html * {
  box-sizing: border-box;
  word-break: keep-all;
}
a {
  text-decoration: none;
  color: inherit;
}
.key-color {
  color: #00ac5c;
}
.text-center {
  text-align: center !important;
}
.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-row-space-between {
  display: flex;
  justify-content: space-between;
}
.flex-row-center {
  display: flex;
  justify-content: center;
}
.flex-row-right-center {
  display: flex;
  justify-content: right;
  align-items: center;
}
.flex-row-center-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.bg-light-green {
  background-color: #f2fbe9 !important;
}
.bg-light-grey {
  background-color: #ececec !important;
}
.yellow {
  color: #fff56a !important;
}
.green {
  color: #009e22 !important;
}
.container {
  width: 100%;
}
.quiz-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5vh 5vw;
  height: 100dvh;
  min-height: 700px;
  width: 100dvw;
}
.intro-container {
  display: flex;
  justify-content: center;
  height: 100dvh;
  min-height: 700px;
  width: 100dvw;
  padding: 0px 20px;
}
.bg-1 {
  background: url(../images/bg.png) no-repeat center/cover !important;
}
.bg-2 {
  background: url(../images/bg-2.png) no-repeat center/cover !important;
}
.bg-3 {
  background: url(../images/bg-3.png) no-repeat center/cover !important;
}
.bg-4 {
  background: url(../images/bg-4.png) no-repeat center/cover !important;
}
.flex1 {
  flex: 1;
}
.main-title{
    display: flex;
    justify-content: space-between;
    gap: 10px;
  }
@media (max-width: 450px) {
  .main-title{
    display: flex;
    flex-direction: column;
    padding-top: 15px;
  }
}

.quiz {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background-color: white;
  display: flex;
  flex-direction: column;
}
header {
  display: flex;
  justify-content: space-between;
}
header > .wrap {
  flex: 1;
}
header .wrap1 {
  padding: 40px 15px 15px calc(15px + 3vw);
  display: flex;
  align-items: center;
}
header .wrap2 {
  display: flex;
  justify-content: right;
}
@media (max-width: 450px) {
  header {
    flex-direction: column;
  }
  header .wrap1 {
    order: 1;
    padding: 15px;
  }
}
header .tit {
  color: #0ea42c;
  border: 1px solid #0ea42c;
  border-radius: 10px;
  width: max-content;
  padding: 20px;
}
header .sub-tit-wrap {
  border-radius: 0px 0px 0px 40px;
  background-color: #e8eaf6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0vh 0px 10px 20px;
  width: max-content;
  gap: 3vw;
}
header .sub-tit {
  border-radius: 50px;
  background-color: white;
  padding: 20px 2vw;
}
@media (max-width: 450px) {
  header .sub-tit {
    padding: 10px 2vw;
  }
}
.red-btn {
  background-color: #d80c1b;
  color: white;
  border-radius: 20px;
  padding: 10px;
  text-align: center;
}
main {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  flex: 1;
  padding: 0px 10px;
}
main .quiz-txt {
  text-align: center;
  padding: 10px;
  font-weight: 600;
}
main .quiz-btn-wrap {
  display: flex;
  justify-content: center;
  gap: 2vw;
}
main .quiz-btn-wrap.dummy .quiz-btn {
  height: auto;
  background-color: unset;
  cursor: default;
}
main .quiz-btn-wrap.dummy .quiz-btn img {
  padding-right: 70px;
}
@media (max-width: 550px) {
  main .quiz-btn-wrap.dummy .quiz-btn img {
    display: none;
  }
}
.quiz-btn {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  text-wrap: balance;
}
.quiz-btn1 {
  border-radius: 70px;
  /* flex: 0 0 30%; */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
  height: 30vh;
  width: 500px;
  border: 0px;
}
.quiz-btn2 {
  border-radius: 70px;
  /* flex: 0 0 30%; */
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
  height: 15vh;
  width: 500px;
  padding: 0px 2vw;
  border: 0px;
}
.share-btn {
  border-radius: 70px;
  width: 220px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3px solid #fbbf26;
  color: #fbbf26;
  background-color: white;
}
@media (max-width: 550px) {
  .share-btn {
    height: 40px;
  }
}
.confirm-btn {
  border-radius: 70px;
  width: 250px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  background-color: #00ac5c;
  border: 0px;
}
.apply-btn {
  background-color: #f66355;
  color: white;
}
/* .quiz-btn2::after{
            position: absolute;
            content: ">";
            top: 0px;
            left: 0px;
        } */
/* .quiz-btn2:nth-child(1)::after{
            color: white;
        } */
.right-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 2vw;
}
@media (max-width: 600px) {
  .right-arrow {
    display: none;
  }
  .quiz-btn,
  .quiz-btn2 {
    border-radius: 30px;
  }
}
.quiz-btn2.return {
  color: white;
  background-color: #009e22;
}
.icon {
  width: 180px;
  height: 210px;
}
.icon.bulb {
  width: 180px;
  height: 190px;
}
@media (max-width: 600px) {
  .icon {
    width: 120px;
    height: 150px;
  }
  .icon.bulb {
    width: 120px;
    height: 130px;
  }
}
@media (max-width: 400px) {
  .icon {
    display: none;
  }
}
.participate-form {
  flex: 1;
  justify-content: flex-start;
  gap: max(8vh, 10px);
  max-width: 600px;
  align-items: center;
}
.input-wrap {
  gap: 15px;
}
.input-wrap input[type="text"] {
  border-radius: 20px;
  border: 2px solid #c9c9c9;
  padding: 10px 10px;
  width: min(550px, 80%);
}
.input-wrap label {
  display: flex;
  align-items: center;
}
ul.caution {
  list-style: none;
  padding-left: 0;
}
ul.caution li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  color: #333;
}
ul.caution li::before {
  content: "※";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: bold;
}
.intro .intro-box {
  background: url(../images/bg-3.png) no-repeat center/cover !important;
  border-radius: 20px;
  min-width: 700px;
  height: 90vh;
  min-height: 600px;
  align-items: center;
  justify-content: space-evenly;
  position: relative;
  padding: 0px 10px;
}
@media (max-width: 750px) {
  .intro .intro-box {
    min-height: unset;
    min-width: unset;
    width: 100%;
  }
}
.intro .intro-img {
  display: flex;
  align-items: flex-end;
  width: 90%;
}
.intro .intro-img img {
  width: 100%;
}
@media (max-width: 1100px) {
  .intro .intro-img {
    display: none;
  }
}
.start-btn {
  width: min(300px, 80%);
  height: 80px;
  background-color: #00479d;
  border: 0px;
  border-radius: 30px;
  color: white;
  font-weight: 600;
  cursor: pointer;
}
.char {
  position: absolute;
  width: 200px;
}
.char-1 {
  top: 84%;
  left: 2%;
}
.char-2 {
  top: 77%;
  right: 1%;
}
@media (max-width: 700px) {
  .char {
    width: 150px;
  }
  .char-1 {
    top: 85%;
  }
  .char-2 {
    top: 80%;
  }
}
@media (max-width: 450px) {
  .char {
    display: none;
  }
}
@media (max-width: 500px) {
  .wonder {
    display: none;
  }
  br.on-pc {
    display: none;
  }
}

.share-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 999;
}
.share-modal {
  background: white;
  padding: 30px;
  border-radius: 15px;
  width: 300px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  text-align: center;
  position: relative;
}
.share-modal h3 {
  margin-top: 0;
}
.sns-list {
  display: flex;
  justify-content: space-around;
  margin: 25px 0;
}

.sns-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #333;
  font-size: 12px;
  cursor: pointer;
}

.sns-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 8px;
}
/* 트위터(X) */
.x-tw {
  background: url("../images/ico_twitter.png") no-repeat center/cover;
}
/* 페이스북 */
.fb {
  background: url("../images/ico_facebook.png") no-repeat center/cover;
}
/* 링크 복사 */
.link-copy {
  background-color: #7d7d7d;
}
/* 닫기 버튼 */
.close-btn {
  background: #eee;
  border: none;
  padding: 8px 16px;
  border-radius: 5px;
  cursor: pointer;
}