@charset "utf-8";

:root {
 --portal-login-bg: #eef3f8;
 --portal-login-surface: rgba(255, 255, 255, 0.97);
 --portal-login-border: #d0dae6;
 --portal-login-title: #1d3552;
 --portal-login-text: #5c6b7f;
 --portal-login-primary: #003d82;
 --portal-login-primary-dark: #002952;
 --portal-login-navy: #003d82;
 --portal-login-sky: #eff5fb;
}

body#login {
 position: relative;
 min-height: 100vh;
 overflow: hidden;
 background:
  radial-gradient(circle at 14% 14%, rgba(0, 61, 130, 0.12), transparent 18%),
  radial-gradient(circle at 86% 18%, rgba(0, 102, 204, 0.1), transparent 16%),
  linear-gradient(120deg, #dfe8f2 0%, #f4f8fc 38%, #edf3f8 100%);
}

body#login:before,
body#login:after {
 content: "";
 position: absolute;
 border-radius: 50%;
 pointer-events: none;
}

body#login:before {
 top: -160px;
 left: -100px;
 width: 440px;
 height: 440px;
 background: radial-gradient(circle, rgba(0, 61, 130, 0.08) 0%, rgba(0, 61, 130, 0) 70%);
}

body#login:after {
 right: -160px;
 bottom: -200px;
 width: 520px;
 height: 520px;
 background: radial-gradient(circle, rgba(0, 102, 204, 0.08) 0%, rgba(0, 102, 204, 0) 70%);
}

#login_title {
 position: absolute;
 left: 50%;
 top: 50%;
 z-index: 2;
 width: 540px;
 margin: -208px 0 0 -530px;
}

#login_title h1,
#login_title h2,
#login_title h3 {
 position: static;
 margin: 0;
}

#login_title h1 {
 color: #003d82;
 font-size: 15px;
 font-weight: 700;
 letter-spacing: 0.18em;
 text-transform: uppercase;
}

#login_title h2 {
 margin-top: 18px;
 color: var(--portal-login-title);
 font-size: 48px;
 line-height: 1.12;
 letter-spacing: -0.05em;
}

#login_title h3 {
 margin-top: 20px;
 max-width: 360px;
 color: var(--portal-login-text);
 font-size: 16px;
 line-height: 1.7;
 letter-spacing: -0.01em;
}

.login_title_badge {
 display: inline-block;
 padding: 6px 12px;
 border-radius: 999px;
 background: #e8f0f8;
 color: #003d82;
 font-size: 12px;
 font-weight: 700;
 letter-spacing: 0.12em;
}

.login_title_panel {
 margin-top: 26px;
 padding: 22px 24px;
 border: 1px solid #d9e5f0;
 border-radius: 16px;
 background: rgba(255, 255, 255, 0.72);
 box-shadow: 0 14px 30px rgba(28, 59, 92, 0.08);
}

.login_title_copy {
 color: var(--portal-login-title);
 font-size: 15px;
 font-weight: 700;
 line-height: 1.7;
}

.login_title_points {
 margin-top: 14px;
}

.login_title_points li {
 position: relative;
 margin-top: 8px;
 padding-left: 16px;
 color: var(--portal-login-text);
 font-size: 13px;
}

.login_title_points li:before {
 content: "";
 position: absolute;
 top: 8px;
 left: 0;
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: var(--portal-login-primary);
}

#login_wrap {
 position: absolute;
 left: 50%;
 top: 50%;
 z-index: 2;
 width: 620px;
 height: 404px;
 margin: -202px 0 0 44px;
}

#login_wrap .login_text {
 position: absolute;
 top: 28px;
 left: 38px;
 z-index: 3;
 color: var(--portal-login-title);
 font-size: 24px;
 font-weight: 700;
 letter-spacing: -0.04em;
}

#login_wrap .login_container {
 position: relative;
 height: 404px;
 border-radius: 24px;
 background: rgba(255, 255, 255, 0.55);
 box-shadow: 0 24px 48px rgba(24, 52, 84, 0.12);
}

#login_wrap .login {
 position: relative;
 width: 620px;
 height: 404px;
 overflow: hidden;
 border: 1px solid var(--portal-login-border);
 border-radius: 24px;
 background:
  linear-gradient(180deg, rgba(239, 245, 251, 0.9) 0%, rgba(255, 255, 255, 0) 24%),
  var(--portal-login-surface);
}

.login_head {
 padding: 34px 38px 0;
}

.login_head_title {
 display: block;
 color: var(--portal-login-title);
 font-size: 18px;
}

