/* 设置h1标签的文本颜色为白色，并将文本居中显示 */
p {
    color: #0a5b74; 
    text-align: center; /* 设置文本在元素内居中显示 */
}
a {
    text-decoration: none;
    color: #000;
}
hr {
    border: 1px solid #000;
}
.home {
    overflow: hidden; /* 隐藏超出元素盒子的内容，不允许内容溢出（例如，滚动条） */
} 
/* 将span标签的显示方式设置为块级元素，并将文本居中显示 */
.home span {
    display: block; /* 将span标签的显示方式从默认的内联元素更改为块级元素 */
    text-align: center; /* 设置文本在span元素内居中显示 */
}

.bgc {
    position: relative;/*定位*/
    width: 100%;
    opacity: 0.9;
}

/* 定义了一个名为.title_1的类选择器，用于设置标题的样式 */
.title_1 {
    position: absolute; /* 设置元素的定位方式为绝对定位 */
    display: flex; /* 设置元素为弹性盒子模型，以便于其子元素可以使用弹性布局 */
    justify-content: center; /* 在弹性盒子的主轴方向上（默认为水平方向），将子元素居中排列 */
    left: 0; /* 设置元素左侧边缘与其最近的已定位（非static）祖先元素的左侧边缘对齐 */
    right: 0; /* 设置元素右侧边缘与其最近的已定位（非static）祖先元素的右侧边缘对齐，与left结合使用可以使元素水平居中 */
    top: 15vw; /* 设置元素顶部边缘与其最近的已定位（非static）祖先元素的顶部边缘的距离为300px */
    margin: auto; /* 在这里，与绝对定位结合使用时，margin: auto可以使元素在垂直方向上居中（前提是同时设置了top、bottom或left、right） */
    bottom: 0; /* 设置元素底部边缘与其最近的已定位（非static）祖先元素的底部边缘对齐，与top结合使用可以配合margin: auto实现垂直居中 */
    color: #20cbff; /* 设置文本颜色为黑色 */
    font-size: 100px; /* 设置字体大小 */
    font-weight: 1000; /* 设置字体的粗细为500，即中等加粗 */;
}

/* 标题样式 */
.title_2 {
    position: absolute; /* 绝对定位 */
    display: flex; /* 设置为弹性盒子模型 */
    justify-content: center; /* 弹性盒子内的项目在主轴上居中对齐 */
    left: 0; /* 左侧边缘与最近的已定位祖先元素的左侧边缘对齐 */
    right: 0; /* 右侧边缘与最近的已定位祖先元素的右侧边缘对齐，与left结合使用可实现水平居中 */
    top: 30vw; /* 顶部边缘距离其最近的已定位祖先元素的顶部边缘350px */
    margin: auto; /* 在这里，与绝对定位结合使用时，主要用于垂直居中（如果同时设置了top和bottom） */
    bottom: 0; /* 底部边缘与最近的已定位祖先元素的底部边缘对齐，但在这里主要用于与margin: auto配合实现垂直居中（如果top也被设置） */
    color: #20cbff; /* 文本颜色为黑色 */
    font-size: 2vw; /* 字体大小为20px */
    font-weight: 1000; /* 字体粗细为500，即中等加粗 */
}

.title_3 {
    position: absolute; /* 绝对定位 */
    display: flex; /* 设置为弹性盒子模型 */
    justify-content: center; /* 弹性盒子内的项目在主轴上居中对齐 */
    left: 0; /* 左侧边缘与最近的已定位祖先元素的左侧边缘对齐 */
    right: 0; /* 右侧边缘与最近的已定位祖先元素的右侧边缘对齐，与left结合使用可实现水平居中 */
    top: 35vw; 
    margin: auto; /* 在这里，与绝对定位结合使用时，主要用于垂直居中（如果同时设置了top和bottom） */
    bottom: 0; /* 底部边缘与最近的已定位祖先元素的底部边缘对齐，但在这里主要用于与margin: auto配合实现垂直居中（如果top也被设置） */
    color: #20cbff; 
    font-size: 2vw;
}
@media screen and (max-width: 1000px) {
    .title_2, .title_3 {
        font-size: 6.5vw; /* 将字体大小设置为10像素 */
    }
    .title_1 {font-size: 13vw; top: 30vw;}
    .title_2 {top: 70vw;}
    .title_3 {top: 85vw;}
    .bgc {width: 200%; left: -45vw;}
    .home_icon{display: none;}
}

