/* #region utility class */
.relative{ position: relative; }
/* #endregion */

body.sidebar-expanded{ overflow: hidden; }

.header {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #f8eef3;
  z-index: 99;
}
.header .nav {
  display: flex;
  align-items: stretch;
  height: var(--header-height);
  position: relative;
  width: 100%;
  justify-content: space-between;
  position: relative;
}
@media screen and (max-width: 767px) {
  .header .nav {
    --header-height: 61.28rem;
  }
}
.header .nav-logo {
  display: flex;
  align-items: stretch;
  z-index: 1;
  position: absolute;
  left: 49.9%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
@media screen and (max-width: 767px) {
  .header .nav-logo {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
  }
}
.header .nav-logo a {
  display: flex;
  align-items: center;
}
.header .nav-logo a .logo {
  width: auto;
  height: calc(var(--header-height) * 0.70625);
}
@media(max-width:767px){
  .header .nav-logo a .logo {
    height: calc(var(--header-height) * 0.78);
  }
}
.header .nav-menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 17rem;
  width: 360rem;
  padding-bottom: .2%;
}
@media screen and (max-width: 767px) {
  .header .nav-menu {
    flex-direction: row;
    width: auto;
    flex: 1;
    margin-left: auto;
    align-items: center;
    justify-content: flex-end;
    gap: 6rem;
  }
}
.header .nav-menu .gnb {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 4rem;
}
@media screen and (max-width: 767px) {
  .header .nav-menu .gnb { gap: 8rem;
    /* display: none; */
  }
}
.header .nav-menu .gnb li a {
  padding: 0 14.9rem;
  font-weight: 600;
  font-size: 15rem;
  letter-spacing: -.01em;
  position: relative;
  color: #878787;
}
.header .ph-star{ font-size: 13rem; }
.header .nav-menu .gnb li a::after {
  display: block;
  content: "";
  width: 1px;
  height: 70%;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: var(--grey3);
}
.header .nav-menu .gnb li a:hover,
.header .nav-menu .gnb li a.active {
  color: #25519e;
}
.header .nav-menu .gnb .menu-item4 .menu-link, .header .nav-menu .gnb .menu-item7 .menu-link {
  padding-right: 0;
}
.header .nav-menu .gnb .menu-item4 .menu-link::after, .header .nav-menu .gnb .menu-item7 .menu-link::after {
  display: none;
}
.global-phone {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7rem;
  background: var(--accent2);
  color: var(--white);
  padding: 6rem 18rem 6rem 22rem;
  border-radius: 50rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  align-self: flex-end;
}
.global-phone > p {
  font-weight: 700;
  font-size: 16rem;
  letter-spacing: -.01em;
}
.global-phone > h1 {
  font-size: 17rem;
  font-weight: 800;
  letter-spacing: -.01em;
}
@media screen and (max-width: 767px) {
  .header .global-phone { display: none; align-self: center; }
}
.sidebar-toggle-btn{ display: inline-flex; align-items: center; gap: 4rem; padding: 8rem 17rem 8rem 16rem; background: #f15804; border-radius: 5em; font: 700 14rem 'Freesentation', var(--font1), var(--font2), -apple-system, system-ui, sans-serif; color: #fff;
  @media(min-width:768px){ position: absolute; visibility: hidden; opacity: 0; }
}
.sidebar-toggle-btn__icon{ display: block; width: 14rem; height: auto; fill: currentColor; }
@media(max-width: 767px) {
  #top .gnb .menu{ display: none; width: 32rem; aspect-ratio: 1; background: #194ca5 no-repeat 50% / 15rem; border-radius: 50%;
    &.menu-item1{ display: block; background-image: url('/images/common/gnb-login.svg'); }
    &.menu-item2{ display: block; background-image: url('/images/common/gnb-signup.svg'); }
    a{ font-size: 0; }
  }
}

