@charset "utf-8";
/*pretendard*/
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");

/*root*/
:root {
  --color--wh: #ffffff;
  --color--primary: #ff385c;
  --color--bk: #222222;
  --color--gray-666: #666666;
  --color--gray-999: #999999;
  --color--blue: #2455f4;
  --color--border-ddd: #dddddd;
  --color--border-eee: #eeeeee;
  --color--input-place: #999999;
  --color--input-disabled: #f5f5f5;
  --color--bg-highlight: #fff1cf;
  --color--bg-hover: rgba(0, 0, 0, 0.03);
  --color--bg-dim: rgba(0, 0, 0, 0.5);
  --swiper-theme-color: #222222 !important;
}

/* common */
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-size: 16px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--color--bk);
  word-break: keep-all;
  background-color: var(--color--wh);
  font-family: "Pretendard", sans-serif;
  word-wrap: break-word;
  position: relative;
  overflow: auto;
  letter-spacing: -0.25px;
}

/*common*/
.wrap {
  padding-top: 3.5rem;
  display: table;
  width: 100%;
  height: 100%;
  table-layout: fixed;
}
@media screen and (max-width: 767px) {
  .wrap {
    padding-top: 6.5rem;
  }
}
/*ui*/
.ui-wrap {
  width: 100%;
  height: 100%;
}

.ui {
  padding: 6rem 0;
  display: flex;
  gap: 6rem;
}

.ui .item {
  width: 50%;
}

.ui .item:only-child {
  width: 100%;
}

.ui .title {
  font-size: 2rem;
  font-weight: 800;
  padding-bottom: 1rem;
}

.ui .btn-area {
  justify-content: flex-start;
  flex-wrap: wrap;
}

/*modal*/
.modal {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: left;
  background: var(--color--bg-dim);
  z-index: 99999;
  overflow-y: auto;
  overflow-x: hidden;
}

.layer {
  display: table;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

.layer .layer-content {
  display: table-cell;
  vertical-align: middle;
  position: relative;
  top: 0;
  padding: 2rem 1.25rem;
  width: 100%;
}

.modal-inner {
  position: relative;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: auto;
  border-radius: 0.75rem;
  overflow: hidden;
  max-width: 750px;
  padding: 2rem;
  background-color: var(--color--wh);
}

.modal-close {
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
  z-index: 9999;
  background-image: url("../images/ic-close-lg.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

.modal-sm {
  max-width: 300px;
}

.modal-md {
  max-width: 450px;
}

.modal-lg {
  max-width: 800px;
}

.modal-content {
  height: 100%;
}

.modal.block {
  display: block;
}
.modal-header .title {
  font-size: 1.25rem;
  font-weight: 700;
  word-break: break-all;
  padding-right: 1.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.modal-header .title span {
  font-weight: 500;
  color: var(--color--gray-666);
  padding-left: 0.5rem;
  font-size: 1rem;
}
.modal-header .info {
  font-size: 0.875rem;
  color: var(--color--gray-light);
  padding-top: 0.375rem;
}

.modal-body {
  padding-top: 2rem;
}

.modal-footer {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding-top: 2rem;
}

.ic-modal {
  width: 3.75rem;
  height: 3.75rem;
  margin: 1rem auto;
}

.ic-modal.success {
  background: url("../images/ic-modal-check.svg") no-repeat center/cover;
}

.ic-modal.error {
  background: url("../images/ic-modal-error.svg") no-repeat center/cover;
}

.ic-modal.info {
  background: url("../images/ic-modal-info.svg") no-repeat center/cover;
}

/*.modal-sm*/
.modal-sm {
  padding: 0 !important;
  background-color: transparent;
}
.modal-sm .modal-header {
  padding: 2rem 1.5rem 0;
  background: var(--color--wh);
}
.modal-sm .modal-body {
  padding: 1rem 1.5rem 2rem;
  word-wrap: break-word;
  background: var(--color--wh);
}
.modal-sm .modal-body.only {
  padding: 2rem 1.5rem 2rem;
  min-height: 7.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.modal-sm .modal-footer {
  padding-top: 0;
  gap: 0;
}
.modal-sm .modal-footer button {
  border-radius: 0;
  width: 100%;
}
@media (max-width: 767px) {
  .modal-inner {
    padding: 1.5rem;
  }
  .modal-body {
    padding-top: 1.25rem;
  }
  .modal-header .title {
    font-size: 1.125rem;
  }
}

/*modal full*/
.modal-full {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
  visibility: hidden;
  max-width: 100%;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100); /*모바일 크롬 하단 툴바 문제*/
}

.modal-full.active {
  visibility: visible;
}

.modal-full.modal-md {
  max-width: 37.5rem;
}
.modal-full.modal-lg {
  max-width: 56.25rem;
}

.modal-full > .inner {
  background-color: var(--color--wh);
  position: absolute;
  right: -100%;
  top: 0;
  height: 100%;
  width: 100%;
  transition: all 0.4s;
}

.modal-full.active > .inner {
  right: 0;
}

.modal-full.active::before {
  content: "";
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--color--bg-dim);
  z-index: -1;
  animation: fade both 0.4s;
}

@keyframes fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.modal-full .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3.125rem;
  height: 5rem;
  position: relative;
}
.modal-full .modal-header.flex-end {
  justify-content: end;
}
.modal-full .modal-body {
  height: calc(100% - 5rem);
  padding: 0 3.125rem 3.125rem;
}
.modal-full .modal-header .left {
  display: flex;
  gap: 0.5rem;
  width: calc(100% - 2.5rem);
  align-items: center;
}
/* .modal-full .full-close {
  position: absolute;
  right: 1rem;
  top: 0.5625rem;
  z-index: 9999;
} */
@media screen and (max-width: 1024px) {
  .m-modal-full {
    overflow: hidden;
    background: var(--color--wh);
    height: calc(var(--vh, 1vh) * 100);
  }
  .modal-full.modal-lg {
    max-width: 100%;
  }
  .m-modal-full .layer .layer-content {
    padding: 0;
  }
  .m-modal-full .modal-inner {
    max-width: 100% !important;
    border-radius: 0;
    padding: 0;
  }
  .m-modal-full .modal-header {
    padding: 0 1rem;
    height: 3.75rem;
    display: flex;
    align-items: center;
  }

  .m-modal-full .modal-content-inner {
    height: calc(100vh - 3.75rem);
    padding: 0 1rem 3.125rem;
    overflow: auto;
    max-width: 100vw;
  }

  .m-modal-full .modal-content {
    height: calc(var(--vh, 1vh) * 100);
    display: flex;
    flex-direction: column;
  }
  .m-modal-full .modal-content-inner {
    flex: 1;
  }
}
@media (max-width: 767px) {
  .modal-full {
    max-width: 100% !important;
  }
  .modal-full .modal-header {
    padding: 0 1rem;
    height: 3.75rem;
  }
  .modal-full .modal-body {
    height: calc(100% - 3.75rem);
    padding: 0 1rem 3.125rem;
  }
}

/*input*/
input,
select,
textarea {
  border: 1px solid var(--color--border-ddd);
  font-size: 0.9375rem;
  background-color: var(--color--wh);
  width: 100%;
  font-family: "Pretendard", "Poppins", sans-serif;
  font-weight: 500;
  border-radius: 0.25rem;
}

input,
select {
  height: 2.5rem;
  display: inline-block;
  vertical-align: middle;
  padding: 0 0.875rem;
}

textarea {
  display: block;
  border-radius: 0.25rem;
  padding: 1rem;
  line-height: 1.5;
}

input:focus,
textarea:focus,
.input-line input:focus {
  border-color: var(--color--bk);
  transition: all 0.3s;
}

input[readonly],
input[disabled] {
  color: var(--color--gray);
  cursor: default;
  background-color: var(--color--input-disabled);
}

input[readonly]:focus,
input[disabled]:focus {
  border-color: var(--color--border-ddd);
}

input[disabled] {
  opacity: 1;
  -webkit-text-fill-color: inherit;
}

/*input-style*/
.input-line input {
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--color--border-ddd);
  border-radius: 0;
}

.input-line input[readonly],
.input-line input[disabled] {
  color: var(--color--gray);
  cursor: default;
  background-color: transparent;
  border-style: dashed !important;
}

/*.input-wrap*/
.input-wrap .info {
  font-size: 0.875rem;
  color: var(--color--gray-666);
  padding-top: 0.5rem;
  font-weight: 600;
}
.input-wrap .info:nth-child(n + 3) {
  padding-top: 0.25rem;
}
.input-wrap .info.error,
.input-wrap .info.success {
  display: flex;
  display: none;
  padding-left: 1.4rem;
  text-indent: -0.375rem;
}

.input-wrap .info.error {
  color: #f43333;
}

.input-wrap .info.success {
  color: #00b24d;
}
.input-wrap .info.success.disabled {
  color: #aaaaaa;
}
.input-wrap .info.error::before,
.input-wrap .info.success::before {
  content: "";
  display: inline-block;
  width: 1.125rem;
  height: 1.125rem;
  background-size: cover;
  background-repeat: no-repeat;
  margin-left: -1.125rem;
  margin-right: 0.375rem;
  margin-top: -0.15rem;
  vertical-align: middle;
}

.input-wrap .info.error::before {
  background-image: url("../images/ic-error-red-md.svg");
}

.input-wrap .info.success::before {
  background-image: url("../images/ic-success-green-md.svg");
}
.input-wrap .info.success.disabled::before {
  background-image: url("../images/ic-success-gray-md.svg");
}

input.fail {
  border-color: #f43333;
}

.info.active {
  display: block !important;
}

.label-set {
  width: 100%;
}

.label-set label {
  font-weight: 600;
  color: var(--color--gray-666);
  padding-bottom: 0.75rem;
  display: inline-block;
  line-height: 1;
  font-size: 0.875rem;
}
.label-set label span {
  padding-left: 0.25rem;
}

.input-wrap > *:nth-child(n + 2) {
  padding-top: 2rem;
}
.input-wrap.only > *:nth-child(n + 2) {
  padding-top: 0.5rem;
}

.input-set {
  width: 100%;
}

.btn-set {
  display: flex;
  gap: 0.375rem;
}

.btn-set .btn {
  height: 2.5rem;
  border-radius: 0.25rem;
}

.input-text-set {
  position: relative;
}

.input-text-set input {
  padding-right: 2.5rem;
}

.input-text {
  position: absolute;
  top: 50%;
  right: 1.125rem;
  transform: translateY(-50%);
  line-height: 1;
  font-size: 0.9375rem;
}
.input-ic-set {
  position: relative;
}

.input-ic-set input {
  padding-right: 2.5rem;
}

.input-ic {
  position: absolute;
  top: 50%;
  right: 1.125rem;
  transform: translateY(-50%);
  line-height: 1;
  font-size: 0.9375rem;
  z-index: 1;
}

.input-pw input {
  width: 50%;
}
.input-wrap .input-half {
  display: flex;
  gap: 1rem;
}
@media (max-width: 767px) {
  .input-wrap .input-half {
    flex-wrap: wrap;
    gap: 2rem;
  }
  .input-wrap .input-half input {
    width: 100%;
  }
}
/*button*/
button {
  font-family: "Pretendard", sans-serif;
  line-height: 1;
}

.btn-area {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding-top: 2rem;
}

.btn-area.vertical {
  gap: 0.625rem;
  flex-wrap: wrap;
}

.btn {
  border: 1px solid transparent;
  white-space: nowrap;
  border-radius: 100px;
}

.btn-lg {
  font-size: 1.063rem;
  height: 3.5rem;
  font-weight: 700;
  padding: 0 2rem;
  min-width: 9.375rem;
}

.btn-md {
  font-size: 1rem;
  height: 3.125rem;
  font-weight: 700;
  padding: 0 1.5rem;
  min-width: 7.5rem;
}

.btn-sm {
  font-size: 0.875rem;
  height: 2.5rem;
  font-weight: 600;
  padding: 0 1rem;
}
.btn-xsm {
  font-size: 0.75rem;
  height: 1.875rem;
  font-weight: 600;
  padding: 0 0.625rem;
}
.btn-primary {
  color: var(--color--wh);
  background-color: var(--color--primary);
}

.btn-primary-outline {
  color: var(--color--primary);
  background-color: var(--color--wh);
  border-color: var(--color--primary);
}
.btn-bk {
  color: var(--color--wh);
  background-color: var(--color--bk);
}
.btn-bk-outline {
  color: var(--color--bk);
  border-color: var(--color--bk);
}
.btn-gray {
  color: var(--color--bk);
  background-color: #f0f0f0;
}

.btn-gray-outline {
  color: var(--color--bk);
  background-color: var(--color--wh);
  border-color: #ccc;
}

.btn-disabled {
  color: rgba(34, 34, 34, 0.4);
  background-color: #f0f0f0;
  cursor: default;
  pointer-events: none;
}
@media screen and (min-width: 1025px) {
  .btn-primary:hover {
    background-color: #d9304e;
  }
  .btn-primary-outline:hover {
    background-color: rgba(255, 56, 92, 0.15);
  }
  .btn-bk-outline:hover {
    background-color: rgba(0, 0, 0, 0.1);
  }
  .btn-gray:hover {
    background-color: #e4e4e4;
  }
  .btn-gray-outline:hover {
    background-color: rgba(0, 0, 0, 0.1);
  }
}
/*custom-select*/
.select-sm .custom-select-wrapper,
.select-sm .custom-select {
  width: 180px;
}

.custom-select-wrapper {
  position: relative;
  display: inline-block;
  user-select: none;
  width: 100%;
}

.custom-select-wrapper select {
  display: none;
}

.custom-select {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  height: 2.5rem;
}

.custom-select-trigger {
  position: relative;
  width: 100%;
  height: 100%;
  font-size: 0.9375rem;
  color: var(--color--bk);
  cursor: pointer;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  line-height: 2.5rem;
  padding: 0 0.875rem;
  border: 1px solid var(--color--border-ddd);
  border-radius: 0.25rem;
  text-align: left !important;
  background-color: var(--color--wh);
}

.custom-select.opened .custom-select-trigger {
  border-radius: 0.25rem 0.25rem 0 0 !important;
  transition: all 0.3s ease-in-out;
}

.custom-select-trigger::after {
  content: "";
  width: 1rem;
  height: 1rem;
  background: url("../images/ic-arrow-down-gray-md.svg") no-repeat center/cover;
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.3s ease-in-out;
}

.custom-select.opened .custom-select-trigger::after {
  transform: rotate(180deg);
  margin-top: -0.625rem;
}

.custom-options {
  position: absolute;
  display: block;
  top: 100%;
  left: 0;
  right: 0;
  min-width: 100%;
  background: var(--color--wh);
  transition: all 0.3s ease-in-out;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-15px);
  z-index: 99;
  border: 1px solid var(--color--border-ddd);
  border-top: 0;
  padding: 0.5rem 0;
  border-radius: 0 0 0.25rem 0.25rem;
  font-size: 0.875rem;
}

.custom-select.opened .custom-options {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateY(-1px);
}

.custom-option {
  position: relative;
  display: block;
  padding: 0.75rem 0.875rem;
  color: var(--color--gray-666);
  line-height: 1;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  text-align: left !important;
}
@media screen and (min-width: 1025px) {
  .custom-option:hover {
    background-color: var(--color--bg-hover);
    color: var(--color--bk);
  }
}

.custom-option.selection {
  color: var(--color--primary);
  background-color: rgba(255, 56, 92, 0.08);
}

.custom-select.disabled,
.custom-select.readonly {
  pointer-events: none;
  background-color: var(--color--input-disabled);
}

.custom-select.disabled .custom-select-trigger,
.custom-select.readonly .custom-select-trigger {
  color: var(--color--gray);
  background-color: var(--color--input-disabled);
}

/*width height*/
.w-100 {
  width: 100% !important;
}

.h-100 {
  height: 100% !important;
}

.h-100vh {
  height: 100vh !important;
}
/*mobile*/
@media (max-width: 767px) {
  .m-w-100 {
    width: 100% !important;
  }
}
/*padding margin*/
.p-0 {
  padding: 0 !important;
}

.p-t-0 {
  padding-top: 0 !important;
}
.p-t-2 {
  padding-top: 2rem !important;
}
.p-b-0 {
  padding-bottom: 0 !important;
}

.p-l-0 {
  padding-left: 0 !important;
}

.p-r-0 {
  padding-right: 0 !important;
}

.m-t-0 {
  margin-top: 0 !important;
}

.m-b-0 {
  margin-bottom: 0 !important;
}

.m-l-0 {
  margin-left: 0 !important;
}

.m-r-0 {
  margin-right: 0 !important;
}
/*border*/
.b-b-0 {
  border-bottom: 0 !important;
}

.b-t-0 {
  border-top: 0 !important;
}

.b-l-0 {
  border-left: 0 !important;
}

/*text*/
.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}

.text-normal {
  font-weight: normal !important;
}
.text-bk {
  color: var(--color--bk) !important;
}
.text-gray {
  color: var(--color--gray-666) !important;
}
.text-primary {
  color: var(--color--primary) !important;
}

/*checkbox, radio 반드시 px단위로 rem단위 깨짐*/
.checkbox,
.radiobox {
  position: relative;
  margin-left: 28px;
}

.radiobox-label,
.checkbox-label {
  cursor: pointer;
  color: var(--color--gray-666);
  font-size: 0.9375rem;
  display: inline-block;
  line-height: 1;
  padding-bottom: 0 !important;
  position: relative;
}

.radiobox input[type="radio"],
.checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  height: 0;
  z-index: -1;
  padding: 0;
  display: none;
}

