.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; }
h2.boxTitle font:first-letter { margin-right: 5px; font-size: 95px; line-height: 100%; color: #00aebb; }
h2.boxTitle span { position: absolute; padding: 0 5px 5px; width: 100%; border-bottom: 1px #00aebb solid; font-weight: bold; font-size: 16px; color: #797a7a; top: 10px; left: 85px; }

.indexset-box { overflow:hidden; margin: 0; width:1214px; }
.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: 100px 0 80px; position:relative; z-index:2; }
#news .newstitle { position: relative; float:right; }
#news .newsList { float:left; width:40%; 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:#00aebb; font-size:25px; }
#news .newsList .newsbox .time p.Pubyear { color:#9f9999; font-size:14px; text-align: right; }
#news .newsList .newsbox .info { float:left; width:calc(90% - 87px); 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 p a{color:#fff; position:relative; z-index:3;    display: block;}
#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; }
}

/* indexabout */
#indexabout { position:relative; padding:100px 0; background-image:url(/images/07/index-about-bg.jpg); }
#indexabout .abouttitle { position: relative; width: 40%; }
#indexabout .abouttitle h2.boxTitle span { left: 75px; }
#indexabout .aboutcontent { background: #fff; display: inline-block; padding: 35px 60px; box-shadow: 0 0 15px #c0c0c0; margin: 50px 10px 50px 20px; position:relative; z-index:2; width: calc(55% - 220px); }
#indexabout .aboutcontent p { color:#595757; font-size:21px; font-weight:bold; }
#indexabout .aboutcontent article { color: #595757; font-size: 14px; margin: 20px 0; line-height: 180%; }
#indexabout .aboutcontent p.more { text-align: center; border: 1px solid #00aebb; display: inline-block; margin-top: 10px; transition:all ease-in-out 0.3s; }
#indexabout .aboutcontent p.more:hover { background:#00aebb; }
#indexabout .aboutcontent p a { color:#00aebb; font-size:15px; font-weight:normal; display:block; padding: 5px 100px; }
#indexabout .aboutcontent p.more:hover a { color:#fff; }
#indexabout .aboutcontent p a i { margin-left:20px; }
#indexabout #adslider { position: absolute; top: 100px; right: 0; width: 70%; z-index: 1; height: 350px; overflow:hidden; }

/* indexBook */
#indexBook { padding: 50px 0; }
#indexBook h2.boxTitle { float: right; 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(0, 174, 187, 0.8); }
#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: #dddddd; }

/* indexbottom */
#indexbottom { padding: 80px 0 0; overflow: hidden; }
#indexbottom .welcome { float:right; width:50%; }
#indexbottom .gocontact { float:left; width:50%; text-align: right; margin-top: 100px; }
#indexbottom .bottomwatch { height:252px; 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: 85%;	}
	#visulbar { right: 1%; width: 13%; }
}
@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; }
}
@media screen and (max-width: 980px) {
	#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) {
	#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) {
	#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) {
	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%; }
}
@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; }
}