* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
    color: #333;
    font-size: 0.875rem;
}
body {
    background: url("../images/bg.png")repeat;
    font-family:'GmarketSansMedium';
    font-weight: 500;
    overflow-x: hidden;
}
/* 공통클래스 */
.container {
    max-width: 1280px;
    margin: 0 auto;
}
h2 {
    font-family: "Alfa Slab One", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.5rem;
    text-align: center;
}
h4 {
    font-size: 1.5rem;
    text-align: center;
}
/* ========== header ========= */
.header {
    background-color: #806954;
    background: url('../images/header-deco.png') no-repeat center top;
    width: 100%;
    background-size: cover;
}
.header .container {
    position: relative;
    padding: 40px;
    height: 236px;
}
.header .header-deco {
    width: 10%;
    position: absolute;
    top: 5%;
    left: 1%;
}
.header .header-deco img {
    width: 100%;
    object-fit: contain;
    object-position: left top;
}
.header .container .logo {
   
}
.header .container .logo a {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    line-height: 20px;
}
.header .container .logo a img {}

/* gnb-util */
.gnb-util {
    position: relative;
    top: 50%;
    left: 31px;
    transform: translateY(-50%);
    line-height: 20px;
}
.gnb-util .gnb-wrap {
    display: flex;
    padding-left: calc(100% - 25%);
}
.gnb-util .gnb-wrap li {
    padding: 10px;
}
.gnb-util .gnb-wrap li a {
    color: #fff;
    font-size: 0.85em;
}

/* menu-nav */
.header .container .menu-nav {
    /* width: 980px; */
    /* height: 43px; */
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    text-align: center;
    align-items: center;
    position: relative;
    top: 113px;
}
.header .container .menu-nav > li {
    /* margin-right: 10px; */
    /* background-color: azure; */
    position: relative;
    height: 100%;
}
.header .container .menu-nav > li:hover .menu-list {
    opacity: 1;
    visibility: visible;
}
.header .container .menu-nav > li > a {
    padding: 10px 0;
    /* background-color: azure; */
    color: #fff;
    font-size: 1.2em;
    transition: .5s;
}
.header .container .menu-nav > li > a:hover {
    color: #365442;
} 
.menu-nav li .menu-list {
    background-color: rgba(128,105,84,0.8);
    padding: 20px 30px;
    top: 144%;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    white-space: nowrap;
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
    position: absolute;
}
.menu-nav li .menu-list li {
    margin-bottom: 5px;
}
.menu-nav li .menu-list li a {
    color: #fff;
    font-size: 0.85em;
}
.menu-nav li .menu-list li:hover a{
    color: #ed6c24;
}
/* header 반응형 */
/* breakepoint - 1200px */
@media screen and (max-width:1200px) {
    .gnb-util .gnb-wrap {
        display: flex;
        padding-left: calc(100% - 31%);
    }
    .gnb-util .gnb-wrap li {
        padding: 10px;
    }
    .gnb-util .gnb-wrap li a {
        color: #fff;
        font-size: 1.3vw;
    }
    .header .container .menu-nav > li > a {
        font-size: 1.5vw;
    }    
}

/* breakepoint - 980px */
@media screen and (max-width:980px) {
    .gnb-util .gnb-wrap {
        display: none;
        padding-left: calc(100% - 34%);
    }
    .header .container .menu-nav {
        top: 18vh;
    }    
}

/* breakepoint - 768px */
@media screen and (max-width:768px) {
    .header .container .menu-nav {
        display: none;
    }  
}

/* breakepoint - 680px */
@media screen and (max-width:680px) {
    
}

/* ======== MAIN ======== */
/* .visual {
    width: 100%;
    height: 600px;
    position: relative;
    top:25.6%;
}
.visual .sw-visual {
    width: 100%;
    height: 100%;
    
}
.visual .swiper-slide {
    width: 100%;
    height: 100%;
}
.visual .swiper-slide a {
    display: block;
    width: 100%;
    height: 100%;
}
.visual .sw-visual .sw-slide01 {
    background: url('../images/MAIN-banner.png')no-repeat center;
    width: 100%;
    position: relative;
    z-index: -999;
}
.visual .sw-visual .sw-slide01 i {
    display: block;
    width: 100%;
}
.visual .sw-visual .sw-slide02 {
    background: url('../images/MAIN-img-01.png')no-repeat center;
    width: 100%;
    position: relative;
    z-index: -999;
}
.visual .sw-visual .sw-slide02 i {
    display: block;
    width: 100%;
} */

