@charset "uft-8";

/* initialization */

:root {
  --bksp: 40px;
  --bksp2: calc(var(--bksp) * 2);
  --bkmg: 4rem;
  --bkmg2: calc(var(--bkmg) * 2);
  --max-wid: 1280px;
  --max-wid-in: calc(var(--max-wid) - var(--bksp) * 2);
  --clr-wh: #FFFFFF;
  --clr-bk: #0C161B;
  --clr-bg1: #FED0D5;
  --clr-bg2: #FFECE9;
  --clr-pk1: #EC5F5C;
  --clr-pk2: #FDA596;
  --clr-pk3: #FFE9DC;
  --clr-gr1: #86A9AE;
  --clr-gr2: #3F99A6;
  --clr-gr2-18: rgb(63 153 166 / 18%);
  --clr-or1: #FFB669;
  --clr-br1: #A72819;
  --clr-pl1: #C488A0;
  --fs-S: 0.75rem;
  --fs-MS: 0.875rem;
  --fs-M: 1rem;
  --fs-ML: 1.125rem;
  --fs-L: 1.5rem;
  --fs-2L: 1.8rem;
  --fs-3L: 2rem;
  --lh-S: 1.3;
  --lh-M: 1.5;
  --lh-L: 1.7;
  --bdrd: 1rem;
  --bdrd-S: 0.5rem;
  --anim: .25s;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}
body {
  margin: 0;
  padding: 0;
  background-color: var(--clr-bg2);
  line-height: 1;
  color: var(--clr-bk);
  font-family: sans-serif;
  font-weight: 400;
  font-style: normal;
  font-optical-sizing: auto;
}

h1, h2, h3, h4 {line-height: var(--lh-S);}
p {line-height: var(--lh-L);}

a {
  text-decoration: none;
  color: var(--clr-gr2);
}
a:hover {
  text-decoration: underline;
  color: var(--clr-bk);
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
a:hover img {opacity: .8;}

figure, figcaption {
  display: block;
  margin: 0;
  padding: 0;
}
img {
  max-width: 100%;
  height: auto;
}

h1, h2, h3, h4, strong, em {font-weight: 700;}

a.btn,
#header_logo div.copy,
#header h1, div.notice em,
#home_tour h1, #home_info h1, #home_prof h2,
#home_schedule h1,
div.events li h2 strong {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 900;
  font-style: normal;
}
time {
  font-family: 'Oswald', sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/* common */

div.content {
  margin: 0 auto;
  max-width: var(--max-wid);
}

.col2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--bksp);
}

.body h2, .body h3, .body h4 {margin: 1.5em var(--bksp);}
.body p {margin: 1em var(--bksp);}

div.hr {
  margin: 0 auto;
  max-width: var(--max-wid);
}
hr {
  margin: var(--bkmg) var(--bksp);
  border: none;
  border-top: 2px solid var(--clr-pk1);
}

aside.share {
  margin: var(--bkmg) var(--bksp);
  text-align: center;
}
aside.share div.sdk {display: none;}
aside.share > * {
  vertical-align: top;
  margin: 0 0.25rem;
}

/* header */

#header {
  background-color: var(--clr-bg1);
  text-align: center;
  overflow: hidden;
}
#header_logo {
  container-type: size;
  position: relative;
  display: inline-block;
  margin-top: var(--bkmg);
  width: 640px;
  height: auto;
  aspect-ratio: 160 / 63;
  background: url(images/logo.svg) center no-repeat;
  background-size: 100%;
}
#header_logo div.copy {
  margin-top: 150px;
  font-size: var(--fs-L);
  line-height: var(--lh-S);
  color: var(--clr-pk1);
}
#header_logo div.copy span {display: block;}
#header h1 {
  margin: var(--bkmg) var(--bksp) 1em;
  font-size: var(--fs-3L);
  line-height: var(--lh-S);
  color: var(--clr-pk1);
}
#header h1 span {display: block;}
#header div.notice {margin-bottom: var(--bkmg);}
#header div.notice em {
  position: relative;
  display: inline-block;
  font-size: var(--fs-L);
  color: var(--clr-pk1);
}
#header div.notice em::after {
  content: '';
  position: absolute;
  left: -0.66em;
  bottom: -0.25em;
  padding-inline: 0.33em 0.66em;
  width: 100%;
  height: 1rem;
  background-color: hsl(55 100% 75%);
  border-radius: 0.5rem;
  mix-blend-mode: multiply
}

/* home_intro */

#home_intro {
  background-color: var(--clr-bg1);
  text-align: center;
  overflow: hidden;
}
#home_intro p {
  font-size: var(--fs-ML);
  font-weight: 500;
}
#home_intro div[lang="ko"] {color: var(--clr-pk1);}

/* home_tour */

