@layer theme {
  :root,
  :host {
    --font-sans: "Wanted Sans", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    --font-mono: "Wanted Sans", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --foreground: #1e1e1e;
  }
}

:root {
  --primary: #009c89;
  --radius: 4px;
}

html {
  letter-spacing: -0.01rem;
}

@layer components {
  .demo1 {
    --sidebar-transition-duration: 0.3s;
    --sidebar-transition-timing: ease;
    --sidebar-width: 280px;
    --sidebar-width-collapse: 80px;
    --sidebar-default-width: 280px;
    --header-height: 96px;
  }
}
@media (hover: hover) {
  .kt-btn-ghost:hover {
    background: none;
  }
  .footer3 .kt-select {
    font-size: var(--text-sm);
  }
}

.font-bold {
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
}
.font-extrabold {
  --tw-font-weight: var(--font-weight-extrabold);
  font-weight: var(--font-weight-extrabold);
}
.max-h-\[40px\] {
  max-height: 40px;
}
.gap-12 {
  gap: calc(var(--spacing) * 12);
}
.ps-\[12px\] {
  padding-inline-start: 12px;
}
.ps-\[20px\] {
  padding-inline-start: 19px;
}
.py-\[4px\] {
  padding-block: 4px;
}
.py-\[5px\] {
  padding-block: 5px;
}

/*header*/
.kt-header {
  height: auto;
}
.kt-header .kt-container-fixed {
  padding-top: 25px;
  padding-bottom: 25px;
}
.kt-header .header1 {
  display: flex;
  gap: 8px;
}
.kt-header .header1 a {
  border-radius: var(--radius);
  padding: 10px 25px;
  display: inline-flex;
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}
.kt-header .header1 a.data {
  background: linear-gradient(180deg, #fff 0%, #f7f7f7 100%);
  border: 1px solid #d9d9d9;
}
.kt-header .header1 a.quo {
  background: linear-gradient(180deg, #00a98b 0%, #009f83 100%);
  color: #fff;
  font-weight: var(--font-weight-bold);
}
.kt-menu-default .kt-menu-title {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.kt-menu-dropdown {
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
  border: 0;
}
.kt-menu-dropdown .kt-menu-link {
  transition: all 0.3s ease;
}
.kt-menu-dropdown .kt-menu-link:hover {
  background: linear-gradient(180deg, #00a98b 0%, #009f83 100%);
  transition: all 0.3s ease;
}
.kt-menu-dropdown .kt-menu-link span.kt-menu-title {
  transition: all 0.3s ease;
}
.kt-menu-dropdown .kt-menu-link:hover span.kt-menu-title {
  color: #fff;
  transition: all 0.3s ease;
}
.kt-menu-dropdown .kt-menu-link:hover i.m_hover {
  color: #fff !important;
}
.kt-header .m_logo {
  height: 40px;
}

/*footer*/
.kt-footer .footer1 p {
  font-weight: var(--font-weight-semibold);
}
.kt-footer .footer2 p:nth-last-of-type(even) {
  font-weight: var(--font-weight-semibold);
  color: #999999;
}

/*main*/
.main_container.kt-container-fixed {
  padding-inline: 0;
}
.main_container .main1 {
  width: 100%;
  text-align: center;
  background: #fbfbfb;
  border-top: 1px solid #ebebee;
}
.main1 img {
  display: block;
  margin: 0 auto;
  float: none;
  position: static;
}
.yt-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 8;
  overflow: hidden;
  /* border-top: 1px solid #ebebee;
  border-bottom: 1px solid #ebebee; */
}
.yt-wrap iframe {
  position: absolute;
  inset: 0;
  width: 101%;
  height: 160%;
  border: 0;
  left: -2px;
  top: -30%;
}

.tns {
  position: relative;
  width: 100%;
}
.main2-slider-wrap {
  position: relative;
  overflow: hidden;
  height: 40vh;/*78vh;*/
}
.main2-slide {
  position: relative;
  height: 40vh; /*78vh;*/
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}
.main2-slide .txt {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #fff;
  flex-direction: column;
  box-sizing: border-box;
}
.main2-slide .txt h3 {
  display: block;
  font-size: 90px;
  font-weight: 600;
}
.main2-slide .txt h4 {
  display: block;
  font-size: 24px;
  font-weight: 500;
}
.main2-slide .txt h6 {
  display: block;
  font-size: 16px;
  font-weight: 500;
  padding-top: 60px;
}
.main2-slide .txt h6 a {
  display: inline-block;
  border: 2px solid #fff;
  border-radius: 9999px;
  padding: 15px 60px;
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease;
  background: rgba(0, 0, 0, 0.2);
  /* backdrop-filter: blur(6px); */
}
.main2-slide .txt h6 a:hover {
  background: rgba(255, 255, 255, 1);
  color: #191919;
  font-weight: 600;
}
.main2-slide .txt h3,
.main2-slide .txt h4,
.main2-slide .txt h6 {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease;
}
.tns-slide-active .txt h3,
.tns-slide-active .txt h4,
.tns-slide-active .txt h6 {
  opacity: 1;
  transform: translateY(0);
}
.tns-slide-active .txt h3 {
  transition-delay: 0.2s;
}
.tns-slide-active .txt h4 {
  transition-delay: 0.4s;
}
.tns-slide-active .txt h6 {
  transition-delay: 0.6s;
}
.main2-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.main2-video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.05);

  /* ✅ cover 핵심 */
  width: 100%;
  height: 100%;

  /* 컨테이너 비율이 16:9가 아닐 때도 빈 여백이 안 생기게 */
  min-width: 177.78vh; /* 16:9 기준으로 최소 가로 */
  min-height: 56.25vw; /* 16:9 기준으로 최소 세로 */

  border: 0;
  pointer-events: none;
}
.main_tiny_slider_nav {
  position: absolute;
  top: 45%;
  transform: translateY(-45%);
  z-index: 20;
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 9999px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.main_tiny_slider_nav img {
  opacity: 0.8;
  filter: brightness(0) saturate(0) opacity(0.75);
}
.main_tiny_slider_nav:hover img {
  opacity: 1;
  filter: brightness(0) saturate(0) opacity(1);
}
#kt_team_slider_prev1 {
  left: 20px;
  transform: scaleX(-1);
}
#kt_team_slider_next1 {
  right: 20px;
}
/* 네비게이션dot 비활성화처리함.
.tns-nav {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 30;
  margin-top: 0;
}
.tns-nav button {
  width: 10px;
  height: 10px;
  padding: 0;
  margin: 0 5px;
  border: 0;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.3);
}
.tns-nav .tns-nav-active {
  background: #009c89;
}
*/
.m-br {
  display: block;
}
@media (max-width: 1000px) {
  .main2-slide .txt h3 {
    font-size: 50px;
  }
  .main2-slide .txt h4 {
    font-size: 18px;
  }
  .main2-slide .txt h6 {
    font-size: 14px;
    padding-top: 30px;
  }
  .main2-slide .txt h6 a {
    padding: 10px 30px;
  }
}
@media (max-width: 768px) {
  .main2-slide .txt h3 {
    font-size: 40px;
  }
  .main2-slide .txt h4 {
    font-size: 16px;
  }
  .main2-slide .txt h6 {
    font-size: 12px;
    padding-top: 20px;
  }
  .main_tiny_slider_nav {
    display: none;
  }
}
@media (max-width: 578px) {
  /* .main2-slide .txt{
    padding: 0 30px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }*/

  .main2-slide .txt h4 {
    word-break: keep-all;
    overflow-wrap: break-word;
    width: 80%;
    margin: 0 auto;
  }
  .m-br {
    display: none;
  }
}

