/* Custom CSS for MKDIR Homepage with Bootstrap 5.0 */

/* Import Pretendard Font */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

/* Custom Properties */
:root {
    --primary-color: #326CFF;
    --secondary-color: #000000;
    --blue-dark: #05182D;
    --blue-light: #F2F6FF;
    --gray-dark: #252E34;
    --gray-light: #9EA0A7;
    --white: #FFFFFF;
    --black: #000000;
 --header-offset: 9rem; /* 필요하면 값만 바꾸면 됨 */
    --hd_height: 8.5rem;
    --hd_height_m: 5.6rem;
    --height_sm: 3.8rem;
    --height_md: 4.2rem;
    --height: 4.6rem;
    --height_lg: 5.0rem;

}

/* Base Styles */
body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.4;
  color: var(--black);
  margin:0 auto; padding:0;
  font-size: 16px;
  font-weight: 300;
}


  /* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 10px;

  }

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

  ::-webkit-scrollbar-thumb {
    background: #28292d;
    border-radius: 36rem;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #28292d;
  }

  ::-webkit-scrollbar:hover  {
    width: 15px;
  }

    div::-webkit-scrollbar {
    width: 10px;

  }

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

  div::-webkit-scrollbar-thumb {
    background: #28292d;
    border-radius: 36rem;
  }

  div::-webkit-scrollbar-thumb:hover {
    background: #28292d;
  }

  div::-webkit-scrollbar:hover  {
    width: 10px;
  }


html {
  scroll-behavior: smooth;
  font-size:10px; 
}

html, h1, h2, h3, h4, h5, h6, form, fieldset, img { margin:0; padding:0; border:0 }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block }

ul, dl,dt,dd { margin:0; padding:0; list-style:none }
legend { position:absolute; margin:0; padding:0; font-size:0; line-height:0; text-indent:-9999em; overflow:hidden }
label, input, button, select, img { vertical-align:middle; }
input, button { margin:0; padding:0;}
input[type="submit"] {cursor:auto;}
button {cursor: auto;}
select {margin:0}
p { margin:0; padding:0; white-space: pre-line; word-break: keep-all;}
hr { display:none }
a { text-decoration:none }
a:hover { text-decoration: none; }
.un_reboot_a { color: var(--main); text-decoration: underline; }
*, :after, :before {
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 box-sizing:border-box;
 word-break: keep-all;
 }

img { max-width:100%; display:inline-block; height: auto; }
.container-fluid {max-width: 2560px;}
.mobile_wr {
    border-left: 1px solid #F2F2F2;
    border-right: 1px solid #F2F2F2;
	box-sizing: content-box;
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    padding-left: 1.6rem;
    padding-right: 1.6rem; 
}


/*line-height*/
.line_h1 { line-height:1.0em; }
.line_h1_1 { line-height:1.1em; }
.line_h1_2 { line-height:1.2em; }
.line_h1_3 { line-height:1.3em; }
.line_h1_4 { line-height:1.4em; }
.line_h1_5 { line-height:1.5em; }
.line_h1_6 { line-height:1.6em; }
.line_h1_7 { line-height:1.7em; }
.line_h1_8 { line-height:1.8em; }
.line_h1_9 { line-height:1.9em; }
.line_h2 { line-height:2.0em; }


/*폰트커스텀 기본사이즈 10px*/
.tit_h1 { font-size: 4.0rem; font-weight: 700; line-height: 135%; font-family: "hanwha"; letter-spacing: -2.5px; white-space: pre-line; word-break: keep-all;}
.tit_h2 { font-size: 3.2rem; font-weight: 600; line-height: 130%; font-family: "hanwha"; letter-spacing: -2.5px; white-space: pre-line; word-break: keep-all;}
.tit_h3 { font-size: 3.0rem; font-weight: 600; line-height: 130%; font-family: "hanwha"; letter-spacing: -1.5px; white-space: pre-line; word-break: keep-all;}
.tit_h4 { font-size: 2.8rem; font-weight: 600; font-family: "hanwha"; letter-spacing: -1.5px; white-space: pre-line; word-break: keep-all;}
.tit_h5 { font-size: 2.6rem; font-weight: 600; line-height: 130%; font-family: "hanwha"; letter-spacing: -1.5px; white-space: pre-line; word-break: keep-all; }
.tit_h6 { font-size: 2.4rem; word-break: keep-all;}

