@charset "UTF-8";
.ib_info_004 .close::before, .ib_info_004 .close::after, .ib_info_004 .close {
 -webkit-transition: all 0.5s ease-in-out;
 transition: all 0.5s ease-in-out;
}

.arrowBox {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
     -ms-flex-direction: row;
         flex-direction: row;
 -webkit-box-pack: start;
     -ms-flex-pack: start;
         justify-content: flex-start;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 gap: 12px;
}

.arrow {
 width: 60px;
 height: 60px;
 background-color: #de6500;
 border-radius: 50%;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
     -ms-flex-direction: row;
         flex-direction: row;
 -webkit-box-pack: center;
     -ms-flex-pack: center;
         justify-content: center;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 cursor: pointer;
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
}
.arrow svg {
 width: 29px;
 height: 23px;
 color: #fff;
}
@media (min-width: 1181px) {
 .arrow:hover {
  background-color: #5a4b41;
 }
}
@media (max-width: 840px) {
 .arrow {
  width: 50px;
  height: 50px;
 }
 .arrow svg {
  width: 20px;
  height: 16px;
 }
}

.swiper-pagination {
 position: absolute;
 --swiper-pagination-bottom: 5px;
 --swiper-pagination-bullet-inactive-color: #f5f0f0;
 --swiper-pagination-bullet-inactive-opacity: 1;
 --swiper-pagination-color: #de6500;
 --swiper-pagination-bullet-horizontal-gap:9px;
}
.swiper-pagination .swiper-pagination-bullet::before {
 content: "";
 width: 18px;
 height: 18px;
 border: 1px solid #de6500;
 border-radius: 50%;
 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
         transform: translate(-50%, -50%);
 opacity: 0;
 -webkit-transition: all 0.5s linear;
 transition: all 0.5s linear;
}
.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
 opacity: 1;
}

.moreBtn {
 display: inline-block;
}
.moreBtn .decoText {
 display: inline-block;
}
.moreBtn .circleBtn {
 width: 112px;
 height: 112px;
 background-color: #de6500;
 border-radius: 50%;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
 -webkit-box-pack: center;
     -ms-flex-pack: center;
         justify-content: center;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 gap: 10px;
 font-size: 16px;
 font-weight: 400;
 font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #fff;
 letter-spacing: 0.64px;
 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
         transform: translate(-50%, -50%);
}
.moreBtn .circleBtn svg {
 width: 29px;
 height: 23px;
 color: #fff;
 -webkit-transform: rotate(-45deg);
         transform: rotate(-45deg);
}
@media (min-width: 1181px) {
 .moreBtn:hover .circleBtn {
  background-color: #5a4b41;
 }
}

/* home(ib_info_004) */
.ib_info_004 {
 position: fixed;
 left: 0;
 top: 0;
 z-index: 500;
 width: 100%;
 height: 100vh;
 font-size: 15px;
 line-height: 1.8;
 -webkit-box-sizing: border-box;
         box-sizing: border-box;
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
 -webkit-transition: all 0.7s;
 transition: all 0.7s;
}
.ib_info_004 .mask {
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100vh;
 background-color: rgba(0, 0, 0, 0.7);
 opacity: 0;
 -webkit-transition: all 0.7s;
 transition: all 0.7s;
}
.ib_info_004 .inner {
 position: absolute;
 left: 50%;
 top: 50%;
 -webkit-transform: translate(-50%, 50%);
         transform: translate(-50%, 50%);
 width: 700px;
 max-width: 90%;
 max-height: 85vh;
 opacity: 0;
 background-color: #fff;
 -webkit-transition: all 0.7s;
 transition: all 0.7s;
}
.ib_info_004 .popContent {
 max-height: 85vh;
 overflow-y: auto;
}
.ib_info_004 img {
 display: block;
 max-width: 100%;
 height: auto;
 -webkit-backface-visibility: hidden;
         backface-visibility: hidden;
}
.ib_info_004 .Txt {
 padding: 30px;
}
.ib_info_004 .Txt .popTitle {
 font-size: 25px;
 margin-bottom: 25px;
}
.ib_info_004 .close {
 width: 46px;
 height: 46px;
 background-color: #de6500;
 cursor: pointer;
 position: absolute;
 top: 0;
 right: 0;
 z-index: 1;
}
.ib_info_004 .close::before, .ib_info_004 .close::after {
 content: "";
 position: absolute;
 left: 11px;
 top: 23px;
 width: 25px;
 height: 1px;
 background-color: #fff;
}
.ib_info_004 .close::before {
 -webkit-transform: rotate(45deg);
         transform: rotate(45deg);
}
.ib_info_004 .close::after {
 -webkit-transform: rotate(-45deg);
         transform: rotate(-45deg);
}
@media (min-width: 1181px) {
 .ib_info_004 .close:hover {
  background-color: #de6500;
 }
 .ib_info_004 .close:hover::before {
  -webkit-transform: rotate(-30deg);
          transform: rotate(-30deg);
 }
 .ib_info_004 .close:hover::after {
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
 }
}
.ib_info_004.show {
 opacity: 1;
 visibility: visible;
 pointer-events: auto;
}
.ib_info_004.show .mask,
.ib_info_004.show .inner {
 opacity: 1;
}
.ib_info_004.show .inner {
 -webkit-transform: translate(-50%, -50%);
         transform: translate(-50%, -50%);
}
@media (max-width: 1180px) {
 .ib_info_004 .popContent {
  max-height: calc(100vh - 150px);
 }
}

