body {}
ul,li { text-decoration: none;list-style: none; }
a:hover { text-decoration: none; }

#mtkContainer { width: 100%; height: auto;max-width: 1920px;}
header.header h1 .headerPC{ padding: 0; margin: 0; width:100%;position: relative;}
header.header h1 .headerM { display: none;}
header.header .title {width: 42%;position: absolute;top:5%;right: 6%;}
header.header img {width: 100%;}

header.boatGo img {width: 100%}
.boatGo {position: absolute;top:32%;right:38%;width: 6%;animation:cycle 15s infinite linear;transform-origin: 50% 650%;}
.menuArea{display: none;}

@keyframes cycle{
	to{transform: rotate(1turn);}

}


.islandBtn:hover{cursor: pointer; filter: brightness(1.1);}
.island{width: 100%;}
.island div{position: absolute;}
.island div div {width: 100%;}
.island div img {width: 100%;}

.island .bali_all {width: 41%;top:18%;left:8%;max-width: 786px;z-index: 10;}
.island .lombok_all {width: 16%;top: 35%;right:33%;max-width: 309px;z-index: 10;}
.island .gili_all {width: 24.3%;top: 59%;right:30%;max-width: 468px;z-index: 10;}
.island .komodo_all {width:22.5%;top:40%;right:7%;max-width: 432px;z-index: 10;}

.island .bali_all .bali_title {z-index: 12;width: 34%;top:0px;left:40%;max-width: 262px; animation:island_1 1s ease 0.1s infinite alternate;}

@keyframes island_1 
{
  0%{top: 0px;}
  100%{top: 10px;}
}

@-moz-keyframes island_1
{
  0%{top: 0px;}
  100%{top: 10px;}
}

@-webkit-keyframes island_1
{
  0%{top: 0px;}
  100%{top: 10px;}
}

@-o-keyframes island_1
{
  0%{top: 0px;}
  100%{top: 10px;}
}
.island .lombok_all .lombok_title {z-index: 12;width: 48%;top:-15px;left:48%;max-width: 150px; animation:island_2 1s ease 0.2s infinite alternate;}
.island .gili_all .gili_title {z-index: 12;width: 39%;top:-15px;left:35%;max-width: 186px; animation:island_2 1s ease 0.2s infinite alternate;}

@keyframes island_2 {
  0%{top: -15px;}
  100%{top: -5px;}
}

@-moz-keyframes island_2
{
  0%{top: -15px;}
  100%{top: -5px;}
}

@-webkit-keyframes island_2
{
  0%{top: -15px;}
  100%{top: -5px;}
}

@-o-keyframes island_2
{
  0%{top: -15px;}
  100%{top: -5px;}
}

.island .komodo_all .komodo_title {z-index: 12;width: 57%;top:40px;left:50%;max-width: 248px; animation:island_3 1s ease 0.2s infinite alternate;}

@keyframes island_3 {
  0%{top: 40px;}
  100%{top: 50px;}
}

@-moz-keyframes island_3
{
  0%{top: 40px;}
  100%{top: 50px;}
}

@-webkit-keyframes island_3
{
  0%{top: 40px;}
  100%{top: 50px;}
}

@-o-keyframes island_3
{
  0%{top: 40px;}
  100%{top: 50px;}
}




.box{display: none;}
.mobileMenuBN{display: none;}