/* 비주얼 섹션 */
.visual {
    width: 100%;
    height: 600px;
    position: relative;
    top: 25.6%;
    overflow: hidden;  /* 슬라이드 영역 밖으로 나가지 않도록 숨김 */
}
.visual .sw-visual {
    width: 100%;
    height: 100%;
    display: flex;  /* 슬라이드들이 가로로 나열되도록 */
}
.visual .swiper-wrapper {
    display: flex;  /* 슬라이드들이 한 줄로 가로로 배치되게 */
    width: 100%;  /* 부모의 크기와 일치하도록 */
}
.visual .swiper-slide {
    width: 100vw;  /* 슬라이드 하나가 화면의 100% width만 차지하도록 */
    height: 100%;
    flex-shrink: 0;  /* 슬라이드가 줄어들지 않도록 */
}
.visual .swiper-slide a {
    display: block;
    width: 100%;
    height: 100%;
}
.visual .sw-visual .sw-slide01 {
    background: url('../images/MAIN-banner.png') no-repeat center;
    background-size: cover;  /* 이미지가 화면 크기에 맞게 조정되도록 */
}
.visual .sw-visual .sw-slide02 {
    background: url('../images/MAIN-img-01.png') no-repeat center;
    background-size: cover;  /* 이미지가 화면 크기에 맞게 조정되도록 */
}


/* 브랜드 아이덴티티 섹션 */
.identity {}
.identity .container {
    width: 100%;
    padding: 90px 150px;
    position: relative;
}
.identity .container .title {
    margin-bottom: 50px;
}
.identity .container h2 {
    text-align: center;
    color: #75543c;
}
.identity .container h4 {
    text-align: center;
    
}
.brand-intro {
    display: flex;
    justify-content: space-between;
    /* justify-content: center;
    gap: 150px; */
    align-items: center;
}
.brand-intro .brand-wrap::after {
    content: '';
    display: block;
    background-color: #806954;
    width: 1px;
    height: 30%;
    position: absolute;
    top: 50%;
    left: 35%;
}
.brand-intro .brand-wrap2::after {
    content: '';
    display: block;
    background-color: #806954;
    width: 1px;
    height: 30%;
    position: absolute;
    top: 50%;
    left: 66%;
}
.brand-intro li .brand-intro-sec {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.brand-intro li .img-wrap {
    width: 80px;
    height: 80px;
}
.brand-intro li .img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.brand-intro li .desc-wrap {}
.brand-intro li .desc-wrap h4 {
    color: #75543c;
    margin-bottom: 30px;
}
.brand-intro li .desc-wrap p {}
.brand-intro li .desc-wrap p span {}
.brand-intro li .desc-wrap p p {
    color: #75543c;
}
/* 브랜드아이덴티티 반응형 */
/* breake point - 768px */
@media screen and (max-width:768px) {
    .identity .container {
        width: 100%;
        padding: 45px 70px;
        position: relative;
    }
    .identity .container h4 {
        font-size: 2.5vw;
    }
    .brand-intro li .desc-wrap p {
        font-size: 1.85vw;
    }
}

/* 메뉴 섹션 */
.menu {
    background-color: #806954;
    position: relative;
}
/* .menu .paper {
    position: absolute;
    top:-4.5%;
    left:0;
}
.menu .paper-bottom {
    position: absolute;
    top:96.5%;
    left:0;
    transform: rotate(180deg);
} */
.menu .paper img {
    width: 100%;
}
.menu .container {
    padding: 90px 50px;
    width: 100%;
}
.menu .container::before {
    background-image: url('../images/paper-side-01.png');
    content: "";
    background-position: center;
    background-size: auto 40px;
    background-repeat: repeat-x;
    width: 100%;
    height: 10px;
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
}
.menu .container::after {
    background-image: url('../images/paper-side-01.png');
    content: "";
    background-position: center;
    background-size: auto 40px;
    background-repeat: repeat-x;
    width: 100%;
    height: 10px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    transform: rotate(180deg);
}
.menu .container h2 {
    color: #eae1d2;
    margin-bottom: 50px;
}
.menuTab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}
.menuTab .tabMenu {
    margin: 0 auto;
    display:flex;
    justify-content: space-between;
    align-items: center;  
    gap: 4%;
}
.menuTab .tabMenu li {}
.menuTab .tabMenu li a {
    font-family: "Slabo 27px", serif;
    font-weight: 400;
    font-style: normal;
    display: block;
    padding: 10px 15px;
    background-color: #aa9375;
    border-radius: 20px;
    color: #fff;
}
.menuTab .tabMenu li a h4 {
    font-weight: 400;
}
.menuTab .tabMenu li.active a {
    color: #75543c;
    background-color: #eae1d2;
}
.menuTab > a {
    padding: 4px 32px 4px 15px;
    font-size: 14px;
    line-height: 1.429;
    background: transparent url('../images/arrowR_8x13.png') no-repeat calc(100% - 7px) center;
    background-size: 8px 13px;
    border: 1px solid #e2e2e2;
    border-radius: 15px;
    box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.05);
}
  
