@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; background: #b82d2d; text-align:left; font-family:"Century Gothic","Microsoft JhengHei","微軟正黑體", Arial, sans-serif; }
.WRAPPER img { border:0px; vertical-align:top;}
.WRAPPER a { text-decoration:none; -webkit-tap-highlight-color: transparent}
/*預設清單樣式*/
.Area .list_00 ul {display:inline-block; margin:0; padding:0;}
.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;   }
		.WRAPPER img {  width:100%;  height:auto;}
	}


.Area_bottom{ margin-bottom: 40px!important; }
@media screen and (max-width:767px){ .Area_bottom{ margin-bottom: 6vw!important; }	}

/*背景*/
.bg_01 { z-index:-10; position:absolute;top:0;left:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center top; pointer-events:none;}
.bg_02 { z-index:-10; position:absolute;top:975px;left:0; width:100%; height:100%; background-repeat:repeat-y; background-position:center top; pointer-events:none;}
.bg_03 { z-index:-10; position:absolute;top:1536px;left:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center top; pointer-events:none;}
.bgdeco { z-index: 0; position: absolute; top: 0; left: 0; width: 100%; min-width: 1220px; height: 100%; background: url(bgdeco.png?t=1745907716260) repeat-y center top; transition: 0.5s linear; pointer-events: none;}


