@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,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td, figure, mark{
    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;}
img {max-width: 100%;image-rendering: -webkit-optimize-contrast;}
.clean { clear:both;}
a {}
a:hover {}
a:focus{ -moz-outline-style: none;}
.b-box{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	font-size:15px;
	background: url("../img/bg_01.jpg") top repeat;
}



/*wow*/
.wow:first-child {
visibility: hidden;
visibility:visible \9;
}


#web-outer{	
	clear: both;
	overflow: hidden;
	background: url("../img/big_bg.jpg") top center no-repeat;	
}


.header{ clear: both; overflow: hidden;}
.header-content{width: 100%;height: 100px;}


/*-------------------------------------選單---------------------------------------------*/
#main-nav {
    z-index: 990;
    overflow: hidden;
	clear: both;
	width: 100%;
 }
 
.block_menu {
     z-index: 990;
     width: 100%;
     text-align:center;
     font-family:"微軟正黑體","黑體", Arial, Helvetica, sans-serif;
     height: 100px;	
	 padding-top: 0;     
 }


.sticky {top: 40px;}
#nav{position: relative;z-index: 99;}
#nav ul{} 
#nav li { display:inline-block;margin-right: 10px;}
#nav li a { display: inline-block; }

.menu_box{}

.menu {}
.menu01{}
.menu01 a { width: 110px;height: 100px;text-indent:-5000px;background: url("../img/nav.png") 0 0 no-repeat;}
.menu01 a:hover, .menu01 a.active{ background: url("../img/nav.png") 0 -100px;z-index: 99;}
.menu02 a { width: 110px;height: 100px;text-indent:-5000px;background: url("../img/nav.png") -110px 0 no-repeat;}
.menu02 a:hover, .menu02 a.active{ background: url("../img/nav.png") -110px -100px;z-index: 99;}
.menu03 a { width: 110px;height: 100px;text-indent:-5000px;background: url("../img/nav.png") -220px 0 no-repeat;}
.menu03 a:hover, .menu03 a.active{ background: url("../img/nav.png") -220px -100px;z-index: 99;}
.menu04 a { width: 110px;height: 100px;text-indent:-5000px;background: url("../img/nav.png") -330px 0 no-repeat;}
.menu04 a:hover, .menu04 a.active{ background: url("../img/nav.png") -330px -100px;z-index: 99;}
.menu05 a { width: 110px;height: 100px;text-indent:-5000px;background: url("../img/nav.png") -440px 0 no-repeat;}
.menu05 a:hover, .menu05 a.active{ background: url("../img/nav.png") -440px -100px;z-index: 99;}
 .active {
     -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
     -o-transform: translate3d(0, 0, 0);
     -ms-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
 }

.menubg {display:none; width:100%; height:100px; background: url("../img/nav_bg.png") 0 0 repeat-x;;position:absolute; top:0px; text-indent:-9999px;}

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

.bg-02{background: url("../img/bg_02.png") top no-repeat;}
.bg-03{background: url("../img/bg_03.jpg") top repeat;}
.bg-04{background: url("../img/bg_04.png") bottom no-repeat;}
.bg-05{background: url("../img/bg_05.png") top 40px left 5% no-repeat;}
.bg-06{background: url("../img/bg_06.png") top 40px right 5% no-repeat;}

/*富國島*/
#phuquoc{}
.phuquoc-box{width: 100%; margin: 0 auto;background: url("../img/phuquoc_bg01.png") top 40px left 25% no-repeat;clear: both;overflow: hidden;}
.phuquoc-ph{width: 100%;max-width: 1300px;padding-bottom: 80px;}
.phuquoc-txt{position: absolute;top:20%;left: 8%; width: 40%; z-index: 50;}
.phuquoc-txt .title{}
.phuquoc-txt-box{display: block;max-width: 697px;aspect-ratio: 697 / 396;background: url("../img/phuquoc_title.png");background-size: cover;}
.phuquoc-txt-box2{display: none;max-width: 1300px;}
h1 {
  text-indent: 101%;
  overflow: hidden;
  white-space: nowrap;
}

.product-slide .slick-dots{bottom: 20px;}


.big-title{max-width: 500px;padding: 0 0 50px 0;margin: 0 auto;}