/* 定义一个透视距离，用于3D效果的变换 */
.content {
    perspective: 340px; /* 设置元素的透视距离为340像素，这是3D变换时的一个重要属性 */
    width: 100%; /* 设置元素的宽度为父元素的100% */
    position: relative; /* 设置元素的定位方式为相对定位，这是相对于其正常位置进行定位 */
}

/* 定义了一个名为 .stars 的类选择器 */
.stars {
    position: absolute; /* 设置元素的定位方式为绝对定位 */
    top: 50%; /* 将元素的顶部边缘定位到其父元素高度的50%位置 */
    left: 50%; /* 将元素的左侧边缘定位到其父元素宽度的50%位置 */
    width: 2px; /* 设置元素的宽度为2像素 */
    height: 2px; /* 设置元素的高度为2像素 */
    z-index: 999; /* 设置元素的堆叠顺序为999，意味着它将被放置在其他具有较低z-index值的元素之上 */
    /* 将元素的边框圆角设置为50%，这通常会使元素呈现为完美的圆形（如果其宽度和高度相等），或者椭圆形状（如果宽度和高度不相等） */
    border-radius: 50%;
    box-shadow: -447px 387px #c4c4c4, -401px 118px #fafafa, -109px 217px #d9d9d9, -680px -436px #e3e3e3, 514px 360px #cccccc, -708px 298px #e8e8e8, -696px -270px #ededed
    , 116px -128px #f7f7f7, 179px 35px white, -404px -90px whitesmoke, -331px -309px #c4c4c4, -363px -24px #d1d1d1, 277px 416px #fafafa, -145px -244px whitesmoke
    , 123px 62px #d4d4d4, -407px 418px #d9d9d9, 535px 237px #d9d9d9, -466px -78px #f7f7f7, 257px 287px #dedede, 327px -398px #e0e0e0, -602px -38px #c2c2c2
    , 128px 398px #e6e6e6, 274px -446px #d1d1d1, -602px -298px #c7c7c7, 526px -5px #c4c4c4, -90px -158px #fcfcfc, 5px 294px whitesmoke, -633px 229px #c4c4c4
    , -475px 427px #dedede, 586px -453px #f2f2f2, 180px -432px #c7c7c7, -637px -88px #cfcfcf, -453px 308px #d6d6d6, -111px 1px #d9d9d9, 573px -450px #ededed
    , 198px 300px #d6d6d6, -355px 166px #dedede, -715px 13px #e3e3e3, 262px -104px #d1d1d1, 147px 325px #dbdbdb, 1px 399px #dbdbdb, 286px -100px white
    , 43px -329px #e8e8e8, 617px 55px #d9d9d9, -168px -392px #cccccc, 84px 219px #c9c9c9, 507px -226px #d9d9d9, -327px -70px #e6e6e6, 386px -212px #c4c4c4
    , -717px 4px #cfcfcf, 502px -231px #e3e3e3, 302px 56px #ededed, 649px 341px #c7c7c7, 569px 350px #c9c9c9, 516px -31px #e6e6e6, 689px 447px #c2c2c2
    , 591px -206px #fafafa, 422px -137px #e6e6e6, -510px -324px #cccccc, -649px 287px #c2c2c2, -194px -48px #f7f7f7, -279px -329px #d1d1d1, -406px 478px #dbdbdb
    , -735px -87px #c9c9c9, 30px -197px #dedede, -564px 233px #e6e6e6, -486px -324px #ededed, -54px -7px #ededed, -441px -194px #e3e3e3, -133px -95px #e0e0e0
    , -722px -73px #d6d6d6, 595px 423px #ededed, 568px -39px #ededed, 370px 377px #d1d1d1, -419px -102px #fcfcfc, -450px 109px #c4c4c4, -57px -119px #d1d1d1
    , -582px 150px #e6e6e6, 206px -263px #cfcfcf, 582px -461px #c9c9c9, -268px -141px #d9d9d9, -148px 291px #c7c7c7, 254px -179px #c9c9c9, 725px 424px #f0f0f0
    , 391px -150px #ebebeb, 89px -299px #d4d4d4, 170px 1px #c9c9c9, 243px 209px #c7c7c7, 27px 460px #c9c9c9, -465px -380px #d4d4d4, 530px -360px whitesmoke
    , -626px 53px #e0e0e0, 706px 218px #d9d9d9, 40px -82px #cccccc, -5px -212px #e6e6e6, -742px 33px #ebebeb, -714px 478px #e0e0e0, -585px -125px #cccccc
    , -216px 348px #cfcfcf, 601px 332px #ededed, 344px -88px #c4c4c4, 659px -22px #d1d1d1, -411px 188px #d6d6d6, -423px -206px #fcfcfc, -359px -136px #cfcfcf
    , 612px 406px whitesmoke, 725px 96px whitesmoke, 363px -446px white, -204px 325px #c9c9c9, 740px 176px #fafafa, -489px -352px white, -638px 64px #dbdbdb
    , 537px -65px #dbdbdb, 151px -32px #ebebeb, 681px 212px #fcfcfc, 604px -149px #e6e6e6, -542px -398px #c4c4c4, -707px 66px whitesmoke, -381px 258px #cfcfcf
    , -30px 332px #d6d6d6, 512px -381px #c9c9c9, 195px 288px #cccccc, -278px 479px #c7c7c7, 27px -208px #d6d6d6, -288px 15px white, -680px 248px #dedede
    , 433px 31px #c9c9c9, 150px -206px #d4d4d4, -79px 247px white, -594px 115px #e0e0e0, 99px 292px #e0e0e0, 673px -269px #dedede, -257px -64px #d1d1d1
    , 449px 81px #f2f2f2, 18px -99px #d1d1d1, -694px 415px #f7f7f7, 240px 264px #e0e0e0, 450px -172px white, 383px 7px #e8e8e8, 338px -73px #c9c9c9
    , 291px -19px #ebebeb, 659px 137px #d1d1d1, 602px -6px #fcfcfc, 554px 249px #ebebeb, 625px 356px #d9d9d9, 579px -183px #d6d6d6, -20px 250px white
    , -401px 431px #c4c4c4, -645px -232px #cccccc, -265px -148px white, 553px 258px #d1d1d1, 166px -360px #ebebeb, 719px 51px #ededed, 612px -129px #ebebeb
    , -465px -104px #f2f2f2, -154px -121px #d9d9d9, -1px 330px #f2f2f2, -666px 248px #f7f7f7, -720px 264px #ededed, 148px -365px #e6e6e6, -388px -349px #c4c4c4
    , 128px -88px #e3e3e3, -683px -274px #fafafa, -341px 41px #c9c9c9, -59px -471px #f0f0f0, -3px -427px #c2c2c2, 418px 167px #d6d6d6, 343px 247px #c7c7c7
    , 623px -347px #d1d1d1, 716px -217px white, 243px -409px whitesmoke, -75px -126px #d6d6d6, -730px -91px #c9c9c9, -210px -397px #cfcfcf, -349px 180px #c9c9c9
    , -567px -281px #e0e0e0, -460px 381px #fcfcfc, -310px -22px #ededed, 450px -1px #dbdbdb, -405px -328px #e3e3e3, 5px 332px #d6d6d6, -294px 302px #fcfcfc
    , -398px 97px whitesmoke, -696px 325px #cfcfcf, -589px 110px #d6d6d6, 353px -411px #dbdbdb, -697px -318px #ebebeb, -114px -72px #f0f0f0, 259px -193px #fcfcfc
    , 60px 26px #e6e6e6, -63px -232px white, 205px -372px #f7f7f7, -464px -333px #f2f2f2, -374px 123px white, -377px -386px #c7c7c7, -80px 337px #cccccc
    , 478px -178px #dbdbdb, 222px 420px #ebebeb, -707px 99px #c4c4c4, 716px -132px #fafafa, -253px -286px #e3e3e3, 646px 178px #f0f0f0, 201px 24px #d1d1d1
    , 178px -58px #c7c7c7, -557px 368px #ededed, 0px 219px #d9d9d9, -266px -269px #cccccc, 242px -197px #c9c9c9, -419px 193px #c2c2c2, -47px 91px #c7c7c7
    , -109px 75px #c2c2c2, -146px -453px #d6d6d6, 671px -350px #f2f2f2, 421px -91px #d9d9d9, 738px 19px #ededed, -316px -155px #dedede, 419px 244px #fcfcfc
    , -278px -418px #d6d6d6, -581px -181px #fcfcfc, 139px 264px #d9d9d9, 691px -11px #ebebeb, -622px 402px #c2c2c2, 219px 396px #f0f0f0, -149px -423px white
    , -716px -78px #d9d9d9, -590px 341px #e6e6e6, -208px 79px #d6d6d6, -227px -24px #f7f7f7, 239px 262px #d1d1d1, 740px 443px #f7f7f7, 509px 134px #d6d6d6
    , -555px 232px #e8e8e8, -67px -427px #cfcfcf, -368px 250px #f7f7f7, 715px -415px #fafafa, 411px -301px #f0f0f0, -322px 287px #d9d9d9, -429px -90px #f2f2f2
    , -327px -387px #f0f0f0, -491px 183px #c2c2c2, -133px 250px #d4d4d4, 538px 139px #e3e3e3, -417px -125px #f0f0f0, 653px -351px #e6e6e6, -549px 38px #d4d4d4
    , 602px 110px whitesmoke, 415px 105px #e0e0e0, -733px -371px #cfcfcf, 286px 403px #d4d4d4, 11px 320px #c4c4c4, -597px 158px whitesmoke, 716px -350px whitesmoke
    , 321px 67px #fafafa, -237px -300px #cfcfcf, 74px 152px #c9c9c9, 587px -123px #fcfcfc, 699px -332px whitesmoke, 399px 355px #f7f7f7, -323px 314px #dbdbdb
    , 89px 416px #c7c7c7, 445px 38px #e3e3e3, 572px 122px #c4c4c4, -258px 372px white, 49px 306px #d9d9d9, 437px -35px #dedede, 566px 174px #f2f2f2
    , 732px -299px whitesmoke, -410px 394px #ededed, 131px -415px white, 19px -326px #e8e8e8, -700px -188px #d1d1d1, 96px -1px #e0e0e0, -328px -396px #f0f0f0
    , -117px -214px #fcfcfc, -53px 261px #ebebeb, 80px 134px #d6d6d6, -364px -216px white, -636px -125px #dbdbdb, -639px -265px #e3e3e3, 208px 98px #c7c7c7
    , 172px 467px #e0e0e0, 435px 309px #e3e3e3, 194px -259px #f0f0f0, 209px -186px #c9c9c9, -312px 418px #fafafa, 229px 407px #c9c9c9, -449px -357px #fafafa
    , 674px 121px #e8e8e8, 608px -429px #ebebeb, -431px -428px #cfcfcf, 105px 462px #e3e3e3, -179px -372px #e3e3e3, 143px -317px #d6d6d6, -449px -149px #fafafa
    , -544px 250px #dedede, -220px -323px whitesmoke, 658px 8px whitesmoke, -656px -244px #e8e8e8, 347px 11px whitesmoke, 694px -230px #f7f7f7, -317px 1px #c4c4c4
    , 28px 23px #fcfcfc, -382px 321px #dbdbdb, 632px -74px #c4c4c4, 154px -245px #c2c2c2, -553px 337px #d6d6d6, -48px -243px #d1d1d1, 92px -391px #cccccc
    , -71px -256px #cfcfcf, -372px 57px #d9d9d9, 369px -140px #fcfcfc, 675px 81px #c2c2c2, -663px 254px #cccccc, 703px -203px #ededed, 74px -363px #c2c2c2
    , 643px -458px #d1d1d1, 198px 359px #cccccc, 265px 309px #d4d4d4, -353px -368px #e8e8e8, -465px 439px whitesmoke, 693px 360px #c9c9c9, 634px -397px #d1d1d1
    , 467px 25px whitesmoke, -558px -272px #e6e6e6, 671px 69px #dbdbdb, 407px 357px #cfcfcf, 379px 80px white, 10px -203px #c9c9c9, 104px -292px #f0f0f0
    , -667px -29px #d1d1d1, 557px -155px #e6e6e6, -505px 115px #cfcfcf, -605px 164px #f2f2f2, -108px -223px #e0e0e0, 523px -156px #ebebeb, 691px 230px white
    , -507px -13px #d1d1d1, -349px 332px #dedede, 520px 266px whitesmoke, -66px -250px #e6e6e6, -496px -449px #ebebeb, 414px -170px #dedede, -649px 230px #ebebeb
    , 598px -92px #c7c7c7, -638px 113px #c2c2c2, 151px 363px #f7f7f7, -445px -241px #f0f0f0, 527px -14px #dedede, 203px -61px #cfcfcf, -716px -284px #ebebeb
    , -525px 134px #c2c2c2;
    /* 定义一个名为'fly'的动画，持续时间为15秒，动画速度曲线为线性（即动画从头到尾速度相同），并且动画会无限次重复播放 */
    animation: stars_fly 20s linear infinite;
    /* 设置变换样式为'preserve-3d'，这意味着子元素在3D空间中的变换将会被保留，而不是被压平到2D平面上显示 */
    transform-style: preserve-3d;
}

