@charset "utf-8";
@import url(base.css);

section.section-main {
  padding: 8rem 0;
}
section.section-sub {
  margin: 10rem 0;
}
.container {
  width: 120rem;
  max-width: 92%;
  margin: 0 auto;
}
.logo > a {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 1rem;
}
.logo > a .logo-txt > p:not(.logo-name) {
	font-size: 12px;
	font-weight: 600;
	color: #04668B;
	line-height: 1.2;
}
.logo > a .logo-txt .logo-name {
	font-size: 20px;
	font-weight: 600;
	color: var(--clr-black);
	line-height: 1.1;
	letter-spacing: -0.05rem;
}
.logo > a .logo-txt .logo-en {
	font-size: 10px;
	font-weight: 400;
	color: var(--clr-gray400);
	display: block;
	line-height: 1;
	letter-spacing: -0.03em;
}
.logo img {
	display: block;
	width: 41px;
}

.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; }

h2.title {
  font-size: var(--fs-title);
  font-weight: 700;
  margin: 0 0 5rem;
	letter-spacing: -0.02em;
}
.page-title {
  font-size: var(--fs-title);
  font-weight: 600;
  color: #fff;
  margin-left: 2rem;
}
.page-title::after {
  content: '';
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  background: linear-gradient(135deg, var(--clr-primary400), var(--clr-turkey));
  border-radius: 100%;
  margin-left: 0.5rem;
}
p:not(.p-detail) > .btn {
  border: none;
  padding: 0;
  font-size: inherit;
  font-weight: 600 !important;
  color: var(--clr-gray600);
  border-radius: 0;
  margin: 0 0.5rem;
  position: relative;
}
p > .btn::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--clr-gray600);
  display: none;
}
p > .btn > .ricon {
  color: inherit;
  margin: 0;
}
p > .btn:hover {
  border: none !important;
  color: var(--clr-gray600) !important;
  padding: 0;
}
p > .btn:hover::before {
  display: block;
}
.caption {
  color: var(--clr-gray400);
  font-size: var(--fs-small);
  margin: 0.5rem 0;
}
.caption .mark-asterisk::after {
  color: inherit;
}
.caption .ricon {
  font-size: var(--fs-regular);
}

.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: '＊';
	font-size: var(--fs-small);
	color: var(--clr-red);
	font-weight: 500;
}
.mark-dot::before {
	content: '●';
	font-size: 5px;
	font-weight: 600;
	line-height: 0;
	vertical-align: baseline;
	display: inline-block;
	margin-right: 0.2em;
}

.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: 1rem;
}
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: 14px;
	height: 14px;
	border-radius: 3px;
	background: var(--clr-navy);
	animation: postColor 1s 1s ease-in-out infinite;
	z-index: -1;
}


