@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 top #d2eef9;}

/*kv*/
.kv_wrapper {padding-bottom: 118px; background: url("../images/kv_bg.jpg")no-repeat center top;}
.kv_container {position: relative; z-index: 1; margin: auto; width: 1200px; height: 664px;}
.kv_slogan {position: absolute; top: 60px; left: 290px; z-index: 2;}
.kv_photo {position: absolute; top: 145px; right: 26px; z-index: 1;}
.kv_flower {position: absolute; top: 48px; left: 280px; z-index: 1;}

/*event*/
.event_pc {display: block;}
.event_m {display: none;}
.event_wrapper {position: relative; width: 1207px; height: auto; margin: auto;}
.event_wrapper:before {content:''; position: absolute; top: 22px; bottom: 0; left: 0px; right: 0; margin: auto; width: 1166px; height: 560px; 
    background: url(../images/event_bg.png) no-repeat center top;}
.event_tit {position: relative; width: 527px; margin: auto;}
.event.event_block01 {position: relative; width: 1130px; display: flex; justify-content: space-evenly; flex-wrap: wrap; left: 38px;}
.event1, .event2, .event3 {padding: 15px 0;}
.event4, .event5 {padding: 20px 0;}
@media (hover:hover) {
  .event a, .event_tit a {transition: all .4s;}
  .event a:hover, .event_tit a:hover {
    transform: translateY(-8px);
    filter: brightness(1.2);}
}
.event_deco {position: absolute; top: 180px; left: -310px; z-index: 1; background: url("../images/event_deco.png") no-repeat;
    animation: upDown_animation 1s ease-in-out infinite alternate; pointer-events: none;}

/*bg_wrapper*/
/*.bg_wrapper {display: none; position: absolute; width: 100%; height: 100%; top: 0; z-index: 99; pointer-events: none;}
.bg_fly {top: 0; width: 100%; height: 100%; background: url("../images/float.png") center repeat-y; 
    animation: upDown_animation 1s ease-in-out infinite alternate;}*/



/**prod**/
.prod_wrapper {position: relative; padding-top: 1px;
    -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:''; position: absolute; top: 80px; bottom: 0; left: 0; right: 0; z-index: -1; margin: auto; width: 1105px; height: 876px; 
    background: url(../images/prod_bg.png) no-repeat center top;}
.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: #fff; font-weight: bold; font-size: 15px; line-height: 36px;
  background: linear-gradient(to right, #e3c12d 0%, #b2931e 100%);
  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: 5px;}
.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;}
.ProductList #title_7 a.more_link {
    background: url(../images/title07.png) center no-repeat;}
@media (hover: hover) {
  .more_link:hover {
    transform: scale(0.98);
  }
}


@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: -96px; left: -3px; z-index: 2;}
  .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: 4em; padding-bottom: 3px; margin-top: 5px;}
  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: 4em; margin-top: 5px; padding: 5px 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: url("../images/main_bg.jpg") fixed center top #d2eef9;
    background-size: 135%;}

.kv_wrapper {
        background: url(../images/kv_bg.jpg) no-repeat center top, url(../images/kv_bg_m.jpg) center top;
        background-size: 170%, 100%;
        padding-bottom: 40px;}
.kv_wrapper img {width: 100%;}
.kv_container {width: 100vw; height: 57vw;}
.kv_slogan {width: 57vw; top: 3vw; left: 19vw;}
.kv_photo {width: 23vw; top: 12.5vw; right: 2vw;}
.kv_flower {width: 27vw; top: 5vw;left: 22vw;}
    
/**event**/
.event_deco {display: none;}
.event_wrapper {width: 100vw; height: auto; margin-left: 1vw; padding-bottom: 3vw;}
.event_wrapper:before {top: 3vw; bottom: 0; left: -2vw; right: 0;
        width: 96vw; height: 46.5vw;
    background-size: 100%;
         /*background: #fff8e3; border: 2vw solid #df1627; border-radius: 2em;*/}
.event_wrapper img {width: 100%;}    
.event_tit {width: 60vw; left: 0; margin: auto;}
/*.event_tit:after {display: none;}*/
 
.event.event_block01 {width: 93vw; left: 2.5vw;}    
.event1, .event2, .event3 {width: 29vw; padding: 6px 0 0;} 
.event4 {width: 44vw; padding: 40px 0 0;}
.event5 {width: 40vw; padding: 40px 0 0;}

/**prod**/
.prod_wrapper { }
.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%;}
    
.group {margin: 40px 0;}
.group:before {content: ''; width: 100%; height: auto; margin: auto;
        position: absolute; top: 80px; bottom: 0; right: 0; left: 0; z-index: -2;
        background: #e8688f; border-top: 5px solid #ffc383; border-bottom: 5px solid #ffc383;}
    
/**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) { 
.kv_wrapper {padding-bottom: 15px;}
.event_m {display: block;}
.event_pc {display: none;}
.event_wrapper {padding-bottom: 0;}
.event_tit {width: 90vw;}
.event1, .event2, .event3, .event4 {width: 46.5vw; padding: 0.5vw;} 
.event5 {width: 94vw; padding: 0.5vw;}
.event_wrapper:before {top: 7vw; width: 96vw; height: auto;
         /*background: #df1627;*/ background: none; border-radius: 2em;}
    
.ProductList a.more_link {width: 90vw;}
.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: 5vw;}
    
.title_wrapper {padding-bottom: 10px;}

}

@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;}


}

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

}

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

}