/***** app *****/
#main.app #visual .slidePage {
	right: 24px;
	left: auto;
	bottom: 93px;
}

#main.app #visual #visualSlide .slideList .textArea {
	padding-bottom: 40px;
}

#main.app #content {
	padding-bottom: 0;
}

#main.app main {
	padding-bottom: 160px;
	overflow: visible !important;
	background: var(--color-grey-07);
}

#main.app main .infoBox {
	position: relative;
	margin-top: -40px;
	margin-bottom: 30px;
	z-index: 1;
	border-radius: 10px;
	background: var(--color-white);
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.04);
}

#main.app main .infoBox .infoWrap {
	padding: 25px 25px 25px;
}

#main.app main .infoBox .infoWrap p.headerCopy {
	font-size: 10px;
	line-height: var(--baseline-4x);
}

#main.app main .infoBox .infoWrap .userInfo {
	display: flex;
	position: relative;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 10px;
	border-bottom: var(--border-primary);
}

#main.app main .infoBox .infoWrap .userInfo .mainStoreArea span {
	font-size: var(--fontsize-description);
	line-height: var(--baseline-4x);
}

#main.app main .infoBox .infoWrap .userInfo .mainStoreArea a {
	padding-right: 19px;
	margin-bottom: 4px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg data-name='sc 1911' style='stroke:%231A1818;fill:none'%3E%3Ccircle cx='8' cy='8' r='8' style='stroke:none'/%3E%3Ccircle cx='8' cy='8' r='7.5' style='fill:none'/%3E%3C/g%3E%3Cpath d='M5.974.4 3.247 5.85A.25.25 0 0 1 3 6a.361.361 0 0 1-.064-.008.257.257 0 0 1-.151-.1.268.268 0 0 1-.057-.168V3.272H.277a.268.268 0 0 1-.168-.057.257.257 0 0 1-.1-.151.276.276 0 0 1 .021-.179.257.257 0 0 1 .123-.128L5.607.03A.256.256 0 0 1 5.731 0a.253.253 0 0 1 .192.081A.254.254 0 0 1 6 .228.26.26 0 0 1 5.974.4z' transform='translate(4.996 4.999)' style='fill:%231A1818'/%3E%3C/svg%3E%0A") no-repeat 100% calc(50% + 2px)/15px auto;
	background-position-y: center;
}

#main.app main .infoBox .infoWrap .userInfo .mainStoreArea a span {
	font-size: var(--fontsize-body-RB);
	line-height: var(--baseline-6x);
	font-weight: 700;
}

#main.app main .infoBox .infoWrap .userInfo strong {
	display: block;
	flex: none;
	margin-right: 10px;
	line-height: var(--baseline-9x);
}

#main.app main .infoBox .infoWrap .userInfo strong em {
	font-size: var(--fontsize-heading-M);
	line-height: var(--baseline-9x);
	font-weight: 700;
}

#main.app main .infoBox .infoWrap .classArea {
	margin-bottom: 15px;
}

#main.app main .infoBox .infoWrap .userInfo .classArea img {
	height: 22px;
}

#main.app main .infoBox .infoWrap .classBenefit {
	display: block;
	width: 100%;
	padding: 12px 0 0;
}

#main.app main .infoBox .infoWrap .classBenefit a {
	display: block;
	padding: 10px 25px 10px 12px;
	line-height: var(--baseline-4x);
	border-radius: 10px;
	font-size: var(--fontsize-description);
	background: var(--color-grey-06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5.273 8.849'%3E%3Cpath id='Icon_ArrowDown_8' d='M4,8,0,4,4,0' transform='translate(4.424 8.424) rotate(180)' fill='none' stroke='%23888' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat calc(100% - 16px) 50%/5px auto;
}

#main.app main .infoBox .infoWrap .mileageArea {
	display: flex;
	position: relative;
	/* flex-wrap: wrap; */
	justify-content: space-between;
	margin-bottom: 10px;
	margin-top: 24px;
}

#main.app main .infoBox .infoWrap .mileageArea dl {
	display: flex;
	align-items: center;
}

#main.app main .infoBox .infoWrap .mileageArea dl dt {
	margin-right: 8px;
	font-weight: 700;
}

@media screen and (max-width:360px) {
	#main.app main .infoBox .infoWrap .mileageArea dl dt {
		margin-right: 4px;
	}

	#main.app main .infoBox .infoWrap .mileageArea dl dd span {
		font-size: var(--fontsize-body-R) /*17px*/;
	}
}


/*#main.app main .infoBox .infoWrap .mileageArea dl dd {
	font-family: "Noto Sans", "Noto Sans KR", sans-serif;
}*/

#main.app main .infoBox .infoWrap .mileageArea dl dd a {
	font-size: var(--fontsize-body-XS);
}

#main.app main .infoBox .infoWrap .mileageArea dl dd span {
	font-size: var(--fontsize-title-M);
	font-weight: 700;
	color: var(--color-blue-06);
}

#main.app main .infoBox .infoWrap .mileageArea .barcode .imgArea {
	background-color: var(--color-grey-07);
	border-radius: var(--radius-m);
	width: 40px;
	text-align: center;
	height: 25px;
}

#main.app main .infoBox .infoWrap .mileageArea .barcode {
	display: flex;
}

#main.app main .infoBox .infoWrap .mileageArea .barcode .imgArea .bar {
	width: 24px;
	border-radius: 30px;
	height: 2px;
	background-color: #3680FF;
	position: absolute;
	top: 15%;
	margin-left: 8px;
	animation: scanning-bar linear 2s;
	animation-iteration-count: 2s;
	transform-origin: 50% 50%;
	-webkit-animation: scanning-bar linear 2s;
	-webkit-animation-iteration-count: infinite;
	-webkit-transform-origin: 50% 50%;
}

@keyframes scanning-bar {
	0% {
		-webkit-transform: translate(0px, 0px);
		transform: translate(0px, 0px);
	}

	25% {
		-webkit-transform: translate(0px, 7px);
		transform: translate(0px, 7px);
	}


	50% {
		-webkit-transform: translate(0px, 15px);
		transform: translate(0px, 15px);
	}

	75% {
		-webkit-transform: translate(0px, 7px);
		transform: translate(0px, 7px);
	}

	100% {
		-webkit-transform: translate(0px, 0px);
		transform: translate(0px, 0px);
	}
}

@-webkit-keyframes scanning-bar {
	0% {
		-webkit-transform: translate(0px, 0px);
	}

	25% {
		-webkit-transform: translate(0px, 7px);
	}


	50% {
		-webkit-transform: translate(0px, 15px);
	}

	75% {
		-webkit-transform: translate(0px, 7px);
	}

	100% {
		-webkit-transform: translate(0px, 0px);
	}
}

#main.app main .infoBox .infoWrap .mileageArea .barcode .imgArea img {
	width: 20px;
	height: 20px;
	margin-top: 2px;
}

#main.app main .infoBox .infoWrap .mileageArea .barcode p {
	display: flex;
	justify-content: center;
	text-align: center;
	margin-top: 6px;
}

#main.app main .infoBox .infoWrap .mileageArea .barcode p i {
	margin: 0 4px;
	line-height: var(--baseline-4x);
	font-size: var(--fontsize-description);
	color: var(--color-grey-03);
}

#main.app main .infoBox .infoWrap .couponArea {
	margin: 0 -24px;
}

#main.app main .infoBox .infoWrap .couponArea > strong {
	display: block;
	padding: 0 24px;
	margin-bottom: 10px;
	font-weight: 700;
}

#main.app main .infoBox .infoWrap .couponArea .slideList {
	padding: 0 24px;
}

#main.app main .infoBox .infoWrap .couponArea .slideList .disabled {
	position: relative;
}

#main.app main .infoBox .infoWrap .couponArea .slideList .disabled:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 5;
	background: rgba(255, 255, 255, 0.5);
}

#main.app main .infoBox .infoWrap .couponArea .slick-dots {
	height: 6px;
	margin-top: 18px;
	padding: 0 16px;
}

#main.app main .infoBox .infoWrap .couponArea .slick-dots li {
	line-height: 6px;
	vertical-align: top;
	margin: 0 3px;
}

#main.app main .infoBox .infoWrap .couponArea .slick-dots li button {
	width: 6px;
	height: 6px;
	border-radius: 3px;
	background: var(--color-blue-05);
	transition: 0.5s;
}

#main.app main .infoBox .infoWrap .couponArea .slick-dots li.slick-active button {
	width: 22px;
	background: var(--color-blue-06);
}

#main.app main .infoBox .infoWrap .couponArea .allCoupon {
	display: flex;
	height: 92px;
	justify-content: space-around;
	align-items: center;
	background: var(--color-grey-07);
}

#main.app main .infoBox .infoWrap .couponArea .allCoupon a span {
	display: block;
	margin-bottom: 6px;
	font-size: var(--fontsize-description);
	line-height: var(--baseline-4x);
	color: var(--color-grey-02);
}

#main.app main .infoBox .infoWrap .couponArea .allCoupon a strong {
	display: block;
	text-align: center;
	font-size: var(--fontsize-title-L);
	font-weight: 700;
	color: var(--color-blue-06);
}

#main.app main .infoBox .infoWrap .couponArea .defaultCoupon .couponBox {
	display: flex;
	height: 92px;
	background: var(--color-grey-07);
	align-items: center;
}

#main.app main .infoBox .infoWrap .couponArea .defaultCoupon .couponBox .textArea {
	width: calc(100% - 58px);
	padding: 0 16px;
}

#main.app main .infoBox .infoWrap .couponArea .defaultCoupon .couponBox .textArea em {
	display: inline-block;
	height: 19px;
	padding: 0 5px;
	margin-bottom: 6px;
	line-height: var(--baseline-5x);
	color: var(--color-white);
	font-size: calc(var(--baseline-3x) / 1.1);
	background: var(--color-blue-01);
}

#main.app main .infoBox .infoWrap .couponArea .defaultCoupon .couponBox .textArea strong {
	display: block;
	margin-bottom: 2px;
	line-height: var(--baseline-5x);
	font-size: var(--fontsize-body-XS);
}

#main.app main .infoBox .infoWrap .couponArea .defaultCoupon .couponBox .textArea span {
	display: block;
	line-height: var(--baseline-4x);
	font-size: var(--fontsize-description);
	color: var(--color-grey-02);
}

#main.app main .infoBox .infoWrap .couponArea .defaultCoupon .couponBox .btnArea {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 92px;
}

#main.app main .infoBox .infoWrap .couponArea .defaultCoupon .couponBox .btnArea a {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--color-blue-01) url("/static/images/icon/download.svg") no-repeat 50%/15px auto;
}

#main.app main .infoBox .infoWrap .couponArea .defaultCoupon .couponBox .btnArea {
	position: relative;
}