/* bannerHomeArea */
.bannerHomeArea {
 padding-bottom: 96px;
}
.bannerHomeArea .bannerPath {
 position: absolute;
 left: 38px;
 top: -180px;
}
.bannerHomeArea .item {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
     -ms-flex-direction: row;
         flex-direction: row;
 -webkit-box-pack: center;
     -ms-flex-pack: center;
         justify-content: center;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
}
.bannerHomeArea .Txt {
 width: 50%;
 margin-right: -285px;
 z-index: 2;
}
.bannerHomeArea .Txt .subtitle {
 font-size: 84px;
 font-weight: 300;
 font-family: "Roboto", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #5a4b41;
 letter-spacing: 6.72px;
 opacity: 0;
}
.bannerHomeArea .Txt .title {
 font-size: 64px;
 font-weight: 500;
 font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #5a4b41;
 letter-spacing: 2.56px;
 opacity: 0;
}
.bannerHomeArea .Txt .text {
 font-size: 18px;
 font-weight: 400;
 font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #5a4b41;
 letter-spacing: 0.72px;
 padding-left: 20px;
 line-height: 2;
 opacity: 0;
}
.bannerHomeArea .Txt .text::before {
 content: "";
 width: 9px;
 height: 9px;
 border-radius: 3px;
 background-color: #de6500;
 position: absolute;
 top: 15px;
 left: 0;
}
.bannerHomeArea .Txt .btnBox {
 margin-top: 85px;
 opacity: 0;
}
.bannerHomeArea .Img {
 -webkit-box-flex: 1;
     -ms-flex: 1;
         flex: 1;
 border-radius: 60px 9px 9px 60px;
 overflow: hidden;
 clip-path: inset(0 0 0 100%);
 -webkit-transition: all 1.2s cubic-bezier(0.76, 0, 0.24, 1);
 transition: all 1.2s cubic-bezier(0.76, 0, 0.24, 1);
}
.bannerHomeArea .Img img {
 width: 100%;
 height: auto;
 display: block;
 -webkit-backface-visibility: hidden;
         backface-visibility: hidden;
 -webkit-transform: scale(1.3);
         transform: scale(1.3);
 -webkit-transition: all 1s 0.5s ease;
 transition: all 1s 0.5s ease;
}
.bannerHomeArea .slick-current .Img {
 clip-path: inset(0 0 0 0);
}
.bannerHomeArea .slick-current .Img img {
 -webkit-transform: scale(1);
         transform: scale(1);
}
.bannerHomeArea .slick-current .Txt .subtitle {
 -webkit-animation: slideUpAnimation 0.8s 0.5s ease-in-out forwards;
         animation: slideUpAnimation 0.8s 0.5s ease-in-out forwards;
}
.bannerHomeArea .slick-current .Txt .title {
 -webkit-animation: slideUpAnimation 0.8s 0.8s ease-in-out forwards;
         animation: slideUpAnimation 0.8s 0.8s ease-in-out forwards;
}
.bannerHomeArea .slick-current .Txt .text {
 -webkit-animation: slideUpAnimation 0.8s 1.1s ease-in-out forwards;
         animation: slideUpAnimation 0.8s 1.1s ease-in-out forwards;
}
.bannerHomeArea .slick-current .Txt .btnBox {
 -webkit-animation: slideUpAnimation 0.8s 1.4s ease-in-out forwards;
         animation: slideUpAnimation 0.8s 1.4s ease-in-out forwards;
}
.bannerHomeArea .dotBox {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
 -webkit-box-pack: center;
     -ms-flex-pack: center;
         justify-content: center;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 gap: 18px;
 position: absolute;
 top: 50%;
 -webkit-transform: translateY(-50%);
         transform: translateY(-50%);
 right: 65px;
}
.bannerHomeArea .dotBox .dot {
 width: 6px;
 height: 6px;
 background-color: #f5f0f0;
 border-radius: 50%;
 cursor: pointer;
 -webkit-transition: all 0.5s linear;
 transition: all 0.5s linear;
}
.bannerHomeArea .dotBox .dot::before {
 content: "";
 width: 18px;
 height: 18px;
 border: 1px solid #de6500;
 border-radius: 50%;
 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
         transform: translate(-50%, -50%);
 opacity: 0;
 -webkit-transition: all 0.5s linear;
 transition: all 0.5s linear;
}
.bannerHomeArea .dotBox .dot.active {
 background-color: #de6500;
 pointer-events: none;
}
.bannerHomeArea .dotBox .dot.active::before {
 opacity: 1;
}
.bannerHomeArea .scrollDown {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
 -webkit-box-pack: center;
     -ms-flex-pack: center;
         justify-content: center;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 position: absolute;
 top: 58%;
 left: 55px;
 cursor: pointer;
}
.bannerHomeArea .scrollDown .text {
 font-size: 14px;
 font-weight: 300;
 font-family: "Roboto", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #606060;
 letter-spacing: 0.56px;
 -webkit-writing-mode: vertical-rl;
     -ms-writing-mode: tb-rl;
         writing-mode: vertical-rl;
}
.bannerHomeArea .scrollDown .line {
 width: 1px;
 height: 80px;
 margin: 10px 0;
 background-color: #606060;
}
.bannerHomeArea .scrollDown svg {
 width: 9px;
 height: 34px;
}
@media (min-width: 1181px) {
 .bannerHomeArea .scrollDown:hover .line {
  -webkit-animation: scrollDown 2s linear infinite;
          animation: scrollDown 2s linear infinite;
 }
}
.bannerHomeArea .searchBox {
 position: absolute;
 bottom: 8px;
 right: 38px;
 -webkit-transform: translateY(50%);
         transform: translateY(50%);
}
.bannerHomeArea .searchBox svg {
 width: 35px;
 height: 35px;
}
.bannerHomeArea .searchBox .searchOpen {
 width: 130px;
 height: 130px;
 background-color: #de6500;
 border-radius: 50%;
 border: 9px solid #fff;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
 -webkit-box-pack: center;
     -ms-flex-pack: center;
         justify-content: center;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 gap: 8px;
 color: #fff;
 cursor: pointer;
 z-index: 2;
 position: absolute;
 top: 0;
 right: 0;
 -webkit-transition: all 0.5s linear;
 transition: all 0.5s linear;
}
.bannerHomeArea .searchBox .searchOpen.hide {
 opacity: 0;
 pointer-events: none;
}
.bannerHomeArea .searchBox .searchForm {
 width: 128px;
 height: 128px;
 background-color: #fff;
 border: 2px solid #de6500;
 border-radius: 60px;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
     -ms-flex-direction: row;
         flex-direction: row;
 -webkit-box-pack: center;
     -ms-flex-pack: center;
         justify-content: center;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 gap: 30px;
 padding: 0 32px;
 overflow: hidden;
 opacity: 0;
 -webkit-transition: all 0.5s linear;
 transition: all 0.5s linear;
}
.bannerHomeArea .searchBox .searchForm .searchInput {
 -webkit-box-flex: 1;
     -ms-flex: 1;
         flex: 1;
 padding: 0 30px;
 border-left: 1px solid #5a4b41;
}
.bannerHomeArea .searchBox .searchForm.show {
 width: 1000px;
 opacity: 1;
}
.bannerHomeArea .searchBox .close {
 width: 42px;
 height: 42px;
 background-color: #de6500;
 border-radius: 50%;
 cursor: pointer;
}
.bannerHomeArea .searchBox .close::before, .bannerHomeArea .searchBox .close::after {
 content: "";
 width: 26px;
 height: 1px;
 background-color: #fff;
 position: absolute;
 top: 50%;
 left: calc(50% - 13px);
}
.bannerHomeArea .searchBox .close::before {
 -webkit-transform: rotate(45deg);
         transform: rotate(45deg);
}
.bannerHomeArea .searchBox .close::after {
 -webkit-transform: rotate(-45deg);
         transform: rotate(-45deg);
}
@media (max-width: 1800px) {
 .bannerHomeArea .svgPath {
  width: 60vw;
  height: 61vw;
 }
 .bannerHomeArea .dotBox {
  right: 20px;
 }
 .bannerHomeArea .scrollDown {
  left: 20px;
 }
}
@media (max-width: 1600px) {
 .bannerHomeArea .searchBox .searchOpen {
  width: 120px;
  height: 120px;
 }
 .bannerHomeArea .searchBox .searchForm {
  width: 115px;
  height: 115px;
 }
 .bannerHomeArea .searchBox .searchForm.show {
  width: 840px;
 }
}
@media (max-width: 1400px) {
 .bannerHomeArea .Txt {
  margin-right: -200px;
 }
 .bannerHomeArea .Txt .subtitle {
  font-size: 64px;
 }
 .bannerHomeArea .Txt .title {
  font-size: 48px;
 }
 .bannerHomeArea .Txt .btnBox {
  margin-top: 50px;
 }
 .bannerHomeArea .searchBox .searchForm.show {
  width: 720px;
 }
}
@media (max-width: 1180px) {
 .bannerHomeArea {
  padding-bottom: 0;
 }
 .bannerHomeArea .svgPath {
  width: 70vw;
  height: 71vw;
 }
 .bannerHomeArea .searchBox {
  display: none;
 }
 .bannerHomeArea .dotBox {
  right: 15px;
 }
 .bannerHomeArea .scrollDown {
  display: none;
 }
}
@media (max-width: 840px) {
 .bannerHomeArea .svgPath {
  width: 880px;
  height: 920px;
 }
 .bannerHomeArea .item {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-bottom: 40px;
 }
 .bannerHomeArea .dotBox {
  top: auto;
  right: 50%;
  bottom: 0;
  -webkit-transform: translate(50%, 0);
          transform: translate(50%, 0);
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
 }
 .bannerHomeArea .Txt {
  width: 100%;
  margin-right: 0;
  margin-bottom: 40px;
 }
 .bannerHomeArea .Txt .subtitle {
  font-size: 56px;
 }
 .bannerHomeArea .Txt .title {
  font-size: 45px;
 }
 .bannerHomeArea .Txt .text {
  font-size: 16px;
  padding-left: 15px;
 }
 .bannerHomeArea .Txt .text::before {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  top: 13px;
 }
 .bannerHomeArea .Txt .btnBox {
  display: none;
 }
 .bannerHomeArea .Img {
  width: 100%;
  -webkit-box-flex: 1;
      -ms-flex: auto;
          flex: auto;
 }
 .bannerHomeArea .btnBox {
  margin-top: 30px;
 }
}
@media (max-width: 480px) {
 .bannerHomeArea .svgPath {
  width: 800px;
  height: 820px;
 }
 .bannerHomeArea .Txt .subtitle {
  font-size: 48px;
 }
 .bannerHomeArea .Txt .title {
  font-size: 36px;
 }
 .bannerHomeArea .Img {
  border-radius: 50px 8px 8px 50px;
 }
}
@media (max-width: 400px) {
 .bannerHomeArea .Txt .subtitle {
  font-size: 40px;
 }
 .bannerHomeArea .Txt .title {
  font-size: 32px;
 }
}

