/* 字體 */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap");
@font-face {
  font-family: "Times New Roman";
  src: url(../fonts/times_1.ttf);
}

@font-face {
  font-family: "Noto Sans TC";
  src: url(../fonts/Noto/NotoSansTC-Regular.otf);
}

@font-face {
  font-family: "NotoSerifTC-Bold";
  src: url(../fonts/Noto/NotoSerifTC-Bold.otf);
}

@font-face {
  font-family: "NotoSerifTC-SemiBold";
  src: url(../fonts/Noto/NotoSerifTC-SemiBold.otf);
}

* {
  margin: 0;
  padding: 0;
}

body,
html {
  width: 100%;
  height: 100%;
  min-width: 1200px;
}

a:link,
a:visited,
a:hover,
a:active {
  text-decoration: none;
}

.pointer {
  cursor: pointer;
}

img {
  display: block;
}

/*主要頁面*/
.main {
  width: 100%;
  height: 100vh;
  position: relative;
  background-image: url("../img/03/bg.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  overflow: hidden;
  z-index: 0;
}

.pic {
  width: 100%;
  height: auto;
  position: absolute;
  bottom: 0;
}

.main-l {
  width: 67%;
  height: 100vh;
  float: left;
  position: relative;
}
.main-r {
  width: 33%;
  height: 100vh;
  float: left;
  position: relative;
}

.main-title {
  width: 81%;
  margin: 4% auto auto auto;
  color: #e8bf50;
  font-weight: bold;
  display: block;
}

.main-title::after {
  content: "";
  display: block;
  clear: both;
}

.title-txt-l {
  height: 52px;
  font-family: "NotoSerifTC-Bold";
  font-size: 1.9vw;
  letter-spacing: 0.4vw;
  float: left;
  line-height: 52px;
}

.title-txt-m {
  width: 2px;
  height: 32px;
  margin: 14px 5% 0 4%;
  float: left;
  background-color: #e8bf50;
}

.title-txt-r {
  font-family: "Times New Roman";
  font-weight: 900;
  font-size: 1.5vw;
  line-height: 54px;
  letter-spacing: 0.2vw;
  float: left;
}

.main-txt {
  width: 70%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.main-txt h3 {
  color: #fff;
  font-family: "NotoSerifTC-SemiBold";
  font-size: 1.12vw;
  letter-spacing: 0.2vw;
  line-height: 2.2vw;
  text-align: center;
  margin-top: 13.5%;
}

.banner {
  width: 79%;
  height: auto;
  position: absolute;
  right: 8%;
  top: 50%;
  transform: translateY(-50%);
}

.banner1 {
  width: 23%;
  height: auto;
  position: absolute;
  left: 0;
  bottom: 1.2%;
}

.banner3 {
  width: 23%;
  height: auto;
  position: absolute;
  right: 0;
  bottom: 1.2%;
}

.banner1 .swiper-wrapper {
  margin-bottom: 21%;
}

.banner2 .swiper-wrapper {
  margin-bottom: 12%;
}

.banner3 .swiper-wrapper {
  margin-bottom: 21%;
}

.banner1 .swiper-slide,
.banner3 .swiper-slide {
  background-color: #534740;
}

.banner2 {
  width: 46%;
  height: auto;
  margin: 0 auto;
}

.mask .banner-txt {
  position: absolute;
  left: 6%;
  top: 1%;
  color: #fff;
  font-family: "NotoSerifTC-SemiBold";
  font-size: 1.12vw;
  letter-spacing: 0.2vw;
  line-height: 2.2vw;
}

.txt {
  width: 100%;
  height: 2.2vw;
  position: absolute;
  top: 93.5%;
  transform: none;
  text-align: left;
  color: #fff;
  font-family: "NotoSerifTC-SemiBold";
  font-size: 1.65vw;
  letter-spacing: 0.2vw;
  line-height: 2.2vw;
}

.txt2 {
  width: 100%;
  height: 2.2vw;
  position: absolute;
  top: 88%;
  transform: none;
  text-align: left;
  color: #fff;
  font-family: "NotoSerifTC-SemiBold";
  font-size: 1.12vw;
  letter-spacing: 0.2vw;
  line-height: 2.2vw;
}

.txt3 {
  width: 100%;
  height: 2.2vw;
  position: absolute;
  top: 88%;
  transform: none;
  text-align: left;
  color: #fff;
  font-family: "NotoSerifTC-SemiBold";
  font-size: 1.12vw;
  letter-spacing: 0.2vw;
  line-height: 2.2vw;
}

.banner-txt {
  position: absolute;
  color: #fff;
  font-family: "Noto Sans TC";
  font-size: 0.8vw;
  letter-spacing: 0.1vw;
  right: 2%;
  bottom: 1%;
  z-index: 999;
  text-shadow: 0.1em 0.1em rgba(39, 39, 39, 0.6);
}

.banner-more {
  width: 29px;
  height: 28px;
  background-image: url(../img/03/more.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: absolute;
  right: 16.3%;
  top: 94.6%;
  z-index: 999 !important;
}

.banner-more:hover {
  background-image: url("../img/03/more2.png");
}

.mask {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.banner1 .swiper-wrapper .swiper-slide img,
.banner3 .swiper-wrapper .swiper-slide img {
  mix-blend-mode: multiply !important;
}

/* Target IE 10 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .mask {
    background-color: rgba(0, 0, 0, 0.7);
  }
}

.swiper-button-prev {
  background-image: url(../img/03/arrow-l.png);
  width: 29px !important;
  height: 28px !important;
  z-index: 999 !important;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.swiper-button-next {
  background-image: url(../img/03/arrow-r.png);
  width: 29px !important;
  height: 28px !important;
  z-index: 999 !important;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.swiper-container-rtl .swiper-button-prev {
  background-image: url(../img/03/arrow-r.png);
  right: 0;
}

.swiper-container-rtl .swiper-button-next {
  background-image: url(../img/03/arrow-l.png);
  right: 8.1%;
}

.swiper-container-rtl .swiper-button-next:hover {
  background-image: url("../img/03/arrow-l2.png");
}

.swiper-container-rtl .swiper-button-prev:hover {
  background-image: url("../img/03/arrow-r2.png");
}

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  top: 98%;
}

@media all and (max-width: 1737px) {
  .swiper-button-next,
  .swiper-container-rtl .swiper-button-prev {
    top: 98.3%;
  }
}

@media all and (max-width: 1620px) {
  .swiper-button-next,
  .swiper-container-rtl .swiper-button-prev {
    top: 98.7%;
  }
  .banner-more {
    right: 20.3%;
  }
  .swiper-container-rtl .swiper-button-next {
    right: 10.1%;
  }
}
@media all and (max-width: 1500px) {
  .banner-more {
    top: 94.3%;
  }
}

@media all and (max-width: 1400px) {
  .banner-more {
    top: 94%;
  }
}

@media all and (max-width: 1350px) {
  .banner-more {
    top: 93.7%;
  }
}

@media all and (max-width: 1330px) {
  .swiper-button-next,
  .swiper-container-rtl .swiper-button-prev {
    top: 98%;
  }
  .banner-more {
    top: 93%;
  }
}