/* swiper-slide */
.tabs {
    position: relative;
}
.tabs #tabs-1,
.tabs #tabs-2,
.tabs #tabs-3,
.tabs #tabs-4 {
    position: relative;
}
.swiper {
    width: 100%;
    
}
.swiper .swiper-wrapper {
}
.swiper-slide .imgWrap {
    position: relative;
    
}
.swiper-slide .imgWrap img {
    width: 100%;  
    object-fit: cover;
    
}
.swiper-slide .menu-name {
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    color: #c7af8b;
    /* font-size: 1.4rem; */
    font-size: 1.1vw;
}  
.btn-next,
.btn-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    text-align: center;
    cursor:pointer;
    z-index:9;
}
.btn-next {
    right: -3%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* transform: translateY(-50%) rotate(-180deg);
    transform-origin: center center; */
}
.btn-prev {
    left: -3%;
    display: flex;
    justify-content: center;
    align-items: center;
}
  
.btn-next img,
.btn-prev img {
    display: block;
    width: 10vw;
    height: 7vh;
    object-fit: cover;
}
.btn-next img {
    transform: rotate(-180deg);
}
  
.movie-info-wrap {}
.movie-info-wrap h4 {
    color: #222;
    font-size: 18px;
    text-align:center;
    white-space: nowrap; /* 텍스트를 한 줄로 유지 */
      overflow: hidden; /* 넘치는 텍스트를 숨김 */
      text-overflow: ellipsis; /* 넘치는 텍스트에 생략 기호(...) 표시 */
    margin-top: 14px;
}
.movie-info-wrap p {
    text-align: center;
    margin-top:9px;
    font-size: 14px;
}
.movie-info-wrap p span {}
.movie-info-wrap p span~span {
    padding-left: 16px;
}
  .movie-info-wrap p span img {
    vertical-align:middle;
    width: 16px;
    height: 16px;
}
/* 메뉴 섹션 반응형 */
@media screen and (max-width:1625px) {
    .swiper-slide .menu-name {
        font-size: 1.2vw;
    }  
}
@media screen and (max-width:1540px) {
    .swiper-slide .menu-name {
        font-size: 1.3vw;
    }  
}
@media screen and (max-width:1120px) {
    .swiper-slide .menu-name {
        font-size: 1.45vw;
    }  
}
@media screen and (max-width:980px) {
    .swiper-slide .menu-name {
        font-size: 1.6vw;
    }  
}
/* 스테디 셀러 섹션 */
.steady-seller {}
.steady-seller .container {
    /* border: 1px solid red; */
    padding: 70px 0;
}
.steady-seller .container .title {
    margin-bottom: 60px;
}
.steady-seller .container .title h2 {
    color: #75543c;
}
.steady-seller .container .title h4 {}
.steady-seller .container .steady-boxes {
    display: flex;
    justify-content: center;
    gap: 3%;
}
.steady-seller .container .steady-boxes .steady-box {
    /* background-color: rgba(226,199,170,0.8); */
    border-radius: 5px;
    box-shadow: 15px 15px 20px 0 rgba(0,0,0,0.2);
    border: 2px solid rgba(229,217,220,0.5);
}

.steady-seller .container .steady-boxes .container03, 
.steady-seller .container .steady-boxes .container04, 
.steady-seller .container .steady-boxes .container05,
.steady-seller .container .steady-boxes .container06, 
.steady-seller .container .steady-boxes .container07 {
    clip-path: polygon(0% 10%, 10% 0%, 90% 0%, 100% 0%, 100% 90%, 90% 100%, 10% 100%, 0% 100%);
}