#home_tour {
  background-color: var(--clr-bg1);
  overflow: hidden;
}
#home_tour h1 {
  margin: var(--bkmg) var(--bksp);
  text-align: center;
  font-size: var(--fs-2L);
  color: var(--clr-pk1);
}
div.tour ul {
  display: flex;
  justify-content: space-between;
  margin: 0 var(--bksp);
  border-inline: 4px solid var(--clr-pk1);
}
div.tour li {
  position: relative;
  flex: 1;
  padding: 0.5rem 1rem;
  text-align: center;
}
div.tour li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 0;
  right: -2px;
  height: 100%;
  border-right: 4px solid var(--clr-pk1);
}
div.tour h2 {
  margin: 0 0 0.25rem;
  font-size: var(--fs-L);
}
div.tour h2 span[lang=ko] {
  display: block;
  font-size: var(--fs-M);
  color: var(--clr-pk1);
}
div.tour time span {
  display: inline-block;
  line-height: var(--lh-S);
}
div.tour time span.date {font-size: 2.5rem;}
div.tour time span.dow {
  font-size: var(--fs-ML);
  font-family: sans-serif;
}
div.tour time span.com {letter-spacing: -0.33em;}
#home_tour div.body p {
  margin-block: 1.5rem var(--bkmg);
  text-align: center;
}
#home_tour::before,
#footer::after {
  content: '';
  display: block;
  margin: var(--bkmg) auto;
  max-width: var(--max-wid);
  height: 320px;
  background: url(images/bg_sparkle.png) center no-repeat;
  background-size: cover;
}

/* home_info */

#home_info {margin: var(--bkmg) 0;}
#home_info h1 {
  margin: 0 0 2em;
  text-align: center;
  font-size: var(--fs-2L);
  color: var(--clr-pk1);
}
#home_pop_guests {margin: 0 var(--bksp);}
#home_pop_works {
  position: relative;
  margin: var(--bkmg) 0;
  rotate: -5deg;
}
#home_pop_works figure {
  z-index: 1;
  text-align: center;
}
figure span.photo {
  position: relative;
  display: inline-block;
}
#home_pop_works figure img {
  position: relative;
  z-index: 1;
  max-height: 240px;
}
#home_pop_works figcaption {
  margin: 1em 0 0;
  text-align: left;
  font-size: var(--fs-MS);
  line-height: var(--lh-S);
}
#home_pop_works figure:first-child span.photo::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  translate: -88% -50%;
  width: 8rem;
  height: 8rem;
  background: url(images/ic_spk_01.png) center no-repeat;
  background-size: cover;
}

#home_guests_photo {
  position: relative;
  margin: 1.5rem 0;
  rotate: 5deg;
}
#home_guests figure {
  position: relative;
  z-index: 0;
  text-align: center;
}
#home_guests_photo figure span.photo::before {
  content: '';
  position: absolute;
  z-index: 1;
  right: 0;
  top: 0;
  translate: 50% -50%;
  width: 7rem;
  height: 7rem;
  background: url(images/ic_spk_02.png) center no-repeat;
  background-size: cover;
}
#home_guests figure img {border-radius: var(--bdrd);}
#home_guests figcaption {
  margin: 1em 0 0;
  font-size: var(--fs-MS);
  line-height: var(--lh-S);
}
#home_prof h2 {font-size: var(--fs-ML);}
#home_prof h2 span {display: block;}
#home_prof p {font-size: var(--fs-MS);}

/* home_schedule */

#home_schedule {margin: var(--bkmg) 0;}
#home_schedule h1 {
  margin: 2em var(--bksp);
  text-align: center;
  font-size: var(--fs-3L);
  color: var(--clr-pk1);
}
#home_schedule h1 + div.body p {text-align: center;}

div.events ul {
  margin: var(--bkmg) var(--bksp);
  gap: 1rem var(--bksp);
}
div.events li {
  background-color: var(--clr-bg2);
  border: 2px solid var(--clr-pk1);
}
div.events li h2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.66rem 1rem;
  font-size: var(--fs-M);
}
div.events li h2 strong {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
}
div.events li.online h2 strong {
  padding-left: 2em;
  background: url(images/ic_wifi.png) left center no-repeat;
  background-size: auto 100%;
}
div.events li.norsv h2 strong {
  padding: 0.33em 1em;
  background-color: var(--clr-wh);
  border-radius: var(--bdrd);
  color: var(--clr-pk1);
}
div.events li h3 {
  margin: 0;
  padding: 1rem;
  background-color: var(--clr-pk1);
  font-size: var(--fs-ML);
  color: var(--clr-bg2);
}
div.events div.info time {
  display: block;
  margin: 1.5rem 1rem;
  font-size: var(--fs-2L);
  line-height: var(--lh-S);
}
div.events time span {
  display: inline-block;
  font-size: var(--fs-M);
  font-family: sans-serif;
}
div.events li h4 {
  margin: 1em 1rem;
  font-size: var(--fs-ML);
}
div.events div.info p {
  margin: 1em 1rem;
  line-height: var(--lh-M);
}

