@charset "UTF-8";

textarea:focus-visible,
textarea:active,
input:focus-visible,
a:focus-visible,
button:focus-visible{outline:1px solid black; outline-offset: 3px !important;} /* 24.11.15 웹접근성  */

/* 메뉴별 배너 이미지 */
.sub_person{background: url(../images/sub/sub_banner_person.jpg) no-repeat; background-position:center; background-size:cover;}
.sub_usage{background: url(../images/sub/sub_banner_usage.jpg) no-repeat; background-position:center; background-size:cover;}
.bg_usage{background: rgba(19,115,156,0.5) !important;}

.big_title span.s_underline {
    font-size: 30px;
    line-height: 1.3em;
    font-weight: 500;
    background-size: 1px 8px;
    background-position: 0 35px;
    letter-spacing: -2px;
}
.clone {margin-top:5px !important;}
.wi250 {width:250px !important;}


#close-btn {margin-left:10px;}
.relationht {height:70px !important; padding:15px}
#relation-input {width:318px !important;}


.small_button {
	font-size:12px;
	padding: 2px 5px;
	background : #eee;
}

.ab1 {position:absolute; padding:12px 5px; margin-left:5px;}
.ab2 {position:absolute; margin-top:42px; padding:12px 5px; margin-left:5px;}
.ab3 {position: absolute;
    padding: 12px 5px;
    margin-left: 5px;}

.custom-file-input {
width:50%;
}
/* 회원가입 팝업 */
#popup {width:640px;padding:30px; border: 6px solid #e8e8e8;}
#popup .form_contents {}
#popup .form_contents .title h1{font-size: 26px; margin: 0; letter-spacing:-1px;}
#popup .form_contents .title .top_txt {margin: 10px 0 20px 0; font-size: 14px; letter-spacing: -0.5px; line-height: 16px;}

/* 추가 */
body a, a:hover, body a:active,body a:focus { text-decoration:none; }

