body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #f7f8f8;
}

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

img {
  display: block;
}

/*全部*/
.all {
  width: 100%;
  overflow: hidden;
}

/*頁面1*/
.main1 {
  width: 100%;
  height: auto;
  position: relative;
}

.main1-title {
  position: absolute;
  left: 9.7%;
  top: 48%;
  color: #fff;
  text-shadow: 0.15em 0.15em 0.1em #333;
  letter-spacing: 0.1vw;
}

.main1-title h2 {
  font-family: "EBGaramond-VariableFont_wght";
  font-size: 2.1vw;
  font-weight: 500;
  margin: 0;
}

.main1-title h4 {
  font-family: "Noto Serif TC", serif;
  font-size: 1.1vw;
  font-weight: 500;
  letter-spacing: 0.1vw;
  margin: 0;
}

.main1-txt {
  position: absolute;
  right: 9.7%;
  top: 48%;
  color: #fff;
  text-shadow: 0.15em 0.15em 0.1em #333;
  letter-spacing: 0.1vw;
  text-align: right;
}

.main1-txt h3 {
  font-family: "Noto Serif TC", serif;
  font-size: 1.1vw;
  font-weight: 500;
  margin: 0;
}

.main1-txt h4 {
  font-family: "EBGaramond-VariableFont_wght";
  font-size: 1vw;
  font-weight: 500;
  letter-spacing: 0.1vw;
  margin: 4.5% 0 0 0;
}

/*頁面2*/
.main2 {
  width: 100%;
  height: 100vh;
  position: relative;
}

