* {
  font-size: max(10px, min(62.5%, 10px));
  font-family: var(--font-family-main);
  padding: 0;
  margin:0;
}

:root {
  --font-family-main: 'SUIT Variable', sans-serif;;
  --font-family-sub: Paperlogy;
  --transition-up: cubic-bezier(0.4, 0, 0.2, 1);
  --box-shadow: 0 0 2rem 0 rgba(51, 54, 61, 0.4705882353);
  --white: #fff;
  --black: #000;
  --gray-50: #F4F5F6;
  --gray-100: #E6E8EA;
  --gray-200: #CDD1D5;
  --gray-300: #B1B8BE;
  --gray-400: #8A949E;
  --gray-500: #6D7882;
  --gray-600: #58616A;
  --gray-700: #464C53;
  --gray-800: #33363D;
  --gray-900: #1E2124;
  --blue-50: #ecf3ff;
  --blue-100: #c5d9ff;
  --blue-200: #a9c6ff;
  --blue-300: #82adff;
  --blue-400: #699dff;
  --blue-500: #4484ff;
  --blue-600: #3e78e8;
  --blue-700: #305eb5;
  --blue-800: #25498c;
  --blue-900: #1d376b;
  --green-50: #F0F7F1;
  --green-100: #D1E5D5;
  --green-200: #BBD8C0;
  --green-300: #9DC7A4;
  --green-400: #89BC92;
  --green-500: #6CAB77;
  --green-600: #629C6C;
  --green-700: #4D7954;
  --green-800: #3B5E41;
  --green-900: #105333;
  --deep-pink-50: #F6ECF3;
  --deep-pink-100: #E4C4DA;
  --deep-pink-200: #D7A8C9;
  --deep-pink-300: #C580B0;
  --deep-pink-400: #BA68A1;
  --deep-pink-500: #A94289;
  --deep-pink-600: #9A3C7D;
  --deep-pink-700: #782F61;
  --deep-pink-800: #5D244B;
  --deep-pink-900: #471C3A;
  --yellow-50: #fffeec;
  --yellow-100: #fffbc5;
  --yellow-200: #fff9a9;
  --yellow-300: #F9BE5B;
  --yellow-400: #fff56a;
  --yellow-500: #fff345;
  --yellow-600: #e8dd3f;
  --yellow-700: #b5ad31;
  --yellow-800: #8c8626;
  --yellow-900: #6b661d;
  --red-50: #ffeeee;
  --red-100: #fdc9ca;
  --red-200: #fdafb1;
  --red-300: #fc8a8d;
  --red-400: #fb7377;
  --red-500: #fa5055;
  --red-600: #e4494d;
  --red-700: #b2393c;
  --red-800: #8a2c2f;
  --red-900: #692224;
  --purple-50: #f8f0fb;
  --purple-100: #ead1f3;
  --purple-200: #e0bbee;
  --purple-300: #d19ce6;
  --purple-400: #c989e1;
  --purple-500: #bb6bd9;
  --purple-600: #aa61c5;
  --purple-700: #854c9a;
  --purple-800: #673b77;
  --purple-900: #4f2d5b;
  --orange-50: #fef5e7;
  --orange-100: #fce1b3;
  --orange-200: #fbd28e;
  --orange-300: #f9be5b;
  --orange-400: #f8b13b;
  --orange-500: #f69e0a;
  --orange-600: #e09009;
  --orange-700: #af7007;
  --orange-800: #875706;
  --orange-900: #674204;
  --cyan-50: #E7FBFC;
  --cyan-100: #B5F2F7;
  --cyan-200: #91ECF3;
  --cyan-300: #5FE3EE;
  --cyan-400: #40DDEA;
  --cyan-500: #10D5E5;
  --cyan-600: #0FC2D0;
  --cyan-700: #0B97A3;
  --cyan-800: #09757E;
  --cyan-900: #075960;
  --deep-green-50: #EDF6F8;
  --deep-green-100: #D5EBF1;
  --deep-green-200: #BBD8C0;
  --deep-green-300: #75C0D1;
  --deep-green-400: #3D9FB8;
  --deep-green-500: #268097;
  --deep-green-600: #1F687A;
  --deep-green-700: #17505E;
  --deep-green-800: #113B45;
  --deep-green-900: #0E3139;
  --teal-50: #ECF3F2;
  --teal-100: #C3DBD8;
  --teal-200: #A6CAC5;
  --teal-300: #7DB1AB;
  --teal-400: #64A29A;
  --teal-500: #3D8B81;
  --teal-600: #387E75;
  --teal-700: #2B635C;
  --teal-800: #224C47;
  --teal-900: #1A3A36;
  --navy-50: #EEF2F7;
  --navy-100: #D6E0EB;
  --navy-200: #BACBDE;
  --navy-300: #90B0D5;
  --navy-400: #6B96C7;
  --navy-500: #346FB2;
  --navy-600: #1C589C;
  --navy-700: #063A74;
  --navy-800: #052B57;
  --navy-900: #031F3F;
  --border-color: #CDD1D5;
  --spacing-2: 0.2rem;
  --spacing-4: 0.4rem;
  --spacing-6: 0.6rem;
  --spacing-8: 0.8rem;
  --spacing-10: 1rem;
  --spacing-12: 1.2rem;
  --spacing-14: 1.4rem;
  --spacing-16: 1.6rem;
  --spacing-20: 2rem;
  --spacing-24: 2.4rem;
  --spacing-28: 2.8rem;
  --spacing-32: 3.2rem;
  --spacing-40: 4rem;
  --spacing-48: 4.8rem;
  --spacing-50: ;
  --spacing-60: 6rem;
  --spacing-80: 8rem;
  --spacing-92: 9.2rem;
  --spacing-100: 10rem;
  --spacing-120: 12rem;
  --radius-xs-2: 0.2rem;
  --radius-sm-4: 0.4rem;
  --radius-md-6: 0.6rem;
  --radius-md-8: 0.8rem;
  --radius-lg-16: 1.6rem;
  --radius-full: 10rem;
}

