/*
   _____   _    _             __  __
  / ____| | |  | |    /\     |  \/  |
 | |  __  | |  | |   /  \    | \  / |
 | | |_ | | |  | |  / /\ \   | |\/| |
 | |__| | | |__| | / ____ \  | |  | |
  \_____|  \____/ /_/    \_\ |_|  |_|

Author: Justin / Kenneth
*/
/*
@import url(http://fonts.googleapis.com/earlyaccess/cwtexkai.css);
.font-kai{
  font-family: 'cwTeXKai', serif;
}
*/

.v-play-btn {
  display: block;
  width: 50px;
  height: 30px;
  position: relative;
  margin: 1.5em auto 0.1em auto;
  text-indent: 100%;
  overflow: hidden;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, .7);
}
.v-play-btn:hover {
  background-color: #4bf;
}
.v-play-btn:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -0.4375rem 0 0 -0.246485rem;
  border-style: solid;
  border-width: 0.4375rem 0 0.4375rem 0.781255rem;
  border-color: transparent transparent transparent #fff;
}

.video-container {
  background: #000;
  width: 100%;
  position: absolute;
  z-index: -1;
  overflow: hidden;
  top: 0;
  left: 0;
}
.video-container video, .video-container > div {
  opacity: 0.7;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  min-height: 100%;
  min-width: 100%;
  min-width: calc(100% + 50px);
  position: absolute;
  z-index: 0;
}

.half {
  text-align: center;
}


.social-btn-box {text-align: center; margin: -12px 0 24px;}
.weather-forcast { background: rgba(255, 255, 255, .6); border-radius: 50%; color: #333; display: inline-block; font-size: 18px; line-height: 1.7; padding: 5px 20px !important; position: absolute; right: 20px; top: 50px; text-align: center; z-index: 1; }
.weather-forcast h3 { margin: 0 0 5px; }
.weather-forcast .weather__icon { position: relative; top: 10px; margin: 0 auto; width: 34px; }
.weather-forcast .weather__humi { font-size: 14px; }
.weather-forcast .weather__temp { font-size: 20px; }
.weather-forcast .weather__forcast { color: #666; font-size: 12px; text-align: center; position: relative; bottom: 10px; }

.video-container .poster-volleyball{background: url('/images/index/index-volleyball.jpg') center center no-repeat;-webkit-background-size: cover; background-size: cover;top: initial;}
.video-container .poster-nightmarket{background: url('/images/index/index-nightmarket.jpg') center center no-repeat;-webkit-background-size: cover; background-size: cover;}
.video-container .poster-sunset{background: url('/images/index/index-sunset.jpg') center center no-repeat;-webkit-background-size: cover; background-size: cover;opacity:1}

.video-container .poster-volleyball-s{background: url('/images/index/index-volleyball-s.jpg') center center no-repeat;-webkit-background-size: cover; background-size: cover;}
.video-container .poster-nightmarket-s{background: url('/images/index/index-nightmarket-s.jpg') center center no-repeat;-webkit-background-size: cover; background-size: cover;}
.video-container .poster-sunset-s{background: url('/images/index/index-sunset-s.jpg') center center no-repeat;-webkit-background-size: cover; background-size: cover;opacity:1}


#index-mb1 {color: #fff; line-height: 1.5em; font-size: 1.5em;position: relative;}
#index-mb1 .popup-youtube{text-decoration: none;color:inherit;margin-top: 200px;display: inline-block;}
#index-mb1 .popup-youtube .main-title{width: 200px;}
#index-mb1 .popup-youtube .main-title-desc{width: 80%;}
#index-mb1 .popup-youtube .guam-txt{width: 100%;max-width: 180px;}
#index-mb1 .slogan {font-size: 18px;}

#index-mb1 p{text-align: center;}
#index-mb1 .search-block > div {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}
#index-mb1 .search-block {
  background-color: rgba(0, 0, 0, .5);
  font-size: 16px;
  padding: 26px 8px 8px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
#index-mb1 .search-block .flat-button{background-color: #ffcd31;color:#000;padding: 10px 22px; margin: 0 0 0 10px;}
#index-mb1 .search-block .flat-button:hover{background-color: #ffdd41;}
#index-mb1 .search-block input[type="text"]{
  width: calc(100% - 101px);
  height: 34px;
}
#index-mb1 .keyword-list li {
  color: #ffcd31;
  display: inline;
}
#index-mb1 .keyword-list li a{
  color: inherit;
  padding-right: 12px;
}