.radiobox input[type="radio"] + .radiobox-label::before {
  content: "";
  display: inline-block;
  top: 50%;
  left: -24px;
  vertical-align: top;
  cursor: pointer;
  transition: all 250ms ease;
  z-index: 1;
  width: 0.75rem;
  height: 0.75rem;
  border-top-style: none;
  border-right-style: none;
  position: absolute;
  background: var(--color--bk);
  border-radius: 50%;
  opacity: 0;
  margin-top: -6px;
}

.radiobox input[type="radio"] + .radiobox-label::after {
  content: "";
  border: 2px solid #aaa;
  display: inline-block;
  width: 1rem;
  height: 1rem;
  position: absolute;
  margin-left: -28px;
  cursor: pointer;
  text-align: center;
  transition: all 250ms ease;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--color--wh);
  border-radius: 50%;
}

.radiobox input[type="radio"]:checked + .radiobox-label::before {
  opacity: 1;
}

.radiobox input[type="radio"]:checked + .radiobox-label::after {
  border-color: var(--color--bk);
}

.checkbox input[type="checkbox"] + .checkbox-label::before {
  content: "";
  display: inline-block;
  left: -21px;
  vertical-align: top;
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
  -moz-transition: -moz-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
  transition: transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
  -webkit-transform: rotate(-45deg) translateY(-50%);
  -moz-transform: rotate(-45deg) translateY(-50%);
  -ms-transform: rotate(-45deg) translateY(-50%);
  -o-transform: rotate(-45deg) translateY(-50%);
  transform: rotate(-45deg) translateY(-50%);
  z-index: 1;
  width: 0.55rem;
  height: 0.25rem;
  border: 2px solid var(--color--wh);
  border-top-style: none;
  border-right-style: none;
  position: absolute;
  opacity: 0;
  top: 50%;
  margin-top: -3px;
}

.checkbox input[type="checkbox"] + .checkbox-label::after {
  content: "";
  border: 2px solid #aaa;
  display: inline-block;
  width: 1rem;
  height: 1rem;
  position: absolute;
  margin-left: -28px;
  cursor: pointer;
  text-align: center;
  transition: all 250ms ease;
  left: 0px;
  background-color: var(--color--wh);
  border-radius: 2px;
  top: 50%;
  transform: translateY(-50%);
  /* margin-top: -1px; */
}

.checkbox input[type="checkbox"]:checked + .checkbox-label::before {
  border-color: var(--color--wh);
  opacity: 1;
}

.checkbox input[type="checkbox"]:checked + .checkbox-label::after {
  border-color: var(--color--bk);
  background-color: var(--color--bk);
}

input[type="radio"],
input[type="checkbox"] {
  border-bottom: 0;
}

input[type="radio"][disabled]:checked + .radiobox-label::after,
input[type="radio"][disabled]:checked + .radiobox-label::before,
input[type="checkbox"][disabled]:checked + .checkbox-label::after,
input[type="checkbox"][disabled] + .checkbox-label::after,
input[type="radio"][disabled] + .radiobox-label::after,
input[type="checkbox"][disabled] + .checkbox-label::after {
  opacity: 0.5 !important;
}

.chehck-radio-flex {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

/*checkbox only*/
.checkbox.only {
  margin-left: 0;
  width: 20px;
  height: 20px;
  margin: 0 auto;
}
.checkbox.only .checkbox-label {
  width: 20px;
  height: 20px;
}
.checkbox.only input[type="checkbox"] + .checkbox-label::after {
  margin-left: 0;
  top: 0;
  left: 0;
  transform: initial;
}

.checkbox.only input[type="checkbox"] + .checkbox-label::before {
  left: 7px;
}

/*switch*/
.switch-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.switch-wrap > span {
  font-size: 0.875rem;
}
.switch {
  position: relative;
  display: inline-block;
  width: 2rem;
  height: 1rem;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
  padding: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e0e0e0;
  transition: 0.4s;
  border-radius: 24px;
}

.slider::before {
  position: absolute;
  content: "";
  height: 0.875rem;
  width: 0.875rem;
  top: 50%;
  left: 1px;
  transform: translateY(-50%);
  background-color: var(--color--wh);
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: var(--color--primary);
}

input:checked + .slider::before {
  left: calc(100% - 0.9375rem);
}

/*error-wrap*/
.error-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  text-align: center;
}

.error-wrap .img {
  margin-top: -5rem;
  max-width: 31.25rem;
  width: 100%;
  padding-bottom: 2rem;
}

.error-wrap .img svg {
  width: 100%;
}
.error-wrap .title-wrap .title {
  font-size: 1.5rem;
  font-weight: 700;
}

.error-wrap .title-wrap .info {
  font-size: 1.125rem;
  color: var(--color--gray-666);
  padding-top: 0.25rem;
  line-height: 1.5;
  font-weight: 400;
}

.error-wrap .title-wrap .date {
  font-weight: 700;
  display: inline-block;
  margin: 1rem 0;
}
/*system*/
.error-wrap.system .img {
  padding-bottom: 0;
  margin-top: -8rem;
}

.error-wrap.system .title-wrap {
  margin-top: -4.5rem;
}
@media screen and (max-width: 767px) {
  .error-wrap .error {
    margin: 0 -1rem;
  }
  .error-wrap .title-wrap .title {
    font-size: 1.25rem;
  }

  .error-wrap .title-wrap .info {
    font-size: 1rem;
  }
}

/*tabs*/
.tabs {
  position: relative;
}

.tabs-nav {
  text-align: center;
  display: flex;
  align-items: center;
  background-color: #fff;
  position: relative;
}

.tabs-nav ul {
  display: flex;
  white-space: nowrap;
  width: 100%;
}

.tabs-nav a {
  font-weight: 700;
  color: var(--color--gray-999);
  height: 3.125rem;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
}

.tabs-nav .active a {
  color: var(--color--bk);
  background-color: var(--color--wh);
  border-color: var(--color--bk);
}

.tabs-content .tabs-panel {
  position: relative;
  display: none;
}

.tabs-content .tabs-panel.active {
  display: block;
}

/*style-box*/

.style-box .tabs-nav {
  background-color: transparent;
}
.style-box > .tabs-nav li {
  position: relative;
  width: 100%;
}
.style-box .tabs-nav a {
  font-weight: 700;
  width: 100%;
  height: 3.5rem;
  background-color: #f5f5f5;
  border: 1px solid var(--color--border-ddd);
  color: var(--color--gray-999);
  display: flex;
  justify-content: center;
  align-items: center;
}
.style-box .tabs-nav li:nth-child(n + 2) a {
  border-left: 0;
}
.style-box .tabs-nav .active a {
  color: var(--color--primary);
  background-color: var(--color--wh);
  border-bottom-color: transparent;
}
@media screen and (max-width: 1024px) {
  .style-box .tabs-nav a {
    font-size: 0.875rem;
    height: 2.813rem;
  }
}

/*style-line*/
.style-line > .tabs-nav ul {
  position: relative;
}

.style-line > .tabs-nav li {
  position: relative;
  width: 100%;
}

.style-line > .tabs-nav::after {
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: var(--color--border-eee);
  z-index: 1;
}

.style-line > .tabs-nav li::after {
  content: "";
  background: var(--color--bk);
  width: 0;
  height: 0.1875rem;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  transition: 0.1s;
  z-index: 2;
}

.style-line > .tabs-nav li.active::after {
  width: calc(100% - 0px);
  transition: 0.3s;
}

/*loader*/
.loader-wrap {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.4);
  top: 0;
  left: 0;
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader {
  width: 3rem;
  height: 3rem;
  display: inline-block;
  position: relative;
  background: transparent;
}
.loader::after,
.loader::before {
  content: "";
  box-sizing: border-box;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--color--primary);
  position: absolute;
  left: 0;
  top: 0;
  transform: scale(0);
  animation: animloader 2s linear infinite;
}
.loader::after {
  animation-delay: 1s;
}

@keyframes animloader {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/*responsive*/
@media (min-width: 1024px) {
  .pc-none {
    display: none !important;
  }
}
@media screen and (max-width: 1024px) {
  .m-none {
    display: none !important;
  }
}

/*table*/
table {
  width: 100%;
  table-layout: fixed;
}
table th,
table td {
  font-weight: 500;
}
table .link {
  cursor: pointer;
}

@media screen and (min-width: 1025px) {
  table .link:hover {
    background-color: var(--color--bg-hover);
  }
}
table .flex {
  display: flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
}
/*pagenation*/
.pagenation {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 2rem;
}

.pagenation a:nth-child(n + 2) {
  margin-left: 0.3125rem;
}

.pagenation a {
  height: 1.875rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.875rem;
  color: var(--color--gray-999);
  padding: 0.66rem;
  font-weight: 500;
  background: var(--color--wh);
  line-height: 1;
  border-radius: 0.25rem;
}

.pagenation a.active {
  color: var(--color--bk);
  font-weight: 700;
}

@media screen and (min-width: 1025px) {
  .pagenation a:hover {
    background-color: rgba(0, 0, 0, 0.08);
  }
}
.pagenation .ic {
  width: 1.875rem;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pagenation .ic::before {
  content: "";
  width: 1.125rem;
  height: 1.125rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
}

.pagenation .ic.double-prev::before {
  background-image: url("../images/ic-page-left-double.svg");
}

.pagenation .ic.prev::before {
  background-image: url("../images/ic-page-left.svg");
}

.pagenation .ic.next::before {
  background-image: url("../images/ic-page-right.svg");
}

.pagenation .ic.double-next::before {
  background-image: url("../images/ic-page-right-double.svg");
}

/*design style*/
/*header*/
header {
  position: fixed;
  z-index: 999;
  width: 100%;
  left: 0;
  top: 0;
}
header > .inner {
  width: 100%;
  background-color: var(--color--wh);
  position: relative;
}
header > .inner .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 3.5rem;
  padding: 0 1.5rem 0 1rem;
  max-width: 100%;
}
@media screen and (max-width: 1024px) {
  header > .inner .container {
    padding: 0 1rem;
  }
}
@media screen and (max-width: 767px) {
  header {
    transition: all 0.3s;
  }

  header.scrolled {
    transform: translateY(-100%);
  }
}

/*logo*/
header .logo {
  padding: 0 0.875rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
}
header .logo img {
  width: 8.125rem;
}
@media screen and (max-width: 1024px) {
  header .logo {
    padding: 0;
  }
}
/*header left*/
header .flex {
  display: flex;
  align-items: center;
}

/*header right*/
header .right .login.flex {
  gap: 0.5rem;
}
header .right .login button {
  height: 2.25rem;
  width: 5rem;
}

@media screen and (min-width: 1025px) {
  header .unit .flex > a:hover {
    color: var(--color--bk);
  }
}

header .unit .flex > a:nth-child(n + 2)::before {
  content: "";
  width: 1px;
  height: 0.75rem;
  background-color: var(--color--border-ddd);
  position: absolute;
  left: -0.5rem;
  top: 50%;
  transform: translateY(-50%);
}

header .unit .flex > a:only-child::after {
  content: "";
  width: 1px;
  height: 0.75rem;
  background-color: var(--color--border-ddd);
  position: absolute;
  right: -0.5rem;
  top: 50%;
  transform: translateY(-50%);
}

/*user*/
.user-container {
  position: relative;
}
.user-container .for-user {
  left: 50%;
  transform: translateX(-50%);
}

/*main-search*/
.main-search {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 31.25rem;
}
.main-search form {
  position: relative;
}
.main-search .search-wrap {
  position: relative;
  border: 2px solid transparent;
  border-radius: 100px;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(5deg, #fd3892 0%, #fd932b 100%) border-box;
  overflow: hidden;
  height: 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.875rem;
}
.main-search .search-input-wrap {
  height: calc(2.5rem - 0.25rem);
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 0.875rem;
}
.main-search .search-input-wrap input {
  border: 0;
  font-size: 1rem;
  height: 100%;
  padding: 0 0.875rem 0 0;
}
.main-search .search-wrap .btn-wrap {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.main-search .search-wrap .btn-wrap button {
  position: relative;
}
.main-search .search-wrap .btn-wrap button:nth-child(n + 2)::before {
  content: "";
  width: 1px;
  height: 0.75rem;
  background-color: var(--color--border-ddd);
  position: absolute;
  left: -0.625rem;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (max-width: 1024px) {
  .main-search {
    max-width: 25rem;
  }
}
@media screen and (max-width: 767px) {
  .main-search {
    max-width: 100%;
    position: relative;
    top: 0;
    left: 0;
    transform: initial;
    padding: 0 1rem 0.5rem;
  }
  .main-search.focus {
    height: 100vh;
    padding: 0;
    position: fixed;
    overflow: hidden;
  }
  .main-search.focus > form {
    height: 100%;
  }
}
/*main-search focus*/
.main-search.focus .search-wrap {
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(#fff, #fff) border-box;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.13);
  border-radius: 1rem 1rem 0 0;
}
.main-search.hash-on.focus .search-wrap {
  border-radius: 100px;
}
.main-search .search-wrap .ic-arrow-left-long {
  display: none;
  margin-right: 0.5rem;
}
@media screen and (max-width: 767px) {
  .main-search.focus .search-wrap {
    border-radius: 0;
    box-shadow: none;
    border: 0;
    border-bottom: 1px solid var(--color--primary);
    height: 3.5rem;
    position: fixed;
    top: 0;
    left: 0;
    padding: 0 1rem 0 0.75rem;
    width: 100%;
    z-index: 999;
  }
  .main-search.hash-on.focus .search-wrap {
    border-radius: 0;
  }
  .all-hidden .wrap header .container,
  .all-hidden .wrap > section {
    display: none !important;
  }
}
/*hash, tag*/
.main-search .search-wrap .hash {
  color: var(--color--primary);
  padding-right: 0.5rem;
}
.main-search .search-wrap .tag {
  color: var(--color--primary);
  padding: 0.25rem 1rem 0.25rem 0.5rem;
  border: 1px solid var(--color--primary);
  border-radius: 100px;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.125rem;
  line-height: 1.4;
  font-weight: 500;
  position: relative;
  margin-right: 0.5rem;
}
.main-search .search-wrap .tag::after {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  background: url("../images/ic-close-primary-xsm.svg") no-repeat center/cover;
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
}

/*main-search tag-layer*/
.main-search .tag-layer,
.main-search .auto-layer {
  position: absolute;
  top: 2.5rem;
  z-index: 999;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.13);
  border-radius: 0 0 1rem 1rem;
  background-color: var(--color--wh);
  width: 100%;
  max-width: 37.5rem;
  padding: 0.75rem 0;
  height: 25rem;
}
@media (max-width: 767px) {
  .main-search .tag-layer,
  .main-search .auto-layer {
    border-radius: 0;
    box-shadow: none;
    top: 3.5rem;
    height: calc(100vh - 3.5rem);
    max-width: 100%;
  }
}

/*main-search tag-layer*/
.main-search .tag-layer .tag-wrap {
  padding: 0 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
}
.main-search .tag-layer .tag-wrap button {
  font-size: 0.875rem;
  padding: 0.5rem 0.625rem;
  height: initial;
}

.main-search .tag-layer .inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/*main-search search-list*/
.main-search .tag-layer .search-list {
  padding-top: 1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.main-search .tag-layer .search-list .top,
.main-search .tag-layer .search-list .foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.875rem;
}
.main-search .tag-layer .search-list .top {
  padding-bottom: 0.75rem;
}
.main-search .tag-layer .search-list .foot {
  padding-top: 0.75rem;
  border-top: 1px solid var(--color--border-eee);
  background-color: var(--color--wh);
}
.main-search .tag-layer .search-list .body {
  flex: 1;
  overflow: auto;
  padding-bottom: 0.75rem;
}
.main-search .tag-layer .search-list .top .title {
  font-size: 0.875rem;
  font-weight: 700;
}
.main-search .tag-layer .search-list .top .delete,
.main-search .tag-layer .search-list .foot .title {
  font-size: 0.75rem;
  color: var(--color--gray-999);
}
.main-search .tag-layer .search-list .body .item {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 0.5rem;
}
.main-search .tag-layer .search-list .body a {
  position: relative;
  padding: 0.5rem 0.875rem;
  color: var(--color--bk);
  font-weight: 400;
  display: block;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.main-search .tag-layer .search-list .body .item-delete {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
@media screen and (min-width: 1025px) {
  .main-search .tag-layer .search-list .body .item:hover,
  .main-search .auto-layer .item:hover {
    background-color: var(--color--bg-hover);
  }
  .main-search .tag-layer .search-list .top .delete:hover {
    color: var(--color--bk);
  }
}

/*main-search auto-layer*/
.main-search .auto-layer .item {
  padding: 0.5rem 0.875rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color--bk);
  gap: 0.875rem;
}
.main-search .auto-layer .item .title-wrap {
  flex: 1;
  min-width: 0;
}
.main-search .auto-layer .item .title-wrap .title {
  font-weight: 400;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
}
.main-search .auto-layer .item .title-wrap .info {
  font-size: 0.75rem;
  color: var(--color--gray-666);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: 0.125rem;
}
.main-search .auto-layer .item .title-wrap .info span {
  max-width: 50%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
}
.main-search .auto-layer .item .title-wrap .info span:nth-child(n + 2)::before {
  content: "";
  width: 1px;
  height: 0.625rem;
  display: inline-block;
  background-color: var(--color--gray-999);
  vertical-align: middle;
  margin: -1px 0.375rem 0;
}
.main-search .auto-layer .item .badge {
  font-size: 0.75rem;
  padding: 0.375rem 0.625rem;
  border-radius: 100px;
  flex-shrink: 0;
}
.main-search .auto-layer .item .badge.green {
  color: #00a652;
  background-color: rgba(0, 166, 82, 0.08);
}
.main-search .auto-layer .item .badge.blue {
  color: #2455f4;
  background-color: rgba(036, 85, 244, 0.08);
}
.main-search .auto-layer .item .highlight {
  font-weight: 700;
}

/*dropdown*/
.dropdown {
  display: none;
  position: absolute;
  color: var(--color--gray);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
  background-color: var(--color--wh);
  font-size: 0.875rem;
  padding: 0.5rem 0;
  border-radius: 0.25rem;
  z-index: 99;
}

.dropdown a {
  display: block;
  padding: 0.875rem 1.25rem;
  color: var(--color--gray-999);
  line-height: 1;
  /* transition: all 0.3s ease-in-out; */
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
}

@media screen and (min-width: 1025px) {
  .dropdown a:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--color--gray-666);
  }
}

.dropdown.on {
  display: block;
}

/*dropdown box*/
.dropdown.box {
  width: 21.88rem;
  border-radius: 1rem;
  border: 1px solid var(--color--border-eee);
  padding: 0;
  right: 0;
}

.dropdown.box .header {
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color--border-eee);
}
.dropdown.box .header .title {
  font-size: 1.125rem;
  font-weight: 700;
}

.dropdown.box .header .ic-close {
  opacity: 0.4;
}

.dropdown.box .body {
  padding: 0 1.5rem;
  max-height: 25rem;
  overflow: auto;
}

/*toggle-container*/
.toggle-container {
  position: relative;
}

/*noti-container*/
.noti-container .noti-badge {
  position: absolute;
  top: 0.125rem;
  left: 50%;
  z-index: 1;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color--wh);
  padding: 0.125rem 0.25rem;
  border-radius: 100px;
  background-color: var(--color--primary);
  line-height: 1;
  min-width: 1rem;
  min-height: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.noti-container .for-noti .body .item {
  padding: 0.75rem 0 0.75rem 2rem;
  cursor: pointer;
  position: relative;
  transition: all 0.3s;
}
.noti-container .for-noti .body .item:first-child {
  padding-top: 1.5rem;
}
.noti-container .for-noti .body .item:last-child {
  padding-bottom: 1.5rem;
}
.noti-container .for-noti .body .item::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background-color: var(--color--wh);
  border: 2px solid var(--color--primary);
  position: absolute;
  left: 0;
  margin-top: 0.25rem;
  z-index: 2;
}
.noti-container .for-noti .body .item.off::before {
  border-color: #ccc;
}
.noti-container .for-noti .body .item::after {
  content: "";
  width: 1px;
  height: 100%;
  background-color: var(--color--border-eee);
  position: absolute;
  top: 0;
  left: 0.3125rem;
  z-index: 1;
}
.noti-container .for-noti .body .item .title {
  font-size: 0.9375rem;
  font-weight: 600;
}
.noti-container .for-noti .body .item .info {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding-top: 0.25rem;
}
.noti-container .for-noti .body .item .info .title {
  color: var(--color--primary);
  font-size: 0.75rem;
  line-height: 1;
  border-radius: 100px;
  padding: 0.25rem 0.375rem;
  min-width: 2.688rem;
  text-align: center;
  border: 1px solid var(--color--primary);
}
.noti-container .for-noti .body .item.off .info .title {
  color: var(--color--gray-999);
  border-color: var(--color--border-ddd);
}
.noti-container .for-noti .body .item .info .data {
  font-size: 0.875rem;
  color: var(--color--gray-666);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.noti-container .for-noti .body .item .date {
  font-size: 0.75rem;
  color: var(--color--gray-999);
  padding-top: 0.25rem;
}
.noti-container .for-noti .body .noti-none {
  font-size: 0.875rem;
  text-align: center;
  min-height: 6.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color--gray-999);
}
@media screen and (max-width: 1024px) {
  .dropdown.box .header .ic-close:hover {
    opacity: 1;
  }
  .noti-container .for-noti {
    left: 0;
    right: initial;
  }
}
@media screen and (max-width: 767px) {
  .noti-container .for-noti {
    top: 0;
    position: fixed;
    width: 100%;
    border-radius: 0;
    height: 100%;
    border: 0;
  }
  .noti-container .for-noti .body {
    max-height: initial;
    height: calc(100% - 3.75rem);
  }
}

/*tooltip*/
.tooltip-box .tippy-box {
  padding: 4px 8px;
}

/*menu*/
.for-menu {
  max-width: 25rem;
}
.for-menu .modal-header {
  padding: 0 1rem;
  height: 3.75rem;
}
.for-menu .modal-body {
  height: calc(100% - 3.75rem);
  padding: 0 1rem 3.125rem 1rem;
}
.for-menu .user-wrap {
  font-size: 1.5rem;
  font-weight: 700;
  padding-top: 1rem;
}

.for-menu .board-menu {
  display: flex;
  margin: 0 -1rem;
  padding: 2.5rem 1rem;
}
.for-menu .board-menu .item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  cursor: pointer;
}
.for-menu .board-menu .item .title {
  font-size: 0.875rem;
  font-weight: 600;
}
.for-menu .my-menu {
  border-top: 1px solid var(--color--border-eee);
  padding-top: 1.5rem;
  margin: 0 -1rem;
}
.for-menu .my-menu .item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.125rem 1rem;
  width: 100%;
  cursor: pointer;
  transition: all 0.3s;
}
@media screen and (min-width: 1025px) {
  .for-menu .my-menu .item:hover {
    background-color: var(--color--bg-hover);
  }
}

