:root {
    --submenu-height: auto;
}

/* Common */
.container { width: 1440px; margin: 0 auto; }

/* Header */
#header { position: relative; z-index: 9999; width: 100%; height: 160px; background: transparent; }
#header .container { position: relative; display: flex; justify-content: space-between; align-items: center; height: 100%; padding: 0 35px; }

#header .container .logo a img { width: 300px; height: auto; }

/* Gnb */
#header .container #nav { height: 100%; }
#header .container #nav .gnb { display: flex; height: 100%; }
#header .container #nav .gnb > li { position: relative; display: flex; height: 100%; padding: 0 30px; }
#header .container #nav .gnb > li p { display: flex; justify-content: center; align-items: center; font-size: 26px; color: #000; cursor: default; }
#header .container #nav .gnb > li .submenu { position: absolute; top: calc(100% - 1px); left: 0; right: 0; height: var(--submenu-height); padding: 20px 0; opacity: 0; pointer-events: none; clip-path: inset(0%, 0%, 100%, 0%); transition: opacity 200ms, clip-path 200ms ease-out; }
#header .container #nav .gnb > li .submenu li { margin-top: 25px; }
#header .container #nav .gnb > li .submenu li:first-child { margin-top: 0; }
#header .container #nav .gnb > li .submenu li a { display: block; font-size: 24px; text-align: center; color: #000; }
#header .container #nav .gnb > li .submenu li a:hover { color: #3e82d2; }
#header .container #nav .gnb > li .submenu li a.active { color: #3e82d2; }

/* Gnb - Close */
#header::before { position: absolute; top: 0; left: 0; z-index: -1; content: ""; width: 100%; height: 100%; background: #ffffff; opacity: 0; pointer-events: none; transition: height 200ms ease-out, opacity 200ms; transition-delay: 0ms, 100ms, 0ms; }
#header::after { position: absolute; bottom: 0; left: 0; right: 0; z-index: -1; content: ""; border-bottom: 1px solid #ccc; opacity: 0; pointer-events: none; }

/* Gnb - Open */
#header.show-menu .container #nav .gnb > li .submenu { opacity: 1; pointer-events: auto; clip-path: inset(0%, 0%, 0%, 0%); transition-duration: 200ms, 300ms; }
#header.show-menu::before { height: 430px; opacity: 1; transition-duration: 300ms, 200ms, 300ms; transition-delay: 0ms, 0ms, 0ms }
#header.show-menu::after { opacity: 1; }


/* Footer */
#footer { background: #262626; }
#footer .container { display: flex; justify-content: space-between; align-items: center; height: 260px; padding: 0 80px; }

#footer .logo {}
#footer .logo img { width: 340px; height: auto; filter: brightness(0) invert(1); }

#footer .footer-info { font-size: 18px; color: #fff; }
#footer .footer-info .info-item { display: flex; margin-bottom: 15px; }
#footer .footer-info .info-item li { margin-left: 50px; }
#footer .footer-info .info-item li:first-child { margin-left: 0; }

#footer .footer-copy { font-size: 20px; color: #fff; }

/* - 서브페이지 푸터 */
#footer.sub { background: #fff; border-top: 2px solid #C8C5C5; }
#footer.sub .logo img { filter: none; }
#footer.sub .footer-info { color: #000; }
#footer.sub .footer-copy { color: #000; }


/* Common */
/* - 페이지 네비게이션 */
.page-navigation { padding: 100px 0; }
.page-navigation ul { display: flex; justify-content: flex-end; margin-right: 65px; }
.page-navigation ul li { position: relative; margin-left: 70px; font-size: 24px; color: #767676; }
.page-navigation ul li.active { color: #2271CC; }

.page-navigation ul li:after { position: absolute; top: 50%; right: -39px; transform: translateY(-50%); content: ""; width: 9px; height: 14px; background-image: url("/assets/images/arrow-right-small.png"); background-repeat: no-repeat; }
.page-navigation ul li:last-child:after { display: none; }

/* - 섹션 제목 */
.section-title { padding: 20px 0 60px 0; }
.section-title h2 { display: flex; align-items: center; width: 1440px; margin: 0 auto; padding: 0 120px; }
.section-title h2 p { margin-right: 60px; font-size: 40px; font-weight: 600; color: #3E82D2; }
.section-title h2 span { position: relative; font-size: 24px; font-weight: 400; color: #767676; }
.section-title h2 span:after { position: absolute; top: 50%; left: -29px; transform: translateY(-50%); width: 2px; height: 27px; content: ""; background: #C8C5C5; }


/* - 강제 조정 */
.font-s-22 { font-size: 22px !important; }