@charset "utf-8";

html, body{
	position: relative;
	width:100%;
	height: 100%;
	scroll-behavior: smooth;
	/* background: #fbfbfb; */
}
input, select, button, textarea, a, strong{
	-webkit-appearance: none;
	-webkit-border-radius: 0;
}

table{width:100%;}
:focus{outline:0}

* {
	outline:0;
	-webkit-tap-highlight-color: transparent !important;
}

.wrap {
	width: 100%;
	min-width: 360px;
	height: 100%;
	margin:0 auto;
	background-color: var(--white);
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-direction: column;
	position: relative;
	transition: all 0.2s;
}

/* Header
****************************************************************/
#header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 99;
}
	.kis_header_container {
		position: relative;
		width: 100%;
		max-width: 568px;
		height: 4.6rem;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		background-color: #fff;
		border-bottom: 1px solid #ECECEC;
		padding: 0 1rem;
	}
		/* logo */
		.kis_header_container > h1 {}
			h1 > a {
				position: relative;
				display: block;
			}
				h1 > a:after {
					content: "";
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
				}
					h1 > a > img {
						max-width: 10rem;
						max-height:3rem;
					}
		/* 화면 제목 */
		.kis_header_container>h2 {
			font-size: 1.6rem;
			font-weight: 400;
		}
		/* 모바일 뒤로가기 버튼 */
		.kis_header_container > .btn_back {
			cursor: pointer;
			position: absolute;
			z-index: 9999;
			top: 0;
			width: 4rem;
			height: 4rem;
			top: 50%;
			transform: translateY(-50%);
			left: 1rem;
		}
			.kis_header_container > .btn_back > i {
				width:24px;
				height: 24px;
			}

		.kis_header_container>.gnb {
			display: none;
		}
		/* 모바일 메뉴 오픈 */
		#mo_gnb_btn {
			cursor: pointer;
			position: absolute;
			z-index: 9999;
			top: 0;
			width: 4rem;
			height: 4rem;
			top: 50%;
			transform: translateY(-50%);
			right: 1rem;
		}
		#mo_gnb_close {
			cursor: pointer;
			position: absolute;
			z-index: 9999;
			top: 0.2rem;
			width: 4rem;
			height: 4rem;
			right: 1rem;
		}
		.mo_gnb_toggle {
			cursor: pointer;
			position: absolute;
			top: 0;
			right: 0;
			width: 4rem;
			height: 4rem;
		}
			.mo_gnb_toggle > span {
				display: block;
				transform: translate(-50%, -50%);
				position: absolute;
				top: 50%;
				left: 50%;
				width: 2rem;
			}
		
			.mo_gnb_toggle > span:after,
			.mo_gnb_toggle > span:before {
				content: "";
				display: block;
			}
		
			.mo_gnb_toggle > span,
			.mo_gnb_toggle > span:after,
			.mo_gnb_toggle > span:before {
				height: 1px;
				background: #000;
				transition: all .2s;
			}
		
			.mo_gnb_toggle > span:before {
				transform: translateY(7px);
			}
		
			.mo_gnb_toggle > span:after {
				transform: translateY(-9px);
			}
		
			.mo_gnb_toggle.on > span {
				background: transparent;
			}
		
			.mo_gnb_toggle.on > span:before {
				transform: translateY(0) rotate(-45deg);
			}
		
			.mo_gnb_toggle.on > span:after {
				transform: translateY(-2px) rotate(45deg);
			}
				.mo_gnb_toggle.off > span {
					display: none;
				}

/* icon
****************************************************************/
i.ico {
	display: inline-block;
	width: 18px;
	height:18px;
	background-size: contain;
	background-repeat: no-repeat;
}
i.ico.setting {
	width: 16px;
	height: 16px;
	background-image: url(../images/icon/btn_setting.svg);
}
i.ico.card {
	background-image: url(../images/icon/ico_mycard.svg);
}
i.ico.add-card {
	background-image: url(../images/icon/ico_add-card.svg);
}
i.ico.gift-card {
	background-image: url(../images/icon/ico_gift.svg);
}
i.ico.balance {
	background-image: url(../images/icon/ico_wallet.svg);
}
i.ico.history {
	background-image: url(../images/icon/ico_history.svg);
}
i.ico.noti {
	background-image: url(../images/icon/ico_notice.svg);
}
i.ico.faq {
	background-image: url(../images/icon/ico_FAQ.svg);
}
i.ico.terms {
	background-image: url(../images/icon/ico_rules.svg);
}
i.ico.scan {
	background-image: url(../images/icon/ico_scan.svg);
}
i.ico.close {
	background-image: url(../images/icon/ico_close.svg);
}
i.ico.timer {
	background-image: url(../images/icon/ico_timer.svg);
}
i.ico.locked {
	background-image: url(../images/icon/ico_locked.svg);
}
i.ico.user {
	background-image: url(../images/icon/ico_user.svg);
}
i.ico.delete {
	background-image: url(../images/icon/ico_delete.svg);
}
i.ico.password {
	background-image: url(../images/icon/ico_password.svg);
}
i.ico.back {
	background-image: url(../images/icon/ico_back.svg);
}
i.ico.more {
	background-image: url(../images/icon/ico_more.svg);
}
i.ico.edit {
	background-image: url(../images/icon/ico_edit.svg);
}
i.ico.phone {
	background-image: url(../images/icon/ico_phone.svg);
}
i.ico.gift {
	background-image: url(../images/icon/ico_gift.svg);
}
i.ico.user_delete {
	background-image: url(../images/icon/ico_user_delete.svg);
}
i.ico.calendar {
	background-image: url(../images/icon/ico_calendar.svg);
}
i.ico.plus {
	background-image: url(../images/icon/ico_plus.svg);
}
i.ico.check {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="red"><path fill-rule="evenodd" d="M21.03 5.72a.75.75 0 010 1.06l-11.5 11.5a.75.75 0 01-1.072-.012l-5.5-5.75a.75.75 0 111.084-1.036l4.97 5.195L19.97 5.72a.75.75 0 011.06 0z"/></svg>');
}
/* 선불카드 고도화 : info 아이콘 추가_231101
****************************************************************/
i.ico.info {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0 auto;
	border:1px solid #ccc;
	border-radius: 50%;
	font-size: 2rem;
	font-style: normal;
	color: #ccc;
}
/* 선불카드 고도화
****************************************************************/
.dot-28 {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 30px;
	background-color: var(--primary);
	width: 28px;
	height: 28px;
	margin-right: 5px;
}
.dot-28 > .ico.gift-card {
	/* white color */
	filter: invert(98%) sepia(100%) saturate(0%) hue-rotate(303deg) brightness(100%) contrast(104%);
}

