@media (min-width: 576px){/*size-sm*/
  .hide-sm { display: none !important; }
	.wd-base { width: 200px !important; }
	.mw-base { min-width: 90px !important; }
}
@media (max-width: 575px){/*size-xs*/
  .hide-xs { display: none !important; }
	.wd-base { width: 100% !important; }
}
@media (min-width: 768px){/*size-md*/
  .hide-md { display: none !important; }
}
@media (min-width: 992px){/*size-lg*/
  .hide-lg { display: none !important; }
}
@media (min-width: 1200px){/*size-xl*/
  .hide-xl { display: none !important; }
}



/* ======================================================= */
/* -------------- Default style (for desktop) ------------ */
/* ======================================================= */
@media (min-width: 1400px){
  
}



/* ======================================================================== */
/* ------------------- [ XL size (~ 1399px ~ 1200px) ] -------------------- */
/* ======================================================================== */
@media (max-width: 1399px){

}



/* ======================================================================== */
/* --------------------- [ LG size (1199px ~ 992px)] ---------------------- */
/* ======================================================================== */
@media (max-width: 1199px){
  header .func>div:not(.search-wrap, .mo-btn) { display: none; }
  header .func>div.mo-btn { display: flex; align-items: center; }
  footer .ft-top { padding-bottom: 30px; }
  footer .navi .line { display: none; }
  footer .navi ul { gap: 20px; padding: 0; margin-left: 30px; }
  footer .sns-wrap p { display: none; }
  footer .ft-btm { padding-top: 30px; }

}



/* ======================================================================== */
/* ----------------------- [ MD size (991px ~ 768px) ] -------------------- */
/* ======================================================================== */
@media (max-width: 991px){
  header .navi>ul.nav>li { padding: 20px 5px; }
  header .navi>ul.nav>li>.sub-menu { min-width: 200px; padding: 15px 15px 15px 15px; }
  header .navi>ul.nav>li>.sub-menu>ul>li>a { font-size: 13px; }
  footer .navi .logo { display: none; }
  footer .navi ul { margin: 0; }

  

}



/* ======================================================================== */
/* ----------------------- [ SM size (767px ~ 576px) ] -------------------- */
/* ======================================================================== */
@media (max-width: 767px){
  header .navi { display: none; }
  footer .navi { display: block; }
  footer .navi ul { display: flex; justify-content: center; margin-bottom: 15px; }
  footer .sns-wrap { justify-content: center; }
  footer .site-info>ul { display: flex; align-items: center; gap: 5px; }
  footer .ft-btm .site-info p.copyright { margin:0; text-align: center; }
  footer .ft-btm .site-info>div.flex-right { display: none; }
  footer .ft-btm .terms { text-align: center; position: static; margin-bottom: 20px; border-bottom: 1px solid #333; padding-bottom: 20px; }

  .modal { max-width: 100vw; }
  .modal .modal-dialog { max-width: 500px !important; }
  .modal .modal-dialog.modal-dialog-centered { margin-top: 30px; }
  .modal .modal-dialog .modal-content { width: calc(100% - 20px); margin: 10px; }

}



/* ======================================================================= */
/* ----------------------- [ XS size (575px~ 이하) ] --------------------- */
/* ======================================================================= */
@media (max-width: 575px){
  header>div.container { padding: 0 20px; }

  header .title>a { width: 120px; }
  header .title>span { top: -5px; font-size: 14px; }
  header .func { gap: 20px; }
  footer .navi ul { flex-wrap: wrap; gap: 5px 35px; }
  footer .ft-btm .para { text-align: center; max-width: 100%; }
  footer .ft-btm .para a.bt-more { display: block; }
  footer .ft-btm .para a.bt-more::before { display: none; }
  footer .site-info>ul { margin-bottom: 10px; flex-wrap: wrap; justify-content: center; }
  footer .ft-btm .site-info ul>li { margin:0 auto; }
  footer .ft-btm .site-info ul>li.logo { flex: 0 0 100%; text-align: center; }

  div.ibox { padding: 15px; }

  .booking { padding-top: 80px; }
  .booking section h4 { font-size: 20px; }
  .booking section .alert ul>li>p { font-size: 15px; }

  .booking.page-pay table.table.basic>tbody>tr>th { width: 100px; }
  .booking.page-pay .ip-box .input-group>span { width: 80px; font-size: 13px; padding:0 8px; }

  .booking.page-date .bt-box>button { width: 100%; }
  .booking.page-date .bt-box>button:first-child { display: none; }

  .radio-group { flex-direction: column; gap:10px; }
  
  .calendar-box { padding:0; }

  .calendar-box .ui-datepicker td {
    height: 40px;
  }
  .calendar-box .ui-datepicker td a {
    width: 20px;
    height: 20px;
    line-height: 18px;
    font-size: 14px;
    margin:0;
  }
  .calendar-box .ui-datepicker td span.ui-state-default {
    width: 20px;
    height: 20px;
    line-height: 14px;
    font-size: 14px;
    display: block;
  }
  .calendar-box .ui-datepicker td.highlight-range {
    background-color: #198754;
  }
  .calendar-box .ui-datepicker td.highlight-range>a { 
    background-color: transparent !important;
    border-color: transparent;
  }
  .calendar-box .info-sel { flex-direction: column; }

  .tab-btns+.tab-content { padding: 15px 0; }
  
  .modal .modal-dialog { align-items: center; display: flex; margin: 0; }
  .modal .modal-dialog.modal-dialog-centered { margin-top: 10px; }
  .modal .modal-content { margin:0; }
  .modal .modal-content .modal-body { padding: 10px 15px; }

  .swal2-container .swal2-popup { min-width: 90%; max-width: calc(100% - 20px); padding: 25px 20px; }
  .swal2-container .swal2-actions { gap: 6px; margin-top: 15px; }

}


/* ======================================================================= */
/* ---------------------- [ etc size (425px~ 이하) ] --------------------- */
/* ======================================================================= */
@media (max-width: 425px){
  

}