@charset "big5";

/* CSS Document */
body { /*min-width: 1200px;*/ color: #333; font: 13px/1.6em 'Century Gothic', Arial, 'Microsoft JhengHei', '蘋果儷中黑', '儷黑 Pro', '新細明體', 'sans-serif'; overflow-x: hidden; }
a { display: block; text-decoration: none; }
:focus { outline: none; }
i { font-style: normal; }
.header, .footer { width: 100%; margin: auto; }
.hd_pc { width: 100%; }
.display_pc { display: block; }
.display_m, .display_m_xs { display: none; }
.pez_ft { height: 228px; }

.main { padding-top: 20px; position: relative; background: url('../images/bg.jpg') fixed no-repeat center bottom #fcfdeb; padding-bottom: 50px; position: relative; overflow-x: hidden; }
.main > * { position: relative; z-index: 2; }
.main::after { content: ' '; display: block; background: url('../images/bg_bottom.png') center bottom no-repeat; width: 100%; height: 631px; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; }

/**kv**/
.kv_wrapper { width: 100%; background: url('../images/kv_bg.jpg') no-repeat center top #fcfdeb; overflow-x: hidden; }
.kv_main { position: relative; margin: 0 auto; overflow: hidden; height: 858px; }

.kv_slogan { max-width: 1200px; margin: auto; position: relative; z-index: 6; }
.kv_slogan img { position: absolute; right: 60px; }

.menu_main { background: url('../images/menu_main_bar.png') center bottom no-repeat; display: flex; align-content: center; justify-content: center; align-items: flex-end; width: 100%; height: 50%; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; }
.menu_main::before { content: ' '; display: block; background: url('../images/kv_slogan_shadow.png') center no-repeat; background-size: 100% 100%; width: 50%; height: 15%; position: absolute; right: 10%; top: 15%; opacity: 0.6;
 transition-timing-function: ease; transition-property: opacity,transform; transition-duration: 1.5s; }
.menu_main ul { display: flex; justify-content: center; align-items: center; max-width: 1200px; margin: 0 auto; }
.menu_main img { width: 100%; max-width: 100%; }
.menu_main li { position: relative; }
.menu_main li:after { content: ' '; display: block; background: url('../images/kv_item_shadow.png') center no-repeat; width: 120%; padding-bottom: 50%; position: absolute; left: -10%; bottom: -20%; z-index: 1; pointer-events: none; }
.menu_main li a { display: block; position: relative; z-index: 2; }
.menu_main li a:hover { filter: brightness(110%); }

/*pro*/
.tit { text-align: center; padding: 25px 0 0; }
.foreign_wrapper {position: relative; padding-bottom: 40px; }
.foreign_main { max-width: 1200px; margin:0 auto; overflow:hidden; padding: 10px 0; text-align: center; }
.section-header { max-width: 632px; margin: 0 auto; padding-top: 35px; padding-bottom: 25px; }
.section-header:hover { filter: brightness(110%); transform: scale(0.97); }

.best_product { width: 23.6%; position: relative; margin-right: 0.7%; margin-left: 0.7%; margin-bottom: 1.4%; overflow: hidden; box-shadow: 2px 2px 0 #c3c3c3; }
.best_img { width: 100%; height: 276px; background-size: cover; background-position: 50%; background-repeat: no-repeat; transition: all .5s linear; background-color: #fff; }
.best_img:hover { -webkit-transform: scale(1.05);-moz-transform: scale(1.05);-ms-transform: scale(1.05);-o-transform: scale(1.05);transform: scale(1.05); }
.best_detail { padding-top: 0px; border-top: none; height: 125px; background: #fff; position: relative; padding-top: 8px; display: flex; flex-direction: column; align-content: space-between; justify-content: space-between; align-items: stretch; }
.best_tit { width: 95%; margin: 0 auto; font-size: 20px; line-height: 24px; letter-spacing: -1px; font-weight: bold; color: #333;overflow: hidden;text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding-bottom: 1px; height: 50px;
display: flex; justify-content: center; align-items: center; }
.best_text { width: 84%; margin: 0 auto; font-size: 16px; line-height: 33px; font-weight: bold; color: #FFF; background: linear-gradient(90deg, #c3ae74 0%, #e8d5a4 70%, #fdf3d9 100%); border-radius: 30px; padding: 0 10px; overflow: hidden; white-space: nowrap; /*text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;*/ }
.best_text span { display: block; width: 100%; }
.best_money { color: #ff524a; font-size: 16px; text-align: left; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; }
.best_money span { line-height: 36px; }
.best_money .p_reserve { color: white; white-space: nowrap; background: url('../images/p_reserve.jpg') right center; background-size: 100% 100%; padding: 0.1em 0.6em 0.1em 0.4em; }
.best_money .p_price{ font-size: 32px; padding: 0 3px; }
.p_market_value { text-decoration: line-through; color: #888; font-size: 150%; margin-right: 0.1em; font-weight: normal; }
.p_discount { color: white; background: url('../images/p_discount.png') center no-repeat; background-size: 100% 100%; padding: 0.1em 0.5em; }
.best_sign { font-size: 18px; }
.best_price { font-size: 30px; }
.sale_con { position: absolute; top: 0; left: 5%; }
.sale { background: #ff773b; color: #fff; text-align: center; line-height: 24px; font-size: 21px; font-weight: bold; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; padding: 7px 20px; }

.foreign_product { width: 23.6%; position: relative; margin-right: 0.7%; margin-left: 0.7%; margin-bottom: 1.4%; overflow: hidden; box-shadow: 2px 2px 0 #c3c3c3; }
.foreign_product a, .foreign_product_food a { display: block; }
.foreign_area { position: absolute; top: 15px; left: 15px; color: #ffffff; font-size: 16px; background-color: #fb774d; padding: 5px 15px; display: inline-block; border-radius: 5px; font-weight: bold; }
.foreign_img { width: 100%; /*height: 310px;*/padding-bottom: 100%; background-size: cover; background-position: 50%; background-repeat: no-repeat; transition: all .5s linear; background-color: #fff; }
.foreign_img:hover { -webkit-transform: scale(1.05);-moz-transform: scale(1.05);-ms-transform: scale(1.05);-o-transform: scale(1.05);transform: scale(1.05); }
.foreign_detail { border-top: none; height: 150px; background: #fff; position: relative; padding-top: 8px; padding-bottom: 42px; box-sizing: border-box;
display: flex; flex-direction: column; align-content: center; justify-content: space-around; align-items: stretch; }
.foreign_tit { width: 95%; margin: 0 auto; font-size: 20px; line-height: 24px; font-weight: bold; color: #333;/*overflow: hidden;text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; height: 30px;*/ height: 50px; padding-bottom: 1px;
display: flex; align-content: center; justify-content: center; align-items: center; }
.foreign_text { width: 90%; margin: 0 auto; font-size: 16px; line-height: 22px; font-weight: bold; color: #1675c7; overflow: hidden; /*text-align: left;*/
display: flex; align-content: center; justify-content: center; align-items: center; }
.foreign_money { color: #f77054; font-size: 16px; display: flex; justify-content: center; align-items: center; width: 100%; position: absolute; left: 0; right: 0; bottom: 5px; }
.foreign_money span { line-height: 36px; }
.foreign_money span.p_price { font-size: 32px; padding: 0 3px; }
.foreign_sign { font-size: 18px; }
.foreign_price { font-size: 30px; }

.tour_product { width: 23.6%; position: relative; margin-right: 0.7%; margin-left: 0.7%; margin-bottom: 1.4%; overflow: hidden; box-shadow: 2px 2px 0 #c3c3c3; }
.tour_img { width: 100%; height: 276px; background-size: cover; background-position: 50%; background-repeat: no-repeat; transition: all .5s linear; background-color: #fff; }
.tour_img:hover { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); }
.tour_detail {padding-top: 0px; border-top: none; height: 92px; background: #fff;position: relative; padding-top: 8px; }
.tour_tit {width: 95%;margin: 0 auto;font-size: 20px; line-height: 24px; letter-spacing: -1px; font-weight: bold; color: #333;overflow: hidden;text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding-bottom: 1px; height: 50px; }
.tour_money { color: #ff524a; font-size: 16px; width: 100%; }
.tour_money span { line-height: 36px; }
.tour_money .p_price { font-size: 32px; padding: 0 3px; }
.tour_sign { font-size: 18px; }
.tour_price { font-size: 30px; }

.ticket_product { position: relative; float: left; margin-right: 0.5%; margin-bottom: 1%; margin-left: 0.5%; width: 23.9%; text-align: center; background: #fff; overflow: hidden; box-shadow: 2px 2px 0 #c3c3c3; }
.ticket_img { width: 100%; height: 274px; position: relative; overflow: hidden; background-color: #fff; }
.ticket_img img { display: block; width: 100%; height: 100%; transition: all 1s; }
.ticket_img:hover img { -webkit-transform: scale(1.2, 1.2);-moz-transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); -o-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); }
.ticket_detail { padding-top: 6px; height: 117px; }
.ticket_desc { color: #fff; font-size: 15px; line-height: 32px; font-weight: bold; background: linear-gradient(90deg, #f00859, #fa7a3b); height: 32px; padding: 0 10px; margin: 0 15px; border-radius: 30px; overflow: hidden; }
.ticket_tit { width: 90%; margin:0 auto; font-size: 18px; line-height: 22px; font-weight: bold; color: #333; height: 48px; text-align: center; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ticket_money { color: #f54648; text-align: center; padding: 5px 0; }
.ticket_money span.sign { font-size: 18px; }
.ticket_money span.price { font-size: 30px; }

/*ProductListBG*/
.prod_container_bg1, .prod_container_bg2 { position: absolute; top: 0; right: 0; left: 0; margin: auto; width: 1270px; z-index: -1; margin-top: 70px; /*background: #f0efee; border: 10px solid #6f4b1f;*/ }
.prod_container_bg1 { height: 495px; }
.prod_container_bg2 { height: 970px; }

/**offer bn**/
.offer { max-width: 1190px; width: 100%; margin: 0 auto; overflow: hidden; padding: 30px 0 10px; text-align: center; }
.offer ul { display: flex; justify-content: space-between; align-items: center; margin: auto; padding: 0; list-style: none; }
.offer li { margin: 0px 10px; }
.offer li a { transition: .1s linear; display: block; border: 10px solid #fff; }
.offer li a:hover { transform: scale(0.97); filter: brightness(110%); }
.offer img { width: 100%; max-width: 100%; }

/**float**/
.float_wrapper { background: url('../images/float_bg.png') no-repeat; background-size: 100% 100%; width: 122px; position: fixed; top: 100px; right: 0px; z-index: 250; display: none; }
.float_main { padding-top: 5px; opacity: 0.9; filter: alpha(opacity=90); }
.float_hd { width: 100%; }
.go_top { display: block; cursor: pointer; }
.group_leftmenu { /*background: #848f42;*/ width: 122px; margin: auto; }
.group_leftmenu li { text-align: center; font-size: 16px; padding: 4px 0; position: relative; }
.group_leftmenu.link li { text-align: center; font-size: 17px; padding: 7px 0; position: relative; }
.group_leftmenu li a { position: relative; z-index: 500; cursor: pointer; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; color: #fff; font-weight: bold; }
.group_leftmenu li a:hover, .group_leftmenu li a:focus, .group_leftmenu li a:active { color: yellow; }
.group_leftmenu li:after { content: ' '; position: absolute; z-index: 1; left: 51%; right: 51%; bottom: 0; background: yellow; height: 2px; -webkit-transition-property: left, right; transition-property: left, right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }
.group_leftmenu li:hover:after, .type_leftmenu li:focus:after, .type_leftmenu li:active:after { left: 10%; right: 10%; }

/*==============================================
lightning
==============================================*/
/* .kv_goods { animation: lightning 2s ease-in-out infinite alternate; animation-delay: 1s; } */
.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(120%);
  }
}
@keyframes lightning {
  0%, 52%,56%,60%, 100%  {
    filter: brightness(100%);
  }
  54%,58%,62%  {
    filter: brightness(120%);
  }
}

/*==============================================
Mobile's
==============================================*/
@media screen and (max-width:768px) {
  body { width: 100vw; min-width: inherit; }
  * { box-sizing: border-box; }
  .gotop { background: url('//www.payeasy.com.tw/travel/event/img/icon_top.png') no-repeat; height: 36px; position: fixed; right: 5px; width: 36px; bottom: 55px; z-index: 900; display: none; }
  .gotop a { display: block; width: 48px; height: 36px; }
  .header { width: 100vw; }
  .display_pc { display: none; }
  .display_m {	display: block; }
    
  .main { padding-top: 0; position: relative; background: url('../images/bg_bottom.png') fixed no-repeat center bottom, url('../images/bg.jpg') fixed center top #fcfdeb; background-size: 100%,100%; padding-bottom: 70px; }

  /**kv**/
  .kv_wrapper {background: url('../images/kv_bg_m.jpg') no-repeat center top #fcfdeb; background-size: 100%; }
  .kv_main { width: 100vw; height: 130vw; padding-bottom: 9px; }
  .kv_main img { width: 100%; }
  .kv_slogan{ width: 63vw; }
  .kv_slogan img { left: 17vw; }

  .menu_main { background: url('../images/menu_main_bar_m.jpg'); background-size: 100% 100%; height: auto; padding-top: 2%; padding-bottom: 8%; }
  .menu_main::before { display: none; }
  .menu_main ul { flex-wrap: wrap; }
  .menu_main li { width: 50%; }
  .menu_main li:after { display: none; }

  /**offer bn**/
  .offer, .offer ul { display: block; width: 100vw; }
  .offer li { width: 95%; margin: 0 auto 10px; }

  /**foreign**/
  .tit { width: 100vw; margin: 0 auto; padding: 10px 0 0;}
  .tit img { width: 100%; }
  .foreign_wrapper { background-size: 100%; padding-top: 0; padding-bottom: 0px; }
  .foreign_main { width:100%; padding: 0; }
    
  .section-header { width: 80vw; margin: 2vh auto 0; height: auto; padding: 5px 0; }
  .section-header img { width: 100%; }
    
  .best_product { width: 46%; height:auto; margin-left: 2.7%; margin-right: 0; margin-bottom: 2.5%; }
  .best_img { height: 46vw;}
  .best_tit { line-height: 20px; font-size: 18px; margin-bottom: 3px; height: 42px; }
  .best_detail { height: 107px; padding-top: 5px;}
  .best_text { font-size: 14px; line-height: 26px; width: 95%; letter-spacing: -1px; }
  .best_product:hover .best_text span, .best_product:active .best_text span, .best_product:focus .best_text span { -webkit-animation: marquee 5s linear infinite; animation: marquee 5s linear infinite; }
  .best_money { font-size: 14px; width: 100%; }
  .best_money span { line-height: 30px; }
  .best_money .p_reserve { font-size: 11px; }
  .best_money .p_price { font-size: 25px; padding: 0 3px; }
  .sale_con { left: 0; }
  .sale { line-height: 19px; font-size: 16px; border-bottom-left-radius: 0; padding: 5px 15px; }
    
  .foreign_area { top: 5px; left: 7px; font-size: 13px; padding: 3px 10px; }
  .foreign_product{ width: 46%; height: auto; margin-left: 2.7%; margin-right: 0; margin-bottom: 2.5%; }
  .foreign_img { height: 46vw; }
  .foreign_detail { height: 135px; padding-top: 15px; padding-bottom: 35px; }
  .foreign_tit { font-size: 16px; line-height: 20px; margin-bottom: 3px; /*height: 22px;*/height: 50px; }
  .foreign_text { font-size: 14px; line-height: 18px; height: 55px; }
  .foreign_money { color: #f77054; font-size: 13px; /*letter-spacing: -1px;*/ width: 100%; }
  .foreign_money span { line-height: 30px; }
  .foreign_money span.p_price { font-size: 25px; padding: 0 3px; }
  .p_market_value,
  .p_market_value+.p_sign,
  .p_market_value+.p_sign+.p_price,
  .p_discount { letter-spacing: -1px; }
    
  .tour_product { width: 46%; height:auto; margin-left: 2.7%; margin-right: 0; margin-bottom: 2.5%; }
  .tour_img { height: 46vw; }
  .tour_detail { height: 97px; padding-top: 5px; }
  .tour_tit { line-height: 20px; font-size: 18px; height: 60px; -webkit-line-clamp: 3; }
  .tour_money { font-size: 14px; width: 100%; }
  .tour_money span { line-height: 30px; }
  .tour_money .p_price { font-size: 25px; padding: 0 3px; }

  .ticket_product { width: 46%; height:auto; margin-left: 2.4%; margin-bottom: 2.5%; }
  .ticket_img { height: 46vw; }
  .ticket_detail { height: 102px; }
  .ticket_desc { margin: 0 5px; font-size: 13px; line-height: 25px; height: 25px; }
  .ticket_tit { line-height: 20px; font-size: 18px; height: 42px; }
  .ticket_money { padding: 3px 0; }
  .ticket_money span.sign { font-size: 14px; }
  .ticket_money span.price { font-size: 25px; }

  /**/
  .M_menu_wrap { position: fixed; bottom: 0; z-index: 200; display: block; font-size: 14px; }
  .M_menu_block { width: 100vw; height: 55px; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #555), color-stop(100%, #111)); }
  .M_menu_block:after { content: ''; display: table; clear: both; }
  .M_menu_block ul { list-style: none; display: flex; align-items: stretch; justify-content: space-around; overflow: hidden; }
  .M_menu_block li { width: 100%; line-height: 16px; border-top: 1px solid #ccc; border-left: 1px solid #666; border-right: 1px solid #222; padding-top: 0; text-align: center; padding: 8px 0 13px; }
  .M_menu_block li a { color: #fff; }

}

@media screen and (max-width: 320px) {
  .display_m_xs {	display: block; }
  .best_tit, .foreign_tit { font-size: 15px; }
  .best_money .p_reserve { letter-spacing: -2px; padding: 0 0.8em 0 0.1em; }
  .foreign_text { font-size: 12px; }
}

/* Make it move */
@keyframes marquee {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}