base
@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 400;
    src: url("fonts/Archivo-Light.woff2") format("woff2");
  }
  @font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 500;
    src: url("fonts/Archivo-Regular.woff2") format("woff2");
  }
  @font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 600;
    src: url("fonts/Archivo-SemiBold.woff2") format("woff2");
  }
  @font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 700;
    src: url("fonts/Archivo-Bold.woff2") format("woff2");
  }
  @font-face {
    font-family: "Noto Sans KR";
    font-style: normal;
    font-weight: 300;
    src: url("fonts/NotoSansCJKkr-Light.woff2") format("woff2");
  }
  @font-face {
    font-family: "Noto Sans KR";
    font-style: normal;
    font-weight: 400;
    src: url("fonts/NotoSansCJKkr-Regular.woff2") format("woff2");
  }
  @font-face {
    font-family: "Noto Sans KR";
    font-style: normal;
    font-weight: 600;
    src: url("fonts/NotoSansCJKkr-Bold.woff2") format("woff2");
  }


  html {
    font-size: 62.5%;
    width: 100%;
  }
  
  html,
  body {
    scroll-behavior: smooth !important;
    /* width: 100vw;
    height: 100vh;
    overflow-y: scroll; */
  }
  
  * {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
    color: inherit;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
  }
  
  a,
  img {
    display: block;
  }
  
  button {
    outline: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    border: none;
  }
  
  body {
    font-size: 1.4rem;
    /* min-width: 1024px; */
    word-break: keep-all;
    font-family: "Archivo", "Noto Sans KR", sans-serif;
    line-height: 1.33;
    word-break: keep-all;
    position: relative;
    transition: background 0.3s;
    height: 100vh; 
    overflow-x: hidden;
  }
  
  main {
    overflow: hidden;
  }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: "Archivo", "Noto Sans KR", sans-serif;
  }

h3{
    font-size: 4rem;
}
h5{
    font-size: 2.5rem;
    font-weight: 300;
    color: #FF4E0F;
    padding-bottom: 30px;
}
  button {
    font-family: "Archivo", "Noto Sans KR", sans-serif;
    background: transparent;
  }

  
  
  .sc {
    position: relative;
    /* overflow: hidden; */
    overflow-y: auto;
  }
  .sc--full .sc__inner {
    min-height: 100vh;
    height: 100%;
  }
  .sc__inner {
    padding: 0 64rem;
    height: 100%;
  }

/*   
  @media (max-width: 2560px) {
    .sc__inner {
      padding: 0 30rem;
    }
    
  }
  @media (max-width: 1440px) {
    .sc__inner {
      padding: 0 20rem;
    }
  
  }
  @media (max-width: 1024px) {
    .sc__inner {
      padding: 0 6rem;
    }
  }
  @media (max-width: 749px) {
    .sc__inner {
      padding: 0 2.4rem;
    }
  }*/
  .sc__title {
    font-size: 7.2rem;
    font-weight: 800;
    text-align: center;
  }
  /* 
  @media (max-width: 1440px) {
    .sc__title {
      font-size: 5.4rem;
    }
}
  @media (max-width: 1024px) {
    .sc__title {
      font-size: 4rem;
    }
  }
  @media (max-width: 749px) {
    .sc__title {
      font-size: 3rem;
    }
  }
  @media (max-width: 1440px) {
    .reference__list {
      grid-template-columns: 1fr 1fr 1fr; 
    }
}
  @media (max-width: 1024px) {
    .reference__list {
      grid-template-columns: 1fr 1fr;
    }
  }
  @media (max-width: 749px) {
    .sc__title {
      font-size: 3rem;
    }
  } */
/* 
  .sc__bg {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    display: inline-block;
  }
  .sc__bg img {
    width: 100vw;
    height: 100vh;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .sc__bg-container {
    position: relative;
  }
 */

  
.header{
    width: 100vw;
    position: fixed;
    z-index: 99;
    /* top: -13.8rem; */
    left: 0;
    transition: top 0.3s, filter 0.3s;
    
  }
  .header--invert img {
    filter: invert(1);
  }
  .header--invert .header__menu-item {
    color: #010203;
  }

  .header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0;
    flex-direction: row;
    padding: 0 10rem;
    height: 10rem;
  }
