@charset "UTF-8";
/* 針對整個網頁的滾動條樣式 */
::-webkit-scrollbar {
  width: 8px;
  /* 設定滾動條的寬度 */
  height: 8px;
  /* 設定滾動條的高度，主要用於橫向滾動條 */
}

/* 針對滾動條的滑塊樣式 */
::-webkit-scrollbar-thumb {
  background-color: #c23752;
  /* 設定滑塊的背景顏色 */
  border-radius: 6px; /* 
設定滑塊的圓角程度 */
}

/* 滑塊在滾動條中的懸停樣式 */
::-webkit-scrollbar-thumb:hover {
  background-color: #9a2c41;
  /* 設定滑塊懸停時的背景顏色 */
}

/* 針對滾動條的軌道樣式 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  /* 設定滾動條軌道的背景顏色 */
  border-radius: 6px;
  /* 設定滾動條軌道的圓角程度 */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  transition: all 0.3s;
}

.eng {
  text-transform: uppercase;
  font-family: sans-serif;
}

.breadcrumb {
  padding: 0 20%;
  padding-top: 10px;
}
.breadcrumb a {
  font-weight: bold;
  color: #c23752;
}
.breadcrumb a:hover {
  color: #732030;
}
@media (max-width: 1024px) {
  .breadcrumb {
    display: none;
  }
}

.mainColor {
  color: #c23752;
}

.sectionTitle {
  text-align: center;
  margin-bottom: 50px;
}
.sectionTitle h2 {
  font-size: 42px;
  letter-spacing: 4px;
}

.pageBanner {
  width: 100%;
  height: 50vh;
  background: url("../img/pic/about.jpg");
  background-position: center 70% !important;
  background-size: cover !important;
  text-align: center;
  place-content: center;
  color: #fff;
  text-shadow: 0px 0px 5px #333;
}
@media (max-width: 1024px) {
  .pageBanner {
    padding-top: 50px;
  }
}
.pageBanner .eng {
  font-size: 28px;
}
.pageBanner h1 {
  font-size: 60px;
  margin: 10px 0;
}
@media (max-width: 1024px) {
  .pageBanner h1 {
    font-size: 42px;
    margin: 5px 0;
  }
}
.pageBanner .bannerText {
  line-height: 1.5;
  letter-spacing: 2px;
}
@media (max-width: 1024px) {
  .pageBanner .bannerText {
    width: 90%;
    margin: 0 auto;
  }
}

#teams {
  margin-bottom: 100px;
}
@media (max-width: 1024px) {
  #teams {
    display: none;
  }
}
#teams .teamsCards {
  width: 60%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 20px;
}
#teams .teamsCards .person {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#teams .teamsCards .person img {
  width: 240px;
  border-radius: 50%;
  border: 10px solid #ccc;
  margin-bottom: 20px;
}
#teams .teamsCards .person h3,
#teams .teamsCards .person h4,
#teams .teamsCards .person p {
  margin-bottom: 5px;
}

#mobileTeams {
  display: none;
  width: 100%;
}
@media (max-width: 1024px) {
  #mobileTeams {
    display: block;
  }
}
#mobileTeams #teamsSwiper {
  height: 400px;
}
#mobileTeams #teamsSwiper .personCard {
  margin: 20px;
}
#mobileTeams #teamsSwiper .personCard img {
  width: 220px;
  border-radius: 50%;
  border: 10px solid #ccc;
  margin-bottom: 20px;
}
#mobileTeams #teamsSwiper .swiper-button-prev,
#mobileTeams #teamsSwiper .swiper-button-next {
  color: #c23752;
}

.feedback {
  margin-top: 100px;
}
.feedback #lineSwiper {
  margin-top: 50px;
  margin-bottom: 50px;
  width: 70%;
}
@media (max-width: 1024px) {
  .feedback #lineSwiper {
    height: 450px;
  }
}
.feedback #lineSwiper .swiper-slide img {
  width: 100%;
  border-radius: 20px;
}
.feedback #lineSwiper .swiper-pagination-bullet {
  background-color: #c23752;
  width: 12px;
  height: 4px;
  border-radius: 4px;
}

#indexCover {
  display: flex;
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
@media (max-width: 1024px) {
  #indexCover {
    flex-direction: column;
    height: 120vh;
  }
}

.left-trapezoid,
.right-trapezoid {
  position: absolute;
  width: 60%;
  height: 100%;
}
@media (max-width: 1024px) {
  .left-trapezoid,
  .right-trapezoid {
    width: 100%;
    height: 60%;
  }
}
.left-trapezoid .blackMask,
.right-trapezoid .blackMask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 80px;
  padding-bottom: 50px;
  padding-left: 50px;
  padding-right: 50px;
}
@media (max-width: 1024px) {
  .left-trapezoid .blackMask,
  .right-trapezoid .blackMask {
    padding-top: 30%;
    padding-bottom: 0px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (max-width: 1024px) {
  .left-trapezoid .blackMask .readMoreBtn,
  .right-trapezoid .blackMask .readMoreBtn {
    position: absolute;
  }
}
.left-trapezoid .blackMask .readMoreBtn a,
.right-trapezoid .blackMask .readMoreBtn a {
  color: #fff;
  font-size: 24px;
}
.left-trapezoid .blackMask .readMoreBtn a:hover,
.right-trapezoid .blackMask .readMoreBtn a:hover {
  color: #c23752;
}

.left-trapezoid {
  top: 0;
  left: 0;
  -webkit-clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%);
  background: url("../img/pic/index_left.jpg");
  background-size: 150%;
  background-position: 45% 0%;
  background-repeat: no-repeat;
  transition: all 0.3s;
}
@media (max-width: 1024px) {
  .left-trapezoid {
    background-position: 30% 0%;
    top: 0;
    left: 0;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 75%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 75%);
    text-align: right;
    background-size: cover;
  }
  .left-trapezoid .readMoreBtn {
    right: 25px;
    bottom: 25%;
  }
}
.left-trapezoid:hover {
  background-size: 170%;
}
@media (max-width: 1024px) {
  .left-trapezoid:hover {
    background-size: cover;
  }
}
.left-trapezoid:hover .blackMask {
  background-color: rgba(0, 0, 0, 0.5);
}

