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

/* waylink */
.waylink {padding: 15px 0;background: rgb(206, 169, 111);}
.waylink h1 {line-height: 170%;color: #ffffff;}
.waylink ol li {display: inline-block;color: #e0e0e0;}
.waylink ol li a {color: #ffffff;}
.waylink ol li:last-child a {color: #eaeaea;}
.waylink ol li:after { margin: 0 10px; content: "/"; }
.waylink ol li:last-child:after { content: ""; }

/* showSide */
#showSide { margin: 15px 15px 0; padding: 5px 15px; border: 1px #525252 solid; border-radius: 3px; display: none; color: #141414; }
#showSide i { margin-right: 5px;}

/* wrap */
.wrap {background: #ffffff;background-image: url(/images/31/wrapper-bg.jpg);background-position: 50% 0;background-repeat: no-repeat;}
.wrap .workframe { padding: 25px 0; font-size: 0; }
.wrap .rowInfo { position: relative; margin: 20px 15px; padding: 15px; background: #fff; box-shadow: 0 0 10px #e2e2e2; }
.wrap .row { display: inline-block; vertical-align: top; }
#socialMediaBox{
    display: none;
}
#extraBox{
    display: none;
}

/* main-article */
#main-article { width: calc(100% - 350px); }
#main-article ul.contentLists li { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px #e5e5e5 solid; font-size: 0; }
#main-article ul.contentLists li:last-child { border-bottom: 0; }
#main-article ul.contentLists li >div { width: 250px; display: inline-block; vertical-align: top; }
#main-article ul.contentLists li .info { margin: 0 30px; width: calc(100% - 310px); }
#main-article ul.contentLists li .info p.cate a ,
#main-article ul#faqLists li .info p.cate a {margin-top: 10px;padding: 2px 5px;background: #bb1923;border-radius: 2px;display: inline-block;color: #fff;}
#main-article ul.contentLists li .info p.cate font { margin-left: 10px; padding: 2px 5px; display: inline-block; }
#main-article ul.contentLists li .info h4 a { margin: 5px 0; height: 42px; font-weight: normal; font-size: 25px; color: #000; -webkit-line-clamp: 1; }
#main-article ul.contentLists li .info article { margin-bottom: 5px; height: 46px; color: #848484; -webkit-line-clamp: 2; }
#main-article ul.contentLists li .info p.more { text-align: right; }
#main-article ul.contentLists li .info p.more a { color: #474747; }
#main-article ul#faqLists li { margin: 0 20px; padding: 40px 20px; border-bottom: 1px #eee solid; }
#main-article ul#faqLists li h3 { font-size: 25px; color: #000; }
#main-article ul#faqLists li .info { margin: 20px 20px 0; }
#main-article ul#faqLists li .info article { margin-top: 10px; }
#main-article .article-info { margin-bottom: 10px; }
#main-article .article-info b  , #main-article .article-info b a { color: #7d7d7d; }
#main-article .contact_info { margin: 15px; }

/* form */
#main-article #form1 { max-width: 100%; }
#main-article #order .button { text-align: right; }
#main-article #order .button a { padding: 5px 15px; display: inline-block; background: #4a4949; border-radius: 3px; color: #fff; font-size: 16px; }
#main-article #order .button a.backP { margin-left: 20px; background: #3e5c9c; }

/* pagenav */
#pagenav { overflow: hidden; padding: 20px 0; text-align: center; }
#pagenav strong , #pagenav a { margin: 0 5px; width: 25px; height: 25px; border-radius: 50%; display: inline-block; line-height: 25px; text-align: center; color: #000; }
#pagenav strong , #pagenav a:hover {background: #cea96f;color: #fff;}
#pagenav p { float: left; width: calc(50% - 10px); text-align: left; }
#pagenav p.page-next { float: right; text-align: right; }
#pagenav p a { padding: 0 5px; width: auto; border-radius: inherit; text-align: left; }
#pagenav p.page-next a { text-align: right; }

/* contactBox */
#contactBox {overflow: hidden;background: url(/images/31/img-contactBg.jpg) #fff repeat-x -16px 0;display: none;}
#contactBox h3 { margin: 15px 0; text-align: center; font-size: 30px; color: #3c3c3c; }
#contactBox .infoList { font-size: 0; }
#contactBox .infoList >div { margin: 15px 0; width: 20%; display: inline-block; }
#contactBox .infoList >div a { padding: 0 10px; display: block; text-align: center; color: #696666; }
#contactBox .infoList >div a i { margin-bottom: 10px; display: block; font-size: 30px; }

/* side-nav */
#side-nav { width: 350px; }
#side-nav .rowInfo h3.sideTitle { font-size: 20px; color: #3c3c3c; }
#side-nav #categoryBox , #side-nav #pcategoryBox { padding: 15px 0; }
#side-nav #categoryBox h3.sideTitle , #side-nav #pcategoryBox h3.sideTitle { padding: 0 15px; }
#side-nav .rowInfo ul.cate { margin-top: 10px; }
#side-nav .rowInfo ul.cate >li h4 , #side-nav .rowInfo ul.cate >li ul li .subULHead { position: relative; }
#side-nav .rowInfo ul.cate >li a { padding: 12px 50px 12px 20px; display: block; color: #626262; }
#side-nav .rowInfo ul.cate >li.action >h4 a {background: #f7f7f7;}
#side-nav .rowInfo ul.cate >li ul { display: none; -webkit-transition: none; transition: none; }
#side-nav .rowInfo ul.cate >li.action ul { display: block; }
#side-nav .rowInfo ul.cate >li >ul a { padding-left: 40px; border-left: 2px transparent solid; }
#side-nav .rowInfo ul.cate >li >ul >li.action >div p a {background: #fdfdfd;border-left-color: #8dcad5;}
#side-nav .rowInfo ul.cate >li >ul >li >ul li a { padding-left: 60px; color: #2196F3; }
#side-nav .rowInfo ul.cate >li >ul >li >ul li.action a { font-style: italic; }
#side-nav .rowInfo ul.cate >li b[data-action="sideOpen"] { position: absolute; padding: 0 10px; top: 12px; right: 20px; }
#side-nav .rowInfo ul.slist li {padding: 5px;}
#side-nav .rowInfo ul.slist li a { color: #626262; }
#side-nav #socialMediaBox >div { overflow: hidden; margin: 10px 0; }
#side-nav #socialMediaBox >div iframe { width: 100%; }

/* side-nav SeoStarRating */
#side-nav #SeoStarRating { padding: 0 15px 25px; }

/* serchWarp */
#serchWarp .waylink {}
#serchWarp #serchBox ul { overflow: hidden; }
#serchWarp #serchBox ul li { margin: 15px; float: left; width: calc(25% - 30px); box-shadow: 0 0 10px #a9a9a9; }
#serchWarp #serchBox ul li a { position: relative; }
#serchWarp #serchBox ul li p { position: absolute; padding: 10px; width: calc(100% - 40px); background: rgba(72, 72, 72, .9); text-align: center; font-size: 18px; color: #fff; bottom: 10px; left: 10px; }

@media screen and (min-width: 981px) {
	#side-nav .rowInfo ul.cate li a:hover {background: #fbfbfb;}
}
@media screen and (max-width: 1280px) {
	#showSide { display: inline-block; }
	#main-article { width: 100%; }
	#side-nav {position: absolute;overflow-x: scroll;max-height: calc(100% - 105px);background: #fff;box-shadow: 0 0 10px #a5a5a5;top: 95px;left: -200%;z-index: 9;}
	#side-nav::-webkit-scrollbar { width: 0; height: 0; }
	#side-nav .rowInfo { box-shadow: none; }
	#serchWarp #serchBox ul li { width: calc((100% / 3) - 40px); }
}
@media screen and (max-width: 980px) {
	#main-article ul.contentLists li >div { width: 200px; }
	#main-article ul.contentLists li .info { width: calc(100% - 260px); }
	#main-article ul.contentLists li .info h4 a { height: 34px; font-size: 20px; }
	#contactBox .infoList { text-align: center; }
	#contactBox .infoList >div { margin: 15px; width: auto; }
	#serchWarp #serchBox ul li { width: calc(50% - 40px); }
	#sub-banner{    margin-top: 25px;}
}
@media screen and (max-width: 640px) {
	#main-article ul.contentLists li >div { margin: 0 auto 15px; width: 80%; display: block; }
	#main-article ul.contentLists li .info { margin: auto; width: 90%; }
	#serchWarp #serchBox ul li { margin: 15px auto; float: none; width: calc(90% - 40px); }
}
@media screen and (max-width: 480px) {
	.wrap .rowInfo { margin: 20px 0; }
	#side-nav { width: 100%; }
	#sub-banner {    margin-top: 40px;}
	.waylink h1 {    line-height: 145%;    font-size: 20px;}
}