@charset "UTF-8";
/* base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  outline: none;
}

html,
body {
  width: 100%;
}

html {
  height: 100%;
  min-height: 100vh;
  overflow-y: scroll;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  min-width: 320px;
  margin: 0;
}

body {
  font-family: "NanumSquareNeo", sans-serif;
  font-size: 14px;
  font-weight: 600;
  background: var(--gray-100);
  color: var(--gray-900);
  line-height: 100%;
  letter-spacing: -0.5px;
  padding: 0;
  margin: 0;
  -webkit-overflow-scrolling: touch;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
textarea,
p,
blockquote,
th,
td,
input,
select,
textarea,
button,
a,
span,
em {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "NanumSquareNeo", sans-serif;
  line-height: 100%;
}

strong {
  font-weight: 800;
}

input,
select,
textarea,
button,
label {
  font-size: 100%;
  vertical-align: middle;
  cursor: pointer;
}

*,
*:after,
*:before {
  box-sizing: border-box;
}

input {
  font-size: 16px;
  color: var(--black);
  font-weight: 800;
  border: none;
  background: var(--gray-200);
  height: 48px;
  padding: 16px;
  border-radius: 4px;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: border-color 0.3s ease;
  cursor: pointer;
}
input:disabled {
  background: var(--gray-300);
}
input:focus {
  background: var(--gray-300);
  color: var(--black);
}
input::-webkit-input-placeholder {
  font-size: clamp(12px, 3vw, 14px);
  color: var(--gray-600);
  vertical-align: middle;
  letter-spacing: -0.5px;
  font-weight: 500;
}
@media all and (max-width: 768px) {
  input {
    height: 42px;
    padding: 12px;
  }
}

textarea {
  vertical-align: middle;
  width: 100%;
  height: 150px;
  padding: 10px;
  border-radius: 0;
  line-height: 130%;
  text-align: left;
  color: var(--gray-800);
  border: 0px solid var(--gray-200);
  background: var(--gray-200);
  box-sizing: border-box;
  resize: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

textarea::-moz-placeholder {
  font-size: clamp(12px, 3vw, 14px);
  color: var(--gray-600);
  vertical-align: middle;
  letter-spacing: -1px;
  font-weight: 400;
}

textarea::placeholder {
  font-size: clamp(12px, 3vw, 14px);
  color: var(--gray-600);
  vertical-align: middle;
  letter-spacing: -1px;
  font-weight: 400;
}

fieldset,
img,
iframe {
  border: 0 none;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border-style: none;
}

em,
address {
  font-style: normal;
}

a {
  text-decoration: none;
  background-color: transparent;
  vertical-align: middle;
  -webkit-text-decoration-skip: objects;
  color: inherit;
  word-break: break-word;
  cursor: pointer;
}

a:hover,
a:active,
a:focus {
  text-decoration: none;
}

menu,
li {
  list-style: none;
}

button {
  font-weight: 600;
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  letter-spacing: -0.5px;
  text-align: center;
  text-decoration: none;
  border: none;
  background: transparent;
  line-height: 100%;
}

button,
input {
  overflow: visible;
}

caption {
  width: 0;
  height: 0;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  visibility: hidden;
}

i,
em,
address {
  font-style: normal;
}

label {
  cursor: pointer;
}

table {
  width: 100%;
  border-spacing: 0;
  border-collapse: 0;
  color: inherit;
  table-layout: fixed;
}

table td {
  word-wrap: break-word;
}

/*체크박스*/
input[type=checkbox] {
  display: none !important;
}
input[type=checkbox] + .checkBox {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
input[type=checkbox] + .checkBox > span {
  display: inline-block;
  background: url("/project/c3/images/checkbox-off.svg") no-repeat center;
  background-size: 100%;
  width: 20px !important;
  height: 20px !important;
  cursor: pointer;
}
input[type=checkbox] + .checkBox .txt {
  width: 80%;
  font-size: 15px;
}
input[type=checkbox] + .checkBox .txt > em {
  box-shadow: inset 0 -5px 0 yellow;
}
input[type=checkbox]:checked + .checkBox span {
  background: url("/project/c3/images/checkbox-on.svg") no-repeat;
  background-size: 100% auto;
}

select {
  border: 1px solid var(--gray200);
  background: var(--white);
  height: 52px;
  padding: 0 3px 0 14px;
  border-radius: 4px;
  cursor: pointer;
  background: url("../svg/arrow-down.svg") no-repeat right 14px center;
  background-size: 16px 16px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  box-shadow: none;
}
select::-ms-expand {
  display: none;
}

/* 라디오 버튼*/
input[type=radio] {
  display: none !important;
}
input[type=radio] + .rdo-label:last-child {
  font-weight: 500;
}
input[type=radio] + .rdo-label > span {
  display: inline-block;
  background: url("/project/c3/images/radio-box-off.svg") no-repeat center;
  background-size: 100%;
  width: 20px;
  height: 20px;
  margin: -3px 8px 0 0;
  vertical-align: middle;
  cursor: pointer;
}
input[type=radio]:checked + .rdo-label span {
  background: url("/project/c3/images/radio-box-on.svg") no-repeat center;
  background-size: 100%;
}

/**/
.radio-new::after {
  content: "";
  display: table;
  clear: both;
}
.radio-new input[type=radio] {
  display: none;
}
.radio-new input[type=radio] + label {
  display: inline-block;
  cursor: pointer;
  width: 100%;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  /*margin-right:10px;*/
}
.radio-new input[type=radio] + label {
  color: var(--color300);
  background: 1px solid var(--gray-800);
  border-radius: 6px;
  border: 1px solid var(--gray-800);
}
.radio-new input[type=radio]:checked + label {
  border: 1px solid var(--secondary-400, #e8ff59);
  background: var(--secondary-900, #2d330a);
  color: var(--secondary-500);
}

/* 드롭다운,셀렉트 박스 */
.dropdown-menu {
  /* width: 100%; */
  height: 48px !important;
  padding: 0 22px 0 10px;
  font-size: clamp(12px, 3vw, 14px);
  font-weight: 500;
  font-family: inherit;
  background: url(/project/c3/images/arrow-down-gray.svg) no-repeat 99% 50%/20px auto;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: var(--gray-800);
  border: none;
  background-color: var(--gray-200);
  border-radius: 0;
  outline: none !important;
}
.dropdown-menu > option {
  font-weight: 500;
  background: var(--white);
  padding: 3px 0;
  color: var(--gray-800);
  border-radius: 0 !important;
}
.dropdown-menu::-ms-expand {
  display: none;
}
@media all and (max-width: 768px) {
  .dropdown-menu {
    height: 42px;
  }
}

/*기본토글*/
.toggleWrap .toggle-Switch {
  width: 38px;
  height: 22px;
  display: block;
  position: relative;
  border-radius: 30px;
  background-color: var(--gray-500);
  cursor: pointer;
}
.toggleWrap .toggle-Switch .toggle-Button {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  left: 3px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--white);
}
.toggleWrap #toggle:checked ~ .toggle-Switch {
  background: var(--primary-500);
}
.toggleWrap #toggle:checked ~ .toggle-Switch .toggle-Button {
  left: calc(100% - 20px);
  background: var(--white);
}
.toggleWrap .toggle-Switch,
.toggleWrap .toggle-Button {
  transition: all 0.2s ease-in;
}