.right-trapezoid {
  top: 0;
  right: 0;
  -webkit-clip-path: polygon(30% 0%, 100% 0%, 100% 100%, 0% 100%);
          clip-path: polygon(30% 0%, 100% 0%, 100% 100%, 0% 100%);
  background: url("../img/pic/index_right.jpg");
  background-size: 150%;
  background-position: 10% 0%;
  background-repeat: no-repeat;
  transition: all 0.3s;
}
@media (max-width: 1024px) {
  .right-trapezoid {
    background-position: 30% 0%;
    top: initial;
    bottom: 0;
    right: 0;
    -webkit-clip-path: polygon(0% 0%, 100% 25%, 100% 100%, 0% 100%);
            clip-path: polygon(0% 0%, 100% 25%, 100% 100%, 0% 100%);
    background-size: cover;
  }
  .right-trapezoid .readMoreBtn {
    left: 20px;
    bottom: 20px;
  }
}
.right-trapezoid .blackMask {
  flex-direction: column-reverse;
  text-align: right;
}
@media (max-width: 1024px) {
  .right-trapezoid .blackMask {
    text-align: left;
    flex-direction: column;
  }
}
.right-trapezoid:hover {
  background-size: 170%;
}
@media (max-width: 1024px) {
  .right-trapezoid:hover {
    background-size: cover;
  }
}
.right-trapezoid:hover .blackMask {
  background-color: rgba(0, 0, 0, 0.5);
}

.coverText {
  height: 100%;
  display: flex;
  flex-direction: column;
  color: #fff;
}
.coverText .eng {
  font-size: 32px;
  letter-spacing: 4px;
}
@media (max-width: 1024px) {
  .coverText .eng {
    display: none;
  }
}
.coverText h1,
.coverText h2 {
  font-size: 72px;
  margin: 10px 0;
  letter-spacing: 2px;
}
@media (max-width: 1024px) {
  .coverText h1,
  .coverText h2 {
    font-size: 24px;
    margin: 0;
    margin-bottom: 5px;
  }
}
.coverText .sloganText {
  font-size: 20px;
  font-weight: bold;
  margin: 5px 0;
  line-height: 1.5;
}
@media (max-width: 1024px) {
  .coverText .sloganText {
    font-size: 16px;
    margin: 0;
    margin-bottom: 5px;
  }
}
.coverText .linkBtns {
  width: 50%;
  margin-top: 10px;
  margin-bottom: 10px;
}
@media (max-width: 1024px) {
  .coverText .linkBtns {
    width: 100%;
  }
}
.coverText .linkBtns a {
  display: inline-block;
  padding: 5px 20px;
  border-radius: 20px;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.3);
}
.coverText .linkBtns a:hover {
  background-color: rgba(194, 55, 82, 0.8);
}
@media (max-width: 1024px) {
  .coverText .linkBtns a {
    padding: 5px;
  }
}
.coverText .coverPhone {
  font-size: 48px;
  letter-spacing: 2px;
  margin: 20px 0;
  color: #fff;
}
.coverText .coverPhone:hover {
  color: #c23752;
}
@media (max-width: 1024px) {
  .coverText .coverPhone {
    margin: 0;
    font-size: 32px;
  }
}

@media (max-width: 1024px) {
  .leftText {
    transform: translateY(-50px);
  }
}
.leftText .linkBtns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 10px;
  -moz-column-gap: 10px;
       column-gap: 10px;
  text-align: center;
}

.rightText {
  flex-direction: column-reverse;
}
@media (max-width: 1024px) {
  .rightText {
    flex-direction: column;
  }
}
.rightText .linkBtns {
  margin-left: auto;
  margin-right: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 10px;
  -moz-column-gap: 10px;
       column-gap: 10px;
  text-align: center;
}
@media (max-width: 1024px) {
  .rightText .linkBtns {
    grid-template-columns: repeat(3, 1fr);
    margin-left: auto;
    margin-right: auto;
    margin: 0 auto;
  }
}

#advantage {
  width: 100%;
  height: 100vh;
  display: flex;
}
@media (max-width: 1024px) {
  #advantage {
    height: auto;
    flex-direction: column;
  }
}
#advantage .advantageBg {
  width: 25%;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  position: relative;
  padding-top: 50px;
  padding-bottom: 50px;
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
}
@media (max-width: 1024px) {
  #advantage .advantageBg {
    width: 100%;
    height: 100vh;
  }
}
#advantage .advantageBg h3 {
  position: absolute;
  bottom: 30%;
  font-size: 62px;
  letter-spacing: 4px;
  writing-mode: vertical-lr;
}
#advantage .advantageBg p {
  width: 80%;
  position: absolute;
  top: 75%;
  bottom: 0;
  letter-spacing: 2px;
}
#advantage .advantage1 {
  background-image: url("../img/pic/4-1.jpg");
}
#advantage .advantage2 {
  background-image: url("../img/pic/4-2.jpg");
}
#advantage .advantage3 {
  background-image: url("../img/pic/4-3.jpg");
}
#advantage .advantage4 {
  background-image: url("../img/pic/4-4.jpg");
}

