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

/*基本*/
body{ margin: 0; padding: 0;}


/*全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 { border: 0; vertical-align: top;}
.WRAPPER a { text-decoration: none;}
@media screen and (max-width:767px){
  .WRAPPER { min-width: inherit; padding-bottom: 10vw; }
  .WRAPPER img {  width: 100%;  height: auto;}
}


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


/*背景*/
@media screen and (min-width:768px){
.bgfixed { z-index: 0; position: fixed; top: 0; left: 0; width: 100%; min-width: 1220px; height: 100%; background: url(bgfixed.jpg?t=1759229334864) no-repeat center top;}
.bgtxt { z-index: 0; position: fixed; width: 2000px; min-width: 1220px; top: 230px; left: 50%; transform: translateX(-50%); pointer-events: none;}
.bgtxt01 { height: 130px; background: url(bgtxt01.png?t=1759229334864) repeat-x center top; background-size: 1880px auto; margin-bottom: 20px;}
.bgtxt02 { height: 130px; background: url(bgtxt02.png?t=1759229334864) repeat-x center top; background-size: 1715px auto; margin-bottom: 20px;}
.bgtop { z-index: 0; position: absolute; top: 0; left: 0; width: 100%; min-width: 1220px; height: 100%; background: url(bgtop.png?t=1759229334864) no-repeat center top;}
}
@media screen and (max-width:767px){
  .bgfixed { z-index: 0; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url(bgfixed_m.jpg?t=1759229334864) no-repeat center 44px; background-size: 100%;}
  .bgtxt { z-index: 0; position: absolute; width: 100%; top: 34vw; left: 50%; transform: translateX(-50%); pointer-events: none;}
  .bgtxt01 { z-index: 0; height: 15vw; background: url(bgtxt01.png?t=1759229334864) repeat-x center top; background-size: 180vw auto;}
  .bgtxt02 { z-index: 0; height: 15vw; background: url(bgtxt02.png?t=1759229334864) repeat-x center top; background-size: 170vw auto;}
  .bgtop { z-index: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(bgtop.png?t=1759229334864) no-repeat center 44px; background-size: 100%;}
}
	
/*區塊_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);}
.Area .go_bt2 {
  -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_bt2:hover { 
  filter: brightness(130%);
  -webkit-transform: translateY(-10px);
     -moz-transform: translateY(-10px);
      -ms-transform: translateY(-10px);
       -o-transform: translateY(-10px);
          transform: translateY(-10px);
		  }
.Area1220 { margin: 0 auto; width: 1220px;}
.Area960 { margin: 0 auto; width: 960px; position: relative;}
@media screen and (max-width:767px){
  .Area .go_bt:hover {  
    -webkit-transform: none;
     -moz-transform: none;
      -ms-transform: none;
       -o-transform: none;
          transform: none;}
  .Area .go_bt2:hover { 
    filter: brightness(1);
    -webkit-transform: none;
       -moz-transform: none;
        -ms-transform: none;
         -o-transform: none;
            transform: none;
        }
  .Area1220 { width: 100%;}
  .Area960 { width: 100%;}

}

/*間距*/
.Area_bottom { margin-bottom: 50px;}
@media screen and (max-width:767px){
  .Area_bottom { margin-bottom: 10vw;}
}

