@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;600&display=swap');

.clearfix:after, .container::after{ content:''; display:block; visibility:hidden; clear: both; }
#hospital-search-page{ padding:115px 0 140px; background-color: #f8f8f8; }
#hospital-search-page div, #hospital-search-page span, #hospital-search-page h1, #hospital-search-page h4, #hospital-search-page input, #hospital-search-page button, #hospital-search-page a{ font-family: 'Noto Sans Thai' !important; font-size:16px; }
#h-title{ font-size:36px !important; font-weight:600; color: #c5281c; }
#h-filter{ display:flex; gap:15px; margin:40px 0 60px; }
#h-filter .col{ width:25%;}
#h-filter .col-button{ width:100px; position:relative}
#h-filter .col-input{ position:relative; }
#h-filter .col-input i{ position:absolute; right:12px; top:13px; }
#h-filter .col-input input[type=text]{ width:100%; padding:9px 40px 9px 15px; border-radius:10px; border:none; font-weight: 400; }
#h-filter button[type=submit]{ color:#fff; background-color:#c5281c; border:none; padding:9px 0;  width:100%; border-radius:10px;  cursor: pointer; }
#h-filter button[type=reset]{ position:absolute; right:0; bottom:-35px; color:#c5281c; background-color:transparent !important; border:none; padding:0; width:100%; text-decoration: underline; width:auto; cursor: pointer; }
#hospital-search-page .select2-container .select2-selection--single{ height:44px; }
#hospital-search-page .select2-container--default .select2-selection--single .select2-selection__arrow{ height:44px; width:30px; }
#hospital-search-page .select2-container--default .select2-selection--single .select2-selection__rendered{ line-height: 44px; }
#hospital-search-page .select2-container .select2-selection--single .select2-selection__rendered{ padding-left:15px; }
#hospital-search-page .select2-container--default .select2-selection--single{ border:none; border-radius: 10px; }
#h-total{ margin:0 0 30px; font-size:20px; }
#h-total span{ color: #c5281c; font-size:20px; }
#h-search-list{ display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:20px; }
#h-search-list .box{ background:#fff; padding:20px; border-radius:10px; }
#h-search-list h4{ font-size:22px; margin-bottom:20px; }
#h-search-list .row-icon{ position:relative; padding-left:30px; }
#h-search-list .row-icon i{ position:absolute; left:0; top:3px; color:#c5281c; width:20px; text-align:center; }
#h-search-list .box .tel{ margin:10px 0; }
#h-search-list .box .box-info{ min-height:124px; }
#h-search-list .box .km-map{ display:flex; justify-content: space-between; align-content: center; margin-top:20px; }
#h-search-list .box .km, #h-search-list .box .km span{ font-size:19px; font-weight:600; }
#h-search-list .box .map a{ display:inline-block; padding:3px 10px; color:#c5281c; border:1px solid #c5281c; border-radius:5px; }

#h-pagination{ margin: 50px 0 0; }
#h-pagination .pagination{ text-align:center; }
#h-pagination .pagination a{ display:inline-block; margin:0 3px; border:1px solid transparent; padding:4px 12px; text-decoration: none; color: #000;  font-size:15px; }
#h-pagination .pagination a:hover, #h-pagination .pagination a:active { color: #625F47; }
#h-pagination .pagination span.current { margin:0 3px; padding:4px 12px; display:inline-block; color: #c5281c; border:1px solid #c5281c; border-radius: 5px;  }
#h-pagination .pagination span.disabled { margin:0 3px; padding:4px 12px; color:#CCC; }
.h-notice{ display:none; text-align: center; font-size:24px !important; font-weight: 500; margin:50px 0; }
#hospital-search-page .banner{ text-align: center; max-width:1920px; width:100%; margin: 0 auto 60px; }
#hospital-search-page .banner a{ cursor: pointer; display:block; }
#hospital-search-page .banner img{ width:100%; }
#hospital-search-page .banner img.img-desktop{ display:block; }
#hospital-search-page .banner img.img-mobile{ display:none; }

@media(max-width: 1180px){

    #hospital-search-page .banner{ width:100%; margin:0 auto 50px; }
}

@media(max-width: 980px){

    #hospital-search-page{ padding:5px 0 100px; }
    #h-title{ font-size:28px !important; }
    #h-search-list{ grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media(max-width: 767px){

    #hospital-search-page{ padding:5px 0 40px; }
    #h-search-list{ grid-template-columns: repeat(1,minmax(0,1fr)); }
    #h-filter{ flex-wrap: wrap; margin-top:25px; }
    #h-filter .col, #h-filter .col-button{ width:100%; }

    #hospital-search-page .banner img.img-desktop{ display:none; }
    #hospital-search-page .banner img.img-mobile{ display:block; }
}