#commitment {
  width: 100%;
  height: 100vh;
  background-image: url("../img/pic/index3.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden;
}
#commitment .blackMask {
  width: 60%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  -webkit-clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%);
}
@media (max-width: 1024px) {
  #commitment .blackMask {
    width: 100%;
    -webkit-clip-path: polygon(0 0%, 100% 100%, 100% 100%, 0% 100%);
            clip-path: polygon(0 0%, 100% 100%, 100% 100%, 0% 100%);
  }
}
#commitment .contentText {
  position: absolute;
  top: 50%;
  left: 10%;
  z-index: 1;
  transform: translateY(-50%);
  text-align: center;
  color: #fff;
}
@media (max-width: 1024px) {
  #commitment .contentText {
    width: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
@media (max-width: 1024px) {
  #commitment .contentText img {
    display: none;
  }
}
#commitment .contentText h2 {
  font-size: 62px;
  margin-bottom: 10px;
}
@media (max-width: 1024px) {
  #commitment .contentText h2 {
    font-size: 46px;
  }
}
#commitment .contentText .eng {
  font-size: 42px;
  margin-bottom: 10px;
}
@media (max-width: 1024px) {
  #commitment .contentText .eng {
    font-size: 20px;
  }
}
#commitment .contentText .desc {
  width: 500px;
}
@media (max-width: 1024px) {
  #commitment .contentText .desc {
    width: 100%;
    text-shadow: 0px 0px 3px #000;
  }
}

#choose {
  width: 100%;
  height: 100vh;
  background-image: url("../img/pic/index4.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden;
}
#choose .blackMask {
  width: 60%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  right: 0;
  -webkit-clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
          clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
}
@media (max-width: 1024px) {
  #choose .blackMask {
    width: 100%;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 100%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 100%);
  }
}
#choose .contentText {
  position: absolute;
  top: 50%;
  right: 10%;
  z-index: 1;
  transform: translateY(-50%);
  text-align: center;
  color: #fff;
}
@media (max-width: 1024px) {
  #choose .contentText {
    width: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
@media (max-width: 1024px) {
  #choose .contentText img {
    display: none;
  }
}
#choose .contentText h2 {
  font-size: 62px;
  margin-bottom: 10px;
}
@media (max-width: 1024px) {
  #choose .contentText h2 {
    font-size: 42px;
  }
}
#choose .contentText .eng {
  font-size: 42px;
  margin-bottom: 10px;
}
@media (max-width: 1024px) {
  #choose .contentText .eng {
    font-size: 20px;
  }
}
#choose .contentText .desc {
  width: 500px;
}
@media (max-width: 1024px) {
  #choose .contentText .desc {
    width: 100%;
    text-shadow: 0px 0px 3px #000;
  }
}