/* ******************** button ******************** */
.btn {
	display: inline-block;
	font-size: var(--fs-normal);
	font-weight: 600;
	color: var(--clr-gray400);
	text-align: center;
	padding: 1rem 2rem;
	border: var(--line-base);
	background: transparent;
	box-sizing: border-box;
	transition: 0.5s;
	border-radius: 6px;
	cursor: pointer;
}
.btn:hover:not(#header .btn, .dep .btn ,.btn-cancel, .btn-disabled),
.btn.on:not(#header .btn, .dep .btn,.btn-cancel .btn-disabled) {
  color: var(--clr-primary400);
  border: 1px solid var(--clr-primary400);
}
.btn-small {
  font-size: var(--fs-xsmall) !important;
  font-weight: 500;
  padding: 0.5rem 1.4rem;
  border-radius: 5px;
}
.btn-m {
  font-size: var(--fs-regular);
  font-weight: 600;
  padding: 1.3rem 5rem;
}
.btn-big {
  font-size: var(--fs-regular);
  font-weight: 600;
  padding: 1.5rem 10rem;
}
.btn-line-primary {
  color: var(--clr-primary500) !important; 
  border: 1px solid var(--clr-primary400);
}
.btn-line-gray {
  color: var(--clr-gray600);
  border: 1px solid var(--clr-gray400);
}
.btn-line-black {
  color: var(--clr-gray600);
  border: 1px solid var(--clr-gray500);
}
.btn-line-white {
  color: #fff !important;
  border: 1px solid #fff;
}
.btn-line-white:hover {
  background: #fff;
  border: 1px solid transparent !important;
	color: var(--clr-primary500) !important;
}
.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;
}
.btn-fill-linear {
	background-image: linear-gradient(to right, #10d399 0%, #0dc38d 50%, var(--clr-turkey) 100%);
	background-size: 200% auto;
	transition: 0.5s;
	border: none;
	color: #fff !important;
	position: relative;
	z-index: 0;
}
.btn-fill-linear:hover {
	background-position: right center;
}
.btn-fill-linear-blue {
  background: linear-gradient(135deg, var(--clr-cfblue-deep), var(--clr-turkey));
  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-tit-side {
  padding: 0.8rem 2.8rem;
}
.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;
  width: 3rem;
  height: 3rem;
  text-align: center;
  background: var(--clr-gray100);
  color: var(--clr-gray400);
  border-radius: 100%;
  position: relative;
}
.btn-close::before {
  content: '\e921';
  color: inherit;
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.btn-down::before {
	content: '\eb7c';
	margin-right: 0.5rem;
	vertical-align: middle;
}
.wrt-date::before,
.btn-date::before {
  content: '\e9a0';
  margin-right: 0.5rem;
	vertical-align: middle;
}
.btn-srch {
  border: 1px solid var(--clr-gray400);
}
.btn-srch::before {
  content: '\e97a';
  font-size: var(--fs-regular);
	vertical-align: middle;
}
.btn-join::before {
	content: '\e9f7';
	margin-right: 0.5rem;
	vertical-align: middle;
}
.btn-my::before {
	content: '\e963';
	margin-right: 0.5rem;
}
.btn-photo::before {
	content: '\ea4b';
	vertical-align: middle;
	font-size: var(--fs-regular);
}
.btn-grp {
	display: flex;
	align-items: center;
	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-ok {
  background: var(--clr-gray100);
  color: var(--clr-cfblue-deep);
  font-weight: 500;
  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;
}
.ricon {
  font-size: var(--fs-xsmall);
  color: var(--clr-gray300);
  margin-right: 0.5rem;
  vertical-align: baseline;
}
.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-bottom: 2rem;
}
.area-tit {
  font-size: var(--fs-xlarge);
  font-weight: 700;
}
.area-tit-side-btn {
  border: 1px solid var(--clr-gray600);
  color: var(--clr-gray600);
  padding: 0.8rem 2.8rem;
}
.area-tit + .btn {
	margin: 0;
}
.congrp-tit {
  font-size: var(--fs-title);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 5rem;
}
.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);
}
.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: var(--clr-primary600); }
  100% { background: var(--clr-navy); }
}
/* ******************** 최상단 띠배너 header-banner ******************** */
#header-banner {
	position: relative;
	height: 60px;
}
#header-banner > img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}
#header-banner img.h-banner-img-m {
	display: none;
}
#header-banner .h-banner-txt {
	position: relative;
	left: 50%;
	transform: translatex(-50%);
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 120rem;
	max-width: 92%;
	padding-left: 17vw;
	box-sizing: border-box;
	gap: 2rem;
}
#header-banner .h-banner-txt p {
	color: #fff;
	font-size: var(--fs-normal);
	font-weight: 400;	
}
#header-banner p > span {
	color: #ffe792;
}
#header-banner .h-banner-txt p:first-child::after {
	content: '';
	display: inline-block;
	width: 4px;
	height: 4px;
	background: #fff;
	border-radius: 100%;
	vertical-align: middle;
	margin-left: 2rem;
}

/* ******************** header ******************** */
#header {
  position: sticky;
  top: 0;
  left: 0;
  background: #fff;
  width: 100%;
  z-index: 501;
  box-shadow: var(--shadow-light);
}
#header .h-top {
  height: 7rem;
  border-bottom: var(--line-base);
}
#header .container {
  height: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#header .sear-util-wrap {
	width: calc(100% - 210px);
	text-align: right;
	justify-content: flex-end;
}
#header .util {
  display: flex;
  align-items: stretch;
  margin-left: 4rem;
}
#header .util-m { display: none; }
#header .searchbar {
	background: var(--clr-gray100);
	height: 4rem;
	padding: 0 2rem;
	font-size: var(--fs-xsmall);
	color: var(--clr-gray300);
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	width: 30rem;
	max-width: 45%;
	box-sizing: border-box;
	border-radius: 2rem;
}
#header .searchbar input {
	border: none;
	width: 100%;
	font-size: var(--fs-small);
}
#header .searchbar input:focus {
	background: transparent !important;
}
#header .searchbar i {
  font-size: var(--fs-medium);
  color: var(--clr-gray600);
  cursor: pointer;
}
#header .util a {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--clr-black);
  padding: 0.6rem 1.5rem;
  margin: 0 0.2rem;
  box-shadow: none;
}
#header .util a:last-child {
  margin-right: 0;
}
#header .util .btn-fill-primary {
  color: #fff;
  border: 1px solid var(--clr-primary400);
}
#header .h-btm {
  height: 5rem;
  font-size: var(--fs-regular);
  font-weight: 500;
  color: var(--clr-black);
}
#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: '\e9f5';
	margin-right: 0.2em;
	font-weight: 400;
}
#gnb {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0 3%;
  flex-grow: 1;
}
#gnb > li {
  height: inherit;
  padding: 0 2rem;
