@charset "utf-8";

/*基本*/
body {
  margin: 0;
  padding: 0;
  background-image: linear-gradient(to right, #000000 0%, #141416 37%, #1e1e1d 47%,#1a1a19 100%);  
}

/*隱鑶*/
.for_pc {}
.for_phone, .for_m { display:none !important;}
    @media screen and (max-width:767px){
      .for_pc { display:none !important;}
      .for_phone, .for_m { display: inherit !important;}
    }

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

.danji_box ul li .activityText p span {
    color: #ab1e0d !important;
}
.Area_Textwhite .btn_reg .content p span {
    color: #ab1e0d !important;
}
/*PC背景*/
@media screen and (min-width:767px){
 .bg_00 { z-index:-8; position:absolute; top:0px; left:0; width:100%; height:100%; background-repeat:repeat-y; 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:-8; position:absolute; top:0px; left:0; width:100%; height:100%; background-repeat:repeat-y; background-position: center top; pointer-events:none; }
 .bg_03 { z-index:-8; position:absolute; bottom:0px; left:0; width:100%; height:423px; background-repeat:no-repeat; background-position: center top; pointer-events:none; }
 /* .bg_04 { z-index:-8; position:absolute; top:4500px; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none; } */
 /* .bg_05 { z-index:-8; position:absolute; top:6000px; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none; } */
 /* .bg_06 { z-index:-8; position:absolute; top:7500px; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none; } */
/*
 .bg_07 { z-index:-8; position:absolute; top:9000px; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none; }
 .bg_08 { z-index:-8; position:absolute; top:10500px; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none; }
 .bg_09 { z-index:-8; position:absolute; top:12000px; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none; }
 .bg_10 { z-index:-8; position:absolute; top:13500px; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none; }
 .bg_11 { z-index:-8; position:absolute; top:15000px; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none; }
 .bg_12 { z-index:-8; position:absolute; top:16500px; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none; }
 .bg_13 { z-index:-8; position:absolute; top:18000px; left:0; width:100%; height:100%; 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; }
    }


/*標題*/
.title { position: relative;  margin:20px auto; z-index:2; }
    @media screen and (max-width:767px){
      .title {position: absolute; top:1vw; left: 0vw; width: 100% }
      .title img { width:80% }
    }


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

@media screen and (max-width:767px){
  .Area_top { position:relative; height:100vw; width: 100%; }
  .Area_top  .main {position: absolute; top:5vw; left:50%;  translate: -50% 0%; z-index: 1; width: 100%;}
  .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:37vw; left: 53%; translate: -50% 0%; width: 60%; z-index: 1}
  .Area_top  .toppd img {max-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: 0vw 2vw 0;}
  .Area_top .contral img{width: 15vw;}
  .Area_act {height: 56vw;}
  .sw { width: 95vw;margin-left: 2.5vw;}
  .sw0 { width: 100vw;}
 }







/*Area_02夏日熱搜*/
.Area02 { position:relative; height:590px; }
.Area02 .layout_bg img { max-width: 100%;  }
.Area02 .layout_bg { scale: 0.9; }
@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:160vw;}
 .Area02 .PD_layout { position: absolute; top: 7vw; left:0vw ;}	 
 }


/*03-登記*/
.Area03 { position: relative; height:879px; }
.Area03 .layout_bg { position: absolute; top:0; left:-390px; z-index:-1;  pointer-events: none; }
@media screen and (max-width:767px){
  .Area03 { position: relative; width: 100%; height:100vw;  padding-bottom:0%; }
  .Area03 .title {padding-top:0;width: 81%; left: 10vw;  }	
  .Area_danji { width:96%;  }
  .Area03 .Area_danji.first {  position: absolute; top:23vw; left:2%;}	 
  .Area03 .Area_danji.second {  position: absolute; top:60vw; left:2%;}	 
}





/*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_title { position: relative; margin-bottom: 50px; }
 .Area_title img { margin: 0 auto; }

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



.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: flex; flex-direction: column; gap: 20px; }
.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 img { max-width: 100%; }
}


/*02-登記*/
.danji { 
  margin: 0 auto 80px;
}
.danji .text { 
  margin: 0 0 50px 0;
}

@media screen and (max-width:767px){
  .danji { 
    margin: 0 auto 5w;
  }

  .danji .text { 
    margin: 0 0 3vw 0;
  } 
}


/*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;
}



/* 04-4品公版 */
.Area_hot {
  padding: 80px 0 0px;
  margin-bottom: 120px;
}

.Area_hot .layout_bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);  
  z-index: -1;
  pointer-events: none;
}

.Area_hot .PD_layout {
  scale: 0.95;
}

