@charset "UTF-8";

@keyframes shake-center {
			
    0% {
        transform:rotate(0deg);
    }
    30% {
        transform:rotate(-10deg);
    }
    50% {
        transform:rotate(10deg);
    }
    70% {
        transform:rotate(-10deg);
    }
    
    100% {
        transform:rotate(0deg);
    }
}

@keyframes wave {
    0% {
        transform: translateX(0) rotate(180deg);
    }
    50% {
        transform: translateX(-25%) rotate(180deg);
    }
    100% {
        transform: translateX(-50%) rotate(180deg);
    }
}

input{font-family: 'Pretendard', sans-serif;}
#container{width: 100%; background-color: #fff; overflow: hidden;}

#main_visual{
    width: 100%;
    height: 100%;
    max-width: 2300px;
    margin:0 auto;
    background-image: url('../images/mainSlideImg01.jpg');
    background-position: right bottom;
    background-repeat: repeat-x;
    background-size: auto 100%;
    padding-top:260px;
    padding-bottom:60px;
    position: relative;
    z-index: 10;
    transition: background-image 0.8s ease-out;
}
#main_visual > .inner{display: flex;flex-wrap: wrap;align-items: center; justify-content: space-between; position: relative;}
#main_visual .left_box{
    width: 700px;
}
#main_visual .left_box .outbox{
    
    position: relative;
}
#main_visual .left_box .slide_visual{aspect-ratio: 1.55; border-radius: 70px 0 70px 0;     box-shadow: 14px 14px 35px 0px rgba(32, 32, 32, 0.25); overflow: hidden;}
#main_visual .visual_item {display: block;}
#main_visual .visual_item:focus-visible{outline-offset: -2px;}
#main_visual .left_box .outbox #main_dots{position: absolute; left:50%; bottom:40px; transform: translateX(-50%);}
#main_dots ul{display: flex; gap: 10px; align-items: center;}
#main_dots ul > li{width: 20px; height: 20px; background-color: #fff; border-radius: 50%; }
#main_dots ul > li.slick-active{width: 60px; background-color: #e0aa10; border-radius: 20px;}
#main_dots .slick-dots button{text-indent: -9999px; width: 100%; height: 100%; border-radius: 50%;}
#main_dots ul > li.slick-active button{border-radius: 20px;}
#main_dots .slick-dots button:focus{outline:1px solid #000;}
#main_visual .left_box .outbox .slide_visual .visual_anchor {position: relative;}
#main_visual .left_box .outbox .slide_visual .source_txt{
    display: inline-block;
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 14px;
    text-align: center;
}

#main_visual .right_box{padding-right: 130px; font-family: 'GmarketSans', sans-serif;}
#main_visual .right_box h3{font-size: var(--ft--40);text-align: center;padding-bottom: 20px;}
#main_visual .right_box h3 span{display: inline-block; position: relative;}
#main_visual .right_box h3 span::before{
    content:"";
    display: inline-block;
    width: 110%;
    height: 20px;
    background-color: var(--col--yel);
    border-radius: 40px;
    position: absolute;
    left:50%;
    bottom:5px;
    transform: translateX(-50%);
    z-index: -1;
}
/* animation */
#main_visual .right_box h3 > p{transform: translateY(150px); opacity: 0; transition:all 0.8s ease 0.1s;}
#main_visual .right_box h3 > div{transform: translateY(150px); opacity: 0; transition:all 0.8s ease 0.2s;}
#main_visual.active .right_box h3 > p,
#main_visual.active .right_box h3 > div{transform: translateY(0); opacity: 1;}

#main_visual .opHrs_info{width: 425px; margin:0 auto; background-color: #ffde6b; border-radius: 40px; transform: translateY(150px); opacity: 0; transition:all 0.8s ease 0.3s;}
#main_visual.active .opHrs_info{transform: translateY(0); opacity: 1;}
#main_visual .opHrs_info .box{padding:10px; }
#main_visual .opHrs_info .box .title{font-weight: 700;font-size: var(--ft--25);padding: 6px;text-align: center;}
#main_visual .opHrs_info .desc{background-color:#fff;border-radius: 0 40px 40px 40px;font-family: 'Pretendard', sans-serif;font-size: var(--ft--18);padding: 12px 5px 12px 14px;}
#main_visual .opHrs_info .desc li{padding-bottom:10px; display: flex; gap: 7px; align-items: center;}
#main_visual .opHrs_info .desc li >b{display: inline-block; width: 110px;  padding:5px; color: #fff; background-color: #393939; border-radius: 20px; font-weight: 400; text-align: center;}

#main_visual .opHrs_info .desc li > span{display: inline-block;}