.login_head_text {
 display: block;
 margin-top: 6px;
 color: var(--portal-login-text);
 font-size: 13px;
}

#login_wrap .login:before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 5px;
 background: linear-gradient(90deg, var(--portal-login-primary) 0%, #0066cc 100%);
}

#login_wrap .login fieldset {
 position: absolute;
 top: 128px;
 left: 38px;
 width: 544px;
}

#login_wrap .login fieldset ul {
 margin: 0 0 18px;
}

#login_wrap .login fieldset ul li {
 position: relative;
 margin-bottom: 16px;
 font-size: 0;
}

#login_wrap .login fieldset ul li .user_img {
 position: absolute;
 top: 7px;
 left: 7px;
 z-index: 2;
}

#login_wrap .login fieldset ul li div {
 position: relative;
 width: 334px;
 height: 60px;
 margin-left: 56px;
 border: 1px solid var(--portal-login-border);
 border-radius: 14px;
 background: var(--portal-login-sky);
 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

#login_wrap .login fieldset ul li input {
 width: 286px;
 height: 38px;
 margin: 11px 16px 11px 23px;
 background: transparent;
 color: #28405a;
 font-size: 15px;
 font-weight: 700;
 line-height: 38px;
 text-indent: 0;
 border: none;
 outline: none;
 box-shadow: none;
 ime-mode: disabled;
}

#login_wrap .login fieldset ul li input::placeholder {
 color: #90a1b3;
 font-weight: 400;
}

#login_wrap .login fieldset ul li input:-webkit-autofill,
#login_wrap .login fieldset ul li input:-webkit-autofill:hover,
#login_wrap .login fieldset ul li input:-webkit-autofill:focus,
#login_wrap .login fieldset ul li input:-webkit-autofill:active {
 -webkit-text-fill-color: #28405a;
 -webkit-box-shadow: 0 0 0 1000px var(--portal-login-sky) inset;
 caret-color: #28405a;
 transition: background-color 9999s ease-out;
}

#login_wrap .login fieldset ul li div:focus-within input:-webkit-autofill,
#login_wrap .login fieldset ul li div:focus-within input:-webkit-autofill:hover,
#login_wrap .login fieldset ul li div:focus-within input:-webkit-autofill:focus,
#login_wrap .login fieldset ul li div:focus-within input:-webkit-autofill:active {
 -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
}

#login_wrap .login fieldset ul li div:focus-within {
 border-color: #0066cc;
 background: #ffffff;
 box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.btn_login {
 position: absolute;
 top: 0;
 left: 406px;
 font-family: "Nanum_Gothic", sans-serif;
}

.btn_login a {
 display: inline-block;
 width: 118px;
 height: 136px;
 border-radius: 18px;
 background: linear-gradient(135deg, var(--portal-login-primary) 0%, var(--portal-login-primary-dark) 100%);
 color: #fff;
 font-size: 17px;
 font-weight: 700;
 line-height: 136px;
 text-align: center;
 box-shadow: 0 18px 30px rgba(0, 61, 130, 0.24);
 transition: background-color 0.18s ease, transform 0.18s ease;
}

.btn_login a:hover {
 transform: translateY(-1px);
}

.check_info {
 position: absolute;
 top: 159px;
 width: 280px !important;
}

.check_info .alias_id {
 position: static;
 display: flex;
 align-items: center;
 gap: 16px;
 color: var(--portal-login-text);
 font-size: 12px;
}

.check_info .alias_id a {
 color: var(--portal-login-primary-dark);
 font-weight: 700;
}

.print_line {
 position: relative;
 top: 36px;
 left: 0;
 width: 524px;
 border: 0;
 border-top: 1px solid #e3ebf3;
}

.mail-layout-container {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    min-width: 1280px;
    padding: 20px 10px 0;
    box-sizing: border-box;
}

.mail-layout-container > .ly_td:first-child {
    flex: 0 0 280px;
    width: 280px;
    min-width: 280px;
}

.mail-layout-container > .ly_td:last-child {
    flex: 1 1 auto;
    min-width: 0;
}

.mail-left-wrap {
    width: 280px;
    padding: 0;
}

.mail-content-wrap {
    width: 100%;
    min-width: 0;
    padding: 0;
}

.mail-content-body {
    min-height: 700px;
    padding: 28px 28px 32px;
    border: 1px solid var(--mail-border);
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(237, 245, 253, 0.9) 0%, rgba(255, 255, 255, 0) 16%),
        var(--mail-surface);
    box-shadow: var(--mail-shadow);
    box-sizing: border-box;
}

