@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:"Century Gothic","Microsoft JhengHei","微軟正黑體", Arial, sans-serif; background-color: #ff411d;}
.WRAPPER img { width:100%;  height:auto;border:0px; vertical-align:top;}
.WRAPPER a { text-decoration:none; -webkit-tap-highlight-color: transparent}
	@media screen and (max-width:767px){
		.WRAPPER {min-width: inherit; min-height:100vh; overflow: hidden; background:url("mb_repeat.jpg?t=1782812222178")top center repeat-y;background-size: 100%;}
		.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;} 
.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: 96%;}
  /*區塊_切割*/
  .Area_1bn { margin: 0 auto; padding: 0; overflow: hidden;}
  .Area_1bn a { float: left; margin: 0 0 2% 0; padding: 0; width: 100%; list-style: none;}
  .Area_2bn { margin: 0 auto; padding: 0; overflow: hidden;}
  .Area_2bn a { float: left; margin: 0 1% 2%; padding: 0; width: 48%; list-style: none;}
  .Area_3bn { margin: 0 auto; padding: 0; overflow: hidden;}
  .Area_3bn a { float: left; margin: 0 1% 2% ; padding: 0; width: 31.3%; list-style: none;}
  .Area_1bn_nopadding { margin: 0 auto; padding: 0; overflow: hidden;}
  .Area_1bn_nopadding a { float: left; margin: 0; padding: 0; width: 100%; list-style: none;}
  .Area_2bn_nopadding { margin: 0 auto; padding: 0; overflow: hidden;}
  .Area_2bn_nopadding a { float: left; margin: 0; padding: 0; width: 50%; list-style: none;}
  .Area_3bn_nopadding { margin: 0 auto; padding: 0; overflow: hidden;}
  .Area_3bn_nopadding a { float: left; margin: 0; padding: 0; width: 33.3%; list-style: none;}
}

/*區塊背景*/
@media screen and (min-width:768px) {
	.top_bg01 {z-index: -27;position:absolute;top:0;left:0;width:100%;height: 1206px;background-repeat:no-repeat;background-position:center top;pointer-events:none;}		
	.bg_deco001 {z-index: 26;position:fixed;top: -194px;left:0;width:100%;height:100%;background-position:center 0px;background-repeat:repeat-y;transition:1s linear;pointer-events:none;}
	.bgtop03   {z-index:-45;position:absolute;top: 0px;left: 0px;width: 100%;height: 100%;background-repeat: repeat-y;background-position: center top;pointer-events:none;}
.bg_05 { z-index:-36; position:fixed;top:0; left:0; width:100%; height:100%; background-position:center 0px; background-repeat:repeat-y; transition:0.5s linear; pointer-events:none;}


}

  @media screen and (max-width:767px){	
	.mo_top { z-index:-60; position:absolute; top: 44px; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none;background-size: 100%;}	
  }
  
  


/*版頭區*/
@media screen and (min-width:768px){
.Area_title {height: 698px;}
.title_top  {position:absolute;width: 30%;top: 73px;right: 423px;pointer-events:none;z-index: 19;}
.title_top  img{width: 100%;}
.line_white_pc {position:absolute;width: 114%;top: 14px;left: -162px;pointer-events:none;z-index: -7;}
.line_white_pc  img{width: 100%;}
.line_white {display: none;}

.pic_01 {position:absolute;width: 5%;top: 81px;left: 290px;pointer-events:none;z-index: 1;}
.pic_01  img{width: 100%;}
.pic_02 {position:absolute;width: 6%;top: 476px;right: 237px;pointer-events:none;z-index: 1;}
.pic_02  img{width: 100%;}
.pic_03 {position:absolute;width: 10%;top: 117px;right: initial;pointer-events:none;z-index: 1;}
.pic_03  img{width: 100%;}
.pic_04 {position:absolute;width: 7.5%;top: 224px;right: 280px;pointer-events:none;z-index: 19;}
.pic_04  img{width: 100%;}
.pic_05 {position:absolute;width: 10%;top: 44px;right: 100px;pointer-events:none;z-index: 19;}
.pic_05  img{width: 100%;}
.pic_06 {position:absolute;width: 6%;top: 144px;right: 307px;pointer-events:none;z-index: 19;}
.pic_06  img{width: 100%;}
.l_girl {position:absolute;width: 37%;top: 436px;left: -440px;pointer-events:none;z-index: 19;}
.l_girl  img{width: 100%;}
.r_girl {position:absolute;width: 49%;top: 84px;right: -530px;pointer-events:none;z-index: 19;}
.r_girl  img{width: 100%;}


}
@media screen and (max-width: 767px){
.Area_title {height: 70vw;/* background-color: #761b39; */}
.title_top  {position:absolute;width: 39%;top: 8vw;right: 29vw;pointer-events:none;z-index: 11;}
.line_white  {position:absolute;width: 102%;top: 0vw;left: -1vw;pointer-events:none;z-index: -7;}
.line_white_pc  {display: none;}
.pic_01{position:absolute;width: 9%;top: 5vw;left: 20vw;pointer-events:none;z-index: 1;}
.pic_02{position:absolute;width: 9%;top: 47vw;right: 3vw;pointer-events:none;z-index: 1;}
.pic_03{position:absolute;width: 21%;top: -5vw;left: -6vw;pointer-events:none;z-index: 1;}
.pic_04{position:absolute;width: 11.5%;top: 21.5vw;right: 12vw;pointer-events:none;z-index: 11;}
.pic_05{position:absolute;width: 16%;top: 4vw;right: -4vw;pointer-events:none;z-index: 11;}
.pic_06{position:absolute;width: 8%;top: 17vw;right: 16vw;pointer-events:none;z-index: 11;}
.l_girl {position:absolute;width: 35%;top: 51vw;left: -6vw;pointer-events:none;z-index: 2;}
.r_girl {display: none;}
.scale {z-index: 0}



.left_mm {position:absolute;width: 34.5%;top: 29vw;left: -14vw;z-index: 0;opacity: 0;animation:  slideInRight 1s 0.3s forwards alternate,uptodown-play 3s 1.5s infinite alternate;}
.right_mm {position:absolute;width: 35.5%;top: 39vw;right: -14vw;z-index: 0;opacity: 0;animation:  slideInLeft 1s 0.3s forwards alternate,uptodown-play 3s 1.5s infinite alternate;}

}

