@font-face {
    font-family: Tensentype-JiaLiXianYuanJF;
    src: url('/font/TensentypeJiaLiXianYuanJF.ttf') format('truetype');
}

@font-face {
    font-family: HYQuanTangShiJ;
    src: url('/font/HYQuanTangShiJ.ttf') format('truetype');
}

#Layer1 {
    position: absolute;
    width: 100%;
    z-index: 2;
    top: 60%;
}

.STYLE3 {
    font-size: xx-large;
}

.footer {
    text-align: center;
    margin-top: 100px;
    position: fixed;
    bottom: 2%;
    left: 0;
    width: 100%;
}

:root {
    --font-1: "Tensentype-JiaLiXianYuanJF", sans-serif;

    --font-2: "HYQuanTangShiJ", serif;

    /* monospace
    */
    --font-mono: Consolas, "Andale Mono", Courier, "Courier New", monospace;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.container,
.content {
    height: 100%;
    transition: all 0.5s ease;
}

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.clearfix:before,
.clearfix:after {
    content: '';
    display: table;
}

.clearfix:after {
    clear: both;
}

body {
    background: #fff;
    color: #FFFFFF;
    font-weight: 400;
    font-size: 1em;
    line-height: 1.25;
    font-family: var(--font-1), sans-serif;
    cursor: none !important;
    transition: transform 1s ease-in-out;
}

a,
button {
    outline: none;
}

a {
    color: #ffffff;
    text-decoration: none;
}

a:hover,
a:focus {
    color: #ffffff;
}

section {
    padding: 1em;
    text-align: center;
}

p.ref {
    text-align: center;
    padding: 2em 1em;
}

/* Header */
.codrops-header {
    margin: 0 auto;
    padding: 2em;
    text-align: center;
    max-width: 900px;
}

.codrops-header h1 {
    margin: 0;
    font-size: 4.5em;
    line-height: 1;
    font-weight: 200;
}

.codrops-header h1 span {
    display: block;
    padding: 1em 0 1.5em;
    font-size: 36%;
    color: #95a5a6;
    line-height: 1.4;
}

/* To Navigation Style */
.codrops-top {
    width: 100%;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.69em;
    text-align: center;
    padding: 3em 0;
}

.codrops-top a {
    display: inline-block;
    padding: 1.5em;
    text-decoration: none;
    letter-spacing: 1px;
}

.codrops-icon:before {
    margin: 0 4px;
    text-transform: none;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    font-family: var(--font-1), sans-serif;
    line-height: 1;
    speak: none;
    -webkit-font-smoothing: antialiased;
}

.codrops-icon-drop:before {
    content: "\e001";
}

.codrops-icon-prev:before {
    content: "\e004";
}

/* Demo Buttons Style */
.codrops-demos {
    padding-top: 1em;
    font-size: var(--text-sm);
    text-align: center;
}

.codrops-demos a {
    display: inline-block;
    margin: 1.2em 0.1em;
    padding: 0.5em 1.2em;
    outline: none;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    border-radius: 2px;
    font-size: var(--text-xl);
    border: 2px solid transparent;
    transition: border-color 0.3s ease-in-out;
    transition: all 0.2s ease;
}

@media screen and (max-width: 600px) {
    .codrops-demos {
        transition: all 0.2s ease;
        font-size: var(--text-xl)*0.8;
    }
}


.codrops-demos a:hover,
.codrops-demos a.current-demo {
    border-color: #383a3c;
}

.codrops-demos h3 {
    margin: 0;
    padding: 1em 0 0.5em 0;
    font-size: 0.9em;
    float: left;
    min-width: 90px;
    clear: left;
}

.codrops-demos div:not(:first-child) h3 {
    padding-top: 2em;
}

.codrops-demos a:hover,
.codrops-demos a.current-demo {
    color: inherit;
    border-color: initial;
}

/* Related demos */
.related {
    padding: 10em 0;
}

.related p {
    font-size: 1.5em;
}

.related>a {
    display: inline-block;
    text-align: center;
    margin: 20px 10px;
    padding: 25px;
    vertical-align: middle;
}

.related a img {
    max-width: 100%;
    opacity: 0.8;
    border-radius: 10px;
}

.related a:hover img,
.related a:active img {
    opacity: 1;
}

.related a h3 {
    margin: 0;
    min-height: 63px;
    padding: 0.5em 0 0.3em;
    max-width: 300px;
    text-align: center;
    font-weight: 400;
    font-size: 1em;
}

@media screen and (max-width: 40em) {

    .codrops-header h1 {
        font-size: 2.5em;
        transition: all 0.2s ease;
    }
}


/* =================================================================== 
 * TOC:
 * # SETTINGS
 *      ## fonts
 *      ## colors
 *      ## spacing and typescale
 *      ## grid variables
 * # NORMALIZE
 * # BASE SETUP
 * # GRID 
 *      ## large screen devices 
 *      ## medium screen devices 
 *      ## tablet devices 
 *      ## mobile devices 
 *      ## small screen devices 
 *      ## additional column stackpoints 
 * # UTILITY CLASSES
 * # TYPOGRAPHY 
 *      ## base type styles
 *      ## additional typography & helper classes
 *      ## lists
 *      ## spacing
 * # PRELOADER
 * # FORM
 *      ## style placeholder text
 *      ## change autocomplete styles in Chrome
 * # BUTTONS
 * # TABLE
 * # COMPONENTS
 *      ## pagination
 *      ## alert box 
 *      ## skillbars 
 *      ## stats tabs
 * # PROJECT-WIDE SHARED STYLES
 *      ## theme-specific typography classes
 *      ## media classes
 *      ## swiper overrides
 * # PAGE WRAP
 * # SITE HEADER
 *      ## branding
 *      ## main navigation
 *      ## header social
 *      ## mobile menu toggle
 * # INTRO
 *      ## intro text
 *      ## intro bg
 * # ABOUT
 *      ## about timelines
 *      ## about skills
 *      ## about clients
 * # WORKS
 *      ## portfolio list
 *      ## testimonial slider
 * # FOOTER
 *      ## copyright
 *      ## go top
 *
 *
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------- 
 * ## colors
 * ------------------------------------------------------------------- */
:root {

    /* color-1(#5F9295)
     * color-2(#2D2327)
     */
    --color-1: rgb(124, 95, 149);
    --color-2: hsla(336, 13%, 16%, 1);

    /* theme color variations
     */
    --color-1-lighter: rgb(171, 155, 191);
    --color-1-light: rgb(154, 124, 171);
    --color-1-dark: rgb(87, 76, 118);
    --color-1-darker: hsla(183, 22%, 28%, 1);

    --color-2-lighter: hsla(336, 13%, 36%, 1);
    --color-2-light: hsla(336, 13%, 26%, 1);
    --color-2-dark: hsla(336, 13%, 10%, 1);
    --color-2-darker: hsla(336, 13%, 5%, 1);

    /* feedback colors
     * color-error(#ffd1d2), color-success(#c8e675), 
     * color-info(#d7ecfb), color-notice(#fff099)
     */
    --color-error: hsla(359, 100%, 91%, 1);
    --color-success: hsla(76, 69%, 68%, 1);
    --color-info: hsla(205, 82%, 91%, 1);
    --color-notice: hsla(51, 100%, 80%, 1);
    --color-error-content: hsla(359, 50%, 50%, 1);
    --color-success-content: hsla(76, 29%, 28%, 1);
    --color-info-content: hsla(205, 32%, 31%, 1);
    --color-notice-content: hsla(51, 30%, 30%, 1);

    /* shades 
     * generated using 
     * Tint & Shade Generator 
     * (https://maketintsandshades.com/)
     */
    --color-black: #000000;
    --color-gray-19: #0d0f0f;
    --color-gray-18: #1b1e1e;
    --color-gray-17: #282d2e;
    --color-gray-16: #363c3d;
    --color-gray-15: #444b4c;
    --color-gray-14: #515a5b;
    --color-gray-13: #5f696a;
    --color-gray-12: #6c787a;
    --color-gray-11: #7a8789;
    --color-gray-10: #879698;
    --color-gray-9: #93a1a2;
    --color-gray-8: #9fabad;
    --color-gray-7: #abb6b7;
    --color-gray-6: #b7c0c1;
    --color-gray-5: #c3cbcc;
    --color-gray-4: #cfd5d6;
    --color-gray-3: #dbe0e0;
    --color-gray-2: #e7eaea;
    --color-gray-1: #f3f5f5;
    --color-white: #ffffff;

    /* text
     */
    --color-text: var(--color-gray-17);
    --color-text-dark: var(--color-gray-19);
    --color-text-light: var(--color-gray-12);
    --color-placeholder: var(--color-gray-12);

    /* buttons
     */
    --color-btn: var(--color-gray-4);
    --color-btn-text: var(--color-text);
    --color-btn-hover: var(--color-gray-5);
    --color-btn-hover-text: var(--color-text);
    --color-btn-primary: var(--color-1-dark);
    --color-btn-primary-text: var(--color-white);
    --color-btn-primary-hover: var(--color-text-dark);
    --color-btn-primary-hover-text: var(--color-white);
    --color-btn-stroke: var(--color-1-dark);
    --color-btn-stroke-text: var(--color-1-darker);
    --color-btn-stroke-hover: var(--color-text-dark);
    --color-btn-stroke-hover-text: var(--color-white);

    /* preloader
     */
    --color-preloader-bg: #3a334c;
    --color-loader: var(--color-text-dark);
    --color-loader-light: var(--color-1-lighter);

    /* others
     */
    --color-body: #685c88;
    --color-border: rgba(0, 0, 0, .08);
    --border-radius: 3px;
}

/* ------------------------------------------------------------------- 
 * ## spacing and typescale
 * ------------------------------------------------------------------- */
:root {

    /* spacing
     * base font size: 19px 
     * vertical space unit : 32px
     */
    --base-size: 62.5%;
    --multiplier: 1;
    --base-font-size: calc(1.9rem * var(--multiplier));
    --space: calc(3.2rem * var(--multiplier));

    /* vertical spacing 
     */
    --vspace-0_125: calc(0.125 * var(--space));
    --vspace-0_25: calc(0.25 * var(--space));
    --vspace-0_375: calc(0.375 * var(--space));
    --vspace-0_5: calc(0.5 * var(--space));
    --vspace-0_625: calc(0.625 * var(--space));
    --vspace-0_75: calc(0.75 * var(--space));
    --vspace-0_875: calc(0.875 * var(--space));
    --vspace-1: calc(var(--space));
    --vspace-1_25: calc(1.25 * var(--space));
    --vspace-1_5: calc(1.5 * var(--space));
    --vspace-1_75: calc(1.75 * var(--space));
    --vspace-2: calc(2 * var(--space));
    --vspace-2_5: calc(2.5 * var(--space));
    --vspace-3: calc(3 * var(--space));
    --vspace-3_5: calc(3.5 * var(--space));
    --vspace-4: calc(4 * var(--space));
    --vspace-4_5: calc(4.5 * var(--space));
    --vspace-5: calc(5 * var(--space));

    /* type scale
     * ratio 1:2 | base: 19px
     * -------------------------------------------------------
     *
     * --text-display-3 = (81.70px)
     * --text-display-2 = (68.08px)
     * --text-display-1 = (56.73px)
     * --text-xxxl      = (47.28px)
     * --text-xxl       = (39.40px)
     * --text-xl        = (32.83px)
     * --text-lg        = (27.36px)
     * --text-md        = (22.80px)
     * --text-size      = (19.00px) BASE
     * --text-sm        = (15.83px)
     * --text-xs        = (13.19px)
     *
     * ---------------------------------------------------------
     */
    --text-scale-ratio: 1.2;
    --text-size: var(--base-font-size);
    --text-xs: calc((var(--text-size) / var(--text-scale-ratio)) / var(--text-scale-ratio));
    --text-sm: calc(var(--text-xs) * var(--text-scale-ratio));
    --text-md: calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio));
    --text-lg: calc(var(--text-md) * var(--text-scale-ratio));
    --text-xl: calc(var(--text-lg) * var(--text-scale-ratio));
    --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio));
    --text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio));
    --text-display-1: calc(var(--text-xxxl) * var(--text-scale-ratio));
    --text-display-2: calc(var(--text-display-1) * var(--text-scale-ratio));
    --text-display-3: calc(var(--text-display-2) * var(--text-scale-ratio));

    /* default button height
     */
    --vspace-btn: var(--vspace-2);
}



