@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, video {
    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;}*/
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 {color: #333333; text-decoration: none; blr:expression(this.onFocus=this.blur()); outline: none; /* for Firefox */hlbr:expression(this.onFocus=this.blur());}
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;	
}

/*wow*/
.wow:first-child {
visibility: hidden;
visibility:visible \9;
}
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;
}

.clean { clear:both;}

img { max-width:100%;}

/************************************************************************************
STRUCTURE 主要區塊
*************************************************************************************/

#web-outer{	
	clear: both;
	overflow: hidden;	
}

header h1 {
    text-indent: 101%;
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
	width: 100%;
}


.header{clear:both;overflow: hidden;}
.container2 {width:100%;position:relative; margin-top:0px;}
.clearfix{margin-bottom: 20px;}
.logo {display: block; max-width: 411px; position: absolute;left:40%;right: 0;top:70px;z-index: 200;}
.logo02 {display: block; max-width: 124px; position: absolute;left:5%;right: 0;top:70px;z-index: 200;}
.slide{margin: 30px auto 0 auto;z-index: 50;}


/*header kv*/
.kv{
	position: relative;
	height: 690px;
	clear: both;
	overflow: hidden;
	margin-top: 40px;
}


/*大圖輪播*/
.main-slide{
	position: absolute;
	width: 100%;
	height: 690px;
    }

.main-title {max-width: 411px;padding-top: 50px;position:relative;/*left: 20%;right: 15%;top:150px;*/ margin: 0 auto;transition: 0.5s ease-in-out;z-index: 10;}
.main-logo{max-width: 124px;position: absolute;left: 30%;top: 40px;z-index: 10;}

/*-------------------------------------選單---------------------------------------------*/
#main-nav {
    z-index: 990;
    overflow: hidden;
 }
 
.block_menu {
     z-index: 990;
     width: 100%;
     text-align:center;
     font-family:"微軟正黑體","黑體", Arial, Helvetica, sans-serif;
     height: 124px;		 
     background: url("../img/nav_bg.png") top no-repeat;	
     z-index: 990;	
 }
 
.sticky { top: 40px; }
#nav ul{background-color: antiquewhite;} 
#nav li { display:inline-block;margin-left: 10px; }
#nav li a { display: inline-block;  }

.menu {}
.menu01 a { width: 200px;height: 124px;text-indent:-5000px;background: url("../img/nav.png") 0 0 no-repeat;}
.menu01 a:hover, .menu01 a.active{ background: url("../img/nav.png")0px -124px;}
.menu02 a { width: 200px;height: 124px;text-indent:-5000px;background: url("../img/nav.png") -200px 0 no-repeat;}
.menu02 a:hover, .menu02 a.active{ background: url("../img/nav.png") -200px -124px;}

 .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);
 }
/*錨點*/
.block-first{overflow: hidden;padding-top: 250px;margin-top: -250px;}
.block-first02{overflow: hidden;padding-top: 40px;margin-top: -40px;}


/*地圖*/
#playmap{}
.map-bg{background: url("../img/map-bg.jpg") top repeat;padding: 50px 0;}

.map-title{max-width: 295px; width: 100%;height: 77px; background: url("../img/map_title.png");margin: 0 auto 30px auto;text-indent: -5000px;}

.block-map {
	background: url("../img/map.png") top center no-repeat;
	max-width: 830px;	
	min-height: 900px;
	margin: 0 auto;	
	position: relative;
}

.map-float {
	position: absolute;
	width: 100%;
	max-width: 120px;
	text-align: center;
}

.map-float a {
	display: inline-block;
}

.map-link {	
	color:#fff;
	text-shadow: 0 0 0 #fff;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 5px 0 0 0;
    padding: 6px 10px;    
	display: inline-block;
	font-size: 15px;
	border-radius: 20px;
}

.map-pic1 {left: 320px;	top: 30px;}