#main.app main .infoBox .infoWrap .couponArea .defaultCoupon .couponBox .btnArea:after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 60px;
	background: url(/static/images/app/dot.png) repeat-y 0 0/1px auto;
}

#main.app main .infoBox .infoWrap .couponArea .defaultCoupon .couponBox {
	position: relative;
}

#main.app main .infoBox .infoWrap .couponArea .defaultCoupon .couponBox:after {
	content: "";
	position: absolute;
	right: 53px;
	top: -5px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--color-white);
}

#main.app main .infoBox .infoWrap .couponArea .defaultCoupon .couponBox {
	position: relative;
}

#main.app main .infoBox .infoWrap .couponArea .defaultCoupon .couponBox:before {
	content: "";
	position: absolute;
	right: 53px;
	bottom: -5px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--color-white);
}

#main.app main .infoBox .infoWrap .beforeLoginArea p {
	font-size: var(--fontsize-title-XL);
}

#main.app main .infoBox .infoWrap .beforeLoginArea ul {
	display: flex;
	flex-wrap: wrap;
	margin-top: 8px;
}

#main.app main .infoBox .infoWrap .beforeLoginArea ul li {
	margin-top: 8px;
}

#main.app main .infoBox .infoWrap .beforeLoginArea ul li:nth-child(1) {
	margin-right: 16px;
}

#main.app main .infoBox .infoWrap .beforeLoginArea ul li a {
	display: block;
	width: 100%;
	padding: 4px 16px;
	background: var(--color-blue-01);
	text-align: center;
	border-radius: 3px;
}

#main.app main .infoBox .infoWrap .beforeLoginArea ul li a span {
	display: inline-block;
	padding-right: 15px;
	color: var(--color-white);
	font-size: var(--fontsize-body-XS);
	letter-spacing: -1px;
}

#main.app main .infoBox .infoWrap .beforeLoginArea ul li a span {
	position: relative;
}

#main.app main .infoBox .infoWrap .beforeLoginArea ul li a span:after {
	content: "";
	position: absolute;
	width: 5px;
	height: 10px;
	right: 0;
	top: 6px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5.273 8.849'%3E%3Cpath id='Icon_ArrowDown_8' d='M4,8,0,4,4,0' transform='translate(4.424 8.424) rotate(180)' fill='none' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat 0 0/100%;
}

#main.app main .infoBox .infoWrap .beforeLoginArea ul li:y-of-type {
	margin-right: 0;
	padding-right: 0;
}

#main.app main .infoBox .infoWrap .beforeLoginArea ul li:y-of-type::after,
#main.app main .infoBox .infoWrap .beforeLoginArea ul li:y-of-type::before {
	display: none;
}

#main.app main .infoBox .infoWrap .benefitArea {
	margin-top: 40px;
}

#main.app main .infoBox .infoWrap .benefitArea .hl {
	display: inline-block;
	margin-bottom: 16px;
	font-weight: 700;
	font-size: var(--fontsize-title-M);
	color: var(--color-blue-01);
	/*background: linear-gradient(to top, var(--color-white)A9E 50%, transparent 50%);*/
}

#main.app main .infoBox .infoWrap .benefitArea ul li {
	margin-bottom: 10px;
	font-size: var(--fontsize-body-XS);
}

#main.app main .infoBox .infoWrap .benefitArea ul li:last-of-type {
	margin-bottom: 0;
	padding-bottom: 0;
}

#main.app main .infoBox .infoWrap .benefitArea ul li:last-of-type::after,
#main.app main .infoBox .infoWrap .benefitArea ul li:last-of-type::before {
	display: none;
}

/* 앱메인_사은행사 */

#main.app main .AeventArea h3,
#main.app main .lifeStyle h3 {
	margin-bottom: 5px;
	font-size: var(--fontsize-title-M);
	line-height: var(--baseline-7x);
	font-weight: 700;
}

#main.app main .AeventArea .eventWrap {
	position: relative;
	margin-bottom: 30px;
	border-radius: 10px;
	background: var(--color-white);
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.04);
	padding: 25px;
}

#main.app main .AeventArea .eventWrap .eventBox a {
	display: flex;
}

#main.app main .AeventArea .eventWrap .eventBox .imgArea {
	position: relative;
	overflow: hidden;
	width: 70px;
	border-radius: 10px;
}

#main.app main .AeventArea .eventWrap .eventBox .imgArea img {
	transform: scale(1);
	width: 100%;
	aspect-ratio: 1/1;
}

#main.app main .AeventArea .eventWrap .eventBox .textArea {
	width: calc(100% - 58px);
	padding: 0 0 0 16px;
}

#main.app main .AeventArea .eventWrap .eventBox .textArea em {
	display: inline-block;
	padding: 0 5px;
	margin-bottom: 5px;
	color: var(--color-white);
	font-size: calc(var(--baseline-3x) / 1.1);
	font-weight: 500;
	background: var(--color-blue-01);
	line-height: var(--baseline-5x);
}

#main.app main .AeventArea .eventWrap .eventBox .textArea strong {
	display: block;
	margin-bottom: 2px;
	font-size: calc(var(--baseline-6x) / 1.6);
	line-height: var(--baseline-5x);
	font-weight: 700;
}

#main.app main .AeventArea .eventWrap .eventBox .textArea span {
	display: block;
	font-size: var(--fontsize-description);
	line-height: var(--baseline-4x);
	color: var(--color-grey-02);
}

#main.app main .AeventArea .eventWrap {
	position: relative;
}

#main.app main .AeventArea .eventWrap .slick-dots {
	height: 6px;
	margin-top: 18px;
	padding: 0 16px;
}

#main.app main .AeventArea .eventWrap .slick-dots li {
	line-height: 6px;
	vertical-align: top;
	margin: 0 3px;
}

#main.app main .AeventArea .eventWrap .slick-dots li.slick-active button {
	width: 22px;
	background: var(--color-blue-06);
}

#main.app main .AeventArea .eventWrap .slick-dots li button {
	width: 6px;
	height: 6px;
	border-radius: 3px;
	background: var(--color-blue-05);
	transition: 0.5s;
}


/*#main.app main .lifeStyle h3 {
	margin-bottom: 5px;
	font-size: var(--fontsize-title-M);
	line-height: var(--baseline-7x);
	font-weight: 700;
}*/

#main.app main .lifeStyle ul {
	display: inline-block;
	padding: 15px 20px 15px 20px !important;
	border-radius: 10px;
	background: var(--color-white);
}

#main.app main .lifeStyle ul li {
	display: flex;
	width: 50%;
	float: left;
	font-size: var(--fontsize-body-XS);
	border-bottom: 0 !important;
	letter-spacing: -0.5px;
}

#main.app main .lifeStyle ul li a {
	width: -webkit-fill-available;
	padding: 7px 0 !important;
	line-height: 30px;
}

#main.app main .lifeStyle ul li a strong {
	display: inline-block;
	margin-bottom: 2px;
	line-height: var(--baseline-6x);
	font-weight: 700;
	background: linear-gradient(to top, var(--color-white)A9E 50%, transparent 50%);
}

#main.app main .lifeStyle ul li a p {
	line-height: var(--baseline-5x);
	font-size: var(--fontsize-body-XS);
	color: var(--color-grey-02);
}

#main.app main .lifeStyle ul li a {
	position: relative;
}

#main.app main .lifeStyle ul li a:after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 6px;
	height: 11px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6.061 10.707'%3E%3Cpath id='Icon_Arrow_Right_10' d='M5,10,0,5,5,0' transform='translate(5.354 10.354) rotate(180)' fill='none' stroke='%23aaa' stroke-width='1'/%3E%3C/svg%3E%0A") no-repeat 0 0/100%;
}

#main.app main .lifeStyle ul li:last-of-type {
	border-bottom: 0;
}


#wrapper.setting main article ul li {
	display: flex;
	justify-content: space-between;
	padding: 18px 0;
	border-bottom: 1px solid var(--color-grey-05);
}

#main.app main .lifeStyle ul li a .icon {
	display: inline-block;
	overflow: hidden;
	text-indent: -9999px;
	vertical-align: middle;
	width: 25px;
	height: 25px;
	border-radius: 30px;
	background-color: var(--color-grey-07);
	margin-right: 15px;
}

#main.app main .lifeStyle ul li a .icon {
	background-repeat: no-repeat;
	background-size: 16px;
	-webkit-background-size: 16px;
	background-position: center;
}

#main.app main .lifeStyle ul li a .aclass {
	background-image: url(/static/images/icon/main/aclass.svg);
}

#main.app main .lifeStyle ul li a .mycar {
	background-image: url(/static/images/icon/main/mycar.svg);
}

#main.app main .lifeStyle ul li a .baki {
	background-image: url(/static/images/icon/main/bakimom.svg);
	background-size: 18px;
	-webkit-background-size: 18px;
}

#main.app main .lifeStyle ul li a .speed {
	background-image: url(/static/images/icon/main/speed.svg);
}

#main.app main .lifeStyle ul li a .matinee {
	background-image: url(/static/images/icon/main/matinee.svg);
}

#main.app main .lifeStyle ul li a .scrap {
	background-image: url(/static/images/icon/main/scrap.svg);
}

#main.app main .lifeStyle ul li a .edm {
	background-image: url(/static/images/icon/main/edm.svg);
}

#main.app main .lifeStyle ul li a .push {
	background-image: url(/static/images/icon/main/pushev.svg);
}

#main.app main .lifeStyle ul li a .wedding {
	background-image: url(/static/images/icon/main/marriage.svg);
}

#main.app main .lifeStyle ul li a .young {
	background-image: url(/static/images/icon/main/young.svg);
}

#main.app main .lifeStyle ul li a .myclass {
	background-image: url(/static/images/icon/main/myclass.svg);
}

#main.app main .lifeStyle ul li a .mybag {
	background-image: url(/static/images/icon/main/mybag.svg);
}


#main.app main .lifeStyle ul li a:after {
	display: none;
}

@media screen and (max-width:320px) {

	#main.app main .infoBox .infoWrap dl dt {
		line-height: 30px !important;
	}

	#main.app main .infoBox .infoWrap .mileageArea {
		display: block;
		margin-bottom: 0;
		margin-top: 15px;

	}

	#main.app main .infoBox .infoWrap .mileageArea .barcode .imgArea img {
		margin-top: 5px;
	}

	#main.app main .infoBox .infoWrap .couponArea dl dd,
	#main.app main .infoBox .infoWrap .mileageArea dl dd {
		line-height: 30px;
		right: 0;
		position: absolute;
	}

	#main.app main .infoBox .infoWrap .couponArea dl dt,
	#main.app main .infoBox .infoWrap .mileageArea dl dt {
		margin-right: 15px;
	}

	#main.app main .lifeStyle ul li {
		width: 100%;
		border-bottom: 1px solid var(--color-grey-05);
		font-size: var(--fontsize-body-XS) /*15px*/;
	}

	#main.app main .lifeStyle ul li:nth-last-child() {
		border-bottom: 0 !important;
	}

	#main.app main .lifeStyle ul li a .icon {
		margin-right: 15px;
	}

}

