/* Import the color variables */
@import "variables.css";

/* =============================
    공통
============================= */

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	text-decoration: none;
	list-style: none;
}

html,
body {
	height: 100%;
	margin: 0;
	font-family: "Pretendard Variable", Pretendard, sans-serif;
	overflow-x: hidden;
	background-color: var(--color-background);
	color: var(--color-black);
	font-size: var(--size-14);
	font-weight: var(--weight-default);
}

body {
	display: flex;
	flex-direction: column;
	background-color: var(--color-backgroud);
}

#header {
	width: 100%;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 1000;
	background-color: var(--color-white);
}

.main {
	flex: 1;
}

footer {
	width: 100%;
	background-color: var(--color-white);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	bottom: 0px !important;
	gap: var(--gap-20);
	min-height: 200px;
}

h2 {
	font-size: var(--size-32);
	font-weight: var(--weight-strong);
}

h3 {
	font-size: var(--size-24);
	font-weight: var(--weight-strong);
}

h4 {
	font-size: var(--size-20);
	font-weight: var(--weight-default);
}

a:hover {
	color: var(--color-blue);
}

strong {
	font-size: 15px;
	font-weight: var(--weight-strong);
}

p {
	word-break: keep-all;
}

.scroll-top-btn {
	display: none;
	position: fixed;
	border: none;
	outline: none;
	cursor: pointer;
	bottom: 5vh;
	right: 20px;
	z-index: 99 !important;
	font-size: 14px;
	padding: 12px 20px;
	border-radius: 50%;
	font-weight: 600;
	color: var(--color-white);
	background-color: var(--color-primary);
	box-shadow: 0px 1px 10px 0px var(--color-gray);

	&:hover {
		background-color: var(--color-gray-600);
	}
}

.active {
	color: var(--color-blue);
}

@media (max-width: 768px) {
	.scroll-top-btn {
		bottom: 1vh;
	}

	footer {
		padding-top: var(--gap-50);
		padding-bottom: var(--gap-50);
	}
}

::-webkit-scrollbar {
	height: 8px;
}

/* =============================
  헤더
============================= */
.main-header__layer {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid var(--color-box-shadow);
}

.main-logo {
	width: 153px;
	height: 23px;
}

.header_resume-btn {
	padding: 0 10px;
	font-weight: var(--weight-bold);

	&:hover {
		color: var(--color-blue);
	}
}

.header_company-btn {
	color: var(--color-deep-gray) !important;

	&:hover {
		background-color: var(--color-backgroud-deep);
	}
}

.header_company-menu {
	display: none;
	position: absolute;
	width: max-content;
	margin-top: 10px;
	z-index: 99;
	border-radius: var(--radius-5);
	border: 1px solid var(--color-light-gray);
	background-color: var(--color-white);
}

.header_company-menu ul {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: left;
}

.header_company-menu ul li {
	width: 100%;

	&:hover {
		cursor: pointer;
		color: var(--color-blue);
		background-color: var(--color-backgroud);
	}
}

.header_company-menu ul li a,
.header_company-menu ul li button {
	padding: 10px var(--gap-20);
	width: 100%;
	display: block;
	text-align: start;
}

.header_company-login-box {
	&:hover {
		cursor: pointer;
		color: var(--color-black) !important;
	}
}

.question-btn {
	color: var(--color-deep-gray);
	gap: 10px !important;

	&:hover {
		color: var(--color-blue);
	}
}

.job-posting-btn {
	height: 24px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--size-20);
	font-weight: var(--weight-bold);
	padding-right: var(--gap-30);
	border-right: 1px solid var(--color-dark-gray);
}

.header-modal-hide-btn {
	position: absolute;
	left: 0;
	width: 20px;
	height: 40px;
	filter: brightness(0) saturate(100%) invert(32%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(89%);
}

.header-modal-hide-btn:hover {
	filter: invert(14%) sepia(100%) saturate(7493%) hue-rotate(222deg) brightness(101%) contrast(101%) !important;
}

.main-header__content,
.sub-header__content {
	width: 80%;
	min-height: 80px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--gap-20);
	padding: var(--gap-20) 0px;
	transition: all 0.5s ease-in-out !important;
}

.--slide-width {
	width: 80%;
}

.job-posting-list {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-left: 10px;
}

.job-posting-list li a {
	color: var(--color-deep-gray);

	&:hover {
		color: var(--color-blue);
	}
}

.panel_menu__layer {
	position: absolute;
	background-color: var(--color-white);
	box-shadow: 0 16px 16px rgba(55, 63, 87, 0.1);
}

.header-detail-modal__content {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: flex-start !important;
	justify-content: left !important;
	gap: 0px !important;
	padding: 0px 10vw !important;
}

.panel_menu {
	width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	color: var(--color-deep-gray);
}

.major {
	flex: 1;
	display: flex;
	flex-direction: column;
	height: 400px;
	gap: 10px;
	padding: var(--gap-20);
	border-left: 1px solid var(--color-light-gray);
	border-bottom: 1px solid var(--color-light-gray);
}

.structor {
	align-items: center;
	justify-content: center;
	height: 100%;
	border-left: none;
	background-color: var(--color-background-blue);
	word-break: keep-all;
}

.structor img {
	width: 150px;
	height: 149px;
	object-fit: cover;
}

.depth2 {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: left;
	gap: var(--gap-20);
	margin-top: 30px;
}

.depth2 li {
	padding: 0;
}

.minor,
.extra {
	position: absolute;
	bottom: var(--gap-50);
}

.extra {
	right: 22vw;
	font-size: var(--size-12);
	color: var(--color-deep-gray);

	&:hover {
		color: var(--color-blue);
	}
}

.header__dropdown-bottom {
	width: 100%;
	height: 80px;
	padding: 0px 20px;
	border-left: 1px solid var(--color-light-gray);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: left;
	gap: 50px;
}

.header__dropdown-sub-menu {
	min-width: 300px;
	background-color: #f5f9ff;
	height: 480px;
	position: relative;
}

.header__dropdown-sub-menu-btn {
	width: 100%;
	background-color: #f5f9ff;
	text-align: left;
	padding: 30px 40px;
	font-size: var(--size-16);
	font-weight: var(--weight-bold);
	border-bottom: 1px solid var(--color-light-gray);

	&:hover {
		background-color: #e8edff;
	}
}

.header-detail-modal__content li {
	padding: 0;
	background-color: var(--color-white);
}

.mobile-header-modal-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: left;
	padding: 40px 20px;
	gap: var(--gap-20);
	height: 91vh;
	width: 100%;
	font-size: 16px;
	overflow-y: auto;
}

.mobile-header-modal-content::-webkit-scrollbar {
	display: none;
	/* 스크롤바 숨기기 */
}

.mobile-header-modal-content-login-btn {
	width: 100%;
	padding: 20px 0;
	border-radius: var(--radius-5);
	background-color: var(--color-white);
	color: var(--color-black);
	border: 1px solid var(--color-light-gray);
	transition: all 0.3s ease-in-out;

	&:hover {
		background-color: var(--color-light-blue);
		border: 1px solid var(--color-light-blue);
		color: var(--color-white);
	}
}

.mobile-header-modal-content-divider {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: left;
	border-bottom: 1px solid #ccc;
	padding: 10px 0;
	margin-bottom: 20px;
}

.main-content__wrapper {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.find-id-result__content {
	align-items: flex-start !important;
	justify-content: left !important;
	gap: 10px !important;
	padding-bottom: var(--gap-20);
	border-bottom: 1px solid var(--color-light-gray);
}

.find-id-result__content li {
	list-style: circle;
	color: var(--color-deep-gray);
}

.structor_layer {
	position: absolute;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, white 80%, var(--color-background-blue) 50%);
}

/* =============================
  푸터
============================= */
footer {
	padding: 65px 0;
	background: #fff;
	color: #A6A6A6;
	word-break: keep-all;
	border-top: 1px solid #e0e0e0;
}

footer .footer-logo img {
	height: 24px;
}

footer .footer-inner {
	width: 1310px;
	max-width: 100%;
	padding: 0 20px;
}

.footer-nav-left button {
	color: var(--color-deep-gray);
	font-size: 16px;
	font-weight: 600;
}

.footer-cont div {
	color: #A6A6A6;
	font-size: 14px;
}

.footer-cont div span {
	display: inline-block;
	color: #6b6a6a;
	font-size: 16px;
}

.footer-cont .footer_bottom {
	align-items: flex-end;
}

.footer-cont .footer_bottom .sns_link {
	gap: 20px;
}

@media all and (max-width: 767px) {
	footer {
		padding: 40px 0 !important;
	}

	footer .footer-logo img {
		height: 20px;
	}

	.footer-nav {
		justify-content: flex-start;
	}

	.footer-cont {
		margin-top: 20px;
	}

	.footer-nav-left button,
	.footer-cont div,
	.footer-cont div span {
		font-size: 12px;
		line-height: 1.5;
	}

	.footer-cont .footer_bottom {
		gap: 5px;
		padding-bottom: 50px;
	}

	.footer-cont .footer_bottom p {
		align-items: flex-start;
		margin-top: 4px;
	}

	.footer-cont .footer_bottom p i {
		width: 20px;
		transform: scale(0.7);
		transform-origin: left center;
	}

	.footer-cont .footer_bottom .sns_link {
		flex-direction: column-reverse;
		gap: 8px;
	}

	.footer-cont .footer_bottom .sns_link img {
		height: 40px;
		margin-bottom: 0;
	}

	.footer-cont .footer_bottom .sns_link a:nth-of-type(1) img {
		height: 30px;
	}

	.footer-cont .footer_bottom .sns_link a:nth-of-type(2) img {
		height: 35px;
	}
}


/* =============================
  공통 메인
============================= */
.main-content__layer,
.main-ad__wrapper,
.main-search__layer {
	width: 95%;
	max-width: 1166px;
	margin: var(--gap-30);
}

.main-section__wrapper,
.main-search__wrapper,
.recruit-item__wrapper,
.detail-recruit-top__wrapper {
	border-radius: 10px;
	background-color: var(--color-white);
	box-shadow: 0px 1px 10px 0px var(--color-backgroud);
	margin-top: var(--gap-30);
	padding: var(--gap-30);
}

.main-content__top-layer {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 20px;
}

.main-section__wrapper {
	margin-top: 0px;
}

@media screen and (max-width: 768px) {
	.main-content__top-layer {
		padding: 0px 20px 40px;
	}

	.main-content__top-layer h3 {
		font-size: 20px;
	}
}

.aside__layer {
	height: 100%;
}

.aside__wrapper {
	position: sticky;
	top: 10px;
}

.main-aside__wrapper {
	width: 270px;
	padding: var(--gap-20);
	border-radius: 10px;
	background-color: var(--color-white);
	box-shadow: 0px 1px 10px 0px var(--color-backgroud);
	position: sticky;
	top: 100px;
	z-index: 5;
}

.main-aside__list,
.main-aside__sub-list {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: left;
}

.main-aside__list>li {
	padding: var(--gap-20);
	width: 100%;
	border-top: 1px solid var(--color-box-shadow);
}

.main-aside__list>li button {
	font-size: var(--size-16);
	font-weight: var(--weight-strong);
	color: var(--color-black);

	&:hover {
		color: var(--color-light-blue);
	}
}

.main-aside__sub-list {
	padding-top: var(--gap-20);
}

.main-aside__sub-list>li button {
	font-size: var(--size-12);
	color: var(--color-gray);
}

.main-aside__list>li.active>button {
	color: var(--color-light-blue);
}

.main-search__wrapper {
	padding: 0px !important;
	border: 1px solid var(--color-light-gray);
}

.main-section__header,
.main-search__header {
	width: 100%;
	padding-bottom: var(--gap-20);
	border-bottom: 1px solid var(--color-light-gray);
}

.main-search__header {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding-bottom: 0px;
	justify-content: space-between;
	border-bottom: none;
}

.main-search__header .search__item {
	flex: 1;
	min-width: 300px;
	height: 68px !important;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--gap-20);
	padding-left: var(--gap-20);
	border-right: 1px solid var(--color-light-gray);
}

.main-search__header .search__item input {
	width: 80%;
	padding: 10px;
}

.main-search__header .search__item:last-child {
	border-right: none;
	justify-content: right;
	padding-right: var(--gap-20);
}

.search__item .search-btn,
.search__item .reset-btn {
	width: 130px;
	height: 35px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 10px;
	font-size: var(--size-12);
	border-radius: var(--radius-5);
}

.search__item .search-btn {
	color: var(--color-white);
	background-color: var(--color-pastel-deep-blue);

	&:hover {
		background-color: var(--color-blue);
	}
}

.search__item .reset-btn {
	color: var(--color-gray);
	background-color: var(--color-light-gray);

	&:hover {
		background-color: var(--color-dark-gray);
	}
}

.--search-location {
	color: var(--color-blue);
	font-weight: var(--weight-bold);
}

@media (max-width: 1040px) {
	.main-search__wrapper {
		border: none;
	}

	.main-search__header .search__item,
	.--search-result__desc {
		border: 1px solid var(--color-light-gray) !important;
	}
}

