/* Site fonts: load Noto Sans TC from Google Fonts in page <head> (see index/list/show).
   Fallbacks cover offline / blocked CDN. Do not use system-only names like YouYuan alone. */



   * {

	font-family: "Noto Sans TC", "PingFang TC", "PingFang HK", "Hiragino Sans GB", "Microsoft JhengHei", "Microsoft YaHei", "Heiti TC", "Heiti SC", ui-sans-serif, sans-serif;

	margin: 0;

	padding: 0;

}



a {

	text-decoration: none;

}



ul li {

	list-style: none;

}



.box {

	width: 100%;

	box-sizing: border-box;

	padding: 0 100px;

}



header {

	width: 100%;

	position: fixed;

	top: 0;

	left: 0;

	padding: 25px 0;

	z-index: 9;

	transition: .6s;

}



.stop {

	padding: 5px 0;

	background: #fff;

	/* box-shadow: 0 0 10px #333; */

}



.stop .hadList a,

.tre .hadList a {

	color: #000;

}



.hadList {

	display: flex;

	justify-content: flex-end;

}



.hadList a {

	font-weight: 500;

	color: #fff;

	display: block;

	font-size: 20px;

	margin-left: 50px;

}



.hadList a:not(.hadList-ico):hover {

	text-decoration: underline;

}



.hadList-ico {

	display: flex;

	align-items: center;

	line-height: 0;

}



.hadList-ico:hover {

	opacity: 0.85;

}



.hadList-ico svg {

	display: block;

	vertical-align: middle;

}



/* 两个社媒图标之间收窄间距（仍保留与 CONTACT 的间距） */

.hadList-social + .hadList-social .hadList-ico {

	margin-left: 10px;

}



.banner {

	width: 100%;

	overflow: hidden;

	position: relative;

}



.banner video {

	display: block;

	width: 100%;

}


.banBox {
	width: 100%;
	position: relative;
	display: none;
}

.swiper {
	width: 100%;
	height: 100%;
}

.swiper-slide {
	background-position: center;
	background-size: cover;
}

.swiper-slide img {
	display: block;
	width: 100%;
	opacity: 0;
	transition: 1s;
}

.swiper-slide.swiper-slide-active img {
	opacity: 1;
}


.banner img {

	display: block;

	width: 100%;

}



.abtitle {

	padding: 50px 0 0;

}






.logo {

	width: 100%;

	box-sizing: border-box;

	padding-left: 34.5%;

}



.logo img {

	display: block;

	max-width: 45%;

}



.abInfo {

	display: flex;

	justify-content: space-between;

	margin: 60px 0;

}



.about .abtitle .abInfo {

	display: flex;

	flex-direction: column;

	align-items: stretch;

	justify-content: flex-start;

	gap: 24px;

	width: 100%;

	box-sizing: border-box;

}



.about .abtitle .abMg {

	flex-shrink: 0;

	align-self: center;

	/* 勿用 auto，會蓋過 .abMg 固定寬導致關於圖以原圖超大顯示 */

	width: 110px;

	max-width: min(110px, 22vw);

}



.about .abtitle .abTxt {

	flex: none;

	display: flex;

	flex-direction: column;

	align-items: stretch;

	justify-content: flex-start;

	gap: 20px;

	width: 100%;

	min-width: 0;

	box-sizing: border-box;

}



.about .abtitle .abTxt-col {

	min-width: 0;

	box-sizing: border-box;

	width: 100%;

	max-width: 100%;

	overflow-wrap: anywhere;

	word-wrap: break-word;

}



.about .abtitle .abTxt-col-zh,
.about .abtitle .abTxt-col-en {

	flex: none;

	width: 100%;

	max-width: 100%;

	min-width: 0;

}



@media screen and (min-width: 1021px) {



	.about .abtitle .abInfo {

		flex-direction: row;

		align-items: flex-start;

		gap: 30px;

	}



	.about .abtitle .abMg {

		align-self: flex-start;

	}



	.about .abtitle .abTxt {

		flex: 1;

		width: auto;

		flex-direction: row;

		justify-content: space-between;

		gap: 4%;

	}



	.about .abtitle .abTxt-col {

		width: auto;

		max-width: none;

	}



	.about .abtitle .abTxt-col-zh {

		flex: 0 1 38%;

		max-width: 40%;

	}



	.about .abtitle .abTxt-col-en {

		flex: 1 1 0;

		min-width: 58%;

	}

}



