* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        @font-face {
            font-family: 'wsdia2018sans';
            src: url('../fonts/wsdia2018-sans-webfont.woff2') format('woff2'),
                url('../fonts/wsdia2018-sans-webfont.woff') format('woff');
            font-weight: normal;
            font-style: normal;
        }

        @font-face {
            font-family: 'wsdia2018serif';
            src: url('../fonts/wsdia2018-serif-webfont.woff2') format('woff2'),
                url('../fonts/wsdia2018-serif-webfont.woff') format('woff');
            font-weight: normal;
            font-style: normal;
        }


        html {
            font-size: calc(((100vw/ 1920) * 16)/16);
        }

        @-moz-document url-prefix() {
            html {
                font-size: calc(((100vw/ 1920) * 16)/15.8);
            }
        }

        @media screen and (-webkit-min-device-pixel-ratio:0) {
            html {
                font-size: calc(((100vw/ 1920) * 16)/15.9);
            }
        }

        body {
            font-family: 'wsdia2018sans';
            overflow-x: hidden;
            background-color: #fff;
            color: #000;
            font-weight: 500;
        }

        /* Intro Section */
        #intro {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            background-color: #fff;
            z-index: 100;
            transition: opacity 2s ease-in-out;
            font-family: 'wsdia2018serif';
        }

        #intro.hidden {
            opacity: 0;
            pointer-events: none;
        }

        #wsdia {
            font-size: 4rem;
            font-weight: bold;
            opacity: 1;
            transition: opacity 1.5s linear;
            margin: 0 auto;
        }

        .headpos .animated-img {
            width: calc(100vw - 40rem);
            height: auto;
            opacity: 0;
            animation: fadeIn 1.5s linear forwards;
        }

        @keyframes fadeIn {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        #intro-text {
            display: none;
            text-align: left;
            font-family: 'wsdia2018serif';
            font-size: 38rem;
            color: #1E1E1E;
            line-height: 47rem;
            opacity: 0;
            animation: fadeIn 1s ease-in-out forwards;
            animation-delay: 0.5s;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }

        #intro-text .captionpos {
            max-width: 920rem;
            margin: 26rem 70rem;
        }

        .carousel {
            width: 100%;
            height: 100vh;
            position: relative;
            overflow: hidden;
        }

        .carousel-slides {
            display: flex;
            width: 100%;
            height: 100%;
            transition: unset;
        }

        .slide {
            flex: 0 0 100%;
            height: 100vh;
            position: relative;
            padding: 20px;
            padding-top: 100rem;
        }

        .slide img,
        .slide video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50px;
        }

        .slide iframe {
            pointer-events: none;
        }

        /* Slide Header */
        .slide-header {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            padding: 26rem 70rem;
            height: 100rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 15;
        }

        .left-menu {
            display: flex;
            column-gap: 109rem;
        }

        .left-menu a {
            color: #000;
            text-decoration: none;
            font-family: 'wsdia2018sans';
            font-size: 38rem;
            font-weight: 500;
            line-height: 47rem;
        }

        .left-menu a h4 {
            font-family: 'wsdia2018serif';
            font-size: 38rem;
            font-weight: 500;
            line-height: 47rem;
        }

        .left-menu a:hover {
            color: #000c;
        }

        .info-btn {
            background: transparent;
            color: #000;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-family: 'wsdia2018serif';
            color: #000;
            font-size: 38rem;
            font-weight: 500;
            line-height: 47rem;
            z-index: 16;
        }

        .arrow {
            position: fixed;
            width: 40px;
            height: 40px;
            opacity: 0;
            z-index: 10;
            mix-blend-mode: difference;
        }

        .arrow.left {
            left: 20px;
        }

        .arrow.right {
            right: 20px;
        }

        .infoarea {
            max-width: 1480rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 100rem;
            height: 100%;
        }

        .pd-100 {
            padding-top: 100px;
        }

        .arrow img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .info-popup {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: rgba(0, 0, 0, 0.9);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 20;
            padding: 0px;
            opacity: 0;
            transition: opacity 1.5s ease-in-out;
        }

        .info-popup.active {
            display: flex;
            opacity: 1;
            animation: fadeIn 1.5s ease-in-out forwards;
        }

        .info-popup:not(.active) {
            animation: fadeOut 1.5s ease-in-out forwards;
        }

        @keyframes fadeOut {
            0% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }

        .info-content {
            background: #fff;
            color: #000;
            padding: 26rem 70rem;
            border-radius: 0;
            max-width: 100%;
            width: 100%;
            position: relative;
            height: 100vh;
            margin: 0;
            cursor: default !important;
        }

        .info-content p {
            font-family: 'wsdia2018serif';
            color: #000;
            font-size: 38rem;
            font-weight: 500;
            line-height: 47rem;
            margin-bottom: 47rem;
        }

        .info-content p:last-child {
            margin-bottom: 0;
        }

        .info-content span,
        .info-content span a {
            font-family: 'wsdia2018serif';
            font-size: 28rem;
            color: #000;
            font-weight: 500;
            line-height: 35rem;
            margin-bottom: 0px;
            text-decoration: none;
        }

        .close-btn,
        .skip-btn {
            position: fixed;
            top: 26rem;
            right: 70rem;
            font-family: 'wsdia2018serif';
            font-size: 38rem;
            font-weight: 500;
            line-height: 47rem;
            color: #000;
            cursor: pointer;
            text-decoration: none;
        }


        .bottominforight {
            position: fixed;
            bottom: 26rem;
            right: 70rem;
        }

        .bottominforight a {
            font-family: 'wsdia2018serif';
            font-size: 28rem;
            color: #000;
            font-weight: 500;
            line-height: 37rem;
            margin-bottom: 0px;
            text-decoration: none;
        }

        .info-content {
            overflow: auto;
        }


        .arrow {
            padding: 5px;
        }

        .carousel-counter {
            position: fixed;
            left: 477rem;
            bottom: 25px;
            font-family: 'wsdia2018sans';
            color: #ffffff;
            font-size: 38rem;
            font-weight: 400;
            line-height: 47rem;
            mix-blend-mode: difference;
        }

        @media (max-width: 1200px) {
            html {
                font-size: calc(((100vw/ 1200) * 16)/24);
            }

            @-moz-document url-prefix() {
                html {
                    font-size: calc(((100vw/ 1200) * 16)/23.8);
                }
            }

            @media screen and (-webkit-min-device-pixel-ratio:0) {
                html {
                    font-size: calc(((100vw/ 1200) * 16)/23.9);
                }
            }

            .slide img,
            .slide video {
                border-radius: 30px;
            }
        }

        @media (max-width: 767px) {
            html {
                font-size: calc(((100vw/ 767) * 16)/22);
            }

            @-moz-document url-prefix() {
                html {
                    font-size: calc(((100vw/ 767) * 16)/22);
                }
            }

            @media screen and (-webkit-min-device-pixel-ratio:0) {
                html {
                    font-size: calc(((100vw/ 767) * 16)/22);
                }
            }

            .slide {
                padding: 20px 15px;
                padding-top: 100rem;
            }

            .slide img,
            .slide video {
                border-radius: 25px;
            }

            .left-menu {
                column-gap: 60rem;
            }

            .infoarea {
                max-width: 755rem;
            }

            .arrow {
                width: 30px;
                height: 30px;
                padding: 9px;
            }

            .info-content span,
            .bottominforight a {
                font-size: 32rem;
                line-height: 41rem;
            }

            .info-popup,
            .info-content,
            #intro {
                height: 100svh;
            }

            .carousel,
            .slide {
                height: 100vh;
            }

            .skip-btn {
                top: inherit;
                bottom: 20px;
                left: 70rem;
                width: fit-content;
            }

            .carousel-counter {
                left: 430rem;
            }
        }