@charset "utf-8";

@font-face {
    font-family: 'OneMobile';
    font-weight: 300;
    font-style: normal;
    src: url('fonts/OneMobileLight.eot');
    src: url('fonts/OneMobileLight.eot?#iefix') format('embedded-opentype'),
         url('fonts/OneMobileLight.woff2') format('woff2'),
         url('fonts/OneMobileLight.woff') format('woff'),
         url('fonts/OneMobileLight.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'OneMobile';
    font-weight: 500;
    font-style: normal;
    src: url('fonts/OneMobileRegular.eot');
    src: url('fonts/OneMobileRegular.eot?#iefix') format('embedded-opentype'),
         url('fonts/OneMobileRegular.woff2') format('woff2'),
         url('fonts/OneMobileRegular.woff') format('woff'),
         url('fonts/OneMobileRegular.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'OneMobile';
    font-weight: 700;
    font-style: normal;
    src: url('fonts/OneMobileBold.eot');
    src: url('fonts/OneMobileBold.eot?#iefix') format('embedded-opentype'),
         url('fonts/OneMobileBold.woff2') format('woff2'),
         url('fonts/OneMobileBold.woff') format('woff'),
         url('fonts/OneMobileBold.ttf') format("truetype");
    font-display: swap;
}

:root {
	--color-init: #212121;
	--color-point: #15126D;
	--height-base: 46px;
}

/* Reset */
*,::after,::before { box-sizing: border-box}
body { display: flex; align-items: center; justify-content: center; font-family: "Roboto", sans-serif; font-size: 16px; color: var(--color-init); font-weight: 400; line-height: 1.5; background: #F1F4F9; padding: 0; margin: 0}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
.sr-only-focusable:active, .sr-only-focusable:focus { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;}
p { padding: 0; margin: 0}
button { font-family: "Roboto", sans-serif; border: 0;}

/* Login */
.login-con { width: 100%; max-width: 500px; background: #fff; border-radius: 20px; padding: 30px}
.login-con h1 { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0; margin: 0 0 15px 0}
.login-con h1 span { font-size: 40px; font-weight: 700; color: #0A59B2}

.form-item { position: relative}
.form-item + .form-item { margin-top: 15px}
.form-basic { display: block; width: 100%; height: var(--height-base); font-size: 16px; color: var(--color-init); border: 1px solid #DADADA; background: #fff; border-radius: 4px; padding: 0 15px;}
.form-basic:focus { border-color: var(--color-init); outline: none}

.btn-login { display: flex; align-items: center; justify-content: center; width: 100%; height: var(--height-base); font-size: 18px; color: #fff; font-weight: 500; border-radius: 4px; background: var(--color-point); margin-top: 15px; cursor: pointer}

.phrase-box { border-top: 1px dashed #ccc; padding-top: 25px; margin-top: 25px}
.phrase-box .inner { position: relative; font-family: 'OneMobile'; color: var(--color-point); font-weight: 700; text-align: center; background: linear-gradient(0deg, #249DE1 0%, #7AC1E9 100%); border-radius: 10px; padding: 45px 20px}
.phrase-box .inner::before { content: ""; position: absolute; left: 50%; top: 20px; display: block; width: 20px; height: 20px; background: url("/intranet_img/quote_up.png"); transform: translateX(-50%); opacity: 0.5}
.phrase-box .inner::after { content: ""; position: absolute; left: 50%; bottom: 20px; display: block; width: 20px; height: 20px; background: url("/intranet_img/quote_down.png"); transform: translateX(-50%); opacity: 0.5}
.phrase-box .inner b { font-weight: 700}