/* left-box */
.steady-seller .container .steady-boxes .left-box {
    flex-basis: 34%;
    margin-top: 15%;
}
.steady-seller .container .steady-boxes .left-box .steady-box {
    display: flex;
    margin-bottom: 10%;
    align-items: center;
    justify-content: center;
    padding: 25px 0;
    /* 네개 모서리 다 깎은버전 */
    /* clip-path: polygon(0% 10%, 10% 0%, 90% 0%, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0% 90%); */
}
.steady-boxes .left-box .steady-box .img-wrap {
    flex-basis: 54%;
}
.steady-boxes .left-box .steady-box .img-wrap img {
    width: 115%;
}
.steady-boxes .steady-box .img-wrap img {
    transition: 0.3s;
}
.steady-boxes .steady-box .img-wrap img:hover {
    transform: scale(1.2);
}
.steady-boxes .left-box .steady-box .desc-wrap {
    flex: 46%;
    text-align: center;
    margin-right: 10%;
}
.steady-boxes .steady-box .desc-wrap span {
    font-size: 1.2rem;
    color: #ba6442;
    display: inline-block;
    margin-bottom: 2%;
}
.steady-boxes .steady-box .desc-wrap p {
    color: #75543c;
    font-size: 0.8rem;
    margin-bottom: 8%;
    white-space: nowrap;
}
.steady-boxes .steady-box .desc-wrap a {
    display: block;
    width: 8rem;
    font-size: 0.9rem;
    color: #c7af8b;
    background-color: #75543c;
    padding: 10px 5px;
    margin: 0 auto;
    transition: .4s;
    clip-path: polygon(10% 0%, 0% 50%, 10% 100%, 90% 100%, 100% 50%, 90% 0%);
}
.steady-seller .container .steady-boxes .container01 {
    clip-path: polygon(0% 10%, 0% 0%, 90% 0%, 100% 15%, 100% 100%, 90% 100%, 10% 100%, 0% 85%);
    background: url('../images/STEADY-bg-01.png')no-repeat, rgba(226,210,181,0.6);
    background-size: 50%;
    background-position: 17% 70%;
    position: relative;
}
.steady-seller .container .steady-boxes .container01::after {
    display: block;
    content: '';
    width: 80px;
    height: 2px;
    background-color: red;
    position: absolute;
    transform: rotate(45deg);
    top: 0%;
    left: 0%;
}
.steady-seller .container .steady-boxes .container01 .desc-wrap a:hover {
    background-color: #ed6c24;
    color: #e2e2e2;
}
.steady-seller .container .steady-boxes .container02 .desc-wrap a:hover {
    background-color: #ab8a6a;
    color: #e2e2e2;
}
.steady-seller .container .steady-boxes .container03 .desc-wrap a:hover {
    background-color: #365442;
    color: #e2e2e2;
}
.steady-seller .container .steady-boxes .container04 .desc-wrap a:hover {
    background-color: #cbaa75;
    color: #e2e2e2;
}
.steady-seller .container .steady-boxes .container05 .desc-wrap a:hover {
    background-color: #ab8a6a;
    color: #e2e2e2;
}
.steady-seller .container .steady-boxes .container06 .desc-wrap a:hover {
    background-color: #ed6c24;
    color: #e2e2e2;
}
.steady-seller .container .steady-boxes .container07 .desc-wrap a:hover {
    background-color: #365442;
    color: #e2e2e2;
}
.steady-seller .container .steady-boxes .container02 {
    clip-path: polygon(0% 10%, 10% 0%, 90% 0%, 100% 0%, 100% 90%, 90% 100%, 10% 100%, 0% 100%);
    background: url('../images/STEADY-bg-02.png')no-repeat, rgba(217,199,170,0.8);
    background-size: 50%;
    background-position: 17% 70%;
}
.steady-seller .container .steady-boxes .container02 .desc-wrap span {
    color: #75543c;
}