#shakePop {
	position: fixed;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	left: 0;
	height: auto;
	bottom: 0;
	width: 100%;
	background: var(--color-white);
	z-index: 30;
	animation-name: barCodeOpen;
	animation-duration: 0.25s;
	animation-delay: 0s;
	animation-fill-mode: both;
}

#shakePop img {
	width: auto;
}

#shakePop .shakePopWrap {
	padding: 40px 10%;
	max-width: 750px;
	margin: 0 auto;
}

#shakePop .shakePopWrap .userInfo ul {
	margin: 20px 0 30px;
}

#shakePop .shakePopWrap .userInfo ul li {
	font-size: var(--fontsize-body-XS);
	line-height: var(--baseline-6x);
	text-align: right;
}

#shakePop .shakePopWrap .userInfo ul li em {
	font-weight: 700;
	color: var(--color-blue-06);
}

#shakePop .shakePopWrap .userInfo ul li:first-child {
	float: left;
	margin-right: 15px;
	font-size: var(--fontsize-title-L);
	font-weight: 700;
	color: var(--color-primary);
	line-height: 18px;
}

#shakePop .shakePopWrap > strong {
	display: block;
	text-align: center;
	font-size: var(--fontsize-title-M);
	line-height: var(--baseline-5x);
	margin-bottom: 20px;
	font-weight: 700;
}

#shakePop .shakePopWrap .barCodeBox {
	position: relative;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	height: auto;
}

#shakePop .shakePopWrap .barCodeBox .imgArea img {
	max-height: 124px;
	margin-top: 10px;
}

#shakePop .shakePopWrap .barCodeBox span {
	display: flex;
	margin-top: 5px;
	color: var(--color-grey-02);
	font-size: var(--fontsize-body-XS);
	letter-spacing: 7px;
}

#shakePop .shakePopWrap .barCodeBox span i {
	display: block;
	margin: 0 4px;
	line-height: 22px;
}

#shakePop .shakePopWrap .barCodeBox .loader {
	width: 90%;
	max-width: 310px;
	height: 2px;
	top: 0;
	border-radius: 2px;
	background-color: rgba(0, 0, 0, 0.2);
	position: absolute;
}

#shakePop .shakePopWrap .barCodeBox .loader::before {
	content: "";
	position: absolute;
	background-color: rgb(42 121 255);
	width: 20%;
	height: 100%;
	animation: load 3s ease-in-out infinite;
	box-shadow: rgb(0 78 210) 0px 0px 20px 0px;
}

@keyframes load {
	0% {
		left: 0;
		right: unset;

	}


	50% {
		transform: translateX(400%)
	}

	100% {

		left: unset;
	}

}

/*@keyframes load {
	50% {
		width: 100%;
	}

	100% {
		right: 0;
		left: unset;
	}
}
*/

#shakePop .shakePopWrap .noti {
	margin-top: 30px;
	font-size: var(--fontsize-description);
	line-height: var(--baseline-4x);
	color: var(--color-grey-03);
	text-align: center;
}

#shakePop .shakePopWrap .btnPopClose {
	position: absolute !important;
	right: 24px;
	top: 32px;
	width: 20px;
	height: 20px;
}

#shakePop .shakePopWrap .btnPopClose {
	position: relative;
}

#shakePop .shakePopWrap .btnPopClose:after {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25.131' height='25.131' viewBox='0 0 25.131 25.131'%3E%3Cg id='group_33273' data-name='group 33273' transform='translate(0.566 0.566)'%3E%3Cpath id='path_34968' data-name='path 34968' d='M839.392,213.286l24,24' transform='translate(-839.392 -213.286)' fill='none' stroke='%23aaa' stroke-width='1.6'/%3E%3Cpath id='path_34969' data-name='path 34969' d='M863.392,213.286l-24,24' transform='translate(-839.392 -213.286)' fill='none' stroke='%23aaa' stroke-width='1.6'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat 0 0/100%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

#shakePop.close {
	animation-name: barCodeClose;
	animation-duration: 0.25s;
	animation-fill-mode: both;
	animation-delay: 0s;
}

#barcodePopBg {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 29;
	background: var(--color-primary);
	animation-name: popBg;
	animation-duration: 0.25s;
	animation-delay: 0s;
	animation-fill-mode: both;
}

#barcodePopBg.close {
	animation-name: popBgClose;
	animation-duration: 0.25s;
	animation-delay: 0s;
	animation-fill-mode: both;
}

#bioPop {
	position: fixed;
	top: 50%;
	left: 50%;
	width: calc(100% - 48px);
	transform: translate(-50%, -50%);
	background: var(--color-white);
	z-index: 21;
}

#bioPop .bioPopWrap {
	padding: 24px;
}

#bioPop .bioPopWrap p {
	text-align: center;
	font-size: var(--fontsize-body-R);
	line-height: var(--baseline-7x);
}

#bioPop .bioPopWrap .btnArea {
	display: flex;
	padding-top: 24px;
}

@media screen and (max-width: 320px) {
	#bioPop .bioPopWrap p {
		font-size: var(--fontsize-body-XS);
		line-height: var(--baseline-6x);
		letter-spacing: -0.4px;
	}
}

#wrapper.appMember #appBanner {
	display: none;
}

#appLogin .titleArea {
	padding-top: 24px;
	margin-bottom: 40px;
}

#appLogin .titleArea h2 {
	font-size: var(--fontsize-heading-M);
	font-weight: 700;
	line-height: var(--baseline-9x);
	text-align: center;
}

#appLogin .titleArea p {
	margin-top: 8px;
	color: var(--color-grey-02);
	line-height: var(--baseline-6x);
	text-align: center;
}

#appLogin main .btnArea a {
	margin-bottom: 16px;
}

#appLogin main .btnArea a:last-of-type {
	margin-bottom: 0;
	padding-bottom: 0;
}

#appLogin main .btnArea a:last-of-type::after,
#appLogin main .btnArea a:last-of-type::before {
	display: none;
}

#appLogin main .btnBox {
	padding-top: 32px;
	text-align: center;
}

#appLogin main .btnBox a {
	display: inline-block;
	line-height: 26px;
	color: var(--color-blue-01);
}

#appLogin main .btnBox a {
	position: relative;
}

#appLogin main .btnBox a:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 100%;
	height: 1px;
	background: var(--color-blue-01);
}

#appLoginId .titleArea {
	padding-top: 24px;
	margin-bottom: 32px;
}

#appLoginId .titleArea h2 {
	font-size: var(--fontsize-heading-M);
	font-weight: 700;
	line-height: var(--baseline-9x);
	text-align: center;
}

#appLoginId .titleArea p {
	margin-top: 8px;
	color: var(--color-grey-02);
	line-height: var(--baseline-6x);
	text-align: center;
}

#appLoginId main .btnArea a {
	margin-bottom: 16px;
}

#appLoginId main .btnArea a:last-of-type {
	margin-bottom: 0;
	padding-bottom: 0;
}

#appLoginId main .btnArea a:last-of-type::after,
#appLoginId main .btnArea a:last-of-type::before {
	display: none;
}

#appLoginId main .btnArea + span {
	margin-top: 16px;
	color: var(--color-grey-02);
	font-size: var(--fontsize-body-XS);
}

#appLoginId main .inputArea {
	margin-bottom: 40px;
}

#appLoginId main .inputArea input[type=text],
#appLoginId main .inputArea input[type=password] {
	width: 100%;
	height: 48px;
	padding: 0 16px;
	border: var(--border-table-bottom);
	font-size: var(--fontsize-body-XS);
	margin-bottom: 16px;
}

#appLoginId main .inputArea span {
	margin-top: 8px;
	margin-right: 24px;
}

#appLoginId main .inputArea span:last-of-type {
	margin-right: 0;
	padding-right: 0;
}

#appLoginId main .inputArea span:last-of-type::after,
#appLoginId main .inputArea span:last-of-type::before {
	display: none;
}

#appLoginId main .inputArea span label {
	font-size: var(--fontsize-body-XS);
	font-weight: 400;
	color: var(--color-grey-02);
}

#appLoginId main .socialLogin {
	margin-top: 49px;
	padding-top: 34px;
	border-top: var(--border-table-bottom);
}

#appLoginId main .socialLogin ul {
	display: flex;
	justify-content: space-around;
}

#appLoginId main .socialLogin ul li a {
	display: block;
	width: 82px;
}

#appLoginId main .socialLogin ul li a span {
	display: block;
	padding-top: 70px;
	font-size: var(--fontsize-body-XS);
	text-align: center;
	line-height: var(--baseline-5x);
}

#appLoginId main .socialLogin ul li a {
	position: relative;
}

#appLoginId main .socialLogin ul li a:after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 60px;
	border-radius: 50%;
}

#appLoginId main .socialLogin ul li.ico_naver a:after {
	background: url("/static/images/icon/sns/naver.svg") no-repeat 0 0/60px auto;
}

#appLoginId main .socialLogin ul li.ico_kakao a:after {
	background: url("/static/images/icon/sns/kakao.svg") no-repeat 0 0/60px auto;
}

#appLoginId main .socialLogin ul li.ico_apple a:after {
	background: url("/static/images/icon/sns/apple.svg") no-repeat 0 0/60px auto;
}

#appLoginId main .socialLogin {
	position: relative;
}

#appLoginId main .socialLogin:after {
	content: "";
	position: absolute;
	content: "OR";
	left: 50%;
	transform: translateX(-50%);
	margin-top: -10px;
	top: 0;
	width: 56px;
	font-size: var(--fontsize-body-XS);
	color: var(--color-grey-02);
	text-align: center;
	line-height: var(--baseline-5x);
	background: var(--color-white);
}

#appLoginId main .etcMenu {
	display: flex;
	margin-top: 24px;
	justify-content: center;
}

#appLoginId main .etcMenu li {
	padding-right: 21px;
	margin-right: 20px;
}

#appLoginId main .etcMenu li a {
	display: block;
	line-height: var(--baseline-6x);
	color: var(--color-grey-02);
}

#appLoginId main .etcMenu li {
	position: relative;
}

#appLoginId main .etcMenu li:after {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 0;
	width: 1px;
	height: 14px;
	background: var(--color-grey-04);
}

#appLoginId main .etcMenu li:last-child {
	margin-right: 0;
	padding-right: 0;
}