/* aboutArea */
.aboutArea {
 padding-top: 145px;
}
.aboutArea .svgPath {
 position: absolute;
 top: 105px;
 right: -33px;
}
@media (max-width: 1800px) {
 .aboutArea .svgPath {
  width: 1920px;
 }
}
@media (max-width: 1180px) {
 .aboutArea .svgPath {
  width: 1600px;
 }
}
.aboutArea::before {
 content: "";
 width: 525px;
 height: 842px;
 background-image: url(../images/about_deco.png);
 background-size: contain;
 background-repeat: no-repeat;
 position: absolute;
 top: -20px;
 right: 0;
}
.aboutArea .blockTitle {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
 -webkit-box-pack: center;
     -ms-flex-pack: center;
         justify-content: center;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 margin-bottom: 150px;
}
.aboutArea .blockTitle .title {
 font-size: 45px;
 font-weight: 500;
 font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #5a4b41;
 letter-spacing: 3.6px;
 padding: 30px 110px;
 margin-top: -33px;
}
.aboutArea .blockTitle .title::before, .aboutArea .blockTitle .title::after {
 content: "";
 display: inline-block;
 width: 92px;
 height: 77px;
 background-image: url(../images/mark.png);
 background-size: contain;
 background-repeat: no-repeat;
 position: absolute;
}
.aboutArea .blockTitle .title::before {
 top: -15px;
 left: 0;
}
.aboutArea .blockTitle .title::after {
 -webkit-transform: rotate(180deg);
         transform: rotate(180deg);
 bottom: -5px;
 right: 0;
}
.aboutArea .blockTitle .subtitleBox {
 padding-right: 120px;
}
.aboutArea .blockTitle .subtitle {
 display: inline-block;
 font-size: 16px;
 font-weight: 300;
 font-family: "Roboto", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #de6500;
 letter-spacing: 1.28px;
 padding: 12px 38px;
}
.aboutArea .blockTitle .decoLine {
 width: 100%;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
     -ms-flex-direction: row;
         flex-direction: row;
 -webkit-box-pack: center;
     -ms-flex-pack: center;
         justify-content: center;
 -webkit-box-align: start;
     -ms-flex-align: start;
         align-items: flex-start;
}
.aboutArea .blockTitle .decoLine img {
 display: inline-block;
}
.aboutArea .blockTitle .decoLine .line {
 -webkit-box-flex: 1;
     -ms-flex: 1;
         flex: 1;
 height: 1px;
 background-color: #edad77;
 margin-top: 6px;
}
@media (max-width: 1400px) {
 .aboutArea .blockTitle {
  margin-bottom: 100px;
 }
 .aboutArea .blockTitle .title {
  font-size: 40px;
  padding: 30px 90px;
 }
 .aboutArea .blockTitle .title::before, .aboutArea .blockTitle .title::after {
  width: 80px;
  height: 67px;
 }
 .aboutArea .blockTitle .subtitle {
  padding: 5px 35px;
 }
}
@media (max-width: 1180px) {
 .aboutArea .blockTitle {
  margin-bottom: 60px;
 }
 .aboutArea .blockTitle .title {
  font-size: 32px;
  font-weight: 500;
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  color: #5a4b41;
  letter-spacing: 1.92px;
  padding: 25px 65px;
  text-align: center;
 }
 .aboutArea .blockTitle .title::before, .aboutArea .blockTitle .title::after {
  width: 64px;
  height: 54px;
 }
 .aboutArea .blockTitle .subtitleBox {
  padding-right: 0;
 }
 .aboutArea .blockTitle .subtitle {
  padding: 5px 20px;
 }
}
@media (max-width: 840px) {
 .aboutArea .blockTitle {
  margin-bottom: 40px;
 }
 .aboutArea .blockTitle .title {
  font-size: 28px;
  padding: 50px 0;
  margin-top: -50px;
 }
 .aboutArea .blockTitle .title::before, .aboutArea .blockTitle .title::after {
  width: 50px;
  height: 42px;
 }
 .aboutArea .blockTitle .title::before {
  top: 0;
 }
 .aboutArea .blockTitle .title::after {
  bottom: 0;
 }
}
@media (max-width: 400px) {
 .aboutArea .blockTitle .title {
  font-size: 25px;
  padding: 0;
  margin-top: -5px;
 }
 .aboutArea .blockTitle .title::before, .aboutArea .blockTitle .title::after {
  display: none;
 }
}
.aboutArea .aboutBox {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
     -ms-flex-direction: row;
         flex-direction: row;
 -webkit-box-pack: center;
     -ms-flex-pack: center;
         justify-content: center;
 -webkit-box-align: start;
     -ms-flex-align: start;
         align-items: flex-start;
}
.aboutArea .aboutBox .titleEn {
 -webkit-transform: translateX(-10px);
         transform: translateX(-10px);
 opacity: 0;
 -webkit-transition: all 0.5s 0.3s;
 transition: all 0.5s 0.3s;
}
.aboutArea .aboutBox .subtitle {
 -webkit-transform: translateX(-10px);
         transform: translateX(-10px);
 opacity: 0;
 -webkit-transition: all 0.5s 0.5s;
 transition: all 0.5s 0.5s;
}
.aboutArea .aboutBox .gear {
 opacity: 0;
 -webkit-transition: all 0.5s 0.6s;
 transition: all 0.5s 0.6s;
}
.aboutArea .aboutBox .textBox {
 -webkit-transform: translateX(-10px);
         transform: translateX(-10px);
 opacity: 0;
 -webkit-transition: all 0.5s 0.9s;
 transition: all 0.5s 0.9s;
}
.aboutArea .aboutBox .btnBox {
 -webkit-transform: translateX(-10px);
         transform: translateX(-10px);
 opacity: 0;
 -webkit-transition: all 0.5s 1.2s;
 transition: all 0.5s 1.2s;
}
.aboutArea .aboutBox.show .listBox {
 opacity: 1;
}
.aboutArea .aboutBox.show .titleEn, .aboutArea .aboutBox.show .subtitle, .aboutArea .aboutBox.show .textBox, .aboutArea .aboutBox.show .btnBox {
 -webkit-transform: translateX(0);
         transform: translateX(0);
 opacity: 1;
}
.aboutArea .aboutBox.show .gear {
 opacity: 1;
}
.aboutArea .aboutBox.show .gear.gearFill {
 -webkit-animation: rotate 2s linear infinite;
         animation: rotate 2s linear infinite;
}
.aboutArea .aboutBox.show .gear.gearStroke {
 -webkit-animation: rotateReverse 2s linear infinite;
         animation: rotateReverse 2s linear infinite;
}
@media (max-width: 1400px) {
 .aboutArea {
  padding-top: 120px;
  padding-bottom: 40px;
 }
}
@media (max-width: 1180px) {
 .aboutArea {
  padding-top: 80px;
 }
 .aboutArea .aboutBox {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
 }
}

