@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/37/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=Montserrat:wght@100;200;300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap');

@font-face { font-family: 'ChenYuluoyan-Thin'; font-style: normal; font-weight: normal; src: url(/fonts/chenyuluoyan/ChenYuluoyan-Thin.ttf) format('truetype'); }
* { margin: 0; padding: 0; }
*:focus { outline: none; }
body { margin: 0; position: relative; }
body::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url(/images/37/img-natural-paper.png),radial-gradient(circle,rgb(255 255 255/0%) 1px,transparent 1px); background-size: auto,60px 60px; pointer-events: none; z-index: 9998; opacity: 0.2; }
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; }
html{font-size:100%;scroll-behavior:smooth;}
body{font-family:var(--font-tc);background:var(--paper);color:var(--secondary);line-height:1.75;letter-spacing:.02em;overflow-x:hidden;-webkit-font-smoothing:antialiased;}

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: var(--font-family); 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; color: var(--info); }
: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 {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; }
.pos_rel{position:relative;}.pos_abs{position:absolute;}.d_flex{display:flex;}.d_block{display:block;}
.workframe{width:min(92%,var(--width-xl));margin:0 auto;}
.img_cover{width:100%;height:100%;object-fit:cover;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
::selection{background:var(--primary);color:#fff;}

.rv{opacity:0;transform:translateY(46px);transition:opacity .9s cubic-bezier(.22,.8,.26,.99),transform .9s cubic-bezier(.22,.8,.26,.99);}
.rv.in{opacity:1;transform:none;}
.rv2{opacity:0;transform:translateY(46px) scale(.96);transition:opacity 1s ease,transform 1s cubic-bezier(.22,.8,.26,.99);}
.rv2.in{opacity:1;transform:none;}

.sec_eyebrow{display:inline-flex;align-items:center;gap:.55em;font-family:var(--font-en);font-weight:700;font-size:.8rem;letter-spacing:.14em;color:var(--primary);text-transform:uppercase;justify-content: flex-start;}
.sec_eyebrow::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--primary);animation:emPulse 2.4s infinite;}
@keyframes emPulse{0%,100%{box-shadow:0 0 0 0 rgba(var(--primary-rgb),.5);}55%{box-shadow:0 0 0 9px rgba(var(--primary-rgb),0);}}

.ghost_word span{white-space:nowrap;font-family:var(--font-en);font-weight:900;font-size:clamp(5.5rem,16vw,15rem);line-height:1;letter-spacing:.02em;color:transparent;-webkit-text-stroke:1.5px rgba(var(--secondary-rgb),.14);pointer-events:none;user-select:none;}
.ghost_word span{display:inline-block;padding-right:.6em;animation:ghostDrift 38s linear infinite;}
@keyframes ghostDrift{from{transform:translateX(0);}to{transform:translateX(-50%);}}


section#cases .sec_eyebrow{
    display: inline-flex;
    justify-content: center;
}
.em_btn{display:inline-flex;align-items:center;gap:.9em;padding:.95em 1.5em .95em 1.9em;background:var(--secondary);color:#fff;border-radius:999px;font-weight:700;font-size:.95rem;letter-spacing:.08em;transition:transform .35s cubic-bezier(.34,1.56,.64,1),background .35s;}
.em_btn .arw{width:34px;height:34px;border-radius:50%;background:var(--primary);display:grid;place-items:center;transition:transform .45s cubic-bezier(.34,1.56,.64,1);}
.em_btn .arw svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.4;}
.em_btn:hover{transform:translateY(-3px);background:#000;}
.em_btn:hover .arw{transform:rotate(45deg);}
.em_btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--primary);outline-offset:3px;}


