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

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


/*全BOX版面*/
.WRAPPER { position: relative; display:block; margin: 0 auto; padding: 0; width:100%;  min-width:1220px; overflow:hidden; font-family:"微軟正黑體","Microsoft JhengHei",Helvetica; ;}
.WRAPPER img {width: 100%; border:0px; vertical-align:top;}
.WRAPPER a { text-decoration:none;}
		@media screen and (max-width:767px){
		.WRAPPER { min-width: inherit; padding-bottom:0px; }
		.WRAPPER img {  width:100%;  height:auto;}
	}

		
/*區塊_all*/
.Area { position: relative; margin:0 auto; padding:0; border-radius:0; text-align:center; }
.Area a { display:block;margin: auto;} 
.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){
		.Area1220 { width:100%;}
		.Area960 { width:100%;}
		
	}

	
/*背景*/
@media screen and (min-width:767px){
	.bg1{ z-index:-2; position:absolute;top:0; width:2000px; min-width:1220px; height:1178px; background: url(bg_01.jpg?t=1757488997308) no-repeat center top ;background-size: cover;left: 50%;transform: translateX(-50%);}
	.bg2{ z-index:-3; position:fixed;top:0px; width:100%; min-width:1220px; height:100%; background: url(bg_02.png?t=1757488997308) no-repeat center top ;background-size: cover;}
	.bg3{ z-index:0; position:absolute;top:0px; width:100%; min-width:1220px; height:1000px; background: url(bg_03.png?t=1757488997308) no-repeat center top ;}
	.Area01_bg{ z-index:0; position:absolute;top:80px; width:100%; min-width:1220px; height:1240px; background: url(A01_bg.png?t=1757488997308) no-repeat center top ;}
	.deco_bg{ z-index:-1; position:absolute;top:1200px; width:100%; min-width:1220px; height:9100px; background: url(deco_bg.png?t=1757488997308) repeat-y center top ;}
}
@media screen and (max-width:767px){
	.mbg01{ z-index:-2; position:absolute;top:-7vw; width:100%;height:123vw; background: url(mbg_01.png?t=1757488997308) center 100% / 100% no-repeat scroll;}
	.mArea01_bg{ z-index:-3; position:absolute;top:53vw; width:100%;height:100%; background: url(mbg_02.png?t=1757488997308) center top / 100% no-repeat scroll;}
	.bg3{ z-index:0; position:absolute;top:-7vw; width: 161%;height: 99.5vw; background: url(bg_03.png?t=1757488997308) center 100% / 100% no-repeat scroll;left: 50%; transform: translateX(-50%);}
	}


/*背景*/
.bgtop  { z-index:0; position:absolute; top:0; left:0; width:100%; min-width:1220px; height:100%;}
@media screen and (max-width:767px){
	.bgtop { min-width: inherit; background-size:100%;}
}



