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

/* sbanner */
#sbanner { position: relative; z-index: 1; }
#sbanner a {position: relative;z-index: 1;background-attachment: fixed;}
#sbanner:after {
	position: absolute;
	width: 100%;
	height: 100%;%);
	display: block;
	background-image: linear-gradient(to bottom right, hsl(0deg 0% 100% / 76%), #ffffff);
	background-image: linear-gradient(180deg, rgb(255 255 255 / 81%), rgb(255 255 255 / 88%), rgb(255 255 255));
	top: 0;
	left: 0;
	z-index: 2;
	content: "";
	}
	
/* wrap */
.wrap  {position: relative;margin-top: -80px;z-index: 2;min-height: 500px;}
.wrap h1 { line-height: 150%; }

/* waylink */
.waylink ol { margin-bottom: 20px; font-size: 0; }
.waylink ol li { display: inline-block; color: #222; }
.waylink ol li a { color: #737373; }
.waylink ol li a:after { margin: 0 5px; display: inline-block; color: #000; content: ">"; }
.waylink ol li:last-child a { color: #222; }
.waylink ol li:last-child a:after { content: ""; }

/* contentMain */
.contentMain { position: relative; padding: 50px 0; }

/* sideNav */
#sideNav {position: relative;margin: 0 0 50px;text-align: right;z-index: 2;margin-top: -115px;}
#sideNav #sideBtn {position: relative;overflow: hidden;padding: 10px 20px;width: 260px;background: #fff;border: 1px rgb(24 40 54 / 51%) solid;display: inline-block;color: #000;z-index: 2;}
#sideNav #sideBtn:before {position: absolute;width: 100%;height: 100%;background: #58b6aa;top: 0;left: 0;transform: translateX(-140%) skewX(63deg);transition: .4s cubic-bezier(.23,1,.32,1);content: "";}
#sideNav #sideBtn font { position: relative; z-index: 1; }
#sideNav #sideBtn i { position: absolute; top: calc((100% - 8px) / 2); right: 20px; z-index: 2; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; -webkit-transform: rotate(0); transform: rotate(0); }
#sideNav #sideBtn[data-type="2"]:before { -webkit-transform: translateX(0) skewX(0); transform: translateX(0) skewX(0); }
#sideNav #sideBtn[data-type="2"] font { color: #fff; }
#sideNav #sideBtn[data-type="2"] i { color: #fff; -webkit-transform: rotate(180deg); transform: rotate(180deg); }
#sideNav >ul {overflow: hidden;position: absolute;width: 300px;height: 0;background: #0b1c2b;border: 1px #4d4d4d solid;top: 0;right: 0;z-index: 1;}
#sideNav >ul.open { padding: 5px 0; height: auto; top: 52px; }
#sideNav >ul >li { position: relative; overflow: hidden; opacity: .4; }
#sideNav >ul >li h3 { position: relative; background: #222; z-index: 2; }
#sideNav ul li b[data-action="sideOpen"] { position: absolute; padding: 5px 20px; display: block; color: #fff; right: 0; top: 0; cursor: pointer; }
#sideNav ul li b[data-action="sideOpen"] i:before { content: "\f067"; }
#sideNav ul a { padding: 7px 53px 7px 20px; display: block; color: #fff; }
#sideNav >ul >li >ul.subUL { position: absolute; background: #3d3d3d; border: #454545 solid; border-width: 1px 0; bottom: 100px; -webkit-transition-duration: .2s; transition-duration: .2s; opacity: 0; z-index: 1; }
#sideNav ul .subULHead b[data-action="sideOpen"] { display: none; }
#sideNav ul .subULHead a { padding: 7px 20px; }
#sideNav ul .sub2ULHead a { padding: 2px 37px; color: #7184ac; }
#sideNav >ul >li.action { opacity: 1; }
#sideNav >ul >li.openlist { border-bottom: 1px #0c0c0c solid; opacity: 1; }
#sideNav >ul >li.openlist h3 a { border-bottom: 1px #251e1e solid; }
#sideNav >ul >li.openlist h3 b i:before { content: "\f068"; }
#sideNav >ul >li.openlist >ul.subUL { position: relative; bottom: 0; opacity: 1; }

/* artlsit */
#artlsit ul li { overflow: hidden; border-bottom: 1px #ddd solid; }
#artlsit ul li:last-child { border-bottom-color: transparent; }
#artlsit ul li >div { float: right; width: 350px; }
#artlsit ul li .img { overflow: hidden; }
#artlsit ul li .img a.photo { -webkit-transform: translate(0) scale(1); transform: translate(0) scale(1); }
#artlsit ul li .info { padding: 30px; width: calc(100% - 410px); }
#artlsit ul li .info .cate a , #artlsit ul li .info .cate font , #content .articlebar font {padding: 2px 15px;background: #58b6aa;display: inline-block;font-size: 14px;color: #fff;}
#artlsit ul li .info h3 { margin: 25px 0 10px; }
#artlsit ul li .info h3 a {height: 47px;font-weight: 400;font-size: 30px;color: #000;-webkit-line-clamp: 1;}
#artlsit ul li .info article a { height: 60px; font-weight: 100; color: #484848; -webkit-line-clamp: 2; }

/* content */
#content .articlebar { margin: -50px 0 30px ; }

/* faqList */
#faqList li { margin-bottom: 10px; }
#faqList li .title { position: relative; padding: 10px 65px 10px 25px; background: #e8e8e8; display: block; }
#faqList li .title font { color: #181818; }
#faqList li .title span { position: absolute; width: 16px; height: 16px; display: block; top: calc((100% - 16px) / 2); right: 25px; }
#faqList li .title span:before , #faqList li .title span:after { width: 16px; height: 1px; background: #696969; display: block; content: ""; -webkit-transform: translateY(9px); transform: translateY(9px); }
#faqList li .title span:after { -webkit-transform: translateY(8px) rotate(90deg); transform: translateY(8px) rotate(90deg); }
#faqList li .info { padding: 15px 25px; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }
#faqList li.current .title {background: #58b6aa;}
#faqList li.current .title font { color: #fff; }
#faqList li.current .title span:after { -webkit-transition-duration: .2s; transition-duration: .2s; -webkit-transform: translateY(8px) rotate(180deg); transform: translateY(180deg) rotate(0); }

/* pagenav */
#pagenav { overflow: hidden; margin: 30px 0 0; text-align: center; }
#pagenav a , #pagenav strong { width: 40px; height: 40px; display: inline-block; text-align: center; line-height: 37px; font-size: 18px; color: #111; vertical-align: middle; }
#pagenav a { opacity: .5; }
#pagenav p[class^="page-"] { float: left; width: 50%; }
#pagenav p[class^="page-"] a { padding: 0 10px; width: auto; height: auto; display: block; text-align: left; }
#pagenav p[class^="page-"] a i { margin: 0 5px 0 0; }
#pagenav p.page-next { float: right; }
#pagenav p.page-next a { text-align: right; }
#pagenav p.page-next a i { margin: 0 0 0 5px; }

/* pictureBox */
#pictureBox {margin-bottom: 0;display: none;}
#pictureBox .item { position: relative; }
#pictureBox .item a.photo { margin-right: 1px; }
#pictureBox .item h3 { position: absolute; padding: 5px 20px; width: calc(100% - 41px); background: rgba(0, 0, 0, .7); left: 0; bottom: 0; }
#pictureBox .item h3 a { height: 30px; color: #fff; text-align: center; -webkit-line-clamp: 1; }

/* form1 */
#form1 { font-size: 0; }
#form1 p { margin: 10px 20px; width: calc(100% - 40px); display: inline-block; vertical-align: text-bottom; }
#form1 p.col-2 { width: calc(50% - 40px); }
#form1 p.col-3 { width: calc((100% / 3) - 40px); }
#form1 p.col-4 { width: calc(25% - 40px); }
#form1 p label { margin-bottom: 5px; display: block; color: #252647; }
#form1 p label b { margin-left: 5px; color: #ff575f; }
#form1 p input , #form1 select , #form1 textarea { padding: 5px 15px; width: calc(100% - 34px); border: 1px #adadad solid; display: block; }
#form1 p select { padding: 10px 15px; width: 100%; }
#form1 p input#Checknum { margin-right: 10px; width: 60px; display: inline-block; }
#form1 p.send { text-align: right; }

@media screen and (min-width: 1281px) {
	#sideNav #sideBtn:hover:before { -webkit-transform: translateX(0) skewX(0); transform: translateX(0) skewX(0); }
	#sideNav #sideBtn:hover font , #sideNav #sideBtn:hover i { color: #fff; }
	#sideNav >ul >li:hover { opacity: 1; }
	#artlsit ul li:hover .img a.photo { -webkit-transform: translate(0) scale(1.2); transform: translate(0) scale(1.2); }
	#artlsit ul li:hover .img a.photo img { background: rgba(71, 70, 70, .6); }
	#artlsit ul li .info .cate a:hover , #artlsit ul li .info h3 a:hover {opacity: .6;}
	#faqList li:hover .title {background: #58b6aa;}
	#faqList li:hover .title font { color: #fff; }
	#pagenav a:hover { opacity: 1; }
}
@media screen and (max-width: 1160px){
	.wrap{
    margin-top: 0;
}
}
@media screen and (max-width: 980px) {
	#form1 p.col-2 , #form1 p.col-3 { width: calc(100% - 40px); }
	#form1 p.col-4 { width: calc(50% - 40px); }
	#form1 p.send { text-align: center; }
	#sbanner a img{
    height: 200px;
}
}
@media screen and (max-width: 768px) {
	#artlsit ul li >div { width: 250px; }
	#artlsit ul li .info { padding: 20px; width: calc(100% - 290px); }
	#artlsit ul li .info h3 { margin: 10px 0; }
	#artlsit ul li .info h3 a { height: 40px; font-size: 22px; }
	#artlsit ul li .info article a { height: 30px; -webkit-line-clamp: 1; }
}
@media screen and (max-width: 640px) {
	.contentMain{
    padding: 30px 0;
}
	#artlsit ul li { padding: 10px 0; }
	#artlsit ul li >div , #artlsit ul li .info { position: relative; margin: 15px auto; float: none; padding: 0; width: 80%; }
	#artlsit ul li .info .cate { position: absolute; top: -43px; left: 0; }
	#artlsit ul li .info .cate a { background: #424242; }
	#form1 p.col-4 { width: calc(100% - 40px); }
	#sideNav{
	    margin-top: -90px;
	}
	#sideNav #sideBtn{
	    width: 150px;
	}
	#sideNav >ul{
		width: 190px;
	}
}
@media screen and (max-width: 450px) {
	#artlsit ul li >div , #artlsit ul li .info { width: 90%; }
}