@charset "utf-8";
/*------------------------------------------------------------------------------------------------------------------------------------------
	File : ui.css
	Company : HanaTI
 	Author : Ryu,Keonmu & Yeon,DoHee  2019-11
 	CSS 적용순서 : 아이디 > 태그와 클래스 > 클래스 > 태그
	CSS 선택자 선언순서 : Type Selector, Layout Selector, Class Selector, Etc
	CSS 속성 선언순서 : display, position, float/clear, overflow, width/height, margin/padding, border, color/font, align, backgroun etc
--------------------------------------------------------------------------------------------------------------------------------------------*/
* {-webkit-tap-highlight-color:rgba(0,0,0,0);}

/* a */
a {color:#555555; text-decoration:none;}
a:active, a:visited, a:link {color:#555555;}
a:hover {color:#555555;}

a.link {text-decoration:underline;}
a.select_style {
	display:block;
	overflow:hidden;
	height:2.4rem; 
	padding:0 2em 0 0.8rem;
	border:1px solid #cccccc;
	border-radius:0.375rem;
	font-size:0.8rem;
	line-height:2.3rem;
	color:#000000; 
	background:#ffffff url('../img/btn_down_select.png') right 0.8rem center no-repeat; 
	background-size:1.2rem auto;
	word-break:break-all;
	outline:0;
}
a.select_style:focus {border:1px solid #009591;}
a.select_style.disabled {border:1px solid #dddddd; color:#767676; background-color:#f3f4f5;}

a.select_multi_style {
	display:block;
	overflow:hidden;
	height:2.4rem; 
	padding:0 2em 0 0.8rem;
	border:1px solid #cccccc;
	border-radius:0.375rem;
	font-size:0.8rem;
	line-height:2.3rem;
	color:#000000; 
	background:#ffffff url('../img/btn_down_select.png') right 0.8rem center no-repeat; 
	background-size:1.2rem auto;
	word-break:break-all;
	outline:0;
}
a.select_multi_style:focus {border:1px solid #009591;}
a.select_multi_style.disabled {border:1px solid #dddddd; color:#767676; background-color:#f3f4f5;}


/* label */
label {color:#000000; font-size:0.7rem; line-height:1rem; font-weight:500;}
.label {color:#000000; font-size:0.7rem; line-height:1rem; font-weight:500;}

/* select */
select {
	width:100%;
	height:2.4rem;
	padding:0 2rem 0 0.8rem;
	border:none;
	border:1px solid #cccccc;
	border-radius:0.3rem;
	font-size:0.8rem;
	color:#000000;
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	-o-appearance:none;
	outline:0;
	background:url('../img/bg_select_arrow.png') right 0.8rem center no-repeat;
	background-size:1.2rem auto;
	background:none\9;
	background-color:#ffffff;
	font-family:'NotoSans';
}
select optgroup {display:none;}
select.white {background:url('../img/bg_select_arrow_white.png') right center transparent no-repeat; background-size:1.5rem auto;}
/*
:root select {padding:6px 9px 6px 15px \0/IE9; font-size:15px \0/IE9;}
*/

select::-ms-expand {display:none;}
select:focus {border:1px solid #009591;}
select:disabled {border:1px solid #dddddd; color:#767676; background:#f3f4f5;}

/* input */
input {
	border:0px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-o-box-sizing:border-box;
	outline:0;
}

input[type=radio], input[type=checkbox] {border:none;}

/* input[type=text], input[type=password], input[type=date], input[type=tel], input[type=number], input[type=email], input[type=search] {
	-webkit-appearance:none;
	-moz-appearance:none;
	-o-appearance:none;
	appearance:none;
	width:100%;
	height:2.4rem;
	padding:0 0.8rem 0 0.8rem;
	border:none;
	border:1px solid #cccccc;
	border-radius:0.375rem;
	font-size : 0.8rem;
	color:#000000;
	background-color:#ffffff;
	letter-spacing:-1px;
} */



input[type=text], input[type=password], input[type=date], input[type=tel], input[type=number], input[type=email], input[type=search] {
	-webkit-appearance:none;
	-moz-appearance:none;
	-o-appearance:none;
	appearance:none;
	width:100%;
	height:2.4rem;
	padding:0 0.8rem 0 0.8rem;
	border:none;
	border:1px solid #cccccc;
	border-radius:0.375rem;
	/*font-size:0.8rem;*/
	font-size : 0.8rem;
	color:#000000;
	background-color:#ffffff;
	letter-spacing:-1px;

}
@media screen and (max-device-width : 320px) {
	select, textarea, input[type=text], input[type=password], input[type=date], input[type=tel], input[type=number], input[type=email], input[type=search] {font-size:16px;}
	
}
input[type=text]:focus, input[type=password]:focus, input[type=date]:focus, input[type=tel]:focus, input[type=number]:focus, input[type=email]:focus, input[type=search]:focus {border:1px solid #009591;}
input[type=text]:disabled, input[type=password]:disabled, input[type=date]:disabled, input[type=tel]:disabled, input[type=number]:disabled, input[type=email]:disabled, input[type=search]:disabled {border:1px solid #dddddd; color:#767676; background:#f3f4f5; opacity:1; -webkit-text-fill-color:inherit;}
input[type=text]:read-only, input[type=password]:read-only, input[type=date]:read-only, input[type=tel]:read-only, input[type=number]:read-only, input[type=email]:read-only, input[type=search]:read-only {border:1px solid #dddddd; color:#767676; background:#f3f4f5;}
input[type=date] {background:transparent url('../img/btn_calendar.png') right 0.8rem center no-repeat; background-size:1rem;}
input[type=text].selec {background:transparent url('../img/btn_popover_close.png') right 0.8rem center no-repeat; background-size:1rem;}

/* input[type=search] remove delete button */
input::-ms-clear,
input::-ms-reveal {
	display:none; width:0; height:0;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration{
	display:none;
}

/* Placeholder Color */
:-ms-input-placeholder {color:#757575; letter-spacing:-1px;} /* IE 10 + */
::-webkit-input-placeholder {color:#757575; letter-spacing:-1px;} /* Webkit Browser */
:-moz-placeholder {color:#757575; letter-spacing:-1px;}	/* Mozilla Firefox 4 to 18*/
::-moz-placeholder {color:#757575; letter-spacing:-1px;} /* Mozilla Firefox 19+ */
::placeholder  {color:#757575; letter-spacing:-1px;}

/*input:-webkit-placeholder-shown {border:5px solid #000;}*/

/* input - autocomplete background color */
input:-webkit-autofill {
    -webkit-box-shadow: inset 0 0 0px 9999px white;
}

 input[type='date']::-webkit-calendar-picker-indicator,
 input[type='date']::-webkit-inner-spin-button {
	display: none;
	appearance: none;
 }

[contenteditable='false'] {
	color:#767676;
    caret-color:#767676;
}

/* input design DIV for secret keypad */
.fake_input {
	width:100%;
	height:2.4rem;
	padding:0 0.8rem 0 0.8rem;
	border:none;
	border:1px solid #dddddd;
	border-radius:0.375rem;
	font-size:0.8rem;
	line-height:2.3rem;
	color:#767676;
	background-color:#f3f4f5;
	letter-spacing:-1px;
}
.fake_input:focus {border:1px solid #009591;}



.input_wrap {position:relative; /*z-index:1;*/}
.input_wrap input.readonly {border-color:#cccccc; background:#ffffff;}
.input_wrap.placeholder input {background-color:transparent\9;}
.input_wrap.placeholder input:focus {background-color:#ffffff\9;}
.input_wrap.placeholder input[value^=''] {background-color:#ffffff\9;}
.input_wrap.placeholder label {
	display:none;
	display:block\9;
	position:absolute; left:0; top:1px;	z-index:-1;
	width:100%;
	font-size:0.75rem; line-height:1.125rem; color:#999999; text-align:left;
}
.input_tel:after {content:''; display:block; clear:both;}
.input_tel .tel1 {float:left; width:34%; padding-right:10px;}
.input_tel .tel2 {float:left; width:34%; padding-right:10px;}
.input_tel .tel3 {float:left; width:32%;}
.input_tel input {text-align:center;}

/* textarea */
textarea {
	width:100%;
	height:4.8rem;
	padding:0.6rem 0.8rem;
	border-radius:0.375rem;
	border:1px solid #cccccc;
	background:#ffffff;
	font-size:0.8rem;
	vertical-align:middle;
	letter-spacing:-1px;
	resize:none;
	-webkit-appearance:none;
}
textarea:focus {outline:none !important; border:1px solid #009591;}

/* Radiobox */
.radio_wrap {position:relative; padding-left:1.4rem;}
.radio_wrap input[type=radio] {position:absolute; left:0; top:0; z-index:1; overflow:hidden; width:0; height:0; font-size:0; line-height:0;}
.radio_wrap input[type=radio] + label {display:inline-block; font-size:0.7rem; font-weight:normal; line-height:1rem; cursor:pointer; color:#000000;}
.radio_wrap input[type=radio] + label:after {content:""; display:inline-block; position:absolute; left:0; top:50%; z-index:1; width:1rem; height:1rem; margin-top:-0.5rem; cursor:pointer; background:url('../img/img_radio.png') left 50% no-repeat; background-size:1rem auto !important;}
.radio_wrap.checked input[type=radio] + label:after {background:url('../img/img_radio_active.png') 50% 50% no-repeat;}

/* Radiobox btn type */
.input_wrap	.radio_group {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;}
.input_wrap	.radio_group.default_type {justify-content:start;}
.input_wrap	.radio_group + .radio_group {margin-top:0.4rem;}
.input_wrap label + .radio_wrap {margin-top:0.3rem;}
.radio_group .radio_wrap + .radio_wrap {margin-left:0.4rem;}
.input_wrap	.radio_group.default_type .radio_wrap label,
.input_wrap	.radio_wrap.default_type label {padding-bottom:0;}
/* 2024 웹접근성 - 기존 버튼 수정 ( 선택 안했을때 - #eee) */
.radio_wrap.btn_type {position:relative; padding-left:0; flex:1 1 0; background: #eee; border-radius: 0.375rem;}

.radio_wrap.btn_type.one_up {width:calc(50% - 0.2rem); flex:none;}
.radio_wrap.btn_type input[type=radio] + label {display:inline-block; position:relative; width:100%; height:2rem; border-radius:0.375rem; font-size:0.7rem; font-weight:normal; line-height:2rem; cursor:pointer; color:#757575; text-align:center;}
.radio_wrap.btn_type input[type=radio] + label:after {content:""; display:inline-block; position:absolute; left:0; top:0; z-index:1; width:100%; height:2rem; margin-top:0; cursor:pointer; border:1px solid #cccccc; border-radius:0.375rem; background:none;}
/* 2024 웹접근성 */
.radio_wrap.btn_type.checked input[type=radio] + label {font-weight:500; color:#009178; background:#fff;}
.radio_wrap.btn_type.checked input[type=radio] + label:after{border-radius:0.375rem; border: 2px solid #009178;}

/* 25-06 보이스피싱 주의 안내 - 예 선택 버튼 */
.radio_wrap.btn_type.voFiYes.checked input[type=radio] + label {font-weight:500; color:#dc231e; background:#fff;}
.radio_wrap.btn_type.voFiYes.checked input[type=radio] + label:after{border-radius:0.375rem; border: 2px solid #dc231e;}


.btn_wrap .btn_group {width: 100%;}
.btn_wrap .btn_label {display: inline-block; padding-bottom: 0.3rem;}
.btn_type input[type=button] { border:1px solid #cccccc; background:white; display:inline-block; position:relative; width:100%; height:2rem; border-radius:0.375rem; font-size:0.7rem; font-weight:normal; line-height:2rem; cursor:pointer; color:#757575; text-align:center;}
.btn_type input[type=button]:after {content:""; display:inline-block; position:absolute; left:0; top:0; z-index:1; width:100%; height:2rem; margin-top:0; cursor:pointer; border:1px solid #cccccc; border-radius:0.375rem; background:none;}
.btn_type.checked input[type=button] {font-weight:500; color:#009591; border-radius:0.375rem; border:1px solid #009591;} 

.radio_wrap.btn_type.style2 input[type=radio] + label {color:#666666; background:#eeeeee;}
.radio_wrap.btn_type.style2 input[type=radio] + label:after {border:0;}
/* 2024 웹접근성 */
.radio_wrap.btn_type.style2.checked input[type=radio] + label {color:#009178 !important;}
.radio_wrap.btn_type.style2.checked input[type=radio] + label:after {border-radius:0.375rem; border: 2px solid #009178 !important;}

/* Radiobox account type */
.radio_account_box {position:relative;}
.radio_account_box .radio_wrap {padding:0;}
.radio_account_box .radio_wrap + .radio_wrap {margin-top:0.4rem;}
.radio_account_box .radio_wrap input[type=radio] + label:after {left:0.8rem; top:1.2rem; margin-top:0;}
.radio_account_box .radio_wrap label {display:inline-block; width:100%; padding:1rem 0.8rem 1rem 2.2rem; border-radius:0.375rem; border:1px solid #cccccc;}
.radio_account_box .radio_wrap label > span {display:inline-block; width:100%; font-size:0.8rem; font-weight:normal; line-height:1.1rem; color:#000000;}
.radio_account_box .radio_wrap label > em {display:block; font-family:'Roboto'; font-size:0.7rem; font-weight:normal; line-height:1rem; color:#666666; letter-spacing:-0.5px;}
.radio_account_box .radio_wrap label > span > strong {display:inline-block; padding-top:0.5rem; font-family:'Roboto'; font-size:0.9rem; font-weight:500; line-height:1.2rem; color:#000000; letter-spacing:-0.5px;}
.radio_account_box_del {position:relative;}
.radio_account_box_del + .radio_account_box_del {margin-top:0.4rem;}
.radio_account_box_del .inner {display:inline-block; width:100%; padding:1rem 0.8rem 1rem 0.8rem; border-radius:0.375rem; border:1px solid #cccccc;}
.radio_account_box_del .inner > span {display:inline-block; width:100%; font-size:0.8rem; font-weight:normal; line-height:1.1rem; color:#000000;}
.radio_account_box_del .inner > em {display:block; font-family:'Roboto'; font-size:0.7rem; font-weight:normal; line-height:1rem; color:#666666; letter-spacing:-0.5px;}
.radio_account_box_del .inner > span > strong {display:inline-block; padding-top:0.5rem; font-family:'Roboto'; font-size:0.9rem; font-weight:500; line-height:1.2rem; color:#000000; letter-spacing:-0.5px;}
.radio_account_box_del button.btn_del {position:absolute; right:0.3rem; top:50%; z-index:1; width:2rem; height:2rem; margin-top:-1rem; text-indent:-9999px; background:url('../img/ico_remove.png') 50% 50% no-repeat; background-size:1rem auto;}
.radio_account_box_del.no_data {padding:1.5rem 0; border-radius:0.375rem; border:1px solid #cccccc; font-size:0.7rem; font-weight:normal; line-height:1rem; color:#666666; text-align:center;}

/* Radiobox Tab */
/*
.radioTab {display:flex; justify-content:space-between; align-items:center; position:relative; margin-bottom:1rem; border:1px solid #eeeeee; border-radius:0.2rem; overflow:hidden;}
.radioTab .radio_wrap {position:relative; flex:1 1 0; padding-left:0;}
.radioTab .radio_wrap input[type=radio] + label {display:inline-block; width:100%; font-size:0.7rem; font-weight:normal; line-height:2.2rem; cursor:pointer; color:#666666; text-align:center;}
.radioTab .radio_wrap input[type=radio] + label:after {content:""; display:inline-block; position:absolute; left:0; top:0; z-index:1; width:100%; height:2.2rem; margin-top:0; cursor:pointer; background:none;}
.radioTab .radio_wrap.checked input[type=radio] + label {color:#ffffff; background:#808988;}
.radioTab .radio_wrap:first-child {border-right:1px solid #eeeeee;}
.radioTab .radio_wrap.checked:first-child {border-right:0;}
.radioTab .radio_wrap:nth-child(2n-1) {border-left:1px solid #eeeeee;}
.radioTab .radio_wrap.checked:nth-child(2n-1) {border-left:0;}
.radioTab .radio_wrap.checked:nth-child(2) ~ .radio_wrap {border-left:0;}
.radioTab .radio_wrap.checked:nth-child(2) {margin-left:-1px;}
*/
.radioTab {display:flex; justify-content:space-between; align-items:center; position:relative; margin-bottom:1rem;}
.radioTab .radio_wrap {position:relative; flex:1 1 0; padding-left:0;}
.radioTab .radio_wrap input[type=radio] + label {
	display:inline-block; 
	width:100%; height:2.3rem;
	border:1px solid #eeeeee;
	border-right:0;
	font-size:0.7rem; line-height:2.2rem; font-weight:normal; cursor:pointer; color:#666666; text-align:center;
}
.radioTab .radio_wrap input[type=radio] + label:after {content:""; display:inline-block; position:absolute; left:0; top:0; z-index:1; width:100%; height:2.2rem; margin-top:0; cursor:pointer; background:none;}
.radioTab .radio_wrap.checked input[type=radio] + label {border-color:#808988 !important; color:#ffffff; background:#808988;}
.radioTab .radio_wrap.checked ~ .radio_wrap label {border-left:0; border-right:1px solid #eeeeee;}
.radioTab .radio_wrap:first-child input[type=radio] + label {border-radius:0.2rem 0 0 0.2rem;}
.radioTab .radio_wrap:last-child input[type=radio] + label {border-right:1px solid #eeeeee; border-radius:0 0.2rem 0.2rem 0;}


/* Radiobox List(box) Type*/
/*
.radio_list {padding-top:0.75rem;}
.radio_list .radio_wrap {position:relative; z-index:1; padding-left:0; margin-top:-1px; border:1px solid #333333; outline:0;}
.radio_list .radio_wrap input[type=radio] {position:absolute; left:-9999px; top:0; z-index:1; overflow:hidden; width:0; height:0; font-size:0; line-height:0;}
.radio_list .radio_wrap input[type=radio] + label {display:block; position:relative; padding:1.25rem; font-size:1rem; color:#ffffff; outline:0; line-height:1.5; cursor:pointer;}
.radio_list .radio_wrap input[type=radio] + label:after {display:none;}
.radio_list .radio_wrap.checked {z-index:2; border:1px solid #cccccc; background:transparent;}
.radio_list .radio_wrap.checked input[type=radio] + label:after {display:none;}
.radio_list.box3:after {content:''; display:block; clear:both;}
.radio_list.box3 .radio_wrap {float:left; width:33.33333%; margin:-1px -1px 0 0;}
.radio_list.box3 .radio_wrap input[type=radio] + label {padding:1.25rem 0; font-size:0.875rem; text-align:center;}
*/

/* checkbox */
.check_wrap {position:relative; padding-left:1.4rem;}
.check_wrap input[type=checkbox] {position:absolute; left:0; top:0; z-index:1; overflow:hidden; width:0; height:0; font-size:0; line-height:0;}
.check_wrap input[type=checkbox] + label {display:inline-block; font-size:0.7rem; line-height:1rem; cursor:pointer; color:#333333;}
/* 25-07 웹접근성 : img_check.png 이미지변경, 경로수정 */
.check_wrap input[type=checkbox] + label:after {content:""; display:inline-block; position:absolute; left:0; top:50%; z-index:1; width:1rem; height:1rem; margin-top:-0.5rem; cursor:pointer; background:url('../img/img_check_.png') left 50% no-repeat; background-size:1rem auto !important;}
.check_wrap.checked input[type=checkbox] + label:after {background:url('../img/img_check_active.png') left 50% no-repeat;} /* ie8 */

/*26-02-10 선택 불가능한 체크박스의 처리 방식 추가 */
.check_wrap input[type=checkbox]:disabled + label:after {content:""; display:inline-block; position:absolute; left:0; top:50%; z-index:1; width:1rem; height:1rem; margin-top:-0.5rem; cursor:pointer; background:url('../img/img_check_readonly.png') left 50% no-repeat; background-size:1rem auto !important;}


.check_wrap.favorite {display:inline-block; vertical-align:top;}
.check_wrap.favorite input[type=checkbox] + label:after {top:0.4rem; width:1.2rem; height:1.2rem; background:url('../img/ico_favorite.png') 50% 50% no-repeat; background-size:1.2rem auto !important;}
.check_wrap.favorite.checked input[type=checkbox] + label:after {background:url('../img/ico_favorite_active.png') 50% 50% no-repeat;} /* ie8 */
.check_group .check_wrap + .check_wrap {margin-left:0.4rem;}

/* switch */
.switch_wrap {position:relative;}
.switch_wrap .switch {display:inline-block; position:relative; width:2.4rem; height:1.2rem; vertical-align:middle;}
.switch_wrap .switch input[type="checkbox"] {display:none;}
.switch_wrap .switch_slide {display:inline-block; position:absolute; top:0; right:0; bottom:0; left:0; border-radius:12px; background-color:#ddd; cursor:pointer;}
.switch_wrap .switch_slide:before {content:''; display:block; position:absolute; left:3px; bottom:3px; width:0.9rem; height:0.9rem; border-radius:50%; background-color:#fff; -webkit-transition:all 0.3s; transition:all 0.3s;}
.switch_wrap label > input[type="checkbox"]:checked + .switch_slide {background-color:#009591;}
.switch_wrap label > input[type="checkbox"]:checked + .switch_slide:before {-webkit-transform:translateX(1.2rem); -ms-transform:translateX(1.2rem); transform:translateX(1.2rem);}

/*----- Button -----*/
button {letter-spacing:-1px;}
.btn {
	position:relative;
	/*display:inline-flex; *display:inline; *zoom:1;*/
	display:inline-flex;
	align-items:center;
	width:100%;
	min-height:2.6rem;
	border-radius:0.4rem;
	font-size:0.8rem;
	font-weight:500;
	cursor:pointer;
	text-align:center;
	box-sizing:border-box;
	letter-spacing:-0.5px;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-o-box-sizing:border-box;
	letter-spacing:-1px;
	font-family:"NotoSans";
}
.btn>span {display:block; position:relative; height:100%; width:100%;}

.btn.mid {width:100%; min-height:2.3rem; font-size:0.7rem;}

.btn.default {border:1px solid #333333; color:#333333; background:#ffffff;}

.btn.type1 {color:#ffffff; background:linear-gradient(108deg, #16a077 0%, rgba(22, 160, 119, 0) 53%), linear-gradient(108deg, rgba(0, 149, 145, 0) 47%, #007495 100%), linear-gradient(to bottom, #009591, #009591);}
.btn.type1:active {color:#ffffff; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(108deg, rgb(22, 160, 119) 0%, rgba(22, 160, 119, 0) 53%), linear-gradient(108deg, rgba(0, 149, 145, 0) 47%, rgb(0, 116, 149) 100%), linear-gradient(to bottom, rgb(0, 149, 145), rgb(0, 149, 145));}
.btn.type1:disabled {color:#888888 !important; background:#dbdbdb !important;}

.btn.type2 {color:#ffffff; background:#8d9695;}
.btn.type2:active {color:#ffffff; background:#707877;}
.btn.type2:disabled {color:#ffffff; background:#8d9695;}

.btn.type3 {color:#009591; border:1px solid #009591; background:#ffffff;}
.btn.type3:disabled {color:#888888; border:1px solid #dbdbdb; background:#dbdbdb;}

.btn.ghost {color:#ffffff; background-color:rgba(0, 0, 0, 0.4);}
.btn.ghost:active {color:#ffffff; background-color:rgba(0, 0, 0, 0.4);}
.btn.ghost:disabled {border:solid 1px #ffffff; color:#ffffff; background:transparent;}

.btn.kakao > span,
.btn.sms > span {padding-left:1rem;}
.btn.kakao {color:#000000; background:#fee000;}
.btn.kakao:after {content:''; display:block; position:absolute; top:50%; left:1.15rem; width:1rem; height:1rem; background:url('../img/ico_kakao_sm.png') left center no-repeat; background-size:100%; transform:translateY(-50%);}
.btn.sms {color:#ffffff; background:#666666;}
.btn.sms:after {content:''; display:block; position:absolute; top:50%; left:1.75rem; width:1rem; height:1rem; background:url('../img/ico_sms_sm.png') left center no-repeat; background-size:100%; transform:translateY(-50%);}
/* 철회취서 버튼 */
.cancel_btn {position:absolute; right:24px; padding:0 0.5rem; border:1px solid #009591; border-radius:0.2rem; background:transparent; color:#009591; font-size:0.7rem; line-height:1.4rem; margin-top: 10px;}

/* 가이드 버튼 */
.btn_guide_wrap {display:flex; flex:1 1 0; margin-top:0.4rem; justify-content:space-between; align-items:center;}
.btn.btn_guide {min-height:2rem; color:#666666; border:1px solid #eeeeee; background:#eeeeee; font-size:0.7rem; letter-spacing:-1px; font-weight:normal; text-align:center;}
.btn.btn_guide > span em {font-family:'Roboto'; letter-spacing:-0.5px;}
.btn.btn_guide + .btn.btn_guide {margin-left:0.4rem;}
.btn.btn_guide:active:not(:disabled) {color:#009591; border:1px solid #009591; background:#ffffff; font-weight:500;}
.btn.btn_guide:disabled {color:#888888; border:none; background:#dbdbdb;}
/* 더보기 */
.btn_moreView {width:100%; min-height:2.3rem; border:1px solid #cccccc; border-radius:0.4rem; color:#666666; background:#ffffff; font-family:"NotoSans";}
.btn_moreView > span {position:relative; padding-right:0.5rem; font-size:0.7rem; letter-spacing:-1px;}
.btn_moreView > span:after {content:'+'; display:block; position:absolute; right:0; top:0; z-index:1;}
/* 상단바로가기 버튼 */
.moveTopBtn {display:none; width:2.5rem; height:2.5rem; text-indent:-9999px; background:url('../img/btn_move_top.png') 50% 50% no-repeat; background-size:100% auto;}
.bottom_btn_wrap .moveTopBtn {position:absolute; right:2.5rem; top:-5rem; z-index:2;}
.bottom_btn_wrap.has_moreBtn .moveTopBtn {top:-8rem;} /* 리스트에 더보기+ 버튼이 있는 경우 */
/* 툴팁버튼 (팝오버) */
.btn_popover {display:inline-block; width:1.2rem; height:1.2rem; background:url('../img/ico_tooltip.png') left top -2px no-repeat; background-size:1.2rem; vertical-align:top; text-indent:-9999px;}
.btn_popover.txt_type {display:block; position:absolute; top:0; right:0; width:auto; height:auto; padding:0 1.2rem 0 0; border:0; background:url('../img/ico_tooltip.png') right center no-repeat; background-size:1.2rem; font-size:0.7rem; color:#666666; line-height:1rem; letter-spacing:-1px; text-indent:inherit;}
/* input top 버튼 */
.input_top_btn {position:absolute; right:0; top:-0.2rem; width:auto; min-height:1.4rem; padding:0 0.5rem; z-index:1; border:1px solid #009591; border-radius:0.2rem; background:transparent; color:#009591; font-size:0.7rem; line-height:1.4rem; text-align:center; letter-spacing:-1px; font-family:'NotoSans';}
.input_top_double_btn {position:absolute; right:0; top:-0.2rem; border-radius:0.3rem;}
.input_top_double_btn .select_wrap {position:relative; float:left; width:auto;}
.input_top_double_btn .select_wrap:first-child .btn {border:1px solid #009591; border-right:0; padding:0 0.5rem; border-radius:0.2rem 0 0 0.2rem;}
.input_top_double_btn .select_wrap:last-child .btn {border:1px solid #009591; border-left:0; padding:0 0.5rem; border-radius:0 0.2rem 0.2rem 0;}
.input_top_double_btn .select_wrap:last-child:after {content:''; display:block; position:absolute; left:0; top:0; width:1px; height:100%; background:#009591;}
.input_top_double_btn .btn {float:left; width:auto; min-height:1.5rem; font-size:0.7rem; color:#009591; font-weight:normal; background:#ffffff;}
.input_top_double_btn .btn:first-child {border-radius:0.4rem 0 0 0.4rem;}
.input_top_double_btn .btn:last-child {border-radius:0 0.4rem 0.4rem 0;}
.input_top_double_btn .btn:last-child:after {content:''; display:block; position:absolute; left:0; top:0; width:1px; height:100%; background:#009591;}
/* 최대금액입력 버튼 */
.btn_max {position:absolute; right:0; top:-0.2rem; min-width:5.45rem; height:1.5rem; z-index:1; border:1px solid #009591; border-radius:0.2rem; background:transparent;}
.btn_max > span {position:relative; padding:0 0.3rem 0 1rem; color:#009591; font-size:0.7rem; line-height:1rem; letter-spacing:-1px;}
.btn_max > span:after {content:''; display:block; position:absolute; top:50%; left:0; width:1rem; height:1rem; background:url('../img/img_number.png') left top no-repeat; background-size:1rem; color:#009591; line-height:1rem; letter-spacing:-1px; transform:translateY(-50%);}
/* 받는계좌표기 버튼 */
.input_wrap .btn_send {display:block; position:absolute; right:0; bottom:1px; z-index:1; width:2.6rem; min-height:2.3rem; border-radius:0; border-left:1px solid #eeeeee; background:url('../img/btn_card.png') 50% 50% no-repeat; background-size:1rem auto;}
.input_wrap .btn_send > span {text-indent:-9999px;}

/* 텍스트 버튼 */
.btn_txt {display:flex; justify-content:center; align-items:center;}
.btn_txt > button {background:transparent;}
.btn_txt button + button {margin-left:1.5rem;}
.btn_txt span {display:inline-block; font-size:0.7rem; color:#666666; line-height:1rem; letter-spacing:-1px;}
.btn_txt .btn_kakao {min-height:1.6rem; padding-left:2rem; background:url('../img/ico_kakao.png') left top no-repeat; background-size:1.6rem auto;}
.btn_txt .btn_sms {min-height:1.6rem; padding-left:2rem; background:url('../img/ico_sms.png') left top no-repeat; background-size:1.6rem auto;}
.btn_txt .btn_transfer_add {min-height:0.6rem; padding-left:1rem; background:url('../img/ico_new.png') left center no-repeat; background-size:0.6rem auto;}
.btn_txt .btn_transfer_add span {font-weight:500; color:#000000;}
.btn_txt .btn_cancel > span {font-weight:500; color:#000000; text-decoration:underline;}
.btn_txt .btn_edit {background:url('../img/bg_arrow_right_green.png') right center no-repeat; background-size:1.2rem auto;}
.btn_txt .btn_edit > span {display:inline-block; position:relative; padding-right:1.2rem; font-size:0.7rem; color:#009591; line-height:1rem;}
.btn_txt .btn_time {background:url('../img/ico_clock_g.png') left top no-repeat; background-size:1rem auto;}
.btn_txt .btn_time > span {display:inline-block; padding-left:1rem; font-size:0.7rem; color:#009591; line-height:1rem;}
a.btn_underline, button.btn_underline {display:inline-block; font-size:0.7rem; font-weight:500; color:#009591; background:transparent; text-decoration:underline;}


/* 아이콘 버튼 */
.btn_icon {position:relative; width:1rem; min-height:1rem; text-indent:-99999px;}
.btn_icon + .btn_icon {margin-left:0.5rem;}
.btn_icon.edit {background:url('../img/ico_write.png') 50% 50% no-repeat; background-size:1rem auto;}
.btn_icon.remove {background:url('../img/ico_remove.png') 50% 50% no-repeat; background-size:1rem auto;}

.btn_wrap {*zoom:1; position:relative;}
.btn_wrap:after {content:""; display:block; clear:both;}
.btn_wrap + .btn_wrap {margin-top:0.4rem;}

/* btn double */
.btn_wrap.double {}
.btn_wrap.double > button:first-child {float:left; width:calc(50% - 0.2rem);}
.btn_wrap.double > button:last-child {float:right; width:calc(50% - 0.2rem);}
.btn_wrap.double > button.type1:first-child {background:#16a077;}
.btn_wrap.double > button.type1:last-child {background:#009591;}

/* btn double mix */
.btn_wrap.double_mix {}
.btn_wrap.double_mix > button:first-child {float:left; width:calc(38% - 0.2rem);}
.btn_wrap.double_mix > button:last-child {float:right; width:calc(62% - 0.2rem); background:#009591;}
.btn_wrap.double_mix > button:last-child:disabled {background:#dbdbdb;}

/* btn position */
.pos_cont {position:absolute; left:0; bottom:0; z-index:1; width:100%; margin-top:2rem; padding-bottom:1.2rem;}
.pos_cont.inner {padding-left:1.2rem; padding-right:1.2rem;}
.pos_fixed {position:fixed; left:0; bottom:0; z-index:1; width:100%; padding:0 1.2rem 1.2rem; /*background:#ffffff*/ background:transparent;}
.pos_fixed.pos_absolute {position:absolute; padding:0 0 1.2rem;}
.bg_gray .pos_fixed {/*background:#f9f9fb;*/ background:transparent;}

/* Tab */
.tab_wrap {position:relative; overflow:hidden; height:2.05rem; padding:0 1.2rem; border-bottom:1px solid #eeeeee;}
.tab_wrap ul {display:flex; overflow-y:auto; padding-bottom:0.5rem;}
.tab_wrap ul li {flex:1 0 0; padding:0 0.8rem;}
.tab_wrap ul li a {display:block; padding:0.3rem 0 0.7rem; font-size:0.7rem; line-height:1rem; color:#666666; text-align:center; white-space:nowrap;}
.tab_wrap ul li a span {display:inline-block; position:relative; height:100%;}
.tab_wrap ul li.active a {color:#000000;}
.tab_wrap ul li.active a span:after {content:''; display:block; position:absolute; left:-0.5rem; bottom:-0.7rem; width:100%; height:3px; box-sizing:content-box; padding:0 0.5rem; background:#009591;}
/* tab type2 */
.tab_wrap2 {position:relative;}
.tab_wrap2 > .tab_nav {display:flex; flex-wrap:wrap; align-items:center;}
.tab_wrap2 > .tab_nav li {flex:1 1 0; height:2.3rem; border-top:1px solid #eeeeee; border-bottom:1px solid #eeeeee; line-height:2.3rem;}
.tab_wrap2 > .tab_nav li + li {border-left:1px solid #eeeeee;}
.tab_wrap2 > .tab_nav li:first-child {border-left:1px solid #eeeeee; border-radius:0.4rem 0 0 0.4rem;}
.tab_wrap2 > .tab_nav li:last-child {border-right:1px solid #eeeeee; border-radius:0 0.4rem 0.4rem 0;}
.tab_wrap2 > .tab_nav li a {display:block; height:2.3rem; padding:0 0.3rem; font-size:0.7rem; color:#666666; line-height:2.3rem; text-align:center;}
.tab_wrap2 > .tab_nav li a span {display:inline-block; position:relative;}
/* 24-06 웹접근성 2차 : 탭 선택시 테두리가 두꺼워지도록 수정 */
/* 25-03 Tab background 수정 */
.tab_wrap2 > .tab_nav li.active {background: linear-gradient(108deg, #16a077 0%, rgba(22, 160, 119, 0) 53%), linear-gradient(108deg, rgba(0, 149, 145, 0) 47%, #007495 100%), linear-gradient(to bottom, #009178, #009178);}
.tab_wrap2 > .tab_nav li:first-child.active {border-left:2px solid #808988;}
.tab_wrap2 > .tab_nav li:last-child.active {border-right:1px solid #808988; border-left:0;}
.tab_wrap2 > .tab_nav li.active + li {border-left:0;}
.tab_wrap2 > .tab_nav li.active a {color:#ffffff !important;font-weight: 600;}

/* 25-03 예적금, 대출 목록 탭 스타일 분리 */
.tab_wrap2.active_bg > .tab_nav li{border: none !important;}
.tab_wrap2.active_bg > .tab_nav li.active{background: #f9f9fb !important;}
.tab_wrap2.active_bg > .tab_nav li.active a{color: #000 !important;}
/* .tab_wrap2 {position:relative;}
.tab_wrap2 > .tab_nav {display:flex; flex-wrap:wrap;}
.tab_wrap2 > .tab_nav li {flex:1 0 0; height:2.3rem; border-top:1px solid #eeeeee; border-bottom:1px solid #eeeeee; line-height:2.3rem;}
.tab_wrap2 > .tab_nav li + li {border-left:1px solid #eeeeee;}
.tab_wrap2 > .tab_nav li:first-child {border-left:1px solid #eeeeee; border-radius:0.4rem 0 0 0.4rem;}
.tab_wrap2 > .tab_nav li:last-child {border-right:1px solid #eeeeee; border-radius:0 0.4rem 0.4rem 0;}
.tab_wrap2 > .tab_nav li a {display:block; height:2.3rem; padding:0 0.3rem; font-size:0.7rem; line-height:2.3rem; color:#666666; text-align:center;}
.tab_wrap2 > .tab_nav li a span {display:inline-block; position:relative; line-height:1rem;}
.tab_wrap2 > .tab_nav li.active {border:0; background:#808988;}
.tab_wrap2 > .tab_nav li.active + li {border-left:0;}
.tab_wrap2 > .tab_nav li.active a {color:#ffffff;} */

.tab_wrap2 .tab_nav.col2 {overflow:initial; margin-left:1px; border:0;}
.tab_wrap2 .tab_nav.col2 li {position:relative; flex:0 1 calc(50% + 1px); margin-top:-1px; margin-left:-1px; border:0;}
.tab_wrap2 .tab_nav.col2 li:after {content:''; display:block; position:absolute; left:0px; top:0px; z-index:-1; width:100%; height:100%; border:1px solid #eeeeee;}
.tab_wrap2 .tab_nav.col2 li:first-child {border-radius:0.4rem 0 0 0;}
.tab_wrap2 .tab_nav.col2 li:first-child:after {border-radius:0.4rem 0 0 0;}
.tab_wrap2 .tab_nav.col2 li:first-child a {border-radius:0.4rem 0 0 0;}
.tab_wrap2 .tab_nav.col2 li:last-child {border-radius:0 0 0.4rem 0;}
.tab_wrap2 .tab_nav.col2 li:last-child:after {border-radius:0 0 0.4rem 0;}
.tab_wrap2 .tab_nav.col2 li:last-child a {border-radius:0 0 0.4rem 0;}

.tab_wrap2 .tab_nav.col3 {overflow:initial; margin-left:1px;}
.tab_wrap2 .tab_nav.col3 li {position:relative; flex:0 1 calc(33.333% + 1px); margin-top:-1px; margin-left:-1px; border:0;}
.tab_wrap2 .tab_nav.col3 li:after {content:''; display:block; position:absolute; left:0px; top:0px; z-index:-1; width:100%; height:100%; border:1px solid #eeeeee;}
.tab_wrap2 .tab_nav.col3 li:first-child {border-radius:0.4rem 0 0 0;}
.tab_wrap2 .tab_nav.col3 li:first-child:after {border-radius:0.4rem 0 0 0;}
.tab_wrap2 .tab_nav.col3 li:first-child a {border-radius:0.4rem 0 0 0;}
.tab_wrap2 .tab_nav.col3 li:last-child {border-radius:0 0 0.4rem 0;}
.tab_wrap2 .tab_nav.col3 li:last-child:after {border-radius:0 0 0.4rem 0;}
.tab_wrap2 .tab_nav.col3 li:last-child a {border-radius:0 0 0 0;}

.tab_wrap2 .tab_nav li.br_rt {border-radius:0 0.4rem 0 0;}
.tab_wrap2 .tab_nav li.br_rt:after {border-radius:0 0.4rem 0 0;}
.tab_wrap2 .tab_nav li.br_rt a {border-radius:0 0.4rem 0 0;}
.tab_wrap2 .tab_nav li.br_lb {border-radius:0 0 0 0.4rem;}
.tab_wrap2 .tab_nav li.br_lb:after {border-radius:0 0 0 0.4rem;}
.tab_wrap2 .tab_nav li.br_lb a {border-radius:0 0 0 0.4rem;}
/* tab type3 */
.tab_wrap3 {position:relative; padding-bottom:2rem; border-bottom:2px solid #000000;}
.tab_wrap3 > .tab_nav {display:flex; justify-content:space-between; align-items:center;}
.tab_wrap3 > .tab_nav li {flex:1 1 0; height:2rem; border-radius:0.3rem; border:1px solid #eeeeee; background:#eeeeee;}
.tab_wrap3 > .tab_nav li + li {margin-left:0.4rem;}
.tab_wrap3 > .tab_nav li a {display:flex; height:100%; align-items:center; justify-content:center;}
.tab_wrap3 > .tab_nav li a > span {display:inline-block; font-size:0.7rem; color:#666666; letter-spacing:-1px;}
/* 24-06 웹접근성 2차 : 탭 선택시 테두리가 두꺼워지도록 + 폰트 두꺼워지도록 수정 */
.tab_wrap3 > .tab_nav li.active {border:2px solid #009178; background:#ffffff;}
.tab_wrap3 > .tab_nav li.active a > span {color:#009178; font-weight: 600;}

/* tab type3 - old */
/* .tab_wrap3 {position:relative;} 
.tab_wrap3 > .tab_nav {display:flex; min-height:2rem; border-top:2px solid #000000; border-bottom:1px solid #eeeeee; flex-wrap:wrap; justify-content:space-between; align-items:center;}
.tab_wrap3 > .tab_nav li {flex:1 0 0; height:2rem; line-height:2rem;}
.tab_wrap3 > .tab_nav li + li {border-left:1px solid #eeeeee;}
.tab_wrap3 > .tab_nav li a {display:block; height:100%; padding:0 0.2rem; text-align:center;}
.tab_wrap3 > .tab_nav li a > span {display:inline-block; font-size:0.7rem; color:#666666; line-height:1rem; letter-spacing:-1px;}
.tab_wrap3 > .tab_nav li.active a > span {font-weight:bold; color:#000000;} */

.tab_wrap.scroll {overflow:hidden; padding:0;}
.tab_wrap.scroll ul {}
.tab_wrap.scroll ul li:first-child {padding:0 0.8rem 0 2rem;}
.tab_wrap.scroll ul li:last-child {padding:0 2rem 0 0.8rem;}
/* 26-02 오픈뱅킹 안심차단 추가목록 조회를 위한 오버 스크롤 로직 추가 */
.inst_scroll {overflow-y: auto !important; overscroll-behavior-y: auto !important;}
.load_more_indicator {display: flex; justify-content: center; align-items: center; padding: 0.3rem 0;}
.load_more_indicator::before {content: ''; width: 28px; height: 28px; border: 3px solid #dbdbdb; border-top: 3px solid #009178; border-radius: 100%; animation: loadMoreSpin 0.8s linear infinite;}
@keyframes loadMoreSpin {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}
.load_more_indicator_slice {position: relative;width: 100%;height: 4px;overflow: hidden;border-radius: 2px;}
.load_more_indicator_slice::before {content: '';position: absolute;top: 0;left: -30%;width: 30%;height: 100%;background: linear-gradient(90deg, #c8f3ed93, #009178);border-radius: 2px;animation: loadMoreSlide 1.2s ease-in-out infinite;}
@keyframes loadMoreSlide {0% {left: -30%;}50% {left: 100%;}100% {left: 100%;}}
#no_browser_ring {-webkit-tap-highlight-color: transparent; outline: none !important;}

/* input list */
.input_list_tit {font-size:16px; font-weight:500; color:#000000; line-height:1rem;}
.input_wrap {position:relative; margin-top:1rem;}

.input_wrap label,
.input_wrap .label {display:inline-block; padding-bottom:0.3rem;}
.input_wrap.has_topBtn label,
.input_wrap.has_topBtn .label {padding-bottom:0.6rem;}

.input_wrap .input_info_txt {position:absolute; right:0; top:0; z-index:1; color:#009591; line-height:1rem;}
.input_wrap .input_bottom_txt {padding-top:0.3rem; font-size:0.6rem; color:#666666; line-height:0.9rem; letter-spacing:-1px; text-align:right;}
.input_wrap.has_helpTxt input {padding-right:2.8rem;}
.input_wrap.has_helpTxt .input_in_txt {display:inline-block; position:absolute; top:2.1rem; right:0.8rem; font-size:0.8rem; color:#000000; letter-spacing:-1px;}
.input_wrap:first-child {margin-top:0;}
.input_wrap input + input {margin-top:0.4rem;}
.input_wrap .input_top_checkbox {position:absolute; top:0; right:0; z-index:1;}
.input_wrap .input_top_checkbox.check_wrap label {padding-bottom:0; font-weight:normal; color:#666666;}
.input_wrap .check_wrap label {font-weight:normal;}
.input_wrap button.inputDelete {display:none; position:absolute; right:1px; top:1px; z-index:1; width:calc(2.4rem - 1px); height:calc(2.4rem - 1px); text-indent:-9999px; background:url('../img/btn_input_delete.png') 50% 50% no-repeat; background-size:1rem auto;}
.input_wrap.has_delBtn input {position:relative; padding-right:2.8rem;}
.input_wrap.has_helpTxt.has_delBtn input {padding-right:5.6rem;}
.input_wrap.has_helpTxt.has_delBtn button.inputDelete {right:2.8rem; top:1px;}
.input_wrap.has_topBtn {margin-top:1.2rem;}
.input_wrap .ex {display:inline-block; font-size:0.7rem; color:#666666; line-height:1rem; letter-spacing:-1px;}
.input_wrap .desc {padding-bottom:0.3rem; font-size:0.7rem; color:#009591; line-height:1rem;}

@media (min-width: 350px) { /* 조회버튼이 있는 input사이즈에 맞게 x버튼 추가*/
	.input_wrap.has_delBtn.btnCase1 input {position:relative; padding-right:2.8rem;}
	.input_wrap.btnCase1 button.inputDelete {display:none; position:absolute; right:80px; top:1px; z-index:1; width:calc(2.4rem - 1px); height:calc(2.4rem - 1px); text-indent:-9999px; background:url('../img/btn_input_delete.png') 50% 50% no-repeat; background-size:1rem auto;}
}

/* input list : two block */
.input_wrap .input_twoBlock {position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;}
.input_wrap .input_twoBlock .two_up {position:relative; width:calc(50% - 0.5rem);}
.input_wrap .split {display:inline-block; width:1rem; text-align:center;}

/* input list : three block */
.input_wrap .input_threeBlock {position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;}
.input_wrap .input_threeBlock .three_up {position:relative; width:calc(100% / 3 - 0.67rem);}

/* input list : date(달력) */

/* 2020-08-28 달력띄우는 버튼(.btn_calendar)를 안쓰게 되면서 사실상 input_date는 의미가 없어짐. 다만 개발자들 소스를 고치기가 번거로워 그냥 냅두기로 함 */
.input_wrap .input_date {position:relative; display:flex; height:2.4rem; border:1px solid #cccccc; border-radius:0.3rem; justify-content:space-between; align-items:center;}
.input_wrap .input_date input {height:2.3rem; border:0; color:#000000;}
/* 2020-08-28 input type를 date로 쓰면서 달력팝업을 띄우는 버튼이 없어짐. 혹시몰라 주석처리 해 놓음 */
.input_wrap .input_date .btn_calendar {display:block; position:absolute; top:0; right:0; z-index:1; width:2.6rem; min-height:2.3rem; border-radius:0.375rem; background:transparent url('../img/btn_calendar.png') right 0.8rem center no-repeat; background-size:1rem;}
.input_wrap .input_date .btn_calendar > span {text-indent:-9999px;}

.input_wrap .input_date .two_up {position:relative; width:calc(50% - 0.25rem);}
.input_wrap .input_date .two_up > input {padding:0 0 0 1rem;}
.input_wrap .input_date .split {display:inline-block; width:0.5rem; text-align:center;}
.input_wrap .input_date .two_up .btn_calendar {width:2.4rem; border-radius:0;}

/* 달력버튼이 있을 때 CSS
.input_wrap .input_date {position:relative; display:flex; height:2.4rem; border:1px solid #cccccc; border-radius:0.3rem; font-family:'Roboto'; justify-content:space-between; align-items:center;}
.input_wrap .input_date input {height:2.3rem; border:0; background:transparent url('../img/btn_calendar.png') right 0.8rem center no-repeat; background-size:1rem; color:#000000;}
.input_wrap .input_date .btn_calendar {display:block; position:absolute; top:0; right:0; z-index:1; width:2.6rem; min-height:2.3rem; border-radius:0.375rem; background:transparent;}
.input_wrap .input_date .btn_calendar > span {text-indent:-9999px;}
.input_wrap .input_date .two_up {position:relative; width:calc(50% - 0.25rem);}
.input_wrap .input_date .two_up > input {padding:0 2rem 0 0.8rem; text-align:center;}
.input_wrap .input_date .split {display:inline-block; width:0.5rem; text-align:center;}
.input_wrap .input_date .two_up .btn_calendar {width:2.4rem; border-radius:0;}
*/

/* input list : input_driveLicense (운전면허증 번호입력) */
.input_wrap .input_driveLicense {position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; border:1px solid #cccccc; border-radius:0.375rem;}
.input_wrap .input_driveLicense .blocks {position:relative;}
.input_wrap .input_driveLicense .blocks input {height:2.3rem; padding:0; text-align:center; border:none;}
.input_wrap .input_driveLicense .blocks input:focus {border:1px solid #009591;}
.input_wrap .input_driveLicense .blocks a {height:2.3rem; padding:0 0.5rem 0 0.8rem; border:none; line-height:2.3rem;}
.input_wrap .input_driveLicense .blocks a:focus {border:1px solid #009591;}
.input_wrap .input_driveLicense .blocks.n1 {width:28%;}
.input_wrap .input_driveLicense .blocks.n2 {width:calc(20% - 0.5rem);}
.input_wrap .input_driveLicense .blocks.n3 {width:calc(30% - 1rem);}
.input_wrap .input_driveLicense .blocks.n4 {width:calc(20% - 0.5rem);}
.input_wrap .input_driveLicense .split {display:inline-block; width:1rem; text-align:center;}

/* input list : btn(버튼추가) */
.input_wrap.flex .select_wrap {width:100%;}
.input_wrap.flex .input_search_btn {flex:none; margin:1.3rem 0 0 0.4rem;}
.input_wrap.flex .input_search_btn .btn {min-height:2.4rem; padding:0 0.8rem;}
.input_wrap.flex .input_search_btn .btn > span {font-weight:normal;}
.input_wrap .flex .input_search_btn {flex:none; margin-left:0.4rem;}
.input_wrap .flex .input_search_btn .btn {min-width:3.8rem; min-height:2.4rem; padding:0 0.8rem;}
.input_wrap .flex .input_search_btn .btn > span {font-weight:normal;}

/* checkbox style Tab */
.tab_checkbox {position:relative;}
.tab_checkbox ul {position:relative;}
.tab_checkbox ul:after {content:''; display:block; clear:both;}
.tab_checkbox ul li {float:left; width:calc(50% - 0.2rem);}
.tab_checkbox ul li:last-child {float:right;}
.tab_checkbox ul li .radio_wrap {padding:0; border:1px solid #cccccc; border-radius:0.3rem; text-align:center;}
/* 24-06 웹접근성 2차 : tab 선택시 테두리 및 폰트 강조 */
.tab_checkbox ul li .radio_wrap.checked {border:2px solid #009178;}
.tab_checkbox ul li .radio_wrap.checked label {color:#009178; font-weight:600;}
.tab_checkbox ul li .radio_wrap label {display:block; height:4.4rem; padding-top:2.4rem; color:#666666;}
.tab_checkbox ul li .radio_wrap label:after {display:block; left:calc(50% - 0.5rem); top:1.5rem;}
/* sms, ars */
.tab_checkbox ul li .radio_wrap.sms label,
.tab_checkbox ul li .radio_wrap.ars label {height:3.8rem; padding-top:2rem;}
.tab_checkbox ul li .radio_wrap.sms label:after {top:1.3rem; background:url('../img/img_radio_sms.png');}
.tab_checkbox ul li .radio_wrap.sms.checked label:after {background:url('../img/img_radio_sms_active.png');}
.tab_checkbox ul li .radio_wrap.ars label:after {top:1.3rem; background:url('../img/img_radio_ars.png');}
.tab_checkbox ul li .radio_wrap.ars.checked label:after {background:url('../img/img_radio_ars_active.png');}


/* table style */
.table_type {position:relative;}
.table_type .row {display:flex; flex-flow:wrap; width:100%;}
.table_type .col {vertical-align:top;}
.table_type .col.title {padding:0.375rem 0; font-size:0.875rem; line-height:1.25rem; color:#999999;}
.table_type .col.con {flex-grow:1; padding:0.375rem 0; font-size:0.875rem; line-height:1.25rem; color:#111111; text-align:right;}

.table_type.input {}
.table_type.input .title {color:#999999; font-size:0.75rem; line-height:1.125rem;}
.table_type.input .con {font-size:1rem; line-height:1.5; letter-spacing:-0.5px; color:#000000;}
.table_type.input + .input_wrap {margin-top:1.25rem;}


/* Table */ 
.tbl_wrap {display:block; position:relative;}
.table_wrap {display:block; border-top:1px solid #000000;}
.table_wrap_event {display:block; border-top:1px solid #000000; border-bottom:1px solid #eee;}/*2021-11-23 수정*/
.table_tit {margin:0 0 0.3rem; font-size:0.7rem; font-weight:500; line-height:1rem; color:#000000; display: inline;}

.checkAll {float: right;}
.checkAll input[type=checkbox] {position:absolute;left:0;width:0;height:0;overflow:hidden;font-size:0;z-index:1;}
.checkAll input[type=checkbox] + label {display:flex;font-size:0.7rem;color:#000;}
.checkAll input[type=checkbox] + label::before {content:'';width:1rem;height:1rem;background:url(../img/img_check.png) no-repeat 0 0;background-size:cover;margin-right:0.4rem;}
.checkAll input[type=checkbox]:checked + label::before {background:url(../img/img_check_active.png) no-repeat 0 0;background-size:cover;margin-right:0.4rem;}

.table_bottom_txt {margin-top:0.8rem; font-size:0.7rem; line-height:1rem; color:#666666;}
.table_row {font-size:0.7rem; line-height:1rem;}
.table_row th {padding:0.7rem 0.2rem; border-bottom:1px solid #eeeeee; color:#666666; text-align:left; vertical-align:top;}
.table_row td {padding:0.7rem 0.2rem; border-bottom:1px solid #eeeeee; color:#000000; text-align:right; vertical-align:top;}
.table_row .bullet_bar {margin-top:0.2rem; color:#666666;}
/* table_row style2 */
.table_row.style2 th {background:#f9f9fb; color:#333333; border-right:1px solid #cccccc; text-align:center;}
.table_row.style2 td {padding:0.7rem 0.6rem; background:#ffffff; color:#666666; text-align:left;}
.table_row.style2 td .table_col th {border-right:1px solid #eeeeee;}
.table_row.style2 .bullet_bar {margin-top:0;}

.tbl_wrap + .tbl_wrap {margin-top:1rem;}
.tbl_wrap .table_wrap + .table_wrap {margin-top:0.8rem;} 
.table_col {font-size:0.7rem; line-height:1rem; letter-spacing:-1px; text-align:center;}
.table_col th {padding:0.6rem 0; border-left:1px solid #eeeeee; background:#f3f3f7; color:#333333;}
.table_col th:first-child {border-left:0}
.table_col td {padding:0.6rem 0.3rem; border-left:1px solid #eeeeee; border-bottom:1px solid #eeeeee; background:#ffffff; color:#666666;}
.table_col td:first-child {border-left:0;}
.table_col th span.refer,
.table_col td span.refer {font-size:10px; vertical-align:super;}
.table_col thead {border-bottom:1px solid #cccccc;}
.table_col thead tr + tr {border-top:1px solid #eeeeee;}
.table_col tfoot td {background:#f3f3f7; font-weight:500; color:#333333;}
.table_ex {margin-top:0.6rem; font-size:0.6rem; line-height:1rem; color:#666666;}
.table_ex > ul > li > span {display:inline-block; vertical-align:top;}
.table_ex > ul > li > span:first-child {width:7%}
.table_ex > ul > li > span:last-child {width:89%}

/* list_style1 */
.list_style1 > ul {border-top:1px solid #000000;}
.list_style1 > ul li {width:100%; padding:0.7rem 0.2rem; border-bottom:1px solid #eeeeee; line-height:1rem;}
.list_style1 > ul li .tit {color:#666666;}
.list_style1 > ul li .con {color:#000000; text-align:right;}
.list_style1 > ul li .con.point {font-weight:500; color:#009591;}
.list_style1 > ul li em {letter-spacing:-0.5px; font-family:'Roboto';}
.list_style1 > ul + ul {margin-top:-1px;}
.list_style1 > ul li .row {display:flex; flex-wrap:wrap; justify-content:space-between;}
.list_style1 > ul li .row .tit {padding-right:0.5rem;}
.list_style1 > ul li .row.title {margin-bottom:0.35rem;}
.list_style1 > ul li .row.title .tit {font-size:0.9rem; font-weight:500; color:#000000; line-height:1.2rem;}
.list_style1 > ul li .row.title .con {font-size:0.9rem; color:#009591;}
.list_style1 > ul li .row.title .con > em {font-size:1rem; font-weight:500;}
/* .list_style1 > ul li .row.title + .row .con {color:#666666;} */
.list_style1 > ul li .util_wrap {display:flex; margin-top:0.85rem; justify-content:space-between; align-items:center;}
.list_style1 > ul li .util_wrap .btn_account {display:block; width:2.6rem; font-size:0.7rem; font-weight:500; line-height:1rem; text-align:left; color:#000000; background:url('../img/btn_down.png') right center no-repeat; background-size:1.2rem auto;}
.list_style1 > ul li .util_wrap .btn_account.active {background:url('../img/btn_up.png') right center no-repeat; background-size:1.2rem auto;}
.list_style1 .desc {padding-top:0.8rem; font-size:0.7rem; color:#666666; line-height:1rem;}
.list_style1 .list_tit {padding-bottom:0.3rem; font-size:0.7rem; font-weight:500; color:#000000; line-height:1rem;}

/* list_style2 */
.list_style2 > ul li {width:100%; padding:1.2rem 1.4rem; line-height:1rem;}
.list_style2 > ul li > a {display:block;}
.list_style2 > ul li + li {border-top:1px solid #eeeeee;}
.list_style2 > ul li em {font-family:'Roboto'; letter-spacing:-0.5px;}
.list_style2 > ul li .badge {display:inline-block; min-height:1.4rem; padding:0 0.5rem; border-radius:2px; background-color:rgba(102, 102, 102, 0.1); font-size:0.65rem; color:#666666; line-height:1.4rem;}
.list_style2 > ul li .row {display:flex; flex-wrap:wrap; justify-content:space-between;}
.list_style2 > ul li .row .tit {padding-right:0.5rem; color:#666666;}
.list_style2 > ul li .row .con {color:#000000; text-align:right;}
.list_style2 > ul li .row.title {margin-bottom:0.35rem;}
.list_style2 > ul li .row.title .tit {font-size:0.7rem; font-weight:500; color:#000000; line-height:1.2rem;}
.list_style2 > ul li .row.title .tit > em {font-size:1rem;}
.list_style2 > ul li .row.title .con {font-size:1rem; font-weight:500;}

/* number list style */
.list_number_circle {}
.list_number_circle li {position:relative; margin-top:0.6rem; padding-left:1.5rem; font-size:0.7rem; line-height:1rem; color:#000000;}
.list_number_circle li > span {color:#009591; text-decoration:underline;}
.list_number_circle li:first-child {margin-top:0;}
.list_number_circle li:before {
	display:block; 
	position:absolute; left:0; top:0; z-index:1; 
	width:1.1rem; 
	border-radius:50%;
	color:#009591; font-size:0.6rem; line-height:1.1rem; font-weight:500; text-align:center; letter-spacing:0;
	background:rgba(0, 149, 145, 0.05);
	font-family:'Roboto';
}
.list_number_circle li:nth-child(1):before {content:'1';}
.list_number_circle li:nth-child(2):before {content:'2';}
.list_number_circle li:nth-child(3):before {content:'3';}
.list_number_circle li:nth-child(4):before {content:'4';}
.list_number_circle li:nth-child(5):before {content:'5';}
.list_number_circle li:nth-child(6):before {content:'6';}
.list_number_circle li:nth-child(7):before {content:'7';}
.list_number_circle li:nth-child(8):before {content:'8';}
.list_number_circle li:nth-child(9):before {content:'9';}
.list_number_circle li:nth-child(10):before {content:'10';}

/* number list style2 */
.list_number_circle.style2 {padding-top:0.3rem;}
.list_number_circle.style2 li {position:relative; margin-top:0.2rem; padding-left:0.8rem; font-size:0.7rem; line-height:1rem; color:#666666;}
.list_number_circle.style2 li > span {color:#666666; text-decoration:underline;}
.list_number_circle.style2 li:first-child {margin-top:0;}
.list_number_circle.style2 li:before {
	display:block; 
	position:absolute; left:0; top:0.22rem; z-index:1; 
	width:0.7rem;
	height:0.7rem;
	padding:0 0.15rem;
	color:#666666; font-size:0.4rem; line-height:0.6rem; font-weight:normal; text-align:center; letter-spacing:0;
	border-radius:50%;
	border:1px solid #666666;
	background:transparent;
	font-family:'Roboto';
}
.list_number_circle.style2 li:nth-child(1):before {content:'1';}
.list_number_circle.style2 li:nth-child(2):before {content:'2';}

/* notify list */
.notify_list {position:relative; padding-top:0.8rem;}
.notify_list li {display:block;}
.notify_list li + li {border-top:1px solid #dddddd;}
.notify_list li > a {display:block; position:relative; padding:1.2rem 2rem 1.2rem 0.2rem;}
.notify_list li > a:after {content:''; display:block; position:absolute; top:50%; right:0; width:1.2rem; height:1.2rem; background:url('../img/bg_arrow_right_gray.png') center no-repeat; background-size:100% auto; transform:translateY(-50%);}
.notify_list li .tit {display:block; font-size:0.8rem; font-weight:500; color:#333333; line-height:1.1rem; letter-spacing:-1px; word-break:break-all;}
.notify_list li .date {display:block; padding-top:0.2rem; font-family:'Roboto'; font-size:0.7rem; color:#666666; line-height:1rem; letter-spacing:-0.5px;}

/* notify view */
.notify_view {position:relative;}
.notify_view .view_header {padding-bottom:1rem; border-bottom:1px solid #000000;}
.notify_view .view_header > h3 {font-size:0.9rem; font-weight:500; color:#333333; line-height:1.2rem; letter-spacing:-1px; word-break:break-all;}
.notify_view .view_header .date {display:inline-block; padding-top:0.3rem; font-family:'Roboto'; font-size:0.7rem; color:#666666; line-height:1.1rem; letter-spacing:-0.5px;}
.notify_view .view_content {min-height:100%; margin-top:1rem; line-height:1.6; color:#333333;}
/* <!-- 2020-09-18 기존as-is CSS 가져오기 및 수정,추가하여 여기에 올려둠 - 과거 상세보기 페이지 깨짐 방지용 */
.view_content img {max-width:100%;}
.view_content h4 {font-size:0.8rem;}
.view_content h5 {padding-bottom:0.3rem; font-size:0.7rem; font-weight:bold; color:#000000;}
.view_content .btnType1 button,
.view_content .btnType1 a {color:#009591; text-decoration:underline; background:#ffffff;}
.view_content .aLeft {text-align:left !important;}
.view_content .aRight {text-align:right !important;}
.view_content .aCenter {text-align:center !important;}
.view_content .noBg {background-image:none !important;}
.view_content .underline {text-decoration:underline;}
.view_content .fRed {color:#dc3900;}
.view_content .fc666 {color:#666;}
.view_content .fc333 {color:#333;}
.view_content .fGreen {color:#0f6162;}
.view_content  .tableArea {display:block; border-top:1px solid #000000;}
.view_content  .tableType1 {font-size:0.7rem; line-height:1rem; letter-spacing:-1px; text-align:center;}
.view_content  .tableType1 th {padding:0.6rem 0; border-left:1px solid #eeeeee; background:#f3f3f7; color:#333333;}
.view_content  .tableType1 th:first-child {border-left:0}
.view_content  .tableType1 td {padding:0.6rem 0.3rem; border-left:1px solid #eeeeee; border-bottom:1px solid #eeeeee; background:#ffffff; color:#666666;}
.view_content  .tableType1 td:first-child {border-left:0;}
.view_content  .tableType2 {font-size:0.7rem; line-height:1rem;}
.view_content  .tableType2 th {padding:0.7rem 0.2rem; border-bottom:1px solid #eeeeee; color:#666666; text-align:left; vertical-align:top;}
.view_content  .tableType2 td {padding:0.7rem 0.2rem; border-bottom:1px solid #eeeeee; color:#000000; text-align:right; vertical-align:top;}
/* 2020-09-18 기존as-is CSS 가져오기 및 수정,추가하여 여기에 올려둠 - 과거 상세보기 페이지 깨짐 방지용  //--> */
.notify_view .view_footer {margin-top:1rem;}
.notify_view .view_footer .download_list {padding:0.8rem; border-radius:0.3rem; background:#f9f9fb;}
.notify_view .view_footer .download_list li + li {margin-top:0.6rem;}
.notify_view .view_footer .download_list .file_pdf {display:inline-block; position:relative; padding-left:1.2rem; font-size:0.7rem; color:#000000; line-height:1rem;}
.notify_view .view_footer .download_list .file_pdf:after {content:''; display:block; position:absolute; top:0; left:0; width:1rem; height:1rem; background:url('../img/ico_file.png') center no-repeat; background-size:100%;}


/* box style */
.box_round {width:100%; padding:0.8rem; border-radius:0.3rem; background:#f9f9fb;}

/* ico */
.ico_fail {display:inline-block; width:3rem; height:3rem; background:url('../img/img_result_fail.png') center no-repeat; background-size:100%;}
.ico_check {display:inline-block; width:3rem; height:3rem; background:url('../img/img_result_done.png') center no-repeat; background-size:100%;}
.ico_otpNo {display:inline-block; width:4rem; height:4rem; background:url('../img/ico_mobotp_none.png') center no-repeat; background-size:100%;}
.ico_subway {display:inline-block; width:1rem; height:1rem; font-weight:500; background:url('../img/ico_subway.png') left center no-repeat; background-size:100%; vertical-align:top;}
.ico_bus {display:inline-block; width:1rem; height:1rem; font-weight:500; background:url('../img/ico_bus.png') left center no-repeat; background-size:100%; vertical-align:top;}
.ico_car {display:inline-block; width:1rem; height:1rem; font-weight:500; background:url('../img/ico_car.png') left center no-repeat; background-size:100%; vertical-align:top;}
.ico_hana {display:inline-block; width:0.8rem; height:0.8rem; margin-right:1px; background:url('../img/ico_hana.png') left top -1px no-repeat; background-size:100%; vertical-align:middle;}
.ico_sms {display:inline-block; width:1rem; height:1rem; margin-right:4px; background:url('../img/ico_sms_20x20.png') left top -1px no-repeat; background-size:100%; vertical-align:middle;}
.ico_cert {display:inline-block; width:1rem; height:1rem; margin-right:4px; background:url('../img/ico_cert_20x20.png') left top -1px no-repeat; background-size:100%; vertical-align:middle;}
.ico_home {display:inline-block; width:1rem; height:1rem; margin-right:0.2rem; background:url('../img/ico_home_20x20.png') left top -1px no-repeat; background-size:100%; vertical-align:middle;}
.ico_office {display:inline-block; width:1rem; height:1rem; margin-right:0.2rem; background:url('../img/ico_office_20x20.png') left top -2px no-repeat; background-size:100%; vertical-align:middle;}
.ico_user {display:inline-block; width:0.7rem; height:0.65rem; background:url('../img/ico_user.png') left top no-repeat; background-size:100%; vertical-align:middle;}
.ico_callcenter {display:inline-block; width:0.7rem; height:0.7rem; margin-right:0.5rem; background:url('../img/ico_callcenter.png') left top no-repeat; background-size:100%;}
.ico_camera {display:inline-block; width:1rem; height:1rem; margin-right:0.2rem; background:url('../img/ico_camera.png') left top no-repeat; background-size:100%; vertical-align:middle;}
.ico_recruit {display:inline-block; width:1rem; height:1rem; background:url('../img/ico_recruit.png') left top no-repeat; background-size:100%; vertical-align:top;}

.ico_account {display:inline-block; width:1.2rem; height:1.2rem; margin-right:1px; background:url('../img/ico_account.png') left top -3px no-repeat; background-size:100%; vertical-align:middle;}
.ico_stamp {display:inline-block; width:1.2rem; height:1.2rem; margin-right:1px; background:url('../img/ico_stamp.png') left top -1px no-repeat; background-size:100%; vertical-align:middle;}
.ico_fingerprint {display:inline-block; width:1.2rem; height:1.2rem; margin-right:1px; background:url('../img/ico_fingerprint.png') left top -1px no-repeat; background-size:100%; vertical-align:middle;}
.ico_otp_btn {display:inline-block; width:1.2rem; height:1.2rem; margin-right:1px; background:url('../img/ico_otp_btn.png') left top -2px no-repeat; background-size:100%; vertical-align:middle;}
.checked .ico_account {display:inline-block; width:1.2rem; height:1.2rem; margin-right:1px; background:url('../img/ico_account_active.png') left top -3px no-repeat; background-size:100%; vertical-align:middle;}
.checked .ico_stamp {display:inline-block; width:1.2rem; height:1.2rem; margin-right:1px; background:url('../img/ico_stamp_active.png') left top -1px no-repeat; background-size:100%; vertical-align:middle;}
.checked .ico_fingerprint {display:inline-block; width:1.2rem; height:1.2rem; margin-right:1px; background:url('../img/ico_fingerprint_active.png') left top -1px no-repeat; background-size:100%; vertical-align:middle;}
.checked .ico_otp_btn {display:inline-block; width:1.2rem; height:1.2rem; margin-right:1px; background:url('../img/ico_otp_btn_active.png') left top -2px no-repeat; background-size:100%; vertical-align:middle;}

/* bullet */
.bullet_bar {}
.bullet_bar li {position:relative; margin-top:0.2rem; padding-left:0.5rem;}
.bullet_bar li:first-child {margin-top:0;}
.bullet_bar li:after {content:'-'; display:inline-block; position:absolute; left:0; top:0; z-index:1;}

/* select popup */
.select_option_wrap {display:none;}
#selectPopup .popup .popup_content {padding:0;}
#selectPopup .popup .popup_content .select_option_list li {border-top:1px solid #f5f5f5;}
#selectPopup .popup .popup_content .select_option_list li button {display:block; width:100%; /*height:2.6rem;*/ padding:0.8rem 1.2rem; font-size:0.7rem; line-height:1rem; text-align:left; color:#000000; letter-spacing:-1px; font-family:'NotoSans'; background:#ffffff;}
#selectPopup .popup .popup_content .select_option_list li button span {display:block;}
#selectPopup .popup .popup_content .select_option_list li button span > span {display:inline; color:#666666;}
#selectPopup .popup .popup_content .select_option_list li button span > em {color:#666666; letter-spacing:-0.5px; font-family:'Roboto';}

/* agree wrap */
.agree_wrap {margin-bottom:-1.1rem;}
.agree_wrap label {display:block;}
.agree_wrap .check_wrap {}
.all_check { margin-top: 20px; }
.agree_wrap .check_wrap input[type=checkbox] + label {color:#000000;}
.agree_wrap div.all_check {position:relative; margin-bottom:1rem;}
.agree_wrap div.all_check button.btn_agreeList {position:absolute; right:0; top:0; z-index:1; width:1.2rem; height:1.2rem; text-indent:-9999px; background:url('../img/btn_allview.png') right 50% no-repeat; background-size:100% auto;}
.agree_wrap div.all_check button.btn_agreeList.active {background:url('../img/btn_allview_active.png') right 50% no-repeat; background-size:100% auto;}
.agree_wrap div.all_check .check_wrap input[type=checkbox] + label {height:1rem; font-size:0.8rem; font-weight:bold; color:#000000;}
.agree_wrap ul.agree_list {border-top:1px solid #000000;}
.agree_wrap ul.agree_list.border_grey {border-top:1px solid #eeeeee;}
.agree_wrap ul.agree_list > li {position:relative; padding:1.1rem 0 1.1rem 0; border-top:1px solid #eeeeee;}
.agree_wrap ul.agree_list > li:first-child {border-top:0;}
.agree_wrap ul.agree_list > li > .check_wrap label {display:block; padding-right:2rem; background:url('../img/bg_arrow_right_black.png') right 50% no-repeat; background-size:1.2rem auto;}
.agree_wrap ul.agree_list .check_wrap.no_arrow label {padding-right:0; background:none !important;}
/* .agree_wrap ul.agree_list > li:last-child {padding-bottom:0;} */
.agree_wrap ul.agree_list > li button.btn_agreeView {position:absolute; right:0; top:50%; z-index:1; width:1.2rem; height:1.2rem; text-indent:-9999px; background:url('../img/bg_arrow_right_black.png') 50% 50% no-repeat; background-size:1.2rem auto; transform:translateY(-50%);}
.agree_wrap ul.agree_list.onlyOne > li button.btn_agreeView {background:url('../img/bg_arrow_right_gray.png') 50% 50% no-repeat; background-size:1.2rem auto;}
.agree_wrap ul.agree_list > li .agree_ex {display:inline-block; padding:0.3rem 0 0 1.4rem; font-size:0.6rem; color:#666666; line-height:0.9rem; letter-spacing:-1px;}

.agree_wrap.style2 .check_wrap input[type=checkbox] + label {color:#666666;}
.agree_wrap.style2 {margin-bottom:2rem; border:1px solid #cccccc; border-radius:0.3rem; overflow:hidden;}
.agree_wrap.style2 div.all_check {margin:0.9rem 0.8rem;}
.agree_wrap.style2 div.all_check .check_wrap input[type=checkbox] + label {font-weight:500;}
.agree_wrap.style2 ul.agree_list {padding:0 0.8rem; border-top:1px solid #cccccc; background:#f9f9fb;}
.agree_wrap.style2 ul.agree_list > li {padding:0.9rem 0;}
.agree_wrap.style2 ul.agree_list > li > .check_wrap > label {font-weight:normal; background:url('../img/bg_arrow_right_gray.png') right 50% no-repeat; background-size:1.2rem auto;}
.agree_wrap.style2 ul.agree_list > li button.btn_agreeView {position:absolute; right:0; top:50%; z-index:1; width:1.2rem; height:1.2rem; text-indent:-9999px; background:url('../img/bg_arrow_right_black.png') 50% 50% no-repeat; background-size:1.2rem auto; transform:translateY(-50%);}
.agree_wrap.style2 ul.agree_list.onlyOne {border-top:none; background:#ffffff;}
.agree_wrap.style2 ul.agree_list.onlyOne .check_wrap input[type=checkbox] + label {padding-bottom:0; font-size:0.8rem; font-weight:500; color:#333333;}

.check_select > .agree_wrap {margin:0;}
.check_select > .agree_wrap + .agree_wrap {margin-top:0.3rem;}
.check_select > .agree_wrap .check_wrap input[type=checkbox] + label {color:#666666;}
.check_select > .agree_wrap div.all_check {position:relative; height:3rem; margin:0; padding:0 0.75rem; border:1px solid #eeeeee; background:#ffffff; line-height:3rem;}
.check_select > .agree_wrap div.all_check button.btn_agreeList {position:absolute; right:0.8rem; top:0.8rem; z-index:1; width:1.2rem; height:1.2rem; text-indent:-9999px; background:url('../img/btn_up_b.png') right 50% no-repeat; background-size:100% auto;}
.check_select > .agree_wrap div.all_check button.btn_agreeList.active {background:url('../img/btn_down_b.png') right 50% no-repeat; background-size:100% auto;}
.check_select > .agree_wrap div.all_check .check_wrap input[type=checkbox] + label {height:1.3rem; font-size:0.8rem; font-weight:500; color:#000000;}
.check_select > .agree_wrap ul.agree_list {padding:0.1rem 0.8rem 1rem; border:1px solid #eeeeee; border-top:0; background:#ffffff;}
.check_select > .agree_wrap ul.agree_list:after {content:''; clear:both; display:block;}
.check_select > .agree_wrap ul.agree_list > li {float:left; min-width:50%; margin-top:0.9rem; padding:0 0.5rem 0 0; border:0;}
.check_select > .agree_wrap ul.agree_list > li button.btn_agreeView {position:absolute; right:0; top:0.55rem; z-index:1; width:2rem; height:2rem; text-indent:-9999px; background:url('../img/bg_arrow_right_black.png') 50% 50% no-repeat; background-size:1.2rem auto;}


/* 우편번호찾기 팝업 */
.ad_search_result_list {margin-top:2rem; color:#000000; line-height:1rem;}
.ad_search_result_list p.list_top_txt {padding-bottom:0.6rem;}
.ad_search_result_list p.list_top_txt strong {color:#009591;}
.ad_search_result_list ul {}
.ad_search_result_list ul li {border-bottom:1px solid #eeeeee;}
.ad_search_result_list ul li:last-child {border-bottom:0;}
.ad_search_result_list ul li a {display:block; padding:0.8rem 0.4rem; color:#000000;}
.ad_search_result_list ul li a > span {display:block;}
.ad_search_result_list ul li a > span.ad_num {font-family:'Roboto';}
.ad_search_result_list ul li a > span.ad_now {font-weight:500;}
.ad_search_result_list ul li a > span.ad_old {margin-top:0.2rem; color:#666666;}
.ad_no_data {position:relative; height:calc(100vh - 2.8rem - 5.6rem); min-height:13rem;}

/* 직장검색 팝업 */
.com_search_result_list {margin-top:2rem; color:#000000; line-height:1rem;}
.com_search_result_list p.list_top_txt {padding-bottom:0.6rem;}
.com_search_result_list p.list_top_txt strong {color:#009591;}
.com_search_result_list ul {border-top:1px solid #000000;}
.com_search_result_list ul li {border-bottom:1px solid #eeeeee;}
.com_search_result_list ul li:last-child {border-bottom:0;}
.com_search_result_list ul li a {display:block; padding:0.8rem 0.4rem; color:#000000;}
.com_search_result_list ul li a > span {display:block;}
.com_search_result_list ul li a > span.com_name {padding-bottom:0.4rem; font-weight:500;}
.com_search_result_list ul li a > span.com_num {margin-top:0.1rem; color:#666666;}

/* 약관 다운로드 버튼 */
.btn_type_label {padding:0px 10px; display:inline-block; position:relative; width:100%; height:2rem; border-radius:0.375rem; font-size:0.7rem; font-weight:normal; line-height:2rem; cursor:pointer; color:#757575; text-align:center;}
.btn_type_label:after {content:""; display:inline-block; position:absolute; left:0; top:0; z-index:1; width:100%; height:2rem; margin-top:0; cursor:pointer; border:1px solid #cccccc; border-radius:0.375rem; background:none;}

/* .btn_type_event {padding:0px 10px; display:inline-block; position:relative; width:20%; height:1rem; border-radius:0.375rem; font-size:0.7rem; font-weight:normal; line-height:2rem; cursor:pointer; color:#180404; text-align:center;} */
/*color:#ffffff; background:linear-gradient(108deg, #007495 0%, rgba(22, 160, 119, 0) 53%), linear-gradient(108deg, rgba(0, 149, 145, 0) 47%, #007495 100%), linear-gradient(to bottom, #009591, #009591);*/
.btn_type_event {padding:3px 15px 3px 15px; z-index:1;  margin-top:0; border-radius:0.375rem; background:none; background-color:#76bdff; color:#292828;}
.btn_type_event_end {padding:3px 20px 3px 20px; z-index:1;  margin-top:0; border-radius:0.375rem; background:none; background-color:#ff777e; color:#292828;}

.push_li_deactive { padding:0.5rem 0.5rem 0.5rem 1.6rem !important; background:url('../img/push_read_2.png') left 0.2rem top 0.7rem no-repeat; background-size:1.0rem auto; }
.push_li_active { padding:0.5rem 0.5rem 0.5rem 1.6rem !important; background:url('../img/push_unread_2.png') left 0.2rem top 0.7rem no-repeat; background-size:1.0rem auto; } 



/* calender */
.calender_list .has-text-info-dark {color: lightgray;}
.calender_list .has-text-danger {color: lightgray;}
.calender_list {width: 100%; padding: 1.2rem 1.4rem; line-height: 1rem; border-bottom: 1px solid #eee; height: 360px;}
.calender_list li {color:#777; float: left; width: 24%; font-size: 0.65rem; text-align: center;}
.calender_list .purple_calender {width: 10px; height: 10px; background: #8f7ee5; display: inline-block; border-radius: 20px;}
.calender_list .blue_calender {width: 10px; height: 10px; background: #55a8fd; display: inline-block; border-radius: 20px;}
.calender_list .yellow_calender {width: 10px; height: 10px; background: #ffbd4b; display: inline-block; border-radius: 20px;}
.calender_list .green_calender {width: 10px; height: 10px; background: #4dd87a; display: inline-block; border-radius: 20px;}
.calender_list .none_calender {height: 10px; background:rgba(255,255,255,0.5); display: inline-block; border-radius: 20px;}
.calender_list .calender_box {margin-top: 30px;}
.calender_list .weekdays {margin: 0; padding: 20px 0; border-top: 1px solid #eee;}
.calender_list .weekdays li {display: inline-block; width: 13.6%; color: #666; text-align: center;}
.calender_list .days {padding: 10px 0; margin: 0;}
.calender_list .days li {list-style-type: none; display: inline-block; width: 13.6%; text-align: center; margin-bottom: 5px; font-size:12px;}
.calender_list .days li .color_Box {width: 100%;margin: 0 1.5px auto; line-height: 0.5rem;}
.calender_list .days li .active {padding: 5px;}


/* Add media queries for smaller screens */
@media screen and (max-width:720px) {
    .weekdays li, .days li {width: 13.1%;}
}

@media screen and (max-width: 420px) {
    .weekdays li, .days li {width: 12.5%;}
    .days li .active {padding: 2px;}
    .calender_list .purple_calender {width: 7px; height: 7px; background: #8f7ee5; display: inline-block; border-radius: 20px;}
    .calender_list .blue_calender {width: 7px; height: 7px; background: #55a8fd; display: inline-block; border-radius: 20px;}
    .calender_list .yellow_calender {width: 7px; height: 7px; background: #ffbd4b; display: inline-block; border-radius: 20px;}
    .calender_list .green_calender {width: 7px; height: 7px; background: #4dd87a; display: inline-block; border-radius: 20px;}
}

@media screen and (max-width: 320px) {
    .weekdays li, .days li {width: 12.2%;}
    .calender_list .purple_calender {width: 6px; height: 6px; background: #8f7ee5; display: inline-block; border-radius: 20px;}
    .calender_list .blue_calender {width: 6px; height: 6px; background: #55a8fd; display: inline-block; border-radius: 20px;}
    .calender_list .yellow_calender {width: 6px; height: 6px; background: #ffbd4b; display: inline-block; border-radius: 20px;}
    .calender_list .green_calender {width: 6px; height: 6px; background: #4dd87a; display: inline-block; border-radius: 20px;}
}

@charset "utf-8";

/*  info.html= 가입하기 btn 레이아웃 수정 */
.btn_wrap_flex{
    display: flex;
}
.btn_wrap_flex .btn{
    width: 55%;
}
.btn_wrap_flex:first-of-type a{
    margin-right: 10px;
}

.btn_wrap_flex a span{
    margin-top: 20px;
    line-height: 18px;
}

/* accept.html =  약관동의 레이아웃 수정 */
.all_check{
    margin-top: 20px;
}

/* InfoInput.html - 가입정보 입력 레이아웃 수정  */
.contents_top_txt_sm{
    line-height: 18px;
    margin-bottom: 20px;
    transform: translateY(-18px);
}
.contents_top_txt_sm span{
    margin-left: 20px;
}
.info-text-sm{
    margin-top: 5px;
    font-size: 12px;
    color: #ff0000;
    line-height: 16px;
}
.popover-info-new{
    color: #fff;
}

/* InputCheck.html - 가입정보확인 레이아웃 수정 */
.sub-title *{
    padding-top: 0.5rem;
    font-size: 0.8rem !important;
    font-weight: 500;
    color: #009591 !important;
    line-height: 1.1rem;
    margin-bottom: 5px;
}
.sub-title{
    border-bottom: 1px solid #eeeeee;
    margin-bottom: 5px !important;
}
.mt-16{
    margin-top: 15rem !important;
}
.notice-sm{
    position: relative;
    bottom: 0;
    top: 467px;
    font-size: 0.6rem;
    color: #777;
    line-height: 14px;
}
.notice-box{
    margin-top: 20px;
}
.notice-box li{
    line-height: 18px;
    margin-top: 10px;
}
.sm-txt{
    font-size: 0.6rem;
    color: #777;
}

/* 모달 스타일 */
.modal-bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 135vh;
    background-color: rgba(0,0,0,.5);
    z-index: 9999;
}
.modal-cont{
    background-color: #fff;
    margin: 0 auto;
    width: 320px;
    height: 170px;
    position: relative;
    top: 30%;
    border-radius: 12px;
    padding: 36px;
    box-sizing: border-box;
    text-align: center;
}
.modal-cont p{
    font-size: 18px;
    line-height: 28px;
    font-weight: bolder;
    margin-bottom: 10px;
}
.modal-cont label{
    font-size: 12px;
}

/* 확인(닫기)버튼 */
.modal-cont .close-btn{
    border: none;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 14px 0;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    background-color: #009591;
    transition: 0.3s;
}
/* 확인(닫기)버튼 비활성화 */
.modal-cont .close-btn:disabled{
    background-color: #ced3d9;
}

.on{
    display: block !important;
}

.view{
    opacity: 1 !important;
}
/* account.html - 계좌정보 레이아웃 수정 */
.bb-black{
    border-bottom: 1px solid #000 !important;
}

/* 2023-09-15 이체시작일 영역 추가 css */
.flex_wrap{
	display: flex;
	clear: both;
}
.select_style_half{
	width: 50%;
	display:block;
	overflow:hidden;
	height:2.4rem; 
	padding:0 2em 0 0.8rem;
	border:1px solid #cccccc;
	border-radius:0.375rem;
	font-size:0.8rem;
	line-height:2.3rem;
	color:#000000; 
	background-size:1.2rem auto;
	word-break:break-all;
	outline:0;
}
span.select_style_half{
	background-color: #e7e7e7;
	position: absolute;
	top: 36%;
	right: -5px;
}
span.label_right{
	position: absolute;
	right: 31%;
}

/* 24-07-17 비과세 수정 - 가로폭크기가 큰 디스플레이에서 / '이체시작일' 위치 조정 */
@media (min-width:500px){
	span.label_right{
		right: 38%;
	}
}
/* 2023-09-21 하나로아파트담보대출 */
.strong{
	color: #009178 !important;
	font-weight: bold;
}
.header-left{
	color: #333;
	text-indent: 10px;
	position: relative;
	line-height: 24px;
}
.header-left::before{
	content: '';
	position: absolute;
	top: 2px;
	left: 0;
	width: 3px;
	height: 15px;
	background-color: #ccc;
}
.agree_wrap .detail_text_box ul {
	width: 95%;
}
.agree_wrap .detail_text_box ul li{
	line-height: 22px;
}
.agree_wrap .detail_text_box input[type=text]{
	width: 50%;
    height: 40px;
    margin: 10px;
	text-align: right;
}
.font_red{
	color: #ff0000;
}
.exp_mo_box .strong{
	position: relative;
}
.list_style1 .agree_ex{
	line-height: 22px;
}
/* 23-09-22 하나로아파트담보대출: 대출조회 정보더보기 아이콘 위치 조정  */
.exp_mo_box .tit .btn_popover{
	position: absolute;
	width: 45%;
	color: #fff;
}
.exp_mo_box.popover_wrap{
	width: 300px;
}
/* 23-10 튤팁 수정 */
.popover_wrap_bottom{
	top: 100% !important;
	left: 0 !important;
	width: 300% !important;
}

/* 23-09-25 웹팩스 대출완납증명서 - 팩스번호 플러스,마이너스 btn */
.input-plus-box{
	position: absolute;
	right: 10px;
	top:50%;
	background: none;
	font-size: 20px;
	color: #009591;
}

/* 23-10 하나로아파트담보대출 - 디스플레이 크기에 따른 튤팁 크기 조정 */
@media (max-width: 340px) {
	.popover_wrap_bottom{
		width: 280px !important;
	}
}

@media (max-width: 320px) {
	.popover_wrap_bottom{
		width: 240px !important;
	}
}

/* 23-10-19 전체동의 약관 - 팝업 하단 버튼 위 텍스트 수정*/
.pos_fixed_text{
	width: 100%;
	margin: 0 auto;
	background-color: rgb(0,0,0,.6);
	padding: 10px 40px;
	border-radius: 5px;
	transform: translateY(-6px);
}
.pos_fixed_text span{
	font-size: 14px;
	font-weight: 400 !important;
	color: #fff !important;
	width: 95%;
	line-height: 24px;
}
.pos_fixed_text ul{
	line-height: 18px;
}
.pos_fixed_text ul li img{
	width: 12px;
}
.pos_fixed_text ul li:first-of-type{
	padding-right: 30px;
	position: relative;
}
.pos_fixed_text ul li:first-of-type::after{
	position: absolute;
	left: 38px;
	top: 5px;
	content: '';
	width: 0.1rem;
	height: 12px;
	background-color: #fff;
}
.pos_fixed_text ul li:last-of-type{
	padding-left: 20px;
}
/* 23-10-19 임대차사실확인 - 라디오선택 label 폰트크기 수정 */
.font-lg{
	font-size: 0.85rem !important;
}


/* 23-10-16 온라인 설명의무 */
.head_icon_box{
	width: 100%;
	text-align: center;
	transform: translateY(-10px);
}
.head_icon_box img{
	width: 120px;
}
.head_icon_box p{
	line-height: 18px;
}
.footer-info-box{
	padding: 15px;
	border-radius: 10px;
	background-color: #f5f5f5;
	line-height: 20px;
}

/* 23-10 온라인 설명의무 - 팝업 확인사항 */
.desc_list .table_wrap tbody tr td, .desc_list .table_wrap thead tr th{
	text-align: center;
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
}
/* 23-10 온라인 설명의무 - 팝업 스와이프 기능 추가 */
.terms_popup_window .swiper-slide{
	width: 100%;
	margin-top: 20px;
}
.terms_popup_window .swiper-wrapper .terms{
	padding: 0 20px;
}
/* 23-10 온라인 설명의무 - 플렉스 속성 해제 */
.nonflex .info_list > li{
	display: block !important;
}

/* 23-10 온라인 설명의무(수신) - 상단 공지 텍스트 스타일 */
.savings_content .top_noti_sm{
	padding: 20px;
	line-height: 20px;
}

/* 23-11 온라인 설명의무 - 대출한도조회 상품상세설명 */
.prd_detail_sm{
	padding: 0.5rem 3rem 0.5rem 0.2rem !important;
	border-top: 1px solid #eee;
}
.prd_detail_sm > p{
	font-size: 0.65rem !important;
    color: #797979 !important;
}
.prd_detail_sm > p button{
	width: 0.5rem !important;
	height: 0.5rem !important;
	right: 0.5rem !important;
}
.product .info_list > li.active .prd_detail_sm > p{
	color: #009591 !important;
}
.btn_sm{
	width: 20%;
    min-height: 34px;
    font-size: 0.64rem;
}
.right_align{
	float: right;
}
.border-green{
	border: 1px solid #009591 !important;
	padding: 0.8rem 0.8rem 0.1rem !important;
}
.border-green .info_list > li{
	border: none !important;
}
/* 23-11 온라인설명의무 팝업 버튼수정 - width:90% 버튼 스타일 */
.btn90{
	width: 90%;
	left: 5%;
	bottom: 10%;
}
.popup_info_layout .popup_content{
	padding-top: 15px !important;
}

/* 23-11 금융용어사전 */
.click_btn{
	width: 130px;
	margin: 0 auto;
	height: 130px;
	border-radius: 100%;
	box-shadow: 4px 4px 10px #ccc;
}
.click_btn img{	
	width: 80px;
	margin: 24px 0 0 4px;
}

.table_wrap tr th{
	text-align: center !important;
}

/* 23-2 예적금리스트페이지 리뉴얼 */
.tab_wrap2 > .tab_underline{
	border-radius: 0 !important;
}
.tab_wrap2 > .tab_underline li{
	border: none !important;
}
.tab_wrap2 > .tab_underline li:first-child{
	border-radius: 0 !important;
}
.tab_wrap2 > .tab_underline li:last-child{
	border-radius: 0 !important;
}
.tab_wrap2 > .tab_underline li.active{
	font-weight: 600;
	border-top: 0 !important;
	border-left: 0 !important;
	border-right: 0 !important;
	background: #f9f9fb !important;
}
.tab_wrap2 > .tab_nav li.active a{
	color: #000;
}
.bedge{
	border-radius: 5px;
	background-color: #fff;
	padding: 2px 6px;
	font-size: 12px;
}
/* 추천뱃지 */
.greenLineFull{
	border: 1px solid #008458;
	background-color: #008458;
	color: #fff;
	padding: 2px 8px;
}
/* 입출금뱃지 */
.purpleLine{
	border: 1px solid #6910EF;
	color: #6910EF;
}
/* 적금뱃지 */
.greenLine{
	border: 1px solid #10924D;
	color: #10924D;
}
/* 예금뱃지 */
.pinkLine{
	border: 1px solid #FE5592;
	color: #FE5592;
}

.product .img-box{
	position: absolute;
	top: 36px;
	right: 30px;
}
.product .img-box .img_sm{
	width: 74px;
	transform: translateX(-20px);
}

/* a태그의 '>' 삭제 */
.afterNone a::after{
	display: none !important;
}

/* 24-08-19 pl06 padding-left 여백만 남도록 */
.pl06 li{
	padding: 0 0 0 0.6rem !important;
}

/* 24-12-06 이체신청조회 - 신청일자 조회 버튼 추가 */
.btn_sm_search{
	right: 5px;
    border: solid 1px #009591;
    border-radius: 4px;
    font-size: 0.7rem;
    color: #009591;
    background: #ffffff;
}

/* 25-03 계좌박스 선택시 테두리 색 변경 */
.borderGreen{border: 1px solid #009178 !important;}

/* 25-08 오픈뱅킹안내 - 갤럭시 폴드 스타일 수정 */
@media (min-width: 600px) {
  .open_banking_slide .fraction{
      transform: translateY(-40px) !important;
}
.open_banking_slide img{
  width: 45%;
}
}

/* 25-08 채무조정 프로세스 : 형광펜 효과 추가 */
.marker {
	position: relative; /* 가상 요소의 위치 기준 설정 */
	padding: 0 !important;
	margin-bottom: 50px;
}

.marker::after {
	content: ''; /* 가상 요소에 내용을 표시 */
	position: absolute;
	bottom: -2px; /* 형광펜 밑줄의 위치 조정 */
	left: 0;
	width: 40%;
	height: 7px; /* 형광펜 밑줄의 두께 조절 */
	background-color: #009178; /* 형광펜 색상 */
	opacity: 0.2; /* 투명도 조절 */
	z-index: -1; /* 텍스트 뒤로 보내기 */
}
/* 25-09 모바일신분증 - 신분증 확인 화면 */
.mob_list ul li{padding: 20px 16px; border-radius: 10px; margin-bottom: 15px; border: 1px solid #ccc; box-shadow: 2px 2px 4px #e4e4e4;}
/* .mob_list ul img{width: 42px; object-fit: contain;} */
.mob_list ul span{font-size: 14px; color: #595959; font-weight: 600; margin-left: 10px;}
.mob_list img{width: 24px; float: right; transform: translateY(-4px);}

/* 25-10 여신거래 안심차단 신청 스타일 추가 */
.radio-md{
	outline: none !important; 
	line-height: 1rem !important; 
	height: 2.8rem !important; 
	padding-top: 8px !important;
}
label.radio-md::after{height: 2.8rem !important;}

/* ── 목차 ── */
.toc_wrap {
  margin: 1.2rem 0 1.5rem;
}

.toc_table {
  width: 100%;
  border-top: 2px solid #009178;
}

.toc_item {
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid #eeeeee;
  border-left: 1px solid #eeeeee;
  color: #009178;
  font-size: 0.65rem;
  text-align: left;
  cursor: pointer;
  width: 50%;
  word-break: keep-all;
  vertical-align: top;
}

.toc_item:first-child {
  border-left: 0;
}

.toc_item:active {
  background: #f0faf9;
}

.toc_item_empty {
  background: #f9f9fb;
  cursor: default;
}

/*[START] cust_601001, cust_601002용 개인정보 처리방침용 css*/
#wrap .toc_wrap { margin: 1.2rem 0 1.5rem !important; }
#wrap .toc_table { width: 100% !important; border-top: 2px solid #009178 !important; }

#wrap .toc_item {
  padding: 0.6rem 0.5rem !important;
  border-bottom: 1px solid #eeeeee !important;
  border-left: 1px solid #eeeeee !important;
  color: #009178 !important;
  font-size: 0.65rem !important;
  text-align: left !important;
  cursor: pointer !important;
  width: 50% !important;
  word-break: keep-all !important;
  vertical-align: top !important;
  background: #ffffff !important;
}
#wrap .toc_item:first-child { border-left: 0 !important; }
#wrap .toc_item:active { background: #f0faf9 !important; }
#wrap .toc_item_empty { background: #f9f9fb !important; cursor: default !important; }

#wrap .toc_cell_inner { display: flex !important; align-items: flex-start !important; gap: 0.3rem !important; }
#wrap .toc_icon { width: 18px !important; height: 18px !important; flex-shrink: 0 !important; margin-top: 0.05rem !important; }
#wrap .toc_label { white-space: pre-line !important; }

#wrap .article_header { display: flex !important; align-items: center !important; gap: 0.4rem !important; margin-bottom: 0.6rem !important; }
#wrap .article_icon { width: 32px !important; height: 32px !important; flex-shrink: 0 !important; }
#wrap .article_header em { font-weight: 600 !important; font-size: 0.85rem !important; line-height: 1.3rem !important; color: #000 !important; }

#wrap .toc_block {
  scroll-margin-top: 2.75rem;
}
/* ── 개정표 드롭다운 ── */

#wrap .cr_title {
  display: block;
  font-family: 'NotoSans', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: #111;
  margin-bottom: 0.7rem;
}

#wrap .cr_dropdown_trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 2.6rem;
  padding: 0 0.9rem;
  border: 1px solid #cccccc;
  border-radius: 0.5rem;
  background: #ffffff;
  cursor: pointer;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0,149,120,0.08);
  transition: border-color 0.15s;
}
#wrap .cr_dropdown_trigger:active {
  border-color: #009178;
  background: #f5fbf9;
}

#wrap .cr_trigger_label {
  font-family: 'NotoSans', sans-serif;
  font-size: 0.78rem;
  color: #111;
  line-height: 1;
}
#wrap .cr_placeholder {
  color: #aaa;
}
#wrap .cr_trigger_arrow {
  font-size: 1rem;
  color: #009178;
  line-height: 1;
  transition: transform 0.2s;
}

#wrap .cr_download_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  height: 2.6rem;
  margin-top: 0.5rem;
  border: none;
  border-radius: 0.5rem;
  background: linear-gradient(108deg, #16a077 0%, rgba(22,160,119,0) 53%),
              linear-gradient(108deg, rgba(0,149,145,0) 47%, #007495 100%),
              linear-gradient(to bottom, #009591, #009591);
  color: #ffffff;
  font-family: 'NotoSans', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
  box-sizing: border-box;
}
#wrap .cr_download_btn:active { opacity: 0.85; }
#wrap .cr_download_btn:disabled {
  background: #dbdbdb;
  color: #888;
  cursor: default;
}
#wrap .cr_download_icon {
  font-size: 1rem;
  font-weight: 700;
}

#wrap .cr_overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 200;
  -webkit-tap-highlight-color: transparent;
}

#wrap .cr_sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 201;
  background: #ffffff;
  border-radius: 1.2rem 1.2rem 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.12);
}
#wrap .cr_sheet_open { transform: translateY(0); }

#wrap .cr_sheet_header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 1rem 1.2rem 0.8rem;
  border-bottom: 1px solid #eeeeee;
}
#wrap .cr_sheet_title {
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  font-family: 'NotoSans', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #111;
  text-align: center;
}
#wrap .cr_sheet_close {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: url('../img/btn_header_close.png') 50% 50% no-repeat;
  background-size: 1.6rem auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#wrap .cr_sheet_list {
  list-style: none;
  margin: 0;
  padding: 0.4rem 0 0.8rem;
}
#wrap .cr_sheet_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.95rem 1.2rem;
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0,149,120,0.06);
  transition: background 0.1s;
}
#wrap .cr_sheet_item:last-child { border-bottom: none; }
#wrap .cr_sheet_item:active { background: #f5fbf9; }
#wrap .cr_sheet_item_active { background: #f0faf7; }

#wrap .cr_sheet_item_label {
  font-family: 'NotoSans', sans-serif;
  font-size: 0.8rem;
  color: #111;
  line-height: 1.4;
}
#wrap .cr_sheet_item_active .cr_sheet_item_label {
  color: #009178;
  font-weight: 500;
}
#wrap .cr_sheet_check {
  font-size: 0.9rem;
  color: #009178;
  font-weight: 700;
}
/*[END] cust_601001, cust_601002용 개인정보 처리방침용 css*/