@charset "UTF-8";
/*
 *
 * JSL Case Style
 * Author: KumaChen
 * 本檔案可作客製化作業
 * 可直接繼承 viewModel 內樣式使用
 *
*/
/* ------ */
.color_A48747 {
  color: #a48747 !important;
}

.color_9D7447,
.pc_color_9D7447 {
  color: #9d7447 !important;
}

.white {
  color: #fff !important;
}

.noteBody {
  background-color: rgba(35, 24, 21, 0.5) !important;
}

/* ------ */
.webNav .logo a img {
  height: 65px !important;
  -o-object-position: 50% 50% !important;
     object-position: 50% 50% !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
}

/* ------ */
.menu nav ul li a {
  margin: 0 0.5vw !important;
  color: #fff !important;
}
.menu nav ul li a:hover {
  border-bottom: 4px solid #a58f68 !important;
  color: #a58f68 !important;
}
.menu nav ul li.active a {
  color: #a58f68 !important;
  border-bottom: 4px solid #a58f68 !important;
}
.menu nav .rightNav .phone_txt {
  color: #f9f600 !important;
}
.menu nav .rightNav .btn_menu .act_btn_menu .line {
  background-color: #fff !important;
}
.menu nav .rightNav .btn a svg {
  color: #fff;
}

.activeMenuFloatStatus {
  background-color: #000 !important;
}

a.baseURL {
  display: flex;
  flex-direction: row;
  align-items: center !important;
  color: #000;
}
a.baseURL i {
  padding-top: 0.3em;
}

.bodyPage .webNav {
  background-color: #000 !important;
}

/* ------ */
/* ------ */
footer .caseInfo {
  background: rgba(18, 16, 90, 0.8117647059) linear-gradient(180deg, rgba(29, 23, 12, 0.0509803922) 0%, rgba(18, 16, 90, 0.8117647059) 100%) 0% 0% no-repeat padding-box;
}

/* ------ */
/* ------ */
.keyVision .fullBg {
  min-height: 53vw;
  background-image: url("/case_assets/tgf250184/assets/images/sample/pc01.jpg?v=2503031057");
  background-repeat: no-repeat;
  background-size: cover;
}
.keyVision .video {
  padding-bottom: 53.25% !important;
}
.keyVision .video:before {
  position: absolute;
  display: block;
  content: "\611B\5C71\6797\884C\92B7";
  left: 1%;
  top: 1%;
  color: #000;
}

/* ------ */
.btn-more.center {
  margin: 1.5vw auto 0;
}

.btn_more {
  padding: 0.75vw 2.5vw;
  color: #fff;
  background-color: rgba(69, 74, 68, 0.5019607843);
  border-radius: 0.5vw;
  display: inline-block;
  box-sizing: border-box;
  margin: 0.5vw 0 0.35vw;
  font-size: 1vw;
  line-height: 1;
}
@media (max-width: 768px) {
  .btn_more {
    padding: 3vw 5vw;
    border-radius: 2vw;
    margin: 3vw 0 0.5vw;
    font-size: 4vw;
  }
}

@media (max-width: 768px) {
  .mob_max_content {
    width: -moz-max-content;
    width: max-content;
    margin: 0 auto;
  }
}

.swiper-pagination-bullet {
  width: 0.55vw !important;
  height: 0.55vw !important;
  background: #c7c4c4 !important;
  margin: 0 0.25vw !important;
  opacity: 1 !important;
}

.swiper-pagination-bullet-active {
  background-color: #ffc400 !important;
}

.fullRegion.txtRowRegion.boxMode .txt {
  padding: 1.5vw 0 4vw;
}

.strongColor {
  color: #775f2a;
}

.introStyle, .subPage {
  background-image: url("/case_assets/tgf250184/assets/images/sample/pc_bg1.jpg?v=2503031057");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}
