@media screen and (width > 1000px) {

    /* 窗口宽度大于955pxd才激活 */
    :root {
        --background: lab(92 -20.65 -13.35);
        --Acolor: lab(4.31% 0 0);
        --AcolorHover: lab(30.16% 0 0);
        --ABcolorHover: lab(92.04% -17.48 -12.32);
        --BodyText: lab(0% 0 0);
        --FootColor: lab(97.69% -10.95 -2.63);
        --spacing: .25rem;
        --spacingspan: .2rem;
        --text-xl: 1.25rem;
        --font-weight-bold: 700;

        body {
            margin: 0;
            color: var(--BodyText);
            overflow: hidden;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        li a {
            color: var(--Acolor);
            text-decoration: none;
            padding: 10px 15px 10px 15px;
        }

        li a:hover {
            color: var(--AcolorHover);
            background-color: color-mix(in oklab, var(--ABcolorHover)60%, transparent);
            padding: 10px 15px 10px 15px;
        }

        .GameShowC a {
            padding: 0;
            align-items: center;
        }

        .GameShowC a:hover {
            color: var(--AcolorHover);
            background-color: color-mix(in oklab, var(--ABcolorHover)60%, transparent);
        }

        .PostMenu {
            background-color: color-mix(in oklab, var(--background)60%, transparent);
            width: 100%;
            position: fixed;
            top: 0px;
            right: 0px;
        }

        .PageMenu {
            padding-right: 10%;
            max-width: 1260px;
            min-width: 755px;
            margin: 0 auto;
            overflow: hidden;
            padding: 0px 10% 0px 10%;
            justify-content: space-between;
        }

        footer {
            background-color: color-mix(in oklab, var(--ABcolorHover)60%, transparent);
        }

        .container {
            display: -webkit-flex;
            /* Safari */
            -webkit-align-items: center;
            /* Safari 7.0+ */
            display: flex;
            align-items: center;
            height: 100%;
        }

        .content-center {
            overflow: hidden;
            max-width: 1000px;
            min-width: 700px;
            margin: 0 auto;
        }

        .content-text {
            float: left;
            display: -webkit-flex;
            /* Safari */
            -webkit-align-items: center;
            /* Safari 7.0+ */
            display: flex;
            align-items: center;
            height: 100%;
            width: 50%;
        }

        .content-img {
            float: right;
            display: -webkit-flex;
            /* Safari */
            -webkit-align-items: center;
            /* Safari 7.0+ */
            display: flex;
            align-items: center;
            height: 100%;
            width: 50%;
        }

        .content-img>div {
            width: 50%;
            margin: auto;
        }

        .RrollI {
            transform: translate3d(0px, 0px, 0px);
            transition-duration: 0ms;
            position: fixed;
            top: 0px;
            right: 0px;
            width: 100%;
            z-index: -1;
        }

        .FloatR {
            display: flex;
            justify-content: flex-end;
        }


        #content {
            height: 100%;
        }

        .RoiFoot {
            padding: calc(var(--spacing) * 16);
            align-items: flex-end;
            flex-direction: row;
            justify-content: space-between;
            display: flex;
            margin: 0 auto;
            max-width: 1260px;
        }

        .RoiFoot p {
            margin: 0;
            text-align: left;
            flex-wrap: wrap;
            flex-direction: column;
            align-items: stretch;
            gap: calc(var(--spacing) * 2);
        }

        .RoiFoot a {
            display: inline-flex;
            /*align-self: flex-end;*/
        }

        .RoiFoot br {
            align-self: flex-end;
        }

        .FootA {
            font-size: var(--text-xl);
            font-weight: var(--font-weight-bold);
        }

        .RoiFoot1 {
            align-items: flex-end;
            gap: calc(var(--spacing) * 2);
            flex-direction: column;
            display: flex;
        }

        .RoiFoot1>div {
            flex-direction: column;
            display: flex;
            gap: calc(var(--spacing) * 2);
        }

        .RoiFoot2 {
            /*align-items: flex-end;*/
            gap: calc(var(--spacing) * 2);
            display: flex;
            flex-direction: column;
        }

        .DisFGAP {
            gap: calc(var(--spacing) * 2);
            display: flex;
        }

        .DisFSpan {
            gap: calc(var(--spacingspan));
        }

        .DisF {
            display: flex;
        }

        .footer-li {
            justify-content: space-between;
            flex-direction: row;
        }

        .JustCon {
            justify-content: flex-end;
        }

        .JustConCenter {
            justify-content: center;
        }

        .TRF {
            transition-duration: 100ms
        }

        .DisFFG {
            flex-grow: 1;
        }

        .OpacityRoi {
            opacity: 0;
            flex-direction: column;
            flex-wrap: wrap;
        }

        .OpacityRoi:is(:where(.RoiFoot):hover *) {
            opacity: 1;
        }
    }
}