.infoBox {
 width: 565px;
 padding-left: 60px;
}
.infoBox .gear {
 position: absolute;
}
.infoBox .gear.gearFill {
 top: 84px;
 right: 28px;
 width: 44px;
 height: 44px;
}
.infoBox .gear.gearStroke {
 top: 116px;
 right: 8px;
 width: 22px;
 height: 22px;
}
.infoBox .textBox {
 margin-top: 50px;
}
.infoBox .textBox p {
 line-height: 1.6;
}
.infoBox .btnBox {
 margin-top: 60px;
}
@media (max-width: 1600px) {
 .infoBox {
  width: 480px;
  padding-left: 20px;
 }
}
@media (max-width: 1400px) {
 .infoBox {
  width: 30%;
 }
 .infoBox .titleBox .titleEn {
  font-size: 64px;
 }
 .infoBox .textBox {
  margin-top: 30px;
 }
 .infoBox .btnBox {
  margin-top: 30px;
 }
}
@media (max-width: 1180px) {
 .infoBox {
  width: 100%;
  padding-left: 0;
 }
}

.listBox {
 width: calc(100% - 565px);
 -ms-flex-negative: 0;
     flex-shrink: 0;
 padding-bottom: 55px;
 overflow: hidden;
 opacity: 0;
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
}
.listBox .aboutList {
 width: 345px;
 margin: 0 auto;
}
.listBox .aboutList .slick-list {
 overflow: visible;
}
.listBox .aboutList .slick-dots li {
 width: 18px;
 height: 18px;
}
.listBox .aboutList .slick-dots li.slick-active button::after {
 opacity: 1;
}
.listBox .aboutList .slick-dots button {
 width: 100%;
 height: 100%;
}
.listBox .aboutList .slick-dots button::before {
 width: 6px;
 height: 6px;
 background-color: #f5f0f0;
 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
         transform: translate(-50%, -50%);
}
.listBox .aboutList .slick-dots button::after {
 content: "";
 width: 100%;
 height: 100%;
 border: 1px solid #de6500;
 border-radius: 50%;
 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
         transform: translate(-50%, -50%);
 opacity: 0;
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
}
.listBox .slick-slide.current {
 z-index: 99;
}
.listBox .slick-slide.current .item {
 -webkit-transform: scale(1.13);
         transform: scale(1.13);
}
.listBox .slick-slide.current .item .Img::after {
 opacity: 0;
}
.listBox .slick-slide.current .item .Txt::before {
 opacity: 1;
}
.listBox .slick-slide.current .item .text {
 margin-top: 25px;
 padding-top: 25px;
 border-color: #fff;
 height: auto;
}
.listBox .slick-slide.next {
 z-index: 98;
}
.listBox .slick-slide.prev {
 z-index: 98;
}
.listBox .aboutItem {
 height: 540px;
 display: -webkit-box !important;
 display: -ms-flexbox !important;
 display: flex !important;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 padding: 0 5px;
}
.listBox .item {
 border-radius: 9px;
 overflow: hidden;
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
}
.listBox .Img img {
 display: block;
 width: 100%;
 height: 100%;
 -o-object-fit: cover;
    object-fit: cover;
}
.listBox .Img::after {
 content: "";
 width: 100%;
 height: 100%;
 margin: auto;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: rgba(90, 75, 65, 0.4);
 -webkit-transition: all 0.5s linear;
 transition: all 0.5s linear;
}
.listBox .Txt {
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 padding: 45px;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
 -webkit-box-pack: end;
     -ms-flex-pack: end;
         justify-content: flex-end;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 -webkit-transition: all 0.5s linear;
 transition: all 0.5s linear;
}
.listBox .Txt::before {
 content: "";
 width: 100%;
 height: 100%;
 background: -webkit-gradient(linear, left bottom, left top, from(rgba(222, 101, 0, 0.7)), color-stop(60%, rgba(222, 101, 0, 0)));
 background: linear-gradient(0deg, rgba(222, 101, 0, 0.7) 0%, rgba(222, 101, 0, 0) 60%);
 opacity: 0;
 width: 100%;
 height: 100%;
 margin: auto;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 -webkit-transition: all 0.5s linear;
 transition: all 0.5s linear;
}
.listBox .Txt .icon {
 width: 50px;
 margin-bottom: 15px;
}
.listBox .Txt .icon img {
 width: 100%;
 height: auto;
 display: block;
 -webkit-backface-visibility: hidden;
         backface-visibility: hidden;
}
.listBox .Txt .title {
 font-size: 18px;
 font-weight: 500;
 font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #fff;
 letter-spacing: 0.72px;
}
.listBox .Txt .text {
 width: 100%;
 text-align: center;
 font-size: 16px;
 font-weight: 400;
 font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #fff;
 letter-spacing: 0.64px;
 line-height: 1.6;
 border-top: 1px solid transparent;
 overflow: hidden;
 height: 0;
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
}
@media (max-width: 1600px) {
 .listBox {
  width: calc(100% - 480px);
 }
 .listBox .aboutList {
  width: 33.333%;
 }
}
@media (max-width: 1400px) {
 .listBox {
  width: 68%;
 }
 .listBox .swiper {
  height: 500px;
 }
 .listBox .Txt .icon {
  width: 40px;
 }
 .listBox .Txt .title {
  font-size: 16px;
 }
 .listBox .Txt .text {
  font-size: 14px;
  padding-top: 15px;
  margin-top: 15px;
 }
}
@media (max-width: 1180px) {
 .listBox {
  width: 100%;
  max-width: 960px;
  margin-top: 50px;
 }
 .listBox .Txt {
  padding: 30px 20px;
 }
}
@media (max-width: 840px) {
 .listBox .aboutList {
  width: 100%;
 }
 .listBox .aboutList .aboutItem {
  height: auto;
  padding: 0 10px;
 }
 .listBox .slick-slide.current .item {
  -webkit-transform: scale(1);
          transform: scale(1);
 }
 .listBox .slick-slide .text {
  margin-top: 25px;
  padding-top: 25px;
  border-color: #fff;
  height: auto;
 }
 .listBox .Img::after {
  display: none;
 }
 .listBox .Txt::before {
  opacity: 1;
 }
}

