@font-face {
  font-family: "SeoulMilk";
  src: url('../font/SEOULMILK-1000.woff2') format('woff2'),
    url('../font/SEOULMILK-1000.woff') format('woff');
  font-weight: 900;
  font-display: swap;
}

@font-face {
  font-family: "SeoulMilk";
  src: url('../font/SEOULMILK-500.woff2') format('woff2'),
    url('../font/SEOULMILK-500.woff') format('woff');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url('../font/Pretendard-Light.woff2') format('woff2'),
    url('../font/Pretendard-Light.woff') format('woff');
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url('../font/Pretendard-Regular.woff2') format('woff2'),
    url('../font/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url('../font/Pretendard-Medium.woff2') format('woff2'),
    url('../font/Pretendard-Medium.woff') format('woff');
  font-weight: 500;
  font-display: swap;
}

:root {
  --cream: #F5F0E4;
  --cream-light: #FBF8F0;
  --cream-deep: #EFE7D5;
  --ink: #2C2A24;
  --ink-soft: #6E665A;
  --ink-faint: #9A9081;
  --line: #E3DAC7;

  --green: #1E4D2B;
  --green-light: #2C6B3D;
  --green-tint: #E9F0E1;
  --green-deep: #163A20;

  --gold: #B0863C;
  --gold-light: #C99A48;
  --gold-tint: #F6ECD6;
  --gold-deep: #8A6526;
  --red: #E60012;

  --yellow: #FFD45E;
  --yellow-deep: #F5C144;
  --orange: #F2922A;
  --orange-deep: #E0731A;
  --peach: #FFF1D6;
  --peach-deep: #FFE6B8;
  --bg:#E3CB94;


  --card-shadow: 0 .18rem .5rem -.24rem rgba(44, 42, 36, .30);
  --box-shadow-size: 0 .12rem .26rem -.12rem;

  /* --- Typography --- */
  --f-display: "SeoulMilk", "Pretendard", sans-serif;
  /* 메인 카피 */
  --f-body: "Pretendard", sans-serif;
  /* 본문·정보 */
}

:root.is-desktop {
  --f-size: 100px;
}

:root.is-mobile {
  --f-size: 13.8889vw;
}


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  font-size: var(--f-size);
  line-height: 0;
}

body {
  font-family: var(--f-body);
  color: var(--ink);
  word-break: keep-all;
  text-wrap: pretty;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
  min-height: 100vh;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input,
select {
  font-family: inherit;
}

.is-desktop .mo-only,
.is-mobile .pc-only {
  display: none !important;
  visibility: hidden !important;
}

.hidden {
  display: none !important;
}

.stack {
  display: flex;
  flex-direction: column;
}

.nowrap {
  white-space: nowrap;
}

.t-green {
  color: var(--green);
}

.t-orange {
  color: var(--orange-deep);
}

.t-red {
  color: var(--red);
}

.t-gold {
  color: var(--gold-deep);
}

.center {
  text-align: center;
}

.lqip img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: blur(.2rem);
  transform: scale(1.05);
  transition:
    filter .5s ease,
    transform .5s ease,
    opacity .25s ease;
}

.lqip img.loaded {
  filter: blur(0);
  transform: scale(1);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-weight: 700;
  border-radius: 9.99rem;
  line-height: 1.16rem;
  height: .6rem;
  white-space: nowrap;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, opacity .14s;
}

.is-desktop .btn {
  font-size: .19rem;
  padding: .01em .34rem 0;
}

.is-mobile .btn {
  font-size: .2rem;
  padding: .01em .4rem 0;
}

.btn:active {
  transform: translateY(.01rem) scale(.99);
}

.btn[disabled],
.opt[disabled] {
  opacity: .42;
  cursor: default;
  box-shadow: none;
  transform: none;
  filter: grayscale(.3);
}

.btn--block {
  width: 100%;
}

.btn--primary {
  background: linear-gradient(180deg, var(--orange) 0%, var(--orange-deep) 100%);
  color: #fff;
  box-shadow: 0 .14rem .28rem -.12rem rgba(224, 115, 26, .8), inset 0 .01rem 0 rgba(255, 255, 255, .35);
}

.btn--primary:not([disabled]):hover {
  transform: translateY(-.02rem);
  box-shadow: 0 .2rem .36rem -.12rem rgba(224, 115, 26, .9), inset 0 .01rem 0 rgba(255, 255, 255, .35);
}

.btn--green {
  background: linear-gradient(180deg, var(--green-light) 0%, var(--green) 100%);
  color: #fff;
  box-shadow: 0 .14rem .28rem -.12rem rgba(30, 77, 43, .75), inset 0 .01rem 0 rgba(255, 255, 255, .18);
}