.header img, .header--show img {
    transition: filter 0.3s;
  }

  .header__menu-list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
    flex-direction: row;
    height: 100%;
    margin-right: -2.5rem;
  }
  .header__menu-item {
    font-weight: 600;
    color: #fff;
    font-size: 1.8rem;
    transition: color 0.3s;
  }
  .header__menu-link {
    padding: 2.5rem;
  }
.logo{
    width: 200px;
   
  }




  .header__hamburger {
    display: none;
    cursor: pointer;
    z-index: 120;
}

.header__hamburger--inner {
    position: relative;
    width: 24px;
    height: 14px;
}

.header__hamburger--item {
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #fff;
    transition: all 0.3s;
}

.header.header--invert .header__hamburger--item {
  background-color: #010203; /* 인버트된 상태에서는 검은색으로 변경 */
}

.header__hamburger--item.top {
    top: 0;
}

.header__hamburger--item.middle {
    top: 50%;
    transform: translateY(-50%);
}

.header__hamburger--item.bottom {
    bottom: 0;
}

.header__hamburger.show .header__hamburger--item {
    background-color: #010203 !important;
}


.header__hamburger.show .top {
    width: 100%;
    top: 50%;
    transform: rotate(135deg);
}

.header__hamburger.show .middle {
    opacity: 0;
}

.header__hamburger.show .bottom {
    top: 50%;
    transform: rotate(-135deg);
}

/* 모바일 메뉴 스타일 */
.header__menu-mobile {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #fff;
    padding: 70px 24px;
    box-sizing: border-box;
    z-index: 110;
    opacity: 0;
    visibility: hidden;
    transition: top 0.4s, opacity 0.4s, visibility 0.4s;
}

.header__menu-mobile.show {
    opacity: 1;
    visibility: visible;
    top: 0;
}

.header__menu-mobile .header__menu-item {
    font-size: 2.5rem;
    color: #010203;
    margin-bottom: 2rem;
}


/* .main__inner {
   display: flex; 
  justify-content: center;
  align-items: center;
  background-color: #010203;
  position: relative;
  height: 100vh; 
  overflow: hidden;  
} */
.main-title {
  color: #fff;
  /* margin-bottom: 800px; */
  z-index: 10;
  text-align: left;
  width: 0%;
}

/* .face{
  width: 12%;
  position: relative;
  left: 45%;
  top: 20%;
} */
.main__inner {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100vh;
  padding: 5vh 10vw;
  background-color: #010203;
  overflow: hidden;
}

/* 텍스트 컨테이너 */
.black {
  z-index: 2;
  max-width: 600px;
}

.main-title {
  width: 100%;
  color: white;
  font-size: 8rem;
  line-height: 1.3;
  font-weight: 600;
  user-select: none;
}

.main-title .highlight {
  color: #FF4E0F;
  font-weight: 400;
  font-size: 8rem;
  display: inline-block;
  margin-top: 1rem;
}

/* 대시보드 이미지 */
.dashboardimage {
  position: absolute;
  right: 020%;
  top: 50%;
  transform: translateY(-50%);
  width: 30%;
  max-width: 180%;
  pointer-events: none;
  z-index: 1;
}
.dashboardimage img {
  width: 150%;
  height: auto;
}

/* 반응형 */
@media (max-width: 1024px) {
  .main__inner {
    flex-direction: column;
    text-align: center;
  }

  .main-title {
    font-size: 5.5rem; /* 패드 사이즈에 맞게 폰트 조정 */
  }

  .main-title .highlight {
    font-size: 6rem;
    line-height: 1.4;
  }

  .dashboardimage {
    position: static;
    transform: none;
    width: 100%;
    max-width: none;
    margin-top: 2rem;
    margin-left: 0;
  }

  .dashboardimage img {
    width: 100%;
    height: auto;
  }
}