/* 为.stars元素的:before和:after伪元素添加样式 */
.stars:before,
.stars:after {
    /* 伪元素的内容为空，但存在以便应用样式 */
    content: "";
    /* 将伪元素定位为绝对位置，相对于最近的已定位（非static）祖先元素 */
    position: absolute;
    /* 伪元素的宽度和高度继承自.stars元素 */
    width: inherit;
    height: inherit;
    /* 伪元素的box-shadow属性也继承自.stars元素，这可能用于创建星星的光芒或阴影效果 */
    box-shadow: inherit;
}

/* 为.stars元素的:before伪元素添加样式，用于创建深度效果和半透明效果 */
.stars:before {
    /* 在Z轴上向后移动300像素，创建深度效果 */
    transform: translateZ(-300px);
    /* 设置不透明度为60%，使元素部分透明 */
    opacity: .6;
}

/* 为.stars元素的:after伪元素添加样式，进一步增加深度效果和降低透明度 */
.stars:after {
    /* 在Z轴上向后移动更远的600像素，进一步增加深度效果 */
    transform: translateZ(-600px);
    /* 设置更低的不透明度为40%，使元素更加透明 */
    opacity: .4;
}

/* 定义名为'fly'的动画关键帧 */
@keyframes stars_fly {
    /* 动画的起始状态 */
    from {
        /* 在Z轴上不移动（实际上0%等同于0px，但这里使用%可能是为了与可能的百分比宽度/高度保持一致性） */
        transform: translateZ(0%);
        /* 初始不透明度为60%（即40%透明） */
        opacity: .6;
    }
    /* 动画的结束状态 */
    to {
        /* 在Z轴上向前移动300像素，创建深度效果 */
        transform: translateZ(300px);
        /* 结束不透明度为80%（即20%透明），比开始时更不透明 */
        opacity: .8;
    }
}