footer {
  width: 100%;
  padding-top: 50px;
  background: url("../img/pic/footer.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  text-align: center;
  color: #fff;
}
footer .footerContent {
  padding-bottom: 50px;
}
footer .footerContent p {
  font-size: 28px;
  margin-bottom: 10px;
}
@media (max-width: 1024px) {
  footer .footerContent p {
    font-size: 18px;
  }
}
footer .copyright {
  width: 100%;
  background-color: #aaa;
  display: flex;
  padding: 5px;
  position: relative;
}
@media (max-width: 1024px) {
  footer .copyright {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    padding: 10px;
    padding-bottom: 60px;
  }
}
footer .copyright .pact a {
  font-size: 12px;
  color: #c23752;
  border-left: 1px solid #c23752;
  padding: 0 2px;
}
footer .copyright .pact a:first-child {
  border-left: none;
}
footer .copyright .info {
  font-size: 14px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
}
footer .copyright .info br {
  display: none;
}
@media (max-width: 1024px) {
  footer .copyright .info {
    position: relative;
    left: 0%;
    transform: translateX(0%);
    display: block;
  }
  footer .copyright .info br {
    display: block;
  }
}
footer .copyright .info img {
  width: 50px;
  margin: 0 2px;
}
footer .copyright .info a {
  margin-left: 2px;
  font-weight: bold;
  color: #c23752;
}

@media (max-width: 1024px) {
  .serFooter .copyright {
    padding-bottom: 10px;
  }
}

.pageContent {
  width: 50%;
  padding: 100px 0;
  margin: 0 auto;
}
@media (max-width: 1024px) {
  .pageContent {
    width: 90%;
    padding-top: 50px;
    padding-bottom: 100px;
  }
}
.pageContent h2 {
  color: #c23752;
  margin-bottom: 20px;
}
.pageContent ol {
  margin-bottom: 20px;
}
.pageContent ol li {
  margin-left: 20px;
  margin-bottom: 10px;
}
.pageContent p {
  margin-bottom: 20px;
}
.pageContent .mainText {
  text-align: center;
  color: #c23752;
  font-weight: bold;
  font-size: 24px;
  letter-spacing: 2px;
}

.articlesIndexBox {
  padding: 0 20%;
  padding-bottom: 100px;
}
@media (max-width: 1024px) {
  .articlesIndexBox {
    padding: 0;
    padding-bottom: 50px;
  }
}
.articlesIndexBox .articlesIndex .articleBox {
  border-left: 5px solid #c23752;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #e59896;
  padding: 20px;
  margin: 20px 0;
  box-shadow: 3px 3px 3px #ccc;
  position: relative;
}
.articlesIndexBox .articlesIndex .articleBox:nth-child(odd) {
  background-color: #fcefef;
}
.articlesIndexBox .articlesIndex .articleBox .articleNumber {
  color: #c23752;
  font-size: 28px;
  font-weight: bold;
  margin-right: 30px;
}
@media (max-width: 1024px) {
  .articlesIndexBox .articlesIndex .articleBox .articleNumber {
    margin-right: 10px;
  }
}
.articlesIndexBox .articlesIndex .articleBox .articlePreview {
  justify-self: flex-start;
}
.articlesIndexBox .articlesIndex .articleBox .articlePreview .articleTitle {
  color: #000;
  font-size: 24px;
}
@media (max-width: 1024px) {
  .articlesIndexBox .articlesIndex .articleBox .articlePreview .articleTitle {
    font-size: 18px;
    padding-right: 10px;
  }
}
.articlesIndexBox .articlesIndex .articleBox .articlePreview .articlePart {
  color: #000;
}
@media (max-width: 1024px) {
  .articlesIndexBox .articlesIndex .articleBox .articlePreview .articlePart {
    display: none;
  }
}
.articlesIndexBox .articlesIndex .articleBox .rightArrowIcon {
  position: absolute;
  right: 10px;
}
.articlesIndexBox .articlesIndex .articleBox .rightArrowIcon i {
  color: #c23752;
  font-size: 28px;
}

.pagination {
  margin-top: 50px;
  text-align: center;
}
.pagination button {
  margin: 0 10px;
  padding: 10px;
  font-size: 16px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}
.pagination button.active {
  color: #fff;
  background-color: #c23752;
}

.caseIndexText {
  text-align: center;
  margin: 50px 0;
}
@media (max-width: 1024px) {
  .caseIndexText {
    padding: 0 5%;
  }
  .caseIndexText br {
    display: none;
  }
}

#articleContent {
  padding: 50px 20%;
  padding-bottom: 50px;
}
@media (max-width: 1024px) {
  #articleContent {
    padding: 50px 5%;
  }
}
#articleContent h2 {
  color: #c23752;
  margin-bottom: 10px;
  font-size: 24px;
}
#articleContent h3 {
  color: #c23752;
  margin-bottom: 10px;
}
#articleContent p {
  margin-bottom: 20px;
}
#articleContent ol,
#articleContent ul {
  list-style: none;
}

.backCaseIndex {
  margin-bottom: 100px;
  text-align: center;
}
.backCaseIndex a {
  font-size: 20px;
  color: #fff;
  background: #999;
  padding: 10px 20px;
  border-radius: 20px;
}
.backCaseIndex a:hover {
  background: #c23752;
}

.priceTopText {
  padding: 50px 0;
  width: 50%;
  margin: 0 auto;
}
@media (max-width: 1024px) {
  .priceTopText {
    width: 90%;
  }
}
.priceTopText p {
  margin-bottom: 20px;
}

.feeList {
  width: 80%;
  margin: 0 auto;
  margin-bottom: 100px;
}
@media (max-width: 1024px) {
  .feeList {
    width: 100%;
  }
}

.chargeContainer {
  max-width: 1280px;
  padding-bottom: 150px;
}
@media (max-width: 768px) {
  .chargeContainer {
    padding: 0;
    padding-bottom: 50px;
  }
}

.priceCategoryTitle {
  font-size: 24px;
  color: #c23752;
  text-align: center;
  font-weight: bolder;
  letter-spacing: 4px;
  margin-top: 60px;
  margin-bottom: 30px;
}
@media (max-width: 768px) {
  .priceCategoryTitle {
    display: none;
  }
}

.priceTable {
  border-spacing: 5px;
  border-collapse: separate;
}
@media (max-width: 768px) {
  .priceTable {
    display: none;
  }
}
.priceTable th,
.priceTable td {
  font-size: 16px;
  font-weight: 300;
  border-radius: 5px;
  padding: 12px;
  border: none;
}
.priceTable thead {
  background: #e59896;
}
.priceTable thead th {
  text-align: center;
  color: #fff;
  font-weight: bolder;
  box-shadow: 0px 0px 3px #666;
}
.priceTable thead th:nth-child(1) {
  width: 15%;
}
.priceTable thead th:nth-child(2) {
  width: 10%;
}
.priceTable thead th:nth-child(3) {
  width: 10%;
}
.priceTable thead th:nth-child(4) {
  width: 37%;
}
.priceTable thead th:nth-child(5) {
  width: 28%;
}
.priceTable tbody tr:nth-child(n) {
  background: #fff;
}
.priceTable tbody tr:nth-child(2n) {
  background: #ebebeb;
}
.priceTable tbody td:nth-child(1) a {
  color: #c23752;
  font-weight: bold;
}
.priceTable tbody td:nth-child(1) a:hover {
  color: #e59896;
}
.priceTable tbody td:nth-child(1),
.priceTable tbody td:nth-child(2),
.priceTable tbody td:nth-child(3) {
  text-align: center;
}
.priceTable tbody td {
  box-shadow: 1px 1px 3px #ccc;
}

@media (max-width: 768px) {
  .pcPriceText {
    display: none;
  }
}

@media (max-width: 768px) {
  .chargeText {
    padding: 0 10%;
  }
}