.map-link1 {background-color: #44b5a6;	}

.map-pic2 {left: 140px;top: 130px;}

.map-link2 {background-color: #2d77d1;}

.map-pic3 {left: 100px;top: 435px;}

.map-link3 {background-color: #719f55;}

.map-pic4 {left: 5px;top: 630px;}

.map-link4 {background-color: #428cd9;}

.map-pic5 {left: 410px;top: 530px;}

.map-link5 {background-color: #e26969;}

.map-pic6 {left: 350px;top: 690px;}

.map-link6 {background-color: #9b6b5a;}

.map-pic-name {
	color:#ffffff;
	text-shadow: 0 0 0 #ffffff;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 5px 0 0 0;
    padding: 6px 12px;    
	display: inline-block;
	font-size: 20px;
}

.map-float a:hover .map-pic-name {
	background: #2d65cc;
}

.map-float a:hover {
    -webkit-transform: translateY(-3%);
    -moz-transform: translateY(-3%);
    -ms-transform: translateY(-3%);
    transform: translateY(-3%);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.map-area {
	position: absolute;
	display: inline-block;
}

.map-area a {
	display: inline-block;
}

.map-area a:hover .map-pic-name {
	-webkit-transform: translateY(-3%);
    -moz-transform: translateY(-3%);
    -ms-transform: translateY(-3%);
    transform: translateY(-3%);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.line-bg{height: 60px; background: url("../img/line.png") top no-repeat;}
.line-bg2{height: 60px; background: url("../img/line.png") top no-repeat;}

.main{max-width: 1200px;margin: 0 auto;} 


.okinawa-bg{background: url("../img/girl.jpg") bottom center no-repeat;padding-bottom: 450px;}

/*海洋博公園*/
.bg01{background: #f2fafb url("../img/bg01.png") top center repeat;padding: 40px 0;}
.area-frame01{max-width: 1350px;margin: 0 auto;font-family:"微軟正黑體","黑體", Arial, Helvetica, sans-serif;font-size: 15px;line-height: 2em;color: #373737; min-height: 750px;padding-bottom: 80px;clear: both;overflow: hidden;}
.area-box01{width: 100%;position: relative;margin: 80px 0 40px 0;}
.area-box01 .area-txt{width: 30%; position: absolute;top:100px;right: 10px;z-index: 90;}
.area-box01 .note{background:#fff url("../img/txt-bg01.png")top center repeat-x;padding: 30px 20px 20px 20px;}
.title01{max-width: 211px; width: 100%;height: 237px;background: url("../img/title_01.png") top center no-repeat;margin: 0 auto;text-indent: -5000px;}
.area-box01 .area-ph{width: 95%;max-width: 920px; position: absolute;padding: 15px;z-index: 50;}
.area-box01 .area-ph img{}
.area-bg01{max-width: 159px;position: absolute;bottom: -8px;left:-9px;}
.area-bg02{max-width: 159px;position: absolute;top: -8px;right: -9px;}

/*古宇利海洋塔*/
.bg02{background: #fff url("../img/bg02.png") top center repeat;padding: 40px 0;}
.area-frame02{max-width: 1265px;margin: 0 auto;font-family:"微軟正黑體","黑體", Arial, Helvetica, sans-serif;font-size: 15px;line-height: 2em;color: #373737; min-height: 780px;padding-bottom: 80px;clear: both;overflow: hidden;}
.area-box02{width: 100%;position: relative;margin: 80px 0 40px 0;}
.area-box02 .area-txt{width: 30%; position: absolute;top:80px;right: 10px;z-index: 90;}
.area-box02 .note{background:#ebfcfa url("../img/txt-bg02.png")top center repeat-x;padding: 30px 20px 20px 20px;}
.title02{max-width: 266px;width: 100%;height: 211px;background: url("../img/title_02.png") top center no-repeat;margin: 0 auto;text-indent: -5000px;}
.area-box02 .area-ph{width: 65%;max-width: 842px; position: absolute;padding: 15px;z-index: 50;}
.area-box02 .area-ph img{}
.area-bg03{max-width: 159px;position: absolute;top: -8px;left:-9px;}
.area-bg04{max-width: 159px;position: absolute;bottom: -8px;right: -9px;}


/*首里城*/
.bg03{background: #fcf4f4 url("../img/bg03.png") top center no-repeat;padding: 40px 0;}
.area-frame03{max-width: 1265px;margin: 0 auto;font-family:"微軟正黑體","黑體", Arial, Helvetica, sans-serif;font-size: 15px;line-height: 2em;color: #373737; min-height: 700px;padding-bottom: 80px;clear: both;overflow: hidden;}
.area-box03{width: 100%;position: relative;margin: 80px 0 40px 0;}
.area-box03 .area-txt{width: 30%; position: absolute;top:20px;right: 10px;z-index: 90;}
.area-box03 .note{background:#fff url("../img/txt-bg01.png")top center repeat-x;padding: 30px 20px 20px 20px;}
.title03{max-width: 211px;width: 100%;height: 230px;background: url("../img/title_03.png") top center no-repeat;margin: 0 auto;text-indent: -5000px;}
.area-box03 .area-ph{width: 65%;max-width: 828px; position: absolute;padding: 15px;z-index: 50;}
.area-box03 .area-ph img{}
.area-bg05{max-width: 159px;position: absolute;top: -8px;right:-9px;}
.area-bg06{max-width: 159px;position: absolute;bottom: -8px;left: -9px;}


/*瀨長島*/ 
.bg04{background: #fff url("../img/bg04.png") bottom center no-repeat;padding: 40px 0;}
.area-frame04{max-width: 1100px;margin: 0 auto;font-family:"微軟正黑體","黑體", Arial, Helvetica, sans-serif;font-size: 15px;line-height: 2em;color: #373737; min-height: 700px;padding-bottom: 80px;clear: both;overflow: hidden;}
.area-box04{width: 100%;position: relative;margin: 80px 0 40px 0;}
.area-box04 .area-txt{width: 35%; position: absolute;top:80px;right: 10px;z-index: 90;}
.area-box04 .note{background:#f2f8fe url("../img/txt-bg03.png")top center repeat-x;padding: 30px 20px 20px 20px;}
.title04{max-width: 211px;width: 100%;height: 225px;background: url("../img/title_04.png") top center no-repeat;margin: 0 auto;text-indent: -5000px;}
.area-box04 .area-ph{width: 65%;max-width: 655px; position: absolute;padding: 15px;z-index: 50;}
.area-box04 .area-ph img{}
.area-bg07{max-width: 159px;position: absolute;top: -8px;right:-9px;}
.area-bg08{max-width: 159px;position: absolute;bottom: -8px;left: -9px;}


/*美國城*/
.bg05{background: #f3f8f0 top center;padding: 40px 0;margin-top: 30px;}
.area-frame05{max-width: 1265px;margin: 0 auto;font-family:"微軟正黑體","黑體", Arial, Helvetica, sans-serif;font-size: 15px;line-height: 2em;color: #373737; min-height: 750px;padding-bottom: 80px;clear: both;overflow: hidden;}
.area-box05{width: 100%;position: relative;margin: 80px 0 40px 0;}
.area-box05 .area-txt{width: 30%; position: absolute;top:20px;right: 10px;z-index: 90;}
.area-box05 .note{background:#fff url("../img/txt-bg01.png")top center repeat-x;padding: 30px 20px 20px 20px;}
.title05{max-width: 211px;width: 100%;height: 231px;background: url("../img/title_05.png") top center no-repeat;margin: 0 auto;text-indent: -5000px;}
.area-box05 .area-ph{width: 65%;max-width: 813px; position: absolute;padding: 15px;z-index: 50;}
.area-box05 .area-ph img{}
.area-bg09{max-width: 159px;position: absolute;top: -8px;right:-9px;}
.area-bg10{max-width: 159px;position: absolute;bottom: -8px;left: -9px;}

/*玉泉洞/王國村*/
.bg06{background:url("../img/bg06.png") top center no-repeat;padding: 40px 0;}
.area-frame06{max-width: 1150px;margin: 0 auto;font-family:"微軟正黑體","黑體", Arial, Helvetica, sans-serif;font-size: 15px;line-height: 2em;color: #373737; min-height: 780px;padding-bottom: 80px;clear: both;overflow: hidden;}
.area-box06{width: 100%;position: relative;margin: 80px 0 40px 0;}
.area-box06 .area-txt{width: 30%; position: absolute;top:20px;right: 10px;z-index: 90;}
.area-box06 .note{background:#efe8e6 url("../img/txt-bg04.png")top center repeat-x;padding: 30px 20px 20px 20px;}
.title06{max-width: 211px;width: 100%;height: 271px;background: url("../img/title_06.png") top center no-repeat;margin: 0 auto;text-indent: -5000px;}
.area-box06 .area-ph{width: 65%;max-width: 752px; position: absolute;padding: 15px;z-index: 50;}
.area-box06 .area-ph img{}
.area-bg11{max-width: 159px;position: absolute;top: -8px;left:-9px;}
.area-bg12{max-width: 159px;position: absolute;bottom: -8px;right: -9px;}



/*推薦行程*/

.tour_list_box ul {
	width: 90%;	
	margin: 0 auto;
	padding: 10px;
	font-family:"微軟正黑體", Arial, Helvetica, sans-serif;
}

.tour-title{max-width: 360px;width: 100%; height: 155px; background: url("../img/tour_title.png") top center no-repeat;margin: 0 auto 30px auto;text-indent: -5000px;}
	
.tour_list_box li{
	font-size: 16px;	
	line-height: 2em;
	color:#fff;	
	border-bottom:1px dashed #35322d;
	padding: 10px 0;
}
.tour_list_box p.txt{	
	font-size: 18px;
	color: #fff;
	font-weight: bold;
	padding:10px 0;
	font-family:"微軟正黑體", Arial, Helvetica, sans-serif;
	border-radius: 25px;
	background-color: #3383b6;
	display: inline-block;
	width: 100px;
	text-align: center;
	margin: 20px 0 0 0;
}


.tour_list_box li em  { color:#db7295; font-style:normal; padding-left:6px;font-size:13px;}
.tour_list_box .price{	
	font-size:13px;
	line-height:2em;
	color:#d12c00;		
	font-weight: bold;
	float: right;
}
.tour_list_box  li strong{	
	font-size:25px;	
	font-weight: bold;
}

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


.tour-wrap{max-width: 1250px;width: 95%; margin:0 auto;}

/*綜合行程*/
.min-tour-title{min-width:100px;display: inline-block;text-align: center;font-size: 20px;color: #fff;border-radius: 25px;padding: 10px;background-color: #3383b6;font-family:"微軟正黑體", Arial, Helvetica, sans-serif;}
.tour-list {width: 100%;margin: 0 auto;padding: 10px 0 50px 0;}
.tour-list a {display:flex;padding: 10px;overflow: hidden;border-bottom: dashed 1px #b2b2b2;text-decoration: none;justify-content:space-between;align-items:center;}
.name-l{flex:0 0 85%;font-family:"微軟正黑體", Arial, Helvetica, sans-serif;font-size: 18px;color:#272727;line-height: 1.5em;}
.name-l em{font-style:normal;color: #db7295;font-size: 15px;padding: 3px;margin-right: 5px;}
.name-l strong{font-size: 15px;color: #045080;border-radius: 3px;border: 1px #045080 solid;background-color: #fff; margin-right: 5px;padding: 2px 3px 3px 3px;}
.price-r{flex:0 0 15%;font-family:"微軟正黑體", Arial, Helvetica, sans-serif;text-align:right;font-weight: 600; font-size: 15px;line-height: 1.2em;color: #272727;}
.price-r strong{font: 600 25px "Anton", sans-serif;margin: 0 2px;letter-spacing:1px;color: #d12c00;}
.price-r span{display: block;font-size: 15px;color: #d12c00;font-weight: 600; text-align: right;margin-bottom: 5px;}




@media screen and (max-width: 1700px) {
.main-logo{left: inherit;top:50px;right: 10px; }
}

@media screen and (min-width: 1300px) and (max-width: 2000px) {
.logo02 {left:30%;right: 0;top:50px;}
}
@media screen and (max-width: 1200px) {
.main-logo{top:inherit;bottom: 10px;}
}

@media screen and (max-width: 959px) {
.logo { max-width: inherit;width: 45%; left: 25%;}
	
.tour_list_box .price{		
	float: inherit;
	display: block;
	text-align: center;
	}	
	
.block-map {
		background: transparent;		
		min-height: inherit;
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
		align-items: center;
		justify-content: space-around;
	}
	
.map-float {margin: 0 0 40px 0;}
.map-float ,.map-area {	position: unset; display: inline-block;}
	
.bg01{padding: 10px 0;}
.area-frame01{min-height: inherit;}	
.area-box01{}
.area-box01 .area-txt{width: 80%; position: inherit;top:0;right: 0;margin: -80px auto 0 auto;}
.area-box01 .area-ph{width: 80%;max-width: inherit;position: inherit;margin: 0 auto;}	

.bg02{padding: 10px 0;}
.area-frame02{min-height: inherit;}	
.area-box02{}
.area-box02 .area-txt{width: 80%; position: inherit;top:0;right: 0;margin: -80px auto 0 auto;}
.area-box02 .area-ph{width: 80%;max-width: inherit;position: inherit;margin: 0 auto;}		

.bg03{padding: 10px 0;}
.area-frame03{min-height: inherit;}	
.area-box03{}
.area-box03 .area-txt{width: 80%; position: inherit;top:0;right: 0;margin: -80px auto 0 auto;}
.area-box03 .area-ph{width: 80%;max-width: inherit;position: inherit;margin: 0 auto;}
	
.bg04{padding: 10px 0;}
.area-frame04{min-height: inherit;}	
.area-box04{}
.area-box04 .area-txt{width: 80%; position: inherit;top:0;right: 0;margin: -80px auto 0 auto;}
.area-box04 .area-ph{width: 80%;max-width: inherit;position: inherit;margin: 0 auto;}	
	
.bg05{padding: 10px 0;}
.area-frame05{min-height: inherit;}	
.area-box05{}
.area-box05 .area-txt{width: 80%; position: inherit;top:0;right: 0;margin: -80px auto 0 auto;}
.area-box05 .area-ph{width: 80%;max-width: inherit;position: inherit;margin: 0 auto;}
	
.bg06{padding: 10px 0;}
.area-frame06{min-height: inherit;}	
.area-box06{}
.area-box06 .area-txt{width: 80%; position: inherit;top:0;right: 0;margin: -80px auto 0 auto;}
.area-box06 .area-ph{width: 80%;max-width: inherit;position: inherit;margin: 0 auto;}		
	
	
}
@media screen and (max-width: 850px) {
.name-l{flex:0 0 75%;}
.price-r{flex:0 0 25%;}	
}	

/*平版*/
@media screen and (max-width: 768px) {
.block_menu{display: none;}	
.kv{height: 550px;}
.main-slide{height: 550px;}		
	
.line-bg2{display: none;}	
.map-bg{display: none;}
.block-map{display: none;}	
	
/*錨點*/
.block-first{padding-top: 0;margin-top: 0;}
.block-first02{padding-top: 0;margin-top: 0;}
	
.okinawa-bg{background:inherit;padding-bottom: inherit;}	
.main{margin: 0 auto 20px auto;} 	
.tour-title{margin: 0 auto 20px auto;}
	
.title01,.title03,.title05,.title06{max-width: inherit;width: 100%;}
.title02{max-width: inherit;width: 100%;}
.title04{max-width: inherit;width: 100%;padding-left: 20px;}	
	
}
@media screen and (max-width: 600px) {
.kv{height: 450px;}
.main-slide{height: 450px;}	
.main-title {max-width: inherit;width: 50%; }
.tour-wrap a {width: 95%;}	
.tour-list a{display:inherit;}	
.name-l{flex:initial;width: 100%; display: block;}
.price-r{flex:initial;width: 100%;display: block;margin-top: 5px;}	
	
}	
@media screen and (min-width: 481px) and (max-width: 600px) {}

/*手機*/
@media screen and (max-width: 480px) {
.logo {width: 40%; left: 20%;top:40px;}	
.logo02 {left: inherit;right: 5%; top:20px;}		
}	

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