@charset "utf-8";

/*基本*/
body {
  margin: 0;
  padding: 0;
  background: #000000 
}

/*隱鑶*/

.for_phone, .for_m { display:none !important;}
.f-c{display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; flex-direction: row;}

 .Area_title { position: relative; margin-bottom: 50px; }
 .Area_title01 { position: relative; margin-bottom: 0px; height: 180px; z-index: -1;}
 .Area_title img { margin: 0 auto; }
 .Area01 .f-c {gap: 20px;margin-bottom: 20px;}
 .Area01-2{height: 360px;}
  .Area01-2 img{width: 432px; margin: 5px;}
.Area04 { position: relative; margin-bottom: 80px; }

.gifts span {color:#b11303;}
.Area_danji .danji_box ul li img {
      width: 100%;
    aspect-ratio: 878/253;
  
}
.Area_title03_deco01{position: absolute;margin: 45px 0 0 -624px;}
.Area_title03_deco02{position: absolute;margin: -215px 0 0 1330px}
.Area_title03{margin-left: -390px;position: relative;height: 170px;}
.title04{ position: relative; height: 195px;}
.Area04 .PD_layout {width: 1160px;}
.Area04-01{margin-bottom: 50px;}
    @media screen and (max-width:767px){
      .title04{ position: relative; height:34vw;}
      .Area04 .PD_layout {width:96vw}
      .for_pc { display:none !important;}
      .for_phone, .for_m { display: inherit !important;}

      .Area01 .f-c {gap: 1.5vw;margin-bottom: 1.5vw;width: 98vw; margin: 1.5vw auto;}
    
      .Area01-2 {height: 37vw; width: 98vw;}
      .Area01-2 img{ width: 48vw; margin: 0 0.2vw; }
      .Area_danji {width: 98vw;}
      .Area_danji .danji_box ul li img{    aspect-ratio: auto;}
      .Area_danji .danji_box ul li .activityImg{top: 24%;}
      .Area_Textwhite .btn_reg .content p span {color: #fff !important;}
      .Area_title01{height: 19vw; position: relative; z-index: -1; width: 132vw; margin-left: -16vw;}
      .Area_title02{height: 20vw; position: relative; z-index: -1;width: 80vw;margin: 0 auto  ;}
      .Area_title03{height: 20vw; position: relative; z-index: -1; width: 116vw; margin: 0 auto; margin-left: -8vw;}
      .sw_title{height: 20vw; position: relative; z-index: -1;width: 80vw;margin: 0 auto  ;}
      .Area_sw .layout_bg {height: 20vw; width: 105vw; margin-left: -2.5vw;}
   
      .Area_danji .danji_box ul li img {
    width: 100%;
    aspect-ratio: 878/253;
}
    }

/*全BOX版面*/
.WRAPPER { position: relative;margin: 0 auto; padding: 0;width:100%; min-width:1220px; overflow: hidden;font-family:"微軟正黑體","Microsoft JhengHei",Helvetica;}
.WRAPPER img { border:0; vertical-align:top;}
.WRAPPER a { text-decoration:none;  display:inline-block;}
.WRAPPER .mainArea { position:relative; display:block; margin:0 auto; padding: 0; width:1220px;}
    @media screen and (max-width:767px){
      .WRAPPER { width: 100%; padding-bottom:0px; margin:0 auto; display: block; min-width:100%; background-repeat:repeat-y; background-size:100% ;}
      .WRAPPER .mainArea { position:relative; display:block; margin:0 auto; padding: 0; width:100%;}
    }
ul {margin: 0; padding: 0}
li { list-style: none;}

.danji_box ul li .activityText p {
  
}
.Area_Textwhite .btn_reg .content p {

}

/*PC背景*/
@media screen and (min-width:767px){
 .bg_re { z-index:-8; position:absolute; top:160px; left:0; width:100%; height:110%; background-repeat:repeat-y; background-position: center top; pointer-events:none; }
 .bg_00 { z-index:-7; position:absolute; top:0px; left:50%; transform: translateX(-50%); width:2000px; height:1690px; background-repeat:no-repeat; background-position: center top; pointer-events:none; }
 .bg_01 { z-index:-7; position:absolute; top:0px; left:50%; transform: translateX(-50%); width:2000px; height:1690px; background-repeat:no-repeat; background-position: center top; pointer-events:none;}
 .bg_02 { z-index:-7; position:absolute; top:0px; left:50%; transform: translateX(-50%); width:2000px; height:1690px; background-repeat:no-repeat; background-position: center top; pointer-events:none;}
 .bg_03 { z-index:-7; position:absolute; top:0px; left:50%; transform: translateX(-50%); width:2000px; height:1690px; background-repeat:no-repeat; background-position: center top; pointer-events:none;}
 .bg_04 { z-index:-7; position:absolute; top:0px; left:50%; transform: translateX(-50%); width:2000px; height:1690px; background-repeat:no-repeat; background-position: center top; pointer-events:none;}
 .bg_05 { opacity: 1; z-index:-7; position:absolute; top:0px; left:50%; transform: translateX(-50%); width:2000px; height:1690px; background-repeat:no-repeat; background-position: center top; pointer-events:none;}
 .bg_06 { z-index:-7; position:absolute; top:0px; left:50%; transform: translateX(-50%); width:2000px; height:1690px; background-repeat:no-repeat; background-position: center top; pointer-events:none;}

  .pc_bg_deco{  position:absolute; top:0px;  margin: 0 ;left: 50%;transform:translateX(-50%);width:2000px; height:14742px; background-repeat:repeat-y; background-position:center top; }
  .pc_bgtopre { z-index:-3; position:absolute; top:1300px;  margin: 0 ;left: 50%;transform:translateX(-50%);width:2000px; height:20000px; background-repeat:repeat-y; background-position:center top;}
  .Area04 .bg_pd{ z-index:-3; position:absolute; top:50px;  margin: 0 ;left: 50%;transform:translateX(-50%); width:2000px; height:4108px; background-repeat:no-repeat; background-position:center top; }
  .pc_bottom{z-index:-3;  position:absolute; bottom:0px;  margin: 0 ;left: 50%;transform:translateX(-50%);width:2000px; height:725px; background-repeat:repeat-y; background-position:center top; }
} 


/*MB背景*/
.m_Area_bgtop{ z-index: -40;  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  pointer-events: none;}
.m_Area_bgtop .m_bgtop_ {position: absolute;  top: 0; left: 0 ;  width: 100%;  height: 100%;  padding-bottom: 100%;}


/*我是CSS_momologo*/
.momologo { position:absolute; top:15px; left:20px; z-index:999; }
    @media screen and (max-width:767px){
      .momologo {position:absolute; width: 25%; top: 2.5vw; left:4vw; }
    }



  

/*版頭*/
.Area_top { position:relative; height: 900px; }
.Area_top .main { position:absolute; top:120px; left:60%; translate: -50% 0%;  }
.Area_top .light { position:absolute; top:31px; left:80px; width:267px;  }
.Area_top .toppd { width: 60%; position:absolute; top: 295px; left: 30%; translate: -50% 0%; }
.Area_top .logo { opacity: 50%; position: absolute; top: 120px; left: 50%; translate: -50% 0%; max-width: 1220px; display: flex; align-items: center; justify-content: center;}
.Area_top .contral a { margin:30px 25px 0; }
.Area_top .contral img { width: 125px; height: auto; }
.Area_act {height: 700px;}

@media screen and (max-width:767px){
  .Area_top { position:relative; height:104vw; width: 100%; }
  .Area_top  .main {position: absolute; top:5vw; left:50%;  translate: -50% 0%; z-index: 1; width: 80%;}
  .Area_top  .light {position: absolute; top:13vw; left:-4vw; width:50%; z-index: 1}
  .Area_top  .light img { width:50%;}
  .Area_top  .toppd { position: relative; top:35vw; left: 50%; translate: -50% 0%; width: 95%; z-index: 1}
  .Area_top  .toppd img {width: 100%; height: auto;}
  .Area_top  .logo {position: absolute; top:2vw; left:50vw; width:100%; z-index: 1}
  .Area_top .contral {position: absolute; z-index: 1;padding:2vw 0;}
  .Area_top .contral a {margin: 1vw;}
  .Area_top .contral img{width: 12.5vw;}
  .Area_act {height: 56vw;}
  .sw { width: 100vw ;}
  .sw0 { width: 100vw;}
  .Area_swiper_box .PD_layout li{background-color: #fff;}
  .Area_sw{height: 101vw}


 }




/*Area_02夏日熱搜*/
.Area02 { position:relative; height:1520px; }
.Area02 .layout_bg img { max-width: 100%;  }
.Area02 .layout_bg { scale: 0.9; }
.Area02 .f-c a{width: 40%; margin: 10px;}
.Area02 .f-c .w100 {width: 81.5%;}
.Area02 .f-c img{width: 100%;}
@media screen and (min-width: 768px) { 
  
.Area02 .PD_layout { position: absolute; top:90px;}
.Area02 .PD_layout ul { width: 80%; }

 }
 @media screen and (max-width:767px){
  .Area02 .layout_bg { scale:  3.5; transform-origin: top}
 .Area02 { position:relative; height:480vw;}
 .Area02 .PD_layout { position: absolute; top: 7vw; left:0vw ;}	 
 .Area02 .f-c a{width: 96vw; margin: 1vw;}
.Area02 .f-c img{width: 100%;}
 }


/*03-登記*/
.Area03 { position: relative; height:675px; }
.Area03 .layout_bg { position: absolute; top:0; left:-390px; z-index:-1;  pointer-events: none; }
.Area_sw .layout_bg{height:180px;}
.Area_swiper{width: 1210px; overflow: hidden; margin-bottom: 60px; }
.swiper-pagination {
    margin-top: -13px;
    position: relative;
    text-align: center;
    transition: .3s opacity;
    transform: translate3d(0,0,0);
    z-index: 10;
}
@media screen and (max-width:767px){
  .Area03 { position: relative; width: 100%; height:174vw;padding-bottom:0%; }
  .Area03 .title {padding-top:0;width: 81%; left: 10vw;  }	
  .Area_sw .layout_bg{height:21vw;}
  .Area_swiper{width: 100vw; }
  .swiper-pagination {margin-top: -7vw; }
}





/*05下方公版*/
.Area05 { position: relative; height:1000px; }
@media screen and (min-width: 768px) { 
  .Area05 .PD_layout { position: absolute; top:170px; left:0px;}
  .Area05 .PD_layout ul { width: 80%; }
}
@media screen and (max-width:767px){
  .Area05 { position: relative; width: 100%; height:300vw; padding-bottom: 10vw;  }
  .Area05 .PD_layout { position: absolute; top:15vw; left:0px;}
}

/*06下方公版*/
.Area06 { position: relative; height:900px; }
@media screen and (min-width: 768px) { 
.Area06 .PD_layout { position: absolute; top:125px; left:0px;}
.Area06 .PD_layout ul { width: 80%; }


 }
 @media screen and (max-width:767px){
.Area06 { position: relative; width: 100%; height:300vw; padding-bottom: 10vw;  }
.Area06 .PD_layout { position: absolute; top:15vw; left:0px;}
 }


 

.Area_danji .danji_box ul li .activityImg {
    position: absolute;
    width: 16%;
    top: 24%;
    left: 3%;
}
.Area_danji .danji_box ul li .content p {
    padding: 0.2em 1em 0 2.2em;

}
@media screen and (max-width:767px){
  .Area_title { position: relative; margin-bottom: 5vw; }
  .Area_title img { margin: 0 auto; width: 100%; }  
}



.swiper-pagination-bullet { margin: 0 3px;}

@media screen and (min-width: 768px) {
.Area_PD .swiper-container { padding-bottom: 5vw;}
.Area_PD .sw1 .swiper-pagination  {width: 960px; left: 50%; transform: translateX(-50%); top: 529px;}
.Area_PD .sw2 .swiper-pagination  {width: 960px; left: 50%; transform: translateX(-50%); top:386px;}
.Area_PD .sw3 .swiper-pagination  {width: 960px; left: 50%; transform: translateX(-50%); top:571px;}
.Area_PD .sw4 .swiper-pagination  {width: 960px; left: 50%; transform: translateX(-50%); top:571px;}
.Area08 .one .swiper-pagination  {width: 1000px;  left: 50%; transform: translateX(-50%); top:419px;}
.sale .swiper-pagination  {width: 1000px;  left: 50%; transform: translateX(-50%); top:419px;}
.two .swiper-pagination  {width: 1000px;  left: 50%; transform: translateX(-50%); top:419px;}
.three .swiper-pagination  {width: 1000px;  left: 50%; transform: translateX(-50%); top:419px;}
 }
 @media screen and (max-width:767px){
.Area_PD .sw1 .swiper-pagination  {width: 100%; left: 50%; transform: translateX(-50%); top:54vw;}
.Area_PD .sw2 .swiper-pagination  {width:100%; left: 50%; transform: translateX(-50%); top:40vw;}
.Area_PD .sw3 .swiper-pagination  {width:100%; left: 50%; transform: translateX(-50%); top:46vw;}
.Area_PD .sw4 .swiper-pagination  {width:100%; left: 50%; transform: translateX(-50%); top:46vw;}
.Area08 .one .swiper-pagination  {width: 100vw;left: 50%; transform: translateX(-50%); top:59vw;}
.sale .swiper-pagination  {width: 100vw;left: 50%; transform: translateX(-50%); top:57vw;}
.two .swiper-pagination  {width: 100vw;left: 50%; transform: translateX(-50%); top:57vw;}
.three .swiper-pagination  {width: 100vw;left: 50%; transform: translateX(-50%); top:57vw;}
 
 }



/**延遲載圖用**/
.mainArea .articleList * img.lazy {display:none;} 



/* shyu */


/*01-攻略*/
.Area_promote { position:relative;  margin-bottom: 80px;  z-index:1; }
.Area_promote .promote_wrap { display: grid; grid-template-columns: repeat(2, 1fr);}
.Area_promote .promote_wrap .promote {  height: fit-content;}
.Area_promote .promote_wrap .promote:nth-child(odd) { margin-top: -50px;}
.Area_promote .promote_wrap .promote:nth-child(even) { margin-top: 75px;}
.Area_promote img { max-width: 100%; }


@media screen and (max-width:767px){
  .Area_promote { position:relative; height:100%; width: 95%; margin: 0 auto 5vw; gap: 2.5vw; }
  .Area_promote .promote_wrap .promote:nth-child(odd) { margin-top: -2.5vw;}
  .Area_promote .promote_wrap .promote:nth-child(even) { margin-top: 3.75vw;}
}

.Area_guide { position:relative; margin-bottom: 80px; }
.Area_guide .bg img { position: absolute; top: -50px; left: 0; width: 100%; height: auto; z-index: -1; pointer-events: none; }

@media screen and (max-width:767px){
  .Area_guide { margin-bottom: 5vw; width: 95%; }
  .Area_guide .bg img { top: -2.5vw; }
}

/*03-主打商品*/
.Area_TopPD {
  margin-bottom: 80px;
}

.Area_TopPD .toppd_item:not(:last-child) {
  margin-bottom: 20px;
}

/* 錨點 */
.Area_anchor {
  margin-bottom: 80px;
}

.Area_anchor .anchor_wrap {
  display: flex;  
  width: 100%;  
}

.Area_anchor .anchor_item {
  display:flex;
  justify-content: center;  
}
.Area_anchor .anchor_item img {
  max-width: 170%;
  height: auto;
}




@media screen and (max-width:767px){
  .Area_hot {
    padding: 0vw;
    margin-bottom: 2.5vw;
    width: 100%;
  }

  .Area_hot .PD_layout {  
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    width: 100%;
    margin-top: 1.5vw;
    padding: 0 1vw;
  }  
}




.swiper-pagination-bullet {
  background: transparent;
  border: 1px solid #f46666;
}

.swiper-pagination-bullet-active {
  opacity: 1;
  background: #f46666;
}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled, .swiper-button-next, .swiper-button-prev {
  color: #f0bff2;
}


@media screen and (max-width:767px){
  .Area04 { position: relative; width: 100%; margin-bottom:7vw;}

 }

.Area_danji_wrap {
  margin-bottom: 80px;
}

 .Area_danji_wrap .layout_bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);  
  z-index: -1;
  pointer-events: none;
  /* width: 100%; */
  /* height: 100%; */
 }

 @media screen and (max-width:767px){

  .Area_danji_wrap {
    margin-bottom: 5vw;
  }

  .Area_danji_wrap .layout_bg {
    position: absolute;
    top: -5vw;
    left: 50%;
    transform: translateX(-50%);  
    z-index: -1;
    pointer-events: none;
    width: 150%;
    height: auto;
   }
 }

 
/* logo */
.Area_logo {  
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 auto 80px;  
}

.Area_logo .logo_wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  flex: 1
}

