:root {
	--yellow: #ffc400;
	--orange: #ff6a00;
	--dark: #222;
	--black: #111;
	--gray: #6c6c6c;
	--soft: #f5f1e8;
	--soft2: #fff8e3;
	--white: #fff;
	--container: 1180px;
	--radius: 28px;
	--shadow: 0 24px 60px rgba(23, 23, 23, .12)
}
* {
	box-sizing: border-box
}
html {
	scroll-behavior: smooth
}
body {
	margin: 0;
	font-family: "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif;
	color: var(--dark);
	background: #fff;
	line-height: 1.75;
	overflow-x: hidden
}
a {
	text-decoration: none;
	color: inherit
}
img {
	max-width: 100%;
	display: block
}
.container {
	width: min(var(--container), calc(100% - 40px));
	margin: auto
}
.section {
	padding: 110px 0
}
.subTitle {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	letter-spacing: .22em;
	color: var(--orange);
	font-weight: 800
}
.subTitle:before {
	content: "";
	width: 42px;
	height: 8px;
	background: linear-gradient(90deg, var(--yellow), var(--orange));
	border-radius: 99px
}
.sectionHead {
	max-width: 720px;
	margin-bottom: 42px
}
.sectionHead h2, .introText h2, .whyTitle h2, .cta h2 {
	font-size: clamp(34px, 5vw, 48px);
	line-height: 1.18;
	margin: 14px 0 16px;
	letter-spacing: -.04em
}
.sectionHead p, .introText p, .whyTitle p, .cta p {
	color: #666;
	margin: 0
}
.siteHeader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	transition: .35s
}
.siteHeader.isScrolled, .siteHeader.menuOpen {
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(14px);
	box-shadow: 0 12px 35px rgba(0, 0, 0, .08)
}
.headerInner {
	width: min(1320px, calc(100% - 40px));
	height: 86px;
	margin: auto;
	display: flex;
	align-items: center;
	gap: 28px
}
/*.logo {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-right: auto;
	color: #fff
}
.siteHeader.isScrolled .logo, .siteHeader.menuOpen .logo {
	color: var(--dark)
}
.logoMark {
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, var(--yellow), var(--orange));
	border-radius: 16px;
	font-weight: 900;
	color: #1a1a1a;
	box-shadow: 0 12px 30px rgba(255, 106, 0, .28)
}*/

/*==========================
Logo
==========================*/

.logo{
    display:flex;
    align-items:center;
    flex-shrink:0;
}

.logo img{
    display:block;
    height:72px;
    width:auto;
    transition:.3s;
}

.logo:hover img{
    transform:scale(1.03);
}

.logoText b {
	display: block;
	font-size: 20px;
	line-height: 1.1
}
.logoText em {
	display: block;
	font-style: normal;
	font-size: 10px;
	letter-spacing: .22em;
	opacity: .75
}
/*.mainNav {
	display: flex;
	align-items: center;
	gap: 22px;
	color: #fff;
	font-size: 15px
}*/

.mainNav{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:36px;
	color: #fff;
	font-size: 15px
}