.btn--green:not([disabled]):hover {
  transform: translateY(-.02rem);
}

.btn--ghost {
  background: #fff;
  color: var(--gold-deep);
  box-shadow: inset 0 0 0 .02rem var(--gold-light);
}


#main {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0 auto;
  background: var(--cream);
  overflow-x: clip;
}

.is-desktop #main {
  min-width: 1000px;
  max-width: 1300px;
  box-shadow: 0 .4rem 1.2rem -.3rem rgba(120, 60, 0, .5);
}

.sec {
  position: relative;
  height: auto;
  width: 100%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.sec-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  left: 0;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 1;
}

.sec-bg>img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sec-wrap {
  position: relative;
  z-index: 2
}

.is-desktop .sec-wrap {
  margin: 0 auto;
  max-width: calc(100% - .6rem);
}

.is-mobile .sec-wrap {
  width: 100%;
}


/* =========================================================
   INTRO
   ========================================================= */

.intro {
  position: relative;
  overflow: clip;
  background-color: var(--bg);
}

.intro::before {
  content: "";
  display: block;
  width: 100%;
}

.is-desktop .intro::before {
  padding-top: 886px;
}

.is-mobile .intro::before {
  padding-top: 112.5%;
}

.intro .sec-wrap {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.is-desktop .intro .sec-wrap {
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  max-width: 1300px;
}

.is-mobile .intro .sec-wrap {
  left: 0;
  width: 100%;
}

.intro__logo {
  position: absolute;
  z-index:2
}

.is-desktop .intro__logo {
  top: .6rem;
  left: .42rem;
  width: 1.24rem
}

.is-mobile .intro__logo {
  top: .27rem;
  left: .32rem;
  width: 1.09rem
}

.intro__wordmark {
  position: relative;
  width: 100%;
  flex:1;
}

.intro__notice {
  flex:none;
  color: #5B370E;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0;
  text-align: center
}

.is-desktop .intro__notice {
  font-size: .15rem;
  margin-bottom: .1rem
}

.is-mobile .intro__notice {
  font-size: .13rem;
  margin-bottom: .16rem;
}


.intro__bigtype {
  display: block;
  margin: 0 auto;
  text-shadow: 0 .03rem .16rem rgba(150, 80, 0, .34), 0 .01rem 0 rgba(150, 90, 10, .28);
}

.is-desktop .intro__bigtype {
  width: 7.8rem;
}

.is-mobile .intro__bigtype {
  width: 56%;
}

.intro__arch {
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 .03rem .13rem rgba(150, 80, 0, .3));
  font-family: var(--f-display);
  line-height: 1;
  color: #fff;
  letter-spacing: -.02em;
}

.is-desktop .intro__arch {
  margin-top: -.45rem
}

.is-mobile .intro__arch {
  margin-top: .25rem
}

.intro__arch path {
  fill: none;
}

.intro__arch text {
  font-family: var(--f-display);
  font-size: 96px;
  letter-spacing: -.01em;
  fill: #fff;
}

.intro__dailycare {
  text-align: center;
  font-family: var(--f-display);
  line-height: 1;
  color: #fff;
  text-shadow: 0 .03rem .16rem rgba(150, 80, 0, .34), 0 .01rem 0 rgba(150, 90, 10, .28);
}

.is-desktop .intro__dailycare {
  font-size: .34rem;
  margin-top: -.9rem
}

.is-mobile .intro__dailycare {
  font-size: .26rem;
  margin-top: -.33rem
}

.intro__subhead {
  text-align: center;
  z-index: 2;
  font-family: var(--f-display);
  font-weight: 900;
  color: var(--green-deep);
}

.is-desktop .intro__subhead {
  font-size: .29rem;
  margin-top: .41rem
}

.is-mobile .intro__subhead {
  font-size: .24rem;
  margin-top: .37rem
}


.intro .sec-bg{
  will-change: opacity, transform;
  opacity:0;
  transform:scale3d(1.05,1.05,1);
  transition: opacity .5s ease-out, transform 1.5s ease-out;
}

.intro .sec-bg[data-visible="true"]{
  opacity:1;
  transform:scale3d(1,1,1);
  transition-delay: .1s;
}

.intro__bigtype,
.intro__dailycare,
.intro__subhead,
.intro__notice{
  will-change: opacity, transform;
  opacity:0;
  transition: opacity .5s ease-out, transform .5s ease-out;
}
.intro__bigtype,
.intro__dailycare{
  transform:translate3d(0, max(.2rem, 5%), 0);
}
.intro__subhead,
.intro__notice{
  transform:translate3d(0, min(-.2rem, -5%), 0);
}