.about .abtitle .abTxt-col p,
.about .abtitle .abTxt-col span {

	width: 100% !important;

	margin: 0 !important;

	font-family: inherit !important;

	font-size: 16px !important;

	text-align: justify;

}



.about .abtitle .abTxt-col-zh p,
.about .abtitle .abTxt-col-zh span {

	line-height: 30px;

}



.about .abtitle .abTxt-col-en p,
.about .abtitle .abTxt-col-en span {

	line-height: 27px;

}



.abMg {

	width: 110px;

}



.abMg img {

	display: block;

	max-width: 100%;

	margin: 0 auto;

}



.abTxt {

	width: 82.5%;

	display: flex;

	justify-content: space-between;

	align-items: stretch;

}



.abTxt>div:not(.abTxt-col) {

	width: 48%;

}



.contMg {

	display: flex;

	/* align-items: center;

	justify-content: center; */

}



.aboutList {

	padding-top: 30px;

	display: grid;

	grid-template-columns: repeat(3, 31%);

	justify-content: space-between;

	/* background-image: linear-gradient(180deg, rgb(255, 248, 235) 90%, #fff 14%); */

	background: #FFF8EB;

}



.aboutList li {

	margin: 0 0 100px;

}



.abLiMg {

	width: 100%;

	overflow: hidden;

	position: relative;

}


.abLiMg::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: url('/static/imgs/back.png') top no-repeat;
	background-size: 100%;
	opacity: 0;
	transition: .6s;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

a:hover .abLiMg::before {
	opacity: 1;
}


.abLiMg img {

	display: block;

	width: 100%;

	transition: .6s;

}

a:hover .replace img:nth-child(1) {

	opacity: 0;

}


.replace img:nth-child(2) {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	opacity: 0;
}


a:hover .replace img:nth-child(2) {

	opacity: 1;

}



.abLiTxt {

	margin-top: 15px;

	color: #000;

}



.abLiTxt h4 {

	font-weight: normal;

	font-size: 22px;

	line-height: 25px;

}



.abLiTxt h6 {

	font-weight: 300;

	font-size: 15px;

	line-height: 22px;

}



.abMore {

	display: block;

	width: 100%;

	margin-top: 80px;

	color: #000;

}



.abMore p {

	font-size: 32px;

}



.abMore h5 {

	font-weight: 300;

	font-size: 62px;

	text-decoration: underline;

}



.contMg {

	width: 100%;

	overflow: hidden;

}



.contMg img {

	display: block;

	width: 100%;

	/* height: 100%; */

}



.contxt h5 {

	font-weight: 300;

	font-size: 20px;

	margin: 0 0 20px;

}



.contxt h4 {

	font-size: 22px;

	font-weight: 300;

	line-height: 40px;

}



.contxt h4 a {
	color: #000;
}



.code {

	margin-top: 100px;

	display: flex;

	align-items: center;

}



.code img {

	display: block;

	margin-right: 15px;

	width: 80px;

}



.code {

	font-size: 18px;

}



.code b {

	display: block;

	font-weight: 300;

	font-size: 20px;

	line-height: 30px;

}



.brand {

	margin: 0 0 80px;

}



.brandList {

	display: flex;

	flex-wrap: wrap;

	margin-left: -50px;

}



.brandList li {

	margin-left: 50px;

	margin-bottom: 50px;

	display: flex;

	align-items: center;

	justify-content: center;

}



.brandList img {

	display: block;

	max-width: 130px;

}



footer {

	border-top: 2px solid #C9C8C8;

	padding: 20px 0 80px;

}



/* .foter {

	background: #FFFBF4;

} */



.fotBox {

	display: flex;

	justify-content: space-between;

}



.fotList a {

	font-weight: 300;

	color: #000;

	font-size: 18px;

	line-height: 35px;

}

.fotRight a {
	text-align: right;
	display: block;
}



.fotBox h4 {

	text-align: center;

	font-weight: 300;

	font-size: 30px;

}



.fotBox h4 a {

	color: #000;

	text-decoration: underline;

	display: inline-block;

	position: relative;

	height: 40px;

	overflow: hidden;

	vertical-align: text-top;

}

.fotBox h4 a span {
	display: block;
}



.fotBox p {

	font-weight: 300;

	font-size: 18px;

	margin-top: 30px;

}



.name {

	margin: 60px auto 90px;

	/* text-align: center; */

	/* max-width: 650px; */

	display: flex;

	justify-content: space-between;

}


