*{ margin: 0;   padding: 0;}
header
{
    width: 100%;
    height: 5rem;
    background: transparent;
    backdrop-filter: blur(0.5rem);
    margin: 0;
    font-weight: bolder;
    position: fixed!important;
    color: white;
    /*font-family: '黑体', sans-serif; !* 使用系统的黑体字形 *!*/
    font-family: 'Calibri', 'Roboto', Arial, sans-serif; /* 使用圆润的无衬线字体 */
    z-index: 30;
}
a{color: inherit; text-decoration: none;}

#main_content, #nav{font-family: 'Calibri', Arial, '微软雅黑', sans-serif;}
#nav{font-weight: bold;}
/*------------------------------------字体大小设置------------------------------------*/
@media (max-width: 516px), (orientation: portrait){
    html {font-size: 3.2vw!important;}
}
@media (orientation: landscape) and (min-width: 516px) {
    html {font-size: 16px!important;}
}

#main_content h1 {font-size: 2.3rem!important;  line-height: 4rem; margin-top: 4rem; font-weight: bolder!important;}
#main_content h2 {font-size: 1.8rem!important;  line-height: 4rem; margin-top: 2rem;  font-weight: bold!important;}
#main_content h3 {font-size: 1.5rem!important;  line-height: 3rem; margin-top: 2rem;  font-weight: bold!important;}
#main_content h4 {font-size: 1.3rem!important;  line-height: 2.5rem; margin-top: 1rem;  font-weight: bold!important;}
#main_content h5 {font-size: 1.2rem!important;  line-height: 2rem; margin-top: 1.2rem;  font-weight: bold!important;}
#main_content p {font-size: 1rem!important; line-height: 1.4rem;}

/*------------------------------------列表属性------------------------------------*/
ul {list-style: none!important; user-select: none!important;}
/*------------------------------------导航栏横竖屏------------------------------------*/

/*横屏样式*/
@media (orientation: landscape) and (min-width: 716px) {
    /* 标题和正文 */
    h1 {font-size: 1.3rem!important;    font-weight: bolder!important;}
    h2 {font-size: 1rem!important;    font-weight: bolder!important;}
    h3 {font-size: 1.05rem!important;    font-weight: normal!important;}
    p {font-size: 1rem!important;}



    #header-logo,#header-home,#show-details,#help-cover,#ul2 {display: none;}
    #ul1>li:first-child{
        height: 3rem;
        width: 3rem;
        padding: 1rem;
    }
    #ul1
    {
        display: flex;
        position: relative;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }
    #ul1>li:not(#ul1>li:first-child)
    {
        /*border:2px solid yellow;*/
        position: relative;
        padding: 1.5rem 0.7rem 0.5rem;
        /*flex: 1;*/
        height: 3rem;
        /*display: flex;*/
        float: right;
        /*width: 2rem;*/
        /*flex-direction: column;*/
        justify-content: center;
        align-items: center!important;
        white-space: nowrap;
        background: transparent;
    }
    #ul1>li:nth-child(2)
    {
        flex:3!important;
    }
    #ul1 ul
    {
        display: none;
        position: absolute;
        bottom: 5.2rem;
        background-color: rgba(200, 200, 200, 0.5);
        padding: 0.5rem;
        /*border: 2px solid blue;*/
        box-shadow: #95a7b9 0 0.2rem 0;
        border-radius: 1rem;
        z-index: -90!important;
    }
    #ul1 ul:last-child { right: 0;}
    #ul1>li:not(#ul1>li:first-child):hover ul
    {
        display: flex!important;
        flex-direction: column!important;
        animation-name: slideInDown!important;
        z-index: -80!important;
    }
    #ul1>li:not(#ul1>li:first-child):not(:hover) ul
    {
        animation-name: slideOutUp!important;
    }
    #ul1 ul>li
    {
        margin: 0.5rem;
    }
}

