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

.page-ctn{
    overflow: hidden;
}

.page-ctn .header {
    color: #9a7e85;
    margin-top: 120px;
    text-align: center;
    animation: headerIn 1s .6s forwards;
    opacity: 0;
}

.page-ctn .header .title-en {
    font-size: calc(52rem / 16);
    line-height: 1.5em;
    /*font-weight: bold;
    font-family: "Gotham", "Helvetica Now Display", sans-serif;*/
}

.page-ctn .header .title-cn {
    font-size: calc(30rem / 16);
    font-weight: 300;
    letter-spacing: .1em;
}

.section-distribution {
    position: relative;
}

.wrapper {
    margin: 0 auto;
    width: calc(58.33vw + 320px);
    position: relative;
    z-index: 220;
    color: white;
}

@keyframes mapIn {
    from {
        opacity: 0;
        transform: translateX(-10vw);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.map {
    width: 85%;
    padding-bottom: calc(94% * .85);
    margin-top: calc(80rem / 16);
    position: relative;
    animation: mapIn 1s .6s cubic-bezier(.6, 0, .4, 1) forwards;
    opacity: 0;
}

.map-img, .map-img-mobile{
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
}

.map-location-ctn {
    position: absolute;
    width: 75%;
    padding-bottom: calc(55% * .75);
    right: 0;
    bottom: 16.5%;
    height: auto;
}

.map-location {
    width: 100%;
    display: block;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

@keyframes cloud2In {
    from {
        opacity: 0;
        transform: translateX(6vw);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes cloud1In {
    from {
        opacity: 0;
        transform: translateX(-8vw);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.floating {
    width: calc(360vw / 19.2);
    height: calc(360vw / 19.2);
    position: absolute;
    right: 0;
    top: calc(128vw / 19.2);
}

@keyframes circleIn {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

.circle {
    width: calc(306vw / 19.2);
    height: calc(306vw / 19.2);
    border-radius: 50%;
    position: absolute;
    z-index: 340;
    background-color: #9a7e85;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    letter-spacing: .1em;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    animation: circleIn 1.2s 1.2s cubic-bezier(.7, 0, .3, 1) forwards;
    transform: scale(0);
}

.circle .title {
    font-size: calc(23vw / 19.2);
    font-weight: lighter;
    margin-bottom: calc(6vw / 19.2);
    line-height: calc(28.76em / 23);
}

.circle .item {
    line-height: calc(32em / 19);
    font-size: calc(19vw / 16);
}

.circle .num {
    font-size: calc(32em / 19);
    font-family: "Helvetica Now Display", sans-serif;
    font-weight: bold;
}

.cloud {
    position: absolute;
    height: auto;
}

.cloud1 {
    z-index: 350;
    bottom: 2%;
    right: 2%;
    width: calc(154vw / 19.2);
    animation: cloud1In 1.6s 1.6s cubic-bezier(.6, 0, .4, 1) forwards;
    opacity: 0;
}

.cloud2 {
    z-index: 330;
    left: 1%;
    top: 20%;
    width: calc(57vw / 19.2);
    animation: cloud2In 1.6s 1.6s cubic-bezier(.6, 0, .4, 1) forwards;
    opacity: 0;
}

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

.back {
    position: absolute;
    width: 100%;
    height: calc(100% - 480rem / 16);
    bottom: calc(120rem / 16);
    left: 0;
    background-color: #221f20;
    z-index: 200;
    animation: fadeIn 1s .2s forwards;
    opacity: 0;
}

.site-footer {
    position: relative;
    z-index: 400;
}

.main {
    padding-bottom: 10.56rem;
}

.city-circle {
    color: #221f20;
    text-align: center;
    width: calc(90vw / 19.2);
    height: calc(90vw / 19.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.city {
    position: absolute;
    animation: cityFadeIn 1s linear forwards;
    opacity: 0;
}

.overlays {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.city-name-cn {
    font-size: calc(19vw / 19.2);
    line-height: 1.25em;
    letter-spacing: .2em;
    margin-right: -.1em;
}

.city-name-en {
    font-size: calc(13vw / 19.2);
    line-height: 1.25em;
    letter-spacing: .025em;
}

.city-list {
    margin-top: calc(10vw / 19.2);
    width: calc(180vw / 19.2);
    display: flex;
    flex-direction: column;
}

.city-list a {
    font-size: calc(12vw / 19.2);
    position: relative;
    padding-left: calc(20vw / 19.2);
    letter-spacing: .08em;
    line-height: 1.6em;
    padding-top: .125em;
    padding-bottom: .125em;
}

.city-list a::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: 0;
    bottom: calc(1vw / 19.2);
    left: calc(6vw / 19.2);
    margin: auto;
    border-left: calc(8vw / 19.2) solid white;
    border-top: calc(4vw / 19.2) solid transparent;
    border-bottom: calc(4vw / 19.2) solid transparent;
}

@media (max-width: 1850px) {

    .bottom-nav li {
        border-color: white;
    }

    .main {
        padding-bottom: calc(8em + 60px);
    }
}

.section-new-city{
    margin-top: calc(-120rem / 16);
    background-color: #9a7e85;
    display: flex;
    flex-direction: column;
    position: relative;
}

.page-header{
    text-align: center;
    margin-top: calc(60rem / 16);
    color: white;
}

.page-title-en{
    position: relative;
    font-size: 3rem;
    z-index: 220;
    font-weight: bold;
     font-family: "Helvetica Now Display", sans-serif;
}

.page-title-cn{
    font-size: calc(30rem / 16);
    margin-bottom: 1rem;
    font-weight: lighter;
    letter-spacing: .2em;
}

.page-desc{
    line-height: calc(28rem / 16);
    font-size: 1rem;
    letter-spacing: .1em;
}

.loc-list{
    /*
    1920 720 360
    1366 366 183

    554k = 177
    k = .319
    */
    margin-top: 4rem;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    padding: 0 calc(32vw - 254px) calc(140rem / 16);
}

.loc-list::after{
    content: "";
    position: absolute;
    width: 100%;
    height: calc(100% - 260rem / 16 * .68);
    bottom: 0;
    left: 0;
    background: #221f20;
    z-index: 200;
    align-items: stretch;
}

.loc-list::before,
.section-new-city::before{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    left: 0;
    top: 0;
    right: 0;
    margin: auto;
    align-items: stretch;
    border-top: calc(7rem / 16) solid #221f20;
    border-left: calc(8rem / 16) solid transparent;
    border-right: calc(8rem / 16) solid transparent;
    z-index: 205;
}

.loc-list::before{
    top: calc(260rem / 16 * .68);
    border-top: calc(7rem / 16) solid #9a7e85;
}

.site-footer{
    background: #221f20;
}

.loc{
    width: 50%;
    flex: 0 0 auto;
    margin-bottom: calc(30rem / 16);
}

.loc a{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 205;
    padding-bottom: calc(48rem / 16);
}

.loc-cover{
    width: calc(260rem / 16);
    height: calc(260rem / 16);
    border-radius: 50%;
    overflow: hidden;
    position: relative;
}

.loc-cover img{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}

.loc-info{
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.loc-name-en{
    z-index: 220;
    background-color: white;
    height: 32%;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: .375rem;
}

.loc-name-en span{
    font-size: calc(15rem / 16);
    color: #8a634b;
    line-height: calc(20rem / 16);
    letter-spacing: .2em;
}

.loc-name-cn{
    color: #8a634b;
    font-weight: 300;
    font-size: calc(26rem / 16);
    letter-spacing: .1rem;
    margin: 1.5rem 0;
}

.loc-desc{
    font-size: calc(14rem / 16);
    color: #ffffff;
    letter-spacing: .1em;
    line-height: calc(26rem / 16);
    font-family: "Source Han Sans CN", sans-serif;
    margin-bottom: calc(24rem / 16);
}

.loc-link{
    display: inline-block;
    padding: calc(7.5rem / 16) calc(20rem / 16);
    font-size: calc(12rem / 16);
    letter-spacing: .2em;
    border: 1px solid #d1d1d1;
    justify-content: flex-end;
    margin-top: auto;
    transition: .1s;
}

.loc-link:hover{
    border-color: #8a634b;
    color: white;
    background-color: #8a634b;
}

.map-img{
    display: block;
}

.map-img-mobile{
    display: none;
}

.map-location{
    display: block;
}

.map-location-mobile{
    display: none;
}

@media (max-width: 750px) {

    .page-ctn{
        width: 100%;
        overflow: hidden;
    }

    .site-footer{
        border-top: none;
        margin-top: calc(-2rem / 16);
    }

    .wrapper{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .floating {
        position: absolute;
        width: calc(305rem / 24);
        height: calc(305rem / 24);
        right: inherit;
        left: calc(80rem / 24);
        top: 0;
        order: 1;
    }
    .circle {
        width: calc(308rem / 24);
        height: calc(308rem / 24);
    }
    .section-distribution {
        position: relative;
        padding-top: calc(60rem / 24);
    }
    .back {
        height: calc(583rem / 24);
        bottom: 0;
    }
    .section-new-city {
        margin-top: 0;
    }
    .page-header {
        margin-top: calc(60rem / 24);
    }
    .page-title-en {
        font-size: calc(60rem / 24);
    }
    .page-title-cn {
        font-size: calc(40rem / 24);
    }
    .page-desc {
        line-height: calc(28rem / 16);
        font-size: calc(24rem / 24);
    }
    .loc {
        width: 100%;
        padding: 0 calc(62rem / 24);
    }
    .loc a {
        padding-top: 0;
    }
    .loc-name-cn {
        font-size: calc(30rem / 24);
    }
    .loc-desc {
        font-size: calc(24rem / 24);
        line-height: calc(45rem / 24);
    }
    .loc-list {
        padding: 0 calc(32vw - 254px);
    }

    .circle .title {
        font-size: calc(26rem / 24);
        margin-bottom: calc(6rem / 24);
    }

    .circle .item {
        font-size: calc(21rem / 24);
    }

    .circle .num {
        font-size: calc(34rem / 21);
    }

    .cloud1{
        width: calc(167rem / 24);
        bottom: -10%;
    }
    .cloud2{
        display: none;
    }

    .map-img {
        display: none;
    }

    .map{
        width: calc(820rem / 24);
        left: calc(-160rem / 24);
        margin-top: calc(184rem / 24);
        padding-bottom: 0;
        height: calc(661.4rem / 24);
        margin-bottom: calc(170rem / 24);
    }

    .map-img-mobile{
        display: block;
    }

    .map-location{
        display: none;
    }

    .map-location-mobile{
        display: block;
    }
    .map-location-ctn{
        padding-bottom: 0;
        width: calc(645rem / 24);
        right: calc(-52rem / 24);
        top: calc(274rem / 24);
    }
    .circle .title {
        font-weight: 500;
    }

}