@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(//fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url("https://fonts.googleapis.com/css?family=Muli:300,400,600|Playfair+Display:700");
@import url('https://fonts.googleapis.com/css?family=Frank+Ruhl+Libre|Mrs+Saint+Delafield|Noto+Sans+TC|Noto+Sans+TC:wght@700|Playfair+Display|Spartan&display=swap');

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

body { margin:0; }
body ::selection { background: #1e1d24; color: #fff; }
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: #1e1d24; }
body::-webkit-scrollbar-thumb { background: #696870; }
body::-webkit-scrollbar-thumb:hover { background: #7f7d89; }

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: 'Muli', Helvetica, Arial, 'Noto Sans TC','Noto Sans TC', sans-serif, 'Heiti TC', sans-serif ;font-size: 16px;word-wrap: break-word;word-break: break-all;-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;font-weight: initial;}

: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;font-size: 0;}

fieldset { border: 0; }

.wrapper section { overflow: hidden; margin: 50px auto 20px; width: 1280px; }

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

img { max-width: 100%; }

a:link , a:visited , a:hover {text-decoration: none;vertical-align: initial;color: #696969;padding: 0 0px;}

* 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-"] * , .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;padding: 0 1px;}

/* 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; }
.webBox .wrapper .wrap {position: relative;z-index: 20;}

/* workframe */
.workframe {margin: 0 auto;width: 90%;position: relative;}

/* header */
header {position: fixed;top: 0;left: 0;transition: width .5s ease-out, left .5s ease-out;background: #fff;z-index: 999;margin: 0 0 0 auto;padding: 15px 20px;width: calc(100% - 40px);box-shadow: 0 0 20px 0px rgb(0 0 0 / 15%);overflow: hidden;}
header #menuIcon {position: absolute;width: 40px;height: 40px;display: block;z-index: 2;right: 20px;top: 11px;display: none;}
header #menuIcon span { position: absolute; width: 30px; height: 2px; background: #141414; display: block; right: 7px; transition: all linear .3s; }
header #menuIcon span:nth-child(1) { top: 10px; }
header #menuIcon span:nth-child(2) { top: 18px; width: 16px; }
header #menuIcon span:nth-child(3) { top: 27px; width: 22px; }
header #menuIcon[data-type="2"] span:nth-child(1) { transform: rotate(45deg) translate(6px, 7px); }
header #menuIcon[data-type="2"] span:nth-child(2) { opacity: 0; }
header #menuIcon[data-type="2"] span:nth-child(3) { transform: rotate(-45deg) translate(5px, -7px); width: 30px }
header #cis {overflow: hidden;width: 350px;float: left;}
header .menu_nav{float:left;margin-left:50px;}
header .menu_nav ul{display:flex;}
header .menu_nav li{margin: 0 15px;}
header .menu_nav li p a{font-size: 16px;height: 75px;line-height: 75px;color: #161616;letter-spacing: 2px;}
header .menu_nav li:hover p a{color:#1298f7;}
header #alink{position:absolute;right: 58px;top: 20px;}
header #alink a{background:#1298f7;height: 65px;display: inline-block;line-height: 65px;color: #fff;padding: 0 50px;margin-left: 10px;}
header #alink a:last-child{background: #4caf50;}
header .topIconBox p { position: relative; margin: 29px 0; text-align: center; }
header nav {position: fixed;width: 40%;height: calc(100vh - 150px);padding: 0px 0 150px;overflow-y: scroll;background: #f5f5f5;line-height: 80vh;top: 0;right: -100%;z-index: 1;opacity: 0;transition: all linear 0.3s;}
header nav::-webkit-scrollbar { width: 0; }
header nav[data-type="2"] { right: 0; opacity: 1; }
header nav ul {width: 100%;display: inline-block;margin-top: 5px;}
header nav ul li { position: relative; margin: 15px 0; }
header nav ul li p{ text-align:center; }
header nav ul li a {font-weight: 400;font-size: 16px;letter-spacing: 2px;}
header nav ul li b{ color: #c4aa8e; }
header nav ul li > a:hover{ color: #d0ccbb; }
header nav ul li:hover a:after { opacity: 1; transform: translateX(0px); transition: 0.8s; }
header nav ul li a:before {content: "";width: 65px;height: 1.5px;display: block;position: absolute;top: 28%;left: 0;background: #444032;transform: scale(0, 1);transition: transform .9s;transform-origin: right bottom;}
header nav ul li:hover a:before { transform-origin: left bottom; transform: scale(1, 1); width: 65px; }
header nav >ul >li .menu_body , header nav >ul >li .menu_body .subOption li ul { -webkit-transition-duration: .3s; -moz-transition-duration: .3s; -ms-transition-duration: .3s; -o-transition-duration: .3s; transition-duration: .3s; }
header nav >ul >li .menu_body ul {border-top: 3px #c3aa8e solid;}
header nav >ul >li .menu_body .subOption li {width: 80%;margin: 0 auto;overflow: hidden;line-height: 0px;}
header nav >ul >li .menu_body .subOption li >div a {padding: 10px 15px;border-bottom: 1px #c4aa8e42 solid;display: block;color: #949494;font-size: 14px;text-align: center;}
header nav >ul >li .menu_body .subOption li >div a:before{display:none}
header nav >ul >li .menu_body , header nav >ul >li .menu_body .subOption >li >ul , header nav >ul >li .menu_body .subOption >li >ul li .sub3Option { height: 0;transform: translateY(-1px);opacity: 0;}
header nav >ul >li.action .menu_body , header nav >ul >li .menu_body .subOption >li.action >ul , header nav >ul >li .menu_body .subOption >li >ul li.action .sub3Option { overflow: visible; height: inherit; transform: translateY(0); opacity: 1; }
header nav >ul >li .menu_body ul li .bo , header nav >ul >li .menu_body ul li .bo p {position: relative;}
header nav >ul >li .menu_body ul li .bo b{position:absolute;top: 7px;right: 8px;}
header nav >ul >li .menu_body ul.sub2Option , header nav >ul >li .menu_body ul.sub3Option { border-top: 0; }
header nav >ul >li .menu_body .subOption li .sub3Title a {padding: 10px 50px;color: #949494;}
header nav >ul >li .menu_body .subOption li .sub3Option a {padding: 10px 64px;color: #c4aa8e;}

/*BottomIconBox*/
header nav[data-type="2"] .BottomIconBox {position: fixed;bottom: 0px;right: 0px;width: 45%;text-align: center;background: #c4aa8e;display: none;}
header nav[data-type="2"] .BottomIconBox p { display: inline-block; text-align: center; padding: 18px 15px; }
header nav[data-type="2"] .BottomIconBox a i {font-size: 20px;transition: none;color: #fff;}
header nav[data-type="2"] .BottomIconBox a font{ color: #fff}

/*Search*/
#hSearch { right: 445px; z-index: 999; opacity: 1; }
form[name="hSearch"] { position: fixed; background: #fff; box-shadow: 0 0 7px rgba(24, 23, 23, .3); bottom: 80px; right: -80px; z-index: -99; opacity: 0; -webkit-transition-duration: .3s;-moz-transition-duration: .3s; -ms-transition-duration: .3s; -o-transition-duration: .3s; transition-duration: .3s;}
form[name="hSearch"] input { padding: 5px 10px; width: 270px; display: inline-block; }
form[name="hSearch"] a { padding: 5px 15px 9px; background: #c4aa8e; display: inline-block; color: #fff;}

/* footer */
footer {position: relative;width: 100%;background: #1265a8;padding-top: 15px;}
footer .row , footer .row .box { font-size: 0; }
footer .row .Textbox { width: 35%; display: inline-block; }
footer .row .box {width: 100%;display: block;}
footer .row .box li h3 {font-size: 20px;}
footer .row .box li article {font-size: 14px;color: #9e9e9e;margin: 5px 0 20px;}
footer #flogo{width:300px;margin:0 auto;}
footer #footerInfo >div, footer #footerInfo >div a{text-align:center;color: #fff;text-transform: uppercase;font-weight: bold;letter-spacing: 2px;}
footer #boutiquebox { margin-right: 4vw; padding: 5vw 4vw 5vw 9vw; background: #ede1d7; }
footer #boutiquebox p {line-height: 130%; font-size: 60px;}
footer #boutiquebox a {width: calc((100% / 3) - 10px);display: inline-block;}
footer #boutiquebox a font { display: block; font-family: 'Spartan', sans-serif; font-size: 12px; color: #000; }
footer #boutiquebox a font:last-child { margin-top: 10px; }
footer #boutiquebox .box ul li { color: #696969}
footer #boutiquebox .box .btn { text-align: left;}
footer #boutiquebox .box .btn a { position:relative; width: 120px; z-index: 3;}
footer #boutiquebox .box .btn a:after { position: absolute; bottom: -8px; left: 3px; width: 10px; height: 6px; background: #9c7556; z-index: -1; transition: all linear 0.5s; content: ""; opacity: 0}
footer #boutiquebox .box .btn a:hover:after{ width:60px; opacity:1}
footer #otherInfoBox {padding: 3.5vw 3.5vw 1.5vw;}
footer #otherInfoBox .box {margin-left: 0;}
footer #otherInfoBox #footerInfo #community a { margin: 0 5px; }
footer #otherInfoBox .box-footer { width: calc(100% - 380px); display: inline-block; vertical-align: top; font-size: 0; background: #fff; padding: 30px 42px 30px 0; margin-left: 54px; }
footer #otherInfoBox .box-footer ul { margin-left: 40px; width: calc(50% - 40px); display: inline-block; vertical-align: text-top; }
footer #otherInfoBox .box-footer ul li { padding: 1px 0; }
footer #otherInfoBox ul li font { min-width: 60px; display: inline-block; font-size: 16px; margin-left: 7px; color: #c4aa8e; }
footer #otherInfoBox ul li font * { font-size: 14px;color: #adadad; }
footer #otherInfoBox ul li font:first-child { text-align: justify; text-justify: distribute-all-lines; text-align-last: justify; }
footer #otherInfoBox ul li.plus-information b , footer #otherInfoBox ul li.plus-information span { display: inline-block; vertical-align: middle; }
footer #otherInfoBox ul li.plus-information a{ position: relative; display: inline-block; }
footer #otherInfoBox ul li.plus-information img{ position: absolute; max-width: 150px; bottom: 100%; left: 0; z-index: 8; max-height: 150px; display: none; }
footer #otherInfoBox ul li p { position: relative; margin: 3px 0; text-align: center; font-size: 13px; z-index: 1; }
footer #otherInfoBox ul li p.tit { font-family: 'Spartan', sans-serif; font-size: 14px; color: #727272; }
footer nav {padding: 0 10vw 15px;text-align: center;}
footer nav a {display: inline-block;font-size: 16px;color: #fff !important;}
footer nav a:after {margin: 0 10px 0 16px;display: inline-block;color: #b2b2b2;content: "/";}
footer nav a:last-child:after { content: ""; }

/*form*/
form p { margin: 10px 0; }
form p input[type="text"], form p input[type="password"] , form p textarea , form p select { width: 97%; padding: 10px 0; padding-left: 2%; background: rgba(255, 255, 255, 0.35); border: 1px #858384 solid; font-size: 16px; border-radius: 7px; }

/* webSeo */
#webSeo {overflow: hidden;width: 100%;font-size: 14px;background: #1298f7;margin-top: 20px;}
#webSeo .seo , #webSeo .seo * { font-size: 14px; color: #ffffff63; padding: 10px 0; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }

/* phoneWrap */
.phoneWrap{display: 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; }

/* gotop */
#gotop {position: fixed;width: 40px;height: 44px;background: #ffffff;border: 2px solid #1265a8;border-radius: 50%;display: block;text-align: center;line-height: 36px;right: 23px;bottom: 20px;z-index: 9999;}
#gotop:hover { background: #c4aa8e;}
#gotop i {font-size: 26px;color: #1265a8;}
#gotop:hover i{ color: #fff }

@keyframes blink { 0% , 80% { opacity: 1; } 81% , 100% { opacity: 0; } }


@media screen and (max-width: 1440px) {
	#gotop{bottom: 85px;}
	footer{padding-bottom: 20px;}
	header #alink{position:fixed;right: 0;top: unset;bottom: 0;display: flex;justify-content: space-between;width: 100%;}
	header #alink a{width:50%;display: block;margin: 0;text-align: center;}
    .wrapper section { overflow: hidden; margin: 50px auto 20px; width: 90%; }
}
@media screen and (min-width: 1281px) {
	footer #otherInfoBox ul li.plus-information a:hover img{ display: block }
}
@media screen and (max-width: 1280px) {
	header #cis{width:250px;}
	header .menu_nav li p a{height: 50px;line-height: 50px;}
}
@media screen and (max-width: 1180px) {
	header .menu_nav{display:none;}
	.workframe { padding:0 }
	header {position: fixed;width: calc(100% - 20px);top: 54px;padding: 5px 10px;}
	header #menuIcon { margin: 0; }
	header #cis {}
	header.headerTop #cis a { width: 110px; }
	header .topIconBox { position: absolute; top: 0; right: 10px; }
	header .topIconBox p { margin: 20px 10px; display: inline-block; }
	header #copy { display: none; }
	#hSearch { right: calc((100vw / 2) - 174px);}
    form[name="hSearch"]{bottom: 77px;}
	footer #boutiquebox { padding: 5vw; margin-right: 0; }
	footer #otherInfoBox { padding: 3vw 5vw; }
	footer #otherInfoBox ul.box { width: 100%; }
	header #menuIcon{display:block;}
}
@media screen and (max-width: 980px) {
	footer #boutiquebox p{ font-size:40px}
	footer #otherInfoBox .box {width: 100%;margin: 35px 0 0;}
	footer #otherInfoBox .box-footer {width: 100%;margin: 0 auto;display: block;overflow: hidden;padding: 50px 0px;}
	footer #otherInfoBox .box-footer ul {width: 80%;display: block; }
	footer #boutiquebox .box .btn { text-align:center; }
	footer #boutiquebox .box .btn a:after{ display: none; }
	footer #boutiquebox .box .btn a { text-align: center; margin:0 auto; }
	footer #otherInfoBox #footerInfo >div { display: inline-block; }
	footer #otherInfoBox #footerInfo , footer #otherInfoBox #footerInfo #flogo , footer #otherInfoBox #footerInfo #community { display: block;text-align: center; }
}
@media screen and (max-width: 768px) {
	header #cis{
    padding-top: 0px;
}
    header #cis a{}
	header nav { width:100% }
    header nav[data-type="2"] .BottomIconBox { width: 100% }
	header nav ul li > a:before { display: none; }
	footer .row .Textbox { width: 100%; padding-bottom: 25px; }
	footer #boutiquebox .box { width: 100%; display: block; text-align: center; }
	footer #boutiquebox .box p { margin: 0 15px 30px; display: inline-block; font-size: 8vw; }
	footer #boutiquebox .box a font { text-align: center; }
	footer #otherInfoBox ul li p {margin: 3px 10px 3px 0; font-size: 14px;vertical-align: super;}
	footer nav {padding: 0 5vw 10px;text-align: center;}
	footer nav a:last-child:after { margin-right: 0; }
}
@media screen and (max-width: 640px) {
	header nav{width:100%;}
    header .topIconBox p { margin: 20px 6px; display: inline-block; }
    header .topIconBox p:nth-child(2), header .topIconBox p:nth-child(3){ display:none }
    footer{
    padding-top: 0;
}
    footer #boutiquebox { padding: 11vw 7vw; }
    footer #boutiquebox article { font-size: 12px; }
    footer #boutiquebox .box .btn a span { font-size: 14px; }
	footer nav a{ font-size: 14px; }
    .phoneWrap { display:none; position:fixed; bottom:10px; left:10px; width: calc(100% - 16px); z-index:99; }
    .phoneWrap li { display:inline-block; width: calc(50% - 4px); }
    .phoneWrap li a { display:block; color:#fff; background: #80502a; padding:5px 15px; text-align:center; line-height:30px; font-size:9pt; }
    .phoneWrap li:nth-child(2) a { background: #af8869; }
    #gotop{ bottom: 65px}
}
@media screen and (max-width: 450px) {
	header .topIconBox { right: 5px; }
}