@charset "utf-8";
:root {
 --skyblue:#CAF5F8;
 --bun-height: 230px;
 --bun-height-bottom:65px;
 --parent-height: 160vw;
 --dish-height:130px;
 --sub-height:98px;
}
body#index 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) );
	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;
}
body#index .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) * .51);
 background-size:24vw auto;
 opacity:0;
 transform:translateY(40px);
 animation:skyFade .25s ease forwards;
}
.bun, .links, .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);
	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;
	animation: bouncebun 1.26s ease-in-out 4 forwards;
}
.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, bouncesesami 1.26s steps(7, end) 4 forwards;
}
.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;
	display: none;
}
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, starstar 1.26s steps(7, end) 4 forwards;
}
body#index .star:nth-child(2) {
left: 7vw;
top: 50vw;
animation: starRise 0.45s ease-out forwards, starstar 1.26s steps(7, end) 4 forwards;
}
body#index .star:nth-child(3) {
left: 50vw;
top: 5vw;
animation: starRise 0.45s ease-out forwards, starstar 1.26s steps(7, end) 4 forwards;
}
body#index .star:nth-child(4) {
left: 86vw;
top: 30vw;
animation: starRise 0.45s ease-out forwards, starstar 1.26s steps(7, end) 4 forwards;
}
body#index .star:nth-child(5) {
right: 13vw;
top: 102vw;
animation: starRise 0.45s ease-out forwards, starstar 1.26s steps(7, end) 4 forwards;
}
body#index .star:nth-child(6) {
right: 77vw;
top: 88vw;
animation: starRise 0.45s ease-out forwards, starstar 1.26s steps(7, end) 4 forwards;
}
body#index .star:nth-child(7) {
right: 35vw;
top: 100vw;
animation: starRise 0.45s ease-out forwards, starstar 1.26s steps(7, end) 4 forwards;
}
.plane {
	position: absolute;
	left: -100px;
	top: 60%;
	animation: planeFly 4s ease-in-out forwards;
	animation-delay:5s;
}
.plane img {
	width: 50%;
	height: auto;
}
/*5月*/
body#index #topartist {
	position: relative;
 margin-top: calc(var(--dish-height)*-.3);
	width: 100%;
	z-index: 30;
	opacity: 0;
animation: 
 topartistFadeup .3s cubic-bezier(.22, .61, .36, 1) .5s forwards, bouncebeef 2.52s ease-in-out .5s 1;
}
 @keyframes topartistFadeup {
 from {
 opacity: 0;
 margin-top: calc(var(--dish-height) * -.5);
}
to {
	opacity: 1;
 margin-top: calc(var(--dish-height) * -.3);
}
}
@keyframes bouncebeef {
 0% {
margin-top: 0;
}
 15% {
margin-top: calc(var(--dish-height) * -.5);
}
 30% {
margin-top: 0;
}
 45% {
margin-top: calc(var(--dish-height) * -.33);
}
 60% {
margin-top: 0;
}
 75% {
margin-top: calc(var(--dish-height) * -.33);
}
 90% {
margin-top: 0;
}
 100% {
 margin-top: calc(var(--dish-height) * -.3);
}
}
body#index #topartist:after {
	content: "";
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	height: 100px;
	background: var(--color_buns);
	border-radius: 50px 50px 150px 150px / 50px 50px 150px 150px;
	max-width: 1860px;
	display: block;
	z-index:-1;
	background: linear-gradient( to bottom, #EF9D33 0%, #DB8500 50%, #D46E16 100% );
}
#topartist .title {
	position: absolute;
	top: -50px;
	width: 100%;
	height: 60px;
	opacity: 1;
	z-index: 50;
	text-align: center;
}
#topartist .title h2 {
	font-family: var(--font-E1);
	font-weight: var(--font-E1-W);
	font-size: 3.6rem;
	position: relative;
	display: inline-block;
	padding: 30px 40px 8px;
	background: var(--color-logo-Sub);
	line-height: .2;
	border-radius: 60px;
	color: #fff;
}
#topartist .title h2 span {
	font-size: 1.8rem;
	position: relative;
	display: block;
	padding: 0.4em 0.8em;
	line-height: .8;
	border-radius: 60px;
	color: #fff;
}
#topartist .title h2::after {
 content: "";
 position: absolute;
 bottom: -15px;
 left: calc(50% - 15px);
 border-width: 15px 15px 0 15px;
 border-style: solid;
 border-color: var(--color-logo-Sub) transparent transparent transparent;
}
body#index .topping {
	position: absolute;
 top: calc(var(--dish-height)*-.4);
	width: 100%;
 height: calc(var(--bun-height)*1.2);
	opacity: 1;
}
body#index .lettuce {
	position: absolute;
	top: 0;
	width: 100%;
	line-height: 0;
	overflow: hidden;
	text-align: center;
	z-index: 15;
	opacity: 1;
	animation: stretchTopping 1.26s ease-in-out 4 forwards;
}
body#index .lettuce svg {
	width: 100vw;
	height: auto;
	display: inline-block;
	/* min-width:600px; */
	max-width: 1920px;
	transition: transform 0.3s ease;
}
body#index .bacon {
	position: absolute;
	top: calc(var(--dish-height)*.33);
	width: 100%;
	line-height: 0;
	overflow: hidden;
	text-align: center;
	z-index: 12;
}
body#index .bacon svg {
	width: 100vw;
	max-width: 1920px;
	height: auto;
	display: inline-block;
	transition: transform 0.3s ease;
}
body#index .pickle {
	position: absolute;
	top: calc(var(--dish-height)*.33);
	width: 100%;
	line-height: 0;
	overflow: hidden;
	text-align: center;
	z-index: 11;
}
body#index .pickle svg {
	width: 100vw;
	max-width: 1920px;
	height: auto;
	display: inline-block;
	transition: transform 0.3s ease;
}
body#index .cheese {
	position: absolute;
	top: -110px;
	width: 100%;
	line-height: 0;
	overflow: hidden;
	text-align: center;
	z-index: 9;
	animation: cheeseGrow 1s ease-out 3s forwards;
}
@keyframes cheeseGrow {
 to {
  top: 0;
  opacity: 1;
 }
}
.cheese.show {
	top: 10px;
	opacity: 1;
animation: cheeseGrow 1s ease-out .45s forwards;
}
body#index .cheese svg {
	width: 100vw;
	max-width: 1920px;
	height: auto;
	display: inline-block;
	transition: transform 0.3s ease;
}

