@charset "big5";
/* CSS Document */
body {min-width: 1200px; color: #333; font: 15px/1.6em "Century Gothic", Arial, 'Microsoft JhengHei', "A?aGA¡Ñ???A", "A¡Ñ?A Pro", "¡Ps2OcuAe", "sans-serif";}
a { display: block;  text-decoration: none; transition: .3s ease-in-out;}
:focus {outline: none;}
i {font-style: normal;}
.footer {width: 100%;	margin: auto}
.display_pc {display: block;}
.display_m {display: none;}
.pez_ft {height: 228px;}

/*main*/
.main { position: relative; width: 100%; overflow: hidden;
background: url("../images/kv_bg.jpg")no-repeat center top, url("../images/main_bg.jpg")center top #ffc0a2;}

/*kv*/
.kv_wrapper {}
.kv_container {position: relative; z-index: 1; margin: auto; width: 1200px; height: 557px;}
.kv_girl {position: absolute; top: 44px; left: 124px; z-index: 2;}
.kv_sakura {position: absolute; top: 0; right: 17px; z-index: 2;}
.kv_redenvelope {position: absolute; top: 325px; right: 367px; z-index: 2;}
.kv_slogan {position: absolute; top: 0; left: 252px; z-index: 1;}

@media(hover:hover) {
.kv_btn1 a:hover, .kv_btn2 a:hover {filter: brightness(110%); transform: scale(0.95);}
}

/*event*/
.event_wrapper {position: relative; width: 100%;}
.event_container {position: relative; z-index: 2; width: 1196px; margin: auto; height: 706px;
	background: url("../images/event1_bg.png")no-repeat center top;}
.kv_btn1 {position: absolute; top: -93px; left: 310px; z-index: 3;}
.kv_btn2 {position: absolute; top: -93px; right: 294px; z-index: 3;}
.event_title {text-align: center; padding-top: 80px;}
.event1 {position: relative; width: 1120px; margin: auto; padding-top: 10px; padding-bottom: 25px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;}
.event234 {position: relative; width: 1120px; margin: auto; 
	display: flex; 
	justify-content: space-evenly;}
.kv_float {position: absolute; z-index: 1;
  top: 46px; left: 0; right: 0;}

@media(hover:hover) {
.event_title a:hover, .event1_order a:hover, .event_02 a:hover, .event_03 a:hover, .event_04 a:hover, .event_gift a:hover {filter: brightness(110%); transform: scale(0.96);}
}

/**pk**/
.pk_wrapper {width: 1226px; margin: auto; height: auto; margin-top: 155px; background: url("../images/pk_bg_pc.png")no-repeat center 65px;}

/**prod**/
.prod_wrapper {position: relative; padding-top: 50px; }
.prod_container {position: relative; z-index: 100;}
.ProductList {position: relative; z-index: 500; margin: auto; width: 100%;}

/*group*/
.bg_red {background: url("../images/float_red.png")no-repeat center top, url("../images/gold_line.png")no-repeat center top, url("../images/gold_line.png")no-repeat center bottom #890200; padding: 50px 0 30px; overflow: hidden; margin-bottom: 50px;}
.group {position: relative; z-index: 2; width: 1200px; margin: auto; margin-bottom: 80px;}
#group_1, #group_2 {padding: 1.6%; margin-bottom: 40px;}
.group .tit {position: sticky; z-index: 1; display: block;}
.tit_01, .tit_02 {float: left; padding-top: 53px; padding-left: 0; width: 235px; text-align: center;}
.tit_03, .tit_04, .tit_05, .tit_06, .tit_07, .tit_08, .tit_09 {width: 800px; margin: auto; padding-bottom: 10px;}

@media(hover:hover) {
.group .tit a:hover {filter: brightness(110%); transform: scale(0.98);}
}

.group:before {content: ''; position: absolute; top: 0; left: 0px; right: 0; margin: auto; z-index: -1;}
#group_1::before {background: url(../images/prod-bg1.png) no-repeat; width: 1174px; height: 754px;}
#group_2::before {background: url(../images/prod-bg2.png) no-repeat; width: 1174px; height: 754px;}
#group_3::before, #group_4::before, #group_6::before {background: url(../images/prod-bg3.png) no-repeat; width: 1116px; height: 903px; top: 36px;}
#group_5::before, #group_6::before, #group_7::before, #group_8::before, #group_9::before {background: url(../images/prod-bg4.png) no-repeat; width: 1116px; height: 903px; top: 36px;}

.group_title {width: 773px; margin: auto; padding-bottom: 22px;}

.travel_product {position: relative; float: left; width: 211px; overflow: hidden; margin-left: 6px; margin-right: 6px; margin-top: 6px; margin-bottom: 6px; text-align: center; background: #fff; border-radius: 20px; transition: linear .2s;}
.travel_img {width: 100%; height: 211px; background-size: cover; background-position: 50%; background-repeat: no-repeat; transition: all .5s linear; background-color: #fff; overflow: hidden;}
.travel_detail {height: 120px;}
.travel_desc {overflow: hidden; width: 96%; border-radius: 30px; background: linear-gradient(to right, #dda568 0%, #9e582a 100%); padding: 0 5px; height: 36px; color: #fff; font-weight: bold; font-size: 15px; line-height: 36px; margin: 3px auto 0;}
.travel_tit {overflow: hidden; padding: 4px 5px; height: 42px; color: #000; text-align: center; font-size: 15px; line-height: 1.2em;}
.travel_money {color: #f00; text-align: center; padding: 7px 0;}
.travel_money span.sign {font-size: 15px; padding-left: 3px;}
.travel_money span.price {font-size: 33px;}

@media(hover:hover) {
.travel_product:hover {transform:translateY(-5px);}
}

/**hotel**/
.hotel_main {width: 1000px; margin: 0 auto; padding-bottom: 10px;}
.hotel_product {position: relative; text-align: center; background: #fff; overflow: hidden; width: 240px; margin-left: 5px; margin-right: 5px; margin-bottom: 10px; border-radius: 20px; transition: linear .2s;}
.hotel_img {width: 100%; height: 240px; background-size: cover; background-position: 50%; background-repeat: no-repeat; transition: all .5s linear; background-color: #fff;}
.hotel_product a {position: relative; display: block;}
.hotel_detail {}
.hotel_desc {overflow: hidden; width: 96%; margin: 3px auto 0; border-radius: 30px; background-image: linear-gradient(to right, #dda568 0%, #9e582a 100%); padding: 0 15px; height: 36px; color: #fff; font-weight: bold; font-size: 15px; line-height: 36px; }
.hotel_tit {overflow: hidden; padding: 4px 5px; height: 42px; color: #000; text-align: center; font-size: 15px; line-height: 1.2em;}
.hotel_money {padding: 0 2px; height: 40px; color: #ff0000;}
.hotel_money span.price {margin: 0 2px; font-weight: 500; font-size: 32px; line-height: 37px;}

@media(hover:hover) {
.hotel_product:hover{ transform:translateY(-5px);}
}

/*bg_wrapper*/
.bg_wrapper {display: none; position: absolute; width: 100%; height: 100%; top: 0; z-index:1; pointer-events: none;}
.bg_fly {top: 0; width: 100%; height: 100%; background: url("../images/float.png") center top;}


@media screen and (min-width: 1025px) {
.NavArea {display: none; width: 115px; position: fixed; top: 125px; right: 5px; z-index: 999;}
.go_top {display: block; cursor: pointer;}
.Nav-wrapper {position: relative; width: 115px; font-size: 14px; line-height: 18px; text-align: center; background: rgb(0 0 0 / 80%); border-radius: 10px; padding: 5px 5px 20px 5px;}
.float_tit {position: absolute; top: -109px; left: 5px;}
.float_tit_pk {position: absolute; bottom: -108px; left: 3px;}
	
.Nav-wrapper li a {position: relative; z-index: 500; color: #fff; cursor: pointer; font-weight: 600; padding: 3px 0; margin: 5px 0;}
.Nav-wrapper li a:hover {color: #f44336; background: #ffe644; border-radius: 3px;}
.Nav-wrapper li.float_tit_pk a:hover {background: none;}
	
.Nav-wrapper li.gift {background: #ff6744; border-radius: 3px; font-size: 16px; line-height: 26px;}
.Nav-wrapper li.gift:hover {background: #ffe644;}

.Nav-wrapper li.highlight0 {background-color: #0093a5; border-radius: 3px; color: #fff; margin-top: 5px;}
.Nav-wrapper li.highlight0 > ul {border-top: 1px dotted;}
.Nav-wrapper li.highlight0 p {line-height: 24px; font-weight: bold; color: #ffdd59;}
	
.Nav-slide.active {background-color: #ffe644; border-radius: 3px;}
.Nav-slide.active a {color: #f44336; background-color: #ffe644; border-radius: 3px;}
	
.Nav-wrapper li.store {width: 98%; float: left; border-bottom: 1px dotted #fff; font-size: 16px;}
.Nav-wrapper li.store a {color: #fff;}
.Nav-wrapper li.store:last-child {border-bottom: none;}
.Nav-wrapper li.store a:hover {color: #f44336;}	
li.Nav-slide.store.active a {color: #f44336;}
	
.Nav-wrapper li.best {background: #2196F3; border-radius: 3px; line-height: 26px;}
	
.Nav-wrapper li.highlight3 {background: #e94e3e; border-radius: 20px; font-size: 16px; line-height: 26px;}
.Nav-wrapper li.highlight3 a:hover {border-radius: 20px;}
	
@media(hover:hover) {
.float_tit_pk:hover {filter: brightness(110%); transform: scale(0.98);}
}
		
}

@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: 80px; z-index: 900; display: none;}
.gotop a {display: block; width: 48px; height: 36px;}
.float_wrapper{display: none;}
	
.main {background: url("../images/kv_bg.jpg")no-repeat center top, url("../images/main_bg.jpg")center top #0b0722;; background-size: 153%, 20%;}

.kv_wrapper{ }
.kv_wrapper img {width: 100%;}
.kv_container {width: 100vw; height: 43.5vw;}
.kv_slogan {width: 59vw; top: 0; left: 21vw;}
.kv_girl {width: 15vw; top: 3.4vw; left: 9.8vw;}
.kv_sakura {width: 30vw; top: 0; right: 1vw;}
.kv_redenvelope {width: 11vw; top: 26vw; right: 29.2vw;}
.kv_slogan {width: 57vw; top: 0; left: 21.5vw;}
  
.event_wrapper { }
.event_wrapper img {width: 100%;}
.event_container {width: 98vw; background-size: 100%; height: 62vw;}
.kv_btn1 {width: 24.5vw; top: -6.8vw; left: 25vw;}
.kv_btn2 {width: 24.5vw; top: -6.8vw; right: 23.5vw;}
.event_title {width: 52vw; margin: auto; padding-top: 6.5vw;}
.event1 {width: 90vw; padding-top: 0;}
.event234 {width: 90vw;}
.event_02, .event_03, .event_04 {width: 32%;}
	
.pk_wrapper {width: 85vw; height: 45vw; margin-top: 6vw; 
	background: url("../images/pk_bg_pc.png")no-repeat center 5vw; background-size: 100%;}
  
/**prod_m**/
.prod_wrapper {padding-top: 10px;}
.ProductList { }	
	
.group {width: 100vw; padding: 0 0 20px 0;  margin-bottom: 40px;}
.group:before {height: -webkit-fill-available !important; background-size: 100vw;}
#group_1, #group_2 {padding: 0 0 20px 0;}
#group_1::before {background: #9edceb; top: 0vw;}
#group_2::before {background: #fc976b; top: 0vw;}
#group_3::before, #group_4::before, #group_5::before {background: #00a9ae; border-top: 7px solid #ffa545; border-bottom: 7px solid #ffa545; top: 6vw;}
#group_6::before, #group_7::before, #group_8::before, #group_9::before {background: #e5594c; border-top: 7px solid #ffa545; border-bottom: 7px solid #ffa545; top: 6vw;}
	
.bg_red {
    background: url(../images/gold_line.png)no-repeat center top, url(../images/gold_line.png)no-repeat center bottom #890200;
    padding: 50px 0 10px;
    margin-bottom: 20px;}

.group_title {width: 75vw; padding-bottom: 15px;}	
.group_title img {width: 100%;}
	
.tit_01, .tit_02 {float: none; width: 100vw; padding: 0;}
.tit_03, .tit_04, .tit_05, .tit_06, .tit_07, .tit_08, .tit_09 {width: 75vw;}
.group .tit img {width: 100%}	

/**store**/
.travel_wrapper {margin-top: 13px; overflow: hidden;}
.travel_main {width: 100vw;}
.travel_product {width: 24vw; margin: 0.5vw;}
.travel_product img {width: 100%;}
.travel_img {height: 24vw;}
.travel_detail {height: auto;}
.travel_tit {line-height: 18px; font-size: 14px;}
.travel_money {padding: 3px 0;}
.travel_money span.sign {font-size: 14px;}
.travel_money span.price {font-size: 30px;}
	
/**hotel**/
.hotel_wrapper {margin-top: 13px; overflow: hidden;}
.hotel_main {width: 100vw;}
.hotel_product {width: 24vw; margin: 0.5vw;}
.hotel_product img {width: 100%;}
.hotel_img {height: 24vw;}
.hotel_detail {height: auto;}
.hotel_tit {line-height: 18px; font-size: 14px;}
.hotel_money { }
.hotel_money span.sign {font-size: 14px;}
.hotel_money span.price {font-size: 30px;}	

/**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 {white-space: nowrap; width: max-content;}
.NavArea .Nav li {z-index: 10; position: relative; float: left; padding: 0; overflow: hidden; width: auto; font-weight: inherit; text-align: center;}
.NavArea .Nav a {color: #fff; text-decoration: none; position: relative; padding: 0 12px; height: 50px; font-size: 15px; line-height: 50px; font-weight: bold; }
.Nav-slide.active a {color: yellow;}
.Nav-slide.active a {color: yellow; font-weight: bold; border-bottom: 2px solid yellow; background: #525252;}
.NavArea .Nav li span {display: inline-block;}
.NavArea li.highlight0 p {display: none;}
	
li.Nav-slide.gift {background: #0093a5;}
li.Nav-slide.gift:hover {color: yellow; border-bottom: 2px solid yellow; background: #525252;}
li.Nav-slide.pk {background: #f44336;}
li.Nav-slide.pk:hover {color: yellow; border-bottom: 2px solid yellow; background: #525252;}
li.Nav-slide.best {background: auto;}
	
.bg_fly {background: none;}
	
}

@media screen and (max-width:800px) {
.pk_wrapper {width: 85vw; height: 68vw; margin-top: 6vw; 
	background: url("../images/pk_bg_m.png")no-repeat center 5vw; background-size: 100%;}
}
  

@media screen and (max-width:768px) {
.event_container {width: 100vw; background-size: 100%; height: 61vw;}
	
.group {margin-bottom: 30px;}
#group_3::before, #group_4::before, #group_5::before {border-top: 4px solid #ffa545; border-bottom: 4px solid #ffa545;}
#group_6::before, #group_7::before, #group_8::before, #group_9::before {border-top: 4px solid #ffa545; border-bottom: 4px solid #ffa545;}
#group_1 {margin-bottom: 15px;}
#group_2 {margin-bottom: 0;}

.group .tit {width: 100vw;}	
.group_title {padding-bottom: 5px;}
.tit_03, .tit_04, .tit_05, .tit_06, .tit_07, .tit_08, .tit_09 {width: 96vw; padding-bottom: 1vw;}
	
.bg_red {padding: 20px 0 10px;}
	
.travel_main {width: 96vw; margin: auto;}
.travel_product {width: 47vw;}
.travel_img {height: 47vw;}

.hotel_main {width: 96vw; margin: auto;}
.hotel_product {width: 47vw;}
.hotel_img {height: 47vw;}	
	
}
	
@media screen and (max-width:576px) {	
.event1 {width: 94vw; padding-top: 0; padding-bottom: 2vw;}
.event234 {width: 96vw;}
.pk_wrapper {width: 90vw; height: 70vw;}
	
}

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

}

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