#appLoginId main .etcMenu li:last-child:after {
	display: none;
}

#appCertify .titleArea {
	padding-top: 24px;
	margin-bottom: 40px;
}

#appCertify .titleArea h2 {
	font-size: var(--fontsize-heading-M);
	font-weight: 700;
	line-height: var(--baseline-9x);
	text-align: center;
}

#appCertify main ul {
	display: flex;
}

#appCertify main ul li {
	width: calc(100% + 1px);
	border: var(--border-table-bottom);
	margin-left: -1px;
}

#appCertify main ul li a {
	display: flex;
	height: 158px;
	justify-content: center;
	align-items: center;
}

#appCertify main ul li a span {
	display: block;
	font-size: var(--fontsize-body-XS);
	padding-top: 76px;
	line-height: var(--baseline-6x);
}

#appCertify main ul li:first-of-type {
	width: 100%;
	margin-left: 0;
}

#appCertify main ul li.ico_card a span {
	background: url("/static/images/icon/ak_card.svg") no-repeat 50% 24px/62px auto;
}

#appCertify main ul li.ico_phone a span {
	background: url("/static/images/icon/selfauth_phone.svg") no-repeat 50% 0/55px auto;
}

#appLoginPin .titleArea {
	padding-top: 24px;
	margin-bottom: 40px;
}

#appLoginPin .titleArea h2 {
	font-size: var(--fontsize-heading-M);
	font-weight: 700;
	line-height: var(--baseline-9x);
	text-align: center;
}

#appLoginPin main > p {
	margin-bottom: 48px;
	text-align: center;
}

#appLoginPin main .dotArea {
	display: flex;
	justify-content: center;
	text-align: center;
	margin-bottom: 48px;
}

#appLoginPin main .dotArea i {
	display: block;
	margin: 0 8px;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	background: var(--color-grey-04);
}

#appLoginPin main .dotArea i.on {
	background: var(--color-blue-01);
}

#appLoginPin main input {
	position: absolute;
	top: -1px;
	left: -1px;
	width: 1px;
	height: 1px;
	opacity: 0;
	border: 0;
}

#appLoginPin main .btnBox {
	text-align: center;
}

#appLoginPin main .btnBox a {
	display: inline-block;
	font-size: var(--fontsize-body-XS);
	color: var(--color-blue-01);
	line-height: var(--baseline-5x);
}

#appLoginPin main .btnBox a {
	position: relative;
}

#appLoginPin main .btnBox a:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 100%;
	height: 1px;
	background: var(--color-blue-01);
}

#appLoginPin main .btnArea {
	margin-top: 100px;
}

#appLoginPin main .btnArea a {
	margin-bottom: 16px;
}

#appLoginPin main .btnArea a:last-of-type {
	margin-bottom: 0;
	padding-bottom: 0;
}

#appLoginPin main .btnArea a:last-of-type::after,
#appLoginPin main .btnArea a:last-of-type::before {
	display: none;
}

#appPin .titleArea {
	padding-top: 24px;
	margin-bottom: 40px;
}

#appPin .titleArea h2 {
	font-size: var(--fontsize-heading-M);
	font-weight: 700;
	line-height: var(--baseline-9x);
	text-align: center;
}

#appPin main .cautionArea {
	padding: 105px 40px 40px;
	margin-bottom: 40px;
	text-align: center;
	font-size: var(--fontsize-body-XS);
	line-height: 22px;
	background: var(--color-grey-07);
}

#appPin main .cautionArea {
	position: relative;
}

#appPin main .cautionArea:after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 32px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--color-white) url("/static/images/icon/locked.svg") no-repeat 50%/22px auto;
}

#appPin main .inputArea li {
	display: flex;
	align-items: center;
	margin-bottom: 16px;
}

#appPin main .inputArea li label {
	min-width: 100px;
	margin-right: 30px;
}

#appPin main .inputArea li input {
	width: 100%;
	height: 48px;
	padding: 0 16px;
	border: var(--border-table-bottom);
}

#appPin main .inputArea li:last-of-type {
	margin-bottom: 0;
	padding-bottom: 0;
}

#appPin main .inputArea li:last-of-type::after,
#appPin main .inputArea li:last-of-type::before {
	display: none;
}

#appPin main .btnArea {
	margin-top: 40px;
}

#alarmPopup {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: var(--color-white);
	z-index: 1000100;
}

#alarmPopup .popWrap {
	position: relative;
	height: 100%;
	width: 100%;
	overflow: hidden;
}

#alarmPopup #authorityArea {
	position: absolute;
	height: 100%;
	width: 100%;
	transition: 0.5s;
}

#alarmPopup #authorityArea .scrollBox {
	height: calc(100% - 64px);
	padding: 80px 24px;
	overflow: auto;
}

#alarmPopup #authorityArea .scrollBox h2 {
	line-height: var(--baseline-9x);
	font-size: var(--fontsize-heading-M);
	margin-bottom: 40px;
}

#alarmPopup #authorityArea .scrollBox article {
	margin-bottom: 48px;
}

#alarmPopup #authorityArea .scrollBox article h3 {
	margin-bottom: 8px;
	font-size: var(--fontsize-title-L);
}

#alarmPopup #authorityArea .scrollBox article h3 ~ p {
	font-size: var(--fontsize-body-XS);
	line-height: var(--baseline-5x);
}

#alarmPopup #authorityArea .scrollBox article ul {
	margin-top: 24px;
}

#alarmPopup #authorityArea .scrollBox article ul li {
	min-height: 48px;
	padding-left: 68px;
	margin-bottom: 24px;
}

#alarmPopup #authorityArea .scrollBox article ul li strong {
	display: block;
	margin-bottom: 4px;
	line-height: var(--baseline-6x);
}

#alarmPopup #authorityArea .scrollBox article ul li span {
	display: block;
	font-size: var(--fontsize-body-XS);
	color: var(--color-grey-02);
	line-height: var(--baseline-5x);
}

#alarmPopup #authorityArea .scrollBox article ul li {
	position: relative;
}

#alarmPopup #authorityArea .scrollBox article ul li:after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: var(--color-grey-07) !important;
}

#alarmPopup #authorityArea .scrollBox article ul li:last-of-type {
	margin-bottom: 0;
}

#alarmPopup #authorityArea .scrollBox article ul li.icoPhone:after {
	background: url("/static/images/icon/pop/alarm_phone.svg") no-repeat 50%/20px auto;
}

#alarmPopup #authorityArea .scrollBox article ul li.icoPhoto:after {
	background: url("/static/images/icon/pop/alarm_photo.svg") no-repeat 50%/24px auto;
}

#alarmPopup #authorityArea .scrollBox article ul li.icoCamera:after {
	background: url("/static/images/icon/pop/alarm_camera.svg") no-repeat 50%/26px auto;
}

#alarmPopup #authorityArea .scrollBox article ul li.icoLocation:after {
	background: url("/static/images/icon/pop/alarm_location.svg") no-repeat 50%/19px auto;
}

#alarmPopup #authorityArea .scrollBox article ul li.icoTell:after {
	background: url("/static/images/icon/pop/alarm_tell.svg") no-repeat 50%/23px auto;
}

#alarmPopup #authorityArea .scrollBox article:last-of-type {
	margin-bottom: 0;
	padding-bottom: 0;
}

#alarmPopup #authorityArea .scrollBox article:last-of-type::after,
#alarmPopup #authorityArea .scrollBox article:last-of-type::before {
	display: none;
}

#alarmPopup #alarmArea {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	transform: translateX(100%);
	transition: 0.5s;
}

#alarmPopup #alarmArea .scrollBox {
	height: 100%;
	padding: 24px;
	overflow: auto;
}

#alarmPopup #alarmArea .scrollBox .alignArea {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100%;
}

#alarmPopup #alarmArea .scrollBox .alignArea h2 {
	margin-bottom: 118px;
	text-align: center;
	font-size: var(--fontsize-heading-M);
}

#alarmPopup #alarmArea .scrollBox .alignArea h3 {
	padding-top: 75px;
	line-height: var(--baseline-8x);
	margin-bottom: 8px;
	text-align: center;
	font-size: var(--fontsize-title-L);
	background: url("/static/images/icon/pop/alarm_notice.svg") no-repeat 50% 0/59px auto;
}

#alarmPopup #alarmArea .scrollBox .alignArea h3 i {
	background: linear-gradient(to top, var(--color-white)A9E 50%, transparent 50%);
}

#alarmPopup #alarmArea .scrollBox .alignArea p {
	margin-bottom: 8px;
	line-height: var(--baseline-6x);
	text-align: center;
}

#alarmPopup #alarmArea .scrollBox .alignArea span {
	display: block;
	color: var(--color-grey-02);
	font-size: var(--fontsize-body-XS);
	line-height: var(--baseline-5x);
	text-align: center;
}

#alarmPopup #alarmArea .scrollBox .alignArea .btnContent {
	margin-top: 60px;
}

#alarmPopup #alarmArea .scrollBox .alignArea .btnContent a {
	margin-bottom: 16px;
}

#alarmPopup #alarmArea .scrollBox .alignArea .btnContent a:last-of-type {
	margin-bottom: 0;
}

#alarmPopup.next #authorityArea {
	transform: translateX(-100%);
}

#alarmPopup.next #alarmArea {
	transform: translateX(0);
}

#memberChangePopWrap {
	position: fixed;
	left: 24px;
	top: 50%;
	width: calc(100% - 48px);
	transform: translateY(-50%);
	padding: 30px 24px;
	background: var(--color-white);
	z-index: 21;
}

#memberChangePopWrap h2 {
	display: block;
	padding-right: 30px;
	font-size: var(--fontsize-title-L);
}

#memberChangePopWrap .cont {
	padding: 32px 0 40px;
	min-height: 100px;
	word-break: break-all;
	line-height: 1.71;
}

#memberChangePopWrap .cont p {
	font-size: var(--fontsize-body-XS);
	line-height: 1.71;
	letter-spacing: -0.14px;
}

#memberChangePopWrap .cont > div {
	margin: 24px 0 0;
	padding: 24px 16px;
	background: var(--color-grey-07);
}

#memberChangePopWrap .cont > div ul li {
	font-size: var(--fontsize-body-XS);
	margin-bottom: 8px;
	line-height: 1.63;
}

#memberChangePopWrap .cont > div .logoBox {
	margin-bottom: 28px;
}

#memberChangePopWrap .cont > div .logoBox li {
	position: relative;
	display: inline-block;
	height: 9.5px;
	text-indent: -1000px;
	font-size: 0;
}

#memberChangePopWrap .cont > div .logoBox li {
	position: relative;
}

