@charset "utf-8";

section.section-main {
	padding: 8rem 0;
}
section.section-sub {
	margin: 10rem 0;
}
.container {
	width: 140rem;
	max-width: 92%;
	margin: 0 auto;
}
.logo img {
	display: block;
	max-width: unset;
}

.align-c { text-align: center !important; }
.align-l { text-align: left !important; }
.align-r { text-align: right !important; }

.fs-mini { font-size: var(--fs-mini) !important; }
.fs-xsmall { font-size: var(--fs-xsmall) !important; }
.fs-small { font-size: var(--fs-small) !important; }
.fs-normal { font-size: var(--fs-normal) !important; }
.fs-regular { font-size: var(--fs-regular) !important; }
.fs-medium { font-size: var(--fs-medium) !important; }
.fs-large { font-size: var(--fs-large) !important; }
.fs-xlarge { font-size: var(--fs-xlarge) !important; }
.fs-title { font-size: var(--fs-title) !important; }
.fs-big-title { font-size: var(--fs-big-title) !important; }

.back-clr-p4 { background: var(--clr-primary400) !important; color: #fff !important; }
.back-clr-p5 { background: var(--clr-primary500) !important; color: #fff !important; }

h2[class*="title"] {
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.02em;
	margin: 0 0 5rem;
}
h2.big-title {
	font-size: var(--fs-big-title);
}
h2.title {
	font-size: var(--fs-title);
	margin: 0 0 5rem;
}
h3.sub-title {
	font-size: var(--fs-subtitle);
	margin: 0 0 4rem;
}
.page-title {
	font-size: var(--fs-big-title);
	font-weight: 500;
	color: #fff;
}
.caption {
	color: var(--clr-gray400);
	font-size: var(--fs-small);
	margin: 0.5rem 0;
}
.caption .mark-asterisk::after {
	color: inherit;
}

.point-white { color: #fff !important; }
.point-red, .point-red .xeicon { color: var(--clr-red) !important }
.point-primary, .point-primary .xeicon { color: var(--clr-primary400) !important; }
.point-primary-deep { color: var(--clr-primary500) !important; }
.point-black, .point-black .xeicon { color: var(--clr-black) !important; }

.point-m { font-weight: 500 !important; }
.point-b { font-weight: 600  !important; }
.point-h { font-weight: 700 !important; }

.text-over {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.text-over-2,
.text-over-3,
.text-over-4,
.text-over-5 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	word-wrap: break-word;
}
.text-over-3 { -webkit-line-clamp: 3; }
.text-over-4 { -webkit-line-clamp: 4; }
.text-over-5 { -webkit-line-clamp: 5; }

.mark-asterisk {
	margin: 0 0.5rem;
}
.mark-asterisk::after {
	content: '*';
	color: var(--clr-red);
	font-weight: 500;
}

.p0 { padding: 0 !important; }
.m0 { margin: 0 !important; }
.m1 { margin: 1rem; }
.m-tb1 { margin: 1rem 0; }
.m-lr1 { margin: 0 1rem; }
.m2 { margin: 2rem; }
.m-tb2 { margin: 2rem 0; }
.m-lr2 { margin: 0 2rem; }
.m4 { margin: 4rem; }
.m-tb4 { margin: 4rem 0; }
.m-lr4 { margin: 0 4rem; }
.m-6 { margin: 6rem; }
.m-tb6 { margin: 6rem 0; }
.m-lr6 { margin: 0 6rem; }

progress {
	appearance: none;
	vertical-align: baseline;
	width: 100%;
	height: 0.8rem;
}
progress::-webkit-progress-bar {
	background: var(--clr-gray100);
	border-radius: 10rem;
	overflow: hidden;
}
progress::-webkit-progress-value {
	background: linear-gradient(160deg, var(--clr-primary400), var(--clr-turkey));
}

.post-new {
	display: inline-block;
	font-size: 10px;
	font-weight: 400;
	color: #fff;
	margin-left: 10px;
	margin-bottom: 4px;
	letter-spacing: 0;
	line-height: 0;
	vertical-align: middle;
	position: relative;
	z-index: 0;
}
.post-new::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--clr-navy);
	animation: postColor 2s ease-in-out infinite alternate;
	z-index: -1;
}


/* ******************** button ******************** */
.btn {
	display: inline-block;
	font-size: var(--fs-normal);
	font-weight: 600;
	color: var(--clr-black);
	text-align: center;
	padding: 0.9em 1.8em;
	border: 1px solid transparent;
	background: #fff;
	box-sizing: border-box;
	border-radius: 8px;
	cursor: pointer;
}
.b-line { border: 1px solid var(--clr-gray200); }
.b-line-w { border: 1px solid #fff; }
.b-line-m { border: 1px solid var(--clr-gray400); }
.b-size-m { padding: 0.9em 10rem; }
.btn-text {
	font-size: var(--fs-normal);
	font-weight: 600;
	color: var(--clr-gray400);
	transition: color 0.2s;
}

.btn-small {
	font-size: var(--fs-xsmall);
	font-weight: 600;
	line-height: 1;
	padding: 0.65em 1.2em;
	border-radius: 6px;
}

.btn-line-primary {
	color: var(--clr-primary500) !important;
	border: 1px solid var(--clr-primary400);
}
.btn-fill-primary {
	background: var(--clr-primary400);
	border: 1px solid var(--clr-primary400);
	color: #fff !important;
}
.btn-fill-primary:hover {
	background: var(--clr-primary500) !important;
	border: 1px solid var(--clr-primary500) !important;
}
.btn-fill-primary-deep {
	background: var(--clr-primary500);
	border: 1px solid var(--clr-primary500);
	color: #fff !important;
}
.btn-fill-primary-deep:hover {
	background: var(--clr-primary600) !important;
	border: 1px solid var(--clr-primary600) !important;
}
.btn-fill-navy {
	background: var(--clr-navy-light);
	border: none !important;
	color: #fff !important;
}
.btn-fill-navy:hover { background: var(--clr-navy); }
.btn-fill-gray {
	background: var(--clr-gray100);
	border: none !important;
	color: var(--clr-gray500) !important;
}
/* ���� ���� CTA. -blue �� ���� ������� �迭�� �ȿ��� �߰� �� ���� ������ �帥��.
   ���� �հ� �� ������ ���� ����������ũ�ʹ� ����д� */
.btn-fill-linear {
	background: linear-gradient(135deg, var(--clr-primary400), var(--clr-primary600));
	border: none;
	color: #fff !important;
	position: relative;
	z-index: 0;
}
.btn-fill-linear-blue {
	background: linear-gradient(135deg, var(--clr-cfblue-deep), var(--clr-secondary400));
	border: none;
	color: #fff !important;
	position: relative;
	z-index: 0;
}
.btn-cancel {
	background: var(--clr-gray500);
	color: var(--clr-gray100) !important;
	border: 1px solid var(--clr-gray500);
}
.btn-disabled {
	opacity: 0.65;
	filter: grayscale(1);
	cursor: default;
	pointer-events: none;
}
.btn-fill-linear:hover,
.btn-fill-linear-blue:hover {
	border: none !important;
	color: #fff !important;
}
.btn-circle {
	display: inline-block;
	background: var(--clr-black);
	padding: 1.2rem;
	border-radius: 100%;
	margin-right: 1.2rem;
	position: relative;
	overflow: hidden;
	transition: 0.5s;
}
.btn-circle:hover {
	margin-right: 0;
}
.btn-close {
	display: inline-block;
	min-width: 3rem;
	min-height: 3rem;
	text-align: center;
	background: var(--clr-gray50);
	font-size: var(--fs-normal);
	color: var(--clr-gray500);
	border-radius: 100%;
	position: relative;
}
.btn-close::before {
	content: '\eb99';
	color: inherit;
	position:absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.btn-down::before {
	content: '\ec5a';
	margin-right: 0.5rem;
	vertical-align: middle;
}
.btn-photo::before {
	content: '\eb31';		/* ri-camera-line */
	vertical-align: middle;
	font-size: var(--fs-regular);
	font-weight: 400;
}
.btn-grp {
	display: flex;
	align-items: stretch;
	gap: 1rem;
	margin: 0 auto;
}
.btn-grp > .btn {
	padding: 1rem 0;
	width: 100%;
}
.btn-grp > .btn.btn-m {
	padding: 1.3rem 0;
}
.btn-grp > .btn.btn-big {
	padding: 1.5rem 0;
}

.sort {
	display: inline-block;
	border: 1px solid var(--clr-gray300);
	background: #fff;
	border-radius: 0.2rem;
	font-size: var(--fs-mini);
	line-height: 1;
	padding: 0.6rem 1rem;
	min-width: 6rem;
	box-sizing: border-box;
	text-align: center;
	vertical-align: middle;
	text-wrap: nowrap;
}
.sort-must {
	background: var(--clr-primary400);
	font-weight: 500;
	color: #fff;
	border: none;
}
.sort-good {
	background: linear-gradient(90deg, var(--clr-primary400), var(--clr-turkey));
	font-weight: 500;
	color: #fff;
	border: none;
}
.sort-answer {
	background: var(--clr-gray100);
	border: none;
}
.sort-answer.sa-ok {
	color: var(--clr-gray500);
}
.sort-answer.sa-no {
	color: var(--clr-red);
	font-weight: 500;
}

.sort-issue,
.issue-type-btns input:checked + label {
	background: linear-gradient(135deg, var(--clr-cfblue-deep), var(--clr-turkey));
	font-weight: 500;
	color: #fff;
	border: none;
}

i {
	display: inline-block;
	vertical-align: baseline;
}
.xeicon,
.xeicon::before,
.xeicon::after {
	color: inherit;
}
.area {
	background: #fff;
	border-radius: var(--edge);
	overflow: hidden;
	box-sizing: border-box;
	box-shadow: var(--shadow);
	padding: 2rem 2.4rem;
}
.area-tit-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 3rem;
}
.area-tit {
	font-size: var(--fs-xlarge);
	font-weight: 700;
}
.area-tit + .btn {
	margin: 0;
}
.congrp {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 2rem;
}
.flex-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.flex-flow {
	flex-grow: 1;
}

.card {
	background: var(--clr-gray200);
	border-radius: var(--edge);
	overflow: hidden;
	box-sizing: border-box;
	flex-grow: 1;
}
.card-tit {
	font-size: var(--fs-medium);
	font-weight: 600;
	line-height: 1.4;
	margin-top: 1.5rem;
	word-break: auto-phrase;
}
.card-tit + p {
	margin-top: 1rem;
	word-break: break-all;
	line-height: 1.4;
	color: var(--clr-gray400);
}
/* �̹��� ���� : ����� �ڸ��� ���������� ǥ���Ѵ� (����)
   �̹����� �� �����̳� �ȿ� <span class="img-none"></span> �ϳ��� ������ �ȴ�.
   �������� �ٲٷ��� ::before �� content �� ��ü (\ee4b = ri-image-line) */
.img-none {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: var(--clr-gray50);
	color: var(--clr-gray300);
	font-size: 4rem;
	line-height: 1;
}
.img-none::before {
	content: '\ee4b';
}

.thumb {
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
	width: 100%;
}
.thumb>img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: 0.5s;
	object-fit: cover;
}
.lec-thumb {
	height: 0;
	padding-top: calc(100% + 1.5rem);
	transition: 0.5s;
	cursor: pointer;
}
.blog-thumb {
	background: var(--clr-gray200);
	width: 23rem;
	height: 15rem;
	box-sizing: border-box;
	border-radius: 0.2rem;
}
.blog-thumb-info {
	width: calc(100% - 23rem);
	flex-grow: 1;
	padding: 2rem 2.4rem;
	box-sizing: border-box;
	overflow: hidden;
}
.list-lec-item:hover .lec-thumb > img,
.lec-thumb:hover > img {
	transform: scale(1.1);
}
.w-full {
	width: 100%;
}
.w-half {
	width: 50%;
}
.w-third {
	width: 33%;
}
.w-type2 {
	width: 59rem;
	max-width: 50%;
}
.w-type3 {
	width: 38.6rem;
	max-width: 33%;
}
.w-type4 {
	width: 28.5rem;
	max-width: 25%;
}
.w-type5 {
	width: 22.4rem;
	max-width: 20%;
}
.w-type6 {
	width: 18.3rem;
}
.empty {
	font-size: var(--fs-medium);
	color: var(--clr-gray300);
	text-align: center;
	width: 100%;
	padding: 4rem;
	box-sizing: border-box;
}

/* ******************** animation ******************** */
@keyframes postColor {
	0% { background-color: var(--clr-red); }
	100% { background-color: var(--clr-primary300); }
}

/* ******************** ��� �� ��� ******************** */
/* ���(#header) ���� ������ ���� ��. ����� sticky �̹Ƿ� ��ũ���ϸ� �� ��� �ڿ��� ���� �з����� */
.top-banner {
	background: linear-gradient(90deg, var(--clr-navy), var(--clr-secondary500) 55%, var(--clr-primary600));
}
.top-banner .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	height: 4rem;
}
.top-banner .tb-msg {
	font-size: var(--fs-mini);
	font-weight: 400;
	color: rgba(255, 255, 255, 0.88);
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	letter-spacing: 0;
}
.top-banner .tb-msg > span {
	color: rgba(255, 255, 255, 0.4);
	margin: 0 0.4rem;
}
.top-banner .tb-util {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	gap: 1.6rem;
}
.top-banner .tb-tel,
.top-banner .tb-mail {
	font-size: var(--fs-xsmall);
	font-weight: 600;
	color: #fff;
	line-height: 1;
	text-wrap: nowrap;
	transition: 0.2s;
}
.top-banner .tb-mail {
	font-weight: 400;
	color: rgba(255, 255, 255, 0.75);
}
/* ��ȣ�� ���� ���� ������. ������ ��� �� �ϳ��θ� ���´�.
   base.css �� �ǻ��� �⺻ �۲��� remixicon ���� �����Ƿ� ���⼭ ���� �۲÷� �ǵ����� */
