.loading {
    --scale_nums: 0.6;
    position: fixed;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000000000
}

.loading_greenblock {
    background: var(--theme_green) url(../img/loading_block.3c7dab8c.svg) repeat;
    background-size: 30%
}

.loading_blackblock,
.loading_greenblock {
    position: absolute;
    width: 100%;
    height: 100%
}

.loading_blackblock {
    background-color: var(--theme_black)
}

.loading_animation {
    flex-direction: column;
    align-items: center
}

.loading_animation_icon {
    width: calc(25rem*var(--scale_nums));
    height: calc(25rem*var(--scale_nums))
}

.loading_animation_tip {
    font-family: eng;
    font-size: calc(1.5rem*var(--scale_nums));
    color: var(--theme_green);
    letter-spacing: calc(.3rem*var(--scale_nums));
    margin-right: calc(-.3rem*var(--scale_nums));
    transform: translateY(calc(-6rem*var(--scale_nums)))
}

@media screen and (max-aspect-ratio:3/2) {
    .loading {
        --scale_nums: 1
    }
}

@media screen and (max-aspect-ratio:1/1) {
    .loading {
        --scale_nums: 0.8
    }
}

#menubox {
    position: fixed;
    z-index: 100000000
}

.menubox_menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--theme_white);
    transform: translateY(100%);
    border-top-left-radius: 10rem;
    border-top-right-radius: 10rem;
    background-image: linear-gradient(0deg, transparent 2.9rem, #ddd 3rem), linear-gradient(90deg, transparent 2.9rem, #ddd 3rem);
    background-size: 3rem 3rem
}

@media screen and (max-aspect-ratio:5404319552844595/9007199254740992) {
    .menubox_menu {
        border-top-left-radius: 6rem;
        border-top-right-radius: 6rem
    }
}

.menubox_menu_backg {
    --scale_nums: 1;
    position: absolute;
    right: 0;
    bottom: 0;
    width: calc(var(--scale_nums)*65rem);
    height: calc(var(--scale_nums)*45rem);
    overflow: hidden
}

.menubox_menu_backg img {
    transform: translateY(100%)
}

.menubox_menu_backg img:first-child {
    position: absolute;
    top: calc(var(--scale_nums)*12rem);
    left: calc(var(--scale_nums)*15rem);
    width: calc(var(--scale_nums)*28rem)
}

.menubox_menu_backg img:nth-child(2) {
    position: absolute;
    top: 0;
    right: calc(var(--scale_nums)*-2rem);
    width: calc(var(--scale_nums)*30rem)
}

.menubox_menu_backg img:nth-child(3) {
    position: absolute;
    top: calc(var(--scale_nums)*32rem);
    left: calc(var(--scale_nums)*7rem);
    width: calc(var(--scale_nums)*25rem)
}

.menubox_menu_backg img:nth-child(4) {
    position: absolute;
    bottom: calc(var(--scale_nums)*-45rem);
    right: calc(var(--scale_nums)*-5rem);
    width: calc(var(--scale_nums)*48rem)
}

.menubox_menu_content {
    --scale_nums: 1;
    position: relative;
    flex-direction: column;
    margin-top: calc(var(--scale_nums)*5rem);
    margin-left: calc(var(--scale_nums)*20rem)
}

.mmc_selections {
    flex-direction: column;
    width: calc(var(--scale_nums)*25rem);
    margin-bottom: calc(var(--scale_nums)*3rem);
    overflow: hidden
}

.mmc_selections_selection {
    justify-content: start;
    align-items: center;
    margin-bottom: calc(var(--scale_nums)*1rem);
    cursor: pointer;
    transform: translateX(-100%)
}

.mmc_selections_selection p:first-child {
    font-family: zh;
    font-size: calc(var(--scale_nums)*1rem);
    color: var(--theme_black);
    letter-spacing: calc(var(--scale_nums)*.2rem);
    writing-mode: vertical-lr;
    margin-right: calc(var(--scale_nums)*.5rem);
    transition: color .2s ease
}

.mmc_selections_selection p:nth-child(2) {
    position: relative;
    color: var(--theme_black);
    text-transform: uppercase;
    transform-origin: left;
    transform: scaleX(1.1)
}

.mmc_selections_selection p:nth-child(2),
.mmc_selections_selection p:nth-child(2):before {
    font-family: eng;
    font-size: calc(var(--scale_nums)*4.8rem);
    line-height: calc(var(--scale_nums)*4.8rem);
    -webkit-text-stroke: calc(var(--scale_nums)*.1rem) var(--theme_black)
}

.mmc_selections_selection p:nth-child(2):before {
    content: attr(text);
    position: absolute;
    color: #00000000;
    transform: translateX(3%);
    transition: color .3s ease, -webkit-text-stroke .3s ease, transform .3s ease;
    z-index: -1
}

@media (hover:hover) {
    .mmc_selections_selection:hover p:first-child {
        color: var(--theme_green)
    }
    .mmc_selections_selection:hover p:nth-child(2):before {
        color: var(--theme_green);
        -webkit-text-stroke: calc(var(--scale_nums)*.1rem) var(--theme_green);
        transform: translateX(5%)
    }
}

.mmc_selections_selection_current {
    cursor: default
}

.mmc_selections_selection_current p:first-child {
    color: var(--theme_green)
}

.mmc_selections_selection_current p:nth-child(2):before {
    color: var(--theme_green);
    -webkit-text-stroke: calc(var(--scale_nums)*.1rem) var(--theme_green);
    transform: translateX(5%)
}

.mmc_contact {
    position: relative;
    flex-direction: column;
    margin-bottom: calc(var(--scale_nums)*3rem)
}

.mmc_contact_title {
    font-family: eng;
    letter-spacing: calc(var(--scale_nums)*.05rem);
    text-transform: uppercase;
    margin-bottom: calc(var(--scale_nums)*.5rem)
}

.mmc_contact_message,
.mmc_contact_title {
    font-size: calc(var(--scale_nums)*1rem);
    color: var(--theme_black)
}

.mmc_contact_message {
    font-family: zh;
    line-height: calc(var(--scale_nums)*1rem);
    letter-spacing: calc(var(--scale_nums)*.1rem);
    margin-bottom: calc(var(--scale_nums)*.6rem);
    -webkit-user-select: all;
    -moz-user-select: all;
    user-select: all
}

.mmc_contact_message span {
    font-size: calc(var(--scale_nums)*1.1rem);
    color: var(--theme_green);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.mmc_link {
    position: relative;
    align-self: start;
    font-family: zh;
    font-size: calc(var(--scale_nums)*.8rem);
    color: var(--theme_black);
    letter-spacing: calc(var(--scale_nums)*.05rem);
    text-decoration: none;
    transition: color .3s ease
}

@media (hover:hover) {
    .mmc_link:hover {
        color: var(--theme_green)
    }
}

@media screen and (max-aspect-ratio:8106479329266893/4503599627370496) {
    .menubox_menu_backg {
        --scale_nums: 0.8
    }
}

@media screen and (max-aspect-ratio:3/2) {
    .menubox_menu_backg {
        --scale_nums: 1
    }
    .menubox_menu_content {
        --scale_nums: 1.3
    }
}

@media screen and (max-aspect-ratio:5404319552844595/4503599627370496) {
    .menubox_menu_content {
        --scale_nums: 1.5;
        margin-top: calc(var(--scale_nums)*5rem);
        margin-left: calc(var(--scale_nums)*15rem)
    }
}

@media screen and (max-aspect-ratio:1/1) {
    .menubox_menu {
        justify-content: center;
        align-items: center
    }
    .menubox_menu_content {
        --scale_nums: 1.5;
        margin-top: 0;
        margin-left: 0
    }
}

@media screen and (max-aspect-ratio:3602879701896397/4503599627370496) {
    .menubox_menu_backg {
        --scale_nums: 0.8
    }
}

@media screen and (max-aspect-ratio:3152519739159347/4503599627370496) {
    .menubox_menu_content {
        --scale_nums: 1.5;
        margin-top: calc(var(--scale_nums)*-10rem)
    }
}

.menubox_logo {
    left: 4rem;
    width: 4rem;
    height: 4rem;
    cursor: pointer;
    mix-blend-mode: difference
}

.menubox_logo,
.menubox_navigation {
    position: fixed;
    justify-content: center;
    align-items: center;
    top: 3.5rem;
    transform: translateY(-50%)
}

.menubox_navigation {
    right: 4rem
}

.menubox_navigation_menuicon {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 2rem;
    cursor: pointer;
    overflow: visible
}

.menubox_navigation_menuicon circle {
    fill: var(--theme_green)
}

.menubox_navigation_menuicon line {
    stroke: var(--theme_black);
    stroke-width: 6;
    stroke-linecap: round;
    transform-origin: center;
    transition: transform .4s ease, stroke-dashoffset .4s ease, stroke-dasharray .4s ease
}

.menubox_navigation_menuicon_hidden line:first-of-type {
    transform: translateY(-13%);
    stroke-dasharray: 13 12 25
}

.menubox_navigation_menuicon_hidden line:nth-of-type(2) {
    transform: translateY(13%);
    stroke-dasharray: 12.5 0 12.5
}

.menubox_navigation_menuicon_show line:first-of-type {
    transform: rotate(45deg);
    stroke-dashoffset: 25
}

.menubox_navigation_menuicon_show line:nth-of-type(2) {
    transform: rotate(-45deg);
    stroke-dasharray: 2 21 2
}

@media (hover:hover) {
    .menubox_navigation_menuicon_hidden:hover line:first-of-type {
        stroke-dashoffset: 25
    }
    .menubox_navigation_menuicon_show:hover line:nth-of-type(2) {
        stroke-dasharray: 12.5 0 12.5
    }
}

.menubox_navigation_contact {
    position: relative;
    justify-content: center;
    align-items: center;
    width: 8.5rem;
    height: 2.2rem;
    border: .12rem solid var(--theme_white);
    border-radius: 1.5rem;
    transition: background-color .4s ease .3s;
    cursor: pointer;
    overflow: hidden
}

.menubox_navigation_contact_black {
    background-color: var(--theme_black)
}

.menubox_navigation_contact p {
    position: absolute;
    font-family: eng;
    font-size: 1.3rem;
    color: var(--theme_white);
    letter-spacing: .08rem;
    transition: color .4s ease, transform .4s ease;
    transform: translateX(-13%);
    z-index: 1
}

.menubox_navigation_contact svg {
    position: absolute;
    width: .9rem;
    height: .9rem;
    transform: translateX(320%);
    transition: transform .4s ease
}

.menubox_navigation_contact svg line,
.menubox_navigation_contact svg polyline {
    fill: none;
    stroke: var(--theme_green);
    stroke-width: 8;
    stroke-linecap: round
}

.menubox_navigation_contact:after,
.menubox_navigation_contact:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 1.5rem;
    transform: translateX(-100%);
    z-index: 0
}

