@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css');
* {  font-family: 'Pretendard Variable'; word-break: keep-all;}
@media screen and (max-width: 767px) {    :root { --font-size-basic: 17px; } }  
@media screen and (min-width: 768px) {    :root { --font-size-basic: 14px; }}
body { font-size: var(--font-size-basic);}
/* //font ===========================================================X 
=====================================================================X
=====================================================================X */
*{  margin: 0; padding: 0; list-style: none; text-decoration: none;}
* a:link{ color:inherit;}
.banner__top div a{ display: block; text-decoration: none; width: 100%; height: 100%; }

body { transition: all 1s ease;      }
:root { 
    --zndx_g:999; /*pc gnb*/
    --zndx_x:1000; /*aside*/
}



/* =====================================================================X
=====================================================================X

5E0B15
90323D
D9CAB3
BC8034
8C7A6B   #F69C76

color */
:root { 
--color-bg:#F2F2EB;  
--color-bg-list:#E9E7D5; 


/* --color-bg:#E7DDDC;
--color-font-basic:#253556; 
--color-font-basic:#F87C56;    
--color-font-basic:#bb3232;*/
--color-font-basic:#2c2c2c;
/*--color-bg-footer:#081A4D;  
--color-bg-footer:#531e1e; 
--color-bg-footer:#5E0B15; */
--color-bg-footer:#131313;

--color-font-footer:#D5D5D5; 
--color-font-footer-title:#D9D9D9; 

--top-bar-height:1.8rem; --top-bar-height:0rem;
}
body {background-color: var(--color-bg) ;}
h1 svg { fill: var(--color-font-basic);}

.ham div{ background-color: var(--color-font-basic); }



/* //color ===========================================================X 
=====================================================================X
=====================================================================X


<div class="main__b__title" >
            <h2>한바다 A<br>키즈풀빌라</h2>
            <a href="#"><button class="bt__366">실시간 예약하기</button></a>
    </div>


*/

h2{ 
    font-size: 2.2rem; font-weight: 300;  
    text-align: center; line-height: 1.2; padding-bottom: 1rem;}
.h__366{ color: #fff;}
h3{ font-size: 1.4rem; font-weight: 400; }

.bt__365{ 
    position: relative;
    box-sizing: border-box; border: 0;        
    font-size: 0.85rem;
    padding: 0.6rem 2.6rem;
    background: none; color:var(--color-font-footer);
cursor: pointer;
}
.bt__365::after{
    transition: all 1s ease;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%,-50%) scale(1,1);
    z-index: -1; background-color: var(--color-bg-footer);
}
.bt__365:hover::after{
    transition: all 1s ease;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%,-50%) scale(.92,0.7);
    z-index: -1; background-color: var(--color-bg-footer);
}







.bt__366{ 
    position: relative;
    box-sizing: border-box; border: 0;        
    font-size: 0.85rem;
    padding: 0.6rem 2.6rem;
    background: none; color:var(--color-bg-footer);
cursor: pointer;
z-index:2;
}
.bt__366::after{
    transition: all 1s ease;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%,-50%) scale(1,1);
    z-index:-1; background-color: #fff;
}
.bt__366:hover::after{
    transition: all 1s ease;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%,-50%) scale(.92,0.7);
    z-index:-1; background-color: #fff;
}






.bt__367{ 
    position: relative;
    box-sizing: border-box; border: 0;        
    font-size: 0.85rem;
    padding: 0.6rem 2.6rem;
    background: none; color:var(--color-bg-footer);
cursor: pointer;
z-index:2;
}
.bt__367::after{
    transition: all 1s ease;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%,-50%) scale(1,1);


    z-index:-1; background-color: #ffffff00; border: .04rem solid var(--color-bg-footer);box-sizing: border-box;
}
.bt__367:hover::after{
    transition: all 1s ease;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%,-50%) scale(.92,0.7);
    z-index:-1; background-color: #ffffff00; border: .04rem solid var(--color-bg-footer);box-sizing: border-box;
}


