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



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



/*編輯按鈕移動*/
#eWriterBtn_bt_B_000_sub{ margin-left: 10px!important; margin-top: 90px!important; z-index: 199!important;position: relative; }
#eWriterBtn_bt_B_000_coffee{ margin-left: -169px!important; margin-top: 85px!important; z-index: 199!important; position: relative;}



/*版頭區塊*/
@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:199;position:absolute; left: 263px; top: 184px; width: 687px;height:114px ;}
    
    .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: 199; position: absolute; left: 14vw;top: 15vw;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: 199;position:absolute;left: 263px; top: 158px; width: 687px;height:114px ;}
 
  .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: 199;position: absolute;margin: 0 auto;left: 14vw;top: 13.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: 200;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: 200;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;}
  }



  


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













/*公版背景*/
.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%;}
}










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


@media screen and (max-width:767px){
  .Area_danji { width: 96%}
  }
  /*登記贈品文案顏色*/
  .Area_danji .danji_box ul li .activityText .gifts span { color: #ffe604;}  
  
@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%; }
}





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

}











/*區塊-館連結-Area_category*/
.Area_category{padding: 0!important; margin-bottom: 100px!important;width: 1220px!important;}
.Area_category .PD_layout {top: 30px;}
.Area_category .PD2 ul {width: 50%;}

.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: 0vw !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 .PD2 ul {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:#ffffff ;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: 6vw/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;}
  
  }