/***root***********************************************************************************/
:root {
  --white: #fff;
  --black: #000;
  --red: #ff3e3e;
  --primary-100: #ddddff;
  --primary-200: #bcbbff;
  --primary-300: #9a99ff;
  --primary-400: #7977ff;
  --primary-500: #5755ff;
  --primary-600: #4644cc;
  --primary-700: #343399;
  --primary-800: #232266;
  --primary-900: #111133;
  --secondary-orange-500: #fa622f;
  --secondary-orange-600: #ff3e3e;
  --filter-red: invert(45%) sepia(81%) saturate(4115%) hue-rotate(335deg)
      brightness(102%) contrast(124%);
  --gray-900: #1f1f25;
  --gray-800: #33333d;
  --gray-700: #5f616d;
  --gray-600: #868793;
  --gray-500: #979aa3;
  --gray-400: #b6b7be;
  --gray-300: #d9dbe0;
  --gray-200: #e7e9eb;
  --gray-150: #f1f3f8;
  --gray-100: #f7f7f8;
  --gray-50: #efeff0;
  --rgb-primary-500: 87, 85, 255;
  --rgb-white: 255, 255, 255;
  --rgb-black: 0, 0, 0;
  --filter-white: invert(97%) sepia(97%) saturate(2%) hue-rotate(82deg)
      brightness(103%) contrast(100%);
  --filter-black: invert(0%) sepia(100%) saturate(0%) hue-rotate(21deg)
      brightness(97%) contrast(103%);
  --filter-primary-600: invert(21%) sepia(56%) saturate(3257%)
      hue-rotate(234deg) brightness(96%) contrast(92%);
  --filter-gray-900: invert(8%) sepia(7%) saturate(1453%) hue-rotate(202deg)
      brightness(96%) contrast(102%);
  --filter-gray-800: invert(14%) sepia(4%) saturate(1430%) hue-rotate(202deg)
      brightness(93%) contrast(100%);
  --filter-gray-700: invert(32%) sepia(4%) saturate(606%) hue-rotate(202deg)
      brightness(91%) contrast(89%);
  --filter-gray-600: invert(50%) sepia(4%) saturate(360%) hue-rotate(202deg)
      brightness(90%) contrast(85%);
  --filter-gray-500: invert(57%) sepia(4%) saturate(311%) hue-rotate(202deg)
      brightness(92%) contrast(85%);
  --filter-gray-400: invert(70%) sepia(4%) saturate(228%) hue-rotate(202deg)
      brightness(95%) contrast(85%);
  --filter-gray-300: invert(85%) sepia(2%) saturate(170%) hue-rotate(202deg)
      brightness(98%) contrast(85%);
  --filter-gray-200: invert(91%) sepia(2%) saturate(100%) hue-rotate(202deg)
      brightness(100%) contrast(85%);
  --filter-gray-150: invert(95%) sepia(1%) saturate(50%) hue-rotate(202deg)
      brightness(101%) contrast(85%);
  --filter-gray-100: invert(97%) sepia(0%) saturate(0%) hue-rotate(202deg)
      brightness(102%) contrast(85%);
  --filter-gray-50: invert(94%) sepia(1%) saturate(57%) hue-rotate(202deg)
      brightness(102%) contrast(85%);
}

/*********************************************************************************************************************/
.gray-300-color {
  color: var(--gray-300);
}

.color-primay-500 {
  color: var(--primary-500) !important;
}

.color-secondary-orange-500 {
  color: var(--secondary-orange-500) !important;
}

.color-white {
  color: var(--white) !important;
}

.cover-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/************************/
.d-flex {
  display: flex;
}

.transparent {
  background: transparent !important;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-start {
  justify-content: start;
}

.margin-left-auto {
  margin-left: auto;
}

.flex-direction {
  flex-direction: column !important;
}

.fit-content {
  width: -moz-fit-content !important;
  width: fit-content !important;
}

/***/
.p-t-0 {
  padding-top: 0 !important;
}

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

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

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

/*************** 버튼 ******************************************************************************************************************************/
.pop-bwRow-wrap {
  width: 100%;
  display: flex;
  gap: 8px;
  padding: 30px 0 0;
}
.pop-bwRow-wrap.fit-content {
  width: 200px;
  margin: 0 auto;
}

.bwRow-wrap {
  width: 100%;
  display: flex;
  gap: 8px;
  padding: 30px 0 0;
}
.bwRow-wrap > a {
  width: 100%;
}
.bwRow-wrap.fit-content {
  width: 350px !important;
  margin: 0 auto;
}

/* 버튼 사이즈 */
.btn-size-Large {
  height: 52px;
  font-size: 17px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  padding: 0 16px;
}

.btn-size-Medium {
  height: 42px;
  font-size: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  padding: 0 16px;
}

.btn-size-Small {
  height: 36px;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  padding: 0 10px;
}

.btn-size-Xsmall {
  height: 28px;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 8px;
  border-radius: 4px;
  padding: 0 10px;
}

/* 버튼 색상 */
.btn-primary {
  background: var(--primary-500);
  color: var(--white);
}

.btn-primary-line {
  border: 1px solid var(--primary-500);
  background: var(--white);
  color: var(--primary-500);
}

.btn-white-line {
  border: 1px solid var(--gray-300);
  background: var(--white);
  color: var(--gray-800);
}

.btn-disabled {
  background: var(--gray-900);
  color: var(--gray-700);
}

.btn-cancel {
  background: var(--gray-800);
  color: var(--gray-300);
}

.btn-red {
  background: var(--red);
  color: var(--white);
}

.btn-gray-900 {
  background: var(--gray-900);
  color: var(--gray-300);
}

.btn-gray-300 {
  background: var(--gray-300);
  color: var(--gray-900);
}

.btn-gray-300-line {
  background: var(--white);
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
}

#container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  margin: 0 auto;
}

.idx-content-body {
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding-top: 210px;
  padding-bottom: 70px;
}

.main-content-body {
  position: relative;
  height: 100%;
  min-height: 100vh;
  padding-top: 210px;
  padding-bottom: 70px;
}

/****************************************************************************************************************/
/********공통사항************************************************************************************************/
.row-box {
  width: 1380px !important;
  margin: 0 auto !important;
  /* max-width: 100%;
  min-width: 320px; */
  /* padding-left: 16px;
  padding-right: 16px; */
}

/***/
.h1-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 26px;
}
.h1-title-wrap .h1 {
  font-size: 34px;
  letter-spacing: -2px;
  font-weight: 900;
}
.h1-title-wrap .description {
  font-size: 18px;
  line-height: 1.4;
  color: var(--gray-700);
}
.h1-title-wrap.center {
  align-items: center;
}