/*共用樣式*/
.bgbox01 { width: 1180px; margin: 0 auto; padding: 0 20px 20px; box-sizing: border-box; background: url(bgbox01.jpg?t=1759229334864)top center repeat-y; border-radius: 110px 0 0 0;}
.bgbox02_repeat { background: url(bgbox02_m.png?t=1759229334864)top center repeat-y; padding: 37px 0 0; box-sizing: border-box; margin-top: -37px;}
.Area .title01 { padding: 55px 0 57px; background: url(titlebg01.png?t=1759229334864)top center no-repeat; background-size: 100%;}
.Area .title01 ul li h5 { color: #fff;}
.Area .title02 { padding: 22px 0 19px; background: url(titlebg02.png?t=1759229334864)top center no-repeat; background-size: 100%;}
.Area .title02 ul li h5 { color: #fff;}
.Area .title03 { padding: 22px 0 19px;}
.Area .title04 { padding: 55px 0 57px; background: url(titlebg04.png?t=1759229334864)top center no-repeat; background-size: 100%;}
.Area .title04 ul li h5 { color: #fff;}
.Area .title05 { padding: 25px 0 15px; margin: 0 auto 10px; background: url(titlebg05.png?t=1759229334864)top center no-repeat; background-size: 100%;}
.Area .title06 { padding: 16px 0; background: url(titlebg06.png?t=1759229334864)top center no-repeat; background-size: 100%;}
.Area .title06 ul li .PD { display: inline-flex;}
.Area .title06 ul li .PD_img { padding: 0; margin-right: 10px;}
.Area .title06 ul li h5 { color: #fff;}
.Area .content_swiper { overflow: hidden;}
.Area .NavArea_tabbar_page { width: 100%; margin: 0 auto 10px;}
.NavArea_tabbar_page .Nav .swiper-slide-active i { border: 1px solid #8480d7 !important; background-color: #8480d7 !important;}
@media screen and (max-width:767px){
  .PD_layout ul { width: 100%;}
  .bgbox01 { width: 96%; padding: 0 0.5em 0.5em; background: url(bgbox01_m.jpg?t=1759229334864)top center repeat-y; background-size: 100%; border-radius: 50px 0 0 0;}
  .bgbox02_repeat { background-size: 100%; padding: 4vw 0.5em 0; box-sizing: border-box; margin-top: -4vw;}
  .Area .title01 { padding: 6vw 0 5.5vw;}
  .Area .title02 { padding: 2vw 0;}
  .Area .title03 { padding: 3vw 0 2vw;}
  .Area .title04 { padding: 6vw 0 5.5vw;}
  .Area .title05 { padding: 2vw 0 1.5vw; margin: 0 auto 2vw;}
  .Area .title06 { padding: 2vw 0;}
  .Area .title06 ul li .PD { justify-content: center;}
  .Area .title06 ul li .PD_img { margin-right: 2vw; width: 24%;}

  .Area .NavArea_tabbar_page { width: 96%; margin: 0 auto 2vw;}


}

/*版頭*/
.Area_top {height:900px ; }
.Area_top .main {}
.Area_top .title {position: absolute; top: 58px; left:164px;width:877px ;}
.Area_top .date { position: absolute; top: 193px; left: 765px;width:300px ;}
.Area_top .discount {z-index: 10;position:absolute;top: 595px; right: 155px;}
.Area_top .star { position: absolute;top: 220px; left: 220px;}

.Area_top .topPD {z-index: 1;position: absolute;top:215px;left:130px ; width: 960px; margin: 0px auto; overflow: hidden; }
.Area_top .topPD ul.PD_wrapper { display: flex; flex-wrap: nowrap; margin: 0; padding: 0; width: 100%; grid-gap: 0; box-sizing: content-box; height: 659px;}
.Area_top .topPD ul.PD_wrapper li { position: relative; flex-shrink: 0; margin: 0; padding: 0; pointer-events: inherit; cursor: pointer; opacity: 0; transform: translate(5%,0);}
.Area_top .topPD ul.PD_wrapper li.swiper-slide-active { opacity: 1; transition: .8s ease-out; transform: translate(0,0);}
.Area_top .topPD ul.PD_wrapper li.PD_slide { min-width: inherit;}
.Area_top .topPD ul.PD_wrapper li.PD_slide:hover { box-shadow: 0 3px 30px rgba(0, 0, 0, 0);}


@media screen and (max-width:767px){
  .Area_top {height:87vw ;}
  .Area_top .title { width: 90%;top:5vw; left: 5vw;}
  .Area_top .date { width: 31.5%;top:20vw; left: 66vw;}
  .Area_top .discount {width: 32%; top: 60vw; left: 62vw;}
  .Area_top .star { width: 27.5%; top: 23vw; left: 10vw;}

  .Area_top .topPD { z-index: 1; margin: 23vw auto 0;top:0vw;left:0vw ; overflow: hidden; width: 100%;}
  .Area_top .topPD ul.PD_wrapper { height: 69vw;}
}

/*本週最強*/
.Area_toppd { position: relative;}
.Area_toppd .deco { position: absolute; top: 0; left: 0;}
.Area_toppd .title { position: absolute; top: 105px; left: 40px; width: 60px;}
.Area_toppd .bgbox01 { padding: 30px 0 10px; box-sizing: border-box; }
.Area_toppd .box4_swiper { width: 1090px; margin-left: 90px;}
.Area_toppd .box4_swiper ul.PD_wrapper { padding: 0 0 20px; height: 510px;}
.Area_toppd .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { top: 510px !important;}
@media screen and (max-width:767px){
  .Area_toppd {}
  .Area_toppd .title { top: 11vw; left: 3.5vw; width: 8vw;}
  .Area_toppd .bgbox01 { width: 98%; margin: 0 0 0 2%; padding: 1em 0 0.5em;}
  .Area_toppd .box4_swiper { width: 91%; margin-left: 9vw;}
  .Area_toppd .box4_swiper ul.PD_wrapper { padding: 0 0 4%; height: 64vw;}
  .Area_toppd .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { top: 63vw !important;}

}



/*領券再買 更划算!*/
.coupon {}
.coupon .bgbox02_repeat { padding:12px 0;}
.coupon .Area_coupon { margin: 0 auto;}
.coupon .Area_coupon .box { width:93% ;margin: 0 auto}

.coupon .PD_layout.PD_layout-coupon3 .PD .divine_coupon, .PD_layout.PD_layout-coupon3 .PD .threshold {color: #000000;}

@media screen and (max-width:767px){
  .coupon {}
  .coupon .bgbox02_repeat { padding-bottom: 3vw;}
  .coupon .Area_coupon { margin-top: 0vw;}
  .coupon .Area_coupon .box { width:96% ;margin: 0 auto}
}

/*登記活動!*/
.danji {}
.danji .Area_danji { margin-top: 20px;}
.danji .Area_danji .danji_box { width: 93%;}
.danji .warningTxt h3 { padding: 0;}
@media screen and (max-width:767px){
  .danji {}
  .danji .Area_danji { margin-top: 2vw;}
  .danji .Area_danji .danji_box { width: 95%;}
}


/*星潮來襲 暢銷首選!*/
.item { position: relative;}
.item .bg { position: relative;top: -20px;}
.item .star { position: absolute; top: 250px; left: 35px;}
.item .deco { position: absolute; top: 320px; right: 15px;}
.item .PD_box { position: absolute; top: 133px; left: 50%; transform: translateX(-50%); width: 960px;}
.item .PD_box ul { margin-top:0px ;}
.item .PD_box ul li { width: 480px; min-width: inherit;}
.item .PD_box ul li .PD_into { padding-top: 1em;}
.item .PD_box ul li .PD_into p { background: url(item_Pricebg.png?t=1759229334864)top center no-repeat; background-size: 50%; height: 3.8em; line-height: 3.8em; color: #fff; padding: 0 180px 0 120px;}
.item .PD_box ul li:nth-child(1) { left: 260px;}
.item .PD_box ul li:nth-child(1) .PD_into { position: relative; left: -55px; transform: skewY(3deg);}
.item .PD_box ul li:nth-child(2) { top: 38px; left: 0px;}
.item .PD_box ul li:nth-child(3) { top: -443px; left: 465px;}
.item .PD_box ul li:nth-child(4) { top: -320px; left: 8px;}
.item .PD_box ul li:nth-child(5) { top: -915px; left: 473px;}
.item .PD_layout .PD p .Price {font-size: 37px;font-weight: 800;}
.item .PD_layout .PD h4 {margin-bottom: .35em;font-size: 20px;}
@media screen and (max-width:767px){
  .item {}
  .item .bg { position: relative;top: 0px;}
  .item .star { width: 22%; top: 24vw; left: 4vw;}
  .item .deco { width: 21%; top: 43vw; right: 6vw;}
  .item .PD_box { top: 14.5vw; width: 100%;}
  .item .PD_box ul { margin-top:0vw ;}
  .item .PD_box ul li { width: 50%;}
  .item .PD_box ul li .PD_into { padding-top: 0.5em; width: 76%; margin: 0 auto;}
  .item .PD_box ul li .PD_into p { background-size: 90%; height: 4em; line-height: 2.3em; padding: 0 10vw 0 2vw;}

  .item .PD_box ul li:nth-child(1) { top: 1vw;left: 32.5vw;}
  .item .PD_box ul li:nth-child(2) { top: -6vw; left: 0vw;}
  .item .PD_box ul li:nth-child(3) { top: -68vw; left: 48vw;}
  .item .PD_box ul li:nth-child(4) { top: -70.5vw; left: 0vw;}
  .item .PD_box ul li:nth-child(5) { top: -144.5vw; left: 50vw;}
  .item .PD_layout .PD p .Price {font-size: 24px;font-weight: 800;}
  .item .PD_layout .PD h4 {font-size: 14px;}
}









/*爆品公版*/
@media screen and (min-width:768px){
.pdx6 { position: relative;}
.pdx6 .bg { position: absolute; top: -20px; left: 0;}
.pdx6 .Area .title03 { padding: 22px 0 19px;}
.pdx6 .bgbox01 {height: auto;margin-bottom: 70px!important;width:98%;}
}
@media screen and (max-width:767px){
  .pdx6 { position: relative;}
  .pdx6 .bg { position: absolute; top: -20px; left: 0;}
  .pdx6 .Area .title03 { padding: 3vw 0 2vw;}
  .pdx6 .bgbox01 {height: auto;margin-bottom: 10vw!important;width:100%;}
}








/*page_link */
.page_link {padding: 0;margin-bottom: 10px!important;width: 460px;height: 190px;}
.page_link .PD_layout {top: 20px;width: 100%;}
.page_link .PD_layout li{margin: 0px 0px 0px 0px;}
.page_link .PD_layout ul li{padding: 3%;}
.page_link .PD_layout .PD_img{width: 100%;}
@media screen and (max-width:767px){
	  .page_link {padding: 0 0 0;margin-bottom: 0vw!important;width: 58%;height: 26vw;}
    .page_link .PD_layout {top: 0vw;margin: 0vw 0vw 0vw 1.5vw;width: 100%;}	
    .page_link .PD_layout li{margin: 0 0 2% 0;}
    .page_link .PD_layout .PD_img{width: 100%;}	
    .page_link .PD_layout ul li{padding: 0%;}
}