@charset "utf-8";

/* **************************************** *
 * RESET FILES
 * **************************************** */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,time,figure,article,nav,header,footer,hgroup,video,audio,aside,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,button{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-family: inherit;
    vertical-align: baseline;
    font-family:"Avenir Next", "Noto Sans", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", メイリオ, "Apple SD Gothic Neo", "Nanum Barun Gothic", "Helvetica", "Arial", "Malgun Gothic", "맑은 고딕", 돋움, Dotum, sans-serif;
    box-sizing:border-box;
    font-size: 14px;
}
ol,ul {	list-style: none;}
table {	border-collapse: separate;	border-spacing: 0;}
caption,th,td {	text-align: left;	font-weight: normal;}
a{
    display:inline-block;
    -moz-transition:background .2s ease;
    -o-transition:background .2s ease;
    -ms-transition:background .2s ease;
    -webkit-transition:background .2s ease;
    transition:background .2s ease;
}
figure,article,header,footer,nav,hgroup,video,audio,aside {display: block;}
html, body{width:100%;height:100%;}
a,button{cursor:pointer;}
::placeholder{color:#98a7b3}
*:focus{outline:none;}
input{font-size:15px;}
caption,.blind{overflow:hidden !important;visibility:hidden !important;padding:0 !important;margin:0 !important; width:0!important;height:0 !important;font-size:0 !important;line-height:0 !important;}
/* **************************************** *
 * COMMON-array
 * **************************************** */
.flex_center{
    display:-webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    flex-direction:column;
    -webkit-flex-direction:column;
}
.flex_space_row{
    display:-webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    flex-direction:row;미디어 쿼리
    -webkit-flex-direction:row;
}
.flex_spadce{
    display:-webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
    flex-direction:column;
    -webkit-flex-direction:column;
}
/* **************************************** *
 * LOGIN
 * **************************************** */
.login{background:#f4f4f4;}
.login .wrap{ margin:0 auto;padding:20px;min-width:320px;max-width:1000px;}
.login header{align-items: flex-start;-webkit-box-align: start;-ms-flex-align: start;width:100%; height:160px;background:#0b151b url("../images/deploy_bg.jpg")top center no-repeat;}
.login header .wrap{display:table;width:100%;height:100%;}
.login h1{display:table-cell;vertical-align:middle;padding-top:10px;}

.login .content{width:100%;}
.login .content h2{padding-bottom:15px; font-size:22px;letter-spacing:-1px;color:#222d32;font-weight:bold;font-family: "Arial, sans-serif;"}
.login .content .wrap{width:100%;}
.login .content .bx{padding:90px 10px 80px;width:100%; background:#e5e7ea;border:1px solid #d3d5e2;border-radius:10px;}
.login .content .bx > div{display:inline-block; margin:0 auto;}
.login .content .inp-group{display:inline-block;}
.login .content .inp-group li{margin-top:5px;}
.login .content .inp-group li:first-child{margin-top:0;}
.login .content strong{display:inline-block;width:85px;font-size:17px;color:#4a5467;font-weight:bold;}
.login .content input[type='text'],[type='password']{padding:0 10px; width:300px;height:40px;box-sizing:border-box;border-top:1px solid #bfc1ca;border-left:1px solid #bfc1ca;border-right:1px solid #dddee2;border-bottom:1px solid #dddee2;}
.login .content p{padding-left:85px;margin-top:25px;font-family: Dotum;font-size:12px;color:#68697a;line-height:18px;}
.login .content .btn-login{ width:162px;height:85px;background:#546381;vertical-align:top;border-radius:3px;color:#fff;font-size:23px;font-weight:700;text-align: center;text-decoration:none;letter-spacing:-1px;line-height:83px;}
.login .content .btn-login:hover{background:#5272a3;}

.login footer{align-items: flex-end;-webkit-box-align: end;-ms-flex-align: end;align-items: flex-end;display:table; width:100%;height:90px;background:#dcdfe2;}
.login footer span{display:table-cell; font-family: Dotum;font-size:12px;color:#68697a;text-align: center;vertical-align:middle;line-height:18px;}

@media (max-width:620px) {
    .login header{height:60px;}
    .login header .wrap{padding:0 20px;}
    .login header h1 img{width:150px;height:auto;}
    .login .content .bx{padding:30px 20px;}
    .login .content .bx > div,
    .login .content .inp-group,
    .login .content strong,
    .login .content input[type='text'],
    .login .content .btn-login{display:block; width:100%;}
    .login .content .inp-group li{padding-top:10px;}
    .login .content p{padding-left:0}
    .login .content .btn-login{margin-top:15px;height:60px;line-height:58px}
    .login footer{height:60px;}

}