@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap");
:root {
  /*主要色*/
  --color-main-light: #bac7ff;
  --color-main-med: #6771ff;
  --color-main-dark: #3330ff;
  --color-main2-dark: #7a7a7a;
  /*灰階*/
  --color-gray: #232429; /* Same */
  --color-gray-900: #393a3f; /* New */
  --color-gray-800: #55565b; /* Davi's Grey */
  --color-gray-700: #75767b; /* Moiety */
  --color-gray-600: #828388; /* Old Silver */
  --color-gray-500: #919297; /* Gray Blue */
  --color-gray-400: #adaeb3; /* Gravity */
  --color-gray-300: #c1c2c7; /* Seashell */
  --color-gray-200: #d3d4d9; /* Light Gray */
  --color-gray-100: #dedfe4; /* Light Diamond */
  --color-gray-050: #f3f4f9; /* White Smoke */
  --color-gray-025: #f9faff; /* White Smoke Light */
}

/* common設定======================================================================================*/
.none {
  display: none;
}

.text-align-center {
  text-align: center;
}

/* 寬高系列 ================================================*/
.w-100 {
  width: 100%;
}

.w-75 {
  width: 75%;
}

.w-50 {
  width: 50%;
}

.h-100 {
  height: 100%;
}

/* flex系列 ============================================*/
.flex {
  display: flex;
}

.wrap {
  flex-wrap: wrap;
}

