.view_1 {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-bottom: 30px;
  cursor: pointer;
}
.view_2,
.view_3 {
  width: 100%;
  cursor: pointer;
  background-color: #e4f2f4;
  margin-bottom: 30px;
}
.view_inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 40px 0;
}
.view_top_text_box {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.view_top_text_box.newyear_lucky {
  position: absolute;
  top: 18%;
}
.view_top_text_box.newyear_love,
.view_top_text_box.newyear_money,
.view_top_text_box.newyear_overcome,
.view_top_text_box.newyear_sign {
  position: absolute;
  top: 8%;
}

.view_title {
  font-size: 3.6rem;
  text-align: center;
  font-family: 'Do Hyeon', 'Noto Sans KR', 'Inter', sans-serif;
  text-shadow: -2px -2px 0 #fff, 0 -2px 0 #fff, 2px -2px 0 #fff, -2px 0 0 #fff, 2px 0 0 #fff,
    -2px 2px 0 #fff, 0 2px 0 #fff, 2px 2px 0 #fff;
  white-space: pre-line;
}

.view_title .red {
  color: red;
}
.view_title.gold {
  color: rgb(255, 229, 82);
  text-shadow: -2px -2px 0 #000, 0 -2px 0 #000, 2px -2px 0 #000, -2px 0 0 #000, 2px 0 0 #000,
    -2px 2px 0 #000, 0 2px 0 #000, 2px 2px 0 #000;
}
.view_title.purple {
  color: rgb(70, 2, 70);
}
.view_sub_title {
  text-align: center;
  font-size: var(--size-xs);
  font-weight: 600;
  color: var(--color-black2);
  white-space: pre-line;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.view_sub_title.newyear_love,
.view_sub_title.newyear_money,
.view_sub_title.newyear_overcome {
  color: var(--color-white);
}

.view_button_text {
  position: absolute;
  top: 74%;
  font-size: var(--size-lg);
  font-weight: 600;
  color: var(--color-white);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 30px;
  border-radius: 100px;
  width: 50%;
}
.view_button_text.newyear_lucky {
  background-color: #912f0c;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.6);
  border: 2px solid rgb(87, 11, 11);
}

.view_button_text.newyear_love {
  top: 69%;
  background-color: #852b33;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.6);
  border: 2px solid #5a040b;
}
.view_button_text.newyear_money {
  top: 69%;
  background-color: #2b4884;
  box-shadow: 0px 4px 12px rgba(3, 1, 1, 0.6);
  border: 2px solid #0d1c3b;
}
.view_button_text.newyear_overcome {
  top: 67%;
  background-color: #2b4884;
  box-shadow: 0px 4px 12px rgba(3, 1, 1, 0.6);
  border: 2px solid #0d1c3b;
}
.view_button_text.newyear_sign {
  top: 36%;
  right: 11%;
  width: 100px;
  height: 100px;
  padding: 10px;
  background-color: #7e98b8;
  border-radius: 50%;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.6);
  border: 1px solid #4b6686;
}
.view_bottom_text {
  text-align: center;
  font-size: var(--size-xs);
  font-weight: 600;
  color: var(--color-black2);
  position: absolute;
  bottom: 6%;
  white-space: pre-line;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.view_bottom_text.newyear_love,
.view_bottom_text.newyear_money,
.view_bottom_text.newyear_overcome {
  bottom: 9%;
}
.view_bottom_text.newyear_sign {
  color: white;
  bottom: 12%;
}

.view_direction_text {
  text-align: center;
  font-weight: 500;
  font-size: 12px;
  color: var(--color-white);
  white-space: pre-line;
}

.result_tarot_card_img_list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 12px;
  justify-items: center;
  justify-content: center;
  margin: 20px auto 0;
  width: 100%;
  max-width: 360px;
  padding: 0 30px;
}
.result_tarot_card_img_list img {
  width: 90px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.result_tarot_card_img {
  display: block;
  margin: 0 auto;
}

.result_tarot_card {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 160px;
  height: 233px;
  background: url('/img/newYearFortune/cardFrame1.webp');
  background-size: 160px 233px;
  padding-top: 17px;
  background-repeat: no-repeat;
}
.tarot_result_title {
  position: relative;
  width: 100%;
  height: 30px;
  background: linear-gradient(to bottom, #dc4b00 0%, #c01d00 100%);
  background-size: 4px 34px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  font-size: var(--size-sm);
  font-weight: var(--weight-large);
}

.key {
  color: #a80701;
  text-align: center;
  font-size: var(--size-sm);
  font-weight: var(--weight-large);
}

.sazoo_cont_text {
  text-align: left;
  font-size: var(--size-base);
  font-weight: var(--weight-regular);
}
.view_1.full_bg,
.view_2.full_bg,
.view_3.full_bg {
  background: url(/img/newYearFortune/zu_bg_red.webp);
  background-size: 320px 1000px;
  padding-bottom: 20px;
}
.card_list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
  gap: 10px;
  justify-content: center;
  width: 100%;
  padding: 0 30px;
  max-width: 360px;
  margin: 0 auto;
}

.card_list li {
  text-align: center;
}

.card_list img {
  width: 90px;
}

.img_main {
  width: 100%;
  display: flex;
  justify-content: center;
}
.gae {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 156px;
  height: 156px;
  background: url(/img/newYearFortune/gae_bg.png);
  background-size: 156px 158px;
  padding-top: 17px;
  background-repeat: no-repeat;
}

.gae img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.zu_result_title {
  position: relative;
  width: 100%;
  height: 24px;
  background: url(/img/newYearFortune/title_bg.png) repeat;
  background-size: 26px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  font-size: var(--size-sm);
  font-weight: var(--weight-large);
}

.consult_report {
  width: 100%;
  padding: 0 20px;
}
.consult_report_tarot {
  width: 100%;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.consult_report_inner {
  background: url(/img/newYearFortune/result_text_bg.png);
  padding: 16px;
  border-radius: var(--border-radius-s);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.consult_report_row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media screen and (max-width: 500px) {
  .view_bottom_text.newyear_love,
  .view_bottom_text.newyear_money,
  .view_bottom_text.newyear_sign {
    bottom: 6%;
  }
  .view_bottom_text.newyear_sign {
    bottom: 8%;
  }
}
@media screen and (max-width: 420px) {
  .view_title {
    font-size: 2.8rem;
  }
  .view_button_text {
    font-size: var(--size-base);
    padding: 6px 12px;
  }
}

@media screen and (max-width: 360px) {
  .view_title {
    font-size: 2.8rem;
  }
  .view_button_text {
    font-size: var(--size-xs);
  }
  .view_button_text.newyear_sign {
    top: 39%;
    right: 5%;
    width: 60px;
    height: 60px;
  }
  .view_bottom_text {
    font-size: var(--size-xxs);
  }
}