@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('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&family=Noto+Sans+SC:wght@100;300;400;500;700;900&family=Source+Sans+Pro:wght@400;600&family=Oswald:wght@300;400;500;600;700&display=swap');

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

body { margin: 0; }
body ::selection { background: #ad9c8f; text-shadow: none; color: #fff; }
body::-webkit-scrollbar { width: 5px; }
body::-webkit-scrollbar-track { background: #aaa; }
body::-webkit-scrollbar-thumb { background: #3b387e; }
body::-webkit-scrollbar-thumb:hover { background: #201e46; }

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: 170%;border-width: 0;font-family: 微軟正黑體, 蘋果儷中黑, "Lucida Grande", Arial, "Arial Narrow";font-size: 16px;word-wrap: break-word;word-break: break-all;-webkit-transition: all .3s ease-out;-moz-transition: all .3s ease-out;-ms-transition: all .3s ease-out;-o-transition: all .3s ease-out;transition: all .3s ease-out;}

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

ul, ol { list-style: none; }

fieldset { border: 0; }

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

img { max-width: 100%; }

.phoneWrap {
    display: none;
}

a , a:link , a:visited , a:hover { display: inline-block; 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: no-repeat 50% / cover; display: block; }

/* 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; }

/* slick-slider */
.wrapper .slick-slider { margin-bottom: 0; }

/* 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: 1525px;font-size: 0;z-index: 1;}

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

/* headBan */
#headBan {
    background: #fff;
}

/* banner */
#banner {position: relative;padding-top: 90px;z-index: 1;}

/* header */
header {position: fixed;width: 100%;background: #ffffff;font-size: 0;top: 0;z-index: 100;box-shadow: 0 0 10px rgb(0 0 0 / 10%);}
header .row { padding: 0 10px; display: inline-block; }
header #cis {width: 200px;height: 80px;background: #fff;line-height: 80px;text-align: center;margin-left: 20px;}
header .mbMenu #menuIcon {position: absolute;width: 80px;height: 79px;display: block;top: 0;right: 180px;}
header .mbMenu #menuIcon:before , header .mbMenu #menuIcon:after {margin: 35px auto 0;width: 35px;height: 2px;background: #292929;display: block;right: 0;transition: all 0.3s;content: "";}
header .mbMenu #menuIcon:after { margin: 10px auto 0; }
header .mbMenu nav{
    text-align: end;
}
header .mbMenu .btnBox , header .mbMenu nav >ul {text-align: right;display: inline-block;}
header .mbMenu .btnBox a {padding: 0 15px 0 5px;font-size: 15px;color: #1d1d1d;}
header .mbMenu .btnBox a i { font-size: 14px; }
header .mbMenu nav >ul >li >p a {padding: 0 15px;display: block;font-size: 15px;color: #1d1d1d;height: 80px;line-height: 80px;}
header .mbMenu nav >ul >li:hover >p a{
    background: #bf9c84;
    color: #fff;
}
header .mbMenu nav >ul >li .menu_body .subOption li { position: relative; overflow: hidden; }
header .mbMenu nav >ul >li .menu_body .subOption li >div a { padding: 10px 15px; border-bottom: 1px #d6d6d6 solid; display: block; color: #0f2942; font-size: 14px;}
header .mbMenu nav >ul >li .menu_body .subOption li:last-child >div a { border-bottom: 0; }
header #linelink {padding: 21px 0;width: 200px;text-align: center;}
header #linelink a {box-shadow: inset 0 0 0 1px #e0e0e0;border-radius: 50%;width: 50px;height: 50px;line-height: 45px;text-align: center;display: inline-block;margin-left: 10px;}
header #linelink a img{
    width: 18px;
}
header #linelink a:hover{
    background: #e0e0e0;
}
header form#hSearch {position: fixed;padding: 8px 10px;background: #fff;box-shadow: 0 0 20px rgba(0, 0, 0, .2);top: 28px;right: -100%;z-index: 100;}
header form#hSearch input {width: 130px;font-size: 14px;}
header form#hSearch a { color: #000; }
header.headerfixed #cis {}
header .mbMenu[data-type="2"] #menuIcon:before { -webkit-transform: translateY(6px) rotate(135deg); transform: translateY(6px) rotate(135deg); }
header .mbMenu[data-type="2"] #menuIcon:after { -webkit-transform: translateY(-6px) rotate(-135deg); transform: translateY(-6px) rotate(-135deg); }

/* footer */
footer {padding-top: 50px;background: #e8e3d3;margin-top: -10px;}
footer #flogo {margin: 30px 5%;text-align: center;display: none;}
footer .row {width: calc(100% - 455px);display: inline-block;vertical-align: top;font-size: 0;}
#extrainfoBix p{
    color: #181717;
    letter-spacing: 3px;
    font-weight: bold;
    font-size: 16px;
}
footer .row .infortent{
    overflow: hidden;
}
footer .row .infortent ul{
    float: left;
    width: 50%;
}
footer #fnav {width: 450px;margin-top: 25px;}
footer #fnav a {width: calc((100%/4) - 3px);display: inline-block;color: #111111;font-size: 15px;text-align: end;}
footer #infoBox { margin: 0 5%; }
footer #infoBox p { margin-bottom: 5px; }
footer #infoBox p a { color: #171819; }
footer #infoBox p i {margin-right: 5px;display: inline-block;color: #c18c80;}
footer #infoBox .links { margin: 10px 0; }
footer #infoBox .links a {margin-right: 10px;width: 40px;height: 40px;border: 1px transparent solid;background: rgb(226 213 202 / 20%);border-radius: 50%;text-align: center;line-height: 35px;color: #c18c80;}
footer .copyright >div {font-size: 12px;color: #888787;text-align: end;}
footer .copyright .text {color: #868686;display: flex;}
footer #extrainfoBix ul li font {min-width: 55px;display: inline-block;font-size: 15px;color: #384048;}
footer #extrainfoBix ul li font * {font-size: 15px;color: #272525;}
footer #extrainfoBix ul li b {display: inline-block;width: 22px;height: 22px;background: #bf9c84;text-align: center;line-height: 19px;margin-right: 10px;}
footer #extrainfoBix ul li a { position: relative; display: inline-block; }
footer .copyright{display: flex;align-items: center;justify-content: flex-end;margin-top: 10px;}
footer #fnav .copyright .text a{
    width: 100%;
    color: #868686;
    margin-left: 5px;
    font-size: 14px;
}
/* 懸浮鈕 */
.social-float {
	position: fixed;
	bottom: 120px; /* 高於 #gotop 的 bottom: 60px */
	right: 15px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	z-index: 9999; /* 比 gotop 稍低一點即可 */
  }
  
  .social-float a {
	width: 45px;
	height: 45px;
	border-radius: 50%;
	background-color: #bf9c84;  /* 跟 gotop 一樣 */
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	transition: transform 0.3s;
  }
  
  .social-float a:hover {
	transform: scale(1.1);
  }
  
  .social-float img {
	width: 24px;
	height: 24px;
  }
/* gotop */
#gotop {position: fixed;z-index: 99;right: 15px;bottom: 60px;}
#gotop a{
    width: 45px;
    height: 45px;
    background: #bf9c84;
    color: #fff;
    border-radius: 50%;
    font-size: 14px;
    text-align: center;
    line-height: 45px;
}

/* webSeo */
#webSeo {position: relative;overflow: hidden;margin-top: 40px;padding: 10px 0;background: #406060;}
#webSeo .js-marquee-wrapper * , #webSeo .js-marquee * , #webSeo .seo * {font-weight: 400;font-size: 13px;color: #f1f1f1;-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: 1440px){
	.workframe {width: 95%;}
	header .mbMenu nav >ul >li >p a {}
}
@media screen and (min-width: 1281px){
	header .mbMenu {padding: 0 0 0 20px;width: calc(100% - 480px);}
	header .mbMenu #menuIcon { display: none; }
	header .mbMenu nav >ul >li {position: relative;overflow: hidden;display: inline-block;}
	header .mbMenu nav >ul >li:hover , header .mbMenu nav >ul >li .menu_body .subOption >li:hover , header .mbMenu nav >ul >li .menu_body .sub2Option >li:hover { overflow: visible; }
	header .mbMenu nav ul li b { display: none; }
	header .mbMenu nav >ul >li .menu_body , header .mbMenu nav >ul >li .menu_body .subOption li ul { position: absolute; width: 170px; background: #fff; left: calc(50% - 85px); z-index: 1; opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); }
	header .mbMenu nav >ul >li:hover .menu_body { opacity: 1; transform: translateY(0); }
	header .mbMenu nav >ul >li .menu_body .subOption li ul { top: 0; left: 170px; -webkit-transform: translateY(0); -webkit-transform: translateX(30px); transform: translateY(0); transform: translateX(30px); }
	header .mbMenu nav >ul >li:last-child .menu_body .subOption li ul { left: auto; right: 170px; }
	header .mbMenu nav >ul >li .menu_body .subOption li:hover ul.sub2Option , header .mbMenu nav >ul >li .menu_body .subOption li ul.sub2Option li:hover ul.sub3Option { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); }
	header.headerfixed .mbMenu nav >ul >li >p a {}
	header.headerfixed .menuBox .mbMenu nav >ul >li >p a { padding: 20px 10px; }
	header.headerfixed #linelink { padding: 11px 0; }
	footer #infoBox .links a:hover {border-color: #c18c80;}
	footer #extrainfoBix ul li a:hover img { display: block; }
}
@media screen and (max-width: 1280px){
	header .mbMenu nav >ul{
    display: block;
}
header .mbMenu .btnBox{
    position: absolute;
    width: 350px;
    right: 20px;
    top: 20px;
}
header .mbMenu nav >ul >li:hover >p a{
    background: rgb(191 156 132 / 10%);
    color: #000;
}
header form#hSearch{
    top: 140px;
}
header form#hSearch input{
    width: 150px;
}
	header #cis { height: 79px; line-height: 79px; }
	header .mbMenu { position: absolute; padding: 0; width: 100%; right: 0; }
	header .mbMenu nav {position: fixed;overflow-y: scroll;padding: 0 30px;width: calc(100% - 60px);height: 0;background: #e5dbd2;top: 79px;right: 0;z-index: 100;}
	header .mbMenu nav >ul >li {border-bottom: 1px rgb(101 15 36 / 10%) solid;}
	header .mbMenu nav >ul >li >p { position: relative; }
	header .mbMenu nav >ul >li >p a {padding: 10px 50px 10px 20px;height: auto;line-height: 180%;}
	header .mbMenu nav >ul >li >p b , header .mbMenu nav >ul >li .menu_body .subOption li .bo b { position: absolute; margin: 10px 0; width: 26px; display: block; text-align: center; color: #e5dbd2; top: 0; right: 10px; background-color: #fff;border-radius: 5px;padding-bottom: 2px;}
	header .mbMenu nav >ul >li .menu_body , header .mbMenu nav >ul >li .menu_body .sub2Option , header .mbMenu nav >ul >li .menu_body .sub3Option { display: none; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }
	header .mbMenu nav >ul >li .menu_body .subOption { padding-bottom: 20px; }
	header .mbMenu nav >ul >li .menu_body .subOption li .bo { position: relative; }
	header .mbMenu nav >ul >li .menu_body .subOption li >div a { padding: 2px 50px 2px 20px; border-bottom: 0; color: #5390cb; }
	header .mbMenu nav >ul >li .menu_body .subOption li .sub3Title a { color: #e2f0fe; }
	header .mbMenu nav >ul >li .menu_body .sub3Option li >div a { color: #ad9c8f; }
	header .mbMenu nav >ul >li .menu_body .subOption li .bo b { padding: 2px 0; }
	header .mbMenu[data-type="2"] nav {padding: 70px 30px 30px 30px;height: calc(100vh - 139px);}
	header #linelink {float: right;padding: 14px 0 15px;}
	header #linelink a { font-size: 12px; }
	#banner { padding-top: 79px; }
	footer .row {width: 100%;}
	footer #fnav { margin-bottom: 20px; width: 100%; text-align: center; }
	footer #fnav a {padding: 5px 10px;width: auto;}
	footer #infoBox { margin: 0; }
}
@media screen and (max-width: 1024px){
#banner{
    padding-top: 70px;
}
}
@media screen and (max-width: 768px){
	footer .row { width: 100%; }
	footer #infoBox p {margin: 0 0 5px;width: 100%;display: inline-block;}
	footer .copyright >div { display: inline-block; }
	footer .copyright .text { margin-left: 5px; }
footer .row .infortent ul{float: none;width: 100%;}
}
@media screen and (max-width: 640px){
footer #fnav a{width: calc((100%/4) - 15px);padding: 5px 10px 5px 0;}
footer #fnav{
    text-align: left;
}
}
@media screen and (max-width: 500px){
	header #cis {width: calc(100% - 210px);margin-left: 10px;}
	.phoneWrap {position: fixed;width: calc(100% - 74px);display: block;bottom: 20px;left: 10px;z-index: 99;}
	#gotop{
    bottom: 20px;
}
	.phoneWrap li {width: calc((100%/3) - 4px);display: inline-block;}
	.phoneWrap li a {padding: 8px 15px;background: rgb(191 156 132);border-radius: 25px;display: block;text-align: center;line-height: 30px;font-size: 15px;color: #fff;font-weight: bold;}
	.phoneWrap li a i {
    font-size: 22px;
}
	header #linelink{
    display: none;
}
header .mbMenu #menuIcon{
    right: 10px;
}
#webSeo{
    margin: 0;
    padding-bottom: 80px;
}
footer #extrainfoBix ul li font *{
    font-size: 14px;
}
footer #fnav a{width: calc((100%/3) - 15px);padding: 5px 10px 5px 0;text-align: left;}
footer #extrainfoBix ul li font{font-size: 14px;}
}