@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('/css/contentBuilder.css');
@import url('/css/35/root.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');
@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&family=Unbounded:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@400;500;600;700;800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&family=DM+Serif+Display:ital@0;1&display=swap');

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

body { margin: 0; }
body ::selection { background: #9857a4; 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; }
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: 1.4;border-width: 0;font-family: var(--font-family), sans-serif;color: var(--info);font-size: 16px;word-wrap: break-word;word-break: break-word;-webkit-transition: all .5s ease-out;-moz-transition: all .5s ease-out;-ms-transition: all .5s ease-out;-o-transition: all .5s ease-out;transition: all .5s ease-out;}

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

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, .txt_clamp { overflow: hidden; height: 1.5em; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }

/* 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: #fafafa;z-index: 2;}

/* workframe */
.workframe {position: relative;margin: 0 auto;width: min(90%, 1440px);z-index: 1;}

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

/* header */
header {position: absolute;padding: 15px 5%;width: 90%;font-size: 0;top: 0;left: 0;z-index: 98;border-top: 15px solid var(--primary);display: flex;align-items: center;justify-content: space-between;}
header .row {display: inline-block;}
header #btnnbox {display:flex;align-items: center;gap: 30px;}
header #btnnbox .subscribe{display:flex;align-items: center;font-family: 'Inter';gap: 8px;font-size: 14px;color: white;font-weight: 700;border: 2px solid white;border-radius: 50px;padding: 10px 25px;}
header #btnnbox .subscribe:hover{background: #dcdcdc;border-color: #dcdcdc;color: var(--secondary);}
header #btnnbox .subscribe:hover svg .st1{stroke: var(--secondary);}
header #btnnbox .subscribe svg{width: 19px;height: 19px;}
header #cis img{height: 60px;object-fit: contain;-webkit-filter: contrast(0) brightness(150%);filter: contrast(0) brightness(200%);}
header #menuIcon {width: 35px;height: 35px;display: flex;text-align: right;flex-direction: column;justify-content: space-evenly;gap: 2px;}
header #menuIcon font.line {width: 100%;height: 2px;background: white;display: block;}
header #menuIcon font.txt { display: block; text-align: right; line-height: 120%; letter-spacing: 1px; font-family: 'Oswald', sans-serif; font-size: 13px; color: #151529; }
header #mbMenu {position: fixed;top: 0;right: -500px;z-index: 99;}
header #mbMenu[data-type="2"] { right: 0; -webkit-transition-duration: .3s; -moz-transition-duration: .3s; -ms-transition-duration: .3st; -o-transition-duration: .3s; transition-duration: .3s; }
header #mbMenu #closeIcon {position: absolute;width: 35px;height: 35px;display: block;right: 95px;top: 40px;}
header #mbMenu #closeIcon:before , header #mbMenu #closeIcon:after {width: 30px;height: 2px;background: white;display: block;content: "";-webkit-transform: translateY(8px) rotate(45deg);transform: translateY(13px) rotate(45deg);}
header #mbMenu #closeIcon:after { -webkit-transform: translateY(8px) rotate(-45deg); transform: translateY(12px) rotate(-45deg); }
header #mbMenu nav {overflow-y: scroll;padding: 5vw;width: 15vw;height: calc(100vh - 10vw);background: var(--secondary);display: flex;flex-direction: column;justify-content: space-between;}
header #mbMenu nav::-webkit-scrollbar { width: 0; }
header #mbMenu nav ul li a {padding: 10px 0;display: inline-block;color: #fff;font-size: 25px;position: relative;font-family: "Inter", sans-serif;font-weight: 700;}
header #mbMenu nav ul li a:after{content:'';position: absolute;width: 0;height: 1px;background: white;bottom: 10px;left: 0;}
header #mbMenu nav ul li:hover a:after{width:100%}
header #mbMenu nav .btnBox { margin-bottom: 30px; }
header #mbMenu nav .btnBox a { margin-right: 20px; min-width: 16px; display: inline-block; color: #a3a0ca; }
header #mbMenu nav .btnBox a#translateLink { font-size: 15px; }
header #mbMenu nav .btnBox a i { vertical-align: unset; }
header #mbMenu #fixBox { position: fixed; text-align: center; bottom: 66px; right: 25px; }
header #mbMenu #fixBox a { margin-bottom: 15px; display: block; }
header .contactBox *{color:white;font-size: 14px;font-weight: 100;}
header .contactBox .tit{margin-bottom:5px;border-top: 1px solid rgb(255 255 255 / 15%);padding-top: 30px;}
header .contactBox p{display:grid;grid-template-columns: 25px 1fr;}
header.headerfixed {position: fixed;background: var(--primary);border: 0;}