.siteHeader.isScrolled .mainNav, .siteHeader.menuOpen .mainNav {
	color: var(--dark)
}
.mainNav a {
	position: relative;
	white-space: nowrap
}
.mainNav a:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -8px;
	width: 0;
	height: 3px;
	background: var(--yellow);
	border-radius: 99px;
	transition: .3s
}
.mainNav a:hover:after, .mainNav a.active:after {
	width: 100%
}
.headerTel {
	padding: 10px 18px;
	border-radius: 99px;
	background: var(--yellow);
	color: #1d1d1d;
	font-weight: 800
}
.menuBtn {
	display: none;
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	padding: 8px
}
.menuBtn span {
	display: block;
	height: 2px;
	background: currentColor;
	margin: 7px 0;
	transition: .3s
}
.hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	color: #fff;
	background: #111
}
.heroBg {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .52) 45%, rgba(0, 0, 0, .18) 100%), url('../images/banner.jpg') center/cover no-repeat;
	transform: scale(1.05);
	animation: heroZoom 12s ease forwards
}
.hero:after {
	content: "";
	position: absolute;
	left: -10%;
	bottom: -16%;
	width: 70%;
	height: 34%;
	background: linear-gradient(90deg, var(--yellow), var(--orange));
	filter: blur(2px);
	transform: rotate(-5deg);
	opacity: .96;
	border-radius: 55% 45% 0 0
}
.heroInner {
	position: relative;
	z-index: 2;
	width: min(1320px, calc(100% - 40px));
	margin: auto;
	display: grid;
	grid-template-columns: minmax(0, 720px) 320px;
	align-items: end;
	gap: 48px;
	padding-top: 90px
}
.heroTag {
	display: inline-flex;
	padding: 8px 18px;
	border: 1px solid rgba(255, 255, 255, .34);
	border-radius: 99px;
	backdrop-filter: blur(8px);
	font-weight: 700;
	letter-spacing: .12em
}
.hero h1 {
	font-size: clamp(44px, 7vw, 72px);
	line-height: 1.2;
	margin: 24px 0;
	letter-spacing: -.06em;
	max-width: 820px
}
.hero p {
	font-size: 18px;
	color: rgba(255, 255, 255, .84);
	max-width: 650px
}
.heroBtns, .ctaBtns {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 34px
}
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 0 28px;
	border-radius: 999px;
	font-weight: 900;
	transition: .3s
}
.btn.primary {
	background: var(--yellow);
	color: #151515;
	box-shadow: 0 18px 35px rgba(255, 196, 0, .25)
}
.btn.ghost {
	border: 1px solid rgba(255, 255, 255, .45);
	color: #fff
}
.btn.line {
	background: #06c755;
	color: #fff
}
.btn:hover {
	transform: translateY(-4px)
}
.heroCard {
	align-self: center;
	padding: 28px;
	border-radius: var(--radius);
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .22);
	backdrop-filter: blur(18px);
	box-shadow: 0 25px 80px rgba(0, 0, 0, .28)
}
.heroCard span {
	color: var(--yellow);
	font-weight: 900;
	letter-spacing: .18em;
	font-size: 12px
}
.heroCard strong {
	display: block;
	font-size: 28px;
	margin: 8px 0
}
.heroCard p {
	font-size: 15px;
	margin: 0
}
.paintDrop {
	position: absolute;
	z-index: 1;
	background: var(--yellow);
	opacity: .9;
	border-radius: 0 0 24px 24px
}
.drop01 {
	right: 12%;
	top: 0;
	width: 32px;
	height: 150px
}
.drop02 {
	right: 8%;
	top: 0;
	width: 18px;
	height: 90px;
	background: var(--orange)
}
.scrollHint {
	position: absolute;
	right: 34px;
	bottom: 34px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 11px;
	letter-spacing: .25em;
	color: rgba(255, 255, 255, .8);
	writing-mode: vertical-rl
}
.scrollHint span {
	width: 2px;
	height: 52px;
	background: rgba(255, 255, 255, .45);
	position: relative;
	border-radius: 99px
}
.scrollHint span:after {
	content: "";
	position: absolute;
	left: -3px;
	top: 0;
	width: 8px;
	height: 8px;
	background: #fff;
	border-radius: 50%;
	animation: scrollDot 1.8s infinite
}
.paintLayer {
	position: relative;
	background: #fff
}
.paintLayer:before {
	content: "";
	position: absolute;
	right: -120px;
	top: 100px;
	width: 430px;
	height: 160px;
	background: linear-gradient(90deg, rgba(255, 196, 0, .18), rgba(255, 106, 0, .12));
	border-radius: 999px;
	transform: rotate(-10deg)
}
.paintLayer:after {
	content: "PAINT";
	position: absolute;
	left: 4%;
	bottom: 30px;
	font-size: 13vw;
	font-weight: 900;
	line-height: 1;
	color: rgba(0, 0, 0, .035);
	letter-spacing: -.08em
}
.introGrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 70px;
	align-items: center;
	position: relative;
	z-index: 1
}
.introImg {
	position: relative
}
.introImg img {
	border-radius: 34px;
	box-shadow: var(--shadow);
	aspect-ratio: 1.18/1;
	object-fit: cover
}
.experienceBox {
	position: absolute;
	left: -28px;
	bottom: 36px;
	background: var(--dark);
	color: #fff;
	border-radius: 24px;
	padding: 22px 24px;
	display: flex;
	gap: 14px;
	align-items: center;
	box-shadow: var(--shadow)
}
.experienceBox b {
	font-size: 48px;
	color: var(--yellow);
	line-height: 1
}
.experienceBox span {
	font-size: 14px;
	line-height: 1.55
}
.introPoints {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-top: 30px
}
.introPoints div {
	padding: 18px 14px;
	background: var(--soft2);
	border-radius: 18px
}
.introPoints b {
	display: block;
	color: var(--orange);
	font-size: 14px
}
.introPoints span {
	font-weight: 800
}
.softBg {
	position: relative;
	background: linear-gradient(135deg, #f7f3ea 0%, #fff8e3 100%);
	overflow: hidden
}
.softBg:before {
	content: "";
	position: absolute;
	left: -160px;
	top: 70px;
	width: 520px;
	height: 160px;
	background: rgba(255, 255, 255, .42);
	border-radius: 999px;
	transform: rotate(-12deg)
}
.serviceGrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	position: relative;
	z-index: 1
}
.serviceCard {
	position: relative;
	min-height: 245px;
	padding: 34px;
	border-radius: 30px;
	background: rgba(255, 255, 255, .82);
	box-shadow: 0 18px 45px rgba(90, 72, 15, .08);
	overflow: hidden;
	transition: .35s
}
.serviceCard:before {
	content: "";
	position: absolute;
	right: -50px;
	top: -50px;
	width: 130px;
	height: 130px;
	background: var(--yellow);
	border-radius: 50%;
	opacity: .35;
	transition: .35s
}
.serviceCard i {
	font-style: normal;
	color: var(--orange);
	font-weight: 900;
	letter-spacing: .08em
}
.serviceCard h3 {
	font-size: 25px;
	margin: 28px 0 8px
}
.serviceCard p {
	color: #666;
	margin: 0
}
.serviceCard:hover {
	transform: translateY(-8px);
	background: #fff
}
.serviceCard:hover:before {
	transform: scale(2.2);
	opacity: .55
}
.why {
	background: #fff;
	position: relative
}
.why:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 38%;
	height: 100%;
	background: #f7f7f7;
	clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%)
}
.whyGrid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: .8fr 1.2fr;
	gap: 70px
}
.textLink {
	display: inline-block;
	margin-top: 24px;
	color: var(--orange);
	font-weight: 900
}
.whyList {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px
}
.whyItem {
	padding: 30px;
	border: 1px solid #eee;
	border-radius: 26px;
	background: #fff;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .05)
}
.whyItem b {
	font-size: 22px
}
.whyItem p {
	margin: 12px 0 0;
	color: #666
}
.darkSection {
	background: radial-gradient(circle at 20% 0%, rgba(255, 196, 0, .18), transparent 34%), #202020;
	color: #fff;
	position: relative;
	overflow: hidden
}
.darkSection:before {
	content: "WORKS";
	position: absolute;
	right: -20px;
	top: 20px;
	font-size: 12vw;
	font-weight: 900;
	color: rgba(255, 255, 255, .04);
	line-height: 1
}
.sectionHead.light p {
	color: rgba(255, 255, 255, .68)
}