/* gnb
****************************************************************/
/* 모바일 메뉴 영역 */
.mo_gnb_wrap .dim {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .5);
	z-index: 9999;
	display: none;
	transition: all .2s;
}

.mo_gnb_wrap.open .dim {
	display: block;
}

.mo_gnb_wrap .mo_gnb {
	position: fixed;
	height: 100vh;
	width: 26rem;
	background: #fff;
	top: 0;
	right: 0;
	z-index: 99999;
	transform: translateX(100%);
	transition: all .2s;
	padding: 4.6rem 0 0;
	display: flex;
	flex-direction: column;
}

.mo_gnb_wrap.open .mo_gnb {
	transform: translateX(0%);
}

/* 사용자 정보 */
.mo_gnb_con .gnb_user_info {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding: 1.5rem 2rem;
}

.mo_gnb_con .gnb_user_info p {
	font-size: 1.4rem;
	line-height: 1.2;
}

.mo_gnb_con .gnb_user_info a {
	display: inline-block;
	padding: 0.5rem;
	vertical-align: middle;
}

.mo_gnb_con .gnb_user_info a>i {
	/* primary color */
	filter: invert(73%) sepia(30%) saturate(7093%) hue-rotate(139deg) brightness(100%) contrast(108%);
}

.mo_gnb_con .gnb_user_info button {
	color: #999;
	text-decoration: underline;
	font-size: 1.2rem;
	padding: 1.2rem 0px;
	cursor: pointer;
}

.mo_gnb_con .gnb_user_info button:hover {
	color: #000;
}

/* 모바일 메뉴 */
.mo_gnb_con .nav {
	border-top: 0.1rem solid #ddd;
	font-size: 1.4rem;
}

.mo_gnb_con .nav li a {
	display: flex;
	align-items: center;
	height: 5rem;
	padding: 2rem 1.6rem;
	background-color: #fff;
	transition: all 0.2s;
}

.mo_gnb_con .nav li a:hover {
	background-color: #00D5E5;
	color: #fff;
}

.mo_gnb_con .nav li a > i {
	margin-right: 1rem;
	/* primary color */
	filter: invert(73%) sepia(30%) saturate(7093%) hue-rotate(139deg) brightness(100%) contrast(108%);
}

.mo_gnb_con .nav li a:hover > i {
	/* white color */
	filter: invert(98%) sepia(100%) saturate(0%) hue-rotate(303deg) brightness(100%) contrast(104%);
}

/* main contents 
****************************************************************/
#main_con {
	flex: 1;
	width: 100%;
	padding-top:4.6rem;
	background-color: var(--white);
}

/* main visual 
****************************************************************/
.mainVisual .swiper-slide img {
	width:100%;
}
.mainVisual .swiper-pagination {
	width: 100%;
	bottom:2rem;
}
.mainVisual .swiper-pagination-bullet {
	width:1rem;
	height:1rem;
	margin:0 0.4rem;
}
.mainVisual .swiper-pagination-bullet-active {
	background-color: #000;
}

/* article 공통
****************************************************************/
article.con {
	width: 100%;
	padding:0 1.5rem;
	display: flex;
	flex-direction: column;
}
article.con h4 {
	font-size: 1.4rem;
	font-weight: 500;
	margin-bottom: 0.5rem;
}
article.center-full {
	flex: 1;
	align-items: center;
	justify-content: center;
}
article.bottomEnd {
	flex:1;
	justify-content: flex-end;
	padding-bottom: 2rem;
}

/* 기본 정렬 공통 */
.flex {display: flex;}
.flex.row {flex-direction: row;}
.flex.end {align-items: flex-end;}
.flex.between {justify-content: space-between;}

/* 라인 
****************************************************************/
hr.h4 {
	margin: 0;
	padding: 0;
	height: 0.4rem;
	background-color: var(--secondary-light);
	border: 0;
}

/* button 
****************************************************************/
.btn {
	width:100%;
	height:5rem;
	padding:1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	font-weight: 800;
	cursor: pointer;
	background-color: var(--secondary);
	color: var(--white);
	transition: all 0.2s;
}
.btn:disabled {
	background-color: var(--secondary) !important;
	cursor: not-allowed;
}
.btn_s {
	height: unset;
	padding: 0.8rem 1rem;
	font-size: 1.2rem;
}
.btn.round {
	border-radius: 20rem;
}
.btn.line.primery {
	background-color: var(--white);
	border:2px solid var(--primary);
	color:var(--primary);
}
.btn.line.primery:hover {
	color:var(--white);
}
.btn.line.primery:focus {
	background-color: var(--primary);
	color: var(--white);
}
.btn.primery {
	background-color: var(--primary);
	color:var(--white);
}
.btn.primery > i {
	filter: invert(98%) sepia(100%) saturate(0%) hue-rotate(303deg) brightness(100%) contrast(104%);
}
.btn.primery:hover {
	background-color: var(--primary_dark);
}
.btn.secondary-light {
	background-color: var(--secondary-light);
	color: var(--black);
	font-weight:500;
}
.btn.secondary-light:hover {
	background-color: var(--light-gray);
}
.btn > i {
	margin-right:1rem;
}
.btn_wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