/*글자 줄임말/자르기*/
.line_text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: break-all;word-break: break-all;}
.line1_text { white-space: normal; overflow: hidden; text-overflow: ellipsis;word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;word-break: break-all;}
.line2_text { white-space: normal; overflow: hidden; text-overflow: ellipsis;word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;word-break: break-all;}
.line3_text { white-space: normal; overflow: hidden; text-overflow: ellipsis;word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;word-break: break-all;}



/*테이블 반응형때*/
.touch_scroll { overflow-x: auto; overflow-y: hidden; }

/* 버튼 */
.btn { height: var(--height); font-size: 1.5rem; line-height: 1.5; border-radius: 1.0rem; display: inline-flex; justify-content: center; align-items: center; font-weight:600; padding-left:1.5rem; padding-right:1.5rem;}
.btn-sm {height: var(--height_sm); font-size: 1.4rem; padding-left:1.2rem; padding-right:1.2rem; font-weight:400;}
.btn-md { height: var(--height_md); font-size: 1.5rem; font-weight:600; }
.btn-lg { height: var(--height_lg); font-size: 1.6rem; font-weight:600;	}
.btn-link{height:auto;padding:0;cursor: pointer;display: flex;align-items: center;border-radius: 0;background: transparent;flex-shrink: 0;}
.btn-icon{height:auto;padding:0;cursor: pointer;display: flex;align-items: center;border-radius: 0;background: transparent;flex-shrink: 0;}
.btn-icon img{flex-shrink: 0;}

.btn.disabled, .btn:disabled {
    opacity: 1;
	color:#fff;
	background:#E1E2E4;
	border-color:#E1E2E4;
}

.btn-outline-white {
  color: white;
  border-color: white;
}
.btn-outline-white:hover {
  color: white;
  background-color: transparent;
  border-color: white;
}
.btn-outline-white:focus, .btn-outline-white.focus {
  box-shadow: 0 0 0 0 rgba(83, 83, 83, 0.5);
}
.btn-outline-white.disabled, .btn-outline-white:disabled {
  color: white;
  background-color: transparent;
}
.btn-outline-white:not(:disabled):not(.disabled):active, .btn-outline-white:not(:disabled):not(.disabled).active, .show > .btn-outline-white.dropdown-toggle {
  color: white;
  background-color: transparent;
  border-color: white;
}
.btn-outline-white:not(:disabled):not(.disabled):active:focus, .btn-outline-white:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-white.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(83, 83, 83, 0.5);
}

/* 인풋 자동완성 초기화 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	-webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0px 1000px var(--bg) inset;
    box-shadow: 0 0 0px 1000px var(--bg) inset;
    transition: background-color 5000s ease-in-out 0s;
}

input:autofill,
input:autofill:hover,
input:autofill:focus,
input:autofill:active {
	-webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0px 1000px var(--bg) inset;
    box-shadow: 0 0 0px 1000px var(--bg) inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* 입력 인풋 */
.form-control {height: var(--height_lg);}
.form-control-sm {height: var(--height_sm); border-radius: 0.8rem;}
.form-control-md {height: var(--height_md); border-radius: 0.6rem;}
.form-control-lg {height: var(--height_lg);}
.form-control-auto {height: auto;}

/* 셀렉트 박스 */
.custom-select {
    padding-right: 3.5rem;
    background: url(../img/ic_ip_select.png)no-repeat center right 1.5rem;
    background-size: 2.0rem;
    padding-left: 1.5rem;
    font-size: 1.5rem;
    font-weight: 500;
    color: #000;
}

