html { height: 100%; background: #000; }
body { height: 100%; }
.wrap { overflow: hidden; padding: 0 0 50px; min-height: 100%; background: radial-gradient(circle, rgba(75,1,115,1) 0%, rgba(51,1,88,1) 50%, rgba(20,0,51,1) 100%); }

.main-header { position: absolute; top: 0; left: 0; padding: 20px; width: 100%; }
.main-header .logo { width: auto; height: 19px; }

.main-footer { display: flex; align-items: center; justify-content: center; position: absolute; bottom: 0; left: 0; width: 100%; height: 50px; }
.main-footer .logo { width: auto; height: 19px; }

.visual { padding-top: 100px; height: 100%; text-align: center; }
.visual img { display: block; margin: auto; }
.visual .top-image img { position: relative; pointer-events: none; }
.visual .top-image .text { z-index: 2; width: 68%; }
.visual .top-image .symbol1 { z-index: 1; position: absolute; top: 0; left: 0; width: 100%; height: auto; }
.visual .top-image .symbol2 { z-index: 1; position: absolute; bottom: 0; left: 0; width: 100%; height: auto; }
.visual .button-join { display: inline-block; }
.visual .button-join img { margin-top: -10px; width: auto; height: 110px; }
.visual .bottom-button .button { width: 220px; font-weight: 500; }

.bottom-button { opacity: 0; }

h2 { font-size: 22px; color: #ffffff; }

.countdown { z-index: 2; position: relative; margin: 100px auto 35px; opacity: 0; }
.countdown .inner { display: inline-flex; align-items: center; position: relative; padding: 6px 34px; }
.countdown img { width: auto; height: 70px; }
.countdown span { display: block; position: relative; padding: 0 14px; line-height: 1; text-align: center; font-size: 12px; color: rgba(255,255,255,.6); }
.countdown span:last-child { margin-right: 0; }
.countdown span:not(:last-child):after { content: ''; position: absolute; top: 0; bottom: 0; right: -1px; margin: auto; width: 3px; height: 3px; background: rgba(255,255,255,.6); border-radius: 50%; }
.countdown em { display: block; margin-bottom: 2px; font-style: normal; font-size: 28px; color: #ffffff; font-weight: 300; }
.countdown.on { animation: fade-in ease-out .6s forwards; }

.countdown.on ~ .bottom-button { z-index: 2; position: relative; animation: fade-down ease-out .35s forwards; }
@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fade-down {
    from { -webkit-transform: translateY(-50px); transform: translateY(-50px); opacity: 0; }
    to { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}
@media(max-width:1024px){

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

}


@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fade-down {
    from { opacity: 0; -webkit-transform: translateY(-50px); transform: translateY(-50px); }
    to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes zoom-in {
    from { opacity: 0; -webkit-transform: scale(0); transform: scale(0); }
    to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
}