:root {
  --main-color: #ff3356;

  --border-radius: 2rem;
  --box-shadow: 1px 3px 14px rgba(0,0,0,0.1);
}

.notScroll_modal {overflow: hidden; width: 100%; height: 100%; touch-action: none;}

/* header */
header {  width: 100%; height: 10rem; background-color: #fff; position: sticky; top: 0; z-index: 999;}
header .inner { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; position: relative;}
header .menu_area {display: flex; align-items: center; gap: 2rem;}

header#header-home .title_wrap,
header#header-back .title_wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
header#header-home .title_wrap h2,
header#header-back .title_wrap h2 { font-size: 3.2rem; font-weight: 600; letter-spacing: -0.2rem;}




/* header gnb */
.gnb { position: absolute; top: 0; right: 0; top: 0; left: 0; width: 100%; min-height: 100vh; background: rgba(0, 0, 0, 0.6); z-index: 999; display: none;}
.gnb_inner { position: absolute; top: 0; right: 0; background: #fff; min-height: 100vh; height: 100%; width: 67%; padding: 0 3rem 3rem; overflow-y: auto; z-index: 999;}
.gnb .gnb_top { height: 10rem; display: flex; align-items: center; justify-content: end; position: sticky; top: 0; background-color: #fff;}
.gnb .gnb_list { display: flex; flex-direction: column; gap: 4.6rem; padding-top: 1.6rem;} 
.gnb .gnb_list .gnb_item .menu {display: flex; align-items: center; justify-content: space-between; padding-bottom: 2.4rem; border-bottom: 1px solid #dbdbdb; width: 100%; text-align: left;}
.gnb .gnb_list .gnb_item:last-child .menu { border: 0;}
.gnb .gnb_list .gnb_item .menu .menu_box { display: flex; flex: 1; min-width: 0; align-items: center;  gap: 1.6rem;}
.gnb .gnb_list .gnb_item .menu .menu_box img { flex-shrink: 0;}
.gnb .gnb_list .gnb_item .menu .menu_box h4{ flex: 1; min-width: 0; font-size: 3.6rem; font-weight: 600; letter-spacing: -0.16rem;}
.gnb .gnb_list .gnb_item .menu.active .menu_box h4{ color: var(--main-color);}
.gnb .gnb_list .gnb_item .sub_gnb{ background-color: #f4f5f9; padding: 3.3rem; }
.gnb .gnb_list .gnb_item .sub_gnb .sub_gnb_list { display: flex; flex-direction: column; gap: 2.8rem;}
.gnb .gnb_list .gnb_item .sub_gnb .sub_gnb_list a { font-size: 32px; letter-spacing: -1.3px; color: #838487; font-weight: 500;}
.gnb .gnb_list .gnb_item .sub_gnb .sub_gnb_item.active a {color: #24274a;}



/* floating_btn_wrap */
.floating_btn_wrap {
  position: fixed;
  bottom: 156px;
  right: 32px;
  z-index: 999;
}

.floating_btn_wrap .floating_btn {
  background-color: var(--main-color);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 22px 38px;
  display: flex;
  align-items: center;
  gap: 13px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  cursor: pointer;
  font-size: 29px;
}


.floating_btn_wrap .top_btn {
  box-shadow: var(--box-shadow);
  width: 80px;
  aspect-ratio: 1/1;
  border-radius: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}


/* splash */
#splash {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100vh;
  background: #fff;
  display: flex; justify-content: center; align-items: center;
  z-index: 9999;
  overflow: hidden;
}
#splash img {
  transform: translateY(-50px);
}
#splash.hide { opacity: 0; transition: opacity 0.5s; pointer-events: none; }

