@charset "utf-8";
/* CSS Document */
*{box-sizing:border-box;}
html,body{
	font-family:Arial, Helvetica, "微軟正黑體",sans-serif;
	font-size:15px;
	color:#434343;}
a{text-decoration:none;
color:#FFF;}
.wraper{background: url('../images/bg.jpg');}
#gotop{
	display: none;
	width: 3rem;
    height: 3rem;
    border-radius: 2rem;
    background-color:#434343;
    text-align: center;
    line-height: 3rem;
    color: white;
    position: fixed;
    right: 1rem;
    bottom:6.333rem;
    z-index: 800;
    font-size:1.0666rem;
	cursor:pointer;}
#gotop:hover{
	opacity: 0.7;
}

/*大圖*/ 
h1{
	font-size: 3.5rem;
	font-weight: bold;
	margin: .5rem 0;
} 	
span.topic{
	font-size: 1.5rem;
}
.topwraper{
	position: relative;
	background-image: url('../images/poster01.jpg');
	background-position: center top;
	height: 614px;
}

.toptitle{
	padding-top: 200px;
 }

/*主選單*/
.navwraper{
	background: #393232;
	position: sticky;
	top: 0;
	z-index: 1000;
}
.nav{
	width: 1000px;
	margin: 0 auto;
}
ul.maintabs{
	width: 1000px;
	display: flex;
	flex-wrap: nowrap;
	margin-bottom: 0;}
ul.maintabs li {
	width:calc(100% / 3);
	text-align: center;
	border-left:1px solid #fff;
}
ul.maintabs li:last-child{
	border-right:1px solid #fff ;
}
a.tabs{
	display: block;
	line-height: 65px;
	font-size: 1.6rem;
	font-weight: 700;
}
ul.maintabs li:hover a{
	text-decoration:none;
	color: white;
	background: #494040;
}
ul.maintabs li.active a{
	background: #5a4d4d;
}
.container-fluid{
	
}
.contantwraper{
	width: 1000px;
	margin: 0 auto;
	padding: 2rem 0; 
	color: #434343;
}
.contant{padding:1rem;}	

.title-box{
	width: 350px;
 	border: 4px solid #857f7f;
 	padding: 3px;
 	margin: 3rem auto 4rem;
}
.title-box > h2{
	font-size: 1.8rem;
	display: block;
	padding: 1rem 0;
	border: 1px solid #857f7f;
	margin-bottom: 0;
	letter-spacing: 5px;
}
span.t-i{font-size: .8rem; display: block; margin-top:.3rem; letter-spacing: 0; }
/*訂房專線*/
.tel-box{
	width: 100%;
	background-color: #d82a43;
	text-align: center;
	position: fixed;
	bottom: 0;
	z-index: 700;
}
h3.tel-inner{
	display: inline-block;
    font-size: 1.2rem;
    line-height: 3rem;
    color: white;
    padding: 0.5rem 0 0.5rem;
    font-weight: 700;
    margin: 0 auto;
}
h3.tel-inner>a:hover{
	color: rgb(224, 219, 219);
}

/*商品*/
.good{
    background: white;
    transition: all 0.5s linear;
    margin-bottom: 1.2rem;
    position: relative;
    z-index: 3;
    padding: 0;
    width: 100%;
    height: 200px;
    display: flex;
}
.tours{
	width: 69%;
    padding: 1rem;}

