body{display:flex;flex-direction:column !important;}
.dost{width: 90px;height:auto;position:absolute;left:10px;animation: dosts 5s ease-in-out infinite;}
@keyframes dosts {0% {top: 100px;}50%{top:200px;}100%{top:100px;}}

.colors{border:1px solid #ccc;height:100%;overflow:hidden;}
.colorsblack:nth-child(2n-1){background-color:#2d2d2d;height:50vh;}
.colorsblack h2,.colorsblack1 h2{color:#000;font-size:2rem;font-family:math;}
.colorsblack:nth-child(2n-1) h2{color:#fff;font-size:2rem;}

.colorsblack1,.colorsblack{height:50vh;width: 100%;padding: 10px;}
.colorsblack1 p,.colorsblack:nth-child(1) p{color:#fff;font-size:0.9rem;line-height:1.5;padding:10px 0;font-weight:300}
.colorsblack1:nth-child(1) p{color:#000;font-size:0.9rem;line-height:2.6;padding:10px 0;}

.colorsblack1:nth-child(2n){background-color:#2d2d2d;height:50vh;}
.colorsblack1:nth-child(2n) h2{color:#fff;font-size:2rem;}

.bracket-border-shadow {
    padding: 10px 0;
    color:#987d60;
    text-decoration: none;
    font-size:0.7rem;
    transition: all 0.3s ease;
}

.bracket-border-shadow::before,
.bracket-border-shadow::after {
    content: "";
    position: relative;
    display: inline-block;
    width: 8px;
    height: 20px;
    margin:-6px 16px;
    line-height:20px;
    border: 1px solid #987d60; /* 边框颜色和宽度 */
    box-sizing: border-box;}
    .bracket-border-shadow::before{ border-right:0;}
    .bracket-border-shadow::after{ border-left:0;}
    .bracket-border-shadow:hover {color: #fff;}
    .bracket-border-shadow:hover ::before{ border-left-color: #fff;}
    .headsign{color:#987d60;font-size:0.6rem;padding: 10px 0;}

    .itemcenter{display :  flex;          flex-direction :  column;        justify-content :  center;          align-items :  flex-start;}
    .itemcenter h2{transition: all 1s ease-in-out;transform:translateX(0px)}
    .itemcenter:hover h2{transform:translateX(20px);background:linear-gradient(to right, #987d60,rgb(219, 116, 5)) no-repeat 0 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
    
    .animatenum{display :  flex; width:100%;         flex-direction :  column;        justify-content :  space-between;          align-items :  center;}
    .animatenum>div{display:flex;border-bottom:1px solid #dad9d9;align-items:center;margin:5px 1px;width: 100%;padding:4px;}
    .animatenum span{display:block;font-size:1.5rem;font-weight:700;color:#987d60;}
    .animatenum i{font-size:2rem;color:#987d60;margin:0 20px;}
    .animatenum p{font-size:0.7rem;font-weight:400;color:#302d2c;}
    
    #rolling-number,#rolling-number1,#rolling-number2{display: inline;}

    .dialog{width: 100%;height: 100%;margin:0 auto;padding:15px;}
    .dialog li{list-style-type:none;color:#987d60}
    .dialog p{font-size:1rem;color:#987d60;line-height:1.8;margin:10px 0;font-family:math;background-attachment: fixed;background:#ebeef8;padding:10px;border-radius:5px}
    .dialog h3{font-size:1.5rem;font-weight:700;color:#987d60;}
    .dialog .text-center{margin:20px 0;}
    .layui-timeline-item img{margin:15px 0;}
    .layui-timeline-axis{color:#987d60}