body {
    --g-color-1: #efefed;
    --g-color-2: #cdcdc9;
    --g-color-3: #f7f7f7;
    background-color: var(--color-white);
    overflow: hidden;
}

.media-container,
.media-wrapper,
.media-content,
.media-box,
.media-block,
.media-floor {
    height: 100%;
}
.media-container {
    padding: 96px 80px;
}
.media-content,
.media-box {
    float: left;
}
.media-content {
    padding-right: 40px;
    width: 490px;
    border-right: 2px solid var(--theme-color);
}
.media-content .box {
    position: relative;
    padding: 30px;
    height: 100%;
    background-color: var(--theme-color);
}
.media-content .english i {
    display: block;
    line-height: 1.2;
    color: var(--color-white);
    font-size: 51px;
    font-weight: bold;
}
.media-content .name {
    margin: 35px 0;
    line-height: 1.2;
    color: var(--color-white);
    font-size: 26px;
}
.media-content .floor {
    display: flex;
    flex-flow: wrap;
}
.media-content .floor .item {
    display: flex;
    position: relative;
    margin-top: 30px;
    height: 51px;
    line-height: 1;
}
.media-content .floor .item:nth-child(-n+5) {
    margin-top: 0;
}
.media-content .floor .item.btn {
    align-items: flex-end;
    color: var(--color-white);
}
.media-content .floor .item.btn {
    z-index: 1;
}
.media-content .floor .item.btn span,
.media-content .floor .item.btn i {
    font-weight: bold;
}
.media-content .floor .item.btn span {
    font-size: 51px;
}
.media-content .floor .item.btn i {
    margin-bottom: 1px;
    font-size: 36px;
}
.media-content .floor .item.btn div {
    display: none;
}
.media-content .floor .item.btn:hover {
    color: var(--color-dark);
}
.media-content .floor .item.line {
    width: 62px;
}
.media-content .floor .item.line::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 100%;
    border-top: 1px solid var(--color-white);
    transform-origin: top center;
    transform: rotate(-45deg);
}
.media-content .floor .item.more {
    display: flex;
    margin-left: 30px;
    justify-content: center;
    align-items: center
}
.media-content .floor .item.more s {
    margin-left: 5px;
    width: 5px;
    height: 5px;
    background-color: var(--color-white);
    border-radius: 100%;
}
.media-content .floor .item.more s:first-child {
    margin-left: 0;
}
.media-content .text {
    margin-top: 35px;
    color: var(--color-white);
    font-size: 16px;
}
.media-content .service {
    position: absolute;
    left: 0;
    right: 35px;
    bottom: 35px;
    padding: 20px 30px;
    background-color: var(--color-dark);
}
.media-content .service div {
    display: flex;
    align-items: flex-end;
}
.media-content .service div:first-child {
    margin-bottom: 10px;
}
.media-content .service span {
    line-height: 1;
    color: var(--color-white);
    font-size: 16px;
}
.media-content .service span.big {
    margin: 0 0 -1px 5px;
    font-size: 26px;
}
.media-box {
    position: relative;
    width: calc(100% - 490px);
    opacity: 0;
    transition: all .1s linear;
}
.media-box.show {
    opacity: 1;
}
.media-style {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.media-style .animation,
.media-style .style {
    width: 100%;
    height: 100%;
}
.media-style .animation {
    position: absolute;
    top: 0;
    left: 0;
}
.media-style .style {
    position: relative;
}
.media-style .style i {
    display: block;
    position: absolute;
}
.media-style .style i.s-1 {
    top: 10%;
    left: 10%;
    width: 38px;
    height: 38px;
    background-color: var(--g-color-2);
}
.media-style .style i.s-2 {
    top: 40%;
    right: 5%;
    width: 110px;
    height: 110px;
    background-color: var(--g-color-3);
}
.media-style .style i.s-3 {
    left: 25%;
    bottom: 30%;
    width: 68px;
    height: 68px;
    background-color: var(--g-color-1);
}
.media-style .title {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
}
.media-style .title .block {
    position: relative;
    width: var(--width);
    height: var(--height);
}
.media-style .title .block .box {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: var(--width);
    height: var(--height);
    justify-content: center;
    flex-wrap: wrap;
}
.media-style .title .block .box.ani {
    --frag-width: calc(var(--width) / var(--col));
    --frag-height: calc(var(--height) / var(--row));
}
.media-style .title .block .box.ani .fragment {
    --x-offset: calc(var(--x) * var(--frag-width) * -1);
    --y-offset: calc(var(--y) * var(--frag-height) * -1);
    --rotateX: rotateX(0);
    --rotateY: rotateY(0);
}
.media-style .title .block .box.ani .fragment {
    width: var(--frag-width);
    height: var(--frag-height);
}
.media-style .title .block .box.ani .fragment div {
    width: 100%;
    height: 100%;
}
.media-style .title .block .box.ani .fragment .v {
    background: var(--img-url) no-repeat var(--x-offset) var(--y-offset) / var(--width) var(--height);
    backface-visibility: hidden;
    will-change: transform;
    transform: var(--rotateX) var(--rotateY) scale(0.8);
    animation: title-box-animate var(--duration) linear var(--delay) forwards;
    opacity: 0;
}
.media-style .title .block .box.ani .fragment.ani .d {
    animation: title-fragment-animate var(--animate-duration) var(--animate-delay) infinite;
}

@keyframes title-box-animate {
    0% {
        transform: var(--rotateX) var(--rotateY) scale(0.8);
        opacity: 0;
    }
    15% {
        transform: var(--rotateX) var(--rotateY) scale(0.8);
        opacity: 0;
    }
    70% {
        transform: rotateX(0) rotateY(0) scale(0.8);
        opacity: 1;
    }
    100% {
        transform: rotateX(0) rotateY(0) scale(1);
        opacity: 1;
    }
}
@keyframes title-fragment-animate {
    0%, 10%, 20%, 100% {
        transform: rotateX(0) rotateY(0);
    }
    5% {
        transform: rotateX(0) rotateY(180deg);
    }
    15% {
        transform: rotateX(180deg) rotateY(0);
    }
}

.media-style .title .img {
    margin-top: 30px;
}
.media-style .title .img img {
    display: block;
    margin: 0 auto;
}
.media-block {
    position: relative;
    z-index: 1;
}
.media-block .office {
    position: absolute;
    top: 10%;
    right: 10px;
}
.media-block .office .text {
    margin-bottom: 15px;
}
.media-block .office .text .t-1 {
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--color-light-gray);
}
.media-block .office .text span,
.media-block .office .text img {
    display: block;
}
.media-block .office .text img {
    height: 41px;
}
.media-block .office .text span {
    line-height: 1.4;
    color: var(--theme-color);
    font-size: 16px;
}
.media-block .office .set a,
.media-block .office .set a span,
.media-block .office .set a i {
    display: block;
}
.media-block .office .set a {
    position: relative;
    background-color: var(--theme-color)
}
.media-block .office .set a .d {
    display: flex;
    padding-left: 15px;
    background: linear-gradient(-45deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .3)  60%, rgba(255, 255, 255, 0)  70%);
    background-size: 300% 100%;
    animation: ani-media-block-set 10s infinite linear;
}
.media-block .office .set a span,
.media-block .office .set a i {
    display: flex;
    height: 41px;
    line-height: 1;
    align-items: center;
}
.media-block .office .set a span {
    color: var(--color-white);
    font-size: 16px;
}
.media-block .office .set a i {
    width: 41px;
    background: url('../../images/icon_set_white.png') no-repeat center center / auto 50%;
    animation: ani-media-block-set-i 3s infinite linear;
}
.media-block .office .set a .data {
    display: none;
}