/* 竖屏样式 */
@media (max-width: 716px), (orientation: portrait) {
    /* 标题和正文 */
    h1 {font-size: 2.5rem!important;}
    h2 {font-size: 1.5rem!important;}
    h3 {font-size: 1.25rem!important;}
    p {font-size: 1rem!important;}
    #ul1{display: none;}
    #ul2
    {
        position: absolute;
        background-color: rgba(256, 256, 256, 0.5);
        right: 0;
        bottom: 4.8rem;
        display: none;
        flex-direction: column;
        width: 10rem;
        margin: 0.5rem;
        /*border: 0.25rem solid greenyellow;*/
        box-shadow: #95a7b9 0 0.2rem 0;
        border-radius: 1rem;
    }
    #ul2>li
    {
        margin-top: 0.5rem;
        padding: 0 0.5rem;
        background-color: rgba(200, 200, 200, 0);
    }
    #ul2>li:last-child
    {
        margin-bottom: 0.5rem;
    }
    #ul2 ul
    {
        position: absolute;
        right: 10rem;
        background-color: rgba(200, 200, 200, 0.5);
        display: none;
        width: 12rem;
        z-index: -100;
    }
    #ul2>li:nth-child(1)>ul {   top: 0; }
    #ul2>li:nth-child(2)>ul {   top: 2rem; }
    #ul2>li:nth-child(3)>ul {   top: 4rem; }
    #ul2>li:nth-child(4)>ul {   top: 7rem; }
    #ul2>li:nth-child(5)>ul {   top: 10rem; }
    #ul2>li
    {
        word-wrap: break-word;
        background-color: rgba(256, 256, 256, 0);
        /*border: 1px solid black;*/
    }
    #ul2>li:hover ul
    {
        display: flex;
        flex-direction: column;
        animation-name: fadeInRight;
    }
    #ul2>li:not(:hover) ul
    {
        animation-name: fadeOutRight;
    }
    #ul2 ul
    {
        padding: 0.5rem;
        /*border: 0.25rem solid purple;*/
        box-shadow: #95a7b9 0 0.2rem 0;
        border-radius: 1rem;
    }
    #header-logo,#header-home,#show-details
    {
        display: flex;
    }

    #header-logo
    {
        width: 3rem;
        height: 3rem;
        float: left;
        margin: 1rem;
    }
    #header-home
    {
        float: left;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 3rem;
        padding: 1rem;
    }
    #show-details
    {
        width: 3rem;
        height: 4rem;
        /*background-color: yellowgreen;*/
        position: absolute;
        right: 0.5rem;
        top: 1rem;
    }
}


/*------------------------------------动画------------------------------------*/

.animated {
    animation-duration: 0.3s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
}
/*向下滑入*/
@keyframes slideInDown {
    from {
        transform: translateY(0);
        opacity: 0;
    }
    to {
        transform: translateY(calc(100% + 5.2rem));
        opacity: 1;
    }
}
/*向上滑出*/
@keyframes slideOutUp {
    from {
        display: flex;
        flex-direction: column;
        transform: translateY(calc(100% + 5.2rem));
        opacity: 1;
    }
    to {
        display: flex;
        flex-direction: column;
        transform: translateY(0);
        opacity: 0;
    }
}
/*从右淡入*/
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
/*向右淡出*/
@keyframes fadeOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
        display: flex;
        flex-direction: column;
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}




@keyframes gelatine {
  from, to { transform: scale(1, 1); }
  25% { transform: scale(0.9, 1.1); }
  50% { transform: scale(1.1, 0.9); }
  75% { transform: scale(0.95, 1.05); }
}

@keyframes gelatine-rotate {
  0% {  rotate: 0deg;}
  25% {  rotate: 90deg; }
  50% {  rotate: 180deg;}
  75% {  rotate: 270deg;}
    100% { rotate: 360deg; }
}

.spin {
  animation: spin 1s infinite linear;
}


/*------------------------------------页面通用主页内容------------------------------------*/

.h1img{
    display: inline-block;
    height: 2.3rem;
    margin-right: 1.5rem;
    transform: translateY(0.3rem);
    aspect-ratio: 1;
}

.parag{
    background-color: rgba(255, 255, 255, 30%);
    padding: 2vw;
    border-radius: 2rem;
}

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 8px;
    text-align: left;
}
caption {
    caption-side: top;
    font-weight: bold;
}
.table_box{
    position: relative;
    margin: 0 -1.5vw;
    padding: 1.5vw;
    /*border:1px solid red;*/
    overflow-x: auto;
    width: 48vw;
}