.for-menu .modal-header .logo {
  width: 8.125rem;
}
.for-menu .modal-header .logo img {
  width: 100%;
}
/*section*/
section {
  height: 100%;
  padding: 3.5rem 15rem;
}
section.active {
  padding: 3.5rem 4.5rem;
}

section.full {
  padding-right: 0;
  padding-top: 0;
}
section.full.main > .container {
  max-width: 2800px;
}
section.full > .container > .content > .header {
  padding: 0.75rem 0;
}
/*container*/
.container {
  width: 100%;
  padding: 0 1.5rem;
  margin: 0 auto;
  position: relative;
  max-width: 1920px;
}

@media screen and (max-width: 1400px) {
  section {
    padding: 3.5rem 0 3.5rem 15rem;
  }
}
@media screen and (max-width: 1024px) {
  section,
  section.active {
    padding: 3.5rem 0 5rem;
  }
  section.full.active {
    padding-top: 0 !important;
  }
  .container {
    padding: 0 1rem;
  }
}
@media screen and (max-width: 767px) {
  section,
  section.active {
    padding: 2.5rem 0 5rem;
  }
}

/*ic-wrap*/
.ic-wrap {
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s;
}

@media screen and (min-width: 1025px) {
  .ic-wrap:hover {
    background-color: rgba(0, 0, 0, 0.08);
  }
}

/*icon*/
.ic-xlg {
  width: 2rem;
  height: 2rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
}
.ic-lg {
  width: 1.5rem;
  height: 1.5rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
}
.ic-md {
  width: 1.125rem;
  height: 1.125rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
}
.ic-sm {
  width: 1rem;
  height: 1rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
}
.ic-xsm {
  width: 0.875rem;
  height: 0.875rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
}
/*ic-xlg*/
.ic-xlg.ic-drop {
  background-image: url("../images/ic-drop-xlg.svg");
}
.ic-xlg.ic-speaker {
  background-image: url("../images/ic-speaker-xlg.svg");
}
.ic-xlg.ic-user {
  background-image: url("../images/ic-user-xlg.svg");
}
.ic-emoji-clock-xlg {
  background-image: url("../images/ic-emoji-clock-xlg.svg");
}

/*ic-lg*/
.ic-user {
  background-image: url("../images/ic-user-lg.svg");
}
.ic-heart {
  background-image: url("../images/ic-heart-lg.svg");
}
.ic-noti {
  background-image: url("../images/ic-noti-lg.svg");
}
.ic-close {
  background-image: url("../images/ic-close-lg.svg");
}
.ic-search {
  background-image: url("../images/ic-search-lg.svg");
}
.ic-hash {
  background-image: url("../images/ic-hash-lg.svg");
}
.ic-hash.active {
  background-image: url("../images/ic-hash-active-lg.svg");
}
.ic-menu {
  background-image: url("../images/ic-menu-lg.svg");
}
.ic-list {
  background-image: url("../images/ic-list-lg.svg");
}
.ic-eye {
  background-image: url("../images/ic-eye-lg.svg");
}
.ic-edit {
  background-image: url("../images/ic-edit-lg.svg");
}
.ic-setting {
  background-image: url("../images/ic-setting-lg.svg");
}
.ic-logout {
  background-image: url("../images/ic-logout-lg.svg");
}
.ic-more {
  background-image: url("../images/ic-more-gray-lg.svg");
}
.ic-message {
  background-image: url("../images/ic-message-lg.svg");
}
.ic-building {
  background-image: url("../images/ic-building-lg.svg");
}
.ic-arrow-left-long {
  background-image: url("../images/ic-arrow-left-long-lg.svg");
}
.ic-arrow-down {
  background-image: url("../images/ic-arrow-down-lg.svg");
}
.ic-more {
  background-image: url("../images/ic-more-gray-lg.svg");
}
.ic-trash {
  background-image: url("../images/ic-trash-lg.svg");
}
.ic-folded-note {
  background-image: url("../images/ic-folded-note-lg.svg");
}
.ic-tv {
  background-image: url("../images/ic-tv-lg.svg");
}
.ic-chats {
  background-image: url("../images/ic-chats-lg.svg");
}
.ic-book {
  background-image: url("../images/ic-book-lg.svg");
}
/*ic-md*/
.ic-search-md {
  background-image: url("../images/ic-search-gray-md.svg");
}
.ic-filter-md {
  background-image: url("../images/ic-filter-md.svg");
}
.ic-delete {
  background-image: url("../images/ic-delete-gray-md.svg");
}
.ic-download {
  background-image: url("../images/ic-download-gray-md.svg");
}
.ic-user-md {
  background-image: url("../images/ic-user-gray-md.svg");
}
.ic-tel-md {
  background-image: url("../images/ic-tel-gray-md.svg");
}
.ic-pin-md {
  background-image: url("../images/ic-pin-gray-md.svg");
}
.ic-mail-md {
  background-image: url("../images/ic-mail-gray-md.svg");
}
.ic-camera-gray-md {
  background-image: url("../images/ic-camera-gray-md.svg");
}

/*ic-sm*/
.ic-close-sm {
  background-image: url("../images/ic-close-red-sm.svg");
}
.ic-check-sm {
  background-image: url("../images/ic-check-green-sm.svg");
}
.ic-warning-sm {
  background-image: url("../images/ic-warning-yellow-sm.svg");
}
.ic-close-gray-sm {
  background-image: url("../images/ic-close-gray-sm.svg");
}
/*ic-xsm*/
.ic-delete-wh {
  background-image: url("../images/ic-delete-wh-xsm.svg");
}
.ic-close-xsm {
  background-image: url("../images/ic-close-xsm.svg");
}

/*scroller*/
.scroller {
  overflow-y: auto;
  height: 100vh;
}

/*agree*/
.agree-box {
  max-height: 25rem;
  margin: 0 -1rem;
  padding: 0 1rem;
}

/*article*/
.article > div:nth-child(n + 2) {
  padding-top: 1.5rem;
}

.article-h1 {
  font-weight: 700;
}

.article-h2 {
  font-size: 0.875rem;
  padding-top: 0.9375rem;
  font-weight: 600;
}

.article-p {
  font-size: 0.875rem;
  color: var(--color--gray-666);
  padding-top: 0.5rem;
  line-height: 1.5;
}

.article-p li:nth-child(n + 2) {
  padding-top: 0.375rem;
}

/*h1*/
.h1 {
  font-size: 2rem;
}

.h2 {
  font-size: 1.25rem;
  padding-bottom: 1rem;
}
.h1,
.h2 {
  line-height: 1;
  font-weight: 700;
}
.h2.flex {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
@media (max-width: 1024px) {
  .h1 {
    font-size: 1.75rem;
  }
  .h2 {
    font-size: 1.125rem;
  }
}
@media (max-width: 767px) {
  .h1 {
    font-size: 1.5rem;
  }
}
/*login-wrap*/
.login-wrap {
  width: 100%;
  max-width: 25rem;
  height: 100%;
  display: table;
  margin: 0 auto;
  padding-bottom: 3.5rem;
}
.login-wrap > .inner {
  display: table-cell;
  vertical-align: middle;
}
.login-wrap .input-wrap {
  padding-top: 2.5rem;
}
.login-wrap .input-wrap input {
  height: 3.125rem;
}
.login-wrap .bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.5rem;
}
.login-wrap .id-pw-find {
  color: var(--color--gray-999);

  font-size: 0.875rem;
}

@media screen and (min-width: 1025px) {
  .login-wrap .id-pw-find:hover {
    color: var(--color--gray-666);
  }
}

@media (max-width: 767px) {
  .login-wrap {
    padding: 0;
  }
  .login-wrap .input-wrap {
    padding-top: 2rem;
  }
}
/*id-pw-find-content*/
.id-pw-find-content .title {
  font-size: 1.25rem;
  font-weight: 700;
  padding: 2rem 0 1.5rem;
}

/*join-wrap*/
.join-wrap {
  width: 100%;
  max-width: 58.13rem;
  height: 100%;
  display: table;
  margin: 0 auto;
  padding-bottom: 3.5rem;
}
.join-wrap > .inner {
  display: table-cell;
  vertical-align: middle;
}
.join-wrap .join-content {
  padding-top: 2.5rem;
  display: flex;
  gap: 1rem;
}
.join-wrap .join-content .item {
  position: relative;
  height: 0;
  padding-top: 30%;
  width: 100%;
  box-shadow: 0 0 0 1px var(--color--border-ddd) inset;
  border-radius: 1rem;
  cursor: pointer;
}

@media screen and (min-width: 1025px) {
  .join-wrap .join-content .item:hover {
    box-shadow: 0 0 0 2px var(--color--bk) inset;
    transition: all 0.3s;
  }
}

.join-wrap .join-content .item > .inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.join-wrap .join-content .item > .inner .img {
  width: 7.5rem;
  margin: 0 auto;
}
.join-wrap .join-content .item > .inner .img img {
  width: 100%;
}
.join-wrap .join-content .item > .inner .title {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  padding-top: 1.25rem;
  white-space: nowrap;
}
.join-wrap .join-content .item > .inner .title span {
  font-weight: normal;
}

@media screen and (max-width: 1024px) {
  .join-wrap .join-content .item > .inner .img {
    width: 5.625rem;
  }
}

@media (max-width: 767px) {
  .join-wrap {
    padding: 0;
  }

  .join-wrap .join-content {
    flex-wrap: wrap;
    padding-top: 2rem;
  }
  .join-wrap .join-content .item {
    padding: 1rem;
    height: auto;
  }
  .join-wrap .join-content .item > .inner {
    position: relative;
    display: flex;
    align-items: center;
    top: initial;
    left: initial;
    transform: initial;
    display: flex;
    align-items: center;
  }
  .join-wrap .join-content .item > .inner .img {
    width: 3.75rem;
    margin: initial;
  }
  .join-wrap .join-content .item > .inner .title {
    padding-top: 0;
    width: calc(100% - 7.5rem);
  }
}

/*join-form*/
.join-form {
  max-width: 40.63rem;
  margin: 0 auto;
}
.join-form > .title-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid var(--color--bk);
  padding-bottom: 1rem;
}
.join-form > .title-wrap > .info {
  font-size: 0.875rem;

  color: var(--color--gray-666);
  line-height: 1;
}
.join-form > .title-wrap > .info span {
  padding-right: 0.25rem;
}
.join-form .input-wrap {
  padding-top: 2.5rem;
}
.join-form .input-wrap > *:nth-child(n + 2) {
  padding-top: 1rem;
}
.join-form .input-wrap .label-set {
  display: flex;
  gap: 1rem;
}

.join-form .input-wrap .label-set label {
  width: 9.375rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  padding-bottom: 0;
}

.input-wrap .chehck-radio-flex label {
  width: initial !important;
  height: initial !important;
  display: initial !important;
  align-items: initial !important;
  padding-bottom: initial !important;
}
.input-wrap .chehck-radio-flex {
  height: 2.5rem;
}
/*agree*/
.join-form .agree {
  padding-top: 3rem;
}
.join-form .agree .title-wrap {
  padding-bottom: 1rem;
}
.join-form .agree .title-wrap .checkbox-label {
  color: var(--color--bk);
  font-weight: 700;
}
.join-form .agree .agree-content {
  border-top: 1px solid var(--color--border-eee);
  border-bottom: 1px solid var(--color--border-eee);
  padding: 1.5rem 0;
}
.join-form .agree .agree-content .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.join-form .agree .agree-content .item:nth-child(n + 2) {
  padding-top: 1rem;
}
.join-form .agree .agree-content .btn-agree {
  font-size: 0.875rem;
  color: var(--color--gray-999);
  text-decoration: underline !important;
}

@media screen and (min-width: 1025px) {
  .join-form .agree .agree-content .btn-agree:hover {
    color: var(--color--gray-bk);
  }
}

@media (max-width: 767px) {
  .join-form .input-wrap > *:nth-child(n + 2) {
    padding-top: 2rem;
  }
  .join-form .input-wrap .label-set {
    display: block;
  }

  .join-form .input-wrap .label-set label {
    width: auto;
    height: auto;
    display: block;
    padding-bottom: 0.75rem;
  }
}

