@charset "utf-8";
:root {
 --skyblue:#CAF5F8;
 --bun-height: 230px;
 --bun-height-bottom:65px;
 --parent-height: 190vw;
 --dish-height:130px;
 --sub-height:98px;
}
body#index section#TopNewsBlock, body#index section#PARTNERS, body#index #footer {
	background: var(--color-logoB) url(../img/bg.png) repeat 0 0;
	background-size:10px 10px;
}
body#index #footer p {
	color: #fff;
}
section#top {
	background:linear-gradient(var(--skyblue) 78%, #90E0E9 78%);
}
body#index #top {
	position:relative;
}
body#index .logo {
	z-index:20;
	position:absolute;
	top: 30%;
	left:50%;
	transform:translate(-50%, -50%);
	opacity:0;
 animation:
 logoFadeup .3s cubic-bezier(.22, .61, .36, 1) forwards, bounce3 2.52s ease-in-out .3s 1;
}
body#index .logo img {
	width:70vw;
	max-width:320px;
	height:auto;
}
body#index .character {
	z-index:20;
	position:absolute;
	top: calc(var(--parent-height) - var(--bun-height) - var(--bun-height-bottom) + var(--sub-height) - 11vw );
	left:50%;
	transform:translate(-50%, -50%);
	opacity:0;
	animation:
 logoFadedown .3s cubic-bezier(.22, .61, .36, 1) forwards, bounce3 2.52s ease-in-out .3s 1;
	animation-delay:.3s;
}
body#index .character img {
	width:50vw;
	max-width:260px;
	height:auto;
	display:block;
}
.character img:hover {
 animation:shake .1s infinite;
}
body#index .base {
	position:relative;
	height:var(--parent-height);
	width:100vw;
	overflow:hidden;
}
body#index .base::before {
 content:"";
 position:absolute;
 left:0;
 top: 0;
 width:100%;
 height:100%;
 background: url(../img/bg_sky@2x.png) repeat-x 0 calc(var(--parent-height) * .6);
 background-size:24vw auto;
 opacity:0;
 transform:translateY(40px);
 animation:skyFade .25s ease forwards;
}
.bun, .sesame {
	position:absolute;
	left:50%;
	width:100%;
	transform:translateX(-50%);
}
.bun {
	height:var(--bun-height);
	top: calc(var(--parent-height) - var(--bun-height) - var(--bun-height-bottom) + var(--sub-height));
	transform:translate(-50%, 120vh);
}
.bun.show {
 animation:
 bunBounce .8s ease-out forwards, bounce3 2.52s ease-in-out .3s 1;
}
.bun svg {
	width:100vw;
	min-width:810px;
	height:auto;
	position:relative;
	left:50%;
	transform:translateX(-50%);
	display:block;
	transition: transform 0.3s ease;
}
.bun path {
	fill:#BA4800;
	stroke:#BA4800;
	stroke-width:2;
	animation-delay:1.3s;
}
.sesame {
	top:calc(var(--parent-height) - var(--bun-height) - var(--bun-height-bottom) + var(--sub-height));
	transform:translate(-50%, 120vh);
	z-index:12;
	height:var(--bun-height);
	overflow:hidden;
 animation-delay:.45s;
}
.sesame.show {
 animation:
 bunBounce .8s ease-out forwards, bounce3 2.82s ease-in-out .3s 1;
}
.sesame img {
	width:100vw;
	min-width:824px;
	max-width:1920px;
	height:auto;
	position:relative;
	left:50%;
	transform:translateX(-50%);
	display:block;
	transition: transform 0.3s ease;
}
.dish {
	position:absolute;
	bottom:0;
	width:100%;
	height: var(--dish-height);
	left:50%;
	transform:translateX(-50%);
	background:var(--color-logoB);
 animation:bunBounce .8s ease-out forwards;
	opacity: 1;
}
body#index .star {
	position: absolute;
	width: 30px;
}
body#index .star img {
	width: 100%;
	transition: transform 0.3s ease;
}
body#index .star:nth-child(2),body#index .star:nth-child(5) {
width: 40px;
}
body#index .star:nth-child(1) {
left: 3%;
top: 20vw;
animation: starRise 0.45s ease-out forwards;
}
body#index .star:nth-child(2) {
left: 7vw;
top: 50vw;
animation: starRise 0.45s ease-out forwards;
}
body#index .star:nth-child(3) {
left: 50vw;
top: 5vw;
animation: starRise 0.45s ease-out forwards;
}
body#index .star:nth-child(4) {
left: 86vw;
top: 30vw;
animation: starRise 0.45s ease-out forwards;
}
body#index .star:nth-child(5) {
right: 13vw;
top: 102vw;
animation: starRise 0.45s ease-out forwards;
}
body#index .star:nth-child(6) {
right: 77vw;
top: 88vw;
animation: starRise 0.45s ease-out forwards;
}
body#index .star:nth-child(7) {
right: 35vw;
top: 100vw;
animation: starRise 0.45s ease-out forwards;
}
.plane {
	position: absolute;
	left: -100px;
	top: 60%;
	animation: planeFly 4s ease-in-out forwards;
	animation-delay:5s;
}
.plane img {
	width: 50%;
	height: auto;
}
 @media screen and (min-width: 767px) {
		:root {
 --parent-height:800px;
 --bun-height: 23.96vw;
 --dish-height:6.77vw;
 --sub-height:5px;
}
body#index .logo {
 top: 24%;
}
body#index .base {
 height: var( --parent-height);
}
body#index .base::before {
 background: url(../img/bg_sky@2x.png) repeat-x 0 calc(var(--parent-height) * 0.42);
 background-size: 200px auto;
}
body#index  .character {
 top: calc(var(--parent-height) - var(--bun-height) - var(--bun-height-bottom) - 3vw);
}
.bun svg, .sesame img {
max-width: 1920px;
width: 120%;
}
}
 @media screen and (min-width: 1200px) {
	:root {
 --parent-height: calc(780px + 10vw);
 --sub-height:10vw;
}
body#index .logo {
 top: 20%;
}
body#index .logo img {
 max-width: 380px;
}
section#TopNewsBlock, section#PARTNERS, #footer {
 background: none!important;
}
body#index section#top {
 position: fixed;
}

