@charset "utf-8";

#MainVisual #mapBox{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:20px;background:url('./img/main_banner01_n.jpg') no-repeat center / cover}
#highchart{overflow:hidden;width:90%;height:90%;margin:0 auto}
.highcharts-legend-item rect, .highcharts-legend-item path{display:none}
.highcharts-data-label text{opacity:0;transition:opacity 0.3s ease}
.highcharts-data-label.visible text{opacity:1 !important}
.highcharts-map-view path{stroke:none;}

#MainVisual{position:relative;margin:auto;width:88%;height:80vh}
#MainVisual .main_wrap{display:flex;gap:30px;width:100%;height:100%}
#MainVisual .main{position:relative;width:calc(73% - 15px);height:100%}
#MainVisual .main .tit{position:absolute;z-index:2;top:100px;left:5%;height:fit-content}
#MainVisual .main .tit h1{font-size:40px;font-weight:500;font-family:var(--e-font);line-height:1.2;color:#fff}
#MainVisual .main ul li{width:100%;height:100%;background-repeat:no-repeat;background-position:center;background-size:cover;border-radius:20px}
#MainVisual .main ul li.bg01{background-image:linear-gradient(to bottom, transparent 50%, #11111199), url(./img/main_banner01_n.jpg);background-position:left top;background-size:135%}
#MainVisual .main ul li.bg02{background-image:linear-gradient(to bottom, transparent 50%, #11111199), url(./img/main_banner02.jpg)}
#MainVisual .main ul li.bg03{background-image:linear-gradient(to bottom, transparent 50%, #11111199), url(./img/main_banner03.jpg)}
#MainVisual .main .pager{position:absolute;z-index:2;bottom:142px;left:unset;right:7%;width:auto;color:#fff}
#MainVisual .main .pager span{font-size:15px;font-weight:700;font-family:var(--e-font);color:#fff}
#MainVisual .main .pager span:first-child{margin-right:4px}
#MainVisual .main .pager span:last-child{margin-left:4px}
.swiper-progress-bar {display:block;position:absolute;z-index:1;bottom:135px;right:13%;width:30%;height:30px}
.swiper-progress-bar .bar {position:absolute;width:100%;height:2px;clear:both;opacity:0;bottom:0;left:0;right:0;top:50%;transform:translate(0px, -50%);background:rgb(255, 255, 255, 0.2)}
.swiper-progress-bar .bar:after {position:absolute;top:0;left:0;background:#fff;height:100%;width:0;content:"";transition:0.01s height linear}
/* 슬라이드 프로그레스 바 에니메이션 */
.swiper-progress-bar.active .bar {opacity:1}
.swiper-progress-bar.animate .bar:after {transition:width linear;transition-delay:unset;width:100%;transition-duration:3s}

#MainVisual .notice{display:flex;align-items:center;position:absolute;z-index:2;bottom:10px;left:50%;transform:translateX(-50%);padding:0 4%;width:97%;height:60px;border-radius:30px;color:#fff;background-color:#000}
#MainVisual .notice .txt{flex-shrink:0;position:relative;padding-right:20px;margin-right:20px;min-width:80px;font-size:15px;font-weight:700}
#MainVisual .notice .txt:after{content:"";position:absolute;top:50%;right:0px;transform:translateY(-50%);width:1px;height:80%;background-color:rgb(255, 255, 255, 0.6)}
#MainVisual .latest{position:relative;margin:unset;width:92%;height:18px}
#MainVisual .latest ul li a{display:flex;justify-content:space-between;align-items:center;width:100%;font-size:15px;font-weight:400;color:rgb(255, 255, 255, 0.6)}
#MainVisual .latest ul li a div{transition:all .2s}
#MainVisual .latest ul li a .pc{display:block}
#MainVisual .latest ul li a .s_pc{display:none}
#MainVisual .latest ul li a .tablet{display:none}

#MainVisual .reservation_wrap{display:flex;flex-direction:column;gap:30px;width:calc(27% - 15px);height:100%}
#MainVisual .reservation{overflow:hidden;border-radius:20px;position:relative;width:100%;height:calc(100% - (60px + 30px));transition:all .3s}
#MainVisual .reservation .bg{width:100%;height:100%;border-radius:20px;background:url(./img/img01_n2.jpg) no-repeat center / cover;transition:all .3s}
#MainVisual .reservation .txt{display:flex;flex-direction:column;align-items:center;position:absolute;top:11%;left:50%;transform:translateX(-50%);width:100%;text-align:center;color:#fff}
#MainVisual .reservation .txt .en{padding-bottom:2px;border-bottom:2px solid #fff;font-size:14px;font-weight:700;color:#fff}
#MainVisual .reservation .txt h2{margin:60px 0 30px;font-size:35px;font-family:'Gmarket Sans';font-weight:700}
#MainVisual .reservation .txt p{font-size:18px;font-family:'Gmarket Sans';font-weight:400}
#MainVisual .info{display:flex;align-items:center;padding:0 10px;width:100%;height:60px;border-radius:30px;background-color:#111111;color:#fff}
#MainVisual .info .contact{display:flex;align-items:center;padding-left:25px;gap:15px;position:relative;font-size:16px;font-weight:600;word-break:keep-all}
#MainVisual .info .num{margin-left:20px;font-size:18px;font-weight:700;font-family:var(--e-font)}
#MainVisual .info .link{margin-left:auto}
#MainVisual .info .kakao{position:relative;display:flex;align-items:center;padding-left:15%;width:130px;height:40px;font-size:15px;transition:all .15s;font-weight:600;border-radius:20px;color:#392020;background-color:#f9e000}
#MainVisual .info .kakao:after{content:"";position:absolute;top:50%;right:10%;width:22px;height:20px;transform:translateY(-50%);transition:all .15s;background:url(./img/kakao.png);background-size:cover}



/* 반응형 [s] */
@media (hover:hover){
#MainVisual .reservation:hover .bg{transform:scale(108%)}
#MainVisual .latest ul li a:hover div{color:#fff}
#MainVisual .info .kakao:hover{padding-left:13%}
#MainVisual .info .kakao:hover:after{right:8%}
}
@media (max-width:1700px){
#MainVisual .main ul li.bg01{background-position:center;background-size:cover}
}
@media (max-width:1480px){
#MainVisual .info .contact{padding-left:11px;font-size:15px}
#MainVisual .info .num{margin-left:0px;font-size:17px}
#MainVisual .info .kakao{padding-left:13%;width:115px;font-size:14px}
#MainVisual .info .kakao:after{width:20px;height:18px}
#MainVisual .info .kakao:hover{padding-left:11%}
#MainVisual .latest ul li a .pc{display:none}
#MainVisual .latest ul li a .s_pc{display:block}
#MainVisual .latest ul li a .tablet{display:none}
}
@media (max-width:1380px){
#MainVisual{width:calc(100% - 30px)}
#MainVisual .main .tit h1{font-size:36px}
#MainVisual .reservation .txt h2{margin:50px 0 25px;font-size:30px}
#MainVisual .info{justify-content:space-between;padding:0 5%}
#MainVisual .info .contact{gap:10px;padding-left:0px}
#MainVisual .info .contact svg{width:20px}
#MainVisual .info .num{margin-left:10px;font-size:16px}
#MainVisual .info .link{display:none}
}
@media (max-width:1024px){
#MainVisual{height:600px}
#MainVisual .main_wrap{gap:16px}
#MainVisual .main{width:calc(73% - 8px)}
#MainVisual .main .tit{left:2.5%;bottom:110px}
#MainVisual .main .tit h1{font-size:30px}
#MainVisual .main .pager{right:2.5%;bottom:117px}
#MainVisual .latest ul li a{font-size:14px}
#MainVisual .notice .txt{min-width:70px;padding-right:15px;margin-right:15px;font-size:14px}
.swiper-progress-bar{right:11%;bottom:110px}
#MainVisual .notice{padding:0 3%;height:55px}
#MainVisual .info{height:55px}
#MainVisual .info .contact{font-size:14px}
#MainVisual .info .contact svg{width:18px}
#MainVisual .info .num{font-size:15px}
#MainVisual .reservation{height:calc(100% - (55px + 16px))}
#MainVisual .reservation_wrap{gap:16px;width:calc(27% - 6px)}
#MainVisual .reservation .txt{width:95%}
#MainVisual .reservation .txt h2{margin:40px 0 15px;font-size:24px}
#MainVisual .reservation .txt p{font-size:15px}
}
@media (max-width:768px){
#MainVisual{width:100%;height:auto}
#MainVisual .main_wrap{flex-wrap:wrap}
#MainVisual .main{width:calc(100% - 30px);height:480px}
#MainVisual .main ul li{border-radius:0px}
#MainVisual .main ul li.bg01{background-image:linear-gradient(rgb(0, 0, 0, 0.5), rgb(0, 0, 0, 0.5)), url(./img/main_banner01.jpg)}
#MainVisual .main ul li.bg02{background-image:linear-gradient(rgb(0, 0, 0, 0.5), rgb(0, 0, 0, 0.5)), url(./img/main_banner02.jpg)}
#MainVisual .main ul li.bg03{background-image:linear-gradient(rgb(0, 0, 0, 0.5), rgb(0, 0, 0, 0.5)), url(./img/main_banner03.jpg)}
#MainVisual .main .tit{bottom:60%;left:50%;transform:translate(-50%, 50%);text-align:center;width:100%}
#MainVisual .main .tit h1{display:none;font-size:28px;white-space:pre-line !important}
#MainVisual .main .pager{bottom:110px;right:50%;transform:translateX(50%)}
#MainVisual .main .pager span{font-size:14px}
.swiper-progress-bar{bottom:135px;right:50%;transform:translateX(50%);width:45%}
#MainVisual .notice{padding:0 2.5%;height:52px}
#MainVisual .notice .txt{min-width:62px;padding-right:12px;margin-right:12px}
#MainVisual .reservation{width:calc(77% - 8px);height:100%}
#MainVisual .reservation_wrap{flex-direction:row;margin:auto;width:95%;height:330px}
#MainVisual .reservation .bg{transform:scale(1) !important;background-position:50% 76%}
#MainVisual .reservation .txt{top:10%}
#MainVisual .reservation .txt h2{margin:30px 0 15px;font-size:21px}
#MainVisual .info{flex-direction:column;justify-content:unset;padding:0px;width:calc(23% - 8px);height:100%;border-radius:20px}
#MainVisual .info .contact{margin-top:30px;font-size:16px}
#MainVisual .info .num{margin:10px 0 0 0;font-size:18px}
#MainVisual .info .link{display:block;margin:auto 0px 10px;width:90%}
#MainVisual .info .link .kakao{width:100%}
.highcharts-data-label text{opacity:1;font-size:8px !important}
}
@media (max-width:600px){
#MainVisual .reservation{width:calc(70% - 8px)}
#MainVisual .info{width:calc(30% - 8px)}
}
@media (max-width:500px){
#MainVisual .latest ul li a .pc{display:none}
#MainVisual .latest ul li a .s_pc{display:none}
#MainVisual .latest ul li a .tablet{display:block}
}
@media (max-width:480px){
#MainVisual .main{height:440px}
#MainVisual .main .tit{bottom:55%}
#MainVisual .main .tit h1{font-size:26px}
.swiper-progress-bar{bottom:24%;width:55%}
#MainVisual .main .pager{bottom:17%}
#MainVisual .notice{display:none}
#MainVisual .reservation_wrap{flex-direction:column;height:auto;gap:12px}
#MainVisual .reservation{width:100%;height:270px}
#MainVisual .info{flex-direction:row;align-items:center;width:100%;border-radius:28px}
#MainVisual .info .contact{margin-top:0px;margin-left:16px;gap:10px;font-size:15px}
#MainVisual .info .contact svg{width:20px}
#MainVisual .info .num{margin-top:0px;margin-left:15px;font-size:16px}
#MainVisual .info .link{margin:8px 8px 8px auto;width:110px}
#MainVisual .info .kakao{padding-left:11%}
#MainVisual #mapBox{padding-top:30px}
#MainVisual .info .kakao:after{right:8%}
#highchart{width:100%;height:100%}
}
@media (max-width:380px){
#MainVisual .main{height:330px}
#MainVisual .main .tit{bottom:57%}
#MainVisual .main .tit h1{font-size:23px}
.swiper-progress-bar{width:60%}
#MainVisual .main .pager span{font-size:13px}
#MainVisual .reservation{height:235px}
#MainVisual .reservation{border-radius:15px}
#MainVisual .reservation .bg{border-radius:15px}
#MainVisual .reservation .txt .en{font-size:13px}
#MainVisual .reservation .txt h2{margin:25px 0 10px;font-size:19px}
#MainVisual .reservation .txt p{font-size:14px}
#MainVisual .info .contact{margin-left:15px;gap:15px;font-size:14px}
#MainVisual .info .contact span{display:none}
#MainVisual .info .contact svg{width:18px}
#MainVisual .info .num{margin-left:15px;font-size:16px}
#MainVisual .info .link{width:105px}
#MainVisual .info .kakao{font-size:13px;height:35px}
#MainVisual .info .kakao:after{width:18px;height:16px}
}
/* 반응형 [e] */