body#index .beef {
	position:   relative;
	margin-top: 0;
	padding-bottom: 60px;
}
body#index .beef .inner {
	background: #ED7063 url(../img/bg_beef.png) repeat 0 0;
	background-size: auto 60px;
 padding: calc(var(--bun-height)*0.3) 0 0;
	width: 100%;
	margin:  0 auto;
	max-width: 1800px;
	border-radius: 0 0 50px 50px / 0 0 30px 30px;
	overflow: hidden;
}
body#index .beef .inner h2 {
	text-align: center;
	font-size: 3.4rem;
	font-family: var(--font-E1);
	font-weight: var(--font-E1-W);
	color: #FFBC00;
}
body#index #topartist {
	position: relative;
}
body#index .beef .inner .artistlineup {
	position: relative;
	z-index: 20;
	padding: 0 3vw;
}
body#index .beef .inner .artistlineup #list-boxBlock {
	margin: 	0;
}
.topbg {
	background: url(../img/bg_square.png) repeat 0 0;
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	opacity: 0;
	animation: bgFade 0.5s ease 1s forwards;
}
 @keyframes bgFade {
 to {
 opacity: 1;
}
}
 @media screen and (min-width: 768px) {
		: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%;
}
body#index .topping {
 top: calc(var(--dish-height) * -1.9);
 height: calc(var(--bun-height) * 1.3);
}
body#index .beef .inner {
 padding: calc(var(--bun-height) * 0.6) 0 40px;
 background-size: auto 120px;
}
body#index .lettuce {
}
body#index .bacon, body#index .pickle {
 top:  calc(var(--dish-height) * 1.5 - 10px);
}
body#index .cheese {
 top: -300px;
}
@keyframes cheeseGrow {
 to {
 top: -30px;
 opacity: 1;
}
}
body#index #topartist {
 margin-bottom: 80px;
}
body#index #topartist:before {
 bottom: 010px;
 height: 50px;
 border-radius: 0px 0px 150px 150px / 0px 0px 50px 50px;
}
body#index #topartist:after {
 bottom: -50px;
 height: 180px;
}
#topartist .title h2 {
 font-size:4rem;
 padding: 30px 40px 8px;
 border-radius: 60px;
}
body#index .beef .inner h2 {
 font-size: 5rem;
}
#topartist .title h2 span {
 font-size:2.4rem;
}
body#index .beef #list-boxBlock {
 margin-top:20px;
}
}
 @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;
}
 body#index #TopNewsBlock {
 padding-top: 800px;
}
body#index #top {
 position: relative;
 height:1000px;
 width: 100%;
 z-index: 1;
}
body#index #TopNewsBlock {
 z-index: 10;
}
body#index .base {
 height: 1200px;
 width: 100%;
}
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, .lettuce svg, .cheese 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 #topartist {
 margin-top: calc(var(--bun-height)*.3);
}
 body#index .bacon, body#index .pickle {
 top: calc(var(--dish-height) + 50px);
}

