@charset "utf-8";
html, body{
    overflow-x: hidden;
}

:root {

    --green: #797255;
    --brown : #3b69b6;
	--blue : #3b69b6;
    --pink: #F9DCD3;
    --gray: #696969;

    --bg : #F8F8F6;
    --alertColor: #797255;
    --lineColor: #DDDDDD;

    --en:"Poppins", sans-serif;
    --serif : "Noto Serif KR", serif;

    --in: clamp(1400px, 70vw, 144rem);
    --inPd: 20px;
    --hdH: max(8rem, 80px);
    --inpH: 3.3em;

    --mainTit: max(5.6rem, 56px); /* 70 */
    --tit: max(4.8rem, 48px); /* 60 */
    --smTit: max(3.6rem, 36px); /* 45 */

    --lgTxt2: max(2.4rem, 24px); /* 30 */
    --lgTxt: max(2.1rem, 20px); /* 25 */
    --txt1: max(1.8rem, 19px); /* 22 */
    --txt2: max(1.6rem, 18px); /* 20 */
    --txt: max(1.5rem, 17px); /* 18 */
    --subTxt: max(1.5rem, 17px); /* 25 */
    --smTxt: max(1.35rem, 15px); /* 16 */
    --tinyTxt: max(1.2rem, 14px); /* 15 */

    --sectPd: 8rem; /* 300 */
    --contMt: 8rem; /* 100 */
    --contSmMt: 4rem; /* 50 */
    --mainContMt: 6.4rem; /* 80 */
    --subVisPd: 16rem;

    --radius: 3.2rem; /* 40 */
    --smRadius: 2.5rem 2.5rem 7rem 2.5rem; /* 30 */

}

html.scroll_none { overflow: hidden; }