section[id^="index-mb"] > div { margin: 0 auto; padding: 0 24px;}
#index-mb1 div[class^="box-"] {padding: 0 2em; box-sizing: border-box; position: absolute; text-align: center; overflow: hidden;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-orient: vertical;
-moz-box-direction: normal;
}
#index-mb1 > div {padding: 0;}

#index-mb2 > div {padding: 0;}
#index-mb2 .link-block{background-size:cover;display:inline-block;position:relative;width:100%;height:100%;text-decoration:none;}
#index-mb2 .link-block:hover .desc{background-color: rgba(0, 0, 0, .8);}
#index-mb2 .link-block img{width: 100%;height: 100%;}
#index-mb2 .desc{background-color: rgba(0, 0, 0, .5);box-sizing:border-box;padding: 26px 10px;margin-top: 320px;text-align: right;width: 100%;transition: all .15s ease-in-out;}
#index-mb2 .desc h2{color: #FFF; font-size: 28px;margin-bottom: 12px;}
#index-mb2 .desc p{color: #FFF;font-size: 14px;}

#index-mb3 {background: url(../images/index/mb2.jpg) 50%; background-size: cover;}
#index-mb3 .themes{justify-content: center;}
#index-mb3 > div {max-width: 1800px;}
#index-mb3 .title-box {max-width: 600px; margin: 0 auto; padding: 2em 10% 0 0;}
#index-mb3 .txt {font-size: 24px; color: #000; text-align: center; max-width: 900px; line-height: 1.5em; margin: 0 auto;}
#index-mb3 .txt br {display: none;}
#index-mb3 .txt .flat-button, .pdf-btn {line-height: 1em; background-color: #5ba80e;}
#index-mb3 .txt .flat-button:hover, .pdf-btn:hover {background-color: #4b9500;}

#index-mb3 .article-box{
  position: relative; overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  justify-content:center;
}
#index-mb3 .article-box a{flex: 1}
#index-mb3 .themes {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}
#index-mb3 .themes .article {flex: 1; padding: 20px 15px}

#index-mb3 .article .sub-title{color: #000;font-size: 20px;font-weight: bold;padding: 12px 0 0;text-align: left;}
#index-mb3 .article .title {color: #376163;font-size: 29px;font-weight: bold;text-align: left; padding: 0;}
#index-mb3 .article p{margin-top: 5px;text-align: left; color: #476063; line-height: 1.5em;}
#index-mb3 .article .font-orange{color: #fc9528}

#index-mb3 .article.dive .promotion{color: #0e4986}
#index-mb3 .article.dive .flat-button{background-color: #0e4986;}
#index-mb3 .article.dive .flat-button:hover{background-color: #003976;}
#index-mb3 .article.car-drive1 .promotion{color: #9c0e14}
#index-mb3 .article.car-drive1 .flat-button{background-color: #9c0e14;}
#index-mb3 .article.car-drive1 .flat-button:hover{background-color: #8c0004;}
#index-mb3 .article.car-drive2 .promotion{color: #ffa200}
#index-mb3 .article.car-drive2 .flat-button{background-color: #ffa200;}
#index-mb3 .article.car-drive2 .flat-button:hover{background-color: #ef9200;}
#index-mb3 .article.sky .promotion{color: #fc9528}
#index-mb3 .article.sky .flat-button{background-color: #fc9528;}
#index-mb3 .article.sky .flat-button:hover{background-color: #ec8518;}
#index-mb3 .article.boat1 .promotion{color: #0084ff}
#index-mb3 .article.boat1 .flat-button{background-color: #0084ff;}
#index-mb3 .article.boat1 .flat-button:hover{background-color: #0074ef;}
#index-mb3 .article.boat2 .promotion{color: #276c05}
#index-mb3 .article.boat2 .flat-button{background-color: #276c05;}
#index-mb3 .article.boat2 .flat-button:hover{background-color: #175c00;}
#index-mb3 .article.wedding .promotion{color: #ff4cad}
#index-mb3 .article.wedding .flat-button{background-color: #ff4cad;}
#index-mb3 .article.wedding .flat-button:hover{background-color: #ef3c9d;}
#index-mb3 .article.camp .promotion{color: #9a462d}
#index-mb3 .article.camp .flat-button{background-color: #9a462d;}
#index-mb3 .article.camp .flat-button:hover{background-color: #8a361d;}
#index-mb3 .article.skydive .promotion{color: #099cd3}
#index-mb3 .article.skydive .flat-button{background-color: #099cd3;}
#index-mb3 .article.skydive .flat-button:hover{background-color: #008cc3;}

