@media (orientation: landscape) {
    .main-screen {
        background: url(../images/landscape/background-purple.jpg) no-repeat top left;
        background-size: cover;
    }

    .main-screen .title {
        left: 4%;
        top: 7%;
    }

    .main-screen .subtitle-tip {
        top: 16%;
        padding: 1.3rem 2.2rem 1.3rem 4%;
    }

    .main-screen .w-body {
        height: 88%;
        top: 8%;
    }

    .point-1 {
        left: -10%;
        top: -5.5%;
    }

    .point-2 {
        left: 86%;
        top: 5.5%;
    }

    .point-3 {
        left: -41%;
        top: 22.5%;
    }

    .point-4 {
        left: 107%;
        top: 28.5%;
    }

    .point-5 {
        left: -41%;
        top: 54.5%;
    }

    .point-6 {
        left: 95%;
        top: 84.5%;
    }

    .pop-up-window-content {
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        padding: 10px;
    }

    .pop-up-window .close-button {
        width: 6.8rem;
        cursor: pointer;
    }

    .pop-up-window-content .video-wrapper {
        width: 100%;
        height: 60%; /*67*/
        margin: 0 auto;
    }

    .pop-up-window-content .portrait-svg {
        display: none;
    }

    .pop-up-window .text-wrapper {
        width: 94%;
        top: 1rem;
    }

    .pop-up-window .text-wrapper .text {
        padding: 0 5%;
       /*margin-bottom: 5%;*/
    }

    .pop-up-window .text-wrapper .title {
        padding: 0 5% 2rem 5%;
    }

    .call-point-middle {
        cursor: pointer;
    }

    .pop-up-window .video-play-button {
        cursor: pointer;
    }
}

@media (orientation: landscape) and (max-aspect-ratio: 7/5) {
    .pop-up-window-content .video-wrapper {
        height: 58%;
    }
}

@media (orientation: landscape) and (max-aspect-ratio: 5/4) {
    .pop-up-window-content .video-wrapper {
        height: 54%;
    }
}

@media (orientation: portrait) {
    .main-screen {
        background: url(../images/portrait/background-purple-1280.jpg) no-repeat top left;
        background-size: cover;
    }

    .main-screen .title {
        left: 8%;
        top: 4%;
    }

    .main-screen .title .title-line-1 {
        font-size: 2.2rem;
    }

    .main-screen .title .title-line-2 {
        font-size: 3.4rem;
    }

    .main-screen .subtitle-tip {
        top: 11%;
        padding: 1rem 2rem 1rem 8%;
    }

    .main-screen .w-body {
        height: 78%;
        top: 17%;
    }

    .point-1 {
        left: -10%;
        top: -2.5%;
    }

    .point-2 {
        left: 83%;
        top: 5.5%;
    }

    .point-3 {
        left: -29%;
        top: 20.5%;
    }

    .point-4 {
        left: 98%;
        top: 27.5%;
    }

    .point-5 {
        left: -32%;
        top: 55.5%;
    }

    .point-6 {
        left: 91%;
        top: 84.5%;
    }

    .pop-up-window {
        width: 100%;
    }

    .pop-up-window-content {
        width: 100%;
        height: 100%;
    }

    .pop-up-window .close-button {
        width: 6.0rem;
    }

    .pop-up-window-content .video-wrapper {
        width: 100%;
        height: 57%;
    }

    .pop-up-window-content .landscape-svg {
        display: none;
    }

    .pop-up-window .text-wrapper {
        width: 88%;
        top: 1.6rem;
    }

    .pop-up-window .text-wrapper .text {
        padding: 0;
        font-size: 2.5rem;
        line-height: 3.2rem;
        /*margin-bottom: 8%;*/
    }

    .pop-up-window .title {
        padding: 0 0 3rem 0;
    }
}

@media (orientation: portrait) and (min-height: 1281px) {
    .main-screen {
        background: url(../images/portrait/background-purple-1920.jpg) no-repeat top left;
        background-size: cover;
    }
}

@media (orientation: portrait) and (max-aspect-ratio: 3/4) {
    .pop-up-window-content .video-wrapper {
        height: 53%;
    }
}

@media (orientation: portrait) and (max-aspect-ratio: 2/3) {
    .pop-up-window-content .video-wrapper {
        height: 44%;
    }
}

@media (orientation: portrait) and (max-aspect-ratio: 9/16) {
    .pop-up-window-content .video-wrapper {
        height: 40%;
    }
}

@media (orientation: portrait) and (max-aspect-ratio: 1/2) {
    .pop-up-window-content .video-wrapper {
        height: 38%;
    }
}

@media (pointer:fine) {
    .pop-up-window .close-button-active:hover, .call-point-active:hover {
        opacity: 1;
    }
}