/* apply */

nav.apply {margin: var(--bkmg2) 0;}
nav.apply div.btn {
  margin: 0 var(--bksp);
  padding: var(--bksp);
  background-color: var(--clr-wh);
  border-radius: var(--bdrd);
  text-align: center;
}
a.btn {
  box-sizing: border-box;
  display: inline-block;
  padding: 0.5em 1em;
  background-color: var(--clr-gr2);
  border: 2px solid var(--clr-gr2);
  border-radius: var(--bdrd-S);
  text-align: center;
  font-size: var(--fs-L);
  line-height: 1;
  text-decoration: none;
  color: var(--clr-wh);
}
a.btn:hover {
  background-color: var(--clr-gr2-18);
  color: var(--clr-gr2);
}
nav.apply div.body p {text-align: center;}

/* footer */

#ft_info {margin: 0 var(--bksp);}
#ft_info h2 {
  margin: 0 0 0.5em;
  font-size: var(--fs-M);
}
#ft_info p {
  margin: 0.5em 0;
  line-height: var(--lh-M);
}

#grant {
  margin: var(--bkmg) 0;
  text-align: center;
  line-height: var(--lh-S);
}
#grant em {
  font-style: normal;
  font-weight: bold;
  color: var(--clr-pk1);
}
#footer::after {
  margin-block: var(--bkmg) 1rem;
  rotate: 180deg;
  mix-blend-mode: multiply;
}

@media only screen and (max-width: 768px) {

:root {
  --bksp: 5%;
  --bkmg: 2rem;
}
/* common */

.col2 {display: block;}

hr {margin: var(--bkmg) var(--bksp);}

/* header */

#header_logo {width: 72%;}
#header_logo div.copy {margin-top: 58cqh;}

/* home_intro */

#home_intro {text-align: left;}
#home_intro div.body:not([lang="ko"]) p br {display: none;}
#home_intro div.body p span {display: block;}

/* home_tour */

div.tour time span.date {font-size: max(5vw, 1.25rem);}

@media only screen and (max-width: 640px) {
  #home_tour h1 {margin: 1.5em var(--bksp);}
  div.tour ul {
    display: block;
    border: none;
    border-top: 2px solid var(--clr-pk1);
  }
  div.tour li {
    position: initial;
    display: flex;
    align-items: center;
    padding: 0.25rem 0;
    border-bottom: 2px solid var(--clr-pk1);
    text-align: initial;
  }
  div.tour li:not(:last-child)::after {content: none;}
  div.tour h2 {
    display: flex;
    align-items: center;
    margin: 0;
    padding-right: 1em;
    font-size: var(--fs-L);
  }
  div.tour h2 span[lang=ko] {
    padding-left: 1em;
    min-width: 4em;
  }
  div.tour time {
    flex: 1;
    text-align: center;
  }
  div.tour time span.date {font-size: var(--fs-3L);}
  #home_tour::before,
  #footer::after {
    height: 25vh;
    background-size: cover;
  }
}

/* home_info */

#home_info h1 {margin: 1.5em var(--bksp);}
#home_info figure {margin: 2rem var(--bksp);}
#home_pop_guests {margin: 0;}
#home_pop p {
  position: relative;
  z-index: 2;
  margin: 1em var(--bksp);
}
#home_pop_works, #home_guests_photo {rotate: initial;}
#home_pop_works figure img {
  width: auto;
  max-width: 66%;
  height: auto;
  max-height: 320px;
}
#home_pop_works figcaption {text-align: center;}

#home_guests_photo figure span.photo::before {
  translate: 5vw -50%;
  width: 5rem;
  height: 5rem;
}
#home_prof h2 {margin: 1em var(--bksp);}
#home_prof p {margin: 1em var(--bksp);}

/* home_schedule */

#home_schedule h1 + div.body p {text-align: left;}

div.events ul {margin: var(--bkmg) 0;}
div.events li {margin: 1rem var(--bksp);}
div.events li h2 {margin: 0.5rem;}
div.events li h3 {padding: 0.5rem;}
div.events div.info time {
  margin: 1rem 0.5rem;
  font-size: var(--fs-L);
}
div.events time span {
  font-size: var(--fs-M);
  font-family: sans-serif;
}
div.events li h4 {
  margin: 1em 0.5rem;
  font-size: var(--fs-M);
}
div.events div.info p {margin: 1em 0.5rem;}

/* apply */

nav.apply div.btn {padding: 1rem;}
nav.apply a.btn {
  padding: 0.5em;
  width: 100%;
}

/* footer */

#ft_info {padding-top: 1rem;}
#ft_info > div {margin: 1rem 0;}

#grant {
  margin: var(--bkmg) var(--bksp);
  text-align: left;
}

}