* {
    padding: 0; /* 消除默认内补 */
    margin: 0; /* 消除默认外补 */
    box-sizing: border-box; /* 包含内补和边框大小 */
}
html{
    width: 100vw;
    overflow-x: hidden;
}
body{
    background-image: url();
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed; /* 固定背景 */
    background-position: center; /* 使背景图片居中 */
}
.logo{
    width: 20vw;
    height: 10vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
#logo{
    width: 6vw;
    height: auto;
}
.flili,.ilili{
    width: 10vw;
    height: 10vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(0, 0, 0);
}
.ilili{
    color: #ffffff;
}
.navv{
    width: 80vw;
    height: 10vh;
    display: flex;
    justify-content: flex-end;
}
.indexnav {
    width: 100vw; /* 占满视口宽度 */
    height: 60vh; /* 占满视口高度 */
    display: block;
    background-repeat: no-repeat; /* 不重复背景图片 */
    background-size: cover; /* 背景图片覆盖整个区域 */
    background-position: center;
}

@keyframes changeBackground {
    0% {
        background-image: url('/img/s/navbg.png');
    }

    100% {
        background-image: url('/img/s/navbg.png');
    }
}
.nav-list li{
    width: 10vw;
    height: 10vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 4vw;
}
.nav {
    width: 100%; /* 宽度100% */
    height: 10vh; /* 高度10vh */
    display: flex; /* 使用弹性盒模型 */
    justify-content: space-between; /* 元素之间空间平均分布 */
    align-items: center; /* 垂直方向上居中对齐 */
    padding: 0 20px; /* 水平内补20px */
}

#initial-navbar {
    background-color: rgba(255, 73, 73, 0); /* 背景颜色 */
}

#fixed-navbar {
    position: fixed; /* 固定定位 */
    background-color: rgb(255, 255, 255); /* 背景颜色 */
    opacity: 0; /* 初始透明度为0 */
    transition: opacity 1s; /* 设置渐变属性 */
    z-index: 100000; /* 增加层叠顺序 */

}

.nav-list {
    list-style: none; /* 取消默认列表样式 */
    display: flex; /* 使用弹性盒模型 */
}

.nav-list a {
    text-decoration: none; /* 消除默认文本下划线 */
    color: white; /* 文字颜色为白色 */
    font-size: 1.0vw; 
    cursor: pointer;
}


#fixed-navbar  .nav-list a {
    color: black;
}
#fixed-navbar {
    border-bottom: 1px solid rgb(0, 0, 0,0.5);
    box-shadow: 5px 5px 5px rgb(0, 0, 0,0.5);
}

.active{
    position: relative;
    transition: all 0.3s ease;
}
.active::after {
    content: '';
    position: absolute;
    bottom: 1px; /* 调整边框的位置，使其位于 div 的底部 */
    border: 0;
    left: 30%;
    right: 30%;
    height: 3px; /* 边框的高度 */
    background: linear-gradient(to right, #00f7ff, #001aff); /* 渐变颜色 */
    transition: all 0.3s ease;
    border-radius: 50%;
}
.main {
    width: 100%; /* 宽度100% */
    height: auto; /* 高度1000px */
}
.hx{
    width: 75vw;
    height: auto;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}
.power {
    transition: transform 2s ease, opacity 2s ease; /* 添加透明度过渡 */
    opacity: 0; /* 初始透明度为0 */
    visibility: hidden; /* 初始不可见 */
    position: absolute;
    transform: translateY(100vh);
    left: 17.5vw;
}

.lishow {
    opacity: 1; /* 淡入后的透明度 */
    visibility: visible; /* 可见 */

    transition: transform 2s ease, opacity 2s ease; 
    position: absolute;
    transform: translateY(1vh);
    left: 17.5vw;
}
.hxnl{
    position: relative;
}
.titlehr{
    position: absolute;
    left: 45vw;
    top: 15vh;
    width: 10vw;  /* 设置长度 */
    height: 1vh;  /* 设置厚度 */
    background: linear-gradient(to right, #2a1bfa, #07ffff);  /* 渐变色 */
    margin: 20px auto;  /* 居中对齐 */
    border: 0;
    z-index: 99999;
}

#powerimg{
    width: 65vw;
    height: auto;
    
}
/* 下拉菜单的基本样式 */
.dropdown {
    position: relative;
    display: inline-block;
}

/* 下拉按钮的样式 */
.dropbtn {
    text-decoration: none; /* 消除默认文本下划线 */
    color: rgb(255, 255, 255); /* 文字颜色为白色 */
    font-size: 0.9vw; 
    cursor: pointer;
    color: white;
}
/* 下拉内容的链接 */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
/* 当鼠标悬停在下拉按钮上时显示下拉内容 */
.dropdown:hover .dropdown-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 0 0 20px 20px;
    animation: changeH 1s alternate;
}
/* 下拉内容的容器 */
.dropdown-content {
    display: none;
    position: absolute;

    background-color: #ffffff;
    min-width: 10vw;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    opacity: 1;
    top: 9vh;
}

