.loginBox{}
.loginBoxL{display:none}
.loginBoxR{background:#fff;padding:20px 20px 40px 20px;position:relative}

@media screen and (min-width:1150px){
.bgLogin{background:url(/images/login_visual_bg.jpg) 0 0 no-repeat;background-size:100vw 100vh}

.loginBox{width:1100px;height:700px;margin:0 auto;display:table;position:absolute;top:50%;left:50%;margin:-350px 0 0 -550px}
.loginBoxL{display:table-cell;width:550px;background:url(/images/login_visual.jpg) 0 0 no-repeat;border-radius:20px 0 0 20px;vertical-align:top;padding:35px 35px}
.loginBoxL .media{display:inline-block;font-size:14px;color:#7d7f8b}
.loginBoxL .media:before{display:inline-block;content:"";width:18px;height:20px;background:url(/images/ico_media_login.png) 0 0 no-repeat;vertical-align:middle;margin:0 5px 3px 0}
.loginBoxL .media em{font-weight:bold}
.loginBoxR{display:table-cell;border-radius:0 20px 20px 0;vertical-align:top;padding:80px 30px 30px 30px;}
}

.loginContain{max-width:300px;text-align:center;margin:0 auto}
.loginTitle{margin:0 0 50px 0}
.loginTitle h2{font-size:30px;color:#000;font-family:arial;letter-spacing:-0.5px;margin:0 0 12px 0}
.loginTitle h2 .login{color:#3385ff;font-weight:bold}
.loginTitle .explain{font-size:15px;color:#a1a1a1;letter-spacing:-0.5px;}

.loginForm li{margin:0 0 10px 0}
.loginForm .topLang{width:100%;}
.loginForm .topLang .btn-sel{display:block;width:100%;height:52px;border:solid 1px #e0e3e5;border-radius:8px;background:#fff url(/images/ico_login_lang@2x.png) 0 0 no-repeat;background-size:52px auto;text-align:left;font-size:14px;color:#000;padding:0 20px 0 70px;position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;}
.loginForm .topLang.open .dropdown-toggle{box-shadow:none;border:solid 1px #4786ff}
.loginForm .topLang .btn-sel .caret{position:absolute;top:22px;right:20px;width:11px;height:6px;background:url(/images/ico_login_arrow@2x.png) 0 0 no-repeat;background-size:11px auto;border:none}
.loginForm .inputLogin{width:100%;height:52px;border:solid 1px #e0e3e5;border-radius:8px;color:#000;font-size:14px;padding:0 20px 0 70px;-webkit-appearance:none;-moz-appearance:none;appearance:none;}
.loginForm .inputLogin:focus{border:solid 1px #4786ff}
.loginForm .loginId{background:url(/images/ico_login_id@2x.png) 0 0 no-repeat;background-size:52px auto}
.loginForm .loginPw{background:url(/images/ico_login_pw@2x.png) 0 0 no-repeat;background-size:52px auto}

.loginBox .langTop{margin:0 auto 60px auto;text-align:right;padding:0 20px 0 20px}

.loginBox .btn-group{display:inline-block;margin:0}
.loginBox .btn-group .btn{float:inherit;min-width:100px;height:30px;background:#f5f5f5;border-radius:25px;color:#666;font-size:14px;font-weight:400;line-height:1.3;vertical-align:middle;outline:none;padding:2px 5px 0 5px}
.loginBox .btn-group .btn.focus,
.loginBox .btn-group .btn:focus{box-shadow:none}
.loginBox .btn-group .btn::after{display:none}
.loginBox .btn-group .btn .eng{display:none}
.loginBox .btn-group .btn .caret{display:none}
.loginBox .btn-group .btn-lang{font-size:13px;}
.loginBox .btn-group .btn-lang:before{display:inline-block;content:"";width:18px;height:18px;background:url(/images/ico_lang_main@2x.png) 0 0 no-repeat;background-size:18px auto;vertical-align:middle;margin:0 5px 2px 0}
.loginBox .btn-group .btn-lang:after{display:none}
.loginBox .btn-group .dropdown-menu{font-size:14px;color:#000;box-shadow:2px 2px 2px rgba(0,0,0,0.15);padding:7px 0 7px 0;position:fixed;top:60px;right:0;left: auto;bottom:0;min-width:300px;width:100%;border-radius:0;border:none;border-top:solid 1px #f1f1f1;padding:20px 0;overflow:auto}
.loginBox .btn-group .dropdown-menu li{display:inline-block;width:calc(50% - 3px);padding:0 10px 3px 10px}
.loginBox .btn-group .dropdown-menu li.topLine{border-top:1px solid #dfe3e7}
.loginBox .btn-group .dropdown-menu li.padTop{padding-top:5px}
.loginBox .btn-group .dropdown-menu li.padBot{padding-bottom:5px}
.loginBox .btn-group .dropdown-menu a{vertical-align:top;padding:0;margin:0 0 10px 0;color:#444;line-height:1.4;font-weight:bold;font-family:NanumGothic, tahoma;padding: 0 15px;min-width: 115px;display: inline-block;cursor:pointer}
.loginBox .btn-group .dropdown-menu a:hover{text-decoration:none;color:#007bff;background:none}
.loginBox .btn-group .dropdown-menu a .eng{display:block;font-size:13px;color:#adadad;font-weight:lighter;line-height:1.1}

@media only screen and (min-width:740px){
.loginBox .langTop{max-width:330px;}
.loginBox .btn-group .dropdown-menu{position:absolute;top:40px;right:-25px;bottom:inherit;min-width:350px;border:solid 1px #ddd;border-radius:10px}
}

.btnLoginArea{text-align:right;margin:25px 0 50px 0;position:relative}
.btnLoginArea .btnLogin{width:120px;height:52px;background:#4786ff;border:none;border-radius:8px;color:#fff;font-size:16px;font-family:arial;font-weight:bold;-webkit-appearance:none;-moz-appearance:none;appearance:none;}

.btnLoginArea .saveIdArea{position:absolute;top:15px;left:0;text-align:left;}
.saveIdArea .inputCheck{display:none}
.saveIdArea .inputCheck + label{font-size:14px;font-weight:bold;color:#444;font-family:arial;cursor:pointer}
.saveIdArea .inputCheck + label:before{display:inline-block;content:"";width:20px;height:20px;border:solid 1px #e0e3e5;border-radius:4px;vertical-align:middle;margin:0 5px 3px 0}
.saveIdArea .inputCheck:checked + label{color:#4786ff}
.saveIdArea .inputCheck:checked + label:before{border:solid 1px #4786ff;background:url(/images/ico_login_chk@2x.png) 50% 50% no-repeat;background-size:15px auto}

.btnJoinArea{text-align:center;font-size:13px;color:#9fa0a1}
.btnJoinArea a{color:#9fa0a1}
.btnJoinArea .bar{display:inline-block;color:#e6e6e6;margin:0 5px}

@media screen and (min-width:1150px){
.btnJoinArea{position:absolute;bottom:32px;left:0;right:0;text-align:center}
}

.dropdown-menu.lan{width:100%}

.footer{background:transparent;color:rgba(0,0,0,0.28);font-size:13px;padding:0 30px}

@media screen and (min-width:1150px){
.footer{position:fixed;bottom:30px;left:0;right:0;width:100%;text-align:center;color:rgba(255,255,255,0.38)}
}