/* ===================================================================
 * # PRELOADER
 * 
 * 
 * -------------------------------------------------------------------
 * - markup:
 *
 * <div id="preloader">
 *     <div class="loader line"></div>
 * </div>
 *
 *
 * ------------------------------------------------------------------- */
#preloader {
    position: fixed;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: var(--color-preloader-bg);
    z-index: 500;
    height: 100vh;
    width: 100%;
    opacity: 1;
    overflow: hidden;
    transition: opacity 1s ease-out;
}

.no-js #preloader {
    display: none;
}

#loader {
    background-color: var(--color-loader-light);
}

@-webkit-keyframes line {
    from {
        background-position: -60px 0;
    }

    to {
        background-position: 60px 0;
    }
}

@keyframes line {
    from {
        background-position: -60px 0;
    }

    to {
        background-position: 60px 0;
    }
}

.line:before {
    margin-bottom: 10px;
    -webkit-animation: line .75s infinite alternate ease-in-out;
    animation: line .75s infinite alternate ease-in-out;
    background: -webkit-gradient(linear, left top, right top, from(var(--color-loader-light)), to(var(--color-loader-light)));
    background: linear-gradient(90deg, var(--color-loader-light), var(--color-loader-light));
    background-repeat: no-repeat;
    background-size: 80px 4px;
    content: '';
    display: block;
    height: 4px;
    width: 80px;
}