/* textTicker */
.textTicker {
 background-image: url(../images/bg_plaid.png);
 padding: 40px 0;
}
.textTicker .textWrapper {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-animation: marquee 8s linear infinite;
         animation: marquee 8s linear infinite;
}
.textTicker .text {
 font-size: 224px;
 font-weight: 400;
 font-family: "Roboto", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #f5f0f0;
 letter-spacing: 17.92px;
 white-space: nowrap;
 padding: 0 10px;
 -ms-flex-negative: 0;
     flex-shrink: 0;
 line-height: 1;
}
@media (max-width: 1180px) {
 .textTicker {
  padding: 30px 0;
 }
 .textTicker .text {
  font-size: 160px;
  font-weight: 400;
  font-family: "Roboto", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  color: #f5f0f0;
  letter-spacing: 9.6px;
 }
}
@media (max-width: 840px) {
 .textTicker {
  padding: 20px 0;
 }
 .textTicker .text {
  font-size: 120px;
  font-weight: 400;
  font-family: "Roboto", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  color: #f5f0f0;
  letter-spacing: 7.2px;
 }
}

/* serviceArea */
.serviceArea {
 padding: 50px 0 65px;
}
.serviceArea .topBox {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
     -ms-flex-direction: row;
         flex-direction: row;
 -webkit-box-pack: start;
     -ms-flex-pack: start;
         justify-content: flex-start;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 gap: 40px;
}
.serviceArea .svgPath {
 position: absolute;
 bottom: -177px;
 right: -104px;
}
@media (max-width: 1180px) {
 .serviceArea {
  padding: 50px 0;
 }
}

.serviceBox {
 padding: 0 86px;
 margin-top: -50px;
}
.serviceBox .swiper {
 margin-right: -90px;
}
.serviceBox .swiper-wrapper {
 -webkit-box-align: stretch;
     -ms-flex-align: stretch;
         align-items: stretch;
}
.serviceBox .swiper-slide {
 -webkit-transition: all 0.5s linear;
 transition: all 0.5s linear;
 padding-right: 95px;
}
.serviceBox .swiper-slide.swiper-slide-next {
 padding-top: 90px;
}
.serviceBox .swiper-slide.swiper-slide-active, .serviceBox .swiper-slide.swiper-slide-prev {
 padding-top: 220px;
}
.serviceBox .swiper-slide.active {
 padding-top: 0;
}
.serviceBox .serviceItem {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
 -webkit-box-pack: center;
     -ms-flex-pack: center;
         justify-content: center;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
}
.serviceBox .serviceItem .linkWrap {
 width: 100%;
 height: 100%;
 margin: auto;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 2;
}
@media (min-width: 1181px) {
 .serviceBox .serviceItem:hover img {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
 }
}
.serviceBox .Img {
 padding: 11% 0 9%;
 background-color: #f5f0f0;
 border-radius: 50%;
}
.serviceBox .Img .titleEn {
 font-size: 35px;
 font-weight: 400;
 font-family: "Roboto", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #5a4b41;
 letter-spacing: 2.8px;
 text-align: center;
 margin-bottom: 20px;
}
.serviceBox .Img img {
 width: 100%;
 height: auto;
 display: block;
 -webkit-backface-visibility: hidden;
         backface-visibility: hidden;
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
}
.serviceBox .Txt {
 margin-top: -8px;
 padding: 0 30px;
}
.serviceBox .Txt .title {
 display: inline;
 font-size: 18px;
 font-weight: 600;
 font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #5a4b41;
 letter-spacing: 0.72px;
 padding: 0 2px;
}
.serviceBox .Txt .title::before {
 content: "";
 width: 100%;
 height: 40%;
 background-color: #eb6900;
 position: absolute;
 bottom: 0;
 left: 0;
 opacity: 0.5;
 z-index: -1;
}
.serviceBox .Txt .text {
 margin-top: 12px;
 font-size: 16px;
 font-weight: 400;
 font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #606060;
 letter-spacing: 0.64px;
 line-height: 1.6;
}
@media (max-width: 1600px) {
 .serviceBox .swiper {
  margin-right: -55px;
 }
 .serviceBox .swiper-slide {
  padding-right: 60px;
 }
}
@media (max-width: 1400px) {
 .serviceBox {
  padding: 0;
 }
 .serviceBox .swiper {
  margin-right: -45px;
 }
 .serviceBox .swiper-slide {
  padding-right: 50px;
 }
}
@media (max-width: 1180px) {
 .serviceBox {
  padding: 0;
 }
 .serviceBox .swiper {
  margin-right: -85px;
 }
 .serviceBox .swiper-slide {
  padding-right: 90px;
 }
 .serviceBox .swiper-slide.swiper-slide-active, .serviceBox .swiper-slide.swiper-slide-prev {
  padding-top: 180px;
 }
}
@media (max-width: 1000px) {
 .serviceBox {
  padding: 0;
 }
 .serviceBox .swiper {
  margin-right: -65px;
 }
 .serviceBox .swiper-slide {
  padding-right: 50px;
 }
}
@media (max-width: 840px) {
 .serviceBox {
  margin-top: 40px;
 }
 .serviceBox .swiper {
  margin-right: 0;
  padding-bottom: 35px;
 }
 .serviceBox .swiper-slide {
  padding-right: 0;
 }
 .serviceBox .swiper-slide.swiper-slide-next {
  padding-top: 0;
 }
 .serviceBox .swiper-slide.swiper-slide-active, .serviceBox .swiper-slide.swiper-slide-prev {
  padding-top: 0;
 }
 .serviceBox .serviceItem {
  max-width: 400px;
  margin: 0 auto;
 }
}

