@charset "utf-8";
/* CSS Document */

body{
	overflow-x: hidden;
	background-color: #000;
}

#main{
	font-family: Arial, "微軟正黑體";
	max-width: 1920px;
	width: 100%;
	margin: auto;
	overflow:no;
}

#img_top{
	width:100%;
	max-width:1920px;
	/*height:calc(90vh - 50px);*/
	position:relative;
	vertical-align:top;
}

#img_top h1, #img_top h2, #img_top h3{
	text-indent:-99999px;
	height:0;
}

#img_top iframe {
	width:100%;
	max-width:1920px;
	height:calc(90vh - 50px);
}

 #img_top .logo{
	position:absolute;
	bottom:10vh;
	z-index:55;
	width:100%; 
	height:40vh;
	text-align: center;
	vertical-align: top;
	/*background:url(img_logo.png) no-repeat center center;*/
}

#img_top .logo img{
	width:30%
}

#img_top .logo .tag{
	opacity:0.8;
}

.tag:hover img {
	opacity:1;
 	-webkit-filter: contrast(180%); /* Safari */
    filter: contrast(180%);
}

#img_top .front{
	position:absolute;
	z-index:50;
	bottom:0;
	width:100%;
	height:calc(100vh - 50px);
	background:url(img_front.png) no-repeat center center, linear-gradient(transparent 80%, black 80%);
}

#bg_main{
	position: absolute;
	z-index: 58;
	width:100%;
	max-width: 1920px;
	padding-top:0px;
	/*margin:1000px auto 0 auto;*/
	background-color: #0B365F;
	background-position: center top;
	background-image: url(img_main_bg.png);
	background-image:url(img_main_bg.png),linear-gradient(to bottom,rgba(0,71,63,1.00), rgba(0,54,128,1.00));
	background-attachment: scroll,scroll;
	background-position: center top,center;
	background-repeat: no-repeat,no-repeat;
	background-size: 100% auto,auto;
	overflow-x: hidden;	
}

#end{
background:url(img_bot.jpg);
width: 100%;
max-width: 1920px;
padding-bottom: 15%;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
	margin: auto;
	border-radius: 0%;
	background-color: #000;	
}

.ball{
	cursor: pointer;
	width: 45px;
	padding-top: 280px;
	background-image: url(img_down.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
	position: fixed;
	z-index: 78;
	right: 30px;
	top:200px;
	cursor: pointer;
	animation: move .5s ease-in-out infinite alternate;
-webkit-writing-mode: vertical-lr;
writing-mode: vertical-lr ;
	text-align:justify-all;
 color:#fff;
	line-height:45px;
	
}

@-moz-keyframes move {
  0% { transform: translateY(-10px); }
  100% {  transform: translateY(5px);}
}
@-webkit-keyframes move {
  0% {   transform: translateY(-10px); }
  100% { transform: translateY(5px); }
}
@-o-keyframes move {
  0% {  transform: translateY(-10px);}
  100% { transform: translateY(5px);  }
}

@keyframes move {
  0% { transform: translateY(-10px);}
  100% { transform: translateY(5px);  }
}

.scroll span{
	font-size: 18px;
	text-shadow: 0px 0px 2px #C4F1FF;
	transition: 0.2s ease-in;
}

.scroll span:hover{
	font-size: 23px;
	text-shadow: 0px 0px 5px #fff;
}

.img_title img{
	display: block;
	margin: auto;
	width: 100%;
	max-width: 768px;
}

#menu{
	overflow: inherit;
	margin: 0px auto 0 auto;
	width: 100%;
	text-align: center;
}

.light_ico{	
	width: 130px;
	height: 200px;
	float: right;
	margin-top:-65px;
	background-size: 100% auto;
	position:absolute;
	z-index: 66;
	top:0;
	right:0;
}


.o_div {
	width:45%;
	max-width: 200px;
	height: 70px;
	display: inline-block;
	background-repeat: no-repeat;
	cursor: pointer;
	margin:0px;
	background-position: center center;
	background-size: contain;
	-o-transition: all .0s linear;
    -webkit-transition: all .0s linear;
    -moz-transition: all .0s linear;
    transition:  all .0s linear;
	transition: ease 0.5s;
	opacity: 0.8;
	vertical-align: top;
}

.o_div:hover {
	opacity: 1;
 	-webkit-filter: contrast(150%); /* Safari */
    filter: contrast(180%);
	padding-top: 20px;
	height: 120px;
}

#img_t0,#img_t1,#img_t2,#img_t3,#img_t4{
	width: 100%;
	max-width: 768px;	
}

