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

* { margin: 0; padding: 0; }

body { margin:0; }
body ::selection { background: #353637; color: #fff; }
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: #c5c5c5; }
body::-webkit-scrollbar-thumb { background: #0d1011; }
body::-webkit-scrollbar-thumb:hover { background: #393939; }

div, h2, h3, h4, h5, h6, hr, p, form, label, input, textarea, img, span, ul, li { 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; 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-"] * { -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 .wrapbg { position: fixed; width: 100%; height: 100vh; background: url(/images/30/img-bodyBg_1920.png) #fff fixed center top /  100% auto; top: 0; left: 0; z-index: 2; }
.webBox .wrapper { position: relative; z-index: 3; }

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

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

/* header */
header { position: fixed; width: 100%; z-index: 998; left: 0; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }
#Sitemap header { position: relative; }
header.headerShow { top: 0; }
header.headerNone { top: -50%; }
header.headerTop { padding-bottom: 50px; background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); }
header #logoBtns { overflow: hidden; padding: 10px 0;  }
header #logoBtns #cis { float: left; width: 400px; }
header #logoBtns .topBar { float: right; line-height: 44px; }
header #logoBtns .topBar a { margin-left: 10px; display: inline-block; font-size: 13px; color: #000; vertical-align: middle; }
header #logoBtns .topBar a font ,
header nav #closeBox font { display: inline-block; vertical-align: middle; }
header #logoBtns .topBar a font.dote ,
header nav #closeBox font.dote { margin-left: 10px; width: 40px; height: 40px; background: #000; border-radius: 50%; display: inline-block; text-align: center; line-height: 38px; }
header #logoBtns .topBar a font.dote span ,
header nav #closeBox font.dote span { margin: 0 2px; width: 5px; height: 5px; background: #fff; border-radius: 50%; display: inline-block; vertical-align: middle; }
header #logoBtns .topBar a font.dote span:first-child { -webkit-animation: menuDote1 1s infinite alternate ease-in-out; animation: menuDote1 1s infinite alternate ease-in-out; }
header #logoBtns .topBar a:hover font.dote span:first-child { -webkit-animation: menuDoteH1 3s infinite alternate ease-in-out; animation: menuDoteH1 3s infinite alternate ease-in-out; }
header #logoBtns .topBar a font.dote span:nth-child(3) { -webkit-animation: menuDote2 1s infinite alternate ease-in-out; animation: menuDote2 1s infinite alternate ease-in-out; }
header #logoBtns .topBar a:hover font.dote span:nth-child(3) { -webkit-animation: menuDoteH2 3s infinite alternate ease-in-out; animation: menuDoteH2 3s infinite alternate ease-in-out; }

/* header nav */
header nav { position: fixed; width: 100%; height: 100vh; background: url(/images/30/img-bodyBg_1920.png) #fff fixed center top /  100% auto; top: -150%; left: 0; opacity: 0; z-index: 999; -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; }
header nav.showMenu { top: 0; opacity: 1; }
header nav .navinfo { margin-top: 13%; }
header nav #closeBox { position: absolute; color: #000; top: 14px; right: 0; z-index: 20; }
header nav #closeBox font.dote { position: relative; background: none; }
header nav #closeBox font.dote span { margin: 0; background: #c95757; }
header nav #closeBox font.dote span:nth-child(1) { position: absolute; top: 8px; left: 8px; }
header nav #closeBox font.dote span:nth-child(2) { position: absolute; top: 8px; right: 8px; }
header nav #closeBox font.dote span:nth-child(4) { position: absolute; bottom: 8px; left: 8px; }
header nav #closeBox font.dote span:nth-child(5) { position: absolute; bottom: 8px; right: 8px; }
header nav #closeBox:hover font.dote span:nth-child(1) ,
header nav #closeBox:hover font.dote span:nth-child(2) { top: 18px; }
header nav #closeBox:hover font.dote span:nth-child(4) ,
header nav #closeBox:hover font.dote span:nth-child(5) { bottom: 17px; opacity: 0; }
header nav .row { width: calc(55% - 10px); display: inline-block; vertical-align: middle; }
header nav #smallPicture .slick-slider { margin-bottom: 0; }
header nav #smallPicture ul li a.photo { position: relative; margin: 0 10px; }
header nav #smallPicture ul li a.photo img { width: 100%; }
header nav #smallPicture ul li a.photo font { position: absolute; padding: 15px 20px; width: calc(100% - 40px); background: rgba(0, 0, 0, 0.7); font-size: 16px; color: #fff; left: 0; bottom: 0; }
header nav #menu { margin-left: 5%; width: 40%; }
header nav #menu >ul { margin-left: 10px; }
header nav #menu >ul >li p ,
header nav #menu >ul >li.open .menu_body ul li .sub2Title ,
header nav #menu >ul >li.open .menu_body ul li .sub2Option li .sub3Title { position: relative; }
header nav #menu >ul >li p a { padding: 8px 30px 8px 0; display: block; font-size: 20px; color: #000; }
header nav #menu >ul >li p b ,
header nav #menu >ul >li.open .menu_body ul li .sub2Title b ,
header nav #menu >ul >li.open .menu_body ul li .sub2Option li .sub3Title b { position: absolute; padding: 0 10px; right: 0; top: calc((100% - 23px) / 2); }
header nav #menu >ul >li p:hover a , header nav #menu >ul >li p:hover b { color: #981214; }
header nav #menu >ul >li .menu_body { overflow-y: scroll; position: absolute; width: 40%; height: 100%; background: rgba(193, 193, 193, 0.95); box-shadow: 0 0 10px rgba(93, 91, 91, 0.8); top: 0; left: -200%; z-index: 10; opacity: 0; }
header nav #menu >ul >li .menu_body a[data-action="closeList"] { position: absolute; padding: 10px; display: none; color: #000; top: 10px; right: 10px; z-index: 10; }
header nav #menu >ul >li .menu_body::-webkit-scrollbar { width: 2px; }
header nav #menu >ul >li .menu_body::-webkit-scrollbar-track { background: #bcbcbc; }
header nav #menu >ul >li .menu_body::-webkit-scrollbar-thumb { background: #393939; }
header nav #menu >ul >li .menu_body::-webkit-scrollbar-thumb:hover { background: none; }
header nav #menu >ul >li.open .menu_body { left: 17%; opacity: 1; }
header nav #menu >ul >li .menu_body >ul.subOption { margin: 20px; }
header nav #menu >ul >li .menu_body >ul.subOption >li >.sub2Option ,
header nav #menu >ul >li .menu_body >ul.subOption >li >.sub2Option >li >.sub3Option { padding: 0 10px; background: rgba(236, 236, 236, 0.48); display: none; transition: none; }
header nav #menu >ul >li .menu_body >ul.subOption >li >.sub2Option >li >.sub3Option {}
header .searchBox { position: absolute; padding: 5px 10px; background: #d9d9d9; box-shadow: 0 0 4px #aaaaaa; border: 1px #adaaaa solid; display: none; right: calc((100% - 1440px) / 2); }
header .searchBox.showSearch { display: block; }
header .searchBox input { background: none; }
header .searchBox #goSearch { color: #000; }

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

/* gotop */
#gotop { position: fixed; width: 40px; height: 40px; background: #c1c7d8; border-radius: 2px; display: block; text-align: center; line-height: 40px; color: #343434; right: 15px; bottom: 60px; z-index: 999; }

/* footer */
footer { overflow: hidden; padding: 40px 0 10px; background: #232323; color: #fff; }
footer a { color: #fff; }
footer .workframe { overflow: hidden; }
footer .row { float: left; width: 25%; }
footer .row h4 { font-size: 18px; }
footer .row ul { margin: 10px; }
footer .row ul li b , footer .row ul li span { display: inline-block; vertical-align: middle; }
footer #footercis p { margin: 10px; font-size: 16px; }
footer #footercis ul { margin: 10px 0; width: 70%; }
footer #footercis ul li a { margin: 10px 0; padding: 13px 0; display: block; background: #a38245; text-align: center; }
footer #footercis ul li:nth-child(2) a { background: #4b874d; }
footer #footercis ul li:nth-child(3) a { background: #7d4444; }
footer #footercont { width: 50%; }
footer #footercont ul { width: calc((100% - 50px) / 2); display: inline-block; vertical-align: top; }
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 #community { margin-top: 10px; display: flex; align-items: center; }
footer #community a { margin: 0 10px; color: #baafaf; }
footer #community a svg { width: 16px; height: 16px; fill: #baafaf; }
footer #copBox { margin-top: 10px; width: 75%; }
footer #copBox p , footer #copBox >div { margin-right: 10px; display: inline-block; color: #baafaf; }

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

@media screen and (min-width: 1281px) {
	footer #footercont ul .plus-information a:hover img { display:block; }
}
@media screen and (max-width: 1500px) {
	.workframe { width: 1200px; }
}
@media screen and (max-width: 1440px) {
	.workframe { width: 1160px; }
}
@media screen and (max-width: 1280px) {
	.webBox .wrapbg , header nav { background-image: url(/images/30/img-bodyBg_1280.png); }
	.workframe { width: 90%; }
	footer #footercis ul { width: 200px; }
}
@media screen and (max-width: 1160px) {
	header nav .navinfo { margin-top: 20%; }
	header nav #menu >ul >li.open .menu_body { width: calc(55% - 10px); left: 0; }
	footer .row.mobileBox , footer #footercont { width: calc(100% / 3); }
	footer #footercont ul { width: 100%; }
}
@media screen and (max-width: 900px) {
	header #logoBtns #cis { width: calc(100% - 170px); }
	header #logoBtns .topBar { width: 170px; text-align: right; }
}
@media screen and (max-width: 800px) {
	footer .row.mobileBox { width: 50%; }
	footer #footernav ul { text-align: center; }
	footer #footernav ul li { width: calc(50% - 10px); display: inline-block; }
	footer #footercont { margin-top: 35px; width: 100%; }
	footer #footercont ul { width: calc((100% - 50px) / 2); }
}
@media screen and (max-width: 768px) {
	.webBox .wrapbg , header nav { background-image: url(/images/30/img-bodyBg_768.png); }
	header nav .navinfo { margin-top: 30%; }
	header nav #smallPicture { width: 300px; }
	header nav #menu { width: calc(95% - 310px); }
	header nav #menu >ul >li.open .menu_body { width: 100%; }
	header nav #menu >ul >li .menu_body a[data-action="closeList"] { display: block; }
}
@media screen and (max-width: 640px) {
	header nav #smallPicture { width: 200px; }
	header nav #menu { width: calc(95% - 210px); }
}
@media screen and (max-width: 520px) {
	.webBox .wrapbg , header nav { background-image: url(/images/30/img-bodyBg_520.png); }
}
@media screen and (max-width: 500px) {
	header nav .navinfo { overflow-y: scroll; margin-top: 0; height: 100%; }
	header nav .navinfo::-webkit-scrollbar { width: 0; }
	header nav #smallPicture { display: none; }
	header nav #menu { margin-left: 0; padding: 60px 0 100px; width: 100%; }
	header nav #menu >ul >li .menu_body { overflow-y: hidden; position: relative; width: 100%; height: 0; box-shadow: inherit; left: 0; }
	header nav #menu >ul >li.open .menu_body { height: 100%; }
	header nav #menu >ul >li .menu_body a[data-action="closeList"] { display: none; }
	header nav #menu >ul >li .menu_body >ul.subOption { margin: 5px 15px; }
	header nav #menu >ul >li .menu_body >ul.subOption p a{ font-size: 16px; }
}