.main-section__header p {
	color: var(--color-gray);
}

.main-article__wrapper {
	width: 100%;
	margin-top: var(--gap-50);
	display: flex;
	align-items: center;
	justify-content: center;
}

.main-article__wrapper img {
	width: 588px;
	height: 100%;
}

.main-ad__wrapper {
	background-color: var(--color-light-gray);
	height: 150px;
}

.main-ad__wrapper img {
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.main-footer__items,
.main-footer__items ul {
	gap: var(--gap-30) !important;
}

.main-footer__items ul li {
	font-weight: var(--weight-thin);
	font-size: var(--size-14);
	color: var(--color-dark-gray);

	&:hover {
		color: var(--color-blue);
	}
}

.main-footer__items ul li strong {
	font-size: var(--size-14);
}

.main-footer__desc {
	font-weight: var(--weight-thin);
	font-size: var(--size-12);
	color: var(--color-dark-gray);
}

.--common-empty__list {
	width: 100%;
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	border-bottom: none !important;
	padding: var(--gap-50);
	font-size: var(--size-16);
	color: var(--color-deep-gray);
	text-align: center;
}

/* 개인/기업회원 사이드 메뉴 */
.common-nav__layer {
	height: 1083px;
	background-color: var(--color-white);
	width: 250px;
	box-shadow: 0px 1px 5px 0px var(--color-backgroud-gray);
	border-radius: var(--radius-10);
	position: sticky;
	top: 0px;
}

.common-nav__wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: var(--gap-50) var(--gap-20);
	width: 100%;
	gap: var(--gap-20);
	position: sticky;
	top: 0px;
}

.common-nav__content {
	width: 100%;
	display: flex;
	padding-top: var(--gap-20);
	flex-direction: column;
	align-items: flex-start;
	justify-content: left;
	gap: var(--gap-20);
	position: sticky;
	top: 0;
}

.common-nav__content li {
	display: flex;
	flex-direction: row;
	align-items: center !important;
	justify-content: center !important;
	gap: var(--gap-20);
	font-size: var(--size-16);
}

.common-nav__content li a {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
}

.common-nav__btn {
	background-color: var(--color-dark-gray);
	color: var(--color-light-gray);
	padding: var(--gap-20) 0px;
	width: 100%;
	border-radius: var(--radius-10);

	&:hover {
		background-color: var(--color-pastel-deep-blue);
		color: var(--color-white);
	}
}

.common-nav__ad {
	width: 100%;
	height: 120px;
}

.common-nav__ad img {
	width: 100%;
	height: 100%;
}

/* 기업회원 오른쪽 사이드 상단 */
.common-aside__header {
	margin: var(--gap-20);
	padding: var(--gap-20) var(--gap-30);
	background-color: var(--color-white);
	border-radius: var(--radius-10);
	box-shadow: 0px 1px 5px 0px var(--color-backgroud-gray);
	display: flex;
	flex-direction: row;
	gap: var(--gap-20);
	position: sticky;
	top: 10px;
	transition: all 0.5s ease-in-out;
	flex-wrap: wrap;
	z-index: 3;
}

.common-aside__header>button {
	min-width: 116px;
}

.--notice-bell {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	cursor: pointer;
	position: relative;
	width: max-content;
	padding: 5px;
}

.--notice-bell.--header-menu {
	margin-right: var(--gap-20);
	padding: 10px;
	border-radius: 50%;
	background-color: var(--color-backgroud-ad);
}

.--notice-bell__img {
	width: 28px !important;
	height: 28px !important;
}

.--notice-count {
	position: absolute;
	right: 2px;
	top: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	padding-top: 1px;
	color: var(--color-white);
	background-color: var(--color-dark-gray);
	z-index: 1;
}

.--notice-count.--red-bg {
	background-color: var(--color-red);
}

.--header-user-btn {
	min-width: 130px;
	padding: 10px;
	border-radius: 25px;
	background-color: var(--color-backgroud-ad);
}

.--header-profile-img {
	width: 28px !important;
	height: 28px !important;
	border-radius: 50%;
	background-color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	object-fit: cover;
}

.--header-user-modal {
	width: 100%;
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	z-index: 99;
	margin-top: 5px;
	padding: 10px 0px;
	border-radius: var(--radius-10);
	background-color: var(--color-backgroud-ad);
}

.--header-user-modal li {
	width: 100%;
	list-style: disc;
	color: var(--color-deep-gray);
}

.--header-user-modal li button:hover {
	color: var(--color-blue);
}

.--header-user-logout-btn {
	width: 110px;
	height: 27px;
	border-radius: var(--radius-10);
	text-align: center;
	font-weight: var(--weight-thin);
	color: var(--color-deep-gray);
	background-color: var(--color-white);
}

@media (max-width: 1040px) {
	.common-aside__header {
		width: 175px;
		flex-wrap: wrap;
	}
}

/* =============================
  공통 모달
============================= */
.main-form__wrapper {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	flex-direction: column;
	justify-content: center;
	align-items: center;

	width: 80%;
	max-width: 768px;
	margin: 0;
	border-radius: 10px;
	padding: 40px;

	border: none;
	background-color: var(--color-white);
	box-shadow: 0px 0.5px 10px 0px var(--color-box-shadow);

	z-index: 90;

}

.main-form__header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding-bottom: var(--gap-20);
}

.main-form__header h3,
.main-form__content h3 {
	font-weight: var(--weight-strong);
	font-size: var(--size-20);
	text-align: center;
	color: var(--color-text-primary);
}

.main-form__content {
	max-height: 500px;
	overflow-y: auto;
}

.policy_page {
	padding: var(--gap-20);
}

.pop-closer {
	font-size: var(--size-24) !important;

	&:hover {
		color: var(--color-blue);
	}
}

/* =============================
  로그인
============================= */
.main-login__header {
	display: flex;
	align-items: center;
	justify-content: end;
	margin-bottom: var(--gap-50);
}

.main-login__header a {
	padding-left: 10px;

	color: var(--color-gray);

	&:hover {
		color: var(--color-dark-gray);
	}

	&:first-child {
		padding-right: 10px;
		border-right: 1px solid var(--color-light-gray);
	}
}

.member-logo__wrapper {
	margin-bottom: 20px;
}

.login-btn__wrapper {
	max-width: 350px;
	margin: 20px 30px;
	color: var(--color-dark-gray);
	gap: calc(var(--gap-50) * 2) !important;
}

.login-btn__wrapper button {
	flex: 1;
	font-size: var(--size-20);
}

.login-btn__wrapper button.active {
	color: var(--color-blue);
	text-decoration: underline;
	text-underline-offset: var(--gap-20);
	text-decoration-thickness: 2px;
}

.common-login__wrapper {
	max-width: 350px;
}

.login-security__wrapper {
	width: 100%;
	justify-content: right !important;
	position: relative;
	bottom: -6px;
}

.login-security__wrapper p {
	margin-bottom: 5px;
	color: var(--color-gray);
}

.password__layer,
.search__layer {
	position: relative;
	display: inline-block;
}

.password__layer input,
.search__layer input {
	padding-right: var(--gap-50) !important;
}

.search__layer input {
	width: 400px;
	max-width: 400px;
	border: 2px solid var(--color-blue);
}

.search__layer .--slide-input {
	width: 200px;
	max-width: 200px;
}

.password__btn,
.search__btn {
	position: absolute;
	right: var(--gap-20);
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
}

.login-find__wrapper {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--gap-20);
}

.login-find__wrapper p,
.--sub-desc {
	color: var(--color-gray);
	text-wrap: nowrap;
	text-align: center;
}

.login-find__btns,
.login-find__btns span {
	color: var(--color-dark-gray);

	&:hover {
		color: var(--color-blue);
	}
}

.signup__wrapper {
	font-size: var(--size-12);
	margin-top: var(--gap-20);
}

.signup__wrapper p {
	color: var(--color-gray);
}

