.header_show {
  right: -165px;
}
@media (max-width: 991px) {
  .header_show {
    right: 0;
  }
}
.header_show.showbg {
  right: 0;
}
@media (max-width: 991px) {
  .header_show.showbg {
    background: rgba(255, 255, 255, 0.5);
  }
}

.header_show {
  opacity: 1;
}

.ind-tibx {
  padding-right: 36px;
  position: relative;
}
@media (max-width: 991px) {
  .ind-tibx {
    max-width: 53px;
    padding-right: 20px;
  }
}
.ind-tibx .t-ti {
  font-size: 2.5rem;
  line-height: 1.2;
  letter-spacing: 10px;
  font-weight: 500;
  color: #000000;
  font-family: "Noto Serif TC";
  -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
          writing-mode: vertical-lr;
  padding-right: 10px;
  margin-right: 5px;
  border-right: 1px solid #AC0005;
}
@media (max-width: 991px) {
  .ind-tibx .t-ti {
    font-size: 1.25rem;
    padding-right: 7px;
  }
}
.ind-tibx .e-ti {
  font-size: 2.25rem;
  line-height: 1;
  letter-spacing: 0.25px;
  font-weight: 700;
  color: #000000;
  font-family: "Tangerine";
  -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
          writing-mode: vertical-lr;
  position: absolute;
  right: 0;
  top: 0;
}
@media (max-width: 991px) {
  .ind-tibx .e-ti {
    font-size: 1.125rem;
  }
}