#memberChangePopWrap .cont > div .logoBox li:after {
	content: "";
	position: absolute;
	right: -8px;
	top: 1px;
	width: 1px;
	height: 8px;
	background: var(--color-grey-02);
}

#memberChangePopWrap .cont > div .logoBox li:first-of-type {
	width: 73px;
	margin-right: 10px;
	background: url("/static/images/icon/logo_bl.svg") no-repeat 0 0/73px;
}

/*
#memberChangePopWrap .cont > div .logoBox li:nth-of-type(2) {
	width: 68px;
	margin-right: 10px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100.89 14'%3E%3Cg id='g_37587' data-name='g 37587' transform='translate(0)'%3E%3Cpath id='p_36642' data-name='p 36642' d='M177.01,10.157,173.7,15.638l-3.29-5.481h-1.555v6.66h1.368V12.454l2.6,4.363h1.764l2.6-4.365v4.365h1.366v-6.66Zm9.358,0-3.968,6.66h1.549l3.309-5.478,3.287,5.478H192.1l-3.968-6.66Zm10.247,0v6.66h7.061V15.7h-5.693V10.157Zm11.533,0v6.66h7.066V15.7h-5.7V10.157Z' transform='translate(-114.325 -6.513)' fill='%231A1818'/%3E%3Cpath id='p_36643' data-name='p 36643' d='M104.94,1.622,88.019,11.49V1.622H85.734V15.04L96.15,8.786l9.524,5.67h3.964L98.031,7.767,108.87,1.622Z' transform='translate(-57.217 -1.04)' fill='%231A1818'/%3E%3Cpath id='p_36644' data-name='p 36644' d='M14.083,0,0,13.38H3.041L14.069,2.774,25.1,13.38H28.14Z' fill='%231A1818'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat 0 0/68px;
}
*/

#memberChangePopWrap .cont > div .logoBox li:last-of-type {
	font-size: 9px;
	text-indent: 0;
	vertical-align: middle;
	text-align: center;
}

#memberChangePopWrap .cont > div .logoBox li:last-of-type:after {
	display: none;
}

#memberChangePopWrap .cont > div .logoBox li:last-of-type span {
	color: var(--color-grey-02);
}

#memberChangePopWrap .btnPopClose {
	position: absolute !important;
	right: 0;
	top: 0;
	width: 24px;
	height: 24px;
}

#memberChangePopWrap .btnPopClose {
	position: relative;
}

#memberChangePopWrap .btnPopClose:after {
	content: "";
	position: absolute;
	width: 24px;
	height: 24px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25.131' height='25.131' viewBox='0 0 25.131 25.131'%3E%3Cg id='group_33273' data-name='group 33273' transform='translate(0.566 0.566)'%3E%3Cpath id='path_34968' data-name='path 34968' d='M839.392,213.286l24,24' transform='translate(-839.392 -213.286)' fill='none' stroke='%23aaa' stroke-width='1.6'/%3E%3Cpath id='path_34969' data-name='path 34969' d='M863.392,213.286l-24,24' transform='translate(-839.392 -213.286)' fill='none' stroke='%23aaa' stroke-width='1.6'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat 0 0/100%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

#memberChangePopWrap .btnBox {
	display: flex;
	justify-content: space-between;
}

#memberChangePopWrap .btnBox a {
	width: 216px;
	height: 56px;
	line-height: var(--baseline-14x);
}

#updatePop {
	position: fixed;
	left: 24px;
	top: 50%;
	width: calc(100% - 48px);
	transform: translateY(-50%);
	background: var(--color-white);
	z-index: 100201;
}

#updatePopWrap {
	padding: 40px 14px 25px;
	text-align: center;
}

#updatePopWrap h2 {
	display: inline-block;
	width: 80px;
	height: 38px;
	margin-bottom: 24px;
	background: url("/static/images/icon/logo_row.svg") no-repeat 50%/100% auto;

}

#updatePopWrap p {
	color: var(--color-grey-02);
	line-height: var(--baseline-5x);
	font-size: var(--fontsize-body-XS);
}

#updatePopWrap .btnArea {
	margin-top: 20px;
}

#updatePopWrap .btnArea a {
	display: inline-block;
	margin-bottom: 12px;
}

#updatePopWrap .btnArea a.btnUpdate {
	width: 100%;
	height: 36px;
	text-align: center;
	line-height: var(--baseline-9x);
	font-size: var(--fontsize-body-XS);
	color: var(--color-white);
	background: #333;
}

#updatePopWrap .btnArea a.btnUnderline {
	font-size: var(--fontsize-description);
	color: var(--color-grey-02);
	text-decoration: underline;
	line-height: var(--baseline-4x);
}

#updatePopWrap .btnArea a:last-of-type {
	margin-bottom: 0;
	padding-bottom: 0;
}

#updatePopWrap .btnArea a:last-of-type::after,
#updatePopWrap .btnArea a:last-of-type::before {
	display: none;
}

#updatePop ~ #updatePopBg {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 100200;
}

@media screen and (max-width: 360px) {
	#wrapper.main.app section main .infoBox .infoWrap .couponArea .defaultCoupon .couponBox .textArea strong {
		font-size: var(--fontsize-description);
	}

	#wrapper.main.app section main .infoBox .infoWrap .couponArea .defaultCoupon .couponBox .textArea span {
		font-size: 10px;
	}
}

@media screen and (max-width: 320px) {
	#wrapper.main.app #appHeader .utilMenu .btnStore {
		font-size: var(--fontsize-body-XS);
	}
}





#appDownArea {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 1000010;
	top: -40px;
	left: 0;
}

#appDownArea.mobileapp0 * {
	color: var(--color-white);
}

#appDownArea h1.mobileapp1 {
	position: absolute;
	top: 85px;
	left: 10%;
	font-size: 30px;
	text-align: left;
	z-index: 1;
}


#appDownArea .mobileappimg {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

#wrapper .mobileappdiv {
	position: fixed;
	z-index: 1000011;
	width: 100%;
	/* 	padding: 30px; */
	left: 0;
	display: flex;
	justify-content: center;
}

#wrapper .mobileappimg3 {
	display: block;
	margin: auto;
	position: fixed;

	width: 80%;

}


#appDownArea .mobileapp2 {
	position: relative;
	top: 73%;
	font-size: var(--fontsize-body-R);
	text-align: center;
	width: 80%;
	display: block;
	margin: auto;
}

#appDownArea div.button {
	position: relative;
	top: 76%;
	width: 70%;
	height: 50px;
	line-height: 50px;
	text-align: center;
	margin: 0 auto;
	border: 1px solid var(--color-white);
}

#appDownArea div.button > a {
	font-size: var(--fontsize-title-S);
	text-align: center;
	margin: 0 auto;
}

#appDownArea .mobileapp3 {
	position: relative;
	top: 79%;
	font-size: var(--fontsize-body-R);
	text-align: center;
	margin: 0 auto;
	text-decoration: underline;
}




/* 20230322 스마트 영수증 추가  */
#mypageReceipt main .searchArea .monthSearch {
	margin-bottom: 15px;
}

#mypageReceipt main .searchArea .monthSearch > strong {
	display: block;
	margin-bottom: 10px;
	color: var(--color-grey-02);
	line-height: var(--baseline-6x);
}

#mypageReceipt main .searchArea .monthSearch ul {
	display: flex;
	position: relative;
	z-index: 1;
}

#mypageReceipt main .searchArea .monthSearch ul li {
	position: relative;
	width: calc(100% - 1px);
	margin-left: -1px;
	z-index: 1;
}

#mypageReceipt main .searchArea .monthSearch ul li {
	display: block;
	height: 40px;
	line-height: var(--baseline-10x);
	border: var(--border-table-bottom);
	text-align: center;
	font-size: var(--fontsize-body-XS);
}

#mypageReceipt main .searchArea .monthSearch ul li:first-of-type {
	margin-left: 0;
}

#mypageReceipt main .searchArea .monthSearch ul li.on {
	z-index: 2;
}

#mypageReceipt main .searchArea .monthSearch ul li.on {
	border-color: var(--color-blue-01);
	font-weight: 700;
}

#mypageReceipt main .searchArea .dateSearch {
	margin-bottom: 32px;
}

#mypageReceipt main .searchArea .dateSearch > strong {
	display: block;
	margin-bottom: 10px;
	color: var(--color-grey-02);
	line-height: var(--baseline-6x);
}

#mypageReceipt main .searchArea .dateSearch .setCalendar {
	display: flex;
}

#mypageReceipt main .searchArea .dateSearch .setCalendar input {
	width: 100%;
	height: 44px;
	padding-right: 32px;
}

#mypageReceipt main .searchArea .dateSearch .setCalendar .dashed {
	display: block;
	flex: none;
	width: 13%;
	height: 44px;
}

#mypageReceipt main .searchArea .dateSearch .setCalendar .dashed {
	position: relative;
}

#mypageReceipt main .searchArea .dateSearch .setCalendar .dashed:after {
	content: "";
	position: absolute;
	left: 38%;
	right: 38%;
	height: 1px;
	top: 50%;
	background: var(--color-primary);
}

#mypageReceipt main .writeSelect {
	margin-top: 20px;
	height: 30px;
	width: 110px;
	font-size: var(--fontsize-description) /*13px*/;
	border-radius: 30px;
	line-height: initial;
}


/*cotent_n2 로 이동   ak arthall add by dw 2023.04.12*/


/* 명절선물 배송 조회 */
.holiday_shipping_wrap .shipping_info {
	background-color: var(--color-blue-01);
	color: var(--color-white);
	position: relative;
	padding: 20px 15px 23px 88px;
	letter-spacing: -0.05em;
}

.holiday_shipping_wrap .shipping_info:before {
	content: "";
	display: block;
	position: absolute;
	left: 15px;
	top: 50%;
	margin-top: -30px;
	width: 58px;
	height: 58px;
	background-position: -90px -118px
}

.holiday_shipping_wrap .shipping_info strong {
	display: block;
	font-size: var(--fontsize-body-XS);
	margin-bottom: 5px
}

.holiday_shipping_wrap .shipping_info span {
	color: #8e909c
}

.holiday_shipping_wrap .delivery_method {
	/* 
	padding: 20px 15px 10px;
	 */
}

.holiday_shipping_wrap .delivery_method h3 {
	font-size: var(--fontsize-body-XS) /*15px*/;
	color: var(--color-primary);
	margin-bottom: 10px;
}

.holiday_shipping_wrap .delivery_method ul {
	color: var(--color-grey-02);
	margin-bottom: 20px;
}

.holiday_shipping_wrap .delivery_method ul li {
	padding-left: 5px;
	position: relative;
}

.holiday_shipping_wrap .delivery_method ul li:before {
	content: "";
	display: inline-block;
	position: absolute;
	left: 0;
	top: 8px;
	width: 2px;
	height: 2px;
	background-color: var(--color-grey-02);
	margin-right: 5px;
}