.column {
  flex-direction: column;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-start {
  justify-content: flex-start;
}

.justify-content-end {
  justify-content: flex-end;
}

.align-items-center {
  align-items: center;
}

.align-items-start {
  align-items: flex-start;
}

.align-items-end {
  align-items: flex-end;
}

@media (min-width: 991px) {
  .order-md-1 {
    order: 1;
  }
}

@media (min-width: 991px) {
  .order-md-2 {
    order: 2;
  }
}

/* 行高系列 ==============================================*/
.lh-lg {
  line-height: 2;
}

/* margin系列 ===========================================*/
.ml-auto {
  margin-left: auto;
}

.ml-3 {
  margin-left: 1rem;
}

.ml-4 {
  margin-left: 1.5rem;
}

.mr-auto {
  margin-right: auto;
}

.mr-3 {
  margin-right: 1rem;
}

.mr-4 {
  margin-right: 1.5rem;
}

.mt-0 {
  margin-top: 0;
}

.mt-3 {
  margin-top: 1rem;
}

.mt-4 {
  margin-top: 1.5rem;
}

.mt-5 {
  margin-top: 3rem;
}

.mt-6 {
  margin-top: 5rem;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-3 {
  margin-bottom: 1rem;
}

.mb-4 {
  margin-bottom: 1.5rem;
}

.mb-5 {
  margin-bottom: 3rem;
}

.mb-6 {
  margin-bottom: 5rem;
}

.mb-10 {
  margin-bottom: 10rem;
}

@media (min-width: 767px) {
  .mb-sm-0 {
    margin-bottom: 0;
  }
}

@media (min-width: 767px) {
  .mb-sm-5 {
    margin-bottom: 3rem;
  }
}

@media (min-width: 991px) {
  .mb-md-0 {
    margin-bottom: 0;
  }
}

@media (min-width: 991px) {
  .mb-md-5 {
    margin-bottom: 3rem;
  }
}

@media (min-width: 991px) {
  .mb-md-10 {
    margin-bottom: 10rem;
  }
}

/*上下-左右系列*/
.mx-auto {
  margin: 0 auto;
}

.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.mx-3 {
  margin-left: 1rem;
  margin-right: 1rem;
}

.mx-4 {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.mx-5 {
  margin-left: 3rem;
  margin-right: 3rem;
}

.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.my-3 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.my-4 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.my-5 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.my-10 {
  margin-top: 10rem;
  margin-bottom: 10rem;
}

@media (min-width: 767px) {
  .my-sm-0 {
    margin-top: 0;
  }
}

@media (min-width: 767px) {
  .my-sm-5 {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
}

@media (min-width: 991px) {
  .my-md-0 {
    margin-bottom: 0;
  }
}

@media (min-width: 991px) {
  .my-md-5 {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
}

@media (min-width: 991px) {
  .my-md-10 {
    margin-top: 10rem;
    margin-bottom: 10rem;
  }
}

/* padding系列 ===================================*/
.p-0 {
  padding: 0;
}

/*padding-left*/
.pl-auto {
  padding-left: auto;
}

/*padding-right*/
.pr-auto {
  padding-right: auto;
}

.pr-3 {
  padding-right: 1rem;
}

.pb-0 {
  padding-bottom: 0;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-5 {
  padding-bottom: 3rem;
}

.pb-10 {
  padding-bottom: 10rem;
}

@media (min-width: 767px) {
  .pb-sm-0 {
    padding-bottom: 0;
  }
}

@media (min-width: 767px) {
  .pb-sm-5 {
    padding-bottom: 3rem;
  }
}

@media (min-width: 991px) {
  .pb-md-0 {
    padding-bottom: 0;
  }
}

@media (min-width: 991px) {
  .pb-md-5 {
    padding-bottom: 3rem;
  }
}

@media (min-width: 991px) {
  .pb-md-10 {
    padding-bottom: 10rem;
  }
}

/*上下-左右系列*/
.px-4 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-5 {
  padding-left: 3rem;
  padding-right: 3rem;
}

.py-4 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-5 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

@media (min-width: 767px) {
  .py-sm-0 {
    padding-top: 0;
    padding-bottom: 0;
  }
}

@media (min-width: 767px) {
  .py-sm-5 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

@media (min-width: 991px) {
  .py-md-0 {
    padding-top: 0;
    padding-bottom: 0;
  }
}

@media (min-width: 991px) {
  .py-md-5 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

@media (min-width: 991px) {
  .py-md-10 {
    padding-top: 10rem;
    padding-bottom: 10rem;
  }
}

/*bootstrap 5 columns*/
.col-xs-1-5,
.col-sm-1-5,
.col-md-1-5,
.col-lg-1-5 {
  position: relative;
  min-height: 1px;
  padding-right: 10px;
  padding-left: 10px;
  width: 20%;
  float: left;
}

@media (max-width: 575px) {
  .col-xs-1-5 {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .col-sm-1-5 {
    width: 100%;
  }
}

@media (max-width: 991px) {
  .col-md-1-5 {
    width: 100%;
  }
}

@media (max-width: 1190px) {
  .col-lg-1-5 {
    width: 100%;
  }
}

/*container容器斷點================================*/
@media (max-width: 575px) {
  .container-xs {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }
}

@media (max-width: 767px) {
  .container-sm {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }
}

@media (max-width: 991px) {
  .container-md {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }
}

@media (max-width: 1190px) {
  .container-lg {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }
}

/* ================================================================*/
/* Index 介面 頁面 ================================================*/
/* ================================================================*/
/*商品總覽---------------------------------*/
.serviceLinkWrap {
  
  margin: 0 auto;
}
.serviceLinkWrap img {
  margin-top: 1rem;
  width: 90%;
}



@media (mix-width: 767px) {
.serviceLinkWrap li {
  width: 50%;
}
}

.serviceLinkWrap li {
  width: 25%;
}

@media (max-width: 1200px) {
  .scroll-container {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto; /* 要有這個才會生效 */
  }
}
.section01 ul.serviceLinkWrap a.serviceLink {
  justify-content: center;
  /* font-weight: bold; */
  background-color: #fff;
  width: 90%;
  height: 90%;
  margin:10px;
  border: 1px solid #aaa;
  /* border-radius: 5rem; */
}
.section01 ul.serviceLinkWrap a.serviceLink:hover {
  background: #232429;
  color:#fff;
  border-radius: 20px;
}

@media (max-width: 768px) {
.section01 ul.serviceLinkWrap a.serviceLink {
width: 90%;
height: 100%;
}

.serviceLinkWrap li {
    width: 50%;
  }
}
/* 最新消息--------------------------------*/
.section03 #rwdnews_list {
  width: 100%;
}

/*其他覆蓋修改 ---------------------------*/
article h2.text-center::before,
article .page-header h2::before {
  border: 6px solid var(--color-main-med);
}

.section01::before {
  display: none;
}

header ul.MAINITEMS a {
  font-weight: bold;
}

header .nav-items {
  background-color: rgba(255, 255, 255, 0.9);
}

/* ================================================================*/
/* Button btn 按鈕 ================================================*/
/* ================================================================*/
/* icon 共通-----------------------------*/
.fa-search {
  color: var(--color-main-med);
}

.qklink li {
  background-color: var(--color-main-dark) !important;
}