@media screen and (max-width:767px){
  .Area_logo {  
    display: flex;
    align-items: center;    
    margin: 5vw auto 20vw;
    place-items: center; 
    width: 95%;   
    gap: 3vw;
  }

  .Area_logo .logo_title {
    width: 30%;
  }

  .Area_logo .logo_wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1vw;
    flex: 1
  }
}

.Area_Promote {
  margin-bottom: 150px;
  margin-top: 140px;
}

.Area_Promote .PD_wrapper{
   background-color: transparent;
}

.Area_Promote .PD_wrapper .PD_slide{   
   padding:  0.5rem 1rem;
}

.Area_Promote .PD_wrapper .PD_slide span,
.Area_Promote .PD_wrapper .PD_slide del{
   color: white;
}

.Area_Promote .PD_layout[data-pd-h3="5"] .PD h3 span {
   color: white;
   background-color: #000000;
}

.Area_Promote .PD_wrapper .PD_slide .money,
.Area_Promote .PD_wrapper .PD_slide .Price {
   color: #d8343f;
}

.Area_Promote .PD_wrapper .PD_slide .PD_img{
   margin-bottom: 1rem;
}

.Area_Promote .PD_layout .PD_slide h4 {  
  color: white;
}

.Area_Promote .PD_layout[data-pd-h3="5"] .PD h3 span {  
  color: white;
  background-color: #8862a8;
}