/* productArea */
.productArea {
 padding-top: 25px;
 text-align: center;
}
.productArea::before, .productArea::after {
 content: "";
 position: absolute;
 background-size: contain;
 background-repeat: no-repeat;
 z-index: -1;
 pointer-events: none;
}
.productArea::before {
 width: 592px;
 height: 985px;
 background-image: url(../images/product_deco01.png);
 top: -200px;
 right: 0;
}
.productArea::after {
 width: 562px;
 height: 1203px;
 background-image: url(../images/product_deco02.png);
 bottom: -200px;
 left: 0;
 opacity: 0.7;
}
.productArea .svgPath {
 position: absolute;
 left: -17px;
 bottom: -123px;
}
.productArea .titleBox {
 display: inline-block;
 margin: 0 auto;
}
.productArea .titleBox.show .gear {
 -webkit-animation-delay: 0.5s;
         animation-delay: 0.5s;
}
.productArea .titleBox.show .gear.gearBig {
 -webkit-animation: rotate 2s linear infinite;
         animation: rotate 2s linear infinite;
}
.productArea .titleBox.show .gear.gearSmall {
 -webkit-animation: rotateReverse 2s linear infinite;
         animation: rotateReverse 2s linear infinite;
}
.productArea .titleBox .gear {
 position: absolute;
}
.productArea .titleBox .gear.gearBig {
 bottom: 26px;
 left: -87px;
 width: 48px;
 height: 48px;
}
.productArea .titleBox .gear.gearSmall {
 bottom: 14px;
 left: -47px;
 width: 20px;
 height: 20px;
}
.productArea .btnBox {
 margin-top: 50px;
 text-align: center;
 display: none;
}
@media (max-width: 840px) {
 .productArea .btnBox {
  display: block;
 }
}

.mainWrap {
 width: calc(100% - 200px);
 margin: 0 auto;
 -webkit-perspective: 2000px;
         perspective: 2000px;
}
.mainWrap.show .moreBtn {
 opacity: 1;
}
.mainWrap.show .mainBox {
 clip-path: inset(0 0 0 0);
}
.mainWrap.show .coverPic {
 -webkit-transform: rotateY(180deg);
         transform: rotateY(180deg);
 opacity: 0;
 pointer-events: none;
}
.mainWrap .coverPic {
 width: 50%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 -webkit-transform-origin: center right;
         transform-origin: center right;
 -webkit-transition: opacity 1s 1.1s linear, -webkit-transform 1.5s linear;
 transition: opacity 1s 1.1s linear, -webkit-transform 1.5s linear;
 transition: transform 1.5s linear, opacity 1s 1.1s linear;
 transition: transform 1.5s linear, opacity 1s 1.1s linear, -webkit-transform 1.5s linear;
 z-index: 3;
}
.mainWrap .coverPic img {
 display: block;
 width: 100%;
 height: 100%;
}
.mainWrap .moreBtn {
 position: absolute;
 top: 0;
 right: 0;
 -webkit-transform: translateY(-50%);
         transform: translateY(-50%);
 opacity: 0;
 z-index: 2;
 -webkit-transition: all 0.5s 1.6s;
 transition: all 0.5s 1.6s;
}
.mainWrap .mainBox {
 padding: 100px 65px 80px;
 clip-path: inset(0 50% 0 0);
 -webkit-transition: all 0.7s 0.8s linear;
 transition: all 0.7s 0.8s linear;
}
.mainWrap .classBox {
 max-width: 800px;
 margin: 0 auto 75px;
}
.mainWrap .productItem {
 padding: 0 9px;
}
.mainWrap .bgPic {
 width: 100%;
 height: 100%;
 width: 100%;
 height: 100%;
 margin: auto;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
}
.mainWrap .Img {
 padding: 30px 0;
 background-color: #fff;
 overflow: hidden;
 border-radius: 9px;
 cursor: pointer;
}
@media (min-width: 1181px) {
 .mainWrap .Img:hover .textBox {
  opacity: 1;
 }
 .mainWrap .Img:hover .textBox .text {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
 }
}
.mainWrap .Img img {
 width: 100%;
 height: auto;
 display: block;
 -webkit-backface-visibility: hidden;
         backface-visibility: hidden;
}
.mainWrap .Img .textBox {
 background-color: rgba(222, 101, 0, 0.7);
 width: 100%;
 height: 100%;
 margin: auto;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 padding: 20px 32px;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
 -webkit-box-pack: center;
     -ms-flex-pack: center;
         justify-content: center;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 opacity: 0;
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
}
.mainWrap .Img .textBox .text {
 font-size: 16px;
 font-weight: 400;
 font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #fff;
 letter-spacing: 0.64px;
 line-height: 1.6;
 opacity: 0;
 -webkit-transform: translateY(10px);
         transform: translateY(10px);
 -webkit-transition: all 0.5s 0.3s;
 transition: all 0.5s 0.3s;
}
.mainWrap .Img .linkWrap {
 display: block;
 width: 100%;
 height: 100%;
 margin: auto;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 2;
}
.mainWrap .Img .point {
 position: absolute;
 top: 0;
 left: 12px;
}
.mainWrap .Img .point.hot::before {
 content: "HOT";
 display: block;
 width: 50px;
 height: 58px;
 padding-top: 15px;
 background-image: url(../images/hot_icon.png);
 background-size: contain;
 background-repeat: no-repeat;
 font-size: 16px;
 font-weight: 300;
 font-family: "Roboto", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #fff;
 letter-spacing: 1.28px;
 text-align: center;
}
.mainWrap .Img .point.award::after {
 content: "獲獎";
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
     -ms-flex-direction: row;
         flex-direction: row;
 -webkit-box-pack: center;
     -ms-flex-pack: center;
         justify-content: center;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 width: 50px;
 height: 50px;
 margin-top: 15px;
 background-image: url(../images/award_icon.png);
 background-size: contain;
 background-repeat: no-repeat;
 font-size: 16px;
 font-weight: 400;
 font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #5a4b41;
 letter-spacing: 0.64px;
}
.mainWrap .Txt {
 padding-top: 25px;
 text-align: center;
}
.mainWrap .Txt .title {
 font-size: 18px;
 font-weight: 500;
 font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #5a4b41;
 letter-spacing: 0.72px;
}
.mainWrap .Txt .price {
 font-size: 16px;
 font-weight: 400;
 font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #606060;
 letter-spacing: 0.64px;
 margin-top: 8px;
}
.mainWrap .slick-dots {
 bottom: -40px;
}
.mainWrap .slick-dotted.slick-slider {
 margin-bottom: 50px;
}
@media (max-width: 1400px) {
 .mainWrap {
  width: 100%;
 }
}
@media (max-width: 1180px) {
 .mainWrap .mainBox {
  padding: 80px 45px;
 }
 .mainWrap .classBox {
  margin: 0 auto 50px;
 }
 .mainWrap .moreBtn {
  top: 0;
  right: -35px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
 }
}
@media (max-width: 840px) {
 .mainWrap .mainBox {
  padding: 80px 30px;
  clip-path: inset(0 0 0 0);
 }
 .mainWrap .moreBtn {
  display: none;
 }
 .mainWrap .coverPic {
  display: none;
 }
 .mainWrap .classBox {
  margin: 0 auto 30px;
 }
}