.content {
	width: 100%;
	position: relative;
	z-index: 0;
}

.title_country{ 
	font-size: 40px;
	color: rgba(31,15,7,1.00);
	text-align: center;
	max-width: 1300px;
	width: 100%;
	margin: 0 auto;
	padding-top: 50px;
	animation: fade 2500ms infinite;
    -webkit-animation: fade 2500ms infinite;
}

@keyframes fade {
            from {  opacity: 0.6;}
             70% {  opacity: 1.0;}
            to {	opacity: 0.6; }
         }
         @-webkit-keyframes fade {
            from { opacity: 0.6;  }
            70% {  opacity: 1.0;  }
             to {  opacity: 0.6; }
         }

.title_country img{
	width: 100%;
	max-width: 800px;
}

.title_btn{
	background-color: rgba(30,12,4,1.00);
	width: 100%;
	margin: 60px auto 20px auto;
	max-width: 1300px;
	padding: 10px;
	text-align: center;
	background-image: url(pic_black-bg.jpg);	
}

#content2 .title_btn{
	margin: 0px auto 0px auto;
}

.title_btn span{
	font-size: 28px;
	display: inline-block;
	margin: auto;
	cursor: pointer;
	color: #FCD5A9;
	text-shadow: 6px 6px 3px #000;
	padding: 10px 20px;
}


.title_btn span:hover{	
	color:#FF8E69;  	
	text-shadow: 2px 2px 2px rgba(0,0,0,0.00); 
}

.content0{	
	width: 100%; 
	padding-bottom: 0px; 
	overflow: auto;
	text-align: center;
} 
#content1 {z-index: 50;}
#content2 {	display: none;z-index: 49;}
#content3 {	display: none;	z-index: 48;}
#content4 {	display: none;	z-index: 47;}

#contentA1 {z-index: 51;}
#contentA2 {display: none;	z-index: 52;}
#contentA3 {display: none;	z-index: 53;}
#contentA4 {display: none;	z-index: 54;}
#contentA5 {display: none;	z-index: 55;}
#contentA6 {display: none;	z-index: 55;}
#contentA7 {display: none;	z-index: 55;}

#contentB1 {z-index: 56;}
#contentB2 {display: none;	z-index: 57;}
#contentB3 {display: none;	z-index: 58;}
#contentB4 {display: none;	z-index: 58;}
#contentB_crab2{z-index: 60;}
#contentB_crab2{display: none;	z-index: 60;}
#contentC1 {z-index: 61;}
#contentC2 {display: none;	z-index: 61;}
.hideme{ opacity:1;}


.maple_pic_R,.maple_pic_L{
	width: 100%;
	max-width: 1920px;
	margin: 0px auto 40PX auto;
	letter-spacing: 2px;
	min-height: 450px;
	opacity:0.8;
	background-position: center center;
	border-bottom: 1px dashed #053841;
	transition: 1s ease;
	background-repeat: no-repeat;
}

.maple_pic_R{
	padding: 20px 20px 20px 40%;
	box-shadow: 8px -8px 8px rgba(88,204,185,0.00);
}
 .maple_pic_L{
	padding: 20px 40% 20px 20px ;
	box-shadow: -8px 8px 8px rgba(88,204,185,0.00);
}
.textR,.textL{
	color: #E5F9FF;
	font-size: 16px;
	text-align: left;
	padding: 25px;
	max-width: 350px;
	width:100%;
	margin: 0 auto;
	letter-spacing: 2px;
	min-height: 300px;
	transform: rotate(-1deg);
	box-shadow:0 0 15px rgba(255,255,255,0.6);
	/*box-shadow: 2px 2px 5px rgba(6,35,32,0.82);*/
}

.textR{
	background: rgba(8,68,90,0.60);}

.textL{	
	background: rgba(16,50,130,0.08);
}

.textL span,.textR span{
	color: #FFFFFF;
	line-height:2.5;	
    text-decoration:underline 1px rgba(116,222,255,0.51) dashed;
    text-underline-offset:60%;
    letter-spacing:2px;
	/*border-bottom: 1px dotted rgba(116,222,255,0.51);*/
}


.title_s{
	color: #525252;
	font-size: 20px;
	text-align: center;
	padding-bottom: 15px;
	margin: 0 auto;
	letter-spacing: 1px;
}
.text_title{
	font-size:27px;
	font-weight:600;
    text-underline-offset:40%;
}
.text_title span{
	display:block;
	font-size:1rem;
	font-weight:100;
	border-bottom:0;
	line-height:20px
}


