/*
Theme Name: Haku
Template: blankslate
Version: 1.0
Description: Haku Theme
Author: UROK
*/

@import url("//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");
@import url("//cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

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

:root { --swiper-navigation-sides-offset: 2em; --swiper-theme-color: #37b766; }

html :where(.wp-block) {
    max-width: 1200px;
}

.root_daum_roughmap.root_daum_roughmap_landing { width: 100% }
.root_daum_roughmap.root_daum_roughmap_landing .cont { display: none }

A { color: inherit; text-decoration: none; }
P { color: #676767; letter-spacing: -.03em; line-height: 1.75em; margin: 1em 0; word-break: keep-all; }
BODY { overflow-x: hidden; }

.wp-block, BODY, INPUT, TEXTAREA, SELECT, BUTTON, TABLE { font-family: "Pretendard"; font-size: 18px; }

.wp-block-heading { font-weight: 900 }
H1.wp-block-heading { font-size: 2.5em }
H2.wp-block-heading { font-size: 2em }
H3.wp-block-heading { font-size: 1.5em }
H4.wp-block-heading { font-size: 1.25em }
H5.wp-block-heading { font-size: 1em }
H6.wp-block-heading { font-size: .875em }
.wp-block-button__link { background-color: #f8b500; display: block; font-size: .9em; font-weight: 700; padding: .75em 2.5em .75em 1.5em; overflow: hidden; position: relative }
.wp-block-button__link::before { background-color: rgba(255, 255, 255, .25); content: ''; display: block; height: 100%; left: -35%; position: absolute; top: 0; transform: skew(-20deg); width: 30% }
@keyframes wp-block-button__link__shine {
    0% { left: 105%; width: 1% }
    25% { left: -205%; width: 200% }
    100% { left: 105%; width: 10% }
}
.wp-block-button__link:hover::before { animation: wp-block-button__link__shine 1s ease-in-out forwards }
.wp-block-button__link::after { content: '\f061'; display: inline-block; font-family: 'Font Awesome 6 Free'; font-weight: 900; margin-left: .5em; position: absolute; right: 1em; top: 50%; transform: translateY(-50%) }
@keyframes wp-block-button__link__arrow {
    0% { opacity: 0; right: 3em }
    100% { opacity: 1; right: 1em }
}
.wp-block-button__link:hover::after { animation: wp-block-button__link__arrow 1s ease-in-out forwards }

.wp-block-separator { border: 0; border-top: 1px solid; height: 0; opacity: .5 }

.wp-block-table > TABLE { color: #676767; font-size: .9em }
.wp-block-table > TABLE > THEAD { border-bottom: 1px solid #37b766 }
.wp-block-table > TABLE TD,
.wp-block-table > TABLE TH { border: 0; border-bottom: 1px solid #ddd; padding: 1em }
.wp-block-table > TABLE > THEAD TH { border-bottom-color: #37b766; color: #37b766 }

.wp-block-list { border-top: 1px solid #37b766; color: #676767; font-size: .9em; list-style: none; margin: 1em 0 }
.wp-block-list > LI { border-bottom: 1px solid #ddd; line-height: 1.5em; padding: 1em 0 1em 1em; position: relative }
.wp-block-list > LI::before { background-color: #37b766; border-radius: 50%; content: ''; display: block; font-size: .33em; height: 1em; left: 0; opacity: .5; position: absolute; top: 4.5em; width: 1em }
.wp-block-list.has-link A { background-color: #eee; border-radius: 10em; color: #888; display: inline-block; font-size: .9em; font-weight: 700; margin: 0 1em; overflow: hidden; padding: .25em 3em .25em 1em; position: relative; vertical-align: middle; }
.wp-block-list.has-link A::before { background-color: rgba(255, 255, 255, .25); content: ''; display: block; height: 100%; left: -35%; position: absolute; top: 0; transform: skew(-20deg); width: 30% }
.wp-block-list.has-link A:hover::before { animation: wp-block-button__link__shine 1s ease-in-out forwards }
.wp-block-list.has-link A::after { content: '\f061'; display: inline-block; font-family: 'Font Awesome 6 Free'; font-weight: 900; margin-left: .5em; position: absolute; right: 1em; top: 50%; transform: translateY(-50%) }

#wrapper > #container > #content .header { display: none }
#wrapper {  }

#wrapper > #header { background-color: #fff; box-shadow: 0 0 1em rgba(0, 0, 0, .1); position: fixed; left: 0; top: 0; width: 100%; z-index: 100 }
#wrapper > #header > #branding { left: 2em; letter-spacing: -.035em; padding-left: 6em; position: absolute; top: 50%; transform: translateY(-50%); }
#wrapper > #header > #branding > #site-title { font-size: 1em; line-height: 1em; }
#wrapper > #header > #branding > #site-title A { display: block; }
#wrapper > #header > #branding > #site-title A > .hk-logo { left: 0; margin-top: -.15em; position: absolute; top: 0 }
#wrapper > #header > #branding > #site-title A > SPAN { display: block; font-weight: 900; }
#wrapper > #header > #branding > #site-description { color: #888; font-size: .8em; margin-top: .25em }

#wrapper > #header > #menu {  }
#wrapper > #header > #menu > .menu-global-container { white-space: nowrap }
#wrapper > #header > #menu > .menu-global-container > #menu-global { align-items: center; display: flex; justify-content: center; }
#wrapper > #header > #menu > .menu-global-container > #menu-global > .menu-item { position: relative; text-align: center }
#wrapper > #header > #menu > .menu-global-container > #menu-global > .menu-item > A { display: block; letter-spacing: -.035em; padding: 2em; position: relative; z-index: 1 }
#wrapper > #header > #menu > .menu-global-container > #menu-global > .menu-item > .sub-menu { background-color: #fff; border-radius: .5em; border-top: 2px solid #37b766; box-shadow: 0 0 1em rgba(0, 0, 0, .1); left: 50%; opacity: 0; padding: .5em; position: absolute; top: 4em; transform: translate(-50%, 1em); transition: all 250ms ease-in-out; visibility: hidden }
#wrapper > #header > #menu > .menu-global-container > #menu-global > .menu-item > .sub-menu::before { border: .5em solid transparent; border-bottom-color: #37b766; content: ''; display: block; height: 0; left: 50%; position: absolute; top: -1em; transform: translateX(-50%); width: 0; z-index: -1 }
#wrapper > #header > #menu > .menu-global-container > #menu-global > .menu-item > .sub-menu::after { bottom: 0; content: ''; display: block; position: absolute; top: -5em; width: 100%; z-index: -1 }
#wrapper > #header > #menu > .menu-global-container > #menu-global > .menu-item > .sub-menu > .menu-item > A { border-radius: .5em; color: #444; display: block; letter-spacing: -.035em; padding: .75em 2em }
#wrapper > #header > #menu > .menu-global-container > #menu-global > .menu-item > .sub-menu > .menu-item > A > SPAN { display: inline-block; position: relative }
#wrapper > #header > #menu > .menu-global-container > #menu-global > .menu-item > .sub-menu > .menu-item > A:hover { background-color: rgba(55, 183, 102, .075); color: #37b766 }
#wrapper > #header > #menu > .menu-global-container > #menu-global > .menu-item > .sub-menu > .current-menu-item > A > SPAN::after { background-color: #37b766; bottom: -.25em; content: ''; display: block; height: 1px; left: 0; position: absolute; width: 100% }
#wrapper > #header > #menu > .menu-global-container > #menu-global > .menu-item:hover > .sub-menu { opacity: 1; transform: translate(-50%, 0); visibility: visible }
#wrapper > #header > #menu > .menu-global-container > #menu-global .menu-item.current-menu-ancestor > A > SPAN,
#wrapper > #header > #menu > .menu-global-container > #menu-global .menu-item.current-menu-item > A > SPAN,
#wrapper > #header > #menu > .menu-global-container > #menu-global .menu-item:hover > A > SPAN { color: #37b766 }
#wrapper > #header > #menu > .menu-global-container > #menu-global .menu-item.current-menu-ancestor > A > SPAN,
#wrapper > #header > #menu > .menu-global-container > #menu-global .menu-item.current-menu-item > A > SPAN { font-weight: 700 }

#wrapper > #header > #extra-menu { align-items: center; display: flex; position: absolute; right: 2em; top: 50%; transform: translateY(-50%) }
#wrapper > #header > #extra-menu > A { border-radius: 50%; display: block; font-size: 1.25em; padding: .5em; transition: background-color .2s ease-in-out }
#wrapper > #header > #extra-menu > A:hover { background-color: rgba(255, 255, 255, .25) }
#wrapper > #header > #extra-menu > A > I { height: 1em; width: 1em }
#wrapper > #header > #extra-menu > A > SPAN { display: none }
#wrapper > #header > #extra-menu > #search { background-color: rgba(0, 0, 0, .05); border-radius: 5em; margin-left: 1em; padding-right: 2em; position: relative }
#wrapper > #header > #extra-menu > #search > FORM > LABEL { display: block; }
#wrapper > #header > #extra-menu > #search > FORM > LABEL > INPUT { background: none; padding: .5em 0 .5em 1em; transition: width .2s ease-in-out; width: 8em; }
#wrapper > #header > #extra-menu > #search > FORM > LABEL > INPUT:focus { width: 16em }
#wrapper > #header > #extra-menu > #search > FORM > LABEL > INPUT::placeholder { color: rgba(0, 0, 0, .25); }
#wrapper > #header > #extra-menu > #search > FORM > .search-submit { background: none; color: inherit; cursor: pointer; padding: .5em; position: absolute; right: .5em; top: 50%; transform: translateY(-50%) }
#wrapper > #header > #extra-menu > #search > FORM > .search-submit::before { content: '\f002'; display: block; font-family: 'Font Awesome 6 Free'; font-size: 1em; font-weight: 900; }
#wrapper > #header > #extra-menu > #search > FORM > .search-submit > SPAN { display: none }

#wrapper > #container { background-color: #fff; margin-top: 3.2em; }

#wrapper > #container > #content > .hk-breadcrumb { background-color: #fff; border-bottom: 1px solid #ddd; color: #888; font-size: .9em; left: 0; position: absolute; top: calc(20vw + 5em); white-space: nowrap; width: 100%; z-index: 2 }
#wrapper > #container > #content > .hk-breadcrumb > NAV.breadcrumb-nav { align-items: center; display: flex; }
#wrapper > #container > #content > .hk-breadcrumb > NAV.breadcrumb-nav > * { border-left: 1px solid #ddd; }
#wrapper > #container > #content > .hk-breadcrumb > NAV.breadcrumb-nav > .breadcrumb-item { position: relative; width: 15em; }
#wrapper > #container > #content > .hk-breadcrumb > NAV.breadcrumb-nav > .breadcrumb-item:first-child { width: auto }
#wrapper > #container > #content > .hk-breadcrumb > NAV.breadcrumb-nav > .breadcrumb-item:last-child { border-right: 1px solid #ddd; }
#wrapper > #container > #content > .hk-breadcrumb > NAV.breadcrumb-nav > .breadcrumb-item > .dropdown { background-color: #fff; border-radius: .5em; border-top: 2px solid #37b766; box-shadow: 0 0 1em rgba(0, 0, 0, .1); color: #888; font-size: .9em; left: 50%; position: absolute; text-align: center; top: calc(100% + 2em); transform: translateX(-50%); min-width: 100%; z-index: 1; opacity: 0; padding: .5em; visibility: hidden; transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1); }
#wrapper > #container > #content > .hk-breadcrumb > NAV.breadcrumb-nav > .breadcrumb-item > .dropdown::before { border: .5em solid transparent; border-bottom-color: #37b766; content: ''; display: block; height: 0; left: 50%; position: absolute; top: -.99em; transform: translateX(-50%); width: 0; z-index: -1 }
#wrapper > #container > #content > .hk-breadcrumb > NAV.breadcrumb-nav > .breadcrumb-item > .dropdown::after { bottom: 0; content: ''; display: block; position: absolute; top: -5em; width: 100%; z-index: -1 }
#wrapper > #container > #content > .hk-breadcrumb > NAV.breadcrumb-nav > .breadcrumb-item > .dropdown > LI { opacity: 0; transform: translateY(1em); transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1); transition-delay: calc(var(--i, 0) * 50ms); }
#wrapper > #container > #content > .hk-breadcrumb > NAV.breadcrumb-nav > .breadcrumb-item > .dropdown > LI > A { display: block; padding: 1em }
#wrapper > #container > #content > .hk-breadcrumb > NAV.breadcrumb-nav > .breadcrumb-item > .dropdown > LI > A:hover { background-color: rgba(55, 183, 102, .075); border-radius: .5em; color: #37b766 }
#wrapper > #container > #content > .hk-breadcrumb > NAV.breadcrumb-nav > .breadcrumb-item:first-child > A { padding-right: 1em }
#wrapper > #container > #content > .hk-breadcrumb > NAV.breadcrumb-nav > .breadcrumb-item > A { border-radius: 5em; display: block; padding: 1em 3em 1em 1em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; transition: all 250ms ease-in-out; }
#wrapper > #container > #content > .hk-breadcrumb > NAV.breadcrumb-nav > .breadcrumb-item > A > .fa-angle-down { margin-left: .5em; margin-top: -.5em; transition: transform 250ms ease-in-out; position: absolute; right: 1em; transform-origin: 50% 50%; opacity: .5; top: 50%; }
#wrapper > #container > #content > .hk-breadcrumb > NAV.breadcrumb-nav > .breadcrumb-item:hover > A { background-color: rgba(255, 255, 255, .25); }
#wrapper > #container > #content > .hk-breadcrumb > NAV.breadcrumb-nav > .breadcrumb-item:hover > A > .fa-angle-down { transform: rotate(180deg); opacity: 1; }
#wrapper > #container > #content > .hk-breadcrumb > NAV.breadcrumb-nav > .breadcrumb-item:hover > .dropdown { opacity: 1; visibility: visible; top: calc(100% + 1em); }
#wrapper > #container > #content > .hk-breadcrumb > NAV.breadcrumb-nav > .breadcrumb-item:hover > .dropdown > LI { opacity: 1; transform: translateY(0); }

#wrapper > #footer { background-color: #fff; border-top: 1px solid #ddd; }
#wrapper > #footer > .footer-inner { font-size: .8em; padding: 4em 0 }
#wrapper > #footer > .footer-inner > H1 { font-size: 1.5em; margin-bottom: 1em }
#wrapper > #footer > .footer-inner > H1 > .hk-logo { filter: grayscale(100%); opacity: .5 }
#wrapper > #footer > .footer-inner > H1 > SPAN { display: none }
#wrapper > #footer > .footer-inner > ADDRESS { font-style: normal; }
#wrapper > #footer > .footer-inner > ADDRESS > P { color: rgba(0, 0, 0, .5); display: inline-block; line-height: 1em; margin: 0 .75em .75em 0 }
#wrapper > #footer > .footer-inner > #copyright { color: #37b766; font-weight: 300; margin-top: 1em }

/* HAKU STYLES */

.hk-logo { display: block; font-size: 2.5em; height: 1em; width: 2.05315em; background-image: url('./assets/images/title.png'); background-size: cover; background-position: center; background-repeat: no-repeat; }
.hk-hero { height: 20vw; left: 0; overflow: hidden; position: fixed; top: 5em; width: 100%; z-index: -2; }
.hk-hero::before { background-color: rgba(25, 25, 25, .33); content: ''; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100% }
.hk-hero > IFRAME { height: 120%; left: 50%; object-fit: cover; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 190vh; min-width: 120%; min-height: 60vw; pointer-events: none; z-index: -1 }

.hk-headline { align-items: center; background-color: rgba(25, 25, 25, .33); display: flex; }

.hk-line { height: 3px; margin: 0 auto; opacity: 1;  width: 3em; }

.hk-history { border-top: 0; list-style: none; padding: 0; position: relative }
.hk-history ul { border-top: 0; }
.hk-history li { border-bottom: 0 }
.hk-history li::before { display: none }
.hk-history::after { background: #37b766; bottom: 0; content: ""; left: 50%; position: absolute; top: 5em; transform: translateX(-50%); width: 1px; z-index: 1 }
.hk-history > li { color: #37b766; font-size: 2em; font-weight: bold; margin: 2.778em 0; padding-bottom: 2em; position: relative; text-align: center; z-index: 2; margin-top: 0 }
.hk-history > li > ul { font-size: 0.5em; list-style: none; margin: 5em 0 0; padding: 0 }
.hk-history > li > ul > li { background: #f9f9f9; border-radius: 0.5em; margin: -2em 0; padding: 0.8em 1em; position: relative; width: 31.5%; z-index: 2; line-height: 1.8em }
.hk-history > li > ul > li img { display: block; border-radius: 1em; width: 80% !important; margin: 1em 0; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.hk-history > li > ul > li::after { background: #fff; border: 0.2em solid #37b766; border-radius: 50%; content: ""; height: 0.3em; position: absolute; top: 50%; width: 0.3em; z-index: 3; transform: translateY(-50%) }
.hk-history > li > ul > li:nth-child(odd) { left: 0; margin-left: 17%; margin-right: auto; text-align: left }
.hk-history > li > ul > li:nth-child(odd)::after { right: -1.25em }
.hk-history > li > ul > li:nth-child(even) { left: 51.5%; margin-left: 0; margin-right: auto; text-align: left }
.hk-history > li > ul > li:nth-child(even)::after { left: -1.25em }
.hk-history li ul li ul { color: #444; font-size: 0.95em; font-weight: 300; margin-top: 0.5em; padding-left: 0.8em; line-height: 2em }
.hk-history li ul li ul li::before { display: block }

#wrapper .hk-headline { background: none; left: 50%; transform: translateX(-50%); height: 20vw; position: fixed; top: 5em; z-index: -1 }

#wrapper > #container { margin-top: calc(20vw + 5em) }
#wrapper > #container > #content,
#wrapper > #container > #content > .hk-breadcrumb > NAV.breadcrumb-nav,
#wrapper .hk-headline,
#wrapper > #footer > .footer-inner { margin: 0 auto; width: 1200px; }

#wrapper > #container > #content { padding: 4em 2em }

BODY.home #wrapper .hk-hero,
BODY.home #wrapper .hk-headline { height: calc(100% - 5em) }
BODY.home #wrapper .hk-headline { justify-content: center; width: 100% }
BODY.home #wrapper > #container { margin-top: 100vh }

/* CUSTOM STYLES */

.greetings-banner { background-position: right top; background-repeat: no-repeat; background-size: 50% !important; padding-right: 8%; position: relative; z-index: 1 }
.greetings-banner::before { background-color: #f7f7f7; bottom: 0; content: ''; display: block; left: -50vw; position: absolute; right: -50vw; height: 60%; z-index: -1 }

#wrapper .df-popup-thumb .df-book-title { bottom: 0; line-height: 1.5em; opacity: 1; word-break: keep-all; }