@import url('/css/pagenav.css');
h1.h6 { position:fixed; z-index:-999999999; opacity:0; }

/* sub-banner */
#sub-banner a {padding: 0px 0;display: block;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;}
#sub-banner{
    z-index: 1;
}
/* side-nav */
#layoutbar { position: relative; margin-top: -97px; z-index: 99; }
#side-nav {background: rgba(255, 255, 255, 0.51);}
#side-nav ul { text-align:center; }
#side-nav ul li { display: inline-block; margin-left: -4px; }
#side-nav ul li h3 ,
#side-nav ul li .subUL li .subULHead { position: relative; }
#side-nav li a {position: relative;color: #2a2a2a;font-size:16px;padding: 15px 40px;display: block;border-right: 1px solid rgba(255, 255, 255, 0.43);border-left: 1px solid rgba(255, 255, 255, 0.43);}
#side-nav li.action h3 a:after ,
#side-nav li.action >a:after { content: ''; position: absolute; bottom: 0; left: calc(50% - 8px); width: 0; height: 0; border-style: solid; border-width: 0 8px 10px 8px; border-color: transparent transparent #fff transparent; }
#side-nav ul li.catebtn { display:none; }
#side-nav ul li b[data-action="sideOpen"] { position: absolute; right: 10px; top: calc(50% - 13px); color: #4c4c4c; display: none; }
#side-nav ul li .subUL { overflow: hidden; position: absolute; min-width: 150px; height: 0; background: rgba(221, 221, 221, 0.78); opacity: 0; transition:all ease-in-out 0.3s; display: block; }
#side-nav ul li:hover .subUL { overflow: inherit; height: auto; opacity: 1; }
#side-nav ul li .subUL li { margin-left: 0; padding: 0; display: block; border-bottom: 1px #e8e8e8 solid; }
#side-nav ul li .subUL >li.action { background: rgb(255, 255, 255); }
#side-nav ul li .subUL li a { padding: 10px 40px; border: 0; }
#side-nav ul li .subUL li .sub2UL { background: rgba(255, 255, 255, 0.2); }
#side-nav ul li .subUL li:last-child ,
#side-nav ul li .subUL li .sub2UL li:last-child { border-bottom: 0; }
#side-nav ul li .subUL li .sub2UL >li.action { background: rgba(0, 0, 0, 0.3); -webkit-box-shadow: inset 0 0 7px #505050; -moz-box-shadow: inset 0 0 7px #505050; box-shadow: inset 0 0 7px #505050; }

