@charset "utf-8"; 
/* @import url("//fonts.googleapis.com/earlyaccess/notosanskr.css"); */ 
@import url("./fonts.css");

/* common */
* { margin:0; padding:0; box-sizing:border-box }
body { -webkit-text-size-adjust:none }
body,pre,textarea,input { font-size:18px; font-family:Spoqa Han Sans Neo, '맑은 고딕', Malgun Gothic, '돋움', Dotum, Helvetica, Arial, sans-serif; color:#333; font-weight:500; word-break:keep-all }
a { text-decoration:none; color:#333 }
ul { list-style:none; padding:0 }

/* layout */
.top_menu,.gnb_wrap,#content section>div,.foot_menu,address,.copyright { max-width:1300px; margin:0 auto }
.skip_navigation { display:none }
#wrap { }

.login { position:absolute; top:0; left:0; bottom:0; right:0; min-width: 320px }
.login .wrap { min-width:auto; min-height:670px; height:100%; position:relative; overflow:inherit }
.login .box { height:calc(100% - 70px); min-height:490px }
.login_box { padding-left: 50%; position: absolute; top: 50%; margin-top: -220px; width: 100%; z-index: 999; transition: all 1s;}
.login_box:before { content: ""; display: block; width: calc(50% + 80px); height: 384px; border-radius:0 80px 0 0; background: #eeeeee url(/resources/images/img_30anniversary.svg) no-repeat calc(100% - 100px) 50% ; background-size:70%; position: absolute; left: 0; top: -100px; transition: all 1s; /*box-shadow: 0 0 20px rgba(0, 0, 0, 0.1)*/ }
.login_inner { display:flex; padding:40px 70px 50px 70px; background:linear-gradient(124.18deg, #00AAE0 0%, #008AE0 50.98%); border-radius:80px 0 0 0; position:relative }
.login_inner div { display:flex; flex-direction:column; margin-top:30px }

.login_inner .login_form { padding-right: 40px; margin-right: 40px; position: relative }
.login_inner .login_form:before { content:""; display:block; width:280px; height:40px; background:url(/resources/jbsc/images/common/h1_logo.png) no-repeat 50% 50%; background-size:contain; position:absolute; top:-130px; }
.login_inner .login_form input { background-color:#ffffff; border:0; border-radius:50px; padding:10px 20px; color:#333; margin-bottom:20px; width:280px; height:60px }
.login_inner .login_form input:-webkit-autofill { transition:background-color 5000s ease-in-out 0s }

.login_inner .login_formExt { padding-right:40px; position:relative }
.login_inner .login_formExt:before { content:""; display:block; width:280px; height:35px; background-size:contain; position:absolute; top:-60px }
.login_inner .login_formExt input { background-color:#ffffff; border:0; border-radius:50px; padding:10px 20px; color:#333; margin-bottom:20px; width:280px; height:60px }
.login_inner .login_formExt input:-webkit-autofill { transition:background-color 5000s ease-in-out 0s }
 
.login_inner a { border-radius:50px; padding:19px; text-align:left; font-size:16px; width:280px; text-align:center; color:#fff; }
.login_inner .login_quick a { width:230px; padding:0 0 14px; background-repeat:no-repeat; display: flex; align-items: center; color:#303030 }
.login_inner .login_quick a:last-child { margin-bottom:0 }
.login_inner .login_quick a img { background: #d3c4b2; padding: 8px; border-radius: 8px; margin-right: 10px }
.login_inner .login_quick a:hover {  }
.login_inner a.btn_login { background-color:#141D36; text-align:center; }
.login_inner a.btn_id {  }
.login_inner a.btn_pwd {  }
.login_inner a.btn_help {  }

footer { display:flex; width:100%; height:70px; color:#959595; background:#141D36; text-align:center; align-items:center }
.copyright { box-sizing:border-box; overflow:hidden; font-style: normal; }
.copyright p { font-size:14px; letter-spacing:0 }
.copyright p span { display:inline-block; margin:0 10px; white-space:nowrap }

@media screen and (max-width:1050px) { 
    
/*     .login_box { padding-left:30% } */
    
}

@media screen and (max-width:925px) { 
    
/*     .login_box { padding-left:20% } */
    .login_inner:before { background:none }
    
}

@media screen and (max-width:860px) { 
    .login .box { background:#008ae0 }
    .login_inner { background: linear-gradient(180deg, #00AAE0 0%, #008AE0 50.98%) }
    .login_box:before { background-position: 50% 50% }
/*     .login_box:after { content: ""; display: block; background: url(/resources/images/img_m_txt.png) no-repeat 50% 100%; position: absolute; left: 40px; top: -90px; transition: all 1s; width: 60%; height: 70px; background-size: contain } */
    
    .login_inner { border-radius:50px 50px 0 0; height:100%; padding:70px 30px 20px; flex-direction:column }
    .login_inner .login_form:before { left:50%; margin-left:-125px; top:-55px }
    .login_box { top:0; margin-top:200px; padding-left:0 }
    .login_box:before { height: 280px; left:0; top:-240px; width:100%; border-radius:0 }
    .login_inner div { margin-top:20px }
    .login_inner .login_form { padding-right:0; border-right:0; margin-right:0 }
    .login_inner .login_quick { flex-direction:row; justify-content:space-between }
    .login_inner .login_form input,.login_inner a { width:auto }
    .login_inner .login_quick a { width:calc(100%/3 - 5px); margin-bottom:0; justify-content: center }
    .login_inner .btn_join { margin-bottom:0 }
    .login_box p { text-align:center; padding:0 30px; margin-top:0 }

    .copyright p span:last-child, .copyright p:last-child { display:none }

}

@media screen and (max-width:510px) { 
    .login { bottom: 10px }
    .login_inner .login_quick a { flex-direction: column; padding: 0 }
    .login_inner .login_quick a img { margin-right:0 }
    .login .box { height:calc(100% - 60px) !important }
}


@media screen and (max-width:355px) { 
    .login_inner .login_quick a { letter-spacing:-1px }
}

@media screen and (max-width:335px) { 
    .login_inner .login_quick { margin: 20px -20px 0 }
    .copyright p span { white-space: pre-wrap }
}

@media screen and (max-width:300px) { 
    .login_inner { padding: 70px 20px 20px; border-radius: 30px 30px 0 0 }
    
}

.searchButton,.box_search .listButton { padding:4px 18px; margin-bottom:0; font-size:14px; line-height:1.42857143; text-align:center; white-space:nowrap; vertical-align:middle; cursor:pointer; border:solid 1px #4d6df9; border-radius:3px; background:#4d6df9; color:#fff; margin-left:10px }
.searchButton:hover { background:rgba(255,255,255,1); border:1px solid #313dac }
.searchButton:active,.searchButton:focus { background:rgba(255,255,255,1); color:#000 }

.cancelButton { padding:4px 18px; margin-bottom:0; font-size:14px; line-height:1.42857143; text-align:center; white-space:nowrap; vertical-align:middle; cursor:pointer; color:#fff; background:#ff8600; border:1px solid #ff8600; border-radius:3px }
.cancelButton:hover { background:#ff9000; color:#fff; border:1px solid #ff8600 }
.cancelButton:active,.deleteButton:focus { background:#ffa900; color:#fff }

.table_face { position:relative; border-collapse:collapse; width:100%; background:#fff; box-shadow:0 0 5px rgba(0,0,0,0.1) }
.table_face caption { display:none; font-size:0 }
.cont .table_face:last-child { margin-bottom:0 }
.table_face th,.table_face td { padding:1px 18px; border:1px solid #d2dce8; line-height:100%; text-align:center; line-height:136%; font-weight:normal }
.table_face thead,.table_face tbody th { background-color:#f6f6f6 !important }
.table_face thead th { border-bottom:0 }
.table_face tbody tr { background:#fff !important }

label.captcha { background:none; padding-left:200px !important; width:100px !important }
input.ccTxt { margin-left:200px !important; width:50% !important }
fieldset { padding:0 }
fieldset.ccImg { margin-top:-67px; width:165px; text-align:left; position:relative }
fieldset.ccImg dl { margin:0 }
fieldset.ccImg dd { margin:0 }
fieldset.ccImg #reload { position:absolute; bottom:4px; right:-4px; background-color:#fff; background-image:url(/resources/images/ico_reset.png); background-position:3px center; background-repeat:no-repeat; background-size:17px; height:35px; padding-left:23px; /* outline:none; */ border:1px solid #e2e5e9; cursor:pointer; font-size:12px }


@media screen and (-webkit-min-device-pixel-ratio:0) {
    
    .ieDesc,.idTxt,.idBack { display:none }
    
}
 
/* IE6,7 */
@media screen\9 {
    
    .ieDesc { display:block; width:100%; height:100%; position:absolute; top:0; left:0; z-index:9999 }
    .idTxt { color:#fff; font-weight:bold; font-size:25px; position:absolute; top:50%; left:50%; margin:-37px 0 0 -163px }
    .idBack { background:rgba(0,0,0,0.8); width:100%; height:100% }
    
}
 
/* IE8 */
@media \0screen {
    
    .ieDesc { display:block; width:100%; height:100%; position:absolute; top:0; left:0; z-index:9999 }
    .idTxt { color:#fff; font-weight:bold; font-size:25px; position:absolute; top:50%; left:50%; margin:-37px 0 0 -163px }
    .idBack { background:rgba(0,0,0,0.8); width:100%; height:100% }
    
}
 
/* IE6,7,8 */
@media \0screen\,screen\9 { 
    
    .ieDesc { display:block; width:100%; height:100%; position:absolute; top:0; left:0; z-index:9999 }
    .idTxt { color:#fff; font-weight:bold; font-size:25px; position:absolute; top:50%; left:50%; margin:-37px 0 0 -163px }
    .idBack { background:rgba(0,0,0,0.8); width:100%; height:100% }
    
}
 
/* IE9,10 */
@media screen and (min-width:0\0) {
    
    .ieDesc { display:block; width:100%; height:100%; position:absolute; top:0; left:0; z-index:9999 }
    .idTxt { color:#fff; font-weight:bold; font-size:25px; position:absolute; top:50%; left:50%; margin:-37px 0 0 -163px }
    .idBack { background:rgba(0,0,0,0.8); width:100%; height:100% }
    
}

@media (max-width:415px) {
    /* 비밀번호변경팝업 */
    .popup_layer { width:100%; box-shadow:none; box-sizing:border-box; left:0; top:0; margin-top:0; margin-left:0; border-radius:0; height:100% }
    .popup_layer dt,.popup_layer dd { display:block; width:100%; text-align:left }
    .popup_layer dd { }
    
}

@media (max-width:395px) {

    .wrap.login footer .copyright { letter-spacing:-0.5px }
    
}