.menubox_navigation_contact:after {
    background-color: var(--theme_green);
    transition: transform .4s ease .1s
}

.menubox_navigation_contact:before {
    background-color: var(--theme_white);
    transition: transform .4s ease
}

@media (hover:hover) {
    .menubox_navigation_contact:hover:after,
    .menubox_navigation_contact:hover:before {
        transform: translateX(0)
    }
    .menubox_navigation_contact:hover p {
        color: var(--theme_black);
        transform: translateX(0)
    }
    .menubox_navigation_contact:hover svg {
        transform: translateX(550%)
    }
}

* {
    margin: 0;
    padding: 0;
    font-size: 2vmin;
    --theme_black: #171717;
    --theme_white: #f7f7f7;
    --theme_green: #17f700
}

img,
p {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

img {
    pointer-events: none
}

div {
    display: flex;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent
}

::-webkit-scrollbar {
    display: none
}

::-moz-selection {
    background-color: var(--theme_green);
    color: var(--theme_black)
}

::selection {
    background-color: var(--theme_green);
    color: var(--theme_black)
}

video::-webkit-media-controls {
    display: none !important
}

body {
    width: 100%;
    background-color: var(--theme_black)
}

@media screen and (max-aspect-ratio:3/2) {
    * {
        font-size: 1vmax
    }
}

/* ✅ 替换为这段代码 */
@font-face {
    font-family: eng;
    src: local("Arial"), local("Helvetica"), sans-serif;
}

#scrollbar {
    position: fixed;
    left: 0;
    width: .3rem;
    height: 100%;
    z-index: 10000000;
    overflow: hidden
}

#scrollbar:before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: var(--theme_green);
    border-radius: 10rem;
    transform-origin: top;
    transform: translateY(calc((1 - var(--p))*-100%))
}

#home {
    position: relative;
    flex-direction: column;
    width: 100%;
    overflow: hidden
}

.gray {
    filter: grayscale(1)
}

.home_welcome {
    position: relative;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    margin-bottom: 15rem
}

.home_welcome_background {
    position: absolute;
    width: 100%;
    height: 100%
}

.hwb_blurball1 {
    position: absolute;
    top: -30rem;
    left: -30rem;
    width: 80rem;
    height: 80rem
}

.hwb_blurball2 {
    position: absolute;
    bottom: -25rem;
    right: -25rem;
    width: 60rem;
    height: 60rem
}

.home_welcome_lines {
    position: absolute;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    opacity: .2
}

.home_welcome_lines div {
    position: absolute;
    width: 120vw;
    height: .1rem;
    background: linear-gradient(90deg, #00000000, #17f700);
    background-size: 200% 200%;
    background-position: 200% 0;
    animation: move_line 10s linear infinite
}

.home_welcome_lines div:first-child {
    top: 10%;
    transform: rotate(-20deg)
}

.home_welcome_lines div:nth-child(2) {
    left: -50%;
    transform: rotate(-80deg);
    animation-delay: -2s
}

.home_welcome_lines div:nth-child(3) {
    left: 5%;
    top: 15%;
    transform: rotate(30deg);
    animation-delay: -5s
}

.home_welcome_lines div:nth-child(4) {
    bottom: 20%;
    transform: rotate(-5deg);
    animation-delay: 5s
}

.home_welcome_lines div:nth-child(5) {
    bottom: -20%;
    transform: rotate(-30deg);
    animation-delay: 2s
}

@keyframes move_line {
    0% {
        background-position: 200% 0
    }
    to {
        background-position: 0 0
    }
}

.home_welcome_logo {
    position: absolute;
    width: 20rem;
    height: 20rem;
    transform: translate(108%, -15%)
}

.home_welcome_main {
    align-items: center;
    width: 65rem;
    height: 30rem;
    margin-bottom: 6rem;
    --scale_nums: 1
}

.home_welcome_main,
.hwm_title {
    position: absolute;
    justify-content: center
}

.hwm_title {
    flex-direction: column;
    align-items: flex-start
}

.hwm_title div {
    opacity: 0;
    transform: translateX(-10rem)
}

.hwm_title p {
    position: relative;
    font-family: eng;
    font-size: calc(var(--scale_nums)*9rem);
    line-height: calc(var(--scale_nums)*9rem);
    letter-spacing: calc(var(--scale_nums)*.5rem);
    text-transform: uppercase;
    white-space: nowrap
}

.hwm_title div:first-child p {
    color: #00000000;
    -webkit-text-stroke: calc(var(--scale_nums)*.2rem) var(--theme_white);
    transform: translateX(15%)
}

.hwm_title div:nth-child(2) p {
    color: #00000000;
    -webkit-text-stroke: calc(var(--scale_nums)*.2rem) var(--theme_green);
    transform: translateX(-15%)
}

.hwm_title div:nth-child(3) p {
    color: #00000000;
    -webkit-text-stroke: calc(var(--scale_nums)*.2rem) var(--theme_white);
    transform: translateX(3%)
}

.hwm_title div:nth-child(3) p span {
    color: #00000000;
    -webkit-text-stroke: calc(var(--scale_nums)*.2rem) var(--theme_green);
    font-size: calc(var(--scale_nums)*9rem)
}

.home_welcome_nobody {
    position: absolute;
    left: 15%;
    top: 14%;
    width: 5.5rem;
    height: 5.5rem;
    transform: rotate(0) scale(0)
}

.hwv_eye {
    fill: var(--theme_green)
}

.hwv_mouse {
    fill: none;
    stroke: var(--theme_green);
    stroke-width: 7;
    stroke-linecap: round;
    stroke-linejoin: round
}

.hwv_circle {
    transform-origin: center;
    animation: hwv_circle 5s linear infinite
}

@keyframes hwv_circle {
    to {
        transform: rotate(1turn)
    }
}

.home_welcome_scrolltip {
    position: absolute;
    flex-direction: column;
    align-items: center;
    bottom: 0;
    opacity: 0;
    transform: translateY(10%)
}

.hws_brand {
    width: 2.2rem;
    height: 4.4rem;
    margin-bottom: .3rem;
    overflow: visible;
    animation: hws_brand 5s ease .1s infinite
}

@keyframes hws_brand {
    0% {
        transform: rotate(0deg)
    }
    10% {
        transform: rotate(180deg)
    }
    50% {
        transform: rotate(180deg)
    }
    60% {
        transform: rotate(1turn)
    }
    to {
        transform: rotate(1turn)
    }
}

.hws_brand_left,
.hws_brand_right {
    transform-origin: 106.214px -38.673px;
    fill: var(--theme_white)
}

.hws_brand_left {
    animation: hws_brand_left 5s ease infinite
}

.hws_brand_right {
    animation: hws_brand_right 5s ease infinite
}

@keyframes hws_brand_left {
    0% {
        transform: rotate(0deg)
    }
    5% {
        transform: rotate(-5deg)
    }
    50% {
        transform: rotate(-5deg)
    }
    55% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(0deg)
    }
}

@keyframes hws_brand_right {
    0% {
        transform: rotate(0deg)
    }
    5% {
        transform: rotate(2deg)
    }
    50% {
        transform: rotate(2deg)
    }
    55% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(0deg)
    }
}

.hws_brand_arrow {
    transform-origin: 275.1px 406.4159px;
    animation: hws_brand 5s ease .1s infinite
}

.hws_brand_arrow path {
    fill: none;
    stroke: var(--theme_green);
    stroke-width: 22;
    stroke-linecap: round;
    stroke-linejoin: round
}

.home_welcome_scrolltip p {
    --scale_nums: 2;
    font-family: zh;
    font-size: calc(var(--scale_nums)*.7rem);
    color: var(--theme_green);
    line-height: calc(var(--scale_nums)*1.2rem);
    letter-spacing: calc(var(--scale_nums)*.05rem);
    text-align: center;
    text-transform: uppercase;
    transform-origin: top;
    transform: scale(calc(1/var(--scale_nums)))
}

.home_welcome_scrolltip span {
    font-size: calc(var(--scale_nums)*.7rem);
    color: var(--theme_white);
    line-height: calc(var(--scale_nums)*1.1rem)
}

@media screen and (max-aspect-ratio:3/2) {
    .home_welcome_main {
        --scale_nums: 1.3
    }
    .home_welcome_logo {
        width: 26rem;
        height: 26rem;
        transform: translate(108%, -12%)
    }
    .home_welcome_nobody {
        left: 5%;
        top: 4%;
        width: 7.15rem;
        height: 7.15rem
    }
}

@media screen and (max-aspect-ratio:3602879701896397/4503599627370496) {
    .home_welcome_main {
        --scale_nums: 1
    }
    .home_welcome_logo {
        width: 20rem;
        height: 20rem;
        transform: translate(108%, -15%)
    }
    .home_welcome_nobody {
        left: 15%;
        top: 14%;
        width: 5.5rem;
        height: 5.5rem
    }
}