.top-banner .tb-mail::before {
	content: '\00B7';
	font-family: inherit;
	color: rgba(255, 255, 255, 0.4);
	margin-right: 1.6rem;
}
.top-banner .tb-tel:hover,
.top-banner .tb-mail:hover {
	color: var(--clr-primary200);
}
/* SNS : ���簢 ������(��Ʃ�ꡤ�ν�Ÿ��������)�� ������ ���帶ũ(���̹� Ŭ�������α�)�� ���� �־�
   ���� ĭ�� �������� �ʰ� ���̸� ���� �����Ѵ�. ���� �� �ΰ� ������� �帥�� */
/* ����ó�� �پ� ������ �ʵ��� ���� ������ ���´� */
.top-banner .tb-sns {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1.4rem;
	margin-left: 0.4rem;
	padding-left: 2.4rem;
}
.top-banner .tb-sns::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 1.6rem;
	background: rgba(255, 255, 255, 0.25);
}
.top-banner .tb-sns a {
	display: flex;
	align-items: center;
	font-size: 0;
	transition: 0.2s;
}
.top-banner .tb-sns a:hover {
	opacity: 1;
}
/* �ΰ� ���� ���� ������(Ŭ�� ����, ���α� ����)�̶� �� �ܻ����� �����Ѵ�.
   Ǫ�� �ΰ�(#footer .logo img)�� ���� �Ͱ� ���� ��� */
.top-banner .tb-sns img {
	width: auto;
	height: 1.6rem;
	filter: brightness(0) invert(1);
}

/* ******************** header ******************** */
#header {
	position: sticky;
	top: 0;
	left: 0;
	background: #fff;
	width: 100%;
	z-index: 501;
	transition: box-shadow 0.25s;
}
/* ��ũ���� ���۵Ǹ�(=����� ���������) top.asp �� .scrolled �� ���δ� */
#header.scrolled {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
#header .container {
	height: inherit;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4rem;
}
#header .util-m { display: none; }
#header .searchbar input {
	border: none;
	width: 100%;
	font-size: var(--fs-small);
}
#header .searchbar input:focus {
	background: transparent !important;
	box-shadow: none;
}
#header .util .log {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--fs-xsmall);
	font-weight: 500;
	margin-right: 1rem;
	color: var(--clr-gray500);
}
#header .log > span::before {
	content: '\f264';
	margin-right: 0.2em;
	font-weight: 400;
}
#gnb {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.h-menu-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 1rem;
}
#header .h-menu-all {
	position: absolute;
	width: 100%;
	background: #fff;
	border-top: var(--line-base);
	box-shadow: 0 24px 40px rgba(0,0,0,0.1);
	display: none;
}
#header .h-menu-all .container { display: block; padding: 4rem 0; }
#header .menu-all-inner {
	display: grid;
	grid-template-columns: 24rem 1fr;
	gap: 5rem;
}
#header .menu-all-label {
	font-size: var(--fs-mini);
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--clr-primary400);
}
#header .menu-all-tit {
	font-size: var(--fs-title);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0.8rem 0 0;
}
#header .menu-all-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 3.5rem 2rem;
}
/* �������� �ڽ��� ���� �е��� ���ۼ��� ���߱� ���� ���� �÷��� ���� ������ �鿩�� */
#header .menu-all-list > li {
	padding: 0 2.4rem;
	box-sizing: border-box;
}
#header .menu-all-list a {
	display: block;
	padding: 0.6rem 0;
	transition: 0.2s;
}
#header .menu-all-list > li ul {
	width: 100%;
	display: flex;
	flex-direction: column;
}
#header .menu-all-list > li ul li {
	width: inherit;
	box-sizing: border-box;
	color: var(--clr-gray500);
	font-size: var(--fs-small);
}
#header .menu-all-list > li ul li:hover a {
	color: var(--clr-primary500);
	font-weight: 600;
}
#header .menu-all-list > li strong {
	display: block;
	font-size: var(--fs-medium);
	font-weight: 600;
	color: var(--clr-black);
	padding-bottom: 1.2rem;
	margin-bottom: 1.2rem;
	border-bottom: 1px solid var(--clr-gray400);
}
#header .menu-all-list > li:has(.menu-lec) {
	grid-column: 1 / -1;
	background: var(--clr-gray50);
	border-radius: var(--edge);
	padding: 2rem 2.4rem;
}
#header .menu-all-list .menu-lec {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.8rem;
}
#header .menu-all-list .menu-lec > li { width: auto; }
#header .menu-all-list .menu-lec a {
	background: #fff;
	border: var(--line-base);
	border-radius: 100px;
	padding: 0.9rem 1.8rem;
	color: var(--clr-gray600);
}
#header .menu-all-list .menu-lec li:hover a {
	background: var(--clr-primary50);
	border-color: var(--clr-primary300);
	color: var(--clr-primary500);
	font-weight: 600;
}
.location {
	font-size: var(--fs-normal);
	font-weight: 400;
	color: #fff;
}
.location .flex-box {
	justify-content: flex-end;
}
.location li::after {
	content: '\ea6e';
	font-family: remixicon; /* \ea6e = ri-arrow-right-s-line */
	margin: 0 0.5rem;
}
.location li:last-child {
	color: var(--clr-gray600);
	font-weight: 500;
}
.location li:last-child::after {
	display: none;
}
.location i {
	color: #fff;
	font-size: var(--fs-normal);
	vertical-align: baseline;
}