.priceCategoryBtn {
  display: none;
  text-align: center;
  background: #c23752;
  color: #fff;
  font-weight: bolder;
  padding: 10px 0;
  border-radius: 20px;
}
@media (max-width: 768px) {
  .priceCategoryBtn {
    display: block;
  }
}

#m-charge01,
#m-charge02,
#m-charge03,
#m-charge04,
#m-charge05,
#m-charge06,
#m-charge07,
#m-charge08 {
  display: none;
}
@media (max-width: 768px) {
  #m-charge01,
  #m-charge02,
  #m-charge03,
  #m-charge04,
  #m-charge05,
  #m-charge06,
  #m-charge07,
  #m-charge08 {
    display: initial;
  }
  #m-charge01 .accordion-item,
  #m-charge02 .accordion-item,
  #m-charge03 .accordion-item,
  #m-charge04 .accordion-item,
  #m-charge05 .accordion-item,
  #m-charge06 .accordion-item,
  #m-charge07 .accordion-item,
  #m-charge08 .accordion-item {
    border: none;
    margin: 10px 0;
    padding: 0px;
  }
  #m-charge01 .accordion-item:nth-child(even) .accordion-header,
  #m-charge02 .accordion-item:nth-child(even) .accordion-header,
  #m-charge03 .accordion-item:nth-child(even) .accordion-header,
  #m-charge04 .accordion-item:nth-child(even) .accordion-header,
  #m-charge05 .accordion-item:nth-child(even) .accordion-header,
  #m-charge06 .accordion-item:nth-child(even) .accordion-header,
  #m-charge07 .accordion-item:nth-child(even) .accordion-header,
  #m-charge08 .accordion-item:nth-child(even) .accordion-header {
    background: #ebebeb;
  }
  #m-charge01 .accordion-item .accordion-header,
  #m-charge02 .accordion-item .accordion-header,
  #m-charge03 .accordion-item .accordion-header,
  #m-charge04 .accordion-item .accordion-header,
  #m-charge05 .accordion-item .accordion-header,
  #m-charge06 .accordion-item .accordion-header,
  #m-charge07 .accordion-item .accordion-header,
  #m-charge08 .accordion-item .accordion-header {
    font-size: 30px;
    margin: 0;
    padding: 0;
    background: #e59896;
  }
  #m-charge01 .accordion-item .accordion-header .accordion-button,
  #m-charge02 .accordion-item .accordion-header .accordion-button,
  #m-charge03 .accordion-item .accordion-header .accordion-button,
  #m-charge04 .accordion-item .accordion-header .accordion-button,
  #m-charge05 .accordion-item .accordion-header .accordion-button,
  #m-charge06 .accordion-item .accordion-header .accordion-button,
  #m-charge07 .accordion-item .accordion-header .accordion-button,
  #m-charge08 .accordion-item .accordion-header .accordion-button {
    display: block;
    text-align: center;
    font-size: 22px;
    letter-spacing: 0;
    text-indent: 0;
    direction: ltr;
    background: transparent;
    margin: 0 auto;
    padding: 15px;
    color: #000;
    position: relative;
  }
  #m-charge01 .accordion-item .accordion-header .accordion-button::after,
  #m-charge02 .accordion-item .accordion-header .accordion-button::after,
  #m-charge03 .accordion-item .accordion-header .accordion-button::after,
  #m-charge04 .accordion-item .accordion-header .accordion-button::after,
  #m-charge05 .accordion-item .accordion-header .accordion-button::after,
  #m-charge06 .accordion-item .accordion-header .accordion-button::after,
  #m-charge07 .accordion-item .accordion-header .accordion-button::after,
  #m-charge08 .accordion-item .accordion-header .accordion-button::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    right: 10%;
  }
  #m-charge01 .accordion-item .accordion-body,
  #m-charge02 .accordion-item .accordion-body,
  #m-charge03 .accordion-item .accordion-body,
  #m-charge04 .accordion-item .accordion-body,
  #m-charge05 .accordion-item .accordion-body,
  #m-charge06 .accordion-item .accordion-body,
  #m-charge07 .accordion-item .accordion-body,
  #m-charge08 .accordion-item .accordion-body {
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
  }
  #m-charge01 .accordion-item .accordion-body .list-box,
  #m-charge02 .accordion-item .accordion-body .list-box,
  #m-charge03 .accordion-item .accordion-body .list-box,
  #m-charge04 .accordion-item .accordion-body .list-box,
  #m-charge05 .accordion-item .accordion-body .list-box,
  #m-charge06 .accordion-item .accordion-body .list-box,
  #m-charge07 .accordion-item .accordion-body .list-box,
  #m-charge08 .accordion-item .accordion-body .list-box {
    border: 1px solid #999;
    text-align: left;
    background: #fff;
    border-radius: 10px;
    margin: 10px 0;
    box-shadow: 1px 1px 2px 1px #ccc;
  }
  #m-charge01 .accordion-item .accordion-body .list-box h5,
  #m-charge02 .accordion-item .accordion-body .list-box h5,
  #m-charge03 .accordion-item .accordion-body .list-box h5,
  #m-charge04 .accordion-item .accordion-body .list-box h5,
  #m-charge05 .accordion-item .accordion-body .list-box h5,
  #m-charge06 .accordion-item .accordion-body .list-box h5,
  #m-charge07 .accordion-item .accordion-body .list-box h5,
  #m-charge08 .accordion-item .accordion-body .list-box h5 {
    font-size: 16px;
    font-weight: 600;
    padding-left: 10px;
    padding-top: 10px;
  }
  #m-charge01 .accordion-item .accordion-body .list-box p,
  #m-charge02 .accordion-item .accordion-body .list-box p,
  #m-charge03 .accordion-item .accordion-body .list-box p,
  #m-charge04 .accordion-item .accordion-body .list-box p,
  #m-charge05 .accordion-item .accordion-body .list-box p,
  #m-charge06 .accordion-item .accordion-body .list-box p,
  #m-charge07 .accordion-item .accordion-body .list-box p,
  #m-charge08 .accordion-item .accordion-body .list-box p {
    font-size: 16px;
    padding: 0;
    margin: 0;
    padding-left: 10px;
    padding-bottom: 10px;
  }
  #m-charge01 .accordion-item .accordion-body .serLinkBox,
  #m-charge02 .accordion-item .accordion-body .serLinkBox,
  #m-charge03 .accordion-item .accordion-body .serLinkBox,
  #m-charge04 .accordion-item .accordion-body .serLinkBox,
  #m-charge05 .accordion-item .accordion-body .serLinkBox,
  #m-charge06 .accordion-item .accordion-body .serLinkBox,
  #m-charge07 .accordion-item .accordion-body .serLinkBox,
  #m-charge08 .accordion-item .accordion-body .serLinkBox {
    text-align: center;
    display: block;
    margin-top: 10px;
    padding: 10px;
    font-size: 18px;
    background: #c23752;
    color: #fff;
  }
  #m-charge01 .accordion-item .accordion-button:not(.collapsed),
  #m-charge02 .accordion-item .accordion-button:not(.collapsed),
  #m-charge03 .accordion-item .accordion-button:not(.collapsed),
  #m-charge04 .accordion-item .accordion-button:not(.collapsed),
  #m-charge05 .accordion-item .accordion-button:not(.collapsed),
  #m-charge06 .accordion-item .accordion-button:not(.collapsed),
  #m-charge07 .accordion-item .accordion-button:not(.collapsed),
  #m-charge08 .accordion-item .accordion-button:not(.collapsed) {
    display: block;
    color: #fff;
    background-color: #c23752;
  }
  #m-charge01 .accordion-item .accordion-button:not(.collapsed)::after,
  #m-charge02 .accordion-item .accordion-button:not(.collapsed)::after,
  #m-charge03 .accordion-item .accordion-button:not(.collapsed)::after,
  #m-charge04 .accordion-item .accordion-button:not(.collapsed)::after,
  #m-charge05 .accordion-item .accordion-button:not(.collapsed)::after,
  #m-charge06 .accordion-item .accordion-button:not(.collapsed)::after,
  #m-charge07 .accordion-item .accordion-button:not(.collapsed)::after,
  #m-charge08 .accordion-item .accordion-button:not(.collapsed)::after {
    transform: translateY(-50%) rotate(180deg);
  }
  #m-charge01 .accordion-item .accordion-button:focus,
  #m-charge02 .accordion-item .accordion-button:focus,
  #m-charge03 .accordion-item .accordion-button:focus,
  #m-charge04 .accordion-item .accordion-button:focus,
  #m-charge05 .accordion-item .accordion-button:focus,
  #m-charge06 .accordion-item .accordion-button:focus,
  #m-charge07 .accordion-item .accordion-button:focus,
  #m-charge08 .accordion-item .accordion-button:focus {
    box-shadow: none;
  }
}