@media screen and (max-aspect-ratio:5854679515581645/9007199254740992) {
    .home_welcome_logo {
        width: 40rem;
        height: 40rem;
        transform: translateY(-35%)
    }
    .home_welcome_main {
        margin-bottom: 0;
        margin-top: 30rem;
        margin-left: 4rem;
        --scale_nums: 0.75
    }
    .home_welcome_nobody {
        left: 23%;
        top: 22%;
        width: 4.8rem;
        height: 4.8rem
    }
    .home_welcome_scrolltip {
        bottom: 10%
    }
}

.home_about {
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: calc(var(--scale_nums)*6.5rem);
    --scale_nums: 0.8
}

.home_about_content {
    position: relative;
    flex-direction: column;
    align-items: start
}

.hac_title {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: calc(var(--scale_nums)*.8rem);
    z-index: 1
}

.hac_title,
.hac_title:after,
.hac_title:before {
    -webkit-text-stroke: calc(var(--scale_nums)*.1rem) var(--theme_green)
}

.hac_title,
.hac_title:after,
.hac_title:before {
    font-family: eng;
    font-size: calc(var(--scale_nums)*10rem);
    color: #00000000;
    letter-spacing: calc(var(--scale_nums)*.5rem);
    white-space: nowrap
}

.hac_title {
    color: var(--theme_green)
}

.hac_title:after {
    transition: transform .6s ease-out;
    -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
    clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
    z-index: -1
}

.hac_title:after,
.hac_title:before {
    content: attr(text);
    position: absolute
}

.hac_title:before {
    transition: transform 1s ease-out;
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 100%, 0 100%);
    clip-path: polygon(0 80%, 100% 80%, 100% 100%, 0 100%);
    z-index: -2
}

.hac_introduce {
    position: relative;
    font-family: zh;
    font-size: calc(var(--scale_nums)*1rem);
    color: var(--theme_white);
    letter-spacing: calc(var(--scale_nums)*.15rem);
    line-height: calc(var(--scale_nums)*1.6rem)
}

.hac_line {
    position: absolute;
    right: -15%;
    bottom: -12%;
    width: calc(var(--scale_nums)*20rem);
    height: calc(var(--scale_nums)*9em);
    transform: rotate(5deg);
    z-index: 2
}

.hac_line path {
    fill: none;
    stroke: var(--theme_white);
    stroke-width: 28;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 4700;
    stroke-dashoffset: 4700;
    transition: stroke-dashoffset 1.2s ease-out
}

.home_about_content_show .hac_title:after {
    transform: translateY(10%) scale(.95)
}

.home_about_content_show .hac_title:before {
    transform: translateY(16%) scale(.9)
}

.home_about_content_show .hac_line path {
    stroke-dashoffset: 0
}

@media screen and (max-aspect-ratio:1/2) {
    .home_about {
        --scale_nums: 0.6
    }
}

.home_portrait {
    align-items: center;
    width: 100%;
    height: 50rem;
    margin-bottom: 5rem
}

.home_portrait,
.home_portrait_main {
    position: relative;
    justify-content: center;
    overflow: hidden
}

.home_portrait_main {
    width: 70rem;
    height: 35rem;
    border-radius: 2rem;
    z-index: 0
}

.hpm_imgbox {
    position: absolute;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.hpm_imgbox img {
    width: 100%
}

.home_portrait_textline {
    box-sizing: border-box;
    height: 35rem;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    margin: 0 2rem
}

.home_portrait_textline div {
    position: relative;
    justify-content: center;
    align-items: center;
    width: 1.5rem;
    height: .3rem;
    background-color: var(--theme_white);
    transform: rotate(45deg);
    animation: rotate_cross1 3s ease infinite
}

.home_portrait_textline div:nth-child(3) {
    transform: rotate(0deg) scale(.7);
    animation: rotate_cross2 3s ease infinite
}

.home_portrait_textline div:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--theme_white);
    transform: rotate(90deg)
}

.home_portrait_textline p {
    font-family: zh;
    font-size: 1rem;
    color: var(--theme_green);
    letter-spacing: .2rem;
    writing-mode: vertical-rl;
    text-transform: uppercase
}

@keyframes rotate_cross1 {
    0% {
        transform: rotate(40deg)
    }
    40% {
        transform: rotate(45deg)
    }
    50% {
        transform: rotate(90deg)
    }
    90% {
        transform: rotate(90deg)
    }
    to {
        transform: rotate(135deg)
    }
}

@keyframes rotate_cross2 {
    0% {
        transform: rotate(0deg) scale(.7)
    }
    40% {
        transform: rotate(0deg) scale(.7)
    }
    50% {
        transform: rotate(45deg) scale(.7)
    }
    90% {
        transform: rotate(45deg) scale(.7)
    }
    to {
        transform: rotate(90deg) scale(.7)
    }
}

.home_portrait_line {
    position: absolute;
    top: 7.5rem
}

