/* todo
          todo ting do
          todo 有使用 Better Comments， vscode 的 extension
          todo  ? 藍色 => 分不同頁面使用
          todo  一般的註解 => 一個頁面不同的分區
          todo  ! 紅色 => 用來註解效果，例如hover
          todo  todo 橘色 => 留言命名規則邏輯
todo */

/*

## CSS 的 Class 命名規則

### 1. 改 Bootstrap 內建的 Class ，要確認其他分頁，沒有同一個元件，避免樣式覆蓋。

### 2. index.html 的分區 Class 是用 index + section001~section005。

### 3. 其他分頁的 html，請多加一層哪個分頁的 Class，EX:.contact_section001~.contact_section005。

*/



* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Noto Sans TC';
}





/* ? index.html 頁面使用的 class -------------------------------------------------------------------------------------------------------------------- */




/* index_logo區 --------------------------------------------------------------- */
#index_logo {
  display: flex;
  flex-direction: column;
}

.index_logo_left {
  display: flex;
}


#index_logo .col-4 {
  padding: 0;
  margin-top: 10px;
}

#index_logo img {
  width: 25vw;
  max-width: 143px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#index_logo .col-8 {
  padding: 0;
  margin-top: calc(0.2rem + 5vw);
}


#index_logo p {
  padding: 0;
  font-size: calc(0.2rem + 3vw);
  color: #0150A5;
  font-weight: 600;
  margin-bottom: 0;
}



#index_logo h1 {
  color: red;
  font-size: 18px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  font-weight: bold;
}

@media screen and (min-width:576px) {

  #index_logo {
    flex-direction: row;
    justify-content: space-evenly;
    margin-bottom: 10px;
  }


  #index_logo .col-8 {
    margin-top: 40px;
    margin-left: 20px;
  }




  #index_logo p {
    font-size: 16px;
  }

  #index_logo h1 {
    font-size: 20px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: auto;
    margin-bottom: 5px;
  }

}


@media screen and (min-width:768px) {

  #index_logo .col-8 {
    margin-top: 35px;
    margin-left: 25px;
  }

  #index_logo p {
    font-size: 20px;
  }

  #index_logo h1 {
    font-size: 25px;
    margin-bottom: 8px;
  }

}



@media screen and (min-width:992px) {

  #index_logo .col-4 {
    margin-top: 30px;
  }

  #index_logo .col-8 {
    margin-top: 55px;
    margin-left: 20px;
  }


  #index_logo h1 {
    font-size: 32px;
    margin-bottom: 0px;
    font-weight: bold;
  }

}


@media screen and (min-width:1200px) {


  .index_logo_left {
    width: 700px;
  }

  #index_logo .col-8 {
    margin-top: 50px;
    margin-left: 40px;
  }


  #index_logo p {
    font-size: 24px;
  }

  #index_logo img {
    margin-right: 0;
  }




  @media screen and (min-width:1600px) {

    .index_logo_left {
      margin-left: -380px;
    }


    #index_logo .col-4 {
      margin-top: 10px;
    }

    #index_logo .col-8 {
      display: flex;
      flex-direction: column;
      justify-content: end;
      margin-top: 0px;
      padding-bottom: 5px;
      margin-left: 20px;
    }

    #index_logo .col-8 p {
      font-size: 30px;
    }



    #index_logo h1 {
      position: relative;
      top: 0px;
      left: 140px;
      font-weight: bold;
      font-size: 35px;
    }



  }



}





/* index_logo區 --------------------------------------------------------------- */










/* index_navbar區 ------------------------------------------------------------- */




#index_navbar.navbar-light {
  border: 3px solid #0150A5;
  background-color: #0088ff;
}

#index_navbar button {
  border: 2px solid #0150A5;
}

#index_navbar .navbar-nav {
  margin-top: 10px;
}

#index_navbar .nav-item a {
  margin-left: 15px;
  color: white;
  font-weight: 600;
  font-size: 20px;
}

#index_navbar .nav-item .dropdown-item {
  color: #0150A5;
}

#index_navbar .nav-item .dropdown-toggle::after {
  position: relative;
  top: 5px;
}





