/* ========== Reset ========== */
*{margin:0;padding:0;box-sizing:border-box;}
ul,li{list-style:none;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
html,body{width:100%;}

/* -------------------------
   공통
-------------------------- */
.header_top{
  position:relative;
  z-index:1000;
}

/* 상단 메뉴 공통 */
.topmenu{
  display:flex;
  align-items:center;
  gap:80px;
}

.topmenu > li{
  position:relative;
}

.topmenu > li > a,
.topmenu .depth1 > a{
  display:block;
  padding:18px 0px 20px 0px;
  font-size:1.0rem;
  white-space:nowrap;
}

.gnb_top.gnb_menu_gray .topmenu .depth1 > a{font-size:1.05rem;	font-family:"Hyundaihead_R", 'dotum', '돋움', sans-serif;  font-weight: 500;}
.gnb_top.gnb_menu_white .topmenu .depth1 > a{font-size:1.15rem;	font-family:"Hyundaihead_M", 'dotum', '돋움', sans-serif;  font-weight: 600;}
.logo_text > a{
  letter-spacing:-0.5px;
  font-size:16px;
  margin-left:10px;
  font-family:"Hyundaihead_R", 'dotum', '돋움', sans-serif;
  font-weight: 500;
}

/* 서브메뉴 공통 (PC용 기본) */
.sub_menu{
  position:absolute;
  top:50px;
  left:0;
  width:200px;
  padding-bottom:60px;
  opacity:0;
  visibility:hidden;
  transform:translateY(15px);
  transition:all .25s ease;
}
.sub_menu li{display:block;}
.sub_menu li a{
  display:block;
  padding:5px 0px;
  font-size:1rem;
  letter-spacing: -0.5px;
  color:#000;
  font-family:'Hyundaihead_R', sans-serif;
  font-weight:500;
  line-height:1.2;
}

/* 모바일 토글 */
.mobile-toggle{
  display:none;
  width:28px;
  height:28px;
  border:none;
  background:none;
  padding:0;
  cursor:pointer;
}
.mobile-toggle span{
  display:block;
  height:2px;
  margin:6px 0;
  background:#000;
}

/* main_section 내 색反전 (필요 시) */
.main_section .logo_top_img img{
  filter: invert(1) brightness(1.3);
}
.main_section .white_bg .topmenu .depth1 a{
  color:#fff;
}

.gnb_menu_white.is-hover .logo_top_img img,
.main_section .gnb_menu_white.is-scrolled .logo_top_img img{
  filter:none;
}


/* =======================
   PC (min-width: 992px)
======================= */
@media (min-width: 992px){

  .gnb_menu_gray{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:2;
  }
  .gnb_menu_white{
    position:fixed;
    top:40px;
    left:0;
    width:100%;
    z-index:1;

    background:transparent;
    box-shadow:none;
    transition:background-color .3s ease, box-shadow .3s ease;
  }

  .gray_bg .container{
    width:100%;
    max-width:1120px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    position:relative;
    height:40px;
  }

  .gnb_menu_white .container{
    width:100%;
    max-width:1120px;
    margin:0 auto;
    display:flex;
    align-items:top;
    justify-content:space-between;
  }

  /* 회색 GNB 영역 */
  .gnb_menu_gray .gray_bg{
    background:#F5F3F0;
    overflow:hidden;
    transition:height .35s ease;
  }

  /* 흰색 GNB 높이 컨트롤 영역 */
  .gnb_menu_white .white_bg{
    overflow:visible;
    background:transparent;
    transition:height .35s ease;
  }

  /* hover 시 서브메뉴 노출 */
  .gray_bg:hover .sub_menu,
  .white_bg:hover .sub_menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }

  /* hover 시 높이 auto */
  .gnb_menu_gray:hover .gray_bg{
    height:auto;
  }
  .gnb_menu_white:hover .white_bg{
    height:auto;
  }

  .white_bg .topmenu { gap: 60px;}

  /* 스크롤/hover 시 흰배경 + 그림자 */
  .gnb_menu_white.is-hover,
  .gnb_menu_white.is-scrolled{
    background:#fff;
    /*box-shadow:0 6px 20px rgba(0,0,0,0.10);*/
  }
}