/* newsArea */
.newsArea {
 padding: 170px 0 160px;
}
.newsArea .svgPath {
 position: absolute;
 top: 42%;
 right: -47px;
}
.newsArea .wrap {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
     -ms-flex-direction: row;
         flex-direction: row;
 -webkit-box-pack: center;
     -ms-flex-pack: center;
         justify-content: center;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
}
.newsArea .wrap .left {
 width: 430px;
}
.newsArea .titleBox {
 display: inline-block;
}
.newsArea .gear {
 position: absolute;
}
.newsArea .gear.gearBig {
 top: 5px;
 right: -90px;
 width: 46px;
 height: 46px;
 -webkit-animation: rotate 2s linear infinite;
         animation: rotate 2s linear infinite;
}
.newsArea .gear.gearSmall {
 top: -5px;
 right: -41px;
 width: 20px;
 height: 20px;
 -webkit-animation: rotateReverse 2s linear infinite;
         animation: rotateReverse 2s linear infinite;
}
.newsArea .arrowBox {
 margin-top: 28px;
}
.newsArea .arrowBox.mobile {
 display: none;
}
.newsArea .btnBox {
 margin-top: 145px;
}
.newsArea .btnBox.mobile {
 display: none;
}
@media (max-width: 1400px) {
 .newsArea {
  padding: 120px 0;
 }
 .newsArea .wrap .left {
  width: 350px;
 }
}
@media (max-width: 1180px) {
 .newsArea {
  padding: 100px 0;
 }
 .newsArea .wrap {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
 }
 .newsArea .wrap .left {
  width: 100%;
 }
 .newsArea .arrowBox {
  display: none;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
 }
 .newsArea .arrowBox.mobile {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
 }
 .newsArea .btnBox {
  display: none;
  text-align: center;
  margin-top: 60px;
 }
 .newsArea .btnBox.mobile {
  display: block;
 }
 .newsArea .titleBox {
  text-align: center;
 }
}
@media (max-width: 840px) {
 .newsArea {
  padding: 80px 0;
 }
 .newsArea .btnBox {
  margin-top: 40px;
 }
}

.newsBox {
 width: calc(100% - 430px);
 padding-top: 20px;
}
.newsBox .slick-vertical .slick-slide {
 border-bottom: 1px solid #666666;
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
}
.newsBox .slick-vertical .slick-slide::before {
 content: "";
 width: 100%;
 height: 1px;
 background-color: #de6500;
 position: absolute;
 bottom: 0;
 left: 0;
 opacity: 0;
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
}
.newsBox .slick-vertical .slick-slide.slick-current {
 border-top: 1px solid #666666;
}
.newsBox .slick-vertical .slick-slide.slick-active:last-child .Img {
 top: auto;
 bottom: 30px;
}
@media (min-width: 1181px) {
 .newsBox .slick-vertical .slick-slide.slick-active:hover {
  border-bottom: 1px solid #de6500;
 }
 .newsBox .slick-vertical .slick-slide.slick-active:hover::before {
  opacity: 1;
 }
 .newsBox .slick-vertical .slick-slide.slick-active:hover .Img {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0);
          transform: translateY(0);
 }
}
.newsBox .Txt {
 height: 135px;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
     -ms-flex-direction: row;
         flex-direction: row;
 -webkit-box-pack: start;
     -ms-flex-pack: start;
         justify-content: flex-start;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
}
.newsBox .Txt .date {
 font-size: 18px;
 font-weight: 700;
 font-family: "Roboto", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #5a4b41;
 letter-spacing: 1.44px;
 margin-right: 55px;
}
.newsBox .Txt .classTitle {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
     -ms-flex-direction: row;
         flex-direction: row;
 -webkit-box-pack: center;
     -ms-flex-pack: center;
         justify-content: center;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 -ms-flex-negative: 0;
     flex-shrink: 0;
 gap: 8px;
 font-size: 14px;
 font-weight: 500;
 font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #de6500;
 letter-spacing: 0.56px;
 margin-right: 87px;
}
.newsBox .Txt .classTitle svg {
 width: 39px;
 height: 30px;
 color: #5a4b41;
}
.newsBox .Txt .title {
 font-size: 18px;
 font-weight: 500;
 font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #5a4b41;
 letter-spacing: 0.72px;
 height: 26px;
 overflow: hidden;
}
@media (min-width: 1181px) {
 .newsBox .Txt .title a:hover {
  color: #de6500;
 }
}
@media (max-width: 1400px) {
 .newsBox {
  width: calc(100% - 350px);
 }
 .newsBox .Txt .date {
  margin-right: 40px;
 }
 .newsBox .Txt .classTitle {
  margin-right: 50px;
 }
}
@media (max-width: 1180px) {
 .newsBox {
  width: 100%;
  margin-top: 40px;
 }
 .newsBox .Txt {
  height: auto;
  padding: 45px 0;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  border-top: 1px solid #666666;
  border-bottom: 2px solid #de6500;
 }
 .newsBox .Txt .classTitle {
  margin-right: 0;
 }
 .newsBox .Txt .title {
  width: 100%;
  line-height: 1.4;
  height: 51px;
  margin-top: 30px;
 }
}
@media (max-width: 400px) {
 .newsBox {
  margin-top: 20px;
 }
}

.newImgList {
 width: 345px;
 height: 216px;
 position: absolute;
 top: 50px;
 right: 10px;
 pointer-events: none;
}
.newImgList .imgBox {
 border-radius: 9px;
 overflow: hidden;
 position: absolute;
 top: 0;
 left: 0;
 opacity: 0;
 -webkit-transform: translateY(-10px);
         transform: translateY(-10px);
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
}
.newImgList .imgBox.show {
 opacity: 1;
 -webkit-transform: translateY(0);
         transform: translateY(0);
}
.newImgList .Img img {
 width: 100%;
 height: auto;
 display: block;
 -webkit-backface-visibility: hidden;
         backface-visibility: hidden;
}
@media (max-width: 1180px) {
 .newImgList {
  display: none;
 }
}