@media screen and (850px < width <=1000px) {
    :root {
        --background: lab(92 -20.65 -13.35);
        --Acolor: lab(4.31% 0 0);
        --AcolorHover: lab(30.16% 0 0);
        --ABcolorHover: lab(92.04% -17.48 -12.32);
        --BodyText: lab(0% 0 0);
        --FootColor: lab(97.69% -10.95 -2.63);
        --spacing: .25rem;
        --spacingspan: .2rem;
        --text-xl: 1.25rem;
        --font-weight-bold: 700;

        body {
            margin: 0;
            color: var(--BodyText);
            overflow: hidden;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        li a {
            color: var(--Acolor);
            text-decoration: none;
            padding: 10px 15px 10px 15px;
        }

        li a:hover {
            color: var(--AcolorHover);
            background-color: color-mix(in oklab, var(--ABcolorHover)60%, transparent);
            padding: 10px 15px 10px 15px;
        }

        .GameShowC a {
            padding: 0;
            align-items: center;
        }

        .GameShowC a:hover {
            color: var(--AcolorHover);
            background-color: color-mix(in oklab, var(--ABcolorHover)60%, transparent);
        }

        .PostMenu {
            background-color: color-mix(in oklab, var(--background)60%, transparent);
            width: 100%;
            position: fixed;
            top: 0px;
            right: 0px;
        }

        .PageMenu {
            padding-right: 10%;
            margin: 0 auto;
            overflow: hidden;
            padding: 0px 10% 0px 10%;
            justify-content: space-between;
        }

        footer {
            background-color: color-mix(in oklab, var(--ABcolorHover)60%, transparent);
        }

        .container {
            display: -webkit-flex;
            /* Safari */
            -webkit-align-items: center;
            /* Safari 7.0+ */
            display: flex;
            align-items: center;
            height: 100%;
        }

        .content-center {
            min-width: 480px;
            margin: 0 auto;
            flex-direction: column;
            display: flex;
            align-items: center;
        }

        .content-text {
            float: left;
            display: -webkit-flex;
            /* Safari */
            -webkit-align-items: center;
            /* Safari 7.0+ */
            display: flex;
            align-items: center;
            height: 100%;
        }

        .content-img {
            float: right;
            display: -webkit-flex;
            /* Safari */
            -webkit-align-items: center;
            /* Safari 7.0+ */
            display: flex;
            align-items: center;
            height: 100%;
            width: 50%;
        }

        .content-img>div {
            width: 50%;
            margin: auto;
        }

        .RrollI {
            transform: translate3d(0px, 0px, 0px);
            transition-duration: 0ms;
            position: fixed;
            top: 0px;
            right: 0px;
            width: 100%;
            z-index: -1;
        }

        .FloatR {
            display: flex;
            justify-content: flex-end;
        }


        #content {
            height: 100%;
        }

        .RoiFoot {
            padding: calc(var(--spacing) * 16);
            align-items: flex-end;
            flex-direction: row;
            justify-content: space-between;
            display: flex;
            margin: 0 auto;
            max-width: 1260px;
        }

        .RoiFoot p {
            margin: 0;
            text-align: left;
            flex-wrap: wrap;
            flex-direction: column;
            align-items: stretch;
            gap: calc(var(--spacing) * 2);
        }

        .RoiFoot a {
            display: inline-flex;
            /*align-self: flex-end;*/
        }

        .RoiFoot br {
            align-self: flex-end;
        }

        .FootA {
            font-size: var(--text-xl);
            font-weight: var(--font-weight-bold);
        }

        .RoiFoot1 {
            align-items: flex-end;
            gap: calc(var(--spacing) * 2);
            flex-direction: column;
            display: flex;
        }

        .RoiFoot1>div {
            flex-direction: column;
            display: flex;
            gap: calc(var(--spacing) * 2);
        }

        .RoiFoot2 {
            /*align-items: flex-end;*/
            gap: calc(var(--spacing) * 2);
            display: flex;
            flex-direction: column;
        }

        .DisFGAP {
            gap: calc(var(--spacing) * 2);
            display: flex;
        }

        .DisFSpan {
            gap: calc(var(--spacingspan));
        }

        .DisF {
            display: flex;
        }

        .footer-li {
            justify-content: space-between;
            flex-direction: row;
        }

        .JustCon {
            justify-content: flex-end;
        }

        .JustConCenter {
            justify-content: center;
        }

        .TRF {
            transition-duration: 100ms
        }

        .DisFFG {
            flex-grow: 1;
        }

        .OpacityRoi {
            opacity: 0;
            flex-direction: column;
            flex-wrap: wrap;
        }

        .OpacityRoi:is(:where(.RoiFoot):hover *) {
            opacity: 1;
        }
    }
}

