body,
html {
width: 100%;
margin: 0;
padding: 0;
background-color: #edeae6;
}
a:link,
a:visited,
a:hover,
a:active {
text-decoration: none;
}
img {
display: block;
width: 100%;
}
.visible {
opacity: 1;
visibility: visible;
}
.hidden {
opacity: 0;
visibility: hidden;
}
/*全部*/
.main {
width: 100%;
height: auto;
position: relative;
}
.banner {
width: 100%;
height: 42.3vw;
position: relative;
margin: 3vw auto 0 auto;
overflow: hidden;
}
.main1-txt {
position: absolute;
left: 15vw;
top: 10.5vw;
font-size: 1.1vw;
font-weight: normal;
letter-spacing: 0.5vw;
font-family: 'Noto Serif TC', serif;
color: #fff;
-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;
}
.banner img {
width: 100%;
height: 100%;
object-fit: cover;
animation: img-ani 6s linear;
animation-fill-mode: forwards;
}
@keyframes img-ani {
0% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
@-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-30%, 0, 0);
transform: translate3d(-30%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-30%, 0, 0);
transform: translate3d(-30%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.main2 {
width: 100%;
position: relative;
margin: 12vw auto 0 auto;
overflow: hidden;
}
/*選單*/
.menu-banner {
width: 100vw;
height: 264vw;
position: relative;
margin: 0;
z-index: 9;
}
.menu-banner .swiper-container {
width: 100% !important;
height: 100% !important;
}
.menu-banner .swiper-container .swiper-slide {
width: 100% !important;
height: 100% !important;
box-sizing: border-box;
}
.menu-banner .swiper-pagination {
width: 108px!important;
left: auto!important;
right: 12vw;
z-index: 9999;
box-sizing: border-box;
bottom: 11vw;
}
.menu-banner .swiper-pagination-bullet {
background-color: #595757;
border: 1px solid #595757;
opacity: 1;
position: relative;
}
.menu-banner .swiper-pagination-bullet::after {
content: "";
width: 8px;
height: 0.5px;
background-color: #595656;
position: absolute;
top: 50%;
transform: translate(0, -50%);
left: 9px;
z-index: -1;
}
.menu-banner .swiper-pagination-bullet:last-child::after {
background-color: transparent;
}
.menu-banner .swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 1vw 0;
}
.menu-banner .swiper-pagination-bullet-active {
background-color: #edeae6 !important;
}
.swiper-button-prev {
background-image: url(../img/02/arrow-l.png);
width: 4vw !important;
height: 1.6vw !important;
z-index: 999 !important;
left: -4vw;
top: 3.2vw!important;
transform: rotate(-90deg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
overflow: hidden;
}
.swiper-button-next {
background-image: url(../img/02/arrow-r.png);
width: 4vw !important;
height: 1.6vw !important;
z-index: 999 !important;
right: -4vw;
top: 3.2vw!important;
transform: rotate(-90deg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
overflow: hidden;
}
.menu-banner .swiper-button-prev {
left: 3vw;
top: 97.2vw!important;
position: fixed;
}
.menu-banner .swiper-button-next {
right: 3vw;
top: 97.2vw!important;
position: fixed;
}
.content {
width: 100vw;
height: 100%;
position: relative;
margin: 0vw 0 6vw 0;
}
.circle-bg {
width: 53.5vw;
position: absolute;
left: 0;
top: 0vw;
}
.pic {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.circle {
width: 33.2%;
position: absolute;
left: 26.1%;
top: 5.4%;
}
.txt {
width: 68vw;
position: absolute;
left: 19vw;
top: 71vw;
font-family: 'Noto Serif TC', serif;
}
.txt h1 {
width: 100%;
margin: 0 0 0 0;
font-size: 3.8vw;
letter-spacing: 0.1vw;
font-weight: normal;
color: #898989;
}
.txt h2 {
width: 100%;
margin: 0 0 11.5vw 0;
font-size: 3.8vw;
letter-spacing: 0.1vw;
font-weight: normal;
color: #898989;
text-transform: uppercase;
position: relative;
}
.txt-h3 {
position: absolute;
left: 3.2vw;
bottom: 12.7vw;
font-size: 2.8vw;
letter-spacing: 0.4vw;
color: #595757;
font-weight: normal;
text-transform: uppercase;
font-family: 'Noto Serif TC', serif;
-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;
}
.txt h2::after {
content: "";
width: 3.5vw;
height: 3px;
position: absolute;
left: 0;
bottom: -5.3vw;
background-color: #555136;
}
.txt h4 {
width: 100%;
margin: 0 0 2vw 0;
font-size: 3.8vw;
letter-spacing: 0.01vw;
color: #595757;
font-weight: normal;
}
.txt h5 {
width: 100%;
margin: 0 0 5.4vw 0;
line-height: 5vw;
font-size: 2.8vw;
letter-spacing: 0.01vw;
color: #595757;
font-weight: normal;
text-align: justify;
text-justify: inter-ideograph;
}
.txt h6 {
width: 100%;
margin: 0 0 4vw 0;
line-height: 5vw;
font-size: 2.8vw;
letter-spacing: 0.01vw;
color: #595757;
font-weight: normal;
text-align: justify;
text-justify: inter-ideograph;
}
.h6-title {
color: #727171;
position: relative;
margin: 0 0 2.2vw 2.5vw;
}
.h6-title::before {
content: "";
width: 1px;
height: 3.6vw;
background-color: #727171;
position: absolute;
left: -2vw;
top: 50%;
transform: translateY(-50%);
}
.h6-title::after {
content: "";
width: 1px;
height: 3.6vw;
background-color: #727171;
position: absolute;
left: 14.6vw;
top: 50%;
transform: translateY(-50%);
}
.h6-title-long::after {
left: 28vw;
}
.project {
width: 24vw;
height: 6vw;
line-height: 6vw;
font-size: 2.8vw;
letter-spacing: 0.01vw;
color: #727171;
font-weight: normal;
text-transform: uppercase;
font-family: "Cinzel-Regular";
cursor: pointer;
margin: 10vw 0 0 0;
border: 0.5px solid #727171;
text-align: center;
border-radius: 0.1vw;
}
.content-line {
width: 0.5px;
height: 72%;
position: absolute;
left: 9.5vw;
top: 61vw;
background-color: #b5b5b6;
}
.content-pic {
width: 1vw;
position: absolute;
left: 0;
bottom: 0;
}
/*頁面跳出視窗*/
.black {
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 1001;
display: none;
overflow: scroll;
background-color: rgba(35, 37, 35, 0.9);
}
.close {
width: 5.8vw;
position: fixed;
right: 6vw;
top: 4vw;
cursor: pointer;
z-index: 9;
}
.open-banner {
width: 77vw;
height: auto;
margin: 31vw auto 1vw auto;
position: relative;
}
.open-banner::after {
content: "";
width: 100%;
height: 1px;
background-color: #fff;
position: absolute;
bottom: 7vw;
left: 0;
}
.open-banner .swiper-container {
width: 100%;
height: auto;
overflow: visible;
}
.open-banner .swiper-slide {
width: 100%!important;
}
.banner-txt {
position: relative;
margin: 5.8vw 0 0 0;
font-family: 'Noto Serif TC', serif;
color: #fff;
font-size: 2.8vw;
letter-spacing: 0.1vw;
z-index: 999;
transition: all 0.5s linear;
}
.open-banner .title {
width: 100%;
position: relative;
margin: 0 0 16.7vw 0;
font-family: 'Noto Serif TC', serif;
}
.open-banner .title h2 {
width: 100%;
margin: 0 0 0.4vw 0;
font-size: 3.8vw;
letter-spacing: 0.01vw;
font-weight: normal;
color: #b9bda0;
text-transform: uppercase;
white-space: nowrap;
}
.open-banner .title h3 {
position: absolute;
left: 0;
bottom: 7vw;
margin: 0;
font-size: 2.8vw;
letter-spacing: 0.01vw;
color: #7d7d7d;
font-weight: normal;
text-transform: uppercase;
font-family: 'Noto Serif TC', serif;
}
/*兩張圖*/
.open-banner .swiper-pagination {
width: 12vw!important;
left: auto!important;
bottom: 0.2vw!important;
right: -1vw;
z-index: 9999;
}
.open-banner3 .swiper-pagination {
width: 18vw!important;
}
/*三張圖*/
.open-banner .swiper-pagination3 {
width: 18vw!important;
right: -1.3vw;
}
.open-banner .swiper-pagination-bullet {
width: 3.8vw;
height: 1px;
margin: 0 1vw!important;
background: #eeebe6;
border-radius: 0;
opacity: 1;
}
.open-banner .swiper-pagination-bullet-active {
background: #b9bda0;
}
.open-txt {
width: 10vw;
position: absolute;
left: 0;
top: 1vw;
}
/*開圖選單*/
.menu-open {
width: 78vw;
height: 10vw;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 41.2vw;
z-index: 9;
}
.menu-open .swiper-container .swiper-slide {
width: 16.666666666666667% !important;
height: 10vw;
box-sizing: border-box;
cursor: pointer;
transition: all 0.5s ease-in-out;
cursor: pointer;
}
.open-img {
width: 90%;
margin: 0 auto;
height: 10vw;
position: relative;
box-sizing: border-box;
transition: all 0.5s ease;
}
.open-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.menu-open .swiper-container .swiper-slide:hover .open-img {
border: 2px solid #b9bda0;
}
.menu-open-active .open-img {
border: 2px solid #b9bda0;
}
.menu-open .swiper-container {
height: 11vw;
}
.menu-open .swiper-button-prev {
top: 10.2vw!important;
}
.menu-open .swiper-button-next {
top: 10.2vw!important;
}
.menu-open .swiper-button-next.swiper-button-disabled,
.menu-open .swiper-button-prev.swiper-button-disabled {
display: none;
}