body#index #TopNewsBlock {
 background: none !important;
 padding-top: 800px;
}
body#index .base {
 height: 1200px;
}
 body#index .base::before {
 background: url(../img/bg_sky@2x.png) repeat-x 0 calc(var(--parent-height) * 0.4);
 background-size: 210px auto;
}
 .bun svg {
 max-width: 1920px;
}
body#index .character {
 top: calc(var(--parent-height) - var(--bun-height)*.8 - 50px);
}
body#index .character img {
 max-width: 360px;
}
.sesame {
 height: 500px;
}
 .bun {
 top: calc(var(--parent-height) - var(--bun-height) - var(--bun-height-bottom) + var(--sub-height) );
}
.dish {
 border-radius:35%;
 height: 10vw;
 bottom: -5vw;
 max-width: 2304px;
}
body#index .star {
 width: 50px;
}
body#index .star:nth-child(2), body#index .star:nth-child(5) {
width:70px;
}
body#index .stars {
 position: absolute;
 top: 50px;
 left: 50px;
 width: 100%;
 height: 800px;
}
 body#index .star:nth-child(3) {
 left: 20vw;
}
 body#index .star:nth-child(5) {
 top: 350px;
}
 body#index .star:nth-child(6) {
top: 343px;
}
body#index .star:nth-child(2) {
 top: 52px;
}
 body#index .star:nth-child(4) {
 top: 30px;
}
.plane {
 position: absolute;
 left: -100px;
 top: 30%;
 animation: planeFly 7s ease-in-out forwards;
 animation-delay:5s;
}
 body#index #TopNewsBlock {
 position: relative;

 width: 100%;
 margin: 0 auto;

}

}
/*animation*/
 @keyframes logoFadeup {
 from {
 opacity: 0;
 transform: translate(-50%, 50%);
}
to {
	opacity: 1;
	transform: translate(-50%, -50%);
}
}
 @keyframes logoFadedown {
 from {
 transform: translate(-50%, -200%);
 opacity: 0;
}
to {
	transform: translate(-50%, -50%);
	opacity: 1;
}
}
 @keyframes planeFly {
 0% {
 transform: translate(0, 0) rotate(-10deg) scale(0.9);
 opacity: 0;
}
 10% {
 opacity: 1;
}
 100% {
 transform: translate(130vw, -320px) rotate(12deg) scale(0.8);
 opacity: 0.9;
}
}
 @keyframes bunImpact {
 0% {
 transform: translateX(-50%) translateY(0);
}
 66.666% {
 transform: translateX(-50%) translateY(20px);
}
 100% {
 transform: translateX(-50%) translateY(0);
}
}
 @keyframes bunBounce {
 0% {
transform: translate(-50%, 120vh);
}
 70% {
transform: translate(-50%, -15px);
}
 85% {
transform: translate(-50%, 5px);
}
 100% {
transform: translate(-50%, 0);
}
}
 @keyframes shake {
 0% {
transform: translate(0, 0);
}
 20% {
transform: translate(-5px, 5px);
}
 40% {
transform: translate(-5px, -5px);
}
 60% {
transform: translate(5px, 5px);
}
 80% {
transform: translate(5px, -5px);
}
 100% {
transform: translate(0, 0);
}
}
@keyframes skyFade {
 to {
 opacity: 1;
 transform: translateY(0);
}
}
 @keyframes starRise {
 0% {
 transform: translate(-50%, calc(-50% + 50px)) rotate(0deg);
 opacity: 0;
}
30% {
 transform: translate(-50%, -50%) rotate(0deg);
 opacity: 1;
}

 100% {
 transform: translate(-50%, -50%) rotate(1080deg);
 opacity: 1;
}
}
@keyframes bounce3 {
 0% {
margin-top: 0;
}
 15% {
margin-top: -38px;
}
 30% {
margin-top: 0;
}
 45% {
margin-top: -24px;
}
 60% {
margin-top: 0;
}
 75% {
margin-top: -6px;
}
 90% {
margin-top: 0;
}
 100% {
margin-top: 0;
}



}

@media screen and (min-width: 1024px) {
@keyframes bunImpact {
 0% {
 transform: translateX(-50%) translateY(0);
}
 66.666% {
 transform: translateX(-50%) translateY(50px);
}
 100% {
 transform: translateX(-50%) translateY(0);
}
}
}