@import url('https://fonts.googleapis.com/css?family=Carrois+Gothic+SC|Hind|Julius+Sans+One|Noto+Sans+TC|Quicksand&display=swap');
@import url('/css/SeoJump.css');
* { margin: 0; padding: 0; }

body { margin:0; }
body.chkshow { overflow: hidden; }

div, nav, h1, h2, h3, h4, h5, h6, hr, p, form, label, input, textarea, img, span, ul, li, a, font, i { text-align: left; vertical-align: middle; margin: 0; padding: 0; line-height: 170%; border-width: 0; font-family: "微軟正黑體", "蘋果儷中黑", "Lucida Grande", "Arial", "Arial Narrow"; font-size: 14px; word-wrap: break-word; word-break: break-word; -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 { overflow: hidden; background-position: 50%; background-repeat: no-repeat; background-size: 100% auto; display: block; }

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

/* selection */
body ::selection { background: #7f1084; color: #fff; }
body::-webkit-scrollbar { width: 6px; } 
body::-webkit-scrollbar-track { background: #c5c5c5; } 
body::-webkit-scrollbar-thumb { background: #7f1084; }
body::-webkit-scrollbar-thumb:hover { background: #5d1661; }

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

/* workframe */
.workframe { margin: 0 auto; width: 1600px; }

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

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

/* header topMenu */
header #topMenu { width: calc(100% - 350px); display: inline-block; text-align: right; }
header #topMenu #openSearch { position: relative; overflow: hidden; padding: 0 20px; float: right; border: 1px #fff solid; display: block; line-height: 43px; }
header #topMenu #openSearch:after { position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, .25); 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); }
header #topMenu .menuBtn.open { 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:hover:after ,
header #topMenu nav >ul >li.action:after { width: calc(100% - 30px); }
header #topMenu nav >ul >li >p a {position: relative;overflow: hidden;height: 43px;display: block;border-left: 1px #fff solid;}
header #topMenu nav >ul >li >p b { padding: 0 10px; display: none; color: #fff; }
header #topMenu nav >ul >li >p a font { margin-top: 0; padding: 0 30px; display: block; text-align: center; line-height: 49px; font-family: 'Carrois Gothic SC', sans-serif, 'Noto Sans TC', sans-serif; font-size: 17px; color: #fff; }
header #topMenu nav >ul >li:hover >p a font:first-child ,
header #topMenu nav >ul >li.action >p a font:first-child { margin-top: -49px; }
header #topMenu nav >ul >li:hover >p a font:last-child ,
header #topMenu nav >ul >li.action >p a font:last-child { background: rgba(0, 0, 0, .25); }
header #topMenu nav >ul >li .menu_body {position: absolute;width: 222px;display: none;}
header #topMenu nav >ul >li:hover .menu_body ,
header #topMenu nav >ul >li.action .menu_body { display: block; }
header #topMenu nav >ul >li .menu_body >ul { background: rgba(0, 0, 0, .24); border: 1px #8f82bc solid; }
header #topMenu nav >ul >li .menu_body >ul li a {padding: 7px 5px;display: block;text-align: center;color: #fff;}
header #topMenu nav >ul >li .menu_body >ul li a font:nth-child(2){
	display: block;
	font-size: 13px;
	color: #ababab;
	padding: 3px 5px;
	display: block;
	text-align: center;
}

header #topMenu nav >ul >li .menu_body >ul li a:hover { background: rgba(0, 0, 0, .25); }

/* header searchBox */
header .searchBox { position: fixed; width: 100%; height: 100%; background: #391652; top: -100%; left: 0; opacity: 0; z-index: -99; }
header .searchBox.showSearch { top: 0; opacity: 1; z-index: 1001; }
header .searchBox #closeSearch { padding: 10px; display: block; right: 5%; z-index: 1002; }
header .searchBox #closeSearch .line { width: 25px; 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 { margin-top: 20%; padding: 10px; width: 400px; border-bottom: 2px #ffae00 solid; }
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; }

/* footer */
footer { padding: 20px 5% 5px; background: url(/images/24/img-footerBg.jpg) no-repeat 50%; background-size: cover; background-attachment: fixed; color: #fff; }
footer a { color: #fff; }
footer >div { text-align: center; }
footer #footerLogo a { margin: 10px 15px; display: inline-block; vertical-align: middle; }
footer #footerLogo a.igpan{
    width: 20px;
}
footer #footerNav {margin: 20px 0 30px;width: auto;}
footer #footerNav ul {
    text-align: center;
    overflow: visible;
    display: inline-block;
}
footer #footerNav >ul >li {
    position: relative;
}
footer #footerNav p {margin: 5px 0;display: inline-block;vertical-align: middle;}
footer #footerNav p span a{
	font-size: 12px;
	color: #a58fa5;
	padding: 0 6px;
}
footer #footerNav p:after { margin: 0 10px 0 12px; color: #4e3d4f; content: "|"; }
footer #footerNav a:last-child:after { display: none; }
footer #footerCopy * { font-weight: normal; font-size: 12px; }
footer #footerCopy font { color: #753a75; }
footer #footerBox , footer #footerBox * { font-size: 12px; color: #753a75; }
footer #footermaq .workframe { overflow: hidden; }

/* webSeo */
#webSeo { overflow: hidden; margin-top: 10px; width: 100%; font-size: 12px!important; color: #753a75; }
#webSeo .seo > div ,
#webSeo .seo > div * { font-size: 12px!important; color: #522452; -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; vertical-align: baseline; }
#SeoStarRating font:last-child { color: #0a29d2; }
#gotop {
    background: #7e0f83;
}

.fixedBtn {
    display: inline;
    position: fixed;
    right: 19px;
    bottom: 78px;
    width: 50px;
    height: 50px;
    z-index: 999;
    text-align: center;
    border-radius: 50%;
    line-height: 50px;
    color: #fff;
    font-size: 15px;
}
@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 font { padding: 0 10px; font-size: 16px; }
	header #topMenu nav >ul >li .menu_body { width: auto; }
}
@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: #391652; border: 0; top: -100%; left: 0; opacity: 0; z-index: 999; }
	header #topMenu nav.showMenu { top: 0; opacity: 1; }
	header #topMenu nav >ul { margin-top: 120px; }
	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 { text-align: center; }
	header #topMenu nav >ul >li >p a { border: 0; display: inline-block; vertical-align: middle; }
	header #topMenu nav >ul >li >p b { display: inline-block; vertical-align: middle; }
	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 { position: relative; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }
	header #topMenu nav >ul >li:hover .menu_body { clear: both; }
	header #topMenu nav >ul >li .menu_body >ul { border: 1px #47265f solid; }
	header #topMenu nav >ul >li .menu_body >ul li a { border-bottom: 1px #47265f solid; color: #85669c; }
}
@media screen and (max-width: 480px) {
	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: 5%; }
	header .searchBox #hSearch { margin-top: 200px; width: calc(90% - 20px); }
	header .searchBox #hSearch input { width: calc(100% - 25px); }
	footer #footerLogo a#logoImg { display: block; text-align: center; }
}
@media screen and (max-width: 350px) {
	header #cis { margin-top: 6px; }
}