.ind-banner {
  height: 100vh;
  position: relative;
}
.ind-banner .compass-bx {
  margin: 0 auto;
  position: absolute;
  top: -210px;
  right: -240px;
  width: 812px;
}
@media (max-width: 1400px) {
  .ind-banner .compass-bx {
    -webkit-transform: scale(0.65);
            transform: scale(0.65);
    top: -300px;
    right: -280px;
  }
}
@media (max-width: 991px) {
  .ind-banner .compass-bx {
    top: -330px;
    right: -350px;
    -webkit-transform: scale(0.46);
            transform: scale(0.46);
  }
}
.ind-banner .compass-bx img:not(:last-child) {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.ind-banner .compass-bx img:nth-child(1) {
  -webkit-animation: timely 3s ease infinite;
          animation: timely 3s ease infinite;
}
.ind-banner .compass-bx img:nth-child(2) {
  -webkit-animation: reversetime 5s ease-in-out infinite;
          animation: reversetime 5s ease-in-out infinite;
}
.ind-banner .compass-bx img:nth-child(3) {
  -webkit-animation: timely 3s ease infinite;
          animation: timely 3s ease infinite;
}
.ind-banner .compass-bx img:nth-child(4) {
  -webkit-animation: reversetime 2s ease-in-out infinite;
          animation: reversetime 2s ease-in-out infinite;
}
.ind-banner .compass-bx img:nth-child(5) {
  -webkit-animation: reversetime 4s ease infinite;
          animation: reversetime 4s ease infinite;
}
.ind-banner .compass-bx img:nth-child(6) {
  -webkit-animation: timely 5s ease infinite;
          animation: timely 5s ease infinite;
}
.ind-banner .compass-bx img:nth-child(8) {
  -webkit-animation: pointer 5s ease infinite;
          animation: pointer 5s ease infinite;
}
@-webkit-keyframes timely {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0);
            transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes timely {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0);
            transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
  }
}
@-webkit-keyframes reversetime {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0);
            transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(-360deg);
            transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes reversetime {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0);
            transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(-360deg);
            transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@-webkit-keyframes pointer {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0);
            transform: translate(-50%, -50%) rotate(0);
  }
  2% {
    -webkit-transform: translate(-50%, -50%) rotate(10deg);
            transform: translate(-50%, -50%) rotate(10deg);
  }
  4% {
    -webkit-transform: translate(-50%, -50%) rotate(-10deg);
            transform: translate(-50%, -50%) rotate(-10deg);
  }
  6% {
    -webkit-transform: translate(-50%, -50%) rotate(10deg);
            transform: translate(-50%, -50%) rotate(10deg);
  }
  8% {
    -webkit-transform: translate(-50%, -50%) rotate(-10deg);
            transform: translate(-50%, -50%) rotate(-10deg);
  }
  10% {
    -webkit-transform: translate(-50%, -50%) rotate(10deg);
            transform: translate(-50%, -50%) rotate(10deg);
  }
  12% {
    -webkit-transform: translate(-50%, -50%) rotate(-10deg);
            transform: translate(-50%, -50%) rotate(-10deg);
  }
  14% {
    -webkit-transform: translate(-50%, -50%) rotate(10deg);
            transform: translate(-50%, -50%) rotate(10deg);
  }
  16% {
    -webkit-transform: translate(-50%, -50%) rotate(-10deg);
            transform: translate(-50%, -50%) rotate(-10deg);
  }
  18% {
    -webkit-transform: translate(-50%, -50%) rotate(10deg);
            transform: translate(-50%, -50%) rotate(10deg);
  }
  20% {
    -webkit-transform: translate(-50%, -50%) rotate(-10deg);
            transform: translate(-50%, -50%) rotate(-10deg);
  }
  22% {
    -webkit-transform: translate(-50%, -50%) rotate(10deg);
            transform: translate(-50%, -50%) rotate(10deg);
  }
  24% {
    -webkit-transform: translate(-50%, -50%) rotate(-10deg);
            transform: translate(-50%, -50%) rotate(-10deg);
  }
  40% {
    -webkit-transform: translate(-50%, -50%) rotate(220deg);
            transform: translate(-50%, -50%) rotate(220deg);
  }
  60% {
    -webkit-transform: translate(-50%, -50%) rotate(-130deg);
            transform: translate(-50%, -50%) rotate(-130deg);
  }
  80% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(-360deg);
            transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes pointer {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0);
            transform: translate(-50%, -50%) rotate(0);
  }
  2% {
    -webkit-transform: translate(-50%, -50%) rotate(10deg);
            transform: translate(-50%, -50%) rotate(10deg);
  }
  4% {
    -webkit-transform: translate(-50%, -50%) rotate(-10deg);
            transform: translate(-50%, -50%) rotate(-10deg);
  }
  6% {
    -webkit-transform: translate(-50%, -50%) rotate(10deg);
            transform: translate(-50%, -50%) rotate(10deg);
  }
  8% {
    -webkit-transform: translate(-50%, -50%) rotate(-10deg);
            transform: translate(-50%, -50%) rotate(-10deg);
  }
  10% {
    -webkit-transform: translate(-50%, -50%) rotate(10deg);
            transform: translate(-50%, -50%) rotate(10deg);
  }
  12% {
    -webkit-transform: translate(-50%, -50%) rotate(-10deg);
            transform: translate(-50%, -50%) rotate(-10deg);
  }
  14% {
    -webkit-transform: translate(-50%, -50%) rotate(10deg);
            transform: translate(-50%, -50%) rotate(10deg);
  }
  16% {
    -webkit-transform: translate(-50%, -50%) rotate(-10deg);
            transform: translate(-50%, -50%) rotate(-10deg);
  }
  18% {
    -webkit-transform: translate(-50%, -50%) rotate(10deg);
            transform: translate(-50%, -50%) rotate(10deg);
  }
  20% {
    -webkit-transform: translate(-50%, -50%) rotate(-10deg);
            transform: translate(-50%, -50%) rotate(-10deg);
  }
  22% {
    -webkit-transform: translate(-50%, -50%) rotate(10deg);
            transform: translate(-50%, -50%) rotate(10deg);
  }
  24% {
    -webkit-transform: translate(-50%, -50%) rotate(-10deg);
            transform: translate(-50%, -50%) rotate(-10deg);
  }
  40% {
    -webkit-transform: translate(-50%, -50%) rotate(220deg);
            transform: translate(-50%, -50%) rotate(220deg);
  }
  60% {
    -webkit-transform: translate(-50%, -50%) rotate(-130deg);
            transform: translate(-50%, -50%) rotate(-130deg);
  }
  80% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(-360deg);
            transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.ind-banner .compass-bx-s {
  top: 65%;
  left: -225px;
  width: 812px;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  position: absolute;
}
@media (max-width: 1400px) {
  .ind-banner .compass-bx-s {
    -webkit-transform: scale(0.6);
            transform: scale(0.6);
  }
}
@media (max-width: 991px) {
  .ind-banner .compass-bx-s {
    -webkit-transform: scale(0.4);
            transform: scale(0.4);
    top: auto;
    bottom: -338px;
    left: -305px;
  }
}
.ind-banner .compass-bx-s img:not(:last-child) {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.ind-banner .compass-bx-s img:last-child {
  -webkit-transform: none !important;
          transform: none !important;
}
.ind-banner .compass-bx-s img:nth-last-child(3) {
  -webkit-transform: translate(-50%, -50%) !important;
          transform: translate(-50%, -50%) !important;
}
.ind-banner .logo-cen {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
@media (max-width: 991px) {
  .ind-banner .logo-cen {
    width: 142px;
  }
}
.ind-banner .ban-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 1920px;
  height: 100%;
  mix-blend-mode: color-burn;
  z-index: -5;
  opacity: 0;
  -webkit-animation: fadeIn 1s 1.5s linear forwards;
          animation: fadeIn 1s 1.5s linear forwards;
}
@media (min-width: 1921px) {
  .ind-banner .ban-bg {
    width: 100%;
  }
}
.ind-banner .ban-bg img {
  width: 100%;
}
.ind-banner .ban-textani {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
}
.ind-banner .ban-textani div {
  font-size: 1.25rem;
  line-height: 1.6;
  letter-spacing: 20px;
  font-weight: 400;
  color: rgba(61, 45, 34, 0.4);
  -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
          writing-mode: vertical-lr;
  -webkit-animation: textdownani 11s linear infinite;
          animation: textdownani 11s linear infinite;
  -webkit-transform: translateY(-60%);
          transform: translateY(-60%);
  opacity: 0;
}
.ind-banner .ban-textani div.start1 {
  -webkit-animation: start1 10s linear infinite !important;
          animation: start1 10s linear infinite !important;
}
.ind-banner .ban-textani div.start2 {
  -webkit-animation: start2 9s linear infinite !important;
          animation: start2 9s linear infinite !important;
}
.ind-banner .ban-textani div.start3 {
  -webkit-animation: start3 6s linear infinite !important;
          animation: start3 6s linear infinite !important;
}
.ind-banner .ban-textani div.start4 {
  -webkit-animation: start4 4s linear infinite !important;
          animation: start4 4s linear infinite !important;
}
.ind-banner .ban-textani div.start5 {
  -webkit-animation: start5 3s linear infinite !important;
          animation: start5 3s linear infinite !important;
}
.ind-banner .ban-textani div.start6 {
  -webkit-animation: start6 2s linear infinite !important;
          animation: start6 2s linear infinite !important;
}
@media (max-width: 991px) {
  .ind-banner .ban-textani div {
    font-size: 0.75rem;
  }
}
.ind-banner .ban-textani div:nth-child(even) {
  -webkit-animation: textdownani 15s linear infinite;
          animation: textdownani 15s linear infinite;
  color: rgba(61, 45, 34, 0.5);
}
.ind-banner .ban-textani div:nth-child(odd) {
  -webkit-animation: textdownani 13s linear infinite;
          animation: textdownani 13s linear infinite;
  color: rgba(61, 45, 34, 0.3);
}
.ind-banner .ban-textani div:nth-child(3n) {
  -webkit-animation: textdownani 17s linear infinite;
          animation: textdownani 17s linear infinite;
  color: rgba(61, 45, 34, 0.2);
}
.ind-banner .ban-textani div:nth-child(4n) {
  -webkit-animation: textdownani 10s linear infinite;
          animation: textdownani 10s linear infinite;
  color: rgba(61, 45, 34, 0.3);
}
.ind-banner .ban-textani div:nth-child(4n-1) {
  -webkit-animation: textdownani 12s linear infinite;
          animation: textdownani 12s linear infinite;
  color: rgba(61, 45, 34, 0.3);
}
.ind-banner .ban-textani div:nth-child(5n) {
  -webkit-animation: textdownani 8s linear infinite;
          animation: textdownani 8s linear infinite;
  color: rgba(61, 45, 34, 0.5);
}
.ind-banner .ban-textani div:nth-child(5n-1) {
  -webkit-animation: textdownani 7s linear infinite;
          animation: textdownani 7s linear infinite;
  color: rgba(61, 45, 34, 0.5);
}
.ind-banner .ban-textani div:nth-child(6n) {
  -webkit-animation: textdownani 19s linear infinite;
          animation: textdownani 19s linear infinite;
  color: rgba(61, 45, 34, 0.3);
}
.ind-banner .ban-textani div:nth-child(6n-1) {
  -webkit-animation: textdownani 11s linear infinite;
          animation: textdownani 11s linear infinite;
  color: rgba(61, 45, 34, 0.3);
}
.ind-banner .ban-textani div:nth-child(7n) {
  -webkit-animation: textdownani 16s linear infinite;
          animation: textdownani 16s linear infinite;
  color: rgba(61, 45, 34, 0.5);
}
.ind-banner .ban-textani div:nth-child(7n-1) {
  -webkit-animation: textdownani 19s linear infinite;
          animation: textdownani 19s linear infinite;
  color: rgba(61, 45, 34, 0.5);
}
.ind-banner .ban-textani div:nth-child(8n) {
  -webkit-animation: textdownani 9s linear infinite;
          animation: textdownani 9s linear infinite;
  color: rgba(61, 45, 34, 0.2);
}
.ind-banner .ban-textani div:nth-child(8n-1) {
  -webkit-animation: textdownani 13s linear infinite;
          animation: textdownani 13s linear infinite;
  color: rgba(61, 45, 34, 0.2);
}
.ind-banner .ban-textani div:nth-child(9n) {
  -webkit-animation: textdownani 12s linear infinite;
          animation: textdownani 12s linear infinite;
  color: rgba(61, 45, 34, 0.5);
}
.ind-banner .ban-textani div:nth-child(9n-1) {
  -webkit-animation: textdownani 26s linear infinite;
          animation: textdownani 26s linear infinite;
  color: rgba(61, 45, 34, 0.5);
}
.ind-banner .ban-textani div:nth-child(10n) {
  -webkit-animation: textdownani 21s linear infinite;
          animation: textdownani 21s linear infinite;
  color: rgba(61, 45, 34, 0.3);
}
.ind-banner .ban-textani div:nth-child(10n-1) {
  -webkit-animation: textdownani 23s linear infinite;
          animation: textdownani 23s linear infinite;
  color: rgba(61, 45, 34, 0.3);
}
.ind-banner .ban-textani div:nth-child(11n) {
  -webkit-animation: textdownani 14s linear infinite;
          animation: textdownani 14s linear infinite;
  color: rgba(61, 45, 34, 0.2);
}
.ind-banner .ban-textani div:nth-child(12n) {
  -webkit-animation: textdownani 18s linear infinite;
          animation: textdownani 18s linear infinite;
  color: rgba(61, 45, 34, 0.5);
}
@-webkit-keyframes textdownani {
  0% {
    -webkit-transform: translateY(-60%);
            transform: translateY(-60%);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
@keyframes textdownani {
  0% {
    -webkit-transform: translateY(-60%);
            transform: translateY(-60%);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
@-webkit-keyframes start1 {
  0% {
    -webkit-transform: translateY(-25%);
            transform: translateY(-25%);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
@keyframes start1 {
  0% {
    -webkit-transform: translateY(-25%);
            transform: translateY(-25%);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
@-webkit-keyframes start2 {
  0% {
    -webkit-transform: translateY(-5%);
            transform: translateY(-5%);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
@keyframes start2 {
  0% {
    -webkit-transform: translateY(-5%);
            transform: translateY(-5%);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
@-webkit-keyframes start3 {
  0% {
    -webkit-transform: translateY(15%);
            transform: translateY(15%);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
@keyframes start3 {
  0% {
    -webkit-transform: translateY(15%);
            transform: translateY(15%);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
@-webkit-keyframes start4 {
  0% {
    -webkit-transform: translateY(30%);
            transform: translateY(30%);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
@keyframes start4 {
  0% {
    -webkit-transform: translateY(30%);
            transform: translateY(30%);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
@-webkit-keyframes start5 {
  0% {
    -webkit-transform: translateY(50%);
            transform: translateY(50%);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
@keyframes start5 {
  0% {
    -webkit-transform: translateY(50%);
            transform: translateY(50%);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
@-webkit-keyframes start6 {
  0% {
    -webkit-transform: translateY(70%);
            transform: translateY(70%);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
@keyframes start6 {
  0% {
    -webkit-transform: translateY(70%);
            transform: translateY(70%);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}

.about-item {
  margin-top: 450px;
}
@media (max-width: 991px) {
  .about-item {
    margin-top: 160px;
  }
}
.about-item .flex-bx {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: 1254px;
  padding: 0 16px;
  width: 90%;
  margin: 0 auto;
  position: relative;
}
@media (max-width: 991px) {
  .about-item .flex-bx {
    display: block;
    padding-bottom: 90px;
  }
}
.about-item .ind-tibx {
  margin-right: 10%;
}
@media (max-width: 1199px) {
  .about-item .ind-tibx {
    margin-right: 4%;
  }
}
@media (max-width: 991px) {
  .about-item .ind-tibx {
    margin-right: 0;
    margin: 0 auto;
    margin-bottom: 45px;
  }
}
.about-item .des-bx {
  width: 34%;
  max-width: 416px;
  margin-right: 5%;
}
@media (max-width: 991px) {
  .about-item .des-bx {
    width: 100%;
    margin: 0 auto;
  }
}
.about-item .des-bx .sh-des {
  margin-bottom: 60px;
}
@media (max-width: 991px) {
  .about-item .des-bx .sh-btn {
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
.about-item .about-img {
  position: relative;
  top: -35px;
}
@media (max-width: 991px) {
  .about-item .about-img {
    margin: 0 auto;
    max-width: 472px;
    top: 0;
  }
}
.about-item .about-img .cir {
  z-index: 1;
}
.about-item .about-img .yufang-img {
  z-index: 3;
  position: absolute;
  top: 0;
  left: 0;
}
.about-item .about-img .cloud-bx {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.about-item .about-img .cloud-bx img {
  position: absolute;
  top: 110px;
  right: -80px;
}
@media (max-width: 767px) {
  .about-item .about-img .cloud-bx img {
    width: 135px;
    top: 90px;
  }
}
.about-item .about-img .cloud-bx2 {
  z-index: 4;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.about-item .about-img .cloud-bx2 img {
  position: absolute;
  left: -30px;
  bottom: 90px;
}
@media (max-width: 767px) {
  .about-item .about-img .cloud-bx2 img {
    width: 135px;
    bottom: 70px;
  }
}
.about-item .about-bannerflex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 185px;
  margin-bottom: 130px;
  position: relative;
}
@media (max-width: 767px) {
  .about-item .about-bannerflex {
    margin-top: 155px;
  }
}
.about-item .about-bannerflex .img-bx {
  width: calc((98vw - 160px) / 2);
}
@media (max-width: 991px) {
  .about-item .about-bannerflex .img-bx {
    width: 49.1vw;
  }
}
.about-item .about-bannerflex .img-bx .ti {
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: 15px;
  font-weight: 300;
  color: #3D2D22;
  font-family: "Noto Serif TC";
  text-align: center;
  font-size: 1.05vw;
}
@media (max-width: 767px) {
  .about-item .about-bannerflex .img-bx .ti {
    letter-spacing: 4px;
    font-size: 2.5vw;
  }
}
.about-item .about-bannerflex .img-bx:nth-child(1) .ti {
  margin-top: 14%;
}
.about-item .about-bannerflex .img-bx:nth-child(2) {
  margin-top: 5.5%;
}
.about-item .about-bannerflex .img-bx:nth-child(2) .ti {
  margin-bottom: 14%;
}
.about-item .about-bannerflex .about-rbg {
  position: absolute;
  right: 0;
  top: -185px;
}
@media (max-width: 991px) {
  .about-item .about-bannerflex .about-rbg {
    width: 235px;
    top: -100px;
    right: -60px;
  }
}
.about-item .about-bannerflex .about-lbg {
  position: absolute;
  left: 0;
  bottom: -130px;
}
@media (max-width: 991px) {
  .about-item .about-bannerflex .about-lbg {
    width: 235px;
    bottom: -75px;
    left: -60px;
  }
}
.about-item .about-bannerflex .red-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 11.8vw;
  height: 11.8vw;
  border: 1px solid #AC0005;
  border-radius: 50%;
}
@media (max-width: 991px) {
  .about-item .about-bannerflex .red-circle {
    width: 13.3vw;
    height: 13.3vw;
  }
}
@media (max-width: 767px) {
  .about-item .about-bannerflex .red-circle {
    width: 12.3vw;
    height: 12.3vw;
  }
}
@media (max-width: 450px) {
  .about-item .about-bannerflex .red-circle {
    width: 10.8vw;
    height: 10.8vw;
  }
}
.about-item .about-bannerflex .red-circle .r-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border: 1px solid #AC0005;
  border-radius: 50%;
}
.about-item .about-bannerflex .red-circle .r-circle:nth-child(1) {
  width: 10.3vw;
  height: 10.3vw;
}
.about-item .about-bannerflex .red-circle .r-circle:nth-child(2) {
  width: 8.8vw;
  height: 8.8vw;
}
.about-item .about-bannerflex .red-circle .r-circle:nth-child(3) {
  width: 7.3vw;
  height: 7.3vw;
}
@media (max-width: 991px) {
  .about-item .about-bannerflex .red-circle .r-circle:nth-child(1) {
    width: 11.8vw;
    height: 11.8vw;
  }
  .about-item .about-bannerflex .red-circle .r-circle:nth-child(2) {
    width: 10.3vw;
    height: 10.3vw;
  }
  .about-item .about-bannerflex .red-circle .r-circle:nth-child(3) {
    width: 8.8vw;
    height: 8.8vw;
  }
}
@media (max-width: 767px) {
  .about-item .about-bannerflex .red-circle .r-circle:nth-child(1) {
    width: 10.8vw;
    height: 10.8vw;
  }
  .about-item .about-bannerflex .red-circle .r-circle:nth-child(2) {
    width: 9.3vw;
    height: 9.3vw;
  }
  .about-item .about-bannerflex .red-circle .r-circle:nth-child(3) {
    width: 7.8vw;
    height: 7.8vw;
  }
}
@media (max-width: 450px) {
  .about-item .about-bannerflex .red-circle .r-circle:nth-child(1) {
    width: 9.5vw;
    height: 9.5vw;
  }
  .about-item .about-bannerflex .red-circle .r-circle:nth-child(2) {
    width: 8vw;
    height: 8vw;
  }
  .about-item .about-bannerflex .red-circle .r-circle:nth-child(3) {
    width: 6.5vw;
    height: 6.5vw;
  }
}

.service-item {
  position: relative;
  margin-top: 220px;
  margin-bottom: 220px;
}
@media (max-width: 991px) {
  .service-item {
    margin-top: 135px;
    margin-bottom: 70px;
  }
}
.service-item .text-center {
  text-align: center;
  margin-bottom: 100px;
}
@media (max-width: 991px) {
  .service-item .text-center {
    margin-bottom: 45px;
  }
}
.service-item .text-center .ind-tibx {
  display: inline-block;
}
.service-item .ser-tbx {
  max-width: 1262px;
  padding: 0 16px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}
@media (max-height: 800px) {
  .service-item .ser-tbx {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}
.service-item .ser-tbx .ser-tbg {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: -1;
}
@media (max-width: 767px) {
  .service-item .ser-tbx .ser-tbg {
    width: 500px;
  }
}
.service-item .ser-tbx ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media (max-width: 991px) {
  .service-item .ser-tbx ul {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}
.service-item .ser-tbx ul li {
  width: 50%;
  margin-bottom: 50px;
  position: static;
  -webkit-transform: none !important;
          transform: none !important;
}
.service-item .ser-tbx ul li:nth-child(5), .service-item .ser-tbx ul li:nth-child(6) {
  margin-bottom: 0;
}
.service-item .ser-tbx ul li:nth-child(1) .ball-bx .imgbg-bx .l-img {
  top: -2px;
}
.service-item .ser-tbx ul li:nth-child(3) {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}
.service-item .ser-tbx ul li:nth-child(4) {
  -webkit-box-ordinal-group: 5;
      -ms-flex-order: 4;
          order: 4;
}
.service-item .ser-tbx ul li:nth-child(5) {
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
}
.service-item .ser-tbx ul li:nth-child(6) {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}
.service-item .ser-tbx ul li .ball-bx {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  border: 1px solid #000;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  -webkit-transition: 0.3s 0.1s ease-in-out;
  transition: 0.3s 0.1s ease-in-out;
}
@media (max-width: 1150px) and (min-width: 992px) {
  .service-item .ser-tbx ul li .ball-bx {
    width: 180px;
    height: 180px;
  }
}
.service-item .ser-tbx ul li .ball-bx::before {
  position: absolute;
  content: "";
  width: 96%;
  height: 96%;
  border: 1px solid #000;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  -webkit-transition: 0.3s 0.1s ease-in-out;
  transition: 0.3s 0.1s ease-in-out;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.service-item .ser-tbx ul li .ball-bx .ti {
  -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
          writing-mode: vertical-lr;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-family: "Noto Serif TC";
  font-size: 1.375rem;
  line-height: 1.3;
  letter-spacing: 0.5px;
  font-weight: 500;
  color: #AC0005;
  height: 100%;
  text-align: center;
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
  opacity: 0;
}
.service-item .ser-tbx ul li .ball-bx .imgbg-bx {
  position: absolute;
  overflow: hidden;
  border-radius: 50%;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.service-item .ser-tbx ul li .ball-bx .imgbg-bx .hov {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  -webkit-transition: 0.3s 0.1s ease-in-out;
  transition: 0.3s 0.1s ease-in-out;
}
.service-item .ser-tbx ul li .ball-bx .imgbg-bx .unhov {
  -webkit-transition: 0.3s 0.1s ease-in-out;
  transition: 0.3s 0.1s ease-in-out;
}
.service-item .ser-tbx ul li .ball-bx .imgbg-bx .l-img {
  position: relative;
  left: 1px;
  top: -1px;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  -webkit-transition: 0.3s 0.1s ease-in-out;
  transition: 0.3s 0.1s ease-in-out;
}
.service-item .ser-tbx ul li .ball-bx .imgbg-bx .r-img {
  position: relative;
  -webkit-transition: 0.3s 0.1s ease-in-out;
  transition: 0.3s 0.1s ease-in-out;
}
.service-item .ser-tbx ul li .des-bx {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  max-width: 420px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
}
.service-item .ser-tbx ul li .des-bx .d-ti {
  color: #AC0005;
  margin-bottom: 10px;
}
.service-item .ser-tbx ul li .des-bx .d-des {
  margin-bottom: 15px;
  min-height: 96px;
  max-height: 96px;
  position: relative;
  overflow: hidden;
}
.service-item .ser-tbx ul li .des-bx .sh-btn {
  margin: 0 auto;
  margin-top: 15px;
}
@media (min-width: 992px) {
  .service-item .ser-tbx ul li:nth-child(4n+1) .ball-bx {
    -webkit-transform: translateX(100px);
            transform: translateX(100px);
  }
  .service-item .ser-tbx ul li:nth-child(4n+2) .ball-bx {
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
  }
  .service-item .ser-tbx ul li:nth-child(3) .ball-bx {
    -webkit-transform: translateX(100px);
            transform: translateX(100px);
  }
  .service-item .ser-tbx ul li:nth-child(4) .ball-bx {
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
  }
  .service-item .ser-tbx ul li.active .ti {
    opacity: 1;
    -webkit-transition: 0.4s 0.1s ease;
    transition: 0.4s 0.1s ease;
  }
  .service-item .ser-tbx ul li.active .ball-bx {
    border: 1px solid #AC0005;
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
  }
  .service-item .ser-tbx ul li.active .ball-bx::before {
    border: 1px solid #AC0005;
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
  }
  .service-item .ser-tbx ul li.active .imgbg-bx .l-img {
    -webkit-transform: rotate(180deg) translateX(50px);
            transform: rotate(180deg) translateX(50px);
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
  }
  .service-item .ser-tbx ul li.active .imgbg-bx .r-img {
    -webkit-transform: translateX(50px);
            transform: translateX(50px);
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
  }
  .service-item .ser-tbx ul li.active .imgbg-bx .hov {
    opacity: 1;
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
  }
  .service-item .ser-tbx ul li.active .imgbg-bx .unhov {
    opacity: 0;
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
  }
  .service-item .ser-tbx ul li.active .des-bx {
    opacity: 1;
    pointer-events: all;
  }
}
@media (max-width: 991px) {
  .service-item .ser-tbx ul li {
    width: 48%;
  }
  .service-item .ser-tbx ul li .ball-bx {
    width: 100%;
    height: auto;
    max-width: 321px;
  }
  .service-item .ser-tbx ul li .ball-bx .ti {
    opacity: 1;
    -webkit-transition: 0.4s 0.1s ease;
    transition: 0.4s 0.1s ease;
    color: #000;
    font-size: 1rem;
  }
  .service-item .ser-tbx ul li .ball-bx .imgbg-bx {
    position: relative;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .service-item .ser-tbx ul li .ball-bx .imgbg-bx .l-img {
    -webkit-transform: rotate(180deg) translateX(30px);
            transform: rotate(180deg) translateX(30px);
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
  }
  .service-item .ser-tbx ul li .ball-bx .imgbg-bx .r-img {
    -webkit-transform: translateX(30px);
            transform: translateX(30px);
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
  }
  .service-item .ser-tbx ul li .des-bx {
    position: relative;
    top: auto;
    left: auto;
    -webkit-transform: none;
            transform: none;
    width: 100%;
    max-width: 321px;
    opacity: 1;
    pointer-events: all;
    margin: 0 auto;
    margin-top: 15px;
  }
  .service-item .ser-tbx ul li .des-bx .d-ti {
    display: none;
  }
  .service-item .ser-tbx ul li .des-bx .d-des {
    min-height: auto;
    max-height: 100%;
  }
}
.service-item .f-bg {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  pointer-events: none;
  margin-top: 160px;
  margin-bottom: 170px;
}
@media (max-width: 991px) {
  .service-item .f-bg {
    width: 800px;
    margin-top: 35px;
    margin-bottom: 80px;
  }
}
.service-item .f-bg .img-bx {
  width: 100%;
  -webkit-animation: leftani 140s linear infinite;
          animation: leftani 140s linear infinite;
}
.service-item .f-bg .img-bx:nth-child(2) {
  position: absolute;
  left: 100%;
  top: 0;
  -webkit-animation: leftani 140s linear infinite;
          animation: leftani 140s linear infinite;
}
.service-item .f-bg img {
  width: 100%;
}
@-webkit-keyframes leftani {
  0% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@keyframes leftani {
  0% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
.service-item .ser-imgbx {
  position: relative;
}
.service-item .ser-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: -1;
  mix-blend-mode: color-burn;
  width: 100vw;
}
.service-item .ser-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: 1466px;
  padding: 0 16px;
  margin: 0 auto;
}
@media (max-width: 991px) {
  .service-item .ser-flex {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
  }
}
.service-item .ser-flex .ti {
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  line-height: 2.2;
  letter-spacing: 15px;
  font-family: "Noto Serif TC";
}
@media (max-width: 991px) {
  .service-item .ser-flex .ti {
    width: 40%;
    padding-right: 14%;
    letter-spacing: 4px;
    font-size: 0.75rem;
  }
}
@media (max-width: 450px) {
  .service-item .ser-flex .ti {
    position: absolute;
    bottom: 23.5%;
    left: 18%;
  }
}
.service-item .ser-flex .ti span {
  margin-top: 120px;
}
@media (max-width: 991px) {
  .service-item .ser-flex .ti span {
    margin-top: 70px;
  }
}
.service-item .ser-flex .bird {
  position: absolute;
  top: 425px;
  left: 57%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media (max-width: 991px) {
  .service-item .ser-flex .bird {
    width: 64px;
    top: auto;
    bottom: 33%;
    left: 25%;
  }
}
.service-item .ser-flex .b-img {
  width: 39%;
  -webkit-box-shadow: 1px 0px 14px 3px rgba(112, 112, 112, 0.5215686275);
          box-shadow: 1px 0px 14px 3px rgba(112, 112, 112, 0.5215686275);
}
.service-item .ser-flex .b-img img {
  width: 100%;
}
@media (max-width: 991px) {
  .service-item .ser-flex .b-img {
    width: 75%;
    margin-bottom: 40px;
  }
}
.service-item .ser-flex .s-img {
  -webkit-box-shadow: 1px 0px 14px 3px rgba(112, 112, 112, 0.5215686275);
          box-shadow: 1px 0px 14px 3px rgba(112, 112, 112, 0.5215686275);
  width: 24.6%;
}
@media (max-width: 991px) {
  .service-item .ser-flex .s-img {
    width: 55%;
    margin-left: auto;
  }
}
.service-item .ser-flex .s-img img {
  width: 100%;
}
.service-item .ser-bimg {
  margin: 0 auto;
  text-align: center;
  margin-top: 80px;
}
@media (max-width: 991px) {
  .service-item .ser-bimg {
    margin-top: 40px;
    width: 65%;
  }
}
.service-item .ser-bimg img {
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
  -webkit-box-shadow: 1px 0px 14px 3px rgba(112, 112, 112, 0.5215686275);
          box-shadow: 1px 0px 14px 3px rgba(112, 112, 112, 0.5215686275);
  border-radius: 50%;
}

.case-item {
  padding-left: 104px;
}
@media (max-width: 991px) {
  .case-item {
    margin-left: 0;
    padding: 0 20px;
  }
}
.case-item .case-list {
  padding: 150px 0;
  right: -150px;
  width: 100%;
}
@media (max-width: 991px) {
  .case-item .case-list {
    right: auto;
    padding: 40px 0;
  }
}
@media (max-width: 991px) {
  .case-item .case-list li {
    padding: 0 35px;
  }
}
.case-item .case-list li:not(:last-child) {
  margin-right: 40px;
}
@media (max-width: 991px) {
  .case-item .case-list li:not(:last-child) {
    margin-right: 0;
  }
}
.case-item .case-list img {
  width: 100%;
}
.case-item .case-list::before {
  position: absolute;
  content: "";
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 86%;
  height: 100%;
  background-color: #F9F8F7;
  mix-blend-mode: multiply;
}
@media (max-width: 991px) {
  .case-item .case-list::before {
    width: 100vw;
    right: -20px;
  }
}
.case-item .flex-bx {
  position: relative;
}
.case-item .flex-bx .ind-tibx {
  position: absolute;
  left: 0;
  top: 0;
}
@media (max-width: 991px) {
  .case-item .flex-bx .ind-tibx {
    position: relative;
    margin: 0 auto;
    margin-bottom: 40px;
  }
}
.case-item .flex-bx .sh-btn {
  position: absolute;
  bottom: 0;
  left: 0;
}
@media (max-width: 991px) {
  .case-item .flex-bx .sh-btn {
    position: relative;
    margin: 0 auto;
    margin-top: 30px;
  }
}
@media (max-width: 991px) {
  .case-item .slick-prev, .case-item .slick-next {
    width: 40px;
    height: 40px;
    background-color: #AC0005 !important;
    opacity: 1 !important;
    border-radius: 50%;
    z-index: 5;
  }
  .case-item .slick-prev::before, .case-item .slick-next::before {
    content: "";
    width: 10px;
    height: 10px;
    border-top: 1px solid rgb(255, 255, 255);
    border-right: 1px solid rgb(255, 255, 255);
    position: absolute;
    top: 50%;
    left: 47%;
    opacity: 1 !important;
  }
}
@media (max-width: 991px) {
  .case-item .slick-prev {
    left: -10px;
  }
  .case-item .slick-prev::before {
    left: 53%;
    -webkit-transform: translate(-50%, -50%) rotate(-135deg);
            transform: translate(-50%, -50%) rotate(-135deg);
  }
}
@media (max-width: 991px) {
  .case-item .slick-next {
    right: -10px;
  }
  .case-item .slick-next::before {
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
            transform: translate(-50%, -50%) rotate(45deg);
  }
}
.case-item .sli-btn {
  position: absolute;
  top: 60px;
  right: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media (max-width: 991px) {
  .case-item .sli-btn {
    display: none;
  }
}
.case-item .sli-btn a.sh-btn {
  display: block;
  width: 56px;
  margin-left: 0;
  position: relative;
  margin: 0 5px;
}
.case-item .sli-btn a.sh-btn .arr-bx {
  margin-left: 0;
}
.case-item .sli-btn a.sh-btn:first-child {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}