@media screen and (min-width:992px) {

  #index_navbar .navbar-nav {
    margin-top: 0px;
  }


  #index_navbar.navbar-light {
    border: 0px;
    background-color: #ffffff;
  }

  #index_navbar .nav-item a {
    color: #0252A4;
    position: relative;
  }

  #index_navbar .nav-item:nth-child(1)>a:hover::before {
    content: "";
    width: 78px;
    border: 2px solid #0252A4;
    position: absolute;
    top: 45px;
    left: 6px;
  }

  #index_navbar .nav-item:nth-child(2)>a:hover::before {
    content: "";
    width: 115px;
    border: 2px solid #0252A4;
    position: absolute;
    top: 45px;
    left: 6px;
  }

  #index_navbar .nav-item:nth-child(3)>a:hover::before {
    content: "";
    width: 115px;
    border: 2px solid #0252A4;
    position: absolute;
    top: 45px;
    left: 6px;
  }

  #index_navbar .nav-item:nth-child(4)>a:hover::before {
    content: "";
    width: 96px;
    border: 2px solid #0252A4;
    position: absolute;
    top: 45px;
    left: 6px;
  }

  #index_navbar .nav-item:nth-child(5)>a:hover::before {
    content: "";
    width: 125px;
    border: 2px solid #0252A4;
    position: absolute;
    top: 45px;
    left: 6px;
  }

  #index_navbar .nav-item:nth-child(6)>a:hover::before {
    content: "";
    width: 145px;
    border: 2px solid #0252A4;
    position: absolute;
    top: 45px;
    left: 6px;
  }

  #index_navbar #navbarNavDropdown {
    justify-content: center;
  }

  #index_navbar #navbarNavDropdown .navbar-nav {
    width: 800px;
    justify-content: space-between;
    margin-left: 10vw;
  }


  #index_navbar #navbarNavDropdown .navbar-nav .dropdown-menu {
    position: absolute;
    top: 60px;
    width: 256px;
    padding: 0;
    border: 2px solid #0252A4;
    border-radius: 10px;
  }

  #index_navbar #navbarNavDropdown .navbar-nav .dropdown-menu .dropdown-item {
    margin: 0;
    padding: 10px 20px;
  }

  #index_navbar #navbarNavDropdown .navbar-nav .dropdown-menu .dropdown-item:hover {
    background-color: #0252A4;
    color: #ffffff;
  }


}



@media screen and (min-width:1400px) {



  #index_navbar #navbarNavDropdown .navbar-nav {
    width: 1320px;
    margin-left: -90px;
    margin-top: -10px;
  }

  #index_navbar .nav-item a {
    font-size: 25px;
    margin-bottom: 0px;
  }
}



/* index_navbar區 ------------------------------------------------------------- */










/* index_carousel區 -------------------------------------------------------------- */



#index_carousel .item img {
  height: 60vw;
}


@media screen and (min-width:1000px) {

  #index_carousel .item img {
    height: 600px;
  }

}


@media screen and (min-width:1500px) {

  #index_carousel .item img {
    height: 690px;
  }

}




/* index_carousel區 -------------------------------------------------------------- */






/* index_section001 --------------------------------------------------------------- */

#index_section001 {
  margin-top: 50px;
  margin-bottom: 70px;
}

#index_section001 h2 {
  background-color: #0150A5;
  color: #ffffff;
  padding: 20px;
  font-weight: 600;
  margin-bottom: 50px;
}

#index_section001 .card {
  height: 330px;
  padding: 20px;
  margin-bottom: 40px;
  background-color: #ffffff;
  border: 3px solid #e7e7e7;
}

#index_section001 .card img {
  height: 200px;
  z-index: 3;
}

#index_section001 .card h5 {
  text-align: center;
  font-size: 26px;
  font-weight: 600;
  background-color: #ffffff;
  padding: 10px;
  color: #000000;
  border: 2px solid #ececec;
  border-radius: 10px;
  z-index: 3;
}


#index_section001 .card h5 a {
  text-decoration: none;
  color: #000000;
}

#index_section001 .card h5 a:hover {
  color: #0080ff;
}



@media screen and (min-width:992px) {



  #index_section001 .card {
    overflow: hidden;
    position: relative;
    top: 0;
    transition: .5s;
  }




  #index_section001 .card:hover {
    top: 20px;
    transition: 1s;
    background-color: #0051A3;
    cursor: pointer;
  }


  #index_section001 .card:hover h5 {
    color: #0080ff;
    background-color: white;
  }




}


/* modal 區 */




#index_section001 .modal-content {
  padding-left: 20px;
  padding-right: 20px;
}

#index_section001 .modal-header h1 {
  font-size: 16px;
  text-align: center;
  margin-top: 20px;
  color: #0080ff;
}

#index_section001 .modal-footer {
  display: none;
}