/*  margin-right: 6rem;*/
}
#gnb > li a {
  height: inherit;
  display: block;
}
.h-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 1rem;
  margin-right: 1rem;
}
.h-menu-btn .menu-icon .em-wrap {
  display: inline-block;
  width: 2.4rem;
  height: 1.4rem;
  box-sizing: border-box;
  position: relative;
}
.h-menu-btn .menu-icon .em-wrap em {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 2px;
  background: var(--clr-black);
}
.h-menu-btn .menu-icon .em-wrap em:nth-child(1) { top: 0; }
.h-menu-btn .menu-icon .em-wrap em:nth-child(2) { top: 50%; }
.h-menu-btn .menu-icon .em-wrap em:nth-child(3) { top: 100%; }
#header .h-menu-all {
  position: absolute;
  width: 100%;
  background: var(--clr-gray100);
  border-top: var(--line-base);
  box-shadow: 0 30px 40px rgba(0,0,0,0.1);
  display: none;
}
#header .menu-all-list {
  display: table;
  table-layout: fixed;
  width: 100%;
}
#header .menu-all-list a {
	display: block;
	transition: 0.2s;
}

#header .menu-all-list > li {
  display: table-cell;
  width: calc(100% / 6);
  border-right: var(--line-base);
  padding: 3rem 2rem;
  transition: 0.2s;
}
#header .menu-all-list > li:first-child {
  border-left: var(--line-base);
}
#header .menu-all-list > li:hover {
	background: #fff;
}
#header .menu-all-list > li ul {
	width: 100%;
	display: flex;
	flex-direction: column;
}
#header .menu-all-list > li ul li {
	width: inherit;
	padding: 0.5rem 0;
	box-sizing: border-box;
	color: var(--clr-gray600);
	font-size: var(--fs-normal);
}
#header .menu-all-list > li ul li:hover a {
  color: var(--clr-primary500);
  font-weight: 500;
}
#header .menu-all-list > li strong {
  display: block;
  font-size: var(--fs-regular);
  font-weight: 700;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: var(--line-base);
}
#header .menu-all-list > li strong i { display: none; }
#header .menu-all-list > li:has(.menu-lec) {
  width: 40%;
}
#header .menu-all-list .menu-lec {
  flex-direction: row;
  flex-wrap: wrap;
}
#header .menu-all-list .menu-lec li {
	width: 50%;
}
#header .h-menu-btn.active .menu-icon em {
  transition: 0.3s;
}
#header .h-menu-btn.active .menu-icon em:nth-of-type(1) {
  transform: rotate(45deg);
  top: 50%;
}
#header .h-menu-btn.active .menu-icon em:nth-of-type(2) {
  display: none;
}
#header .h-menu-btn.active .menu-icon em:nth-of-type(3) {
  transform: rotate(-45deg);
  top: 50%;
}
/*#header .sns-icons {*/
/*  margin-right: 4rem;*/
/*}*/
/*#header .sns-icons > li {*/
/*  width: 3.2rem;*/
/*  height: 3.2rem;*/
/*  border-radius: 100%;*/
/*  overflow: hidden;*/
/*  position: relative;*/
/*}*/
/*#header .sns-icons > li img {*/
/*  width: 100%;*/
/*  position: absolute;*/
/*  top: 50%;*/
/*  left: 50%;*/
/*  transform: translate(-50%,-50%);*/
/*}*/
/*#header .sns-icons > li.sns-kakao {*/
/*  background: #FAE100;*/
/*}*/
/*#header .sns-icons > li.sns-kakao img {*/
/*  width: 90%;*/
/*}*/

.location {
  font-size: var(--fs-xsmall);
  font-weight: 500;
  color: #fff;
}
.location .flex-box {
  justify-content: flex-end;
}
.location li::after {
  content: '\e940';
  margin: 0 0.5rem;
}
.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;
	background: #fff;
	width: 100%;
	z-index: 502;
	text-align: right;
	box-shadow: 0 100px 50px rgba(0,0,0,0.1);
	display: none;
}
.srch-form .container {
	padding: 3rem 0 5rem;
}
.srch-form .btn-close {
	background: var(--clr-gray300);
	color: #fff;
}
.srch-form .automaker-wrap {
	text-align: center;
	margin: 2rem 0;
	position: relative;
	left: 50%;
	transform: translatex(-50%);
	width: 50%;
}
/* autoMakerTop datalist에서 ul리스트로 변경 */
ul#autoMakerTop,
ul#autoMaker {
	max-height: unset;
	background: #fff;
	padding: 0 !important;
	box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}