/*
@media screen and (max-width: 767px) {

}  
@media screen and (min-width: 768px) and (max-width: 1023px) {

}
@media screen and (min-width: 1024px) and (max-width: 1919px) {
    
}  
@media screen and (min-width: 1920px) {

    
}

*/


section#nav__outer{
    width: 100%; position:fixed; height:0;     height: 5.25rem; top: 1.8rem; top: var(--top-bar-height); -mix-blend-mode: hard-light;    z-index: var(--zndx_g); position: sticky; top: -1px; 
    background-color: #F2F2EB;
}

nav{  height: 4.25rem; padding:.0rem 4vw 0 ; display: flex;      justify-content: space-between;    align-items: center;      -background-color: red; }
    nav h1 { width: fit-content;          position: relative; -background-color: red;}
    nav h1 svg:nth-child(1){ width: 11rem; height: 2.72rem;    -background-color: green;}
    nav h1 svg:nth-child(2){ width: 4.5rem; height: .72rem;   -background-color: rgb(92, 70, 194);
        position: absolute;
        left: 0; 
        bottom: -.2rem;    
    }
    nav .menu { display: block ;  
        font-size: 1em; line-height: 1.5; font-weight: 400;
        color: var(--color-font-basic);
        padding: 0 ; margin: 0; width: fit-content;
        background-color: initial;     }

    nav .menu a{       transform:sKewX(0deg); display: flex; align-items: center;          color:var(--color-font-basic);    -background-color: green;}
    nav .menu a span{ padding-right: .35rem; display: none;}
        nav .menu a svg{width: 1.6rem; height: 1.6rem; }




        /* 
section#nav__outer.is-pinned nav h1 svg{     width: 5.7rem; height: 3.72rem;  left: 0; transform: translate(0%,0);}
~~~ */
/* ~~~ */
/* ~~~ */
@media screen and (min-width: 768px) {
    section#nav__outer{    height: 4.85rem; }
    nav{  height: 4.25rem; padding:.0rem 20px 0 ; display: flex; width: 100%; max-width: 1280px; -box-sizing: border-box; margin: 0 auto;      justify-content: space-between;    align-items: center;      -background-color: red; }
    nav h1 { width: fit-content;         -background-color: green;}
    nav h1 svg{ width: 12.7rem; height: 2.72rem; left: 0%; }
    nav .menu { display: block ; 
        font-size: 1em; line-height: 1.5; font-weight: 400;
        color: var(--color-font-basic);
        padding: 0 ; margin: 0; width: fit-content;
        background-color: initial;     }
    nav .menu a{       transform:sKewX(0deg); display: flex; align-items: center;          color:var(--color-font-basic); }
        nav .menu a svg{width: 2.6rem; height: 1.62rem;  left: 0; transform: translate(0%,0);}
        nav .menu a span{ padding-right: .35rem; display: inline-block;}
    }
@media screen and (min-width: 1024px) {
    nav .menu *{ font-size: .95rem; }
}




nav .menu>span:nth-child(1){ position: absolute;
    padding: 5px 10px; background-color: #cecfc2; color: #000;
    font-size: .85rem; font-weight: 400;    border-radius: 12px;
    width: 70vw; max-width: 350px;
    right: 50%; bottom: -15px;
    transform: translate(50%,0);
    text-align: center;
}
nav .menu>span:nth-child(1) span{ display: inline-block; width: 16px;}
@media screen and (min-width: 768px) {
    nav .menu{ display: flex; position: relative; flex-direction: row; align-items: center; gap: 20px;}
    nav .menu>span:nth-child(1){ position: relative;
        padding: 2px 20px; background-color: #cecfc2; color: #000;
        font-size: .85rem; font-weight: 400;    border-radius: 4px;
    
        width: auto; max-width: 350px;
        right: 0%; bottom: -0px;
        transform: translate(00%,0);
        text-align: center;
    
    
    }
}