#index_section001 .modal-footer h5 {
  font-size: 16px;
  text-align: center;
  margin-top: 10px;
  color: #0080ff;
  margin-bottom: 50px;
}


@media screen and (min-width:992px) {

  #index_section001 .modal-header h1 {
    font-size: 25px;
    font-weight: 600;
  }

  #index_section001 .modal-footer h5 {
    font-size: 20px;
  }

  #index_section001 .modal-dialog {
    max-width: 700px;
  }
}




@media screen and (min-width:1200px) {


  /* modal 大小設置 */
  #index_section001 .modal-dialog {
    max-width: 800px;
  }

  /* modal 大小設置 */
}




/* modal 區 */













/* index_section001 --------------------------------------------------------------- */





/* index_footer  -------------------------------------------------------------------- */
#index_footer {
  background-color: #58B1E9;
  padding-top: 20px;
  font-weight: 600;
  color: white;
}

#index_footer .col-12 {
  display: flex;
  padding-top: 15px;
  padding-bottom: 10px;
  margin-bottom: 0px;
  align-items: center;
}

#index_footer .col-12 img {
  width: calc(59px + 2vw);
  display: block;
  margin-right: 5px;
}



#index_footer .col-12 img:hover {
  animation: logo66666 1s ease-in-out forwards;
}

@keyframes logo66666 {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.2);
  }
}

#index_footer .col-12 h5 {
  font-size: calc(9px + 1vw);
  font-weight: 600;
  margin-top: 5px;
  margin-left: 1vw;
}


#index_footer .col-12 i {
  color: black;
  position: relative;
  background-color: white;
  border-radius: 50%;
  padding: 10px;
  width: 45px;
  height: 45px;
}


#index_footer .col-12 i:hover {
  color: #0051A3;
  position: relative;
  background-color: white;
}




#index_footer .col-12 i::before {
  font-size: 23px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#index_footer .col-12 p {
  min-width: 150px;
  width: 80%;
  font-size: 12px;
  margin-left: 20px;
  margin-top: 5px;
}


#index_footer .col-12 p a {
  color: #fff;
  text-decoration: none;
}





#index_footer .index_footer_linear {
  min-width: 260px;
  width: 100%;
  background-image: linear-gradient(90deg, #24DAFF, #00B0FF 50%, #0051A3);
  padding: 20px;
  border-radius: 70px;
  color: white;
  font-weight: 600;
  font-size: 16px;
  text-align: center;
}

#index_footer .index_footer_linear:hover {
  position: relative;
  animation: linear666 1.5s ease-in-out forwards;
}


@keyframes linear666 {
  0% {
    left: 0px;
    background-image: linear-gradient(90deg, #24DAFF, #00B0FF 10%, #0051A3);
  }

  20% {
    background-image: linear-gradient(90deg, #24DAFF, #00B0FF 20%, #0051A3);
  }

  40% {
    background-image: linear-gradient(90deg, #24DAFF, #00B0FF 40%, #0051A3);
  }

  60% {
    background-image: linear-gradient(90deg, #24DAFF, #00B0FF 50%, #0051A3);
  }

  80% {
    background-image: linear-gradient(90deg, #24DAFF, #00B0FF 80%, #0051A3);
  }

  100% {
    left: 0px;
    background-image: linear-gradient(90deg, #24DAFF, #00B0FF 100%, #0051A3);
  }
}




#index_footer_footer p {
  background-color: #115581;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  color: white;
  padding-top: 20px;
  padding-bottom: 15px;
  width: 100%;
  margin: 0;
}

#index_footer_footer p a {
  text-decoration: none;
  color: white;
}



@media screen and (min-width:400px) {


  #index_footer .col-12 p {
    font-size: 17px;
  }

  #index_footer_footer p {
    font-size: 16px;
  }



}






@media screen and (min-width:992px) {

  #index_footer .col-12 img {
    width: 114px;
  }

  #index_footer .col-12 h5 {
    margin-top: 10px;
    margin-left: 10px;
    font-size: 20px;
    line-height: 1.5;
  }

  #index_footer .index_footer_linear {
    width: 100%;
    font-size: 26px;
    font-weight: 600;
    padding-left: 50px;
  }

  #index_footer .col-12 {
    align-items: flex-start;
  }

  #index_footer .col-12 p {
    width: 330px;
    font-size: 16px;
  }


  #index_footer_footer p {
    font-size: 16px;
  }


  #index_footer .col-12 i {
    width: 50px;
    height: 50px;
  }

  #index_footer .col-12 i::before {
    font-size: 25px;
  }

}






