/* 导航栏容�?*/
.navbar {
    display: flex;
    background-color: #303030;
    padding: 0;
    width: 100%;
}

/* 导航项样�?*/
.nav-item {
    flex: 1;
    text-align: center;
    padding: 15px 0;
    color: #fff;
    font-size: 18px;
    text-decoration: none;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    position: relative;
}

/* 选中状�?- 上品团队 */
.nav-item.active {
    background-color: #00C08A; /* 绿色背景 */
}

.nav-item.active span {
    color: #fff; /* 保持文字为白�?*/
}

/* 响应式调�?*/
@media (max-width: 768px) {
    .nav-item {
        font-size: 16px;
        padding: 12px 0;
    }
}

@media (max-width: 480px) {
    .nav-item {
        font-size: 14px;
        padding: 10px 0;
    }
    .imagedetail{padding: 10px 8px;}
    .imagedetail h1{font-size: 20px; margin-bottom:4px;}
    .imagedetail .top{margin-bottom:6px;}
    .imagedetail aside{margin-bottom:6px; font-size: 14px; line-height: 1.6;}
    .imagedetail .top b{font-size: 12px;}
    .imagedetail .top i{font-size: 12px; margin-right:10px;}
    .imagedetail dir{padding-top:6px;}
    .imagedetail dir>dl>dt{font-size: 13px;}
    .imagedetail dir>dl>dd{font-size: 13px;}
}
.imagedetail{background:; max-width: 1200px; margin: 0 auto; padding: 20px;}
.imagedetail h1{text-align:center; margin-bottom:8px; font-size: 28px;}
.imagedetail .top{text-align:center; margin-bottom:18px;}
.imagedetail .top b{font-weight:inherit;}
.imagedetail .top i{font-style:inherit; margin-right:18px;}
.imagedetail .top i:last-child{margin:0;}
.imagedetail .sub{padding: 10px 20px;border-radius: 4px;background: #fafafa;}
.imagedetail .sub:after{display:block; content:''; clear:both;}
.imagedetail .sub>dl{padding-bottom:0px;}
.imagedetail .sub>dl:after{display:block; content:''; clear:both;}
.imagedetail .sub>dl>dt{float:left; }
.imagedetail .sub>dl>dd{float:left;}
.imagedetail .sub>a{margin-top:18px;}
.imagedetail aside{margin-bottom:18px; line-height: 1.8; font-size: 16px;}
.imagedetail dir{padding-top:18px; border-top:1px solid #f0f0f0;}
.imagedetail dir:after{display:block; content:''; clear:both;}
.imagedetail dir>dl:after{display:block; content:''; clear:both;}
.imagedetail dir>dl>dt{float:left; margin-right:8px; }
.imagedetail dir>dl>dt b{font-weight:inherit;}
.imagedetail dir>dl>dd{float:left;}
.imagedetail dir>dl>dd i{font-style:inherit;}
.imagedetail .images{width:100%; overflow:hidden; margin-bottom:18px; position:relative;}
.imagedetail .images .imgs{width:10000%;}
.imagedetail .images .imgs:after{display:block; content:''; clear:both;}
.imagedetail .images .imgs .img{width:1%; float:left;}
.imagedetail .images .imgs .img img{display:block; max-width:100%; margin:0 auto;}
.imagedetail .tag{margin-bottom:18px;}
.imagedetail .tag a{display:inline-block; margin-right:8px; border:1px solid #f0f0f0; padding:2px 8px; border-radius:3px;}
.imagedetail .comment{margin-top:28px;}

/* Banner 自适应 */
.banner {
    width: 100%;
    overflow: hidden;
    margin-top: 64px;
}
.banner img {
    max-width: 100%;
    height: auto;
    display: block;
}
@media(max-width:767px){
.imagedetail .tag{margin-bottom:8px;}
.imagedetail .tag a{margin-right:4px; padding:2px 8px;}
.imagedetail{padding: 15px 10px;}
.imagedetail h1{font-size:24px; margin-bottom:4px;}
.imagedetail .top{margin-bottom:8px;}
.imagedetail aside{margin-bottom:8px; font-size: 15px;}
.imagedetail dir{padding-top:8px;}
.imagedetail .sub>dl{padding-bottom:4px;}
.imagedetail .sub>a{margin-top:4px;}
.imagedetail .content{padding-top:8px; margin-top:8px;}
.imagedetail .images{margin-bottom:8px;}
}
@media(min-width:1200px){
.imagedetail .sub{margin-bottom: 18px;}
.imagedetail .sub>dl{width: 25%;float: left;}
.imagedetail .images dl{visibility:hidden; opacity:0; transition:.6s;}
.imagedetail .images:hover>dl{visibility:visible; opacity:1;}
.imagedetail .images dl>*{position:absolute; top:50%; width:30px; height:30px; margin-top:-20px; transform:rotate(45deg);
cursor:pointer; transition:.6s; border-style:solid; border-color:rgb(49,55,66);}
.imagedetail .images dl>dt{left:40px; border-width:0 0 2px 2px;}
.imagedetail .images dl>dd{right:40px; border-width:2px 2px 0 0;}
.imagedetail .images dl>dt:hover,
.imagedetail .images dl>dd:hover{border-color:rgb(58,154,89);}
}

@media(min-width:992px){
.imagedetail{padding-top:28px; padding-bottom:28px;} 
}
@media(max-width:991px){
.imagedetail{padding-top:18px; padding-bottom:18px;} 
.imagedetail .sub{width:100%;padding-bottom: 8px; float:none;}
.imagedetail .sub>a{margin-top:8px;}
.imagedetail .content{padding-top:18px; margin-top:18px; border-top:1px solid #f0f0f0;}
.imagedetail .comment{margin-top:18px;}
}
@media(max-width:767px){
.imagedetail h1{font-size:24px; margin-bottom:4px;}
.imagedetail .top{margin-bottom:8px;}
.imagedetail aside{margin-bottom:8px;}  
.imagedetail dir{padding-top:8px;}
.imagedetail .sub>dl{padding-bottom:4px;}
.imagedetail .sub>a{margin-top:4px;}
.imagedetail .content{padding-top:8px; margin-top:8px;}
.imagedetail .images{margin-bottom:8px;}
}