.header .nav-menu .mmenu {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 10rem;
  margin-left: auto;
  position: relative;
  height: 100%;
}
.header .nav-menu .mmenu-btn {
  display: flex;
  display: none;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: flex-end;
  flex-shrink: 0;
  flex-basis: 35rem;
  transition: all 0.4s;
  position: relative;
  height: 60%;
}
@media screen and (min-width: 767px) and (max-width: 2560px) {
  .header .nav-menu .mmenu-btn {
    display: none;
  }
}
.header .nav-menu .mmenu-btn span {
  height: 3px;
  width: 100%;
  background: var(--black);
}
.header .nav-menu .mmenu-btn:hover span:nth-child(2) {
  width: 100%;
  transition: all 0.4s;
}
.header .nav-menu .mmenu-btn.active span:first-child {
  transform: rotate(45deg) translate(9rem, 7rem);
  transition: all 0.4s;
}
.header .nav-menu .mmenu-btn.active span:nth-child(2) {
  opacity: 0;
  transition: all 0.4s;
}
.header .nav-menu .mmenu-btn.active span:last-child {
  transform: rotate(-45deg) translate(7rem, -6rem);
  transition: all 0.4s;
}
.header .nav-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 19rem;
  width: 340rem;
  padding-bottom: .3%;
}
@media screen and (max-width: 767px) {
  .header .nav-info {
    display: none;
  }
}
.header .nav-info .slogan h1 {
  font-size: 15rem;
  font-weight: 800;
  color: #1277d5;
}
.header .nav-info .slogan p {
  font-size: 12rem;
  line-height: 15rem;
  color: rgba(22, 22, 22, 0.7);
  font-weight: 500;
}
.header .nav-info .user {
  font-size: 14rem;
  line-height: 18rem;
  font-weight: 600;
  color: var(--black);
}

.header[type=fixed] {
  position: fixed;
}

.header[type=sticky] {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.header[type=sticky].fixed {
  position: fixed;
  top: 0;
}

.header[type=scroll] {
  position: relative;
}

.main-hero {
  display: flex;
  flex-direction: column;
  padding-block: 11rem 19rem;
  background: #faf4fa;
}
.main-hero .inr{ position: relative; }
.main-hero-title {
  margin-bottom: 9rem;
  display: flex;
  align-items: baseline;
  gap: 17rem;
}
.main-hero-title h1 {
  font-weight: 700;
  font-size: 20rem;
  letter-spacing: -.025em;
  color: var(--primary);
}
.main-hero-title p {
  flex: 1;
  font-size: 14rem;
  letter-spacing: -.01em;
  color: #94a1a4;
}
.main .swiper-wrapper {
  height: var(--hero-height);
}
@media(min-width:768px){
  .main-hero .scrollbar{ display: none; }
}
@media screen and (max-width: 767px) {
  .main-hero{
    padding-block: 10rem 19rem;
  }
  .main .swiper-wrapper {
    margin-bottom: 30rem;
    
  }
}
.main-hero-slider .swiper-wrapper{
  justify-content: space-between;
}
.main .swiper-slide {
  overflow: hidden;
}
.main .swiper-slide figure {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 5rem;
  position: relative;
}
.main .swiper-slide figure img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transition: all 0.4s;
}
.main .swiper-slide figure .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  bottom: 0;
  left: 0;
  background: var(--accent);
  color: var(--white);
  width: 100%;
  border-radius: 5rem;
  padding: 3rem 19rem;
  font-weight: 500;
  font-size: 12rem;
}
.main .swiper-slide figure .title .tit {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: var(--accent1);
  font-weight: 700;
}
.main .swiper-slide figure:hover img {
  scale: 1.05;
}

