/* common */
:root{
  --black:#000;
  --white:#fff;
  --grey:#717171;
  --back1:#FFFEF8;
  --back2:#E9F4EA;
  --maxWidth:100%;
  --marginTop:30px;
  --marginLeft:30px;
}
*{
  box-sizing:border-box;
  word-break:keep-all;
  word-wrap:break-word;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
}
a{ color:var(--grey); }
html{ font-size:clamp(12px,3.49vw,15px); }
body{
  font-size:clamp(12px,3.49vw,15px);
  color:var(--grey);
  font-weight:400;
  font-family:neue-haas-grotesk-display, 'neue-haas-grotesk-display', Pretendard, 'Pretendard', sans-serif;
  line-height:1.272;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  background-color:var(--grey);
  overflow-y:hidden;
  height:calc(100% + 45px);
}

/* transition */
#wrap,
section,
.logotype,
#logo,
#footerNav,
#footerNav > li > :is(a,span){ transition:380ms; }

/* main */
#wrap{ position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; height:100%; max-width:480px; max-height:1200px;
  background-color:var(--back1);
  overflow:hidden; overflow-y:scroll;
  font-size:0;
}
#wrap::-webkit-scrollbar{ display:none; }

#logo{ position:fixed; top:85px; left:50%; transform:translateX(-50%); width:165px;
  z-index:200;
}

/* section */
section{ position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; opacity:0; pointer-events:none;
  padding:75px var(--marginLeft);
}

/* part */
#wrap.intro #logo{ top:50%; transform:translate(-50%,-50%); width:240px; pointer-events:none;
  filter:brightness(10) invert(0);
  -webkit-filter:brightness(10) invert(0);
}
#wrap.detail,
#wrap.map{ background-color:var(--back2); }

#wrap.intro #intro,
#wrap.description #description,
#wrap.detail #detail,
#wrap.map #map{ opacity:1; pointer-events:all; }

#wrap.map #logo{ opacity:0; }

#wrap.intro #footerNav{ opacity:0; pointer-events:none; }
#wrap.detail #footerNav,
#wrap.map #footerNav{ background-color:var(--back2); }
#wrap.map #footerNav:before{ width:100%; }

#wrap.description #footerNav > li.description > :is(a,span),
#wrap.detail #footerNav > li.detail > :is(a,span),
#wrap.map #footerNav > li.detail > :is(a,span){ font-weight:600; }

.logotype{ position:fixed; top:9.11%; left:50%; transform:translate(-50%,0); width:38.37%;
  z-index:200;
}

#intro{ overflow:hidden; cursor:pointer; }
  #intro .logotype{ top:50%; transform:translate(-50%,-50%); width:55.35%; pointer-events:none; }
  #intro #video{ position:fixed; top:50%; left:50%; width:100vw; height:100vh; overflow:hidden; transform:translate(-50%,-50%); }
    #intro #video .videoWrap{ position:absolute; top:50%; left:50%; width:100vw; height:177.78vw; min-height:100vh; min-width:56.25vh; transform:translate(-50%,-50%); }
      #intro #video .videoWrap iframe{ position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; }

#description{
  display:flex; align-items:flex-end;
}
  #description .textArea{ padding-bottom:90px; }
    #description .textArea p{
      font-family:adobe-garamond-pro, 'adobe-garamond-pro', serif;
      font-size:clamp(12px,3.84vw,16.5px);
      letter-spacing:-0.01em;
    }
    #description .textArea p + p{ margin-top:24px; }


#detail{
  display:flex; align-items:flex-end;
}
  #detail .invite{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; }
    #detail .invite p{
      font-family:adobe-garamond-pro, 'adobe-garamond-pro', serif;
      font-weight:600;
      font-size:clamp(15px,4.19vw,18px);
      letter-spacing:-0.01em;
      text-align:center;
    }
    #detail .invite .mapBtn{ display:block; margin-top:24px;
      font-size:clamp(12px,3.49vw,15px);
      font-weight:600;
      color:#81AD95;
      letter-spacing:-0.001em;
      text-align:center;
    }
    #detail .invite .mapBtn:after{ content:''; width:14px; height:12px; display:block; margin:8px auto 0;
      background-position:center;
      background-repeat:no-repeat;
      background-size:contain;
      background-image:url('../img/arrow_down.svg');
    }
  #detail .date{ padding:16px 0 36px; border-top:0.5px solid var(--grey); }
    #detail .date > :is(dt,dd){ display:inline-block; width:50%; margin-bottom:12px;
      font-size:clamp(12px,3.49vw,15px);
      text-transform:uppercase;
      letter-spacing:0.001em;
      line-height:1;
    }
    #detail .date > dt{ font-weight:600; text-align:left; }
    #detail .date > dd{ text-align:right; }

#map{  }
  #map .mapboxContainer{ position:absolute; top:0; left:0; right:0; bottom:75px; width:100%; }

#footerNav{ position:fixed; left:0; right:0; bottom:0; width:100%; padding:8.5px 50px 50px; background-color:var(--back1);
  display:flex; flex-direction:row; justify-content:space-between;
}
#footerNav:before{ content:''; position:absolute; top:0; left:50%; width:calc(100% - var(--marginLeft)*2); border-top:0.7px solid var(--grey); transform:translateX(-50%); }
  #footerNav > li{  }
    #footerNav > li > :is(a,span){ display:block; cursor:pointer;
      font-size:clamp(10px,3.14vw,13.5px);
      text-transform:uppercase;
    }

/* common */
.btnMove{ cursor:pointer; }