@font-face {
    font-family: "SourceHanSansCN-Medium";
    src: url("../fonts/SourceHanSansCN-Medium.otf");
    font-family: "SourceHanSansCN-Bold";
    src: url("../fonts/SourceHanSansCN-Bold.otf");
    font-family: "SourceHanSansCN-Heavy";
    src: url("../fonts/SourceHanSansCN-Heavy.otf");
}

:root {
    --small: 500px;
    --ctn-width: calc((var(--small) / 2 - 1px) * 3 + 60px);
    --poster-ratio: calc(2/3);
}

body {
    margin: 0;
    color: white;
    background-color: rgba(0,0,0,0.9);
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
    -webkit-appearance: none;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -moz-appearance: none;
    -moz-text-size-adjust: 100%;
}

#root {
    letter-spacing: 0.05em;
    word-wrap: break-word;
    word-break: break-all;
    font-family: sans-serif;
    font-size: calc(10px + 1.5vmin);
}

strong {
    font-weight: 800;
}

.content {
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    background-color: rgba(15,15,18,0.9);
    overflow: hidden;
}

.ctn-width {
    width: var(--ctn-width);
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 900px) {
    :root {
        --ctn-width: calc(var(--small));
    }
}

@media (max-width: 500px) {
    :root {
        --ctn-width: 100vw;
    }
}

@media (max-width: 200px) {
    :root {
        --ctn-width: 200px;
    }
}

.title {
    width: 100%;
    height: 100vh;
    height: calc(100vh - var(--vh-offset, 0px));
    min-height: 500px;
    max-height: 300vw;
    position: relative;
    text-align: center;
    text-align: -webkit-center;
    text-align: -moz-center;
}

.title-image {
    background-image: url(title-image.jpg);
    background-position: center;
    background-size: cover;
    object-fit: cover;
    position: fixed;
    z-index: -3;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: calc(100vh - var(--vh-offset, 0px));
    -webkit-transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    -webkit-transition-duration: 0.2s; /* Safari */
    -moz-animation-duration: 0.2s;
    transition-duration: 0.2s;
}

.title-image-cover {
    background: radial-gradient(rgba(0,0,0,0), rgba(0,0,0,0.12)),linear-gradient(to bottom,rgba(0,0,0,0.06),rgba(0,0,0,0.12));
    background-size: cover;
    position: fixed;
    z-index: -2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: calc(100vh - var(--vh-offset, 0px));
}

.title-carousel {
    position: fixed;
    z-index: -3;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.title-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: calc(100vh - var(--vh-offset, 0px));
}

.carousel-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: calc(100vh - var(--vh-offset, 0px));
}

.ant-carousel {
}

.ant-carousel .slick-slide {
    display: inline-block;
    text-align: center;
    height: 100vh;
    line-height: 100vh;
    overflow: hidden;
}

.ant-carousel .slick-slide h3 {
    color: #fff;
}

.title-middle {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-55%);
    text-shadow: 0 6px 16px rgba(0,0,0,0.08),0 9px 29px rgba(0,0,0,0.05),0 12px 48px rgba(0,0,0,0.03);
}

.title-bottom {
    position: absolute;
    width: 100%;
    bottom: 1em;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    text-shadow: 0 6px 16px rgba(0,0,0,0.08),0 9px 29px rgba(0,0,0,0.05),0 12px 48px rgba(0,0,0,0.03);
}

.title-bottom-text {
    font-size: 0.7em;
    line-height: 1.6em;
}

.title-bottom-rad {
    height: 10em;
    width: 100%;
    background: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.3));
    position: absolute;
    bottom: 0;
    left: 0;
    pointer-events: none;
}

.title-text {
    font-size: 3em;
    font-family: 'SourceHanSansCN-Bold', sans-serif;
    font-weight: bolder;
    letter-spacing: 0.1em;
    line-height: 1.3em;
}

