@media (max-width:754.8px){
.黑色遮罩 {
    width: 100%;
    height: 100%;
    z-index: 3;
    position: fixed;
    margin-top: -30px;
    opacity: 0;
    visibility: hidden;
    background-color: hsla(0, 0%, 0%, 0);
    transition: opacity 0.3s ease, 
                visibility 0.3s ease,
                background-color 0.3s ease;
    pointer-events: none;}
.黑色遮罩.显示 {
    opacity: 1;
    visibility: visible;
    background-color: hsla(0, 0%, 0%, 0.48);
    pointer-events: auto;}
.黑色遮罩 .目录背景 {
    position: fixed;
    top: 0px;
    right: 0px;
    background-color: #FFFFFF;
    height: 100%;
    width: 350px;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    backface-visibility: hidden;}
.黑色遮罩.显示 .目录背景 {
    transform: translateX(0);}
.黑色遮罩 .目录背景 .目录 {
    background-color: hsla(0, 0%, 88%, 1.00);
    border-right-width: 92px;
    width: 73%;
    margin-right: 28px;
    margin-left: 10px;
    margin-top: 10px;
    height: 95%;
    border-radius: 10px;
    -webkit-box-shadow: 3px 5px 8px -3px hsla(0, 0%, 0%, 0.61);
    box-shadow: 3px 5px 8px -3px hsla(0, 0%, 0%, 0.61);
    overflow-y: scroll;}}
@media (min-width:755px) and (max-width:1365.8px){
.黑色遮罩 {
    width: 100%;
    height: 100vh;
    z-index: 3;
    position: fixed;
    margin-top: -30px;
    opacity: 0;
    visibility: hidden;
    background-color: hsla(0, 0%, 0%, 0);
    transition: opacity 0.3s ease, 
                visibility 0.3s ease,
                background-color 0.3s ease;
    pointer-events: none;}
.黑色遮罩.显示 {
    opacity: 1;
    visibility: visible;
    background-color: hsla(0, 0%, 0%, 0.48);
    pointer-events: auto;}
.黑色遮罩 .目录背景 {
    position: fixed;
    top: 0px;
    right: 0px;
    background-color: #FFFFFF;
    height: 100vh;
    width: 500px;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    backface-visibility: hidden;}
.黑色遮罩.显示 .目录背景 {
    transform: translateX(0);}
.黑色遮罩 .目录背景 .目录 {
    background-color: hsla(0, 0%, 88%, 1.00);
    border-right-width: 92px;
    width: 73%;
    margin-right: 28px;
    margin-left: 10px;
    margin-top: 10px;
    height: 95vh;
    border-radius: 10px;
    -webkit-box-shadow: 3px 5px 8px -3px hsla(0, 0%, 0%, 0.61);
    box-shadow: 3px 5px 8px -3px hsla(0, 0%, 0%, 0.61);
    overflow-y: scroll;}}
@media (min-width: 1365px){
.黑色遮罩 {
    width: 100%;
    height: 100vh;
    background-color: hsla(0, 0%, 0%, 0.48);
    z-index: 3;
    position: fixed;
    margin-top: -30px;
    display: none;
    opacity: 1;
    visibility: visible;}  
.黑色遮罩.显示 {
    display: none;}
.黑色遮罩 .目录背景 {
    display: none;}
.黑色遮罩.显示 .目录背景 {
    display: none;}}
@media (prefers-reduced-motion: reduce) {.黑色遮罩,
.黑色遮罩 .目录背景 {
    transition: none !important;
    animation: none !important;}
.黑色遮罩 {
    opacity: 1;
    visibility: visible;
    background-color: hsla(0, 0%, 0%, 0.48);}
.黑色遮罩 .目录背景 {
    transform: translateX(0);}}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.黑色遮罩 .目录背景 {
    transform: translateX(100%) translateZ(0);
    transition: transform 0.15s cubic-bezier(0, 0.55, 0.45, 1), 
                opacity 0.3s ease;} 
.黑色遮罩.显示 .目录背景 {
    transform: translateX(0) translateZ(0);}}
body.目录打开 {
    overflow: hidden;
    height: 100vh;
    position: fixed;
    width: 100%;}