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

section.indexset { width: 1612px; }

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

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

/* room */
#room { position: relative; padding: 70px 0 50px; background: #f5f5f5; z-index: 2; }
#room .roomttile { overflow: hidden; margin-bottom: 50px; }
#room .roomttile h2 { float: left; }
#room .roomttile p { overflow: hidden; float: right; margin-top: 20px; max-width: 30%; height: 46px; color: #595757; font-size: 14px; line-height: 160%; letter-spacing: 0.1em; }
#room .roomList .roombox { margin: 0 5px; padding: 15px; background: #fff; box-shadow: 0 0 5px #e3e3e3; }
#room .roomList .roombox .photo { position: relative; background: no-repeat 50% / cover; }
#room .roomList .roombox .photo a { display: block; width: 100%; height: 100%; background: rgba(25,25,25,0.7) url(/images/35/index-room-hover.png) no-repeat 50% / 66px; 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 { position: relative; margin: -35px auto 20px; width: 80%; }
#room .roomList .roombox .info p { position: relative; overflow: hidden; padding: 20px 15px; background: #7ecef4; color: #fff; font-size: 14px; text-align: center; white-space: nowrap; text-overflow: ellipsis; 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 { position: absolute; margin: 5px; width: calc(100% - 12px); height: calc(100% - 12px); border: 1px solid #fff; top: 0; left: 0; content: ""; }
#room .roomList .roombox .info h3 { overflow: hidden; margin: 20px 0 10px; text-align: center; white-space: nowrap; text-overflow: ellipsis; }
#room .roomList .roombox .info h3 a { color: #595757; font-size: 17px; }
#room .roomList .roombox .info span { position: relative; margin: 0 auto 20px; width: 75%; display: block; text-align: center; }
#room .roomList .roombox .info span img { position: relative; padding: 0 10px; display: inline-block; background: #fff; z-index: 2; }
#room .roomList .roombox .info span:after { position: absolute; width: 100%; height: 1px; background: #c9b579; top: 58%; left: 0; transition: all ease-in-out 0.3s; content: ""; }
#room .roomList .roombox .info:hover span:after { width: 50%; height: 1px; left: 25%; }
#room .roomList .roombox .info article { overflow: hidden; height: 46px; color: #504a4a; font-size: 12px; }

/* visulbar */
#visulbar { position: absolute; width: 258px; height: 100%; z-index: 3; background: url(/images/35/index-side-img.jpg) no-repeat 75% 0; background-color: #006b7f; opacity: 1; right: 8%; top: 0; -moz-animation-name: sea 8s infinite alternate; -ms-animation-name: sea 8s infinite alternate; -o-animation-name: sea 8s infinite alternate; -webkit-animation-name: sea 8s infinite alternate; animation-name: sea 8s infinite alternate; }
/* indexabout */
#indexabout { position: relative; padding: 100px 0; background-image: url(/images/35/index-about-bg.jpg); }
#indexabout .aboutcontent { position: relative; margin: 50px 10px 50px 20px; padding: 35px 60px; width: calc(55% - 220px); background: #fff; display: inline-block; box-shadow: 0 0 15px #c0c0c0; z-index: 2; }
#indexabout .aboutcontent p { color: #595757; font-size: 21px; font-weight: bold; }
#indexabout .aboutcontent article { margin: 20px 0; color: #595757; font-size: 14px; line-height: 180%; }
#indexabout .aboutcontent p.more { margin-top: 10px; display: inline-block; border: 1px solid #00aebb; text-align: center; transition: all ease-in-out .3s; }
#indexabout .aboutcontent p.more:hover { background: #00aebb; }
#indexabout .aboutcontent p a { padding: 5px 100px; display: block; color: #00aebb; font-size: 15px; font-weight: normal; }
#indexabout .aboutcontent p.more:hover a { color: #fff; }
#indexabout .aboutcontent p a i { margin-left: 20px; }
#indexabout #adslider { overflow: hidden; position: absolute; width: 70%; height: 350px; z-index: 1; top: 100px; right: 0; }
#indexbottom { padding: 80px 0 0; overflow: hidden; }
#indexbottom .welcome { float: right; width: 50%; }
#indexbottom .gocontact { margin-top: 100px; float: left; width: 50%; text-align: right; }
#indexbottom .bottomwatch { height: 252px; background: no-repeat 50% / cover; background-attachment: fixed; }
#indexbottom .bottomwatch iframe { width: 100%; height: 100%; }
#indexbottom .notice { position: relative; margin: -60px 50px 0; padding: 40px; max-width: 55%; background: #fafafa; display: inline-block; }
#indexbottom .noticetitle { overflow: hidden; margin-bottom: 30px; }
#indexbottom .noticetitle h2 { float: left; }
#indexbottom .noticetitle p { padding: 5px 25px; margin: 10px 0 0 70px; float: right; background: #00a0e9; }
#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 { margin-bottom: 5px; color: #c9b579; font-size: 22px; }
#indexbottom .noticeart p.spe b { font-family: 'Taviraj', serif; color: #c9b579; font-size: 22px; font-style: italic; }
#indexbottom .noticeart p.small { font-size: 12px; }

@keyframes sea { 0% { background-position: 20% 0%; opacity: .5; } 100% { background-position: 80% 0%; opacity: 1; } }
@-moz-keyframes sea { 0% { background-position: 20% 0%; opacity: .5; } 100% { background-position: 80% 0%; opacity: 1; } }
@-ms-keyframes sea { 0% { background-position: 20% 0%; opacity: .5; } 100% { background-position: 80% 0%; opacity: 1; } }
@-o-keyframes sea { 0% { background-position: 20% 0%; opacity: .5; } 100% { background-position: 80% 0%; opacity: 1; } }
@-webkit-keyframes sea { 0% { background-position: 20% 0%; opacity: .5; } 100% { background-position: 80% 0%; opacity: 1; } }

@media screen and (max-width: 1680px) {
	section.indexset { width: 80%; }
	.indexset-box { width: 85%; }
	#visulbar { right: 1%; width: 13%; }
}
@media screen and (max-width: 1366px) {
	#visulbar { right: 0; width: 17%; }
	#news .newstitle , #room .roomttile h2 { width: 45%; }
	#news .newsList { width: 50%; }
}
@media screen and (max-width: 1280px) {
	#indexabout #adslider { width: 55%; }
	#indexbottom .noticetitle h2 { float: none; }
	#indexbottom .noticetitle p { margin: 20px 0 0; float: none; display: block; 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 { width: 100%; }
	#indexbottom .welcome { width: 100%; text-align: right; }
	#indexbottom .gocontact { width: 100%; margin-top: -50px; text-align: left; }
	#indexbottom .bottomwatch { width: 80%; height: 320px; background-attachment: initial; display: inline-block; }
	#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) {
	#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;	 }
	#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; }
	#room .roomList .roombox { padding: 10px; }
	#indexbottom .notice { margin: -60px 20px 0; }
	#indexbottom { padding: 0; }
	section.indexset { width: 90%; }
	#indexabout .aboutcontent { width: calc(100% - 90px); padding: 35px 25px; }
	#indexbottom .notice { max-width: 100%; padding: 25px; }
	.indexset-box { width: 98%; }
	#room .roomttile { margin-bottom: 20px; }
}