/* header */
body {background: var(--primary-color);}
.header-box {max-width: 1720px; margin: 4px auto; display: flex; align-items: center; justify-content: space-between;}
.gnb-item ul li a{color: #fff; transition: all 0.5s;}
.gnb-item .laug-menu li a {color: var(--primary-color);}
.laug-menu {padding: 4px 12px; display: flex; gap: 10px; background: #fff; border-radius: 20px; margin-left: 48px;
width: 92px; align-items: center; justify-content: center;}
.gnb-list {display: flex; align-items: center; }
.gnb-list .gnb-menu {display: flex; gap: 60px;}
.laug-menu li:last-child:before {content: ''; width: 1px; height: 9px; display: inline-block; background: #FFBCC0; margin-right: 10px;}
.gnb-menu li {position: relative;}
.gnb-menu li a::after {
    content: '';
    position: absolute; bottom: -4px;left: 0; width: 0;  height: 1px;  background-color: #fff;
    transition: width 0.3s ease-in-out;
}
.gnb-menu li:hover a::after {
    width: 100%;
}
.gnb-menu li:hover a::before {content: ''; width: 18px; height: 17px; display: inline-block; margin-right: 8px; background: url(../img/gnb_star_w.svg)no-repeat;
animation: starPopUp 0.4s ease-out forwards;}
.gnb-open {display: none;}

/* 햄버거 토글 */
.gnb.hamburger {background: #FFF4DC; width: 100%; height: 100vh; z-index: 10; flex-direction: column;
    position: absolute; top: 0; left: 0; align-items: center; justify-content: flex-start; display: none;}
.gnb.hamburger::before{ content: ''; width:312px; height: 68px; background: url(../img/logo_red.svg)no-repeat; display: inline-block; transform: scale(0.8) translateX(-40px);
    background: url(../img/logo_red.svg)no-repeat; }
.gnb-open, .gnb-close {position: absolute; right: 20px; top: 20px; cursor: pointer; display: none; z-index: 100;}
.gnb.hamburger .gnb-item:first-child {width: 90%; margin: 0 auto;}
.gnb.hamburger .gnb-menu {flex-wrap: wrap; flex-direction: column; margin-top: 40px; align-items: center; text-align: center;}
.gnb.hamburger .gnb-menu li {width: 100%; border-bottom: 1px solid var(--primary-color); padding-bottom: 10px;}
.gnb.hamburger .gnb-menu li a {color:var(--primary-color); font-size: 1.25rem; font-weight: 600;}
.gnb.hamburger .gnb-list {flex-direction: column;}
.gnb.hamburger .laug-menu {margin: 0; margin-top: 40px;}

/* 햄버거 메뉴가 활성화 되었을 때의 설정 */
.gnb.hamburger {
    display: flex; /* 스크립트로 제어하거나 클래스 존재 시 보이게 설정 */
    background: #FFF4DC; 
    width: 100%; 
    height: 100vh; 
    z-index: 100; /* 헤더보다 높게 */
    flex-direction: column;
    position: fixed; /* absolute보다 fixed가 모바일 전체화면 대응에 유리합니다 */
    top: 0; 
    left: 0; 
    align-items: center; 
    justify-content: flex-start;
}
/* 기본 상태: 열기 버튼은 보이고 닫기 버튼은 숨김 */
.gnb-open { display: none; }
.gnb-close { display: none; }

@media all and (max-width: 760px) {
    .gnb-open { display: block; }
    .gnb-list {display: none;}
    .gnb.hamburger .gnb-list {display: flex;}
    .gnb-list.hamburger {display: flex;}
    .gnb-open {display: block;}
    .header-logo img {transform: scale(0.8) translateX(-20px);}
    .gnb.hamburger .gnb-open { 
    display: none !important; /* 열렸을 땐 열기 버튼 숨김 */
}
.gnb.hamburger .gnb-close { 
    display: block !important; /* 열렸을 땐 닫기 버튼 보임 */
}


}

/* hedaer E */

/* Main S */

.main-section {margin-bottom: 80px; color: #fff; overflow-x: hidden!important;}
.main-section .main-visual {max-width: 1720px; margin: 0 auto; overflow-x: hidden!important;}
.main-title-box {display: flex; align-items: flex-end; justify-content: space-between; line-height: 1.2; margin-bottom:20px;}
.main-title {font-size: 1.9em; font-weight: 900;}
.main-title .strong {font-weight: 900; color: var(--primary-color);}
.main-title-box .more {display: flex; align-items: center; color: var(--primary-color); font-weight: 600; height: 42px;}

.main-visual {position: relative; max-width: 1720px; overflow: hidden; margin: 0 auto;}
.main-visual .swiper {overflow: visibsle;}
.main-visual .swiper-slide {max-width: 1790px;}
.main-visual .swiper-slide .container {max-width: none;}
.main-visual .item-box {display: block; border-radius: 40px; overflow: hidden; position: relative; width:100%; height: 760px;}
.main-visual .item-box {display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; max-width: 1720px; margin:0 auto;}
.main-visual .item-box::after {display: block; content:""; width: 100%; height: 100%; background: #000; opacity: 0.3; position: absolute; left:0; top:0;}
.main-visual .text-box {position: relative; z-index: 5; text-align: center; color: #fff; font-size: var(--font-size-18); padding-bottom: 80px; font-weight: 300; transform:translateY(50px); transition: 1.4s ease-in-out; opacity: 1;}
.main-visual .swiper-slide-active .text-box {transform:translateY(0); opacity: 1;}
.main-visual .text-box .title {font-size: 3.25em; font-weight: 700; margin-bottom: 15px; line-height: 100%;}
.main-visual .item-box .img {position: absolute; left:50%; top:0; transform:translateX(-50%); 
    max-width: none; animation: mainVisualMove 3s ease-in-out forwards; object-fit: cover; width: 100%;}
.main-visual .swiper-control {display: flex; align-items: center; justify-content: center; position: absolute; left:0; width: 100%; bottom:50px; z-index: 5; gap:0 20px;}
.main-visual :is(.swiper-button-play, .swiper-button-pause) {flex:0 0 40px; height: 40px; background:rgba(0,0,0,0.5); border-radius: 100%; color: #fff; font-size: var(--font-size-13); display: none;}
.main-visual :is(.swiper-button-play, .swiper-button-pause).active {display: block;}
.main-visual .swiper-progress {flex:0 0 50%; height: 4px; background:rgba(255,255,255,0.3); border-radius: 100px; overflow: hidden;}
.main-visual .swiper-progress .bar {display: block; width: 0; height: 100%; background:#fff;}
.main-visual .swiper-paging-box {display: flex; align-items: center; justify-content: center; height: 40px; background:rgba(0,0,0,0.5); padding:0 20px; border-radius: 25px; color: #fff; gap:0 15px;}
.main-visual .swiper-paging {position: relative; left: auto; top:auto; bottom: auto; width: auto; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-15); gap:0 20px;}
.main-visual .swiper-paging::after {display: block; content:""; width:3px; height: 3px; border-radius: 100%; background: #fff; position: absolute; left:50%; top:50%; transform:translate(-50%, -50%);}
.main-visual :is(.swiper-button-prev, .swiper-button-next) {position: relative; left: auto; top:auto; bottom: auto; right: auto; transform:none; margin:0; width: auto; height: auto;}
.main-visual :is(.swiper-button-prev, .swiper-button-next)::after {font-size: var(--font-size-13); color: #fff;}

    @keyframes starPopUp {
    0% {
        opacity: 0;
        transform: translateY(10px) rotate(-45deg) scale(0.5);
    }
    70% {
        transform: translateY(-2px) rotate(10deg) scale(1.1);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(0deg) scale(1);
    }
}

@keyframes mainVisualMove {
    0% {
        /* 시작 위치 */
        transform: translateX(-50%) translateY(0);
    }
    100% {
        transform: translateX(-50%) translateY(-100px);
    }
}
  
.max-1480 {max-width: 1480px; margin: 0 auto;}
.menu-description {display: flex; justify-content: space-between; margin-top: 80px; align-items: center;}
.main-content h2 {font-size: 3rem; font-weight: 800; line-height: 120%;}
.menu-description strong {padding-bottom: 5px; margin-bottom: 10px;
    border-bottom: 1px solid #fff; display:block;}
.menu-subtxt {width: 100%; max-width:500px ;}
.menu-box img {max-width: 400px; height: 400px; border-radius: 480px; width: 100%;}
.menu-container .menu_wrpper {width: 100%; margin: 0 auto; overflow: visible; display: flex; margin-top: 160px;}
.menu-container .menu-slide {width: 440px; display: flex; text-align: center; }

.menu-slide {
    transition: all 0.5s ease;
    filter: blur(8px); /* 기본적으로 흐리게 */
    opacity: 0.3;
    transform: scale(0.8);
}

/* 2. 가운데 슬라이드(Active)와 그 앞뒤(Next, Prev) 총 3개는 선명하게 */
.menu-slide.swiper-slide-active,
.menu-slide.swiper-slide-next,
.menu-slide.swiper-slide-prev {
    filter: blur(0);
    opacity: 1;
    transform: scale(0.9); /* 기본 크기 */
}
/* 활성화된(가운데) 슬라이드 스타일 */
.menu-slide.swiper-slide-active {
    opacity: 1;
    transform: scale(3); /* 가운데 크게 확대 */
    z-index: 10;
}

.menu-slide.swiper-slide-active .menu-box img{
    outline: 20px solid #fff; margin-bottom: 20px;
}

.menu-slide.swiper-slide-active .item-name {
    opacity: 1;
}

.main-menu .menu-swiper-pager {width: 480px; margin: 0 auto; position: relative;}

.swiper-button-next:after, .swiper-button-prev:after {opacity: 0;}
.menu-container .menu-slide .item-name {font-size: var(--font-size-18); font-weight: 600; margin-top: 20px; padding: 12px 24px; border-radius: 50px; display: inline-block;
border: 1px solid #fff;}
.menu-swiper-pager .swiper-button-next, .swiper-button-prev {width: 68px; height: 68px; margin-top: -310px;}
.menu-swiper-pager .swiper-button-next {transform: scaleX(-1);;}
.ghost-menu {display: flex; gap: 20px; align-items: center; justify-content: center;}
.ghost-menu p {color: #fff;}
.branch-info {margin-top: 80px; }
.branch-infodetail {background: #fff; border-radius: 0 20px 20px 20px;}
.branch-tabmenu ul {display: flex;}
.branch-tabmenu ul li {text-align: center; width: 260px; background:#fff; padding: 20px; font-weight: 600; 
    border-radius:10px 10px 0 0; color: var(--primary-color);}
.branch-tabmenu ul li:nth-child(2) {background:var(--secondary-color)}
.branch-tabmenu ul li:nth-child(3) {background:var(--third-color);}
.branch-infodetail .swiper-wrapper .swiper-slide:nth-child(2) {background: var(--secondary-color);}
.branch-infodetail .swiper-wrapper .swiper-slide:nth-child(3) {background: var(--third-color);}
.branch-tabmenu ul li img {padding-right: 10px;}
.branch-infodetail .swiper-pagination {position: absolute; bottom: -20px; background: #00000008; z-index: 100;}
.branch-info .branch-tabmenu {margin-top: 40px; cursor: pointer;}
.branch-infodetail .flex_row {display: flex; align-items: center}
.branch-infodetail .inner-swiper{object-fit: cover; width: 100%; overflow: hidden; max-height: 460px; margin: 40px; max-width: 548px;}  
.branch-infodetail .infocon-detail {flex-basis: 100%; margin: 40px;}
.branch-infodetail .infocon-detail li {color:#111; display: flex; align-items:center; gap: 10px; font-size: 1.25rem; margin-top: 16px; flex-wrap: wrap;}
.infocon-detail h3 {font-size: 2rem; color: var(--primary-color); margin-bottom: 20px; font-weight: 600;}
.time::before {content: ''; width: 24px; height: 24px; background: url(../img/location_time.svg)no-repeat; display: inline-block;}
.call::before {content: ''; width: 24px; height: 24px; background: url(../img/location_call.svg)no-repeat; display: inline-block;}
.map::before {content: ''; width: 24px; height: 24px; background: url(../img/location_map.svg)no-repeat; display: inline-block; min-width: 24px;}
.infocon-detail ul .time span {color: var(--primary-color); font-weight: 600;}
.infocon-detail ul .time span::after {content: ''; width: 3px; height: 3px; display: inline-block; margin: 0 4px; background: var(--primary-color); border-radius: 10px; margin: 0 6px ;
    position: relative; top: -4px;}

.addresscopy {padding: 4px; background: var(--secondary-color); color: var(--primary-color); border-radius: 20px; margin-left: 4px;}
.commen_bt {padding: 12px 24px; background: #111; display: flex; gap: 20px; border-radius: 40px;} 
.commen_bt img { transition: transform 0.3s;}
.commen_bt p {color: #fff;}
.commen_bt:hover img {transform: translateX(10px);}
.maparea {margin-top: 16px; width: 100%; max-width: 640px;}
.maparea iframe {width: 100%; overflow: hidden;}
.menu-container .commen_bt {margin: 0 auto; margin-top: 10px; background: none;}

.main-section.txt-deco {background: var(--secondary-color); position: relative; overflow: hidden;
    max-width: 900px; width: 100%; max-width: 1920px; color: #111; padding: 10rem 0; margin-top: 80px;}
.main-section.txt-deco .txt-wrapper .pink-txt {font-size: 124px; line-height: 90%; font-weight: 900; color: #FFCCCF; text-transform: uppercase;}
.main-section.txt-deco .txt-wrapper .red-txt {font-size: 140px; line-height: 130%; font-weight: 900; color: var(--primary-color);}
.font-32 {font-size: 2rem; font-weight: 500;}
.main-section.txt-deco .flex_row {display: flex; position: relative;}
.main-section.txt-deco .font-32 {padding-top: 20px;}
.deco01::before {content: ''; display: inline-block; animation: bubbleFloat-left 2s ease-in-out infinite;
    position: absolute; left: -120px; top: -160px; width: 614px; height: 614px; background: var(--third-color); border-radius: 600px; opacity: 0.5;}
.deco01::after {content: ''; display: inline-block; animation: bubbleFloat-right 2s ease-in-out infinite;
  animation-delay: -2s;  opacity: 0.6;
    position: absolute; left: 200px; top: 200px; width: 346px; height: 346px; background: var(--third-color); border-radius: 600px;}

.deco02::before {content: ''; display: inline-block; animation: bubbleFloat-right 5s ease-in-out infinite;
    position: absolute; right: -120px; bottom: -160px; width: 492px; height: 492px; background: #fff; border-radius: 600px; opacity: 0.5;}
.deco02::after {content: ''; display: inline-block; animation: bubbleFloat-left 5s ease-in-out infinite; opacity: 0.8;
  animation-delay: -1s;
    position: absolute; right: 100px; bottom: 100px; width: 278px; height: 278px; background: #fff; border-radius: 600px;}

@keyframes bubbleFloat-left {
  0% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(15px, -20px) rotate(2deg); }
  66% { transform: translate(-10px, 10px) rotate(-1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes bubbleFloat-right {
  0% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(-20px, 15px) rotate(-3deg); }
  66% { transform: translate(10px, -15px) rotate(2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

.partnerbt {font-size: 1.25rem; font-weight: 600; background: url(../../resource/img/more_back.svg); width: 418px; height: 380px;
     position: absolute; bottom: 0; right: 0;z-index: 100; cursor: pointer; }
.partnerbt_txt {position: absolute; right: 140px; bottom: 170px; display: flex; gap: 20px; align-items: center;}
.partnerbt_txt p {font-size: 1.5rem; color: #fff; font-weight: 600;}
.main-section.review-box {overflow-y: hidden;}
.main-section.review-box h2 {padding: 80px 0 10px 0 }
.main-section.review-box h2, p {text-align: center;}
.main-section.review-box .review-wrapper {display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 20px; row-gap: 20px;}
.review-wrapper .review-item {height: 300px; overflow: hidden; border-radius: 20px;}
.review-wrapper .review-item:nth-child(1) {grid-row: span 2; align-self: stretch; 
    height: 630px;}
.review-wrapper .review-item:nth-child(1) img {height: 100%;}
.main-section.review-box dl {display: flex; align-items: center; justify-content: center; gap: 40px; margin: 32px 0;}
.main-section.review-box dl dd {font-size: 4.5rem; font-weight: 900;}
.review-user {padding-bottom: 10px;}
.review-user, .user{display: flex; align-items: center; gap: 10px;}
.review-item {position: relative; }
.review-item img {object-fit: cover; }
.review-detailtxt {position: absolute; bottom: 0; padding: 20px; background:transparent linear-gradient(180deg, #00000000 0%, #000000 100%) 0% 0% no-repeat padding-box;; width: 100%;
}
.detail-txt {text-overflow: ellipsis; display: -webkit-box; overflow: hidden; max-height: 72px;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;}
.review-user .user::before {content: ''; width:40px; height: 40px; display: inline-block; background: url(../img/user_icon.svg) ;}
.description {padding: 20px 0 80px 0; color: var(--secondary-color);}
.menu-subtxt p {text-align: left;}


@media all and (max-width: 1480px) {    
    .main-visual .item-box .img {height: 100%; animation: none;}
    .main-visual {padding: 0 15px;}
    .max-1480{ padding: 0 15px;}
        .main-section.txt-deco .txt-wrapper .pink-txt {font-size: 62px;}
    .main-section.txt-deco .txt-wrapper .red-txt {font-size: 72px;}
    .main-section.txt-deco .font-32 {font-size: 1.5rem;}
    .partnerbt{background-size: 90%; background-repeat: no-repeat;}
}

@media all and (max-width: 760px) {
    .gnb.hamburger::before {width: 268px;}
    .main-visual .item-box {height: 580px;}
    .main-menu h2 {display: none;}
    .main-visual .text-box .title {font-size: 2.5rem; font-weight: 800;}
    .main-visual .text-box {padding: 0 20px;}
    .menu-description {margin-top: 40px;}
    .menu-container .menu_wrpper {margin-top: 50px;}
    .branch-tabmenu ul li { padding: 12px; font-size: 0.9rem; display: flex; align-items: center; justify-content: center;}
    .branch-tabmenu ul li img {transform: scale(0.8); padding: 0;}
    .branch-infodetail {border-radius: 0 0 20px 20px;}
    .branch-infodetail .infocon-detail {margin: 20px;}
    .branch-infodetail .flex_row {flex-wrap: wrap; flex-direction: column; align-items: flex-start}
    .branch-infodetail .inner-swiper .swiper-wrapper {margin: 0;}
    .branch-infodetail .inner-swiper .inner-img img {height: auto; width: 100%;}
    .main-section.txt-deco .txt-wrapper .pink-txt {font-size: 40px;}
    .main-section.txt-deco .txt-wrapper .red-txt {font-size: 48px;}
    .main-section.txt-deco .font-32 {font-size: 1rem;}
    .deco01::before, .deco01::after {width: 60%; height: 60%;}
    .deco02::before, .deco02::after {display: none;}
    .deco01::after {left: 10px; top: 40px;}
    .partnerbt {background: url(../img/mo_cloud.svg)no-repeat; width: 212px; height: 180px; bottom: -170px; transform: scale(0.7);}
    .partnerbt_txt {position: relative; left: 40px; top: 70px;}
    .branch-infodetail .inner-swiper {margin: 0; width: auto; max-height: 240px; object-fit: contain;}
    .infocon-detail h3 {font-size: 1.25rem; margin-bottom: 8px;}
    .branch-infodetail .inner-swiper {max-width: unset;}
    .branch-infodetail .infocon-detail li {font-size: 1rem; margin-top: 4px; gap: 0;}
    .infocon-detail ul li::before {margin-right: 10px;}
    .infocon-detail ul li:last-child {justify-content: center}
    .maparea {width: 100%; margin:  0 auto; margin-top: 10px;}
    .main-section.txt-deco {padding: 4rem 0 10rem 0;}
    .rtnerbt_txt p {font-size: 1.25rem;}
    .main-section.review-box h2 {padding-top: 0; line-height: 100%; font-size: 2rem;}
    .main-section.review-box dl{background: #fff; width: 100%; padding: 12px;}
    .main-section.review-box dl dt {color: var(--primary-color)}
    .main-section.review-box dl dd {color: var(--primary-color); font-size: 1.75rem;}
    .main-section.review-box .review-wrapper {display: flex; width: 100%; overflow-x: auto; overflow-y: hidden;}
    .review-wrapper .review-item:nth-child(1) {height: 290px; width: 80%;}
    .review-wrapper .review-item {flex-shrink: 0; width: 80%; margin-bottom: 20px; height: 290px;}
    .review-wrapper .review-item:nth-child(1) img {width: 100%;}
    .gnb-menu li:hover a::before {display: none;}
    .gnb.hamburger::before {transform: translateX(0) scale(0.8);}
    .main-content h2 {font-size: 2.5rem; line-height: 100%;}
    .branch-info .branch-tabmenu { margin-top: 28px;}

}

@media all and (max-width: 440px) {
       .menu-container .menu-slide {width: 90%; height: auto;}
    .main-menu .menu-swiper-pager {width: 100%;}
    .menu-box img {width: 320px; height: 320px;}
    .menu-container .menu_wrpper {margin-top: 80px;}
    .menu-swiper-pager .swiper-button-next, .swiper-button-prev {margin-top: -280px; width: 48px; height: 48px;}
    .description {font-size: 0.85rem;}

}
/* Main E */




/* Footer S */
.only_mo {display: none; transition: all 0.3s;}
.only_mo p {color: var(--primary-color); font-weight: 600;}
 .only_mo::after {content: ''; display: inline-block; width: 8px; height: 8px; 
    border-left: 2px solid var(--primary-color); border-bottom: 2px solid var(--primary-color);transform: rotate(-45deg) translateX(4px);}
.footer {background: var(--primary-color); }
.footer .container {background: #fff; border-radius:50px 50px 0 0;}
.fotter-logo {color: var(--secondary-color); text-align: center; flex-basis: 100%;}
.fotter-logo .title { font-size: 148px; color: #fff;  -webkit-text-stroke: 4px #FFECED; font-weight: 900; padding-top: 48px; line-height: 100%;}
.company_details dl {color: var(--primary-color)}
.company_basic {font-size: 1.25rem; font-weight: 700; color: var(--primary-color); margin-bottom: 12px;}
.company_details dl a {color: var(--primary-color);}
.company_details dl {display: flex; font-size: 0.925rem; font-weight: 300; margin-bottom: 4px; }
.company_details dl dt {padding-right: 10px;}
.company_details {display: flex; gap: 20px;}
.footer-box .item-box {display: flex;flex-wrap: wrap; gap: 40px; padding-bottom: 50px;}
.contact-box .flex_row {display: flex; justify-content: space-between; align-items: center;}
.sandbt {background: var(--primary-color);}
.contact-box {flex-basis: 44%;}
.input-field input {width: 95%; border: none; border-bottom: 1px solid var(--primary-color); height: 40px;}
.input-field .fieldcommend {display: flex; align-items: center; margin-bottom: 10px;}
.input-field .fieldcommend span {height: 40px; border-bottom: 1px solid var(--primary-color); color: var(--primary-color); width: 70px;}


@media all and (max-width: 760px) {
    .only_mo {display: flex; align-items: center; gap: 6px; order: 2;}
    .company_details {display: none;}
    .company_details.active {display: flex;}
    .only_mo.active::after {transform: rotate(135deg) translateY(-5px); }
    .fotter-logo .title {font-size: 48px; -webkit-text-stroke: 2px #FFECED;}
    .company_details {order: 2; flex-wrap: wrap;}
    .contact-box {order: 1; flex-basis: 100%;}
    .footer-box .item-box {gap: 20px;}
    .fotter-logo .title {padding-top: 32px;}
    .footer .container {border-radius: 20px 20px 0 0;}
    .company_basic {font-size: 1rem;}
    .footer-box .item-box {padding-bottom: 20px; gap: 14px;}
    .input-field .fieldcommend span {font-size: 0.85rem;}
    
}

/* Footer E */