.h2-title-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 26px;
  margin-bottom: 26px;
  font-weight: 800;
  letter-spacing: -1.2px;
}
.h2-title-wrap .search-number {
  font-size: 14px;
  color: var(--gray-600);
}
.h2-title-wrap .desc {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.7px;
  color: var(--gray-600);
}

.h3-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  margin-bottom: 16px;
  font-weight: 700;
}

/*뱃지 세트*/
.badge-group {
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 100;
}
.badge-group > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 26px;
  padding: 0 8px 0 5px;
  border-radius: 4px;
  font-size: 13px;
  width: -moz-fit-content;
  width: fit-content;
}
.badge-group .badge-rec {
  color: var(--white);
  background: var(--primary-500);
}
.badge-group .badge-rec::before {
  content: "🎯";
}
.badge-group .badge-close {
  background: rgb(var(--rgb-white), 30%);
  color: var(--gray-700);
}
.badge-group .badge-close::before {
  content: "💤";
}
.badge-group .badge-ing {
  color: var(--red);
  background: #ffd2c3;
}
.badge-group .badge-premium {
  background: #fff0d8;
  color: #c77420;
}

/**/
.sns-ico-group > span, .sns-ico-group > a {
  display: flex;
  font-size: 0;
}
.sns-ico-group > span::before, .sns-ico-group > a::before {
  width: 22px;
  height: 22px;
  display: block;
  border-radius: 6px;
  overflow: hidden;
}
.sns-ico-group.button {
  display: flex;
  gap: 10px;
}
.sns-ico-group.button > a {
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 14px;
  border-radius: 100px;
  border: 1px solid var(--gray-200);
  padding: 8px 16px;
}
.sns-ico-group .ico-instagram::before {
  content: "";
  background: url("/project/c3/images/sns-instagram.png") no-repeat;
  background-size: 100%;
}
.sns-ico-group .ico-naver::before {
  content: "";
  background: url("/project/c3/images/sns-naver.png") no-repeat;
  background-size: 100%;
}
.sns-ico-group .ico-youtube::before {
  content: "";
  background: url("/project/c3/images/sns-youtube.png") no-repeat;
  background-size: 100%;
}
.sns-ico-group .ico-kakao::before {
  content: "";
  background: url("/project/c3/images/sns-kakao.png") no-repeat;
  background-size: 100%;
}

/* 찜하기 아이콘 */
.badge-zzim {
  display: flex;
}
.badge-zzim .trigger[type=checkbox] {
  display: none !important;
}
.badge-zzim .trigger[type=checkbox] + .Link span {
  display: inline-block;
  background: url("/project/c3/images/ico-zzim-off.svg") no-repeat center;
  background-size: 100%;
  width: 28px;
  height: 28px;
  filter: var(--filter-gray-700);
  cursor: pointer;
}
.badge-zzim .trigger[type=checkbox]:checked + .Link span {
  background: url("/project/c3/images/ico-zzim-on.svg") no-repeat center;
  background-size: 100%;
  filter: var(--filter-red);
}

/**/
.filter-container {
  display: flex;
  gap: 4px;
}
.filter-container > a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-600);
  font-size: 14px;
  gap: 4px;
}
.filter-container > a::after {
  content: "ㅣ";
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-300);
}
.filter-container > a:last-child::after {
  all: unset;
}
.filter-container .active {
  color: var(--gray-900);
  font-weight: 700;
}

/**/
.common-tag {
  display: flex;
  gap: 4px;
}
.common-tag > span {
  display: flex;
  align-items: center;
  border: 1px solid var(--gray-200);
  height: 24px;
  padding: 0 10px;
  border-radius: 100px;
  color: var(--gray-700);
  font-size: 12px;
}

/***/
.fix-dot {
  position: relative;
}
.fix-dot::after {
  content: "●";
  font-size: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--secondary-orange-500);
  position: absolute;
  top: -4px;
  right: -10px;
}

/**/
.btn-row-wrap {
  display: flex;
  gap: 6px;
}
.btn-row-wrap > a {
  width: 100%;
}

/*****************************************************************************************************************/
/****** header ***************************************************************************************************/
.sec-head-ad-wrap {
  background: var(--primary-900);
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
}
.sec-head-ad-wrap .top-advertisement {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sec-head-ad-wrap .btn-close {
  font-size: 0;
}
.sec-head-ad-wrap .btn-close::after {
  content: "";
  background: url("/project/c3/images/ico-close.svg") no-repeat center;
  background-size: 100%;
  width: 15px;
  height: 15px;
  display: flex;
  filter: var(--filter-white);
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
}

#header {
  background: var(--white);
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 999;
}
#header .head-logo-container {
  padding: 14px 0 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#header .logo {
  background: url("/project/c3/images/logo.png") no-repeat center;
  width: 220px;
  height: 46px;
  background-size: 100%;
  text-indent: -9999999999px;
  display: flex;
}
#header .sec-gnb-wrap {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#header .top-header-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#header .top-header-wrap .nav-menu-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  gap: 36px;
}
#header .top-header-wrap .nav-menu-list > a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 54px;
  font-size: 17px;
  font-weight: 800;
  flex-grow: 1 !important;
}
#header .top-header-wrap .nav-menu-list > a.active {
  font-weight: 900;
  color: var(--primary-500);
}
#header .top-header-wrap .utill-menu {
  display: flex;
  gap: 6px;
}
#header .top-header-wrap .utill-menu > a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  height: 30px;
  padding: 0 20px;
}
#header .top-header-wrap .utill-menu .btn-my {
  background: var(--primary-500);
  color: var(--white);
}
#header .top-header-wrap .utill-menu .btn-moonplug {
  border: 1px solid var(--gray-300);
}

/***/
.user-wrap {
  position: relative;
  display: flex;
  gap: 14px;
}
.user-wrap > a {
  position: relative;
}
.user-wrap > a::after {
  content: "";
  position: absolute;
  top: 12px;
  right: -10px;
  width: 4px;
  height: 4px;
  background: var(--color300);
  border-radius: 100px;
}
.user-wrap .btn-join {
  color: var(--primary-500);
}

/****************************************************************************************************************/
/****** footer ***************************************************************************************************/
#footer {
  background: var(--white);
  padding: 20px 0;
  text-align: left;
}
#footer .address {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--gray-600);
  font-size: 12px;
}
#footer .address > li {
  display: flex;
  gap: 6px;
}
#footer .address > li.company {
  font-size: 14px;
  padding-bottom: 4px;
}
#footer .address > li > span {
  position: relative;
  display: flex;
  gap: 6px;
}
#footer .address > li > span::after {
  content: "ㅣ";
  color: var(--gray-200);
}
#footer .address > li > span:last-child::after {
  all: unset;
}

/****************************************************************************************************************/
/****** 비주얼 영역 ***************************************************************************************************/
.mySwiper-header-visual {
  height: 450px;
}
.mySwiper-header-visual .swiper-button-next,
.mySwiper-header-visual .swiper-button-prev {
  color: var(--gray-800);
}
.mySwiper-header-visual .swiper-wrapper .swiper-slide > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
  overflow: hidden;
}

