/* CSS Document */


/*.product-info{background: #000;}*/

footer {
    padding-left: 5%;
    padding-right: 5%;
}

header {
    /*
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 99;
    height: 70px;
    */
}

body {
    min-width: 1px;
}

.product-info .page {
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.product-info .page iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    opacity: 0;
}

.page-ban {
    position: relative;
    z-index: 1;
    background-color: #060002;
}

.page-ban .page-1 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.page-1,
.page-2,
.page-3,
.page-4,
.page-5,
.page-6,
.page-9 {
    padding-top: 70px;
}


/*.page-1{}*/

@media(min-width:1081px) {
    .page-1 .logo {
        left: 1.38rem;
        width: 7.01rem;
        top: 2.24rem!important;
    }
    .page-1 .up {
        top: 0;
        right: 1.14rem;
        height: 61.5625vh;
        left: auto!important;
    }
    .page-1 .down {
        bottom: 0;
        right: 3.7rem;
        height: 53.229vh;
        left: auto!important;
    }
    .page-1 .up img,
    .page-1 .down img {
        max-width: none;
        width: auto;
        height: 100%;
    }
}

@media(max-width:1440px) {
    .page-1 .logo {
        left: 0;
    }
}

@media(max-width:1080px) {
    .page-1 .logo {
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        z-index: 1;
    }
    .page-1 .wap {
        position: absolute;
        z-index: 10;
        left: 0;
        width: 100%;
        top: 35.207vh;
        height: 62.069vh;
    }
    .page-1 .up {
        right: 0;
        top: 0;
        width: 6.98rem;
        z-index: 3;
    }
    .page-1 .down {
        left: 0;
        top: 0;
        width: 6.17rem;
    }
}

.page-2 {
    /*background: url("../images/phantom-x/page-2/bg.jpg") no-repeat center top;background-size: cover;*/
    background-color: #000;
    z-index: 1;
}

.page-2>* {
    position: absolute;
}

.page-2 .txt {
    color: #fff;
}

.page-2 .t-2 {
    margin-top: 0.28rem;
}

.page-2 .video {
    width: 8.94rem;
    height: 100vh;
    top: 0;
    text-align: center;
    left: 1.41rem;
}

.page-2 .video img {
    height: 100%;
}

@media(min-width:1081px) {
    .page-2 .txt {
        top: 50%;
        transform: translateY(-50%);
        right: 1.84rem;
    }
}

@media(max-width:1080px) {
    .page-2 .txt {
        left: 0;
        width: 100%;
        text-align: center;
        top: 15.805vh;
        z-index: 10;
    }
    .page-2 .t-2 {
        font-family: 'hgsn-3-r';
    }
    .page-2 .video {
        height: 80vh;
        top: 20vh;
    }
}

.page-3 .pic {
    position: relative;
    overflow: hidden;
}

.page-3 .pic figure {
    position: absolute;
}

.page-3 .pic figure video {
    width: 100%;
}

.page-3 .pic figure>img {
    position: relative;
    z-index: 3;
}

.page-3 .video {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    overflow: hidden;
    border-radius: 0.6rem;
}

.page-3 .t-1 {
    margin-bottom: 1em;
}

.page-3 dd {
    margin-bottom: 0.2rem;
    background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 45%, rgba(255, 255, 255, 1) 55%, rgba(255, 255, 255, 0) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 45%, rgba(255, 255, 255, 1) 55%, rgba(255, 255, 255, 0) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 45%, rgba(255, 255, 255, 1) 55%, rgba(255, 255, 255, 0) 100%);
}

.page-3 dd aside.f-b {
    margin-bottom: 0.1rem;
}

.page-3 dd span.f-b {
    margin-right: 0.12rem;
}

