@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: #dbaf58;


  --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: 1064px;
}

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

.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: .15rem
}

.intro__arch path {
  fill: none;
}

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

.is-desktop .intro__arch text {
  font-size: 96px;
}

.is-mobile .intro__arch text {
  font-size: 84px;
}

.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: .24rem;
  margin-top: -.36rem
}

.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: .55rem;
  line-height: .64rem;
  margin-top: .3rem
}

.is-mobile .intro__subhead {
  font-size: .4rem;
  line-height: 1.2;
  margin-top: .16rem
}


.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;
}

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

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

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

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

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

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

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

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

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

.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;
  letter-spacing: .04em;
  background: var(--orange-deep);
  box-shadow: var(--box-shadow-size) rgba(224, 115, 26, .9);
}


.is-desktop .event__tag {
  padding: .05em .3rem 0;
  height: .64rem;
  font-size: .24rem
}

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

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

.is-desktop .event__title {
  font-size: .46rem
}

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

.event__sub {
  display: inline-flex;
  align-items: center;
  gap: .09rem;
  font-family: var(--f-display);
  font-weight: 500;
  color: var(--green);
  background: var(--green-tint);
  border-radius: 9rem;
  line-height: 1.375;
  margin-top: 1em;
}

.is-desktop .event__sub {
  font-size: .18rem;
  padding: .1rem .22rem;
}

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


.event__note {
  display: flex;
  flex-direction: column;
  gap: .08rem;
}
.is-desktop .event__note{
  margin: .34rem auto 0;
}
.is-mobile .event__note{
  margin: .28rem auto 0;
}

.event__note>p {
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink-soft);
}
.is-desktop .event__note>p {
  font-size: .15rem;
}
.is-mobile .event__note>p {
  font-size: .14rem;
}

.winner-list {
  display: grid;
}
.is-desktop .winner-list {
  grid-template-columns: repeat(5, 1fr);
  gap: .14rem;
}
.is-mobile .winner-list {
  grid-template-columns: repeat(3, 1fr);
  gap: .12rem;
}

.is-desktop .event.gift-1 .winner-list {
  grid-template-columns: repeat(3, 1fr);
}

.winner-list .item {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow: inset 0 0 0 .015rem var(--line);
}


.is-desktop .winner-list .item{
  gap: .12rem;
  border-radius: .14rem;
  padding: .18rem .14rem;
}
.is-desktop .event.gift-1 .winner-list .item {
  padding: .26rem .18rem;
  border-radius: .18rem;
}

.is-mobile .winner-list .item{
  gap: .1rem;
  border-radius: .12rem;
  padding: .16rem .1rem;
}
.is-mobile .event.gift-1 .winner-list .item {
  padding: .22rem .12rem;
  border-radius: .18rem;
}

.winner-list .item__name {
  font-family: var(--f-display);
  font-weight: 500;
  color: var(--ink);
}

.winner-list .item__tel {
  font-weight: 500;
  color: var(--gold-deep);
  letter-spacing: .02em;
}

.winner-list .item__tel::before {
  content: "";
  display: inline-block;
  width: .01rem;
  background: var(--line);
  margin-right: .12rem;
  vertical-align: -.01rem;
}
.is-desktop .winner-list .item__tel::before {
  margin-right: .12rem;
  height: .13rem;
}
.is-mobile .winner-list .item__tel::before {
  margin-right: .1rem;
  height: .12rem;
}

.is-desktop .winner-list .item__name {
  font-size: .19rem;
}

.is-desktop .event.gift-1 .winner-list .item__name {
  font-size: .24rem;
}
.is-mobile .winner-list .item__name {
  font-size: .17rem;
}
.is-mobile .event.gift-1 .winner-list .item__name {
  font-size: .2rem;
}

.is-desktop .winner-list .item__tel {
  font-size: .17rem;
}
.is-desktop .event.gift-1 .winner-list .item__tel {
  font-size: .2rem;
}
.is-mobile .winner-list .item__tel {
  font-size: .15rem;
}
.is-mobile .event.gift-1 .winner-list .item__tel {
  font-size: .17rem;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
}
.is-desktop .pager {
  margin: .42rem auto 0;
  gap: .08rem;
}
.is-mobile .pager {
  margin: .34rem auto 0;
  gap: .06rem;
}

.pager button {
  border-radius: .12rem;
  font-family: var(--f-display);
  font-weight: 500;
  color: var(--ink-soft);
  background: #fff;
  box-shadow: inset 0 0 0 .015rem var(--line);
  transition: background-color .14s, color .14s, box-shadow .14s, transform .1s;
}
.is-desktop .pager button{
  min-width: .44rem;
  height: .44rem;
  padding: 0 .12rem;
  border-radius: .12rem;
  font-size: .17rem;
}
.is-mobile .pager button{
  border-radius: .1rem;
  min-width:.42rem;height:.42rem;padding:0 .1rem;font-size:.16rem
}
.is-desktop .pager button:hover:not(:disabled) {
  color: var(--green);
  box-shadow: inset 0 0 0 .02rem var(--green-light);
  transform: translateY(-.01rem);
}

.pager button.is-active {
  background: var(--green);
  color: #fff;
  box-shadow: none
}

.is-desktop .pager button.is-active:hover:not(:disabled) {
  background: var(--green);
  color: #fff;
}

.pager button:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.pager__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chev {
  display: block;
  width: .09rem;
  height: .09rem;
  border-right: .025rem solid currentColor;
  border-bottom: .025rem solid currentColor;
}

.chev--l {
  transform: rotate(135deg);
  margin-left: .03rem;
}

.chev--r {
  transform: rotate(-45deg);
  margin-right: .03rem;
}

.pager__status {
  margin: .18rem auto 0;
  text-align: center;
  font-weight:500;
  font-size: .15rem;
  color: var(--ink-faint);
}



.event__tag,
.event__title,
.event__sub,
.event__content,
.event__note {
  will-change: opacity, transform;
  opacity: 0;
  transform: translate3d(0, max(.25rem, 5%), 0);
  transition: opacity .5s ease-out, transform .5s ease-out;
}

.event .event__head[data-visible="true"] .event__tag,
.event .event__head[data-visible="true"] .event__title,
.event .event__head[data-visible="true"] .event__sub,
.event .event__content[data-visible="true"],
.event .event__note[data-visible="true"] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

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

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

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

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

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


/* footer */
.footer {
  background: var(--green-deep);
}
.is-desktop .footer {
  padding: .48rem 0
}

.is-mobile .footer {
  padding: .4rem
}

.footer .notice {
  text-align: center;
  color: #D9D2C2;
  font-weight: 500;
  line-height: 1.6
}
.is-desktop .footer .notice {
  font-size: .15rem;
}
.is-mobile .footer .notice {
  font-size: .135rem;
}

.footer .company {
  color: #9A9484;
  text-align: center;
  font-weight: 400;
  padding: .14rem 0 0;
  line-height: 1.6
}
.is-desktop .footer .company {
  font-size: .14rem;
}
.is-mobile .footer .company {
  font-size: .13rem;
}