.btn_center { margin-top:20px; text-align:center; }
.btn_b { display:inline-block; font-size:14px; line-height:14px; text-align:center; color:#0e4e9f; background-color:#fff; border:1px solid #0e4e9f; padding:8px 20px 12px; font-weight:500; margin:0 1px; }
.btn_b:hover { color:#fff; background-color:#0e4e9f; }


.ex_box2 {
    clear: both;
    padding: 10px 10px;
    background: #f9f9f9;
    border: 1px solid #cbcbcb;
    height: 300px;
    overflow-y: auto;
}

.ht400 {
    height: 400px !important;
}

.wi308 {width:308px !important; }
.mb30 { margin-bottom:30px !important; }

.ex_box2 h2 {
    font-size:19px !important;font-weight: 700 !important;
    letter-spacing: 0 !important; margin-left:0 !important;
}

.ex_box2 h3 {
    font-size:15px;
}

.ex_box2 p {
    font-size:15px; line-height: 23px;
    padding-left: 5px;
        word-wrap: break-word;
    word-break: break-all;
}

.ul01 li {
    list-style-type: decimal;
    list-style-position: inside;
    list-style-position: inside;
    text-indent: -14px;
    padding-left: 18px;
    font-size:15px; line-height: 23px; text-align:justify;
}

.ul02 li {
    list-style-type: disc;
    list-style-position: inside;
    list-style-position: inside;
    text-indent: -20px;
    padding-left: 38px;
    font-size:15px; line-height: 23px; text-align:justify;
}


.agreement1 {
    font-size:15px;
}

.mauto {width: 100%; text-align: center;}
.mbox{display: inline-block;}



/* 메세지 */
.message_box {padding:70px 0; position:relative; text-align:center;}
.message_box .btnWrap {margin:0 auto}
.message_box .tit {margin-bottom:16px; /*font-family:'NanumBarunGothicBold';*/ font-size:30px; line-height:30px}
.message_box .desc {font-size:18px; color:#5c5c5c}  
.message_box .desc + .btnWrap {margin:40px 0 0}
.message_box .member_id {font-size:22px; /*font-family:'NanumBarunGothicBold';*/ color:#000}
.message_box .member_id + .fc_blue {display:block; padding-top:13px}
.message_box.finish {padding-top:145px}
.message_box.finish:after {display:block; content:""; clear:both; width:66px; height:63px; margin-left:-32px; background:url("../images/icon/ico_message_group.png") no-repeat 0 -545px; position:absolute; top:58px; left:50%}
.message_box.find {padding-top:158px}
.message_box.find:after {display:block; content:""; clear:both; width:66px; height:65px; margin-left:-33px; background:url("../images/icon/ico_message_group.png") no-repeat 0 0; position:absolute; top:58px; left:50%}

.btn_large.blue {
    background: #0e4e9f;
}

.btn_large.black {
    background: #333;
}

.btnWrap > a {
    margin-left: 7px;
    vertical-align: middle;
    cursor: pointer;     text-decoration: none;
}

.btn_large {
    display: inline-block;
    min-width: 101px;
    height: 45px;
    padding: 0 36px;
    font-size: 16px;
    line-height: 45px;
    text-align: center;
    color: #fff;
    box-sizing:border-box;
}

/* member */
.ro {background: #eee !important;}

.login_box{width:100%;max-width:430px;margin:0 auto 25px;overflow:hidden;}
.login_box .input_box{float:left;width:300px}
.login_box .submit_box{float:left;padding-left:10px}
.login_box input[type=text],.login_box input[type=password],.login_box input[type=email]{width:300px;height:50px;padding:0 14px;border:1px solid #dfdfdf;border-radius:3px;font-size:16px;color:#444;margin-bottom:10px}
.login_box input[type=submit]{width:120px;height:110px;background: linear-gradient(0.35turn, #4aaaf6, #0e5bdc);color:#fff;font-size:16px;border:0;border-radius:3px; white-space: normal;cursor: pointer;}
/*
.login_box input[type=submit]:hover {background: linear-gradient(to right, #007991, #78ffd6); cursor: pointer;border:0;}
*/

.login_txt{overflow:hidden;width:100%;max-width:430px;margin:0 auto;font-size:14px;line-height:30px;color:#444;margin-bottom:10px}

/* 소셜로그인 */
.login_sns {display:table; table-layout: fixed; width:100% ;max-width:430px; overflow: hidden; margin: 0 auto;}
.login_sns li {display: table-cell; text-align: center;}
.login_sns li a{display: block;  margin-bottom: 30px;}

.login_sns .login_sns_img{display:inline-block; background:url("../images/icon/login_social.png") no-repeat; width: 44px; height: 44px; text-align:center; vertical-align: middle;}
.login_sns .icon_naver {background-position: 0 0;}
.login_sns .icon_kakao {background-position: -46px 0;}

.login_sns .sns_name {display:block; margin-top: 5px; font-size:11px; line-height: 1.5; color: #666; letter-spacing: -0.5px;}




.id_find_box{width:100%;max-width:430px;margin:0 auto 25px;/* overflow:hidden; */}
.id_find_box .input_box{float:left;width:300px}
.id_find_box .submit_box{float:left;padding-left:10px}
.id_find_box input[type=text],.id_find_box input[type=password],.id_find_box input[type=email]{width:300px;height:50px;padding:0 14px;border: 1px solid #717171;;border-radius:3px;font-size:16px;color:#444;margin-bottom:10px}
.id_find_box input[type=button]{width:120px;height:110px;background: linear-gradient(0.35turn, #4aaaf6, #0e5bdc);color:#fff;font-size:16px;border:0;border-radius:3px; white-space: normal;cursor: pointer;}
.id_find_box input[type=text]::placeholder,.id_find_box input[type=password]::placeholder,.id_find_box input[type=email]::placeholder {color:#717171;opacity:1;}
/*
.id_find_box input[type=button]:hover {background: linear-gradient(to right, #007991, #78ffd6); cursor: pointer;border:0;}
*/

.pw_find_box{width:100%;max-width:430px;margin:0 auto 25px;overflow:hidden;}
.pw_find_box .input_box{float:left;width:300px}
.pw_find_box .submit_box{float:left;padding-left:10px}
.pw_find_box input[type=text],.pw_find_box input[type=password],.pw_find_box input[type=email]{width:300px;height:50px;padding:0 14px;border:1px solid #dfdfdf;border-radius:3px;font-size:16px;color:#444;margin-bottom:10px}
.pw_find_box input[type=button]{width:120px;height:170px;background: linear-gradient(0.35turn, #4aaaf6, #0e5bdc);color:#fff;font-size:16px;border:0;border-radius:3px; white-space: normal;cursor: pointer;}

/*
.pw_find_box input[type=button]:hover {background: linear-gradient(to right, #007991, #78ffd6); cursor: pointer;border:0;}*?
*/

.login_txt{overflow:hidden;width:100%;max-width:430px;margin:0 auto;font-size:14px;line-height:30px;color:#666;margin-bottom:10px}
.login_txt a{float:right;width:160px;height:30px;font-size:12px;color:#333;line-height:30px;background-color:#fff;border:1px solid #cbcbcb;border-radius:2px;text-align: center;}
.pi_box{width:100%;max-width:500px;margin:0 auto 25px;text-align:center}
.pi_box input[type=text]{width:430px;height:50px;padding:0 14px;border:1px solid #dfdfdf;border-radius:3px;font-size:16px;color:#444;margin-bottom:10px}
.step_box{width:100%;max-width:500px;margin:0 auto;background-color:#eee;border:1px solid #ddd;border-radius:10px}
.ul_step_box{overflow:hidden;max-width:348px;margin:0 auto}
.ul_step_box > li{float:left;height:60px;line-height:60px;font-size:16px;font-weight:700;color:#999}
.ul_step_box > li.act{color:#18396a}
.ul_step_box > li:after{content:"/";margin:0 24px;color:#999999 !important}
.ul_step_box > li:last-child:after{display:none}
.agree_txt{background-color:#f8f8f8;border:1px solid #ddd;border-radius:5px;font-size:14px;line-height:22px;color:#666;padding:18px 18px;height:140px;overflow-y:scroll;margin-top:8px}
.btn_next{background-color:#444;width:200px;height:50px;line-height:50px;color:#fff;font-size:14px;border:0}
#join_step2 .info_box{margin-top:60px;margin-bottom:50px}
.join_box{max-width:800px;margin:0 auto}
.join_box .form-type{overflow:hidden;margin-bottom:10px}
.form-type .label-area{float:left;width:150px;padding-right:10px}
.form-type .input-area{float:left;width:650px}
.form-type .label-area label{display:inline-block;width:100%;height:40px;line-height:40px;vertical-align:middle;font-size:15px;font-weight:700;color:#666; text-align:left;} .small{height:30px !important;}
.form-type .label-area label span{color:#ff6b5c;}
.star {color:#ff6b5c}
.form-type .label-area label small{font-weight:400}
.form-type .input-area input[type=text], .form-type .input-area input[type=tel], .form-type .input-area input[type=id],
.form-type .input-area input[type=password]{width:60%;height:40px;border:1px solid #ddd;border-radius:3px;padding:0 10px} .small{height:30px !important;}

.form-type .input-area input[type=email]{width:19%;height:40px;border:1px solid #ddd;border-radius:3px;padding:0 10px} .small{height:30px !important;}
.email_select{width:18%;height:40px;border:1px solid #ddd;border-radius:3px;padding:0 10px; vertical-align: top;} .small{height:30px !important;}

.tarea {height:200px;border:1px solid #ddd;border-radius:3px;padding:10px; width:100%;}
select {width:60%;height:40px;border:1px solid #ddd;border-radius:3px;padding:0 10px}
.pi_update #user_pw, .pi_update #new_user_pw, .pi_update #new_user_pw_check{width:300px}
#frm_join_act > p{font-size:13px;color:#ff4300;margin-bottom:10px;}
.btn_join{width:110px;height:40px;vertical-align:top;margin-left:4px;color:#666;font-size:14px}

/* 파일 업로드 버튼 */  
.file_input_div { position:relative; width:100%; height:34px; overflow:hidden; } 
.file_input_hidden{ font-size:45px; position:absolute; top:0; left:0; opacity:0; width:100%; height:34px !important; filter:alpha(opacity=0);  -ms-filter: "alpha(opacity=0)";  -khtml-opacity: 0;  -moz-opacity: 0;  cursor:pointer;  padding:0 !important; z-index:100; } 
.file_input_hidden:focus .file_input_button { border:1px solid #000; } 
.file_input_button {position:absolute; top:0; right:0; color:#333; background-color:#eee; font-size:14px; line-height:14px; width:80px; height:34px;} 
.file_input_textbox{width:calc(100% - 60px); min-height: 30px;  border:1px solid #d8dce0; background: none; color: #666;}




/* FAQ 파일 업로드 버튼 */
.pg_list_table .file_input_div { position:relative; width:100%; height:32px; overflow:hidden; } 
.pg_list_table .file_input_hidden{ font-size:45px; position:absolute; top:0; left:0; opacity:0; width:100%; height:32px !important; filter:alpha(opacity=0);  -ms-filter: "alpha(opacity=0)";  -khtml-opacity: 0;  -moz-opacity: 0;  cursor:pointer;  padding:0 !important; z-index:100; } 
.pg_list_table .file_input_hidden:focus .file_input_button { border:1px solid #000; } 
.pg_list_table .file_input_button {position:absolute; top:0; right:0; color:#333; background-color:#eee; font-size:14px; line-height:14px; width:80px; height:32px;} 
.pg_list_table .file_input_textbox{width:calc(100% - 60px); min-height: 32px;  border:1px solid #d8dce0; background: none; color: #666;}




.submit-type{text-align:center}
.membership_txt{font-size:13px;color:#666;    word-wrap: break-word;
    word-break: break-all; }
.join_done{border:2px solid #ddd;padding:7% 5% 5%;max-width:800px;margin:0 auto;text-align:center}
.readon{background:transparent !important;border:0 !important}
.bam {vertical-align: middle;}
.tac {text-align: center;}

.mtm3 {margin-top: -3px;}
.ml20 {margin-left: 20px;}
.pt12 {padding-top:12px;}
.mt50 {margin-top:50px;}
.mt15 {margin-top:15px;}
.pt20 {padding:20px !important}

@media (max-width:1096px){
    .form-type{}
    .form-type .label-area{float:left;width:100%;padding-right:0}
    .form-type .input-area{float:left;width:100%}
    .form-type .label-area label {width:100%;height:30px;line-height:30px;background-color:#fff;padding-left:0;border:0;border-radius:0;font-size:14px;font-weight:700}
    .form-type .label-area select {width:100%;height:30px;line-height:30px;background-color:#fff;padding-left:0;border:0;border-radius:0;font-size:14px;font-weight:700}
    .form-type .input-area input[type=text],.form-type .input-area input[type=email], .form-type .input-area input[type=tel],
    .form-type .input-area input[type=password]{width:100%}
    .form-type #zip,.form-type #user_membership, .form-type select{width:100%}
    .pi_update #user_pw, .pi_update #new_user_pw, .pi_update #new_user_pw_check{width:100%}

.dropuser_id #userId {width: 100% !important;}


#email {
	width:53% !important;
}

#email2 {
	width:40% !important; float:right;
}

#email3 {
	margin-top:5px !important;
}

.membership_txt {
display:block; margin-top:4px;
}

#relation-input {width:100% !important;}

    #userId {width: 60%;}
    .mui {width: 100% !important;}
    .btn_join{margin-left:0;}
    .form-type .label-area label {text-align:left;}
    
.wi2555 {width:35% !important;}
.wi5555 {width:65% !important;}    
   
}


@media (max-width:600px){
.wi2555 {width:100% !important;}
.wi5555 {width:100% !important;}

.ex_box2 {
    margin-top: 
}





}


@media (max-width:480px){
	.form-type .label-area label {text-align:left;}
    .login_box .input_box{float:none;width:100%}
    .login_box .submit_box{float:none;padding-left:0}
    .login_box input[type=text],.login_box input[type=password]{width:100%;height:44px;padding:0 12px;font-size:14px}
    .login_box input[type=submit]{width:100%;height:46px;font-size:14px}



    .id_find_box .input_box{float:none;width:100%}
    .id_find_box .submit_box{float:none;padding-left:0}
    .id_find_box input[type=text],.id_find input[type=password]{width:100%;height:44px;padding:0 12px;font-size:14px}
    .id_find_box input[type=submit]{width:100%;height:46px;font-size:14px}
	.id_find_box input[type=button]{width:100%;height:46px;font-size:14px}
	
    .pw_find_box .input_box{float:none;width:100%}
    .pw_find_box .submit_box{float:none;padding-left:0}
    .pw_find_box input[type=text],.pw_find_box input[type=password]{width:100%;height:44px;padding:0 12px;font-size:14px}
    .pw_find_box input[type=submit]{width:100%;height:46px;font-size:14px}
    .pw_find_box input[type=button]{width:100%;height:46px;font-size:14px}


    .login_txt{text-align:center;font-size:14px;line-height:30px;margin-bottom:10px}
    .login_txt a{float:none;display:block;margin:0 auto}
    .ul_step_box{max-width:260px}
    .ul_step_box > li{height:54px;line-height:54px;font-size:13px}
    .ul_step_box > li:after{margin:0 14px}
    .agree_txt{font-size:13px;line-height:20px;padding:15px}
    #join_step2 .info_box{margin-top:40px;margin-bottom:28px}
    .join_done{padding:30px 22px;max-width:800px;margin:0 auto;text-align:center}
    .btn_next{width:160px;height:46px;line-height:46px;font-size:13px}
}
@media (max-width:400px){
    .submit-type .btn_next{width:100%;margin-bottom:5px}
}

/* 커서추가 12.05 */
.cursor {
	cursor:pointer;
}

/*============= 
20190125
계좌제 아이디 
**연동버튼추가**
============*/
.accountId-area{display: flex; align-items: stretch;}
.accountId-area > input{margin-right: 0px !important; width: 46% !important;}
.accountId-area > span{white-space: nowrap;}
.accountId-area > span >a {padding: 10px; display: inline-block; background: #3d8b98; color: #fff; font-size: 16px; cursor: pointer; transition:all .3s; height: 40px;}
.accountId-area > span >a:hover{background:#2c6069;}
.accountId-area > span > .accountId{background:#dddddd; color: #333; cursor: not-allowed;}
.accountId-area > span > .accountId:hover{background:#dddddd;}


/* 반응형 */
@media (max-width: 1096px){
.accountId-area > input{width: 100% !important;}	
}


/* 회원가입 팝업 */
.intro_joinP{ text-align:center;}
.intro_joinP h3{font-size: 35px; font-weight: bold;      display: inline-block;
    margin: 0px;}

.cb, .rb {
    display: inline-flex;
    color: teal;
    font-weight: 700;
    margin-bottom: 15px;
    font-size: 13px;
    cursor: pointer;
}

.cb input, .rb input {
    width: 0;
    height: 0;
    display: none;
}

.cb .cb-field, .cb .rb-field, .rb .cb-field, .rb .rb-field {
    width: 1.5em;
    height: 1.5em;
    background-color: white;
    position: relative;
}

.rb .rb-field {
    border-radius: 100%;
    border:1px solid #eee;
}

.cb .cb-text, .cb .rb-text, .rb .cb-text, .rb .rb-text {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    margin-left: .5em;
}

.rb.fill .rb-field:before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
    background-color: teal;
    border-radius: 100%;
    transition: all .1s linear;
}

.rb.fill input:checked + span:before {
    width: 70%;
    height: 70%;
    top: 15%;
    left: 15%;
}

/* 버튼 */
.button-one, .button-two, .button-three {
    text-align: center;
    cursor: pointer;
    font-size: 17px;
}

.button-two {
  
  background-color:#008080;
  border: none;
  padding: 15px;
  width: 190px;
  transition: all 0.5s;
  border: 1px solid #008080;
  
}


.button-two span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
  color:#fff;
  font-size:13px;
}

.button-two span:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 1px;
  right: -15px;
  transition: 0.5s;
}

.button-two:hover span {
  padding-right: 15px;
}

.button-two:hover span:after {
  opacity: 1;
  right: 0;
}
.intro_joinP .form-type{height: 65px;}
.joinP_body{border: 15px solid #008080; width: 470px; height: 470px;}
.joinP_area{margin-top: 52px;}
.joinP_txtarea{margin-bottom: 27px;}
.joinP_txtarea p {font-size: 15px; padding: 0 38px;}
.joinP_first_txt{display: inline-block; background: #008080; padding: 5px; color: #fff; letter-spacing: -2px;}
.joinP_second_txt{letter-spacing: 65px; text-align: center; text-indent: 62px; margin-bottom: 30px !important; color: #008080;}
.ff-magun{font-family:"malgun-gothic";}


/* 회원가입 약관동의 */
.clauseArea {width: 100%; padding: 1em; border-top: 1px solid #cbcbcb; border-bottom: 1px solid #cbcbcb; background-color: #f9f9f9;}
.clauseArea .clauseTit {margin-bottom: 20px;}
.clauseArea .clauseTit .clausetxt {color:#333; font-weight: 700; float: left; letter-spacing: -1px; line-height: 1.4em; font-size: 16px; width: 60%;}
.clauseArea .clauseTit .clausebtn {padding-top: 0.2em; float: right;}
.clauseArea .clauseTit .clausebtn a {border: 1px solid #cbcbcb; padding:6px 10px; border-radius: 3px; font-size: 14px; color:#666; cursor: pointer;}
.clauseArea .clauseTit .clausebtn a:hover {border: 1px solid #666; color:#333;}
.clauseArea .clauseTit:after {display: block; clear:both; content: "";}

.clauseArea .clauseAgree {margin-top: 0.5em; text-align: right;margin-top: 20px;}
.clauseArea .clauseAgree li {display: inline; padding-left: 20px;}



.privacy_box .bluetxt{font-size: 20px; color: #1c6ee2; font-weight: bold; line-height: 27px;}

.form_btn .btn.submit{background-color:#2b52a5;color:#fff;}
.form_btn .btn.cancel{background-color:#fff;color:#000;border:1px solid #000;line-height:58px;}
.form_type1 .form_box .row + .row{margin-top:10px;}
.form_type1 .form_box .row .ip_group{}
.form_type1 .form_box .row input[type="text"],
.form_type1 .form_box .row input[type="password"],
.form_type1 .form_box .row input[type="tel"],
.form_type1 .form_box .row input[type="email"],
.form_type1 .form_box .row input[type="text"]{width:100%;border-radius:2px;border:1px solid #d0d0d0;padding-left:19px;height:50px;font-size:1.4rem;}
.form_type1 .form_box .row input[type="text"]:focus,
.form_type1 .form_box .row input[type="password"]:focus,
.form_type1 .form_box .row input[type="tel"]:focus,
.form_type1 .form_box .row input[type="email"]:focus,
.form_type1 .form_box .row input[type="text"]:focus{color:#999;}
.form_type1 .form_box .row input[type="password"]{}
.form_type1 .form_box .row input[type="tel"]{}
.form_type1 .form_box .row input[type="email"]{}
.form_btn .btn{height:60px;line-height:60px;}
.form_btn{margin-top:20px;position: relative;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: stretch;-ms-flex-align: stretch;align-items: stretch;}
.form_btn .btn{display:;text-align:center;border-radius:2px;font-size:1.5rem;border:0;}
.form_btn .btn + .btn{margin-left:10px;}
.form_btn .btn.submit{background-color:#2b52a5;color:#fff;}
.form_btn .btn.cancel{background-color:#fff;color:#000;border:1px solid #000;line-height:58px;}
.form_type1 .form_box .row input[type="text"]{width:100%;border-radius:2px;border:1px solid #d0d0d0;padding-left:19px;height:50px;font-size:1.4rem;}