body {
    font-size: 1.5vw;
    background: #000;

    height: 138vw;
    background: url("statics/bg.png") no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color: #fcfcfc
}

.main-header {
    width: 60vw;
    margin: 1vw auto;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0.3vw 0.3vw 0.5vw rgba(0, 0, 0, 0.6);
    border-radius: 0.8vw;
    padding: 0.5vw 2vw;
    height: 5vw;
    transition: all 0.3s ease;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
}

.logo {
    padding: 0.5vw;
    margin: 0;
}

.logo img {
    margin: 0;
    height: 4vw;
    width: auto;
    transition: transform 0.3s ease;
}

.logo img:hover {
    transform: scale(1.05);
}

.right-content {
    display: flex;
    align-items: center;
    gap: 2vw;
}

.nav-links {
    display: flex;
    gap: 2vw;
    margin-right: 2vw;
}

.nav-links a {
    text-decoration: none;
    color: #222;
    font-weight: 600;
    font-size: 1.6vw;
    position: relative;
    padding: 0.5vw 0.8vw;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: #006bf3;
}

.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0.2vw;
    bottom: 0;
    left: 50%;
    background: linear-gradient(to right, #00e5b6, #006bf3);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-links a:hover::after {
    width: 100%;
}

.social-links {
    display: flex;
    gap: 1.2vw;
    align-items: center;
}

.social-links img {
    
    margin-top: 1vw;
    height: 2vw;
    width: auto;
    transition: all 0.3s ease;
}

.social-links img:hover {
    opacity: 0.8;
    transform: translateY(-0.3vw);
}


/* 主体内容样式 */
.home-page {
    text-align: left;
    padding: 8vw;
    padding-left: 12vw;
    color: #fcfcfc;
}


/* 主体内容额外样式 */
.home-page h1 {
    font-size: 4vw;
    margin-top: 8vw;
    margin-bottom: 0;
    color: #fff;
}

.home-page p {
    margin-top: 1vw;
    margin-bottom: 1vw;
    font-size: 2vw;
}

/* 按钮样式 */
.btn {
    margin-top: 2vw;
    display: inline-block;
    padding: 1vw 3.6vw;
    background-image: url("statics/button.png") ;
    background-size: cover; /* 背景图完全覆盖按钮 */
    background-position: center center; /* 图片居中 */
    color: #fcfcfc;
    text-decoration: none;
    font-size: 2vw;
    font-weight: bold;
    border-radius: .5vw;
    color: #111;
}
.gradline {
    background: linear-gradient(to right, #00e5b6, #006bf3) no-repeat center bottom;
    background-size: 12vw .3vw;
    border-radius: .5vw;
    transition: background-size 1000ms;
}

.gradline:hover{
    background-size: 10vw .4vw;
}

.vision-page {
    text-align: center;
}
.vitem{ 
    padding-top: 2vw;
    padding-bottom: 2vw;
    height: 23vw;
}
.vitem p {
    line-height: 1.2;
    font-size: 1.8vw;
    color: #2ae2cc
}
.vitem h2 {
    line-height: 1.2;
    font-size: 4vw;
    color: #fff
}
.vimg {
    position: absolute;
    width: 100vw;
    left: 0vw;
    z-index: -1;
}
.vimg2 {
    position: absolute;
    width: 100vw;
    right: 0vw;
    z-index: -1;
}
.vision-text {
    padding-top: 1vw;
    text-align: left;
    margin-left: 45%;
    margin-right: 5%;
}
.vision-text2 {
    padding-top: 1vw;
    text-align: left;
    margin-left: 5%;
    margin-right: 35%;
}

.about-page {
    text-align: center;
}

.about-box {
    width: 25vw; /* 根据需要调整宽度 */
    display: inline-block;
    position: relative;
    margin-left: 1.5vw;
    margin-right: 1.5vw;
    margin-top: 3vw;
    margin-bottom: 3vw;
    text-align: left;
}

.about-box img {
    width: 100%; /* 图片宽度占满父元素 */
    height: 100%; /* 根据需要调整高度 */
    object-fit: cover; /* 保持图片比例，裁剪以适应 */
}

.about-box .text-content {
    position: absolute;
    text-align: center;
    top: 4.6vw;
    left: 1vw;
    right: 1vw;
    background-color: transparent;
    color: #fcfcfc;
}

.about-box h2, .about-box p {
    margin: 0;
}

.about-box h2 {
    font-size: 1.6vw;
    line-height: 1.2;
}

.about-box p {
    margin-top: 2vw;
    font-size: 1.1vw;
    line-height: 1.5;
    color: #f6f6f6;
}

footer {
    padding-right: 4vw;
    text-align: right; /* 文本居中 */
}
.contact-section {
    justify-content: center;
    align-items: center;
}
.contact-section h2 {
    width: fit-content;
    display: inline-block;
    font-size: 4vw;
}

.contact-icons {
    margin-top: 3vw;
}
.contact-icons a {
    display: inline-block; /* 将a元素转为块级元素，以便设置宽度和高度 */
}

.contact-icons img {
    width: 3vw; /* 设置图标的宽度 */
    height: 3vw; /* 设置图标的高度 */
    transition: transform 0.2s ease-in-out; /* 添加hover效果 */
    margin-left: 3vw;
    margin-right: 3vw;
}

.contact-icons img:hover {
    transform: scale(1.2); /* 图标在hover时放大 */
}

.spacer1 {
    height: 19vw;
}
.spacer2 {
    height: 16vw;
}
.spacer3 {
    height: 3vw;
}
.spacer4 {
    height: 7vw;
}