.nameTitle {
	width: 30%;
}


.nameCont {
	width: 65%;
}


.name h3 {

	font-weight: 300;

	font-size: 30px;

}


.name h4 {

	font-weight: 300;

	font-size: 16px;

	margin: 80px 0 0;
}


.name p {

	margin: 0 0 10px;

}



.propaganda {

	margin: 30px 0;

}



.two {

	display: flex;

	justify-content: space-between;

}



.two01 {

	width: 67%;

}



.two02 {

	width: 30%;

}



.two img {

	display: block;

	width: 100%;

}



.treBox {

	/* padding: 70px 0 30px; */

	padding: 30px 0;

}


.workLogo {
	width: 33%;
}


.treBox img {

	display: block;

	max-width: 100%;

}


.botm {
	background: #fff;
	transition: 1.2s;
	padding-top: 80px;
	position: relative;
}

.botm>div,
.botm>footer {
	position: relative;
	z-index: 1;
}

/* .botm * {
	transition: 1.2s !important;
} */

.botm::after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: url('/static/imgs/backMg.png') bottom no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: .6s;
}

.botmShow.botm::after {
	opacity: 1;
}



.botmShow div,
.botmShow h5,
.botmShow h4,
.botmShow p,
.botmShow a,
.botmShow .fotBox h4 a,
.botmShow .code,
.botmShow .code b,
.botmShow .contxt h4 a {
	color: #fff;
}

.botmShow .abMg img,
.botmShow .brandList img {
	filter: grayscale(100%) brightness(1000%);
}

.botmShow .write,
.back {
	display: none;
}

.botmShow .back {
	display: block;
}

.customer {
	font-weight: 300;
	color: #fff;
	font-size: 40px;
	white-space: nowrap;
}





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

	/* .aboutList {
		background-image: linear-gradient(180deg, rgb(255, 248, 235) 90%, #fff 15%);
	} */

}


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



	.abInfo {

		margin: 30px 0;

	}



	.aboutList li {

		margin: 0 0 80px;

	}



	.abMore {

		margin-top: 50px;

	}



	.abMore h5 {

		font-size: 50px;

	}



	.abMore p {

		font-size: 26px;

	}



	.code {

		margin-top: 30px;

	}



	.contxt h4 {

		font-size: 18px;

		line-height: 30px;

		margin: 5px 0;

	}

	/* .aboutList {
		background-image: linear-gradient(180deg, rgb(255, 248, 235) 90%, #fff 15%);
	} */



}





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



	.box {

		padding: 0 50px;

	}

	/* .aboutList {
		background-image: linear-gradient(180deg, rgb(255, 248, 235) 90%, #fff 15%);
	} */




}

@media screen and (max-width:1200px) and (min-width:1020px) {

	.contMg {
		display: flex;
		align-items: flex-start;
		box-sizing: border-box;
		padding-top: 55px;
	}

}


.modeContMg {
	display: none;
	max-width: 110px;
}