/* waylink */
.waylink { overflow:hidden; margin-bottom: 15px; font-size:13px; }
.waylink .pon { overflow:hidden; margin: 0; padding: 0; }
.waylink .pon li { padding-right: 5px; display:inline-block; }
.waylink .pon li:after { margin-left: 7px; display: inline-block; vertical-align: middle; content: ">"; }
.waylink .pon li:last-child:after { display:none; }
.waylink .pon a { color: #a39f9f; }
.waylink .pon li:last-child a { color: #000; }
.waylink .pon .h7 { display:inline; font-size:13px; font-weight:normal; }

/* content  */
#content {/* background-image:url(/images/07/article-bg.jpg); */background-repeat:no-repeat;background-position:50% 100%;background-color:#fff;background-size: cover;min-height: 300px;}

/* content-wrap  */
.content-wrap { margin: 0 0 40px; background: rgba(255, 255, 255, 0.73); padding: 40px; }
.content-wrap .article-img { margin-bottom: 50px; overflow:hidden; }

/* boxTitle */
h2.boxTitle { position: relative; font-weight: normal; }
h2.boxTitle font { display: block; font-size: 26px; line-height: 100%; text-transform: uppercase; }
h2.boxTitle font:first-letter { margin-right: 5px; font-size: 66px; line-height: 100%; color: #18b4f1; }
h2.boxTitle span {position: absolute;padding: 0 15% 2px 5px;/* border-bottom: 1px #18b4f1 solid; */font-weight: bold;font-size: 16px;color: #797a7a;top: 7px;left: 55px;}


/* community */
#community { margin:50px 0; }
#community >h5 { font-size: 17px; color: #504c4b; margin-bottom: 10px; }
#community li { float:left; line-height:0; margin-right:10px; margin-bottom:5px; }
#community li.fbb { width:100%; margin-right:0; }

/* best-product */
#best-product h3.tit { margin: 60px 0 20px; padding-bottom: 15px; border-bottom: 1px #a4e6eb solid; text-align: center; font-weight: normal; font-size: 40px; color: #18b4f1; text-transform: uppercase; }
#best-product .roomList { overflow: hidden; }
#best-product .roomList > div { float: left; width: 25%; }
#best-product .roomList .roombox { background: #fff; padding: 15px; margin: 5px; box-shadow: 0 0 5px #e3e3e3; }
#best-product .roomList .roombox .photo { background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; position: relative; }
#best-product .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; }
#best-product .roomList .roombox .photo:hover a { opacity:1; }
#best-product .roomList .roombox .photo a img { width:100%; }
#best-product .roomList .roombox .info { margin: -30px auto 0; width: 80%; position: relative; }
#best-product .roomList .roombox .info p { background: #18b4f1; color: #fff; font-size: 14px; text-align: center; position: relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 15px; letter-spacing: 0.1em; transition: all ease-in-out 0.3s; }
#best-product .roomList .roombox .info:hover p { background: #0081db; }
#best-product .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; }
#best-product .roomList .roombox .info h3 { text-align: center; margin: 20px 0 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#best-product .roomList .roombox .info h3 a { color: #595757; font-size: 17px; }

/* contact-nav */
#contact-nav { padding: 40px 0; }
#contact-nav .article-img { margin: 0 0 0 auto; width: 30%; }
#contact-nav h2.boxTitle font { font-size: 51px; }
#contact-nav h2.boxTitle font:first-letter { font-size: 95px; }
#contact-nav h2.boxTitle span { padding-right: 0; width: 100%; top: 13px; left: 70px; }
#contact-nav ul { overflow: hidden; margin-top: 20px; width: 100%; }
#contact-nav ul li { overflow: hidden; padding: 0 1.5% 20px; float: left; width: 30%; }
#contact-nav ul li .icon { float:left; width: 50px; color:#18b4f1; }
#contact-nav ul li .icon i { font-size: 30px; }
#contact-nav ul li .txt { float:left; width:calc(100% - 50px); }
#contact-nav ul li .txt p { color:#434343; font-size:16px; line-height: 180%; }
#contact-nav ul li .txt .gray { color:#707071; }

/* contact-extra */
#contact-extra { margin-bottom: 10px; }
#contact-extra ul { margin: 20px 20px 0; }
#contact-extra ul li { margin: 10px 0; font-size: 16px; color: #434343; }
#contact-extra ul li a { color: #07b0bd; }

/* sideInfo */
#sideInfo { padding-bottom: 50px; }
#sideInfo section { background: #f5f5f5; }
#sideInfo section > div { float: left; width: 60%; }
#sideInfo section #sidead-list ul li { overflow: hidden; height: auto; }
#sideInfo section #sidead-list .slick-slider { margin-bottom: 0; }
#sideInfo section #sidead-list a { position: relative; display: block; background-position: 50%; background-repeat: no-repeat; background-size: cover; }
#sideInfo section #sidead-list font { position: absolute; padding: 10px 0; width: 100%; background: rgba(0, 0, 0, 0.44); text-align: center; color: #fff; bottom: 0; left: 0; }
#sideInfo section .other { width: 40%; }
#sideInfo section .other > div { margin: 10px 40px; }
#sideInfo section .other > div iframe { width: 100%; }

/* g-map */
#g-map iframe { width: 100%; height: 350px; }

/* footer */
footer section:first-child { margin-top: 0; border-top: 0; }

@media screen and (max-width: 1366px) {
	#contact-nav .article-img { width: 40%; }
}
@media screen and (max-width: 1024px) {
	#best-product .roomList > div { width: 50%; }
}
@media screen and (min-width: 980px) {
	#side-nav >ul >li { display:inline-block; }
	#side-nav ul li.catebtn { display:none; }
}
@media screen and (max-width: 980px) {
	#layoutbar { margin-top: -40px; }
	#side-nav section { width: 100%; }
	#side-nav li a { padding: 10px 30px; text-align: left; border: 0; }
	#side-nav ul li { margin-left: 0; display:none; border-bottom: 1px #fff solid; }

	#side-nav ul li b[data-action="sideOpen"] { display: block; }
	#side-nav ul li.catebtn {display:block;background: #6a3368;}
	#side-nav ul li .subUL { position: relative; height: auto; display: none; opacity: 1; transition: none; }
	#side-nav ul li .subUL li .sub2UL { display:none; }
	#side-nav ul li.action .subUL ,
	#side-nav ul li .subUL li.action .sub2UL { display: block; }
	#contact-nav h2.boxTitle font { font-size: 26px; }
	#contact-nav h2.boxTitle font:first-letter { font-size: 66px; }
	#contact-nav h2.boxTitle span { top: 7px; left: 48px; }
	#contact-nav ul li { width: 45%; }
	#contact-nav ul li:first-child { margin-bottom: 20px; width: 97%; }
	#sideInfo section > div ,
	#sideInfo section .other { width: 100%; }
}
@media screen and (max-width: 640px) {
	#sub-banner a { padding: 90px 0;}
	.content-wrap .article-img { margin: 0 0 20px; }
	#layoutbar { margin-top: 25px; }
	#layoutbar .waylink ,
	#layoutbar .waylink .pon a ,
	#layoutbar .waylink .pon .h7 ,
	#layoutbar .waylink .pon li:after { font-size:12px; color: #555; }
	#side-nav li.action:after { display:none; }
}
@media screen and (max-width: 480px) {
	#sub-banner { margin-top: 60px; }
	.content-wrap .article-img img { height:40px; }
	#side-nav li a { font-size:14px; }
	.content-wrap { padding: 20px; }
	#content section { width:90%; }
	#layoutbar .waylink ,
	#layoutbar .waylink .pon a ,
	#layoutbar .waylink .pon .h7 ,
	#layoutbar .waylink .pon li:after { font-size: 5pt; }
	#layoutbar .waylink .pon li { padding-right: 8pt; }
	#content section { width:100%; }
	#contact-nav .article-img { width: 210px; }
	#contact-nav ul li { margin-bottom: 20px; width: 97%; }
}
@media screen and (max-width: 450px) {
	#best-product .roomList > div { width: 100%; }
}