@charset "big5";
/* CSS Document */
body {min-width: 1200px; color: #333; font: 15px/1.6em "Century Gothic", Arial, 'Microsoft JhengHei', "蘋果儷中黑", "儷黑 Pro", "新細明體", "sans-serif";}
a { display: block;  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**/
.main_wrapper {overflow: hidden;}

/**kv**/
.kv_wrapper {background: url(../images/kv_bg.jpg) no-repeat top center; height: 662px;}
.kv_container {position: relative; width: 1100px; margin: auto;}
.kv_slogan {position: absolute; top: 208px; left: -19px; z-index: 1;}
.kv_date {position: absolute; top: 118px; left: 17px; z-index: 2;}
.kv_best {position: absolute; top: 415px; left: 5px; z-index: 1;}

/*錨點*/
.category_wrapper.fix {position: fixed; top: 0; z-index: 500; width: 100%; background: #ff7053; height: 60px;
-webkit-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.15);
    box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.15);}
.category_wrapper {background: #fff3ec; overflow: hidden;}
.menu_wrapper {width:100%; margin: 0 auto 15px; text-align: center; background: #ff7053; padding: 10px 0; 
	-webkit-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.15);
	-moz-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.15);
	box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.15);}
.menu_wrapper ul {width: 1200px; margin: 0 auto; display: flex;}
.menu_wrapper li {width: 100%; text-align: center; border-left: 1px solid #ffb3a4; border-right: 1px solid #ffb3a4;}
.menu_wrapper li:last-child {border-right: 1px solid #ffb3a4;}
.menu_wrapper li a {color: #fff; font-weight: bold; font-size: 20px; line-height: 40px; transition: 0.3s linear; }
.menu_wrapper li a:hover {color: #000; background: #f6ee41; border-radius: 30px; width: 80%; margin: auto;}

/*活動說明*/
.rule_wrapper {overflow: hidden; background: #fff3ec; font-family: 'Noto Sans TC', sans-serif;}
.rule_container {position: relative; width: 950px; margin: auto; padding: 30px 0 50px;}
.rule_title {width: 100%; text-align: center; padding-bottom: 10px;}
.rule_txt {width: 100%; font-size: 22px; line-height: 34px; font-weight: bold;}
.pink {color: #e4007f;}
.rule_txt .time {font-size: 29px; font-weight: bold;}
.rule_txt .gift {font-size: 26px; font-weight: bold; color: #da2141;}
.rule_txt h3 {font-size: 30px; color: #0f8fed; background: #fff; border: 3px solid #0f8fed; display: inline-block; padding: 5px 50px;font-weight: bold; margin-top: 20px; margin-bottom: 5px;}
.rule_txt h3.increase {position: relative; font-size: 30px; color: #0f8fed; background: #fff; border: 3px solid #0f8fed; display: inline-block; padding: 5px 50px;font-weight: bold; margin-top: 30px; margin-bottom: 5px;}
.rule_txt h3.increase span {position: absolute; top: -17px; left: -17px;
    font-size: 18px; color: #fff; background: #fa395a; font-weight: normal; border-radius: 50%; padding: 10px 10px;}
.rule_txt span {font-size: 20px; padding: 5px;}
.rule_txt p {font-size: 20px; line-height: 1.4em; font-weight: 500;}
.rule_photo {position: absolute; top: 70px; right: 0px;}

/*熱門航點*/
.area_wrapper {overflow: hidden; background: #fff3ec; 
	background:url(../images/area_bg.jpg) no-repeat top center; background-size: cover;}
.area_container {position: relative; width: 1220px; margin: auto; padding: 70px 0;}
.area_title {width: 100%; text-align: center; padding-bottom: 10px;}

.showcase {width: 23.6%; float: left; padding: 0.7%; flex-direction: row;}
.container {position: relative; padding-top: 100%; font-family: 'Noto Sans TC', sans-serif;}
.showcase-content {position: absolute; top: 0; left: 0; right: 0;bottom: 0; overflow: hidden; border-radius: 3px;}
.cover {position: absolute; top: 0; left: 0;  width: 100%; height: 100%; z-index: 2; display: block; font-size: 0; text-align: center;
    -webkit-transition: background-color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out;
	background-color: rgba(0, 0, 0, 0.3);}
.cover:hover {background-color: rgba(0, 0, 0, 0.5);}
.cover:before {content: ''; display: inline-block; vertical-align: middle; width: 0; height: 100%;}
.caption {display: inline-block; vertical-align: middle; text-align: center; color: #FBFBFB; 
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 1px 0px 5px rgba(0, 0, 0, 0.1), 0px 1px 5px rgba(0, 0, 0, 0.1);}
.caption-title {font-size: 30px; line-height: 1.5em; font-weight: bold;}
.caption-subtitle {font-size: 20px;}
.caption-icon {width: 40px; margin: auto; padding-top: 15px;}
.caption-icon img {width: 100%;}
.showcase-img {width: 100%; height: 100%; background-size: cover; background-position: center;}

/*小編私心推薦*/
.recommend_wrapper {overflow: hidden; background: #fff3ec; background: #fff;}
.recommend_container {position: relative; width: 1220px; margin: auto; padding: 70px 0;}
.recommend_title {width: 100%; text-align: center; padding-bottom: 10px;}

/*銀行優惠*/
.bank_wrapper {overflow: hidden; background: #fff3ec;}
.bank_container {position: relative; width: 1000px; margin: auto; padding: 70px 0;}
.bank_title {width: 100%; text-align: center; padding-bottom: 10px;}

.bank_group { }
.bank_box {width: 33.3%; float: left; padding: 20px; box-sizing: border-box;}
.bank_text {background: #fff; border-radius: 20px; padding: 20px; text-align: center; height: 280px; overflow: hidden; position: relative;
    transition: .2s linear;
	box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);}
.bank_text:hover {box-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);}
.bank_logo_box img {border: 1px solid #e6e6e6;}
.bank_event_box {text-align: left; margin-top: 15px;}
.bank_event_date {padding-right: 5px;}
.bank_event_date, .bank_event_text {display: table-cell;}
.bank_event_date p {vertical-align: middle; border: 1px solid #f26725; border-radius: 20px; color: #f26725; font-size: 13px; padding: 0 5px; white-space: nowrap;}
.bank_event_text p {color: #333; font-size: 18px; line-height: 24px;}
.bank_event_text b {color: #f26725;}
.bank_detail_btn {background-color: #9399a0; color: #fff; font-size: 15px; line-height: 30px; border-radius: 30px;
    position: absolute; bottom: 40px; left: 20px; right: 20px;}
.bank_event_peroid {font-size: 14px; color: #808080;
    position: absolute; bottom: 10px; left: 20px; right: 20px;}
.bank_text:hover .bank_detail_btn {background-color: #f26725;}

/*旅遊必備小物*/
.goods_wrapper {overflow: hidden; background: url(../images/goods_title_bg.png) no-repeat center top #fff3ec;}
.goods_container {width: 1200px; height: 427px; margin: auto; text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;}

/**prod**/
.pro_temp {display: none;}
.prod_wrapper {position: relative; background: #f2f9fc; padding-top: 50px;}
.prod_container {position: relative; z-index: 100;}
.ProductList {position: relative; z-index: 500; margin: auto; width: 1100px;}
.ProductList:after {clear: both; display: table; content: '';}
.ProductList .item {position: relative; float: left; width: 265px; margin-left: 5px; margin-right: 5px; margin-bottom: 15px; text-align: center;}
.ProductList .item > a {position: relative; display: block; background: #fff; border-radius: 10px; overflow: hidden;}
.ProductList .ProductImg {position: relative; overflow: hidden; margin: 0 auto; width: 265px; height: 265px;}
.ProductList .ProductImg img {position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0;  margin: auto;  max-width: 100%;  max-height: 100%;}
.ProductList .item > a:hover, .ProductList .item > a:focus, .ProductList .item > a:active {transform: translateY(-5px);}
.ProductList .ProductDesc {overflow: hidden; padding: 0 5px; height: 36px; color: #fff; font-weight: bold; font-size: 15px; line-height: 36px; background: #000; width: 90%; margin: 2px auto; border-radius: 50px;}
.item .ProductName {overflow: hidden; padding: 4px 5px; height: 38px; color: #000; text-align: center; font-size: 16px; line-height: 21px;}
.item .ProducPrice, .item .Event_Condition { padding: 0 10px; height: 45px; color: crimson; position: relative; margin-top: 3px;}
.item .ProducPrice label {cursor: pointer;}
.item .ProducPrice i em span {margin: 0 10px 0 0; color: #747474; font-weight: 100; font-size: 13px;}
.item .ProducPrice span, .item .Event_Condition i span {margin: 0 2px 0 2px; font-weight: 500; font-size: 33px; line-height: 37px;}
.item .ProducPrice i em {color: #747474; text-decoration: line-through; font-style: normal;}
.item .ProducPrice .price_txt {color: crimson; font-size: 15px; line-height: 26px; font-weight: bold;}

.group {position: relative; padding-bottom: 120px;}
.group:before {content: ''; position: absolute; z-index: -1; top: -40px; left: -26px; right: 0; width: 1159px; height: 489px;
	background: url(../images/prod_bg.png) no-repeat;}

/**title***/
.tit {display: none; margin: auto;}
.group .tit {float: left; display: block; width: 265px; margin: auto;}
.ProductList .item .sub_tit { display: none; position: absolute; z-index: 100; top: -580px !important; left: -18px !important;}
.group .tit a {transition: linear .3s;}
.group .tit a:hover {filter: brightness(120%); transform: translateY(-5px);}

/*注意事項*/
.notice_wrapper {background: #f2f2f2; padding-top: 20px; border-top: 2px solid #fff; border-bottom: 2px solid #fff;}
.notice_container {width: 1200px; margin: 0 auto;}
.notice_container h2 {font-size: 30px; font-weight: bold; text-align: center; color: #000; padding: 10px 0; background: none;}
.notice_content {width: 100%; font-size: 15px; line-height: 22px;  padding-bottom: 30px;}
.notice_content ol li {margin: 0 30px 5px 30px; list-style-type: decimal;}
.li_notice ol li {counter-increment: my-counter; list-style-type: none; text-indent: -23px; margin: 0 30px 5px 30px;}
.li_notice ol li::before {content: "("counter(my-counter) ")"; padding-right: 3px;}
.notice_wrapper a {display: inline; text-decoration: underline; color: #333;}

.notice_content p {
    font-size: 15px;
    line-height: 24px;
    padding-left: 10px;
}


.notice_content h3 {
    font-weight: bold;
    font-size: 18px;
    line-height: 1.2em;
    margin-top: 10px;
}
.notice_content h3.txt {
    margin-top: 0;
}
.notice_content h3.pez {
    color: #009688;
}
.notice_content h3.travel {
    color: #0484eb;
}

.notice_content h5 {
    background-color: #a7624c;
    border-radius: 20px;
    font-size: 22px;
    line-height: 30px;
    font-weight: bold;
    padding: 5px 20px;
    display: inline-block;
    margin: 10px 0 5px;
    color: #fff;
}

	
@media screen and (max-width:1600px) {
.kv_wrapper {background: url(../images/kv_bg1700.jpg) no-repeat top center;}
}

@media screen and (max-width:1240px) {
.kv_wrapper {background: url(../images/kv_bg1240.jpg) no-repeat top center; height: 723px;}
.kv_slogan {top: 269px; left: -7px;}
.kv_date {top: 174px; left: 36px;}
.kv_best {top: 481px; left: 26px;}
}

@media screen and (max-width:1024px) {
body {width: 100vw; min-width: inherit;}
.gotop {background: url(//www.payeasy.com.tw/pay_event/pezlib/images/icon_top.png) no-repeat;  height: 36px; position: fixed; right: 5px; width: 36px; bottom: 10px; z-index: 999; 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: 100%;}
    
/**kv_m**/
.kv_wrapper{background: url("../images/kv_bg1240.jpg")no-repeat center top; background-size: 100%; height: 56vw;}
.kv_wrapper img {width: 100%;}
.kv_container {width: 100vw;}
.kv_slogan {width: 77vw; top: 21.5vw; left: 5vw;}
.kv_date {width: 43.5vw; top: 14vw; left: 7.5vw;}
.kv_best {width: 83vw; top: 38.8vw; left: 6.8vw;}
	
.menu_wrapper ul {width: 100vw;}

/**rule_m**/
.rule_container {width: 90vw; margin: auto;}
.rule_container img {width: 100%;}
.rule_title {width: 60%; margin: auto;}
.rule_txt {width: 100%;}
.rule_txt .time, .rule_txt .gift {font-size: 1.2em;}
.rule_txt h3 {font-size: 1.2em; padding: 0.2vw 5vw;}
.rule_txt p {font-size: 0.8em;}
.rule_photo {width: 33%; top: 9vw;}

/*熱門航點*/
.area_container {width: 96vw; padding: 50px 0;}
.area_container img {width: 100%;}
.area_title {width: 60%; margin: auto;}
	
/*小編私心推薦*/
.recommend_container {width: 96vw; padding: 50px 0;}
.recommend_container img {width: 100%;}
.recommend_title {width: 60%; margin: auto;}
	
/*銀行優惠*/
.bank_container {width: 96vw; padding: 50px 0;}
.bank_container img {width: 100%;}
.bank_title {width: 60%; margin: auto;}
	
.goods_wrapper {background-size: 150%;}
.goods_container {width: 40vw; height: 32vw; margin: auto;}	
.goods_container img {width: 100%;}
	
/*prod_m*/
.prod_wrapper {padding-top: 3vw;}
.prod_container { }
.ProductList {width: 98vw;}
.ProductList .item {width: 23.5vw; margin: 0 0.5vw;}
.ProductList .ProductImg {width: 23.5vw; height: 23.5vw; border: 0;}
.ProductList .ProductDesc {height: 30px; overflow: hidden; line-height: 30px; font-size: 14px;}
.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;}
.item .ProducPrice, .item .Event_Condition {height: 48px; margin-top: 0;}

/**group**/ 
.group { }
.group:before {top: -3vw; left: -2vw; background-size: 90%;}	

.group .tit {width: 23.5vw;}
.group .tit img {width: 100%;}

.ProductList .item_ .ProducPrice {height: 40px;}
.prod_wrapper_bg {width: 100vw;}
.prod_bg_item {height: calc(494vw + 1319px);}
	
/*注意事項*/
.notice_wrapper {padding-top: 10px;}
.notice_container {width: 96%; margin: auto;}
.notice_container h2 {font-size: 22px;  padding: 5px 0;}
.notice_content {font-size: 14px; line-height: 20px;}
.notice_content ol li {margin: 0 5px 5px 30px;}
.notice_content h5 {
    font-size: 18px;
    padding: 3px 20px;
    margin: 10px 0 5px 0;
}
.notice_content p {
    font-size: 14px;
    line-height: 21px;
}	
	
}

@media screen and (max-width:768px) {
.category_wrapper.fix {height: 50px;}
.menu_wrapper {position: fixed; top: 0; left: 0; right: 0;z-index: 998;}
.menu_wrapper {position: relative; margin: 0; padding: 0; overflow-x: scroll; border-bottom: 2px solid #ccc;}
.menu_wrapper ul {display: flex; width: 768px; height: 50px;}
.menu_wrapper li {height: 50px;}
.menu_wrapper li a {line-height: 50px; font-size: 15px;}
.menu_wrapper li a:hover {color: #fff; background: #dd563a; border-radius: 0; width: 100%;}
.menu_wrapper li:hover {background: #dd563a;}

.rule_container {padding: 30px 0;}
.rule_container {width: 94vw; margin: auto;}
.rule_photo {position: initial; width: 60%; margin: auto; padding-top: 10px;}
.rule_txt .time, .rule_txt .gift {font-size: 1em;}
.rule_txt h3 {font-size: 1em;}
.rule_txt p {font-size: 0.7em;} 
.rule_txt span {font-size: 0.8em; padding: 3px;}
	
.area_container {padding: 30px 0;}
.area_container {width: 94vw; margin: auto;}
.showcase {width: 49%; padding: 0.5%;}
	
.recommend_container {padding: 30px 0;}
.recommend_container {width: 94vw; margin: auto;}
	
.bank_container {padding: 30px 0;}
.bank_container {width: 94vw; margin: auto;}
	
.bank_box {width: 100%;}
.bank_text {height: auto;}
.bank_detail_btn {position: initial; margin-top: 10px;}
.bank_event_peroid {position: initial; margin-top: 5px;}
	
.group {padding-bottom: 20px; margin-bottom: 10vw;}
.group:before {width: 100vw; left: 0; bottom: 0; background: #9fc2e3; height: auto;}	
.group .tit {width: 49vw; margin: 0.5vw;}
.ProductList {width: 100vw;}
.ProductList .item {width: 49vw; margin: 0.5vw;}
.ProductList .ProductImg {width: 49vw; height: 58vw;}		
}

@media screen and (max-width:560px) {
.menu_wrapper ul {width: 520px;}
.menu_wrapper li {height: 50px; width: auto; padding: 0 15px;}
	
.rule_title, .area_title, .recommend_title, .bank_title {width: 100%;}	
	
.caption-title {font-size: 25px;}
.caption-subtitle {font-size: 17px;}
.caption-icon {width: 32px; padding-top: 6px;}	

.group {padding-bottom: 5px; margin-bottom: 7vw;}
	
.ProductList .ProductImg {height: 49vw;}	
.item .ProductName {height: 28px; font-size: 13px; line-height: 16px;}
.item .ProducPrice, .item .Event_Condition {height: 40px; margin-top: 0;}	
}

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

}

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