.sec-wrap[data-visible="true"] .intro__bigtype,
.sec-wrap[data-visible="true"] .intro__dailycare,
.sec-wrap[data-visible="true"] .intro__subhead,
.sec-wrap[data-visible="true"] .intro__notice{
  opacity:1;
  transform:translate3d(0,0,0);
}

.sec-wrap[data-visible="true"] .intro__bigtype{
  transition-delay:.3s
}
.sec-wrap[data-visible="true"] .intro__dailycare{
  transition-delay:.55s
}
.sec-wrap[data-visible="true"] .intro__subhead{
  transition-delay:.6s
}
.sec-wrap[data-visible="true"] .intro__notice{
  transition-delay:.7s;
}

/* =========================================================
   ABOUT
   ========================================================= */

.about {
  position: relative;
  z-index: 5;
}

.is-desktop .about{
  background: #F6E2B0;
}
.is-desktop .about .sec-wrap {
  width: 10.4rem;
  padding: .4rem 0 .57rem;
}

.is-mobile .about {
  padding: 0 .4rem;
  background: var(--yellow-deep);
}

.is-mobile .about .sec-wrap {
  padding: .34rem 0 .6rem;
}

.about__card {
  width: 100%;
  margin: 0 auto;
  background: var(--cream-light);
  box-shadow: var(--card-shadow);
  text-align: center;
}

.is-desktop .about__card {
  border-radius: .34rem;
  padding: .55rem .3rem
}

.is-mobile .about__card {
  border-radius: .26rem;
  padding: .4rem .32rem;
}

.about__badge {
  display: block;
  width: fit-content;
  margin: 0 auto;
  font-family: var(--f-display);
  font-weight: 400;
  color: #fff;
  background: var(--green);
  letter-spacing: .01em;
  line-height: 1.3;
  border-radius: 1.5em;
  box-shadow: 0 .1rem .24rem -.12rem rgba(30, 77, 43, .7);
}

.is-desktop .about__badge {
  font-size: .23rem;
  padding: .15rem .33rem .13rem;
}

.is-mobile .about__badge {
  font-size: .2rem;
  padding: .11rem .22rem .09rem;
}

.about__statement {
  font-family: var(--f-display);
  line-height: 1.3;
  color: var(--ink);
  font-weight: 700
}

.is-desktop .about__statement {
  font-size: .36rem;
  margin-top: .24rem;
  margin-bottom: .4rem;
}

.is-mobile .about__statement {
  font-size: .24rem;
  margin-top: .18rem;
  margin-bottom: .3rem;
}

.about__statement .hl {
  color: var(--orange-deep);
}


.date-rows {
  width: fit-content;
  margin: 0 auto;
  overflow: hidden;
  border-radius: .18rem;
  border: .015rem solid var(--line);
}

.is-desktop .date-rows {
  width: 4.96rem;
}

.is-mobile .date-rows {
  width: 3.74rem;
}