/* footer
****************************************************************/
footer {
	width: 100%;
	padding: 2rem;
	background-color: var(--secondary-light);
	font-size: 1.1rem;
	font-weight: 300;
}
footer > p {
	margin:0.5rem 0 1rem;
	line-height: 1.7rem;
	color:var(--secondary-dark);
}
footer > p > i.bar {
	width:0.1rem;
	height:0.9rem;
	margin:0 0.5rem;
	background-color:var(--secondary-dark);
}
footer > copy {
	color: var(--secondary);
}

/* layer popup
****************************************************************/
.layer_pop {
	display: none;
	position: fixed;
	_position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
}

.layer_pop .dimBg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: .5;
	filter: alpha(opacity=50);
}

.layer_pop .pop-layer {
	display: block;
}
.popup .pop-container {
	padding: 2rem;
}

.popup {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(100% - 4rem);
	height: auto;
	background-color: #fff;
	border-radius: 14px;
	transform: translate(-50%, -50%);
	z-index: 10;
}

.popup .pop-conts {
	padding: 1rem 1rem 3rem;
	font-size: 1.4rem;
	line-height: 1.4;
}

.popup.full {
	width: 100%;
	z-index: 10;
}
.popup.full .pop-container {
	padding:0;
}
.popup.full .pop-conts {
	padding:0;
}

.layer_bg {
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	left: 0;
	top: 0;
	z-index:999;
}

.layer_wrap {
	position: absolute;
	width: 30rem;
	height: 10rem;
	background: #fff;
	text-align: center;
	z-index:999;
}


/* 카드목록 슬라이드
****************************************************************/
.pop_head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.pop_head .tit {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 1rem 2rem;
}
.pop_head .tit h4 {
	font-size:1.6rem;
}
.pop_head .tit .paging {
	display: none;
	padding: 0.2rem 1.5rem 0.4rem;
	margin-left:1rem;
	font-size: 1.2rem;
	color:var(--white);
	background-color: var(--gray);
	border-radius: 2rem;
}
.pop_head button {
	width: 4rem;
	height: 4rem;
	cursor: pointer;
}

/* 카드 슬라이드
****************************************************************/
.myCardList {
	padding-bottom: 30px;
}
#sub_con .myCardList {
	padding-top:4rem;
}
.myCardList .swiper-wrapper {
	align-items: center;
}

	/* 슬라이드 좌,우 : 화면 안으로 넣기 */
	.myCardList .swiper-slide-prev {
		transform: translateX(75px);
	}
	.myCardList .swiper-slide-next {
		transform: translateX(-75px);
	}

.myCard_item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width:100%;
	transition: all 1s;
	white-space: nowrap;
}

	/* 카드 등록 */
	.myCard_item.add-card .card_img {
		opacity: 1 !important;
	}
	.myCard_item.add-card .card_name {
		color:#999;
	}

.myCard_item .card_area {
	position: relative;
	width:70%;
}
.myCard_item .card_area > a.btn_barcode {
	width: 80px;
	height: 80px;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 9999;
	background: white;
	border-radius: 50%;
}
.myCard_item .card_name {
	margin: 2rem 0 1rem;
	font-size: 1.6rem;
	text-align: center;
	display: flex;
	align-items: center;
}
.myCard_item .card_name > a {
	padding:8px;
	margin-left:5px;
}
.myCard_item .price {
	font-size: 2rem;
	font-weight: 700;
	text-align: center;
	margin-top: 1rem;
}

/* 고정된 카드 이미지 */
.myCard_item.fix_img .card_img {
	z-index: unset;
}
.myCard_item.fix_img .card_img > img {
	opacity: 1;
}

/* 카드 이미지 영역 */
.myCard_item .card_img {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 999;
	opacity: 1;
	transition: all 0.2s;
}
.myCard_item .card_img > i.scan{
	position: absolute;
	top: -1rem;
	right: -1rem;
	background-color: white;
	width: 3rem;
	height: 3rem;
	background-position: center;
	background-size: 1.4rem;
	border-radius: 3rem;
	box-shadow: 4px 4px 4px rgb(0 0 0 / 10%);
	opacity: 0;
}
.swiper-slide-active>.myCard_item .card_img.off {
	opacity: 0;
}
.swiper-slide-active>.myCard_item .card_img>i.scan {
	opacity: 1;
}

.myCard_item .card_img img {
	width: 100%;
	opacity: 0.5;
}
.swiper-slide-active>.myCard_item .card_img img {
	display: block;
	opacity: 1;
}

/* 페이징 */
.myCardList .swiper-pagination.swiper-pagination-fraction {
	position: absolute;
	top: 0;
	left: 50%;
	bottom: unset;
	transform: translateX(-50%);
	display: inline-block;
	width: auto;
	padding: 0.4rem 1rem;
	background: #666;
	border-radius: 2rem;
	font-size: 1.2rem;
	color: #fff;
}
.myCardList .swiper-pagination2.swiper-pagination-bullets {
	position: relative;
	bottom:-2rem;
	text-align: center;
}

.myCardList .swiper-pagination2 .swiper-pagination-bullet {
	width: 1rem;
	height: 1rem;
	margin: 0 0.4rem;
}

.myCardList .swiper-pagination2 .swiper-pagination-bullet-active {
	background-color: #000;
}

.swiper-scrollbar {
	width: 80%;
	height: 3px;
	margin: 0 auto;
	margin-top: 2rem;
}