@media screen and (min-width:1200px) {


  #index_footer .col-12 h5 {
    margin-top: 5px;
    line-height: 2;
  }

  #index_footer .index_footer_linear {
    width: 90%;
    font-size: 32px;
  }

  #index_footer .col-12 p {
    font-size: 18px;
  }


  #index_footer_footer p {
    font-size: 18px;
  }


  #index_footer .col-12 i {
    width: 60px;
    height: 60px;
  }

  #index_footer .col-12 i::before {
    font-size: 35px;
  }


  #index_footer .row .col-12:nth-child(4) {
    padding-left: 60px;
  }



}




/* index_footer  -------------------------------------------------------------------- */













/* ? index.html 頁面使用的 class -------------------------------------------------------------------------------------------------------------------- */





















/* ? about.html 頁面使用的 class -------------------------------------------------------------------------------------------------------------------- */

/* about_section001------------------------------------------------------------------------------------------------------------------- */

.about_section001_imgtop {
  width: 100%;
  height: 100px;
}

.about_section001_h1 {
  position: absolute;
  top: 50%;
  left: 8%;
  transform: translate(-8%, -50%);
  color: white;
  font-size: 30px;
  font-weight: 600;
}

.about_section001_title {
  color: white;
  background-color: #0051A3;
  font-size: 16px;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 0;
  padding: 20px 0px 20px 10px;
}

.about_section001_content {
  margin-top: 50px;
  margin-bottom: 50px;
}

.about_section001_content h3 {
  font-size: 20px;
  font-weight: 600;
}


.about_section001_content p {
  font-size: 14px;
  margin-top: 15px;
  margin-bottom: 20px;
}








@media screen and (min-width:576px) {

  .about_section001_imgtop {
    height: 175px;
  }


  .about_section001_h1 {
    font-size: 45px;
  }

  .about_section001_title {
    font-size: 20px;
    padding: 20px 0px 20px 75px;
  }

  .about_section001_content {
    margin-left: 70px;
    margin-top: 70px;
    margin-bottom: 70px;
  }

  .about_section001_content h3 {
    font-size: 24px;
  }


  .about_section001_content p {
    font-size: 16px;
  }




}










@media screen and (min-width:992px) {

  .about_section001_imgtop {
    height: 200px;
  }

  .about_section001_h1 {
    font-size: 55px;
  }

  .about_section001_title {
    font-size: 24px;
    padding: 20px 0px 20px 115px;
  }

  .about_section001_content {
    margin-left: 108px;
    margin-top: 85px;
    margin-bottom: 85px;
  }

  .about_section001_content h3 {
    font-size: 28px;
  }


  .about_section001_content p {
    font-size: 22px;
    margin-top: 20px;
    margin-bottom: 30px;
  }

}





@media screen and (min-width:1600px) {

  .about_section001_imgtop {
    height: 253px;
  }


  .about_section001_h1 {
    font-size: 64px;
  }

  .about_section001_title {
    padding: 20px 0px 20px 133px;
  }

  .about_section001_content {
    margin-left: auto;
    margin-right: auto;
    margin-top: 116px;
    margin-bottom: 116px;
    width: 1190px;
  }

  .about_section001_content h3 {
    font-size: 32px;
  }

  .about_section001_content p {
    font-size: 28px;
    margin-left: 163px;
  }
}






/* about_section001------------------------------------------------------------------------------------------------------------------- */












/* ? products.html 頁面使用的 class -------------------------------------------------------------------------------------------------------------------- */





/* products_section001------------------------------------------------------------------------------------------------------------------- */

/* 標題圖片跟標題 */
.products_section001_imgtop {
  width: 100%;
  height: 100px;
  display: block;
}

.products_section001_h1 {
  position: absolute;
  top: 50%;
  left: 8%;
  transform: translate(-8%, -50%);
  color: white;
  font-size: 30px;
  font-weight: 600;
}

.products_section001_title {
  color: white;
  background-color: #0051A3;
  font-size: 16px;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 0;
  padding: 20px 0px 20px 10px;
}

.products_section001_content {
  margin-top: 50px;
  margin-bottom: 50px;
}



@media screen and (min-width:576px) {

  .products_section001_imgtop {
    height: 175px;
  }


  .products_section001_h1 {
    font-size: 45px;
  }

  .products_section001_title {
    font-size: 20px;
    padding: 20px 0px 20px 75px;
  }

  .products_section001_content {
    margin-left: 70px;
    margin-top: 70px;
    margin-bottom: 70px;
  }
}




