html { overflow-y: hidden !important; overflow-x: hidden !important; scroll-behavior: smooth; }

.wrap { height: 100%; }
.wrap--main .main{
    overflow-x: auto; overflow-y: hidden;
    z-index: 1; padding: 0; position: relative;
    width: auto; height: 100%; min-height: 680px;
    background: #ebf1f8;
}
.wrap--main .footer { display: none; }
@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.png'); }
.header-logo a { display: block; width: 100%; height: 100%; }

.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; }
.header-menu-button::before { content: ''; position: absolute; top: 100%; left: 0; right: 0; margin: auto; width: 2px; height: 64px; background: #3d8fff; }
.header-menu-button .button { position: relative; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #1769ef; border-radius: 50%; }
.header-menu-button .button::before { content: ''; z-index: 1; position: absolute; top: -2%; left: 1%; width: 88%; height: 88%; border-radius: 50%; background: #3d8fff; -webkit-transform-origin: bottom; transform-origin: bottom; -webkit-transition: all ease-out .15s; transition: all ease-out .15s; }
.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(13deg); transform: rotate(13deg); }
.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: 140px; right: 0; left: 0;
    margin: auto; padding: 130px 50px 0; max-width: 1300px; width: 100%; height: 505px;
    background: #ffffff; box-shadow: 0px 0px 10px 0px rgba(36,36,36,.1);
    -webkit-transition: all ease-out .15s; transition: all ease-out .15s;
    -webkit-transform: translateY(-50px); transform: translateY(-50px);
    visibility: hidden;
    opacity: 0;
}
.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 #3d8fff; }
.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{
    -webkit-transform: translateY(0); transform: translateY(0);
    visibility: visible;
    opacity: 1;
}
@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; padding: 170px 30px 0; height: 100%; }
    .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; }
}
@media(max-width:768px){

}


/* Spot */
.main-spot{
    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: auto;
    max-height: 960px;
    min-height: 660px;
    height: 100%;
    /* pointer-events: none; */
}
/* .main-spot__background-image{
    display: block;
    margin: auto; max-width: none; width: auto; height: 100%;
} */
@media(max-width:1024px){

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

}


/* .spot-button { background: rgba(253,64,43,.5); } */
/* .spot-button--gallery { top: 19%; left: 33%; width: 11%; height: 31%; border-bottom-right-radius: 50%; } */
/* .spot-button--parade { top: 16%; left: 22%; width: 11%; height: 28%; border-top-left-radius: 50%; border-bottom-left-radius: 50%; } */
.spot-button { display: block; z-index: 10; position: absolute; }
.spot-button .sign{
    display: block; position: absolute; padding: 18px 6px 12px;
    width: 240px; height: 68px; background: #ffffff; box-shadow: 0px 0px 5px 0px rgba(36,36,36,.3);
    border-bottom-right-radius: 5px; border-bottom-left-radius: 5px;
    -webkit-transform: translateY(30px); transform: translateY(30px);
    -webkit-transition: all ease .3s; transition: all ease .3s;
    opacity: 0;
}
.spot-button .sign::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 24px; border-top: 6px solid #3d8fff; border-right: 6px solid #3d8fff; border-left: 6px solid #3d8fff; }
.spot-button .sign::after { content: ''; position: absolute; bottom: -14px; right: 0; left: 0; margin: auto; width: 14px; height: 14px; background-image: url('/child/img/main/spot-button-sign-arrow.png'); }
.spot-button .sign .title { display: block; line-height: 1; text-align: center; font-size: 20px; font-weight: 700; }
.spot-button .sign .title small { display: block; margin-top: 6px; line-height: 1; font-size: 10px; color: #3d8fff; font-weight: 300; }

.spot-button--festival { top: 31%; left: 41%; width: 19%; height: 39%; border-radius: 50%; }
.spot-button--gallery { top: 16%; left: 22%; width: 23%; height: 33%; border-radius: 50%; }
.spot-button--dream { top: 38.5%; left: 4%; width: 25.5%; height: 27%; border-top-right-radius: 50%; border-top-left-radius: 50%; border-bottom-right-radius: 50%; }
.spot-button--career { top: 53%; left: 25%; width: 17%; height: 34%; border-radius: 50%; }
.spot-button--live { top: 56%; left: 59.5%; width: 15.5%; height: 34%; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; }
.spot-button--gift { top: 33%; left: 73.5%; width: 15%; height: 30%; border-radius: 50%; }
.spot-button--community { top: 16%; left: 56%; width: 19%; height: 31%; border-top-left-radius: 50%; border-bottom-right-radius: 50%; border-bottom-left-radius: 30%; }

.spot-button--festival .sign { top: -4%; left: 8%; }
.spot-button--gallery .sign { top: 4%; left: 20%; }
.spot-button--dream .sign { top: -30%; left: 29%; }
.spot-button--career .sign { top: -5%; left: -12%; }
.spot-button--live .sign { top: -13.5%; left: 3.5%; }
.spot-button--gift .sign { top: -14%; left: 4%; }
.spot-button--community .sign { top: 12%; left: 20%; }
@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){

}