/* ��� �˻� : ����� ��Ӱ� ��� ȭ�� ���ʿ� ī�� �� ���� ���� */
.srch-form {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 502;
	padding: 12vh 2rem 4rem;
	box-sizing: border-box;
	background: rgba(20, 20, 20, 0.55);
	overflow-y: auto;
	text-align: left;
	display: none;
}
.srch-modal {
	width: 100%;
	max-width: 68rem;
	margin: 0 auto;
	background: #fff;
	border-radius: var(--edge);
	box-shadow: 0 24px 60px rgba(0,0,0,0.28);
}
/* �Է� �� */
.srch-head {
	display: flex;
	align-items: center;
	gap: 1.6rem;
	padding: 1rem 2.8rem;
	border-bottom: var(--line-base);
}
.srch-form .srch-icon {
	flex: 0 0 auto;
	font-size: var(--fs-xlarge);
	line-height: 1;
	color: var(--clr-gray400);
}
.srch-form .automaker-wrap {
	position: relative;	/* #autoMakerTop �� absolute �� ���� ���ڰ� �ʿ��ϴ� */
	flex: 1 1 auto;
	min-width: 0;
}
.srch-form .btn-close {
	flex: 0 0 auto;
	background: var(--clr-gray100);
	color: var(--clr-gray500);
	transition: 0.2s;
}
.srch-form .btn-close:hover {
	background: var(--clr-primary50);
	color: var(--clr-primary500);
}
/* �ڵ��ϼ� ��� (��� �˻� #autoMakerTop �� �հ��ı� �˻� #autoMaker ����) */
/* �˻���� ��ġ�ϴ� ������ ������ JS �� display:block �� ä�� �ιǷ� �� ���ڸ� ����� */
ul#autoMakerTop:empty,
ul#autoMaker:empty { display: none !important; }
ul#autoMakerTop,
ul#autoMaker {
	max-height: unset;
	background: #fff;
	border: 1px solid var(--clr-gray100);
	border-radius: 1.4rem;
}
ul#autoMakerTop li,
ul#autoMaker li {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.9rem 1.2rem;
	border-radius: 10px;
	font-size: var(--fs-normal);
	font-weight: 500;
	color: var(--clr-gray600);
	cursor: pointer;
	transition: 0.2s;
}
ul#autoMakerTop li:hover,
ul#autoMaker li:hover {
	background: var(--clr-primary50);
	color: var(--clr-primary500);
	font-weight: 600;
}
/* ���� ������ : £�� �� ��� ���� ���� ��´� */
ul#autoMakerTop li::before,
ul#autoMaker li::before {
	content: '\f0d1';
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.8rem;
	height: 2.8rem;
	margin: 0;
	padding: 0;
	font-size: 1.4rem;
	font-weight: 400 !important;
	line-height: 1;
	color: var(--clr-gray400);
	background: var(--clr-gray50);
	border-radius: 100%;
	transition: 0.2s;
}
ul#autoMakerTop li:hover::before,
ul#autoMaker li:hover::before {
	color: var(--clr-primary400);
	background: #fff;
}
.srch-form #autoMakerTop,
#autoMaker {
	position: absolute;
	left: 0;
	width: 100%;
	max-height: 30rem;
	padding: 0.8rem;
	box-sizing: border-box;
	overflow-y: auto;
	text-align: left;
	z-index: 100;
	box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}
.srch-form .automaker-wrap input,
.srch-form .automaker-wrap input[type=text] {
	width: 100%;
	height: 7.2rem;
	padding: 0;
	font-size: var(--fs-medium);
	background: none !important;
	border: none;
	border-radius: 0;
}
.srch-form .automaker-wrap input:focus {
	border: none;
	box-shadow: none;
}
/* ��� �˻��� �Է� �� �Ʒ��� ���� */
.srch-form #autoMakerTop { top: calc(100% + 1.4rem); }
/* �ֱٰ˻��� �� �α��ڰ��� : ī�� �� ĭ �ȿ� ���η� �״´� */
.srch-form .srch-keyword {
	display: flex;
	flex-direction: column;
	gap: 3rem;
	padding: 3rem 2.8rem;
	text-align: left;
}
.srch-form .srch-keyword > div {
	width: auto;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}
.srch-form .box-line-tit {
	margin: 0 0 1.6rem;
	font-size: var(--fs-small);
	font-weight: 600;
	color: var(--clr-gray500);
}
/* �α��ڰ��� : ���� �� �پ� */
/* �α��ڰ��� : 2�� */
.srch-form .srch-favor ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.2rem 1.2rem;
	justify-content: flex-start;
	margin: 0;
}
.srch-form .srch-favor ul > li { width: auto; }
.srch-form .srch-favor ul > li a {
	display: flex;
	align-items: center;
	padding: 0.8rem 1rem;
	border-radius: 8px;
	font-size: var(--fs-small);
	transition: 0.2s;
}
.srch-form .srch-favor ul > li a:hover {
	background: var(--clr-primary50);
	color: var(--clr-primary500);
}
.srch-form .srch-favor ul > li a > span:last-child {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
/* �ֱٰ˻��� : �˾� �±� */
.srch-form .srch-latest ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 0.6rem;
	margin: 0;
}
.srch-form .srch-latest ul > li {
	width: auto;
	margin: 0;
	padding: 0;
	background: none;
	border-radius: 0;
}
.srch-form .srch-latest ul > li::before { display: none; }
.srch-form .srch-latest ul > li a {
	display: block;
	padding: 0.7rem 1.4rem;
	background: var(--clr-gray50);
	border: 1px solid var(--clr-gray100);
	border-radius: 10rem;
	font-size: var(--fs-xsmall);
	color: var(--clr-gray600);
	transition: 0.2s;
}
.srch-form .srch-latest ul > li a:hover {
	border-color: var(--clr-primary200);
	color: var(--clr-primary500);
}



/* ******************** footer ******************** */
#footer {
	padding: 4rem 0;
	background: #111722;
}
#footer .logo img {
	height: 4rem;
	filter: brightness(0) invert(1);
	opacity: 0.9;
}
#footer .f-menu-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 2rem;
	padding-bottom: 3rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
#footer .f-menu {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 4rem;
}
#footer .f-menu li {
	line-height: 1;
	text-wrap: nowrap;
}
#footer .f-menu li>a {
	font-size: var(--fs-small);
	font-weight: 600;
	color: #fff;
}
#footer .f-menu li>a.point { color: var(--clr-primary400); }

#footer .f-mid {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 4rem;
	padding: 4rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
#footer .f-company {
	font-size: var(--fs-medium);
	font-weight: 600;
	color: #fff;
}
#footer .f-addr {
	font-size: var(--fs-xsmall);
	color: var(--clr-gray400);
	margin: 0.5rem 0 2rem;
}
#footer .f-detail {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem 3rem;
	margin: 0.8rem 0 0;
}
#footer .f-detail span {
	font-size: var(--fs-xsmall);
	color: var(--clr-gray400);
}
#footer .f-detail em {
	font-weight: 600;
	color: #fff;
	margin-left: 0.8rem;
}
#footer .f-contact {
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	padding: 2.4rem 0;
}
#footer .f-contact-item {
	display: flex;
	align-items: center;
	gap: 1.8rem;
	padding: 0 4rem;
}
#footer .f-contact-item + .f-contact-item {
	border-left: 1px solid rgba(255, 255, 255, 0.12);
}
#footer .f-contact-item > i {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 5rem; height: 5rem;
	background: #111722;
	border-radius: 100%;
	font-size: 1.4em;
	font-weight: 300;
	line-height: 1;
	color: #fff;
}
#footer .f-contact-label {
	font-size: var(--fs-mini);
	color: var(--clr-gray400);
}
#footer .f-contact-value {
	font-size: var(--fs-regular);
	font-weight: 600;
	color: #fff;
}
#footer .f-copy {
	font-size: var(--fs-mini);
	color: var(--clr-gray500);
	text-align: center;
	padding-top: 3rem;
}
span.line::after {
	content: '|';
	font-weight: 100;
	color: var(--clr-gray300);
	margin: 0 2rem;
}
span.line:last-child::after {
	display: none;
}