ul#autoMakerTop li,
ul#autoMaker li {
	cursor: pointer;
	font-size: var(--fs-normal);
	font-weight: 500;
	padding: 1rem;
	padding-left: 2rem;
}
ul#autoMakerTop li:hover,
ul#autoMaker li:hover {
	background: var(--clr-primary50);
	color: var(--clr-black);
	font-weight: 600;
}
ul#autoMakerTop li::before,
ul#autoMaker li::before {
	content: '\e97a';
	margin-right: 1rem;
	vertical-align: middle;
	font-size: 0.9em;
	font-weight: 500 !important;
	background: var(--clr-gray600);
	color: #fff;
	padding: 0.5em;
	border-radius: 100%;
}
.srch-form  #autoMakerTop,
#autoMaker {
	position: absolute;
	left: 0;
	max-height: 30rem;
	box-shadow: var(--shadow-deep);
	z-index: 100;
	padding: 1rem;
	text-align: left;
	box-sizing: border-box;
	width: 100%;
}
.srch-form #autoMakerTop option {
  font-size: var(--fs-normal);
  font-weight: 500;
  color: var(--clr-gray500);
}
.srch-form #autoMakerTop option:hover {
  color: var(--clr-primary500);
}
.srch-form .automaker-wrap input,
.srch-form .automaker-wrap input[type=text] {
/*	width: calc(100% - 8rem) !important;*/
	width: 100%;
	height: 7rem;
	border: none;
	border-bottom: 2px solid var(--clr-black);
	background: none;
	border-radius: 0;
	font-size: 2.2rem;
	padding: 1rem;
	padding-left: 2rem;
}
/* 일단 돋보기 빼기 */
.srch-form .automaker-wrap .btn-srch { 
/*	height: 7rem;*/
/*	width: 7rem;*/
/*	border: none;*/
/*	border-bottom: 2px solid var(--clr-primary400);*/
	display: none;
}
.srch-form .automaker-wrap .btn-srch::before {
	font-size: var(--fs-xlarge);
}
.srch-form .srch-keyword {
	text-align: left;
	display: flex;
	align-items: stretch;
	gap: 2rem;
	margin-top: 5rem;
}
.srch-form .srch-keyword > div {
	width: 50%;
	box-shadow: var(--shadow-light);
}
.srch-form .srch-keyword ul {
	justify-content: flex-start;
	flex-wrap: wrap;
	margin-top: 3rem;
	gap: 1rem 0;
}
.srch-form .srch-keyword ul > li {
	width: 48%;
}
.srch-form .srch-keyword ul > li a {
	font-size: var(--fs-normal);
}
.srch-form .srch-latest ul {
	gap: 0;
}
.srch-form .srch-latest ul > li {
	width: unset;
	padding: 0.5em 1em;
	border-radius: 5rem;
	margin-right: 1rem;
	background: var(--clr-primary50);
}
.srch-form .srch-latest ul > li::before { display: none; }
.srch-form .srch-latest ul > li a {
	display: block;
}



/* ******************** footer ******************** */
#footer {
	padding: 4rem 0;
	background: var(--clr-gray600);
}
#footer .logo {
	filter: brightness(0) invert(1);
	opacity: 0.8;
}
#footer .f-menu-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 2rem;
}
#footer .f-menu {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
#footer .f-menu li {
	border-right: var(--line-base);
	line-height: 1;
	margin-right: 2rem;
	padding-right: 2rem;
	text-wrap: nowrap;
}
#footer .f-menu li:last-child {
	margin-right: 0;
	padding-right: 0;
	border-right: 0;
}
#footer .f-menu li>a {
	font-weight: 600;
	color: #fff;
	transition: 0.5s;
}
/*#footer .f-menu li>a.potxt {*/
/*  font-weight: 600;*/
/*  color: var(--clr-gray600);*/
/*}*/
#footer .f-info {
	margin-top: 4rem;
}
#footer .f-info > p {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 80rem;	
}
#footer .f-info span {
	font-size: var(--fs-small);
	font-weight: 300;
	color: var(--clr-gray200);
	display: inline-block;
}
#footer .f-info > p:nth-child(2) {
	width: 68rem;
}
#footer .f-info > p:nth-child(3) {
	width: 51rem;
}
#footer .f-info > p:last-child {
	display: block;
	font-size: var(--fs-small);
	font-weight: 500;
	color: var(--clr-gray500);
	margin-top: 2rem;
}
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 {
	content: '\e9f3';
	margin-right: 0.5rem;
}