/* hSearch */
header form[name="hSearch"] { position: absolute; background: #292929; box-shadow: 0 0 10px rgba(21, 20, 41, .5); border: 1px #151427 solid; border-radius: 3px; right: 0; top: -100%; opacity: 0; z-index: 99; -webkit-transition-duration: .3s; -moz-transition-duration: .3s; -ms-transition-duration: .3st; -o-transition-duration: .3s; transition-duration: .3s; }
header form[name="hSearch"] input { margin: 5px 0; padding: 5px 20px; background: transparent; color: #fff; }
header form[name="hSearch"]:before { position: absolute; width: 1px; height: 25px; background: #a2a2a2; display: inline-block; right: 59px; top: calc((100% - 25px) / 2); content: ""; }
header form[name="hSearch"] a { padding: 0 20px; display: inline-block; color: #a2a2a2; }
header form#hSearch { top: 70px; opacity: 1; }

/* footer */
footer {position: relative;background: var(--secondary);}
footer:after{content:'';position: absolute;width: 100%;height: 100%;top: 0;left: 0;background-image: url(/images/35/footer.jpg);background-size: cover;background-position: 50% 50%;background-repeat: no-repeat;opacity: .15;}
footer *{color:white;font-size: 16px;}
footer svg{width: 17px;height: 17px;fill: #8f5daa;}
footer #pictureBox { padding: 30px 0; background: #eee; }
footer #pictureBox ul li a { margin: 0 10px; }
footer #contactBox {padding: 40px 0;position: relative;}
footer #contactBox .workframe {width: min(90%, 1300px);display: grid;grid-template-columns: 35% 1fr;}
footer #flogo img {height: 67px;object-fit: contain;-webkit-filter: contrast(0) brightness(150%);filter: contrast(0) brightness(200%);}
footer .follow{display: flex;margin-top: 30px;gap: 10px;}
footer .follow a{width: 45px;aspect-ratio: 1/1;background: #935aa7;border-radius: 50px;display: flex;align-items: center;justify-content: center;}
footer .follow a.ennthu img{-webkit-filter: contrast(0) brightness(150%);filter: contrast(0) brightness(200%);width: 30px;}
footer .follow a svg{fill:white}
footer #fcount{border-left: 1px solid #643c79;padding-left: 15%;display: grid;gap: 20px;}
footer #fnav{display:flex;gap: 10px 40px;flex-wrap: wrap;}
footer #fnav a{font-family: 'Inter';letter-spacing: .5px;font-weight: 600;}
footer #fnav a:hover{color:#8f5daa}
footer #fcount .tit {font-family: 'Inter';letter-spacing: .5px;font-weight: 700;}
footer #contactBox #fcount .tit b { position: relative; margin-right: 10px; display: inline-block; font-weight: 400; color: #fff; }
footer #contactBox #fcount .tit b:after { position: absolute; width: 100%; height: 2px; background: #d21a20; display: block; left: 0; bottom: -11px; content: ""; }
footer #contactBox #fcount .tit font { font-size: 13px; color: #daaba5; }
footer #contactBox #fcount ul {display: grid;gap: 20px;}
footer #contactBox ul li  {display: inline-flex;align-items: center;gap: 5px;}
footer #contactBox ul li * {font-weight: normal;line-height: 1;vertical-align: middle;}
footer #contactBox ul li.plus-information b , footer #contactBox ul li.plus-information span { display: inline-block; vertical-align: middle; }
footer #contactBox ul li.plus-information a { position: relative; display: inline-block; }
footer #contactBox ul li.plus-information img { position: absolute; max-width: 150px; bottom: 100%; left: 0; z-index: 8; max-height: 150px; display: none; }
footer .footercop{display:flex;align-items: center;justify-content: space-between;flex-wrap: wrap;gap: 15px;}
footer .footercop *{color: #876e95;font-size: 13px;}
footer .footercop .text{display:flex;align-items: center;gap: 5px;}
footer #infoBox {position: relative;}
footer #infoBox{height:300px;overflow: hidden;}
footer #infoBox:before{content:'';position: absolute;width: 100%;height: 100%;opacity: .4;background: var(--secondary);z-index: 1;}
footer #infoBox video , footer #infoBox iframe {overflow: hidden; position: absolute; width: 100%; height: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }

/* gotop */
#gotop {position: fixed;bottom: 10%;right: 25px;z-index: 99;}
#gotop a {width: 60px;aspect-ratio: 1/1;background: var(--primary);border-radius: 50%;display: flex;text-align: center;color: #fff;align-items: center;justify-content: center;}
#gotop a svg{width:25px;height:25px;fill: white;}

/* webSeo */
#webSeo { position: relative; overflow: hidden; }
#webSeo .js-marquee-wrapper * , #webSeo .js-marquee * , #webSeo .seo * { font-weight: 400; font-size: 13px; color: #929292; -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 (min-width: 1281px){
	footer #contactBox ul li.plus-information a:hover img { display: block; }
}
@media screen and (max-width: 1440px){
    header #mbMenu nav{width:25vw}
}
@media screen and (max-width: 1280px){
}
@media screen and (max-width: 1024px){
    header #mbMenu nav{width:35vw;padding: 10vw 5vw 5vw;height: calc(100vh - 15vw);}
}
@media screen and (max-width: 980px){
    footer #contactBox .workframe{display:flex;flex-direction: column;gap: 40px;}
    footer #fcount{border:0;padding: 0;}
	footer #infoBox .workframe { width: 100%; }
	footer #infoBox .row , footer #infoBox #fnav { padding: 10px 5%; width: 90%; }
	footer #infoBox #fnav { width: 90%; }
	footer #infoBox #fnav a { padding: 2px 5px; width: 90px; }
	footer #infoBox #fnav a:after { display: none; }
	footer #infoBox .row .footercop , footer #infoBox .row .footercop >div { margin-left: 0; text-align: left; }
}
@media screen and (max-width: 640px){
	select {
    -webkit-appearance: none;  /* Safari 和 Chrome，常用於iOS下移除內建樣式 */
    -moz-appearance: none;     /* FireFox */
    appearance: none;
}
    header #mbMenu{right:-150%}
    header{padding: 10px 5%;}
    header #cis img{height: 50px;}
    header #btnnbox .subscribe{padding: 14px 10px;font-size: 11px;}
    header #btnnbox{gap:10px}
    header #mbMenu nav{width: 100%;padding: 25vw 10% 10vw;height: 110vh;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;display: flex;justify-content: flex-start;gap: 110px;}
    header #mbMenu #closeIcon{right:20px;}
    footer #infoBox{height:200px;}
    footer #contactBox{padding-bottom: 50px;}
}