.signup__wrapper a {
	color: var(--color-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.social-login__btns {
	width: 100%;
}

.social-login__btns button {
	gap: var(--gap-50) !important;
}

/* =============================
  아이디, 비밀번호 찾기
============================= */
/* 공통 페이지 */
.find-member__wrapper {
	width: 100%;
	align-items: center;
	justify-content: space-between !important;
	gap: var(--gap-50) !important;
}

.member-help__wrapper {
	background-color: var(--color-backgroud-ad);
	justify-content: space-between;
	color: var(--color-dark-gray);
	margin-top: var(--gap-50);
	word-break: keep-all;
}

@media (max-width: 768px) {
	.find-member__wrapper {
		flex-wrap: wrap;
	}

	.search__layer .--slide-input {
		width: 350px;
		max-width: 350px;
	}

	.main-footer__items {
		margin-bottom: var(--gap-20);
	}
}

.find-member__wrapper h4 {
	font-weight: var(--weight-bold);
}

.personal-member button,
.corporate-member button {
	width: 146px;
	height: 43px;
	font-size: var(--size-16);
	font-weight: var(--weight-strong);
	border-radius: var(--radius-5);
	color: var(--color-white);
	background-color: var(--color-dark-gray);
}

.personal-member button.active,
.corporate-member button.active {
	background-color: var(--color-blue);
}

/* 아이디 찾기 페이지 */
.find-member-btn {
	position: relative;
	font-size: var(--size-20);
	color: var(--color-dark-gray);
	font-weight: var(--weight-thin);
	word-break: keep-all;
}

.find-member-btn.active {
	font-weight: var(--weight-bold);
	color: var(--color-black);
	text-decoration: none;
	text-underline-offset: var(--gap-20);
}

.find-member-btn.active::after {
	content: "";
	position: absolute;
	left: -15px;
	bottom: -10px;
	width: 120%;
	height: 2px;
	background-color: var(--color-blue);
}

.find-member__input,
.find-member__input-phone,
.find-member__input-auth {
	width: 600px;
	height: 46px;
	padding-left: var(--gap-20);
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--gap-20);
	border-radius: 5px;
	outline: none;
	color: var(--color-dark-gray);
	border: 1px solid var(--color-light-gray);
	box-shadow: 0px 0.5px 2px 0px var(--color-box-shadow);
	transition: border-color 0.3s, box-shadow 0.3s;
}

.find-member__input:hover,
.find-member__input-phone:hover,
.find-member__input-auth:hover {
	border-color: var(--color-blue);
	box-shadow: 0 0 0 0.2rem var(--color-sky-blue);
}

.find-member__input label,
.find-member__input-phone label,
.find-member__input-auth label {
	font-size: var(--size-16);
	color: var(--color-black);
	text-wrap: nowrap;
}

.find-member__input input,
.find-member__input-phone input,
.find-member__input-auth input {
	width: 80%;
	border: none;
	border-bottom: 1px solid transparent;
	outline: none;
	position: relative;
	background-color: transparent;
	transition: border-color 0.3s;
}

.find-member__input-phone input {
	width: 70%;
}

.auth-number-btn {
	text-wrap: nowrap;
	width: 109px;
	height: 46px;
	color: var(--color-white);
	background-color: var(--color-deep-gray);
	border-top-right-radius: var(--radius-5);
	border-bottom-right-radius: var(--radius-5);

	&:hover {
		background-color: var(--color-dark-gray);
	}
}

.auth-number-btn.active {
	background-color: var(--color-blue);
}

.find-member__input input:focus,
.find-member__input-phone input:focus,
.find-member__input-auth input:focus {
	padding-bottom: 2px;
	border-bottom: 2px solid var(--color-blue);
}

/* 기업회원 비밀번호 찾기 */
.select-coporate-password-auth {
	width: 100%;
}

.select-coporate-password-auth li {
	border-bottom: 1px solid var(--color-light-gray);
	padding: var(--gap-20);
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.select-coporate-password-auth li input[type="radio"] {
	width: 20px;
	height: 20px;
}

.select-coporate-password-auth li span {
	justify-content: left !important;
	font-size: var(--size-16);
	color: var(--color-black);
	word-break: keep-all;
}

.select-coporate-password-auth__form {
	display: flex;
	flex-direction: column;
	gap: var(--gap-20);
}

.--coporate-password-desc {
	width: 600px;
	word-break: keep-all;
	color: var(--color-deep-gray);
	padding-left: 10px;
}

@media (max-width: 768px) {
	.find-member-btn.active::after {
		left: 0px;
		bottom: -10px;
		width: 100%;
	}

	.find-member__input,
	.find-member__input-phone,
	.find-member__input-auth,
	.--coporate-password-desc {
		width: 350px;
	}

	.find-member__input input,
	.find-member__input-auth input {
		width: 70%;
	}

	.auth-number-btn {
		font-size: var(--size-12);
	}
}

/* =============================
    회원가입
============================= */
.--top-label {
	display: inline-block;
	margin-bottom: 5px;
	font-size: var(--size-16);
	font-weight: var(--weight-strong);
}

.signup-terms__wrapper {
	padding: var(--gap-20);
	border: 1px solid var(--color-light-gray);
	border-radius: var(--radius-5);
}

.signup-terms__header {
	display: flex;
	flex-direction: row;
	gap: var(--gap-20);
	padding-bottom: var(--gap-20);
	margin-bottom: var(--gap-20);
	border-bottom: 1px solid var(--color-light-gray);
}

.signup-terms__header p {
	font-size: var(--size-12);
	font-weight: var(--weight-thin);
	color: var(--color-dark-gray);
}

.signup-terms__content {
	display: flex;
	flex-direction: column;
	gap: var(--gap-20);
}

.signup-terms__content li {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.signup-terms__content li p {
	font-size: var(--size-14);
	font-weight: var(--weight-thin);
	color: var(--color-dark-gray);
}

.auth-btn {
	width: 100px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-5);
	border: 1px solid var(--color-light-gray);
	font-size: var(--size-16);
	font-weight: var(--weight-thin);
	color: var(--color-gray);
	background-color: var(--color-backgroud);
	cursor: not-allowed;
}

.auth-btn.active {
	color: var(--color-white);
	background-color: var(--color-blue);
	cursor: pointer;
}

.signup-license__wrapper {
	padding: var(--gap-20);
	background-color: var(--color-background-blue);
	border-radius: var(--radius-5);
	border: 2px dotted var(--color-blue);
}

.signup-license__wrapper h5 {
	font-size: 15px;
	font-weight: var(--weight-thin);
}

.signup-license__btn {
	width: 230px !important;
	height: 40px !important;
	border-radius: 35px !important;
	font-size: var(--size-14);
	font-weight: var(--weight-thin);
}

.signup-license__wrapper p {
	font-size: var(--size-14);
	font-weight: var(--weight-thin);
}

.address-input input {
	position: absolute;
}

.address-input button {
	position: absolute;
	margin-right: var(--gap-50);
}

.--back-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 129px;
	height: 48px;
	border-radius: var(--radius-5);
	font-size: var(--size-16);
	color: var(--color-gray);
	background-color: var(--color-white);
	border: 1px solid var(--color-gray);

	&:hover {
		background-color: var(--color-backgroud);
	}
}

.auth-desc__wrapper {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: left;
	gap: var(--gap-20);
	align-items: center;
	padding: var(--gap-30);
	background-color: var(--color-sky-blue);
}

.auth-desc__wrapper p {
	font-size: var(--size-12);
	color: var(--color-deep-gray);
	word-break: keep-all;
}

.--timer__layer {
	margin-top: 10px;
	padding-left: var(--gap-20);
}

.--timer__layer span {
	color: var(--color-blue) !important;
	font-size: var(--size-12) !important;
	font-weight: var(--weight-strong) !important;
}

.main-section__img-detail--upload {
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: center;

	border-radius: 3px;
	width: calc(20% - 12px);
	height: 8rem;

	font-size: 10px;
	font-weight: 600;
	text-align: center;
	color: var(--color-gray);
	border: 1px solid var(--color-gray);

	width: 306px;
	height: 180px;
	background-color: var(--color-backgroud);

	padding: var(--gap-20);
}

.main-section__img-detail--upload img {
	margin: 0 auto;
}

.--add-img {
	width: 100%;
	height: 100%;
	position: relative;
	cursor: pointer;
	border: 2px dashed var(--color-blue);
}

.reset-logo-img {
	position: absolute;
	top: -10px;
	right: -5px;
	padding: 5px 10px;
	border-radius: 50%;
	background-color: #ff0707;
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	z-index: 1;
}

/* =============================
    공통회원 - 메인 홈
============================= */
.top-banner__wrapper {
	padding: var(--gap-50);
	background: linear-gradient(90deg, #0762ff 0%, #0b9af2 100%);
	flex-wrap: wrap;
	gap: var(--gap-50) !important;
}

.top-banner-item {
	position: relative;
	width: 160px;
	margin: 0px 5px;
	height: 250px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: left;
	gap: 10px;
	padding: var(--gap-20);
	border-radius: var(--radius-10);

	&:hover {
		cursor: pointer;
		box-shadow: 0px 1px 5px 0px var(--color-background-blue);
		;
	}
}

.top-banner-item__header {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: left;
	gap: var(--gap-30);
}

.top-banner-item__header img {
	width: 68px;
	height: 68px;
	border-radius: var(--radius-5);
	border: 1px solid var(--color-light-gray);
	object-fit: contain;
	position: relative;
}

.top-banner-item__tag {
	position: relative;
	top: -90px;
	width: 71px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--size-10);
	font-weight: var(--weight-bold);
	color: var(--color-red);
	background-color: var(--color-light-red);
	border-radius: var(--radius-10);
}

.top-banner-item__content {
	position: relative;
	top: -180px;
}

.top-banner-item__footer {
	display: flex;
	flex-direction: row;
	gap: 10px;
	align-items: center;
	justify-content: left;
	margin-top: var(--gap-30);
}

.top-banner-item p {
	font-size: var(--size-12);
	word-break: keep-all;
	color: var(--color-deep-gray);
}

.middle-banner-item {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 45px !important;
	width: 100%;
}

.middle-banner-item__wrapper {
	position: relative;
}

.middle-banner-item__layer {
	width: 280px;
	height: 240px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	border-radius: 5px;
	border: 1px solid var(--color-light-gray);
	border-top: 10px solid var(--color-pastel-blue);
	background-color: var(--color-white);

	&:hover {
		z-index: 10;
		position: absolute;
		height: auto;
		top: 0px !important;
		box-shadow: 0px 2px 5px 0px var(--color-box-shadow);
		cursor: pointer;
		transition: border 0.3s ease-in-out;
	}
}

.middle-banner-item__hover {
	display: none;
	flex-direction: column;
	position: relative;
	gap: 10px;
	padding: 30px 10px;
	margin: 0 auto;
}

.middle-banner-item__wrapper:hover .middle-banner-item__hover {
	display: flex;
}

.middle-banner-item__hover>img {
	width: 19px;
	height: 19px;
}

.middle-banner-item__hover-item {
	border-radius: 8px;
	width: 220px;
	background-color: #f3f3f3;
	padding: 20px;
	height: 215px;
	font-size: 12px;
}

.middle-banner-item__hover-item span {
	color: #787878;
}

.middle-banner-item__header {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--gap-20);
	border-bottom: 1px solid var(--color-light-gray);
	width: 100%;
}

.middle-banner-item__header img {
	width: 262px;
	height: 50px;
	object-fit: contain;
}

.middle-banner-item__content {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 5px;
	padding: 15px var(--gap-20);
}

.middle-banner-item__content h5 {
	font-weight: var(--weight-strong);
	color: var(--color-dark-gray);
	font-size: var(--size-14);
}

.middle-banner-item__content p {
	color: var(--color-deep-gray);
}

.middle-banner-item__footer {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-end;
	gap: 5px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	flex-wrap: wrap;
}

.desc--limit-date {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.label--limit-date {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 5px 10px;
	font-size: var(--size-10);
	color: var(--color-blue);
	background-color: var(--color-sky-blue);
	border-radius: var(--radius-10);
}

.middle-banner-item {
	display: flex;
	flex-wrap: wrap;
	list-style-type: none;
	align-items: flex-start;
	justify-content: left !important;
	padding: 0;
	margin: 0;
}

.middle-banner-item__wrapper {
	width: 250px !important;
	/* 4 items per row */
	box-sizing: border-box;
}

@media (max-width: 1040px) {
	.middle-banner-item__wrapper {
		min-width: 250px;
	}
}

@media (max-width: 768px) {
	.middle-banner-item {
		gap: 20px !important;
	}

	.middle-banner-item__layer {
		max-width: 250px;
	}

	.middle-banner-item__wrapper {
		min-width: 250px;
	}

	.middle-banner-item__layer {
		&:hover {
			top: -120px !important;
		}
	}
}

@media (max-width: 553px) {
	.middle-banner-item__layer {
		&:hover {
			top: 0px !important;
		}
	}
}

.--search-result__desc {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--gap-20);
	font-size: var(--size-20);
	color: var(--color-deep-gray);
	border-top: none !important;
	word-break: keep-all;
}

.--search-result__desc span {
	font-weight: var(--weight-bold);
	color: var(--color-black);
}

/* =============================
    공통회원 - 모집공고
============================= */
.search-post__layer {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: center;
	gap: var(--gap-20);
	margin: 0 0 50px 0;
}

.recruit-item__wrapper {
	width: 100%;
	min-height: 169px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap-20);
	margin: 0;
	padding: var(--gap-20) !important;
	flex-wrap: wrap;

	&:hover {
		box-shadow: 0px 1px 10px 0px var(--color-box-shadow);
		filter: brightness(0.99);
	}
}

.recruit-title__wrapper {
	gap: 10px;
	padding-right: var(--gap-20);
	border-right: 1px solid var(--color-light-gray);
}

.recruit-title__wrapper h4 {
	font-size: var(--size-16) !important;
	font-weight: var(--weight-thin) !important;
	word-break: keep-all !important;
}

.recruit-content__wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: left;
	gap: 10px;
	min-width: 500px;
}

.recruit-content__tag {
	font-size: var(--size-12);
	color: var(--color-deep-gray);
	font-weight: var(--weight-thin);
}

.recruit-content__desc {
	margin-top: var(--gap-20);
	font-size: var(--size-12);
	color: var(--color-gray);
	font-weight: var(--weight-thin);
	word-break: keep-all;
}

.recruit-content__wrapper button h5 {
	font-size: var(--size-16);
	font-weight: var(--weight-strong);
	word-break: keep-all;

	&:hover {
		color: var(--color-blue);
	}
}

.recruit-sub-content__wrapper {
	display: flex;
	flex-direction: column;
	align-items: end;
	justify-content: space-between;
	gap: var(--gap-20);
}

.recruit-sub-content__date {
	font-size: var(--size-12);
	font-weight: var(--weight-thin);
	color: var(--color-gray);
}

.recruit-sub-content__date p {
	text-align: right;
}

/* =============================
    공통회원 - 모집공고 상세
============================= */
.detail-recruit-top__wrapper {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: var(--gap-50);
}

.detail-recruit-top__btns {
	display: flex;
	flex-direction: row;
	flex: 1;
	gap: var(--gap-20);
	margin-top: 50px;
	align-items: flex-end;
	justify-content: right;
}

.detail-recruit-top__title {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap-20);
}

.--detail-recruit-top__tag {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 5px 20px;
	border-radius: 50px;
	min-width: 137px;
	font-size: var(--size-16);
	font-weight: var(--weight-bold);
	color: var(--color-gray);
	border: 1px solid var(--color-gray);
}

.--detail-recruit-top__tag span {
	color: var(--color-blue);
}

.detail-recruit-top__wrapper h3 {
	font-weight: var(--weight-bold);
	color: var(--color-deep-gray);
	word-break: keep-all;
}

.--company-follow-btn {
	width: 80.1px;
	height: 91.54px;
	border: 1px solid var(--color-light-gray);
	border-radius: var(--radius-10);
}

.--detail-filter__tab {
	display: flex;
	flex-direction: row;
	gap: var(--gap-50);
	padding-left: var(--gap-30);
	padding-bottom: var(--gap-20);
}

.--detail-filter__tab button {
	font-size: var(--size-16);
	font-weight: var(--weight-strong);
	color: var(--color-dark-gray);

	&:hover {
		color: var(--color-light-blue);
	}
}

.--detail-filter__tab button.active {
	color: var(--color-blue);
	text-decoration: underline;
	text-underline-offset: var(--gap-20);
}

/* 사이드 최근 본 공고 */
.recently-view-box__wrapper {
	display: flex;
	flex-direction: column;
	min-width: 120px;
	min-height: 308px;
	margin-right: var(--gap-30);
	position: absolute;
	top: 26vh;
	right: -10px;
	z-index: 1;
	transition: all 0.3s ease-in-out;
	border-top: 3px solid var(--color-blue);
	background-color: var(--color-white);
	box-shadow: 0px 1px 10px 0px var(--color-box-shadow);
}

.recently-view-box__header {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 10px var(--gap-20);
	gap: var(--gap-30);
	font-size: var(--size-12);
	background-color: var(--color-background-blue);
}

.recently-view-box__header p {
	font-weight: var(--weight-strong);
	color: var(--color-dark-gray);
}

.recently-view-box__header span {
	color: var(--color-red);
	font-weight: var(--weight-thin);
}

.recently-view-box__ad {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-bottom: var(--gap-20);
	border-top: 1px solid var(--color-box-shadow);
	cursor: pointer;
	position: relative;
}

.recently-view-box__ad--tag {
	position: relative;
	left: -30px;
	padding: 1px 8px;
	border-radius: 50px;
	margin-top: 10px;
	margin-bottom: 10px;
	color: var(--color-white);
	background-color: var(--color-pastel-deep-blue);
}

.recently-view-box__content {
	max-height: 225px;
	overflow-y: auto;
}

.recently-view-box__content li,
.recently-view-box__ad-item {
	padding: var(--gap-20);
	color: var(--color-deep-gray);
	font-weight: var(--weight-thin);
	font-size: var(--size-12);
}

