html{
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    scroll-behavior: smooth;
    height: 100%;
}
body { height: 100%; }
svg { overflow: visible !important; }
.wrap { min-height: 100%; height: 100%; }
.wrap--main { padding-top: 0; }
.wrap--main .main{
    overflow-x: auto; overflow-y: hidden;
    z-index: 1; padding: 0; position: relative;
    width: auto; height: 100%; min-height: 680px;
    background-image: linear-gradient(10deg, #272a40 0%, #323653 30%, #323653 70%, #272a40 100%);
}
.wrap--main .footer { display: none; }

.main-spot{
    overflow: hidden;
    position: relative;
    margin: auto;
    padding: 0;
    max-width: 1920px;
    min-width: 1280px;
    max-height: 960px;
    min-height: 660px;
    height: 100%;
}
.main-spot__background{
    max-width: 1920px;
    min-width: 1280px;
    width: 100%;
    max-height: 960px;
    min-height: 660px;
    height: 100%;
    animation: main-background 2s ease 1s both;
}
@keyframes main-background {
    from { transform: translate(-2%, 2%); opacity: 0; }
    to { transform: translate(0%, 0%); opacity: 1; }
}
@media(max-width:1200px){
    .wrap--main { padding-top: 0; }
}
@media(max-width:768px){

}


/* Top */
.header-logo{
    z-index: 10000; position: absolute; top: 40px; right: 0; left: 0; margin: auto; width: 310px; height: 40px; background-image: url('/child/img/main/logo-light.png');
    animation: logo 1s ease 2s both;
}
.header-logo a { display: block; width: 100%; height: 100%; }
.header-logo.dark { background-image: url('/child/img/main/logo.png'); }

.header-menu-button{
    z-index: 10000; position: absolute; top: 105px; right: 0; left: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; -webkit-transition: all ease-out .15s; transition: all ease-out .15s;
    animation: menu 1s ease 2s both;
}
.header-menu-button .button { position: relative; padding: 0; width: 100%; height: 100%; }
.header-menu-button .button::before { content: ''; z-index: 1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('/child/img/main/header-menu-button-background.png') center / auto 100%; -webkit-transition: all ease-out .6s; transition: all ease-out .6s; }
.header-menu-button .button span { z-index: 2; display: block; position: absolute; top: -2px; left: 0; width: 100%; height: 100%; background: url('/child/img/main/header-menu-button.png') no-repeat center; }
.header-menu-button .button[aria-pressed="true"]::before { -webkit-transform: rotate(70deg); transform: rotate(70deg); }
.header-menu-button .button[aria-pressed="true"] span { background-image: url('/child/img/main/header-menu-button-close.png'); }

.header-menu{
    z-index: 9999; position: absolute; top: 200px; right: 0; left: 0;
    margin: auto; max-width: 1300px; width: 100%; max-height: 0;
    background: #ffffff; box-shadow: 0px 14px 20px 0px rgba(36,36,36,.15), 0px 20px 26px 0px rgba(36,36,36,.3);
    -webkit-transform: translateY(-50px); transform: translateY(-50px);
    -webkit-transition: all ease .35s; transition: all ease .35s;
    visibility: hidden;
    opacity: 0;
}
.header-menu__inner { padding: 130px 50px 60px; }
.header-menu .customer-menu { position: absolute; top: 38px; right: 50px; }
.header-menu__columns { display: flex; margin: 0 -7px; }
.header-menu__column { flex: 1; margin: 0 7px; }
.header-menu__title { display: block; margin-bottom: 10px; padding-bottom: 20px; line-height: 1; text-align: center; font-size: 18px; font-weight: 500; border-bottom: 2px solid #898ec9; }
.header-menu__link { display: inline-block; margin-top: 12px; padding: 2px 2px 2px 20px; font-size: 16px; color: #999999; font-weight: 300; }

.header-menu--opened{
    max-height: 505px;
    -webkit-transform: translateY(0); transform: translateY(0);
    visibility: visible;
    opacity: 1;
}
@keyframes logo {
    from { opacity: 0; transform: translateY(-50px); }
    to { opacity: 1; transform: translateY(0px); }
}
@keyframes menu {
    from { opacity: 0; transform: translateY(-150px); }
    to { opacity: 1; transform: translateY(0px); }
}
@media(min-width:1025px){
    .header-menu-button:hover { box-shadow: 0px 0px 10px 0px rgba(36,36,36,.35); }

    .header-menu__link:hover { color: #333333; }
}
@media(max-width:1024px){
    .header-logo { top: 30px; left: 30px; right: auto; width: 188px; height: 26px; background-size: auto 24px; }
    .header-menu-button { top: 20px; right: 30px; left: auto; width: 50px; height: 50px; }
    .header-menu-button::before { content: none; }
    .header-menu-button .button span { -webkit-transform: scale(.8); transform: scale(.8); }

    .header-menu { overflow-x: hidden; overflow-y: auto; position: fixed; top: 0; height: 100%; }
    .header-menu__inner { padding: 170px 30px 30px; }
    .header-menu .customer-menu { top: 90px; left: 30px; right: auto; margin-top: 0; }
    .header-menu .customer-menu a { font-size: 12px; }
    .header-menu .customer-menu a img { -webkit-transform: scale(.9); transform: scale(.9); }

    .header-menu__columns { flex-direction: column; margin: 0; }
    .header-menu__column { flex: auto; margin: 0 0 45px; width: 100%; }
    .header-menu__title { margin-bottom: 5px; padding-bottom: 15px; text-align: left; font-size: 15px; }
    .header-menu__link { padding: 2px; font-size: 15px; color: #333333; }

    .header-menu--opened { max-height: 100vh; }
}
@media(max-width:768px){

}


.spot-button-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }
.spot-button { display: block; z-index: 10; position: absolute; }
.spot-button .sign{
    display: block; position: absolute;
    -webkit-transform: translateY(30px); transform: translateY(30px);
    -webkit-transition: all ease .3s; transition: all ease .3s;
    pointer-events: none;
    opacity: 0;
}
.spot-button--history { top: 40%; left: 4%; width: 20%; height: 34%; border-radius: 50%; }
.spot-button--participation { top: 23%; left: 15%; width: 27%; height: 25%; border-radius: 50%; }
.spot-button--festival { top: 56%; left: 22%; width: 21%; height: 35%; border-radius: 50%; }
.spot-button--tv { top: 26%; left: 41%; width: 20%; height: 47%; border-radius: 50%; }
.spot-button--career { top: 61%; left: 56.5%; width: 17.5%; height: 33%; border-radius: 50%; }
.spot-button--dream { top: 16%; left: 61%; width: 18.5%; height: 37%; border-radius: 50%; }
.spot-button--community { top: 42%; left: 75%; width: 22%; height: 29%; border-radius: 50%; }

.spot-button--history .sign { top: -23%; left: 10%; }
.spot-button--participation .sign { top: 3%; left: 16%; }
.spot-button--festival .sign { top: -15%; left: 13%; }
.spot-button--tv .sign { top: -12%; left: 10%; }
.spot-button--career .sign { top: -16%; left: 2%; }
.spot-button--dream .sign { top: 23%; left: 7%; }
.spot-button--community .sign { top: -29%; left: 10%; }
@media(min-width:1025px){
	.spot-button:hover .sign{
        -webkit-transform: translateY(0); transform: translateY(0);
        opacity: 1;
    }
}
@media(max-width:1024px){

}
@media(max-width:768px){

}


.rocket { animation: rocket 20s linear infinite; }
@keyframes rocket {
    0% { transform: translate(62%, -24%); }
    100% { transform: translate(-20%, 37%); }
}
.firework1 { transform-origin: bottom center; animation: firework1 15s linear infinite; }
@keyframes firework1 {
    0%, 19% { transform: scale(0.5); opacity: 0; }
    20%, 95% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1); opacity: 0; }
}
.firework2 { transform-origin: bottom center; animation: firework2 15s linear infinite; }
@keyframes firework2 {
    0%, 24% { transform: scale(0.5); opacity: 0; }
    25%, 90% { transform: scale(1); opacity: 1; }
    95%, 100% { transform: scale(1); opacity: 0; }
}
.moon { animation: moon 5s ease infinite; }
@keyframes moon {
}
.meteorite { opacity: 0; animation: meteorite 25s ease 2s infinite; }
@keyframes meteorite {
    0% { transform: translate(250%, -250%); opacity: 1; }
    100% { transform: translate(-200%, 200%); opacity: 1; }
}
.spaceship { animation: spaceship 15s ease-out infinite; }
@keyframes spaceship {
    0%, 100% { transform: translate(0, 0); }
    20%, 25% { transform: translate(-7%, 10%); }
    40%, 50% { transform: translate(5%, 7%); }
    60%, 80% { transform: translate(-13%, 15%); }
}
.astronaut { animation: astronaut 10s ease-out infinite; }
@keyframes astronaut {
    0%, 90%, 100% { transform: translate(0, 0%); }
    50% { transform: translate(-5%, -17%); }
}


.star-container{
    z-index: -1; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    animation: star-init ease 5s both;
    pointer-events: none;
}
.star-container [data-star] { position: absolute; width: 30px; height: 30px; }
.star-container [data-star]::before{
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    margin: auto; width: 34%; height: 34%; border-radius: 50%;
    animation: star-light ease 7s infinite;
}
.star-container [data-star]::after{
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    margin: auto; width: 100%; height: 100%;
    background-repeat: no-repeat; background-position: center; background-size: 100% auto;
}
.star-container [data-star-depth="2"] { opacity: .2; }
.star-container [data-star-depth="3"] { opacity: .3; }
.star-container [data-star-depth="2"]::before { animation-duration: 8s; }
.star-container [data-star-depth="3"]::before { animation-duration: 9s; }
.star-container [data-star="white"]::before { background: #f2f2f2; box-shadow: 0px 0px 6px 0px #f2f2f2, 0px 0px 8px 0px #f2f2f2, 0px 0px 12px 0px #f2f2f2, 0px 0px 14px 0px #f2f2f2, 0px 0px 20px 0px #f2f2f2; }
.star-container [data-star="white"]:after { background-image: url('/child/img/main/star-white.svg'); }
.star-container [data-star="yellow"]::before { background: #ead686; box-shadow: 0px 0px 6px 0px #ead686, 0px 0px 8px 0px #ead686, 0px 0px 12px 0px #ead686, 0px 0px 14px 0px #ead686, 0px 0px 20px 0px #ead686; }
.star-container [data-star="yellow"]:after { background-image: url('/child/img/main/star-yellow.svg'); }
.star-container [data-star]:nth-child(1) { top: 3%; left: 93%; width: 14px; height: 14px; }
.star-container [data-star]:nth-child(1)::after { transform: rotate(15deg); }
.star-container [data-star]:nth-child(2) { top: 30%; left: 98%; width: 16px; height: 16px; }
.star-container [data-star]:nth-child(2)::after { transform: rotate(15deg); }
.star-container [data-star]:nth-child(3) { top: 67%; left: 104%; width: 14px; height: 14px; }
.star-container [data-star]:nth-child(3)::after { transform: rotate(15deg); }
.star-container [data-star]:nth-child(4) { top: 93%; left: 100%; width: 14px; height: 14px; }
.star-container [data-star]:nth-child(4)::after { transform: rotate(15deg); }
.star-container [data-star]:nth-child(5) { top: 19%; left: 84%; width: 14px; height: 14px; }
.star-container [data-star]:nth-child(5)::after { transform: rotate(15deg); }
.star-container [data-star]:nth-child(6) { top: 75%; left: 92%; width: 16px; height: 16px; }
.star-container [data-star]:nth-child(6)::after { transform: rotate(15deg); }
.star-container [data-star]:nth-child(7) { top: 92%; left: 85%; width: 30px; height: 30px; }
.star-container [data-star]:nth-child(7)::after { transform: rotate(15deg); }
.star-container [data-star]:nth-child(8) { top: 7%; left: 66%; width: 16px; height: 16px; }
.star-container [data-star]:nth-child(8)::after { transform: rotate(15deg); }
.star-container [data-star]:nth-child(9) { top: 81%; left: 50%; width: 14px; height: 14px; }
.star-container [data-star]:nth-child(10) { top: 91%; left: 40%; width: 14px; height: 14px; }
.star-container [data-star]:nth-child(11) { top: 5%; left: 26%; width: 14px; height: 14px; }
.star-container [data-star]:nth-child(12) { top: 24%; left: 10%; width: 14px; height: 14px; }
.star-container [data-star]:nth-child(13) { top: 95%; left: 12%; width: 14px; height: 14px; }
.star-container [data-star]:nth-child(14) { top: 52%; left: 2%; width: 16px; height: 16px; }
.star-container [data-star]:nth-child(15) { top: 86%; left: -2%; width: 12px; height: 12px; }
.star-container [data-star]:nth-child(16) { top: 3%; left: -5%; width: 12px; height: 12px; }
@keyframes star-init {
    from { transform: translate(35%, -35%); opacity: 0; }
    to { transform: translate(0%, 0%); opacity: 1; }
}
@keyframes star-light {
    0% { transform: scale(1); }
    15% { transform: scale(1.05); }
    30% { transform: scale(0.73); }
    45% { transform: scale(1.13); }
    60% { transform: scale(0.81); }
    75% { transform: scale(1.21); }
    100% { transform: scale(1); }
}

.main-popup{
    animation: main-popup .3s ease 2.5s forwards;
    opacity: 0;
}
@keyframes main-popup {
    from { opacity: 0; }
    to { opacity: 1; }
}