/* =======================
   Mobile (max-width: 991px)
======================= */
@media (max-width: 991px){

  /* 회색 GNB는 모바일에서 사용 안 함 */
  .gnb_top.gnb_menu_gray{
    display:none !important;
  }

  /* 흰색 GNB를 상단 고정 헤더로 사용 */
  .gnb_top.gnb_menu_white{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:2000;
  }

  .gnb_menu_white .container{
    width:100%;
    max-width:1120px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 15px;
  }

  .logo_top_img img{height:40px;}

  /* 모바일에서 로고 항상 보이게 */
  .gnb_menu_white .logo_top_img img{
    filter:none !important;
  }

  /* 모바일 햄버거 버튼 */
  .mobile-toggle{
    display:block;
    width:25px;
    height:25px;
    border:none;
    background:none;
    padding:0;
    cursor:pointer;
    position:absolute;right:20px;top:15px;
    z-index:1100;
  }

  .logo_top_img_moblie img{width:120px;position:absolute;left:15px;top:17px;}

  .mobile-toggle span{
    display:block;
    height:2px;
    margin:8px 0;
    background:#fff;
  }

  .gnb_menu_white .white_bg{
    position:static;
  }

  .topmenu > li{width:100%;}

  /* ===== 오른쪽 슬라이드 메뉴 컨테이너 (속도 더 자연스럽게) ===== */
  .gnb_top.gnb_menu_white .topmenu{
    position:fixed;
    top:0px;
    right:-90%;
    width:90%;
    height:100vh;
    background:#f3f1ee;
    flex-direction:column;
    align-items:flex-start;
    padding:22px 20px;
    gap:0;
    box-shadow:-4px 0 14px rgba(0,0,0,0.18);
    overflow-y:auto;
    will-change:right;

    transition:right 520ms cubic-bezier(0.25, 0.1, 0.25, 1);
  }

  .gnb_top.gnb_menu_white.menu-open .topmenu{
    right:0;
  }

  /* 상단 닫기 버튼 영역 */
  .gnb_top.gnb_menu_white .mobile-close .btn-close{
    position:absolute;right:-8px;top:-125px;
  }

  .gnb_top.gnb_menu_white .mobile-close .btn-close{
    border:none;
    background:none;
    margin-bottom:30px;
    font-family:"Hyundaihead_M", 'dotum', '돋움', sans-serif;
    font-weight:700;
  }

  .gnb_top.gnb_menu_white .mobile-close .btn-close strong{
    font-family:"Hyundaihead_M", 'dotum', '돋움', sans-serif;
    font-size:1.40rem;
    font-weight:700;
  }

  /* ========= 아코디언 depth1 ========= */
  .gnb_top.gnb_menu_white .has-sub > .depth1{
    position:relative;
    width:100%;
    cursor:pointer;
    margin-bottom:6px;
  }

  .gnb_top.gnb_menu_white .has-sub > .depth1 > a{
    display:block;
    width:100%;
    margin-top:16px;
    padding:0;
    padding-right:28px;
    letter-spacing:-0.5px;
    font-size:1.25rem;
    color:#888;
    transition:color .25s ease;
  }

  .gnb_menu_white.is-hover .topmenu .depth1 a,
  .gnb_menu_white.is-scrolled .topmenu .depth1 a{
    color:#888;
  }

  .gnb_top.gnb_menu_white .has-sub.open > .depth1 > a{ color:#000; }

  /* ===== acc-icon (더 자연스러운 모션) ===== */
  .acc-icon{
    position:absolute;
    right:0;
    top:50%;
    width:16px;
    height:16px;
    transform:translateY(-50%);
  }

  .acc-icon::before,
  .acc-icon::after{
    content:"";
    position:absolute;
    background:#888;
    transition:
      transform 420ms cubic-bezier(0.25, 0.1, 0.25, 1),
      opacity 300ms ease,
      background 200ms ease;
  }

  .acc-icon::before{
    top:50%;
    left:0;
    width:100%;
    height:2px;
    transform:translateY(-50%);
  }

  .acc-icon::after{
    left:50%;
    top:0;
    width:2px;
    height:100%;
    transform:translateX(-50%);
  }

  .has-sub.open .acc-icon::before{ background:#000; }
  .has-sub.open .acc-icon::after{
    transform:translateX(-50%) scaleY(0);
    opacity:0;
  }

  .mobile_logo{margin-top:30px;margin-bottom:15px;}

  /* ========= sub_menu (체감 느리고 자연스럽게) ========= */
  .gnb_top.gnb_menu_white .sub_menu{
    position:static;
    width:100%;
    height:0;
    overflow:hidden;

    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);

    padding:0 0 0 10px;

    transition:
      opacity 260ms ease,
      transform 360ms cubic-bezier(0.25, 0.1, 0.25, 1),
      visibility 0ms linear 420ms;
  }

  .gnb_top.gnb_menu_white .has-sub.open > .sub_menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);

    padding:0px 0 0px 0;

    margin-top:0px;

    transition:
      opacity 300ms ease 120ms,
      transform 420ms cubic-bezier(0.25, 0.1, 0.25, 1) 80ms,
      visibility 0ms;
  }

  .sub_menu li a{padding:9px 0px;}
}