/*區標(線上入稿)*/
.box_txt{ position: relative; margin: 0 auto;}
.box_txt .PD_layout .PD h3 {color:#fff;font-size: 3.5em;line-height: 2.1em; font-weight: 500;font-family:"Century Gothic","Noto Sans TC";}

.box_txt::before {content:"";position: absolute;display:block; top:-4px; left: 0;width: 100%;height:160%;pointer-events:none;}
.box_txt2::before{ background: url("m_box_txt_bg.png?t=1757488997308") center top/100% no-repeat scroll; }
.box_txt3::before{ background: url("m_box_txt_bg.png?t=1757488997308") center top/100% no-repeat scroll; }
.box_txt4::before{ background: url("m_box_txt_bg2.png?t=1757488997308") center top/100% no-repeat scroll; }


.box_txt .PD_layout .PD .PD_into{ padding: 0; }
.box_txt li:hover{ transform: none!important; }
.box_txt a{ pointer-events: none;}
.box_txt h3 span{ overflow: visible!important;}

@media screen and (min-width:768px){
  .box_txt {  width: 960px; top: 20px; }
  .box_txt2 { top: 81px; }
  .box_txt3{ top: 64px; }
  .box_txt4{ top: -7px; }
}

@media screen and (max-width:767px){
  .box_txt .PD_layout .PD h3 {font-size: 1.4em;line-height: 2.4em; }
  .box_txt2 { top: 1vw; }
  .box_txt3{ top: 7vw; }
  .box_txt2::before, .box_txt3::before{ top:0.5vw; }
  .box_txt4::before{ top:1vw; }
  .box_txt4{ top: -2vw; }
}



/*版頭*/
.Area_top {height:979px;position: relative;}
	@media screen and (max-width:767px){
		.Area_top {height: 117vw;z-index: 0}
}
.bank_bn{ position:absolute; top:200px; left:0; z-index:3;}

@keyframes spotlightL{
	0%{ opacity: 0; transform: rotate(-20deg);}
	20%{ opacity: .5; }
	50%{ opacity: 0; transform: rotate(40deg);  }
	100%{ opacity: 0; transform: rotate(40deg);  }
}
@keyframes spotlightR{
	0%{ opacity: 0; transform: rotate(20deg);}
	20%{ opacity: .5; }
	50%{ opacity: 0; transform: rotate(-40deg);  }
	100%{ opacity: 0; transform: rotate(-40deg);  }
}

@keyframes birdFly01{
	0%{ opacity: 0; transform: translateX(-20px);}
	50%{ opacity: .8;  }
	100%{ opacity: 0; transform:translateX(-50px);  }
}

@keyframes birdFly02{
	0%{ opacity: 0; transform: translateX(1200px);}
	50%{ opacity: .8;  }
	100%{ opacity: 0; transform:translateX(1150px);  }
}

@media screen and (min-width:768px){
	.Area_top .title-light {position:absolute; left: 545px;top: -76px;animation-delay:.8s;z-index: 2;mix-blend-mode: screen;}	
	.Area_top .stage-shine{position: absolute;top: 443px;left: 50%;transform: translateX(-50%);width: 100%;mix-blend-mode: screen;}	
	.Area_top .deco{position: absolute;top:361px;margin: 0 13%;}	
	.Area_top .bg-bird01{position: absolute;top: 150px;width: 10%;z-index: 3;left: -50px;opacity: .8;animation: birdFly01 4s infinite ease-in-out;}
	.Area_top .bg-bird02{position: absolute;top: 100px;width: 8%;z-index: 3;left: 1200px;opacity: .8;animation: birdFly01 5s infinite ease-in-out}
	.m_spolight-L { position: absolute; left: 194px; bottom: 72px; width: 423px; opacity: 0; z-index: 51; animation: spotlightL 4s infinite alternate ease-in-out; transform-origin: bottom left;pointer-events: none;}
	.m_spolight-R { position: absolute; right: 186px; bottom: 72px; width: 423px; opacity: 0; z-index: 51; animation: spotlightR 4s infinite alternate ease-in-out; transform-origin: bottom right; animation-delay: 2s;pointer-events: none;}
}
@media screen and (max-width:767px){
	.Area_top .title-light {position:absolute;left: 0;top: 0;animation-delay:.8s;z-index: 1;mix-blend-mode: screen;}	
	.Area_top .deco{position: absolute;top:18vw;}	
	.m_spolight-L { position: absolute; left: -8vw; bottom: 1vw; width: 60%; opacity: 0; z-index: 10; animation: spotlightL 4s infinite alternate ease-in-out; transform-origin: bottom left;pointer-events: none;}
	.m_spolight-R { position: absolute; right: -8vw; bottom: 1vw; width: 60%; opacity: 0; z-index: 10; animation: spotlightR 4s infinite alternate ease-in-out; transform-origin: bottom right; animation-delay: 2s;pointer-events: none;}
}


/*版頭區*/
@media screen and (min-width:768px){
.Area_top .toplogo {width: 70%;position: absolute;top: 56px;left: 16%; z-index: 1;}
.Area_top .toptitle {width: 66%;position: absolute;top: 145px;left:17.5%; z-index: 1;}
.Area_top .subtitle {width: 45%;position: absolute;top: 290px;left: 27.5%; z-index: 1;}
.Area_top .toppd {width: 77%;position: absolute;top: 431px;left:10%; z-index: 1;}
.Area_top .stage{position: absolute;top: 812px;left: 50%;transform: translateX(-50%);width: 60%;}	
.date-main{width:442px;position: absolute;left: 65vw;top: 324px;z-index: -1;}
.Area_top .date {position: relative;width:15%;top: 504px;left: 926px;z-index: 5;}
.Area_top .date a {pointer-events: none;}
.Area_top .lsubtitle{position: absolute;top: 240px;width: 22%;z-index: 5}
.Area_top .pdLight{width: 71%;position: absolute;top: 446px;left:12.5%; z-index: 1; mix-blend-mode: screen; }
}
@media screen and (max-width: 767px){
.Area_top .toplogo {width: 100%;position: absolute;top:5vw;left: 0;z-index: 6;}
.Area_top .toptitle {width: 100%;position: absolute;top:15vw;left: 0;z-index: 6;}
.Area_top .subtitle {width: 60%;position: absolute;top:32vw;left: 20%;z-index: 6;}
.Area_top .toppd {width: 100%;position: absolute;top:50.5vw;left: 0;z-index: 6;}
.Area_top .stage{position: absolute;top:92.5vw;width:90%;margin:0 4% }	
.date-main{width:41%;position: absolute;left: 70vw;top: 34vw;z-index: -1;}
.date{width:18%;position: absolute;left: 79vw;top: 38vw;}
.Area_top .lsubtitle{position: absolute;top: 23vw;width: 24%;z-index: 5;left: -7vw;}  

}
	

/*副標*/
.sub .PD_layout ul{display: flex;padding: 0;}
@media screen and (min-width: 768px){
.sub {position: absolute;top: 304px;left: 159px;width: 920px ;height: 165px;z-index: 30;overflow: hidden;}	
.sub .PD_layout .PD img {width: 78%;}	
}
@media screen and (max-width:767px){
.sub {position: absolute;top:35.7vw;left: 0;width: 100%;z-index: 30;overflow: hidden;}
.sub .PD_layout .PD img {width: 90%;padding: 0;}
}




/*小標題*/
.titilenoa a { pointer-events: none; }
@media screen and (min-width:768px){
.layouttxt_960 { width: 85%; margin:65px auto 15px; position: relative; z-index: 2; }
.layouttxt_960 img { width: 100%; }
.layouttxt_1220 { width: 50%; margin:65px auto 15px; position: relative; z-index: 2; }
.layouttxt_1220 img { width: 100%; }
}
@media screen and (max-width:767px){
.layouttxt_960 { width: 96%; margin:8vw auto 2vw; position: relative; z-index: 2; }
.layouttxt_1220 { width: 78%; margin:8vw auto 2vw; position: relative; z-index: 2; }
}	





/*01_攻略*/
.Area03{margin:0 auto;}
.Area03 .danji_box{width: 100%;}
.Area03 .formula ul{ padding: 0!important; }
.Area03 .actBN{ position: relative; }
.Area03 .actBN:before{ content: ""; position: absolute; top: -80px; right: -4px; background: url(ray.png?t=1757488997308) no-repeat center / 100%; width: 240px; height: 178px; z-index: 5; mix-blend-mode: screen;}
@media screen and (min-width:768px){
	.Area03 .formula {width: 100%;margin: 40px 0 15px;}
	.Area03 .Area_danji{width: 960px;}
	.Area03 .Area_danji li {margin-bottom: 10px !important;}
	.Area03 .Area_3btn .PD_layout ul {padding: 0px !important;}
	.Area03 .Area_3btn .PD_wrapper {grid-gap: 20px !important;}
}
@media screen and (max-width:767px){
	.Area03 .formula {width: 100%;margin-bottom: 2.5vw;}
	.Area03 .Area_danji{width: 96%;}
	.Area03 .Area_danji li {margin-bottom: 1vw !important;}
	.Area03 .Area_3btn { width: 91%; margin: auto;}
	.Area03 .Area_3btn .PD_layout ul {padding: 2vw 0px 0vw !important;}
	.Area03 .Area_3btn .PD_wrapper {grid-gap: 3vw !important;}
	.Area03 .actBN:before{ top: -21.5vw; right: -1vw; width:27vw; height: 178px; }
}




/*主打品*/
.Area04{ margin-bottom: 250px; }
.Area04 .PD_layout.layout_item .PD_slide .PD p {padding: 1% 0;height: 1.5em;line-height: 1em;font-size:5.5em;}
.Area04 .PD_layout.layout_item .PD p .money {color: #e823ae;font-weight: 500; font-size: .7em;}
.Area04 .PD_layout.layout_item .PD p .Price {color: #e823ae;font-weight: 800; font-size: 1em; text-align: left;}
.Area04 .PD_layout.layout_item .PD_slide .PD_into h3 {padding: 0;max-height: 1.6em;font-weight: 500;font-size: 3.5em;line-height: 1.5em;font-family: "Noto Sans CJK SC";color:#3e469e; margin: 12px 0 0;}
.Area04 .PD_layout.layout_item .PD_slide .PD_into h4 {font-size: 3.2em;color: #3e469e; font-weight: 700; line-height: 1em; }
.Area04 .PD_layout.layout_item .PD_slide .PD p del { color:#e823ae;font-size: 0.4em;}
.Area04 .PD_layout.layout_item .PD_slide .PD_img img { width: 100%; margin: 0; box-shadow: unset;}
.Area04 .PD_layout.layout_item ul li{ position: relative; }
@media screen and (min-width:768px){
  .Area04 .PD_layout.layout_item li{background: url("layout_itembg.png?t=1757488997308") center top / 100% no-repeat scroll;}	
	.Area04 .PD_layout.layout_item ul { grid-gap: 2% 4%;  margin-top: 85px; padding: 0;}
	.Area04 .PD_layout.layout_item .PD_slide:hover {transform:translateY(-6px);}
	.Area04 .PD_layout.layout_item .PD_slide:hover { box-shadow:unset;}
	.Area04 .PD_layout.layout_item .PD_slide { padding:2px 30px 19px; margin: 0;}
  .Area04 .PD_layout.layout_item ul li:nth-child(even){ top:50px; }
	.Area04 .PD_layout.layout_item .PD_slide .PD_into {padding-left:0;position: relative; text-align:center;font-size: 0.8em;bottom: 27px;}

}
@media screen and (max-width:767px){
	.Area04{  margin: 6vw 0 17vw;}    
  .Area04 .PD_layout.layout_item li{background: url("layout_itembg.png?t=1757488997308") center top / 100% no-repeat scroll;}	
	.Area04 .box_all{ width: 96%; margin: auto;}
	.Area04 .PD_layout.layout_item ul { grid-gap: 1% 2%;  width: 96%;}
	.Area04 .PD_layout.layout_item ul li {width: 100%;  padding: 1.5vw 3.5vw 0;}
	.Area04 .PD_layout.layout_item .PD_slide .PD_into {font-size: 0.9em; margin: 0 auto; width: 100%;}
	.Area04 .PD_layout.layout_item .PD_slide .PD_into h3 { font-size: 1.3em; line-height: 2em;  margin: .5vw 0 0;}
	.Area04 .PD_layout.layout_item .PD_slide .PD_into h4 { font-size: 1.3em; line-height: 1.7em;  letter-spacing: -1px; margin-bottom: 0;}
	.Area04 .PD_layout.layout_item .PD_slide .PD p{ height: 2em; line-height: 8vw; font-size: 1.5em;  }    
	.Area04 .PD_layout.layout_item .PD p .money { font-size: .4em;}
	.Area04 .PD_layout.layout_item .PD p .Price { font-size: 1.3em; }
  .Area04 .PD_layout.layout_item ul li:nth-child(even){ top:5vw; }
.Area04 .PD_layout.layout_item .PD_slide .PD_into {padding-left:0;position: relative; text-align:center;font-size: 0.8em;bottom: 2.5vw;}

}


/*BN*/
.Area_bn {margin-bottom: 40px; background-size: 100%;}
@media screen and (max-width:767px){
.Area_bn { margin-bottom:0vw; overflow: hidden;}
}
/*輪播BN*/
.BN_swiper { position: relative; margin: 0 auto; overflow: hidden; z-index: 1;}
.BN_swiper ul.PD_wrapper { display: flex; flex-wrap: nowrap; margin: 0; padding: 0 0 20px; width: 100%; grid-gap: 0; box-sizing: content-box; height: 337px;}
.BN_swiper ul.PD_wrapper li { position: relative; flex-shrink: 0; margin: 0; padding: 0; pointer-events: inherit;}
.BN_swiper ul.PD_wrapper li.PD_slide { min-width: inherit;}
.BN_swiper ul.PD_wrapper li.PD_slide:hover { box-shadow: 0 3px 30px rgba(0, 0, 0, 0);}
@media screen and (max-width:767px){
  .BN_swiper { width: 100%; margin: 0 auto; }
  .BN_swiper ul.PD_wrapper { margin: 0; padding: 0 0 4%; height:53vw;}
}


/*輪播公版*/
@media screen and (min-width:768px){
.Area_4pd01 { overflow: hidden;position: relative;bottom: 100px;margin-top: 100px;}
.Area_4pd02 { overflow: hidden;position: relative;}
.purplebg { background-color: #2e3268;height: 460px;}
.Area_4pd01 .Area_swiper { margin-top: 105px; }
}
@media screen and (max-width:767px){
.Area_4pd01 { overflow: hidden;position: relative;bottom: 13vw;margin-top: 13vw;}
.Area_4pd02 { overflow: hidden;position: relative;}
.purplebg { background-color: #2e3268;height: 86vw;}
.Area_4pd01 .Area_swiper { margin-top: 12vw; }
}


/*8顆按鈕*/
.Area05{ margin-top: -90px; }
.Area05 .PD_layout{ margin-top: 104px; }
.Area05 ul{ grid-gap:20px!important; }
@media screen and (max-width:767px){
	.Area05{ margin-top: 6vw; }
	.Area05 .PD_layout{ margin-top: 5vw; }
	.Area05 ul{ grid-gap:3vw!important; }
}


/*商品公版*/
.Area06 .PD_layout.pin{ margin-top: 100px; }
@media screen and (max-width:767px){
	.Area06{ margin-top: 4vw; }
	.Area06 .PD_layout.pin{ margin-top: 4vw; }
}


/*04_旗艦館*/
.Area09 {margin:0 auto;background: url(Area01_bg.png?t=1757488997308) no-repeat top center / 100% 100%;  padding-bottom: 20px; margin: 100px auto 40px;}
.Area09 .PD_layout[data-pd-col-pc="3"] ul{gap: 8px;}
.Area09 .PD_layout[data-pd-col-pc="3"] .PD_into{padding: .5em 1em;}
.Area09 ul { padding:2px 50px 30px!important; }
.Area09 ul li{background-color: #fff;border-radius: 20px;}
@media screen and (max-width:767px){
	.Area09{ margin: 11vw auto 6vw; padding-bottom: 2vw; background: url(Area01_bg.png?t=1757488997308) no-repeat top center / 96% 100%;}
	.Area09 .PD_layout[data-pd-col-pc="3"] ul{gap: 8px;padding: 0 3vw 3vw;}
	.Area09 .PD_layout[data-pd-col-pc="3"] .PD_into{padding: .5em 1em;}
	.Area09 ul { padding:1vw 6vw 2vw!important;}
	.Area09 ul li{background-color: #fff;border-radius: 2vw;}
}



/*1220 MB尺寸96%*/
@media screen and (max-width:767px){
  .mb1220size {width: 96% !important;}
  }




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


/*注意事項區*/
.edm_notice{ text-align:center; padding:10px 10px 15px 10px; color:#252525; font:12px/18px Helvetica;}
.edm_notice .apple_notice{  padding:10px 0px 10px 0px; }