* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

html,
body,
#app {
    font-family: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
    color: #fff;
    font-size: 48px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

#app {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

@media screen and (min-width: 520px) {
    #app {
        width: 520px;
        max-width: 100%;
        height: 100%;
        margin: 0 auto;
    }
}

img {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 .2rem;
    height: 1.2rem;
    top: 0;
    position: relative;
    left: 0;
    right: 0;
}

.logo {
    height: .5rem
}

.header-icons img {
    height: 24px;
    margin-left: 10px;
}

.page-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    filter: blur(8px);
    transition: background-image 0.8s ease;
    transform: scale(1.1);
}

.page-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
}

#dynamic-bg {
    transition: background-image 0.8s ease-in-out;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#dynamic-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: #000;
}

.bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: opacity 1s ease-in-out;
    opacity: 0;
}

.bg-layer.active {
    opacity: 1;
}

.banner-section {
    padding: 10px 0;
}

.section {
    margin: .13rem;
}

@media (min-height: 740px) {
    .section {
        margin: .3rem;
        /* margin-top: .8rem; */
    }

     .fontBottom {
        margin-top: .5rem !important;
    } 

    .bannerSwiper {
        margin-top: .5rem !important;
    }
}

.section-title {
    margin-bottom: 7px;
    display: block;
    width: 1rem;
}

.works-marquee {
    overflow: hidden;
    width: 100%;
    touch-action: pan-y;
}

.works-marquee img {
    height: 2.1rem;
}

.works-track {
    display: flex;
    gap: 10px;
    width: max-content;
}

.activitySwiper img {
    border-radius: 3px;
    height: 2.1rem;
}

.footer-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

.btnWrap {
    display: flex;
}

.bannerSwiper {
    padding: 30px 0;
    overflow: visible !important;
}

.bannerSwiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide-inner {
    width: 85%;
    aspect-ratio: 1 / 1;
    position: relative;
    transition: none;
    transform: scale(0.8);
    opacity: 0.5;
}

.swiper-slide-active .slide-inner {
    transform: scale(1.3);
    opacity: 1;
    z-index: 10;
}

.slide-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: .1rem;
    display: block;
}

.worksSwiper .swiper-wrapper,
.activitySwiper .swiper-wrapper {
    transition-timing-function: linear !important;
    pointer-events: none;
}

.worksSwiper .swiper-slide {
    width: 3.5rem;
}

.activitySwiper .swiper-slide {
    width: 5rem;
}

.worksSwiper img {
    width: 100%;
    height: 2.1rem;
    object-fit: cover;
    border-radius: .08rem;
    display: block;
}

.activitySwiper img {
    width: 100%;
    height: 1.7rem;
    object-fit: cover;
    border-radius: .08rem;
    display: block;
}

.fontBottom {
    position: relative;
    z-index: 10;
    text-align: center;
    margin-top: 2rem;
}

.fontBottom img {
    width: 3.4rem;
    height: .24rem;
    /* margin-top: .3rem; */
}

.footer-box {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    pointer-events: auto;
}

.center-btn {
    width: .8rem;
    height: .8rem;
    background: url("data:image/png;base64,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") no-repeat center;
    background-size: contain;
    position: absolute;
    /* bottom: .6rem; */
    left: 50%;
    transform: translateX(-50%);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.footer-box img:first-child {
    width: 50%;
    flex-shrink: 0;
}

.footer-box img:last-child {
    width: 50%;
    flex-shrink: 0;
}

.footer-box img:nth-child(2) {
    height: .8rem;
    width: .8rem;
    flex-shrink: 0;
    position: absolute;
    bottom: .6rem;
    left: 50%;
    transform: translate(-50%);
}


.footer-box img,
.footer-box div,
.btnWrap {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
    -webkit-user-drag: none;
}