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

@font-face {
    font-family: "Pretendard_SB";
    src: url('../fonts/Pretendard-1.3.3/public/static/Pretendard-SemiBold.otf');
}

@font-face {
    font-family: "Pretendard_R";
    src: url('../fonts/Pretendard-1.3.3/public/static/Pretendard-Regular.otf');
}

html, body {width: 100%}
body{padding:0px; margin:0px; display:block; font-size: 18px; font-family:'Pretendard_R', 'Noto Sans KR',NanumGothic,'나눔고딕',ng, 'Malgun Gothic','맑은고딕','Dotum','돋움','AppleSDGothicNeo',sans-serif; COLOR: #5d5d5d; background-color: #f7f7fc}
*{margin:0; padding:0;}

html .login_area, body.login_area{height: 100%}
.wrapper{width:100%; margin: 0px auto; }
.login_area .wrapper{height: 100%}
.wrap{display: table; width: 100%; height: 100%}
.login_outer{display:table-cell; vertical-align: middle; text-align: center;}
.login{position: relative; display: inline-block; text-align:center; width: 900px; height: 530px; border-radius:15px; box-shadow: 0px 2px 5px 0px #c0c0c0; background: url("../images/adminLogin_240229.jpg") no-repeat #fff; background-size: 100%;}
.logo{position: relative; display: inline-block; margin-bottom: 37px; width:80%; height:40px; background: url("../images/logo.png") no-repeat; border:none; background-size: contain;}

form{display: flex; width: 408px;float: right;height: 100%; align-items: center;}
.form_area{width: 326px; margin: 0 auto;}
h1 {font-size: 32px; font-weight: 600; color: #00B4E6; height: 60px;}
.pr12{padding-right:12px;}
.mt20{margin-top:20px;}

/*input:focus{border: #72849c 1px solid; outline:none}*/
.input_txt {padding: 0px; padding:20px 0px 0px 20px; margin: 0px;  width: 100%;  height: 56px;border: #dcdcdc 1px solid; background-color:#ffffff; font-size: 16px; font-weight: bold; color: #2d3445;border-radius: 4px}
.input_txt::placeholder{color: #a5a3a9}
.name, .id, .pw{position: relative}
.name span, .id span, .pw span{color: #a5a3a9; font-size: 11px; position: absolute; left: 20px; top: 8px}
.check{margin-top:20px; text-align: left; height: 25px}
.check span{font-size: 15px; color: #595959; line-height: 25px; float:left; cursor: pointer}

.pwfind{font-size: 15px; font-weight:bold; color:#5d5d5d; margin-top:-21px; margin-left:230px}
.pw {position: relative;}

.pw .eyes {position: absolute;top: 23px;bottom: 0;right: 20px;margin: auto 2px;height: 30px;font-size: 22px;cursor: pointer;}
.eye_off{background: url("../images/eye_off.png") no-repeat; width: 16px; height: 12px; display: inline-block;}
.eye_on{background: url("../images/eye_on.png") no-repeat; width: 16px; height: 12px; display: inline-block;}
.errorMsg{font-size: 12px; text-align: left; color: red; clear: both}
/*.btn{ margin-top:15px; background-color: #00B4E6; background-position:center; height:50px; line-height:50px; color:#FFFFFF; border:none; width:100%; font-size:16px; border-radius: 4px; cursor: pointer;}*/
.btn{ margin-top:15px; background-color: #00B4E6; background-position:center; height:50px; line-height:50px; color:#FFFFFF; border:none; width:100%; font-size:16px; border-radius: 4px; cursor: pointer;}

.find{margin-top:20px; font-size: 13px; line-height: 21px; text-align: center; color:#94a3b8; cursor: pointer}


/*///// 체크,라디오 버튼 /////*/
.radio_b_wrap,
.check_b_wrap {margin-right:4px;display:inline-block;position:relative;vertical-align:middle;font-size:0px;/*overflow:hidden;*/}
.radio_b_wrap input,
.check_b_wrap input {width:100%;height:100%;position:absolute;top:0;left:0;opacity:0;z-index:10;overflow:hidden;}
.radio_b_wrap span.ico,
.check_b_wrap span.ico {width:20px;height:20px;margin-right:5px;margin-top:-2px;position:relative;display:inline-block;border:1px solid #6a6e87;background:#fff;vertical-align:middle;text-align:center;transition:0.2s ease all; border-radius:6px;overflow:hidden;}
.radio_b_wrap span.ico:before {width:10px;height:10px;position: absolute;top:3px;left:3px;content:""; display:inline-block; clear:both;background:#fff;border-radius:50%;transform: scale(0);transition:0.2s ease all;}
.check_b_wrap span.ico:before,
.check_b_wrap span.ico:after {content:""; display:block; clear:both;position:absolute;transition:0.2s ease all;transform-origin: top left;}
.check_b_wrap span.ico:before {width:0px;height:2px;background:#fff;top: 8px;left: 4px;transform: rotate(45deg);}
.check_b_wrap span.ico:after {width:0px;height:2px;background:#fff;top: 14px;left: 7px;transform: rotate(-45deg);}
.radio_b_wrap input[type="radio"]:hover + label span,
.check_b_wrap input[type="checkbox"]:hover + label span {border:1px solid #3730a3;}
.radio_b_wrap input[type="radio"]:disabled + label span,
.check_b_wrap input[type="checkbox"]:disabled + label span {border:1px solid #d4d6dd;background: #f2f2f2 !important;}
.radio_b_wrap input[type="radio"] ~ label, .check_b_wrap input[type="checkbox"] ~ label {display: inline-block;vertical-align: middle;font-size:14px; line-height: 16px;}
.radio_b_wrap input[type="radio"]:checked ~ label, .radio_b_wrap input[type="radio"]:checked ~ span,
.check_b_wrap input[type="checkbox"]:checked ~ label, .check_b_wrap input[type="checkbox"]:checked ~ span {color:#252c52;}
.radio_b_wrap input[type="radio"]:disabled ~ label, .radio_b_wrap input[type="radio"]:disabled ~ span,
.check_b_wrap input[type="checkbox"]:disabled ~ label, .check_b_wrap input[type="checkbox"]:disabled ~ span {color:#d4d6dd;}
.radio_b_wrap input[type="radio"]:checked + label span,
.check_b_wrap input[type="checkbox"]:checked + label span {border:1px solid #3730a3;background:#3730a3;}
.check_b_wrap input[type="checkbox"]:checked + label span.ico:before {width: 8px;height:2px;}
.check_b_wrap input[type="checkbox"]:checked + label span.ico:after {width: 12px;height:2px;transition-delay: 0.1s;}
.radio_b_wrap span.ico {border-radius:50%;}
.radio_b_wrap input[type="radio"]:checked + label span:before {transform: scale(1);}
.tp_vertical > .radio_b_wrap, .tp_vertical > .check_b_wrap {display:block;}
.tp_vertical > .radio_b_wrap + .radio_b_wrap, .tp_vertical > .check_b_wrap + .check_b_wrap {margin-top:12px;}


@media all and (max-width:529px) and (min-width:0px)
{
    body{background-color: #fff;}
    .wrapper{width:100%; height:auto;}
    .wrap{display: table; width: 100%; height:auto; background-color: #fff}
    .login_outer{display:table-cell; vertical-align: middle; text-align: center;}
    .login{ text-align:center; width: 100%; height: auto; background: none; border: none; box-shadow: none}
    form{width: 100%; float: none;}
    .form_area{width: 90%}
    h1{margin:0px 0px 20px 0px;text-align: center; padding: 100px 0px 0px; width: 100%; background-position:  center}
    .check{margin-top:15px; text-align: left}
}