/*사이드바*/
#sidebar {
  height: 100vh;
}
#sidebar_content {
  width: 94%;
  top: 12px;
  box-sizing: border-box;
  height: 97%;
  overflow-x: hidden;
}
#sidebar_scrollable {
  height: 100%;
  /* min-width: 0; */
}
.kt-menu-item.active > .kt-menu-link .kt-menu-item-active\:text-white {
  color: var(--color-white);
}
.kt-menu-item .before\:border-border::before {
  border-color: rgba(0, 156, 137, 0.2);
  z-index: 1;
}
.kt-btn {
  border-radius: var(--radius);
}
@supports (color: color-mix(in lab, red, red)) {
  .kt-menu-item {
    transition: all 0.3s ease;
  }
  .kt-menu-item.active > .kt-menu-link .kt-menu-item-active\:text-primary {
    color: var(--color-white);
  }
  .kt-menu-item.hover > .kt-menu-link .kt-menu-item-hover\:text-primary {
    color: var(--color-white);
  }
  .kt-menu-item.active > .kt-menu-link .kt-menu-item-active\:bg-accent\/60 {
    background-color: var(--primary);
  }
  .kt-menu-item.hover > .kt-menu-link .kt-menu-item-hover\:bg-accent\/60 {
    background-color: var(--primary);
  }
  :is(.kt-menu-item.active > .kt-menu-link .kt-menu-item-active\:before\:bg-primary)::before {
    background-color: var(--color-white);
  }
}

/*반응형*/
@media (width >=100rem) {
  .lg\:gap-15 {
    gap: calc(var(--spacing) * 15);
  }
}

