@charset "utf-8";
/* CSS Document */

@import "base.css";
@import "font.css";
@import "common.css";

html, body { height:100%; min-height:100%;}
.Wrapper { min-height:100%; width: 100%; }
.Wrapper #loginBg { height:100%; width: 76%; background:url("../images/login_bg.jpg") no-repeat center center; background-size:cover; position: relative; }
.Wrapper #loginBg::after { content: ""; position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); z-index: 100; top: 0; left: 0; }
header { position:absolute; left:0; top:0; width:100%; z-index:10;}
footer { position:absolute; bottom:0;}

.ContArea { width:100%; height:100%; position:fixed; left:0; top:0; z-index: 1; display: flex; justify-content: flex-end; }



.Login { width:24%; min-width: 440px; height:100%; background:#fff; position:relative; display: flex; justify-content: center; align-items: center; }
.Login > div > div > p { font-size:34px; color:#212121; margin-bottom: 10px; font-weight: bold; }
.Login input[type=text], fieldset.Login input[type=password] { height:46px; border:#333 solid 1px; line-height:45px; background:#fff url("../images/icon_id.jpg") no-repeat left 17px center; padding-left:50px; margin-bottom:15px; width:100%;}
fieldset.Login input[type=password] {background-image:url("../images/icon_pw.jpg");}
.Login .BtnLogin { height:46px; background:#333; width:100%; margin-bottom:20px; color:#fff; font-size:18px; font-weight:bold; }
.Login p.LoginFooter { position:relative; text-align:right;}
.Login p .SaveID+label { display:inline-block; position:absolute; left:0; top:0;}
fieldset.Login + p.SiteInfo { display:block; color:#000; position:absolute; width:100%; left:0;  top:calc(50% + 220px); text-align:center;}

.BtnInsert { background:#d23345; padding:5px 15px; border-radius:30px; color:#fff;}


/* 컴포넌트 */
input[type=checkbox] { position:absolute; width:0; height:0;}
input[type=checkbox]+label { display:inline-block; padding-left:30px; position:relative; overflow:hidden;}
input[type=checkbox]+label:before { content:''; display:block; width:18px; height:18px; border:#ddd solid 1px; background:#fff; border-radius:3px; position:absolute; left:0; top:0;transition-duration: 0.1s;}
input[type=checkbox]:checked+label:before { background:#fff;}
input[type=checkbox]+label:after { content:''; display:block; width:6px; height:9px; border:#36c solid 3px; border-left:none; border-top:none; transform:rotate(45deg); position:absolute; left:5px; top:-20px;transition-duration: 0.2s;}
input[type=checkbox]:checked+label:after { top:2px;}