.date-rows .row {
  display: flex;
  width: 100%;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

.date-rows .row+.row {
  border-top: .015rem solid var(--line);
}

.is-desktop .date-rows .row {
  height: .66rem
}

.is-mobile .date-rows .row {
  height: .54rem
}

.date-rows .k,
.date-rows .v {
  display: flex;
  align-items: center;
  white-space: nowrap;
  line-height: 1.6;
  padding-top: .01rem;
}

.date-rows .k {
  background: var(--green-tint);
  color: var(--green);
  font-family: var(--f-display);
  font-weight: 400;
  justify-content: center;
  border-right: .015rem solid var(--line);
}

.is-desktop .date-rows .k {
  font-size: .2rem;
  width: 2rem
}

.is-mobile .date-rows .k {
  font-size: .155rem;
  width: 1.22rem
}

.date-rows .v {
  flex: 1;
  color: var(--ink);
  font-weight: 500;
  justify-content: start;
}

.is-desktop .date-rows .v {
  font-size: .17rem;
  padding-left: .34rem;
}

.is-mobile .date-rows .v {
  font-size: .155rem;
  padding-left: .22rem;
}

.about__card,
.about__badge,
.about__statement,
.date-rows{
  will-change: opacity, transform;
  opacity:0;
  transform:translate3d(0, max(.2rem, 5%), 0);
  transition: opacity .5s ease-out, transform .5s ease-out;
}

.about__card[data-visible="true"],
.about__card[data-visible="true"] .about__badge,
.about__card[data-visible="true"] .about__statement,
.about__card[data-visible="true"] .date-rows{
  opacity:1;
  transform:translate3d(0,0,0);
}

.about__card[data-visible="true"] .about__badge{
  transition-delay: .15s;
}

.about__card[data-visible="true"] .about__statement{
  transition-delay: .25s;
}

.about__card[data-visible="true"] .date-rows{
  transition-delay: .4s;
}

/* =========================================================
   EVENT
   ========================================================= */

.event {
  background-color: var(--cream);
}

.is-desktop .event .sec-wrap {
  width: 9.4rem;
  padding-top: 1.3rem;
  padding-bottom: 1.3rem
}

.is-mobile .event {
  padding-left: .4rem;
  padding-right: .4rem
}

.is-mobile .event .sec-wrap {
  padding-top: .68rem;
  padding-bottom: .68rem
}

.event__head {
  display: block;
  text-align: center;
  width: 100%;
  line-height: 0
}

.is-desktop .event__head {
  padding-bottom: .32rem
}

.is-mobile .event__head {
  padding-bottom: .28rem
}

.event__tag {
  margin: 0 auto;
  width: auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-weight: 700;
  color: #fff;
  border-radius: 9.99rem;
  text-indent: .2em;
  line-height: 1.2;
  background: var(--gold);
}

.event .event__tag {
  letter-spacing: .14em;
  background: var(--orange-deep);
  box-shadow: var(--box-shadow-size) rgba(224, 115, 26, .9);
}

.is-desktop .event__tag {
  padding: .025em .24rem 0;
  height: .63rem;
  font-size: .28rem
}

.is-desktop .event .event__tag {
  padding: .025em .3rem 0;
  height: .68rem;
  font-size: .25rem
}

.is-mobile .event__tag {
  padding: .025em .24rem 0;
  height: .54rem;
  font-size: .2rem
}

.is-mobile .event .event__tag {
  height: .56rem;
  font-size: .21rem
}

.event__title {
  font-family: var(--f-display);
  font-weight: 700;
  text-align: center;
  line-height: 1.1;
  color: var(--ink);
  margin-top: .24rem
}

.is-desktop .event__title {
  font-size: .59rem;
}

.is-mobile .event__title {
  font-size: .38rem;
}

.event__sub {
  color: var(--ink-soft);
  line-height: 1.375;
  margin-top: .1rem;
  font-weight: 500;
}

.event__sub b {
  color: var(--gold-deep);
  font-weight: inherit;
}

.is-desktop .event__sub {
  font-size: .19rem;
}

.is-mobile .event__sub {
  font-size: .16rem;
}



/* =========================================================
   TVC video placeholder
   ========================================================= */
.tvc {
  display: block;
  cursor: pointer;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  position: relative;
  width: 100%;
  z-index: 7;
  aspect-ratio: 16/9;
  background: #111;
  border-radius: .24rem;
}

.tvc__iframe {
  position: absolute;
  inset: 0;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  border: 0;
  z-index: 8;
  left: -1px;
  top: -1px;
}

.tvc--playing .tvc__ph,
.tvc--playing .tvc__label {
  display: none;
}

.tvc__ph {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, #1c1c1c 0 .16rem, #242424 .16rem .32rem);
  background: url('https://i.ytimg.com/vi/SeZbZo71i7I/maxresdefault.jpg') no-repeat center / cover;
  display: grid;
  place-items: center;
}

.tvc__play {
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  display: grid;
  place-items: center;
  box-shadow: 0 .14rem .36rem rgba(0, 0, 0, .45);
  transition: transform .15s;
}

.is-desktop .tvc:not([disabled]):hover .tvc__play {
  transform: scale(1.07);
}

.tvc__play::after {
  content: "";
  display: block;
}

.is-desktop .tvc__play {
  width: .96rem;
  height: .96rem;
}

.is-desktop .tvc__play::after {
  margin-left: .06rem;
  border-left: .28rem solid var(--red);
  border-top: .18rem solid transparent;
  border-bottom: .18rem solid transparent;
}

.is-mobile .tvc__play {
  width: .74rem;
  height: .74rem;
}

.is-mobile .tvc__play::after {
  margin-left: .03rem;
  border-left: .22rem solid var(--red);
  border-top: .14rem solid transparent;
  border-bottom: .14rem solid transparent;
}

.tvc__label {
  position: absolute;
  font-family: var(--f-body);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 300;
  color: rgba(255, 255, 255, .66);
  top: .22rem;
  left: .24rem;
}

.is-desktop .tvc__label {
  font-size: .13rem;
}

.is-mobile .tvc__label {
  font-size: .12rem;
}

/* =========================================================
  QUIZ
  ========================================================= */

.quiz {
  width: 100%;
  margin: 0 auto;
  background: var(--cream-light);
  border-radius: .28rem;
  box-shadow: var(--card-shadow);
}

.is-desktop .quiz {
  margin-top: .3rem;
  padding: .56rem .6rem .5rem;
}

.is-mobile .quiz {
  width: 5.64rem;
  margin-top: .28rem;
  padding: .4rem .3rem .34rem;
}

.quiz__q {
  display: flex;
  width: fit-content;
  margin: 0 auto;
  gap: .16rem;
  align-items: flex-start;
  font-family: var(--f-display);
  color: var(--ink);
  justify-content: center;
  text-align: center;
}

.quiz__q>span {
  font-weight: 400;
  line-height: 1.4;
}

.quiz__q>span:not(.qmark) {
  display: block;
  flex: 1;
  padding-top: .05em;
}

.quiz__q .qmark {
  flex: none;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.is-desktop .quiz__q>span:not(.qmark) {
  font-size: .28rem;
}

.is-desktop .quiz__q .qmark {
  width: .42rem;
  height: .42rem;
  font-size: .22rem;
}

.is-mobile .quiz__q>span:not(.qmark) {
  font-size: .22rem;
}

.is-mobile .quiz__q .qmark {
  width: .38rem;
  height: .38rem;
  font-size: .2rem;
}

.quiz__opts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.is-desktop .quiz__opts {
  margin-top: .34rem;
  gap: .16rem;
}

.is-mobile .quiz__opts {
  margin-top: .28rem;
  gap: .14rem;
}

.opt {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .16rem;
  border-radius: .16rem;
  text-align: left;
  background-color: #fff;
  box-shadow: inset 0 0 0 .02rem var(--line);
  margin-top: .2em;
  transition: box-shadow .14s, background-color .14s, transform .1s;
}

.is-desktop .opt {
  height: .86rem;
  padding-left: .26rem;
}

.is-mobile .opt {
  height: .74rem;
  padding-left: .22rem;
}

.opt>em {
  display: block;
  flex: 1;
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
  font-style: normal;
  padding-top: .15em;
}

.is-desktop .opt>em {
  font-size: .22rem;
}

.is-mobile .opt>em {
  font-size: .2rem;
}

.opt .mark {
  flex: none;
  border-radius: 100%;
  display: grid;
  place-items: center;
  background-color: var(--cream-deep);
  color: var(--ink-soft);
  font-weight: 400;
  transition: background-color .14s, color .14s;
}

.is-desktop .opt .mark {
  width: .38rem;
  height: .38rem;
  font-size: .19rem
}

.is-mobile .opt .mark {
  width: .34rem;
  height: .34rem;
  font-size: .17rem
}

.is-desktop .opt:not([disabled]):hover {
  box-shadow: inset 0 0 0 .02rem var(--gold-light);
  transform: translateY(-.01rem);
}

.opt.sel {
  background: var(--gold-tint);
  box-shadow: inset 0 0 0 .025rem var(--gold);
}

.opt.sel .mark {
  background: var(--gold);
  color: #fff;
}

.quiz__submit {
  text-align: center;
  line-height: 0
}

.is-desktop .quiz__submit {
  margin-top: .34rem;
}

.is-mobile .quiz__submit {
  margin-top: .28rem;
}


.event__title,
.event__sub,
.quiz__q,
.quiz__opts,
.quiz__submit{
  will-change: opacity, transform;
  opacity:0;
  transform:translate3d(0, max(.2rem, 5%), 0);
  transition: opacity .5s ease-out, transform .5s ease-out;
}
.event__head.reveal,
.tvc,
.quiz{
  will-change: opacity, transform;
  opacity:0;
  transform:translate3d(0, max(.2rem, 5%), 0);
  transition: opacity .65s ease-out, transform .65s ease-out;
}

.event__head.reveal[data-visible="true"],
.event .event__head[data-visible="true"] .event__title,
.event .event__head[data-visible="true"] .event__sub,
.tvc[data-visible="true"],
.quiz[data-visible="true"],
.quiz[data-visible="true"] .quiz__q,
.quiz[data-visible="true"] .quiz__opts,
.quiz[data-visible="true"] .quiz__submit {
  opacity:1;
  transform:translate3d(0,0,0);
}

.event__head.reveal[data-visible="true"],
.tvc[data-visible="true"],
.quiz[data-visible="true"]{
  transition-delay: .2s;
}

.event .event__head[data-visible="true"] .event__title{
  transition-delay: .3s;
}

.event .event__head[data-visible="true"] .event__sub{
  transition-delay: .4s;
}
.quiz[data-visible="true"] .quiz__q{
  transition-delay: .3s;
}
.quiz[data-visible="true"] .quiz__opts{
  transition-delay: .4s;
}

.quiz[data-visible="true"] .quiz__submit{
  transition-delay: .5s;
}



/* =========================================================
   PRIZES
   ========================================================= */
.prize {
  background-color: var(--cream-light);
}

.is-desktop .prize .sec-wrap {
  width: 11rem;
  padding: .92rem 0
}

.is-mobile .prize {
  padding: 0 .4rem
}

.is-mobile .prize .sec-wrap {
  padding: .56rem 0
}

.is-desktop .prize .event__head {
  padding-bottom: .56rem
}

.is-mobile .prize .event__head {
  padding-bottom: .34rem
}

.prize__grid {
  width: 100%;
  margin: 0 auto;
  display: grid;
  align-items: stretch;
  justify-content: center;
}

.is-desktop .prize__grid {
  grid-template-columns: 1fr 1fr 1fr;
  gap: .24rem
}

.is-mobile .prize__grid {
  grid-template-columns: 1fr 1fr;
  gap: .2rem
}

.prize__item {
  flex: 1;
  background: var(--cream-light);
  box-shadow: var(--card-shadow);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
  border-radius: .26rem;
}

.is-desktop .prize__item {
  grid-column: auto;
  padding: .34rem 0 .3rem;
}

.is-mobile .prize__item {
  grid-column: auto;
  padding: .28rem .2rem .26rem;
}
.is-mobile .prize__item:nth-child(1) {
  grid-column: 1 / -1;
}

.prize__rank {
  display: inline-flex;
  align-items: center;
  font-family: var(--f-display);
  font-weight: 800;
  color: #fff;
  background: var(--green);
  border-radius: 9.99rem;
  font-size: .22rem;
  padding: .02rem .18rem 0;
  height: .52rem
}

.prize--hero .prize__rank {
  background: var(--gold);
}

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

.prize__media>img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain
}

.is-desktop .prize__media {
  width: 2.21rem;
}

.is-mobile .prize__media {
  width: 2.15rem;
  margin-top:-.2rem
}

.prize__name {
  font-family: var(--f-display);
  line-height: 1.3;
  font-weight: 900;
  color: var(--ink);
}

.is-desktop .prize__name {
  font-size: .22rem;
}

.is-mobile .prize__name {
  font-size: .21rem;
}

.prize__detail {
  display: block;
  font-family: var(--f-body);
  color: var(--ink-soft);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  margin-top: .65em;
}

.is-desktop .prize__detail {
  font-size: .145rem;
  margin-bottom: 1.85em;
}

.is-mobile .prize__detail {
  font-size: .135rem;
  margin-bottom: .65em;
}

.prize__count {
  margin: auto auto 0;
  font-family: var(--f-display);
  font-weight: 900;
  color: var(--orange-deep);
  display: inline-flex;
  align-items: center;
  gap: .09rem;
  background: #fff;
  border-radius: 9.99rem;
  box-shadow: inset 0 0 0 .015rem var(--peach-deep);
  padding: 0 .18rem;
  padding-top:.02rem;
  line-height: 1.5;
}

.is-desktop .prize__count {
  font-size: .16rem;
  height: .44rem
}

.is-mobile .prize__count {
  font-size: .15rem;
  height: .42rem
}

.prize__cbottom {
  margin-top: auto;
  padding-top: 18px;
}

.prize__count .ic {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--orange);
}