@keyframes ani-media-block-set {
    0% {
        background-position-x: 400%;
    }
    50% {
        background-position-x: 0%;
    }
    100% {
        background-position-x: -400%;
    }
}
@keyframes ani-media-block-set-i {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.media-block .box {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.media-block .box.show {
    display: block;
}
.media-block .box .item {
    display: none;
    position: absolute;
    top: 40px;
    left: 40px;
    right: 40px;
    bottom: 40px;
}
.media-block .box .item .close {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, .6) url('../../images/icon_close_white.png') no-repeat center center / 20px;
    z-index: 10;
}
.media-block .box .item .close:hover {
    background-color: rgba(231, 0, 18, .6);
}
.media-block .box .item .video {
    background-color: var(--color-black);
}
.media-block .box .item .video video {
    display: block;
    width: 100%;
}
.media-block .box .item .text {
    position: absolute;
    width: 50%;
    left: 0;
    bottom: 0;
}
.media-block .box .item .text::after {
    content: var(--text);
    position: absolute;
    top: 50%;
    right: 0;
    color: var(--color-pale-gray);
    font-size: 50px;
    transform: translateY(-50%);
}
.media-block .box .item .text p {
    color: var(--color-dark);
    font-size: 16px;
    font-weight: bold;
}
.media-floor {
    position: absolute;
    top: 0;
    right: 0;
}
.media-floor .box,
.media-floor .box .img,
.media-floor .box .text {
    position: relative;
    height: 100%;
}
.media-floor .box .img,
.media-floor .box .text {
    float: left;
}
.media-floor .box img {
    display: block;
    height: 100%;
}
.media-floor .box .text {
    margin-left: 10px;
    width: 90px;
}
.media-floor .box .text div {
    position: absolute;
    right: 0;
    width: 100%;
}
.media-floor .box .text div span {
    display: block;
    line-height: 1;
    color: var(--theme-color);
    font-size: 20px;
    text-align: right;
}
.media-floor .box .text div span:first-child {
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--color-light-gray);
}
.media-floor .box .text div span i {
    font-size: 14px;
}
.media-floor .box .text div.t-1 {
    top: 10%;
}
.media-floor .box .text div.t-2 {
    top: 30%;
}
.media-floor .box .text div.t-3 {
    top: 50%;
}
.media-floor .back,
.media-floor .front,
.media-floor .building {
    position: absolute;
    left: 0;
}
.media-floor .back,
.media-floor .front {
    top: 0;
    right: 100px;
    height: 100%;
}
.media-floor .building {
    top: 3.2%;
    bottom: 8.6%;
    width: 100%;
}
.media-floor .building .podium,
.media-floor .building .main {
    position: absolute;
    bottom: 0;
}
.media-floor .building .podium {
    left: 0;
    width: 59%;
    height: 21.4%
}
.media-floor .building .main {
    right: 0;
    width: 41%;
    height: 100%;
}
.media-floor .building .main .item {
    position: absolute;
    left: 0;
    width: 100%;
    height: 3.6%;
    transition: all .1s linear;
    cursor: pointer;
}
.media-floor .building .main .item.f-1 {
    bottom: 0;
    height: 5.4%;
}
.media-floor .building .main .item.f-2 {
    bottom: 5.4%;
    height: 3.6%;
}
.media-floor .building .main .item.f-3 {
    bottom: 9%;
    height: 5.2%;
}
.media-floor .building .main .item.f-4 {
    bottom: 14.2%;
}
.media-floor .building .main .item.f-5 {
    bottom: 17.8%;
}
.media-floor .building .main .item.f-6 {
    bottom: 21.4%;
}
.media-floor .building .main .item.f-7 {
    bottom: 25%;
}
.media-floor .building .main .item.f-8 {
    bottom: 28.6%;
}
.media-floor .building .main .item.f-9 {
    bottom: 32.2%;
}
.media-floor .building .main .item.f-10 {
    bottom: 35.8%;
}
.media-floor .building .main .item.f-11 {
    bottom: 39.4%;
    height: 3.7%;
}
.media-floor .building .main .item.f-12 {
    bottom: 43.1%;
}
.media-floor .building .main .item.f-15 {
    bottom: 46.7%;
}
.media-floor .building .main .item.f-16 {
    bottom: 50.3%;
}
.media-floor .building .main .item.f-17 {
    bottom: 53.9%;
    height: 3.7%;
}
.media-floor .building .main .item.f-18 {
    bottom: 57.6%;
}
.media-floor .building .main .item.f-19 {
    bottom: 61.2%;
}
.media-floor .building .main .item.f-20 {
    bottom: 64.8%;
}
.media-floor .building .main .item.f-21 {
    bottom: 68.4%;
    height: 3.7%;
}
.media-floor .building .main .item.f-22 {
    bottom: 72%;
    height: 3.7%;
}
.media-floor .building .main .item.f-23 {
    bottom: 75.7%;
}
.media-floor .building .main .item.f-25 {
    height: 3.7%;
    bottom: 79.3%;
}
.media-floor .building .main .item.f-26 {
    bottom: 82.9%;
}
.media-floor .building .main .item.f-27 {
    bottom: 86.6%;
}
.media-floor .building .main .item.f-28 {
    bottom: 90.2%;
}
.media-floor .building .main .item.f-29 {
    bottom: 93.8%;
    height: 6.2%;
}
.media-floor .back .building .main .item.lease {
    background-color: var(--g-color-1);
    animation: ani-media-floor-item 3s linear infinite;
}

