@charset "UTF-8";

/* 區塊 */
:root { --swiper-theme-color: #454545}
body { margin: 0; padding: 0;}
.WRAPPER { container-type: inline-size; overflow: hidden;}
.Area { position: relative; display: block; margin: 0 auto;}
.Area *,
.Area *::before,
.Area *::after { box-sizing: border-box;}
.Area img { width: 100%; height: auto; vertical-align: top;}
.Area2000 { width: min(100%, 2000px);}
.Area1220 { width: min(100%, 1220px);}   
.Area960  { width: min(100%, 960px);}
    @container (min-width:768px) {
        .for_phone{ display: none;}
    }
    @container (max-width:767px) {
        .for_pc { display: none;}
    }


/* @版頭 */
.AreaHeader { display: flex; justify-content: center; align-items: center; overflow: hidden;} 
.AreaHeader ul,
.AreaHeader li { margin: 0; padding: 0; list-style: none;}
.AreaHeader a { display: block;}


/* @Banner */
.AreaBannerSlide { padding-bottom: 2rem; overflow: hidden;}
.AreaBannerSlide:has(.swiper-pagination-lock) { padding-bottom: 0;} /* 只有1個關閉輪播點點時，不推下內距 */
.AreaBannerSlide .AreaBannerSlide_box { position: relative;}
.AreaBannerSlide ul,
.AreaBannerSlide li { margin: 0; padding: 0; list-style: none;}
.AreaBannerSlide a { display: block;}
    /* 開啟下間距加上Areabottom */
    @container (min-width:768px) { .AreaBannerSlide.Areabottom { margin-bottom: 80px;}} 
    @container (max-width:767px) { .AreaBannerSlide.Areabottom { margin-bottom: 24px;}}


/* 影片 */
.AreaVideo .video-box { display: grid; place-items: center; padding: 0.5rem; aspect-ratio: 16/9;}
.AreaVideo .video-box iframe { object-fit: scale-down; background-color: #DDD;}


/* 影片1品 */
.AreaVideo1PD .video-box { display: grid; place-items: center; padding: 0.5rem; aspect-ratio: 16/9;}
.AreaVideo1PD .video-box iframe { object-fit: scale-down; background-color: #DDD;}
.AreaVideo1PD .grid-container { display: grid; padding: 0.5rem; gap: 1rem;}
.AreaVideo1PD .grid-container .PD_wrapper  {padding: 0; grid-gap: 0; }
  @container (min-width: 768px) {
    .AreaVideo1PD .grid-container { grid-template-columns: 1fr 365px; }
    .AreaVideo1PD .grid-container .PD_layout { container-type: normal;}
  }


/* @滑動區塊 */
.AreaPDSlide { padding-bottom: 2rem; overflow: hidden;}
  @container (max-width: 767px) {
    .AreaPDSlide {padding-bottom: 1.75rem;}
  }


/* 注意事項區 + APPLE注意事項區 */
.Area_msg { padding: 50px 0 10px; font:12px/18px Helvetica; text-align:center;  color:#000;}
.Area_msg_apple { padding: 10px 0; }