.prize__grid{
  will-change: opacity, transform;
  opacity:0;
  transform:translate3d(0, max(.2rem, 5%), 0);
  transition: opacity .65s ease-out, transform .65s ease-out;
}
.prize__rank,
.prize__media,
.prize__name,
.prize__detail,
.prize__count{
  will-change: opacity, transform;
  opacity:0;
  transform:translate3d(0, max(.2rem, 5%), 0);
  transition: opacity .5s ease-out, transform .5s ease-out;
}

.prize__grid[data-visible="true"],
.prize__grid[data-visible="true"] .prize__rank,
.prize__grid[data-visible="true"] .prize__media,
.prize__grid[data-visible="true"] .prize__name,
.prize__grid[data-visible="true"] .prize__detail,
.prize__grid[data-visible="true"] .prize__count{
  opacity:1;
  transform:translate3d(0,0,0);
}

.prize__grid[data-visible="true"]{
  transition-delay: .2s;
}
.prize__grid[data-visible="true"] .prize__rank{
  transition-delay: .35s;
}
.prize__grid[data-visible="true"] .prize__media{
  transition-delay: .45s;
}
.prize__grid[data-visible="true"] .prize__name{
  transition-delay: .5s;
}
.prize__grid[data-visible="true"] .prize__detail{
  transition-delay: .55s;
}
.prize__grid[data-visible="true"] .prize__count{
  transition-delay: .6s;
}