#csQuick {
	position: fixed;
	right: 2rem;
	bottom: 2rem;
	z-index: 100;
	background: var(--clr-navy-light);
	border-radius: var(--edge);
	box-shadow: var(--shadow);
	width: 25rem;
	z-index: 500;
}
#csQuick .popCloseBtn {
	z-index: 1;
	top: -4rem;
	right: 0;
}
#csQuick h5 {
	font-size: var(--fs-large);
	font-weight: 700;
	letter-spacing: -0.05em;
	color: var(--clr-primary200);
	line-height: 1;
	margin-bottom: 1rem;
}
#csQuick h5 > small {
	font-size: var(--fs-normal);
	font-weight: 500;
	color: #fff;
	text-decoration: underline;
	letter-spacing: 0;
	margin-right: 0.5rem;
}
#csQuick p,
#csQuick .cs-form input[type=checkbox] + label {
	color: #fff;
	font-size: var(--fs-mini);
	font-weight: 300;
	line-height: 1.2;
	opacity: 0.7;
}
#csQuick p > span { display: block; }
#csQuick .cs-form-btn {
	background: var(--clr-navy);
	padding: 2rem;
	overflow: hidden;
	position: relative;
	border-radius: var(--edge);
}
#csQuick .cs-form-btn::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	background: url('/images/comm/cs_back.png') no-repeat top right -6.2rem;
	width: 100%;
	height: 100%;
}
#csQuick .cs-form-btn > span {
	color: #fff;
	background: var(--clr-navy-light);
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 0 2rem;
	border-radius: 1rem 0 0 0;
	cursor: pointer;
}
#csQuick .cs-form form {
	padding: 1.5rem;
}
#csQuick .cs-form input[type=text],
#csQuick .cs-form select {
	display: block;
	width: 100%;
	height: 4rem;
	font-size: var(--fs-xsmall);
	margin: 0.3rem 0;
	background: #fff;
}
#csQuick .cs-form input[type=checkbox] + label {
	margin-left: 0.5rem;
}
#csQuick .cs-form input[type=checkbox] + label:hover + .csChk-info,
#csQuick .csChk-info:hover {
	opacity: 1;
	visibility: visible;
}
#csQuick .cs-form button {
	margin: 0;
	margin-top: 1rem;
	width: 100%;
}
#csQuick .cs-form-btn > span.active i {
	transform: rotate(180deg);
}
#csQuick .csChk-grp {
	position: relative;
}
#csQuick .csChk-info {
	position: absolute;
	right: calc(100% + 1rem);
	bottom: 0;
	background: var(--clr-gray200);
	width: max-content;
	border-radius: 10px;
	box-shadow: var(--shadow-deep);
	padding: 1rem;
	border: 1px solid var(--clr-navy-light);
	opacity: 0;
	visibility: hidden;
	transition: 0.5s;
}
#csQuick .csChk-info .list-info {
	font-size: var(--fs-mini);
	color: var(--clr-navy);
	padding: 0;
}
#csQuick .csChk-info .list-info li {
	margin-bottom: 0;
}
#csQuick .csChk-info a {
	display: block;
	background: #fff;
	text-align: center;
	color: var(--clr-primary500);
	margin-top: 1rem;
}

/* ********** list style ********** */
.list-board {
	border-top: 2px solid var(--clr-gray600);
	color: var(--clr-gray600);
}
.list-board > li {
	border-bottom: var(--line-base);
	padding: 2rem 1rem;
}
.list-board + .btn {
	margin: 2rem auto;
}

.writer-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 1rem;
}
.writer-info > span { margin-right: 1rem; }
.writer-info > span:last-child { margin-right: 0; }
.writer, .wrt-date {
	color: var(--clr-gray400);
	font-size: var(--fs-xsmall);
}
/* �ۼ��ڡ���¥ ������ : ���� ũ�⸦ �״�� ������ ���� �������� �����Ѵ� */
.writer::before,
.wrt-date::before {
	margin-right: 0.5rem;
	vertical-align: middle;
	font-weight: 400;
}
.writer::before { content: '\f264'; }		/* ri-user-line */
.wrt-date::before { content: '\eb27'; }		/* ri-calendar-line */

/* tab btn */
.tabs {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 4rem 0;
}
.tabs li .btn {
	padding: 1.4rem 3rem;
	font-size: var(--fs-normal);
}
.tabs li:hover .btn {
	color: var(--clr-black) !important;
	border: var(--line-base) !important;
}
.tabs li.on .btn {
	background: var(--clr-secondary600);
	color: #fff !important;
}

/* ���� �� */
.list-with-tabs {
	display: flex;
	align-items: stretch;
	gap: 3rem;
	width: 100%;
	margin: 2rem 0 3rem;
}
.list-with-tabs li {
	flex: 1 1 0;
	min-width: 0;
	text-align: center;
}
.list-with-tabs li .btn {
	display: block;
	width: 100%;
	padding: 1.4rem 1rem;
	font-size: var(--fs-normal) !important;
	font-weight: 500;
	color: var(--clr-gray500) !important;
	background: var(--clr-gray50) !important;
	border: none !important;
	border-radius: 99px;
	box-sizing: border-box;
	transition: 0.2s;
}
.list-with-tabs li:hover .btn {
	background: var(--clr-gray50) !important;
	color: var(--clr-black) !important;
	border: none !important;
	font-weight: 600;
}
.list-with-tabs li.on .btn {
	color: #fff !important;
	background: var(--clr-primary400) !important;
	font-weight: 600;
}


/* pager */
.pager-wrap {
	margin: 6rem 0;
}
.pager {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.8rem;
}
.btn-pager {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--fs-normal);
	font-weight: 500;
	color: var(--clr-gray400);
	padding: 1rem;
	transition: 0.25s;
}
.btn-pager:hover {
	color: var(--clr-gray600);
}
.btn-pager.on,
.btn-pager.on:hover {
	font-weight: 600;
	color: var(--clr-gray600);
	border-bottom: 1px solid var(--clr-gray600);
}
.btn-pager.btn-prev,
.btn-pager.btn-next {
	font-size: var(--fs-normal);
	color: var(--clr-gray400);
	position: relative;
}
.btn-pager.btn-prev:hover,
.btn-pager.btn-next:hover {
	background: #fff;
	border-color: var(--clr-primary300);
	color: var(--clr-primary500);
}
.btn-pager.btn-prev i,
.btn-pager.btn-next i,
.btn-pager.btn-first::before,
.btn-pager.btn-last::before {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 2.2rem;
	line-height: 1;
}
/* ó��/�� : ���ű� �� ���� ���� �׸��� ��� ���� ȭ��ǥ �۸��� �ϳ��� */
.btn-pager.btn-first i,
.btn-pager.btn-last i {
	display: none;
}
.btn-pager.btn-first::before {
	content: '\f2e3';	/* ri-arrow-left-double-line */
}
.btn-pager.btn-last::before {
	content: '\f2e5';	/* ri-arrow-right-double-line */
}

/* accordion style */
.fold-btn {
	cursor: pointer;
}
.accordion-item, .fold-con {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease-out;
}