/* 62.5rem(1000px) 기준 미디어 쿼리 */
@media (width >=62.5rem) {
  .xl\:flex {
    display: flex;
  }

  .xl\:hidden {
    display: none;
  }
}
@media (width >= 62.5rem) {
  .xl\:\[--kt-drawer-enable\:false\] {
    --kt-drawer-enable: false;
  }
}

@media (max-width: 80rem) and (min-width: 62.5rem) {
  @layer components {
    .demo1 {
      --sidebar-width: 200px;
    }
  }
  #sidebar_content {
    width: 100%;
  }
}

@media (max-width: 62.5rem) {
  @layer components {
    .demo1 {
      --sidebar-width: 0;
    }
  }

  /* 사이드바를 position: fixed로 고정하여 독립적으로 작동 */
  #sidebar {
    position: fixed;
    width: 280px;
    z-index: 100;
  }
}

@media (max-width: 62.5rem) {
  @layer components {
    .demo1 {
      --header-height: 71px;
    }
  }
  .kt-header .kt-container-fixed {
    padding: 15px;
  }
}

@media (width <= 48rem) {
  .footer3 .flex:first-of-type {
    margin: 0 auto;
  }
}

@media (max-width: 575px) {
  .kt-header .menu_svg {
    width: 28px;
  }
  .kt-header .m_logo {
    height: 32px;
  }
  .kt-header .header1 a {
    padding: 10px 10px;
    font-size: 13px;
  }
  .kt-footer .text-sm,
  .footer3 .kt-select {
    font-size: 0.6rem !important;
  }
}

/*제품 소개*/

.kdc_bread {
  flex-grow: initial;
  padding-bottom: 20px;
}
.kdc_bread .flex {
  padding-left: 30px;
}
.kdc_subtop {
  width: 100%;
  min-height: 450px;
  background-position: center center;
  background-size: cover;
  padding-right: 95px;
  font-size: 90px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #fff;
}
.kdc_tab {
  padding-top: 20px;
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-top: solid 1px #ebebee;
}
.kdc_tab .kt-menu {
  display: flex;
  justify-content: center;
}
.kdc_wrap {
  padding-bottom: 100px;
}
.kdc_wrap .flex {
  padding-top: 120px;
  word-break: keep-all;
}
.kdc_wrap .w85 {
  width: 85%;
  margin: 0 auto;
}
#section1,
#section2,
#section3,
#section4 {
  scroll-margin-top: 20px; /* sticky 높이 + 약간 여유 */
}
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
[class^="col-"] {
  box-sizing: border-box;
}
.col-6 {
  width: 50%;
}
.col-2 {
  width: 20%;
}
.col-4 {
  width: 33.333%;
}
.col-10 {
  width: 80%;
}
.kdc_wrap .point_wrap {
  margin-top: 120px;
  padding-bottom: 120px;
  background: #f4f7f7;
}
.kdc_wrap .point {
  background: #ffffff;
  padding: 60px 80px;
  margin-top: 50px;
}
.kdc_wrap .point .top_border {
  border-top: 1px solid #ebebee;
}
.kdc_wrap .point .round-img {
  width: 172px; /* 원하는 크기 */
  object-fit: cover; /* 비율 유지하면서 꽉 채움 */
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
}
.kdc_wrap .feat,
.kdc_wrap .ui {
  width: 100%;
}
#section2 .feat .row {
  gap: 20px;
  align-items: stretch;
}
#section2 .feat .col-4 {
  display: flex;
  flex-direction: column; /* 내부 요소 세로로 */
  height: auto; /* flex가 자동으로 같은 높이로 맞춤 */
  padding: 40px 30px; /* 카드 안쪽 여백(원하는 값으로) */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
  width: calc((100% - 40px) / 3); /* gap 20px이 2칸 -> 40px */
  border-radius: 4px;
}
#section3 .ui .row {
  gap: 30px;
  align-items: stretch; /* 원하면 유지, 필요 없으면 제거 */
}
#section3 .ui .row .col-6 {
  width: calc((100% - 30px) / 2);
}

