body { overflow-x: hidden;}
#container {
    overflow: hidden;
    width: 100%;
}

.contentBase > h2 { opacity: 0   }

.topHeader { position: relative; height: 889px; background: url(../images/bg_header.jpg) top center no-repeat; }
.topHeader h1 { padding:80px 0 0 0; text-align: center; }

.button { position: absolute; bottom:20px; width: 100%; text-align: center; cursor: pointer; }
.button p { font: 18px/24px "微軟正黑體","arial";color: #9a6d60 }

.bgDark { background: url(../images/bg_dark.jpg) top center}
.bgLight { background: url(../images/bg_light.jpg) top center}

.contentBase { position: relative; text-align: center; padding: 0px 0 90px 0; }
.contentBase .promotionImg { display: inline-block; position: relative;}
.contentBase .shine { display: inline-block; position: absolute; top:0; left: 0; z-index: 1; }
.contentBase .shine1 { top:3%; left: 3% }
.contentBase .shine2 { top:-15%; left: 53% }
.contentBase .shine3 { top:10%; left: 80% }
.contentBase > h2 { padding: 40px 0 20px 0; }



.contentBase .useTrick { position: relative; display: inline-block; width: 300px; height: 300px; text-align: center; border-radius: 20px; overflow: hidden; }
.contentBase .useTrick img { width: auto; height: 100%; }
.contentBase .useTrick h3 { position: absolute; left: 0; bottom: 0; padding: 5px 0; width: 100%;font: 20px/20px "微軟正黑體","arial"; color: #fff; text-align: center; border-radius: 99em; background: rgba(0,0,0,0.8) }
.contentBase .useArrow { transform: translateY(-130px); margin:0 5px; display: inline-block;  }


.contentBase  h3.setItemH3 {  margin-top: -30px; width: 100%; font: 30px/30px "微軟正黑體","arial"; color:#d5352a; text-align: center;  }
.contentBase  ul.setItemUl {  margin-bottom: 30px; }
.contentBase  ul.setItemUl li { font: 18px/24px "微軟正黑體","arial"; color:#000 }


/*C26*/

.group-type-ph { text-align: center;display: block;max-width: 1400px;margin:0 auto; padding-bottom: 20px; }
.group-type-ph .ph { display: inline-block; position: relative; margin:0 10px; width:300px; text-align: center; vertical-align: top;}
.group-type-ph .ph .ph-img,.group-type-ph .ph .ph-img img{display: block;width:100%;margin:0 auto;}
.ph-title { padding:2% 5%; width: 100% ; font: bold 16px/20px "arial","微軟正黑體"; color: #fff; background: #ae0a02; letter-spacing: 1px;}
.ph-detail { margin: 0 8%; padding:1%; width: 84% ; font: 14px/20px "arial","微軟正黑體"; letter-spacing: 1px; overflow: hidden;}
.ph img { width: 300px; height: 200px; }
.ph-feature { margin: 2% 0 2% 2%; width:96%; text-align: left;font: bold 14px/20px "arial","微軟正黑體"; color: #ae0a02; }
.ph em { font: bold 16px/30px "arial","微軟正黑體"; color: #000; letter-spacing: -2px; color: #ae0a02;}
.ph em span{ margin: 0 0 0 -5px ; font: bold 30px/30px "arial","微軟正黑體"; color: #ae0a02;}
.ph em i { margin: 0 0 0 -5px }
.ph a,
.ph a:link { color: #000 }




.promotionImgBuy { display: inline-block; position: relative; text-align: center; padding: 0 50px; /*background: rgba(255,255,0,0.5)*/}
.promotionImgBuy h2 { position: absolute; bottom:20%; left: 0; z-index: 2; }

.promotionMap { display: block; position: relative; text-align: center; padding: 0px 0 0 0; }
.promotionMap > div { display: inline-block; }
.promotionMap .touchMap { position: relative; }
.promotionMap .touchMap span { position: absolute;  z-index: 10;font: 20px/24px "微軟正黑體","arial"; color: #fff; cursor: pointer;  }
.promotionMap .touchMap span.now { color: #fff200; text-shadow: 1px 1px 0 rgba(0,0,0,0.5) }
.promotionMap .touchMap span.aomo {top:15%; left: 40%;} 
.promotionMap .touchMap span.fuku {top:85%; left: 30%;} 
.promotionMap .touchMap span.akit {top:35%; left: 25%;}
.promotionMap .touchMap span.yama {top:60%; left: 23%;}
.promotionMap .touchMap span.iwat {top:40%; left: 65%;}
.promotionMap .touchMap span.send {top:60%; left: 55%;} 

.promotionMap .touchMap span > i {-webkit-animation: touchMapIAnimation 1s infinite;}
@-webkit-keyframes touchMapIAnimation {
  from { transform: translateY(0);  }
  to {  transform: translateY(-5px); }
}

/*
.promotionMap .touchMap span::before { content: "555" }*/

.promotionMap .touchMapText { position: relative; vertical-align: top;  padding: 0 20px; width: 40%; }
.promotionMap .touchMapText img { width: 100%; }
.promotionMap .touchMapText  h3 {font: bold 24px/24px "微軟正黑體","arial"; color: #d5352a }
.promotionMap .touchMapText  p { margin:0 0 20px 0; font: 15px/24px "微軟正黑體","arial"; color: #000 }
.promotionMap .touchMapText > div {  }
.promotionMap .touchMapText .area { vertical-align: top; display: inline-block; padding: 0 1%; width: 49%; }
.promotionMap .touchMapText .fuku ,
.promotionMap .touchMapText .akit ,
.promotionMap .touchMapText .yama ,
.promotionMap .touchMapText .iwat , 
.promotionMap .touchMapText .send { display: none }






.contentBase .promotionText {vertical-align: top;display: inline-block; position: relative; padding:20px 	; width: auto; max-width: 500px; height:auto; border-radius: 20px; border: 5px solid #000; background: #fff }
.promotionText h3 {  font: bold 36px/36px "微軟正黑體","arial"; text-align: left; color: #000 }
.promotionText ul {}
.promotionText ul li { list-style: circle; margin:20px 0 20px 40px ;font: bold 24px/24px "微軟正黑體","arial"; text-align: left; color: #000 }
.promotionText h3.small { font-size: 20px ; line-height: 20px; color:#777}
.promotionText ul.small li { margin:10px 0 10px 40px ; font: 16px/20px "微軟正黑體","arial"; color:#777; }
.promotionText .dog { position: absolute; display: inline-block; right: -50px; bottom: -50px }

.link:hover a img { transform: translateY(-10px); }

.contentBase .promotionImgLand { display: inline-block; position: relative; margin: 0 50px;}
.promotionImgLand:hover img {-webkit-animation: rotateTrick 1.5s infinite alternate;}

.tohokuContentBase h2 { margin-top: 20px;  font:bold 40px/40px "微軟正黑體","arial"; text-align: center; color: #ce1220; letter-spacing: 1; }
.tohokuContent { margin:0 auto; padding: 10px; width: 90%; max-width: 1440px;  }
.tohokuContent .box { display: inline-block; margin-bottom: 40px; padding: 10px; width: 300px; }
.tohokuContent .box img { vertical-align: top; width: 100%; }
.tohokuContent .box h3 { vertical-align: top; padding: 5px 0; font: 18px/18px "微軟正黑體","arial"; text-align: center; color: #fff;background: #ce1220 }
.tohokuContent .box p { padding: 5px; font: 14px/20px "微軟正黑體","arial"; text-align: left; color: #190504; letter-spacing: 1px }

/*C23 use*/
.carrier {   margin: 0px auto ;width: 90%; max-width: 1440px; height: auto; text-align: center; } 
.carrier .box-head ,
.intro-anchors { display: none; }
.carrier h4 { position: relative; vertical-align: top; display: block; margin:0 0 20px 0; padding:0px; width: 100%; height:auto; letter-spacing: normal;  font: bold 30px/30px "微軟正黑體","arial"; color: #ce1220; text-align: center;  }
.carrier ul { display: block; padding: 20px; width:100%  }
.carrier ul li { position: relative; width: 100%; margin: 0 0 20px 0; padding: 30px 30px; text-align: left; letter-spacing: 0 ; border-radius: 99em; background: #fff}
.carrier ul li a { display: block; font:20px/24px "arial","微軟正黑體"; color: #180504}
.carrier ul li a strong { font: bold 28px/40px "arial","微軟正黑體"; display: block; text-align: left; color: #ce1220 }
.carrier ul li em { position: absolute;bottom: 10px; right: 50px;font:16px/16px "arial","微軟正黑體"; color:#ce1220; }
.carrier ul li em span {font: 18px/18px "arial","微軟正黑體";}

.fastBuyButton { position: fixed;bottom:0; margin:0 auto; width: 100%;  text-align: center; z-index: 100 }
.fastBuyButton > div { margin:0 auto; max-width: 1440px; border-radius:20px 20px 0 0; overflow: hidden;  }
.fastBuyButton > div > div { display: inline-block; margin: 0 auto; padding: 10px 0; width: 20%; letter-spacing: normal;font: 18px/18px "arial","微軟正黑體"; color: #fff; text-align: center; background: #1612ce ; cursor: pointer;}
.fastBuyButton > div > div:nth-child(2) { background: #f97a21}
.fastBuyButton > div > div:nth-child(3) { background: #ec9b98}
.fastBuyButton > div > div:nth-child(4) { background: #36b154}
.fastBuyButton > div > div:nth-child(5) { background: #05a6f9}
.fastBuyButton > div > div:hover { color: #fff200 }


.oneDayTrip { margin:0 auto; width: 80%; max-width: 900px; }
.oneDayTrip h3 { vertical-align: top; margin:0 auto; padding: 5px 40px; display: inline-block;  font: bold 20px/20px "微軟正黑體","arial"; text-align: center; color:#fff; border-radius: 99em; background:#ce1220; cursor: pointer; }
.oneDayTrip h3.now,
.oneDayTrip h3:hover { color:#ce1200; border:1px solid #ce1200; background:#fff; } 
.oneDayTrip .text  h4 { vertical-align: top; display: inline-block; margin:0px 0 10px 0; padding: 5px 0; font: bold 24px/24px "微軟正黑體","arial"; text-align: center; color: #ce1220 ;}
.oneDayTrip .contentBase { margin:10px 0 30px 0; padding: 0; }
.oneDayTrip .contentBase .img { display: inline-block;vertical-align: top; width: 49%; }
.oneDayTrip .contentBase .img img { vertical-align: top; width: 100%; }
.oneDayTrip .contentBase .text { display: inline-block; padding: 0 10px; width: 49%; font: 16px/24px "arial","微軟正黑體"; color: #000; text-align: left;   }
.oneDayTrip .day2 , .oneDayTrip .day3 , .oneDayTrip .day4 , .oneDayTrip .day5 { display: none }


@media only screen and (max-width: 1020px) {
.contentBase .useTrick { width: 29% }
}


@media only screen and (max-width: 980px) {
.topHeader { position: relative; height: auto; background: url(../images/bg_header.jpg) top center no-repeat; }
.topHeader h1 { padding-bottom: 20% }
.topHeader h1 img {  width: 80%; }


.contentBase .promotionImg {  width: 40%}
.contentBase .promotionImg img { width: 100%; }
.contentBase .promotionText { width: 55%; background-size: 100%; }

.promotionImgBuy:first-child {  margin-bottom: 20%; }

.promotionMap .touchMapText {width: 50%; }

.contentBase .promotionImgLand { display: inline-block; position: relative; margin:0 1%;  width: 30%;}
.contentBase .promotionImgLand img { width: 100% }

}

@media only screen and (max-width: 800px) {
.contentBase .promotionImg {  width: 80%}
.contentBase .promotionText { width: 80%; }
}



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

.contentBase .useTrick { margin-bottom: 10%;width: 80% }
.contentBase .useArrow { display: none }

.promotionMap { padding: 0 }
.promotionMap .touchMap { position: sticky; position: -webkit-sticky; top:0 ; margin-bottom: 5%; padding: 2% 10%; width: 100%; z-index: 10;background:#9a6d60;  }
.promotionMap .touchMap img { display: none } 
.promotionMap .touchMap span { position: static; top:0; left: 0; margin: 0% 1%; padding: 0 5%; line-height: 30px; border-radius: 10px; white-space:nowrap; }
.promotionMap .touchMapText {width: 90%; }


.oneDayTrip .text  h4 {  width: 100%; }
.oneDayTrip .contentBase .img { width: 100%;}
.oneDayTrip .contentBase .text { width: 100%;}
}


@media only screen and (max-width: 500px) {
h2 img { width: 90%; }

.topHeader h1 { padding: 10% 0 20% 0; }
.topHeader h1 img {  width: 90%; }

.fastBuyButton > div { border-radius: 0 }
.fastBuyButton > div > div { height: 50px; vertical-align: bottom; font: 14px/14px "arial","微軟正黑體"; }

.group-type-ph { width: 80% }

.promotionImgBuy { width: 90%; }
.promotionImgBuy:first-child {  margin-bottom: 40%; }
.promotionImgBuy img { width: 100%; }




.contentBase .promotionText { padding: 5%; height: auto; background: #fff; }
.promotionText h2 {  font: bold 20px/20px "微軟正黑體","arial"; text-align: center; color: #000 }
.promotionText ul { padding: 0 5%; }
.promotionText ul li { list-style: circle; margin:0 ; font: normal 16px/24px "微軟正黑體","arial"; text-align: left; color: #000 }

.promotionText h2.small { margin-top:10%; font-size: 20px ; line-height: 20px; color:#777}
.promotionText ul.small li { margin:0; font: 14px/20px "微軟正黑體","arial"; color:#777; }



.promotionText .dog img { width: 50px }


.promotionMap .touchMapText  h3 {font: bold 20px/24px "微軟正黑體","arial";  }
.promotionMap .touchMapText  p { margin:0 0 20% 0; font: 14px/24px "微軟正黑體","arial"; color: #000 }
.promotionMap .touchMapText .area { padding: 0 1%; width: 100%; }

.carrier ul { padding: 0% }
.carrier ul li { padding: 5% 5% 10% 5%; border-radius: 20px;}
.carrier ul li a {  font: 16px/20px "arial","微軟正黑體"; color: #180504}
.carrier ul li a strong { margin-bottom: 5%; font: bold 20px/24px "arial","微軟正黑體";  }

.oneDayTrip h3 { vertical-align: top; margin:2% 2%; padding: 5px 10px; display: inline-block;  font: 16px/16px "微軟正黑體","arial";}


}



/*animate*/
.upToDown {-webkit-animation: upToDown 1s infinite alternate; }
@-webkit-keyframes upToDown {
  from { transform: translateY(-10px); opacity: 0;  }
  to {  transform:translateY(0); opacity: 1 }
}


.upToDown2 {-webkit-animation: upToDown2 1s ; animation-fill-mode: forwards; ;}
@-webkit-keyframes upToDown2 {
  from { transform: translateY(-200px); opacity: 0;  }
  to {  transform:translateY(0); opacity: 1 }
}


.rotate {-webkit-animation: rotate 1s infinite alternate;}
@-webkit-keyframes rotate {
  0% { transform: rotate(10deg);  }
  
  100% { transform: rotate(-10deg); }
}

.smallToBig {-webkit-animation: smallToBig 0.8s infinite alternate;}
@-webkit-keyframes smallToBig {
  0% { transform: scale(0.5);  }  
  100% { transform: scale(1); }
}

.dog {-webkit-animation: dog 2s infinite ;}
@-webkit-keyframes dog {
  0% { transform: translate(0px,0px);  }  
  5% { transform: translate(-10px,-10px); }
  10% { transform: translate(-20px,0px); }
  15% { transform: translate(-30px,-10px); }
  20% { transform: translate(-40px,0px); }
  25% { transform: translate(-50px,-10px); }
  30% { transform: translate(-60px,0px); }
  35% { transform: translate(-70px,-10px); }
  40% { transform: translate(-80px,0px); }
  45% { transform: translate(-90px,-10px)  }
  50% { transform: translate(-100px,0px) scaleX(-1);}
  55% { transform: translate(-90px,-10px) scaleX(-1); }
  60% { transform: translate(-80px,0px)scaleX(-1); }
  65% { transform: translate(-70px,-10px)scaleX(-1); }
  70% { transform: translate(-60px,0px)scaleX(-1); }
  75% { transform: translate(-50px,-10px)scaleX(-1); }
  80% { transform: translate(-40px,0px)scaleX(-1); }
  85% { transform: translate(-30px,-10px)scaleX(-1); }
  90% { transform: translate(-20px,0px)scaleX(-1); }
  95% { transform: translate(-10px,-10px)scaleX(-1); }
  100% { transform: translate(0px,0px)scaleX(-1); }
  }



.rotateTrick {-webkit-animation: rotateTrick 3s infinite;}
@-webkit-keyframes rotateTrick  {
  0% { transform: scaleX(1) ;  }  
  50% { transform: scaleX(-1); }
  100% { transform: scaleX(1); }
}