/*upload*/
.img-upload-container {
  position: relative;
  width: 100%;
  margin: 0 auto;
  border: 2px dashed var(--color--border-ddd);
  border-radius: 0.25rem;
  text-align: center;
}
.img-upload-container input {
  display: none;
}
.drop-area {
  padding: 1.5rem;
  position: relative;
  cursor: pointer;
}
.drop-area img {
  display: none;
}
.upload-text {
  font-size: 0.9375rem;
  color: var(--color--gray-999);
}
.upload-text::before {
  content: "";
  width: 1.125rem;
  height: 1.125rem;
  display: inline-block;
  background: url("../images/ic-fileplus-gray-md.svg") no-repeat center/cover;
  vertical-align: middle;
  margin: -0.25rem 0.375rem 0 0;
}

#previewImage {
  max-width: 100%;
  margin: 0 auto;
  height: auto;
  object-fit: cover;
}

#deleteButton {
  position: absolute;
  top: -2px;
  right: -2px;
  display: none;
  z-index: 1;
  border-radius: 0.25rem;
  width: 1.25rem;
  height: 1.25rem;
  background-color: rgba(0, 0, 0, 0.8);
  background-size: 0.875rem;
  background-repeat: no-repeat;
}

/*total-wrap */
.total-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color--bk);
}
.total-wrap .right {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.total-wrap .input-set {
  width: 12.5rem;
}
.total-wrap .input-ic-set input {
  border-radius: 100px;
}
.total-wrap .custom-select-trigger {
  border-radius: 100px !important;
}
.total-wrap .custom-select-wrapper {
  width: 7.5rem;
}
@media (max-width: 767px) {
  .total-wrap .custom-select-wrapper {
    width: 5.5rem;
  }
  .total-wrap .custom-select {
    height: 2rem;
  }
  .total-wrap .custom-select-trigger {
    font-size: 0.875rem;
    line-height: 2rem;
    padding: 0;
    text-align: right !important;
    padding-right: 1.25rem;
    border: 0;
  }
  .total-wrap .custom-select-trigger::after {
    width: 0.874rem;
    height: 0.874rem;
    right: 0;
  }
  .total-wrap .custom-select.opened .custom-select-trigger::after {
    margin-top: -0.5rem;
  }
  .total-wrap .custom-options {
    border-top: 1px solid var(--color--border-ddd);
    padding: 0.25rem 0;
    font-size: 0.8125rem;
    border-radius: 0.25rem;
  }
  .total-wrap .custom-select.opened .custom-options {
    transform: translateY(4px);
  }
}
/*totla-num*/
.total-num {
  font-size: 1.125rem;
  font-weight: 700;
}
.total-num span {
  color: var(--color--primary);
  padding-left: 0.25rem;
}

/*filter-box*/
.filter-box {
  background-color: #f8f8f8;
  border-radius: 0.1875rem;
  padding: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}
.filter-box .item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  color: var(--color--gray-666);
}

/*card-table*/
.card-table {
  margin: -0.25rem 0;
}
.card-table th,
.card-table td {
  font-size: 0.875rem;
  padding: 0.25rem 0;
}
.card-table th {
  color: var(--color--gray-666);
}
.card-table td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/*tag-badge*/
.tag-badge {
  display: flex;
  gap: 0.5rem;
}
.tag-badge .item {
  font-size: 0.875rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.1875rem;
  color: var(--color--bk);
  background-color: rgba(34, 34, 34, 0.08);
  display: flex;
  white-space: nowrap;
}
@media screen and (min-width: 1025px) {
  .tag-badge .item:hover {
    background-color: rgba(34, 34, 34, 0.12);
  }
}
@media screen and (max-width: 1024px) {
  .tag-badge {
    margin: 0 -1rem;
    padding: 0 1rem;
  }
}
/*register-area*/
.register-area label {
  font-size: 0.8125rem;
  display: inline-block;
  margin-bottom: 0.375rem;
  color: var(--color--gray-666);
}
@media (max-width: 767px) {
  .register-area label {
    font-size: 0.75rem;
  }
}

.register-wrap {
  padding-bottom: 2.5rem;
}
.register-wrap > .item {
  border: 1px solid var(--color--border-ddd);
  padding: 1rem;
  border-radius: 1rem;
  background: var(--color--wh);
  position: relative;
  width: 100%;
}
.register-wrap > .item:nth-child(n + 2) {
  margin-top: 0.5rem;
}
.register-wrap > .item .content {
  width: calc(100% - 5rem);
}
.register-wrap > .item .title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  color: var(--color--bk);
  position: relative;
  font-size: 0.875rem;
  padding-right: 1rem;
}
.register-wrap > .item .btn-xsm {
  font-size: 0.75rem;
  height: 1.75rem;
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
}
.register-wrap > .item .info {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 0.5rem;
}
.register-wrap > .item .date-wrap {
  display: flex;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--color--gray-999);
  line-height: 1;
  overflow: hidden;
}
.register-wrap > .item .date-wrap div:nth-child(1) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 6.25rem;
}
.register-wrap > .item .date-wrap div:nth-child(n + 2)::before {
  content: "";
  width: 1px;
  height: 0.5rem;
  background-color: var(--color--border-ddd);
  display: inline-block;
  margin-right: 0.375rem;
  vertical-align: middle;
}
.register-wrap > .item .button-wrap {
  display: flex;
  gap: 1rem;
}

/*ewg*/
.ewg {
  font-size: 0.8125rem;
  font-weight: 800;
  text-align: center;
  color: var(--color--wh);
  width: 2rem;
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  line-height: 1;
}
.ewg.green {
  background-color: #00a652;
}
.ewg.yellow {
  background-color: #fdb813;
}
.ewg.red {
  background-color: #ed1b24;
}

/*ewg-table*/
.ewg-table thead th {
  padding: 0.5rem;
  color: var(--color--gray-666);
}
.ewg-table tbody td {
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid var(--color--border-eee);
}

