@charset "utf-8"; @import url(//fonts.googleapis.com/earlyaccess/notosanskr.css); @font-face { font-family: 'icon'; src: url('../../../css/fonts/icomoon.eot?y5isk6'); src: url('../../../css/fonts/icomoon.eot?y5isk6#iefix') format('embedded-opentype'), url('../../../css/fonts/icomoon.ttf?y5isk6') format('truetype'), url('../../../css/fonts/icomoon.woff?y5isk6') format('woff'), url('../../../css/fonts/icomoon.svg?y5isk6#icomoon') format('svg'); font-weight: normal; font-style: normal; } html, body { position: relative; height: 100%; background: #fff; } #login_page_box { position: relative; height: 100%; } #login_page_box:before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; height: 50%; box-sizing: border-box; border-top: 8px solid #29c7ca; background: url('./img/bak_admin_login_top_pattern.png'); z-index: 0; } #login_page_box:after { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: rgba(0,0,0,0); background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 65%, rgba(0,0,0,0.5) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(65%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,0.5))); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 65%, rgba(0,0,0,0.5) 100%); background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 65%, rgba(0,0,0,0.5) 100%); background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 65%, rgba(0,0,0,0.5) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 65%, rgba(0,0,0,0.5) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 ); } #login_title { display: block; position: relative; height: 50%; padding-bottom: 130px; box-sizing: border-box; z-index: 3; } #login_title .inner { position: relative; width: 100%; height: 100%; } #login_title h1 { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); font-family: 'Noto Sans KR', sans-serif; font-size: 35px; font-weight: 600; } #login_title em { font-style: normal; color: #29c7ca; text-align: center; line-height: 1.5em; } #login_title em strong { color: #fff; } #login_title span { display: block; font-size: 16px; font-weight: 400; color: #999; text-align: center; } #login_title sup { display: block; position: relative; font-size: 13px; font-weight: 300; text-align: center; padding: 0; margin-top: 20px; color: #777; } #mb_login { position: absolute; top: 50%; left: 50%; width: 500px; height: 260px; border-top: 5px solid #29c7ca; transform: translateX(-50%) translateY(-50%); background: #fff; -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.49); -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.49); box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.49); z-index: 5; } #mb_login:before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: -20px; background: #fff; z-index: 0; } #mb_login .inner { position: relative; padding: 30px; z-index: 1; } #mb_login fieldset.input { display: block; position: relative; margin-bottom: 5px; margin-right: 130px; } #mb_login fieldset.input input { display: block; width: 100%; box-sizing: border-box; background: #fff !important; color: #3a3a3b; height: 45px; padding: 0 15px 0 45px; font-size: 15px; font-family: 'Noto Sans KR', sans-serif; outline: none; border: 1px solid #eaeaea; } #mb_login fieldset.input input:focus { border: 2px solid #29c7ca; } #mb_login fieldset.input label { display: block; position: absolute; top: 0; left: 0; width: 45px; height: 45px; line-height: 45px; overflow: hidden; text-indent: -999px; } #mb_login fieldset.input label:before { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-indent: 0; text-align: center; font-family: 'icon'; font-size: 16px; color: #ccc; } #mb_login fieldset.input input:focus + label:before { color: #29c7ca; } #mb_login fieldset.input label.login_id:before { content: "\e976"; } #mb_login fieldset.input label.login_pw:before { content: "\e98e"; } #mb_login fieldset.input input:-webkit-autofill { transition: background-color 50000s ease-in-out 0s; -webkit-box-shadow: 0 0 0 30px white inset; -webkit-text-fill-color: #3a3a3b !important; } #mb_login fieldset.check { display: block; position: relative; padding: 5px; background: #f6f6f6; border: 1px solid #ebebeb; color: #3a3a3a; margin: 5px 130px 5px 0; font-size: 11px; } #mb_login fieldset.check label { cursor: pointer; } #mb_login fieldset.button { display: block; position: absolute; top: 30px; right: 30px; width: 126px; height: 128px; } #mb_login fieldset.button .btn_submit { display: block; width: 100%; height: 100%; background: #29c7ca; font-family: 'Noto Sans KR', sans-serif; font-size: 18px; border: none; cursor: pointer; color: #fff; } #copyright { padding-top: 30px; font-size: 12px; color: #aaa; text-align: center; }