.custom-select_st2 {
    padding-right: 1.6rem;
    background: url(../img/arrow_down_g_20.png)no-repeat center right;
    background-size: 1.08rem;
    padding-left: 0;
    font-size: 1.4rem;
    font-weight: 500;
    color: #727A82;
    height: 2.6rem;
    border: 0;
    width: auto;
}


/* 날짜 선택 */
input.form-control[type="date"], input.form-control[type="time"]{position: relative;}
input.form-control[type="date"]::-webkit-calendar-picker-indicator, input.form-control[type="time"]::-webkit-calendar-picker-indicator{
    -webkit-appearance: none;
    background: none;
    width: 100%; height: 100%; cursor: pointer;
    position: absolute; left: 0; top: 0;
}
input.form-control[type="date"]::before, input.form-control[type="time"]::before{
    content: ''; display: block; width: 2.4rem; height: 2.4rem; position: absolute; top: 50%;
    transform: translateY(-50%); right: 1.6rem; background: var(--gray); cursor: pointer;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain;
}
input.form-control[type="time"]::before{
    -webkit-mask: var(--ic_time); mask: var(--ic_time);
}
input.form-control[type="date"]::before{
    -webkit-mask: var(--ic_date); mask: var(--ic_date);
}

/*패스워드*/
.form-password{position:relative;}
.form-password .form-control{padding-right:3.0rem;}
.form-password img{width:3.0rem;height:3.0rem;position:absolute;right:1.5rem;top:50%;margin-top:-1.5rem;cursor: pointer;}


.form_time_wr{position:relative;}
.form_time_wr .form-control{padding-right:5.0rem;}
.form_time_wr .form_time{color:var(--primary);font-size:1.4rem;position:absolute;right:1.6rem;top:50%;transform:translateY(-50%);}


/* 체크박스*/
.checks_wr{display: flex; flex-wrap: wrap; margin-bottom: -1rem; }
.checks_wr .checks{margin-right: 3rem; margin-bottom: 1rem;}

.checks label{display: flex; align-items: center; cursor: pointer;}
.checks label.chk_right{flex-flow: row-reverse; justify-content: flex-end;}
.checks input{display: none;}
.checks .ic_box {
    display: inline-block;
    width: 2.4rem;
    height: 2.4rem;
    background-image: url(../img/check01_off.png);
    background-position: center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.8rem;
	flex-shrink: 0;
}
.checks input:checked + .ic_box{background-image:url(../img/check01_on.png);}
.chk_right .ic_box{margin-right: 0; margin-left: 0.5rem;}
.checks input:checked ~ .chk_p{}
.chk_p{padding-top:0.1rem;}



