.top_img_txt{
width: 100%;
height: auto;
position: absolute;
top: 0;
display: block; /* 避免底部空隙 */
}
.top_img{
width: 100%;
height: auto;
position: absolute;
top: 0;
display: block; /* 避免底部空隙 */
}
.top_img1{
width: 100%;
height: auto;
position: absolute;
top: 0;
display: block; /* 避免底部空隙 */
}
.top_img2{
width: 100%;
height: auto;
position: absolute;
top: 10vh;
display: block; /* 避免底部空隙 */
}
@font-face {
font-family: 'EDI';
src: url('https://static.igem.wiki/teams/5855/fonts/eras-demi-itc.ttf') format('truetype');
}
p h1{
font-family: EDI, serif;
}
.mask-top{
width: 130%;
height: auto;
position: relative;
top: 0;
display: block; /* 避免底部空隙 */
}
.bg-hero-container{
position: relative;
top: -80px;
}
.hero-content{
display: flex;
flex-direction: row;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.sz{
width: 20%;
height: auto;
}
.tissue{
width: 20%;
height: auto;
position: absolute;
width: 100%;
text-align: left;
left: 10%;
font-size: 3.4rem;
font-weight: bold;
color: #0040d6;
z-index: 99;
font-family: EDI, serif;
margin-top: 15%;
}
yellow{
color: #ec8e26;
}
body, html {
overflow-x: hidden !important;
width: 100vw;
max-width: 100vw;
}
.sect-container {
position: relative;
width: 100vw;
/* 原先固定高度会导致需刷新两次: height:15200px; */
/* height:15200px; */
/* overflow: hidden !important; */
min-height: 1700vh; /* 基础占位，后续 JS 动态写入 height */
margin: 0 auto;
overflow: hidden !important;
max-width: 100vw;
will-change: height;
}
.sect1-person {
position: absolute;
top: 8%;
left: 8vw;
width: 100%;
z-index: 2;
}
.sect1-shadow {
position: absolute;
top: 8%;
left: 11vw;
width: 90%;
z-index: 1;
}
.layout-flex {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.page-content {
flex: 1;
}
.sect1-person-text {
position: absolute;
right: 7%;
top: 9.8%;
transform: translateY(-50%);
color: #0040d6;
font-size: 2.2rem;
font-family: "EDI", serif;
font-weight: bold;
background: rgba(255,255,255,0.7);
padding: 12px 32px;
border-radius: 16px;
z-index: 3;
text-align: left;
max-width: 60%;
}
.sect1-earth-container {
position: absolute;
left: 50%;
top: 37%;
transform: translate(-50%, -50%);
width: 100vw;
height: auto;
display: flex;
align-items: center;
justify-content: center;
z-index: 4;
}
.sect1-clothes{
height: 52vh;
width: auto;
object-fit: contain;
z-index: 4;
margin-top: 60%;
}
.sect1-tr {
height: 42vh;
width: auto;
object-fit: contain;
z-index: 4;
}
.sect1-earth-cloud-wrap {
position: relative;
}
.sect1-tr {
animation: tr-bounce 2.5s linear infinite;
}
.sect1-factory, .sect1-factory2 {
animation: factory-scale 5s ease-in-out infinite;
}
.sect1-earth-desc {
position: absolute;
top: 20%;
left: 20%;
transform: translateX(-50%);
margin: 24px 0 0 0;
text-align: center;
font-size: 2.3rem;
color: #979fa0;
font-weight: 500;
max-width: 70vw;
width: 70vw;
line-height: 1.7;
font-family: "EDI", serif;
}
.sect1-factory-stack {
position: relative;
top: calc(18% + 50vh);
left: 50%;
transform: translateX(-50%);
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
width: 400px;
max-width: 90vw;
}
.sect1-factory-imgs {
position: relative;
width: 100vw;
height: auto;
}
.sect1-factory {
position: absolute;
left: 0;
top: 0;
width: 100vw;
height: auto;
object-fit: contain;
z-index: 1;
}
.sect1-factory2 {
position: absolute;
left: 0;
top: 0;
width: 100vw;
height: auto;
object-fit: contain;
z-index: 2;
opacity: 0.7;
}
.sect1-gnd-factory {
margin-top: 50%;
left: -5vw;
right: -5vw;
width: 110vw;
height: auto;
object-fit: contain;
z-index: 3;
}
.sect1-base-stack {
position: relative;
width: 65vw;
height: 65vh;
margin: 0 auto;
top: 16%;
overflow: visible;
z-index: 10;
}
.sect1-clothes {
position: absolute;
left: -18vw;
top: -30vh;
width: 30vw;
height: auto;
object-fit: contain;
z-index: 11;
animation: clothes-bounce 2.5s ease-in-out infinite;
}
.sect1-tr {
position: absolute;
right: -20vw;
top: -10vh;
width: 30vw;
height: auto;
object-fit: contain;
z-index: 11;
animation: tr-bounce 2.5s ease-in-out infinite;
}
.base-bottom,
.base-top,
.base-ground,
.base-cloud {
position: absolute;
left: 0;
top: 0;
width: 65vw;
height: 65vh;
object-fit: contain;
}
.ground-strip {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 35vw; /* 原为40vw，改为更小的高度 */
background-image: url('https://static.igem.wiki/teams/5855/home/linear-ground.webp');
background-repeat: repeat-x;
background-size: auto 35vw;
background-position-x: 0;
z-index: 2;
pointer-events: none;
}
.cloud-strip {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 35vw; /* 原为40vw，改为更小的高度 */
background-image: url('https://static.igem.wiki/teams/5855/home/linearcloud.webp');
background-repeat: repeat-x;
background-size: auto 35vw;
background-position-x: 0;
z-index: 3;
opacity: 0.7;
pointer-events: none;
}
.mask-eth-img {
position: absolute;
left: 50%;
top: 50%;
width: 90%;
height: 90%;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 10;
}
.base-scroll-wrap {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 35vw; /* 保持与条带一致 */
overflow: hidden;
z-index: 2;
-webkit-mask-image: url('https://static.igem.wiki/teams/5855/home/mask-eth.webp');
mask-image: url('https://static.igem.wiki/teams/5855/home/mask-eth.webp');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
/* 临时测试遮罩机制 */
/* .base-scroll-wrap {
-webkit-mask-image: linear-gradient(white, white);
mask-image: linear-gradient(white, white);
} */
.ground-mask {
/* 可根据实际 strip 位置微调遮罩位置 */
top: 0;
}
.cloud-mask {
/* 可根据实际 strip 位置微调遮罩位置 */
top: 0;
}
@keyframes ground-scroll {
0% { left: 0; }
100% { left: -600px; }
}
@keyframes ground-scroll2 {
0% { left: 600px; }
100% { left: 0; }
}
@keyframes cloud-scroll {
0% { left: 0; }
100% { left: -600px; }
}
@keyframes cloud-scroll2 {
0% { left: 600px; }
100% { left: 0; }
}
yellow-big {
color: #fcc30b!important;
font-size: 3.4rem;
}
large-Grey{
font-size: 3.6rem;
color: #979fa0!important;
font-weight: 900;
line-height: 1.7;
}
#cl-final-dropped {
position: fixed;
left: 50%;
transform: translateX(-50%);
top: 20vh;
width: 20vw;
max-width: 600px;
min-width: 200px;
z-index: 1000;
opacity: 0;
pointer-events: none;
transition: top 0.3s, opacity 0.3s;
display: block;
}
.gnd-factory-desc {
position: absolute;
top: 24%;
left: 50%;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(20px);
font-family: "EDI", serif;
transform: translateX(-50%);
width: 60vw;
text-align: center;
line-height: 1.7;
font-size: 2.6rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.8);
background: rgba(0, 0, 0, 0.79);
padding: 24px 30px 16px 30px;
border-radius: 18px;
z-index: 10;
box-shadow: 0 4px 24px rgba(0,0,0,0.08);
pointer-events: none;
opacity: 0;
transition: opacity 0.3s;
}
#washing-img {
display: block;
width: 80vw;
height: auto;
}
#bubble-img {
z-index: 999;
display: block;
opacity: 0.6;
margin: -26% 15% 0 0; /* 与washing-img间距适中 */
width: 20vw;
height: auto;
}
#bubble-img1 {
z-index: 999;
opacity: 0.9;
display: block;
margin-top: -10%;
margin-left: -20%;
width: 12vw;
height: auto;
}
#bubble-img2 {
z-index: 999;
display: block;
margin-top: -40%;
opacity: 0.6;
width: 16vw;
margin-left: 20%;
height: auto;
}
#wave-canvas {
display: block;
margin-top: -200px;
width: 100vw;
max-width: 100vw;
height: 400px;
background: transparent;
pointer-events: none;
}
#wave-bg-box {
position: relative;
width: 100vw;
height: 100vh;
background: linear-gradient(180deg, #72b1ec 0%, #d0dfed 100%);
overflow: hidden;
}
#fish-img, #tort-img {
position: absolute;
top: 40vh;
width: 22vw;
max-width: 320px;
min-width: 120px;
height: auto;
z-index: 2;
pointer-events: none;
}
#fish-img {
left: -40vw;
}
#tort-img {
right: -40vw;
}
/* 橙色颗粒样式 */
.bubble-particle {
background: orange;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(255,140,0,0.18);
opacity: 0.85;
position: absolute;
pointer-events: none;
transition: box-shadow 0.2s;
}
#bubble-particles {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1000;
opacity: 0; /* 初始隐藏，进入视口后再显示 */
transition: opacity 0.4s ease;
}
.bubble-particles-active { opacity: 1 !important; }
#washing-info-box {
position: fixed;
left: 50%;
top: 80%;
transform: translate(-50%, -50%);
z-index: 9999;
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.33);
border-radius: 18px;
box-shadow: 0 8px 32px rgba(0,0,0,0.12);
padding: 32px 48px 32px 24px;
opacity: 0;
width:fit-content;
backdrop-filter: blur(20px);
pointer-events: none;
transition: opacity 0.3s;
}
.washing-info-text {
font-size: 2.3rem;
color: #333;
width: 90vw;
font-family: 'EDI', serif;
font-weight: 500;
margin-left: 18px;
line-height: 1.3;
text-align: center;
}
.washing-info-num {
font-size: 3rem;
font-weight: bold;
color: #ec8e26;
transition: font-size 0.3s;
}
.top-txt {
position: absolute;
top: 7vw;
left: 10vw;
font-size: 4.4rem;
font-family: 'EDI', serif;
font-weight: bold;
z-index: 9;
color: #002aaf;
text-align: left;
line-height: 1.2;
}
.cotton-section {
position: relative;
display: flex;
top: 20.8%;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 80px 0 40px 0;
}
.cotton-img {
width: 20vw;
max-width: 320px;
min-width: 120px;
height: auto;
display: block;
margin-bottom: 24px;
}
.cotton-desc {
font-size: 2.0rem;
color: #333;
font-family: "EDI", serif;
text-align: center;
margin-bottom: 32px;
max-width: 600px;
line-height: 1.7;
}
.cotton-stack {
position: relative;
width: 100vw;
margin-top: -16%;
height: auto;
max-width: 100vw;
min-width: 180px;
max-height: 480px;
min-height: 180px;
}
.cotton-stack img {
position: absolute;
transition: left 0.3s, top 0.3s, z-index 0.3s;
}
.cotton-gnd-final {
left: -10vw;
top: -220%;
z-index: 2;
width: 120vw;
height: auto;
}
.cotton-man {
position: relative;
left: 76%;
top: 70%;
z-index: 3;
width: 20%;
height: auto;
}
.cotton-stick {
position: absolute;
left: 58%;
margin-top: 19%;
z-index: 2;
width: 25%;
height: auto;
transform-origin: 100% 0%;
animation: rotate-stick 1s infinite alternate ease-in-out;
}
@keyframes rotate-stick {
from {
transform: rotate(0deg);
}
to {
transform: rotate(10deg);
}
}
/*.cotton-man {*/
/* left: 76%;*/
/* top: 70%;*/
/* z-index: 3;*/
/* width: 20%;*/
/* height: auto;*/
/*}*/
/*.cotton-tower {*/
/* left: 10%;*/
/* top: -80%;*/
/* z-index: 1;*/
/* width: 30%;*/
/* height: auto;*/
/* transform: translateX(-50%);*/
/*}*/
.cotton-tower-num {
position: absolute;
left: 4%;
top: -10%;
z-index: 5;
font-size: 2.8rem;
font-family: 'EDI', serif;
font-weight: bold;
color: #ffffff;
background: rgba(255, 255, 255, 0);
border-radius: 12px;
padding: 8px 24px;
box-shadow: 0 2px 12px rgba(33,150,243,0.08);
pointer-events: none;
text-align: center;
}
.pollution {
width: 100%;
display: flex;
position: relative;
top: 25%;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 64px 0 32px 0;
}
.pollution-text {
text-align: center;
font-size: 2.2rem;
color: #333;
font-family: 'EDI', serif;
font-weight: 500;
margin-bottom: 32px;
line-height: 1.6;
max-width: 900px;
}
.pollution-img-wrap {
position: relative;
width: 80vw;
max-width: 1200px;
margin: -10% auto;
height: auto;
display: block;
}
.pollution-img {
width: 100%;
height: auto;
position: relative;
display: block;
border-radius: 18px;
z-index: 2;
}
.pollution-f2f {
position: absolute;
left: 50%;
top: 45%;
transform: translate(-50%, -50%);
width: auto;
height: 30vh;
pointer-events: none;
z-index: 1;
}
.pollution-popa1, .pollution-popa2 {
position: absolute;
top: 80%;
width: 48vw;
height: auto;
transition: transform 0.7s cubic-bezier(.77,.2,.25,1);
z-index: 3;
pointer-events: none;
will-change: transform;
/* 只做主位移，不做抖动动画 */
}
.pollution-popa1 {
left: 0;
transform: translate(-100%, -50%);
}
.pollution-popa2 {
right: 0;
transform: translate(100%, -50%);
}
.pollution-popa1.active {
transform: translate(0, -50%);
}
.pollution-popa2.active {
transform: translate(0, -50%);
}
.popa-jitter-inner {
width: 100%;
height: auto;
display: block;
animation: popa-jitter1 6s infinite linear;
will-change: transform;
}
.pollution-popa2 .popa-jitter-inner {
animation: popa-jitter2 6s infinite linear;
}
/* --- popa1/popa2 缓慢无序抖动动画 --- */
@keyframes popa-jitter1 {
0% { transform: rotate(0deg) translate(0px, 0px); }
10% { transform: rotate(-1deg) translate(2px, 1px); }
20% { transform: rotate(1.5deg) translate(-1px, -2px); }
30% { transform: rotate(-2deg) translate(3px, 2px); }
40% { transform: rotate(1deg) translate(-2px, -1px); }
50% { transform: rotate(0.5deg) translate(0px, 0px); }
60% { transform: rotate(-1.5deg) translate(1px, -2px); }
70% { transform: rotate(2deg) translate(-2px, 2px); }
80% { transform: rotate(-0.5deg) translate(2px, -1px); }
90% { transform: rotate(1deg) translate(-1px, 1px); }
100% { transform: rotate(0deg) translate(0px, 0px); }
}
@keyframes popa-jitter2 {
0% { transform: rotate(0deg) translate(0px, 0px); }
10% { transform: rotate(1deg) translate(-2px, 1px); }
20% { transform: rotate(-1.5deg) translate(1px, -2px); }
30% { transform: rotate(2deg) translate(-3px, 2px); }
40% { transform: rotate(-1deg) translate(2px, -1px); }
50% { transform: rotate(-0.5deg) translate(0px, 0px); }
60% { transform: rotate(1.5deg) translate(-1px, -2px); }
70% { transform: rotate(-2deg) translate(2px, 2px); }
80% { transform: rotate(0.5deg) translate(-2px, -1px); }
90% { transform: rotate(-1deg) translate(1px, 1px); }
100% { transform: rotate(0deg) translate(0px, 0px); }
}
/* 菌产纤维素与天然色素说明区块样式 */
.bc-summary-section {
width: 100vw;
max-width: 100vw;
margin: 0 0 48px 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
top: 26%;
z-index: 10;
}
.bc-summary-text {
font-size: 2.1rem;
color: #222;
text-align: center;
font-family: 'EDI', serif;
font-weight: 500;
margin-bottom: 32px;
max-width: 800px;
}
/* 叠加图片样式调整，全部100vw宽度，高度自适应 */
.bc-summary-imgs {
position: relative;
width: 100vw;
height: auto;
max-width: 100vw;
min-height: 40vh;
margin: 10vh auto;
display: flex;
align-items: center;
justify-content: center;
}
.bc-summary-img.pp-img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100vw;
max-width: 100vw;
height: auto;
min-height: 40vh;
object-fit: contain;
opacity: 0.95;
}
.bc-summary-img.pp1 { z-index: 4; }
.bc-summary-img.pp2 { z-index: 3; opacity: 0.9; }
.bc-summary-img.pp3 { z-index: 2; opacity: 0.85; }
.bc-summary-img.pp4 { z-index: 1; opacity: 0.8; }
.summary-info-box{
position: relative;
width: 70vw;
margin-top: 6%;
border-radius: 14px;
background: rgba(255, 255, 255, 0.33);
box-shadow: 0 8px 32px rgba(0,0,0,0.12);
padding: 24px 32px;
font-size: 2.0rem;
color: #333;
font-family: 'EDI', serif;
font-weight: 500;
text-align: center;
line-height: 1.6;
}
.summary-info-box-text{
font-size: 2.0rem;
color: #333;
font-family: 'EDI', serif;
font-weight: 500;
text-align: center;
line-height: 1.6;
}
/* 横向logo容器样式 */
.summary-logo-row {
width: 100vw;
max-width: 100vw;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 3vw;
margin: 32px 0 0 0;
}
.summary-logo {
width: 20vw;
height: auto;
object-fit: contain;
padding: 8px 16px;
display: block;
}
.sect-solution{
position: relative;
top: 27%;
}
.solution-0-flex {
display: block;
width: 100%;
max-width:100vw;
margin: 10% auto;
padding: 48px 0;
position: relative;
}
.solution-0-left {
position: absolute;
left: 10%;
top:75%;
transform: translateY(-50%);
width: 80%;
font-size: 2.4rem;
color: #222;
font-family: 'EDI', serif;
font-weight: 600;
text-align: left;
padding-right: 2vw;
}
.solution-0-right {
position: absolute;
top: 0;
transform: translateY(-50%);
width: 40vw;
display: block;
overflow: visible;
}
.solution-0-img-stack {
position: relative;
min-width: 380px;
height: auto;
overflow: visible;
float: right;
}
.solution-0-img.people-img {
position: absolute;
top: -20%;
margin-left: 54vw;
width: 50vw;
height: auto;
object-fit: contain;
z-index: 2;
}
.solution-0-img.light-img {
position: absolute;
top: 25px;
left: 57vw;
width: 120px;
height: 120px;
object-fit: contain;
z-index: 3;
opacity: 1;
}
.solution-1-flex {
display: block;
width: 100%;
margin: 0 auto;
padding: 248px 0;
position: relative;
}
.solution-1-left {
position: absolute;
left: 0;
top: 0;
transform: translateY(-50%);
width: 60%;
display: block;
overflow: visible;
}
.solution-1-img.people-left-img {
position: absolute;
left: -20vw;
width: 50vw;
height: auto;
object-fit: contain;
display: block;
}
.solution-1-right {
position: absolute;
right: 5%;
top: 25%;
width: 60%;
font-size: 2.2rem;
color: #222;
font-family: 'EDI', serif;
font-weight: 500;
text-align: left;
padding-left: 2vw;
}
@media (max-width: 900px) {
.solution-0-flex, .solution-1-flex {
display: block;
padding: 24px 0;
max-width: 100vw;
}
.solution-0-left, .solution-1-left {
position: static;
width: 100%;
transform: none;
text-align: center;
padding: 0;
}
.solution-0-right, .solution-1-right {
position: static;
width: 70vw;
font-size: 2.4rem;
transform: none;
color: gray;
text-align: center;
padding: 0;
}
.solution-0-img-stack, .solution-1-img.people-left-img {
width: 220px;
height: 220px;
min-width: 0;
}
.solution-0-img.people-img, .solution-1-img.people-left-img {
width: 220px;
height: 220px;
}
.solution-0-img.light-img {
top: -20px;
left: 10px;
width: 70px;
height: 70px;
}
}
.bottle-change{
position: absolute;
margin-top: 0;
}
.bottle-img-stack {
position: relative;
width: 100vw;
left: 10vw;
height: auto;
margin: 0 auto;
}
.bottle-img {
position: absolute;
top: 0;
left: 0;
object-fit: contain;
transition: left 0.3s, top 0.3s, z-index 0.3s;
}
.bottle-bottom { z-index: 1;
width: 120vw;
height: auto;
left: -15vw;
top: -40vh;
}
.bottle-bact { z-index: 2;
width: 60vw;
left: 20vw;
margin-top: -3%;
height: auto;}
.bottle-fiber {
z-index: 3;
width: 45vw;
left: 26vw;
height: auto;
opacity: 0;
transition: opacity 0.8s, filter 1.2s;
filter: none;
}
.bottle-fiber.show {
opacity: 1;
filter: none;
}
.bottle-fiber.blue {
filter: hue-rotate(180deg) saturate(2);
}
.mount-mach-stack {
position: absolute;
width: 100vw;
height: auto;
margin: 20% 10vw 0 auto;
}
.mount-img {
position: absolute;
top: 10vh;
left: 40vw;
width: 60vw;
height: auto;
object-fit: contain;
z-index: 4;
}
.mach-img {
position: absolute;
top: 10vh;
left: 3vw;
width: 40vw;
height: auto;
object-fit: contain;
z-index: 2;
}
.bttr-btcl-row {
display: flex;
position: relative;
margin-top:76%;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 108px;
width: 100vw;
}
.bttr-img, .btcl-img {
width: 20vw;
height: auto;
object-fit: contain;
display: block;
}
.mount-mach-desc {
position: absolute;
right: 10%;
margin-top: 10%;
top: 0;
width: 40vw;
font-size: 1.6rem;
color: #222;
font-family: 'EDI', serif;
font-weight: 500;
padding: 18px 24px;
z-index: 10;
text-align: left;
}
@media (max-width: 900px) {
.mount-mach-desc {
right: 0;
left: 0;
top: 60%;
width: 90vw;
font-size: 1.1rem;
padding: 10px 8px;
text-align: center;
}
}
.final-text {
position: relative;
width: fit-content;
font-size: 2.6rem;
color: #222;
margin: 24px auto 0 auto;
font-family: 'EDI', serif;
font-weight: 500;
padding: 18px 24px;
z-index: 10;
text-align: center;
display: block;
}
grey-large {
font-size: 2.5rem;
color: #666c6c;
font-weight: 900;
line-height: 1.7;
}
grey-small {
font-size: 1.8rem;
color: #727878;
font-weight: 900;
line-height: 1.7;
}
yellow-large {
color: #eb8f26;
font-size: 2.4rem;
font-family: 'EDI', serif;
font-weight: bold;
}
.pp-img.pp1, .pp-img.pp2, .pp-img.pp3 {
opacity: 0;
transition: opacity 0.6s;
}
.pp-img.pp1.show, .pp-img.pp2.show, .pp-img.pp3.show {
opacity: 1;
}
.final-box {
width: 100vw;
margin-top: -20%;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
top: -8vw; /* 让finalbox向上叠加在banner上，可根据实际调整 */
z-index: 10;
}
.finalbox-banner {
position: relative;
width: 100vw;
height: auto;
z-index: 1;
}
.finalbox-row {
position: absolute;
left: 0;
top: 120vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
gap: 1vw;
margin: 0;
z-index: 2;
pointer-events: auto;
}
.finalbox-link {
display: block;
transition: transform 0.2s;
}
.finalbox-link:hover {
transform: scale(1.08);
}
.finalbox-img {
width: 19vw;
max-width: 380px!important;
min-width: 80px;
height: auto;
}
.finalbox-tip {
width: 100vw;
position: absolute;
text-align: center;
font-size: 2.1rem;
color: #0040d6;
font-family: 'EDI', serif;
font-weight: bold;
margin: -8vh 0 0 0;
letter-spacing: 1px;
z-index:9999;
}
/*.golden-flash {*/
/* animation: goldenFlash 1.2s linear 0s 2;*/
/* background: linear-gradient(90deg, #ffe066 0%, #ffd700 50%, #fffbe6 100%);*/
/* background-clip: text;*/
/* -webkit-background-clip: text;*/
/* color: transparent;*/
/* -webkit-text-fill-color: transparent;*/
/* filter: drop-shadow(0 0 6px #ffd700);*/
/*}*/
/*@keyframes goldenFlash {*/
/* 0% { filter: drop-shadow(0 0 0px #ffd700); }*/
/* 30% { filter: drop-shadow(0 0 12px #ffd700); }*/
/* 60% { filter: drop-shadow(0 0 24px #ffd700); }*/
/* 100% { filter: drop-shadow(0 0 0px #ffd700); }*/
/*}*/
/*.golden-fade {*/
/* background: none;*/
/* color: #000000;*/
/*}*/
.golden-final {
color: #ffd700 !important;
background: none !important;
filter: none !important;
}
.mount-fobbid{
position: absolute;
width: 40vw;
z-index: 100;
top: 100px;
opacity: 0.2;
}
.mach-fobbid{
position: absolute;
width: 40vw;
z-index: 102;
top: 250px;
left:54vw;
opacity: 0.2;
}
.mount-fobbid, .mach-fobbid {
opacity: 0;
transform: scale(0.7);
transition: opacity 0.3s, transform 0.3s;
will-change: opacity, transform;
}
.fobbid-animate {
animation: fobbid-pop-in 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes fobbid-pop-in {
0% {
opacity: 0;
transform: scale(0.7);
}
40% {
opacity: 0.12;
transform: scale(1.2);
}
70% {
opacity: 0.18;
transform: scale(0.95);
}
100% {
opacity: 0.2;
transform: scale(1);
}
}
.animate-char {
display: inline-block;
transition: transform 0.2s;
white-space: pre;
}
.animate-char.space {
width: 0.5em;
display: inline-block;
}
.bounce {
animation: char-bounce 0.5s cubic-bezier(.68,-0.55,.27,1.55);
}
@keyframes char-bounce {
0% { transform: translateY(0);}
30% { transform: translateY(-18px);}
60% { transform: translateY(0);}
100% { transform: translateY(0);}
}
/* 基础响应式设置 */
html {
font-size: 16px; /* 基础字体大小 */
}
/* 响应式字体大小 */
@media (max-width: 1920px) {
html { font-size: 16px; }
}
@media (max-width: 1440px) {
html { font-size: 14px; }
}
@media (max-width: 1024px) {
html { font-size: 12px; }
}
@media (max-width: 768px) {
html { font-size: 10px; }
}
@media (max-width: 480px) {
html { font-size: 8px; }
}
/* 移动设备优化 */
@media (max-width: 768px) {
.sect1-person-text {
right: 5%;
top: 15%;
font-size: 1.8rem;
max-width: 80%;
padding: 8px 16px;
}
.sect1-person {
top: 12%;
left: 5vw;
width: 90%;
}
.sect1-shadow {
top: 12%;
width: 85%;
}
.sect1-earth-desc {
top: 25%;
left: 50%;
transform: translateX(-50%);
font-size: 1.6rem;
max-width: 90vw;
width: 90vw;
}
.sect1-base-stack {
width: 90vw;
height: 50vh;
top: 20%;
}
.sect1-clothes {
left: -10vw;
top: -20vh;
width: 25vw;
}
.sect1-tr {
right: -10vw;
top: -5vh;
width: 25vw;
}
.gnd-factory-desc {
width: 85vw;
font-size: 1.8rem;
padding: 16px 20px 12px 20px;
}
#washing-img {
width: 95vw;
}
#bubble-img {
width: 25vw;
margin: -20% 10% 0 0;
}
#bubble-img1 {
width: 15vw;
margin-top: -8%;
margin-left: -15%;
}
}
/* 平板设备优化 */
@media (min-width: 769px) and (max-width: 1024px) {
.sect1-person-text {
right: 6%;
top: 12%;
font-size: 2.0rem;
max-width: 70%;
}
.sect1-earth-desc {
font-size: 2.0rem;
max-width: 80vw;
width: 80vw;
}
.sect1-base-stack {
width: 75vw;
height: 60vh;
}
.sect1-clothes {
left: -15vw;
top: -25vh;
width: 28vw;
}
.sect1-tr {
right: -15vw;
top: -8vh;
width: 28vw;
}
.gnd-factory-desc {
width: 75vw;
font-size: 2.2rem;
}
#washing-img {
width: 85vw;
}
}
/* 大屏幕优化 */
@media (min-width: 1920px) {
.sect1-person-text {
font-size: 2.8rem;
}
.sect1-earth-desc {
font-size: 2.8rem;
}
.gnd-factory-desc {
font-size: 3.0rem;
}
yellow-big {
font-size: 4.0rem;
}
large-Grey {
font-size: 4.2rem;
}
}
.tt1-scale{
animation: breathe 6s ease-in-out infinite;
}
/* tt2 晃动动画 */
.tt2-shake {
animation: shake-animation 12s ease-in-out infinite;
}
.tt3-scale{
animation: breathe-small 6s ease-in-out infinite;
}
@keyframes breathe{
0%, 100% {
transform: scale(1.15);
}
50% {
transform: scale(1);
}
}
@keyframes breathe-small {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);}
}
@keyframes shake-animation {
0%, 100% {
transform: translateX(0) translateY(0) rotate(0deg);
}
10% {
transform: translateX(-14px) translateY(-15px) rotate(-0.5deg);
}
30% {
transform: translateX(13px) translateY(14px) rotate(0.5deg);
}
50% {
transform: translateX(-15px) translateY(13px) rotate(-0.3deg);
}
70% {
transform: translateX(11px) translateY(-12px) rotate(0.3deg);
}
90% {
transform: translateX(-12px) translateY(10px) rotate(-0.2deg);
}
/*60% {*/
/* transform: translateX(12px) translateY(-11px) rotate(0.2deg);*/
/*}*/
/*70% {*/
/* transform: translateX(-11px) translateY(11px) rotate(-0.4deg);*/
/*}*/
/*80% {*/
/* transform: translateX(11px) translateY(-11px) rotate(0.4deg);*/
/*}*/
/*90% {*/
/* transform: translateX(-11px) translateY(10px) rotate(-0.1deg);*/
/*}*/
}