.recently-view-box__content li {
	cursor: pointer;
	border-top: 1px solid var(--color-light-gray);

	&:hover {
		box-shadow: 0px 1px 10px 0px var(--color-box-shadow);
	}
}

.recently-view-box__content li h5,
.recently-view-box__ad-item h5 {
	font-weight: var(--weight-strong);
	color: var(--color-dark-gray);
}

.recently-view-box__ad--apply-btn {
	border: 2px solid var(--color-red);
	color: var(--color-red);
	padding: 5px var(--gap-30);
	font-size: var(--size-10);
	font-weight: var(--weight-thin);
}

.recently-view-box__top-btn {
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: var(--color-light-gray);
	font-size: var(--size-10);

	&:hover {
		background-color: var(--color-gray);
	}
}

@media (min-width: 1440px) {
	.recently-view-box__wrapper {
		right: -10px;
	}
}

@media (min-width: 2400px) {
	.recently-view-box__wrapper {
		margin-right: 20vw;
	}
}

@media (min-width: 3500px) {
	.recently-view-box__wrapper {
		margin-right: 30vw;
	}
}

@media (max-width: 1400px) {
	.recently-view-box__wrapper {
		display: none;
	}
}

/* 상세 공고 내용 */
.--detail-post__item {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--gap-20);
	padding-bottom: var(--gap-20);
}

.--detail-post__item li {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: left;
	gap: var(--gap-50);
	color: var(--color-deep-gray);
}

.--detail-post__item li p {
	max-width: 320px;
	min-width: 80px;
	word-break: keep-all;
}

.--detail-post__item li span {
	min-width: 114.43px;
	height: 40.05px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-dark-gray);
	background-color: var(--color-backgroud-gray);
	font-weight: var(--weight-bold);
	border-radius: var(--radius-5);
}

.--detail-post__desc {
	width: 100%;
	min-width: 200px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	padding: var(--gap-30);
	color: var(--color-dark-gray);
	font-size: var(--size-12);
	word-break: keep-all;
}

.detail-post-body__header {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--gap-20);
	padding: var(--gap-50) 0px;
}

.detail-post-body__header li {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	word-break: keep-all;
	gap: var(--gap-20);
	padding-right: var(--gap-20);
	border-right: 1px solid var(--color-light-gray);
	color: var(--color-gray);
	font-size: var(--size-16);
	font-weight: var(--weight-bold);
}

.detail-post-body__header li:last-child {
	border-right: none;
}

.detail-post-body__header li span {
	color: var(--color-dark-gray);
}

.detail-post-body__header li button {
	display: flex;
	flex-direction: row;
	gap: 10px;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;

	&:hover {
		color: var(--color-blue);
	}
}

.detail-post-body__desc-wrapper {
	margin: var(--gap-50) 0px;
	padding: var(--gap-30) var(--gap-20);
	background-color: var(--color-backgroud);
	border-radius: var(--radius-10);
	font-size: var(--size-16);
	color: var(--color-deep-gray);
	word-break: keep-all;
}

.detail-post-body__wrapper {
	padding: 0px var(--gap-20) !important;
}

.detail-post-body__intro-list {
	display: flex;
	flex-direction: column;
	position: relative;
}

.detail-post-body__intro-list>li {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	height: 100%;
	padding-bottom: var(--gap-50);
	gap: var(--gap-50);
	border-left: 1px solid var(--color-light-gray);
	font-size: var(--size-16);
	font-weight: var(--weight-bold);
	color: var(--color-dark-gray);
}

.detail-post-body__intro-list>li:last-child {
	border-left: none;
}

.detail-post-body__intro-list>li>span {
	position: relative;
	left: -5px;
	min-width: 10px;
	min-height: 10px;
	border-radius: 50px;
	background-color: var(--color-light-gray);
}

.detail-post-body__intro-sub-list {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: var(--gap-20);
}

.detail-post-body__intro-sub-list li {
	list-style: disc;
	font-size: var(--size-14);
	color: var(--color-deep-gray);
}

.detail-post-body__content {
	padding: var(--gap-50);
	display: flex;
	flex-direction: column;
	gap: var(--gap-30);
}

.detail-post-body__content h4 {
	font-weight: var(--weight-bold);
}

.--benefits-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
}

.--benefits-list li {
	width: calc(100% / 4);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--gap-20);
	padding: var(--gap-30) var(--gap-20);
	border: 1px solid var(--color-box-shadow);
	word-break: keep-all;
}

.--benefits-list li>div {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--gap-20);
}

.--benefits-list li p {
	font-size: var(--size-12);
	color: var(--color-gray);
	word-break: keep-all;
}

.--company-location {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 428.85px;
	border: 1px solid var(--color-light-gray);
	border-radius: var(--radius-5);
}

.--company-location__map img {
	width: 100%;
	height: 100%;
}

.--map-zoom-btn {
	position: absolute;
	top: var(--gap-20);
	right: var(--gap-20);
	padding: 10px;
	background-color: var(--color-white);
	border-radius: var(--radius-5);
}

.--company-location__desc {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: left;
	max-height: 80px !important;
	gap: var(--gap-20);
	padding: var(--gap-20);
}

.--company-location__desc>img {
	width: 24px;
	height: 24px;
}

.--company-location__desc p {
	font-size: var(--size-20);
	font-weight: var(--weight-bold);
	color: var(--color-deep-gray);
}

.limit-date__wrapper {
	display: flex;
	flex-direction: row;
	width: 100%;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--color-light-gray);
	border-radius: var(--radius-5);
	flex-wrap: wrap;
}

.limit-date__item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	justify-content: left;
	gap: var(--gap-20);
	padding: var(--gap-30);
	flex: 1;
	height: 100%;
	min-width: 330px;
	min-height: 288px;
	border-right: 1px solid var(--color-light-gray);
}

.limit-date__item span {
	width: 115px;
	min-width: 115px;
}

.limit-date__desc {
	flex-wrap: nowrap !important;
	align-items: flex-start !important;
}

.limit-date__desc p {
	color: var(--color-deep-gray);
	font-size: var(--size-14);
	font-weight: var(--weight-bold);
	text-align: center;
	word-break: break-word;
}

.limit-date__item h5 {
	font-size: var(--size-16);
	font-weight: var(--weight-bold);
	color: var(--color-black);
}

.limit-date__time {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: var(--gap-20);
	background-color: var(--color-background-blue);
	border-radius: var(--radius-5);

	color: var(--color-blue);
	font-size: var(--size-20);
	font-weight: var(--weight-strong);
}

.limit-date__item:last-child {
	border-right: none;
}

.main-article__ad {
	padding: var(--gap-50);
}

.main-utile__wrapper {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 0px var(--gap-30);
	flex-wrap: wrap;
}

.company-detail__wrapper {
	padding: var(--gap-30);
	border: 1px solid var(--color-light-gray);
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-5);
}

.company-detail__header {
	width: 100%;
	padding-bottom: var(--gap-30);
	justify-content: left !important;
	border-bottom: 1px solid var(--color-light-gray);
	flex-wrap: wrap;
}

.company-detail__header .--img__wrapper {
	width: 171.64px;
	height: 57.21px;
	background-color: var(--color-white);
}

.company-detail__header .--img__wrapper img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.company-detail__header .--tag-gray-solid p {
	font-size: var(--size-12);
	font-weight: var(--weight-default);
}

.company-detail__content {
	display: flex;
	flex-direction: row;
	gap: var(--gap-30);
	flex-wrap: wrap;
}

.company-detail__content ul {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: left;
	min-width: 300px;
	padding-top: var(--gap-30);
	gap: var(--gap-20);
}

.company-detail__content ul li {
	display: flex;
	flex-direction: row;
	gap: var(--gap-30);
	align-items: center;
}

.company-detail__content ul li span {
	min-width: 60px;
	color: var(--color-gray);
}

.company-detail__content ul li p {
	font-weight: var(--weight-bold);
	color: var(--color-dark-gray);
}

.recruit-info__wrapper {
	flex: 1;
	display: flex;
	align-items: flex-end !important;
	justify-content: flex-end !important;
}

.recruit-info__btn {
	min-width: 254px;
	color: var(--color-blue) !important;
}

.--share-report-btn__wrapper {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: right;
}

.--share-report-btn__wrapper button {
	padding: 0px var(--gap-20);
	border-right: 1px solid var(--color-light-gray);
	font-size: var(--size-16);
	font-weight: var(--weight-bold);
	color: var(--color-gray);

	&:hover {
		color: var(--color-blue);
	}
}

.--share-report-btn__wrapper button:last-child {
	border-right: none;
}

.--recommend-list {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--gap-20);
}

.--recommend-list li {
	width: 100%;
	padding: var(--gap-30);
	border: 1px solid var(--color-backgroud);
	box-shadow: 0px 0.5px 10px 0px var(--color-box-shadow);
	border-radius: var(--radius-10);
	background-color: var(--color-white);
}

.--recommend-list__content {
	flex: 1;
	display: flex;
	flex-direction: row;
	gap: var(--gap-20);
	align-items: center;
	justify-content: left;
	flex-wrap: wrap;
}

.--recommend-list__content .--tag-green,
.--recommend-list__content .--tag-blue {
	font-size: var(--size-12);
}

.--recommend-list__text {
	min-width: 450px;
	font-size: var(--size-16);
	font-weight: var(--weight-thin);
	color: var(--color-gray);
	padding-left: var(--gap-50);
	word-break: keep-all;
}

.--recommend-list__btns {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: var(--gap-20);
}

.--recommend-list__btns .__btn--gray {
	background-color: var(--color-backgroud-dark);
}

.--recommend-list__btns button {
	width: 171.64px;
	height: 34.33px;
	font-size: var(--size-12);
}

.--detail-back-btn {
	width: 184.23px;
	height: 57.21px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: var(--gap-20);
	background-color: var(--color-backgroud);
	border-radius: var(--radius-5);
	color: var(--color-gray);

	&:hover {
		background-color: var(--color-backgroud-gray);
	}
}

/* =============================
    모집공고 상세 - 직무확인
============================= */
.job-info__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: left;
	width: 100%;
	gap: var(--gap-50);
	padding: var(--gap-30) var(--gap-20);
	border-bottom: 1px solid var(--color-light-gray);
}

.job-info__content p {
	font-weight: var(--weight-bold);
	color: var(--color-dark-gray);
}

.--job-info-tag {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	font-size: var(--size-16);
	font-weight: var(--weight-strong);
	width: 137.31px;
	height: 45.77px;
}

.job-info__detail {
	display: flex;
	flex-direction: column;
}

.job-info__detail div:last-child {
	border-bottom: none;
}

.job-info__detail-item {
	border-bottom: 1px solid var(--color-light-gray);
	padding: var(--gap-50) 0px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: left;
	gap: var(--gap-20);
}

.job-info__detail-desc {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--gap-20);
}

.job-info__detail-item .--tag-gray {
	color: var(--color-blue);
	font-size: var(--size-12);
	font-weight: var(--weight-bold);
}

.job-info__detail-content {
	display: flex;
	width: 100%;
	flex-direction: row;
	gap: var(--gap-20);
	flex-wrap: wrap;
}

.job-info__detail-content>img {
	width: 325px;
	height: 228.85px;
	object-fit: cover;
	border-radius: var(--radius-5);
}

.--job-video-play__btn img {
	width: 307.81px;
	height: 228.85px;
	border-radius: var(--radius-5);
}

/* =============================
    공통 - 고객센터 FAQ
============================= */
.main-content__title {
	padding: var(--gap-30);
	padding-bottom: 0px;
}

.main-content__title h2 {
	font-weight: var(--weight-thin);
}

.--detail-sub-filter__button {
	display: flex;
	flex-direction: row;
	align-items: center !important;
	justify-content: left !important;
	gap: var(--gap-20);
	margin: 0px;
	padding: 0px var(--gap-30);
}

.--detail-sub-filter__button li button {
	font-weight: var(--weight-thin);
	color: var(--color-deep-gray);

	&:hover {
		color: var(--color-light-blue);
	}
}

.--detail-sub-filter__button li.active button {
	padding: 10px;
	background-color: var(--color-background-blue);
	color: var(--color-blue);
	border-radius: var(--radius-10);
	font-weight: var(--weight-strong);
}

.--faq-search__wrapper {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: var(--gap-30) var(--gap-50);
	background-color: var(--color-backgroud-deep);
}

.--faq-search__btn {
	position: absolute;
	right: 1px;
	bottom: 0;
	width: 56px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-deep-gray);
	border-top-right-radius: var(--radius-5);
	border-bottom-right-radius: var(--radius-5);

	&:hover {
		background-color: var(--color-dark-gray);
	}
}

@media (max-width: 768px) {
	.--faq-search__wrapper .input-style {
		width: 350px !important;
		margin-top: var(--gap-20);
		transition: all 0.5s ease-in-out !important;
	}
}