.checks.primary_checks .ic_box{background-color: #eae9f0;border-radius: 50%;background-image:none;}
.checks.primary_checks input:checked + .ic_box{background-image: url(../img/check01_on.png);}


.radios_wr{display: flex; flex-wrap: wrap;}
.radios_wr .radios{margin-right: 2rem; margin-bottom: 1rem;}

.radios label{display: flex; align-items: center; cursor: pointer;}
.radios label.chk_right{flex-flow: row-reverse; justify-content: flex-end;}
.radios input{display: none;}
.radios .ic_box{display: inline-flex;flex-shrink: 0;position:relative; width: 1.4rem; height: 1.4rem; text-align: center; background-color: #fff;display: flex; align-items: center; justify-content: center; margin-right: 0.5rem;border-radius:2.0rem;border:1px solid #7A7C85;}
.radios input:checked + .ic_box{border-color: var(--primary);}
.radios input:checked + .ic_box:after {
    content: '';
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background-color: var(--primary);
    border: 0.24rem solid #fff;
}

/* Header & Navigation */
.hd {
  background: transparent;
  transition: background-color 0.3s ease;
  padding: 1rem 0;
  height: var(--hd_height);
}
.hd .navbar-brand { width: 10rem;}
/* 초기 상태: 투명/화이트 아이콘/화이트 텍스트/다크 버튼 */

/* 스크롤 후 상태 */
.hd.on {
  background:rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(30px);
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}
.hd.on .navbar-nav a.nav-link { color:#000 !important;}

/* 로고 SVG 색 전환 (inline path fill을 강제 덮어쓰기) */
.hd.on .navbar-brand svg path { fill:#000 !important; }

/* 버튼: primary 배경 + 흰 글자 */
.hd.on .btn {
  background: var(--bs-primary, #0d6efd);
  border-color: var(--bs-primary, #0d6efd);
  color:#fff;
}

.hd.on .navbar-nav a.nav-link.active {
  color: var(--bs-primary, #0d6efd) !important;
}


.navbar.on {
  background: rgba(0, 0, 0, 0.9) !important;
  backdrop-filter: blur(10px);
}


.navbar-nav .nav-link {
  font-weight: 600;
  font-size: 18px;
  color: var(--white) !important;
  margin: 0 15px;
  transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover {
  color: #bfdbfe !important;
}

.nav-item { display: flex; align-items: center;}

.navbar-toggler {
  border: none;
  padding: 0.25rem 0.5rem;
}

.navbar-toggler:focus {
  box-shadow: none;
}

.mb_100 { margin-bottom: 10rem;}

/*기본 공통*/
/* Main Banner */
.main-banner {
  position: relative;
  background: url(../img/main-banner.jpg) center/cover;
  background-repeat: no-repeat;
  overflow: hidden;
  display: flex;
  align-items: center;
  height: 81rem;
}

.main_text { padding: 0 1.5rem;}

.banner-bg {
  position: absolute;
  background: #3264e4;
  height: 1282px;
  left: -2px;
  top: -257px;
  width: 100%;
  z-index: 1;
}

.main-banner .container {
  position: relative;
  z-index: 10;
  margin-top: -5%;
}

.banner-title {
  font-weight: 700;
  font-size: 6rem;
  color: var(--white);
  line-height: 1.35;
  margin-bottom: 1.25rem;
}

.banner-subtitle {
  font-size: 2.0rem;
  font-weight: 400;
  color: var(--white);
  line-height: 1.4;
  margin-bottom: 2rem;
  opacity: 0.9;
}

.banner-image {
  opacity: 0.6;
  text-align: center;
  position: relative;
  animation: float 4s ease-in-out infinite;
}

.banner-image::before {
  content: '';
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  border-radius: 20px;
  z-index: -1;
  box-shadow: none !important;
  animation: glow 4s ease-in-out infinite alternate;
}

.banner-image img {
    width: 44.5rem;
    height: auto;
    border-radius: 8px;
    transition: transform 4s ease;
}

.banner-image:hover img {
  transform: scale(1.05);
}

/* AI Technology Image Animations */
@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-10px) rotate(1deg);
  }
  50% {
    transform: translateY(-5px) rotate(-1deg);
  }
  75% {
    transform: translateY(-15px) rotate(0.5deg);
  }
}


/* Additional floating elements for AI effect */
.banner-image::after {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  top: -50px;
  right: -50px;
  animation: particle-float 4s ease-in-out infinite;
}

@keyframes particle-float {
  0%, 100% {
    transform: translateY(0px) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-30px) scale(1.2);
    opacity: 1;
  }
}

/* Contact Form */
.contact-form {
  position: absolute;
  bottom: 5rem;
  left: 0;
  right: 0;
  z-index: 20;
}

.form-card {
  backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 1.6rem;
  padding: 3rem 5rem;
}

.form-title {
  font-weight: 700;
  font-size: 2.2rem;
  color: var(--white);
  line-height: 1.4;
}

.form-input {
  width: 100%;
  height: 54px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--white);
  font-size: 16px;
  font-weight: 500;
  padding: 16px 0;
  outline: none;
  transition: border-color 0.3s ease;
}

.form-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.form-input:focus {
  border-bottom-color: var(--white);
}

/* About Section */
.about-title {
  font-weight: 700;
  color: var(--black);
  line-height: 1.5;
  margin-bottom: 2rem;
}

.capability-card {
  background: var(--blue-light);
  height: 90px;
  border-radius: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.capability-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(50, 108, 255, 0.15);
}

.capability-card p {
  font-weight: 600;
  font-size: 18px;
  color: var(--black);
  text-align: center;
  line-height: 1.4;
  margin: 0;
}

/* Tech Section */
.tech-card {
  border-radius: 1.6rem;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 30.7rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tech-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.tech-card-light {
  background: var(--blue-light);
}

.tech-card-dark {
  background: var(--primary-color);
}

.tech-content h3 {
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 1rem;
}

.tech-card-light .tech-content h3 {
  color: var(--primary-color);
}

.tech-card-dark .tech-content h3 {
  color: var(--white);
}

.tech-content p {
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1.4;
}

.tech-card-light .tech-content p {
  color: var(--primary-color);
}

.tech-card-dark .tech-content p {
  color: var(--white);
}

.tech-icon {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 77%;
}


/* Services Section */
.service_bg {  
  padding: 9rem 0;
  background: linear-gradient(180deg, rgba(114, 137, 173, 0.10) -25.32%, rgba(114, 137, 173, 0.00) 99.91%);}

.service-card {
  background: var(--white);
  border: 1px solid #e5e7eb;
  border-radius: 1.6rem;
  padding: 3rem 4rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 49rem !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.service-card p.tit_h6 {
  font-weight: 700;
  color: var(--blue-dark);
  line-height: 1.3;
  margin-bottom: 3.0rem;
}

.service-icon {
  width: 182px;
  height: 182px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  margin-bottom: 1rem;
}





.service-card p.service_p {
  font-weight: 400;
  color: var(--black);
  line-height: 1.4;
  margin: 0;
}

.go_top {
    width: 5.2rem;
    height: 5.2rem;
    background: url(../img/go_top.png)no-repeat center;
    background-color: #ffffffff;
    border: 1px solid var(--gray-light);
    background-size: 1.4rem auto;
    z-index: 1000;
    border-radius: 50%;
    display: none;
    position: fixed;
    right: 1.6rem;
    bottom: 1.6rem;
}
.go_top.show{display: block;}

/* Process Section */
.process-item {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  justify-content: center;
  padding-left: 2rem;
  border-left: 2px solid rgba(178, 191, 222, 0.6);
  height: 100%;
  min-height: 200px;
}

#process .row { margin-bottom: 6.5rem;}
#process .row .col { margin-bottom: 6.5rem;}
.process-number {
  font-weight: 700;
  font-size: 2.8rem;
  color: #c1c7d0;
  line-height: 1;
}

.process-item .line_h2 {
  font-weight: 700;
  color: var(--blue-dark);
  line-height: 1.3;
  margin: 0;
}

.process-item p {
  color: var(--black);
  line-height: 1.5;
  margin: 0;
}

/* Clients Section */
  .expertise-tags .btn.active{
    background: var(--bs-primary, #0d6efd) !important;
    border-color: var(--bs-primary, #0d6efd) !important;
    color:#fff;
  }

  /* 부드러운 페이드 전환(선택 사항) */
  .projects-card .pj_card{
    transition: opacity .2s ease;
  }
  .projects-card .pj_card.is-hidden{
    opacity: 0;
  }
  
.expertise-card {
  background: var(--gray-dark);
  border-radius: 22px;
  padding: 5.2rem 4.7rem;
  height: 100%;
  min-height: 500px;
  position: relative;
}
.expertise-card .tit_name { color: rgba(255, 255, 255, 0.6);}

.expertise-card h2 {
  font-weight: 700;
  color: var(--white);
  line-height: 1.35;
  margin-bottom: 2rem;
}

.expertise-tags {
  margin-bottom: 2rem;
  z-index: 2;
  position: relative;
}

.expertise-tags .btn { font-size: 2.0rem !important; padding: 0.5rem 1.8rem; font-weight: 700 !important; 
    border-radius: 3.6rem !important; margin-bottom: 2.0rem; margin-right: 1.5rem;
    background-color: rgba(0,0,0,.02);
    backdrop-filter: blur(30px);
  }


.expertise-image {
  width: 266px;
  height: 264px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.1rem;
  position: absolute;
  right: 0;
  bottom: 0;
}


.projects-card {
  background: var(--blue-light);
  border-radius: 22px;
  padding: 5rem 4rem;
  height: 100%;
  min-height: 500px;
}

.projects-card h4 {
  font-weight: 700;
  color: var(--black);
  line-height: 1.3;
  margin-bottom: 2rem;
}

.project-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-height: 20rem;
    max-height: 33rem;
  height: auto;
  overflow-y: auto;
}

.project-item {
  background: var(--white);
  border-radius: 1.6rem;
  padding: 2.0rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.project-item p {
  font-weight: 600;
  font-size: 2.0rem;
  color: var(--black);
  line-height: 1.4;
  margin: 0;
}


/*엠케이디 타이틀*/
.tit_name { font-size: 1.4rem; font-weight: 700; color: rgba(0, 0, 0, 0.3); letter-spacing: -0.5px; margin-bottom: 0.5rem;}
.tit_name span { font-size: 1.4rem; font-weight: 400; letter-spacing: 0;}

/* CTA Section */
.cta-sectionpy-5 {
  background: linear-gradient(90deg, rgba(30, 58, 138, 0.8), rgba(30, 64, 175, 0.8));
  position: relative;
  overflow: hidden;
  background: url('../img/cta_bg.jpg') center/cover;
  padding: 18rem 0;
}

.cta-sectionpy-5 .tit_name { color: rgba(255, 255, 255, 0.6);}

.cta-sectionpy-5 .tit_h1 { margin-bottom: 4.5rem !important;}

.cta-sectionpy-5 .btn { width: 23.8rem;}
/* Footer */
.footer {
  background: #363636;
  color: #D2D5DF;
  padding: 7rem 0;
}
.footer a {color: #fff;}

.footer p.ft_copy { font-size: 1.5rem; font-weight: 400;}

.footer-logo img {
  width: auto;
  height: 4.0rem;
}

.company-info span { line-height: 1.4;}

.ft_righ {
  font-size: 1.5rem;
  color : #D2D5DF;
}

/* Utility Classes */
.icon {
  width: 22px;
  height: 22px;
}

/* Custom Button Styles */
.btn-dark {
  background: var(--black);
  border: none;
  transition: background-color 0.3s ease;
}

.btn-dark:hover {
  background: #000000;
}

.btn-outline-secondary {
  border-color: #6c757d;
  color: #6c757d;
}

.btn-outline-secondary:hover {
  background: #6c757d;
  border-color: #6c757d;
}
.contact_txt { margin-top: 1.5rem; text-align: right; font-size: 1.8rem;}
.contact_txt p.contact_tit { font-weight: 700; opacity: 0.8;}
.contact_txt p { font-size: 1.5rem;}
.footer .lh-base { font-size: 1.4rem;}



@media (min-width: 576px) {
    .container,.container-sm {
        max-width:100%;
    }
}

@media (min-width: 768px) {
    .container,.container-md,.container-sm {
        max-width:100%;
    }
}

@media (min-width: 992px) {
    .container,.container-lg,.container-md,.container-sm {
        max-width:100%;
    }
}

@media (min-width: 1200px) {
    .container,.container-lg,.container-md,.container-sm,.container-xl {
        max-width:1280px;
    }
}

@media (min-width: 1400px) {
    .container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl {
        max-width:1280px;
    }
}


/* Responsive Design */
@media (max-width: 991.98px) {
    .go_top {
    width: 4.2rem;
    height: 4.2rem;
    }
    .footer-logo img {
  width: auto;
  height: 32px;
}

#process .row .col { margin-bottom: 1.5rem;}
.contact_txt { text-align: left;}
.contact_tit { font-size: 1.8rem;}
.mb_100 { margin-bottom: 5.0rem;}
  .pc_only { display: none;}
  .mo_only { display: block;}

  .navbar-collapse { background-color: #fff;}

  #process .row .col:last-child { width: 100%;}
  .hd { height: 6.2rem;}
  .hd .navbar-brand { width: 9.6rem;}

  .navbar-toggler { font-size: 1.8rem;}

  .navbar-nav {
    text-align: center;
    margin-top: 1rem;
  }
  
  .navbar-nav .nav-link {
    margin: 0.5rem 0;
  }
  
  .main-banner {
    height: 82rem;
  }

  .contact-form .form-input { text-align: center;}

  .banner-title {
    text-align: center;
    font-size: 4.5rem;
    
  }
  .banner-image img { width: 40rem;}
  
  .banner-subtitle {
    text-align: center;
    font-size: 2.5rem;
    line-height: 1.5;
    margin-bottom: 3rem;
  }
  
  .about-title {
    text-align: center;
    margin-bottom: 4rem;
  }
  
  /* .mySwiper { margin: 0 1.6rem; overflow: visible;} */
  .about-title, #tech-stack .tit_h2, #services .tit_h2, #process .tit_h2, .cta-sectionpy-5 .tit_h1 { font-size: 3.6rem; font-weight: 700;}
  .expertise-card h2 { font-size: 3.0rem; margin-bottom: 3rem;}
  .projects-card h4 { font-size: 2.4rem;}
  
  .form-card .row {
    text-align: center;
  }
  
  .form-title {
    margin-bottom: 1.5rem;
  }
  
  .form-input {
    margin-bottom: 1rem;
  }
  #process .row{ margin-bottom: 0;}
  .process-item p.tit_h5 { font-size: 2.2rem;}
  .process-item p{ font-size: 1.8rem;}

  .expertise-card, .projects-card { padding: 3.0rem 2.5rem 2.5rem;}
  .expertise-card { overflow: hidden; min-height: auto; border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0 !important;}
  .expertise-image { width: 200px; height: 198px;}
  .projects-card { height: auto !important; min-height: auto; padding-top: 2.5rem; padding-bottom: 3.0rem; border-top-left-radius: 0; border-top-right-radius: 0;}

  .project-item {  border-radius: 1.0rem;}
  .project-item p { font-size: 1.5rem;}

  .expertise-tags .btn { margin-right: 1.2rem; font-size: 1.8rem !important; margin-bottom: 1.8rem;}
  
  .tech-icon { width: 65%;}
  
  /* Reduce animation intensity on mobile */
  .banner-image {
    animation: float-mobile 4s ease-in-out infinite;
  }
  
  .banner-image::before {
    animation: glow-mobile 4s ease-in-out infinite alternate;
  }

  
  .process-item {
    margin-bottom: 3rem;
    border-left : unset;
    background-color: #f8fafb;
    border-radius: 1.2rem;
  }

  
  .tech-content h3 { font-size: 2.6rem;}
  .tech-content p { font-size: 1.8rem;}

  .cta-sectionpy-5 { padding: 10.5rem 0;}
  .cta-sectionpy-5 .btn { width: 28rem; }
  #tech-stack .row .col:nth-child(4), #tech-stack .row .col:nth-child(5) { width: 50%;}
  #tech-stack .row .col:nth-child(4) .tech-icon, #tech-stack .row .col:nth-child(5) .tech-icon { width: 46%;}
  
}

@keyframes float-mobile {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5px);
  }
}



@media (max-width: 767.98px) {
  
    .hd { height: 6.5rem;}
    .hd .navbar-brand { width: 7.8rem;}
.mb_100 { margin-bottom: 3.0rem;}
    
  .about-title, #tech-stack .tit_h2, #services .tit_h2, #process .tit_h2, .cta-sectionpy-5 .tit_h1 { font-size: 3.0rem; font-weight: 700; margin-bottom: 2.0rem;}
  .expertise-card h2 { font-size: 2.8rem;}
  .projects-card h4 { font-size: 2.3rem;}

    .expertise-tags .btn {
      font-size: 1.6rem !important;
      margin-bottom: 1.8rem;
      PADDING: 1.2rem 1.5rem;
    }
  .about-title {
    font-size: 3.2rem;
  }
  
  .tech-card {
    height: 24rem;
    margin-bottom: 1rem;
  }

  #tech-stack .row .col:nth-child(4) .tech-icon, #tech-stack .row .col:nth-child(5) .tech-icon{ width: 14rem;}
      .tech-icon {
        width: 14rem;
    }
  #tech-stack .row .col:last-child { width: 100%;}

.service_bg{
  padding: 4rem 0rem 0rem;
}
  .service-card {
    padding: 3.5rem 2.5rem 0;
    margin-bottom: 1rem;
  }
  
  .expertise-card,
  .projects-card {
    margin-bottom: 2rem;
  }
  
  .process-item p.tit_h5 {
    font-size: 2.2rem;
    font-weight: 700;
  }
    
  .process-item p {
    font-size: 1.6rem;
    font-weight: 400;
  }



  .form-card {
    padding: 2.5rem;
  }
  
  .cta-section h2 {
    font-size: 2rem;
  }
  
  /* Disable complex animations on small screens */
  .banner-image::after {
    display: none;
  }
}

@media (max-width: 575.98px) {
    .footer p.ft_copy { font-size: 1.6rem;}
#tech-stack .row .col:nth-child(4) { width: 100%;}
  .banner-title {
    text-align: center;
    font-size: 4.0rem;
    
  }
  .banner-image img { width: 35rem;}
  
  .banner-subtitle {
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 3rem;
  }


  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .capability-card {
    height: auto;
    min-height: 80px;
  }
  
  .capability-card p {
    font-size: 16px;
  }
  
  
  .service-card h3 {
    font-size: 1.4rem;
  }
  
  .service-card p.tit_h6 { font-size: 2.4rem;}
  
  .process-item h3 {
    font-size: 1.6rem;
  }
  
 
  
  .cta-section h2 {
    font-size: 2.2rem;
  }
  
    
  .tech-card {
    height: 27rem !important;
    margin-bottom: 1rem;
  }
  
  #tech-stack .row .col:last-child { width: 100%;}

}

@media (max-width: 360.98px) {
  .tech-content h3 { font-size: 2.4rem;}
  .tech-content p { font-size: 1.6rem;}

  .about-title, #tech-stack .tit_h2, #services .tit_h2, #process .tit_h2, .cta-sectionpy-5 .tit_h1 { font-size: 3.0rem; font-weight: 700;}
  .expertise-card h2 { font-size: 2.8rem; margin-bottom: 3rem;}
  .projects-card h4 { font-size: 2.2rem;}
  .banner-subtitle br{ display: none !important;}
  .banner-title { font-size: 4.0rem;}
  .banner-subtitle { font-size: 1.8rem;}
  .form-title { font-size: 2.2rem;}

  /* Animation Classes */
  .fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .fade-in.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Smooth scrolling for anchor links */
  html {
    scroll-padding-top: 100px;
  }

  /* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 10px;

  }

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

  ::-webkit-scrollbar-thumb {
    background: #28292d;
    border-radius: 36rem;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #28292d;
  }

  ::-webkit-scrollbar:hover  {
    width: 15px;
  }

    div::-webkit-scrollbar {
    width: 10px;

  }

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

  div::-webkit-scrollbar-thumb {
    background: #28292d;
    border-radius: 36rem;
  }

  div::-webkit-scrollbar-thumb:hover {
    background: #28292d;
  }

  div::-webkit-scrollbar:hover  {
    width: 10px;
  }


}