body,
html {
width: 100%;
margin: 0;
padding: 0;
}
/*全部*/
.all {
width: 100%;
height: auto;
position: relative;
overflow: hidden;
}
.all::before {
content: "";
position: fixed;
width: 100%;
height: 100vh;
top: 0;
left: 0;
z-index: -1;
background-image: url(../img/03/bg.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.main1 {
width: 100%;
position: relative;
margin: 0;
}
.main1-title {
width: 79%;
font-family: 'Noto Serif TC', serif;
color: #000000;
padding: 9vw 0 0 0;
margin: 0 auto 8.5vw auto;
position: relative;
}
.main1-title h1 {
position: relative;
margin: 0 0 0.8vw 0;
font-weight: 600;
font-size: 0.91vw;
text-align: center;
letter-spacing: 0.3vw;
}
.main1-title h1::after {
content: "";
width: 3.8vw;
height: 3px;
position: absolute;
top: -0.6vw;
left: 50%;
transform: translate(-50%);
background-color: #f5b145;
}
.main1-title h2 {
position: relative;
margin: 0 0 0.7vw 0;
font-weight: 600;
font-size: 1.5vw;
text-align: center;
letter-spacing: 0.3vw;
}
.main1-title h4 {
position: relative;
margin: 0;
line-height: 1.5vw;
font-weight: normal;
font-size: 0.9vw;
letter-spacing: 0.13vw;
text-align: center;
}
.main1-eng {
height: 18vw;
font-family: 'Noto Serif TC', serif;
color: rgba(0, 0, 0, 0.20);
position: absolute;
right: 3.1vw;
top: 17vw;
line-height: 3.5vw;
font-size: 2.5vw;
letter-spacing: 0.5vw;
-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;
animation: main1-eng 1s ease;
animation-fill-mode: forwards;
animation-delay: 1.5s;
opacity: 0;
}
@keyframes main1-eng {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.banner {
width: 47vw;
height: auto;
position: relative;
margin: 0 auto 0 17vw;
cursor: pointer;
}
.swiper-container {
overflow: visible;
}
.swiper-container .swiper-slide {
height: 28.3vw;
}
.swiper-container .swiper-slide a {
width: 100%;
height: 100%;
display: block;
}
.swiper-container .swiper-slide a img {
width: 100%;
height: 100%;
object-fit: cover;
}
.banner .swiper-pagination {
width: fit-content;
position: absolute;
left: auto;
right: -2vw;
bottom: 0;
}
.swiper-pagination-bullet {
background-image: url(../img/01-open/dot2.png);
display: inline-block;
background-repeat: no-repeat;
background-size: contain;
width: 0.75vw;
height: 0.75vw;
margin-top: 0.8vw !important;
opacity: 1;
border: none;
background-color: transparent;
border-radius: 0;
display: block;
}
.swiper-pagination-bullet-active {
background-image: url(../img/01-open/dot1.png);
background-color: transparent;
}
.pic-txt {
position: absolute;
right: 0.5vw;
bottom: 0.5vw;
color: #fff;
font-family: 'Noto Serif TC', serif;
font-size: 0.7vw;
letter-spacing: 0.1vw;
font-weight: 500;
}
.main1-txt {
width: 18vw;
position: absolute;
left: 50.5vw;
bottom: 0vw;
color: #000000;
font-family: 'Noto Serif TC', serif;
}
.main1-txt h2 {
font-size: 0.8vw;
letter-spacing: 0.3vw;
margin: 0 0 0.2vw 0;
font-weight: normal;
}
.main1-txt h4 {
font-size: 1.5vw;
letter-spacing: 0.25vw;
margin: 0;
font-weight: 600;
line-height: 2vw;
}
.main1-txt h5 {
font-size: 0.86vw;
letter-spacing: 0.18vw;
margin: 0.05vw 0 0 0;
font-weight: normal;
}
.main1-txt h6 {
font-size: 0.72vw;
letter-spacing: 0.18vw;
margin: 1vw 0 0 0;
font-weight: normal;
}
.main1-arrow {
width: 3.2vw !important;
height: 0.26vw !important;
position: relative;
overflow: hidden;
margin: 1vw 0 0 0;
}
.main1-arrow-ani {
width: 100%;
height: 100%;
position: absolute;
right: 0;
top: 0;
background-image: url(../img/03/arrow.png);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
transition: all 0.5s ease;
}
.banner:hover .main1-arrow-ani {
animation: main1-arrow-ani 1.5s ease-in-out;
animation-fill-mode: forwards;
}
@keyframes main1-arrow-ani {
0% {
right: 0;
}
50% {
right: -100%;
}
51% {
right: 100%;
}
100% {
right: 0;
}
}
.main1-pic1 {
width: 72vw;
position: absolute;
right: 0;
top: 0;
}
.main1-pic2 {
width: 11vw;
position: absolute;
left: 0;
top: 39vw;
}
.main1-pic3 {
width: 7.5vw;
position: absolute;
right: 0;
top: 39vw;
}
.main1-line {
width: 1px;
height: 0;
position: absolute;
right: 5vw;
top: 0;
background-color: #000;
animation: main1-line 1s ease;
animation-fill-mode: forwards;
animation-delay: 0.5s;
}
@keyframes main1-line {
0% {
height: 0;
}
100% {
height: 16vw;
}
}
.mouse {
width: 0.9vw;
position: absolute;
left: 50%;
transform: translateX(-50%);
animation: mouse 0.6s infinite alternate;
transition-timing-function: ease-out;
}
@keyframes mouse {
0% {
top: 17vw;
}
100% {
top: 18vw;
}
}
.left-menu {
position: fixed;
left: 2.5vw;
top: 50%;
transform: translateY(-50%);
font-family: 'Noto Serif TC', serif;
color: #000;
font-size: 0.7vw;
letter-spacing: 0.1vw;
z-index: 1;
}
.left-menu-li {
position: relative;
margin: 0 0 3vw 0;
display: block;
color: #000;
}
.left-menu-line {
width: 1px;
height: 3vw;
position: absolute;
left: 0.15vw;
top: 1.02vw;
background-color: #000;
transition: all 0.5s linear;
}
.line2 {
top: 5vw;
}
.line2::after {
content: "";
width: 0.5vw;
height: 1px;
background-color: #000;
position: absolute;
left: -0.25vw;
bottom: 0;
}
.left-menu-line-active {
background-color: #f5b145;
}
.main2 {
width: 100%;
position: relative;
margin: 0;
}
.main2-box {
width: 19vw;
height: 6.5vw;
position: absolute;
right: 0;
top: -2.5vw;
background-color: #f5b145;
opacity: 0.4;
}
.main2-box2 {
width: 9.5vw;
height: 13.5vw;
position: absolute;
left: 0;
bottom: -2vw;
background-color: #f5b145;
opacity: 0.4;
}
.main2-eng {
font-family: 'Noto Serif TC', serif;
color: rgba(0, 0, 0, 0.20);
position: relative;
margin: 9vw 0 7vw 13vw;
line-height: 3vw;
font-size: 2.5vw;
letter-spacing: 0.5vw;
opacity: 0;
}
.main2-eng-ani {
animation: main2-eng 1s ease;
animation-fill-mode: forwards;
animation-delay: 1s;
opacity: 0;
}
@keyframes main2-eng {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.main2-line {
width: 0;
height: 1px;
position: absolute;
right: 0;
top: 1.9vw;
background-color: #000;
}
.main2-line-ani {
animation: main2-line 1s ease;
animation-fill-mode: forwards;
}
@keyframes main2-line {
0% {
width: 0;
}
100% {
width: 73.5vw;
}
}
.main2-content {
width: 73%;
position: relative;
margin: 0 auto;
padding: 0 0 15vw 0;
}
.main2-content::after {
content: "";
clear: both;
display: block;
}
.content-li {
width: 35.5%;
margin: 0 0 0 64.5%;
position: relative;
cursor: pointer;
display: block;
}
.l {
margin: -15vw 0 -15vw 0;
}
.img {
width: 100%;
height: 15.8vw;
position: relative;
margin: 0;
}
.img-li {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
transition: all 2s ease;
}
.img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 2s ease;
}
.content-li:hover .img img {
transform: scale(1.07);
}
.mask {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.55);
transition: all 2s ease;
}
.content-li:hover .mask {
animation: mask 0.5s ease;
animation-fill-mode: forwards;
}
@keyframes mask {
0% {
opacity: 1;
height: 100%;
}
100% {
opacity: 0;
height: 0;
}
}
.main2-txt {
width: 11vw;
position: absolute;
right: 26.5vw;
bottom: 0;
color: #000000;
font-family: 'Noto Serif TC', serif;
text-align: right;
}
.l .main2-txt {
right: auto;
left: 26.5vw;
text-align: left;
}
.main2-txt h2 {
font-size: 0.8vw;
letter-spacing: 0.3vw;
margin: 0 0 0.2vw 0;
font-weight: normal;
}
.main2-txt h4 {
font-size: 1.5vw;
letter-spacing: 0.25vw;
margin: 0;
font-weight: 600;
line-height: 2vw;
}
.main2-txt h5 {
font-size: 0.86vw;
letter-spacing: 0.18vw;
margin: 0.05vw 0 0 0;
font-weight: normal;
}
.main2-txt2 {
width: 79%;
min-height: 14vw;
position: relative;
margin: 0.5vw 0 0.5vw 0;
color: #000000;
font-family: 'Noto Serif TC', serif;
font-weight: normal;
font-size: 0.72vw;
letter-spacing: 0.18vw;
text-align: justify;
text-justify: inter-ideograph;
}
.main2-arrow {
width: 3.2vw !important;
height: 0.26vw !important;
position: relative;
overflow: hidden;
margin: 1vw 0 0 0;
float: right;
}
.l .main2-arrow {
float: none;
}
.main2-arrow-ani {
width: 100%;
height: 100%;
position: absolute;
right: 0;
top: 0;
background-image: url(../img/03/arrow.png);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
transition: all 0.5s ease;
}
.content-li:hover .main2-arrow-ani {
animation: main2-arrow-ani 1.5s ease-in-out;
animation-fill-mode: forwards;
}
@keyframes main2-arrow-ani {
0% {
right: 0;
}
50% {
right: -100%;
}
51% {
right: 100%;
}
100% {
right: 0;
}
}
.main2-pic1 {
width: 19vw;
position: absolute;
left: 0;
top: 40vw;
}
.main2-pic2 {
width: 18vw;
position: absolute;
right: 0;
top: 46vw;
}
.main2-pic3 {
width: 23vw;
position: absolute;
right: 0;
bottom: -2vw;
}
.top {
width: 3vw;
position: fixed;
right: 4.5vw;
bottom: 4.5vw;
z-index: 9;
cursor: pointer;
display: none;
}