.text_date{
	color: rgba(51,34,19,1.00);

}
.textR .text_date{
	background-color: rgba(231,230,90,0.0);
}

.textL .text_date{
	background-color: rgba(255,141,159,0.0);
}

**行程區塊{}

.list{
	max-width: 1920px;
	margin: auto;
	width: 100%;
	text-align: center;
	background-image: url(img_list_bg.jpg);
	background-position: center center;
	background-attachment: fixed;
	padding: 100px 0px;
	box-shadow: -3px -3px 10px rgba(198,247,237,0.60);
	border-top: 3px solid #C6F7ED;
}

.position{
	vertical-align: top;	
}

.list_block{
	cursor: pointer;
	width: 28%;
	max-width: 400px;
	display: inline-block;
	margin: 10px;
	padding:10px;
	opacity: 0.85;
	box-shadow: 5px 5px 5px rgba(0,58,138,0.68);
	background-image: url(img_list_bg_block.png);
	background-position: center bottom;
	border: 1px solid rgba(255,255,255,0.39);
	background-size: cover;
	/*min-height: 515px;*/
	overflow: hidden;
	border-radius: 10px;
}



.Xan_A{
	
	animation:ghostUpdownA 1s infinite alternate;
		-webkit-animation:ghostUpdownA 1s infinite alternate;
}
	@keyframes ghostUpdownA{
		from{margin-top:100px;}
		to{margin-top:60px;}
	}
	@-webkit-keyframes ghostUpdownA{
		from{margin-top:100px;}
		to{margin-top:60px;}
	}



.list_block:hover{
	opacity: 1;
	box-shadow: 0px 0px 10px rgba(97,253,251,0.57);
	text-shadow: 1px 1px 2px rgba(172,225,255,0.34);
}

.list_block .note{
	height: 50px;
	background-position: center center;
	text-align: center;
	color: #DFFFEF;
	padding-top:7px;
	letter-spacing: 5px;
	background-image: url(pic_L_title.png);
	background-size: 100% 100%;
	font-size: 18px;
	text-shadow: 1px 1px 1px rgba(151,255,243,0.77);
	margin-top: 10px;
}


.list_block:hover .note{
	-webkit-filter: brightness(110%); /* Safari */
    filter: brightness(110%);
}

.list_block .pic{
	width: 100%;
	height: 250px;
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	background-size: cover;	
	border: 1px solid rgba(255,255,255,0.36);
	border-radius: 8px;
}

.list_block:hover .pic{
	  background-size: 110% auto;
	    -webkit-filter: brightness(110%); /* Safari */
    filter: brightness(110%);
}