.servicePageBanner {
  width: 100%;
  height: 70vh;
  background-position: center 70% !important;
  background-size: cover !important;
  text-align: center;
  place-content: center;
  color: #fff;
  text-shadow: 0px 0px 5px #333;
}
@media (max-width: 1024px) {
  .servicePageBanner {
    height: auto;
    padding-top: 80px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
  }
}
.servicePageBanner .eng {
  font-size: 28px;
}
@media (max-width: 1024px) {
  .servicePageBanner .eng {
    display: none;
  }
}
.servicePageBanner h1 {
  font-size: 60px;
  margin: 10px 0;
}
@media (max-width: 1024px) {
  .servicePageBanner h1 {
    font-size: 36px;
  }
}
.servicePageBanner .bannerText {
  line-height: 1.5;
  letter-spacing: 2px;
}
@media (max-width: 1024px) {
  .servicePageBanner .bannerText {
    width: 100%;
    margin-bottom: 50px;
  }
  .servicePageBanner .bannerText br {
    display: none;
  }
}

.bannerContent {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media (max-width: 1024px) {
  .bannerContent {
    position: relative;
    top: 0;
    left: 0;
    transform: translate(0%, 0%);
  }
}

.serviceLinks {
  position: absolute;
  bottom: 30%;
  left: 0;
  width: 100%;
  display: grid;
}
.serviceLinks i {
  display: none;
}
@media (max-width: 1024px) {
  .serviceLinks {
    position: relative;
    top: 0;
    left: 0;
    bottom: initial;
  }
  .serviceLinks a {
    position: relative;
  }
  .serviceLinks a i {
    display: none;
  }
}

#severTies {
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}
@media (max-width: 1024px) {
  #severTies {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}
#severTies a {
  place-content: center;
  color: #fff;
  display: block;
  height: 60px;
  font-size: 28px;
  background: rgba(0, 0, 0, 0.66);
}
#severTies a:hover {
  background: rgba(255, 255, 255, 0.36);
}
@media (max-width: 1024px) {
  #severTies a {
    height: auto;
    font-size: 18px;
    padding: 10px 5px;
    border-radius: 10px;
  }
}