/* =========================================================
   NOTICE
   ========================================================= */

.notice {
  background: var(--green-deep);
  color: #EFE9DC;
}

.is-desktop .notice .sec-wrap {
  width: 8.6rem;
  padding: 1.3rem 0
}

.is-mobile .notice {
  padding: 0 .4rem
}

.is-mobile .notice .sec-wrap {
  padding: .68rem 0
}

.is-desktop .notice .event__head {
  padding-bottom: .44rem
}

.is-mobile .notice .event__head {
  padding-bottom: .28rem
}

.notice__how {
  display: block;
  margin: 0 auto;
  background: rgba(255, 255, 255, .06);
  border-radius: .22rem;
}

.is-desktop .notice__how {
  width: 8.6rem;
  margin-bottom: .3rem;
  padding: .34rem .4rem
}

.is-mobile .notice__how {
  width: 100%;
  margin-bottom: .28rem;
  padding: .34rem .26rem
}

.notice__how .item {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  gap: .16rem;
}

.notice__how .badge {
  flex: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-weight: 900;
  color: var(--green-deep);
  background: var(--yellow);
  border-radius: 9.99rem;
  height: fit-content;
  padding: .15em .13rem 0;
  font-size: .13rem;
  height: .35rem
}

.notice__how p {
  flex: 1;
  font-size: .15rem;
  line-height: 1.65;
  font-weight: 400;
  color: #D9D2C2;
}