.Area_hot .PD_layout .PD_slide {
  background: #fff;
  border-radius: 0px;
}

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

  .Area_hot .layout_bg {
    position: absolute;
    top: 0vw;
    left: 51%;
    transform: translateX(-50%);  
    z-index: -1;
    pointer-events: none;
    width: 95%;
  }

  .Area_hot .Area_swiper {
    width: 100%;
  }


  .Area_hot .PD_wrapper {
    width: 100%;
  }

  .Area_hot .PD_slide {
    flex-grow: 1;
  }

  /* 錨點 */
  .Area_anchor {
    margin-bottom: 5vw;
  }
  .Area_anchor .anchor_wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 70%;
    margin: 0 auto;
    gap: 0px;  
  }
  .Area_anchor .anchor_item img {
    width: 170%;
    height: auto;
  }

}

.Area04 { position: relative; margin-bottom: 80px; }
.Area04_swiper{position: relative; width: 1220px; margin-bottom: 60px;}
.Area04_swiper .box{width: 1220px; overflow: hidden;}
.Area04_swiper .box li{ margin: 0 10px; min-width: 300px;}
.Area04 .layout_bg {position: absolute; width: 150%; bottom: -100px; left: 50%; transform: translateX(-50%); z-index: 0; pointer-events: none;}
.Area04 .layout_bg img {width: 100%;}
.Area04 .PD_layout {margin: 40px auto; width: 1220px; overflow: hidden; margin-left: 0px; padding-bottom: 40px;}
.Area04 .PD_layout ul{background-color: rgba(0, 0, 0, 0); }
.Area04 .PD_layout ul{position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; margin: 0; padding: 0; list-style: none; width: 100%; -webkit-box-sizing: content-box; box-sizing: content-box; background-color: rgba(0,0,0,0); grid-gap: 0;}
.Area04 .PD_layout li{background-color: #fff;border-top: solid 1px #d1d1d1; border-right: solid 1px #d1d1d1; }
.Area04 .PD_layout .PD_slide {min-width: unset!important; flex-shrink: 0; background-color: transparent; border: none;}
.Area04 .PD_layout .PD_slide .PD_into {display: none;}

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

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

@media screen and (max-width:767px){
  .Area04 { position: relative; width: 100%; margin-bottom:7vw;}
  /* .Area04_swiper { position: relative; width: 100%; padding-bottom:19vw;} */
  .Area04 .PD_layout { position: relative; top:0vw; left:0vw;  margin-top: 0; width: 100%;margin-left:auto }
  .Area04 .PD_layout ul.PD_wrapper{justify-content: center; }
  .Area04 .PD_layout li{ }
  .Area04_swiper .box{width: 100vw; overflow: hidden;}
  .Area04_swiper .box li{ margin: 0 10px; min-width: 300px;}
  .Area04 .PD_layout ul.PD_wrapper{position: relative; display: -webkit-box; display: -ms-flexbox; justify-content: flex-start; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; margin: 0; padding: 0; list-style: none; width: 100%; -webkit-box-sizing: content-box; box-sizing: content-box; background-color: rgba(0,0,0,0); grid-gap: 0;}
  .Area04 .PD_layout .PD_slide {min-width: 45% !important; background-color: transparent;}
  .Area04 .layout_bg {position: absolute; bottom: 0vw; left: 50%; transform: translateX(-50%); width: 100%; z-index: 0; pointer-events: none;}
  .Area04 .layout_bg img {height: 100%;}
 }

.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;
   }
 }

 

/* danji_btn */
.Area_btn {  
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 auto 50px;  
}

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

.Area_btn .btn_item img {
  max-width: 100%;
  height: auto;
}

@media screen and (max-width:767px){
  .Area_btn {  
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0 auto 20px; 
    width: 90% 
  }
  

  .Area_btn .btn_wrap {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
    flex: 1
  }
}

/* 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: 80px;
}

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

.Area_Promote .PD_wrapper .PD_slide{
   background-color: #fae4af;
   border-color: #000000;
   padding:  0.5rem 1rem;
}

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

.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;
}

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


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

.Area_hotPD .layout_bg {
  width: 105%;
  /* height: 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 */
.Area_hotPDWrap {
  padding: 150px 0 10px;
  margin-bottom: 200px;
  max-width: 1170px;
}

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

.Area_hotPDWrap .layout_bg img {
  width: 100%;  
}

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

  .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;
}
.count-clock .text {
  color: white;
  font-weight: bolder;
  font-size: 2.75rem;
}
.count-clock .time {
  color: #d49a53;
  font-size: 2.5rem;
  font-weight: bolder;

  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0 20px  
}

@media screen and (max-width:767px){
  .count-clock {
    gap: 10px;
  }
  .count-clock .text {
    font-size: 1.25rem;
  }
  .count-clock .time {
    font-size: 1rem;
  }
}