.mainSlide { width: 100%; margin: 0 auto; }
.mainSlide .swiper { width: 100%; }
.mainSlide .swiper-slide { position: relative; }
.mainSlide .swiper-slide .pic{ 
    display: block;
    position: relative; margin: 0 auto;         
    height: 0;        
    overflow: hidden; box-sizing: border-box;
    width: 100%;  padding-bottom: 100%;
}
@media screen and (max-width: 767px) {                          .mainSlide .swiper-slide .pic{  width: 100%;  padding-bottom: calc(50% + 20rem) ;}    }  
@media screen and (min-width: 768px) and (max-width: 1023px) {  .mainSlide .swiper-slide .pic{  width: 100%; padding-bottom: calc(50% + 16rem) ;}    }  
@media screen and (min-width: 1024px) and (max-width: 1919px) {.mainSlide .swiper-slide .pic{  width: 100%;  padding-bottom: calc(28% + 15rem) ;}       }  
@media screen and (min-width: 1920px) {                         .mainSlide .swiper-slide .pic{  width: 1920px;  padding-bottom: calc(50rem) ;}            }
.mainSlide .swiper-slide .pic img { 
    display: block; width: 100%; height: 100%; object-fit: cover;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.mainSlide .swiper-slide .title{ width: 100%;
margin: 0 auto;
max-width: 1020px;
text-align: center;
position: sticky;
z-index: 99;
bottom: 0px;
padding: 1rem 0 3rem 0 ;
background-color: var(--color-bg);
}
































footer{
    background-color:#131313; overflow: hidden;}
.foot__container{

    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    align-content: center; overflow: hidden;
    width: 100%; max-width: 1080px; max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 1.6rem 20px;      
}
.foot__container div{color: #ffffffd7;
    font-size: 0.85rem;
    font-weight: 400;}
@media screen and (min-width: 768px) {
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
}
@media screen and (min-width: 1024px) {          
}



























































.ttl__celeb{ width: 100%;  min-height: 2000px; padding-bottom: 50px; position: relative; }
.ttl__celeb__title--outer{width: 100%;  box-sizing: border-box; z-index: 2; position: fixed; top: 82px; position: sticky; top: 10px; padding: 5em 0 0.5em ; background-color: #F2F2EB;     }
.ttl__celeb__title{ width: 96%;  margin: 0 auto;  display: flex;     align-items: center;    justify-content: space-between; max-width: 1080px;  max-width: 1280px;  }
.ttl__celeb__title>div span:first-child{ font-size: 2.1em; font-weight: 600; display: block;}
.ttl__celeb__title>div span:last-child{ font-size: .95em;}
.ttl__celeb__title>ul{ 
    display: flex;   
    width: 100%;
    justify-content: flex-end; justify-content: center
  }
.ttl__celeb__title>ul li{         display: flex; align-items: center; gap: .6em; cursor: pointer;   }
.ttl__celeb__title>ul li img{ 
    display: block;
    overflow: hidden;
    border-radius: 3.2em;
    width: 2.4em; 
    outline:0.13em dotted transparent; outline-offset:.2em; transition: all 0.5s ease;    }
        .ttl__celeb__title>ul li:hover img,
        .ttl__celeb__title>ul li.active img{         outline:0.13em dotted #000; outline-offset:.2em;   }
.ttl__celeb__title>ul li span{ display: block; opacity:1;     }
.ttl__celeb__title>ul li:hover span,
.ttl__celeb__title>ul li.active span{ font-weight: 400; opacity:1;}

.ttl__celeb__title>ul li span{ font-size: 1rem;}




.ttl__celeb__title>ul li{ height: 2rem; width: 5rem; box-sizing: border-box; text-align: center; 
    justify-content: center;      background-color: rgba(221, 212, 200, 0); border: 1px solid #000;  }
.ttl__celeb__title>ul li.active{ background-color: rgb(0, 0, 0);}
.ttl__celeb__title>ul li.active span{ color: #fff;}

.ttl__celeb__title>ul li.list-margin-r{ margin-right: .4rem;}
.ttl__celeb__title>ul li.list-hidden{width: 0 !important; height: 0 !important; overflow: hidden !important; opacity: 0 !important;}



.ttl__celeb__list{ 
    display: grid;
    grid-gap: 4px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-auto-rows: 250px;
    grid-auto-flow: dense;
    width: 100%;margin: 0 auto; padding: 0 20px;       max-width: 1680px;       max-width: 1280px; 
} 
.ttl__celeb__list .big {
    grid-column: span 3;
    grid-row: span 2;
}

.ttl__celeb__list > li {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}


@media screen and (max-width: 768px) {
    .ttl__celeb__list .big {
    grid-column: span 1;
    grid-row: span 2;        }
    .ttl__celeb__list > li { width: 92%; margin: 0 auto; }        
    .ttl__celeb__list{ width: 100%; padding: 0;}
}


.ttl__celeb__list > li a{ display: block;width: 100%; height: 100%; pointer-events: none;  }
.ttl__celeb__list > li  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
    max-width: 100%;
    vertical-align: middle;
    display: inline-block;
    display: none;
    position: absolute;
}
.ttl__celeb__list > li a img:nth-child(1) { display: block;}
.ttl__celeb__list a img{ position: absolute; display: block; width: 100%; height: 100%; object-fit: cover; top: 50%; left: 50%; transform: translate(-50%,-50%);}
    .ttl__celeb__list a img:nth-child(2){ opacity: 0; transition: all .5s ease; }
    .ttl__celeb__list a:hover img:nth-child(2){ opacity: 1; }

    .ttl__celeb__list a img:nth-child(3){ opacity: 0; transition: all .5s ease; transition-delay: .7s; }
    .ttl__celeb__list a:hover img:nth-child(3){ opacity: 1; }
    .ttl__celeb__list a img:nth-child(4){ opacity: 0; transition: all .5s ease; transition-delay: 1.4s; }
    .ttl__celeb__list a:hover img:nth-child(4){ opacity: 1; }

.ttl__celeb__list .description{ display: block; position: absolute; background-color: rgba(0, 0, 0, 0.493); bottom:0px; width: 100%; line-height: 2;}
.ttl__celeb__list .description{ bottom:-30px; transition: all .5s ease;}
.ttl__celeb__list li:hover .description{ bottom:0px;}
.ttl__celeb__list .description{ display: flex; justify-content: space-between; box-sizing: border-box; padding: 0 .81em; padding: 0.32em 0.81em;    align-items: center;}
.ttl__celeb__list .description span{ color: #fff; font-size: .75em; font-weight: 200 !important;     max-width: 50%;                             line-height: 1.2;}

/*재검색창*/

.ttl__celeb__title--title{display: flex;            flex-direction: row;            align-items: center;            gap: 1rem;}
.ttl__celeb__title--title input[type=text], 
.ttl__celeb__title--title input[type=password]{ border-width: 0; border-bottom: 1px solid #898989;}
.ttl__celeb__title--title input::placeholder { color: #000;}









.ponda__container {
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    height:auto; 
    padding:  10px 20px 100px 20px;
    box-sizing: border-box;
    background-color: #fbfbf4;
    overflow: visible;
    margin-bottom: 50px;
}
.ponda__container iframe {
    border: 0px #ffffff none;
    height: 100%;
    width: 100%;
    mix-blend-mode: multiply;overflow: visible;

    min-height: 1500px;
}


@media screen and (max-width: 767px) { .ponda__container iframe { height: 80%; min-height: 700px;}    }
@media screen and (min-width: 768px) { .ponda__container iframe { height: 130%;}    }


.image-container picture.hidden{ display: block;  width: 49%;}
.image-container img{ width: 100% !important;}

@media screen and (max-width: 767px) { 
    .image-container picture.hidden{ display: block;  width: 100%;}


}