body { background: url(/images/22/footer_bg.jpg) 50%; }

#sub-banner a { background: no-repeat 50% / cover; display: block; }
#sub-banner img { width: 100%; }

.inside { overflow: hidden; margin: 100px auto; width: 90%; }

.main-article { float: left; width: calc(100% - 370px); }

.bigwidth .main-article { width: 100%; }

/* waylink */
.waylink { margin-top: -80px; }
.waylink .inside { margin: 0 auto; }
.waylink .side-title { overflow: hidden; position: relative; padding: 30px 40px; width: 170px; height: 180px; background: url(/images/22/pagetitle_bg.jpg) no-repeat 50% / cover; display: inline-table; }
.waylink .side-title:after { position: absolute; width: calc(100% - 22px); height: calc(100% - 22px); border: 1px solid #7b6341; left: 10px; top: 10px; content: ""; }
.waylink .side-title h2 { display: table-cell; font-weight: 400; font-size: 16px; font-family: 'Oswald',sans-serif; color: #8a7763; vertical-align: middle; }
.waylink .side-title h2 b { margin-top: 10px; display: block; font-family: "微軟正黑體","蘋果儷中黑","Lucida Grande","Arial","Arial Narrow"; line-height: 120%; font-weight: 400; font-size: 26px; color: #a99b80; }
.waylink .side-title svg { position: absolute; width: 23px; height: 23px; top: 5px; right: 5px; z-index: 5; }

polyline { stroke-width: 1; stroke: #785141; 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 65px 40px; padding: 0; display: inline-block; text-align: right; vertical-align: bottom; }
.waylink ol li { position: relative; padding-left: 25px; display: inline-block; color: #a3a3a3; vertical-align: top; }
.waylink ol li:after { position: absolute; color: #737373; top: 0; left: 8px; content: "/"; }
.waylink ol li:first-child { padding-left: 0; }
.waylink ol li:first-child:after { display: none; }
.waylink ol li a { padding: 0 15px; font-weight: 400; font-size: 15px; color: #a3a3a3; }
.waylink ol li:last-child a { color: #989898; }

/* main-article */
.main-article .pagetitle { margin-bottom: 50px; line-height: 100%; font-weight: 400; color: #a7a7a7; }
.main-article #describe { font-size: 15px; color: #e8e8e8; }

/* side-nav */
#side-nav { float: right; width: 290px; }
#side-nav #contact-nav , #contact-extra { margin-top: 50px; }
#side-nav #contact-nav h3 , #category-nav >h3 , #contact-extra >h3 { margin-bottom: 20px; font-size: 16px; line-height: 110%; color: #c5c5c5; }
#side-nav #contact-nav h3 strong , #contact-extra h3 strong { font-size: 20px; font-weight: 400; line-height: 110%; }
#side-nav .Cate >li h3 , #side-nav .Cate >li .subUL li .subULHead , #contact-nav ul li , #contact-extra ul li { overflow: hidden; position: relative; border-bottom: 1px solid #444; }
#contact-extra ul li { padding: 15px 0; color: #fff; }
#side-nav .Cate >li h3 , #side-nav .Cate >li .subUL li .subULHead p { width: calc(100% - 25px); }
#side-nav .Cate >li >h3 { width: 100%; }
#side-nav .Cate >li h3 span { margin-right: 8px; font-weight: 700; font-size: 20px; color: #5a5a5a; vertical-align: bottom; }
#side-nav .Cate >li h3 b , #side-nav .Cate >li .subUL li .subULHead b { position: absolute; width: 50px; height: 53px; display: block; text-align: center; line-height: 53px; font-weight: 700; font-size: 20px; color: #6d6d6d; right: 0; top: 0; cursor: pointer; }
#side-nav .Cate >li h3 a , #side-nav .Cate >li .subUL li .subULHead p a , #side-nav .Cate >li .subUL li .sub2UL li .sub2ULHead p a , #contact-nav ul li a , #contact-extra ul li a { padding: 15px 0; }
#side-nav .Cate li a , #contact-nav ul li a , #contact-extra ul li a { font-size: 15px; display: block; color: #929292; transition: all linear .2s; }
#contact-extra ul li a { padding: 0; display: inline-block; }
#side-nav .Cate li.action a , #side-nav .Cate >li .subUL li.action .subULHead p a { color: #fff; }
#side-nav .Cate li ul { overflow: hidden; display: none; }
#side-nav .Cate li.action >ul { display: block; }
#side-nav .Cate >li .subUL li .subULHead p a { padding-left: 20px; color: #929292; }
#side-nav .Cate >li .subUL li .subULHead b { color: #d3d3d3; }
#side-nav .Cate >li .subUL li .sub2UL li .sub2ULHead p a { padding-left: 35px; border-bottom: 1px solid #444; color: gray; }
#side-nav .Cate >li .subUL li .sub2UL li.action .sub2ULHead p a { background: #ededed; }
#ssbanner-list .bxslider div a { width: 100%; height: 100%; background: #f6fcfd no-repeat 50% / contain; display: block; transition: all ease-in-out .3s; }
#side-nav #contact-nav ul li a { text-align: left; }
#side-nav #contact-nav ul li a i { margin-right: 5px; }

/* community */
#community { margin: 50px 0; }
#community li { margin: 0 5px 5px 0; float: left; line-height: 0; }

@media screen and (max-width:1440px) {
	.waylink .side-title { width: 130px; height: 120px; }
	.waylink .side-title h2 { font-size: 14px; }
	.waylink .side-title h2 b { margin-top: 10px; font-size: 20px; }
	.waylink ol { margin: 10px auto 35px; }
}
@media screen and (max-width:1366px) {
	.inside { width: 90%; }
}
@media screen and (min-width:1025px) {
	#sub-banner a { background-attachment: fixed; }
	#side-nav .Cate li a:hover , #contact-nav ul li a:hover , #contact-extra ul li a:hover , #side-nav .Cate >li .subUL li .subULHead p a:hover { color: #fff; }
}
@media screen and (max-width:1024px) {
	.main-article , #side-nav { width: 100%; margin-top: 80px; }
	#fb-wrap , #g-map , #youtube { margin: 5px auto; width: 300px; text-align: center; }
	#sub-banner { margin-top: 88px; }
	.waylink .side-title { margin: 0 auto; padding: 30px 40px; width: 180px; height: 80px; display: table; }
	.waylink ol { display: block; text-align: center; }
	.waylink ol li a { padding: 0; }
	#ssbanner .bigname h2 { color: #b5b5b5; }
	#ssbanner .bigname p { color: #ecd9c1; }
}
@media screen and (max-width:640px) {
	.inside { margin: 20px auto; }
	.waylink ol li , .waylink ol li a , .waylink ol li .h3 , .waylink ol li:after { font-size: 8pt; }
	#sub-banner { margin-top: 69px; }
	.waylink .side-title { padding: 20px 30px; }
	.waylink .side-title:after { width: calc(100% - 12px); height: calc(100% - 12px); left: 5px; top: 5px; }
	.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: -50px; }
}
@media screen and (max-width:480px) {
	.main-article .pagetitle { margin-bottom: 20px; }
	#sub-banner img { padding: 30px 0; }
}