@media(max-width: 820px) {
    /* 小于等于768px时的样式 */
    .nav-list li a {
        font-size: 2vw; /* 设置字体大小为5vw */
    }
}

/* 下拉菜单的基本样式 */
.dropdown-i {
    position: relative;
    display: inline-block;
}
.dropdown-content>a{
    width: 10vw;
    height: 5vh;
    text-align: center;
    line-height: 5vh;
    font-size: 0.7vw;
}
/* 下拉按钮的样式 */
.dropbtn-i {
    text-decoration: none; /* 消除默认文本下划线 */
    color: rgb(255, 255, 255); /* 文字颜色为白色 */
    font-size: 0.9vw; 
    cursor: pointer;
    color: white;
}
/* 下拉内容的链接 */
.dropdown-content-i a {
    text-decoration: none;
    display: block;
    color: #000;
    
}
/* 当鼠标悬停在下拉按钮上时显示下拉内容 */
.dropdown-i:hover .dropdown-content-i {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 0 0 20px 20px;
    animation: changeH 1s alternate;
}
@keyframes changeH {
    0% {
        height: 0vh;
    }
    100% {
        height: 25vh; 
    }
}
.dropdown-content-i>a{
    width: 10vw;
    height: 5vh;
    text-align: center;
    line-height: 5vh;
    font-size: 0.7vw;
}
/* 下拉内容的容器 */
.dropdown-content-i {
    display: none;
    position: absolute;
    background-color: #ffffffc9;
    min-width: 10vw;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 99999;
    opacity: 1;
    top: 9vh;

}
.cpb{
    position: relative;
    width: 100%;
    height: 100vh;
}
.title1{
    position: absolute;
    top: 5vh;
    font-size: 3vw;
    width: 100%;
    text-align: center;
    transition: transform 2s ease, opacity 2s ease; /* 添加透明度过渡 */
    opacity: 0; /* 淡入后的透明度 */
    visibility: hidden; /* 可见 */
    transform: translateY(100vh);
    color: #000000;
    font-weight: bold;
}

.t1show {
    opacity: 1; /* 淡入后的透明度 */
    visibility: visible; /* 可见 */
    transition: transform 2s ease, opacity 2s ease; 
    position: absolute;
    transform: translateY(0vh);
    z-index: 9999;
    color: #000000d8;
}
.cpbs{
    position: relative;
    top: 22vh;
    left: 10vw;
    width: 80vw;
    height: 70vh;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.cpbitem{
    margin-left: 3vw;
    margin-right: 3vw;
    width: 20vw;
    height: 17vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-shadow: 10px 10px 20px rgb(0, 0, 0,0.5);
}
.cpbimg{
    width: 90%;
    height: 70%;
    background-color: #000000;
}
.cpbitem>p{
    font-size: 1vw;
    line-height: 1.5vw;
    margin-top: 0.5vw;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}
#cpbimg1,#cpbimg2,#cpbimg3,#cpbimg4,#cpbimg5,#cpbimg6{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
#cpbimg1{
    background-image: url(/img/s/11.png);
}
#cpbimg2{
    background-image: url(/img/s/1.jpg);
}
#cpbimg3{
    background-image: url(/img/s/7.jpg);
}
#cpbimg4{
    background-image: url(/img/s/5.jpg);
}
#cpbimg5{
    background-image: url(/img/s/9.jpg);
}
#cpbimg6{
    background-image: url(/img/s/8.jpg);
}


.sdjc{
    position: relative;
    width: 100%;
    height: 120vh;
}
.title2{
    position: absolute;
    top: 5vh;
    font-size: 3vw;
    width: 100%;
    text-align: center;
    transition: transform 2s ease, opacity 2s ease; /* 添加透明度过渡 */
    opacity: 0; /* 淡入后的透明度 */
    visibility: hidden; /* 可见 */
    transform: translateY(100vh);
    color: #000000;
    font-weight: bold;
}