@media screen and (max-width:767px){	
  .m_bg01 { z-index: -40; position:absolute; top: 11vw; left: 0; width: 100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none;background-size: 100%;}
  .m_bg02 { z-index: -41; position:absolute; top: 87vw; 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_title{ height: 780px; box-sizing: border-box;}

  /*閃電*/
  .Area_topPD .pic_01{ z-index: 2; position: absolute; top: 5px; left: 141px;}
  .Area_topPD .pic_02{ z-index: 2; position: absolute; top: 80px; left: 930px;}

  .Area_title .title{
    position: absolute;left: 168px;width: 862px;
  }
  
}


@media screen and (max-width:767px){
  .Area_title .title ul{
    width: 100vw!important; padding: 0!important;
  }

  .Area_title .title ul .PD_into img{width: 80%;}
.Area_title { height:115vw;}
   /*版頭品輪播*/
   .Area_title .Area_topPD {position: absolute;top: 10.8vw;right: -0.4vw;width: 100%;}
   .Area_title .Area_topPD ul.PD_wrapper { display: flex; flex-wrap: nowrap; margin: 0; padding: 0; width: 80%; box-sizing: content-box; grid-gap: inherit;}
   .Area_title .Area_topPD ul.PD_wrapper li { flex-shrink: 0; margin: 0; padding: 0; opacity: 0; transform: translate(5%,0);}
   .Area_title .Area_topPD ul.PD_wrapper li.swiper-slide-active { opacity: 1; transition: .8s ease-out; transform: translate(0,0);}	
   .Area_title .PD_wrapper {background-color: rgba(255,255,255,0.00);}
   .Area_title .PD_layout[data-pd-li*="BN"] li{border: rgba(255,255,255,0.00);}	

   /*閃電*/
   .Area_topPD .pic_01{ z-index: 2; position: absolute; top: -12vw; left: -2vw; width: 14%;}
   .Area_topPD .pic_02{ z-index: 2; position: absolute; top: 4vw; left: 86vw; width: 14%;}
	
  /*版頭品動畫*/
  .Area_title .Area_topPD .swiper-slide { opacity: 0; transform: translate(6%,0);}
  .Area_title .Area_topPD .swiper-slide-active { opacity: 1; transition: 1s ease-out; transform: translate(0,0);}

  /*副標輪播*/
  .Area_title .Area_topSUB {position: absolute;top: 20vw;right: 0vw;width: 100%;}
  .Area_title .Area_topSUB ul.PD_wrapper { display: flex; flex-wrap: nowrap; margin: 0; padding: 0; width: 80%; box-sizing: content-box; grid-gap: inherit;}
  .Area_title .Area_topSUB ul.PD_wrapper li { flex-shrink: 0; margin: 0; padding: 0; opacity: 0; transform: translate(5%,0);}
  .Area_title .Area_topSUB ul.PD_wrapper li.swiper-slide-active { opacity: 1; transition: .8s ease-out; transform: translate(0,0);}	
  .Area_title .PD_wrapper {background-color: rgba(255,255,255,0.00);}
  .Area_title .PD_layout[data-pd-li*="BN"] li{border: rgba(255,255,255,0.00);}
}
	

/*副標輪播NEW*/
.Area_title .subtitle { position: absolute; top: 228px; left: 418px; width: 30%; z-index: 1;}
.Area_title .subtitle ul.PD_wrapper { display: flex; flex-wrap: nowrap; margin: 0; padding: 0; width: 100%; grid-gap: 0; box-sizing: content-box;}
.Area_title .subtitle ul.PD_wrapper li { flex-shrink: 0; margin: 0; padding: 0;}

@media screen and (max-width:767px){
  .Area_title .main { padding-top: 10vw; width: 90%;margin-bottom: 5vw; padding-left:15px;}
  .Area_title .subtitle { left: 50%; transform: translateX(-50%); top: 28.5vw; width: 50%; }
  
  .Area_title .subtitle .PD_layout .PD img {width: 100%;}

}

.date{position: absolute; top: 0px; right: 0px;}
@media screen and (max-width: 767px) {
  .date{position: absolute; top: 0vw; right: -2vw; width: 32vw;}
}

/*輪播物件*/
.Area_swiperPD .box{ position: relative; overflow: hidden;  margin: 0 auto; top:310px;}
.Area_swiperPD .box ul.PD_wrapper { position: relative; display: flex; flex-wrap: nowrap; margin: 0; width: 100%; box-sizing: content-box; background-color: rgba(0,0,0,0); }
.Area_swiperPD .box ul.PD_wrapper li{ flex-shrink: 0; margin: 0; padding: 0; min-width: auto; background-color: #fff; border-top: none; border-right:none; border-radius: 10px;}
.Area_swiperPD .PD_layout .PD p .Price { font-size: 25px; }

@media screen and (min-width: 768px) {
.Area_swiperPD .box ul.PD_wrapper { padding: 0 0 50px;}
.Area_swiperPD .box ul.PD_wrapper li{ width: 304px; margin: 0; padding: 0;}
.Area_swiperPD .Area_boxstyle_pagination{display: none;}
}
@media screen and (max-width: 767px) {
.Area_swiperPD .box { width: 100%;top: 0vw; position: relative;}
.Area_swiperPD .box ul.PD_wrapper { padding: 0 0 7vw;}
.Area_swiperPD .box ul.PD_wrapper li{ width: 48vw; margin: 0; padding: 0;}
.Area_swiperPD .PD_layout .PD .Price{ font-size:24px; }
.Area_swiperPD .PD_layout .PD p b, .Area_swiperPD .PD_layout .PD p del, .Area_swiperPD .PD_layout .PD p .money{ font-size:14px; }
}



/*02主打*/
.Area02 {height: 780px;}
.Area02 .title {top:-25px ; left:73px ; position: absolute;}
.Area02 .PD_layout{width: 108%;position:absolute;top:157px;right: -45px;}


@media screen and (max-width: 767px) {
.Area02 {height: 208vw;}
.Area02 .title {width: 76%;margin: 5vw 0 2vw 0;top: 2vw; left: 13vw; position: relative;}
.Area02 .PD_layout{width: 100%;position:absolute;top:19vw;right: 0vw;}

}

/*02-2主打*/
.Area02-2 .title {top:10px ; left:207px ; position: absolute;}
.Area02-2 .PD_layout{width: 100%;position:relative;top:157px;}


@media screen and (max-width: 767px) {
.Area02-2 .title {width: 65%;margin: 5vw 0 2vw 0;top: 4vw; left: 17vw; position: relative;}
.Area02-2 .PD_layout{width: 100%;position:absolute;top:19vw;right: 0vw;}

}




/*03登記*/

.Area03 .Area_danji{ position: relative; top:32px; left: 0px; width: 100%; }
.Area03 .title {margin: 40px 0;}
.Area03 .title0 {}
.Area03 .Area02BG-1 {z-index:-5 ; position:absolute ; top:-36px ; right: -127px ; width:100% ; min-width:1220px;background:no-repeat center top;pointer-events:none}
.Area03 .BG{z-index:-6;position:absolute;bottom:-164px;right: 0px; top: 47px ;width:100%;min-width:1220px;background:no-repeat center top;pointer-events:none}

@media screen and (max-width: 767px) {
 
  .Area03 .Area_danji{ position: relative; top:0vw; }
  .Area03 .title {margin: 4vw 0 ; width: 120%; left: -10vw; position: relative;}
  .Area03 .title0 {padding: 4vw 0 ; width: 65%; left: 17vw; position: relative;}
  .Area03 .Area02BG-1 {z-index:-5 ; position:absolute ; top:-36px ; right: -127px ; width:100% ; min-width:1220px;background:no-repeat center top;pointer-events:none}
  .Area03 .BG{z-index:-5;position:absolute; top: 6vw; right: 0vw; width: 100%;min-width:auto;background:no-repeat center top;pointer-events:none;}
  .danji_box{width: 96vw; margin: 0 auto;}
}






/*03主打*/
.Area05 .title {margin:60px 0 56px 0;}
.Area05 .BG{z-index:-5;position:absolute;bottom:-164px;right: 237px;width:100%;min-width:1220px;background:no-repeat center top;pointer-events:none}

@media screen and (max-width: 767px) {
.Area05 .title {margin: 6vw 0 ; width: 120%; left: -10vw; position: relative;}
.Area05  .BG{z-index:-5;position:absolute; bottom: -56vw; right: -284vw; width: 740%;min-width:auto;background:no-repeat center top;pointer-events:none;}
}


/*00錨點*/
.Area00{height:50px;}

@media screen and (max-width: 767px) {
  .Area00{height:20vw;}

  }


  @media screen and (max-width: 767px) {
  .Area04 .title{width: 70vw; margin: 0 auto;}
  }

/*04副打*/

.Area04_1 .title {margin: 44px 0 20px 0;}
@media screen and (max-width: 767px) {

  .Area04_1 .title {width: 65%; position: relative; left: 17vw; top: 1vw; margin: 2vw 0 4vw 0;}
  }



/*旗艦館*/
.Area09 .PD_layout {width: 77%;margin-top: 60px;}
@media screen and (max-width: 767px) {
  .Area09 .PD_layout {width: 98%;    margin-top:8vw;}
}









/*區塊_all*/
.Area1220 { margin:0 auto; width:1220px;}
.Area960 { margin:0 auto; width:960px;}
.Area { position: relative; margin:0 auto; padding:0; border-radius:0; text-align:center; }
.Area a { position:relative; 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.97);
     -moz-transform:scale(0.97);
      -ms-transform:scale(0.97);
       -o-transform:scale(0.97);
          transform:scale(0.97);}
		  
		  
.WRAPPER .go_bt1 {
  -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;}
.WRAPPER .go_bt1:hover { 
  -webkit-transform:translateY(-10px);
     -moz-transform:translateY(-10px);
      -ms-transform:translateY(-10px);
       -o-transform:translateY(-10px);
          transform:translateY(-10px);}
		  
		  
	@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;}
	}



