body {
    background-color: #000;
}

.slide-show {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;


}

.swiper,
.swiper-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.slide-card {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: rgba(0, 0, 0, .35);
}

.slide-content {
    width: 40%;
    text-align: left;
    padding: 4vw;
    ;
    padding-left: 8vw;

}


.slide-items {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
}

.slide-items-img {
    width: 100vw;
    height: 70vh;
}

.slide-items-content-intro {
    padding: 20px 40px;
}

.slide-items-content {
    width: 60vw;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}



.slide-items-content h1 {

    font-weight: 600;
    font-size: 2.3vw;
    width: 100%;
    text-shadow: 0 0 5px 2px rgba(0, 0, 0, .35);
}

.slide-items-content p {
    font-weight: 400;
    font-size: 1vw;
    line-height: 1.4;
    text-shadow: 0 0 5px 2px rgba(0, 0, 0, .35);
}


.slide-content h1 {
    color: #fff;
    font-weight: 600;
    font-size: 2.3vw;
    text-shadow: 0 0 5px 2px rgba(0, 0, 0, .35);
}


.slide-content p {
    color: #fff;
    font-weight: 400;
    font-size: 1vw;
    line-height: 1.4;
    text-shadow: 0 0 5px 2px rgba(0, 0, 0, .35);
}


@keyframes slide-show-intro {
    0% {
        background: url('../imgs/building1/1号楼黄浦路1.jpg') center center / cover no-repeat rgb(0, 0, 0);
        background-color: #000;
    }

    20% {
        background: url('../imgs/building1/1号楼黄浦路1.jpg') center center / cover no-repeat rgb(0, 0, 0);
        background-color: #000;
    }

    25% {
        background: url('../imgs/building1/1号楼观景露台1.jpg') center center / cover no-repeat rgb(0, 0, 0);
        background-color: #000;
    }

    45% {
        background: url('../imgs/building1/1号楼观景露台1.jpg') center center / cover no-repeat rgb(0, 0, 0);
        background-color: #000;
    }

    50% {
        background: url('../imgs/building1/1号楼迎宾厅.jpg') center center / cover no-repeat rgb(0, 0, 0);
        background-color: #000;
    }

    70% {
        background: url('../imgs/building1/1号楼迎宾厅.jpg') center center / cover no-repeat rgb(0, 0, 0);
        background-color: #000;
    }

    75% {
        background: url('../imgs/building1/1号楼峰会厅.jpg') center center / cover no-repeat rgb(0, 0, 0);
        background-color: #000;
    }

    100% {
        background: url('../imgs/building1/1号楼峰会厅.jpg') center center / cover no-repeat rgb(0, 0, 0);
        background-color: #000;
    }
}


.slide-show-ting {
    opacity: 20;
    animation: slide-show-ting 15s infinite;
}


@keyframes slide-show-ting {
    0% {
        background: url('../imgs/building1/huiketing-0.jpg') center center / cover no-repeat rgb(0, 0, 0);
        background-color: #000;
    }

    20% {
        background: url('../imgs/building1/huiketing-0.jpg') center center / cover no-repeat rgb(0, 0, 0);
        background-color: #000;
    }

    25% {
        background: url('../imgs/building1/huiketing-1.jpg') center center / cover no-repeat rgb(0, 0, 0);
        background-color: #000;
    }

    45% {
        background: url('../imgs/building1/huiketing-1.jpg') center center / cover no-repeat rgb(0, 0, 0);
        background-color: #000;
    }

    50% {
        background: url('../imgs/building1/huiketing-2.jpg') center center / cover no-repeat rgb(0, 0, 0);
        background-color: #000;
    }

    70% {
        background: url('../imgs/building1/huiketing-2.jpg') center center / cover no-repeat rgb(0, 0, 0);
        background-color: #000;
    }

    75% {
        background: url('../imgs/building1/huiketing-0.jpg') center center / cover no-repeat rgb(0, 0, 0);
        background-color: #000;
    }

    100% {
        background: url('../imgs/building1/huiketing-0.jpg') center center / cover no-repeat rgb(0, 0, 0);
        background-color: #000;
    }
}


.room-nav-box {
    width: 100vw;
    height: 100vh;
    position: fixed;
    display: flex;
    align-items: flex-end;
    background-color: #0d0d0d;
    background-image: url(../imgs/huiyaji/bg.jpeg);
    background-size: cover;

}


.room-nav-box-content {
    width: 100vw;
    height: calc(100vh - 114px);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding-left: 100px;
    padding-top: 80px;
    padding-right: 80px;
    /* transform: translateX(50vw); */
}

.room-nav-box-info {
    width: 26vw;
    height: 100%;
}

.room-nav-box-info h1 {
    color: #fff;
    font-size: 38px;
    font-weight: bold;
    margin-top: 0px;
    line-height: 1;
}

.room-nav-box-info p {
    color: #Fff;
    opacity: 0.7;
    line-height: 1.6;
    font-size: 15px;
    margin-right: 20px;
}

.room-nav-box-pic {
    flex: 1;
    margin-left: 30px;
    height: 100%;

}