body::-webkit-scrollbar { width: 5px; height: 5px; }
body::-webkit-scrollbar-thumb { height: 5px; background: #A9A9A9; border-radius: 5px; }
body::-webkit-scrollbar-track { background-color: #fff; }


.cboth {clear:both;}
.clear:after{content:"";height:0;font-size:0;visibility:hidden;display:block;clear:both;}
.clear{zoom:1;display:block;}


h2 { color:#fff; line-height:75px; font-size:55px; font-weight:900; letter-spacing:-0.03em; text-align:center;}


.in {position: relative; width: clamp(1840px, 70vw, 184rem); max-width: 100%; padding: 0 var(--inPd); margin: 0 auto;}
.in2 {position: relative; width: var(--in); max-width: 100%; padding: 0 var(--inPd); margin: 0 auto;}

.sr_only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
.mo_over { display: block !important; }
.mo_only { display: none !important; }
.tab_only { display: none !important; }
.phone_only {display: none !important;}
.mini_only {display: none !important;}

.ms_preloader { width: 100%; height: 100%; position: fixed; top: 0; left: 0; opacity: 1; visibility: visible; background-color: #fff; z-index: 9999999; }
.page_wrap {display: flex; flex-direction: column; min-height: 100vh;}



.controls {display: flex; align-items: center;}
.controls .paging { display: flex; align-items: center; }
.controls .paging > * + * {margin-left: 1.2rem;}
.controls .paging .current,
.controls .paging .total { font-size:var(--txt2); font-weight:700; width: 15px; text-align: center;}
.controls .paging .bar { width:10rem; height:3px; background-color: rgba(0,0,0,0.3); position: relative;}
.controls .paging .bar span { position: absolute; display: inline-block; left:0; top:0; width:0; height:100%; background-color: var(--brown); }
.controls .swiper-pagination-progressbar { width:10rem; height:2px; background-color: rgba(0,0,0,0.3); position: relative; }
.controls .swiper-pagination-progressbar-fill,
.controls .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{ background-color: var(--brown);}

.controls .paging + .swiper_btn_wrap{margin-left: 4rem;}
.swiper_btn_wrap{display: flex; align-items: center;}
.swiper_btn_wrap .swiper_btn { font-size: 1em; display: flex; align-items: center; justify-content: center; width: 6.4rem; height: 6.4rem; background: transparent; background-color: #fff;  border-radius: 50%; transition: all 0.3s ease; cursor: pointer;}
.swiper_btn_wrap .swiper_btn .ico { width: 1em; height: 1em; width:28%; height: 28%; background:url('../images/main/icon_arrow.svg') no-repeat center ; background-size: 45% 45%;}
.swiper_btn_wrap .swiper_btn:hover { background-color: rgba(255,255,255,0.5); }

.swiper_btn_wrap .swiper_btn.swiper-button-disabled {opacity: 0.3;}
.swiper_btn_wrap .swiper_btn:first-child { margin-right: 0.1em;}
.swiper_btn_wrap .swiper_btn:first-child .ico { transform: rotate(180deg);}
.swiper_btn_wrap .swiper_btn.line{border:1px solid var(--lineColor);}


.pointer { position: fixed; top: 0; left: 0; z-index: 100; pointer-events: none; }
.pointer .pointer_box { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; opacity: 0; padding-bottom: 0.7em; backdrop-filter: blur(7px); background-color: rgba(0,0,0,0.5); font-size:var(--txt2); width: 17rem; height: 17rem; font-weight: 700; border-radius: 50%; transition:all .3s ease-out; overflow: hidden; }
.pointer .pointer_box span{position: relative; display: block; white-space: nowrap; line-height: 1; color: #fff; z-index: 1; }
.pointer .pointer_box span:first-child {font-size:2em; font-weight: 200; margin-bottom: 0.3em;}
.pointer.on .pointer_box { opacity: 1 }



/* ---------- header ---------- */
.header { position: fixed; top: 0; width: 100%; font-size: var(--txt); color:var(--black); background-color: #fff; z-index: 1000; transition: transform 0.3s ease, background-color 0.3s ease; }
.header.down{ transform: translateY(-100%);}
.header.up{transform: translateY(0); box-shadow: 0 0 5px 0 rgba(0,0,0,0.1); }

.header .header_in { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; gap: 0; width: 100%; max-width: 100%; height: var(--hdH); padding: 0 4rem; align-items: center;}

.header .logo { grid-row: 1; width: max(20rem, 200px); transition: filter 0.3s ease;}
.header .logo svg{display: block; width: 100%;}

.header .nav .top_box {display: none;}
.header .nav {grid-column: 2; grid-row: 1; height: 100%; margin: 0 auto; font-size: var(--txt2); }
.header .nav .depth1 { position: relative; display: flex; height: 100%; align-items: center; justify-content: center; z-index: 10; }
.header .nav .depth1 li { position: relative; height: 100%; transition: color 0.3s ease;}
.header .nav .depth1 > li > a { position: relative; display: flex; height: 100%; padding: 0 4rem 0; align-items: center; justify-content: center; font-weight: 700; white-space:nowrap; transition: padding 0.5s ease, color 0.3s ease; }
.header .nav .depth1 > li > a span { position: relative; }
.header .nav .depth1 > li.active > a{color:var(--brown);}
.header .nav .depth1 > li.active > a span:before { opacity: 1; transform: translate(-50%, calc(-100% - 3px)); }

.header .nav .depth2 { position: absolute; left: 50%; bottom: 0; width: 100%; padding-top: 20px; transform: translate(-50%, 100%); white-space: nowrap; text-align: center; opacity: 0; pointer-events: none; transition: all 0.3s; transition-delay: -0.1s; z-index: 1; }
.header .nav .depth2 > li > a {display: block; padding: 5px 0; font-size: 0.85em; font-weight: 500; letter-spacing:-0.03em; transition: color 0.3s ease; color: var(--gray);}
.header .nav .depth2 > li > a:hover {color:var(--brown)}
.header .nav .depth2 > li.active > a { font-weight: 600; color:var(--brown);}
.header .nav .depth2 > li > a > span { position: relative;  }

.header .util_wrap { display: flex; align-items: center; justify-content: flex-end; grid-column: 3; grid-row: 1; height: 100%; font-size:0.9em;}
.header .util_wrap .util_btn { display: inline-block; background:none;}
.header .util_wrap .util_btn:hover {background:none;}
.header .util_wrap .util_btn + .util_btn { margin-left: 2em; }

.header .util_wrap .util_btn img {width:23px; transition: filter 0.3s ease;}
.header.top .util_wrap .util_btn img{    filter: brightness(0) invert(1);}
.header .util_wrap .util_btn .hamIco{    transition: fill 0.3s ease;}
.header.top .util_wrap .util_btn .hamIco{    fill:#fff;}


.header.on .header_in{ border-bottom: 2px solid var(--lineColor);}
.header.on .nav .depth1 > li > a { padding: 0 5rem 0; }
.header.on .nav .depth2 { transition-delay: 0.1s; pointer-events: auto; opacity: 1; }
.header .nav .gnb_bg { position: absolute; left: 50%; bottom: 1px; width: 100%; height: 0; background-color: #fff; transform: translate(-50%, 100%); transition: all 0.5s; }
.header.on .nav .gnb_bg { height: 38rem; box-shadow: rgba(149, 157, 165, 0.07) 0px 8px 15px; }



@media screen and (max-width: 1640px){

    .header .logo{width: 160px;}
    .header .nav .depth1 > li > a{padding: 0 3.5rem;}
    .header.on .nav .depth1 > li > a{padding: 0 4rem;}

}

@media screen and (max-width: 1540px){
    .header .header_in{
        padding: 0 20px;
    }

    .header .nav .depth1 > li > a{
        padding: 0 3rem;
    }

    .header.on .nav .depth1 > li > a{
        padding: 0 3.5rem;
    }
}



@media screen and (max-width: 1400px){

    .header .logo{width: 160px;}
    .header .nav .depth1 > li > a{padding: 0 2.5rem;}
    .header.on .nav .depth1 > li > a{padding: 0 2.9rem;}

}



@media screen and (min-width: 1241px) {

    .header .util_wrap .util_btn:hover{ background-color: var(--black); color: #fff; border-color:var(--black);}
    .header .nav .depth1 > li > a:hover{color:var(--brown);}

    .main .header.top { background-color: rgba(0,0,0,.1); box-shadow: none;}
    .main .header.top .logo{filter: brightness(0) saturate(0) invert(1);}
    .main .header.top .nav .gnb_bg {background-color: rgba(0,0,0,.1);}
    .main .header.top .nav .depth1 > li > a {color:#fff; transition: padding 0.5s ease, color 0s ease;}
    .main .header.top .util_wrap .util_btn.join { border-color: #fff; color: #fff;}
    .main .header.top .util_wrap .util_btn.login { background-color: #fff; border:1px solid #fff; color:var(--black);}
    .main .header.top .util_wrap .util_btn:hover { background-color: var(--black); color: #fff; border-color:var(--black);}

}


@media screen and (max-width: 1240px) {

    .pointer{display: none;}

    .header{box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1); }
    /*.header.down{transform:translateY(0);}*/
    /*.header.up{box-shadow: none;}*/
    .header.down.open{transform: translateY(0);}
    .header .header_in{padding: 0 var(--inPd);}
    .header .header_in > .util_wrap .util_btn{display: none !important;}

    .header .ham_btn{width:25px; height: 25px;}
    .header .ham_btn svg{display:block; width: 100%; height: 100%;}

    .header .nav { display: block; position: fixed; left: 100%; top: 0; opacity: 0; transform: translate(100%, 0); width: 100vw; height: 100vh; padding: 0 0 10rem; background-color: var(--green); color: #fff; transition: left 0.5s ease, opacity 0.5s ease;; z-index: 100; }
    .header .nav.open { left: -100%; transform: translate(100%, 0); overflow-y: auto; opacity: 1; transition: left 0.5s ease, opacity 0s ease;}

    .header .nav .top_box {display: flex; align-items: center; justify-content: space-between; padding:0 var(--inPd); padding: 2rem 3rem; background:var(--brown);}
    .header .nav .top_box .logo{filter: brightness(0) saturate(0) invert(1); width: 160px;}
    .header .nav .top_box .right_wrap{display: flex; align-items: center;}
    .header .nav .util_wrap .util_btn.join { border-color: #fff;}
    .header .nav .util_wrap .util_btn.login { background-color: transparent; border-color: #fff;}
    .header .nav .util_wrap .util_btn + .util_btn{margin-left: 0.8em;}

    .header .nav .close_btn { display: flex; align-items: center; justify-content: center; width: 1.25em; height: 1.25em; font-size: 3rem; cursor: pointer; margin-left:0.5em;}
    .header .nav .close_btn svg{width: 100%; height: 100%; fill: #fff;}

    .header .nav .depth1 { display: block; width: 100%; height: auto; margin-top: 2rem;}
    .header .nav .depth1 li{height: auto;}
    .header .nav .depth1 > li { width: auto; height: auto; }
    .header .nav .depth1 > li > a { font-size: 2.4rem; padding: 2.5rem 3rem; font-weight: 700;}
    .header.on .nav .depth1 > li > a { padding: 2.5rem 3rem; }
    .header .nav .depth1 > li > a:before { display: none; }
    .header .nav .depth1 > li.active > a{color:#fff;}
    .header .nav .depth1 > li.active > a > span:after{display:none;}
    .header .nav .depth1 > li > a span:before { display: none; }
    .header .nav .depth1 > li:not(.dir_menu) > a:after {content: "\f078"; display: inline-block;position: static;width: auto;height:auto;font-size: 1em;transform: translateX(0);vertical-align: middle;line-height: 1;margin-left: auto;font-weight: 100;transition: transform .3s;opacity: 1;background-color: transparent;font-family: "FontAwesome";z-index: 2;}
    .header .nav .depth1 > li > a.open:after { transform: rotate(180deg); }

    .header .nav .depth1 > li > .depth2{display:none; position: static; opacity: 1; transform: none; padding: 0 3rem; color:#000; text-align: left; pointer-events: auto; }
    .header .nav .depth1 > li.active .depth2{display:block;}
    /*.header .nav .depth1 > li.active > a:after { transform: rotate(180deg); }*/

    .header .nav .depth1 > li > .depth2 > li:last-child{padding-bottom: 2rem;}
    .header .nav .depth1 > li > .depth2 > li > a{font-size: 2rem; padding: 8px 15px; color:rgba(255,255,255,.6); transition: color 0s ease;}
    .header .nav .depth1 > li > .depth2 > li.active > a{ color: #fff;}
    .header .nav .depth1 > li > .depth2 > li.active > a > span{position: relative;}
    .header .nav .depth1 > li > .depth2 > li.active > a > span:before{content:''; position: absolute; width: 5px; height: 5px; left: -12px; top:50%; transform: translateY(-50%); border-radius: 50%; background:var(--brown);}

    .header .nav .gnb_bg{display:none;}

}



@media screen and (max-width: 769px) {

    .header .nav .depth1 > li > a{font-size:18px;}
    .header .nav .depth1 > li > .depth2 > li > a{font-size:16px;}

}


@media screen and (max-width: 600px) {

    .header .logo{width:150px;}
    .header .nav .depth1 > li > a{font-size:18px;}
    .header .nav .depth1 > li > .depth2 > li > a{font-size:16px;}
    .header .ham_btn{width:22px; height:22px;}

    .header .nav .top_box .logo{width: 135px;}
    .header .nav .util_wrap .util_btn{padding:0.7em 1em}
    .header .nav .util_wrap .util_btn + .util_btn{margin-left: 0.5em;}

}









/* ---------- footer ---------- */
.footer_wrap{
    position: relative;
    width: 100%;
	margin-top:-25px !important;
}

.footer_wrap .footer{
    position: relative; height:890px;
    background:url(../images/common/footer_bg.jpg) no-repeat top center;
    background-size: cover;
    color:#081854;
    letter-spacing:-0.03em;
    padding-top: 0;
}

/* 상단 사이트맵 */
.footer_wrap .footer .f_map{
    position: relative;
    width:100%;
    background: rgba(0,0,0,0.26);
}
.footer_wrap .footer .f_map .f_s{
    width:1400px;
    max-width: calc(100% - 40px);
    margin:0 auto;
    display:flex;
    text-align:center;
    border-right:1px solid rgba(255,255,255,0.4);
}
.footer_wrap .footer .f_map .f_s ul{
    flex:1;
    padding:30px 0;
    border-left:1px solid rgba(255,255,255,0.4);
    margin:0;
    list-style:none;
}
.footer_wrap .footer .f_map .f_s ul p{
    color:#fff;
    font-size:20px;
    font-weight:800;
    line-height:32px;
    margin-bottom:10px;
}
.footer_wrap .footer .f_map .f_s ul li{
    margin:0;
    padding:0;
}
.footer_wrap .footer .f_map .f_s ul li a{
    color:#fff;
    font-size:15px;
    font-weight:800;
    line-height:27px;
    letter-spacing:-0.03em;
    text-decoration:none;
}
.footer_wrap .footer .f_map .f_s ul li a:hover{
    text-decoration:underline;
}

/* 하단 정보 */
.footer_wrap .footer .info_wrap{
    position: absolute;
    width:100%;
    bottom:50px;
}
.footer_wrap .footer .info_wrap .info{
    position: relative;
    width:1400px;
    max-width: calc(100% - 40px);
    margin:0 auto;
}
.footer_wrap .footer .info_wrap .info:after{
    content:"";
    display:block;
    clear:both;
}

.footer_wrap .footer .info_wrap .info .f_l{
    position: relative;
    float:left;
}
.footer_wrap .footer .info_wrap .info .f_l img{
    width:195px;
    max-width:100%;
}

.footer_wrap .footer .info_wrap .info .info_in{
    position: relative;
    float:left;
    margin-left:105px;
    font-size:15px;
    font-weight:700;
    line-height:25px;
}

.footer_wrap .footer .info_wrap .info .info_in .f_m{
    position: relative;
}
.footer_wrap .footer .info_wrap .info .info_in .f_m ul{
    margin:0;
    padding:0;
    list-style:none;
}
.footer_wrap .footer .info_wrap .info .info_in .f_m ul:after{
    content:"";
    display:block;
    clear:both;
}
.footer_wrap .footer .info_wrap .info .info_in .f_m ul li{
    float:left;
    margin-right:45px;
}
.footer_wrap .footer .info_wrap .info .info_in .f_m ul li a{
    color:#081854;
    font-size:17px;
    font-weight:800;
    text-decoration:none;
}
.footer_wrap .footer .info_wrap .info .info_in .f_m ul li a:hover{
    text-decoration:underline;
}

.footer_wrap .footer .info_wrap .info .info_in .txt{
    position: relative;
    clear:both;
    padding-top:20px;
    word-break:keep-all;
}
.footer_wrap .footer .info_wrap .info .info_in span{
    margin-left:35px;
}

.footer_wrap .footer .info_wrap .info .contact{
    position: relative;
    float:right;
    text-align:right;
    font-size:20px;
    font-weight:700;
    padding-top:20px;
}
.footer_wrap .footer .info_wrap .info .contact p{
    font-size:35px;
    font-weight:900;
    margin-top:6px;
}

.footer_wrap .copyright{
    position: relative;
    min-height:50px;
    text-align:center;
    background:#fff;
    font-size:14px;
    color:#555;
    font-weight:600;
    line-height:50px;
    padding:0 15px;
}

/* 태블릿 */
@media all and (max-width: 1240px){

	.footer_wrap .footer{height:auto;}
	.footer_wrap .footer .f_map {display:none;}
   

    .footer_wrap .footer .info_wrap{position: relative; bottom:auto;
        padding:60px 0;
    }
    .footer_wrap .footer .info_wrap .info{
        max-width: calc(100% - 30px);
    }

    .footer_wrap .footer .info_wrap .info .f_l{
        float:none;
        margin-bottom:25px;
    }
    .footer_wrap .footer .info_wrap .info .info_in{
        float:left;
        margin-left:0;
        width:65%;
        font-size:14px;
        line-height:23px;
    }
    .footer_wrap .footer .info_wrap .info .info_in .f_m ul li{
        margin-right:25px;
    }
    .footer_wrap .footer .info_wrap .info .info_in .f_m ul li a{
        font-size:15px;
    }
    .footer_wrap .footer .info_wrap .info .info_in span{
        margin-left:20px;
    }

    .footer_wrap .footer .info_wrap .info .contact{
        float:right;
        width:30%;
        font-size:17px;
        padding-top:0;
    }
    .footer_wrap .footer .info_wrap .info .contact p{
        font-size:28px;
    }
}

/* 모바일 */
@media all and (max-width: 767px){
    .footer_wrap .footer{
        background-position:center top;
    }


    /* 하단 정보 세로정렬 */
    .footer_wrap .footer .info_wrap{
        padding:40px 0 35px;
    }
    .footer_wrap .footer .info_wrap .info{
        max-width: calc(100% - 24px);
    }

    .footer_wrap .footer .info_wrap .info .f_l,
    .footer_wrap .footer .info_wrap .info .info_in,
    .footer_wrap .footer .info_wrap .info .contact{
        float:none;
        width:100%;
        margin-left:0;
        text-align:left;
    }

    .footer_wrap .footer .info_wrap .info .f_l{
        margin-bottom:20px;
    }
    .footer_wrap .footer .info_wrap .info .f_l img{
        width:150px;
    }

    .footer_wrap .footer .info_wrap .info .info_in{
        font-size:13px;
        line-height:18px;
    }

    .footer_wrap .footer .info_wrap .info .info_in .f_m ul{
        display:flex;
        flex-wrap:wrap;
        gap:10px 16px;
    }
    .footer_wrap .footer .info_wrap .info .info_in .f_m ul li{
        float:none;
        margin-right:0;
    }
    .footer_wrap .footer .info_wrap .info .info_in .f_m ul li a{
        font-size:14px;
    }

    .footer_wrap .footer .info_wrap .info .info_in .txt{
        padding-top:16px;
    }
    .footer_wrap .footer .info_wrap .info .info_in span{
        display:block;
        margin-left:0;
    }

    .footer_wrap .footer .info_wrap .info .contact{
        margin-top:24px;
        font-size:15px;
        padding-top:0;
    }
    .footer_wrap .footer .info_wrap .info .contact p{
        font-size:24px;
        margin-top:4px;
    }

    .footer_wrap .copyright{
        font-size:12px;
        line-height:1.5;
        padding:14px 12px;
        min-height:auto;
    }
}

/* 아주 작은 모바일 */
@media all and (max-width: 480px){
    
    .footer_wrap .footer .info_wrap .info .f_l img{
        width:135px;
    }
    .footer_wrap .footer .info_wrap .info .contact p{
        font-size:22px;
    }
}






/* ---------- side menu ---------- */
.side-menu{position: fixed; right: 3rem; top: 27%; z-index: 100000; gap: 0.8rem; display: flex; flex-direction:column; align-items: flex-end;}
.side-menu  a{display: flex; min-width: 7rem; height: 7rem; border-radius: 4rem; align-items: center; justify-content: center; transition: all 0.4s ease;}
.side-menu .btn-top a{ border:1px solid #ccc; background-color:#fff;  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}
.side-menu .btn-top a svg path{transition: all 0.4s ease;stroke: #555;}
.side-menu .btn-top a:hover{border-color: #555; backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);}
.side-menu .btn-top a:hover path{stroke: #3b69b6;}
.side-menu .btn-reservation a{background-color:#555;  color: #fff; font-size: 1.8rem; font-weight: 700;}
.side-menu .btn-reservation a img {width:20px;}
.side-menu .btn-reservation a span{display: inline-flex; overflow: hidden; width: 0; transition: all 0.4s ease;}
.side-menu .btn-reservation a:hover{gap: 1.2rem; padding: 0 2.8rem; background-color:#555; }
.side-menu .btn-reservation a:hover span{width:fit-content;}

.side-menu .btn-kakao a{background-color:#f8ef2c;  color: #3d1e1f; font-size: 1.8rem; font-weight: 700;}
.side-menu .btn-kakao a img {width:20px;}
.side-menu .btn-kakao a span{display: inline-flex; overflow: hidden; width: 0; transition: all 0.4s ease;}
.side-menu .btn-kakao a:hover{gap: 1.2rem; padding: 0 2.8rem; background-color:#f8ef2c; }
.side-menu .btn-kakao a:hover span{width:fit-content;}

.side-menu .btn-blog a{background-color:#40b649;  color: #fff; font-size: 1.8rem; font-weight: 700;}
.side-menu .btn-blog a img {width:20px;}
.side-menu .btn-blog a span{display: inline-flex; overflow: hidden; width: 0; transition: all 0.4s ease;}
.side-menu .btn-blog a:hover{gap: 1.2rem; padding: 0 2.8rem; background-color:#40b649; }
.side-menu .btn-blog a:hover span{width:fit-content;}

.side-menu .btn-youtube a{background-color:#ed1f24;  color: #fff; font-size: 1.8rem; font-weight: 700;}
.side-menu .btn-youtube a img {width:20px;}
.side-menu .btn-youtube a span{display: inline-flex; overflow: hidden; width: 0; transition: all 0.4s ease;}
.side-menu .btn-youtube a:hover{gap: 1.2rem; padding: 0 2.8rem; background-color:#ed1f24; }
.side-menu .btn-youtube a:hover span{width:fit-content;}

.side-menu .btn-call a{background-color:#3e69cf;  color: #fff; font-size: 1.8rem; font-weight: 700;}
.side-menu .btn-call a img {width:20px;}
.side-menu .btn-call a span{display: inline-flex; overflow: hidden; width: 0; transition: all 0.4s ease;}
.side-menu .btn-call a:hover{gap: 1.2rem; padding: 0 2.8rem; background-color:#3e69cf; }
.side-menu .btn-call a:hover span{width:fit-content;}



@media screen and (min-width: 800px) {

	.side-menu .btn-reservation a img {width:25px;}
	.side-menu .btn-reservation a:hover{padding: 0 2.0rem;  }

	.side-menu .btn-kakao a img {width:30px;}
	.side-menu .btn-kakao a:hover{padding: 0 2.0rem;  }

	.side-menu .btn-blog a img {width:30px;}
	.side-menu .btn-blog a:hover{padding: 0 2.0rem;  }

	.side-menu .btn-youtube a img {width:30px;}
	.side-menu .btn-youtube a:hover{padding: 0 2.0rem;  }

	.side-menu .btn-call a img {width:30px;}
	.side-menu .btn-call a:hover{padding: 0 2.0rem;  }


}





/* 모달 */
.modal {display: block; overflow: auto; position: fixed; top:0; left:0; right:0; bottom:0; z-index: 9999; opacity: 0; width:100%; height: 100%; padding: 8rem 0; font-size: var(--smTxt); background: rgba(0,0,0,0.7); pointer-events: none; transition: 0.3s ease-in-out;}
.modal.open {opacity: 1; pointer-events: inherit; }
.modal .modal_wrap {display: table; table-layout: fixed; vertical-align: middle; margin: 0 auto; width: 100%; height: 100%; position: relative; padding: 0 2rem;}





.modal .member .sitemap_wrap{		width:100%; padding: 100px 50px; background: #fff; border-radius: var(--smRadius);}
.modal .member .sitemap_wrap .sitemaplogo {position: relative; width:100%; text-align:center; }
.modal .member .sitemap_wrap .sitemaplogo img {width:250px;}
.modal .member .sitemap_wrap .sitemap_list {    display:flex;    width:100%; margin-top:80px;}
.modal .member .sitemap_wrap .sitemap_list  p{font-size: 20px; font-weight: 800; margin-bottom:10px;}
.modal .member .sitemap_wrap .sitemap_list ul{	flex:1;	margin:0;	padding:0 20px;	list-style:none;	box-sizing:border-box;	border-right:1px solid #dfdfdf;}
.modal .member .sitemap_wrap .sitemap_list ul:last-child{border-right:none !important;}
.modal .member .sitemap_wrap .sitemap_list ul li {padding:5px 0; font-weight: 600;}
.modal .member .sitemap_wrap .sitemap_list ul li  a {color:#666;}




/* ================================== 반응형 ================================*/
@media screen and (min-width: 2561px) {
    html {font-size: clamp(10px, 0.625vw + 4px, 12px);}
}


@media screen and (max-width: 2560px) {
    html { font-size: clamp(8.5px, 0.15625vw + 5.5px, 10px); }
}




@media screen and (max-width: 2000px) {
    html { font-size: 8.5px; }

    :root {
        --in: clamp(1300px, 70vw, 144rem);
        /*--mainIn: clamp(1300px, 70vw, 144rem);*/

        --mainTit: max(4.8rem, 48px);
        --tit: max(4.4rem, 44px);
        --smTit: max(3.2rem, 32px);

        --lgTxt2: max(2.2rem, 22px);
        --lgTxt: max(1.9rem, 19px);
        --txt: max(1.5rem, 16px);
        --subTxt: max(1.5rem, 17px);
        --smTxt: max(1.35rem, 14px);

        --mainContMt: 5.5rem;
        --sectPd: 20rem;
    }


    body .ui-widget{font-size:15px;}
    body.main .ui-datepicker{bottom:10rem;}



}



@media screen and (max-width: 1640px){
    html { font-size: 8px; }

    :root {
        --mainTit: max(4rem, 40px);
        --tit: max(3.6rem, 36px);
        --smTit: max(3rem, 30px);

        --lgTxt: max(1.8rem, 18px);
        --txt2: max(1.6rem, 17px);
        --txt: max(1.5rem, 16px);
        --subTxt: max(1.5rem, 16px);

        --mainContMt: 5.5rem;
        --sectPd: 16rem;
        --contMt: 7rem;

    }



}




@media screen and (max-width: 1240px) {

    :root {
        --hdH: 70px;

        --mainTit: max(3.4rem, 34px);
        --tit: max(3.8rem, 38px);
        --smTit: max(2.6rem, 26px);

        --lgTxt2: max(2rem, 20px);
        --lgTxt: max(1.7rem, 17px);
        --txt1: max(1.7rem, 17px);
        --txt2: max(1.6rem, 16px);
        --txt: max(1.5rem, 15px);
        --subTxt: max(1.5rem, 16px);
        --smTxt: max(1.4rem, 14px);
        --tinyTxt: max(1.3rem, 13px);

        --contMt: 5rem;
        --subVisPd: 12rem;
        --contSmMt: 3rem;

    }

    .mo_over { display: none !important; }
    .mo_only { display: block !important; }
    .tab_only{ display: block !important;}
    /*.ms_preloader{display:none;}*/


	h2 {  line-height:50px; font-size:40px;}






}






@media screen and (max-width: 780px) {
    html {font-size: 6px;}


    :root {
        --hdH: 60px;
        --mainTit: 30px;
        --tit: 28px;
        --smTit: 22px;
        --lgTxt2: 20px;
        --lgTxt: 17px;
        --txt1: 17px;
        --txt2: 16px;
        --txt: 15px;
        --subTxt: 16px;
        --smTxt: 13px;
        --tinyTxt: 12px;
        --sectPd: 100px;
        --contMt: 35px;
        --contSmMt: 25px;

        --radius: 22px;
        --smRadius: 18px;
    }


	h2 {  line-height:40px; font-size:30px;}





}


@media screen and (max-width: 600px) {

    :root {
        --hdH: 60px;

        --mainTit: 26px;
        --tit: 26px;
        --smTit: 20px;

        --lgTxt2: 17px;
        --lgTxt: 16px;
        --txt1: 16px;
        --txt2: 15px;
        --txt: 14px;
        --subTxt: 14px;
        --smTxt: 12px;
        --tinyTxt: 11px;

        --sectPd: 80px;
        --mainContMt: 35px;
        --contMt: 30px;
        --contSmMt: 20px;
        --subVisPd: 60px;

        --radius: 20px;
        --smRadius: 15px;
    }




}












@keyframes textLoop {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}






/****************************** Animation ******************************/
.title_box {position: relative; color:#fff; text-align:center;}
.title_box .title-eng {font-family: "Montserrat", sans-serif;  font-size:17px; font-weight:700; letter-spacing:0.2em; line-height:50px; opacity:0; -webkit-transform:translateY(30px);transform:translateY(30px); -webkit-transition:all 800ms ease 100ms; transition:all 800ms ease 100ms;}
.title_box .title-eng2 {color:#fdd802; font-size:40px; font-weight:700; line-height:50px; letter-spacing:-0.02em; opacity:0; -webkit-transform:translateY(30px);transform:translateY(30px); -webkit-transition:all 800ms ease 100ms; transition:all 800ms ease 100ms;}
.title_box .title {  opacity:0; -webkit-transform:translateY(30px);transform:translateY(30px); -webkit-transition:all 800ms ease; transition:all 800ms ease;}
.title_box .title-sub {margin-top:20px;  font-size:22px; font-weight:700; line-height:30px; opacity:0; -webkit-transform:translateY(30px);transform:translateY(30px); -webkit-transition:all 800ms ease 100ms; transition:all 800ms ease 100ms;}
.btn_more { opacity:0; -webkit-transform:translateY(30px);transform:translateY(30px); -webkit-transition:all 800ms ease 100ms; transition:all 800ms ease 100ms;}


.title.ani-visible, 
.title-sub.ani-visible, 
.title-eng.ani-visible, 
.title-eng2.ani-visible, 
.btn_more.ani-visible,
.sub_tit.ani-visible, .sub_txt.ani-visible
{ opacity:1; -webkit-transform:translateY(0);transform:translateY(0); }




.title_box2 {position: relative; color:#fff; text-align:center;}
.title_box2 .title-eng {font-family: "Montserrat", sans-serif;  font-size:17px; font-weight:700; letter-spacing:0.2em; line-height:50px;}
.title_box2 .title-eng2 {color:#fdd802; font-size:40px; font-weight:700; line-height:50px; letter-spacing:-0.02em; }
.title_box2 .title {}
.title_box2 .title-sub {margin-top:20px;  font-size:22px; font-weight:700; line-height:30px;}




.main-content>div { opacity:0; -webkit-transform:translateY(70px);transform:translateY(70px); -webkit-transition:all 800ms ease 200ms; transition:all 800ms ease 200ms; }
.main-content.ani-visible>div { opacity:1; -webkit-transform:translateY(0);transform:translateY(0); }

@keyframes aniswiper{0%{ left:100%; } 100%{ left:0; }}
@-webkit-keyframes aniswiper{0%{ left:100%; } 100%{ left:0; }}
@keyframes aniswiper-prev{0%{ right:100%; } 100%{ right:0; }}
@-webkit-keyframes aniswiper-prev{0%{ right:100%; } 100%{ right:0; }}



@media screen and (max-width: 1400px){

	.title_box {padding:0 20px;}
	.title_box .title-eng {font-family: "Montserrat", sans-serif;  font-size:15px; font-weight:700; letter-spacing:0.2em; line-height:50px; }
	.title_box .title-eng2 {color:#fdd802; font-size:25px; font-weight:700; line-height:50px; letter-spacing:-0.02em;}
	.title_box .title {line-height:40px; font-size:30px;}
	.title_box .title-sub {margin-top:20px;  font-size:16px; font-weight:700; line-height:25px;}

	.title_box2 {padding:0 20px;}
	.title_box2 .title-eng {font-family: "Montserrat", sans-serif;  font-size:15px; font-weight:700; letter-spacing:0.2em; line-height:50px; }
	.title_box2 .title-eng2 {color:#fdd802; font-size:25px; font-weight:700; line-height:50px; letter-spacing:-0.02em;}
	.title_box2 .title {line-height:40px; font-size:30px;}
	.title_box2 .title-sub {margin-top:20px;  font-size:16px; font-weight:700; line-height:25px;}


}