.--user-filter__tab {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.--user-filter__tab button {
	flex: 1;
	color: var(--color-dark-gray);
	background-color: var(--color-white);
	border: 1px solid var(--color-light-gray);
	font-size: var(--size-16);
	font-weight: var(--weight-thin);
	padding: var(--gap-20) 0px;
	transition: border 0.3s ease, font-weight 0.3s ease;
}

.--user-filter__tab button.active {
	font-weight: var(--weight-strong);
	border: 1px solid var(--color-deep-gray);
}

.--search-tag-filter__tab {
	display: flex;
	flex-direction: row;
	gap: var(--gap-20);
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	padding: 0px var(--gap-50);
}

.--search-tag-filter__tab li button {
	border: 1px solid var(--color-light-gray);
	border-radius: 50px;
	padding: 10px var(--gap-30);
	font-size: var(--size-14);
	font-weight: var(--weight-thin);
	color: var(--color-dark-gray);
	background-color: var(--color-white);
}

.--search-tag-filter__tab li.active button {
	background-color: var(--color-pastel-deep-blue);
	color: var(--color-white);
}

.--faq-content__header {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.--common-ask-text {
	font-size: var(--size-20);
	font-weight: var(--weight-thin);
	color: var(--color-deep-gray);
}

.--show-more-btn {
	border: 1px solid var(--color-gray);
	padding: 5px var(--gap-20);
	border-radius: var(--radius-5);

	&:hover {
		background-color: var(--color-backgroud-gray);
	}
}

.--question-mark {
	font-size: var(--size-20);
	font-weight: var(--weight-thin);
}

.main-accordion__wrapper {
	width: 100%;
	font-size: 16px;
	font-weight: 600;
}

.main-accordion__wrapper li h3 {
	display: flex !important;
	align-items: center !important;
	flex-direction: row !important;
	text-align: left !important;
	width: 100%;
	font-size: 16px;
	font-weight: 600;
	padding: 20px 10px !important;
	border: none;
	border-bottom: 1px solid var(--color-light-gray);
}

.main-accordion__wrapper li div {
	border-top: none;
}

.ui-state-default {
	background-color: var(--color-white);
}

.ui-state-active {
	background-color: var(--color-white);
	color: var(--color-dark-gray);
}

/* =============================
    기업회원 - MY 홈
============================= */
.--common-user__layer {
	display: flex;
	justify-content: center;
	flex: 1;
	margin-left: var(--gap-50);
}

.--company-user__wrapper,
.--personal-user__wrapper {
	align-items: flex-start;
	justify-content: flex-start;
	padding: var(--gap-30) 0px;
	max-width: 854px;
	max-width: 95%;
	min-width: 350px;
	margin: var(--gap-30);
}

.--company-user__wrapper h4,
.--personal-user__wrapper h4 {
	font-weight: var(--weight-bold);
	color: var(--color-dark-gray);
	font-size: var(--size-24);
}

.--company-user__header,
.--personal-user__header {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap-30);
	width: 100%;
	flex-wrap: wrap;
	margin-bottom: var(--gap-20);
}

.--text-essential {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 5px;
	color: var(--color-deep-gray);
	font-weight: var(--weight-thin);
}

.--text-essential span,
.--text-essential-red {
	color: var(--color-red);
}

.--text-essential-blue {
	color: var(--color-blue);
}

.--text-essential-green {
	color: var(--color-deep-green);
}

.--company-user__content,
.--personal-user__content {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--gap-50);
}

.--limit-width__content {
	max-width: 854px !important;
}

.--company-user__item,
.--post-list__item,
.--personal-user__item {
	padding: var(--gap-30);
	border-radius: var(--radius-10);
	background-color: var(--color-white);
	box-shadow: 0px 1px 10px 0px var(--color-box-shadow);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: left;
	gap: var(--gap-20);
}

.--personal-user__item .--text-default {
	font-size: var(--size-16) !important;
}

.--post-list__item {
	flex-direction: row;
	justify-content: space-between;
	min-height: 178px;
}

.--post-list__item-left {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	min-height: 100%;
}

.--post-list__item-btns button {
	width: 80px;
	height: 31px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-5);
	font-size: var(--size-12);
	font-weight: var(--weight-bold);
	color: var(--color-dark-gray);
	background-color: var(--color-backgroud-gray);
}

.--post-list__item-btns button.--blue {
	color: var(--color-white);
	background-color: var(--color-blue);
}

.--post-list__item-btns button.--gray {
	color: var(--color-white);
	background-color: var(--color-dark-gray);
}

.--post-list__item-date {
	font-size: var(--size-12);
	font-weight: var(--weight-thin);
	color: var(--color-light-gray);
}

.--company-user__item h4 {
	font-size: 18px;
	font-weight: var(--weight-bold);
	color: var(--color-dark-gray);
}

.--company-user__form {
	display: flex;
	flex-direction: column;
	gap: var(--gap-20);
	width: 100%;
}

.--company-user__form li {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	width: 100%;
	flex-wrap: wrap;
}

.--company-user__form li h5 {
	font-size: var(--size-16);
	font-weight: var(--weight-thin);
	color: var(--color-dark-gray);
	min-width: 15%;
}

.--company-user__form li>div,
.--company-user__form-div,
.--acceptance-period-btns,
.--select-option-btns {
	width: 85%;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 5px;
}

.--company-user__form-div,
.--acceptance-period-btns,
.--select-option-btns {
	width: 100%;
}

.--company-user__form .input-style {
	height: max-content;
	padding: 5px 10px;
	width: 100% !important;
	max-width: 633px !important;
	box-sizing: border-box;
}

.--company-user__form .input-style.short {
	max-width: 222px !important;
}

.--post-template-btns button,
.--acceptance-period-btns button,
.--select-option-btns button {
	font-size: var(--size-14);
	font-weight: var(--weight-thin);
	border: 1px solid var(--color-light-gray);
	padding: 3px 20px;
}

.--post-template-btns button.active,
.--acceptance-period-btns button.active,
.--select-option-btns button.active {
	color: var(--color-white);
	background-color: var(--color-dark-gray);
	border: 1px solid var(--color-dark-gray);
}

.--checkbox-wrapper {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

.--checkbox-wrapper p {
	text-wrap: nowrap;
}

.--sub-text {
	font-size: var(--size-12);
	font-weight: var(--weight-thin);
	color: var(--color-dark-gray);
}

.--main-text {
	font-size: var(--size-16);
	font-weight: var(--weight-thin);
	color: var(--color-gray);
}

.input-style.short[readonly],
.input-style[readonly] {
	cursor: auto;
	background-color: var(--color-light-gray);
	color: var(--color-dark-gray);
}

.--company-user__form .custom-select {
	width: 112px !important;
	height: 33px;
}

.text-editor__wrapper {
	width: 100% !important;
	height: 100% !important;
	min-height: 450px;
	background-color: var(--color-backgroud-gray);
	overflow-y: auto;
}

.--employee-benefits span {
	display: flex;
	align-items: center !important;
	justify-content: left !important;
}

.--aside-step-check__wrapper {
	align-items: flex-start !important;
	justify-content: flex-start !important;
	margin: 20px;
	overflow-y: auto;
	z-index: 99;
}

.--aside-step-check__wrapper button {
	cursor: pointer;
	width: 233px;
	height: 43px;
}

.--aside-step-check {
	background-color: var(--color-white);
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 20px 0px;
	border-radius: var(--radius-10);
	box-shadow: 0px 0.5px 10px 0px #e6e6e6;
}

.--aside-step-check li {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: left;
	gap: 5px;
	font-size: 18px;
	font-weight: var(--weight-thin);
	color: var(--color-dark-gray);
	cursor: pointer;
	padding: 3px 30px;

	&:hover {
		background-color: var(--color-background-blue);
	}
}

.--aside-step-check li>span {
	width: 30px;
}

@media (max-width: 1750px) {
	.--aside-step-check__wrapper button {
		width: 200px;
	}
}

@media (max-width: 1550px) {
	.--common-user__layer {
		margin-left: 0px;
	}

	.--aside-step-check__wrapper button {
		width: 200px;
	}

	.--company-user__wrapper {
		max-width: 854px;
	}
}

/* =============================
    기업회원 - 공고현황
============================= */
.--post-filter-btns,
.--resume-filter-btns {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: left;
	gap: var(--gap-30);
}

.--post-filter-btns button,
.--resume-filter-btns button {
	font-size: var(--size-16);
	font-weight: var(--weight-bold);
	color: var(--color-dark-gray);
	padding-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 5px;
}

.--post-filter-btns button span,
.--resume-filter-btns button span {
	padding: 0px 8px;
	border-radius: 50px;
	color: var(--color-white);
	background-color: var(--color-dark-gray);
	font-size: var(--size-12);
}

.--post-filter-btns button.active,
.--resume-filter-btns button.active {
	color: var(--color-blue);
	border-bottom: 1px solid var(--color-blue);
}

.--post-filter-btns button.active span,
.--resume-filter-btns button.active span {
	color: var(--color-white);
	background-color: var(--color-blue);
}

.--post-list__item-center {
	height: 100%;
	flex: 1;
	text-wrap: nowrap;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: left;
	gap: 10px;
}

.--post-list__item-center .--btn-sm {
	width: 80px;
	height: 20px;
	font-size: var(--size-10);
}

.--post-list__item-center-desc {
	width: 100%;
	padding: 10px var(--gap-20);
	border-radius: var(--radius-5);
	background-color: var(--color-backgroud-gray);
	margin-top: var(--gap-20);
	align-items: center !important;
	justify-content: left !important;
}

.--post-list__item-center-desc strong {
	font-size: var(--size-10);
	font-weight: var(--weight-strong);
	color: var(--color-dark-gray);
}

.--post-list__item-center-desc p,
.--post-list__item-center-status {
	font-size: var(--size-10);
	font-weight: var(--weight-default);
	color: var(--color-gray);
}

.--post-list__item-center-date {
	font-size: var(--size-12);
	color: var(--color-deep-gray);
}

.--post-list__item-center-tags span {
	font-size: var(--size-10);
	padding: 3px 10px;
}

.--post-list__item-center-title {
	font-size: var(--size-14) !important;
	font-weight: var(--weight-bold);
	color: var(--color-black);
}

.--post-list__item-right-status {
	font-size: var(--size-12);
	color: var(--color-gray);
}

.--red-text {
	color: var(--color-red);
}

.--blue-text {
	color: var(--color-blue);
}

.--post-list__item-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: right;
	gap: var(--gap-20);
	text-wrap: nowrap;
}

.--post-list__item-right-btns {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: right;
	gap: 10px;
}

.--post-list__item-right-btns button {
	border-right: 1px solid var(--color-light-gray);
	padding-right: 10px;
	font-size: var(--size-12);

	&:hover {
		color: var(--color-blue);
	}
}

.--post-list__item-right-btns button:last-child {
	border-right: none;
	padding-right: 0px;
}

.--post-list__item-right-status-list {
	padding: 10px;
	border: 1px solid var(--color-light-gray);
	border-radius: var(--radius-5);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: var(--gap-20);
	font-size: var(--size-10);
	width: 100%;
}

.--post-list__item-right-status-list li {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

@media (max-width: 1750px) {
	.--aside-step-check__wrapper button {
		width: 200px;
	}
}

@media (min-width: 1550px) {
	.--post-list__item__wrapper {
		display: flex;
		flex-direction: row;
		gap: var(--gap-20);
	}
}

@media (max-width: 1550px) {
	.--post-list__item-right {
		align-items: flex-start;
		justify-content: left;
	}

	.--post-list__item__wrapper {
		flex-direction: column;
	}

	.--post-list__item {
		flex-wrap: wrap;
	}

	.--post-list__item-left {
		flex-direction: row !important;
		gap: var(--gap-20);
		padding-bottom: var(--gap-20);
	}

	.--post-list__item-btns {
		flex-direction: row !important;
	}
}

/* =============================
    개인회원 - 나의 이력서
============================= */
.--personal-user__item {
	flex-direction: row;
	align-items: center;
	justify-content: left;
	gap: var(--gap-50);
}

.--personal-user__item--col {
	flex: 1;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
	gap: var(--gap-20);
	min-height: 100%;
	word-break: keep-all;
}

.--company-user__notice-item {
	flex: 1;
	display: flex;
	gap: var(--gap-20);
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	min-height: 100%;
	word-break: keep-all;
	padding: var(--gap-20);
	border-radius: var(--radius-10);
	background-color: var(--color-white);
	box-shadow: 0px 1px 10px 0px var(--color-box-shadow);

	&:hover {
		cursor: pointer;
		box-shadow: 0px 10px 10px 0px var(--color-box-shadow);
	}
}

.--company-user__notice-item__top {
	display: flex;
	width: 100%;
	flex-direction: row;
	gap: 10px;
	align-items: flex-start;
	justify-content: left;
	color: var(--color-deep-gray);
	font-size: var(--size-12);
}

.--company-user__notice-item__top span {
	width: 50px;
	height: 20px;
	font-size: var(--size-12);
}

.--company-user__notice-item__bottom {
	display: flex;
	align-items: center;
	justify-content: center;
	text-wrap: nowrap;
	width: 100%;
	padding: 5px;
	border-radius: var(--radius-5);
	color: var(--color-deep-gray);
	background-color: var(--color-backgroud);
	font-size: var(--size-12);
}

.--personal-user__item--col .--text-essential {
	font-size: var(--size-16);
}

.--personal-user__item-detail h5,
.--personal-user__item-detail p {
	font-size: var(--size-20);
	font-weight: var(--weight-thin);
}

.--personal-user__item-detail p {
	color: var(--color-deep-gray);
}

.--personal-user__profile-wrapper {
	width: 124px;
	height: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-10);
	background-color: var(--color-backgroud-ad);
	object-fit: cover;
}