#repairRelationship {
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}
@media (max-width: 1024px) {
  #repairRelationship {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}
#repairRelationship a {
  place-content: center;
  color: #fff;
  display: block;
  height: 80px;
  font-size: 32px;
  background: rgba(194, 55, 82, 0.5);
}
#repairRelationship a:hover {
  background: rgba(194, 55, 82, 0.9);
}
@media (max-width: 1024px) {
  #repairRelationship a {
    height: auto;
    font-size: 18px;
    padding: 10px 5px;
    border-radius: 10px;
  }
}

#otherService {
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}
@media (max-width: 1024px) {
  #otherService {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}
#otherService a {
  place-content: center;
  color: #fff;
  display: block;
  height: 60px;
  font-size: 20px;
  background: rgba(255, 255, 255, 0.3);
}
#otherService a:hover {
  background: rgba(255, 255, 255, 0.1);
}
@media (max-width: 1024px) {
  #otherService a {
    height: auto;
    font-size: 16px;
    padding: 10px 5px;
    border-radius: 10px;
    flex-wrap: wrap;
  }
}

#serviceArticle {
  width: 50%;
  margin: 100px auto;
}
@media (max-width: 1024px) {
  #serviceArticle {
    width: 90%;
    margin: 50px auto;
  }
}
#serviceArticle .articleTitle {
  text-align: center;
  margin-bottom: 50px;
  color: #c23752;
}
#serviceArticle .articleTitle h4 {
  font-size: 60px;
  letter-spacing: 6px;
  margin-bottom: 10px;
}
@media (max-width: 1024px) {
  #serviceArticle .articleTitle h4 {
    font-size: 36px;
  }
}
#serviceArticle .articleTitle .eng {
  font-size: 28px;
}
@media (max-width: 1024px) {
  #serviceArticle .articleTitle .eng {
    font-size: 20px;
  }
}
#serviceArticle h2,
#serviceArticle h3 {
  color: #c23752;
  margin-top: 20px;
  margin-bottom: 20px;
}
#serviceArticle h2 {
  text-align: center;
  font-size: 36px;
}
@media (max-width: 1024px) {
  #serviceArticle h2 {
    font-size: 26px;
  }
}
#serviceArticle p {
  margin-bottom: 10px;
}
#serviceArticle li {
  margin-left: 20px;
}

#serviceArticleContent {
  width: 60%;
  margin: 0 auto;
}
@media (max-width: 1024px) {
  #serviceArticleContent {
    width: 90%;
  }
}
#serviceArticleContent > h2 {
  text-align: center;
  font-size: 60px;
  margin-bottom: 50px;
}
@media (max-width: 1024px) {
  #serviceArticleContent > h2 {
    font-size: 42px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
}
#serviceArticleContent .articleContentText h2 {
  color: #c23752;
  font-size: 24px;
  margin-bottom: 20px;
}
#serviceArticleContent .articleContentText h3 {
  color: #c23752;
  margin-top: 10px;
  margin-bottom: 20px;
}
#serviceArticleContent .articleContentText li {
  margin-left: 20px;
  color: #c23752;
  margin-bottom: 10px;
}
#serviceArticleContent .articleContentText p {
  margin-bottom: 10px;
}

.servicePageFAQs {
  width: 1000px;
  margin: 0 auto;
}
@media (max-width: 1024px) {
  .servicePageFAQs {
    width: 100%;
    padding: 5% 0;
  }
}
.servicePageFAQs h2 {
  text-align: center;
  color: #c23752;
  font-size: 36px;
  margin: 30px 0;
}
.servicePageFAQs .faqList .faqItem:nth-child(even) .faqQuestion {
  background: #df5a75;
}
.servicePageFAQs .faqList .faqItem .faqQuestion {
  text-align: left;
  width: 100%;
  margin-bottom: 10px;
  border: none;
  font-size: 20px;
  padding: 10px;
  padding-left: 20px;
  padding-right: 50px;
  border-radius: 10px;
  color: #fff;
  font-weight: bold;
  background: #c23752;
  position: relative;
  cursor: pointer;
}
@media (max-width: 1024px) {
  .servicePageFAQs .faqList .faqItem .faqQuestion {
    font-size: 16px;
  }
}
.servicePageFAQs .faqList .faqItem .faqQuestion i {
  position: absolute;
  top: 30%;
  right: 20px;
  transform: translateY(-50%);
  font-size: 30px;
}
@media (max-width: 1024px) {
  .servicePageFAQs .faqList .faqItem .faqQuestion i {
    font-size: 22px;
  }
}
.servicePageFAQs .faqList .faqItem .faqAnswer {
  padding-left: 20px;
  padding-right: 20px;
}
.servicePageFAQs .faqList .faqItem .faqAnswer p {
  margin-bottom: 10px;
  line-height: 1.5;
  letter-spacing: 2px;
}
.servicePageFAQs .faqList .faqItem .faqAnswer ul,
.servicePageFAQs .faqList .faqItem .faqAnswer ol {
  margin-left: 20px;
}
.servicePageFAQs .faqList .faqItem .faqAnswer ul li,
.servicePageFAQs .faqList .faqItem .faqAnswer ol li {
  margin-bottom: 10px;
  line-height: 1.5;
  letter-spacing: 2px;
}
.servicePageFAQs .faqList .faqItem .faqAnswer strong {
  color: #c23752;
}