/****************************************************************************************************************/
/****** 베스트 아이템 *******************************************************************************************/
.mySwiper-default .swiper-button-next,
.mySwiper-default .swiper-button-prev {
  color: var(--gray-800);
  top: 32%;
}
.mySwiper-default .swiper-button-next:after,
.mySwiper-default .swiper-button-prev:after {
  font-size: 18px;
}

.thumb-card-ty {
  position: relative;
  height: 410px;
  cursor: pointer;
}
.thumb-card-ty .badge-group {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 8px;
}
.thumb-card-ty .item-photo-box {
  position: relative;
  margin-bottom: 16px;
  border-radius: 6px;
  overflow: hidden;
}
.thumb-card-ty .badge-zzim {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
}
.thumb-card-ty .item-info-area {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.thumb-card-ty .item-info-area .pro-name {
  font-size: 14px;
  line-height: 1.3;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
  word-break: keep-all;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.thumb-card-ty .item-info-area .pro-info-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.thumb-card-ty .item-info-area .pro-info-box .pf-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}
.thumb-card-ty .item-info-area .pro-info-box .pf-item .subj {
  display: flex;
  gap: 8px;
  color: var(--gray-700);
}
.thumb-card-ty .item-info-area .pro-info-box .pf-item .cont {
  display: flex;
  gap: 3px;
  color: var(--gray-600);
  letter-spacing: -1px;
}
.thumb-card-ty .item-info-area .pro-info-box .pf-item .d-day {
  font-weight: 800;
  color: var(--secondary-orange-500);
}
.thumb-card-ty .item-info-area .pro-info-box .pf-item .date {
  color: var(--gray-900);
  font-weight: 800;
}
.thumb-card-ty .item-info-area .pro-info-box .pf-item .person1 {
  color: var(--secondary-orange-500);
}
.thumb-card-ty .item-info-area .pro-info-box .pf-item .price {
  font-weight: 900;
  color: var(--primary-500);
}
.thumb-card-ty .item-info-area .pro-info-box .pf-item .price-before {
  text-decoration: line-through;
  font-weight: 600;
  font-size: 12px;
}
.thumb-card-ty .item-info-area .pro-info-box .pf-item .price-before .won {
  font-size: 13px;
  padding-left: 1px;
  display: inline-block;
}
.thumb-card-ty .item-info-area .pro-info-box .pf-item .price-after {
  font-weight: 800;
  color: var(--gray-900);
}
.thumb-card-ty .item-info-area .pro-info-box .pf-item .price-after .won {
  padding-left: 1px;
  display: inline-block;
}
.thumb-card-ty .item-info-area .pro-info-box .pf-item .sale {
  font-weight: 800;
  color: var(--secondary-orange-500);
}

/****************************************************************************************************************/
/****** 매치업 핫 인플루언서 ***********************************************************************************/
.viewer-cardType-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  /**크리에이터 페이지**/
}
.viewer-cardType-wrap.col-align {
  display: flex;
  flex-direction: column;
}
.viewer-cardType-wrap .cc--item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--white);
  border-radius: 6px;
  border: 1px solid var(--gray-300);
  padding: 16px;
}
.viewer-cardType-wrap .container-info-area {
  display: flex;
  align-items: center;
  gap: 16px;
}
.viewer-cardType-wrap .row-align {
  display: flex;
  flex-direction: row !important;
}
.viewer-cardType-wrap .row-align .container-stats-area {
  margin-left: 20px;
  gap: 30px;
  padding: 0 20px !important;
}
.viewer-cardType-wrap .badge-zzim {
  margin-left: auto;
}
.viewer-cardType-wrap .user-photo {
  position: relative;
  display: flex;
  width: 80px;
  height: 80px;
}
.viewer-cardType-wrap .user-photo .cover-img {
  border-radius: 100px;
  overflow: hidden;
}
.viewer-cardType-wrap .badge-ranking {
  position: absolute;
  top: 0;
  left: -4px;
  border-radius: 4px;
  background: #feb63d;
  transform: skewX(-7deg);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  font-size: 13px;
  font-weight: 800;
}
.viewer-cardType-wrap .user-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.viewer-cardType-wrap .user-info .user-id {
  font-weight: 800;
  font-size: 16px;
}
.viewer-cardType-wrap .user-info .sns-ico-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
.viewer-cardType-wrap .user-info .sns-ico-group > span {
  align-items: center;
  gap: 4px;
  font-size: 14px !important;
}
.viewer-cardType-wrap .user-info .sns-ico-group > span::before {
  width: 18px;
  height: 18px;
  border-radius: 4px;
}
.viewer-cardType-wrap .container-stats-area {
  display: flex;
  justify-content: space-between;
  background: var(--gray-100);
  border-radius: 4px;
  padding: 10px;
  gap: 10px;
}
.viewer-cardType-wrap .container-stats-area > p {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex: 1 0 auto;
}
.viewer-cardType-wrap .container-stats-area .number {
  display: flex;
  gap: 6px;
}
.viewer-cardType-wrap .container-stats-area .number::before {
  content: "";
  width: 15px;
  height: 15px;
  background-size: 100%;
}
.viewer-cardType-wrap .container-stats-area .likes .number::before {
  background: url("/project/c3/images/ico-heart.svg") no-repeat;
}
.viewer-cardType-wrap .container-stats-area .partnership .number::before {
  background: url("/project/c3/images/ico-user.svg") no-repeat;
}
.viewer-cardType-wrap .container-stats-area .revenue .number::before {
  background: url("/project/c3/images/ico-graph.svg") no-repeat;
}
.viewer-cardType-wrap .container-stats-area .proposal .number::before {
  background: url("/project/c3/images/ico-dollar.svg") no-repeat;
}

/****************************************************************************************************************/
/****** 사이드/side **********************************************************************************************/
.detail-layout-container {
  display: flex;
  -moz-column-gap: 50px;
       column-gap: 50px;
  height: 100%;
  width: 100%;
}
.detail-layout-container .side-wing-bar {
  /* border: 1px solid #000; */
  width: 250px;
}
.detail-layout-container .main-con-wrap {
  /* border: 1px solid #000; */
  width: calc(1350px - 250px);
}

