.wow { animation-name:fadeInUp; animation-duration:2s; -moz-animation-name:fadeInUp; -ms-animation-name:fadeInUp; -o-animation-name:fadeInUp; -webkit-animation-name:fadeInUp; -moz-animation-duration:2s; -ms-animation-duration:2s; -o-animation-duration:2s; -webkit-animation-duration:2s; }

section.indexset { width:1612px; }

/* boxTitle  */
h2.boxTitle { position: relative; min-width: 250px; font-weight: normal; }
h2.boxTitle font {display: block;font-size: 51px;line-height: 100%;text-transform: uppercase;color: black;}
h2.boxTitle font:first-letter { margin-right: 5px; font-size: 95px; line-height: 100%; color: #b88f43; }
h2.boxTitle span {position: absolute;padding: 0 5px 3px;width: 100%;border-bottom: 1px #bf9a57 solid;font-weight: bold;font-size: 15px;color: #000000;top: 9px;left: 75px;}

.indexset-box {overflow:hidden;margin: 0;width: 1550px;}
.indexvisul{ position:relative; z-index: 1; }

/* news */
#news {/* background-image:url(/images/07/index-news-bg.png); */background-repeat:repeat-x;background-position: 0 -30px;padding: 65px 0 100px;position:relative;z-index:2;}
#news .newstitle {position: relative;float:right;color: black;}
#news .newsList {float:left;width: 65%;left: 13%;margin: 0;}
#news .newsList .newsbox ,
#news .newsList .newsbox .info h3 { overflow:hidden; }
#news .newsList .newsbox .time { float:left; width:67px; margin-top: 20px; }
#news .newsList .newsbox .time p {font-family: 'Titillium Web', sans-serif;color: #b78e42;font-size:25px;}
#news .newsList .newsbox .time p.Pubyear {color: #b78e42;font-size:14px;text-align: right;}
#news .newsList .newsbox .info {float:left;width: calc(85% - 100px);margin-left:20px;}
#news .newsList .newsbox .info h3 a { color:#3b3b3b; font-size:16px; }
#news .newsList .newsbox .info span { width:45px; height:1px; display:block; background:#c9b579; margin:10px 0; }
#news .newsList .newsbox .info article { color:#595757; font-size:12px; height: 46px; }

/* room */
#room { background:#f5f5f5; padding: 70px 0 50px; position:relative; z-index:2; }
#room .roomttile { overflow:hidden; margin-bottom: 50px; }
#room .roomttile h2 { float:left; }
#room .roomttile p { float: right; color: #595757; font-size: 14px; line-height: 160%; letter-spacing: 0.1em; margin-top: 20px; max-width: 30%; height: 46px; overflow: hidden; }
#room .roomList .roombox { background:#fff; padding:15px; margin:0 5px; box-shadow: 0 0 5px #e3e3e3; }
#room .roomList .roombox .photo { background-repeat:no-repeat; background-position:50% 50%; background-size:cover; position: relative; }
#room .roomList .roombox .photo a { display:block; width:100%; height:100%; background-image:url(/images/07/index-room-hover.png); background-repeat:no-repeat; background-position:50% 50%; background-size:66px; background-color:rgba(25,25,25,0.7); transition:all ease-in-out 0.3s; opacity:0; }
#room .roomList .roombox .photo:hover a { opacity:1; }
#room .roomList .roombox .photo a img { width:100%; }
#room .roomList .roombox .info { margin: -35px auto 20px; width: 80%; position: relative; }
#room .roomList .roombox .info p { background:#00ccdb; color:#fff; font-size:14px; text-align:center; position:relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding:20px 15px; letter-spacing:0.1em; transition:all ease-in-out 0.3s; }
#room .roomList .roombox .info:hover p { background:#0081db; }
#room .roomList .roombox .info p:after { content:''; width:calc(100% - 12px); height:calc(100% - 12px); border:1px solid #fff; position:absolute; top:0; left:0; margin:5px; }
#room .roomList .roombox .info h3 { text-align:center; margin: 20px 0 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#room .roomList .roombox .info h3 a { color:#595757; font-size:17px; }
#room .roomList .roombox .info span { display:block; text-align:center; width: 75%; margin: 0 auto 10px; position:relative; }
#room .roomList .roombox .info span img { display: inline-block; background: #fff; position: relative; z-index: 2; padding: 0 10px; }
#room .roomList .roombox .info span:after { position:absolute; top:58%; width:100%; height:1px; left:0; background:#c9b579; content:''; left: 0; transition:all ease-in-out 0.3s; }
#room .roomList .roombox .info:hover span:after { width: 50%; height: 1px; left: 25%; }
#room .roomList .roombox .info .price { height: 25px; text-align: center; }
#room .roomList .roombox .info .price font { display: inline-block; font-size: 16px; color: #777777; }
#room .roomList .roombox .info .price font b { font-size: 18px; color: #f00f0f; }
#room .roomList .roombox .info .price font.old { margin-right: 10px; text-decoration: line-through; color: #c4c1c1; }
#room .roomList .roombox .info article { color:#504a4a; font-size:12px; height:46px; overflow:hidden; }
#visulbar{ position: absolute; right: 8%; top: 0; width: 258px; height: 100%; z-index: 3; background:url(/images/07/index-side-img.jpg) #006b7f no-repeat 75% 0; background-size: cover; animation: sea 8s infinite alternate; -moz-animation: sea 8s infinite alternate; -ms-animation: sea 8s infinite alternate; -o-animation: sea 8s infinite alternate; -webkit-animation: sea 8s infinite alternate; opacity:1; }
@keyframes sea {
	0% { background-position: 20% 0%; opacity:0.5; }
	100% { background-position: 80% 0%; opacity:1; }
}
@-moz-keyframes sea {
	0% { background-position: 20% 0%; opacity:0.5; }
	100% { background-position: 80% 0%; opacity:1; }
}
@-ms-keyframes sea {
	0% { background-position: 20% 0%; opacity:0.5; }
	100% { background-position: 80% 0%; opacity:1; }
}
@-o-keyframes sea {
	0% { background-position: 20% 0%; opacity:0.5; }
	100% { background-position: 80% 0%; opacity:1; }
}
@-webkit-keyframes sea {
	0% { background-position: 20% 0%; opacity:0.5; }
	100% { background-position: 80% 0%; opacity:1; }
}

/* about */
.workframe {
    width: 1390px;
    margin: 0 auto;
}
#about { background-repeat: no-repeat; background-image: url(/images/06/about-bg.jpg); background-size: cover; padding: 140px 0; background-attachment: fixed; }
#about >div { overflow: hidden; position: relative; }
#about .abimg { float: left; margin-top: 40px; position: relative; z-index: 5; }
#about .abimg h2 { background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; }
#about .abtxt {background: linear-gradient(to right, #c3b095 50%, rgba(0, 0, 0, 0.1) 100%);position: absolute;top: 0;z-index: 1;color: #fff;width: 80%;right: 0;text-align: right;}
#about .abtxt .abtxt-inside { display: inline-block; width: 55%; padding: 45px; }
#about .abtxt .abtxt-inside h2 ,
#about .abtxt .abtxt-inside p ,
#about .abtxt .abtxt-inside article {line-height: 185%;font-size: 26px;font-weight: normal;color: white;}
#about .abtxt .abtxt-inside p.stxt {font-size: 20px;margin-top: 5px;}
#about .abtxt .abtxt-inside article {margin-top: 25px;font-size: 16px;color: white;}
#about .abtxt .abtxt-inside span {display: block;width: 37px;height: 4px;background: #fff;margin: 50px 0 0;}
#about .abtxt .abtxt-inside p.more {margin-top: 25px;font-family: 微軟正黑體;}
#about .abtxt .abtxt-inside p.more a {color: #fff;font-size: 19px;}
#about .abtxt .abtxt-inside p.more a b { margin-left: 20px; }

/* indexBook */
#indexBook { padding: 50px 0; }
#indexBook h2.boxTitle {float: left;width: 480px;}
#indexBook .bookList { margin-top: 55px; }
#indexBook .bookList .bookshow > div { overflow: hidden; position: relative; margin-right: 2px; display: block; background-position: 50%; background-repeat: no-repeat; background-size: auto 100%; }
#indexBook .bookList .bookshow > div a { position: absolute; padding: 320px 30px 30px; width: calc(100% - 60px); height: 100%; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 63%, rgba(0,0,0,0.65) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 63%,rgba(0,0,0,0.65) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 63%,rgba(0,0,0,0.65) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); top: 31%; transition:all ease-in-out 0.3s; }
#indexBook .bookList .bookshow:hover > div a {padding-top: 280px;top: 0;background: rgba(176, 135, 60, 0.33);}
#indexBook .bookList .bookshow > div a p { text-align: center; font-size: 18px; color: #fff; }
#indexBook .bookList .bookshow > div a p:after { margin: 15px auto; width: 1px; height: 60px; background: #fff; display: block; content: ""; transition:all ease-in-out 0.3s; }
#indexBook .bookList .bookshow:hover > div a p:after { width: 0; height: 0; }
#indexBook .bookList .bookshow > div a article {color: #ffffff;font-size: 12pt;text-shadow: 2px 0 #000;}

/* indexbottom */
#indexbottom {/* padding: 80px 0 0; */overflow: hidden;}
#indexbottom .welcome { float:right; width:50%; }
#indexbottom .gocontact {float:left;width: 100%;text-align: right;/* margin-top: 100px; */}
#indexbottom .bottomwatch {height: 380px;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;background-attachment:fixed;}
#indexbottom .bottomwatch iframe ,
#indexbottom .welcome .bottomwatch a#playYoutu { width:100%; height:100%; display: block; }
#indexbottom .welcome .bottomwatch { height: 350px; }
#indexbottom .welcome .bottomwatch a#playYoutu { padding-top: 15%; text-align: center; }
#indexbottom .welcome .bottomwatch a#playYoutu i { width: 100px; height: 100px; text-align: center; line-height: 100px; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #dcdcdc; font-size: 30px; transition:all linear 0.3s; }
#indexbottom .welcome .bottomwatch a#playYoutu i:hover { width: 110px; height: 110px; line-height: 110px; font-size: 34px; }
#indexbottom .notice { background: #fafafa; display: inline-block; padding: 40px; position: relative; margin: 25px 50px 0; max-width: 55%; }
#indexbottom .welcome .notice { margin-top: -60px; }
#indexbottom .noticetitle { overflow:hidden; margin-bottom: 30px; }
#indexbottom .noticetitle h2 { float:left; }
#indexbottom .noticetitle h2.boxTitle font { font-size: 35px; }
#indexbottom .noticetitle h2.boxTitle font:first-letter { font-size: 80px; }
#indexbottom .gocontact .noticetitle h2.boxTitle span { left: 60px; } 
#indexbottom .noticetitle p { float:right; background:#00aebb; padding: 5px 25px; margin: 10px 0 0 70px; }
#indexbottom .noticetitle p a { color:#fff; font-size:12px; }
#indexbottom .noticeart { color:#737373; font-size:15px; }
#indexbottom .noticeart p ,
#indexbottom .noticeart article { line-height: 180%; }
#indexbottom .noticeart p.big { color:#c9b579; font-size:22px;margin-bottom: 5px; }
#indexbottom .noticeart p.spe b { font-family: 'Taviraj', serif; color:#c9b579; font-size:22px; font-style:italic; }
#indexbottom .noticeart p.small { font-size:12px; }

@media screen and (max-width: 1680px) {
	section.indexset { width: 90%; }
	.indexset-box {width: 100%;}
	#visulbar { right: 1%; width: 13%; }
    #about .abimg {width: 50%;}
    .workframe {width: 90%;}

}
@media screen and (max-width: 1366px) {
	#visulbar { right: 0; width: 17%; }
	#news .newstitle { width:45%; }
	#news .newsList { width:50%; }
	#room .roomttile h2 ,
	#room .roomttile p { float: none; width: 100%; }
}
@media screen and (max-width: 1280px) {
	#indexabout #adslider { width:55%; }
	#indexbottom .noticetitle h2 { float: none; }
	#indexbottom .noticetitle p { float: none; display: block; margin: 20px 0 0; text-align: center; }
	#indexabout .aboutcontent { width: calc(70% - 220px); }
	#indexabout .aboutcontent p a { padding: 5px 50px; }
    #about { background-attachment: inherit; }
	#about .abtxt .abtxt-inside { width: 50%; }
	#about .abtxt .abtxt-inside h2 { font-size: 15px; }
}
@media screen and (max-width: 980px) {
    #about >div { overflow: visible; text-align: right; }
	#about .abimg { float: none; position: absolute; margin: 0; top: -40px; }
	#about .abtxt { position: inherit; float: none; display: inline-block; }
	#visulbar { width: 5%; }
	.indexset-box ,
	#indexabout .abouttitle { width:100%; }
	#indexbottom .welcome { width: 100%; text-align:right; }
	#indexbottom .gocontact { width: 100%; margin-top: -50px; text-align:left; }
	#indexbottom .bottomwatch { width:100%; display:inline-block; height: 320px; background-attachment: initial; }
	#indexbottom .notice { max-width: 75%; }
	#indexbottom .welcome .notice { margin-bottom: 50px; }
	#indexabout .aboutcontent { width: calc(90% - 220px); }
}
@media screen and (max-width: 768px) {
	#about .abimg {width: 40%;}
	#about .abtxt { width: 95% }
    #news .newstitle { float:none; width:100%; margin-bottom:80px; }
	#news .newsList ,
	#room .roomttile p { width:100%; }
	#room .roomttile h2 { float:none; width:100%; margin-bottom:20px; }
	#news .newstitle img ,
	#room .roomttile h2 img ,
	.abouttitle img ,
	#indexbottom .noticetitle h2 img { height:60px; }
	#indexabout #adslider { width: 100%; top: initial; bottom: 0; }
}
@media screen and (max-width: 640px) {
    #about .abimg {width: 100%;position: inherit;max-width: 100%;top: 0;}
	#about .abtxt { width: 100% }
	#about .abtxt .abtxt-inside { width: calc(100% - 90px); }
	#news .newstitle img ,
	#room .roomttile h2 img ,
	.abouttitle img ,
	#indexbottom .noticetitle h2 img { height:50px; }
	#indexabout .aboutcontent { width: calc(100% - 120px); padding: 35px 40px; margin: 50px 20px; }
}
@media screen and (max-width: 480px) {
    #about { padding: 50px 0; }
	#about .abtxt .abtxt-inside { width: calc(100% - 50px); padding: 25px; }
	section.indexset ,
	#indexBook h2.boxTitle { width: 90%; }
	#news .newstitle img ,
	#room .roomttile h2 img ,
	.abouttitle img ,
	#indexbottom .noticetitle h2 img { height:45px; }
	#news .newsList .newsbox .time { float:none; margin:0; }
	#news .newsList .newsbox .info { float:none; width:100%; margin:15px 0 0; }
	#news .newsList .newsbox .time p.Pubyear { text-align:left; }
	#news .newstitle { margin-bottom: 50px; }
	#room .roomList .roombox { padding: 10px; }
	#room .roomttile { margin-bottom: 20px; }
	#indexabout .aboutcontent { width: calc(100% - 90px); padding: 35px 25px; }
	#indexabout .aboutcontent p.more a { padding: 5px 20px; }
	#indexabout .aboutcontent p { font-size: 18px; }
	#indexbottom .bottomwatch { width:100%; }
	#indexbottom .gocontact { margin-top:30px; text-align: center; }
	#indexbottom .welcome { text-align: center; }
	#indexbottom .noticeart p.big { font-size:18px; }
	#indexbottom .notice { margin: -60px 20px 0; }
	#indexbottom { padding:0; }
	#indexbottom .notice { max-width: 100%; padding: 25px; }
	.indexset-box { width: 98%; }
    #about { padding: 50px 0; }
	#about .abtxt .abtxt-inside { width: calc(100% - 50px); padding: 25px;
        
}
@media screen and (max-width: 450px) {
	h2.boxTitle font { font-size: 32px; }
	h2.boxTitle font:first-letter { font-size: 75px; }
	h2.boxTitle span { font-size: 14px; top: 6px; left: 65px; }
	#indexbottom .noticetitle h2.boxTitle span { padding-bottom: 2px; left: 86px; top: 10px; }
}