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

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


/* 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: #2a2a2a;}
#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;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: 1vw 0;min-height: 300px;padding-bottom: 12em;}
#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 30px;}
.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: 400px;aspect-ratio: 1 / 1;}
.article_list .wall-column:nth-child(2) .relat_box .img_box_cover img {}
.article_list .wall-column .relat_box .info_box h4 {margin: 10px 0 10px;height: auto;max-height: 62px;line-height: 130%;font-weight: 400;font-size: 21px;-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; }
.webBox .wrapper {
    position: relative;
    z-index: 2;
    background-position: 50% 50%;
    background-image: url(/images/38/babg.jpg);
}
/* news_list */
.news_list ul{
    display: flex;
    flex-wrap: wrap;
}
.news_list ul li {margin: 6px 0;padding: 10px;width: calc((100% - 0px) / 4);display: flex;flex-direction: column;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
.news_list ul li:nth-child(2n) {}
.news_list ul li .img_box_cover , #newsBox ul li .img_box_cover img {height: 200px;}
.news_list ul li img{
    height: 100%;
}
.news_list ul li .info_box { margin-top: 15px; }
.news_list ul li .info_box h4 {height: 33px;font-weight: 500;font-size: 1.25em;}
.news_list ul li .info_box article {margin: 5px 0 0;color: #111;font-size: 0.9em;}
.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; }

.main-article .pagetitle{line-height: 100%;margin-bottom: 20px;border-left: 5px solid #c1c1c1;padding-left: 15px;margin-top: 5px;color: #535252;font-weight: 400;letter-spacing: 1.3px;font-size: 24px;}

/* 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; }


.waylink{margin-top:-80px}
.waylink .inside{margin:0 auto}
.waylink .side-title{background-image: url(/images/38/page_bg.png);background-repeat:no-repeat;background-position:50% 50%;background-size:cover;width: 220px;height: 130px;padding: 0px 30px;display:inline-table;overflow:hidden;position:relative;}
.waylink .side-title:after{content:'';width:calc(100% - 22px);height:calc(100% - 22px);border: 1px solid #c7c7c7;position:absolute;left:10px;top:10px;}
.waylink .side-title h2{color: #989898;font-weight:400;font-size:16px;font-family:'Oswald',sans-serif;display:table-cell;vertical-align:middle;}
.waylink .side-title h2 b{display:block;font-weight:400;font-size:26px;color: #5a5a5a;margin-top:10px;line-height:120%;font-family: "微軟正黑體","蘋果儷中黑","Lucida Grande","Arial","Arial Narrow";}
.waylink .side-title svg{position:absolute;top:5px;right:5px;width:23px;height:23px;z-index:5}
polyline{stroke-width:1;stroke: #a2a2a2;stroke-dasharray:150;stroke-dashoffset:150;-moz-animation:ani_svgShowLine 1s .2s linear forwards;-webkit-animation:ani_svgShowLine 1s .2s linear forwards;animation:ani_svgShowLine 1s .2s linear forwards;}
@keyframes
ani_svgShowLine {
to{stroke-dashoffset:0}
}
.waylink ol{margin: 10px auto 15px;padding:0;text-align: right;display: block;vertical-align:bottom;margin-bottom: 26px;padding-top: 17px;padding-bottom: 17px;border-bottom: 1px solid #cccccc;}
.waylink ol li{display:inline-block;color: #4a4a4a;vertical-align:top;position:relative;padding-left:25px;}
.waylink ol li:after{content:'/';position:absolute;color: #9e9e9e;top:0;left:8px;}
.waylink ol li:first-child{padding-left:0}
.waylink ol li:first-child:after{display:none}
.waylink ol li a{color: #4a4a4a;font-weight:400;font-size:15px;padding:0 15px;}
.waylink ol li:last-child a{color: #4a4a4a;}


@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: 1470px){
	.waylink .side-title{width:130px;height:120px}
.waylink .side-title h2{font-size:14px}
.waylink .side-title h2 b{font-size:20px;margin-top:10px}
.waylink ol{margin:10px auto 35px}
}
@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%; }
	.waylink .side-title{display:table;margin:0 auto;padding:30px 40px;width:180px;height:80px}
	.waylink ol{display:block;text-align:center}
	.waylink ol li a{padding:0}
}
@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%; }
	.waylink ol li,.waylink ol li a,.waylink ol li .h3,.waylink ol li:after{font-size:8pt}
	.waylink .side-title{padding: 0px 30px;}
	.waylink .side-title:after{left:5px;top:5px;width:calc(100% - 12px);height:calc(100% - 12px)}
	.waylink .side-title svg{width:18px;height:18px}
	.waylink .side-title h2{font-size:12px;line-height:120%}
	.waylink .side-title h2 b{font-size:18px;margin-top:5px}
	.waylink{margin-top: -20px;}
		
}
@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; }
}