/* 圖片區標 */
.box_title{
	margin-bottom: 2vw;
	@media screen and (min-width: 768px){
	  margin-bottom: 40px;
	}
}



/*主標入稿*/
.Area_title {

  /* 主標共用 */
  .title,
  .title02 {
    position: absolute;
    left: 3vw;
    right: 0;
    margin: auto;
    z-index: 1;

    .layout_title {
      left: 0;
      right: 0;
      margin: auto;

      .PD_slide {
        &:hover {
          transform: none;
        }
      }
    }
  }

  /* 個別差異 */
  .title {
    top: 10vw;
	width: 46%;
  }

  .title02 {
    top: 33.5vw;
    width: 82%;
  }

  .date  {
	position:absolute;
	width: 20%;
	top: 14.4vw;
	left: 8.7vw;
	z-index: 11;
    .TIMER_DAY{
			position: absolute;
      top: 4vw;
      left: 3vw;
			z-index: 2;
			color: #212121;
			font-family:"Century Gothic", "Noto Sans CJK SC","Microsoft JhengHei", Arial, Helvetica;
			font-weight: 600;
			transform: rotateZ(348deg);
			z-index: 5;
			@media screen and (min-width:768px){
        top: 37px;
        left: 33px;
				font-size: 2.5rem;
			}
			.date-txt{
				font-size: 1.4rem;
        line-height: 1.4rem;
				@media screen and (min-width:768px){
					font-size: 2.9rem;
					line-height: 3rem;
				}
			}
			p{
				margin: 0;
			}
		}
}

  /* 副標輪播 */
  .subtitle {
    position: absolute;
    width: 72%;
	padding: 2vw 0 1vw;
    top: 54vw;
    left: 16vw;
    overflow: hidden;
    animation: fadeInDown_s 0.5s 0.4s ease-in forwards;
    opacity: 1;
    z-index: 9;
	.title-bg{
		position: absolute;
		top: 0;
		left: 0;
	}
  }

  /* ✅ >=768px */
  @media screen and (min-width: 768px) {

    .title,
    .title02 {
      left: 0;
      right: 0;
      margin: auto;
      z-index: 7;

      .layout_title {
        .PD_slide {
          &:hover {
            transform: none;
          }
        }
      }
    }

    .title {
      width: 420px;
      top: 101px;
    }

    .title02 {
      width: 790px;
      top: 315px;
    }

	.date {
		position:absolute;
    width: 14%;
    top: 152px;
    left: 229px;
	}

    .subtitle {
      width: 611px;
      padding: 12px 0 20px;
      top: 504px;
      left: 293px;
      overflow: hidden;
      z-index: 8;
      animation: fadeInDown_s 0.5s 0.4s ease-in forwards;
      opacity: 0;
    }
  }
}


.Area_limit{
	width: 100%;
	background: url(area_limit_bg.png?t=1782812222178) no-repeat;
	background-size: cover;
	@media screen and (min-width:768px){
    background: none;
		width: 960px;
	}
	.box{
		padding: 3vw 0 3vw 1vw;
		display: flex;
		gap: 2vw;
		@media screen and (min-width:768px){
			padding: 24px 0;
      gap: 20px;
		}
		.box_title{
			width: 40%;
      @media screen and (min-width:768px){
        width: 15%;
      }
		}
	}
}


