@import url('/css/pagenav.css');
@import url('/css/community.css');
.wrap .workframe { overflow: hidden; padding: 40px 0; }
.wrap .workframe > div { float: right; width: calc(100% - 300px); }

/* sub-banner */
#sub-banner { max-height: 20%; }
#sub-banner img { width: 100%; }

/* sideNav */
#sideNav {
	margin-right: 50px;
	width: 250px;
}
#sideNav > div {
	margin-bottom: 25px;
}
#sideNav h2.sideTitle {
	margin-bottom: 15px;
	font-size: 25px;
	color: #8b8b8b;
}
#sideNav ul , #faqlist * { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }
#sideNav ul li {
	padding: 0 10px;
	border-bottom: 1px #e1e1e1 solid;
}
#sideNav #contact-extra ul li {
	padding: 10px;
	font-size: 18px;
}
#sideNav ul li ul.subUL li , #sideNav ul li:last-child { border-bottom: 0; }
#sideNav ul li h3 , #sideNav ul li .subULHead {
	position: relative;
}
#sideNav ul li a {
	padding: 10px 0;
	font-size: 18px;
	display: block;
	color: #313233;
}
#sideNav #contact-extra ul li a {
	padding: 0;
	display: inline-block;
}
#sideNav ul li h3 a span {
    margin-right: 5px;
    color: #655108;
    font-size: 20px;
	vertical-align: bottom;
}
#sideNav ul li h3 b , #sideNav ul li .subULHead b {
	color: #73bff8;
    font-weight: bold;
    font-size: 18px;
    position: absolute;
    right: 5px;
    top: calc(50% - 13px);
    cursor: pointer;
}
#sideNav ul li .subULHead b {
	color: #9e9999;
	font-size: 16px;
}
#sideNav ul li ul {
	margin-bottom: 15px;
	display: none;
}
#sideNav ul li.action >ul {
	display: block;
}
#sideNav ul li ul.subUL li a {
	padding: 2px 0;
	font-size: 16px;
	color: #757575;
}
#sideNav ul li ul.subUL li ul.sub2UL {
	margin-bottom: 15px;
	padding: 5px;
	background: #f4f4f4;
}
#sideNav #contact-nav ul li a i {
	margin-right: 10px;
}
#sideNav #g-map iframe , #sideNav #youtube iframe { width: 100%; }

/* content */
#content .waylink ol li {
	display: inline-block;
}
#content .waylink ol li a {
	color: #a4a4a4;
}
#content .waylink ol li:last-child a {
	color: #000;
}
#content .waylink ol li:after {
	margin: 0 10px;
	content: "→";
}
#content .waylink ol li:last-child:after {
	content: "";
}
#content h2.pagetitle {
	margin-bottom: 20px;
	font-size: 36px;
	text-align: center;
	color: #828282;
}
#content ul.articleList , #content #describe , #content .article-info ul , #formBox form p {
	overflow: hidden;
}
#content ul.articleList li {
	position: relative;
	margin: 20px;
	padding: 5px;
	float: left;
	width: calc((100% / 3) - 50px);
}
#content ul.articleList li:before , #content ul.articleList li:after {
	position: absolute;
	width: 30%;
	height: 20%;
	background: #2b7de2;
	content: "";
	z-index: 1;
	left: 0;
	top: 0;
}
#content ul.articleList li:after { left: auto; top: auto; right: 0; bottom: 0; }
#content ul.articleList li > div {
	position: relative;
	padding: 20px;
	background: #fff;
	text-align: right;
	z-index: 2;
}
#content ul.articleList li > div p.cate {
	text-align: right;
}
#content ul.articleList li > div p.cate b {
	margin-right: 5px;
    color: #cc9d0f;
}
#content ul.articleList li > div p.cate b.ncat {
	margin-left: 10px;
}
#content ul.articleList li > div p.cate a {
	color: #848484;
}
#content ul.articleList li > div h3 {
    margin: 10px 0;
    height: 30px;
	text-align: center;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
#content ul.articleList li > div h3 a {
	font-size: 18px;
	color: #656565;
}
#content ul.articleList li > div .describe {
	margin-bottom: 15px;
	height: 43px;
    font-size: 12px;
    color: #b3b3b3;
    -webkit-line-clamp: 2;
}
#content ul.articleList li > div a.more {
	margin: 0 25px 10px 0;
}
#content ul.articleList li > div a.more span {
	line-height: 33px;
}
#content ul.articleList li > div a.more i {
	top: 6px;
}
#content .article-info {
	margin-bottom: 20px;
	padding: 20px;
	background: #e8e6e6;
}
#content .article-info ul li {
	float: left;
	width: calc(100% / 3);
	font-size: 16px;
	color: #494747;
}
#content .article-info ul li a {
	font-size: 16px;
	color: #3278ce;
}

/* formBox */
#formBox article , #formBox form p {
	margin: 15px 0;
}
#formBox form p:last-child {
	padding-right: 30px;
	text-align: right;
}
#formBox form p label {
	float: left;
	width: 150px;
	font-size: 16px;
	text-align: right;
}
#formBox form p input , #formBox form p textarea {
	margin-left: 30px;
	padding: 5px 10px;
	width: calc(100% - 200px);
	background: #e7e7e7;
}
#formBox form p input#Checknum {
	width: 100px;
}
#formBox form p label i {
	margin-right: 10px;
    display: inline-block;
    font-size: 18px;
    color: #f00;
}
#order .button {
	text-align: right;
}
#order .button a {
	padding: 5px 20px;
	display: inline-block;
	background: #4a4949;
	color: #fff;
	font-size: 16px;
}
#order .button a.backP {
	margin-left: 20px;
	background: #3e5c9c;
}

@media screen and (max-width: 1024px) {
	#content ul.articleList li {
		width: calc(50% - 50px);
	}
}
@media screen and (max-width: 980px) {
	.wrap .workframe > div {
		float: none;
		width: 100%;
	}
	#sideNav {
		margin-top: 15px;
		margin-right: 0;
		width: 100%;
	}
	#formBox form p label {
		width: 100%;
		text-align: left;
	}
	#formBox form p input , #formBox form p textarea {
		margin-left: 0;
		width: calc(100% - 20px);
	}
}
@media screen and (max-width: 480px) {
	#content ul.articleList li {
		width: calc(100% - 50px);
	}
	#content h2.pagetitle {
		font-size: 25px;
	}
}