/* 메인 히어로 각 타입별 스타일 */
[data-type="1"]{ --bg-color: #b210a2; --color: #ffff00; }
[data-type="2"]{ --bg-color: #0a1ed7; --color: #ffff00; }
[data-type="3"]{ --bg-color: #ff4d00; --color: #091bf5; }
[data-type="4"]{ --bg-color: #127E08; --color: #ffff00; }
[data-type="5"]{ --bg-color: #2298D6; --color: #ffff00; }
[data-type="6"]{ --bg-color: #AC1E13; --color: #ffff00; }
.main .swiper-slide figure .title{ background: var(--bg-color); }
.main .swiper-slide figure .title .tit{ color: var(--color); }

.main .swiper-pagination {
  all: unset;
  display: flex;
  justify-content: end;
  gap: 9px;
}
.main .swiper-pagination-bullet {
  all: unset;
  display: block;
  width: 9px;
  aspect-ratio: 1;
  background: #989898;
  border-radius: 50%;
  cursor: pointer;
}
.main .swiper-pagination-bullet-active {
  background: var(--primary);
}

.main-hero .scrollbar{ height: 4px; background: rgba(152, 152, 137, 0.25); }
.main-hero .swiper-scrollbar-drag{ background: var(--primary); }
@media(min-width:768px){
  .main .swiper-pagination{ position: absolute; top: 16px; right: 0; }
  
}
@media screen and (max-width: 767px) {
  .main .swiper-pagination {
    display: none;
    margin-top: -1px;
    justify-content: center;
    /* gap: 4px; */
  }
  /* .main .swiper-pagination-bullet {
    width: 5px;
  } */
}

.container {
  display: grid;
  grid-template-columns: 120rem 1fr 350rem;
  grid-template-areas: "aside content sidebar";
  -moz-column-gap: 40rem;
  column-gap: 40rem;
}
@media screen and (max-width: 767px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-areas: "content" "aside" "sidebar";
  }
}
@media screen and (min-width: 767px) and (max-width: 1024px) {
  .container {
    grid-template-columns: 1.6fr 1fr;
    grid-template-areas: "content sidebar" "content aside";
    -moz-column-gap: 20rem;
    column-gap: 20rem;
    position: relative;
  }
}

.main-content, .sub-content {
  grid-area: content;
}
.main-section-01, .sub-section-01 {
  display: flex;
  flex-direction: column;
  margin-top: 30rem;
  margin-bottom: 50rem;
}
@media(max-width:767px){
  .main-section-01{
    margin-top: 15rem;
  }
}

.box{ position: -webkit-sticky; position: sticky; top: 40rem; }
.box, .box2 {
  display: flex;
  flex-direction: column;
  gap: 10rem;
  grid-area: aside;
}
@media screen and (max-width: 767px) {
  .box, .box2 {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20rem;
    margin-bottom: 50rem;
  }
  .box{ all: unset; position: fixed; right: 10rem; bottom: 70rem; z-index: 98;
    .bx:not(.con){ display: none; }
    .bx.con{ min-height: auto; }
    .bx.con:not(.is-expanded){ display: none; }
    .bx.con p{ font-size: 13rem; }
    .con .submit{ font-size: 14rem; }
  }
}
@media screen and (min-width: 767px) and (max-width: 1024px) {
  .box, .box2 {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20rem;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    display: none;
  }
}
.box .bx, .box2 .bx {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* gap: 5rem; */
  border-radius: 15rem;
  text-align: center;
  font-size: var(--fs16);
}
@media screen and (max-width: 1024px) {
  .box .bx, .box2 .bx {
    flex: 1 1 calc(50% - 10rem);
    min-height: 300rem;
  }
}
@media screen and (min-width: 767px) and (max-width: 1024px) {
  .box .bx, .box2 .bx {
    min-height: 100rem;
  }
}
.box .bx .tit, .box2 .bx .tit {
  font-size: var(--fs16);
  color: var(--black);
  font-weight: 700;
}
.box .bx .phone, .box2 .bx .phone {
  margin-top: 9rem;
  font-weight: 700;
  font-size: 18rem;
  line-height: 22rem;
}
.box .bx p, .box2 .bx p {
  margin-top: 5rem;
  font-size: 13rem;
  line-height: 16rem;
  color: #fff;
}
:is(.box, .box2) .bx img{
  margin-inline: auto;
  display: block;
  max-width: 100%;
}
.box .bx form, .box2 .bx form {
  display: flex;
  flex-direction: column;
  width: 84%;
  position: relative;
}
#input-container{
  display: grid;
  gap: 4rem;
}
.box .bx .input, .box .bx .textarea, .box2 .bx .input, .box2 .bx .textarea {
  border: 2px solid #e7eff1;
  border-radius: 5rem;
  padding: 10.4rem 12rem;
  text-align: right;
  font-size: 13rem;
  color: var(--primary2);
  font-weight: 500;
  height: auto;
  width: 100%;
}
.box .bx .btn, .box2 .bx .btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 29rem;
  height: 29rem;
  border-radius: 30rem;
  border: 2px solid var(--primary2);
  background: var(--white);
  color: var(--primary2);
  position: absolute;
  top: 52%;
  left: 48%;
  transform: translateX(-50%) translateY(-50%);
}
:is(.box, .box2) .blue {
  background: rgb(109, 159, 245);
  background: linear-gradient(180deg, rgb(109, 159, 245) 0%, rgb(131, 172, 243) 100%);
  color: var(--white);
}
:is(.box, .box2) .blue{
  padding-block: 14rem 13rem;
  cursor: pointer;
}
:is(.box, .box2) .blue .tit{
  font-size: 15rem;
}
:is(.box, .box2) .blue img{
  margin-top: 7rem;
}
:is(.box, .box2) .blue p{
  color: rgba(255, 255, 255, 0.7);
}
:is(.box, .box2) .naver{
  background: rgb(15, 203, 166);
  background: linear-gradient(0deg, rgb(15, 203, 166) 0%, rgb(1, 234, 89) 100%);
  color: var(--white);
}
:is(.box, .box2) .naver{
  padding-block: 9rem 3rem;
}
:is(.box, .box2) .naver p{
  margin-top: 3rem;
  font-size: 14rem;
}
:is(.box, .box2) .naver strong{
  font-weight: 900;
}
:is(.box, .box2) .naver [src="/images/naver.png"]{
  margin: -12rem -5.416666665% 0;
  max-width: none;
  width: 110.83333333%;
}
:is(.box, .box2) .calc {
  background: rgb(241, 174, 73);
  background: linear-gradient(0deg, rgb(241, 174, 73) 0%, rgb(249, 213, 68) 100%);
  color: var(--white);
}
:is(.box, .box2) .calc{
  padding-block: 15rem 11rem;
}
:is(.box, .box2) .calc .tit{
  margin-top: 6rem;
  display: block;
  font-weight: 700;
  font-size: 18rem;
}
:is(.box, .box2) .calc p{
  margin-top: 2rem;
  font-size: 13rem;
  line-height: 18rem;
  letter-spacing: -.01em;
}
:is(.box, .box2) .calc form{
  margin-top: 4rem;
}
:is(.box, .box2) .calc .ph-arrows-down-up{
  font-weight: 700;
}
.box .con, .box2 .con {
  padding-block: 14rem 16rem;
  background: rgb(30, 80, 168);
  background: linear-gradient(0deg, rgb(30, 80, 168) 0%, rgb(112, 154, 227) 100%);
  color: var(--white);
}
.box .con .tit, .box2 .con .tit {
  font-weight: 800;
  font-size: 15.5rem;
  color: var(--white);
  letter-spacing: -.01em;
}
.box .con .input, .box .con .textarea, .box2 .con .input, .box2 .con .textarea {
  border: none;
  border-radius: 3rem;
  text-align: left;
  font-size: var(--fs14);
}
:where(.box, .box2) .con .textarea{
  margin-top: 6rem;
  height: 74rem;
  padding: 7rem 6rem;
  font-weight: 500;
  font-size: 12rem;
  line-height: 18rem;
  letter-spacing: -.02em;
}
:where(.box, .box2) .con .input{
  margin-top: 6rem;
  height: 25rem;
}
:is(.box, .box2) .con p{
  font-weight: 500;
  font-size: 11rem;
  letter-spacing: -.01em;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}
:where(.box, .box2) .con .submit{
  margin-top: 7rem;
  padding: 5.5rem;
  background: #f2b148;
  border-radius: 3rem;
  font-weight: 800;
  font-size: 12rem;
  letter-spacing: -.01em;
  color: var(--white);
}
@media screen and (max-width: 767px) {
  .box2 {
    display: none;
  }
  .layerPop {
    width: 90% !important;
  }
}
@media screen and (min-width: 767px) and (max-width: 1024px) {
  .box2 {
    display: flex;
    margin-bottom: 50rem;
  }
}
@media screen and (min-width: 1024px) and (max-width: 2560px) {
  .box2 {
    display: none;
  }
}

.sidebar {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 100%;
  grid-area: sidebar;
}
.sidebar .vila {
  display: flex;
  flex-direction: column;
}
.sidebar .vila-search {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.sidebar .vila-search .title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.sidebar .vila-search .title h1 {
  font-size: var(--fs20);
  color: var(--primary);
  font-weight: 700;
  letter-spacing: -.025em;
}
.sidebar .vila-search .title p {
  color: #94a1a4;
  font-size: var(--fs14);
  font-weight: 500;
  letter-spacing: -.01em;
}
.sidebar .vila-search .searchbox {
  display: flex;
  flex-direction: column;
  gap: 15rem;
  background: var(--primary);
  color: var(--white);
  padding: 14rem 15rem 25rem 19rem;
  /* margin-top: 16rem; */
}
.sidebar .vila-search .searchbox .searchbox-select {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: 108fr 138fr auto;
  align-items: center;
  gap: 10rem;
}
.searchbox-form label{
  font-weight: 700;
  font-size: 14rem;
  letter-spacing: -.025em;
  color: #ffffff80;
}
.sidebar .vila-search .searchbox .searchbox-select-submit button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5rem;
  background: #0e2854;
  border-radius: 5rem;
  padding: 7rem 13rem;
  font-weight: 500;
  font-size: 14rem;
  color: var(--white);
  white-space: nowrap;
}
.sidebar .vila-search .searchbox .searchbox-select-submit button:hover {
  background: var(--white);
  color: var(--primary);
}
.sidebar form:nth-child(2) .searchbox-select-input{
  grid-column: 1 / 3;
}
.sidebar .vila-search .searchbox .searchbox-select-input select {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5rem;
  height: 30rem;
  font-weight: 700;
  padding: 5rem 10rem;
  border-radius: 5rem;
  border: 0px solid #e0e9eb;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: #305eae url("/images/arr_wht.png") no-repeat right 10px center;
  padding-right: 25rem;
  font-weight: 500;
  font-size: 15rem;
  letter-spacing: -.025em;
  color: var(--white);
}
.sidebar .vila-search .searchbox .searchbox-select-input input {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5rem;
  height: 30rem;
  font-weight: 700;
  padding: 5rem 10rem;
  border-radius: 5rem;
  border: 0px solid #e0e9eb;
  width: 100%;
  color: var(--white);
  background: #305eae;
}
.sidebar .vila-search .searchbox .searchbox-select-input input::-webkit-input-placeholder {
  color: var(--white);
}
.sidebar .vila-search .searchbox .searchbox-select-input input::-moz-placeholder {
  color: var(--white);
}
.sidebar .vila-search .searchbox .searchbox-select-input input:-ms-input-placeholder {
  color: var(--white);
}
.sidebar .vila-search .searchbox .searchbox-select-input input::-ms-input-placeholder {
  color: var(--white);
}
.sidebar .vila-search .searchbox .searchbox-select-input input::placeholder {
  color: var(--white);
}
.sidebar .vila-result {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  border: 3rem solid var(--grey2);
}
.sidebar .vila-result .broker {
  display: flex;
  flex-direction: column;
  padding: 20rem;
  border-bottom: 3rem solid var(--grey2);
}
.sidebar .vila-result .broker h1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs20);
  color: var(--primary);
  font-weight: 700;
}
.sidebar .vila-result .broker h1::after{ content: '-> 담당자를 찾습니다'; font-weight: 500; font-size: 15rem; letter-spacing: -.025em; color: #ffa200; }

.sidebar .vila-result .broker-list {
  display: flex;
  flex-direction: column;
  gap: 10rem;
  margin-top: 20rem;
}
.sidebar .vila-result .broker-list > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-grow: 1;
  font-size: var(--fs14);
}
.sidebar .vila-result .broker-list > div span:first-child {
  font-weight: 600;
  color: var(--grey6);
}
.sidebar .vila-result .broker-list > div span:nth-child(2) {
  font-weight: 900;
}
.sidebar .vila-result .list {
  display: flex;
  flex-direction: column;
  padding: 26rem 10rem 26rem 18rem;
  max-height:1800px;
  overflow-y:scroll;
}
.sidebar .vila-result .list ul {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  list-style: disc;
}
/* .sidebar .vila-result .list ul li {
  list-style: disc;
  list-style-position: inside;
}
.sidebar .vila-result .list ul li::marker {
  color: var(--primary);
  width: 20rem;
} */
.sidebar .list li::before{
  content: '';
  margin-right: 8rem;
  position: relative;
  display: inline-block;
  width: 4rem;
  aspect-ratio: 1;
  background: #194ca5;
  vertical-align: super;
}
.sidebar .vila-result .list ul li > div {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  width: calc(100% - 25rem);
  align-self: flex-end;
}
.sidebar .vila-result .list ul li > div span {
  font-weight: 500;
  font-size: 15rem;
  color: #636363;
}
.sidebar .vila-result .list ul li > div .register {
  display: flex;
  align-items: center;
  gap: .35ch;
  color: var(--black);
  font-weight: 700;
  font-size: 14rem;
  letter-spacing: -.025em;
}
.sidebar .vila-result .list ul li > div .rent {
  color: #3168c8;
  font-weight: 700;
}
.sidebar .ph-plus-circle{ font-size: 15.5rem; }
@media(min-width:768px){
  .sidebar{ margin-top: -6rem; }
  .sidebar-header{ display: none; }
}
@media(max-width:767px){
  .sidebar{ grid-area: none; position: fixed; inset: 0; z-index: 100; background: #fff;
    &:not(.is-expanded){ translate: 100%; visibility: hidden; }
    .sidebar-header{ display: flex; align-items: center; justify-content: space-between; padding: 13rem 14rem 16rem 15rem; }
    .global-phone{ padding: 5rem 16rem 5.5rem 18rem; gap: 6rem; }
    .global-phone > p{ font-size: 13.5rem; }
    .global-phone > h1{ font-size: 14.1rem; }
    .vila-search .title{ padding-inline: 14rem; }
    .sidebar-close-btn{ width: 32rem; aspect-ratio: 1; background: #194ca5 url('/images/common/sidebar-close-btn.png') no-repeat 50% / 10.5rem; border-radius: 50%; }
    .vila-result{ overflow: scroll; height: var(--height); }
    @media(prefers-reduced-motion:no-preference){
      &{ transition: .6s; }
    }
  }
}

.footer {
  /* margin-top: auto; */
  padding: 37rem 0 61rem;
  background: #f8f8f8;
}
.footer-nav {
  display: flex;
}
.footer-nav .content {
  display: flex;
}
.footer-nav .fnav {
  display: flex;
  gap: 22rem;
  margin-bottom: 26rem;
}
.footer-nav .fnav li {
  display: flex;
}
.footer-nav .fnav li a {
  padding: .28571429em 1.28571429em;
  position: relative;
  transition: all 0.4s;
  border: 1px solid #dadada;
  border-radius: 5rem;
  color: #6c6c6c;
  font-weight: 300;
  font-size: 14rem;
}
.footer-nav .fnav li a:hover {
  color: var(--primary);
}
.footer-info {
  display: flex;
  flex-direction: column;
  color: #c0c0c0;
}
.footer-info .ftext {
  display: flex;
  flex-wrap: wrap;
  -moz-column-gap: 34rem;
       column-gap: 34rem;
  text-transform: none !important;
  font-weight: 300; font-size: 14rem; color: #6a6a6a;
}
.footer-info .ftext li {
  display: flex;
  gap: 0;
}
.footer-info .ftext li span {
  display: flex;
  position: relative;
}
.footer-info li:nth-child(1) .value,
.footer-info li:nth-child(2) .name{ display: none; }
.footer-info li:nth-child(n+3) .name::after{ content: ':'; margin-inline: .4ch; }
.footer-info .fcopy {
  margin-top: 5rem;
  color: #848484;
  font-weight: 300;
  font-size: 14rem;
  color: #aaa;
}
@media(max-width:767px){
  .footer-nav .fnav{ gap: 12rem; }
  .footer-nav .fnav li a{ font-size: 13rem; }
  .footer-info .ftext{ flex-direction: column; }
}

.mobilemenu {
  --header-height: 60rem;
  position: absolute;
  width: 100%;
  overflow-x: hidden;
  height: 100%;
  top: var(--header-height);
  left: 0;
  z-index: 98;
  background-color: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: none;
}
.mobilemenu-content {
  background: var(--grey1);
  display: flex;
  flex-direction: column;
  width: 70%;
  height: 100%;
  position: relative;
  margin-left: auto;
  transition: all 0.4s;
  translate: 100%;
}
.mobilemenu-content.active {
  translate: 0;
}
.mobilemenu .mobile-menu .nav {
  display: flex;
  flex-direction: column;
}
.mobilemenu .mobile-menu .nav-link {
  display: flex;
  align-items: center;
  flex-basis: 100%;
  font-size: var(--fs22);
  font-weight: 700;
  padding: 20rem 20rem;
  border-bottom: 1px solid var(--grey2);
}
.mobilemenu .mobile-menu .nav-link .icon {
  margin-left: auto;
  color: var(--grey5);
  transition: all 0.4s;
}
.mobilemenu .mobile-menu .nav-link .icon.open {
  transform: rotate(180deg);
  transition: all 0.4s;
}
.mobilemenu .mobile-menu .nav-link:hover {
  color: var(--primary);
}
.mobilemenu .mobile-menu .nav.active .nav-link {
  color: var(--primary);
}
.mobilemenu .mobile-menu .nav-submenu {
  display: flex;
  flex-direction: column;
  background: var(--grey2);
  overflow: hidden;
  display: none;
}
.mobilemenu .mobile-menu .nav-submenu-link {
  display: flex;
}
.mobilemenu .mobile-menu .nav-submenu-link .sub-link {
  font-size: var(--fs18);
  padding: 10rem 30rem;
  width: 100%;
}

.board .inr {
  display: nene;
  align-items: unset;
  line-height: unset;
  width: unset;
  max-width: unset;
  margin: unset;
}

@-webkit-keyframes slideIn {
  from {
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    opacity: 0;
  }
  to {
    -webkit-clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%);
    opacity: 1;
  }
}
@keyframes slideIn {
  from {
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    opacity: 0;
  }
  to {
    -webkit-clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%);
    opacity: 1;
  }
}
@-webkit-keyframes slideOut {
  from {
    -webkit-clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%);
    opacity: 1;
  }
  to {
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    opacity: 0;
  }
}
@keyframes slideOut {
  from {
    -webkit-clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%);
    opacity: 1;
  }
  to {
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    opacity: 0;
  }
}
@-webkit-keyframes growCircle {
  0% {
    -webkit-clip-path: circle(10% at 0% 50%);
    clip-path: circle(10% at 0% 50%);
    opacity: 0;
  }
  50% {
    -webkit-clip-path: circle(60% at 0% 50%);
    clip-path: circle(60% at 0% 50%);
    opacity: 1;
  }
  80% {
    -webkit-clip-path: circle(65% at 0% 50%);
    clip-path: circle(65% at 0% 50%);
    opacity: 1;
  }
  100% {
    -webkit-clip-path: circle(70% at 0% 50%);
    clip-path: circle(70% at 0% 50%);
    opacity: 0;
  }
}
@keyframes growCircle {
  0% {
    -webkit-clip-path: circle(10% at 0% 50%);
    clip-path: circle(10% at 0% 50%);
    opacity: 0;
  }
  50% {
    -webkit-clip-path: circle(60% at 0% 50%);
    clip-path: circle(60% at 0% 50%);
    opacity: 1;
  }
  80% {
    -webkit-clip-path: circle(65% at 0% 50%);
    clip-path: circle(65% at 0% 50%);
    opacity: 1;
  }
  100% {
    -webkit-clip-path: circle(70% at 0% 50%);
    clip-path: circle(70% at 0% 50%);
    opacity: 0;
  }
}
.isflex {
  display: flex;
}