/* authorArea */
.authorArea {
 padding: 0 0 77px;
 text-align: center;
}
.authorArea::before {
 content: "";
 width: 100%;
 height: calc(100% - 55px);
 background: url(../images/bg_plaid.png);
 position: absolute;
 bottom: 0;
 left: 0;
}
.authorArea .svgPath {
 position: absolute;
 top: 71.5%;
 right: -33px;
}
.authorArea .titleBox {
 display: inline-block;
 text-align: center;
 margin-bottom: 65px;
}
.authorArea .titleBox.show .gear {
 -webkit-animation-delay: 0.5s;
         animation-delay: 0.5s;
}
.authorArea .titleBox.show .gear.gearBig {
 -webkit-animation: rotate 2s linear infinite;
         animation: rotate 2s linear infinite;
}
.authorArea .titleBox.show .gear.gearSmall {
 -webkit-animation: rotateReverse 2s linear infinite;
         animation: rotateReverse 2s linear infinite;
}
.authorArea .titleBox .gear {
 position: absolute;
}
.authorArea .titleBox .gear.gearBig {
 top: -40px;
 right: -42px;
 width: 47px;
 height: 47px;
 -webkit-animation: rotate 2s linear infinite;
         animation: rotate 2s linear infinite;
}
.authorArea .titleBox .gear.gearSmall {
 top: -1px;
 right: -55px;
 width: 20px;
 height: 20px;
 -webkit-animation: rotateReverse 2s linear infinite;
         animation: rotateReverse 2s linear infinite;
}
@media (max-width: 840px) {
 .authorArea .titleBox {
  margin-bottom: 40px;
 }
}
@media (max-width: 400px) {
 .authorArea .titleBox {
  margin-bottom: 30px;
 }
}

.authorBox {
 padding: 0 70px;
}
.authorBox .swiper {
 max-width: 1290px;
 margin: 0 auto;
 padding-top: 15px;
}
.authorBox .swiper-slide {
 height: 698px;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
     -ms-flex-direction: row;
         flex-direction: row;
 -webkit-box-pack: center;
     -ms-flex-pack: center;
         justify-content: center;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 padding-bottom: 120px;
}
.authorBox .swiper-slide.active .item {
 background-color: #f5f0f0;
 width: 100%;
 -webkit-box-pack: start;
     -ms-flex-pack: start;
         justify-content: flex-start;
 height: auto;
}
.authorBox .swiper-slide.active .Txt .content {
 height: 230px;
 overflow-y: auto;
 margin-top: 28px;
}
.authorBox .swiper-slide.active .btnBox {
 bottom: 0;
 opacity: 1;
 pointer-events: auto;
 -webkit-transition: all 0.5s 0.3s;
 transition: all 0.5s 0.3s;
}
.authorBox .swiper-pagination {
 display: none;
}
.authorBox .item {
 background-color: #f6f6f6;
 border-radius: 9px;
 padding: 40px 30px;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
 -webkit-box-pack: center;
     -ms-flex-pack: center;
         justify-content: center;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 width: 330px;
 height: 390px;
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
}
.authorBox .Txt {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
 -webkit-box-pack: start;
     -ms-flex-pack: start;
         justify-content: flex-start;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 margin-top: 25px;
}
.authorBox .Txt .title {
 font-size: 18px;
 font-weight: 600;
 font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #5a4b41;
 letter-spacing: 0.72px;
 margin-bottom: 15px;
}
.authorBox .Txt .subtitle {
 font-size: 16px;
 font-weight: 400;
 font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #5a4b41;
 letter-spacing: 0.64px;
}
.authorBox .Txt .content {
 font-size: 16px;
 font-weight: 400;
 font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #606060;
 letter-spacing: 0.64px;
 line-height: 1.8;
 height: 0;
 overflow-y: hidden;
 padding: 0 5px 0 15px;
 word-break: break-all;
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
}
.authorBox .Txt .content::-webkit-scrollbar-track {
 -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.15);
 box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.15);
 background-color: #fff;
}
.authorBox .Txt .content::-webkit-scrollbar {
 width: 1px;
 height: 1px;
 background-color: #fff;
}
.authorBox .Txt .content::-webkit-scrollbar-thumb {
 background: #de6500;
}
.authorBox .Img {
 width: 150px;
 border-radius: 50%;
 overflow: hidden;
 background-color: #eee;
 -ms-flex-negative: 0;
     flex-shrink: 0;
}
.authorBox .Img img {
 width: 100%;
 height: auto;
 display: block;
 -webkit-backface-visibility: hidden;
         backface-visibility: hidden;
}
.authorBox .Img .linkWrap {
 display: block;
 width: 100%;
 height: 100%;
 margin: auto;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 2;
}
.authorBox .btnBox {
 margin-top: 0;
 position: absolute;
 left: 50%;
 -webkit-transform: translateX(-50%);
         transform: translateX(-50%);
 bottom: 10px;
 opacity: 0;
 pointer-events: none;
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
}
.authorBox .smallMark {
 width: 34px;
 height: 26px;
 color: #de6500;
 position: absolute;
 top: -10px;
 left: 30px;
}
.authorBox .mark {
 width: 83px;
 height: 78px;
 color: #fbfbfb;
 position: absolute;
 bottom: 25px;
 right: 38px;
 -webkit-transform: rotate(180deg);
         transform: rotate(180deg);
}
.authorBox .arrow {
 position: absolute;
 top: 50%;
 -webkit-transform: translateY(-50%);
         transform: translateY(-50%);
}
.authorBox .arrow.prev {
 left: 0;
}
.authorBox .arrow.next {
 right: 0;
}
@media (max-width: 1400px) {
 .authorBox {
  padding: 0 30px;
 }
 .authorBox .arrow.prev {
  left: -30px;
 }
 .authorBox .arrow.next {
  right: -30px;
 }
 .authorBox .item {
  width: 300px;
 }
}
@media (max-width: 1180px) {
 .authorBox {
  padding: 0 50px;
 }
 .authorBox .swiper-slide {
  height: auto;
 }
 .authorBox .swiper {
  padding-bottom: 40px;
 }
 .authorBox .item {
  background-color: #f5f0f0;
  height: auto;
  width: 100%;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
 }
 .authorBox .Txt .content {
  height: 230px;
  overflow-y: auto;
  margin-top: 28px;
 }
 .authorBox .btnBox {
  bottom: 0;
  opacity: 1;
  pointer-events: auto;
 }
 .authorBox .arrow.prev {
  left: -20px;
 }
 .authorBox .arrow.next {
  right: -20px;
 }
}
@media (max-width: 840px) {
 .authorBox {
  padding: 0;
 }
 .authorBox .swiper-slide {
  padding-bottom: 80px;
 }
 .authorBox .arrow {
  display: none;
 }
 .authorBox .swiper-pagination {
  display: block;
 }
 .authorBox .item {
  max-width: 400px;
 }
}
@media (max-width: 400px) {
 .authorBox .Img {
  width: 120px;
 }
 .authorBox .btnBox {
  width: 100%;
 }
 .authorBox .btnBox .btn {
  width: 100%;
 }
 .authorBox .item {
  padding: 30px 20px;
 }
 .authorBox .Txt {
  margin-top: 20px;
 }
 .authorBox .Txt .content {
  margin-top: 20px;
 }
}
/*# sourceMappingURL=home.css.map */