* {
    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; /* 使背景图片居中 */
}
.flili,.ilili{
    width: 10vw;
    height: 10vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(0, 0, 0);
}
.ilili{
    color: #ffffff;
}
.logo{
    width: 20vw;
    height: 10vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
#logo{
    width: 6vw;
    height: auto;
}
.navv{
    width: 80vw;
    height: 10vh;
    display: flex;
    justify-content: flex-end;
}
.indexnav {
    width: 100vw; /* 占满视口宽度 */
    height: 110vh; /* 占满视口高度 */
    display: block;
    background-repeat: no-repeat; /* 不重复背景图片 */
    background-size: cover; /* 背景图片覆盖整个区域 */
    animation: changeBackground 15s infinite;
}

@keyframes changeBackground {
    0% {
        background-image: url('/img/i3/1.png');
    }
    10%{
        background-image: url('/img/i3/1.png');
    }
    20%{
        background-image: url('/img/i3/1.gif');
    }
    30%{
        background-image: url('/img/i3/1.png');
    }
    40%{
        background-image: url('/img/i3/1.png');
    }
    50%{
        background-image: url('/img/i3/1.gif');
    }
    60%{
        background-image: url('/img/i3/1.png');
    }
    100% {
        background-image: url('/img/i3/1.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;
}
.ct{
    position: relative;
    width: 100vw;
    height: 100vh;
}
.zscx{
    position: relative;
    width: 100vw;
    height: 100vh;
}

.title1{
    position: absolute;
    top: 5vh;
    font-size: 3vw;
    width: 100%;
    text-align: center;
    color: #000000;
    font-weight: bold;
}

.ct>h2,.zscx>h2{
    position: absolute;
    text-align: center;
    width: 100%;
    top: 22vh;
}
.ct>img,.zscx>img{
    position: absolute;
    width: 60vw;
    height: 70vh;
    top: 30vh;
    left: 20vw;
}
.title2{
    position: absolute;
    top: 5vh;
    font-size: 3vw;
    width: 100%;
    text-align: center;
    color: #000000;
    font-weight: bold;
}