#main_visual .opHrs_info .desc p{position:relative;padding: 0 8px 0 14px;font-size:14px;letter-spacing:-1.3px;}
#main_visual .opHrs_info .desc p:before{position:absolute;display:block;content:'\203B';left: 2px;}

#main_visual::before{
    content:'';
    display: inline-block;
    width: 100%;
    height: 100%;
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,1) 36%, rgba(255,255,255,0) 54%);
    clear: both;
    position: absolute;
    left:0;
    top:0;
    z-index: -1;
    
}
#main_visual::after{
    content:'';
    display: inline-block;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.9);
    opacity: 0.8;
    position: absolute;
    left:0;
    top:0;
    z-index: -1;
}
/* menu_list */
#menu_list{background-color:#fff; padding:75px 0;}
#menu_list .menu_list_slide{max-width: 760px; margin:0 auto; overflow: hidden;}
#menu_list .menu_list_slide a{display: block; width: calc(100% / 4 - 12px); text-align: center; margin: 2px 10px 2px 2px; float: left;}
#menu_list .menu_list_slide .img_box{ width: 100%; max-width: 130px; aspect-ratio:1;  border-radius: 50%; border:1px solid rgb(255, 255, 255);  box-shadow: 10px 10px 20px 0px rgba(32, 32, 32, 0.08); margin:0 auto; padding:30px;}
#menu_list .menu_list_slide .txt_box{
    font-family: 'Pretendard', sans-serif;
    font-size: var(--ft--22);
    text-align: center;
    padding-top:20px;
    color:#333;
}
#menu_list .menu_list_slide a:hover .img_box,
#menu_list .menu_list_slide a:focus .img_box{box-shadow: 10px 10px 20px 0px rgba(32, 32, 32, 0.28);}
#menu_list .menu_list_slide a:hover img,
#menu_list .menu_list_slide a:focus img{ animation: shake-center 1s linear;}

.menu_list_slide .slick-dots{display: flex; gap: 10px; align-items: center; justify-content: center; padding-top:30px;}
.menu_list_slide .slick-dots > li{width: 12px; height: 12px; background-color: #dfdfdf; border-radius: 50%; text-indent: -9999px;}
.menu_list_slide .slick-dots > li.slick-active{width: 30px; background-color: #e0aa10; border-radius: 20px;}

/* menu_list active */
#menu_list .menu_list_slide{
    transform: translateY(100px);
    opacity: 0;
    transition: all .8s ease-in;
}
#menu_list.active .menu_list_slide{
    transform: translateY(0);
    opacity: 1;
}

/* sub_visual */
#sub_visual{position: relative; }
#sub_visual > .inner{ position: relative; z-index: 2; display: flex; justify-content: space-between;}
#sub_visual .left_box{width: 400px; transform: translateY(-100px);}

#sub_visual .right_box{ width: 850px;  padding-top: 100px; position: relative;}
#sub_visual .right_box > .box{overflow: hidden; position: relative; border-radius: 20px; background-color: #FDF4E5;}
#sub_visual .right_box .control_box{
    position: absolute;
    left:0;
    bottom:0;
    background-color:rgba(0,0,0,0.7);
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    color:#fff;
    padding: 5px 55px;
    font-size: 1.4rem;
    font-family: 'Pretendard', sans-serif;
}
#sub_visual .right_box .control_box  .img_tit{color:#fff;}

#sub_visual .right_box .control_box > div{display: flex; gap: 10px; align-items: center;}
#sub_visual .right_box .control_box .page_num_bar{display: flex; gap: 10px; align-items: center;}
#sub_visual .right_box .control_box .page_control{display: flex; gap: 10px; align-items: center;}
#sub_visual .control_box .arrow{width: 8px;}
#sub_visual .control_box .progress {
    display: block;
    width: 50px;
    height: 3px;    
    overflow: hidden;    
    background-color: #C3BDB5;
    background-image: linear-gradient(to right, #F2DC63, #F2DC63);
    background-repeat: no-repeat;
    background-size: 0 100%;
    
    transition: background-size .4s ease-in-out;
}
#sub_visual .control_box .subBanStop{
    width: 7px;
    height: 11px;
    background-image: url(../images/pause01.png);
    background-repeat: no-repeat;

}
#sub_visual .control_box .subBanStop.pause{
    background-image: url(../images/play01.png);
}

