body{background-position:center top;background-repeat:no-repeat;background-size:cover;line-height:1.4;background-image:url(../imgs/bg-d.webp);overflow-x:hidden;background-attachment:fixed;overscroll-behavior-y:contain;min-height:100vh;}
h2{margin-top:1em;}
#cnyLogo{width:300px;height:130px;margin:1em auto;background-image:url(../../../assets/imgs/lianhe-zaobao-cny-logo-shadow.svg);display:block;background-position:center;background-repeat:no-repeat;background-size:100% auto;}
.white{fill:#fff;}

.container{position:relative;margin:1em auto;}
#Wrapper{margin:4em auto 10em auto;position:relative;z-index:10;text-align:center;color:#fff;}
#Header{margin:1em auto 2em auto;display:block;text-align:center;z-index:10000000;position:relative;}
.headline{font-size:4em;margin:0 auto;font-weight:900;line-height:1.4;}
#Intro{margin:1em auto;}
#Intro p{font-size:1.1em;margin:0 auto;}

.yusheng-platter{width:100%;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;}
#yusheng{top:45%;width:70%;height:120%;position:fixed;z-index:0;background-position:center;background-repeat:no-repeat;background-size:80%;line-height:1.4;background-image:url(../imgs/yusheng.webp);animation-name:spin;animation-duration:20s;animation-iteration-count:infinite;animation-timing-function:linear;}

.carousel-container{width:94%;z-index:10;position:relative;touch-action:pan-y;user-select:none;-webkit-user-drag:none;display:flex;align-items:center;margin:auto;}
.carousel-track{display:flex;height:100%;align-items:center;cursor:grab;will-change:transform;justify-content:flex-start;}
.carousel-track.transitioning{transition:transform 0.4s ease-out;}
.carousel-track:active{cursor:grabbing;}

.slide{padding:0;margin:0 5px;opacity:0.8;min-height:50vh;flex-shrink:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:#fff;box-sizing:border-box;transform:scale(0.9);transition:opacity 0.3s,transform 0.3s;position:relative;overflow:hidden;transform-origin:center center;background:none;z-index:100000000;cursor:pointer;}
.slide.active{opacity:1;transform:scale(1.2);z-index:10;box-shadow:0 2em 4em rgba(0,0,0,0.4);border-radius:0.6em;backdrop-filter:blur(0.7em);background:rgba(255,158,202,0.4);border:1px solid rgba(200,240,255,0.2);}
.slide:nth-child(3),.slide:nth-child(5){margin-top:-8em;}
.slide-9x16{aspect-ratio:9/16;height:auto!important;background:none!important;backdrop-filter:none!important;box-shadow:none!important;border:none!important;}

.slide .title{display:none;}
.slide.active .title{margin-bottom:0.8em;display:block;line-height:1;}
.slide .title em{font-size:1.6em;font-weight:900;line-height:1;padding:0;}
.slide .title .en{font-size:0.55em;font-weight:400;border:1px solid rgba(255,158,202,0.6);margin-top:0.4em;padding:0.4em 0.6em;text-transform:uppercase;}
.slide .title i{font-style:normal;font-size:0.6em;font-weight:400;text-transform:none;opacity:0.6;line-height:1;}
.slide .title em,.slide .title .en{display:block;}
.slide img{width:100%;height:auto;}

.title,.audio-controls,audio,.ingredient-name{display:none;}
.slide.active .title,.slide.active .audio-controls,.slide.active audio,.slide.active .ingredient-name{display:block;}

.ingredient{width:70%;padding-top:1em;}
#IngredientHuat .ingredient{width:90%;}
.ingredient-name em,.ingredient-name span{display:inline-block;}
.ingredient-name{font-size:0.9em;margin:1em auto;align-items:center;justify-content:center;}
.ingredient-name em{font-weight:700;}
.ingredient-name span{font-size:0.75em;text-transform:uppercase;display:block}
.ingredient-name span:before{width:3em;height:1px;display:block;content:'';margin:0.3em auto;background:rgba(255,255,202,0.6);}

.img{width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background-position:center;background-size:100%;background-repeat:no-repeat;}
#IngredientSalmon .img{background-image:url('../imgs/salmon.webp');}
#IngredientGreenRadish .img{background-image:url('../imgs/green-radish.webp');}
#IngredientDaikon .img{background-image:url('../imgs/daikon.webp');}
#IngredientCarrots .img{background-image:url('../imgs/carrots.webp');}
#IngredientPeanuts .img{background-image:url('../imgs/peanuts.webp');}
#IngredientPomelo .img{background-image:url('../imgs/pomelo.webp');}
#IngredientLime .img{background-image:url('../imgs/lime.webp');}
#IngredientSesame .img{background-image:url('../imgs/sesame-seeds.webp');}
#IngredientSpices .img{background-image:url('../imgs/spices.webp');}
#IngredientOil .img{background-image:url('../imgs/oil.webp');}
#IngredientHoney .img{background-image:url('../imgs/honey.webp');}
#IngredientCrackers .img{background-image:url('../imgs/crackers.webp');}
#IngredientHuat .img{background-image:url('../imgs/yusheng-tossing.gif');}

.play-pause-btn,.status-pause,.status-play{width:38px;height:38px;}
.play-pause-btn{padding:0;background:none;}
.status-pause,.status-play{padding:0.55em;display:block;border-radius:50%;;background:#003866;background-position:center;background-size:40%;background-repeat:no-repeat;transition:all 0.3s ease-out;position:relative;z-index:10000000;}

.status-pause{background-image:url('../imgs/icon-pause-white.svg');background-color:#e90044;}
.status-play{background-image:url('../imgs/icon-play-white.svg');}

.audio-controls{margin:-7em auto 0 auto;position:absolute;}
button.control-btn{border:none;padding:0;border-radius:50%;cursor:pointer;position:relative;z-index:10;}

.nav-btn{width:410px;height:40px;position:absolute;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;z-index:20;border-radius000:50%;display:flex;align-items:center;justify-content:center;animation:tilt-shaking 0.5s infinite;}
.nav-btn:after{width:100%;height:100px;content:'';position:absolute;display:block;background-position:center;background-size:100% auto;background-repeat:no-repeat;background-image:url('../imgs/chopsticks.webp');}
.nav-btn:hover{animation:none;transform:none;}
.prev{left:0;rotate:-150deg;-webkit-transform:scaleX(-1);transform:scaleX(-1);}
.next{right:-1em;rotate:-30deg;}

.video-wrapper{width:80%;height:80%;position:relative;top:auto;left:auto;transform:none;overflow:hidden;aspect-ratio:9/16;}
video{width:100%;height:100%;border-radius:0.6em;}
.slide-counter{position:absolute;bottom:20px;right:20px;background:rgba(0,0,0,0.5);color:white;padding:5px 10px;border-radius:12px;font-size:12px;pointer-events:none;z-index:20;}

.tag{margin:10% auto 0 auto;padding:10% 1em;backdrop-filter:blur(0.4em);background:rgba(255,158,202,0.1);}

video::-webkit-media-controls-fullscreen-button,video::-webkit-media-controls-picture-in-picture-button{display:none;}
#legend{right:14%;top:10%;rotate:0deg;position:absolute;}
#guide{width:40px;margin:0 auto 1em auto;animation:swipe-x 2s ease-in-out backwards;animation-iteration-count:infinite;opacity:0.8;transform-origin:50% 100%;transition:0.3s ease-out;} 

#Ornaments{position:fixed;width:100%;height:100vh;display:block;top:0;left:0;}
.items{width:100%;position:fixed;background-position:center;background-repeat:no-repeat;background-size:100%;aspect-ratio:1/1;}
.angbaos{width:14%;top:55%;right:20%;background-image:url(../imgs/angbaos.webp);}
.ingots{width:10%;top:15%;right:2%;background-image:url(../imgs/ingots.webp);}
.fortune-cookies{width:20%;top:20%;left:-2%;background-image:url(../imgs/fortune-cookies.webp);}

@media (min-width:1025px){
.slide{flex-basis:20%;}
}

@media (min-width:768px) and (max-width:900px){
.container{margin-top:6em!important;}
.slide{flex-basis:60%!important;}
#Intro p{font-size:1.4em!important;}
.headline{font-size:3em!important;}
.slide.active .title{line-height:1.2;}
.slide .title em{font-size:1.8em;}
.slide .title i,.slide .title .en{font-size:0.8em;}
.ingredient-name{font-size:1.2em;}
.ingredient-name span{font-size:0.8em;}
}

@media (min-width:901px) and (max-width:1024px){
.slide{flex-basis:33.333%;}
}

@media (min-width:320px) and (max-width:1100px){
#Wrapper{margin-top:2em;}
}

@media (min-width:320px) and (max-width:900px){
body{background-size:110% auto;background-image:url(../imgs/bg-m.webp);background-color:#00061f;}
#Wrapper{margin:-1em auto 10em auto!important;overflow-x:hidden;}
#cnyLogo{width:230px;height:100px;margin-bottom:0;margin-top:5em;}
#Header{margin-bottom:3em;}
.headline{font-size:2.8em;}
.headline em{font-size:0.8em;display:block;margin-top:0;line-height:1;}

#Intro p{font-size:1.06em;}
#yusheng{width:150%;top:40%;pointer-events:none;}
.carousel-container{width:90%;}
.carousel-track{width:90%;}
.slide{flex-basis:70%;}
.slide:nth-child(3),.slide:nth-child(5){margin-top:0;}
.video-wrapper{width:100%;height:100%;top:1em;}
.container{margin:1em auto 10em auto;}
#legend{right:2em;top:-10%;display:none;}
#guide{width:32px;}
.angbaos{width:35%;top:36%;right:auto;left:-4%;transform:rotateZ(-40deg);}
.ingots{width:30%;top:24%;bottom:auto;right:-6%;opacity:0.6;}
.fortune-cookies{width:25%;top:10%;left:-2%;opacity:0.8;}
.audio-controls{margin:-6em auto 0 auto;}
.nav-btn{width:225px;height:22px;z-index:10;}
.prev{left:-25%;rotate:-120deg;}
.next{right:-25%;rotate:-60deg;}
}



@keyframes disappear{
to{width:0;height:0;visibility:hidden;}
}
@-webkit-keyframes disappear{
to{width:0;height:0;visibility:hidden;}
}

@keyframes swipe-x{
0%{transform:translateX(0px);}
25%{transform:translateX(25%) rotateZ(20deg);}
50%{transform:translateX(0px);}
75%{transform:translateX(25%) rotateZ(20deg);}
}

@-webkit-keyframes swipe-x{
0%{transform:translateX(0px);}
25%{transform:translateX(25%) rotateZ(20deg);}
50%{transform:translateX(0px);}
75%{transform:translateX(25%) rotateZ(20deg);}
}

@keyframes spin{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}

@-webkit-keyframes spin{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}

@keyframes tilt-shaking{
0%{transform:rotate(0deg);}
25%{transform:rotate(4deg);}
50%{transform:rotate(0eg);}
75%{transform:rotate(-4deg);}
100%{transform:rotate(0deg);}
}

@-webkit-keyframes tilt-shaking{
0%{transform:rotate(0deg);}
25%{transform:rotate(4deg);}
50%{transform:rotate(0eg);}
75%{transform:rotate(-4deg);}
100%{transform:rotate(0deg);}
}