@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 { margin-bottom: 0;min-width: inherit; min-height: 100vh; overflow: hidden; background-size: 100%;}
		.WRAPPER img {  width:100%;  height:auto; }
	}

/** 入稿區基本 **/
.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_fix { z-index:-58; position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none;}
.bg_repeat { 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_repeat2 { z-index: -30; position: absolute; top: 960px; left:0; width:100%; height: 100%; background-repeat:repeat-y; background-position: center top; pointer-events:none; }
.bg_L { z-index: 45; position:absolute; top: 0;left: 50%;transform: translateX(-1000px);width:100%; height:100%; background-repeat:repeat-y;  background-position: center top; pointer-events:none;}
.bg_R { z-index: 45; position:absolute; top: 0;left: 50%;transform: translateX(953px);width:100%; height:100%; background-repeat:repeat-y;  background-position: center top; pointer-events:none;}	
}


@media screen and (max-width:767px){
.mo_top { z-index:-40; position:absolute; top: 10vw; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none;background-size: 100%;}
.m_repeat_bg { z-index:-50; position:absolute; top: 0; left:0; width:100%; height:100%; background-repeat:repeat-y; background-position: center top; pointer-events:none;background-size: 100%;}
.m_bg_deco { z-index:10; position:absolute; top: 10vw; left:0; width:100%; height:100%; background-repeat:repeat-y; background-position: center top; pointer-events:none;background-size: 100%;}	
}


/*間距*/
@media screen and (min-width:768px){
.Area_bottom { margin-bottom: 40px!important; }
.Area_bottom2 { margin-bottom: 20px!important; }
}
@media screen and (max-width:767px){
.Area_bottom { margin-bottom: 5vw!important; }
.Area_bottom2 { margin-bottom: 0vw!important; }	
}


/*版頭區塊*/
@media screen and (min-width:768px){
	.Area_title { height: 710px; z-index: 40;}
	.title_01 {position: absolute;left: 117px;top: 244px;z-index: 20;}
  .title_01 ul li a{pointer-events: none;}

	.title_02 {position: absolute;left: 21px;top: 310px;z-index: 19;width: 50%;}
  .title_02 ul li a{pointer-events: none;}

	.title_03 {position: absolute;left: 59px;top: 440px;z-index: 19;}
  .title_03 ul li a{pointer-events: none;}

	.title_04 {position: absolute;left: 520px;top: 190px;z-index: 19;}
  .title_04 ul li a{pointer-events: none;}

	.Area_title .markerpen{ position:absolute; top: 490px; left: -180px;z-index:5}	
	.Area_title .paperclip{ position:absolute; top: 60px; left: 1290px;z-index:5}

}

@media screen and (max-width:767px){
	.Area_title { position: relative; height: 104.5vw; z-index: 20;}	
	.title_01 {position: absolute;left: 28vw;top: 20vw; width: 46%; z-index: 10;}
  .title_01 ul li a{pointer-events: none;}

	.title_02 {position: absolute;left: 17vw;top: 27vw;width: 65%;; z-index: 10;}
  .title_02 ul li a{pointer-events: none;}

	.title_03 {position: absolute;left: 23vw;top: 41vw; width: 53%; z-index: 10;}
  .title_03 ul li a{pointer-events: none;}

	.title_04 {position: absolute;left: 80vw;top: 11vw; width: 19%; z-index: 10;}
  .title_04 ul li a{pointer-events: none;}

	.Area_title .markerpen{ position:absolute;  width: 14%;top: 49vw; left: 1vw;}
	.Area_title .paperclip{ position: absolute; width: 12%; top: 30vw;left: 86vw;}	

}