.ewg-table tbody td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ewg-table .ewg-empty {
  padding-left: 1.25rem;
}
.ewg-table .eng {
  font-size: 0.75rem;
  color: var(--color--gray-666);
  font-weight: 400;
  padding-top: 0.125rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/*info-box*/
.info-box {
  padding: 2rem;
  border-radius: 0.75rem;
  background-color: #f9f9f9;
}
@media (max-width: 767px) {
  .info-box {
    padding: 1.5rem 1rem;
    border-radius: 0.75rem;
  }

  .ewg-table thead {
    display: none;
  }
  .ewg-table colgroup col:first-child {
    width: 3rem;
  }
}
.modal-full .info-box {
  margin-top: 2.5rem;
}

/*info-table*/
.info-table {
  margin: -0.25rem 0;
}
.info-table th,
.info-table td {
  font-size: 0.875rem;
  padding: 0.5rem 0.25rem;
}
.info-table th {
  color: var(--color--gray-666);
}
.info-table td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/*heart*/
.heart-wrap .ic-heart {
  transition: none !important;
}
.heart-wrap.active .ic-heart {
  background-image: url("../images/ic-heart-active-lg.svg");
  animation: grow;
  animation-duration: 0.2s;
  animation-direction: forwards;
}
@keyframes grow {
  0% {
    transform: scale(1);
  }
  70% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/*브라우저 스크롤 안보이게, 마우스 휠 또는 드래그, 터치시 x 스크롤 가능하게*/
.scroll-x-area {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  user-select: none;
}

.scroll-x-area::-webkit-scrollbar {
  display: none;
}

/*scroller-x mobile 일반 스크롤 없애기*/
.scroller-x {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scroller-x::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  background: transparent;
  -webkit-appearance: none;
}
@media screen and (max-width: 1024px) {
  .t-scroll-hidden {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .t-scroll-hidden::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    background: transparent;
    -webkit-appearance: none;
  }
}
@media (max-width: 767px) {
  .m-scroll-hidden {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .m-scroll-hidden::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    background: transparent;
    -webkit-appearance: none;
  }
}

/*scroller-x*/
.scroll-wrapper {
  overflow: hidden !important;
  padding: 0 !important;
  position: relative;
}

.scroll-wrapper > .scroll-content {
  border: none !important;
  box-sizing: content-box !important;
  height: auto;
  left: 0;
  margin: 0;
  max-height: none;
  max-width: none !important;
  overflow: scroll !important;
  padding: 0;
  position: relative !important;
  top: 0;
  width: auto !important;
}

.scroll-wrapper > .scroll-content::-webkit-scrollbar {
  height: 0;
  width: 0;
}

.scroll-element {
  display: none;
}
.scroll-element,
.scroll-element div {
  box-sizing: content-box;
}

.scroll-element.scroll-x.scroll-scrollx_visible,
.scroll-element.scroll-y.scroll-scrolly_visible {
  display: block;
}

.scroll-element .scroll-bar,
.scroll-element .scroll-arrow {
  cursor: default;
}

/*************** SIMPLE OUTER SCROLLBAR ***************/
.scroller-x > .scroll-element,
.scroller-x > .scroll-element div {
  border: none;
  margin: 0;
  padding: 0;
  position: absolute;
  z-index: 10;
}

.scroller-x > .scroll-element {
  background-color: #ffffff;
}

.scroller-x > .scroll-element div {
  display: block;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}

.scroller-x > .scroll-element.scroll-x {
  bottom: 0;
  height: 6px;
  left: 0;
  width: 100%;
}

.scroller-x > .scroll-element.scroll-y {
  height: 100%;
  right: 0;
  top: 0;
  width: 12px;
}

.scroller-x > .scroll-element.scroll-x .scroll-element_outer {
  height: 3px;
  top: 0;
}
.scroller-x > .scroll-element.scroll-y .scroll-element_outer {
  left: 2px;
  width: 8px;
}

.scroller-x > .scroll-element .scroll-element_outer {
  overflow: hidden;
}
.scroller-x > .scroll-element .scroll-element_track {
  background-color: #eeeeee;
}

.scroller-x > .scroll-element .scroll-element_outer,
.scroller-x > .scroll-element .scroll-element_track,
.scroller-x > .scroll-element .scroll-bar {
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}

.scroller-x > .scroll-element .scroll-bar {
  background-color: var(--color--bk);
  cursor: pointer;
}
@media screen and (min-width: 1025px) {
  .scroller-x > .scroll-element .scroll-bar:hover {
    background-color: #c2c2c2;
  }
}

.scroller-x > .scroll-element.scroll-draggable .scroll-bar {
  background-color: #919191;
}

/* scrollbar height/width & offset from container borders */

.scroller-x > .scroll-content.scroll-scrolly_visible {
  left: -16px;
  margin-left: 16px;
}
.scroller-x > .scroll-content.scroll-scrollx_visible {
  top: -16px;
  margin-top: 16px;
}

.scroller-x > .scroll-element.scroll-x .scroll-bar {
  min-width: 10px;
  /* transition: all 0.3s; */
}
.scroller-x > .scroll-element.scroll-y .scroll-bar {
  min-height: 10px;
  /* transition: all 0.3s; */
}

/* update scrollbar offset if both scrolls are visible */

.scroller-x > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track {
  left: -14px;
}
.scroller-x > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track {
  top: -14px;
}

.scroller-x > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size {
  left: -14px;
}
.scroller-x > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size {
  top: -14px;
}

/*send-wrap*/
.send-wrap .send-section:nth-child(n + 2) {
  padding-top: 2.5rem;
}
.send-wrap .send-section > .title {
  font-weight: 700;
  padding-bottom: 0.75rem;
}

.send-wrap .send-section > .title span {
  padding-left: 0.5rem;
}
.send-wrap .send-section > .title .total {
  color: var(--color--primary);
}
.send-wrap .send-section > .title .info {
  color: var(--color--gray-666);
  font-weight: 500;
  font-size: 0.875rem;
}
.send-wrap .input-wrap > *:nth-child(n + 2) {
  padding-top: 1.5rem;
}

/*send-card-wrap*/
.send-card {
  flex-wrap: initial !important;
}
.send-card > .item {
  background-color: #f5f5f5;
  border: 0;
  cursor: default;
  min-width: 18.75rem;
  max-width: 18.75rem !important;
  padding: 1.5rem;
  border-radius: 0.75rem;
}
.send-card > .item > .header {
  padding-bottom: 1rem;
}
.send-card > .item > .header .title {
  font-size: 1.125rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 767px) {
  .send-card {
    gap: 0.5rem;
  }
}
/*data-choice*/
.data-choice {
  display: flex;
  gap: 1rem;
}
.data-choice .item {
  border: 1px solid var(--color--border-ddd);
  border-radius: 0.375rem;
  padding: 1.5rem 1rem;
  font-size: 0.9375rem;
  width: 100%;
  text-align: center;
  color: var(--color--gray-666);

  cursor: pointer;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.data-choice .item.active {
  border-color: var(--color--primary);
  color: var(--color--primary);
  background-color: rgba(255, 56, 92, 0.05);
}
@media (max-width: 767px) {
  .data-choice {
    gap: 0.5rem;
  }
  .data-choice .item {
    line-height: 1.3;
    padding: 1rem;
  }
}
/*bot*/
#bot {
  position: fixed;
  bottom: 4.5rem;
  right: 0.5rem;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  z-index: 9;
  cursor: pointer;
  -webkit-box-shadow: 0 0.425rem 1.125rem 0.2125rem rgb(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0.425rem 1.125rem 0.2125rem rgb(0, 0, 0, 0.15);
  -ms-box-shadow: 0 0.425rem 1.125rem 0.2125rem rgb(0, 0, 0, 0.15);
  -o-box-shadow: 0 0.425rem 1.125rem 0.2125rem rgb(0, 0, 0, 0.15);
  box-shadow: 0 0.425rem 1.125rem 0.2125rem rgb(0, 0, 0, 0.15);
  background: var(--color--primary);
  background: linear-gradient(50deg, rgba(253, 56, 146, 1) 0%, rgba(253, 147, 43, 1) 100%);
  transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;
  overflow: hidden;
}
#bot::before {
  content: "";
  width: 2.5rem;
  height: 3.125rem;
  background: url("../images/img-bot.svg") no-repeat center/cover;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

/*Back to top*/
#back-to-top {
  position: fixed;
  bottom: 1.25rem;
  right: 1.125rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  z-index: 9;
  cursor: pointer;
  -webkit-box-shadow: 0 0.425rem 1.125rem 0.2125rem rgb(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0.425rem 1.125rem 0.2125rem rgb(0, 0, 0, 0.1);
  -ms-box-shadow: 0 0.425rem 1.125rem 0.2125rem rgb(0, 0, 0, 0.1);
  -o-box-shadow: 0 0.425rem 1.125rem 0.2125rem rgb(0, 0, 0, 0.1);
  box-shadow: 0 0.425rem 1.125rem 0.2125rem rgb(0, 0, 0, 0.1);
  background: var(--color--wh);
  opacity: 0;
  visibility: hidden;
  transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;
}

#back-to-top::after {
  position: absolute;
  display: block;
  content: "";
  width: 10px;
  height: 10px;
  top: 50%;
  left: 50%;
  border-bottom: 2px solid var(--color--bk);
  border-right: 2px solid var(--color--bk);
  transform: translate(-50%, -50%) rotate(-135deg);
  transition: all 0.3s ease-in-out;
  margin-top: 0.125rem;
}

#back-to-top.show {
  opacity: 1;
  visibility: visible;
}

/*btn-fixed-modal*/
.btn-fixed-modal > .inner {
  display: flex;
  flex-direction: column;
}
.btn-fixed-modal .modal-body {
  flex: 1;
}
.btn-fixed-modal .modal-footer {
  padding-top: 0;
}
.btn-fixed-modal .modal-footer .btn {
  border-radius: 0;
}

/*for-filter*/
.for-filter .filter-common .deselect {
  width: 2.5rem;
  height: 2.5rem;
}
.for-filter .filter-common .deselect::before {
  width: 1.125rem;
  height: 1.125rem;
}
.for-filter .filter-common .input-set {
  width: calc(100% - 3rem);
}

/*for-vs*/
.for-vs {
  position: fixed;
  bottom: -100%;
  left: 0;
  z-index: 99;
  width: 100%;
  box-shadow: 0 -4px 16px 0 rgba(0, 0, 0, 0.14);
  background: var(--color--wh);
  touch-action: none;
  padding: 1.5rem 0;
  transition: bottom 0.5s ease-in-out;
}
.for-vs > .container > .container-inner {
  max-width: 1376px;
  margin: 0 auto;
  padding-right: 1.5rem;
}
@media (max-width: 1375px) {
  .for-vs > .container > .container-inner {
    padding-right: 0;
  }
}
.for-vs.active {
  bottom: 0;
}
.for-vs.acd .header .ic-arrow-down {
  transform: rotate(180deg);
}

.for-vs .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.for-vs .header .title {
  font-size: 1.25rem;
  font-weight: 700;
}
.for-vs .header .right {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}
.for-vs .header .right > .inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.for-vs .deselect {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color--bk);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.for-vs .deselect::after {
  content: "";
  width: 1rem;
  height: 1rem;
  background: url("../images/ic-deselect-xsm.svg") no-repeat center/cover;
  display: inline-block;
}
.for-vs .header .btn-sm {
  min-width: 6.25rem;
}
.for-vs.acd .header .btn-sm {
  display: none;
}
.for-vs .body > .inner {
  display: flex;
  gap: 1rem;
  padding-top: 0.75rem;
}
.for-vs .body .item {
  width: calc(50% - 0.5rem);
  border: 1px solid var(--color--border-ddd);
  border-radius: 1rem;
  height: 9.063rem;
  overflow: hidden;
}
.for-vs .body .item > .inner {
  position: relative;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  height: 100%;
}
.for-vs .body .item .pr-img {
  width: 6.25rem;
  height: 6.25rem;
}
.for-vs .body .item .pr-img img {
  margin: 0 auto;
  max-width: 100%;
}
.for-vs .body .item .pr-body {
  width: calc(100% - 6.25rem);
  padding-left: 1rem;
}
.for-vs .body .item .pr-body .title {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.for-vs .body .item .pr-body .info {
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: 0.625rem;
}
.for-vs .body .item .pr-body .co {
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: 0.25rem;
  color: var(--color--gray-666);
}
.for-vs .body .item.empty {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  color: var(--color--gray-999);
  border: 1px dashed var(--color--border-ddd) !important;
  text-align: center;
}
.for-vs .body .item.empty::after {
  content: "비교하고 싶은 제품을\A추가로 선택해주세요";
  white-space: pre-wrap;
}
.for-vs .body .item .ic-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 1;
}
.for-vs .body .vs-m-btn {
  display: none;
}
/*toast*/
.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: var(--color--wh);
  padding: 0.75rem 1.5rem;
  border-radius: 100px;
  z-index: 999;
  opacity: 0;
  transition: opacity 0.5s;
  text-align: center;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .card-vs .vs {
    padding: 0.75rem;
  }
  .for-vs .header .btn-sm {
    display: none;
  }
  .for-vs .body .vs-m-btn {
    display: block;
    padding-top: 0.5rem;
  }
  .for-vs {
    padding: 1rem 0;
  }
  .for-vs .header .title {
    font-size: 1rem;
  }
  .for-vs .header .right {
    gap: 1.5rem;
  }

  .for-vs .body > .inner {
    gap: 0.5rem;
    padding-top: 0.5rem;
  }
  .for-vs .body .item {
    width: calc(50% - 0.25rem);
    height: 8.125rem;
  }
  .for-vs .body .item > .inner {
    padding: 0 0.5rem 0.5rem;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
  }
  .for-vs .body .item .pr-img {
    width: 5rem;
    height: 5rem;
  }

  .for-vs .body .item .pr-body {
    width: 100%;
    padding-left: 0;
    padding-top: 0.25rem;
  }
  .for-vs .body .item .pr-body .title {
    font-size: 0.875rem;
    text-align: center;
  }
  .for-vs .body .item .pr-body .info {
    display: none;
  }
  .for-vs .body .item .pr-body .co {
    display: none;
  }
  .for-vs .body .item.empty {
    font-size: 0.875rem;
  }

  .for-vs .body .item .ic-close {
    top: 0.5rem;
    right: 0.5rem;
  }

  /*toast*/
  .toast {
    font-size: 0.875rem;
  }
}
/*no-img*/
.no-img {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.no-img::before {
  content: "";
  background: url("../images/ic-img-lg.svg") no-repeat center/cover;
  width: 2rem;
  height: 2rem;
  display: block;
  opacity: 0.2;
}

/*modal-pr-wrap*/
.modal-pr-wrap {
  padding-top: 2.5rem;
}

.modal-pr-wrap .pr-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-bottom: 3.125rem;
}
.modal-pr-wrap .pr-info .pr-img {
  width: 10rem;
  height: 10rem;
}
.modal-pr-wrap .pr-info .pr-img img {
  margin: 0 auto;
  max-width: 100%;
}
.modal-pr-wrap .pr-info .pr-body {
  padding-top: 1rem;
  width: 100%;
}
.modal-pr-wrap .pr-info .pr-body .title {
  font-size: 1.25rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.modal-pr-wrap .pr-info .pr-body .co {
  font-size: 0.875rem;
  color: var(--color--gray-999);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.modal-pr-wrap .pr-info .pr-body .price {
  font-size: 1.125rem;
  padding-top: 0.5rem;
  font-weight: 700;
}
.modal-pr-wrap .total-num {
  padding-bottom: 1.5rem;
}

/*for-vs-detail*/
.for-vs-detail .modal-header {
  border-bottom: 1px solid var(--color--border-eee);
}
.for-vs-detail .modal-body {
  padding: 0;
}
.for-vs-detail .modal-body::after {
  content: "";
  width: 1px;
  background-color: var(--color--border-eee);
  position: absolute;
  bottom: 0;
  right: 50%;
  height: calc(100% - 5rem);
}
.for-vs-detail .modal-pr-wrap {
  padding-top: 0;
  display: flex;
  position: relative;
}

.for-vs-detail .modal-pr-wrap > .item {
  padding: 2.5rem 3.125rem 3.125rem 3.125rem;
  width: 50%;
}

@media (max-width: 767px) {
  /*modal-pr-wrap*/
  .modal-pr-wrap {
    padding-top: 1rem;
  }

  .modal-pr-wrap .pr-info {
    padding-bottom: 2rem;
  }
  .modal-pr-wrap .pr-info .pr-img {
    width: 7.5rem;
    height: 7.5rem;
  }

  .modal-pr-wrap .pr-info .pr-body {
    padding-top: 0.75rem;
  }

  .modal-pr-wrap .total-num {
    padding-bottom: 0.5rem;
  }
  .for-vs-detail .modal-body::after {
    height: calc(100% - 3.75rem);
  }

  /*for-vs-detail*/
  .for-vs-detail .modal-pr-wrap > .item {
    padding: 1.5rem 1em 1rem 1rem;
  }
  .for-vs-detail .modal-pr-wrap .pr-info .pr-body .title {
    font-size: 1rem;
  }

  .for-vs-detail .ewg-table thead th {
    padding: 0;
  }
  .for-vs-detail .ewg-table tbody td {
    padding: 0.875rem 0;
  }
  .for-vs-detail .ewg-table th,
  .for-vs-detail .ewg-table td {
    font-size: 0.75rem;
  }
  .for-vs-detail .total-num {
    font-size: 0.875rem;
    padding-bottom: 0;
  }
  .for-vs-detail .modal-pr-wrap .pr-info .pr-body .title {
    font-size: 1rem;
  }
  .for-vs-detail .modal-pr-wrap .pr-info .pr-body .co {
    font-size: 0.75rem;
  }
  .for-vs-detail .modal-pr-wrap .pr-info .pr-body .price {
    font-size: 1rem;
  }

  .for-vs-detail .ewg-table colgroup col:first-child {
    width: 2rem;
  }
  .for-vs-detail .ewg {
    font-size: 0.6875rem;
    width: 1.5rem;
    height: 1.5rem;
  }
  .for-vs-detail .ewg-table .ewg-empty {
    padding-left: 0.5rem;
  }
}

/*base-view*/
.base-view > .title-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-bottom: 1rem;
  position: relative;
  border-bottom: 1px solid var(--color--bk);
}
.base-view > .title-wrap .left .h1 {
  line-height: 1.3;
}
.base-view > .title-wrap .left .info {
  padding-top: 0.5rem;
  color: var(--color--gray-999);
  font-size: 0.875rem;
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.5rem;
  row-gap: 0.25rem;
}
.base-view > .title-wrap .left .info span::after {
  content: "";
  width: 1px;
  height: 0.625rem;
  background-color: var(--color--border-ddd);
  display: inline-block;
  margin-left: 0.5rem;
}
.base-view > .title-wrap .left .info span:last-child::after {
  display: none;
}
.base-view > .title-wrap .right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/*view-tabs*/
.view-tabs {
  width: 100%;
  display: flex;
  position: sticky;
  top: 3.5rem;
  z-index: 1;
  transition: all 0.3s;
}
.view-tabs a {
  font-weight: 700;
  width: 100%;
  height: 3.5rem;
  background-color: #f5f5f5;
  border: 1px solid var(--color--border-ddd);
  color: var(--color--gray-999);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: none;
}
.view-tabs a.active {
  color: var(--color--primary);
  background-color: var(--color--wh);
  border-bottom: 0;
}
.view-tabs a:nth-child(n + 2) {
  border-left: 0;
}

.base-view-content > div {
  padding-top: 5rem;
}

.base-view-content .info-content {
  display: flex;
  column-gap: 3.125rem;
  row-gap: 1.5rem;
}
.base-view-content .info-content .ewg-table {
  flex: 1;
}
.base-view-content .info-content .info-box {
  width: 25rem;
}

.base-view-content .data-content > *:nth-child(n + 2) {
  padding-top: 1.25rem;
}
.base-view-content .data-content p {
  color: var(--color--gray-666);
  font-weight: normal;
  line-height: 1.5;
}
.base-view-content .data-content .text-p p:nth-child(n + 2) {
  padding-top: 0.625rem;
}
.base-view-content .data-content img {
  max-width: 100%;
}
.base-view-content .document-content {
  display: flex;
  flex-wrap: wrap;
  column-gap: 3.125rem;
  row-gap: 0;
}
.base-view-content .document-content .item {
  border-bottom: 1px solid var(--color--border-eee);
  padding: 1rem 0;
  position: relative;
  width: calc(50% - 1.5625rem);
}
.base-view-content .document-content .item::after {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  background: url("../images/ic-check-green-lg.svg") no-repeat center/cover;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.base-view-content .document-content .item.empty {
  color: rgba(0, 0, 0, 0.4);
}
.base-view-content .document-content .item.empty::after {
  display: none;
}

@media screen and (max-width: 1024px) {
  .view-tabs a {
    font-size: 0.875rem;
    height: 2.813rem;
  }
  .base-view-content > div {
    padding-top: 3.125rem;
  }

  .base-view-content .document-content {
    column-gap: 0;
  }
  .base-view-content .document-content .item {
    width: 100%;
  }
  .base-view-content .info-content {
    flex-wrap: wrap;
  }
  .base-view-content .info-content .info-box {
    width: 100%;
  }
}
@media (max-width: 767px) {
  .view-tabs {
    top: 6.5rem;
  }
  .view-tabs.sticky {
    top: 0;
  }
  .base-view > .title-wrap .left .info {
    font-size: 0.75rem;
  }
  .base-view > .title-wrap .left .info span::after {
    height: 0.5rem;
  }
  .base-view > .title-wrap .right {
    width: 100%;
  }
}
/*ingre-table*/
.ingre-table th,
.ingre-table td {
  font-size: 1rem;
  padding: 0.5rem 0;
}
.ingre-table th {
  color: var(--color--gray-666);
}
@media screen and (max-width: 1024px) {
  .ingre-table th,
  .ingre-table td {
    font-size: 0.875rem;

    padding: 0.25rem 0;
  }
}

/*ingredient-content*/
.ingredient-content {
  padding-top: 2rem;
}
.ingredient-content > div:nth-child(n + 2) {
  padding-top: 3rem;
}
.ingredient-content .top .top-content {
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.ingredient-content .top .top-content .btn-area {
  justify-content: left;
  flex-wrap: wrap;
}
.ingredient-content .top .top-content .left {
  flex: 1;
}

/*element-box*/
.element-box {
  border: 1px solid var(--color--border-eee);
  border-radius: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 26.88rem;
  padding: 3rem;
}
.element-box img {
  max-width: 100%;
  width: 100%;
}
@media screen and (max-width: 1024px) {
  .ingredient-content .top .top-content {
    flex-wrap: wrap;
    padding-top: 1rem;
  }
  .ingredient-content .top .top-content .element-box {
    order: 1;
  }
  .ingredient-content .top .top-content .left {
    order: 2;
    width: 100%;
    flex: none;
  }
}
@media (max-width: 767px) {
  .element-box {
    width: 100%;
    height: auto;
  }
}
.ingredient-content .bottom {
  display: flex;
  column-gap: 5%;
  row-gap: 3rem;
  flex-wrap: wrap;
}
.ingredient-content .bottom .item {
  width: calc((100% - (5% * 2)) / 3);
  position: relative;
}
.ingredient-content .bottom .item .title-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color--bk);
  padding-bottom: 0.625rem;
  flex-wrap: wrap;
}
.ingredient-content .bottom .item .title-wrap .title {
  font-size: 1.25rem;
  font-weight: 700;
}
.ingredient-content .bottom .item .title-wrap .date {
  font-size: 0.875rem;
  color: var(--color--gray-999);
}

.ingredient-content .bottom .ingre-table {
  padding-top: 1rem;
}
.ingredient-content .bottom .ingre-table th,
.ingredient-content .bottom .ingre-table td {
  min-height: 2.5rem;
}
.ingredient-content .bottom .ingre-table .ewg {
  font-size: 0.8125rem;
  width: 1.5rem;
  height: 1.5rem;
}
.ingredient-content .bottom .item .btn {
  margin-top: 1rem;
}
@media screen and (max-width: 1400px) {
  .ingredient-content .bottom {
    column-gap: 1rem;
  }
  .ingredient-content .bottom .item {
    width: calc((100% - 2rem) / 3);
  }
  .ingredient-content .bottom .item .title-wrap .title {
    width: 100%;
  }
}
@media screen and (max-width: 1200px) {
  .ingredient-content .bottom .item {
    width: 100%;
  }
  .ingredient-content .bottom .item .title-wrap .title {
    width: auto;
  }
}
@media screen and (max-width: 1024px) {
  .ingredient-content .bottom .item .title-wrap .title {
    font-size: 1.125rem;
  }
  .ingredient-content .bottom .item .title-wrap .date {
    font-size: 0.75rem;
  }
}

/*edit-board*/
.edit-board .item {
  padding: 1.5rem;
  border-bottom: 1px solid var(--color--border-eee);
  cursor: pointer;
  transition: all 0.3s;
}

@media screen and (min-width: 1025px) {
  .edit-board .item:hover {
    background-color: var(--color--bg-hover);
  }
}
.edit-board .item .date {
  font-size: 0.875rem;
  color: var(--color--gray-999);

  padding-bottom: 0.5rem;
}
.edit-board .item .title {
  font-size: 1.125rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.edit-board .item .info {
  color: var(--color--gray-666);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-top: 0.125rem;
}
@media screen and (max-width: 1024px) {
  .edit-board .item {
    padding: 1.5rem 0;
  }
}
@media (max-width: 767px) {
  .edit-board .item {
    padding: 1rem 0;
  }

  .edit-board .item .date {
    font-size: 0.75rem;
  }
  .edit-board .item .title {
    font-size: 0.9375rem;
  }
  .edit-board .item .info {
    font-size: 0.875rem;
  }
}

/*comment-list*/
.comment-list > .item {
  padding: 2rem 0;
  border-bottom: 1px solid var(--color--border-eee);
}
.comment-list > .item:first-child {
  padding-top: 0;
}
.comment-list > .item:last-child {
  margin-bottom: 1rem;
}
.comment-list > .item .header {
  position: relative;
  padding-bottom: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.comment-list > .item .header .left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: calc(100% - 2.5rem);
}
.comment-list > .item .header .user {
  font-size: 0.875rem;
  font-weight: 700;
  word-break: break-all;
}
.comment-list > .item .header .date {
  font-size: 0.875rem;
  color: var(--color--gray-999);
  font-weight: 400;
}
.comment-list > .item .header .writer {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color--primary);
  padding: 0.125rem 0.375rem;
  border-radius: 0.1875rem;
  background-color: rgba(255, 56, 92, 0.08);
}
.comment-list > .item .body {
  font-size: 0.9375rem;
  font-weight: normal;
  line-height: 1.5;
}
.comment-list .new {
  margin-top: 0;
}
/*more-container*/
.more-container {
  position: absolute;
  right: 0;
  top: -0.75rem;
}
.more-container .dropdown {
  min-width: 5rem;
}
@media (max-width: 767px) {
  .comment-list > .item {
    padding: 1rem 0;
  }

  .comment-list > .item .body {
    font-size: 0.875rem;
  }
}
/*for-more*/
.more-container .for-more {
  inset: 0px 0px auto auto;
  transform: translate(-40px, -39px);
}

.more-container .for-more a {
  text-align: center;
}

/*btn-comment-wrap*/
.btn-comment-wrap {
  padding-top: 0.875rem;
}
.btn-comment {
  color: var(--color--gray-999);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.25rem 0;
}

/*comment-editor*/
.comment-box {
  border: 1px solid var(--color--border-ddd);
  border-radius: 0.375rem;
  overflow: hidden;
}
.comment-box .bottom {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  padding: 0.625rem 1rem;
  border-top: 1px solid var(--color--border-ddd);
  background-color: var(--color--wh);
}
.comment-box .bottom .right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.bottom:has(> .right):not(:has(> :not(.right))) {
  justify-content: flex-end;
}

.comment-box .bottom .right .btn-sm {
  height: 2.25rem;
}
.comment-box textarea {
  border: 0;
}
@media (max-width: 767px) {
  .comment-box .bottom {
    padding: 0.5rem 1rem;
  }
  .comment-box .bottom .right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .comment-box textarea {
    height: 7.5rem;
  }
}
/*reply*/
.reply {
  margin-top: 1rem;
}
.reply-box {
  display: none;
}
.reply-box.active {
  display: block;
}

/*reply-list*/
.reply-list {
  margin-top: 1rem;
  background-color: #f9f9f9;
  padding: 0 1.5rem;
}
.reply-list > .item {
  padding: 1.5rem 0;
}
.reply-list > .item:nth-child(n + 2) {
  border-top: 1px solid var(--color--border-eee);
}

@media (max-width: 767px) {
  .reply-list {
    margin-top: 1rem;
    background-color: #f9f9f9;
    padding: 0 1rem;
  }
  .reply-list > .item {
    padding: 1rem 0;
  }
}

/*comment-lock*/
.comment-lock {
  color: var(--color--gray-666);
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.comment-lock span {
  width: calc(100% - 1.5rem);
}
.comment-lock::before {
  content: "";
  width: 1rem;
  height: 1rem;
  background: url("../images/ic-lock-gray-sm.svg") no-repeat center/cover;
  display: inline-block;
}

/*board-view-bottom*/
.board-view-bottom {
  padding-top: 2rem;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}
.board-view-bottom button {
  height: 3.125rem;
  border: 2px solid var(--color--bk);
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 1025px) {
  .board-view-bottom button:hover {
    background-color: rgba(0, 0, 0, 0.15);
  }
}

.board-view-bottom .btn-left,
.board-view-bottom .btn-right {
  width: 3.125rem;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.125rem;
}
.board-view-bottom .btn-left {
  background-image: url("../images/ic-arrow-left-lg.svg");
}
.board-view-bottom .btn-right {
  background-image: url("../images/ic-arrow-right-lg.svg");
}
.board-view-bottom .btn-list {
  width: 7.188rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 100px;
  color: var(--color--bk);
}

/*order-info-wrap*/
.order-info-wrap {
  border: 1px solid var(--color--border-ddd);
  border-radius: 0.75rem;
  padding: 2rem;
}
.order-info-wrap > .title {
  font-size: 1.25rem;
  font-weight: 700;
  padding-bottom: 1.5rem;
}
.order-info-wrap .order-info {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.order-info-wrap .order-info .item {
  width: calc(50% - 0.625rem);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.order-info-wrap .order-info .item .title-wrap {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 8.125rem;
}
.order-info-wrap .order-info .item .title-wrap .label {
  line-height: 1;
  color: var(--color--gray-666);
}
.order-info-wrap .order-info .item .data {
  width: calc(100% - 9.125rem);
}
@media (max-width: 767px) {
  .order-info-wrap {
    padding: 0;
    border: 0;
  }
  .order-info-wrap > .title {
    font-size: 1.125rem;
  }

  .order-info-wrap .order-info .item {
    width: 100%;
    gap: 0.5rem;

    flex-wrap: wrap;
  }
  .order-info-wrap .order-info .item .title-wrap {
    width: 100%;
  }
  .order-info-wrap .order-info .item .title-wrap .label {
    font-size: 0.875rem;
  }
  .order-info-wrap .order-info .item .data {
    width: 100%;
  }
  .order-info-wrap .order-info .item .title-wrap .ic-md {
    display: none;
  }
}

/*order-wrap*/
.order-wrap .data-choice .item {
  cursor: default;
}
.order-wrap .order-request {
  color: var(--color--gray-666);
  line-height: 1.5;
  font-weight: normal;
  font-size: 0.9375rem;
}
.order-wrap .send-card > .item {
  min-width: 23.5rem;
  max-width: 23.5rem;
}
@media screen and (max-width: 1024px) {
  .order-wrap .send-card > .item {
    min-width: 18.75rem;
    max-width: 18.75rem;
  }
}

/*reply-view*/
.reply-view > *:nth-child(n + 2) {
  padding-top: 2rem;
}

/*write-form*/
.write-form textarea {
  height: 25rem;
}
.write-form > .inner > *:nth-child(n + 2) {
  padding-top: 1rem;
}
.write-form .flex {
  display: flex;
  gap: 1rem;
}
@media (max-width: 767px) {
  .write-form .flex {
    flex-direction: column;
    gap: 0.25rem;
  }
}
/*upload-area*/
.upload-wrap {
  background-color: var(--color--wh);
}
.upload-area {
  position: relative;
  width: 100%;
  margin: 0 auto;
  border: 2px dashed var(--color--border-ddd);
  border-radius: 0.25rem;
  text-align: center;
  min-height: 6.25rem;
  max-height: 12.5rem;
  padding: 1rem;
  overflow: auto;
  cursor: pointer;
}
.upload-area p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--color--gray-999);
  font-size: 0.9375rem;
  white-space: nowrap;
}
.upload-area p::before {
  content: "";
  width: 1.125rem;
  height: 1.125rem;
  display: inline-block;
  background: url(../images/ic-fileplus-gray-md.svg) no-repeat center / cover;
  vertical-align: middle;
  margin: -0.25rem 0.375rem 0 0;
}
.file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.file-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.625rem;
  border-radius: 0.25rem;
  position: relative;
  border: 1px solid var(--color--border-ddd);
  gap: 1rem;
}

.file-item .file-wrap {
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 0 !important;
}
.file-item .file-name {
  font-weight: 600;
  display: flex;
  font-size: 0.875rem;
}
.file-item .file-name span:first-child {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 12.5rem;
  display: inline-block;
}
.file-item .file-size {
  color: var(--color--gray-666);
  font-size: 0.75rem;
  padding-left: 0.5rem;
  white-space: nowrap;
}
.delete-button {
  border-radius: 0.25rem;
  width: 1.25rem;
  height: 1.25rem;
  background-color: rgba(0, 0, 0, 0.8);
  background-size: 0.875rem 0.875rem;
  background-image: url(../images/ic-delete-wh-xsm.svg);
  background-repeat: no-repeat;
  background-position: center;
}

@media screen and (max-width: 1024px) {
  .write-view .send-card {
    justify-content: flex-start;
  }
}
@media (max-width: 767px) {
  .write-form textarea {
    height: 18.75rem;
  }
  .upload-area {
    padding: 0.5rem;
  }
  .upload-area p {
    font-size: 0.875rem;
  }
  .file-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  .file-item {
    padding: 0.5rem;
    gap: 0.5rem;
  }
  .board-view-content .file-wrap .file-list a {
    padding: 0.5rem 0.75rem;
  }
  .file-item .file-name {
    font-size: 0.8125rem;
  }
  .file-item .file-size {
    padding-left: 0.375rem;
  }
}

/*input-lg*/
.input-lg {
  font-size: 1.5rem !important;
  height: 3.5rem;
}
@media (max-width: 767px) {
  .input-lg {
    font-size: 1.25rem !important;
    height: 3.125rem;
  }
}

/*my-info-wrap*/
.my-info-wrap {
  max-width: 25rem;
  margin: 0 auto;
  padding-top: 1.5rem;
}
.my-info-wrap .my-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding-bottom: 3.125rem;
}
.my-info-wrap .my-profile .my-id {
  font-size: 1.5rem;
  font-weight: 700;
}
.my-info-wrap .my-profile .img-wrap {
  position: relative;
}
.my-info-wrap .my-profile .img-wrap .img {
  width: 5.375rem;
  height: 5.375rem;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--color--border-eee);
}

