.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 1.1rem;
    position: fixed;
    top: 0;
    width: 100%;
    padding: 0 1.84rem 0 1.67rem;
    z-index: 99;
    background-color: rgba(0, 0, 0, 0.4);
    left: 0;
    box-sizing: border-box;
}
.nav_logo {
    width: 1.82rem;
    height: 0.76rem;
    background: url(../img/header/top_logo.png) no-repeat center center;
    background-size: 100% 100%;
    margin-right: 0.2rem;
}
.nav_bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 0.27rem;
    border-left: 0.01rem solid rgba(255, 255, 255, 0.6);
}
.nav_bar_img {
    display: inline-block;
    margin: 0 0.2rem;
    width: 1.31rem;
    height: 0.38rem;
    cursor: pointer;
    transition: all 0.3s ease; /* 添加过渡效果 */
}
.nav_btns {
    display: flex;
    align-items: center;
}
.nav_btns_share {
    width: 0.47rem;
    height: 0.36rem;
    background: url(../img/header/top_share.png) no-repeat center center;
    background-size: 100% 100%;
    cursor: pointer;
    position: relative;
}
.nav_btns_share_box {
    width: 0.6rem;
    height: 2.57rem;
    background: url(../img/header/top_share_box.png) no-repeat center center;
    background-size: 100% 100%;
    transition: all 0.4s linear;
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    top: 0.5rem;
    transform: translate(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0.27rem;
}
.nav_btns_share_box_item {
    cursor: pointer;
    margin-bottom: 0.2rem;
    position: relative;
}
.nav_btns_share_box_item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -0.1rem;
    transform: translateX(-50%);
    width: 0.14rem;
    height: 0.01rem;
    background: rgba(255, 255, 255, 0.5);
}
.nav_btns_share_box_item_img {
    width: 0.27rem;
    height: 0.26rem;
}
.nav_btns_seprator {
    width: 0.01rem;
    height: 0.14rem;
    background-color: #FFFFFF;
    margin: 0 0.22rem;
}
.nav_btns_audioBtn {
    width: 0.47rem;
    height: 0.36rem;
    cursor: pointer;
}
.nav_btns_audioBtn_play {
    background: url(../img/header/top_suspend.png) no-repeat center center;
    background-size: 100% 100%;
}
.nav_btns_audioBtn_suspend {
    background: url(../img/header/top_play.png) no-repeat center center;
    background-size: 100% 100%;
}

.share_icon_naver .nav_btns_share_box_item_img {
    background: url(../img/header/share_icon_notiong.png) no-repeat center center;
    background-size: 100% 100%;
}
.share_icon_x .nav_btns_share_box_item_img {
    background: url(../img/header/share_icon_x.png) no-repeat center center;
    background-size: 100% 100%;
}
.share_icon_yt .nav_btns_share_box_item_img {
    background: url(../img/header/share_icon_hykb.png) no-repeat center center;
    background-size: 100% 100%;
}
.share_icon_ins .nav_btns_share_box_item_img {
    background: url(../img/header/share_icon_ins.png) no-repeat center center;
    background-size: 100% 100%;
}
.share_icon_tt .nav_btns_share_box_item_img {
    background: url(../img/header/share_icon_tt.png) no-repeat center center;
    background-size: 100% 100%;
}

/* 导航图片背景样式 */
.nav_bar_img_home {
    background: url(../img/header/top_home.png) no-repeat center center;
    background-size: 100% 100%;
}
.nav_bar_img_home.active,
.nav_bar_img_home:hover {
    background: url(../img/header/top_home1.png) no-repeat center center;
    background-size: 100% 100%;
}

.nav_bar_img_pre {
    background: url(../img/header/top_pre.png) no-repeat center center;
    background-size: 100% 100%;
}
.nav_bar_img_pre.active,
.nav_bar_img_pre:hover {
    background: url(../img/header/top_pre1.png) no-repeat center center;
    background-size: 100% 100%;
}

.nav_bar_img_gat {
    background: url(../img/header/top_gat.png) no-repeat center center;
    background-size: 100% 100%;
}
.nav_bar_img_gat.active,
.nav_bar_img_gat:hover {
    background: url(../img/header/top_gat1.png) no-repeat center center;
    background-size: 100% 100%;
}

.nav_bar_img_sho {
    background: url(../img/header/top_sho.png) no-repeat center center;
    background-size: 100% 100%;
}
.nav_bar_img_sho.active,
.nav_bar_img_sho:hover {
    background: url(../img/header/top_sho1.png) no-repeat center center;
    background-size: 100% 100%;
}

.nav_bar_img_cas {
    background: url(../img/header/top_cas.png) no-repeat center center;
    background-size: 100% 100%;
}
.nav_bar_img_cas.active,
.nav_bar_img_cas:hover {
    background: url(../img/header/top_cas1.png) no-repeat center center;
    background-size: 100% 100%;
}

.nav_bar_img_fea {
    background: url(../img/header/top_fea.png) no-repeat center center;
    background-size: 100% 100%;
}
.nav_bar_img_fea.active,
.nav_bar_img_fea:hover {
    background: url(../img/header/top_fea1.png) no-repeat center center;
    background-size: 100% 100%;
}

.nav_bar_img_code {
    background: url(../img/header/top_code.png) no-repeat center center;
    background-size: 100% 100%;
}
.nav_bar_img_code.active,
.nav_bar_img_code:hover {
    background: url(../img/header/top_code1.png) no-repeat center center;
    background-size: 100% 100%;
}