/* 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 {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  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;

  &:disabled {
    background: var(--gray-300);
  }

  &:focus {
    background: var(--gray-300);
    color: var(--black);
  }

  &::-webkit-input-placeholder {
    font-size: clamp(12px, 3vw, 14px);
    color: var(--gray-600);
    vertical-align: middle;
    letter-spacing: -0.5px;
    font-weight: 500;
  }
}

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);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  resize: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

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;

  +.checkBox {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;

    &>span {
      display: inline-block;
      background: url("../images/checkbox-off.svg") no-repeat center;
      background-size: 100%;
      width: 20px !important;
      height: 20px !important;
      cursor: pointer;
    }

    .txt {
      width: 80%;
      font-size: 15px;

      &>em {
        box-shadow: inset 0 -5px 0 yellow;
      }
    }
  }

  &:checked+.checkBox {
    span {
      background: url("../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("../images/arrow-down.svg") no-repeat right 14px center;
  background-size: 16px 16px;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  outline: 0;
  box-shadow: none;

  &::-ms-expand {
    display: none;
  }
}

/* 라디오 버튼*/
input[type="radio"] {
  display: none !important;

  +.rdo-label {
    &:last-child {
      font-weight: 500;
    }

    &>span {
      display: inline-block;
      background: url("../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;
    }
  }

  &:checked+.rdo-label {
    span {
      background: url("../images/radio-box-on.svg") no-repeat center;
      background-size: 100%;
    }
  }
}

/**/
.radio-new {
  &::after {
    content: "";
    display: table;
    clear: both;
  }

  & input[type="radio"] {
    display: none;
  }

  & input[type="radio"]+label {
    display: inline-block;
    cursor: pointer;
    width: 100%;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    /*margin-right:10px;*/
  }

  & input[type="radio"]+label {
    color: var(--color300);
    background: 1px solid var(--gray-800);
    border-radius: 6px;
    border: 1px solid var(--gray-800);
  }

  & 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(../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;

  &>option {
    font-weight: 500;
    background: var(--white);
    padding: 3px 0;
    color: var(--gray-800);
    border-radius: 0 !important;
  }

  &::-ms-expand {
    display: none;
  }
}

/*기본토글*/
.toggleWrap {
  .toggle-Switch {
    width: 38px;
    height: 22px;
    display: block;
    position: relative;
    border-radius: 30px;
    background-color: var(--gray-500);
    cursor: pointer;

    .toggle-Button {
      width: 16px;
      height: 16px;
      position: absolute;
      top: 50%;
      left: 3px;
      transform: translateY(-50%);
      border-radius: 50%;
      background: var(--white);
    }
  }

  #toggle:checked~.toggle-Switch {
    background: var(--primary-500);

    .toggle-Button {
      left: calc(100% - 20px);
      background: var(--white);
    }
  }

  .toggle-Switch,
  .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%;
  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: fit-content !important;
}

/***/

.p-t-0 {
  padding-top: 0 !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;

  &.fit-content {
    width: 200px;
    margin: 0 auto;
  }
}

.bwRow-wrap {
  width: 100%;
  display: flex;
  gap: 8px;
  padding: 30px 0 0;

  &>a {
    width: 100%;
  }

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