/* 熱搜話題*/
.Area_new{
	width: 100%;
	padding: 3vw 0;
  @media screen and (min-width:768px){
    width: 960px;
    padding: 24px 0;
  }
	&::after{
		content: "";
		background: url(area-new-bg.png?t=1782812222178) no-repeat;
		background-size: 100% 100%;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: -1vw;
		display: block;
		width: 100%;
		height: 97%;
		z-index: -1;
    @media screen and (min-width:768px){
      width: 2000px;
      bottom: -20px;
      height: 92%;
      background: url(area-new-bg.png?t=1782812222178) repeat;
      background-size: contain;
      background-position-x: 14.8%;
    }
	}
  .box{
    margin:  0 auto;
    width: 96%;
    @media screen and (min-width:768px){
      width: 100%;
    }
  }
}


/* 今日最低價*/
.Area_store {

	.box_title{
		margin: 0 auto;
    @media screen and (min-width:768px){
      margin-bottom: 28px;
    }
	}
	
  .box-group {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 4vw;
  }

  .box-item {
    padding: 4vw 2vw;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
	background: url("mb_orange02_bg.jpg?t=1782812222178") top center no-repeat;
    background-size: 100% 100%;
	box-sizing: border-box;

	&:nth-child(even){
		background: url("mb_momopink02_bg.jpg?t=1782812222178") top center no-repeat;
		background-size: 100% 100%;
	}
  }

  /** 區標 **/
  .sub-title {
    .PD_layout {
      .PD_into {
        display: flex;
        flex-direction: row;
        margin-bottom: 2vw;

        .PD_logo {
			padding: 3vw 5vw;
			width: 38%;
			border: .5vw solid #212121;
			position: relative;
			margin-bottom: 1.8vw;
			&::after{
				content: "";
				background: url(store-logo-arrow.png?t=1782812222178) no-repeat;
				background-size: contain;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: -1.8vw;
				display: block;
				width: 2.5vw;
				height: 1.8vw;
			}
        }

        h3 {
          width: 65%;
          font-size: 1.5em;
          line-height: 1.6em;
          color: #ffffff;
          position: relative;
        }
      }
    }
  }

  /* ✅ >=768px */
  @media screen and (min-width: 768px) {
    display: flex;
    flex-wrap: wrap;

  .box-group {
    display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
  }

    .box-item {
		padding: 24px 20px;
		margin: 0 auto;
		background: url("mb_orange02_bg.jpg?t=1782812222178") top center no-repeat;
		border: 1px solid #212121;
		background-size: 100% 100%;

		&:nth-child(even){
			background: url("mb_momopink02_bg.jpg?t=1782812222178") top center no-repeat;
			border: 1px solid #212121;
			background-size: 100% 100%;
		}
    }


    .sub-title {
      .PD_layout.PD_layout-D3_02 {
        .PD_into {
          margin-bottom: 8px;
		  gap: 12px;

          .PD_logo {
            width: 240px;
			padding: 16px 20px;
			border: 2px solid #212121;
			margin-bottom: 12px;
			&::after{
				content: "";
				background: url(store-logo-arrow.png?t=1782812222178) no-repeat;
				background-size: contain;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: -24px;
				display: block;
				width: 20px;
				height: 26px;
			}
          }

          h3 {
            width: 100%;
            font-size: 24px;
          }
        }
      }
    }
  }
}

.Area_topitem {
  width: 100%;
  @media screen and (min-width:768px){
    width: 960px;
  }	
  .box_title{
    position: relative;
    top: 1vw;
    @media screen and (min-width:768px){
      top: 44px;
    }
  }
  .box{
    background: url(pp_frame_middle.png?t=1782812222178);
    background-size: contain;
    padding: 1vw 4vw;
    @media screen and (min-width:768px){
      padding: 20px 36px;
    }
      &::before{
				content: "";
				background: url(pp_frame_top.png?t=1782812222178) no-repeat;
				background-size: contain;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: 9vw;
				display: block;
				width: 100%;
				height: 26px;
        z-index: -1;
        @media screen and (min-width:768px){
          height: 74px;
          top: 130px;
        }
			}
      &::after{
				content: "";
				background: url(pp_frame_bottom.png?t=1782812222178) no-repeat;
				background-size: contain;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: -6vw;
				display: block;
				width: 100%;
				height: 29vw;
        z-index: -1;
        @media screen and (min-width:768px){
          bottom: -59px;
          height: 282px;
        }
			}
  }
}

/* 區塊間距 */
.Area_bottom{
	margin-bottom: 6vw;
	@media screen and (min-width: 768px){
		margin-bottom: 60px;
	}
}


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