.room-nav-box-pic-box {
    width: 60vw;
    height: calc(60vw * 0.6375);
    overflow: hidden;
    position: absolute;

}

.room-nav-box-pic-box-border {
    position: relative;
}

.room-nav-box-pic-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.room-nav-box-imgs {
    width: 100%;
    height: 100%;
    background-color: #000;
    position: fixed;
    z-index: 1;
    display: none;
}

.room-nav-box-pic .tips {
    width: 100px;
    height: 110px;
    margin-left: -100px;
    position: absolute;
    margin-top: 48vh;
    background-color: #333;
    padding: 20px 20px;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
}

.tips div {
    margin-top: -8px;
}

.room-nav-box-pic h1 {
    font-size: 22px;
    margin-bottom: 0px;
    font-weight: 400;
}

.room-nav-box-pic p {
    font-size: 15px;
}

.room-nav-box-imgs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
}


.btn-menus {
    width: 180px;
    height: 40px;
    position: fixed;
    bottom: 80px;
    left: 100px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #9d4529;
    font-size: 16px;
    cursor: pointer;
    opacity: 0.8;
    z-index: 99999;
}

.btn-menus-box {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    background-color: #9d4529;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;

}

.btn-menus:hover {
    opacity: 1;
}


.room-nav-arrow {
    width: 100%;
    height: 60px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: -30px;
    z-index: 20;
    padding-right: 60px;
}

.room-nav-arrow-left,
.room-nav-arrow-right {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    margin-right: 10px;
    opacity: 0.8;
    user-select: none;

}

.room-nav-arrow-left:hover,
.room-nav-arrow-right:hover {
    background-color: #c35c3b;
    opacity: 1;
}

.room-nav-arrow-left:hover svg,
.room-nav-arrow-right:hover svg {
    fill: #fff;
}


.room-nav-box-bottom {
    width: 100vw;
    height: 10vh;
    z-index: 3;
    position: fixed;
    bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.room-nav-box-bottom-intro {
    width: 55vw;
    height: 80px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.room-nav-box-bottom-icon {
    width: 60px;
    height: 80px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    color: #fff;
    margin-left: 10px;
    cursor: pointer;
}

.room-nav-box-bottom-icon svg {
    width: 34px;
    height: 34px;
    display: block;
    margin: 0px auto;
    margin-top: 12px;
}

.room-nav-box-bottom-intro-title {
    font-size: 24px;
    color: #fff;
    padding: 0px 30px;
    text-align: left;
    font-weight: 600;
}

.room-nav-box-bottom-intro-des {
    flex: 1;
    color: #fff;
    padding: 0px 20px;
}

.room-nav-box-bottom-intro-line {
    height: 30px;
    width: 0.5px;
    background-color: rgba(255, 255, 255, 0.1);
}

.point,
.point::before,
.point::after {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    content: '';
}

.point::before {
    animation: scale 2s infinite;
}

.point::after {
    animation: scale2 2s infinite;
}

@keyframes scale {
    0% {
        transform: scale(1);
        opacity: .9
    }

    100% {
        transform: scale(6);
        opacity: 0;
    }
}

@keyframes scale2 {
    0% {
        transform: scale(1);
        opacity: .9;
    }

    100% {
        transform: scale(12);
        opacity: 0;
    }
}


.point,
.point::before,
.point::after {
    /* 设置颜色 */
    background-color: rgba(241, 34, 30, .9);
    cursor: pointer;
}

.point2,
.point2::before,
.point2::after {
    /* 设置颜色 */
    background-color: rgba(0, 221, 254, .9);
}

.point3,
.point3::before,
.point3::after {
    /* 设置颜色 */
    background-color: rgba(1, 88, 255, .9);
}

.point4,
.point4::before,
.point4::after {
    /* 设置颜色 */
    background-color: rgba(135, 229, 8, .9);
}

.room-nav-box-menus {
    transform: translateX(-50vw);
    width: 40vw;
    height: 100vh;
    position: fixed;
    overflow: hidden;
    left: 0px;
    top: 0px;
    display: flex;
    align-items: flex-start;
    padding: 30px;
    padding-top: 120px;
    z-index: 3;
    overflow-y: scroll;
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
    scrollbar-width: none;
    /* firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
}

.room-nav-box-menus::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
}

.room-nav-box-menus-item {
    width: 100%;
    text-align: center;
    color: #fff;
    font-weight: 400;
    margin-bottom: 40px;
    cursor: pointer;
    transform: scale(1);
    font-size: 16px;
    opacity: 0.7;
}

.room-nav-box-menus-item:hover {
    animation: a-hover 0.4s;
    animation-fill-mode: forwards;
}

@keyframes a-hover {
    0% {
        /* transform: scale(1); */
        opacity: 0.7;
    }

    100% {
        opacity: 1;
        /* transform: scale(1.1); */

    }
}





.room-nav-box-menus-item img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, .25);

    margin-bottom: 20px;
}


.a-hide {

    animation: a-hide 2s;
    animation-fill-mode: forwards;
}