.home_portrait_line div {
    position: relative;
    justify-content: center;
    align-items: center;
    width: 110vw;
    height: .1rem;
    background: linear-gradient(90deg, #00000000, #17f700, #00000000);
    transform: scaleX(0);
    transition: transform .3s ease;
    z-index: 1
}

.home_portrait_line div:after {
    width: 100vw;
    height: .5rem;
    border-radius: 50%;
    filter: blur(1rem);
    opacity: .8
}

.home_portrait_line div:after,
.home_portrait_line div:before {
    content: "";
    position: absolute;
    background-color: var(--theme_green);
    z-index: -1
}

.home_portrait_line div:before {
    width: 40rem;
    height: 1rem;
    border-radius: 100%;
    filter: blur(.3rem);
    opacity: .6
}

.home_portrait_line_show div {
    transform: scaleX(1)
}

@media screen and (max-aspect-ratio:1/2) {
    .hpm_imgbox img {
        width: auto;
        height: 100%
    }
}

.home_skills {
    flex-direction: column;
    align-items: center;
    width: 100%;
    overflow: hidden;
    padding-top: 5rem
}

.home_skills_title {
    --scale_nums: 1;
    position: relative;
    align-self: start;
    font-family: eng;
    font-size: calc(var(--scale_nums)*3rem);
    color: var(--theme_white);
    line-height: calc(var(--scale_nums)*3.2rem);
    letter-spacing: calc(var(--scale_nums)*.2rem);
    text-transform: uppercase;
    margin-left: 10rem;
    margin-bottom: 10rem
}

.home_skills_title span {
    font-size: calc(var(--scale_nums)*3rem);
    color: var(--theme_green)
}

.home_skills_title:after {
    content: "?";
    position: absolute;
    right: calc(var(--scale_nums)*-4rem);
    top: calc(var(--scale_nums)*1rem);
    font-family: eng;
    font-size: calc(var(--scale_nums)*10rem);
    color: #00000000;
    -webkit-text-stroke: calc(var(--scale_nums)*.05rem) var(--theme_green);
    transform: rotate(-30deg) scale(0);
    transition: transform .5s ease
}

.home_skills_title_show:after {
    transform: rotate(15deg)
}

.home_skills_skill {
    justify-content: center;
    align-items: center;
    width: 60rem;
    margin-bottom: 15rem
}

.hss_text {
    position: relative;
    flex-direction: column;
    margin-right: 5rem
}

.hss_text p:first-child {
    font-family: eng;
    font-size: 2rem;
    color: var(--theme_white);
    text-transform: uppercase;
    letter-spacing: .1rem;
    margin-bottom: .5rem;
    transform: translateX(-10%);
    opacity: 0
}

.hss_text p:nth-child(2),
.hss_text p:nth-child(3) {
    font-family: eng;
    font-size: 4rem;
    color: var(--theme_green);
    line-height: 3.5rem;
    letter-spacing: .1rem;
    text-transform: uppercase;
    opacity: 0
}

.hss_text p:nth-child(2) {
    transform: scaleY(2) translateY(25%)
}

.hss_text p:nth-child(3) {
    transform: scaleY(.8) translateY(50%);
    color: #00000000;
    -webkit-text-stroke: .1rem var(--theme_green)
}

.hss_text p:nth-child(4) {
    font-family: zh;
    font-size: 1.3rem;
    color: var(--theme_white);
    letter-spacing: .3rem;
    margin: 1.5rem 0 4rem 0;
    opacity: 0
}

.hss_text p:nth-child(5) {
    position: relative;
    font-family: eng;
    font-size: 4.5rem;
    color: #00000000;
    letter-spacing: .3rem;
    -webkit-text-stroke: .1rem var(--theme_white)
}

.hss_block {
    height: 23rem;
    width: 23rem;
    border: .1rem solid var(--theme_white);
    border-radius: 1rem
}

.hss_block_canvas {
    position: relative;
    width: 100%;
    border-radius: 1rem;
    overflow: hidden;
    transform: translate(-5%, -5%)
}

.home_skills>div:first-child {
    transform: translateX(-20%)
}

.home_skills>div:nth-child(2) {
    transform: translateX(20%)
}

.home_skills>div:nth-child(3) {
    transform: translateX(-20%)
}

@media screen and (max-aspect-ratio:3/4) {
    .home_skills_skill {
        flex-direction: column;
        margin-bottom: 10rem
    }
    .home_skills_title {
        --scale_nums: 1.3;
        align-self: center;
        margin-left: 0;
        margin-bottom: 15rem
    }
    .hss_text {
        width: 35rem;
        margin-bottom: 2rem;
        margin-right: 0
    }
    .hss_text p:nth-child(5) {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 6rem
    }
    .hss_block {
        height: 35rem;
        width: 35rem
    }
    .home_skills>div:first-child,
    .home_skills>div:nth-child(2),
    .home_skills>div:nth-child(3) {
        transform: translateX(0)
    }
}

.home_idea {
    position: relative;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50rem;
    margin-bottom: -10rem;
    border-bottom-left-radius: 10rem;
    border-bottom-right-radius: 10rem;
    background-color: var(--theme_black);
    overflow: hidden;
    z-index: 1
}

.home_idea_background {
    position: absolute;
    width: 100%;
    height: 100%
}

.home_idea_container {
    --scale_nums: 1;
    position: relative;
    flex-direction: column;
    align-items: center;
    width: calc(var(--scale_nums)*60rem);
    margin-top: calc(var(--scale_nums)*-15rem)
}

.home_idea_container p {
    font-family: eng;
    color: var(--theme_white);
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 1
}

.home_idea_container p:first-child {
    font-size: calc(var(--scale_nums)*4rem);
    letter-spacing: calc(var(--scale_nums)*4rem/30)
}

.home_idea_container p:nth-child(2) {
    font-size: calc(var(--scale_nums)*7.5rem);
    line-height: calc(var(--scale_nums)*8rem);
    letter-spacing: calc(var(--scale_nums)*7.5rem/40)
}

.home_idea_container p:nth-child(2) span {
    font-size: calc(var(--scale_nums)*7.5rem);
    color: var(--theme_green)
}

.home_idea_container p:nth-child(3) {
    font-size: calc(var(--scale_nums)*6rem);
    letter-spacing: calc(var(--scale_nums)*6rem/30)
}

.home_idea_container p:nth-child(3) span {
    font-size: calc(var(--scale_nums)*6rem);
    color: #0000;
    -webkit-text-stroke: calc(var(--scale_nums)*.15rem) var(--theme_green)
}

.hic_brain {
    bottom: 10%;
    right: -7%
}

.hic_brain,
.hic_horse {
    position: absolute;
    width: calc(var(--scale_nums)*10rem);
    z-index: 0
}

.hic_horse {
    top: -40%;
    left: 0;
    transform: rotate(-15deg)
}

@media screen and (max-aspect-ratio:3152519739159347/4503599627370496) {
    .home_idea {
        border-bottom-left-radius: 7rem;
        border-bottom-right-radius: 7rem
    }
    .home_idea_container {
        --scale_nums: 0.8
    }
}

@media screen and (max-aspect-ratio:5404319552844595/9007199254740992) {
    .home_idea_container {
        --scale_nums: 0.7
    }
}

@media screen and (max-aspect-ratio:1/2) {
    .hic_brain {
        right: 0;
        bottom: 8%
    }
    .hic_horse {
        top: -75%;
        left: 3%
    }
}

.home_vision {
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 60rem;
    overflow: hidden;
    background-color: var(--theme_green);
    z-index: -1
}

.home_vision_scrolllines {
    position: relative;
    height: 12rem;
    flex-shrink: 0;
    transform: translateY(5rem)
}

.home_vision .home_vision_scrolllines:nth-child(odd) {
    align-self: start;
    justify-content: start
}

.home_vision .home_vision_scrolllines:nth-child(2n) {
    align-self: end;
    justify-content: end
}

.hvs_line {
    position: relative;
    height: 100%
}

.home_vision .home_vision_scrolllines:nth-child(odd) .hvs_line {
    justify-content: start;
    animation: vision_scrollline_mov 8s linear infinite
}

.home_vision .home_vision_scrolllines:nth-child(2n) .hvs_line {
    justify-content: end;
    animation: vision_scrollline_mov_reverse 8s linear infinite
}

@keyframes vision_scrollline_mov {
    0% {
        transform: translateX(0)
    }
    to {
        transform: translateX(-100%)
    }
}

@keyframes vision_scrollline_mov_reverse {
    0% {
        transform: translateX(0)
    }
    to {
        transform: translateX(100%)
    }
}

.hvs_line div {
    font-family: eng;
    color: var(--theme_black);
    text-transform: uppercase;
    margin-right: 4rem;
    flex-shrink: 0
}

.hvs_line div,
.hvs_line p {
    font-size: 12rem;
    line-height: 12rem;
    letter-spacing: .2rem
}

.hvs_line p {
    color: #00000000;
    -webkit-text-stroke: .3rem var(--theme_black);
    margin-left: 2rem
}

.home_vision_block {
    position: absolute;
    width: 38rem;
    height: 38rem;
    background-color: var(--theme_black);
    border-radius: 2rem;
    margin-top: 10rem
}

.home_vision_block P {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    font-family: zh;
    font-size: 1.5rem;
    color: var(--theme_green)
}

.home_vision_block P:after {
    content: "";
    position: absolute;
    width: 3.2rem;
    height: .1rem
}

.home_vision_block P:before {
    content: "";
    position: absolute;
    width: .1rem;
    height: 3.2rem
}

.home_vision_block P:first-child {
    top: .8rem;
    left: .8rem
}

.home_vision_block P:nth-child(2) {
    top: .8rem;
    right: .8rem
}

.home_vision_block P:nth-child(3) {
    bottom: .8rem;
    left: .8rem
}

.home_vision_block P:nth-child(4) {
    bottom: .8rem;
    right: .8rem
}

.home_vision_block P:first-child:after,
.home_vision_block P:nth-child(3):after {
    left: 2rem;
    background: linear-gradient(90deg, #f7f7f7, #00000000)
}

.home_vision_block P:nth-child(2):after,
.home_vision_block P:nth-child(4):after {
    right: 2rem;
    background: linear-gradient(90deg, #00000000, #f7f7f7)
}

.home_vision_block P:first-child:before,
.home_vision_block P:nth-child(2):before {
    top: 2.4rem;
    background: linear-gradient(0deg, #00000000, #f7f7f7)
}

.home_vision_block P:nth-child(3):before,
.home_vision_block P:nth-child(4):before {
    bottom: 2.4rem;
    background: linear-gradient(180deg, #00000000, #f7f7f7)
}

#home_vision_spidereye {
    position: absolute;
    width: 40rem;
    margin-top: 10rem
}

@media screen and (max-aspect-ratio:3602879701896397/4503599627370496) {
    .home_vision_text {
        width: 18rem
    }
}

.home_works {
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-top: calc(var(--scale_nums)*15rem);
    padding-bottom: calc(var(--scale_nums)*5rem);
    margin-bottom: calc(var(--scale_nums)*8rem);
    --scale_nums: 1
}

.home_works_title {
    position: relative;
    margin-bottom: calc(var(--scale_nums)*2rem);
    transform: scaleX(.9)
}

.home_works_title p {
    font-family: eng;
    font-size: calc(var(--scale_nums)*8rem);
    letter-spacing: calc(var(--scale_nums)*.3rem);
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(10%);
    color: #00000000;
    -webkit-text-stroke: .1rem var(--theme_green)
}

.home_works_zh {
    font-size: calc(var(--scale_nums)*1.2rem);
    letter-spacing: calc(var(--scale_nums)*.15rem);
    margin-bottom: calc(var(--scale_nums)*.2rem)
}

.home_works_eng,
.home_works_zh {
    font-family: zh;
    color: var(--theme_white)
}

.home_works_eng {
    font-size: calc(var(--scale_nums)*.6rem*2);
    letter-spacing: calc(var(--scale_nums)*.05rem*2);
    text-transform: uppercase;
    text-align: center;
    transform-origin: top;
    transform: scale(.5)
}

.home_works_line {
    position: absolute;
    top: 88%;
    width: calc(var(--scale_nums)*.15rem);
    height: calc(var(--scale_nums)*14rem);
    background: linear-gradient(#17f700, #00000000);
    border-radius: calc(var(--scale_nums)*.5rem)
}

@media screen and (max-aspect-ratio:1/2) {
    .home_works {
        --scale_nums: 0.8
    }
}

.home_videotitle {
    position: relative;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 20rem;
    margin-bottom: 5rem;
    overflow: hidden;
    cursor: pointer
}

.home_videotitle_pmd {
    height: 30rem
}

.home_videotitle_text,
.home_videotitle_textline {
    position: absolute;
    font-family: eng;
    font-size: 12rem;
    transform: scaleY(80%);
    text-transform: uppercase
}

.home_videotitle_text {
    color: var(--theme_green);
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%)
}

.home_videotitle_textline {
    -webkit-text-stroke: .15rem var(--theme_green);
    color: #00000000
}

.home_videotitle_frames {
    position: absolute;
    width: 100%;
    height: 15rem
}

.hvf_frame {
    display: flex;
    justify-content: flex-start;
    height: 100%;
    flex-shrink: 0;
    transform: translateZ(0)
}

.hvf_frame_img {
    align-items: center;
    height: 100%;
    margin-right: 1rem;
    transform-origin: right;
    overflow: hidden;
    flex-shrink: 0;
    border: .2rem solid var(--theme_white)
}

.hvf_frame_img img {
    height: 100%
}

.home_videotitle_mousetip {
    position: fixed;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    width: 6rem;
    height: 6rem;
    margin-left: -3rem;
    margin-top: -3rem;
    background-color: var(--theme_green);
    border-radius: 50%;
    transform: scale(0);
    pointer-events: none
}

.home_videotitle_mousetip p {
    position: absolute;
    font-family: eng;
    font-size: 2rem;
    color: var(--theme_black);
    letter-spacing: .1rem
}

.home_videotitle_mousetip svg {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: visible
}

.home_videotitle_mousetip_circle {
    fill: none;
    stroke-width: 1.5;
    stroke: var(--theme_white);
    stroke-linecap: round;
    stroke-dasharray: 160;
    stroke-dashoffset: 160
}

.home_videos {
    flex-direction: column;
    justify-content: center;
    width: 100%;
    overflow: hidden
}

.home_videos,
.home_videos_video {
    position: relative;
    align-items: center
}

.home_videos_video {
    --scale_nums: 1;
    box-sizing: border-box;
    justify-content: start;
    width: 90%;
    height: calc(var(--scale_nums)*15rem);
    padding-left: 5%;
    border-top: .1rem solid var(--theme_white);
    cursor: pointer;
    z-index: 0
}

.home_videos_video:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--theme_white);
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
    clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
    transition: -webkit-clip-path .4s ease;
    transition: clip-path .4s ease;
    transition: clip-path .4s ease, -webkit-clip-path .4s ease;
    z-index: 0
}

.hvv_nums {
    font-family: eng;
    font-size: calc(var(--scale_nums)*6rem);
    color: #0000;
    -webkit-text-stroke: .1rem var(--theme_white);
    letter-spacing: calc(var(--scale_nums)*.2rem);
    margin-right: calc(var(--scale_nums)*2rem);
    transition: -webkit-text-stroke .4s ease, color .4s ease;
    z-index: 1
}

.hvv_information {
    flex-direction: column
}

.hvv_information p:first-child {
    font-family: eng;
    font-size: calc(var(--scale_nums)*3.5rem);
    color: var(--theme_white);
    line-height: calc(var(--scale_nums)*4rem);
    letter-spacing: calc(var(--scale_nums)*.1rem);
    white-space: nowrap;
    margin-bottom: calc(var(--scale_nums)*1rem);
    transition: color .4s ease;
    z-index: 1
}

.hvv_information p:nth-child(2) {
    line-height: calc(var(--scale_nums)*1.3rem);
    letter-spacing: calc(var(--scale_nums)*.2rem);
    white-space: nowrap
}

.hvv_information p:nth-child(2),
.hvv_time {
    font-family: zh;
    font-size: calc(var(--scale_nums)*1rem);
    color: var(--theme_white);
    transition: color .4s ease;
    z-index: 1
}

.hvv_time {
    position: absolute;
    right: 5%;
    letter-spacing: calc(var(--scale_nums)*.15rem)
}

@media (hover:hover) {
    .home_videos_video:hover:after {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
    }
    .home_videos_video:hover p {
        color: var(--theme_black)
    }
    .home_videos_video:hover .hvv_nums {
        color: var(--theme_green);
        -webkit-text-stroke: 0 var(--theme_white)
    }
}

.home_videos_card {
    position: fixed;
    left: 0;
    top: 0;
    width: 32rem;
    height: 20rem;
    background-color: var(--theme_white);
    border-radius: 1rem;
    margin-left: -3rem;
    margin-top: -3rem;
    overflow: hidden;
    transform: scale(0) rotate(30deg);
    pointer-events: none
}

.home_videos_card img {
    position: relative;
    height: 100%
}

@media screen and (max-aspect-ratio:8106479329266893/9007199254740992) {
    .home_videos_video {
        padding-left: 0
    }
    .hvv_time {
        right: 0
    }
}

@media screen and (max-aspect-ratio:3152519739159347/4503599627370496) {
    .home_videos_video {
        --scale_nums: 0.8
    }
    .hvv_time {
        bottom: 10%
    }
}

@media screen and (max-aspect-ratio:8106479329266893/18014398509481984) {
    .home_videos_video {
        --scale_nums: 0.6
    }
}

.home_photos {
    position: relative;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 60rem;
    margin-bottom: 10rem
}

.home_photos_box {
    position: absolute;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 45rem
}

.hpb_title {
    font-family: eng;
    font-size: 13rem;
    color: #00000000;
    letter-spacing: .3rem;
    -webkit-text-stroke: .15rem var(--theme_white);
    transform: scaleY(70%)
}

.home_photos_plates {
    position: relative;
    width: 45rem;
    height: 25rem;
    margin-bottom: 1rem
}

.hpp_plate,
.hpp_top {
    box-sizing: border-box;
    position: absolute;
    justify-content: center;
    align-items: center;
    width: 20rem;
    height: 26rem;
    border: .15rem solid var(--theme_white);
    border-radius: 1.5rem;
    background-color: var(--theme_black);
    transform-origin: bottom left;
    overflow: hidden;
    cursor: pointer
}

.hpp_plate img {
    position: relative;
    width: 100%;
    transition: transform .3s ease
}

@media (hover:hover) {
    .hpp_plate:hover img {
        transform: scale(1.1)
    }
}

.hpp_plate1 {
    transform: rotate(-10deg)
}

.hpp_plate2 {
    transform: rotate(-6deg) translate(35%, -12%)
}

.hpp_plate3 {
    transform: rotate(-2deg) translate(65%, -19%)
}

.hpp_plate4 {
    transform: rotate(2deg) translate(95%, -26%)
}

.hpp_plate5 {
    transform: rotate(6deg) translate(125%, -23%)
}

.hpp_top {
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--theme_white);
    border: none;
    cursor: pointer;
    z-index: 1000
}

.hpp_top_arm {
    position: absolute;
    width: 60%;
    bottom: -7rem;
    left: 4rem;
    overflow: visible;
    transform: translateY(40%);
    transition: .5s ease
}

.hpp_top_arm g {
    transform-origin: bottom;
    animation: arm_rotate 2.5s ease infinite
}

.hpp_top_arm_hand {
    transform-origin: 86.5px 375.4724px;
    animation: hand_rotate 2.5s ease infinite
}

@media (hover:hover) {
    .hpp_top:hover .hpp_top_arm {
        transform: translateY(0)
    }
}

@media (hover:none) {
    .hpp_top_arm {
        transform: translateY(0)
    }
}

@keyframes arm_rotate {
    0% {
        transform: rotate(0deg)
    }
    10% {
        transform: rotate(-3deg)
    }
    30% {
        transform: rotate(5deg)
    }
    40% {
        transform: rotate(0deg)
    }
    60% {
        transform: rotate(5deg)
    }
    80% {
        transform: rotate(0deg)
    }
}

@keyframes hand_rotate {
    0% {
        transform: rotate(0deg)
    }
    10% {
        transform: rotate(-6deg)
    }
    30% {
        transform: rotate(8deg)
    }
    40% {
        transform: rotate(0deg)
    }
    60% {
        transform: rotate(8deg)
    }
    80% {
        transform: rotate(0deg)
    }
}

.home_photos_tip {
    font-family: eng;
    font-size: 1.5rem;
    color: var(--theme_white);
    line-height: 1.5rem;
    letter-spacing: .1rem;
    text-transform: uppercase;
    margin-bottom: .6rem
}

.home_photos_time {
    font-family: eng;
    font-size: 1.2rem;
    color: var(--theme_green);
    letter-spacing: .2rem
}

.home_photos_time span {
    font-size: 1.2rem;
    color: var(--theme_white)
}

@media screen and (max-aspect-ratio:5404319552844595/9007199254740992) {
    .home_photos_box {
        transform: scale(.8)
    }
}

.home_contact {
    --scale: 1;
    justify-content: start;
    width: 100%
}

.home_contact,
.home_contact_text {
    position: relative;
    flex-direction: column;
    align-items: center
}

.home_contact_text {
    justify-content: center;
    z-index: 10001;
    pointer-events: none
}

.hct_title {
    position: relative;
    font-family: eng;
    font-size: calc(var(--scale)*8rem);
    color: var(--theme_white);
    line-height: calc(var(--scale)*6rem);
    letter-spacing: calc(var(--scale)*.2rem);
    text-transform: uppercase;
    white-space: nowrap
}

.home_contact_text img:first-of-type {
    position: absolute;
    top: calc(var(--scale)*-3.5rem);
    left: calc(var(--scale)*7rem);
    width: calc(var(--scale)*4.5rem);
    transform: rotate(15deg)
}

.home_contact_text img:nth-of-type(2) {
    position: absolute;
    right: calc(var(--scale)*2rem);
    bottom: calc(var(--scale)*-3rem);
    width: calc(var(--scale)*5rem);
    transform: rotate(-5deg)
}

.home_contact_text img:nth-of-type(3) {
    position: absolute;
    top: calc(var(--scale)*-2rem);
    right: calc(var(--scale)*8rem);
    width: calc(var(--scale)*4rem);
    transform: rotate(-15deg)
}

.home_contact_text img:nth-of-type(4) {
    position: absolute;
    bottom: calc(var(--scale)*-3rem);
    left: 0;
    width: calc(var(--scale)*4rem);
    transform: rotate(5deg)
}

.home_contact_phone {
    position: relative;
    width: calc(var(--scale)*30rem);
    height: calc(var(--scale)*20rem);
    margin-bottom: calc(var(--scale)*-15rem);
    cursor: pointer;
    z-index: 10001
}

.home_contact_bottom {
    position: absolute;
    bottom: calc(var(--scale)*-9rem);
    width: 100%;
    height: calc(var(--scale)*10rem);
    background-color: var(--theme_black);
    border-bottom-left-radius: calc(var(--scale)*10rem);
    border-bottom-right-radius: calc(var(--scale)*10rem);
    pointer-events: none;
    z-index: 1000
}

@media screen and (max-aspect-ratio:1/2) {
    .home_contact {
        --scale: 0.8
    }
}

@media screen and (max-aspect-ratio:3602879701896397/4503599627370496) {
    .home_contact_bottom {
        border-bottom-left-radius: calc(var(--scale)*7rem);
        border-bottom-right-radius: calc(var(--scale)*7rem)
    }
}

.home_bottom {
    box-sizing: border-box;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background-color: var(--theme_white);
    padding-top: calc(var(--scale_nums)*13rem);
    --scale_nums: 1
}

.home_bottom_messages {
    margin-bottom: calc(var(--scale_nums)*4rem)
}

.hbm_message {
    flex-direction: column;
    align-items: center;
    width: calc(var(--scale_nums)*18rem)
}

.hbm_message img {
    width: calc(var(--scale_nums)*5rem);
    height: calc(var(--scale_nums)*5rem);
    margin-bottom: calc(var(--scale_nums)*1rem)
}

.hbm_message p {
    text-align: center;
    font-family: zh;
    color: var(--theme_black);
    -webkit-user-select: all;
    -moz-user-select: all;
    user-select: all
}

.hbm_message p,
.hbm_message p span {
    font-size: calc(var(--scale_nums)*1rem)
}

.hbm_message p span {
    font-family: eng;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    margin-right: calc(var(--scale_nums)*.6rem)
}

.home_bottom_bottom {
    justify-content: space-between;
    width: 90%;
    border-bottom: calc(var(--scale_nums)*.15rem) solid var(--theme_black);
    padding-bottom: calc(var(--scale_nums)*.1rem);
    margin-bottom: calc(var(--scale_nums)*1rem)
}

.hbb_menu {
    justify-content: flex-start
}

.hbb_menu p {
    font-family: eng;
    font-size: calc(var(--scale_nums)*1rem);
    text-transform: uppercase;
    margin-right: calc(var(--scale_nums)*1.2rem);
    cursor: pointer
}

.hbb_link,
.hbb_menu p {
    color: var(--theme_black);
    transition: color .3s ease
}

.hbb_link {
    font-family: zh;
    font-size: calc(var(--scale_nums)*.8rem);
    letter-spacing: calc(var(--scale_nums)*.05rem);
    text-decoration: none
}

@media (hover:hover) {
    .hbb_link:hover,
    .hbb_menu p:hover {
        color: var(--theme_green)
    }
}

@media screen and (max-aspect-ratio:1/2) {
    .home_bottom {
        --scale_nums: 0.8
    }
}

@media screen and (max-aspect-ratio:3602879701896397/9007199254740992) {
    .hbm_message {
        width: calc(var(--scale_nums)*14rem)
    }
}

#videos {
    position: absolute;
    flex-direction: column;
    width: 100%;
    background-color: var(--theme_black)
}