/* review */
.review-list li {
	background: #fff;
	border-radius: var(--edge);
	box-shadow: var(--shadow);
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 3rem 2.4rem;
	box-sizing: border-box;
	margin-bottom: 2rem;
	overflow: hidden;
}
.ribbon {
	position: relative;
}
.ribbon::before {
	content: '';
	position: absolute;
	right: -30%;
	bottom: 0;
	width: 100%;
	height: 3.5rem;
	transform: rotate(-30deg);
	background: url('/images/comm/gold_ribbon.png') no-repeat top center;
}
.review-con {
	flex-grow: 1;
}
.review-photo {
	background: #e9e9e9;
	width: 8rem;
	height: 10rem;
	overflow: hidden;
	margin-top: 1rem;
	border: var(--line-base);
	margin-left: 2rem;
}
.review-photo > img,
.review-photo .review-photo-view > img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}
.hb-wrapper .hb-main-container {
	background-color: rgba(0,0,0,0.4);
}
.hb-wrapper .hb-main-container button {
	background-color: #000;
	padding: 8px;
}
.hb-wrapper .hb-main-container button svg {
	fill: #fff;
}
.review-h {
	font-size: var(--fs-medium);
	font-weight: 600;
	color: var(--clr-gray600);
}
.review-txt {
	font-size: var(--fs-normal);
	line-height: 1.4;
	margin-top: 2rem;
	word-break: auto-phrase;
	-webkit-line-clamp: 5;
}
.comment {
	font-size: var(--fs-small);
	padding: 2.4rem;
	color: var(--clr-gray600);
	font-weight: 400;
	text-align: left;
	border: var(--line-base);
	margin: 2rem 0;
}
.comment-back {
	background: var(--clr-gray50);
	font-weight: 400;
}
.comment-img {
	display: flex;
	align-items: center;
	gap: 3rem;
	font-size: var(--fs-xsmall);
	color: var(--clr-gray500);
	padding: 0 2rem;
}
.comment-img .img-wrap {
	flex: 0 0 auto;
}
.comment-img .img-wrap > img {
	display: block;
}
.comment-img ul > li {
	margin: 0 0 0.4rem;
	line-height: 1.5;
}
.comment-img ul > li:last-child { margin-bottom: 0; }
.comment-img ul > li::before {
	content: '\2022';
	line-height: 1;
	font-weight: 400;
	color: var(--clr-gray200);
	margin-right: 0.5rem;
}
ul.comment > li,
ul.list-info > li {
	margin-bottom: 1rem;
	line-height: 1.4;
}
ul.comment > li:last-child,
ul.list-info > li:last-child {
	margin-bottom: 0;
}
ul.comment > li::before,
ul.list-info > li::before {
	content: '-';
	display: inline-block;
	margin-right: 0.5rem;
	line-height: 1;
}
ul.list-info {
	font-size: var(--fs-normal);
	color: var(--clr-gray600);
	text-align: left;
	padding: 1rem;
}
ul.info-list li {
	line-height: 1.8;
}
.list-num li {
	margin-bottom: 0.5rem;
}
.list-num li,
.list-num li a {
	font-weight: 500;
	font-size: var(--fs-small);
	color: var(--clr-gray600);
}
.list-num li .number,
.pop-con em {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--fs-xsmall);
	font-weight: 600;
	line-height: 1;
	color: var(--clr-primary400);
	background: var(--clr-primary50);
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 100%;
	margin-right: 1rem;
}
.box-line {
	border: var(--line-base);
	padding: 2rem 2.4rem;
} /* line-box */
.box-line-tit {
	font-size: var(--fs-regular);
	font-weight: 600;
	color: var(--clr-black);
	margin-bottom: 1rem;
} /* line-box-tit */
.congrp:has(.box-line) {
	align-items: stretch;
	gap: 0;
	margin: 6rem 0;
}
.congrp > .box-line {
	width: 50%;
	border-right: none;
}
.congrp > .box-line:last-child {
	border-right: var(--line-base);
}
.login-sns h5 {
	font-weight: 500 !important;
	color: var(--clr-gray600);
	text-align: center;
	position: relative;
}
.login-sns button {
	border: none !important;
	padding: 1.5rem;
	font-size: var(--fs-normal);
	justify-content: center !important;
	line-height: 1;
}
.login-sns button > img {
	height: 1em;
	margin-right: 1rem;
}
.login-sns button:hover {
	border: none !important;
}
button.btn-naver {
	background: #03c75a;
	color: #fff !important;
}
button.btn-kakao {
	background: #FFEB00;
	color: var(--clr-gray600) !important;
}
button.btn-naver, button.btn-kakao {
	display: flex;
	align-items: center;
	justify-content: center;
}
button.btn-naver::before, button.btn-kakao::before {
	content: '';
	display: inline-block;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	margin-right: 0.8rem;
}
button.btn-naver::before {
	width: 0.8em; height: 0.8em;
	background-image: url('/images/icon/icon_sns_naver.png');
}
button.btn-kakao::before {
	width: 1em; height: 1em;
	background-image: url('/images/icon/icon_sns_kakao.png');
}
.mypage .login-sns {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 1rem;
}
.mypage .login-sns .btn {
	margin: 0;
}
.or {
	position: relative;
	color: var(--clr-gray400);
	margin: 4rem 0 !important;
}
.or::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 1px;
	background: var(--clr-gray200);
	z-index: -1;
}
.or::after {
	content: '';
	position: absolute;
	left: 50%;
	transform: translatex(-50%);
	background: #fff;
	width: 15%;
	height: 3rem;
	z-index: -1;
}

/* ******************** popup ******************** */
.popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(20, 30, 49, 0.45);	/* --clr-navy ���� */
	backdrop-filter: blur(3px);
	z-index: 900;
	display: none;
}
.pop {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: var(--edge);
	box-shadow: 0 24px 60px rgba(20, 30, 49, 0.22);
	min-width: 50rem;
	max-width: 80%;
	max-height: 80%;
	box-sizing: border-box;
	overflow: hidden;
}
.popCloseBtn {
	position: absolute;
	top: -1rem;
	right: -1rem;
	background: #fff;
	color: var(--clr-gray500) !important;
	box-shadow: var(--shadow-light);
}
.pop > .popCloseBtn {
	top: 1.5rem;
	right: 2rem;
	min-width: 5rem;
	min-height: 5rem;
	font-size: 3rem;
	background: transparent;
	box-shadow: none;
	transition: background 0.2s, color 0.2s;
}
.pop > .popCloseBtn:hover {
	background: var(--clr-gray100);
	color: var(--clr-black) !important;
}
.pop-header {
	flex: 0 0 auto;
	border-bottom: 1px solid var(--clr-gray100);
	padding: 2.6rem 8rem 2rem;
	text-align: center;
}
.pop-header h3,
.pop-header h4,
.pop-header h5,
.pop-header h6 {
	font-size: var(--fs-large);
	font-weight: 600;
	color: var(--clr-black);
}
.pop-con-btns {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.8rem;
	flex-wrap: wrap;
	margin: 0;
	padding: 1.8rem 3rem;
	border-top: 1px solid var(--clr-gray100);
	background: var(--clr-gray50);
}
.popup .pop-con {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	font-size: var(--fs-normal);
	margin: 0;
	padding: 2rem 2.6rem;
}
.popup .pop-con > div,
.popup .pop-con > ul {
	margin-bottom: 2.4rem;
}
.popup .pop-con > div:last-child,
.popup .pop-con > ul:last-child {
	margin-bottom: 0;
}

/* ***** �˾� ���� ���� *****
	������ ���� ����� �Ʒ� �� �� �ϳ��� ��� ����. �ϳ��� Ŭ������
	���� ����� ���ϸ� CSS �� ��ũ�� ������� ������ ���󳻾� �ؼ� �ݹ� ��������.

	.pop-notice   �ȳ��� �г�          <li>����</li> �� <li class="caption">�ο�</li>
	.pop-list     �� �� �� ǥ         <li><strong>��</strong><p>��</p></li>
	.pop-steps    ��ȣ�� �ٴ� �������  <li><em>1</em><p>����</p></li>
	.pop-files    ���� ��ư�� �ٴ� ��� <li>����<a class="btn">�ٿ�ε�</a></li>       */

/* �ȳ��� : �а� �ѱ�� ���̶� �ึ�� ���� ���� �ʰ� �г� �� ������ ������ */
.popup .pop-notice {
	padding: 1.6rem 2rem;
	background: var(--clr-gray50);
	border-radius: 1.2rem;
	text-align: left;
	font-size: var(--fs-small);
	color: var(--clr-gray600);
	line-height: 1.6;
}
.popup .pop-notice > li + li { margin-top: 0.8rem; }
.popup .pop-notice > li.caption {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 2rem;
	font-size: var(--fs-mini);
	color: var(--clr-gray400);
}
.popup .pop-list { text-align: left; }
.popup .pop-list > li {
	display: grid;
	grid-template-columns: 13rem minmax(0, 1fr);
	align-items: baseline;
	gap: 0 1.6rem;
	margin: 0;
	padding: 1.3rem 0;
	border-bottom: 1px dashed var(--clr-gray100);
	line-height: 1.5;
}
.popup .pop-list > li:last-child { border-bottom: none; }
.popup .pop-list > li > strong {
	font-size: var(--fs-small);
	font-weight: 500;
	color: var(--clr-gray500);
}
.popup .pop-list > li > p {
	font-size: var(--fs-normal);
	font-weight: 500;
	color: var(--clr-black);
}

/* ���� ��� : ��ȣ ����(.pop-con em)�� �� ù �ٿ� ����� */
.popup .pop-steps { text-align: left; }
.popup .pop-steps > li {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin: 0;
	padding: 1.1rem 0;
	border-bottom: 1px dashed var(--clr-gray100);
	line-height: 1.5;
}
.popup .pop-steps > li:last-child { border-bottom: none; }
.popup .pop-steps > li > em {
	flex: 0 0 auto;
	margin: 0.2rem 0 0;
}
.popup .pop-steps > li > p {
	font-size: var(--fs-small);
	color: var(--clr-gray600);
}

