@import url('/css/fontawesome-all.css');
@import url('/css/font-awesome.min.css');
@import url('/css/fontawesome.min.css');
@import url('/css/SeoJump.css');
@import url('/css/contentBuilder.css');

* { margin: 0; padding: 0; }
*:focus { outline: none; }

body { margin:0; }
body ::selection { background: #1e1d24; color: #fff; }
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: #1e1d24; }
body::-webkit-scrollbar-thumb { background: #696870; }
body::-webkit-scrollbar-thumb:hover { background: #7f7d89; }

header, footer, div, nav, article, h2, h3, h4, h5, h6, hr, p, form, label, input, textarea, ul, li, img, span, font, strong, b, a, i{ text-align: left; vertical-align: middle; margin: 0; padding: 0; line-height: 150%; border-width: 0; font-family: "微軟正黑體", "蘋果儷中黑", "Lucida Grande", "Arial", "Arial Narrow"; font-size: 16px; word-wrap: break-word; word-break: break-all; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }

:before , :after { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }

ul, ol { list-style: none; }

fieldset { border: 0; }

input,button,select,textarea { outline:none }

img { max-width: 100%; }

a:link , a:visited , a:hover { text-decoration: none; vertical-align: initial; }

* html .clearfix { height: 1%; }

.clearfix { display: block; }

livedemo00.template-help:after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.text-clamp { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; }

/* a.photo */
a.photo , .bgBox { overflow: hidden; background-position: 50%; background-repeat: no-repeat; background-size: cover; display: block; }

/* wow */
.wow { animation-fill-mode: both; -webkit-animation-fill-mode: both; animation-duration: 1s; -webkit-animation-duration: 1s; }

/* fancybox */
[class^="fancybox-"] , [class^="fancybox-"] * , .slick-track , .fa , .fas , .fa:before , .fas:before , .fa:after , .fas:after { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }

/* webBox */
.webBox { position: relative; overflow: hidden; width: 100%; }
.webBox .pageh1 { position: absolute; top: 0; z-index: 1; }
.webBox .wrapper { position: relative; background: #fff; z-index: 2; }

/* workframe */
.workframe { position: relative; margin: 0 auto; width: 1300px; }

/* Sitemap */
#Sitemap #jsonUL a { color: #000; }

/* more */
p.more { margin-top: 40px; text-align: center; }
p.more a { overflow: hidden; position: relative; padding: 10px 30px 10px 40px; border: 1px #af6e52 solid; display: inline-block; }
p.more a:before { position: absolute; width: 100%; height: 100%; background: #af6e52; display: block; bottom: -100%; left: 0; z-index: 1; content: ""; }
p.more a font { position: relative; color: #af6e52; z-index: 2; }
p.more a span { position: relative; margin: 0 10px; width: 20px; height: 19px; display: inline-block; z-index: 2; }
p.more a span:before ,
p.more a span:after { position: absolute; width: 100%; height: 1px; background: #bf8b75; bottom: 3px; right: 0; transition: right .2s ease-in; content: ""; }
p.more a span:after { margin: 1px 1px 0 0; width: 10px; right: -3px; bottom: 6px; -webkit-transform: rotate(45deg); transform: rotate(45deg); }

/* header */
header { overflow: hidden; position: absolute; width: 100%; top: 0; left: 0; z-index: 90; opacity: 1; }
header .menuBox { position: relative; }
header .menuBox .topBar { position: absolute; top: 0; right: 10px; }
header .menuBox .topBar a { padding: 10px; display: inline-block; font-size: 16px; color: #fff; }
header .menuBox .topBar a font { font-size: 16px; }
header .menuBox .topBar a i { margin-right: 5px; }
header .menuBox .contactBar .searchBox { margin: 15px 0 40px; }
header .menuBox .contactBar .searchBox form { font-size: 0; }
header .menuBox .contactBar .searchBox input { padding: 5px 10px; width: 60%; background: rgba(19, 18, 22, .6); display: inline-block; font-size: 16px; color: #fff; vertical-align: middle; }
header .menuBox .contactBar .searchBox a { padding: 5px 15px; background: rgba(19, 18, 22, .6); display: inline-block; font-size: 16px; color: #fff; vertical-align: middle; }
header .menuBox .contactBar ul { font-size: 0; }
header .menuBox .contactBar ul li { margin: -1px 0 0 -1px; display: inline-block; }
header .menuBox .contactBar ul li i ,
header .menuBox .contactBar ul li font { width: 100%; display: block; text-align: center; font-size: 22px; color: #fff; }
header .menuBox .contactBar ul li i { margin: 65px 0 10px; color: #7a797e; -webkit-transition: none; transition: none; }

/* fixBox */
#fixBox { position: fixed; width: 90px; top: 0; z-index: 100; }
#fixBox a { display: block; }
#fixBox a b { margin: 0; padding: 25px 23px; display: block; text-align: center; font-weight: 300; font-size: 15px; color: #fff; }
#fixBox a#menuIcon span { position: absolute; left: 50%; top: 20px; width: 28px; height: 21px; background-image: linear-gradient(180deg,#fff 0,#fff 3px,rgba(0, 0, 0, 0) 0,rgba(0, 0, 0, 0) 9px,#fff 0,#fff 12px,rgba(0, 0, 0, 0) 0,rgba(0, 0, 0, 0) 18px,#fff 0,#fff 21px); background-position: left 0; background-size: 100%; background-repeat: no-repeat; transition: background-size .3s ease; transition-delay: .1s; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
#fixBox a#menuIcon span.open { background-size: 0 100%; transition: none; }
#fixBox a#menuIcon span:before ,
#fixBox a#menuIcon span:after { position: absolute; width: 0; height: 3px; top: 0; right: 0; content: ""; }
#fixBox a#menuIcon span:before { top: 10px; }
#fixBox a#menuIcon span:after { top: 17px; left: 0; width: 30%; height: 4px; }
#fixBox a#menuIcon span.open:before ,
#fixBox a#menuIcon span.open:after { width: 100%; background: #fff; transition: top .4s ease,-webkit-transform .4s ease; transition: top .4s ease,transform .4s ease; transition: top .4s ease,transform .4s ease,-webkit-transform .4s ease; transition-delay: .1s; }
#fixBox a#menuIcon span.open:before { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); transition-delay: .1s; }
#fixBox a#menuIcon span.open:after { width: 100%; background: #fff; top: 10px; -webkit-transform: rotate(45deg); transform: rotate(45deg); transition-delay: .1s; }
#fixBox a#menuIcon b { padding-top: 50px; font-size: 14px; }
#fixBox #gotop { position: absolute; width: 100%; height: auto; border-bottom: 0; text-align: center; color: #fff; bottom: 0; left: 0; }
#fixBox #gotop:after { margin: 20px auto 0; width: 1px; height: 50px; background: #3d3d3e; display: block; content: ""; }

/* footer */
footer { padding-bottom: 10px; background: #131315; color: #616161; }
footer a { color: #616161; }
footer #footerflow { margin-bottom: 30px; border-bottom: 1px #1e1e1e solid; text-align: center; font-size: 0; }
footer #footerflow >div { border-right: 1px #1e1e1e solid; display: inline-block; }
footer #footerflow >div:first-child { border-left: 1px #1e1e1e solid; }
footer #footerflow >div a { padding: 30px 60px; display: block; }
footer #footerflow >div a font { display: inline-block; font-weight: 600; font-size: 20px; }
footer #footerflow >div a i { margin-right: 10px; font-size: 20px; display: inline-block; vertical-align: middle; -webkit-transition: none; transition: none; }
footer #footerflow >div a:hover , footer #footerflow >div a:hover i { color: #a78e84; }
footer #footerInfo .fnav { margin: 10px 0; }
footer #footerInfo .fnav a { margin: 10px 0; padding: 0 15px; display: inline-block; border-right: 1px #4b4b4b solid; line-height: 100%; font-size: 16px; color: #d5d5d5; }
footer #footerInfo .fnav a:last-child { border-right: 0; }
footer #footercont ul { margin-bottom: 20px; font-size: 0; }
footer #footercont ul li { margin: 1px 5px 1px 0; width: calc((100% / 3) - 5px); display: inline-block; }
footer #footercont ul .plus-information { overflow: visible; }
footer #footercont ul .plus-information a { position: relative; display: inline-block; }
footer #footercont ul .plus-information img { position: absolute; max-width: 150px; bottom: 100%; left: 0; z-index: 8; max-height: 150px; display: none; }
footer #footercont ul li b , footer #footercont ul li span { margin-right: 5px; display: inline-block; } 
footer #copBox { font-size: 0; }
footer #copBox .line , footer #copBox #community a { margin-right: 10px; display: inline-block; }
footer #copBox #community , footer #copBox #community a { display: inline-flex; align-items: center; }
footer #copBox #community a svg { width: 16px; height: 16px; fill: #616161; }

/* webSeo */
#webSeo { overflow: hidden; margin-top: 10px; width: 100%; font-size: 12px!important; color: #636363; }
#webSeo .seo > div ,
#webSeo .seo > div * { font-size: 12px!important; color: #636363; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }

/* SeoStarRating */
#SeoStarRating font { margin-right: 5px; display: inline-block; vertical-align: bottom; }
#SeoStarRating font:first-child { line-height: 130%; font-weight: bold; font-size: 18px; color: #FF9800; }
#SeoStarRating font:nth-child(2) { font-size: 16px; color: #FF9800; }
#SeoStarRating font:last-child { color: #383838; }

@media screen and (max-width: 1500px) {
	.workframe { width: 1280px; }
}
@media screen and (max-width: 1360px) {
	.workframe { width: 1160px; }
}
@media screen and (min-width: 1281px) {
	p.more a:hover font { color: #fff; }
	p.more a:hover:before { bottom: 0; }
	p.more a:hover span { margin: 0 0 0 20px; }
	p.more a:hover span:before , p.more a:hover span:after { background: #fff; }
	header .menuBox .contactBar { margin: 20px 0; padding: 140px 50px 20px; display: none; }
	header .menuBox .contactBar h4 { font-weight: 400; font-size: 40px; color: #fff; }
	header .menuBox .contactBar ul li a { width: 250px; height: 200px; border: 1px #35343a solid; box-shadow: inset 0 0 0 3px #1e1d24; display: block; }
	header .menuBox .contactBar ul li:hover a { border-color: #1e1d24; box-shadow: inset 0 0 0 3px #af6e52; }
	header .menuBox .contactBar ul li:hover a i , header .menuBox .contactBar ul li:hover a font { color: #af6e52; }
	header .menuBox #cis { position: absolute; width: 250px; top: 10px; left: 10px; }
	header .menuBox nav { margin: 0 170px 0 280px; }
	header .menuBox nav >ul { padding-top: 10px; font-size: 0; }
	header .menuBox nav >ul >li { display: inline-block; vertical-align: top; }
	header .menuBox nav >ul >li p a { padding: 10px 15px; display: inline-block; font-size: 16px; color: #fff; }
	header .menuBox nav >ul li b { display: none; color: #fff; }
	header .menuBox nav >ul >li .menu_body { position: absolute; width: 160px; display: none; }
	header .menuBox nav >ul >li:hover .menu_body { display: block; }
	header .menuBox nav >ul >li .menu_body >ul { padding-bottom: 10px; background: rgba(41, 40, 49, .9); }
	header .menuBox nav >ul >li .menu_body >ul li ,
	header .menuBox nav >ul >li .menu_body >ul li .bo { position: relative; }
	header .menuBox nav >ul >li .menu_body >ul li .bo b { position: absolute; color: #fff; top: calc((100% - 23px) /2); right: 10px; }
	header .menuBox nav >ul >li .menu_body >ul li a { padding: 7px 20px; display: block; line-height: 140%; font-weight: 400; font-size: 14px; color: #777; }
	header .menuBox nav >ul >li .menu_body >ul li:hover a { color: #fff; }
	header .menuBox nav >ul >li .menu_body >ul li >ul { position: absolute; width: 160px; background: rgba(41, 40, 49, .9); top: 0; left: 0; opacity: 0; z-index: -1; }
	header .menuBox nav >ul >li .menu_body >ul li:hover >ul { left: 160px; z-index: 1; }
	header .menuBox nav >ul >li:hover:after { width: calc(100% - 30px); }
	header .menuBox nav >ul >li:hover >p a:before { bottom: 0; }
	header .menuBox nav >ul >li:hover .menu_body { display: block; }
	header .menuBox nav >ul >li .menu_body >ul li a:hover { background: rgba(0, 0, 0, .25); }
	header .menuBox nav >ul >li .menu_body >ul li .bo b i.fa-plus:before { content: "\f0da"; }
	header .menuBox nav >ul >li .menu_body >ul >li:hover >ul ,
	header .menuBox nav >ul >li .menu_body >ul >li >ul >li:hover ul { left: 159px; opacity: 1; z-index: 1; }
	header.h100 { opacity: 0; width: 0; left: -60%; }
	header.h100.headerTop { position: fixed; overflow-y: scroll; width: 760px; height: 100vh; background: #1e1d24; opacity: 1; }
	header.h100.headerTop::-webkit-scrollbar { width: 10px; }
	header.h100.headerTop::-webkit-scrollbar-track { background: #1e1d24; }
	header.h100.headerTop::-webkit-scrollbar-thumb { background: #696870; }
	header.h100.headerTop::-webkit-scrollbar-thumb:hover { background: #7f7d89; }
	header.h100.headerTop .menuBox #cis { left: 30px; }
	header.h100.headerTop .menuBox .topBar { right: 30px; }
	header.h100.headerTop .menuBox nav { overflow: hidden; margin: 20px 0; padding: 100px 50px 20px; display: none; }
	header.h100.headerTop .menuBox nav >ul { -moz-column-count: 2; -moz-column-gap: 10px; -webkit-column-count: 2; -webkit-column-gap: 10px; column-count: 2; column-gap: 10px; }
	header.h100.headerTop .menuBox nav >ul >li { overflow:hidden; margin: 5px 5px 5px 0; width: 320px; }
	header.h100.headerTop .menuBox nav >ul >li >p a { font-weight: bold; font-size: 18px; }
	header.h100.headerTop .menuBox nav >ul >li .menu_body { position: relative; width: auto; display: block; }
	header.h100.headerTop .menuBox nav >ul >li .menu_body ul { position: relative; width: auto; background: none; left: auto; opacity: 1; }
	header.h100.headerTop .menuBox nav >ul >li .menu_body .subOption .sub2Title a { color: #af6e52; }
	header.h100.headerTop .menuBox nav >ul >li .menu_body ul li .sub2Option .sub3Title a { color: #eaeaea; }
	header.h100.headerTop .menuBox nav >ul >li .menu_body ul li .sub3Option div a { font-size: 12px; color: #777; }
	header.h100.headerTop .menuBox nav >ul >li .menu_body ul li .sub3Option div a:before { content: "- "; }
	#fixBox { height: 100vh; background: #1e1d24; border-right: 1px solid #29292f; left: -95px; }
	#fixBox a { height: 90px; display: block; border-bottom: 1px #3d3d3e solid; }
	#fixBox a#menuIcon span:after { background: #1e1d24; }
	#fixBox #gotop:hover:after { margin: 10px auto 0; height: 60px; }
	footer #footercont ul .plus-information a:hover img { display:block; }
}
@media screen and (max-width: 1280px) {
	.workframe { width: 90%; }
	header { overflow: visible; position: fixed; }
	header.mbheader { background: #1e1d24; }
	header #cis { position: relative; padding: 10px 0; text-align: center; }
	header .menuBox .mbMenu { overflow: hidden; position: absolute; width: 100%; height: 0; background: #18171d; top: -50px; left: 0; }
	header .menuBox .mbMenu.open { overflow-y: scroll; height: 100vh; top: 0; }
	header .menuBox .contactBar h4 { display: none; }
	header .menuBox .contactBar .searchBox { margin: 0; background: #24232b; }
	header .menuBox .contactBar .searchBox form { padding: 10px; text-align: right; }
	header .menuBox .contactBar .searchBox input { width: 200px; }
	header .menuBox .contactBar ul { border-bottom: 1px #29282d solid; }
	header .menuBox .contactBar ul li { margin: 10px 0; width: 25%; }
	header .menuBox .contactBar ul li i { margin: 0 0 5px; font-size: 20px; color: #6c483a; }
	header .menuBox .contactBar ul li font { font-size: 14px; color: #7e4f3c; }
	header .menuBox nav { padding: 30px 20px; }
	header .menuBox nav >ul >li { padding: 0 20px; border-bottom: 1px #29282d solid; }
	header .menuBox nav >ul >li:last-child { border-bottom: 0; }
	header .menuBox nav >ul >li >p ,
	header .menuBox nav ul li .menu_body ul li .bo { position: relative; }
	header .menuBox nav ul li .menu_body ,
	header .menuBox nav ul li .menu_body >ul li .sub2Option ,
	header .menuBox nav ul li .menu_body >ul li .sub3Option { margin-bottom: 15px; display: none; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }
	header .menuBox nav >ul >li >p a { padding: 10px 0; display: block; font-size: 18px; color: #fff; }
	header .menuBox nav ul li b { position: absolute; padding: 5px 0; width: 23px; display: inline-block; text-align: center; color: #fff; top: calc((100% - 33px) / 2); right: 0; }
	header .menuBox nav ul li .menu_body >ul li a { padding: 2px 0; display: block; font-size: 16px; color: #957f75; }
	header .menuBox nav ul li .menu_body >ul >li .sub3Title a { color: #eaeaea; }
	header .menuBox nav ul li .menu_body .sub3Option >li a { color: #777; }
	header .menuBox nav ul li .menu_body .sub3Option >li a:before { content: "- "; }
	header .menuBox .topBar { top: 7px; }
	#fixBox { width: 70px; }
	#fixBox a , #fixBox a#menuIcon b { display: none; }
	#fixBox a#menuIcon { height: 57px; display: block; }
	#fixBox a#menuIcon[data-type="2"] { background: #18171d; }
	#fixBox #gotop { position: fixed; padding: 5px 15px; width: auto; background: #1e1d24; display: block; bottom: 10px; right: 10px; left: auto; }
	#fixBox #gotop:after { display: none; }
}
@media screen and (max-width: 1024px) {
	footer #footercont ul li { width: calc(50% - 5px); }
}
@media screen and (max-width: 980px) {
	footer #footerflow { margin-bottom: 50px; padding-top: 30px; border-bottom: 0; }
	footer #footerflow >div { width: calc((100% - 2px) / 3); border-color: #4d4947; }
	footer #footerflow >div:first-child { border-left: 0; }
	footer #footerflow >div:last-child { border-right: 0; }
	footer #footerflow >div a { padding: 0; line-height: 100%; text-align: center; color: #bba093; }
	footer #footerflow >div a font { font-size: 14px; }
	footer #footerflow >div a i { font-size: 15px; }
	footer #footerInfo .fnav a { margin: 5px 0; font-size: 14px; }
}
@media screen and (max-width: 640px) {
	footer #footerInfo #flogo { text-align: center; }
	footer #footerInfo .fnav { margin: 10px auto; width: 90%; font-size: 0; }
	footer #footerInfo .fnav a { width: calc(50% - 30px); border-width: 0; text-align: center; }
	footer #footercont ul li { text-align: center; width: calc(100% - 5px); }
}
@media screen and (max-width: 480px) {
	header #cis { padding: 10px 0 10px 60px; text-align: left; }
	header .menuBox .topBar a { padding: 10px 5px; }
	header .menuBox .topBar a font { display: none; }
	#fixBox { width: 55px; }
	#fixBox a#menuIcon span { width: 24px; }
	footer #footerflow >div { margin: 5px; width: auto; border-width: 0; }
	footer #footerflow >div a i { display: none; }
}
@media screen and (max-width: 370px) {
	header #cis a { width: 170px; display: inline-block; }
}