.my-layout-container {
  display: flex;
  flex-direction: column;
}
.my-layout-container .flex-row {
  display: flex;
  gap: 30px;
}
.my-layout-container .flex-col {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.my-layout-container .my-side-wing-bar {
  width: 450px;
  background: var(--white);
  border-radius: 8px;
  border: 1px solid var(--gray-300);
}
.my-layout-container .my-main-con-wrap {
  width: calc(1350px - 460px);
}
.my-layout-container .prd-img-wrap {
  width: 700px;
  background: var(--white);
  border-radius: 8px;
  border: 1px solid var(--gray-300);
  padding: 30px;
}
.my-layout-container .prd-info-wrap {
  position: relative;
  width: calc(100% - 600px);
  background: var(--white);
  border-radius: 8px;
  border: 1px solid var(--gray-300);
  padding: 30px;
}

/**/
.side-filter-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 42px;
  border-bottom: 1px solid var(--gray-300);
  font-weight: 800;
  font-size: 17px;
}
.side-filter-title .btn-filter-reset {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  cursor: pointer;
  color: var(--gray-600);
  border: none;
  font-weight: 500;
}
.side-filter-title .btn-filter-reset::hover {
  background-color: #0056b3;
}
.side-filter-title .btn-filter-reset .reset-icon {
  width: 18px;
  height: 18px;
  fill: var(--gray-300);
}
.side-filter-title .btn-filter-reset .rotate {
  animation: spin 0.5s linear;
  fill: var(--gray-900);
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/***아코디언 메뉴****/
.accordion-menu {
  width: 100%;
}
.accordion-menu .acc-item-wrap.open .dropdownlink {
  font-weight: 800;
  color: var(--black);
}
.accordion-menu .acc-item-wrap.open .dropdownlink::after {
  transform: rotate(180deg);
  filter: var(--filter-gray-900);
}
.accordion-menu .acc-item-wrap .dropdownlink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  position: relative;
  transition: all 0.4s ease-out;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  font-size: 15px;
  font-weight: 800;
}
.accordion-menu .acc-item-wrap .dropdownlink::after {
  content: "";
  background: url("/project/c3/images/arrow-top.svg") no-repeat center;
  width: 12px;
  height: 12px;
  filter: var(--filter-gray-300);
}
.accordion-menu .submenuItems {
  display: none;
  padding: 4px 0;
}
.accordion-menu .submenuItems .cate-itm {
  color: var(--gray-700);
}
.accordion-menu .submenuItems .cate-itm > a {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  font-size: 13px;
  transition: all 0.4s ease-out;
}
.accordion-menu .submenuItems .cate-itm > a .number {
  color: var(--gray-500);
  font-size: 12px;
}
.accordion-menu .submenuItems .cate-itm > a::before {
  content: "";
  background: url("/project/c3/images/ico-ellipse-check.svg") no-repeat center;
  background-size: 100%;
  width: 14px;
  height: 14px;
  filter: var(--filter-gray-300);
  display: flex;
}
.accordion-menu .submenuItems .cate-itm > a.active::before {
  filter: var(--filter-gray-900);
}
.accordion-menu .border-top {
  border-top: 1px solid var(--gray-300);
}

/****** ai 카드  ***************************************************************************************************/
.sec-sub-header-area {
  height: 200px;
  margin-bottom: 50px;
}

.mySwiper-countdown {
  width: 100%;
  margin: 70px 0 !important;
}
.mySwiper-countdown .swiper-button-next,
.mySwiper-countdown .swiper-button-prev {
  color: var(--primary-500);
  background: rgb(var(--rgb-white), 20%);
  border-radius: 100px;
  width: 50px;
  height: 50px;
}
.mySwiper-countdown .swiper-button-next:after,
.mySwiper-countdown .swiper-button-prev:after {
  font-size: 22px;
}
.mySwiper-countdown .swiper-button-next.swiper-button-disabled,
.mySwiper-countdown .swiper-button-prev.swiper-button-disabled {
  color: var(--gray-400);
  opacity: 1;
}

.countdown-item {
  position: relative;
  display: flex;
  border-radius: 8px;
  background: var(--white);
  overflow: hidden;
  border: 1px solid var(--gray-300);
}
.countdown-item .thumb-box {
  width: 448px;
  height: 448px;
  position: relative;
  overflow: hidden;
}
.countdown-item .thumb-box .overlay {
  position: absolute;
  left: 0px;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 40px;
  color: var(--white);
}
.countdown-item .product-info-area {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap: 30px;
  position: relative;
  flex: 1 0 0;
  padding: 50px 60px;
}
.countdown-item .product-info-area .heading-title {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}
.countdown-item .product-info-area .heading-title .heading-1 {
  font-size: 26px;
  font-weight: 800;
}
.countdown-item .product-info-area .heading-title .heading-2 {
  font-size: 15px;
  color: var(--gray-600);
}
.countdown-item .product-info-area .time-alarm {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 900;
  position: relative;
  font-size: 32px;
}
.countdown-item .product-info-area .time-alarm::before {
  content: "";
  background: url("/project/c3/images/ico-alarm.svg") no-repeat center;
  width: 36px;
  height: 36px;
  filter: var(--filter-primary-600);
}
.countdown-item .product-info-area .pro-name-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.countdown-item .product-info-area .pro-name-area .pro-heading {
  font-size: 17px;
  font-weight: 800;
}
.countdown-item .product-info-area .pro-name-area .pro-caption {
  font-size: 14px;
  color: var(--gray-600);
}
.countdown-item .product-info-area .price-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.countdown-item .product-info-area .price-box .before-price {
  color: var(--gray-500);
  font-size: 14px;
  text-decoration: line-through;
  position: relative;
  display: flex;
  align-items: center;
}
.countdown-item .product-info-area .price-box .after--cont {
  display: flex;
  align-items: center;
  gap: 10px;
}
.countdown-item .product-info-area .price-box .after--cont .after-price {
  display: flex;
  font-size: 20px;
  align-items: center;
  font-weight: 900;
}
.countdown-item .product-info-area .price-box .after--cont .sale {
  color: #fa622f;
  font-size: 20px;
  display: flex;
  align-items: center;
  font-weight: 900;
}

/**/
.sub-menu-list > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  height: 54px;
  padding: 0px 16px;
  border-bottom: 1px solid var(--gray-200);
  font-size: 15px;
}
.sub-menu-list > a::after {
  content: "";
  background: url("/project/c3/images/arrow-right.svg") no-repeat center;
  background-size: 100%;
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: var(--filter-gray-400);
}
.sub-menu-list .active {
  background: var(--gray-200);
}
.sub-menu-list .active::after {
  filter: var(--filter-gray-900);
}

.side-cs-link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: rgb(var(--rgb-primary-500), 10%);
  margin-top: 50px;
}
.side-cs-link > h1 {
  font-size: 15px;
  font-weight: 800;
}
.side-cs-link > h2 {
  font-size: 13px;
}

/****** 카드리스트 ***********************************************************************************************/
.cardList-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px 20px;
}

/****************************************************************************************************************/
/****** 게시판 **************************************************************************************************/
/*아코디언 스타일 게시판*/
.notice-board .acc--head,
.notice-board .button-acc-title {
  grid-template-columns: 1.2fr 8fr 1fr 1fr;
}

.faq-board .acc--head,
.faq-board .button-acc-title {
  grid-template-columns: 0.7fr 1.5fr 8fr;
}

.inquiry-board .acc--head,
.inquiry-board .button-acc-title {
  grid-template-columns: 0.7fr 7fr 1fr 1.2fr 1fr;
}