.image_wave {
    filter: url(#videos_resources_wave_image)
}

.videos_header {
    --scale: 1;
    flex-direction: column;
    align-items: center;
    margin-bottom: calc(var(--scale)*3rem);
    margin-top: calc(var(--scale)*8rem)
}

.videos_header_title {
    justify-content: center;
    transform: scaleY(.8);
    overflow: hidden
}

.videos_header_title p {
    font-family: eng;
    font-size: calc(var(--scale)*18rem);
    color: var(--theme_white);
    letter-spacing: calc(var(--scale)*.8rem);
    line-height: calc(var(--scale)*19rem);
    text-transform: uppercase;
    transform: translateY(100%)
}

.videos_header_title_number {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: calc(var(--scale)*4rem);
    color: #00000000 !important
}

.videos_header_title_number:after {
    content: attr(number);
    position: absolute;
    font-family: eng;
    font-size: calc(var(--scale)*18rem);
    letter-spacing: calc(var(--scale)*.8rem);
    line-height: calc(var(--scale)*19rem);
    color: #00000000 !important;
    -webkit-text-stroke: calc(var(--scale)*.1rem) var(--theme_green)
}

.videos_header_types {
    justify-content: space-between;
    align-items: center
}

.videos_header_types p {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 calc(var(--scale)*1.5rem);
    font-family: eng;
    font-size: calc(var(--scale)*1.3rem);
    color: var(--theme_green);
    letter-spacing: calc(var(--scale)*.1rem);
    text-transform: uppercase;
    transform: translateX(-20%);
    opacity: 0
}

.videos_header_types p:after {
    content: "";
    position: relative;
    width: calc(var(--scale)*.3rem);
    height: calc(var(--scale)*.3rem);
    margin-left: calc(var(--scale)*3rem);
    border-radius: 50%;
    background-color: var(--theme_white)
}

.videos_header_types p:last-child:after {
    width: 0;
    height: 0;
    margin-left: 0
}

@media screen and (max-aspect-ratio:8106479329266893/9007199254740992) {
    .videos_header {
        --scale: 0.75
    }
}

@media screen and (max-aspect-ratio:3152519739159347/4503599627370496) {
    .videos_header {
        --scale: 0.8
    }
}

@media screen and (max-aspect-ratio:5854679515581645/9007199254740992) {
    .videos_header {
        --scale: 0.65;
        margin-top: calc(var(--scale)*12rem)
    }
}

@media screen and (max-aspect-ratio:1170935903116329/2251799813685248) {
    .videos_header {
        --scale: 0.5;
        margin-top: calc(var(--scale)*18rem)
    }
}

@media screen and (max-aspect-ratio:3602879701896397/9007199254740992) {
    .videos_header {
        --scale: 0.35;
        margin-top: calc(var(--scale)*24rem)
    }
}

.videos_coverbox {
    --scale: 1;
    display: grid;
    position: relative;
    justify-content: center;
    align-items: center;
    grid-template-columns: repeat(2, auto);
    margin-bottom: calc(var(--scale)*5rem)
}

.videos_coverbox_cover {
    position: relative;
    flex-direction: column;
    align-items: start;
    cursor: pointer;
    margin: calc(var(--scale)*6rem) calc(var(--scale)*3rem);
    visibility: hidden
}

.vcc_screen {
    position: relative;
    width: calc(40rem*var(--scale));
    height: calc(25rem*var(--scale));
    border-radius: 2em;
    overflow: hidden;
    margin-bottom: calc(var(--scale)*2.5rem);
    transition: transform .6s ease, border-radius .4s ease
}

.vcc_screen_lines,
.vcc_screen_nosign,
.vcc_screen_pictures,
.vcc_screen_texts {
    position: absolute;
    width: 100%;
    height: 100%;
    visibility: hidden
}

.vcc_screen_pictures {
    background-color: var(--theme_white);
    filter: grayscale(1);
    transition: filter .5s ease
}

.vcc_screen_pictures img {
    position: absolute;
    height: 100%
}

.vcc_screen_pictures_fault {
    filter: grayscale(0);
    transition: filter 0s ease
}

.vcc_screen_pictures_fault img:first-child {
    mix-blend-mode: darken;
    filter: url(#videos_resources_fillcolor_red)
}

.vcc_screen_pictures_fault img:nth-child(2) {
    mix-blend-mode: darken;
    filter: url(#videos_resources_fillcolor_lightblue)
}

.vcc_screen_pictures_fault img:nth-child(3) {
    mix-blend-mode: darken;
    filter: url(#videos_resources_fillcolor_deepblue)
}

.vcc_screen_pictures_wave img {
    animation: pictures_wave .1s linear infinite
}

@keyframes pictures_wave {
    0% {
        transform: translateY(-120%)
    }
    to {
        transform: translateY(120%)
    }
}

.vcc_screen_texts {
    justify-content: center;
    align-items: center;
    background-color: var(--theme_white)
}

.vcc_screen_texts p {
    position: absolute;
    font-family: eng;
    font-size: calc(var(--scale)*3.5rem);
    color: var(--theme_black);
    letter-spacing: calc(var(--scale)*.1rem);
    text-transform: uppercase;
    mix-blend-mode: darken
}

.vcc_screen_texts_fault p:after,
.vcc_screen_texts_fault p:before {
    content: "no signal";
    position: absolute;
    mix-blend-mode: darken
}

.vcc_screen_texts_fault p:after {
    color: #ff000080;
    transform: translateX(1%)
}

.vcc_screen_texts_fault p:before {
    color: #0000ff80;
    transform: translateX(-1%)
}

.vcc_screen_texts_shake p:nth-child(2) {
    color: red
}

.vcc_screen_texts_shake p:nth-child(3) {
    color: #002aff
}

.vcc_screen_texts_shake p:nth-child(4) {
    color: #00ff3c
}

.vcc_screen_lines rect {
    fill: var(--theme_black);
    opacity: .5;
    animation: rect_mov 1s linear infinite;
    animation-delay: calc(var(--i)*.1s);
    animation-play-state: paused
}

.vcc_screen_lines_wave rect {
    animation-play-state: running
}

@keyframes rect_mov {
    0% {
        transform: translateY(0)
    }
    to {
        transform: translateY(300%)
    }
}

.vcc_screen_nosign {
    transform: scale(1.5);
    filter: url(#videos_resources_wave_screen) grayscale(.4)
}

@media (hover:hover) {
    .videos_coverbox_cover:hover .vcc_screen_pictures {
        filter: grayscale(0)
    }
    .videos_coverbox_cover:hover .vcc_screen {
        transform: scale(.9);
        border-radius: 0
    }
}

.vcc_information {
    position: relative;
    display: flex;
    align-items: center;
    font-family: zh;
    font-size: calc(var(--scale)*1rem);
    color: var(--theme_white);
    letter-spacing: calc(var(--scale)*.2rem);
    margin-bottom: calc(var(--scale)*1rem);
    transition: -webkit-clip-path .3s ease .5s;
    transition: clip-path .3s ease .5s;
    transition: clip-path .3s ease .5s, -webkit-clip-path .3s ease .5s;
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%)
}

.vcc_information span {
    font-size: calc(var(--scale)*.8rem);
    margin: 0 calc(var(--scale)*1.2rem)
}

.vcc_information:after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--theme_green);
    transition: -webkit-clip-path .3s ease .8s;
    transition: clip-path .3s ease .8s;
    transition: clip-path .3s ease .8s, -webkit-clip-path .3s ease .8s
}

.vcc_information:after,
.vcc_information_show {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}

.vcc_information_show:after {
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%)
}

.vcc_name span {
    font-family: eng;
    font-size: calc(var(--scale)*3rem);
    color: var(--theme_green);
    margin-right: calc(var(--scale)*.05rem)
}

@media screen and (max-aspect-ratio:8106479329266893/4503599627370496) {
    .videos_coverbox {
        --scale: 0.8
    }
}

@media screen and (max-aspect-ratio:3/2) {
    .videos_coverbox {
        --scale: 1
    }
}

@media screen and (max-aspect-ratio:8106479329266893/9007199254740992) {
    .videos_coverbox {
        --scale: 0.75
    }
}

@media screen and (max-aspect-ratio:3152519739159347/4503599627370496) {
    .videos_coverbox {
        --scale: 1.45;
        grid-template-columns: repeat(1, auto)
    }
}

@media screen and (max-aspect-ratio:5854679515581645/9007199254740992) {
    .videos_coverbox {
        --scale: 1.15
    }
}

@media screen and (max-aspect-ratio:1170935903116329/2251799813685248) {
    .videos_coverbox {
        --scale: 0.85
    }
}

@media screen and (max-aspect-ratio:3602879701896397/9007199254740992) {
    .videos_coverbox {
        --scale: 0.55
    }
}

.videos_feeter {
    position: relative;
    width: 100%;
    margin-bottom: 3.5rem;
    padding-top: 3rem;
    overflow: hidden
}

.videos_feeter,
.videos_feeter_tv {
    flex-direction: column;
    align-items: center
}

.videos_feeter_tv {
    margin-bottom: 3rem;
    cursor: pointer
}

.videos_feeter_tv svg {
    width: 10rem;
    overflow: visible;
    transform: translateY(1%)
}

.videos_feeter_tv svg g {
    transform-origin: center;
    transform: translateY(0) rotate(3deg);
    animation: feeter_tv_g 3s ease infinite
}

.videos_feeter_tv svg polygon {
    fill: var(--theme_green);
    transform-origin: 457.39px 371.015px;
    animation: feeter_tv_polygon 2s ease-in-out infinite
}

@keyframes feeter_tv_g {
    0% {
        transform: translateY(0) rotate(3deg)
    }
    50% {
        transform: translateY(10%) rotate(-3deg)
    }
    to {
        transform: translateY(0) rotate(3deg)
    }
}

@keyframes feeter_tv_polygon {
    0% {
        transform: translateY(0)
    }
    25% {
        transform: translateY(-5%)
    }
    50% {
        transform: translateY(0)
    }
    75% {
        transform: translateY(-5%)
    }
}

.videos_feeter_tv p {
    font-family: eng;
    font-size: 4.5rem;
    color: var(--theme_green);
    letter-spacing: .2rem;
    text-transform: uppercase;
    transform-origin: bottom;
    transition: transform .5s ease
}

@media (hover:hover) {
    .videos_feeter_tv:hover p {
        transform: translateY(10%) scaleY(.95)
    }
}

.videos_feeter_information {
    justify-content: center;
    align-items: start;
    flex-wrap: wrap;
    margin: 0 1rem 10rem 1rem
}

.videos_feeter_information p {
    --scale: 1.2;
    width: calc(11rem*var(--scale));
    font-family: zh;
    font-size: calc(.7rem*var(--scale));
    color: var(--theme_white);
    line-height: calc(1.2rem*var(--scale));
    letter-spacing: calc(.1rem*var(--scale));
    text-align: start;
    margin: 1rem;
    transform-origin: top;
    transform: scale(calc(1/var(--scale)))
}

.videos_feeter_bottom {
    justify-content: center;
    align-items: center
}

.vfb_plus {
    width: .6rem;
    height: .12rem;
    margin: 0 2rem
}

.vfb_plus,
.vfb_plus:after {
    position: relative;
    background-color: var(--theme_white)
}

.vfb_plus:after {
    content: "";
    width: 100%;
    height: 100%;
    transform: rotate(90deg)
}

.vfb_time {
    flex-direction: column;
    margin: 0 3rem
}

.vfb_time p {
    font-family: eng;
    font-size: 1.5rem;
    color: var(--theme_white);
    letter-spacing: .1rem;
    text-transform: uppercase;
    margin-bottom: -.4rem
}

.vfb_time img {
    width: 8rem
}

.videos_videoview {
    position: fixed;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%
}

.videos_videoview_background {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #171717f7;
    opacity: 0;
    cursor: pointer
}

.videos_videoview_videobox {
    position: absolute;
    justify-content: center;
    align-items: center;
    width: 57.6rem;
    height: 32.4rem;
    -webkit-clip-path: polygon(0 0, 5% 0, 5% 0, 0 0);
    clip-path: polygon(0 0, 5% 0, 5% 0, 0 0);
    cursor: pointer
}

.videos_videoview_videobox_video {
    position: absolute;
    height: 100%;
    background-color: var(--theme_black)
}

.videos_videoview_videobox_mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--theme_green);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}

