@charset "utf-8";
/* CSS Document */
@media screen and (min-width: 768px){
.WRAPPER.Template_bg {background: url(bgrepeat.jpg?t=1790048852605)top center repeat-y;}
}

/*背景*/
.bgtop { z-index: 0; position: absolute; top: 0; left: 0; width: 100%; min-width: 1220px; height: 100%; background: url(bgtop.jpg?t=1790048852605) no-repeat center top;}
.topdeco { z-index: 0; position: fixed; top: 0; left: 0; width: 100%; min-width: 1220px; height: 100%; background: url(topdeco.png?t=1790048852605) no-repeat center top;pointer-events: none;}
.bgdeco {z-index: 1;position: absolute;top: 0;left: 0;width: 100%;min-width: 1220px;height: 100%;background: url(bgdeco.png?t=1790048852605) repeat-y center top;pointer-events: none;}
@media screen and (max-width:767px){
  .bgtop { position: absolute;min-width: inherit;  background: url(bgtop_m.jpg?t=1790048852605) no-repeat center 44px; background-size: 100%;}

}

.fixarea_tabbar {top:100px;}

/*版頭*/
.Area_top {position: relative;height: 756px;}
.Area_top .main ul {padding: 0; grid-gap: 0;}
.Area_top .main ul li { pointer-events: none;}
.Area_top .main01 {position:absolute;left: 182px;top: 146px;z-index: 1;}
.Area_top .main02 {position:absolute;left: 194px;top: 645px;z-index: 1;}
.Area_top .sub_bg {position:absolute;top: 340px;left: 184px;z-index: 3;pointer-events: none;}
.Area_top .top_deco01 {position:absolute;top: 139px;left: 346px;z-index: 2;pointer-events: none;}
.Area_top .top_deco02 {position:absolute;top: 581px;left: 802px;z-index: 2;pointer-events: none;animation: mask_lefttoright 1.8s 0.8s ease-in;}
.Area_top .top_deco03 {position:absolute;top: 440px;left: 92px;z-index: 2;pointer-events: none;}
@media screen and (max-width:767px){
  .Area_top {height: 79vw;}
  .Area_top .main01 {left: 5vw;top: 15vw;width: 90%;}
  .Area_top .main02 {left: 7vw;top: 67.5vw;width: 30%;}
  .Area_top .sub_bg {position: absolute;top: 35.5vw;left: 5.5vw;width: 49%;}
  .Area_top .top_deco01 {position: absolute;top: 15vw;left: 22.5vw;width: 65%;}
  .Area_top .top_deco02 {position: absolute;top: 60vw;left: 69.5vw;width: 25%;}
  .Area_top .top_deco03 {position: absolute;top: 46vw;left: -3.5vw;width: 108%;}
}

/*副標*/
.sub .PD_layout ul {display: flex;padding: 0;}
@media screen and (min-width: 768px){
.sub {position: absolute;top: 392px;left: 79px;width: 50%;height: 100px;z-index: 30;overflow: hidden;}	
.sub .PD_layout .PD img {width: 66%;}	
}
@media screen and (max-width:767px){
.sub {position: absolute;top: 40.5vw;left: -3vw;width: 58%;z-index: 30;overflow: hidden;height: 10vw;}
.sub .PD_layout .PD img {width: 70%;padding: 0;}
}

@media screen and (max-width:767px){
.Area_title_lbtclass {--top: 10px;}
}