.Area_Promote .PD_layout .PD_into {
  padding: 0 1rem 1rem
}

.Area_Promote .PD_layout .PD p del {
  color: white;
}

.Area_Promote .Promote_bg {
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  width: 110%;
}

.Area_Promote .Promote_bg img {
  width: 100%;  
  object-fit: cover;
}

@media screen and (max-width:767px){
  .Area_Promote {
    margin-bottom: 1rem;
    margin-top: 1rem;
  }

  .Area_Promote .PD_wrapper .PD_slide{   
   padding:  0rem 0.2rem;
}

  .Area_Promote .Promote_bg {
    position: absolute;
    top: -5vw;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    width: 100%;
    height: 105%;
  }

  .Area_Promote .Promote_bg img {
    width: 100%;  
    height: 100%;
    object-fit: fill;
  }
}


/* Area_hotPD */
.Area_hotPD {
  padding: 60px 0 10px;
  margin-bottom: 20px;
}

.Area_hotPD .layout_bg {
  width: 100%;  
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.Area_hotPD .layout_bg img {
  width: 100%;  
  grid-column: 1/-1;
  grid-row: 1/-1;  
}

.Area_hotPD .Area_swiper {
  width: 120%;
  padding-bottom: 40px;
  margin: 0 -94px 0;
}

.Area_hotPD .swiper-pagination {
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
}

.Area_hotPD .PD_layout .PD_slide {
  background : white;
  border-radius: 0px;
}

@media screen and (max-width:767px){
  .Area_hotPD {
    padding: 10vw 0 10px;
    margin-bottom: 0vw;
  }

  .Area_hotPD .layout_bg {
    width: 114%;    
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    pointer-events: none;
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }

  .Area_hotPD .Area_swiper {
    width: 100%;
    padding-bottom: 5vw;
    margin: 0;
  }

}


/* Area_hotPD */


@media screen and (max-width:767px){
  .Area_hotPD .layout_bg {
    width: 114%;    
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    pointer-events: none;
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
}


.Area_danji .danji_box ul li .activityImg img {
  object-fit: contain;
}

@media screen and (max-width:767px){
  .Area_danji .danji_box ul li .activityText .gifts {
    font-size: 1rem;    
  }
}


.count-clock {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  position: relative;
}
.count-clock .countdown_bg {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  z-index: -1;
  height: auto
}

@media screen and (max-width:767px){
  .count-clock .countdown_bg {
    position: absolute;
    top: -10vw;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 100%;
    z-index: -1;
    height: auto
  }
}

.count-clock .time_wrap {
  /* position: absolute; */
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 70px
}

.count-clock .time {
  color: white;
  font-size: 2.5rem;
  font-weight: bolder;
  padding: 20px 43px; 
}

@media screen and (max-width:767px){
  .count-clock {
    gap: 10px;
  }

  .count-clock .time_wrap {  
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 10vw;
  }

  .count-clock .text {
    font-size: 1.25rem;
  }
  .count-clock .time {
    font-size: 5vw;
    padding: 0vw 7vw 5vw; 
  }
}


.Area04_01_bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;

  img {
    width: 100%;    
    object-fit: cover;
  }
}

.reverse_wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
 
}