@media screen and (max-aspect-ratio:3/2) {
    .videos_videoview_videobox {
        width: 76.8rem;
        height: 43.2rem
    }
}

@media screen and (max-aspect-ratio:1/1) {
    .videos_videoview_videobox {
        width: 88.32vmin;
        height: 49.68vmin
    }
}

.videos_videoview_mousetip {
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    width: 5rem;
    padding: 1rem;
    background-color: var(--theme_green);
    border-radius: 50%;
    margin-left: -2.5rem;
    margin-top: -2.5rem;
    transform: scale(0);
    pointer-events: none
}

.videos_videoview_mousetip path {
    fill: var(--theme_black)
}

.vvm_icon,
.vvm_icon_left,
.vvm_icon_right,
.vvm_icon_right_down,
.vvm_icon_right_up {
    transform-origin: 250px 250px;
    transition: transform .3s ease-in-out
}

.videos_videoview_mousetip_shut .vvm_icon_left {
    transform: rotate(-45deg)
}

.videos_videoview_mousetip_shut .vvm_icon_right {
    transform: rotate(45deg)
}

.videos_videoview_mousetip_pause .vvm_icon_left {
    transform: translateX(-20%)
}

.videos_videoview_mousetip_pause .vvm_icon_right {
    transform: translateX(20%)
}

