@charset "UTF-8";
.container .wrap .join,
.container .wrap .findPw {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-top: 20px;
}
.container .wrap .join .progress-bar,
.container .wrap .findPw .progress-bar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.container .wrap .join .progress-bar progress,
.container .wrap .findPw .progress-bar progress {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
}
.container .wrap .join .progress-bar ::-webkit-progress-bar,
.container .wrap .findPw .progress-bar ::-webkit-progress-bar {
  background-color: grey;
  border-radius: 50px;
  background-color: #f6f4fc;
}
.container .wrap .join .progress-bar ::-webkit-progress-value,
.container .wrap .findPw .progress-bar ::-webkit-progress-value {
  background-color: #5d5fef;
  border-radius: 50px;
}
.container .wrap .join .progress-bar img,
.container .wrap .findPw .progress-bar img {
  width: 20px;
  height: 20px;
}
.container .wrap .join .join-content,
.container .wrap .findPw .join-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
}
.container .wrap .join .join-content .join-txt,
.container .wrap .findPw .join-content .join-txt {
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.container .wrap .join .join-content .join-txt p,
.container .wrap .findPw .join-content .join-txt p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #242424;
}
.container .wrap .join .join-content .join-txt p span,
.container .wrap .findPw .join-content .join-txt p span {
  color: #5d5fef;
}
.container .wrap .join .join-content .join-confirm,
.container .wrap .findPw .join-content .join-confirm {
  gap: 10px;
}
.container .wrap .join .join-content .join-confirm p,
.container .wrap .findPw .join-content .join-confirm p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 20px;
}
.container .wrap .join .join-content .join-confirm span,
.container .wrap .findPw .join-content .join-confirm span {
  margin-top: 10px;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
  color: #8b8b8b;
}
.container .wrap .join .join-content .terms,
.container .wrap .findPw .join-content .terms {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
}
.container .wrap .join .join-content .terms .all-agreed,
.container .wrap .join .join-content .terms .terms-con,
.container .wrap .findPw .join-content .terms .all-agreed,
.container .wrap .findPw .join-content .terms .terms-con {
  width: 100%;
  background-color: #f1f1f1;
  padding: 20px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.container .wrap .join .join-content .terms .all-agreed label,
.container .wrap .join .join-content .terms .terms-con label,
.container .wrap .findPw .join-content .terms .all-agreed label,
.container .wrap .findPw .join-content .terms .terms-con label {
  width: 100%;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #3d3d3d;
}
.container .wrap .join .join-content .terms .all-agreed label a,
.container .wrap .join .join-content .terms .terms-con label a,
.container .wrap .findPw .join-content .terms .all-agreed label a,
.container .wrap .findPw .join-content .terms .terms-con label a {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #3d3d3d;
}
.container .wrap .join .join-content .terms .all-agreed label a span,
.container .wrap .join .join-content .terms .terms-con label a span,
.container .wrap .findPw .join-content .terms .all-agreed label a span,
.container .wrap .findPw .join-content .terms .terms-con label a span {
  color: #3d3d3d;
}
.container .wrap .join .join-content .terms .terms-con,
.container .wrap .findPw .join-content .terms .terms-con {
  background-color: transparent;
  padding: 10px 20px;
}
.container .wrap .join .join-content .terms .terms-con label,
.container .wrap .findPw .join-content .terms .terms-con label {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
}
.container .wrap .join .join-content .terms .terms-con label a,
.container .wrap .findPw .join-content .terms .terms-con label a {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
}
.container .wrap .join .join-content .terms .terms-con label a span,
.container .wrap .findPw .join-content .terms .terms-con label a span {
  color: #3d3d3d;
}
.container .wrap .join .join-content .img,
.container .wrap .findPw .join-content .img {
  width: 230px;
  height: 230px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .wrap .join .join-content .img img,
.container .wrap .findPw .join-content .img img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.container .wrap .join .join-content .join-biz-txt,
.container .wrap .findPw .join-content .join-biz-txt {
  display: flex;
  align-items: center;
}
.container .wrap .join .join-content .join-biz-txt p,
.container .wrap .findPw .join-content .join-biz-txt p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #3d3d3d;
}
.container .wrap .join .join-content .join-biz-txt p span,
.container .wrap .findPw .join-content .join-biz-txt p span {
  color: #5d5fef;
}
.container .wrap .join .emailInfo,
.container .wrap .join .socialInfo,
.container .wrap .findPw .emailInfo,
.container .wrap .findPw .socialInfo {
  margin-top: 30px;
  border: 1px solid #5d5fef;
  background-color: #f6f4fc;
  border-radius: 10px;
  padding: 50px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.container .wrap .join .emailInfo p,
.container .wrap .join .socialInfo p,
.container .wrap .findPw .emailInfo p,
.container .wrap .findPw .socialInfo p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #3d3d3d;
}
.container .wrap .join .emailInfo .socialMail,
.container .wrap .join .socialInfo .socialMail,
.container .wrap .findPw .emailInfo .socialMail,
.container .wrap .findPw .socialInfo .socialMail {
  color: #555555;
  font-weight: 500;
}
.container .wrap .join .emailInfo .socialInfoCon,
.container .wrap .join .socialInfo .socialInfoCon,
.container .wrap .findPw .emailInfo .socialInfoCon,
.container .wrap .findPw .socialInfo .socialInfoCon {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.container .wrap .join .emailInfo .socialInfoCon p,
.container .wrap .join .socialInfo .socialInfoCon p,
.container .wrap .findPw .emailInfo .socialInfoCon p,
.container .wrap .findPw .socialInfo .socialInfoCon p {
  font-weight: 500;
  color: #6f6f6f;
  font-size: 14px;
}

.email {
  background-color: #f6f4fc;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  padding: 100px;
}
.email .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  padding: 50px 50px 70px 50px;
  border-radius: 50px;
  background-color: #5d5fef;
  width: 50%;
}
.email .wrap .logo {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.email .wrap .logo img {
  width: 150px;
}
.email .wrap .txt {
  border: 2px solid #ffffff;
  border-radius: 30px;
  padding: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 70%;
  background-color: rgba(255, 255, 255, 0.5);
}
.email .wrap .txt .title p {
  font-weight: 700;
  font-size: 20px;
  color: #3D3D3D;
  letter-spacing: 0.5px;
  text-align: center;
}
.email .wrap .txt .con p {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.5px;
  color: #555555;
  text-align: center;
}
.email .wrap .txt .button {
  width: 100%;
  display: flex;
  justify-content: center;
}
.email .wrap .txt .button button {
  font-weight: 700;
  font-size: 18px;
  background-color: #5d5fef;
  border-radius: 20px;
  color: #ffffff;
  padding: 16px;
  width: 100%;
  margin-top: 20px;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  color: #ffffff;
}

.container .modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}
.container .modal {
  width: 280px;
  max-height: 90vh;
  overflow-y: scroll;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  background-color: white;
  padding: 0 20px 30px 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.container .modal .modal-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.container .modal .modal-content .modal-header {
  width: calc(100% + 40px);
  margin: 0 -20px;
  height: 45px;
  padding: 0px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background-color: #ffffff;
}
.container .modal .modal-content .modal-header span {
  font-size: 22px;
  cursor: pointer;
}
.container .modal .modal-content .modal-header h2 {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  word-break: keep-all;
  color: #242424;
}
.container .modal .modal-content form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.container .modal .modal-content form .radio-option {
  display: flex;
  align-items: center;
  gap: 5px;
}
.container .modal .modal-content form .radio-option label {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  word-break: keep-all;
  color: #242424;
}
.container .modal .modal-content form textarea {
  margin-top: 10px;
  width: 100%;
  height: 100px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  word-break: keep-all;
  color: #242424;
}
.container .modal .modal-content form textarea::placeholder {
  color: #e7e7e7;
}
.container .modal .modal-content form textarea:focus {
  outline: none;
}
.container .modal .modal-content button {
  width: 100%;
  border-radius: 10px;
  background-color: #5d5fef;
  padding: 10px;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  word-break: keep-all;
  color: #242424;
  color: #ffffff;
}
.container .modal-review {
  width: 300px;
}
.container .modal-review .modal-content {
  gap: 20px;
}
.container .modal-review .modal-content .modal-header {
  margin-bottom: 10px;
}
.container .modal-review .modal-content .rating {
  display: flex;
  gap: 10px;
  align-items: center;
}
.container .modal-review .modal-content .rating .rating-text {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  word-break: keep-all;
  color: #242424;
  line-height: 16px;
}
.container .modal-review .modal-content .rating .star-rating {
  display: flex;
  font-size: 16px;
  color: #ccc;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  line-height: 16px;
}
.container .modal-review .modal-content .rating .star-rating .star {
  margin-right: 5px;
}
.container .modal-review .modal-content input {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 8px 10px;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  word-break: keep-all;
  color: #242424;
}
.container .modal-review .modal-content input::placeholder {
  color: #e7e7e7;
}
.container .modal-review .modal-content textarea {
  width: 100%;
  height: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  word-break: keep-all;
  color: #242424;
}
.container .modal-review .modal-content textarea::placeholder {
  color: #e7e7e7;
}
.container .modal-review .modal-content textarea:focus {
  outline: none;
}
.container .modal-review .modal-content .button {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}
.container .modal-review .modal-content .button button {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  word-break: keep-all;
  color: #242424;
  color: #ffffff;
}
.container .modal-review .modal-content .button button:first-child {
  background-color: #f6f4fc;
  border: 1px solid #5d5fef;
  color: #5d5fef;
}
.container .application {
  width: 85%;
}
.container .application .modal-content .recruitment-apply {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-top: 0px;
}
.container .application .modal-content .recruitment-apply .status {
  display: flex;
}
.container .application .modal-content .recruitment-apply .status .badgeA,
.container .application .modal-content .recruitment-apply .status .badgeB,
.container .application .modal-content .recruitment-apply .status .badgeC,
.container .application .modal-content .recruitment-apply .status .badgeD {
  padding: 10px 15px;
  background-color: #4caf50;
  color: #ffffff;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .application .modal-content .recruitment-apply .status .badgeA p,
.container .application .modal-content .recruitment-apply .status .badgeB p,
.container .application .modal-content .recruitment-apply .status .badgeC p,
.container .application .modal-content .recruitment-apply .status .badgeD p {
  font-size: 12px;
  font-weight: 500;
  line-height: 11px;
  color: #ffffff;
}
.container .application .modal-content .recruitment-apply .status .badgeB {
  background-color: #c62828;
}
.container .application .modal-content .recruitment-apply .status .badgeC {
  background-color: #ffc107;
}
.container .application .modal-content .recruitment-apply .status .badgeD {
  background-color: #9e9e9e;
}
.container .application .modal-content .recruitment-apply .check {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.container .application .modal-content .recruitment-apply .check .title p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
}
.container .application .modal-content .recruitment-apply .check .txt p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
  font-weight: 500;
  font-size: 13px;
  color: #555555;
}
.container .application .modal-content .recruitment-apply .choice {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.container .application .modal-content .recruitment-apply .choice .title p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
}
.container .application .modal-content .recruitment-apply .choice .cv {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.container .application .modal-content .recruitment-apply .choice .cv .profile {
  display: flex;
  align-items: center;
  gap: 5px;
  border-radius: 10px;
  background-color: #f9f9f9;
  padding: 15px;
  border: 1px solid #ccc;
}
.container .application .modal-content .recruitment-apply .choice .cv .profile .radio {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
}
.container .application .modal-content .recruitment-apply .choice .cv .profile .radio .txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.container .application .modal-content .recruitment-apply .choice .cv .profile .radio .txt label p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
  font-weight: 500;
}
.container .application .modal-content .recruitment-apply .choice .cv .profile .buttons {
  display: flex;
  align-items: center;
  gap: 3px;
}
.container .application .modal-content .recruitment-apply .choice .cv .profile .buttons button {
  padding: 3px 9px;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
  font-weight: 500;
  font-size: 10px;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 7px;
}
.container .application .modal-content .recruitment-apply .msg {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.container .application .modal-content .recruitment-apply .msg .title p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
}
.container .application .modal-content .recruitment-apply .msg .msg-content {
  border: 1px solid #ccc;
  padding: 15px;
  border-radius: 10px;
  background-color: #f9f9f9;
}
.container .application .modal-content .recruitment-apply .msg .msg-content p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
  font-weight: 500;
  font-size: 12px;
  color: #555555;
}
.container .application .modal-content .recruitment-apply .button {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}
.container .application .modal-content .recruitment-apply .button button {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  word-break: keep-all;
  color: #242424;
  color: #ffffff;
  border-radius: 10px;
  padding: 10px 20px;
}
.container .application .modal-content .recruitment-apply .button button:first-child {
  background-color: #f6f4fc;
  border: 1px solid #5d5fef;
  color: #5d5fef;
}
.container .modal-error .txt {
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
}
.container .modal-error .button {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}
.container .modal-error .button button {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  word-break: keep-all;
  color: #242424;
  color: #ffffff;
  border-radius: 10px;
  padding: 10px 20px;
}
.container .modal-error .button button:first-child {
  background-color: #f6f4fc;
  border: 1px solid #5d5fef;
  color: #5d5fef;
}

.serviceModal .serviceModalCon {
  width: 90vw;
}
.serviceModal .serviceModalCon .modal-content {
  gap: 0px;
}
.serviceModal .serviceModalCon .modal-content img {
  width: 100%;
}

@font-face {
  font-family: "Pretendard-Regular";
  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
html,
body {
  margin: 0;
  padding: 0;
  background-color: #fff;
}

* {
  font-family: "Pretendard-Regular", serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 100%;
  margin: 0 auto;
  position: relative;
  padding: 0px 20px;
  padding-bottom: 56px;
}

.bg-light {
  background-color: #f6f4fc;
  height: 100vh;
}

.wrap {
  width: 100%;
  position: relative;
}

a {
  text-decoration: none;
  color: #242424;
}

ul,
ol,
li {
  list-style: none;
}

.hidden {
  visibility: hidden;
}

input,
button {
  border: none;
}

button {
  cursor: pointer;
}

.main-color {
  color: #5d5fef;
  font-weight: 700;
}

input[type=text],
input[type=password] {
  outline: none;
}

input[type=text],
input[type=password] {
  caret-color: #242424;
  caret-color: #242424;
}
input[type=text]:focus,
input[type=password]:focus {
  outline: none;
}

select:focus {
  outline: none;
}

input[type=text]::placeholder,
input[type=password]::placeholder {
  color: #e7e7e7;
}

.pd-10 {
  padding-top: 10px;
}

.btn-wrap {
  z-index: 999;
  width: 100%;
  height: 75px;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  background-color: #fff;
  padding: 10px 15px 15px 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-wrap button {
  background: #5d5fef;
  border-radius: 16px;
  color: #fff;
  width: 100%;
  height: 50px;
  border: none;
  cursor: pointer;
  letter-spacing: 1px;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  letter-spacing: 0.3px;
}

.btn-wrap {
  z-index: 999;
  width: 100%;
  height: 75px;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  background-color: #fff;
  padding: 10px 15px 15px 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-wrap a {
  width: 100%;
}
.btn-wrap a button {
  background: #5d5fef;
  border-radius: 16px;
  color: #fff;
  width: 100%;
  height: 50px;
  border: none;
  cursor: pointer;
  letter-spacing: 1px;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  letter-spacing: 0.3px;
}

.btn-wrap2 {
  z-index: 999;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  background-color: #fff;
  padding: 10px 15px 15px 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.btn-wrap2 button {
  background: #5d5fef;
  border-radius: 16px;
  color: #fff;
  width: 100%;
  height: 50px;
  border: none;
  cursor: pointer;
  letter-spacing: 1px;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  letter-spacing: 0.3px;
}
.btn-wrap2 button:nth-child(1) {
  background-color: #f6f4fc;
  border: 1px solid #5d5fef;
  color: #5d5fef;
}

.btn-wrap-disabled {
  z-index: 999;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  background-color: #fff;
  padding: 10px 15px 15px 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-wrap-disabled button {
  background: #e7e7e7;
  border-radius: 16px;
  color: #fff;
  width: 100%;
  height: 50px;
  border: none;
  cursor: pointer;
  letter-spacing: 1px;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  letter-spacing: 0.3px;
}

header {
  width: calc(100% + 40px);
  margin-left: -20px;
  margin-right: -20px;
  position: sticky;
  z-index: 999;
  top: 0;
  background: #ffffff;
  padding: 0px 15px;
  height: 50px;
}
header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
}
header .wrap .header-left,
header .wrap .header-right {
  width: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}
header .wrap .header-left .icon,
header .wrap .header-right .icon {
  width: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}
header .wrap .header-left .icon a,
header .wrap .header-right .icon a {
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}
header .wrap .header-left .icon a img,
header .wrap .header-right .icon a img {
  width: 70%;
  height: 70%;
}
header .wrap .logo {
  width: 100px;
}
header .wrap .logo .icon {
  width: 100%;
}
header .wrap .logo .icon a {
  width: 100%;
}
header .wrap .logo .icon a img {
  width: 100%;
  height: 100%;
}
header .wrap .header-center .txt p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #242424;
  word-break: keep-all;
}

.search-bar {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
}
.search-bar input {
  width: 100%;
  border-radius: 10px;
  padding: 12px 45px 12px 45px;
  font-size: 12px;
  font-weight: 500;
  background-color: #f9f9f9;
}
.search-bar input::placeholder {
  color: #e7e7e7;
}
.search-bar .searchImage {
  width: 17px;
  position: absolute;
  left: 15px;
}
.search-bar .deleteImage {
  width: 17px;
  position: absolute;
  right: 15px;
  cursor: pointer;
}

footer {
  border-top: 1px solid #ddd;
  width: calc(100% + 40px);
  margin: 0 -20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
footer .arrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
footer .arrow p {
  font-size: 10px;
  color: #8b8b8b;
}
footer .arrow img {
  width: 10px;
  height: 10px;
}
footer .top {
  display: flex;
  align-items: stretch;
  gap: 50px;
}
footer .top .cs {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
footer .top .cs .title a {
  font-weight: 600;
  font-size: 11px;
  color: #5d5fef;
  line-height: 1.5;
  vertical-align: middle;
  display: inline-block;
}
footer .top .cs .qna a {
  font-weight: 500;
  font-size: 10px;
  color: #242424;
  line-height: 1.5;
  vertical-align: middle;
  display: inline-block;
}
footer .top .cs .time {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
footer .top .cs .time p {
  font-size: 10px;
  color: #8b8b8b;
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
}
footer .top .social {
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: space-between;
}
footer .top .social .title {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
footer .top .social .title p {
  font-weight: 600;
  font-size: 11px;
  color: #5d5fef;
  line-height: 1.5;
  vertical-align: middle;
  display: inline-block;
}
footer .top .social .title .img {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.5;
}
footer .top .social .title .img a img {
  width: 12px;
  height: 12px;
}
footer .top .social .terms {
  display: flex;
  align-items: center;
  gap: 10px;
}
footer .top .social .terms a {
  font-weight: 500;
  font-size: 10px;
  color: #8b8b8b;
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
}
footer .bottom {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
footer .bottom p,
footer .bottom a {
  font-size: 10px;
  color: #8b8b8b;
  font-weight: 500;
}
footer .bottom .mb7 {
  margin-bottom: 7px;
}
footer .bottom a {
  color: #5d5fef;
  font-weight: 600;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.login-form .login-input {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.login-form .login-input p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #3d3d3d;
}
.login-form .login-input p span {
  color: #ff5959;
  font-size: 14px;
  font-weight: 500;
}
.login-form .login-input input[type=text],
.login-form .login-input select,
.login-form .login-input input[type=email],
.login-form .login-input input[type=password] {
  border: 1px solid #e7e7e7;
  width: 100%;
  padding: 10px 15px 10px 15px;
  border-radius: 10px;
  outline: none;
  caret-color: #5d5fef;
  color: #555555;
  background-color: #ffffff;
}
.login-form .login-input input[type=text]::placeholder,
.login-form .login-input select::placeholder,
.login-form .login-input input[type=email]::placeholder,
.login-form .login-input input[type=password]::placeholder {
  font-size: 12px;
  color: #e7e7e7;
}
.login-form .login-input input[type=text]:focus,
.login-form .login-input select:focus,
.login-form .login-input input[type=email]:focus,
.login-form .login-input input[type=password]:focus {
  outline: none;
}
.login-form .login-input .err-text {
  display: flex;
  align-items: center;
  gap: 3px;
}
.login-form .login-input .err-text span {
  font-weight: 700;
  font-size: 12px;
  color: #ff5959;
}
.login-form .login-input #custom-button {
  padding: 10px 15px 10px 15px;
  color: white;
  background-color: #5d5fef;
  border: 1px solid #5d5fef;
  border-radius: 10px;
  cursor: pointer;
}
.login-form .login-input #custom-button:hover {
  background-color: #0056b3;
}
.login-form .login-input #custom-text {
  font-size: 12px;
  color: #555555;
}
.login-form .login-input button {
  padding: 10px 15px;
  border-radius: 10px;
  font-weight: 400;
  font-size: 12px;
  color: #3d3d3d;
  letter-spacing: 0.5px;
  color: #5d5fef;
  border: 1px solid #5d5fef;
  background-color: #ffffff;
  cursor: pointer;
}
.login-form .login-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: -15px;
}
.login-form .login-option .toggle {
  display: flex;
  align-items: center;
  gap: 3px;
}
.login-form .login-option .toggle input {
  display: none;
}
.login-form .login-option .toggle .toggle-switch {
  width: 30px; /* 너비를 30px로 조정 */
  height: 15px; /* 높이 조정 */
  display: block;
  position: relative;
  border-radius: 7.5px; /* 둥근 모서리 반경 조정 */
  background-color: #fff;
  box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  margin: 10px 5px 10px 5px; /* 마진 조정 */
  transition: all 0.2s ease-in;
}
.login-form .login-option .toggle .toggle-switch .toggle-button {
  width: 10px; /* 버튼의 너비 조정 */
  height: 10px; /* 버튼의 높이 조정 */
  position: absolute;
  top: 50%;
  left: 2px; /* 초기 위치 조정 */
  transform: translateY(-50%);
  border-radius: 50%;
  background: #f03d3d;
  transition: all 0.2s ease-in;
}
.login-form .login-option .toggle input[type=checkbox]:checked ~ .toggle-switch {
  background: #f03d3d;
}
.login-form .login-option .toggle input[type=checkbox]:checked ~ .toggle-switch .toggle-button {
  left: calc(100% - 14px); /* 체크 시 버튼의 위치 조정 */
  background: #fff;
}
.login-form .login-option .toggle span {
  font-weight: 400;
  font-size: 12px;
  color: #3d3d3d;
  letter-spacing: 0.5px;
}
.login-form .login-option .forgot-pw p {
  font-weight: 500;
  font-size: 12px;
  color: #5d5fef;
  letter-spacing: 0.5px;
}
.login-form .login-button {
  width: 100%;
}
.login-form .login-button button {
  width: 100%;
  background-color: #5d5fef;
  padding: 15px;
  border-radius: 50px;
  color: #ffffff;
}

ul.nav {
  z-index: 999;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 80px;
  background-color: #fff;
  border-top: 1px solid #dfdfdf;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding: 10px 15px 20px 15px;
}
ul.nav li {
  padding: 10px 20px;
}
ul.nav li a {
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  gap: 4px;
}
ul.nav li a p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 400;
  font-size: 10px;
  text-align: center;
  color: #8b8b8b;
}
ul.nav li a i img {
  width: 22px;
  height: 22px;
}
ul.nav .on {
  background-color: #5d5fef;
  border-radius: 16px;
}
ul.nav .on p {
  color: #ffffff;
}
ul.nav .on i span {
  color: #ffffff;
}

.swiper1 {
  width: calc(100% + 40px);
  margin-left: -20px;
  margin-right: -20px;
  height: 170px;
  position: relative;
}
.swiper1 swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.swiper1 swiper-slide a .img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.swiper1 swiper-slide a .img img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.swiper-wrap {
  display: flex;
  align-items: center;
  background-color: #7879f1;
  width: calc(100% + 40px);
  margin-left: -15px;
  margin-right: -15px;
  padding-left: 10px;
}
.swiper-wrap p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  word-break: keep-all;
  color: #ffffff;
  font-weight: 700;
  width: 15%;
}
.swiper-wrap .swiper2 {
  width: 85%;
  height: 50px;
  background-color: #7879f1;
  display: flex;
  justify-content: center;
}
.swiper-wrap .swiper2 swiper-slide {
  display: flex;
  align-items: center;
  text-align: left;
  width: 100%;
}
.swiper-wrap .swiper2 swiper-slide a {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  word-break: keep-all;
  color: #ffffff;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  width: 97%;
}

.login {
  background-color: #5d5fef;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  padding-bottom: 0px;
  height: 100%;
  margin-top: -18px;
  height: 100vh;
}
.login header {
  background-color: transparent;
  position: relative;
  width: 100%;
  padding: 0px;
}
.login header > .wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 50px;
}
.login header > .wrap .header-left,
.login header > .wrap .header-right {
  width: 24px;
}
.login header > .wrap .header-left .icon,
.login header > .wrap .header-right .icon {
  width: 24px;
}
.login header > .wrap .header-left .icon a,
.login header > .wrap .header-right .icon a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.login header > .wrap .header-left .icon a span,
.login header > .wrap .header-right .icon a span {
  font-size: 15px;
  color: #ffffff;
}
.login header > .wrap .header-center .txt p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #242424;
  word-break: keep-all;
}
.login .wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  height: 100%;
}
.login .wrap .login-txt {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.login .wrap .login-txt div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  margin-bottom: 15px;
}
.login .wrap .login-txt div p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #242424;
  font-size: 18px;
  color: #ffffff;
}
.login .wrap .login-txt span {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #ffffff;
}
.login .wrap main {
  width: calc(100% + 40px);
  margin-left: -20px;
  margin-right: -20px;
  padding: 30px 15px;
  background-color: #ffffff;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  height: 100%;
}
.login .wrap main .member {
  background-color: #f1f1f1;
  padding: 5px;
  border-radius: 10px;
  display: flex;
  align-items: center;
}
.login .wrap main .member button {
  width: 100%;
  background-color: #f1f1f1;
  border-radius: 10px;
  padding: 9px 30px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease, margin-left 0.3s ease;
  margin-right: 10px;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #ffffff;
  color: #555555;
}
.login .wrap main .member button:first-child {
  background-color: #ffffff;
}
.login .wrap main .member button:last-child {
  margin-right: 0;
}
.login .wrap main .member .active {
  background-color: #ffffff;
}
.login .wrap main .social-login {
  margin: 10px 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
.login .wrap main .join {
  display: flex;
  justify-content: center;
  align-items: center;
}
.login .wrap main .join p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #ffffff;
  color: #555555;
  font-size: 12px;
}
.login .wrap main .join p a {
  font-weight: 500;
  text-decoration: underline;
  margin-left: 3px;
  cursor: pointer;
}

