.cate-btn .cate-button ul li a{font-family: "Space Mono";font-size: 13px;color: #000;text-align: center;}
@media screen and (min-width: 768px) {
.open-modal {font-family: "Space Mono";width: 225px; padding: 0 10px;  height: 50px; font-size: 13px; color: #fff; background: #000; cursor: pointer;text-align: right;display: block;position: inherit;z-index: 1;}
.open-modal p{text-align: center;}
.open-modal p.close{display: none;color: #fff;}
.open-modal:has(p.close){border: #000 solid 1px;}
.cate-btn{display: flex;justify-content: end;}
.cate-button{position: relative;}
.cate-btn .cate-button ul{position: absolute;top: 50px;width: 225px;opacity: 0;transition: height 1s ease, opacity 1s ease;height: 0; overflow: hidden; z-index: 1;}
.cate-btn .cate-button ul li{background: #fff;border: #000 solid 1px; border-top: none;}
.cate-btn .cate-button ul li a{padding: 15px;}
.cate-btn .cate-button ul.show{height: auto; opacity: 1;}
.cate-btn .cate-button ul li.active{color: #000; background: #d5d5d5;}
}

@media screen and (max-width: 767px) {
    .cate-btn .cate-button ul{display: flex;flex-wrap: wrap;}
    .cate-btn .cate-button ul li{width: 25%;padding: 5px;}
    main.archive-article .cate-btn .cate-button ul li{width: max-content;}
    main.archive-article .cate-btn .cate-button ul li a{padding: 7px 5px;}
    .cate-btn .cate-button ul li a{color: #fff;background: #000;padding: 7px 0;}
    .cate-btn .cate-button ul li.active a{color: #000; background: #F0F0F0;}
    .cate-button {padding: 20px 0;}
}