<style>
            html {
                height: 100vh;
            }
            body {
                margin-left: 0;
                margin-right: 0;
                margin-top: 0;

                height: 100vh;
                background: #222222;
                overflow-x: hidden;
                
                color: #fff;
                font-family: 'Roboto', Arial, sans-serif;

                /*scroll-behavior: smooth;
                -webkit-overflow-scrolling: auto;
                overscroll-behavior-y: contain;*/
                overscroll-behavior: none;
            }
            a {
                color: #fff;
                cursor: pointer;
                text-decoration: underline dotted;
            }
            a:hover {text-decoration: underline;}

            @font-face {
                font-family: 'title_font';
                src: url('font.otf') format('opentype');
            }
            .f1, .f2, .f3 {font-family: 'title_font';}
            .f1 {line-height: 1.1;}
            .f4 {
                font-family: 'Roboto', Arial, sans-serif;
                color: #888;
            }

            #pcontainer {
                height: 100vh;
            }
            .left, .right, .center {
                position: absolute;
                opacity: 0;

                /*transform: translate(-50%, -50%);*/
            }
            .center {
                text-align: center;
            }
            .menu ,#viewport {
                position: fixed;
                /*width: 100%;*/
                cursor: pointer;
                font-family: 'title_font';
            }
            #viewport {
                text-align: center;
                display: none;
            }
            .smedia {
                position: fixed;
                top: 50%;
                right: 2vw;
                transform: translate(0%, -50%);
            }
            #music {
                position: fixed;
                top: 2.7vh;
                right: 1.9vw;
                width: 3.6vw;
            }
            #top {
                position: fixed;
                bottom: 5vh;

                /*display: flex;
                align-items: flex-end;*/
            }
            /*#svg_music {
                fill: #666;
                transition: fill 0.7s ease;
            }
            #svg_music:hover {
                fill: #fff;
                transition: fill 0.7s ease;
            }*/
            #menu_container{
                display:flex;
            }
            #menu_display{
                width: 22vw;
                border: 2px solid white;
                padding: 6px;

                display: flex;
                align-items: center;
                text-align: center;
            }
            .menu_item {
                display: none;
                color: #888888;
            }
            #mmenu {
                position: fixed;
                top: 0;
                width: 100vw;
                height: 100vh;
                background-color: rgba(0, 0, 0, 0.8);
                padding: 4vh 0 0 8vw;

                display: none;
            }
            #mmenu_open, #mmenu_close {
                position: fixed;
                left: 46vw;
                bottom: 4vh;

                width: 8vw;
                height: 4vh;
                /*background-color: white;*/
            }
            #menu_line{
                border: 2px solid white;
                margin-left: 0.3vw;
                width: 3vw;
            }
            .mline {
                display: block;
                height: 5px;
                width: 100%;
                /*border-radius: 10px;
                margin-bottom: 7px;*/
                background-color: white;
                margin-bottom: 0.8vh;
            }
            .mcross_1{
                display: block;
                height: 5px;
                width: 100%;
                background-color: white;

                -ms-transform: translate(0, 13px) rotate(45deg);
                -webkit-transform: translate(0, 13px) rotate(45deg);
                transform: translate(0, 13px) rotate(45deg);
            }
            .mcross_2{
                display: block;
                height: 5px;
                width: 100%;
                background-color: white;

                -ms-transform: translate(0, 8px) rotate(-45deg);
                -webkit-transform: translate(0, 8px) rotate(-45deg);
                transform: translate(0, 8px) rotate(-45deg);
            }
            .mmenu_item {
                width: 84vw;
                border-bottom: 3px solid white;
                margin-bottom: 2vh;
            }
            
            .button {
                cursor: pointer;
                /*display: inline-block;*/
            }
            .title {line-height: 1;}
            .content {
                width: 30vw;
                height: 35vh;

                line-height: 1.6;
            }
            .fcontent {
                width: 100vw;

                line-height: 1.6;
                /*background-color: rgba(0, 0, 0, 0.8);*/
            }
            #loading {
                position: fixed;
                top: 0;
                left: 0;

                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 1);
                
                display: block;

                opacity: 1;
                transition: opacity 0.4s;
            }
            #loading_text {
                position: fixed;
                top: 65%;
                left: 50%;
                transform: translate(-50%, -50%);

                font-family: 'title_font';
            }
            #ptimeline, #star{
                position: fixed;
                top: 0;
            }
            #highway{
                position: fixed;
                top: 30%;
                left: 50%;
                transform: translate(-50%, 0);
                
                /*height: 100vh;
                display: flex;
                align-items: center;*/
            }
            #milestone{
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
            #gif_1{
                position: absolute;
                top: 600px;
                left: 10vw;
            }
            #gif_2{
                position: absolute;
                top: 900px;
                right: 10vw;
            }
            #gif_3{
                position: absolute;
                top: 800px;
                right: 15vw;
            }
            .tgif{display: inline-block;}
            canvas{
                width: 100vw !important;
            }
            .finger{display: inline;}
            .dj{
                position: fixed;
                top: 0;
                left: 50%;
                transform: translate(-50%, 0);
            }
            #highway_overlay, #dj_overlay{
                position: absolute;
                top: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 180, 255, 0.3);
            }
            #highway_beam_img, #dj_beam_img{margin-top: -5%;}
            #beam {
                position: fixed;
                /*top: 150%;
                bottom: -40%;*/
                left: 50%;
                transform: translate(-50%, 0);
                width: 800px;
                height: 225px;
                background-image: url('../img/beam.png');
                background-repeat: no-repeat;
                background-size: 4000px 3376px;
            }
            #beam_2 {
                position: fixed;
                /*top: 150%;*/
                bottom: -40%;
                left: 50%;
                transform: translate(-50%, 0) scale(2.8);
                width: 800px;
                height: 225px;
                background-image: url('../img/beam.png');
                background-repeat: no-repeat;
                background-size: 4000px 3376px;
            }
            .float {
                -webkit-animation-name: floating;
                -webkit-animation-duration: 3s;
                -webkit-animation-iteration-count: infinite;
                -webkit-animation-timing-function: ease-in-out;
            }
            .left_float {
                -webkit-animation-name: left_floating;
                -webkit-animation-duration: 3s;
                -webkit-animation-iteration-count: infinite;
                -webkit-animation-timing-function: ease-in-out;
            }
            .scale_float {
                -webkit-animation-name: scale_floating;
                -webkit-animation-duration: 3s;
                -webkit-animation-iteration-count: infinite;
                -webkit-animation-timing-function: ease-in-out;
            }
            @-webkit-keyframes floating{
                from {-webkit-transform:translate(0%, 0px);}
                65% {-webkit-transform:translate(0%, 15px);}
                to {-webkit-transform: translate(0%, -0px);}    
            }
            @-webkit-keyframes left_floating{
                from {-webkit-transform:translate(-50%, 0px); opacity: 1;}
                65% {-webkit-transform:translate(-50%, 15px); opacity: 0.9;}
                to {-webkit-transform: translate(-50%, -0px); opacity: 1;}    
            }
            @-webkit-keyframes scale_floating{
                from {-webkit-transform:translate(-50%, 0px) scale(2.8);}
                65% {-webkit-transform:translate(-50%, 15px) scale(2.8);}
                to {-webkit-transform: translate(-50%, -0px) scale(2.8);}    
            }

            /*collection click*/
            .dj, #t_banner_1, #t_banner_2, #t_ftw_1, #t_ftw_2, #t_collection_1, #t_collection_2, #t_milestones_1, #t_milestones_2, #t_team_1, #t_team_2, #t_end_1{pointer-events: none;}
            
            @media only screen and (orientation: landscape) {
                .menu, .smedia{display: block;}
                #mmenu_open{display: none;}
                #planet{
                    transform: scale(1.3) translate(0%, -10%);
                }
                #star{
                    width: 100%;
                }
                #milestone{
                    transform: scale(1.6) translate(-4%, -4%);;
                }
                .title{
                    /*top: 80%;
                    opacity: 0;*/
                    position: fixed;
                    bottom: 2%;
                }
                .content, .fcontent{
                    top: 15%;
                    opacity: 0;
                }
                .banner {top: 80%;}
                .fcontent{height: 80vh;}
                body{font-size: 1.3vw;}
                .f1{font-size: 3vw;}
                .f2{font-size: 7.5vw;}
                .f2 br{display: block;}
                .f4{font-size: 1.1vw;}
                .menu{
                    top: 3%;
                    left: 2vw;
                    font-size: 2vw;
                }
                /*left menu*/
                .menu_item{
                    margin-left: 0.6vw;
                }
                #mfingertheworld:hover{color: #fff !important;}
                #mcollection:hover{color: #fff !important;}
                #mmilestones:hover{color: #fff !important;}
                #mteam:hover{color: #fff !important;}

                #music{display: block;}
                #mftw{display: none;}
                .left{left: 0%;}
                .right{right: 0%;}
                .rcorner{
                    right: 1.8%;
                }
                .smedia_icon{
                    width: 3.3vw;
                    margin-bottom: 2vh;
                }
                #sphere_img img{width: 30vw;}
                .tgif img{width: 10vw;}
                /*.dj{
                    position: fixed;
                    left: 50%;
                    transform: translate(-50%, 0);
                    height: 100vh;
                    display: flex;
                    align-items: center;
                }
                #dj{height: 100vh;}*/
                .ftw{
                    width: 3.5vw;
                    /*margin-right: 1vw;*/
                }
                .ftw_studio{display: inline;}
                .ftw_studio img{height: 65px;}

                .finger img{height: 50px;}
                .clow{
                    display: none;
                }
                #highway_img img{height: 55vh;}
                #highway_beam_img img{height: 30vh;}
                #arrow img{
                    width: 1.5vw;
                    margin-top: 2vh;
                }
                canvas{
                    height: 100vh !important;
                }
            }
            @media only screen and (orientation: portrait) {
                /*protrait*/
                .menu, .smedia{display: none;}
                #mmenu_open{display: block;}
                #planet{
                    /*position: fixed;
                    -webkit-transform: scale(1.0) translate(0%, 12%);*/
                    transform: scale(1.0) translate(0%, 15.5%);
                }
                #star{
                    left: 0;
                    width: 100%;
                    height: 100%;
                }
                #milestone{
                    transform: scale(2) translate(2%, 15%);
                }
                #pcontainer {
                    /*ios safari bottom*/
                    height: 90vh !important;
                }
                .title{
                    top: 10%;
                    /*opacity: 0;*/
                }
                .content, .fcontent{
                    top: 15%;
                    opacity: 0;

                    line-height: 1.4;
                }
                .fcontent{height: 88vh;}
                .mmenu_item{                
                    font-size: 7.7vw;
                    font-family: 'title_font';
                    text-decoration: none;
                }
                #music{display: none;}
                .ftw_studio{display: inline;}
                .ftw_studio img{
                    width: 12vw;
                }
                .ftworld img{
                    width: 25vw;
                }
                #mftw{
                    margin-bottom: 4vh;
                    position: relative;
                    left: 28vw;
                }

                body{font-size: 4.5vw;}
                
                .f1{font-size: 7vw;}
                .f2{font-size: 10vw;}
                .f2 br{display: none;}
                .f4{font-size: 4vw;}
                .left, .right{
                    width: 90vw;
                    left: 5% !important;
                }
                .mccenter{
                    display: flex;
                    justify-content: center;
                    text-align: center;
                }
                .mccenter img{margin: 0 auto;}
                .mclow{
                    display: none;
                }
                .micon{
                    width: 84vw
                }
                .smedia_icon{
                    width: 40px;
                    display: inline-block;
                    margin-right: 2vw;
                }
                .mmusic_icon{
                    width: 40px;
                    float: right;
                }
                #sphere_img img{height: 27vh;}
                .tgif img{width: 30vw;}
                #highway_img img{height: 25vh;}
                #highway_beam_img img{
                    height: 14vh;
                    /*transform: scale(0.45);*/
                }
                .dj{top: 30%;}
                /*#dj{height: 100vh;}*/
                .finger img{height: 40px;}
                #arrow img{
                    width: 4vw;
                    margin-top: 1vh;
                }
                canvas{
                    height: 70vh !important;
                }
            }
        </style>