@charset "utf-8";

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

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


/*PC背景*/
@media screen and (min-width:767px){
 .bg_top_01 { z-index:-8; position:absolute; top:0px; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none; }
 .bg_01 { z-index:-7; position:absolute; top:0px; left:0; width:100%; height:1317px; background-repeat:no-repeat; background-position: center top; pointer-events:none; }
 .bg_02 { z-index:-8; position:absolute; top:1317px; 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:950px; }
.Area_top .main { position:absolute; top:50px; left:270px;  }
.Area_top .light { position:absolute; top:31px; left:80px; width:267px;  }
.Area_top .toppd { width:960px; height: 551px;  position:absolute; top:373px; left:130px; scale: 0.9; }

  @media screen and (max-width:767px){
  .Area_top { position:relative; height:105vw; 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: absolute; top:40vw; left: 0; width:100%; z-index: 1}
	  
 }


/*01-攻略*/
.Area_act { position:relative; margin-bottom: 80px;  z-index:1; display: flex; flex-direction: column; gap: 30px;}
.Area_act img { max-width: 100%; }

 @media screen and (max-width:767px){
  .Area_act { position:relative; height:100%; width: 95%; margin: 0 auto 5vw; gap: 2.5vw; }
  .Area_act img { max-width: 100%; }
  /* .Area_act .act { position: absolute; top:0; left: 2%; width: 96%;  pointer-events: none;  z-index:1; } */
 }



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



/*04-主打品 6品*/
.Area04 { position: relative; height:1153px; }
@media screen and (max-width: 767px){
.Area04 {position: relative; width:100%; height:100%; }
.Area04 .PD_layout { position: absolute; top:21vw; left:0vw ;  }	 	
}



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

.Area_hot {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0px;
  margin-bottom: 80px;
}

.Area_logo {  
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0px;
  margin: 80px auto 150px;
  place-items: center;
}
@media screen and (max-width:767px){
 .Area_hot {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0px;
    margin-bottom: 10vw;
    width: 95%;
    margin: 0 auto 5vw;
  }

  .Area_logo {  
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0px;
    margin: 5vw auto 20vw;
    place-items: center;
    width: 65%;
    
    gap: 10vw;
  }
}