@media screen and (max-width:767px){
  .reverse_wrap {
    flex-direction: column-reverse;        
  }
}



  #scene {
 position: absolute; width: 400px;  height: 400px; left: 50%; transform: translateX(-50%);
  }

  .ball01{margin: 485px 0 0 490px; position: absolute;}
  .ball02{margin: 726px 0 0 780px; position: absolute;}
  .ball03{margin: 638px 0 0 -330px; position: absolute;}

  @media screen and (max-width:767px){
    .bottom{ width: 90vw;}
  .ball01{margin: 78vw 0 0 6vw; position: absolute;}
  .ball01 img {width: 5vw;}
}


  /* 地面 */
  #ground {
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, transparent, #c8a850, #f0d060, #c8a850, transparent);
    border-radius: 2px;
    box-shadow: 0 0 20px rgba(200, 168, 80, 0.6), 0 0 60px rgba(200, 168, 80, 0.2);
    margin-bottom: 60px;
    position: relative;
  }

  /* 地面反光 */
  #ground::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 20px;
    background: radial-gradient(ellipse, rgba(200, 168, 80, 0.15) 0%, transparent 70%);
  }

  /* 球的容器（控制位置） */
  #ball-wrapper {
    position: absolute;
    bottom: 64px; /* 地面以上 */
    left: 50%;
    transform: translateX(-50%);
  }



  /* 陰影（在地面上） */
  #shadow {
    position: absolute;
    bottom: 56px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 14px;
    background: radial-gradient(ellipse, rgba(0,0,0,0.6) 0%, transparent 70%);
    border-radius: 50%;
    will-change: transform, opacity;
  }