body {font: 13px/1.6em "Century Gothic", Arial, 'Microsoft JhengHei', "蘋果儷中黑", "儷黑 Pro", "新細明體", "sans-serif"; color: #000; min-width: 1050px;}
a {text-decoration: none; display: inline-block;}
:focus {outline: none;}
i {font-style: normal;}
.header, .footer {width: 100%; margin: auto;}
.display_pc {display: block;}
.display_m {display: none;}
#ProductList_pro_temp {display: none;}
.tag_wfe {display: none;}

.main{background: url(../images/main_bg.jpg) center top #fff;}

/*kv*/
.kv_wrapper {width: 100%; border-bottom: 3px solid #d5ab45;overflow: hidden;
    -webkit-box-shadow: 0 5px 5px 0 rgb(0 0 0 / 20%);
    box-shadow: 0px 5px 5px rgb(0 0 0 / 20%);}
.kv_logo {position: absolute; top: 0px; left: 39px; z-index:999;}
.kv_container {position: relative; margin: auto; width: 1200px; height: 400px; z-index: 1; }
.kv_slogan {position: absolute; left: 0px; top: -50px; margin: auto; z-index: 1;}

.foods_bg { background: url("../images/foods/kv_top_moon1.jpg") no-repeat center top #fff;}
.foods_group_bg { background: url("../images/foods/kv_top_moon2.jpg") no-repeat center top #fff;}


/**bn輪播**/
.bn_wrapper {width: 1090px; margin: auto; margin-top: 35px; margin-bottom: 60px; padding: 15px 15px; overflow: hidden; border: 10px solid #f1f1f1; background: #fff;
    -webkit-box-shadow: 0 5px 5px 0 rgb(0 0 0 / 30%);
    box-shadow: 0 5px 5px 0 rgb(0 0 0 / 30%);}
.bn_container {width: 1090px; position: relative;}
.bn_container .swiper {width: 1070px; height: 100%;}
.bn_container .swiper-slide {text-align: center;}
.bn_container .swiper-slide img {display: block; width: 100%; height: 100%; object-fit: cover;}   
.swiper-button-next, .swiper-rtl .swiper-button-prev {background-color: rgb(177 153 88 / 50%); width: 50px; height: 70px; border-radius: 40px; color: #fff;}
.swiper-button-prev, .swiper-rtl .swiper-button-next {background-color: rgb(177 153 88 / 50%); width: 50px; height: 70px; border-radius: 40px; color: #fff;}
.swiper-button-next:after, .swiper-button-prev:after {font-size: 30px;}
.swiper-pagination-bullet-active {background-color: #d7ad51b3;}

/**熱門品牌**/
.brand_main {width:1050px; margin:0 auto; overflow:hidden; padding: 5px 5px 0;}
.brand_main .swiper-container {position: relative;}
.brand_product a {width: 247.5px;}
.brand_product {margin-bottom: 30px; text-align: center;}
.brand_img {position: relative; width: 70%; margin: auto; overflow: hidden; background-color: #fff; border: 1px solid #ccc; border-radius: 50px; padding: 20px;}
.brand_img img {position: relative; display: block; width: 100%; height: 100%; transition: all 1s;}
.brand_img:hover img {-webkit-transform: scale(1.2, 1.2);-moz-transform: scale(1.2, 1.2);-ms-transform: scale(1.2, 1.2);-o-transform: scale(1.2, 1.2);transform: scale(1.2, 1.2);}
.brand_detail {padding-top: 5px;}
.brand_name {width: 100%; font-size: 15px;  line-height: 30px; font-weight: bold; color: #fff; background: #333; border-radius: 30px; display: inline; padding: 5px 20px;}

/**prod**/
.prod_wrapper {position: relative;}
.prod_container {position: relative; z-index: 100;}
.ProductList {position: relative; z-index: 500; margin: auto; width: 1160px;}
.ProductList:after {clear: both; display: table; content: '';}
.ProductList .item {position: relative;  float: left; width: 220px; margin-left: 6px; margin-right: 6px; margin-bottom: 12px; text-align: center;}
.ProductList .item > a {position: relative;  display: block;  background: #fff;}
.ProductList .ProductImg {position: relative;  overflow: hidden;  margin: 0 auto;  width: 220px;  height: 220px;}
.ProductList .ProductImg img {position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; max-width: 100%; max-height: 100%; -webkit-transition: ease-out .1s;  transition: ease-out .1s;}
.ProductList .item > a:hover .ProductImg img {transform: scale(1.05);  filter: brightness(110%);}
.ProductList .ProductDesc {overflow: hidden; border-radius: 0px; background: #333; height: 30px; color: #fff; font-weight: bold; font-size: 13px; line-height: 30px; padding: 0 10px;}
.item .ProductName {overflow: hidden; padding: 4px 5px; height: 35px; color: #000; text-align: center; font-size: 15px; line-height: 19px;}
.item .ProducPrice, .item .Event_Condition {padding: 5px 2px; height: 46px; color: #ff6844;}
.item .ProducPrice label {cursor: pointer;}
.item .ProducPrice i em span {font-size: 13px;}
.item .ProducPrice i {display: flex; flex-direction: column-reverse;}
.item .ProducPrice span, .item .Event_Condition i span {margin: 0 2px; font-weight: 500; font-size: 30px;}
.item .ProducPrice i em {color: #747474; font-style: normal;}
.item .ProducPrice .price_txt {color: #F00; font-size: 15px; line-height: 26px;}
#group_2 p.ProductDesc {background: #b1976b;}

/**group**/
.group {position: relative; margin:0 0 70px 0;}
.tit {display: none;}
.group .tit {display: block !important; padding-bottom: 25px; text-align: center;}

/*title*/
.ProductList .item .sub_tit { display: none; position: absolute; z-index: 100; top: -580px !important; left: -18px !important;}
.title_txt {font-size: 60px; line-height: 60px;}
.title_txt i::before {position: relative; content: ""; width: 237px; height: 30px; background: url(../images/title_icon_life.png)no-repeat; display: inline-block; margin-right: 35px;}
.title_txt i2::before {position: relative; content: ""; width: 185px; height: 30px; background: url(../images/title_icon_sale.png)no-repeat; display: inline-block; margin-right: 35px;}
.title_txt a span {display: inline-block;  background: url(../images/title_icon_more.png) no-repeat;  width: 149px; height: 43px; margin-left: 35px; margin-top: 20px;}
.title_txt a:hover span {filter: brightness(120%);}

.item .counterNum:before {position: absolute; width: 30px; height: 30px; font-size: 13px; z-index: 1; background-color: #646464b3; color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;}
.group {counter-reset:num;}
#group_2 > .item .counterNum:before { counter-increment: num; content: counter(num);}

/*==============================================
common
==============================================*/
 :root {
    --animate-duration: 1s;
    --animate-delay: 1s;
    --animate-repeat: 1
}
.animate__animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: var(--animate-duration);
    animation-duration: var(--animate-duration);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}
.animate__animated.animate__delay-1s {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-delay: var(--animate-delay);
    animation-delay: var(--animate-delay)
}
@media (prefers-reduced-motion:reduce), print {
    .animate__animated {
        -webkit-animation-duration: 1ms !important;
        animation-duration: 1ms !important;
        -webkit-transition-duration: 1ms !important;
        transition-duration: 1ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important
    }
    .animate__animated[class*=Out] {opacity: 0;}
}

/*==============================================
flipInX
==============================================*/
@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }
    40% {
        -webkit-transform: perspective(400px) rotateX(-20deg);
        transform: perspective(400px) rotateX(-20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    60% {
        -webkit-transform: perspective(400px) rotateX(10deg);
        transform: perspective(400px) rotateX(10deg);
        opacity: 1
    }
    80% {
        -webkit-transform: perspective(400px) rotateX(-5deg);
        transform: perspective(400px) rotateX(-5deg)
    }
    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}
@keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }
    40% {
        -webkit-transform: perspective(400px) rotateX(-20deg);
        transform: perspective(400px) rotateX(-20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    60% {
        -webkit-transform: perspective(400px) rotateX(10deg);
        transform: perspective(400px) rotateX(10deg);
        opacity: 1
    }
    80% {
        -webkit-transform: perspective(400px) rotateX(-5deg);
        transform: perspective(400px) rotateX(-5deg)
    }
    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}
.animate__flipInX {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX
}


@media screen and (min-width: 1025px) {
  .NavArea {display: none; width: 130px; position: fixed; top: 100px; right: 0; z-index: 250;}
  .Nav-slide.active {background-color: #f9643c;}
  .Nav-slide.active a {color: #fff;}
  .Nav-slide.active a:hover {color: yellow;}
  .float_main { width: 120px; opacity: 0.9; filter: alpha(opacity=90);}
  .go_top { display: block; cursor: pointer;}
    
  .Nav-wrapper { background-color: #e4c182; width: 120px; border-radius: 50px; overflow: hidden;}
  .Nav-wrapper li {position: relative; font-size: 15px; text-align: center; background: transparent; margin: auto; padding: 5px 0 5px; }
  .Nav-wrapper li.highlight0 {font-size: 24px; line-height: 26px; border-radius: 20px 0 0 0; padding-top: 25px; padding-left: 2px; color: #f9643c; font-weight: bold;}
  .Nav-wrapper li.highlight1 {padding-left: 2px; background: #ffffff; width: 80%; border-radius: 20px;}
  .Nav-wrapper li.highlight2 a {font-size: 24px; border-radius: 0 0 20px 20px; padding-bottom: 20px; padding-left: 2px; color: #fff;}
  .Nav-wrapper li a {color: #000; font-weight: bold; cursor: pointer;}
  .Nav-wrapper li a:hover {color: #f9643c;}
  .Nav-wrapper li a:after { position: absolute; right: 51%; bottom: 0; left: 51%;  z-index: 1; height: 2px; background: #f9643c;  content: "";
  -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;
  -webkit-transition-duration: 0.3s; transition-duration: 0.3s;
  -webkit-transition-property: left, right; transition-property: left, right;}
  .Nav-wrapper a:hover:after {right: 10%; left: 10%;}
  .Nav-wrapper li.highlight2 a:after {height: 0;}
	
.Nav-wrapper .Nav-block {position: relative;
	width: 110px; margin: auto;
        margin-top: 15px; margin-bottom: 5px; padding: 10px 0;
        background: linear-gradient(to top, #fbe897 0%, #bf7613 38%, #fffed8 75%, #f9de7c 100%);
        border-radius: 10px;
        box-shadow: 0 -5px 15px -6px #c2782c, 0 -5px 10px -3px #c24d2c, 0 -2px 0 0 #740e08, 0 -3px 0 -1px #740e08, 0 -8px 0 -2px #740e08, 0 -10px 0 -3px #740e08, 0 -14px 0 -4px #740e08;}
    .Nav-block::before {
        content: ' '; display: block;
        border: 4px solid #0d676f;
        border-radius: 10px;
        margin: 2px;
        position: absolute;
        top: 0; bottom: 0;
        left: 0; right: 0;
        z-index: 1;}
    .Nav-block::after {
        content: ' '; display: block;
        background-color: #0d676f;
        border-radius: 6px;
        box-shadow: inset 2px 2px 5px rgba(0,0,0,.3);
        margin: 3px;
        position: absolute;
        top: 0; bottom: 0;
        left: 0; right: 0;
        z-index: 2;}
	.Nav-wrapper .Nav-block li {
        line-height: 30px;
        margin: 0px 7px 3px;
        padding: 0;
        border-radius: 1em;
        position: relative;
        z-index: 6;
        color: #fff;
        background: #ff6844;
        font-weight: bold;}
    .Nav-wrapper .Nav-block li a {
        background: #00666e;
        color: #fff;
        width: 100%;
    }


	
}

@media screen and (max-width:1024px) {
body {min-width: inherit;}
* {box-sizing: border-box;}
.gotop {background: url(//www.payeasy.com.tw/pay_event/pezlib/images/icon_top.png) no-repeat;  height: 36px; position: fixed; right: 5px; width: 36px; bottom: 10px; z-index: 101;display: none;}
.gotop a {display: block; width: 48px; height: 36px;}
.header {width: 100vw;}
.display_pc {display: none;}
.display_m {display: block}
    
.main {padding-bottom: 20px; background-size: 100%;}	

.kv_wrapper {background-size: 220%; 
    -webkit-box-shadow: 0 5px 5px 0 rgb(0 0 0 / 0%);
    box-shadow: 0px 5px 5px rgb(0 0 0 / 0%);}
.kv_container {width: 100vw; height: 45vw;}
.kv_container img{width: 100%;}
.kv_slogan {width: 120vw; top: -3vw; left: -10vw;}
	
.foods_bg {background: url("../images/foods/kv_top_moon1.jpg") no-repeat right top #fff;}	
.foods_group_bg {background: url("../images/foods/kv_top_moon2.jpg") no-repeat left top #fff;}
.foods_bg, .foods_group_bg {background-size: 220%;}
    
.bn_wrapper {position: relative; width: 100vw; padding: 0; height: auto; margin-top: 0; margin-bottom: 30px;}
.bn_container{ width: 100%;}
.bn_container .swiper {width:100%;}
.bn_container .swiper-slide {width: 100%;}
.bn_container .swiper-slide img {width: 100%;}
.bn_container .swiper-button-next, .bn_container .swiper-button-prev {display: none !important;}
	
.brand_main {width:85vw; margin: 0 auto; padding: 5px 0;}
.brand_product a {width: 40vw;}
.brand_img {border-radius: 30px; width: 100%; padding: 15px;}
.brand_product {margin-bottom: 7vw;}
.brand_name {font-size: 13px; line-height: 26px;}
	
.prod_wrapper {top: 0;}
.ProductList {width: 100vw;right: 0;}
.ProductList .item {width: 49vw; margin: 0 .5vw; margin-bottom: 10px;}
.ProductList .ProductImg {width: 49vw; height: 49vw; border: 0;}
.item .ProductName {color: #000; height: 40px; overflow: hidden; font-size: 14px; text-align: center; padding: 4px 5px; line-height: 18px;}
.item .ProducPrice span, .item .Event_Condition i span {font-size: 24px;}
.item .ProducPrice, .item .Event_Condition {height: 55px;}

/**group**/
.group {margin: 0; padding: 10px 0 0;}
.title_txt img {width: 100%;}
.tit_01 {width: 40vw; margin: auto;}  
.group .tit img {width: 100%;}
#group_1 {padding: 0;}
#group_title_1 {padding-bottom: 0;}

/**nav**/
.NavArea {display: none; position: fixed; top: 0; left: 0; right: 0;z-index: 998;}
.NavArea .Nav {position: relative; margin: 0; padding: 0; overflow-x: scroll; background: #000; border-bottom: 2px solid #ccc;}
.NavArea .Nav ul {display: flex;}
.NavArea .Nav li {z-index: 10;flex: none;}
.NavArea .Nav a {color: #fff; padding: 0 25px; height: 50px; font-size: 15px; line-height: 50px; font-weight: bold;}
.Nav-slide.active a {color: yellow;}
.NavArea li.highlight0 {display: none;}
.Nav-slide.active a {color: yellow; font-weight: bold; border-bottom: 2px solid yellow; background: #525252;}
	
  /**float**/
  .float_main {display: none;}
  .M_menu_wrap {display: block; position: absolute; }
  .M_menu_block {position: fixed; bottom: 0; width: 100%; z-index: 200;}
  .M_menu_block ul li {width: 50%;  box-sizing: border-box; text-align: center; float: left; height: 50px;  cursor: pointer;  background: rgb(0 0 0 / 80%);
    border-top: 1px solid #999;  border-right: 1px solid #666;  border-left: 1px solid #222;  padding-bottom: 7px;}
  .M_menu_block ul li:before {content: '';   display: inline-block;   vertical-align: middle; height: 100%;}
  .M_menu_block ul li a {display: inline-block;  width: 100%;  color: #fff;  font-size: 15px; line-height: 18px; vertical-align: middle;}
  .M_menu_block ul li.best a {color: yellow; }

}
	
@media screen and (max-width:540px) {
.title_txt {font-size: 24px; line-height: 24px; margin-top: 4vw;}
.title_txt i::before {width: 21vw; height: 3.5vw; background: url(../images/title_icon_life_m.png)no-repeat; background-size: 100%; margin-right: 3vw; margin-top: 0px;}
.title_txt i2::before {width: 17.5vw; height: 3.5vw; background: url(../images/title_icon_sale_m.png)no-repeat; background-size: 100%; margin-right: 3vw; margin-top: 0px;}
.title_txt a span {width: 18vw; background-size: 100%; height: 5vw; margin-top: 0px; margin-left: 3vw;}
.item .ProducPrice i em span {font-weight: bold;}
}