/* mid-box */
.steady-seller .container .steady-boxes .mid-box {
    flex-basis: 24%
}
.steady-seller .container .steady-boxes .mid-box .steady-box {
    display: flex;
    flex-direction: column;
    margin-bottom: 10%;
    align-items: center;
}
.steady-boxes .mid-box .steady-box .img-wrap {
    flex-basis: 54%;
    text-align: center;
}
.steady-boxes .mid-box .steady-box .img-wrap img {
    width: 90%;
}
.steady-boxes .mid-box .steady-box .desc-wrap {
    flex-basis: 46%;
    text-align: center;
}
.steady-seller .container .steady-boxes .container03 {
    background: url('../images/STEADY-bg-03.png')no-repeat, rgba(217,199,170,0.8);
    background-size: 70%;
    background-position: center 10%;
    height: 34%;
    
}

.steady-seller .container .steady-boxes .container03 .img-wrap {
    height: 60%;
}
.steady-seller .container .steady-boxes .container03 .img-wrap img {
    object-position: center top;
    height: 100%;
    object-fit: cover;
}
.steady-seller .container .steady-boxes .container03 .desc-wrap {
    height: 40%;
    width: 100%;
}
.steady-seller .container .steady-boxes .container03 .desc-wrap span {
}
.steady-seller .container .steady-boxes .container04 {
    background: url('../images/STEADY-bg-04.png') no-repeat, rgba(217, 199, 170, 0.8);
    background-size: 74%;
    background-position: -37% center;
    display: flex !important;
    flex-direction: row !important;
    height: 23%;
}
.steady-seller .container .steady-boxes .container04 .img-wrap {
    width: 100%;
}   
.steady-seller .container .steady-boxes .container04 .img-wrap img {
    width: 140%;
    /* object-position: -21px; */
    object-position: -0.6rem -0.5rem;
}
.steady-seller .container .steady-boxes .container04 .desc-wrap {
    margin-right: 7%;
    margin-bottom: 0;
    white-space: nowrap;
}
.steady-seller .container .steady-boxes .container04 .desc-wrap span {
    color: #b58b48;
}
.steady-seller .container .steady-boxes .container05 {
    background: url('../images/STEADY-bg-05.png')no-repeat, rgba(217,199,170,0.8);
    background-size: 70%;
    background-position: center 10%;
    height: 34%;
}
.steady-seller .container .steady-boxes .container05 .img-wrap {
    height: 60%;
}
.steady-seller .container .steady-boxes .container05 .img-wrap img {
    object-position: center top;
    height: 100%;
    object-fit: cover;
}
.steady-seller .container .steady-boxes .container05 .desc-wrap {
    height: 40%;
    width: 100%;
}
.steady-seller .container .steady-boxes .container05 .desc-wrap span {
    color: #977758;
}
.steady-seller .container .steady-boxes .container06 {
    background: url('../images/STEADY-bg-01.png')no-repeat, rgba(217,199,170,0.8);
    background-size: 50%;
    background-position: right 75%;
}

/* right-box */
.steady-seller .container .steady-boxes .right-box {
    flex-basis: 34%;
    margin-top: 22%;
}
.steady-seller .container .steady-boxes .right-box .steady-box{
    display: flex;
    margin-bottom: 10%;
}
.steady-seller .container .steady-boxes .left-box {
    flex-basis: 34%;
    margin-top: 15%;
}
.steady-seller .container .steady-boxes .right-box .steady-box {
    display: flex;
    margin-bottom: 10%;
    align-items: center;
    justify-content: center;
    padding: 25px 0;
}
.steady-boxes .right-box .steady-box .img-wrap {
    flex-basis: 60%;
    order:2;
    margin-right: 8%;
}
.steady-boxes .right-box .steady-box .img-wrap img {
    width: 115%;
}
.steady-boxes .right-box .steady-box .desc-wrap {
    flex: 46%;
    text-align: center;
    margin-left: 10%;
    order:1;
}
.steady-seller .container .steady-boxes .container06 .desc-wrap span {}
.steady-seller .container .steady-boxes .container07 {
    background: url('../images/STEADY-bg-03.png')no-repeat, rgba(217,199,170,0.8);
    background-size: 50%;
    background-position: right 75%;
}
.steady-seller .container .steady-boxes .container07 .desc-wrap span {
    color: #365442;
}
/* 스테디셀러 반응형 */
/* breakepoint - 768px */
/* @media screen and (max-width:768px) {
    .steady-seller .container .steady-boxes {
        display: block;
        position: relative;
    }
    .steady-seller .container .steady-boxes .steady-box {
        position: relative;
        
    }
    .steady-seller .container .steady-boxes .container01 {
        width: 48%;
        top: 63vh;
        left: -10px;
    }
    .steady-seller .container .steady-boxes .container02 {
        width: 48%;
        top: -20vh;
        left: 50vh;
    }
    .steady-seller .container .steady-boxes .container03 {
        width: 40%;
        top: -94vh;
        left: 6vh;
    }
    .steady-seller .container .steady-boxes .container04 {
        width: 40%;
        top: -54vh;
        left: 49vh;
        flex-direction: column !important; 
        background-size: 100%;
        background-position: center top;
    }
    .steady-seller .container .steady-boxes .container04 .img-wrap {
        width: 70%;
    }
    .steady-seller .container .steady-boxes .container05 {
        width: 40%;
        top: -83vh;
        left: 6vh;
    }
    .steady-seller .container .steady-boxes .container06 {
        width: 48%;
        top: -248vh;
        left: 50vh;
    }
    .steady-seller .container .steady-boxes .container07 {
        width: 48%;
        top: -252vh;
        left: -2vh;
    }
} */

