@charset "utf-8";
/*-------------------------------------------------------------------
    파일정의 : login.css - 로그인 화면 
    작성날짜 : 2021-02-04
-------------------------------------------------------------------*/
@import url("base.css"); /* base */

body {height:100vh; background:url(../images/bg_login.jpg) no-repeat center bottom #0b75e0;}
.login_wrap {position:relative; max-width:1400px; margin:0 auto; padding-top:60px; }
.login_wrap h1{position:absolute; top:86px; right:60px; width:160px; height:40px; background:url(../images/login_logo.png) no-repeat; text-indent:-9999px;}
.login_wrap .login_area{overflow:hidden; padding-top:170px;}
.login_wrap .login_area .login_text{float:left; width:50%; padding-left:85px; color:#fff; box-sizing:border-box;}
.login_wrap .login_area .login_text p:nth-child(1){font-size:70px; font-weight:bold;}
.login_wrap .login_area .login_text p:nth-child(2){margin-top:100px; font-size:90px; line-height:1.2; letter-spacing:-10px; }
.login_wrap .login_area .login_text p:nth-child(3){margin-top:120px; font-size:20px;}
.login_wrap .login_area .login_text p:nth-child(3):before{content:''; display:inline-block; width:28px; height:33px; margin:-5px 20px 0 0; background:url(../images/icon_login_text.png) no-repeat; vertical-align:middle; }
.login_wrap .login_area .login_group{float:left; width:50%; padding-left:140px; box-sizing:border-box;}
.login_wrap .login_area .login_group .login_inner{max-width:490px; background:#fff; border-radius:5px; box-shadow:0px 5px 10px 0 rgba(0,0,0,0.2); }
.login_wrap .login_area .login_group .login_inner .login_cont{padding:35px 50px 50px 50px; font-size:14px;}
.login_wrap .login_area .login_group .login_inner .login_cont h2{position:relative; padding-top:20px; margin-bottom:10px; font-size:25px; color:#000; text-align:center; font-weight:normal;}
.login_wrap .login_area .login_group .login_inner .login_cont h2:before{content:''; position:absolute; top:0; left:50%; display:inline-block; width:32px; height:3px; margin-left:-16px; background:#98a3ac; border-radius:3px;}

.login_wrap .login_area .login_group .login_inner .login_cont .login_inp > input{width:100%; height:65px; border:0; border-bottom:2px solid #9ab3cc; background:0;}
.login_wrap .login_area .login_group .login_inner .login_cont .login_inp > input::placeholder{color:#708091;}
.login_wrap .login_area .login_group .login_inner .login_cont .login_inp > input:focus{border-color:#0b75e0; outline:0; color:#0b75e0;}
.login_wrap .login_area .login_group .login_inner .login_cont .login_inp > input:focus::placeholder{color:#0b75e0;}

.login_wrap .login_area .login_group .login_inner .login_cont .login_check{margin-top:20px;}

.login_wrap .login_area .login_group .login_inner .login_cont .login_btn{margin-top:25px;}
.login_wrap .login_area .login_group .login_inner .login_cont .login_btn > button{display:inline-block; width:100%; height:45px; color:#fff; border:0; background:linear-gradient(90deg, rgba(7,125,234,1) 0%, rgba(21,97,201,1) 100%); box-shadow:0 3px 0 #e4e8ec; box-sizing:border-box; }

.login_wrap .login_area .login_group .login_inner .member_btn{padding:22px 0; font-size:13px; text-align:center; background:#e9f2fa; border-radius:0 0 5px 5px;}
.login_wrap .login_area .login_group .login_inner .member_btn > a{margin-left:20px;}
.login_wrap .login_area .login_group .login_inner .member_btn > a:before{content:''; display:inline-block; width:1px; height:14px; margin:-5px 23px 0 0; background:#9ab3cc; vertical-align:middle;}
.login_wrap .login_area .login_group .login_inner .member_btn > a:first-child:before{display:none;}


/* radio/ checkbox */
label {position:relative; vertical-align:middle; }
label > input[type="radio"], label > input[type="checkbox"]{position:absolute; left:-1px; width:0; height:0; opacity:0;}
label > input[type="radio"] + span,
label > input[type="checkbox"] + span{position:relative; display:inline-block; min-height:14px; padding-left:22px; cursor:pointer;}
label > input[type="radio"] + span:before {content:''; position:absolute; top:2px; left:0; display:inline-block; width:14px; height:14px; background:url(../images/icon_radio.png) no-repeat 0 0px; }
label > input[type="checkbox"] + span:before {content:''; position:absolute; top:2px; left:0; display:inline-block; width:14px; height:14px;  background:url(../images/icon_checkbox.png) no-repeat; }

label > input[type="radio"] + span:hover:before,
label > input[type="radio"]:focus + span:before,
label > input[type="checkbox"] + span:hover:before,
label > input[type="checkbox"]:focus + span:before {background-position:0 -14px;}

label > input[type="radio"] + span:hover, label > input[type="radio"]:focus + span, label > input[type="checkbox"] + span:hover, label > input[type="checkbox"]:focus + span,
label > input[type="radio"]:checked + span, label > input[type="checkbox"]:checked + span {color:#2270c1; font-weight:bold; }
label > input[type="radio"]:checked + span:before, label > input[type="checkbox"]:checked + span:before {background-position:0 -28px;}

label > input[type="radio"]:disabled + span, label > input[type="checkbox"]:disabled + span{color:#aaa; cursor:unset;}
label > input[type="radio"]:disabled + span:before, label > input[type="checkbox"]:disabled + span:before{background-position:0 -42px;}

label > input[type="radio"]:checked:disabled + span, label > input[type="checkbox"]:checked:disabled + span{color:#aaa;}
label > input[type="radio"]:checked:disabled + span:before, label > input[type="checkbox"]:checked:disabled + span:before{background-position:0 -56px; color:#aaa;}

label > input[type="radio"] + span.font_none,
label > input[type="checkbox"] + span.font_none{width:0; color:#fff; text-indent:-9999px;}