@charset "utf-8";

/* 載入思源黑、明體 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Noto+Serif+TC:wght@200..900&display=swap');

:root {
	--color1: #e3451c;
	--color2: #009e50;
	--color3: #ffce20;
	--color-dark: #222222;
}

html {
	background: url("../images/bg-color1.jpg");
	scroll-behavior: smooth;
}

body {
	background-color: transparent !important;
}

.container {
	background: url("../images/side-deco.png")top center repeat-y;
}

@media screen and (max-width: 991px) {
	/* html {
		background-size: 250%;
	} */

	.container {
		background: none;
	}
}


/* 針對架構工具調整 */
.blk_head,
.blk_body,
.blk_item {
	padding: 0;
	background-color: transparent !important;
}

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

	.blk_pre .tips a {
		padding: calc(var(--bs-gutter-x) * 0.3);
	}

	.blk_bas .blk_body>* {
		margin-top: 1vw;
		margin-bottom: 1vw;
	}
}


/* 版身雪花動畫 */
#Canvas {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	pointer-events: none;
	z-index: 999;
}

/* 手機版隱藏動畫 Canvas */
@media (max-width: 991px) {
	#Canvas {
		display: none !important;
	}
}


/*主視覺動畫*/
.kv-bg {
	width: 100%;
}

.kvitem {
	position: absolute;
}

.kv-tt {
	width: calc((681 / 1920)* 100%);
	top: calc((1299 / 1920) * 100%);
	left: calc((620 / 1920) * 100%);
	animation: bounceInDown 1.2s;
	animation-delay: .15s;
	animation-fill-mode: backwards;
}

.kv-p1 {
	width: calc((487 / 1920)* 100%);
	top: calc((1629 / 1920) * 100%);
	left: calc((482 / 1920) * 100%);
	animation: bounceInLeft 1.2s;
	animation-delay: .5s;
	animation-fill-mode: backwards;
}

.kv-p2 {
	width: calc((64 / 1920)* 100%);
	top: calc((1604 / 1920) * 100%);
	left: calc((980 / 1920) * 100%);
	animation: bounceIn 1.2s;
	animation-delay: 1.2s;
	animation-fill-mode: backwards;
}

.kv-p3 {
	width: calc((388 / 1920)* 100%);
	top: calc((1640 / 1920) * 100%);
	left: calc((1050 / 1920) * 100%);
	animation: bounceInRight 1.2s;
	animation-delay: .5s;
	animation-fill-mode: backwards;
}


/* 區塊純色/搭配標題 */
.blk_bas {
	position: relative;
	max-width: 1260px;
	margin: 120px auto 0px;
	padding: 0 0 20px;
	border-radius: 30px;
	outline: 3px solid var(--color3);
	background: url("../images/bg-color2.jpg");
}

@media screen and (max-width: 991px) {
	.blk_bas {
		margin: 12vw 1vw 0vw;
		padding: 0 0 2vw;
		border-radius: 20px;
		outline: 2px solid var(--color3);
	}
}


/* 無區塊 */
.block_other.blk_bas {
	margin: 60px auto 0;
	padding: 0 0 30px;
	background: none;
	outline: none;
}

.block_other.blk_bas::before,
.block_other.blk_bas::after {
	display: none;
}

@media screen and (max-width: 991px) {
	.block_other.blk_bas {
		margin: 4vw auto 6vw;
		padding: 0;
	}
}


/*文字標題*/
h2,
h3,
.menustyle2 ul li a,
.half ul h3,
.keywordA a,
.go_btn a {
	font-family: 'Noto Sans TC';
}

big {
	color: var(--color1);
}

.notice {
	/* color: #fff; */
	letter-spacing: 0.5px;
}

@media screen and (max-width: 991px) {
	.notice {
		padding: .5em 2rem;
	}
}


/* btt寫偽元素/搭配外層區塊 */
.btt {
	width: fit-content;
	height: 132px;
	position: relative;
	margin: -66px auto 0px;
	padding: 10px 10px 0;
	text-align: center;
	background: url("../images/btt-bg.png");
	background-position: top center;
	background-repeat: repeat-x;
	background-size: contain;
	color: var(--color-dark);
	font-size: 5rem;
	font-weight: 900;
	letter-spacing: 2px;
}

.btt::before {
	display: block;
	width: 100%;
	height: 132px;
	position: absolute;
	top: 0;
	left: 1px;
	background-image: url("../images/btt-be.png");
	background-position: right center;
	background-repeat: no-repeat;
	background-size: contain;
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
	content: "";
}

.btt::after {
	display: block;
	width: 100%;
	height: 132px;
	position: absolute;
	top: 0;
	right: 1px;
	background-image: url("../images/btt-af.png");
	background-position: left center;
	background-repeat: no-repeat;
	background-size: contain;
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
	content: "";
}

.block2 .btt,
.block3 .btt,
.block4 .btt,
.block5 .btt,
.block6 .btt,
.block7 .btt {
	padding: 6px 10px 0;
	font-size: 3.6rem;
}

.btt small {
	font-size: 1.2rem;
	border-top: 2px dotted var(--color-dark);
	padding-top: 10px;
}

@media screen and (max-width: 991px) {
	.btt {
		height: 16vw;
		margin: -8vw auto 2vw;
		padding: .5vw 4vw 0;
		font-size: 3rem;
		letter-spacing: .5vw;
	}

	.btt::before {
		height: 16vw;
	}

	.btt::after {
		height: 16vw;
	}

	.block2 .btt,
	.block3 .btt,
	.block4 .btt,
	.block5 .btt,
	.block6 .btt,
	.block7 .btt {
		padding: .5vw 4vw 0;
		font-size: 1.8rem;
	}

	.btt small {
		font-size: .8rem;
		border-top: 2px dotted var(--color-dark);
		padding-top: 1vw;
		margin-top: 1vw;
	}
}


