@charset "utf-8";

/* Reset */
html,body{width:100%;}
html{overflow-y:scroll;  background: #f8f8f8; color: #2a2e3d;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,form,fieldset,p,button,a{margin:0;padding:0}
body,h1,h2,h3,h4,input,button{font-family: 'Open Sans', 'Nanum Gothic',  gulim, 굴림, sans-serif; font-size:12px; font-weight: 300;}
body{text-align:center;*word-break:break-all;-ms-word-break:break-all;-webkit-font-smoothing: antialiased;-moz-font-smoothing: antialiased;-o-font-smoothing: antialiased;font-smoothing: antialiased; position: relative;}
img,fieldset,iframe{border:0 none}
li{list-style:none}
input,select,button{vertical-align:middle; outline: none;}
img{vertical-align:middle;}
i,em,address{font-style:normal}
label,button{cursor:pointer}
button{margin:0;padding:0}
button *{position:relative}
/* button img{left:-3px;*left:auto} */
html:first-child select{height:20px;padding-right:6px}
option{padding-right:6px}
hr{display:none}
legend{*width:0}
table{/* border-collapse:collapse;table-layout:fixed; */border-collapse:collapse;border-spacing:0}
textarea {border: 1px solid #e8e8e8; padding: 10px; width:95%; font-size:12px; line-height:18px; color:#2a2e3d;}

::-moz-selection { background: #ff2e5a; color: #fff; text-shadow: none; }
::selection { background: #ff3e4c; color: #fff; text-shadow: none; }

*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

a {text-decoration: none; color: #888; font-size: 100%;}
a:link, a:active, a:visited {text-decoration: none; color:#888; font-size: 100%;}
a:hover {text-decoration: underline; /* color:#e45e5e; */ font-size: 100%;}

.b {font-weight:bold !important;}
.red {color:#ff3e4c !important;}

/* margin */
.mr1 {margin-right:1% !important;}
.ml1 {margin-left:1% !important;}
.ml5 {margin-left:5px !important;}
.mr5 {margin-right:5px !important;}
.mt0 {margin-top:0px !important;}
.mt5 {margin-top:5px !important;}

.ptb15{padding:0 15px !important;}


iframe,fieldset, form, label, legend{margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
body.free_join {line-height: 1; background-color:transparent;}

.container_contents {width:100%; margin:0 auto; color:#888;}

/* login_form */
.login_form {width: 90%;  max-width:450px;  margin: 12em auto; font-size:13px;}
.login_form::after {clear: both;  content: "";  display: table;}
.login_form fieldset {/* margin: 24px 0; */}
.login_form div {position: relative; margin: 10px 0;}
.login_form h1 {margin-bottom:40px;}
.login_form span {/* font-size:12px; */ display:inline-block; color:#888;}
.login_form .info_text { height:20px;}
.login_form .idpw_info_text {height:60px;}
.login_form .info_text span {font-size:14px;  line-height:20px; color:#222;}
.login_form .idpw_info_text span {font-size:14px;  line-height:20px; color:#222;}
.login_form .id_pw {text-align:left; line-height:30px; height:30px; vertical-align:top; width:100%; margin-top:0px !important; width:100%;}
.login_form .id_pw span {display:inline-block;}
.login_form .id_pw .right {text-align:right; float:right;}
.login_form .a_link {margin-right:5px; font-weight:600; text-decoration:underline; color:#222;}
.login_form .btn_login {clear:both; padding-top:20px;} 
.login_form .btn_idpw {clear:both; padding-top:20px;}
.login_form .btn_cancel {width:49% !important;  border: none;  background: #555;  border-radius: .1em;  padding: 14px 20px;  color: #ffffff; font-weight: 400; font-size:20px; cursor: pointer; float:left !important; background:#b9b9b9 !important;}
.login_form .btn_ok {width:49% !important; float:right !important; } 
.login_form .id_pw_info {background:#fffccf; clear:both; padding:20px; text-align:left; line-height:20px; margin-top:20px;}

.login_form input[type="text"],
.login_form input[type="password"],
.login_form input[type="email"],
.login_form textarea,
.login_form select,
.login_form legend {display: block;  width: 100%;  -webkit-appearance: none;  -moz-appearance: none;  -ms-appearance: none;  -o-appearance: none;  appearance: none; font-size:15px;}
.login_form input[type="text"],
.login_form input[type="password"],
.login_form input[type="email"],
.login_form textarea,
.login_form select {padding: 12px;  border: 1px solid #ddd; background-color: #ffffff;  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);}
.login_form input[type="text"]:focus,
.login_form input[type="email"]:focus,
.login_form textarea:focus,
.login_form input:focus {outline: none; border-color: #555;  box-shadow: 0 0 5px rgba(44, 151, 222, 0.2);}
.login_form textarea {min-height: 200px;  resize: vertical;  overflow: auto;}
.login_form input[type="submit"] { width:100%; border: none;  background: #555;  border-radius: .1em;  padding: 14px 20px;  color: #ffffff;  font-weight: 400;  float: right;  cursor: pointer;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  -webkit-appearance: none;  -moz-appearance: none;  -ms-appearance: none; -o-appearance: none;  appearance: none; font-size:20px;}
.login_form input[type="submit"]:hover { opacity:0.9; }
.login_form input[type="submit"]:focus {  outline: none; opacity:0.9;}

.login_form .at {clear:both; position:fixed; bottom:0; height:auto; padding-bottom:40px; text-align:center; font-size:13px; line-height:30px; max-width:450px; width: 90%; }
.login_form .at a {text-decoration:underline; color:#222;}

.login_form .social_login li {float:left; width:32.666%; font-weight:600; border-radius:2px; height:40px; border:1px solid #ddd; background:#ffffff; font-size:15px; color:#222; position:relative;}
.login_form .social_login a {line-height:39px;  height:39px;  text-decoration:none; width:32.666%; display:block; }
.login_form .social_login li span.text-logo { position:absolute; padding:0px 24px;}
.login_form .social_login li span.social {display:inline-block; width:45px; border-right:1px solid #ddd; line-height:39px;  text-align:center; float:left;} 
.login_form .or {padding-top:30px; padding-bottom:30px; clear:both;}
.login_form .or .line {width:30%; display:inline-block; border-top:1px solid #ddd; vertical-align:middle;}
.login_form .or .text {display:inline-block; width:40%; text-align:center; font-size:14px; font-weight:600;}

.login_form .or_idpw {padding-top:5px; padding-bottom:5px; clear:both;}
.login_form .or_idpw .line {width:40%; display:inline-block; border-top:1px solid #ddd; vertical-align:middle;}
.login_form .or_idpw .text {display:inline-block; width:20%; text-align:center; font-size:14px; font-weight:600;}

.login_form .m_social_login li {height:50px; border-radius:2px; line-height:50px;  margin-bottom:10px;}
.login_form .m_social_login a {text-decoration:none; line-height:50px; display:block; font-size:16px;  text-align:center; color:#fff;  width:100%;  font-weight:500;}
.login_form .m_social_login img {float:left; margin-left:8px; margin-top:8px;}
.login_form .m_social_login {display:none;}
.login_form .m_h4 {display:none; } 

.login_form .social_login_bg {background:#ffffff; border:1px solid #ddd;}
.login_form .btn_naver_bg {background:#1ec800;}
.login_form .btn_facebook_bg {background:#365ba2;}
.login_form .btn_google_bg {background:#dc4e41;}

.login_form .member_login a {color:#888; text-decoration:none;}
.login_form .member_login a:hover {color:#666; text-decoration:underline;}
.login_form .btn_member {display:none;}
.login_banner {width: 90%;  max-width:305px;   font-size:13px; position:absolute; left:50%; margin-left:250px; top:80px;}

.free_join .copyright {clear:both; position:fixed; bottom:0; height:auto; padding-bottom:40px; text-align:center; font-size:13px; line-height:30px; max-width:450px; width: 90%; }

@media only screen and (min-width: 600px) {
  .login_form input[type="text"],
  .login_form input[type="password"],
  .login_form input[type="email"],
  .login_form textarea,
  .login_form select {
    padding: 15px;
  }
}

@media only screen and (max-width: 1150px) {
  .login_banner {display:none;}
}

@media only screen and (max-height: 768px) {
 .free_join .copyright {display:none;}
}

@media only screen and (max-width: 600px) {
   body.free_join {position:relative;}
  .login_form {margin:4em auto;}
  .login_form .social_login {display:none;}
  .login_form .a_link {display:none;}
  .login_form .at {display:none;}
  .login_form .m_social_login {display:block !important;}
  .login_form .info_text {height:auto;}
  .login_form .btn_login input {background:#b9b9b9; margin-bottom:10px;}
  .login_form .btn_member {display:block !important;}

}