.inlineBlockSpacing {
     letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
    *letter-spacing: normal; /* reset IE < 8 */
    *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */
    text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */
    
}

/*共用*/
body,html {width:100%;overflow-x: hidden;}
ul,li { text-decoration: none;list-style: none; }
a{text-decoration: none;}
a:hover { text-decoration: none; }
#mtkContainer { position: relative; width: 100%;}
#mtkContainer,
#mtkContainer * { vertical-align: top; box-sizing: border-box; }

.mobile{display: none;}


.mheader {display: none;}
.header {background: url(../images/header1.jpg) top center no-repeat;height: 810px;}
.header.island{background: url(../images/header2.jpg) top center no-repeat;}
.header.attraction{background: url(../images/header3.jpg) top center no-repeat;}


.pcheader {width: 60%;margin:0 auto;text-align: center;padding:5% 0 0 0;}
.pcheadertitle1{max-width: 760px; display: block; margin:auto;}
.pcheadertitle2{max-width: 379px;margin: 0 0 25px 0;}
.pcheader img{width: 100%;}

/*版頭三顆按鈕*/
.topMenu {width: 80%;margin: 2% auto 0 auto;text-align: center;z-index: 100;}
.topMenu .top {width: 16%;max-width: 160px;display: inline-block;margin: 1% 2%;position: relative; transition: .4s; }
.topMenu .top h3{color:#FFF;font:24px/1 "微軟正黑體";text-shadow: 1px 1px 5px #000,1px 1px 6px #000;text-align: center;margin:0 0 9px 0;}
.topMenu .top > img{width: 80%; border-radius: 99em; ;box-shadow: rgba(255,255,255,1) 3px 3px 0px, rgba(0,0,0,0.5) 9px 7px 13px; }
.topMenu .here{position: absolute;bottom: 8%;left:40%;}
.topMenu .here img{width: 90%;}
.topMenu .top:hover{transform: translateY(-10px)  scale(1.15);}


/*上方選單*/
.menu2{position: absolute;width: auto; top: 0;left:40%; background: rgba(0,0,0,0.8); border-radius: 0 0 30px 30px;text-align: center;margin: 0 auto;z-index: 100;padding:0 30px;}
.menu2 .fmenu {display: inline-block;padding: 5px 0 5px 0; z-index: 999;text-align: center;}
.menu2 .fmenu > a {color:#FFF;font:bold 18px/1.2 "微軟正黑體";}
.menu2 .fmenu > a::after{content: '｜';}
.menu2 .fmenu.lastfmenu > a::after{content: '';}
.menu2 .fmenu .secMenu{position: absolute;top:31px;background: #fff;padding: 5px 5px 5px 5px;z-index: 998; border-radius: 0 0 15px 15px;display: none;}
.menu2 .fmenu:nth-of-type(1) .secMenu {transform: translateX(-4px);}
.menu2 .fmenu:nth-of-type(2) .secMenu {transform: translateX(-4px);}
.menu2 .fmenu .secMenu > a {font:bold 18px/1.2 "微軟正黑體";padding: 2px 2px 2px 2px;color:#343434;display: block;}

/*右邊選單*/
.rightMenu{position: fixed;right: 5%;bottom:30%;background: #FFF;border: 1px solid #000;z-index: 9999; width: 150px;}
.rightMenu ul {padding:10px 5px;text-align: center;} 
.rightMenu ul::before{content: "";background: url(../images/menutitle2.png);width: 173px;height: 125px;position: absolute;top:-110px;left:-13px;}
.rightMenu li {font:bold 18px/1.8 "微軟正黑體";color:#383838;cursor: pointer;padding:0 5px;border-radius: 20px;}
.rightMenu .rightTop {font:bold 18px/1.8 "微軟正黑體";color:#383838;cursor: pointer;padding:0 10px;text-align: center; border-radius: 20px;}
.rightMenu li:hover{background:#383838;color:#FFF; }
.line{width: 80%;border-top:1px solid #383838;margin: 16px auto 8px auto ;}


 /*下方footer*/
.footerEvent {background: #222222;padding:1% 0;}
.footerEvent > div {width: 60%;margin: 0 auto;text-align: center;}
.footerEvent > div > a > div {display: inline-block;margin: 0 auto;text-align: center;margin: 1% 5%;}
.footerEvent > div > a > div img{max-width: 126px;width: 100%;display: block;margin: 0 auto; }
.footerEvent > div > a > div p {display: block;font:18px/1.4 "微軟正黑體"; color:#FFF; text-align: center;word-break:keep-all;}
.footerEvent > div > a > div:hover{transform: scale(0.96);transition: 0.3s;}
.footerEvent > p {display: block;font:18px/1.4 "微軟正黑體"; color:#FFF; text-align: center; }


/*共用元件*/
.boxBase{width: 70%;margin: 0 auto;max-width: 1400px;}
.box2 .boxBase {width: 80%;}
.box {text-align: center;padding: 3% 0 3% 0;}

h2.h2 {margin: 3% auto; text-align: center;font:bold 64px/1.4 "微軟正黑體"; border:#343434 1px solid;display: inline-block;padding:0 30px;position: relative;color:#343434;}
h2.h2::after{content: "";background: url(../images/h2.png);width: 134px;height: 54px;position: absolute;top:0px;right:-118px;}
.h2.white{ border:#FFF 1px solid;;color:#FFF;}
.h2.white::after{content: "";background: url(../images/h2-2.png);width: 134px;height: 54px;position: absolute;top:0px;right:-118px;}
.intro {width: 80%;color:#343434;font:bold 17px/1.8 "微軟正黑體";text-align: left;margin:0 auto;letter-spacing: 1px;position: relative;}

/*index*/

.box1{ background: url(../images/bg1.jpg) top center repeat-y;text-align: center;}

.map {width: 100%;position: relative;margin: 0% auto;padding: 3% 1% 3% 1%;}
.map .mapimg{max-width: 1238px;position: relative;width: 100%;}

.box1 h3{font:bold 40px/1.8 "微軟正黑體";color:#4e4e4e;text-shadow: #FFF 0px 0px 5px,#FFF 0px 0px 5px,#FFF 0px 0px 8px,#FFF 0px 0px 8px,#FFF 0px 0px 8px;text-align: center;}


.knowBaseBorder{border-radius: 30px;margin: 0 auto;padding: 1px;background: #FFF;border:#FFF solid 3px;position: relative;width: 72%;text-align: center;}
.knowBase{padding: 50px;border:#f0c63b solid 3px;border-radius: 28px;}
.know{width: 30%;display: inline-block;margin: 15px auto;}
.know.knowTwo{width: 40%;}
.knowIcon{display: inline-block;margin: 0 5px;}
.knowRight{display: inline-block;width: 56%;}
.knowTitle{font:bold 24px/1.4 "微軟正黑體";color:#FFF;padding: 0;width: 100%;margin: 0 auto;}
.knowTitle.blue{background: #67c2e3;}
.knowTitle.yellow{background: #f0c63b;}
.know .knowIcon svg{width: 80px;height: 80px;}
.knowText{font:18px/1.6 "微軟正黑體";text-align: left;width: 90%;}
.knowTwo .knowRight .knowText{width: 100%;}


.reason {background: url(../images/base.png) no-repeat;position: relative;margin: 180px auto 100px auto;width: 1064px;text-align: center;height: 483px; }
.reason::before{content: "";background: url(../images/01_20200609.png);width: 450px;height: 388px;position: absolute;right: -129px;top:-162px;}
.reason::after{content: "";background: url(../images/02.png);width: 353px;height: 289px;position: absolute;left: -200px;bottom:-102px;}
.reason ul {padding:0px 50px;text-align: left;width: 90%;margin: 0 auto;font:18px/1.8 "微軟正黑體";}
.reasonTitle{background: url(../images/reasontitle2.png) repeat-x ;display: inline;font:bold 40px/2 "微軟正黑體";padding: 3px 10px;margin: -80px auto;color:#FFF;position: relative;top:-25px;height: 58px;}
.reasonTitle::before{content: "";background: url(../images/reasontitle.png);width:28px;height: 58px;position: absolute;left:-28px;transform: rotate(-180deg);top:0px;}
.reasonTitle::after{content: "";background: url(../images/reasontitle.png);width:28px;height: 58px;position: absolute;right:-28px;top:0px;}


.sixisland {position: relative;width: 100%; margin: 0 auto;}
.sixisland img {max-width:1400px;width: 100%;transition: 2s;}

.sixisland:hover img{transform: scale(1.2,1.2);}



.textIsland {position: absolute;top:30%;left:20%;width: 30%;background: rgba(0,0,0,0.7);padding: 20px;text-align: left;}
.textIsland b {font:bold 24px/2 "微軟正黑體";color:#edc832;}
.textIsland p {font:18px/1.4 "微軟正黑體";color:#FFF;}



.box3{ background:#d6edff;text-align: center;}
.box3spot {margin: 20px 0; }
.baseSpot {position: relative;width: 30%;margin: 10px;display: inline-block;overflow: hidden;}

.baseSpot img{max-width: 800px; width: 100%;transition: 1s;}

.textSpot{position: absolute;bottom: 0;width: 100%;background: rgba(0,0,0,0.7);padding: 5px;overflow: hidden;}

.textSpot b {font:bold 22px/1.6 "微軟正黑體";padding: 5px;}
.textSpot b.blueSpotTitle {color:#5dbeeb;}
.textSpot b.yellowSpotTitle{color:#fee37c;}
.textSpot p {font:16px/1.4 "微軟正黑體";color:#FFF;text-align: left;padding: 5px;}



.baseSpot:hover img {transform: scale(1.2,1.2);}


/*island*/
.map .islandmapimg{max-width: 1399px;position: relative;width: 100%;}


.islandbox1{background:linear-gradient(to bottom, #eef7fe 1%,#cae6fd 100%);}
.islandbox2{ background: url(../images/bg2.jpg) top center repeat-y;text-align: center;padding: 60px 20px 50px 20px;}

.inlandBox {width: 90%;margin: 0 auto;text-align: center;position: relative;}
.islandbase.molokai .img{margin:13% auto 5% auto;}
.islandbase{margin: 50px 30px ;text-align: center;position: relative;}
.islandbase .img{width: 49%;display: inline-block;margin: 0 20px;}
.islandbase .img img{width:100%;}
.islandText {width: 46%;display: inline-block;margin: 10% auto 0 auto;text-align: left;}
.islandText.blue h3{background:#67c2e3;}
.islandText.yellow h3{background:#f0c63b;}
.islandText h3{font:24px/1.6 "微軟正黑體";color:#FFF;display: inline;padding: 1px 15px;}
.islandText p{font:18px/1.6 "微軟正黑體";color:#4e4e4e;margin: 5px 0px;text-align: left;}

.islandbase:nth-child(1)::after {content: "";background: url(../images/i07.png);width: 151px; height: 156px;position: absolute;right: -72px;bottom: -20px;background-size: cover;}
.islandbase:nth-child(2)::after {content: "";background: url(../images/i08.png);width: 125px; height: 160px;position: absolute;left: -102px;bottom: -20px;background-size: cover;}
.islandbase:nth-child(4)::after {content: "";background: url(../images/i09.png);width: 158px; height: 146px;position: absolute;right: -52px;bottom: -60px;background-size: cover;}
.islandbase:nth-child(5)::after {content: "";background: url(../images/i10.png);width: 135px; height: 96px;position: absolute;left: -155px;bottom: 12px;background-size: cover;}







/*attraction*/
.map .spotmapimg{max-width: 1440px;position: relative;width: 100%;}
.map .spotmapimg.mobile{max-width: 1199px;position: relative;width: 100%;}
.spotbox1{background:linear-gradient(to bottom, #eef7fe 1%,#cae6fd 100%);}
.spotbox2 {text-align: center;background: url(../images/bg3.jpg) repeat-y;padding: 60px 0 50px 0;}
.spotbox3{text-align: center;background: url(../images/bg4.jpg) repeat-y;padding: 60px 0 50px 0;}

.spotBase{position: relative;border-radius: 50em;width: 47%;display: inline-block;margin: 15px 7px;}
.spotBase .spotImg{width: 250px ;height:250px;display: inline-block;overflow: hidden;border-radius: 150px;border:#FFF solid 2px;position:relative; margin: 0 0 0 -40px;transition:all 0.8s ease-out;}
.spotBase:hover .spotImg img {transform: scale(1.2,1.2);}



.spotBase .spotText{width: 55%;display: inline-block;padding: 15px;text-align: left;}
.spotBase .spotText b {font:bold 24px/1.4 "微軟正黑體";}


.spotBase .spotText p {font:16px/1.4 "微軟正黑體";margin-top:10px;}
.spotBase .spotImg img{max-width: 800px;width: 100%;transition:all 0.8s ease-out;}
.spotBase .spotText span  {font:16px/1.4 "微軟正黑體";display: block;}

.spotBase.yellowBorder {background: #FFF;border: 2px solid #f0c63b;}
.spotBase.blueBorder {background: #FFF;border: 2px solid #5bbaee;}
.spotBase.yellowBorder .spotText b ,.spotBase.blueBorder .spotText b {color:#343434;}
.spotBase.yellowBorder .spotText p ,.spotBase.blueBorder .spotText p{color:#343434;}

.spotBase.yellowBg {background: #f0c63b;border: 2px solid #f0c63b;}
.spotBase.blueBg {background: #5bbaee;border: 2px solid #5bbaee;}
.spotBase.yellowBg .spotText b ,.spotBase.blueBg .spotText b{color:#343434;}
.spotBase.yellowBg .spotText p ,.spotBase.blueBg .spotText p{color:#FFF;}

.spotBase.yellowBorder:hover .spotImg,.spotBase.yellowBg:hover .spotImg  {border:#efc53a solid 2px;}
.spotBase.blueBorder:hover .spotImg,.spotBase.blueBg:hover .spotImg {border:#5bbaee solid 2px;}









/*c23*/

.box-head{display: none;}
.intro-anchors{font-size: 0px;}
.carrier{margin: 20px auto 20px auto;background: none;width: 100%;padding:10px; }

.carrier h4 {display: inline-block;position: relative; color:#343434; font:bold 36px/1.4 "微軟正黑體"; margin:0.5% auto;display: none;}
.carrier > ul { width: 100%;margin: 0 auto; padding:5px 20px;}
.carrier > ul > li{list-style: none; text-align: left; position: relative; border-bottom: 1px dashed #c0c0c0; margin:10px 10px 0 10px;padding-bottom: 44px;transition: 0.3s;}
.carrier > ul > li:hover{transform: scale(0.96);}
.carrier > ul > li > a{text-decoration: none; color:#3c87d4; font:16px/1.4 "微軟正黑體"; text-align: justify;}
.carrier > ul > li > a > strong{display: block; color:#343434; font:bold 20px/1.4 "微軟正黑體"; text-align: justify;}
.price{font:20px/1.6 "Century Gothic","微軟正黑體";display: block; color:#FFF; position: absolute; right: 0px; bottom: 5px;background: #d71f5c;border-radius: 30px;padding: 0 15px;}
.price > span{font: 20px/1.6 "Century Gothic","微軟正黑體";}

.more {background: #f0c73b; border-radius: 30px;padding: 5px 10px;font:bold 26px/1.4 "Century Gothic","微軟正黑體";color:#FFF;box-shadow: 1px 3px 0px #8e760a;width: 300px; margin: 10px auto;-webkit-animation: up 1.8s  infinite alternate; animation: up 1.8s  infinite alternate;position: relative;display: inline-block;}
.more:hover{-webkit-animation: none; animation:none;}
.more.greenmore{background: #1e8ca3;color:#FFF;box-shadow: 1px 3px 0px #0a5b67;}


.showLess.blueBG .carrier{ background: #def0fe;}
.showLess.whiteBG .carrier{ background: #FFF;}

.more.blue{background: #68c2e4;box-shadow: 1px 3px 0px #107da4;}






/*頁籤*/
.travel{width: 90%;margin: 70px auto;position: relative;}
.travelGoodBase{border-radius: 30px;box-shadow: 1px 1px 5px rgba(0,0,0,0.3);background: #ddf2fa;z-index: 5;position: relative;}

ul.travelMenu{position: absolute;top:-50px;left:10%;width: 80%;display: flex;}
ul.travelMenu li{display: inline-block;border-radius: 30px 30px 0 0;background: #80d9f7; /* Old browsers */
background: -moz-linear-gradient(top, #80d9f7 0%, #67c2e3 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #80d9f7 0%,#67c2e3 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #80d9f7 0%,#67c2e3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80d9f7', endColorstr='#67c2e3',GradientType=0 ); padding: 5px 10px;font:bold 22px/2 "arial","微軟正黑體";width: 20%;margin: 0 -2px;box-shadow: 1px 1px 2px rgba(0,0,0,0.3);z-index: 4;position: relative;color:#FFF;cursor: pointer;flex-grow:1;}

.areaTravel .travel ul.travelMenu li.on{background: #ddf2fa;box-shadow: none;z-index: 6;color:#000;}
.areaTravel .travel ul.travelMenu li.on::after{content: "";width:60%;height: 5px;background: #67c2e3;position: absolute;left:20%;bottom: 5px;}
.areaTravel .travel ul.travelMenu li:hover{filter: brightness(103%);}
.areaTravel .travel ul.travelMenu li.on:hover{filter: none;}

.travelGoodBase .travelGoods{display: none;}
.travelGoodBase .travelGoods.on{display: block;}
.travelGoods{width: 90%;margin: 0 auto;padding: 10px 0;}



.areaTravel.c23whiteBG .travel .travelGoodBase {background: #FFF;}
.areaTravel.c23whiteBG .travel ul.travelMenu li.on {background: #FFF;}
.areaTravel.c23whiteBG .travel ul.travelMenu li{
background: #f2da71; /* Old browsers */
background: -moz-linear-gradient(top, #f2da71 1%, #e8be3a 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #f2da71 1%,#e8be3a 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #f2da71 1%,#e8be3a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2da71', endColorstr='#e8be3a',GradientType=0 ); /* IE6-9 */}
.areaTravel.c23whiteBG .travel ul.travelMenu li.on::after{background: #f0c63b;}


/*island*/
.areaTravel.c23whiteBGBlue .travel .travelGoodBase {background: #FFF;}
.areaTravel.c23whiteBGBlue .travel ul.travelMenu li.on {background: #FFF;}
.areaTravel.c23whiteBGBlue .travel ul.travelMenu li{
background: #80d9f7; /* Old browsers */
background: -moz-linear-gradient(top, #80d9f7 0%, #67c2e3 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #80d9f7 0%,#67c2e3 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #80d9f7 0%,#67c2e3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80d9f7', endColorstr='#67c2e3',GradientType=0 );/* IE6-9 */}
.areaTravel.c23whiteBGBlue .travel ul.travelMenu li.on::after{background: #67c2e3;}

@keyframes up{

  0% {transform:  translate(0px,0px);}
  50% {transform:  translate(0px,7px);}
  100% {transform:  translate(0px,0px);}
}

@-moz-keyframes up{
  0% {-moz-transform:  translate(0px,0px);}
  50% {-moz-transform:  translate(0px,7px);}
  100% {-moz-transform:  translate(0px,0px);}
}

@-webkit-keyframes up {
  0% {-webkit-transform:  translate(0px,0px);}
  50% {-webkit-transform:  translate(0px,7px);}
  100% {-webkit-transform:  translate(0px,0px);}
}

@-o-keyframes up {
  0% {-o-transform:  translate(0px,0px);}
  50% {-o-transform:  translate(0px,7px);}
  100% {-o-transform:  translate(0px,0px);}
}

@-ms-keyframes up {
  0% {-ms-transform:  translate(0px,0px);}
  50% {-ms-transform:  translate(0px,7px);}
  100% {-ms-transform:  translate(0px,0px);}
}  



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

}


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



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


}

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

.boxBase{width: 80%;}







}



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


}


@media only screen and (max-width: 1452px) {
.knowBaseBorder{width: 90%;}



}


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

}

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

.pcheader{width: 80%;padding:10% 0 0 0;}
.inlandBox {width: 100%;}

}




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

.boxBase{width: 90%;}
}

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


}




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


}

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



}	

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

.topMenu .top {width: 20%;}
.carrier{width: 100%; }

.islandText {width: 46%;}
.islandbase .img{width: 46%;margin:0 10px;}
.islandText{margin:4% auto 0 auto;}
.islandbase {margin:  20px auto;}

.textIsland{top: 20%;width: 40%;}



.slick-prev:before, .slick-next:before {font-size: 50px;}

.spotBase{width:70%;margin: 15px auto;}
.spotBase .spotImg{margin:0 0 0 -75px;}

.spotBase.yellow:nth-child(odd) {background: #FFF;border: 2px solid #f0c63b;}
.spotBase.blue:nth-child(odd) {background: #FFF;border: 2px solid #5bbaee;}
.spotBase.yellow:nth-child(odd) .spotText b ,.spotBase.blue:nth-child(odd) .spotText b{color:#343434;}
.spotBase.yellow:nth-child(odd) .spotText p ,.spotBase.blue:nth-child(odd) .spotText p{color:#343434;}

.spotBase.yellow:nth-child(even) {background: #f0c63b;border: 2px solid #f0c63b;}
.spotBase.blue:nth-child(even) {background: #5bbaee;border: 2px solid #5bbaee;}
.spotBase.yellow:nth-child(even) .spotText b, .spotBase.blue:nth-child(even) .spotText b{color:#343434;}
.spotBase.yellow:nth-child(even) .spotText p ,.spotBase.blue:nth-child(even) .spotText p{color:#FFF;}


.spotBase:nth-child(odd) {right:7%;}
.spotBase:nth-child(even) {left:7%;}

}


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


}

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





}


@media only screen and (max-width: 1100px) {
.pc1100 {display: none;}
.mobile1100 {display: block;}
.hotSpotBox{width: 35%;}

.know{width: 26%;margin: 15px;}
.knowIcon{display: block;margin: 5px auto;}
.knowRight{width: 100%;}
.knowTitle{width: 100%;}



.reason ul{width: 100%;}
.reason{background:#fff3d5;width: 80%;height: auto;border: 10px solid #67c2e3;padding-bottom: 100px;}
.reason::before{content: none;}
.reason::after{content: "";background: url(../images/03_20200609.png);width:653px;height: 229px;position: absolute;left: 39px;bottom:-130px;background-size: cover;}
.reasonTitle {top: -44px;}


.islandbase:nth-child(1)::after {content: "";background: url(../images/i07.png) no-repeat;width: 151px; height: 156px;position: absolute;right: -92px;bottom: -50px;background-size:100px auto;}
.islandbase:nth-child(2)::after {content: "";background: url(../images/i08.png) no-repeat;width: 125px; height: 160px;position: absolute;left: -32px;bottom: -20px;background-size:100px auto;}
.islandbase:nth-child(4)::after {content: "";background: url(../images/i09.png) no-repeat;width: 158px; height: 146px;position: absolute;right: -52px;bottom: -120px;background-size:100px auto;}
.islandbase:nth-child(5)::after {content: "";background: url(../images/i10.png) no-repeat;width: 135px; height: 96px;position: absolute;left: -45px;bottom: -100px;background-size:100px auto;}


}

@media only screen and (max-width: 1010px) {
.boxCityBase{width: 100%;}
}


@media only screen and (max-width: 1000px) {
.footerEvent > div {width: 80%;}
h2.h2 {font:bold 40px/1.4 "微軟正黑體"; }
h2.h2::after{content: "";background: url(../images/h2.png);width: 88px;height: 35px;position: absolute;top:1px;right:-75px;background-size: cover;}
h2.h2.white::after{content: "";background: url(../images/h2-2.png);width: 88px;height: 35px;position: absolute;top:1px;right:-75px;background-size: cover;}
.map {padding:3% 1% 0% 1%;}
.map .mapimg{width: 90%;position: static;margin: 0 auto;}
.textIsland {width: 60%;padding: 10px;}
.baseSpot {width: 45%;}


.travel {width: 100%;}

}



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

.menu2{left:30%;}
.header{height: 768px;}
.topMenu {width: 100%;}





}

@media only screen and (max-width: 900px) {
.reason{width: 90%;margin: 120px auto 100px auto}
.reason ul{padding: 0 30px;}


.spotBase{width:82%;}
.spotBase .spotImg{margin:0 0 0 -40px;}





}


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

.reason::after { content: ""; background: url(../images/03_20200609.png); width: 580px;  height: 204px; position: absolute; left:0px; bottom: -105px; background-size: cover;}

}



@media only screen and (max-width: 768px) {
.mobile{display: block;}
.pc{display: none;}

.pcheader{display:none;}
.mheader{display: block;}
.mheader img {width: 100%;}
.header {background: none;height: auto;position: relative;}


.menu2{width: 100%;left:0;top:0;border-radius: 0;background: rgba(0,0,0,0.6 );}
.menu2 .fmenu .secMenu{border-radius: 0 0 0 0;}
.menu2 .fmenu > a {font:16px/1.2 "微軟正黑體";}
.menu2 .fmenu .secMenu > a {font:16px/1.2 "微軟正黑體";}
.menu2 .fmenu .secMenu{top:30px; }
.topMenu {display: none;}



.rightMenu{position: fixed;right: 0;bottom:0;background: rgba(255,255,255,1);border: 0px;z-index: 9999;width: 100%;display: none;}
.rightMenu li{display: inline-block;font:16px/1.2 "微軟正黑體";padding: 5px ;background: #383838;color:#FFF;}
.rightMenu .rightTop{display: inline-block;font:16px/1.2 "微軟正黑體";padding: 5px ;background: #383838;color:#FFF;}
.rightMenu ul::before{content: none;display: inline-block;}
.rightMenu ul {padding: 3px;overflow-y:hidden;overflow-x:auto;-webkit-overflow-scrolling:touch;overflow-scrolling:touch;white-space:nowrap;}
.rightMenu .line{display: none;}
.rightMenu li:hover{background:#383838;color:#FFF; }

/*.mobileTopRight {position: fixed;background: rgba(0,0,0,0.7);width: 33px;height: 45px;border-radius: 20px 0 0 20px;font:20px/1 "微軟正黑體";color:#FFF;text-align: center;right:0 ;bottom: 10%;z-index: 999;padding:3px 0 0 1px;cursor: pointer;display: none;}
.mobileTopRight p {font:14px/1.2 "微軟正黑體";}*/
.footerEvent > div {width: 100%;}
.footerEvent {padding: 30px 0;}

.intro{width: 90%;font:bold 15px/1.4 "微軟正黑體";margin: 20px auto;}

.textIsland{position: static;padding: 20px 20px 100px 20px;width: 100%;}
.slick-prev, .slick-next {top:28%;}


.baseSpot {width: 100%;margin:10px auto;}
.textIsland{text-align: center;}
.textIsland p {text-align: left;}

.sixisland:hover img{transform: none;}

.islandbase:nth-child(1)::after {content: "";background: url(../images/i07.png);width: 121px; height: 123px;position: absolute;right: -19px;bottom: 38px;background-size: cover;}
.islandbase:nth-child(2)::after {content: "";background: url(../images/i08.png);width: 95px; height: 123px;position: absolute;left: 18px;bottom: 268px;background-size: cover;}
.islandbase:nth-child(4)::after {content: "";background: url(../images/i09.png);width: 120px; height: 116px;position: absolute;right: -12px;bottom: 222px;background-size: cover;}
.islandbase:nth-child(5)::after {content: "";background: url(../images/i10.png);width: 104px; height: 74px;position: absolute;left: 37px;bottom: 64px;background-size: cover;}
.islandText {display: block;width: 100%;}
.islandbase .img {width: 100%;display: block;margin:30px auto;}
.islandbase {border-bottom: 2px dashed #a2a2a2;padding: 0 0 30px 0;}
.islandbox2 {background-size: 1000px auto;}

/*c23*/
.carrier > ul {width: 100%;}
.carrier {margin:0px auto 20px auto;}
.c23city .carrier {width: 100%;}
.c23park .carrier {width: 100%;}
.carrier h4 {font:bold 30px/1.4 "微軟正黑體";}


.know{width: 40%;}
.knowBase{padding: 30px;}
.mapimg.mobile{max-width: 1116px;}

.reasonTitle::before{content: "";background: url(../images/reasontitle.png);width:23px;height: 48px;position: absolute;left:-23px;transform: rotate(-180deg);top:0px;background-size: cover;}
.reasonTitle::after{content: "";background: url(../images/reasontitle.png);width:23px;height: 48px;position: absolute;right:-23px;top:0px;background-size: cover;}
.reasonTitle{font:bold 32px/2 "微軟正黑體";}

.reason {margin:80px auto 100px auto}



.spotbox2 ,.spotbox3{padding: 30px 0 30px 0;}

.spotBase:nth-child(odd) {position: static;}
.spotBase:nth-child(even) {position: static;}

}



@media only screen and (max-width: 700px) {
.reason::after { content: ""; background: url(../images/03_20200609.png); width: 580px;  height: 204px; position: absolute; left:-30px; bottom: -105px; background-size: cover;}


.spotBase{width:100%;}
.spotBase .spotImg{margin:0 0 0 -40px;}


}


@media only screen and (max-width: 650px) {
.reason::after {content: "";background: url(../images/04_20200609.png); width: 400px; height: 190px; position: absolute; left: 49px;  bottom: -105px; background-size: cover;}

}


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

.know,.know.knowTwo{width: 80%;}

.reason::after {content: "";background: url(../images/04_20200609.png); width: 400px; height: 190px; position: absolute; left: 0%;  bottom: -105px; background-size: cover;}

.islandbase:nth-child(1)::after {content:none;}
.islandbase:nth-child(2)::after {content:none;}
.islandbase:nth-child(4)::after {content:none;}
.islandbase:nth-child(5)::after {content:none;}
.slick-prev, .slick-next {top:23%;}
.slick-prev:before, .slick-next:before {font-size: 30px;}
.spotBase{width: 100%;border-radius: 30px;}
.spotBase .spotImg{margin:0;width: 100%;height:100%;border-radius:30px 30px 0 0;border:#FFF solid 2px;}
.spotBase .spotText{width: 100%;}




}

@media only screen and (max-width: 550px) {
  	
.carrier > ul > li > a > strong{font:bold 18px/1.4 "微軟正黑體";}
.reasonTitle{font:bold 24px/2 "微軟正黑體";top:-28px;}
.reason::after {content: ""; background: url(../images/04_20200609.png); width: 350px; height: 167px;  position: absolute;  left: 5%;  bottom: -83px; background-size: cover;}
.reasonTitle::before{content: "";background: url(../images/reasontitle.png);width:18px;height: 38px;position: absolute;left:-18px;transform: rotate(-180deg);top:0px;background-size: cover;}
.reasonTitle::after{content: "";background: url(../images/reasontitle.png);width:18px;height: 38px;position: absolute;right:-18px;top:0px;background-size: cover;}
.textSpot{position: static;}
.baseSpot {width: 100%;margin: 10px auto;}

.baseSpot:hover img {transform: none;}


}





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



.footerEvent > div > a > div {display: block;margin: 0% auto;width: 27%;padding:2% 0;}
.map .mapimg{width: 100%;}

.know,.know.knowTwo{width:100%;margin: 15px 0;}

.reason ul{font:16px/1.6 "微軟正黑體";}
.knowText{font:16px/1.6 "微軟正黑體";}
.knowTitle{font:bold 20px/1.4 "微軟正黑體";}
.box1 h3{font:bold 34px/1.8 "微軟正黑體";}

.islandText h3 {text-align: center;display: block;width: 100%;font:22px/1.6 "微軟正黑體";}





ul.travelMenu {top:-3px;}
ul.travelMenu li{font:bold 18px/2 "arial","微軟正黑體";top:-38px;}


}




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


h2.h2{font:bold 32px/1.4 "微軟正黑體";margin:5% auto;}


.menu2 .fmenu > a {font:14px/1.2 "微軟正黑體";}
.menu2 .fmenu .secMenu > a {font:14px/1.2 "微軟正黑體";}
.menu2 .fmenu .secMenu{top:27px;}
.rightMenu li,.rightMenu .rightTop {font:14px/1.4 "微軟正黑體";}
.hotSpotBox {border:1px solid #218491;width: 100%;}
.hotSpotBox img {max-width: none;}
.landTextBase p{font:16px/1.4 "微軟正黑體";}	
.box{padding:3% 0 50px 0;}

.reasonTitle{font:bold 20px/2 "微軟正黑體";}
.reasonTitle::before{content: "";background: url(../images/reasontitle.png);width:16px;height: 33px;position: absolute;left:-16px;transform: rotate(-180deg);top:0px;background-size: cover;}
.reasonTitle::after{content: "";background: url(../images/reasontitle.png);width:16px;height: 33px;position: absolute;right:-16px;top:0px;background-size: cover;}

.islandbase{border-bottom:1px dashed #a2a2a2;}

.textIsland p {font:16px/1.4 "微軟正黑體";}
.textIsland{padding: 20px 20px 50px 20px;}

}	


@media only screen and (max-width: 440px) {
.more {width: 260px;}
.reason::after { content: "";background: url(../images/04_20200609.png); width: 350px; height: 167px; position: absolute; left: -10%;bottom: -83px; background-size: cover;}

}

@media only screen and (max-width: 400px) {
.menu2 .fmenu .secMenu{top:26px; }
.menu2 .fmenu {padding: 5px 3px;}
.menu2 .fmenu > a {font:12px/1.2 "微軟正黑體";}
.menu2 .fmenu .secMenu > a {font:12px/1.2 "微軟正黑體";}
.menu2 .fmenu > a::after{content: '';}
.menu2 .fmenu:nth-of-type(1) .secMenu {transform: translateX(-10px);}
.menu2 .fmenu:nth-of-type(2) .secMenu {transform: translateX(-4px);}
.footerEvent > div > a > div {width: 39%;}

.slick-prev, .slick-next {top:16%;}


}	




@media only screen and (max-width: 340px) {
.havefunTitle{font:bold 20px/2.4 "微軟正黑體";}

}


.search , .mobileTopRight{display: block; position: fixed;  right: 5px; bottom: 20px; transition: 0.2s; z-index: 99; cursor: pointer;}
.search:hover , .mobileTopRight:hover{transform: translateY(3px);}
.search img , .mobileTopRight img{max-width: 25vw;}
.mobileTopRight{display: none;}

@media only screen and (max-width: 768px) {
.search{bottom: 1vw;}
.mobileTopRight{bottom: 19vw;}
}