.main2-content {
  width: 80%;
  height: 34.5vw;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.main2-title {
  width: 5.5%;
  height: auto;
  position: absolute;
  right: 0;
  top: 0;
}

.main2-banner1,
.main2-banner1-2 {
  width: 58%;
  height: 34.4vw;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
}

.main2-banner2,
.main2-banner2-2 {
  width: 53%;
  height: 34.4vw;
  position: absolute;
  top: 0;
  left: 14.5%;
  z-index: 3;
}

.main2-banner3,
.main2-banner3-2 {
  width: 47%;
  height: 34.4vw;
  position: absolute;
  top: 0;
  left: 30%;
  z-index: 2;
}

.main2-banner4,
.main2-banner4-2 {
  width: 41%;
  height: 34.4vw;
  position: absolute;
  top: 0;
  left: 45%;
  z-index: 1;
}

.main2-banner5,
.main2-banner5-2 {
  width: 35%;
  height: 34.4vw;
  position: absolute;
  top: 0;
  left: 60%;
  z-index: 0;
}

.main2-year,
.main2-year-2 {
  width: 17vw;
  position: absolute;
  left: -20%;
  bottom: 7.1vw;
  font-size: 7vw;
  color: rgba(207, 189, 175, 0.5);
  z-index: 5;
  transform: rotate(270deg);
  font-family: "Cinzel-Regular";
  text-align: left;
}

.main2-banner-txt {
  position: relative;
  margin: -7% 0 0 0;
  letter-spacing: 0.1vw;
  color: #003f57;
  font-family: "Noto Serif TC", serif;
  line-height: 3vw;
  font-weight: 600;
  z-index: 99;
}

.main2-banner-txt2 {
  position: relative;
  margin: -2% 0 0 0;
  letter-spacing: 0.1vw;
  color: #003f57;
  font-family: "Noto Serif TC", serif;
  line-height: 3vw;
  font-weight: 600;
  z-index: 99;
}

.main2-banner-name,
.main2-banner-name-2 {
  display: inline-block;
  font-size: 1.55vw;
  position: relative;
  padding-right: 1%;
}

.main2-banner-name::after,
.main2-banner-name-2::after {
  content: "";
  width: 1px;
  height: 1.1vw;
  position: absolute;
  background-color: #003f57;
  right: 0;
  top: 1.1vw;
}

.main2-banner-area,
.main2-banner-area-2 {
  display: inline-block;
  font-size: 1.1vw;
  position: relative;
}

.main2-banner-household,
.main2-banner-plain,
.main2-banner-F,
.main2-banner-type,
.main2-banner-household-2,
.main2-banner-plain-2,
.main2-banner-F-2,
.main2-banner-type-2 {
  display: inline-block;
  font-size: 1.1vw;
  position: relative;
  padding-right: 1%;
}

.main2-banner-household::after,
.main2-banner-plain::after,
.main2-banner-F::after,
.main2-banner-household-2::after,
.main2-banner-plain-2::after,
.main2-banner-F-2::after {
  content: "";
  width: 1px;
  height: 1.1vw;
  position: absolute;
  background-color: #003f57;
  right: 0;
  top: 1.1vw;
}

.main2-banner2-year,
.main2-banner2-year-2 {
  width: 17vw;
  position: absolute;
  right: -17%;
  bottom: 13vw;
  font-size: 4.3vw;
  color: rgba(207, 189, 175, 0.5);
  z-index: 5;
  transform: rotate(270deg);
  font-family: "Cinzel-Regular";
  text-align: left;
}

.main2-banner2-year3 {
  right: -19.2%;
  bottom: 16.2vw;
}

.main2-banner2-year4 {
  right: -22.1%;
  bottom: 19.3vw;
}

.main2-banner2-year5 {
  right: -26%;
  bottom: 22.4vw;
}

.main2-banner2-name,
.main2-banner2-name-2 {
  position: relative;
  margin: 1% 0 0 0;
  letter-spacing: 0.1vw;
  color: #003f57;
  font-family: "Noto Serif TC", serif;
  line-height: 1vw;
  font-weight: 600;
  float: right;
  -ms-writing-mode: tb-lr !important;
  -webkit-writing-mode: vertical-lr !important;
  -moz-writing-mode: vertical-lr !important;
  -ms-writing-mode: vertical-lr !important;
  writing-mode: vertical-lr !important;
  font-size: 1.09vw;
  background-color: #f7f8f8;
}

.main2 .swiper-container {
  height: 34.4vw !important;
}

.main2 .swiper-slide {
  background-color: #f7f8f8 !important;
  height: 34.4vw !important;
  cursor: pointer;
}

.main2 .swiper-slide-active {
  opacity: 1 !important;
}

.main2 .swiper-slide-next {
  opacity: 0 !important;
}

.main2-banner-cover {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.read-more-blue {
  width: 11vw;
  height: 0.65vw;
  position: absolute;
  right: 0;
  bottom: 1%;
  display: block;
  background-image: url("../img/03/read-more-blue.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  transition: all 0.5s;
  cursor: pointer;
  z-index: 999;
}

.read-more-blue:hover {
  background-image: url("../img/03/read-more-blue2.png");
}

.year {
  width: 7vw;
  height: 34.4vw;
  position: absolute;
  right: -8%;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Cinzel-Regular";
  color: #003f57;
  font-weight: bold;
  font-size: 1.15vw;
  letter-spacing: 0.06vw;
}

.year-line {
  width: 1px;
  height: 100%;
  position: fixed;
  left: 2.5px;
  top: 0;
  background-color: #003f57;
}

.year-all {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.year-all-long{
  height: 34.4vw;
  line-height: 34.4vw;
  display: inline-block;
  vertical-align: middle;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  transform: none;
  left: auto;
  top: auto;
}

.year-all-long::-webkit-scrollbar {
  display: none;
}

.year-value,
.year-value2 {
  width: 6vw;
  height: 2vw;
  line-height: 2vw;
  margin: 19% 0;
  position: relative;
  cursor: pointer;
}

.year-dot {
  width: 6.5px;
  height: 6.5px;
  border-radius: 100%;
  background-color: #003f57;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.year-num {
  display: inline-block;
  padding-left: 19%;
}

.active .year-dot,
.active2 .year-dot {
  background-color: #8a7363;
}

.active .year-num,
.active2 .year-num {
  color: #8a7363;
  font-size: 1.55vw;
}

.main2-menu {
  width: 12vw;
  position: absolute;
  left: 11%;
  top: 5%;
  color: #003f57;
  font-family: "Noto Serif TC", serif;
  line-height: 2vw;
  font-weight: 600;
  font-size: 1.15vw;
}

.main2-menu-li {
  width: 50%;
  float: left;
  position: relative;
  cursor: pointer;
}

.main2-menu-li:first-child::after {
  content: "";
  width: 1px;
  height: 1.1vw;
  position: absolute;
  background-color: #003f57;
  right: 10%;
  top: 0.52vw;
}

.menu-active {
  color: #8a7363;
}

.menu-active-dot {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 100%;
  background-color: #8a7363;
  position: absolute;
  left: 37%;
  bottom: -12%;
  display: none;
}

.menu-active .menu-active-dot {
  display: block;
}