@charset 'UTF-8'; @import '../../../assets/scss/components'; $login-bg-w: 100/1920; $login-bg-h: 100/1080; .login-container { width: 100%; min-height: 100vh; background-color: $bg-gray; background-image: url(../../../assets/images/bg/bg_login_circle_square01.svg), url(../../../assets/images/bg/bg_login_circle_stroke01.svg), url(../../../assets/images/bg/bg_login_circle01.svg), url(../../../assets/images/bg/bg_login_circle03.svg), url(../../../assets/images/bg/bg_login_circle_diagonal01.svg), url(../../../assets/images/bg/bg_login_circle_square02.svg), url(../../../assets/images/bg/bg_login_circle04.svg), url(../../../assets/images/bg/bg_login_circle05.svg), url(../../../assets/images/bg/bg_login_circle06.svg), url(../../../assets/images/bg/bg_login_circle07.svg), url(../../../assets/images/bg/bg_login_circle08.svg), url(../../../assets/images/bg/bg_login_circle_diagonal02.svg), url(../../../assets/images/bg/bg_login_circle_diagonal03.svg), url(../../../assets/images/bg/bg_login_circle_stroke02.svg), url(../../../assets/images/bg/bg_login_circle_stroke03.svg), url(../../../assets/images/bg/bg_login_circle_stroke04.svg), url(../../../assets/images/bg/bg_login_circle_stroke05.svg), url(../../../assets/images/bg/bg_login_polygon01.svg), url(../../../assets/images/bg/bg_login_polygon02.svg); background-repeat: no-repeat; background-position: unquote($login-bg-w * 323 + '%') unquote($login-bg-h * 179 + '%'), unquote($login-bg-w * -147 + '%') unquote($login-bg-h * 18 + '%'), unquote($login-bg-w * 285 + '%') unquote($login-bg-h * 226 + '%'), unquote($login-bg-w * 1235 + '%') unquote($login-bg-h * -101 + '%'), unquote($login-bg-w * 1397 + '%') unquote($login-bg-h * 163 + '%'), unquote($login-bg-w * 1569 + '%') unquote($login-bg-h * 580 + '%'), unquote($login-bg-w * 426 + '%') unquote($login-bg-h * 293 + '%'), unquote($login-bg-w * 1531 + '%') unquote($login-bg-h * 250 + '%'), unquote($login-bg-w * 1774 + '%') unquote($login-bg-h * 166 + '%'), unquote($login-bg-w * 1362 + '%') unquote($login-bg-h * 673 + '%'), unquote($login-bg-w * 152 + '%') unquote($login-bg-h * 730 + '%'), unquote($login-bg-w * 286 + '%') unquote($login-bg-h * 719 + '%'), unquote($login-bg-w * 683 + '%') unquote($login-bg-h * 593 + '%'), unquote($login-bg-w * 498 + '%') unquote($login-bg-h * 453 + '%'), unquote($login-bg-w * 1709 + '%') unquote($login-bg-h * 599 + '%'), unquote($login-bg-w * 1395 + '%') unquote($login-bg-h * 989 + '%'), unquote(100 + $login-bg-w * 89 + '%') unquote(100 + $login-bg-h * 137 + '%'), unquote($login-bg-w * 90 + '%') unquote($login-bg-h * 463 + '%'), unquote($login-bg-w * 549 + '%') unquote($login-bg-h * 874 + '%'); background-size: unquote($login-bg-w * 79 + '%'), unquote($login-bg-w * 333 + '%'), unquote($login-bg-w * 84 + '%'), unquote($login-bg-w * 172 + '%'), unquote($login-bg-w * 210 + '%'), unquote($login-bg-w * 94 + '%'), unquote($login-bg-w * 44 + '%'), unquote($login-bg-w * 118 + '%'), unquote($login-bg-w * 52 + '%'), unquote($login-bg-w * 70 + '%'), unquote($login-bg-w * 172 + '%'), unquote($login-bg-w * 82 + '%'), unquote($login-bg-w * 135 + '%'), unquote($login-bg-w * 102 + '%'), unquote($login-bg-w * 130 + '%'), unquote($login-bg-w * 184 + '%'), unquote($login-bg-w * 370 + '%'), unquote($login-bg-w * 122 + '%'), unquote($login-bg-w * 75 + '%'); box-sizing: border-box; display: flex; flex-direction: column; .login-box { @extend %clearfix; padding: 0 0 45px; width: 420px; margin: auto; text-align: center; flex-basis: auto; align-items: center; .logo-img { display: block; text-align: center; img { margin-bottom: 7px; vertical-align: top; @include screen(mid) { width: 120px; } @include screen(xs) { width: 100px; margin-bottom: 6px; } } } @extend %guideline; //Guide Line h1 { @include font-family($font-light); font-size: 24px; text-align: center; color: $txt-color01; font-weight: 600; line-height: 1.2; @include screen(mid) { font-size: 19px; } @include screen(xs) { font-size: 14px; } } .login-content { @extend %guideline2; //Guide Line2 margin: 30px auto 0; .login-input-area { border: 1px solid #cccccc; border-radius: 2px; width: 100%; max-width: 420px; min-width: 150px; height: 60px; background-color: $white; margin-top: 10px; &.login-select-form { height: 60px; line-height: 60px; padding: 0 16px; @include screen(mid) { height: 50px; line-height: 50px; } @include screen(xs) { height: 42px; line-height: 42px; } } &:first-of-type { margin-top: 0px; } &.idpass-type { padding-left: 50px; position: relative; &::before { font-family: 'material Icons'; font-size: 24px; text-align: center; line-height: 60px; content: 'perm_identity'; display: block; position: absolute; top: 0; left: 16px; @include screen(mid) { line-height: 50px; } @include screen(xs) { line-height: 42px; } } &.pass-type { &::before { content: 'https'; } } .login-idpass-txt { width: 368px; height: 60px; line-height: 60px; font-size: 14px; @include screen(mid) { width: 358 - 60 + px; height: 50px; line-height: 50px; font-size: 14px; } @include screen(xs) { width: 308 - 60 + px; font-size: 14px; height: 42px; line-height: 42px; } input { font-size: 18px; line-height: 58px; margin-top: 0; vertical-align: top; background-color: $white; padding: 0 10px 0 5px; @include screen(mid) { font-size: 16px; line-height: 48px; } @include screen(xs) { font-size: 14px; line-height: 40px; } } } } @include screen(mid) { margin-top: 8px; } } .login-input-submit { width: 100%; height: 60px; background-color: $black; border-radius: 2px; color: $white; font-size: 20px; @include font-family($font-semibold); border: 0; margin-top: 12px; font-weight: 600; cursor: pointer; @include screen(mid) { margin-top: 8px; font-size: 16px; height: 50px; } @include screen(xs) { font-size: 14px; height: 42px; } } @include screen(mid) { margin-top: 23px; width: 350px; .login-input-area { height: 50px; } } @include screen(xs) { margin-top: 23px; width: 300px; .login-input-area { height: 42px; } } } } .login-chk-area { margin-top: 6px; font-size: 13px; text-align: left; @include screen(xs) { font-size: 12px; } } .login-pass-info { overflow: hidden; margin-top: 83px; ul { display: flex; justify-content: center; li { height: 24px; position: relative; display: inline-flex; align-items: center; padding: 0 12% 0 8%; &::before { content: ''; height: 11px; width: 1px; display: flex; background-color: $gray-re4a; position: absolute; top: 6.5px; left: 0; } &:first-child { padding-left: 0; &::before { display: none; } } &:last-child { padding-right: 0; } a { line-height: 24px; font-size: 12px; color: $gray-re4a; padding-left: 34px; position: relative; white-space: nowrap; &::before { font-family: 'material Icons'; font-size: 18px; text-align: center; content: 'search'; color: $white; display: block; width: 24px; height: 24px; border-radius: 50%; background-color: $black; position: absolute; top: 0; left: 0; } &.fir-pass { &::before { content: 'cached'; } } } } } } .login-button-area { margin-top: 14px; @include screen(xs) { margin-top: 20px; } button { border: 0; margin: 0; width: 100%; height: 46px; border-radius: 4px; background-color: #e0e3e7; font-size: 12px; color: $gray-re4a; cursor: pointer; @include screen(mid) { height: 38px; } @include screen(xs) { height: 34px; } } } .example-full-width { width: 100%; } }