.loading{ position:fixed; width:100%; min-width:100vw; height:100%; min-height:100vh; top:0; left:0; background:#FFF; z-index:100; display:flex; justify-content:center; align-items:center; }
.loading img{ width:80px; margin:16px auto; animation:loadingAni 2s infinite alternate; }
@keyframes loadingAni{from{ transform:scale(.9); } to{ transform:scale(1); } }
picture,img{ display:block; }
picture img{ width:100%; height:auto;}

.main.protein{ width:100%; overflow-x:clip; }

.protein .top{ position:relative; z-index:2; width:100%; margin-bottom:-16vw; background:url(../images/top_bg.svg) center bottom; background-size:100% auto; }
.protein .top figure{ display:flex; flex-direction:column-reverse; align-items:center; padding:12vw 9.4vw 23vw;}
.protein .top figure figcaption{ display:flex; flex-direction:column; align-items:center; gap:4vw;  }
.protein .top figure figcaption img{ width:100%; }
.protein .top figure figcaption img:nth-of-type(2){ width:90%; }
.protein .top figure .images_block img{ width:100%; }

.protein .kv{ position:relative; z-index:0; }
.protein .kv .text_block{ position:absolute; }

.protein .info{ position:relative; z-index:2; background-size:cover;}
.protein .info .text_block{ color:#CC742A; text-align:center; line-height:1.7;}
.protein .info .text_block p{ font-size:inherit; }
.protein .info .text_block:after{ content:''; display:inline-block; width:3em; height:2px; background:#CC742A; }

.protein .drink{ position:relative; z-index:0; }
.protein .drink .text_block{ position:absolute; width:100%; height:100%; }
.protein .drink .text_block .title ,.protein .drink .text_block a{ position:absolute; }
.protein .drink .text_block a img{ position:relative; display:block; width:100%; filter:drop-shadow(0 2px 4px rgba(0,0,0,.35)); }

.protein .add{ position:relative; z-index:2; }
.protein .add a{ display:block; }
.protein .add .ani{ position:absolute; }
.protein .add .ani img{ width:100%; }

.protein .epilog{ position:relative; }
.protein .epilog:after{ position:absolute; width:100%; content:''; top:0; display:block; background:center bottom no-repeat; background-size:100% auto; }


/* 直式 */
@media (orientation:portrait){ 
.protein .top figure{ gap:12vw; }
.protein .top figure .images_block{ width:51%; }
.protein .top figure figcaption{ width:100%; }

.protein .kv .text_block{ width:100%; height:100%; }
.protein .kv .text_block picture{ position:absolute; }
.protein .kv .text_block picture:nth-of-type(1){ top:32vw; left:10vw; width:56%;}
.protein .kv .text_block picture:nth-of-type(2){ top:42vw; left:10vw; width:79%;}
.protein .kv .text_block picture:nth-of-type(3){ top:74%; right:6vw; width:79%; filter:drop-shadow(2px 3px 4px rgba(0, 0, 0, .6));}

.protein .info{ aspect-ratio:390/366; background-image:url(../images/info_bg.png); margin-top:-34vw; margin-bottom:-23vw; }
.protein .info .text_block{ font-size:4.6vw; padding-top:40%; }

.protein .drink{ margin-bottom:-80vw; }
.protein .drink .text_block .title{ top:29vw; left:15vw; width:70%;}
.protein .drink .text_block a:nth-of-type(1){ top:57%; left:10vw; width:37.4%;} 
.protein .drink .text_block a:nth-of-type(2){ top:57%; right:10vw; width:36.6%;}

.protein .add .ani{ width:100%; top:18vw; left:0; }

.protein .epilog:after{ aspect-ratio:390/106; background-image:url(../images/epilog_wave.svg); }
}

/* 橫式 */
@media (orientation:landscape){ 
.protein .top{ background-image:url(../images/top_bg_pc.svg); }
.protein .top figure{ flex-direction:row; justify-content:center; padding:5vw 0 10vw; gap:5vw;}
.protein .top figure .images_block{ width:13.8vw; }
.protein .top figure figcaption{ width:21.9%;  gap:1.2vw; }

.protein .kv .text_block{ width:46%; left:5.2%; top:34%; display:flex; flex-direction:column; gap:1vw; } 
.protein .kv .text_block picture:nth-of-type(1){ width:73%;}
.protein .kv .text_block picture:nth-of-type(2){ width:100%;}
.protein .kv .text_block picture:nth-of-type(3){ width:57%;}

.protein .info{ aspect-ratio:1440/466; background-image:url(../images/info_bg_pc.png); margin-top:-11vw; margin-bottom:-13.5vw; }
.protein .info .text_block{ font-size:1.6vw; padding-top:15%; }
.protein .info .text_block br{ display:none; }

.protein .drink{ margin-bottom:-10vw; }
.protein .drink .text_block .title{ top:15.6vw; left:36vw; width:30vw;}
.protein .drink .text_block a:nth-of-type(1){ top:45%; left:6vw; width:27.3%;} 
.protein .drink .text_block a:nth-of-type(2){ top:59%; right:6vw; width:24.5%;} 

.protein .add .ani{ width:50%; top:4vw; left:25%; }
.protein .epilog:after{ aspect-ratio:1440/198; background-image:url(../images/epilog_wave_pc.svg); }

}
@media (min-width: 819.98px){


}

@media (min-width: 991.98px) { 

} 

@media (min-width: 1199.98px) {



 }

@media (min-width:1399.98px) { 

}