@charset "big5";
/* CSS Document */
body {min-width: 1200px; font: 15px/1.4em "Century Gothic", Arial, 'Microsoft JhengHei', "蘋果儷中黑", "儷黑 Pro", "新細明體", "sans-serif";}
a {display: block; text-decoration: none; transition: .3s ease-in-out;}
: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;}

.main_wrapper {background: url(../images/main_bg.jpg) no-repeat fixed center top;}

/**kv**/
.kv_wrapper {background: url(../images/kv_bg.jpg) no-repeat center top; height: 552px;}
.kv_container {position: relative; margin: auto; width: 1200px; height: 398px;}
.kv_slogan2 {position: absolute; top: 20px; left: 324px; z-index: 5;}
.kv_slogan2{
  -webkit-animation: slogan1fadeIn 0.8s linear,lightning 2s ease-in-out infinite alternate; 
  animation: slogan1fadeIn 0.8s linear,lightning 2s ease-in-out infinite alternate;}
.kv_slogan3 {position: absolute; top: 285px; left: 154px; z-index: 3; transition: linear .2s;}
.kv_slogan4 {position: absolute; top: 40px; right: -285px; z-index: 1; mix-blend-mode: screen;}

/*==============================================
slogan1fadeIn
==============================================*/
@keyframes slogan1fadeIn {
  0% {
    opacity: 0;
    filter: blur(10px) brightness(150%);
    transform: scale(1);
  }
  40% {
    opacity: 0;
    filter: blur(10px) brightness(150%);
    transform: scale(1);
  }
  60% {
    opacity: 1;
    filter: blur(6px) brightness(120%);
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    filter: blur(0px) brightness(100%);
    transform: scale(1);
  }
}
@-webkit-keyframes slogan1fadeIn {
  0% {
    opacity: 0;
    -webkit-filter: blur(10px) brightness(150%);
    -webkit-transform: scale(1);
  }
  40% {
    opacity: 0;
    -webkit-filter: blur(10px) brightness(150%);
    -webkit-transform: scale(1);
  }
  60% {
    opacity: 1;
    -webkit-filter: blur(6px) brightness(120%);
    -webkit-transform: scale(1.1);
  }
  100% {
    opacity: 1;
    -webkit-filter: blur(0px) brightness(100%);
    -webkit-transform: scale(1);
  }
}

/*==============================================
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(140%);
  }
}
@keyframes lightning {
  0%, 52%, 56%, 60%, 100% {
    filter: brightness(100%);
  }
  54%, 58%, 62% {
    filter: brightness(120%);
  }
}

/**event**/
.event_container{width: 960px; margin: auto;}
.event_item:after {content: ''; display: table; clear: both;}
ul.event_item {display: flex;}
.event_item li a{transition: .2s ease-in-out;}
.event_item li a:hover { transform: scale(0.95); filter: brightness(110%); cursor: pointer;}


/*==============================================
common
==============================================*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;}
.best1.animated, .best3.animated, .best5.animated {animation: rightFadeIn 0.8s linear;}
.best2.animated, .best4.animated {animation: leftFadeIn 0.8s linear;}

/*==============================================
rightFadeIn
==============================================*/
 @keyframes rightFadeIn {
	 0% {
	 transform: translateX(-8%);
	 filter: opacity(0) blur(10px);
	}
	 40% {
	 transform: translateX(-5%);
	 filter: opacity(1);
	}
	 100% {
	 transform: translateX(0%);
	 filter: opacity(1) blur(0);
	}
}
 @-webkit-keyframes rightFadeIn {
	 0% {
	 -webkit-transform:translateX(-8%);
	 -webkit-filter: opacity(0) blur(5px);
	}
	 40% {
	 -webkit-transform:translateX(-5%);
		 -webkit-ffilter: opacity(1);
	}
	 100% {
	 -webkit-transform:translateX(0%);
	 -webkit-filter: opacity(1) blur(0);
	}
}
/*==============================================
leftFadeIn
==============================================*/
 @keyframes leftFadeIn {
	 0% {
	 transform: translateX(10%);
	 filter: opacity(0) blur(5px);
	}
	 40% {
	 transform: translateX(5%);
		 filter: opacity(1);
	}
	 100% {
	 transform: translateX(0%);
	 filter: opacity(1) blur(0);
	}
}
 @-webkit-keyframes leftFadeIn {
	 0% {
	 -webkit-transform:translateX(10%);
	 -webkit-filter: opacity(0) blur(5px);
	}
	 40% {
	 -webkit-transform:translateX(5%);
	  -webkit-filter: opacity(1);
	}
	 100% {
	 -webkit-transform:translateX(0%);
	 -webkit-filter: opacity(1) blur(0);
	}
}