.--personal-user__profile {
	width: 100%;
	height: 100%;
}

/*
.--default-profile-img {
	width: 45px !important;
	height: 45px !important;
}
*/

.--personal-user__profile-wrapper.--circle {
	width: 100px;
	height: 100px;
	border-radius: 50% !important;
}

.--personal-user__profile-wrapper.--circle .--personal-user__profile {
	border-radius: 50% !important;
}

.--certification-btn {
	width: 124px !important;
	height: 40px !important;
	font-size: var(--size-16) !important;
	gap: 10px;
	background: linear-gradient(90deg, #4489ff 0%, #0762ff 100%);
}

.--personal-user__list {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
}

.--personal-user__list li {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap-20);
	width: 100%;
	padding: 10px 0px;
	border-bottom: 1px solid var(--color-light-gray);
}

.--personal-user__list li p:first-child {
	color: var(--color-deep-gray);
	width: 100px;
}

.--personal-user__list li p,
.--personal-user__list li .--datepicker-input-text,
.--datepicker-input-text-end {
	font-size: var(--size-20);
	color: var(--color-black);
	outline: none;
	border: none;
}

.--personal-user__list li .--datepicker-input-text {
	outline: none;
	border: none;
	cursor: pointer;

	&:hover {
		color: var(--color-blue) !important;
	}
}

.--personal-info-edit__input {
	font-size: var(--size-16) !important;
	min-width: 350px !important;
	word-break: keep-all;
}

.datepickerJobStartDate:hover::placeholder,
.datepickerJobEndDate:hover::placeholder {
	color: var(--color-blue) !important;
}

.--personal-user__default-btn,
.--personal-user__delete-btn,
.--personal-user__create-btn {
	width: 48px !important;
	height: 27px !important;
	border-radius: var(--radius-5);
	font-size: var(--size-12);
	font-weight: var(--weight-bold);
	color: var(--color-white);
	background-color: var(--color-gray);

	&:hover {
		background-color: var(--color-deep-gray);
	}
}

.--personal-user__delete-btn,
.--personal-user__create-btn {
	width: 74px !important;
}

.--personal-user__default-btn.--light-gray {
	color: var(--color-dark-gray);
	background-color: var(--color-light-gray);
}

.--personal-user__default-btn.--spuar,
.--personal-user__default-btn.--spuar-blue {
	width: 28px !important;
	height: 28px !important;
	font-size: var(--size-24) !important;
	display: flex;
	align-items: center;
	justify-content: center;
}

.--personal-user__default-btn.--spuar-blue,
.--personal-user__create-btn,
.--personal-user__default-btn.--blue {
	background-color: var(--color-blue);

	&:hover {
		background-color: var(--color-light-blue);
	}
}

.--personal-user__job-count {
	font-size: var(--size-16);
	color: var(--color-dark-gray);
}

.--personal-resume-info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: left;
	gap: var(--gap-20);
	width: 100%;
	padding-bottom: var(--gap-20);
	border-bottom: 1px solid var(--color-light-gray);
}

.--personal-resume-info h4 {
	font-size: var(--size-20);
	font-weight: var(--weight-default);
}

.--personal-resume-info h4 strong {
	font-size: var(--size-20);
}

.--personal-resume-tag {
	width: 130px;
	min-width: 130px;
	color: var(--color-deep-gray) !important;
}

.--personal-resume-list {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap-20);
	flex-wrap: wrap;
}

.--personal-resume-list li {
	display: flex;
	flex: 1;
	min-width: 40%;
	flex-direction: row;
	align-items: flex-start;
	justify-content: left;
	gap: var(--gap-20);
	font-size: var(--size-16);
}

.--personal-resume-update,
.--personal-resume__edit-btn {
	font-size: var(--size-12);
	font-weight: var(--weight-bold);
	color: var(--color-dark-gray);
}

.--personal-resume__edit-btn {
	color: var(--color-blue);
	border-bottom: 1px solid var(--color-blue);
}

.--personal-resume-decs {
	width: 445px;
	border-radius: var(--radius-5);
	padding: 10px var(--gap-20);
	background-color: var(--color-backgroud-gray);
	font-size: var(--size-12);
	font-weight: var(--weight-bold);
	color: var(--color-deep-gray);
}

.--personal-aside-ad__wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--gap-20);
	position: fixed;
	top: 120px;
	right: 20px;
	z-index: 1;
}

.--personal-aside-ad__wrapper div {
	width: 200px;
	height: 350px;
	object-fit: cover;
	border-radius: var(--radius-10);
	cursor: pointer;
}

.--personal-aside-ad__wrapper img {
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.--file-icon__wrapper {
	padding: 5px 10px;
	border-radius: 50%;
	background-color: var(--color-light-gray);
}

/* =============================
    커스텀 모달
============================= */
.--personal-modal {
	width: 100%;
}

.--personal-modal .main-form__header h3 {
	font-size: var(--size-24);
	font-weight: var(--weight-bold);
}

.--personal-modal .main-form__header p {
	color: var(--color-deep-gray);
}

.--modal-title-input {
	width: 100%;
	padding: 10px;
	font-size: var(--size-20);
	border-bottom: 1px solid var(--color-gray);
	background-color: inherit;
}

.--modal-title-input:focus {
	outline: none;
}

.--editor__wrapper {
	width: 100%;
	height: 600px !important;
	margin-bottom: 15px;
	border-bottom: 1px solid var(--color-gray);
	overflow-y: hidden;
}

.modal-button-group,
.--personal-bottom-btns {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding-top: var(--gap-20);
	margin-top: var(--gap-20);
}

.custom-modal__header {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: left;
	gap: var(--gap-20);
}

.custom-modal__header p {
	font-size: var(--size-16);
	color: var(--color-gray);
}

.modal-close-btn,
.common-back-btn {
	width: 114px !important;
	height: 42px !important;
	color: var(--color-white) !important;
	background-color: var(--color-deep-gray) !important;
	border-radius: var(--radius-5);

	&:hover {
		background-color: var(--color-dark-gray) !important;
	}
}

.--modal-tab-btns button {
	width: 125px;
	height: 32px;
	font-size: var(--size-12);
}

.--modal-tab-btns button.active {
	color: var(--color-white);
	background-color: var(--color-blue);

	&:hover {
		background-color: var(--color-light-blue) !important;
	}
}

.modal-submit-btn,
.common-blue-btn {
	width: 200px !important;
	height: 42px !important;
	font-size: var(--size-14) !important;
	font-weight: var(--weight-default) !important;
}

.self-intro-reload-list {
	max-height: max-content !important;
}

.self-intro-reload-list li {
	align-items: flex-start !important;
}

.self-intro-reload-list li p {
	color: var(--color-gray);
	font-weight: var(--weight-thin);
}

.self-intro-reload-list li .--title {
	font-size: var(--size-16);
	color: var(--color-black);
	word-wrap: break-word !important;
}

.self-intro-reload-list li .--content {
	font-size: var(--size-14);
	color: var(--color-black);
}

.self-intro-reload-list li .--file-name {
	font-size: var(--size-16);
	font-weight: var(--weight-bold);
	color: var(--color-black);
}

.--check-desc {
	font-size: var(--size-16) !important;
	font-weight: var(--weight-bold) !important;
	color: var(--color-dark-gray) !important;
}

/* =============================
    개인회원 - 회원정보
============================= */
.--personal-user__sns {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: var(--color-light-gray);
	cursor: pointer;
}

.--personal-user__sns img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	background-color: var(--color-white);
}

.--personal-password-edit__input,
.--personal-email-edit__input,
.--personal-user__list li input {
	width: max-content;
	font-size: var(--size-16) !important;
}

.--personal-password-edit__input:focus,
.--personal-email-edit__input:focus,
.--personal-user__list li input:focus {
	outline: none !important;
	font-size: var(--size-16) !important;
}

/* =============================
    개인회원 - MY홈
============================= */
.--personal-apply-list,
.--ai-recommend-list {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	justify-content: flex-start !important;
}

.--personal-apply-list li,
.--ai-recommend-list li {
	flex: 1 1 calc(25% - 10px);
	min-width: 210px;
	max-width: 210px;
	background-color: var(--color-pastel-deep-blue);
	color: var(--color-white);
	align-items: center;
	justify-content: center;
	font-size: var(--size-16);
}

.--personal-apply-list li p {
	width: 100%;
	text-align: center;
}

.--personal-apply-list li button {
	color: var(--color-blue);
	font-size: var(--size-16);
}

.--ai-recommend-list {
	gap: var(--gap-20);
}

.--ai-recommend-list li {
	min-width: 190px;
	max-width: 190px;
	gap: var(--gap-30);
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	background-color: var(--color-white);
	color: var(--color-deep-gray);
	font-size: var(--size-14);
	cursor: pointer;
}

.--ai-recommend-list li img {
	width: 190px;
	height: 120px;
	border-radius: var(--radius-10);
	object-fit: cover;
	margin-bottom: 10px;
}

.--ai-recommend-list li h5 {
	font-weight: var(--weight-strong);
	color: var(--color-black);
	word-break: keep-all;
	margin-bottom: 10px;
}

/* =============================
    기업회원 - 회사정보
============================= */
.--company-logo__wrapper {
	width: 115px;
	height: 28px;
	object-fit: contain;
}

.--company-logo__wrapper img {
	width: 100%;
	height: 100%;
}

.--employee-info__item {
	font-size: var(--size-16);
	font-weight: var(--weight-thin);
	color: var(--color-dark-gray);
}

.--employee-info__item .--tag-deep-blue {
	font-size: var(--size-12);
	width: 44px;
	height: 20px;
}

.--employee-info-input__list li {
	width: 100%;
}

.--employee-info-input__list li p {
	width: 10%;
	font-size: var(--size-16);
}

.--editor-head-text {
	font-size: var(--size-18) !important;
	font-weight: var(--weight-thin) !important;
	color: var(--color-dark-gray) !important;
}

.--file-select__title {
	font-size: var(--size-16);
	font-weight: var(--weight-thin);
	color: var(--color-dark-gray);
	width: 10%;
}

.--file-select__wrapper {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 90%;
	background-color: var(--color-backgroud);
	padding: var(--gap-20);
}

.--file-select__wrapper p {
	flex-direction: column;
	align-items: flex-start;
}

.--file-select__wrapper ul {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: left;
	gap: var(--gap-20);
	flex-wrap: wrap;
}

.--file-select__wrapper ul li {
	width: 150px;
	height: 145px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-white);
}

.--file-select__wrapper ul li img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.--default-add-file-img {
	width: 45px !important;
	height: 45px !important;
}

/* =============================
    기업회원 - 지원자현황
============================= */
.header-row,
.applicant-row {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
	border-bottom: 1px solid #ddd;
}

.applicant-row {
	border-radius: var(--radius-10);
	background-color: var(--color-white);
	color: var(--color-deep-gray);
	cursor: pointer;

	&:hover {
		box-shadow: 0px 1px 10px 0px var(--color-box-shadow);
	}
}

.header-row {
	background-color: #f0f4ff;
	font-weight: bold;
}

.column {
	flex: 1;
	text-align: center;
}

.--text-default {
	font-weight: var(--weight-bold) !important;
	font-size: var(--size-14) !important;
	color: var(--color-black) !important;
	padding-bottom: 5px;
}

.--apply-list-flex__box {
	padding: 20px;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: left;
	gap: 10px;
	height: 100%;
}

.--apply-status__box {
	width: 90px;
	padding: 5px 10px;
	text-align: center;
	border: 1px solid var(--color-light-gray);
	border-radius: var(--radius-5);
}

.--apply-list-flex__title {
	padding: 0px 20px;
	color: var(--color-deep-gray);
}

.--apply-list-flex__text {
	padding: 20px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: left;
	height: 100%;
	text-align: left;
	word-break: keep-all;
}

.--dividing-line {
	border-right: 1px solid var(--color-light-gray);
	height: 100%;
	padding-right: 10px;
}

.--profile-pic {
	width: 59px;
	height: 76px;
	object-fit: contain;
	background-color: var(--color-gray);
}

.--profile-pic img {
	width: 100%;
	height: 100%;
}

.checkbox-position {
	display: flex;
	align-items: center;
	justify-content: center;
}