/* 스테디셀러 반응형 */
@media screen and (max-width:768px) {
    .steady-seller .container .steady-boxes {
        display: flex;
        position: relative;
        flex-direction: column;
    }
    .steady-seller .container .steady-boxes .steady-box {
        position: relative;
        width: 45%;
    }
    .steady-seller .container .steady-boxes .container01 {
        /* width: 48%; */
        top: 0;
        left: 3%;
    }
    .steady-seller .container .steady-boxes .container02 {
        /* width: 48%; */
        top: -146px;
        left: 52%;
    }
    .steady-seller .container .steady-boxes .container03 {
        /* width: 48%; */
        top: 0;
        left: 0;
    }
    .steady-seller .container .steady-boxes .container04 {
        /* width: 48%; */
        top: 0;
        left: 49%;
    }
    .steady-seller .container .steady-boxes .container05 {
        /* width: 48%; */
        top: 0;
        left: 0;
    }
    .steady-seller .container .steady-boxes .container06 {
        /* width: 48%; */
        top: 0;
        left: 49%;
    }
    .steady-seller .container .steady-boxes .container07 {
        /* width: 48%; */
        top: 0;
        left: 0;
    }
    

}

/* 매장찾기 섹션 */
.map {
    height: 100vh;
    background: url('../images/MAP-BACKGROUND.png') no-repeat center;
    background-size: cover;
}
.map .container {
    height: 100%;
    padding: 70px 150px;
}
.map .container .map-area {
    height: 100%;
}
.map .container .map-area h2 {
    color: #365442;
}
.map .container .map-area h4 {
    text-align: center;
}
.map .container .map-area .map-boxes {
    background: url('../images/MENU-box-img.png')no-repeat center;
    background-size: contain;
    position: relative;
    width: 100%;
    height: 85%
}
/* .map .container .map-area .map-boxes .map-btn {
    width: 65%;
    height: 74px;
    gap: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
} */
.map .container .map-area .map-boxes .map-btn {
    width: 65%;
    height: 20%;
    gap: 2%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
}
.map .container .map-area .map-boxes .map-btn li:nth-child(1), 
.map .container .map-area .map-boxes .map-btn li:nth-child(2), 
.map .container .map-area .map-boxes .map-btn li:nth-child(3) {
    width: 100%;
    height: 100%;
    background: url('../images/MAP-btn-bg-01.png') no-repeat center;
    background-size: contain;
    position: relative;
}
.map .container .map-area .map-boxes .map-btn li:nth-child(4),
.map .container .map-area .map-boxes .map-btn li:nth-child(5) {
    background: url('../images/MAP-btn-bg-02.png') no-repeat center;
    width: 90%;
    height: 100%;
    position: relative;
    background-size: contain;
}
.map .container .map-area .map-boxes .map-btn > li:nth-child(4) a {
    color: #fff;
}
.map .container .map-area .map-boxes .map-btn > li:nth-child(5) a {
    color: #fff;
}