.videos_videoview_mousetip_play .vvm_icon {
    transform: scale(1.35)
}

.videos_videoview_mousetip_play .vvm_icon_left {
    transform: translateX(-6.5%) scaleY(.71)
}

.videos_videoview_mousetip_play .vvm_icon_right {
    transform: translateX(20%)
}

.videos_videoview_mousetip_play .vvm_icon_right_up {
    transform: rotate(-55deg)
}

.videos_videoview_mousetip_play .vvm_icon_right_down {
    transform: rotate(55deg)
}

#photos {
    position: absolute;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    height: 100dvh;
    overflow: hidden
}

.photos_checkbox,
.photos_photobox {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: scale(1.2);
    transition: transform .8s ease .1s
}

.photos_photobox {
    cursor: pointer
}

.photos_checkbox {
    justify-content: center;
    align-items: center;
    touch-action: none
}

.photos_checkbox_activated,
.photos_photobox_activated {
    transform: scale(1)
}

.photos_checkbox_mover {
    position: absolute;
    left: 0;
    top: 0
}

.photos_checkbox_line:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-width: calc(var(--scale)*.2px);
    border-style: solid;
    border-color: var(--theme_white);
    border-radius: 1.6vmin
}

.photos_checkbox_line_front:after {
    transform: scale(.92);
    opacity: .6
}

.photos_checkbox_line_after:after {
    transform: scale(.9);
    opacity: .4
}

.photos_checkbox_img {
    pointer-events: all
}

.photos_checkbox_content {
    position: absolute;
    flex-direction: column;
    align-items: center;
    margin-top: calc(var(--scale)*550px)
}

.pcc_name {
    margin-bottom: calc(var(--scale)*15px);
    margin-right: calc(var(--scale)*-3px);
    transition: transform .5s ease;
    transform: translateY(30%)
}

.pcc_name span {
    font-family: eng;
    font-size: calc(var(--scale)*35px);
    color: var(--theme_green);
    letter-spacing: calc(var(--scale)*3px);
    text-transform: uppercase;
    transition: opacity .2s ease;
    transition-delay: calc(var(--i)*1s);
    opacity: 0
}

.pcc_time {
    position: relative;
    letter-spacing: calc(var(--scale)*12px);
    margin-right: calc(var(--scale)*-12px);
    opacity: 0;
    transition: margin-right .5s ease, letter-spacing .5s ease, opacity .5s ease
}

.pcc_time,
.pcc_time:after,
.pcc_time:before {
    font-family: zh;
    font-size: calc(var(--scale)*18px);
    color: var(--theme_white)
}

.pcc_time:after,
.pcc_time:before {
    content: "+";
    position: absolute;
    transition: transform .5s ease
}

.pcc_time:after {
    right: 0;
    transform: translateX(calc(var(--scale)*32px))
}

.pcc_time:before {
    left: 0;
    transform: translateX(calc(var(--scale)*-32px))
}

.photos_checkbox_show .pcc_name {
    transform: translateY(0)
}

.photos_checkbox_show .pcc_name span {
    opacity: 1
}

.photos_checkbox_show .pcc_time {
    letter-spacing: calc(var(--scale)*8px);
    margin-right: calc(var(--scale)*-8px);
    opacity: 1
}

.photos_checkbox_show .pcc_time:after {
    transform: translateX(calc(var(--scale)*25px))
}

.photos_checkbox_show .pcc_time:before {
    transform: translateX(calc(var(--scale)*-25px))
}

.photos_draglines {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none
}

.photos_draglines p {
    font-family: eng;
    font-size: 2.5rem;
    color: var(--theme_black)
}

.photos_draglines svg {
    width: 1.8rem;
    height: 1.8rem
}

.photos_draglines svg line,
.photos_draglines svg polyline {
    fill: none;
    stroke: var(--theme_black);
    stroke-width: 7;
    stroke-linecap: round;
    stroke-linejoin: round
}

.photos_draglines_down,
.photos_draglines_up {
    position: absolute;
    width: 100%;
    height: 3.5rem;
    overflow: hidden
}

.photos_draglines_up {
    justify-content: start;
    top: 0;
    right: 3.5rem;
    transition: transform .8s ease .1s, right .8s ease .1s
}

.photos_draglines_down {
    justify-content: end;
    bottom: 0;
    left: 3.5rem;
    transition: transform .8s ease .1s, left .8s ease .1s
}

.photos_draglines_down>div,
.photos_draglines_up>div {
    align-items: center;
    height: 100%;
    background-color: var(--theme_green)
}

.photos_draglines_down>div div,
.photos_draglines_up>div div {
    align-items: center
}

.photos_draglines_up>div {
    justify-content: start;
    animation: draglines_up 8s linear infinite
}

.photos_draglines_up p {
    margin-right: 1rem
}

.photos_draglines_up svg {
    margin-right: 3rem;
    transform: rotate(180deg)
}

@keyframes draglines_up {
    to {
        transform: translateX(-100%)
    }
}

.photos_draglines_down>div {
    justify-content: end;
    animation: draglines_down 8s linear infinite
}

