/*业务样式*/
/* 备注:顶部导航栏的z-index是30
 * mask的z-index是30,
 * 个人弹窗的z-index是40 
 */

/* 侧边栏 */
/* start */
.sideBar {
    width: 50px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .7);
    backdrop-filter: blur(6px);
    z-index: 30;
    display: flex;
    justify-content: center;
    text-align: center;
    color: white;
    transition: all .5s;
}

.sideBar .sideBar-box {
    width: 50px;
    height: 90%;
    margin: 5vh 0 5vh 0;
    position: relative;
}

.sideBar .sideBar-box .sideBar-logo img {
    height: 25px;
    width: 25px;
    display: block;
    margin: 0 auto;
}

.sideBar .sideBar-box .sideBar-logo span {
    display: block;
    width: 50px;
    writing-mode: vertical-lr;
    margin: 0 auto;
    text-align: center;
    line-height: 50px;
    padding-top: 10px;
}

.sideBar .sideBar-box .sideBar-nav {
    height: 50%;
    width: 50px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.sideBar .sideBar-box .sideBar-nav ul {
    padding-top: 10px;
}

.sideBar .sideBar-box .sideBar-nav ul li {
    width: 50px;
    height: 40px;
    line-height: 40px;
}

.sideBar .sideBar-box .sideBar-nav ul li:hover {
    background-color: #5f85ff;
    color: black;
    /* border: 3px solid white; */
    outline: 3px solid white;
}

.sideBar .sideBar-box .sideBar-search {
    width: 25px;
    height: 25px;
    position: absolute;
    bottom: 0;
    margin-bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
}

.sideBar .sideBar-box .sideBar-search span {
    /* color: black; */
    font-size: 25px;
    font-family: "PingFang SC", "zk";
}

.sideBar .sideBar-box .sideBar-setting {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 25px;
    height: 25px;

}

.sideBar .sideBar-box .sideBar-setting span {
    /* color: black; */
    font-size: 18px;
    font-family: "PingFang SC", "zk";
    display: block;
    width: 25px;
    height: 27px;
}

.sideBar .sideBar-box .sideBar-setting .box {
    height: 200px;
    width: 70px;
    /* background-color: #ccc; */
    position: absolute;
    left: 20px;
    bottom: -20px;
    /* display: none; */
    /* 效果的弹出渐变 :一共三步,缺一不可
        需要注意的是:visibility: hidden;是将元素隐藏,但是依旧占用文档流.如果使用colapse元素一样隐藏,但是不占用文档流
    */
    visibility: hidden;
    opacity: 0;
    transition: all .5s linear;
}

.sideBar .sideBar-box .sideBar-setting .box .smallprompt {
    /* position: absolute;
    bottom: -20px;
    left: 45px; */
    width: 46px;
    height: 200px;
    background: hsla(0, 0%, 100%, 0.7);
    backdrop-filter: blur(6px);
    border-radius: 5px;
}

.sideBar .sideBar-box .sideBar-setting .box .smallprompt .nightMode {
    position: absolute;
    top: 10%;
    right: 10%;
}

.sideBar .sideBar-box .sideBar-setting .box .smallprompt .nightMode .theme-switch {
    --toggle-size: 6px;
    /* the size is adjusted using font-size,
     this is not transform scale,
     so you can choose any size */
    --container-width: 5.625em;
    --container-height: 2.5em;
    --container-radius: 6.25em;
    /* radius 0 - minecraft mode :) */
    --container-light-bg: #3D7EAE;
    --container-night-bg: #1D1F2C;
    --circle-container-diameter: 3.375em;
    --sun-moon-diameter: 2.125em;
    --sun-bg: #ECCA2F;
    --moon-bg: #C4C9D1;
    --spot-color: #959DB1;
    --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
    --stars-color: #fff;
    --clouds-color: #F3FDFF;
    --back-clouds-color: #AACADF;
    --transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25);
    --circle-transition: .3s cubic-bezier(0, -0.02, 0.35, 1.17);
}

.sideBar .sideBar-box .sideBar-setting .box .smallprompt .nightMode .theme-switch,
.theme-switch *,
.theme-switch *::before,
.theme-switch *::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: var(--toggle-size);
}

.sideBar .sideBar-box .sideBar-setting .box .smallprompt .nightMode .theme-switch .theme-switch__container {
    width: var(--container-width);
    height: var(--container-height);
    background-color: var(--container-light-bg);
    border-radius: var(--container-radius);
    overflow: hidden;
    cursor: pointer;
    -webkit-box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94);
    box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94);
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
    position: relative;
}

.sideBar .sideBar-box .sideBar-setting .box .smallprompt .nightMode .theme-switch .theme-switch__container::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    -webkit-box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;
    box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;
    border-radius: var(--container-radius)
}

.sideBar .sideBar-box .sideBar-setting .box .smallprompt .nightMode .theme-switch .theme-switch__checkbox {
    display: none;
}

.sideBar .sideBar-box .sideBar-setting .box .smallprompt .nightMode .theme-switch .theme-switch__circle-container {
    width: var(--circle-container-diameter);
    height: var(--circle-container-diameter);
    background-color: rgba(255, 255, 255, 0.1);
    position: absolute;
    left: var(--circle-container-offset);
    top: var(--circle-container-offset);
    border-radius: var(--container-radius);
    -webkit-box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition: var(--circle-transition);
    -o-transition: var(--circle-transition);
    transition: var(--circle-transition);
    pointer-events: none;
}

.sideBar .sideBar-box .sideBar-setting .box .smallprompt .nightMode .theme-switch .theme-switch__sun-moon-container {
    pointer-events: auto;
    position: relative;
    z-index: 2;
    width: var(--sun-moon-diameter);
    height: var(--sun-moon-diameter);
    margin: auto;
    border-radius: var(--container-radius);
    background-color: var(--sun-bg);
    -webkit-box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;
    box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;
    -webkit-filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));
    filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));
    overflow: hidden;
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
}

.sideBar .sideBar-box .sideBar-setting .box .smallprompt .nightMode .theme-switch .theme-switch__moon {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    width: 100%;
    height: 100%;
    background-color: var(--moon-bg);
    border-radius: inherit;
    -webkit-box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;
    box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
    position: relative;
}

.sideBar .sideBar-box .sideBar-setting .box .smallprompt .nightMode .theme-switch .theme-switch__spot {
    position: absolute;
    top: 0.75em;
    left: 0.312em;
    width: 0.75em;
    height: 0.75em;
    border-radius: var(--container-radius);
    background-color: var(--spot-color);
    -webkit-box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
    box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
}

.sideBar .sideBar-box .sideBar-setting .box .smallprompt .nightMode .theme-switch .theme-switch__spot:nth-of-type(2) {
    width: 0.375em;
    height: 0.375em;
    top: 0.937em;
    left: 1.375em;
}

.sideBar .sideBar-box .sideBar-setting .box .smallprompt .nightMode .theme-switch .theme-switch__spot:nth-last-of-type(3) {
    width: 0.25em;
    height: 0.25em;
    top: 0.312em;
    left: 0.812em;
}