/**prod**/
.pro_temp {display: none;}
.prod_wrapper {position: relative;}
.prod_container {position: relative; z-index: 100;}
.ProductList {position: relative; z-index: 500; margin: auto; width: 100%;}
.ProductList:after {clear: both; display: table; content: '';}
.ProductList .item {position: relative; float: left; width: 256px; margin: 5px; text-align: center; overflow: hidden; border-radius: 10px; box-shadow: 0px 0px 5px rgb(0 0 26 / 40%); background: #fff;}
.ProductList .item > a {position: relative; display: block; transform: scale(.95);}
.ProductList .ProductImg {position: relative; overflow: hidden; margin: 0 auto; width: 256px; height: 256px;}
.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; margin: 0 3px; border-radius: 50px; background-image: repeating-linear-gradient(90deg, rgb(84, 184, 228) -1%, rgb(84, 184, 228) 101%); padding: 0 5px; height: 36px; color: #fff; font-weight: bold; font-size: 15px; line-height: 36px;}
.item .ProductName {overflow: hidden; padding: 4px 5px; height: 38px; color: #000; text-align: center; font-size: 15px; line-height: 21px;}
.item .ProducPrice, .item .Event_Condition {position: relative; padding: 5px; height: 35px; color: #F00; line-height: 1.2em; margin-top: 3px;}
.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: 36px;}
.item .ProducPrice i em {color: #747474; font-style: normal; font-size: 13px;}


/**group**/
.group {position: relative;}
#group_2, #group_3, #group_4, #group_5, #group_6 {width: 1142px; margin: auto; margin-bottom: 100px;}
#group_2:before, #group_3:before, #group_4:before, #group_5:before, #group_6:before {content:''; position: absolute; top: 100px; bottom: 0; left: 0; right: 0; z-index: -1; margin: auto; width: 1142px; height: 940px; background: url(../images/border.png) no-repeat center top;}
#group_2 {margin-top: 70px;}

.tit {display: none; margin: auto;}
.group .tit {display: block; width: 1050px; padding-bottom: 20px; overflow: hidden;}
#group_1 .tit {width: 1100px; padding-left: 0;}
.group .tit a:hover {transform: translateY(-5px);}
.ProductList .item:nth-child(8n+2), .ProductList .item:nth-child(8n+6) {margin-left: 44px;}

/**bestsale**/
#group_1 {margin: 0; padding: 15px 0; background: url(../images/product_bg.jpg) no-repeat center top;}
.bestsale_block {width: 1150px; margin: auto;}
.bestsale_block a:hover {transform: scale(0.99); filter: brightness(110%);}
.bestsale_block.best1, .bestsale_block.best3 {text-align: left;}
.bestsale_block.best2, .bestsale_block.best4 {text-align: right;}

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

/*==============================================
upDown
==============================================*/
.upDown_animation {
  -webkit-animation: upDown_animation 1s ease-in-out infinite alternate;
  animation: upDown_animation 1s ease-in-out infinite alternate;
}
@-webkit-keyframes upDown_animation {
  0% {
    -webkit-transform: translate(0, -7px);
  }
  100% {
    -webkit-transform: translate(0, 0);
  }
}
@keyframes upDown_animation {
  0% {
    transform: translate(0, -7px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@media screen and (max-width:1460px) {
#group_1 {padding: 0; background-size: 110%;}	
.bg_fly {background-size: 110%;}	
}
	

@media screen and (min-width: 1025px) {
  .NavArea {display: none; width: 105px; position: fixed; top: 100px; right: 5px; z-index: 250;}
  .Nav-slide.active {background-color: rgb(250 250 250 / 100%);}
  .Nav-slide.best.active {background: #034096;}
  .Nav-slide.active a {color: #034096;}
  .Nav-slide.best.active a {color: #fff;}
  .Nav-slide.Nav-slide.best a:hover {color: #fff;}
  .float_main { width: 138px; opacity: 0.9; filter: alpha(opacity=90);}
  .go_top { display: block; cursor: pointer;}
    
  .Nav-wrapper {position: relative; background: rgb(251 229 3 / 90%); width: 105px; border-radius: 20px; padding-top: 15px;}
  .Nav-wrapper li {font-size: 15px; text-align: center; background: transparent; margin: 2px auto; padding: 5px 0;}
  .Nav-wrapper li a {color: #000; font-weight: bold; cursor: pointer; position: relative; z-index: 500;}
  .Nav-wrapper li a:hover {color: #0d71ff;}
  /*.float_tit {position: absolute; top: -25px; left: 9px;}*/
  li.Nav-slide.best {background: #fff; width: 90%; border-radius: 30px; margin-bottom: 10px;}
  li.Nav-slide.best a {color: #034096;}
  li.Nav-slide.best:hover {background: #034096; color: #fff;}
  .Nav-wrapper li.navland {font-size: 24px; border-radius: 0 0 10px 10px; padding-bottom: 20px; padding-left: 2px;}
  .Nav-wrapper li.highlight0 {font-size: 20px; line-height: 23px; padding-top: 15px; padding-bottom: 7px; color: #320d0f; font-weight: bold;}
}


@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: 10px; 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 {width: 100vw; overflow: hidden;}
	
.kv_wrapper {height: 78vw; background-size: 220%;}
.kv_container {width: 100vw; height: 43vw;}
.kv_container img {width: 100%;}
.kv_slogan2 {width: 70vw; top: 3vw; left: 24vw;}
.kv_slogan3 {width: 80vw; top: 30vw; left: 7vw;}
.kv_slogan4 {width: 130vw; top: -3vw; right: -20vw;}
 
.event_container {width: 90vw; margin: auto;}  
.event_container img {width: 100%;}  
.event_item li {width: 33.333%;}  

/**prod_m**/
.prod_wrapper {padding-bottom: 10px;}
.ProductList .item {width: 24vw; margin: 0.5vw; margin-bottom: 10px;}
.ProductList .ProductImg {width: 24vw; height: 24vw; border: 0;}
.ProductList .ProductDesc {height: 30px; overflow: hidden; line-height: 30px; font-size: 14px; margin-top: 5px;}
.item .ProductName {color: #000; height: 34px; 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;}

/**group**/
.group .tit {width: 100vw; padding-left: 0;}
.title_txt {width: 100vw; margin: auto;}
.title_txt img {width: 100%;}
.tit_02, .tit_03, .tit_04 {width: 100vw; margin: auto;
    background: url(/pay_event/marketing/2024/dishwasher/images/border_m.jpg) no-repeat center bottom;
    background-size: 100%;}
	
#group_2, #group_3, #group_4 {width: 100vw; margin: 50px 0;}
#group_2:before, #group_3:before, #group_4:before {height: auto; width: 100%; top: 10vw; left: 0; bottom: -10px;
        background: #f9fcb4; background-size: 100%;}
	
.ProductList .item:nth-child(8n+2), .ProductList .item:nth-child(8n+6) {margin-left: 0.5vw;}
	
/**bestsale**/
#group_1 {padding: 0; background-size: cover;}
#group_1 .tit {width: 100vw;}
.bestsale_block {width: 96vw;}
.bestsale_block img { width: 100%;}
    
/**錨點-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;}

}

@media screen and (max-width:768px) {
.ProductList .item {width: 49vw;}
.ProductList .ProductImg {width: 49vw; height: 49vw;}
}

@media screen and (max-width:560px) {	
#group_2, #group_3, #group_4 {margin: 10px 0 30px;}
.ProductList .ProductDesc {border-radius: 0 15px; margin: 4px 0 0;}
}

@media screen and (max-width:320px) {
.ProductList .ProductDesc {font-size: 12px; padding: 0 10px;}
.item .ProducPrice i em span { font-size: 11px;}
.item .ProducPrice .price_txt { font-size: 13px;}
}