@media screen and (min-width:992px) {

  .products_section001_imgtop {
    height: 200px;
  }

  .products_section001_h1 {
    font-size: 55px;
  }

  .products_section001_title {
    font-size: 24px;
    padding: 20px 0px 20px 115px;
  }

  .products_section001_content {
    margin-left: 108px;
    margin-top: 85px;
    margin-bottom: 85px;
  }

}


@media screen and (min-width:1600px) {

  .products_section001_imgtop {
    height: 253px;
  }


  .products_section001_h1 {
    font-size: 64px;
  }

  .products_section001_title {
    padding: 20px 0px 20px 133px;
  }

  .products_section001_content {
    margin-left: auto;
    margin-right: auto;
    margin-top: 116px;
    margin-bottom: 116px;
    width: 1190px;
  }
}

/* 標題圖片跟標題 */




/* 產品分類區 */
.products_section001_content h2 {
  font-weight: 600;
  font-size: 30px;
  color: #115581;
}

@media screen and (min-width:992px) {
  .products_section001_content h2 {
    font-size: 48px;
    text-align: center;
  }
}




.products_section001_content #products_cate_tab {
  margin-top: 50px;
  display: flex;
  justify-content: center;
}

.products_section001_content .nav-item button {
  width: 140px;
}





@media screen and (min-width:500px) {

  .products_section001_content #products_cate_tab #products_cate003_tab p {
    margin-bottom: 0;
  }

  .products_section001_content #products_cate_tab p {
    font-size: 16px;
    margin-bottom: 24px;
  }


}





@media screen and (min-width:576px) {
  .products_section001_content #products_cate_tab {
    justify-content: flex-start;
  }
}


.products_section001_content .nav-item {
  margin-left: 20px;
}

@media screen and (min-width:992px) {

  .products_section001_content .nav-item button p {
    margin-top: 10px;

  }
}

.products_section001_content #products_cate001_tab,
.products_section001_content #products_cate002_tab,
.products_section001_content #products_cate003_tab {
  border: 1px solid #0051A3;
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: 600;
  padding: 10px;
}


@media screen and (min-width:1200px) {


  .products_section001_content #products_cate_tab p {
    font-size: 16px;
    margin-bottom: 24px;
  }



}


.products_section001_content .nav-pills .nav-link.active {
  background-color: #0051A3;
}

/* 產品分類區 */

/* 產品區 */



.products_section001_content #products_cate {
  margin-bottom: 50px;
}

.products_section001_content #products_cate hr {
  background-color: #0051A3;
  opacity: 1;
  height: 6px;
  margin-bottom: 50px;
}

.products_section001_content #products_cate .card {
  border: 1px solid #cecece;
}

.products_section001_content #products_cate .card h5:hover {
  color: #0051A3;
}

.products_section001_content #products_cate .col-12 {
  margin-bottom: 50px;
}

.products_section001_content #products_cate .card .card-title {
  background-color: white;
  font-size: 20px;
  font-weight: 600;
  padding: 10px;
  text-align: center;
  position: relative;
}


@media screen and (min-width:1200px) {

  .products_section001_content #products_cate .card .card-title {
    font-size: 24px;
  }

  #products_cate #products_cate001 .card:hover,
  #products_cate #products_cate002 .card:hover,
  #products_cate #products_cate003 .card:hover {
    position: relative;
    transition: 1.5s;
    top: 10px;
    cursor: pointer;
  }

  #products_cate #products_cate001 .card:hover .card-title,
  #products_cate #products_cate002 .card:hover .card-title,
  #products_cate #products_cate003 .card:hover .card-title {
    color: #0051A3;
  }


}




/* 產品區 */






/* modal 區 */




#products_cate #products_cate001 .modal-content,
#products_cate #products_cate002 .modal-content,
#products_cate #products_cate003 .modal-content {
  padding-left: 20px;
  padding-right: 20px;
}

#products_cate #products_cate001 .modal-header h1,
#products_cate #products_cate002 .modal-header h1,
#products_cate #products_cate003 .modal-header h1 {
  font-size: 16px;
  text-align: center;
  margin-top: 20px;
  color: #0080ff;
}

#products_cate #products_cate001 .modal-footer,
#products_cate #products_cate002 .modal-footer,
#products_cate #products_cate003 .modal-footer {
  display: none;
}