#navbar {
  position: fixed;
  width: 100%;
  z-index: 9;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0px 0.5px 0.1px 0.1px #666;
  height: 60px;
}
@media (max-width: 1024px) {
  #navbar {
    display: none;
  }
}
#navbar .logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#navbar .logo img {
  width: 150px;
}
#navbar .openMenuBtn {
  position: absolute;
  top: 50%;
  right: 0%;
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: all 0.5s;
}
#navbar .openMenuBtn img {
  width: 40px;
  cursor: pointer;
}
#navbar .openMenuBtn.active {
  top: -50%;
}
#navbar .closeMenuBtn {
  position: absolute;
  top: 50%;
  right: -5%;
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: all 0.5s;
}
#navbar .closeMenuBtn img {
  width: 15px;
  cursor: pointer;
}
#navbar .closeMenuBtn.active {
  right: 1%;
}
#navbar .menuContent {
  position: absolute;
  top: -50%;
  right: 0%;
  transform: translate(-15%, -50%);
  transition: all 0.5s;
}
#navbar .menuContent a {
  font-size: 18px;
  color: #c23752;
  margin-right: 8px;
  font-weight: bold;
}
#navbar .menuContent a:hover {
  color: #732030;
}
#navbar .menuContent.active {
  top: 50%;
}

#mobileNavbar {
  display: none;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 12;
  padding: 10px 5px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 1px 0px 3px #666;
  justify-content: center;
  align-items: center;
}
@media (max-width: 1024px) {
  #mobileNavbar {
    display: flex;
  }
}
#mobileNavbar .logo a img {
  width: 150px;
}
#mobileNavbar .openMenuBtn {
  position: absolute;
  top: 50%;
  right: 0px;
  transform: translate(-20%, -50%);
  transition: all 0.3s;
}
#mobileNavbar .openMenuBtn img {
  width: 40px;
}
#mobileNavbar .openMenuBtn.active {
  top: -100%;
}
#mobileNavbar .closeMenuBtn {
  position: absolute;
  top: 50%;
  right: -100%;
  transform: translate(-50%, -50%);
  transition: all 0.3s;
}
#mobileNavbar .closeMenuBtn.active {
  right: 10px;
}

#mobileMenu {
  display: none;
}
@media (max-width: 1024px) {
  #mobileMenu {
    width: 100%;
    background: url(../img/menu/menu_bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 64px;
    z-index: 12;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s;
  }
}
#mobileMenu .serviceBox {
  width: 100%;
  height: calc((100vh - 64px) / 7);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 28px;
  letter-spacing: 2px;
  text-shadow: 0px 0px 3px #666;
  transition: all 0.3s;
  position: relative;
}
#mobileMenu .serviceBox:nth-child(even) {
  transform: translateX(-100%);
  background: rgba(255, 255, 255, 0.3);
}
#mobileMenu .serviceBox:nth-child(odd) {
  transform: translateX(100%);
}
#mobileMenu .serviceBox span {
  display: block;
  margin-bottom: 5px;
}
#mobileMenu .serviceBox span.eng {
  font-size: 12px;
}

.mobileMenuPacts {
  height: calc((100vh - 64px) / 7);
  display: flex;
  align-items: center;
}
.mobileMenuPacts a {
  color: #fff;
  padding: 0 10px;
  border-left: 1px solid #fff;
}
.mobileMenuPacts a:first-child {
  border-left: none;
}

#mobileMenu.active {
  visibility: visible;
  opacity: 1;
}
#mobileMenu.active .serviceBox:nth-child(even) {
  transform: translateX(0%);
}
#mobileMenu.active .serviceBox:nth-child(odd) {
  transform: translateX(0%);
}

.lineBtn {
  display: inline-block;
  position: fixed;
  left: 0;
  bottom: 100px;
  z-index: 10;
  background-color: #54b538;
  padding: 5px;
  border-radius: 40% 40% 40% 0%;
  box-shadow: 0px 0px 5px 0.3px #666;
}
.lineBtn img {
  width: 30px;
}

.phoneBtn {
  display: inline-block;
  position: fixed;
  right: 0;
  z-index: 10;
  background: #c23752;
  padding: 5px 15px;
  color: #fff;
  border-radius: 15px 15px 0% 15px;
  box-shadow: 0px 0px 5px 0.3px #666;
}
@media (max-width: 1024px) {
  .phoneBtn {
    display: none;
  }
}
.phoneBtn img {
  width: 20px;
  margin-right: 2px;
}
.phoneBtn div:first-child {
  display: flex;
  align-items: center;
  font-size: 14px;
}
.phoneBtn div:last-child {
  text-align: center;
  font-size: 18px;
}

.phone_1 {
  bottom: 160px;
}

.phone_2 {
  bottom: 100px;
}

.phone_3 {
  bottom: 40px;
}

.phone_4 {
  bottom: 100px;
}

.bottomFixedBtn {
  display: none;
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 9;
  background: #c23752;
  grid-template-columns: repeat(3, 1fr);
  -moz-column-gap: 5px;
       column-gap: 5px;
  place-content: center;
  padding: 5px 0;
}
@media (max-width: 1024px) {
  .bottomFixedBtn {
    display: grid;
  }
}
.bottomFixedBtn .phoneLink {
  color: #fff;
  border-left: 1px solid #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.bottomFixedBtn .phoneLink:first-child {
  border: none;
}
.bottomFixedBtn .phoneLink div img {
  width: 18px;
}
.bottomFixedBtn .phoneLink div:first-child {
  display: flex;
  align-items: center;
}

.onePhone {
  display: none;
}
@media (max-width: 1024px) {
  .onePhone {
    display: block;
  }
}
.onePhone .phoneBtn {
  display: inline-block;
}/*# sourceMappingURL=main.css.map */