.text-preloader {
    font-family: var(--font-1), sans-serif;
    font-size: var(--text-md);
    font-weight: 300;
    line-height: var(--vspace-1);
    color: var(--color-1-lighter);
    margin-top: 0;
    margin-bottom: var(--vspace-0_25);
    margin-left: .1em;
    position: relative;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.tips-preloader {
    font-family: var(--font-1), sans-serif;
    font-size: var(--text-md);
    font-weight: 300;
    line-height: var(--vspace-1);
    color: var(--color-1-lighter);
    text-align: right;
    margin-top: 0;
    margin-bottom: var(--vspace-0_25);
    margin-left: .1em;
    position: fixed;
    bottom: 1vh;
    right: 1vw;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}


#background-image {
    position: fixed;
    /* 使图片固定在视口中 */
    top: 0;
    left: 0;
    width: 100%;
    /* 使图片宽度等于视口宽度 */
    height: 100%;
    /* 使图片高度等于视口高度 */
    z-index: -1;
    /* 使图片位于其他元素的后方 */
    object-fit: cover;
    /* 使图片保持原始比例并覆盖整个元素 */
}

/* Header */
.large-header {
    font-size: var(--text-md);
    position: absolute;
    width: 100%;
    background: transparent;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    z-index: 1;
}


.demo-3 .large-header {
    background: #7f8c8d;
}