#products_cate #products_cate001 .modal-footer h5,
#products_cate #products_cate002 .modal-footer h5,
#products_cate #products_cate003 .modal-footer h5 {
  font-size: 16px;
  text-align: center;
  margin-top: 10px;
  color: #0080ff;
  margin-bottom: 50px;
}


@media screen and (min-width:992px) {

  #products_cate #products_cate001 .modal-header h1,
  #products_cate #products_cate002 .modal-header h1,
  #products_cate #products_cate003 .modal-header h1 {
    font-size: 25px;
    font-weight: 600;
  }

  #products_cate #products_cate001 .modal-footer h5,
  #products_cate #products_cate002 .modal-footer h5,
  #products_cate #products_cate003 .modal-footer h5 {
    font-size: 20px;
  }

  #products_cate #products_cate001 .modal-dialog,
  #products_cate #products_cate002 .modal-dialog,
  #products_cate #products_cate003 .modal-dialog {
    max-width: 700px;
  }
}




@media screen and (min-width:1200px) {


  /* modal 大小設置 */

  #products_cate #products_cate001 .modal-dialog,
  #products_cate #products_cate002 .modal-dialog,
  #products_cate #products_cate003 .modal-dialog {
    max-width: 800px;
  }

  /* modal 大小設置 */
}




/* modal 區 */





/* products_section001------------------------------------------------------------------------------------------------------------------- */




/* ? products.html 頁面使用的 class -------------------------------------------------------------------------------------------------------------------- */














/* ? quality.html 頁面使用的 class -------------------------------------------------------------------------------------------------------------------- */



/* quality_section001 ------------------------------------------------------------------------- */

/* 標題圖片跟標題 */
.quality_section001_imgtop {
  width: 100%;
  height: 100px;
  display: block;
}

.quality_section001_h1 {
  position: absolute;
  top: 50%;
  left: 8%;
  transform: translate(-8%, -50%);
  color: white;
  font-size: 30px;
  font-weight: 600;
}

.quality_section001_title {
  color: white;
  background-color: #0051A3;
  font-size: 16px;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 0;
  padding: 20px 0px 20px 10px;
}

.quality_section001_content {
  margin-top: 50px;
  margin-bottom: 50px;
}



@media screen and (min-width:576px) {

  .quality_section001_imgtop {
    height: 175px;
  }


  .quality_section001_h1 {
    font-size: 45px;
  }

  .quality_section001_title {
    font-size: 20px;
    padding: 20px 0px 20px 75px;
  }

  .quality_section001_content {
    margin-left: 70px;
    margin-top: 70px;
    margin-bottom: 70px;
  }
}




@media screen and (min-width:992px) {

  .quality_section001_imgtop {
    height: 200px;
  }

  .quality_section001_h1 {
    font-size: 55px;
  }

  .quality_section001_title {
    font-size: 24px;
    padding: 20px 0px 20px 115px;
  }

  .quality_section001_content {
    margin-left: 108px;
    margin-top: 85px;
    margin-bottom: 85px;
  }

}


@media screen and (min-width:1600px) {

  .quality_section001_imgtop {
    height: 253px;
  }


  .quality_section001_h1 {
    font-size: 64px;
  }

  .quality_section001_title {
    padding: 20px 0px 20px 133px;
  }

  .quality_section001_content {
    margin-left: auto;
    margin-right: auto;
    margin-top: 116px;
    margin-bottom: 116px;
    width: 1190px;
  }
}

/* 標題圖片跟標題 */



/* 內容區 */


.quality_section001_content h2 {
  font-weight: 600;
  font-size: 30px;
  color: #115581;
}

@media screen and (min-width:992px) {
  .quality_section001_content h2 {
    font-size: 48px;
    text-align: center;
  }
}

.quality_section001_content {
  margin-bottom: 80px;
}

.quality_section001_content .row {
  margin-top: 40px;
}

.quality_section001_content p {
  font-size: 16px;
  font-weight: 600;
}

.quality_section001_content p i {
  color: red;
}


@media screen and (min-width:576px) {
  .quality_section001_content {
    margin-bottom: 120px;
  }

  .quality_section001_content .row {
    margin-top: 60px;
  }

  .quality_section001_content p {
    font-size: 24px;
  }


}



@media screen and (min-width:1600px) {
  .quality_section001_content {
    margin-bottom: 150px;
  }

  .quality_section001_content .row {
    margin-top: 80px;
  }

  .quality_section001_content p {
    font-size: 30px;
  }
}








