@font-face {
    font-family: "Heiti";
    src: url("../fonts/heiti.eot") format("eot"), url("../fonts/heiti.svg#heiti") format("svg"), url("../fonts/heiti.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
}

:root {
    --yellow: #FBDB65;
    --petrona: 'Petrona', serif;
}

a {
    text-decoration: none;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
}

p:last-child,
p:last-of-type {
    margin-bottom: 0;
}

a:hover {
    color: black;
}

.img-full {
    max-width: 100%;
    min-width: 100%;
}

.d-none {
    display: none !important;
}

section {
    width: 80vw;

    max-height: 90vh;
    transition: .5s;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    background-color: #fff;
    position: relative;
}
section.title-section{
    width: 100vw;
    max-height: 100vh;
    height: 100vh;
    margin: 0;
}

.scale-down {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
}

#exhibition-title {
    background-color: var(--yellow);
}

@media (min-width: 2px) {
    .top-menu {
        position: fixed;
        z-index: 99;
        width: 100vw;
        display: flex;
        justify-content: space-between;
        padding: 10px 30px;
        box-sizing: border-box;
    }
    .top-menu a {
        color: #000;
        text-decoration: underline;
        font-family: var(--petrona);
        font-weight: 600;
        font-size: 13px;
    }
    .content-end-left p {
        font-size: 16px;
    }
    .content-end-left table tr td {
        padding-right: 30px;
        font-weight: 500;
    }
    .content-end-left p {
        font-size: 16px;
    }
    .desc-img-status-right p {
        font-style: italic;
    }
    .desc-img-top__eclipse p {
        font-style: italic;
    }
    .desc-img-eclipse__bottom p {
        font-style: italic;
    }
    .text-arrival-right p {
        font-family: var(--petrona);
        font-weight: 600;
        font-style: italic;
    }
    .text-arrival__left p {
        font-family: var(--petrona);
        font-weight: 600;
    }
    .text-write-up p {
        font-family: var(--petrona);
        font-weight: 500;
        font-size: 12.5px;
    }
    .content-end-right {
        height: 100%;
        background-color: var(--yellow);
        padding: 20px;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        display: flex;
        text-align: center;
        width: 35%;
        flex-shrink: 0;
        box-sizing: border-box;
    }
    .btn-outline-rounded {
        padding: 10px 40px;
        border: 2px solid #636060;
        border-radius: 50px;
        color: #000;
        text-transform: uppercase;
        font-size: 20px;
        font-family: var(--petrona);
        font-weight: 700;
    }
    .content-end-right h3 {
        font-size: 20px;
        margin-bottom: 15px;
        font-weight: 500;
        font-family: var(--petrona);
        text-transform: uppercase;
    }
    .content-end {
        display: flex;
        width: 100vw;
        height: 100vh;
        justify-content: space-between;
        align-items: flex-start;
    }
    .content-end-left {
        width: 65vw;
        flex-shrink: 0;
        padding: 30px 50px;
        height: 100vh;
        box-sizing: border-box;
    }
    .content-end-left h2 {
        font-size: 54px;
        font-family: var(--petrona);
        margin-bottom: 20px;
        font-weight: 800;
    }
    .content-end-left table {
        width: 100%;
        font-family: var(--petrona);
        font-weight: 600;
    }
    .content-end-left th {
        font-size: 16px;
    }
    .content-end-left td {
        font-size: 14px;
    }
    .content-end-left th {
        padding: 20px 0;
        border-bottom: 1px solid #000;
        text-align: left;
    }
    .content-end-left tr td {
        padding: 10px 0;
    }
    .content-end-left p {
        margin-bottom: 20px;
        font-weight: 500;
        font-size: 16px;
    }
    .content-life {
        width: 90vw;
        height: 75vh;
        margin: 12.5vh auto;
        position: relative;
        z-index: 999;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .content-life__left {
        width: 50%;
        flex-shrink: 0;
        position: relative;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-right: 15px;
        box-sizing: border-box;
    }
    .text-life-left {
        position: absolute;
        width: 50%;
        top: 0;
        left: 0;
        padding: 10px 74px 10px 10px;
        background-color: var(--yellow);
        box-sizing: border-box;
    }
    .img-life-left {
        width: 80%;
        display: flex;
        flex-direction: row-reverse;
        align-items: flex-end;
        position: relative;
        justify-content: center;
        margin-top: 25px;
    }
    p.desc-img-life-left {
        padding: 10px 0 0;
        margin-right: 10px;
        border-top: 1px solid #000;
        text-align: right;
        font-style: italic;
        font-size: 13px;
        font-weight: 600;
    }
    .desc-img-life-right {
        width: 110px;
    }
    .desc-img-life-right p {
        font-style: italic;
        font-size: 15px;
        font-weight: 600;
    }
    .img-life-left img {
        width: 76%;
    }
    .content-life__right {
        width: 50%;
        box-sizing: border-box;
        flex-shrink: 0;
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
    }
    .content-life__right img {
        width: 63%;
        margin-right: 10px;
    }
    .text-life-left p {
        font-size: 13px;
    }
    .desc-img-life-right {
        padding: 10px 0 0;
        border-top: 1px solid #000;
    }
    .img-encounter-left {
        width: 160%;
        text-align: right;
        margin-bottom: 10px;
    }
    .img-encounter-left .desc-img {
        margin-top: 10px;
    }
    .content-encounter-right {
        width: 60%;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        height: calc(100vh - 25vh);
    }
    .content-encounter-right img {
        width: 85%;
    }
    .desc-img-encounter {
        width: 200px;
        padding: 10px 0 30px;
        border-top: 1px solid #000;
    }
    .content-encounter {
        width: 90vw;
        height: calc(100vh - 25vh);
        position: relative;
        z-index: 999;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin: 12.5vh auto;
    }
    .content-encounter-left {
        width: 40%;
        flex-shrink: 0;
        height: 100%;
    }
    .text-encounter-left {
        background-color: var(--yellow);
        padding: 20px;
        width: 55%;
    }
    .img-encounter-left {
        width: 170%;
        text-align: right;
        margin-bottom: 10px;
    }
    .content-practice__left {
        width: 40%;
        height: 100%;
        flex-shrink: 0;
    }
    .text-practice-left {
        height: 100%;
        width: 60%;
        padding: 20px;
        background-color: var(--yellow);
        margin: 40px 0 0;
    }
    .img-practice-left {
        position: relative;
        width: 150%;
    }
    .content-practice__right {
        width: 58%;
        flex-shrink: 0;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: calc(100% - 12.5vh);
        position: relative;
    }
    .desc-practice-right {
        padding: 10px 0 0;
        border-top: 1px solid #000;
        position: absolute;
        width: 143px;
        left: 0;
        bottom: 18%;
    }
    .desc-practice-right p {
        font-style: italic;
        font-size: 16px;
    }
    .content-practice__right img {
        height: 105%;
    }
    .img-practice-left img {
        margin: 15px 0 5px;
    }
    .content-king__left {
        width: 42%;
        flex-shrink: 0;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }
    .text-king-left {
        width: 60%;
        padding: 20px;
        background-color: var(--yellow);
        height: calc(100% - 10vh);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }
    .desc-img-right p {
        font-style: italic;
        font-size: 14px;
        line-height: 19px;
    }
    .content-king__right {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 53%;
        height: calc(100% - 12.5vh);
        flex-shrink: 0;
    }
    .content-king__right img {
        height: 85%;
        margin-left: 10px;
    }
    .img-king-left {
        width: calc(140% + 20%);
        position: relative;
        left: 0;
        margin: 15px 0;
    }
    .img-king-left .desc-img {
        margin-left: 20%;
        margin-bottom: 10px;
    }
    .content-king {
        width: 90vw;
        height: calc(100vh - 12.5vh);
        position: relative;
        z-index: 999;
        margin: 12.5vh auto;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .content-enter {
        width: 90vw;
        height: calc(100vh - 12.5vh);
        margin: 12.5vh auto 0;
        position: relative;
        z-index: 999;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .content-enter__left {
        width: 50%;
        flex-shrink: 0;
        height: 100%;
        padding-bottom: 12.5vh;
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
    }
    .img-enter-left {
        width: calc(162% - 20px);
        left: -91%;
        position: relative;
    }
    .img-enter-left img {
        margin: 0 0 5px;
    }
    .content-enter__right {
        width: 60%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        position: relative;
        left: -10%;
        flex-shrink: 0;
        margin-top: 40px;
    }
    .content-enter__right img {
        width: 100%;
    }
    .desc-img__enter-right {
        width: 147px;
        padding: 10px 0 20px;
        border-top: 1px solid #000;
        align-self: flex-end;
        margin-right: 15px;
    }
    .desc-img__enter-right p {
        font-style: italic;
        font-size: 16px;
    }
    .text-enter-left {
        height: calc(100% - (12.5vh + 25px));
        width: 50%;
        background-color: var(--yellow);
        margin-top: -15px;
        padding: 20px;
    }
    .content-fortune {
        width: 90vw;
        height: calc(100vh - 12.5vh);
        position: relative;
        z-index: 9999;
        margin: 12.5vh auto 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .content-fortune__left {
        width: 30%;
        height: 100%;
        padding-top: 40px;
    }
    .text-fortune-left {
        padding: 20px;
        width: 70%;
        background-color: var(--yellow);
        height: 100%;
    }
    .img-fortune-left {
        width: 130%;
    }
    .img-fortune-left img {
        margin: 15px 0 5px;
    }
    .content-fortune__right img {
        width: 100%;
    }
    .desc-img-fortune__right {
        padding: 10px 0 0;
        width: 143px;
        border-top: 1px solid #000;
        margin-top: -45px;
    }
    .content-fortune__right {
        width: 68%;
        display: flex;
        flex-direction: column;
        margin-top: -15px;
        justify-content: center;
        align-items: center;
    }
    .content-stars__right {
        width: 60%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 50px;
    }
    .content-stars__right img {
        width: 100%;
    }
    .desc-img-stars__right {
        padding: 10px 0;
        border-top: 1px solid #000;
        width: 215px;
        align-self: flex-end;
    }
    .img-stars-left .desc-img {
        margin-top: 5px;
    }
    .desc-img-stars__right p {
        font-style: italic;
        font-size: 15px;
    }
    .desc-img-fortune__right p {
        font-style: italic;
        font-size: 16px;
    }
    .desc-img-fortune__right {
        width: 150px;
        margin-right: 30px;
    }
    .content-stars {
        position: relative;
        width: 90vw;
        height: calc(100vh - 12.5vh);
        z-index: 999;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin: 12.5vh auto 0;
    }
    .content-stars__left {
        width: 40%;
        flex-shrink: 0;
        height: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
    }
    .text-stars-left {
        width: 54%;
        background-color: var(--yellow);
        height: calc(100% - 13vh);
        padding: 20px 20px 0;
    }
    .img-stars-left {
        width: 173%;
        position: relative;
        left: -74%;
    }
    .content-dream {
        width: 90vw;
        height: 100vh;
        margin: 0 auto;
        position: relative;
        z-index: 999;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .content-dream__left {
        width: 60%;
        flex-shrink: 0;
        height: 80vh;
        align-self: flex-end;
        padding-left: 40px;
    }
    .content-dream__right {
        width: 50%;
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        left: -5%;
        height: 100%;
    }
    .desc-img-dream-right img {
        height: 61%;
    }
    .content-dream__right img {
        height: 49%;
    }
    .desc-img-dream-right {
        align-self: flex-start;
        padding-top: 10px;
        border-top: 1px solid #000;
        margin-top: 26vh;
        margin-right: 15px;
    }
    .text-dream__left {
        height: 100%;
        width: 35%;
        background-color: var(--yellow);
        padding: 20px;
    }
    .desc-img-dream-right p {
        font-style: italic;
        font-size: 15px;
    }
    .img-dream-left img {
        width: 100%;
        margin: 10px 0 0;
    }
    .img-dream-left {
        width: calc(240% + 60px);
        position: relative;
        left: -60px;
    }
    .img-dream-left .desc-img {
        padding: 5px 0 0 60px;
    }
    .desc-img-dream-right img {
        height: 50%;
    }
    .content-world {
        position: relative;
        width: 90vw;
        margin: 0 auto;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        z-index: 999;
    }
    .content-world__left {
        width: 40%;
        flex-shrink: 0;
        height: 78vh;
        padding-top: 12.5vh;
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
    }
    .text-world__left {
        background-color: var(--yellow);
        height: 100%;
        width: 40%;
        padding: 15px;
    }
    .img-world-left {
        width: 240%;
        position: relative;
        left: -140%;
    }
    .desc-img__world-right {
        padding-top: 10px;
        border-top: 1px solid #000;
    }
    .content-world__right {
        width: 55%;
        display: flex;
        flex-shrink: 0;
        justify-content: space-between;
        align-items: center;
        height: 100%;
    }
    .content-world__right img {
        height: 100%;
        margin-right: 15px;
    }
    .content-mark {
        position: relative;
        width: 90vw;
        height: 100vh;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        z-index: 999;
    }
    .inner-content-mark__right {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .desc-img-mark-right {
        padding-top: 10px;
        border-top: 1px solid #000;
    }
    .content-mark__right {
        width: 68%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: calc(100vh - 25vh);
        margin-top: 12.5vh;
    }
    .content-mark__right img {
        width: 73%;
        margin-left: 15px;
    }
    .content-mark__left {
        margin: 10.5vh 0 12.5vh;
        height: calc(100vh - 23vh);
        width: 30%;
        flex-shrink: 0;
    }
    .text-content-mark__left {
        background-color: var(--yellow);
        height: 100%;
    }
    .text-content-mark__left {
        width: 75%;
        padding: 20px;
        box-sizing: border-box;
    }
    .img-content-mark-left {
        margin: 15px 0;
        width: 150%;
    }
    .content-patience__left {
        width: 40%;
        margin-top: 15vh;
        flex-shrink: 0;
    }
    .text-left-patience {
        background-color: var(--yellow);
        padding: 15px;
        width: 60%;
    }
    .img-patience__left {
        width: 160%;
        text-align: right;
    }
    .img-patience__left img {
        width: 100%;
        margin-bottom: 5px;
    }
    .content-patience__right {
        width: 53%;
        flex-shrink: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }
    .content-patience__right img {
        width: 100%;
        margin-top: 20px;
    }
    .desc-img-patience__right {
        width: 50%;
        padding-top: 10px;
        border-top: 1px solid #000;
    }
    .content-patience__left {
        width: 40%;
        margin-top: 12.5vh;
        flex-shrink: 0;
    }
    .text-left-patience {
        background-color: var(--yellow);
        padding: 15px;
        width: 60%;
    }
    .img-patience__left {
        width: 160%;
        text-align: right;
    }
    .img-patience__left img {
        width: 100%;
        margin-bottom: 5px;
    }
    .content-patience {
        position: relative;
        width: 90vw;
        height: 100vh;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        z-index: 999;
        margin: 0 auto;
    }
    .icon-socmed-profile {
        margin-top: 15px;
    }
    .content-status {
        position: relative;
        width: 90vw;
        margin: 0 auto;
        height: 100vh;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        z-index: 9999;
    }
    .content-status__left {
        width: 30%;
        height: 100%;
        flex-shrink: 0;
    }
    .text-status__left {
        width: 60%;
        background-color: var(--yellow);
        height: 100%;
        margin-top: 17vh;
        padding: 20px;
    }
    .img-status-left {
        margin: 15px 0;
        width: 160%;
    }
    .img-status-left img {
        width: 100%;
        margin-bottom: 5px;
    }
    .content-status__right {
        width: 66%;
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
    }
    .content-status__right img {
        width: 82%;
        margin-left: 10px;
    }
    .desc-img-status-right {
        height: 100%;
        padding-top: 10px;
        border-top: 1px solid #000;
        margin-top: 37vh;
    }
    .content-longing {
        position: relative;
        width: 90vw;
        height: 100vh;
        margin: 0 auto;
        z-index: 999;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .content-longing__left {
        width: 25%;
        padding: 0 44px 0 0;
    }
    .content-longing__right {
        width: 70%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 100%;
    }
    .content-longing__right img {
        width: 66%;
        margin-right: 20px;
    }
    .outer-desc-img__longing-right p {
        font-style: italic;
    }
    .item-desc-img-longing {
        width: 124px;
    }
    .text-longing__left {
        background-color: var(--yellow);
        padding: 20px;
        width: 80%;
    }
    .outer-desc-img__longing-right p {
        font-style: italic;
    }
    .outer-desc-img__longing-right {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-around;
    }
    .inner-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
    }
    .content-hope {
        position: relative;
        z-index: 9999;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        width: 90vw;
        margin: 0 auto;
        height: 100%;
    }
    .content-hope__left {
        margin-top: 11vh;
        width: 47%;
        flex-shrink: 0;
        position: relative;
        height: 100%;
    }
    .img-content__hope-left {
        width: calc(200% - 20px);
        position: relative;
        left: calc(-100% + 20px);
    }
    .img-content__hope-left p {
        margin: 5px 0 0;
        width: calc(50% - 20px);
    }
    .text-content__hope-left {
        width: 50%;
        margin-left: auto;
        height: 100%;
        background-color: var(--yellow);
        padding: 15px;
    }
    .content-hope__right img {
        width: 65%;
        margin-right: 15px;
    }
    .desc-hope-right p {
        font-weight: 600;
        font-style: italic;
        font-size: 16px;
    }
    .desc-hope-right {
        padding-top: 10px;
        border-top: 1px solid #000;
        margin-top: 100px;
    }
    .content-hope__right {
        width: 50%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
    }
    .img-content__hope-left img {
        width: 100%;
        margin-top: 40px;
    }
    .inner-content__balance {
        height: 100vh;
        width: 100vw;
        position: absolute;
        top: 0;
        left: 0;
    }
    .content-balance {
        width: 900px;
        margin: 0 auto;
        position: relative;
        display: flex;
        justify-content: space-between;
        z-index: 9999;
        height: 100vh;
        top: 0;
    }
    .content-balance__left {
        width: 30%;
    }
    .content-balance__right img {
        width: 79%;
    }
    .desc-img__balance-right {
        height: auto;
        padding-top: 10px;
        border-top: 1px solid #000;
        margin-right: 10px;
        margin-top: 45vh;
    }
    .content-balance__right {
        width: 68%;
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding-top: 42px;
    }
    .text-balance-left {
        width: 60%;
        background-color: var(--yellow);
        margin: 11vh auto 0;
        padding: 15px;
        height: 100vh;
    }
    .text-balance-left img {
        width: 140%;
        position: relative;
        left: -20%;
        margin-bottom: 10px;
    }
    .content-arrival-right__top img {
        width: 80%;
        margin-top: -20px;
    }
    p {
        font-size: 14px;
    }
    p.desc-img {
        font-style: italic;
        margin-bottom: 0;
        font-size: 10px;
        font-family: var(--petrona);
    }
    .desc-img {
        font-style: italic;
        font-size: 13px;
    }
    .content-arrival-right__bottom {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-top: -30px;
    }
    .content-arrival-right__bottom img {
        width: 80%;
    }
    .content-arrival__right {
        flex-shrink: 0;
        width: 55%;
    }
    .text-arrival-right {
        margin-top: 50px;
        padding-top: 30px;
        border-top: 1px solid #000;
        margin-right: 10px;
    }
    .img-arrival-left {
        width: 120%;
        margin-top: 15px;
    }
    .bg-arrival {
        position: absolute;
        top: 30px;
        left: 0;
        width: 100vw;
        background: url(../img/bg-arrival@2x.png) no-repeat center;
        background-size: cover;
        height: 75vh;
    }
    .bg-eclipse {
        background: url(../img/bg-eclipse@2x.png) no-repeat center;
        background-size: cover;
        height: 75vh;
    }
    .bg-balance {
        background: url(../img/bg-balance@2x.png) no-repeat center;
        background-size: cover;
    }
    .bg-longing {
        background: url(../img/bg-longing@2x.png) no-repeat center;
        background-size: cover;
    }
    .bg-status {
        background: url(../img/bg-status@2x.png) no-repeat center;
        background-size: cover;
    }
    .bg-patience {
        background: url(../img/bg-patience@2x.png) no-repeat center;
        background-size: cover;
    }
    .bg-mark {
        background: url(../img/bg-mark@2x.png) no-repeat center;
        background-size: cover;
    }
    .bg-world {
        background: url(../img/bg-world@2x.png) no-repeat center;
        background-size: cover;
    }
    .bg-dream {
        background: url(../img/bg-dream@2x.png) no-repeat center;
        background-size: cover;
    }
    .bg-stars {
        background: url(../img/bg-stars@2x.png) no-repeat center;
        background-size: cover;
    }
    .bg-fortune {
        background: url(../img/bg-fortune@2x.png) no-repeat center;
        background-size: cover;
    }
    .bg-enter {
        background: url(../img/bg-enter@2x.png) no-repeat center;
        background-size: cover;
    }
    .bg-king {
        background: url(../img/bg-king@2x.png) no-repeat center;
        background-size: cover;
    }
    .bg-practice {
        background: url(../img/bg-practice@2x.png) no-repeat center;
        background-size: cover;
    }
    .bg-encounter {
        background: url(../img/bg-encounter@2x.png) no-repeat center;
        background-size: cover;
    }
    .bg-life {
        background: url(../img/bg-life@2x.png) no-repeat center;
        background-size: cover;
    }
    .bg-hope,
    .bg-life,
    .bg-encounter,
    .bg-practice,
    .bg-king,
    .bg-enter,
    .bg-fortune,
    .bg-stars,
    .bg-mark,
    .bg-dream,
    .bg-world,
    .bg-patience,
    .bg-status,
    .bg-longing,
    .bg-balance,
    .bg-eclipse {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100vw;
        height: 75vh;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
    }
    .bg-hope {
        background: url(../img/bg-hope@2x.png) no-repeat center;
        background-size: cover;
    }
    .inner-content__eclipse {
        height: 100vh;
        width: 100vw;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 999999;
    }
    .content-eclipse {
        position: relative;
        z-index: 1;
        height: 75vh;
        margin: 12.5vh auto;
    }
    .content-top__eclipse {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        width: 90vw;
        margin: 0 auto;
        padding-left: 120px;
    }
    .content-bottom__eclipse {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        width: 90vw;
        margin: 0 auto;
        position: relative;
    }
    .text-eclipse {
        position: absolute;
        width: 140px;
        background-color: var(--yellow);
        top: -239px;
        padding: 15px 15px 101px;
        left: 0;
    }
    .content-bottom__eclipse img {
        width: 73%;
        position: relative;
        margin: 65px auto;
    }
    .desc-img-eclipse__bottom {
        width: 110px;
        position: absolute;
        right: 0;
        padding-top: 10px;
        border-top: 1px solid #000;
        top: 74px;
    }
    .desc-img-top__eclipse {
        width: 80px;
        flex-shrink: 0;
        padding: 10px 10px 0;
        border-top: 1px solid;
        margin-left: 15px;
    }
    .desc-img-top__eclipse p {
        margin-bottom: 0;
    }
    .content-top__eclipse img {
        width: 54%;
        margin-top: -46px;
    }
    .header-section {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 12.5vh;
        background-color: #fff;
        padding: 0 5%;
        position: relative;
        z-index: 999;
    }
    .header-section h2 {
        font-size: 32px;
        font-family: var(--petrona);
    }
    .title-section {
        font-size: 40px;
        margin: 30px 60px;
        font-family: var(--petrona);
    }
    .content-arrival__left {
        width: 40%;
        flex-shrink: 0;
        align-self: stretch;
        height: 100%;
    }
    .text-arrival__left {
        width: 80%;
        background-color: var(--yellow);
        padding: 20px;
        height: 100%;
        margin-top: -15px;
    }
    .content-arrival {
        width: 90%;
        margin: 12.5vh auto 0;
        position: relative;
        z-index: 999;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        height: calc(100vh - 12.5vh);
    }
    .page-number {
        font-size: 30px;
        font-weight: 600;
    }
    .content-profiles {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        height: 100%;
    }
    .profile-left {
        display: flex;
        width: 60vw;
        flex-shrink: 0;
        justify-content: space-between;
        align-items: flex-start;
    }
    .item-profile-left {
        width: 50%;
    }
    .item-profile-left img {
        height: 200px;
        object-fit: cover;
        object-position: top;
    }
    .desc-profile-left {
        padding: 20px 0 0 75px;
    }
    .desc-profile-left h3 {
        font-size: 20px;
        margin-bottom: 15px;
        font-family: var(--petrona);
    }
    .desc-profile-left p {
        font-size: 14px;
        font-family: var(--petrona);
        font-weight: 600;
        line-height: 18px;
    }
    .profile-right {
        flex-grow: 1;
        margin-left: 43px;
        padding: 10px 0 10px 10px;
        position: relative;
        align-self: stretch;
    }
    .profile-right:after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 57%;
        height: 100%;
        background-color: var(--yellow);
    }
    .profile-right img {
        position: relative;
        z-index: 2;
    }
    .icon-socmed-profile a {
        color: #000;
        font-size: 35px;
        display: inline-block;
        margin-right: 5px;
    }
    .content-home {
        height: 100vh;
        width: 800px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        /*justify-content: space-between;*/
    }
    .subtitle {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        margin-top: -15px;
    }
    .subtitle h2 {
        font-size: 40px;
    }
    .subtitle h3 {
        font-family: var(--petrona);
        font-size: 37px;
        width: 520px;
        line-height: 39px;
        margin-left: 15px;
        margin-top: 10px;
    }
    .text-title h1 {
        font-family: var(--petrona);
        font-size: 85px;
    }
    .text-title {
        margin-bottom: 70px;
        margin-top: 40px;
    }
    .content-write-up {
        height: 70vh;
        position: relative;
        top: 15vh;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .write-up__left {
        position: absolute;
        width: 65%;
        top: 0;
        left: 0;
        z-index: 2;
    }
    .write-up__right {
        position: absolute;
        height: 85%;
        width: 89%;
        right: 0;
        top: 0;
        background-color: var(--yellow);
    }
    .write-up__left img {
        margin-top: -20px;
    }
    .subtitle-write-up {
        display: flex;
        width: 564px;
        position: absolute;
        right: 0;
        margin-top: 23px;
    }
    .subtitle-write-up h2 {
        padding-right: 30px;
        font-family: var(--petrona);
        font-size: 33px;
        line-height: 35px;
        font-style: italic;
    }
    .write-up__right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-right: 60px;
    }
    .text-write-up {
        width: 249px;
    }
    .subtitle-write-up h2:last-child {
        padding-right: 0;
    }
    p {
        margin-bottom: 15px;
        font-family: var(--petrona);
        font-weight: 700;
    }
    .desc-write-up {
        border-top: 1px solid #000;
        padding-top: 8px;
        margin-top: 20px;
    }
    .desc-write-up p {
        font-style: italic;
        margin-bottom: 0;
        font-weight: 600;
    }
    .term-write-up {
        font-size: 9px;
        bottom: -30px;
        font-family: var(--petrona);
        font-weight: 700;
        position: absolute;
    }
    .term-write-up a {
        color: #000;
        text-decoration: underline;
    }
    .item-desc-img-longing p {
        margin-bottom: 0;
    }
    .item-desc-img-longing {
        padding-top: 10px;
        border-top: 1px solid #000;
    }
    .desc-img-right {
        padding: 10px 0 0;
        border-top: 1px solid #000;
    }
    .content-practice {
        width: 90vw;
        height: calc(100vh - 12.5vh);
        position: relative;
        z-index: 999;
        margin: 12.5vh auto 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .desc-img-patience__right p {
        font-style: italic;
        font-size: 15px;
    }
    .desc-img-mark-right p {
        font-style: italic;
        font-size: 16px;
    }
    .img-stars-left .desc-img {
        margin-top: 5px;
    }
    .desc-img-stars__right p {
        font-style: italic;
        font-size: 15px;
    }
    .desc-img-encounter p {
        font-style: italic;
        font-size: 14px;
    }
}

@media (min-width: 1200px) {
    .content-bottom__eclipse img {
        width: 73%;
        position: relative;
        margin: 147px auto 0;
    }
    .desc-img-eclipse__bottom {
        width: 152px;
        position: absolute;
        right: 0;
        padding-top: 10px;
        border-top: 1px solid #000;
        top: 20px;
    }
    .text-eclipse {
        position: absolute;
        width: 243px;
        background-color: var(--yellow);
        top: -239px;
        padding: 15px 15px 166px;
        left: 0;
    }
    .content-end-left th {
        font-size: 2vh;
    }
    .content-end-left td {
        font-size: 1.7vh;
    }
    .text-encounter-left p {
        font-size: 1.7vh;
    }
    .content-practice__right {
        width: 50%;
    }
    .content-practice__left {
        width: 50%;
    }
    .text-practice-left {
        width: 55%;
    }
    .img-practice-left {
        position: relative;
        width: 170%;
    }
    .desc-img-dream-right {
        margin-top: 23vh;
    }
    .desc-img-dream-right p {
        font-style: italic;
        font-size: 2.4vh;
    }
    .desc-img__world-right {
        width: 168px !important;
        font-style: italic;
    }
    .content-world__right {
        justify-content: flex-start;
    }
    .desc-img-status-right p {
        font-size: 2.5vh;
    }
    .desc-img__balance-right {
        margin-top: 41vh;
    }
    .desc-img__balance-right p {
        font-style: italic;
        font-size: 3vh;
        font-weight: 600;
        line-height: 3.8vh;
    }
    .desc-profile-left {
        padding: 20px 0 0 125px;
    }
    .text-write-up p {
        font-size: 2.5vh;
    }
    .profile-left {
        width: 65vw;
    }
    .content-end-right {
        width: 20%;
    }
    .content-end-left {
        width: 80vw;
    }
    .text-encounter-left {
        width: 50%;
    }
    .img-encounter-left {
        width: 188%;
        margin-bottom: -10px;
    }
    .content-encounter-right {
        width: 60%;
    }
    .content-encounter-left {
        width: 40%;
    }
    .content-king__right img {
        height: 105%;
    }
    .content-king__left {
        width: 45%;
    }
    .content-dream__right img {
        height: 65%;
    }
    .content-king,
    .content-life,
    .content-encounter,
    .content-practice,
    .content-encounter,
    .content-enter,
    .content-world,
    .content-fortune,
    .content-stars,
    .content-mark,
    .content-patience,
    .content-longing,
    .content-status,
    .content-dream {
        width: 70vw;
    }
    .desc-img-patience__right {
        margin-top: 80px;
    }
    .header-section {
        padding: 0 15%;
    }
    .content-status__left {
        width: 40%;
    }
    .content-status__right {
        width: 57%;
    }
    .content-status__right img {
        width: 76%;
    }
    .content-hope__right img {
        width: 66%;
        margin-bottom: -90px;
    }
    .content-hope {
        width: 70vw;
    }
    .content-balance__left {
        width: 58%;
    }
    .content-balance__right {
        width: 62%;
    }
    .content-balance {
        width: 70vw;
    }
    .text-balance-left {
        margin: 11vh 0 0 10%;
    }
    .content-balance__right img {
        width: 66%;
    }
    .content-top__eclipse img {
        width: 30vw;
        margin-top: -30px;
    }
    .content-bottom__eclipse {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        width: 70vw;
        position: relative;
    }
    .content-arrival__left {
        width: 30%;
    }
    .content-arrival__right {
        flex-shrink: 0;
        width: 64%;
    }
    .content-arrival {
        width: 70%;
    }
    .content-arrival-right__top img {
        width: 67%;
    }
    .content-arrival-right__bottom img {
        width: 68%;
    }
    p {
        font-size: 2vh;
    }
    .item-profile-left img {
        height: 45vh;
    }
    .desc-profile-left h3 {
        font-size: 3vh;
    }
    .desc-profile-left p {
        font-size: 2vh;
        line-height: 2.5vh;
    }
    .icon-socmed-profile a {
        font-size: 5vh;
    }
    .profile-right {
        margin-left: 5vw;
        margin-top: -20px;
    }
    .content-write-up {
        height: 80vh;
        top: 10vh;
    }
    .write-up__left {
        width: 50%;
    }
    .text-write-up {
        width: 18vw;
        padding: 10px 0;
    }
    .write-up__right {
        padding-right: 15vw;
    }
    .text-write-up p {
        font-size: 16px;
    }
    .term-write-up {
        font-size: 1.2vh;
        bottom: -30px;
        font-family: var(--petrona);
        font-weight: 700;
    }
    .subtitle-write-up {
        width: 36vw;
        margin-top: 3vh;
    }
    .subtitle-write-up h2 {
        font-size: 4.6vh;
        line-height: 4.8vh;
    }
    .write-up__right {
        height: 72vh;
        width: 75%;
    }
    .artist-profile {
        margin-left: 125px !important;
    }
    .subtitle h3 {
        font-size: 30px;
        font-weight: 600;
        width: auto;
        line-height: 4.6vh;
        margin-top: 15px;
    }
    .subtitle h2 {
        font-size: 76px;
        width: 4em;
        flex-shrink: 0;
    }
    .content-home {
        width: 50vw;
    }
    .text-title h1 {
        font-size: 10vh;
    }
}


/* Scroll css */

.slide {
    width: 100vw;
    height: 100vh;
}

::-webkit-scrollbar {
    /*display: none;*/
}

.outer-wrapper {
    width: 100vh;
    height: 100vw;
    transform: rotate(-90deg) translateX(-100vh);
    transform-origin: top left;
    overflow-y: scroll;
    overflow-x: hidden;
    position: absolute;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.wrapper {
    display: flex;
    flex-direction: row;
    /*width: calc(200vw + 19 * 70vw);*/
    width: auto;
    transform: rotate(90deg) translateY(-100vh);
    transform-origin: top left;
}

.one {
    background: #efdefe;
}

.two {
    background: #a3f3d3;
}

.three {
    background: #0bbaa0;
}

.four {
    background: #00dfdf;
}
@media only screen and (min-width: 992px) {
    section{
        width: auto
    }
    
    .wrapper {
    display: flex;
    flex-direction: row;
    /*width: calc(200vw + 19 * 70vw);*/
    width: auto;
    transform: rotate(90deg) translateY(-100vh);
    transform-origin: top left;
}

}