@charset "utf-8";

/* Reset */
* {outline:0 !important;}
html,body,h1,h2,h3,h4,h5,h6,div,p,blockquote,pre,code,address,ul,ol,li,menu,nav,section,article,aside,
dl,dt,dd,table,thead,tbody,tfoot,label,caption,th,td,form,fieldset,legend,hr,input,button,textarea,object,figure,figcaption,select {margin:0;padding:0; font-family: 'Noto Sans KR','Noto Sans cjk KR', sans-serif; line-height: 120%; font-weight: 300; color: #1d1d24; word-break: keep-all;}
html, body{width:100%;}
html{-webkit-touch-callout:none; -webkit-user-select:none; -webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
body{width:100%; background:#fff; min-width:280px!important; -webkit-text-size-adjust:none;word-wrap:break-word;word-break:break-all;}
body {-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */}
body::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Opera*/}
body,input,select,textarea,button {border:none;-webkit-border-radius: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;}
ul,ol,li{list-style:none; font-size: 16px;}
table{width:100%;border-spacing:0;border-collapse:collapse;}
img,fieldset{border:0;}
address,cite,code,em{font-style:normal;font-weight:normal;}
label,img,input,select,textarea,button{vertical-align:middle;}
.hide,caption,legend{line-height:0;font-size:1px;overflow:hidden;}
hr{display:none;}
main,header,section,nav,footer,aside,article,figure{display:block;}
a{color:#1d1d1d;text-decoration:none;}
button{cursor: pointer; background:none;}
img {object-fit: contain;}
p, button, label {font-size: 16px;}
.clear {clear:both;}
.clear:after { content:""; display:block; clear:both;}
.hide{display: none}
.show{display: inline-block}

/* Form */
textarea {padding:5px 0;}
select {background:transparent; height:36px; color:#1d1d24; width: 100%;}
input[type=tel],
input[type=time],
input[type=text],
input[type=password],
input[type=search],
input[type=email],
input[type=file],
input[type=url],
input[type=number],
input[type=date],textarea {width:100%; font-size:18px; font-weight: 300; background:transparent; text-indent: 4px; transition: all 0.3s;}
input::-webkit-input-placeholder{color:#c9c9c9; font-size:18px;}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;}
select:focus{background:transparent; border: none;}
select::-ms-expand {display:none }
textarea:focus{background:transparent; border: none;}
.input:-ms-input-placeholder {color: #c9c9c9;}

/*GRID SYSTEM*/
.d-table {display: table; width: 100%;}
.d-table > div {display: table-cell; vertical-align: bottom;}
.d-table > p {display: table-cell; vertical-align: middle; text-align: center;}
.d-inblk {display: inline-block}

.column-3 {float: left; width: 33.3333%;}
.column-4 {float: left; width: 25%;}
.column-2 {float: left; width: 50%;}
.row:after {content: ""; display: table; clear: both;}
.w-10 {width: 10%;}
.w-30 {width: 30%;}
.w-50 {width: 50%;}
.w-120px {width:120px;}
.posit-rel{position: relative}

/*Common Rules*/
.t-center{text-align: center;}
.t-left{text-align: left;}
.t-right{text-align: right!important;}
.f-regular {font-weight: 300!important;}
.f-bold {font-weight: bold!important;}
.f-14 {font-size: 14px;}

.px-10 {padding-left:10px; padding-right: 10px;}
.py-10 {padding-top:10px; padding-bottom: 10px;}
.pr-10 {padding-right: 10px;}
.pt-20 {padding-top: 20px;}
.p-5{padding: 5px;}
.space-200 {height: 200px;}
.space-80 {height: 80px;}
.space-60 {height: 60px;}
.space-50 {height: 50px;}
.space-40 {height: 40px;}
.space-30 {height: 30px;}
.space-20 {height: 20px;}
.space-10 {height: 10px;}
.space-w-10{width: 10px;}
.mt-m20{margin-top:-20px;}
.mt-10 {margin-top: 10px;}/*250530*/
.mt-20 {margin-top: 20px;}/*250418*/
.mb-50 {margin-bottom: 50px!important;}
.mb-40 {margin-bottom: 40px;}
.mb-20 {margin-bottom: 20px;}
.mb-5 {margin-bottom: 5px!important;}
.p-card {padding: auto -10px;}/*250418*/
.border_none {border: none!important;}

/*Font*/
h1,h2,h3,h4,h5,h6 {line-height: 1.2em;}
h1{font-size: 18px;font-weight: bold;}
h2{font-size: 14px; font-weight: 300; color: #444;}
h3{font-size: 20px;}
h4{font-size: 16px;}
.clr-gray {color: #646464}


/*CI Custom*/
.ci .ci-area {width: 100%; height: 60px; z-index: 100; position: fixed; min-width: 280px;}
.ci .header-tit {width: 100%; text-align: center; position: absolute; overflow:hidden; height: 60px; box-sizing: border-box;}
.ci .header-cont {margin: auto; height: 60px; padding:0 60px;}
.ci .header-cont .logo {height: 24px; margin: 18px auto; background:center center no-repeat; background-size: contain;}
.ci .header-cont p:before {line-height: 60px;}

.btn_l {width: 20px; height: 20px; padding:20px; float: left; position: relative; cursor: pointer; z-index: 1}
.btn_r {width: 20px; height: 20px;  padding:20px; float: right; position: relative; cursor: pointer; z-index: 1}
.btn_back {
	width: 10px;
	height: 10px;
	border: 2px solid;
	border-top: none;
	border-right: none;
	background: transparent;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(45deg);}

.btn_close{
	width: 30px;
	height: 30px;
	overflow: hidden;
}

.btn_close:before, .btn_close:after {
	content: '';
	position: absolute;
	height: 2px;
	width: 20px;
	top: 50%;
	left: 50%;
}

.btn_close:before {
	transform: translate(-50%, -50%) rotate(45deg);
}
.btn_close:after {
	transform: translate(-50%, -50%) rotate(-45deg);}


/*카드사 컬러*/
.bg_shinhan {background-color: #014B88}
.bg_kb {background-color: #766c62}
.bg_bc {background-color: #e83c44}
.bg_samsung {background-color: #254aa5}
.bg_hyundai {background-color: #010101}
.bg_lotte {background-color: #464648}
.bg_hana {background-color: #00939f}
.bg_nh {background-color: #006ebb}
.bg_kdb {background-color: #00367f}
.bg_ibk {background-color: #03458e}
.bg_sh {background-color: #0068b7}
.bg_woori {background-color: #0064a9}
.bg_sc {background-color: #0473ea}
.bg_citi {background-color: #232a7b}
.bg_dgb {background-color: #003c83}
.bg_bnk {background-color: #cf131c}
.bg_jb {background-color: #00286c}
.bg_kbank {background-color: #0F005F}
.bg_kakao {background-color: #ffe600}
.bg_skt {background-color: #e30613}
.bg_kt {background-color: #1d1d1b}
.bg_lgu {background-color: #e1007b}
.bg_tel {background-color: #ffd64f}
.bg_toss {background-color: #0064FF}
.bg_nh2 {background-color: #1fb25a}
.bg_suhyup {background-color: #0072bc}
.bg_suhyup {background-color: #0072bc}
.bg_cu {background-color: #1061af}
.bg_sb {background-color: #007260}
.bg_sj {background-color: #022662}
.bg_mg {background-color: #1f366a}
.bg_post {background-color: #231f20}
.bg_kyobo {background-color: #0f2c52}
.bg_ma {background-color: #073d77}
.bg_eg {background-color: #5c6162;}
.bg_ebest {background-color: #006899}
.bg_kw {background-color: #003d79}
.bg_ki {background-color: #632D00}
.bg_hanwha {background-color: #f1592a}
.bg_hd {background-color: #00448d}
.bg_meritz {background-color: #231F20}
.bg_ds {background-color: #605e5f}
.bg_db{background-color: #017f40}
.bg_daol {background-color: #1d1d24}
.bg_payco {background-color: #E7241F;}/*240701 추가*/
.bg_jb {background-color: #002678;}/*240701 추가*/

/*Style CSS*/
.wrap {padding: 10px 30px; box-sizing: border-box;}
.wrap-w {padding: 10px 20px!important; box-sizing: border-box;}
.cont-scroll {position: fixed; width: 100%; overflow-y: scroll; bottom: 52px; top: 60px;
	-ms-overflow-style: none;
	scrollbar-width: none;}
.cont-scroll::-webkit-scrollbar {
	display: none;
}
/* Input Field */
.form-cont {width: 100%; height: 100%; display: block;}
.input_nor {position: relative;	margin-bottom: 40px; padding-top: 10px;}
.input_nor > input {border: 0; ;height: 40px;display: block;border: none; color: #1d1d24;}
.input_nor > input:focus {outline: none;}
.label-text {
	color: #c9c9c9;
	font-size: 18px;
	line-height: 18px;
	font-weight: 300;
	position: absolute;
	pointer-events: none;
	text-indent: 4px;
	top:20px;
	transition: 0.3s ease all;
	-moz-transition: 0.3s ease all;
	-webkit-transition: 0.3s ease all;
	word-break:keep-all;
}
.input:focus ~ .label-text{
	position: absolute;
	top: -14px;
	font-size: 14px;
	font-weight: bold;
	text-indent: 0;
}
.input:valid ~ .label-text{
	position: absolute;
	top: -14px;
	font-size: 14px;
	font-weight: bold;
	text-indent: 0;
}
.label-text-fix{
	position: absolute;
	top: -14px;
	/*margin-bottom: px;*/
	font-size: 14px;
	font-weight: bold;
	text-indent: 0;
	color: #c9c9c9
}


.label-bank{left: -100px;}
.label-tel{left: -130px;}

.bar {
	border-bottom: 2px solid #c9c9c9;
	position: relative;
	display: block;
}
.bar:before,
.bar:after {
	content: '';
	border-bottom: 2px solid;
	width: 0;
	position: absolute;
	transition: 0.3s ease all;
	-moz-transition: 0.3s ease all;
	-webkit-transition: 0.3s ease all;
}

.input:focus ~ .bar:before,
.input:focus ~ .bar:after {
	width: 100%;
}

.bar:before {
	left: 0;
}/*250701 추가*/

.bar:after {
	left: 0; ;
}/*250701 추가*/

.highlight {
	position: absolute;
	width: 100%;
	pointer-events: none;
}

.input:focus ~ .highlight {
	-webkit-animation: inputHighlighter 0.3s ease;
	-moz-animation: inputHighlighter 0.3s ease;
	animation: inputHighlighter 0.3s ease;
}

/*잉카키패드 사용 시 - 210826*/
.input-focus ~ .label-text{
	position: absolute;
	top: -14px;
	font-size: 14px;
	font-weight: bold;
	text-indent: 0;
}
.input-valid ~ .label-text{
	position: absolute;
	top: -14px;
	font-size: 14px;
	font-weight: bold;
	text-indent: 0;
}


.input-focus ~ .bar:before,
.input-focus ~ .bar:after {
	width: 100%;
}

.input-focus ~ .highlight {
	-webkit-animation: inputHighlighter 0.3s ease;
	-moz-animation: inputHighlighter 0.3s ease;
	animation: inputHighlighter 0.3s ease;
}

.input_wrap .label_text img { display: flex; align-items: center; cursor: pointer; width: 20px; height: auto;}/*250530*/
.input_nor .search-icon { position: absolute; right: 4px; top: 60%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; padding: 0 4px;}/*250530*/
.input_nor .search-icon img {width: 16px;}/*250530*/

/*잉카키패드 사용 시 - 210826*/



/*Select box*/
.btn_sel {background:transparent; font-size:14px; color:#1d1d24;}
.select {width: 100%; height:36px; padding-right: 20px; text-align: left; text-indent: 4px;}
.select {border-bottom: 2px solid #c9c9c9;}
.select:focus {border-bottom: 2px solid ;}
.select > span{
	width: 6px;
	height: 6px;
	border: 2px solid #1d1d24;
	border-top: none;
	border-right: none;
	background: transparent;
	transform: rotate(315deg);
	cursor: pointer;
	float: right;
	position: absolute;
	right: 8px;
	z-index: -1;}

.select + label {
	content: '';
	width: 6px;
	height: 6px;
	border: 2px solid #1d1d24;
	border-top: none;
	border-right: none;
	background: transparent;
	transform: rotate(315deg);
	cursor: pointer;
	float: right;
	position: absolute;
	top: 26px;
	right: 8px;
	z-index: -1;}

.btn_sel .select_box {
	/*    height: 20px;*/
	text-align: center;
	border-radius: 4px;
	border: 1px solid #c9c9c9;
	padding: 5px 5px 5px 12px;
	margin: 6px auto;
	text-align: left;
}
.btn_sel .select_box img {
	float: right;
	margin: 5px 5px 0 10px;;
	transform: rotate(180deg);
	width: 12px;

}

.input-t {width: 100%; font-size: 14px; height: 20px; display: table-cell; vertical-align: middle; padding: 10px}
.input-mask {min-width: 60px; margin:0; padding: 0; position: absolute; left: 20px; top: 20%; font-size: 14px; }/*210901*/

.due-date input:focus ~ .label-text-due:before{content: 'MM';
	color: #c9c9c9;
	font-size: 18px;
	line-height: 18px;
	font-weight: 300;
	position: absolute;
	pointer-events: none;
	text-indent: 4px;
	top:20px;
	transition: 0.3s ease all;
	-moz-transition: 0.3s ease all;
	-webkit-transition: 0.3s ease all;
	word-break:keep-all;}

.due-date input:valid ~ .label-text-due:before {display: none}


/*텍스트 버튼*/
.input-guide {
	font-size: 12px;
	color: #1d1d24;
	position: absolute;
	padding: 0px;
	top: 54px;
	left: 0;
	width: 100%;
	display: table;
	height: 16px
}
.input-guide img{width: 14px; margin-right: 5px;
}
.input-guide a{
	top: 2px;
	left: 6px;
	line-height: 1em;
	cursor: pointer;
}
.input-guide span{vertical-align: middle;}

.btn_text {color: #2398ff; text-decoration: underline; width: 100%; font-size: 14px;}
.btn_sm{font-size: 13px;  width: 100%; height: 40px; font-weight: bold; border: 1px solid; border-radius: 4px; margin-top: 10px;}
.btn_sm_round {padding: 5px 10px; border-radius: 50px;}


/*약관 동의 LIST 접힘/펼침*/
/* .agr-cont {
	overflow: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;

	transition: 0.2s ease all;
	-moz-transition: 0.2s ease all;
	-webkit-transition: 0.2s ease all;
} */
/* .agr-cont::-webkit-scrollbar {display: none;} */
.agr {width: 100%; position: relative;}
.agr input[id*="chk_agr"]{display: none;}
.agr input[id*="chk_agr"] + label {position: absolute; right: 0; top: 0;}
.agr input[id*="chk_agr"] + label span {font-size: 12px; text-decoration: underline;}
.agr input[id*="chk_agr"] +label + div {max-height: 0;}
/* .agr input[id*="chk_agr"] +label + div .agr-cont_p  {max-height: 300px; font-size:14px; line-height: 1.5em;background: #F4F4F4; padding: 20px; overflow-y: scroll;}/*210802*/
.agr input[id*="chk_agr"]:checked + label span {transform: rotate(180deg)}
.agr input[id*="chk_agr"]:checked + label + div {max-height: 5000px;}
.agr-cont {margin-top: 5px;max-height: 500px;overflow-y: auto;}
.agr span[class="acc_all"] {top: 26px;}

/* 20230921 약관동의 - 새창 */
.agr-detail-btn label{position: absolute; right: 0; top: 0;cursor: pointer;}
.agr-detail-btn label span{font-size: 12px; text-decoration: underline;font-weight: bold;}
.agr-cont2{text-align: center;}
.agr-cont2 .agr-cont_p{max-width: 700px;width:100%;display: inline-block;;}
.agr-cont2 .agr-cont_p p{font-size:16px;line-height: 2em;text-align: left;word-break: break-all;}



/*체크박스*/
input[type="checkbox"] + label {
	font-size: 16px;
	font-weight: bold;
	vertical-align: middle;
}

input[type="checkbox"] {
	position: absolute;
	left:0;
	border: 0px solid transparent;
	width: 0px;
	height: 0px;
	background: transparent;
}

.chk {margin: 8px 20px 12px 0;}
.chk label {font-size: 16px; }
input[type="checkbox"] ~ .chk_l_label {position: absolute; left: 40px; margin-right:40px;}
input[class="chk_box"] ~ .chk_l_label {top: 3px;}
input[class="chk_lg"] ~ .chk_l_label {top: 5px;}
input[class="chk_sm"] ~ .chk_l_label {top: 3px;}

.chk_sel {color: #fff}
.chk_all {margin-bottom: 0; font-size: 18px;}
.chk_all span {position: absolute; top: -2px}
.chk_all p {margin-bottom: 10px; font-weight: 500; word-break: break-all;}/*240701 word-break 추가*/

/*체크박스-원형*/
input[class="chk_lg"] + label:before {
	content: '';
	display: inline-block;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid #c9c9c9;
	position: relative;
	cursor: pointer;
	transition: 0.3s ease all;
	-moz-transition: 0.3s ease all;
	-webkit-transition: 0.3s ease all;
}
input[class="chk_lg"]:disabled + label:before {
	background-color:#ccc;
	cursor:default;
}
input[class="chk_lg"]:checked + label:after {
	content: '';
	width: 10px;
	height: 5px;
	position: absolute;
	top: 10px;
	left: 9px;
	border: 2px solid #fff;
	border-top: none;
	border-right: none;
	background: transparent;
	transform: rotate(315deg);
}

input[class="chk_lg"]:checked ~ .chk_l_label {
	font-weight: bold;
}
/*체크박스-박스*/
.label_box {margin-top: 19px; left: 28px; color: #c9c9c9; font-size: 15px; margin-right: 0}
input[class="chk_box"]:checked ~ * {color: #fff; font-weight: bold;}
input[class="chk_box"] + label:before {
	content: '';
	display: inline-block;
	width: 100%;;
	height: 60px;
	border-radius: 10px;
	border: 1px solid #c9c9c9;
	position: relative;
	top: 0;
	left: -16px;
	padding-right: 30px;
	cursor: pointer;
	transition: 0.3s ease all;
	-moz-transition: 0.3s ease all;
	-webkit-transition: 0.3s ease all;
}

input[class="chk_box"] + label:after {
	content: '';
	width: 10px;
	height: 5px;
	position: absolute;
	top: 26px;
	left: 5px;
	border: 2px solid #c9c9c9;
	border-top: none;
	border-right: none;	background: transparent;
	transform: rotate(315deg);
}

input[class="chk_box"]:checked + label {
	color: #fff;
}

input[class="chk_box"]:checked + label:after {
	border: 3px solid #fff;
	border-top: none;
	border-right: none;
}



/*체크박스-기본*/
input[class="chk_sm"] ~ .chk_l_label {
	position: relative;
	word-break: break-all;
	display: inline-block;
	font-weight: 300;
	padding-right: 40px;
}

input[class="chk_sm"]:checked ~ .chk_l_label {
	font-weight: bold;
}
input[class="chk_sm"] + label {
	position: absolute;
}
input[class="chk_sm"] + label:before {
	content: '';
	position: relative;
	top: 0px;
	left: 9px;
	display: inline-block;
	width: 10px;
	height: 5px;
	border: 2px solid #c9c9c9;
	border-top: none;
	border-right: none;
	background: transparent;
	transform: rotate(315deg);
	cursor: pointer;
	transition: 0.3s ease all;
	-moz-transition: 0.3s ease all;
	-webkit-transition: 0.3s ease all;
}


input[class="chk_sm"]:checked + label:after {
	content: '';
	position: relative;
	top: 0px;
	left: -3px;
	display: inline-block;
	width: 10px;
	height: 5px;
	border: 2px solid;
	border-top: none;
	border-right: none;
	background: transparent;
	transform: rotate(315deg);
}

/*체크박스-커스텀*/
input[class="chk_custom"] ~ .chk_l_label {
	position: relative;
	word-break: break-all;
	display: inline-block;
	font-weight: 300;
	padding-right: 12px
}

input[class="chk_custom"]:checked ~ .chk_l_label {
	font-weight: bold;
}
input[class="chk_custom"] + label {
	position: absolute;
}
input[class="chk_custom"] + label:before {
	content: '';
	position: relative;
	top: 0px;
	left: 9px;
	display: inline-block;
	width: 10px;
	height: 5px;
	border: 2px solid #c9c9c9;
	border-top: none;
	border-right: none;
	background: transparent;
	transform: rotate(315deg);
	cursor: pointer;
	transition: 0.3s ease all;
	-moz-transition: 0.3s ease all;
	-webkit-transition: 0.3s ease all;
}


input[class="chk_custom"]:checked + label:after {
	content: '';
	position: relative;
	top: 0px;
	left: -3px;
	display: inline-block;
	width: 10px;
	height: 5px;
	border: 2px solid;
	border-top: none;
	border-right: none;
	background: transparent;
	transform: rotate(315deg);
}

/*account-resi 은행선택*/
.btn_bank {background: #fff; border: 1px solid #c9c9c9; margin: 2px; padding:10px 0  20px; text-align: center; height: 54px; border-radius: 4px;}
.btn_bank span {font-size: 13px;}/*210901*/
.btn_bank > * {display: block;margin: auto; word-break: break-all;}
.btn_bank >img{width: 100%; max-width: 40px; }

.tab_list .btn_bank {padding: 16px 5px 16px 0; height: 30px; display: flex; }
.tab_list .btn_bank > * {display: inline-block; vertical-align: middle;}
.tab_list .btn_bank > span { width: 100%; text-align: left;}
.tab_list .btn_bank > img {max-width: 30px; margin: 0 5px;}


/*Popup 팝업*/

.pop_bg{width: 100%; height: 100%; overflow: hidden; position: fixed; z-index: 1000;
	transition: 0.3s ease all;
	-moz-transition: 0.3s ease all;
	-webkit-transition: 0.3s ease all;}

.popup{
	position: fixed;
	left: 50%; top: 50%;
	background: #fff;
	text-decoration: none;
	border-radius: 20px;
	transform: translate(-50%, -50%);
	width: 80%;
	box-shadow: 0 0 20px rgba(0,0,0,0.1);
	box-sizing: border-box;
	padding: 30px 20px 20px 20px;
	z-index: 102;
	transition: all 0.5s;
	overflow: hidden;
	max-width: 600px;
	min-width: 260px;
}
.popup_dim{
	z-index:101;
	position: fixed;
	left: 0; top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.4);
	overflow: hidden;}

.dim_wt{background: rgba(255,255,255,0.4);}


/*210903 팝업 dim 배경 수정*/
.popup {display: block;}
.popup + .popup_dim {display: block;}
.popup2 {display: block;}
.popup2 + .popup_dim {display: block;}
.popup3 {display: block;}
.popup3 + .popup_dim {display: block;}

.popup .btn_close {position: absolute; right: 30px; top: 30px; background:url(../images/ic_close.svg) center center no-repeat; width: 20px; height: 20px;}
.popup h1 {text-align: left; margin:5px 40px 20px 5px}
.popup p{text-align: left; margin:0 10px; line-height: 1.3em; }
.popup .pop_img {width: 100%; display: table; margin: auto;}
.popup img {width: 50%;  max-width: 240px; margin: 0 auto; display: table-cell; padding: 20px;}
.pop_btns{width: 100%; display: flex;}
.pop_btns a {width: 100%; display: inline-block; padding-right: 4px;}
.pop_btns a:nth-last-child(1){padding-right:0px;}
.pop_bot_btn {height: 40px; border-radius:24px; text-align: center; margin-top: 20px; line-height: 40px; font-weight: bold; border: 1px solid; font-size: 16px;}
/*.pop_list_on {background: }*/

.popup_txt {
	margin: 0;
	padding: 10px;
	border: 1px solid #c9c9c9;
	border-radius: 10px;
	width: 100%;
	height: 280px;
	overflow-y: auto;
	box-sizing: border-box;
	cursor: pointer;}/*250530*/

.popup2{
	position: fixed;
	left: 50%; top: 50%;
	background: #fff;
	text-decoration: none;
	border-radius: 20px;
	transform: translate(-50%, -50%);
	width: 80%;
	box-shadow: 0 0 20px rgba(0,0,0,0.1);
	box-sizing: border-box;
	padding: 30px 20px 20px 20px;
	z-index: 102;
	transition: all 0.5s;
	overflow: hidden;
	max-width: 600px;
	/* min-width: 280px; */
	max-height: 800px;
}
.popup2 .btn_close {position: absolute; right: 30px; top: 30px; background:url(../images/ic_close.svg) center center no-repeat; width: 20px; height: 20px;}
.popup2 h1 {margin-bottom:24px; margin-right: 40px; max-height: 60px;}
.popup2 .list {padding-top: 4px; overflow-x: hidden; max-height: 300px; margin-top: 12px;}
.popup2 .list ul {clear: both; height: auto; }
.popup2 .list ul li {display: flex; vertical-align: middle; cursor: pointer; padding: 10px;}
.popup2 .list ul li span{margin-right: 20px;}
.popup2 .list ul li h6 {font-size: 16px;}/*210901*/

/* 230210 */
.popup2 .list_coupon {margin-bottom: 10px; padding: 16px;border: 1px solid #c9c9c9; border-radius: 10px; position: relative; }
.popup2 .list_coupon h5 {margin-right:74px; word-break:break-all; font-size: 16px; margin-bottom: 5px;}
.popup2 .list_coupon h5 b{display: inline-block; margin-right: 5px;}
.popup2 .list_coupon p {margin-right: 74px; word-break: break-all;}
.popup2 .list_coupon button {float: right; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-weight: bold; border: 1px solid #c9c9c9; padding: 10px 20px; border-radius: 4px; color: gray; }
.popup2 .list_coupon button:hover {background-color: #c9c9c933;}

.popup2 .grid {overflow: hidden; max-height: 600px;}
.popup2 .grid ul {
	display:grid;
	display: -ms-grid;
	grid-template-columns:1fr 1fr 1fr;
	-ms-grid-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	-ms-grid-rows: 1fr 1fr;
	overflow: auto;}
.popup2 .grid ul li {display: table; text-align: center; border: 1px solid #c9c9c9; border-radius: 10px; padding:20px; margin: 2px;}
.popup2 .grid ul li>div {display:block;margin: auto; margin-bottom: 10px;}
.popup2 .grid ul img {width: 50%;}
.popup2 .grid ul span {display:table-row; text-align: center; vertical-align: middle;}
.popup2 .grid .btn-sel {border: 2px solid #c9c9c9}


.popup3{
	position: fixed;
	left: 50%; top: 50%;
	background: #fff;
	text-decoration: none;
	border-radius: 20px;
	transform: translate(-50%, -50%);
	width: 80%;
	box-shadow: 0 0 20px rgba(0,0,0,0.1);
	box-sizing: border-box;
	padding: 30px 20px 20px 20px;
	z-index: 102;
	transition: all 0.5s;
	overflow: hidden;
	max-width: 600px;
	min-width: 280px;
	max-height: 800px;
}
.popup3 .btn_close {position: absolute; right: 30px; top: 30px; background:url(../images/ic_close.svg) center center no-repeat; width: 20px; height: 20px;}
.popup3 h1 {margin-bottom:12px; margin-right: 40px; max-height: 60px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.popup3 .pop-h-des{margin-bottom: 20px; font-size: 14px; width: 100%;}
.popup3 .list {padding-top: 4px; overflow-x: hidden;}
.popup3 .list ul {clear: both; height: auto; max-height: 300px; overflow-y: scroll; }
.popup3 .list ul li {display: table; cursor: pointer;padding: 10px;}
.popup3 .list ul li img {display: table-cell;vertical-align: top;  width: 100px; margin-right: 10px;}/*210901*/
.popup3 .list ul li span{display: table-cell;vertical-align: top;  height: 100%;  margin-right: 20px;}
.popup3 .input_nor {margin-bottom: 10px;}

.pop_agr .popup{width: 90vw; height: 90vh; border-radius: 20px; padding-top: 60px;}
.pop_agr .popup .terms_area{height: 100%; overflow-y: auto;}

@media screen and (max-width: 640px) {
	.popup2 {
		transform: translate(0, 0);
		width: 100%;
		border-radius: 20px 20px 0 0;
		top: unset;
		bottom: 0;
		left: 0;
	}

	.popup2 .list{box-sizing: border-box;}
	.popup2 .pop_btns {display: none;}
	.popup2 .list ul {overflow-y: scroll; clear: both; height: 240px;}
	.popup2 .grid ul img {width: 90%;}
	.popup2 .grid ul span {font-size: 14px; line-height: 1;}
	.popup2 .grid li {height: 70px;}

	.popup3 {
		transform: translate(0, 0);
		width: 100%;
		border-radius: 20px 20px 0 0;
		top: unset;
		bottom: 0;
		left: 0;
	}
}


/*ARS 인증요청*/
.circle {max-width: 400px; margin: auto; text-align: center; position: relative; padding: 30px}
.circle svg {width: 90%;}
.ars_cont > * {display: inline-block; padding:5px 10px;}
.ars_cont > span {margin-top: 20px; font-size: 20px; line-height: 140%;}
.ars_cont .cert-num {display: block; font-size: 80px; margin: 10px}
.cst-color-red {color: #ff4f4f}
.cst-bg-red {background-color: #ff4f4f; color: #fff;}
.cst-bg-gr {color: #fff;}

/*PIN password*/
.pw-cont .pin label {
	z-index: 10;
	display: block;
	text-align: center;
	background: #fff;
	height: 20px;
	margin: auto;
}

.pw-cont .pw-input {
	height: 20px;
	width: 248px;
	position: absolute;
	z-index: -1;
}

.pw-cont .pin label i {
	display: inline-block;
	margin: 0 6px;
	width: 16px;
	height: 16px;
	border-radius: 50%;;
	-webkit-border-radius: 50%;;
	-moz-border-radius: 50%;;
	-o-border-radius: 50%;;
	background-color: #c9c9c9;
	background-color: #c9c9c9;

}

.pw-cont .pin label i.on {
	/* box-shadow: 0 2px 5px rgba(0,0,0,0.4) */
}


/*결제 수단 선택*/

.pay_cont .select_box {min-width: 70px;}
.pay_cont .cash-reci .select_box {width: 120px;}
.pay_cont .cash-reci {margin-top: 10px;}
.pay_cont .cash-reci_chk{display: inline; position: relative; margin-right: 16px}
.pay_cont .cash-reci_chk input[class="chk_lg"]+ .cash-reci_label_chk:before {position: absolute; top: 1px}
.pay_cont .cash-reci_chk input[class="chk_lg"]:checked + .cash-reci_label_chk:before {}
.pay_cont .cash-reci_chk input[class="chk_lg"]:checked + .cash-reci_label_chk:after {position: absolute; top:12px; left:9px;}
.pay_cont .cash-reci_chk input[class="chk_lg"] ~ .cash-reci_label {
	width: 200px;
	margin-left: 36px
}
.pay_cont .cash-reci_chk input[class="chk_lg"]:checked ~ .cash-reci_label {
	font-weight: bold;
	width: 200px;
}
.pay_cont .cash-reci_input {min-width: 260px; margin: auto; margin-top: 20px;}

.pay_cont .bdg_coupon:before{content: '할인쿠폰'; }
.pay_cont .bdg_coupon {
	line-height: 20px;
	font-size: 12px;
	position: absolute;
	color: #fff;
	background: #FFAA00;
	padding: 2px 6px;
	margin-left: 4px;
	border-radius: 4px;
}
.bdg_coupon_cancel:before{content: '쿠폰취소'!important; }
.bdg_coupon_cancel{background: #C9C9C9!important; }

/* 250701*/
.pay_done {background: #fff; padding: 0 30px;overflow: hidden; position: fixed; width: 100%; min-width: 280px; bottom: 20px; z-index: 1; box-sizing: border-box; }
.form-cont span {font-size: 14px;}


input[id="fav-card"] + label {color: #c9c9c9; vertical-align: center; font-size: 20px; line-height: 17px;/* z-index: 99;*/ cursor: pointer; z-index: 2; position: relative;}
input[id="fav-card"] + label.fav-card-on { color: #FFAA00;}

/* 250418 swiper ******************************************/

.swiper-bottom-bar {
	position: absolute;
	top: 18px;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10;
	gap: 8px;
	padding-left: 8px;
}

.swiper-pagination {
	position: static !important;
	margin: 0 !important;
	transform: none !important;
	display: flex;
	gap: 8px;
}

.add_btn {
	width: 22px;
	height: 22px;
	background: url("../images/ic_plus.svg") no-repeat center center;
	background-size: contain;
	border: none;
	display: inline-block;
	padding: 0;
}

.swiper-slide {
	width: 310px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.swiper-container {
	margin: 0 auto; /*250701 수정*/
	margin-bottom: -20px;
}
.swiper-wrapper {
	height: 195px !important;
	margin: 28px auto; /*250701 수정*/
}

.swiper-pagination {
	bottom: 0;
	z-index: 0 !important;
}

.swiper-wrapper .swiper-slide .card-bg {
	width: 300px;
	height: 195px;
	border-radius: 16px;
	background-color: #fff;
	border: solid 1px #d7d7d7;
	padding: 6px;
	box-sizing: border-box;
	position: relative;
	box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.08);
}

.swiper-wrapper .swiper-slide .card-bg .card-img {
	width: 100%;
	height: 100%;
	border-radius: 12px;
	overflow: hidden;
	position: relative;
}

.swiper-wrapper .swiper-slide .card-bg .card-img > img {
	width: 100%;
	max-width: 310px;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0 auto;
	border-radius: 12px;}
.swiper-wrapper .swiper-slide .card-bg .card-img > .no-card-img {width: 287px; height: 100%;}
.swiper-wrapper .swiper-slide .card-bg .card-img > .no-card-img > img {width: 60%; padding-top: 25%; padding-left: 20%;}
.swiper-wrapper .pay_card_pop_more {position: relative; float: left}
.swiper-button-prev:after, .swiper-button-next:after {transform: scale(0.55); color:#1d1d24;}
/*세로형 이미지 rotate*/
.img-hz {
	transform: rotate(-90deg);
	transform-origin: center center;
	display: block;
	max-width: 188px !important;
	height: auto !important;
	margin: -62px auto !important;
}
/*******************************************/

/*결제수단 카드 내 팝업*/
.pay_card .card-info{
	width: 100%; height: 100%;
	background: rgba(0,0,0,0.5) url("../images/btn_card_more.svg") center center no-repeat;
	background-size: contain;
	border-radius: 50%;

	height: 24px;
	width: 24px;
	position: absolute;
	top: 6px;
	right: 50%;
	margin-right: -94px;
	z-index: 2;
}

.pay_card .card-info_close{
	width: 100%; height: 100%;
	background: url("../images/ic_close.svg") center center no-repeat ;
	background-size:60%;
	border-radius: 50%;

	height: 24px;
	width: 24px;
	position: absolute;
	top: 2px;
	right: 50%;
	margin-right: -86px;
	z-index: 99;
}




.card-info-pop {position: absolute; top: 4px; right: 50%; margin-right: -96px; z-index: 3;
	transition: 0.3s ease all;
	-moz-transition: 0.3s ease all;
	-webkit-transition: 0.3s ease all;}



.popup_dropdown {
	width: 130px;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 2px 2px rgba(0,0,0,0.5);
	padding: 10px 30px 10px 15px;
}
.popup_dropdown ul li {font-size: 14px; text-align: left; line-height: 2em; }



.pay_card .card-num{
	height: 50px;
	width: 200px;
	position: absolute;
	bottom: 0px;
	left: 50%;
	border-radius: 10px;
	transform: translate(-50%);
	z-index:2;
	background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.3));
	color: #fff;
	display: table;

}
.pay_card .card-num span {
	display: table-cell;
	vertical-align: bottom;
	padding: 10px;
	text-align: left;
	background: transparent;
	font-size: 12px;
}
/*.pay_card .pay_add {border: 1.5px dashed #c9c9c9; position: relative; padding: }*/
/*.pay_card .pay_add h4 {margin-top: 20px;}*/
/*.pay_card .pay_add ul {position: absolute; width: 100%; margin-top: 18px;}*/
/*.pay_card .pay_add ul li {display: inline-block; width: 30%; vertical-align: top; font-size: 14px;}*/
/*.pay_card .pay_add ul li a {cursor: pointer}*/
/*.pay_card .pay_add ul li img {width: 40px; display: block;margin:auto;}*/
/*.pay_card .pay_add .pay_add_ic {background: url("../images/pay_add_ic.png") center center no-repeat; width: 30px; height: 30px; margin: auto; margin-top: 40px;*/
/*	background-size: cover; }*/
/*.swiper-wrapper .swiper-slide:nth-child(2) .pay_add {box-shadow: none;}*/

/*결제수단추가 250430*/
.pay_card .pay_add {border: 1.5px dashed #c9c9c9; position: relative; padding: }
.pay_card .pay_add h4 {margin-top: 24px; font-weight: 500; text-align: center;}
.pay_card .pay_add ul {display: flex; justify-content: center; width: 100%; margin-top: 24px;}
.pay_card .pay_add ul li {display: inline-block; width: 30%; vertical-align: top; font-size: 14px; text-align: center;}
.pay_card .pay_add ul li a {cursor: pointer}
.pay_card .pay_add ul li img {width: 48px; display: block; margin: auto;}
.pay_card .pay_add .pay_add_ic {background: url("../images/pay_add_ic.png") center center no-repeat; width: 30px; height: 30px; margin: auto; margin-top: 56px; background-size: cover; }
.swiper-wrapper .swiper-slide:nth-child(2) .pay_add {box-shadow: none;}

.card-num {vertical-align: middle;}/*250418*/
.card-name {display: inline-block; max-width: 11em;/*글자수조절*/ overflow: hidden;text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;}/*250418*/
.card-name-btn {width: 18px; height: 18px; /* margin-left: -8px;*/ background: url("../images/ic_edit.svg") no-repeat center center; background-size: contain; border: none; cursor: pointer; vertical-align: middle; z-index: 2; position: relative;}/*250418*/


/* 헤더 탭 220725*/
.header-fix {position: fixed; top: 60px; left: 0; right: 0; margin: auto; height:94px; z-index: 10; clear: both; padding-top: 10px; background-color:#fff;}
.tab_btn {width: 100%; box-sizing: border-box;}
.tab_btn ul {display: flex; margin-top: 10px;}
.tab_btn ul li{display:inline-block; text-align: center; flex: 1;}
.tab_btn ul li a{padding:10px; font-size: 14px; border-bottom: 3px solid #c9c9c9; display: inline-block; width: 100%; box-sizing: border-box;}
.tab_btn ul li a.act {font-weight: bold; border-bottom: 3px solid #1d1d24;}
.tab_list {position: absolute; top:164px; bottom: 0; left: 20px; right: 0px; overflow: auto;padding-right:20px;box-sizing: border-box;}
.tab_list ::-webkit-scrollbar {width: 4px;}
.tab_list ::-webkit-scrollbar-track { background-color:rgba(0, 0, 0, 0); }
.tab_list ::-webkit-scrollbar-thumb { background: var(--gray02);}
.tab_list ::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active {background: var(--wt50);}
.tab_list ::-webkit-scrollbar-button { display: none; }

header h2 {color: #111;} /* 240701 추가 */
.pay_cont h2,h3 {color: #111;} /* 240701 추가 */

@media screen and (max-width: 388px) {
	.tab_list .column-4 {width: 49%;}
}



/*loading 로딩*/
.loading {position: fixed; top: 50%; left:50%; transform: translate(-50%, -50%)}
.loading svg {height: 100px; width: 100px;}
.loading img {height: 100px; width: 100px;}


/* #bank_list, #sec_list{position: absolute;} */
.ic_error {width: 10%; min-width: 120px; text-align: center; margin: auto; padding: 30px;}

/*하단 고정 버튼*/
.btn_bot {position: fixed;bottom: 0;width: 100%;height: 52px; background: #c9c9c9; z-index: 100}
.btn_bot>span{color: #fff;font-size: 18px;font-weight: bold;line-height: 52px;padding: 0 10px;}
.btn_dim {background: #c9c9c9}
.btn_dim>span {opacity: 0.5;}


/* 기본 리스트 */
ul.list li {padding: 20px; border-bottom: 1px solid #c9c9c9;}


/* 240430 OCR 카드스캔 */
.scan-box-wrap {display: flex;}
.wrap_btn_card {width: 100%; display: flex; justify-content: flex-end;}

button.cardOCR {display: flex; align-items: center; width: auto; max-width: 40%; border: 2px solid #c9c9c9; padding: 5px 8px; border-radius: 4px; text-align: left; font-size: 14px; font-weight: 600;} /* 250314 변경 */
button.cardOCR h6 {font-size: 14px; font-weight: 600; color: #4e2aa1; margin-left: 3px;}
button.cardOCR p {margin-right: 20px;}
button.cardOCR img {width: 100%; max-width: 30px;}

/* 240430 OCR 카드스캔_popup_ver. */
button.cardOCR_pop {width: auto; max-width: 40%; border: 2px solid #c9c9c9; padding: 5px 10px;  border-radius: 4px; text-align: left; font-size: 14px; font-weight: 600; color: #4e2aa1;} /* 250314 변경 */
button.cardOCR_pop h6 {font-size: 14px; font-weight: 600; color: #4e2aa1; margin-left: 3px;}
button.cardOCR_pop p {margin-right: 20px;}
button.cardOCR_pop img {width: 100%; max-width: 30px;}

/* 220811 내 카드 불러오기 */
.bottom_fix {position: fixed; left: 0; bottom: 52px; background-color: #fff; padding: 20px 40px; z-index: 99; border-radius: 20px 20px 0 0; width: 100%; box-sizing: border-box; box-shadow: 0 0 20px rgba(0,0,0,0.1); min-width: 240px;}
.bottom_fix .accord {overflow-y: auto;}

button.cardImport {width: auto; max-width: 40%; border: 2px solid #c9c9c9; padding: 5px 10px; border-radius: 4px; text-align: left; position: relative; font-size: 14px; font-weight: 600; white-space: nowrap;} /* 250314 변경 */
button.cardImport h6 {font-size: 14px; font-weight: 600; color: #4e2aa1; white-space: nowrap;}
/*button.cardImport h6 {font-size: 16px; font-weight: 700; padding-bottom: 4px;}*/
button.cardImport p {margin-right: 20px;}
button.cardImport img {position: absolute; right: 20px; top: 50%; transform: rotate(90deg) translateX(-2px);}

.import_list {position: relative;box-sizing: border-box; display: flex; align-items: center; margin: 10px -20px; border: 1px solid #c9c9c9; border-radius: 10px; padding: 6px;}
.import_list .card_img{display: inline-block; height: 92px; width: 60px; border-radius: 4px; background: #F4F4F4; position: relative; background-repeat: no-repeat; background-size: contain;}
.import_list .card_img img.no-img{position: absolute; width: 50px; top: 50%; left: 50%; transform: translate(-50%, -50%); box-sizing: border-box;}
/* .import_list .card_img img.img{position: absolute; top: 0; left:0; height: 92px; width: 60px;} */
.import_list .card_img img.img{position: absolute; top: 0; height:40px; width: 60px; margin-top: 25px; transform: rotate(90deg) scale(1.6);}
.import_list .card_img img.img_hd{position: absolute; top: 0; height:40px; width: 60px; margin-top: 25px; transform: rotate(0deg) scale(2.2);}
.import_list .card_info {position: absolute; left: 0; width: 100%; display: inline-block; padding: 16px; box-sizing: border-box; padding-left: 80px; padding-right: 70px;}
.import_list .card_info h4 {font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; box-sizing: border-box;}
.import_list .card_info .txt_edit {cursor: pointer;}
.import_list .card_info .txt_edit img{width: 20px;}
.import_list .card_info .info_error{font-weight: bold; padding-top: 2px;}

.import_list .card_disabled {background-color: #00000099;z-index: 10; border-radius: 10px; position: absolute; width: 100%; height: 100%; margin-left: -12px;}
.import_list .card_disabled p {text-align: center;color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.import_list .checkbox {position: absolute; right: 20px; top:36px;}
.import_list .checkbox input[type="radio"].chk_lg:checked + label:after {left: 13px;}
.import_list .card_del img {width: 28px;}

/* 결제수단 추가 */
.import_list.add {height: 112px; border: 1.4px dashed #c9c9c9; display: block; position: relative; cursor: pointer;}
.import_list.add .ic_plus {position:absolute; margin: auto; top: 30px; left: 50%; transform: translateX(-11px);}
.import_list.add .ic_plus::before {content: ''; width: 22px; height: 2px; background: #646464; position: absolute; transform: translateY(10px); }
.import_list.add .ic_plus::after {content: ''; width: 2px; height: 22px; background: #646464; position: absolute; transform: translateX(10px)}
.import_list.add p {font-size: 14px; color: #646464; margin: auto; position:absolute; bottom: 26px; left: 50%; transform: translateX(-50%);}
.import_list input[id="fav-card"] + label {position: absolute;}

/* 결제수단 삭제 버튼 - 250701 추가*/
.pay_card .card-delete{
	width: 100%; height: 100%;
	background: rgba(0,0,0,0.6) url("../images/btn_card_del.svg") center center no-repeat;
	background-size: contain;
	border-radius: 50%;
	height: 28px;
	width: 28px;
	position: absolute;
	top: 16px;
	right: 50%;
	margin-right: -135px;
	z-index: 2;
}

/* 221025 분할결제 */
.split .import_list {transition: all 0.3s; align-items: flex-start;}
.split .import_list.open {height:164px;}
.split .import_list.open.card {height:212px;}
.split .import_list.default .card_info {top: 32px;}
.split .import_list.valid .card_info {top: 8px; }

.split .import_list .info_name{width: 100%;}
.split .import_list .info_name h4{display: inline; padding:0; width: auto;}
.split .import_list .info_name p{display: inline; font-size: 14px;}
.split .import_list .info_name h5{display: inline; float: right; font-size: 14px; line-height: 12px;}
.split .import_list .info_error{font-weight: bold; padding-top: 2px;}
.split .import_list .info_number {display: flex; align-items: center; padding-right: 40px; padding-left: 60px; margin-bottom: 0;}
.split .import_list .info_number .input{white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.split .import_list input {font-size: 18px; font-weight: bold; text-align: right; box-sizing: border-box; display: inline;}

.split .month_detail {font-size: 12px; text-align: right; border-top: 1px solid rgba(0,0,0,0); padding-bottom: 4px; margin-right: -4px;}
.split .unit {font-size: 18px; font-weight: bold; padding: 0; margin-right: -4px;}
.split [class*="tag"] {position: absolute; top: 0; left: 0; padding:2px 6px; margin: -1px ;}
.split [class*="tag"] span{color: #fff; font-weight: 700; font-size: 14px;}
.split .tag_acc{background-color: #646464;}
.split .tag_card{background-color: #1d1d24;}
.split .split_input {position: absolute; bottom: 10px; left: 10px; right: 10px;}
.split .split_input_done {position: absolute; bottom: 14px; left: 10px; right: 70px; text-align: right; margin-right: 4px;}
.split .select {border: 1px solid #c9c9c9; border-radius: 4px; margin-top: 10px; background: url(../images/btn_details_close.svg) top 15px right 10px no-repeat; background-size: 0.8em; font-size: 14px;}
.split_price {text-align: center; margin: 0 -30px; padding: 20px 30px; background-color: #fff; position: sticky; top: 60px; z-index: 10;}
.split_price p {font-size: 14px; border-bottom: 2px solid #1d1d24; display: inline;}
.split_price p b:last-child {font-weight: 300;}
.split_price h3 {padding-top: 10px;}


.pop_import_list {margin-right: 20px;}
.pop_import_list > li {padding: 10px 0; display: flex; justify-content: space-between; align-items: center;}
.pop_import_list > li:nth-child(1) {padding-top: 20px;}
.pop_import_list > li > div > *:last-child {padding-top: 6px;}
.pop_import_list [class*="tag"] {position: static; padding:0 6px 2px; display: inline;}
.pop_import_list .error_desc {background: #f4f4f4; font-size: 15px; padding: 10px 20px; margin-bottom: 10px; overflow-y: auto; max-height: 36px;}
.pop_import_list .error_desc p{}
.pop_fix{
	transform: translate(0, 0);
	width: 100%;
	max-width: unset;
	padding-bottom: 52px;
	border-radius: 20px 20px 0 0;
	top: unset;
	bottom: 0;
	left: 0;
}

.pop_fix .btn_bot {left: 0;}
.pop-fix-bank {height: 64%;}/*250530*/

/*240430 내카드 불러오기 변경*/
.list_card {position: relative;box-sizing: border-box; display: flex; align-items: center; margin: 10px 0px; border: 1px solid #c9c9c9; border-radius: 10px; padding: 6px;}
.list_card .card_img{display: inline-block; height: 92px; width: 60px; border-radius: 4px; position: relative; background-repeat: no-repeat; background-size: contain;}
.list_card .card_img img.no-img{position: absolute; width: 50px; top: 50%; left: 50%; transform: translate(-50%, -50%); box-sizing: border-box;}
.list_card .card_img img.img{position: absolute; top: 0; height:40px; width: 60px; margin-top: 25px; transform: rotate(90deg) scale(1.6);}
.list_card .card_info {position: absolute; left: 0; width: 100%; display: inline-block; padding: 16px; box-sizing: border-box; padding-left: 80px; padding-right: 70px;}
.list_card .card_info h4 {font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; box-sizing: border-box;}
.list_card .card_info .txt_edit {cursor: pointer;}
.list_card .card_info .txt_edit img{width: 20px;}
.list_card.card_info .info_error{font-weight: bold; padding-top: 2px;}

.list_card .card_disabled {background-color: #00000099;z-index: 10; border-radius: 10px; position: absolute; width: 100%; height: 100%; margin-left: -12px;}
.list_card .card_disabled p {text-align: center;color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.list_card .arrow_btn {position: absolute; right: 20px; top:36px;}
.list_card .arrow_btn input[type="radio"].chk_lg:checked + label:after {left: 13px;}
.list_card .card_del img {width: 15px; transform: rotate(90deg) translateX(-2px);}

/*251222 OCR 스캔화면*/
.ocr_dim {z-index:111; position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden;}
.ocr_container {display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%;}
.ocr_container h1 {margin-top: -40px;}
.ocr_dim h1, h2 {color: #fff; z-index: 111;}
.scan_wrap {width: 100%; height: 100%; display: flex; justify-content: center;}
.scan_container {width: 100%; height: 100%; max-width: 580px; max-height: 375px; position: relative; display: flex; justify-content: center; align-items: center;}
/*.ocr_line {width: 100%; height: 100%; background-image: url(../images/ocr_line.png); background-size: cover; background-repeat: no-repeat; z-index: 102; position: absolute;}*/
.ocr_card_bg{ width: 100%; height: 100%; border-radius: 18px; box-sizing: border-box; z-index: 101; max-width: 560px; max-height: 360px; background: transparent; /* 투명 배경 */ box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.4); /* 바깥쪽 그림자 효과 */ border: 3px solid #fff;}
.scan-box-wrap {height: 100%; display: flex; justify-content: center; align-items: center;}

/*240430 하단 고정 버튼 2개*/
.btn_container { display: flex; justify-content: space-between; width: 100%; background-color: #0f2c52; position: absolute; left: 0;}
.btn_container button {flex: 1; display: flex; justify-content: center; align-items: center;}
.btn_bot_half {position: fixed; bottom: 0; width: 50%; height: 52px; background: #c9c9c9; z-index: 100}
.btn_bot_half>span{color: #fff;font-size: 18px; font-weight: bold; line-height: 52px; padding: 0 10px;}

/*카드촬영하기 버튼*/
.btn_camera_wrap {width: 100%; display: flex; justify-content: center;}
.btn_camera {width: 150px; height: 50px; background-color: #fff; border-radius: 50px; line-height: 50px; margin-top: 90px;}
.btn_camera>span {color: #4e2aa1; font-size: 16px; font-weight: 600;}


/*250418 mypage ********************************************/
.card-wrap {margin-inline: -30px; width: calc(100% + 64px);}
.list>.toggle-row {display: flex; justify-content: space-between; align-items: center;}
.list li>.btn-row {display: flex; justify-content: space-between; align-items: center;}

/* 버튼 */
.toggle-btn {
	position: relative;
	width: 70px;
	height: 28px;
	border-radius: 999px;
	border: none;
	font-size: 14px;
	font-weight: 400;
	overflow: hidden;
	transition: background 0.3s, color 0.3s;
}

/* 체크 아이콘 위치 조정 */
.btn-icon {
	position: absolute;
	top: 4px;
	left: 4px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: transform 0.3s ease;
	transform: translateX(0);
}

.toggle-btn.active .btn-icon {transform: translateX(42px); /* 오른쪽으로 이동 */}

/* 텍스트 위치 조정 */
.btn-text {
	position: absolute;
	top: 50%;
	transform: translateY(-51%) translateX(-8px);
	transition: transform 0.3s ease;
}

.toggle-btn.active .btn-text {transform: translateY(-52%) translateX(-18px); /* 왼쪽으로 이동 */}

/* 체크 컬러 전환 */
.icon-check {width: 14px; height: 14px; transition: color 0.3s;}

/* 카드등록버튼 */
.add-btn {
	display: flex;
	width: 70px;
	height: 28px;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 400;
	position: relative;
	transition: background 0.3s;
}

/* 카드등록버튼 아이콘 */
.add-icon {
	display: inline-flex;
	justify-content: center;
	width: 12px;
	height: 12px;;
	margin-right: 2px;
	border-radius: 2px;
}

.ic-plus svg {
	width: 100%;
	height: 100%;
	display: block;
}

/*250430 결제수단 선택팝업*/
.list_pay {position: relative; box-sizing: border-box; display: flex; align-items: center; margin: 8px 0px; border: 1px solid #c9c9c9; border-radius: 10px; cursor: pointer}
.list_pay .pay_img{display: inline-block; height: 92px; width: 60px; border-radius: 4px; position: relative; background-repeat: no-repeat; background-size: contain;}
.list_pay .pay_img img.no-img{position: absolute; width: 50px; top: 50%; left: 50%; transform: translate(-50%, -50%); box-sizing: border-box;}
.list_pay .pay_img img.img{position: absolute; top: 0; height:40px; width: 60px; margin-top: 25px; transform: rotate(90deg) scale(1.6);}
.list_pay .pay_info {position: absolute; left: 0; width: 100%; display: inline-block; padding: 16px; box-sizing: border-box; padding-left: 80px; padding-right: 70px;}
.list_pay .pay_info h4 {font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; box-sizing: border-box;}
.list_pay .pay_info .txt_edit {cursor: pointer;}
.list_pay .pay_info .txt_edit img{width: 20px;}
.list_pay .pay_info .info_error{font-weight: bold; padding-top: 2px;}

.list_pay .pay_disabled {background-color: #00000099;z-index: 10; border-radius: 10px; position: absolute; width: 100%; height: 100%; margin-left: -12px;}
.list_pay .pay_disabled p {text-align: center;color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.list_pay .arrow_btn {position: absolute; right: 20px; top:36px;}
.list_pay .arrow_btn input[type="radio"].chk_lg:checked + label:after {left: 13px;}
.list_pay .pay_del {font-size: 22px;}
.list_pay .pay_del img {width: 15px; transform: rotate(90deg) translateX(-2px);}

/***************************************************************/

/*은행/증권사 탭-250530*/
.popup_tabs {display: flex; border-bottom: 5px;}
.tab_content {display: none;}
.tab_content.active {display: block;}
.tab_button {flex: 1; padding: 10px; border: none; background-color: none; color: #707070; font-size: 16px; cursor: pointer; transition: background 0.4s; background-color: #fff; border-bottom: 3px solid #F2F3F5;}
.tab_button.active {font-weight: 700; color: #4e2aa1; background-color: #fff; border-bottom: 3px solid #4e2aa1;}

.popup_select_con {flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;}
.button_grid {display: grid; grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); /* 최소 150px, 최대 1fr */ gap: 20px; padding: 20px 0;}
.button_grid button {width: 100%; padding: 10px; color: #111; border: solid 1px #cfcfcf; border-radius: 8px; cursor: pointer; transition: border-color 0.4s; font-size: 13px;}
.button_grid button:hover {border: 2px solid #4e2aa1; -webkit-border: 2px solid #4e2aa1; /* 사파리 */ margin: -1px;}
.button_grid button p {font-size: 14px;}

.popup_select_con {
	margin-top: 8px;
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	min-height: 0;
}

.tab_content {
	flex: 1;
	min-height: 0;
	display: none;
	overflow: hidden;
}

.tab_content.active {
	display: block;
	overflow-y: auto;
	height: 100%;
	-webkit-overflow-scrolling: touch;
}

@media (max-width:1440px) {.button_grid {grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));}}
@media (max-width:1110px) {.button_grid {grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));}}
@media (max-width:840px) {.button_grid {grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));}}
@media (max-width:660px) {.button_grid {grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));}}
@media (max-width:510px) {.button_grid {grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));}}
@media (max-width:420px) {.button_grid {grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));}}
@media (max-width:380px) {.button_grid button p {font-size: 12px;}}
@media (max-width:360px) {.button_grid {gap: 12px;} }

/*계좌점유인증-250530*/
.acc_info_box {width: 100%; height: auto; background-color: #fff; border: 2px solid #4e2aa1; border-radius: 8px; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; margin-bottom: 20px; padding: 12px 14px;}
.acc_info_box span {font-size: 14px; font-weight: 400;}
.acc_info_box .info_font {font-size: 16px; font-weight: 600; user-select: none; color: #4e2aa1;}
.dot_box {display: flex; gap: 8px;}
.dot_box img {width: 24px; height: 24px; padding: px; border: 1.2px solid #c9c9c9; border-radius: 4px;}
.acc_box p {font-size: 16px; font-weight: 400;}
.info_top, .info_bottom {display: flex; justify-content: space-between; align-items: center; width: 100%;}
.info_top {margin-bottom: 8px;}

/*240430 미디어쿼리추가*/
@media screen and (max-width: 768px) {
	.btn_camera {margin-top: 160px;}
}

/*240430 미디어쿼리추가*/
@media screen and (max-width: 640px) {
	.scan_container {width: 100%; height: calc(100vw * 0.625); /* 5:8비율*/ }
	/*.ocr_line {width: 78%; height: calc(80vw * 0.625);} 251222*/
	.ocr_card_bg{width: 90%; height: calc(76vw * 0.7); /* 251222*/
		max-width: none; max-height: none; border-radius: 10px;}
}

@media screen and (max-width: 380px) {
	#cardNumber1{min-width: 40px;}
	.btn_camera {margin-top: 30%;}/*240430 추가*/
}

@media screen and (max-width: 340px) {
	.popup2 .grid ul li{padding:20px 5px;}
	.ars_cont .cert-num{font-size: 70px;}
	button.cardOCR img {max-width: 20px;}
	button.cardOCR h6 {font-size: 13px; white-space: nowrap;}/*240701 추가*/
	button.cardImport h6 {font-size: 13px;}/*240701 추가*/
}

@media screen and (max-width: 320px) {
	.import_list .card_info{padding-right: 45px;}
	.import_list .checkbox{right: 10px}
	ul.list li {padding: 20px 4px;}/*250418*/
	button.cardOCR {max-width: 45%; padding:  5px 4px;}/*250314 추가*/
	button.cardImport {max-width: 45%; padding: 10px 0;}/*240701 추가*/
	button.cardImport h6 {margin: 0 5px;}/*240701 추가*/
	.swiper-wrapper .swiper-slide .card-bg {margin: 0 20px;}/*250701 추가*/
	.pay_card .card-delete{margin-right: -124px;}/*250701 추가*/
}

@media screen and (max-width: 280px) {
	button.cardImport h6 {margin: 0;}
	.toggle-btn.active .btn-icon {transform: translateX(39px);}/*250418*/
	.pay_card .card-delete{margin-right: -108px;}/*250701 추가*/
}