:root {
    --a-lighting-size: 60px;
    --a-lighting-basecolor: #f9f7dc;
    --a-lighting-color: #c4a162;
    /* --a-lighting-hightlight-color: #47d89f; */
    --a-lighting-hightlight-color: #fff194;

    --text-color-base: #f9f7dcff;
    --text-color-unselect: #f9f7dc80;
}

.body {
    --mouse-x: 0px;
    --mouse-y: 0px;
}

#banner {
    position: fixed;
    vertical-align: middle;
    width: 100dvw;
    z-index: 200;
}

#banner::before {
    content: "";
    position: absolute;
    background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .5) 100%);
    width: 100%;
    height: 80px;
}

#banner--Content {
    display: flex;
    padding: 20px 30px;
    width: 100%;
}

#banner--NameLogo {
    z-index: 300;
}

#banner--NameLogo a {
    display: block;
    background: url(../images/NameLogo02.png) no-repeat center;
    background-size: auto 100%;
    text-indent: -99999px;
    width: 240px;
    height: 60px;
}

#banner--Navi {
    flex-grow: 1;
}

#banner--Navi ul {
    list-style: none;
    position: absolute;
    top: 20px;
    bottom: 20px;
    right: 30px;
    z-index: 300;
}

#banner--Navi ul li {
    display: inline-block;
    margin: 0 30px;
    height: 100%;
}

#banner--Navi ul li a {
    display: inline-block;
    text-indent: -9999px;
    background-size: contain;
    height: 100%;
}

#banner--Navi01 {
    background: url(../images/NaviLogo01.png) no-repeat center;
    width: calc(0.25 * 545px);
}

#banner--Navi02 {
    background: url(../images/NaviLogo02.png) no-repeat center;
    width: calc(0.25 * 419px);
}

#banner--Navi--CV {
    background: url(../images/NaviLogo_CV.png) no-repeat center;
    width: calc(0.25 * 419px);
}

#banner--Navi03 {
    background: url(../images/NaviLogo03.png) no-repeat center;
    width: calc(0.25 * 545px);
}

.bannerNaviChosen {
    position: relative;
    pointer-events: none;
}

.bannerNaviChosen::before {
    content: "";
    background-color: #f9f7dc;
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
}

.bannerNaviUnchosen {
    opacity: 0.3;
}

.bannerNaviUnchosen:hover {
    opacity: 1;
}

#title {
    padding-top: 150px;
    text-align: center;
    z-index: 100;
}

#title--Header {
    margin: 30px 0;
    font-size: 72px;
    font-weight: 700;
}

#title--Info {
    font-size: 20px;
    font-weight: 100;
}


.contentMenu {
    position: fixed;
    display: flex;
    left: 1%;
    top: 50%;
    transform: translateY(-50%);
}

.contentMenu ul {
    list-style-type: none;
}

/* .contentMenu ul ul {
    text-indent: 0.5rem;
} */

.contentMenuList01,
.contentMenuList02 {
    /* padding-left: 0.5rem;
    padding-right: 1rem; */
    background-color: #00000000;
    transition-duration: 200ms;
}

.contentMenuList01:hover,
.contentMenuList02:hover {
    background-color: var(--text-color-unselect);
}

.contentMenuList01 {
    font-size: 1rem;
}

.contentMenuList02 {
    margin: 0.1rem 0;
    font-size: 1rem;
}

.contentMenuLink {
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    color: var(--text-color-unselect);
    text-decoration: none;
    /* font-size: 100%; */
    font-weight: 700;
    --index-self: 0;
    /* font-size: 0.7rem; */
}
.contentMenuList01 .contentMenuLink{
    padding: 0 1rem 0 1.5rem;

}
.contentMenuList02 .contentMenuLink{
    padding: 0 1rem 0 2.5rem;
}


/* .contentMenuLink:hover {
    color: var(--text-color-base);
} */

.contentMenuBar {
    background-color: var(--text-color-unselect);
    width: 0.3rem;
    border-radius: 0.15rem;
}

.contentMenuBarHandle {
    position: relative;
    background-color: var(--text-color-base);
    width: 100%;
    height: 0.3rem;
    border-radius: 0.15rem;
    top: calc(var(--position-center) * 1px - 0.15rem);
}

.contentContainer {
    padding-left: 15%;
}

#container {
    margin: 0px auto;
    max-width: 1200px;
    z-index: 100;
}

.containerArticle {
    cursor: default;
    margin: 50px 0 50px 0;
    padding-top: 70px;
}

.containerArticleHeaderImg {
    background-color: transparent;
    margin: 1rem auto;
    width: 1200px;
    height: 400px;
}

