@keyframes bling {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

.main {
  width: 100%;
  height: 100vh;
  position: relative;
  background-image: url("../img/05/bg.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.pic-txt {
  position: absolute;
  right: 1vw;
  bottom: 2vw;
  color: #fff;
  font-family: "DFHeiStd-W5";
  font-size: 1vw;
  letter-spacing: 0.01vw;
}

.pic-txt-b {
  color: #3e3a39;
}

.main-title {
  width: 29.5%;
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translateX(-50%);
}

.main-menu {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -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;
}

.main-menu-li {
  position: relative;
  margin: 0 5vw 0 8vw;
}

.main-menu-li:first-child {
  margin: 0 5vw 0 0;
}

.main-menu-title {
  color: #bb9977;
  width: 2vw;
  height: 10vw;
  position: absolute;
  right: -5vw;
  top: -2.5vw;
}

.main-menu-title::before {
  content: "";
  position: absolute;
  left: -0.9vw;
  top: 0;
  width: 0.1vw;
  height: 18vw;
  background-image: url(../img/05/line.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.main-menu-title h2 {
  line-height: 2vw;
  margin: 0;
  font-family: "jf-jinxuan-medium";
  font-size: 2vw;
  font-weight: normal;
  letter-spacing: 0.4vw;
  position: relative;
}

.main-menu-title h4 {
  position: absolute;
  bottom: -7.2vw;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 1vw;
  font-weight: normal;
  letter-spacing: 0.1vw;
  font-family: "TrajanPro-Regular";
}

.main-menu-content {
  font-family: "DFHeiStd-W5";
  font-size: 1.09vw;
  letter-spacing: 0.01vw;
  color: #3e3a39;
}

.main-menu-content-li {
  width: 2.2vw;
  line-height: 2.2vw;
  letter-spacing: 0.1vw;
  color: #555456;
  cursor: pointer;
  position: relative;
  transition: all 0.5s ease-in-out;
}

.main-menu-content-li::before {
  content: "";
  position: absolute;
  width: 0.5vw;
  height: 0.5vw;
  left: 50%;
  transform: translateX(-50%);
  top: -1vw;
  background-color: #bb9977;
  transition: all 0.5s ease-in-out;
  opacity: 0;
  visibility: hidden;
}

.main-menu-content-li:hover {
  color: #bb9977;
}

.main-menu-content-li:hover::before {
  opacity: 1;
  visibility: visible;
}

/*banner開圖*/

.open-banner {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 999;
}

.open-banner2 {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 999;
}

.open-pic {
  width: 100%;
  height: 100%;
  padding: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: auto;
  color: #fff;
  text-align: left;
}

.banner-closeBtn {
  width: 5%;
  position: absolute;
  right: 0;
  bottom: 6.5%;
  cursor: pointer;
}

.banner-closeBtn2 {
  width: 5%;
  position: absolute;
  right: 0;
  bottom: 6.5%;
  cursor: pointer;
}

.open-bg {
  width: 100%;
  position: relative;
  overflow: hidden;
}

/*耐震工程*/
.open1-1-pic1 {
  width: 16.6%;
  position: absolute;
  right: 4.6%;
  top: 6.9%;
}

.open1-1-pic2 {
  width: 41.1%;
  position: absolute;
  right: 7.1%;
  top: 5.4%;
}

.open1-1-pic3 {
  width: 40.1%;
  position: absolute;
  right: 1.9%;
  top: 76.8%;
}

.open1-1-pic4 {
  width: 38%;
  position: absolute;
  right: 3.98%;
  top: 77.1%;
}

.open1-1-pic5 {
  width: 44.2%;
  position: absolute;
  right: 4%;
  top: 5.5%;
}

.open1-1-btn {
  width: 43%;
  position: absolute;
  left: 5.8%;
  top: 18.5%;
}

.open1-1-btn-li {
  width: 17%;
  margin: 0 1.5%;
  float: left;
  font-family: "jf-jinxuan-medium";
  font-size: 1.1vw;
  letter-spacing: 0.13vw;
  color: #bb9977;
  font-weight: normal;
  border: 1px solid #bb9977;
  padding: 0.4vw 0;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
}

.open1-1-btn-li-active {
  background-color: rgba(82, 82, 82, 0.75);
  color: #f8f2f1 !important;
}

.open1-1-btn-li:hover {
  background-color: rgba(82, 82, 82, 0.75);
  color: #f8f2f1;
}

.open1-1-btn-li-txt {
  width: 42%;
  position: absolute;
  left: 6.3%;
  top: 26%;
  z-index: 99;
}

.open1-1-btn-li-txt h2 {
  width: 100%;
  font-family: "jf-jinxuan-medium";
  font-size: 1.7vw;
  letter-spacing: 0.15vw;
  color: #bb9977;
  font-weight: normal;
  margin: 0 0 1vw 0;
}

.open1-1-btn-li-txt h3 {
  width: 100%;
  font-family: "jf-jinxuan-medium";
  font-size: 1.5vw;
  letter-spacing: 0.15vw;
  color: #bb9977;
  font-weight: normal;
  margin: 0 0 0.5vw 0;
  line-height: 1.5vw;
}

.open1-1-btn-li-txt h4 {
  width: 100%;
  color: #3e3a39;
  font-weight: normal;
  font-family: "DFHeiStd-W5";
  font-size: 1.09vw;
  letter-spacing: 0.1vw;
  text-align: justify;
  text-justify: inter-ideograph;
  line-height: 2vw;
  margin: 0 0 0 0;
}

.txt-space {
  margin-top: 1vw;
}

/*制震設備*/
.open-txt {
  width: 33%;
  position: absolute;
  left: 6.3%;
  top: 50%;
  z-index: 99;
  transform: translateY(-50%);
}

.open-txt h2 {
  width: 100%;
  font-family: "jf-jinxuan-medium";
  font-size: 1.7vw;
  letter-spacing: 0.15vw;
  color: #bb9977;
  font-weight: normal;
  margin: 0 0 0.8vw 0;
  line-height: 2.7vw;
}

.open-txt h3 {
  width: 100%;
  color: #3e3a39;
  font-weight: normal;
  font-family: "DFHeiStd-W5";
  font-size: 1.2vw;
  letter-spacing: 0.1vw;
  line-height: 2vw;
  margin: 1vw 0 0 0;
}

.open-txt h4 {
  width: 100%;
  color: #3e3a39;
  font-weight: normal;
  font-family: "DFHeiStd-W5";
  font-size: 1.09vw;
  letter-spacing: 0.01vw;
  text-align: justify;
  text-justify: inter-ideograph;
  line-height: 2vw;
  margin: 0 0 0 0;
}

.open-txt h4 ul {
  list-style: none;
  margin: 0;
  padding: 0 0;
}

.open-txt h4 ul li {
  line-height: 1.7vw;
  margin: 0.3vw 0;
  padding: 0 0 0 0.5vw;
  position: relative;
}

.open-txt h4 ul li::before {
  content: "";
  position: absolute;
  left: 0vw;
  top: 0.625vw;
  width: 3px;
  height: 3px;
  background-color: #3e3a39;
  transition: all 0.5 ease-in-out;
}

.open1-2pic1 {
  width: 77%;
  position: relative;
  margin: 0 0 1.5vw 0;
}

.btn {
  width: 7vw;
  color: #bb9977;
  font-weight: normal;
  font-family: "jf-jinxuan-medium";
  font-size: 1.09vw;
  letter-spacing: 0.01vw;
  border: 1px solid #bb9977;
  padding: 1.2% 0;
  text-align: center;
  transition: all 0.5s;
  cursor: pointer;
  margin: 1vw 0 0 0;
}

.btn:hover {
  background-color: rgba(82, 82, 82, 0.75);
  border: 1px solid #be9e7d;
  color: #f8f2f1;
}

.open1-2pic2 {
  width: 52%;
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
}

.open1-2pic3 {
  width: 100%;
  position: absolute;
  left: 0%;
  top: 0%;
  animation: bling 0.6s infinite alternate;
  transition-timing-function: ease-out;
}

.open1-2pic4 {
  width: 66%;
  position: absolute;
  right: 0%;
  top: 0%;
}

.open1-2-open-txt {
  width: 26.5%;
  left: 4%;
}

/*雙排雙向配筋*/
.bg-pic {
  width: 16%;
  position: absolute;
  left: 0;
  bottom: 0;
}

.open2-1-open-txt {
  width: 34%;
  left: 8.6%;
}

.open2-1pic1 {
  width: 46%;
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
}

.open2-1pic2 {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

/*抗震防火輕隔間*/

.open2-2-open-txt {
  width: 26%;
  left: 5%;
}

.open2-2pic1 {
  width: 65%;
  position: absolute;
  right: 0%;
  top: 50%;
  transform: translateY(-50%);
}

.open2-2pic2,
.open2-2pic3 {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

/*抗震防火輕隔間*/

.open2-3-open-txt {
  width: 24.7%;
  left: 4%;
}

.open2-3pic1 {
  width: 64%;
  position: absolute;
  right: 3%;
  top: 52%;
  transform: translateY(-50%);
}

.open2-3pic2,
.open2-3pic3 {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

/*窗框防水*/

.open2-4-open-txt {
  width: 32.7%;
  left: 9%;
}

.open2-4pic1 {
  width: 39%;
  position: absolute;
  right: 7.5%;
  top: 50%;
  transform: translateY(-50%);
}

.open2-4pic2,
.open2-4pic3,
.open2-4pic4,
.open2-4pic5,
.open2-4pic6,
.open2-4pic7 {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

/*外牆防水*/

.open2-5-open-txt {
  width: 33.5%;
  left: 8.5%;
}

.open2-5pic1 {
  width: 43.5%;
  position: absolute;
  right: 7.2%;
  top: 50%;
  transform: translateY(-50%);
}

.open2-5pic2,
.open2-5pic3,
.open2-5pic4,
.open2-5pic5 {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

/*屋頂防水*/

.open2-6-open-txt {
  width: 34.7%;
  left: 7.5%;
}

.open2-6pic1 {
  width: 45%;
  position: absolute;
  right: 6%;
  top: 50%;
  transform: translateY(-50%);
}

.open2-6pic2,
.open2-6pic3 {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

/*垃圾冷藏*/

.open2-7-open-txt {
  width: 34.7%;
  left: 8.5%;
}

.open2-7pic1 {
  width: 45%;
  position: absolute;
  right: 6.3%;
  top: 50%;
  transform: translateY(-50%);
}

.open2-7pic2 {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

/*淨水工法*/

.open2-8-open-txt {
  width: 26.7%;
  left: 6.5%;
}

.open2-8pic1 {
  width: 61.5%;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.open2-8pic1-svg {
  width: 103%;
  position: absolute;
  left: -1.38%;
  top: 8.9%;
  z-index: 999;
}

.open2-8pic2,
.open2-8pic3 {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

/*鮮氧循環*/

.open2-9-open-txt {
  width: 47.7%;
  left: 18.5%;
  top: 12%;
}

.open2-9pic1 {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}

.open2-9pic1-svg {
  width: 78%;
  position: absolute;
  left: 9%;
  top: -9%;
}

.open2-9pic2 {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

/*崇友電梯*/

.open3-1-open-txt {
  width: 26.7%;
  left: 6.5%;
}

.open3-1pic1 {
  width: 99%;
  position: absolute;
  right: 0;
  top: 0;
}

/*光纖通訊*/

.open3-2-open-txt {
  width: 32.7%;
  left: 6.5%;
}

.open3-2-open-txt h2 {
  color: #8b7056;
}

.open3-2pic1 {
  width: 100%;
  position: absolute;
  right: 0;
  top: 0;
}

.open3-2pic2 {
  width: 50.5%;
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
}

.open3-2pic2-svg {
  width: 143%;
  position: absolute;
  left: -47%;
  top: 2.5%;
}

/*人車門禁管制*/

.open3-3-open-txt {
  width: 31.7%;
  left: 6%;
}

.open3-3pic1 {
  width: 100%;
  position: absolute;
  right: 0;
  top: 0;
}

/*網路影像監視*/

.open3-4-open-txt {
  width: 31.7%;
  left: 6%;
}

.open3-4pic1 {
  width: 100%;
  position: absolute;
  right: 0;
  top: 0;
}

/*i Home智能監測*/

.open3-5-open-txt {
  width: 28.7%;
  left: 6.5%;
}

.open3-5pic1 {
  width: 56%;
  position: absolute;
  right: 5%;
  top: 56%;
  transform: translateY(-50%);
}

/*緊急電源*/

.open3-6-open-txt {
  width: 31.7%;
  left: 6.5%;
}

.open3-6pic1 {
  width: 52%;
  position: absolute;
  right: 5%;
  top: 56%;
  transform: translateY(-50%);
}

/*節能玻璃*/

.open4-1-open-txt {
  width: 42%;
  left: 7.5%;
}

.open4-1pic1 {
  width: 100%;
  position: relative;
}

.open4-1pic2 {
  width: 39%;
  position: absolute;
  right: 6%;
  top: 50%;
  transform: translateY(-50%);
}

.open4-1pic3,
.open4-1pic4 {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.open4-1pic3 {
  animation: bling 0.6s infinite alternate;
  transition-timing-function: ease-out;
}

/*玄關門*/

.open4-2-open-txt {
  width: 36%;
  left: 8.5%;
}

.open4-2pic1 {
  width: 38%;
  position: relative;
  margin: 0 0 1.5vw 0;
}

.open4-2pic2 {
  width: 40%;
  position: absolute;
  right: 0;
  top: 0;
}

#open4-2-open .swiper-container {
  width: 100%;
  height: auto;
}

#open4-2-open .swiper-slide {
  width: 100%;
  position: relative;
}

#open4-2-open .swiper-pagination-bullet {
  background-image: url(../img/dot2.png);
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  width: 0.9vw;
  height: 0.9vw;
  margin: 0.2vw 0 !important;
  opacity: 1;
  border-radius: 0;
  border: none;
  background-color: #a0a0a0;
  outline: none;
}

#open4-2-open .swiper-pagination-bullet-active {
  background-image: url(../img/dot1.png);
  background-color: #d6b59a;
  outline: none;
}
#open4-2-open .swiper-container-horizontal > .swiper-pagination-bullets,
#open4-2-open .swiper-pagination-custom,
#open4-2-open .swiper-pagination-fraction {
  left: auto;
  width: 0.9vw;
  right: 1vw;
  top: 47%;
}

.open4-2-open-txt2 {
  width: 29%;
  left: 8.5%;
}

.open4-2pic3 {
  width: 47.2%;
  position: absolute;
  right: 5%;
  top: 50.5%;
  transform: translateY(-50%);
  z-index: 99;
}

.open4-2pic4,
.open4-2pic5 {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.open4-2pic6 {
  width: 66%;
  position: absolute;
  right: 0;
  top: 0;
}

.open4-2-open-txt3 {
  width: 26%;
  left: 4%;
}

/*鋁門窗*/

.open4-3-open-txt {
  width: 35%;
  left: 6.5%;
}

.open4-3pic1 {
  width: 36%;
  position: relative;
  margin: 0 0 1.5vw 0;
}

.open4-3pic2 {
  width: 54%;
  position: absolute;
  right: 0;
  top: 0;
}

.open4-3-open-txt2 {
  width: 26.7%;
  left: 6.5%;
}

.open4-3pic3 {
  width: 100%;
  position: absolute;
  right: 0;
  top: 0;
}

.open4-3pic2-svg {
  width: 169%;
  position: absolute;
  left: -77.8%;
  top: 4.5%;
}

/*bulthaup廚具*/

.open5-1-open-txt {
  width: 48%;
  left: 6.5%;
  top: 73%;
}

.open5-1pic1 {
  width: 30%;
  position: relative;
  margin: 0 0 1vw 0;
}

.open5-1-open-txt h2 {
  color: #b08f6e;
}

.open5-1-open-txt h4 {
  color: #fafafa;
}

.btn-5-1 {
  width: 11vw;
}

.open5-1-banner {
  width: 66%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}
.open5-1-open-txt2 {
  width: 27%;
  position: absolute;
  left: 4%;
  top: 50%;
  z-index: 99;
  transform: translateY(-50%);
}

#open5-1-open .swiper-container {
  width: 100%;
  height: auto;
}

#open5-1-open .swiper-slide {
  width: 100%;
  position: relative;
}

#open5-1-open .swiper-pagination {
  width: 6vw !important;
  height: 2vw;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 30px;
  bottom: 1.3vw !important;
  right: 18vw !important;
  left: auto !important;
  padding-left: 0.5vw;
  box-sizing: border-box;
}

#open5-1-open .swiper-pagination-bullet {
  background-image: url(../img/04-1/dot2.png);
  /* 未轮播到的图片分页样式 */
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  width: 0.9vw;
  height: 0.9vw;
  margin: 0.6vw 0 !important;
  opacity: 1;
  border-radius: 0;
  border: none;
  background-color: transparent;
  outline: none;
}

#open5-1-open .swiper-pagination-bullet-active {
  background-image: url(../img/04-1/dot1.png);
  background-color: transparent;
  outline: none;
}

/*Laufen衛浴*/

.open5-2-open-txt {
  width: 48%;
  left: 6.5%;
  top: 73%;
}

.open5-2pic1 {
  width: 30%;
  position: relative;
  margin: 0 0 1vw 0;
}

.open5-2-open-txt h2 {
  color: #b08f6e;
}

.open5-2-open-txt h4 {
  color: #fafafa;
}

#open5-2 .swiper-container {
  width: 100%;
  height: auto;
}

#open5-2 .swiper-slide {
  width: 100%;
  position: relative;
}

#open5-2 .swiper-pagination-bullet {
  background-image: url(../img/dot2.png);
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  width: 0.9vw;
  height: 0.9vw;
  margin: 0.2vw 0 !important;
  opacity: 1;
  border-radius: 0;
  border: none;
  background-color: #a0a0a0;
  outline: none;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.3);
}

#open5-2 .swiper-pagination-bullet-active {
  background-image: url(../img/dot1.png);
  background-color: #d6b59a;
  outline: none;
}
#open5-2 .swiper-container-horizontal > .swiper-pagination-bullets,
#open5-2 .swiper-pagination-custom,
#open5-2 .swiper-pagination-fraction {
  left: auto;
  width: 0.9vw;
  right: 1vw;
  top: 47%;
}

.open5-2pic2 {
  width: 66%;
  position: absolute;
  right: 0%;
  top: 0%;
}

.open5-2-open-txt2 {
  width: 26.5%;
  left: 4%;
}

/*空氣濾淨*/

.open5-3-open-txt {
  width: 29.5%;
  left: 7.5%;
}

.open5-3pic1 {
  width: 37%;
  position: relative;
  margin: 0 0 1vw 0;
}

.open5-3pic2 {
  width: 100%;
  position: absolute;
  right: 0;
  top: 0;
}

.open5-3pic2-svg {
  width: 82%;
  position: absolute;
  left: 7%;
  top: 6%;
  z-index: 999;
}