/* 좌우 버튼 영역 */
.swiper-button-next,
.swiper-button-prev {
	width: 8%;
	height: 25%;
	top: 50%;
	transform: translateY(-40%);
}
.swiper-button-next {
	right: 0;
}
.swiper-button-prev {
	left:0;
}
.swiper-button-next:after,
.swiper-button-prev:after {
	display:none;
}

/* 바코드 영역 */
.myCard_item .barcode {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	border: 1px solid var(--light-gray);
	border-radius: 1rem;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
}
.myCard_item .barcode > i.close {
	position: absolute;
	top: -1rem;
	right: -1rem;
	background-color: white;
	width: 3rem;
	height: 3rem;
	background-position: center;
	background-size: 1.3rem;
	border-radius: 3rem;
	box-shadow: 4px 4px 4px rgb(0 0 0 / 10%);
}
.swiper-slide-active .card_img.off + .barcode {
	opacity: 1;
}
.myCard_item .barcode .barcode_timer {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	color:var(--point);
	margin-bottom:1rem;
}
.myCard_item .barcode .barcode_timer i {
	margin-right:0.5rem;
}
.myCard_item .barcode .barcode_img {
	display: flex;
	align-items: center;
	justify-content: center;
}
.myCard_item .barcode .barcode_img > img {
	width: 20rem;
}
.myCard_item .barcode .barcode_num {
	font-size: 1.1rem;
	margin-top:1rem;
}
.myCard_item .barcode .barcode_num > span {
	margin:0 0.5rem;
}

/* 카드 슬라이드-팝업
****************************************************************/
.pop-conts .myCardList {
	padding: 4rem 0;
}
.swiper-slide-active>.myCard_item.check .card_img.off {
	opacity: 1;
}
.swiper-slide-active>.myCard_item.check .card_img.off::before {
	display: block;
	content:'';
	width: 100%;
	height: 100%;
	background:url(../images/icon/ico_check_round.svg) center no-repeat;
	background-color: rgb(0 0 0 / 30%);
	border-radius: 1rem;
	position: absolute;
	transition: all 0.2s;
}

/* login contents 
****************************************************************/
#login_con {
	flex: 1;
	width: 100%;
	padding: 4rem 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

#login_con h1 {
	width: 100px;
	margin: 0 auto;
}

/* 아이디, 비밀번호 찾기 
****************************************************************/
.txt_btn_wrap {
	display: flex;
	align-items: center;
	justify-content: center;
}

.txt_btn_wrap>a {
	display: flex;
	align-items: center;
	font-size: 1.3rem;
	color: var(--gray);
	padding: 1rem;
	margin: 0 1rem;
}

.txt_btn_wrap>a:focus {
	color: var(--primary);
}

.txt_btn_wrap>i.bar {
	width: 1px;
	height: 1rem;
	background: var(--light-gray);
}

.desc {
	font-size: 1.3rem;
	color: var(--gray);
	text-align: center;
	line-height: 1.3;
}

/* sub contents 
****************************************************************/
#sub_con {
	display: flex;
	flex-direction: column;
	flex: 1;
	width: 100%;
	padding-top: 4.6rem;
}

/* 진행 상황 */
.progress ol {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.progress ol li {
	display: flex;
	align-items: center;
	justify-content: center;
}
.progress ol li > span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	background-color: var(--secondary-light);
	border-radius: 1rem;
	font-size: 1.1rem;
	color: var(--secondary-dark);
}
.progress ol li.on > span {
	background-color: var(--primary);
	font-weight: 700;
	color: var(--white);
}
.progress ol li:after {
	display: block;
	content:'';
	background: url(../images/icon/progress_dot.svg) no-repeat;
	filter: invert(95%) sepia(23%) saturate(0%) hue-rotate(252deg) brightness(95%) contrast(83%);
	width: 1rem;
	height: 2px;
	margin: 0 5px;
}
.progress ol li.on:after {
	filter: invert(54%) sepia(94%) saturate(456%) hue-rotate(135deg) brightness(101%) contrast(100%);
}
.progress ol li:last-child:after {
	display: none;
}

/* 서브타이틀 
****************************************************************/
.sub_tit {}
.sub_tit h3 {
	font-size: 2.2rem;
	line-height: 1.3;
}
.sub_tit p {
	font-size: 1.3rem;
	color:var(--gray);
	line-height: 1.3;
}

/* form 
****************************************************************/
.form_group {
	width: 100%;
}
input[type=text]:-ms-clear {
	display: none;
}
.fieldset {
	display: flex;
	align-items: flex-end;
}
.form_item {
	position: relative;
	display:inline-block;
	width:100%;
}
.form_item + .form_item {
	margin-left:1rem;
}
.form_item>p {
	font-size: 1.4rem;
	font-weight: 500;
	margin-bottom:0.5rem;
}
.form_item>i {
	position: absolute;
	top: 50%;
	left: 2rem;
	width: 1.8rem;
	height: 1.8rem;
	margin-top: -1rem;
}

.form_item i+input {
	padding-left: 4.5rem;
}

.w_col_3 {
	width:33%;
}

.form_item > select + .ui-state-disabled {
	color:var(--font-default);
}

.inputTxt {
	font-size: 1.4rem;
	padding: 1rem 1.5rem;
	width: 100%;
	height: 5rem;
	border: 1px solid var(--light-gray);
	border-radius: 3rem;
}
.inputTxt[required="true"] {
	padding-right:4.5rem;
}

.inputTxt::placeholder {
	color: var(--secondary-dark);
}

.inputTxt:focus {
	border: 2px solid var(--primary);
	color: var(--black);
}

.inputTxt[type="password"] {
	-webkit-text-security: disc;
	font: small-caption;
	font-size: 2rem;
	padding-top: 0.7rem;
}

.inputTxt[type="password"]::placeholder {
	font-size: 1.4rem
}

