.plan-scenes-ctn{
    width: 100%;
    color: white;
    position: relative;
    background-color: #2c292a;
    height: calc((38vw + 475px) * .647 + 86rem / 16);
    overflow: hidden;
}

.plan-scenes {
    position: relative;
    width: calc(38vw + 475px);
    height: calc((38vw + 475px) * .647);
    margin: auto;
}

.plan-scene {
    /*
    1920 1205
    960 840
    960k = 365
    k = 38vw
    */

    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    margin: auto;
    opacity: 0;
    transition: .5s .5s opacity, .5s .5s visibility;
    visibility: hidden;
    z-index: 200;
}

.plan-scene.active {
    opacity: 1;
    transition: .5s 0s opacity, .5s 0s visibility;
    visibility: visible;
    z-index: 220;
}

.plan-back {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 200;
    object-fit: cover;
}

.plan-header {
    color: #82634b;
    margin-top: calc(96rem / 16);
    text-align: center;
    margin-bottom: -0.05rem;
    z-index: 305;
}

.plan-title-en {
    font-size: calc(48rem / 16);
    line-height: calc(57.32rem / 16);
    font-weight: bold;
    /* color: #555657; */
    color: #c3c3c3;
}

.plan-header-inner{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 290;
    text-align: center;
    width: 100%;
}

.plan-desc{
    position: absolute;
    left: 0;
    top: calc(60rem / 16);
    width: calc(220rem / 16);
    z-index: 370;
    color: #221f20;
    padding-left: calc(30rem / 16);
    padding-top: 1rem;
    padding-bottom: 1rem;
    letter-spacing: .1em;
}

.plan-desc>div{
    position: relative;
    z-index: 310;
    opacity: 0;
    animation-delay: 3.6s;
}

@keyframes planBackIn1 {
    from{
        width: 0%;
        height: 1px;
    }
    to{
        width: 100%;
        height: 1px;
    }
}

@keyframes planBackIn2 {
    from{
        height: 1px;
    }
    to{
        height: 100%;
    }
}

.plan-desc::after{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: 0;
    left: 0;
    background: #fff;
    animation: planBackIn1 .6s 2.4s cubic-bezier(.8, 0, .2, 1) forwards,
    planBackIn2 .6s 3s cubic-bezier(.8, 0, .2, 1) forwards;
}

.plan-desc span{
    display: inline-block;
    margin-left: calc(3rem / 16);
    margin-right: calc(3rem / 16);
}

.plan-desc .part1{
    font-size: calc(13rem / 16);
    line-height: calc(17rem / 16);
}

.plan-desc .part1 sup{
    vertical-align: baseline;
    transform-origin: left top;
    transform: scale(.8);
    display: inline-block;
}

.plan-desc .part2{
    font-size: calc(12.26rem / 16);
    line-height: calc(12rem / 16);
    font-weight: bold;
    margin-top: calc(25rem / 16);
}

.plan-title-cn {
    font-size: calc(26rem / 16);
    line-height: 1em;
    letter-spacing: .5em;
    font-weight: 400;
    margin-top: calc(18rem / 16);
    margin-bottom: calc(18rem / 16);
    padding-left: .5em;
    font-family: "Source Han Sans CN", sans-serif;
}

.plan-navigation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 320;
    padding-top: calc(32vw / 19.2);
    font-size: calc(14.6rem / 16);
    line-height: calc(13.3rem / 16);
}

@keyframes restore{
    to{
        opacity: 1;
        transform: none;
    }
}

.fade-in{
    animation: restore 1s forwards;
    opacity: 0;
}

.fade-in-up{
    animation: restore 1s forwards;
    opacity: 0;
    transform: translateY(2rem);
}

.plan-navigation sup{
    font-size: .5rem;
    vertical-align: middle;
    transform: translate(-20%, -20%) scale(.75);
    display: inline-block;
}

.plan-content {
    text-align: center;
    z-index: 300;
    position: absolute;
    width: 100%;
    top: 0;
    letter-spacing: .1em;
    padding-top: .875rem;
}

.plan-tab{
    height: calc(36rem / 16);
    margin-top: calc(20vw / 19.2);
    display: flex;
    justify-content: center;
    align-items: stretch;

    font-size: calc(14.5rem / 16);
}

.plan-tab a{
    letter-spacing: .3em;
    flex: 0 0 auto;
    line-height: calc(22rem / 16);
    padding: calc(6rem / 16) calc(12rem / 16) calc(6rem / 16) calc(14rem / 16);
    margin: 0 calc(6rem / 16);
    transition: .2s;
    border: 1px solid rgba(255, 255, 255, .6);
}
.plan-tab a:hover,
.plan-tab a.active{
    background-color: white;
    color: #80634b;
}

.scene-pagination {
    position: absolute;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 360;
    top: 0;
    right: 2rem;
    width: .875rem;
}