.airballoon_1 { animation: airballoon_1 3.5s ease-in-out infinite; }
@keyframes airballoon_1 {
    0%, 100% { -webkit-transform: translateY(0%); transform: translateY(0%); }
    50% { -webkit-transform: translateY(-8%); transform: translateY(-8%); }
}
.airballoon_2 { animation: airballoon_2 20s linear infinite; }
@keyframes airballoon_2 {
    0% { -webkit-transform: translate(36%, -36%); transform: translate(36%, -36%); }
    100% { -webkit-transform: translate(-36%, 36%); transform: translate(-36%, 36%); }
}
.balloon_1 { animation: balloon_1 3s ease-out infinite; }
@keyframes balloon_1 {
    0%, 100% { -webkit-transform: translateY(0%); transform: translateY(0%); }
    50% { -webkit-transform: translateY(-5%); transform: translateY(-5%); }
}
.community_1{
    animation: community_1 12s linear 3s infinite;
    -webkit-transform-origin: left bottom; transform-origin: left bottom;
    -webkit-transform: scale(0); transform: scale(0);
}
@keyframes community_1 {
    0% { -webkit-transform: scale(0); transform: scale(0); }
    2% { -webkit-transform: scale(1); transform: scale(1); }
    50% { -webkit-transform: scale(1); transform: scale(1); }
    52% { -webkit-transform: scale(0); transform: scale(0); }
    100% { -webkit-transform: scale(0); transform: scale(0); }
}
.gallery_1 { animation: gallery_1 .8s linear infinite; }
@keyframes gallery_1 {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}
.gallery_2 { animation: gallery_2 .8s linear infinite; }
@keyframes gallery_2 {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}
.gallery_3 { animation: gallery_3 .8s linear .4s infinite; }
@keyframes gallery_3 {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}
.gallery_4 { animation: gallery_4 .6s linear .4s infinite; }
@keyframes gallery_4 {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}
.live_1 { animation: live_1 .8s linear infinite; }
@keyframes live_1 {
    0%, 100% { fill: #e83747; }
    50% { fill: #bbbbbb; }
}
.people_1 { animation: people_1 10s linear infinite; }
@keyframes people_1 {
    0% { -webkit-transform: translateY(0%); transform: translateY(0%); }
    90% { -webkit-transform: translateY(0%); transform: translateY(0%); }
    92% { -webkit-transform: translateY(0%); transform: translateY(0%); }
    94% { -webkit-transform: translateY(-8%); transform: translateY(-8%); }
    96% { -webkit-transform: translateY(0%); transform: translateY(0%); }
    98% { -webkit-transform: translateY(-8%); transform: translateY(-8%); }
    100% { -webkit-transform: translateY(0%); transform: translateY(0%); }
}
.bulb-container { isolation: isolate; }
.bulb-c { mix-blend-mode: multiply; }
.bulb-outer-off { animation: bulb-inner-off 12s linear infinite; }
.bulb-inner-off { animation: bulb-inner-off 12s linear infinite; }
.bulb-center-off { animation: bulb-inner-off 12s linear infinite; }
/* .bulb-inner-on { animation: bulb-inner-on 1s linear infinite; opacity: 0; } */
@keyframes bulb-inner-off {
    0%, 50% { opacity: 1; }
    51% { opacity: 0; }
    52% { opacity: 1; }
    53%, 97% { opacity: 0; }
    98% { opacity: 1; }
    99% { opacity: 0; }
    100%{ opacity: 1; }
}
/* @keyframes bulb-inner-on {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
} */



.lottie {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  z-index: 10;
  position: absolute; top: 0; left: 0;
  width: 400px;
  height: 400px;
  margin: 0 0 3rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}