/* 선불카드 고도화 : textarea_231101
****************************************************************/
.txtArea {
	font-size: 1.4rem;
	padding: 1rem 1.5rem;
	width: 100%;
	height: 10rem;
	line-height: 1.6;
	border: 1px solid var(--light-gray);
	border-radius: 2rem;
	resize: none;
}

.txtArea[required="true"] {
	padding-right: 4.5rem;
}

.txtArea::placeholder {
	color: var(--secondary-dark);
}

.txtArea:focus {
	border: 2px solid var(--primary);
	color: var(--black);
}

.txtArea[type="password"] {
	-webkit-text-security: disc;
	font: small-caption;
	font-size: 2rem;
	padding-top: 0.7rem;
}


.txtArea[type="password"]::placeholder {
	font-size: 1.4rem
}

.textCount {
	margin-top: 5px;
	margin-right: 5px;
	font-size: 1.3rem;
	text-align: right;
	color: #999;
}

/* //선불카드 고도화
****************************************************************/

.inputClear {
	position: absolute;
	bottom: 1.6rem;
	right: 2rem;
	width: 1.8rem;
	height: 1.8rem;
}
.inputTimer {
	position: absolute;
	bottom: 1.4rem;
	right: 2rem;
	height: 1.8rem;
	font-size: 1.4rem;
	color:var(--tertiary);
}
.inputTimer.off {
	color:var(--secondary-dark);
}

.inputTxt:not(:valid)~.inputClear {
	display: none;
}

/* select */
.ui-selectmenu-button {
	font-size: 1.4rem;
	padding: 1rem 4.5rem 1rem 1.5rem;
	width: 100%;
	height: 5rem;
	background-color: var(--white);
	border: 1px solid var(--light-gray);
	border-radius: 3rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
}
.ui-icon {
	width: 16px;
	height: 16px;
}
.ui-selectmenu-icon.ui-icon {
	background: url(../images/icon/ico_select.svg) no-repeat;
	width: 18px;
	height: 18px;
	display: block;
	position: absolute;
	right: 2rem;
	bottom: 15px;
}

.ui-selectmenu-menu {
	padding: 0;
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}

.ui-selectmenu-button-open {
border: 2px solid var(--primary);
	color: var(--black);
}
/* select option */
.ui-selectmenu-open {
	display: block;
}
.ui-widget.ui-widget-content {
	border: 1px solid var(--light-gray);
	border-radius: 0.8rem;
	overflow: hidden;
}
.ui-widget-content {
	background: #ffffff;
	color: #333333;
	min-height: 100%;
}
.ui-selectmenu-menu .ui-menu {
	overflow-y: auto;
	max-height: 205px;
	width: 160px;
}
.ui-menu .ui-menu-item {
	margin: 0;
	cursor: pointer;
}
.ui-menu-item-wrapper {
	font-size: 1.4rem;
	padding: 1rem;
}
.ui-menu-item-wrapper.ui-state-active {
	background: var(--secondary-light);
}

/* 선불카드 고도화 : 기프트카드 탭_231101
****************************************************************/
#tabs.ui-widget.ui-widget-content {
	border: none;
}
#tabs ul.ui-tabs-nav {
	display: flex;
	align-items: flex-start;
	width: 100%;
	background: #fff;
	font-size: 1.4rem;
	position: fixed;
	top: 46px;
	z-index: 999;
}
#tabs ul.ui-tabs-nav li.ui-tabs-tab {
    flex: 1;
    border-bottom: 1px solid #ECECEC;
    color: #666;
}
#tabs ul.ui-tabs-nav li.ui-tabs-tab.ui-tabs-active {
    border-color: #00D5E5;
    color: #000;
}

#tabs ul.ui-tabs-nav li.ui-tabs-tab a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
}
#tabs .ui-tabs-panel {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    width: 100%;
    margin-top: 45px;
}

/* 라디오 버튼 스위치 */
.button-switch-field {
	display: flex;
}

.button-switch-field input {
	position: absolute !important;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	width: 1px;
	border: 0;
	overflow: hidden;
}

.button-switch-field label {
	display: flex;
	align-items: center;
	height: 5rem;
	padding: 1rem 1.5rem;
	margin-left: 1rem;
	font-size: 1.4rem;
	text-align: center;
	color: var(--secondary-dark);
	background-color: var(--white);
	border: 1px solid var(--light-gray);
	border-radius: 4rem;
	transition: all 0.1s ease-in-out;
}

.button-switch-field label:hover {
	cursor: pointer;
}

.button-switch-field input:checked+label {
	background-color: var(--primary);
	color: var(--white);
	border: 1px solid var(--primary);
}

/* checkbox */
/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
	position: absolute;
	left: 0;
	opacity: 0.01;
}

[type="checkbox"]:not(:checked)+label,
[type="checkbox"]:checked+label {
	position: relative;
	padding-left: 2.2rem;
	flex:1;
	cursor: pointer;
}

/* checkbox aspect */
.terms_list [type="checkbox"]:not(:checked)+label {
	color: var(--gray);
}
.terms_list [type="checkbox"]:checked+label {
	color: var(--black);
}
.terms_list [type="checkbox"]:not(:checked)+label:before,
.terms_list [type="checkbox"]:checked+label:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 1.6rem;
	height: 1.6rem;
	background:var(--secondary) url(../images/icon/ico_check.svg) center no-repeat;
	border-radius: 2rem;
	transition: all .2s;
}

/* checked mark aspect */
.terms_list [type="checkbox"]:not(:checked)+label:after,
.terms_list [type="checkbox"]:checked+label:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width:1.6rem;
	height: 1.6rem;
	background:var(--primary) url(../images/icon/ico_check.svg) center no-repeat;
	border-radius: 2rem;
	transition: all .2s;
}

/* checked mark aspect changes */
.terms_list [type="checkbox"]:not(:checked)+label:after {
	opacity: 0;
}