.viewbox{
	width: 31%;
	height: 200px;
}	
.viewbox img{
	width: 100%;
	height: auto;
	transition: all 0.5s linear;
}	
.mainbtn{
	-webkit-appearance:none !important;
	width: 125px;
	line-height: 2rem;
 	background: #c1292e;
 	font-size: 18px;
 	font-weight: 700;
 	color: white;
 	transition: all 0.5s linear;
}
.btn-bl{
	background: #206baf;}
.mainbtn2{
	display: block;
	margin: 2rem auto;}
.mainbtn3{background: #eb6100;}
.mainbtn5{width:30%;}
.mainbtn6{background: #d82a43;}
.mainbtn:hover{
	color: white;
	opacity: 0.8;}
.btn-ps{
	position: absolute;
    right: 0;
    top: 20%;
    padding: 2rem;
}
.btn-ps > a{margin-bottom:1rem; }
span.location{
	position:absolute;
	display: inline-block;
	padding: .3rem;
	color:white;
	background-color:#d82a43;
	margin: .3rem;
}
.backtp{
	width: 45px;
	height: auto;
	position: fixed;
	top: 150px;
	right: 0;
	z-index: 100;
}
.tourname{
	display: block;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.2rem;
    margin: .75rem 0;
}
.datebox{margin-bottom: 1rem; margin-right: 0; margin-left: 0; }
.date{ 
	background: #f8b551;
    padding: 5px;
	margin-bottom: 0.5rem;}	
.date,.date-p{ display: inline-block; font-weight: 700;}
.date-p{width: 100%; word-wrap: break-word; }	
.pricebox{
	/*text-align: right;*/}
.pricewraper{
	clear: both;
	overflow: hidden;
}	
span.pricebold{
	font-size: 1.4rem;
    color: #c1292e;
    font-weight: 700;
    margin: 0 .3rem;} 	
span.pricebold2{font-size: 1.6rem;}
.card{display: block;}
.card-body{margin-bottom:1.2rem;}
span.info{
	    display: block;
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}
.it,.ip,.vpi,.vt{color: #313131;}
.it,.vt{font-weight: 700; font-size: 2rem;}


.fancybox-slide--iframe .fancybox-content {
    width  : 900px;
    height : 800px;
    max-width  : 90%;
    max-height : 90%;
    margin: 0;
}
.fancybox-slide{padding:2rem;}
.date2{background: #ec6941;}	
.date,.date-p{ display: inline-block; font-weight: 700;}
.date-p{width: 100%; word-wrap: break-word; }	
h6.vp{font-size: 1rem; font-weight: 700;}
.vwraper{background: white; }
.vi{color: #957878;}
h6.vpt{font-size: 1rem; font-weight: 700;}
.orderbox{color:#434343;}
.o-t{font-size: 2rem; font-weight: 700; text-align: center;}
.o-tt{font-size: 1.5rem;}
.o-p{margin-bottom: .5rem;}


@media screen and  (max-width:999px){
.topwraper{
	width: 100%;
	height: 0;
	padding-bottom:64.81481% ;
	background-image: url('../images/head_sp.jpg');
	background-size: 100%;
}	

.toptitle {
    padding-top: 20vw;}
a.menu{
	display: block;
    width: 45px;
    height: 45px;
    background: url(../images/button.png) no-repeat;
    position: fixed;
    z-index: 400;
    right: 1rem;
    top: 60px;
    cursor: pointer;
    background-color:#f8f9fac2;
    border-radius: 5px;
}
h1 {
    font-size: 5.2vw;
}
span.topic {
    font-size: 3vw;
}
.navwraper{
	display: none;
	width:100%;
	height: 100%;
	position: fixed;
	top:35px;
	z-index: 10001;
	margin: 0 auto;
}
.nav{
	width: 100%;
}
ul.maintabs{
	width: 100%;
	display: block;
	margin-bottom: 0;
	margin-top: 4rem;}
ul.maintabs li {
	width:100%;
	text-align: center;
	border-left:none;
}
ul.maintabs li:last-child{
	border-right:none ;
}
.contantwraper{
	width:100%;
	padding: 1rem; 
}

.good{
	width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}
.title-box {
    margin: 1rem auto 2rem;}
.tours{ padding: 1rem 1rem 1rem 0; }
.viewbox{
	padding: 1rem;
	width: 50%;
	height: auto;
	position: relative;}	
.tourname{
	
	margin: 0.5rem 0;
	line-height: initial;
}

span.pricebold {
    font-size: 1.5rem;}
.mainbtn{
    margin: 1rem auto;
    display: block;
}
.btn-ps{
   	position: static;
    padding: 0;
    overflow: hidden;
    clear: both;
    display: flex;
    justify-content: left
}
.btn-ps >a{
    font-size: 1rem;
    line-height: initial;
    margin: 0 .5rem;
    width: 100px;
}	

.mainbtn2{
	margin:2rem auto;
}
.maintab4{
	width: 45%;
	margin:2rem auto }
h3.tel-inner {
	font-size: 1rem;
	line-height: 2rem;
}	
}

@media screen and  (max-width:640px){
#gotop{display:none !important;}	
.contant{padding:0;}
h1 {
    font-size: 5.2vw;
}
span.topic {
    font-size: 3vw;
}
.good{
	width: 100%;flex-wrap: wrap;}
.btn-ps{
    justify-content: center;
}
.card > div{padding:0 !important;}
.title-box {
	 width: auto;
    margin: 2rem auto ;}	
.tours{width:100%; padding:1rem;}
.tourname {font-size: 1.2rem;}
.title-box > h2 {
	font-weight: 700;
    font-size: 1.2rem;
    padding: .5rem 0;
    margin-bottom: 0;
    letter-spacing: 5px;}
span.t-i {
    font-size: .5rem;
    margin-top: .3rem;}	
.viewbox{width: 100%; padding:0;}	
.it,.ip{text-align: center;}
.vt{font-size: 1.5rem;}
.okay{text-align: center;}
.okay >img{margin-bottom: 2rem;}
.pricewraper{margin: 1rem 0;}
.meal{display: block; width: 100%;}
span.pricebold {
    font-size: 1.3rem;}
}



@media screen and  (max-width:380px){
.pricebox{
	display:block;
}
span.dateinner {
    font-size: 0.9rem;
}
span.pricebold {
    font-size: 1.2rem; margin: 0;}
}