.scene-bullet {
    width: .875rem;
    height: .875rem;
    margin: .5rem 0;
    border-radius: 50%;
    background-color: white;
    opacity: .5;
    cursor: pointer;
    transition: .2s;
}

.scene-bullet.active {
    opacity: 1;
}

.plan-title {
    font-size: calc(28rem / 16);
    line-height: calc(48rem / 16);
    letter-spacing: .15em;
    margin-top: calc(6rem / 16);
    margin-bottom: calc(6rem / 16);
}

.location-list {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 250;
}

.location {
    position: absolute;
    z-index: 260;
    width: calc(150rem / 16);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    transform: translate(-50%, -100%);
}

.location-name-cn {
    font-size: 1rem;
    line-height: calc(18rem / 16);
    letter-spacing: .1em;
    margin-top: calc(3rem / 16);
    text-shadow: 1px 1px 4px rgba(0, 0, 0, .3);
}

.location-name-sub{
    font-size: calc(12rem / 16);
    line-height: 1em;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, .3);
}

.location .line {
    width: 100%;
    flex: 0 0 auto;
    margin-top: .2rem;
    position: relative;
    transform-origin: center bottom;
    transform: scaleY(0);
    height: 0;
    opacity: .7;
}

.location .line::before{
    content: "";
    width: 1px;
    background-color: white;
    position: absolute;
    height: 100%;
    left: 0;
    right: 0;
    margin: auto;
}

@keyframes locationLineIn {
    from {
        transform: scaleY(0);
    }
    to {
        transform: none;
    }
}

@keyframes locationNameIn {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.plan-track {
    position: absolute;
    z-index: 230;
    width: 67%;
    height: auto !important;
    left: 6.4%;
    top: 23%;
    animation: fadeIn 1s 2s linear forwards;
    opacity: 0;
}

.location-name-cn, .location-name-en, .location-name-sub {
    opacity: 0;
}

.location-name-en{
    display: none;
}

@keyframes planContentIn {
    from {
        opacity: 0;
        transform: translateY(20%);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.plan-scene.active .plan-content {
    animation: planContentIn 1.5s cubic-bezier(.7, 0, .3, 1) forwards;
}

.plan-scene.active .line {
    animation: locationLineIn 1s cubic-bezier(.7, 0, .3, 1) forwards;
}

.plan-scene.active .location-name-cn, .plan-scene.active .location-name-sub {
    animation: locationNameIn 1s cubic-bezier(.7, 0, .3, 1) forwards;
}

.cross-street {
    position: absolute;
    width: 17.34%;
    height: calc(213rem / 16);
    left: 43.65%;
    top: 29.5%;
    z-index: 240;

    mix-blend-mode: color-burn;
    opacity: .5;
}

/*ie dumb ass*/
.cross-street+.cross-street,
.cross-street+.cross-street+.cross-street{
    display: none;
}

@supports (mix-blend-mode: color-dodge) {
    .cross-street+.cross-street{
        opacity: .5;
        mix-blend-mode: color-dodge;
        display: block;
    }

    .cross-street+.cross-street+.cross-street{
        opacity: .6;
        mix-blend-mode: hard-light;
        display: block;
    }
}

.location-pin{
    position: absolute;
    z-index: 280;

    width: 5.64%;
    left: 51.62%;
    top: 41.02%;

    opacity: 0;
    transform-origin: 20% bottom;
    transform: translate(-1rem, 1rem) scale(.5);
}

.active .location-pin{
    animation: restore .8s 1.6s cubic-bezier(.7, 0, .3, 1) forwards;
}

.scene-link{
    position: absolute;
    right: calc(50rem / 16);
    /* bottom: calc(40rem / 16); */
    bottom: calc(90rem / 16);
    margin: auto;
    width: calc(167rem / 16);
    z-index: 280;
    opacity: 0;
    transition: .3s;
    transform-origin: center bottom;
}

.scene-link img{
    display: block;
    width: 100%;
    height: auto;
}

.scene-link:hover{
    transform: scale(1.04);
}

.active .scene-link{
    animation: fadeIn 1s 2.4s forwards;
}

.scene4.active .scene-link{
    animation-delay: 3.2s;
}

.site-footer{
    margin-top: -1px;
}


.btn-prev,
.btn-next{
    width: calc(20rem / 16);
    height: calc(62rem / 16);
    position: absolute;
    top: 0;
    bottom: calc(86rem / 16);
    margin: auto;
    transition: .3s;
    cursor: pointer;
    z-index: 405;
}

.btn-prev{
    background: url("../images/index/arr_prev.svg") center/contain no-repeat;
    /*
    1920 44
    960 20
    960k = 24
    */
    left: calc(2.5vw - 4px);
}

.btn-next{
    background: url("../images/index/arr_next.svg") center/contain no-repeat;
    right: calc(2.5vw - 4px);
}

.btn-prev:hover,
.btn-next:hover{
    transform: scale(1.1);
}

.slide-prev {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 291;
}

.slide-next {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 291;
}