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

/* header */
header { position: static; background: #fff; border-bottom: 1px #ccc solid; }
header #menubtn span { background: #454545; }
header #webmenu .menu_box >ul >li >p a { color: #252525; }
header.headerfixed { position: fixed; }

/* banner_layout */
#banner_layout .waylink { position: absolute; width: 100%; top: 0; right: 0; z-index: 2; }
#banner_layout .waylink ol { padding: 20px 0; text-align: right; }
#banner_layout .waylink ol li , #banner_layout .waylink ol li a { display: inline-block; line-height: 27px; letter-spacing: 3px; color: #fff; }
#banner_layout .waylink ol li:after { margin: 0 10px; display: inline-block; line-height: 27px; font-weight: 100; font-size: 12px; content: "/"; }
#banner_layout .waylink ol li:last-child:after { margin: 0; content: ""; }
#banner_layout #sub_banner:before { position: absolute; width: 100%; height: 100%; background: rgb(0 0 0 / .3); display: block; top: 0; right: 0; z-index: 1; content: ""; }
#banner_layout #sub_banner a { display: block; }
#banner_layout #sub_banner a img { height: 30vw; }

/* side_box */
#side_box { width: 100%; background: #f3f3f3; z-index: 998; }
#show_side_nav { display: block; text-align: center; line-height: 60px; font-weight: 500; font-size: 20px; color: #fff; }
#show_side_nav:after { margin: 4px 20px; width: 10px; height: 10px; border: solid #fff; border-width: 0 0 1px 1px; display: inline-block; transform: rotate(-45deg); content: ""; }
#side_box ul.cate >li#close_layout_nav { padding-top: 30px; }
#side_box ul.cate >li#close_layout_nav a { position: relative; margin: 0 0 0 auto; width: 25px; height: 20px; }
#side_box ul.cate >li#close_layout_nav a:before , #close_layout_nav a:after { position: absolute; width: 100%; height: 2px; background: #454545; display: block; top: 0; right: 0; top: 50%; -webkit-transform: rotate(45deg); transform: rotate(45deg); content: ""; }
#side_box ul.cate >li#close_layout_nav a:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
#side_box ul.cate { text-align: center; }

/* content-wrap */
#content-wrap { padding: 5vw 0; min-height: 300px; }
#content-wrap .layout_title { margin-bottom: 20px; padding-bottom: 5px; border-bottom: 2px #000 solid; }
#content-wrap .layout_title h2 { font-weight: 400; font-size: 25px; color: #000; }
#content-wrap .layout_title .time { color: #959595; }
#content-wrap .quote_box { font-weight: 300; color: #767676; }
#content-wrap .quote_box a { display: inline-block; font-weight: 300; line-height: 19px; color: #053769; vertical-align: text-bottom; }
#content-wrap .description_box * { vertical-align: bottom; }

/* article_list */
.article_list { font-size: 0; }
.article_list .wall-column { width: calc(100% / 3); display: inline-block; vertical-align: top; }
.article_list .wall-column .relat_box { margin: 0 20px 50px; }
.article_list .wall-column .relat_box .img_box_cover:before { position: absolute; width: 100%; height: 100%; background: #000; display: block; top: 0; left: 0; z-index: 2; opacity: .1; content: ""; }
.article_list .wall-column .relat_box .img_box_cover img { height: 450px; }
.article_list .wall-column:nth-child(2) .relat_box .img_box_cover img { height: 500px; }
.article_list .wall-column .relat_box .info_box h4 { margin: 30px 0 10px; height: auto; max-height: 62px; line-height: 130%; font-weight: 400; font-size: 24px; -webkit-line-clamp: 2; }
.article_list .wall-column .relat_box .info_box article { height: 50px; line-height: 150%; font-weight: 300; font-size: 17px; color: #555; -webkit-line-clamp: 2; }

/* news_list */
.news_list ul li { margin: 20px 15px 20px 0; width: calc((100% - 30px) / 2); display: inline-block; }
.news_list ul li:nth-child(2n) { margin: 20px 0 20px 15px; }
.news_list ul li .img_box_cover , #newsBox ul li .img_box_cover img { height: 200px; }
.news_list ul li .info_box { margin-top: 15px; }
.news_list ul li .info_box h4 { height: 33px; font-weight: 500; font-size: 21px; }
.news_list ul li .info_box article { margin: 10px 0 0; color: #111; }
.news_list ul li .info_box .time { color: #8f8f8f; }

/* faq_list */
.faq_list ul { margin-bottom: 50px; }
.faq_list ul li .title { position: relative; padding: 20px 45px 20px 5px; border-bottom: 1px #d7d7d7 solid; display: block; font-size: 0; }
.faq_list ul li .title label { padding: 0 0 0 10px; width: 70px; display: inline-block; color: #1f1f1f; }
.faq_list ul li .title font { width: calc(100% - 80px); display: inline-block; font-size: 18px; color: #1f1f1f; }
.faq_list ul li .title span { position: absolute; width: 16px; height: 16px; display: block; top: calc((100% - 16px) / 2); right: 5px; }
.faq_list ul li .title span:before , .faq_list ul li .title span:after { width: 16px; height: 1px; background: #696969; display: block; content: ""; -webkit-transform: translateY(9px); transform: translateY(9px); }
.faq_list ul li .title span:after { -webkit-transform: translateY(8px) rotate(90deg); transform: translateY(8px) rotate(90deg); }
.faq_list ul li .info { padding: 15px 35px 15px 85px; border-bottom: 1px #d7d7d7 solid; font-size: 14px; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }
.faq_list ul li.current .title span:after { -webkit-transition-duration: .2s; transition-duration: .2s; -webkit-transform: translateY(8px) rotate(180deg); transform: translateY(180deg) rotate(0); }

/* album_list */
.album_list { -moz-column-count: 4; -moz-column-gap: 5px; -webkit-column-count: 4; -webkit-column-gap: 5px; column-count: 4; column-gap: 5px; }
.album_list .list_box { margin-bottom: 5px; }
.album_list .list_box a.img_box_cover { width: 100%; border: 1px #f0f0f0 solid; }

/* pagenav */
#pagenav { overflow: hidden; text-align: center; font-size: 0; }
#pagenav a , #pagenav strong { margin: 0 0 0 -1px; width: 37px; height: 36px; border: 1px #f0f0f0 solid; display: inline-block; text-align: center; line-height: 36px; color: #000; }
#pagenav strong { background: #494949; color: #fff; }
#pagenav a:first-child , #pagenav a:last-child { margin: 0 5px; }
#pagenav a:first-child i.fa-angle-double-left:before , #pagenav a:last-child i.fa-angle-double-right:before { position: relative; width: 10px; height: 10px; border: solid #8c8c8c; border-width: 1px 0 0 1px; display: block; left: 3px; transform: rotate(-45deg); content: ""; }
#pagenav a:last-child i.fa-angle-double-right:before { border-width: 1px 1px 0 0; left: -2px; transform: rotate(45deg); }
#pagenav a[class^="page-"] { margin: 30px 5px 0; float: left; width: calc(50% - 10px); height: auto; border: 0; display: block; }
#pagenav a[class^="page-"] font { width: calc(100% - 22px); display: inline-block; }
#pagenav a[class^="page-"] i { margin: 0 10px 0 0; display: inline-block; }
#pagenav a.page-next { float: right; text-align: right; }
#pagenav a.page-next font { text-align: right; }
#pagenav a.page-next i { margin: 0 0 0 10px; }

/* form_box */
.form_box { margin: 20px auto 30px; width: 800px; }
.form_box .m_title .description_box { margin: 30px 0 10px; }
.form_box .m_title font { display: inline-block; line-height: 100%; font-weight: 700; font-size: 23px; color: #585858; vertical-align: bottom; }
.form_box .m_title font.note { margin-left: 25px; letter-spacing: 2px; font-weight: 500; font-size: 16px; }

/* input_list */
.input_list p { position: relative; border-bottom: 1px #e8e8e8 solid; }
.input_list p:last-child { border-bottom-color: transparent; }
.input_list p:before { position: absolute; width: 190px; height: 100%; background: #f1f1f1; display: block; top: 0; left: 0; content: ""; }
.input_list p >label { position: relative; margin-right: 25px; padding: 15px 25px; width: 140px; background: #f1f1f1; display: inline-block; font-size: 18px; color: #686868; vertical-align: top; z-index: 2; }
.input_list p >font { position: relative; padding: 10px 0 11px; width: calc(100% - 240px); display: inline-block; vertical-align: top; }
.input_list p >font input , .input_list p >font textarea { position: relative; padding: 5px 20px; width: calc(100% - 42px); background: none; border: 1px #d2d2d2 solid; z-index: 2; }
.input_list p >font ::-webkit-input-placeholder { color: #999; }
.input_list p >font ::-moz-placeholder { color: #999; }
.input_list p >font :-ms-input-placeholder { color: #999; }
.input_list p >font :-moz-placeholder { color: #999; }
.input_list p >font select { padding: 10px 20px; width: 100%; border: 1px #d2d2d2 solid; color: #000; }
.input_list p.checknum >font input { margin-right: 5px; width: calc(100% - 97px); }

/* send_box */
.send_box { margin: 55px 0 0; }
.send_box p { margin-bottom: 25px; text-align: center; }
.send_box p a.btn { position: relative; padding: 10px 30px; background: #696969; display: block; text-align: center; line-height: 170%; letter-spacing: 5px; font-weight: 100; font-size: 19px; color: #fff; }
.send_box p a.btn:before { position: absolute; width: calc(100% - 12px); height: calc(100% - 12px); border: 1px rgb(255 255 255 / .32) solid; top: 5px; left: 5px; content: ""; }

/* lodbg */
[data-action="loader"] { position: fixed; width: 100vw; height: 100vh; background: rgb(0 0 0 / .3); text-align: center; line-height: 100vh; top: 0; left: 0; opacity: 0; z-index: -1; }
[data-action="loader"] .loader-circle { width: 50px; height: 50px; border: 2px rgba(0, 0, 0, .6) solid; border-left-color: rgb(255 255 255 / .4); border-radius: 100%; display: inline-block; }
#lodbg { opacity: 1; z-index: 99999; }
#lodbg .loader-circle { -webkit-animation: circle infinite .75s linear; -moz-animation: circle infinite .75s linear; -o-animation: circle infinite .75s linear; animation: circle infinite .75s linear; }

/* community */
#community ul li.fbb .fb-like { margin: 0 0 0 -5px; display: inline-block; }
#community ul li.fbb .fb-share-button { margin: -15px 0 0 -6px; display: inline-block; }

@keyframes circle { 0%{ transform: rotate(0); } 100% { transform: rotate(360deg); } }
@-webkit-keyframes circle { 0%{ -webkit-transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); } }
@-moz-keyframes circle { 0%{ -webkit-transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); } }
@-o-keyframes circle { 0%{ -webkit-transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); } }

@media screen and (min-width: 1440px){
	#content-wrap .workframe { width: 1300px; }
	#banner_layout #sub_banner a img { height: 500px; }
}
@media screen and (min-width: 1281px){
	#show_side_nav , #side_box ul.cate >li#close_layout_nav  , #side_box ul.cate >li b[data-action="sideOpen"] { display: none; }
	#side_box ul.cate >li { position: relative; display: inline-block; }
	#side_box ul.cate >li h4 a { padding: 0 20px; line-height: 60px; font-weight: 500; font-size: 20px; color: #aaa; }
	#side_box ul.cate >li:hover h4 a , #side_box ul.cate >li.action h4 a { color: #004487; }
	#side_box ul.cate >li >.subUL { position: absolute; padding: 5px 0; width: 180px; background: #fff; box-shadow: 0 0 10px rgb(0 0 0 / .2); display: none; left: calc((100% - 180px) / 2); }
	#side_box ul.cate >li >.subUL >li { padding: 0 10px; }
	#side_box ul.cate >li >.subUL >li a { padding: 5px 0; display: block; line-height: 170%; color: #848484; }
	#side_box ul.cate >li >.subUL >li .sub2ULHead a { padding: 0 10px; color: #266a89; }
	.article_list .wall-column .relat_box:hover .img_box_cover:before { opacity: .4; }
}
@media screen and (max-width: 1280px){
	#banner_layout #sub_banner a img { height: 40vw; }
	#side_box { background: #004387; }
	#side_box .workframe { width: 100%; }
	#side_box ul.cate { overflow-y: scroll; position: absolute; width: 100%; height: 0; background: #fff; opacity: 0; }
	#side_box ul.cate[data-type="1"] { padding-bottom: 120px; height: calc(100vh - 251px); opacity: 1; }
	#side_box ul.cate >li { padding: 10px 30px; border-bottom: 1px #ededed solid; }
	#side_box ul.cate >li#close_layout_nav, #side_box ul.cate >li:last-child { border-bottom: 0; }
	#side_box ul.cate >li h4 , #side_box ul.cate li >div { position: relative; }
	#side_box ul.cate >li h4 a { font-size: 20px; }
	#side_box ul.cate >li a { margin-right: 33px; display: block; line-height: 170%; font-weight: 400; color: #464646; }
	#side_box ul.cate >li b { position: absolute; padding: 0 10px; top: calc((100% - 27px) / 2); right: 0; }
	#side_box ul.cate li ul { padding: 15px 0 15px 20px; display: none; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }
	#side_box ul.cate li .subULHead p a { font-size: 18px; color: #464646; }
	#side_box ul.cate li .sub2UL { margin: 5px 0 10px; padding: 10px 20px; background: #f1f1f1; }
	#side_box ul.cate li.action .subUL , #side_box ul.cate li.action  li.action .sub2UL { display: block; }
	#side_box ul.cate li.action >h4 a , #side_box ul.cate li.action >div a { color: #5188bf; }
	.article_list .wall-column .relat_box .img_box_cover img { height: 35vw; }
	.article_list .wall-column:nth-child(2) .relat_box .img_box_cover img { height: 40vw; }
	.album_list { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; }
}
@media screen and (max-width: 1024px){
	.article_list .wall-column .relat_box { margin: 0 10px 50px; }
	.form_box { width: 90%; }
}
@media screen and (max-width: 980px){
	.input_list p:before { width: 170px; }
	.input_list p >label { padding: 10px 15px; }
	.input_list p >font { width: calc(100% - 220px); }
}
@media screen and (max-width: 768px){
	#banner_layout #sub_banner a img { height: 350px; }
	.article_list .wall-column { width: 50%; }
	.article_list .wall-column .relat_box .img_box_cover img { height: 50vw; }
	.article_list .wall-column:nth-child(2) .relat_box .img_box_cover img { height: 55vw; }
	.news_list ul li { margin: 20px 5px 20px 0; width: calc((100% - 10px) / 2); }
	.news_list ul li:nth-child(2n) { margin: 20px 0 20px 5px; }
}
@media screen and (max-width: 640px){
	.album_list { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; }
	.input_list p { margin-bottom: 15px; border-bottom: 0; }
	.input_list p:before { display: none; }
	.input_list p >label { margin-right: 0; padding: 5px 0 0; width: 100%; background: none; }
	.input_list p >font { width: 100%; }
}
@media screen and (max-width: 550px){
	.article_list .wall-column { width: 100%; }
	.article_list .wall-column .relat_box .img_box_cover img { height: 250px; }
	.article_list .wall-column .relat_box .info_box h4 { margin: 15px 0 10px; }
	.news_list ul li , .news_list ul li:nth-child(2n) { margin: 20px 0; width: 100%; }
	.album_list { -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; }
}