/*絕美島嶼*/
#island{}
.island-box{max-width: 1200px;margin: 0 auto;padding: 80px 0 80px 0;clear: both;overflow: hidden;}
/*影音*/
.video-box{width: 95%;border:10px #fff solid;margin: 0 auto;}
.video{width:100%;height:500px;margin-bottom: -2px;}

/*景點攻略*/
#spot{}
.map{max-width: 1078px;margin: 0 auto;}
.map-md{display: none;max-width: 1102px;margin: 0 auto;}
.spot-box{max-width: 1500px;margin: 0 auto;padding: 80px 0;clear: both;}
.spot-list{max-width: 1500px;margin: 0 auto;}
.slider{padding: 30px 0;}
.spot-bbox{width: 18%; border-radius: 10px; font-family:"微軟正黑體","黑體", Arial, Helvetica, sans-serif;margin-left: 10px;margin-top: 30px;}
.spot-bbox span{background-color: #1eaed6;color: #fff;font-size: 25px;line-height: 60px;font-weight: 600; text-align: center;display: block;height: 60px;border-radius: 10px 10px 0 0;position: relative;}
.spot-bbox span::before{position: absolute;content: ''; width: 20px;height: 20px;top: -10px; left: 50%;transform: translateX(-50%);background: url("../img/icon.png") top center repeat-x;z-index: 1;}
.spot-bbox .note{min-height: 150px;background-color: #fff; border-radius: 0 0 10px 10px;}
.spot-bbox p{color: #494949;padding: 10px;font-size: 15px;line-height: 2em;}

.event_bg01 {
	height: 250px;
    background: url("../img/event_bg_01.png") top center repeat-x;
    animation: photo 70s 0s linear infinite;
    background-position: 0 0;
	padding-bottom: 80px;
}

@-webkit-keyframes photo {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 1950px 0;
    }
}

/*必住飯店*/
#hotel{}
.hotel-box{max-width: 1800px;margin: 0 auto;padding: 80px 0;clear: both;}
.hotel-from {width: 100%; margin:0 auto; clear:both; overflow: hidden;text-align: center;display: flex;justify-content: center;align-items: stretch;gap:20px;flex-wrap: wrap;}
/*.ct30{width:31%;display: inline-block; vertical-align: top;position: relative;margin-top: 20px; margin-right: 15px;background-color: #fff;}*/
.ct30{width:31%;display: flex;flex-direction: column;background-color: #fff;padding-bottom: 20px;}
.ct30 a{text-decoration: none;}
.hotel-txt{width: 100%;  margin: 0 auto;font-family:"微軟正黑體","黑體", Arial, Helvetica, sans-serif;min-height: 200px;padding-bottom: 30px;}

.hotel-txt .title{display: block;min-height: 70px;background: url("../img/hotel_bg.jpg") top repeat;padding: 10px;position: relative;}
.hotel-txt .title span{display: block;font-size: 20px;font-weight: 600; color: #fff;line-height: 28px;position: absolute;
top: 50%;transform: translateY(-50%);width: 95%; text-align: center;}

.hotel-txt p{text-align: left; color: #494949;padding: 10px;font-size: 15px;line-height: 2em;min-height: 100px;}

.product-slide2 .slick-dots{bottom: 10px;}

.htl-botton{background: #5189DF; width: 120px;margin: 0 auto;text-align: center;line-height: 40px;font-size: 18px;color: #FFFFFF;margin-top: 15px;border-radius:5px;font-weight: bold;margin-top: auto;}

.htl-botton a{color: #FFFFFF;display: block;}

/*推薦行程*/
.tour_box{max-width: 1200px;margin: 0 auto;padding: 80px 0;}
.tour_from{max-width: 90%;margin: 0 auto;border-radius: 10px;background-color: #f7fbff;padding: 10px;}
.tour_list_box{
  width: 90%;	
  margin: 0 auto;
	padding: 10px;
}
.tour_list_box ul {
	margin: 0 auto;
	font-family:"微軟正黑體", Arial, Helvetica, sans-serif;
}
	
.tour_list_box li{
	font-size: 18px;	
	line-height: 1.5em;	
	border-bottom:1px dashed #dbdbdb;
	padding: 15px 0;
}
.tour_list_box p.txt{
	margin-top: 10px;	
	display: inline-block;
	font-size: 15px;
	color: #fff;
	background-color: #318ba1;
	border-radius: 10px;
	font-weight: bold;
	padding:8px 10px;
	
}

.tour_list_box li em  { color:#1eaed6; font-style:normal; padding-left:6px;font-size:15px;}
.tour_list_box .price{	
	font-size:15px;
	line-height:2em;
	color:#4a4a4a;		
	font-weight: bold;
	float: right;}

.tour_list_box .price strong{	
	font-size:25px;
	color:#e41d50;
}


.tour_list_box li a{	
	color:#4a4a4a;
	text-decoration:none;
	display:block;
	overflow:hidden;
	padding: 3px 5px;
	font-weight: bold;	
}
.tour_list_box li a:hover{}

.event_bg02 {
	height: 250px;
    background: url("../img/event_bg_02.png") top center repeat-x;
    animation: photo2 70s 0s linear infinite;
    background-position: 0 0;
	padding-top: 30px;	
}

@-webkit-keyframes photo2 {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -1950px 0;
    }
}

/*熱門文章*/
#popular{}
.popular-box{max-width: 1300px;margin: 0 auto;padding: 80px 0;clear: both;}
.popular-from {width: 100%; margin:0 auto; clear:both; overflow: hidden;text-align: center;padding: 30px 0 80px 0;}
.pop50 {width:48%;display: inline-block; vertical-align: top;position: relative; margin-top: 20px; margin-top: 50px; margin-right: 15px;}
.pop50 p{display: block;background-color: #1f1f1f; opacity: .9;color: #fff;text-align: center;font-size: 18px;line-height: 50px; font-weight: 600;height: 50px;margin-top: -50px;}
.pop50 a{text-decoration: none;}

.vediobox { 
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.vediobox iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*熱門票券*/
.ticket-box{max-width: 1300px;margin: 0 auto;padding: 80px 0;clear: both;}
.tkt{
  display: flex;
  justify-content: center;
  align-items: stretch; 
  gap: 20px;
  box-sizing: border-box;
}
.tkt-box{
  width: 24%;
  background: #FFFFFF;
  padding: 15px;
  display: flex;
  flex-direction: column; /* 直排 */
}
.tkt-box a{
  color: #000;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  flex: 1; /* 撐滿 tkt-box 高度 */
}
.tkt-name{font-size: 18px;font-weight: bold;text-align: center;line-height: 26px;margin: 5px 0;}
.tkt-info{margin: 5px 0;font-size: 15px;line-height: 24px;}
.tkt-botton{
  background: #FF6E00;
  width: 120px;
  margin: 15px auto 0;
  text-align: center;
  line-height: 40px;
  font-size: 18px;
  color: #FFFFFF;
  border-radius: 5px;
  font-weight: bold;
  margin-top: auto; 
}

.tkt-box img{
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
	
/*錨點*/
.block-first{overflow: hidden;padding-top: 80px;margin-top: -80px;}


@media screen and (max-width: 1800px){
.bg-05{background: url("../img/bg_05.png") top 40px left 1% no-repeat;}
.bg-06{background: url("../img/bg_06.png") top 40px right 1% no-repeat;}	
.phuquoc-box{background: url("../img/phuquoc_bg01.png") top 40px left 50px no-repeat;}	
.phuquoc-ph{width: 70%;max-width: inherit;padding-bottom: 30px;}
.phuquoc-txt{top:22%;left: 5%;}
.hotel-box{max-width: inherit;width: 90%;}
.hotel-icon01,.hotel-icon02,.hotel-icon03,.hotel-icon04,.hotel-icon05{background: inherit;}	
}

@media screen and (max-width: 1500px){
.bg-05{background: inherit;}
.bg-06{background: inherit;}		
.phuquoc-box{background: url("../img/phuquoc_bg02.jpg") top 40px left 0 no-repeat;}	
.phuquoc-txt{top:20%;left: 2%;}	
.spot-list{max-width: inherit;width: 90%;}	
	
}

@media screen and (max-width: 1300px){
#web-outer{		
	background: url("../img/big_bg02.jpg") top right no-repeat;	
}
.header{}
.header-content{}	
.phuquoc-box{background: inherit;}
.phuquoc-ph{width: 95%;padding-bottom:inherit;}	
.phuquoc-txt{padding: 30px 0; top: 25%;left: 0; }  
.phuquoc-txt-box{display: none;}
  
.phuquoc-txt-box2{display: block;background: url("../img/phuquoc_bg03.png");padding: 20px;box-sizing: border-box;}
.ct30 {width:47%;}

.pop50 {width:47%;}
.popular-box{max-width: inherit;width: 90%;}	
}

@media screen and (max-width: 956px){
	.left{float: inherit;}
	.right{}	
	.phuquoc-txt{}
	.tour_list_box .price{		
	display: block;
	float: inherit;
	text-align: center;
	}
	
}
@media screen and (max-width: 768px){
#web-outer{background: url("../img/big_bg02.jpg") top center no-repeat;	}	
.header{background: inherit;}
.header-content{height: inherit;}	
#main-nav {display: none;} 
.block_menu {display: none;}
.big-title{padding-bottom: 30px;}	
	
.phuquoc-ph{width: 100%; padding-top: inherit;}	
/*.phuquoc-txt{width: 100%;position: inherit; text-align: center;padding-top: 40px;background: url("../img/phuquoc_bg03.png") top 0 left 0 repeat;padding-bottom: 20px;}	*/
	
.ct30 {width:100%;}
.pop50 {width:100%;}		
/*錨點*/
.block-first{overflow: hidden;padding-top: 0;margin-top: 0;}	

.popular-box{padding: 30px 0;}	
.popular-from {padding: 0;}
.tkt{flex-wrap: wrap;}
.tkt-box{width: 85%;}	

}
@media (max-width: 480px) {
	.video{width:100%;height:400px;}
	.big-title{max-width: inherit;width: 90%;}
  .phuquoc-txt-box2{padding: 0;}		
.phuquoc-ph{width: 100%; padding-top: inherit;}	
.phuquoc-txt{width: 50%;top:10%;}
	.map{display: none;}
	.map-md{display: block;}
	
	.spot-box{padding: 50px 0 60px 0;}
	.hotel-box{padding: 80px 0 30px 0;}
	.hotel-from {padding: 0px 0 30px 0;}
    .tkt-box{width: 95%;}	
}
@media (max-width: 320px) {}