@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; }

div, nav, article, h2, h3, h4, h5, h6, hr, p, form, label, input, textarea, ul, li, img, span, a{ 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-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: relative; padding: 10px 0; background: #fff; z-index: 999; }
header .row , header .topMenu nav >ul >li , header .searchBox a , header .searchBox form { display: inline-block; vertical-align: middle; }
header #cis { width: 200px; }
header h3.menuIcon { margin: 10px 0; display: none; }
header h3.menuIcon a { margin: 8px 15px 0; width: 30px; height: 30px; display: inline-block; }
header h3.menuIcon a span ,
header .searchBox a#closesearch span { width: 25px; height: 2px; background: #333333; display: block; margin: 6px auto; opacity: 1; }
header h3.menuIcon.opneBtn a span { -webkit-transform: translateY(8px) rotate(45deg); -ms-transform: translateY(8px) rotate(45deg); -o-transform: translateY(8px) rotate(45deg); transform: translateY(8px) rotate(45deg); }
header h3.menuIcon.opneBtn a span:nth-child(2) { opacity: 0; }
header h3.menuIcon.opneBtn a span: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 { margin: 0 20px; width: calc(100% - 280px); opacity: 1; }
header.opSearch .topMenu { opacity: 0; }
header .topMenu nav >ul >li >p a { position: relative; padding: 10px 15px; display: inline-block; font-size: 16px; font-weight: bold; color: #0D0C0C; }
header .topMenu nav >ul >li >p a:after { position: absolute; width: 0; height: 2px; background: #000; display: block; bottom: -11px; left: 0; z-index: 202; content: ""; }
header .topMenu nav >ul >li:hover >p a:after { width: 100%; }
header .topMenu nav ul li b ,
header .topMenu nav >ul >li .menu_body ,
header.headerTop .topMenu nav >ul >li .menu_body { display: none; }
header .topMenu nav >ul >li .menu_body { position: absolute; width: 170px; background: #fff; z-index: 201; }
header .topMenu nav >ul >li .menu_body >ul { margin-top: 10px; padding: 0; border-top: 1px #d0d0d0 solid; }
header .topMenu nav >ul >li .menu_body >ul >li { border-bottom: 1px #dcdcdc solid; }
header .topMenu nav >ul >li .menu_body >ul >li:last-child { border-bottom: 0; }
header .topMenu nav >ul >li .menu_body >ul li p a { padding: 10px; display: block; color: #000; }
header .topMenu nav >ul >li .menu_body >ul li ul { background: rgba(0, 0, 0, 0.05); box-shadow: inset 0 -1px 3px #b0aeae; }
header .topMenu nav >ul >li .menu_body >ul >li:last-child ul { box-shadow: none; }
header .searchBox { position: absolute; overflow: hidden; width: 30px; background: #fff; white-space: nowrap; right: 0; }
header .searchBox.showS { padding-left: 100px; width: calc(100% - 310px); }
header .searchBox a#closesearch , header .searchBox form { opacity: 0; }
header .searchBox a#closesearch , header .searchBox.showS form { opacity: 1; }
header .searchBox a { padding: 10px 0; width: 30px; text-align: center; font-size: 18px; color: #0D0C0C; }
header .searchBox a#closesearch span { -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 a#closesearch span: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 form { padding: 0; width: calc(100% - 80px); }
header .searchBox form input { padding: 5px 10px; width: calc(100% - 20px); }

/* topBar */
#topBar { position: fixed; padding: 10px 0; width: 100%; background: rgba(0, 0, 0, .8); color: #fff; top: 64px; left: 0; z-index: 200; }
#topBar .workframe { overflow: hidden; }
#topBar .workframe >div { float: right; }
#topBar a { margin-left: 5px; padding: 5px 15px; display: inline-block; font-size: 12px; color: #ebebeb; }
#topBar a#oredericon { background: rgb(30,157,247); background: -moz-linear-gradient(top,  rgba(30,157,247,1) 0%, rgba(19,146,237,1) 100%); background: -webkit-linear-gradient(top,  rgba(30,157,247,1) 0%,rgba(19,146,237,1) 100%); background: linear-gradient(to bottom,  rgba(30,157,247,1) 0%,rgba(19,146,237,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e9df7', endColorstr='#1392ed',GradientType=0 ); border-radius: 3px; }
#topBar a#showBar { display: none; color: #c5cacd; }

/* 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: rgba(184, 184, 184, .5); display: block; line-height: 40px; text-align: center; color: #272727; right: 1%; bottom: 10%; z-index: 50; }

/* footer */
footer { padding: 72px 0 10px; background: #272727; 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: 40px; width: 100%; }
#webSeo .seo > div , #webSeo .seo > div * { font-size: 12px !important; color: #585858; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }

@media screen and (min-width: 1281px) {
	header.headerTop .topMenu nav >ul >li:hover .menu_body { display: none; }
	header .topMenu nav >ul >li:hover .menu_body { display: block; }
	/* ↓ 相本產品分類指定id適用 ↓ */
	header topMenu nav >ul >li .menu_body.mtype-3.ctype-1 >ul >li ,
	header topMenu nav >ul >li .menu_body.mtype-6.ctype-1 >ul >li { border-bottom: 1px #999 solid; }
	header topMenu nav >ul >li .menu_body.mtype-3.ctype-1 >ul >li:last-child ,
	header topMenu nav >ul >li .menu_body.mtype-6.ctype-1 >ul >li:last-child { border-bottom: 0; }
	/* ↑ 相本產品分類指定id適用 ↑ */
	/* ↓ 相本產品全部分類適用 ↓ */
	header .topMenu nav >ul >li .menu_body.mtype-3.ctype-1.mcid-0 ,
	header .topMenu nav >ul >li .menu_body.mtype-6.ctype-1.mcid-0 { position: fixed; width: 100%; left: 0; }
	header .topMenu nav >ul >li .menu_body.mtype-3.ctype-1.mcid-0 >ul ,
	header .topMenu nav >ul >li .menu_body.mtype-6.ctype-1.mcid-0 >ul { padding: 15px calc((100% - 1440px) / 2); }
	header .topMenu nav >ul >li .menu_body.mtype-3.ctype-1.mcid-0 >ul >li ,
	header .topMenu nav >ul >li .menu_body.mtype-6.ctype-1.mcid-0 >ul >li { position: relative; margin: 10px 10px 20px; width: calc(25% - 25px);  min-height: 230px; border-right: 1px #e4e4e4 solid; border-bottom: 0; display: inline-block; vertical-align: top; }
	header .topMenu nav >ul >li .menu_body.mtype-3.ctype-1.mcid-0 >ul >li >div >p >a ,
	header .topMenu nav >ul >li .menu_body.mtype-6.ctype-1.mcid-0 >ul >li >div >p >a { font-weight: bold; font-size: 16px; }
	header .topMenu nav >ul >li .menu_body.mtype-3.ctype-1.mcid-0 >ul >li ul ,
	header .topMenu nav >ul >li .menu_body.mtype-6.ctype-1.mcid-0 >ul >li ul { padding: 10px 20px; background: none; border-bottom: 0; box-shadow: none; }
	header .topMenu nav >ul >li .menu_body.mtype-3.ctype-1.mcid-0 >ul >li ul li a ,
	header .topMenu nav >ul >li .menu_body.mtype-6.ctype-1.mcid-0 >ul >li ul li a { padding: 0; }
	/* ↑ 相本產品全部分類適用 ↑ */
	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) {
	.workframe { width: 90%; }
	header .workframe { width: 100%; }
	header #cis { margin: 0 auto; display: block; }
	header h3.menuIcon { display: inline-block; }
	header .topMenu { position: fixed; overflow: hidden; margin: 0; width: 60px; height: 64px; background: #fff; top: 0; left: 0; z-index: 231; }
	header .topMenu.menuShow { width: 100%; height: 100vh; }
	header .topMenu nav { overflow-x: scroll; height: 100%; }
	header .topMenu nav >ul { padding-bottom: 20vh; }
	header .topMenu nav ul li { display: block; border-bottom: 1px #dcdcdc solid; }
	header .topMenu nav >ul >li >p ,
	header .topMenu nav >ul >li .bo { position: relative; }
	header .topMenu nav >ul >li >p a ,
	header .topMenu nav >ul >li .bo >p a { width: calc(100% - 81px); display: block; }
	header .topMenu nav >ul >li >p a:after { display: none; }
	header .topMenu nav ul li b { position: absolute; padding: 11px 20px 10px; display: block; top: 0; right: 0; }
	header .topMenu nav >ul >li .menu_body { position: relative; overflow: hidden; width: 100%; height: 0; background: #cbcbcb; display: block; opacity: 0; }
	header.headerTop .topMenu nav >ul >li .menu_body ,
	header .topMenu nav >ul >li .menu_body >ul >li >ul ,
	header .topMenu nav >ul >li .menu_body >ul >li >ul >li >ul { overflow: hidden; height: 0; display: block; opacity: 0; }
	header .topMenu nav >ul >li.action .menu_body ,
	header .topMenu nav >ul >li .menu_body >ul >li.action >ul ,
	header .topMenu nav >ul >li .menu_body >ul >li >ul >li.action >ul { height: auto; opacity: 1; }
	header .topMenu nav >ul >li .menu_body >ul { margin-top: 0; padding: 10px; }
	header .searchBox { top: 0; right: 15px; z-index: 230; }
	header .searchBox.showS { width: calc(100% - 100px); }
}
@media screen and (max-width: 1024px) {
	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: 768px) {
	#topBar { padding: 0; background: #434546; }
	#topBar .workframe { overflow: hidden; width: 100%; }
	#topBar .workframe >div { padding: 10px 5%; float: none; text-align: center; }
	#topBar .workframe .btns { overflow: hidden; padding: 0 5%; height: 0; opacity: 0; }
	#topBar .workframe.show .btns { padding: 0; height: auto; background: #262626; opacity: 1; }
	#topBar .btns a { margin-left: 0; padding: 10px; border-bottom: 1px #535050 solid; display: block; text-align: center; font-size: 14px; }
	#topBar .btns a:last-child { border-bottom: 0; }
	#topBar a#oredericon { position: absolute; top: 10px; right: 5%; }
	#topBar a#showBar { display: block; text-align: center; }
	#topBar a#showBar i { -moz-transform:rotate(0); -webkit-transform:rotate(0); -o-transform:rotate(0); -ms-transform:rotate(0); transform:rotate(0); -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }
	#topBar .show a#showBar i { -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg); -ms-transform:rotate(180deg); transform:rotate(180deg); }
}
@media screen and (max-width: 640px) {
	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; }
}