@charset "utf-8";
#hd_login_msg, #hd_pop {display: none;}
.sec {position: relative;padding-block: var(--sec-pad);overflow: clip;}
.sec > .inner {position: relative;z-index: 2;display: flex;flex-direction: column;align-items: flex-start;gap: 5.6rem;}
.btn {position: relative;display: inline-flex;align-items: center;justify-content: space-between;gap: 3rem;min-width: 26rem;padding: 2rem 2.4rem;background: var(--blue);color: #fff;font-size: 1.8rem;font-weight: 500;line-height: 1.7;overflow: hidden;isolation: isolate;transition: background .3s, box-shadow .3s, translate .3s var(--ease);translate: var(--bx, 0) var(--by, 0);}
.btn::before {content: '';position: absolute;inset: 0;z-index: -1;background: var(--navy);translate: -101% 0;transition: translate .45s var(--ease);}
.btn:hover {box-shadow: 0 1.6rem 3.2rem rgba(36, 92, 255, .35);}
.btn:hover::before {translate: 0 0;}
.btn-in-dark::before {background: #fff;}
.btn-in-dark:hover {color: var(--navy);}
.btn .ar {display: inline-block;transition: translate .3s var(--ease);}
.btn:hover .ar {translate: .5rem -.5rem;}
.hd {position: sticky;top: 0;z-index: 100;background: #fff;transition: box-shadow .3s, background .3s;}
.hd.is-fixed {box-shadow: 0 .2rem 2rem rgba(11, 23, 53, .08);}
.hd-in {display: flex;align-items: center;justify-content: space-between;gap: 3rem;height: var(--header-h);transition: height .35s var(--ease);}
.hd.is-fixed .hd-in {height: 8.4rem;}
.logo {display: inline-flex;align-items: center;gap: 1.2rem;font-size: clamp(2.4rem, 1.9vw, 3.2rem);font-weight: 700;line-height: 1.15;color: var(--blue);}
.logo-mk {display: inline-grid;place-items: center;width: 4.4rem;height: 4.4rem;border: .3rem solid var(--blue);border-radius: 50%;font-size: 2.2rem;line-height: 1;transition: rotate .6s var(--ease), background .3s, color .3s;}
.logo:hover .logo-mk {rotate: 360deg;background: var(--blue);color: #fff;}
.hd .btn {min-width: 22rem;padding: 1.6rem 2.4rem;}
.burger {display: none;position: relative;width: 4.8rem;height: 4.8rem;}
.burger i {position: absolute;left: 1rem;right: 1rem;height: .2rem;background: var(--navy);transition: translate .3s, rotate .3s, opacity .3s;}
.burger i:nth-child(1) {top: 1.6rem;}
.burger i:nth-child(2) {top: 2.3rem;}
.burger i:nth-child(3) {top: 3rem;}
.mnav {position: fixed;inset: 0;z-index: 200;display: flex;flex-direction: column;padding: 2rem;background: var(--navy);color: #fff;visibility: hidden;opacity: 0;translate: 0 -2rem;transition: opacity .35s, translate .35s var(--ease), visibility .35s;}
.mnav.is-on {visibility: visible;opacity: 1;translate: 0 0;}
.mnav-top {display: flex;align-items: center;justify-content: space-between;height: 6.4rem;}
.mnav .logo {color: #fff;}
.mnav .logo-mk {border-color: #fff;}
.gnb-close {position: relative;width: 4.8rem;height: 4.8rem;border: .1rem solid rgba(255, 255, 255, .4);border-radius: 50%;}
.gnb-close::before, .gnb-close::after {content: '';position: absolute;left: 1.3rem;right: 1.3rem;top: 2.3rem;height: .2rem;background: #fff;rotate: 45deg;}
.gnb-close::after {rotate: -45deg;}
.mnav .btn {margin-top: 4rem;justify-content: space-between;}
.fx [data-reveal] {opacity: 0;translate: 0 4rem;transition: opacity .9s var(--ease) var(--d, 0s), translate .9s var(--ease) var(--d, 0s);}
.fx [data-reveal].is-in {opacity: 1;translate: 0 0;}
.fx [data-reveal='left'] {translate: -4rem 0;}
.fx [data-reveal='scale'] {translate: 0 0;scale: .94;}
.fx [data-reveal='scale'].is-in {scale: 1;}
.ln {display: block;overflow: hidden;padding-bottom: .12em;margin-bottom: -.12em;}
.ln > span {display: block;}
.fx [data-lines] .ln > span {translate: 0 112%;transition: translate 1.1s var(--ease) calc(var(--d, 0s) + var(--i, 0) * .12s);}
.fx [data-lines].is-in .ln > span {translate: 0 0;}
.fx-progress {position: fixed;left: 0;top: 0;z-index: 400;width: 100%;height: .4rem;background: linear-gradient(90deg, var(--blue), var(--cyan));transform-origin: left center;transform: scaleX(0);pointer-events: none;}
.totop {position: fixed;right: 3.2rem;bottom: 3.2rem;z-index: 90;display: grid;place-items: center;width: 5.6rem;height: 5.6rem;border-radius: 50%;background: var(--blue);color: #fff;box-shadow: 0 1rem 2.4rem rgba(36, 92, 255, .4);opacity: 0;visibility: hidden;translate: 0 2rem;transition: opacity .3s, translate .3s var(--ease), visibility .3s, background .3s;}
.totop.is-on {opacity: 1;visibility: visible;translate: 0 0;}
.totop:hover {background: var(--navy);}
.totop svg {width: 2.4rem;height: 2.4rem;fill: none;stroke: currentColor;stroke-width: 2;stroke-linecap: round;stroke-linejoin: round;}
.bgimg {position: absolute;inset: 0;z-index: 0;overflow: hidden;}
.bgimg img {position: absolute;left: 0;top: -8%;width: 100%;height: 116%;object-fit: cover;translate: 0 var(--sy, 0px);will-change: translate;}
@keyframes spin {to {rotate: 360deg;}}
@keyframes kb {from {scale: 1.12;} to {scale: 1;}}
@keyframes pulse {0%, 100% {scale: 1;opacity: .55;} 50% {scale: 1.05;opacity: 1;}}
@keyframes cue {0% {scale: 1 0;transform-origin: top;} 50% {scale: 1 1;transform-origin: top;} 51% {transform-origin: bottom;} 100% {scale: 1 0;transform-origin: bottom;}}
@keyframes fade {from {opacity: 0;translate: 0 2rem;} to {opacity: 1;translate: 0 0;}}
.gnb {align-self: stretch;display: flex;align-items: stretch;}
.gnb-list {display: flex;align-items: stretch;}
.gnb-item {position: relative;display: flex;align-items: center;}
.gnb-link {position: relative;display: block;padding: 1rem 2.4rem;font-weight: 500;color: var(--navy);transition: color .3s;}
.gnb-link::after {content: '';position: absolute;left: 50%;bottom: -.4rem;width: 0;height: .2rem;background: var(--blue);translate: -50% 0;transition: width .35s var(--ease);}
.gnb-item:hover > .gnb-link, .gnb-item:focus-within > .gnb-link, .gnb-item.is-current > .gnb-link {color: var(--blue);}
.gnb-item:hover > .gnb-link::after, .gnb-item.is-current > .gnb-link::after {width: 3.2rem;}
.gnb-sub {position: absolute;left: 50%;top: 100%;min-width: 22rem;padding: 1.2rem 0;background: #fff;border-top: .3rem solid var(--blue);box-shadow: 0 2rem 4rem rgba(11, 23, 53, .12);opacity: 0;visibility: hidden;translate: -50% 1.2rem;transition: opacity .3s, translate .3s var(--ease), visibility .3s;}
.gnb-item:hover .gnb-sub, .gnb-item:focus-within .gnb-sub {opacity: 1;visibility: visible;translate: -50% 0;}
.gnb-item.is-closed .gnb-sub {opacity: 0;visibility: hidden;}
.gnb-sub a {display: block;padding: 1.1rem 2.4rem;white-space: nowrap;font-size: 1.6rem;color: var(--navy);transition: background .2s, color .2s, padding .3s;}
.gnb-sub a:hover, .gnb-sub a:focus-visible {background: var(--ice);color: var(--blue);padding-left: 3rem;}
.gnb-sub a.is-on {color: var(--blue);font-weight: 700;}
.mnav-body {flex: 1;margin-top: 2rem;overflow-y: auto;}
.m-acc {display: flex;align-items: center;justify-content: space-between;width: 100%;padding: 2.2rem 0;border-bottom: .1rem solid rgba(255, 255, 255, .14);font-size: 2.6rem;font-weight: 700;color: #fff;text-align: left;}
.m-acc i {position: relative;width: 1.4rem;height: 1.4rem;border-right: .2rem solid #fff;border-bottom: .2rem solid #fff;rotate: 45deg;translate: 0 -.3rem;transition: rotate .3s, translate .3s;}
.m-acc[aria-expanded='true'] i {rotate: 225deg;translate: 0 .3rem;}
.m-sub {display: flex;flex-direction: column;padding: .8rem 0 1.6rem;}
.m-sub[hidden] {display: none;}
.m-sub a {padding: 1.1rem 1.2rem;font-size: 1.8rem;color: #c9d6f2;}
.m-sub a:hover {color: #fff;}
.mnav .btn {margin-top: 2rem;}
.ft {background: var(--ink);color: #c5cee0;padding-block: 8rem 4rem;}
.ft-top {display: grid;grid-template-columns: 30rem minmax(0, 1fr) 28rem;gap: 6rem;padding-bottom: 6rem;border-bottom: .1rem solid rgba(255, 255, 255, .12);}
.ft .logo {color: #fff;}
.ft .logo-mk {border-color: #fff;}
.ft .logo:hover .logo-mk {background: #fff;color: var(--ink);}
.ft-slogan {margin-top: 2.4rem;font-size: 2.4rem;font-weight: 700;line-height: 1.35;color: #fff;}
.ft-btn {display: inline-flex;align-items: center;gap: 1rem;margin-top: 3.2rem;padding: 1.4rem 2.4rem;border: .1rem solid rgba(255, 255, 255, .4);color: #fff;font-weight: 500;transition: background .3s, border-color .3s;}
.ft-btn:hover {background: var(--blue);border-color: var(--blue);}
.ft-menu {display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));gap: 3rem;}
.ft-tt {margin-bottom: 1.6rem;font-size: 1.6rem;font-weight: 700;color: #fff;}
.ft-tt a:hover {color: var(--cyan);}
.ft-col ul {display: flex;flex-direction: column;gap: 1rem;}
.ft-col li a {display: inline-block;font-size: 1.5rem;color: var(--muted);transition: color .2s, translate .3s var(--ease);}
.ft-col li a:hover {color: #fff;translate: .4rem 0;}
.ft-tel {font-size: 3.2rem;font-weight: 800;line-height: 1.2;color: #fff;}
.ft-info {margin-top: 1.2rem;font-size: 1.5rem;color: var(--muted);}
.ft-bot {display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 1.6rem 4rem;padding-top: 3.2rem;font-size: 1.4rem;color: var(--muted);}
.ft-addr {display: flex;flex-wrap: wrap;gap: .4rem 2.4rem;font-style: normal;}
.ft-links {display: flex;align-items: center;gap: 2.4rem;}
.ft-links ul {display: flex;gap: 2.4rem;}
.ft-links a:hover {color: #fff;}
.ft-copy {width: 100%;font-size: 1.3rem;opacity: .8;}
@media (max-width: 1280px) {
:root {--page-gutter: 7.2rem;--sec-pad: 12rem;}
.ft-top {grid-template-columns: repeat(2, minmax(0, 1fr));}
.ft-menu {grid-column: 1 / -1;order: 3;}
}
@media (max-width: 1024px) {
:root {--page-gutter: 4rem;--sec-pad: 9rem;--header-h: 8.8rem;}
.burger {display: block;}
.gnb, .hd .btn {display: none;}
}
@media (max-width: 768px) {
:root {--page-gutter: 2rem;--sec-pad: 7rem;--header-h: 7.2rem;}
.sec > .inner {gap: 4rem;}
.hd.is-fixed .hd-in {height: 6.4rem;}
.logo-mk {width: 3.6rem;height: 3.6rem;font-size: 1.8rem;}
.totop {right: 1.6rem;bottom: 1.6rem;width: 4.8rem;height: 4.8rem;}
.btn {min-width: 24rem;}
.ft {padding-block: 6rem 3rem;}
.ft-top {grid-template-columns: 1fr;gap: 4rem;}
.ft-menu {grid-template-columns: repeat(2, minmax(0, 1fr));gap: 3rem 2rem;}
.ft-tel {font-size: 2.8rem;}
.ft-bot {flex-direction: column;align-items: flex-start;}
}
@media (prefers-reduced-motion: reduce) {
.fx [data-reveal], .fx [data-lines] .ln > span {opacity: 1;translate: 0 0;scale: 1;}
}