.main-main {
  background-color: #f9f9f9;
  padding-bottom: 0px;
}

main {
  display: flex;
  flex-direction: column;
  padding-bottom: 30px;
  width: calc(100% + 40px);
  margin: 0 -20px;
  padding: 0 20px;
  padding-bottom: 30px;
}
main .menu {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: flex-end;
  width: calc(100% + 40px);
  margin: 0 -20px;
  padding: 30px 20px;
}
main .menu .main-title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
main .menu .main-title p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #242424;
}
main .menu .main-title .ad {
  color: #8b8b8b;
  font-size: 10px;
}
main .menu .main-title .delete-all {
  display: flex;
  align-items: center;
  gap: 5px;
}
main .menu .main-title .delete-all p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  font-size: 11px;
  color: #8b8b8b;
  font-weight: 500;
}
main .menu .main-title .delete-all img {
  width: 15px;
  height: 15px;
}
main .menu .arrow {
  justify-content: flex-start;
  gap: 5px;
}
main .menu .arrow img {
  width: 18px;
  height: 18px;
}
main .menu .menu-ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
main .menu .menu-ul li {
  width: 30%;
  border-radius: 10px;
  transition: all 0.3s;
  cursor: pointer;
  margin-right: 10px;
  background-color: #ffffff;
  box-shadow: 2px 3px 5px 0 rgba(0, 0, 0, 0.1);
  padding: 15px 20px;
}
main .menu .menu-ul li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
main .menu .menu-ul li a p {
  width: 100%;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  word-break: keep-all;
  color: #242424;
  letter-spacing: -0.3px;
}
main .menu .menu-ul li a .img {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
main .menu .menu-ul li a .img img {
  width: 23px;
  height: 23px;
}
main .menu .menu-ul li:nth-child(1) {
  width: calc(50% - 5px);
}
main .menu .menu-ul li:nth-child(2) {
  width: calc(50% - 5px);
  margin-right: 0px;
}
main .menu .menu-ul li:nth-child(3) {
  margin-top: 10px;
  width: 100%;
  margin-right: 0px;
}
main .menu .menu-ul2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
main .menu .menu-ul2 li {
  width: calc(50% - 5px);
  border-radius: 10px;
  transition: all 0.3s;
  cursor: pointer;
  padding: 10px;
  background-color: #f5f5f5;
  margin-bottom: 5px;
}
main .menu .menu-ul2 li a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #3d3d3d;
}
main .menu .menu-ul2 li a .img {
  display: flex;
  justify-content: center;
  align-items: center;
}
main .menu .menu-ul2 li a .img img {
  width: 22px;
  height: 22px;
}
main .menu .menu-ul2 li a p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  word-break: keep-all;
  color: #242424;
  letter-spacing: -0.3px;
  font-size: 12px;
}
main .menu .menu-ul2 li:hover {
  background-color: #5d5fef;
}
main .menu .menu-ul2 li:hover a {
  color: #ffffff;
}
main .menu .menu-ul2 li:last-child {
  width: 100%;
}
main .menu .menu-ul3 {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
main .menu .menu-ul3 li {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  height: 70px;
}
main .menu .menu-ul3 li .img {
  width: 50%;
  height: 100%;
  background-color: #f1f1f1;
}
main .menu .menu-ul3 li .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
main .menu .menu-ul3 li .txt {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
main .menu .menu-ul3 li .txt p:nth-child(1) {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  word-break: keep-all;
}
main .menu .menu-ul3 li .txt p:nth-child(2) {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  word-break: keep-all;
}
main .menu .more-btn {
  padding-top: 10px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
  background-color: transparent;
  color: #242424;
}
main .menu .more-btn p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  word-break: keep-all;
  text-align: center;
  line-height: 12px;
}
main .menu .more-btn img {
  width: 16px;
  height: 16px;
}
main .menu .more-btn:hover {
  background-color: #2f31ea;
}
main .menu .main-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}
main .menu .main-content ul {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
main .menu .main-content ul li {
  width: 100%;
  padding: 10px 5px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  gap: 7px;
}
main .menu .main-content ul li img {
  width: 22px;
  height: 22px;
}
main .menu .main-content ul li p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  word-break: keep-all;
}
main .menu .search-history {
  display: flex;
  gap: 15px;
  width: 100%;
  padding-top: 10px;
}
main .menu .search-history .search-history-content {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: 5px;
  border-radius: 20px;
  padding: 10px;
  background-color: #f9f9f9;
}
main .menu .search-history .search-history-content p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  word-break: keep-all;
  color: #8b8b8b;
}
main .menu .search-history .search-history-content img {
  width: 13px;
  height: 13px;
}
main .menu2,
main .menu4,
main .menu5 {
  background-color: #ffffff;
  width: calc(100% + 40px);
  margin: 0 -20px;
  padding: 30px 20px;
}
main .menu3 {
  gap: 20px;
}
main .menu3 .category {
  width: 100%;
}
main .menu3 .category .categoryWrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
main .menu3 .category .categoryWrap .categoryDiv {
  background-color: #ffffff;
  padding: 7px 15px;
  border-radius: 20px;
}
main .menu3 .category .categoryWrap .categoryDiv p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  color: #555555;
}
main .menu3 .category .categoryWrap .categoryDiv:focus {
  border: 1px solid #5d5fef;
}
main .menu3 .category .categoryWrap .categoryDiv:focus p {
  color: #5d5fef;
  font-weight: 700;
}
main .menu3 .category .categoryWrap .on {
  background-color: #f6f4fc;
  border: 1px solid #5d5fef;
}
main .menu3 .category .categoryWrap .on p {
  color: #5d5fef;
  font-weight: 700;
}
main .menu3 .recruitment-result-wrap {
  width: calc(100% + 40px);
  margin: 0px -20px;
  padding: 0px 20px;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
}
main .menu3 .recruitment-result-wrap .recruitment {
  width: 100%;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 20px 10px;
  gap: 13px;
  border: 1px solid #f1f1f1;
  cursor: pointer;
}
main .menu3 .recruitment-result-wrap .recruitment .content-l {
  display: flex;
  justify-content: center;
  align-items: center;
}
main .menu3 .recruitment-result-wrap .recruitment .content-l .img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
main .menu3 .recruitment-result-wrap .recruitment .content-l .img img {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
main .menu3 .recruitment-result-wrap .recruitment .content {
  width: calc(100% - 63px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
main .menu3 .recruitment-result-wrap .recruitment .content .title {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
main .menu3 .recruitment-result-wrap .recruitment .content .title p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 16px;
  word-break: keep-all;
  font-size: 12px;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
main .menu3 .recruitment-result-wrap .recruitment .content .txt {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
main .menu3 .recruitment-result-wrap .recruitment .content .txt .location {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
}
main .menu3 .recruitment-result-wrap .recruitment .content .txt .location .locationText {
  display: flex;
  align-items: center;
  gap: 3px;
}
main .menu3 .recruitment-result-wrap .recruitment .content .txt .location .locationText p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  color: #242424;
  font-size: 11px;
}
main .menu3 .recruitment-result-wrap .recruitment .content .txt .location img {
  width: 11px;
  height: 11px;
}
main .menu3 .recruitment-result-wrap .recruitment .content .txt .endDate {
  width: 100%;
  text-align: right;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  color: #242424;
  font-size: 10px;
  color: #8b8b8b;
}
main .menu3 .recruitment-result-wrap .recruitment .content .txt p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  color: #242424;
  font-size: 11px;
}
main .menu6 {
  padding: 0px 20px;
  padding-bottom: 30px;
  background-color: #ffffff;
}
main .menu6 .company-info {
  width: calc(100% + 40px);
  margin: 0 -20px;
  padding: 30px 20px;
  background-color: #f6f4fc;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
main .menu6 .company-info .txt {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
main .menu6 .company-info .txt p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0px;
  color: #242424;
  word-break: keep-all;
}
main .menu6 .company-info .buttons {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}
main .menu6 .company-info .buttons button {
  height: 52px;
  padding: 8px 15px;
  background-color: #3d3d3d;
  border-radius: 50px;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0px;
  color: #ffffff;
  word-break: keep-all;
  line-height: 11px;
  display: flex;
  align-items: center;
  gap: 7px;
  line-height: 15px;
  text-align: left;
}
main .menu6 .company-info .buttons button:last-child {
  background-color: #5d5fef;
}
main .menu6 .company-info .buttons button img {
  width: 10px;
  height: 10px;
}
main .search {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 50px;
}
main .search .main-title {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 22px;
}
main .member-profile .main-title p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
}
main .notifications {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: -15px;
}
main .notifications .tabs {
  width: calc(100% + 40px);
  margin-left: -20px;
  margin-right: -20px;
  padding: 15px 15px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  border-bottom: 2px solid #eee;
}
main .notifications .tabs li {
  padding: 10px 15px;
  cursor: pointer;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 13px;
  word-break: keep-all;
}
main .notifications .tabs li.active {
  background-color: #f6f4fc;
}
main .notifications .tab-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
main .notifications .tab-content .content {
  width: 100%;
  display: none;
  background-color: #f9f9f9;
  padding: 15px;
  border-radius: 15px;
}
main .notifications .tab-content .content.active {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}
main .notifications .tab-content .content.active img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: 50%;
}
main .notifications .tab-content .content.active .txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
main .notifications .tab-content .content.active .txt p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
}
main .notifications .tab-content .content.active .txt p:nth-child(2) {
  color: #8b8b8b;
  font-size: 10px;
}
main .notifications .tab-content .content.active .delete {
  width: 15px;
  height: 15px;
}

.profile-list {
  background-color: #f6f4fc;
  padding-bottom: 100px;
}
.profile-list .wrap .profile-list-main {
  gap: 15px;
}
.profile-list .wrap .profile-list-main .category {
  width: calc(100% + 40px);
  margin-right: -20px;
  margin-left: -20px;
  background-color: #ffffff;
  padding: 5px 0px;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 50px; /* 헤더의 높이를 고려한 값으로 조정 */
  z-index: 1000; /* 다른 콘텐츠 위에 표시되도록 z-index 설정 */
  background: white; /* 배경색을 설정하여 내용이 겹치지 않도록 함 */
  border-bottom: 1px solid #ccc;
}
.profile-list .wrap .profile-list-main .category swiper-container {
  width: 100%;
  padding: 0px 15px;
}
.profile-list .wrap .profile-list-main .category swiper-container swiper-slide {
  width: auto;
  padding: 8px 10px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.profile-list .wrap .profile-list-main .category swiper-container swiper-slide img {
  width: 18px;
  height: 18px;
}
.profile-list .wrap .profile-list-main .category swiper-container swiper-slide p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
}
.profile-list .wrap .profile-list-main .category swiper-container .on {
  background-color: #f6f4fc;
}
.profile-list .wrap .profile-list-main .category swiper-container .on span {
  color: #4424a8;
}
.profile-list .wrap .profile-list-main .category swiper-container .on p {
  color: #4424a8;
  font-weight: 700;
}
.profile-list .wrap .profile-list-main form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.profile-list .wrap .profile-list-main form .search-bar-option {
  display: flex;
  align-items: center;
  gap: 10px;
}
.profile-list .wrap .profile-list-main form .search-bar-option select {
  padding: 8px;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  border-radius: 10px;
  border: 1px solid transparent;
}
.profile-list .wrap .profile-list-main form .search-bar-option .search-bar input {
  border-radius: 10px;
  padding: 10px 15px;
}
.profile-list .wrap .profile-list-main form .search-option {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.profile-list .wrap .profile-list-main form .search-option button {
  padding: 8px 15px;
  border-radius: 10px;
  background-color: #5d5fef;
  color: #ffffff;
  cursor: pointer;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
}
.profile-list .wrap .profile-list-main form .search-option button:hover {
  background-color: #ffffff;
  color: #5d5fef;
  border: 1px solid #5d5fef;
}
.profile-list .wrap .profile-list-main form .search-option .filter select {
  padding: 8% 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
}
.profile-list .wrap .profile-list-main .profile-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.profile-list .wrap .profile-list-main .profile-wrap .profile {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 15px;
  border: 1px solid #f1f1f1;
  cursor: pointer;
}
.profile-list .wrap .profile-list-main .profile-wrap .profile .title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}
.profile-list .wrap .profile-list-main .profile-wrap .profile .title p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 16px;
  word-break: keep-all;
}
.profile-list .wrap .profile-list-main .profile-wrap .profile .title .review {
  display: flex;
  align-items: center;
  gap: 7px;
}
.profile-list .wrap .profile-list-main .profile-wrap .profile .title .review img {
  width: 16px;
  height: 16px;
}
.profile-list .wrap .profile-list-main .profile-wrap .profile .title .review p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 16px;
  word-break: keep-all;
  height: 14px;
  letter-spacing: 0.5px;
}
.profile-list .wrap .profile-list-main .profile-wrap .profile .content {
  width: 100%;
  display: flex;
  gap: 15px;
}
.profile-list .wrap .profile-list-main .profile-wrap .profile .content .content-l {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.profile-list .wrap .profile-list-main .profile-wrap .profile .content .content-l .img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.profile-list .wrap .profile-list-main .profile-wrap .profile .content .content-l .img img {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-list .wrap .profile-list-main .profile-wrap .profile .content .content-l .name {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  color: #242424;
  font-weight: 700;
  font-size: 12px;
}
.profile-list .wrap .profile-list-main .profile-wrap .profile .content .content-l .location {
  margin-top: -8px;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  color: #242424;
  font-size: 10px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.profile-list .wrap .profile-list-main .profile-wrap .profile .content .content-l .location img {
  width: 14px;
  height: 14px;
}
.profile-list .wrap .profile-list-main .profile-wrap .profile .content .content-l .location .location-name {
  display: flex;
  align-items: center;
  gap: 3px;
}
.profile-list .wrap .profile-list-main .profile-wrap .profile .content .content-l .location .location-name p,
.profile-list .wrap .profile-list-main .profile-wrap .profile .content .content-l .location .location-name span {
  height: 16px;
}
.profile-list .wrap .profile-list-main .profile-wrap .profile .content .txt {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.profile-list .wrap .profile-list-main .profile-wrap .profile .content .txt p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  color: #242424;
}
.profile-list .wrap .profile-list-main .profile-wrap .profile .content .txt .chat {
  display: flex;
  justify-content: flex-end;
}
.profile-list .wrap .profile-list-main .profile-wrap .profile .content .txt .chat img {
  width: 18px;
  height: 18px;
}

.draft {
  width: calc(100% + 40px);
  margin-left: -20px;
  margin-right: -20px;
  padding: 0px 20px;
  display: flex;
  justify-content: flex-end;
  padding: 15px 20px;
  gap: 10px;
  border-bottom: 1px solid #ccc;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 50px; /* 헤더의 높이를 고려한 값으로 조정 */
  z-index: 1000; /* 다른 콘텐츠 위에 표시되도록 z-index 설정 */
  background: white; /* 배경색을 설정하여 내용이 겹치지 않도록 함 */
}
.draft button {
  padding: 10px;
  border-radius: 10px;
  background-color: #5d5fef;
  border: 1px solid #5d5fef;
  color: #ffffff;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  word-break: keep-all;
  cursor: pointer;
}
.draft button:nth-child(1) {
  background-color: #ffffff;
  color: #5d5fef;
}
.draft button:nth-child(2) {
  padding: 10px 20px;
}

.profile-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(100% + 40px);
  margin-right: -20px;
  margin-left: -20px;
  background-color: #f9f9f9;
  padding-top: 20px;
}
.profile-add .profile-img {
  width: 100%;
  height: 350px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.profile-add .profile-img input[type=file] {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  opacity: 0;
}
.profile-add .profile-img .image-preview {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  font-weight: 500;
  font-size: 12px;
  border-radius: 20px;
}
.profile-add .profile-img .image-preview img {
  width: 100%;
  object-fit: contain;
}
.profile-add .profile-sentence {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -20px;
  padding: 0px 20px;
}
.profile-add .profile-sentence p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.profile-add .profile-sentence p input {
  width: 75%;
  padding: 5px 10px;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  border-bottom: 1px solid #ccc;
}
.profile-add .profile-sentence p #charCount {
  text-align: right;
  margin-left: 10px;
  font-weight: 500;
  font-size: 10px;
}
.profile-add .profile-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.profile-add .profile-content .profile-info {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  border-radius: 20px;
  padding: 20px;
  background-color: #ffffff;
}
.profile-add .profile-content .profile-info .profile-add-form {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
}
.profile-add .profile-content .profile-info .profile-add-form p {
  text-align: right;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  flex: 1 1 15%;
}
.profile-add .profile-content .profile-info .profile-add-form .generalInfoTitle {
  font-weight: 700;
  font-size: 16px;
}
.profile-add .profile-content .profile-info .profile-add-form input,
.profile-add .profile-content .profile-info .profile-add-form select {
  flex: 1 1 80%;
  padding: 10px;
  border: 1px solid #ededed;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  font-weight: 500;
  border-radius: 5px;
}
.profile-add .profile-content .profile-location {
  width: 100%;
  display: flex;
  gap: 20px;
  border-radius: 20px;
  padding: 20px;
  background-color: #ffffff;
}
.profile-add .profile-content .profile-location p {
  flex: 1 1 15%;
  text-align: right;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
}
.profile-add .profile-content .profile-location .location-wrap {
  flex: 1 1 80%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.profile-add .profile-content .profile-location .location-wrap button {
  padding: 10px 20px;
  border-radius: 10px;
  background-color: #f6f4fc;
  color: #242424;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
}
.profile-add .profile-content .profile-edu,
.profile-add .profile-content .profile-history,
.profile-add .profile-content .profile-awards {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-end;
  border-radius: 20px;
  padding: 20px;
  background-color: #ffffff;
}
.profile-add .profile-content .profile-edu .profile-edu-wrap,
.profile-add .profile-content .profile-edu .profile-history-wrap,
.profile-add .profile-content .profile-edu .profile-awards-wrap,
.profile-add .profile-content .profile-history .profile-edu-wrap,
.profile-add .profile-content .profile-history .profile-history-wrap,
.profile-add .profile-content .profile-history .profile-awards-wrap,
.profile-add .profile-content .profile-awards .profile-edu-wrap,
.profile-add .profile-content .profile-awards .profile-history-wrap,
.profile-add .profile-content .profile-awards .profile-awards-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
}
.profile-add .profile-content .profile-edu .profile-edu-wrap p,
.profile-add .profile-content .profile-edu .profile-history-wrap p,
.profile-add .profile-content .profile-edu .profile-awards-wrap p,
.profile-add .profile-content .profile-history .profile-edu-wrap p,
.profile-add .profile-content .profile-history .profile-history-wrap p,
.profile-add .profile-content .profile-history .profile-awards-wrap p,
.profile-add .profile-content .profile-awards .profile-edu-wrap p,
.profile-add .profile-content .profile-awards .profile-history-wrap p,
.profile-add .profile-content .profile-awards .profile-awards-wrap p {
  width: 100%;
  text-align: left;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
}
.profile-add .profile-content .profile-edu .profile-edu-wrap .generalInfoTitle,
.profile-add .profile-content .profile-edu .profile-history-wrap .generalInfoTitle,
.profile-add .profile-content .profile-edu .profile-awards-wrap .generalInfoTitle,
.profile-add .profile-content .profile-history .profile-edu-wrap .generalInfoTitle,
.profile-add .profile-content .profile-history .profile-history-wrap .generalInfoTitle,
.profile-add .profile-content .profile-history .profile-awards-wrap .generalInfoTitle,
.profile-add .profile-content .profile-awards .profile-edu-wrap .generalInfoTitle,
.profile-add .profile-content .profile-awards .profile-history-wrap .generalInfoTitle,
.profile-add .profile-content .profile-awards .profile-awards-wrap .generalInfoTitle {
  font-weight: 700;
  font-size: 16px;
  color: #242424;
}
.profile-add .profile-content .profile-edu .profile-edu-wrap .input-wrap,
.profile-add .profile-content .profile-edu .profile-history-wrap .input-wrap,
.profile-add .profile-content .profile-edu .profile-awards-wrap .input-wrap,
.profile-add .profile-content .profile-history .profile-edu-wrap .input-wrap,
.profile-add .profile-content .profile-history .profile-history-wrap .input-wrap,
.profile-add .profile-content .profile-history .profile-awards-wrap .input-wrap,
.profile-add .profile-content .profile-awards .profile-edu-wrap .input-wrap,
.profile-add .profile-content .profile-awards .profile-history-wrap .input-wrap,
.profile-add .profile-content .profile-awards .profile-awards-wrap .input-wrap {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  justify-content: space-between;
  align-items: center;
}
.profile-add .profile-content .profile-edu .profile-edu-wrap .input-wrap input,
.profile-add .profile-content .profile-edu .profile-history-wrap .input-wrap input,
.profile-add .profile-content .profile-edu .profile-awards-wrap .input-wrap input,
.profile-add .profile-content .profile-history .profile-edu-wrap .input-wrap input,
.profile-add .profile-content .profile-history .profile-history-wrap .input-wrap input,
.profile-add .profile-content .profile-history .profile-awards-wrap .input-wrap input,
.profile-add .profile-content .profile-awards .profile-edu-wrap .input-wrap input,
.profile-add .profile-content .profile-awards .profile-history-wrap .input-wrap input,
.profile-add .profile-content .profile-awards .profile-awards-wrap .input-wrap input {
  border-bottom: 1px solid #ccc;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  padding: 10px;
  font-weight: 500;
}
.profile-add .profile-content .profile-edu .profile-edu-wrap .input-wrap .deleteHistory,
.profile-add .profile-content .profile-edu .profile-edu-wrap .input-wrap .deleteAwards,
.profile-add .profile-content .profile-edu .profile-edu-wrap .input-wrap .deleteEdu,
.profile-add .profile-content .profile-edu .profile-edu-wrap .input-wrap .removeQualification,
.profile-add .profile-content .profile-edu .profile-history-wrap .input-wrap .deleteHistory,
.profile-add .profile-content .profile-edu .profile-history-wrap .input-wrap .deleteAwards,
.profile-add .profile-content .profile-edu .profile-history-wrap .input-wrap .deleteEdu,
.profile-add .profile-content .profile-edu .profile-history-wrap .input-wrap .removeQualification,
.profile-add .profile-content .profile-edu .profile-awards-wrap .input-wrap .deleteHistory,
.profile-add .profile-content .profile-edu .profile-awards-wrap .input-wrap .deleteAwards,
.profile-add .profile-content .profile-edu .profile-awards-wrap .input-wrap .deleteEdu,
.profile-add .profile-content .profile-edu .profile-awards-wrap .input-wrap .removeQualification,
.profile-add .profile-content .profile-history .profile-edu-wrap .input-wrap .deleteHistory,
.profile-add .profile-content .profile-history .profile-edu-wrap .input-wrap .deleteAwards,
.profile-add .profile-content .profile-history .profile-edu-wrap .input-wrap .deleteEdu,
.profile-add .profile-content .profile-history .profile-edu-wrap .input-wrap .removeQualification,
.profile-add .profile-content .profile-history .profile-history-wrap .input-wrap .deleteHistory,
.profile-add .profile-content .profile-history .profile-history-wrap .input-wrap .deleteAwards,
.profile-add .profile-content .profile-history .profile-history-wrap .input-wrap .deleteEdu,
.profile-add .profile-content .profile-history .profile-history-wrap .input-wrap .removeQualification,
.profile-add .profile-content .profile-history .profile-awards-wrap .input-wrap .deleteHistory,
.profile-add .profile-content .profile-history .profile-awards-wrap .input-wrap .deleteAwards,
.profile-add .profile-content .profile-history .profile-awards-wrap .input-wrap .deleteEdu,
.profile-add .profile-content .profile-history .profile-awards-wrap .input-wrap .removeQualification,
.profile-add .profile-content .profile-awards .profile-edu-wrap .input-wrap .deleteHistory,
.profile-add .profile-content .profile-awards .profile-edu-wrap .input-wrap .deleteAwards,
.profile-add .profile-content .profile-awards .profile-edu-wrap .input-wrap .deleteEdu,
.profile-add .profile-content .profile-awards .profile-edu-wrap .input-wrap .removeQualification,
.profile-add .profile-content .profile-awards .profile-history-wrap .input-wrap .deleteHistory,
.profile-add .profile-content .profile-awards .profile-history-wrap .input-wrap .deleteAwards,
.profile-add .profile-content .profile-awards .profile-history-wrap .input-wrap .deleteEdu,
.profile-add .profile-content .profile-awards .profile-history-wrap .input-wrap .removeQualification,
.profile-add .profile-content .profile-awards .profile-awards-wrap .input-wrap .deleteHistory,
.profile-add .profile-content .profile-awards .profile-awards-wrap .input-wrap .deleteAwards,
.profile-add .profile-content .profile-awards .profile-awards-wrap .input-wrap .deleteEdu,
.profile-add .profile-content .profile-awards .profile-awards-wrap .input-wrap .removeQualification {
  padding: 8px 10px;
  border: 1px solid #cccccc;
  background-color: #f9f9f9;
  border-radius: 10px;
  font-size: 11px;
}
.profile-add .profile-content .profile-edu #addEdu,
.profile-add .profile-content .profile-edu #addHistory,
.profile-add .profile-content .profile-edu #addAwards,
.profile-add .profile-content .profile-edu #addQualification,
.profile-add .profile-content .profile-history #addEdu,
.profile-add .profile-content .profile-history #addHistory,
.profile-add .profile-content .profile-history #addAwards,
.profile-add .profile-content .profile-history #addQualification,
.profile-add .profile-content .profile-awards #addEdu,
.profile-add .profile-content .profile-awards #addHistory,
.profile-add .profile-content .profile-awards #addAwards,
.profile-add .profile-content .profile-awards #addQualification {
  padding: 10px;
  border-radius: 8px;
  background-color: #f6f4fc;
  color: #242424;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
}
.profile-add .profile-content .introduce {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
  border-radius: 20px;
  padding: 20px;
  background-color: #ffffff;
}
.profile-add .profile-content .introduce p {
  text-align: right;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  width: 20%;
}
.profile-add .profile-content .introduce .textarea-container {
  width: 80%;
  height: 150px;
  position: relative;
}
.profile-add .profile-content .introduce .textarea-container #detailIntroduction {
  width: 100%;
  height: 150px;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  font-weight: 500;
  font-size: 12px;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 10px;
}
.profile-add .profile-content .introduce .textarea-container #detailIntroduction:focus {
  border: 1px solid #ccc;
  outline: none;
}
.profile-add .profile-content .introduce .textarea-container #charCount1 {
  position: absolute;
  bottom: 5px;
  right: 10px;
  background: rgba(255, 255, 255, 0.7);
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  text-align: right;
  margin-left: 10px;
  font-weight: 500;
  font-size: 10px;
  padding: 0px;
}
.profile-add .profile-content .qualification {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-end;
  border-radius: 20px;
  padding: 20px;
  background-color: #ffffff;
}
.profile-add .profile-content .qualification .qualification-wrap {
  width: 100%;
  display: flex;
  gap: 20px;
  flex-direction: column;
}
.profile-add .profile-content .qualification .qualification-wrap p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  font-width: 700;
  font-size: 14px;
}
.profile-add .profile-content .qualification .qualification-wrap .generalInfoTitle {
  font-weight: 700;
  font-size: 16px;
  color: #242424;
}
.profile-add .profile-content .qualification .qualification-wrap .input-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 80%;
  gap: 10px;
  margin-bottom: 20px;
}
.profile-add .profile-content .qualification .qualification-wrap .input-wrap p {
  width: 100%;
  text-align: left;
  font-weight: 500;
}
.profile-add .profile-content .qualification .qualification-wrap .input-wrap input {
  width: 100%;
  padding: 5px 10px;
  border: none;
  border-bottom: 1px solid #ccc;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  font-weight: 500;
}
.profile-add .profile-content .qualification .qualification-wrap .input-wrap .custom-file-upload {
  border: none;
  border-bottom: 1px solid #ccc;
  display: inline-block;
  padding: 5px 10px;
  cursor: pointer;
  margin-top: 10px;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  font-weight: 500;
  font-size: 11px;
  color: #8b8b8b;
}
.profile-add .profile-content .qualification button {
  padding: 10px 15px;
  border-radius: 10px;
  color: #242424;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  font-size: 11px;
  background-color: #f6f4fc;
}

