@charset "big5";
/* CSS Document */
body {min-width: 1200px; font: 15px/1.4em "Century Gothic", Arial, 'Microsoft JhengHei', "蘋果儷中黑", "儷黑 Pro", "新細明體", "sans-serif"; background: #132b51;}
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; position: relative; z-index: 99;}
.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;
  background: url(../images/main_bg.jpg) top center;}

.kv_wrapper {position: relative; background: url(../images/kv_bg.jpg) no-repeat top center;}
.kv_container {position: relative; z-index: 1; max-width: 1200px; height: 650px; margin: auto;}
/*.kv_logo {position: absolute; top: -18px; left: 52px; z-index: 6; transition: .3s ease-in-out;}
@media (hover:hover){
 .kv_logo:hover {transform: translateY(-3px);}
}*/
.kv_slogan {
    position: absolute;
    top: 87px;
    left: 12px;
    z-index: 3;}
.kv_right {
    position: absolute;
    top: 67px;
    right: -67px;
    z-index: 2;}


/**event**/
.event_container {width: 1046px; margin: auto;}
.event a {display: block;}
.event_pc {display: block;}
.event_m {display: none;}
@media (hover:hover){
 .event a:hover {transform: scale(0.98); filter: brightness(110%);}   
}


/**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; left: 25px; width: 250px; margin: 5px; text-align: center; background-color: #fff; border-radius: 10px;  box-shadow:0px 0px 4px rgba(0, 0, 0,0.4); transition: ease-out 1s;}
.ProductList .item > a {position: relative; display: block; transform: scale(.95);}
.ProductList .ProductImg {position: relative; overflow: hidden; margin: 0 auto; width: 250px; height: 250px;}
.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: 4em; background: #00bcd5; 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, #group_7, #group_8, #group_9, #group_10 {width: 1100px; margin: auto; padding: 40px 0;}
#group_2:before, #group_3:before, #group_4:before, #group_5:before, #group_6:before, #group_7:before, #group_8:before, #group_9:before, #group_10:before {content:''; position: absolute; top: 126px; bottom: 0; left: -12px; right: 0; z-index: -1; margin: auto; width: 1109px; height: 858px; background: url(../images/border.png) no-repeat center top;}

.tit {display: none; margin: auto;}
.group .tit {display: block; width: 800px; overflow: hidden; padding-bottom: 10px;}
#group_1 .tit {width: 1150px; padding-left: 0;}
@media (hover:hover){
.group .tit a:hover {transform: translateY(-5px);}
}

/**bestsale**/
#group_1 {margin: 0; padding: 70px 0 30px;}
.bestsale_block {width: 1150px; margin: auto; padding: 20px 0;}
.bestsale_block.best1, .bestsale_block.best3 {text-align: left;}
.bestsale_block.best2, .bestsale_block.best4 {text-align: right;}
@media (hover:hover){
.bestsale_block a:hover {transform: scale(0.99); filter: brightness(110%);}
}

/*bg_wrapper*/
.bg_wrapper {display: none; position: absolute; width: 100%; height: 100%; top: 0; z-index:1; pointer-events: none;}
.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;}


/**NavArea右側選單**/
@media screen and (min-width: 1025px) {
  .NavArea {display: none; width: 100px; position: fixed; top: 100px; right: 0; z-index: 250;}
  .Nav-slide.active {background-color: rgb(250 250 250 / 100%);}
  .Nav-slide.best.active {background: #303030;}
  .Nav-slide.active a {color: #640102;}
  .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: #ffe9dc; width: 100px; border-radius: 20px 0 0 20px; padding-top: 5px;}
  .Nav-wrapper li {font-size: 15px; text-align: center; background: transparent; margin: 2px auto; padding: 5px 0;}
  .Nav-wrapper li a {color: #303030; font-weight: bold; cursor: pointer; position: relative; z-index: 500;}
  .Nav-wrapper li a:hover {color: #c00;}
  .float_tit {/*position: absolute; top: -25px; left: 9px;*/}
  li.Nav-slide.best {background: #e85370; width: 100%; border-radius: 30px; margin-bottom: 10px;}
  li.Nav-slide.best a {color: #fff;}
  li.Nav-slide.best:hover {background: #303030; 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: #303030; font-weight: bold;}
  .Nav-wrapper li.highlight0 span {font-size: 15px; display: block;}
}

@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 {padding-bottom: 0; background-size: 120%;}  
    
.kv_wrapper {background-size: 130%;}
.kv_container {max-width: 100vw; height: 43vw;}
.kv_container img {width: 100%;}
.kv_slogan {width: 52vw; top: 6vw; left: 6vw;}
.kv_right {width: 53vw; top: 5vw; right: -4vw;}
    
.event_container {width: 90vw; margin: auto; padding-top: 50px;}
.event img {width: 100%;}
   
/**prod_m**/
.prod_wrapper {padding-bottom: 10px;}
.ProductList .item {width: 24vw; margin: 0.5vw; left: 0;}
.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 {height: 34px; font-size: 14px; padding: 4px 5px; line-height: 18px;}
.item .ProducPrice, .item .Event_Condition {padding: 0 10px;}

/**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, .tit_05, .tit_06, .tit_07, .tit_08, .tit_09, .tit_10 {width: 70vw; margin: auto;}
	
#group_2, #group_3, #group_4, #group_5, #group_6, #group_7, #group_8, #group_9, #group_10 {width: 100vw; margin: 50px 0; padding: 0;}
#group_2:before, #group_3:before, #group_4:before, #group_5:before, #group_6:before, #group_7:before, #group_8:before, #group_9:before, #group_10:before {height: auto; width: 100%; top: 9vw; left: 0; bottom: -15px; background: #a6b6e9; background-size: 100%;}
	
.ProductList .item:nth-child(8n+2), .ProductList .item:nth-child(8n+6) {margin-left: 0.5vw;}
	
/**bestsale**/
#group_1 {padding: 20px 0; background-size: cover;}
#group_1 .tit {width: 100vw;}
.bestsale_block {width: 90vw;}
.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) {
.event_m {display: block;}
.event_pc {display: none;}

.bestsale_block {width: 96vw; padding: 10px 0;}
    
.ProductList .item {width: 49vw;}
.ProductList .ProductImg {width: 49vw; height: 49vw;}
    
.group .tit {padding-bottom: 5px;}
#group_2 {margin: 10px 0 80px;}
.tit_02, .tit_03, .tit_04, .tit_05, .tit_06, .tit_07, .tit_08, .tit_09, .tit_10 {width: 100vw; padding-bottom: 1vw;}

}

@media screen and (max-width:560px) {	
.event_container {padding-top: 20px;} 
    
#group_2, #group_3, #group_4, #group_5, #group_6, #group_7, #group_8, #group_9, #group_10 {width: 100vw; margin: 40px 0; padding: 0;}
#group_2 {margin: 0 0 50px;}
    
.ProductList .ProductDesc {margin: 4px 0 0;}
.item .ProducPrice span, .item .Event_Condition i span {font-size: 30px;}
}

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