.terms_list [type="checkbox"]:checked+label:after {
	opacity: 1;
}

/* Disabled checkbox */
.terms_list [type="checkbox"]:disabled:not(:checked)+label:before,
.terms_list [type="checkbox"]:disabled:checked+label:before {
	box-shadow: none;
	border-color: #bbb;
	background-color: #e9e9e9;
}

/* Accessibility */
.terms_list [type="checkbox"]:checked:focus+label:before,
.terms_list [type="checkbox"]:not(:checked):focus+label:before {
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1), 0 0 0 3px rgba(0, 213, 229, 0.2);
}

/* 더보기 */
.btn_terms_view {
	width:38px;
	height:38px;
	cursor: pointer;
}

/* 약관 전체 동의 */
.terms_list {
	font-size:1.4rem;
}
.terms_list ul li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-left:1.5rem;
	height:3.8rem;
}
.terms_checkall [type="checkbox"]+label {
	height: 5rem;
	padding: 1rem 3.7rem;
	display: flex;
	align-items: center;
	border-radius: 3rem;
}
.terms_checkall [type="checkbox"]:not(:checked)+label {
	color: var(--black);
	background-color: var(--secondary-light);
}
.terms_checkall [type="checkbox"]:checked+label {
	color: var(--white);
	background-color: var(--primary);
}
.terms_checkall [type="checkbox"]:not(:checked)+label:before,
.terms_checkall [type="checkbox"]:checked+label:before,
.terms_checkall [type="checkbox"]:not(:checked)+label:after,
.terms_checkall [type="checkbox"]:checked+label:after {
		left: 1.5rem;
			top: 50%;
			transform: translate(0, -50%);
	background: var(--white) url(../images/icon/ico_check_primary.svg) center no-repeat;
}

/* 비밀번호 변경_아이디 목록 */
.terms_list.check_list {
	width: 100%;
	padding: 10px 20px;
	border: 1px solid #eee;
	border-radius: 10px;
}
.terms_list.check_list ul li {
	padding:0;
}
.terms_list.check_list [type="checkbox"]:checked+label {
	font-weight:700;
}

/* 아이디 찾기 목록 */
.id_find_list {
	width: 100%;
	padding: 10px 20px;
	border: 1px solid #eee;
	border-radius: 10px;
}

.id_find_list ul li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 3.8rem;
	font-size: 1.4rem;
}

/* 약관 
****************************************************************/
.rules_area {
	white-space: normal;
	padding: 1rem;
	font-size: 1.2rem;
	line-height:1.4;
}

.rules_area>h2 {
	font-size: 1.3rem;
	margin-bottom: 1rem;
}

.rules_area>h3 {
	margin-bottom: 1rem;
}

.rules_area h4 {
	margin-bottom: 0.5rem;
}

.rules_area ul {
	margin-top: 0.5rem;
	margin-left: 1rem;
}

.rules_area>ul {
	margin-left: 0;
}

.rules_area ul li {
	margin-bottom: 1rem;
	padding-left: 1rem;
}

.rules_area ul li i {
	margin-left: -1rem;
	font-style: normal;
}

.rules_area ul li>p {
	margin-bottom: 0.5rem;
}

.rules_area ul li th,
.rules_area ul li td {
	border: 1px solid #ddd;
	padding: 0.5rem;
}

.rules_area ul li th {
	background-color: #e4e4e4;
	text-align: center;
}

.rules_area table {
	table-layout: fixed;
	border-collapse: collapse;
	margin-top: 7px;
}

.rules_area table th {
	border: 1px solid #ddd;
	padding: 7px 5px;
	background: #f4f4f4;
}

.rules_area table td {
	border: 1px solid #ddd;
	padding: 5px;
	vertical-align: top;
}

.rules_area table .center {
	text-align: center;
}

/* 글씨 꾸밈 */
.text-deco {
	text-decoration: underline;
	color:var(--primary);
}

/* 아이템 리스트 */
.item_list > li {
	min-height: 5rem;
	padding: 1rem;
	display: flex;
	/* align-items: center; */
	justify-content: space-between;
	position: relative;
}
.item_list li > div {
	display: flex;
	align-items: center;
	font-size: 1.4rem;
}
.item_list.line > li {
	border-bottom:1px solid #ECECEC;
}
.item_list li p {
	display: inline-block;
}
.item_list li p.date {
	display: block;
	margin-top:1rem;
	font-size: 1.2rem;
	color:#666;
}

/* 아코디언 리스트 */
.item_list.ui-accordion li {
	display: block;
	cursor: pointer;
}
.item_list.ui-accordion li > div {
	display: block;
}
.item_list.ui-accordion li i.more {
	position: absolute;
	right: 1rem;
	top: 2rem;
	transform: rotate(90deg);
	transition: all 0.2s;
}
.item_list.ui-accordion .ui-accordion-header-active i.more {
	transform: rotate(270deg);
}
.item_list.ui-accordion div.collapse_area {
	display: none;
	padding:2rem 1.5rem;
	margin-top: 1.5rem;
	background-color:#F6F6F6;
	line-height: 1.3;
}

/* FAQ 뱃지 */
.item_list.ui-accordion .badge.faq {
	display: inline-block;
	width: 3rem;
	height: 3rem;
	margin-right: 0.5rem;
	background-color: #eee;
	border-radius: 3rem;
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--gray);
	text-align: center;
	line-height: 2.8rem;
	font-style: normal;
	vertical-align: middle;
	transition:all 0.4s;
	filter: none;
}
.item_list.ui-accordion .ui-accordion-header-active .badge.faq {
	background-color: var(--primary);
	color:var(--white);
}

