@media (max-width: 575.98px) {

  /*#logo img {
      max-width: 80%;
  }*/

  .swiper-button-next:after,
  .swiper-button-prev:after {
      font-size: 1.5rem !important;
      background-color: rgba(255, 255, 255, 0.5);
      padding: 10px 5px;
      color: var(--base_color) !important;
  }

  .container {
      padding-left: 10px;
      padding-right: 10px;
  }

  .row {
      margin-left: -10px;
      margin-right: -10px;
  }

  .col,
  .col-1,
  .col-10,
  .col-11,
  .col-12,
  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-auto {
      padding-left: 10px;
      padding-right: 10px;
  }

  .mb-4 {
      margin-bottom: 2rem !important;
  }

  .bookList .table {
      background: url(img/table_400.png) center no-repeat;
      background-size: 100% 58px;
  }

  .bookList .table {
      width: 96% !important;
      position: relative;
      z-index: 8;
      margin: 0 auto; 
      margin-top: -5px;
  }

  .bookList p { top: -5px; }

  .preSearch input {
      width: 100px;
  }

  /*.bookList .book {
      width: 105px !important;
      height: 130px !important;
  }

  .bookList .book .btn {
      margin-top: 40px !important;
      margin-left: 14px !important;
  }*/

}

@media (min-width: 576px) {

  .fs-sm-12 {
      font-size: 1.2rem;
  }

  .fs-sm-14 {
      font-size: 1.4rem;
  }

  .fs-sm-15 {
      font-size: 1.5rem;
  }

  .fs-sm-16 {
      font-size: 1.6rem;
  }

  .fs-sm-18 {
      font-size: 1.8rem;
  }

  .fs-sm-24 {
      font-size: 2.4rem;
  }

  .fs-sm-30 {
      font-size: 3.0rem;
  }

  .fs-sm-40 {
      font-size: 4.0rem;
  }

  /*#logo img {
      max-width: 80%;
  }*/

  .swiper-button-next:after,
  .swiper-button-prev:after {
      font-size: 1.5rem !important;
      background-color: rgba(255, 255, 255, 0.5);
      padding: 10px 5px;
      color: var(--base_color) !important;
  }

  .bookList .table {
      background: url(img/table_500.png) center no-repeat;
      background-size: 100% 58px;
  }

  .bookList .container {
      padding: 0 100px !important;
  }

  .bookList .table {
      width: 576px !important;
      margin: 0 -60px;
      position: relative;
      z-index: 8;
  }


}

@media (min-width: 768px) {

  body {
      font-size: 1.4rem;
  }

  .fs-md-12 {
      font-size: 1.2rem;
  }

  .fs-md-14 {
      font-size: 1.4rem;
  }

  .fs-md-15 {
      font-size: 1.5rem;
  }

  .fs-md-16 {
      font-size: 1.6rem;
  }

  .fs-md-18 {
      font-size: 1.8rem;
  }

  .fs-md-20 {
      font-size: 2.0rem;
  }

  .fs-md-24 {
      font-size: 2.4rem;
  }

  .fs-md-30 {
      font-size: 3.0rem;
  }

  .fs-md-40 {
      font-size: 4.0rem;
  }


  .swiper-button-next:after,
  .swiper-button-prev:after {
      font-size: 3.0rem !important;
  }

  .bookList .table {
      width: 768px;
      background: url(img/table_500.png) center no-repeat;
      background-size: 100% 58px;
  }

  .bookList .container {
      padding: 0 100px !important;
  }

  .bookList .table {
      width: 992px !important;
      margin: 0 -60px;
      position: relative;
      z-index: 8;
  }


  .side-image img { width: 100% !important; }


}

