@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&family=Noto+Sans+SC&family=Playfair+Display:wght@500&family=Noto+Sans+TC:wght@100&display=swap');
@font-face {
font-family: 'Goldoni Regular';
font-style: normal;
font-weight: normal;
src: local('Goldoni Regular'), url('Goldoni_DEMO.woff') format('woff');
}
* { margin: 0; padding: 0; }
*:focus { outline: none; }

body { margin:0; }
body ::selection { background: #fff; text-shadow: none; }
body::-webkit-scrollbar { width: 5px; }
body::-webkit-scrollbar-track { background: #d0d0d0; }
body::-webkit-scrollbar-thumb { background: #3c3c3c; }
body::-webkit-scrollbar-thumb:hover { background: #222222; }

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;font-weight: 300;line-height: 170%;border-width: 0;font-family: "sans-serif","Lucida Grande","Arial","Arial Narrow";font-size: 15px;word-wrap: break-word;word-break: break-all;-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 { 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; }

/* webBox */
.webBox { position: relative; overflow: hidden; width: 100%; }
.webBox .pageh1 {position: absolute;top: 0;z-index: -999;color: #fff;}
.webBox .wrapper { position: relative; background: #fff; z-index: 2; }

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

/* Sitemap */
#Sitemap #jsonUL a { color: #6d6d6d; }

/* bgTxt */
.bgTxt {position: relative;z-index: 1;}
.bgTxt.title {display: inline-block;width: 100%;text-align: center;font-size: 70px;color: #4b415d;font-weight: 400;text-transform: uppercase;padding: 2vw 0 2vw;font-family: 'Goldoni Regular';}
.bgTxt.title h3{font-size: 22px;color: #917ab9;text-align: center;margin-top: -10px;letter-spacing: 0.5px;}

/* more */
p.more {padding: 5px 0 20px;text-align: center;}
p.more a {position: relative;overflow: hidden;padding: 8px 50px;display: inline-block;align-items: center;border: 1px #ffffff solid;letter-spacing: .06em;line-height: 30px;transition: 1.2s ease 1.8s;transform: translateY(0%);display: flex;flex-direction: column;align-content: center;}
p.more a:before {position: absolute;width: 100%;height: 100%;background: #ffffff;top: 0;left: 0;transform: translateY(110%);transition: .4s cubic-bezier(.23,1,.32,1);content: "";}
p.more a font {position: relative;display: inline-block;font-size: 13px;color: #ffffff;z-index: 2;}


/* header */
.mobile-main-nav,.nav-func,.subnav,.sub2nav,.phoneWrap,.sub2Option,.sub3Option{display:none}
header{position:fixed;z-index:202;left: 0;top:0;width: 100%;transition:all linear .3s;padding: 8px 0;background: #fff;display: flex;flex-direction: row;align-items: center;justify-content: space-around;}
header.headerTop{
    box-shadow: 0 0 10px rgba(54, 53, 53, 0.1);
}
header #cis{
    position: relative;
    top: 0;
    display: flex;
    padding-left: 80px;
}
header #cis a{display:block;background-repeat:no-repeat;background-position:0 50%;background-size:contain}
header #cis a img{width: 300px;}
header #top-nav{border-top:5px solid #0583c9;border-bottom:1px solid #ededed;transition:all linear .2s}
header #menubar{
    /* width: calc(100% - 310px); */
    /* margin: 0 auto; */
    display: flex;
}
header .share{
    position: relative;
    display: flex;
}
header .share .btnBox{
	
display: flex;
	
align-items: center;
}
header .share .btnBox a{
    display: flex;
    padding: 6px 6px;
    background-color: #917ab9;
    border-radius: 50%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 2px;
}
header .share .btnBox a svg{
    width: 25px;
    height: 25px;
    fill: white;
}
header .share a.IG svg{
    width: 22px;
    height: 22px;
    padding: 3px;
}
#openNav a span{position:absolute;width: 25px;height:2px;background: #4b415d;display:block;left: 0;transition:all linear .3s;}
#openNav a span:nth-child(1){top:10px}
#openNav a span:nth-child(2){top:18px;}
#openNav a span:nth-child(3){top:27px;}
#openNav a b{
    position: absolute;
    top: 7px;
    right: 0;
    color: #4b415d;
    font-size: 13px;
    line-height: 180%;
}
#openNav.open a span:nth-child(1){transform:rotate(45deg) translate(6px,7px)}
#openNav.open a span:nth-child(2){opacity:0}
#openNav.open a span:nth-child(3){transform:rotate(-45deg) translate(5px,-7px);}
.mobile-main-nav{position:fixed;left:0;top:0;width: 540px;background: #fff;height: 100vh;z-index:-1;transition:transform 1s cubic-bezier(0.23,1,0.32,1);display: flex;transform:scale(0,1);transform-origin:left center 0;flex-direction: column;align-items: center;justify-content: space-evenly;}
.mobile-main-nav.Xopen{z-index:99999999;transform:scale(1,1);transform-origin:left center 0;}
.mobile-main-nav-bg{position:absolute;top:0;left:-100%;width:100%;content:'';background: rgb(25 25 25 / 25%);height:100vh;z-index:-2;transform:scale(0,1);transform-origin:right center 0;transition:transform .5s cubic-bezier(0.23,1,0.32,1);}
.mobile-main-nav-bg.Bopen{z-index:6;left:0;transform:scale(1,1);transform-origin:left center 0;}
.nav-funcB{position:fixed;left: 40px;top: 25px;font-size:30px;color:#565656;display:block;width: 80px;height:40px;z-index:9999999999;}
.topBox{
    position: relative;
    top: 10px;
    left: 0px;
}
.topBox p{
    display: inline-block;
}
.topBox p a{
    color: #644f89;
    padding: 10px 20px;
}
.topBox p a:hover{color: #3c3c3c;}
.topBox p:first-child a{
    background-color: #886ab9;
    color: #fff;
}
.rightTab{text-align:center;font-size:12px;font-weight:700}
.rightTab >p,.rightTab .translate{display:inline-block;color:#a7a7a7;vertical-align:top;margin:0 5px}
.rightTab >p a{color:#939393}
.rightTab .translate form p{overflow:hidden;border-radius:25px;background:#fff}
.rightTab .translate form p a{color:#fff;float:right;display:block;width:30px;text-align:center;background:#640000;font-size:20px}
.rightTab .translate form input{border-top-left-radius:25px;border-bottom-left-radius:25px;padding:2px 10px;width:100px;vertical-align:initial}
#mobile-menu{overflow:auto;margin: 0px 40px 0;}
#mobile-menu h2{position: relative;font-size: 18px;letter-spacing: .15em;padding-bottom: 25px;margin-bottom: 25px;transition: all .8s;font-size: 20px;letter-spacing: 0;font-weight: 700;}
#mobile-menu h2:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 2px;
    background-color: #886ab9;
    transition: all .8s;
}
#mobile-menu h2 span{
    font-size: 20px;
    letter-spacing: 0;
    font-weight: 700;
    margin-left: 5px;
}
#mobile-menu ul{
    overflow: hidden;
}
#mobile-menu ul li{
    float: left;
    width: calc(100%/3);
}
#mobile-menu >ul >li .menu_head,.subOption >li .sub2Title,.subOption >li .sub3Title{overflow:hidden;padding: 15px 0;position:relative;}
#mobile-menu >ul >li .menu_head.c0 b,.subOption >li .sub2Title.c0 b,{display:none}
#mobile-menu >ul >li .menu_head p,.subOption >li .sub2Title p,.subOption >li .sub3Title p{float:left;font-size:11pt;width:calc(100% - 20px);}
#mobile-menu >ul >li .menu_head a,.subOption >li .sub2Title a,.subOption >li .sub3Title a{color: #5c5c5c;font-size: 15px;line-height:110%;transition:all linear .3s;letter-spacing: .05em;font-weight: 500;position: relative;}
#mobile-menu >ul >li .menu_head a:after {
    content: '/';
    position: absolute;
    left: 105px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 13px;
    color: #dadada;
}
#mobile-menu >ul >li .menu_head b,.subOption >li .sub2Title b,.subOption >li .sub3Title b{color:#fff;cursor:pointer;position:absolute;right:0;top:0;width:50px;height:65px;text-align:center;line-height:65px;font-size:20px}
.subOption >li .sub2Title b,.subOption >li .sub3Title b{height:57px;line-height:57px}
#mobile-menu >ul >li .menu_body li p,.subOption >li .sub2Option li p{background:#640000;padding:5px 15px;font-size:14px;border-bottom:1px solid #000}
#mobile-menu >ul >li .menu_body li a,.subOption >li .sub2Option li p a{color:#474747;display:block;padding:10px 35px;font-size:15pt;color:#fff;text-align:center}
#mobile-menu .subOption >li .sub2Title{background:#640000;padding:15px 15px 15px 30px;font-size:14px;border-bottom:1px solid #000}
#mobile-menu .subOption >li .sub2Title p{background:none;padding:0;border:0}
#mobile-menu .subOption >li .sub2Title p a{padding:0;border:none;color:#fff}
#mobile-menu .subOption >li .sub2Title.bo p a{display:inline-block;color:#fff}
#mobile-menu .subOption >li .sub3Title{background:#451616;padding:15px 15px 15px 45px;border-bottom:1px solid #000}
#mobile-menu .subOption >li .sub3Title p{background:none;width:calc(100% - 30px);padding:0;border:0}
#mobile-menu .subOption >li .sub3Title p a{padding:0;color:#fcfcfc}
#mobile-menu .subOption >li .sub3Option p{padding:15px 10px;background:#2d0e0e}
#mobile-menu .subOption >li .sub3Option p a{padding:0;color:#fff}
.bottomBox{position: relative;/* bottom: 40px; */left: 0;width: calc(100% - 80px);}
.bottomBox .social{
    text-align: end;
    border-bottom: 1px solid #e4e4e4;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.bottomBox .social a{
    padding: 0 3px;
    height: 26px;
    display: inline-block;
}
.bottomBox .social a svg{
	width:30px;
	height:30px;
	fill:#563b83;
}
.bottomBox .social a:hover{opacity:.7;}
.bottomBox .social a img{
    width: 20px;
    height: 20px;
}
.bottomBox .company{}
.bottomBox .company p , .bottomBox .company p a{
    font-size: 14px;
    color: #323232;
}

/* footer */
footer {background: #330433;padding-top: 10px;}
footer a {color: #f2f2f2;}
footer .footercont {position: relative;width: 1055px;margin: 0 auto;box-sizing: border-box;outline-offset: -25px;font-size: 0;}
footer .footercont .bgTxt.title{color: #fff;}
footer .footercont .title h3.contact-txt{color: aliceblue;}
footer .footercont .title h3:after {left: auto;}
footer .footercont ul {}
footer .footercont ul:last-child {}
footer .footercont ul li i {color: #d1d1d1;font-size: 18px;width: 20px;text-align: center;}
footer .footercont ul li i svg{
    width: 20px;
    height: 20px;
    fill: white;
}
footer .footercont ul li font {margin-left: 10px;color: #d7a297;}
footer .footercont ul li.plus-information img{ position: absolute; max-width: 150px; bottom: 100%; left: 0; z-index: 8; max-height: 150px; display: none; }
footer #footerInfo {padding: 10px 0 0;font-size: 0;}
footer #footerInfo .row {width: 100%;display: inline-block;text-align: end;}
footer #footerInfo .row #flogo {text-align: center;margin-bottom: 10px;}
footer #footerInfo .row #flogo a { margin-bottom: 10px; display: inline-block; }
footer #footerInfo .row .foot {margin-left: 10px;display: inline-block;font-size: 12px;color: #ffffff;}
footer #footerInfo .row .foot.text {color: #c7c7c7;}
footer #footerInfo #sitefooter >div {text-align: center;}
footer #footerInfo #sitefooter >div a {margin: 5px 0 10px 14px;display: inline-block;color: #fffc;font-size: 16px;}
footer #footerInfo #sitefooter #community {padding: 5px 0 15px;}
footer #footerInfo #sitefooter #community a{width: 37px;height: 32px;border: 1px solid #fff;padding-top: 3px;text-align: center;}
footer .secondBox{
    overflow: hidden;
}
footer .secondBox .left{
    float: left;
    width: 50%;
}
footer .secondBox .right{
    float: right;
    width: 50%;
}
footer .secondBox .right #footerInfo{
    padding: 0;
}
footer .secondBox .right #footerInfo #fnav{
    text-align: end;
    margin-bottom: 3px;
}
footer .secondBox .right #footerInfo #fnav a{
    display: inline-block;
    width: calc((100%/3) - 5px);

    text-align: end;
}


footer #footerInfo .row #community{
    margin-left: 10px;
    display: inline-block;
}
footer #footerInfo .row #community a i{
    font-size: 13px;
    margin: 0 2px;
}

/* webSeo */
#webSeo {position: relative;overflow: hidden;padding: 10px 0;margin-top: 20px;border-top: 1px solid rgb(255 255 255 / 0.05);}
#webSeo .js-marquee-wrapper * , #webSeo .js-marquee * , #webSeo .seo * {font-size: 13px;color: #e8e8e8;-webkit-transition: none;-moz-transition: none;-ms-transition: none;-o-transition: none;transition: none;}

/* gotop */
.gotop {position: fixed;right: 20px;bottom: 20px;z-index: 990;mix-blend-mode: difference;}
.gotop a {display: block;color: #fff;opacity: 0;padding: 15px 5px 5px;font-size: 13px;}
.gotop span {position: relative;margin: 0 auto 10px;width: 1px;height: 50px;background: #fff;display: block;animation: gotop 2s infinite alternate ease-in-out;-webkit-animation: gotop 2s infinite alternate ease-in-out;}
.gotop span:before {position: absolute;border-left: 4px solid transparent;border-bottom: 7px solid #fff;border-right: none;border-top: none;display: block;top: -5px;left: -3px;content: "";}
#fgtop{
    bottom: 55px;
}
#fgtop a {color: #fff;opacity: 1;}
#fgtop span { background: #fff; }
#fgtop span:before { border-bottom-color: #fff; }

@keyframes gotop { 0%, 100% { height: 50px; } 50% { height: 70px; } }
@-webkit-keyframes gotop { 0%, 100% { height: 50px; } 50% { height: 70px; } }

/* SeoStarRating */
#SeoStarRating font { margin-right: 5px; display: inline-block; vertical-align: bottom; }
#SeoStarRating font:first-child {font-size: 14px;color: #ff9800;}
#SeoStarRating font:nth-child(2) {font-size: 16px;color: #ff9800;}
#SeoStarRating font:last-child {color: #6D6D6D;font-size: 14px;}

@media screen and (min-width: 1281px) {
	header #cis{
    padding-left: 15%;
}
	header #menubar{
    width: calc(75% - 310px);
    display: flex;
    justify-content: center;
}
	p.more a:hover {}
	p.more a:hover:before { transform: translateY(0); }
	p.more a:hover font {color: #000;}	
	footer #footerInfo #sitefooter #community a:hover { background: #fff; color: #d49e93;}
}
@media screen and (max-width: 1280px) {
	header #menubar{display:none}
	header #cis{
    width: 60%;
}
	.workframe { width: 90%; }
	footer .footercont {width: 90%;padding-top: 4vh;}
	footer #footerInfo #sitefooter { margin-left: 0; width: 100%; }
	header .share{right: 10px;}
	.nav-funcB{left: 15px;}
}
@media screen and (min-width: 1025px) {
header #main-menu >ul{text-align: center;overflow:visible;display: flex;justify-content: center;}
header #main-menu >ul >li{display: flex;vertical-align:top;position:relative;margin: 15px 5px;}
header #main-menu >ul >li:nth-child(4){
    /* margin-right: 185px; */
}
header #main-menu >ul >li:nth-child(5){
    /* margin-left: 180px; */
}
header #main-menu >ul >li >a{display:block;padding: 0 10px;position:relative;font-weight:700;font-size:16px;}
header #main-menu >ul >li:hover >a:after,header #main-menu .subnav >li:hover >a:after{width:100%}
header #main-menu >ul >li a p{color: #4b415d;font-weight: 500;}
header #main-menu >ul >li a:hover p{color: #bf6ea8;}
header #main-menu .subnav{position:absolute;width:150px;left:5px;top:100%;padding-top:15px;overflow:visible}
header #main-menu li:hover .subnav{display:block}
header #main-menu .subnav >li{text-align:left;margin-bottom:10px;position:relative}
header #main-menu .subnav >li >a{color:#fff;display:inline-block;line-height:130%;position:relative;padding-bottom:7px}
#mobile-menu >ul >li .menu_head a:hover,.subOption >li .sub2Title a:hover,.subOption >li .sub3Title a:hover{
    color: #bda16f;
}
header #main-menu .sub2nav{left:100%;top:-5px;position:absolute;width:150px;z-index:2}
header #main-menu .sub3nav{width:150px;background:#6e1010;z-index:3}
header #main-menu .subnav >li:hover .sub2nav,header #main-menu .sub2nav li:hover .sub3nav{display:block;overflow:visible}
header #main-menu .sub2nav li{position:relative}
header #main-menu .sub2nav li a,header #main-menu .sub3nav li a{color:#fff;line-height:130%;background:#2a2929;display:block;padding:10px}
header #main-menu .sub3nav li a{background:#171717;padding:10px 20px}
header #main-menu .sub2nav li a:hover,header #main-menu .sub3nav li a:hover{background:#590505}
@keyframes rush {
0%{transform:translateX(-100%);transform-origin:0 0}
to{transform:translateX(0);transform-origin:0 0}
}
@keyframes rush2 {
0%{transform:translateX(0);transform-origin:100% 0}
to{transform:translateX(100%);transform-origin:100% 0}
}

}

@media screen and (max-width: 1024px) {

header{display: flex;justify-content: flex-end;}
#mobile-menu{}
header .workframe{width:100%}
}
@media screen and (max-width: 980px) {
	.bgTxt.stitle { position: relative; font-size: 10vw; -webkit-writing-mode: inherit; writing-mode: inherit; }
	footer {
    padding-bottom: 50px;
}
	footer a { font-size: 14px;}
	footer .footercont:before, footer .footercont:after{background-size: 75%;background-repeat: no-repeat;top: -60px;bottom: -120px;right: -130px;}
	footer .footercont:after {top: auto;left: -42px;}
	footer .footercont .title h3:before , footer .footercont .title h3:after { display: none}
	.gotop {bottom: 60px;right: 0;}
	#fgtop{
        bottom: 100px;   
    }
}
@media screen and (max-width: 640px) {
	.bgTxt.title {font-size: 50px;}
	.bgTxt.title h3 {margin-top: 0px;font-size: 18px;}
	footer .footercont ul {}
	footer .footercont ul:last-child {}
	footer .footercont .title h3.contact-txt{font-size: 18px;margin-top: -10px;text-align: left;}
	footer .footercont .bgTxt.title{display: flex;flex-direction: column;align-items: center;margin: 0 auto 30px;}
	footer .secondBox .right #footerInfo #fnav{
    text-align: inherit;
    margin: 20px auto;
}
	header{    height: 75px;    padding: 0;}
	.nav-funcB{top: 20px;width: 50px;}
	header .share{top: 0;right: 3px;}
	#mobile-menu >ul >li .menu_head a,.subOption >li .sub2Title a,.subOption >li .sub3Title a{}
	#mobile-menu >ul >li .menu_body li a,.subOption >li .sub2Option li p a{font-size:13pt}
	#mobile-menu >ul >li .menu_head b,.subOption >li .sub2Title b,.subOption >li .sub3Title b{height:56px;line-height:56px}
	header #cis{width: 100%;left: 0;justify-content: center;padding-left: 45px;}
	header #cis a {}
	#openNav a span{
}
	#openNav a b{
        display: none;
    }
	header #cis a img{
        width: 240px;
        display: flex;
    }
	footer .secondBox .left{float: none;width: 100%;}
    footer .secondBox .right{float: none;width: 100%;margin-top: 20px;}
    footer .secondBox .right #footerInfo #fnav a{    text-align: left;}
    footer #footerInfo .row{    text-align: left;}
	.phoneWrap {display:block;position:fixed;bottom: 0px;left:0;width:100%;z-index: 99;}
	.phoneWrap ul{
    overflow: hidden;
    width: 95%;
    margin: 0 auto;
}
	.phoneWrap ul li {float: left;width: calc(50% - 10px);background: rgb(94 69 139);text-align: center;padding: 6px 0;border-radius: 50px;margin: 5px;}
	.phoneWrap ul li a {position:relative;color:#fff;display: block;text-align: center;}
	.phoneWrap ul li:first-child a{}
}
@media screen and (max-width: 540px) {
.mobile-main-nav{
    width: 100%;
}
#mobile-menu ul li{
    width: 50%;
}
footer #footerInfo .row #community{
    display: block;
}
footer #footerInfo .row .foot{
}
}
@media screen and (max-width: 480px) {
    header{
    display: flex;
    justify-content: space-evenly;
}
    .nav-funcB{right:10px;top:18px}
}