.profile-pic {
	width: 50px;
	height: 50px;
	background-color: #ddd;
	border-radius: 50%;
	margin-right: 10px;
}

.actions {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: right;
	padding-right: var(--gap-20);
	gap: 5px;
}

/* =============================
    기업회원 - 이력서 확인 상세
============================= */
.--post-tilte__wrapper {
	position: fixed;
	top: 0px;
	width: 100%;
	height: 68px;
	padding: 20px;
	z-index: 99;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-white);
	box-shadow: 0px 1px 10px 0px var(--color-box-shadow);
}

.--recently-view-box__company {
	position: sticky;
	width: 100% !important;
	max-width: 200px !important;
	min-height: max-content;
}

.--recently-view-box__company .recently-view-box__content {
	max-height: 450px !important;
}

.recently-view-box__img {
	width: 51px;
	height: 66px;
	object-fit: cover;
}

.recently-view-box__img img {
	width: 100%;
	height: 100%;
}


@media (min-width: 1440px) {
	.--recently-view-box__company {
		margin-right: 0px;
	}
}

@media (min-width: 2400px) {
	.--recently-view-box__company {
		margin-right: 0px;
	}
}

@media (min-width: 3500px) {
	.--recently-view-box__company {
		margin-right: 0px;
	}
}

@media (max-width: 1400px) {
	.--recently-view-box__company {
		margin-right: 0px;
		display: block;
	}

	.recently-view-box__top-btn {
		width: 150px;
	}
}

.text-editor__content-wrapper {
	width: 100%;
	height: 100%;
}

.text-editor__content-wrapper p {
	color: var(--color-black) !important;
}

.--view-file__item ul li {
	border: none;
}

.--search-option-restart {
	padding: 5px 10px;
	border-radius: var(--radius-5);
	background-color: var(--color-gray);

	&:hover {
		background-color: var(--color-deep-gray);
	}
}

.--notice-list li {
	&:hover {
		cursor: pointer;
		background-color: var(--color-backgroud-deep);
	}
}

.--tag-new-notice {
	padding: 0px 5px;
	text-align: center;
	color: var(--color-white);
	background-color: var(--color-red);
}

.--aside-ad-img__wrapper img {
	width: 200px !important;
	height: 100% !important;
	object-fit: cover;
}

.my_intro_contents {
	margin-bottom: 100px;
}

#recruitResumeListElem {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* =============================
    반응형 뷰
============================= */
@media (min-width: 1920px) {

	.--slide-width {
		width: 75% !important;
	}

	.main-header__content,
	.sub-header__content {
		width: 75%;
	}
}

@media (max-width: 1410px) {

	.main-aside__wrapper {
		top: 150px;
	}
}

@media (max-width: 910px) {

	.main-aside__wrapper {
		top: 200px;
	}
}

@media (max-width: 768px) {
	.middle-banner-item {
		align-items: center;
		justify-content: center !important;
	}

	.main-logo {
		margin-right: 0px;
	}

	.main-header__content nav {
		padding-left: 5px;
	}

	.panel_menu .structor,
	.structor_layer {
		display: none;
	}

	.panel_menu .extra {
		right: 0;
		bottom: 20px;
	}

	.top-banner__wrapper {
		gap: var(--gap-50) !important;
	}

	.panel_menu__layer {
		padding-bottom: 40px;
	}

	.prev-btn {
		left: 120px !important;
		border-radius: 50%;
		box-shadow: 0px 2px 5px 0px var(--color-box-shadow);
	}

	.next-btn {
		right: 120px !important;
		border-radius: 50%;
		box-shadow: 0px 2px 5px 0px var(--color-box-shadow);
	}

	.main-aside__wrapper {
		top: 195px;
	}

	.search-post__layer {
		flex-direction: column;
	}

	.search-post__layer .main-aside__wrapper {
		width: 100%;
	}

	.main-aside__list>li {
		min-height: 189px;
		border-top: none;
		border-right: 1px solid var(--color-light-gray);
		word-break: keep-all;
	}

	.main-aside__list>li:last-child {
		border-right: none;
	}

	.main-aside__list,
	.recruit-sub-content__wrapper,
	.recruit-sub-content__date {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
	}

	.recruit-sub-content__date {
		gap: 10px;
	}

	.recruit-content__wrapper {
		min-width: 300px;
	}

	.find-member-btn {
		font-size: 16px;
	}

	.limit-date__wrapper {
		flex-direction: column;
	}

	.limit-date__item {

		min-width: 250px;
		border-right: none;
		border-bottom: 1px solid var(--color-light-gray);
	}

	.limit-date__desc p {
		min-width: 100px;
	}

	.--recommend-list__text {
		min-width: 150px;
	}

	.recruit-info__btn {
		min-width: 250px;
	}

	.main-article__ad {
		padding: 0;
		margin-top: var(--gap-30);
	}

	.company-detail__content ul,
	.company-detail__content ul li span {
		min-width: max-content;
	}

	.company-detail__content ul li {
		width: 100%;
		flex-direction: column;
		gap: 10px;
		align-items: center;
		justify-content: center;
	}

	.company-detail__header {
		justify-content: center !important;
	}

	.company-detail__header h4 {
		width: 100%;
		text-align: center;
	}

	.--company-apply-btn {
		width: 180px !important;
	}
}

@media (max-width: 480px) {
	.main-aside__wrapper {
		top: 260px;
	}

	.search__layer input,
	.search__layer .--slide-input {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 100% !important;
	}

	.question-btn {
		position: relative;
		left: 0%;
	}

	.header-modal-hide-btn {
		top: -5px;
		right: 0;
	}

	.--search-input {
		min-width: 210px !important;
		max-width: 210px !important;
	}

	.search-post__layer .main-aside__wrapper {
		display: none;
	}

	.recruit-content__wrapper {
		min-width: 150px;
	}

	.recruit-content__wrapper h5 {
		min-width: 120px;
	}

	.recruit-content__wrapper .btn_star {
		min-width: 18px;
	}

	.find-member-btn {
		font-size: 14px;
	}

	.select-coporate-password-auth__form label {
		font-size: var(--size-14);
	}

	.--recommend-list__btns {
		flex-direction: column;
	}

	.--recommend-list__text {
		padding-left: 20px;
	}

	.recruit-info__btn {
		min-width: 150px;
	}

	.company-detail__content ul li p {
		font-size: 12px;
	}

	.--benefits-list {
		flex-direction: column;
	}

	.--benefits-list li {
		width: 100%;
	}

	.limit-date__item {
		min-width: 200px;
	}

	.--company-location__desc p {
		font-size: var(--size-14);
	}

	.--recommend-list__content>div {
		width: 100%;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.footer_bottom,
	.detail-post-body__header {
		flex-direction: column;
		align-items: flex-start;
	}

	.detail-post-body__header li {
		border-right: none;
	}

	.sns_link {
		width: 100%;
		padding-top: 20px;
		flex-direction: row !important;
	}

	.detail-post-body__intro-list li {
		flex-direction: column;
		gap: 10px;
	}

	.detail-post-body__intro-sub-list,
	.detail-post-body__intro-list li img,
	.detail-post-body__intro-list li p {
		padding-left: 13px;
	}

	.detail-post-body__intro-sub-list li {
		word-break: keep-all;
	}

	.--detail-post__item li,
	.--detail-post__item li div {
		min-width: 180px;
		gap: 10px;
		align-items: center !important;
		justify-content: center !important;
		flex-direction: column;
		text-align: center;
	}

}

.--edit-company-logo-img-box {
	width: 260px;
	height: 87px;
	margin-left: 10px;
	object-fit: contain;
	background-color: #3E4046B2;
	border: 1px solid #3E4046B2;
}

.--edit-company-logo-img-box--square {
	width: 142px;
	height: 137px;
	margin-left: 10px;
	object-fit: contain;
	background-color: #3E4046B2;
	border: 1px solid #3E4046B2;
}

.--edit-company-logo-img-box img,
.--edit-company-logo-img-box--square img {
	width: 100%;
	height: 100%;
}

.admin-nav__deco {
	width: 16px;
	height: 16px;
	background-color: #e8e8e8;
	border-radius: 5px;
}

.admin-nav__layer {
	width: 200px;
	height: calc(100vh - 71px) !important;
	border-radius: 0px !important;
}

.admin-nav__wrapper {
	position: sticky;
	top: 71px;
	padding: 0px;
	align-items: flex-start;
	justify-content: left;
}

.admin-nav__list {
	gap: 0px !important;
	padding-top: 0px !important;
}

.admin-nav__list li {
	display: flex;
	align-items: flex-start !important;
	justify-content: left !important;
	width: 100%;
	padding: 5px 5px 5px 20px;
	border-bottom: 1px solid #e8e8e8;
}

.admin-nav__list li.active {
	color: #000;
	background-color: #c6cfde !important;
}

#headerAdmin {
	position: sticky !important;
	top: 0px !important;
	z-index: 5;
}

.admin-header__wrapper {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	background-color: var(--color-white);
	padding: 10px;
	border-bottom: 1px solid #DADADA;
}

.admin-header__logo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 190px;
}

.admin-header__tab-btn {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.admin-header__tab-btn button {
	width: 116px;
	height: 37px;
	background-color: #d9d9d9;
}

.admin-header__tab-btn button.active {
	background-color: var(--color-blue);
	color: var(--color-white);
}

.admin-content__wrapper {
	padding: 20px 50px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
}

.admin-content__current-menu {
	color: var(--color-deep-gray);
}

.admin-content__current-menu span {
	color: var(--color-black);
}

.admin-content__search-tab {
	display: flex;
	flex-direction: column;
}

.admin-content__search-btn button {
	width: 100px;
	height: 36px;
	background-color: #dadada;
	border-radius: 10px 10px 0px 0px;
	color: #000;
}

.admin-content__search-btn button.active {
	background-color: var(--color-white);
}

.admin-content__search-item {
	width: 100%;
	padding: 20px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	background-color: var(--color-white);
}

.admin-search__btn {
	width: 143px;
	height: 64px;
	background-color: #d9d9d9;
	border-radius: 5px;

	&:hover {
		color: var(--color-white);
		background-color: var(--color-blue);
	}
}

.company-logo__item {
	height: 248px !important;
}

#companyLogoElem {
	width: 173px;
	height: 58px;
	object-fit: contain;
}

#companySymbolElem {
	width: 142px;
	height: 137px;
	object-fit: contain;
}

.admin-content__search-item .custom-select,
#addNoticeModal .custom-select,
#addFaqModal .custom-select,
.faq-number__input {
	max-width: 122px !important;
	min-width: 122px !important;
	height: 28px !important;
	font-size: 12px !important;
}

.faq-number__input {
	padding: 0px 10px !important;
}

.edit-admin__selectes {
	display: flex;
	flex-direction: row;
	gap: 10px;
	width: 100%;
}

.edit-admin__selectes .custom-select {
	max-width: 170px !important;
	min-width: 170px !important;
	font-size: 12px !important;
}

#addFaqModal textarea,
#addIpModal textarea {
	width: 100%;
	padding: 10px;
	min-height: 150px;
	max-height: 150px;
	border: 1px solid #d9d9d9;
}