.g10 {
  gap: 5rem;
}

.floating-menu{ position: -webkit-sticky; position: sticky; inset: auto 0 0; z-index: 99; display: flex; justify-content: space-between; padding: 18rem 14rem 17.5rem; background: #f8eef3; font-weight: 700; font-size: 14.6rem; color: #000;
  .floating-menu__item{ display: flex; align-items: center; gap: 3rem; }
  .floating-menu__icon{ display: block; height: auto; }
  .i1 { width: 18.39rem; }
  .i2{ width: 18.39rem; }
  .i3{ width: 19.26rem; }
  .i4{ width: 20.14rem; }
  @media(min-width:768px){ display: none; }
}

.tab-box-right-bar { 
    width: 100%; 
    display: flex;
    justify-content: space-around;
    margin-top: 16rem;
    padding: 5px;
    background-color: var(--primary);
}
.tab-box-right-bar .check-tab-right-bar {
    width: 100%;
    text-align: center;
    padding: 10px 20px;
    background-color: #0e2854;
    color: var(--white);
    cursor: pointer;
    .name{ color: yellow; font-size: 16rem; }
}
.tab-box-right-bar .check-tab-right-bar:has(input:checked) {
    background-color: #f3f7f9;
    color: #0e2854;
    .name{ color: #322999; }
}
.tab-box-right-bar input[type="radio"]{ display: none; }

/* 250424 */
.tab-box-right-bar { margin-top: 0; padding: 0;}
.sidebar .vila-search { background: var(--primary); padding: 5rem; margin-top: 5rem; }
.sidebar .vila-search .searchbox { border: 2rem solid #fff; margin-top: 0; }

/* 250509 */
.global-phone { background: #2297D7; }
.box .con .tit i { display: block; font-size: 12rem; font-weight: 300; }
.sidebar .vila-search .searchbox .searchbox-select-input input { font-weight: 200; }
.footer-info .ftext { row-gap: 10rem; margin-bottom: 20rem; }

.cta-cs { display: flex; flex-direction: column; gap: 6rem; margin: 0 0 0 auto; }
.btn-rsvp { display: flex; justify-content: center; align-items: center; gap: 7rem; background: #2297D7; color: var(--accent1); padding: 6rem 18rem 6rem 22rem; border-radius: 50rem; width: -webkit-fit-content; width: -moz-fit-content; align-self: flex-end; }
.header .nav-menu .gnb .menu.menu-item7 { display: none; }

@media screen and (max-width: 767px) {
  .btn-rsvp {display: none;}
}


/* 2507 */

.btn-rsvp.mob-ver {display: none;}

@media screen and (max-width: 767px) {
  .main-hero { display: none; }
  .header .nav { --header-height: 140rem; }
  .header .nav-logo { left: 50%; top: 50%; transform: translate(-50%, -50%); position: absolute; }
  .header .nav-menu { width: 100%; }

  .floating-menu .floating-menu__item {font-size: 18rem;font-weight: 400;}
  .floating-menu .floating-menu__item.cRed {color: red;font-weight: 700;padding: 6rem 20rem;background: #fff;border-radius: 100rem;}
  .main-table .filter-select .select-input select { padding-right: 35rem; max-width: 130rem; font-size: 18rem; }

  .sidebar-toggle-btn.left-blue {position: absolute; left: 0; top: 50%; transform: translateY(-50%); background: #2297D7;}
  
  #top .gnb .menu.menu-item2 { margin-top: 80rem; }
  .header .nav-logo a .logo { height: calc(var(--header-height) * 0.60); }

  #top .gnb .menu.menu-item2 a { display: block; width: 30rem; height: 30rem; color: transparent; }
  .header .nav-menu .gnb li a::after { background: transparent; }

}