h1, h2, h3, h4, h5, h6, p, strong, span, li, ul, ol, a, button {
  word-break: keep-all;
}

a, button {
  color: var(--gray-900);
}

a {
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

ul {
  list-style: none;
}

html, body {
  /* overflow-x: hidden; */
  margin: 0;
  padding: 0;
}

.blind {
  overflow: hidden !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  color: transparent !important;
  clip: rect(0px, 0px, 0px, 0px) !important;
}

.inner {
   max-width: 106rem;
   margin: 0 auto;
   padding: 0 var(--spacing-16);
   gap: var(--spacing-14);
}



/* 기본 스크롤바 커스텀 */
::-webkit-scrollbar {
  width: 8px;
  height: 4px;
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #cccccc;
}

::-webkit-scrollbar-thumb:hover {
  background: #b3b3b3;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}


/* header */

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header.inner {
  padding: 4.8rem 1.6rem;
}

header a {
  display: inline-block;
  width: clamp(15rem, 20vw, 25rem);
  background: url(../img/logo.png) no-repeat;
  background-size: contain;
  height: fit-content;
}

header a img {
  width: 100%;;
}

header button.go-service {
  border-radius: var(--radius-md-8);
  background-color: var(--gray-900);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: none;
  color: var(--white);
  height: 4.2rem;
  gap: var(--spacing-12);
  padding: 0 1.6rem;
  cursor: pointer;
  transition: .3s ease-in-out all;
}

header button:hover {
  scale: .98 ;
}

/* 소개페이지 header */
.intro-header {
  position: sticky;
  top: 0;
  border-bottom: 1px solid var(--gray-200);
  height: clamp(5.8rem, 8vw, 6.8rem);
  padding: 0 !important;
  background-color: var(--white);
  z-index: 10;
}
.intro-header .inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
}
.intro-header .right {
  height: 100%;
}
.intro-header .right ul {
  display: flex;
  gap: var(--spacing-48);
  height: 100%;
}

.intro-header .right ul li {
  height: 100%;
}
.intro-header .right ul li.active button {
    color: var(--gray-900);
    font-weight: 700;
}

.intro-header .right ul li.active:after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--gray-900);
    position: relative;
    bottom: .2rem;
}

.intro-header .right ul li button {
    border: none;
    background: inherit;
    height: 100%;
    color: var(--gray-500);
    padding: 0 1rem;
    cursor: pointer;
    transition: all .3s ease-in-out;
}



/* footer */

footer {
  width: 100%;
  border-top: 1px solid var(--gray-200);
  padding: 2.8rem 0 4.8rem;
}

footer div {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
} 

footer img {
  width: 13rem;
  height: 2.2rem;
}

footer address {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

footer address ul {
  display: flex;
  gap: var(--spacing-8);
  flex-wrap: wrap;
}

footer address ul li {
  font-style: normal;
}

footer address p {
  font-style: normal;
}

footer address ul li:last-child {
  padding-left: none;
}


/* 드래그 커스텀 */
::selection {  
  color: var(--gray-50);  
  background-color: var(--gray-500);
}