/*按鈕*/
.bnn {
}
.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;}
	}



  /* 【重複背景(窄)】設定統一重複背景--------------------------------------------------- */

  .Area .boxrepeat_top { position: relative; padding: 55px 0 0px; width: 100%; background: url(boxrepeat_top.png?t=1745907716260)top center no-repeat;}
  .Area .boxrepeat { background: url(boxrepeat.png?t=1745907716260)top center repeat-y; position: relative; }
  .Area .boxbottom { position: relative;}
  
  @media screen and (max-width:767px){
    .Area .boxrepeat_top  { padding: 0vw 0 0vw; background: url(boxrepeat_top.png?t=1745907716260)bottom center no-repeat; background-size: 100%;} */
    .Area .boxrepeat { background: url(boxrepeat.png?t=1745907716260)top center repeat-y; background-size: 100%; }
    .Area .boxrepeat_bottom{position: relative;
  }
  
  }
  
  
.p-e-n{pointer-events: none;}


.warningTxt{margin-top: 20px;}

@media screen and (max-width:767px){
  .warningTxt{margin-top: 2vw;}
}

/* 推推樂 */
.mb-l{margin-bottom: 60px!important;}
.mb-m{margin-bottom: 30px!important;}
.mb-s{margin-bottom: 10px!important;}

@media screen and (max-width:767px) {
.mb-l{margin-bottom: 8vw!important;}
.mb-m{margin-bottom: 5vw!important;}
.mb-s{margin-bottom: 2vw!important;}
}

.pb-l{padding-bottom: 60px!important;}
.pb-m{padding-bottom: 30px!important;}
.pb-s{padding-bottom: 10px!important;}

@media screen and (max-width:767px) {
.pb-l{padding-bottom: 8vw!important;}
.pb-m{padding-bottom: 5vw!important;}
.pb-s{padding-bottom: 2vw!important;}
}