.profile-add-btn-wrap {
  width: calc(100% + 40px);
  margin-right: -20px;
  margin-left: -20px;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 10px 20px;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  bottom: 96px; /* 헤더의 높이를 고려한 값으로 조정 */
  z-index: 1000; /* 다른 콘텐츠 위에 표시되도록 z-index 설정 */
  background: white; /* 배경색을 설정하여 내용이 겹치지 않도록 함 */
}
.profile-add-btn-wrap button {
  padding: 15px 30px;
  border-radius: 10px;
  background-color: #5d5fef;
  border: 1px solid #5d5fef;
  color: #ffffff;
  width: 50%;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  word-break: keep-all;
  cursor: pointer;
}
.profile-add-btn-wrap button:nth-child(1), .profile-add-btn-wrap button:nth-child(3) {
  background-color: #f6f4fc;
  color: #5d5fef;
}

.profile-draft {
  gap: 10px;
  padding-bottom: 0px;
  margin-top: 20px;
}
.profile-draft .profile-draft-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 10px;
  gap: 10px;
}
.profile-draft .profile-draft-wrap .img {
  width: 100px;
  height: 100px;
  background-color: #eee;
  border-radius: 10px;
}
.profile-draft .profile-draft-wrap .img img {
  border-radius: 10px;
  width: 100px;
  height: 100px;
  object-fit: cover;
}
.profile-draft .profile-draft-wrap .content {
  width: 80%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.profile-draft .profile-draft-wrap .content .major,
.profile-draft .profile-draft-wrap .content .save-date {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 10px;
}
.profile-draft .profile-draft-wrap .content .major .txt,
.profile-draft .profile-draft-wrap .content .save-date .txt {
  display: flex;
  align-items: center;
  gap: 3px;
}
.profile-draft .profile-draft-wrap .content .major .icon img,
.profile-draft .profile-draft-wrap .content .save-date .icon img {
  width: 18px;
  height: 18px;
}
.profile-draft .profile-draft-wrap .content .major p,
.profile-draft .profile-draft-wrap .content .save-date p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  color: #242424;
}
.profile-draft .profile-draft-wrap .content .major span,
.profile-draft .profile-draft-wrap .content .save-date span {
  font-size: 18px;
  line-height: 22px;
}
.profile-draft .profile-draft-wrap .content .major .button button,
.profile-draft .profile-draft-wrap .content .save-date .button button {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  word-break: keep-all;
  cursor: pointer;
  background-color: #ffffff;
  border: 1px solid #5d5fef;
  padding: 5px 10px;
  border-radius: 5px;
}
.profile-draft .profile-draft-wrap .content .major .button button:hover, .profile-draft .profile-draft-wrap .content .major .button button:active,
.profile-draft .profile-draft-wrap .content .save-date .button button:hover,
.profile-draft .profile-draft-wrap .content .save-date .button button:active {
  background-color: #5d5fef;
  color: #ffffff;
}