/*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 {font-size: 21px;color: #c2b49b;font-weight: 400;letter-spacing: 2.5px;line-height: 1.7;}
.webBox .wrapper_lines {width: 100vw;height: 100vh;top: 0;left: 0;z-index: -1;position: fixed;}
.webBox .wrapper_lines .center_box_1,.webBox .wrapper_lines .center_box_2,.webBox .wrapper_lines .center_box_3 { position: absolute; background: rgba(255,255,255,0.08); z-index: 10; pointer-events: none; }
.webBox .wrapper_lines .center_box_1 { width: 1px; height: 100%; left: 84px; }
.webBox .wrapper_lines .center_box_2 { width: 1px; height: 100%; left: 388px; }
.webBox .wrapper_lines .center_box_3 { width: 1px; height: 100%; right: 125px; }

/*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#top-navigation{position:fixed;inset:14px 0 auto;z-index:100;}
header#top-navigation .bar{width: min(96%,92%);margin:0 auto;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.78);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.7);border-radius:999px;padding: 1rem 1.8rem;box-shadow: 0 10px 10px rgba(29,28,26,.06);transition:box-shadow .4s;}
header#top-navigation.scrolled .bar{box-shadow:0 14px 40px rgba(29,28,26,.14);}
header#top-navigation .logo{display:flex;align-items:center;gap:.6em;font-family:var(--font-en);font-weight:900;font-size:1.25rem;letter-spacing:.02em;}
header#top-navigation .logo img{
    width: 220px;
}
header#top-navigation .logo small{font-family:var(--font-tc);font-weight:500;font-size:.66rem;color:var(--gray);letter-spacing:.2em;margin-left:.2em;}
header#top-navigation nav ul{display:flex;gap:1.8em;}
header#top-navigation nav a{font-size: 1rem;font-weight: 500;position:relative;letter-spacing: 0.9px;}
header#top-navigation nav a::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--primary);border-radius:2px;transform:scaleX(0);transform-origin:right;transition:transform .4s cubic-bezier(.6,0,.2,1);}
header#top-navigation nav a:hover::after{transform:scaleX(1);transform-origin:left;}
header#top-navigation .hd_cta{display:inline-flex;align-items:center;gap:.5em;background:var(--primary);color:#fff;font-weight:700;font-size:.88rem;padding:.75em 1.5em;border-radius:999px;letter-spacing:.06em;transition:transform .3s,background .3s;}
header#top-navigation .hd_cta:hover{transform:translateY(-2px);background:var(--primary-deep);}
#menu_line{display:none;width:46px;height:46px;border:0;border-radius:50%;background:var(--secondary);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;}
#menu_line span{width:18px;height:2px;background:#fff;border-radius:2px;transition:.35s;}
#menuBox{position:fixed;inset:0;background:rgba(243,241,236,.97);backdrop-filter:blur(10px);z-index:99;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:.45s;}
#menuBox.open{opacity:1;visibility:visible;}
#menuBox ul{text-align:center;}
#menuBox a{display:block;font-size: 1.7rem;font-weight: 600;padding:.45em;text-align: center;}
body.menu-open #menu_line span:nth-child(1){transform:translateY(7px) rotate(45deg);}
body.menu-open #menu_line span:nth-child(2){opacity:0;}
body.menu-open #menu_line span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}


/*sPictureBox*/
#sPictureBox { padding: 5vw 0; }
#sPictureBox .list { position: relative; }
#sPictureBox .list a { position: absolute; width: calc(100% - 60px); height: 100%; display: block; top: 0; left: 30px; z-index: 3; }
#sPictureBox .list .img { position: relative; margin: 0 30px; z-index: 1; }
#sPictureBox .list .img img { width: 100%; height: 200px; object-fit: cover; }
#sPictureBox .list .txt { position: absolute; padding: 65px 5%; width: calc(90% - 60px); background: -moz-linear-gradient(left,  rgba(240,244,247,1) 25%, rgba(240,244,247,0) 100%); background: -webkit-linear-gradient(left,  rgba(240,244,247,1) 25%,rgba(240,244,247,0) 100%); background: linear-gradient(to right,  rgba(240,244,247,1) 25%,rgba(240,244,247,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f4f7', endColorstr='#00f0f4f7',GradientType=1 ); top: 0; left: 30px; z-index: 2; }
#sPictureBox .list .txt h4 { width: 55%; height: 40px; font-weight: 400; font-size: 24px; color: #1f1f1f; }
#sPictureBox .list .txt .more { margin-top: 5px; text-align: left; }
#sPictureBox .list .txt .more font { margin-right: 10px; text-align: center; font-family: 'Montserrat', 'Noto Sans TC', sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: .7px; font-size: 13px; color: #1f1f1f; }