@media (max-width: 768px) {
  .main__inner {
    flex-direction: column;
    text-align: center;
  }

  .main-title {
    font-size: 4rem;
  }

  .main-title .highlight {
    font-size: 4.5rem;
  }
  .dashboardimage {
    position: static; /* 흐름 안으로 넣음 */
    transform: none;
    width: 160%;
    max-width: none;
    margin-top: 2rem;
    margin-left: 17rem;
  }

  .dashboardimage img {
    width: 100%;
    height: auto;
  }
}

/* 
.black, .orange {
  position: absolute; 
  top: 30%;
  left: 50%; 
  transform: translate(-50%, -50%); 
  width: 60%;
  height: auto; 
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
  */
/* .black.visible {
  position: relative; 
  opacity: 1;
  overflow: hidden; 
   transform: translate(-50%, -50%); 
} */

/* 
.orange.visible {
  opacity: 1;
  transform: translate(-50%, -50%);  //중앙 정렬 유지 
} */




.reference__inner{
  height: 100%;
}


.reference__title{
    padding-top: 200px;
    font-size: 5rem;
    text-align: center;
    
}
.reference__title p{
  font-size: 2rem;
  text-align: center;
  padding-bottom: 150px;
  padding-top: 10px;
}
.reference__list{
   
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap: 1.8rem;
    grid-row-gap: 1.8rem;
    padding-top: 150px;
    /* grid-template-rows: repeat(auto-fill, minmax(150px, auto));  */
    
}
.reference__list div{
    align-items: center;
    display: flex;
    justify-content: center;
    border: 1px solid #FEEDEB;
    border-radius: 10px;
    height: 10rem;
    padding: 10px;
}
.reference__list img{
    width: 70%;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    object-fit: contain;
  }

.function__title{
    font-size: 5rem;
    text-align: center;
    padding-top: 200px;
}
.function__title p{
    font-size: 2rem;
    text-align: center;
    padding-bottom: 150px;
    padding-top: 10px;
}

.function__inner {
  width: 100%; /* 전체 너비 사용 */
  /* padding: 0 64rem; */
}



.function_scroll {
  display: flex;
  overflow-x: auto; /* 가로 스크롤 활성화 */
  overflow-y: hidden; /* 세로 스크롤 비활성화 */
  gap: 1.8rem; /* 카드 간의 간격 */
  padding: 3rem 64rem; /* 상하 여백 추가 */

}
.function_scroll::-webkit-scrollbar {
  display: none; /* Chrome, Safari에서 스크롤바 숨기기 */
}

.function_card {
    width: 50vw; /* 필요에 따라 조정 가능 */
    background-color: #fff;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2), 0 10px 10px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 500px; /* 필요에 따라 조정 가능 */
    
}

.function_card_title{
    padding: 40px 0 40px 40px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: space-between;
    flex: 1;
    height: 500px;
}
.function_number{
    width: 100px;
    background-color: #FEEDEB;
    color: #010203;
    padding: 5px;
    text-align: center;
    border-radius: 20px;
    height: 2px;
    flex: 0.2;
    font-weight: 500;
}
.function_card_title h3{
    font-size: 4rem;
    flex: 4;
}
.function_card_title p{
    flex: 0.4;
    align-items: flex-end;
}

.function_img{
    background-color: var(--cg--60);
    border-radius: 0 20px 20px 0;
    /* flex: 1; */
    -o-object-fit: cover;
    object-fit: cover;
    background-color: #FEEDEB;
    height: 500px;
    /* display: flex; */
    flex: 2;
}

.function_img img{
    max-width: 100%; 
    height: auto; 
}

.function__title:nth-child(1) { flex-grow: 1; }
.function__title:nth-child(2) { flex-grow: 2; }
.function__title:nth-child(3) { flex-grow: 1; }


.function_button {
  display: flex;
  /* justify-content: right;  */
  justify-content: flex-start;
  gap: 1rem;
  margin-top: 1.9rem;
  padding-left: 64rem;
}

