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

#InnerpageTxt { background-color: #0971f2; padding: 160px 0px; }
#InnerpageTxt .workframe p { padding: 0px 160px 50px; font-size: 42px; line-height: 1.3; text-align: center; font-family: 'Poppins', sans-serif; }
#InnerpageTxt .workframe .contact-btn { text-align: center; }
#InnerpageTxt .workframe .contact-btn a { display: inline-block; color: #fff; transition: ease .3s; padding: 21px 48px 19px; border: 2px solid #fff; box-sizing: border-box; font-size: 16px; font-family: 'Poppins', sans-serif; letter-spacing: .8px; }
#InnerpageTxt .workframe .contact-btn a:hover { background-color: #fff; color: #262626; }

#side-nav ul.Cate { margin-top: 5px; }

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

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

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

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

#side-nav { float: right; width: 290px; }
#side-nav .outside-set h2, #category-nav>h3 { font-family: 'Poppins', sans-serif; }
#category-nav>h3 { padding: 20px 0px 0px; font-size: 1.5em; }

.waylink .inside { margin: 0 auto; }
.waylink .side-title { background-image: url(/images/22/pagetitle_bg.jpg); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; width: 170px; height: 180px; padding: 30px 40px; display: inline-table; overflow: hidden; position: relative; }
.waylink .side-title:after { content: ''; width: calc(100% - 22px); height: calc(100% - 22px); border: 1px solid #7b6341; position: absolute; left: 10px; top: 10px; }
.waylink .side-title h2 { color: #8a7763; 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: #a99b80; margin-top: 10px; font-family: "微軟正黑體", "蘋果儷中黑", "Lucida Grande", "Arial", "Arial Narrow"; line-height: 120%; }
.waylink .side-title svg { position: absolute; top: 5px; right: 5px; width: 23px; height: 23px; 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; }

@-webkit-keyframes ani_svgShowLine { to { stroke-dashoffset: 0; } }
@keyframes ani_svgShowLine { to { stroke-dashoffset: 0; } }

.waylink ol { margin: 60px 0px 30px; padding: 0; text-align: right; display: inline-block; vertical-align: bottom; width: 100%; box-sizing: border-box; }
.waylink ol li { display: inline-block; color: #888; vertical-align: top; position: relative; padding-left: 25px; }
.waylink ol li:after { content: '/'; position: absolute; color: #737373; 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: #888; font-weight: 400; font-size: 15px; padding: 0 15px; }
.waylink ol li:last-child a, .waylink ol li:last-child { color: #bbbaba; }

.main-article .pagetitle { font-family: 'Poppins', sans-serif; line-height: 100%; color: #fff; margin-bottom: 50px; font-weight: 400; position: relative; }
.main-article .pagetitle::after { content: ""; display: inline-block; width: 120px; height: 2px; background-color: #fff; margin-left: 30px; vertical-align: middle; }
.main-article #describe { color: #e8e8e8; font-size: 15px; }

#side-nav #contact-nav, #contact-extra { margin-top: 50px; }
#side-nav #contact-nav h3, #contact-extra>h3 { font-size: 16px; line-height: 110%; color: #c5c5c5; margin-bottom: 20px; }
#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 { color: #888; margin-right: 8px; vertical-align: bottom; font-weight: 700; font-size: 20px; }
#side-nav .Cate>li h3 b, #side-nav .Cate>li .subUL li .subULHead b { color: #888; font-weight: 700; font-size: 20px; position: absolute; right: 0; top: 0; cursor: pointer; display: block; width: 50px; height: 53px; text-align: center; line-height: 53px; }
#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: #888; transition: all linear .2s; }
#contact-extra ul li a { padding: 0; display: inline-block; }
#side-nav .Cate li a:hover, #side-nav .Cate li.action a, #contact-nav ul li a:hover, #contact-extra ul li a:hover { 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 p a:hover, #side-nav .Cate>li .subUL li.action .subULHead p a { color: #fff; }
#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: #fff; }
#side-nav .Cate>li .subUL li .sub2UL li.action .sub2ULHead p a { background: #9c9c9c94; }

#ssbanner { margin-top: 15px; }
#ssbanner .bigname { display: flex; }
#ssbanner .bigname p { margin-left: 5px; }
#ssbanner .bxslider>div { padding: 5px 0px; }
#ssbanner .bxslider div a { background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; display: block; transition: all ease-in-out .3s; width: 100%; height: 100%; }
#side-nav #contact-nav ul li a { text-align: left; }
#side-nav #contact-nav ul li a i { margin-right: 5px; }

@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 { font-size: 20px; margin-top: 10px; }
}
@media screen and (max-width: 1366px) {
	.inside { width: 90%; }
}
@media screen and (min-width: 1025px) {
	#sub-banner a { background-attachment: fixed; }
}
@media screen and (max-width: 1024px) {
	.main-article { width: 100%; }
	#side-nav { width: 100%; margin-top: 80px; }
	#fb-wrap, #g-map, #youtube { width: 300px; margin: 5px auto; text-align: center; }
	#sub-banner { margin-top: 88px; }
	.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; }
	#ssbanner .bigname h2 { color: #b5b5b5; }
	#ssbanner .bigname p { color: #ecd9c1; }
	#ssbanner .bxslider { display: flex; flex-wrap: wrap; }
	#ssbanner .bxslider>div { width: 50%; box-sizing: border-box; padding: 5px; }
	#InnerpageTxt .workframe p { padding: 0px 80px 50px; }
}
@media screen and (max-width: 768px) {
	#InnerpageTxt { padding: 80px 0px; }
	#InnerpageTxt .workframe p { padding: 0px 40px 50px; font-size: 36px; }
	#InnerpageTxt .workframe .contact-btn a { padding: 16px 44px 16px; }
}
@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 { 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 ol { margin: 30px 0px 30px; }
}
@media screen and (max-width: 580px) {
	#InnerpageTxt .workframe p { padding: 0px 30px 50px; font-size: 28px; }
}
@media screen and (max-width: 480px) {
	.main-article .pagetitle { margin-bottom: 20px; }
	#sub-banner img { padding: 30px 0; }
}
@media screen and (max-width: 420px) {
	#InnerpageTxt .workframe p { font-size: 24px; }
}