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

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

/* banner_layout */
#banner_layout{
	margin-top: 70px;
}
#banner_layout .waylink {position: absolute;width: 100%;bottom: 0;right: 0;z-index: 2;}
#banner_layout .waylink ol {padding: 20px 0;text-align: left;}
#banner_layout .waylink ol li , #banner_layout .waylink ol li a {display: inline-block;line-height: 27px;letter-spacing: 3px;color: #7c7c7c;}
#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: auto;}

/* side_box */
#side_box {width: 100%;background: #f3f3f3;z-index: 998;display: none;}
#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: 1px #0000001f 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; }
#content-wrap .description_box h2{
    font-size: 20px;
    font-weight: 500;
    color: #404040;
    line-height: 200%;
    margin: 10px 0;
}
#content-wrap .description_box p{
    font-size: 17px;
    line-height: 200%;
    font-weight: 300;
}
/* 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 {
    display: flex;
    flex-wrap: wrap;
}
.news_list ul li {margin: 20px 15px 20px 0;width: calc((100% - 50px) / 3);display: flex;flex-direction: column;}
.news_list ul li:nth-child(2n) {}
.news_list ul li .img_box_cover , #newsBox ul li .img_box_cover img {height: 300px;object-fit: cover;}
.news_list ul li .info_box {margin-top: 15px;padding: 0 15px;border-left: #7e7e7e3d 1px solid;}
.news_list ul li .img_box_cover img{height: 100%;}
.news_list ul li .info_box h4 {height: 33px;font-weight: 500;font-size: 21px;color: #5e5e5e;}
.news_list ul li .info_box article {margin: 10px 0 0;color: #606060;font-weight: 300;}
.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: 20px;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;color: #818181;font-weight: 300;line-height: 180%;font-size: 18px;}
.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: auto;}
}
@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: #cf5252;}
	#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: 310px;object-position: 23% 50%;}
	#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;object-position: 13% 50%;}
	.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%; }
    #banner_layout .waylink ol{
        text-align: right;
        padding: 5px 0;
    }
    #banner_layout .waylink ol li, #banner_layout .waylink ol li a{
    	font-size: 12px;
    }
}
@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; }
    #banner_layout #sub_banner a img{height: 250px;}
}
@media screen and (max-width: 480px){
    #banner_layout #sub_banner a img{
        height: 260px;
        object-position: 11% 50%;
    }
    #banner_layout{
    margin-top: 35px;
}
}