/* 가이드 텍스트 리스트 
****************************************************************/
.guide_txt_list li {
	padding-left: 1.5rem;
	margin-bottom: 0.5rem;
	font-size: 1.2rem;
	line-height: 1.3;
	position: relative;
}
.guide_txt_list li::before {
	display: inline-block;
	content: '';
	width: 4px;
	height: 4px;
	background-color: var(--gray);
	border-radius: 4px;
	vertical-align: middle;
	position: absolute;
	top: 5px;
	left: 5px;
}
.guide_txt_list li:last-child {
	margin-bottom:0;
}
.guide_txt_list li > ul {
	margin-top:0.5rem;
}

/* 나의 카드 정보 : 이용내역, 카드 충전, 잔액이전, 환불신청
****************************************************************/
.myCardInfo {
	display: flex;
	align-items: flex-start;
	width: 100%;
}
/* 선불카드 고도화 : 결제취소 카드 이미지_231101
****************************************************************/
.myCardInfo .card_img {
	width: 39%;
	position: relative;
}

.myCardInfo .card_img.cancel_pay:after {
	display: flex;
	align-items: center;
	justify-content: center;
	content:'결제취소';
	width:100%;
	height:100%;
	background: rgb(0 0 0 / 40%);
	border-radius: 4px;
	color: #fff;
	position: absolute;
	top: 0;
	left: 0;
}
/* //선불카드 고도화 */
.myCardInfo .card_img > img {
	width: 100%;
}
.myCardInfo > ul {
	flex: 1;
	height: 100%;
	margin-left: 1rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.myCardInfo ul li {
	font-size: 1.3rem;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}
.myCardInfo .tit {
	margin-top: 5px;
	font-size: 1.4rem;
}
.myCardInfo .price {
	font-size: 2rem;
	font-weight: 700;
}
.myCardInfo .expiry {
	margin-bottom: 5px;
	font-size: 1.3rem;
	color: var(--secondary-dark);
}

/* 항목 선택 버튼 : 검색 기간 선택, 충전 금액 선택
****************************************************************/
.btn_select_option_list {
	background-color: var(--white);
	border: 1px solid var(--light-gray);
	border-radius: 4rem;
	font-size: 1.3rem;
	color: var(--gray);
	display: grid;
	grid-auto-columns: 1fr;
	grid-auto-flow: column;
}
.btn_select_option_list li {
	text-align: center;
	line-height: 3rem;
	border-right: 1px solid var(--light-gray);
	cursor: pointer;
}
.btn_select_option_list li:first-child {
	border-top-left-radius: 4rem;
	border-bottom-left-radius: 4rem;
}
.btn_select_option_list li:last-child {
	border-right:0;
	border-bottom-right-radius: 4rem;
	border-top-right-radius: 4rem;
}
.btn_select_option_list li.ui-selected {
	background-color: var(--primary);
	color: var(--white);
}

/* Datepicker 날짜 선택
****************************************************************
.select_option {
	display: flex;
	justify-content: space-between;
	gap: 2rem;
	margin-top:1rem;
}
.select_option.show {
	display:flex !important;
}
.select_option li {
	flex:1;
	line-height: 3rem;
	border-bottom: 1px solid var(--secondary);
	display: flex;
	align-items: center;
}
.select_option li input.hasDatepicker {
	width: 100%;
	padding: 0 1rem;
	background-color: transparent;
	font-size: 1.3rem;
	cursor: pointer;
}

.ui-widget-header {
	border: 0px solid #dddddd;
	background: #fff;
}

.ui-datepicker-calendar>thead>tr>th {
	font-size: 14px !important;
}

.ui-datepicker .ui-datepicker-header {
	position: relative;
	padding: 10px 0 20px;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
	text-align: center;
}

.ui-datepicker .ui-datepicker-title {
	margin: 0 0em;
	line-height: 16px;
	text-align: center;
	font-size: 14px;
	padding: 0px;
	font-weight: bold;
}

.ui-datepicker {
	display: none;
	background-color: #fff;
	border-radius: 4px;
	margin-top: 10px;
	margin-left: 0px;
	margin-right: 0px;
	padding: 20px;
	padding-bottom: 10px;
	width: 300px;
	box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.1);
}

.ui-widget.ui-widget-content {
	border: 1px solid #eee;
}

#datepicker:focus>.ui-datepicker {
	display: block;
}

.ui-datepicker-prev,
.ui-datepicker-next {
	cursor: pointer;
}
.ui-datepicker-prev {
	float:left;
}
.ui-datepicker-next {
	float: right;
}

.ui-state-disabled {
	cursor: auto;
	color: hsla(0, 0%, 80%, 1);
}

.ui-datepicker-title {
	text-align: center;
	padding: 10px;
	font-weight: 100;
	font-size: 20px;
}

.ui-datepicker-calendar {
	width: 100%;
}

.ui-datepicker-calendar>thead>tr>th {
	padding: 5px;
	font-size: 20px;
	font-weight: 400;
}

.ui-datepicker-calendar>tbody>tr>td>a {
	color: #000;
	font-size: 12px !important;
	font-weight: bold !important;
	text-decoration: none;
}

.ui-datepicker-calendar>tbody>tr>.ui-state-disabled:hover {
	cursor: auto;
	background-color: #fff;
}

.ui-datepicker-calendar>tbody>tr>td {
	height: 36px;
	font-size: 12px;
	font-weight: 100;
	text-align: center;
	vertical-align: middle;
	border-radius: 100%;
	cursor: pointer;
}

.ui-datepicker-calendar>tbody>tr>td:hover {
	background-color: transparent;
	opacity: 0.6;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
	font-weight: normal;
}

.ui-widget-header .ui-icon {
	display: inline-block;
	text-indent:999px;
	background-image: url('../images/icon/btns.png');
	overflow: hidden;
}

.ui-icon-circle-triangle-e {
	background-position: -20px 0px;
	background-size: 36px;
}

.ui-icon-circle-triangle-w {
	background-position: -0px -0px;
	background-size: 36px;
}

.ui-datepicker-calendar>tbody>tr>td:first-child a {
	color: red !important;
}

.ui-datepicker-calendar>tbody>tr>td:last-child a {
	color: #0099ff !important;
}

.ui-datepicker-calendar>thead>tr>th:first-child {
	color: red !important;
}

.ui-datepicker-calendar>thead>tr>th:last-child {
	color: #0099ff !important;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f1f1f1;
	border-radius: 50%;
}

.ui-state-default.ui-state-active,
.ui-widget-content .ui-state-default.ui-state-active {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--primary);
	border-radius: 50%;
	color:var(--white);
}

.inp {
	padding: 10px 10px;
	background-color: #f1f1f1;
	border-radius: 4px;
	border: 0px;
}

.inp:focus {
	outline: none;
	background-color: #eee;
}

/* //Datepicker 날짜 선택
****************************************************************/

/* 이용내역 목록
****************************************************************/
.history_list li {
	padding: 1.5rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	border-bottom:1px solid var(--light-gray);
}
.history_list .badge.sort {
	display: inline-block;
	padding: 6px 10px;
	margin-right: 5px;
	font-size: 1.1rem;
	color: var(--white);
	font-style: normal;
	border-radius: 4px;
}
.history_list .badge.sort.primary {
	background-color: var(--primary);
}
.history_list .badge.sort.tertiary {
	background-color: var(--tertiary);
}
.history_list .badge.sort.black {
	background-color: var(--black);
}
.history_list .badge.sort.secondary-dark {
	background-color: var(--secondary-dark);
}
.history_list .badge.sort.light-gray {
	background-color: var(--light-gray);
	color: var(--black);
}
.history_list .badge.sort.white {
	background-color: var(--white);
	border: 1px solid var(--secondary);
	color: var(--black);
}
.history_list .badge.sort.point {
	background-color:var(--point);
}
.history_list .item {
	font-size: 1.4rem;
}
.history_list .date {
	font-size: 1.2rem;
	color:var(--secondary-dark);
}
.history_list .price {
	font-size: 2rem;
	font-weight: 700;
	text-align: right;
}
.history_list .txt_link {
	display: table;
	padding: 5px;
	margin-top: 3px;
	margin-left: auto;
	font-size: 1.2rem;
	text-decoration: underline;
}

/* 선불카드 고도화 : 기프트카드_231031
****************************************************************/
.gift_card_list_slide {
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
	scroll-snap-type: x mandatory;
	touch-action: pan-y;
	-ms-touch-action: pan-y;
}

.gift_card_list_slide::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}