.container-profile {
  width: 100%;
  margin: 0 auto;
  position: relative;
  padding-bottom: 96px;
}
.container-profile .profile-view-header {
  background-color: transparent;
  width: 100%;
  margin-left: 0px;
  margin-right: 0px;
  padding: 20px 20px;
  height: auto;
}
.container-profile .profile-view-header .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.container-profile .profile-view-header .wrap .header-left,
.container-profile .profile-view-header .wrap .header-right {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container-profile .profile-view-header .wrap .header-left .icon,
.container-profile .profile-view-header .wrap .header-right .icon {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container-profile .profile-view-header .wrap .header-left .icon a,
.container-profile .profile-view-header .wrap .header-right .icon a {
  padding: 10px;
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
}
.container-profile .profile-view-header .wrap .header-left .icon a img,
.container-profile .profile-view-header .wrap .header-right .icon a img {
  width: 18px;
  height: 18px;
}
.container-profile .profile-view-header .wrap .profileHeaderRight {
  display: flex;
  width: auto;
  gap: 10px;
}
.container-profile .profile-view-header .wrap .profileHeaderRight .icon {
  padding: 10px;
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
}
.container-profile .profile-view-header .wrap .profileHeaderRight .icon a {
  padding: none;
  width: 50px;
  height: 50px;
  background-color: transparent;
  border-radius: 50%;
}
.container-profile .profile-view-header .wrap .profileHeaderRight .icon img {
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.container-profile .profile-view-wrap {
  position: absolute;
  top: 0;
  width: 100%;
}
.container-profile .profile-view-wrap .img {
  width: 100%;
  height: 480px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container-profile .profile-view-wrap .img img {
  width: 100%;
  height: 100%;
}
.container-profile .profile-view-wrap main {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  position: absolute;
  top: 460px;
  width: 100%;
  padding: 0 20px;
  margin: 0;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 20px;
  padding-bottom: 30px;
}
.container-profile .profile-view-wrap main .border {
  border: 1px solid #ccc;
  width: 25%;
  height: 1px;
}
.container-profile .profile-view-wrap main .sentence {
  width: 100%;
  padding: 20px 0px;
}
.container-profile .profile-view-wrap main .sentence p {
  text-align: center;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  word-break: keep-all;
}
.container-profile .profile-view-wrap main .profile-menu {
  width: calc(100% + 40px);
  margin: 0 -20px;
  padding: 0px 20px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  margin-bottom: 10px;
}
.container-profile .profile-view-wrap main .profile-menu .menu-general,
.container-profile .profile-view-wrap main .profile-menu .menu-quali,
.container-profile .profile-view-wrap main .profile-menu .menu-review {
  padding: 10px;
}
.container-profile .profile-view-wrap main .profile-menu .menu-general p,
.container-profile .profile-view-wrap main .profile-menu .menu-quali p,
.container-profile .profile-view-wrap main .profile-menu .menu-review p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  word-break: keep-all;
  color: #8b8b8b;
}
.container-profile .profile-view-wrap main .profile-menu .menu-general:active p, .container-profile .profile-view-wrap main .profile-menu .menu-general:focus p,
.container-profile .profile-view-wrap main .profile-menu .menu-quali:active p,
.container-profile .profile-view-wrap main .profile-menu .menu-quali:focus p,
.container-profile .profile-view-wrap main .profile-menu .menu-review:active p,
.container-profile .profile-view-wrap main .profile-menu .menu-review:focus p {
  text-decoration: underline;
}
.container-profile .profile-view-wrap main .profile-menu .menu-general .on,
.container-profile .profile-view-wrap main .profile-menu .menu-quali .on,
.container-profile .profile-view-wrap main .profile-menu .menu-review .on {
  font-weight: 700;
  color: #5d5fef;
}
.container-profile .profile-view-wrap main .general {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: #f9f9f9;
  border-radius: 20px;
  padding: 20px;
}
.container-profile .profile-view-wrap main .general .general-big-title {
  padding-bottom: 10px;
}
.container-profile .profile-view-wrap main .general .general-big-title p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  word-break: keep-all;
  color: #242424;
}
.container-profile .profile-view-wrap main .general .general-info,
.container-profile .profile-view-wrap main .general .quali-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.container-profile .profile-view-wrap main .general .general-info .general-title,
.container-profile .profile-view-wrap main .general .quali-info .general-title {
  text-align: left;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  word-break: keep-all;
  color: #242424;
  white-space: nowrap;
}
.container-profile .profile-view-wrap main .general .general-info .general-content,
.container-profile .profile-view-wrap main .general .quali-info .general-content {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 20px;
  word-break: keep-all;
  color: #242424;
}
.container-profile .profile-view-wrap main .general .general-info .general-introduce,
.container-profile .profile-view-wrap main .general .quali-info .general-introduce {
  width: 100%;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 20px;
  word-break: keep-all;
  color: #242424;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.container-profile .profile-view-wrap main .quali {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-right: 30px;
  padding-left: 30px;
  gap: 15px;
}
.container-profile .profile-view-wrap main .quali .quali-wrap {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.container-profile .profile-view-wrap main .quali .quali-wrap .quali-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.container-profile .profile-view-wrap main .quali .quali-wrap .quali-info .quali-title {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  word-break: keep-all;
  color: #242424;
}
.container-profile .profile-view-wrap main .quali .quali-wrap .quali-info .quali-content {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 20px;
  word-break: keep-all;
  color: #242424;
}
.container-profile .profile-view-wrap main .review {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
}
.container-profile .profile-view-wrap main .review .review-grade {
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  width: 100%;
  margin-top: 20px;
}
.container-profile .profile-view-wrap main .review .review-grade .grade p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 34px;
  word-break: keep-all;
  color: #242424;
  letter-spacing: 1px;
}
.container-profile .profile-view-wrap main .review .review-grade .star-rating {
  font-size: 18px;
  color: #ffd700;
}
.container-profile .profile-view-wrap main .review .review-grade .star-rating p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 20px;
  word-break: keep-all;
  color: #8b8b8b;
  margin-top: 5px;
}
.container-profile .profile-view-wrap main .review .button button {
  padding: 10px 20px;
  border-radius: 10px;
  background-color: #5d5fef;
  border: 1px solid #5d5fef;
  color: #ffffff;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  word-break: keep-all;
  cursor: pointer;
}
.container-profile .profile-view-wrap main .review .review-contentWrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.container-profile .profile-view-wrap main .review .review-contentWrap .review-content {
  width: 100%;
  box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 10px;
}
.container-profile .profile-view-wrap main .review .review-contentWrap .review-content .review-profile {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.container-profile .profile-view-wrap main .review .review-contentWrap .review-content .review-profile .profile {
  display: flex;
  align-items: center;
  gap: 15px;
}
.container-profile .profile-view-wrap main .review .review-contentWrap .review-content .review-profile .profile img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 50%;
}
.container-profile .profile-view-wrap main .review .review-contentWrap .review-content .review-profile .profile .txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.container-profile .profile-view-wrap main .review .review-contentWrap .review-content .review-profile .profile .txt .profile-name {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  word-break: keep-all;
  color: #242424;
}
.container-profile .profile-view-wrap main .review .review-contentWrap .review-content .review-profile .profile .txt .review-date {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 20px;
  word-break: keep-all;
  color: #8b8b8b;
}
.container-profile .profile-view-wrap main .review .review-contentWrap .review-content .review-profile .star {
  font-size: 12px;
  color: #ffd700;
}
.container-profile .profile-view-wrap main .review .review-contentWrap .review-content .review-txt {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.container-profile .profile-view-wrap main .review .review-contentWrap .review-content .review-txt .title {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 20px;
  word-break: keep-all;
  color: #242424;
}
.container-profile .profile-view-wrap main .review .review-contentWrap .review-content .review-txt .title span {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 20px;
  word-break: keep-all;
  color: #242424;
}
.container-profile .profile-view-wrap main .review .review-contentWrap .review-content .review-txt p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 18px;
  word-break: keep-all;
  color: #242424;
}
.container-profile .profile-view-wrap main .review .review-contentWrap .review-content .report {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
  height: 13px;
}
.container-profile .profile-view-wrap main .review .review-contentWrap .review-content .report button {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 20px;
  word-break: keep-all;
  color: #8b8b8b;
  cursor: pointer;
  line-height: 0px;
}
.container-profile .profile-view-wrap main .review .review-contentWrap .review-content .report button img {
  width: 13px;
  height: 13px;
}

.recruitment-list .wrap .recruitment-list-main {
  gap: 15px;
  padding-top: 30px;
  padding-bottom: 0px;
}
.recruitment-list .wrap .recruitment-list-main .recruitment-list-txt {
  margin-bottom: 10px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.recruitment-list .wrap .recruitment-list-main .recruitment-list-txt p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0.3px;
  word-break: keep-all;
  color: #8b8b8b;
}
.recruitment-list .wrap .recruitment-list-main .recruitment-list-txt p span {
  font-size: 18px;
}
.recruitment-list .wrap .recruitment-list-main .recruitment-list-txt p:nth-child(1) {
  font-size: 16px;
  font-weight: 700;
  color: #242424;
  margin-bottom: 10px;
}
.recruitment-list .wrap .recruitment-list-main .recruitment-list-txt p .main-color {
  font-size: 13px;
}
.recruitment-list .wrap .recruitment-list-main .two-depth-menu .menu-div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.recruitment-list .wrap .recruitment-list-main .two-depth-menu .menu-div > div {
  width: 48%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  margin-bottom: 15px;
  border-radius: 10px;
}
.recruitment-list .wrap .recruitment-list-main .two-depth-menu .menu-div > div img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 10px;
}
.recruitment-list .wrap .recruitment-list-main .two-depth-menu .menu-div > div p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  word-break: keep-all;
  color: #242424;
}

