@charset "big5";
/* CSS Document */
body {min-width: 1050px; font: 16px/1.5em "Century Gothic", Arial, 'Microsoft JhengHei', "蘋果儷中黑", "儷黑 Pro", "新細明體", "sans-serif";}
a {text-decoration: none;}
:focus {outline: none;}
i {font-style: normal;}
.header, .footer {text-align: center; background: #fff;}
.display_pc {display: block;}
.display_m {display: none;}

.main_wrapper {background: url(../images/salebest_bg.jpg) center 450px #03544b; padding-bottom: 30px;}

/**kv**/
.kv_wrapper {background: url(../images/rule_kv_bg.jpg) no-repeat center top #d73538; box-shadow: inset 0px 0px 9px black;}
.kv_container {position: relative; margin: auto; width: 1200px; height: 540px;}
.kv_slogan {position: absolute; top: 121px; left: -52px; z-index: 2;}
.kv_goods {position: absolute; top: 36px; right: -25px; z-index: 1;
	animation:lightning 1.3s ease-in-out infinite;
	-webkit-animation:lightning 1.3s ease-in-out infinite;}
/*==============================================
lightning
==============================================*/
.lightning {
  -webkit-animation: lightning 2s ease-in-out infinite alternate;
  animation: lightning 2s ease-in-out infinite alternate;
}
@-webkit-keyframes lightning {
  0%, 52%, 56%, 60%, 100% {
    filter: brightness(100%);
  }
  54%, 58%, 62% {
    filter: brightness(120%);
  }
}
@keyframes lightning {
  0%, 52%, 56%, 60%, 100% {
    filter: brightness(100%);
  }
  54%, 58%, 62% {
    filter: brightness(120%);
  }
}

/**rule**/
.rule_wrapper {margin:50px auto; width: 1010px; border-radius: 20px; background: #fff; overflow: hidden;}
.rule_content {width: 96%; margin: 20px auto;}
.rule_wrapper a {color: dodgerblue; text-decoration: underline; font-weight: bold;}
.rule_wrapper h2 {border-radius: 20px 20px 0 0; background: #d8b05b; font-size: 36px; font-weight: 800; text-align: center; color: #4c3025; padding: 25px 0;}
.rule_wrapper h3 {color:#e3673b; font-weight: bold; font-size: 20px; padding: 5px 0;}
.rule_wrapper li {margin-left:40px; padding: 3px 0; list-style: decimal;}
.rule_wrapper p {padding-left: 20px; padding-bottom: 10px;}
.rule table th {color: #fff;}
.rule strong {color: crimson;}
.rule a {display: inline-block;}

a.btn_back {display: table; margin: auto;  padding: 15px 60px; border-radius: 30px; background-color: #f44336; color: #fff; font-size: 24px; font-weight: bold;}
a.btn_back:hover, a.btn_back:focus, a.btn_back:active {background-color: tomato;}

table.box1 {margin: 10px 0;}
table.box1 th {padding: 10px; color: #fff;}
table.box1 td {padding: 20px;}

table.box2 {margin: 10px 0;}
table.box2 th {padding: 5px;}
table.box2 td {padding: 5px;}

.gift {text-align: center;}

@media screen and (max-width:1024px) {
body {width: 100vw; min-width: inherit; font-size: 14px; line-height: 1.3em;}
.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: 80px; z-index: 900; display: none;}
.gotop a {display: block; width: 48px; height: 36px;}
.header {width: 100vw; }
.display_m {display: block;}
.display_pc {display: none;}
    
.main_wrapper {background-size: 150%; padding-bottom: 50px;}
	
.kv_wrapper {background: url(../images/rule_bg_m.jpg) no-repeat center top #d73538; background-size: 100%; box-shadow: inset 0px 0px 5px black;}
.kv_container {width: 100vw; height: 45vw;}
.kv_container img {width: 100%;}
.kv_slogan {width: 49vw; top: 11vw; left: 4vw;}
.kv_goods {width: 44vw; top: 6vw; right: 0.5vw;}
   
/**/
.rule_wrapper {width:96vw; border-radius:15px; margin: 20px auto;}
.rule_wrapper h2 {border-radius:10px 10px 0 0; font-size: 22px; padding: 15px 0;}
.rule_wrapper h3 {padding: 3px 0; font-size: 16px;}
.rule_content {width: 94%; margin: 10px auto;}
.rule_wrapper a {word-wrap: break-word;}
.rule_wrapper li {margin-left:25px;}
.rule_wrapper p {padding-left:0; padding-bottom: 10px;}
    
.gift {width: 100%; padding-bottom: 5px;}
.gift img {width: 100%;}	
    
table.box1{ margin: 10px 0;}
table.box1 th { padding: 5px;}
table.box1 td {padding: 10px;}

/*M版按鈕*/
.M_menu_wrap {position: fixed;  bottom: 0; z-index: 999;}
.M_menu_block {width: 100%; background-color: rgb(0 0 0 / 70%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}
.M_menu_block ul {width: 100vw; height: 55px; margin: 0 auto; list-style: none; overflow: hidden; display: flex;  justify-content: center;  align-items: stretch;}
.M_menu_block li {width: 100%;  font-size: 14px;  line-height:16px; display: flex;  justify-content: center; align-items: center; text-align: center; border-top: 1px solid #999;border-right: 1px solid #666;border-left: 1px solid #222;}
.M_menu_block li a {color: #fff;}

}