.gift_card_list_slide::-webkit-scrollbar-track {
	background: #f6f6f6;
}

.gift_card_list_slide::-webkit-scrollbar-thumb {
	background: #cccccc;
	border-radius: 5px;
}

.gift_card_list_slide > ul {
    display: flex;
    align-items: center;
    justify-content: flex-start;
	
}
.gift_card_list_slide > ul > li {
    margin: 0 5px;
	scroll-snap-align: start
}
.gift_card_list_slide img {
    width: 140px;
    height: auto;
}

/* //선불카드 고도화
****************************************************************/

/* 라디오 버튼 스타일 추가 : 240611 */
.radio_list {
	font-size: 1.4rem;
}

.radio_list ul li {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	/* padding-left: 1.5rem; */
	/* flex-direction: column; */
	height: 3.8rem;
}

/* radio */
/* Base for label styling */
[type="radio"]:not(:checked),
[type="radio"]:checked {
	position: absolute;
	left: 0;
	opacity: 0.01;
}

[type="radio"]:not(:checked)+label,
[type="radio"]:checked+label {
	position: relative;
	padding-left: 2.2rem;
	flex: 1;
	cursor: pointer;
}

/* checkbox aspect */
.radio_list [type="radio"]:not(:checked)+label {
	color: var(--gray);
}

.radio_list [type="radio"]:checked+label {
	color: var(--black);
}

.radio_list [type="radio"]:not(:checked)+label:before,
.radio_list [type="radio"]:checked+label:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 1.6rem;
	height: 1.6rem;
	background: var(--secondary) url(../images/icon/ico_radio.svg) center no-repeat;
	border-radius: 2rem;
	transition: all .2s;
}

/* checked mark aspect */
.radio_list [type="radio"]:not(:checked)+label:after,
.radio_list [type="radio"]:checked+label:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 1.6rem;
	height: 1.6rem;
	background: var(--primary) url(../images/icon/ico_radio_active.svg) center no-repeat;
	border-radius: 2rem;
	transition: all .2s;
}

/* checked mark aspect changes */
.radio_list [type="radio"]:not(:checked)+label:after {
	opacity: 0;
}

.radio_list [type="radio"]:checked+label:after {
	opacity: 1;
}

/* Disabled checkbox */
.radio_list [type="radio"]:disabled:not(:checked)+label:before,
.radio_list [type="radio"]:disabled:checked+label:before {
	box-shadow: none;
	border-color: #bbb;
	background-color: #e9e9e9;
}

/* Accessibility */
.radio_list [type="radio"]:checked:focus+label:before,
.radio_list [type="radio"]:not(:checked):focus+label:before {
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1), 0 0 0 3px rgba(0, 213, 229, 0.2);
}


@media (min-width: 600px) {
	.kis_header_container,
	.wrap {
		max-width: 568px;
	}
	.popup {
		width: calc(568px - 4rem);
	}
	.popup.full {
		width: 568px;
	}
}

@media (min-width: 1152px) {
	.kis_header_container,
	.wrap {
			max-width: 681px;
	}
	.popup {
		width: calc(681px - 4rem);
	}
	.popup.full {
		width: 681px;
	}
	#login_con>.con {
		width: 80%;
	}
}