.recruitment-result {
  background-color: #f6f4fc;
}
.recruitment-result .wrap .recruitment-result-main {
  gap: 15px;
}
.recruitment-result .wrap .recruitment-result-main .category {
  width: calc(100% + 40px);
  margin-right: -20px;
  margin-left: -20px;
  background-color: #ffffff;
  padding: 5px 0px;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 50px; /* 헤더의 높이를 고려한 값으로 조정 */
  z-index: 1000; /* 다른 콘텐츠 위에 표시되도록 z-index 설정 */
  background: white; /* 배경색을 설정하여 내용이 겹치지 않도록 함 */
  border-bottom: 1px solid #ccc;
}
.recruitment-result .wrap .recruitment-result-main .category swiper-container {
  width: 100%;
  padding: 0px 15px;
}
.recruitment-result .wrap .recruitment-result-main .category swiper-container swiper-slide {
  width: auto;
  padding: 10px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.recruitment-result .wrap .recruitment-result-main .category swiper-container swiper-slide span {
  font-size: 18px;
}
.recruitment-result .wrap .recruitment-result-main .category swiper-container swiper-slide p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
}
.recruitment-result .wrap .recruitment-result-main .category swiper-container .on {
  background-color: #f6f4fc;
}
.recruitment-result .wrap .recruitment-result-main .category swiper-container .on span {
  color: #4424a8;
}
.recruitment-result .wrap .recruitment-result-main .category swiper-container .on p {
  color: #4424a8;
  font-weight: 700;
}
.recruitment-result .wrap .recruitment-result-main form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.recruitment-result .wrap .recruitment-result-main form .search-bar-option {
  display: flex;
  align-items: center;
  gap: 10px;
}
.recruitment-result .wrap .recruitment-result-main form .search-bar-option select {
  padding: 10px;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  border-radius: 10px;
  border: 1px solid transparent;
}
.recruitment-result .wrap .recruitment-result-main form .search-bar-option .search-bar input {
  border-radius: 10px;
  padding: 10px 15px;
  background-color: #ffffff;
}
.recruitment-result .wrap .recruitment-result-main form .search-option {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.recruitment-result .wrap .recruitment-result-main form .search-option button {
  padding: 8px 15px;
  border-radius: 10px;
  background-color: #5d5fef;
  color: #ffffff;
  cursor: pointer;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
}
.recruitment-result .wrap .recruitment-result-main form .search-option button:hover {
  background-color: #ffffff;
  color: #5d5fef;
  border: 1px solid #5d5fef;
}
.recruitment-result .wrap .recruitment-result-main form .search-option .filter select {
  padding: 8% 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
}
.recruitment-result .wrap .recruitment-result-main .recruitment-result-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.recruitment-result .wrap .recruitment-result-main .recruitment-result-wrap .recruitment {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 15px;
  border: 1px solid #f1f1f1;
  cursor: pointer;
}
.recruitment-result .wrap .recruitment-result-main .recruitment-result-wrap .recruitment .title {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 20px;
}
.recruitment-result .wrap .recruitment-result-main .recruitment-result-wrap .recruitment .title p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 16px;
  word-break: keep-all;
}
.recruitment-result .wrap .recruitment-result-main .recruitment-result-wrap .recruitment .title .badge {
  padding: 6px 14px;
  background-color: #ff5959;
  color: #ffffff;
  border-radius: 8px;
  width: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.recruitment-result .wrap .recruitment-result-main .recruitment-result-wrap .recruitment .title .badge p {
  font-size: 12px;
  font-weight: 500;
}
.recruitment-result .wrap .recruitment-result-main .recruitment-result-wrap .recruitment .title .badge-com {
  padding: 6px 14px;
  background-color: #2f4f4f;
  color: #ffffff;
  border-radius: 8px;
  width: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.recruitment-result .wrap .recruitment-result-main .recruitment-result-wrap .recruitment .title .badge-com p {
  font-size: 12px;
  font-weight: 500;
}
.recruitment-result .wrap .recruitment-result-main .recruitment-result-wrap .recruitment .content {
  width: 100%;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.recruitment-result .wrap .recruitment-result-main .recruitment-result-wrap .recruitment .content .content-l {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.recruitment-result .wrap .recruitment-result-main .recruitment-result-wrap .recruitment .content .content-l .img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.recruitment-result .wrap .recruitment-result-main .recruitment-result-wrap .recruitment .content .content-l .img img {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recruitment-result .wrap .recruitment-result-main .recruitment-result-wrap .recruitment .content .txt {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
}
.recruitment-result .wrap .recruitment-result-main .recruitment-result-wrap .recruitment .content .txt > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.recruitment-result .wrap .recruitment-result-main .recruitment-result-wrap .recruitment .content .txt p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  color: #242424;
}
.recruitment-result .wrap .recruitment-result-main .recruitment-result-wrap .recruitment .content .txt .location {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  color: #242424;
  font-size: 10px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.recruitment-result .wrap .recruitment-result-main .recruitment-result-wrap .recruitment .content .txt .location img {
  width: 14px;
  height: 14px;
}
.recruitment-result .wrap .recruitment-result-main .recruitment-result-wrap .recruitment .content .txt .date {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}
.recruitment-result .wrap .recruitment-result-main .recruitment-result-wrap .recruitment .content .txt .date p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  color: #242424;
  color: #8b8b8b;
  font-size: 11px;
}
.recruitment-result .wrap .recruitment-result-main .recruitment-result-wrap .recruitment .content .txt .date img {
  width: 18px;
  height: 18px;
}

.recruitment-add .wrap .recruitment-add-main {
  gap: 15px;
  padding-top: 20px;
  padding-bottom: 0px;
}
.recruitment-add .wrap .recruitment-add-main .progress-bar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.recruitment-add .wrap .recruitment-add-main .progress-bar progress {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
}
.recruitment-add .wrap .recruitment-add-main .progress-bar ::-webkit-progress-bar {
  background-color: grey;
  border-radius: 50px;
  background-color: #f6f4fc;
}
.recruitment-add .wrap .recruitment-add-main .progress-bar ::-webkit-progress-value {
  background-color: #5d5fef;
  border-radius: 50px;
}
.recruitment-add .wrap .recruitment-add-main .progress-bar img {
  width: 20px;
  height: 20px;
}
.recruitment-add .wrap .recruitment-add-main .img {
  margin-top: 30px;
  margin-bottom: 30px;
}
.recruitment-add .wrap .recruitment-add-main .img img {
  width: 100%;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-list-txt {
  margin-top: 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-list-txt p {
  font-size: 16px;
  color: #3d3d3d;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-list-txt p:nth-child(1) {
  font-size: 22px;
  font-weight: 700;
  color: #242424;
  margin-bottom: 20px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-list-txt p .main-color {
  font-size: 16px;
}
.recruitment-add .wrap .recruitment-add-main .title {
  margin: 20px 0px 10px 0px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.recruitment-add .wrap .recruitment-add-main .title p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents {
  width: 100%;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 0px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .recruitment-input {
  background-color: #f9f9f9;
  width: 100%;
  border-radius: 10px;
  padding: 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .recruitment-input p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  color: #555555;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .recruitment-input input {
  width: 100%;
  height: 30px;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  border-radius: 10px;
  color: #242424;
  background-color: #ffffff;
  padding: 0px 10px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .recruitment-input label {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .recruitment-input label input[type=radio] {
  width: auto;
  color: #242424;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .recruitment-input label p {
  font-weight: 500;
  font-size: 11px;
  padding-left: 0px;
  width: auto;
  white-space: nowrap;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .recruitment-input label #externalLink {
  flex-grow: 1;
  color: #242424;
  background-color: #ffffff;
  margin-left: 5px;
  padding: 0px 10px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .recruitment-input .date-time-input {
  display: flex;
  align-items: center;
  gap: 10px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .recruitment-input .date-time-input:nth-child(2) {
  margin-top: 5px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .recruitment-input .date-time-input label {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  font-weight: 500;
  padding: 0px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .recruitment-input .date-time-input input {
  font-weight: 500;
  background-color: #ffffff;
  padding: 0px 10px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .recruitment-input textarea {
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 10px;
  font-size: 12px;
  margin-top: 5px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .recruitment-input textarea:focus {
  outline: none;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .recruitment-input #charCount {
  position: absolute;
  right: 30px;
  bottom: 30px;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  font-weight: 500;
  font-size: 10px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .img-prev {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 30px;
  justify-content: center;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .img-prev .txt {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
  /* 파일 입력 필드 숨기기 */
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .img-prev .txt p {
  padding-left: 0px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .img-prev .txt #imageUpload {
  display: none;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .img-prev .txt .custom-button {
  background-color: #5d5fef;
  color: white;
  padding: 8px 13px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  font-weight: 500;
  font-size: 12px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .img-prev .preview {
  width: 150px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .img-prev .preview .image-preview {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #ffffff;
  border-radius: 20px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .img-prev .preview .image-preview img {
  width: 100%;
  height: auto;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .select label {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  color: #555555;
  padding: 0px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .select select {
  width: 100%;
  padding: 10px 5px;
  border: none;
  border-radius: 10px;
  font-size: 12px;
  margin-top: 5px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .select span {
  font-size: 12px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .checkbox .checkbox-wrap {
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .checkbox .checkbox-wrap div {
  display: flex;
  align-items: center;
  gap: 3px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .checkbox .checkbox-wrap div input[type=checkbox] {
  width: auto;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .checkbox .checkbox-wrap div label {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  color: #555555;
  padding: 0px;
  font-weight: 500;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price .radio {
  display: flex;
  gap: 20px;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  color: #555555;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price .free,
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price #priceInput {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price .free .free-title,
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price #priceInput .free-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price .free .free-title p,
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price #priceInput .free-title p {
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 3px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price .free .free-title p span,
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price #priceInput .free-title p span {
  color: #ff5959;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price .free .free-title button,
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price #priceInput .free-title button {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  font-weight: 500;
  font-size: 11px;
  padding: 5px 10px;
  background-color: #5d5fef;
  border-radius: 10px;
  color: #ffffff;
  cursor: pointer;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price .free .option-wrap,
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price #priceInput .option-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: #f6f4fc;
  padding: 20px 10px;
  border-radius: 10px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price .free .option-wrap .option-wrap-title,
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price #priceInput .option-wrap .option-wrap-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price .free .option-wrap .option-wrap-title input[type=text],
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price #priceInput .option-wrap .option-wrap-title input[type=text] {
  padding: 0px 10px;
  background-color: #ffffff;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price .free .option-wrap .participant-count,
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price #priceInput .option-wrap .participant-count {
  display: flex;
  align-items: center;
  gap: 10px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price .free .option-wrap .participant-count button,
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price #priceInput .option-wrap .participant-count button {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border-radius: 10px;
  background-color: #ffffff;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price .free .option-wrap .participant-count input[type=text],
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price #priceInput .option-wrap .participant-count input[type=text] {
  text-align: center;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price .free .option-wrap .options-checkboxes,
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price #priceInput .option-wrap .options-checkboxes {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price .free .option-wrap .options-checkboxes div,
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price #priceInput .option-wrap .options-checkboxes div {
  display: flex;
  align-items: center;
  gap: 5px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price .free .option-wrap .options-checkboxes div input[type=checkbox],
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price #priceInput .option-wrap .options-checkboxes div input[type=checkbox] {
  width: auto;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price .free .option-wrap .options-checkboxes div label,
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price #priceInput .option-wrap .options-checkboxes div label {
  color: #555555;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price .free .option-wrap .option-price,
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price #priceInput .option-wrap .option-price {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price .free .option-wrap .option-price p,
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price #priceInput .option-wrap .option-price p {
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price .free .option-wrap .option-price p span,
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price #priceInput .option-wrap .option-price p span {
  color: #ff5959;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price .free .option-wrap .option-price label,
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price #priceInput .option-wrap .option-price label {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price .free .option-wrap .option-price label p,
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price #priceInput .option-wrap .option-price label p {
  font-size: 12px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price .free .option-wrap .option-price label input,
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price #priceInput .option-wrap .option-price label input {
  padding: 0px 10px;
  font-weight: 500;
  width: 80px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price .free .option-wrap .option-price label .position,
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price #priceInput .option-wrap .option-price label .position {
  position: absolute;
  right: 10px;
  font-size: 11px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price .free .option-wrap .option-price .checkbox-label input[type=checkbox],
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price #priceInput .option-wrap .option-price .checkbox-label input[type=checkbox] {
  width: auto;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price .free .option-wrap .option-delete,
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .source-row .price #priceInput .option-wrap .option-delete {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  font-weight: 500;
  font-size: 11px;
  padding: 7px 10px;
  background-color: #5d5fef;
  border-radius: 10px;
  color: #ffffff;
  cursor: pointer;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .add-btn-wrap {
  display: flex;
  justify-content: flex-end;
  align-content: center;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .add-btn-wrap button {
  border: 1px solid red;
  background: #ffffff;
  border: 1px solid #5d5fef;
  padding: 10px 30px;
  border-right: 10px;
  width: 40%;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents #recruitmentSources .add-btn-wrap .add-btn {
  background: #5d5fef;
  border: 1px solid #5d5fef;
  color: #ffffff;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .recruitment-input {
  background-color: #f9f9f9;
  width: 100%;
  border-radius: 10px;
  padding: 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .recruitment-input p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  color: #555555;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .recruitment-input input {
  width: 100%;
  height: 30px;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  border-radius: 10px;
  color: #242424;
  background-color: #ffffff;
  padding: 0px 10px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .recruitment-input label {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .recruitment-input label input[type=radio] {
  width: auto;
  color: #242424;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .recruitment-input label p {
  font-weight: 500;
  font-size: 11px;
  padding-left: 0px;
  width: auto;
  white-space: nowrap;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .recruitment-input label #externalLink {
  flex-grow: 1;
  color: #242424;
  background-color: #ffffff;
  margin-left: 5px;
  padding: 0px 10px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .recruitment-input .date-time-input {
  display: flex;
  align-items: center;
  gap: 10px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .recruitment-input .date-time-input:nth-child(2) {
  margin-top: 5px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .recruitment-input .date-time-input label {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  font-weight: 500;
  padding: 0px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .recruitment-input .date-time-input input {
  font-weight: 500;
  background-color: #ffffff;
  padding: 0px 10px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .recruitment-input textarea {
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 10px;
  font-size: 12px;
  margin-top: 5px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .recruitment-input textarea:focus {
  outline: none;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .recruitment-input #charCount {
  position: absolute;
  right: 30px;
  bottom: 30px;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  font-weight: 500;
  font-size: 10px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .img-prev {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 30px;
  justify-content: center;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .img-prev .txt {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
  /* 파일 입력 필드 숨기기 */
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .img-prev .txt p {
  padding-left: 0px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .img-prev .txt #imageUpload {
  display: none;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .img-prev .txt .custom-button {
  background-color: #5d5fef;
  color: white;
  padding: 8px 13px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  font-weight: 500;
  font-size: 12px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .img-prev .preview {
  width: 150px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .img-prev .preview .image-preview {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #ffffff;
  border-radius: 20px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .img-prev .preview .image-preview img {
  width: 100%;
  height: auto;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .select label {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  color: #555555;
  padding: 0px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .select select {
  width: 100%;
  padding: 10px 5px;
  border: none;
  border-radius: 10px;
  font-size: 12px;
  margin-top: 5px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .checkbox .checkbox-wrap {
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .checkbox .checkbox-wrap div {
  display: flex;
  align-items: center;
  gap: 3px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .checkbox .checkbox-wrap div input[type=checkbox] {
  width: auto;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .checkbox .checkbox-wrap div label {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  color: #555555;
  padding: 0px;
  font-weight: 500;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price .radio {
  display: flex;
  gap: 20px;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  color: #555555;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price .free,
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price #priceInput {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price .free .free-title,
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price #priceInput .free-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price .free .free-title p,
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price #priceInput .free-title p {
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 3px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price .free .free-title p span,
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price #priceInput .free-title p span {
  color: #ff5959;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price .free .free-title button,
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price #priceInput .free-title button {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  font-weight: 500;
  font-size: 11px;
  padding: 5px 10px;
  background-color: #5d5fef;
  border-radius: 10px;
  color: #ffffff;
  cursor: pointer;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price .free .option-wrap,
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price #priceInput .option-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: #f6f4fc;
  padding: 20px 10px;
  border-radius: 10px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price .free .option-wrap .option-wrap-title,
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price #priceInput .option-wrap .option-wrap-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price .free .option-wrap .option-wrap-title input[type=text],
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price #priceInput .option-wrap .option-wrap-title input[type=text] {
  padding: 0px 10px;
  background-color: #ffffff;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price .free .option-wrap .participant-count,
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price #priceInput .option-wrap .participant-count {
  display: flex;
  align-items: center;
  gap: 10px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price .free .option-wrap .participant-count button,
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price #priceInput .option-wrap .participant-count button {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border-radius: 10px;
  background-color: #ffffff;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price .free .option-wrap .participant-count input[type=text],
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price #priceInput .option-wrap .participant-count input[type=text] {
  text-align: center;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price .free .option-wrap .options-checkboxes,
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price #priceInput .option-wrap .options-checkboxes {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price .free .option-wrap .options-checkboxes div,
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price #priceInput .option-wrap .options-checkboxes div {
  display: flex;
  align-items: center;
  gap: 5px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price .free .option-wrap .options-checkboxes div input[type=checkbox],
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price #priceInput .option-wrap .options-checkboxes div input[type=checkbox] {
  width: auto;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price .free .option-wrap .options-checkboxes div label,
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price #priceInput .option-wrap .options-checkboxes div label {
  color: #555555;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price .free .option-wrap .option-price,
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price #priceInput .option-wrap .option-price {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price .free .option-wrap .option-price p,
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price #priceInput .option-wrap .option-price p {
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price .free .option-wrap .option-price p span,
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price #priceInput .option-wrap .option-price p span {
  color: #ff5959;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price .free .option-wrap .option-price label,
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price #priceInput .option-wrap .option-price label {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price .free .option-wrap .option-price label p,
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price #priceInput .option-wrap .option-price label p {
  font-size: 12px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price .free .option-wrap .option-price label input,
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price #priceInput .option-wrap .option-price label input {
  padding: 0px 10px;
  font-weight: 500;
  width: 80px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price .free .option-wrap .option-price label .position,
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price #priceInput .option-wrap .option-price label .position {
  position: absolute;
  right: 10px;
  font-size: 11px;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price .free .option-wrap .option-price .checkbox-label input[type=checkbox],
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price #priceInput .option-wrap .option-price .checkbox-label input[type=checkbox] {
  width: auto;
}
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price .free .option-wrap .option-delete,
.recruitment-add .wrap .recruitment-add-main .recruitment-add-contents .contents .price #priceInput .option-wrap .option-delete {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  font-weight: 500;
  font-size: 11px;
  padding: 7px 10px;
  background-color: #5d5fef;
  border-radius: 10px;
  color: #ffffff;
  cursor: pointer;
}

.recruitment-view {
  background-color: #f6f4fc;
  padding-bottom: 74px;
}
.recruitment-view .wrap main {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-top: 30px;
  padding-bottom: 0px;
}
.recruitment-view .wrap main .recruitment-profile {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.recruitment-view .wrap main .recruitment-profile .img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
}
.recruitment-view .wrap main .recruitment-profile .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.recruitment-view .wrap main .recruitment-profile .badge-favorite-share {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}
.recruitment-view .wrap main .recruitment-profile .badge-favorite-share .badge {
  padding: 10px 20px;
  background-color: #ff5959;
  color: #ffffff;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.recruitment-view .wrap main .recruitment-profile .badge-favorite-share .badge p {
  font-size: 13px;
  font-weight: 500;
}
.recruitment-view .wrap main .recruitment-profile .badge-favorite-share .badge-com {
  padding: 10px 20px;
  background-color: #2f4f4f;
  color: #ffffff;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.recruitment-view .wrap main .recruitment-profile .badge-favorite-share .badge-com p {
  font-size: 13px;
  font-weight: 500;
}
.recruitment-view .wrap main .recruitment-profile .badge-favorite-share .icon {
  display: flex;
  align-items: center;
  gap: 6px;
}
.recruitment-view .wrap main .recruitment-profile .badge-favorite-share .icon .icon-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background-color: #ffffff;
  border-radius: 50%;
}
.recruitment-view .wrap main .recruitment-profile .badge-favorite-share .icon .icon-wrap img {
  width: 18px;
  height: 18px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.recruitment-view .wrap main .recruitment-profile .title {
  width: 100%;
}
.recruitment-view .wrap main .recruitment-profile .title p {
  text-align: center;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  word-break: keep-all;
  color: #242424;
}
.recruitment-view .wrap main .recruitment-profile .introduce {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  width: 100%;
  font-size: 14px;
}
.recruitment-view .wrap main .recruitment-profile .introduce .textContent {
  width: 100%;
}
.recruitment-view .wrap main .recruitment-profile .introduce .textContent p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  word-break: keep-all;
  color: #555555;
  line-height: 18px;
  text-align: center;
}
.recruitment-view .wrap main .recruitment-profile .introduce .more {
  float: right;
  margin-top: 36px;
  shape-outside: border-box;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  word-break: keep-all;
  color: #555555;
  line-height: 18px;
  padding-left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.recruitment-view .wrap main .recruitment-profile .introduce .more a {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  word-break: keep-all;
  color: #555555;
  line-height: 18px;
  text-decoration: underline;
}
.recruitment-view .wrap main .recruitment-profile .introduce-info {
  margin-top: 10px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.recruitment-view .wrap main .recruitment-profile .introduce-info .ib-con {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 10px;
}
.recruitment-view .wrap main .recruitment-profile .introduce-info .ib-con p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  word-break: keep-all;
  color: #242424;
  line-height: 18px;
  color: #5d5fef;
}
.recruitment-view .wrap main .recruitment-profile .introduce-info .ib-con .txt {
  display: flex;
  align-items: center;
  gap: 3px;
}
.recruitment-view .wrap main .recruitment-profile .introduce-info .ib-con .txt p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  word-break: keep-all;
  color: #242424;
  line-height: 18px;
  color: #242424;
}
.recruitment-view .wrap main .tab {
  width: calc(100% + 40px);
  margin: 0px -20px;
  padding: 0 20px;
  background-color: #ffffff;
}
.recruitment-view .wrap main .tab .tab-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0px;
}
.recruitment-view .wrap main .tab .tab-wrap button {
  padding: 10px 20px;
  background-color: transparent;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 13px;
  word-break: keep-all;
  color: #242424;
  line-height: 18px;
}
.recruitment-view .wrap main .tab .tab-wrap .underline {
  text-decoration: underline;
  font-weight: 700;
  color: #ff5959;
}
.recruitment-view .wrap main .recruitment-contents {
  width: calc(100% + 40px);
  margin: 0px -20px;
  padding: 0 20px 30px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.recruitment-view .wrap main .recruitment-contents .box {
  background-color: #ffffff;
  border-radius: 10px;
  padding: 20px 15px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.recruitment-view .wrap main .recruitment-contents .box .box-txt {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-radius: 10px;
}
.recruitment-view .wrap main .recruitment-contents .box .box-txt li {
  display: flex;
  align-items: center;
  gap: 5px;
}
.recruitment-view .wrap main .recruitment-contents .box .box-txt li .title p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 13px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.recruitment-view .wrap main .recruitment-contents .box .box-txt li .txt p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 13px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
  color: #555555;
  font-weight: 400;
  white-space: wrap;
  font-size: 12.5px;
}
.recruitment-view .wrap main .recruitment-contents .box .box-txt .box-txt-number p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  word-break: keep-all;
  color: #242424;
  line-height: 18px;
  text-decoration: underline;
  margin-bottom: 5px;
}
.recruitment-view .wrap main .recruitment-contents .box .title p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  word-break: keep-all;
  color: #242424;
  line-height: 18px;
}
.recruitment-view .wrap main .recruitment-contents .box .txt {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.recruitment-view .wrap main .recruitment-contents .box .txt .txt-p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 13px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
  color: #555555;
  font-weight: 400;
  white-space: wrap;
}
.recruitment-view .wrap main .recruitment-review {
  width: calc(100% + 40px);
  margin: 0px -20px;
  margin-top: -20px;
  padding: 0px 20px 50px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
  background-color: #ffffff;
  height: 100%;
}
.recruitment-view .wrap main .recruitment-review .review-grade {
  padding: 10px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  width: 100%;
  margin-top: 20px;
}
.recruitment-view .wrap main .recruitment-review .review-grade .grade p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 34px;
  word-break: keep-all;
  color: #242424;
}
.recruitment-view .wrap main .recruitment-review .review-grade .star-rating {
  font-size: 18px;
  color: #ffd700;
}
.recruitment-view .wrap main .recruitment-review .review-grade .star-rating p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 20px;
  word-break: keep-all;
  color: #8b8b8b;
  margin-top: 5px;
}
.recruitment-view .wrap main .recruitment-review .button button {
  padding: 10px 20px;
  border-radius: 10px;
  background-color: #5d5fef;
  border: 1px solid #5d5fef;
  color: #ffffff;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  word-break: keep-all;
  cursor: pointer;
}
.recruitment-view .wrap main .recruitment-review .review-contentWrap {
  width: 100%;
}
.recruitment-view .wrap main .recruitment-review .review-contentWrap .review-content {
  width: 100%;
  box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 10px;
}
.recruitment-view .wrap main .recruitment-review .review-contentWrap .review-content .review-profile {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.recruitment-view .wrap main .recruitment-review .review-contentWrap .review-content .review-profile .profile {
  display: flex;
  align-items: center;
  gap: 15px;
}
.recruitment-view .wrap main .recruitment-review .review-contentWrap .review-content .review-profile .profile img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 50%;
}
.recruitment-view .wrap main .recruitment-review .review-contentWrap .review-content .review-profile .profile .txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.recruitment-view .wrap main .recruitment-review .review-contentWrap .review-content .review-profile .profile .txt .profile-name {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  word-break: keep-all;
  color: #242424;
}
.recruitment-view .wrap main .recruitment-review .review-contentWrap .review-content .review-profile .profile .txt .review-date {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 20px;
  word-break: keep-all;
  color: #8b8b8b;
}
.recruitment-view .wrap main .recruitment-review .review-contentWrap .review-content .review-profile .star {
  font-size: 12px;
  color: #ffd700;
}
.recruitment-view .wrap main .recruitment-review .review-contentWrap .review-content .review-txt {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.recruitment-view .wrap main .recruitment-review .review-contentWrap .review-content .review-txt .title {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 20px;
  word-break: keep-all;
  color: #242424;
}
.recruitment-view .wrap main .recruitment-review .review-contentWrap .review-content .review-txt .title span {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 20px;
  word-break: keep-all;
  color: #242424;
}
.recruitment-view .wrap main .recruitment-review .review-contentWrap .review-content .review-txt p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 18px;
  word-break: keep-all;
  color: #242424;
}
.recruitment-view .wrap main .recruitment-review .review-contentWrap .review-content .report {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
  height: 13px;
}
.recruitment-view .wrap main .recruitment-review .review-contentWrap .review-content .report button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 5px;
  background-color: transparent;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 20px;
  word-break: keep-all;
  color: #8b8b8b;
  cursor: pointer;
}
.recruitment-view .wrap main .recruitment-review .review-contentWrap .review-content .report img {
  width: 13px;
  height: 13px;
}
.recruitment-view .wrap main .recruitment-cancel {
  width: calc(100% + 40px);
  margin: 0 -20px;
  margin-top: -20px;
  padding: 0px 20px;
  height: 100%;
  background-color: #ffffff;
}
.recruitment-view .wrap main .recruitment-cancel .cancel-box {
  padding: 10px;
  margin: 20px 0px 30px 0px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.recruitment-view .wrap main .recruitment-cancel .cancel-box .title p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  word-break: keep-all;
  color: #242424;
  line-height: 18px;
}
.recruitment-view .wrap main .recruitment-cancel .cancel-box .txt {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.recruitment-view .wrap main .recruitment-cancel .cancel-box .txt li {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 13px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
  color: #555555;
  font-weight: 400;
  white-space: wrap;
  list-style: square;
  margin-left: 20px;
}
.recruitment-view .wrap main .recruitment-cancel .cancel-box .txt li:last-child {
  font-weight: 700;
  text-decoration: underline;
}

.recruitment-apply {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-top: 30px;
}
.recruitment-apply .check {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.recruitment-apply .check .title p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
}
.recruitment-apply .check .txt p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
  font-weight: 500;
  font-size: 13px;
  color: #555555;
}
.recruitment-apply .choice {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 30px;
}
.recruitment-apply .choice .title {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.recruitment-apply .choice .title p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
}
.recruitment-apply .choice .title button {
  padding: 8px;
  border-radius: 10px;
  border: 1px solid #5d5fef;
  background-color: #f6f4fc;
  color: #5d5fef;
  font-size: 11px;
  cursor: pointer;
}
.recruitment-apply .choice .cv {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.recruitment-apply .choice .cv .profile {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  border-radius: 10px;
  background-color: #f9f9f9;
  padding: 15px 10px;
}
.recruitment-apply .choice .cv .profile .radio {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
}
.recruitment-apply .choice .cv .profile .radio .txt {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.recruitment-apply .choice .cv .profile .radio .txt label p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
  font-weight: 500;
}
.recruitment-apply .choice .cv .profile .radio .txt p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
  font-weight: 500;
  font-size: 12px;
  color: #555555;
  display: flex;
  align-items: center;
  gap: 3px;
}
.recruitment-apply .choice .cv .profile .radio .txt p span {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
  font-weight: 500;
  font-size: 12px;
  color: #555555;
}
.recruitment-apply .choice .cv .profile .buttons {
  display: flex;
  align-items: center;
  gap: 3px;
}
.recruitment-apply .choice .cv .profile .buttons button {
  padding: 3px 9px;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
  font-weight: 500;
  font-size: 10px;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 7px;
}
.recruitment-apply .msg {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.recruitment-apply .msg .title p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
}
.recruitment-apply .msg .msg-content {
  position: relative;
}
.recruitment-apply .msg .msg-content textarea {
  width: 100%;
  padding: 10px;
  height: 130px;
  border-radius: 10px;
  background-color: #ffffff;
  border: 1px solid #ccc;
}
.recruitment-apply .msg .msg-content textarea:focus {
  outline: none;
}
.recruitment-apply .msg .msg-content span {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
  font-weight: 500;
  font-size: 12px;
  color: #8b8b8b;
}
.recruitment-apply .button {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}
.recruitment-apply .button button {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  word-break: keep-all;
  color: #242424;
  color: #ffffff;
  border-radius: 10px;
  padding: 10px 20px;
}
.recruitment-apply .button button:first-child {
  background-color: #f6f4fc;
  border: 1px solid #5d5fef;
  color: #5d5fef;
}

.government-list {
  background-color: #f6f4fc;
}
.government-list .wrap .government-list-main {
  gap: 15px;
}
.government-list .wrap .government-list-main .government-list-swiper {
  width: calc(100% + 40px);
  margin-right: -20px;
  margin-left: -20px;
  background-color: #ffffff;
  padding: 5px 0px;
  position: -webkit-sticky;
  position: sticky;
  top: 50px;
  z-index: 1000;
  background: white;
  border-bottom: 1px solid #ccc;
}
.government-list .wrap .government-list-main .government-list-swiper swiper-container {
  width: 100%;
  padding: 0px 15px;
}
.government-list .wrap .government-list-main .government-list-swiper swiper-container swiper-slide {
  width: auto;
  padding: 10px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.government-list .wrap .government-list-main .government-list-swiper swiper-container swiper-slide p,
.government-list .wrap .government-list-main .government-list-swiper swiper-container swiper-slide a {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
}
.government-list .wrap .government-list-main .government-list-swiper swiper-container .on {
  background-color: #f6f4fc;
}
.government-list .wrap .government-list-main .government-list-swiper swiper-container .on p {
  color: #4424a8;
  font-weight: 700;
}
.government-list .wrap .government-list-main .search-option {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.government-list .wrap .government-list-main .search-option .search-bar-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.government-list .wrap .government-list-main .search-option .search-bar-option .search-bar {
  width: 100%;
}
.government-list .wrap .government-list-main .search-option .search-bar-option .search-bar input {
  width: 100%;
  border-radius: 10px;
  padding: 10px 15px;
  background-color: #ffffff;
}
.government-list .wrap .government-list-main .search-option .filter select {
  padding: 8% 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
}
.government-list .wrap .government-list-main .government-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.government-list .wrap .government-list-main .government-list-wrap .government {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 15px;
  border: 1px solid #f1f1f1;
  cursor: pointer;
}
.government-list .wrap .government-list-main .government-list-wrap .government .title {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
}
.government-list .wrap .government-list-main .government-list-wrap .government .title p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 16px;
  word-break: keep-all;
}
.government-list .wrap .government-list-main .government-list-wrap .government .content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.government-list .wrap .government-list-main .government-list-wrap .government .content .txt {
  display: flex;
  gap: 5px;
}
.government-list .wrap .government-list-main .government-list-wrap .government .content .txt p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  color: #242424;
}
.government-list .wrap .government-list-main .government-list-wrap .government .content .location {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  color: #242424;
  display: flex;
  align-items: center;
  gap: 3px;
}
.government-list .wrap .government-list-main .government-list-wrap .government .content .location img {
  width: 14px;
  height: 14px;
}
.government-list .wrap .government-list-main .government-list-wrap .government .date {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.government-list .wrap .government-list-main .government-list-wrap .government .date p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  color: #242424;
  color: #8b8b8b;
}
.government-list .wrap .government-list-main .government-list-wrap .government .date img {
  cursor: pointer;
  width: 20px;
  height: 20px;
}

.mypage {
  padding-bottom: 20px;
}
.mypage .mypage-wrap {
  width: calc(100% + 40px);
  margin: 0px -20px;
  padding: 0px 20px;
  background-color: #f6f4fc;
  position: relative;
}
.mypage .mypage-wrap .topBox {
  background-color: #5d5fef;
  width: calc(100% + 40px);
  margin: 0px -20px;
  height: 230px;
  padding: 50px 20px 0px;
  display: flex;
  justify-content: space-between;
}
.mypage .mypage-wrap .topBox .title,
.mypage .mypage-wrap .topBox .icon {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;
  word-break: keep-all;
  letter-spacing: 1.2px;
  color: #242424;
  line-height: 20px;
  color: #ffffff;
}
.mypage .mypage-wrap .topBox .title img,
.mypage .mypage-wrap .topBox .icon img {
  width: 18px;
  height: 18px;
}
.mypage .mypage-wrap main {
  position: relative;
  top: -80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.mypage .mypage-wrap main .mypage-profile,
.mypage .mypage-wrap main .mypageAll {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  border-radius: 20px;
  background-color: #ffffff;
  padding: 20px 20px;
}
.mypage .mypage-wrap main .mypage-profile .img,
.mypage .mypage-wrap main .mypageAll .img {
  position: absolute;
  top: -65px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 2px solid #ccc;
}
.mypage .mypage-wrap main .mypage-profile .img img,
.mypage .mypage-wrap main .mypageAll .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.mypage .mypage-wrap main .mypage-profile .name,
.mypage .mypage-wrap main .mypageAll .name {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.mypage .mypage-wrap main .mypage-profile .name p,
.mypage .mypage-wrap main .mypageAll .name p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  word-break: keep-all;
  letter-spacing: 1.1px;
  color: #242424;
  line-height: 20px;
}
.mypage .mypage-wrap main .mypage-profile .name p:last-child,
.mypage .mypage-wrap main .mypageAll .name p:last-child {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  word-break: keep-all;
  color: #555555;
  line-height: 20px;
  letter-spacing: 0.5px;
}
.mypage .mypage-wrap main .mypage-profile .title,
.mypage .mypage-wrap main .mypageAll .title {
  margin-bottom: 10px;
  width: 100%;
}
.mypage .mypage-wrap main .mypage-profile .title p,
.mypage .mypage-wrap main .mypageAll .title p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
}
.mypage .mypage-wrap main .mypage-profile .contents,
.mypage .mypage-wrap main .mypageAll .contents {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.mypage .mypage-wrap main .mypage-profile .contents .contents-title,
.mypage .mypage-wrap main .mypageAll .contents .contents-title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.mypage .mypage-wrap main .mypage-profile .contents .contents-title img,
.mypage .mypage-wrap main .mypageAll .contents .contents-title img {
  width: 14px;
  height: 14px;
}
.mypage .mypage-wrap main .mypage-profile .contents .contents-title p,
.mypage .mypage-wrap main .mypageAll .contents .contents-title p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
}
.mypage .mypage-wrap main .mypage-profile .contents img,
.mypage .mypage-wrap main .mypageAll .contents img {
  width: 18px;
  height: 18px;
}
.mypage .mypage-wrap main .mypage-profile {
  padding: 85px 20px 20px 20px;
  align-items: center;
}

.mypage-setting {
  padding-top: 20px;
}
.mypage-setting .border {
  border: 1px solid #f6f4fc;
  margin: 0px 10px;
}
.mypage-setting .mypageAll {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  position: relative;
  padding: 10px;
  border-radius: 20px;
  background-color: #ffffff;
}
.mypage-setting .mypageAll .title {
  margin-bottom: 10px;
  width: 100%;
}
.mypage-setting .mypageAll .title p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
}
.mypage-setting .mypageAll .contents {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  /* 토글 스위치의 전체적인 스타일 */
}
.mypage-setting .mypageAll .contents:last-child {
  align-items: flex-start;
}
.mypage-setting .mypageAll .contents .txt {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mypage-setting .mypageAll .contents .txt p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
}
.mypage-setting .mypageAll .contents .txt span {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
  font-size: 10px;
  color: #8b8b8b;
  line-height: 10px;
}
.mypage-setting .mypageAll .contents p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
}
.mypage-setting .mypageAll .contents img {
  width: 18px;
  height: 18px;
}
.mypage-setting .mypageAll .contents .version {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
  font-weight: 700;
  color: #5d5fef;
}
.mypage-setting .mypageAll .contents .switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 15px;
  /* 슬라이더 */
  /* 슬라이더 상태 변화에 따른 스타일 변경 */
}
.mypage-setting .mypageAll .contents .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.mypage-setting .mypageAll .contents .switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
}
.mypage-setting .mypageAll .contents .switch .slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 1px;
  bottom: 1px;
  background-color: white;
  transition: 0.4s;
}
.mypage-setting .mypageAll .contents .switch .slider.round {
  border-radius: 15px;
}
.mypage-setting .mypageAll .contents .switch .slider.round:before {
  border-radius: 50%;
}
.mypage-setting .mypageAll .contents .switch input:checked + .slider {
  background-color: #5d5fef;
}
.mypage-setting .mypageAll .contents .switch input:checked + .slider:before {
  transform: translateX(12px);
}
.mypage-setting .mypageAll .contents .switch input:focus + .slider {
  box-shadow: 0 0 1px #5d5fef;
}
.mypage-setting .mypageAll .contents .edit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  width: 80%;
}
.mypage-setting .mypageAll .contents .edit input {
  font-size: 12px;
  width: 60%;
}
.mypage-setting .mypageAll .contents .edit p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
}
.mypage-setting .mypageAll .contents .edit button {
  background-color: transparent;
  color: #242424;
  font-weight: 500;
  font-size: 11px;
  text-decoration: underline;
  padding: 5px;
}
.mypage-setting .mypageAll .contents .changeEdit {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}

.mypage-review {
  background-color: #f9f9f9;
  height: 100vh;
}
.mypage-review .wrap .mypage-review-main {
  width: calc(100% + 40px);
  margin: 0 -20px;
  padding: 0px 20px;
  padding-bottom: 120px;
  background-color: #f9f9f9;
  gap: 20px;
}
.mypage-review .wrap .mypage-review-main .tabs {
  width: calc(100% + 40px);
  margin: 0 -20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  padding-bottom: 20px;
  border-bottom: 2px solid #ECEEEF;
  background-color: #ffffff;
  gap: 20px;
  position: sticky;
  top: 50px;
  z-index: 999;
}
.mypage-review .wrap .mypage-review-main .tabs .tab-titles {
  display: flex;
  align-items: center;
  background-color: #f1f1f1;
  border-radius: 50px;
  gap: 10px;
}
.mypage-review .wrap .mypage-review-main .tabs .tab-titles p {
  width: 100%;
  text-align: center;
  padding: 10px;
  border-radius: 50px;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
  background-color: #f1f1f1;
}
.mypage-review .wrap .mypage-review-main .tabs .tab-titles p:first-child {
  background-color: #5d5fef;
  color: #ffffff;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}
.mypage-review .wrap .mypage-review-main .review-menu {
  width: calc(100% + 40px);
  margin: 0 -20px;
  margin-top: -20px;
  padding: 10px 20px;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.mypage-review .wrap .mypage-review-main .review-menu p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
  color: #555555;
}
.mypage-review .wrap .mypage-review-main .review-menu p:active, .mypage-review .wrap .mypage-review-main .review-menu p:focus {
  font-weight: 700;
  color: #5d5fef;
  text-decoration: underline;
}
.mypage-review .wrap .mypage-review-main .filter {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.mypage-review .wrap .mypage-review-main .filter select {
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
}
.mypage-review .wrap .mypage-review-main .tab-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.mypage-review .wrap .mypage-review-main .tab-content .review-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mypage-review .wrap .mypage-review-main .tab-content .review-wrap .review {
  width: 100%;
  box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 10px;
  background-color: #ffffff;
}
.mypage-review .wrap .mypage-review-main .tab-content .review-wrap .review .review-profile {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mypage-review .wrap .mypage-review-main .tab-content .review-wrap .review .review-profile .profile {
  display: flex;
  align-items: center;
  gap: 15px;
}
.mypage-review .wrap .mypage-review-main .tab-content .review-wrap .review .review-profile .profile img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 50%;
}
.mypage-review .wrap .mypage-review-main .tab-content .review-wrap .review .review-profile .profile .txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.mypage-review .wrap .mypage-review-main .tab-content .review-wrap .review .review-profile .profile .txt .profile-name {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  word-break: keep-all;
  color: #242424;
}
.mypage-review .wrap .mypage-review-main .tab-content .review-wrap .review .review-profile .profile .txt .review-date {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 20px;
  word-break: keep-all;
  color: #8b8b8b;
}
.mypage-review .wrap .mypage-review-main .tab-content .review-wrap .review .review-profile .star {
  font-size: 12px;
  color: #ffd700;
}
.mypage-review .wrap .mypage-review-main .tab-content .review-wrap .review .review-txt {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.mypage-review .wrap .mypage-review-main .tab-content .review-wrap .review .review-txt .title {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 20px;
  word-break: keep-all;
  color: #242424;
}
.mypage-review .wrap .mypage-review-main .tab-content .review-wrap .review .review-txt .title span {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 20px;
  word-break: keep-all;
  color: #242424;
}
.mypage-review .wrap .mypage-review-main .tab-content .review-wrap .review .review-txt p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 18px;
  word-break: keep-all;
  color: #242424;
}
.mypage-review .wrap .mypage-review-main .tab-content .review-wrap .review .report {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
  height: 13px;
}
.mypage-review .wrap .mypage-review-main .tab-content .review-wrap .review .report button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 5px;
  background-color: transparent;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 20px;
  word-break: keep-all;
  color: #8b8b8b;
  cursor: pointer;
}
.mypage-review .wrap .mypage-review-main .tab-content .review-wrap .review .report img {
  width: 13px;
  height: 13px;
}

.mypage-favorite {
  background-color: #f9f9f9;
  height: 100vh;
}
.mypage-favorite .wrap .mypage-favorite-main {
  width: calc(100% + 40px);
  margin: 0 -20px;
  padding: 0px 20px;
  padding-bottom: 120px;
  background-color: #f9f9f9;
  gap: 20px;
}
.mypage-favorite .wrap .mypage-favorite-main .category {
  width: calc(100% + 40px);
  margin-right: -20px;
  margin-left: -20px;
  background-color: #ffffff;
  padding: 5px 0px;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 50px; /* 헤더의 높이를 고려한 값으로 조정 */
  z-index: 1000; /* 다른 콘텐츠 위에 표시되도록 z-index 설정 */
  background: white; /* 배경색을 설정하여 내용이 겹치지 않도록 함 */
  border-bottom: 1px solid #ccc;
}
.mypage-favorite .wrap .mypage-favorite-main .category swiper-container {
  width: 100%;
  padding: 0px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mypage-favorite .wrap .mypage-favorite-main .category swiper-container swiper-slide {
  width: auto;
  padding: 10px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.mypage-favorite .wrap .mypage-favorite-main .category swiper-container swiper-slide p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
}
.mypage-favorite .wrap .mypage-favorite-main .category swiper-container .on {
  background-color: #f6f4fc;
}
.mypage-favorite .wrap .mypage-favorite-main .category swiper-container .on span {
  color: #4424a8;
}
.mypage-favorite .wrap .mypage-favorite-main .category swiper-container .on p {
  color: #4424a8;
  font-weight: 700;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content {
  display: flex;
  flex-direction: column;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .favorite-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .favorite-wrap .profile-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .favorite-wrap .profile-wrap .profile {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 15px;
  border: 1px solid #f1f1f1;
  cursor: pointer;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .favorite-wrap .profile-wrap .profile .title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .favorite-wrap .profile-wrap .profile .title p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 16px;
  word-break: keep-all;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .favorite-wrap .profile-wrap .profile .title .review {
  display: flex;
  align-items: center;
  gap: 7px;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .favorite-wrap .profile-wrap .profile .title .review img {
  width: 16px;
  height: 16px;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .favorite-wrap .profile-wrap .profile .title .review p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 16px;
  word-break: keep-all;
  height: 14px;
  letter-spacing: 0.5px;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .favorite-wrap .profile-wrap .profile .content {
  width: 100%;
  display: flex;
  gap: 15px;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .favorite-wrap .profile-wrap .profile .content .content-l {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .favorite-wrap .profile-wrap .profile .content .content-l .img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .favorite-wrap .profile-wrap .profile .content .content-l .img img {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .favorite-wrap .profile-wrap .profile .content .content-l .name {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  color: #242424;
  font-weight: 700;
  font-size: 12px;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .favorite-wrap .profile-wrap .profile .content .content-l .location {
  margin-top: -8px;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  color: #242424;
  font-size: 10px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .favorite-wrap .profile-wrap .profile .content .content-l .location img {
  width: 14px;
  height: 14px;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .favorite-wrap .profile-wrap .profile .content .content-l .location .location-name {
  display: flex;
  align-items: center;
  gap: 3px;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .favorite-wrap .profile-wrap .profile .content .content-l .location .location-name p,
.mypage-favorite .wrap .mypage-favorite-main .tab-content .favorite-wrap .profile-wrap .profile .content .content-l .location .location-name span {
  height: 16px;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .favorite-wrap .profile-wrap .profile .content .txt {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .favorite-wrap .profile-wrap .profile .content .txt p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  color: #242424;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .favorite-wrap .profile-wrap .profile .content .txt .chat {
  display: flex;
  justify-content: flex-end;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .favorite-wrap .profile-wrap .profile .content .txt .chat img {
  width: 18px;
  height: 18px;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .recruitment-result-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .recruitment-result-wrap .recruitment {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 15px;
  border: 1px solid #f1f1f1;
  cursor: pointer;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .recruitment-result-wrap .recruitment .title {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 20px;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .recruitment-result-wrap .recruitment .title p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 16px;
  word-break: keep-all;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .recruitment-result-wrap .recruitment .title .badge {
  padding: 6px 14px;
  background-color: #ff5959;
  color: #ffffff;
  border-radius: 8px;
  width: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .recruitment-result-wrap .recruitment .title .badge p {
  font-size: 12px;
  font-weight: 500;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .recruitment-result-wrap .recruitment .title .badge-com {
  padding: 6px 14px;
  background-color: #2f4f4f;
  color: #ffffff;
  border-radius: 8px;
  width: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .recruitment-result-wrap .recruitment .title .badge-com p {
  font-size: 12px;
  font-weight: 500;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .recruitment-result-wrap .recruitment .content {
  width: 100%;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .recruitment-result-wrap .recruitment .content .content-l {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .recruitment-result-wrap .recruitment .content .content-l .img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .recruitment-result-wrap .recruitment .content .content-l .img img {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .recruitment-result-wrap .recruitment .content .txt {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .recruitment-result-wrap .recruitment .content .txt > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .recruitment-result-wrap .recruitment .content .txt p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  color: #242424;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .recruitment-result-wrap .recruitment .content .txt .location {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  color: #242424;
  font-size: 10px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .recruitment-result-wrap .recruitment .content .txt .location img {
  width: 14px;
  height: 14px;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .recruitment-result-wrap .recruitment .content .txt .date {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .recruitment-result-wrap .recruitment .content .txt .date p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  color: #242424;
  color: #8b8b8b;
  font-size: 11px;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .recruitment-result-wrap .recruitment .content .txt .date img {
  width: 18px;
  height: 18px;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .government-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .government-list-wrap .government {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 15px;
  border: 1px solid #f1f1f1;
  cursor: pointer;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .government-list-wrap .government .title {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .government-list-wrap .government .title p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 16px;
  word-break: keep-all;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .government-list-wrap .government .content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .government-list-wrap .government .content .txt {
  display: flex;
  gap: 5px;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .government-list-wrap .government .content .txt p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  color: #242424;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .government-list-wrap .government .content .location {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  color: #242424;
  display: flex;
  align-items: center;
  gap: 3px;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .government-list-wrap .government .content .location img {
  width: 14px;
  height: 14px;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .government-list-wrap .government .date {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .government-list-wrap .government .date p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  color: #242424;
  color: #8b8b8b;
}
.mypage-favorite .wrap .mypage-favorite-main .tab-content .government-list-wrap .government .date img {
  cursor: pointer;
  width: 20px;
  height: 20px;
}

.mypage-qna {
  background-color: #5d5fef;
}
.mypage-qna .wrap .mypage-qna-main {
  position: relative;
}
.mypage-qna .wrap .mypage-qna-main .qna-title {
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.mypage-qna .wrap .mypage-qna-main .qna-title p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 20px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
  color: #ffffff;
}
.mypage-qna .wrap .mypage-qna-main .contents {
  width: 100%;
  margin: 0 -20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background-color: #ffffff;
  position: absolute;
  top: 180px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding-bottom: 130px;
}
.mypage-qna .wrap .mypage-qna-main .contents .contents-title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mypage-qna .wrap .mypage-qna-main .contents .contents-title #search-box {
  display: flex;
  align-items: center;
  position: relative;
  width: 50px;
  height: 40px;
  transition: width 0.5s ease;
}
.mypage-qna .wrap .mypage-qna-main .contents .contents-title #search-box #search-input {
  position: absolute;
  right: 30px;
  border: 1px solid #5d5fef;
  border-radius: 10px;
  outline: none;
  padding: 10px;
  width: 0;
  height: 100%;
  opacity: 0;
  transition: width 0.5s ease, opacity 0.5s ease;
}
.mypage-qna .wrap .mypage-qna-main .contents .contents-title #search-box #search-icon {
  position: absolute;
  right: 10px;
  cursor: pointer;
}
.mypage-qna .wrap .mypage-qna-main .contents .contents-title #search-box:focus-within {
  width: 225px;
}
.mypage-qna .wrap .mypage-qna-main .contents .contents-title #search-box:focus-within #search-input {
  width: calc(100% - 40px);
  opacity: 1;
  position: absolute;
  right: 0px;
}
.mypage-qna .wrap .mypage-qna-main .contents .contents-title p {
  font-weight: 700;
  font-size: 14px;
}
.mypage-qna .wrap .mypage-qna-main .contents .category {
  width: calc(100% + 40px);
  margin-right: -20px;
  margin-left: -20px;
  background-color: #ffffff;
  padding: 5px 0px;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 50px; /* 헤더의 높이를 고려한 값으로 조정 */
  z-index: 1000; /* 다른 콘텐츠 위에 표시되도록 z-index 설정 */
  background: white; /* 배경색을 설정하여 내용이 겹치지 않도록 함 */
}
.mypage-qna .wrap .mypage-qna-main .contents .category swiper-container {
  width: 100%;
  padding: 0px 15px;
}
.mypage-qna .wrap .mypage-qna-main .contents .category swiper-container swiper-slide {
  width: auto;
  padding: 8px 10px;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border: 1px solid #5d5fef;
  background-color: #ffffff;
}
.mypage-qna .wrap .mypage-qna-main .contents .category swiper-container swiper-slide a {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  color: #5d5fef;
}
.mypage-qna .wrap .mypage-qna-main .contents .category swiper-container .on {
  background-color: #5d5fef;
}
.mypage-qna .wrap .mypage-qna-main .contents .category swiper-container .on p {
  color: #ffffff;
  font-weight: 700;
}
.mypage-qna .wrap .mypage-qna-main .contents .qna-list {
  width: 100%;
  margin-top: 10px;
}
.mypage-qna .wrap .mypage-qna-main .contents .qna-list ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 10px;
}
.mypage-qna .wrap .mypage-qna-main .contents .qna-list ul li {
  width: 100%;
  padding: 10px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mypage-qna .wrap .mypage-qna-main .contents .qna-list ul li .qna-question a {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 13px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
}
.mypage-qna .wrap .mypage-qna-main .contents .qna-list ul li .qna-enter {
  display: flex;
  justify-content: center;
  align-items: center;
}
.mypage-qna .wrap .mypage-qna-main .contents .qna-list ul li .qna-enter img {
  width: 18px;
  height: 18px;
}

.mypage-qna-enter .wrap main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
.mypage-qna-enter .wrap main .q-title {
  width: 100%;
  padding-top: 30px;
}
.mypage-qna-enter .wrap main .q-title p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 20px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
  line-height: 30px;
}
.mypage-qna-enter .wrap main .q-answer {
  width: 100%;
}
.mypage-qna-enter .wrap main .q-answer p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 13px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
}

.mypage-notice .wrap .mypage-notice-main {
  padding-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}
.mypage-notice .wrap .mypage-notice-main .notice {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background-color: #f6f4fc;
  padding: 20px;
  border-radius: 20px;
}
.mypage-notice .wrap .mypage-notice-main .notice .icon img,
.mypage-notice .wrap .mypage-notice-main .notice .enter img {
  width: 20px;
  height: 20px;
}
.mypage-notice .wrap .mypage-notice-main .notice .txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mypage-notice .wrap .mypage-notice-main .notice .txt .date p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  word-break: keep-all;
  color: #8b8b8b;
  line-height: 20px;
  letter-spacing: -0.5px;
}
.mypage-notice .wrap .mypage-notice-main .notice .txt .title p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
}

.mypage-notice-enter .wrap main {
  display: flex;
  flex-direction: column;
  padding-top: 30px;
}
.mypage-notice-enter .wrap main .title {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mypage-notice-enter .wrap main .title .n-date {
  width: 100%;
}
.mypage-notice-enter .wrap main .title .n-date p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  word-break: keep-all;
  color: #8b8b8b;
  line-height: 20px;
  letter-spacing: -0.5px;
}
.mypage-notice-enter .wrap main .title .n-title {
  width: 100%;
}
.mypage-notice-enter .wrap main .title .n-title p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
  font-size: 14px;
}
.mypage-notice-enter .wrap main .border {
  height: 6px;
  width: calc(100% + 40px);
  margin: 0 -20px;
  background-color: #f9f9f9;
}
.mypage-notice-enter .wrap main .content {
  width: 100%;
}
.mypage-notice-enter .wrap main .content p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 13px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
}

.mypage-terms .wrap .mypage-terms-main {
  padding-top: 30px;
}
.mypage-terms .wrap .mypage-terms-main .terms {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.mypage-terms .wrap .mypage-terms-main .terms .content {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
}
.mypage-terms .wrap .mypage-terms-main .terms .content p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
}
.mypage-terms .wrap .mypage-terms-main .terms .content img {
  width: 18px;
  height: 18px;
}

.mypage-terms01 .wrap .mypage-terms01-main {
  padding-top: 30px;
}
.mypage-terms01 .wrap .mypage-terms01-main .terms01 .content p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
}

.mypage-apply {
  background-color: #f9f9f9;
}
.mypage-apply .wrap .mypage-apply-main {
  gap: 20px;
}
.mypage-apply .wrap .mypage-apply-main .tabs {
  width: calc(100% + 40px);
  margin: 0 -20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  padding-bottom: 20px;
  border-bottom: 2px solid #ECEEEF;
  background-color: #ffffff;
  gap: 20px;
  position: sticky;
  top: 50px;
  z-index: 999;
}
.mypage-apply .wrap .mypage-apply-main .tabs .tab-titles {
  display: flex;
  align-items: center;
  background-color: #f1f1f1;
  border-radius: 50px;
  gap: 10px;
}
.mypage-apply .wrap .mypage-apply-main .tabs .tab-titles p {
  width: 100%;
  text-align: center;
  padding: 10px;
  border-radius: 50px;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
  background-color: #f1f1f1;
}
.mypage-apply .wrap .mypage-apply-main .tabs .tab-titles p:first-child {
  background-color: #5d5fef;
  color: #ffffff;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}
.mypage-apply .wrap .mypage-apply-main .filter {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.mypage-apply .wrap .mypage-apply-main .filter select {
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
}
.mypage-apply .wrap .mypage-apply-main .mypage-apply-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mypage-apply .wrap .mypage-apply-main .mypage-apply-content .date {
  width: 100%;
}
.mypage-apply .wrap .mypage-apply-main .mypage-apply-content .date p {
  font-weight: 500;
  font-size: 12px;
  line-height: 15.6px;
  color: #a5a5a5;
}
.mypage-apply .wrap .mypage-apply-main .mypage-apply-content .mypage-recruitment {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-left: 20px;
  border-left: 1px solid #dfdfdf;
  position: relative;
}
.mypage-apply .wrap .mypage-apply-main .mypage-apply-content .mypage-recruitment .recruitment-wrap {
  width: 100%;
  padding-left: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
}
.mypage-apply .wrap .mypage-apply-main .mypage-apply-content .mypage-recruitment .recruitment-wrap .recruitment {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 20px 10px;
  border: 1px solid #f1f1f1;
  cursor: pointer;
  width: 100%;
}
.mypage-apply .wrap .mypage-apply-main .mypage-apply-content .mypage-recruitment .recruitment-wrap .recruitment .title {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
}
.mypage-apply .wrap .mypage-apply-main .mypage-apply-content .mypage-recruitment .recruitment-wrap .recruitment .title .badgeA,
.mypage-apply .wrap .mypage-apply-main .mypage-apply-content .mypage-recruitment .recruitment-wrap .recruitment .title .badgeB,
.mypage-apply .wrap .mypage-apply-main .mypage-apply-content .mypage-recruitment .recruitment-wrap .recruitment .title .badgeC,
.mypage-apply .wrap .mypage-apply-main .mypage-apply-content .mypage-recruitment .recruitment-wrap .recruitment .title .badgeD {
  padding: 8px 16px;
  background-color: #4caf50;
  color: #ffffff;
  border-radius: 8px;
  width: 65px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mypage-apply .wrap .mypage-apply-main .mypage-apply-content .mypage-recruitment .recruitment-wrap .recruitment .title .badgeA p,
.mypage-apply .wrap .mypage-apply-main .mypage-apply-content .mypage-recruitment .recruitment-wrap .recruitment .title .badgeB p,
.mypage-apply .wrap .mypage-apply-main .mypage-apply-content .mypage-recruitment .recruitment-wrap .recruitment .title .badgeC p,
.mypage-apply .wrap .mypage-apply-main .mypage-apply-content .mypage-recruitment .recruitment-wrap .recruitment .title .badgeD p {
  font-size: 12px;
  font-weight: 500;
  line-height: 11px;
}
.mypage-apply .wrap .mypage-apply-main .mypage-apply-content .mypage-recruitment .recruitment-wrap .recruitment .title .badgeB {
  background-color: #c62828;
}
.mypage-apply .wrap .mypage-apply-main .mypage-apply-content .mypage-recruitment .recruitment-wrap .recruitment .title .badgeC {
  background-color: #ffc107;
}
.mypage-apply .wrap .mypage-apply-main .mypage-apply-content .mypage-recruitment .recruitment-wrap .recruitment .title .badgeD {
  background-color: #9e9e9e;
}
.mypage-apply .wrap .mypage-apply-main .mypage-apply-content .mypage-recruitment .recruitment-wrap .recruitment .title p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 16px;
  word-break: keep-all;
  font-size: 11px;
}
.mypage-apply .wrap .mypage-apply-main .mypage-apply-content .mypage-recruitment .recruitment-wrap .recruitment .title .title-p {
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: auto;
  max-width: 100%;
  flex-grow: 1;
  flex-basis: 0;
}
.mypage-apply .wrap .mypage-apply-main .mypage-apply-content .mypage-recruitment .recruitment-wrap .recruitment .content {
  width: 100%;
  display: flex;
  gap: 10px;
}
.mypage-apply .wrap .mypage-apply-main .mypage-apply-content .mypage-recruitment .recruitment-wrap .recruitment .content .content-l {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 65px;
}
.mypage-apply .wrap .mypage-apply-main .mypage-apply-content .mypage-recruitment .recruitment-wrap .recruitment .content .content-l .img {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mypage-apply .wrap .mypage-apply-main .mypage-apply-content .mypage-recruitment .recruitment-wrap .recruitment .content .content-l .img img {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mypage-apply .wrap .mypage-apply-main .mypage-apply-content .mypage-recruitment .recruitment-wrap .recruitment .content .txt {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.mypage-apply .wrap .mypage-apply-main .mypage-apply-content .mypage-recruitment .recruitment-wrap .recruitment .content .txt > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mypage-apply .wrap .mypage-apply-main .mypage-apply-content .mypage-recruitment .recruitment-wrap .recruitment .content .txt p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  color: #242424;
  font-size: 11px;
  line-height: 11px;
}
.mypage-apply .wrap .mypage-apply-main .mypage-apply-content .mypage-recruitment .recruitment-wrap .recruitment .content .txt .location {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  color: #242424;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 3px;
  line-height: 11px;
}
.mypage-apply .wrap .mypage-apply-main .mypage-apply-content .mypage-recruitment .recruitment-wrap .recruitment .content .txt .location img {
  width: 14px;
  height: 14px;
}
.mypage-apply .wrap .mypage-apply-main .mypage-apply-content .mypage-recruitment .recruitment-wrap .recruitment .more {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
}
.mypage-apply .wrap .mypage-apply-main .mypage-apply-content .mypage-recruitment .recruitment-wrap .recruitment .more p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  color: #242424;
  color: #8b8b8b;
  text-decoration: underline;
  font-size: 11px;
  cursor: pointer;
}
.mypage-apply .wrap .mypage-apply-main .mypage-apply-content .mypage-recruitment::before {
  content: url("../img/icon/Ellipse.svg");
  position: absolute;
  left: -5px;
  top: -7px;
}

.mypage-recruitment-setting .wrap main {
  padding-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mypage-recruitment-setting .wrap main .search-bar-option {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mypage-recruitment-setting .wrap main .search-bar-option .search-bar input {
  border-radius: 10px;
  padding: 10px 15px;
  background-color: #ffffff;
  border: 1px solid #ccc;
}
.mypage-recruitment-setting .wrap main .search-option {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mypage-recruitment-setting .wrap main .search-option button {
  padding: 8px 15px;
  border-radius: 10px;
  background-color: #5d5fef;
  color: #ffffff;
  cursor: pointer;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
}
.mypage-recruitment-setting .wrap main .search-option button:hover {
  background-color: #ffffff;
  color: #5d5fef;
  border: 1px solid #5d5fef;
}
.mypage-recruitment-setting .wrap main .search-option .filter select {
  padding: 8% 10px;
  border-radius: 10px;
  border: 1px solid #ccc;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
}
.mypage-recruitment-setting .wrap .recruitment-result-wrap {
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.mypage-recruitment-setting .wrap .recruitment-result-wrap .recruitment {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 15px;
  border: 1px solid #f1f1f1;
  cursor: pointer;
}
.mypage-recruitment-setting .wrap .recruitment-result-wrap .recruitment .title {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 20px;
}
.mypage-recruitment-setting .wrap .recruitment-result-wrap .recruitment .title p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 16px;
  word-break: keep-all;
}
.mypage-recruitment-setting .wrap .recruitment-result-wrap .recruitment .title .badge {
  padding: 6px 14px;
  background-color: #ff5959;
  color: #ffffff;
  border-radius: 8px;
  width: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mypage-recruitment-setting .wrap .recruitment-result-wrap .recruitment .title .badge p {
  font-size: 12px;
  font-weight: 500;
}
.mypage-recruitment-setting .wrap .recruitment-result-wrap .recruitment .title .badge-com {
  padding: 6px 14px;
  background-color: #2f4f4f;
  color: #ffffff;
  border-radius: 8px;
  width: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mypage-recruitment-setting .wrap .recruitment-result-wrap .recruitment .title .badge-com p {
  font-size: 12px;
  font-weight: 500;
}
.mypage-recruitment-setting .wrap .recruitment-result-wrap .recruitment .content {
  width: 100%;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.mypage-recruitment-setting .wrap .recruitment-result-wrap .recruitment .content .content-l {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.mypage-recruitment-setting .wrap .recruitment-result-wrap .recruitment .content .content-l .img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mypage-recruitment-setting .wrap .recruitment-result-wrap .recruitment .content .content-l .img img {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mypage-recruitment-setting .wrap .recruitment-result-wrap .recruitment .content .txt {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
}
.mypage-recruitment-setting .wrap .recruitment-result-wrap .recruitment .content .txt > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mypage-recruitment-setting .wrap .recruitment-result-wrap .recruitment .content .txt p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  color: #242424;
}
.mypage-recruitment-setting .wrap .recruitment-result-wrap .recruitment .content .txt .location {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  color: #242424;
  font-size: 10px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.mypage-recruitment-setting .wrap .recruitment-result-wrap .recruitment .content .txt .location img {
  width: 14px;
  height: 14px;
}
.mypage-recruitment-setting .wrap .recruitment-result-wrap .recruitment .content .txt .bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 3px;
}
.mypage-recruitment-setting .wrap .recruitment-result-wrap .recruitment .content .txt .bottom .date p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  color: #242424;
  color: #8b8b8b;
  font-size: 11px;
}
.mypage-recruitment-setting .wrap .recruitment-result-wrap .recruitment .content .txt .bottom .buttons {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mypage-recruitment-setting .wrap .recruitment-result-wrap .recruitment .content .txt .bottom .buttons button {
  text-decoration: underline;
  background-color: #ffffff;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  color: #242424;
  color: #8b8b8b;
  font-size: 12px;
}

.mypage-recruitment-applicant .wrap main {
  padding-top: 20px;
  gap: 20px;
}
.mypage-recruitment-applicant .wrap main .total-applicants {
  width: 100%;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  word-break: keep-all;
  text-align: right;
  padding-right: 10px;
}
.mypage-recruitment-applicant .wrap main .participant-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mypage-recruitment-applicant .wrap main .participant-list .participant-header,
.mypage-recruitment-applicant .wrap main .participant-list .participant {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-radius: 8px;
}
.mypage-recruitment-applicant .wrap main .participant-list .participant-header {
  background-color: #5d5fef;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  word-break: keep-all;
  color: #ffffff;
}
.mypage-recruitment-applicant .wrap main .participant-list .header-item,
.mypage-recruitment-applicant .wrap main .participant-list .item {
  flex: 1;
  text-align: center;
}
.mypage-recruitment-applicant .wrap main .participant-list .header-item:first-child,
.mypage-recruitment-applicant .wrap main .participant-list .item:first-child {
  flex: 0 0 15%;
}
.mypage-recruitment-applicant .wrap main .participant-list .header-item:nth-child(2),
.mypage-recruitment-applicant .wrap main .participant-list .item:nth-child(2) {
  flex: 0 0 25%;
}
.mypage-recruitment-applicant .wrap main .participant-list .header-item:nth-child(3),
.mypage-recruitment-applicant .wrap main .participant-list .item:nth-child(3) {
  flex: 0 0 30%;
}
.mypage-recruitment-applicant .wrap main .participant-list .header-item:last-child,
.mypage-recruitment-applicant .wrap main .participant-list .item:last-child {
  flex: 0 0 30%;
}
.mypage-recruitment-applicant .wrap main .participant-list .item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 13px;
  word-break: keep-all;
  position: relative;
}
.mypage-recruitment-applicant .wrap main .participant-list .participant {
  background-color: #f6f4fc;
}
.mypage-recruitment-applicant .wrap main .participant-list a {
  color: #5d5fef;
  text-decoration: underline;
}
.mypage-recruitment-applicant .wrap main .participant-list a:hover {
  text-decoration: underline;
}
.mypage-recruitment-applicant .wrap main .participant-list select {
  width: 100%;
  border: 1px solid #ced4da;
  border-radius: 8px;
  padding: 8px;
  background-color: #fff;
  -webkit-appearance: none; /* 스타일을 위해 기본 디자인 제거 */
  -moz-appearance: none;
  appearance: none;
  flex-grow: 1; /* select를 확장하여 화살표 옆에 표시 */
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 13px;
  word-break: keep-all;
}
.mypage-recruitment-applicant .wrap main .participant-list .arrow {
  pointer-events: none;
  position: absolute;
  right: 8px; /* 우측 패딩과 일치 */
  font-size: 20px;
}

.mypage-profile .wrap .mypage-profile-main {
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mypage-profile .wrap .mypage-profile-main .search-bar-option {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mypage-profile .wrap .mypage-profile-main .search-bar-option select {
  padding: 8px;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  border-radius: 10px;
  border: 1px solid #ccc;
}
.mypage-profile .wrap .mypage-profile-main .search-bar-option .search-bar input {
  border-radius: 10px;
  padding: 10px 15px;
  border: 1px solid #ccc;
  background-color: #ffffff;
}
.mypage-profile .wrap .mypage-profile-main .search-option {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mypage-profile .wrap .mypage-profile-main .search-option button {
  padding: 8px 15px;
  border-radius: 10px;
  background-color: #5d5fef;
  color: #ffffff;
  cursor: pointer;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
}
.mypage-profile .wrap .mypage-profile-main .search-option button:hover {
  background-color: #ffffff;
  color: #5d5fef;
  border: 1px solid #5d5fef;
}
.mypage-profile .wrap .mypage-profile-main .search-option .filter select {
  padding: 8% 10px;
  border-radius: 10px;
  border: 1px solid #ccc;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
}
.mypage-profile .wrap .mypage-profile-main .profile-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mypage-profile .wrap .mypage-profile-main .profile-wrap .profile {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 15px;
  border: 1px solid #f1f1f1;
  cursor: pointer;
}
.mypage-profile .wrap .mypage-profile-main .profile-wrap .profile .title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}
.mypage-profile .wrap .mypage-profile-main .profile-wrap .profile .title p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 16px;
  word-break: keep-all;
}
.mypage-profile .wrap .mypage-profile-main .profile-wrap .profile .title .review {
  display: flex;
  align-items: center;
  gap: 7px;
}
.mypage-profile .wrap .mypage-profile-main .profile-wrap .profile .title .review img {
  width: 16px;
  height: 16px;
}
.mypage-profile .wrap .mypage-profile-main .profile-wrap .profile .title .review p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 16px;
  word-break: keep-all;
  height: 14px;
  letter-spacing: 0.5px;
}
.mypage-profile .wrap .mypage-profile-main .profile-wrap .profile .content {
  width: 100%;
  display: flex;
  gap: 15px;
}
.mypage-profile .wrap .mypage-profile-main .profile-wrap .profile .content .content-l {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.mypage-profile .wrap .mypage-profile-main .profile-wrap .profile .content .content-l .img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mypage-profile .wrap .mypage-profile-main .profile-wrap .profile .content .content-l .img img {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mypage-profile .wrap .mypage-profile-main .profile-wrap .profile .content .content-l .name {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  color: #242424;
  font-weight: 700;
  font-size: 12px;
}
.mypage-profile .wrap .mypage-profile-main .profile-wrap .profile .content .content-l .location {
  margin-top: -8px;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  color: #242424;
  font-size: 10px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.mypage-profile .wrap .mypage-profile-main .profile-wrap .profile .content .content-l .location img {
  width: 14px;
  height: 14px;
}
.mypage-profile .wrap .mypage-profile-main .profile-wrap .profile .content .content-l .location .location-name {
  display: flex;
  align-items: center;
  gap: 3px;
}
.mypage-profile .wrap .mypage-profile-main .profile-wrap .profile .content .content-l .location .location-name p,
.mypage-profile .wrap .mypage-profile-main .profile-wrap .profile .content .content-l .location .location-name span {
  height: 16px;
}
.mypage-profile .wrap .mypage-profile-main .profile-wrap .profile .content .txt {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.mypage-profile .wrap .mypage-profile-main .profile-wrap .profile .content .txt p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  word-break: keep-all;
  color: #242424;
}
.mypage-profile .wrap .mypage-profile-main .profile-wrap .profile .content .txt .chat {
  display: flex;
  justify-content: flex-end;
}
.mypage-profile .wrap .mypage-profile-main .profile-wrap .profile .content .txt .chat img {
  width: 18px;
  height: 18px;
}

.mypage-ask .wrap .mypage-ask-main {
  padding-top: 10px;
  gap: 20px;
}
.mypage-ask .wrap .mypage-ask-main .button {
  display: flex;
  justify-content: flex-end;
}
.mypage-ask .wrap .mypage-ask-main .button button {
  background-color: #5d5fef;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 10px;
}
.mypage-ask .wrap .mypage-ask-main .ask {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
}
.mypage-ask .wrap .mypage-ask-main .ask .title,
.mypage-ask .wrap .mypage-ask-main .ask .date {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mypage-ask .wrap .mypage-ask-main .ask .title p,
.mypage-ask .wrap .mypage-ask-main .ask .date p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  word-break: keep-all;
  color: #242424;
}
.mypage-ask .wrap .mypage-ask-main .ask .title span,
.mypage-ask .wrap .mypage-ask-main .ask .date span {
  color: #242424;
}
.mypage-ask .wrap .mypage-ask-main .ask .date p {
  color: #8b8b8b;
  font-size: 12px;
}
.mypage-ask .wrap .mypage-ask-main .ask .title p {
  line-height: 20px;
}
.mypage-ask .wrap .mypage-ask-main .ask .title img {
  width: 22px;
  height: 22px;
}
.mypage-ask .wrap .mypage-ask-main .ask .status-badge {
  width: 23%;
  padding: 8px 10px;
  background-color: #ff5959;
  color: #ffffff;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mypage-ask .wrap .mypage-ask-main .ask .status-badge p {
  font-size: 12px;
  font-weight: 500;
}
.mypage-ask .wrap .mypage-ask-main .ask .status-badge-comp {
  width: 23%;
  padding: 8px 10px;
  background-color: #2f4f4f;
  color: #ffffff;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mypage-ask .wrap .mypage-ask-main .ask .status-badge-comp p {
  font-size: 12px;
  font-weight: 500;
}

.mypage-ask-enter .wrap main {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-top: 30px;
}
.mypage-ask-enter .wrap main .ask,
.mypage-ask-enter .wrap main .answer {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.mypage-ask-enter .wrap main .ask .title,
.mypage-ask-enter .wrap main .answer .title {
  width: 100%;
}
.mypage-ask-enter .wrap main .ask .title p,
.mypage-ask-enter .wrap main .answer .title p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 13px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
  font-weight: 700;
}
.mypage-ask-enter .wrap main .ask .txt,
.mypage-ask-enter .wrap main .answer .txt {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.mypage-ask-enter .wrap main .ask .txt p,
.mypage-ask-enter .wrap main .answer .txt p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 13px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
}
.mypage-ask-enter .wrap main .ask .date,
.mypage-ask-enter .wrap main .answer .date {
  margin-top: 10px;
}
.mypage-ask-enter .wrap main .ask .date p,
.mypage-ask-enter .wrap main .answer .date p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 500;
  font-size: 13px;
  word-break: keep-all;
  color: #242424;
  line-height: 20px;
  color: #8b8b8b;
  text-align: right;
  font-size: 11px;
}
.mypage-ask-enter .wrap main .border {
  width: 100%;
  height: 3px;
  background-color: #f6f4fc;
}

.mypage-ask-write .wrap main {
  padding-top: 30px;
  padding-bottom: 10px;
}
.mypage-ask-write .wrap main .ask-input,
.mypage-ask-write .wrap main .ask-text,
.mypage-ask-write .wrap main .ask-attach {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mypage-ask-write .wrap main .ask-input .title p,
.mypage-ask-write .wrap main .ask-text .title p,
.mypage-ask-write .wrap main .ask-attach .title p {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  word-break: keep-all;
}
.mypage-ask-write .wrap main .ask-input .input,
.mypage-ask-write .wrap main .ask-text .input,
.mypage-ask-write .wrap main .ask-attach .input {
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 5px 10px;
}
.mypage-ask-write .wrap main .ask-input textarea,
.mypage-ask-write .wrap main .ask-text textarea,
.mypage-ask-write .wrap main .ask-attach textarea {
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 10px;
}
.mypage-ask-write .wrap main .ask-input textarea:focus,
.mypage-ask-write .wrap main .ask-text textarea:focus,
.mypage-ask-write .wrap main .ask-attach textarea:focus {
  outline: none;
}
.mypage-ask-write .wrap main .ask-input input[type=file],
.mypage-ask-write .wrap main .ask-text input[type=file],
.mypage-ask-write .wrap main .ask-attach input[type=file] {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 10px;
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  word-break: keep-all;
  font-weight: 500;
  font-size: 12px;
}
.mypage-ask-write .wrap main .info {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mypage-ask-write .wrap main .info li {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  word-break: keep-all;
  font-weight: 500;
  font-size: 12px;
  color: #8b8b8b;
  line-height: 18px;
  letter-spacing: 0px;
  position: relative;
  margin-left: 15px;
}
.mypage-ask-write .wrap main .info li span {
  text-decoration: underline;
}
.mypage-ask-write .wrap main .info li::before {
  content: "▪";
  position: absolute;
  left: -15px;
}

.ott-view {
  background-color: #242424;
}
.ott-view header {
  background-color: #242424;
}
.ott-view header .wrap .header-center .txt p {
  color: #ffffff;
}
.ott-view .ott-view-wrap .ott-view-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ott-view .ott-view-wrap .ott-view-main .img {
  width: calc(100% + 40px);
  margin: 0 -20px;
  height: 300px;
}
.ott-view .ott-view-wrap .ott-view-main .img img {
  width: 100%;
  height: 100%;
}
.ott-view .ott-view-wrap .ott-view-main .btn {
  width: 100%;
  display: flex;
  justify-content: center;
}
.ott-view .ott-view-wrap .ott-view-main .btn button {
  width: 100%;
  background-color: #ff5959;
  border-radius: 7px;
  padding: 10px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 500;
  font-size: 14px;
}
.ott-view .ott-view-wrap .ott-view-main .btn button img {
  width: 12px;
  height: 12px;
}
.ott-view .ott-view-wrap .ott-view-main .ottTitle {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
}
.ott-view .ott-view-wrap .ott-view-main .ottTitle span {
  font-weight: 600;
  font-size: 16px;
  color: #ffffff;
}
.ott-view .ott-view-wrap .ott-view-main .ottTitle .titleSub {
  font-weight: 500;
  font-size: 12px;
}
.ott-view .ott-view-wrap .ott-view-main .ottTitle .badge {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ott-view .ott-view-wrap .ott-view-main .ottTitle .badge span {
  font-weight: 500;
  font-size: 10px;
  padding: 5px 10px;
  border-radius: 3px;
  text-align: center;
  white-space: nowrap;
}
.ott-view .ott-view-wrap .ott-view-main .ottTitle .badge .all {
  background-color: #009149;
}
.ott-view .ott-view-wrap .ott-view-main .ottTitle .badge .free {
  background-color: #3a4ca8;
}
.ott-view .ott-view-wrap .ott-view-main .ottTitle .badge .classic {
  background-color: #fd9f28;
}
.ott-view .ott-view-wrap .ott-view-main .border {
  width: 100%;
  height: 1px;
  background-color: #ffffff;
}
.ott-view .ott-view-wrap .ott-view-main .con {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ott-view .ott-view-wrap .ott-view-main .con .bigTitle {
  color: #ffffff;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 1px;
  margin-bottom: 5px;
}
.ott-view .ott-view-wrap .ott-view-main .con .conTitle {
  color: #ffffff;
  font-weight: 500;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ott-view .ott-view-wrap .ott-view-main .con .conTitle p {
  width: 18%;
}
.ott-view .ott-view-wrap .ott-view-main .con .conTitle span {
  font-size: 11px;
  font-weight: 400;
  flex: 1;
}
.ott-view .ott-view-wrap .ott-view-main .con .flex {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.ott-view .ott-view-wrap .ott-view-main .player .imgWrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ott-view .ott-view-wrap .ott-view-main .player .imgWrap img {
  width: 100px;
  height: 150px;
  margin-bottom: 10px;
}

.ottMain .wrap .main-main .menu {
  background-color: #242424;
}
.ottMain .wrap .main-main .menu .sub {
  background-color: #ffffff;
  border-radius: 20px;
  padding: 25px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.ottMain .wrap .main-main .menu .sub p {
  text-align: center;
  font-weight: 500;
  font-size: 12px;
  word-break: keep-all;
  line-height: 24px;
  color: #242424;
}
.ottMain .wrap .main-main .menu .sub p span {
  color: #ff5959;
  font-weight: 600;
  font-size: 14px;
}
.ottMain .wrap .main-main .menu .sub button {
  padding: 10px;
  width: 100%;
  border-radius: 10px;
  background-color: #5d5fef;
  color: #ffffff;
  font-weight: 500;
  font-size: 13px;
}
.ottMain .wrap .main-main .menu .tabWrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 50px;
  background-color: #474747;
  padding: 5px;
}
.ottMain .wrap .main-main .menu .tabWrap .tab {
  padding: 10px;
  flex: 1;
  text-align: center;
  font-weight: 500;
  font-size: 13px;
  border-radius: 50px;
  color: #ffffff;
}
.ottMain .wrap .main-main .menu .tabWrap .on {
  background-color: #ffffff;
  color: #242424;
}
.ottMain .wrap .main-main .menu .tabCon {
  width: 100%;
  padding-bottom: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10px;
}
.ottMain .wrap .main-main .menu .tabCon .video {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: calc(50% - 5px);
  margin-bottom: 20px;
}
.ottMain .wrap .main-main .menu .tabCon .video .imgWrap {
  position: relative;
  width: 100%;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
.ottMain .wrap .main-main .menu .tabCon .video .imgWrap img {
  width: 100%;
  height: 200px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
.ottMain .wrap .main-main .menu .tabCon .video .imgWrap .badge {
  position: absolute;
  top: 5px;
  left: 0px;
  padding: 8px 15px;
  background-color: #ff5959;
  color: #ffffff;
  font-weight: 500;
  font-size: 12px;
}
.ottMain .wrap .main-main .menu .tabCon .video .videoTitle {
  font-weight: 400;
  font-size: 13px;
  word-break: keep-all;
  color: #ffffff;
}


.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #09f;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
  margin: auto;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}


/* 슬라이더 컨테이너 */
.slider-container {
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Roboto', sans-serif;
}

input[type=range] {
  -webkit-appearance: none;
  width: 200px;
  height: 8px;
  border-radius: 5px;
  background: #ddd;
  outline: none;
  opacity: 0.7;
  transition: opacity 0.2s;
}

input[type=range]:hover {
  opacity: 1;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #1e90ff;
  cursor: pointer;
}

input[type=range]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #1e90ff;
  cursor: pointer;
}

/*# sourceMappingURL=style.css.map */