* {
    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: 75vh; /* 占满视口高度 */
    display: block;
    background-repeat: no-repeat; /* 不重复背景图片 */
    background-size: cover; /* 背景图片覆盖整个区域 */
}

@keyframes changeBackground {
    0% {
        background-image: url('/img/i1/1.png');
    }
    30%{
        background-image: url('/img/i1/1.png');
    }
    31%{
        background-image: url('/img/i1/2.gif');
    }
    70%{
        background-image: url('/img/i1/1.png');
    }
    71%{
        background-image: url('/img/i1/2.gif');
    }
    100% {
        background-image: url('/img/i1/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;

}

.bfnr{
    position: relative;
    width: 100%;
    height: 84vh;
}
.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;
}

.nfnrzs{
    position: absolute;
    width: 100%;
    height: 60vh;
    top: 24vh;
    display: flex;
    align-items: center;
    justify-content: space-around;
    transition: transform 2s ease, opacity 2s ease; /* 添加透明度过渡 */
    opacity: 0; /* 淡入后的透明度 */
    visibility: hidden; /* 可见 */
    transform: translateX(-100vw);
}
.nfnrzsshow {
    opacity: 1; /* 淡入后的透明度 */
    visibility: visible; /* 可见 */
    transition: transform 2s ease, opacity 2s ease; 
    position: absolute;
    transform: translateX(0vw);
    z-index: 9999;
}
.nr{
    width: 20vw;
    height: 50vh;
    border-radius: 20px;
    display: flex;
    align-items: center;
    flex-direction: column;
    color: #fff;
    box-shadow: 5px 5px 10px  rgb(0, 0, 0,0.5)
}

.nr1{
    margin-top: 4vh;
    font-size: 1.6vw;
    font-weight: bold;
}
.nr2{
    margin-top: 3vh;
    width: 16vw;
    height: 20vh;
    border-radius: 20px;
}
.nr3{
    width: 9vw;
    height: auto;
    margin-top: 2vh;
    font-size: 0.9vw;
    line-height: 1.5vw;
    font-weight: bold;
}

#nr21,#nr22,#nr23,#nr24{
    width: 16vw;
    height: 20vh;
    border-radius: 20px;
}
#nr111{
    background-color: rgb(54, 121, 201);
}
#nr222{
    background-color: rgb(255, 137, 136);
}
#nr333{
    background-color: rgb(146, 208, 80);
}
#nr444{
    background-color: rgb(255, 149, 47);
}

.ml{
    position: relative;
    background-image: url(/img/i1/moon.png);
    background-repeat: repeat;
    width: 100vw;
    height: 155vw;
    z-index: 99999;
}
.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: #ffffff;
    font-weight: bold;
}

.t2show {
    opacity: 1; /* 淡入后的透明度 */
    visibility: visible; /* 可见 */
    transition: transform 2s ease, opacity 2s ease; 
    position: absolute;
    transform: translateY(0vh);
    z-index: 9999;
    color: #ffffffd8;
}
.mlimgg{
    left: 10vw;
    width: 80vw;
    position: absolute;
    top: 23vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#mlimg1,#mlimg2,#mlimg3{
    width: 80vw;
    height: 45vw;
    border-radius: 40px;
    margin-bottom: 5vh;
}
.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; 
    transform: translateY(0vh);
    z-index: 9999;
    position: absolute;
    color: #000000d8;
}
.szh{
    position: relative;
    width: 100vw;
    height: 100vh;
}
.szhl{
    position: absolute;
    width: 25vw;
    height: 70vh;
    top: 24vh;
    left: 12vw;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    transition: transform 2s ease, opacity 2s ease; /* 添加透明度过渡 */
    opacity: 0; 
    visibility: hidden; 
    transform: translateX(-100vw);
}
.szhlshow{
    opacity: 1; /* 淡入后的透明度 */
    visibility: visible; /* 可见 */
    transition: transform 2s ease, opacity 2s ease; 
    transform: translateX(0vw);
}
.szhitem{
    width: 20vw;
    height: auto;
    display: flex;
}
.szhr{
    position: absolute;
    width: 55vw;
    height: 70vh;
    background-image: url(/img/i1/szh.png);
    background-repeat: no-repeat;
    background-size: cover;
    top: 24vh;
    left: 40vw;
    border: 2vw solid #ffffff;
    border-radius: 50px;
    box-shadow: 10px 10px 20px rgb(0,0,0,0.5);
    transition: transform 2s ease, opacity 2s ease; /* 添加透明度过渡 */
    opacity: 0; 
    visibility: hidden; 
    transform: translateX(100vw);
}
.szhrshow{
    opacity: 1; /* 淡入后的透明度 */
    visibility: visible; /* 可见 */
    transition: transform 2s ease, opacity 2s ease; 
    transform: translateX(0vw);
}
.szhnum{
    width: 5vw;
    height: 5vw;
}
.szhnumimg{
    width: 3.5vw;
    height: 3.5vw;
}
.szhnr>h1{
    font-size: 1.6vw;
    color: rgb(19, 162, 192);
}

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

.t4show {
    opacity: 1; /* 淡入后的透明度 */
    visibility: visible; /* 可见 */
    transition: transform 2s ease, opacity 2s ease; 
    transform: translateY(0vh);
    z-index: 9999;
    position: absolute;
    color: #000000d8;
}
.xxmb1,.xxmb2{
    position: absolute;
    top: 22vh;
    width: 80vw;
    height: 80vh;
    left: 10vw;
}
.xxmb2{
    top: 100vh;
}

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


.hxnr{
    width: 100vw;
    height: 110vh;
    position: relative;
}
.xh{
    position: absolute;
    top: 22vh;
    width: 80vw;
    height: 80vh;
    left: 10vw;
}
.hximg{
    width: 80vw;
    height: 36vw;
}