html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, a, img, ol, ul, li, header, nav, section, footer { margin: 0; padding: 0; border: 0;}
ol, ul { list-style: none;}
a, a:hover {color: #333; text-decoration: none;}
table, thead, tbody, tr, th, td {border-collapse: collapse;}
button, input[type="button"] {border: none; outline: 0; cursor: pointer; background-color: transparent; transition: 0.2s;}
body, html {width: 100%; height: 100%;}
body {background-image: url(../img/bg2.png);background-position: top center; background-size: cover; transition: 3s;}
#login_wrap {width: 100%; height: 100%; position: relative;}
.login_container {position: absolute; top: 50%; right: 150px; transform: translateY(-50%);}
.login_container.hide {right: 120px;}
.login_container.join {display: none;}
.main_title {color: #fff; font-size: 48px;line-height: 1.2; margin-bottom: 40px; letter-spacing: -2px;}
.main_reg_title {color: #fff; font-size: 28px;line-height: 1.2; margin-bottom: 15px; letter-spacing: -2px;}

#login_box {width: 400px; height: auto;}
#login_box .login .input_box {margin-bottom: 40px; position: relative;}
#login_box .login .input_box.wd50 {display: flex; justify-content: space-between; flex-flow: wrap;}
#login_box .login .input_box > input, #login_box .login .input_box > select {border: 0; outline: 0; width: 100%; border-bottom: 1px solid #fff; padding: 20px 0; text-indent: 10px; color: #fff; font-size: 16px; background-color: transparent; transition: border 0.3s;}
#login_box .login .input_box > select option {color: #333;}
#login_box .login .input_box.wd50 > input {flex: 0 0 49%;}
#login_box .login .input_box #idChk {position: absolute; top: 25px; right: 0; color: #2c90fa; padding: 5px 10px;}
#login_box .login .input_box #idChk:hover {background-color: #f1f1f1; color: #333;}
#login_box .login .input_box > input:focus {border-bottom: 1px solid #0077ff; color: #fff !important;}
#login_box .login .input_box > input::placeholder {color: #fff;}
#login_box .login .btn_login {width: 100%; height: 58px; background-color: #0077ff; color: #fff; font-size: 18px;}
#login_box .login .btn_login:hover {background-color: #0375e8;}
#login_box .login .btn_login.gray {background-color: #333;}
#login_box .login .btn_login.gray:hover {background-color: #555; color: #fff;}
#login_box .login .btn_style {width: 100%; padding: 10px 0; background-color: #666; color: #fff;}
#login_box .login .btn_box {border: 1px solid #fff; display: flex; flex-flow: nowrap; margin-top: 45px; overflow: hidden;}
#login_box .login .btn_box > button {flex: 0 0 50%; padding: 15px 0; color: #fff;}
#login_box .login .btn_box > button:hover {background-color: #f1f1f1; color: #333;}
.log #login_box .login .btn_box > button {background: rgba(0,0,0,0.2);}
.log #login_box .login .btn_box > button:hover {background: #f1f1f1;}
#login_box .login .btn_box > button:first-child {border-right: 1px solid #fff;}
#login_box .login .btn_box > button > i {margin-right: 5px;}
#login_box .login .input_box span.title {display: block; flex: 0 0 100%; font-size: 14px; color: #fff; margin-top: 25px;}
#login_box .login .input_box.wd50 span.title {flex: 0 0 49%;}

#login_box .login .sms_use {position: absolute; top: 14px; right: 0; color: #2c90fa; padding: 5px 10px;}
#login_box .login .sms_use:hover {background-color: #f1f1f1; color: #333;}
#login_box .login .sms_use#acc_btn {border-right: none;}

#login_box .login #findPasswordBtn {color: white; cursor: pointer;}
#login_box .login .input_box #btn_doc_down {position: absolute; top: 8px; right: 0; color: #2c90fa; padding: 5px 10px;}
#login_box .login .input_box #btn_doc_down:hover {background-color: #f1f1f1; color: #333;}

.login_container.join .main_title {margin-bottom: 30px;}
.login_container.join #login_box .login .input_box {margin-bottom: 5px;}
.login_container.join #login_box .login .btn_box {border: none; margin-top: 25px;}
.login_container.join #login_box .login .btn_box > button:first-child {border-right: 0;}
.login_container.join #login_box .login .input_box > input, .login_container.join #login_box .login .input_box > select {font-size: 14px; padding: 10px 0; text-indent: 0; color: #fff; border-bottom: 1px solid #999;}
.login_container.join #login_box .login .input_box > input:focus, .login_container.join #login_box .login .input_box > select:focus {border-bottom: 1px solid #0077ff;}
.login_container.join #login_box .login .input_box > input::placeholder {color: #999;}

.login_container.find {height: 550px;}
.login_container.find .main_title {margin-bottom: 30px;}
.login_container.find #login_box .login .input_box {margin-bottom: 5px;}
.login_container.find #login_box .login .btn_box {border: none; margin-top: 25px;}
.login_container.find #login_box .login .btn_box > button:first-child {border-right: 0;}
.login_container.find #login_box .login .input_box > input, .login_container.join #login_box .login .input_box > select {font-size: 14px; padding: 10px 0; text-indent: 0; color: #fff; border-bottom: 1px solid #999;}
.login_container.find #login_box .login .input_box > input:focus, .login_container.join #login_box .login .input_box > select:focus {border-bottom: 1px solid #0077ff;}
.login_container.find #login_box .login .input_box > input::placeholder {color: #999;}
.login_container.find .login .input_box #accNoBtn {position: absolute; top: 25px; right: 0; color: #2c90fa; padding: 5px 10px;}
.login_container.find .login .input_box #accNoBtn:hover {background-color: #f1f1f1; color: #333;}

#wrap {position: absolute; top: 9px;}

/* Mobile Responsive */
@media screen and (max-width: 1024px) {
    .login_container {
        right: auto;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
    }
    #login_box {
        width: 100%;
    }
    .main_title {
        font-size: 32px;
        text-align: center;
    }
    #login_box .login .input_box {
        margin-bottom: 20px;
    }
    .main_reg_title {
        text-align: center;
    }
}