@media (min-width: 992px) {


  .fs-lg-12 {
      font-size: 1.2rem;
  }

  .fs-lg-14 {
      font-size: 1.4rem;
  }

  .fs-lg-16 {
      font-size: 1.6rem;
  }

  .fs-lg-17 {
      font-size: 1.7rem;
  }

  .fs-lg-18 {
      font-size: 1.8rem;
  }

  .fs-lg-19 {
      font-size: 1.9rem;
  }

  .fs-lg-20 {
      font-size: 2.0rem;
  }    

  .fs-lg-22 {
      font-size: 2.4rem;
  }

  .fs-lg-24 {
      font-size: 2.4rem;
  }

  .fs-lg-26 {
      font-size: 2.6rem;
  }

  .fs-lg-28 {
      font-size: 2.8rem;
  }

  .fs-lg-30 {
      font-size: 3.0rem;
  }

  .fs-lg-32 {
      font-size: 3.2rem;
  }

  .fs-lg-35 {
      font-size: 3.5rem;
  }

  .fs-lg-36 {
      font-size: 3.6rem !important;
  }

  .fs-lg-38 {
      font-size: 3.8rem;
  }

  .fs-lg-40 {
      font-size: 4.0rem;
  }

  .fs-lg-45 {
      font-size: 4.5rem;
  }

  .fs-lg-50 {
      font-size: 5.0rem;
  }

  .bookList .table {
      width: 1000px;
      background: url(img/table_1080.png) center no-repeat;
      background-size: 100% 58px;
  }

  .bookList .container {
      padding: 0 100px !important;
  }

  .bookList .table {
      width: 992px !important;
      margin: 0 -60px;
      position: relative;
      z-index: 8;
  }

  .scroll {  margin-top: 60px; }


}


@media (min-width: 1200px) {

  #top_tel {
      width: 226px;
  }

  .py-xl-8 {
      padding: 50px 0 !important;
  }

  .fs-xl-14 {
      font-size: 1.4rem;
  }

  .fs-xl-15 {
      font-size: 1.5rem;
  }

  .fs-xl-16 {
      font-size: 1.6rem;
  }

  .fs-xl-19 {
      font-size: 1.9rem;
  }

  .fs-xl-22 {
      font-size: 2.2rem;
  }

  .fs-xl-24 {
      font-size: 2.4rem;
  }

  .fs-xl-30 {
      font-size: 3.0rem;
  }

  .fs-xl-32 {
      font-size: 3.2rem;
  }

  .fs-xl-35 {
      font-size: 3.5rem;
  }

  .fs-xl-36 {
      font-size: 3.6rem;
  }

  .fs-xl-38 {
      font-size: 3.8rem;
  }

  .fs-xl-40 {
      font-size: 4.0rem;
  }

  .fs-xl-46 {
      font-size: 4.6rem;
  }

  .fs-xl-50 {
      font-size: 5.0rem;
  }

  .fs-xl-52 {
      font-size: 5.2rem;
  }

  .fs-xl-60 {
      font-size: 6.0rem;
  }

  .fs-xl-70 {
      font-size: 7.0rem;
  }

  .fs-xl-76 {
      font-size: 7.0rem;
  }


  .bookList .container {
      padding: 0 80px !important;
  }

  .bookList .table {
      background: url(img/table_1080.png) center no-repeat;
      background-size: 100% 58px;
  }

  .bookList .table {
      width: 1480px !important;
      margin: 0 -60px;
      position: relative;
      z-index: 8;
  }

  .bookList .col-xl-2 { max-width: 20% !important; flex: 0 0 20% !important; }

  .loadding {background: url(../Image/bg_loadding.jpg) top center no-repeat; background-size: cover !important; }


  .logo img { width: 300px;  }

  .kh img { width: 300px;  }

  .load { margin: 100px 0; }


}

@media (min-width: 1600px) {

  .container {
      max-width: 1600px;
  }

  .bookList .container {
      padding: 0 160px !important;
  }

  .bookList .table {
      width: 1480px !important;
      margin: 0 -120px;
      position: relative;
      z-index: 8;
  }

  .logo { margin: 40px 0 120px; }
  .kh { margin: 40px 0 120px;  }

}