/* ===== 초기화 & 공통 ===== */
    *{box-sizing:border-box;margin:0;padding:0}
    body{font-family:'Malgun Gothic','맑은 고딕',sans-serif;line-height:1.6;color:#333}
    :root{
      --duration:.3s;
      --easing:ease-in-out;
      --primary-color:#0066cc;
      --secondary-color:#ff6600;
      --dark-color:#1a1a1a;
      --light-color:#f8f9fa;
    }
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }
    section {
      padding: 60px 0;
    }
    h2 {
      font-size: 2.5rem;
      margin-bottom: 30px;
      text-align: center;
      color: var(--dark-color);
    }
    h3 {
      font-size: 1.5rem;
      margin-bottom: 20px;
      color: var(--primary-color);
    }
    p {
      margin-bottom: 20px;
    }

    /* ===== 1차 메뉴 스타일 (이미지1 참고) ===== */
    .mega-menu{
      background:#fff;
      box-shadow:0 2px 10px rgba(0,0,0,0.1);
      position: sticky; /* 또는 fixed */
      z-index:1000;
      border-bottom:1px solid #eee;
    }
    .menu-container{
      max-width:1200px;
      margin:0 auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:0 20px;
    }
    .logo{
      font-size:24px;
      font-weight:bold;
      padding:20px 0;
      color:var(--primary-color);
      flex:0 0 auto;
    }
    .logo span{color:var(--secondary-color)}
    .main-menu{
      list-style:none;
      display:flex;
      margin-left:auto;
    }
    .menu-item{
      position:relative;
      margin:0 5px;
    }
    .menu-item>a{
      display:block;
      padding:20px 15px;
      color:#333;
      text-decoration:none;
      font-weight:500;
      font-size:16px;
      transition:all var(--duration) var(--easing);
      position:relative;
      cursor: pointer;
    }
    .menu-item>a:hover,
    .menu-item.active>a{
      color:var(--primary-color);
    }
    .menu-item>a:after{
      content:'';
      position:absolute;
      bottom:0;
      left:50%;
      width:0;
      height:3px;
      background:var(--primary-color);
      transition:all var(--duration) var(--easing);
      transform:translateX(-50%);
    }
    .menu-item>a:hover:after,
    .menu-item.active>a:after{
      width:100%;
    }
    .menu-item.has-submenu>a:after{
      content:'▾';
      margin-left:5px;
      font-size:12px;
      position:relative;
      background:none;
    }

    /* My Service 버튼 스타일 */
    .my-service-btn {
      background-color: var(--secondary-color);
      color: white;
      padding: 10px 20px;
      border-radius: 4px;
      text-decoration: none;
      font-weight: bold;
      margin-left: 20px;
      transition: background-color var(--duration) var(--easing);
      display: flex;
      align-items: center;
    }
    .my-service-btn i {
      margin-right: 8px;
    }
    .my-service-btn:hover {
      background-color: #e65c00;
      color: white;
    }

    /* ===== 2차 메뉴 스타일 (이미지2 참고) ===== */
    .submenu{
      width:100vw;
      opacity:0;
      position:fixed;
      top:65px;
      left:0;
      background:#fff;
      color:#333;
      overflow:hidden;
      transition:all var(--duration) var(--easing);
      box-shadow:0 10px 20px rgba(0,0,0,0.1);
      display:flex;
      justify-content:center;
      border-top:1px solid #eee;
      will-change:transform, opacity;
      visibility: hidden; /* 추가: 보이지 않을 때 요소 완전히 숨김 */
      height: 0; /* 추가: 높이 0으로 설정 */
    }
    .submenu-inner{
      width:100%;
      max-width:1200px;
      margin:0 auto;
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
      gap:30px;
      padding:30px 20px;
    }
    .menu-item.active .submenu{
      opacity:1;
      visibility: visible; /* 추가: 활성화 시 보이게 함 */
      height: auto; /* 추가: 높이 자동으로 조정 */
    }
    .submenu-column h4{
      margin:0 0 15px 0;
      padding-bottom:10px;
      border-bottom:2px solid var(--primary-color);
      color:var(--primary-color);
      font-size:18px;
    }
    .submenu-column ul{
      list-style:none;
    }
    .submenu-column li{
      margin-bottom:12px;
    }
    .submenu-column a{
      text-decoration:none;
      color:#555;
      transition:all var(--duration) var(--easing);
      display:block;
      padding:5px 0;
    }
    .submenu-column a:hover{
      color:var(--primary-color);
      transform:translateX(5px);
    }
    .submenu-column a:before{
      content:'·';
      margin-right:5px;
      color:var(--primary-color);
    }

    /* ===== CTA 버튼 스타일 ===== */
    .cta-button{
      display:inline-block;
      padding:10px 20px;
      background:var(--secondary-color);
      color:white;
      border-radius:4px;
      text-decoration:none;
      font-weight:bold;
      margin-top:15px;
      transition:background var(--duration) var(--easing);
    }
    .cta-button:hover{
      background:#e65c00;
      color:white;
    }

    /* ===== 모바일 메뉴 ===== */
    .menu-toggle{
      display:none;
      background:none;
      border:0;
      color:#333;
      font-size:24px;
      padding:15px;
      cursor:pointer;
      margin-left:auto;
    }


    /* ===== 배너 섹션 ===== */
    .banner {
      background: linear-gradient(135deg, #0066cc 0%, #004080 100%);
      color: white;
      padding: 80px 0;
      text-align: center;
    }
    .banner-content {
      max-width: 800px;
      margin: 0 auto;
    }
    .banner h1 {
      font-size: 3rem;
      margin-bottom: 20px;
    }
    .banner p {
      font-size: 1.2rem;
      margin-bottom: 30px;
    }
    .banner-buttons {
      display: flex;
      justify-content: center;
      gap: 20px;
      flex-wrap: wrap;
    }
    .btn-primary {
      background-color: var(--secondary-color);
      color: white;
      padding: 12px 30px;
      border-radius: 4px;
      text-decoration: none;
      font-weight: bold;
      transition: background-color var(--duration) var(--easing);
    }
    .btn-secondary {
      background-color: transparent;
      color: white;
      padding: 12px 30px;
      border-radius: 4px;
      text-decoration: none;
      font-weight: bold;
      border: 2px solid white;
      transition: all var(--duration) var(--easing);
    }
    .btn-primary:hover {
      background-color: #e65c00;
    }
    .btn-secondary:hover {
      background-color: white;
      color: var(--primary-color);
    }

    /* ===== 소개 섹션 ===== */
    .features {
      background-color: var(--light-color);
    }
    .feature-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 30px;
    }
    .feature-card {
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.05);
      padding: 30px;
      transition: transform var(--duration) var(--easing);
    }
    .feature-card:hover {
      transform: translateY(-10px);
    }
    .feature-icon {
      font-size: 2.5rem;
      color: var(--primary-color);
      margin-bottom: 20px;
    }
    
    .testimonials {
      background-color: white;
    }
    .testimonial-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 30px;
    }
    .testimonial-card {
      background-color: var(--light-color);
      border-radius: 8px;
      padding: 30px;
      position: relative;
    }
    .testimonial-quote {
      font-style: italic;
      margin-bottom: 20px;
    }
    .client-info {
      display: flex;
      align-items: center;
    }
    .client-avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: #ddd;
      margin-right: 15px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .client-avatar i {
      font-size: 2rem;
      color: #aaa;
    }
    .client-name {
      font-weight: bold;
    }
    .client-company {
      color: #777;
      font-size: 0.9rem;
    }

    @media(max-width:992px){
      .menu-toggle{display:block}
      .main-menu{
        flex-direction:column;
        width:100%;
        height:0;
        overflow:hidden;
        opacity:0;
        transition:all var(--duration) var(--easing);
        position:absolute;
        top:100%;
        left:0;
        background:#fff;
        box-shadow:0 10px 20px rgba(0,0,0,0.1);
        visibility: hidden;
      }
      .main-menu.show{
        height:auto;
        opacity:1;
        visibility: visible;
      }
      .menu-item{
        margin:0;
      }
      .menu-item>a{
        padding:15px 20px;
        border-bottom:1px solid #eee;
      }
    .submenu{
        position:static;
        width:100%;
        box-shadow:none;
        background:#f9f9f9;
        visibility: hidden;
        height: 0;
        opacity: 1; /* 추가: 모바일에서 opacity 문제 해결 */
        overflow: hidden; /* 추가: 높이 변화 시 내용 오버플로우 방지 */
        transition: height var(--duration) var(--easing), visibility var(--duration) var(--easing); /* 수정: 트랜지션 속성 명확히 지정 */
    }
    
    .menu-item.active .submenu {
        visibility: visible;
        height: auto;
        max-height: 5000px; /* 추가: 충분한 높이 제공 */
    }
    
      .submenu-inner{
        padding:15px;
        grid-template-columns:1fr;

      }
      .my-service-btn {
        margin: 15px 20px;
        justify-content: center;
      }
      .banner h1 {
        font-size: 2rem;
      }
      .banner p {
        font-size: 1rem;
      }
    }