/* 內容區 */



/* quality_section001 ------------------------------------------------------------------------- */

/* ? quality.html 頁面使用的 class -------------------------------------------------------------------------------------------------------------------- */






/* ? catelog.html 頁面使用的 class -------------------------------------------------------------------------------------------------------------------- */

/* catelog_section001 ------------------------------------------------------------------------- */


/* 標題圖片跟標題 */
.catelog_section001_imgtop {
  width: 100%;
  height: 100px;
  display: block;
}

.catelog_section001_h1 {
  position: absolute;
  top: 50%;
  left: 8%;
  transform: translate(-8%, -50%);
  color: white;
  font-size: 30px;
  font-weight: 600;
}

.catelog_section001_title {
  color: white;
  background-color: #0051A3;
  font-size: 16px;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 0;
  padding: 20px 0px 20px 10px;
}

.catelog_section001_content {
  margin-top: 50px;
  margin-bottom: 50px;
}



@media screen and (min-width:576px) {

  .catelog_section001_imgtop {
    height: 175px;
  }


  .catelog_section001_h1 {
    font-size: 45px;
  }

  .catelog_section001_title {
    font-size: 20px;
    padding: 20px 0px 20px 75px;
  }

  .catelog_section001_content {
    margin-left: 70px;
    margin-top: 70px;
    margin-bottom: 70px;
  }
}




@media screen and (min-width:992px) {

  .catelog_section001_imgtop {
    height: 200px;
  }

  .catelog_section001_h1 {
    font-size: 55px;
  }

  .catelog_section001_title {
    font-size: 24px;
    padding: 20px 0px 20px 115px;
  }

  .catelog_section001_content {
    margin-left: 108px;
    margin-top: 85px;
    margin-bottom: 85px;
  }

}


@media screen and (min-width:1600px) {

  .catelog_section001_imgtop {
    height: 253px;
  }


  .catelog_section001_h1 {
    font-size: 64px;
  }

  .catelog_section001_title {
    padding: 20px 0px 20px 133px;
  }

  .catelog_section001_content {
    margin-left: auto;
    margin-right: auto;
    margin-top: 116px;
    margin-bottom: 116px;
    width: 1190px;
  }







}

/* 標題圖片跟標題 */


/* 內容區 */


.catelog_section001_content h2 {
  font-weight: 600;
  font-size: 30px;
  color: #115581;
}

@media screen and (min-width:992px) {
  .catelog_section001_content h2 {
    font-size: 48px;
    text-align: center;
  }
}




.catelog_section001_content {
  margin-top: 50px;
}

.catelog_section001_content .row {
  margin-top: 50px;
}


.catelog_section001_content .row .col-12 {
  margin-bottom: 30px;
}


.catelog_section001_content .card {
  padding: 20px;
}

.catelog_section001_content .card .card-body {
  margin-top: 30px;
}


.catelog_section001_content .card a {
  border: 6px solid #0051A3;
  color: #0051A3;
  border-radius: 20px;
  font-weight: 600;
  text-decoration: none;
  padding: 10px;
}



@media screen and (min-width:576px) {
  .catelog_section001_content .row .col-12 {
    margin-bottom: 40px;
  }

}





@media screen and (min-width:992px) {

  .catelog_section001_content {
    margin-top: 80px;
  }

  .catelog_section001_content .row {
    margin-top: 80px;
  }


  .catelog_section001_content .row .col-12 {
    margin-bottom: 60px;
  }

  .catelog_section001_content .card a {
    padding: 10px;
    margin-top: 20px;
    font-size: 28px;
  }

  .catelog_section001_content a:hover {
    background-color: #0051A3;
    color: white;
  }

}

@media screen and (min-width:1800px) {


  .catelog_section001_content {
    width: 1700px;
  }

  .catelog_section001_content .card {
    margin-left: 30px;
    margin-right: 30px;
    border-radius: 10px;
  }










}

/* 內容區 */



/* 分頁 */




.catelog_section001_content .nav-link {
  display: block;
  padding: 0;
}

.catelog_section001_content .nav-link:hover a {
  color: white;
}

.catelog_section001_content .nav-link a {
  display: block;
  padding: 10px 15px 10px 15px;
  border-radius: 5px;
  font-size: 25px;
}






/* 分頁 */



















/* catelog_section001 ------------------------------------------------------------------------- */

/* ? catelog.html 頁面使用的 class -------------------------------------------------------------------------------------------------------------------- */