.t2show {
    opacity: 1; /* 淡入后的透明度 */
    visibility: visible; /* 可见 */
    transition: transform 2s ease, opacity 2s ease; 
    position: absolute;
    transform: translateY(0vh);
    z-index: 9999;
    color: #000000d8;
}
.sdbottom{
    position: relative;
    top: 22vh;
    left: 20vw;
    width: 60vw;
    height: 90vh;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.sditem{
    width: 60vw;
    height: 28vh;
    display: flex;
    flex-direction: row;
    border:1px solid gray;
    box-shadow: 10px 10px 20px rgb(0, 0, 0,0.5);
}
.sdimg{
    margin-right: 1vw;
    border-right: 1px solid gray;
    width: 30vw;
    height: 27vh;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
#sdimg1{
    background-image: url(/img/s/sd1.JPEG);
}
#sdimg2{
    background-image: url(/img/s/sd2.JPEG);
}
#sdimg3{
    background-image: url(/img/s/sd3.PNG);
}
.sd{
    width: 30vw;height: 28vh;
    padding-left: 3vw;
}
.sd>h1{
    margin-top: 4vh;
    margin-bottom: 2vh;
    line-height: 2vw;
    font-size: 1.2vw;
}
.sd>p{
    font-size: 0.8vw;
    padding-right: 3vw;
    line-height: 1.5vw;
}

.d4d{
    position: relative;
    width: 100%;
    height: 130vh;
    background-image: url(/img/s/bg.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.title3{
    position: absolute;
    top: 5vh;
    font-size: 3vw;
    width: 100%;
    text-align: center;
    transition: transform 2s ease, opacity 2s ease; /* 添加透明度过渡 */
    opacity: 0; /* 淡入后的透明度 */
    visibility: hidden; /* 可见 */
    transform: translateY(100vh);
    color: #000000;
    font-weight: bold;
}

.t3show {
    opacity: 1; /* 淡入后的透明度 */
    visibility: visible; /* 可见 */
    transition: transform 2s ease, opacity 2s ease; 
    position: absolute;
    transform: translateY(0vh);
    z-index: 9999;
    color: #000000d8;
}
.d4dc{
    position: absolute;
    top: 55vh;
    width: 33vw;
    height: 33vw;
    border-radius: 50%;
    background-image: url(/img/s/ss1.png);
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
    left: 10vw;
    border: 2px dashed gray; /* 灰色虚线边框 */
    z-index: 9999;
}
.d4dc::before {
    content: '';
    position: absolute;
    top: -3vw; /* 使圆圈稍微大一些 */
    left: -3vw; /* 使圆圈稍微大一些 */
    width: calc(33vw + 6vw); /* 原来的宽度加上两边的扩展 */
    height: calc(33vw + 6vw); /* 原来的高度加上两边的扩展 */
    border-radius: 50%;
    border: 2px dashed gray; /* 灰色虚线边框 */
    box-sizing: border-box; /* 确保边框不会增加元素的总尺寸 */

}
.xx{
    width: 35vw; /* 长度为视口宽度的50% */
    height: 1px; /* 粗细为2px */
    background: repeating-linear-gradient(90deg, #888, #888 5px, transparent 5px, transparent 10px); 
}
#xx1{
    position: absolute;
    top: 62vh;
    left: 30vw;
}
#xx2{
    position: absolute;
    top: 78vh;
    left: 30vw;
}
#xx3{
    position: absolute;
    top: 94vh;
    left: 30vw;
}
#xx4{
    position: absolute;
    top: 110vh;
    left: 30vw;
}
.d4dp{
    position: absolute;
    top: 28vh;
    left: 20vw;
    width: 60vw;
    font-size: 1.2vw;
    line-height: 1.8vw;
    text-indent: 2em;
}
.d4ditem{
    position: absolute;
    display: flex;
    height: 10vh;
    width: 15vw;
    align-items: center;
    background-color: #ffffff;
    box-shadow: 5px 5px 10px rgb(0, 0, 0,0.5);
    border-radius: 30px;
    cursor: pointer;
}
.d4ditem>h2{
    font-size: 1vw;
    margin-right: 1vw;
}
.d4ditem>img{
    width: 2vw;
    height: 2vw;
    margin-left: 1vw;
    margin-right: 1vw;
}
#d4d1{
    top: 57vh;
    left: 60vw;

}
#d4d2{
    top: 73vh;
    left: 60vw;

}
#d4d3{
    top: 89vh;
    left: 60vw;

}
#d4d4{
    top: 105vh;
    left: 60vw;

}