@import url('/css/community.css');

.wow { animation-duration: 2s; animation-name: fadeInUp; }

#content { position: relative; }

#sub-banner { margin-top: 105px; }
#sub-banner img { width: 100%; }

.inside { width: 90%; overflow: hidden; margin: 100px auto; }

.main-article { float: left; width: calc(100% - 370px); }

#side-nav { float: right; width: 290px; }

.waylink ol { margin: 10px auto; padding: 0; width: 90%; text-align: right; }
.waylink ol li { display: inline-block; color: #000; vertical-align: top; font-size: 12px; position: relative; padding-left: 13px; }
.waylink ol li:after { content: '>'; position: absolute; color: #d3d3d3; top: 0; left: 0; }
.waylink ol li:first-child { padding-left: 0; }
.waylink ol li:first-child:after { display: none; }
.waylink ol li a { color: #a3a3a3; font-weight: 400; font-size: 12px; }
.waylink ol li:last-child a { color: #989898; }

.main-article .pagetitle { line-height: 100%; color: #4f4f4f; margin-bottom: 50px; font-weight: 400; }
.main-article #describe { color: #535353; font-size: 15px; }

#ssbanner-list .bxslider { overflow: hidden; }

#side-nav .side-title h2, #contact-nav h3, #ssbanner-list h3, #category-nav>h3, #contact-extra>h3 { font-size: 16px; line-height: 110%; color: #605e5e; margin-bottom: 20px; }
#side-nav .side-title h2 b { font-weight: 400; margin-left: 10px; color: #96979f; }
#side-nav .Cate>li h3, #side-nav .Cate>li .subUL li .subULHead, #contact-nav ul li, #contact-extra ul li { overflow: hidden; position: relative; border-bottom: 1px solid #efefef; }
#contact-extra ul li { padding: 15px 0; }
#side-nav .Cate>li h3, #side-nav .Cate>li .subUL li .subULHead p { width: calc(100% - 25px); }
#side-nav .Cate>li>h3 { width: 100%; }
#side-nav .Cate>li h3 span { color: #9fbcb7; margin-right: 8px; vertical-align: bottom; font-weight: 700; font-size: 20px; }
#side-nav .Cate>li h3 b, #side-nav .Cate>li .subUL li .subULHead b { color: #9fbcb7; font-weight: 700; font-size: 20px; position: absolute; right: 0; top: 0; cursor: pointer; display: block; width: 50px; height: 53px; text-align: center; line-height: 53px; }
#side-nav .Cate>li h3 a, #side-nav .Cate>li .subUL li .subULHead p a, #side-nav .Cate>li .subUL li .sub2UL li .sub2ULHead p a, #contact-nav ul li a, #contact-extra ul li a { padding: 15px 0; }
#side-nav .Cate li a, #contact-nav ul li a, #contact-extra ul li a { font-size: 15px; display: block; color: #6e6e6e; transition: all linear .2s; }
#contact-extra ul li a { padding: 0; display: inline-block; }
#side-nav .Cate li a:hover, #side-nav .Cate li.action a, #contact-nav ul li a:hover, #contact-extra ul li a:hover { color: #9a9ec8; }
#side-nav .Cate li ul { overflow: hidden; display: none; }
#side-nav .Cate li.action>ul { display: block; }
#side-nav .Cate>li .subUL li .subULHead p a { padding-left: 20px; color: #6e6e6e; }
#side-nav .Cate>li .subUL li.action .subULHead p a { color: #a77bb2; }
#side-nav .Cate>li .subUL li .subULHead b { color: #d3d3d3; }
#side-nav .Cate>li .subUL li .sub2UL li .sub2ULHead p a { padding-left: 35px; border-bottom: 1px solid #efefef; color: #6e6e6e; }
#side-nav .Cate>li .subUL li .sub2UL li.action .sub2ULHead p a { background: #ededed; }

#ssbanner-list .bxslider div a { background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; background-color: #f6fcfd; display: block; transition: all ease-in-out .3s; width: 100%; height: 100%; }
#ssbanner-list .bxslider div a img { width: 100%; }
#ssbanner-list, #side-nav #fb-wrap, #side-nav #g-map, #side-nav #youtube, #side-nav #contact-nav, #category-nav, #contact-extra { margin-top: 50px; text-align: center; }
#side-nav #contact-nav ul li a, #side-nav #contact-extra ul li { text-align: left; }
#side-nav #contact-nav ul li a i { margin-right: 5px; }

#community { margin: 50px 0; }
#community li { float: left; margin: 0 5px 5px 0; line-height: 0; }

.float { position: absolute; z-index: -1; }
.float.flowerA { right: 0; top: 0; background-image: url(/images/15/bg-flower-D.png); background-repeat: no-repeat; background-position: 100% 50%; background-size: auto; width: 40%; height: 100%; }
.float.flowerB { left: 0; bottom: 10%; }
.float.flowerC { background-image: url(/images/15/bg-flower-F.png); }

@media screen and (max-width: 1366px) {
	.inside { width: 90%; }
}
@media screen and (max-width: 1280px) {
	.float.flowerA { width: 70%; background-size: contain; top: 50%; }
	.float.flowerC { top: 0; }
}
@media screen and (min-width: 1025px) {
	#ssbanner-list .bxslider>div:nth-child(2n) a { background-color: #f7f4f8; }
	#album li:nth-child(2n), #prolay .pro-list>div:nth-child(3n-1) .p-box, #newslist li:nth-child(2n) { animation-duration: .5s; }
}
@media screen and (max-width: 1024px) {
	#sub-banner { margin-top: 56px; }
	.main-article { width: 100%; }
	#side-nav { width: 100%; margin-top: 80px; }
	#ssbanner-list .bxslider div { width: 50%; float: left; }
	#ssbanner-list .bxslider>div:nth-child(2) a, #ssbanner-list .bxslider>div:nth-child(3) a { background-color: #f0f0f0; }
	#content { background: rgba(255, 255, 255, 0.7); }
}
@media screen and (max-width: 640px) {
	.inside { margin: 20px auto; }
	.main-article .pagetitle { font-size: 30px; }
	.waylink ol li, .waylink ol li a, .waylink ol li .h3, .waylink ol li:after { font-size: 6pt; }
}
@media screen and (max-width: 480px) {
	.main-article .pagetitle { margin-bottom: 20px; }
}