html{
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    scroll-behavior: smooth;
    height: 100%;
}
body { height: 100%; }
.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: #fffeef;
}
.wrap--main .footer { display: none; }

.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: 100%;
    max-height: 960px;
    min-height: 660px;
    height: 100%;
}
@media(max-width:1200px){
    .wrap--main { padding-top: 0; }
}
@media(max-width:768px){

}


.airplane1 { display: block; position: relative; animation: airplane1 20s linear infinite; }
@keyframes airplane1 {
    0% { transform: translate(-40%, 30%); }
    100% { transform: translate(50%, -80%); }
}
.drone1 { display: block; position: relative; animation: drone1 15s ease infinite; }
@keyframes drone1 {
    0%, 30%, 100% { transform: translate(12%, -7%); }
    50%, 60% { transform: translate(4%, 0%); }
    70%, 85% { transform: translate(4%, 3%); }
}
.like1{
    display: block; position: relative;
    animation: like1 15s ease infinite;
    transform: translate(31.5%, 71.5%);
    opacity: 0;
}
@keyframes like1 {
    0%, 20% { transform: translate(24.5%, 64%); opacity: 0; }
    23%, 77% { transform: translate(24.5%, 63%); opacity: 1; }
    80%, 100% { transform: translate(24.5%, 62%); opacity: 0; }
}
.cloud1{
    display: block; position: relative;
    animation: cloud1 15s linear infinite;
    transform: translate(52.8%, 55.2%);
    opacity: 0;
}
@keyframes cloud1 {
    0% { transform: translate(46.8%, 61.2%); opacity: 0; }
    10% { transform: translate(46.8%, 61.2%); opacity: 1; }
    90% { transform: translate(52.8%, 55.2%); opacity: 1; }
    100% { transform: translate(52.8%, 55.2%); opacity: 0; }
}
.cloud2{
    display: block; position: relative;
    animation: cloud2 17s linear 1s infinite;
    transform: translate(57.1%, 56.3%);
    opacity: 0;
}
@keyframes cloud2 {
    0% { transform: translate(57.1%, 56.3%); opacity: 0; }
    10% { transform: translate(57.1%, 56.3%); opacity: 1; }
    90% { transform: translate(62.5%, 62.6%); opacity: 1; }
    100% { transform: translate(62.5%, 62.6%); opacity: 0; }
}
.bus1{
    display: block; position: relative;
    animation: bus1 30s ease 1s infinite;
    transform: translate(40%, 30.5%);
    opacity: 0;
}
@keyframes bus1 {
    0%, 25% { transform: translate(40%, 30.5%); opacity: 0; }
    28% { transform: translate(40%, 30.5%); opacity: 1; }
    70%, 95% { transform: translate(59.8%, 50.8%); opacity: 1; }
    100% { transform: translate(60%, 51%); opacity: 0; }
}
.twinkle1{
    display: block; position: relative;
    animation: twinkle1 1s ease 1s infinite;
    opacity: 0;
}
@keyframes twinkle1 {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}
.twinkle2{
    display: block; position: relative;
    animation: twinkle2 1s ease 1s infinite;
}
@keyframes twinkle2 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.wifi1{
    display: block; position: relative;
    animation: wifi1 10s ease infinite;
    opacity: 0;
}
.wifi2{
    display: block; position: relative;
    animation: wifi2 10s ease infinite;
    opacity: 0;
}
.wifi3{
    display: block; position: relative;
    animation: wifi3 10s ease infinite;
    opacity: 0;
}
.wifi4{
    display: block; position: relative;
    animation: wifi4 10s ease infinite;
    opacity: 0;
}
@keyframes wifi1 {
    0%, 10%, 70%, 100% { opacity: 0; }
    12%, 68% { opacity: 1; }
}
@keyframes wifi2 {
    0%, 12%, 65%, 100% { opacity: 0; }
    14%, 63% { opacity: 1; }
}
@keyframes wifi3 {
    0%, 14%, 60%, 100% { opacity: 0; }
    16%, 58% { opacity: 1; }
}
@keyframes wifi4 {
    0%, 16%, 55%, 100% { opacity: 0; }
    18%, 53% { opacity: 1; }
}
.chat1{
    display: block; position: relative;
    animation: chat 2s ease infinite;
    opacity: 0;
}
.chat2{
    display: block; position: relative;
    animation: chat 2s ease .2s infinite;
    opacity: 0;
}
.chat3{
    display: block; position: relative;
    animation: chat 2s ease .4s infinite;
    opacity: 0;
}
@keyframes chat {
    0%, 10%, 70%, 100% { opacity: 0; }
    20%, 60% { opacity: 1; }
}
.mail1{
    display: block; position: relative;
    animation: mail1 10s ease infinite;
    transform: scale(0);
    transform-origin: left bottom;
    opacity: 0;
}
@keyframes mail1 {
    0%, 20%, 80%, 100% { transform: scale(0); opacity: 0; }
    25%, 75% { transform: scale(1); opacity: 1; }
}


