@charset "utf-8";

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

/*隱鑶*/

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

 .Area_title { position: relative; margin-bottom: 50px; }
 .Area_title01 { position: relative; margin-bottom: 0px; height: 240px; z-index: -1;}
 .Area_title02 { position: relative; margin-bottom: 0px; height: 160px; z-index: -1;}
 .Area_title03 { position: relative; margin-bottom: 0px; height: 160px; z-index: -1;}
 .sw_title { position: relative; margin-bottom: 0px; height: 160px; z-index: -1;}
 .Area_title img { margin: 0 auto; }
 .Area01 .f-c {gap: 40px;margin-bottom: 40px;}
 .Area01-2{height: 360px;}
  .Area01-2 img{width: 75%;}
.Area04 { position: relative; margin-bottom: 80px; }
.Area04 a{width: 250px; margin: 20px;}
.Area04 a img{width:100%}
.gifts span {color:#fff8ba;}
.Area_danji .danji_box ul li img {
    width: 95%;
    aspect-ratio: 960/282;
}
    @media screen and (max-width:767px){
      .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;}
      .f-c img {width: 100%;}

      .Area01-2 {height: 31vw; width: 98vw;}
      .Area01-2 img{ width: 100%}
      .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: 20vw; position: relative; z-index: -1;}
      .Area_title02{height: 15vw; position: relative; z-index: -1;width: 90vw;margin: 0 auto  ;}
      .Area_title03{height: 20vw; position: relative; z-index: -1;width: 90vw;margin: 0 auto  ;}
      .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;}
      .Area04 a{width: 32vw;}
      .Area04 a img{width:100%}
      .Area_danji .danji_box ul li img {
    width: 100%;
    aspect-ratio: 960/282;
}
    }

/*全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 {
    color: #fff !important;
}
.Area_Textwhite .btn_reg .content p {
    color: #fff !important;
}

/*PC背景*/
@media screen and (min-width:767px){
 .bg_re { z-index:-8; position:absolute; top:1510px; left:0; width:100%; height:100%; background-repeat:repeat-y; background-position: center top; pointer-events:none; }
 .bg_00 { opacity: 0; 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:-3; position:relative;  margin: 0 ;left: 50%;transform:translateX(-50%);width:2000px; height:9000px; background-repeat:no-repeat; background-position:center top;  }
 .bg_02  {z-index:-2; position:absolute; top: 0px;  margin: 0 ;left: 50%;transform:translateX(-50%);width:2000px; height:2000px; background-repeat:no-repeat; background-position:center top;  }

  .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: 1000px; }
.Area_top .main { position:absolute; top:30px; left:50%; translate: -50% 0%;  }
.Area_top .toppd { width: 100%; position:absolute; top: 490px; left: 52%; translate: -50% 0%; }
.Area_top .light { position:absolute; top:31px; left:80px; width:267px;  }
.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:94vw; 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:47vw; left: 50%; translate: -50% 0%; width: 80%; 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:1380px; margin-top: 160px;}
.Area02 .layout_bg img { max-width: 100%;  }
.Area02 .layout_bg { scale: 0.9; }
.Area02 .f-c a{width: 40%; margin: 20px;}
.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:460vw; margin-top: 20vw;}
 .Area02 .PD_layout { position: absolute; top: 7vw; left:0vw ;}	 
 .Area02 .f-c a{width: 90vw; margin: 5vw;}
.Area02 .f-c img{width: 100%;}
 }


/*03-登記*/
.Area03 { position: relative; height:660px; }
.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;        
  }
}