@charset "utf-8";
/* CSS Document */

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

/*全BOX版面*/
.WRAPPER { z-index:0; position: relative; display:block; margin: 0 auto; padding:0; overflow:hidden; width:100%; min-width:1220px; text-align:left; font-family:"微軟正黑體","Microsoft JhengHei",Helvetica;}
.WRAPPER img { border:0px; vertical-align:top;}
.WRAPPER a { text-decoration:none; -webkit-tap-highlight-color: transparent}
/*預設清單樣式*/
.Area .list_00 ul {display:inline-block;}
.Area .list_00 li {list-style:none;float:left;overflow: hidden;}
	@media screen and (max-width:767px){
		.WRAPPER { min-width: inherit; min-height:100vh; overflow:hidden; background-size: 100%;}
		.WRAPPER img {  width:100%;  height:auto;}
	}


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

  @media screen and (min-width:768px){
    .Area_txt {margin:0 auto 0px!important; }
    .Area_txt img {width:860px!important; }	  
  }
  @media screen and (max-width:767px){
      .Area_txt {z-index:125;width:100% ;margin-bottom:0vw; }
      .Area_txt img {width:100%;}
  }

  @media screen and (min-width:768px){
    .PD_layout .PD img {border-radius:10px !important;}
    }
    @media screen and (max-width:767px){
      .PD_layout .PD img {border-radius:3vw !important;} 
    }

