@charset "big5";
/* CSS Document */
body {min-width: 1200px; color: #333; font: 15px/1.6em "Century Gothic", Arial, 'Microsoft JhengHei', "蘋果儷中黑", "儷黑 Pro", "新細明體", "sans-serif";}
a {display: block; text-decoration: none; transition: linear .3s;}
:focus {outline: none;}
i {font-style: normal;}
.header, .footer {text-align: center; background: #fff;}
.display_pc {display: block;}
.display_m {display: none;}
.tag_wfe {display: none;}
*{box-sizing:border-box}

/*main*/
.main_wrapper { position: relative; width: 100%; overflow: hidden; 
background: url("../images/main_bg.jpg") fixed center center #b5dccf;}

/*kv*/
.kv_wrapper {background: url("../images/kv_bg.jpg")no-repeat center top;}
.kv_container {position: relative; z-index: 1; margin: auto; width: 1200px; height: 482px;}
.kv_slogan {position: absolute; top: 28px; left: 376px; z-index: 1;}
.kv_photo {position: absolute; top: 62px; left: 111px; z-index: 2;}

/*活動區*/
.event_pc {display: block !important;}
.event_m {display: none !important;}
.event_wrapper {width: 100%; height: auto; background: url(../images/calendar_bg.jpg) center top;
    -webkit-box-shadow: inset 0px 5px 5px rgb(0 0 0 / 20%);
    box-shadow: inset 0px 5px 5px rgb(0 0 0 / 20%);}
.event_container {position: relative; width: 1170px; margin: auto; padding: 50px 0;}
.event_photo {position: absolute; top: 153px; left: -247px; z-index: 2;}
.event_container ul {width: 100%; margin: auto; padding: 20px 28px; background: #fffae2; border: 1vw solid #f6612d; border-radius: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;}
.event_container li {padding: 10px;}

/**bn輪播**/
.banner_wrapper {padding-bottom: 20px;}
.banner-main {width: 1150px; margin: auto;
    display: flex;
    justify-content: space-around;}
.bn {position: relative; z-index: 2;}
.bn::after {content: ''; background: #56a68a; width: 535px; height: 218px;
    position: absolute; top: 10px; bottom: 0; right: 0; left: 10px; z-index: -1;}
@media(hover:hover) {
.bn a:hover {filter: brightness(110%); transform: scale(0.99);}
}

/**prod**/
.prod_wrapper {position: relative; padding-top: 70px;
    -webkit-box-shadow: inset 0px 5px 5px rgb(0 0 0 / 20%);
    box-shadow: inset 0px 5px 5px rgb(0 0 0 / 20%);
}
.prod_container {position: relative; z-index: 100;}
.ProductList {position: relative; z-index: 500; margin: auto; width: 1140px;}
.ProductList:after {content: ""; clear: both; display: table;}
.ProductList a {width: 100%;}
.group {position: relative; margin: 50px 0; padding-bottom: 30px; overflow: hidden;}
.group::before {content: ''; width: 100%; margin: auto; border-radius: 22px;
    position: absolute; top: 70px; bottom: 0; right: 0; left: 0; z-index: -2;
	box-shadow: inset 0 0 0 3px #e87750;}
.group::after {visibility: initial !important;
    content: ' '; display: block; height: auto; margin: 4px; border-radius: 18px;
    position: absolute; top: 70px; bottom: 0; left: 0; right: 0; z-index: -1;
	background-color: #299070; border: 2px solid #edf8e8;}
.product_wrapper {width: 100%;
    display: flex;
    justify-content: center;
    align-items: self-start;
    flex-wrap: wrap;
    gap: 10px;}
.product {position: relative; width: 245px; text-align: center; background: #fff; overflow: hidden; border-radius: 10px;
  -webkit-box-shadow: 0px 2px 2px 0px rgb(0 0 0 / 45%);
  -moz-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.45);
  box-shadow: 0px 2px 2px 0px rgb(0 0 0 / 45%);
  transition: all 0.4s;}
@media (hover: hover) {
  .product a:hover {transform: translateY(-5px);}
}

.prod_img {width: 100%; height: 245px; background-size: cover; background-position: 50%; background-repeat: no-repeat; transition: all 0.5s linear; background-color: #fff;}
.prod_details {height: 122px;}
.prod_desc {overflow: hidden; padding: 0 5px; height: 36px; color: #3e262b; font-weight: bold; font-size: 15px; line-height: 36px;
  background: #fdc945;
  width: 90%; margin: 2px auto; border-radius: 4em;}
.prod_tit {overflow: hidden; padding: 4px 5px; height: 40px; color: #000; text-align: center; font-size: 15px; line-height: 19px;}
.prod_money {padding: 0px 10px; height: 45px; color: #fd0017; position: relative; margin-top: 3px;}
.prod_money .price {margin: 0 2px; font-weight: 500; font-size: 32px; line-height: 37px;}

/*title*/
.title_wrapper {position: relative; padding-bottom: 15px;}
.title_wrapper .title {display: none;}
.ProductList a.more_link {display: block; text-indent: -9999px; width: 880px; margin: auto; height: 130px; transition: all 0.2s ease-in-out;}
.ProductList #title_1 a.more_link {
    background: url(../images/title01.png) center no-repeat;}
.ProductList #title_2 a.more_link {
    background: url(../images/title02.png) center no-repeat;}
.ProductList #title_3 a.more_link {
    background: url(../images/title03.png) center no-repeat;}
.ProductList #title_4 a.more_link {
    background: url(../images/title04.png) center no-repeat;}
.ProductList #title_5 a.more_link {
    background: url(../images/title05.png) center no-repeat;}
.ProductList #title_6 a.more_link {
    background: url(../images/title06.png) center no-repeat;}
@media (hover: hover) {
  .more_link:hover {
    transform: scale(0.98);
  }
}

/**otherbn**/
.otherbn-main {position: relative; z-index: 2; width: 1200px; margin: auto; overflow: hidden; padding-top: 10px; padding-bottom: 50px;
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    justify-content: center;}
.otherbn-slide {padding: 10px; border-radius: 20px; margin: 7px; overflow: hidden; background: #fff;}
.otherbn-slide:nth-child(1) {border: 4px solid #b8743a;}
.otherbn-slide:nth-child(2) {border: 4px solid #d83841;}
.otherbn-slide:nth-child(3) {border: 4px solid #e96240;}
.otherbn-slide:nth-child(4) {border: 4px solid #792b8e;}
.otherbn-slide a {transition: linear .3s;}
.otherbn-slide a:hover {transform: scale(0.98);filter: brightness(110%);}

/**注意事項**/
.notice_wrapper {background: #2e9070; padding-top: 30px;}
.notice-main {width: 1050px; margin: auto; color: #fff; font-size: 16px; line-height: 18px; padding-bottom: 40px;}
.notice-title {text-align: center; font-size: 24px; font-weight: bold; line-height: 30px; padding-bottom: 10px;}
.notice-main ol li {margin: 0 30px 10px 40px; list-style-type: decimal;}


@media screen and (min-width: 1025px) {
  .NavArea {display: none; width: 115px; position: fixed; top: 160px; right: 5px; z-index: 250;}
  .Nav-slide.active {background: rgb(236 121 70 / 100%);}
  .Nav-slide.active a {/*color: #fff100;*/}
  .go_top { display: block; cursor: pointer;}
  .float_tit {position: absolute; top: -120px; left: -9px; z-index: -1;}
  .Nav-wrapper li.float_tit:hover {background: none;}
  .Nav-wrapper {width: 115px; background: rgb(55 67 86 / 80%); border-radius: 15px 15px 4em 4em; padding: 7px 5px;}
    
  li.Nav-slide.text {font-size: 16px; background: #efd669; border-radius: 10px 10px 0 0; border-bottom: 1px dotted #fff; padding-bottom: 3px;}
  li.Nav-slide.text a {color: #000; font-weight: bold;}
    
  .Nav-wrapper ol.Nav-event {background: #1f938a; border-radius: 0 0 10px 10px; margin-bottom: 7px; overflow: hidden;}
  .Nav-wrapper li {font-size: 15px; line-height: 1.3; text-align: center; background: transparent; margin: auto; padding: 5px 0;}
  li.Nav-slide.event {border-bottom: 1px dotted #fff;} 
  li.Nav-slide.event:last-child {border-bottom: 0;}  
 
  .Nav-wrapper li a {color: #fff; font-weight: bold; cursor: pointer; position: relative; z-index: 500;}
  .Nav-wrapper li a:hover {color: #fff100;}
  .Nav-wrapper li:hover {background: rgb(236 121 70 / 100%);}
  .Nav-wrapper li a span {display: block;}
    
  .Nav-wrapper li.go_top {font-size: 24px; border-radius: 0 0 20px 20px; padding: 7px 0;}
  .Nav-wrapper li.go_top:after {background: #ee703e;}
  .Nav-wrapper li.go_top:hover {background: none;}
    
  .Nav-wrapper li.red {background: #e9324a; border-radius: 1em; margin-top: 5px; padding: 10px 0;}
  .Nav-wrapper li.red:hover {background-color: rgb(236 121 70 / 100%);}
    
  .Nav-wrapper li.orange {background: #f46741; border-radius: 4em; margin: 5px 0; padding: 5px 0;}
  .Nav-wrapper li.orange:hover {background-color: rgb(0 0 0 / 40%);}
}

@media screen and (max-width:1024px) {
body {width: 100vw;  min-width: inherit; background-color: #000;}
* {box-sizing: border-box;}
.display_pc {display: none;}
.display_m {display: block;}
.gotop {background: url(//www.payeasy.com.tw/pay_event/pezlib/images/icon_top.png) no-repeat;  height: 36px; position: fixed; right: 10px; width: 36px; bottom: 15px; z-index: 900; display: none;}
.gotop a {display: block; width: 48px; height: 36px;}
.float_wrapper{display: none;}
.bg_fly {display: none;}

.main_wrapper {background-size: 135%;}

.kv_wrapper {background-size: 191%;}
.kv_wrapper img {width: 100%;}
.kv_container {width: 100vw; height: 47vw;}
.kv_slogan {width: 46vw; top: 1.8vw; left: 28vw;}
.kv_photo {width: 90vw; top: 5.5vw; left: 2vw;}
    
/**event**/
.event_wrapper {width: 100vw; height: auto; padding: 0; margin-bottom: 100px; padding-bottom: 10px; overflow: hidden;}
.event_wrapper img {width: 100%;}
  
.event_wrapper {margin-bottom: 0; padding-bottom: 0;}
.event_container {width: 100vw; padding: 0;}
.event_container img {width: 100%;}
.event_photo {display: none;}
.event_container ul {border-radius: 0; padding: 1vw;}
.event_container li {width: 48vw; padding: 1vw;}
    
/*bn輪播*/    
.banner_wrapper {padding-bottom: 0;}
.banner-main {width: 96vw;}
.banner-main img {width: 100%;}
.bn {width: 48%;}
.bn::after {width: 100%; height: auto; top: 0.7vw; left: 0.7vw;}

/**prod**/
.prod_wrapper {padding-top: 40px;}
.ProductList {width: 100vw;}
.product_wrapper {gap: 0.5vw; padding-bottom: 0;}  
.product {width: 24vw;}
.prod_img {height: 24vw;}
.prod_details {height: 118px;}
.prod_desc {font-size: 14px; width: 95%;}
.prod_tit {font-size: 14px; line-height: 18px; height: 40px;}
.prod_money {padding: 0; margin-top: 0;}
.prod_money .sign {font-size: 14px;}
    
.ProductList a.more_link {width: 70vw; height: 13vw;}
.ProductList #title_1 a.more_link, .ProductList #title_2 a.more_link, .ProductList #title_3 a.more_link, .ProductList #title_4 a.more_link, 
.ProductList #title_5 a.more_link, .ProductList #title_6 a.more_link {background-size: 100%;}
    
.otherbn-main {width: 100vw; padding-top: 20px; padding-bottom: 30px;}
.otherbn-slide {width: 47%;} 
.otherbn-slide img {width: 100%;}
    
/**NavArea-top**/ 
.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 15px; height: 50px; font-size: 15px; line-height: 50px; font-weight: bold;}
.NavArea li.highlight0 {display: none;}
.Nav-slide.active a {color: yellow; font-weight: bold; border-bottom: 2px solid yellow; background: #525252;}
ol.Nav-event {display: contents;}
li.Nav-slide.event {background: #1f938a; border-right: 2px dotted #ccc;}
li.Nav-slide.red {background: #e9324a; border-right: 2px dotted #ccc;}
li.Nav-slide.orange {background: #ff7800; border-right: 2px dotted #ccc;}

/**floatM-bottom**/
.float_wrapper {display: none;}
.M_menu_wrap {position: fixed; bottom: 0; z-index: 999;}
.M_menu_block {width: 100vw; background-color: rgb(0 0 0 / 70%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);}
.M_menu_block ul {border-top: 2px solid #999;
    display: flex;
    justify-content: center;
    align-items: center;}
.M_menu_block li {width: 100%; font-size: 18px; line-height: 18px; height: 50px;
    text-align: center; border-left: 1px solid #222; border-right: 1px solid #666; padding-bottom: 8px;
    display: flex;
    flex: auto;
    justify-content: center;
    align-items: center;}
.M_menu_block li a {color: #fff;}
.M_menu_block a {color: #fff; display: block;}
}

@media screen and (max-width: 768px) { 
.ProductList a.more_link {width: 90vw; height: 17vw;}
.product_wrapper {gap: 1vw;;}  
.product {width: 47vw;}
.prod_img {height: 47vw;}
.prod_details {height: 110px;}
.prod_money .price {font-size: 27px; line-height: 1.1em;}
   
.group {margin: 20px 0; padding-bottom: 20px;}
.group::before {top: 10.2vw;}
.group::after {top: 10.2vw;}
    
.title_wrapper {padding-bottom: 10px;}
    
.otherbn-slide {width: 100%;}
    
.notice-main {width: 96vw; font-size: 14px; line-height: 18px; padding-bottom: 25px;}
.notice-title {font-size: 22px; line-height: 26px; padding-bottom: 5px;}
.notice-main ol li {margin: 0 10px 5px 25px;}
}

@media screen and (max-width: 576px) {
.event_container {padding: 15px 0;}
.event_container ul {width: 90vw; border-radius: 20px; border: 1.2vw solid #f6612d; padding: 2vw 2vw 1vw 2vw;}
.event_container li {width: 80vw; margin: auto; padding: 0;}
.banner-main {width: 90vw;
    display: flex;
    flex-wrap: wrap;}
.bn {width: 100%; margin-bottom: 10px;}
.bn::after {background: none;}
    
.prod_wrapper {padding-top: 24px;}  
.group::before {top: 7.2vw;}
.group::after {top: 7.2vw;}
    
.otherbn-main {width: 100vw; margin-top: 0;}
}

@media screen and (max-width:375px) {

}

@media screen and (max-width:320px) {

}