.my-info-wrap .my-profile .img-wrap .img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.3s ease;
}

.my-info-wrap .my-profile .img-wrap .btn-camera {
  position: absolute;
  z-index: 1;
  right: -0.5rem;
  bottom: 0;
  width: 2rem;
  height: 2rem;
  background-color: var(--color--wh);
  border-radius: 50%;
  -webkit-box-shadow: 0 0.425rem 1.125rem 0.2125rem rgb(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0.425rem 1.125rem 0.2125rem rgb(0, 0, 0, 0.1);
  -ms-box-shadow: 0 0.425rem 1.125rem 0.2125rem rgb(0, 0, 0, 0.1);
  -o-box-shadow: 0 0.425rem 1.125rem 0.2125rem rgb(0, 0, 0, 0.1);
  box-shadow: 0 0.425rem 1.125rem 0.2125rem rgb(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

/*pw-change-wrap*/
.pw-change-wrap .input-wrap {
  padding-top: 2rem;
}

.pw-change-wrap .input-wrap {
  display: none;
}
.pw-change-wrap .input-wrap.active {
  display: block;
}

/*for-send-input*/
.for-send-input .modal-body {
  padding-top: 1rem;
}

/*state-badge*/
.state-badge {
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 100px;
  width: 5rem;
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* border: 1px solid; */
  line-height: 1;
}
.state-badge.orange {
  color: #fe7f00;
  background-color: rgba(254, 127, 0, 0.1);
  /* border-color: rgba(254, 127, 0, 0.2); */
}
.state-badge.green {
  color: #13bb66;
  background-color: rgba(19, 187, 102, 0.1);
  /* border-color: rgba(19, 187, 102, 0.2); */
}
.state-badge.blue {
  color: #2455f4;
  background-color: rgba(36, 85, 244, 0.1);
  /* border-color: rgba(19, 117, 187, 0.2); */
}
.state-badge.gray {
  color: #666;
  background-color: rgba(102, 102, 102, 0.1);
  /* border-color: rgba(102, 102, 102, 0.2); */
}

/*datepicker-set*/
.datepiker-set {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.datepicker-input {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.datepicker {
  cursor: pointer;
  background-image: url("../images/ic-calendar-gray-md.svg");
  background-position-x: calc(100% - 0.5rem);
  background-position-y: center;
  background-repeat: no-repeat;
  background-size: 1.125rem;
  min-width: 7rem;
  cursor: pointer !important;
  width: 7rem;
}
.datepicker-input .btn-sm {
  min-width: 2rem !important;
}

.datepicker-input .ui-datepicker-trigger {
  position: absolute;
  top: 50%;
  right: 0.875rem;
  z-index: 1;
  transform: translateY(-50%);
  cursor: pointer;
}

.datepicker-input input[disabled],
.datepicker-input input[readonly] {
  color: var(--color--bk-70);
  background-color: var(--color--input-disabled);
  cursor: default !important;
}

/*datepicker*/
.ui-datepicker-trigger,
.hasDatepicker,
.hasMonthpicker {
  cursor: pointer;
}

.ui-widget * {
  font-family: "Pretendard", sans-serif !important;
}

.ui-datepicker tr:hover {
  background-color: transparent;
}

.datepicker input {
  border: 0;
  font-size: 1.125rem;
  text-align: center;
  margin-top: -0.2rem;
  width: auto !important;
  height: auto;
  color: var(--color--bk) !important;
  cursor: pointer !important;
}

.ui-datepicker {
  -webkit-box-shadow: 0 0.1rem 1.333rem 1px rgb(0, 0, 0, 0.08);
  box-shadow: 0 0.1rem 1.333rem 1px rgb(0, 0, 0, 0.08);
  padding: 1rem 0.75rem 0.5rem !important;
  z-index: 9999 !important;
}

.ui-widget.ui-widget-content {
  border: 0 !important;
}

.ui-datepicker .ui-datepicker-header {
  padding: 0 0 0.5rem !important;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.ui-widget-header {
  border: 0 !important;
  background: var(--color--wh) !important;
  color: rgba(0, 0, 0, 1) !important;
  font-weight: 700 !important;
}

.ui-datepicker table {
  margin: 0 !important;
  font-size: 0.875rem !important;
  border-top: 0 !important;
}

.ui-widget-content {
  color: rgba(0, 0, 0, 1) !important;
}

.ui-datepicker .ui-datepicker-other-month.ui-state-disabled {
  padding: 0 !important;
}

.ui-datepicker th {
  padding: 0.3em !important;
  height: auto;
  color: var(--color--bk);
}

.ui-datepicker td {
  background: var(--color--wh) !important;
  position: relative;
  padding: 0 !important;
  padding-bottom: 14.28% !important;
  height: initial;
}

.ui-datepicker-calendar th:first-child,
.ui-datepicker-calendar td:first-child a {
  color: #ff3434 !important;
}

.ui-datepicker-calendar th:last-child,
.ui-datepicker-calendar td:last-child a {
  color: #0152cc !important;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
.ui-button.ui-state-disabled:hover,
.ui-button.ui-state-disabled:active {
  border: 0 !important;
  position: absolute;
  width: 100%;
  height: 100% !important;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ui-datepicker .ui-datepicker-title {
  margin: 0 1.5rem !important;
  width: 100%;
}

.ui-datepicker .ui-datepicker-title select {
  font-size: 0.875rem !important;
  border-color: var(--color--border-ddd) !important;
  height: 1.8em !important;
  padding: 0 0.25rem !important;
  color: var(--color--bk) !important;
  /* border: 0 !important; */
  cursor: pointer;
}

.ui-datepicker .ui-datepicker-title select:first-child {
  border-radius: 0.25rem 0 0 0.25rem !important;
}

.ui-datepicker .ui-datepicker-title select:last-child {
  border-radius: 0 0.25rem 0.25rem 0 !important;
}

.ui-datepicker .ui-datepicker-title select:nth-child(n + 2) {
  border-left: 0;
}

.ui-datepicker .ui-datepicker-buttonpane {
  margin: 0.25rem 0 0 0 !important;
  padding: 0 !important;
}

.ui-datepicker .ui-datepicker-buttonpane button {
  font-size: 0.875rem !important;
}

.ui-widget-content {
  border-color: var(--color--border-eee) !important;
}

.ui-datepicker-buttonpane .ui-state-default,
.ui-datepicker-buttonpane .ui-widget-content .ui-state-default {
  position: relative;
}

.ui-datepicker td span,
.ui-datepicker td a {
  padding: 0 !important;
  text-align: center !important;
}

.ui-datepicker-next .ui-icon {
  background-image: url("../images/ic-arrow-right-lg.svg") !important;
  background-position: center;
  width: 1.5rem;
  height: 1.5rem;
  background-size: contain;
}

.ui-datepicker-prev .ui-icon {
  background-image: url("../images/ic-arrow-left-lg.svg") !important;
  background-position: center;
  width: 1.5rem;
  height: 1.5rem;
  background-size: contain;
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%);
  margin: 0 !important;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
  background: var(--color--wh) !important;
}

.ui-state-hover,
.ui-button:hover,
.ui-button:focus {
  border: 0 !important;
}

.ui-datepicker .ui-datepicker-next {
  right: 0 !important;
  cursor: pointer;
}

.ui-datepicker .ui-datepicker-prev {
  left: 0 !important;
  cursor: pointer;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  top: 0 !important;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
.ui-button.ui-state-disabled:hover,
.ui-button.ui-state-disabled:active {
  border: 0;
  background: transparent;
  font-weight: normal;
  color: var(--color--bk) !important;
  background-color: #fff !important;
}

.ui-state-default.ui-state-highlight,
.ui-state-default.ui-state-highlight.ui-state-hover {
  background: var(--bg--gray) !important;
  border-radius: 50%;
}

.ui-state-default.ui-state-active,
.ui-state-default.ui-state-active.ui-state-hover,
.ui-datepicker-calendar td:last-child a.ui-state-default.ui-state-active,
.ui-datepicker-calendar td:last-child a.ui-state-default.ui-state-active.ui-state-hover,
.ui-datepicker-calendar td:first-child a.ui-state-default.ui-state-active,
.ui-datepicker-calendar td:first-child a.ui-state-default.ui-state-active.ui-state-hover {
  background-color: var(--color--primary) !important;
  color: var(--color--wh) !important;
  border-radius: 50%;
}

/*request-form*/
.request-form textarea {
  height: 10rem;
}
.request-form > .inner > *:nth-child(n + 2) {
  padding-top: 2rem;
}
.request-form .radio-wrap > div:nth-child(n + 2) {
  padding-top: 0.75rem;
}
.request-form .radio-wrap .flex {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/*datepicker-wrap*/
.datepicker-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.datepicker-wrap input {
  height: 2rem;
  padding: 0 0.5rem;
  font-size: 0.875rem;
}

.datepicker-wrap .to {
  font-size: 0.875rem;
  color: var(--color--gray-666);
}
@media (max-width: 767px) {
  .datepicker-wrap .to {
    font-size: 0.75rem;
  }
}

/*inquiry*/
.inquiry {
  font-size: 0.75rem;
  color: var(--color--gray-999);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.25rem;
  line-height: 1;
  min-width: 3.75rem;
}
.inquiry::before {
  content: "";
  width: 1rem;
  height: 1rem;
  background: url("../images/ic-eye-sm.svg") no-repeat center/cover;
}

/*base-view register-wrap */
.base-view .register-wrap {
  display: flex;
  gap: 1rem;
}
.base-view .register-wrap > .item {
  min-width: 22.25rem;
  max-width: 22.25rem;
  cursor: pointer;
}

.base-view .register-wrap > .item:nth-child(n + 2) {
  margin-top: 0;
}
.base-view .register-wrap > .item .content {
  width: calc(100% - 0rem);
}
.base-view .register-wrap > .item .title {
  padding-right: 0;
}
.base-view .register-wrap > .item .info {
  justify-content: space-between;
}
.base-view .register-wrap .inquiry {
  min-width: auto;
}
@media screen and (min-width: 1025px) {
  .base-view .register-wrap > .item:hover {
    border-color: var(--color--bk);
    transition: all 0.3s;
  }
}
@media (max-width: 767px) {
  .base-view .register-wrap > .item {
    min-width: 16rem;
    max-width: 16rem;
  }
}

/*sales-wrap*/
.sales-wrap {
  padding: 1.5rem 0;
}

.sales-info {
  padding-bottom: 1rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 0.75rem;
  row-gap: 0.25rem;
}
.sales-info .title {
  font-weight: 700;
}
.sales-info .info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 0.75rem;
  row-gap: 0.25rem;
  color: var(--color--gray-666);
  font-size: 0.875rem;
}
.sales-info .info .tag-wrap {
  color: var(--color--blue);
  word-break: break-all;
}
@media (max-width: 767px) {
  .sales-info .info {
    font-size: 0.75rem;
  }
}

/*nav*/
nav {
  width: 15rem;
  height: calc(100vh - 3.5rem) !important;
  position: fixed;
  padding-right: 0.625rem;
  left: 0;
  z-index: 9;
  background-color: var(--color--wh);
}
nav.active {
  width: 4.5rem;
  padding-right: 0;
}
nav.active > .lg {
  display: none;
}
nav > .sm {
  display: none;
  padding: 0.75rem 0.25rem;
}
nav.active > .sm {
  display: block;
}

nav > * {
  height: 100%;
}
nav > .lg {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

nav .gnb {
  flex: 1;
}
nav .gnb .group {
  padding: 0.75rem;
  border-bottom: 1px solid var(--color--border-eee);
}

nav a {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  border-radius: 0.5rem;
  line-height: 1;
  color: var(--color--bk);
  font-size: 0.875rem;
  height: 2.5rem;
}
nav a.active {
  background: rgba(255, 56, 92, 0.08);
  font-weight: 700;
  color: var(--color--primary);
}
nav a::before {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-right: 1.5rem;
}
nav a.ic-home-lg::before {
  background-image: url(../images/ic-home-lg.svg);
}
nav a.ic-home-lg.active::before {
  background-image: url(../images/ic-home-active-lg.svg);
}
nav a.ic-tv-lg::before {
  background-image: url(../images/ic-tv-lg.svg);
}
nav a.ic-tv-lg.active::before {
  background-image: url(../images/ic-tv-active-lg.svg);
}
nav a.ic-noti-lg::before {
  background-image: url(../images/ic-noti-lg.svg);
}
nav a.ic-noti-lg.active::before {
  background-image: url(../images/ic-noti-active-lg.svg);
}
nav a.ic-list-lg::before {
  background-image: url(../images/ic-list-lg.svg);
}
nav a.ic-list-lg.active::before {
  background-image: url(../images/ic-list-active-lg.svg);
}
nav a.ic-message-lg::before {
  background-image: url(../images/ic-message-lg.svg);
}
nav a.ic-message-lg.active::before {
  background-image: url(../images/ic-message-active-lg.svg);
}

nav a.ic-drop-lg::before {
  background-image: url(../images/ic-drop-lg.svg);
}
nav a.ic-drop-lg.active::before {
  background-image: url(../images/ic-drop-active-lg.svg);
}
nav a.ic-speaker-lg::before {
  background-image: url(../images/ic-speaker-lg.svg);
}
nav a.ic-speaker-lg.active::before {
  background-image: url(../images/ic-speaker-active-lg.svg);
}
nav a.ic-book-lg::before {
  background-image: url(../images/ic-book-lg.svg);
}
nav a.ic-book-lg.active::before {
  background-image: url(../images/ic-book-active-lg.svg);
}
nav a.ic-chats-lg::before {
  background-image: url(../images/ic-chats-lg.svg);
}
nav a.ic-chats-lg.active::before {
  background-image: url(../images/ic-chats-active-lg.svg);
}
@media screen and (min-width: 1025px) {
  nav a:hover {
    background-color: var(--color--bg-hover);
  }
  nav a.active:hover {
    background: rgba(255, 56, 92, 0.12);
  }
}

/*nav gnb-acd*/
nav .gnb-acd .title {
  cursor: pointer;
  font-weight: 600;
  padding: 0 0.75rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  position: relative;
}
nav .gnb-acd .title::after {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  background: url(../images/ic-arrow-down-gray-md.svg) no-repeat center / cover;
  top: 50%;
  right: 0;
  transform: translate(-50%, -50%);
  position: absolute;
  transition: all 0.3s;
}
nav .gnb-acd.active .title::after,
nav .gnb-acd.block .title::after {
  transform: translate(-50%, -50%) rotate(-180deg);
}
nav .gnb-acd > .gnb-wrap {
  display: none;
}

nav .gnb-acd.active > .gnb-wrap {
  display: block;
}
nav .gnb-acd.block > .gnb-wrap {
  display: block;
}

/*nav footer*/
nav .footer {
  padding: 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  row-gap: 0.625rem;
}
nav .footer .top {
  font-weight: 600;
  font-size: 0.8125rem;
  display: flex;
  gap: 0.75rem;
  color: var(--color--gray-666);
}
nav .footer .top > div {
  cursor: pointer;
}
nav .footer .info {
  font-size: 0.75rem;
  color: var(--color--gray-999);
  font-weight: 400;
}
@media screen and (min-width: 1025px) {
  nav .footer .top > div:hover {
    color: var(--color--bk);
  }
}
nav .sm a {
  flex-direction: column;
  height: auto;
  padding: 0.875rem 0;
  font-size: 0.6875rem;
  text-align: center;
}
nav .sm a::before {
  margin-right: 0;
  margin-bottom: 0.375rem;
}

/*heart-container*/
.heart-container .dropdown.box .header {
  padding-bottom: 0;
}
.heart-container .style-line > .tabs-nav::after {
  display: none;
}
.heart-container .style-line > .tabs-nav li {
  width: auto;
}

.heart-container .tabs-nav .active a:hover {
  color: var(--color--bk);
}
.heart-container .tabs-nav a:hover {
  background-color: initial;
  color: var(--color--gray-999);
}
.heart-container .dropdown.box .body {
  padding: 0.75rem 0;
}
.heart-container .body .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 1.5rem;
}
.heart-container .body .item:hover {
  background-color: var(--color--bg-hover);
}
.heart-container .body .item .title-wrap {
  padding: 0.75rem 0 0.75rem 1.5rem;
  flex: 1;
  overflow: hidden;
  margin-right: 0.5rem;
  cursor: pointer;
}
.heart-container .body .item .title,
.heart-container .body .item .info {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.heart-container .body .item .title {
  font-weight: 600;
  font-size: 0.875rem;
}
.heart-container .body .item .info {
  font-size: 0.75rem;
  color: var(--color--gray-666);
}
.heart-container .btn-area {
  padding: 0.75rem 0;
}
.heart-container .heart-wrap.active .ic-heart {
  animation: none;
}

/*Co-search*/
.Co-search {
  position: relative;
}
.Co-search input {
  padding-right: 4rem;
}
.Co-search .ic-delete {
  position: absolute;
  top: 50%;
  right: 3rem;
  transform: translateY(-50%);
  line-height: 1;
  font-size: 0.9375rem;
  z-index: 1;
}
.Co-search .search-layer {
  top: 2.5rem;
  position: absolute;
  z-index: 999;
}
.Co-search .search-layer a {
  font-size: 0.9375rem;
  color: var(--color--bk);
  padding: 0.75rem 1.25rem;
  text-decoration: none;
  display: block;
}

.Co-search .search-layer {
  display: none;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.13);
  border-radius: 0 0 1rem 1rem;
  background-color: var(--color--wh);
  width: 100%;
  max-width: 37.5rem;
  padding: 0.75rem 0;
  max-height: 25rem;
  overflow: auto;
}

.Co-search.focus .search-layer {
  display: block;
  min-height: 10rem;
}
.Co-search .highlight {
  font-weight: 700;
  color: var(--color--bk);
}

.Co-search .search-layer .hidden {
  display: none;
}

.Co-search .search-wrap .ic-delete {
  display: none;
}

@media screen and (min-width: 1025px) {
  .Co-search.focus .search-layer a:hover {
    background-color: var(--color--bg-hover);
    transition: none;
  }
}

/*main-content */
.main-content {
  padding-top: 0.5rem;
}
.main-content .main-section:nth-child(n + 2) {
  padding-top: 3rem;
}

/*card-wrap*/
.card-wrap {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1rem;
  row-gap: 2rem;
}
.card-wrap .item {
  width: 100%;
  max-width: 43.75rem;
  overflow: hidden;
}
.card-wrap .item .inner {
  cursor: pointer;
}

.card-wrap .item .thum {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0.75rem;
  overflow: hidden;
}
.card-wrap .item .thum img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.3s ease;
}
@media screen and (min-width: 1025px) {
  .card-wrap .item .inner:hover .thum img {
    transform: scale(1.05);
    transform-origin: center center;
    transition: transform 0.3s ease;
  }
}
.card-wrap .item .content-wrap {
  padding-top: 0.875rem;
  display: flex;
  gap: 0.75rem;
}

.card-wrap .item .profile {
  position: relative;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.card-wrap .item .profile img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.card-wrap .item .title-wrap {
  flex: 1;
  min-width: 0;
}
.card-wrap .item .title-wrap .title {
  word-break: break-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
}
.card-wrap .item .title-wrap .info,
.card-wrap .item .title-wrap .date {
  font-size: 0.75rem;
  color: var(--color--gray-666);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  padding-top: 0.25rem;
}
.card-wrap .item .title-wrap .info span,
.card-wrap .item .title-wrap .date span {
  max-width: 50%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 400;
}
.card-wrap .item .title-wrap .info span:nth-child(n + 2)::before {
  content: "";
  width: 1px;
  height: 0.625rem;
  display: inline-block;
  margin-right: 0.375rem;
  background-color: var(--color--gray-999);
  vertical-align: middle;
  margin: -1px 0.375rem 0;
}
.card-wrap .item .title-wrap .date span:nth-child(n + 2)::before {
  content: "";
  width: 3px;
  height: 3px;
  display: inline-block;
  margin-right: 0.375rem;
  background-color: var(--color--gray-999);
  vertical-align: middle;
  margin: -1px 0.375rem 0;
  border-radius: 50%;
}
.card-wrap .item .hash-tag {
  padding-top: 0.25rem;
}
@media (max-width: 767px) {
  .card-wrap .item .content-wrap {
    padding-top: 0.625rem;
  }
}

/*hash-tag*/
.hash-tag {
  display: flex;
  gap: 0.375rem;
  padding-left: 3rem;
}
.hash-tag a {
  font-size: 0.75rem;
  color: var(--color--blue);
  white-space: nowrap;
}
@media screen and (min-width: 1025px) {
  .hash-tag a:hover {
    opacity: 0.7;
  }
}

/*main-card*/
.main-card .item {
  width: calc((100% - 4rem) / 5);
}
.main-card .item:nth-child(n + 21) {
  display: none;
}

@media screen and (min-width: 1921px) {
  .main-card .item {
    width: calc((100% - 6rem) / 7);
  }
  .main-card .item:nth-child(n + 21) {
    display: block;
  }
}
@media screen and (max-width: 1600px) {
  .main-card .item {
    width: calc((100% - 3rem) / 4);
  }
  .main-card .item:nth-child(n + 21) {
    display: none;
  }
}
@media screen and (max-width: 1300px) {
  .main-card .item {
    width: calc((100% - 2rem) / 3);
  }
  .main-card .item:nth-child(n + 21) {
    display: block;
  }
}
@media screen and (max-width: 767px) {
  .main-card .item {
    width: calc((100% - 1rem) / 2);
  }
  .main-card .item:nth-child(n + 21) {
    display: none;
  }  
}
@media screen and (max-width: 586px) {
  .main-card .item {
    width: 100%;
  }
}

/*tv-card*/
.tv-card .item {
  width: calc((100% - 3rem) / 4);
}
.tv-card .item .inner {
  cursor: default;
}
.tv-card iframe {
  width: 100%;
  height: 100%;
}

.tv-card .hash-tag {
  padding-left: 0;
}
@media screen and (min-width: 1921px) {
  .tv-card .item {
    width: calc((100% - 5rem) / 6);
  }
  .tv-card.main-tv-card .item:nth-child(n + 7) {
    display: none;
  }  
}
@media screen and (max-width: 1920px) {
  .tv-card .item {
    width: calc((100% - 5rem) / 5);
  }
  .tv-card.main-tv-card .item:nth-child(n + 6) {
    display: none;
  }
}
@media screen and (max-width: 1600px) {
  .tv-card .item {
    width: calc((100% - 2rem) / 3);
  }

  .tv-card.main-tv-card .item:nth-child(n + 4) {
    display: none;
  }
}
@media screen and (max-width: 1300px) {
  .tv-card .item {
    width: calc((100% - 1rem) / 2);
  }

  .tv-card.main-tv-card .item:nth-child(n + 3) {
    display: none;
  }
}

@media screen and (max-width: 586px) {
  .tv-card .item {
    width: 100%;
  }

  .tv-card.main-tv-card .item:nth-child(n + 3) {
    display: none;
  }
}

/*link-box-sticky, link-box-wrap*/
.link-box-sticky {
  padding: 0.75rem 16rem 0.75rem 1rem;
}
.link-box-sticky,
.link-box-wrap {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin: 0 -1rem;
}

section.active .link-box-sticky {
  padding: 0.75rem 5.5rem 0.75rem 1rem;
}
.link-box-sticky button,
.link-box-wrap button {
  min-width: 5.625rem;
}
.link-box-sticky.sticky .sticky-none,
.link-box-sticky.sticky .sticky-none {
  display: none;
}
.link-box-sticky.sticky {
  box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.04);
  background-color: var(--color--wh);
  width: 100%;
  position: fixed;
  top: 3.5rem;
  z-index: 99;
  left: 1rem;
  padding: 0.75rem 1rem;
  /*transition: all 0.3s ease-in-out; */
}
.link-box-wrap.sm {
  justify-content: start;
  margin: 0;
  gap: 0.375rem;
  overflow: auto;
}
.link-box-wrap.sm button {
  min-width: auto;
  padding: 0.375rem 0.625rem;
  font-size: 0.875rem;
  font-weight: 500;
  height: 2rem;
}
.link-box-wrap.sm .btn-gray-outline {
  color: var(--color--gray-999);
  border-color: #ccc;
}

@media (max-width: 767px) {
  .link-box-wrap.sm button {
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    height: 1.75rem;
  }
}

section.active .link-box-sticky.sticky {
  padding: 0.75rem 1rem;
}
@media (max-width: 1024px) {
  .link-box-sticky,
  section.active .link-box-sticky {
    padding: 0.75rem 1rem;
  }
  .link-box-wrap.sm {
    margin: 0 -1rem;
    padding: 0 1rem;
  }
}
@media (max-width: 767px) {
  .link-box-sticky {
    justify-content: start;
  }
  .link-box-sticky.sticky {
    top: 6.5rem;
  }
  .link-box-sticky.sticky.sticky-m {
    top: 0;
    transition: all 0.3s ease-in-out;
  }
  .link-box-sticky button {
    min-width: auto;
  }
  .link-box-sticky button.btn-sm,
  .link-box-wrap button.btn-sm {
    padding: 0 0.875rem;
    height: 2.25rem;
  }
}

/*ready-overlay*/
.ready-overlay {
  position: absolute;
  top: 0;
  left: -1rem;
  width: calc(100% + 2rem);
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
}
.ready-overlay .img {
  width: 3.5rem;
  height: 3.5rem;
  background-color: var(--color--wh);
  border-radius: 50%;
  box-shadow: 0 0.425rem 1.125rem 0.2125rem rgb(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
}
.ready-overlay .title {
  text-align: center;
  font-weight: 700;
}

/*searchc-content*/
.search-content .card-wrap {
  padding-top: 0.75rem;
}

/*filter-content*/
.filter-content {
  display: flex;
  gap: 1.5rem;
  position: relative;
}
.filter-content .search-content {
  flex: 1;
  overflow: hidden;
}

/*filter-wrap*/
.filter-content .filter-wrap {
  width: 15rem;
  padding-left: 0.625rem;
  position: sticky;
  top: 8rem;
  overflow-y: auto;
  z-index: 1;
  min-height: 110px;
  max-height: calc(100vh - 11.5rem);
  display: flex;
  flex-direction: column;
}

.filter-content .filter-wrap .filter-check {
  flex: 1;
}
/*filter-common*/
.filter-common .title-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0 0.75rem;
  border-bottom: 1px solid var(--color--bk);
}
.filter-common .title-wrap .title {
  font-size: 1.25rem;
  font-weight: 700;
}
.filter-common .deselect {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--color--border-ddd);
  border-radius: 0.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (min-width: 1025px) {
  .filter-common .deselect:hover {
    border: 1px solid var(--color--gray-999);
  }
}

.filter-common .deselect::before {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  display: inline-block;
  background: url(../images/ic-deselect-xsm.svg) no-repeat center / cover;
}

.filter-common .filter-check .item {
  border-bottom: 1px solid var(--color--border-eee);
}
.filter-common .filter-check .item > .check-wrap {
  padding: 1.5rem 0;
}
.filter-common .filter-check .item > .check-wrap > div:nth-child(n + 2) {
  padding-top: 0.75rem;
}
.filter-common .filter-check .item.filter-acd .title {
  padding: 1.125rem 0;
  font-weight: 700;
  position: relative;
  cursor: pointer;
}

.filter-common .filter-check .item.filter-acd .title span {
  color: var(--color--primary);
  padding-left: 0.25rem;
}
.filter-common .filter-check .item.filter-acd .title::after {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  background: url("../images/ic-arrow-down-gray-md.svg") no-repeat center/cover;
  top: 50%;
  right: 0;
  transform: translate(-50%, -50%);
  position: absolute;
  transition: all 0.3s;
}
.filter-common .filter-check .item.filter-acd.active .title::after,
.filter-common .filter-check .item.filter-acd.block .title::after {
  transform: translate(-50%, -50%) rotate(-180deg);
}
.filter-common .filter-check .item.filter-acd > .check-wrap {
  padding-top: 0;
  display: none;
  max-height: 200px;
  overflow: auto;
}

.filter-common .filter-check .item.filter-acd.active > .check-wrap {
  display: block;
}
.filter-common .filter-check .item.filter-acd.block > .check-wrap {
  display: block;
}

/*card-more */
.card-more {
  display: flex;
  justify-content: center;
  padding-top: 2rem;
}
.card-more button {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.card-more button::after {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  background: url("../images/ic-arrow-down-lg.svg") no-repeat center/cover;
  display: inline-block;
}

.card-more a {
  font-size: 0.875rem;
  color: var(--color--gray-666);
  text-decoration: underline !important;
  padding: 0.5rem;
}

@media screen and (min-width: 1025px) {
  .card-more a:hover {
    color: var(--color--bk);
  }
}

/*search-content m-filter*/
.search-content .search-header .total-wrap .m-filter {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  position: relative;
  cursor: pointer;
  font-weight: 600;
  line-height: 1;
}
.search-content .search-header .total-wrap .m-filter .filter-badge {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color--wh);
  padding: 0.125rem 0.25rem;
  border-radius: 100px;
  background-color: var(--color--primary);
  line-height: 1;
  min-width: 1.25rem;
  min-height: 1.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 1300px) {
  .filter-content .filter-wrap,
  .filter-content .filter-box,
  .re-search {
    display: none;
  }
}
@media (min-width: 1301px) {
  .search-content .search-header .total-wrap .m-filter {
    display: none;
  }
}

/*base-card*/
.base-card .item {
  width: calc((100% - 3rem) / 4);
}
@media (min-width: 1921px) {
  .base-card .item {
    width: calc((100% - 5rem) / 6);
  }
}
@media (max-width: 1500px) {
  .base-card .item {
    width: calc((100% - 2rem) / 3);
  }
}

@media (max-width: 767px) {
  .base-card .item {
    width: calc((100% - 1rem) / 2);
  }
}
@media (max-width: 586px) {
  .base-card .item {
    width: 100%;
  }
}
/*pr-card*/
.pr-card {
  row-gap: 1rem;
}
.pr-card .card-vs {
  width: calc((100% - 4rem) / 5);
  position: relative;
}
@media (min-width: 1921px) {
  .pr-card .card-vs {
    width: calc((100% - 5rem) / 6);
  }
}
@media (max-width: 1600px) {
  .pr-card .card-vs {
    width: calc((100% - 3rem) / 4);
  }
}
@media (max-width: 1400px) {
  .pr-card .card-vs {
    width: calc((100% - 2rem) / 3);
  }
}
@media (max-width: 767px) {
  .pr-card {
    column-gap: 0.5rem;
    row-gap: 0.5rem;
  }
  .pr-card .card-vs {
    width: calc((100% - 0.5rem) / 2);
  }
}

/*card-vs*/
.card-vs .vs {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color--gray-666);
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.125rem;
  cursor: pointer;
  padding: 1rem;
  line-height: 1;
}

.card-vs .vs::after {
  content: "";
  width: 1rem;
  height: 1rem;
  background: url("../images/ic-plus-gray-xsm.svg") no-repeat center/cover;
  display: inline-block;
}
.card-vs .vs.active::after {
  background: url("../images/ic-minus-red-xsm.svg") no-repeat center/cover;
}

.pr-card .card-vs > .item {
  border: 1px solid var(--color--border-ddd);
  border-radius: 1rem;
  width: 100%;
  cursor: pointer;
  transition: all 0.3s;
  padding: 1.25rem;
}
.pr-card .card-vs > .item .pr-img {
  width: 10rem;
  height: 10rem;
  margin: 0 auto;
}
.pr-card .card-vs > .item .pr-img img {
  margin: 0 auto;
  max-width: 100%;
}
.pr-card .card-vs > .item .pr-body {
  padding-top: 0.875rem;
}
.pr-card .card-vs > .item .pr-body .title {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.9375rem;
}
.pr-card .card-vs > .item .pr-body .info {
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: 0.375rem;
  color: var(--color--gray-666);
}
.pr-card .card-vs > .item .pr-body .co {
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: 0.25rem;
  color: var(--color--gray-999);
}
@media (max-width: 767px) {
  .pr-card .card-vs > .item .pr-img {
    width: 6.25rem;
    height: 6.25rem;
  }
  .pr-card .card-vs > .item {
    padding: 1.5rem 1rem 1rem 1rem;
  }

  .pr-card .card-vs > .item .pr-body {
    padding-top: 0.5rem;
  }
  .pr-card .card-vs > .item .pr-body .co {
    padding-top: 0;
  }
  @media (max-width: 767px) {
    .card-vs .vs {
      padding: 0.75rem;
    }
  }
}

/*common-content*/
.common-content {
  width: 100%;
  max-width: 72.5rem;
  margin: 0 auto;
}
.common-content > .title-wrap {
  padding-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.common-content > .title-wrap.flex {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
}
@media (max-width: 767px) {
  .common-content > .title-wrap .h1.text-center {
    text-align: left !important;
  }
  .common-content > .title-wrap.flex .h1 {
    font-size: 1.125rem;
  }
}
/*board-list*/
.board-list a {
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color--border-eee);
  gap: 1rem;
}

.board-list .content-wrap {
  flex: 1;
  min-width: 0;
}
.board-list a .title-wrap {
  display: flex;
  gap: 0.25rem;
}
.board-list a .title,
.board-list a .info {
  word-break: break-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.board-list a .title {
  font-weight: 600;
  color: var(--color--bk);
}
.board-list a .title-wrap .text-primary {
  font-size: 0.875rem;
}
.board-list a .title-wrap .text-primary,
.new {
  flex-shrink: 0;
}
.board-list a .info {
  color: var(--color--gray-666);
  font-size: 0.875rem;
  font-weight: 400;
}
.board-list a .date {
  font-size: 0.75rem;
  color: var(--color--gray-999);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  padding-top: 0.25rem;
  font-weight: 400;
}
.board-list a .date span {
  max-width: 50%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.board-list a .date span:nth-child(n + 2)::before {
  content: "";
  width: 1px;
  height: 0.625rem;
  display: inline-block;
  margin-right: 0.375rem;
  background-color: var(--color--border-ddd);
  vertical-align: middle;
  margin: -1px 0.375rem 0;
}

@media screen and (min-width: 1025px) {
  .board-list a:hover {
    background-color: var(--color--bg-hover);
  }
}
@media (max-width: 1024px) {
  .board-list a {
    padding: 1rem 0;
  }
}
@media (max-width: 767px) {
  .board-list a .title {
    font-size: 0.9375rem;
  }
}

/*new*/
.new {
  width: 0.5rem;
  height: 0.5rem;
  display: block;
  background: url("../images/ic-new.svg") no-repeat center/cover;
  margin-top: 0.25rem;
}

/*board-view*/
.board-view > .title-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color--bk);
}
.board-view > .title-wrap .title {
  font-size: 1.25rem;
  font-weight: 700;
}
.board-view > .title-wrap .info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 0.375rem;
  font-size: 0.875rem;
  color: var(--color--gray-999);
  column-gap: 0.375rem;
  row-gap: 0.25rem;
  font-weight: 400;
}
.board-view > .title-wrap .info > div {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.board-view > .title-wrap .info > div:nth-child(n + 2)::before {
  content: "";
  width: 1px;
  height: 0.625rem;
  background-color: var(--color--border-ddd);
}
.board-view > .title-wrap > .right {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.board-view > .title-wrap > .right-btn-ic {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
@media (max-width: 767px) {
  .board-view > .title-wrap .title {
    font-size: 1.125rem;
  }
  .board-view > .title-wrap .info {
    padding-top: 0.25rem;
    font-size: 0.75rem;
  }
  .board-view > .title-wrap .info > div {
    gap: 0.5rem;
  }
  .board-view > .title-wrap .info > div:nth-child(n + 2)::before {
    height: 0.5rem;
  }
  .board-view > .title-wrap {
    flex-wrap: wrap;
  }
  .board-view > .title-wrap > .right {
    width: 100%;
  }
  .board-view > .title-wrap.flex-nowrap {
    flex-wrap: nowrap;
  }
  .board-view > .title-wrap.flex-nowrap .right {
    width: auto;
  }
}

/*board-view-content*/
.board-view-content {
  padding-top: 1.5rem;
}
.board-view-content.border {
  padding: 1.5rem 0 2rem;
  border-bottom: 1px solid var(--color--border-eee);
}
.board-view-content > div:nth-child(n + 2) {
  padding-top: 2.5rem;
}
.board-view-content .text-box {
  min-height: 18.75rem;
}
.board-view-content .text-box p {
  line-height: 1.5;
  color: var(--color--gray-666);
  font-weight: normal;
}
.board-view-content .text-box p:nth-child(n + 2) {
  padding-top: 1rem;
}
.board-view-content .text-box img {
  max-width: 100%;
}
.board-view-content .total-wrap {
  border-bottom: 0;
}
.board-view-content .file-wrap .total-wrap {
  justify-content: flex-start;
  gap: 1rem;
}

.btn-save {
  font-size: 0.875rem;
  color: var(--color--gray-999);
  text-decoration: underline !important;
  font-weight: 600;
}

@media screen and (min-width: 1025px) {
  .btn-save:hover {
    color: var(--color--gray-666);
  }
}

.board-view-content .file-wrap .file-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.board-view-content .file-wrap .file-list a {
  display: flex;
  align-items: center;
  /* border: 1px solid var(--color--border-ddd); */
  padding: 0.625rem 0.875rem;
  border-radius: 0.25rem;
  background-color: var(--color--wh);
  background-color: #f5f5f5;
}
@media screen and (min-width: 1025px) {
  .board-view-content .file-wrap .file-list a:hover {
    background-color: #e9e9e9;
  }
}
.board-view-content .file-wrap .file-list .title-wrap {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  width: calc(100% - 1.125rem);
  padding-right: 0.5rem;
}
.board-view-content .file-wrap .file-list .title-wrap .title {
  font-size: 0.8125rem;
  color: var(--color--bk);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.board-view-content .file-wrap .file-list .title-wrap .date {
  font-size: 0.625rem;
  color: var(--color--gray-999);
}

@media (max-width: 767px) {
  .board-view-content .text-box {
    min-height: 6.25rem;
  }
  .board-view-content .text-box p {
    font-size: 0.9375rem;
  }
  .board-view-content > div:nth-child(n + 2) {
    padding-top: 2rem;
  }
  .board-view-content .total-num {
    font-size: 1rem;
  }
  .board-view-content .file-wrap .file-list {
    gap: 0.25rem;
  }
  .board-view-content .file-wrap .file-list a {
    padding: 0.5rem 0.75rem;
  }
}

/*sample-list*/
.sample-list {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}
.sample-list > .item {
  padding: 1.5rem !important;
  border-radius: 0.375rem;
  border: 1px solid var(--color--border-eee);
}

@media (max-width: 767px) {
  .sample-list {
    row-gap: 0;
  }
  .sample-list > .item {
    padding: 1rem 0 !important;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid var(--color--border-eee);
  }
  .sample-list > .item:first-child {
    padding-top: 0 !important;
  }
}

/*sample-date*/
.sample-list .sample-date {
  font-size: 0.875rem;
  color: var(--color--blue);
  padding: 0.375rem 0.75rem;
  border-radius: 100px;
  background-color: rgba(36, 85, 244, 0.08);
  display: inline-block;
  margin-top: 0.875rem;
}
@media (max-width: 767px) {
  .sample-list .sample-date {
    font-size: 0.75rem;
  }
}

/*.comment-wrap .file-wrap*/
.board-view-content .comment-wrap .file-wrap {
  padding-top: 1.5rem;
}
.board-view-content .comment-wrap .file-wrap .total-num {
  font-size: 0.875rem;
}
.board-view-content .comment-wrap .reply-list .file-wrap .file-list a {
  border: 1px solid var(--color--border-ddd);
  background-color: var(--color--wh);
}
@media screen and (min-width: 1025px) {
  .board-view-content .comment-wrap .reply-list .file-wrap .file-list a:hover {
    border-color: var(--color--gray-999);
  }
}

/*sample-editor*/
.sample-editor .upload-wrap {
  padding: 1rem 1rem 0 1rem;
}
.sample-editor .upload-area {
  min-height: 3.75rem;
}

.sample-editor .datepicker-wrap input {
  padding: 0;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--color--bk);
}
.sample-editor .datepicker {
  background-position-x: calc(100% - 0rem);
}
.sample-editor .comment-box .bottom {
  border-top: 0;
}

/*board-tabs-content*/
.board-tabs-content {
  padding-top: 1.5rem;
}
/*check-total-wrap*/
.check-total-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-left: 1rem;
}
@media screen and (max-width: 1024px) {
  .check-total-wrap {
    padding-left: 0;
  }
}

/*btn-pdf*/
.btn-pdf {
  color: var(--color--wh);
  background-color: #ff2116;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.btn-pdf::before {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  background: url(../images/ic-pdf-lg.svg) no-repeat center / cover;
  display: inline-block;
}
@media screen and (min-width: 1025px) {
  .btn-pdf:hover {
    background-color: #e31c13;
  }
}

/*manual-wrap*/
.manual-wrap img {
  max-width: 100%;
}

/*answer-box*/
.answer-box {
  background-color: #f5f8fd;
  padding: 1.5rem !important;
  margin-top: 1.5rem;
  border-radius: 1rem;
}
.answer-box .header {
  display: flex;
  gap: 1rem;
}
.answer-box .header .title-wrap {
  padding-top: 0.25rem;
}
.answer-box .header .title {
  flex: 1;
  min-width: 0;
  font-weight: 700;
}
.answer-box .header .date {
  font-size: 0.875rem;
  color: var(--color--gray-999);
  font-weight: 400;
}
.answer-box .header .answer {
  width: 3.125rem;
  height: 3.125rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: rgba(36, 85, 244, 0.16);
  flex-shrink: 0;
  color: var(--color--blue);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}
.answer-box .body {
  padding-top: 1rem;
  color: var(--color--gray-666);
  font-weight: 400;
  line-height: 1.5;
}
.answer-box .body p:nth-child(n + 2) {
  padding-top: 1rem;
}
.answer-box .body img {
  max-width: 100%;
}
@media (max-width: 767px) {
  .answer-box {
    padding: 1rem !important;
    margin-top: 1rem;
  }

  .answer-box .header .title-wrap {
    padding-top: 0.125rem;
  }
  .answer-box .header .title {
    font-size: 0.9375rem;
  }
  .answer-box .header .date {
    font-size: 0.75rem;
  }
  .answer-box .header .answer {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.25rem;
  }
  .answer-box .body {
    font-size: 0.9375rem;
  }
}

/*empty-wrap*/
.empty-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
  color: var(--color--gray-999);
  height: 25rem;
  border-bottom: 1px solid var(--color--border-eee);
}
.empty-wrap:before {
  content: "";
  width: 2rem;
  height: 2rem;
  background: url("../images/ic-empty-gray-xlg.svg") no-repeat center/cover;
  display: block;
}

/*swiper*/

.swiper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.swiper-slide {
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:root {
  --swiper-theme-color: #222 !important;
}

.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 0.375rem)) !important;
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 0.375rem)) !important;
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 0.2rem) !important;
}

/*modal-banner*/
.modal-banner-pagination.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: 3.375rem !important;
}