.arrow-prev{
  width:50px;
  height:50px;
  position:relative;
  text-indent:-9999px;
  border: 2px solid #010203;
  border-radius: 100%;
  cursor: pointer;

}
.arrow-prev:before{
  content:'';
  width:15px;
  height:15px;
  position:absolute;
  left:55%;
  top:50%;
  border-left:2px solid #010203;
  border-top:2px solid #010203;
  transform:translate(-50%,-50%) rotate(-45deg);
}
.arrow-prev:after{
  content:'';
  width:42px;
  height:2px;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:#010203
}

.arrow-next{
  width:50px;
  height:50px;
  position:relative;
  text-indent:-9999px;
  border: 2px solid #010203;
  border-radius: 100%;
  cursor: pointer;
}
.arrow-next:before{
  content:'';
  width:15px;
  height:15px;
  position:absolute;
  left:45%;
  top:50%;
  border-left:2px solid #010203;
  border-top:2px solid #010203;
  transform:translate(-50%,-50%) rotate(135deg);
}
.arrow-next:after{
  content:'';
  width:42px;
  height:2px;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:#010203
}
.arrow-prev:hover,
.arrow-next:hover {
    background: #f0f0f0; /* 호버 시 배경색 변화 */
    border-color: #666; /* 호버 시 테두리 색 변화 */
}


.value__title{
    font-size: 5rem;
    text-align: center;
    padding-top: 200px;
}
.value__title p{
    font-size: 2rem;
    text-align: center;
    padding-top: 10px;
}
.value__card{
    display: grid;
    height: 600px;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 1.8rem 1.8rem;
    margin-top: 150px;
}
.value-logo{
    height: 100px;
}
.value__card h3 {
    font-size: 4rem;
    z-index: 1;
    position: absolute;
    bottom: 1.8rem; 
    right: 1.8rem; 
    text-align: right;
    justify-content: flex-end; 
    color: #fff;
}
.gs{
    grid-column: 1 / 3;
    grid-row: 1 / 7;
    background-color: #FEEDEB;
    border-radius: 20px;
    padding: 1.8rem 0 0 1.8rem;
    overflow: hidden;
    position: relative;
}
.ribbon{
  width: 200px;
  top: 50%;
}
.gs h3{
    color: #010203;
    text-align: right;
    bottom: 1.8rem; 
    left: 1.8rem; 
}

.gs_back img{
    width: 300px;
    object-fit:cover;   
    padding-top: 38px; 
}

.scouter{
    color: #fff;
    text-align: right;
    grid-column: 3 / 5;
    grid-row: 1 / 4;
    background-color: #211F5D;
    border-radius: 20px;
    padding: 1.8rem 0 0 1.8rem;
    overflow: hidden;
    position: relative;
}


.nhn{
    color: #fff;
    background-color: #00398C;
    border-radius: 20px;
    padding: 1.8rem 0 0 1.8rem;
    overflow: hidden;
    position: relative;
    grid-column: 5 / 7;
    grid-row: 1 / 4;
}
.nhn img{
    width: 160px;
    border-radius: 0;
    padding: 0;
}

.observability{
    grid-column: 3 / 7;
    grid-row: 4 / 7;
    background-color: #0061a9;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

.observability img{
  position: absolute;
    top: -30%;
    /* left:50%; */
    padding-left: 30px; 
    /* padding-top: -30px;  */
    width: 300px;
    object-fit:cover;   
}






.contact__title{
    font-size: 5rem;
    text-align: center;
    padding-top: 200px;
}
.contact__title p{
    font-size: 2rem;
    text-align: center;
    padding-top: 10px;
}

.btn, .btn--black {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    flex-direction: row;
    padding: 0.2rem 2rem;
    height: 4.8rem;
    border: 0.2rem solid #010203;
    font-size: 1.8rem;
    font-weight: 700;
    border-radius: 50px;
    text-align: center;
  }
  .btn--black {
    background: #010203;
    color: #fff;
  }
  .btn-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.8rem;
    flex-direction: row;
    margin-top: 7rem;
    margin-bottom: 7rem;
  }

