/*純訂房*/
.kv h1{
    width: 76%;max-width:354px;
    height: auto;
    text-indent: 0;
    margin-top: 20px;
    margin-bottom: 70px;
}
h1 img{ width:100%}
/*
body.JP .kv h1{background-image:url(/Images/HTL/jp/h1.png);}
body.HK .kv h1{background-image:url(/Images/HTL/hk/h1.png);}
body.KR .kv h1{background-image:url(/Images/HTL/kr/h1.png);}
body.TH .kv h1{background-image:url(/Images/HTL/th/h1.png);}
*/





.kv h1 span:before{
	content:"";
	position:absolute; display:block; width:0; height:0; top:3px; left:185px;
	border-top:#fff 3px solid;border-right:#fff 3px solid; 
	animation:h1line1 .8s linear 2s;
	-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;
}
@keyframes h1line1{
	0%{ width:0; height:0; border-color:#E60000;}
	40%{ width:54px; height:0}
	100%{width:54px; height:102px;border-color:#E60000;}
}
.kv h1 span:after{
	content:"";
	position:absolute; display:block; width:0; height:0; top:106px; left:239px;
	border-bottom:#fff 3px solid; 
	animation:h1line2 .7s linear 2.8s;
	-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;
	}
@keyframes h1line2{
	0%{ width:0; border-color:#E60000;}
	100%{width:18px;border-color:#E60000;}
}








.s_box{
	position:relative; display:block; margin:0 auto;
}
ul.s_sort{
	position:relative; display:block; margin: 0 auto;
	list-style:none;
	text-align:center;
}
ul.s_sort li{
	position:relative; display:inline-block; margin:0 5px 2px; padding:8px 20px;
	border-radius:5px 5px 0 0; cursor:pointer; vertical-align:bottom;
	background-color:rgba(0,0,0,0.7); color:#fff;
    -webkit-transition: all .4s;transition: all .4s;
}
ul.s_sort li:not(.selected):hover{background-color:rgba(0,0,0,0.9);}
ul.s_sort li.selected{
	padding:10px 45px; margin-bottom:0;
    background: -webkit-linear-gradient(bottom, rgba(0,0,0,.75), rgba(0,0,0,.9), rgba(0,0,0,.7));
    background: -o-linear-gradient(bottom, rgba(0,0,0,.75), rgba(0,0,0,.9), rgba(0,0,0,.7));
    background: -moz-linear-gradient(bottom, rgba(0,0,0,.75), rgba(0,0,0,.9), rgba(0,0,0,.7));
    background: linear-gradient(to bottom, rgba(0,0,0,.75), rgba(0,0,0,.9), rgba(0,0,0,.7));
}
.s_box:hover ul.s_sort li.selected{background-color:rgba(0,0,0,0.9);}

ul.s_sort li>div{ font-size:15px; font-weight:300;}
ul.s_sort li.selected>div{ letter-spacing:.5em;}
ul.s_sort li>div:before{
	content:"";
	position:relative; display:inline-block; width:30px; height:20px;
	background-image:url(/Images/HTL/hotel.png);
}
ul.s_sort li.hotel>div:before{ background-position:-380px -250px}
ul.s_sort li.ticket>div:before{ background-position:-350px -250px}
ul.s_sort li.package>div:before{ background-position:-410px -250px; width:20px;}
ul.s_sort li.admission>div:before{ background-position:-380px -270px}
ul.s_sort li.selected>div:before{ display:block; margin:0 auto;margin-bottom:5px;}
ul.s_sort li:not(.selected)>div:before{ margin-right:5px;top: 2px;}






article{
	position:relative; display:block; width:96%; max-width:1305px; margin:15px auto 25px; left:.8%;
	overflow:hidden; animation:top-in 1s ease-in-out;
	}
@keyframes top-in{
	0%{ opacity:0;filter: alpha(opacity=0); top:-60px;}
	100%{ opacity:1;filter: alpha(opacity=100); top:0}
}

article h2{
	display:block; width:100%; margin-bottom:8px; cursor:default;
}
article h2 a{ display:inline-block; overflow:hidden;vertical-align: top;-webkit-transition:all .3s;transition:all .3s;}
body.ALL article h2 a{ display:none}

article h2, article h2 a{position:relative;font-size:26px; color:#000; font-weight:600;text-decoration:none;}
article h2 a:before{
	content:""; position:absolute; left:-100%; top:0; width:5px; height:100%;
	background-color:#39d0cb;
	-webkit-transition:all ease-out .2s;transition:all ease-out .2s;
	z-index:-1;
	}
article h2 a:hover:before{ width:70%;left:100%}
article h2 a:hover:after{
	content: "〉";position: relative;display:inline-block;margin:0 2px;
	animation:margin 1s ease-in-out infinite;
	}
@keyframes margin{
	0{margin-left:2px;}
	50%{ margin-left:10px;}
	100%{ margin-left:2px;}
}
article h2 a:hover{letter-spacing:4px; color:#39d0cb;}
.onearea{
	position:relative; display:block; width:23%; height:198px; margin:0 2% 20px 0; float:left;
	box-shadow:rgba(0,0,0,0.15) 1px 2px 3px; background-color:#fff;
	overflow:hidden;
	-webkit-transition:all .4s;transition:all .4s;
}
.onearea:last-child{margin-right:0;	}
.onearea:hover{ box-shadow:rgba(0,0,0,0.35) 1px 2px 3px;}
/*

.onearea:before{
	content:"";
	position:absolute; display:block; width:135px; height:40px; right:-22px; bottom:-35px;
	background-color:#dbdbdb;
	transform:rotate(-16deg);
}
.onearea:after{
	content:"more";
	position:absolute; display:inline-block; right:3px; bottom:1px;
	font-size:12px; color:#fff;
}
.onearea:hover:before{background-color:#39d0cb;}
*/
.onearea_link{
	position:absolute; display:block; width:100%; height:163px; left:0; top:0; z-index:5;
	}
.onearea figure{
	position:relative; display:block; width:100%; height:130px;
	overflow:hidden; background-position: center center; background-size: cover;
	}
.onearea figure:before{
	content:"";
	position:absolute; display:block; width:0; height:100%; left:0; top:0;
	background-color:rgba(0,0,0,.5);
	-webkit-transition:all .25s;transition:all .25s;
	}
.onearea figure:after{
	content:"more";
	position:absolute; display:block;left:-10%; top:50%; margin-top:-.5em; margin-left:-1em;
	font-size:15px; color:#fff;
	-webkit-transition:all .4s ease-out;transition:all .4s ease-out;
	}
.onearea_link:hover+figure:before{ width:100%;}
.onearea_link:hover+figure:after{ left:50%;}
.onearea_link:hover+figure+.area_sum_bar{ color:#39d0cb;}
.area_sum_bar,.index_ranking_bar{position:absolute; display:table; width:100%;padding:5px 10px;box-sizing: border-box;}
.area_sum_bar{ left:0; bottom:30px;}
h3{display:table-cell;font-size:15px; vertical-align:bottom;}

.index_ranking_bar{
	bottom:19px; left:0;
	font-size:13px; line-height:15px; color:#8c8c8c;text-decoration:none;
	-webkit-transform: translateY(50%);-ms-transform: translateY(50%);transform: translateY(50%);
	}
.index_ranking_bar:hover{ color:#39d0cb;}
.index_ranking_bar>div{display:table-cell; vertical-align:middle;}
.index_ranking_bar .t{white-space: normal;}
.index_ranking_bar .v{padding-left:1em;text-align:right; white-space: nowrap;}



@media screen and (min-width:921px) and (max-width:1024px){
.onearea{width: 24.5%; margin-right:.5%}

}
@media screen and (min-width:651px) and (max-width:920px){
.onearea{width: 32.3%; margin-right:1%}

}
@media screen and (min-width:320px) and (max-width:650px){
.onearea{width: 49%; margin-right:1%}

}



@media screen and (max-width:565px){
.order_require_form{ width:98% !important}

ul.s_sort li{ padding:8px 10px}
ul.s_sort li.selected{ padding:10px 20px}
ul.s_sort li>div:before{ display:none}
}


@media screen and (max-width: 495px){
.kv h1{ margin-bottom:40px;}
.kv h1 span{ display:none;}
.slogan2{
	position:relative; top:auto; right:auto; margin:0 auto; text-align:center;
}
ul.s_sort li{ margin:0 0 2px;}
ul.s_sort li+li{ margin-left:1%}

}