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

/* sbanner */
#sbanner {position: relative;z-index: 1;}
#sbanner a { position: relative; z-index: 1; }
#sbanner:after {position: absolute;width: 100%;height: 100%;background: hsl(0deg 0% 2% / 19%);display: block;top: 0;left: 0;z-index: 2;content: "";}

.webBox .wrapper{
    background-color: #fbfbfb;
}
/* wrap */
.wrap  {position: relative;z-index: 2;width: 80%;margin: 60px auto;}
.wrap h1 {line-height: 150%;text-align: center;font-weight: 100;letter-spacing: 3.5px;font-size: 25px;margin: 0 0 40px;padding: 0 0 30px 0;color: #040404;border-bottom: 1px solid #d2d2d2;}

/* waylink */
.waylink ol {margin-bottom: 20px;font-size: 0;display: none;}
.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: 20px 0 50px 0;}

/* sideNav */
#sideNav {position: relative;margin: 0 0 50px;text-align: right;z-index: 2;display: none;}
#sideNav #sideBtn {position: relative;overflow: hidden;padding: 10px 20px;width: 260px;background: #fff;border: 1px #000 solid;display: inline-block;color: #000;z-index: 2;}
#sideNav #sideBtn:before { position: absolute; width: 100%; height: 100%; background: #000; 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: #222; 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: #111; 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: 100; 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: #181818; }
#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;background: url(/images/34/left-arrow.png);background-repeat: no-repeat;background-size: 10px;background-position: 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;background: url(/images/34/right-arrow.png);background-repeat: no-repeat;background-size: 10px;background-position: 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: #181818; }
	#faqList li:hover .title font { color: #fff; }
	#pagenav a:hover { opacity: 1; }
	header #mbMenu{border-right: 0px solid rgb(167 167 167 / 71%);right: 72px;width: 40%;margin-left: 0px;top: 30px;height: auto;}
	header #mbMenu .menuBox nav >ul{display: flex;flex-direction: row;height: auto;justify-content: flex-end;}
	header #mbMenu .menuBox nav >ul >li{width: auto;margin: 20px 20px 20px 0px;}
}
@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; }
	#pagenav a {opacity: .8;}
}
@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) {
	#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); }
	.wrap  {width: 85%;margin: 30px auto;}
	#pagenav p[class^="page-"] {float: left;width: 100%;}
	#pagenav .page-prev a img, #pagenav .page-next a img{height: 50px;}
}
@media screen and (max-width: 450px) {
	#artlsit ul li >div , #artlsit ul li .info { width: 90%; }
}