@import url('/css/fontawesome-all.css');
@import url('/css/font-awesome.min.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; }

header, footer, div, nav, article, h2, h3, h4, h5, h6, hr, p, form, label, input, textarea, ul, li, img, span, font, a{ 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 .wrapper { position: relative; background: #fff; z-index: 2; }

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

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

/* header */
header { position: fixed; width: 100%; z-index: 100; }
header .topBtn { margin: 5px 0; text-align: right; color: #fff; }
header .topBtn a { margin: 2px 10px; display: inline-block; font-size: 12px; color: #fff; }
header >div { font-size: 0; }
header #cis { position: relative; width: 250px; display: inline-block; z-index: 1002; }

/* header topMenu */
header #topMenu { width: calc(100% - 250px); display: inline-block; text-align: right; }
header #topMenu #openSearch { position: relative; overflow: hidden; padding: 0 20px; float: right; border: 1px #fff solid; display: block; text-align: center; line-height: 43px; }
header #topMenu #openSearch span { position: relative; width: 20px; height: 20px; background: url(/images/32/icon-search.png) no-repeat 0 0; display: inline-block; z-index: 2; }
header #topMenu #openSearch:after { position: absolute; width: 100%; height: 100%; background: #041d2a; display: block; bottom: -50px; left: 0; z-index: 1; content: ""; }
header #topMenu #openSearch:hover:after { bottom: 0; }
header #topMenu #openSearch img { position: relative; z-index: 2; }
header #topMenu .menuBtn ,
header .searchBox #closeSearch { position: absolute; padding: 6px 10px 7px; border: 1px #fff solid; display: none; top: 29px; right: calc(5% + 41px); z-index: 980; }
header #topMenu .menuBtn.open { border-color: #ffae07; right: 5%; z-index: 1000; }
header #topMenu .menuBtn .line { width: 20px; height: 2px; background: #fff; display: block; margin: 6px auto; opacity: 1; }
header #topMenu .menuBtn.open .line { background: #ffae00; }
header #topMenu .menuBtn.open .line:nth-child(1) { -webkit-transform: translateY(8px) rotate(45deg); -ms-transform: translateY(8px) rotate(45deg); -o-transform: translateY(8px) rotate(45deg); transform: translateY(8px) rotate(45deg); }
header #topMenu .menuBtn.open .line:nth-child(2) { opacity: 0; }
header #topMenu .menuBtn.open .line:nth-child(3) { -webkit-transform: translateY(-8px) rotate(-45deg); -ms-transform: translateY(-8px) rotate(-45deg); -o-transform: translateY(-8px) rotate(-45deg); transform: translateY(-8px) rotate(-45deg); }
header #topMenu nav { float: right; border-top: 1px #fff solid; border-bottom: 1px #fff solid; }
header #topMenu nav >ul >li { position: relative; display: table-cell; }
header #topMenu nav >ul >li:after { position: absolute; width: 0; height: 5px; background: #ffae00; display: block; content: ""; left: 16px; bottom: -3px; }
header #topMenu nav >ul >li.action:after { width: calc(100% - 30px); }
header #topMenu nav >ul >li >p a { position: relative; overflow: hidden; padding: 0 20px; display: block; border-left: 1px #fff solid; line-height: 43px;  color: #fff; }
header #topMenu nav >ul >li >p b { padding: 0 10px; display: none; color: #fff; }
header #topMenu nav >ul >li >p a:before { position: absolute; width: 100%; height: 100%; background: #041d2a; display: block; bottom: -50px; left: 0; z-index: -1; content: ""; }
header #topMenu nav >ul >li .menu_body { position: absolute; width: 160px; display: none; }
header #topMenu nav >ul >li.action .menu_body { display: block; }
header #topMenu nav >ul >li .menu_body >ul { background: #041d2a; border: 1px #3f7b9e solid; }
header #topMenu nav >ul >li .menu_body >ul li ,
header #topMenu nav >ul >li .menu_body >ul li .bo { position: relative; }
header #topMenu nav >ul >li .menu_body >ul li .bo b { position: absolute; color: #5f94b5; top: calc((100% - 23px) /2); right: 10px; }
header #topMenu nav >ul >li .menu_body >ul li a { padding: 7px 20px; display: block; text-align: center; color: #5f95b5; }
header #topMenu nav >ul >li .menu_body >ul li >ul { position: absolute; width: 160px; background: rgba(4, 28, 42, .9); top: 0; left: 0; opacity: 0; z-index: -1; }
header.headerTop { padding-bottom: 5px; background: rgba(255, 255, 255, .8); }
header.headerTop:before { position: absolute; border-style: solid; border-width: 11vw 11vw 0 11vw; border-color: #0b3145 transparent transparent transparent; top: 0; left: -7vw; z-index: 1; content: ""; }
header.headerTop >div { z-index: 2; }
header.headerTop .topBtn { margin: 2px 0 0; }
header.headerTop .topBtn a { color: #003b5c; }
header.headerTop #topMenu .menuBtn { padding: 4px 10px; border-color: #003b5c; }
header.headerTop #topMenu .menuBtn.open { border-color: #ffae00; }
header.headerTop #topMenu .menuBtn .line { background: #003b5c; }
header.headerTop #topMenu .menuBtn.open .line { background: #ffae00; }
header.headerTop #topMenu #openSearch ,
header.headerTop #topMenu nav ,
header.headerTop #topMenu nav >ul >li >p a { border-color: #003b5c; line-height: 38px; }
header.headerTop #topMenu nav >ul >li:hover >p a { color: #fff; }
header.headerTop #topMenu #openSearch span { background-image: url(/images/32/icon-searchH.png); }

/* header searchBox */
header .searchBox { position: fixed; width: 100%; height: 100%; background: #051e2d; top: -100%; left: 0; opacity: 0; z-index: -99; }
header .searchBox .workframe { line-height: 100vh; }
header .searchBox.showSearch { top: 0; opacity: 1; z-index: 1001; }
header .searchBox #closeSearch { padding: 11px 10px 10px; border-color: #d29207; display: block; top: 34px; right: calc(5% + 29px); z-index: 1002; }
header .searchBox #closeSearch .line { width: 20px; height: 2px; background: #ffae00; display: block; margin: 6px auto; opacity: 1; -webkit-transform: translateY(4px) rotate(45deg); -ms-transform: translateY(4px) rotate(45deg); -o-transform: translateY(4px) rotate(45deg); transform: translateY(4px) rotate(45deg); }
header .searchBox #closeSearch .line:nth-child(2) { -webkit-transform: translateY(-4px) rotate(-45deg); -ms-transform: translateY(-4px) rotate(-45deg); -o-transform: translateY(-4px) rotate(-45deg); transform: translateY(-4px) rotate(-45deg); }
header .searchBox #hSearch { padding: 10px; width: 400px; border-bottom: 2px #ffae00 solid; display: inline-block;}
header .searchBox #hSearch input { width: 375px; background: none; font-size: 18px; color: #ffae00; }
header .searchBox #hSearch input::-webkit-input-placeholder { color: #866a2e; }
header .searchBox #hSearch input::-moz-placeholder { color: #866a2e; }
header .searchBox #hSearch input:-ms-input-placeholder { color: #866a2e; }
header .searchBox #hSearch input:-moz-placeholder { color: #866a2e; }
header .searchBox #hSearch #goSearch { font-size: 18px; color: #ffae00; }

/* gotop */
#gotop { position: fixed; width: 40px; height: 40px; background: rgba(184, 184, 184, .5); display: block; line-height: 40px; text-align: center; color: #272727; right: 1%; bottom: 10%; z-index: 9; }

/* footer */
footer { padding: 72px 0 10px; background: #072230; color: #9fa3a6; }
footer a { color: #9fa3a6; }
footer .workframe { overflow: hidden; }
footer .row { float: left; width: 25%; }
footer .row h4 { font-weight: normal; font-size: 16px; color: #fff; }
footer .row ul { margin: 10px 10px 10px 0; }
footer .row ul li b , footer .row ul li span { display: inline-block; vertical-align: middle; }
footer #footercont { width: 75%; }
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; }
#footerflow >div { margin: 10px 10px 10px 0; display: inline-block; }
footer #footerInfo { overflow: hidden; margin-top: 40px; width: 100%; font-size: 0; }
footer #footerInfo >div { margin-right: 5px; width: 200px; display: inline-block; }
footer #footerInfo .fnav { width: calc(100% - 270px); }
footer #footerInfo #community { margin-right: 0; width: 60px; }
footer #footerInfo >div a { margin-right: 5px; }
footer #copBox { margin-top: 15px; width: 100%; border-top: 1px #9fa3a6 solid; }
footer #copBox .line { margin-right: 10px; display: inline-block; font-size: 12px; vertical-align: middle; }
footer #copBox .line:last-child { margin-right: 0; }

/* 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: middle; }
#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: #0380c5; }

@media screen and (max-width: 1600px) {
	.workframe { width: 1360px; }
	header #topMenu nav >ul >li >p a font { padding: 0 20px; }
}
@media screen and (max-width: 1360px) {
	.workframe { width: 1160px; }
	header #topMenu #openSearch { padding: 0 10px; }
	header #topMenu nav >ul >li >p a { padding: 0 15px; }
	header #topMenu nav >ul >li >p a font { padding: 0 10px; font-size: 16px; }
	header #topMenu nav >ul >li .menu_body { width: auto; }
}
@media screen and (min-width: 1281px) {
	header #topMenu nav >ul >li:hover:after { width: calc(100% - 30px); }
	header #topMenu nav >ul >li:hover >p a:before { bottom: 0; }
	header #topMenu nav >ul >li:hover .menu_body { display: block; }
	header #topMenu nav >ul >li .menu_body >ul li a:hover { background: rgba(0, 0, 0, .25); }
	header #topMenu nav >ul >li:last-child .menu_body >ul li .bo b { left: 10px; right: auto; }
	header #topMenu nav >ul >li .menu_body >ul li .bo b i.fa-plus:before { content: "\f0da"; }
	header #topMenu nav >ul >li:last-child .menu_body >ul li .bo b i.fa-plus:before { content: "\f0d9"; }
	header #topMenu nav >ul >li .menu_body >ul >li:hover >ul ,
	header #topMenu nav >ul >li .menu_body >ul >li >ul >li:hover ul { left: 159px; opacity: 1; z-index: 1; }
	header #topMenu nav >ul >li:last-child .menu_body >ul li >ul { left: auto; right: 0; }
	header #topMenu nav >ul >li:last-child .menu_body >ul li:hover >ul { left: auto; right: 159px; }
	footer #footercont ul .plus-information a:hover img { display:block; }
	header.headerTop #topMenu #openSearch ,
	header.headerTop #topMenu nav ,
	header.headerTop #topMenu nav >ul >li >p a { color: #003b5c; }
	header.headerTop #topMenu #openSearch:hover span { background-image: url(/images/32/icon-search.png); }
}
@media screen and (max-width: 1280px) {
	.workframe { width: 90%; }
	header #topMenu { margin-top: 10px; width: 100%; }
	header #topMenu #openSearch { position: absolute; top: 29px; right: 5%; }
	header #topMenu #openBox { display: block; }
	header #topMenu nav { position: fixed; width: 100%; height: 100%; background: #051e2d; border: 0; top: -100%; left: 0; opacity: 0; z-index: -1; }
	header #topMenu nav.showMenu { overflow-x: scroll; top: 0; opacity: 1; z-index: 999; }
	header #topMenu nav:before { position: fixed; width: 100%; height: 10vh; background: #051e2d; top: 0; left: 0; content: ""; z-index: 10; }
	header #topMenu nav >ul { position: relative; margin-top: 120px; padding: 0 5% 10vh; z-index: 9; }
	header #topMenu nav >ul >li { display: block; }
	header #topMenu nav >ul >li:hover:after , header #topMenu nav >ul >li.action:after { display: none; }
	header #topMenu nav >ul >li >p { position: relative; border-bottom: 1px #0f2e41 solid; }
	header #topMenu nav >ul >li >p a { border: 0; }
	header #topMenu nav >ul >li >p b { position: absolute; display: block; top: calc((100% - 23px) /2); right: 0; }
	header #topMenu nav >ul >li >p a font { display: inline-block; }
	header #topMenu nav >ul >li:hover >p a font:first-child , header #topMenu nav >ul >li.action >p a font:first-child { margin-top: 0; }
	header #topMenu nav >ul >li:hover >p a font:last-child , header #topMenu nav >ul >li.action >p a font:last-child { background: none; }
	header #topMenu nav >ul >li .menu_body ,
	header #topMenu nav >ul >li .menu_body >ul li >ul { position: relative; width: auto; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; opacity: 1; z-index: inherit; }
	header #topMenu nav >ul >li:hover .menu_body { clear: both; }
	header #topMenu nav >ul >li .menu_body >ul { background: #09141a; border: 0; }
	header #topMenu nav >ul >li .menu_body >ul li .sub2Title ,
	header #topMenu nav >ul >li .menu_body >ul li .sub3Title { position: relative; border-bottom: 1px #051e2d solid; }
	header #topMenu nav >ul >li .menu_body >ul li a { text-align: left; }
	header #topMenu nav >ul >li .menu_body >ul li >ul { display: none; }
	header #topMenu nav >ul >li .menu_body >ul li .sub3Option { background: #17405c; }
	header.headerTop #topMenu nav ,
	header.headerTop #topMenu nav >ul >li >p a { line-height: 43px; }
}
@media screen and (max-width: 1024px) {
	header.headerTop:before { border-width: 150px 150px 0 150px; left: -120px; }
	#gotop { z-index: 999; }
	footer #footercont , footer #footerflow { width: 100%; }
	footer #footerInfo .fnav { width: calc(100% - 210px); }
	footer #footerInfo #community { margin-top: 10px; width: 200px; display: block; }
}
@media screen and (max-width: 640px) {
	header.headerTop:before { border-width: 100px 100px 0 100px; left: -90px; }
	header.headerTop .topBtn a { color: #a36e25; }
	footer .row , footer .row h4 , footer #footercont ul li { text-align: center; }
	footer #footercont ul , footer #footerInfo #community { width: 100%; }
	footer #footerInfo >div { margin-right: auto; margin: 10px auto 0; display: block; text-align: center; }
	footer #footerInfo .fnav { width: 90%; }
	footer #copBox { margin-top: 0; border-top: 0; }
}
@media screen and (max-width: 480px) {
	header .topBtn a { margin: 2px; }
	header #cis { width: calc(100% - 100px); }
	header #topMenu #openSearch { padding: 0 8px; line-height: 36px; }
	header #topMenu .menuBtn { padding: 3px 8px; right: calc(5% + 37px); }
	header .searchBox #closeSearch { padding: 7px 6px; right: calc(9% + 1px); top: 34px; }
	header .searchBox #hSearch { width: calc(90% - 20px); }
	header .searchBox #hSearch input { width: calc(100% - 25px); }
}
@media screen and (max-width: 380px) {
	header #cis { margin-top: 6px; }
}