/*footer*/
footer#footer-info{background:var(--secondary);color:var(--paper);border-radius:56px 56px 0 0;padding:4.5rem 0 0;overflow:hidden;position:relative;}
footer#footer-info .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:3rem;padding-bottom:3.5rem;position:relative;z-index:1;}
footer#footer-info .f_logo{display:flex;align-items:center;gap:.6em;font-family:var(--font-en);font-weight:900;font-size:1.5rem;color:#fff;}
footer#footer-info .f_logo .dot{width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#ff8a3d,var(--primary));}
footer#footer-info .f_slogan{margin-top:1rem;font-size:.9rem;color:rgba(255,255,255,.6);max-width:26em;}
footer#footer-info h3{font-family:var(--font-en);font-weight:800;font-size:.78rem;letter-spacing:.28em;color:#ff8a4d;margin-bottom:1.3rem;text-transform:uppercase;}
footer#footer-info .contact p{display:flex;gap:1em;font-size:.9rem;margin-bottom:.9em;color:rgba(255,255,255,.85);}
footer#footer-info .contact .label{font-family:var(--font-en);font-weight:800;font-size:.68rem;letter-spacing:.16em;color:rgba(255,255,255,.45);min-width:3.4em;padding-top:.35em;}
footer#footer-info .contact a:hover{color:#ff8a4d;}
footer#footer-info .f_nav ul{display:grid;gap:.75em;}
footer#footer-info .f_nav a{font-size:.9rem;color:rgba(255,255,255,.8);display:inline-flex;align-items:center;gap:.6em;transition:.3s;}
footer#footer-info .f_nav a::before{content:'';width:0;height:1px;background:var(--primary);transition:width .35s;}
footer#footer-info .f_nav a:hover{color:#fff;padding-left:.2em;}
footer#footer-info .f_nav a:hover::before{width:16px;}
footer#footer-info .f_big{font-family:var(--font-en);font-weight:900;font-size:clamp(4rem,15vw,13rem);line-height:.9;text-align:center;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.14);user-select:none;transform:translateY(14%);}
footer#footer-info .copy{border-top:1px solid rgba(255,255,255,.1);padding:1.3rem 0;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.72rem;letter-spacing:.1em;color:rgba(255,255,255,.4);position:relative;z-index:1;}


/*gotop*/
#gotop { position: fixed; right: 40px; bottom: 65px; z-index: 99; }
#gotop a {padding: 20px 0 0 0px;letter-spacing: .3em;font-weight: 300;font-size: 12px;color: #c1b399;white-space: nowrap;-webkit-writing-mode: vertical-rl;-ms-writing-mode: tb-rl;writing-mode: vertical-rl;display: flex;flex-direction: row;text-transform: uppercase;}
#gotop[data-type="1"] a {border-color: #c1b399;}
#gotop[data-type="1"] a:before {border-width: 2px 0 0 2px;}
#gotop a:before {margin: 20px auto 0;width: 7px;height: 7px;border: #c1b399 solid;border-width: 2px 0 0 2px;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;order: 2;}
@-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); }
}

/*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 { width: 90%; }
}
@media screen and (min-width: 1281px) {
	#gotop a:hover { padding: 0 0 20px 10px; }
}
@media screen and (max-width: 1400px) {
}
@media screen and (max-width: 1280px) {
	#gotop { right: 15px; }
}
@media screen and (max-width: 1024px) {
	header#top-navigation nav{display:none;}
	header#top-navigation .hd_cta{display:none;}
	#menu_line{display:flex;}
    header#top-navigation .bar{
    padding: 1rem .9rem;
}
}
@media screen and (max-width:768px) {
	footer#footer-info{border-radius:32px 32px 0 0;}
	footer#footer-info .cols{grid-template-columns:1fr;gap:2.2rem;}
}
@media screen and (max-width: 600px) {
}
@media screen and (max-width: 550px) {
	#footer_btn a.gotop:before { margin-top: 7px; }
	#footer_btn a { width: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
}
@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
	.rv,.rv2{opacity:1;transform:none;}
}