/* 图标样式 */
.home_icon {
    width: 2.5vw; /* 宽度为15px */
    height: 2.5vw; /* 高度为15px */
    padding: 0.2vw; /* 内边距为5px，这将增加图标周围的空间 */
    border: 0.1vw solid #fff; /* 边框为2px宽，颜色为白色 */
    border-radius: 100%; /* 边框圆角半径为100%，使图标呈现为圆形 */
    position: absolute; /* 绝对定位 */
    left: 50vw; /* 左侧边缘距离其最近的已定位祖先元素的左侧边缘49%，这里可能需要微调以实现精确居中 */
    bottom: 3vw; /* 底部边缘距离其最近的已定位祖先元素的底部边缘50px */
    animation: downs 2s linear infinite; /* 应用名为downs的动画，持续时间为2秒，动画速度曲线为线性，无限次重复 */
}

/* 定义名为downs的关键帧动画 */
@keyframes downs {
    from {
        transform: translatey(0); /* 动画开始时，元素在Y轴上无偏移 */
        opacity: .1; /* 动画开始时，元素的不透明度为0.6 */
    }
    to {
        transform: translatey(2vw); /* 动画结束时，元素在Y轴上向下偏移30px */
        opacity: 1; /* 动画结束时，元素的不透明度为0.8 */
    }
}