#sub_visual .visual_item.slick-active:focus{outline:1px solid #333; outline-offset: -5px;}
#sub_visual::after{
    content:'';
    display: block;
    width: 100%;
    height: 430px;
    background-color: #FCECB4;
    position: absolute;
    left:0;
    top:0;
    z-index: 0;
}
#sub_visual .right_box::before{
    content:"";
    display: block;
    width: 288px;
    height: 160px;
    background-image: url('../images/petBg01.png');
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    right:0;
    top:-95px;
    z-index: 99;
}
/* direct_info */
#direct_info{padding-top: 100px;position: relative; font-family: 'GmarketSans', sans-serif;}
#direct_info .prten{font-family: 'Pretendard', sans-serif;}
#direct_info > .box{
    max-width: var(--mw--1400);
    margin:0 auto;
    display: flex;
    flex-wrap: wrap;
}
#direct_info .left_box{
    width: 800px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#direct_info .left_box .txt_box{ padding-bottom:40px; position: relative;}
#direct_info .left_box .txt_box h3{font-size: var(--ft--56); }
#direct_info .left_box .txt_box p{padding:30px 0 55px; font-size:  var(--ft--28); line-height: 1;  font-weight: 700;}
#direct_info .left_box .txt_box p >span{font-size: var(--ft--22); font-weight: 400;}
#direct_info .left_box .map{height: 435px; position: relative;}
#direct_info .left_box .map > div{
    width: 993px;
    height: 100%;
    position: absolute;
    left:-280px;
    top:0;
    overflow: hidden;
}
#direct_info .map .inner_map{height: 100%; border-radius: 0 30px 0 0 ; overflow: hidden; }
#direct_info .map .inner_map img{width: 100%; height: 100%;}

#direct_info .left_box .txt_box::after{/* 20240621 _수정 */
    content:"";
    display: inline-block;
    width: 174px;
    height: 232px;
    background-image: url("../images/petBg03.png");
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    bottom:-109px;
    right:120px;
    z-index: 99;
}

#direct_info .right_box{width: 600px; padding-top:60px; }
#direct_info .right_box >div{
    width: 100%;
    border-radius: 30px;
    box-shadow: 14px 14px 35px 0px rgba(32, 32, 32, 0.18);
    margin-bottom:55px;
    overflow: hidden;
}

#direct_info .right_box .txt{padding:40px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start }
#direct_info .right_box h3{font-size: var(--ft--36);}
#direct_info .right_box h3 p{font-size: var(--ft--20); margin-top:20px; font-weight: 400;}
#direct_info .right_box .bkng{height: 300px;  background-color: #FFDA5B; display: flex; flex-direction: row; justify-content: space-between; background-image: url("../images/reserBg01.png"); background-repeat: no-repeat; background-position: right bottom;}

/* 20240625 s */
#direct_info .right_box .confir_bkng{
    background-color: #8C8262;
    color:#fff;
    background-image: url("../images/bkngBg01.png");
    background-repeat: no-repeat;
    background-position: right bottom;
}
#direct_info .right_box .confir_bkng h3{padding-bottom:40px;}
/* #direct_info .right_box .confir_bkng_form{width: 100%; display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;}
#direct_info .right_box .confir_bkng_form p{ width: 50%; flex:1 1 30%}

#direct_info .right_box .confir_bkng_form input{width: 100%; border:0; text-indent: 16px; border-radius: 30px; padding:15px 0; color:#333; background-color:#fff; }*/
.confir_bkng_form .btn-box{width: 100%; text-align: center;} 
/* 20240625 e */
/* direct_info active */
#direct_info .left_box{
    transform: translateX(-100px);
    opacity: 0;
    transition: all .8s ease-in;
}
#direct_info.active .left_box{
    transform: translateX(0);
    opacity: 1;
}

#direct_info .bkng{
    transform: translateX(100px);
    opacity: 0;
    transition: all .8s ease-in .5s;
}
#direct_info.active .bkng{
    transform: translateX(0);
    opacity: 1;
}
#direct_info .confir_bkng{
    transform: translateX(100px);
    opacity: 0;
    transition: all .8s ease-in .8s;
}
#direct_info.active .confir_bkng{
    transform: translateX(0);
    opacity: 1;
}


/* 버튼 - 메인*/
.btn{padding: 16px 0 11px 25px; border:1px solid #333; border-radius: 40px;  font-family: 'GmarketSans', sans-serif; font-size: var(--ft--18);}
.btn:hover, .btn:focus{box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);}
.btn > span{display: inline-block; position: relative;}
.btn > span:after{
    content:"";
    display: inline-block;    
    width: 18px;
    height: 18px;
    background-position: center;
    background-repeat: no-repeat;
    padding:0 25px 0 10px;
    vertical-align: middle;
}