.modal-banner {
  background-color: rgb(0, 0, 0, 0.7);
}

.modal-banner .modal-inner {
  background: transparent;
}

.modal-banner-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 3rem;
  font-size: 0.875rem;
}

.modal-banner-footer a {
  color: #fff;
  font-weight: 500;
}

.modal-banner-footer .bottom-modal-close {
  display: flex;
  align-items: center;
}

.modal-banner-footer .bottom-modal-close:before {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  background-image: url(../images/ic-close-circle-wh-lg.svg);
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  margin-right: 0.25rem;
}
.modal-banner .modal-inner {
  padding: 0;
  border-radius: 0;
}

.modal-banner .noti-wrap {
  padding: 0.5rem 0.5rem 2rem 0.5rem;
  text-align: left;
  word-break: break-all;
}
.modal-banner .swiper-slide {
  background-color: var(--color--wh);
  height: auto;
  width: 100% !important;
}

.modal-banner .noti-wrap .title {
  font-size: 1.25rem;
  font-weight: 700;
  padding: 1rem 1rem 0.75rem 1rem;
}
.modal-banner .noti-wrap .info {
  color: var(--color--gray-666);
  font-weight: 400;
  font-size: 0.9375rem;
  max-height: 500px;
  min-height: 300px;
  height: 100% !important;
  padding: 0 1rem;
}
.modal-banner .noti-wrap .info p:nth-child(n + 2) {
  padding-top: 0.5rem;
}
@media (max-width: 767px) {
  .modal-banner .noti-wrap {
    padding: 0.25rem 0.25rem 2rem 0.25rem;
  }
  .modal-banner .noti-wrap .title {
    font-size: 1.125rem;
    padding: 0.5rem 0.5rem 0.625rem 0.5rem;
  }
  .modal-banner .noti-wrap .info {
    font-size: 0.875rem;
    padding: 0 0.5rem;
  }
}