.holiday_shipping_wrap .delivery_method span {
	display: block;
	font-size: var(--fontsize-description);
	color: var(--color-grey-02);
	border-bottom: var(--border-table-bottom);
	padding-bottom: 20px;
}

.holiday_shipping_wrap .delivery_method span a {
	float: right;
	display: block;
	margin-top: -5px;
	width: 27px;
	height: 27px;
	background-position: -84px -327px;
}

.holiday_shipping_wrap .delivery_method span:after {
	content: '';
	display: block;
	clear: both
}

.holiday_shipping_wrap .mem_input_wrap {
	padding: 10px 15px 10px;
}

.holiday_shipping_wrap .mem_input_wrap .delivery_number {
	padding-right: 95px;
	position: relative;
}

.holiday_shipping_wrap .mem_input_wrap .delivery_number button {
	border: 1px solid #333;
	font-size: var(--fontsize-description);
	color: #333;
	line-height: var(--baseline-8x);
	width: 90px;
	position: absolute;
	right: 0;
	top: 0;
}

.holiday_shipping_wrap .mem_input_wrap .arrive_number {
	padding-right: 95px;
	position: relative;
}

.holiday_shipping_wrap .mem_input_wrap .arrive_number span {
	color: #5965a6;
	position: absolute;
	right: 0;
	top: 9px;
	width: 90px;
}

.holiday_shipping_wrap .mem_input_wrap .mem_txt {
	margin-top: 10px;
}

.holiday_shipping_wrap .info_table_list {
	width: 100%
}

.holiday_shipping_wrap .info_table_list thead {
	background-color: var(--color-grey-06);
	color: var(--color-white);
}

.holiday_shipping_wrap .info_table_list thead th {
	color: var(--color-primary);
	font-weight: normal;
	line-height: var(--baseline-15x);
	font-size: var(--fontsize-body-XS);
	border: var(--border-table-bottom);
}

.holiday_shipping_wrap .info_table_list tbody th,
.holiday_shipping_wrap .info_table_list tbody td {
	padding: 8px 0;
	border-bottom: var(--border-table-bottom);
	border-right: var(--border-table-bottom)
}

.holiday_shipping_wrap .info_table_list tbody td:last-child {
	border-right: none;
}

.holiday_shipping_wrap .info_table_list tbody th {
	color: var(--color-grey-02);
	text-align: center;
	font-weight: normal;
}

.holiday_shipping_wrap .info_table_list tbody td {
	color: #333;
	text-align: center;
}

.holiday_shipping_wrap .info_table_list tbody td .td_box {
	position: relative;
	text-align: center;
}

.holiday_shipping_wrap .info_table_list tbody td .td_box:before {
	content: '|';
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -10px;
	color: var(--color-grey-04)
}

.holiday_shipping_wrap .info_table_list tbody td.tal {
	position: relative;
	line-height: 30px;
	padding-right: 10px;
}

.holiday_shipping_wrap .info_table_list tbody td.tal .td_box {
	text-align: left;
	padding-left: 15px;
}

.holiday_shipping_wrap .info_table_list tbody td.tal:after {
	content: "";
	display: block;
	width: 9px;
	height: 14px;
	position: absolute;
	right: 10px;
	top: 10px;
	background-position: -25px 0;
}

.holiday_shipping_wrap .info_table_list2 {
	width: 100%
}

.holiday_shipping_wrap .info_table_list2 tbody {
	border-top: 1px solid var(--color-primary)
}

.holiday_shipping_wrap .info_table_list2 tbody th,
.holiday_shipping_wrap .info_table_list2 tbody td {
	padding: 11px 0;
	border-bottom: var(--border-table-bottom)
}

.holiday_shipping_wrap .info_table_list2 tbody th {
	padding-left: 10px;
	color: var(--color-primary);
	text-align: left;
	font-weight: normal;
}

.holiday_shipping_wrap .info_table_list2 tbody td {
	color: #666
}

.holiday_shipping_wrap .info_table_list2 tbody td strong {
	color: var(--color-blue-01);
	font-size: var(--fontsize-description) /*13px*/;
	text-decoration: underline;
	padding-left: 10px;
}

.holiday_shipping_wrap .delivery_method .no_info {
	color: var(--color-grey-02);
	padding: 20px 0;
	text-align: center;
}

.holiday_shipping_wrap .delivery_method .no_info strong {
	display: block;
	color: #333;
	font-size: var(--fontsize-description) /*13px*/;
	margin-bottom: 5px;
}


.list_mini {
	margin-top: 30px;
}

.list_mini li .imgArea {
	position: relative;
	text-align: left;
	z-index: 1;
}

.list_mini li .imgArea img {
	width: 35%;
	border: 1px solid var(--color-grey-04);
	border-radius: 3px;
}

.list_mini li {
	margin-bottom: 30px;
}

.list_mini li .imgArea .center_ver {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-18%, -50%);
	width: 60%;
	font-weight: 500;
}

.list_mini li .imgArea .center_ver strong {
	font-weight: 500;
}

.list_mini li .imgArea .center_ver span {
	font-size: var(--fontsize-description);
	color: var(--color-grey-02);
	padding-top: 5px;
}


/* default 로 이동 #edm  */


/* 230906 유의사항 스타일 추가 */
#content div.notice {
	font-size: var(--fontsize-description);
	color: #333;
	line-height: var(--baseline-5x);
	background-color: var(--color-grey-05);
	padding: 30px;
	font-weight: 300;
	margin: 0;
}

#content div.notice b {
	font-size: var(--fontsize-body-XS);
}




/* 스마트 영수증 알림  */
#mypageReceipt .switchStyle {
	position: relative;
	width: 48px;
	height: 24px;
	overflow: hidden;
	border-radius: 24px;
}

#mypageReceipt .switchStyle input {
	position: absolute;
	width: 1px;
	height: 2px;
	left: -1px;
	top: -1px;
}

#mypageReceipt .switchStyle input:checked + label {
	background: var(--color-blue-01);
}

#mypageReceipt .switchStyle input:checked + label span.on {
	opacity: 1;
}

#mypageReceipt .switchStyle input:checked + label span.off {
	opacity: 0;
}

#mypageReceipt .switchStyle input:checked + label:after {
	left: 29px;
}

#mypageReceipt .switchStyle label {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	font-size: 10px;
	color: var(--color-white);
	background: var(--color-grey-04);
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

#mypageReceipt .switchStyle label span {
	position: absolute;
	left: 0;
	top: 2.5px;
	width: 100%;
	height: 100%;
	transition: 0.3s;
	padding-left: 8px;
}

#mypageReceipt .switchStyle label span.on {
	opacity: 0;
}

#mypageReceipt .switchStyle label span.off {
	padding-right: 8px;
	text-align: right;
	opacity: 1;
}

#mypageReceipt .switchStyle label:after {
	content: "";
	position: absolute;
	left: 5px;
	top: 5px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--color-white);
	transition: 0.3s;
}


#mypageReceipt main .noticeReceipt {
	padding: 0 0 35px;
	border-bottom: 7px solid var(--color-grey-06);
}

#mypageReceipt main .noticeReceipt ul li {
	display: flex;
	justify-content: space-between;
	padding: 0;
	border-bottom: 1px solid var(--color-grey-05);
}

#mypageReceipt main .noticeReceipt ul li strong em {
	display: block;
	margin-bottom: 5px;
	line-height: var(--baseline-6x);
	font-weight: 700;
	padding-left: 25px;
	background-size: 20px;
	background-repeat: no-repeat;
	background-position-y: 60%;
	background-image: url("/static/images/icon/receipt.svg");
}

#mypageReceipt main .noticeReceipt ul li strong i {
	display: block;
	font-size: var(--fontsize-description);
	color: var(--color-grey-02);
	position: absolute;
}

#mypageReceipt main .noticeReceipt ul li > div {
	flex: none;
	margin-left: 10px;
}

#mypageReceipt main .noticeReceipt ul li:last-child {
	border-bottom: 0;
}

#mypageReceipt main .noticeReceipt ul li > a {
	display: block;
	width: 100%;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6.061 10.707'%3E%3Cpath id='Icon_Arrow_Right_10' d='M5,10,0,5,5,0' transform='translate(5.354 10.354) rotate(180)' fill='none' stroke='%23aaa' stroke-width='1'/%3E%3C/svg%3E%0A") no-repeat 100% 50%/7px;
}

#mypageReceipt main .searchArea {
	margin-top: 20px;
}





/* 
#pop_deem {
	background-color: #0000005c;
	z-index: 999;
	position: absolute;
	top: 0;
	width: 100%;
	height: 100vh;
	max-width: 780px;

}
 */
.pop_notification {
	position: relative;
	width: 80%;
	max-width: 500px;
	margin: 0 auto;
	text-align: center;
	background-color: var(--color-white);
	/* 	top: 15%; */
	padding: 20px 20px 30px;

}

.pop_notification img {
	width: 70% !important;
	margin-top: 10px;
}

.pop_notification .tit {
	font-size: var(--fontsize-title-L);
	font-weight: 700;
	margin-bottom: 15px;
	margin-top: -35px;
	color: var(--color-primary);
}

.pop_notification .txt {
	font-size: var(--fontsize-description);
	color: var(--color-grey-02);
	line-height: 18px;
	margin-bottom: 30px;
	letter-spacing: -0.3px;
}

.pop_notification .btnList li {
	width: 95%;
	margin: 0 auto;
	padding: 10px;
	border: 1px solid var(--color-blue-01);
	font-size: var(--fontsize-body-R);
	margin-bottom: 10px;
	line-height: 30px;
}

.pop_notification .btnList .btnY {
	background-color: var(--color-blue-01);
	color: var(--color-white);
}

.pop_notification .btnList .btnY a {
	color: var(--color-white);
}

.pop_notification .btnList .btnN {
	color: var(--color-blue-01);
	font-size: var(--fontsize-body-XS);
}




/** 231020_메인 플로팅 메뉴 **/
/* 요소 별 정의 */
.floating-menu {
	width: 45px;
	height: 45px;
	border-radius: 50%;
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 2;
}

