@import url(./reset.css);
@import url(./base.css);
@import url(./font.css);
@import url(./flex.css);
@import url(./common.css);

/* page-header */
.page-header {
    height: var(--nav-header-h);
    position: fixed;
    inset: 0;
    z-index: 999;
    transition: .8s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.page-header.moved {
    transform: translateY(-100%);
}

.page-header.scrolled {
    background: #fff;
}

.page-header__content {
    --x: max(var(--space-16), calc((100vw - var(--max-content-width)) / 2));
    height: 100%;
    padding: 0 var(--x);
    position: relative;
}

.page-header__logo {
    height: calc(30 * var(--rpx));
    margin-right: calc(65 * var(--rpx));
    position: relative;
    z-index: 999;
}

.page-header.scrolled .page-header__logo img,
.page-header.open-nav-bar .page-header__logo img {
    filter: url(#primary-overlay);
}

.page-header__nav .nav {
    gap: 0 calc(40 * var(--rpx));
}

.page-header__nav .nav-item {
    padding: 0 calc(20 * var(--rpx));
    color: #fff;
    font-size: var(--font-size-18);
    transition: .3s linear;
}

.page-header.scrolled .page-header__nav .nav-item {
    color: #252525;
}

.page-header .page-header__nav .nav-item:hover {
    color: var(--primary);
}

.page-header .page-header__nav .nav-item .inner-text {
    width: 100%;
    display: block;
}

.page-header__fun {
    gap: 0 calc(10 * var(--rpx));
}

.page-header .contact-us__btn {
    background: #fff;
    border-radius: 999px;
    transition: .3s;
}

.page-header .contact-us__btn:hover {
    background-color: var(--primary);
    color: #fff;
}

.page-header.scrolled .contact-us__btn,
.page-header.open-nav-bar .contact-us__btn {
    background: var(--primary-foreground);
}

.page-header .contact-us__btn .inner-text {
    padding: 0 calc(24 * var(--rpx));
}

.page-header.scrolled .contact-us__btn .inner-text,
.page-header.open-nav-bar .contact-us__btn .inner-text {
    color: #fff;
}

.page-header .contact-us__btn .icon {
    --l: calc(30 * var(--rpx));
    width: var(--l);
    height: var(--l);
    border-radius: 50%;
    background: var(--primary-foreground);
    margin-right: 5px;
}

.page-header.scrolled .contact-us__btn .icon,
.page-header.open-nav-bar .contact-us__btn .icon {
    background: #fff;
}

.page-header .contact-us__btn .icon img {
    height: calc(100% - 12 * var(--rpx));
}

.page-header.scrolled .contact-us__btn .icon img,
.page-header.open-nav-bar .contact-us__btn .icon img {
    filter: url(#252525-overlay);
}

.page-header .lang-box {
    position: relative;
}

.page-header .lang-box__header {
    min-width: calc(80 * var(--rpx));
    color: #fff;
    height: 100%;
    border: 1px solid #fff;
    gap: 0 calc(6 * var(--rpx));
    border-radius: 999px;
    cursor: pointer;
}

.page-header.scrolled .lang-box__header,
.page-header.open-nav-bar .lang-box__header {
    color: #252525;
    border-color: #252525;
}

.page-header.scrolled .lang-box__header .icon,
.page-header.open-nav-bar .lang-box__header .icon {
    filter: url(#252525-overlay);
}

.page-header .lang-box__content {
    width: 100%;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 0 4px 4px rgba(0, 0, 0, .1);
    position: absolute;
    top: calc(50 * var(--rpx));
    left: 0;
    display: none;
}

.page-header .lang-box__content .lang {
    text-align: center;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    padding: calc(12 * var(--rpx)) 0;
    display: block;
}

.page-header .lang-box__content .lang:nth-last-of-type(1) {
    border-bottom: none;
}

.page-header .search-btn {
    border: 1px solid #fff;
}

.page-header.scrolled .search-btn,
.page-header.open-nav-bar .search-btn {
    border-color: var(--border);
}

.page-header .search-btn .icon {
    height: calc(16 * var(--rpx));
}

.page-header.scrolled .search-btn .icon,
.page-header.open-nav-bar .search-btn .icon {
    filter: url(#primary-overlay);
}

.page-header .nav-menu__icon {
    --bg: #fff;
    --border: var(--primary);
    padding: 8px 4px;
    background-color: var(--bg);
    border-radius: 2px;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, .4);
    display: flex;
    flex-direction: column;
    align-self: center;
    display: none;
    position: relative;
    z-index: 999;
}

.page-header.scrolled .nav-menu__icon,
.page-header.open-nav-bar .nav-menu__icon {
    --bg: var(--primary-foreground);
    --border: #fff
}

.page-header .nav-menu__icon>i {
    width: calc(32 * var(--rpx));
    height: calc(3 * var(--rpx));
    margin-bottom: calc(6 * var(--rpx));
    flex: 0 0 auto;
    background: var(--border);
    transition: all 0.5s cubic-bezier(0.15, 1, 0.336, 1);
}

.page-header .nav-menu__icon>i:last-of-type {
    margin-bottom: 0;
}

.page-header .nav-menu__icon.active>i:nth-of-type(1) {
    transform: translateY(300%) rotate(45deg);
}

.page-header .nav-menu__icon.active>i:nth-of-type(2) {
    transform: scaleX(0);
}

.page-header .nav-menu__icon.active>i:nth-of-type(3) {
    transform: translateY(-300%) rotate(-45deg);
}

/* page-main */
.page-main {
    min-height: 100dvh;
    min-height: 100vh;
}

/* page-footer */
.page-footer {
    color: rgba(255, 255, 255, .8);
    background: #0F0F0F;
    padding-top: calc(70 * var(--rpx));
}

.page-footer .page-footer__top {
    gap: calc(20 * var(--rpx));
}

.page-footer .page-footer__visual {
    gap: 0 calc(56 * var(--rpx));
}

.page-footer .page-footer__logo img {
    height: calc(20 * var(--rpx));
}

.page-footer .lang {
    gap: 0 calc(10 * var(--rpx));
}

.page-footer .lang-item {
    font-size: var(--font-size-14);
}

.page-footer .lang-item.active {
    color: #fff;
}

.page-footer .follow-box {
    gap: 0 calc(10 * var(--rpx));
}

.page-footer .follow-box__content {
    gap: 0 calc(10 * var(--rpx));
}

.page-footer .follow-box__item {
    --l: calc(40 * var(--rpx));
    width: var(--l);
    height: var(--l);
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 50%;
}

.page-footer .follow-box__item img {
    max-height: calc(16 * var(--rpx));
}

.page-footer .page-footer__main {
    border-bottom: 1px solid rgba(255, 255, 255, .5);
    padding-top: calc(56 * var(--rpx));
    padding-bottom: calc(108 * var(--rpx));
}

.page-footer .company-info__box {
    margin-right: auto;
}

.page-footer .company-info__box-header {
    gap: 0 calc(20 * var(--rpx));
    justify-content: flex-start;
    margin-bottom: calc(32 * var(--rpx));
}

.page-footer .company-info__box-header .icon {
    --l: calc(60 * var(--rpx));
    width: var(--l);
    height: var(--l);
}

.page-footer .company-info__box-section {
    color: #fff;
    font-size: var(--font-size-16);
}

.page-footer .company-info__box-section .title {
    font-weight: 300;
}

.page-footer .company-info__box-section .tel {
    font-size: var(--font-size-24);
    font-weight: 600;
    margin-top: 4px;
}

.page-footer .company-info__box-main .cell {
    align-items: flex-start;
}

.page-footer .company-info__box-main .cell+.cell {
    margin-top: calc(12 * var(--rpx));
}

.page-footer .company-info__box-main .cell-left {
    margin-right: calc(8 * var(--rpx));
}

.page-footer .company-info__box-main .cell-left .icon {
    width: calc(18 * var(--rpx));
}

.page-footer .company-info__box-main .cell-center {
    font-weight: 300;
    line-height: 1.5;
}

.page-footer .company-info__box-main .btn {
    min-width: calc(140 * var(--rpx));
    line-height: calc(40 * var(--rpx));
    color: rgba(255, 255, 255, .5);
    border-color: currentColor;
    margin: calc(32 * var(--rpx)) 0 0;
}

.page-footer .page-footer__nav .nav-content {
    gap: 0 calc(168 * var(--rpx));
}

.page-footer .page-footer__nav .nav-content .nav-item {
    flex: 0 0 auto;
}

.page-footer .page-footer__nav .nav-item__header {
    color: #fff;
    font-size: var(--font-size-18);
    margin-bottom: calc(30 * var(--rpx));
    position: relative;
}

.page-footer .page-footer__nav .nav-item__header::after {
    content: "";
    width: 0;
    height: 2px;
    background: #fff;
    transition: .3s linear;
    position: absolute;
    bottom: calc(-14 * var(--rpx));
    left: 0;
}

.page-footer .page-footer__nav .nav-item__header:hover::after {
    width: 100%;
}

.page-footer .page-footer__nav .nav-item__children {
    line-height: 2;
}

.page-footer .page-footer__bottom {
    padding: calc(36 * var(--rpx)) 0;
}

.page-footer .section-left,
.page-footer .section-right {
    gap: 0 calc(40 * var(--rpx));
}

@media screen and (max-width: 1024px) {
    .page-header .nav-menu__icon {
        display: flex;
    }

    .page-header .page-header__wrapper {
        --x: max(var(--space-16), calc((100vw - var(--max-content-width)) / 2));
        height: 100vh !important;
        height: 100dvh !important;
        padding: var(--nav-header-h) var(--x) 0;
        background-color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        display: none;
    }

    .page-header__nav .nav {
        display: block;
    }

    .page-header__nav .nav-item {
        color: #252525;
        padding: 12px 0;
        border-bottom: 1px solid rgba(0, 0, 0, .1);
    }

    .page-header__fun {
        padding: 12px;
    }

    .page-footer .page-footer__nav {
        display: none;
    }
}

@media screen and (max-width: 750px) {
    .page-footer .page-footer__visual {
        width: 100%;
    }

    .page-footer .follow-box {
        flex-direction: column;
        align-items: flex-start;
        gap: calc(12 * var(--rpx)) 0;
    }
}