#index-mb3 .themes div {padding: 3em 15px; text-align: center;}
#index-mb3 .themes div p {}
#index-mb3 .themes div a img {opacity: .7;}
#index-mb3 .themes div a:hover img {opacity: 1;}
#index-mb3 .themes div .flat-button {padding: 3px 18px; font-size: 16px;}

#index-mb3 .category-list:before {display: block; content: ''; height: 18px; width: 100%;background: none;}
.category-list:before{height: 0;}

.index-ad img {width: 100%; max-width: 100%; display: block;}
.index-ad a {position: relative; display: block; border: 0; text-decoration: none;}
.index-ad a:before {position: absolute; right: 8px; top: 8px; display: block; content: "廣告"; white-space: nowrap; letter-spacing:8px; text-align: center; border-radius: 3px; z-index: 1; color: #fff; padding: 4px 0 4px 8px; background-color:#000;}

#index-mb4 {background: url(/images/index/mb4-bg.jpg) top center no-repeat;}
#index-mb4 .title {padding: 40px 8px;font-size: 42px;text-align: center; color: #000; font-weight: bold;}
#index-mb4 .title img{width: 100%;max-width: 610px;}
#index-mb4 .title span {color: #666;font-size: 28px; font-weight: normal;}
#index-mb4 .top10-title {display: inline-block;font-size: 18px;font-weight: bold;margin-bottom: 5px;}
#index-mb4 .top10-box {padding: 5px;}
#index-mb4 .top10-container {max-width: 1200px;padding-bottom: 72px}
#index-mb4 .top10-box,#index-mb4 .top10-box p{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
#index-mb4 .top10-box > div{position:relative;background-size:cover;padding-top:100%;}
#index-mb4 div.top10-long{padding-top:49.2%;
}

/* 內文 */
#index-mb4 .top10-box p,#index-mb4 .top10-box a{display: none;position:absolute;}
#index-mb4 .top10-box p,#index-mb4 .top10-box a,#index-mb4 .top10-box h4{color:#fff;}
#index-mb4 .top10-box p{background-color:rgba(0,0,0,.5);height:100%;line-height:1.5em;padding:1.5em;text-align:left;overflow:hidden;top:0;z-index:1;overflow: hidden;
text-overflow: ellipsis;width: 100%;}
#index-mb4 .top10-box p span{display:block;}
#index-mb4 .top10-box a{background-color:orange;padding:6px 8px;right:25px;bottom:18px;z-index:2;}

/* 標題文字 */
#index-mb4 .top10-box h4{display:block;position:absolute;bottom:0;left:0;right:0;background-image: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,.4) 60%, rgba(0,0,0,.4) 60%, rgba(0,0,0,0) 100%);padding: 40px 6px 12px;}

/* 設定hover效果 */
#index-mb4 .top10-box:hover h4{display:none;}
#index-mb4 .top10-box:hover p,#index-mb4 .top10-box > div:hover a{display: block;}