.list_block .pic .area{
	width: 50px;
	height: 50px;
	border: 0px solid #fff;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff3232+0,ef017c+100 */
	background: rgb(255,50,50); /* Old browsers */
	background: -moz-linear-gradient(-45deg, rgba(255,50,50,1) 0%, rgba(239,1,124,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, rgba(255,50,50,1) 0%,rgba(239,1,124,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, rgba(255,50,50,1) 0%,rgba(239,1,124,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232', endColorstr='#ef017c',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	color:#F3FF2D;
	border-radius: 50%;
	float: left;
	padding-top: 5%;
	margin-top: 3%;
	margin-left:3%;
	text-align: center;
	font-size: 15px;
	transform: rotateZ(-15deg);
}

.list_block .special{
	position: relative;
	width:180px;
	height: 53px;
	color:#253C7C;
	float: left;
	padding:9px 0px;
	margin-top: 0px;
	text-align: center;
	font-size: 14px;
	transform: rotate(-45deg);
	background-color: rgba(255,255,255,0.91);
	z-index: 77;
	left: -60px;
	box-shadow: 0px 2px 5px rgba(26,37,77,0.65); 
	line-height: 18px;
}

.list_block .special span{
	font-weight: 800;
	display: block;
	font-size: 13px;

}
.bot_title{
	min-width:100px;
	background-color: rgba(0,0,0,0.68);
	margin: auto;
	color: #fff;
	text-align: center;
}


.list_block .title{
	text-align: center;
	padding: 5px 15px ;
	color: #E9F7FF;
	margin-bottom: 0px;
	font-size: 16px;
	font-weight: 500;
	pointer-events: none;
	letter-spacing: 2px;
}

.list_block .title span{
	color:#FFFFFF;
	font-size: 25px;
	font-weight: 400;
	letter-spacing: 1px;
	display: block;
}

.list_block .bg_black{
	border:1px solid rgba(255,255,255, 0.7);
	background:rgba(0,0,0, 0.5);
	width:70%;
	line-height:2.5;
	border-radius:6px;
	margin:1% auto;
	font-size:1.2em;
	font-weight:600;
	color:yellow;
}
.list_block:hover  .bg_black{
	border:0;
	background:#fff;
	color:black;
}

.list_block .text{
	width: 94%;
	margin: 0px 3% 0px 3%;
	font-size: 11pt;
	line-height: 16pt;
	color: #1D1D1D;
}


.list_block .price_block{
font-family: 'Arapey', serif;
	text-align: center;

}


.list_block .price{
font-family: 'Arapey', serif;
	font-size: 30pt;
	color: #FFFDCF;
	margin: 0 auto;


}

.list_block .price:before{
font-family: 'Arapey', serif;
	content: "NT$";
	font-size: 11pt;
	color: #B6EEFF;
}


.list_block .price:after{
	content: "起";
	font-size: 11pt;
	color: #B6EEFF;
}

.preview {
	padding: 13px;
	text-align: center;	
}

.preview a{
	display: inline-block;
	margin: 1px 3px;
	color:#875626;
	font-size: 16px;
	padding: 3px 5px;
}

.active {	
	color:#fff;
	background-color: #FCF8ED;
	box-shadow: 1px 1px 5px rgba(107,83,60,0.78);
}

.v-t{
	position: absolute;
	z-index: 53;
	height: 100px;
	width: 200px;
	margin: auto;
	left: 0%;
	right: 0%;
	top: 0;
	font-size: 25px;
	text-align: center;
	background-position: center top;
}

*{list-style-type:none;}
		/* flexslider */

.htmleaf-container{
	width: 100%;

	margin: auto;
}
		

#晃動動畫{}
.view_3d{
	color:#000;
	display: inline-block;
	padding: 5px;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	
	
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fceabb+0,fccd4d+50,f8b500+51,fbdf93+100;Orange+3D+%235 */
background: rgb(252,234,187); /* Old browsers */
background: -moz-linear-gradient(45deg, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 50%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, rgba(252,234,187,1) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, rgba(252,234,187,1) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

.centered{
	text-align: center;
}
@keyframes setup{
  0% {
    opacity: 0;
  }
  75% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 1;
    transform: rotateZ(2deg);
  }
}
@keyframes dance{
  0% {
    transform: rotateZ(2deg);
  }
  50% {
    transform: rotateZ(-2deg);
  }
  100% {
    transform: rotateZ(2deg);
  }
}


@media screen and (max-width: 1920px) {
	#img_top .logo{bottom:15vh}	
	#img_top .logo img{width:25%}
}

@media screen and (max-width:1280px) {
	#img_top .logo{bottom:10vh}	
	#img_top .logo img{width:35%}
}

@media screen and (max-width: 1199px) {
.list_block .pic{
	height: 200px;
	background-position: center center;
}
.content .text span{border:0px;}	
}



@media screen and (max-width:1440px) {
	#img_top .logo{height:35vh;}
}

@media screen and (max-width:1080px) {
	#img_top .logo{height:20vh;}
	#img_top .logo img{width:50%}
}


@media screen and (max-width: 992px) {	
.ball{right:10px;	width:35px;line-height:35px;}
}
	
	
@media screen and (max-width: 768px) {
#goTop {right: 0px;}		
.list_block{
	width: 45%;
	margin: 1.3%;
}
.list_block .pic{
background-position: center bottom;
}	
.title_btn img{
	display: block;
	margin: auto;
}
}



@media (max-width:480px) {
.list_block{
	width: 80%;
	display: inline-block;
	margin: 15px;
	padding:15px;
}

.maple_pic_R,.maple_pic_L{
	width: 100%;
	max-width: 1300px;
	margin: 0px auto;
	letter-spacing: 2px;
	min-height: 350px;
	background-size: 200% auto;
	background-position: center top;
	padding: 20px;	
}
.textR,.textL{
	font-size: 15px;
	margin:200px auto 25px auto;
	max-width: 500px;
	width:100%;
	letter-spacing: 2px;
	min-height: 350px;
	transform: rotate(0deg);
	background-color: rgba(0,74,73,0.34);
}
	#img_top .logo{height:25vh;}
	#img_top .logo img{width:70%}
	#img_top iframe {height:calc(80vh - 50px);}
	#img_top .front{background:url(img_front.png) no-repeat 33% center, linear-gradient(transparent 80%, black 80%);}
}



@media (max-width: 460px) {
.hideme{ opacity:1;}

.textL span,.textR span{
	line-height: 30px;
	padding:3px;
}
}