/* 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: table;
  table-layout: fixed;
  width: 100%;
  margin: 2rem 0;
}
.list-with-tabs li {
  display: table-cell;
  width: 50%;
  text-align: center;
}
.list-with-tabs li .btn {
  padding: 1.4rem 3rem;
  display: block;
  border-radius: 0;
  font-size: var(--fs-regular) !important;
  color: var(--clr-gray400);
}


/* pager */
.pager-wrap {
  margin: 6rem 0;
}
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.btn-pager {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xsmall);
  color: var(--clr-gray300);
  width: 3rem;
  height: 3rem;
  border: 1px solid transparent;
  transition: 0.3s;
}
.btn-pager:hover {
  color: var(--clr-gray600);
  border: 1px solid var(--clr-gray600);
}
.btn-pager.on {
  background: var(--clr-gray600);
  color: #fff;
}
.btn-pager.btn-prev,
.btn-pager.btn-next {
  font-size: var(--fs-normal);
  color: var(--clr-gray500);
  border: var(--line-base);
	position: relative;
}
.btn-pager.btn-prev i,
.btn-pager.btn-next i {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.btn-pager.btn-first i {
	padding-left: 2px;
}
.btn-pager.btn-last i {
	padding-right: 2px;
}
.btn-pager.btn-first::before,
.btn-pager.btn-last::before {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	line-height: 1;
}
.btn-pager.btn-first::before {
	content: '\e93b';
	left: calc(50% - 3px);
}
.btn-pager.btn-last::before {
	content: '\e93e';
	left: calc(50% + 3px);
}

/* accordion style */
.accordion-btn, .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;
}
.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-gray500);
	font-weight: 400;
	text-align: left;
	border: var(--line-base);
	margin: 2rem 0;
}
.comment-back {
	background: var(--clr-gray100);
	font-weight: 400;
}
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;
}
.top-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.top-box {
  background: var(--clr-gray100);
  padding: 3rem 3.4rem;
  margin-bottom: 6rem;
}
.top-box h4 {
  font-size: var(--fs-medium);
  font-weight: 700;
}
.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 */
.box-line-tit .ricon {
  font-size: inherit;
  font-weight: 400;
  margin-right: 1rem;
} /* line-box-tit .ricon */
.box-primary {
  border: 1px solid var(--clr-primary400);
  background: var(--clr-primary100);
  padding: 2rem 2.4rem;
}
.box-primary > p {
  color: var(--clr-gray600);
}
.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;
}
.login-sns button.btn-naver {
	background: #03c75a;
	color: #fff !important;
	margin: 1rem 0 0;
}
.login-sns button.btn-kakao {
	background: #FFEB00;
	color: var(--clr-gray600) !important;
}
.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(0,0,0,0.3);
  z-index: 900;
  display: none;
}
.pop {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: #fff;
  box-shadow: var(--shadow-deep);
	border-radius: var(--edge);
  min-width: 50rem;
  max-width: 80%;
  max-height: 80%;
  box-sizing: border-box;
}

.popCloseBtn {
  position: absolute;
  top: -1rem;
  right: -1rem;
  background: #fff;
  color: var(--clr-gray500) !important;
	box-shadow: var(--shadow-light);
}
.pop-header {
  border-bottom: var(--line-base);
  padding: 3rem 0 2rem;
  text-align: center;
}
.pop-header h3,
.pop-header h4,
.pop-header h5,
.pop-header h6 {
  font-size: var(--fs-large);
  font-weight: 700;
  color: var(--clr-black);
}
.pop-con-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
	flex-wrap: wrap;
  margin: 2rem 0;
  border-top: var(--line-base);
  padding-top: 2rem;
}
.popup.pop-alert {
  text-align: center;
}
.popup .pop-con {
  font-size: var(--fs-normal);
  margin: 4rem;
}
.popup .pop-con .btn {
  margin: 0 1rem;
  background: var(--clr-primary100);
  font-size: var(--fs-xsmall);
  font-weight: 500;
  color: var(--clr-primary600);
  padding: 0.5rem 1rem;
  text-align: center;
  border: none !important;
  text-wrap: nowrap;
}
.popup .pop-con > div,
.popup .pop-con > ul {
  margin-bottom: 4rem;
}
.popup .pop-con > div:last-child,
.popup .pop-con > ul:last-child {
  margin-bottom: 0;
}
.popup .pop-comment {
  text-align: center;
  font-size: var(--fs-regular);
	color: var(--clr-gray600);
}
.popup .pop-list {
  text-align: left;
}
.popup .pop-list li {
	margin-bottom: 1rem;
	color: var(--clr-gray600);
	display: flex;
	align-items: center;
}
.popup .pop-list li > strong {
	font-weight: 600;
	color: var(--clr-gray600);
}
.popup .pop-list li > strong::after {
	content: '|';
	font-weight: 100;
	color: var(--clr-gray300);
	margin: 0 1rem;
}
.popup .pop-list li:not(.caption) p:not(.caption) {
	font-weight: 400;
	display: inline-block;
	font-size: var(--fs-normal);
	color: var(--clr-gray600);
}
.pop-con-btns .btn {
	padding: 1.2rem 5rem;
}

