input[id="codeid"] {
    width:20px;
}
select {
    font-size: 16px;
}



@media all and (min-width:768px) {
    html, body {
        margin: auto;
    }
    body{
        height: 100vh;
        background: url(/res/40215/image/bg_login.png) no-repeat center;
        background-size: cover;
        color: #A6B0B5;
    }
    .login_wrap {
        position: absolute;
        left: 50%;
        top:50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    .footer {
        position: fixed;
        bottom: 0px;
        left:50%;
        transform: translateX(-50%);
        padding:0 0 30px;
        text-align: center;
        color:#7E8B92;
        font-size: 12px;
        z-index: -1;
    }
    select {
        border: 1px solid #8F989C;
        background:#37434A;
        width:340px;
        height: 36px;
        color: #CCD6DB;
        text-indent: 4px;
    }
    input {
        border: 0;
        background: rgba(55, 67, 74, 0.001);
        height: 36px;
        color: #A6B0B5;
        font-size:16px;
    }
    input::placeholder {
        color:#7E8B92;
        font-size:16px;
    }
    .fillout input{
        text-indent: 14px;
    }
    .logo_txt {
        font-size: 15px;
        color: #fff;
        font-weight: 500;
        padding: 4px 0 30px;
    }
    .lang {
        padding: 0 0 20px;
    }
    .fillout {
        width:340px;
        border-bottom: 1px solid #8F989C;
        text-align: left;
        padding: 12px 0 8px;
    }
    .fillout label{
        display: inline-block;
        width:70px;
        color:#CCD6DB;
    }
    .fillout input{
        width:calc(100% - 80px)
    }
    .check {
        text-align: left;
        margin: 16px 0;
        color:#CCD6DB;
    }
    input[id="codeid"] {
        position: relative;
        top:0px;
    }
    label[for="codeid"]{
        position: relative;
        top:-13px;
    }
    .btn_login {
        background:#8FB50A;
        border:0;
        border-radius: 30px;
        width: 340px;
        height: 40px;
        color: #fff;
        margin-bottom: 30px;
        cursor: pointer;
        font-size:16px;
    }
    .btn_down {
        background:#638596;
        background-image: url(/res/40215/image/icon_download.png) ;
        background-repeat: no-repeat;
        background-position:66px center;
        border:0;
        border-radius: 30px;
        width: 340px;
        height: 40px;
        color: #E8EDEF;
        text-indent: 20px;
        margin-bottom:10px;
        cursor: pointer;
        font-size:15px;
    }
    .btn_normal {
    	background:#638596;
        border:0;
        border-radius: 30px;
        width: 340px;
        height: 40px;
        color: #fff;
        margin-bottom: 30px;
        cursor: pointer;
        font-size:16px;
    }

}

/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1023px)
@media all and (min-width:768px) and (max-width:1023px) {

}*/





/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/
@media all and (max-width:767px) {
    html, body {
        margin: auto;
    }
    body{
        height: 100vh;
        background: url(/res/40215/image/bg_login.png) no-repeat center;
        background-size: cover;
        color: #A6B0B5;
    }
    .login_wrap {
        text-align: center;
        padding: 30px 0 0;
    }
    .form_wrap {
        text-align: center;
    }
    .footer {
        position: fixed;
        bottom: 0px;
        width:90%;
        padding:0 16px 20px;
        text-align: center;
        color:#7E8B92;
        font-size: 12px;
        left:50%;
        transform: translateX(-50%);
        z-index: -1;
    }
    select {
        border: 1px solid #8F989C;
        background:#37434A;
        width:80%;
        height: 36px;
        color: #CCD6DB;
        text-indent: 4px;
    }
    input {
        border: 0;
        background: rgba(55, 67, 74, 0.001);
        height: 36px;
        color: #A6B0B5;
        font-size: 16px;
    }
    input::placeholder {
        color:#7E8B92;
        font-size:16px;
    }
    .fillout input{
        text-indent: 14px;
    }
    .logo_wrap img{
        /* width:140px; */
    }
    .logo_txt {
        font-size: 12px;
        color: #fff;
        font-weight: 400;
        padding: 4px 0 20px;
    }
    .lang {
        padding: 0 0 10px;
    }
    .fillout {
        margin:0 auto;
        width:80%;
        border-bottom: 1px solid #8F989C;
        text-align: left;
        padding: 10px 0 8px;
    }
    .fillout label{
        display: inline-block;
        width:25%;
        color:#CCD6DB;
    }
    .fillout input {
        width: calc(100% - 30%);
    }
    .check {
        margin:16px auto;
        width:75%;
        text-align: left;
    }
    input[id="codeid"] {
        position: relative;
        top:0px;
    }
    label[for="codeid"]{
        position: relative;
        top:-13px;
        color:#CCD6DB;
    }
    .btn_login {
        background:#8FB50A;
        border:0;
        border-radius: 30px;
        width: 80%;
        height: 36px;
        color: #fff;
        margin-bottom: 20px;
        cursor: pointer;
        font-size:16px;
    }
    .btn_down {
        background:#638596;
        border:0;
        border-radius: 30px;
        width: 80%;
        height: 36px;
        color: #fff;
        margin-bottom:10px;
        cursor: pointer;
        font-size:16px;
    }
    .btn_normal {
        background:#638596;
        border:0;
        border-radius: 30px;
        width: 80%;
        height: 36px;
        color: #fff;
        margin-bottom: 20px;
        cursor: pointer;
        font-size:16px;
    }
}