/* .contentArticleNav {
} */
.containerArticleHeader {
    margin: 10px 0;
    font-size: 2.5rem;
    font-weight: 900;
}
.containerArticleSubheader {
    margin: 10px 0;
    padding-top: 1.5rem;
    font-size: 1.5rem;
    font-weight: 500;
}

.containerArticleHeaderComment {
    font-size: 28px;
    font-weight: 100;
}

.containerArticleText {
    margin: 20px 0;
    font-weight: 200;
    /* font-size: 28px; */
}

.containerArticleKeypoint {
    display: inline-block;
    /*设定为inline-block才能使偏移量offset为局部偏移量*/
    text-indent: 0;
    text-decoration: none;
    font-weight: 900;
    /*font-size: 28px;*/

    background-color: var(--a-lighting-color);
    /*设定超链接鼠标聚光灯无法覆盖的地方的基础背景色*/
    background-image: radial-gradient(var(--a-lighting-hightlight-color), var(--a-lighting-color));
    /*设定超链接鼠标聚光灯效果渐变色*/
    background-size: var(--a-lighting-size) var(--a-lighting-size);
    background-repeat: no-repeat;
    /* background-position-x: calc(var(--offsetX) - var(--a-lighting-size) / 2);
    background-position-y: calc(var(--offsetY) - var(--a-lighting-size) / 2); */
    background-position-x: calc((var(--mouse-x) - var(--position-x)) * 1px - var(--a-lighting-size) / 2);
    background-position-y: calc((var(--mouse-y) - var(--position-y)) * 1px - var(--a-lighting-size) / 2);

    color: transparent;
    /* text-shadow: 0px 0 10px #0fa; */
    background-clip: text;
    /*以文字作为裁剪，显示背景图片*/
    -webkit-background-clip: text;
    /*以文字作为裁剪，显示背景图片，用于webkit内核浏览器（如Chrome）*/
}

.containerArticleTable {}

.containerArticleTable td {
    padding-right: 32px;
    min-width: 150px;
    font-weight: 200;
}

/* .containerArticleText a:hover{
    text-shadow: 0px 0 20px var(--a-lighting-hightlight-color);
    transition-duration: 0.15s;
} */


.containerArticlePic {
    display: block;
    margin: 10px auto;
    width: 640px;
    height: 360px;
}

.containerArticleYtb {
    display: block;
    margin: 10px auto;
    width: 1200px;
    height: 675px;
}

.containerArticleComment {
    margin: 0 auto 10px auto;
    font-size: 0.8rem;
    color: transparent;
    text-align: center;
    font-style: italic;
    font-weight: 100;
    text-shadow: 0px 0px 1px rgba(255, 255, 255, .5), 0px 4px 4px rgba(0, 0, 0, .15);
}

.containerArticleList {
    list-style: disc;
}

.containerArticleList li {
    list-style-position: inside;
    font-weight: 200;
}

#keyword--Main {
    display: block;
    position: relative;
    top: 150px;
    left: 0;
}

#keyword--MainContainer {
    display: flex;
    position: relative;
    margin: 0 auto;
    width: 1300px;
}

.keywordColumn {
    margin: 0 20px;
    width: 100%;
}

.keywordCard {
    position: relative;
    margin: 40px 0;
}

.keywordCardContainer {
    background-color: rgba(255, 255, 255, .15);
    box-shadow: 20px 20px 50px rgba(0, 0, 0, .2);
    border-radius: 15px;
    border-top: 1px solid rgba(255, 255, 255, .5);
    border-left: 1px solid rgba(255, 255, 255, .5);

    transform: rotateX(0deg);
}

.keywordCard:hover .keywordCardContainer {
    box-shadow: 20px 20px 50px rgba(0, 0, 0, .5);
    border-radius: 0px;

    perspective: 1000px;
    transform: perspective(1000px) rotateX(calc(clamp(-1, (var(--position-y) + var(--height-half) - var(--mouse-y)) / var(--height-half), 1) * 10deg)) rotateY(calc(clamp(-1, (var(--position-x) + var(--width-half) - var(--mouse-x)) / var(--width-half), 1) * -5deg));
}

.keywordCardContainer h2 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    font-size: 72px;
    font-weight: 900;
    text-align: center;
    transition-duration: 0.25s;
}

.keywordCard:hover .keywordCardContainer h2 {
    color: rgba(255, 255, 255, .1);
    z-index: 1;
}

.keywordCardInner {
    box-sizing: border-box;
    /* 以border范围作为width和height的尺寸衡量标准 */
    background-color: rgba(0, 0, 0, .5);
    border-image: url(../images/MenuItemBorder02.png) 64 fill repeat;
    border-style: solid;
    border-width: 30px;
    padding: 20px 0;
    width: 100%;
    height: 100%;
    opacity: 0;

    transition-duration: 0.25s;
}

.keywordCard:hover .keywordCardInner {
    opacity: 1;
}

.keywordCardInner p {}