.sideBar .sideBar-box .sideBar-setting .box .smallprompt .nightMode .theme-switch .theme-switch__clouds {
    width: 1.25em;
    height: 1.25em;
    background-color: var(--clouds-color);
    border-radius: var(--container-radius);
    position: absolute;
    bottom: -0.625em;
    left: 0.312em;
    -webkit-box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color);
    box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color);
    -webkit-transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
    -o-transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
    transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
}

.sideBar .sideBar-box .sideBar-setting .box .smallprompt .nightMode .theme-switch .theme-switch__stars-container {
    position: absolute;
    color: var(--stars-color);
    top: -100%;
    left: 0.312em;
    width: 2.75em;
    height: auto;
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
}

/* actions */

.sideBar .sideBar-box .sideBar-setting .box .smallprompt .nightMode .theme-switch .theme-switch__checkbox:checked+.theme-switch__container {
    background-color: var(--container-night-bg);
}

.sideBar .sideBar-box .sideBar-setting .box .smallprompt .nightMode .theme-switch .theme-switch__checkbox:checked+.theme-switch__container .theme-switch__circle-container {
    left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter));
}

.sideBar .sideBar-box .sideBar-setting .box .smallprompt .nightMode .theme-switch .theme-switch__checkbox:checked+.theme-switch__container .theme-switch__circle-container:hover {
    left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - 0.187em)
}

.sideBar .sideBar-box .sideBar-setting .box .smallprompt .nightMode .theme-switch .theme-switch__circle-container:hover {
    left: calc(var(--circle-container-offset) + 0.187em);
}

.sideBar .sideBar-box .sideBar-setting .box .smallprompt .nightMode .theme-switch .theme-switch__checkbox:checked+.theme-switch__container .theme-switch__moon {
    -webkit-transform: translate(0);
    -ms-transform: translate(0);
    transform: translate(0);
}

.sideBar .sideBar-box .sideBar-setting .box .smallprompt .nightMode .theme-switch .theme-switch__checkbox:checked+.theme-switch__container .theme-switch__clouds {
    bottom: -4.062em;
}