/* 丝带容器样式 */
.ribbon {
    display: flex; /* 使用弹性盒子模型 */
    justify-content: center; /* 弹性项目在主轴上居中对齐 */
    position: absolute; /* 绝对定位 */
    right: 15vw; /* 距离容器右侧边缘300px */
    top: 8vw; /* 距离容器顶部边缘50px */
    margin: auto; /* 垂直方向上的自动外边距，但由于父容器可能未指定高度，此属性可能不会产生预期效果 */
}

/* 丝带两侧的伪元素样式，用于创建丝带的视觉效果 */
.ribbon:after,
.ribbon:before {
    margin-top: 10px; /* 顶部外边距 */
    content: ""; /* 伪元素内容为空 */
    display: flex; /* 尝试设置为弹性盒子，但通常对于此类伪元素来说，这是不必要的 */
    border: 10px solid #fff; /* 白色边框，用于创建丝带形状 */
}

/* 丝带右侧伪元素的样式 */
.ribbon:after {
    border-right-color: transparent; /* 右侧边框颜色设置为透明，以便形成丝带的一角 */
}

/* 丝带左侧伪元素的样式 */
.ribbon:before {
    border-left-color: transparent; /* 左侧边框颜色设置为透明，以便形成丝带的另一角 */
}

/* 丝带内链接的样式 */
.ribbon a:link,
.ribbon a:visited {
    color: #000; /* 链接文字颜色为黑色 */
    text-decoration: none; /* 去除链接下划线 */
    height: 60px; /* 链接高度 */
    overflow: hidden; /* 隐藏溢出的内容 */
}