/* �ڷ� ��� : ������ ����, ���� ��ư�� ������ �� */
.popup .pop-files { text-align: left; }
.popup .pop-files > li {
	display: flex;
	align-items: center;
	gap: 1.6rem;
	margin: 0;
	padding: 1.2rem 0;
	border-bottom: 1px dashed var(--clr-gray100);
	font-size: var(--fs-small);
	color: var(--clr-gray600);
	line-height: 1.5;
}
.popup .pop-files > li:last-child { border-bottom: none; }
.popup .pop-files .btn {
	flex: 0 0 auto;
	margin-left: auto;
	padding: 0.8rem 1.4rem;
	background: var(--clr-primary50);
	border: none !important;
	border-radius: 10rem;
	font-size: var(--fs-mini);
	font-weight: 600;
	color: var(--clr-primary500);
	text-align: center;
	text-wrap: nowrap;
}
.popup .pop-files .btn:hover {
	background: var(--clr-primary100);
	color: var(--clr-primary600);
}
.pop-con-btns .btn {
	padding: 1.3rem 4rem;
	border-radius: 1rem;
}
/* ä��� ������ ���� ��ư(��� ��)�� �� �˾� �׵θ��� �д� */
.pop-con-btns .btn:not([class*="btn-fill"]) {
	background: #fff;
	border: 1px solid var(--clr-gray200);
	color: var(--clr-gray600);
}
.pop-con-btns .btn:not([class*="btn-fill"]):hover {
	border-color: var(--clr-gray400);
	color: var(--clr-black);
}
#PopContainer {
	position: absolute;
	top: 13rem;
	left: 0;
	z-index: 300;
}
.popup-layer {
	min-width: unset;
}
.popup-layer > div > a,
.popup-layer > div > a > img { display: block; }
.arrPopup {
	box-shadow: 0 20px 60px rgba(0,0,0,0.3);
	box-sizing: border-box;
	background: #fff;
	border-radius: var(--edge);
	overflow: hidden;
}
.arrPopup-close {
	padding: 1rem 2rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--clr-gray600);
	background: #fff;
}
.arrPopup-close input[type=checkbox] {
	margin-right: 1rem;
	vertical-align: middle;
}
.arrPopup-close a {
	text-decoration: underline;
	color: var(--clr-black);
}

/* ****** 비디?�� ?��?�� ****** */
.popup-video,
.popup-video .pop-vd-con {
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.popup-video {
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	z-index: 900;
	display: none;
}
.popup-video .pop-vd-con {
	position: absolute;
	width: 100%;
	max-width: 90%;
	text-align: center;
}
.popup-video video {
	width: 80rem;
	max-width: 100%;
	height: auto;
}
.popup-video .video-wrap {
	width: fit-content;
	margin: 0 auto;
	position: relative;
}
.popup-video .video-wrap .popCloseBtn {
	top: -4rem;
	right: 0;
}
.popup-video .video-caption {
	position: absolute;
	top: -4rem;
	left: 0;
	font-size: var(--fs-xsmall);
	color: var(--clr-gray500);
	background: #fff;
	border-radius: 10rem;
	padding: 0 1rem;
	display: none;
}
.video-caption > i {
	margin-right: 0.5rem;
}

/* ******************** input �??�� ******************** */
.input-datalist input,

/* ******************** ?��?��?��?�� Swiper ******************** */
.swiper-wrapper {
/*  transition-timing-function: linear;*/
}

.tabCon {
	display: none;
}
.tabCon.on {
	display: block;
}

/* btn-top */
.btn-top {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: var(--fs-mini);
	font-weight: 600;
	color: #fff;
	line-height: 1;
	position: fixed; right: 2rem; bottom: -8rem;
	width: 4rem; height: 4rem;
	background: rgb(0 0 0 / 0.4);
	border-radius: 50%;
	cursor: pointer;
	transition: .5s;
	z-index: 9999;
}
.btn-top:hover {
	background: rgb(0 0 0 / 0.8);
	color: #fff;
}

/* 비�??�? ?��?���? */
.icon-secret {
	line-height: 0;
	vertical-align: middle;
}
.icon-secret::before {
	content: "\eece";
	margin-left: 0.5rem;
	font-size: 1.1em;
	font-weight: 400;
	color: var(--clr-gray400);
}


/* ********** ?��른쪽 ?��?��?�� �??���?? ?��로팅 메뉴 floating-menu ***********/
.floating-menu {
	width: 230px;
	padding: 10px;
	box-sizing: border-box;
	background: var(--clr-gray100);
	box-shadow: 0 30px 40px rgba(0,0,0,0.15);
	border-radius: var(--edge);
	overflow: hidden;
	position: fixed; right: 2rem; bottom: -50rem;
	z-index: 10;
}
.floating-menu [class^="fm-"] {
	width: 100%;
	background: #fff;
	margin-bottom: 10px;
	box-sizing: border-box;
	border-radius: 12px;
	padding: 10px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.1);
	overflow: hidden;
}
.floating-menu [class^="fm-"]:last-child {
	margin-bottom: 0;
}
.go-to-top {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background: #fff;
	box-shadow: 0 6px 8px rgba(0,0,0,0.12);
	border: 1px solid var(--clr-gray300);
	font-size: var(--fs-xsmall);
	line-height: 1;
	text-align: center;
	box-sizing: border-box;
	border-radius: 12px;
}
@keyframes gaugeFill {
	0% { width: 0; }
	100% { width: 100%; }
}

.floating-menu-m {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 10;
}
/* ����� �� ��. ���� ��ġ�� ��� ��� �׸� ���� ª�� ��ũ �������θ� ǥ���Ѵ� */
.floating-menu-m .quick-btm {
	display: flex;
	align-items: stretch;
	justify-content: center;
	padding: 0 2%;
	padding-bottom: env(safe-area-inset-bottom);
	background: #fff;
	border-top: var(--line-base);
	box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.06);
	box-sizing: border-box;
}
.floating-menu-m .quick-btm > a {
	flex: 1 1 0;
	min-width: 0;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 1.4rem 0.2rem 1.2rem;
	font-size: var(--fs-mini);
	font-weight: 500;
	color: var(--clr-gray500);
	text-wrap: nowrap;
	box-sizing: border-box;
	transition: 0.25s;
}
/* �� ������� */
.floating-menu-m .quick-btm > a::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 2.6rem;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: var(--clr-primary400);
	opacity: 0;
	transition: 0.25s;
}
.floating-menu-m .quick-btm > a > i {
	font-size: 2.2rem;
	font-weight: 400;
	line-height: 1;
	color: var(--clr-gray600);
	margin: 0;
	transition: 0.25s;
}
.floating-menu-m .quick-btm > a.on {
	color: var(--clr-primary500);
	font-weight: 700;
}
.floating-menu-m .quick-btm > a.on::before { opacity: 1; }
.floating-menu-m .quick-btm > a.on > i { color: var(--clr-primary400); }
/* �� �ٷ� ���� �ߴ� ���� TOP ��ư (bottom:100% = ���� ����) */
.floating-menu-m .go-to-top {
	position: absolute;
	right: 1.6rem;
	bottom: calc(100% + 1.2rem);
	width: 4.4rem;
	height: 4.4rem;
	gap: 0.1rem;
	border: none;
	border-radius: 100%;
	background: #fff;
	box-shadow: var(--shadow);
}
.floating-menu-m .go-to-top > i {
	font-size: 2rem;
	font-weight: 600;
	color: var(--clr-primary600);
}

/* ************************************************************
	NEW CSS
************************************************************ */
#header .h-top {
	height: 14rem;
}
#header .sear-util-wrap {
	gap: 4rem;
}
#header .searchbar {
	border: 1px solid var(--clr-gray300);
	width: 48rem; max-width: 48%;
	padding: 0.6rem;
	padding-left: 2rem;
	box-sizing: border-box;
	border-radius: 99rem;
}
#header .searchbar i {
	font-size: 1.2em;
	color: #fff;
	line-height: 1;
	cursor: pointer;
	background: var(--clr-primary400);
	padding: 1.2rem 1.22rem;
	border-radius: 50%;
	box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
}
#header .searchbar input::placeholder {
	font-size: var(--fs-xsmall);
	font-weight: 400;
	color: var(--clr-gray400);

}
#header .fav {
	background: var(--clr-secondary50);
	border-radius: 6px;
	padding: 0.6rem 0.8rem;
}
#header .fav > a {
	font-size: var(--fs-mini);
	margin: 0 0.4rem;
}
#header .fav > a::before {
	background: #fff;
	width: 24px; height: 24px;
	display: inline-grid;
	place-items: center;
	border-radius: 50%;
	margin-right: 0.4rem;
}
#header .fav > a.bookmark::before { content: '\eae5'; color: var(--clr-primary400); }
#header .fav > a[class*="_guide"]::before { content: '\eadf'; color: var(--clr-secondary400); }
/* ��� ��ƿ(�α���/ȸ������ ��).
   ����� ��ü�޴� ���� .util-m �� ���� ��Ÿ���� ������ PC �� ���� ����� */