.softBg2 {
	background: linear-gradient(180deg, #fff 0%, #f5f1e8 100%)
}
.newsGrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px
}
.newsCard {
	background: #fff;
	border-radius: 28px;
	overflow: hidden;
	box-shadow: 0 20px 55px rgba(0, 0, 0, .07);
	transition: .35s
}
.newsCard img {
	width: 100%;
	aspect-ratio: 1.5/1;
	object-fit: cover
}
.newsCard div {
	padding: 26px
}
.newsCard time {
	font-size: 13px;
	color: var(--orange);
	font-weight: 900
}
.newsCard h3 {
	font-size: 22px;
	line-height: 1.45;
	margin: 8px 0
}
.newsCard p {
	color: #666;
	margin: 0
}
.newsCard:hover {
	transform: translateY(-8px)
}
.cta {
	position: relative;
	padding: 100px 0;
	color: #fff;
	background: linear-gradient(135deg, rgba(34, 34, 34, .96), rgba(17, 17, 17, .88)), url('../images/cta.jpg') center/cover fixed;
	overflow: hidden
}
.cta:before {
	content: "";
	position: absolute;
	left: -5%;
	top: -35%;
	width: 45%;
	height: 70%;
	background: linear-gradient(135deg, var(--yellow), var(--orange));
	border-radius: 0 0 999px 999px;
	transform: rotate(18deg);
	opacity: .9
}
.ctaInner {
	position: relative;
	z-index: 1;
	text-align: center;
	max-width: 820px
}
.cta span {
	color: var(--yellow);
	font-weight: 900;
	letter-spacing: .2em
}
.cta p {
	color: rgba(255, 255, 255, .75)
}
.ctaBtns {
	justify-content: center
}
footer .flogo img {
	width: 300px;
}
.siteFooter {
	background: #161616;
	color: #fff;
	padding: 58px 0 0
}
.footerGrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 36px
}
.footerGrid h3 {
	font-size: 28px;
	margin: 0 0 10px;
	color: var(--yellow)
}
.footerGrid p, .footerGrid li {
	color: rgba(255, 255, 255, .72)
}
.footerGrid ul {
	margin: 0;
	padding: 0;
	list-style: none
}
.copy {
	text-align: center;
	margin-top: 40px;
	padding: 18px;
	border-top: 1px solid rgba(255, 255, 255, .1);
	font-size: 13px;
	color: rgba(255, 255, 255, .55)
}
.reveal {
	opacity: 0;
	transform: translateY(34px);
	transition: opacity .72s ease, transform .72s ease
}
.reveal.isVisible {
	opacity: 1;
	transform: none
}
@keyframes heroZoom {
	to {
		transform: scale(1)
	}
}
@keyframes scrollDot {
	0% {
		top: 0;
		opacity: 1
	}
	100% {
		top: 44px;
		opacity: 0
	}
}
@media(max-width:1100px) {
	.mainNav {
		position: fixed;
		left: 20px;
		right: 20px;
		top: 92px;
		display: grid;
		gap: 0;
		background: #fff;
		color: var(--dark)!important;
		border-radius: 24px;
		padding: 18px;
		box-shadow: var(--shadow);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-10px);
		transition: .3s
	}
	.mainNav.isOpen {
		opacity: 1;
		visibility: visible;
		transform: none
	}
	.mainNav a {
		padding: 13px 8px;
		border-bottom: 1px solid #eee
	}
	.headerTel {
		display: none
	}
	.menuBtn {
		display: block;
		color: #fff;
    margin-left:auto;
	}
	.siteHeader.isScrolled .menuBtn, .siteHeader.menuOpen .menuBtn {
		color: var(--dark)
	}
	.heroInner {
		grid-template-columns: 1fr
	}
	.heroCard {
		max-width: 360px
	}
	.introGrid, .whyGrid {
		grid-template-columns: 1fr
	}
	.serviceGrid, .newsGrid {
		grid-template-columns: repeat(2, 1fr)
	}
	.why:before {
		display: none
	}
}
@media(max-width:720px) {
	.section {
		padding: 74px 0
	}
	.container, .headerInner, .heroInner {
		width: min(100% - 28px, var(--container))
	}
	.headerInner {
		height: 72px
	}
	.logoText b {
		font-size: 17px
	}
	.logoText em {
		font-size: 9px
	}
	.hero {
		min-height: 760px
	}
	.hero h1 {
		font-size: 44px
	}
	.hero p {
		font-size: 16px
	}
	.heroBtns .btn, .ctaBtns .btn {
		width: 100%
	}
	.heroCard {
		display: none
	}
	.scrollHint {
		display: none
	}
	.introPoints, .serviceGrid, .whyList, .newsGrid {
		grid-template-columns: 1fr
	}
	.experienceBox {
		left: 14px;
		right: 14px;
		bottom: 14px
	}
	.sectionHead h2, .introText h2, .whyTitle h2, .cta h2 {
		font-size: 36px
	}
	.serviceCard {
		min-height: auto
	}
	.footerGrid {
		grid-template-columns: 1fr
	}
	.cta {
		background-attachment: scroll
	}
	.cta:before {
		width: 80%;
		height: 45%;
		top: -20%;
		left: -35%
	}
	.paintLayer:before {
	display: none;
	}
}