.photos_draglines_down p {
    margin-left: 1rem
}

.photos_draglines_down svg {
    margin-left: 3rem
}

@keyframes draglines_down {
    to {
        transform: translateX(100%)
    }
}

.photos_draglines_left,
.photos_draglines_right {
    position: absolute;
    flex-direction: column;
    width: 3.5rem;
    height: 100%;
    overflow: hidden
}

.photos_draglines_left {
    justify-content: start;
    top: 3.5rem;
    left: 0;
    transition: transform .8s ease .1s, top .8s ease .1s
}

.photos_draglines_right {
    justify-content: end;
    bottom: 3.5rem;
    right: 0;
    transition: transform .8s ease .1s, bottom .8s ease .1s
}

.photos_draglines_left>div,
.photos_draglines_right>div {
    flex-direction: column;
    align-items: center;
    width: 100%;
    background-color: var(--theme_green)
}

.photos_draglines_left>div div,
.photos_draglines_right>div div {
    flex-direction: column;
    align-items: center
}

.photos_draglines_left>div {
    justify-content: start;
    animation: draglines_left 8s linear infinite
}

.photos_draglines_left p {
    writing-mode: vertical-lr;
    margin-bottom: 1rem
}

.photos_draglines_left svg {
    margin-bottom: 3rem;
    transform: rotate(-90deg)
}

@keyframes draglines_left {
    to {
        transform: translateY(-100%)
    }
}

.photos_draglines_right>div {
    justify-content: end;
    animation: draglines_right 8s linear infinite
}

.photos_draglines_right p {
    writing-mode: vertical-lr;
    margin-top: 1rem
}

.photos_draglines_right svg {
    margin-top: 3rem;
    transform: rotate(90deg)
}

@keyframes draglines_right {
    to {
        transform: translateY(100%)
    }
}

.photos_draglines_hidden .photos_draglines_up {
    transform: translateY(-100%);
    right: 0
}

.photos_draglines_hidden .photos_draglines_down {
    transform: translateY(100%);
    left: 0
}

.photos_draglines_hidden .photos_draglines_left {
    transform: translateX(-100%);
    top: 0
}

.photos_draglines_hidden .photos_draglines_right {
    transform: translateX(100%);
    bottom: 0
}

.photos_draglines_hidden .photos_draglines_down>div,
.photos_draglines_hidden .photos_draglines_left>div,
.photos_draglines_hidden .photos_draglines_right>div,
.photos_draglines_hidden .photos_draglines_up>div {
    animation-play-state: paused
}

.photos_mousetip {
    position: fixed;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    width: 6rem;
    height: 6rem;
    background-color: var(--theme_green);
    border-radius: 50%;
    margin-left: -3rem;
    margin-top: -3rem;
    transform: scale(0) rotate(-180deg);
    pointer-events: none;
    z-index: 10000
}

.photos_mousetip_icon {
    position: absolute;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: var(--theme_black);
    stroke-width: 10;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .5s ease
}

.photos_mousetip_icon line,
.photos_mousetip_icon polyline {
    transition: stroke-dasharray .5s ease, stroke-dashoffset .5s ease, stroke-width .5s ease
}

.photos_mousetip_icon line:first-child {
    stroke-dasharray: 0 150 0;
    stroke-dashoffset: 10
}

.photos_mousetip_icon line:nth-child(2) {
    stroke-dasharray: 45 40 55
}

.photos_mousetip_icon polyline {
    stroke-dasharray: 0 0 70 0 0;
    stroke-dashoffset: 10
}

.photos_mousetip_shut .photos_mousetip_icon {
    transform: scale(.6)
}

.photos_mousetip_shut .photos_mousetip_icon line:first-child {
    stroke-width: 20;
    stroke-dasharray: 70 0 70;
    stroke-dashoffset: 0
}

.photos_mousetip_shut .photos_mousetip_icon line:nth-child(2) {
    stroke-width: 20;
    stroke-dasharray: 70 0 70
}

.photos_mousetip_shut polyline {
    stroke-dasharray: 0 40 0 40 0;
    stroke-dashoffset: 10
}

#contact {
    position: absolute;
    align-items: center;
    width: 100%;
    height: 100%;
    height: 100dvh;
    padding: 3rem
}

#contact,
.contact_form {
    box-sizing: border-box;
    justify-content: center;
    overflow: hidden
}

.contact_form {
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    width: 50rem;
    height: 45rem;
    padding-left: 8rem;
    background-color: var(--theme_green);
    border-top-left-radius: 5rem;
    border-bottom-left-radius: 5rem;
    z-index: 1
}

.contact_form_input,
.contact_form_submit,
.contact_form_subtitle,
.contact_form_title {
    width: 80%
}

.contact_form_title {
    font-family: eng;
    font-size: 4rem;
    letter-spacing: .1rem;
    text-transform: uppercase;
    margin-bottom: .2rem
}

.contact_form_subtitle,
.contact_form_title {
    color: var(--theme_black);
    white-space: nowrap
}

.contact_form_subtitle {
    font-family: zh;
    font-size: 1rem;
    letter-spacing: .05rem;
    margin-bottom: 3rem
}

.contact_form_input {
    flex-direction: column;
    margin-bottom: 2rem;
    transform: translateX(-150%)
}

.contact_form_input p {
    display: flex;
    align-items: end;
    font-family: zh;
    font-size: .9rem;
    color: var(--theme_black);
    letter-spacing: .15rem;
    line-height: .9rem;
    margin-bottom: .5rem;
    transition: color .3s ease
}

.contact_form_input p span {
    font-family: eng;
    font-size: 1rem;
    letter-spacing: .05rem;
    line-height: .9rem;
    text-transform: uppercase;
    margin-left: .4rem
}

.contact_form_input:hover p {
    color: var(--theme_white)
}

.contact_form_input input {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: 3.2rem;
    border: .25rem solid var(--theme_black);
    border-radius: 2rem;
    background-color: var(--theme_white);
    padding-left: 2rem;
    outline: none;
    font-family: zh;
    font-size: 1rem;
    color: var(--theme_black);
    letter-spacing: .05rem;
    cursor: pointer
}

.contact_form_submit {
    position: relative;
    justify-content: flex-start;
    margin-top: 1rem
}

.cfs_QR {
    flex-direction: column;
    align-items: center;
    margin-right: 2.5rem
}

.cfs_QR img {
    position: relative;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: .2rem
}

.cfs_QR p {
    font-family: zh;
    font-size: 1rem;
    color: var(--theme_black);
    letter-spacing: .1rem;
    transform-origin: top;
    transform: scale(.6)
}

.cfs_button {
    top: .4rem;
    right: 0;
    width: 5.2rem;
    height: 2rem;
    transform-origin: left;
    transform: scale(0);
    cursor: pointer
}

.cfs_button,
.cfs_button:after {
    position: absolute;
    justify-content: center;
    align-items: center;
    border: .25rem solid var(--theme_black);
    border-radius: 2rem
}

.cfs_button:after {
    content: "SUBMIT";
    display: flex;
    width: 100%;
    height: 100%;
    background-color: var(--theme_white);
    font-family: eng;
    font-size: 1.2rem;
    color: var(--theme_black);
    transform: translateY(-.4rem);
    transition: transform .3s ease
}

@media (hover:hover) {
    .cfs_button:hover:after {
        transform: translateY(0)
    }
}

.contact_animation {
    box-sizing: border-box;
    position: relative;
    width: 50rem;
    height: 45rem;
    margin-left: -.2rem;
    background-color: var(--theme_black);
    border: .2rem solid var(--theme_white);
    border-top-right-radius: 5rem;
    border-bottom-right-radius: 5rem;
    overflow: hidden;
    z-index: 0
}

@media screen and (max-aspect-ratio:7656119366529843/4503599627370496) {
    .contact_form_input,
    .contact_form_submit,
    .contact_form_subtitle,
    .contact_form_title {
        width: 90%
    }
}

@media screen and (max-aspect-ratio:3/2) {
    .contact_form_input,
    .contact_form_submit,
    .contact_form_subtitle,
    .contact_form_title {
        width: 80%
    }
}

@media screen and (max-aspect-ratio:1/1) {
    #contact {
        flex-direction: column-reverse
    }
    .contact_form {
        justify-content: flex-start;
        align-items: center;
        padding-left: 0;
        padding-top: 5rem;
        width: 55rem;
        height: 50rem;
        border-top-left-radius: 0;
        border-bottom-left-radius: 5rem;
        border-bottom-right-radius: 5rem
    }
    .contact_form_input,
    .contact_form_submit,
    .contact_form_subtitle,
    .contact_form_title {
        width: 35rem
    }
    .contact_animation {
        width: 55rem;
        height: 50rem;
        margin-left: 0;
        margin-bottom: -.3rem;
        border-bottom-right-radius: 0;
        border-top-left-radius: 5rem;
        border-top-right-radius: 5rem
    }
}

@media screen and (max-aspect-ratio:5404319552844595/9007199254740992) {
    #contact {
        padding: 3rem 1rem
    }
    .contact_form {
        width: 90%
    }
    .contact_form_input,
    .contact_form_submit,
    .contact_form_subtitle,
    .contact_form_title {
        width: 70%
    }
    .contact_animation {
        width: 90%
    }
}

#error {
    position: fixed;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: var(--theme_black);
    overflow: hidden
}

.error_background {
    position: absolute;
    width: 100%;
    height: auto
}

.error_background g {
    cursor: pointer
}

.error_background path {
    fill: none;
    stroke: var(--theme_white);
    stroke-width: 2px
}

.error_background text {
    font-family: eng;
    font-size: 27.7px;
    fill: var(--theme_white);
    letter-spacing: .1rem;
    transition: fill .5s ease
}

@media (hover:hover) {
    .error_background g:hover text {
        fill: var(--theme_green)
    }
}

@media screen and (max-aspect-ratio:1/1) {
    .error_background {
        width: auto;
        height: 100%
    }
}