lottie-player{ width:100%; max-width:100%; }
.loading{ position:fixed; width:100%; min-width:100vw; height:100%; min-height:100vh; top:0; left:0; background:#EDEEEE; 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); } }
.wrap{ color:#3E3A39; width:100%; overflow:clip;} 
.wrap picture,
.wrap img{ width:100%; height:auto; }
.wrap .btn{ background:transparent; background:#0D5690; color:#fff; font-size:clamp(1.4rem, 3.5vw, 1.6rem); padding:.4em 1.4em; border-radius:1.5em; border:solid 1px transparent; transition:all .6s ease-out; }
.wrap .btn.arrow{ padding-right:1em; }
.wrap .btn.arrow:after{ content:'\f101'; display:inline-block; margin-left:.2em; }
.wrap section{ position:relative; }
.wrap .slick-list{ z-index:1; }
.wrap .slick-dotted .slick-dots{ display:flex; justify-content:center; flex-wrap:wrap; gap:0 16px; width:calc(100% - 80px); margin:16px auto 0; padding-bottom:24px; position:relative;}
.wrap .slick-dotted .slick-dots li{ width:12px; height:12px; border-radius:12px; background:#935E83b3; transition:all 1s ease; cursor:pointer; } 
.wrap .slick-dotted .slick-dots li.slick-active{ width:30px; background:#935E83; } 
.wrap .slick-dotted .slick-dots li button{ font-size:0; }
.wrap .slick-slider figure{ cursor:grab; }
.wrap figcaption{ text-align:left; }
.wrap figcaption .title{ display:flex; flex-direction:column; align-items:center; gap:8px 16px; margin-bottom:12px;}
.wrap figcaption .title h3{ font-size:clamp(2rem, 5.7vw, 3rem); font-weight:500; }
.wrap figcaption .title h3 span{ font-size:.7em; margin-left:4px; display:inline-block; }
.wrap figcaption .title h4{ font-size:clamp(1.8rem, 4.1vw, 2.2rem); font-weight:400;  }
.wrap figcaption .title h4.en{ width:100%; }
.wrap figcaption .title h5{ font-size:clamp(1.8rem, 4.5vw, 2.4rem); }
.wrap figcaption p{ font-size:clamp(1.8rem, 4.1vw, 2rem); line-height:1.4; letter-spacing:.025em; margin-bottom:8px; } 
.wrap figcaption a.more{ margin-top:16px; }
.wrap figcaption b{ font-weight:600; }
.wrap h2{ display:inline-block; color:#0D5690; font-size:clamp(2.6rem, 7.2vw, 4.8rem); font-weight:500; letter-spacing:.1em; margin-bottom:24px; line-height:1.4;} 
.wrap h3{ display:inline-block; font-size:clamp(2rem, 5.7vw, 3rem); font-weight:500; line-height:1.4;} 
.wrap h3 span{ display:inline-block; } 
.wrap h4{ display:inline-block; } 
.wrap p{ font-size:1.6rem; } 
.wrap p strong{ font-size:clamp(1.7rem ,4.4vw, 1.25em); color:#0D5690; font-weight:500; } 
.wrap p.small{ font-size:.9em; } 


.wrap .fixed{ position:fixed; right:0; bottom:60px; z-index:91; transition:transform 1s ease-out; }
.wrap .fixed .btn.toggle{ /*position:absolute; left:0; top:0;*/ transform:translate(0%, -100%); background:#0D5598; border-radius:50%; width:30px; height:30px; display:flex; justify-content:center; align-items:center; padding:0;} 
.wrap .fixed .btn.toggle img{ width:13px; height:auto; transition:transform 0s 1s ease-in; }
.wrap .fixed .jump{ width:177px; height:183px; }
.wrap .fixed.close{ transform:translateX(100%); }
.wrap .fixed.close .btn.toggle{ transform:translate(-36px, -100%); }
.wrap .fixed.close .btn.toggle img{ transform:rotateY(180deg); }

.wrap .kv{ position:relative;  width:100%; }
.wrap .kv:after{ position:absolute; left:0; bottom:0; content:''; display:block; width:100%; height:30px; background:url(../images/kv_deco.png) repeat center bottom; background-size:auto 100%; }
.wrap .kv > picture img{ width:100%; height:100%; object-fit:cover; }
.wrap .kv .title{ position:absolute; top:0; left:0; width:100%; }
.wrap .kv .title .text{ position:relative; height:auto; margin:auto; display:inline-block;}
.wrap .kv .title .bg{ position:absolute; bottom:2vw; left:0; width:100%; height:100%; object-fit:cover; display:inline-block;}
.wrap .kv .title .bg img{ width:100%; height:100%; object-fit:cover;}
.wrap .kv .title .deco{ position:absolute;  object-fit:cover; display:inline-block; }

.wrap .major{ padding:0 10px; display:flex; flex-wrap:wrap; gap:24px; width:100%; overflow-x:clip; position:relative; z-index:2;} 
.wrap .major figure{ position:relative; background-image:linear-gradient(to bottom, #fff 60%, #f1fcff 60%); background-size:100% 60px; box-shadow:2px 2px 6px #144f7d66;}
.wrap .major figure:before{ content:''; position:absolute; top:0; left:0; display:block; width:100%; height:100%; background:#B3DAE6; transform:rotate(-3deg); z-index:-1;}
.wrap .major figure:nth-of-type(even){ background:#fff; }
.wrap .major figure figcaption{ padding:16px; }
.wrap .major figure .title{ color:#0D5690; align-items:flex-start; margin-bottom:24px; }
.wrap .major figure .images_block{ position:relative; }
.wrap .major figure .images_block:after{ content:''; display:block; position:absolute; left:0; bottom:0; background:radial-gradient(#fff 30px, transparent 1px) repeat-x center top; background-size:60px 60px; width:100%; height:30px; }
.wrap .major figure .deco{ max-width:60%; height:auto; margin-top:24px; display:block; }
.wrap .major figure:nth-of-type(1) .deco{ width:288px; }
.wrap .major figure:nth-of-type(2) .deco{ width:231px; }
.wrap .major figure:nth-of-type(3) .deco{ width:235px; }
.wrap .major figure:nth-of-type(4) .deco{ width:280px; }

.wrap .minor_bg{ position:relative; background:#FEEC8A; z-index:2; }
.wrap .minor_bg:before{ content:''; display: block; position: absolute; top: 0; left:-5%; width:106%; height: 100%; background:linear-gradient( #F1FFD6 0%, #E6FDFF 100%);  transform:rotate(2deg);}
.wrap .minor{ display:flex; flex-wrap:wrap; padding:36px 10px; }
.wrap .minor figure{ padding:12px 0 36px; display:flex; gap:8px; justify-content:center;} 
.wrap .minor figure:nth-of-type(even){ flex-direction:row-reverse; } 
.wrap .minor .images_block{ width:45%;} 
.wrap .minor figcaption{ display:flex; flex-direction:column; align-items:flex-start;}
.wrap .minor figcaption .title{ align-items:flex-start; color:#0D5690;}
.wrap .minor figcaption .btn{ border:solid 1px #0D5690; color:#0D5690; background:transparent; margin-top:24px; }

.wrap .products{ display:flex; flex-wrap:wrap; position:relative; z-index:2; }
.wrap .products figure{ width:50%; background-image:linear-gradient(to right, #DFF0F2 62%, #EDF6F7 38%); background-size:38px 100%; padding:12px 0 36px; display:flex; flex-direction:column; gap:24px;} 
.wrap .products figure:nth-of-type(2),.wrap .products figure:nth-of-type(3){ background-image:linear-gradient(to right, #FFFCD9 62%, #FFFEF5 38%); }
.wrap .products figcaption{  text-align:center; display:flex; flex-direction:column; justify-content:space-between; align-items:center; flex:2 2 100%; z-index 2; position relative;} 
.wrap .products figcaption .title{ display:flex; flex-direction:column; align-items:center; gap:8px 16px; margin-bottom:12px; color:#0D5690;}
.wrap .products figcaption .btn{ border:solid 1px #0D5690; color:#0D5690; background:transparent; }

.wrap .gift_bg{ position:relative; z-index:2;}
.wrap .gift_bg .bg{ width:100%; height:20px; object-fit:cover; }
.wrap .gift{ position:relative; background:#E2E1E0; padding:48px 0 120px;   }
.wrap .gift:after{ content:''; display:block; width:150px; height:154px; background:url(../images/gift_bg_deco.png); background-size:cover; position:absolute; bottom:0; right:0; } 
.wrap .gift .title{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 36px; }
.wrap .gift .title h2{ margin-bottom:0; font-size:clamp(3.4rem, 7.2vw, 3.6rem);}
.wrap .gift .list{ display:flex; flex-wrap:wrap; justify-content:center; gap:36px; padding:36px 0;} 
.wrap .gift .list li{ width:80%;  }
.wrap .gift .list li figure{ padding:16px; text-align:left;  }
.wrap .gift .list li figcaption{ border-left:solid 4px #0D5690; padding-left:16px;  }
.wrap .gift .list li h3{ display:block; margin-bottom:8px; color:#0D5690; }
.wrap .gift .list li h4{ display: block; margin-bottom:12px; color:#0D5690; }
.wrap .gift .list li h4 span{ font-size:.8em; }
.wrap .gift .list li .images_block{ position:relative; margin-bottom:24px; }
.wrap .gift .list li .images_block img{ position:relative; }
.wrap .gift .list li .images_block:before{ position:absolute; top:0; left:0; content:''; display:block; width:100%; height:100%; background:#574E47; transform:rotate(-4deg); }
.wrap .gift .list li:nth-of-type(1){ margin-left:-10%;  }
.wrap .gift .list li:nth-of-type(2){ margin-left:10%;  }
.wrap .gift .list li:nth-of-type(3){ width:100%;  }
.wrap .gift .list li:nth-of-type(3) .images_block{ width:80%;  }
.wrap .gift .list li:nth-of-type(3) .images_block:before{ background:#DDD5CA; }

.wrap .beverage_bg, .wrap .online_banner{ background:linear-gradient(to right, #fff 60%, #EFFBFF 60%); background-size:100px 100%; background-repeat:repeat-x; }
.wrap .beverage_bg{ padding-top:24px; }
.wrap .beverage_bg:after{ content:''; display:block; width:100%; background:radial-gradient(#fffcda 40px, transparent 1px) repeat-x center -40px; background-size:80px 80px; height:40px; }
.wrap .beverage{ position:relative; background:#FFFCD9; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; padding:36px 10px;}
.wrap .beverage .images_block{ width:80%; max-width:560px;  } 
.wrap .beverage .icon{ width:237px;  } 
.wrap .beverage .text_block{ text-align:left; display:flex; flex-direction:column; align-items:flex-start; gap:36px;}
.wrap .beverage .text_block .border_box{ border-left:solid 4px #0D5690; padding-left:16px; text-align:left;  display:flex; flex-direction:column; align-items:flex-start; /*gap:16px; */}
.wrap .beverage .title{ color:#0D5690; margin-bottom:12px; }
.wrap .beverage .text_block p.small{ margin-top:24px; }
.wrap .beverage .text_block span{ display:inline-block; }

.wrap .online_banner{ padding:48px 0; }
.wrap .online_banner h2{ display:block; }
.wrap .online_banner .list{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:center; gap:36px 24px; margin-top:36px; } 
.wrap .online_banner .list li{ width:160px; }
.wrap .online_banner .list li .images_block{ width:188px; max-width:100%; margin:12px auto; }
.wrap .online_banner .list img{ width:100%; height:auto; object-fit:contain; object-position:center bottom; }
.wrap .online_banner .list figcaption{ text-align:center; }
.wrap .online_banner .list figcaption h3{ font-size:clamp(2rem, 4.1vw, 2.4rem); font-weight:500;  }

.wrap .about{ background:linear-gradient(180deg, #B3DAE6 0%, #FFF 100%) 0% 0%; padding:60px 0; }
.wrap .event{ background:#fff; border-radius:24px; padding:48px 16px; margin-bottom:48px; }
.wrap .event h3{ background:#0D5690; color:#FFF; border-radius:4px; font-size:clamp(1.8rem, 5vw, 2.4rem); line-height:1.4; display:inline-block; padding:.2em .8em; margin:36px 0 16px;}
.wrap .event .text_block{ max-width:900px; margin:0 auto; text-align:left; }
.wrap .event .text_block a{ text-decoration:underline; }
.wrap .event .text_block b{ color:#0D5690; font-weight:700; }
.wrap .event .text_block strong{ color:#0D5690; font-weight:500; font-size:1.4em; }
.wrap .event .text_block ul{ list-style:disc; margin-left:1.4em; }
.wrap .event .text_block ol{ list-style:decimal; margin-left:1.4em; }
.wrap .event .text_block p{ font-size:1.6rem;  }
.wrap .event .text_block p,
.wrap .event .text_block li{ margin-bottom:8px; line-height:1.4; letter-spacing:.025em;}
.wrap .event .text_block p.note{ font-size:1.4rem; }
.wrap .event .text_block .btn{ color:#fff; margin-top:16px; text-decoration:none; }
.wrap .event figure{ display:flex; flex-direction:column; gap:8px; align-items:center; }
.wrap .event figure img{ width:75vw; max-width:282px; }
.wrap .about .note{ max-width:900px; margin:0 auto; }
.wrap .about .note ol{ list-style:decimal; margin-left:1.4em; text-align:left;  }






/* 直式 */
@media (orientation:portrait){ 
.wrap .kv{ height:166vw; }
.wrap .kv .title{ height:30%; }
.wrap .kv .title .text{ width:78%; margin-top:10vw; }
.wrap .kv .title .deco{ bottom:0; right:0; width:64px; height:124px; transform:translateY(30%);}

}

/* 橫式 */
@media (orientation:landscape){ 
.wrap .kv{ height:67.7vw; min-height:1000px; }
.wrap .kv .title{ height:304px; }
.wrap .kv .title .text{ width:694px; top:72px; }
.wrap .kv .title .deco{ bottom:0; right:0; width:100%; height:100%; }
.wrap .kv .title .deco img{ width:100%; height:100%; object-fit:cover; object-position:center bottom;}

}

/* applies to x-small devices (landscape phones, less than 375px)  */
@media (min-width:375px){ }

/* applies to small devices (landscape phones, less than 768px) */
@media (min-width:767.98px){ }

/* lg applies to medium devices (tablets, less than 992px) */
@media (min-width: 991.98px){ 
.wrap .title{ margin-bottom:16px;} 
.wrap figcaption .title h3 br{ display:none; }
.wrap figcaption .title h4 br{ display:none; }
.wrap figcaption a.more{ margin-top:24px; }
.wrap figcaption p{ line-height:1.6; font-size:clamp(1.6rem, 1.2vw, 1.8rem); }

.wrap .major_list figure{ display:flex; align-items:center; position:relative; } 
.wrap .major_list figure .deco{ position:absolute; width:100%; height:100%; top:0; left:0; pointer-events:none; background-size:cover;}
.wrap .major_list figure .images_block{ width:62.5%; } 
.wrap .major_list figcaption{ width:clamp(440px, 24%, 480px); margin:0 auto; padding:0; }
.wrap .major_list figcaption .title{ flex-wrap:wrap; flex-direction:row; align-items:baseline; margin-bottom:24px;}
.wrap .major_list figure:nth-of-type(even){ flex-direction:row-reverse; } 
.wrap .major_list figure:nth-of-type(1){ padding-top:80px; }
.wrap .major_list figure:nth-of-type(1) .images_block{ border-radius:0 8vw 18vw 0; }
.wrap .major_list figure:nth-of-type(2) .images_block{ border-radius:18vw 0 0 18vw; }
.wrap .major_list figure:nth-of-type(3) .images_block{ border-radius:0 18vw 8vw 0; }
.wrap .major figure{ width:calc(50% - 12px); }

.wrap .minor figure{ width:50%; padding:12px 0 24px; gap:24px; }
.wrap .minor figure,.wrap .minor figure:nth-of-type(even){ flex-direction:row; align-items:center; }
.wrap .minor figure:nth-of-type(even){ margin-top:48px; }
.wrap .minor .images_block{ width:75%; }

.wrap .products figure{ width:25%; }
.wrap .products figure:nth-of-type(even){background-image:linear-gradient(to right, #FFFCD9 62%, #FFFEF5 38%); }
.wrap .products figure:nth-of-type(odd){background-image:linear-gradient(to right, #DFF0F2 62%, #EDF6F7 38%); }

.wrap .gift{ padding-bottom:0; }
.wrap .gift .list{ justify-content:flex-start; width:900px; margin:auto;} 
.wrap .gift .list li:nth-of-type(1){ width:45%; margin-left:unset; }
.wrap .gift .list li:nth-of-type(2){ width:45%; margin-left:unset; transform:translateY(50%); }
.wrap .gift .list li:nth-of-type(3){ width:45%; }
.wrap .gift .list li:nth-of-type(3) .images_block{ width:unset;}

.wrap .beverage{ flex-direction:row; flex-wrap:wrap; padding:48px 10px 36px; }
.wrap .beverage .icon{ margin-left:-80px; margin-top:-210px; }

.wrap .online_banner .list{ gap:36px 48px; margin-top:-24px;}
.wrap .online_banner .list li{ width:180px; }
.wrap .event figure{ flex-direction:row-reverse; gap:24px; align-items:flex-start; }

}

/* xl applies to large devices (desktops, less than 1200px) */
@media (min-width:1199.98px){ 
.wrap .major figure{ width:unset; display:flex; align-items:center;  }
.wrap .major figure figcaption{ padding:0 40px 0 80px; max-width:620px; flex:1 1 40%; box-sizing:border-box; }
.wrap .major figure .images_block{ max-width:900px; width:800px; }
.wrap .major figure .images_block:after{left:unset; right:0; bottom:0; background:radial-gradient(#fff 45px, transparent 1px) repeat-y left center; background-size:90px 90px; width:45px; height:100%; }
.wrap .major figure:nth-of-type(odd){background-image:linear-gradient(to right, #fff 60%, #EFFBFF 60%); background-position-x:left; background-size:100px 100%; }
.wrap .major figure:nth-of-type(even){ flex-direction:row-reverse;}
.wrap .major figure:nth-of-type(even) .images_block:after{ left:0; background-position-x:right; }

.wrap .minor .images_block{ width:45%; }

.wrap .gift{ padding:0 20px; }
.wrap .gift .title{ position:absolute; top:.6em; right:50%; justify-content:flex-end; gap:12px 16px; } 
.wrap .gift .list{ flex-direction:row; flex-wrap:nowrap; align-items:flex-end; width:100%; max-width:1400px; gap:44px; padding:0 0 48px; margin:auto; } 
.wrap .gift .list li figure{ padding:0; }
.wrap .gift .list li:nth-of-type(1){ width:unset; flex:1 1 30%; transform:translateY(-48px); }
.wrap .gift .list li:nth-of-type(2){ width:unset; flex:1 1 30%; transform:translateY(0);}
.wrap .gift .list li:nth-of-type(3){ width:unset; flex:2 2 40%; transform:translateY(-16px);}

.wrap .online_banner{ position:relative; padding:80px 0 48px; overflow-x:clip; }
.wrap .online_banner .list{ gap:16px; }
.wrap .online_banner .list li{ width:unset; flex:0 1 280px; }
.wrap .online_banner:before, .wrap .online_banner:after{ content:''; display:block; position:absolute; background-size:cover; }
.wrap .online_banner:before{ background-image:url(../images/online_deco_left.png); width:240px; height:244px; top:0%; left:0; transform:translateX(-20%); } 
.wrap .online_banner .list figcaption h4{ display: block; }

.wrap .beverage_bg{ position:relative; z-index:2; }
.wrap .beverage .images_block{ margin-bottom:-120px; width:40%; } 
.wrap .beverage .icon{ margin-right:48px; margin-top:-110px; }
.wrap .beverage .text_block{ width:480px; }

.wrap .about{ padding:60px 0 80px; background-image:url('../images/about_bg_deco.png'), linear-gradient(180deg, #B3DAE6 0%, #FFF 100%); background-repeat:no-repeat ,repeat; background-position:-80px bottom, 0 0; background-size:200px auto, contain; } 


}

/* xxl applies to x-large devices (large desktops, less than 1400px) */
@media (min-width:1399.98px){ 
.container, .content{ max-width:1400px; }
.wrap .kv .title .deco img{ object-fit:contain; }

.wrap .major figure{ width:100%;  }
.wrap .major figure figcaption{ max-width:580px; flex:1 1; padding:0 80px; } 
.wrap .major figure .images_block{ max-width:60%; width:unset; flex:2 1 auto; }

.wrap .minor{ max-width:1600px; margin:auto;}
.wrap .minor figure{ gap:8px 24px; }
.wrap .minor figure:nth-of-type(n+3){ transform:translateX(5%); }
.wrap .minor figcaption{ align-items:flex-start; }
.wrap .minor figcaption .title{ align-items:flex-start; }

.wrap .products_bg{ position:relative; z-index:2; }
.wrap .products_bg:before, .wrap .products_bg:after{ content:''; display:block; position:absolute; top:0; width:50%; height:100%; background-size:38px 100%;}
.wrap .products_bg:before{ left:0; background-image:linear-gradient(to right, #FFFCD9 62%, #FFFEF5 38%); }
.wrap .products_bg:after{ right:0; background-image:linear-gradient(to right, #DFF0F2 62%, #EDF6F7 38%); z-index:0;}
.wrap .products{ position:relative; max-width:1600px; margin:auto; z-index:1;}

.wrap .beverage .text_block{ width:unset; }

.wrap .online_banner:before{ width:297px; height:301px; top:0%; left:0; transform:translate(-10%, -10%); } 
.wrap .online_banner .list{ gap:64px; }

.wrap .about{ background-position:0 bottom, 0 0; background-size:16% auto, contain; } 



}