/** 入稿區基本 **/
.content_Area { position:relative; display:inline-block; margin:0px auto 0px auto; padding: 0px 0px 0px 0px; width:1220px;}
.buttonAera_more { position: absolute; top:15px; right:15px; padding-left:17px; padding-right:10px;  border-radius:60px; width:90px; height:40px; background-color: #666; text-align:center;}
.buttonAera_more a { display:block; padding-top:5px; font: bold 24px/29px Century Gothic; color:#fff; text-decoration: none; letter-spacing:-0.05em;}
.buttonAera_more:hover {background-color: #000;}
.buttonAera_more .btnGO { margin:5px; float:right; width:20px ;height:20px;}


/*PC背景*/
@media screen and (min-width:768px){
.bg_color { z-index:-60; position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:repeat-y; background-position: center top; pointer-events:none;}
.bg_01 { z-index:-46; position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none;}
/*.bg_03 { z-index:0; position:absolute; top:952px; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none;}*/
.bg_04 { z-index:-50; position:fixed; top:0px; left:0; width:100%; height:100%; background-repeat:repeat-y; background-position: center top; pointer-events:none;}

.bg_repeat_01 { z-index:-50; position:absolute; top:1000px; left:0; width:100%; height:100%; background-position:center 0px; background-repeat:repeat-y; transition:0.1s linear; pointer-events:none;/*mix-blend-mode: screen;*/}
}
@media screen and (max-width:767px){
   .bg_color { display: none;}
   .bg_01 { display: none;}
   .bg_03 { z-index:0; position:absolute; top:187vw; left:0; width:100%; height:100%;background-size:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none;}
   .bg_04 { z-index:0; position:fixed; top:0px; left:0; width:100%; height:100%; background-repeat:repeat-y; background-position: center top; pointer-events:none;}
   .mo_bg { z-index:-46; position:absolute; top:0vw; left:0; width:100%; height:100%;background: url(mo_bg.jpg?t=1756721539916)center top repeat-y;  background-position: center top; pointer-events:none;}
   .m_bg{ z-index:-1; position:fixed; bottom:0; left:0; width:100%; height:100%; background-repeat:repeat-y; background-position: center bottom; pointer-events:none;} .m_bg img {  width:100%;}
   .m_deco { z-index:-10; position:absolute; top:0; left:0; width:100%; height:100%; background-position:center 0px; background-repeat:repeat-y; transition:0.5s linear;background-size:100%; pointer-events:none;}	
	
}



/*版頭區塊*/
@media screen and (min-width:768px){
	.Area_title  {  position: relative ; height: 750px;}
	.title {position:absolute;z-index: 5;left:368px;top:60px;}
	.title img {width:583px!important;}

	/*裝飾*/

    .Area_title .coffee {z-index:1;position:absolute; left: 263px; top: 253px; width: 687px;height:757px ;}
    
    .Area_title .pd{z-index: 50;position: absolute;width: 80%;top: 423px;left: 124px;}
    .Area_title .date {z-index: 4;position: absolute;top: 109px;left: 274px;}
    
  }
@media screen and (max-width:767px){
	  .Area_title { height: 100vw;}	
	  .title {z-index: 5;position:absolute;left:23vw;top:3vw;width:64%;}
  	

  	.mo_top {z-index: 0;position:absolute;left:0vw;top:0vw;width:100%;}
    /*裝飾*/

    .Area_title .coffee { z-index: 120; position: absolute; left: 14vw;top: 23vw;width: 72%;height: 50vw;}
	  /*版頭品*/
    .Area_title .pd{z-index: 1;position:absolute ;width: 90%;top: 45vw;left: 4vw;}
    .Area_title .date { z-index: 4;position: absolute;left: 13vw;top: 8vw;width: 13%;}
  }

  /*副標輪播*/
  .Area_title .title02{z-index: 150;position:absolute;left: 263px; top: 226px; width: 687px;height:757px ;}
 
  .Area_title .title02 .Area_swiper_box {width: 100%;height: auto;} 
  .Area_title .title02 .Area_swiper_box ul{display: flex;grid-gap: 0;padding: 0px;height: auto;} 
  .Area_title .title02 .Area_swiper_box img{width: 100%;} 
  .Area_title .title02 .Area_swiper_box .PD_layout {position: static; margin: 0;}
  .Area_title .title02 .Area_swiper_box .PD_layout li{background-color: #0000;border-radius:0;}
@media screen and (max-width:767px){
  .Area_title .title02 {z-index: 150;position: absolute;margin: 0 auto;left: 14vw;top: 21.5vw;width: 72%;height: 50vw;}
  .Area_title .title02 .Area_swiper_box{width: 100%;height: auto;}
  .Area_title .title02 .Area_swiper_box ul{display: flex;height: auto;grid-gap: 0;padding: 0vw;}
  .Area_title .title02 .Area_swiper_box img{width: 100%;} 
}

  /*版頭輪播品*/
@media screen and (min-width:768px){
  .toppd {z-index: 120;position:relative;top: 0px;left: 0px;width: 1220px;height: auto; margin-bottom: 24px!important;}
  .toppd .toppd_bg {z-index: 1;position:absolute;top: -90px;left: 0px;width: 1220px;height: auto;}
}
  @media screen and (max-width:767px){
    .toppd {z-index: 120;position: absolute;width: 100%;height: 15vw;margin: 0 auto;left:0vw;top: 0vw; margin-bottom: 64vw!important; margin-top: -23vw!important;}
    .toppd .toppd_bg {z-index: 1;position:absolute;top: -11.5vw;left: 0vw;width: 100%;height: auto;}
  }


  @media screen and (min-width:768px){
    .Area_coupon {z-index: 1;position:absolute;top: 0px;height: auto ;margin-bottom : 70px !important;overflow: hidden;}
    .Area_coupon .coupon_box {top: 0px;width: 960px;margin:0 auto ;height: auto;}
  }
    @media screen and (max-width:767px){
      .Area_coupon {z-index: 121;position:absolute;top: 0vw;height: auto ;margin-bottom : 10vw !important;overflow: hidden;}
      .Area_coupon .coupon_box {width: 100%;height: auto;margin: 0 auto ;left:0vw;top: 0vw;}
    }
  


/*5BTN(線上入搞)*/
@media screen and (min-width:768px){
  .Area_event_1 { position: relative; height: auto; margin-bottom : 70px !important;}
  .Area_event_1 .layout_activity ul {width:80%;margin:0 auto; padding:0% 3% 0% ;grid-gap: 0px;}
  .Area_event_1 .layout_activity ul li {padding:0%;margin: 0 ;}
  
  }
  
  @media screen and (max-width:767px){
  .Area_event_1 {height: auto ;margin-bottom: 10vw !important;}
  .Area_event_1 .layout_activity{width:100%;margin:0;padding:0;margin-bottom:0; }
  .Area_event_1 .layout_activity ul {width:96%!important;margin:0 auto;padding:0%;grid-gap:0px!important;}
  .Area_event_1 .layout_activity ul li {margin: 0 auto;padding:0%;}
  
  }


  
/*Area_bnx1(線上入搞)*/
@media screen and (min-width:768px){
  .Area_bnx1 { position: relative; height: auto; margin-bottom : 70px !important;}
  .Area_bnx1 .layout_activity ul {width:80%;margin:0 auto; padding:0% 3% 0% ;grid-gap: 0px;}
  .Area_bnx1 .layout_activity ul li {padding:0%;margin:0 -5px 0 ;}
  .Area_bnx1 .layout_activity ul li img {border-radius:20px ;}
  }
  
  @media screen and (max-width:767px){
  .Area_bnx1 {height: auto ;margin-bottom: 10vw !important;}
  .Area_bnx1 .layout_activity{width:100%;margin:0;padding:0;margin-bottom:0; }
  .Area_bnx1 .layout_activity ul {width:96%!important;margin:0 auto;padding:0%;grid-gap:0px!important;}
  .Area_bnx1 .layout_activity ul li {margin: 0 auto;padding:0%;}
  .Area_bnx1 .layout_activity ul li img {border-radius:3vw ;}
  }




/*作圖區*/
@media screen and (min-width:768px){
.Area_item  {}

.Area_item .box_all {width:1086px ;margin:0 auto ;}
.Area_item .layout_item .PD_slide .PD p del {position: relative;top: 0;left:0;color:#703e17;font-size: 0.8em;}
.Area_item .layout_item .PD p .Price {font-weight: 700;color:#703e17;font-size: 2.8em;}
.Area_item .layout_item .PD p {position: relative;height: 6em;font-size:1.0em;color:#703e17;}
.Area_item .layout_item ul {grid-gap: 30px;padding:0 ;}	
.Area_item .layout_item li {background: url("Area09_bg.png?t=1756721539916") center top / 100% no-repeat scroll;}	
.Area_item .layout_item {padding:0;width: 100%;}
.Area_item .layout_item .PD_slide {height:472px;}
.Area_item .layout_item .PD_slide .PD_into {width: 95%;position: absolute;left: 8px;top: 230px;text-align: center;}
.Area_item .layout_item .PD_slide .PD_img img {width: 90%;margin: 18px 0px 0px 18px;}
.Area_item .layout_item .PD_slide .PD_into h3 {position: relative;top: 0;max-height: 1.5em;font-family: Noto Sans CJK TC;font-weight: bold;font-size: 1.6em;line-height: 1.7em;color:#000;text-align: center;}
.Area_item .layout_item .PD_slide .PD_into h4 {font-size: 1.4em;color: #000;text-align: center;position: relative;top: 0;line-height: 1.2em;margin-bottom: 0;}
.Area_item .layout_item .PD_slide .PD:hover h4 { color:#000;}
.Area_item .layout_item .PD .PD_logo {position: relative;top: 0px;left: 19px;height: 9em;z-index: 90;border-radius: 26.5em !important;}
.Area_item .layout_item .PD .PD_logo img { padding: 6%; box-shadow: none; border: none; width: 150px; height: 150px;}	
.Area_item .layout_item .PD p .money {font-size: 35px;}
}
@media screen and (max-width:767px){
.Area_item {margin-bottom: 3vw;}
.Area_item .PD_layout.layout_item {padding: 0;}
.Area_item .PD_layout.layout_item ul {grid-gap: 0.6em;width: 100%;}
.Area_item .PD_layout.layout_item li {width:100%;height:70vw;left:0vw;background: url("Area09_bg.png?t=1756721539916") center top / 100% no-repeat scroll;}
.Area_item .PD_layout.layout_item .PD_slide .PD_img {margin-bottom: 3%;}
.Area_item .PD_layout.layout_item .PD_slide .PD_into {position: absolute;top:48vw;width: 100%;text-align:center;font-size: 0.7em;}
.Area_item .PD_layout.layout_item .PD_slide .PD_logo {position: absolute;left: 6.5vw;top: 0vw;height: 13vw;border-radius: 50%;display: block;z-index: 90;}
.Area_item .PD_layout.layout_item .PD .PD_logo::after { content:""; position: absolute; display:block; top: -7vw;left: 0;width:100%; height:100%; pointer-events:none; z-index: -1;}
.Area_item .PD_layout.layout_item .PD .PD_logo img {box-shadow: none;}
.Area_item .PD_layout.layout_item .PD_slide .PD_img img {width:89%;margin:6% 0% 0% 6%;box-shadow: unset;}
.Area_item .PD_layout.layout_item .PD_slide .PD_into h3 {max-height: 1.4em;font-size: 1.4em;line-height: 1.7em;margin: 0;color: #000;position: relative;text-align: center;}
.Area_item .PD_layout.layout_item .PD_slide .PD_into h4 {position: relative;font-size: 1.4em;color:#000;margin: 0;line-height: 1em;text-align: center;top:1vw;}
.Area_item .PD_layout.layout_item .PD_slide .PD p del {color: #703e17;z-index: 99;position: relative;font-size: 1em;}
.Area_item .PD_layout.layout_item .PD p {position: relative;height: 15vw;font-size: 1.1em;line-height: 2.8em;color:#703e17;}
.Area_item .PD_layout.layout_item .PD p .Price {font-weight: 700;color:#703e17;font-size: 2.2em;}
.Area_item .PD_layout.layout_item .PD p small {font-size: 1.4em;}	
}










/*公版背景*/
.box_txt .PD_layout ul { padding: 0; }	
@media screen and (min-width: 768px){
.box_txt {position: relative;display: flex;margin: 0 auto;width: 100%;height: auto;justify-content: center; z-index: 50; }
.box_txt img{width: 88%!important;padding: 0;}
}

@media screen and (max-width:767px){
.box_txt {position: relative;margin: 0 auto 1vw;width: 100%;z-index: 30;}
.box_txt img{width: 100%;}
}

/*公版背景*/
@media screen and (min-width: 768px){
.box_txt2 {position: absolute;margin: 0 auto;width: 100%;height: auto;}
.box_txt2 img{width: 62%;}
.box_txt3 {position: relative;margin: 0 auto;width: 100%;height: auto;}
.box_txt3 img{width: 64%;}
}

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

.box_txt2 {position: absolute;margin: 0 auto;width: 100%;padding: 0.7% 0;height: 15vw;}
.box_txt2 img{width: 100%;}
.box_txt3 {position: relative;margin: 0 auto;width: 100%;padding: 0% 0;height: 15vw;}
.box_txt3 img{width: 100;}
}




@media screen and (max-width:767px){
    .Area_danji { width: 96%}
}

/*登記贈品文案顏色*/
.Area_danji .danji_box ul li .activityText .gifts span { color: #ffe604;}  








/*間距*/
.Area_bottom { margin-bottom: 50px!important;}
@media screen and (max-width:767px){
  .Area_bottom { margin-bottom: 10vw !important;}
}

/*活動倒數*/
.TimerNick2 {display:inline-block; position:relative; top:15px; left:0;  height:80px; z-index:99; }
.TimerNick2 .FontStyle2 { display: inline-block; margin: 0 0 0 2px; padding: 0; border: 0; font:normal 45px/30px Arial; color: #fff;  letter-spacing: 0px; text-align: center;}
.TimerNick2 span { padding-left: 2px; font: 400 23px/48px "微軟正黑體","Microsoft JhengHei", Arial, Helvetica; letter-spacing: -0em; color:#fff}
	@media screen and (max-width:767px){
	.TimerNick2 {display:inline-block; width:100%; position: relative; top:-1vw; left:0; margin:0;  height:0; padding:2vw 0 6vw 0; overflow:hidden; text-align:center; background-size:100%;z-index:20;}
	.TimerNick2 .FontStyle2 { margin: 0; padding: 0; border: 0; font: lighter 6.5vw/5vw Arial; }
	.TimerNick2 span { padding-left:0; font:normal 4vw/5vw "微軟正黑體","Microsoft JhengHei", Arial, Helvetica; letter-spacing: -0.05em;}
	}



  

.Area_PD1 { background-color: #eeb610 }
@media screen and (min-width: 768px){
   .Area_PD1 {height:600px ; border-radius: 15px!important;margin:10px auto 70px !important; }
    }
    @media screen and (max-width:767px){
      .Area_PD1 { width: 96%; border-radius: 10px }
    }
  
.Area_PD2 { background-color: #0000 }
    @media screen and (min-width: 768px){
       .Area_PD2 { height: auto ;margin-bottom: 70px !important; }
        }
        @media screen and (max-width:767px){
          .Area_PD2 { width: 96%; border-radius: 10px ;height:auto ; margin-bottom:10vw !important;}
        }









@media screen and (max-width:767px){
  .danji { height: auto ;margin-bottom: 70px !important; }
}
@media screen and (max-width:767px){
  .danji { width: 100%; border-radius: 10px ;height:auto ; margin-bottom:10vw !important;}
  .danji .Area_danji { width: 96%; }
}




@media screen and (min-width: 768px){
.Area03  {width: 1220px!important;background-color: #58381d;border-radius:60px 60px 25px 25px !important;height:auto ;margin:150px auto 145px!important;}
.Area03 .title_box {position: relative;padding-top: 60px;}
.Area03 .title_deco {position: absolute;top: 30px;left: 930px;}
.Area03 .layout_BN {width: 70%;padding-bottom: 20px;}
.Area03 .layout_PD {width: 98%;}
.Area03 .Area03_bg {z-index: 0;position:absolute;top: 0;width:100%;height: 290px;background-repeat:no-repeat;background-position: center top;pointer-events:none;}
.Area03 .Area03_deco {z-index: 0;position:absolute;top:50px;width:100%;height: 100%;background-repeat:no-repeat;background-position: center top;pointer-events:none;}
.Area03 .date_bg {position: absolute;}
.Area03 .layout_topic1 {height: 100px;}
.Area03 .layout_topic1 .PD_time {position: relative;top: 0;left: 166px;font: bold 55px/100px "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;width: 33%;color: #59381d;}
.Area03 .layout_topic1 {text-align:center;}
.Area03 .layout_topic1 .PD_into {position: relative;top: -101px;left: 553px;text-align: center;}
.Area03 .layout_topic1 .PD_into h3 {font: bold 55px/83px "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;color: #59381d;}
 

.Area03 .box{height: auto;margin-bottom: 70px;}
.Area03 .box_all {height: 592px;}
.Area03 .Area_txt {position:absolute;margin:0 auto !important;top:-110px;width:100%!important; }
.Area03 .Area_txt img {width:860px!important; }	

.Area03 .Area_sectionTitle {z-index:100;  position: relative;width:1220px;top:55px;height:150px ;}
.Area03 .Area_sectionTitle ul {padding:0px;margin:0 auto 0;list-style: none;height: 0px!important;width:1220px;}
.Area03 .Area_sectionTitle ul li { background-color: transparent; pointer-events: none;}
.Area03 .Area_sectionTitle ul li h5 {top:0px;margin: 0;padding: 0;width: 100%;height: 88px;font: 41px/80px "微軟正黑體","Microsoft JhengHei",Helvetica;font-weight: bolder;/*font-style: italic;*/text-align: center;color:#fff;letter-spacing: 0px;overflow: hidden;/*text-shadow: 0px 0px 5px #000;*/}

}

@media screen and (max-width: 767px){
  .Area03 {width: 98%!important;background-color: #58381d ;border-radius:5vw !important;margin:20vw auto !important;}
  .Area03 .title_box {position: relative;padding-top: 8vw;}
  .Area03 .title_deco {position: absolute;top: 0;left: 78vw;width: 47%;}
  .Area03 .layout_BN {width: 100%;padding-bottom: 1vw;}
  .Area03 .layout_PD {width: 96%;padding-bottom: 2vw;}
  .Area03 .m_Area03_bg { z-index:0; position:absolute; top:0; left:0; width:100%; height:30vw; background-repeat:no-repeat; background-size: 100%; background-position: center top; pointer-events:none;}
  .Area03 .date_bg {position: absolute;}
  .Area03 .layout_topic1 {height: 10vw;}
  .Area03 .layout_topic1 .PD_time {position: relative;top: 0;left: 9.5vw;font: bold 24px/42px "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;width: 35%;}
  .Area03 .layout_topic1 .PD_into {position: relative;top: -10vw;left: 50vw;width: 46%;}
  .Area03 .layout_topic1 .PD_into h3 {font: bold 24px/34px "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;color: #59381d;}

  
  .Area03 .box{margin:0 auto 12vw!important;height: auto;width:96% ;}
  .Area03 .Area_txt {position:absolute;margin-bottom:0vw;top:-15vw;width:100% ; }
  .Area03 .Area_txt img {width:100%;}

  .Area03 .Area_sectionTitle {z-index:100;  position: relative;width:100%;top:0vw;height:15vw ;}
  .Area03 .Area_sectionTitle ul {padding:0;margin:0 auto 0;list-style: none;height: 0vw!important;width:100%;}
  .Area03 .Area_sectionTitle ul li { background-color: transparent; pointer-events: none;}
  .Area03 .Area_sectionTitle ul li h5 {margin:0 auto; padding:0%; top:0vw; width:100%; height: 12vw; overflow:hidden;/*font-style: italic;*/ font-weight:bold!important; font-size:1.6em; line-height:67px; text-align:center;color: #fff;/*text-shadow:3px 3px 7px #a5814e;background:url();*/background-repeat: no-repeat;background-size:100%;font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";}


}




  

  


/*暢銷咖啡榜*/
@media screen and (min-width:768px){
.Area_pd12 {width: 1220px!important;background-color: #ffcd4b;border-radius:60px 60px 25px 25px !important;height:100% ;margin:0px auto 70px!important;}
.Area_pd12 .title2 {padding-top: 25px;}
.Area_pd12 .layout_PD {width: 98%;padding-top:70px ;}
.Area_pd12 .Area_pd12_deco {z-index: 0;position:absolute;top: 0;width:100%;height: 290px;background-repeat:no-repeat;background-position: center top;}
.Area_pd12 .Area_txt {position:absolute;margin:0 auto 5vw!important;top:-110px;width:100%!important; }
.Area_pd12 .Area_txt img {width:860px!important; }	
}
@media screen and (max-width:767px){
  .Area_pd12 {width: 98%!important;background-color: #ffcd4b;border-radius:5vw !important;}
  .Area_pd12 .title2 {padding-top: 3vw;}
  .Area_pd12 .layout_PD {width: 98%;padding-top:8vw ;}
  .Area_pd12 .Area_pd6_deco_m { z-index:0; position:absolute; top:0; left:0; width:100%; height:30vw; background-repeat:no-repeat; background-size: 100%; background-position: center top;}
  .Area_pd12 .Area_txt {position:absolute;margin-bottom:0vw;top:-12vw;width:100% ; }
  .Area_pd12 .Area_txt img {width:100%;}
}


/*精品職人 世界咖啡 */
.Area_pd6 {width: 52%;border-radius:40px !important;height:auto ;margin-bottom:70px !important;}
.Area_pd6 .title2 {padding-top: 25px;}
.Area_pd6 .layout_PD {width: 100%;}
.Area_pd6 .Area_pd21_deco {z-index: 0;position:absolute;top: 0;width:100%;height: 290px;background-repeat:no-repeat;background-position: center top;}
@media screen and (max-width:767px){
  .Area_pd6 {width: 98%!important;border-radius:5vw !important;margin-bottom:7vw !important;}
  .Area_pd6 .title2 {padding-top: 3vw;}
  .Area_pd6 .layout_PD {width: 98%;}
  .Area_pd6 .Area_pd6_deco_m { z-index:0; position:absolute; top:0; left:0; width:100%; height:30vw; background-repeat:no-repeat; background-size: 100%; background-position: center top;}
}




/*茅點(線上入搞)*/
@media screen and (min-width:768px){
.Area01 { position: relative;z-index: 2;}	
.Area01 .layout_tag ul {width:1220px;margin:0 auto; padding:0 0 0 0; }
.Area01 .layout_tag ul li {padding:5px;margin:0 auto;}
.Area01 .layout_tag ul li img {width:80%;}
	
}
@media screen and (max-width:767px){
.Area01 .layout_tag{width:100%; height: auto; margin:0;padding:0; z-index: 5; margin-bottom:0vw;}
.Area01 .layout_tag ul {width:100% ;margin:0 auto;padding:0vw 0 0 0;}
.Area01 .layout_tag ul li {margin: 0%;}
.Area01 .layout_tag ul li img {width:100%;}
.Area01 .layout_tag .PD_layout[data-pd-col-phone="2"] ul {padding:0.5em ;}
	
}









/*熱銷大牌*/
.Area_topb{height:100%;z-index: 2;padding-bottom: 50px !important;}
.Area_topb .box{height: 100%;background-color:#2a2424!important;;border-radius: 20px; padding: 2% 2% 2% 2%;border: 1px solid #ffdd78;}

@media screen and (max-width:768px){
.Area_topb{height:100%;z-index: 2;padding: 0 0 0 0;padding-bottom: 5vw!important;/*background-image: url(mtopb_bg.png?t=1756721539916);background-repeat:no-repeat; background-size: 100%;overflow: hidden;*/ }
.Area_topb .bg {position: absolute;top: -14vw;left: 0;transform: translateX(0%);pointer-events: none;z-index:0;}	
}



/*頁簽公版 Area_page*/
.Area_page h3 { color: #fff; margin: 0; padding: 0}
  @media screen and (min-width:768px){ 
    .Area_page { overflow: hidden;} 
    .Area_page .PD_layout { width: 99%}
  }
  @media screen and (max-width:767px){
    .Area_page .PD_layout{ width: 99% ; overflow: hidden;} 

  }




.more_btn .PD_layout-btn li .PD h3 {color: #000000;background: #ffd78e;}
@media screen and (min-width:768px){ 
  .more_btn .PD_layout-btn{ padding: 0 0 4vw;}
    }
@media screen and (max-width:767px){  
  .more_btn .PD_layout-btn{ padding: 0 0 14vw;}
}






/*嚴選好物推薦*/
.Area.Area_8PD:nth-of-type(odd) .PD_layout.layout_8PD h3 {background-color:#8691fb;}
.Area.Area_8PD:nth-of-type(even) .PD_layout.layout_8PD h3 {background-color:#8691fb;}
@media screen and (min-width:768px){
.Area_8PD {margin-bottom: 0px;}
.Area_8PD .PD_layout.layout_8PD {height: auto; margin-bottom: 80px;}
.Area_8PD .PD_layout.layout_8PD h2 {position:relative; margin:0 auto; padding:0 2%; top:36px;left:0px; width:90%; height: 46px; overflow:hidden;font-style: italic;font-weight:bold!important; font-size:42px; line-height:46px; text-align:center;color: #fff;/*text-shadow:3px 3px 7px #741709;*/font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";}
.Area_8PD .PD_layout.layout_8PD ul {padding-top:111px;}
.Area_8PD .page { position: relative; top:0px; left: -12px; margin: 0px;z-index: 20 }
.Area_8PD .page .cate-hover { filter: brightness(1); }
.Area_8PD .page ul { display: inline-block; width: 1220px; margin-left: 0px; margin: 0; padding: 0;display: flex;flex-wrap: wrap;justify-content: center;}
.Area_8PD .page ul li { list-style: none; float: left; width: 26%;margin: 0 -24px 0 0; padding-bottom: 10px;/* filter: grayscale(1);*/ }
.Area_8PD .page ul li img{width: 90%;}
.Area_btn {z-index: 99; position:absolute;height:200px;left:0px;top:24px; width:1220px}
.Area_btn ul {margin:0px 0px 0px 0px!important ; width:95%!important; }
.Area_btn ul li {list-style:none;display:inline-block; width:190px; margin:0 0 0px -15px }
.Area_8PD .Area_sectionTitle {z-index:100;  position: relative;width:1220px;top:27px;}
.Area_8PD .Area_sectionTitle ul {padding:0px;margin:0 auto 0;list-style: none;height: 0px!important;width:1220px;}
.Area_8PD .Area_sectionTitle ul li { background-color: transparent; pointer-events: none;}
.Area_8PD .Area_sectionTitle ul li h5 {top:0px;margin: 0;padding: 0;width: 100%;height: 88px;font: 41px/80px "微軟正黑體","Microsoft JhengHei",Helvetica;font-weight: bolder;/*font-style: italic;*/text-align: center;color:#54598c;letter-spacing: 0px;overflow: hidden;/*text-shadow: 0px 0px 5px #000;*/}

}
    
@media screen and (max-width:767px){
	  .Area_8PD {height:auto;margin-bottom: 0vw!important;}
	  .Area_8PD .PD_layout.layout_8PD { overflow: hidden;}
    .Area_8PD .boxall {width:100%; margin: 0vw auto; overflow: hidden; background-image:url(mo_Area8pd_center.png?t=1756721539916); background-size: 100%;}
    .Area_8PD .PD_layout.layout_8PD ul {position:relative;margin-top:20vw ;margin-bottom:0vw ; width:88% ;height:100% ; padding:0vw;}
    .Area_8PD .PD_layout.layout_8PD h2 {position: absolute;margin:0 auto; padding:0 2%; top:0vw; width:100%; height: 65px; overflow:hidden;font-style: italic; font-weight:bold!important; font-size:1.8em; line-height:67px; text-align:center;color: #fff;/*text-shadow:3px 3px 7px #a5814e;background:url();*/background-repeat: no-repeat;background-size:100%;font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";}
    .Area_8PD .page {z-index:99 ; position: relative;height:26vw; margin:0;width: 100%;top:0vw;left: 0vw}
    .Area_8PD .page .cate-hover { filter: brightness(1); }
    .Area_8PD .page ul {width: 100%; display: inline-block; margin-left: 0px; margin-top: 3vw ; padding: 0vw  ;display: flex;flex-wrap: wrap;justify-content: center;}
    .Area_8PD .page ul li {list-style: none;float: left;margin: 0vw;padding: 0px;width: 48%;/* filter: grayscale(1);*/}
    .Area_8PD .page :nth-child(9){ margin-left: 26vw;}	
    .Area_8PD .page ul li img { width: 100%; }	.Area_btn {z-index: 99;position: absolute;height: 46vw;left: 0vw;top: 0vw;width: 100%;}
    .Area_btn ul {margin-top:1vw!important ; margin-left:-10vw!important;width:100%!important; }
    .Area_btn ul li {list-style: none;display: inline-block;width: 25%;margin:0vw auto 3vw;}
  	.Area_8PD .Area_sectionTitle {z-index:100;  position: relative;width:100%;top:0vw;}
	  .Area_8PD .Area_sectionTitle ul {padding:0;margin:0 auto 0;list-style: none;height: 0vw!important;width:100%;}
    .Area_8PD .Area_sectionTitle ul li { background-color: transparent; pointer-events: none;}
    .Area_8PD .Area_sectionTitle ul li h5 {margin:0 auto; padding:0%; top:0vw; width:100%; height: 12vw; overflow:hidden;/*font-style: italic;*/ font-weight:bold!important; font-size:2.0em; line-height:67px; text-align:center;color: #54598c;/*text-shadow:3px 3px 7px #a5814e;background:url();*/background-repeat: no-repeat;background-size:100%;font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";}

  }



/*區塊_all*/
.Area { position: relative; margin: 0 auto; padding: 0; border-radius: 0; text-align: center; }
.Area a { display: block;} 
.Area .go_bt {
  -webkit-transition: all 0.4s ease;
     -moz-transition: all 0.4s ease;
      -ms-transition: all 0.4s ease;
       -o-transition: all 0.4s ease;
          transition: all 0.4s ease;}
.Area .go_bt:hover {
  -webkit-transform: scale(0.95);
     -moz-transform: scale(0.95);
      -ms-transform: scale(0.95);
       -o-transform: scale(0.95);
          transform: scale(0.95);}
.Area1220 { margin: 0 auto; width: 1220px;}
.Area960 { margin: 0 auto; width: 960px;}
@media screen and (max-width:767px){
  .Area .go_bt:hover {  
    -webkit-transform: none;
     -moz-transform: none;
      -ms-transform: none;
       -o-transform: none;
          transform: none;}

  .Area1220 { width: 100%;}
  .Area960 { width: 100%;}

}




/*獨家強牌!購不停!*/
.Area06_2pd {height:auto;margin-bottom: 100px!important;}
.Area06_2pd .box_all {position: relative;z-index: 2;padding-bottom: 0px;}
.Area06_2pd .box_all .box_txt4 {position: absolute;margin: 0 auto;height: auto;width: auto;}
.Area06_2pd .box_all .text02 {width: 100%;margin: auto;height: 150px;}
.Area06_2pd .box_all .text02 .PD_layout {width: 80%;}
.Area06_2pd .box_all .text02 .PD_layout .PD_into {display: flex;flex-direction: row;margin-top: 0;}
.Area06_2pd .box_all .text02 .PD_layout .PD_into .PD_logo {width: 35%;left: 0px;top: 23px;position: relative;}  
.Area06_2pd .box_all .text02 .PD_layout .PD_into h3 {width: 51%;font-size: 52px;line-height: 1.8em;color: #fff;margin-top: 30px;left: 73px;position: relative;} 
.Area06_2pd .box_all .layout_PD {width: 85%;}
@media screen and (max-width: 767px){
  .Area06_2pd {height:auto;margin-bottom: 10vw!important;}
  .Area06_2pd .box_all {margin-top:0vw ;padding-bottom: 0vw;}
  .Area06_2pd .box_all .text02 {height: 14vw;padding-top:3vw ;}	
  .Area06_2pd .box_all .text02 .PD_layout {width: 94%;}
  .Area06_2pd .box_all .text02 .PD_layout .PD_into{display: flex;flex-direction: row;margin-top: 0vw;margin-bottom: -6vw;}
  .Area06_2pd .box_all .text02 .PD_layout .PD_into .PD_logo {width: 36%;top: 0;left: 0;position: relative;}  
  .Area06_2pd .box_all .text02 .PD_layout .PD_into h3{width: 60%;margin-left: 0;font-size: 23px;line-height: 1.2em;color: #fff;margin-top: 2vw;left: 2vw;} 
  .Area06_2pd .box_all .layout_PD {width: 94%;margin-top:0vw ;}
  .Area06_2pd .box_all .layout_PD ul {border-radius:0 3vw 3vw 3vw ;}
}


.Area06_3pd {height:auto;margin-bottom: 100px!important;}
.Area06_3pd .box_all {position: relative;z-index: 2;padding-bottom: 0px;}
.Area06_3pd .box_all .box_txt4 {position: absolute;margin: 0 auto;height: auto;width: auto;}
.Area06_3pd .box_all .text02 {width: 100%;margin: auto;height: 150px;}
.Area06_3pd .box_all .text02 .PD_layout {width: 80%;}
.Area06_3pd .box_all .text02 .PD_layout .PD_into {display: flex;flex-direction: row;margin-top: 0;}
.Area06_3pd .box_all .text02 .PD_layout .PD_into .PD_logo {width: 35%;left: 0px;top: 23px;position: relative;}  
.Area06_3pd .box_all .text02 .PD_layout .PD_into h3 {width: 51%;font-size: 52px;line-height: 1.8em;color: #fff;margin-top: 30px;left: 73px;position: relative;} 
.Area06_3pd .box_all .layout_PD {width: 85%;}
@media screen and (max-width: 767px){
  .Area06_3pd {height:auto;margin-bottom: 10vw!important;}
  .Area06_3pd .box_all {margin-top:0vw ;padding-bottom: 0vw;}
  .Area06_3pd .box_all .text02 {height: 14vw;padding-top:3vw ;}	
  .Area06_3pd .box_all .text02 .PD_layout {width: 94%;}
  .Area06_3pd .box_all .text02 .PD_layout .PD_into{display: flex;flex-direction: row;margin-top: 0vw;margin-bottom: -6vw;}
  .Area06_3pd .box_all .text02 .PD_layout .PD_into .PD_logo {width: 36%;top: 0;left: 0;position: relative;}  
  .Area06_3pd .box_all .text02 .PD_layout .PD_into h3{width: 60%;margin-left: 0;font-size: 23px;line-height: 1.2em;color: #fff;margin-top: 2vw;left: 2vw;} 
  .Area06_3pd .box_all .layout_PD {width: 94%;margin-top:0vw ;}
  .Area06_3pd .box_all .layout_PD ul {border-radius:0 3vw 3vw 3vw ;}
}




/*區塊-館連結-Area_category*/
.Area_category{padding: 0!important; margin-bottom: 100px!important;width: 1220px!important;}
.Area_category .PD_layout {top: 30px;width: 100%;}
.Area_category .PD_layout li{margin-bottom: 30px;margin: 10px 0px 0px 0px;}
.Area_category .PD_layout .PD_img{width: 100%;}
@media screen and (max-width:767px){
	.Area_category{padding: 0 0 0!important; height: auto ;margin-bottom: 10vw !important;width: 96%!important;}
  .Area_category .PD_layout {top: 0vw;width:  100%;left: 0%;margin: 0 auto;}	
  .Area_category .PD_layout ul {margin: 0 auto !important;padding: 0!important;grid-gap: 0!important;}
  .Area_category .PD_layout li {margin: 0 !important;width:100% ;}

  .Area_category .PD_layout .PD_img{width: 100%;}	
}





    .Area10 .PD_layout ul {background-color:#0000 ;}
    .Area10 .PD_layout.layout_PD ul {background-color:#fff8 ;width:98% ;}
@media screen and (min-width:768px){
  .Area10 {}
  .Area10 .box_all {position: relative;}
  .Area10 .box_bottom {padding-bottom: 50px;}
  .Area10 .box_txt {position: absolute;margin: 0 auto;width: 100%;height: auto;}
  .Area10 .box_txt img {width: 75%;}
  .Area10 .txt {z-index:50 ;}
  .Area10 .txt ul {position: relative;padding: 0;margin: 0;list-style: none;height: 100px;top:0;}
  .Area10 .txt ul li { background-color: transparent; pointer-events: none;padding: 0;}
  .Area10 .txt .PD_into {padding: 0;}
  .Area10 .txt ul li h5 {position: relative;top:20px;margin: 0;padding: 0;width: 100%;font: 60px/60px "Noto Sans CJK SC";font-weight: 700;text-align: center;overflow: hidden;color: #000;}
  

  .Area10 .PD_layout ul li {border-right: solid 1px #0000 ;border-top: solid 1px #0000 ;margin-bottom:20px ;}
  .Area10 .PD_layout .PD img {border-radius:25px ;}
  .Area10 .PD_layout .PD h3 span {background-color: #fff;}
  
  }
  @media screen and (max-width:767px){
    .Area10 {}
    .Area10 .box_txt {position: absolute;margin: 0 auto;width: 100%;}
    .Area10 .box_txt img {width: 100%;}
    .Area10 .txt {z-index:40 ;}
    .Area10 .txt ul {padding: 0;margin: 0;list-style: none;height: 12vw;}
    .Area10 .txt ul li { background-color: transparent; pointer-events: none;padding-top: 0;}
    .Area10 .txt .PD_into {padding: 0;}
    .Area10 .txt ul li h5 {position: relative;top:0.7vw;margin: 0;padding: 0;width: 100%;font: 7vw/7vw "Noto Sans CJK SC";font-weight: 700;text-align: center;letter-spacing: 0vw;overflow: hidden;color: #000;}
    .Area10 .box_bottom {padding-bottom: 6vw;}
    .Area10 .layout_PD {width:100%}
  

    .Area10 .PD_layout ul li {border-right: solid 1px #0000 ;border-top: solid 1px #0000 ;margin-bottom:4vw ;}
    .Area10 .PD_layout .PD img {border-radius:3vw ;}
    .Area10 .PD_layout .PD h3 span {background-color: #fff;}
  
  }