.title-sub {
    font-family: 'SourceHanSansCN-Medium', sans-serif;
    font-weight: bold;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

.title-h2 {
    text-align: center;
    margin: 3em 0;
    box-sizing: border-box;
}

.title-h2-text {
    font-family: 'SourceHanSansCN-Bold', sans-serif;
    font-size: 2em;
    font-weight: bolder;
    letter-spacing: 0.05em;
}

.title-h2-sub {
    margin: 0.5em 0;
    opacity: 0.5;
}

#header {
    -moz-transition: background-color 0.2s ease;
    -webkit-transition: background-color 0.2s ease;
    -ms-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    background-color: rgba(0,0,0,0.7);
    height: 2em;
    left: 0;
    line-height: 2em;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
    border-bottom: solid 1px rgba(255,255,255,0.4);
}

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

#logo {
    font-family: 'SourceHanSansCN-Medium', sans-serif;
    font-weight: bold;
    text-align: center;
    text-align: -webkit-center;
    text-align: -moz-center;
    font-size: 0.85em;
    opacity: 0.8;
    -webkit-transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    -webkit-transition-duration: 0.2s; /* Safari */
    -moz-animation-duration: 0.2s;
    transition-duration: 0.2s;
}

#logo:hover {
    opacity: 1;
}

.title-btn-ctn {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: -0.5em;
}

.title-btn-ctn .btn {
    margin-bottom: 0.5em;
    margin-left: 1em;
    margin-right: 1em;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08),0 9px 29px rgba(0,0,0,0.05),0 12px 48px rgba(0,0,0,0.03);

}

#cuc {
    margin: 3em 0;
    text-align: center;
    text-align: -webkit-center;
    text-align: -moz-center;
    align-items: center;
}

.svg-cuc-ctn, .svg-anima-ctn {
    opacity: 0.5;
    vertical-align: middle;
    display: inline-block;
    width: calc(0.2 * var(--ctn-width));
    -webkit-transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    -webkit-transition-duration: 0.2s; /* Safari */
    -moz-animation-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-appearance: none;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -moz-appearance: none;
    -moz-text-size-adjust: 100%;
}

.svg-gun-ctn {
    opacity: 0.5;
    vertical-align: middle;
    display: inline-block;
    height: calc(0.2 * var(--ctn-width));
    margin: 0 calc(0.1 * var(--ctn-width));
    -webkit-transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    -webkit-transition-duration: 0.2s; /* Safari */
    -moz-animation-duration: 0.2s;
    transition-duration: 0.2s;
}

.svg-gun {
    height: 100%;
}

#desc .h {
    font-family: 'SourceHanSansCN-Medium', sans-serif;
    font-weight: bold;
    text-align: center;
    text-align: -webkit-center;
    text-align: -moz-center;
    opacity: 0.5;
}

#desc .p {
    padding: 0 35px;
    margin-top: 2em;
    opacity: 0.5;
    font-size: 0.75em;
}

#footer {
    background-color: rgba(0,0,0,0.36);
    margin-top: 3em;
    font-size: 0.6em;
    color: rgba(255,255,255,0.5);
}

#footer a {
    text-decoration: none;
    box-shadow: none;
}

#footer a:hover {
    text-decoration: underline;
}

.footer-content {
    padding: 3em 3em;
}

.qr-image {
    margin-top: 3em;
    background-position: center;
    background-size: cover;
    width: calc(var(--ctn-width) / 3);
    height: calc(var(--ctn-width) / 3);
    -webkit-transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    -webkit-transition-duration: 0.2s; /* Safari */
    -moz-animation-duration: 0.2s;
    transition-duration: 0.2s;
}

.center {
    width: 100%;
    text-align: center;
    text-align: -webkit-center;
    text-align: -moz-center;
}

@media (max-width: 900px) {
    .qr-image {
        width: calc(var(--ctn-width) / 2);
        height: calc(var(--ctn-width) / 2);
    }
}