.archive-wrap{height:100vh;background:url(../images/archive/bg.webp) no-repeat center center;background-size:cover;width:100%;display:flex;align-items:center;justify-content:center}
.archive-content-wrap{width:100%;position: relative; z-index: 1;}
.archive-list{display:grid;grid-template-columns: repeat(7, 1fr);grid-auto-rows: auto;grid-column-gap:1rem;grid-row-gap: 1rem;align-items: center;margin-top:6rem;padding:0 5rem;}
.archive-list .archive-item{position:relative;text-align:center;flex: 1;height: 25rem;cursor: pointer;transition:all 0.5s linear;}
.archive-list .archive-item .item-bg{background:#000000b3 url(../images/archive/tab_bg.webp) no-repeat center;width: 10rem;height: 100%;margin: auto;background-size: contain;border-radius:0.6rem;box-shadow: -1px 2px 9px 1px #4b4b4bc4;display: flex;align-items: center;justify-content: center;transition:all 0.5s linear;}
.archive-list .archive-item .item-title{color:#fff;font-size: 1.5rem; font-family: 'Noto Serif SC', serif; writing-mode: vertical-rl;text-orientation: upright; letter-spacing: 1rem;transition:all 0.5s linear;}
.archive-list .active,
.archive-list .archive-item:hover{transform: scale(1.08);}
.archive-list .active .item-bg,
.archive-list .archive-item:hover .item-bg{box-shadow: 0px 0px 11px 2px #a74535; background-color: #7e3123; border: 1px solid #c84835a3;}
.archive-list .active .item-title,
.archive-list .archive-item:hover .item-title{ color:var(--color-primary);}
.archive-list .archive-content{width:27rem;flex-shrink: 0; height:41rem;background:#000000b3;border-radius: 0.6rem;box-shadow: -1px 2px 9px 1px #4b4b4bc4;position: relative;padding:1rem}
.border-top{width: 100%;height:22px;display: flex;justify-content: space-around;}
.border-top::before,
.border-top::after {content: "";width: 20px;height:22px;background: url(../images/archive/border.webp) no-repeat; background-size: 5rem; display: block;}
.border-top::after{left: 100%;background-position: right 0px}
.border-top .bt-x{flex: 1;border-top:0.1rem solid  #bf924e;}
.border-center {border-left: 0.1rem solid #bf924e;height: calc(100% - 44px); border-right: 0.1rem solid #bf924e;position: relative;display: flex;justify-content: center;}
.border-center .border-bg { background: #544632 url(../images/archive/tab_active.webp);background-size: contain; position: absolute; width: 92%; height: 100%; border-radius: 1rem;}
.border-bottom{width: 100%;height:22px;display: flex;justify-content: space-around;}
.border-bottom::before,
.border-bottom::after {content: "";width: 20px;height: 22px;background: url(../images/archive/border.webp) no-repeat 0 bottom; background-size: 5rem; display: block;}
.border-bottom::after{left: 100%;background-position: right bottom}
.border-bottom .bt-x{flex: 1;border-bottom:0.1rem solid  #bf924e;    }
.archive-list .archive-content .item-title{font-size: 2.3rem;opacity: 0.7;color:#fff;text-align: center;margin: 1.5rem 0;    font-family: 'Noto Serif SC', serif;}
.archive-list .archive-content .cont-item{opacity: 0;padding-top:1rem; visibility: hidden;  position: absolute;top: 10%; left: 0; width: 100%;text-align: center; transition:all 0.5s linear;}
.archive-list .archive-content .cont-item.item-active {opacity: 1;visibility: visible;top: 0%;}
.archive-list .archive-content .cont-item li{text-align: center;padding: 1.5rem 0;cursor: pointer;}
.archive-list .archive-content .cont-item li:hover{transform: scale(1.08);}
.archive-list .archive-content .cont-item li a{opacity: 0.7;font-size: 1.4rem;color:#fff;}
.archive-list .archive-content .cont-item li a:hover{opacity: 1;}
.archive-list .archive-content .cont-item ul{height: 28rem;overflow: hidden;}
.archive-list .archive-content .cont-item .columns{display:grid;grid-template-columns: repeat(2, 1fr);grid-auto-rows: auto;padding: inherit;overflow: auto;width: 80%;margin: auto;overflow-x: hidden;}
.archive-list .archive-content .cont-item .columns li{ padding: 1.1rem 0;}
.archive-list ::-webkit-scrollbar{ width:6px;height:6px;background-color: #51504c;border-radius: 10px;} 
.archive-list ::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px;background-color: #51504c}  
.archive-list ::-webkit-scrollbar-thumb{border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  background-color: #a37500}  
.smoke-bg {position: absolute;width: 100%;height:40%;left: 0px;bottom: 0px;overflow: hidden;pointer-events: none;}
.smoke-bg ul{display: flex; height: 100%; animation: yd 10s linear infinite;}
.smoke-bg ul li {list-style: none;width: 1333px;}
.smoke-bg ul li img{width: 1333px;height: auto;}
@keyframes yd{
to{transform: translate(-1333px); }
}

@media screen and (max-width:768px){.archive-wrap{align-items:flex-start;padding:0}
.archive-list .archive-item{height:35px}
.archive-list .archive-content{position:absolute;right:15px;z-index:1;width:60%;top:-52px;background-color:#000000de;height: 37rem;}
.archive-list{display:block;position:absolute;left:0px;padding:0px;margin-top:155px;width:100%}
.archive-list .archive-item .item-bg{width:30%;margin-left:12px;border-top-right-radius:0px;border-bottom-right-radius:0;background-image:url(../images/archive/tab_bg_x.webp)}
.archive-list .archive-item{height:50px;margin-top:15px}
.archive-list .archive-item .item-title{writing-mode:initial;font-size:14px;letter-spacing:4px}
.archive-list .active,.archive-list .archive-item:hover{transform:scale(1)}
.archive-list .archive-content .cont-item li{padding:1.2rem 0}
.border-center .border-bg{width: 88%;}
.archive-list .archive-content .cont-item{top:0;padding-top: 0;}
.archive-list .archive-content .cont-item ul {height: 25rem;    }
.archive-list .archive-content .cont-item .columns{width: 99%;}
}