.flowmeer{
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: 100px;
    gap: 20px;
    height: 30rem;

}
.flow, .meer {
    width: 25rem;
    height: 25rem;
    border-radius: 50%;
    border: 2px solid #FF4E0F;
    display: flex;
    flex-direction: column; 
    aspect-ratio: 1;
}

.flowmeer img{
    width: 12rem;
    margin: 0 auto;
    padding-top: 40px;
}
.flowmeer h2{
    padding-top: 6px;
    font-size: 3rem;
    font-weight: 500;
    text-align: center;
    color: #010203;
}

.plus{
    border: none;
}
.flowkatfaceword img{
  width: 30rem;
}




.footer {
    padding: 5.8rem 0;
    background: #010203;
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    word-spacing: 0.06em;
  }
.footer__inner {
padding: 0 10rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 0;
flex-direction: row;
}

.footer__logo{
    width: 200px;
}

.sns{
  display: flex;
  width: 15rem;
  height: auto;
  gap: 1rem;
  margin-top: 15px;
}

.insta, .facebook{
  fill: #666;
  width: 4rem;
  height: 4rem;
  left: 0;
  top: 0;
}








@media (max-width: 2560px) {
  .sc__inner {
    padding: 0 30rem;
    height: auto;
  }
  .sc__title {
    font-size: 8rem;
  }

  .function_scroll {
    padding: 3rem 30rem; 
  }
  .function_button {
    padding-left: 30rem;
  }
  
} 


@media (max-width: 1440px) {
  .sc__inner {
    padding: 0 10rem;
    min-height: auto;
  }
  .sc__title {
    font-size: 5.4rem;
  }
  .black{
    width: 80%;
  }
  .main-title {
    margin-bottom: 4rem;
  }

  
  .main_subtitle h2{
    line-height: 10rem;
  }
  .reference__list {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .value__card {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr); 
  }
  .gs {
      grid-column: 1 / 3;
      grid-row: 1 / 3;
  }

  .scouter {
      grid-column: 3 / 5;
      grid-row: 1 / 3;
  }

  .nhn{
    grid-column: 1 / 3;
    grid-row: 3 / 5;
  }

  .observability {
      grid-column: 3 / 5;
      grid-row: 3 / 5;
  }

 

  .function_scroll {
    display: flex;
    overflow-x: auto; 
    overflow-y: hidden;
    gap: 1.8rem; 
    padding: 3rem 10rem;
    /* height: 800px; */
  }

  
  .function_card {
    width: 50vw; 
    background-color: #fff;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2), 0 10px 10px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center; 
    height: 600px;
    
}

.function_card_title {
    padding: 40px 0 40px 40px;
    display: flex;
    flex-direction: column; 
    gap: 10px;
    justify-content: flex-start;
    align-items: flex-start; 
    flex: 1;
    height: auto; 
    width: 100%; 

}

.function_number {
    width: 100px;
    background-color: #FEEDEB;
    color: #FF4E0F;
    padding: 5px;
    text-align: center;
    border-radius: 20px;
    height: 2px;
    flex: 0.2;
}

.function_card_title h3 {
    font-size: 4rem;
    flex: 1; 
}

.function_card_title p {
    flex: 0.4;
    align-items: flex-end;
}

.function_img {
    background-color: #FEEDEB;
    border-radius: 0   0 20px 20px;
    object-fit: cover;
    height: 250px; 
    flex: 2;
    width: 100%;
    height: 400px;
}

.function_img img {
    max-width: 100%; 
    height: auto; 
}

.function_button {
  display: flex;
  /* justify-content: right;  */
  /* justify-content: flex-end; */
  gap: 1rem;
  margin-top: 1.9rem;
  padding-left: 10rem;
}

.value__card {
  grid-template-columns: repeat(2, 1fr); 
  grid-template-rows: repeat(3, 1fr);
}
.gs {
    grid-column: 1 /2;
    grid-row: 1 / 3;
}

.scouter {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
}

.nhn{
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}

.observability {
    grid-column: 2 /3;
    grid-row: 3 / 3;
}

} 

