@charset "utf-8";

/* CSS Document */
/************************************************************************************
RESET
*************************************************************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,figure,article,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td ,header {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;	
	-webkit-text-size-adjust: none;/*防止allpe的safari瀏覽器字體變大*/
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
   /* border-collapse: collapse;*/
    border-spacing: 0;
}

a img {
	border: none;
}

.clean { clear:both;}

.clearfix {
  overflow: auto;
}

img { max-width:100%;}

.left { float: left;}
.right { float: right;}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


/************************************************************************************
STRUCTURE 主要區塊
*************************************************************************************/
/*
html { scroll-behavior: smooth;}*/

#web-outer {
  font-family:"微軟正黑體","Roboto", sans-serif;
	max-width: 1920px;
	overflow: hidden;
  background:#f70c69;
}
/*======================
====Main CSS=====
=======================*/

:root {
  --red: #d90037;
  --deep-red: #a80027;
  --cream: #fff1df;
  --yellow: #ffe400;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-width: 320px;
}
/*
body {
  background: #ff0873;
  font-family: "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif;
}
*/
img {
  display: block;
  max-width: 100%;
}

.campaign-hero {
  position: relative;
  width: 100%;
  height: min(770px, 40.1042vw);
  min-height: 470px;
  overflow: hidden;
  isolation: isolate;
  background-color: #ff0873;
  background-image: url("../images/bg-header.webp");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

.campaign-hero__stage {
  position: relative;
  width: min(100%, 1920px);
  height: 100%;
  margin: 0 auto;
}

.campaign-hero__frame {
  position: absolute;
  z-index: 1;
  top: 20%;
  left: 50%;
  width: min(49.17%, 944px);
  transform: translateX(-50%);
  pointer-events: none;
}

.campaign-hero__title {
  position: absolute;
  z-index: 3;
  top: 11%;
  left: 50%;
  /*width: min(46.25%, 888px);*/
  margin: 0;
  transform: translateX(-50%);
  filter: drop-shadow(0 9px 0 rgb(120 0 36 / 28%));
}

.campaign-hero__title img {
  width: 100%;
}

.offer-list {
  position: absolute;
  z-index: 4;
  top: 51%;
  left: 50%;
  display: flex;
  gap: clamp(14px, 1.55vw, 30px);
  transform: translateX(-50%);
}

.offer-card {
  width: clamp(170px, 10.85vw, 208px);
  padding: 5px;
  border-radius: 12px;
  background: rgb(255 241 223 / 100%);
  box-shadow: 0 5px 0 rgb(139 0 37 / 16%);
  color: #161616;
  text-align: center;
}
.offer-card-line { 
  border: 2px solid #be0000;
  border-radius: 12px;
  padding: 16px 10px;
}
.offer-card__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.offer-card__heading img {
  width: auto;
  height: clamp(34px, 2.5vw, 48px);
  object-fit: contain;
}

.offer-card__heading p,
.offer-card__price,
.sale-time p {
  margin: 0;
}

.offer-card__heading p {
  font-size: clamp(17px, 1.18vw, 23px);
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.offer-card__heading strong {
  font-weight: 900;
}

.offer-card__price {
  margin-top: 2px;
  color: #c60013;
  font-family: Arial, sans-serif;
  font-size: clamp(30px, 2.05vw, 40px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 1px;
  white-space: nowrap;
}

.offer-card__price span {
  margin-right: 4px;
  font-size: .68em;
}

.sale-time {
  position: absolute;
  z-index: 4;
  bottom: 14%;
  left: 50%;
  width: clamp(430px, 27.6vw, 530px);
  height: clamp(58px, 4vw, 76px);
  border: 4px solid #fff;
  border-radius: 999px;
  background: linear-gradient(180deg, #e0003f 0%, #c90036 100%);
  box-shadow: 0 6px 0 rgb(112 0 37 / 18%);
  transform: translateX(-50%);
}

.sale-time__clock {
  position: absolute;
  right: calc(100% - 55px);
  bottom: -19px;
  width: clamp(145px, 11.4vw, 219px);
  max-width: none;
  filter: drop-shadow(0 8px 5px rgb(89 0 24 / 25%));
}

.sale-time p {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  gap: .28em;
  padding-left: 34px;
  color: #fff;
  font-size: clamp(30px, 1.82vw, 35px);
  font-style: italic;
  font-weight: 800;
  white-space: nowrap;
}

.sale-time strong {
  color: var(--yellow);
  font-size: 1.25em;
}

.sale-time b {
  font-size: 1.16em;
  font-weight: 900;
}

.is-ready .campaign-hero__title,
.is-ready .offer-list,
.is-ready .sale-time {
  animation: hero-in .65s cubic-bezier(.2, .8, .2, 1) both;
}

.is-ready .offer-list {
  animation-delay: .12s;
}

.is-ready .sale-time {
  animation-delay: .22s;
}

@keyframes hero-in {
  from {
    opacity: 0;
    translate: 0 18px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@media (max-width: 1400px) {

  .campaign-hero__frame {
    top:24%;
    }

  .offer-list {
    top:53%;
}
.sale-time {
  bottom: 8%;
}
 
  }

  @media (max-width: 1250px) {

  .campaign-hero__frame {
    top:24%;
    }

  .offer-list {
    top:51%;
}
.sale-time {
  bottom: 6%;
}
 
  }
@media (max-width: 1100px) {
  .campaign-hero {
    height: clamp(560px, 60vw, 650px);
    min-height: 0;
    background-position: center top;
    background-size: auto 100%;
  }

  .campaign-hero__frame {
    top: 22%;
    width: min(92%, 760px);
  }

  .campaign-hero__title {
    top: 12%;
    width: min(78%, 720px);
  }

  .offer-list {
    top: 51%;
  }

  .offer-card {
    width: 185px;
  }

  .sale-time {
    bottom: 12%;
  }
}

@media (max-width: 980px) {


  .campaign-hero__title {
    top: 11%;
    width: min(78%, 720px);
  }

  .offer-list {
    top: 53%;
  }

  .sale-time {
    bottom: 8%;
  }
}

@media (max-width: 768px) {

  .campaign-hero__frame {
    top: 22%;
  }

  .offer-list {
    top: 50%;
  }

  .sale-time {
    bottom: 10%;
  }
}

@media (max-width: 660px) {
  .campaign-hero {
    height: clamp(500px, calc(418px + 22vw), 560px);
    background-position: center top;
  }

  .campaign-hero__frame {
    top: 22%;
    width: 102%;
    max-width: 620px;
  }

  .campaign-hero__title {
    top: 12.5%;
    width: min(94%, 470px);
    filter: drop-shadow(0 5px 0 rgb(120 0 36 / 24%));
  }

  .offer-list {
    top: 43%;
    width: calc(100% - 24px);
    gap: 10px;
    justify-content: center;
  }

  .offer-card {
    width: min(46%, 178px);
    padding: 11px 7px 10px;
    border-width: 2px;
    border-radius: 11px;
    outline-width: 2px;
  }

  .offer-card__heading {
    gap: 4px;
  }

  .offer-card__heading img {
    height: 35px;
  }

  .offer-card__heading p {
    font-size: clamp(14px, 4.2vw, 18px);
  }

  .offer-card__price {
    margin-top: 7px;
    font-size: clamp(26px, 8.2vw, 35px);
    letter-spacing: 0;
  }

  .sale-time {
    bottom: 14.5%;
    width: min(82%, 360px);
    height: 56px;
    border-width: 3px;
  }

  .sale-time__clock {
    right: calc(100% - 36px);
    bottom: -14px;
    width: 124px;
  }

  .sale-time p {
    gap: .2em;
    padding-left: 28px;
    font-size: clamp(20px, 6vw, 27px);
  }
}


@media (max-width: 480px) {

  .campaign-hero__frame {
    display: none;
  }
}

@media (max-width: 440px) {

  .offer-list {
    top: 40%;
}
  .sale-time {
    width: 84%;
  }

  .sale-time__clock {
    right: calc(100% - 30px);
    width: 110px;
  }

  .sale-time p {
    padding-left: 20px;
    font-size: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .is-ready .campaign-hero__title,
  .is-ready .offer-list,
  .is-ready .sale-time {
    animation: none;
  }
}

/*----header------*/

/*header { margin-top: 40px;}*/

header h1 {
    text-indent: 101%;
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
    width: 100%;
}


/*======================
====nav CSS=====
=======================*/

#main-nav{
    width: 100%;
    z-index: 990;  
    background:#7f0521; 
    margin:0 auto;
}
 
 #block_menu {
     text-align: center;
     font-weight: 600;
     overflow: hidden;
 }
 
 .sticky {
     top:40px;
 }

.nav {  margin:0 auto;  }
.nav li {  
    display:inline-block; font-weight: 600; font-size: 20px; letter-spacing: 1px;
    color:#e0768c; margin: 10px 8px; 
}
.nav li a { display:block; width:100%; height:100%; text-align: center; padding:8px 10px; text-decoration: none; color:#e0768c; }
.nav li a:hover,.nav li a.active { color:#ffffff; background: #ff1666; border-radius: 20px; }


/*======================
====main CSS=====
=======================*/ 

.first { padding-top:90px; margin-top: -90px;}

.subtitle {
    background: url("../images/bg-subtitile.webp") top center no-repeat;
    height: 138px;
    font-size: 38px;
    font-weight: 800;
    color: #ffffff;
    text-align: center;
    line-height: 100px;
    margin-bottom: 15px;
}

.s-title {
    background: url("../images/bg-subtitile2.webp") center center no-repeat;
    line-height: 48px;
    font-size: 22px;
    font-weight: 700;
    color: #070707;
    text-align: center;
    margin:20px 0;
}

.explain-top { background: url("../images/info-top.webp")  top left no-repeat;  padding-top: 60px; }
.explain-bom { background: url("../images/info-bom.webp")  bottom right no-repeat; padding-bottom: 100px; }
.explain-outer { padding:20px 150px; background: #faf0da; border-radius: 30px; margin:0 12%;  }


.info-box { 
  max-width: 700px;
  margin: 0 auto;

  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 24px;
  padding: 20px;
 }

.info-box article {
  text-align: center;
  margin:0 auto;
  width:50%;
  background:#fcf5e5;
  border-radius: 22px;
  border:2px solid #742121;
  padding:20px 10px;
} 

.info-box article figure img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 12px;
}

.info-box article h3 {
  display: inline-block;
  position: relative;

  margin: 0;
  padding: 0 4px 4px;

  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 1px;

  color: #1a1a1a;
  z-index: 1;
}

.info-box article h3::after {
  content: "";

  position: absolute;
  left: 0;
  bottom: 0;

  width: 100%;
  height: 12px;

  background: #ffda77;

  z-index: -1;
}

.info-box article h4 {

  font-size: 19px;
  font-weight: 600;
  line-height: 1.6;
  color: #1a1a1a;
  padding:10px 0;
}

.info-box article h4 em {

  color: #db4e02;
  font-style: normal ;
  font-size: 21px;

}
.info-box article h5 {

  font-size: 17px;
  font-weight: 500;
  color: #db0702;
  line-height: 1.6;
}


.notice-in {
  max-width: 960px;
  margin: 0 auto;
  padding: 15px;
}

.notice-in h6 {
  font-size: 23px;
  font-weight: 600;
  color: #070707;
  padding:20px 0;
}

.notice-in p {
  font-size: 18px;
  font-weight: 500;
  color: #070707;
  line-height: 1.7;
  padding-left: 22px;
  text-indent: -16px; 
}

.notice-in p span {
  color: #db0702;
  font-weight: 600;
}
.notice-in p::before {
  content: "◆";
  font-size: 16px;
  font-weight: 600;
  color: #070707;
  padding-right: 6px;
}

.product-top { background:  #fc448d url("../images/product-top.webp")  top left no-repeat;  padding-top: 60px;}
.product-bom { background: url("../images/product-bom.webp") bottom right no-repeat; padding-bottom: 100px; }
/*.product-outer { padding:20px 150px; background: ; border-radius: 30px; margin:30px 15%;  }*/



* {
  box-sizing: border-box;
}

/* =========================
   卡片列表
========================= */

.tabs-container { margin: 0 auto; max-width: 1600px; }

.tab-content-outer { border-radius: 20px;  padding:0px 0px; /*margin:0 15px;*/}
.tabs-box { margin:30px 0 20px 0; text-align: center;}
.tabs-box li { display: inline-block;text-align: center; margin: 6px 1px; }
.tabs-box li a { 
    width: 100%; height: 100%; display: block; 
    color:#cf5988; background: #ffa2c7; 
    border-radius: 18px; padding:6px 20px; 
    font: 600 22px "微軟正黑體"; text-decoration: none;
}
.tabs-box li a:hover, .tabs-box li a.active { background: #af036c; color:#fff5de;}



.product-outer {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 24px;
  padding: 40px;
}

.tour-list {
  position: relative;
  transition: all 0.3s ease-in;
  flex: 0 1 calc((100% - 48px) / 3);
  max-width: calc((100% - 48px) / 3);
  min-width: 0;
  background: #fff4d9;
  border: 1px solid #8d3c35;
  border-radius: 0 0 28px 28px;
}

.tour-list {   
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
 }
.tour-list:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(90, 30, 25, 0.15);
}

/* =========================
   卡片
========================= */

.tour-card {
  display: block;

  padding: 0;
  overflow: hidden;

  color: #8d403b;
  text-decoration: none;

}


/* =========================
   左上分類標籤
========================= */
.tour-tag {
  position: absolute;
  top: 0;
  left: 14px;

  width: 68px;
  height: 68px;

  display: flex;
  justify-content: center;
  align-items: flex-start;

  padding-top: 17px;
  background: #ef8500;
  color: #fff;

  font-size: 16px;
  font-weight: 700;
  line-height: 1;

  z-index: 1;

  /* 緞帶造型：左右兩邊都斜 */
clip-path: polygon(
  0 0,
  100% 0,
  100% 100%,
  50% 82%,
  0 100%
);
}
/* =========================
   卡片標題
========================= */

.tour-title {
  width: 100%;
  min-height: 54px;

  display: flex;
  align-items: center;

  padding: 8px 20px 8px 20px;
  background: #742121;
  color: #fff;

  font-size: clamp(22px, 1.65vw, 28px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 1px;
}


/* =========================
   內容區
========================= */
.tour-content {
 /* position: relative;*/
  /*min-height: 210px;*/
  padding: 20px 26px 70px;
  display: flex;
  flex-direction: column;
  flex:1;
}

/* 行程描述 */
.tour-desc {
  margin: 0;
  color: #863939;
  font-size: clamp(18px, 1.35vw, 20px);
  line-height: 1.6;
  font-weight: 600;
}


/* =========================
   分隔線
========================= */
.tour-line {
  width: 100%;
  height: 1px;
  margin: 10px 0 12px;
  background: #a56056;
}


.tour-info {
  margin: 0;
  color: #db7b00;
  font-size: clamp(15px, 1vw, 16px);
  font-weight: 600;
  line-height: 1.5;
  padding-top: 8px;
}

.tour-info::before {
    content: "◆";
    margin-right: 6px;
    font-size: 14px;
    color:#db7b00;
}

.tour-info:empty {
  	display: none;
}

.year {
  color: #313131;
  font-size: 17px;
	font-weight: 600;
  display: block;
  line-height: 1.6;
}

/*測試模組新增*/
.product-date {
	display: inline-block;
	position: relative;
	box-sizing: border-box;
}

.product-date:has(i) {
	text-decoration: line-through;
	color: #a3a3a3;
}

.product-date:has(i:empty) {
	text-decoration: unset;
	color: #000;
}

.product-date i:empty {
	display: none;
}

.product-date i {
	position: absolute;
    top: 0px;
    width: 1px;
    left: 0px;
    height: 1px;
    text-indent: -9999px;
}

.product-date::after {
	content: '、';
	display: inline-block;
}

.product-date:last-child::after {
	display: none;
}
/*.tour-list:has(.card-saleout:empty):hover {
	transform: translateY(4px);
}

.tour-list:has(.card-saleout):hover {
	transform: unset;
}*/

.card-saleout {
	width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 2;
    background: rgb(60 60 60 / 70%);
    display: inline-flex;
    align-items: center;
    justify-content: center;	
    color: #ffffff;
    font-size: 40px;
    font-weight: bold;
    border-radius: 0 0 28px 28px;
}

.card-saleout:empty {
	display: none;
}

/* =========================
   價格
========================= */
.tour-price {
  position: absolute;
  right: 20px;
  bottom: 14px;
  display: flex;
  align-items: baseline;
  white-space: nowrap;
  color: #dd0d0d;
  font-family: Arial, Helvetica, sans-serif;
}


.tour-price .currency {
  margin-right: 4px;
  font-size: 15px;
  color: #863939;
}

.tour-price strong {
  font-size: clamp(28px, 2.3vw, 38px);
  font-weight: 700;
  line-height: 1;
}

.tour-price .unit {
  margin-left: 5px;
  font-size: 14px;
  color: #863939;
}


@media (max-width: 1200px) {

.product-outer {
  gap: 22px;
  padding: 25px;
}
}
/* =========================
   768px 以下
   一排 2 個
========================= */
@media (max-width: 767px) {

  .product-outer {
    gap: 20px;
    padding: 16px;
  }


 .tour-list {
    flex: 0 1 calc((100% - 20px) / 2);
    max-width: calc((100% - 20px) / 2);
  }


  .tour-tag {
    left: 10px;

    width: 58px;
    height: 54px;

    font-size: 14px;
  }


  .tour-title {
    min-height: 54px;

    padding-right: 12px;

    font-size: 20px;
  }


  .tour-content {
    min-height: 200px;

    padding:
      16px
      18px
      65px;
  }


  .tour-desc {
    font-size: 15px;
  }


  .tour-info {
    font-size: 14px;
  }


  .tour-price {
    right: 16px;
    bottom: 12px;
  }


  .tour-price strong {
    font-size: 28px;
  }

}


/* =========================
   480px 以下
   一排 1 個
========================= */
@media (max-width: 499px) {

  .product-outer {
    gap: 16px;

    padding:
      12px
      10px;
  }


  .tour-list {
    flex: 0 1 100%;
    max-width: 100%;
  }


  .tour-tag {
    left: 10px;

    width: 58px;
    height: 52px;

    font-size: 14px;
  }


  .tour-title {
    min-height: 52px;

    padding:
      8px
      12px
      8px
      12px;

    font-size: 21px;
    justify-content: center;
  }


  .tour-content {
    min-height: 190px;

    padding:
      16px
      18px
      62px;
  }


  .tour-desc {
    font-size: 16px;
    line-height: 1.65;
  }


  .tour-line {
    margin:
      8px
      0
      10px;
  }


  .tour-info {
    font-size: 15px;
  }


  .tour-price {
    right: 16px;
    bottom: 12px;
  }


  .tour-price strong {
    font-size: 29px;
  }

}

/*------media query----------*/

@media only screen and ( max-width:1200px) 
{ 
.explain-outer { padding:20px 20px; }
}

@media only screen and ( max-width:1024px) 
{ 
.explain-outer { margin:0 5%; }

}


/*---平板-----*/

@media only screen and ( max-width:768px) 
{ 
  .first { padding-top:0px; margin-top: 0px;}
  #main-nav { display: none;}
}


@media only screen and (max-width:600px) 
{   
  .info-box { flex-wrap: wrap;}
  .info-box article {
    width:100%;
  } 

}


/*---手機版-----*/

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