@keyframes ani-media-floor-item {
    0% {
        background-color: var(--g-color-1);
    }
    50% {
        background-color: var(--color-gray);
    }
    100% {
        background-color: var(--g-color-1);
    }
}

.media-floor .back .building .main .item.hover {
    background-color: var(--color-white);
}
.media-floor .back .building .main .item.lease.hover {
    background: var(--color-gray) !important;
}
.media-floor .back .building .podium,
.media-floor .back .building .main {
    background-color: var(--g-color-1);
}
.media-floor .front .building .main .block {
    position: relative;
    height: 100%;
}
.media-floor .front .building .main .item .number {
    display: flex;
    position: absolute;
    left: 1%;
    bottom: 0;
    height: 90%;
    color: var(--theme-color);
    font-size: .8vh;
    align-items: center;
}
.media-floor .front .building .main .item.f-1 .number {
    top: 0;
    bottom: auto;
    height: 60%;
}
.media-floor .front .building .main .item.f-29 .number {
    height: 50%;
}
.media-floor .front .building .main .data {
    display: block;
    position: absolute;
    right: 0;
    padding: 0 10px;
    min-width: 110px;
    height: 3.6%;
    background-color: var(--theme-color);
}
.media-floor .front .building .main .data p {
    display: flex;
    height: 100%;
    color: var(--color-white);
    font-size: 12px;
    align-items: center;
}
.media-floor .front .building .main .data.f-1 {
    bottom: 0;
    height: 5.4%;
}
.media-floor .front .building .main .data.f-2 {
    bottom: 5.4%;
    height: 3.6%;
}
.media-floor .front .building .main .data.f-3 {
    bottom: 9%;
    height: 5.2%;
}
.media-floor .front .building .main .data.f-4 {
    bottom: 14.2%;
}
.media-floor .front .building .main .data.f-5 {
    bottom: 17.8%;
}
.media-floor .front .building .main .data.f-6 {
    bottom: 21.4%;
}
.media-floor .front .building .main .data.f-7 {
    bottom: 25%;
}
.media-floor .front .building .main .data.f-8 {
    bottom: 28.6%;
}
.media-floor .front .building .main .data.f-9 {
    bottom: 32.2%;
}
.media-floor .front .building .main .data.f-10 {
    bottom: 35.8%;
}
.media-floor .front .building .main .data.f-11 {
    bottom: 39.4%;
    height: 3.7%;
}
.media-floor .front .building .main .data.f-12 {
    bottom: 43.1%;
}
.media-floor .front .building .main .data.f-15 {
    bottom: 46.7%;
}
.media-floor .front .building .main .data.f-16 {
    bottom: 50.3%;
}
.media-floor .front .building .main .data.f-17 {
    bottom: 53.9%;
    height: 3.7%;
}
.media-floor .front .building .main .data.f-18 {
    bottom: 57.6%;
}
.media-floor .front .building .main .data.f-19 {
    bottom: 61.2%;
}
.media-floor .front .building .main .data.f-20 {
    bottom: 64.8%;
}
.media-floor .front .building .main .data.f-21 {
    bottom: 68.4%;
    height: 3.7%;
}
.media-floor .front .building .main .data.f-22 {
    bottom: 72%;
    height: 3.7%;
}
.media-floor .front .building .main .data.f-23 {
    bottom: 75.7%;
}
.media-floor .front .building .main .data.f-25 {
    height: 3.7%;
    bottom: 79.3%;
}
.media-floor .front .building .main .data.f-26 {
    bottom: 82.9%;
}
.media-floor .front .building .main .data.f-27 {
    bottom: 86.6%;
}
.media-floor .front .building .main .data.f-28 {
    bottom: 90.2%;
}
.media-floor .front .building .main .data.f-29 {
    bottom: 93.8%;
    padding: 5px 10px;
    height: 6.2%;
}
.media-floor .front .building .main .data.f-29 p {
    height: 50%;
}