/* ****** 메인 공지용 이미지 팝업 ****** */
/*.popup-notice {*/
/*	position: fixed;*/
/*	top: 15rem;*/
/*	left: 5%;*/
/*	z-index: 300;*/
/*	box-shadow: 0 2px 20px rgba(0,0,0,0.25);*/
/*	box-sizing: border-box;*/
/*	background: #fff;*/
/*	border-radius: var(--edge);*/
/*	overflow: hidden;*/
/*	width: unset;*/
/*	height: unset;*/
/*	display: none;*/
/*}*/
/*.popup-notice .popCloseBtn {*/
/*	top: 1rem;*/
/*	right: 1rem;*/
/*}*/
/*.popup-notice .pop-ni-img > img {*/
/*	display: block;*/
/*}*/
/*.popup-notice .pop-nt-close {*/
/*	background: var(--clr-gray600);*/
/*	color: #fff;*/
/*	padding: 1rem 2rem;*/
/*}*/
/*.popup-notice .pop-nt-close input[type=checkbox] { display: none; }*/
/*.popup-notice .pop-nt-close label { display: block; cursor: pointer; }*/
#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 2px 20px rgba(0,0,0,0.25);
	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 {
  position: relative;
}
.input-datalist input,
.input-datalist datalist {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.input-datalist input {
  top: 0;
  height: 100%;
}

/* ******************** 슬라이드 Swiper ******************** */
.swiper-wrapper {
/*  transition-timing-function: linear;*/
}

/* ******************** 이벤트 - 카카오배너 ******************** */
.sec-banner {
	padding: 0;
	background: #FAE100;
}
.sec-banner .container {
	border-radius: var(--edge);
}
.banner-kakao {
	background: #FAE100;
	padding: 3rem 3.4rem;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.banner-kakao .channel {
	height: inherit;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.banner-kakao .channel h4 {
	font-size: var(--fs-large);
	font-weight: 700;
	margin: 0 2rem;
	line-height: 1.2;
}
.banner-kakao .channel p {
	display: inline-block;
	font-size: var(--fs-regular);
	color: #3B1E1E;
	font-weight: 600;
	margin-left: 2rem;
}
.banner-kakao .channel-qr {
	background: #fff;
	width: 6rem;
	height: 6rem;
	margin-left: 4rem;
	padding: 1rem;
}
.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: "\e964";
	margin-left: 0.5rem;
	font-size: 1.1em;
	font-weight: 400;
	color: var(--clr-gray400);
}

.root_daum_roughmap .cont {
	display: none;
}

/* ********** 오른쪽 사이드 멀티바? 플로팅 메뉴 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;
}
.floating-menu .fm-consult {
	padding: 15px 10px;
	background: url('/images/comm/quick_top.png') bottom -100% right -30% no-repeat;
}
.floating-menu .fm-consult p {
	color: var(--clr-black);
	font-weight: 600;
	line-height: 1.3;
}
.floating-menu .fm-consult p > b {
	display: block;
	font-size: var(--fs-title);
}
.floating-menu .fm-consult p:last-child {
	margin-top: 0.8rem;
	font-weight: 400;
	color: var(--clr-gray600);
}
.floating-menu .fm-consult p:last-child small {
	color: var(--clr-gray400);
}
.floating-menu .fm-banner {
	padding: 0;
	cursor: pointer;
}
.floating-menu .fm-banner img {
	display: block;
}
.floating-menu .fm-btm {
	padding: 0;
	border-radius: unset;
	background: none;
	box-shadow: none;
	overflow: unset;
	display: flex;
	align-items: center;
	gap: 10px;
	height: 50px;
}
.floating-menu .fm-btm > div {
	border-radius: 12px;
	box-sizing: border-box;
	padding: 10px;
	display: flex;
	cursor: pointer;
	box-sizing: border-box;
	height: 100%;
}
.floating-menu .fm-btm .quick-kakao {
	align-items: center;
	justify-content: center;
	background: #FAE100;
	gap: 5px;
	flex: auto;
}
.floating-menu .fm-btm .quick-kakao img {
	width: 30px;
	height: 30px;
}
.floating-menu .fm-btm .quick-kakao p {
	font-size: var(--fs-mini);
	font-weight: 500;
	color: #020303;
	line-height: 1.2;
}
.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;
}
.floating-menu .fm-btm .go-to-top {
	flex: 0 0 50px;
	transition: 0.3s;
}
.floating-menu .fm-btm .go-to-top:hover {
	box-shadow: unset;
	border: 1px solid transparent;
	background: var(--clr-black);
	color: #fff;
}
.floating-menu-m {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 10;
}
.floating-menu-m .fm-banner {
	background: linear-gradient(90deg, #41d995, #3f6ec3);
	font-size: var(--fs-small);
	font-weight: 600;
	color: #fff;
	padding: 6px 3%;
	border-radius: 12px 12px 0 0;
	position: relative;
	z-index: 0;
}
.floating-menu-m .fm-banner::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('/images/comm/floating_banner_m.png') bottom 50% right 18% no-repeat;
	z-index: -1;
}
.floating-menu-m .fm-banner > a {
	display: flex;
	align-items: center;
	justify-content: space-between;	
}
.floating-menu-m .fm-banner > a b {
	font-size: var(--fs-mini);
	background: var(--clr-black);
	padding: 5px 12px;
	border-radius: 8px;
	text-wrap: nowrap;
}
.floating-menu-m .quick-btm {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 5px 3%;
	background: var(--clr-gray100);
}
.floating-menu-m .quick-btm > a {
	flex: 1 0 24%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.06);
	font-size: var(--fs-xsmall);
	color: var(--clr-gray600);
	padding: 6px;
	box-sizing: border-box;
	border: 1px solid transparent;
	min-width: 60px;
}
.floating-menu-m .quick-btm > a img {
	width: 23px;
}
.floating-menu-m .go-to-top {
	width: 45px;
	height: 45px;
	position: absolute;
	bottom: 18rem;
	right: 2rem;
}
.floating-menu-m .quick-btm > a.on {
	background: var(--clr-primary50);
	color: var(--clr-primary400);
	font-weight: 600;
	border: 1px solid var(--clr-primary400);
}


/* ****************************** 반응형 ****************************** */

/* ********** for Tablet ***********/
@media all and (min-width:1024px) and (max-width:1279px) {
	#header-banner .h-banner-txt { gap: 1rem; }
	#header-banner .h-banner-txt p { font-size: 15px; }
	#header-banner .h-banner-txt p:first-child::after { margin-left: 1rem; }
}
@media all and (min-width:768px) and (max-width:1023px) {
	html { font-size: 9px; }

	#header .h-menu-all .container { max-width: 96%; }
	#header .menu-all-list .menu-lec { display: unset; }
	#header .menu-all-list .menu-lec li { width: 100%; }
	#header .menu-all-list > li:has(.menu-lec) { width: calc(100% / 6); }
	.banner-kakao .channel p {
		display: block;
		margin-left: 0;
		margin-top: 1rem;
	}
	#header .searchbar {
		width: unset;
	}
	.logo > a .logo-txt > p:not(.logo-name) {
		font-size: 11px;
	}
	.logo > a .logo-txt .logo-name {
		font-size: 18px;
	}
	.logo > a .logo-txt .logo-en {
		font-size: 9px;
	}
	.logo img {
		width: 36px;
	}
	#header .sear-util-wrap {
		width: calc(100% - 200px);
	}
	#header .searchbar {
		width: 4rem;
		max-width: unset;
		padding: 0;
		justify-content: center;
	}
	#header .searchbar input {
		display: none;
	}
	#header-banner > img {
		object-position: -490px top;
	}
	#header-banner .h-banner-txt {
		padding-left: 0;
		gap: 1rem;
		margin-left: auto;
	}
	#header-banner .h-banner-txt p { font-size: 14px; }
	#header-banner .h-banner-txt p:first-child::after { margin-left: 1rem; }
}