.caseGrid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px;
}

.caseCard{
    display:block;
    background:#fff;
    border-radius:0;
    overflow:hidden;
    box-shadow:0 18px 45px rgba(0,0,0,.12);
    transition:.35s;
    border-radius: 30px;
}

.caseCard:hover{
    transform:translateY(-6px);
    box-shadow:0 24px 60px rgba(0,0,0,.18);
}

.casePic{
    width:100%;
    aspect-ratio:4 / 3;
    overflow:hidden;
    background:#333;
}

.casePic img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:.55s;
}

.caseCard:hover .casePic img{
    transform:scale(1.06);
}

.caseInfo{
    position:static;
    padding:24px 24px 26px;
    background:#fff;
}

.caseInfo h3{
    font-size:22px;
    line-height:1.45;
    color:#222;
    margin:0;
    transition:.3s;
}

.caseInfo span{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:12px;
    letter-spacing:.22em;
    color:var(--orange);
    font-weight:900;
    text-transform:uppercase;
}

.caseInfo span::before{
    content:"";
    width:28px;
    height:1px;
    background:var(--orange);
}

.caseInfo span::after{
    content:"→";
    transition:.3s;
}

.caseCard:hover .caseInfo span::after{
    transform:translateX(5px);
}


/* 移除舊版遮罩 */
.caseCard:after{
    display:none;
}

