@import url('reset.css');
@import url('common.css?20180319');

/*.location*/
.location{padding:15px 0; font-size:0.8em;}
.location a{color:#999;}
.location a:hover{color:#f5a623;}
.location i{padding:0 10px;}
.locattb{background:rgba(153,153,153,0.5); color:#fff;}
.locattb a{color:#eee;}

/*.subnav*/
.subnav{background:url(../images/bg-subnav.gif) repeat; text-align:right; margin-bottom:40px;}
.subnav a{font-size:1rem; color:#fff; padding:0 2vw; height:40px; line-height:40px; display:inline-block; border-left:#fff 1px dashed;}
.subnav a.active, .subnav a:hover{background:#f93;}

@media screen and (max-width:480px){
	.subnav{text-align: center; margin-bottom: 0;}
	.subnav .container{width: 100%;}
	.subnav a{padding:10px 0; height:auto; line-height:normal; display:block; border-left:none; border-bottom: #fff 1px solid;}

}

/*.page*/
.page{text-align:center; margin:20px 0 40px; color:#f93;}
.page a{cursor:pointer;}
.page a, .page span{padding:0 10px;}

/*bt*/
.bt{padding:20px 0; text-align:center;}
.bt a, .bt input{width:50%; max-width:300px; padding:10px 0; color:#fff; display:inline-block; border-radius:10px; border:none; cursor:pointer;}
.btSty{background:#4a90e2;}
.btSty:hover{background:#FC0;}
.btSty2{background:#FC0;}
.btSty2:hover{background:#4a90e2;}
.btSty3{background:#ccc; max-width:150px !important;}


/*.about*/
.about{margin-top:1.5rem;}
.about .img{width:40%; float:right; }
.about p{padding-bottom:30px; line-height:1.5rem;}

.rotb{display:table; width:100% !important; border-collapse:collapse;}
.rotb .th{background:#ff9933; color:#fff; border:#fff 1px solid; text-align:center; padding:20px 0;}
.rotb .td{border-bottom:#ccc 1px dashed; padding:20px 0; text-align:center;}
.rotb .td:nth-child(1){text-align:left;}

#routeList .boxtb{display:none;}
#routeList .active{display:block;}

.aglist li{width:calc(100% / 3 - 42px); margin:30px 10px 0; float:left; padding:10px; border:#ccc 1px solid; border-top:#58ded1 3px solid; min-height:350px;}
.aglist li h2{background:#ff9933; color:#fff; text-align:center; padding:12px 0; margin-bottom:8px;}
.aglist dl{padding-bottom:10px;}
.aglist dt{padding:8px; color:#666;}
.aglist dt i{color:#f8c065;}
.aglist .note{padding:8px; background:#f8c065; color:#fff; font-size:0.9em;}

@media screen and (max-width:640px){
	.aglist li{width:calc(100% / 2 - 42px); }
}

@media screen and (max-width:480px){
	.aglist li{width:calc(100% - 22px); float:none; margin:0; }
}



/*.news*/
.news li{float:left; width:calc(100% / 3 - 30px); margin:30px 0;}
.news li a{padding:10px; display:block;}
.news li a:hover{background:#eee; color:inherit; box-shadow:#f93 0 0 20px;}
.news li:nth-child(2), .news li:nth-child(5){margin:30px 45px;}
.news li img{width:100%; box-shadow:#999 0 0 20px; padding:1px;}
.news li .date{padding:10px 5px; color:#999;}
.news li h2{color:#f93; font-size:1.2em; padding:10px 0 15px;}
.news li p{line-height:24px;}
.news li span{color:#3cc; font-size:0.9em;}

.newscontent .date{padding:10px 5px 15px; color:#999;}
.newscontent p{padding-bottom:30px; line-height:1.8rem;}

/*service*/
.phone li:after{clear:both; display:block; visibility:hidden; height:0; content:"";}
.phone li{border-bottom:#ccc 1px dashed; text-align:right; padding:10px;}
.phone li  h2{float:left;}
.phone i{color:#33cccc; margin-right:5px;}

@media screen and (max-width:640px){
	.phone li{text-align: left;}
	.phone li h2{float: none;}
}

/*traffic*/
.traffic_banner:after{clear:both; display:block; visibility:hidden; height:0; content:"";}
.traffic_banner li{float:left; width:calc(100% / 4 - 15px);}
.traffic_banner li:nth-child(2),
.traffic_banner li:nth-child(3),
.traffic_banner li:nth-child(4){margin-left:20px;}
.traffic_banner li a{background:#33cccc; display:block; color:#fff; width:100%; display:table; border-spacing:10px;}
.traffic_banner li .img,
.traffic_banner li h2{display:table-cell; vertical-align:middle; font-size:120%;}
.traffic_banner li a:hover{background:#fc0;}

.traffic_list{margin-left:20px;}
.traffic_list li{padding:10px; width:calc(100% / 3 - 20px); float:left; list-style:square;color:#33cccc;}
.traffic_list h2{padding-bottom:5px; color:#000;}

@media screen and (max-width:960px){
	.traffic_list li{float:left; width:calc(50% - 20px); }
}

@media screen and (max-width:480px){
	.traffic_list li{float:none; width:calc(100% - 20px); }
}

/*boxtb*/
.boxtb{border:#eee 1px solid; padding:0 30px 30px; border-radius:10px; margin-top:15px;}
.boxtb h2.title{font-size:1.1em; background:#58ded1; color:#fff; padding:10px; text-align:center; margin-bottom:25px;}

/*member*/
.membertb{display:table; border-spacing:10px; width:100%;}
.membertb .th, .membertb .td{background:#f7f7f7; border-radius:10px; padding-bottom:25px; text-align:center; width:calc(100% / 3); position:relative; }
.membertb .th h2{background:#50e3c2; color:#fff; padding:10px; font-size:1.2em; margin-bottom:20px;}
.membertb .td h2{background:#f93; color:#fff; padding:10px; font-size:1.2em; margin-bottom:20px;}
.membertb .th h3{padding-bottom:10px;}
.membertb .th h3 strong{color:#f93;}
.membertb .td h3{padding:10px 0 20px;}
.membertb p{padding-bottom:15px; color:#666; font-size:0.9em;}
.membertb p strong{color:#999; font-weight:normal;}
.membertb .button{padding:10px;}
.membertb .button a{background:#ccc; font-size:0.9em; color:#fff; cursor:pointer; display:inline-block; padding:8px 0; text-align:center;}
.membertb .button a:hover{background:#f93; color:#fff;}
.membertb .button a:hover i{color:#fff;}
.membertb .button a i{color:#999; margin-right:3px;}
.membertb .th .button a{ width:45%; margin:0 0.5%;}
.membertb .td .button a{ width:50%; margin:0 auto;}
.membertb .date{padding-bottom:10px; color:#666; font-size:0.9em;}
.membertb .expired{position:absolute; background:rgba(0,0,0,0.8); width:100%; height:100%; display:table; z-index:2; display:block; top:0; left:0;}
.membertb .expired h4{display:table-cell; vertical-align:middle; text-align:center; top:45%; position:absolute; width:100%; color:#fff; font-size:1.4em;}

#btordermore{padding:20px 0 50px;}
#btordermore a{display:block; width:100%; max-width:300px; text-align:center; margin:0 auto; background:#4a90e2; padding:10px 0; color:#fff; border-radius:5px; cursor:pointer;}
#moremembertb{display:none;}


@media screen and (max-width:768px){
	.membertb .tr,
	.membertb .th,
	.membertb .td{width:100%; display:block; border-radius:0; margin:20px 0;}
	.membertb .button a{display:block; margin:5px 0 !important; width:100% !important;}
}


@media screen and (max-width:960px){
	h1.title{border-bottom:#ffcc99 4px solid; padding-bottom: 8px; margin-bottom: 15px;}
	h1.title strong{border-bottom:none;}
	/*#header*/
	#header{border-bottom: #f8c165 2px solid;}

	/*.news*/
	.news li{float:left; width:calc(100% / 2 - 30px); margin:30px 15px;}
	.news li:nth-child(2), .news li:nth-child(5){margin:30px 15px;}
	.news li:nth-child(odd):after{clear: both; display: block; visibility: hidden; height: 0; content: "";}
}

@media screen and (max-width:640px){
	.bt a, .bt input{width:90%; max-width:90%; display:block; margin: 5px auto; border-radius: 0;}
	.btSty3{max-width:90% !important;}

	.news li{float:none; width:95%; margin:30px auto;}



}

/*listtb*/
.listtb{display:table; border-collapse:collapse; width:100%;}
.listtb .th{padding-right:15px; width:30%;}
.listtb .td{vertical-align:top; padding-top:25px; border-bottom:#ccc 1px dashed;}
.listtb h3{font-size:0.8em; color:#fff; display:inline-block; padding:5px 15px;}
.listtb h3.view{background:#cccc33;}
.listtb h3.travel{background:#ff9933;}
.listtb h2{padding:20px 0; display:block; font-size:1.4em; color:#000; font-weight:bold; font-family:"新細明體";}
.listtb div.tourHight{color:#666; line-height:1.5em; padding-bottom:30px;}
.listtb .more a{color:#66cccc;}
.listtb .more a:hover{color:#f93;}

.sbar{text-align:center; padding:10px; color:#666; font-size:0.9em; margin-bottom:25px;}
.sbar span{color:#f93;}

@media screen and (max-width:1280px){
	.listtb .th{width:32%;}
	.listtb .td{padding-top:25px; padding-bottom:15px;}
}

@media screen and (max-width:1024px){
	.listtb{margin-bottom:20px;}
	.listtb .td{padding-top:5px;}
}

@media screen and (max-width:480px){
	.listtb .th,
	.listtb .td{width:100%; display:block;}
	.listtb .th{text-align:center; padding:0;}
	.listtb .th img{width:100%;}
}