@media(min-width:1081px) {
    .page-3 {
        background: #eee;
        background: -moz-linear-gradient(top, #ffffff 0%, #eeeeee 100%);
        background: -webkit-linear-gradient(top, #ffffff 0%, #eeeeee 100%);
        background: linear-gradient(to bottom, #ffffff 0%, #eeeeee 100%);
    }
    .page-3 .ytable-cell {
        width: 50%;
    }
    .page-3 .pic {
        height: 100vh;
    }
    .page-3 .txt {
        padding-left: 0.6rem;
    }
    .page-3 dd {
        padding: 0.32rem 0 0 0.26rem;
        float: left;
        width: 3rem;
        height: 1.2rem;
        margin-right: 0.2rem;
        font-size: 0.24rem;
    }
    .page-3 dd .f-b {
        font-size: 0.28rem;
    }
    .page-3 .pic figure {
        left: 14.583%;
        width: 65.834%;
        bottom: -2.84rem;
    }
}

@media(max-width:1080px) {
    .page-3 {
        background: #eee;
    }
    .page-3 .ytable,
    .page-3 .ytable-cell {
        display: block;
    }
    .page-3 .ytable {
        padding-top: 11vh;
        width: auto;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .page-3 .t-1 {
        text-transform: uppercase;
        text-align: center;
    }
    .page-3 dl {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .page-3 dd {
        font-size: 0.4rem;
        height: 2.5rem;
        width: 4.8rem;
        text-align: center;
        padding-top: 0.56rem;
    }
    .page-3 dd .f-b {
        font-size: 0.6rem;
    }
    .page-3 dd aside.f-b {
        margin-bottom: 0.25rem;
    }
    .page-3 .ytable-cell:nth-child(2) {}
    .page-3 .pic {
        position: absolute;
        bottom: 0;
        left: 7.5%;
        width: 85%;
        height: 44.081vh;
    }
    .page-3 .pic figure {
        left: 0;
        width: 100%;
        top: 0;
    }
    .page-3 .video {
        border-radius: 1rem;
    }
}

.page-4 {
    background: url(../images/phantom-x/page-4/bg.jpg) no-repeat center center;
    background-size: cover;
}

.page-4 .txt {
    padding-top: 6.208vh;
    text-align: center;
}

.page-4 .t-1 {
    margin-bottom: 0.8333em;
    text-transform: uppercase;
}

.page-4 .t-2 {
    margin-bottom: 2.2727em;
}

.page-4 .video {
    max-width: 1100px;
}

@media(min-width:1081px) {}

@media(max-width:1080px) {
    .page-4 {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .page-4 .video {
        overflow: hidden;
    }
    .page-4 .video img {
        width: 120%;
        margin-left: -10%;
        max-width: none;
    }
    .page-4 .txt {
        width: 90%;
        margin: 0 auto;
        padding: 0;
    }
    .page-4 .t-1 {
        padding: 0 11%;
        line-height: 1.208;
    }
    .page-4 .t-2 {
        font-size: 0.6rem;
        line-height: 1.1667
    }
}

.page-5 {
    background: #fff;
}

.page-5 .t-1 {
    margin-bottom: 0.27rem;
}

@media(min-width:1081px) {
    .page-5 {
        display: flex;
        align-items: center;
    }
    .page-5>* {
        width: 50%;
    }
    .page-5 .txt {
        height: 100%;
        display: flex;
        align-items: center;
    }
    .page-5 .txt .inner {
        opacity: 0;
        margin-top: -50px;
        transition: 1s ease-out;
    }
    .page-5 .txt .inner.ani-show {
        opacity: 1;
        margin-top: 0;
    }
    .page-5 .pic figure {
        position: absolute;
        left: -1.3rem;
        width: 65.61%;
        bottom: -3.54rem;
    }
}

@media(max-width:1080px) {
    .page-5 .txt {
        left: 0;
        text-align: center;
        position: absolute;
        bottom: 66.477vh;
        padding-bottom: 7.386vh;
        width: 100%;
    }
    .page-5 .t-1 {
        padding: 0 10%;
        line-height: 1.166;
    }
    .page-5 .t-2 {
        font-family: 'hgsn-3-r';
    }
    .page-5 .pic {
        position: absolute;
        height: 66.477vh;
        left: 0.49rem;
        width: 100%;
        bottom: 0;
        overflow: hidden;
    }
    .page-5 .pic figure {
        width: 116.667%;
    }
}

.page-6 {
    /*background: url(../images/phantom-x/page-6/bg.jpg) no-repeat center center;background-size: cover;*/
    color: #fff;
    background: #000;
}

.page-6 .t-1 {
    text-transform: uppercase;
    margin-bottom: 0.667em;
}

.page-6 .video {
    text-align: center;
}

.page-6 .video img {
    height: 100%;
}

@media(min-width:1081px) {
    .page-6 {
        display: flex;
        align-items: center;
    }
    .page-6>* {
        width: 50%;
    }
    .page-6 .txt {
        display: flex;
        justify-content: flex-end;
    }
    .page-6 .txt .inner {
        transform: translateX(-50px);
        transition: 1s ease-in-out;
        opacity: 0;
    }
    .page-6 .txt .inner.ani-show {
        transform: translateX(0);
        opacity: 1;
    }
    .page-6 .video {
        height: 100%;
    }
    .page-6 .video img {
        margin-top: 20%;
    }
}

@media(max-width:1080px) {
    .page-6 .txt {
        position: absolute;
        top: 70px;
        margin-bottom: 6.818vh;
        left: 0;
        width: 100%;
        text-align: center;
    }
    .page-6 .video {
        position: absolute;
        bottom: 0;
        height: 65%;
        width: 80%;
        left: 10%;
        overflow: hidden;
    }
    .page-6 .video img {
        height: 138%;
    }
    .page-6 .t-1 {
        margin-bottom: 0.4em;
    }
    .page-6 .t-2 {
        font-size: 0.6rem;
        padding: 0 9%;
        line-height: 1.2;
    }
    .page-6 .t-2 span {
        font-size: 0.72rem;
    }
}

.page-7 .t-1 {
    padding-top: 10.417vh;
    text-align: center;
    margin-bottom: 0.5833em;
}

.page-7 li .pic {
    text-align: center;
}

.page-7 li .pic .inner {
    position: relative;
}

.page-7 li .pic figure {
    margin-top: 1em;
}

.page-7 li .bg-img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: -1;
}

@media(min-width:1081px) {
    .page-7 li {
        float: left;
        width: 50%;
    }
    .page-7 li:nth-child(1) {
        padding-right: 1.54rem;
    }
    .page-7 li:nth-child(2) {
        padding-left: 1.54rem;
    }
    .page-7 li .bg-img {
        width: 7.4rem;
    }
    .page-7 li:nth-child(1) .bg-img {
        right: 0.62rem;
    }
    .page-7 li:nth-child(2) .bg-img {
        left: 0.62rem;
    }
    .page-7 li .pic {
        width: 4.84rem;
    }
    .page-7 li:nth-child(1) .pic {
        float: right;
    }
}

@media(max-width:1080px) {
    .page-7 {
        height: auto!important;
        padding: 2rem 0 0.68em 0;
    }
    .page-7 .t-1 {
        padding: 0 5%;
        margin-bottom: 1.4rem;
    }
    .page-7 .t-1 span {
        display: none;
    }
    .page-7 li {
        margin-bottom: 1.2rem;
    }
    .page-7 li .bg-img {
        width: 100%;
    }
    .page-7 li .pic .inner>picture img {
        width: 5.1rem;
        margin: 0 auto;
    }
    .page-7 li .pic figure {
        text-transform: uppercase;
    }
}

.page-8 {
    background: url(../images/phantom-x/page-8/bg.jpg) no-repeat center center;
    background-size: cover;
}

.page-8 .pic {
    position: absolute;
    bottom: 0;
}

.page-8 .txt {
    color: #fff;
}

.page-8 .txt .t-1 {
    line-height: 1.25;
    margin-bottom: 0.4583em;
}

@media(min-width:1081px) {
    .page-8 .pic {
        height: 72.396vh;
        left: 0;
        width: 100%;
        text-align: center;
    }
    .page-8 .txt {
        width: 50%;
        display: flex;
        align-items: center;
        height: 100%;
        padding-left: 3rem;
    }
    .page-8 .pic img {
        height: 100%;
    }
}

@media(max-width:1080px) {
    .page-8 {
        background-image: url(../images/phantom-x/page-8/1080/bg.jpg);
    }
    .page-8 .pic {
        width: 5.89rem;
        left: 2.58rem;
    }
    .page-8 .txt {
        text-align: center;
        padding-top: 2rem;
    }
    .page-8 .t-1 br:nth-child(2) {
        display: none;
    }
    .page-8 .t-2 {
        font-family: 'hgsn-3-r';
    }
}

.page-9 {
    align-items: center;
    background-color: #000;
    color: #fff;
}

.page-9>.t-1 {
    text-align: center;
    padding-top: .8rem;
    text-transform: uppercase;
    display: block;
}

.page-9 .pic {
    position: absolute;
    bottom: 0;
    height: 74.48vh;
    left: 0;
    width: 100%;
}

.page-9 .tip .t-1 {
    line-height: 1.2;
}

.page-9 .tip aside span {
    display: block;
}

.page-9 .tip .t-2 {
    white-space: nowrap;
}

.page-9 .tip>*,
.page-9 .tip {
    position: absolute;
}

@media(min-width:1081px) {
    .page-9 .pic {
        padding: 0 2.3rem;
        text-align: center;
    }
    .page-9 .pic ul {
        display: flex;
        height: 100%;
        justify-content: center;
        align-items: flex-end;
    }
    .page-9 .pic li {
        position: relative;
    }
    .page-9 .pic li:nth-child(1) {
        margin-right: 1.77rem;
    }
    .page-9 .pic li:nth-child(2) {
        margin-left: 1.46rem;
    }
    .page-9 .pic li:nth-child(1) img {
        width: 4.9rem;
    }
    .page-9 .pic li:nth-child(2) img {
        width: 4.8rem;
    }
    .page-9 .tip {
        width: 0.14rem;
        height: 0.14rem;
        border: solid 0.03rem #ffffff;
        border-radius: 50%;
        text-align: left;
    }
    .page-9 .tip-1 {
        left: 34.4%;
        top: 16%;
    }
    .page-9 .tip-2 {
        left: 34.4%;
        top: 37%;
    }
    .page-9 .tip-3 {
        left: 48%;
        top: 13%;
    }
    .page-9 .tip-4 {
        left: 54%;
        top: 31%;
    }
    .page-9 .tip-5 {
        left: 48%;
        top: 44%;
    }
    .page-9 .tip-6 {
        left: 59%;
        top: 3.5%;
    }
    .page-9 .tip-7 {
        left: 12.5%;
        top: 9.5%;
    }
    .page-9 .tip-8 {
        left: 23.5%;
        top: 9.5%;
    }
    .page-9 .tip .line {
        border: 2px solid #fff;
    }
    .page-9 .tip-1 .line {
        width: 1.1rem;
        height: 0.4rem;
        bottom: 100%;
        right: 50%;
        border-left: 0;
        border-bottom: 0;
        margin-right: -1px;
    }
    .page-9 .tip-1 aside {
        right: 1.19rem;
        top: -0.68rem;
    }
    .page-9 .tip-2 .line {
        width: 1.1rem;
        height: 1.35rem;
        border-left: 0;
        border-top: 0;
        right: 50%;
        top: 100%;
        margin-right: -1px;
    }
    .page-9 .tip-2 aside {
        right: 1.28rem;
        top: 0.76rem;
    }
    .page-9 .tip-3 .line {
        height: 0.2rem;
        width: 1.45rem;
        left: 50%;
        margin-left: -1px;
        bottom: 100%;
        border-right: 0;
        border-bottom: 0;
    }
    .page-9 .tip-3 aside {
        left: 1.55rem;
        top: -0.56rem;
    }
    .page-9 .tip-4 .line {
        width: 1.1rem;
        left: 100%;
        top: 50%;
        height: 0.2rem;
        margin-top: -1px;
        border-right: 0;
        border-left: 0;
        border-bottom: 0;
    }
    .page-9 .tip-4 aside {
        left: 1.26rem;
        top: 0;
        margin-top: -0.34rem;
    }
    .page-9 .tip-5 .line {
        width: 1.45rem;
        top: 100%;
        left: 50%;
        margin-left: -1px;
        height: 0.86rem;
        border-top: 0;
        border-right: 0;
    }
    .page-9 .tip-5 aside {
        left: 1.55rem;
        top: 100%;
        margin-top: 0.48rem;
    }
    .page-9 .tip-7 .line,
    .page-9 .tip-6 .line,
    .page-9 .tip-8 .line {
        width: 0.5rem;
        height: 0.5rem;
        top: 100%;
        border-top: 0;
    }
    .page-9 .tip-6 .line,
    .page-9 .tip-8 .line {
        border-right: 0;
        left: 50%;
        margin-left: -1px;
    }
    .page-9 .tip-6 aside,
    .page-9 .tip-8 aside {
        left: 0.6rem;
        top: 0;
        margin-top: 0.27rem;
    }
    .page-9 .tip-7 .line {
        right: 50%;
        margin-right: -1px;
        width: 1rem;
        border-left: 0;
    }
    .page-9 .tip-7 aside {
        left: -1.7rem;
        top: 0;
        margin-top: 0.2rem;
    }
}

@media(max-width:1080px) {
    .page-9 .pic {
        height: 78.864vh;
    }
    .page-9 .pic li {
        position: absolute;
    }
    .page-9 .pic li:nth-child(1) {
        width: 4.89rem;
        top: 0;
        left: 1.78rem;
    }
    .page-9 .pic li:nth-child(2) {
        width: 4.8rem;
        top: 43.66%;
        right: 1.4rem;
    }
    .page-9 .tip {
        border: 1px solid #fff;
    }
    .page-9 .tip-1,
    .page-9 .tip-2 {
        height: 0.49rem;
        width: 1.4rem;
    }
    .page-9 .tip-3,
    .page-9 .tip-5 {
        height: 0.87rem;
        width: 2.98rem;
    }
    .page-9 .tip-4 {
        height: 0.02rem;
        width: 2.75rem;
    }
    .page-9 .tip-7 {
        height: 0.89rem;
        width: 3.42rem;
    }
    .page-9 .tip-8 {
        width: 3.6rem;
        height: 2.75rem;
    }
    .page-9 .tip-6 {
        width: 5.31rem;
        height: 5.32rem;
    }
    .page-9 .tip-1 {
        border-bottom: 0;
        border-left: 0;
        left: 7%;
        top: 7%;
    }
    .page-9 .tip-2 {
        border-top: 0;
        border-left: 0;
        left: 7%;
        top: 25%;
    }
    .page-9 .tip-3 {
        border-bottom: 0;
        border-right: 0;
        left: 49%;
        top: 4%;
    }
    .page-9 .tip-4 {
        border-left: 0;
        border-bottom: 0;
        border-right: 0;
        left: 54%;
        top: 21.5%;
    }
    .page-9 .tip-5 {
        border-top: 0;
        border-right: 0;
        left: 49%;
        top: 29%;
    }
    .page-9 .tip-6,
    .page-9 .tip-7,
    .page-9 .tip-8 {
        border-top: 0;
        border-left: 0;
    }
    .page-9 .tip-7 {
        top: 7%;
        right: 86%;
    }
    .page-9 .tip-8 {
        top: 7%;
        right: 75%;
    }
    .page-9 .tip-6 {
        right: 39.4%;
        top: 2.3%;
    }
    .page-9 .tip .line {
        width: 0.14rem;
        height: 0.14rem;
        border-radius: 50%;
        background: #fff;
    }
    .page-9 .tip-1 .line {
        top: -0.07rem;
        left: 0;
    }
    .page-9 .tip-2 .line {
        bottom: -0.07rem;
        left: 0;
    }
    .page-9 .tip-3 .line {
        top: -0.07rem;
        left: 100%;
    }
    .page-9 .tip-4 .line {
        top: -0.07rem;
        left: 100%;
    }
    .page-9 .tip-5 .line {
        bottom: -0.07rem;
        left: 100%;
    }
    .page-9 .tip-6 .line,
    .page-9 .tip-7 .line,
    .page-9 .tip-8 .line {
        bottom: -0.07rem;
        right: 100%;
    }
    .page-9 .tip-1 aside,
    .page-9 .tip-2 aside {
        right: 100%;
    }
    .page-9 .tip-1 aside {
        top: -0.52rem;
        margin-right: 0.2rem;
    }
    .page-9 .tip-2 aside {
        top: -0.02rem;
        margin-right: 0.4rem;
    }
    .page-9 .tip-3 aside,
    .page-9 .tip-4 aside,
    .page-9 .tip-5 aside {
        left: 100%;
        margin-left: 0.3rem;
    }
    .page-9 .tip-3 aside,
    .page-9 .tip-4 aside {
        top: -0.2rem;
    }
    .page-9 .tip-5 aside {
        top: 0.6rem;
    }
    .page-9 .tip .t-2 {
        font-size: 0.3rem;
    }
    .page-9 .tip .t-1 {
        font-size: 0.5rem;
    }
    .page-9 .tip-6 aside,
    .page-9 .tip-7 aside,
    .page-9 .tip-8 aside {
        left: -1.2rem;
        margin-top: -0.2rem;
        top: 100%;
    }
    .page-9 .tip-8 aside {
        left: -1.55rem;
    }
    .page-9 .tip-6 aside {
        left: -1.55rem;
        width: 2rem;
        margin-top: -0.4rem;
    }
}


/* page-10 */

.page-10 {
    background: #fff;
    /* 900 */
}

.page-10 .content {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 70px;
}

.page-10 .img {
    width: 100%;
    text-align: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-10 .img .img-bg {
    position: relative;
}

.page-10 .img .img-bg .animate-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 99%;
    height: 100%;
    z-index: 5;
    border-radius: 2.08333333vw;
    overflow: hidden;
}

.page-10 .img .img-bg img {
    position: relative;
    z-index: 7;
    height: 62.5vh;
}

.page-10 .items {
    width: 100%;
    box-sizing: border-box;
}

.page-10 .items h2 {
    font-size: 2.5vw;
    text-transform: uppercase;
    line-height: 1.1;
    text-align: center;
}

.page-10 .items .desc {
    font-size: 1.14583333vw;
    margin-top: 2.08333333vw;
    margin-bottom: 2.60416667vw;
    text-align: center;
}

.page-10 .items>* {
    color: #fff;
}

@media (max-width: 1500px) {
    .page-10 .items h2 {
        font-size: 3.125vw;
    }
    .page-10 .items .desc {
        font-size: 1.66666667vw;
        margin-top: 1.04166667vw;
    }
}

@media (max-width: 900px) {
    .page-10 .content {
        width: 100%;
        position: relative;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .page-10 .img {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 5;
        overflow: hidden;
    }
    .page-10 .img .img-bg {
        position: static;
    }
    .page-10 .img .img-bg>img {
        display: none;
    }
    .page-10 .img .img-bg .animate-bg {
        width: 100%;
        border-radius: 0vw;
    }
    .page-10 .img .img-bg .animate-bg img {
        height: auto;
    }
    .page-10 .items {
        position: relative;
        z-index: 7;
        padding-left: 0vw;
        padding-right: 0vw;
        width: 100%;
        margin: 0 auto;
        padding: 0 5%;
        padding-top: 7.8125vw;
        height: 100%;
        background: rgba(0, 0, 0, 0.2);
    }
    .page-10 .items>* {
        color: #fff;
    }
    .page-10 .items h2 {
        font-size: 8.33333333vw;
    }
    .page-10 .items h2 span {
        font-size: 6.25vw;
    }
    .page-10 .items .desc {
        font-size: 4.6875vw;
        line-height: 1.2;
    }
}


/* page-11 */

.page-11 {
    background: #fff;
    /* 900 */
}

.page-11 .content {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 70px;
}

.page-11 .img {
    width: 100%;
    text-align: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-11 .img .img-bg {
    position: relative;
}

.page-11 .img .img-bg .animate-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 99%;
    height: 100%;
    z-index: 5;
    border-radius: 2.08333333vw;
    overflow: hidden;
}

.page-11 .img .img-bg img {
    position: relative;
    z-index: 7;
    height: 62.5vh;
}

.page-11 .items {
    width: 100%;
    box-sizing: border-box;
}

.page-11 .items h2 {
    font-size: 2.5vw;
    text-transform: uppercase;
    line-height: 1.1;
    text-align: center;
}

.page-11 .items .desc {
    font-size: 1.14583333vw;
    margin-top: 2.08333333vw;
    margin-bottom: 2.60416667vw;
    text-align: center;
}

.page-11 .items>* {
    color: #fff;
}

@media (max-width: 1500px) {
    .page-11 .items h2 {
        font-size: 3.125vw;
    }
    .page-11 .items .desc {
        font-size: 1.66666667vw;
        margin-top: 1.04166667vw;
    }
}

@media (max-width: 900px) {
    .page-11 .content {
        width: 100%;
        position: relative;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .page-11 .img {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 5;
        overflow: hidden;
    }
    .page-11 .img .img-bg {
        position: static;
    }
    .page-11 .img .img-bg>img {
        display: none;
    }
    .page-11 .img .img-bg .animate-bg {
        width: 100%;
        border-radius: 0vw;
    }
    .page-11 .img .img-bg .animate-bg img {
        height: auto;
    }
    .page-11 .items {
        position: relative;
        z-index: 7;
        padding-left: 0vw;
        padding-right: 0vw;
        width: 100%;
        margin: 0 auto;
        padding: 0 5%;
        padding-top: 7.8125vw;
        height: 100%;
        background: rgba(0, 0, 0, 0.2);
    }
    .page-11 .items>* {
        color: #fff;
    }
    .page-11 .items h2 {
        font-size: 8.33333333vw;
    }
    .page-11 .items h2 span {
        font-size: 6.25vw;
    }
    .page-11 .items .desc {
        font-size: 4.6875vw;
        line-height: 1.2;
    }
}


/* page-12 */

.page-12 {
    background: #000;
    /* 900 */
}

.page-12 .content {
    display: flex;
    align-items: center;
    margin: 0 auto;
    padding-top: 70px;
}

.page-12 .img {
    width: 55%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-12 .img img {
    height: 125vh;
    margin-top: 18.22916667vw;
}

.page-12 .items {
    width: 45%;
    box-sizing: border-box;
    padding-left: 2.60416667vw;
}

.page-12 .items>* {
    color: #fff;
}

.page-12 .items h2 {
    font-size: 2.91666667vw;
    text-transform: uppercase;
    line-height: 1.1;
}

.page-12 .items h2 span {
    display: block;
    font-size: 1.77083333vw;
}

.page-12 .items .desc {
    font-size: 1.14583333vw;
    margin-top: 2.08333333vw;
}

@media (max-width: 1500px) {
    .page-12 .items h2 {
        font-size: 3.125vw;
    }
    .page-12 .items h2 span {
        font-size: 2.08333333vw;
    }
    .page-12 .items .desc {
        font-size: 1.66666667vw;
        margin-top: 1.04166667vw;
    }
}

@media (max-width: 900px) {
    .page-12 .content {
        position: relative;
        align-items: flex-start;
    }
    .page-12 .img {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 52.08333333vh;
        overflow: hidden;
    }
    .page-12 .img img {
        margin-top: 75%;
    }
    .page-12 .items {
        padding-left: 0vw;
        padding-right: 0vw;
        width: 100%;
    }
    .page-12 .items h2 {
        font-size: 8.33333333vw;
    }
    .page-12 .items h2 span {
        font-size: 6.25vw;
    }
    .page-12 .items .desc {
        font-size: 4.6875vw;
        line-height: 1.2;
    }
}


/* page-13 */

.page-13 {
    background: #000;
    /* 900 */
}

.page-13 .content {
    display: flex;
    align-items: center;
    margin: 0 auto;
    padding-top: 70px;
}

.page-13 .img {
    width: 55%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-13 .img img {
    width: 50%;
}

.page-13 .items {
    width: 45%;
    box-sizing: border-box;
    padding-left: 2.60416667vw;
}

.page-13 .items>* {
    color: #fff;
}

.page-13 .items h2 {
    font-size: 2.5vw;
    text-transform: uppercase;
    line-height: 1.1;
}

.page-13 .items h2 span {
    display: block;
    font-size: 1.77083333vw;
}

.page-13 .items .desc {
    font-size: 1.14583333vw;
    margin-top: 2.08333333vw;
}

@media (max-width: 1500px) {
    .page-13 .items h2 {
        font-size: 3.125vw;
    }
    .page-13 .items h2 span {
        font-size: 2.08333333vw;
    }
    .page-13 .items .desc {
        font-size: 1.5625vw;
        margin-top: 1.04166667vw;
    }
}

@media (max-width: 900px) {
    .page-13 .content {
        width: 100%;
        position: relative;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .page-13 .img {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 5;
        overflow: hidden;
        background: #000;
    }
    .page-13 .img img {
        width: 100%;
        margin-top: 50%;
    }
    .page-13 .items {
        position: relative;
        z-index: 7;
        padding-left: 0vw;
        padding-right: 0vw;
        width: 100%;
        margin: 0 auto;
        padding: 0 5%;
        padding-top: 7.8125vw;
        height: 100%;
        background: rgba(0, 0, 0, 0.2);
    }
    .page-13 .items>* {
        color: #fff;
    }
    .page-13 .items h2 {
        font-size: 8.33333333vw;
    }
    .page-13 .items h2 span {
        font-size: 6.25vw;
    }
    .page-13 .items .desc {
        font-size: 4.6875vw;
        line-height: 1.2;
    }
}

@media (min-aspect-ratio:4001 / 3000) and (max-aspect-ratio:14 / 9) {
    /*1920*960 1458-1248*/
}

@media (min-aspect-ratio: 3501 / 3000) and (max-aspect-ratio: 4 / 3) {
    /*1920*960 1093-1249*/
}

@media (max-aspect-ratio: 1 / 1) {}


/* 14-33屏样式 */


/* CSS Document */


/* CSS Document */

h2.h2,
h3.h3,
h4.h4 {
    margin: 0;
    padding: 0;
    line-height: 1.3;
}

.line-md {
    line-height: 1.7;
}

.line-lg {
    line-height: 2;
}

.line-sm {
    line-height: 1.5;
}

.h100 {
    height: 100vh;
}

.bg {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.w1280 {
    width: 75vw;
}

@media (max-width: 900px) {
    .w1280 {
        width: 90%;
    }
}


/* page-14 */

.page-14 .content {
    display: flex;
    align-items: center;
    margin: 0 auto;
    padding-top: 70px;
}

.page-14 .img {
    width: 55%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-14 .img img {
    height: 100vh;
}

.page-14 .items {
    width: 45%;
    box-sizing: border-box;
    padding-left: 2.60416667vw;
}

.page-14 .items>* {
    color: #fff;
}

.page-14 .items h2 {
    font-size: 2.91666667vw;
    text-transform: uppercase;
    line-height: 1.1;
}

.page-14 .items h2 span {
    display: block;
    font-size: 1.77083333vw;
}

.page-14 .items .desc {
    font-size: 1.14583333vw;
    margin-top: 2.08333333vw;
}

@media (max-width: 1500px) {
    .page-14 .items h2 {
        font-size: 3.125vw;
    }
    .page-14 .items h2 span {
        font-size: 2.08333333vw;
    }
    .page-14 .items .desc {
        font-size: 1.66666667vw;
    }
}

@media (max-width: 900px) {
    .page-14 .content {
        flex-direction: column;
    }
    .page-14 .img {
        transition: all 0.5s;
        width: 100%;
        height: 57.29166667vh;
        overflow: hidden;
    }
    .page-14 .img img {
        height: auto;
        margin-top: 100%;
    }
    .page-14 .items {
        transition: all 0.5s;
        width: 100%;
        padding-left: 0vw;
        padding-right: 0vw;
        padding-top: 7.8125vw;
    }
    .page-14 .items h2 {
        font-size: 8.33333333vw;
    }
    .page-14 .items h2 span {
        font-size: 6.25vw;
    }
    .page-14 .items .desc {
        font-size: 4.6875vw;
        line-height: 1.2;
    }
}


/* page-15 */

.page-15 {
    position: relative;
    /* 900 */
}

.page-15 .content {
    display: flex;
    align-items: center;
    margin: 0 auto;
    padding-top: 70px;
}

.page-15 .img {
    width: 55%;
    text-align: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-15 .img .img-bg {
    position: relative;
}

.page-15 .img .img-bg>img {
    position: relative;
    z-index: 7;
    height: 78.125vh;
}

.page-15 .img .img-bg .animate-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 99%;
    height: 100%;
    z-index: 5;
    border-radius: 2.08333333vw;
    overflow: hidden;
}

.page-15 .items {
    width: 45%;
    box-sizing: border-box;
    padding-right: 2.60416667vw;
}

.page-15 .items>* {
    color: #fff;
}

.page-15 .items h2 {
    font-size: 2.5vw;
    text-transform: uppercase;
    line-height: 1.1;
}

.page-15 .items .info {
    font-size: 1.25vw;
    line-height: 1.1;
    font-weight: 700;
    margin-top: 2.08333333vw;
    margin-bottom: 1.5625vw;
}

.page-15 .items .info span {
    font-size: 1.66666667vw;
    font-family: 'hgsn-3-b';
    vertical-align: baseline;
}

.page-15 .items .desc {
    font-size: 1.14583333vw;
    margin: 0;
}

@media (max-width: 1500px) {
    .page-15 .items h2 {
        font-size: 3.125vw;
    }
    .page-15 .items h2 span {
        font-size: 2.08333333vw;
    }
    .page-15 .items .desc {
        font-size: 1.66666667vw;
    }
}

@media (max-width: 900px) {
    .page-15 .content {
        position: relative;
        width: 100%;
    }
    .page-15 .img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 5;
    }
    .page-15 .img .img-bg {
        position: static;
    }
    .page-15 .img .img-bg>img {
        display: none;
    }
    .page-15 .img .img-bg .animate-bg {
        border-radius: 0vw;
        width: 100%;
    }
    .page-15 .items {
        width: 100%;
        position: relative;
        z-index: 7;
        padding: 0 5%;
        padding-top: 7.8125vw;
        height: 100%;
        background: rgba(0, 0, 0, 0.2);
    }
    .page-15 .items h2 {
        font-size: 8.33333333vw;
    }
    .page-15 .items h2 span {
        font-size: 6.25vw;
    }
    .page-15 .items .info {
        font-size: 4.16666667vw;
    }
    .page-15 .items .info span {
        font-size: 5.20833333vw;
    }
    .page-15 .items .desc {
        font-size: 4.6875vw;
        line-height: 1.2;
    }
}


/* page-16 */

.page-16 {
    position: relative;
    /* 900 */
}

.page-16 .content {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 70px;
}

.page-16 .img {
    width: 100%;
    text-align: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-16 .img .img-bg {
    position: relative;
}

.page-16 .img .img-bg>img {
    position: relative;
    z-index: 7;
    height: 62.5vh;
}

.page-16 .img .img-bg .animate-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 99%;
    height: 100%;
    z-index: 5;
    border-radius: 2.08333333vw;
    overflow: hidden;
}

.page-16 .items {
    width: 100%;
    box-sizing: border-box;
}

.page-16 .items>* {
    color: #fff;
}

.page-16 .items h2 {
    font-size: 2.5vw;
    text-transform: uppercase;
    line-height: 1.1;
    text-align: center;
}

.page-16 .items .desc {
    font-size: 1.14583333vw;
    margin-top: 2.34375vw;
    margin-bottom: 3.125vw;
    text-align: center;
}

@media (max-width: 1500px) {
    .page-16 .items h2 {
        font-size: 3.125vw;
    }
    .page-16 .items h2 span {
        font-size: 2.08333333vw;
    }
    .page-16 .items .desc {
        font-size: 1.66666667vw;
        margin-top: 1.30208333vw;
        margin-bottom: 2.08333333vw;
    }
}

@media (max-width: 900px) {
    .page-16 .content {
        position: relative;
        width: 100%;
    }
    .page-16 .img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 5;
    }
    .page-16 .img .img-bg {
        position: static;
    }
    .page-16 .img .img-bg>img {
        display: none;
    }
    .page-16 .img .img-bg .animate-bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 99%;
        height: 100%;
        z-index: 5;
        border-radius: 0vw;
        overflow: hidden;
    }
    .page-16 .img .img-bg .animate-bg img {
        margin-top: -33.85416667vw;
    }
    .page-16 .items {
        width: 100%;
        position: relative;
        z-index: 7;
        padding: 0 5%;
        padding-top: 7.8125vw;
        height: 100%;
        background: rgba(0, 0, 0, 0.2);
    }
    .page-16 .items h2 {
        font-size: 8.33333333vw;
    }
    .page-16 .items h2 span {
        font-size: 6.25vw;
    }
    .page-16 .items .desc {
        font-size: 4.6875vw;
        line-height: 1.2;
    }
}


/* page-17 */

.page-17 {
    display: none;
}

.page-17 .content {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 70px;
}

.page-17 .img {
    width: 100%;
    position: relative;
}

.page-17 .img .videos {
    width: 54.0625vw;
    position: absolute;
    left: 49.05%;
    top: 51%;
    transform: translate(-50%, -50%);
    z-index: 5;
}

.page-17 .items {
    width: 100%;
    box-sizing: border-box;
}

.page-17 .items>* {
    color: #fff;
}

.page-17 .items h2 {
    font-size: 2.5vw;
    text-transform: uppercase;
    line-height: 1.1;
    text-align: center;
}

.page-17 .items .desc {
    font-size: 1.14583333vw;
    margin-top: 2.08333333vw;
    margin-bottom: 3.125vw;
    text-align: center;
}


/* page-18 */

.page-18 {
    display: none;
}

.page-18 .content {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.page-18 .img {
    width: 100%;
    position: relative;
}

.page-18 .img .videos {
    width: 54.0625vw;
    position: absolute;
    left: 49.05%;
    top: 51%;
    transform: translate(-50%, -50%);
    z-index: 5;
}

.page-18 .items {
    width: 100%;
    box-sizing: border-box;
}

.page-18 .items>* {
    color: #fff;
}

.page-18 .items h2 {
    font-size: 2.5vw;
    text-transform: uppercase;
    line-height: 1.1;
    text-align: center;
}

.page-18 .items .desc {
    font-size: 1.14583333vw;
    margin-top: 2.08333333vw;
    margin-bottom: 3.125vw;
    text-align: center;
    line-height: 1.5;
}

.page-18 .items .desc span {
    font-family: 'hgsn-3-b';
    vertical-align: baseline;
}


/* page-19 */

.page-19 {
    /* 900 */
}

.page-19 .content {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 70px;
}

.page-19 .list-box {
    margin-top: 4.6875vw;
}

.page-19 .list-box ul {
    display: flex;
    justify-content: space-between;
}

.page-19 .list-box ul li {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 19%;
    height: 52.08333333vh;
    background: url(../images/phantom-x/page-19/li_bg.jpg) no-repeat center;
    background-size: 100% 100%;
}

.page-19 .list-box ul li img {
    height: 9.375vh;
}

.page-19 .list-box ul li p {
    margin: 0;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.25vw;
    height: 15.625vh;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #fff;
    justify-content: center;
}

.page-19 .items {
    width: 100%;
    box-sizing: border-box;
}

.page-19 .items>* {
    color: #fff;
}

.page-19 .items h2 {
    font-size: 2.5vw;
    text-transform: uppercase;
    line-height: 1.1;
    text-align: center;
}

.page-19 .items .desc {
    font-size: 1.14583333vw;
    margin-top: 2.08333333vw;
    margin-bottom: 3.125vw;
    text-align: center;
    line-height: 1.5;
}

.page-19 .items .desc span {
    font-family: 'hgsn-3-b';
    vertical-align: baseline;
}

@media (max-width: 1500px) {
    .page-19 .items h2 {
        font-size: 3.125vw;
    }
    .page-19 .items .desc {
        font-size: 1.66666667vw;
        margin-top: 1.04166667vw;
        margin-bottom: 2.08333333vw;
    }
}

@media (max-width: 900px) {
    .page-19 .items {
        width: 100%;
    }
    .page-19 .items h2 {
        font-size: 8.33333333vw;
    }
    .page-19 .items h2 span {
        font-size: 6.25vw;
    }
    .page-19 .items .desc {
        font-size: 4.6875vw;
    }
    .page-19 .list-box ul {
        flex-wrap: wrap;
        margin-top: -2.08333333vw;
    }
    .page-19 .list-box ul li {
        width: 49%;
        height: 20.83333333vh;
        margin-top: 2.08333333vw;
    }
    .page-19 .list-box ul li:last-child {
        width: 100%;
    }
    .page-19 .list-box ul li img {
        height: 6.25vh;
    }
    .page-19 .list-box ul li p {
        font-size: 3.64583333vw;
        height: 9.375vh;
    }
}


/* page-20 */

.page-20 {
    position: relative;
    background: #000;
    /* 900 */
}

.page-20 .content {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0 auto;
    padding-top: 70px;
}

.page-20 .img {
    position: absolute;
    left: 0;
    top: 0;
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.page-20 .img img {
    width: 100%;
}

.page-20 .items {
    position: relative;
    z-index: 5;
    width: 45%;
    box-sizing: border-box;
    padding-left: 2.60416667vw;
}

.page-20 .items>* {
    color: #fff;
}

.page-20 .items h2 {
    font-size: 2.91666667vw;
    text-transform: uppercase;
    line-height: 1.1;
}

.page-20 .items h2 span {
    display: block;
    font-size: 1.77083333vw;
}

.page-20 .items .desc {
    font-size: 1.14583333vw;
    margin-top: 2.08333333vw;
}

.page-20 .items .desc span {
    font-size: 1.45833333vw;
    font-family: "hgsn-3-b";
}

@media (max-width: 1500px) {
    .page-20 .items h2 {
        font-size: 3.125vw;
    }
    .page-20 .items h2 span {
        font-size: 2.08333333vw;
    }
    .page-20 .items .desc {
        font-size: 1.66666667vw;
    }
}

@media (max-width: 900px) {
    .page-20 .img {
        width: 100%;
    }
    .page-20 .items {
        padding-left: 0vw;
        padding-right: 0vw;
        width: 100%;
    }
    .page-20 .items h2 {
        font-size: 8.33333333vw;
    }
    .page-20 .items h2 span {
        font-size: 6.25vw;
    }
    .page-20 .items .desc {
        font-size: 4.6875vw;
        line-height: 1.2;
    }
    .page-24 .items .desc span {
        font-size: 5.72916667vw;
    }
}


/* page-21 */

.page-21 {
    /* 900 */
}

.page-21 .content {
    display: flex;
    align-items: center;
    margin: 0 auto;
    padding-top: 70px;
}

.page-21 .img {
    width: 55%;
    text-align: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-21 .img .img-bg {
    position: relative;
}

.page-21 .img .img-bg>img {
    position: relative;
    z-index: 7;
    height: 78.125vh;
}

.page-21 .img .img-bg .animate-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 99%;
    height: 100%;
    z-index: 5;
    border-radius: 2.08333333vw;
    overflow: hidden;
}

.page-21 .items {
    width: 45%;
    box-sizing: border-box;
    padding-right: 2.60416667vw;
}

.page-21 .items>* {
    color: #fff;
}

.page-21 .items h2 {
    font-size: 2.5vw;
    text-transform: uppercase;
    line-height: 1.1;
}

.page-21 .items .desc {
    font-size: 1.14583333vw;
    margin-top: 2.08333333vw;
}

@media (max-width: 1500px) {
    .page-21 .items h2 {
        font-size: 3.125vw;
    }
    .page-21 .items .desc {
        font-size: 1.66666667vw;
        margin-top: 1.04166667vw;
    }
}

@media (max-width: 900px) {
    .page-21 .content {
        flex-direction: column;
    }
    .page-21 .img {
        width: 100%;
        overflow: hidden;
    }
    .page-21 .img .img-bg>img {
        height: auto;
        opacity: 0;
    }
    .page-21 .img .img-bg .animate-bg {
        border-radius: 0;
    }
    .page-21 .items {
        padding-left: 0vw;
        padding-right: 0vw;
        width: 100%;
        margin-bottom: 5vw;
    }
    .page-21 .items h2 {
        font-size: 8.33333333vw;
    }
    .page-21 .items h2 span {
        font-size: 6.25vw;
    }
    .page-21 .items .desc {
        font-size: 4.6875vw;
        line-height: 1.2;
    }
}


/* page-22 */

.page-22 {
    background: #000;
    /* 900 */
}

.page-22 .content {
    display: flex;
    align-items: center;
    margin: 0 auto;
    padding-top: 70px;
}

.page-22 .img {
    width: 55%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-22 .img img {
    height: 125vh;
    margin-top: 18.22916667vw;
}

.page-22 .items {
    width: 45%;
    box-sizing: border-box;
    padding-left: 2.60416667vw;
}

.page-22 .items>* {
    color: #fff;
}

.page-22 .items h2 {
    font-size: 2.91666667vw;
    text-transform: uppercase;
    line-height: 1.1;
}

.page-22 .items h2 span {
    display: block;
    font-size: 1.77083333vw;
}

.page-22 .items .desc {
    font-size: 1.14583333vw;
    margin-top: 2.08333333vw;
}

@media (max-width: 1500px) {
    .page-22 .items h2 {
        font-size: 3.125vw;
    }
    .page-22 .items h2 span {
        font-size: 2.08333333vw;
    }
    .page-22 .items .desc {
        font-size: 1.66666667vw;
        margin-top: 1.04166667vw;
    }
}

@media (max-width: 900px) {
    .page-22 .content {
        position: relative;
        align-items: flex-start;
    }
    .page-22 .img {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 52.08333333vh;
        overflow: hidden;
    }
    .page-22 .img img {
        margin-top: 136%;
    }
    .page-22 .items {
        padding-left: 0vw;
        padding-right: 0vw;
        width: 100%;
    }
    .page-22 .items h2 {
        font-size: 8.33333333vw;
    }
    .page-22 .items h2 span {
        font-size: 6.25vw;
    }
    .page-22 .items .desc {
        font-size: 4.6875vw;
        line-height: 1.2;
    }
}


/* page-23 */

.page-23 {
    background: #fff;
    /* 900 */
}

.page-23 .content {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 70px;
}

.page-23 .img {
    width: 100%;
    text-align: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-23 .img .img-bg {
    position: relative;
}

.page-23 .img .img-bg .animate-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 99%;
    height: 100%;
    z-index: 5;
    border-radius: 2.08333333vw;
    overflow: hidden;
}

.page-23 .img .img-bg img {
    position: relative;
    z-index: 7;
    height: 62.5vh;
}

.page-23 .img h3 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 11.45833333vw;
    margin: 0;
    z-index: 10;
    transition: all 0.5s linear;
    opacity: 0;
}

.page-23 .items {
    width: 100%;
    box-sizing: border-box;
}

.page-23 .items h2 {
    font-size: 2.5vw;
    text-transform: uppercase;
    line-height: 1.1;
    text-align: center;
}

.page-23 .items .desc {
    font-size: 1.14583333vw;
    margin-top: 2.08333333vw;
    margin-bottom: 2.60416667vw;
    text-align: center;
}

@media (max-width: 1500px) {
    .page-23 .items h2 {
        font-size: 3.125vw;
    }
    .page-23 .items .desc {
        font-size: 1.66666667vw;
        margin-top: 1.04166667vw;
    }
}

@media (max-width: 900px) {
    .page-23 .content {
        width: 100%;
        position: relative;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .page-23 .img {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 5;
        overflow: hidden;
    }
    .page-23 .img h3 {
        color: #fff;
        text-shadow: 0 0 10px #333;
        font-size: 14.58333333vw;
    }
    .page-23 .img .img-bg {
        position: static;
    }
    .page-23 .img .img-bg>img {
        display: none;
    }
    .page-23 .img .img-bg .animate-bg {
        width: 100%;
        border-radius: 0vw;
    }
    .page-23 .img .img-bg .animate-bg img {
        height: auto;
    }
    .page-23 .items {
        position: relative;
        z-index: 7;
        padding-left: 0vw;
        padding-right: 0vw;
        width: 100%;
        margin: 0 auto;
        padding: 0 5%;
        padding-top: 7.8125vw;
        height: 100%;
        background: rgba(0, 0, 0, 0.2);
    }
    .page-23 .items>* {
        color: #fff;
    }
    .page-23 .items h2 {
        font-size: 8.33333333vw;
    }
    .page-23 .items h2 span {
        font-size: 6.25vw;
    }
    .page-23 .items .desc {
        font-size: 4.6875vw;
        line-height: 1.2;
    }
}


/* page-24 */

.page-24 {
    background: #f5f5f5 url(../images/phantom-x/page-24/bg.jpg) no-repeat center bottom;
    background-size: cover;
    position: relative;
    /* 900 */
}

.page-24 .content {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 70px;
}

.page-24 .img {
    width: 100%;
    text-align: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-24 .img .img-bg {
    position: relative;
}

.page-24 .img .img-bg>img {
    position: relative;
    z-index: 7;
    height: 62.5vh;
}

.page-24 .img .img-bg .animate-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 99%;
    height: 100%;
    z-index: 5;
    border-radius: 2.08333333vw;
    overflow: hidden;
}

.page-24 .img .img-bg .animate-bg img {
    transform: scale(2);
    margin-top: 50%;
}

.page-24 .items {
    width: 100%;
    box-sizing: border-box;
}

.page-24 .items h2 {
    font-size: 2.5vw;
    text-transform: uppercase;
    line-height: 1.1;
    text-align: center;
}

.page-24 .items .desc {
    font-size: 1.14583333vw;
    margin-top: 2.08333333vw;
    margin-bottom: 2.60416667vw;
    text-align: center;
}

.page-24 .items .desc span {
    font-size: 1.45833333vw;
    font-family: "hgsn-3-b";
}

@media (max-width: 1500px) {
    .page-24 .items h2 {
        font-size: 3.125vw;
    }
    .page-24 .items .desc {
        font-size: 1.66666667vw;
        margin-top: 1.04166667vw;
    }
}

@media (max-width: 900px) {
    .page-24 .content {
        width: 100%;
        position: relative;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .page-24 .img {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 5;
        overflow: hidden;
        background: #000;
    }
    .page-24 .img h3 {
        color: #fff;
        text-shadow: 0 0 10px #333;
    }
    .page-24 .img .img-bg {
        position: static;
    }
    .page-24 .img .img-bg>img {
        display: none;
    }
    .page-24 .img .img-bg .animate-bg {
        width: 100%;
        border-radius: 0vw;
    }
    .page-24 .img .img-bg .animate-bg img {
        height: auto;
        transform: scale(1);
        margin-top: 30%;
    }
    .page-24 .items {
        position: relative;
        z-index: 7;
        padding-left: 0vw;
        padding-right: 0vw;
        width: 100%;
        margin: 0 auto;
        padding: 0 5%;
        padding-top: 7.8125vw;
        height: 100%;
        background: rgba(0, 0, 0, 0.2);
    }
    .page-24 .items>* {
        color: #fff;
    }
    .page-24 .items h2 {
        font-size: 8.33333333vw;
    }
    .page-24 .items h2 span {
        font-size: 6.25vw;
    }
    .page-24 .items .desc {
        font-size: 4.6875vw;
        line-height: 1.2;
    }
    .page-24 .items .desc span {
        font-size: 5.72916667vw;
    }
}


/* page-25 */

.page-25 {
    background: #000;
    /* 900 */
}

.page-25 .content {
    display: flex;
    align-items: center;
    margin: 0 auto;
    padding-top: 70px;
}

.page-25 .img {
    width: 55%;
    text-align: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-25 .img .img-bg {
    position: relative;
}

.page-25 .img .img-bg>img {
    position: relative;
    z-index: 7;
    height: 78.125vh;
}

.page-25 .img .img-bg .animate-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 99%;
    height: 100%;
    z-index: 5;
    border-radius: 2.08333333vw;
    overflow: hidden;
}

.page-25 .items {
    width: 45%;
    box-sizing: border-box;
    padding-left: 2.60416667vw;
}

.page-25 .items>* {
    color: #fff;
}

.page-25 .items h2 {
    font-size: 2.5vw;
    text-transform: uppercase;
    line-height: 1.1;
}

.page-25 .items h2 span {
    display: block;
    font-size: 1.77083333vw;
}

.page-25 .items .desc {
    font-size: 1.14583333vw;
    margin-top: 2.08333333vw;
}

.page-25 .items .desc span {
    font-size: 1.45833333vw;
    font-family: 'hgsn-3-b';
}

@media (max-width: 1500px) {
    .page-25 .items h2 {
        font-size: 3.125vw;
    }
    .page-25 .items h2 span {
        font-size: 2.08333333vw;
    }
    .page-25 .items .desc {
        font-size: 1.66666667vw;
        margin-top: 1.04166667vw;
    }
    .page-25 .items .desc span {
        font-size: 1.97916667vw;
    }
}

@media (max-width: 900px) {
    .page-25 .content {
        width: 100%;
        position: relative;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .page-25 .img {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 5;
        overflow: hidden;
    }
    .page-25 .img h3 {
        color: #fff;
        text-shadow: 0 0 10px #333;
    }
    .page-25 .img .img-bg {
        position: static;
    }
    .page-25 .img .img-bg>img {
        display: none;
    }
    .page-25 .img .img-bg .animate-bg {
        width: 100%;
        border-radius: 0vw;
    }
    .page-25 .img .img-bg .animate-bg img {
        height: auto;
        transform: scale(1);
        margin-top: 0%;
    }
    .page-25 .items {
        position: relative;
        z-index: 7;
        padding-left: 0vw;
        padding-right: 0vw;
        width: 100%;
        margin: 0 auto;
        padding: 0 5%;
        padding-top: 7.8125vw;
        height: 100%;
        background: rgba(0, 0, 0, 0.2);
    }
    .page-25 .items>* {
        color: #fff;
    }
    .page-25 .items h2 {
        font-size: 8.33333333vw;
    }
    .page-25 .items h2 span {
        font-size: 6.25vw;
    }
    .page-25 .items .desc {
        font-size: 4.6875vw;
        line-height: 1.2;
    }
    .page-25 .items .desc span {
        font-size: 5.72916667vw;
    }
}


/* page-26 */

.page-26 {
    position: relative;
    /* 900 */
}

.page-26 .img {
    width: 55%;
    text-align: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-26 .img .img-bg {
    position: relative;
}

.page-26 .img .img-bg>img {
    position: relative;
    z-index: 7;
    height: 78.125vh;
}

.page-26 .img .img-bg .animate-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 99%;
    height: 100%;
    z-index: 5;
    border-radius: 2.08333333vw;
    overflow: hidden;
}

.page-26 .img .img-bg .animate-bg img {
    transform: scale(3);
    margin-top: 20.83333333vw;
    margin-left: -5.20833333vw;
}

.page-26 .content {
    display: flex;
    align-items: center;
    margin: 0 auto;
    padding-top: 70px;
}

.page-26 .items {
    width: 45%;
    box-sizing: border-box;
    padding-left: 2.60416667vw;
}

.page-26 .items>* {
    color: #fff;
}

.page-26 .items h2 {
    font-size: 2.5vw;
    text-transform: uppercase;
    line-height: 1.1;
}

.page-26 .items h2 span {
    display: block;
    font-size: 1.77083333vw;
}

.page-26 .items .desc {
    font-size: 1.14583333vw;
    margin-top: 2.08333333vw;
}

.page-26 .items .desc span {
    font-size: 1.45833333vw;
    font-family: 'hgsn-3-b';
}

@media (max-width: 1500px) {
    .page-26 .items h2 {
        font-size: 3.125vw;
    }
    .page-26 .items h2 span {
        font-size: 2.08333333vw;
    }
    .page-26 .items .desc {
        font-size: 1.66666667vw;
        margin-top: 1.04166667vw;
    }
    .page-26 .items .desc span {
        font-size: 1.97916667vw;
    }
}

@media (max-width: 900px) {
    .page-26 .content {
        width: 100%;
        position: relative;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .page-26 .img {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 5;
        overflow: hidden;
    }
    .page-26 .img h3 {
        color: #fff;
        text-shadow: 0 0 10px #333;
    }
    .page-26 .img .img-bg {
        position: static;
    }
    .page-26 .img .img-bg>img {
        display: none;
    }
    .page-26 .img .img-bg .animate-bg {
        width: 100%;
        border-radius: 0vw;
    }
    .page-26 .img .img-bg .animate-bg img {
        height: auto;
        transform: scale(1);
        margin-left: 0vw;
    }
    .page-26 .items {
        position: relative;
        z-index: 7;
        padding-left: 0vw;
        padding-right: 0vw;
        width: 100%;
        margin: 0 auto;
        padding: 0 5%;
        padding-top: 7.8125vw;
        height: 100%;
        background: rgba(0, 0, 0, 0.2);
    }
    .page-26 .items>* {
        color: #fff;
    }
    .page-26 .items h2 {
        font-size: 8.33333333vw;
    }
    .page-26 .items h2 span {
        font-size: 6.25vw;
    }
    .page-26 .items .desc {
        font-size: 4.6875vw;
        line-height: 1.2;
    }
    .page-26 .items .desc span {
        font-size: 5.72916667vw;
    }
}


/* page-27 */

.page-27 {
    background: #000;
    /* 900 */
}

.page-27 .content {
    display: flex;
    align-items: center;
    margin: 0 auto;
    padding-top: 70px;
}

.page-27 .img {
    width: 55%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-27 .img img {
    width: 60%;
    margin-top: 15.625vw;
}

.page-27 .items {
    width: 45%;
    box-sizing: border-box;
    padding-left: 2.60416667vw;
}

.page-27 .items>* {
    color: #fff;
}

.page-27 .items h2 {
    font-size: 2.5vw;
    text-transform: uppercase;
    line-height: 1.1;
}

.page-27 .items h2 span {
    display: block;
    font-size: 1.77083333vw;
}

.page-27 .items .desc {
    font-size: 1.14583333vw;
    margin-top: 2.08333333vw;
}

@media (max-width: 1500px) {
    .page-27 .items h2 {
        font-size: 3.125vw;
    }
    .page-27 .items h2 span {
        font-size: 2.08333333vw;
    }
    .page-27 .items .desc {
        font-size: 1.5625vw;
        margin-top: 1.04166667vw;
    }
}

@media (max-width: 900px) {
    .page-27 .content {
        width: 100%;
        position: relative;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .page-27 .img {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 5;
        overflow: hidden;
    }
    .page-27 .img img {
        width: 80%;
        margin-top: 100%;
    }
    .page-27 .items {
        position: relative;
        z-index: 7;
        padding-left: 0vw;
        padding-right: 0vw;
        width: 100%;
        margin: 0 auto;
        padding: 0 5%;
        padding-top: 7.8125vw;
        height: 100%;
        background: rgba(0, 0, 0, 0.2);
    }
    .page-27 .items>* {
        color: #fff;
    }
    .page-27 .items h2 {
        font-size: 8.33333333vw;
    }
    .page-27 .items h2 span {
        font-size: 6.25vw;
    }
    .page-27 .items .desc {
        font-size: 4.6875vw;
        line-height: 1.2;
    }
}


/* page-28 */

.page-28 {
    background: #000;
    /* 900 */
}

.page-28 .content {
    display: flex;
    align-items: center;
    margin: 0 auto;
    padding-top: 70px;
}

.page-28 .img {
    width: 55%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-28 .img img {
    width: 60%;
    margin-top: 15.625vw;
}

.page-28 .items {
    width: 45%;
    box-sizing: border-box;
    padding-left: 2.60416667vw;
}

.page-28 .items>* {
    color: #fff;
}

.page-28 .items h2 {
    font-size: 2.5vw;
    text-transform: uppercase;
    line-height: 1.1;
}

.page-28 .items h2 span {
    display: block;
    font-size: 1.77083333vw;
}

.page-28 .items .desc {
    font-size: 1.14583333vw;
    margin-top: 2.08333333vw;
}

@media (max-width: 1500px) {
    .page-28 .items h2 {
        font-size: 3.125vw;
    }
    .page-28 .items h2 span {
        font-size: 2.08333333vw;
    }
    .page-28 .items .desc {
        font-size: 1.5625vw;
        margin-top: 1.04166667vw;
    }
}

@media (max-width: 900px) {
    .page-28 .content {
        width: 100%;
        position: relative;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .page-28 .img {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 5;
        overflow: hidden;
        background: #000;
    }
    .page-28 .img img {
        width: 80%;
        margin-top: 100%;
    }
    .page-28 .items {
        position: relative;
        z-index: 7;
        padding-left: 0vw;
        padding-right: 0vw;
        width: 100%;
        margin: 0 auto;
        padding: 0 5%;
        padding-top: 7.8125vw;
        height: 100%;
        background: rgba(0, 0, 0, 0.2);
    }
    .page-28 .items>* {
        color: #fff;
    }
    .page-28 .items h2 {
        font-size: 8.33333333vw;
    }
    .page-28 .items h2 span {
        font-size: 6.25vw;
    }
    .page-28 .items .desc {
        font-size: 4.6875vw;
        line-height: 1.2;
    }
}


/* page-29 */

.page-29 {
    background: #000;
    /* 900 */
}

.page-29 .content {
    display: flex;
    align-items: center;
    margin: 0 auto;
    padding-top: 70px;
}

.page-29 .img {
    width: 55%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-29 .img img {
    width: 60%;
    margin-top: 15.625vw;
}

.page-29 .items {
    width: 45%;
    box-sizing: border-box;
    padding-left: 2.60416667vw;
}

.page-29 .items>* {
    color: #fff;
}

.page-29 .items h2 {
    font-size: 2.5vw;
    text-transform: uppercase;
    line-height: 1.1;
}

.page-29 .items h2 span {
    display: block;
    font-size: 1.77083333vw;
}

.page-29 .items .desc {
    font-size: 1.14583333vw;
    margin-top: 2.08333333vw;
}

@media (max-width: 1500px) {
    .page-29 .items h2 {
        font-size: 3.125vw;
    }
    .page-29 .items h2 span {
        font-size: 2.08333333vw;
    }
    .page-29 .items .desc {
        font-size: 1.5625vw;
        margin-top: 1.04166667vw;
    }
}

@media (max-width: 900px) {
    .page-29 .content {
        width: 100%;
        position: relative;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .page-29 .img {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 5;
        overflow: hidden;
        background: #000;
    }
    .page-29 .img img {
        width: 80%;
        margin-top: 100%;
    }
    .page-29 .items {
        position: relative;
        z-index: 7;
        padding-left: 0vw;
        padding-right: 0vw;
        width: 100%;
        margin: 0 auto;
        padding: 0 5%;
        padding-top: 7.8125vw;
        height: 100%;
        background: rgba(0, 0, 0, 0.2);
    }
    .page-29 .items>* {
        color: #fff;
    }
    .page-29 .items h2 {
        font-size: 8.33333333vw;
    }
    .page-29 .items h2 span {
        font-size: 6.25vw;
    }
    .page-29 .items .desc {
        font-size: 4.6875vw;
        line-height: 1.2;
    }
}


/* page-30 */

.page-30 {
    background: #000;
    /* 900 */
}

.page-30 .content {
    display: flex;
    align-items: center;
    margin: 0 auto;
    padding-top: 70px;
}

.page-30 .img {
    width: 55%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-30 .img img {
    width: 60%;
    margin-top: 15.625vw;
}

.page-30 .items {
    width: 45%;
    box-sizing: border-box;
    padding-left: 2.60416667vw;
}

.page-30 .items>* {
    color: #fff;
}

.page-30 .items h2 {
    font-size: 2.5vw;
    text-transform: uppercase;
    line-height: 1.1;
}

.page-30 .items h2 span {
    display: block;
    font-size: 1.77083333vw;
}

.page-30 .items .desc {
    font-size: 1.14583333vw;
    margin-top: 2.08333333vw;
}

@media (max-width: 1500px) {
    .page-30 .items h2 {
        font-size: 3.125vw;
    }
    .page-30 .items h2 span {
        font-size: 2.08333333vw;
    }
    .page-30 .items .desc {
        font-size: 1.5625vw;
        margin-top: 1.04166667vw;
    }
}

@media (max-width: 900px) {
    .page-30 .content {
        width: 100%;
        position: relative;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .page-30 .img {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 5;
        overflow: hidden;
        background: #000;
    }
    .page-30 .img img {
        width: 80%;
        margin-top: 100%;
    }
    .page-30 .items {
        position: relative;
        z-index: 7;
        padding-left: 0vw;
        padding-right: 0vw;
        width: 100%;
        margin: 0 auto;
        padding: 0 5%;
        padding-top: 7.8125vw;
        height: 100%;
        background: rgba(0, 0, 0, 0.2);
    }
    .page-30 .items>* {
        color: #fff;
    }
    .page-30 .items h2 {
        font-size: 8.33333333vw;
    }
    .page-30 .items h2 span {
        font-size: 6.25vw;
    }
    .page-30 .items .desc {
        font-size: 4.6875vw;
        line-height: 1.2;
    }
}


/* page-31 */

.page-31 {
    background: #000;
    /* 900 */
}

.page-31 .content {
    display: flex;
    align-items: center;
    margin: 0 auto;
    padding-top: 70px;
}

.page-31 .img {
    width: 55%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-31 .img img {
    width: 60%;
    margin-top: 15.625vw;
}

.page-31 .items {
    width: 45%;
    box-sizing: border-box;
    padding-left: 2.60416667vw;
}

.page-31 .items>* {
    color: #fff;
}

.page-31 .items h2 {
    font-size: 2.5vw;
    text-transform: uppercase;
    line-height: 1.1;
}

.page-31 .items h2 span {
    display: block;
    font-size: 1.77083333vw;
}

.page-31 .items .desc {
    font-size: 1.14583333vw;
    margin-top: 2.08333333vw;
}

@media (max-width: 1500px) {
    .page-31 .items h2 {
        font-size: 3.125vw;
    }
    .page-31 .items h2 span {
        font-size: 2.08333333vw;
    }
    .page-31 .items .desc {
        font-size: 1.5625vw;
        margin-top: 1.04166667vw;
    }
}

@media (max-width: 900px) {
    .page-31 .content {
        width: 100%;
        position: relative;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .page-31 .img {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 5;
        overflow: hidden;
        background: #000;
    }
    .page-31 .img img {
        width: 80%;
        margin-top: 100%;
    }
    .page-31 .items {
        position: relative;
        z-index: 7;
        padding-left: 0vw;
        padding-right: 0vw;
        width: 100%;
        margin: 0 auto;
        padding: 0 5%;
        padding-top: 7.8125vw;
        height: 100%;
        background: rgba(0, 0, 0, 0.2);
    }
    .page-31 .items>* {
        color: #fff;
    }
    .page-31 .items h2 {
        font-size: 8.33333333vw;
    }
    .page-31 .items h2 span {
        font-size: 6.25vw;
    }
    .page-31 .items .desc {
        font-size: 4.6875vw;
        line-height: 1.2;
    }
}


/* page-32 */

.page-32 {
    background: #000;
    /* 900 */
}

.page-32 .content {
    display: flex;
    align-items: center;
    margin: 0 auto;
    padding-top: 70px;
}

.page-32 .img {
    width: 55%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-32 .img img {
    width: 60%;
    margin-top: 15.625vw;
}

.page-32 .items {
    width: 45%;
    box-sizing: border-box;
    padding-left: 2.60416667vw;
}

.page-32 .items>* {
    color: #fff;
}

.page-32 .items h2 {
    font-size: 2.5vw;
    text-transform: uppercase;
    line-height: 1.1;
}

.page-32 .items h2 span {
    display: block;
    font-size: 1.77083333vw;
}

.page-32 .items .desc {
    font-size: 1.14583333vw;
    margin-top: 2.08333333vw;
}

@media (max-width: 1500px) {
    .page-32 .items h2 {
        font-size: 3.125vw;
    }
    .page-32 .items h2 span {
        font-size: 2.08333333vw;
    }
    .page-32 .items .desc {
        font-size: 1.5625vw;
        margin-top: 1.04166667vw;
    }
}

@media (max-width: 900px) {
    .page-32 .content {
        width: 100%;
        position: relative;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .page-32 .img {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 5;
        overflow: hidden;
        background: #000;
    }
    .page-32 .img img {
        width: 80%;
        margin-top: 100%;
    }
    .page-32 .items {
        position: relative;
        z-index: 7;
        padding-left: 0vw;
        padding-right: 0vw;
        width: 100%;
        margin: 0 auto;
        padding: 0 5%;
        padding-top: 7.8125vw;
        height: 100%;
        background: rgba(0, 0, 0, 0.2);
    }
    .page-32 .items>* {
        color: #fff;
    }
    .page-32 .items h2 {
        font-size: 8.33333333vw;
    }
    .page-32 .items h2 span {
        font-size: 6.25vw;
    }
    .page-32 .items .desc {
        font-size: 4.6875vw;
        line-height: 1.2;
    }
}


/* page-33 */

.page-33 {
    position: relative;
    background: #000;
    /* 900 */
}

.page-33 .content {
    margin: 0 auto;
    display: flex;
    box-sizing: border-box;
    padding-top: 70px;
}

.page-33 .img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-align: center;
    z-index: 5;
}

.page-33 .img img {
    width: 28.64583333vw;
    margin-top: 13.02083333vw;
}

.page-33 .items {
    position: relative;
    z-index: 7;
    width: 100%;
    box-sizing: border-box;
}

.page-33 .items>* {
    color: #fff;
}

.page-33 .items h2 {
    font-size: 2.5vw;
    text-transform: uppercase;
    line-height: 1.1;
    text-align: center;
}

.page-33 .items .desc {
    font-size: 1.14583333vw;
    margin-top: 2.08333333vw;
    margin-bottom: 2.60416667vw;
    text-align: center;
}

@media (max-width: 1500px) {
    .page-33 .img img {
        margin-top: 15.625vw;
    }
    .page-33 .items h2 {
        font-size: 3.125vw;
    }
    .page-33 .items h2 span {
        font-size: 2.08333333vw;
    }
    .page-33 .items .desc {
        font-size: 1.5625vw;
        margin-top: 1.04166667vw;
        margin-bottom: 1.30208333vw;
    }
}

@media (max-width: 900px) {
    .page-33 .content {
        width: 100%;
        position: relative;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .page-33 .img {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 5;
        overflow: hidden;
        background: #000;
    }
    .page-33 .img img {
        width: 100%;
        margin-top: 80%;
    }
    .page-33 .items {
        position: relative;
        z-index: 7;
        padding-left: 0vw;
        padding-right: 0vw;
        width: 100%;
        margin: 0 auto;
        padding: 0 5%;
        height: 100%;
        padding-top: 7.8125vw;
        background: rgba(0, 0, 0, 0.2);
    }
    .page-33 .items>* {
        color: #fff;
    }
    .page-33 .items h2 {
        font-size: 8.33333333vw;
    }
    .page-33 .items h2 span {
        font-size: 6.25vw;
    }
    .page-33 .items .desc {
        font-size: 4.6875vw;
        line-height: 1.2;
    }
}