.sideBar .sideBar-box .sideBar-setting .box .smallprompt .nightMode .theme-switch .theme-switch__checkbox:checked+.theme-switch__container .theme-switch__stars-container {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.sideBar .sideBar-box .sideBar-setting .box .smallprompt .nightMode span {
    color: black;
    font-size: 0.7em;
    text-wrap: nowrap;
}

/* .sideBar .sideBar-box .sideBar-setting .box .smallprompt  */


.sideBar .sideBar-box .sideBar-setting .box .prompt {
    height: 200px;
    width: 23px;
    position: relative;
}

.sideBar .sideBar-box .sideBar-setting .box .prompt .triangle {
    position: absolute;
    bottom: 20px;
    left: 4px;
    height: 0px;
    width: 0px;
    border: 10px;
    border-color: transparent #ffffffb3 transparent transparent;
    border-style: solid;
}

/* end */

/* 主盒子 */
.main .poster {
    width: 100%;
    min-width: 100vw;
    max-width: 100%;
    height: 100vh;
}

.main .poster .poster-box {
    width: 100%;
    height: 100%;
    background: url('/images/poster-bg.webp');
    /* fixed:背景图片不会随着页面的滚动而滚动 */
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}

.main .poster .poster-box .poster-box-top {
    width: 70vw;
    height: 30vh;
    /* position: relative; */
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}

.main .poster .poster-box .poster-box-top .poster-box-top-title .title-box {
    width: 660px;
    margin: 0 auto;
    animation: tying 2s steps(22), blnk .5s step-end infinite alternate;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid;
}

.main .poster .poster-box .poster-box-top .poster-box-top-title {
    font-size: 28px;
    color: white;
    text-align: center;

    height: 84px;
    width: 70vw;
    /* position: absolute; */
    /* left: 50%; */
    /* transform: translateX(-50%); */
    bottom: 0;
}

/* .main .poster .poster-box .poster-box-top .poster-box-top-title .title {
    height: 42px;
    text-align: right;
    color: transparent;
    animation: hue 4s linear infinite;
    background-image: linear-gradient(to right bottom, rgb(255, 0, 0), rgb(255, 128, 0), rgb(255, 255, 0), rgb(0, 255, 0), rgb(0, 255, 128), rgb(0, 255, 255), rgb(0, 128, 255), rgb(0, 0, 255), rgb(128, 0, 255), rgb(255, 0, 255), rgb(255, 0, 128));
    -webkit-background-clip: text;
} */

/* 彩色文字效果方法 */
/* @keyframes hue {
    from {
        filter: hue-rotate(0);
    }

    to {
        filter: hue-rotate(-360deg);
    }
} */

/* 顶部title文字打印效果 */
.main .poster .poster-box .poster-box-top .poster-box-top-title p {
    line-height: 42px;
}

/* 打印动画方法 */
@keyframes tying {
    from {
        width: 0;
    }

    to {
        width: 45vw;
    }
}

@keyframes blnk {
    50% {
        border-color: transparent;
    }
}

/* 时间框 */
.main .poster .poster-box .poster-box-top .poster-box-top-time {
    width: 70vw;
    height: 20vh;
    /* position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%); */
}

.main .poster .poster-box .poster-box-top .poster-box-top-time ul {
    display: flex;
    justify-content: center;
    width: 100%;
}

.main .poster .poster-box .poster-box-top .poster-box-top-time ul li {
    height: 100px;
    width: 100px;
    /* background-color: rgba(255,255,255,0.7); */
    /* margin-right: 10px; */
    border-radius: 50%;
    line-height: 100px;
    color: white;
    font-size: 72px;
    text-align: center;
    font-weight: bold;
    font-family: 'timefont';
}

.main .poster .poster-box .poster-box-top .poster-box-top-time ul li:nth-child(3) {
    height: 0px;
    width: 0px;
    font-size: 28px;
    line-height: 100px;
}

.main .poster .poster-box .poster-box-top .poster-box-top-time ul li:last-child {
    margin-right: 0;
}

/* 个人信息按钮 */
.main .personalInformationButton {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: fixed;
    bottom: 5%;
    right: 2%;
    border: 2px solid #ccc;
    opacity: 0.5;
    transition: all 0.5s;
    cursor: pointer;
}

.main .personalInformationButton:hover {
    cursor: pointer;
    opacity: 1;
    transition: all 0.5s;
}

.main .personalInformationButton img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.main .personalInformationButton .returnTop {
    position: absolute;
    top: -55%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #5f85ff;
    display: block;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 5px;
    color: white;
    opacity: 0;
    transition: all 2s;
}

.main .personalInformationButton:hover .returnTop {
    opacity: 1;
}

.main .poster .poster-box .down-type {
    width: 26px;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.main .poster .poster-box .down-type img {
    /* 去掉图片边框用 */
    display: block;
}

.main .poster .poster-box .down-type .down-type-1 {
    animation: arrow 1.5s infinite 0s;
}

.main .poster .poster-box .down-type .down-type-2 {
    animation: arrow 1.5s infinite 0.5s;
}

.main .poster .poster-box .down-type .down-type-3 {
    animation: arrow 1.5s infinite 1s;
}

@keyframes arrow {

    /* 这里写的是对时间产生比例进行效果输出 */
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.main .poster .poster-box .poster-box-top .pl {
    display: block;
    width: 70vw;
    height: 3.375em;
}

.main .poster .poster-box .poster-box-top .pl__arrows,
.main .poster .poster-box .poster-box-top .pl__ring-rotate,
.main .poster .poster-box .poster-box-top .pl__ring-stroke,
.main .poster .poster-box .poster-box-top .pl__tick {
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.main .poster .poster-box .poster-box-top .pl__arrows {
    animation-name: arrows42;
    transform: rotate(45deg);
    transform-origin: 16px 52px;
}

.main .poster .poster-box .poster-box-top .pl__ring-rotate,
.main .poster .poster-box .poster-box-top .pl__ring-stroke {
    transform-origin: 80px 80px;
}

.main .poster .poster-box .poster-box-top .pl__ring-rotate {
    animation-name: ringRotate42;
}

.main .poster .poster-box .poster-box-top .pl__ring-stroke {
    animation-name: ringStroke42;
    transform: rotate(-45deg);
}

.main .poster .poster-box .poster-box-top .pl__tick {
    animation-name: tick42;
}

.main .poster .poster-box .poster-box-top .pl__tick:nth-child(2) {
    animation-delay: -1.75s;
}

.main .poster .poster-box .poster-box-top .pl__tick:nth-child(3) {
    animation-delay: -1.5s;
}

.main .poster .poster-box .poster-box-top .pl__tick:nth-child(4) {
    animation-delay: -1.25s;
}

.main .poster .poster-box .poster-box-top .pl__tick:nth-child(5) {
    animation-delay: -1s;
}

.main .poster .poster-box .poster-box-top .pl__tick:nth-child(6) {
    animation-delay: -0.75s;
}

.main .poster .poster-box .poster-box-top .pl__tick:nth-child(7) {
    animation-delay: -0.5s;
}

.main .poster .poster-box .poster-box-top .pl__tick:nth-child(8) {
    animation-delay: -0.25s;
}

/* Animations */
@keyframes arrows42 {
    from {
        transform: rotate(45deg);
    }

    to {
        transform: rotate(405deg);
    }
}

@keyframes ringRotate42 {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(720deg);
    }
}

@keyframes ringStroke42 {

    from,
    to {
        stroke-dashoffset: 452;
        transform: rotate(-45deg);
    }

    50% {
        stroke-dashoffset: 169.5;
        transform: rotate(-180deg);
    }
}

@keyframes tick42 {

    from,
    3%,
    47%,
    to {
        stroke-dashoffset: -12;
    }

    14%,
    36% {
        stroke-dashoffset: 0;
    }
}

/* 4end */


/* 个人信息区域 */
.main .homepage {
    width: 100%;
    height: 100vh;
    min-height: 700px;
}

.main .homepage .homepage-box {
    width: 100%;
    height: 100%;
    background: url('/images/poster-bg.webp');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.main .homepage .homepage-box .homepage-box-top {
    width: 1200px;
    height: 450px;
    background-color: #ffffffb3;
    border-radius: 30px;

}

.main .homepage .homepage-box .homepage-box-top .homepage-box-top-left {
    width: 630px;
    height: 356px;
    padding-left: 30px;
    padding-top: 30px;
}

.main .homepage .homepage-box .homepage-box-top .homepage-box-top-left .title {
    font-size: 70px;
    color: #00001e;
    line-height: 1em;
}

.main .homepage .homepage-box .homepage-box-top .homepage-box-top-left .info {
    font-size: 70px;
    color: #00001e;
    line-height: 1em;
}

.main .homepage .homepage-box .homepage-box-top .homepage-box-top-left .smallinfo {
    font-size: 30px;
    color: #00001e;
    padding-top: 28px;
    line-height: 1em;
    display: block;
}

.main .homepage .homepage-box .homepage-box-top .homepage-box-top-left .homepage-about {
    margin-top: 20px;
}

.main .homepage .homepage-box .homepage-box-top .homepage-box-top-left .homepage-about .about {
    width: 136px;
    height: 48px;
    background-color: black;
    color: white;
    padding: 0 36px;
    line-height: 48px;
    border-radius: 20px;
    margin-right: 10px;
    font-size: 16px;
    transition: all .5s;
}

.main .homepage .homepage-box .homepage-box-top .homepage-box-top-left .homepage-about .about:hover {
    background-color: #3478f5;
    transition: all .5s;
}

.main .homepage .homepage-box .homepage-box-top .homepage-box-top-left .homepage-about .icon {
    font-size: 16px;
    width: 40px;
    height: 48px;
    background-color: black;
    color: white;
    padding: 0 36px;
    line-height: 48px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .5s;
}

.main .homepage .homepage-box .homepage-box-top .homepage-box-top-left .homepage-about .icon:hover {
    background-color: #3478f5;
    transition: all .5s;
}

.main .homepage .homepage-box .homepage-box-top .homepage-box-top-right {
    width: 420px;
    height: 420px;
    margin-top: 22px;
    margin-right: 20px;
}

.main .homepage .homepage-box .homepage-box-top .homepage-box-top-right img {
    width: 405px;
    height: 405px;
    border-radius: 20px;
    border: 2px solid white;
    animation: floating 4s ease-in-out infinite;
    pointer-events: none;
    object-fit: cover;
}

/* 动画效果方法 */
@keyframes floating {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(0, 10px);
    }

    100% {
        transform: translate(0, 0);
    }
}

.main .homepage .homepage-box .homepage-box-bottom {
    width: 1200px;
    height: 200px;
    text-align: center;
    margin-top: 20px;
    background-color: #ffffffb3;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.main .homepage .homepage-box .homepage-box-bottom .homepage-box-bottom-title {
    width: 100%;
    margin-top: 15px;
    padding: 0 50px 0;
}

.main .homepage .homepage-box .homepage-box-bottom .homepage-box-bottom-img {
    width: 60px;
    height: 60px;
    margin: 0 auto;
}

.main .homepage .homepage-box .homepage-box-bottom .homepage-box-bottom-img img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 4px solid #fff;
    transition: all 1s;
    transition: box-shadow 5s;
    box-shadow: 0 0 20px 5px #0073ffb3;
}

.main .homepage .homepage-box .homepage-box-bottom .homepage-box-bottom-img:hover img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 4px solid #fff;
    transition: all 1s;
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    border: 4px solid #ccc;
    box-shadow: 0 0 40px 5px #0073ffb3;
    transition: box-shadow 5s;
    -webkit-transition: -webkit-transform 1s linear;
}

.main .homepage .homepage-box .homepage-box-bottom .homepage-box-bottom-info {
    margin-bottom: 15px;
    color: #5b595a;
}

.main .project {
    width: 100%;
    height: 100vh;
    min-height: 800px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: url('../images/pages-bg.webp');
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.main .project .project-box {
    width: 100%;
    height: 100%;
    display: flex;
    /* justify-content: center;
    align-items: center; */
    margin-top: 10vh;
    flex-direction: column;
}

.main .project .project-box .project-top {
    width: 70%;
    height: 30%;
    display: flex;
    margin: 0 auto;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
}

.main .project .project-box .project-top .tips {
    color: #e5a80d;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main .project .project-box .project-top .project-title {
    font-size: 56px;
    color: white;
    font-weight: bold;
    text-align: center;
    line-height: 60px;
    margin-top: 12px;
}

.main .project .project-box .project-top .project-about {
    font-size: 16px;
    color: white;
    margin: 10px 0 32px 0;
    opacity: 0.8;
}

.main .project .project-box .project-top .project-link .project-buttom {
    padding: 8px 26px;
    background: white;
    color: black;
    font-size: 16px;
    white-space: nowrap;
    border-radius: 26px;
    transition: all .5s;
}

.main .project .project-box .project-top .project-link .project-buttom:hover {
    background: black;
    color: white;
    transition: all .5s;
}

.main .project .project-box .project-top .project-link .second-link {
    color: black;
    font-size: 14px;
    margin-left: 14px;
}

.main .project .project-pic {
    width: 50vw;
    display: flex;
    justify-content: center;
    /* margin-top: 20vh; */
    transition: transform 2s cubic-bezier(0, 0, 0, 1) 0s;
}

.main .project .project-pic img {
    width: 100%;
}

/* 个人简化版页面 */
/* 个人简化版页面 */
.main .simplifypages {
    width: 100%;
    height: 308px;
    background: #f5f5f7;
    position: relative;
    background-attachment: fixed;
}

.main .simplifypages .simplifypages-title {
    position: absolute;
    top: 16.5px;
    left: 165px;
    font-size: 32px;
    font-weight: bold;
    margin-top: 10px;
}

.main .simplifypages .simplifypages-info {
    position: absolute;
    top: 55px;
    margin-top: 15px;
    left: 165px;
    font-size: 14px;
}

.main .simplifypages .simplifypages-content {
    width: 400px;
    height: 100px;
    position: relative;
    font-size: 14px;
    margin-right: 10px;
}

.main .simplifypages .simplifypages-content .simplifypages-content-img {
    width: 100px;
    height: 100px;
    border-radius: 28px;
    position: absolute;
    top: 145%;
    left: 40%;
    margin-right: 10px;
}

.main .simplifypages .simplifypages-content .simplifypages-content-right {
    position: absolute;
    top: 145%;
    left: 80%;
    width: 167px;
    height: 100px;
}

.main .simplifypages .simplifypages-content .simplifypages-content-right .simplifypages-word {
    font-size: 20px;
    font-weight: bold;
    margin: 0, 0, 8px, 0;
    color: #00001e;
}

.main .simplifypages .simplifypages-content .simplifypages-content-right .simplifypsges-word-redword {
    position: absolute;
    top: -10%;
    right: -20%;
    background: rgba(255, 0, 0, 0.693);
    color: white;
    font-size: 14px;
    border-radius: 5px;
    width: 32px;
    text-align: center;
}

.main .simplifypages .simplifypages-content .simplifypages-content-right p {
    font-size: 14px;
    opacity: 0.85;
}

.main .simplifypages .simplifypages-content .simplifypages-content-right .simplifypages-link {
    width: 68px;
    height: 30px;
    background: #3478f5;
    color: white;
    padding: 6px 20px;
    border-radius: 30px;
    position: absolute;
    top: 70%;
    transition: ease-in-out 0.3s;
}

.main .simplifypages .simplifypages-content .simplifypages-content-right .simplifypages-link:hover {
    width: 68px;
    height: 30px;
    background: #3478f5;
    color: white;
    padding: 6px 20px;
    border-radius: 30px;
    position: absolute;
    top: 70%;
    opacity: 0.85;
    transition: ease-in-out 0.3s;
}

.main .simplifypages .simplifypages-content .simplifypages-content-right .simplifypages-link-2 {
    width: 100px;
    height: 30px;
    background: #3478f5;
    color: white;
    padding: 6px 20px;
    border-radius: 30px;
    position: absolute;
    top: 70%;
    left: 50%;
    transition: ease-in-out 0.3s;
}

.main .simplifypages .simplifypages-content .simplifypages-content-right .simplifypages-link-2:hover {
    width: 100px;
    height: 30px;
    background: #3478f5;
    color: white;
    padding: 6px 20px;
    border-radius: 30px;
    position: absolute;
    top: 70%;
    left: 50%;
    opacity: 0.85;
    transition: ease-in-out 0.3s;
}

.main .article {
    min-height: 700px;
    max-height: 1000px;
    width: 100%;
    height: 100vh;
    background: url('/images/article-bg.webp');
    background-size: cover;
    /* display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center; */
    position: relative;
    background-attachment: fixed;
}

/* 页面内容 */
.main .article .article-info {
    max-width: 1200px;
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0 auto;
    padding-top: 10vh;
}

.main .article .article-info .article-tips {
    color: #e5a80d;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main .article .article-info .article-title {
    font-size: 56px;
    color: white;
    font-weight: bold;
    text-align: center;
    line-height: 60px;
    margin-top: 10px;
    padding-left: 5%;
    display: block;
}

.main .articles .article-info .article-about {
    opacity: 0.8;
    margin-top: 20px;
}

.main .article .article-info .article-about-info {
    font-size: 16px;
    color: white;
    margin: 0 0 32px 0;

}

.main .article .article-info .article-link {
    margin-top: 20px;
}

.main .article .article-info .article-link .article-buttom {
    padding: 8px 26px;
    background: white;
    color: black;
    font-size: 16px;

    border-radius: 26px;
    transition: ease-in-out 0.3s;
    white-space: nowrap;
}

.main .article .article-info .article-link .article-buttom:hover {
    padding: 8px 26px;
    background: black;
    color: white;
    font-size: 16px;
    border-radius: 26px;
    transition: ease-in-out 0.3s;
    white-space: nowrap;
}

.main .article .article-info .article-link .article-link {
    color: black;
    opacity: 1;
    font-size: 14px;
    margin-left: 12px;
    transition: ease-in-out 0.3s;
}

.main .article .article-pic {
    width: 30%;
    will-change: transform;
    transition: transform 2s cubic-bezier(0, 0, 0, 1) 0s;
    /* display: flex;
    justify-content: center;
    align-items: flex-end; */
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
}

.main .article .article-pic .article-pic-img {
    width: 100%;
    height: 100%;
}

.main .simplifyarticle {
    width: 100vw;
    height: 308px;
    background-color: white;
    background-attachment: fixed;
}

.main .simplifyarticle .simplifyarticle-box {
    width: 90%;
    height: 20vh;
    margin: 0 auto;
    padding-left: 5%;
}

.main .simplifyarticle .simplifyarticle-box .simplifyarticle-title {
    font-size: 32px;
    font-weight: bold;
    margin-top: 30px;
}

.main .simplifyarticle .simplifyarticle-box .simplifyarticle-info {
    margin-top: 10px;
    font-size: 14px;
    margin-bottom: 10px;
}

.main .simplifyarticle .simplifyarticle-box .simplifyarticle-box-bottom {
    width: 100%;
    height: 10vh;
    display: flex;
    flex-wrap: wrap;
    margin-top: 25px;
}

.main .simplifyarticle .simplifyarticle-box .simplifyarticle-box-bottom .simplifyarticle-content {
    width: 19em;
    height: 140px;
    margin-right: 40px;
    padding: 10px;
}

.main .simplifyarticle .simplifyarticle-box .simplifyarticle-box-bottom .simplifyarticle-content img {
    width: 100px;
    height: 100px
}

.main .simplifyarticle .simplifyarticle-box .simplifyarticle-box-bottom .simplifyarticle-content .simplifyarticle-content-right {
    position: relative;
}

.main .simplifyarticle .simplifyarticle-box .simplifyarticle-box-bottom .simplifyarticle-content .simplifyarticle-word {
    font-size: 16px;
    font-weight: bold;
    margin-top: 10px;
}

.main .simplifyarticle .simplifyarticle-box .simplifyarticle-box-bottom .simplifyarticle-content .simplifyarticle-word-redword {
    position: absolute;
    top: -1px;
    right: -45px;
    background-color: red;
    color: white;
    border-radius: 10px;
    padding: 0 5px;
}

.main .simplifyarticle .simplifyarticle-box .simplifyarticle-box-bottom .simplifyarticle-content .simplifyarticle-link {
    color: white;
    padding: 5px;
    border-radius: 20px;
    margin-top: 10px;
    background-color: #3478f5;
    display: inline-block;
    width: 50px;
    text-align: center;
    transition: ease-in-out 0.3s;
}

.main .simplifyarticle .simplifyarticle-box .simplifyarticle-box-bottom .simplifyarticle-content .simplifyarticle-link:hover {
    background-color: #5f85ff;
    transition: ease-in-out 0.3s;
}

.main .simplifyarticle .simplifyarticle-box .simplifyarticle-box-bottom .simplifyarticle-content .simplifyarticle-link-2 {
    font-size: 10px;
    opacity: 0.8;
}

/* 个人技能页面 */
.main .personal-skills {
    width: 100%;
    height: 100vh;
    min-height: 800px;
    background: url('/images/personal-skills-bg.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main .personal-skills .personal-skills-box {
    width: 90%;
    height: 80%;
    margin: 0 auto;
    background-color: #ffffffb3;
    border-radius: 30px;
}

.main .personal-skills .personal-skills-box .personal-skills-title {
    font-size: 32px;
    margin-top: 30px;
    margin-left: 4%;
}

.main .personal-skills .personal-skills-box .personal-skills-info {
    font-size: 14px;
    margin-top: 10px;
    color: #000000b3;
    margin-left: 4%;
}

.main .personal-skills .personal-skills-box .personal-skills-lists {
    width: 100%;
    height: 90%;
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.main .personal-skills .personal-skills-box .personal-skills-lists .personal-skills-list {
    width: 30%;
    height: 40%;
    border-radius: 20px;
    position: relative;
    background: url('/images/poster-bg.webp');
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .5s;
}

.main .personal-skills .personal-skills-box .personal-skills-lists .personal-skills-list:hover {
    outline: 5px solid white;
    transform: scale(1.05);
    overflow: hidden;
    transition: all .5s;
}

.main .personal-skills .personal-skills-box .personal-skills-lists .personal-skills-list-1 {
    background: url('/images/article-bg.webp');
    background-size: cover;
}

.main .personal-skills .personal-skills-box .personal-skills-lists .personal-skills-list-2 {
    background: url('/images/personal-bg.webp');
    background-size: cover;
}

.main .personal-skills .personal-skills-box .personal-skills-lists .personal-skills-list .list-info {
    width: 90%;
    height: 80%;
    background-color: #ffffffb3;
    border-radius: 20px;
    position: relative;
    opacity: 0;
    transition: all .5s;
    z-index: 20;
}

.main .personal-skills .personal-skills-box .personal-skills-lists .personal-skills-list:hover .list-info {
    opacity: 1;
    transition: all .5s;
    z-index: 20;
}

.main .personal-skills .personal-skills-box .personal-skills-lists .personal-skills-list .list-info .list-info-left img {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
}

.main .personal-skills .personal-skills-box .personal-skills-lists .personal-skills-list .list-info .list-info-right {
    position: absolute;
    top: 50%;
    left: 70%;
    transform: translate(-50%, -50%);
}

.main .personal-skills .personal-skills-box .personal-skills-lists .personal-skills-list .list-info .list-info-right span {
    font-size: 28px;
    display: block;
    line-height: 1em;
}

.main .personal-skills .personal-skills-box .personal-skills-lists .personal-skills-list .list-info .list-info-right p {
    font-size: 10px;
}

.main .personal-skills .personal-skills-box .personal-skills-lists .personal-skills-list .list-info .list-info-right a {
    margin-top: 10px;
    display: block;
    text-align: center;
    line-height: 30px;
    color: white;
    width: 50px;
    height: 30px;
    border-radius: 25px;
    background-color: #3478f5;
    transition: ease-in-out 0.3s;
}

.main .personal-skills .personal-skills-box .personal-skills-lists .personal-skills-list .list-info .list-info-right a:hover {
    background-color: #5f85ff;
    transition: ease-in-out 0.3s;
}

.main .personal-skills .personal-skills-box .personal-skills-lists .personal-skills-list .hello-img {
    width: 50px;
    height: 50px;
    position: absolute;
    right: 30px;
    bottom: 35px;
    border-radius: 50%;
    opacity: 0;
    transition: all 2s;
    z-index: 20;
}

.main .personal-skills .personal-skills-box .personal-skills-lists .personal-skills-list:hover .hello-img {
    opacity: 1;
    transition: all 2s;
    z-index: 20;
}

.main .personal-skills .personal-skills-box .personal-skills-lists .personal-skills-list .list-mask {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 20px;
}

.main .personal-skills .personal-skills-box .personal-skills-lists .personal-skills-list:hover .list-mask {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 20px;
}

/* 开发区样式 */
.alpha {
    width: 100%;
    height: 10vh;
    background: white;
    background-attachment: fixed;
    cursor: pointer;
}

.alpha .alpha-box {
    width: 100%;
    height: 100%;
    position: relative;
}

.alpha .alpha-box .alpha-font {
    font-size: 20px;
    font-family: "PingFang SC", "zk";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 未完待续 */
.notfinished {
    width: 100%;
    height: 30vh;
    border-top: 1px solid #ccc;
}

.notfinished .notfinished-box {
    width: 90%;
    height: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    margin-top: 20px;

}

/* 彩色文字效果方法 */
/* {
    color: transparent;
    animation: hue 4s linear infinite;
    background-image: linear-gradient(to right bottom, rgb(255, 0, 0), rgb(255, 128, 0), rgb(255, 255, 0), rgb(0, 255, 0), rgb(0, 255, 128), rgb(0, 255, 255), rgb(0, 128, 255), rgb(0, 0, 255), rgb(128, 0, 255), rgb(255, 0, 255), rgb(255, 0, 128));
    -webkit-background-clip: text;
}
@keyframes hue {
    from {
        filter: hue-rotate(0);
    }

    to {
        filter: hue-rotate(-360deg);
    }
} */

/* 彩色文字效果方法 */
@keyframes hue {
    from {
        filter: hue-rotate(0);
    }

    to {
        filter: hue-rotate(-360deg);
    }
}

.notfinished .notfinished-box .notfinished-box-left {
    display: flex;
    justify-content: center;
    align-items: center;
}

.notfinished .notfinished-box .notfinished-box-left .notfinished-box-left-img {
    width: 100px;
    height: 100px;
    border-radius: 30px;
    box-shadow: 0 0 10px 5px #0073ffb3;
    transition: all .5s;
}

.notfinished .notfinished-box:hover .notfinished-box-left .notfinished-box-left-img {
    width: 100px;
    height: 100px;
    border-radius: 30px;
    box-shadow: 0 0 40px 5px #0073ffb3;
    transition: all .5s;
}

.notfinished .notfinished-box .notfinished-box-right {
    margin-left: 5em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* color: transparent;
animation: hue 4s linear infinite;
background-image: linear-gradient(to right bottom, rgb(255, 0, 0), rgb(255, 128, 0), rgb(255, 255, 0), rgb(0, 255, 0), rgb(0, 255, 128), rgb(0, 255, 255), rgb(0, 128, 255), rgb(0, 0, 255), rgb(128, 0, 255), rgb(255, 0, 255), rgb(255, 0, 128));
-webkit-background-clip: text; */

.notfinished .notfinished-box .notfinished-box-right .notfinished-box-right-title {
    font-size: 28px;
    font-weight: bold;
    color: black;
    opacity: 0.85;
    transition: all .5s;
}

.notfinished .notfinished-box:hover .notfinished-box-right .notfinished-box-right-title {
    color: transparent;
    animation: hue 4s linear infinite;
    background-image: linear-gradient(to right bottom, rgb(255, 0, 0), rgb(255, 128, 0), rgb(255, 255, 0), rgb(0, 255, 0), rgb(0, 255, 128), rgb(0, 255, 255), rgb(0, 128, 255), rgb(0, 0, 255), rgb(128, 0, 255), rgb(255, 0, 255), rgb(255, 0, 128));
    background-clip: text;
    transition: all .5s;
    font-size: 30px;
}

.notfinished .notfinished-box .notfinished-box-right p {
    font-size: 14px;
    color: black;
    opacity: 0.85;
    margin-top: 10px;
    margin-bottom: 10px;
}

.notfinished .notfinished-box:hover .notfinished-box-right p {
    color: transparent;
    animation: hue 4s linear infinite;
    background-image: linear-gradient(to right bottom, rgb(255, 0, 0), rgb(255, 128, 0), rgb(255, 255, 0), rgb(0, 255, 0), rgb(0, 255, 128), rgb(0, 255, 255), rgb(0, 128, 255), rgb(0, 0, 255), rgb(128, 0, 255), rgb(255, 0, 255), rgb(255, 0, 128));
    background-clip: text;
    transition: all .5s;
    font-size: 16px;
}

.footer {
    width: 100%;
    height: 40vh;
    background-color: #eaeaea;
    position: relative;
}

.footer .footer-box {
    width: 90%;
    height: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.footer .footer-box .footer-box-left {
    font-size: 14px;

    font-weight: bold;
    color: #00001e;
    opacity: 0.6;
    position: absolute;
    top: 30%;
    left: 5%;
}

.footer .footer-box .footer-box-left a {
    transition: all 0.5s;
}

.footer .footer-box .footer-box-left a:hover {
    color: red;
    transition: all 0.5s;
}

.footer .footer-box .footer-box-right {
    font-size: 14px;
    font-family: "PingFang SC", "zk";
    font-weight: bold;
    color: #00001e;
    opacity: 0.6;
    position: absolute;
    top: 30%;
    right: 5%;
}

.footer .footer-box .footer-footer {
    position: absolute;
    margin-top: 10px;
    bottom: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    font-family: "PingFang SC";
    color: #00001e;
    opacity: 0.6;
}

/* 侧边栏 */
.sideBar-right {
    width: 178px;
    background: rgba(255, 255, 255, 0.9);
    height: 420px;
    padding: 0 2px 10px;
    position: fixed;
    right: 0;
    top: 50%;
    /* transform: translate(x轴,y轴); */
    transform: translate(0, -50%);
    /* 堆叠顺序 */
    z-index: 1000;
    /* 添加过渡效果 */
    transition: all .5s;
    /* opacity: 0; */
    opacity: 0;
}

/* js变化样式 */
.sideBar-right.folding {
    transform: translate(100%, -50%);
    opacity: 1;
}

/* 箭头图标 */
.sideBar-right .arrow-icon-box {
    width: 30px;
    height: 52px;
    background: #333;
    position: absolute;
    left: -30px;
    top: 5px;
    /* border-radius: 左上 右上 右下 左下; */
    border-radius: 5px 0px 0px 5px;
    cursor: pointer;
}

.sideBar-right .arrow-icon-box .arrow-icon {
    background: url('/images/arrow2.webp');
    width: 12px;
    height: 18px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 17px;
    /* 添加过渡效果 */
    transition: all .8s;
}

.sideBar-right.folding .arrow-icon-box .arrow-icon {
    /* 变形旋转 */
    transform: rotate(-180deg);
}

.sideBar-right .content .content-top {
    text-align: center;
}

.sideBar-right .content .content-top .about {
    width: 100%;
    padding-top: 18px;
    padding-bottom: 27px;
    font-size: 18px;
    color: #121212;
}

.sideBar-right .content .content-top img {
    width: 147px;
    height: 147px;
}

.sideBar-right .content .content-top .scan-code {
    font-size: 16px;
    opacity: .8;
    padding-top: 10px;
    padding-bottom: 27px;
}

.sideBar-right .content .content-bottom .item {
    height: 44px;
    line-height: 44px;
    cursor: pointer;
    padding-left: 21px;
    padding-right: 21px;
}

.sideBar-right .content .content-bottom .item:hover {
    background: #333333;
    color: #ffd49f;
}

.sideBar-right .content .content-bottom .item .iconfont {
    float: left;
    font-size: 28px;
}

.sideBar-right .content .content-bottom .item .text {
    float: right;
    font-size: 16px;
}

.personalQuotes {
    width: fit-content;
    visibility: hidden;
    opacity: 0;
    transition: all .5s;
}

.personalQuotes .personalQuotesBox {
    width: fit-content;
    position: fixed;
    z-index: 40;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.personalQuotes .personalQuotesBox img {
    width: 700px;
    height: 300px;
}

.personalQuotes .personalQuotesBox .close {
    position: absolute;
    top: -25px;
    right: -50px;
    cursor: pointer;
}

.personalQuotes .personalQuotesBox .close img {
    width: 50px;
    height: 50px;
}

.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 30;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: all .5s;
}

.main .personal-tools {
    width: 100%;
    height: 100vh;
    color: white;
}

.main .personal-tools .personal-tools-box {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    background-attachment: fixed;
    position: relative;
}

.main .personal-tools .personal-tools-box .personal-tools-title {
    font-size: 30px;
    color: white;
    position: absolute;
    top: 5%;
    left: 10%;
}

.main .personal-tools .personal-tools-box .personal-tools-nav {
    position: absolute;
    width: 70%;
    height: 10%;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
}

.main .personal-tools .personal-tools-box .personal-tools-nav ul {
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
}

.main .personal-tools .personal-tools-box .personal-tools-nav ul li {
    height: 100%;
    width: fit-content;
    text-align: center;
    cursor: pointer;
    line-height: 100%;
    font-size: 1.2vw;
    transition: all .5s;
}

.main .personal-tools .personal-tools-box .personal-tools-nav ul li:hover {
    color: red;
}

.main .personal-tools .personal-tools-box .personal-tools-content {
    position: absolute;
    width: 70%;
    height: 65%;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.main .personal-tools .personal-tools-box .personal-tools-content .personal-tools-content-box {
    /* background-color: rgba(255, 255, 255, 0.95); */
    border-radius: 20px;
    width: 100%;
    height: 100%;
    position: relative;
    background: url("/images/article-bg.webp");
}

.main .personal-tools .personal-tools-box .personal-tools-content .personal-tools-content-box .display {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100px;
    width: 100px;
    transform: translate(-50%, -50%);
    color: white;
    display: none;
}

.main .personal-tools .personal-tools-box .personal-tools-content .personal-tools-content-box .display .typewriter {
    --blue: #5C86FF;
    --blue-dark: #275EFE;
    --key: #fff;
    --paper: #EEF0FD;
    --text: #D3D4EC;
    --tool: #FBC56C;
    --duration: 3s;
    position: relative;
    -webkit-animation: bounce05 var(--duration) linear infinite;
    animation: bounce05 var(--duration) linear infinite;
}

.main .personal-tools .personal-tools-box .personal-tools-content .personal-tools-content-box .display .typewriter .slide {
    width: 92px;
    height: 20px;
    border-radius: 3px;
    margin-left: 14px;
    transform: translateX(14px);
    background: linear-gradient(var(--blue), var(--blue-dark));
    -webkit-animation: slide05 var(--duration) ease infinite;
    animation: slide05 var(--duration) ease infinite;
}

.main .personal-tools .personal-tools-box .personal-tools-content .personal-tools-content-box .display .typewriter .slide:before,
.main .personal-tools .personal-tools-box .personal-tools-content .personal-tools-content-box .display .typewriter .slide:after,
.main .personal-tools .personal-tools-box .personal-tools-content .personal-tools-content-box .display .typewriter .slide i:before {
    content: "";
    position: absolute;
    background: var(--tool);
}

.main .personal-tools .personal-tools-box .personal-tools-content .personal-tools-content-box .display .typewriter .slide:before {
    width: 2px;
    height: 8px;
    top: 6px;
    left: 100%;
}

.main .personal-tools .personal-tools-box .personal-tools-content .personal-tools-content-box .display .typewriter .slide:after {
    left: 94px;
    top: 3px;
    height: 14px;
    width: 6px;
    border-radius: 3px;
}

.main .personal-tools .personal-tools-box .personal-tools-content .personal-tools-content-box .display .typewriter .slide i {
    display: block;
    position: absolute;
    right: 100%;
    width: 6px;
    height: 4px;
    top: 4px;
    background: var(--tool);
}

.main .personal-tools .personal-tools-box .personal-tools-content .personal-tools-content-box .display .typewriter .slide i:before {
    right: 100%;
    top: -2px;
    width: 4px;
    border-radius: 2px;
    height: 14px;
}

.main .personal-tools .personal-tools-box .personal-tools-content .personal-tools-content-box .display .typewriter .paper {
    position: absolute;
    left: 24px;
    top: -26px;
    width: 40px;
    height: 46px;
    border-radius: 5px;
    background: var(--paper);
    transform: translateY(46px);
    -webkit-animation: paper05 var(--duration) linear infinite;
    animation: paper05 var(--duration) linear infinite;
}

.main .personal-tools .personal-tools-box .personal-tools-content .personal-tools-content-box .display .typewriter .paper:before {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    top: 7px;
    border-radius: 2px;
    height: 4px;
    transform: scaleY(0.8);
    background: var(--text);
    box-shadow: 0 12px 0 var(--text), 0 24px 0 var(--text), 0 36px 0 var(--text);
}

.main .personal-tools .personal-tools-box .personal-tools-content .personal-tools-content-box .display .typewriter .keyboard {
    width: 120px;
    height: 56px;
    margin-top: -10px;
    z-index: 1;
    position: relative;
}

.main .personal-tools .personal-tools-box .personal-tools-content .personal-tools-content-box .display .typewriter .keyboard:before,
.main .personal-tools .personal-tools-box .personal-tools-content .personal-tools-content-box .display .typewriter .keyboard:after {
    content: "";
    position: absolute;
}

.main .personal-tools .personal-tools-box .personal-tools-content .personal-tools-content-box .display .typewriter .keyboard:before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--blue), var(--blue-dark));
    transform: perspective(10px) rotateX(2deg);
    transform-origin: 50% 100%;
}

.main .personal-tools .personal-tools-box .personal-tools-content .personal-tools-content-box .display .typewriter .keyboard:after {
    left: 2px;
    top: 25px;
    width: 11px;
    height: 4px;
    border-radius: 2px;
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
    -webkit-animation: keyboard05 var(--duration) linear infinite;
    animation: keyboard05 var(--duration) linear infinite;
}

@keyframes bounce05 {

    85%,
    92%,
    100% {
        transform: translateY(0);
    }

    89% {
        transform: translateY(-4px);
    }

    95% {
        transform: translateY(2px);
    }
}

@keyframes slide05 {
    5% {
        transform: translateX(14px);
    }

    15%,
    30% {
        transform: translateX(6px);
    }

    40%,
    55% {
        transform: translateX(0);
    }

    65%,
    70% {
        transform: translateX(-4px);
    }

    80%,
    89% {
        transform: translateX(-12px);
    }

    100% {
        transform: translateX(14px);
    }
}

@keyframes paper05 {
    5% {
        transform: translateY(46px);
    }

    20%,
    30% {
        transform: translateY(34px);
    }

    40%,
    55% {
        transform: translateY(22px);
    }

    65%,
    70% {
        transform: translateY(10px);
    }

    80%,
    85% {
        transform: translateY(0);
    }

    92%,
    100% {
        transform: translateY(46px);
    }
}

@keyframes keyboard05 {

    5%,
    12%,
    21%,
    30%,
    39%,
    48%,
    57%,
    66%,
    75%,
    84% {
        box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
    }

    9% {
        box-shadow: 15px 2px 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
    }

    18% {
        box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 2px 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
    }

    27% {
        box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 12px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
    }

    36% {
        box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 12px 0 var(--key), 60px 12px 0 var(--key), 68px 12px 0 var(--key), 83px 10px 0 var(--key);
    }

    45% {
        box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 2px 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
    }

    54% {
        box-shadow: 15px 0 0 var(--key), 30px 2px 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
    }

    63% {
        box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 12px 0 var(--key);
    }

    72% {
        box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 2px 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
    }

    81% {
        box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 12px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
    }
}

.main .personal-tools .personal-tools-box .personal-tools-content .personal-tools-content-box .display .info {
    color: white;
    text-align: center;
    font-size: 17px;
    margin: 0 auto;
    width: fit-content;
    margin-top: 10px;
}

.main .personal-tools .personal-tools-box .personal-tools-content .personal-tools-content-box .IpBox {
    display: none;
    width: 100%;
    height: 100%;
}

.main .personal-tools .personal-tools-box .personal-tools-content .personal-tools-content-box .IPaddressDisplay {
    color: black;
    width: fit-content;
    height: auto;
    background-color: rgba(254, 255, 239, 0.61);
    border-radius: 20px;
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.main .personal-tools .personal-tools-box .personal-tools-content .personal-tools-content-box .IPaddressDisplay .table {
    width: fit-content;
    text-align: center;
    font-size: 18px;
    border-collapse: collapse;
}

.main .personal-tools .personal-tools-box .personal-tools-content .personal-tools-content-box .IPaddressDisplay .table td,
th {
    border: none;
    /* 删除单元格边框 */
    border-bottom: 1px solid black;
    /* 仅保留底部边框 */
}

.main .personal-tools .personal-tools-box .personal-tools-content .personal-tools-content-box .IPaddressDisplay .table tr:last-child td {
    border-bottom: none;
    /* 删除最后一行的底部边框 */
}

.main .personal-tools .personal-tools-box .personal-tools-content .personal-tools-content-box .calculator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* background-color: #275EFE; */
    width: 70%;
    height: 70%;
    border-radius: 20px;
    display: none;
}

.main .personal-tools .personal-tools-box .personal-tools-content .personal-tools-content-box .calculator .calculator-box {
    width: 100%;
    height: 100%;
    position: relative;
}

.main .personal-tools .personal-tools-box .personal-tools-content .personal-tools-content-box .calculator .calculator-box .calculatorDisplay {
    width: 50%;
    height: 10%;
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    /* 高斯模糊 */
    /* filter: blur(5px); */
    border-radius: 20px;
    color: black;
}

.main .personal-tools .personal-tools-box .personal-tools-content .personal-tools-content-box .calculator .calculator-box .calculatorDisplay .calculatorDisplayValue {
    text-align: center;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main .personal-tools .personal-tools-box .personal-tools-content .personal-tools-content-box .calculator .calculator-box .calculatorUl {
    width: 50%;
    height: 60%;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    /* background-color: lightpink; */
}

.main .personal-tools .personal-tools-box .personal-tools-content .personal-tools-content-box .calculator .calculator-box .calculatorUl .calculatorUlBox {
    width: fit-content;
    height: 100%;
    margin: auto;
    margin-top: 2px;
}

.main .personal-tools .personal-tools-box .personal-tools-content .personal-tools-content-box .calculator .calculator-box .calculatorUl .calculatorli {
    width: calc(25% - 1vw);
    height: calc(22% - 0.5vw);
    line-height: calc(50px - 0.5vw);
    text-align: center;
    background-color: white;
    border: 1px solid #ccc;
    color: black;
    border-radius: calc(25% / 2);
    cursor: pointer;
    margin: 2px;
}

.main .personal-tools .personal-tools-box .personal-tools-content .personal-tools-content-box .calculator .calculator-box .calculatorUl .calculatorli20 {
    background-color: #5f85ff;
    color: white;
}

.main .personal-tools .personal-tools-box .personal-tools-content .personal-tools-content-box .calculator .calculator-box .calculatorUl .calculatorli:hover {
    background-color: black;
    color: white;
    outline: 2px solid white;
}

.main .personal-tools .personal-tools-box .personal-tools-content .personal-tools-content-box .calculator .calculator-box .calculatorUl .calculatorli20:hover {
    background-color: #5C86FF;
    color: white;
}

.main .personal-tools .personal-tools-box .personal-tools-content .personal-tools-content-box .networkSpeedDetection {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 70%;
    border-radius: 20px;
    /* background-color: lightblue; */
}

.main .personal-tools .personal-tools-box .personal-tools-content .personal-tools-content-box .networkSpeedDetection .networkSpeedDetectionBox {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main .personal-tools .personal-tools-box .personal-tools-content .personal-tools-content-box .networkSpeedDetection .networkSpeedDetectionBox .networkSpeedDetectionBoxInfo {
    width: fit-content;
    padding: 20px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 30px;
    color: black;
    background-color: lightblue;
}

.main .personalPhotos {
    width: 100vw;
    height: 100vh;
    background: url('../images/article-bg-day.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;

    /* 滚动槽 */
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    ::-webkit-scrollbar-track {
        border-radius: 3px;
        background: rgba(0, 0, 0, 0.06);
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.08);
    }

    /* 滚动条滑块 */
    ::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background: rgba(0, 0, 0, 0.12);
        -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
    }
}

.main .personalPhotos .personalPhotosBox {
    width: 100%;
    height: 100%;
    position: relative;
}

.main .personalPhotos .personalPhotosBox .photosTitle {
    width: fit-content;
    height: auto;
    color: white;
    position: absolute;
    top: 5%;
    left: 10%;
    font-size: 30px;
}

.main .personalPhotos .personalPhotosBox .photosMain {
    width: 70%;
    height: 70%;
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(6px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 30px;
}

/* display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px; */
/* scroll是溢出隐藏后提供滚动条 */
/* .main .personalPhotos .personalPhotosBox .photosMain .photosMainBox {
    width: fit-content;
    max-width: 100%;
    height: 100%;
    column-count: 4;
    column-gap: 10px;
    counter-reset: count;
    width: 960px;
    margin: 0 auto;
    overflow: scroll;
} */
.main .personalPhotos .personalPhotosBox .photosMain .photosMainBox {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: masonry;
    grid-gap: 10px;
    width: 960px;
    margin: 0 auto;
    overflow-y: scroll;
}

.main .personalPhotos .personalPhotosBox .photosMain .photosMainBox img {
    width: 100%;
    display: block;
    border-radius: 20px;
}

/* 代码瀑布流 */
/* start */
.main .codeWaterFill {
    width: 100dvw;
    height: 130dvh;
    min-height: 800px;
    position: relative;
}

.main .codeWaterFill .codeWaterFillBox {
    width: 100%;
    height: 100%;
}

.main .codeWaterFill .codeWaterFillBox canvas {
    width: 100%;
    height: 100%;
}

.main .codeWaterFill .title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-65%, -50%);
    color: black;
    width: fit-content;
    height: auto;
    /* 保留空格和换行符 */
    white-space: pre;
    font-family: Courier New, monospace;
    /* 使用等宽字体以保持字符的相对宽度 */
    font-size: 50px;
    transition: all 0.5s;
    /* 调整字体大小以适应字符画 */
    line-height: 1.2;
    /* 调整行高以适应字符画 */
}

/* end */