/**/
.accordion-board-container .acc--head {
  display: grid;
  align-items: center;
  justify-items: center;
  height: 54px;
  padding: 0 !important;
  background: var(--gray-300);
  border-top: 1px solid var(--gray-400);
  border-bottom: 1px solid var(--gray-400);
}
.accordion-board-container .acc--head .th {
  display: flex;
  justify-content: center;
  position: relative;
  width: 100%;
  color: var(--black);
  padding: 0 10px;
}
.accordion-board-container .acc--head .th::after {
  content: "";
  width: 1px;
  height: 54px;
  background: var(--gray-400);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(-50%, -50%);
}
.accordion-board-container .acc--head .th:last-child::after {
  all: unset;
}

.accordion-caution .button-acc-title {
  display: grid;
  align-items: center;
  justify-items: center;
  position: relative;
  width: 100%;
  height: 54px;
  font-size: 16px;
  border-bottom: 1px solid var(--gray-200);
  transition: all 0.4s ease-out;
  background: var(--white);
}
.accordion-caution .button-acc-title.active, .accordion-caution .button-acc-title:hover {
  background: rgb(var(--rgb-primary-500), 5%);
}
.accordion-caution .button-acc-title > p {
  position: relative;
  display: flex;
  width: 100%;
  color: var(--gray-700);
  font-size: 13px;
  padding: 0 10px;
}
.accordion-caution .button-acc-title > p::after {
  content: "";
  width: 1px;
  height: 52px;
  background: var(--gray-300);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(-50%, -50%);
}
.accordion-caution .button-acc-title > p:last-child::after {
  all: unset;
}
.accordion-caution .button-acc-title .title {
  justify-items: start;
  font-size: 15px;
  color: var(--gray-900);
}
.accordion-caution .button-acc-title .pending {
  color: var(--gray-800);
}
.accordion-caution .button-acc-title .complete {
  color: var(--secondary-orange-500);
}
.accordion-caution .button-acc-title > a {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 5px;
  border-radius: 3px;
  font-size: 12px;
  background: var(--white);
}
.accordion-caution .button-acc-title .btn-edit {
  border: 1px solid var(--primary-500);
  color: var(--primary-500);
}
.accordion-caution .button-acc-title .btn-delete {
  color: var(--red);
  border: 1px solid var(--red);
}
.accordion-caution .content {
  display: block;
}

.acc-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  font-size: 16px;
  line-height: 130%;
  color: var(--gray-700);
}
.acc-content .in-con-box {
  border-bottom: 1px solid var(--gray-200);
  background: var(--white);
  padding: 20px;
  line-height: 1.8;
}
.acc-content .in-con-box .event-img {
  padding-top: 30px;
}
.acc-content .text-in-content {
  line-height: 1.8;
}
.acc-content .reply-content {
  margin-top: 20px;
  background: var(--gray-100);
  gap: 16px;
  padding: 14px 20px;
  color: var(--gray-900);
}
.acc-content .reply-content .fix-utill-info {
  display: flex;
  gap: 4px;
  padding-bottom: 10px;
}
.acc-content .reply-content .fix-utill-info .write {
  color: var(--gray-900);
  font-size: 12px;
}
.acc-content .reply-content .fix-utill-info .date {
  color: var(--gray-600);
  font-size: 12px;
}

/****페이지네이션 ******/
.pagination {
  display: flex;
  text-align: center;
  justify-content: center;
  gap: 6px;
  font-size: 0;
  padding-top: 50px;
}
.pagination a {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  width: 36px;
  height: 36px;
  font-family: "Montserrat", sans-serif;
  transition: background-color 0.3s;
  border: 1px solid var(--gray-300);
  background: var(--white);
  border-radius: 4px;
}
.pagination a.on {
  background: var(--primary-500);
  color: var(--white);
  border: 1px solid var(--primary-500);
}
.pagination .disabled {
  background: var(--gray-300);
  border: 0;
}
.pagination .disabled i {
  filter: var(--filter-gray-400) !important;
}
.pagination .active {
  background: var(--white);
  border: 0;
  border: 1px solid var(--primary-500);
}
.pagination .active i {
  filter: var(--filter-primary-500);
}
.pagination .angle-left {
  background: url("/project/c3/images/arrow-left.svg") no-repeat center;
  background-size: 100%;
  display: inline-block;
  width: 14px;
  height: 14px;
}
.pagination .angle-right {
  background: url("/project/c3/images/arrow-right.svg") no-repeat center;
  background-size: 100%;
  display: inline-block;
  width: 14px;
  height: 14px;
}

/*********************************************************************************************************************/
/*****마이페이지******************************************************************************************************/
/* 좌측 프로필 **/
.profile-card {
  display: flex;
  flex-direction: column;
  gap: 30px;
  position: relative;
  padding: 50px;
}
.profile-card > li {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-bottom: 1px solid var(--gray-200);
  padding-bottom: 30px;
}
.profile-card > li:last-child {
  border-bottom: 0;
}
.profile-card .hd-title {
  font-size: 16px;
  font-weight: 800;
}
.profile-card .user-info-wrap {
  gap: 16px;
  align-items: center;
}
.profile-card .user-info-wrap .profile-image {
  border-radius: 500px;
  width: 168px;
  height: 168px;
  position: relative;
  overflow: hidden;
}
.profile-card .user-info-wrap .toggle-container {
  display: flex;
  gap: 8px;
}
.profile-card .user-info-wrap .toggle-container .toggle-text {
  font-size: 13px;
  position: relative;
  display: flex;
  align-items: center;
}
.profile-card .user-info-wrap .info--inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.profile-card .user-info-wrap .info--inner .user-email {
  font-size: 20px;
}
.profile-card .user-info-wrap .info--inner .location-and-gender {
  color: var(--gray-600);
  font-size: 13px;
}
.profile-card .userShort-info-wrap {
  display: flex;
  gap: 8px;
}
.profile-card .userShort-info-wrap .title-area {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.profile-card .userShort-info-wrap .title-area .btn-edit {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--gray-700);
  font-size: 13px;
}
.profile-card .userShort-info-wrap .title-area .btn-edit::after {
  content: "";
  background: url("/project/c3/images/ico-edit.svg") no-repeat center;
  background-size: 100%;
  width: 12px;
  height: 12px;
  filter: var(--filter-gray-700);
  display: flex;
}
.profile-card .userShort-info-wrap .description {
  color: var(--gray-700);
  text-align: left;
  font-weight: 400;
  line-height: 1.4;
}
/**/
.my-campaign-status-container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.my-campaign-status-container > li {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  background: var(--white);
  padding: 26px;
  flex: 1 0 0;
  border-radius: 8px;
}
.my-campaign-status-container .point-status {
  background: rgb(var(--rgb-primary-500), 7%);
}
.my-campaign-status-container .waiting .point {
  color: var(--secondary-orange-500);
}
.my-campaign-status-container .mypoint {
  color: var(--secondary-orange-500) !important;
  font-weight: 900 !important;
  font-size: 18px;
}
.my-campaign-status-container .con {
  position: relative;
  display: flex;
  justify-content: space-between;
  color: var(--gray-700);
}
.my-campaign-status-container .con .number {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--gray-900);
}
.my-campaign-status-container .con .number::after {
  content: "";
  background: url("/project/c3/images/arrow-right.svg") no-repeat center;
  background-size: 100%;
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: var(--filter-gray-400);
}