.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;
    opacity: 0;
    pointer-events: none;
}
.spot-button .sign::before{
    content: ''; z-index: 2; position: absolute; top: 100%; right: 40px;
    width: 25px; height: 18px; background: url('/child/img/main/spot-button-sign-tail.png') no-repeat center / auto 100%;
}
.spot-button .sign .pannel{
    overflow: hidden; position: relative; padding: 18px; width: 240px; height: 68px; text-align: center; color: #fff;
    background: #2188f2; border-radius: 100px; box-shadow: 4px 4px 10px 0px rgba(5,56,112,.35);
}
.spot-button .sign .pannel::before{
    content: ''; position: absolute; top: 0; left: -100%;
    width: 100%; height: 100%; background: #4da0f5;
    -webkit-transform: skewX(-45deg); transform: skewX(-45deg);
    -webkit-transition: all ease .65s; transition: all ease .65s;
    opacity: 0;
}
.spot-button .tit{
    z-index: 2; position: relative; margin-bottom: 6px; line-height: 1; font-size: 20px; font-weight: 700;
    -webkit-transition: all ease .65s; transition: all ease .65s;
    -webkit-transform: translateY(50px); transform: translateY(50px);
    opacity: 0;
}
.spot-button .txt{
    z-index: 2; position: relative; line-height: 1; font-family: 'Saira', sans-serif; font-size: 12px; opacity: .7;
    -webkit-transition: all ease .5s; transition: all ease .5s;
    -webkit-transform: translateY(50px); transform: translateY(50px);
    opacity: 0;
}
[data-spot="orchard"] { top: 42%; left: 33.5%; width: 18.5%; height: 24%; border-radius: 50%; }
[data-spot="orchard"] .sign { top: -20%; left: 8%; }
[data-spot="education"] { top: 21%; left: 25.5%; width: 14%; height: 30%; border-radius: 50%; }
[data-spot="education"] .sign { top: 14%; left: -14%; }
[data-spot="inquire"] { top: 24%; left: 53%; width: 8.5%; height: 19%; border-radius: 50%; }
[data-spot="inquire"] .sign { top: -20%; left: -73%; }
[data-spot="teacher"] { top: 36%; left: 65%; width: 8%; height: 13%; border-radius: 50%; }
[data-spot="teacher"] .sign { top: -64%; left: -57%; }
[data-spot="information"] { top: 36%; left: 74%; width: 9%; height: 18%; border-radius: 50%; }
[data-spot="information"] .sign { top: -40%; left: -50%; }
[data-spot="greenhouse"] { top: 49%; left: 27%; width: 19%; height: 13%; border-radius: 50%; }
[data-spot="greenhouse"] .sign { top: -42%; left: -5%; }
[data-spot="stockbreeding"] { top: 68%; left: 25%; width: 24%; height: 22%; border-radius: 50%; }
[data-spot="stockbreeding"] .sign { top: -28%; left: 21%; }
[data-spot="flowering"] { top: 54%; left: 49.5%; width: 17%; height: 19%; border-radius: 50%; }
[data-spot="flowering"] .sign { top: -22%; left: -10%; }
[data-spot="greeting"] { top: 63%; left: 67%; width: 11%; height: 20%; border-radius: 0%; }
[data-spot="greeting"] .sign { top: -9%; left: -30%; }
@media(min-width:1025px){
	.spot-button:hover .sign{
        -webkit-transform: translateY(0); transform: translateY(0);
        opacity: 1;
    }
    .spot-button:hover .sign .pannel::before{
        left: -50%;
        opacity: 1;
    }
    .spot-button:hover .tit,
    .spot-button:hover .txt{
        -webkit-transform: translateY(0); transform: translateY(0);
        opacity: 1;
    }
}
@media(max-width:1024px){

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

}