@charset "UTF-8";
/* =================================================================
   1. [SCSS Variables] Raw Data Definition
   * 이곳은 '순수 값'만 정의합니다. 실제 코드에서는 사용하지 않는 것을 권장합니다.
   * 브랜드 컬러 코드가 바뀌면 여기만 수정하세요.
   ================================================================= */
/* 드롭다운,멀티포함 */
/**
 * @mixin responsive
 * 모바일 시안(375px) 기준의 수치를 입력받아 모바일~태블릿 구간을 처리합니다.
 * @param $property : CSS 속성 (font-size, margin, padding 등)
 * @param $values : 적용할 값 (375px 시안 기준 px값 입력)
 * * [구간별 동작]
 * 1. Mobile (~767px): 375px 기준 VW 단위 (화면 폭에 비례하여 유동적 스케일링)
 * 2. Tablet (768px ~ 1199px): REM 단위 (가독성 유지를 위해 폰트 베이스로 고정)
 * 3. PC (1200px~): PX 단위 (원래는 고정되나, 보통 이 구간부터는 pc-scale 믹스인으로 덮어씀)
 */
/**
 * @mixin pc-scale
 * PC 시안(1440px) 기준의 수치를 입력받아 노트북 배율 환경에 대응합니다.
 * (수정됨: padding: 15px 25px 처럼 다중 값을 받을 수 있도록 업그레이드)
 * @param $property : CSS 속성
 * @param $values : 적용할 값 (1440px 시안 기준 다중 px값 입력 가능)
 */
/* =================================================================
   [Age Gate] 연령 인증 페이지 스타일
   ================================================================= */