.introStyle .txt, .subPage .txt {
  position: relative !important;
  margin-bottom: 1vw;
}
.introStyle .txt h1, .subPage .txt h1 {
  color: #505050 !important;
  font-size: 2.2vw;
  font-weight: 1000 !important;
  font-family: "Noto Serif TC", serif;
}
.introStyle .txt p, .subPage .txt p {
  color: #505050 !important;
}
@media (max-width: 768px) {
  .introStyle .txt, .subPage .txt {
    margin-bottom: 2vw;
  }
}

#intro3 .txt .body {
  margin: auto;
  position: relative;
}
#intro3 .txt .body:before {
  position: absolute;
  content: "";
  display: block;
  background-image: url("/case_assets/tgf250184/assets/images/sample/icon01.png?v=2503031057");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50% 50%;
  top: 0;
  left: -17vw;
  width: 15vw;
  height: 34vw;
}
@media (max-width: 768px) {
  #intro3 .txt .body:before {
    top: unset;
    bottom: -42vw;
    left: 50%;
    width: 30vw;
    height: 40vw;
    transform: translateX(-50%);
  }
}

#intro5 {
  padding-bottom: 1vw;
}
#intro5 .img .txt2 {
  width: 100%;
  position: absolute;
  top: 43vw;
}
#intro5 .img .txt2 ul.body {
  width: 100%;
  box-sizing: border-box;
  padding: 2vw;
  display: flex;
  justify-content: space-evenly;
}
#intro5 .img .txt2 ul.body li {
  display: flex;
  flex-direction: column;
}
#intro5 .img .txt2 ul.body li p {
  font-size: 1vw;
  color: #505050;
}
#intro5 .img .txt2 ul.body li p .strongColor {
  margin-right: 0.5vw;
}
#intro5 .img .txt2 ul.body li p:nth-child(1) {
  border-bottom: 1px solid #775f2a;
}
#intro5 .img .txt2 ul.body li p:nth-child(2) {
  padding-top: 0.3em;
}
@media (max-width: 768px) {
  #intro5 {
    padding-bottom: unset;
  }
  #intro5 .img {
    margin-bottom: 175vw !important;
  }
  #intro5 .img .txt2 {
    top: 50vw;
  }
  #intro5 .img .txt2 ul.body {
    flex-direction: column;
    justify-self: center;
    padding: 3vw 7.5vw;
  }
  #intro5 .img .txt2 ul.body li {
    margin-bottom: 6.5vw;
  }
  #intro5 .img .txt2 ul.body li p {
    font-size: 4vw;
    width: 100% !important;
    display: flex;
    flex-direction: column;
    margin-bottom: 2vw;
  }
  #intro5 .img .txt2 ul.body li p .strongColor {
    display: inline-block;
    white-space: nowrap;
    width: auto;
  }
  #intro5 .img .txt2 ul.body li p:nth-child(1) {
    padding-bottom: 0.2em;
  }
  #intro5 .img .txt2 ul.body li p:nth-child(2) {
    padding-top: 0.05em;
  }
}