/**/
.tabs-round-wrap {
  padding-bottom: 10px;
  display: flex;
  gap: 8px;
}
.tabs-round-wrap .tab-item {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--gray-300);
  color: var(--gray-700);
  height: 38px;
  padding: 0 20px;
  border-radius: 100px;
}
.tabs-round-wrap .tab-item.active {
  background: var(--primary-500);
  color: var(--white);
  border: 1px solid var(--primary-500);
}

/**/
.sec-chart-content {
  padding-top: 50px;
}

.my-chart-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.my-chart-container > li {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  background: var(--white);
  padding: 26px;
  flex: 1 0 0;
  border-radius: 8px;
  height: 350px;
}
.my-chart-container .total-box {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: absolute;
  top: 20px;
  left: 20px;
}
.my-chart-container .total-box .subj {
  font-size: 15px;
  color: var(--gray-600);
}
.my-chart-container .total-box .number {
  font-size: 25px;
  color: var(--black);
  font-weight: 900;
}

/**/
.bottom-content-wrap {
  margin-top: 100px;
}
.bottom-content-wrap .ai-title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 26px;
  font-weight: 700;
  color: var(--primary-600);
}

/****************************************************************************************************************/
/****판넬********************************************************************************************************/
.panel-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.panel-input-wrap .row-item-box {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.panel-input-wrap .row-item-box input {
  display: block;
  width: 100%;
}
.panel-input-wrap .row-item-box .rowItem-con {
  position: relative;
  display: flex;
}
.panel-input-wrap .row-item-box .subject {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-800);
  -moz-column-gap: 4px;
       column-gap: 4px;
}
.panel-input-wrap .row-item-box .eyeView {
  position: absolute;
  top: 12px;
  right: 16px;
}
.panel-input-wrap .row-item-box .eyeView .security[type=checkbox] + .Link {
  color: #222;
}
.panel-input-wrap .row-item-box .eyeView .security[type=checkbox] + .Link span {
  display: inline-block;
  background: url("/project/c3/images/ico-eye-off.svg") no-repeat;
  background-size: 100% auto;
  width: 24px;
  height: 24px;
  filter: var(--filter-gray-700);
  cursor: pointer;
}
.panel-input-wrap .row-item-box .eyeView .security[type=checkbox]:checked + .Link span {
  background: url("/project/c3/images/ico-eye-on.svg") no-repeat;
  background-size: 100% auto;
  filter: var(--filter-primary-600);
}
.panel-input-wrap .row-item-box .noticeBox {
  padding: 10px 0 0;
}

/****************************************************************************************************************/
/*****로그인,회원가입********************************************************************************************/
.join-visual-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--primary-800);
  height: 450px;
  gap: 16px;
}
.join-visual-container .jn-title {
  font-size: 30px;
  color: var(--white);
}
.join-visual-container .jn-subtitle {
  text-align: center;
  line-height: 1.4;
  font-size: 16px;
  color: rgb(var(--rgb-white), 60%);
}

/**/
.floating-container {
  position: absolute;
  top: 300px;
  left: 50%;
  transform: translate(-50%, 0);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 32px;
  gap: 30px;
  border-radius: 10px;
  background: var(--white);
  box-shadow: 2px 3px 20px 0px rgba(87, 90, 100, 0.3);
  width: 650px;
}

/**/
.sns-ico-group.button {
  width: 100%;
}
.sns-ico-group.button > a {
  border-radius: 4px;
  width: 100%;
  gap: 16px;
  height: 46px;
}

/**/
.btn-idpw-search {
  color: var(--gray-700);
  box-shadow: inset 0 -5px 0 yellow;
  width: -moz-fit-content;
  width: fit-content;
}

/**/
.sns-speed-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding-top: 20px;
}
.sns-speed-title::after, .sns-speed-title::before {
  content: " ";
  width: 30%;
  height: 1px;
  background: var(--gray-200);
  display: block;
}

/*상세 페이지*/
.item-info-box-big {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 26px;
}
.item-info-box-big .badge-group {
  position: absolute;
  top: 0;
  right: 0;
}
.item-info-box-big .badge-zzim .trigger[type=checkbox] + .Link span {
  width: 22px;
  height: 22px;
}
.item-info-box-big .btn-homeMore {
  display: flex;
  gap: 4px;
  color: var(--gray-700);
  padding-bottom: 14px;
}
.item-info-box-big .btn-homeMore::after {
  content: "";
  background: url("/project/c3/images/arrow-right.svg") no-repeat center;
  background-size: 100%;
  width: 14px;
  height: 14px;
  display: flex;
  filter: var(--filter-gray-600);
}
.item-info-box-big .campaign-title {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.item-info-box-big .campaign-title .title {
  display: flex;
  gap: 6px;
  font-size: 22px;
  font-weight: 800;
}
.item-info-box-big .campaign-title .subtitle {
  font-size: 16px;
  color: var(--gray-700);
}
.item-info-box-big .cam-price-info {
  padding-top: 50px;
}
.item-info-box-big .cam-price-info .subj {
  color: #51cc57;
}
.item-info-box-big .cam-price-info .price-wrap {
  display: flex;
  flex-direction: column;
  font-size: 18px;
}
.item-info-box-big .cam-price-info .price-wrap .price {
  font-weight: 900;
  color: var(--primary-500);
}
.item-info-box-big .cam-price-info .price-wrap .price-before {
  text-decoration: line-through;
  font-weight: 600;
  font-size: 15px;
  color: var(--gray-600);
}
.item-info-box-big .cam-price-info .price-wrap .price-after {
  font-weight: 900;
  color: var(--gray-900);
  padding: 10px 0;
}
.item-info-box-big .cam-price-info .price-wrap .sale {
  font-weight: 900;
  color: var(--secondary-orange-500);
}
.item-info-box-big .payment-notice {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  padding: 0 26px;
  display: flex;
  align-items: center;
  gap: 26px;
  height: 60px;
}
.item-info-box-big .payment-notice .item {
  position: relative;
  font-size: 18px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  color: var(--gray-700);
}
.item-info-box-big .payment-notice .item span {
  line-height: 100%;
}
.item-info-box-big .payment-notice .item::after {
  content: "";
  position: absolute;
  top: 6.5px;
  right: -12px;
  width: 4px;
  height: 4px;
  background: var(--gray-300);
  border-radius: 100px;
}
.item-info-box-big .payment-notice .item:last-child::after {
  width: 0;
  height: 0;
}
.item-info-box-big .payment-notice .item .price {
  font-family: "Exo 2";
  font-size: 22px;
}
.item-info-box-big li:last-child {
  margin-top: auto;
}

/**/
.gallery-show-mySwiper {
  height: 80%;
}
.gallery-show-mySwiper .swiper-slide {
  background-size: cover;
  background-position: center;
}
.gallery-show-mySwiper .button-show-wrap {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}
.gallery-show-mySwiper .button-show-wrap .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
}
.gallery-show-mySwiper .button-show-wrap .swiper-slide-thumb-active {
  opacity: 1;
}
.gallery-show-mySwiper .button-show-wrap .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.campaign-caption-box {
  border-radius: 8px;
  border: 1px solid var(--gray-300);
  overflow: hidden;
}
.campaign-caption-box .title {
  display: flex;
  align-items: center;
  background: var(--gray-200);
  border-bottom: 1px solid var(--gray-300);
  height: 36px;
  font-size: 15px;
  padding: 0 16px;
}
.campaign-caption-box .title .desc {
  font-size: 13px;
  color: var(--gray-600);
}
.campaign-caption-box .title .btn-copy {
  margin-left: auto;
  color: var(--primary-500);
  font-size: 13px;
}
.campaign-caption-box .comg-in-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--white);
}
.campaign-caption-box .comg-in-content .link {
  text-decoration: underline;
  text-underline-position: under;
}
.campaign-caption-box .comg-in-content .comg-item {
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1.3;
}
.campaign-caption-box .comg-in-content .comg-item .subj {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--gray-600);
}
.campaign-caption-box .comg-in-content .comg-item .subj::after {
  content: "ㅣ";
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-300);
}
.campaign-caption-box .comg-in-content .box {
  line-height: 1.3;
}

