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

#sub-banner { margin-top: 171px; position: relative; }
#sub-banner a { position: relative; display: block; }
#sub-banner img { width: 100%; position: relative; }

#w-particles { overflow: hidden; position: absolute; bottom: 0; left: 0; right: 0; top: 0; }
#w-particles canvas { width: 100%; height: 100%; }
#w-particles #layouy-particles { height: 100%; background: rgba(8, 51, 81, 0.43); }

#side-nav { background: #f6f6f6; position: relative; z-index: 20; }
#side-nav .workframe { overflow: visible; }
#side-nav .outside-set .Cate>li h3, #side-nav .outside-set .Cate>li .subUL li .subULHead, #category-nav .Cate>li>h3, #category-nav .Cate .subUL>li .subULHead { overflow: hidden; position: relative; border-bottom: 1px solid #efefef; }
#side-nav .outside-set .Cate>li h3, #side-nav .outside-set .Cate>li .subUL li .subULHead p, #category-nav .Cate>li>h3, #category-nav .Cate .subUL>li .subULHead { width: calc(100% - 25px); }
#side-nav .outside-set .Cate>li>h3, #category-nav .Cate>li>h3, #category-nav .Cate .subUL>li .subULHead { width: 100%; }
#side-nav .outside-set .Cate>li h3 span, #category-nav .Cate>li>h3 a span { color: #c4c4c4; margin-right: 8px; vertical-align: bottom; font-weight: 700; font-size: 20px; }
#side-nav .outside-set .Cate>li h3 b, #side-nav .outside-set .Cate>li .subUL li .subULHead b, #category-nav .Cate>li>h3 b, #category-nav .Cate .subUL>li .subULHead b { color: #73bff8; font-weight: 700; font-size: 18px; position: absolute; right: 0; top: calc(50% - 13px); cursor: pointer; width: 50px; text-align: center; height: 56px; top: 0; line-height: 56px; }
#side-nav .outside-set .Cate>li h3 a, #side-nav .outside-set .Cate>li .subUL li .subULHead p a, #side-nav .outside-set .Cate>li .subUL li .sub2UL li .sub2ULHead p a, #category-nav .Cate>li>h3 a, #category-nav .Cate .subUL>li .subULHead p a, #category-nav .Cate .subUL>li .sub2UL li .sub2ULHead p a { padding: 15px 0; }
#side-nav .outside-set .Cate li a, #category-nav .Cate li a { font-size: 15px; display: block; color: #fff; transition: all linear .2s; }
#side-nav .outside-set .Cate li a:hover, #side-nav .outside-set .Cate li.action a { color: #026fbf; }

#category-nav .Cate>li ul { overflow: hidden; }
#category-nav .Cate li ul { display: none; }
#category-nav .Cate li.action>ul { display: block; }

#side-nav .outside-set .Cate>li .subUL li .subULHead p a, #category-nav .Cate .subUL>li .subULHead p a { padding-left: 20px; color: #f9f9f9; }
#side-nav .outside-set .Cate>li .subUL li .subULHead b, #category-nav .Cate .subUL>li .subULHead b { color: #d3d3d3; }
#side-nav .outside-set .Cate>li .subUL li .sub2UL li .sub2ULHead p a, #category-nav .Cate .subUL>li .sub2UL li .sub2ULHead p a { padding-left: 35px; border-bottom: 1px solid #efefef; color: #f5f5f5; }
#side-nav .outside-set .Cate>li .subUL li .sub2UL li.action .sub2ULHead p a { background: #f1f8fe; }