@media (max-width: 1024px) {
  .sc__inner {
    padding: 0 5vw;
    min-height: auto;
    
  }
  .sc__title {
    font-size: 4rem;
  }

  .black{
    width: 90%;
  }
  .main_subtitle h2{
    line-height: 8rem;
  }
  .main-title {
    margin-top: 3em;
    margin-bottom: 1em;
  }
  .reference__list {
    grid-template-columns: 1fr 1fr;
    padding-top: 0;
  }

  .function_scroll {
    display: flex;
    overflow-x: auto; 
    overflow-y: hidden;
    gap: 1.8rem; 
    padding: 2rem 5vw;
        /* height: 800px; */
  }

  

  .function_button {
    display: flex;
    /* justify-content: right;  */
    /* justify-content: flex-end; */
    gap: 1rem;
    margin-top: 1.9rem;
    padding-left: 10rem;
  }
  
  .flowmeer {
    gap: 15px;
    height: 25rem;
  }
  .flow, .meer {
      width: 20rem;
      height: 20rem;
  }
  .flowmeer img {
      width: 10rem;
  }
  .flowmeer h2 {
      font-size: 2.5rem;
  }
  .flowkatfaceword img{
    width: 20rem;
  }
  
}
@media (max-width: 749px) {
  /* .sc__inner {
    padding: 0 2.4rem;
    min-height: auto;
  } */
  .sc__title {
    font-size: 3rem;
  }
/* 
  .header {
    transform: translateY(-100%);
} */

.black{
  width: 90%;
}

.main-title {
  padding-top: 10%;
  margin-bottom: 0%;
}
.header__inner {
    padding: 0 20px;
}

.header__menu {
    display: none;
}

.header__hamburger {
    display: block;
}

.header__menu-mobile.show {
    display: block;
}

.header__menu-list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.header__menu-link {
    padding: 1.5rem 0;
}

.main-image img{
  width: 100%;
}


.main_subtitle{
  color: #fff;
  font-size: 6rem;
  text-align: center;
  padding-top: 150px;
    
}
.main_subtitle span{
  font-weight: 100;
}
.main_subtitle h2{
  line-height: 8rem;
}
  .reference__list {
    grid-template-columns: 1fr 1fr;
  }

 


  .value__card {
    grid-template-columns: repeat(2, 1fr); 
    grid-template-rows: repeat(3, 1fr);
  }
  .gs {
      grid-column: 1 /2;
      grid-row: 1 / 3;
  }

  .scouter {
      grid-column: 2 / 3;
      grid-row: 1 / 3;
  }

  .nhn{
    grid-column: 1 / 2;
    grid-row: 3 / 4;
  }

  .observability {
      grid-column: 2 /3;
      grid-row: 3 / 3;
  }
  .flowmeer {
    flex-direction: column;
    gap: 10px;
    height: auto;
    margin-top: 50px;
}
.flow, .meer {
    width: 18rem;
    height: 18rem;
}
.flowmeer img {
    width: 8rem;
}
.flowmeer h2 {
    font-size: 2rem;
}
.flowkatfaceword img{
  width: 20rem;
}
}