/* 丝带内文本的样式 */
.ribbon span {
    background: #fff; /* 背景颜色为白色 */
    display: inline-block; /* 设置为内联块级元素 */
    line-height: 50px; /* 行高 */
    padding: 0 10px; /* 内边距 */
    margin-top: 10px; /* 顶部外边距 */
    position: relative; /* 设置相对定位，为伪元素提供定位上下文 */
    /* 过渡效果，用于在鼠标悬停时改变背景和外边距 */
    -webkit-transition: background-color 0.2s, margin-top 0.2s; /* Safari 和 Chrome */
    -moz-transition: background-color 0.2s, margin-top 0.2s; /* Firefox */
    -ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */
    -o-transition: background-color 0.2s, margin-top 0.2s; /* Opera */
    transition: background-color 0.2s, margin-top 0.2s; /* 标准属性 */
    font-size: 20px;
}

/* 鼠标悬停在链接上时，丝带内文本的样式变化 */
.ribbon a:hover span {
    background: #FFD204; /* 背景颜色变为黄色 */
    margin-top: 0; /* 顶部外边距变为0 */
    font-weight: bolder; /* 字体加粗 */
}

/* 丝带文本两侧的伪元素样式，用于创建丝带尖端的视觉效果 */
.ribbon span:before,
.ribbon span:after {
    content: ""; /* 伪元素内容为空 */
    position: absolute; /* 绝对定位 */
    top: 3em; /* 距离元素顶部3em */
    border-bottom: 5px solid #fff; /* 底部边框颜色为白色 */
    /* 左侧伪元素样式 */
    left: 0;
    border-right: 5px solid #9B8651; /* 右侧边框颜色为棕色 */
    /* 右侧伪元素样式 */
    right: 0;
    border-left: 5px solid #9B8651; /* 左侧边框颜色为棕色 */
}

/* 定义.home_article类的样式，使其成为一个flex容器，并且子元素的排列方向为列（从上到下） */
.article {
    display: flex;
    flex-direction: column;
}
/* 定义.home_article_item类的样式，使其也成为一个flex容器，并且其子元素（如图片和标题）在水平方向上居中对齐 */
/* 同时，每个.home_article_item之间会有60px的上边距 */
.article_item {
    display: flex;
    justify-content: center; /* 水平居中 */
    margin-top: 1vw; /* 上边距 */
    border-color:#000;
    border-width: 0.2vw;
    border-style: solid;
    padding: 2vw;
    margin-left: 22vw;
    margin-right: 20vw;
}