.map .container .map-area .map-boxes .map-btn li a {
    font-size: 0.875rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    white-space: nowrap;
    font-size: 0.8rem;
}
.map-area .map-boxes .map-box {
    width: 65%;
    display: flex;
    justify-content: center;
    justify-content: space-between;
    gap: 3%;
    /* align-items: center; */
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.map-area .map-boxes .map-left {
    width: 40%;
}
.map-area .map-boxes .map-left .map-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
}
.map-area .map-boxes .map-box .map-left .map-intro .img-wrap {
    width: 100%;
}
.map-area .map-boxes .map-box .map-left .map-intro .img-wrap img {
    width: 100%;
}
.map-area .map-boxes .map-box .map-left .map-intro .desc-wrap div {
    margin-bottom: 2%;
}
.map-area .map-boxes .map-box .map-left .map-intro .desc-wrap div:last-child {
    margin-bottom: 0;
}
.map-area .map-boxes .map-box .map-left .map-intro .desc-wrap .store {
    font-size: 1.2rem;
    color: #365442;
    margin-bottom: 10px;
}
.map-area .map-boxes .map-box .map-left .map-intro .desc-wrap .call {
    font-size: 1rem;
    color: #365442;
}
.map-area .map-boxes .map-box .map-left .map-intro .desc-wrap p {
    font-size: 0.75rem;
}

.map-area .map-boxes .map-box .map-right {
    border: 1px solid #333;
    width: 60%;
}
.map-area .map-boxes .map-box .map-right .map-intro {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
.map-area .map-boxes .map-box .map-right .map-intro > li {
    border-bottom: 1px solid #333;
    padding: 1.5% 0% 1.5% 20%;
    background: url('../images/MAP-icon-01.png')no-repeat left;
    background-size: 60px;
}
.map-area .map-boxes .map-box .map-right .map-intro > li:last-child {
    border-bottom: 0;
}
.map-area .map-boxes .map-box .map-right .map-intro > li > a {
    font-size: 1.05rem;
}
.map-area .map-boxes .map-box .map-right .map-intro li .map-intro-sec {}
.map-area .map-boxes .map-box .map-right .map-intro li .map-intro-sec li {

}
.map-area .map-boxes .map-box .map-right .map-intro li .map-intro-sec li a {
    white-space: nowrap;
    font-size: 0.7rem;
}
.map-area .map-boxes .map-box .map-right .map-intro li .map-intro-sec li .call {
    color: #365440;
}
/* map 반응형 */
@media screen and (max-width:1600px) {
    .map .container .map-area h4 {
        font-size: 1.25vw
    }
    .map-area .map-boxes .map-box {
        height: 35vh;
    }
    /* map-left */
    .map-area .map-boxes .map-box .map-left .map-intro .desc-wrap .store {
        font-size: 1.15vw;
    }
    .map-area .map-boxes .map-box .map-left .map-intro .desc-wrap .call {
        font-size: 1vw;
    }
    .map-area .map-boxes .map-box .map-left .map-intro .desc-wrap p {
        font-size: 0.85vw;
    }
    /* map-right */
    .map-area .map-boxes .map-box .map-right .map-intro > li > a {
        font-size: 1vw;
    }
    .map-area .map-boxes .map-box .map-right .map-intro li .map-intro-sec li a {
        font-size: 0.85vw;
    }
    
    /* map icon */
    
} 
@media screen and (max-width:1240px) {
    .map-area .map-boxes .map-box .map-right .map-intro > li {
        border-bottom: 1px solid #333;
        padding: 0.3vw;
        background: url(../images/MAP-icon-01.png) no-repeat left;
        background-size: 60px;
    }
} 
@media screen and (max-width:1200px) {
    .map-area .map-boxes .map-box .map-right .map-intro > li {
        border-bottom: 1px solid #333;
        padding: 0;
        background: url(../images/MAP-icon-01.png) no-repeat left;
        background-size: 60px;
    }
} 
@media screen and (max-width:1120px) {} 
@media screen and (max-width:768px) {} 

/* 미니맵 */
.map-area .map-boxes .miniMap {
    position: absolute;
    width: 25%;
    opacity: 0;
    visibility: hidden;
}
.map-area .map-boxes #map01.active {
    top: 4.5vw;
    left: -23.5%;
    opacity: 1;
    visibility: visible;
}
.map-area .map-boxes #map02.active {
    top: 43%;
    right: 104.5%;
    opacity: 1;
    visibility: visible;
}
.map-area .map-boxes #map03.active {
    top: 26%;
    right: -22.5%;
    opacity: 1;
    visibility: visible;
}
.map-area .map-boxes .miniMap img {
    width: 100%;
    object-fit: cover;
}
.map-area .map-boxes .miniMap .desc {
    position: absolute;
    top: 20.5%;
    left: 50%;
    transform: translate(-50%);
}
.map-area .map-boxes .miniMap .desc .name {
    color: #fff;
    font-size: 0.7vw;
    text-align: center;
    margin-bottom: 18%;
}
.map-area .map-boxes .miniMap .desc p {
    font-size: 0.6vw;
    white-space: nowrap;
    color: #555;
}