/* ===== 이하 기존 스타일 유지 ===== */

.main_section .gnb_top.gnb_menu_gray .topmenu_top li a{color:#fff;}
.gnb_top.gnb_menu_gray.is-scrolled  .topmenu_top li a{color:#000;}
.gnb_top.gnb_menu_gray.is-hover  .topmenu_top li a{color:#000;}

.main_section .gnb_top.gnb_menu_gray .topmenu li a{color:#fff;}
.gnb_top.gnb_menu_gray.is-scrolled  .topmenu li a{color:#000;}
.gnb_top.gnb_menu_gray.is-hover  .topmenu li a{color:#000;}

.gnb_top.gnb_menu_gray.is-scrolled .topmenu .depth1 > a{padding-top:18px;}

.gnb_top.gnb_menu_gray .home_bk{display:block;}
.gnb_top.gnb_menu_gray .home_wh{display:none;}

.gnb_top.gnb_menu_gray.is-scrolled .home_bk{display:block;}
.gnb_top.gnb_menu_gray.is-scrolled .home_wh{display:none;}

.gnb_top.gnb_menu_gray.is-hover .home_bk{display:block;}
.gnb_top.gnb_menu_gray.is-hover .home_wh{display:none;}

.main_section .gnb_top.gnb_menu_gray .topmenu .sub_menu li a:hover{color:#29cb7e;}
.sub_menu li:hover a{color:#29cb7e;}

/* 회색 GNB: 기본 투명 */
.gnb_menu_gray .gray_bg {
  background: rgba(255,255,255,0);
  transition: background .35s ease;
}

/* 스크롤 후 배경 */
.gnb_menu_gray.is-scrolled .gray_bg {
  background: #f5f3f0;
}

/* ★ PC : 메뉴 hover 시 배경 항상 켜짐 */
.gnb_menu_gray.is-hover .gray_bg {
  background: #f5f3f0;
}
.gnb_top.gnb_menu_gray .topmenu{margin-left:80px;}

/* ===== mobile-dim (중복 없이 1개만) ===== */
.mobile-dim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.mobile-dim.on {
  opacity: 1;
  visibility: visible;
}

.btn-close {
  position: relative;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

/* X 아이콘 박스 */
.icon-x {
  position: relative;
  display: inline-block;
  width: 22px;
  height:22px;
}

/* 공통 막대 스타일 */
.icon-x::before,
.icon-x::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 3px;
  background: #000;
  transform-origin: center;
}

/* 대각선 1 */
.icon-x::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

/* 대각선 2 */
.icon-x::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.sub_menu li a:hover{color:#29cb7e  !important;}

/* 닫기 버튼 li는 PC에서는 숨김 */
@media (min-width: 992px){
  .logo_top_img img{width:160px;padding:20px 0px;}
  .sub_section .gnb_menu_gray{background: #f5f3f0;}

  .gnb_menu_white.is-hover .topmenu .depth1 a,
  .main_section .gnb_menu_white.is-scrolled .topmenu .depth1 a{
    color:#222;
  }

  .mobile-close{display:none;}
  .mobile_logo{display:none;}
  .topmenu_top li.logo_text{margin-top:2px;}
  .logo_text.mobile_logo_text{display:none;}

  .main_section .gnb_top.gnb_menu_gray .home_bk{display:none;}
  .main_section .gnb_top.gnb_menu_gray .home_wh{display:block;}
  .main_section .gnb_top.gnb_menu_gray.is-scrolled  .home_wh{display:none;}
  .main_section .gnb_top.gnb_menu_gray.is-scrolled .home_bk{display:block;}

  .main_section .gnb_top.gnb_menu_gray.is-hover  .home_wh{display:none;}
  .main_section .gnb_top.gnb_menu_gray.is-hover .home_bk{display:block;}
}

@media (max-width: 991px){
  .feature_section .gnb_top.gnb_menu_white,
  .space_section .gnb_top.gnb_menu_white,
  .main_theme_section .gnb_top.gnb_menu_white{background:#f5f3f0;height:64px;z-index:2000;}

  .feature_section .gnb_top.gnb_menu_white.menu-open,
  .space_section .gnb_top.gnb_menu_white.menu-open,
  .main_theme_section .gnb_top.gnb_menu_white.menu-open{background:none;height:64px;z-index:2000;}

  .feature_section .gnb_top.gnb_menu_white.menu-open.is-scrolled:before,
  .feature_section.gnb_top.gnb_menu_white.is-scrolled.menu-open:before{background:none;}
  .space_section .gnb_top.gnb_menu_white.menu-open.is-scrolled:before,
  .space_section .gnb_top.gnb_menu_white.is-scrolled.menu-open:before{background:none;}
  .main_theme_section .gnb_top.gnb_menu_white.menu-open.is-scrolled:before,
  .main_theme_section .gnb_top.gnb_menu_white.is-scrolled.menu-open:before{background:none;}

  .gnb_menu_white .logo_top_img img{width:120px;}
  .topmenu > li > a, .topmenu .depth1 > a{padding:0px;}

  .mobile_logo{display:block;}
  .mobile_logo img{width:174px;}

  .gnb_menu_white .logo_top_img img.bk_logo{display:none;}
  .gnb_top.gnb_menu_white.is-scrolled .logo_top_img img.bk_logo{display:none;}

  .gnb_menu_white .logo_top_img{
    z-index:599;
    position:relative;
  }

  .mobile-dim.on{z-index:500;}

  .gnb_top.gnb_menu_white.is-scrolled.menu-open .topmenu{z-index:4050;}
  .gnb_top.gnb_menu_white.menu-open .topmenu{z-index:4050;}

  .gnb_menu_white .white_bg{position:relative;}
  .mobile-toggle{top:15px;}

  .gnb_top.gnb_menu_white.is-scrolled{background:#fff;}
  .gnb_top.gnb_menu_white.is-scrolled .container{height:74px;}
  .gnb_top.gnb_menu_white.is-scrolled .mobile-toggle span{background:#222;}
  .gnb_top.gnb_menu_white.is-scrolled .logo_top_img_moblie img{filter: invert(1) brightness(1.3);}

  .gnb_top.gnb_menu_white.menu-open .logo_top_img_moblie img{opacity:0.15;}
  .gnb_top.gnb_menu_white.menu-open.is-scrolled:before,
  .gnb_top.gnb_menu_white.is-scrolled.menu-open:before{
    position:absolute;content:'';
    width:100%;height:84px;left:0px;top:0px;
    background: rgba(0,0,0,.85);
  }

  .gnb_top.gnb_menu_white.menu-open.is-scrolled .logo_top_img_moblie img{opacity:1;}
  .gnb_top.gnb_menu_white.is-scrolled.menu-open .logo_top_img_moblie img{opacity:1;}

  .logo_text.mobile_logo_text{position:relative;display:block;}
  .logo_text.mobile_logo_text .bk_home{position:absolute;left:0px;top:2px;}
  .logo_text.mobile_logo_text .bk_home img{width:16px;}
  .logo_text.mobile_logo_text .bktext{font-family:"Hyundaihead_R", 'dotum', '돋움', sans-serif; font-weight: 500;padding-left:20px;}

  .sub_menu li a{padding:9px 0px;}
}

@media (max-width: 767px){
  .container {
    margin: 0 auto;
    width: calc(100% - 0px);
    padding-left: 15px;
    padding-right: 15px;
  }

  .logo_top_img_moblie img{width:100px;top:14px;}
  .gnb_menu_white .logo_top_img{width:100px;}
  .mobile-toggle{width:18px;height:25px;right:15px;}
  .mobile-toggle span{margin:6px 0px;}

  .mobile-toggle{top:14px;}
  .gnb_top.gnb_menu_white.is-scrolled .container{height:60px;}
}