:root {
    font-size: 16px;
}

html,
body {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

#poster {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    /* background: linear-gradient(0deg, #277FBE 0%, #0E3E96 30%); */

}

.poster-wrapper {
    left: 50%;
    top: 50%;
    position: absolute;
    display: none;
    transform: translate(-50%, -50%);
    user-select: none;
    pointer-events: none;
}

.poster-wrapper[desktop] {
    width: calc(100 * 1.85rem);
    height: 100rem;
}

.poster-wrapper[mobile] {
    width: 100rem;
    height: calc(100 * 2.095rem);
}

.poster-wrapper[desktop] .area-light {
    position: absolute;
    left: 26.97916666666667%;
    top: 14.72222222222222%;
    width: 45.67708333333333%;
    height: 12.78125%;
    background-color: rgba(255, 255, 255, 0);

}

.poster-wrapper[mobile] .area-light {
    position: absolute;
    left: 6.96296296296296%;
    top: 17.8125%;
    width: 88.74074074074074%;
    height: 6.69357798165138%;
    background-color: rgba(255, 255, 255, 0);
}

.poster-wrapper .light {
    position: absolute;
    background: url(img/star0.png) no-repeat center center;
    padding: 100px;
    left: -100px;
    top: -100px;
    background-size: contain;
    transform-origin: center center;
    opacity: 0;
}

.poster-wrapper[mobile] .light {
    padding: 50px;
    left: -50px;
    top: -50px;
}

.poster-wrapper .poster-img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.poster-wrapper .poster-img img {
    height: 100%;
    width: 100%;
    vertical-align: top;
    object-fit: cover;
    object-position: center center;
    opacity: 0;
}

.poster-enter {
    cursor: pointer;
    pointer-events: all;
}

@media screen and (orientation: portrait) {
    .poster-wrapper[mobile] {
        display: block;
    }
}

@media screen and (orientation: landscape) {
    .poster-wrapper[desktop] {
        display: block;
    }
}