.map-area .map-boxes .map-icon {
    width: 6%;
    position: absolute;
}
.map-area .map-boxes .map-icon a {}
.map-area .map-boxes .map-icon a img {
    width: 100%;
}
.map-area .map-boxes .icon01 {
    top: 37%;
    left: -14%;
}
.map-area .map-boxes .icon02 {
    top: 67%;
    left: -20%;
}
.map-area .map-boxes .icon03 {
    top: 50%;
    right: -13%;
}


/* 배너영역 */
.banner {
    background-color: #ebe2d5;
    position: relative;
}
.banner .container::before {
    background-image: url('../images/paper-side-02.png');
    content: "";
    background-position: center;
    background-size: auto 40px;
    background-repeat: repeat-x;
    width: 100%;
    height: 10px;
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
}
.banner .container::after {
    background-image: url('../images/paper-side-02.png');
    content: "";
    background-position: center;
    background-size: auto 40px;
    background-repeat: repeat-x;
    width: 100%;
    height: 10px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    transform: rotate(180deg);
}
.banner .container {
    padding: 70px 0;
}
.banner .container h2 {
    margin-bottom: 40px;
    color: #75543c;
}
.banner .banner-boxes {
    display: flex;
    justify-content: space-between;
    gap: 2%;
}
.banner .banner-boxes .banner-box {
    border-radius: 5px;
    box-shadow: 4px 4px 7px 0 rgba(0,0,0,0.2);
    overflow: hidden;
    /* height: 492px; */
    flex-basis: 25%;
}
.banner .banner-boxes .banner-box img {
    height: 100%;
    width: 100%;
}

/* sns 영역 */
.sns {
    padding: 100px 0 150px 0;
}
.sns h2 {
    margin-bottom: 20px;
    color: #75543c;
}
.sns .swiper-slide {}

/* ============ 푸터영역 ============ */
.footer {
    background-color: #365442;
    padding: 70px 120px;
    border-radius: 50px 50px 0 0;
    color: #fff;
    font-size: 0.9vw;
    font-weight: 300;
    
}
.footer .container {
    /* border: 1px solid red; */
}
.footer .footer-top {
    width: 100%;
    margin-bottom: 80px;
    position: relative;
}
/* 가상요소 */
.footer .footer-top::after {
    content: '';
    display: block;
    position: absolute;
    top: 250%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 1px;
    background-color: #fff;
    opacity: 0.3;
}
.footer .footer-top ul {
    display: flex;
    gap: 7%;
    align-items: center;
    justify-content: space-between;
}
.footer .footer-top ul .orange {
    color: #ed6c24;
}
.footer .footer-top ul li {}

/* footer-bottom */
.footer .footer-bottom {
    display: flex;
    white-space: nowrap;
    flex-wrap: wrap;
    width: 40%;
    margin-bottom: 40px;
}
.footer .footer-bottom li {
    margin-bottom: 5px;
}
.footer .footer-bottom li ul {
    display: flex;
    justify-content: center;
    gap: 5px;
    align-items: center;
    margin-right: 20px;
}
.footer .footer-bottom li {}
.footer .footer-bottom li ul span {}
.footer .footer-bottom li ul li {}
.footer .footer-bottom li ul li span {}
.footer .footer-bottom li ul li p {}
.footer .copyright {
    color: #757574;
}
@media screen and (max-width:1370px) {
    .footer {
        padding: 70px;
        font-size: 1vw;
    }    
}       
@media screen and (max-width:1120px) {
    .footer {
        padding: 60px 70px;
        font-size: 1.1vw;
    }   
}
@media screen and (max-width:980px) {
    .footer {
        padding: 50px;
        font-size: 1.2vw;
    }   
}
@media screen and (max-width:768px) {
    .footer {
        padding: 40px;
        font-size: 1.25vw;
    }   
}