.is-mobile .notice__how p {
  padding-right: 1.1rem
}

.notice__how strong {
  font-weight: 700;
  color: var(--yellow);
}

.notice__list {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.is-desktop .notice__list {
  gap: .11rem;
}

.is-mobile .notice__list {
  gap: .12rem;
}

.notice__list li {
  list-style: none;
  display: flex;
  gap: .12rem;
  line-height: 1.62;
  color: #C9C2B2;
  font-family: var(--f-body);
}

.is-desktop .notice__list li {
  font-size: .15rem;
}

.is-mobile .notice__list li {
  font-size: .14rem;
}

.notice__list li::before {
  content: "";
  flex: 0 0 auto;
  width: .06rem;
  height: .06rem;
  border-radius: 50%;
  background: var(--gold-light);
  margin-top: .09rem;
}

.notice__medical {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}

.notice__medical::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  height: 100%;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  background: rgba(255, 255, 255, .06);
  border-radius: .12rem;
}

.notice__medical p {
  display: block;
  text-align: center;
  position: relative;
  z-index: 1;
  font-family: var(--f-body);
  font-weight: 300;
  font-size: .15rem;
  line-height: 1.55;
  color: var(--yellow);
  white-space: nowrap;
}

.is-desktop .notice__medical {
  margin-top: .3rem;
  padding: .155rem 0 .16rem
}

.is-desktop .notice__medical::before {
  width: min(11rem, calc(100vw - 2rem));
  min-width: 8.6rem;
}

.is-mobile .notice__medical {
  margin-top: .28rem;
  padding: .18rem 0 .16rem;
}

.is-mobile .notice__medical::before {
  width: 100%;
}

.notice__how,
.notice__list > li,
.notice__medical{
  will-change: opacity, transform;
  opacity:0;
  transform:translate3d(0, max(.2rem, 5%), 0);
  transition: opacity .5s ease-out, transform .5s ease-out;
}

.notice__how[data-visible="true"],
.notice__list[data-visible="true"] > li,
.notice__list[data-visible="true"] + .notice__medical{
  opacity:1;
  transform:translate3d(0,0,0);
}

.notice__how[data-visible="true"]{
  transition-delay: .1s;
}
.notice__list[data-visible="true"] > li:nth-child(1){
  transition-delay: .2s;
}
.notice__list[data-visible="true"] > li:nth-child(2){
  transition-delay: .2s;
}
.notice__list[data-visible="true"] > li:nth-child(3){
  transition-delay: .25s;
}
.notice__list[data-visible="true"] > li:nth-child(4){
  transition-delay: .25s;
}
.notice__list[data-visible="true"] > li:nth-child(5){
  transition-delay: .3s;
}
.notice__list[data-visible="true"] > li:nth-child(6){
  transition-delay: .3s;
}
.notice__list[data-visible="true"] > li:nth-child(7){
  transition-delay: .35s;
}
.notice__list[data-visible="true"] > li:nth-child(8){
  transition-delay: .35s;
}
.notice__list[data-visible="true"] > li:nth-child(9){
  transition-delay: .4s;
}
.notice__list[data-visible="true"] > li{
  transition-delay: .45s;
}

.notice__list[data-visible="true"] + .notice__medical{
  transition-delay: .5s;
}



/* footer */
.footer {
  background: #14140F;
}

.footer p {
  color: #8C8576;
  text-align: center;
  letter-spacing: .03em;
  font-weight: 400;
  font-size: .13rem;
  line-height: 1.6
}

.is-desktop .footer p {
  padding: .46rem 0;
}

.is-mobile .footer p {
  padding: .4rem 0;
}


/* =========================================================
   Popups & personal-info form
   ========================================================= */

/* modal */
.modal-scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(30, 30, 24, .55);
  backdrop-filter: blur(.03rem);
  display: grid;
  place-items: center;
  padding: 0 .28rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease;
}