.waylink { margin: 10px 0; }
.waylink ol { margin: 0; padding: 0; text-align: right; }
.waylink ol li { display: inline-block; font-size: 12px; color: #939393; padding-left: 10px; position: relative; }
.waylink ol li:before { content: '/'; position: absolute; left: 0; top: 0; }
.waylink ol li:first-child:before { display: none; }
.waylink ol li a { color: #939393; }

.main-article { position: relative; }
.main-article:after { position: absolute; width: 100%; min-height: 450px; top: 0; content: ''; background: #dbdbdb; left: 0; z-index: 1; height: 40%; }
.main-article .workframe { position: relative; z-index: 2; }
.main-article .pagetitle { text-align: center; font-size: 32px; line-height: 120%; margin: 60px 0; color: #323232; }
.main-article #describe { background: #fff; margin-bottom: 80px; }

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

#side-other { position: relative; z-index: 2; }
#sideSet { background: #0583c9; }
#sideSet #contact-nav { float: left; color: #fff; width: 400px; padding: 70px; }
#sideSet #category-nav { color: #fff; float: left; width: 350px; padding: 70px 0; }
#sideSet .efv { float: right; width: calc(100% - 540px - 350px); padding: 70px 0; }
#sideSet #contact-nav h3, #sideSet #category-nav>h3 { font-size: 30px; line-height: 110%; margin-bottom: 20px; }
#sideSet #contact-nav ul { background: #176693; padding: 0 20px; }
#sideSet #contact-nav ul li { margin: 15px 0; }
#sideSet #contact-nav ul li a { color: #fff; font-size: 17px; }
#sideSet #contact-nav ul li a i { display: inline-block; width: 35px; height: 35px; border-radius: 10px; line-height: 35px; text-align: center; background: #f1f1f1; color: #0583c9; margin-right: 10px; }
#sideSet #fb-wrap { margin: 30px 0 0; text-align: center; }
#sideSet #g-map { width: 100%; }
#sideSet #g-map iframe { width: 100%; height: 400px; }
#sideSet #youtube { width: 100%; margin: 0 0 30px; }
#sideSet #youtube .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
#sideSet #youtube iframe, #sideSet #youtube object, #sideSet #youtube embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

@media screen and (max-width: 1280px) {
	#sub-banner { margin-top: 163px; }
}
@media screen and (min-width: 1025px) {
	#side-nav .outside-set>ul { text-align: center; }
	#side-nav .outside-set>ul.sthOver { overflow: visible; }
	#side-nav .outside-set .Cate>li { display: inline-block; vertical-align: top; position: relative; }
	#side-nav .outside-set .Cate>li h3 a { display: block; font-weight: 400; font-size: 16px; padding: 15px 20px; color: #6b6b6b; }
	#side-nav .outside-set .Cate>li.action h3 a { background: #dbdbdb; color: #373535; }
	#side-nav .outside-set .Cate>li h3 b, #side-nav .outside-set .Cate>li .subUL li .subULHead b { display: none; }
	#side-nav .outside-set .Cate>li>ul, #side-nav .outside-set .Cate>li>ul .sub2UL { transition: all linear .3s; position: absolute; width: 180px; top: 100%; left: 0; transform: translateX(50%); z-index: -1; opacity: 0; }
	#side-nav .outside-set .Cate>li>ul .sub2UL { top: 0; left: 100%; }
	#side-nav .outside-set .Cate>li.p-boxOver>ul, #side-nav .outside-set .Cate>li.p-boxOver>ul li:hover .sub2UL { transform: translateX(0); z-index: 2; opacity: 1; overflow: visible; }
	#side-nav .outside-set .Cate>li>ul>li { background: #2a91c9; }
	#side-nav .outside-set .Cate>li>ul>li.action, #side-nav .outside-set .Cate>li>ul>li:hover { background: #285e7b; }
	#side-nav .outside-set .Cate>li .subUL li .sub2UL li .sub2ULHead p a { background: #1a455d; }
	#side-nav .outside-set .Cate>li .subUL li .sub2UL li .sub2ULHead p a:hover, #side-nav .outside-set .Cate>li .subUL li .sub2UL li.action .sub2ULHead p a { background: #000; }
}
@media screen and (max-width: 1024px) {
	#sub-banner { margin-top: 127px; }
	#sideSet #contact-nav { width: 100%; padding: 0; }
	#sideSet #category-nav { width: 100%; }
	#sideSet .efv { width: 100%; }
	.content-wrraper { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
	.content-wrraper>div, .content-wrraper aside { width: 100%; order: 1; }
	#side-nav { order: 2; }
	#side-other { order: 3; }
	#side-nav .outside-set .Cate li a { color: #272525; }
	#side-nav .outside-set .Cate>li .subUL li.action .subULHead p a, #side-nav .outside-set .Cate>li .subUL li .subULHead p a { color: #7b7b7b; }
	#side-nav .outside-set .Cate>li .subUL, #side-nav .outside-set .Cate>li .subUL .sub2UL { display: none; }
	#side-nav .outside-set .Cate>li.action .subUL { display: block; }
	#side-nav .outside-set .Cate>li .subUL li .sub2UL li .sub2ULHead p a { color: #838383; }
}
@media screen and (max-width: 640px) {
	#sub-banner { margin-top: 115px; }
	#sideSet #g-map iframe { height: 300px; }
	.main-article .pagetitle { font-size: 26px; margin: 40px 0; }
}