@media screen and (width <=850px) {
    :root {
        --background: lab(92 -20.65 -13.35);
        --Acolor: lab(4.31% 0 0);
        --AcolorHover: lab(30.16% 0 0);
        --ABcolorHover: lab(97.19% -17.67 35.03);
        --BodyText: lab(0% 0 0);
        --FootColor: lab(97.69% -10.95 -2.63);
        --spacing: .1rem;
        --spacingspan: .2rem;
        --text-xl: 1.25rem;
        --font-weight-bold: 700;

        body {
            margin: 0;
            color: var(--BodyText);
            overflow: hidden;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        li a {
            color: var(--Acolor);
            text-decoration: none;
            padding: 10px 15px 10px 15px;
        }

        li a:hover {
            color: var(--AcolorHover);
            background-color: color-mix(in oklab, var(--ABcolorHover)60%, transparent);
            padding: 10px 15px 10px 15px;
        }

        .PageMenu>div {
            visibility: hidden;
            position: absolute;
            z-index: -2;
        }

        .GameShowC a {
            padding: 0;
            align-items: center;
        }

        .GameShowC a:hover {
            color: var(--AcolorHover);
            background-color: color-mix(in oklab, var(--ABcolorHover)60%, transparent);
        }

        .PostMenu {
            background-color: color-mix(in oklab, var(--background)60%, transparent);
            width: 100%;
            position: fixed;
            top: 0px;
            right: 0px;
        }

        .PageMenu>div {
            justify-content: space-between;
        }

        .PageMenu {
            padding-right: 10%;
            margin: 0 auto;
            padding: 0px 10% 0px 10%;
            justify-content: space-between;
            align-items: center;
        }

        footer {
            background-color: color-mix(in oklab, var(--ABcolorHover)60%, transparent);
        }

        .container {
            display: -webkit-flex;
            /* Safari */
            -webkit-align-items: center;
            /* Safari 7.0+ */
            display: flex;
            align-items: center;
            height: 100%;
        }

        .content-center {
            min-width: 480px;
            margin: 0 auto;
            flex-direction: column;
            display: flex;
            align-items: center;
        }

        .content-text {
            display: -webkit-flex;
            /* Safari */
            -webkit-align-items: center;
            /* Safari 7.0+ */
            display: flex;
            align-items: center;
            height: 100%;
        }

        .content-img {
            display: -webkit-flex;
            /* Safari */
            -webkit-align-items: center;
            /* Safari 7.0+ */
            display: flex;
            align-items: center;
            height: 100%;
            width: 50%;
        }

        .content-img>div {
            width: 50%;
            margin: auto;
        }

        .RrollI {
            transform: translate3d(0px, 0px, 0px);
            transition-duration: 0ms;
            position: fixed;
            top: 0px;
            right: 0px;
            width: 100%;
            z-index: -1;
        }

        .FloatR {
            display: flex;
            justify-content: flex-end;
        }


        #content {
            height: 100%;
        }

        .RoiFoot {
            padding: calc(var(--spacing) * 16);
            justify-content: center;
            align-items: center;
            display: flex;
            margin: 0 auto;
            max-width: 1260px;
            flex-direction: column;
        }

        .RoiFoot p {
            margin: 0;
            text-align: left;
            flex-wrap: wrap;
            flex-direction: column;
            align-items: stretch;
            gap: calc(var(--spacing) * 2);
        }

        .RoiFoot a {
            align-items: center;
            text-align: center;
            display: inline-flex;
            /*align-self: flex-end;*/
        }

        .RoiFoot br {
            align-self: flex-end;
        }

        .FootA {
            font-size: var(--text-xl);
            font-weight: var(--font-weight-bold);
        }

        .RoiFoot1 {
            align-items: center;
            align-items: flex-end;
            gap: calc(var(--spacing) * 2);
            flex-direction: column;
            display: flex;
        }

        .RoiFoot1>div {
            align-items: center;
            flex-direction: column;
            display: flex;
            gap: calc(var(--spacing) * 2);
        }

        .RoiFoot2 {
            /*align-items: flex-end;*/
            gap: calc(var(--spacing) * 2);
            display: flex;
            flex-direction: column;
        }

        .DisFGAP {
            gap: calc(var(--spacing) * 2);
            display: flex;
            flex-direction: column;
        }

        .IShow {
            display: none;
        }

        .DisFSpan {
            gap: calc(var(--spacingspan));
        }

        .DisF {
            display: flex;
        }

        .footer-li {
            justify-content: center;
            align-items: center;
        }

        .JustCon {
            justify-content: flex-end;
        }

        .JustConCenter {
            justify-content: center;
        }

        .TRF {
            transition-duration: 100ms
        }

        .DisFFG {
            flex-grow: 1;
        }

        .OpacityRoi {
            opacity: 0;
            flex-direction: column;
            flex-wrap: wrap;
        }

        .OpacityRoi:is(:where(.RoiFoot):hover *) {
            opacity: 1;
        }
    }
}