/* 定义.home_article_item_img类的样式，设置图片的宽度为800px，高度为500px */
.article img {
    width: 25vw;
    height: 18vw;
}
.article span{
    font-size: 1.5vw;
    line-height: 1.5vw;
    align-self: center; /* 垂直居中 */
    padding-left: 3vw; /* 左侧内边距 */
}
/* 定义.home_article_item_title类的样式，用于标题的显示 */
.article h5 {
    width: 20vw;
    font-size: 1vw;
    line-height: 1.5vw;
    align-self: center; /* 垂直居中 */
    text-align: center;
    padding-left: 3vw; 
    font-weight: 500;
}
.article h5:hover {
    font-size: 1.25vw;
    background-color: #7ebed8;
}
/* 注意：在实际应用中，可能需要确保.home_article_item内的元素（如图片和标题）能够正确地对齐和显示 */
/* 这可能需要调整flex容器的其他属性，如flex-wrap, align-items等，具体取决于布局需求 */
@media screen and (max-width: 1000px) {
    .article {left: 0%;}
    .article_item {
        margin-left: 0%;
        margin-right: 0%;
        justify-content: left;
    }
    .article img {
        width: 50vw;
        height: 35vw;
    }
    .article span{
        font-size: 25px;
        line-height: 25px;
    }
    .article h5{
        display: none;
    }
}

/* 定义图标容器的样式 */
.icons {
    display: flex; /* 使用flex布局 */
    justify-content: space-between; /* 子元素之间的间隔相等，并且两端对齐 */
    padding: 0 20vw; /* 容器内边距，左右各20视窗宽度百分比 */
    box-sizing: border-box; /* 设置盒模型的计算方式为IE盒模型（包含padding和border） */
    overflow: hidden; /* 超出容器的内容将被隐藏 */
    margin-bottom: 1vw;
}

/* 定义图标项（可能包含图标和描述）的样式 */
.icons_items {
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 子元素垂直排列 */
    font-size: 2vw; /* 字体大小为视窗宽度的1.5% */
    font-weight: 500; /* 字体加粗程度 */
    margin-top: 2vw; /* 上边距为视窗宽度的2% */
    width: 17vw; /* 宽度为视窗宽度的25% */
}

/* 定义图标项内链接（可能包含图标和描述）的hover样式 */
.icons_items a:hover {
    background: #59c5d3; /* 鼠标悬停时，背景颜色变为浅灰色 */
    font-weight: 600;
}

/* 定义图标项内图标的样式 */
.icons_items_imgs {
    margin-left: 2vw; /* 左外边距为视窗宽度的2% */
    margin-right: 2vw; /* 右外边距为视窗宽度的2% */
    width: 12vw; /* 宽度为视窗宽度的12% */
    height: 12vw; /* 高度与宽度相同，保持正方形 */
     /* 下外边距为视窗宽度的1% */
}

.sidebar_1 {
    position: absolute;
    background-color: #ffffff00;
    color: #198699 ;
    margin-top: 6vw;
    left: 10vw;
    width: 8vw;
    border: 0.2vw solid #198699;
    border-radius: 2vw;
}
.sidebar_2 {
    position: absolute;
    background-color: #ffffff00;
    color: #198699 ;
    margin-top: 25vw;
    left: 10vw;
    width: 8vw;
    border: 0.2vw solid #198699;
    border-radius: 2vw;
}
#phone_hint{
    font-size: 23px;
    margin-bottom: 10px;
    display: none;
}
@media screen and (max-width: 1000px) {
    .icons{padding:20px;justify-content: center;}
    .icons_items{font-size: 40px;width: 50vw;}
    .icons_items_imgs{display: none;}
    .sidebar_1, .sidebar_2{display: none;}
    #phone_hint{display: block;}
}

/* 回到顶部 */
#backTop {
/* 固定定位 */
position: fixed;
bottom: 50px;
right: 0;
margin-right: 10px;
z-index: 999;
/* 回到顶部样式 */
width: 70px;
height: 70px;
background-color: deepskyblue;
/* 字体在元素中水平垂直居中 */
line-height: 70px;
text-align: center;
font-size: 14px;
color: white;
/* 设置圆角 */
border-radius: 50%;
/* 设置过渡效果 */
transition: all linear 0.5s;
cursor: pointer;
/* 隐藏 透明度为0 */
opacity: 0;
}