/*img-empty-wrap*/
.img-empty-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  max-width: 72.5rem;
  margin: 0 auto;
  padding-top: 9.375rem;
  padding-right: 15rem;
}
section.active .img-empty-wrap {
  padding-right: 4.5rem;
}
.img-empty-wrap .title {
  font-size: 1.125rem;
  font-weight: 700;
}
.img-empty-wrap .info {
  color: var(--color--gray-999);
  padding-top: 0.375rem;
  font-weight: 400;
}
.img-empty-wrap .tag-badge {
  flex-wrap: wrap;
  justify-content: center;
}
.img-empty-wrap .img img {
  width: 100%;
  margin: 0 auto;
}
@media screen and (max-width: 1024px) {
  .img-empty-wrap {
    padding-top: 6.25rem;
    padding-right: 0;
  }
}
@media screen and (max-width: 767px) {
  .img-empty-wrap {
    padding-top: 5rem;
  }
  .img-empty-wrap .info {
    font-size: 0.875rem;
  }
  .img-empty-wrap .img img {
    width: 80%;
  }
}

/*img-upload-edit*/
.img-upload-edit img {
  max-width: 100%;
  margin: 0 auto;
}

/*pr-txt*/
.pr-txt {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
}
.pr-txt.pink-light {
  background-color: #ffe2e7;
  color: var(--color--primary);
}
.pr-txt.blue-light {
  background-color: #d2eaef;
  color: #62949f;
}
.pr-txt.orange {
  background-color: #fd932b;
  color: var(--color--wh);
}
.pr-txt.purple {
  background-color: #bd78ea;
  color: var(--color--wh);
}

.my-info-wrap .my-profile .img-wrap .pr-txt {
  font-size: 1.5rem;
}