.kdc_wrap .pt10 {
  padding-top: 10px;
}
.kdc_wrap .pt20 {
  padding-top: 20px;
}
.kdc_wrap .pt30 {
  padding-top: 30px;
}
.kdc_wrap .pt40 {
  padding-top: 40px;
}
.kdc_wrap .pt50 {
  padding-top: 50px;
}
.kdc_wrap .mt30 {
  margin-top: 30px;
}
.kdc_wrap .mt40 {
  margin-top: 40px;
}
.kdc_wrap .pl40 {
  padding-left: 40px;
}
.kdc_wrap .plr60 {
  padding-left: 60px;
  padding-right: 60px;
}
.kdc_wrap img {
  max-width: 100%;
  border-radius: 4px;
}
.kdc_wrap .flex h1,
h2,
h3,
h4,
h5,
h6 {
  width: 100%;
  letter-spacing: var(--tracking-tight);
}
.kdc_wrap .flex h1 {
  font-weight: 800;
  font-size: 3.1rem;
}
.kdc_wrap .flex h2 {
  font-weight: 700;
  font-size: 1.7vw;
}
.kdc_wrap .flex h3 {
  font-weight: 600;
  font-size: 1.5vw;
}
.kdc_wrap .flex h4 {
  font-weight: 500;
  font-size: 1.1vw;
}
.kdc_wrap .flex p.num {
  font-size: 20px;
  color: #009c89;
  font-weight: 600;
}
@media (max-width: 80rem) {
  .kdc_wrap .flex h2 {
    font-size: 2.2vw;
  }
  .kdc_wrap .flex h3 {
    font-size: 1.9vw;
  }
  .kdc_wrap .flex h4 {
    font-size: 1.5vw;
  }
  #section1 br {
    display: none;
  }
  .kdc_wrap .plr60 {
    padding-left: 0;
    padding-right: 0;
    text-align: left;
  }
  #section1 .plr60 .text-center,
  #section2 .plr60 .text-center,
  #section3 .plr60 .text-center,
  #section4 .plr60 .text-center {
    text-align: left !important;
  }
}
@media (max-width: 62.5rem) {
  .kdc_bread {
    display: none;
  }
  .kdc_subtop {
    min-height: 200px;
    padding-right: 0;
    font-size: 1.8rem;
    justify-content: center;
  }
  .kdc_tab {
    padding-top: 10px;
    top: 0;
  }
  .kdc_wrap .w85 {
    width: 95%;
  }
  .kdc_wrap .plr60 {
    padding-left: 30px;
  }
  #section2 .feat .col-4 {
    width: calc((100% - 20px) / 2); /* gap 20px이 2칸 -> 40px */
  }
  .kdc_wrap .flex h1 {
    font-size: 2.5rem;
  }
  .kdc_wrap .flex h2 {
    font-size: 1.8rem;
  }
  .kdc_wrap .flex h3 {
    font-size: 1.5rem;
  }
  .kdc_wrap .flex h4 {
    font-size: 1rem;
  }
}
@media (max-width: 48rem) {
  .kdc_wrap .flex h1 {
    font-size: 1.6rem;
  }
  .kdc_wrap .flex h2 {
    font-size: 1.3rem;
  }
  .kdc_wrap .flex h3 {
    font-size: 1.2rem;
  }
  .kdc_wrap .pt20 {
    padding-top: 10px;
  }
  .kdc_wrap .pt30,
  .kdc_wrap .pt40 {
    padding-top: 20px;
  }
  .kdc_wrap .pt50 {
    padding-top: 30px;
  }
  .kdc_wrap .mt40 {
    margin-top: 20px;
  }
  .kdc_wrap .pt20 {
    padding-top: 10px;
  }
  .kdc_wrap .plr60 {
    padding-left: 0;
    padding-top: 10px;
  }
  .col-4,
  .col-6,
  .col-10 {
    width: 100%;
  }
  .kdc_wrap .pl40 {
    padding-left: 20px;
  }
  .kdc_wrap {
    padding-bottom: 50px;
  }
  .kdc_wrap .flex {
    padding-top: 80px;
  }
  .kdc_tab .px-10 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .kdc_tab .text-base {
    font-size: 0.85rem !important;
  }
  .kdc_wrap .w85 {
    width: 100%;
    margin: 0 auto;
  }
  .kdc_wrap .point_wrap {
    margin-top: 10px;
    padding-bottom: 0;
    background: none;
  }
  .kdc_wrap .point {
    background: none;
    padding: 50px 0 30px;
    margin-top: 0;
  }
  .kdc_wrap .point .col-2 {
    width: 30%;
  }
  .kdc_wrap .point .col-10 {
    width: 70%;
  }
  .kdc_wrap .point h2 {
    font-size: 1.1rem;
  }
  .kdc_wrap .point h4 {
    font-size: 0.85rem;
  }
  #section1 .text-center,
  #section2 .text-center,
  #section3 h1.text-center {
    text-align: left;
  }
  #section2 .feat .row {
    gap: 10px;
  }
  #section2 .feat .col-4 {
    width: 100%;
  }
  #section3 .ui .row {
    gap: 15px; /* 모바일 간격은 취향 */
  }
  #section3 .ui .row .col-6 {
    width: calc((100% - 15px) / 2); /* gap 20px이 2칸 -> 40px */
  }
  #section4 .pt50 {
    padding-top: 20px;
  }
}