@font-face {
  font-family: "NanumSquareNeo";
  font-weight: 300;
  src: url("../webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.eot?#iefix") format("embedded-opentype"), url("../webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.woff2") format("woff2"), url("../webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.woff") format("woff"), url("../webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.ttf") format("truetype");
}
@font-face {
  font-family: "NanumSquareNeo";
  font-weight: 400;
  src: url("../webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.eot?#iefix") format("embedded-opentype"), url("../webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.woff2") format("woff2"), url("../webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.woff") format("woff"), url("../webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.ttf") format("truetype");
}
@font-face {
  font-family: "NanumSquareNeo";
  font-weight: 700;
  src: url("../webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.eot?#iefix") format("embedded-opentype"), url("../webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.woff2") format("woff2"), url("../webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.woff") format("woff"), url("../webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.ttf") format("truetype");
}
@font-face {
  font-family: "NanumSquareNeo";
  font-weight: 800;
  src: url("../webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.eot?#iefix") format("embedded-opentype"), url("../webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.woff2") format("woff2"), url("../webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.woff") format("woff"), url("../webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.ttf") format("truetype");
}
@font-face {
  font-family: "NanumSquareNeo";
  font-weight: 900;
  src: url("../webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.eot?#iefix") format("embedded-opentype"), url("../webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.woff2") format("woff2"), url("../webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.woff") format("woff"), url("../webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.ttf") format("truetype");
}
/* Variable Font */
@font-face {
  font-family: "NanumSquareNeoVariable";
  src: url("../webfont/NanumSquareNeo/NanumSquareNeo-Variable.eot?#iefix") format("embedded-opentype"), url("../webfont/NanumSquareNeo/NanumSquareNeo-Variable.woff2") format("woff2"), url("../webfont/NanumSquareNeo/NanumSquareNeo-Variable.woff") format("woff"), url("../webfont/NanumSquareNeo/NanumSquareNeo-Variable.ttf") format("truetype");
}
@font-face {
  font-family: "Montserrat";
  src: url("../webfont/Montserrat/Montserrat-Bold.eot");
  src: url("../webfont/Montserrat/Montserrat-Bold.eot?#iefix") format("embedded-opentype"), url("../webfont/Montserrat/Montserrat-Bold.woff2") format("woff2"), url("../webfont/Montserrat/Montserrat-Bold.woff") format("woff"), url("../webfont/Montserrat/Montserrat-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../webfont/Montserrat/Montserrat-Black.eot");
  src: url("../webfont/Montserrat/Montserrat-Black.eot?#iefix") format("embedded-opentype"), url("../webfont/Montserrat/Montserrat-Black.woff2") format("woff2"), url("../webfont/Montserrat/Montserrat-Black.woff") format("woff"), url("../webfont/Montserrat/Montserrat-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../webfont/Montserrat/Montserrat-ExtraBold.eot");
  src: url("../webfont/Montserrat/Montserrat-ExtraBold.eot?#iefix") format("embedded-opentype"), url("../webfont/Montserrat/Montserrat-ExtraBold.woff2") format("woff2"), url("../webfont/Montserrat/Montserrat-ExtraBold.woff") format("woff"), url("../webfont/Montserrat/Montserrat-ExtraBold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../webfont/Montserrat/Montserrat-ExtraLight.eot");
  src: url("../webfont/Montserrat/Montserrat-ExtraLight.eot?#iefix") format("embedded-opentype"), url("../webfont/Montserrat/Montserrat-ExtraLight.woff2") format("woff2"), url("../webfont/Montserrat/Montserrat-ExtraLight.woff") format("woff"), url("../webfont/Montserrat/Montserrat-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../webfont/Montserrat/Montserrat-Light.eot");
  src: url("../webfont/Montserrat/Montserrat-Light.eot?#iefix") format("embedded-opentype"), url("../webfont/Montserrat/Montserrat-Light.woff2") format("woff2"), url("../webfont/Montserrat/Montserrat-Light.woff") format("woff"), url("../webfont/Montserrat/Montserrat-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../webfont/Montserrat/Montserrat-Medium.eot");
  src: url("../webfont/Montserrat/Montserrat-Medium.eot?#iefix") format("embedded-opentype"), url("../webfont/Montserrat/Montserrat-Medium.woff2") format("woff2"), url("../webfont/Montserrat/Montserrat-Medium.woff") format("woff"), url("../webfont/Montserrat/Montserrat-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../webfont/Montserrat/Montserrat-Regular.eot");
  src: url("../webfont/Montserrat/Montserrat-Regular.eot?#iefix") format("embedded-opentype"), url("../webfont/Montserrat/Montserrat-Regular.woff2") format("woff2"), url("../webfont/Montserrat/Montserrat-Regular.woff") format("woff"), url("../webfont/Montserrat/Montserrat-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../webfont/Montserrat/Montserrat-SemiBold.eot");
  src: url("../webfont/Montserrat/Montserrat-SemiBold.eot?#iefix") format("embedded-opentype"), url("../webfont/Montserrat/Montserrat-SemiBold.woff2") format("woff2"), url("../webfont/Montserrat/Montserrat-SemiBold.woff") format("woff"), url("../webfont/Montserrat/Montserrat-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../webfont/Montserrat/Montserrat-Thin.eot");
  src: url("../webfont/Montserrat/Montserrat-Thin.eot?#iefix") format("embedded-opentype"), url("../webfont/Montserrat/Montserrat-Thin.woff2") format("woff2"), url("../webfont/Montserrat/Montserrat-Thin.woff") format("woff"), url("../webfont/Montserrat/Montserrat-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}