@media (max-width: 576px) {
  .sc__inner {
    padding: 0 2.4rem;
    height: auto;
  }
  .sc__title {
    font-size: 3rem;
  }
  /* .reference__list {
    justify-items: center;
    grid-template-columns: 1fr ;
    width: 40%;
  }  */
  .main_subtitle h2{
    line-height: 4rem;
  }

  .value__card {
    grid-template-columns: repeat(1, 1fr); 
    grid-template-rows: 200px 200px 200px 200px ;
    height: 1000px;
  }
  .gs {
      grid-column: 1 /2;
      grid-row: 1 / 2;
  }

  .scouter {
    grid-column: 1 /2;
    grid-row: 2 / 3;
  }

  .nhn{
    grid-column: 1 /2;
    grid-row: 3 / 4;
  }

  .observability {
    grid-column: 1 /2;
    grid-row: 4 / 5;
  }

  .gs_back{
    display: none;
  }

  .function_scroll {
    display: flex;
    overflow-x: auto; 
    overflow-y: hidden; 
    gap: 1.8rem; 
    padding: 2.4rem 2.4rem; 
    /* height: 800px; */
  }
  .function_card {
    width: 90vw; 
    background-color: #fff;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2), 0 10px 10px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center; 
    height: 600px; 
    
}

.function_card_title {
    padding: 40px 0 40px 40px;
    display: flex;
    flex-direction: column; 
    gap: 10px;
    justify-content: flex-start;
    align-items: flex-start; 
    flex: 1;
    height: auto; 
    width: 100%;  

}

.function_number {
    width: 100px;
    background-color: #FEEDEB;
    color: #FF4E0F;
    padding: 5px;
    text-align: center;
    border-radius: 20px;
    height: 2px;
    flex: 0.2;
}

.function_card_title h3 {
    font-size: 4rem;
    flex: 1;
}

.function_card_title p {
    flex: 0.4;
    align-items: flex-end;
}

.function_img {
    background-color: #FEEDEB;
    border-radius: 0   0 20px 20px;
    object-fit: cover;
    height: 250px; 
    flex: 2;
    width: 100%; 
    height: 400px;
}

.function_img img {
    max-width: 100%; 
    height: auto; 
}

.function_button {
  display: flex;
  /* justify-content: right;  */
  /* justify-content: flex-start; */
  gap: 1rem;
  margin-top: 1.9rem;
  padding-left: 2.4rem;

}
 .flowmeer {
        gap: 8px;
        height: auto;
        margin-top: 20px;
    }
    .flow, .meer {
        width: 16rem;
        height: 16rem;
    }
    .flowmeer img {
        width: 7rem;
    }
    .flowmeer h2 {
        font-size: 1.8rem;
    }

    .flowkatfaceword img{
      width: 15rem;
    }

}

@media (max-width: 390px) {
  .sc__inner {
    padding: 0 2.4rem;
    height: auto;
  }
  .sc__title {
    font-size: 3rem;
  }

  /* .reference__list {
    justify-items: center;
    grid-template-columns: 1fr ;
    width: 40%;
  }  */

/* 
  .value__card {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(8, 1fr); 

}

.gs {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}

.scouter {
    grid-column: 1 / 2;
    grid-row: 3 / 5;
}

.nhn {
    grid-column: 2 / 3;
    grid-row: 5 / 7;
}

.observability {
    grid-column: 1 / 3;
    grid-row: 7 / 9;
}
 */


  .function_scroll {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden; 
    gap: 1.8rem; 
    padding: 3rem 2.4rem; 
    /* min-height: 800px; */
  }


  .function_button {
    display: flex;
    /* justify-content: right;  */
    /* justify-content: flex-end; */
    gap: 1rem;
    margin-top: 1.9rem;
    padding-left: 2.4rem;
  }
  
  
  .function_card {
    max-width: 500vw; 
    background-color: #fff;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2), 0 10px 10px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    display: flex;
    flex-direction: column; 
    align-items: center; 
    height: 600px;
    
}

.function_card_title {
    padding: 40px 0 40px 40px;
    display: flex;
    flex-direction: column; 
    gap: 10px;
    justify-content: flex-start; 
    align-items: flex-start; 
    flex: 1;
    height: auto; 
    width: 100%;  

}

.function_number {
    width: 100px;
    background-color: #FEEDEB;
    color: #FF4E0F;
    padding: 5px;
    text-align: center;
    border-radius: 20px;
    height: 2px;
    flex: 0.2;
}

.function_card_title h3 {
    font-size: 4rem;
    flex: 1; 
}

.function_card_title p {
    flex: 0.4;
    align-items: flex-end;
}

.function_img {
    background-color: #FEEDEB;
    border-radius: 0   0 20px 20px;
    object-fit: cover;
    height: 250px; 
    flex: 2;
    width: 100%; 
    height: 400px;
}

.function_img img {
    max-width: 100%;
    height: auto; 
}
.value__card h3 {
  font-size: 2rem;
}

}