.btn.bk_line{color:#333; border-color: #333; }
.btn.bk_line > span:after{background-image: url('../images/arrow01.png');}
.btn.bk_line:hover,.btn.bk_line:focus{box-shadow: 0 0 6px rgba(0,0,0,0.6);}

.btn.bk_bg{color:#fff; background-color:#404040; border-color: #404040; }
.btn.bk_bg > span:after{background-image: url('../images/arrow02.png');}
.btn-srch{color:#fff; background-color:#404040;padding:15px 25px 13px 25px; border-radius: 40px;  font-family: 'GmarketSans', sans-serif; font-size: var(--ft--18); border:1px solid #404040;}
.btn-srch:hover,.btn-srch:focus{box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);}
.btn-srch > span::before{
    content:"";
    display: inline-block;
    width: 16px;
    height: 18px;
    background-image: url('../images/btnIcon08.png');
    background-repeat: no-repeat;
    padding-right:10px;
    vertical-align: middle;
}

.btn.bk_bg:focus,
.confir_bkng_form .btn-srch:focus{outline:2px solid #333; border:1px solid #fff;}


@media screen and (max-width : 1400px){
    #main_visual .left_box {width: 590px;}
    #main_visual .right_box h3{font-size: var(--ft--36);}
    /* sub_visual */
    #sub_visual > .inner{display: block;}
    #sub_visual .left_box{display: none;}
    #sub_visual .right_box{width: 100%;}
    #sub_visual .right_box > .box{margin:0 auto; max-width: 800px;}
    #sub_visual .right_box::before{width: 260px; height: 149px;top: -70px;}
    /* direct_info */
    #direct_info .left_box,
    #direct_info .right_box{width: 100%;}
    #direct_info .left_box .map > div{width: 100%; position: static;}
    #direct_info .map .inner_map{border-radius: 20px;}
    #direct_info .right_box{display: flex; gap: 20px;}
    #direct_info .right_box >div{ min-height: 300px;}
    #direct_info .right_box .bkng{height: auto;}
    #direct_info .right_box .bkng .txt{height: 100%;}
    #direct_info .left_box .txt_box::after {bottom:-34px; right: 15px;}
}
@media screen and (max-width : 1240px){
    #main_visual{background-size: 100% 100%;}
    #main_visual > .inner{max-width: 860px; display: block;}
    #main_visual .left_box{width: 100%;}
    #main_visual .left_box .slide_visual{max-width: 860px;  margin:0 auto;}
    #main_visual .left_box .outbox img{filter: brightness(40%); -webkit-filter: brightness(40%);  -moz-filter: brightness(40%); }
    #main_visual .right_box{width: 100%; padding-right: 0; padding-top: 40px;}
    #main_visual .right_box h3{width: 100%; position: absolute; left:50%; top:20%; transform: translate(-50% ,-20%); color: #ffff;}
    #main_visual.active .opHrs_info{width: 100%;}
    #main_visual::before{display: none;}
}
@media screen and (max-width : 1080px){
    #direct_info .right_box{display: block;}
    #direct_info .right_box .bkng .txt{height: auto;}
    #direct_info .right_box h3 p{font-size: 1.8rem;}
}
@media screen and (max-width : 1024px){
    #main_visual{padding-top: 190px;}
}
@media screen and (max-width : 680px){
    #menu_list .menu_list_slide .img_box{    box-shadow: 2px 2px 10px 0px rgba(32, 32, 32, 0.08);}
    #menu_list .menu_list_slide a:hover .img_box, #menu_list .menu_list_slide a:focus .img_box{ box-shadow: 2px 2px 10px 0px rgba(32, 32, 32, 0.2); }
    #sub_visual .right_box .control_box{background-color: rgb(52, 52, 52); padding:10px 20px; height: auto; position: static;}
    #sub_visual .right_box::before{width: 230px; height: 133px;top: -56px;     }
    #sub_visual::after{height: 60%;}
    #direct_info .left_box .txt_box::after{width: 131px;  height: 175px;}
}

@media screen and (max-width : 480px){
    #main_visual{padding-top:140px; }
    #main_visual .left_box .slide_visual{    border-radius: 40px 0 40px 0;}
    #main_visual .right_box h3{font-size: 2.6rem; top: 12%;}
    #menu_list .menu_list_slide .img_box{padding:20px;}
    #sub_visual .right_box{padding-top: 75px;}
    #sub_visual .right_box::before {width: 186px; height: 108px; top: -43px;}
    #direct_info .left_box .txt_box h3{font-size: 4rem;}
    #direct_info .left_box .txt_box p{font-size: 1.8rem;}
    #direct_info .left_box .map{height: 326px;}
    #direct_info .right_box .bkng{background-size: 220px;}
    #direct_info .right_box .txt{padding:40px 20px;}
    
}
@media screen and (max-width : 380px){ #menu_list .menu_list_slide .img_box{padding:15px;}}