@keyframes lettuceGrow {
 to {
top:-150px;
 opacity: 1;
transform-origin: top;
}
}
body#index .cheese {
 top:-480px;
}
 @keyframes cheeseGrow {
 to {
 top: -70px;
 transform: scaleY(1.2);
transform-origin: top;
 opacity: 1;
}
}
 #topartist .title h2 {
 font-size: 5rem;
 padding: 40px 80px 8px;
}
 #topartist .title h2 span {
 font-size: 3rem;
}
 #topartist .daysBox .day p {
 font-size: 6rem;
}
 #topartist .daysBox span.sat, #topartist .daysBox span.sun {
 font-size: 3rem;
}
 #topartist .daysBox:before {
 left: calc(50% - 10rem);
 width: 20rem;
}
body#index #TopNewsBlock {
 position: relative;
 padding: 50px 0;
 width: 100%;
 margin: 0 auto 0;
 z-index: 50;
}
}
/*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;
}
}
@keyframes bouncesesami {
 0% {
 margin-top: -8px;
}
 14.29% {
 margin-top: -5px;
}
 28.57% {
 margin-top: 0;
}
 42.86% {
 margin-top: -22px;
}
 71.43% {
 margin-top: -5px;
}
 100% {
 margin-top: -8px;
}
}
@keyframes bouncebun {
 0%, 42.86% {
 transform: translateX(-50%) scaleY(1);
}
 50% {
 transform: translateX(-50%) scaleY(1.1);
}
 57.14% {
 transform: translateX(-50%) scaleY(1.1);
}
 71.43%, 100% {
 transform: translateX(-50%) scaleY(1);
}
}
@keyframes stretchTopping {
 0%, 42.86% {
 transform: scaleY(1);
}
 50% {
 transform: scaleY(1);
}
 58.14% {
 transform: scaleY(1.2);
}
 100% {
 transform: scaleY(1);
}
}
@keyframes starstar {
 0% {          
 transform: translate(-50%, -50%) rotate(0deg);
}
 14.29% {       
 transform: translate(-50%, -50%) rotate(0deg);
}
 28.57% {      
 transform: translate(-50%, -50%) rotate(0deg);
}
 42.86% {
transform: translate(-50%, -50%) rotate(-360deg);
}
 71.43% {  
 transform: translate(-50%, -50%) rotate(0deg);
}
 100% {    
 transform: translate(-50%, -50%) rotate(0deg);
}
}


@media screen and (min-width: 1024px) {
 body#index .beef .inner h2 {
 font-size: 6rem;
}
 @keyframes bunImpact {
 0% {
 transform: translateX(-50%) translateY(0);
}
 66.666% {
 transform: translateX(-50%) translateY(50px);
}
 100% {
 transform: translateX(-50%) translateY(0);
}
}
}
/*4月　台湾*/
body#index .taiwanpick {
	position: absolute;
	left: calc(50% + 10vw);
 top: calc(var(--parent-height) - var(--bun-height) - 15vw + var(--sub-height)*.6);
	z-index: 21;
	transform-origin: 0% 100%;
	transform: rotate(15deg);
	opacity: 0;
	animation: pickStab 0.6s cubic-bezier(.2, 1.2, .4, 1) 2s forwards, pickSwing 3s cubic-bezier(.3, 1.5, .5, 1) 2.6s infinite;
}
body#index .taiwanpick img {
	width: 35vw;
	transform-origin: 0% 100%;
	transform: rotate(-13deg);
	transition: transform 0.3s ease;
	max-width: 200px;
}
body#index .taiwanpick:hover img {
	transform: rotate(-10deg);
}
 @keyframes pickStab {
 0% {
 transform: translate(100px, -200px) rotate(15deg);
 opacity: 0;
}
 50% {
 transform: translate(-0px, 0px) rotate(15deg);
 opacity: 1;
}
 60% {
 transform: translate(0, 0) rotate(5deg);
 opacity: 1;
}
 70% {
 transform: translate(0, 0) rotate(15deg);
 opacity: 1;
}
 80% {
 transform: translate(0, 0) rotate(5deg);
 opacity: 1;
}
 90% {
 transform: translate(0, 0) rotate(10deg);
 opacity: 1;
}
 100% {
 transform: translate(0, 0) rotate(5deg);
 opacity: 1;
}
}
@keyframes pickSwing {
0%, 70%, 100% {
 transform: rotate(12deg);
}
 75% {
 transform: rotate(8deg);
}
 85% {
 transform: rotate(16deg);
}
 95% {
 transform: rotate(10deg);
}
}
 @media screen and (min-width: 768px) {
 body#index .taiwanpick {
 top: calc(var(--parent-height) - var(--bun-height) - var(--bun-height-bottom) - 3vw);
}
}
 @media screen and (min-width: 1200px) {
 body#index .taiwanpick {
 top: calc(var(--parent-height) - var(--bun-height) * .8 - 50px);
}
body#index .cheese {
 left: 	-10px;
 width: 	calc(100% + 20px);
}
 body#index .beef .inner {
 background: #ED7063 url(../img/bg_beef.png) repeat 0 0;
 background-size: auto 120px;
 background-clip: content-box;
 padding: 0 10px 0;
}
 body#index .topping {
 top: calc(var(--dish-height) * -1.6);
}
body#index .beef .inner .artistlineup {
 margin: 180px auto 60px;
 display: flex;
 justify-content: center;
}
}