.demo-4 .large-header {
    background: #f9f1e9;
}

.main-title {
    font-family: var(--font-1), sans-serif;
    font-size: xx-small;
    position: absolute;
    margin: 0;
    padding: 0;
    color: #ffffff;
    text-align: center;
    top: 37%;
    width: 100%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    opacity: 0;
}

.sub-main-title {
    font-family: var(--font-1), sans-serif;
    position: absolute;
    padding: 0;
    color: #ffffff;
    text-align: center;
    top: 40%;
    width: 100%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    opacity: 0;
}

.demo-1 .main-title,
.demo-3 .main-title {
    font-size: 4em;
    letter-spacing: 0.1em;
    transition: font-size 0.2s ease;
}

.demo-2 .main-title {
    font-family: var(--font-1), sans-serif;
    font-weight: normal;
    font-size: 8em;
    padding-left: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    transition: font-size 0.2s ease;
}

.demo-2 .main-title::before {
    content: '';
    width: 20vw;
    height: 20vw;
    min-width: 3.5em;
    min-height: 3.5em;
    background: url("../img/deco.svg"
            /*tpa=http://www.52xl.club/img/deco.svg*/
        ) no-repeat center center;
    background-size: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    z-index: -1;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    transition: font-size 0.2s ease;
}

.demo-3 .main-title {
    padding: 10px 40px;
    border: 10px double #f9f1e9;
    text-transform: uppercase;
    font-family: var(--font-1), sans-serif;
    transition: font-size 0.2s ease;
}