.modal-scrim.open {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: var(--cream-light);
  border-radius: .28rem;
  box-shadow: var(--shadow-pop);
  padding: 4rem 3.2rem 3.2rem;
  position: relative;
  transform: translateY(.14rem) scale(.97);
  transition: transform .26s cubic-bezier(.2, .9, .3, 1.2);
  max-height: 96vh;
  overflow-y: auto;
  line-height: 0;
}

.modal-scrim.open .modal {
  transform: none;
}

.modal__close {
  position: absolute;
  top: .16rem;
  right: .16rem;
  width: .34rem;
  height: .34rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  background: rgba(0, 0, 0, .05);
  font-size: .18rem;
  line-height: 1;
}

.is-desktop .modal__close:not([disabled]):hover {
  background: rgba(0, 0, 0, .1);
}

/* popup body (reuses .modal-scrim / .modal from base.css) */
.pop {
  width: 5.75rem;
  max-width: 100%;
  text-align: center;
  padding: .575rem .475rem .425rem;
}

.pop__icon {
  width: .925rem;
  height: .925rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto .25rem;
  font-size: .475rem;
  line-height: 1;
  color: #fff;
  font-weight: 800;
}

.pop__icon--ok {
  background: var(--green);
  box-shadow: var(--box-shadow-size) rgba(30, 77, 43, .7);
}

.pop__icon--no {
  padding-top: .025rem;
  background: var(--orange-deep);
  box-shadow: var(--box-shadow-size) rgba(224, 115, 26, .7);
}

.pop__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: .34rem;
  line-height: 1.3;
  color: var(--ink);
}

.pop__desc {
  margin-top: .16rem;
  font-size: .2rem;
  color: var(--ink-soft);
  line-height: 1.4;
}

.pop__desc b {
  color: var(--gold-deep);
  font-weight: 700;
}

.pop .btn {
  margin-top: .31rem;
  line-height: 1.45rem;
  height: .75rem;
}

.is-desktop .pop .btn {
  font-size: .2375rem;
  padding: .015em .425rem 0;
}

.is-mobile .pop .btn {
  font-size: .25rem;
  padding: .015em .5rem 0;
}


/* personal-info form */
.pi-form {
  margin-top: .25rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.pi-field {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

.pi-flabel {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: .175rem;
  line-height: 1.6;
  color: var(--green);
  gap: .075rem;
  display: flex;
  align-items: center;
}

.pi-flabel::before {
  content: "";
  width: .075rem;
  height: .075rem;
  border-radius: 50%;
  background: var(--gold);
}

.pi-form input {
  width: 100%;
  padding: .175rem .2rem;
  border-radius: .15rem;
  font-size: .185rem;
  background: #fff;
  box-shadow: inset 0 0 0 .02rem var(--line);
  color: var(--ink);
  font-family: var(--f-body);
  transition: box-shadow .14s;
}

.pi-form input::placeholder {
  color: var(--ink-faint);
}

.pi-form input:focus {
  outline: none;
  box-shadow: inset 0 0 0 .02rem var(--gold-light);
}

.pi-phone {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: .1rem;
}

.pi-phone .sep {
  color: var(--ink-faint);
  font-size: .2rem;
  font-weight: 700;
}

.pi-phone input {
  text-align: center;
}

.pi-addr {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .1rem;
}

.pi-addr-btn {
  padding: 0 .25rem;
  border-radius: .15rem;
  background: var(--green);
  color: #fff;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: .175rem;
  white-space: nowrap;
}

.pi-addr-btn:not([disabled]):hover {
  background: var(--green-light);
}

.pi-consent {
  display: block;
  cursor: pointer;
  font-size: 0;
  line-height: 0;
  margin-top:.06rem;
  position: relative;
  overflow: clip;
}

.pi-consent input {
  font-size: 1px;
  line-height: 1px;
  position: absolute;
  left: -9999px;
  top: -9999px;
  opacity: 0
}

.pi-consent>label {
  position: relative;
  display: block;
  font-size: .19rem;
  color: var(--ink-soft);
  line-height: 1.5;
  padding-left: .4rem
}

.pi-consent b {
  color: var(--gold-deep);
  font-weight: 700;
}

.pi-consent>label::before {
  content: "";
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  position: absolute;
  left: 0;
  top: .0145rem;
  font-size:.21rem;
  line-height:1;
  font-weight:900;
  width: .27rem;
  height: .27rem;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: .01rem solid #767676;
  border-radius: .03rem;
  background: #fff;
}

.pi-consent>input:checked+label::before {
  content: "✓";
  background: var(--green);
}

.pi-consent>input:focus+label::before{
  border-color: var(--gold-light);
  border-width:.02rem;
}