/* RWD */
@media(max-width:1100px){
    .caseGrid{
        grid-template-columns:repeat(2,1fr);
        gap:22px;
    }
}

@media(max-width:720px){
    .caseGrid{
        grid-template-columns:1fr;
    }

    .caseInfo{
        padding:22px;
    }

    .caseInfo h3{
        font-size:21px;
    }
}

@media(max-width:480px){
    .caseInfo{
        padding:20px;
    }

    .caseInfo h3{
        font-size:20px;
    }
}



@media(max-width:768px){

.logo img{
    height:56px;
}

}

@media(max-width:480px){

.logo img{
    height:48px;
}

}


.logo img{
    transition:.35s ease;
}

.siteHeader.hh:not(.isScrolled) .logo img{
    filter:brightness(0) invert(1);
}

.siteHeader.hh.isScrolled .logo img{
    filter:none;
}



.innerHeader {
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(14px);
	box-shadow: 0 12px 35px rgba(0, 0, 0, .08)
}
.innerHeader .logo, .innerHeader .mainNav, .innerHeader .menuBtn {
	color: var(--dark)
}
.inBanner {
	position: relative;
	height: 460px;
	display: flex;
	align-items: center;
	color: #fff;
	overflow: hidden;
	background: #222;
	margin-top: 0
}
.inBannerBg {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, .3)), url('../images/inbanner.jpg') center/cover no-repeat;
	transform: scale(1.03)
}
.inBanner:after {
	content: "";
	position: absolute;
	left: -8%;
	bottom: -50px;
	width: 58%;
	height: 110px;
	background: linear-gradient(90deg, var(--yellow), var(--orange));
	border-radius: 999px;
	transform: rotate(-3deg)
}
.inBannerText {
	position: relative;
	z-index: 1;
	padding-top: 82px
}
.inBannerText span {
	font-size: 13px;
	letter-spacing: .24em;
	color: var(--yellow);
	font-weight: 900
}
.inBannerText h1 {
	font-size: clamp(42px, 6vw, 56px);
	line-height: 1.08;
	margin: 12px 0;
	letter-spacing: -.05em
}
.inBannerText p {
	max-width: 620px;
	color: rgba(255, 255, 255, .82);
	font-size: 18px;
	margin: 0
}



@media(max-width:720px) {
	.inBanner {
		height: 380px
	}
	.inBannerText {
		padding-top: 70px
	}
	.inBannerText p {
		font-size: 16px
	}
}