@charset "utf-8";
/*login*/
.log-header {width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;margin-top:10px;margin-bottom:40px}
.log-header .sec-title {display:block;font-size:2.5rem;font-weight:500;letter-spacing:-0.05em;color:#222;padding:10px 0 0;text-align:center}
.cont-intro-guide-login {margin:0 auto;width:100%}
.cont-intro-guide-login #main-section {padding-bottom:0}
.cont-intro-guide-login #main-section #main-section-body {margin-bottom:0}
.log-box {width:100%;padding-right:15px;padding-left:15px;background:#f5f6f8;z-index:-1}
.login-wr {position:relative;padding:50px 0}
.login-wr .login-box {position:relative;width:49%;border:1px solid #ddd;background:#fff;display:inline-block;vertical-align:top;box-sizing:border-box;margin:0 1.6% 0 0;padding:50px 7%;min-height:400px}
.login-wr .login-box:nth-child(2) {margin:0;padding: 40px 6% 33px;}
.login-wr .login-box .ptit {position:relative;font-size:1.563em;color:#222;padding:70px 0 0;text-align:center;margin:0 0 50px}
.login-wr .login-box .ptit:after {content:"";display:block;position:absolute;top:0;left:0;right:0;margin:0 auto;width:60px;height:60px;background:url(/_res/kibo/_share/img/login_icon.png) no-repeat;z-index:1}
.login-wr .login-box.log2 .ptit:after {background-position:-62px 0}
.login-wr .login-box .login-form {position:relative}
.login-wr .login-box .login-txt1 {display:inline-block;vertical-align:top;width:60%}
.login-wr .login-box input.text {border-radius:5px;border:none;background:#f5f6f8;width:100%;height:45px;line-height:45px;font-size:1em;padding:0 1% 0 20px;margin:0 0 8px}
.login-wr .login-box ul> li:nth-child(2) input.text {margin-bottom:0;}
.login-wr .login-box .btn {position:absolute;right:0;;border-radius:5px;width:160px;height:100px;color:#fff;border:0;font-size:1em;line-height:40px;cursor:pointer;transition:all .3s ease}
.login-wr .login-box .btn.login1 {background:#285fba}
.login-wr .login-box .btn.login1:hover {background:#05367b}
.login-wr .login-box .btn.login2 {background:#404b57}
.login-wr .login-box .btn.login2:hover {background:#26303b}
.login-wr .login-box .chk-wrap label {font-size:1em;color:#333;margin:0 0 0 6px} 
.login-wr .login-box .login-txt2 {position:relative;margin-bottom: 20px;}
.login-wr .login-box .login-txt2 .stxt {width:60%;height: 100px;margin: 0;padding: 28px 0px;display:inline-block;vertical-align:middle;font-size:1.063em;color:#333;letter-spacing:-.025em;line-height:1.3;word-break:keep-all;}
.login-wr .info-list {margin-top:30px}
.login-wr .chk-wrap {margin-top:20px}
.login-wr .login-box .mem-link {display:block;position:absolute;right:0;bottom: 0;overflow:hidden;}
.login-wr .login-box .mem-link li {display:block;float:left;margin:0 0 0 16px}
.login-wr .login-box .mem-link li a {display:block}
.login-wr .login-box .mem-link li a span {position:relative;display:block;font-size:16px;color:#333;box-sizing:border-box;padding:0 30px 0 0;transition:all .3s ease}
.login-wr .login-box .mem-link li a span:after {content:"";display:block;position:absolute;width:13px;height:13px;right:5px;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%);background:url(/_res/kibo/_share/img/login_icon.png) no-repeat 0 -62px;transition:all .3s ease}
.login-wr .login-box .mem-link li a:focus span:after,
.login-wr .login-box .mem-link li a:hover span:after {right:0}
.login-wr .login-box .mem-link li a:focus,
.login-wr .login-box .mem-link li a:hover,
.login-wr .login-box .log2-link:focus,
.login-wr .login-box .log2-link:hover {text-decoration:underline}

.login-wr .login-box .log2-link {position:relative;display:inline-block;font-size:16px;color:#333;box-sizing:border-box;padding:0 30px 0 0;margin: 0;transition:all .3s ease;}
.login-wr .login-box .log2-link:after {content:"";display:block;position:absolute;width:13px;height:13px;right:5px;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%);background:url(/_res/kibo/_share/img/login_icon.png) no-repeat 0 -62px;transition:all .3s ease}
.login-wr .login-box .log2-link:focus:after,
.login-wr .login-box .log2-link:hover:after {right:0}

.login-wr .login-box2 {position:relative;margin:20px 0 0}
.login-wr .login-box2 .logbox {width:49%;box-sizing:border-box;display:inline-block;vertical-align:top;font-size:0;margin:0 1.6% 0 0}
.login-wr .login-box2 .logbox:last-child {margin:0}
.login-wr .login-box2 .logbox .btn {position:relative;text-align:center;font-size:20px;color:#fff;width:100%;display:block;box-sizing:border-box;border-radius:5px;font-weight:400;padding:23px 0;transition:all .3s ease}
.login-wr .login-box2 .logbox .btn.login3 {background:#1c2674}
.login-wr .login-box2 .logbox .btn.login3:hover {background:#171f5c}
.login-wr .login-box2 .logbox .btn.login3:after {content:"";display:block;position:absolute;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%);left:30px;width:60px;height:60px;background:url(/_res/kibo/_share/img/login_icon.png) no-repeat -124px 0;z-index:1}
.login-wr .login-box2 .logbox .btn.login4 {background:#415767}
.login-wr .login-box2 .logbox .btn.login4:hover {background:#404b57}
.login-wr .login-box2 .logbox ul {margin:10px 0 0}

@media all and (max-width:1300px){
  .login-wr .login-box {padding:40px 6%}
  .login-wr .login-box:nth-child(2) {padding: 30px 6% 31px;}
}
@media all and (max-width:1200px){
  .login-wr .login-box {padding:40px 3%}
}
@media all and (max-width:1024px){
  .login-wr .login-box {padding: 30px 3% 58px;min-height:370px;}
}
@media all and (max-width:992px){
  .log-header {margin-bottom:20px}
  .log-header .sec-title {font-size:2.188em}
  .login-wr {padding:30px 0}
  .login-wr .login-box {width:100%;padding:20px 5%;margin:0 0 15px 0;min-height:auto}
  .login-wr .login-box .ptit {font-size:1.438em;margin:0 0 20px}
  .login-wr .login-box .login-txt1 {width:75%}
  .login-wr .login-box .btn.login1 {width:24%;font-size: 0.875rem;}
  .login-wr .login-box input.text {font-size:0.938em;padding:0 1% 0 15px}
  .login-wr .login-box .chk-wrap label {font-size:0.938em} 
  .login-wr .login-box .login2 .stxt {font-size:1em}
  .login-wr .login-box .login-txt2 .stxt {width:100%;height: auto;display:block;padding-top: 0;text-align:center;}
  .login-wr .login-box .btn.login2 {width:100%;height:50px;position:relative}
  .login-wr .info-list {margin-top:20px}

  .login-wr .login-box2 .logbox {margin:0 1.5% 0 0}
  .login-wr .login-box2 .logbox .btn {font-size:18px;padding:20px 0}
  .login-wr .login-box2 .logbox .btn.login3:after {width:48px;height:48px;left:20px;background-size:147px auto;background-position:-99px 0}
}
@media all and (max-width:768px){
  .login-wr .login-box .ptit {padding:55px 0 0;font-size:1.250em}
  .login-wr .login-box .ptit:after {width:48px;height:48px;background-size:147px auto}
  .login-wr .login-box.log2 .ptit:after {background-position:-50px 0}
  .login-wr .login-box .mem-link li a span, 
  .login-wr .login-box .log2-link {font-size:15px}

  .login-wr .login-box2 .logbox {width:100%;display:block;margin:0 0 0 0}
  .login-wr .login-box2 .logbox:last-child {margin:10px 0 0}  
}
@media all and (max-width:599px){
  .log-header {margin-bottom:10px}
  .log-header .sec-title {font-size:1.563rem;}
  .login-wr .login-box .ptit {font-size:1.125em}
  .login-wr .login-box input.text {font-size:0.875em;padding:0 1% 0 10px}
  .login-wr .login-box .chk-wrap label {font-size:0.875em} 
  .login-wr .login-box .login2 .stxt {font-size:0.938em}
  .login-wr .info-list {margin-top:10px}
  .login-wr .login-box .mem-link li a span, 
  .login-wr .login-box .log2-link {font-size:14px}
  .login-wr .login-box .log2-link {margin:10px 0 0}
  .login-wr .chk-wrap {margin-top:0}

  .login-wr .login-box2 {margin:10px 0 0}
  .login-wr .login-box2 .logbox .btn {font-size:16px;padding:15px 0}
  .login-wr .login-box2 .logbox .btn.login3:after {width:36px;height:36px;left:10px;background-size:110px auto;background-position:-74px 0}
}

@media all and (max-width:576px){
  .log-box {}
  .login-wr .login-box .mem-link {position:relative;right: auto;bottom: auto;}
  .login-wr .login-box .mem-link li {margin-left:0}
}

/*아이디/비밀번호찾기*/
.mem-box-w {width:800px;margin:0 auto;padding:50px 0 0}
.mem-box-w .mem-box {position: relative;padding: 50px 30px 50px 240px;margin-top: -30px;border-bottom:1px solid #ccc}
.mem-box-w .mem-box .mem-img {position: absolute; left:20px; top:60px; width:150px; height:150px;}
.mem-box-w .mem-box .mem-img img {width:100%}
.mem-box-w .mem-box .mem-txt-w .mem-txt {box-sizing:border-box;margin:20px 0 0; padding:20px 0; background: #fff;}
.mem-box-w .mem-box .mem-txt-w .mem-txt .b-sel-box {display: inline-block;position: relative;z-index: 1;text-align: left;vertical-align: middle; width: 100%;margin: 2px 10px;}
.mem-box-w .mem-box .mem-txt-w .mem-txt .b-sel-box label {min-width: 110px;padding: 0 4px;color: #000;display: inline-block;text-align: left;}
.mem-box-w .mem-box .mem-txt-w .mem-txt .b-sel-box input[type="text"] {padding: 5px 10px;/* width: 360px;*/width: 378px;height: 45px;font-size: 15px;border: none;background: #f2f3f4;font-family: inherit;font-weight: 400;font-size: 16px; box-sizing: border-box;border-radius: 5px;-webkit-appearance: none;-moz-appearance: none;appearance: none;
  vertical-align: middle;}
.mem-box-w .mem-box .mem-txt-w .mem-txt .b-sel-box span {display:inline-block;font-size:15px;padding:5px 0 0 115px;width: 360px;}
.mem-box-w .mem-box .mem-txt-w .mem-txt .b-sel-box .b-select{position:relative;margin:0 5px 0 0;padding:5px 10px;width: 360px;height: 45px;border: none;border-radius: 3px;background: #f2f3f4 url(/_res/kibo/_share/img/board/btn-sel-open01.png) no-repeat right 10px center;font-family:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;color: #777;font-size: 15px;vertical-align: middle;}
.mem-box-w .mem-box .mem-txt-w .mem-txt .b-sel-box .b-select-wide{width:calc(50% - 15px);max-width:100%;}
.mem-box-w .mem-box .mem-txt-w .mem-txt .b-sel-box .b-select-full{width:100%;}
.mem-box-w .mem-box .mem-txt-w .mem-txt .b-sel-box .b-select:last-of-type{margin:0;}

/*인증하기*/
.login-wr .login-box.mem1, 
.login-wr .login-box.mem2 {min-height: 320px;}
.login-wr .login-box.mem1 .ptit, 
.login-wr .login-box.mem2 .ptit {position:relative;font-size:1.563em;color:#222;padding:70px 0 0;text-align:center;margin:0 0 20px}
.login-wr .login-box.mem1 .ptit:after {content:"";display:block;position:absolute;top:0;left:0;right:0;margin:0 auto;width:60px;height:60px;background:url(/_res/kibo/_share/img/mem_icon02.png) no-repeat 0 0;z-index:1}
.login-wr .login-box.mem2 .ptit:after {background:url(/_res/kibo/_share/img/mem_icon02.png) no-repeat;background-position:-62px 0;}
.login-wr .login-box.mem1 .mtxt, 
.login-wr .login-box.mem2 .mtxt {font-size:1.063em;color:#333;letter-spacing: -.025em;line-height: 1.3;margin: 0;}

/*아이디찾기 완료*/
.resid-box-wr {position:relative;border:1px solid #ccc;padding:20px 100px}
.resid-box-wr .resid-txt {position:relative;text-align: center;padding:170px 0 0}
.resid-box-wr .resid-txt:after {content:"";display:block;position:absolute;top:0;left:0;right:0;margin:0 auto;width:150px;height:150px;background:url(/_res/kibo/_share/img/mem_icon01.png) no-repeat 0 0;z-index:1}
.resid-box-wr .resid-txt span, 
.resid-box-wr .respass-txt span {display:block;font-size:16px;color:#222;}
.resid-box-wr span .res-txt {font-size:17px;display: inline-block;}

/*비밀번호찾기 완료*/
.resid-box-wr .respass-txt {display:block;font-size:16px;color:#222;}
.resid-box-wr .radio-box {background:#fff;padding:25px 15px}
.resid-box-wr .radio-box > div {display:inline-block}

@media all and (max-width:992px){
  .mem-box-w {width: auto;padding: 30px 0 0;}
  .mem-box-w .mem-box {padding: 40px 30px 40px 220px;}
  .mem-box-w .mem-box .mem-txt-w .mem-txt .b-sel-box {text-align: center;}
  .mem-box-w .mem-box .mem-txt-w .mem-txt .b-sel-box span {width: 455px;text-align: left;}
  .mem-box-w .mem-box .mem-txt-w .mem-txt .b-sel-box .b-select{text-align: center;}
  .login-wr .login-box.mem1, 
  .login-wr .login-box.mem2 {min-height: 250px;}
  .login-wr .login-box.mem1 .mtxt, 
  .login-wr .login-box.mem2 .mtxt {font-size:1em;}
  .resid-box-wr {padding: 20px 50px;}
}
@media all and (max-width:820px){
  .mem-box-w .mem-box .mem-txt-w .mem-txt .b-sel-box input[type="text"] {width: 300px;}
  .mem-box-w .mem-box .mem-txt-w .mem-txt .b-sel-box span {width: 395px;}
  .mem-box-w .mem-box .mem-txt-w .mem-txt .b-sel-box .b-select {width: 300px;}
}
@media all and (max-width:768px){
  .mem-box-w {padding: 20px 0 0;}
  .mem-box-w .mem-box {padding: 30px 0}
  .mem-box-w .mem-box .mem-img {position: relative;width:120px; height:120px;margin: 0 auto 20px;top: auto;left: auto;}
  .resid-box-wr {padding: 20px;}
  .login-wr .login-box.mem1,
  .login-wr .login-box.mem2 {width: 100%;padding: 20px 3%;margin: 0 0 15px 0;min-height: auto;}
  .login-wr .login-box.mem1 .ptit, 
  .login-wr .login-box.mem2 .ptit {padding:55px 0 0;font-size: 1.250em; margin: 0 0 10px;}
  .login-wr .login-box.mem1 .ptit:after,
  .login-wr .login-box.mem2 .ptit:after {width: 48px;height: 48px;background-size: 98px auto;}
  .login-wr .login-box.mem2 .ptit:after {background-position:-50px 0;}

  .resid-box-wr .resid-txt {padding: 140px 0 0;}
  .resid-box-wr .resid-txt:after {width:120px;height:120px;background-size:120px auto}
}
@media all and (max-width:610px){
  .resid-box-wr .radio-box {text-align:left;padding:15px}
  .resid-box-wr .radio-box > div {display:block}
}
@media all and (max-width:576px){
  .mem-box-w {padding: 15px 0 0;}
  .mem-box-w .mem-box {padding: 20px 0;}
  .login-wr .login-box.mem1,
  .login-wr .login-box.mem2 {padding: 15px 3% 0;}
  .login-wr .login-box.mem1 {margin: 0 0 15px 0;}
  .login-wr .login-box.mem2 {margin: 0 0 0 0;}
  .login-wr .login-box.mem1 .mtxt, 
  .login-wr .login-box.mem2 .mtxt {font-size:0.938rem;}
  .mem-box-w .mem-box .mem-txt-w .mem-txt {padding: 5px 0;}
  .mem-box-w .mem-box .mem-txt-w .mem-txt .b-sel-box {margin: 2px 0;width: 100%;text-align: left;}
  .mem-box-w .mem-box .mem-txt-w .mem-txt .b-sel-box input[type="text"] {width: 100%;height: 40px;font-size:14px;}
  .mem-box-w .mem-box .mem-txt-w .mem-txt .b-sel-box span {padding:5px 0 0 0;font-size:14px;width: auto;}
  .mem-box-w .mem-box .mem-txt-w .mem-txt .b-sel-box .b-select {width: 100%;height: 40px;margin:0 0 0 0;font-size:14px;}
  .resid-box-wr {padding: 20px 20px 0;}
  .resid-box-wr span .res-txt {font-size:16px;}
  .resid-box-wr .resid-txt span, 
  .resid-box-wr .respass-txt span {font-size:15px;}
}