@charset "utf-8";
/* CSS Document */
@font-face {
    font-family: 'CookieRun-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/CookieRun-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
html, body{
	height:100%;
	
}
@media (max-width: 767px) { 
  html, body{
	font-size:16px
  }
}
@media (min-width: 768px) {
  html, body{
	font-size:17px
  }	
}
 
body{
    font-family: 'Noto Sans KR', sans-serif;
	line-height:1.5;
	color:#2a2a2a;
	overflow-y:scroll;
	overflow-x:hidden;
}
.btn{
	transition: all ease-in-out .8s;
}
.line-height-15{
	line-height:1.5;
}
.btn, button:focus, input:focus, button:active, input:active, .form-control:focus, .form-control:active,  a:focus, a:active{
	outline: 0 !important;
	box-shadow: none !important;
}
.btn{
	cursor:pointer;
}
a{
	cursor:pointer;
}
a:hover{
	color:#dd4e20;
}
.form-control:focus, .form-control:active, .form-select:focus, .form-select:active, .board-form .form-select:hover, .board-form .form-select:focus {
	border: 1px solid #ff457e;
	outline:0;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 5000s ease-in-out 0s;
    -webkit-transition: background-color 9999s ease-out;
    -webkit-box-shadow: 0 0 0px 1000px #603813 inset !important;
    -webkit-text-fill-color: #fcf6d2 !important;
	font-size:1.2rem;
}
.custom-control-label::before {
    position: absolute;
    top: 0rem;
    left: -1.5rem;
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    pointer-events: none;
    content: "";
    background-color: #fff;
    border: #adb5bd solid 1px;
	border-radius: .2rem;
}
.custom-control-label::after {
    position: absolute;
    top: .2rem;
    left: -1.25rem;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
    background: no-repeat 50%/50% 50%;
}
.custom-control-label::before, .custom-file-label, .custom-select {

}
.custom-checkbox label{
	padding-left:.5rem;	
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    line-height: 1.4;
}
.text-red{
	color:#ff3366
}
.text-yellow{
	color:#ffba00;
}
.text-light-yellow{
	color:#fcf7ba;
}
.text-green{
	color:#88d914;
}
.text-white{
	color:#ffffff;
}
.text-blue{
	color:#08aaf4!important;
}
.text-orange{
	color:#fe5a27;
}
.text-purple{
	color:#624dd6;
}
.fill-red{
	fill:none;stroke:#ff3366;stroke-width:1.2963;stroke-miterlimit:10;
}
.fill-yellow{
	fill:none;stroke:#ffba00;stroke-width:1.2963;stroke-miterlimit:10;
}
.fill-blue{
	fill:none;stroke:#08aaf4;stroke-width:1.2963;stroke-miterlimit:10;
}
.bg-red{
	background-color:#ff3366;
	color:#ffffff
}
.bg-yellow{
	background-color:#fcba0d;
	color:#ffffff
}
.bg-blue{
	background-color:#08aaf4;
	color:#ffffff
}
.bg-green{
	background-color:#88d914;
	color:#ffffff
}
.bg-purple{
	background-color:#624dd6;
	color:#ffffff;
}
.bg-orange{
	background-color:#fe5a27;
	color:#ffffff;
}
.bg-gray{
	background-color:#bfc1d6;
	color:#ffffff
}
.btn-purple{
	background-color:#4331ac;
	color:#ffffff;
	border:2px solid #2f1e88;
}
.btn-purple:hover{
	background-color:#2f1e88;
	color:#ffffff;
	border:2px solid #1f1266;
}
.btn-green{
	background-color:#45c40a;
	color:#ffffff;
	border:0;
}
.btn-green:hover{
	background-color:#3c9e08;
	color:#ffffff;
	border:0;
}
         
.btn-grad-green {
background-image: linear-gradient(to top, #06beb6 0%, #48b1bf  51%, #06beb6  100%);
text-align: center;
text-transform: uppercase;
transition: 0.5s;
background-size: auto 200%;
color: white;            
box-shadow: 0 0 20px #eee;
display: block;
font-size:.9rem;
}

.btn-grad-green:hover {
background-position: bottom center; /* change the direction of the change here */
color: #fff;
text-decoration: none;
}
         
.custom-control-input:checked~.custom-control-label::before{
	color: #fff;
    border-color: #18b8ff;
    background-color: #18b8ff;;
}
.btn, .form-control, .custom-file-label{
	border-radius:0;
}
input[type=checkbox]~.custom-control-label, input[type=radio]~.custom-control-label{
	cursor: pointer;
}
.custom-checkbox label{
	font-size:1rem!important;
}
.shadows{
	box-shadow: .25rem .3rem rgba(0,0,0,.4)!important;
}
.font-weight-700{
	font-weight:700
}
.font-weight-300{
	font-weight:300
}
main, footer{
	word-break: keep-all;
    margin: 0 auto;
}
/****visual****/
.header{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	text-align:center;
	padding-top:3rem;
	z-index:6;
}
.logo{
	width: 35%;
	max-width: 160px;
	display: inline-block;
}
.login-group{
	position:relative;
	left:0;
	top:0;
	width:100%;
	z-index:7;
	padding:8rem 0;
}
.login-box{
	position:relative;
	margin-top:3rem;	
	background-image: linear-gradient(to right, #fcdb54 0%, #ecbe16  100%);
	border-radius:1rem;
	border: 2px solid #51290e;
	padding:3rem .6rem 1rem .6rem;
}
             
.login-box:after{
	content:'';
	padding:.5rem;
	border:2px solid #51290e;
	position:absolute;
	bottom:-10px;
	right:0;	
	width:100%;
	height:4.5rem;
	border-radius:1rem;
	background-color:#a95e21;
	background-image:url(../img/login-line.png);
	background-position:center bottom;
	z-index:-1;
}
.login-box .leaf{
	position:absolute;
	right:0;
	top:-2.9rem;
	height:3rem;
}
.logout-box{
	min-width:15rem;
}
.login-group .login-title{
	width:8rem;
	position:absolute;
	top:-6rem;
	left:50%;
	margin-left:-4rem;
	z-index:3;
}
.login-group .login-title .signin{
	position:absolute;
	animation: signin-cw 4s infinite both;	
	left:0;
	top:0;
}
@keyframes signin-cw {
  0% {
        transform: scale(.8) translateY(0);
  }
  5% {
        transform: scale(1) translateY(-.5rem);
  }  
  75% {
        transform: scale(1) translateY(-.5rem);
  }   
  80% {
        transform: scale(.8) translateY(0);
  }  
  100% {
        transform: scale(.8) translateY(0);
  }
}
.login-group .head-copy{
    width: 60%;
    max-width: 250px;
	display:inline-block;
}
.btn-grad {
	transition: 0.5s;
	background-size: 200% auto;
	display: block;
}
.btn-grad:hover {
	background-position: right center; /* change the direction of the change here */
	color: #fff;
	text-decoration: none;
}  
.login-group .login-text{
	position:relative;
	padding:0 0 .5rem 3.2rem;
}
.login-group .login-text .login-text-input{
	position:relative;
	border-radius:100px;
}
.login-group .login-text input{
	font-size:1.3rem;
	border:0;
	padding:.8rem 1.5rem;
	height:auto;
	background-color:#603813 ;
	color:#ffffff;
}
         
.login-group .login-text .login-text-input:before{
	content:'';
	width: 0; 
	height: 0; 
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent; 
	border-right: 8px solid #603813;
	position:absolute;
	left:-5px;
	top:50%;
	margin-top:-8px;  
}
.login-group .login-text input {
	transition: 0.5s;
	color: #fcf6d2!important;            
	display: block;
}
         
.login-group .login-text input::placeholder {
   color: #fcf6d2;
   font-weight:300;
}
.login-group .login-text img{
	width: 2.2rem;
	background-position: .5rem center;
	background-repeat: no-repeat;
	position: absolute;
	top:50%;
	margin-top:-1.1rem;
	left: .5rem;
}
.login-group .logout-text img{
	width:5.5rem;
	position:absolute;
	left:1rem;
	top:-2.5rem;
}
 .btn-mypage{
	padding:1rem 2rem;
	font-size:1.3rem;
	white-space:nowrap;
	position:relative;
	border:0;
	color:#ffffff;
	font-weight:300;
}
.login-group .btn-logout{
	background-image: linear-gradient(to bottom, #d25e61 0%, #b51521  51%, #d25e61  100%);
	border:0;
	width:auto;
	height:auto;
	border:0;
	position:relative;
	border-radius:100px;
	padding:.4rem 1.5rem;
	margin-right:.25rem;
	margin-top: 0.5rem;
	color:#ffffff;
	font-size:1.2rem;
	font-weight:300;
}  
.btn-login {
	background-image: linear-gradient(to bottom, #d25e61 0%, #b51521  51%, #d25e61  100%);
	border:0;
	width:auto;
	height:auto;
	border:0;
	position:relative;
	border-radius:100px;
	padding:.4rem 1.5rem;
	margin-right:.25rem;
}         
.btn-login img, .login-group .btn-logout img{
	width:1.6rem;
}
.btn-login:before, .login-group .btn-logout:before{
	content:'로그인';
	width:100%;
	left:0;
	top:.1rem;
	bottom:auto;
	position:relative;
	font-size:1.1rem;
	line-height:1;
	color:#fcf6d2;
	padding-right:0;
	margin-right:.7rem;
}
.login-group .btn-logout:before{
	content:'로그아웃';
}
.login-group .btn-login, .btn-mypage, .login-group .btn-logout{
	transition: 0.5s;
	background-size: auto 200%;
	display: block;
}
.login-group .btn-login:hover, .btn-mypage:hover, .login-group .btn-logout:hover {
	background-position: bottom center; /* change the direction of the change here */
	color: #fff;
	text-decoration: none;
}
.login-group .btn-mypage {background-image: linear-gradient(to bottom, #fc00ff 0%, #00dbde  51%, #fc00ff  100%); padding-left:4rem;}   
.login-group .btn-mypage img{
	height:2rem;
	position:absolute;
	top:50%;
	margin-top:-1rem;
	left:1rem;
}    
.logout-text{
	font-size:1.23rem;
	padding:1rem .5rem .5rem 0;
	color:#381c09;
}
.top-cloud {
    width: 100%;
    height: 10rem;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(../img/top-cloud.svg);
    background-position: top center;
    background-size: contain;
    background-repeat: no-repeat;
}
.front-visual{
	min-height:57rem;
	position:relative;
	overflow:hidden;
	padding:4rem 0;
}
.front-visual .main-visual-group{
	position:absolute;	
	height: 100%;
    width: 100%;
    left: 0;
    top: 0;	
}
.front-visual .main-visual-img{
	height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    background-position: bottom center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 3;
    position: relative;
	margin:0 auto;
}
.visual-tree3-box{
	position:absolute;
	width:50%;
	padding-bottom:25%;
	bottom:13rem;
	left:30%
}
.visual-tree3{
	position:absolute;
	width:100%;
	height:100%;
	background-image:url(../img/visual-tree3.svg);	
	background-size:contain;
	background-repeat:no-repeat;
	background-position:bottom center;
}
.visual-tree1-box{
	position:absolute;
	width:22%;
	padding-bottom:45%;
	bottom:6rem;
	left:0%
}
.visual-tree1{
	position:absolute;
	width:100%;
	height:100%;
	background-image:url(../img/visual-tree1.svg);	
	background-size:contain;
	background-repeat:no-repeat;
	background-position:bottom left;
}
.visual-tree2-box{
	position:absolute;
	width:25%;
	padding-bottom:45%;
	bottom:6rem;
	right:0%
}
.visual-tree2{
	position:absolute;
	width:100%;
	height:100%;
	background-image:url(../img/visual-tree2.svg);	
	background-size:contain;
	background-repeat:no-repeat;
	background-position:bottom right;
}
.visual-tree2-box .visual-tree2-arm{
	position:absolute;
	width:15%;
	height:7%;
	background-image:url(../img/visual-tree2-arm.svg);	
	background-size:contain;
	background-repeat:no-repeat;
	background-position:bottom left;
	top: 35%;
	right: 22%;	
	animation: visual-tree2-arm-cw 4s infinite 2s both;	
}
.visual-deer-box{
	position: absolute;
	width: 18%;
	padding-bottom: 24%;
	bottom: 8rem;
	left: 10%;
}
.visual-deer{
	position:absolute;
	width:100%;
	height:100%;
	background-image:url(../img/visual-deer.svg);	
	background-size:contain;
	background-repeat:no-repeat;
	background-position:bottom right;		
}
.visual-deer-antlers1{
position: absolute;
    width: 37%;
    height: 27%;
    background-image: url(../img/visual-deer-antlers1.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom left;
    top: -21%;
    right: -22%;
    animation: visual-deer-antlers1-cw 5s infinite both;	
}
.visual-deer-antlers2{
	position: absolute;
    width: 37%;
    height: 27%;
    background-image: url(../img/visual-deer-antlers2.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom left;
	top: -21%;
	right: 16%;
	animation: visual-deer-antlers2-cw 5s infinite  both	
}
.visual-fox-box{
	position: absolute;
	width: 20%;
	padding-bottom: 26%;
	bottom: 6rem;
	right: 12%;
}
.visual-fox{
	position:absolute;
	width:100%;
	height:100%;
	background-image:url(../img/visual-fox.svg);	
	background-size:contain;
	background-repeat:no-repeat;
	background-position:bottom right;		
}
.visual-fox-arm{
	position: absolute;
	width: 42%;
	height: 30%;
	background-image: url(../img/visual-fox-arm.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: bottom left;
	top: 25%;
	right: 35%;
	animation: visual-fox-arm-cw 6s infinite both;
}
.visual-snake-box{
	position: absolute;
	width: 22%;
	padding-bottom: 7%;
	bottom: 7rem;
	left: 20%;
}
.visual-snake{
	position:absolute;
	width:100%;
	height:100%;
	background-image:url(../img/visual-snake.svg);	
	background-size:contain;
	background-repeat:no-repeat;
	background-position:bottom right;		
}
.visual-snake-hat{
	position: absolute;
	width: 10%;
	height: 28%;
	background-image: url(../img/visual-snake-hat.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: bottom left;
	top: -15%;
	right: 48%;
	animation: visual-snake-hat-cw 3s infinite both;	
}
.visual-panda-box{
	position: absolute;
	width: 26%;
	padding-bottom: 34%;
	bottom: 2rem;
	left: 50%;
	margin-left: -13%;
	background-image: url(../img/visual-panda.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: bottom center;	
}
.visual-panda{
	position:absolute;
	width:100%;
	height:100%;	
}
.visual-panda img{
	width:100%
}
.visual-panda-hello{
	position: absolute;
	width: 30%;
	height: 20%;
	background-image: url(../img/hello.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: bottom left;
	top: 10%;
	right: 68%;
	animation: visual-panda-hello-cw 6s infinite both;
}
.visual-frog-box{
	position: absolute;
	width: 16%;
	padding-bottom: 16%;
	bottom: 2rem;
	right: 20%;
	margin-left: -13%;
}
.visual-frog{
	position:absolute;
	width:100%;
	height:100%;	
	background-image: url(../img/visual-frog.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: bottom left;	
}
.visual-frog-fly{
	position: absolute;
	width: 12%;
	height: 15%;
	background-image: url(../img/bird-fly.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: top left;
	top: 13%;
	left: 50%;
	animation: bird-fly-cw 4s infinite both;
}
.visual-mushroom1-box{
	position: absolute;
	width: 8%;
	padding-bottom: 7%;
	bottom: 4rem;
	right: 0%;
}
.visual-mushroom1{
	position:absolute;
	width:100%;
	height:100%;
	background-image:url(../img/visual-mushroom1.svg);	
	background-size:contain;
	background-repeat:no-repeat;
	background-position:bottom right;		
}
.visual-mushroom2-box{
	position: absolute;
	width: 8%;
	padding-bottom: 7%;
	bottom:4rem;
	left: 0%;
}
.visual-mushroom2{
	position:absolute;
	width:100%;
	height:100%;
	background-image:url(../img/visual-mushroom2.svg);	
	background-size:contain;
	background-repeat:no-repeat;
	background-position:bottom right;		
}
.visual-balloon{
	position: absolute;
	width: 15%;
	height: 20%;
	background-image: url(../img/balloon2.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: top left;
    top: 50%;
    margin-top: -25%;
	right: 20%;
	animation: balloon-cw 7.5s infinite both;
}
.visual-balloon-mv{
	position: absolute;
    top: 18%;
	right: -2rem;
	z-index:10;
	animation: balloon-cw 3s infinite both;
}
.visual-balloon-mv img{
	width:9rem;
}
@keyframes balloon-cw {
  0% {
        transform: translateY(0);
  }
  40% {
        transform: translateY(-.5rem);
  }  
  80% {
        transform: translateY(0);
  }  
  100% {
        transform: translateY(0);
  }
}
@keyframes visual-panda-hello-cw{
  0% {
		opacity: 0;
  }
  10% {
		opacity: 1;
  }  
  50% {
		opacity: 1;
  }   
  60% {
		opacity: 0;
  }   
  100% {
	opacity: 0;
  }  
}
@keyframes bird-fly-cw {
  0% {
            transform: rotate(0);
	transform-origin:top left;
  }
  10% {

            transform: rotate(-15deg);
	transform-origin:top left;
  }  
  20% {

            transform: rotate(0deg);
	transform-origin:top left;	
  }   
  30% {

            transform: rotate(0deg);
	transform-origin:top left;	
  }    
}
@keyframes visual-snake-hat-cw {
  0% {
            transform: rotate(0);
	transform-origin:top left;
  }
  50% {

            transform: rotate(30deg);
	transform-origin:bottom right;	
  }  
  60% {

            transform: rotate(0deg);
	transform-origin:bottom right;	
  }    
}
@keyframes visual-tree2-arm-cw {
  0% {
            transform: rotate(0);
	transform-origin:bottom left;
  }
  50% {

            transform: rotate(360deg);
	transform-origin:bottom left;	
  }  
  100% {

            transform: rotate(360deg);
	transform-origin:bottom left;	
  }    
}
@keyframes visual-deer-antlers1-cw {
  0% {
            transform: rotate(0);
	transform-origin:bottom left;
  }
  50% {

            transform: rotate(15deg);
	transform-origin:bottom left;	
  }  
  80% {

            transform: rotate(0deg);
	transform-origin:bottom left;	
  } 
  100% {
            transform: rotate(0);
	transform-origin:bottom left;
  }  
}
@keyframes visual-deer-antlers2-cw {
  0% {
            transform: rotate(0);
	transform-origin:bottom right;
  }
  50% {

            transform: rotate(-15deg);
	transform-origin:bottom right;	
  }  
  80% {

            transform: rotate(0deg);
	transform-origin:bottom right;	
  } 
  100% {
            transform: rotate(0);
	transform-origin:bottom right;
  }  
}
@keyframes visual-fox-arm-cw {
  0% {
            transform: rotate(0);
	transform-origin:top right;
  }
  10% {

            transform: rotate(-15deg);
	transform-origin:top right;	
  }  
  20% {

            transform: rotate(-15deg);
	transform-origin:top right;	
  }    
  30% {

            transform: rotate(0deg);
	transform-origin:top right;	
  } 
  100% {
            transform: rotate(0);
	transform-origin:top right;
  }  
}
.front-visual .main-cloud-wrapper{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
}
.front-visual .main-cloud{
	background-image:url(../img/front-cloud.svg);
	width:100%;
	height:90%;
	bottom:10%;
	position:absolute;
    background-size: contain;
    background-repeat: no-repeat;	
    background-position: bottom center;	
}
.front-visual .main-cloud.x1{
	-webkit-animation: slide-cloud-x1 60s linear infinite both;
	        animation: slide-cloud-x1 60s linear infinite both;	
}
.front-visual .main-cloud.x2{
	-webkit-animation: slide-cloud-x2 60s linear infinite both;
	        animation: slide-cloud-x2 60s linear infinite both;	
}
.front-visual .main-grass{
	background-image:url(../img/grass.svg);
	width: 100%;
	height: 20rem;
	z-index: 2;
	position: absolute;
	left: 0;
	bottom: 0;
    background-size: cover;
    background-repeat: no-repeat;	
    background-position: top center;		
}
@-webkit-keyframes slide-cloud-x1 {
  0% {
		margin-left:0;
  } 
  100% {
		margin-left:-100%;
  }
}
@keyframes slide-cloud-x1 {
  0% {
		margin-left:0;
  } 
  100% {
		margin-left:-100%;
  }
}
@-webkit-keyframes slide-cloud-x2 {
  0% {
		margin-left:100%;
  } 
  100% {
		margin-left:0%;
  }
}
@keyframes slide-cloud-x2 {
  0% {
		margin-left:100%;
  } 
  100% {
		margin-left:0%;
  }
}

/***section01***/
.section{
	padding:7rem 0;
	position:relative;
}
.section01 .hens-bubble{
	padding:2rem 3rem 6rem 2.5rem;
	position:relative;
	color:#ffffff;
	min-width:7rem;
	width:14rem;
	height:13rem;
	background-image:url(../img/talk-bubble.svg);
	background-repeat:no-repeat;
	background-size:contain;
}
.section01 .loop-bg-top{
	background-image:url(../img/bg-circle.png);
	height:25px;
	background-color:#009245;
	position:absolute;
	top:0;
	left:0;
	width:100%;
}
.section01 .bg-top{
	position:absolute;
	top:0;
	left:0;
	height:50px;
	width:100%;
	background-image:url(../img/bg-circle.png);
	background-color:#006e34;
}
.section01 .hens-wrapper{
	position:relative;
	padding-bottom:10rem;
	height:18rem;
}
.section01 .hens-group{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
}
.section01 .hens{
	width:10rem;
	position:relative;
	margin:0 auto;
}
.section01 .hens-eye{
	width:10rem;
	position:absolute;
	left:50%;
	top:0;
	margin-left:-5rem;
	-webkit-animation: hens-eys 7s linear infinite both;
	        animation: hens-eys 7s linear infinite both;		
}
@keyframes hens-eys{
  0% {
		opacity: 1;
  }
  40% {
		opacity: 1;
  } 
  40.1% {
		opacity: 0;
  }   
  100% {
	opacity: 0;
  }  
}
.section01 .why-point-line{
	position:relative;
	margin:0 auto;
	width:1px;
	height:5rem;
	background-color:#313131;
	display:inline-block;
	margin:0 auto;
}

/***section02***/
.section02{
	padding:17rem 0 15rem 0;
	background-image:url(../img/alphabet.png);
	background-size:cover;
	overflow:hidden;
}
.section02 .hero-monkey{
	position:absolute;
	width:13rem;
	top:-1.5rem;
	left:50%;
	margin-left:-7rem;
	        animation: monkey-cw 2s linear infinite both;	
}
@keyframes monkey-cw {
  0% {
            transform: rotate(0);
	transform-origin:top center;
  }
  20% {

            transform: rotate(-15deg);
	transform-origin:top center;
  }  
  70% {

            transform: rotate(15deg);
	transform-origin:top center;
  }  
  100% {
            transform: rotate(0);
	transform-origin:top center;
  }  
}
.section02 .hero-lion{
	position:absolute;
	width:12rem;
	bottom:0;
	left:50%;
	margin-left:-6rem;
}
.section02 .paperFly{
	width:300px;
	position:absolute;
	bottom:0;
	left:50%;
	margin-left:-150px;
}
.section02 .hgroup{
	position:relative;
	z-index:2;
}
/***section03***/
.section03 {
	padding-bottom:5rem;
}
.section03 .top-bg{
	height:25px;
	background-color:#18b8ff;
	background-image:url(../img/bg-circle.png);
	position:absolute;
	top:0;
	left:0;
	width:100%;
}
.section03 .steps{
	width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    line-height: 3rem;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
	padding-bottom:2rem;
}
.section03 .steps:before{
	position:absolute;
	bottom:.5rem;
	content:'step';
	width:100%;
	line-height:1;
	font-size:.7rem;
	left:0;
}
.section03 .falt{
	position:relative;
	padding-left:4.5rem;
}
.section03 .falt .falt-img{
	width:4rem;
}
/***section04***/
.section04 .steps{
	width:3rem;
	height:3rem;
	border-radius:50%;
	line-height:3rem;
	text-align:center;
	position:absolute;
	top:-1.5rem;
	right:0;
}
.section04 .grade{
	border-radius:100px;
	padding:.5rem 1rem;
	text-align:center;
	position:absolute;
	top:-1.2rem;
	left:0;
}
.section04 .falt{
	padding-top:3rem
}
.section04 .grade-step-img{
	width:6em
}
.section04 .grade-step-book{
	width:12rem;
	max-width:100%;
}
.section04 .projectbook-img{
	display:inline-block;
}
.section04 .projectbook-img span{
	width:.4rem;
	height:.4rem;
	border-radius:50%;
	display:inline-block;
	margin:.1rem;
}
.section04 .fill-box{
	width:20px;
	display:inline-block;
}
.section04 .fill-box svg{
	margin-top:-.2rem;
}
.arrowed {
	position: absolute;
    height: 40px;
    width: 11px;
    margin: 0 auto;
    padding-top: 10px;
	top:2.5rem;
	left:50%;
	margin-left:-6px;
}
.arrow-6 {
	/* more triangle */
	height: 10px; width: 10px;
	border: 1px solid rgba(97, 77, 214, 0.6);
	border-width: 3px 3px 0 0;
	transform: rotate(135deg);
}

.arrow-6:before, .arrow-6:after {
	content: '';
	position: absolute;
	display: block;
	height: 10px; width: 10px;
	border-width: 3px 3px 0 0;
}

.arrow-6:before {
	border: 1px solid rgba(97, 77, 214, 0.3);
	border-width: 3px 3px 0 0;
	/* top - distance minus border */
	top: 7px; left: -10px;
}

.arrow-6:after {
	border: 1px solid rgba(97, 77, 214, 1);
	border-width: 3px 3px 0 0;
	/* top - distance plus border */
	top: -13px; left: 10px;
}
.falt-r{
	margin: .5rem;
    display: inline-block;
    width: 7rem;
    height: 7rem;	
	padding:.5rem;
	display: -webkit-box!important;
	display: -ms-flexbox!important;
	display: flex!important;	
	-webkit-box-align: center!important;
	-ms-flex-align: center!important;
	align-items: center!important;	
	-webkit-box-pack: center!important;
	-ms-flex-pack: center!important;
	justify-content: center!important;	
	line-height:1.2;
	text-align:center;
	font-size:.87rem;
}
.flat00{
	border-radius: 00;
}
.flat01{
	border-radius: 10px;
}
.flat02{
	border-radius: 50%;
}
.flat03{
	border-radius: 5px 7rem 5px 5px;
	padding: 1rem 1.5rem .5rem .5rem;
}
.flat04{
	border-radius: 5px 5px 5px 7rem;
	padding: .5rem .5rem 1rem 1.5rem;
}
.compositioBook{
	position:relative
}
.compositioBook img{
	width:6rem;
}
.compositioBook .book-num-p{
    background-image: linear-gradient(to top, #673AB7 0%, #512DA8 51%, #673AB7 100%);
	color:#ffffff;
	width:3rem;
	height:3rem;
    border-radius:50%;
	line-height:3rem;
	text-align:center;
	position:absolute;
	left:0;
	top:-1.5rem;
}
.compositiosetBook{
	position:relative
}
.compositiosetBook img{
	width:17rem;
}
.compositiosetBook .book-num-p{
    background-image: linear-gradient(to top, #673AB7 0%, #512DA8 51%, #673AB7 100%);
	color:#ffffff;
	width:8rem;
    border-radius:10rem;
	text-align:center;
	position:absolute;
	left:50%;
	margin-left:-4rem;
	top:-1rem;
	height:2rem;
	line-height:2rem;
}
.modalCurrbook{
	width:100%;
	max-width:40rem;
}
/*****footer*****/
footer{
	color:#989898;
	padding-top:3rem;
	padding-bottom:6rem;
	border-top:1px solid #ced4da;	
}
footer .copyright {
	background-repeat:no-repeat;
	background-position:left top;	
	color:#989898
}
footer .copyright a{
	color:#989898
}
footer .logo-highfun{
	background-image:url(../img/highfive.svg);
	background-size:4rem auto;	
	padding-top:3rem;	
}
footer .logo-highfunPhonics {
	background-image:url(../img/highfun.png);
	background-size:4rem auto;	
	padding-top:3rem;	
}
footer .footer-menu a{
	color:#989898;
	text-decoration:none
}
footer .footer-menu a:hover{
	color:#313131;
}
footer .text-blue a{
	color: #08aaf4!important;
}
footer .small, footer small {
    font-size: 85%;
}
footer .dropdown-menu a:focus{
	background-color:#676767;
	color:#ffffff
}
footer .footer-menu .btn-secondary, footer .footer-menu .btn-secondary:hover{
	color:#ffffff;
}
@media (min-width: 768px){
	.login-group .head-copy{
		max-width:250px;
	}	
}
@media (min-width: 992px){
	.login-group .login-box{
		padding:0 0 0 7.5rem;
		margin-top:0;
		border-radius:100px;
	}
	.login-box:after{
		border-radius:100px;
	}	
	.login-group .login-title{
		width:8rem;
		top:-3.5rem;
		left:0;
		margin-left:0rem;
	}		
	.login-group .btn-login, .login-group .btn-logout{
		width:auto;
		height:5rem;
		border-bottom-right-radius: 100px;	
		border-top-right-radius: 100px;
		border-top-left-radius:0;
		border-bottom-left-radius:0;
		border:0;		
		margin-right:0;
		margin-left:1rem;
		margin-top:0;
		padding-left:1.5rem;
		padding-right:2rem;
		padding-bottom:1rem;
	}		
	.login-group .btn-login:before, .login-group .btn-logout:before{
		padding-right:.5rem;
		bottom:.5rem;
		top:auto;
		position:absolute;
		font-size:.7rem;		
	}	
	.login-group .btn-login img, .login-group .btn-logout img {
		width: 1.7rem;
		margin-bottom: .3rem;
	}	
	
	.login-group .login-text img{
		width: 2.8rem;
		margin-top:-1.4rem;
	}	
	.login-group .login-text {
		position: relative;
		padding: 0.5rem 0 .5rem 3.5rem;
	}	
	.login-group .login-box.logout-box{
		padding-left:5rem;
	}
	.login-group .logout-text img{
		width:5rem;
		position:absolute;
		left:-.5rem;
		top:auto;
		bottom:0;
	}
	.logout-text{
		padding:1.16rem .5rem 1rem 0;
	}
	footer .logo-highfun {
		background-size:4rem auto;	
		padding-left:5rem;
		padding-top:0;					
	}
}
@media (min-width: 1024px){
	.front-visual .main-visual-img {
		width: 100%;
		max-width: 1500px;
	}
	.front-visual .main-cloud{
		bottom:5%;
	}	
	.logo{
		width:20%;
		max-width:180px;
	}	
	.login-group .head-copy{
		max-width:250px;
	}	
}
@media (min-width: 1200px){
	.login-group .head-copy {
		max-width: 280px;
	}
}
@media (min-width: 2000px){
	.front-visual .main-visual-img {
		width: 65%;
		max-width: 1900px;
	}	
	.front-visual .main-cloud {
		bottom:-5%;
	}	
}
@media (max-width: 1920px) {
	h1{
		font-size:calc(13px + 1.4vw);
	}
	h2{
		font-size:calc(13px + 1.2vw);
		line-height:1.4
		}	
	h3{
		font-size:calc(13px + 1vw);
	}
	h3{
		font-size:calc(13px + .9vw);
	}	
	.section01 .bg-top{
		height:38px;
		background-image:url(../img/bg-circle-m.png);
	}		
}
@media (max-width: 1199px) {
	.phonics-card-border{
		border-top: 1px solid rgba(0,0,0,.125)!important;
		border-radius:0!important;
	}
}
@media (max-width: 1024px) {
	h1{
		font-size:calc(20px + 2vw);
	}
	h2{
		font-size:calc(18px + 1.5vw);
	}	
	h3{
		font-size:calc(18px + 1.2vw);
	}
	h4{
		font-size:calc(17px + .8vw);
	}	
	.front-visual {
		min-height: 50rem
	}
	.front-visual .main-cloud-wrapper{
		height:90%;
	}
	.front-visual .main-grass {
    height: 18rem;
	}
}
@media (max-width: 990px) {
	h1{
		font-size:calc(22px + 1.9vw);
	}
	h2{
		font-size:calc(21px + 1.7vw);
	}	
	h3{
		font-size:calc(20px + 1.5vw);
	}	
	h3{
		font-size:calc(19px + 1.3vw);
	}
	.front-visual {
		min-height: 100vh;
	}	
	.login-group .login-text input{
		font-size:1.2rem;
	}
	.login-group button{
		text-align:center;
        display:inline-block;
		font-size:1.2rem;
		padding:.7rem 2rem;
	}	
	.login-group button:after {
		height: 3.5rem;
	}
	.front-visual .main-visual-group, .front-visual .main-cloud-wrapper, .front-visual .main-grass{
		width: 160%;
		margin-left:-30%;
	}	
	.front-visual .main-cloud-wrapper{
		height:95%;
	}	
	 .front-visual .main-grass{
		 height:15rem;
	 }	
	.popup-contents-lg {
		position: absolute;
		z-index: 10001;
		top: 0;
		left: 0;
		right: 0;
		bottom: auto;
	}	 
}
@media (max-width: 766px) {
	h1{
		font-size:calc(20px + 1.7vw);
	}
	h2{
		font-size:calc(19px + 1.4vw);
	}	
	h3{
		font-size:calc(18px + 1.1vw);
	}	
	h4{
		font-size:calc(17px + .8vw);
	}
	.front-visual {
		padding: 3rem 0;
	}
	.section01 .bg-top{
		height:25px;
		background-image:url(../img/bg-circle-s.png);
	}	
	.front-visual .main-cloud-wrapper{
		height:90%;
	}	
	.login-group {
		padding-bottom:18rem;
	}	
	.popup-contents-md {
		position: absolute;
		z-index: 10001;
		top: 0;
		left: 0;
		right: 0;
		bottom: auto;
	}		
}	
@media (min-width: 767px) {
	.visual-balloon-mv{
		top: 3rem;
		right: 0;
	}
	.visual-balloon-mv img{
		width:10rem;
	}
}
@media (min-width: 991px) {
	.visual-balloon-mv{
		top: -6rem;
		right: 0%;
	}
	.visual-balloon-mv img{
		width:12rem;
	}
}
@media (max-width: 576px){
	h1{
		font-size:calc(18px + 1.7vw);
	}
	h2{
		font-size:calc(17px + 1.4vw);
	}	
	h3{
		font-size:calc(16px + 1.1vw);
	}	
	h4{
		font-size:calc(15px + .8vw);
	}	
	.header {
		padding-top: 2rem;
	}			
	.front-visual .main-cloud.x1{
		-webkit-animation: slide-cloud-x1 40s linear infinite both;
				animation: slide-cloud-x1 40s linear infinite both;	
	}
	.front-visual .main-cloud.x2{
		-webkit-animation: slide-cloud-x2 40s linear infinite both;
				animation: slide-cloud-x2 40s linear infinite both;	
	}	
	.login-group .login-text input{
		font-size:1.1rem;
	}
	.login-group button{
		text-align:center;
        display:inline-block;
		font-size:1.1rem;
	}	
	.login-group {
		padding: 5rem 0 12rem 0;
	}	
	.login-group .head-copy {
		width: 90%;
		max-width: 200px;
	}		
	.section01 .hens-wrapper {
		padding-bottom: 7rem;
		height: 15rem;
	}	
	.section01 .hens, .section01 .hens-eye {
		width: 7rem;
	}	
	.section01 .hens-eye {
		margin-left: -3.5rem;
	}
	.section02 {
		padding: 13rem 0 12rem 0;
	}	
	.section02 .hero-monkey {
		width: 9rem;
		margin-left: -4.5rem;
		top: -1rem;
	}	
	.section02 .hero-lion {
		width: 9rem;
		margin-left: -4.5rem;
	}
	.section02 .paperFly{
		width:200px;
		margin-left:-100px;
	}	
	.front-visual .main-cloud-wrapper{
		height:80%;
	}	
	.top-cloud {
		height: 7rem;
	}
	.popup-contents-sm {
		position: absolute;
		z-index: 10001;
		top: 0;
		left: 0;
		right: 0;
		bottom: auto;
	}	
}
.popup-contents{
	position:fixed;
	z-index:101;
	top:0;
	left:0;
	right:0;
	bottom:0;	
}
.popup-img{
	width:auto;
	max-width:100%;
}
.popup-overlay{
	background-color:rgba(0,0,0,.5);
	position:fixed;
	z-index:100;
	top:0;
	left:0;
	right:0;
	bottom:0;	
}
.popup-wapper{
 position:fixed;
 top:0;
 left:0;
 right:0;
 bottom:0;
 z-index:100;
}
.popup-bg{
width:100%;
height:100%;
background-color:rgba(0,0,0,.4);	
display: flex;
align-items: center;
justify-content: center;	
}
.popup-wapper .popup{
background-color:#ffffff;
}
.popup-wapper .popup-contents{
 max-width:400px;
} 
.popup-wapper .popup-footer{
padding:.125rem;
}
.popup-wapper .btn{
color:#333333;
}
.popup-wapper .btn:hover{
color:#e3634a;
text-decoration:none;
}








.firefly {
  position: absolute;
  left: 50%;
  top: 50%;
  width: .5rem;
  height: .5rem;
  margin: -0.2vw 0 0 9.8vw;
  animation: ease 200s alternate infinite;
  pointer-events: none;
}
.firefly::before, .firefly::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform-origin: -10vw;
}
.firefly::before {
  background: #ffffff;
  opacity: 0.4;
  animation: drift ease alternate infinite;
}
.firefly::after {
  background: white;
  opacity: 0;
  box-shadow: 0 0 0vw 0vw yellow;
  animation: drift ease alternate infinite, flash ease infinite;
}
.firefly:nth-child(1) {
  animation-name: move1;
}
.firefly:nth-child(1)::before {
  animation-duration: 18s;
}
.firefly:nth-child(1)::after {
  animation-duration: 18s, 9018ms;
  animation-delay: 0ms, 4379ms;
}

@keyframes move1 {
  0% {
    transform: translateX(19vw) translateY(-44vh) scale(0.75);
  }
  4.7619047619% {
    transform: translateX(-22vw) translateY(-7vh) scale(0.57);
  }
  9.5238095238% {
    transform: translateX(-45vw) translateY(-10vh) scale(0.59);
  }
  14.2857142857% {
    transform: translateX(-21vw) translateY(46vh) scale(0.54);
  }
  19.0476190476% {
    transform: translateX(-2vw) translateY(30vh) scale(0.85);
  }
  23.8095238095% {
    transform: translateX(13vw) translateY(46vh) scale(0.3);
  }
  28.5714285714% {
    transform: translateX(3vw) translateY(4vh) scale(0.99);
  }
  33.3333333333% {
    transform: translateX(-9vw) translateY(-47vh) scale(0.73);
  }
  38.0952380952% {
    transform: translateX(41vw) translateY(-2vh) scale(0.5);
  }
  42.8571428571% {
    transform: translateX(19vw) translateY(18vh) scale(0.8);
  }
  47.619047619% {
    transform: translateX(-9vw) translateY(-21vh) scale(0.54);
  }
  52.380952381% {
    transform: translateX(9vw) translateY(22vh) scale(0.73);
  }
  57.1428571429% {
    transform: translateX(28vw) translateY(8vh) scale(0.59);
  }
  61.9047619048% {
    transform: translateX(-40vw) translateY(19vh) scale(0.63);
  }
  66.6666666667% {
    transform: translateX(33vw) translateY(2vh) scale(0.62);
  }
  71.4285714286% {
    transform: translateX(49vw) translateY(-22vh) scale(0.7);
  }
  76.1904761905% {
    transform: translateX(30vw) translateY(-21vh) scale(0.56);
  }
  80.9523809524% {
    transform: translateX(-49vw) translateY(18vh) scale(0.68);
  }
  85.7142857143% {
    transform: translateX(20vw) translateY(21vh) scale(0.83);
  }
  90.4761904762% {
    transform: translateX(-24vw) translateY(-30vh) scale(0.26);
  }
  95.2380952381% {
    transform: translateX(-9vw) translateY(-38vh) scale(0.76);
  }
  100% {
    transform: translateX(39vw) translateY(-36vh) scale(0.77);
  }
}
.firefly:nth-child(2) {
  animation-name: move2;
}
.firefly:nth-child(2)::before {
  animation-duration: 15s;
}
.firefly:nth-child(2)::after {
  animation-duration: 15s, 9040ms;
  animation-delay: 0ms, 878ms;
}

@keyframes move2 {
  0% {
    transform: translateX(34vw) translateY(-28vh) scale(0.75);
  }
  5.2631578947% {
    transform: translateX(-20vw) translateY(-48vh) scale(0.38);
  }
  10.5263157895% {
    transform: translateX(-1vw) translateY(30vh) scale(0.88);
  }
  15.7894736842% {
    transform: translateX(31vw) translateY(40vh) scale(0.8);
  }
  21.0526315789% {
    transform: translateX(46vw) translateY(-3vh) scale(0.69);
  }
  26.3157894737% {
    transform: translateX(-6vw) translateY(45vh) scale(0.4);
  }
  31.5789473684% {
    transform: translateX(-44vw) translateY(10vh) scale(0.62);
  }
  36.8421052632% {
    transform: translateX(30vw) translateY(10vh) scale(0.49);
  }
  42.1052631579% {
    transform: translateX(9vw) translateY(-21vh) scale(0.37);
  }
  47.3684210526% {
    transform: translateX(-1vw) translateY(-6vh) scale(0.31);
  }
  52.6315789474% {
    transform: translateX(-49vw) translateY(-44vh) scale(0.75);
  }
  57.8947368421% {
    transform: translateX(-8vw) translateY(21vh) scale(0.91);
  }
  63.1578947368% {
    transform: translateX(-34vw) translateY(21vh) scale(0.75);
  }
  68.4210526316% {
    transform: translateX(44vw) translateY(12vh) scale(0.33);
  }
  73.6842105263% {
    transform: translateX(42vw) translateY(-3vh) scale(0.75);
  }
  78.9473684211% {
    transform: translateX(23vw) translateY(34vh) scale(0.66);
  }
  84.2105263158% {
    transform: translateX(-32vw) translateY(30vh) scale(0.31);
  }
  89.4736842105% {
    transform: translateX(11vw) translateY(-11vh) scale(0.96);
  }
  94.7368421053% {
    transform: translateX(-44vw) translateY(14vh) scale(0.69);
  }
  100% {
    transform: translateX(0vw) translateY(39vh) scale(0.76);
  }
}
.firefly:nth-child(3) {
  animation-name: move3;
}
.firefly:nth-child(3)::before {
  animation-duration: 13s;
}
.firefly:nth-child(3)::after {
  animation-duration: 13s, 6767ms;
  animation-delay: 0ms, 5317ms;
}

@keyframes move3 {
  0% {
    transform: translateX(14vw) translateY(-47vh) scale(0.34);
  }
  4.1666666667% {
    transform: translateX(37vw) translateY(10vh) scale(0.82);
  }
  8.3333333333% {
    transform: translateX(-23vw) translateY(-49vh) scale(0.92);
  }
  12.5% {
    transform: translateX(-19vw) translateY(-15vh) scale(0.26);
  }
  16.6666666667% {
    transform: translateX(26vw) translateY(11vh) scale(0.98);
  }
  20.8333333333% {
    transform: translateX(14vw) translateY(2vh) scale(0.85);
  }
  25% {
    transform: translateX(46vw) translateY(42vh) scale(0.85);
  }
  29.1666666667% {
    transform: translateX(13vw) translateY(17vh) scale(0.93);
  }
  33.3333333333% {
    transform: translateX(-39vw) translateY(13vh) scale(0.96);
  }
  37.5% {
    transform: translateX(13vw) translateY(-15vh) scale(0.26);
  }
  41.6666666667% {
    transform: translateX(-18vw) translateY(-44vh) scale(0.6);
  }
  45.8333333333% {
    transform: translateX(-19vw) translateY(-9vh) scale(0.29);
  }
  50% {
    transform: translateX(-3vw) translateY(-8vh) scale(0.37);
  }
  54.1666666667% {
    transform: translateX(-44vw) translateY(-49vh) scale(0.46);
  }
  58.3333333333% {
    transform: translateX(17vw) translateY(-6vh) scale(0.79);
  }
  62.5% {
    transform: translateX(41vw) translateY(0vh) scale(0.72);
  }
  66.6666666667% {
    transform: translateX(17vw) translateY(-38vh) scale(0.96);
  }
  70.8333333333% {
    transform: translateX(40vw) translateY(7vh) scale(0.27);
  }
  75% {
    transform: translateX(18vw) translateY(48vh) scale(0.49);
  }
  79.1666666667% {
    transform: translateX(14vw) translateY(-20vh) scale(0.7);
  }
  83.3333333333% {
    transform: translateX(27vw) translateY(-30vh) scale(0.44);
  }
  87.5% {
    transform: translateX(-17vw) translateY(24vh) scale(1);
  }
  91.6666666667% {
    transform: translateX(30vw) translateY(-28vh) scale(0.44);
  }
  95.8333333333% {
    transform: translateX(-23vw) translateY(-38vh) scale(0.7);
  }
  100% {
    transform: translateX(10vw) translateY(12vh) scale(0.3);
  }
}
.firefly:nth-child(4) {
  animation-name: move4;
}
.firefly:nth-child(4)::before {
  animation-duration: 15s;
}
.firefly:nth-child(4)::after {
  animation-duration: 15s, 7287ms;
  animation-delay: 0ms, 7564ms;
}

@keyframes move4 {
  0% {
    transform: translateX(44vw) translateY(-43vh) scale(0.35);
  }
  3.5714285714% {
    transform: translateX(7vw) translateY(-39vh) scale(0.91);
  }
  7.1428571429% {
    transform: translateX(-20vw) translateY(-33vh) scale(0.93);
  }
  10.7142857143% {
    transform: translateX(48vw) translateY(38vh) scale(0.45);
  }
  14.2857142857% {
    transform: translateX(42vw) translateY(33vh) scale(0.34);
  }
  17.8571428571% {
    transform: translateX(-30vw) translateY(42vh) scale(0.72);
  }
  21.4285714286% {
    transform: translateX(10vw) translateY(49vh) scale(0.48);
  }
  25% {
    transform: translateX(32vw) translateY(48vh) scale(0.51);
  }
  28.5714285714% {
    transform: translateX(-12vw) translateY(-44vh) scale(0.9);
  }
  32.1428571429% {
    transform: translateX(11vw) translateY(37vh) scale(0.36);
  }
  35.7142857143% {
    transform: translateX(28vw) translateY(-3vh) scale(0.66);
  }
  39.2857142857% {
    transform: translateX(-31vw) translateY(-19vh) scale(0.76);
  }
  42.8571428571% {
    transform: translateX(-31vw) translateY(32vh) scale(0.83);
  }
  46.4285714286% {
    transform: translateX(1vw) translateY(-25vh) scale(0.98);
  }
  50% {
    transform: translateX(-37vw) translateY(3vh) scale(0.53);
  }
  53.5714285714% {
    transform: translateX(-30vw) translateY(22vh) scale(0.64);
  }
  57.1428571429% {
    transform: translateX(46vw) translateY(-34vh) scale(0.87);
  }
  60.7142857143% {
    transform: translateX(2vw) translateY(29vh) scale(0.92);
  }
  64.2857142857% {
    transform: translateX(17vw) translateY(-1vh) scale(0.75);
  }
  67.8571428571% {
    transform: translateX(-1vw) translateY(-44vh) scale(0.53);
  }
  71.4285714286% {
    transform: translateX(43vw) translateY(-4vh) scale(0.28);
  }
  75% {
    transform: translateX(-10vw) translateY(15vh) scale(0.65);
  }
  78.5714285714% {
    transform: translateX(-1vw) translateY(-30vh) scale(0.91);
  }
  82.1428571429% {
    transform: translateX(-7vw) translateY(-45vh) scale(0.94);
  }
  85.7142857143% {
    transform: translateX(-48vw) translateY(-11vh) scale(0.84);
  }
  89.2857142857% {
    transform: translateX(50vw) translateY(-43vh) scale(0.8);
  }
  92.8571428571% {
    transform: translateX(39vw) translateY(-13vh) scale(0.82);
  }
  96.4285714286% {
    transform: translateX(-2vw) translateY(-5vh) scale(0.82);
  }
  100% {
    transform: translateX(42vw) translateY(35vh) scale(0.68);
  }
}
.firefly:nth-child(5) {
  animation-name: move5;
}
.firefly:nth-child(5)::before {
  animation-duration: 12s;
}
.firefly:nth-child(5)::after {
  animation-duration: 12s, 10988ms;
  animation-delay: 0ms, 8209ms;
}

@keyframes move5 {
  0% {
    transform: translateX(28vw) translateY(-42vh) scale(0.42);
  }
  4.7619047619% {
    transform: translateX(-20vw) translateY(27vh) scale(0.33);
  }
  9.5238095238% {
    transform: translateX(44vw) translateY(-44vh) scale(0.89);
  }
  14.2857142857% {
    transform: translateX(42vw) translateY(-19vh) scale(0.68);
  }
  19.0476190476% {
    transform: translateX(-45vw) translateY(-29vh) scale(0.79);
  }
  23.8095238095% {
    transform: translateX(40vw) translateY(49vh) scale(0.59);
  }
  28.5714285714% {
    transform: translateX(-24vw) translateY(-22vh) scale(0.41);
  }
  33.3333333333% {
    transform: translateX(-44vw) translateY(31vh) scale(0.41);
  }
  38.0952380952% {
    transform: translateX(-36vw) translateY(31vh) scale(0.98);
  }
  42.8571428571% {
    transform: translateX(-18vw) translateY(46vh) scale(0.35);
  }
  47.619047619% {
    transform: translateX(38vw) translateY(6vh) scale(0.77);
  }
  52.380952381% {
    transform: translateX(14vw) translateY(14vh) scale(0.99);
  }
  57.1428571429% {
    transform: translateX(35vw) translateY(28vh) scale(0.43);
  }
  61.9047619048% {
    transform: translateX(-16vw) translateY(44vh) scale(0.28);
  }
  66.6666666667% {
    transform: translateX(-6vw) translateY(23vh) scale(0.54);
  }
  71.4285714286% {
    transform: translateX(-30vw) translateY(20vh) scale(0.27);
  }
  76.1904761905% {
    transform: translateX(-19vw) translateY(32vh) scale(0.93);
  }
  80.9523809524% {
    transform: translateX(-28vw) translateY(-1vh) scale(0.82);
  }
  85.7142857143% {
    transform: translateX(34vw) translateY(-29vh) scale(0.79);
  }
  90.4761904762% {
    transform: translateX(-16vw) translateY(19vh) scale(0.58);
  }
  95.2380952381% {
    transform: translateX(5vw) translateY(-4vh) scale(0.8);
  }
  100% {
    transform: translateX(-29vw) translateY(34vh) scale(0.51);
  }
}
.firefly:nth-child(6) {
  animation-name: move6;
}
.firefly:nth-child(6)::before {
  animation-duration: 12s;
}
.firefly:nth-child(6)::after {
  animation-duration: 12s, 8312ms;
  animation-delay: 0ms, 2261ms;
}

@keyframes move6 {
  0% {
    transform: translateX(2vw) translateY(-42vh) scale(0.76);
  }
  4.1666666667% {
    transform: translateX(47vw) translateY(3vh) scale(0.47);
  }
  8.3333333333% {
    transform: translateX(-21vw) translateY(36vh) scale(0.59);
  }
  12.5% {
    transform: translateX(35vw) translateY(-25vh) scale(0.4);
  }
  16.6666666667% {
    transform: translateX(-41vw) translateY(46vh) scale(0.92);
  }
  20.8333333333% {
    transform: translateX(12vw) translateY(-15vh) scale(0.41);
  }
  25% {
    transform: translateX(40vw) translateY(10vh) scale(0.59);
  }
  29.1666666667% {
    transform: translateX(-37vw) translateY(35vh) scale(0.55);
  }
  33.3333333333% {
    transform: translateX(45vw) translateY(4vh) scale(0.44);
  }
  37.5% {
    transform: translateX(-6vw) translateY(0vh) scale(0.78);
  }
  41.6666666667% {
    transform: translateX(-16vw) translateY(-42vh) scale(0.37);
  }
  45.8333333333% {
    transform: translateX(-48vw) translateY(0vh) scale(0.46);
  }
  50% {
    transform: translateX(19vw) translateY(50vh) scale(0.76);
  }
  54.1666666667% {
    transform: translateX(29vw) translateY(6vh) scale(0.69);
  }
  58.3333333333% {
    transform: translateX(-11vw) translateY(-23vh) scale(0.57);
  }
  62.5% {
    transform: translateX(23vw) translateY(32vh) scale(0.93);
  }
  66.6666666667% {
    transform: translateX(8vw) translateY(31vh) scale(0.79);
  }
  70.8333333333% {
    transform: translateX(14vw) translateY(2vh) scale(0.59);
  }
  75% {
    transform: translateX(23vw) translateY(-25vh) scale(0.27);
  }
  79.1666666667% {
    transform: translateX(-3vw) translateY(1vh) scale(0.4);
  }
  83.3333333333% {
    transform: translateX(-31vw) translateY(-4vh) scale(0.74);
  }
  87.5% {
    transform: translateX(-2vw) translateY(-41vh) scale(0.72);
  }
  91.6666666667% {
    transform: translateX(-1vw) translateY(45vh) scale(0.97);
  }
  95.8333333333% {
    transform: translateX(-9vw) translateY(-40vh) scale(0.8);
  }
  100% {
    transform: translateX(-14vw) translateY(-11vh) scale(0.54);
  }
}
.firefly:nth-child(7) {
  animation-name: move7;
}
.firefly:nth-child(7)::before {
  animation-duration: 9s;
}
.firefly:nth-child(7)::after {
  animation-duration: 9s, 8673ms;
  animation-delay: 0ms, 6559ms;
}

@keyframes move7 {
  0% {
    transform: translateX(36vw) translateY(-20vh) scale(0.72);
  }
  4.5454545455% {
    transform: translateX(19vw) translateY(-13vh) scale(0.98);
  }
  9.0909090909% {
    transform: translateX(-31vw) translateY(44vh) scale(0.26);
  }
  13.6363636364% {
    transform: translateX(-41vw) translateY(0vh) scale(0.56);
  }
  18.1818181818% {
    transform: translateX(43vw) translateY(28vh) scale(0.28);
  }
  22.7272727273% {
    transform: translateX(49vw) translateY(47vh) scale(0.95);
  }
  27.2727272727% {
    transform: translateX(-12vw) translateY(27vh) scale(0.35);
  }
  31.8181818182% {
    transform: translateX(-18vw) translateY(19vh) scale(0.9);
  }
  36.3636363636% {
    transform: translateX(19vw) translateY(14vh) scale(0.45);
  }
  40.9090909091% {
    transform: translateX(-38vw) translateY(34vh) scale(0.84);
  }
  45.4545454545% {
    transform: translateX(-41vw) translateY(-28vh) scale(0.3);
  }
  50% {
    transform: translateX(30vw) translateY(-15vh) scale(0.75);
  }
  54.5454545455% {
    transform: translateX(1vw) translateY(-14vh) scale(0.51);
  }
  59.0909090909% {
    transform: translateX(-29vw) translateY(42vh) scale(0.28);
  }
  63.6363636364% {
    transform: translateX(18vw) translateY(-6vh) scale(0.41);
  }
  68.1818181818% {
    transform: translateX(-34vw) translateY(-47vh) scale(0.46);
  }
  72.7272727273% {
    transform: translateX(33vw) translateY(-29vh) scale(0.89);
  }
  77.2727272727% {
    transform: translateX(-17vw) translateY(24vh) scale(0.58);
  }
  81.8181818182% {
    transform: translateX(-17vw) translateY(15vh) scale(0.95);
  }
  86.3636363636% {
    transform: translateX(39vw) translateY(-21vh) scale(0.45);
  }
  90.9090909091% {
    transform: translateX(-26vw) translateY(-4vh) scale(1);
  }
  95.4545454545% {
    transform: translateX(-35vw) translateY(-40vh) scale(0.8);
  }
  100% {
    transform: translateX(40vw) translateY(-41vh) scale(0.29);
  }
}
.firefly:nth-child(8) {
  animation-name: move8;
}
.firefly:nth-child(8)::before {
  animation-duration: 13s;
}
.firefly:nth-child(8)::after {
  animation-duration: 13s, 8874ms;
  animation-delay: 0ms, 3490ms;
}

@keyframes move8 {
  0% {
    transform: translateX(-17vw) translateY(-38vh) scale(0.75);
  }
  3.8461538462% {
    transform: translateX(37vw) translateY(-10vh) scale(0.28);
  }
  7.6923076923% {
    transform: translateX(36vw) translateY(-36vh) scale(0.64);
  }
  11.5384615385% {
    transform: translateX(-44vw) translateY(30vh) scale(0.41);
  }
  15.3846153846% {
    transform: translateX(-25vw) translateY(-42vh) scale(0.97);
  }
  19.2307692308% {
    transform: translateX(-24vw) translateY(-43vh) scale(0.71);
  }
  23.0769230769% {
    transform: translateX(39vw) translateY(-40vh) scale(0.65);
  }
  26.9230769231% {
    transform: translateX(-38vw) translateY(26vh) scale(0.47);
  }
  30.7692307692% {
    transform: translateX(-32vw) translateY(30vh) scale(0.26);
  }
  34.6153846154% {
    transform: translateX(-31vw) translateY(-9vh) scale(0.62);
  }
  38.4615384615% {
    transform: translateX(-21vw) translateY(25vh) scale(0.93);
  }
  42.3076923077% {
    transform: translateX(26vw) translateY(24vh) scale(0.76);
  }
  46.1538461538% {
    transform: translateX(36vw) translateY(-34vh) scale(0.55);
  }
  50% {
    transform: translateX(42vw) translateY(25vh) scale(0.78);
  }
  53.8461538462% {
    transform: translateX(5vw) translateY(-23vh) scale(0.69);
  }
  57.6923076923% {
    transform: translateX(-42vw) translateY(38vh) scale(0.99);
  }
  61.5384615385% {
    transform: translateX(-36vw) translateY(50vh) scale(0.71);
  }
  65.3846153846% {
    transform: translateX(-14vw) translateY(-43vh) scale(0.37);
  }
  69.2307692308% {
    transform: translateX(-3vw) translateY(23vh) scale(0.69);
  }
  73.0769230769% {
    transform: translateX(-36vw) translateY(-41vh) scale(0.29);
  }
  76.9230769231% {
    transform: translateX(11vw) translateY(46vh) scale(0.36);
  }
  80.7692307692% {
    transform: translateX(42vw) translateY(12vh) scale(0.34);
  }
  84.6153846154% {
    transform: translateX(6vw) translateY(2vh) scale(0.95);
  }
  88.4615384615% {
    transform: translateX(-12vw) translateY(47vh) scale(0.76);
  }
  92.3076923077% {
    transform: translateX(-9vw) translateY(4vh) scale(0.56);
  }
  96.1538461538% {
    transform: translateX(-29vw) translateY(20vh) scale(0.63);
  }
  100% {
    transform: translateX(24vw) translateY(-5vh) scale(0.59);
  }
}
.firefly:nth-child(9) {
  animation-name: move9;
}
.firefly:nth-child(9)::before {
  animation-duration: 18s;
}
.firefly:nth-child(9)::after {
  animation-duration: 18s, 9919ms;
  animation-delay: 0ms, 7106ms;
}

@keyframes move9 {
  0% {
    transform: translateX(-34vw) translateY(46vh) scale(0.72);
  }
  4.5454545455% {
    transform: translateX(-7vw) translateY(-48vh) scale(0.56);
  }
  9.0909090909% {
    transform: translateX(-37vw) translateY(50vh) scale(0.86);
  }
  13.6363636364% {
    transform: translateX(-22vw) translateY(-45vh) scale(0.49);
  }
  18.1818181818% {
    transform: translateX(-5vw) translateY(-32vh) scale(0.49);
  }
  22.7272727273% {
    transform: translateX(9vw) translateY(48vh) scale(0.85);
  }
  27.2727272727% {
    transform: translateX(29vw) translateY(-40vh) scale(0.66);
  }
  31.8181818182% {
    transform: translateX(-24vw) translateY(40vh) scale(0.33);
  }
  36.3636363636% {
    transform: translateX(-19vw) translateY(-25vh) scale(0.68);
  }
  40.9090909091% {
    transform: translateX(-3vw) translateY(-17vh) scale(0.52);
  }
  45.4545454545% {
    transform: translateX(25vw) translateY(-42vh) scale(0.36);
  }
  50% {
    transform: translateX(2vw) translateY(-46vh) scale(0.65);
  }
  54.5454545455% {
    transform: translateX(50vw) translateY(31vh) scale(0.96);
  }
  59.0909090909% {
    transform: translateX(-17vw) translateY(16vh) scale(0.48);
  }
  63.6363636364% {
    transform: translateX(23vw) translateY(0vh) scale(0.49);
  }
  68.1818181818% {
    transform: translateX(46vw) translateY(-39vh) scale(0.91);
  }
  72.7272727273% {
    transform: translateX(16vw) translateY(26vh) scale(0.96);
  }
  77.2727272727% {
    transform: translateX(-5vw) translateY(20vh) scale(0.31);
  }
  81.8181818182% {
    transform: translateX(-33vw) translateY(25vh) scale(0.68);
  }
  86.3636363636% {
    transform: translateX(21vw) translateY(-48vh) scale(0.5);
  }
  90.9090909091% {
    transform: translateX(1vw) translateY(-27vh) scale(0.7);
  }
  95.4545454545% {
    transform: translateX(17vw) translateY(-42vh) scale(0.57);
  }
  100% {
    transform: translateX(44vw) translateY(14vh) scale(0.49);
  }
}
.firefly:nth-child(10) {
  animation-name: move10;
}
.firefly:nth-child(10)::before {
  animation-duration: 10s;
}
.firefly:nth-child(10)::after {
  animation-duration: 10s, 10324ms;
  animation-delay: 0ms, 4273ms;
}

@keyframes move10 {
  0% {
    transform: translateX(3vw) translateY(-41vh) scale(0.43);
  }
  4% {
    transform: translateX(27vw) translateY(0vh) scale(0.85);
  }
  8% {
    transform: translateX(-27vw) translateY(-26vh) scale(0.49);
  }
  12% {
    transform: translateX(-38vw) translateY(-19vh) scale(0.32);
  }
  16% {
    transform: translateX(-28vw) translateY(-40vh) scale(0.98);
  }
  20% {
    transform: translateX(5vw) translateY(-21vh) scale(0.43);
  }
  24% {
    transform: translateX(-25vw) translateY(5vh) scale(0.31);
  }
  28% {
    transform: translateX(15vw) translateY(8vh) scale(0.38);
  }
  32% {
    transform: translateX(5vw) translateY(-30vh) scale(0.77);
  }
  36% {
    transform: translateX(-13vw) translateY(41vh) scale(0.39);
  }
  40% {
    transform: translateX(-18vw) translateY(17vh) scale(0.78);
  }
  44% {
    transform: translateX(7vw) translateY(1vh) scale(0.9);
  }
  48% {
    transform: translateX(44vw) translateY(15vh) scale(0.46);
  }
  52% {
    transform: translateX(-39vw) translateY(-13vh) scale(0.55);
  }
  56% {
    transform: translateX(-29vw) translateY(32vh) scale(0.38);
  }
  60% {
    transform: translateX(19vw) translateY(-16vh) scale(0.8);
  }
  64% {
    transform: translateX(24vw) translateY(14vh) scale(0.65);
  }
  68% {
    transform: translateX(32vw) translateY(50vh) scale(0.37);
  }
  72% {
    transform: translateX(5vw) translateY(-5vh) scale(0.83);
  }
  76% {
    transform: translateX(32vw) translateY(26vh) scale(0.36);
  }
  80% {
    transform: translateX(32vw) translateY(7vh) scale(0.64);
  }
  84% {
    transform: translateX(-28vw) translateY(50vh) scale(1);
  }
  88% {
    transform: translateX(-43vw) translateY(15vh) scale(0.55);
  }
  92% {
    transform: translateX(-29vw) translateY(-11vh) scale(0.49);
  }
  96% {
    transform: translateX(-12vw) translateY(14vh) scale(0.26);
  }
  100% {
    transform: translateX(5vw) translateY(-25vh) scale(0.81);
  }
}
.firefly:nth-child(11) {
  animation-name: move11;
}
.firefly:nth-child(11)::before {
  animation-duration: 14s;
}
.firefly:nth-child(11)::after {
  animation-duration: 14s, 7052ms;
  animation-delay: 0ms, 6400ms;
}

@keyframes move11 {
  0% {
    transform: translateX(-19vw) translateY(-44vh) scale(0.76);
  }
  4.5454545455% {
    transform: translateX(39vw) translateY(-31vh) scale(0.72);
  }
  9.0909090909% {
    transform: translateX(21vw) translateY(31vh) scale(0.61);
  }
  13.6363636364% {
    transform: translateX(-44vw) translateY(19vh) scale(0.52);
  }
  18.1818181818% {
    transform: translateX(-19vw) translateY(11vh) scale(0.57);
  }
  22.7272727273% {
    transform: translateX(9vw) translateY(-41vh) scale(0.58);
  }
  27.2727272727% {
    transform: translateX(-11vw) translateY(28vh) scale(0.96);
  }
  31.8181818182% {
    transform: translateX(-3vw) translateY(15vh) scale(0.99);
  }
  36.3636363636% {
    transform: translateX(-37vw) translateY(-40vh) scale(0.76);
  }
  40.9090909091% {
    transform: translateX(-24vw) translateY(48vh) scale(0.93);
  }
  45.4545454545% {
    transform: translateX(22vw) translateY(-39vh) scale(0.89);
  }
  50% {
    transform: translateX(-3vw) translateY(39vh) scale(0.4);
  }
  54.5454545455% {
    transform: translateX(34vw) translateY(24vh) scale(0.58);
  }
  59.0909090909% {
    transform: translateX(20vw) translateY(48vh) scale(0.62);
  }
  63.6363636364% {
    transform: translateX(-33vw) translateY(2vh) scale(0.65);
  }
  68.1818181818% {
    transform: translateX(22vw) translateY(-48vh) scale(0.62);
  }
  72.7272727273% {
    transform: translateX(21vw) translateY(48vh) scale(1);
  }
  77.2727272727% {
    transform: translateX(-27vw) translateY(41vh) scale(0.57);
  }
  81.8181818182% {
    transform: translateX(-9vw) translateY(-16vh) scale(0.34);
  }
  86.3636363636% {
    transform: translateX(-25vw) translateY(-28vh) scale(0.85);
  }
  90.9090909091% {
    transform: translateX(39vw) translateY(-28vh) scale(0.57);
  }
  95.4545454545% {
    transform: translateX(50vw) translateY(50vh) scale(0.32);
  }
  100% {
    transform: translateX(49vw) translateY(50vh) scale(0.68);
  }
}
.firefly:nth-child(12) {
  animation-name: move12;
}
.firefly:nth-child(12)::before {
  animation-duration: 10s;
}
.firefly:nth-child(12)::after {
  animation-duration: 10s, 10713ms;
  animation-delay: 0ms, 5396ms;
}

@keyframes move12 {
  0% {
    transform: translateX(44vw) translateY(-47vh) scale(0.52);
  }
  5% {
    transform: translateX(25vw) translateY(40vh) scale(0.72);
  }
  10% {
    transform: translateX(6vw) translateY(-44vh) scale(0.89);
  }
  15% {
    transform: translateX(-25vw) translateY(7vh) scale(0.53);
  }
  20% {
    transform: translateX(5vw) translateY(6vh) scale(0.6);
  }
  25% {
    transform: translateX(24vw) translateY(-26vh) scale(0.63);
  }
  30% {
    transform: translateX(-13vw) translateY(-1vh) scale(0.72);
  }
  35% {
    transform: translateX(-17vw) translateY(-1vh) scale(0.7);
  }
  40% {
    transform: translateX(8vw) translateY(-3vh) scale(0.81);
  }
  45% {
    transform: translateX(-37vw) translateY(-27vh) scale(0.62);
  }
  50% {
    transform: translateX(19vw) translateY(-37vh) scale(0.95);
  }
  55% {
    transform: translateX(-10vw) translateY(2vh) scale(0.99);
  }
  60% {
    transform: translateX(40vw) translateY(-7vh) scale(0.26);
  }
  65% {
    transform: translateX(-2vw) translateY(-45vh) scale(0.51);
  }
  70% {
    transform: translateX(-1vw) translateY(-5vh) scale(0.53);
  }
  75% {
    transform: translateX(6vw) translateY(-40vh) scale(0.67);
  }
  80% {
    transform: translateX(-29vw) translateY(23vh) scale(0.39);
  }
  85% {
    transform: translateX(-15vw) translateY(1vh) scale(0.69);
  }
  90% {
    transform: translateX(-35vw) translateY(38vh) scale(0.61);
  }
  95% {
    transform: translateX(14vw) translateY(28vh) scale(0.56);
  }
  100% {
    transform: translateX(17vw) translateY(10vh) scale(0.61);
  }
}
.firefly:nth-child(13) {
  animation-name: move13;
}
.firefly:nth-child(13)::before {
  animation-duration: 17s;
}
.firefly:nth-child(13)::after {
  animation-duration: 17s, 9722ms;
  animation-delay: 0ms, 7809ms;
}

@keyframes move13 {
  0% {
    transform: translateX(-11vw) translateY(-46vh) scale(0.46);
  }
  3.5714285714% {
    transform: translateX(36vw) translateY(-1vh) scale(0.64);
  }
  7.1428571429% {
    transform: translateX(-6vw) translateY(14vh) scale(0.46);
  }
  10.7142857143% {
    transform: translateX(8vw) translateY(-32vh) scale(0.3);
  }
  14.2857142857% {
    transform: translateX(22vw) translateY(-45vh) scale(0.51);
  }
  17.8571428571% {
    transform: translateX(5vw) translateY(-24vh) scale(0.99);
  }
  21.4285714286% {
    transform: translateX(5vw) translateY(-24vh) scale(0.64);
  }
  25% {
    transform: translateX(37vw) translateY(-24vh) scale(0.71);
  }
  28.5714285714% {
    transform: translateX(-3vw) translateY(15vh) scale(0.76);
  }
  32.1428571429% {
    transform: translateX(43vw) translateY(0vh) scale(0.87);
  }
  35.7142857143% {
    transform: translateX(18vw) translateY(-47vh) scale(0.84);
  }
  39.2857142857% {
    transform: translateX(-6vw) translateY(-48vh) scale(0.87);
  }
  42.8571428571% {
    transform: translateX(-1vw) translateY(1vh) scale(0.26);
  }
  46.4285714286% {
    transform: translateX(32vw) translateY(-3vh) scale(0.95);
  }
  50% {
    transform: translateX(30vw) translateY(9vh) scale(0.46);
  }
  53.5714285714% {
    transform: translateX(33vw) translateY(0vh) scale(0.6);
  }
  57.1428571429% {
    transform: translateX(31vw) translateY(-25vh) scale(0.67);
  }
  60.7142857143% {
    transform: translateX(-6vw) translateY(-20vh) scale(0.89);
  }
  64.2857142857% {
    transform: translateX(-40vw) translateY(-28vh) scale(0.29);
  }
  67.8571428571% {
    transform: translateX(39vw) translateY(21vh) scale(0.32);
  }
  71.4285714286% {
    transform: translateX(-4vw) translateY(-24vh) scale(0.89);
  }
  75% {
    transform: translateX(41vw) translateY(-45vh) scale(0.29);
  }
  78.5714285714% {
    transform: translateX(-5vw) translateY(11vh) scale(0.51);
  }
  82.1428571429% {
    transform: translateX(48vw) translateY(6vh) scale(0.69);
  }
  85.7142857143% {
    transform: translateX(0vw) translateY(-5vh) scale(0.55);
  }
  89.2857142857% {
    transform: translateX(45vw) translateY(42vh) scale(0.53);
  }
  92.8571428571% {
    transform: translateX(-10vw) translateY(-39vh) scale(0.9);
  }
  96.4285714286% {
    transform: translateX(-44vw) translateY(-46vh) scale(0.87);
  }
  100% {
    transform: translateX(1vw) translateY(-4vh) scale(0.43);
  }
}
.firefly:nth-child(14) {
  animation-name: move14;
}
.firefly:nth-child(14)::before {
  animation-duration: 13s;
}
.firefly:nth-child(14)::after {
  animation-duration: 13s, 7827ms;
  animation-delay: 0ms, 3842ms;
}

@keyframes move14 {
  0% {
    transform: translateX(-25vw) translateY(18vh) scale(0.42);
  }
  5.2631578947% {
    transform: translateX(37vw) translateY(37vh) scale(0.61);
  }
  10.5263157895% {
    transform: translateX(-46vw) translateY(-28vh) scale(0.91);
  }
  15.7894736842% {
    transform: translateX(-10vw) translateY(-18vh) scale(0.71);
  }
  21.0526315789% {
    transform: translateX(-36vw) translateY(3vh) scale(1);
  }
  26.3157894737% {
    transform: translateX(-16vw) translateY(-9vh) scale(0.91);
  }
  31.5789473684% {
    transform: translateX(-27vw) translateY(39vh) scale(0.51);
  }
  36.8421052632% {
    transform: translateX(-13vw) translateY(46vh) scale(0.94);
  }
  42.1052631579% {
    transform: translateX(42vw) translateY(5vh) scale(0.52);
  }
  47.3684210526% {
    transform: translateX(-38vw) translateY(28vh) scale(0.36);
  }
  52.6315789474% {
    transform: translateX(-17vw) translateY(45vh) scale(0.7);
  }
  57.8947368421% {
    transform: translateX(12vw) translateY(39vh) scale(0.38);
  }
  63.1578947368% {
    transform: translateX(22vw) translateY(35vh) scale(0.95);
  }
  68.4210526316% {
    transform: translateX(-26vw) translateY(1vh) scale(0.45);
  }
  73.6842105263% {
    transform: translateX(-1vw) translateY(21vh) scale(0.34);
  }
  78.9473684211% {
    transform: translateX(-37vw) translateY(35vh) scale(0.4);
  }
  84.2105263158% {
    transform: translateX(-41vw) translateY(-34vh) scale(0.59);
  }
  89.4736842105% {
    transform: translateX(25vw) translateY(-49vh) scale(0.72);
  }
  94.7368421053% {
    transform: translateX(7vw) translateY(-1vh) scale(0.33);
  }
  100% {
    transform: translateX(-28vw) translateY(-42vh) scale(0.94);
  }
}
.firefly:nth-child(15) {
  animation-name: move15;
}
.firefly:nth-child(15)::before {
  animation-duration: 13s;
}
.firefly:nth-child(15)::after {
  animation-duration: 13s, 5285ms;
  animation-delay: 0ms, 7820ms;
}

@keyframes move15 {
  0% {
    transform: translateX(35vw) translateY(36vh) scale(0.52);
  }
  4.347826087% {
    transform: translateX(14vw) translateY(-13vh) scale(0.74);
  }
  8.6956521739% {
    transform: translateX(-2vw) translateY(-26vh) scale(0.44);
  }
  13.0434782609% {
    transform: translateX(28vw) translateY(13vh) scale(0.5);
  }
  17.3913043478% {
    transform: translateX(24vw) translateY(-19vh) scale(0.71);
  }
  21.7391304348% {
    transform: translateX(-25vw) translateY(-44vh) scale(0.89);
  }
  26.0869565217% {
    transform: translateX(-31vw) translateY(-1vh) scale(0.52);
  }
  30.4347826087% {
    transform: translateX(-12vw) translateY(-16vh) scale(0.72);
  }
  34.7826086957% {
    transform: translateX(-20vw) translateY(0vh) scale(0.39);
  }
  39.1304347826% {
    transform: translateX(12vw) translateY(-42vh) scale(0.6);
  }
  43.4782608696% {
    transform: translateX(2vw) translateY(-40vh) scale(0.34);
  }
  47.8260869565% {
    transform: translateX(35vw) translateY(8vh) scale(0.59);
  }
  52.1739130435% {
    transform: translateX(44vw) translateY(50vh) scale(0.89);
  }
  56.5217391304% {
    transform: translateX(-45vw) translateY(15vh) scale(0.44);
  }
  60.8695652174% {
    transform: translateX(3vw) translateY(-18vh) scale(0.68);
  }
  65.2173913043% {
    transform: translateX(3vw) translateY(8vh) scale(0.69);
  }
  69.5652173913% {
    transform: translateX(24vw) translateY(48vh) scale(0.62);
  }
  73.9130434783% {
    transform: translateX(18vw) translateY(-12vh) scale(0.76);
  }
  78.2608695652% {
    transform: translateX(-12vw) translateY(14vh) scale(1);
  }
  82.6086956522% {
    transform: translateX(-32vw) translateY(-18vh) scale(0.82);
  }
  86.9565217391% {
    transform: translateX(44vw) translateY(-23vh) scale(0.53);
  }
  91.3043478261% {
    transform: translateX(31vw) translateY(-9vh) scale(0.39);
  }
  95.652173913% {
    transform: translateX(-28vw) translateY(-47vh) scale(0.31);
  }
  100% {
    transform: translateX(20vw) translateY(6vh) scale(0.44);
  }
}
@keyframes drift {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes flash {
  0%, 30%, 100% {
    opacity: 0;
    box-shadow: 0 0 0vw 0vw yellow;
  }
  5% {
    opacity: 1;
    box-shadow: 0 0 2vw 0.4vw yellow;
  }
}