/* ? contact.html 頁面使用的 class -------------------------------------------------------------------------------------------------------------------- */


/* contact_section001 ------------------------------------------------------------------------- */


/* 標題圖片跟標題 */
.contact_section001_imgtop {
  width: 100%;
  height: 100px;
  display: block;
}

.contact_section001_h1 {
  position: absolute;
  top: 50%;
  left: 8%;
  transform: translate(-8%, -50%);
  color: white;
  font-size: 30px;
  font-weight: 600;
}



.contact_section001_title {
  color: white;
  background-color: #0051A3;
  font-size: 16px;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 0;
  padding: 20px 0px 20px 10px;
}

.contact_section001_content {
  margin-top: 50px;
  margin-bottom: 50px;
}



@media screen and (min-width:576px) {

  .contact_section001_imgtop {
    height: 175px;
  }


  .contact_section001_h1 {
    font-size: 45px;
  }





  .contact_section001_title {
    font-size: 20px;
    padding: 20px 0px 20px 75px;
  }

  .contact_section001_content {
    margin-left: auto;
    margin-right: auto;
    margin-top: 70px;
    margin-bottom: 70px;
  }
}




@media screen and (min-width:992px) {

  .contact_section001_imgtop {
    height: 200px;
  }

  .contact_section001_h1 {
    font-size: 55px;
  }

  .contact_section001_title {
    font-size: 24px;
    padding: 20px 0px 20px 115px;
  }

  .contact_section001_content {
    margin-left: 108px;
    margin-top: 85px;
    margin-bottom: 85px;
  }

}


@media screen and (min-width:1600px) {

  .contact_section001_imgtop {
    height: 253px;
  }


  .contact_section001_h1 {
    font-size: 64px;
  }

  .contact_section001_title {
    padding: 20px 0px 20px 133px;
  }

  .contact_section001_content {
    margin-left: auto;
    margin-right: auto;
    margin-top: 116px;
    margin-bottom: 116px;
    width: 1190px;
  }
}

/* 標題圖片跟標題 */


/* 內容區 */


.contact_section001_content h2 {
  font-weight: 600;
  font-size: 20px;
  color: #115581;
  margin-bottom: 30px;
}

.contact_section001_content form {
  width: 100%;
  border: 3px solid #4EAAFF;
  border-radius: 10px;
  padding: 20px;
}




.contact_section001_content label {
  font-size: 20px;
  font-weight: 600;
}


.contact_section001_content button {
  display: block;
  font-size: 20px;
  font-weight: 600;
  margin-top: 20px;
  border-radius: 20px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
}



@media screen and (min-width:768px) {



  .contact_section001_content h2 {
    font-weight: 600;
    font-size: 30px;
    color: #115581;
  }

  .contact_section001_content button {
    font-size: 24px;
    margin-top: 30px;
    border-radius: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
  }








}










@media screen and (min-width:992px) {
  .contact_section001_content h2 {
    font-size: 48px;
    text-align: center;
  }

  .contact_section001_content form {
    border: 5px solid #4EAAFF;
    border-radius: 20px;
    font-size: 24px;
    padding: 20px;
  }


  .contact_section001_content label {
    font-size: 30px;
  }

}

@media screen and (min-width:1600px) {

  .contact_section001_content form {
    border: 10px solid #4EAAFF;
    width: 90%;
    padding: 70px;
  }

  .contact_section001_content button {
    padding: 15px 30px 15px 30px;
  }

}





/* 內容區 */



/* contact_section001 ------------------------------------------------------------------------- */


/* ? contact.html 頁面使用的 class -------------------------------------------------------------------------------------------------------------------- */



/* ? privacy.html 頁面使用的 class -------------------------------------------------------------------------------------------------------------------- */

/* privacy_section1 */

.privacy_section1 {
  margin-top: 20px;
  margin-bottom: 50px;
}

.privacy_section1 h1 {
  text-align: center;
  margin-top: 20px;
}

.privacy_section1 p {
  font-size: 16px;
  padding: 10px;

}


@media screen and (min-width:992px) {

  .privacy_section1 {
    margin-top: 40px;
    margin-bottom: 100px;
  }

  .privacy_section1 h1 {
    margin-top: 40px;
    margin-bottom: 40px;
  }

  .privacy_section1 p {
    font-size: 24px;
    padding: 10px 100px;
  }
}

/* privacy_section1 */



/* ? privacy.html 頁面使用的 class -------------------------------------------------------------------------------------------------------------------- */