.floating-menu input {
	position: absolute;
	width: 45px;
	height: 45px;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.floating-menu > .plus-icon {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 45px;
	height: 45px;
	font-size: var(--fontsize-heading-M);
	line-height: 1;
	color: var(--color-white);
	background: var(--color-blue-01);
	background: linear-gradient(150deg, #014ed2, #002a5b, #d0dcf4);
	background-size: 300% 300%;
	animation: gradient 3s ease infinite;
	border-radius: 50%;
	transform: rotate(0);
	transition: all 0.5s ease;
	pointer-events: none;
	position: absolute;
	box-shadow: rgb(40 50 78 / 47%) 0px 2px 3px;
}


.floating-menu > .floating-nav {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
	margin: 0;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
}

.floating-menu > .floating-nav li {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	background: var(--color-blue-01);
	cursor: pointer;
	position: absolute;
	transition: all 0.3s ease;
	opacity: 0;
}

.floating-menu > .floating-nav li .ico-menu {
	bottom: 0;
	background: unset;
	border: 0;
	box-shadow: none;
	opacity: 1;
}

.floating-menu > .floating-nav li span {
	width: 45px;
	height: 45px;
	display: block;
}

.floating-menu > .floating-nav li span i {
	font-weight: 700;
	position: absolute;
	width: max-content;
	text-align: center;
	right: 45px;
	font-size: var(--fontsize-body-S);
	bottom: 7px;
	color: var(--color-white);
	font-style: normal;
	visibility: hidden;
	padding: 8px 15px;
	border-radius: 10px;
	display: flex;
}

.floating-menu input ~ .plus-icon {
	transform: rotate(0);

}

/* 눌렀을때 액션 */

.floating-menu input:checked ~ .plus-icon {
	transform: rotate(135deg);
	background: #0000;
	box-shadow: none;
}

.floating-menu input:checked ~ .floating-nav li {
	opacity: 1;
}

.floating-menu input:checked ~ .floating-nav li:nth-child(1) {
	transition: all 250ms cubic-bezier(0.04, 0.76, 0.67, 1.2);
	transform: translatey(-55px);
	background-color: #e10064;
	z-index: 4;
}

.floating-menu input:checked ~ .floating-nav li:nth-child(2) {
	transition: all 270ms cubic-bezier(0.04, 0.76, 0.67, 1.2);
	transform: translatey(-110px);
	background-color: var(--color-gold);
	z-index: 3;
}

.floating-menu input:checked ~ .floating-nav li:nth-child(3) {
	transition: all 300ms cubic-bezier(0.04, 0.76, 0.67, 1.2);
	transform: translatey(-165px);
	background-color: #f48c69;
	/*	 background-color: #555fc3; */
	z-index: 2;
}

.floating-menu input:checked ~ .floating-nav li:nth-child(4) {
	z-index: 1;
	transition: all 320ms cubic-bezier(0.04, 0.76, 0.67, 1.2);
	transform: translatey(-220px);
	background-color: #555fc3;
}

.floating-menu input:checked ~ .floating-nav li span i {
	visibility: visible;
}

.floating-menu input:checked ~ .menubg {
	pointer-events: auto;
	opacity: 1;
	transition: all 300ms ease-in-out;
}

.menubg {
	position: fixed;
	display: block;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-pack: center;
	justify-content: center;
	margin: 0 auto;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	overflow-x: hidden;
	background-color: rgba(31, 32, 41, .75);
	pointer-events: none;
	opacity: 0;
	transition: opacity 250ms ease;
}

/* 아이콘 */
.ico-plus {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' id='plus'%3E%3Cpath fill='%23FFFFFF' d='M19,11H13V5a1,1,0,0,0-2,0v6H5a1,1,0,0,0,0,2h6v6a1,1,0,0,0,2,0V13h6a1,1,0,0,0,0-2Z'%3E%3C/path%3E%3C/svg%3E");
	background-size: 60%;
	background-repeat: no-repeat;
	background-position: center;
	width: 45px;
	height: 45px;

}

.ico-plus2 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' id='plus'%3E%3Cpath fill='%23FFFFFF' d='M19,11H13V5a1,1,0,0,0-2,0v6H5a1,1,0,0,0,0,2h6v6a1,1,0,0,0,2,0V13h6a1,1,0,0,0,0-2Z'%3E%3C/path%3E%3C/svg%3E");
	background-size: 60%;
	background-repeat: no-repeat;
	background-position: center;
	width: 45px;
	height: 45px;
	display: none;

}


/*.ico-mall {
	background-image: url("/static/images/icon/mall_w.svg");
	background-size: 60%;
	background-repeat: no-repeat;
	background-position: center;
}
*/

.ico-academy {
	background-image: url("/static/images/icon/graduhat_w.svg");
	background-size: 60%;
	background-repeat: no-repeat;
	background-position: center;
}

.ico-parking {
	background-image: url("/static/images/icon/parking_w.svg");
	background-size: 60%;
	background-repeat: no-repeat;
	background-position: center;
}


/* 대기 모션 */
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}


/* 231020 앱에서는 푸터아래 가려져 추가 */
#appFooter .btnFloating a {
	bottom: 106px;
}

#appFooter .floating-menu {
	bottom: 106px;
}

#appFooter .floating-menu > .floating-nav li {
	width: 45px;
}

#appFooter .btnFloating a.btnPageTop {
	bottom: 162px;
}

div:has(.fixedBtnBox) {

	#appFooter .btnFloating a,
	#appFooter .floating-menu {
		bottom: 180px;
	}

	#appFooter .btnFloating a.btnPageTop {
		bottom: 230px;
	}

	Footer .btnFloating a,
	Footer .floating-menu {
		bottom: 130px;
	}

	Footer .btnFloating a.btnPageTop {
		bottom: 180px;
	}
}


/* default 로 이동 div:has(.edm.comp-a, .comp-c) */


/* content_n3 로 이동 */


/* 231108_설정 UI면경 및 스마트영수증 추가 */
#wrapper.setting {
	padding-top: 0;
}

#wrapper.setting #content {
	padding-bottom: 0;
}

#wrapper.setting .switchStyle {
	position: relative;
	width: 48px;
	height: 24px;
	overflow: hidden;
	border-radius: 24px;
}

#wrapper.setting .switchStyle input {
	position: absolute;
	width: 1px;
	height: 2px;
	left: -1px;
	top: -1px;
}

#wrapper.setting .switchStyle input:checked + label {
	background: var(--color-blue-01);
}

#wrapper.setting .switchStyle input:checked + label span.on {
	opacity: 1;
}

#wrapper.setting .switchStyle input:checked + label span.off {
	opacity: 0;
}

#wrapper.setting .switchStyle input:checked + label:after {
	left: 29px;
}

#wrapper.setting .switchStyle label {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	font-size: 10px;
	color: var(--color-white);
	background: var(--color-grey-04);
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


#wrapper.setting .switchStyle label span {
	position: absolute;
	left: 0;
	top: 3px;
	width: 100%;
	height: 100%;
	transition: 0.3s;
	padding-left: 8px;
}

#wrapper.setting .switchStyle label span.on {
	opacity: 0;
}

#wrapper.setting .switchStyle label span.off {
	padding-right: 8px;
	text-align: right;
	opacity: 1;
}

#wrapper.setting .switchStyle label:after {
	content: "";
	position: absolute;
	left: 5px;
	top: 5px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--color-white);
	transition: 0.3s;
}

#wrapper.setting .titleArea {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	height: 60px;
}

#wrapper.setting .titleArea h1 {
	font-weight: 700;
	line-height: var(--baseline-6x);
}

#wrapper.setting .titleArea a {
	position: absolute;
	left: 0;
	top: 0;
	width: 55px;
	height: 100%;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7.273 12.849'%3E%3Cpath id='path_33913' data-name='path 33913' d='M6,0,0,6l6,6' transform='translate(0.849 0.424)' fill='none' stroke='%231A1818' stroke-width='1.2'/%3E%3C/svg%3E%0A") no-repeat 50%/8px auto;
}

#wrapper.setting main {
	padding: 0;
}

#wrapper.setting main article {
	padding: 24px 24px 14px;
	border-bottom: var(--border-section);
}

#wrapper.setting main article.autoLogin {
	padding: 24px;
}

#wrapper.setting main article h2 {
	padding-left: 25px;
	font-weight: 700;
	line-height: var(--baseline-6x);
}

#wrapper.setting main article h2 + ul,
#wrapper.setting main article h2 + div {
	margin-top: 6px;
}

#wrapper.setting main article ul {
	padding-left: 0;
	display: contents;
}


#wrapper.setting main article ul li strong em {
	display: block;
	margin-bottom: 2px;
	line-height: var(--baseline-6x);
}

#wrapper.setting main article em.impo {
	font-size: var(--fontsize-body-S);
	font-weight: 400;
	padding-left: 15px;
}

#wrapper.setting main article ul li strong i {
	display: block;
	font-size: var(--fontsize-description);
	color: var(--color-grey-02);
}

#wrapper.setting main article ul li > div {
	flex: none;
	margin-left: 10px;
}

#wrapper.setting main article ul li:last-child {
	border-bottom: 0;
}

#wrapper.setting main article ul li > a {
	display: block;
	width: 100%;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6.061 10.707'%3E%3Cpath id='Icon_Arrow_Right_10' d='M5,10,0,5,5,0' transform='translate(5.354 10.354) rotate(180)' fill='none' stroke='%23aaa' stroke-width='1'/%3E%3C/svg%3E%0A") no-repeat 100% 50%/7px;
}

#wrapper.setting main article .titnbtn {
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin: 0;
}

#wrapper.setting main article.noticeReception .titnbtn {
	padding-bottom: 10px;
}

#wrapper.setting main article.userInfo {
	padding-top: 16px;
	padding-bottom: 24px;
}


#wrapper.setting main article.userInfo .logoutBox a {
	display: inline-block;
	padding-right: 15px;
	font-size: var(--fontsize-title-M);
	font-weight: 700;
	line-height: 26px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6.061 10.707'%3E%3Cpath id='Icon_Arrow_Right_10' d='M5,10,0,5,5,0' transform='translate(5.354 10.354) rotate(180)' fill='none' stroke='%23aaa' stroke-width='1'/%3E%3C/svg%3E%0A") no-repeat 100% 50%/7px;
}

#wrapper.setting main article.userInfo .loginBox {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

#wrapper.setting main article.userInfo .loginBox .userBox {
	line-height: 26px;
	font-size: var(--fontsize-title-S);
}

#wrapper.setting main article.userInfo .loginBox .userBox strong {
	display: inline-block;
	font-size: var(--fontsize-title-M);
	font-weight: 700;
	color: var(--color-blue-01);
}

#wrapper.setting main article.userInfo .loginBox a {
	position: relative;
	display: inline-block;
	flex: none;
	margin-left: 10px;
	margin-top: 6px;
	font-size: var(--fontsize-body-XS);
	line-height: var(--baseline-5x);
}


#wrapper.setting main article.userInfo .loginBox a:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--color-primary);
}


#wrapper.setting main article.noticeReception h2 {
	background-size: 18px;
	background-repeat: no-repeat;
	background-position-y: 75%;
	background-image: url("/static/images/icon/app/bell.svg");
}