.subPage.twoColRegion .img {
  width: 65%;
}
.subPage.twoColRegion, .subPage.txtFloatRegion {
  padding: 5vw 10vw 0 10vw;
  box-sizing: border-box;
}
.subPage.twoColRegion:has(.txt.right):after, .subPage.txtFloatRegion:has(.txt.right):after {
  position: absolute;
  background-image: url("/case_assets/tgf250184/assets/images/sample/icon02.png?v=2503031057");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 100% 100%;
  display: block;
  content: "";
  width: 30%;
  height: 12%;
  right: 5vw;
  bottom: 0;
}
.subPage.twoColRegion:last-child, .subPage.txtFloatRegion:last-child {
  padding-bottom: 5vw;
}
.subPage.twoColRegion:last-child:has(.txt.right):after, .subPage.txtFloatRegion:last-child:has(.txt.right):after {
  bottom: 5vw;
}
.subPage.twoColRegion .txt, .subPage.txtFloatRegion .txt {
  width: -moz-fit-content;
  width: fit-content;
}
.subPage.txtFloatRegion .txt {
  position: absolute !important;
}
.subPage.txtFloatRegion .img .noteBody {
  margin-bottom: 5vw;
  margin-left: 10vw;
}
@media (max-width: 768px) {
  .subPage {
    position: relative;
  }
  .subPage.twoColRegion .img {
    width: 100%;
  }
  .subPage.twoColRegion, .subPage.txtFloatRegion {
    padding: 5vw 0 0 0;
  }
  .subPage.twoColRegion:has(.txt.right):after, .subPage.txtFloatRegion:has(.txt.right):after {
    display: none;
  }
  .subPage.twoColRegion:first-child:has(.txt.right), .subPage.txtFloatRegion:first-child:has(.txt.right) {
    padding-top: 20vw !important;
  }
  .subPage.twoColRegion:first-child:has(.txt.right):after, .subPage.txtFloatRegion:first-child:has(.txt.right):after {
    display: block !important;
    width: 75vw;
    height: 15vw;
    right: 3vw;
    bottom: unset;
    top: 0;
    transform: translateY(50%);
  }
  .subPage.twoColRegion:last-child, .subPage.txtFloatRegion:last-child {
    padding-bottom: 17.5vw !important;
  }
  .subPage.twoColRegion:last-child:has(.txt.right), .subPage.txtFloatRegion:last-child:has(.txt.right) {
    padding-bottom: 25vw !important;
  }
  .subPage.twoColRegion:last-child:has(.txt.right):after, .subPage.txtFloatRegion:last-child:has(.txt.right):after {
    display: block !important;
    width: 75vw;
    height: 15vw;
    right: 3vw;
    bottom: 12.5vw;
    top: unset;
    transform: translateY(50%);
  }
  .subPage.twoColRegion:last-child, .subPage.txtFloatRegion:last-child {
    padding-bottom: 25vw !important;
  }
  .subPage.twoColRegion:last-child:after, .subPage.txtFloatRegion:last-child:after {
    position: absolute;
    background-image: url("/case_assets/tgf250184/assets/images/sample/icon02.png?v=2503031057");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 100% 100%;
    display: block;
    content: "";
    width: 75vw;
    height: 15vw;
    right: 3vw;
    bottom: 12.5vw;
    top: unset;
    transform: translateY(50%);
  }
  .subPage.twoColRegion:only-child::before, .subPage.txtFloatRegion:only-child::before {
    position: absolute;
    background-image: url("/case_assets/tgf250184/assets/images/sample/icon02.png?v=2503031057");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 100% 100%;
    display: block;
    content: "";
    width: 75vw;
    height: 15vw;
    right: 3vw;
    bottom: unset;
    top: 0;
    transform: translateY(50%);
  }
  .subPage.twoColRegion .txt, .subPage.txtFloatRegion .txt {
    width: 100%;
  }
  .subPage.twoColRegion .txt .body, .subPage.txtFloatRegion .txt .body {
    width: -moz-fit-content;
    width: fit-content;
    margin: auto;
  }
  .subPage.txtFloatRegion.mobTxtBlack .txt h1,
  .subPage.txtFloatRegion.mobTxtBlack .txt p {
    color: #505050 !important;
  }
  .subPage.txtFloatRegion .txt {
    position: relative !important;
  }
  .subPage.txtFloatRegion .img .noteBody {
    margin-bottom: calc(17.5vw + 20px);
    margin-left: 0vw;
  }
}

/* ------ */
/* ------ */
@media (max-width: 768px) {
  .pc_color_9D7447 {
    color: unset !important;
  }
  .btn-more {
    width: 55vw;
    height: 8vw;
    margin: 5vw auto 0;
    font-size: 2.75vw;
  }
  .keyVision .fullBg {
    height: 160vw !important;
    background-image: url("/case_assets/tgf250184/assets/images/sample/mob01.jpg?v=2503031057");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
  }
  .keyVision .video {
    padding-bottom: 0 !important;
  }
  .swiper-pagination-bullet {
    width: 2.25vw !important;
    height: 2.25vw !important;
    margin: 0 0.75vw !important;
  }
}
/* ------ */