@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/37/root.css');
@import url('/css/contentBuilder.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200..900&display=swap');
@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=Montserrat:wght@100;200;300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Cormorant:ital,wght@0,300..700;1,300..700&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');


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

body { margin: 0; }
body ::selection { background: #191919; text-shadow: none; color: #fff; }
body::-webkit-scrollbar { width: 5px; }
body::-webkit-scrollbar-track { background: #c0c0c0; }
body::-webkit-scrollbar-thumb { background: #191919; }
body::-webkit-scrollbar-thumb:hover { background: #000; }

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: 'Noto Serif TC','Noto Sans TC', 'Noto Sans SC', sans-serif;font-size: 16px;word-wrap: break-word;word-break: break-word;-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%; }

a , a:link , a:visited , a:hover { display: inline-block; text-decoration: none; }

.text-clamp , a.text-clamp { overflow: hidden; height: 27px; 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; }

/* svg */
svg.arrow { width: 15px; }
svg.arrow.white { fill: #fff; }
svg.show { width: 8px; }

/* 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: url(/images/37/bg.jpg) #f9f5f0;z-index: 2;}

/* workframe */
.workframe { position: relative; margin: 0 auto; width: 1440px; font-size: 0; z-index: 1; }

/* Sitemap */
#Sitemap #jsonUL a { display: block; font-size: 0; color: #000; }
#Sitemap #jsonUL a * { display: inline-block; line-height: 170%; font-size: 16px; vertical-align: top; }
#Sitemap #jsonUL a font { width: calc(100% - 15px); }
#Sitemap #jsonUL p a { font-size: 22px; }

/* header */
header { position: fixed; width: 100%; z-index: 999; }
header .barBox {position: relative;padding: 30px 80px 0;width: calc(100% - 160px);display: flex;z-index: 999;align-items: center;display: grid;grid-template-columns: 25% 1fr;}
header .barBox a {color: #ffffff;}
header #cis {margin: 0 auto 0 0;}
header #cis img {width: 100%;height: 65px;object-fit: contain;}
header .navbox ul{display:flex;align-items: center;gap: 10px;}
header .rightBox >div { margin-left: 15px; display: inline-block; line-height: 50px; }
header #searchBox form { position: absolute; background: rgb(0 0 0 / .7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 0; right: -500px; }
header #searchBox form input { padding: 5px 10px; width: 150px; background: none; display: inline-block; color: #fff; vertical-align: middle; }
header #searchBox form a { padding: 5px 10px; display: inline-block; vertical-align: middle; color: #fff; }
header #toolbar a { display: inline-block; }
header #menuIcon a {-webkit-transition: none;-moz-transition: none;-ms-transition: none;-o-transition: none;transition: none;display: inline-flex;align-items: center;}
header #menuIcon a font.btn {position: relative;margin-left: 10px;width: 15px;height: 0px;display: inline-block;order: 2;}
header #menuIcon a font{font-family: "Cormorant Garamond", serif;order: -1;}
header #menuIcon a font.btn span {position: absolute;width: 100%;height: 1px;background: #4b381f;display: block;top: 0;left: 0;}
header #menuIcon a[data-type="1"] font.btn span:nth-child(2) {top: calc(100% - 1px);width: 60%;}
header #menuIcon a[data-type="1"] font.btn span { transition: transform .4s cubic-bezier(.215,.61,.355,1),opacity .4s cubic-bezier(.215,.61,.355,1), -webkit-transform .4s cubic-bezier(.215,.61,.355,1); }
header #menuIcon a[data-type="2"] font.btn span { transition: .4s cubic-bezier(.645,.045,.355,1); }
header #menuIcon a[data-type="2"] font.btn span:nth-child(1) { top: 50%; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
header #menuIcon a[data-type="2"] font.btn span:nth-child(2) { top: 50%; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
header #menuBox .bg{position:absolute;bottom: 0;right: 0;width: 50vw;height: 95vh;}
header #menuBox .bg img{height:100%;object-fit: cover;animation: moveObject 100s linear infinite;}
@keyframes moveObject{0%{object-position:0% 50%}50%{object-position:100% 50%}100%{object-position:0% 50%}}
header #menuBox {overflow: hidden;position: fixed;padding: 0;width: 86vw;height: 100vh;right: 0;left: 1000px;top: 0;opacity: 0;z-index: -1;display: flex;flex-direction: column;align-items: flex-start;align-content: flex-start;background: var(--complement);background-repeat: no-repeat;background-position: 50% 50%;justify-content: center;}
header.open #menuBox{padding: 10vh 8vw 0;}
header #menuBox[data-type="2"] {width: 86vw;font-size: 0;opacity: 1;z-index: 998;left: 0;}
header #menuBox .box, header .contactBox {width: 45vw;display: inline-block;}
header #menuBox .box >ul {padding: 12vh 0 1vh;}
header #menuBox .box >ul >li {}
header #menuBox .box >ul >li:last-child { border-bottom: 0; }
header #menuBox .box >ul >li >p ,
header #menuBox .box ul li .menu_body ul li .bo { position: relative; }
header #menuBox .box ul li .menu_body ,
header #menuBox .box ul li .menu_body >ul li .sub2Option ,
header #menuBox .box ul li .menu_body >ul li .sub3Option { margin-bottom: 15px; display: none; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }
header #menuBox .box >ul >li >p a {padding: 10px 0;display: flex;font-weight: 300;font-size: 22px;color: #fff;align-items: center;text-transform: uppercase;}
header #menuBox .box >ul >li >p a span{font-size: 14px;opacity: 0;transition: all linear 0.3s;transform: translateX(0);color: #fff;font-family: "Cormorant", serif;}
header #menuBox .box >ul >li:hover >p a span{display: inline-flex;transform: translateX(10px);opacity: 1;align-items: center;}
header #menuBox .box >ul >li:hover >p a span:before{content:'';display: inline-block;width: 20px;height: 1px;background: #fff;margin: 0 10px;}
header #menuBox .box ul li b {position: absolute;padding: 5px 0;width: 100%;display: inline-block;text-align: end;color: var(--black);top: calc((100% - 33px) / 2);right: 0;}
#menuBox .box ul li .menu_body >ul li .sub2Option { margin: 5px 0 15px; padding: 5px 15px; background: #3a3a3a; }
header #menuBox .box ul li .menu_body >ul li a {padding: 4px 20px;display: block;font-size: 15px;color: var(--complement);letter-spacing: 1px;}
header #menuBox .box ul li .menu_body .sub2Option a { color: #fff; }
header #menuBox .box ul li .menu_body .sub3Option a { color: #8b8b8b; }
header #menuBox .box ul li .menu_body .sub3Option a:before { content: "- "; }
header #menuBox .contactBox ul {border-top: 1px rgb(62 58 57 / 20%) solid;padding-top: 20px;}
header #menuBox .contactBox ul li {padding: 10px 0;}
header #menuBox .contactBox ul li:last-child { border-bottom: 0; }
header #menuBox .contactBox ul li h4 {font-size: 16px;color: #fff;margin-bottom: 10px;font-family: "Cormorant Garamond", serif;font-weight: 400;letter-spacing: 2px;}
header #menuBox .contactBox ul li p a {padding: 5px 0;display: inline-block;font-size: 16px;color: #ffff;font-weight: 300;}
header #menuBox .contactBox ul li p i {margin-right: 10px;font-size: 18px;display: inline-block;color: #d3cdc8;}
header #menuBox .contactBox ul li.community a {margin: 15px 10px 5px 0;width: 50px;height: 50px;border: 1px #fff solid;border-radius: 50%;display: inline-flex;justify-content: center;align-items: center;color: #d3cdc8;}
header #menuBox .contactBox ul li.community a i {font-size: 17px;}
header #menuBox .contactBox ul li.community a svg {width: 36%;height: 36%;fill: #d3cdc8;}
header .follow{display:inline-flex;align-items: center;gap: 55px;margin-right: 30px;}
header .follow a{display:inline-flex}
header .follow a svg{width: 20px;height: 20px;fill: #fff;}
header.headerfixed {background: var(--complement);}
header.headerfixed .barBox{padding: 15px 80px;}
header #cis img { -webkit-filter: contrast(0) brightness(150%); filter: contrast(0) brightness(200%); }
header.open a { color: #fff; }
header.open #menuIcon a font.btn span { background: #fff; }
header.open .navbox{display:none;}
header #menuIcon a[data-type="2"] font{
    color: var(--white);
}

/* contactBox */
#contactBox{background-image: url(/images/37/conBg.jpg);width: 75vw;padding: 6vw 11.5vw 6vw 13.5vw;display: grid;grid-template-columns: 47% 40%;align-items: center;position: relative;z-index: 20;background-position: top right;}
#contactBox:before{content:'';width: calc(100% + 18vh);position: absolute;left: 0;top: 0;height: 1px;background: rgb(121 85 72 / 30%);z-index: 5;}

#contactBox * {color:#fff;}
#contactBox .sub_title {line-height: 120%;text-align: center;font-size: 60px;font-family: "Cormorant Garamond", serif;font-style: unset;font-weight: 300;display: inline-block;}
#contactBox svg{fill:#fff;width: 37px;height: 37px;}
#contactBox .info:last-child svg{width: 32px;height: 32px;}
#contactBox .h2_title{margin-top: 5px;line-height: 1.7;font-size: 26px;font-weight: 400;letter-spacing: 2px;}
#contactBox .info{position:relative;display: grid;grid-template-columns: 1fr 40px;align-items: center;padding: 25px 0;border-bottom: 1px solid rgb(255 255 255 / 30%);}
#contactBox .info p{font-size: 16px;display: flex;align-items: center;gap: 40px;letter-spacing: 2px;font-weight: 300;}
#contactBox .info p b{font-size: 17px;font-weight: 400;letter-spacing: 0;font-family: "Cormorant Garamond", serif;}
#contactBox .info a{position:absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 2;}

/* footer */
footer {padding: 5vw 0 2vw;background-image: url(/images/37/footerBg.jpg);color: #4e4e4e;position: relative;z-index: 20;}
footer *{color: #4b381f;font-size: 15px;font-family: 'Noto Sans TC', 'Noto Sans SC', sans-serif;}
footer .wbox {width: min(88%,1366px);margin: auto auto 30px;display: grid;grid-template-columns: 40% repeat(2, 1fr);gap: 40px 100px;}
footer .copyright{width: min(88%,1366px);margin: auto;opacity: .5;display: flex;align-items: center;gap: 10px;}
footer .copyright *{font-size: 13px;}
footer #flogo {}
footer #flogo img {width: 150px;}
footer .navv {display:grid;grid-template-columns: repeat(3, 1fr);gap: 10px;}
footer .wbox p {font-family: "Cormorant Garamond", serif;font-size: 22px;margin-bottom: 10px;color: #99856c;}
footer #footerinfo ul { margin-bottom: 20px; font-size: 0; }
footer #footerinfo ul li {position: relative;margin-bottom: 7px;display: flex;gap: 5px;align-items: center;}
footer #footerinfo ul li.plus-information img { position: absolute; max-width: 150px; bottom: 100%; left: 0; z-index: 8; max-height: 150px; display: none; }
footer .follow{display:inline-flex;align-items: center;gap: 25px;margin-top: 30px;}
footer .follow a{display:inline-flex}
footer .follow a svg{width: 18px;height: 18px;fill: #635642;}

/* gotop */
#gotop {position: fixed;right: 20px;bottom: 20px;z-index: 99;}
#gotop a {background: var(--primary);width: 50px;aspect-ratio: 1/1;border-radius: 50px;}
#gotop a:before {margin: 22px auto 0;width: 30%;height: 30%;border: var(--white) solid;border-width: 1px 0 0 1px;display: block;content: "";transform: rotate(45deg) translate(-1px, -1px);-webkit-transform: rotate(45deg) translate(-1px, -1px);-webkit-animation: gotop 1s linear infinite;animation: gotop 1s linear infinite;}
@-webkit-keyframes gotop { 0% , 100% { -webkit-transform: rotate(45deg) translate(-1px, -1px); } 50% { -webkit-transform: rotate(45deg) translate(1px, 1px); } }
@keyframes gotop { 0% , 100% { transform: rotate(45deg) translate(-1px, -1px); } 50% { transform: rotate(45deg) translate(1px, 1px); } }

/* footFollow */
.footFollow{position:fixed;display: flex;flex-direction: column;align-items: center;gap: 10px;right: 20px;bottom: 80px;z-index: 999;}
.footFollow a{width: 50px;aspect-ratio:1 / 1;background: var(--primary);display:flex;justify-content:center;align-items:center;border-radius:50%;opacity: .7;}
.footFollow a svg{width: 20px;height: 20px;fill: #fff;}
.footFollow a.line svg{width: 25px;height: 25px;}
.footFollow a img{-webkit-filter: contrast(0) brightness(150%);filter: contrast(0) brightness(200%);}

/* webSeo */
#webSeo { position: relative; overflow: hidden; margin-top: 40px; padding: 10px 0; }
#webSeo .js-marquee-wrapper * , #webSeo .js-marquee * , #webSeo .seo * { font-weight: 100; font-size: 13px; color: #959595; -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: 1500px){
	.workframe , footer .wbox {}
    header #menuBox .box >ul >li >p a{padding: 0;}
    header .barBox{
    grid-template-columns: 21% 1fr;
}
    header .navbox ul{
    gap: 6px;
}
}
@media screen and (max-width: 1440px){
    header #menuBox .contactBox ul li:last-child{display:none;}
}
@media screen and (max-width: 1400px){
    header .navbox {/* display:none; */}
    header .barBox{padding-top: 25px;}
    footer .wbox{grid-template-columns: 35% repeat(2, 1fr);}
}
@media screen and (min-width: 1281px){
    header .navbox li a{display: flex;flex-direction: column;align-items: center;position: relative;padding: 0;}
    header .navbox li a:after{content:'';position: absolute;width: 0;height: 1px;background: #fff;bottom: -15px;}
    header .navbox li:hover a:after{width:100%}
    header .navbox li a .cn{opacity: 1;font-weight: 300;padding: 0 10px;letter-spacing: 3px;font-size: 16px;}
    header .navbox li:hover a .cn{transform: translateY(0);opacity: 0;}
    header .navbox li a .en{text-transform:uppercase;opacity: 0;font-family: "Cormorant Garamond", serif;position: absolute;}
	header .navbox li:hover a .en{opacity: 1;}
	footer #footerinfo ul li.plus-information:hover img { display: block; }
	#gotop a:hover {padding: 0px 0 4px 0;}
	header #menuIcon a { display: none; }
	header:not(.headerfixed) #cis { opacity: 0; }
    header #menuBox{
    display: none;
}
}
@media screen and (max-width: 1280px){
    footer .wbox{grid-template-columns: repeat(2, 1fr);}
    footer #flogo{grid-column: 1 / 3;}
    #contactBox{background-position: top left;width: 85%;padding: 9% 7.5%;grid-template-columns: repeat(2, 1fr);}
    header .navbox{display:none;}
	header .barBox, header.headerfixed .barBox {padding: 8px 5%;width: 90%;}
	header #menuBox[data-type="2"] {overflow-y: scroll;}
	header #menuBox[data-type="2"]::-webkit-scrollbar { width: 0; }
	header #menuBox .contactBox ul { padding: 0 0 15vh; border: 0; }
	#contactBox { grid-template-columns: 1fr; gap: 20px; background-size: cover; }
	.webBox .wrapper:before,.webBox .wrapper:after { display: none; }
	header #cis img { filter: none; }
	header.headerfixed #cis img { -webkit-filter: contrast(0) brightness(150%); filter: contrast(0) brightness(200%); }
	header.headerfixed #menuIcon a font.btn span { background: #ffffff; }
	header.headerfixed #menuIcon a font { color: #fff; }
	header .barBox a { color: #4b381f; }
	header .barBox { display: flex; flex-direction: row; justify-content: flex-start; width: auto; }
header #menuBox .box >ul >li{
    margin-bottom: 10px;
}
    header #menuBox .box >ul >li >p a{
    font-size: 18px;
}
}
@media screen and (max-width: 600px){
    footer #flogo{grid-column:unset;margin: 0 0 30px;}
    footer .wbox{grid-template-columns:1fr;gap: 10px;}
    #contactBox{padding: 15% 7.5%;}
    #contactBox .sub_title{ font-size: 40px;}
    #contactBox .h2_title{font-size: 24px;letter-spacing: 1px;}
    header .follow{display:none;}
	footer { padding-bottom: 50px; }
	footer #footerinfo ul li { width: calc(100% - 20px); }
	footer #footerinfo .copyright { text-align: left; }
    header #cis img{height:auto;width: 65px;}
    header #linelink a{margin:0 5px;}
    header #menuBox[data-type="2"]{padding: 10vh 8vw 0;}
    header .rightBox{position:absolute;right: 2.5%;z-index: 5;}
    header #cis a{display:flex;justify-content: flex-start;text-align: left;}
    header #menuBox .box >ul{padding: 3vh 0;}
    header #menuBox{display: flex;justify-content: flex-start;padding: 10vh 8vw 0;height: 90vh;}
    header #menuBox .box, header .contactBox{width: 100%;display: block;}
    header #menuBox .bg{width: 100%;height: 25vh;bottom: 0;top: unset;}
    header #menuBox .bg img{width:100%;}
    header #linelink{right: 65px;}
	footer {padding: 50px 0 30px 0;}
	footer #footerinfo ul li { width: calc(100% - 20px); }
	footer #footerinfo .copyright { text-align: left; }
	header .rightBox .mb { position: fixed; margin-left: 0; width: 25%; background: #1f1f1f; line-height: 100%; left: 0; bottom: 0; }
	header .rightBox #searchBox { left: 25%; }
	header .rightBox #translateLink { left: 50%; }
	header .rightBox #oredericon { left: 75%; }
	header .rightBox .mb >a { padding: 10px 0; display: block; border-left: 1px #373737 solid; text-align: center; color: #fff; }
	header .rightBox #linelink { line-height: 47px; }
	header .rightBox #linelink a { margin: auto; padding: 5px 5% 4px; width: 90%; border-left: 0; display: inline-block; line-height: 140%; font-size: 14px; }
	header #searchBox form { position: fixed; bottom: 60px; }
	footer #flogo img { width: 100px; }
}