/*副標輪播*/
@media screen and (min-width:768px){
.Area_title .sub .Area_swiper_box .PD_layout li {background-color: #ffffff00;}
.Area_title .sub {position:absolute;left: 108px;top:438px;height:75px;width: 429px;text-align: left;z-index: 23;}
.Area_title .sub ul {list-style: none;margin: 0;padding: 0;}
.Area_title.sub img {width: 504px;}
.Area_title .sub a{pointer-events: none;}
}
	@media screen and (max-width:767px){
  .Area_title .sub .Area_swiper_box .PD_layout li {background-color: #ffffff00;}
  .Area_title .sub {position: absolute;left: 12%;top: 40.5vw; height: 12vw; margin: 0px auto;list-style: none; width: 76%; z-index: 10;}
  .Area_title .sub img {width: 65%;}
  .Area_title .sub a{pointer-events: none;}

}





/*版頭品輪播*/
@media screen and (min-width:768px){
.Area_title .toppd {z-index:5;position: relative;top:84px;left: 366px;}
.Area_title .toppd ul li{height: 100%;background-color:#ffffff00;width: 100%;}
.Area_title .toppd ul li img{width: 45% !important;}
}

@media screen and (max-width:767px){
.Area_title .toppd {z-index:5;position: relative;top:39vw;}
.Area_title .toppd ul li{height: 100%;background-color:#ffffff00;width: 100%;}
.Area_title .toppd ul li img{width: 58% !important;}
}


/*公版背景*/
@media screen and (min-width: 768px){
.box_txt {position: relative;margin: 0 auto;width: 80%;height: auto;}
.box_txt a{pointer-events: none;}

.box_txt2 {position: absolute;margin: 0 auto;width: 100%;height: auto;}
.box_txt3 {position: relative;margin: 0 auto;width: 100%;height: auto;}
}

@media screen and (max-width:767px){
.box_txt {position: relative;margin: 0 auto;width: 100%;padding: 0.5% 0;height: 16vw;}
.box_txt img{width: 100%;}
.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.7% 0;height: 17vw;}
.box_txt3 img{width: 100;}
}




/*活動*6(線上入搞)*/
@media screen and (min-width:768px){
.Area01 { position: relative; height: 320px; top: 0; margin-bottom:0;}
.Area01 .layout_activity{top:0;}
.Area01 .layout_activity ul {width:75%;margin:0 auto; padding:0 0 0 0; }
.Area01 .layout_activity ul li {padding:0px;margin:0 auto;}
.Area01 .layout_activity ul li img {width:95%;}
}
@media screen and (max-width:767px){
.Area01 .layout_activity{width:100%; height: auto; margin:0 auto;padding:0; z-index: 5; margin-bottom:0vw;/*background:url(mb_05.png?t=1755582885426) top center no-repeat ; background-size:100%;*/ }
.Area01 .layout_activity ul {width:100% ;margin:0 auto;}
.Area01 .layout_activity ul li {margin: 1%;}
.Area01 .layout_activity ul li img {width:100%;}
}





/*強檔精選購夯品*/
.Area02 { height:100%;  padding-bottom: 0px;z-index: 40;}
.Area02 .bigbox { background: url(repeatbox2.png?t=1755582885426)top center repeat-y;}
.Area02 ul{ width: 96%;}
.Area02 .title ul {padding:0; grid-gap:0;}
.Area02 .title ul li a{pointer-events: none;}

@media screen and (max-width: 767px) {
.Area02 {height: 100%; padding-bottom:0;}
.Area02 .bigbox { background: url(mrepeatbox2.png?t=1755582885426)top center repeat-y; background-size: 100%;}	
.Area02 ul{ width: 96%;}
}




/*登記活動*/
@media screen and (min-width: 768px){
.Area03 {height: auto;padding-bottom: 60px;}
.Area03 .box_all {height: 100%;}

}

@media screen and (max-width: 767px){
.Area03 {padding-bottom: 5vw!important;height: auto;}
.Area03 .box_all {height: 100%;}	
.Area03 .Area_danji {width: 96%;}
}




/*下方公版01*/
@media screen and (min-width:768px){
.Area_below01 {height:100%;} 
/**區標**/	
.Area_below01 .text {position:relative;background:url(pc_text_bg02.png?t=1718767130719)top center no-repeat;background-size:100%;}
.Area_below01 .text .layout_text {width:70%;margin:0 auto;padding-bottom:0;position: relative;top:-56px;left: 16px;}
.Area_below01 .text .layout_text .PD_slide:hover{transform:none;}
.Area_below01 .text .layout_text .PD a {pointer-events: none!important}
.Area_below01 .box {width:100%; background:url(pc_ul_bg02.png?t=1718767130719)top center repeat-y;background-size:100%;padding-bottom:1px;/*padding-top: 30px;*/}		
/*公版區*/		
.Area_below01 .box .PD_layout {width: 96%;}
}
@media screen and (max-width:767px){
/* .Area_below01 {height:100%;background-color:#bcd3ff;} */
.Area_below01 .box {width:100%; background:url(mo_ul_bg01.png?t=1718767130719)top center repeat-y;background-size:100%;padding-bottom:1px;/*padding-top: 30px;*/}		

/**區標**/	
.Area_below01 .text {position:relative;background:url(mo_belowbg01.png?t=1718767130719)top center no-repeat;background-size:100%;}
.Area_below01 .text .layout_text .PD a {pointer-events: none!important}
.Area_below01 .box {padding-top: 0vw;}	
/*公版區*/		
.Area_below01 .box .PD_layout {width: 96%;}
}

/*下方公版_區標*/
.Area .title960 { padding: 119px 0 38px; margin: 0 auto; width: 100%; z-index: 2;}
.Area .title960 ul { padding: 0; grid-gap: 0;}
.Area .title960 ul li { background-color: transparent; pointer-events: none;}
.Area .title960 ul li .PD_into { padding: 0;}
.Area .title960 ul li h5 { padding: 0; margin: 0; font: bold 46px/46px "Noto Sans CJK TC Bold","Microsoft JhengHei", Arial, Helvetica;color: #5154e1;  }
@media screen and (max-width:767px){
.Area .title960 { padding: 8.5vw 0 4vw; margin: 0 auto; width: 100%; z-index: 2;position: relative;top:-4vw;}
.Area .title960 ul li h5 { font: bold 6vw/6vw "Noto Sans CJK TC Bold","Microsoft JhengHei", Arial, Helvetica;color: #5154e1; }
}	



  /*下方公版_底*/
@media screen and (min-width:768px){
  .Area_bottom02 {background:url(pc_bottom02.png?t=1718767130719)top center no-repeat;background-size:100%;padding-top:40px;}
  }
  @media screen and (max-width: 767px){
  .Area_bottom02 {background:url(m_bottom01.png?t=1718767130719)top center no-repeat;background-size:100%;padding-top:10vw}
  }	


/*區塊-館連結-Area_category*/
@media screen and (min-width:768px){
.Area_category ul{width: 55% !important;}
.Area_category {padding-top: 40px;}

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








/*置底*/
.fixbn a {padding-bottom:constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
				    padding-bottom:env(safe-area-inset-bottom);}   /* 兼容 iOS >= 11.2 */ 
.fixbn{position:fixed; background-size:100%;bottom:0; display:block; z-index: 99;}
.fixbn ul li{float:left;padding:0;list-style-type:none;width:50vw;}
.fixbn ul li img{width:100%;margin:0 auto;}

.fixbn ul{
    margin-top: 0px;
    margin-bottom: 0px;
    padding-left: 0px;
}
/*1顆按鈕*/
.fixbn .class_00 {position:absolute;width:100%; height: 100%; }
.fixbn .class_00 a {display:block;width:100%;height:100%;}
.fixbn .class_01 { top:0%;left:0%;}

/*2顆按鈕*/
.fixbn .class_00 {position:absolute;width:50%; height: 100%; }
.fixbn .class_00 a {display:block;width:100%;height:100%;}
.fixbn .class_01 { top:0%;left:0%;}
.fixbn .class_02 { top:0%;left:50%;}




/*區塊_all*/
.Area1220 { margin:0 auto; width:1220px;}
.Area960 { margin:0 auto; width:960px;}
.Area { position: relative; margin:0 auto;  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);}

	@media screen and (max-width:767px){
		.Area1220 { width:100%;}
		.Area960 { width:100%;}
		.Area .go_bt:hover {  
			-webkit-transform:none;
			-moz-transform:none;
			-ms-transform:none;
			-o-transform:none;
			transform:none;}
	}



/*LOGO*/
.Area_top {}
	@media screen and (max-width:767px){
.Area_top { height: auto;}
	}


/*按鈕*/
.bnn a img {
	transition-duration: 0.1s;
	backface-visibility: hidden;
	transform: translateZ(0);
	display: block;
	margin: 0;
	padding: 0px;
	width: 100%;

	height: auto;
	text-align: left;
}
.bnn:hover a img {
	-webkit-transform: translateY(10px);
	transform: translateY(10px);
}	
	



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