.admin-faq--view-content {
	padding: 10px 0px;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.admin-faq--question__wrapper h5,
.admin-faq--answer__wrapper h5 {
	padding-bottom: 5px;
	border-bottom: 1px solid #dadada;
}

.admin-faq--answer,
.admin-faq--question {
	min-height: 100px;
	max-height: 100px;
	overflow-y: auto;
	padding: 5px 0px;
}

.admin-content__search-input {
	width: 317px !important;
	height: 28px !important;
	padding: 0px 10px !important;
	font-size: 12px !important;
}

.admin-content__modal-input {
	width: 100% !important;
	height: 28px !important;
	padding: 0px 10px !important;
	font-size: 12px !important;
}

.admin--datepicker-input__wrapper {
	position: relative;
}

.admin--datepicker-input__wrapper input {
	position: relative;
	min-width: 148px !important;
	max-width: 148px !important;
	height: 28px !important;
	padding: 0px 10px !important;
	font-size: 12px !important;
}

.admin--datepicker-input__wrapper img {
	position: absolute;
	top: 7px;
	right: 10px;
}

.admin--datepicker-input__wrapper .datepicker-calendar {
	position: absolute;
	top: 20px;
}

.content-section {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.admin-search__table {
	width: 100%;
	border-collapse: collapse;
	background-color: var(--color-white);
}

.admin-search__table th {
	text-wrap: nowrap !important;
}

.admin-search__table td,
.admin-search__table th {
	padding: 10px 10px !important;
	text-align: center;
	text-wrap: wrap;
	font-size: 14px;
	overflow-wrap: break-word;
	border-bottom: 1px solid #dadada;
}

.admin-search__table td input,
.admin-search__table th input {
	margin-top: 5px;
}

.admin-detail__btn,
.admin-stop__btn,
.admin-ad__btn {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 5px;
	padding: 3px 8px;
	border-radius: 5px;
	background-color: #c6cfde;
}

.admin-detail__btn span {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background-color: var(--color-blue);
}

.admin-stop__btn span {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background-color: #ffd3d3;
}

.admin-ad__btn span {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background-color: #2fff00;
}

.admin-detail-option__btns {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.select-id-stop__btn {
	padding: 5px 20px;
	font-size: 14px;
	color: var(--color-white);
	background-color: var(--color-deep-gray);
	cursor: pointer;

	&:hover {
		background-color: var(--color-dark-gray);
	}
}

.main-section__table--empty-data {
	display: flex;
	align-items: center;
	justify-content: center;
}

.admin-content__footer {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.admin-content__footer--pagination .pagination {
	padding: 0px;
	gap: 0px;
	margin: 0px;
	color: #000;
	background-color: var(--color-white);
}

.admin-content__footer--pagination .pagination .pagination-numbers {
	padding: 0px;
	gap: 0px;
	margin: 0px;
}

.admin-content__footer--pagination .pagination .pagination-btn {
	padding: 5px 10px;
	border-collapse: collapse;
	border: 1px solid #d9d9d9;
}

.content-section {
	width: 100%;
}

.admin-post_add-btn {
	width: 143px;
	height: 29px;
	text-align: center;
	background-color: var(--color-blue);
	color: var(--color-white);
	font-size: 14px;
	margin-right: 20px;
	margin-bottom: 8px;

	&:hover {
		background-color: var(--color-light-blue);
	}
}

.admin-modal--file-btns {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
	justify-content: left;
	margin-top: 20px;
}

.admin-modal--file-btns input {
	max-height: 33px;
	padding: 0px 10px !important;
	font-size: 12px !important;
}

#addNoticeModal {
	max-height: 700px;
	overflow-y: auto;
}

#addNoticeModal .main-form__content {
	max-height: 350px;
	overflow-y: hidden;
}

.admin-modal--sub-info {
	display: flex;
	flex-direction: row;
	gap: 20px;
	align-items: flex-start;
	justify-content: left;
	font-size: 12px;
	color: var(--color-deep-gray);
	padding-bottom: 20px;
	border-bottom: 1px solid #d9d9d9;
}

.admin-modal--view-content {
	margin-top: 10px;
	padding-bottom: 10px;
	min-height: 300px;
	max-height: 300px;
	overflow-y: auto;
	border-bottom: 1px solid #d9d9d9;
}

.admin-modal--upload-files {
	width: 100%;
	padding: 10px;
	border: 1px solid #d9d9d9;
	font-size: 12px;
	color: var(--color-dark-gray);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: left;
	gap: 10px;
}

.notice-detail__title {
	font-size: 34px;
	font-weight: 400;
	padding: 20px 0px;
}

.notice-detail__desc {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 20px;
	font-size: 14px;
	font-weight: 400;
}

.notice-detail__desc img {
	border-radius: 50%;
	width: 35px;
	height: 35px;
	object-fit: contain;
}

.notice-detail__content {
	padding: 20px;
	min-height: 500px;
}

.notice-detail__move-btn {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	font-weight: 400;
	color: var(--color-deep-gray);
	width: 100%;
	gap: 20px;
	padding: 20px;
	border-collapse: collapse;
	border: 1px solid var(--color-deep-gray);

	&:hover {
		background-color: var(--color-backgroud-gray);
	}
}

.notice-detail__back-btn {
	background-color: #d9d9d9;
	padding: 15px 30px;
	margin: 20px 50px 50px 50px;
	border: 1px solid var(--color-deep-gray);

	&:hover {
		background-color: var(--color-gray);
	}
}

.top-main-banner__wrapper {
	display: none !important;
	width: 100%;
	/* 기본적으로 모든 슬라이드를 숨깁니다. */
}

.top-main-banner__wrapper.swiper-slide-active {
	display: block !important;
	/* 활성화된 슬라이드만 보이도록 설정합니다. */
}

.top-main-banner__wrapper-layer {
	position: relative;
	width: 100%;
	height: 450px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 100px;
}

.top-main-banner__wrapper {
	width: 100%;
	height: 450px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 40px 0px;
}

.top-main-banner__layer {
	max-width: 1920px;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.top-main-banner__content-layer {
	width: 100%;
	height: 100%;
	max-width: 1129px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 5%;
}

.top-main-banner__content-left {
	width: 55%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 40px;
}

.top-main-banner__content-left-item {
	height: 22%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.top-main-banner__content-left-item h3 {
	font-size: 40px;
	font-weight: 700;
}

.top-main-banner__content-left-item p {
	font-size: 20px;
	font-weight: 400;
}

.top-main-banner__content-left-item p strong {
	font-size: 20px;
	font-weight: 700;
}

.top-main-banner__content-left-item button {
	width: 280px;
	height: 100%;
	padding: 20px 0px;
	background-color: #0762FF;
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border-radius: 10px;
	transition: all 0.3s ease-in-out;

	&:hover {
		background-color: var(--color-light-blue);
	}
}

.top-main-banner__content-right {
	width: 40%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.top-main-banner__content-right__img-layer {
	position: relative;
	width: 100%;
	height: 100%;
	max-width: 500px;
}

.top-main-banner__content-right img:first-child {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.top-main-banner__content-right img.icon-deco-1 {
	position: absolute;
	bottom: 20%;
	left: -10%;
}

.top-main-banner__content-right img.icon-deco-2 {
	position: absolute;
	bottom: 0;
	right: -5%;
}

@media (max-width: 1024px) {
	.top-main-banner__wrapper-layer {
		height: 600px;
	}

	.top-main-banner-swiper-pagination {
		left: 42% !important;
	}

	.top-main-banner__wrapper {
		padding: 40px;
		height: 600px;
	}

	.top-main-banner__content-layer {
		flex-direction: column;
	}

	.top-main-banner__content-left {
		width: 100%;
		height: max-content;
		gap: 20px;
	}

	.left-item-logo-1 {
		width: 60%;
	}

	.top-main-banner__content-left-item h3 {
		font-size: 24px;
	}

	.top-main-banner__content-left-item p {
		font-size: 14px !important;
	}

	.top-main-banner__content-left-item p strong {
		font-size: 14px;
	}

	.top-main-banner__content-left-item button {
		width: 100%;
		font-size: 14px;
	}

	.top-main-banner__content-right {
		width: 100%;
	}

	.top-main-banner__content-right__img-layer {
		max-width: 300px;
	}
}

/*
.--personal {
	background-color: #FFFBF4;
}

.--personal .top-main-banner__layer {
	gap: 200px;
}

.--ad-top-banner {
	background-color: #f5f5f5;
}

.--ad-top-banner .top-main-banner__layer {
	gap: 0px;
}

.top-main-banner__layer {
	max-width: 1920px;
	display: flex;
	flex-direction: row;
	gap: 150px;
}

.top-main-banner__layer div {
	display: flex;
	align-items: center;
	justify-content: center;
}
*/
.main-banner-desc {
	font-size: 22px;
	font-weight: 400;
	color: var(--color-black);
}

.main-banner-title {
	font-size: 18px;
	font-weight: 700;
	color: #0762FF;
}

.main-banner-logo {
	width: 137px;
	height: 25px;
	object-fit: contain;
}

.main-banner-btn {
	width: 241px !important;
	height: 64px !important;
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.main-banner-btn span {
	margin-left: 20px;
}

.main-banner-ad__wrapper {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 50px 40px;
	background-color: white;
}

.main-banner-ad__layer {
	max-width: 1166px;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 40px;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
}

.main-banner-ad__slider {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 40px;
	border: 1px solid #eeeeee;
	border-radius: 10px;
	width: 485px;
	height: 120px;
}

.main-banner-ad__slider-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	width: 280px;
	gap: 20px;
}

.main-banner-faq__desc {
	background: linear-gradient(103.52deg, #0B9AF2 0%, #0762FF 100%);
	color: white;
	width: 241px;
	height: 210px;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	text-align: left;
	padding: 20px;
	border-radius: 10px;
	font-size: 14px;
}

.main-banner-faq__desc strong {
	font-size: 20px;
}

.main-banner-faq__info {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	gap: 20px;
	background-color: #f7f7f7;
	border-radius: 10px;
	padding: 40px 20px;
	text-align: left;
}

.main-banner-faq__info p {
	color: #555555;
}

.main-banner-faq__info>span {
	width: 100%;
	height: 1px;
	background-color: #dedede;
}

#customerModalContent {
	max-width: 500px;
}

.customer-modal__content__info {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 100%;
	align-items: flex-start;
	justify-content: flex-start;
	font-size: 14px;
	color: #555555;
	word-break: keep-all;
}

.customer-modal__content__info p:first-child {
	font-weight: 700;
	font-size: 15px;
}

.customer-modal__content__btns {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	align-items: flex-start;
	justify-content: flex-start;
	padding-top: 40px;
}

.customer-modal__content__btns__email {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 20px;
	background-color: #ffffff;
	border-radius: 10px;
	border: 1px solid #d9d9d9;

	&:hover {
		background-color: #f9f9f9;
		color: #000;
	}
}

.customer-modal__content__btns__call {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 10px;
	width: 100%;
	padding: 20px;
	background-color: #e8e8e8;
	border-radius: 10px;
	font-size: 14px;
}

.__call_wrapper {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 10px;
}

.customer-modal__content__btns__faq {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 500;
	padding-top: 20px;
	color: #555555;
}

@media (max-width: 1024px) {
	.top-main-banner__layer {
		flex-direction: column;
	}

	.main-banner-ad__top {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.main-banner-ad-1 {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 80vw;
		object-fit: cover;
	}

	.main-banner-ad__slider {
		width: 90vw;
	}

	.main-banner-ad__slider li {
		width: 100%;
		gap: 5px;
		font-size: 12px;
		flex-direction: column;
	}

	.main-banner-ad__bottom {
		flex-direction: column;
	}

	.main-banner-faq__desc {
		height: 168px;
	}

	.top-main-banner__layer h2 {
		font-size: 24px;
	}

	.top-main-banner__layer p {
		font-size: 18px;
	}

	.main-banner-ad__slider li p strong {
		font-size: 12px;
	}

	.main-banner-ad__slider li img {
		width: 30px;
	}

	.main-banner-ad-1 img {
		width: 100%;
		height: 100%;
	}

	.main-banner-faq__wrapper {
		flex-direction: row;
	}

	.main-banner-faq__info {
		flex: 1;
		align-items: center;
		justify-content: center;
	}
}

.custom-swiper {
	width: 640px;
	overflow: hidden;
	position: relative;
}

.custom-swiper-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
}

.custom-swiper-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
}

.custom-swiper-slide.active {
	opacity: 1;
}

.custom-swiper-slide img {
	max-width: 100%;
	height: auto;
	display: block;
}

@media (max-width: 1024px) {
	.custom-swiper {
		width: 500px;
		height: 90px;
	}

	.custom-swiper-slide img {
		width: 100%;
		height: 100%;
	}
}

@media (max-width: 768px) {
	.custom-swiper-slide img {
		width: 500px;
		height: 100%;
	}

	.main-banner-faq__wrapper {
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.main-banner-faq__desc {
		width: 100%;
	}

	.--personal .top-main-banner__layer {
		gap: 150px;
	}

	#customerModalContent .main-form__header h3 {
		font-size: 16px;
	}

	.customer-modal__content__btns__email {
		flex-direction: column;
		gap: 20px;
	}

	.__call_wrapper {
		flex-direction: column;
		gap: 0px;
	}

	.__call_wrapper span {
		font-size: 10px;
	}
}

@media (max-width: 425px) {
	.custom-swiper-slide img {
		width: 300px;
		height: 100%;
	}
}

.top-main-banner-swiper {
	position: relative;
}

.top-main-banner-swiper__wrapper {
	width: 100vw;
	position: relative;
	overflow: hidden;
}

.top-main-banner-swiper__wrapper section {
	position: absolute;
}

.top-main-banner-swiper-pagination {
	position: absolute;
	bottom: 20px;
	left: 48%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

.swiper-pagination-btn {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background-color: #CCCCCC;
}

.--active {
	background-color: #0762FF !important;
}

.text-editor__content-wrapper p img {
	margin: 0 auto !important;
}

.main-swiper__recommend-section-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 20px;

	background-color: #F2F3F7;
	padding: 20px;
	border-radius: 10px;
}

.main-swiper__recommend-section-header {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	font-size: 18px;
	padding-left: 10px;
}

.main-swiper__recommend-section-header img {
	width: 24px;
	height: 24px;
}

.main-swiper__recommend-section-header span {
	font-size: 18px;
	font-weight: 700;
}

.main-swiper__recommend-section-header .--tag-red-solid {
	font-size: 14px;
	padding: 2px 15px !important;
}

@media (max-width: 768px) {

	.main-swiper__recommend-section-header,
	.main-swiper__recommend-section-header span {
		font-size: 14px;
	}

	.main-swiper__recommend-section-header img {
		width: 18px;
		height: 18px;
	}

	.main-swiper__recommend-section-header .--tag-red-solid {
		font-size: 10px;
		padding: 1px 10px !important;
	}
}