#index-mb5 {
  background: url(/images/index/about-us.jpg) center center no-repeat;
  background-size: cover;
  text-align: center;
  color: #fff;
  padding: 0 24px 70px;
}
#index-mb5 > div {max-width: 100000px;}
#index-mb5 .link {width: 100%;padding:72px 0;display: block;}
#index-mb5 img {margin-bottom: 60px;width: 100%;max-width: 600px;}
#index-mb5 .title {padding-top: 80px;}
#index-mb5 .sub-title {font-size: 30px; margin: 12px 0 20px;}
#index-mb5 p {font-size: 18px; line-height: 2em;}
#index-mb5 a {color: inherit;text-decoration: none;}
#index-mb5 .contact {color: #ffca2f;font-size: 26px; line-height: 1.5em;margin: 60px 0 18px;}
#index-mb5 .comment-box{
  position: relative; overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  justify-content:center;
}
#index-mb5 .comment-box a{flex: 1;}
#index-mb5 .comment-box img{border-radius: 50%;}
#index-mb5 .themes {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
}
#index-mb5 .themes .comment {flex: 5; padding: 0 15px 20px;}
#index-mb5 .comment p{font-size: 14px;margin-top: 5px;text-align: left; color: #eee; line-height: 2em;}
#index-mb5 .comment .author{font-size: 18px;}
#index-mb5 .comment .author .rating-s{font-size: 12px;background-color: #5c93fd;padding: 0 5px; border-radius: 5px;}
#index-mb5 .comment .font-orange{color: #fc9528}





#index-mb6 {padding: 14px 0 8px;}
#index-mb6 > div {max-width: 1600px;}
#index-mb6 .title {padding: 18px; margin: 0 auto;}
#index-mb6 .ad-box ul li {padding: 0 12px; line-height: 1.5em; font-size: 18px;}
#index-mb6 .ad-box ul li a {color: #000; text-decoration: none;}

.font-orange{color: #fc9528}
.m-show{display: none;}
.s-show{display: none;}
.category-list li a > div div{
  padding: 0 20px;
}
#search-btn-icon{display: none !important;}


@media screen and (max-width: 1024px) {
  #index-mb3 .txt {margin: 8px auto 0;}
  #index-mb4 .top10-box:nth-child(7) {width: 33.33%;}
  #index-mb4 .top10-box:nth-child(7) > div{padding-top: 100%;}

  .s-hide{display: none;}
}
@media screen and (max-width: 800px) {
  .fixed-header {top:0;}
  .site-notice .close-btn {top: 56px;}
  .site-notice {padding-top: 46px;}
}

@media screen and (max-width: 767px) {
  #index-mb5 .title { padding: 80px 0 12px 0; margin-bottom: 0;}
  #index-mb4 .top10-box:nth-child(7) {width: 50%;}
  #index-mb4 div.top10-long {padding-top:100%;}
  #index-mb3 .txt br {display: block;}
  #index-mb3 .txt span {display: none;}
  #index-mb1 .slogan {padding-bottom: 100px;}
  #index-mb1 .popup-youtube{margin-top: 100px;}

  .m-hidden{display:none;}
  .m-show{display:block;}
}

@media screen and (max-width: 568px) {
  .weather-forcast{padding:0 12px !important;top:60px;right:5px;height: 92px;width: 92px;box-sizing: border-box;}
  .weather-forcast .weather__icon{width:22px;}
  .weather-forcast .weather__temp{font-size:12px;}
  .weather-forcast .weather__forcast{font-size:10px;}
  #index-mb5 .btn-fb {margin-bottom: 15px;}
  #index-mb4 .top10-box br{display: none;}
  #index-mb4 .top10-box:nth-child(7) {width: 100%;}
  #index-mb3 .themes div {padding: 1em 8px;}
  #index-mb3 .article-box{flex-direction: column;}
  #index-mb1 .popup-youtube .main-title{width: 160px;}
  #index-mb1 .popup-youtube .main-title-desc{width: 85%;}

  .social-btn-box{margin-top: 10px;}
  .s-show{display: inline-block;}
  .s-hide{display: none;}

  .index-ad a:before{right: 4px; top: 4px; font-size: 12px; letter-spacing:6px; text-align: center; padding: 3px 0 3px 6px;}
}

/*  for iphone4, iphone5 */
@media screen and (max-width: 374px){
  #index-mb4 .top10-box a{padding:3px 4px;bottom: 10px;}
  #index-mb4 .top10-box p{padding: 1em;font-size: 15px;}
  #index-mb4 .top10-box p span{display:none;}
  #index-mb1 .popup-youtube img{margin: 0;}
}
@media screen and (max-width: 350px){
  .img-special{position: relative;right: 20px;}
}