@charset "UTF-8";
:root {
  --white: #fff;
  --black: #000;
  --black-111: #111;
  --gray-333: #333;
  --gray-555: #555;
  --gray-2b: #2B2B2B;
  --gray-border: #DDD;
  --gray-bg: #F3F4F5;
  --backdrop-blur: rgba(255, 255, 255, 0.25);
  --backdrop-black: rgba(0, 0, 0, 0.5);
  --max-width-layout: 1480px;
  --max-width-container: 1920px;
  --header-height: 9rem;
  --transition-fast: 0.3s;
}

/* common */
body.on { overflow: hidden; }
#wrap { overflow: hidden; }
.layout { width: var(--max-width-layout); max-width: 100%; position: relative; margin: 0 auto; }

/* scroll bar */
body::-webkit-scrollbar { width: 5px; height: 8px; }
body::-webkit-scrollbar-thumb { border-radius: 50px; background-color: var(--black); }
body::-webkit-scrollbar-track { background-color: transparent; }

/* common blind */
.blind-bg { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--black); z-index: 2; opacity: 0; transition: var(--transition-fast); }
.blind-bg.on { display: block; opacity: 0.5; }

/* header */
.header { position: fixed; top: 0; width: 100%; background: var(--backdrop-blur); backdrop-filter: blur(25px); z-index: 2; }
.header .header-container { display: flex; align-items: center; max-width: var(--max-width-container); width: 100%; margin: 0 auto; height: var(--header-height); }
.header .header-container .header-logo { width: 19.2rem; flex-shrink: 0; }
.header .header-container .header-logo a { display: block; }

/* header util */
.header .header-util { display: flex; gap: 2.2rem; align-items: center; }
.header .header-util-sub .btn { background: var(--gray-2b); border-radius: 10rem; padding: 0 2.4rem; height: 4.8rem; display: flex; align-items: center; justify-content: center; }
.header .header-util-sub .btn span { color: var(--white); font-weight: 500; line-height: 2.55rem; font-size: 1.7rem; }

/* footer */
.footer { position: relative; padding: 6rem 0; border-top: 1px solid var(--gray-border); background: var(--gray-bg); }
.footer .layout { max-width: var(--max-width-container); width: 100%; margin: 0 auto; }
.footer .layout .footer-address { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.footer .layout .footer-address p { color: var(--gray-555); text-align: center; font-size: 1.8rem; font-weight: 400; line-height: 2.7rem; letter-spacing: -0.036rem; }
.footer .layout .footer-address p br { display: none; }
.footer .layout .footer-address ul { display: flex; gap: 2rem; }
.footer .layout .footer-address ul li { display: flex; gap: 1rem; align-items: center; }
.footer .layout .footer-address ul li strong { color: var(--gray-333); font-weight: 700; line-height: 2.7rem; letter-spacing: -0.036rem; font-size: 1.8rem; }
.footer .layout .footer-address ul li span { color: var(--gray-555); font-weight: 400; line-height: 2.7rem; letter-spacing: -0.036rem; font-size: 1.8rem; }
.footer-aside { position: absolute; top: -3.5rem; right: 6.6rem; display: flex; }
.footer-aside .btn-top { width: 7rem; height: 7rem; background: var(--black-111); display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.footer-aside .btn-top i { color: var(--white); font-size: 2.8rem; }

/* media */
@media (max-width: 1920px) {
.header .header-container { padding: 0 2rem; }
.footer .layout { padding: 0 2rem; }
}

@media (max-width: 1480px) {
.layout { padding: 0 2rem; }
}

@media (max-width: 640px) {
.footer .layout .footer-address ul { flex-direction: column; gap: 0.5rem; margin-top: 2rem; }
.footer-aside { top:-2.9rem; right: 2rem; }
.footer-aside .btn-top { width: 5.4rem; height: 5.4rem; }
.footer-aside .btn-top i { font-size: 2.4rem; }
}

@media (max-width: 480px) {
.footer .layout .footer-address { align-items: flex-start; }
.footer .layout .footer-address p { text-align: left; }
}