.demo-4 .main-title {
    font-size: 6em;
    font-weight: 300;
    padding: 10px 30px;
    color: #222;
    transition: all 0.2s ease;
}

.main-title .thin {
    font-weight: 200;
}

@media only screen and (max-width : 768px) {

    .demo-1 .main-title,
    .demo-3 .main-title,
    .demo-4 .main-title {
        font-size: 3em;
        transition: all 0.2s ease;
    }

    .demo-2 .main-title {
        font-size: 4em;
        transition: all 0.2s ease;
    }

    .STYLE3 {
        font-size: x-large;
    }
}


#demo-canvas {
    background-color: transparent;
}


@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


@keyframes blink {

    0%,
    100% {
        opacity: 0.9;
    }

    50% {
        opacity: 0.4;
    }
}

#large-header,
#Layer1 {
    transition: all 0.5s ease;
}

.about-text-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid #ffffff;
    /* 添加这一行 */
    border-radius: 10px;
    background-color: transparent;
    padding: 20px;
    min-width: 60vw;
    min-height: 60vh;
    max-width: 80vw;
    max-height: 80vh;
    animation: slideInUp 0.8s cubic-bezier(.65, 0, .38, 1.48);
}

.about-text {
    position: inherit;
    font-family: var(--font-1), sans-serif;
    text-align: left;
    min-width: 80%;
    min-height: 80%;
}

.back-button {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    background: url(/assets/back.svg) no-repeat center center;
    background-size: contain;
}


#close-about {
    transform: rotate(0deg);
    transition: transform 0.3s ease-in-out;
}

#close-about:hover {
    transform: rotate(90deg);
    transition: transform 0.3s ease-in-out;
}

@keyframes slideInUp {
    0% {
        transform: translate(-50%, 0%);
        opacity: 0;
    }

    100% {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

.main-logo {
    position: absolute;
    margin: 0;
    padding: 0;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.2s ease-in, top 0.2s;
}

@media only screen and (max-height : 800px) {
    .main-logo {
        top: 10%;
    }
}

@media only screen and (max-height : 720px) {
    .main-logo {
        top: 5%;
    }
}

.svg-logo {
    height: 300px;
    transition: height 0.2s ease;
}

@media only screen and (max-width : 600px) {
    .svg-logo {
        height: 220px;
    }
}

.preloader-logo {
    position: absolute;
    margin: 0;
    padding: 0;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.2s ease-in;
}

@keyframes logo_blink {
    0%, 100% {
      opacity: 0;
    }

    0% {
      opacity: 0;
    }
    2% {
      opacity: 0.5;
    }
    4% {
      opacity: 0;
    }

    20% {
        opacity: 0;
      }
    21% {
      opacity: 0.3;
    }
    22% {
      opacity: 0;
    }

    26% {
        opacity: 0;
      }
    27% {
      opacity: 0.4;
    }
    28% {
      opacity: 0;
    }

    45% {
        opacity: 0;
      }
    46% {
      opacity: 0.5;
    }
    47% {
      opacity: 0;
    }

    50% {
        opacity: 0;
      }
    51% {
      opacity: 1;
    }
    80% {
        opacity: 1;
      }
  }

.preloader-circle {
    position: absolute;
    width: 14px;
    height: 14px;
    right: 32px;
    bottom: 55px;
    background-color: #eddeff;
    border-radius: 50%;
    opacity: 0;
    /* animation: logo_blink 5s infinite; */
  }