/* stt寫偽元素 */
.stt {
	width: fit-content;
	height: auto;
	position: relative;
	margin: 20px auto 0;
	padding: 0 16px 0;
	text-align: center;
	color: var(--color1);
	font-size: 2.8rem;
	font-weight: 900;
	letter-spacing: 2px;
}

.stt::before {
	display: block;
	width: 100%;
	height: 30px;
	position: absolute;
	top: 15px;
	left: 1px;
	background-image: url("../images/stt-be.png");
	background-position: right center;
	background-repeat: no-repeat;
	background-size: contain;
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
	content: "";
}

.stt::after {
	display: block;
	width: 100%;
	height: 30px;
	position: absolute;
	top: 15px;
	right: 1px;
	background-image: url("../images/stt-af.png");
	background-position: left center;
	background-repeat: no-repeat;
	background-size: contain;
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
	content: "";
}

@media screen and (max-width: 991px) {
	.stt {
		height: auto;
		margin: -4vw auto 0;
		padding: 1.8vw 2vw 0;
		font-size: 1.5rem;
		letter-spacing: .5vw;
	}

	.stt::before {
		height: 4vw;
		top: 3.5vw;
	}

	.stt::after {
		height: 4vw;
		top: 3.5vw;
	}
}


/*元件調整*/
.block3 .hightlightAd:nth-child(2) ul {
	flex-direction: row-reverse;
}

.quotes li:nth-child(odd),
.alternate ul:nth-child(even) li:last-child,
.collect_5x6 .s-row h4,
.hightlight_5p .font h4,
.hightlight .font h4 {
	background: url("../images/bg-color4.jpg");
}

.quotes li:nth-child(even),
.alternate ul:nth-child(odd) li:first-child,
.hightlightAd-text li:nth-child(1) h4 {
	background: url("../images/bg-color1.jpg");
}

.alternate .font h4 {
	color: var(--color2);
}

.half ul {
	background: url("../images/bg-color3.jpg");
	border-radius: 15px;
}

.half ul h3 {
	color: var(--color-dark);
	font-weight: 900;
}

.keywordA {
	margin-top: 30px !important;
}

.keywordA li {
	border: solid 4px var(--color2);
	background: #fff;
	box-shadow: none;
	border-radius: 99em;
}

.keywordA a {
	font-size: 1.8rem;
	font-weight: 900;
	color: var(--color-dark);
}

.keywordA li:hover {
	background: var(--color2);
}

.go_btn a {
	font-size: 2.4rem;
	font-weight: 900;
	color: var(--color-dark);
	background: var(--color3);
}

.go_btn a:hover {
	color: var(--color-dark);
}

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

	.banner {
		padding: 0 3vw;
	}

	.hightlight_5p ul li:first-child {
		margin: 1vw;
	}

	.hightlight_5p ul li:first-child .font h4 {
		color: var(--color2);
	}

	.half ul {
		margin: 1vw;
		padding: 1vw 0;
	}

	.half ul h3 {
		font-size: 1.5rem;
	}


	.half ul li {
		width: 44vw;
	}

	.half ul li img {
		width: 44vw;
		height: 44vw;
	}

	.half ul.scene li img {
		width: 80vw;
		height: 80vw;
	}

	.keywordA {
		margin-top: .2rem !important;
	}

	.keywordA ul {
		margin: 0;
	}

	.keywordA li {
		padding: 1vw 3vw 1vw;
		border: solid 2px var(--color2);
	}

	.keywordA a {
		font-size: .9rem;
	}
}


/*輪播統一設定*/
.slick-dotted.slick-slider {
	margin-bottom: 0px !important;
}

@media screen and (max-width: 991px) {
	.slickbg {
		width: 96vw;
	}

	.slickbg.slick3item {
		margin-left: -1vw;
		margin-right: -1vw;
	}

	.slider {
		margin: 2vw auto !important;
	}

	.slick-dotted.slick-slider {
		padding-bottom: 2vw !important;
	}
}


/**--  menu  --**/
.menustyle2 {
	width: 120px;
	border-radius: 99rem;
	border: 2px solid var(--color3);
	background: url("../images/bg-color4.jpg");
}

.menustyle2 .nav>* {
	border-bottom: none;
}

.menustyle2 ul {
	padding: 25px 0;
}

.menustyle2 a {
	color: #fff;
	font-weight: 700;
}

.menustyle2 .nav-link.active,
.menustyle2 .nav-link:focus,
.menustyle2 .nav-link:hover {
	color: var(--color-dark);
	background: var(--color3);
}

@media screen and (max-width: 991px) {
	.menustyle2 {
		width: 100%;
		padding: 1.5vw 1vw;
		border-radius: 0;
		border: 0px solid var(--color1);
		border-bottom: 1.5px solid var(--color3);
		background: url("../images/bg-color4.jpg");
	}

	.menustyle2 .nav>* {
		border-right: none;
	}

	.menustyle2 ul {
		padding: 0;
	}

	.menustyle2 .nav-pills .nav-link {
		border-radius: 99rem;
	}

	.menustyle2 a {
		padding: 0.5rem 1rem;
		font-size: 1rem;
	}

}


/*--  錨點微調 --*/
.target-fix {
	display: block;
	position: relative;
	top: 0px;
	height: 0;
	overflow: hidden;
}

@media screen and (max-width: 991px) {
	.target-fix {
		top: -15vw;
	}
}