.loading{ width:100vw; height:100%; min-height:100vh; position:fixed; left:0; top:0; background:linear-gradient(271deg, #5A3992 0%, #5A3992 14%, #E6652D 94%, #E6652D 100%) 0% 0%; z-index:100; display:flex; justify-content:center; align-items:center;}
.loading .images_lottie{ width:220px; }
.loading .images_lottie lottie-player{ width:100%; max-width:100%; }
.loading h4{ color:#fff; font-weight:400; }

.sweet-as-you-like .btn{ font-size:clamp(1.4rem, 4vw, 1.8rem); border-radius:2em; border:solid 1px; padding:.3em 1em; line-height:unset; }
.sweet-as-you-like h3{ font-size:clamp(2rem, 6.4vw, 2.8rem); font-weight:500; letter-spacing:.075em; }
.sweet-as-you-like picture{ display:block; }

.sweet-as-you-like .kv_bg{ background:linear-gradient(180deg, #F6D6C5 0%, #E7C1CA 100%) 0% 0%; padding:60px 0 40px; z-index:2; }
/*.sweet-as-you-like .kv img{ width:calc(100% - 40px); }*/


.sweet-as-you-like .flavor_bg{ background:url(../images/flavor_bg.png) no-repeat right 95%, linear-gradient(271deg, #5A3992 0%, #5A3992 14%, #E6652D 94%, #E6652D 100%) 0% 0%; background-size:100% auto; padding:60px 0 100px; }
.sweet-as-you-like .flavor{ background:url(../images/flavor_sweet.svg) no-repeat center bottom; background-size:100% auto; }
.sweet-as-you-like .flavor .flavor_tabs .ui-tabs-nav{ background:#fff; color:#5A3A93; font-size:clamp(1.2rem, 4vw, 1.8rem); display:flex; justify-content:space-between; width:100%; border-radius:1.5em; box-shadow:0 0 0 2px #fff; padding:0 4px; } 
.sweet-as-you-like .flavor .flavor_tabs .ui-tabs-nav a{ position:relative; padding:.6em .4em; }
.sweet-as-you-like .flavor .flavor_tabs .ui-tabs-nav a span{ position:relative;  }
.sweet-as-you-like .flavor .flavor_tabs .ui-tabs-nav .ui-state-active a{ color:#fff; font-weight:500; }
.sweet-as-you-like .flavor .flavor_tabs .ui-tabs-nav .ui-state-active a:before{ position:absolute; content:''; width:calc(100% + .5em); height:100%; top:50%; left:50%; background:linear-gradient(180deg, #E85230 0%, #D94A35 50%, #B44B5B 100%) 0% 0%; box-shadow:1px 1px 0 #C9C9C9; border-radius:1.5em; transform:translate(-50%,-50%); }
.sweet-as-you-like .flavor .flavor_tabs .ui-tabs-panel{ color:#fff;  }
.sweet-as-you-like .flavor .flavor_tabs .ui-tabs-panel figure{ display:flex; flex-direction:column; } 
.sweet-as-you-like .flavor .flavor_tabs .ui-tabs-panel figure figcaption{ text-align:left; padding:36px 12px 12px; }
.sweet-as-you-like .flavor .flavor_tabs .ui-tabs-panel p{ font-size:clamp(1.4rem, 4vw, 1.8rem); line-height:1.8; margin-bottom:24px; font-weight:300; }
.sweet-as-you-like .flavor .flavor_tabs .ui-tabs-panel strong{ font-size:1.2em; font-weight:500; }
.sweet-as-you-like .flavor .flavor_tabs .ui-tabs-panel em{ font-size:clamp(2.8rem, 6.4vw, 4rem); line-height:1.7; font-style:normal; font-weight:500; letter-spacing:.075em; }
.sweet-as-you-like .flavor .flavor_tabs .ui-tabs-panel figure .images_block img{ width:100%; }


.sweet-as-you-like .mop_bg{ background:url(../images/mop_bg.svg) no-repeat center 100% ,linear-gradient(90deg, #F6D6C5 0%, #E7C1CA 100%); z-index:2; background-size:98%, 100%; }
.sweet-as-you-like .mop{ color:#55190F; padding-bottom:45vw;}
.sweet-as-you-like .mop figure{ display:flex; flex-direction:column; width:100%; align-items:center; }
.sweet-as-you-like .mop h3{ margin-bottom:16px; }
.sweet-as-you-like .mop .video_box{ border:solid 1px #fff; padding:10px; margin-bottom:36px; width:96%; margin-top:-40px; }
.sweet-as-you-like .mop .video_box video{ width:100%; }

.sweet-as-you-like .customize_bg{ background:url(../images/customize_bg.svg) no-repeat right 90% #0E382C; background-size:102%; }
.sweet-as-you-like .customize{ color:#fff; padding-bottom:45vw; }
.sweet-as-you-like .customize figure{ display:flex; flex-direction:column; width:100%; }
.sweet-as-you-like .customize figure img{ width:100%; padding:10vw 5vw; } 
.sweet-as-you-like .customize h3{ margin-bottom:16px; }


@media (max-width:768px){}
@media (min-width:769px){
.sweet-as-you-like h3{ letter-spacing:0; }

.sweet-as-you-like .kv_bg{ padding-bottom:0; }
.sweet-as-you-like .kv img{ margin-bottom:-6%; }

.sweet-as-you-like .flavor .flavor_tabs .ui-tabs-nav{ width:fit-content; justify-content:center;  } 
.sweet-as-you-like .flavor{ max-width:1060px; margin:0 auto; background-size:45%; background-position:right;} 
.sweet-as-you-like .flavor .flavor_tabs .ui-tabs-panel figure{ flex-direction:row; }
.sweet-as-you-like .flavor .flavor_tabs .ui-tabs-panel figure figcaption{ position:relative; width:55%; padding-left:4.5vw; }
.sweet-as-you-like .flavor .flavor_tabs .ui-tabs-panel figure figcaption:before{ position:absolute; top:calc(36px + .8em); left:0; content:''; width:3px; height:60%; border-left:dotted 5px #fff; } 
.sweet-as-you-like .flavor .flavor_tabs .ui-tabs-panel figure .images_block{ width:45%; margin-top:-80px;}

.sweet-as-you-like .flavor_bg{ background:url(../images/flavor_bg_pc.png) no-repeat right center, linear-gradient(271deg, #5A3992 0%, #5A3992 14%, #E6652D 94%, #E6652D 100%) 0% 0%; background-size:auto 60%; }
.sweet-as-you-like .flavor .flavor_tabs .ui-tabs-nav a{ padding:.6em 1em .6em 1.8em; }
.sweet-as-you-like .flavor .flavor_tabs .ui-tabs-nav a span:before{ content:''; display:inline-block; background:url(../images/flavor_icon.svg) no-repeat; width:1em; height:1em; position:absolute; bottom:0; transform:translateX(-105%);} 
.sweet-as-you-like .flavor .flavor_tabs .ui-tabs-nav .ui-state-active a:before{ width:100%; }

.sweet-as-you-like .mop_bg{ background:url(../images/mop_bg_pc.svg) no-repeat center 102% ,linear-gradient(90deg, #F6D6C5 0%, #E7C1CA 100%); background-size:99%,100%; }
.sweet-as-you-like .mop{ padding-bottom:60px; }
.sweet-as-you-like .mop figure{ min-height:430px; flex-direction:row; align-items:center;}
.sweet-as-you-like .mop figure .video_box{ width:40%; margin:-40px 5% 0; }
.sweet-as-you-like .mop figure figcaption{ width:50%; }
.sweet-as-you-like .mop h3{ margin-bottom:1em; }
.sweet-as-you-like .mop .video_box{ margin-bottom:0; }


.sweet-as-you-like .customize_bg{ background:url(../images/customize_bg_pc.svg) no-repeat -10px 50% #0E382C; background-size:auto 65%; }
.sweet-as-you-like .customize{ padding-bottom:0; }
.sweet-as-you-like .customize figure{ min-height:20vw; flex-direction:row; align-items:center;}
.sweet-as-you-like .customize h3{ margin-bottom:1em; }
.sweet-as-you-like .customize figure picture,
.sweet-as-you-like .customize figure figcaption{ width:50%; }
.sweet-as-you-like .customize figure img{ padding:0; width:75%; }
}

@media (min-width:769px){
.sweet-as-you-like .flavor_bg{ padding:160px 0 120px; }	
}