/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

/* remember to define focus styles! */
:focus {
  outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
  text-decoration: none;
}
del {
  text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*! HTML5 Boilerplate v9.0.0-RC1 | MIT License | https://html5boilerplate.com/ */

/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .visually-hidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * The use of `table` rather than `block` is only necessary if using
 * `::before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}





@font-face {
  font-family: 'nanumSquare';
  font-weight: 300;
  src: url(ace03365daa3d33bdec6.ttf) format('truetype');
}
@font-face {
  font-family: 'nanumSquare';
  font-weight: 400;
  src: url(924c33f60f994924964c.ttf) format('truetype');
}
@font-face {
  font-family: 'nanumSquare';
  font-weight: 700;
  src: url(ebe0aa17b7967cd61f16.ttf) format('truetype');
}
@font-face {
  font-family: 'nanumSquare';
  font-weight: 800;
  src: url(e54714432fdd6e1724a7.ttf) format('truetype');
}

@font-face {
  font-family: 'pretendard';
  font-weight: 100;
  src: url(e45abc28d4828e92dd10.otf) format('truetype');
}
@font-face {
  font-family: 'pretendard';
  font-weight: 200;
  src: url(c1677723ce338097648f.otf) format('truetype');
}
@font-face {
  font-family: 'pretendard';
  font-weight: 300;
  src: url(65372b5df865e8aa758a.otf) format('truetype');
}
@font-face {
  font-family: 'pretendard';
  font-weight: 400;
  src: url(57ca7a4b20797e3b9625.otf) format('truetype');
}
@font-face {
  font-family: 'pretendard';
  font-weight: 500;
  src: url(902a118c9bf50b588451.otf) format('truetype');
}
@font-face {
  font-family: 'pretendard';
  font-weight: 600;
  src: url(4b3283bc0e29a9c97c11.otf) format('truetype');
}
@font-face {
  font-family: 'pretendard';
  font-weight: 700;
  src: url(4e72d46e664b88a6b5c8.otf) format('truetype');
}
@font-face {
  font-family: 'pretendard';
  font-weight: 800;
  src: url(fa944c3a241cdef4584a.otf) format('truetype');
}
@font-face {
  font-family: 'pretendard';
  font-weight: 900;
  src: url(ed4fa19a4df95cb6740b.otf) format('truetype');
}


.en{font-family:"pretendard"}.title-bg{background-image:url(03c923a010fa1a89bcc3.png),linear-gradient(#255D52, #255D52);background-size:14.5em,auto;background-position:left -4em top -3em,center;background-repeat:no-repeat}.bg-gray{background:#f7f7f7}.bg-image{background-image:url(b79733a617b6f262341e.png);background-size:contain;background-position:right bottom}.flex-center{display:flex;justify-content:center;align-items:center}a:link{color:#46b5a5}a:visited{color:#46b5a5}a:hover{color:#46b5a5}a:active{color:#46b5a5}body{font-family:"nanumSquare";background-color:#fff;height:100%}article{min-height:100vh;padding:0 0 1em 0;color:#333;background-image:linear-gradient(197deg, #82f2dc -16%, #ecfefc 24%, rgba(248, 255, 254, 0) 66%, rgba(255, 255, 255, 0) 87%, rgba(255, 255, 255, 0) 100%);background-size:auto 10em;background-repeat:no-repeat;word-break:keep-all;width:100%;max-width:1024px}article>div{padding:0 1em}#scroll-view{height:100vh;overflow:hidden auto}#hash-app{display:flex;position:relative;flex-flow:column;align-items:center;justify-content:center;flex-grow:1;overflow:hidden}.quick-btn-wrap{position:fixed;z-index:10;bottom:2em;left:50%;transform:translateX(-50%)}.quick-btn{display:flex;justify-content:center}.quick-btn button{width:160px;height:70px;margin:0 10px;border:none;border-radius:10px;color:#fff;font-weight:bold;cursor:pointer}.quick-btn button:first-child{background-color:#2b8d8d}.quick-btn button:last-child{background-color:#215e9a}.quick-btn button span{display:block}.quick-btn button .small-text{font-size:14px;font-weight:lighter;margin-bottom:3px;opacity:.8}.quick-btn button .large-text{font-size:20px;font-weight:bold}.scroll-wrap::after{content:"";position:fixed;bottom:0;left:0;width:100%;height:200px;background:linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(255, 255, 255));pointer-events:none}.contact-info{display:flex;flex-direction:column;gap:16px;border-radius:8px}.contact-info .contact-card{display:flex;align-items:flex-start;background-color:#fff;border-radius:8px}.contact-info .contact-card .icon-wrap{display:flex;align-items:flex-start;justify-content:center;width:64px;height:auto;background-color:#f0f0f0;margin-right:16px;padding:8px;border-radius:4px}.contact-info .contact-card .icon-wrap .icon{width:100%;height:auto;object-fit:cover}.contact-info .contact-card .contact-details{flex:1}.contact-info .contact-card .contact-details h3{margin:0;font-size:12px;color:#666;text-decoration:none}.contact-info .contact-card .contact-details p,.contact-info .contact-card .contact-details a{font-size:15px;font-weight:bold;color:#333;word-break:break-all}.contact-info .contact-card .contact-details p:hover,.contact-info .contact-card .contact-details a:hover{color:#333}@media screen and (max-width: 768px){.contact-info{padding:24px}.contact-info .contact-card{width:100%}}.logo-view{display:flex;flex-flow:column;justify-content:center;align-items:center;background-image:url(33dc37aa06d340d027b2.png),linear-gradient(201deg, #82f2dc -5%, #e8fefb 43%, #f8fffe 66%, #ecfefc 90%, #82f2dc 100%);background-size:35em,auto;background-position:right -11em top -9em,center;background-repeat:no-repeat}.logo-view>.logo{flex-grow:1;display:flex;justify-content:center;align-items:center}.logo-view>.logo>img{width:16em}.logo-view>.description-wrap{display:flex;flex-flow:column;align-items:center;gap:2em;flex-grow:0;padding:0 0 4.5em}.logo-view>.description-wrap>p{color:#747474}.logo-view>.description-wrap>img{width:1.5em}.bookmark-preview{display:flex;align-items:center;border:1px solid #ddd;padding:16px;border-radius:8px;margin-bottom:16px;margin-top:20px}.bookmark-image{width:120px;height:120px;object-fit:cover;margin-right:16px;flex-shrink:0}.bookmark-image img{width:100%;height:100%;object-fit:cover;border-radius:4px}.bookmark-info{flex:1}.bookmark-title{font-size:18px;font-weight:bold;margin:0 0 8px}.bookmark-description{font-size:14px;color:#666;margin:0 0 8px}.bookmark-link{font-size:14px;color:#888;text-decoration:none}.main-title{height:11.25em}.main-title>p{padding:4.5em 0 0 0;font-size:1.5em;font-weight:800}.main-title.title-bg>p{color:#fafafa}.poster-page{position:relative}.poster-page .poster-bg{background-color:#215e9a}.poster-page .main-title{text-align:center;height:fit-content;padding:9.5em 3.5em 4.5em;color:#fafafa}.poster-page .main-title p{margin:0;padding:.5em 0}.poster-page .main-title .title-1{font-size:1.5em;font-weight:600;line-height:1.2em}.poster-page .main-title .title-2{font-size:1.05em;font-weight:300;padding-top:4em;line-height:1.5em}.poster-page .main-title .title-2 sup{font-size:.6em;vertical-align:super}.poster-page .main-title .title-3{font-size:.75em;font-weight:200;line-height:1.5em}.poster-page .poster-number{position:absolute;top:40px;right:20px;background-color:rgba(0,0,0,0);border:1.5px solid #fafafa;border-radius:1px;padding:6px 12px}.poster-page .poster-number span{color:#fafafa;font-size:18px;font-weight:bold}.poster-page .content-header{color:#215e9a}.poster-page .content .content-body .info-image-wrap{position:relative}.poster-page .content .content-body .info-image-wrap .zoom-button{background-color:rgba(0,0,0,0);position:absolute;bottom:10px;right:10px;color:#fafafa;border:none}.content{padding:0 1em;line-height:1.9em}.content .icon-wrap{display:flex;justify-content:center;align-items:center;width:40px;height:40px;background-color:rgba(43,141,141,.12);margin:4.5em 0 0 0;border-radius:20%}.content .icon-wrap .icon{width:24px;height:24px}.content .content-header{padding:.96em 0 1.2em;font-size:1.35em;font-weight:800;line-height:1.7em}.content .content-header.en,.content .content-header>.en{font-weight:700}.content .content-sub-header{padding:0 0 1.1em 0;font-size:1em;font-weight:700}.content .content-body{padding:0 0 1.1em 0;font-size:1.08em;letter-spacing:-0.035em}.content .content-body.content-body-margin{margin-top:30px}.content .content-body.footer-content{font-size:.72em;font-weight:400;color:rgba(0,0,0,.5)}.content .video-player{margin-bottom:1.1em}.content .video-player video{width:100%;height:auto}.content .character-container{display:flex;flex-direction:column;align-items:center;margin-bottom:20px}.content .character-container .character-image-container{width:100%;margin-bottom:10px}.content .character-container .character-image-container .character-image{max-width:100%;height:auto}.content .character-container .character-description{width:300px;text-align:center;font-size:.96em;letter-spacing:-0.035em}.content .character-container .character-description .character-name{font-weight:bold;color:#46b5a5;text-decoration:none}.content .character-container .character-description .character-name:hover{text-decoration:underline}.character-image-container{display:flex;justify-content:center;align-items:center}.character-image-container .character-image{width:33.33%;max-width:100%;max-height:100%;object-fit:contain}.content .content-body .info-image-wrap{display:flex;align-items:center;justify-content:center}.content .content-body .info-image-wrap>img{width:100%;max-width:50em}.content .content-body .info-image-wrap>img.padding-lr{padding:1em 0;width:92%;max-width:45em}article .content .content-body:last-child{padding-bottom:1em}.link{color:#46b5a5;text-decoration:underline;text-underline-offset:.2em;font-size:.96em}.link:hover{text-decoration:none}.link>.icon{display:inline-block;vertical-align:middle;width:1.4em;height:1.4em}.reference-link-button{background-color:#fff;border:#46b5a5 1px solid;border-radius:.5em;padding:.75em;font-size:.84em;text-align:start;width:100%;display:flex;align-items:flex-start;text-decoration:none;margin-bottom:1em;border-color:#215e9a}.reference-link-button .icon{width:1.68em;height:1.68em;margin-right:.7em;flex-shrink:0}.reference-link-button .button-text{white-space:normal;line-height:1.5em;word-wrap:break-word;padding-right:.2em}.link-span,.link-span:link,.link-span:visited,.link-span:hover,.link-span:active{color:#46b5a5;font-weight:500;text-decoration:underline;text-underline-offset:.25em}.link-span>.icon{width:1.54em;height:1.54em;padding:0 .28em 0 0}.title-icon{padding:.8em;width:fit-content;overflow:hidden;border-radius:.5em;background-color:rgba(70,181,165,.15)}.title-icon img{height:1.4em}.info-box{display:flex;align-items:center;justify-content:center;background-color:#e6f3f2;border-radius:1.5em}.info-box .icon{width:1.54em;height:1.54em;padding:.4em}.info-box p{font-size:1.08em;line-height:1.71em;padding:.4em;font-weight:600}.partner-wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5em}.partner-wrap>.partner-box{width:30%;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.partner-wrap>.partner-box>img{width:90%;max-width:12em}#x-scroll-wrap{overflow-x:auto;overflow-y:hidden}#x-scroll-wrap .scroll-item{height:22em}@media all and (min-height: 1024px){#x-scroll-wrap .scroll-item{height:30em}}#x-scroll-wrap .scroll-item img{height:100%}.scroll-guide{display:flex;flex-flow:column;position:absolute;background-color:RGBA(255, 255, 255, 0.92);padding:2.5em;border:1px solid #d8d8d8;border-radius:1em;justify-content:center;align-items:center;gap:1em}.scroll-guide .icon{width:2.1em}@media all and (min-width: 1000px){#x-scroll-wrap .scroll-item{height:30em}article>div,.content{padding:0 4em}}.modal{display:none;position:fixed;z-index:999;padding-top:100px;padding-left:0;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,.9)}.modal-content{margin:auto;display:block;width:100%;max-width:700px;transform:scale(1);transition:transform .3s ease-in-out}.modal-content.zoomed{transform:scale(1.5)}.close{color:#fff;position:absolute;top:10px;right:45px;font-size:35px;font-weight:bold;cursor:pointer}#link-arvo{display:inline-block;padding:8px 0;background-color:rgba(0,0,0,0);border:none;color:#45b6a5;text-decoration:underline;cursor:pointer;font-size:16px}#link-arvo:hover{text-decoration:underline}#link-arvo:focus{outline:none}#link-arvo .icon{display:inline-block;vertical-align:middle;margin-right:5px;width:16px;height:16px}