.age-gate-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.age-gate-wrap .age-content {
  position: relative;
  z-index: 10;
}
.age-gate-wrap .icon-warning {
  width: 24.5333vw;
}
@media (min-width: 768px) {
  .age-gate-wrap .icon-warning {
    width: 5.75rem;
  }
}
@media (min-width: 1200px) {
  .age-gate-wrap .icon-warning {
    width: 92px;
  }
}
.age-gate-wrap .icon-warning {
  height: 21.3333vw;
}
@media (min-width: 768px) {
  .age-gate-wrap .icon-warning {
    height: 5rem;
  }
}
@media (min-width: 1200px) {
  .age-gate-wrap .icon-warning {
    height: 80px;
  }
}
.age-gate-wrap .icon-warning {
  margin: 0vw auto 10.6667vw auto;
}
@media (min-width: 768px) {
  .age-gate-wrap .icon-warning {
    margin: 0rem auto 2.5rem auto;
  }
}
@media (min-width: 1200px) {
  .age-gate-wrap .icon-warning {
    margin: 0px auto 40px auto;
  }
}
.age-gate-wrap .icon-warning svg {
  width: 100%;
  height: 100%;
}
.age-gate-wrap h2 {
  font-weight: 700;
  line-height: 1.4;
  color: #372817;
  font-size: 7.4667vw;
}
@media (min-width: 768px) {
  .age-gate-wrap h2 {
    font-size: 1.75rem;
  }
}
@media (min-width: 1200px) {
  .age-gate-wrap h2 {
    font-size: 28px;
  }
}
.age-gate-wrap h2 {
  margin-bottom: 17.0667vw;
}
@media (min-width: 768px) {
  .age-gate-wrap h2 {
    margin-bottom: 4rem;
  }
}
@media (min-width: 1200px) {
  .age-gate-wrap h2 {
    margin-bottom: 64px;
  }
}
.age-gate-wrap h2 .highlight {
  color: #372817;
  background: linear-gradient(to top, #f4f4f4 40%, transparent 40%);
}
.age-gate-wrap .btn-group {
  display: flex;
  justify-content: center;
  gap: 4.2667vw;
}
@media (min-width: 768px) {
  .age-gate-wrap .btn-group {
    gap: 1rem;
  }
}
@media (min-width: 1200px) {
  .age-gate-wrap .btn-group {
    gap: 16px;
  }
}
.age-gate-wrap .btn-group button {
  font-weight: 600;
  border: none;
  cursor: pointer;
  width: 32vw;
}
@media (min-width: 768px) {
  .age-gate-wrap .btn-group button {
    width: 7.5rem;
  }
}
@media (min-width: 1200px) {
  .age-gate-wrap .btn-group button {
    width: 120px;
  }
}
.age-gate-wrap .btn-group button {
  height: 13.8667vw;
}
@media (min-width: 768px) {
  .age-gate-wrap .btn-group button {
    height: 3.25rem;
  }
}
@media (min-width: 1200px) {
  .age-gate-wrap .btn-group button {
    height: 52px;
  }
}
.age-gate-wrap .btn-group button {
  border-radius: 13.8667vw;
}
@media (min-width: 768px) {
  .age-gate-wrap .btn-group button {
    border-radius: 3.25rem;
  }
}
@media (min-width: 1200px) {
  .age-gate-wrap .btn-group button {
    border-radius: 52px;
  }
}
.age-gate-wrap .btn-group button {
  font-size: 4.8vw;
}
@media (min-width: 768px) {
  .age-gate-wrap .btn-group button {
    font-size: 1.125rem;
  }
}
@media (min-width: 1200px) {
  .age-gate-wrap .btn-group button {
    font-size: 18px;
  }
}
.age-gate-wrap .btn-group .btn-yes {
  background-color: #372817;
  color: #fff;
}
.age-gate-wrap .btn-group .btn-no {
  border: 2px solid #372817;
  background-color: #fff;
  color: #372817;
}

/* =================================================================
   [Age Gate] 배경 이미지 애니메이션 설정
   ================================================================= */
.bg-item {
  position: absolute;
  z-index: 1;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  animation-duration: 0.8s;
  animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
  animation-fill-mode: both;
}

/* 1. 좌측 상단 (위-왼쪽 대각선에서 진입) */
.bg-lt {
  top: 0;
  left: 0;
  background-image: url("/static/images/main/ageLT.webp");
  background-position: top left;
  animation-name: slideInLT;
  width: 93.3333vw;
}
@media (min-width: 768px) {
  .bg-lt {
    width: 21.875rem;
  }
}
@media (min-width: 1200px) {
  .bg-lt {
    width: 350px;
  }
}
.bg-lt {
  height: 40.5333vw;
}
@media (min-width: 768px) {
  .bg-lt {
    height: 9.5rem;
  }
}
@media (min-width: 1200px) {
  .bg-lt {
    height: 152px;
  }
}
@media screen and (min-width: 1200px) {
  .bg-lt {
    width: 600px;
    height: 260px;
  }
}

@keyframes slideInLT {
  0% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
/* 2. 좌측 중앙 (왼쪽 수평에서 진입) */
.bg-lm {
  background-image: url("/static/images/main/ageLM.webp");
  background-position: center left;
  animation-name: slideInLM;
  top: 7.2vw;
}
@media (min-width: 768px) {
  .bg-lm {
    top: 1.6875rem;
  }
}
@media (min-width: 1200px) {
  .bg-lm {
    top: 27px;
  }
}
.bg-lm {
  right: 5.8667vw;
}
@media (min-width: 768px) {
  .bg-lm {
    right: 1.375rem;
  }
}
@media (min-width: 1200px) {
  .bg-lm {
    right: 22px;
  }
}
.bg-lm {
  width: 24.8vw;
}
@media (min-width: 768px) {
  .bg-lm {
    width: 5.8125rem;
  }
}
@media (min-width: 1200px) {
  .bg-lm {
    width: 93px;
  }
}
.bg-lm {
  height: 23.4667vw;
}
@media (min-width: 768px) {
  .bg-lm {
    height: 5.5rem;
  }
}
@media (min-width: 1200px) {
  .bg-lm {
    height: 88px;
  }
}
@media screen and (min-width: 1200px) {
  .bg-lm {
    right: auto;
    top: 252px;
    left: 43px;
    width: 186px;
    height: 177px;
  }
}

@keyframes slideInLM {
  0% {
    transform: translateX(-50%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
/* 3. 좌측 하단 (아래-왼쪽 대각선에서 진입) */
.bg-lb {
  background-image: url("/static/images/main/ageLB.webp");
  background-position: bottom left;
  animation-name: slideInLB;
  bottom: -6.4vw;
}
@media (min-width: 768px) {
  .bg-lb {
    bottom: -1.5rem;
  }
}
@media (min-width: 1200px) {
  .bg-lb {
    bottom: -24px;
  }
}
.bg-lb {
  left: -1.3333vw;
}
@media (min-width: 768px) {
  .bg-lb {
    left: -0.3125rem;
  }
}
@media (min-width: 1200px) {
  .bg-lb {
    left: -5px;
  }
}
.bg-lb {
  width: 45.8667vw;
}
@media (min-width: 768px) {
  .bg-lb {
    width: 10.75rem;
  }
}
@media (min-width: 1200px) {
  .bg-lb {
    width: 172px;
  }
}
.bg-lb {
  height: 46.4vw;
}
@media (min-width: 768px) {
  .bg-lb {
    height: 10.875rem;
  }
}
@media (min-width: 1200px) {
  .bg-lb {
    height: 174px;
  }
}
@media screen and (min-width: 1200px) {
  .bg-lb {
    bottom: 0;
    left: 0;
    width: 339px;
    height: 342px;
  }
}

@keyframes slideInLB {
  0% {
    transform: translate(-50%, 50%);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
/* 4. 우측 상단 (위-오른쪽 대각선에서 진입) */
.bg-rt {
  background-image: url("/static/images/main/ageRT.webp");
  background-position: top right;
  animation-name: slideInRT;
  top: 31.2vw;
}
@media (min-width: 768px) {
  .bg-rt {
    top: 7.3125rem;
  }
}
@media (min-width: 1200px) {
  .bg-rt {
    top: 117px;
  }
}
.bg-rt {
  right: -15.4667vw;
}
@media (min-width: 768px) {
  .bg-rt {
    right: -3.625rem;
  }
}
@media (min-width: 1200px) {
  .bg-rt {
    right: -58px;
  }
}
.bg-rt {
  width: 33.6vw;
}
@media (min-width: 768px) {
  .bg-rt {
    width: 7.875rem;
  }
}
@media (min-width: 1200px) {
  .bg-rt {
    width: 126px;
  }
}
.bg-rt {
  height: 36.8vw;
}
@media (min-width: 768px) {
  .bg-rt {
    height: 8.625rem;
  }
}
@media (min-width: 1200px) {
  .bg-rt {
    height: 138px;
  }
}
@media screen and (min-width: 1200px) {
  .bg-rt {
    top: 112px;
    right: -10px;
    width: 252px;
    height: 275px;
  }
}

@keyframes slideInRT {
  0% {
    transform: translate(50%, -50%);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
/* 5. 우측 하단 (아래-오른쪽 대각선에서 진입) */
.bg-rb {
  bottom: 0;
  right: 0;
  width: 350px;
  height: 400px;
  background-image: url("/static/images/main/ageRB.webp");
  background-position: bottom right;
  animation-name: slideInRB;
  bottom: -6.4vw;
}
@media (min-width: 768px) {
  .bg-rb {
    bottom: -1.5rem;
  }
}
@media (min-width: 1200px) {
  .bg-rb {
    bottom: -24px;
  }
}
.bg-rb {
  right: -10.1333vw;
}
@media (min-width: 768px) {
  .bg-rb {
    right: -2.375rem;
  }
}
@media (min-width: 1200px) {
  .bg-rb {
    right: -38px;
  }
}
.bg-rb {
  width: 54.4vw;
}
@media (min-width: 768px) {
  .bg-rb {
    width: 12.75rem;
  }
}
@media (min-width: 1200px) {
  .bg-rb {
    width: 204px;
  }
}
.bg-rb {
  height: 56.2667vw;
}
@media (min-width: 768px) {
  .bg-rb {
    height: 13.1875rem;
  }
}
@media (min-width: 1200px) {
  .bg-rb {
    height: 211px;
  }
}
@media screen and (min-width: 1200px) {
  .bg-rb {
    width: 408px;
    height: 422px;
    bottom: 0;
    right: 0;
  }
}

@keyframes slideInRB {
  0% {
    transform: translate(50%, 50%);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
#ageGateAlert .modal-layer .modal-body {
  padding: 12.2667vw;
}
@media (min-width: 768px) {
  #ageGateAlert .modal-layer .modal-body {
    padding: 2.875rem;
  }
}
@media (min-width: 1200px) {
  #ageGateAlert .modal-layer .modal-body {
    padding: 46px;
  }
}
#ageGateAlert .modal-layer .modal-body .msg {
  text-align: center;
  font-weight: 600;
  font-size: 6.4vw;
}
@media (min-width: 768px) {
  #ageGateAlert .modal-layer .modal-body .msg {
    font-size: 1.5rem;
  }
}
@media (min-width: 1200px) {
  #ageGateAlert .modal-layer .modal-body .msg {
    font-size: 24px;
  }
}
#ageGateAlert .modal-layer .modal-body .msg {
  margin-bottom: 6.4vw;
}
@media (min-width: 768px) {
  #ageGateAlert .modal-layer .modal-body .msg {
    margin-bottom: 1.5rem;
  }
}
@media (min-width: 1200px) {
  #ageGateAlert .modal-layer .modal-body .msg {
    margin-bottom: 24px;
  }
}
#ageGateAlert .modal-layer .modal-body .msg strong {
  font-weight: 800;
  color: #372817;
}
#ageGateAlert .modal-layer .modal-body .btn-row {
  display: flex;
  justify-content: center;
  align-items: center;
}
#ageGateAlert .modal-layer .modal-body .btn-row button {
  color: #fff;
  font-weight: 600;
  border: none;
  cursor: pointer;
  background-color: #372817;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42.6667vw;
}
@media (min-width: 768px) {
  #ageGateAlert .modal-layer .modal-body .btn-row button {
    width: 10rem;
  }
}
@media (min-width: 1200px) {
  #ageGateAlert .modal-layer .modal-body .btn-row button {
    width: 160px;
  }
}
#ageGateAlert .modal-layer .modal-body .btn-row button {
  height: 13.8667vw;
}
@media (min-width: 768px) {
  #ageGateAlert .modal-layer .modal-body .btn-row button {
    height: 3.25rem;
  }
}
@media (min-width: 1200px) {
  #ageGateAlert .modal-layer .modal-body .btn-row button {
    height: 52px;
  }
}
#ageGateAlert .modal-layer .modal-body .btn-row button {
  border-radius: 13.8667vw;
}
@media (min-width: 768px) {
  #ageGateAlert .modal-layer .modal-body .btn-row button {
    border-radius: 3.25rem;
  }
}
@media (min-width: 1200px) {
  #ageGateAlert .modal-layer .modal-body .btn-row button {
    border-radius: 52px;
  }
}
#ageGateAlert .modal-layer .modal-body .btn-row button {
  font-size: 4.8vw;
}
@media (min-width: 768px) {
  #ageGateAlert .modal-layer .modal-body .btn-row button {
    font-size: 1.125rem;
  }
}
@media (min-width: 1200px) {
  #ageGateAlert .modal-layer .modal-body .btn-row button {
    font-size: 18px;
  }
}