/* ********** 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;
	}
	.logo > a .logo-txt > p:not(.logo-name) {
		font-size: 11px;
	}
	.logo > a .logo-txt .logo-name {
		font-size: 18px;
	}
	.logo > a .logo-txt .logo-en {
		font-size: 9px;
	}
	.logo img {
		width: 36px;
	}
	.page-title {
		margin-left: 0;
		font-size: var(--fs-subtitle);
	}
	.area-tit { font-size: var(--fs-large); }
	.box-line { padding: 1.5rem; }
	ul.comment, ul.list-info { padding: 1.5rem; }
	#header .sear-util-wrap {
		width: calc(100% - 185px);
	}
	#header .searchbar {
		width: 4rem;
		max-width: unset;
		padding: 0;
		justify-content: center;
	}
	#header .searchbar input, #header .h-top .util > a,
	#gnb, .h-menu-btn > span  { display: none; }
	#header .h-top .container , #header .h-btm .container {
		width: unset;
		max-width: unset;
	}
	#header .h-top, #header .h-btm { height: 7rem; }
	#header .h-top {
		flex: 0 0 calc(100% - 4rem);
		border-bottom: none;
	}
	#header .h-btm {
		flex: 0 0 4rem;
	}
	#header {
		display: flex;
		justify-content: space-between;
		padding: 0 4%;
		box-sizing: border-box;
		gap: 1rem;
	}
	.h-menu-btn {
		display:unset;
		margin-right: 0;
	}
	.srch-form {
		height: 100%;
		overflow-y: scroll;
	}
	.srch-form .container {
		height: 100%;
		box-sizing: border-box;
	}
	.srch-form .automaker-wrap {
		width: 90%;
		max-width:90%; 
	}
	#header .util-m {
		display: block;
		background: #fff;
		padding: 2rem 4%;
		border-bottom: 10px solid var(--clr-gray100);
	}
	#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;
	}
	#header .util-m .btn-wrap {
		display: flex;
		align-items: center;
		gap: 1rem;
	}
	#header .util-m .btn {
		font-size: var(--fs-regular);
		flex: 1 0 49%;
		margin-top: 0;
	}
	#header .util-m .btn:first-child {
		border: 1px solid var(--clr-gray500);
	}
	#header .h-menu-all {
		top: 7rem;
		left: 0;
		height: calc(100vh - 7rem);
		overflow-y: scroll;
		overflow-x: hidden;
		box-sizing: border-box;
		background: #fff;
	}
	#header .h-menu-all .container { max-width: 100%; display:unset; }
	#header .menu-all-list > li {
		display: table-row;
		padding: 0;
		width: 100%;
	}
	#header .menu-all-list > li strong {
		padding: 2rem 4%;
		margin-bottom: 0;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		cursor: pointer;
	}
	#header .menu-all-list > li strong i { display: inline-block; }
	#header .menu-all-list > li ul {
		padding: 1rem 0;
		background: var(--clr-gray100);
	}
	#header .menu-all-list > li ul > li { padding: 1rem 4%;}
	#header .menu-all-list .fold-btn-m.active i { transform: rotate(180deg); }
	#header .menu-all-list .fold-con-m { display: none; }
	#header .menu-all-list a::before {
		content: '•';
		display: inline-block;
		margin-right: 0.2em;
		color: var(--clr-gray300);
	}
	#header .menu-all-list > li ul li:hover a {
		color: var(--clr-primary400);
	}

	#header .util {
		margin-left: 0.5rem;
	}
	#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 {
		margin-top: 1rem;
	}
	#footer .f-info > p {
		display: unset;
		width: unset;
	}
	#footer .f-info > p span {
		margin-right: 1rem;
	}
	#footer .f-info > p span > em,
	#footer .f-menu .f-menu-m {
		display: none;
	}
	#footer .f-menu li:nth-child(4) {
		border-right: none;
		margin-right: 0;
		padding-right: 0;
	}
	#PopContainer {
		position: fixed;
		top: 7rem;
		background: rgba(0,0,0,0.5);
		padding: 2rem;
		grid-template-columns: repeat(10, 1fr);
		overflow-x: scroll;
		/* display: grid; */
		width: 100%;
		height: 100%;
		box-sizing: border-box;
	}
	.arrPopup-close input[type="checkbox"] {
		margin-right: 0.5rem;
	}
	.arrPopup {
		position: unset !important;
		margin-right: 1rem;
		background: none;
		box-shadow: none;
		max-width: fit-content;
	}
	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%;
	}
	.popup .pop-con {
		margin: 3rem;
	}
	.pop-con-btns .btn {
		padding: 1.2rem 4rem;
		text-wrap: nowrap;
	}
	.srch-form .srch-keyword {
		flex-direction: column;
	}
	.srch-form .srch-keyword > div {
		width: 100%;
	}
	.srch-form .srch-keyword > div:first-child {
		border-right: none;
		border-bottom: var(--line-base);
		padding-bottom: 3rem;
	}
	.mypage .login-sns {
		flex-direction: column;
	}
	.mypage .login-sns .btn {
		width: 100%;
		font-size: var(--fs-normal);
	}
	#header-banner {
		height: unset;
	}
	#header-banner img.h-banner-img-m {
		display: block;
		object-position: center;
		position: relative;
	}
	#header-banner img.h-banner-img-p, #header-banner .h-banner-txt { display: none; }
}
@media all and (min-width:481px) {
	.floating-menu-m { display: none !important; }
}
@media all and (max-width:480px) {
	.logo > a .logo-txt > p:not(.logo-name) {
		font-size: 10px;
	}
	.logo > a .logo-txt .logo-name {
		font-size: 17px;
	}
	.logo > a .logo-txt .logo-en {
		font-size: 8px;
		letter-spacing: -0.005em;
	}
	.logo img {
		width: 32px;
	}
	#footer .f-info>p span::after {
		display: none;
	}
	.pop-con-btns .btn {
		padding: 1.2rem 3rem;
	}
	.srch-form .automaker-wrap input {
		font-size: var(--fs-medium);
	}
	.srch-form .srch-favor ul > li {
		width: 100%;
	}
	.banner-kakao .channel h4 {
		font-size: var(--fs-regular) !important;
	}
	#footer .f-menu li {
		margin-right: 1rem; padding-right: 1rem;
	}
	#footer .f-info > p:last-child {
		font-size: var(--fs-xsmall);
	}
	.floating-menu { display: none !important; }
	#footer { padding: 4rem 0 15rem }
}
@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);
	}
}



/* ****************************** //반응형 ****************************** */