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


html, body{ background: #f5c0c7; }
/*基本*/
/* body { margin: 0; padding: 0; background: url("bg.png?t=1751019432617"); background-repeat: repeat-y; background-size: 100%;} */
@media screen and (max-width:767px){
	body { background: none; width: 100%;}}

/*全BOX版面*/
.WRAPPER { position: relative; display: inline-block; margin: 0; padding :0; width: 100%; overflow: hidden;}
.WRAPPER img { border: 0; vertical-align: top;}
.WRAPPER a { text-decoration: none; display: block;}
.WRAPPER .mainArea {  margin: 0 auto; width: 1220px; font-family:"Century Gothic", "微軟正黑體", sans-serif; position:relative;}
.WRAPPER .mainArea a { padding: 0; margin:0; text-decoration: none;}
.Area .list_00 ul { display: inline-block;}
.Area .list_00 li { list-style: none; float: left; overflow: hidden;}
@media screen and ( max-width:736px){
	.WRAPPER { min-width: inherit;}
	.WRAPPER .mainArea { padding-bottom: 0; width:100%;}
	.WRAPPER img { width: 100%; height: auto;}
}


/*背景*/
@media screen and (min-width: 768px){
  .Area_content04_bg { position: absolute; width: 1000%; height: 560px; background: url(Area_content04_bg.png?t=1751019432617); background-repeat: repeat-x; top: -45px; transform: translateX(-50%); pointer-events: none;}
}


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


/*可拖移廣告icon(修改)*/
.Area_hammerAD { z-index: 300; display: none; position: fixed; bottom: 0; right: 0; transform: translate3d(0,200px,0); /*background-color: rgba(0,0,0,0.5);*/}
.Area_hammerAD .box { position: relative; margin-right: 10px; opacity: 1;}
.Area_hammerAD img { width: 100%; height: auto;}
.Area_hammerAD .closeButton a { display: block; cursor: pointer; position: absolute; width: 20px; height: 20px; border-radius: 50%; font: bold 20px/1em "Century Gothic"; color: #FFF; text-align: center; background-color: rgba(0%,0%,0%,0.5); text-decoration: none; z-index: 2;}
    @media screen and (min-width:768px){
      .Area_hammerAD { position: fixed; z-index: 300; left: 50%; right: auto; bottom: 50px; display: block; width: 210px; height:200px; transform: translateX(618px);}
      .Area_hammerAD .closeButton a { top: 0; right: 0;}
      .Area_hammerAD_phone { display: none;}
    }
    @media screen and (max-width:767px){
      .Area_hammerAD { display: block; width: 26%;}
      .Area_hammerAD .closeButton a { top: 1vw; right: 1vw;}
    }


/*APP下載*/
.app { margin-bottom: 2vw;}
.app ul { width: 100%; margin: 0; padding: 0;}
.app ul li { width: 50%; list-style: none; overflow: hidden; float: left;}


/*版頭*/
.Area_top { height: 370px;}
.Area_top .t1{ position: absolute; top: 10px; left: 0; z-index: 1;}
.Area_top .top_bg{
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}
.Area_top .deco{ position: absolute;width: 96%; top: 40px; left: 0; z-index:2;}
.Area_top .deco img{ width: 100%;margin: 0 auto;}
.Area_top .deco2 {position: absolute; top: 218px;left: 653px; z-index: 2;}
.Area_top .btn_more {position: absolute; top: 70px; right: -98px; width: 80px; z-index: 9;}
.Area_top .btn_list {position: absolute; top: 120px; right: -98px; width: 80px; z-index: 9;}
	@media screen and (max-width:767px){
	.Area_top { height: 36vw;}
	.Area_top .top_bg { position: absolute;}
	.Area_top .t1 { position: relative; top: 0; left: 0; width: 100%; z-index: 4;}
	.Area_top .deco { position: absolute; top: .3vw; left: 0; width: 100vw; z-index: 5;}
	.Area_top .deco2 { position: absolute; top: 21.6vw;left: 68vw;width: 14.5%; z-index: 9;}	
	.Area_top .btn_more { position: absolute; z-index: 9; width: 14%; top: 4vw; right: 0;}		

}

.lightSweep {
	animation-delay: 1s;
  }

.lightSweep { position: absolute; bottom: 0;  background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); overflow: hidden; z-index: 30; pointer-events: none;
	-webkit-filter: brightness(1.5);
	-webkit-mask-size: 300% 200%;
	-webkit-mask-image: -webkit-linear-gradient( -45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%);
	-webkit-transition: -webkit-mask-position;
	-webkit-animation-timing-function: linear;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-filter: brightness(1.5);
	-moz-mask-size: 300% 200%;
	-moz-mask-image: -webkit-linear-gradient( -45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%);
	-moz-transition: -webkit-mask-position;
	-moz-animation-timing-function: linear;
	-moz-transform: translate3d(0, 0, 0);
	-o-filter: brightness(1.5);
	-o-mask-size: 300% 200%;
	-o-mask-image: -webkit-linear-gradient( -45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%);
	-o-transition: -webkit-mask-position;
	-o-animation-timing-function: linear;
	-o-transform: translate3d(0, 0, 0);
	filter: brightness(1.5);
	mask-size: 300% 200%;
	mask-image: -webkit-linear-gradient( -45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%);
	transition: -webkit-mask-position;
	animation-timing-function: linear;
	transform: translate3d(0, 0, 0);
	transition-duration: 2s;
	animation: move 2s ease-out infinite;
  }

/*調整MB box 間距*/
.Area_content .box{ position: relative; }
	@media screen and (max-width:767px){
        .Area_content { margin-bottom:0vw; }
		.Area_content .box{width: 100%;padding: 0vw;top: 0vw;}
        }

/*區塊_共同設定*/
.Area_content{ position: relative;  margin-bottom: 0;}
.Area_content .titleBox{position: absolute;padding: 0 0 20px;}
.Area_content .titleBox img{margin: 0 auto;width: 100%;}
.Area_content .titleBox .moreBtn{position: absolute; width: 90px; height: 46px; top:18px; right: 80px; background: url(more_btn.png?t=1751019432617) no-repeat center top; background-size: 100%;}
.Area_content .titleBox .moreBtn{position: absolute; width: 90px; height: 46px; top:40px; right: 150px; background: url(more_btn.png?t=1751019432617) no-repeat center top; background-size: 100%;z-index: 50}
@media screen and (max-width:767px){
	.Area_content{ }
	.Area_content .titleBox {padding: 0 0 2vw;}
}


/*01_首購禮*/
.Area_content01 .box{display: flex;position: relative;margin: 10px 0;justify-content: space-between;}
.Area_content01 .box .PD img {width: 100%;}
.Area_content01 .box .PD {min-width: 310px;filter: drop-shadow(1px 5px 8px #d478848f);}
.Area_content01 .titleBox {position: absolute;z-index: 30;left: 381px;top:9px;}
.Area_content01 .titleBox2 {position: absolute;z-index: 30;left:770px;top:9px;}
  @media screen and (min-width:768px){
.Area_content01{width: 960px;position: relative;}	 
}

  @media screen and (max-width:767px){
	.Area_content01{position: relative;width: 96%;margin: 0 auto;}
	.Area_content01 .box{display: flex;margin: 2vw 0;gap: 2vw;} 
	.Area_content01 .box .PD img {width: 100%;margin: 0;}
	.Area_content01 .box .PD {margin:0;min-width: unset;}  
	.Area_content01 .titleBox {position: absolute; top:4.3vw; left:32.8vw; width: 10vw;z-index: 30}
	.Area_content01 .titleBox2 {position: absolute; top:4.3vw; left:80.5vw; width: 10vw;z-index: 30}
	  
}



/*03_享會員好禮*/
.Area_content02 {margin-top: 52px;}
.Area_content02 .titleBox {position: relative; }
.Area_content02 .txtBox{font-size: 26px;color: #461e0a;padding: 0;margin: 0 0 12px;}
.Area_content02 .txtBox2{font-size: 26px; color: #fff;padding: 20px 0 15px 0}

/*調整PD*/
.PD_layout[data-pd-btn] .PD_btn { background-color: #fc2c22; background-image: repeating-linear-gradient(45deg, #fc2c22 -2%, #fc2c22 120%);}
@media screen and (max-width:767px){
	.Area_content02 {width: 96%; padding: 0 0 5vw 0;margin: 0 auto;}	
    .Area_content02 .titleBox { position: relative; top: 0; left: 0; width: 100%; z-index: 50; height: auto;}
	.Area_content02 .titleBox a {width: 50px !important; top: 4vw !important; position: absolute!important;}
	.Area_content02 .txtBox { font-size: 12px; position: relative; top:0; padding: 0;}
	.Area_content02 .txtBox2{ font-size: 14px; color: #fff; position: relative; top:0;}
}

/* 新客獨享神券 */
.Area_content02 .new_coupon{
	padding: 32px 0;
	filter: drop-shadow(1px 5px 8px #d478848f);
	@media screen and (max-width:767px){
		padding: 3vw 0;
	}
	ul{
		gap: 0;
		padding: 0;
		.PD_into{
			h3,h4{
				font-family:"Noto Sans TC", sans-serif,"Century Gothic", "微軟正黑體", sans-serif; 
				font-weight: 900;
				font-size: 3rem;
				text-align: center;
				@media screen and (max-width:767px){
					font-size: 5.5vw;
				}
			}
			h3{
				top: 180px;
				color: #8f3677;
				@media screen and (max-width:767px){
					top: 18vw;
				}
			}
			h4{
				top: 130px;
				color: #ec4dc1;
				@media screen and (max-width:767px){
					top: 12.5vw;
				}
			}
		}
	}
}
/* 公版區-左上ACT */
.box .act { position: relative; }
.box .act { z-index: 99; position: absolute; top: -25px; left: 0; width: 20%; }
.box .act img { width: 100%; }
@media screen and (max-width:767px){
	.box .act {  top: -1.5vw; left: 0; width: 29%; }
	  
}

/* 自體發光動畫 */
.glow {
	-webkit-animation: glow 1s ease-in-out infinite alternate;
	-moz-animation: glow 1s ease-in-out infinite alternate;
	animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
from {
	filter: drop-shadow(1px 2px 10px#ffffff);
}

to {
	filter: drop-shadow(1px 1px 0px#ffffff);
}
}

.Area_content02 .new_coupon:hover{
	transition: .5s;
	filter: unset;
}

/*記錄浮層*/
.refArea { width:760px; position:relative; display:block; margin: 0 auto; padding:20px 100px; height: auto; background-color:rgba(0,0,0,0.8); border-radius:20px;}
.refArea img { vertical-align:bottom;}
.refArea .closeBN a { z-index:2; position:absolute; top:-20px; right:-20px; display:block; width:40px; height:40px; border-radius:50%; border:solid 2px #999999; font:bold 40px/1em "Century Gothic"; color:#FFF; text-align:center; background-color:rgba(0%,0%,0%,0.5);text-decoration: none;}
.refArea .closeBN a:hover { background-color:#666; text-decoration:none}
.refArea .title  { margin:0 20px 0px; border-bottom:1px solid #ffd800; font:bold 45px/2em "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;letter-spacing: -0.05em;  color:#ffd800; text-align:center}
.refArea .box { margin: 10px auto; padding: 20px 20px; text-align:center;}
.refArea .box a { display:block;}
@media screen and (max-width:767px){
		.refArea { width:90%; padding:20px 0}
		.refArea .title  { margin:0 5%; font-size:30px;}
		.refArea .closeBN a { top:-15px; right:-15px; width:30px; height:30px; font-size:30px;}
}

/*分享浮層*/
.FBLINEArea { width:960px; position:relative; display:block; margin: 0 auto; padding:20px 0px; height: auto; background-color:rgba(0,0,0,0.8); border-radius:20px;}
.refArea img { vertical-align:bottom; width:100%;}
.FBLINEArea .closeBN a { z-index:2; position:absolute; top:-20px; right:-20px; display:block; width:40px; height:40px; border-radius:50%; border:solid 2px #999999; font:bold 40px/1em "Century Gothic"; color:#FFF; text-align:center; background-color:rgba(0%,0%,0%,0.5);text-decoration: none;}
.FBLINEArea .closeBN a:hover { background-color:#666; text-decoration:none}
.FBLINEArea .title  { margin:0 50px 10px; border-bottom:1px solid #fff59c; font:bold 45px/2em "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;letter-spacing: -0.05em;  color:#fff59c; text-align:center}
.FBLINEArea .box { margin: 10px auto; padding: 20px 20px;}
.FBLINEArea .box a{ display: block; margin: 20px auto 30px; width: 702px; height: 118px; }
@media screen and (max-width:767px){
		.FBLINEArea { width:90%;}
		.FBLINEArea .title  { margin:0 5%; font-size:30px;}
		.FBLINEArea .closeBN a { top:-15px; right:-15px; width:30px; height:30px; font-size:30px;}
	    .FBLINEArea .box a{ display: block; width: 85%; height:auto; }
		.FBLINEArea .box img{width: 100%;margin: 0; }
}	
	
.agreeArea .box li { text-align: left;}

/*折價券浮層*/
.agree_coupon .agreeArea .box .txtArea{padding:30px 10px;}
.agree_coupon ul li.PD_slide:nth-of-type(odd){padding: 5px 0 5px 5px;}
.agree_coupon ul li.PD_slide:nth-of-type(even){padding: 5px 5px 5px 0;}
.agree_coupon ul li.PD_slide:first-of-type{width: 100%; padding-left: 2%;}


/** 入稿區基本 **/
.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;}


/*你可能會喜歡*/
.Area_b268 { margin-top: 120px;}
.Area_b268 .titleBox { padding: 0 0 20px 0;}
.Area_b268 .swiper-button-next, .swiper-button-prev { color: #fff;}
.swiper-pagination-bullet { background: #fff; opacity: .5;}
.swiper-pagination-bullet-active { background: #fff; opacity: 1;}
.Area_b268 .Area_swiper .PD .prdName { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow: hidden;}
@media screen and (min-width:768px){
  .Area_b268 .titleBox img{ position: relative; top: 0px; left: 0;}
  .Area_b268 > .Area_boxstyle_box { min-height: auto;}
  #bt_0_layout_b268 .b268_swiper {  margin: 20px 30px; padding: 0; box-sizing: border-box;}
  .Area_b268 .Area_swiper { width: 95%; overflow: visible;}
  #bt_0_layout_b268 .b268_swiper { overflow: hidden;}
  .Area_b268 .swiper-button-next { right: -40px;}
  .Area_b268 .swiper-button-prev { left: -40px;}
}
@media screen and (max-width:767px){
  .Area_b268 {margin-top: 4vw; background: url(Area_content04_bg.png?t=1751019432617); background-size: 10%; background-repeat: repeat-x;}
  .Area_b268 .titleBox { position: relative; padding: 4vw 0 2vw 0;}
  .Area_b268 .titleBox img {width: 100%;}
  .Area_b268 .Area_swiper { position: relative;}
  .Area_b268 > .Area_boxstyle_box { /*padding: 8vw 0.5vw 4vw 0;*/ }
  .Area_b268 .Area_boxstyle_box { padding-left: 0 !important;  padding-right: 0 !important;}
  #bt_0_layout_b268 .b268_swiper { padding-top: 1vw; padding-bottom: 0vw;}
}


/*你可能會喜歡*/
/*.Area_b268 .Area_boxstyle_button.swiper-button-next::before,
.Area_b268 .Area_bigBrand .Area_boxstyle_button.swiper-button-prev::before { background-color: RGB(255 255 255/0.75);}
.Area_b268 .swiper-button-next::after,
.Area_b268 .swiper-button-prev::after {color: #fff;}
.Area_b268 .PD_slide { box-shadow: 0 0 1em RGB(0 0 0/0.2);}*/


/*猜你喜歡-去除共用素材ul寬度更改*/
.Area_b268 .PD_layout ul {width: auto;}


/*飄-上下*/
.uptodown-play { -webkit-animation:uptodown-play 2s ease-in-out infinite alternate;
				         animation:uptodown-play 2s ease-in-out infinite alternate;}
	@-webkit-keyframes uptodown-play { 
		0%   { -webkit-transform: translate(0,10px); } 
		100% { -webkit-transform: translate(0,0);}
	}
	@keyframes uptodown-play { 
		0%   { transform: translate(0,-10px);} 
		100% { transform: translate(0,0);}
	}

/*飄-下上*/
.downtoup-play { -webkit-animation:downtoup-play 2s ease-in-out infinite alternate;
				         animation:downtoup-play 2s ease-in-out infinite alternate;}
	@-webkit-keyframes downtoup-play { 
		0% { 
			-webkit-transform: translate(0,0);  
		} 
		100% { 
			-webkit-transform: translate(0,-10px);
		}
	}
	@keyframes downtoup-play { 
		0% { 
			transform: translate(0,0);  
		} 
		100% { 
			transform: translate(0,-10px);
		}
	}



@keyframes bounceIn {
    from,20%,40%,60%,80%,to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
    }

    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3)
    }


    100% {
        transform: scale3d(0.97, 0.97, 0.97)
    }

    to {
        opacity: 1;
        transform: scale3d(1, 1, 1)
    }
}

.bounceIn {
    animation-duration: .75s;
    animation-name: bounceIn
}


/*放大縮小*/
.scaleDraw { -webkit-animation:scaleDraw .5s ; animation:scaleDraw .5s ;}
                @-webkit-keyframes scaleDraw {
                  0%   { transform:scale(0);}
                  100% { transform:scale(1)}
                }
                @keyframes scaleDraw {
                  0%   { transform:scale(0);}
                  100% { transform:scale(1)}
                }