:root{
    --theme-color: #20ABC6;
    
    --primary-color: #3CCBDB;
    --red-color: #FE6F61;
    --red-100-color: #FF6262;
    --red-200-color: #FF8B8B;
    --pink-100-color: #DA2872;
    --accent-color: #F7E948;
/*    --accent-color:#FFCB57;*/
    --yellow-color:#F7E847;
    --blue-color:#3969EF;
    --standard-radius: 15px;
    --border-round-S: 5px;
    --border-round-M: 8px;
    --border-round-L: 10px;
    --border-color: #EDEDED;
    --theme-color: #3CCBDB;
    --theme-bg-color: #F8F8FA;
    --theme-font-color: #444C67;
    --disabled-font-color: #C4C4C4;
    --disabled-gray-color:#D2D2DF;
    --disabled-status-color:#D2D2DF;
    --navy-color:#454D56;
    --gray-font-color:#454D56;
    --box-shadow: 10px 10px 10px rgba(212, 212, 223, 0.2);
    --box-shadow_black: 3px 3px 4px rgba(0, 0, 0, 0.25);
    --bg-gray: #F4F5F9;
    --bg-gray-color: #F8F8FA;
    --bg-sky: #ECF9FB;
    --bg-yellow: #FFF8E7;
    --bg-red: #FFF6F5;
    --bg-red-100: #FFE8E8;
    --gradient-color: linear-gradient(98deg, #3CCBDB 32.37%, #F7E847 114.35%);
    --gradient-hover-color: linear-gradient(98deg, #2E97A3 32.37%, #F7E847 114.35%);
    --placeholder-color: #B7BECD;
    --line-color: #E4E8EE;
    --gradient-primary: linear-gradient(115deg, #3CCBDB 0%, #DA2872 100%);
    --gradient-primary-hover: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(115deg, #3CCBDB 0%, #DA2872 100%);
    
    /* CTA 버튼 그라데이션 */
    --cta-gradient: linear-gradient(115deg, #3CCBDB 0%, #DA2872 100%);
    --cta-gradient-hover: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(115deg, #3CCBDB 0%, #DA2872 100%);
 
   --gradient-banner-color : radial-gradient(ellipse 87.78% 126.52% at 18.75% -26.52%, rgba(60, 203, 219, 0.25) 0%, rgba(60, 203, 219, 0) 66.3%), radial-gradient(ellipse 51.78% 106.84% at 102.5% 111.6%, rgba(255, 107, 168, 0.25) 0%, rgba(255, 107, 168, 0) 100%), radial-gradient(ellipse 55.31% 83.79% at -1.56% 100%, rgba(255, 178, 154, 0.15) 0%, rgba(255, 178, 154, 0) 100%);

   
  /* @디자인 시스템 */
  
  /* Label */
  --label-r-size: 14px;
  --label-r-line: 24px;
  --label-r-letter: -0.5px;
  --label-r-weight: 400;

  --label-M-size: 14px;
  --label-M-line: 24px;
  --label-M-letter: -0.5px;
  --label-M-weight: 400;

  /* Body */
  --body-R-size: 16px;
  --body-R-line: 24px;
  --body-R-letter: -0.5px;
  --body-r-weight: 400;

  --body-m-size: 16px;
  --body-m-line: 24px;
  --body-m-letter: -0.5px;
  --body-m-weight: 500;

  /* Title */
  --title-s-size: 18px;
  --title-s-line: 20px;
  --title-s-letter: -0.3px;
  --title-s-weight: 400;

  --title-m-size: 20px;
  --title-m-line: 24px;
  --title-m-letter: -0.3px;
  --title-m-weight: 500;

  --title-l-size: 22px;
  --title-l-line: 26px;
  --title-l-letter: -0.3px;
  --title-l-weight: 700;

  /* Headline */
  --headline-size: 32px;
  --headline-line: 36px;
  --headline-letter: -0.3px;
  --headline-weight: 700;

  /* Radius */
  --radius-0: 0px;
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-14: 14px;
  --radius-16: 16px;
  --radius-18: 18px;
  --radius-20: 20px;
  --radius-22: 22px;
  --radius-24: 24px;
  --radius-full: 9999px;

  /* color */

  --color-text-inverse : #FFFFFF;
  --color-text-strong : #444C67;
  --color-text-medium : #5C637D;
  --color-text-soft : #999DA9;
  --color-text-disabled : #B8BBC6;
  --color-text-primary : #36B7C5;
  --color-text-error : #E72A2A;

  --color-border-weak: #FFFFFF;
  --color-border-medium: #E5E5E5;
  --color-border-error: #FFD8D8;

  --color-primary-300 : #E2F7FA;
  --color-primary-500 : #36B7C5;
  --color-primary-700 : #2D98A4;
  --color-primary-900 : #1B5B63;
  

  --color-primary-weak : var(--color-primary-300);
  --color-primary-dark : var(--color-primary-700);
  --color-primary-deep : var(--color-primary-900);


  --color-point-500: #DA2872;
  --color-point-300: #FFF6FA;

  --color-point: var(--color-point-500);
  --color-point-weak : var(--color-point-300);
 
  /* surface, background */
  --surface-gray-weak:#FAFCFE;
  --surface-gray:#F4F5F9;
  --surface-disabled:#F0F1F6;
  --surface-dark:#454D56;
  --surface-error:#E72A2A;
  --surface-white:#FFFFFF;
  --surface-translucent-30:rgba(255, 255, 255, 0.3);
  --surface-translucent-50:rgba(255, 255, 255, 0.5);
  --surface-dim-20:rgba(0, 0, 0, 0.2);

  --background-gray-weak: #FAFAFA;


  
}

/*  타이포그래피 */
.text-label-r{
    font-size: var(--label-r-size);
    line-height: var(--label-r-line);
    letter-spacing: var(--label-r-letter);
    font-weight: var(--label-r-weight);
}
.text-label-m{
    font-size: var(--label-m-size);
    line-height: var(--label-m-line);
    letter-spacing: var(--label-m-letter);
    font-weight: var(--label-m-weight);
}
.text-body-r{
    font-size: var(--body-r-size);
    line-height: var(--body-r-line);
    letter-spacing: var(--body-r-letter);
    font-weight: var(--body-r-weight);
}
.text-body-m{
    font-size: var(--body-m-size);
    line-height: var(--body-m-line);
    letter-spacing: var(--body-m-letter);
    font-weight: var(--body-m-weight);
}
.text-title-s{
    font-size: var(--title-s-size);
    line-height: var(--title-s-line);
    letter-spacing: var(--title-s-letter);
    font-weight: var(--title-s-weight);
}
.text-title-m{
    font-size: var(--title-m-size);
    line-height: var(--title-m-line);
    letter-spacing: var(--title-m-letter);
    font-weight: var(--title-m-weight);
}
.text-title-l{
    font-size: var(--title-l-size);
    line-height: var(--title-l-line);
    letter-spacing: var(--title-l-letter);
    font-weight: var(--title-l-weight);
}

.text-headline{
    font-size: var(--headline-size);
    line-height: var(--headline-line);
    letter-spacing: var(--headline-letter);
    font-weight: var(--headline-weight);
}



@font-face {
        font-family: 'Noto Sans KR';
        src: url('/biz/STATIC/fonts/NotoSansKR-Black.woff2') format('font-woff2'),
             url('/biz/STATIC/fonts/NotoSans-Black.woff') format('woff');
        font-weight: 900;
        font-style: normal;
    }
    @font-face {
        font-family: 'Noto Sans KR';
        src: url('/biz/STATIC/fonts/NotoSansKR-Bold.woff2') format('font-woff2'),
             url('/biz/STATIC/fonts/NotoSans-Bold.woff') format('woff');
        font-weight: 700;
        font-style: normal;
    }
    @font-face {
        font-family: 'Noto Sans KR';
        src: url('/biz/STATIC/fonts/NotoSansKR-SemiBold.woff2') format('font-woff2'),
             url('/biz/STATIC/fonts/NotoSansKR-SemiBold.woff') format('woff');
        font-weight: 600;
        font-style: normal;
    }

    @font-face {
        font-family: 'Noto Sans KR';
        src: url('/biz/STATIC/fonts/NotoSansKR-Medium.woff2') format('font-woff2'),
             url('/biz/STATIC/fonts/NotoSans-Medium.woff') format('woff');
        font-weight: 500;
        font-style: normal;
    }

    @font-face {
        font-family: 'Noto Sans KR';
        src: url('/biz/STATIC/fonts/NotoSansKR-Regular.woff2') format('font-woff2'),
             url('/biz/STATIC/fonts/NotoSans-Regular.woff') format('woff');
        font-weight: 400;
        font-style: normal;
    }

    @font-face {
        font-family: 'Noto Sans KR';
        src: url('/biz/STATIC/fonts/NotoSansKR-Light.woff2') format('font-woff2'),
             url('/biz/STATIC/fonts/NotoSans-Light.woff') format('woff');
        font-weight: 300;
        font-style: normal;
    }

    @font-face {
        font-family: 'roboto';
        src: url('/biz/STATIC/fonts/Roboto/Roboto-Medium.ttf') format('woff'),
             url('/biz/STATIC/fonts/Roboto/Roboto-Medium.ttf') format('font-woff2');
        font-weight: 500;
        font-style: normal;
    }

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-family: 'Noto Sans KR', -apple-system,Arial, sans-serif; 
    -webkit-tap-highlight-color: transparent; letter-spacing: -0.4px;
}

textarea {
    border: 1px solid var(--line-color);
    resize: none;
    border-radius: var(--border-round-S);
}
input, select, textarea{
    transition: all .3s;
}
    input:focus, select:focus, textarea:focus { 
        border-color: var(--primary-color);
        /* box-shadow: 0 0 0 3px rgba(60, 203, 219, 0.1); */
     }
    input::placeholder, textarea::placeholder {
        color: #888;
    }
    select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: url(../img/icon/select_down.png);
        background-position: right 20px center;
        background-repeat: no-repeat;
        padding-right: 50px;
   }
    select::-ms-expand {
        display: none;
    }


.loading span:not(.loader) {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: var(--accent-color);
  border-radius: 50%;
  animation: loading 1s linear infinite;
}

.loading span:nth-child(1) {
  animation-delay: 0s;
}

.loading span:nth-child(2) {
  animation-delay: 0.2s;
  margin: 0px 10px
}

.loading span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes loading {
  0%, 100% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

.max1070{
    max-width: 1070px;
}


input[type="radio"]{
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    -webkit-appearance: none;
    border-radius: 0;
    border: 0;
    margin: 0px 0px 0px !important;
    padding: 0px 0px 0px;
    cursor: pointer;
    color: red;
    vertical-align: -3px;
}


input[type="radio"] {
    background: url(../img/icon/radio_off.svg) no-repeat 0 0;
    background-size: cover;
}

input[type="radio"]:checked {
    background: url(../img/icon/radio_on.svg) no-repeat 0 0;
    background-size: cover;
}


.infinite-scroll-loader{
    text-align: center;
    padding: 50px 0 ;
}

.bg-gray{
    background-color: var(--bg-gray);
    padding: 10px 20px;
    border-radius: 10px;
}
.bg-yellow{
    background-color: var(--bg-yellow);
    padding: 10px 20px;
    border-radius: 10px;
}
.bg-red{
    background-color: var(--bg-red);
    padding: 10px 20px;
    border-radius: 10px;
}