#wrapper.setting main article.autoLogin h2 {
	background-size: 18px;
	background-repeat: no-repeat;
	background-position-y: 60%;
	background-image: url("/static/images/icon/app/autologin.svg");
}

#wrapper.setting main article.smartReceipt h2 {
	background-size: 18px;
	background-repeat: no-repeat;
	background-position-y: 60%;
	background-image: url("/static/images/icon/app/receipt.svg");
}

#wrapper.setting main article.easyArea h2 {
	background-size: 18px;
	background-repeat: no-repeat;
	background-position-y: 70%;
	background-image: url("/static/images/icon/app/easyarea.svg");
}

#wrapper.setting main article.termsArea h2 {
	background-size: 18px;
	background-repeat: no-repeat;
	background-position-y: 70%;
	background-image: url("/static/images/icon/app/term.svg");
}

#wrapper.setting main article.versionArea {
	padding-bottom: 32px;
}

#wrapper.setting main article.versionArea h2 {
	background-size: 18px;
	background-repeat: no-repeat;
	background-position-y: 62%;
	background-image: url("/static/images/icon/app/update.svg");
}

#wrapper.setting main article.versionArea h2 {
	position: relative;
}

#wrapper.setting main article.versionArea h2:after {
	content: "";
	position: absolute;
	left: 11px;
	top: 3px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	border: 2px solid var(--color-white);
	background: var(--color-blue-06);
	z-index: 1;
}

#wrapper.setting main article.versionArea .versionBox {
	display: flex;
	justify-content: space-between;
}

#wrapper.setting main article.versionArea .versionBox > div p {
	line-height: var(--baseline-6x);
	margin-bottom: 3px;
}

#wrapper.setting main article.versionArea .versionBox > div span {
	display: flex;
	line-height: var(--baseline-4x);
	font-size: var(--fontsize-description);
	color: var(--color-grey-02);
}

#wrapper.setting main article.versionArea .versionBox > div span i {
	display: block;
	margin-right: 3px;
}

#wrapper.setting main article.versionArea .versionBox > div span em {
	color: var(--color-primary);
	margin-left: 3px;
}

#wrapper.setting main article.versionArea .versionBox > a {
	display: block;
	flex: none;
	padding: 0 12px;
	margin-left: 10px;
	height: 30px;
	line-height: 30px;
	font-size: var(--fontsize-body-XS);
	color: var(--color-grey-01);
	border-radius: 15px;
	background: var(--color-grey-06);
}

#wrapper.setting main article.logoutArea {
	padding-bottom: 24px;
}

#wrapper.setting main article.logoutArea h2 {
	background-size: 18px;
	background-repeat: no-repeat;
	background-position-y: 60%;
	background-image: url("/static/images/icon/logout.svg");
}

#wrapper.setting main article.secessionArea {
	display: flex;
	border-bottom: 0;
	height: 114px;
	justify-content: center;
	align-items: center;
	padding: 0;
}

#wrapper.setting main article.secessionArea a {
	display: inline-block;
	line-height: var(--baseline-6x);
	color: var(--color-grey-02);
}

#wrapper.setting main article.secessionArea a {
	position: relative;
}

#wrapper.setting main article.secessionArea a:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 2px;
	width: 100%;
	height: 1px;
	background: var(--color-grey-02);
}


#mainStoreArea .motion strong {
	text-shadow: 1px 1px 1px var(--color-white);
}

/* 241023 매장 만족도 평가 START */
#brandSEList main {
	padding-top: 40px;
}

#brandSEList main h3 {
	padding: 0 0 20px;
	border-bottom: 7px solid var(--color-grey-06);
	font-weight: 700;
}

#brandSEList main .searchArea .monthSearch {
	margin: 20px 0;
}

#brandSEList main .searchArea .monthSearch ul {
	display: flex;
	position: relative;
	z-index: 1;
}

#brandSEList main .searchArea .monthSearch ul li {
	position: relative;
	width: calc(100% - 1px);
	margin-left: -1px;
	z-index: 1;
}

#brandSEList main .searchArea .monthSearch ul li {
	display: block;
	height: 40px;
	line-height: var(--baseline-10x);
	border: var(--border-table-bottom);
	text-align: center;
	font-size: var(--fontsize-body-XS);
}

#brandSEList main .searchArea .monthSearch ul li:first-of-type {
	margin-left: 0;
}

#brandSEList main .searchArea .monthSearch ul li.on {
	z-index: 2;
}

#brandSEList main .searchArea .monthSearch ul li.on {
	border-color: var(--color-blue-01);
	font-weight: 700;
}

#brandSEList main .searchArea .dateSearch {
	margin-bottom: 32px;
}

#brandSEList main .searchArea .dateSearch > strong {
	display: block;
	margin-bottom: 10px;
	color: var(--color-grey-02);
	line-height: var(--baseline-6x);
}

#brandSEList main .searchArea .dateSearch .setCalendar {
	display: flex;
}

#brandSEList main .searchArea .dateSearch .setCalendar input {
	width: 100%;
	height: 44px;
	padding-right: 32px;
}

#brandSEList main .searchArea .dateSearch .setCalendar .dashed {
	display: block;
	flex: none;
	width: 13%;
	height: 44px;
}

#brandSEList main .searchArea .dateSearch .setCalendar .dashed {
	position: relative;
}

#brandSEList main .searchArea .dateSearch .setCalendar .dashed:after {
	content: "";
	position: absolute;
	left: 38%;
	right: 38%;
	height: 1px;
	top: 50%;
	background: var(--color-primary);
}

#brandSEList main .writeSelect {
	margin-top: 20px;
	height: 30px;
	width: 110px;
	font-size: var(--fontsize-description) /*13px*/;
	border-radius: 30px;
	line-height: initial;
}


#brandSEList main .caution {
	font-size: var(--fontsize-description);
	color: var(--color-grey-02);
	line-height: 1.5;
}


#brandSEList .SEList {
	display: flex;
	flex-direction: column;
	margin-top: 20px;
}

#brandSEList .SEList li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	border-bottom: var(--border-primary);
}

#brandSEList .SEList .list_txt {
	display: flex;
	flex-direction: column;
	row-gap: 2px;
}

#brandSEList .SEList .list_txt .lt_tit {
	font-weight: 600;
}

#brandSEList .SEList .list_txt .lt_price {
	font-weight: 600;
}

#brandSEList .SEList .list_txt .lt_bnd {
	font-size: var(--fontsize-description);
	color: var(--color-grey-02);
	padding-top: 4px;
}


#brandSEList .SEList .list_btn {
	background-color: var(--color-blue-01);
	padding: 4px 0;
	border-radius: 24px;
	width: 70px;
	text-align: center;
}

#brandSEList .SEList .list_btn a {
	color: var(--color-white);
	font-size: var(--fontsize-description);
	display: block;
}

#brandSEList .SEList .list_btn.fin,
#brandSEList .SEList .list_btn.exp {
	background-color: var(--color-grey-04);
}

#brandSEList .goinquiry {
	margin-top: 40px;
}

#brandSEList .goinquiry p {
	font-size: var(--fontsize-body-XS);
	margin-bottom: 16px;
}

#brandSE .SEshop {
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: 700;
	font-size: var(--fontsize-heading-M);
	width: 100%;
	padding: 40px 0 24px;
	border-bottom: 1px solid var(--color-blue-01);
	column-gap: 8px;
}

#brandSE .SEshop .label {
	background-color: var(--color-blue-01);
	color: var(--color-white);
	font-size: calc(var(--baseline-4x) / 1.333);
	font-weight: 600;
	padding: 0px 6px;
	border-radius: var(--radius-s);
	height: 24px;
	line-height: var(--baseline-6x);
}

#brandSE .SElist {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: var(--color-grey-07);
	padding: 32px 24px;
}

/* 별점 */

#brandSE .SElist .rating {
	margin: 0 0 32px;
}

#brandSE .SElist .rating p {
	text-align: center;
	padding-bottom: 16px;
	color: var(--color-primary);
	font-size: var(--fontsize-body-RB);
	font-weight: 700;
}

#brandSE .SElist .rating:not(:checked) > input {
	position: absolute;
	appearance: none;
}

#brandSE .SElist .rating:not(:checked) > label {
	float: right;
	cursor: pointer;
	font-size: 30px;
	fill: var(--color-grey-04);
	margin: 0 3px;
}

#brandSE .SElist .rating:not(:checked) > label > svg {
	fill: var(--color-grey-04);
	transition: fill 0.3s ease;
}

#brandSE .SElist .rating > input:checked + label:hover,
#brandSE .SElist .rating > input:checked + label:hover ~ label,
#brandSE .SElist .rating > input:checked ~ label:hover,
#brandSE .SElist .rating > input:checked ~ label:hover ~ label,
#brandSE .SElist .rating > label:hover ~ input:checked ~ label {
	fill: #e58e09;
}

#brandSE .SElist .rating:not(:checked) > label:hover,
#brandSE .SElist .rating:not(:checked) > label:hover ~ label {
	fill: #ff9e0b;
}

#brandSE .SElist .rating > input:checked ~ label > svg {
	fill: var(--color-blue-06);
}

/* 엄지 평가 */

#brandSE .SElist .GnB {
	width: 100%;
}

#brandSE .SElist .GnB ul {
	display: flex;
	flex-direction: column;
}

#brandSE .SElist .GnB ul li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 0;
	border-top: 1px dashed var(--color-grey-04);
}

#brandSE .SElist .GnB ul li:first-child {
	border-top: 0;
}

#brandSE .SElist .GnB ul li div {
	display: flex;
}

#brandSE .SElist .GnB ul li p {
	font-weight: 600;
	font-size: var(--fontsize-body-XS);
	color: #666;
}


#brandSE .SElist .GnB .radio_group {
	width: 18px;
	height: 18px;
	margin: 0 0 0 16px;
	position: relative;
}

#brandSE .SElist .GnB .radio_group input[type="radio"] {
	opacity: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0px;
	top: 0px;
	margin: 0;
	padding: 0;
	z-index: 1;
	cursor: pointer;
}

#brandSE .SElist .GnB .radio_group input[type="radio"] + label {
	color: #95a5a6;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background-image: url("/static/images/icon/thumb_off.svg");
	transition: fill 0.3s ease;
}

#brandSE .SElist .GnB .radio_group input[type="radio"]:checked + label {
	color: #3498db;
	background-image: url("/static/images/icon/thumb_on.svg");
	transition: fill 0.3s ease;
}

#brandSE .SElist .GnB .radio_group input[type="radio"] + label.dislike {
	rotate: 180deg;
}

#brandSE .btnArea {
	margin-top: 40px;
	display: flex;
	width: 100%;
}

/* 241023 매장 만족도 평가 END */