#header .util,
#header .util-m .btn-wrap {
	display: flex;
	align-items: center;
	gap: 3rem;
}
#header .util a,
#header .util-m .btn-wrap > a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4em;
	font-size: var(--fs-small);
	font-weight: 600;
	text-wrap: nowrap;
}
#header .util a > span,
#header .util-m .btn-wrap > a > span {
	border: var(--line-base);
	border-radius: 12px;
	padding: 1.2rem;
	min-width: 5rem;
	box-sizing: border-box;
	opacity: 0.8;
}
#header .util a > span img,
#header .util-m .btn-wrap > a > span img { display: block; margin: 0 auto; }
#header .h-btm {
	font-size: var(--fs-medium);
	font-weight: 600;
	height: 6rem;
}
#header .h-btm .container {
	display: grid;
	grid-template-columns: 12rem 1fr 12rem;
	justify-items: center;
	gap: 0;
}
#header .h-btm .moe {
	font-size: var(--fs-mini);
	font-weight: 300;
	line-height: 1.2;
	color: var(--clr-gray500);
	gap: 0.6rem;
}
#gnb > li {
	padding: 0 3rem;
	line-height: 1.2;
}
#gnb > li:has(.h-menu-btn) {
	border-left: 1px solid var(--clr-gray200);
}

/* ************************************************************
	������
************************************************************ */
/* ********** for Desktop(narrow) ***********/
/* .container �� 140rem �� �� ä��� �����ϴ� ����.
   ��� ���(�ΰ� + �˻��� 48rem + ���ã�� + ��ƿ)�� �����̳ʸ� �Ѿ�Ƿ�
   �˻��ٿ� ������ �ٿ� �� ���� �����Ѵ�. */
@media all and (max-width:1279px) {
	#header .h-top { height: 12rem; }
	#header .sear-util-wrap { gap: 3rem; }
	#header .searchbar { width: 32rem; }
	#header .util { gap: 2rem; }
	#gnb > li { padding: 0 2rem; }
}

/* ********** for Tablet ***********/
@media all and (max-width:1023px) {
	html { font-size: 9px; }

	/* �찡 �������� ���� �ּҺ��� ���� */
	.top-banner .tb-mail { display: none; }

	#header .h-menu-all .container { max-width: 96%; }
	#header .menu-all-inner { grid-template-columns: 18rem 1fr; gap: 3rem; }
	#header .menu-all-tit { font-size: var(--fs-subtitle); }

	#header .h-top { height: 10rem; }
	#header .h-btm { font-size: var(--fs-regular); }
	#header .h-top .logo img { height: 3.8rem; }
	#header .util { gap: 1.5rem; }
	#header .util a { font-size: var(--fs-xsmall); }
	#header .util a > span { padding: 0.9rem; }
	.banner-kakao .channel p {
		display: block;
		margin-left: 0;
		margin-top: 1rem;
	}
	#header .searchbar {
		width: unset;
	}
	#header .searchbar {
		width: 4rem;
		max-width: unset;
		padding: 0;
		justify-content: center;
	}
	#header .searchbar input {
		display: none;
	}
	h2.big-title { font-size: var(--fs-title); }
	h3.sub-title { font-size: var(--fs-large); margin: 0 0 2rem;  }
	h2.title {
		font-size: var(--fs-xlarge);
		word-break: keep-all;
		text-wrap: balance;
		line-height: 1.4;
		margin: 0 0 3rem;
	}
	.list-with-tabs { gap: 0.8rem; }
}

