@charset "utf-8";

/* 메인비주얼 배너 */
.main-visual{position: relative; padding: 40px 0 35px 0; /* background-image: url(../img/main/main_bg.jpg); background-repeat: no-repeat; background-size: contain; background-position: top center;*/}
.main-visual:before{position: absolute; top: 0; left: 0; content: ""; display: block; width: 100%; height: 580px; background-image: url(../img/main/main_bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: top center; z-index: -1;}
/*.main-visual:before{position: absolute; top: 0; left: 0; content: ""; display: block; width: 100%; height: 420px; background-image: url(../img/main/main_bg.jpg); background-repeat: no-repeat; background-size: contain; background-position: top center; z-index: -1;}*/
.main-visual>div{display: flex; justify-content: space-between;}

.mainbanner{position: relative; width: calc(54% - 20px);}
.mainbanner .swiper-wrapper{height: auto;}
.mainbanner .swiper-slide{border-radius: 20px; overflow: hidden;}
.mainbanner .swiper-slide img{border-radius: 20px; overflow: hidden;}

.mainbanner .control{position: absolute; bottom: -35px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; padding-top: 13px;}

.mainbanner .swiper-pagination{position: static; width: auto; height: auto; margin-right: 10px;}
.mainbanner .swiper-pagination-bullet{margin: 0 3px; background-color: #ddd; width: 10px; height: 10px; transition: all 0.2s;}
.mainbanner .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width: 40px; background-color: #2d2d2d;}

.mainbanner .btn{width: 20px; height: 20px; text-indent: -999999px; background-position: center; background-repeat: no-repeat; z-index: 1;}
.mainbanner .prev{background-image: url(../img/main/i_prev.png);}
.mainbanner .stop{background-image: url(../img/main/i_stop.png); margin: 0 8px;}
.mainbanner .stop.start{background-image: url(../img/main/i_start.png);}
.mainbanner .next{background-image: url(../img/main/i_next.png);}

/* 메인비주얼 right-section */
.right-section{width: 46%; padding: 50px 40px; background-color: #fff; border-radius: 20px; box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.2);}
.right-section .tit-txt{display: none; margin-bottom: 35px; color: #000;}
.right-section .tit-txt .t1{padding-left: 39px; font-weight: 500; font-size: 19px; background-image: url(../img/main/honeybee.png); background-repeat: no-repeat;}
.right-section .tit-txt .t1 span{color: #fca113; font-weight: 600;}
.right-section .tit-txt .t2{font-size: 35px; margin-bottom: 25px;}
.right-section .tit-txt .t3{position: relative; padding-left: 30px; font-size: 20px; color: #7a7a7a;}
.right-section .tit-txt .t3:before{position: absolute; top: 3px; left: 0; content: ""; display: block; width: 19px; height: 24px; background: url(../img/main/i_location.png) no-repeat;}
.right-section .tit-txt .t3 span{color: #000;}
.right-section .tit-img{margin-bottom: 20px; text-align: center;}
.right-section .tit-img img{max-width: 404px; width: 90%;}

.search-box{display: flex; gap: 5px; align-items: center; width: 100%; height: 60px; padding: 6px; background-color: #fff; border: 1px solid #808080; border-radius: 90px;}
.search-box .search-item{display: inline-block; height: 48px; vertical-align: top; box-sizing: border-box; font-size: 16px;}
.search-box .search-item input{width: 100%; height: 100%; line-height: normal;}

.search-box .search-select{width: 110px; padding-left: 20px; color: #000; background-image: url(../img/main/select_arrow.png); background-repeat: no-repeat; background-position: center right 10px; background-size: 13px 8px; border: 0; border-radius: 70px; line-height: normal;}

.search-box .search-input{flex: 1;}
.search-box .search-input .search-query{border: 0;}
.search-box .search-input .search-query:focus{outline: 2px solid #256ef4;}

.search-box .search-button{width: 95px;}
.search-box .search-button .search-submit{width: 100%; height: 100%; padding: 0 20px; text-align: right; font-weight: 700; color: #fff; background-color: #f60000; border-radius: 48px; background-image: url(../img/main/i_search.png); background-size: 19px 20px; background-position: left 20px center; background-repeat: no-repeat;}

/* 모바일-예약하기 */
.mobile-reserve{display: none; margin-top: 20px; padding: 20px; background-color: #fff; border-radius: 10px; box-shadow: 2px 6px 9px rgba(0, 0, 0, 0.1);}
.mobile-reserve h3{margin-bottom: 6px; font-size: 22px; color: #000;}
.mobile-reserve ul{display: flex; flex-wrap: wrap; justify-content: space-between;}
.mobile-reserve li{width: 100%; margin-bottom: 7px;}
.mobile-reserve li:nth-child(1){width: 49.3%;}
.mobile-reserve li:nth-child(2){width: 49.3%;}
.mobile-reserve li .search-item{width: 100%; height: 40px;}
.mobile-reserve li .search-select{position: relative; padding: 0 10px; font-size: 16px; border-radius: 6px; border: 1px solid #c5c5c5; background-image: url(../img/main/select_arrow_02.png); background-repeat: no-repeat; background-position: center right 10px; background-size: 11px;}
.mobile-reserve li .btn-reserve{display: flex; justify-content: center; align-items: center; color: #fff; border-radius: 6px; background-color: #363636;}
.mobile-reserve li .btn-reserve span{display: inline-block; padding-left: 30px; background-image: url(../img/main/i_check_01_on.png); background-repeat: no-repeat; background-position: left center; background-size: 19px;}

/* 이용안내 */
.information{padding: 30px 0 90px 0;}
.icon-container{position: relative; width: 100%; padding: 30px; border-radius: 20px; box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.2); background-color: #fff;}
.icon-container li{float: left; width: calc(100% / 6); text-align: center; border-right: 1px solid #ddd;}
.icon-container li:last-child{border-right: 0;}
.icon-container li a{display: block;}
.icon-container li a .imgWrap{margin: 0 auto; transition: ease-out .6s;}
.icon-container li a:hover .imgWrap{transform: rotateY(360deg); -webkit-transform: rotateY(360deg);}
.icon-container li a .imgWrap img{transition: all 0.6s;}
.icon-container li a p{margin-top: 10px; font-size: 17px; color: #000;}
.icon-container li a:hover p{color: #f10000;}
.icon-container .slide-btn{display: none;}

/* 슬라이드 버튼 공통 */
.slide-btn{position: absolute; top: 50%; transform: translateY(-50%); width: 27px; height: 52px; text-indent: -9999px; background-repeat: no-repeat; background-size: contain; z-index: 3;}
.slide-btn.prev{left: 0; background-image: url(../img/main/i_prev_02.png)}
.slide-btn.next{right: 0; background-image: url(../img/main/i_next_02.png)}

/** pc-예약하기 **/
.reserve .tit h3{font-size: 27px; color: #1e2124;}
.reserve .tit h3 span{color: #f00010;} 
.reserve .tit p{font-size: 17px; font-weight: 400; color: #666;}

.reserve-tabs{display: flex; gap: 30px; justify-content: space-between; margin-top: 30px; margin-bottom: 90px;}
.reserve-tabs .tab-menu{display: flex; flex-direction: column; gap: 15px; width: 190px;}
.reserve-tabs .tab-menu .tab-btn{height: 49px; padding: 0 30px; transition: all 0.2s; border: 1px solid #fff; border-radius: 49px; text-align: left; background-repeat: no-repeat; background-position: right 10px center;}
.reserve-tabs .tab-menu .tab-btn:hover{border: 1px solid #f00010; color: #f00010; background-image: url(../img/main/tab_arrow_01.png);}
.reserve-tabs .tab-menu .tab-btn.active{border: 1px solid #f00010; background-color: #f00010; color: #fff; background-image: url(../img/main/tab_arrow_02.png);}


.reserve-tabs .tab-cont-wrap{width: calc(100% - 220px); padding: 30px 35px; background-color: #f5f5f5; border-radius: 30px;}
.reserve-tabs .tab-cont:after{content:""; display: block; clear: both;}
.reserve-tabs .tab-cont h4{margin-bottom: 17px; font-size: 19px;}
.reserve-tabs .tab-cont h4 img{margin-right: 10px;}

.reserve-tabs .tab-cont .select-01{float: left; width: 40%;}
.map-wrap{position: relative; margin-top: 27px;}
.region{fill: #fff; stroke: #c5c5c5; stroke-width: 2; cursor: pointer; transition: 0.2s; }
.region.active{fill: #f44336;}
.map-list{position: absolute; top: 0; left: 0; right: 0; bottom: 0; /*pointer-events: none;*/}
.map-list li{position: absolute; text-align: center;}
.map-list li.ulju{top: 36%; left: 32%;}
.map-list li.bukgu{top: 25%; left: 81%;}
.map-list li.donggu{top: 45%; left: 87%;}
.map-list li.namgu{top: 48%; left: 69%;}
.map-list li.junggu{top: 34%; left: 64%;}
.map-list li .name{display: block; font-size: 16px; line-height: 1em; font-weight: 500;}
.map-list li .number{display: inline-block; min-width: 40px; padding: 0px 10px; line-height: 1.4em; border-radius: 20px; font-size: 14px; color: #000; background-color: #373d4e; color: #fff;}
.map-list li.active .name{color: #fff;}
.map-list li.all.active .name{color: #f00010;}
.map-list li.all.active .number{background-color: #f00010;}

.reserve-tabs .tab-cont .select-02{float: left; width: calc(60% - 40px); margin-left: 40px;}
.reserve-tabs .tab-cont .select-02 .list-box{width: 100%; background-color: #fff; border: 1px solid #ddd; border-radius: 10px; }
.reserve-tabs .tab-cont .select-02 .list-box ul{height: 365px; padding: 30px; overflow-y: auto;}
.reserve-tabs .tab-cont .select-02 .list-box ul:after{content:""; display: block; clear: both;}
.reserve-tabs .tab-cont .select-02 .list-box ul::-webkit-scrollbar{width: 10px;}
.reserve-tabs .tab-cont .select-02 .list-box ul::-webkit-scrollbar-track{background-color: #e2e2e2;}
.reserve-tabs .tab-cont .select-02 .list-box ul::-webkit-scrollbar-thumb{background-color: #737373;}
.reserve-tabs .tab-cont .select-02 .list-box ul::-webkit-scrollbar-button {display: none;}
.reserve-tabs .tab-cont .select-02 .list-box ul::-webkit-scrollbar-thumb:hover {
    background-color: #f00010;
    transition: all 0.2s; /* 작동 안 됨 */
}
.reserve-tabs .tab-cont .select-02 .list-box ul::-webkit-scrollbar-track,
.reserve-tabs .tab-cont .select-02 .list-box ul::-webkit-scrollbar-thumb {border-radius: 5px;}
.reserve-tabs .tab-cont .select-02 .list-box li{float: left; margin-right: 15px; margin-bottom: 13px; width: calc(50% - 15px / 2);}
.reserve-tabs .tab-cont .select-02 .list-box li:nth-child(2n + 0){margin-right: 0;}
.reserve-tabs .tab-cont .select-02 .list-box li.no-data{width: 100%; padding: 25%; margin: 0; text-align: center; color: #888;}
.reserve-tabs .tab-cont .select-02 .list-box li a{position: relative; display: flex; padding: 4px 4px 12px 4px; letter-spacing: -0.4px; font-size: 15.5px; transition: all 0s;}
.reserve-tabs .tab-cont .select-02 .list-box li a:before{position: absolute; bottom: 0; left: 0; content:""; display: block; width: 100%; height: 1px; background-color: #aaaaaa;}
.reserve-tabs .tab-cont .select-02 .list-box li a:hover{color: #f00010;}
.reserve-tabs .tab-cont .select-02 .list-box li a:hover:before{background-color: #f00010; height: 2px;}
.reserve-tabs .tab-cont .select-02 .list-box li a span.org_div{line-height: var(--krds-line-height-base);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;}


/* 추천서비스 */
.service{margin-top: 50px;}
.service h3{font-size: 27px;}
.service h3 span{display: block; font-size: 17px; font-weight: 400; color: #666;}

.service .tab-wrap{position: relative; margin-top: -40px;}
.service .tab-wrap>ul{float: right;}
.service .tab-wrap>ul>li{float: left; margin-left: 10px;}
.service .tab-wrap>ul>li .tab-menu{display: block; padding: 8px 25px; font-size: 15px; color: #222; background-color: #ebebeb; border-radius: 25px;}
.service .tab-wrap>ul>li.active .tab-menu{color: #fff; background-color: #f60000;;}
.service .tab-wrap>ul>li .tab-menu span{line-height: normal;}
.service .tab-cont{position: absolute; width: 100%; height: 385px; top: 65px; left: 0;}

.service-slider{overflow: hidden; padding: 3px;}
.service-slider .swiper-wrapper{height: auto;}
.service-slider .swiper-slide {height: auto;}
.service-slider .swiper-slide a{display: block; width: 100%; height: 100%;}
.service-slider .imgWrap{margin-bottom: 20px; border-radius: 20px; overflow: hidden;}
.service-slider .imgWrap img{width: 100%; height: 205px; object-fit: cover; transition: all 0.3s;}
.service-slider .swiper-slide a:hover .imgWrap img{transform: scale(1.2);}
.service-slider .state span{display: inline-block; padding: 1px 13px 2px; font-size: 13px; color: #fff; border-radius: 5px; background-color: #2c3e5f;}
.service-slider .state .type1{background-color: #0ca8c9;}
.service-slider .state .type2{background-color: #363636;}
.service-slider .state .type3{background-color: #254ea2;}
.service-slider .state .type4{background-color: #ff6c32;}
.service-slider .title{margin: 10px 0 7px; font-size: 17px; font-weight: 500; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.service-slider .time{font-size: 15px;}
.service-slider .time-item{color: #777; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.service .control{display: flex; margin-top: 30px; align-items: center; justify-content: center; padding-bottom: 5px;}
.service .swiper-pagination{position: static; width: auto; height: auto;}
.service .swiper-pagination{position: static; width: auto; height: auto; margin-right: 10px;}
.service .swiper-pagination-bullet{margin: 0 3px; background-color: #ddd; width: 10px; height: 10px; transition: all 0.2s;}
.service .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width: 40px; background-color: #2d2d2d;}

.service .btn{width: 20px; height: 20px; text-indent: -999999px; background-position: center; background-repeat: no-repeat;}
.service .stop{background-image: url(../img/main/i_stop.png); margin: 0 8px;}
.service .stop.start{background-image: url(../img/main/i_start.png);}

.service .slide-btn.prev{left: -70px;}
.service .slide-btn.next{right: -70px;}

/* 울산시 축제 */
.service.type2{margin-bottom: 40px;}

/* 공지사항&자주묻는 질문 */
.news-wrap{padding: 50px 0; background-color: #f5f5f5;}
.news-wrap>div{display: flex; justify-content: space-between;}
.news-wrap h3{margin-bottom: 25px; font-size: 27px; color: #000; line-height: 1.2em;}
.news-wrap .btn_plus{position: absolute; top: 13px; right: 0; width: 25px; height: 25px; background: url(../img/main/i_plus_02.png) no-repeat center; text-indent: -9999999px;}

.notice{position: relative; width: 52%;}
.notice-cont{display: flex;  justify-content: space-between; flex-wrap: wrap; gap: 20px;}
.notice-cont li{width: calc(50% - 15px); transition: all 0.2s; background-color: #fff; border-radius: 20px; box-shadow: 4px 1px 10px rgba(0,0,0,0.1);}
.notice-cont li a{position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 170px; padding: 30px; border-radius: 20px; transition: all 0.2s;}
.notice-cont li a div{width: 100%; font-size: 18px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.notice-cont li a .date{font-size: 16px; color: #777;}
.notice-cont li a span{position: absolute; bottom: 20px; right: 20px; display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; background-color: #373d4e; border-radius: 50%; transition: all 0.2s;}
.notice-cont li:hover{transform: translate(-3px, -3px);}
.notice-cont li:hover a{box-shadow: 5px 5px 10px rgba(0,0,0,0.2);}

.qna{position: relative; width: 44.2%;}
.qna-cont li{height: 58px; margin-bottom: 18px; transition: all 0.2s; background-color: #fff; border-radius: 20px; box-shadow: 4px 1px 10px rgba(0,0,0,0.1);}
.qna-cont li:last-child{margin-bottom: 0;}
.qna-cont li a{display: flex; align-items: center; width: 100%; height: 100%; padding: 0 30px; font-size: 17px; border-radius: 20px; transition: all 0.2s;}
.qna-cont li a span{font-family:'GmarketSans'; display: block; width: 25px; line-height: 24px; color: #1e358c; font-weight: 700;}
.qna-cont li a p{width: calc(100% - 25px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.qna-cont li:hover{transform: translate(-3px, -3px);}
.qna-cont li:hover a{box-shadow: 5px 5px 10px rgba(0,0,0,0.2);}

/* 퀵 리모콘 */
.quick-wrap{position: fixed; top: 280px; right: 15px; width: 105px; z-index: 60; text-align: center; transition: all 0.5s;}
.quick-wrap .btn-close{display: block; width: 45px; height: 45px; transform: translateX(0); margin: 0 auto; background-color: rgba(0,0,0,0.6); border-radius: 50%; background-image: url(../img/main/i_close.png); background-repeat: no-repeat; background-position: center; text-indent: -999999px; transition: all 0.5s;}
.quick{margin-top: 7px; background-color: #fff; border-radius: 10px; box-shadow: 3px 0 15px rgba(0,0,0,0.3); transition: all 0.3s;}
.quick .font-size{padding: 12px 15px; background-color: #2c2a27; border-top-left-radius: 10px; border-top-right-radius: 10px;}
.quick .font-size p{margin-bottom: 5px; font-size: 16px; color: #fff;}
.quick .font-size .btn-wrap{display: flex; justify-content: space-between;}
.quick .font-size .btn-wrap .btn{display: block; width: 29px; height: 29px; background-color: #fff; border-radius: 50%; text-indent: -999999px; background-repeat: no-repeat; background-position: center;}
.quick .font-size .btn-wrap .btn.plus{background-image: url(../img/main/i_plus.png);}
.quick .font-size .btn-wrap .btn.minus{background-image: url(../img/main/i_minus.png);}
.quick .tit{padding: 12px 0; font-size: 13px; color: #fff; background-color: #2c2a27; border-top-left-radius: 10px; border-top-right-radius: 10px;}
.quick .icons{padding: 15px 0;}
.quick .icons li{margin-bottom: 14px;}
.quick .icons li:last-child{margin-bottom: 0;}
.quick .icons li a{display: block; font-size: 15px;}
.quick .icons li a p{margin-top: 6px;}
.quick .top{width: 100%; padding: 10px 0; font-size: 15px; background-color: #f1ece1; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;}
.quick .top span{padding-left: 20px; background-image: url(../img/main/i_top.png); background-repeat: no-repeat; background-position: left center;}

.quick-wrap.open{right: 10px; transform: translateX(100%);}
.quick-wrap.open .btn-close{transform: translateX(-76px); width: 50px; height: 50px; background-image: url(../img/main/i_open.png);}
.quick-wrap.open .quick{opacity: 0;}



/***********************************************/
/* 화면 1600px 이하 */
@media screen and (max-width: 1600px) {
    /* 추천서비스 */
    .service .tab-wrap:before{position: absolute; bottom: 0; left: -2px; content: ""; display: block; width: 60px; height: 87%; background-color: #fff; z-index: 2;}
    .service .tab-wrap:after{position: absolute; bottom: 0; right: -2px; content: ""; display: block; width: 60px; height: 87%; background-color: #fff; z-index: 1;}
    
    .service-slider{padding: 0 60px;}
    .service .slide-btn.prev{left: 0;}
    .service .slide-btn.next{right: 0;}
    .service-slider .time{font-size: 14px;}
    
}




/***********************************************/
/* 화면 1450px 이하 */
@media screen and (max-width: 1450px) {
    /* 메인비주얼 right-section */
    
    .search-box{height: 55px; padding: 5px; border: 1px solid #c8c8c8;}
    .search-box .search-item{height: 43px; line-height: 43px;}
    
    /* 추천서비스 */
    .service.type2{margin-top: 40px;}
    
    
    
    
}

/***********************************************/
/* 화면 1300px 이하 */
@media screen and (max-width: 1300px) {
	/* 메인비주얼 배너 */
	.main-visual{background-size: auto 330px;}
	.mainbanner .control{position: static; transform: translateX(0);}
	
    /* 메인비주얼 right-section */
    .right-section{padding: 0; background-color: transparent; box-shadow: none;}
    .right-section .tit-txt{margin-bottom: 0;}
    .right-section .tit-txt .t2{margin-bottom: 15px;}
    .right-section .tit-txt .t3{display: none;}
    
    /* 모바일-예약하기 */
    .mobile-reserve{display: block;}
    
    /* 이용안내 */
    .information{padding: 30px 0 10px;}
    .information h3{width: 17%; font-size: 30px; background-size: 100%;}
    .information li a .imgWrap{width: 80px;}
    
    /* pc-예약하기 */
    .reserve{display: none;}
    
    /* 추천서비스 */
    .service h3{font-size: 30px;}
    .service h3 span{font-size: 17px;}
    .service .tab-wrap>ul>li .tab-menu{padding: 9px 22px; font-size: 17px;}
    
    /* 공지사항&자주묻는 질문 */
    .news-wrap h3{font-size: 30px;}
    .notice-cont li{width: calc(50% - 10px);}
    .notice-cont li a{padding: 30px 20px;}
    .qna-cont li a{padding: 0 20px; font-size: 18px;}
    
    /* 퀵 리모콘 */
    .quick-wrap{display: none;}
    
}

/***********************************************/
/* 화면 1080px 이하 */
@media screen and (max-width: 1080px) {
    
}

/***********************************************/
/* 화면 991px 이하 */
@media screen and (max-width: 991px) {
    /* 메인비주얼 배너 */
    .main-visual{padding: 35px 0;}
    .main-visual:before{height: 500px; background-position: top left;}
    .main-visual>div{flex-wrap: wrap;}
    .mainbanner{order: 2; width: 100%; max-width: 710px; margin: 0 auto;}
    
    
    
    /* 메인비주얼 right-section */
    .right-section{order: 1; display: flex; flex-wrap: wrap; width: 100%; padding-top: 0; padding-left: 0;}
    .right-section>div{width: 100%;}
    .right-section .tit-txt{order: 2;}
    
    .right-section .tit .t1{font-size: 18px;}
    .right-section .tit .t2{font-size: 37px;}
    
    .right-section .search-box-wrap{order: 1; margin-bottom: 15px;}
    .search-box{height: 50px; border-radius: 50px;}
    .search-box .search-item{height: 35px; line-height: 35px; background-position: top 15px right 10px;}
    .search-box .search-button{width: 95px;}
    .search-box .search-button .search-submit{background-size: 18px; background-position: left 17px top 7px;}
    
    
    /* 모바일-예약하기 */
    .mobile-reserve{order: 3; display: block; margin-top: 0; margin-bottom: 30px;}
    
    /* 이용안내 */
    .information{position: relative;}
    .information:before{position: absolute; bottom: 10px; left: 0; content: ""; display: block; width: 40px; height: 115px; background-color: #fff; z-index: 2;}
    .information:after{position: absolute; bottom: 10px; right: 0; content: ""; display: block; width: 40px; height: 115px; background-color: #fff; z-index: 2;}
    .information h3{width: 100%; background-image: none;}
    .icon-container{width: 100%; margin: 0 auto; overflow: hidden; padding: 0 40px; box-shadow: none; border-radius: 0;}
    .icon-container li{border-right: 0;}
    .icon-container li a p{font-size: 17px;}
    .icon-container .slide-btn{display: block;}
    
    /* 슬라이드 버튼 공통 */
    .slide-btn{width: 24px; background-size: 18px auto; background-position: center;}
    
    /* 추천서비스 */
    .service{margin-top: 40px;}
    .service .tab-wrap{margin-top: 10px;}
    .service .tab-wrap>ul{float: left;}
    .service .tab-wrap>ul>li{margin-left: 0; margin-right: 5px;}
    .service .tab-cont{top: 70px;}
    .service-slider .imgWrap img{height: 240px;}
    
    /* 공지사항&자주묻는 질문 */
    .news-wrap>div{display: block;}
    .news-wrap h3{margin-bottom: 10px;}
    .news-wrap .btn_plus{top: 4px;}
    .notice{width: 100%; margin-bottom: 35px;}
    
    .qna{width: 100%;}
    
    
}

/***********************************************/
/* 화면 800px 이하 */
@media screen and (max-width: 800px) {
    /* 추천서비스 */
    .service .tab-cont{height: 450px;}
    .service-slider .imgWrap img{height: 200px;}
}

/***********************************************/
/* 화면 730px 이하 */
@media screen and (max-width: 730px) {
    /* 추천서비스 */
    .service .tab-cont{height: 400px;}
    .service-slider .imgWrap img{height: 250px;}
}

/***********************************************/
/* 화면 640px 이하 */
@media screen and (max-width: 640px) {
    /* 메인비주얼 배너 */
    .main-visual{padding: 25px 0; background-position: top right;}
    .mainbanner .swiper-pagination-bullet{width: 8px; height: 8px;}
    .mainbanner .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width: 30px;}
    .mainbanner .control{padding-top: 8px;}
    .mainbanner .btn{background-size: 9px;}
    
    
    /* 메인비주얼 right-section */
    .right-section .tit-txt .t2{font-size: 29px;}
    
    .search-box{height: 45px; gap: 0;}
    .search-box .search-item{font-size: 15px;}
    .search-box .search-select{padding-left: 10px;}
    .search-box .search-input .search-query{padding: 0;}
    .search-box .search-button{width: 75px;}
    .search-box .search-button .search-submit{padding: 0 12px; background-size: 16px; background-position: left 11px top 8px;}
    
    
    /* 모바일-예약하기 */
    .mobile-reserve{padding: 15px; margin-bottom: 15px;}
    .mobile-reserve h3{font-size: 22px;}
    .mobile-reserve li .search-select{font-size: 15px;}
    
    /* 이용안내 */
    .information {padding: 10px 0;}
    .icon-container{padding: 0 30px;}
    .information h3{font-size: 22px;}
    .icon-container li a p{font-size: 15px;}
    .information li a .imgWrap {width: 55px;}
    .icon-container li a:hover .imgWrap img{transform: translateY(0);}
    
    /* 추천서비스 */
    .service.type2{margin-top: 10px; margin-bottom: 0;}
    .service h3{font-size: 22px;}
    .service h3 span{font-size: 15px;}
    .service .tab-wrap:before{width: 35px; height: 90%;}
    .service .tab-wrap:after{width: 35px; height: 90%;}
    .service .tab-wrap>ul>li .tab-menu{padding: 7px 9px; font-size: 15px;}
    .service .tab-cont{top: 55px;}
    .service-slider{padding: 0 35px;}
    .service-slider .title{font-size: 19px;}
    .service-slider .state span{font-size: 14px;}
    .service .control{margin-top: 15px;}
    .service .slide-btn{top: 30%;}
    .service-slider .swiper-pagination-bullet{width: 8px; height: 8px;}
    .service-slider .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width: 30px;}
    .service-slider .imgWrap img{height: 210px;}
    
    /* 공지사항&자주묻는 질문 */
    .news-wrap{padding: 30px 0;}
    .news-wrap h3{font-size: 22px;}
    .notice-cont{gap: 10px;}
    .notice-cont li{width: 100%; border-radius: 13px;}
    .notice-cont li a{min-height: auto; padding: 15px 20px;}
    .notice-cont li a div{width: calc(100% - 30px); margin-bottom: 5px; font-size: 16px; -webkit-line-clamp: 1;}
    .notice-cont li a .date{font-size: 15px;}
    .notice-cont li a span{top: 50%; transform: translateY(-50%); width: 30px; height: 30px;}
    .notice-cont li a span img{width: 11px;}
    
    .qna-cont li{height: 50px; margin-bottom: 10px; border-radius: 13px;}
    .qna-cont li a{font-size: 16px;}
    .qna-cont li a span{width: 25px;}
    
}

/***********************************************/
/* 화면 500px 이하 */
@media screen and (max-width: 500px) {
    /* 추천서비스 */
    .service .tab-cont{height: 500px;}
}

/***********************************************/
/* 화면 430px 이하 */
@media screen and (max-width: 430px) {
    /* 추천서비스 */
    .service .tab-cont{height: 460px;}
}