/*今日限定*/
@media screen and (min-width: 768px){
.Area01 {position: relative;z-index: 3;}
.Area01 .Area01_bg {position: absolute;}
.Area01 .Area_swiper {padding-top: 128px;width: 99%;left: 5px;}
.Area01 .swiper-pagination-bullet {background-color: #fff;}
}
@media screen and (max-width:767px){
  .Area01 {position: relative;z-index: 3;}
  .Area01 .Area01_bg {position: absolute;}
  .Area01 .Area_swiper {padding-top: 13vw;}
  .Area01 .swiper-pagination-bullet {background-color: #fff;}
}

/*夯品嚴選 準點搶5折*/
@media screen and (min-width: 768px){
.Area03 {}
.Area03 .Area_title_lbtclass {--top: -65px;}
.Area03 .Area_title_lbtclass h3 {justify-content: left;margin-left: 42px;}
.Area03 .Area03_bg {position: absolute;top: 127px;z-index: 2;}
.Area03 .PD_layout-D3_03 {position: absolute;top: 0;margin-top: 103px;z-index: 2;width: 100%;}
.Area03 .PD_layout-D3_03 .PD .PD_logo {display: none;}
.Area03 .PD_layout-D3_03 ul {padding: 0 52px;}
.Area03 .PD_layout-D3_03 ul li .PD h3 {font-size: 37px;text-align: center;font-weight: 700;font-family: "Noto Serif TC";margin-top: 9px;}
.Area03 .PD_layout-D3_03 ul li .PD h4 {margin-top: 22px;font-size: 37px;text-align: center;font-weight: 700;font-family: "Noto Serif TC";width: 75%;}
.Area03 .Area_pd-carousel-sidelist_flex {padding-top: 0;width: 88%;margin: 0 auto;}
.Area03 .Area_pd-carousel-sidelist_flex .Area_item-visual {width: 39%;}
.Area03 .Area_pd-carousel-sidelist_flex .Area_item-list {width: 61%;height: 487px;}
.Area03 .Area_item-list .PD p {display: block;}
.Area03 .Area_item-list .PD_into {align-items: flex-start!important;}
.Area03 .Area_item-list .PD p .Price {font-size: 38px;}
.Area03 .Area_item-list .PD_layout li {padding: 15px 0!important;}
.Area03 .Area_item-visual .PD_layout .PD_into {padding: 18px 18px 0;}
}
@media screen and (max-width:767px){
  .Area03 {}
  .Area03 .Area_title_lbtclass h3 {justify-content: left;margin-left: 6vw;}
  .Area03 .Area03_bg {position: absolute;top: 14vw;z-index: 2;}
  .Area03 .PD_layout-D3_03 {position: absolute;top: 0;margin-top: 8.5vw;z-index: 2;width: 100%;}
  .Area03 .PD_layout-D3_03 .PD .PD_logo {display: none;}
  .Area03 .PD_layout-D3_03 ul {padding: 0 5vw;}
  .Area03 .PD_layout-D3_03 ul li .PD h3 {font-size: 18px;text-align: center;font-weight: 700;font-family: "Noto Serif TC";margin-top: 2.5vw;}
  .Area03 .PD_layout-D3_03 ul li .PD h4 {margin-top: 4.5vw;font-size: 18px;text-align: center;font-weight: 700;font-family: "Noto Serif TC";width: 75%;margin-bottom: 0;}
  .Area03 .Area_pd-carousel-sidelist_flex {padding-top: 1.3vw;width: 97%;margin: 0 auto;}
  .Area03 .Area_pd-carousel-sidelist_flex .Area_item-visual {width: 36%;}
  .Area03 .Area_pd-carousel-sidelist_flex .Area_item-list {width: 61%;}
  .Area03 .Area_item-list .PD p {display: block;}
  .Area03 .Area_item-list .PD_into {align-items: flex-start!important;}
  .Area03 .Area_item-list .PD p .Price {font-size: 23px;}
  .Area03 .Area_item-list .PD_layout li {padding: 2vw 0!important;}
  .Area03 .Area_item-visual .PD_layout .PD_into {padding: 2vw 2vw 0;}
  .Area03 .Area_item-list .PD p del {display: none;}
  .Area03 .Area_spacing {height: 3vw;}
}

/*熱銷TOP榜*/
@media screen and (min-width: 768px){
.Area04 {}
.Area04 .layout_BN ul {grid-gap:0;}
.Area04 .layout_PD01 ul {border-radius:0;}
}
@media screen and (max-width: 767px){
  .Area04 {}
  .Area04 .layout_BN ul {grid-gap:0;}
  .Area04 .layout_PD01 ul {border-radius:0;}
}

/*咖啡主打星*/
/*版頭公版上下標.關閉*/
.Area05 .layout_PD .imgTag {display: none !important;}
.Area05 .layout_PD .imgTagBottom {display: none !important;}
.Area05 .layout_PD .prdImgWrap .imgTagRectangle {display: none !important;}
@media screen and (min-width: 768px){
.Area05 {}
.Area05 .layout_PD .PD .PD_img {padding-top: 3px;}
.Area05 .PD_layout-CSSBG_01 li::after {background: none;padding-bottom: 139%;}
.Area05 .layout_PD .PD_slide .PD_img img {width: 93%;margin-left: -29px;border-radius: 0 90px 0 0;}
.Area05 .layout_PD .PD_slide .PD_into {position: relative;top: 17px;text-align: left;left: 52px;width: 85%;}
.Area05 .layout_PD .PD_slide .PD_into h3 {position: relative;max-height: 1.5em;font-size: 2em;color: #fff;}
.Area05 .layout_PD .PD_slide .PD_into h4 {position: relative;font-size: 1.8em;color: #fff;margin-bottom:0;}
.Area05 .layout_PD li .PD .PD_into p {position: relative;font-size: 1.8em;color: #fedba5;line-height: 1.2em;height: 1.4em;}
.Area05 .layout_PD .PD_slide .PD p del {position: relative;color: #fff;font-size: 25px;}
.Area05 .layout_PD li .PD p b {color: #fedba5;}
.Area05 .layout_PD .PD p .money {font-size: 35px;}
.Area05 .layout_item li .PD p .Price {font-weight: 700;color: #fedba5;font-size: 2.5em;}
}
@media screen and (max-width: 767px){
  .Area05 {}
  .Area05 .layout_PD .PD .PD_img {padding-top: 1vw;}
  .Area05 .layout_PD .PD_slide .PD_img img {width: 93%;margin-left: -2vw;border-radius: 0 90px 0 0;}
  .Area05 .layout_PD .PD_slide .PD_into {position: relative;top: 0vw;text-align: left;left: 5vw;width: 89%;}
  .Area05 .layout_PD .PD_slide .PD_into h3 {max-height: 1.5em;font-size: 0.9em;color: #fff;position: relative;}
  .Area05 .layout_PD .PD_slide .PD_into h4 {position: relative;font-size: 0.9em;color: #fff;margin: 0;}
  .Area05 .layout_PD li .PD .PD_into p {position: relative;font-size: 0.8em;color:#fedba5;}
  .Area05 .layout_PD .PD_slide .PD p del {color: #fff;z-index: 99;position: relative;font-size: 1em;}
  .Area05 .layout_PD li .PD p .Price {font-weight: 700;color:#fedba5;font-size: 2em;}
  .Area05 .layout_PD .PD p small {font-size: 1.4em;}	
  .Area05 .layout_PD li::after {padding-bottom: 138%;}
  .Area05 .PD_layout-CSSBG_01 li::after {background-image: none;}
}

/*風味名店集結*/
@media screen and (min-width: 768px){
.Area07 {}
.Area07 .Area07_logo {position:absolute;top: 56px;left: 255px;z-index: 2;}
.Area07 .Area_title_lbtclass h3 {left: 65px;}
}
@media screen and (max-width:767px){
  .Area07 {}
  .Area07 .Area07_logo {position:absolute;left: 28vw;width: 12%;top: 6vw;}
  .Area07 .Area_title_lbtclass h3 {left: 7vw;}
}

/*超強牌登場*/
@media screen and (min-width: 768px){
.Area09 {}
.Area09 .b_box {width: 96%;margin: 0 auto;}
.Area09 .PD_layout-D3_02 ul .PD .PD_logo {width: 23%;margin-left: 150px;padding: 6px !important;}
.Area09 .PD_layout-D3_02 ul {padding: 25px 0!important;}
.Area09 .PD_layout-D3_02 ul li .PD h3 {font-size: 43px!important;}
}
@media screen and (max-width:767px){
  .Area09 {}
  .Area09 .PD_layout-D3_02 ul .PD .PD_logo {width: 26%;margin-left: 6vw;padding: 1%;}
  .Area09 .PD_layout-D3_02 ul {padding: 1vw 0!important;}
  .Area09 .PD_layout-D3_02 ul .PD .PD_into {gap: 0em;}
}

/*獨家贊助好物*/
@media screen and (min-width: 768px){
.Area10 {}
.Area10 .b_box {width: 96%;margin: 0 auto;}
.Area10 .PD_layout-D3_02 ul li .PD h3 {padding-top: 10px;font-size: 34px;}
}
@media screen and (max-width:767px){
  .Area10 {}
}

/*下方公版*/
@media screen and (min-width: 768px){
.Area11 {}
.Area11 .layout_PD01 ul {border-radius:0;width: 96%;}
}
@media screen and (max-width:767px){
  .Area11 {}
  .Area11 .layout_PD01 ul {border-radius:0;}
}

/*登記活動*/
@media screen and (min-width: 768px){
.Area12 {}
.Area12 .warningTxt h3 {color: #000;}
.Area_danji .danji_box {margin-bottom: 0;}
}
@media screen and (max-width: 767px){
  .Area12 {}
  .Area12 .warningTxt h3 {padding-bottom: 3vw;color: #000;}
  .Area_danji .danji_box {margin-bottom: 0;}
}

/*精選品牌一次逛*/
@media screen and (min-width:768px){
.Area13 {}
.Area13 .layout_PD {width: 95%;}
.Area13 .layout_PD ul {grid-gap: 15px;padding:0}
.Area13 .layout_PD ul li {background:url(Area13_bg.png?t=1790048852605)top center no-repeat;background-size:100%;}
.Area13 .layout_PD .PD img {padding: 70px 0;}
}
@media screen and (max-width: 767px){
  .Area13 {}
  .Area13 .layout_PD {width: 96%;}
  .Area13 .layout_PD ul {grid-gap: 0.3em;padding: 0;}
  .Area13 .layout_PD ul li {background:url(Area13_bg.png?t=1790048852605)top center no-repeat;background-size:100%;}
  .Area13 .layout_PD .PD img {padding: 7vw 0;}
}