/* ===== 푸터 섹션 ===== */
.footer {
  background-color: var(--dark-color);
  color: #fff;
  padding: 60px 0 30px;
}

.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  margin-bottom: 40px;
}

.footer-column h4 {
  font-size: 1.2rem;
  margin-bottom: 20px;
  color: #fff;
  position: relative;
  padding-bottom: 10px;
}

.footer-column h4:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background: var(--secondary-color);
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  color: #ccc;
  text-decoration: none;
  transition: color var(--duration) var(--easing);
  display: block;
}

.footer-links a:hover {
  color: #fff;
  transform: translateX(5px);
}

.footer-contact p {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.footer-contact i {
  margin-right: 10px;
  color: var(--secondary-color);
  width: 20px;
  text-align: center;
}

.social-icons {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transition: all var(--duration) var(--easing);
  color: #fff;
  text-decoration: none;
}

.social-icon:hover {
  background-color: var(--secondary-color);
  transform: translateY(-3px);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 30px;
  text-align: center;
  font-size: 0.9rem;
  color: #aaa;
}

.footer-logo {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 20px;
  display: block;
  text-decoration: none;
}

.footer-logo span {
  color: var(--secondary-color);
}

.newsletter-form {
  position: relative;
  margin-top: 20px;
}

.newsletter-input {
  width: 100%;
  padding: 12px 15px;
  border-radius: 4px;
  border: none;
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 14px;
}

.newsletter-input::placeholder {
  color: #aaa;
}

.newsletter-button {
  position: absolute;
  right: 3px;
  top: 3px;
  background-color: var(--secondary-color);
  color: white;
  border: none;
  padding: 9px 15px;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color var(--duration) var(--easing);
}

.newsletter-button:hover {
  background-color: #e65c00;
}

.footer-bottom a {
  color: #aaa;
  text-decoration: underline;
  transition: color var(--duration) var(--easing);
}

.footer-bottom a:hover {
  color: #fff;
}

@media (max-width: 768px) {
  .footer-container {
    grid-template-columns: 1fr;
  }
  
  .footer {
    padding: 40px 0 20px;
  }
  
  .social-icons {
    justify-content: center;
  }
  
  .footer-column h4 {
    text-align: center;
  }
  
  .footer-column h4:after {
    left: 50%;
    transform: translateX(-50%);
  }
  
  .footer-contact p {
    justify-content: center;
  }
  
  .footer-links {
    text-align: center;
  }
  
  .footer-links a:hover {
    transform: none;
  }
}