.modeContMg img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
}

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


	.logo {
		padding-left: 0;
		display: flex;
		justify-content: center;
	}

	.logo img {
		max-width: 90%;
	}



	.box {

		padding: 0 20px;

	}



	/* About 區塊已由頁頭默認「移動優先」全寬；此處只收窄 brand（帶側圖）的 abTxt */

	.brand .abInfo > .abTxt {

		flex-wrap: wrap;

		width: calc(100% - 125px);

	}



	.cont .abTxt {
		width: 100%;
	}



	.abTxt>p {

		width: 100%;

		margin: 0 0 8px;

		line-height: 25px;

	}



	.contMg {
		box-sizing: border-box;
	}

	.contMg img {
		max-width: calc(100% - 170px);
	}


	.brandList img {
		display: block;
		max-width: 100px;
	}



	.abLiTxt h4 {

		font-size: 18px;

	}



	.abLiTxt h6 {

		font-size: 13px;

		line-height: 24px;

	}



	.abMore {

		margin-top: 20px;

	}



	.abMore p {

		font-size: 20px;

	}



	.abMore h5 {

		font-size: 36px;

	}



	.abTxt>div:not(.abTxt-col) {

		width: 100%;

	}



	.contMg img {

		height: auto;

		width: 100%;

	}



	.contxt {

		margin-top: 20px;

	}



	.contxt h4 {

		font-size: 18px;

		line-height: 25px;

		margin: 0;

	}



	.brandList {

		margin-left: -10px;

	}



	.brandList li {

		margin-left: 10px;

		margin-bottom: 15px;

	}



	.fotBox h4 {

		font-size: 22px;

	}



	.fotList a {

		font-size: 16px;

		line-height: 30px;

	}



	.fotBox h4 p {

		font-size: 16px;

		margin-top: 10px;

	}



	.name {

		margin: 30px auto 40px;

	}



	.name h3 {

		font-size: 40px;

		margin: 0 0 20px;

	}

	/* .aboutList {
		background-image: linear-gradient(180deg, rgb(255, 248, 235) 90%, #fff 15%);
	} */

	/* .cont .abInfo{
		align-items: center;
	} */

	.cont .abMg {
		display: none;
	}

	.contxt {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.modeContMg {
		display: block;
	}

	.customer {
		font-size: 20px;
	}

	.fotBox h4 a {
		height: 25px;
	}


}





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



	.workLogo {
		width: 50%;
	}



	.hadList a {

		font-size: 16px;

		margin-left: 20px;

	}



	.hadList-social + .hadList-social .hadList-ico {

		margin-left: 8px;

	}



	.abMg {

		width: 60px;

	}



	/* 首页「關於」装饰图仍需可辨識；窄屏单独限制，不与全局 .abMg 抢占 */

	.about .abtitle .abMg {

		width: 92px;

		max-width: min(92px, 26vw);

	}



	.about .abtitle .abInfo {

		gap: 16px;

	}



	.brand .abInfo > .abTxt {

		flex-wrap: wrap;

		width: calc(100% - 80px);

	}



	.cont .abTxt {
		width: 100%;
	}



	.abTxt>p {

		font-size: 15px;

		line-height: 23px;

	}



	.about .abtitle .abTxt-col p,
	.about .abtitle .abTxt-col span,
	.about .abtitle .abTxt-col-zh p,
	.about .abtitle .abTxt-col-zh span,
	.about .abtitle .abTxt-col-en p,
	.about .abtitle .abTxt-col-en span {

		font-size: 15px !important;

		line-height: 23px !important;

	}


	.contMg img {
		max-width: calc(100% - 70px);
	}

	.modeContMg img {
		width: 80px;
	}


	.aboutList {

		grid-template-columns: repeat(2, 48%);

	}



	.aboutList li {

		margin: 0 0 30px;

	}



	.contxt h5 {

		font-size: 18px;

		margin: 0 0 10px;

	}



	.contxt h4 {

		font-size: 15px;

		line-height: 22px;

	}




	.brand .abMg {

		width: 110px;

	}



	.brand .abInfo {

		flex-wrap: wrap;

	}



	.brand .abTxt {

		width: 100%;

	}



	.brand {

		margin: 0 0 40px;

	}



	.fotList a {

		font-size: 13px;

		line-height: 20px;

	}



	.fotBox h4 {

		font-size: 15px;

		box-sizing: border-box;

		padding: 0 14px;

	}



	.fotBox h4 p {

		font-size: 12px;

		margin-top: 5px;

	}



	.name h3 {

		font-size: 26px;

		margin: 0 0 10px;

	}



	.abtitle {

		padding: 0;

	}

	/* .banVid {
		display: none;
	}

	.banBox {
		display: block;
	} */

	header {
		padding: 15px 0;
	}

	.logo {
		padding-left: 0;
		width: 80%;
		margin: 0 auto;
		padding-top: 40px;
	}

	.abMore h5 {
		font-size: 26px;
	}

	.abLiTxt h4 {
		font-size: 16px;
		line-height: 20px;
	}

	.abLiTxt h6 {
		font-size: 12px;
		line-height: 18px;
		margin-top: 4px;
	}

	.stop {
		box-shadow: none;
	}

	/* .aboutList {
		background-image: linear-gradient(180deg, rgb(255, 248, 235) 98%, #fff 15%);
	} */

	.brandList {
		margin-left: -15px;
		margin-top: 20px;
	}

	.brandList li {
		margin-left: 20px;
		margin-bottom: 15px;
	}

	.brandList img {
		max-width: 90px;
	}

	.fotBox h4 a {
		height: 20px;
	}

	.name {
		flex-wrap: wrap;
	}

	.nameTitle,
	.nameCont {
		width: 100%;
	}

	.name h4 {
		margin: 10px 0 20px;
	}

}