@keyframes a-hide {
    0% {
        transform: scale(1);
        opacity: .9;
        z-index: 1;
        display: block;
    }

    100% {
        transform: scale(1.4);
        opacity: 0;
        z-index: 0;
        display: none;
    }
}



.a-show {
    animation: d-show 2s;
    animation-fill-mode: forwards;
}


@keyframes d-show {
    0% {
        transform: scale(1.2);
        opacity: 0;

    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}



.open-menus {
    animation: open-menus 1.2s;
    animation-fill-mode: forwards;
}

@keyframes open-menus {
    0% {
        transform: translateX(-40vw);
        opacity: 0;
    }

    100% {
        opacity: 1;
        transform: translateX(0vw);

    }
}


.close-menus {
    animation: close-menus 1.2s;
    animation-fill-mode: forwards;
}

@keyframes close-menus {
    0% {
        transform: translateX(0vw);
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateX(-40vw);

    }
}


.left-pic {
    animation: left-pic 1.2s;
    animation-fill-mode: forwards;
}

@keyframes left-pic {
    0% {
        transform: translateX(40vw);

    }

    100% {

        transform: translateX(0vw);

    }
}

.right-pic {
    animation: right-pic 1.2s;
    animation-fill-mode: forwards;
}

@keyframes right-pic {
    0% {
        transform: translateX(0vw);

    }

    100% {

        transform: translateX(40vw);

    }
}

.area-pic {
    width: 50vw;
    height: calc(50vw * 0.31666);
    margin-top: 30px;
    position: relative;
}

.clearfix::before,
.clearfix::after {
    content: '';
    display: table;
    clear: both;
}

.area-pic img {
    width: 50vw;
    opacity: 0.9;
    position: absolute;
}

.box-area-pic-mask {
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    position: fixed;
    left: 0px;
    top: 0px;
    bottom: 0px;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    display: none;
}



.box-area-pic {
    background: #fff;
    width: 60vw;
    height: 54vh;
    padding: 30px;

}

.box-area-pic2 {
    height: 240px;
}

.box-area-pic img.area {
    width: 100%;
}

.box-area-pic-footer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.box-area-pic-footer .btn {
    padding: 8px 12px;
    background-color: #d70917;
    border-radius: 4px;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    margin-top: 30px;
}

table.gridtable {
    width: 100%;
    font-size: 14px;
    color: #333333;
    border-width: 0px;
    border-color: #eee;
    border-collapse: collapse;
}

table.gridtable th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #eee;

}

table.gridtable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #eee;
    background-color: #ffffff;
    text-align: center;
}


.m-show {
    display: flex;
    animation: m-show 1s;
    animation-fill-mode: forwards;
}


@keyframes m-show {
    0% {

        opacity: 0;


    }

    100% {
        opacity: 1;

    }
}


.m-hide {
    display: none;
}

.area-pic {
    opacity: 0;
}

.area-pic-show {
    animation: area-pic-show 1s;
    animation-fill-mode: forwards;
}


@keyframes area-pic-show {
    0% {
        transform: translateY(100px);
        opacity: 0;


    }

    100% {
        transform: translateY(0px);
        opacity: 1;

    }
}

.area-pic-hide {
    animation: area-pic-hide 1s;
    animation-fill-mode: forwards;
}


@keyframes area-pic-hide {
    0% {
        transform: translateY(0px);
        opacity: 1;


    }

    100% {
        transform: translateY(100px);
        opacity: 0;

    }
}



.right-pic-open {
    animation: right-pic-open 1.2s;
    animation-fill-mode: forwards;
}

@keyframes right-pic-open {
    0% {
        transform: translateX(0vw);

    }

    100% {

        transform: translateX(30vw);

    }
}


.right-pic-close {
    animation: right-pic-close 1.2s;
    animation-fill-mode: forwards;
}

@keyframes right-pic-close {
    0% {
        transform: translateX(30vw);

    }

    100% {

        transform: translateX(0vw);

    }
}






.right-pic-open2 {
    animation: right-pic-open2 1.2s;
    animation-fill-mode: forwards;
}

@keyframes right-pic-open2 {
    0% {
        transform: translateX(0vw);

    }

    100% {

        transform: translateX(18vw);

    }
}


.right-pic-close2 {
    animation: right-pic-close2 1.2s;
    animation-fill-mode: forwards;
}

@keyframes right-pic-close2 {
    0% {
        transform: translateX(18vw);

    }

    100% {

        transform: translateX(0vw);

    }
}



/* .area-info-open {
    animation: area-info-open 1.2s;
    animation-fill-mode: forwards;
}

@keyframes area-info-open{
    0% {
        transform: translateY(30vh);

    }

    100% {

        transform: translateY(0vw);

    }
} */


.area-info {
    margin-top: 30px;
    margin-right: 80px;
    opacity: 0.7;
}

.area-info-header {
    height: 40px;
    border-bottom: 1px #666 solid;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.area-info-header-item {

    color: #fff;
    text-align: center;
}

.area-info-bodyer {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.area-info-bodyer-item {
    text-align: center;
    color: #fff;
}