@charset "uft-8";


/* design guide variables */
body {
  --size-header-height: 60px;
  --size-gnb-width: 220px;
  --color-border: var(--gray5);
  --color-point: rgba(0, 122, 255, 1);
}


/* common */
body {font-family: 'Noto Sans', sans-serif; font-weight: 400; font-size: 13px; background-color: var(--gray6); color: #333333;}
#wrapper {position: relative; overflow: hidden; transition: all 0.3s;}
body.error #wrapper {min-height: 100vh; background: url('../img/bg-login.jpg') center center no-repeat; background-size: cover;}
#skip-nav {position: fixed; left: 0; top: -41px; width: 100%; line-height: 40px; text-align: center; font-size: 16px; color: #ffffff; background: rgba(0, 0, 0, 0.5); border-bottom: 1px solid rgba(255, 255, 255, 0.7); transition: top 0.3s; z-index: 10000;}
#skip-nav:focus {top: 0;}

#error-container {position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 600px; min-height: 200px; background-color: #ffffff; border: 1px solid var(--gray4); box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.1); border-radius: 4px; text-align: center; font-size: 20px; padding: 50px; z-index: 10000;}
#error-container h1 {font-size: 40px; font-weight: 400;}
#error-container p {margin: 20px 0;}
#error-container p.desc {font-size: 16px; color: var(--gray1);}
#error-container p a.btn {display: inline-block; width: 200px; line-height: 50px; text-align: center; border: 1px solid var(--gray5); border-radius: 4px; background-color: var(--color-point); color: #ffffff;}