/* ********** for Mobile ***********/
@media all and (max-width:767px) {
	html { font-size: 9px; }
	body {
		-ms-overflow-style: none; /* IE and Edge */
		scrollbar-width: none; /* Firefox */
		min-width: 320px;
	}
	:-webkit-scrollbar {
		display: none; /* Chrome, Safari, Opera*/
	}
	section.section-sub {
		margin: 6rem 0;
	}
	.page-title {
		margin-left: 0;
		font-size: var(--fs-subtitle);
	}
	.area-tit { font-size: var(--fs-large); }

	/* ������� ���� ���� ������ ���� ��ȣ�� SNS �� �� �ٷ� �����.
	   ���� �ּҴ� 1023px ���Ͽ��� �̹� ���� �ִ� */
	.top-banner .container {
		height: 3.6rem;
		justify-content: center;
	}
	.top-banner .tb-msg { display: none; }

	.box-line { padding: 1.5rem; }
	ul.comment, ul.list-info { padding: 1.5rem; }
	#header {
		--h-height: 12rem;
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-rows: 3.6rem 4.4rem;
		grid-template-areas:
			"head   head"
			"search menu";
		align-items: center;
		column-gap: 1rem;
		row-gap: 1.2rem;
		height: var(--h-height);
		padding: 1.4rem 4%;
		box-sizing: border-box;
	}
	#header .h-top,
	#header .h-btm,
	#header .h-top .container,
	#header .h-btm .container,
	#header .sear-util-wrap { display: contents; }

	/* 1���� head �� ĭ�� �ΰ�/���ã�Ⱑ ���� ����,
	   2���� �˻��ٴ� ��ü�޴� ��ư ���� ���� �� ���� �Ѵ� */
	#header .h-top .logo {
		grid-area: head;
		justify-self: start;
	}
	#header .h-top .logo img { height: 3.4rem; }
	#header .fav {
		grid-area: head;
		justify-self: end;
		display: flex;
		align-items: center;
		padding: 0.4rem 0.6rem;
	}
	#header .fav > a {
		font-size: 1.1rem;
		margin: 0 0.2rem;
		text-wrap: nowrap;
	}
	#header .fav > a::before {
		width: 20px; height: 20px;
		font-size: var(--fs-xsmall);
		margin-right: 0.3rem;
	}
	#header .searchbar {
		grid-area: search;
		width: auto;
		max-width: none;
		padding: 0.4rem 0.6rem;
		justify-content: space-between;
	}
	#header .searchbar input { display: block; }
	#header .searchbar i {
		flex: 0 0 auto;
		padding: 0.9rem 0.92rem;
	}
	#header .util,
	#header .h-btm .moe { display: none; }

	/* ��ü�޴� ��ư�� ����� GNB ��ũ�� ���� */
	#gnb {
		grid-area: menu;
		justify-self: end;
	}
	#gnb > li {
		display: none;
		padding: 0;
	}
	#gnb > li:has(.h-menu-btn) {
		display: block;
		border-left: 0;
	}
	.h-menu-btn {
		display: flex;
		width: 4.4rem;
		height: 4.4rem;
		margin-right: 0;
		font-size: 0;
	}
	.h-menu-btn::before {
		content: '\ef3e';   /* ri-menu-line */
		font-family: remixicon;
		font-size: 2.8rem;
		font-weight: 400;
		line-height: 1;
		color: var(--clr-black);
	}
	.h-menu-btn.active::before { content: '\eb99'; }   /* ri-close-line */
	.srch-form { padding: 8vh 1.6rem 3rem; }
	.srch-head { padding: 0.8rem 1.2rem 0.8rem 2rem; }
	.srch-form .automaker-wrap input { height: 6rem; }
	.srch-form .srch-keyword {
		gap: 2.4rem;
		padding: 2.4rem 2rem;
	}
	/* �α��ڰ��� : ���� �������� Ĩ �� �ٷ� ���� ���� ��ũ�� */
	.srch-form .srch-favor ul {
		display: flex;
		flex-wrap: nowrap;
		gap: 0.6rem;
		margin: 0 -2rem;
		padding: 0 2rem;
		overflow-x: auto;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
	.srch-form .srch-favor ul::-webkit-scrollbar { display: none; }
	.srch-form .srch-favor ul > li { flex: 0 0 auto; }
	.srch-form .srch-favor ul > li a {
		padding: 0.7rem 1.4rem 0.7rem 0.8rem;
		border: 1px solid var(--clr-gray100);
		border-radius: 10rem;
		white-space: nowrap;
	}
	.srch-form .srch-favor ul > li a > span:last-child { overflow: visible; }
	#header .util-m {
		display: block;
		background: #fff;
		padding: 2.4rem 4%;
		border-bottom: var(--line-base);
	}
	#header .util-m .log {
		font-size: var(--fs-medium);
		font-weight: 500;
		color: var(--clr-gray500);
		margin-bottom: 2rem;
	}
	#header .util-m .log > span {
		font-weight: 700;
		color: var(--clr-black);
		position: relative;
		z-index: 0;
	}
	#header .util-m .log > span::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 40%;
		background-color: var(--clr-primary100);
		z-index: -1;
	}
	/* ��ġ�� ��ξ �°�(��� ����), ��ư ����� PC .util ��Ģ�� �״�� �޴´� */
	#header .util-m .btn-wrap {
		justify-content: center;
		gap: 4rem;
	}
	#header .h-menu-all {
		top: var(--h-height);
		left: 0;
		height: calc(100vh - var(--h-height));
		overflow-y: scroll;
		overflow-x: hidden;
		box-sizing: border-box;
		background: #fff;
	}
	/* ��ü�޴�(�����) : ���� �ʰ� ��� ������ ���� ���η� �״´�.
	   PC �ް��޴��� �״�� 1������ ���� ���� */
	#header .h-menu-all .container { max-width: 100%; display:unset; padding: 0; }
	#header .menu-all-inner { display: block; }
	#header .menu-all-side {
		display: block;
		padding: 2.4rem 4% 0;
	}
	#header .menu-all-tit { font-size: var(--fs-large); margin: 0.4rem 0 0; }

	#header .menu-all-list {
		display: block;
		padding: 2.4rem 4% 5rem;
	}
	#header .menu-all-list > li {
		display: block;
		width: 100%;
		background: none;
		border-radius: 0;
		padding: 0;
		margin-top: 3.4rem;
	}
	#header .menu-all-list > li:first-child { margin-top: 0; }
	/* ���������� PC ó�� ���� �гη� ���Ѵ� */
	#header .menu-all-list > li:has(.menu-lec) {
		grid-column: auto;
		background: var(--clr-gray50);
		border-radius: var(--edge);
		padding: 2rem 1.8rem;
	}

	/* ���� ���� : PC �� ���� ���� ���� */
	#header .menu-all-list > li strong {
		display: block;
		font-size: var(--fs-regular);
		padding-bottom: 1rem;
		margin-bottom: 1.2rem;
	}

	/* ���� ��ũ�� 2���� ���� ���� ���̸� ���δ� */
	#header .menu-all-list > li > ul {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0 1.5rem;
	}
	#header .menu-all-list > li ul > li {
		padding: 0;
		font-size: var(--fs-small);
		color: var(--clr-gray500);
	}
	#header .menu-all-list a { padding: 0.7rem 0; }
	#header .menu-all-list > li ul li:hover a {
		color: var(--clr-primary500);
		font-weight: 600;
	}

	/* ���������� PC �� �����ϰ� Ĩ(pill) */
	#header .menu-all-list .menu-lec {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.6rem;
	}
	#header .menu-all-list .menu-lec > li { width: auto; }
	#header .menu-all-list .menu-lec a {
		background: #fff;
		border: var(--line-base);
		border-radius: 100px;
		padding: 0.8rem 1.4rem;
		color: var(--clr-gray600);
	}
	#header .menu-all-list .menu-lec li:hover a {
		background: var(--clr-primary50);
		border-color: var(--clr-primary300);
		color: var(--clr-primary500);
		font-weight: 600;
	}
	#header .util .log {
		margin-right: 0;

	}

	.banner-kakao { padding: 2rem 0 !important; }
	.banner-kakao .channel > img { width: 5rem !important; margin-right: 1rem !important; }
	.banner-kakao .channel h4 {
		margin: 1rem 0 !important;
		font-size: var(--fs-medium) !important;
	}
	.banner-kakao .channel p {
		display: block !important;
		margin-left: 0 !important;
		margin-top: 1rem !important;
		font-size: var(--fs-normal) !important;
		border-left: none !important;
		padding-left: 0 !important;
	}
	.banner-kakao .channel-qr {
		display: none !important;
	}
	#footer .f-menu-wrap {
		flex-direction: column;
		align-items: flex-start;
	}
	#footer .f-menu {
		flex-wrap: wrap;
		gap: 1rem 2.5rem;
		margin-top: 1rem;
	}
	#footer .f-mid {
		flex-direction: column;
		align-items: flex-start;
		gap: 3rem;
	}
	#footer .f-contact {
		width: 100%;
		box-sizing: border-box;
	}
	#footer .f-contact-item {
		flex: 1 1 0;
		padding: 0 2rem;
	}
	/* �˾��� ���� ���� ���η� �� ĭ(ȭ�� ��)�� ������ �ΰ� ������ �о� �ѱ��.
	   ���� ���� �˾� �ϳ� ������ �����(scroll-snap). 1���� ����� �ϳ��� ���δ� */
	#PopContainer {
		position: fixed;
		top: 12rem;
		background: rgba(0,0,0,0.5);
		padding: 4rem 2rem;
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 100%;
		align-items: start;
		justify-items: center;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
	}
	.arrPopup-close input[type="checkbox"] {
		margin-right: 0.5rem;
	}
	/* ������ �Է� ��(�ζ��� width)�� ���� �� ĭ(ȭ�� ��)���� ������ ���δ�. ���̴� regular_pop.asp �� ���뿡 ����� */
	.arrPopup {
		position: unset !important;
		max-width: 100%;
		background: none;
		box-shadow: none;
		scroll-snap-align: center;
	}
	body:has(.arrPopup-close) { background: none; }
	div:has(.arrPopup-close) { border-radius: var(--edge); overflow: hidden; }
	input[type="checkbox"], input[type="radio"] {
		transform: scale(0.7);
	}
	#csQuick {
		right: 0;
		bottom: 0;
		width: 100%;
	}
	#csQuick .cs-form form > div:has(input[type="text"]) {
		display: flex;
		align-items: center;
	}
	#csQuick .cs-form form > div input[type="text"] { margin-right: 0.5rem; }
	#csQuick .cs-form form > div input[name=csName] {
		flex: 0 0 25%;
	}
	#csQuick h5, #csQuick p, #csQuick p > span { display: inline-block; margin: 0; }
	#csQuick h5 { font-size: var(--fs-regular); }
	#csQuick p { margin-left: 0.5rem;}
	#csQuick .cs-form-btn::before { display: none; }
	#csQuick .cs-form-btn {
		padding: 1.5rem;
		border-radius: 1.6rem 1.6rem 0 0;
	}
	#csQuick .cs-form-btn > span {
		height: 100%;
		background: none;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	#csQuick .popCloseBtn {
		right: 1rem;
		display: none;
	}
	#csQuick .cs-form button {
		padding: 1rem 2rem;
	}
	#csQuick .csChk-grp {
		position: unset;
		display: flex;
		align-items: center;
	}
	#csQuick .csChk-info {
		opacity: 1;
		visibility: visible;
		position: unset;
		padding: 0;
		background: none;
		margin-left: auto;
	}
	#csQuick .csChk-info .list-info {
		display: none;
	}
	#csQuick .csChk-info a {
		margin-top: 0;
		padding: 0;
		background: none;
		color: #fff;
		text-decoration: underline;
	}
/*	#footer { padding: 4rem 0 8rem; }*/ /* 간편?��?�� 복구?���? */
	.pop {
		min-width: 85%;
	}
	.pop-header { padding: 2.2rem 7rem 1.8rem; }
	.popup .pop-con {
		padding: 2.2rem 2rem;
	}
	.popup .pop-list > li { grid-template-columns: 9rem minmax(0, 1fr); }
	.pop-con-btns { padding: 1.6rem 2rem; }
	.pop-con-btns .btn {
		padding: 1.2rem 4rem;
		text-wrap: nowrap;
	}
	.mypage .login-sns {
		flex-direction: column;
	}
	.mypage .login-sns .btn {
		width: 100%;
		font-size: var(--fs-normal);
	}
}
@media all and (min-width:481px) {
	.floating-menu-m { display: none !important; }
}
@media all and (max-width:480px) {
	/* ���� �� ���� �ø��� ��ư�� �ݹ����� ������ */
	.popup .pop-list > li {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.3rem;
	}
	.pop-con-btns .btn {
		flex: 1 1 0;
		padding: 1.2rem 1rem;
	}
	.banner-kakao .channel h4 {
		font-size: var(--fs-regular) !important;
	}
	#footer .f-contact {
		flex-direction: column;
		align-items: stretch;
		gap: 1.6rem;
		padding: 1.8rem;
	}
	#footer .f-contact-item {
		padding: 0;
	}
	#footer .f-contact-item + .f-contact-item {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
		padding-top: 1.6rem;
	}
	#footer .f-copy {
		font-size: var(--fs-mini);
	}
	.floating-menu { display: none !important; }
	/* �ϴ� ������(.floating-menu-m �� 8rem)�� ������ �ʵ��� Ȯ�� */
	#footer { padding: 4rem 0 11rem }

	/* ���ã��� �����ܸ� ���� �ΰ��� �� �ٿ� ���� */
	#header .fav > a {
		font-size: 0;
		margin: 0 0.2rem;
	}
	#header .fav > a::before {
		font-size: var(--fs-normal);
		margin-right: 0;
	}
	.h-menu-btn::before { font-size: 2.4rem; }
}
@media all and (max-width:360px) {
	#header .h-top .util > .log {
		display: none;
	}
	.mypage .login-sns .btn {
		font-size: var(--fs-xsmall);
	}
	#footer .f-menu li>a {
		font-size: var(--fs-xsmall);
	}
}



/* ****************************** //반응?�� ****************************** */