body {font: 13px/1.6em "Century Gothic", Arial, 'Noto Sans TC', 'Microsoft JhengHei', "sans-serif"; color: #333;
  background: url(../images/main_bg.jpg) no-repeat fixed bottom;}
a {text-decoration: none; display: inline-block; transition: .3s ease-in-out;}
:focus {outline: none;}
i {font-style: normal;}
*{box-sizing: border-box;}
.header, .footer {text-align: center; background: #fff;}
.display_pc {display: block;}
.display_m {display: none;}
.tag_wfe {display: none;}

.main_wrapper {position: relative; z-index: 1; width: 100%; padding-bottom: 30px; overflow: hidden;}

.kv_wrapper {position: relative; background: url(../images/kv_bg.jpg) no-repeat top center;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.3);}
.kv_container {position: relative; z-index: 1; max-width: 1200px; height: 664px; margin: auto;}
.kv_logo {position: absolute; top: -16px; left: 180px; z-index: 6; transition: .3s ease-in-out;}
@media (hover:hover){
 .kv_logo:hover {transform: translateY(-3px);}
}
.kv_slogan {position: absolute; top: 60px; left: 390px; z-index: 3;}
.kv_left {position: absolute; top: 105px; left: -187px; z-index: 2;}
.kv_right {position: absolute; top: 105px; right: -180px; z-index: 2;}

/**event**/
.category_wrapper { }
.category_container {position: relative; z-index: 500; width: 1140px; margin: auto; padding: 50px 0;}
.category_item {
  display: flex;
	justify-content: space-between;}
.category_item li {}
.category_item li img {width: 100%;}
.category_item li a { }
@media(hover:hover) {
  .category_item li a:hover {transform: scale(0.97);filter: brightness(120%);}
}

/**product_wrapper**/
.product_wrapper {width: 1175px; margin: 0 auto 50px; padding-top: 15px; position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;}
.product_wrapper.threeM {background-image: url(../images/border_bg.jpg); border: 10px solid #fff;}
.product_wrapper.tefal {background-image: url("../images/border_bg.jpg"); border: 10px solid #fff;}
.product_wrapper .bn a img{transition: .3s all ease-in-out;}
@media(hover:hover) {
.product_wrapper .bn a img:hover {filter: brightness(1.1); transform: scale(.98);}
}

/**/
.bg_wrapper {position: absolute; z-index: -2; top: 0; width: 100%; height: 100%;}
.bg_fly {position: fixed; top: 0; width: 100%; height: 100%; background: url("../images/float.png") repeat-y center;}

/*float*/
.float_wrapper {position: fixed; top: 40px; right: 0; z-index: 250; display: none;}
.float_main {width: 120px; background: rgb(0 88 159 / 80%); border-radius: 10px 0 0 10px; padding: 0 2px;}
.go_top {display: block; cursor: pointer;}
.float_main li {position: relative; color: #fff; text-align: center;}
.float_main li a {position: relative; z-index: 500; color: #fff; cursor: pointer; font-weight: 600; padding: 3px 0;}
.float_main li a:hover {color: yellow; filter: brightness(1.1); transform: scale(.95);}
.float_main li.highlight1 {font-size: 28px; line-height: 30px; letter-spacing: -0.05em; padding-top: 20px; padding-bottom: 5px; color: #ffffa5; font-weight: bold;}
.float_main li.highlight1:after {background: yellow;}
.float_main li.highlight2 {font-size: 24px; padding-bottom: 20px;}
.float_main li.rule {font-size: 18px; padding: 10px 0;}
.float_main li.rule a:after {position: absolute; right: 51%; bottom: 0; left: 51%; z-index: 1; height: 2px; background: yellow;
  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;}
.float_main li.rule a:hover:after {right: 10%; left: 10%;}


@media screen and (max-width:1024px) {
body {min-width: inherit; font-size: 15px; line-height: 1.4em; background: url(../images/main_bg.jpg) center top; background-size: 240%;}
* {box-sizing: border-box;}
.gotop {display: none; background: url(//www.payeasy.com.tw/pay_event/pezlib/images/icon_top.png) no-repeat;  height: 36px; position: fixed; right: 5px; width: 36px; bottom: 60px; z-index: 999;}
.gotop a {display: block; width: 48px; height: 36px;}
.header {position: relative; z-index: 99; width: 100vw;}
.display_m {display: block;}
.display_pc {display: none;}	
  	
.kv_wrapper {
    background: url(../images/kv_bg_m.jpg) no-repeat top center;
    background-size: 100%;}
.kv_container {max-width: 100vw; height: 42vw;}
.kv_container img {width: 100%;}
.kv_logo {width: 15vw; top: -2vw; left: 15vw;}
.kv_slogan {width: 44vw; top: 4vw; left: 30vw;}
.kv_left {width: 37vw; top: 11.3vw; left: -4vw;}
.kv_right {width: 37vw; top: 11.3vw; right: -2vw;}
	
.category_container {width: 96vw; padding: 20px 0;}
.category_item li {padding: 5px;}

.product_wrapper {width: 100vw;}
.product_wrapper .bn {width: 100%;}
.product_wrapper .bn img {width: 100%;}

.product_wrapper.threeM {padding-top: 0;}
.product_wrapper.tefal {padding-top: 0;}

.M_menu_wrap {position: fixed; bottom: 0; z-index: 200;}
.M_menu_block {width: 100vw; height: 55px; background: rgb(0 0 0 / 80%); border-top: 1px solid #ccc;}
.M_menu_block ul {
	display: flex;
	justify-content: center;
	align-items: center;}
.M_menu_block li {font-size: 15px; line-height: 50px; border-left: 1px solid #666; border-right: 1px solid #222; text-align: center;
	flex: auto;}
.M_menu_block li a {color: #fff;}
}

@media screen and (max-width:768px){
.category_container {padding: 10px 0 0;}

}