@charset "UTF-8";

:root {
  --baseColor:#ccc;
  --pointColor:#00c8a0;
  --txtColor:#fff;
  --bgColor:#3f3f3f;
  --bgActive:#2b2b2b;
  --bgDefault:#303030;
  --modalColor:rgba(0,0,0,0.8);
}
::selection {background:var(--pointColor); color:var(--bgActive);}

.cursor {position:absolute; z-index:10; width:2rem; height:2rem; top:50%; left:50%; margin:0; background:var(--pointColor); border-radius:100%; backface-visibility:hidden;}
@media screen and (any-pointer:coarse){
  .cursor {display:none;}
}
@media(hover: hover) and (pointer: fine) {
  .cursor {display:none;}
}

body *.typeEng {font-family:'Montserrat','Apple SD Gothic Neo',Sans-serif;}
body *.color {color:var(--pointColor);}

/* ---- #header */
#header {width:100%; padding:1.25rem 5% 1rem; display:flex; flex-flow:row nowrap; justify-content:flex-end; align-items:center; position:fixed; top:0; left:0; z-index:9; transition:all 0.2s;}
#header.blur {backdrop-filter:blur(0.25rem); -webkit-backdrop-filter:blur(0.25rem);}
#header h1 {display:inline-block; line-height:1; margin-right:auto;}
#header h1 img {height:2.25rem; display:block;}
#header nav {display:flex; flex-flow:row nowrap; align-items:center; font-weight:500; backdrop-filter:blur(0);  -webkit-backdrop-filter:blur(0); transition:all 0.3s ease-in;}
#header nav ul {display:flex; flex-flow:row nowrap;}
#header nav ul li {margin-right:5rem; cursor:pointer;}
/* #header nav ul li.active {text-decoration:underline; text-underline-position:under; text-decoration-thickness:1px;} */
#header button#modalBtn {animation:blink 2.5s infinite;}
#header button#gnbBtn {height:2.75rem; margin-left:2rem;}
#header button img {height:1.8em; display:block;}

@keyframes blink {
  0% {color:var(--txtColor);}
  50% {color:var(--pointColor);}
  100% {color:var(--txtColor);}
}


/* ---- #footer */
#footer {width:100%; background:var(--bgDefault); font-size:0.9rem; padding:5rem 10%; display:flex; align-items:center; justify-content:flex-start;}
#footer .logo {margin-right:10%;}
#footer .logo img {height:3rem; display:block;}
#footer .info {font-weight:200;}
#footer .info b {font-weight:400;}
#footer .info .company {margin-bottom:0.25rem;}
#footer .info .company span {margin-right:1.5rem;}
#footer .info .company span b {margin-left:0.25rem;}

#loginState {position:fixed; right:1.2em; bottom:1em; font-weight:200; z-index:99;}
#loginState a {font-size:0.8em; padding:0.25em 0.5em; border-radius:0.25em; margin-left:0.5em; background:var(--pointColor); color:#000; font-weight:700;}

@media only screen and (max-width:1400px) {
  #header {padding:1rem 2rem 0.6rem;}
  #header nav ul li {margin-right:4rem;}
  
  #footer {padding:4rem 5%;}
}
@media only screen and (max-width:1024px) {
  #header h1 img {height:2.75rem;}
  #header nav {width:100vw; height:100vh; background:var(--modalColor); display:none; position:fixed; top:0; left:0; z-index:9; overflow:hidden; padding:1rem 2rem 0.6rem;}
  #header nav.blur {display:block; backdrop-filter:blur(0.25rem); -webkit-backdrop-filter:blur(0.25rem); transition:all 0.3s ease-in;}
  #header nav button#gnbCloseBtn {height:2.75rem; margin-left:auto;}
  #header nav .depth1List {width:100%; display:block; font-size:2em; padding:5% 0;}
  #header nav .depth1List li {margin:0; padding:1.5rem 2rem; border-bottom:1px solid var(--txtColor);}
  
  #footer {padding:4rem 2rem;}
  #footer .logo {margin-right:5%;}
}
@media only screen and (max-width:768px) {
  #footer {padding:3rem 2rem; flex-direction:column; align-items:center; justify-content:flex-start;}
  #footer .logo {margin-right:0; margin-bottom:1.5rem;}
  #footer .info .company {display:flex; flex-flow:row wrap; align-items:center; justify-content:center; text-align:center; gap:0.25rem 1rem; margin-bottom:0.25rem;}
  #footer .info .company span {margin-right:0;}
  #footer .info .company span b {margin-left:0.125rem;}
  #footer .info .copy {margin-top:0.5em; text-align:center;}
}
@media only screen and (max-width: 680px) {
  #header {padding:1rem;}
  #header h1 img {height:2.5rem;}
  #header nav {padding:1rem;}
  #header nav .depth1List {font-size:1.5em;}
  #header nav .depth1List li {padding:1.25rem 1.5rem;}

  #footer {padding:3rem 1rem;}

  #loginState {display:none;}
}