.island_content > div {width: 75%;background:rgba(0,0,0,0.8);margin: 10% 15%; z-index:20;position: absolute;top:0;border-radius: 30px;height: 50%;overflow-y: scroll;}
.island_content div div h2{font-size:40px;color:#FFF;text-align: center;margin: 2% auto 1% auto;}
.island_content div div h3{color:#FFF;margin: 1% auto 1% auto;}
.island_content .yellow {color:#ffea00;text-align: center;margin:0 1%;}
.island_content div div p{color:#FFF; font-size:16px;line-height:24px;margin: 2% auto;text-align:left;}
.island_content div div b{border:1px solid; color:#FFF; font-size: 24px;text-align:left;line-height: 30px;}
.island_content div .box0 {width: 100%; margin: 0 auto;}
.island_content div .box1 {width: 100%; margin:2% auto;}
.island_content div .box2 {width: 45%; display: inline-block;margin:1% 3% 1% 10%;} 
.island_content div .img_box{width:35%;margin:3.5% 0 0 0;padding: 0.5%;display: inline-block;}
.island_content div .img_box img{width: 100%;}





.island_content > div .close{ top:10px;right:1%;position: absolute; z-index:555;background: rgba(255,255,255,0.9);width: 36px; height: 36px; font-size: 30px; color: #000; text-align: center; text-decoration: none; border-radius: 50%; transition: .5s;}
.island_content > div .close:hover{background: rgba(255,255,255,1);}


.footerM {display: none;}



#c23FilterBase { display: none; position: fixed;top: 10%; left: 0;  width: 100%; text-align: center;  }
#c23FilterArea { margin: 0 auto; padding: 20px; width: 80%; background: rgba(0,0,0,0.7); }
#c23FilterBase  .c23FilterBaseAppendClose { letter-spacing: normal; }



/*C23 use*/
.intro-anchors {display: none;}
.carrier {   margin: 0 auto 0 auto ;width: 100%; max-width: 1300px; height: auto; text-align: center;  }
.carrier .box-head{ display:none; }
.carrier .box-head p { display:none; }
.carrier h4 {padding: 3px;margin: 20px auto 20px;line-height:auto;background: #f5560f;border-radius: 30px;position: relative; vertical-align: top; display: block;width: 15%; height:auto; letter-spacing: normal;  font: 28px/28px "微軟正黑體","arial"; color: #fFF;}
.carrier ul { display: block; padding: 20px 50px; width:100% ; }
.carrier ul li { position: relative; box-sizing: border-box; width: 100%; margin: 0 0 20px 0; padding: 0 0 25px 0; text-align: left;/* border-top:5px solid #f85523*/; box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
 background: #fff}
.carrier ul li a { display: block;padding: 0 0 10px 10px;  font:16px/20px "arial","微軟正黑體"; color: #0a72ff}
.carrier ul li a strong { margin: 0 0 10px -10px; padding: 10px; font: 20px/30px "arial","微軟正黑體"; display: block; text-align: left; color: #545454 ;}
.carrier ul li em { position: absolute;bottom: 10px; right: 20px;font:16px/16px "arial","微軟正黑體"; color:#f85523; }
.carrier ul li em span {font: 18px/18px "arial","微軟正黑體";}
.carrier ul li:hover { border:1px solid #f85523; }
.carrier ul li:hover a strong  { background: #eb1693 ; color: #fff }


/*C26*/


.group-type-ph { text-align: center;display: block; padding-top: 30px; width:68%; max-width: 1000px;margin:0 auto; padding-bottom: 20px; }
.group-type-ph .ph { background:#FFF;overflow:hidden;display: inline-block; position: relative; margin:10px; width:300px; text-align: left; vertical-align: top; box-shadow: 3px 3px 7px rgba(0,0,0,0.5)}
.group-type-ph .ph a { display: block; width:300px;  }
.group-type-ph .ph .ph-img,.group-type-ph .ph .ph-img img{display: block;width:300px ; height:200px;margin:0 auto;}
.group-type-ph .ph .ph-img { position: static; width: 300px; height: 200px; z-index: 1; }
.ph-title { position: static;bottom: 0; padding:2% 5%; width: 100% ; font: bold 16px/20px "arial","微軟正黑體"; text-align: center; color: #fff; background: #000; letter-spacing: 1px; z-index: 2}
.ph-detail { transition: .5s;margin: 0 auto; padding:5% 3% 1% 3%; width: 100% ; font: 14px/20px "arial","微軟正黑體"; letter-spacing: 1px; color: #000; overflow: hidden; background: #FFF;}
.ph img { width: 300px; height: 200px; }
.ph-feature { margin: 0 auto; padding: 0 3%; width:100%; text-align: left;font: bold 14px/20px "arial","微軟正黑體"; color: #fff;background: rgba(0,0,0,0.7);}
.ph em { transition: .5s;display: block;  width: 100%; font: bold 16px/30px "arial","微軟正黑體"; color: #ff0090; text-align: center; letter-spacing: -2px; background: #FFF;}
.ph em span{ margin: 0 0 0 -5px ; font: bold 30px/30px "arial","微軟正黑體"; color: #ff0090; }
.ph em i { margin: 0 0 0 -5px }
.ph a,
.ph a:link { color: #000 }


h4 { position: relative; vertical-align: top; display: block; margin:0 auto; padding: 10px 0 0 0; width: 100%; height:auto; letter-spacing: normal;
 font: 30px/30px "Noto Sans TC","arial"; color: #fff; text-align: center !important;  }

 .c26H4Base { padding: 0px 0; text-align: center !important; position: static; top: 0px; left: 0; width: 100%; background: rgba(0,0,0,0.8);
	overflow: hidden;overflow-y: hidden; overflow-x:auto;-webkit-overflow-scrolling: touch;overflow-scrolling: touch; }
.c26H4Base div {position:relative; width: 100%; z-index: 10; padding: 0 0px; text-align: center !important; white-space:nowrap; width:auto; border-radius: 0;}
.c26H4Base span { display: inline-block; margin: 0 0 0px 0; padding: 10px 15px; font:16px/16px "arial","Noto Sans TC"; text-align: center !important;color:#fff; 
cursor: pointer; }
.c26H4Base span:hover { color: #fff200 ;}



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

.group-type-ph {width:75%; }

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

.group-type-ph {width:78%; }
}

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

.group-type-ph {width:58%; }

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

.group-type-ph {width:63%; }

}

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

.group-type-ph {width:65%; }

}

@media only screen and (max-width: 1250px) {
.group-type-ph {width:70%; }
#mtkContainer { width: 100%; height: auto;}
.intro-anchors{display: none;}

.island .bali_all {top:18%;}
.island .lombok_all {top: 30%;}
.island .gili_all {top: 55%;}
.island .komodo_all {top:35%;}

}

@media only screen and (max-width: 1150px) {
  .group-type-ph {width:75%; }
.island .gili_all {top: 50%;}
}
@media only screen and (max-width: 1090px) {
  .group-type-ph {width:78%; }

}

@media only screen and (max-width: 1050px) {
.group-type-ph {width:78%; }

.island .bali_all {width: 38%;top:16%;}
.island .lombok_all {top: 28%;}
.island .gili_all {top: 48%;}
.island .komodo_all {top:30%;}
.island_content > div {margin: 7% 15%;}

.island_content div .box2 {width: 90%; display: block;margin:auto;padding-top:20px; } 
.island_content div .img_box{width:80%;margin:auto;padding: 0.5%;display: block;}
.island_content div div p{margin: 5% auto;}
}

@media only screen and (max-width: 999px) {
.group-type-ph {width:43%; }
}

@media only screen and (min-width: 861px) and (max-width: 930px) {
.group-type-ph {width:47%; }

.island .lombok_all {top: 24%;}
.island .gili_all {top: 42%;}
.island .komodo_all {top:28%;}

}

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


.island .lombok_all {top: 24%;}
.island .gili_all {top: 40%;}
.island .komodo_all {top:28%;}

}


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

.group-type-ph {width:90%; }


header.header { padding: 0; margin: 0; width: 100%; height: auto;}	
header.header h1 {margin: 0; padding: 0;}
header.header h1 .headerPC{display: none;}
header.header h1 .headerM{display: block;}
header.header h1 img { width: 100%;}
header.header .title {width: 95%;position: absolute;top:20%;right: 2%;}
header.header .title img {transform:rotate(-5deg);-ms-transform:rotate(-5deg);-moz-transform:rotate(-5deg);-webkit-transform:rotate(-5deg);-o-transform:rotate(-5deg);}
body {background: url(../images/bg_m.jpg) top center repeat-y;}


.island_content div .box0 {margin: 30px auto 0px auto; }
.boatGo {display: none;}
.island div {position: relative;margin: 0 auto; }
.island .bali_all {width: 90%;margin:5% 0 3% 0;top: 0;right:0;}
.island .lombok_all {width: 90%;margin:5% auto;top: 0;right:0;}
.island .gili_all {width: 90%;margin:4% auto 2% auto;top: 0;right:0;}
.island .komodo_all {width:80%;margin:-1% auto 1% auto;top: 0;right:0;}

.island .bali_all .bali_title {width: 30%;top:10px;left:35%;max-width: 262px; animation:island_1_m 1s ease 0.1s infinite alternate;position: absolute;}
@keyframes island_1_m {
  0%{top: 10px;}
  100%{top: 15px;}
}

@-moz-keyframes island_1_m
{
  0%{top: 10px;}
  100%{top: 15px;}
}

@-webkit-keyframes island_1_m
{
  0%{top: 10px;}
  100%{top: 15px;}
}

@-o-keyframes island_1_m
{
  0%{top: 10px;}
  100%{top: 15px;}
}
.island .lombok_all .lombok_title {width: 40%;top:-25px;left:45%;max-width: 150px; animation:island_2_m 1s ease 0.2s infinite alternate;position: absolute;}
.island .gili_all .gili_title {width: 39%;top:-25px;left:35%;max-width: 186px; animation:island_2_m 1s ease 0.2s infinite alternate;position: absolute;}

@keyframes island_2_m {
  0%{top: -25px;}
  100%{top: -20px;}
}

@-moz-keyframes island_2_m
{
  0%{top: -25px;}
  100%{top: -20px;}
}

@-webkit-keyframes island_2_m
{
  0%{top: -25px;}
  100%{top: -20px;}
}

@-o-keyframes island_2_m
{
  0%{top: -25px;}
  100%{top: -20px;}
}

.island .komodo_all .komodo_title {width: 57%;top:90px;left:50%;max-width: 248px; animation:island_3_m 1s ease 0.2s infinite alternate;position: absolute;}

@keyframes island_3_m {
  0%{top: 90px;}
  100%{top: 100px;}
}

@-moz-keyframes island_3_m
{
  0%{top: 90px;}
  100%{top: 100px;}
}


@-webkit-keyframes island_3_m
{
  0%{top: 90px;}
  100%{top: 100px;}
}


@-o-keyframes island_3_m
{
  0%{top: 90px;}
  100%{top: 100px;}
}



.island_content > div {width: 90%;margin:10% 6%; z-index: 20;position: fixed ;overflow-y: scroll;height: 80vh;}

.island_content > div .close{position:fixed;width: 30px; height: 30px; font-size: 28px; top:7vh;right: 4vh;}
.footerM {display: block;}
.footerM img {width: 100%;}




#c23FilterBase { display: block; top:-200vh;  }
#c23FilterArea { width: 100%; height: 100vh; padding: 5%; }

div.searchButton { display: none; }

.carrier h4 {margin:10px auto;padding:2px;font: 20px/20px "微軟正黑體","arial";  }
.itemBase .itemArea {padding-top:10%;}

/*C26*/

.group-type-ph .ph { background:#FFF;display: inline-block; position: relative; margin:10px; width:300px; text-align: left; vertical-align: top; overflow: hidden;}
.group-type-ph .ph a { display: block; width: 300px; height:auto; }
.group-type-ph .ph .ph-img,.ph-title { position: static;}
.ph-detail,.ph-feature,.ph em { opacity: 1 ; color: #000 ; background: none }
.ph em { display: block; padding-bottom:0; color:#ff0090 ; }
.ph em span { color:#ff0090; }

.itemBase section h2 {font-size: 30px;}

.mobileMenuBN { display: inline-block; position: fixed; bottom: 0; right:50%; padding: 5px; width:auto; height:auto; z-index: 999; background: rgba(0,0,0,0.5) }

.menuArea { display:block;width:100%;position:fixed;bottom:0; right: 0;margin-bottom:0;background: rgba(0,0,0,0.8); z-index: 555;}
.menuArea .menuList {padding: 15px 5px 15px 5px; margin: 0 auto;text-align: center;height: 45px;}
.menuArea .menuList a { margin: 0 0 0 0 ;display:inline-block;color:#FFF; cursor: pointer;font-size: 16px;width: 24%;}
.menuArea .menuList a:hover{color:#FFF;}
}








.informationShow,
.areaIntroduction ,
.mobileFilterButton{ display: none; }