body#login.mail-login-body .mail-login-shell {
    width: min(860px, calc(100vw - 48px));
    min-height: 100vh;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 360px 420px;
    align-items: center;
    justify-content: center;
    gap: 28px;
}

body#login.mail-login-body .mail-login-shell.single-panel {
    width: min(420px, calc(100vw - 48px));
    grid-template-columns: 420px;
    gap: 0;
}

body#login.mail-login-body .mail-login-panel {
    padding: 40px 36px;
    border: 1px solid #d8e4f0;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 24px 70px rgba(15, 45, 82, 0.14);
    width: 420px;
    margin: 0 auto;
    box-sizing: border-box;
}

body#login.mail-login-body .mail-login-panel-head {
    margin-bottom: 26px;
}

body#login.mail-login-body .mail-login-panel-subtitle {
    display: block;
    margin: 0;
    color: #21415f;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
}

body#login.mail-login-body .mail-login-panel h3 {
    margin-top: 6px;
    color: #6a7b8e;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

body#login.mail-login-body .mail-login-panel p {
    margin-top: 12px;
    color: #6f8092;
    font-size: 14px;
    line-height: 1.6;
}

body#login.mail-login-body .mail-login-form {
    margin-top: 0;
}

body#login.mail-login-body .mail-login-field {
    display: block;
}

body#login.mail-login-body .mail-login-field + .mail-login-field {
    margin-top: 16px;
}

body#login.mail-login-body .mail-login-field-label {
    display: block;
    margin-bottom: 8px;
    color: #36506b;
    font-size: 13px;
    font-weight: 700;
}

body#login.mail-login-body .mail-login-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    height: 60px;
    padding: 0 16px;
    border: 1px solid #d8e4f0;
    border-radius: 18px;
    background: #f8fbff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

body#login.mail-login-body .mail-login-input-wrap:focus-within {
    border-color: #1568c0;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(21, 104, 192, 0.10);
}

body#login.mail-login-body .mail-login-input-icon {
    display: block;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-right: 12px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 18px 18px;
    opacity: 0.72;
}

body#login.mail-login-body .mail-login-input-icon.user {
    background-image: url(../../images/login/login_id.png);
}

body#login.mail-login-body .mail-login-input-icon.password {
    background-image: url(../../images/login/login_pwd.png);
}

body#login.mail-login-body .mail-login-input-wrap input {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #17324f;
    font-size: 15px;
    font-weight: 700;
    box-shadow: none;
    outline: none;
}

body#login.mail-login-body .mail-login-input-wrap input::placeholder {
    color: #97a7b8;
    font-weight: 400;
}

body#login.mail-login-body .mail-login-input-wrap input:-webkit-autofill,
body#login.mail-login-body .mail-login-input-wrap input:-webkit-autofill:hover,
body#login.mail-login-body .mail-login-input-wrap input:-webkit-autofill:focus,
body#login.mail-login-body .mail-login-input-wrap input:-webkit-autofill:active {
    -webkit-text-fill-color: #17324f;
    -webkit-box-shadow: 0 0 0 1000px #f8fbff inset;
    caret-color: #17324f;
    transition: background-color 9999s ease-out;
}

body#login.mail-login-body .mail-login-input-wrap:focus-within input:-webkit-autofill,
body#login.mail-login-body .mail-login-input-wrap:focus-within input:-webkit-autofill:hover,
body#login.mail-login-body .mail-login-input-wrap:focus-within input:-webkit-autofill:focus,
body#login.mail-login-body .mail-login-input-wrap:focus-within input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
}

body#login.mail-login-body .mail-login-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    gap: 12px;
}

body#login.mail-login-body .mail-login-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #51657a;
    font-size: 13px;
}

body#login.mail-login-body .mail-login-link {
    color: #0b4e96;
    font-size: 13px;
    font-weight: 700;
}

body#login.mail-login-body .mail-login-submit,
body#login.mail-login-body button.mail-login-submit,
body#login.mail-login-body button.mail-login-submit:hover,
body#login.mail-login-body button.mail-login-submit:focus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 58px;
    margin-top: 18px;
    border: 0 !important;
    border-radius: 18px;
    background: linear-gradient(135deg, #0b4e96 0%, #1568c0 100%) !important;
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 18px 34px rgba(11, 78, 150, 0.26);
}

@media (max-width: 1100px) {
    body#login.mail-login-body .mail-login-shell {
        width: min(560px, calc(100vw - 32px));
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 24px 0;
    }

    body#login.mail-login-body .mail-login-panel {
        width: 100%;
    }

    body#login.mail-login-body .mail-login-shell.single-panel {
        width: min(420px, calc(100vw - 32px));
        grid-template-columns: 1fr;
    }
}