body{
	--theme-color:#95815D;
}

.themeEventContainer{
	font-size:clamp(10px, 1.16vw, 14px);
	color:currentColor;
	margin-top:5%;
}

/*********************************** video start ***********************************************/
.videoBlock{
	position:relative;
	margin-top:5%;
}

.videoBlock img{
	display:block;
	width:100%;
}

.videoBlock .vBtn{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	cursor:pointer;
	display:flex;
	justify-content:center;
	align-items:center;
}
.videoBlock .vBtn span{
	display:block;
	width:8.5%;
	min-width:50px;
	max-width:68px;
	animation:flashVBtn 0.8s ease-in infinite alternate;
}
@keyframes flashVBtn{
	from{
		transform:scale(0.9);
		opacity:0.6;
	}
}
.videoBlock .vBtn span:before{
	content:"";
	display:block;
	padding-top:100%;
	background:url(https://www.nordic.com.tw/images/vBtn.png) no-repeat center;
	background-size:contain;
}
.videoBlock .vBtn:hover span{
	animation:none;
}

/** videoOverlay start **/
.videoOverlay{
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100vh;
	z-index:2;
	background:rgba(255, 255, 255, 0.9);
	justify-content:center;
	align-items:center;
	display:flex;
	opacity:0;
	transition:opacity 0.3s;
	pointer-events:none;
}
.videoOverlay.show{
	opacity:1;
	pointer-events:auto;
}
.videoOverlay .videoOverlayCT{
	position:relative;
	width:95%;
	max-width:960px;
	background:#000;
	transform:scale(0.5);
	transition:transform 0.3s;
}
.videoOverlay.show .videoOverlayCT{
	transform:none;
}
.videoOverlay .videoOverlayCT:before{
	content:"";
	display:block;
	padding-top:56.25%;
}
.videoOverlay iframe{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	border:none;
	display:block;
}

.videoOverlay .closeBtn{
	position:absolute;
	right:0;
	bottom:calc(100% + 10px);
	width:30px;
	height:30px;
	cursor:pointer;
}
.videoOverlay .closeBtn:before,
.videoOverlay .closeBtn:after{
	position:absolute;
	content:"";
	right:0;
	top:50%;
	width:90%;
	height:2px;
	background:#999;
	border-radius:1px;
}
.videoOverlay .closeBtn:before{
	transform:translateY(-50%) rotate(-45deg);
}
.videoOverlay .closeBtn:after{
	transform:translateY(-50%) rotate(-135deg);
}
.videoOverlay .closeBtn:hover:before,
.videoOverlay .closeBtn:hover:after{
	background:#666;
}
/** videoOverlay end **/
/*********************************** video end ***********************************************/

/********************************* PP start ******************************************/
.PP{
	margin-top:5%;
}

/*************** 區塊大標 start *********************/
.PP > header{
	padding:1.5em 1em;
	background: #D3CAB9;
	color:#FFF;
}
.PP > header h3{
	text-align: center;
	font-size: 1.6em;
}
.PP > header h3 br{
	display: none;
}
.PP > header p{
	font-size: 1.2em;
	margin:0.5em 0 0;
	text-align: center;
	color:#333;
}
/*************** 區塊大標 end *********************/

/*************** ctWrapper start ***************/
.PP .ctWrapper{
	padding:1em;
}

.PP .intro{
	display: flex;
	justify-content: space-between;
}

.PP .intro > ul > li{
	display: flex;
	align-items: flex-start;
}
.PP .intro > ul > li+li{
	margin-top:0.5em;
}
.PP .intro > ul > li:before{
	content:"";
	display: block;
	width:0.35em;
	aspect-ratio:1;
	border-radius:50%;
	margin:0.6em 0.6em 0 0;
}

/******** rule start ********/
.PP .intro .rule{
	width:35%;
}
.PP .intro .rule > li:before{
	background: currentColor;
	flex-shrink: 0;
}
.PP .intro .rule > li.contact span{
	display: flex;
}
.PP .intro .rule > li.contact span em{
	font-style: normal;
}
.PP .intro .rule > li.contact span ul{
	margin-left: 0.25em;
}
/******** rule end ********/

/******** type start ********/
.PP .intro .type{
	width:50%;
}
.PP .intro .type > li:before{
	background: var(--theme-color);
}
.PP .intro .type > li strong{
	display: block;
	font-size: 1.1em;
	color: var(--theme-color);
}
.PP .intro .type > li em{
	display: block;
	font-style: normal;
}
/******** type end ********/

/******** tutorial start ********/
.PP .tutorial{
	margin-top:2.5%;
}

/**** header start ***/
.PP .tutorial header{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	color:var(--theme-color);
	font-size: 1.2em;
}
.PP .tutorial header strong{
	cursor:pointer;
	text-decoration: underline;
	font-size: 1.1em;
}
.PP .tutorial header strong:hover{
	text-decoration: none;
}
.PP .tutorial header span{
	margin-top:0.5em;
}
/**** header end ***/

/**** CT start ***/
.PP .tutorial .CT{
	display: none;
	flex-direction: column;
	align-items: center;
	background: #ECE8E0;
	margin-top:2.5%;
	padding:2.5% 10% 6%;
}
.PP .tutorial .CT.show{
	display: flex;
}

.PP .tutorial .CT h4{
	font-size: 1.5em;
}

.PP .tutorial .CT .stepWrapper{
	position: relative;
	margin-top:1.5%;
	width:70%;
}

.PP .tutorial .CT .step{
	padding:0 1px;
}
.PP .tutorial .CT .step h5{
	font-size: 1.2em;
	color:var(--theme-color);
}
.PP .tutorial .CT .step p{
	margin:0.5em 0 0;
	line-height: 1.6em;
}
.PP .tutorial .CT .step ol{
	margin-top:0.5em;
	list-style: decimal;
	padding-left:1.6em;
}
.PP .tutorial .CT .step ol li+li{
	margin-top:0.5em;
}
.PP .tutorial .CT .step ol li a{
	color:#ffa500;
	text-decoration: underline;
}
.PP .tutorial .CT .step ol li a:hover{
	text-decoration: none;
}

.PP .tutorial .CT .step img{
	display: block;
	width:100%;
	margin-top:1em;
}

.PP .tutorial ._slickPN{
	position: absolute;
	top:50%;
	text-indent: 100%;
	width:4em;
	aspect-ratio:1;
	overflow:hidden;
	cursor: pointer;
	translate:0 -50%;
}
.PP .tutorial ._slickPN:not(.slick-disabled):hover{
	color:var(--theme-color);
}
.PP .tutorial ._slickPN.prev{
	right:100%;
	margin-right:1em;
	scale:-1 1;
}
.PP .tutorial ._slickPN.next{
	left:100%;
	margin-left:1em;
}
.PP .tutorial ._slickPN.slick-disabled{
	cursor: auto;
	opacity: 0.25;
}
.PP .tutorial ._slickPN:before{
	position: absolute;
	content:"";
	display: block;
	left:50%;
	top:50%;
	width:50%;
	aspect-ratio:1;
	border:1px solid;
	border-top:none;
	border-left:none;
	translate:-50% -50%;
	rotate:-45deg;
}

.PP .tutorial .slick-dots{
	bottom:auto;
	top:100%;
	margin-top:1em;
	font-size: 1.2em;
}
.PP .tutorial .slick-dots li{
	color:#666;
	margin:0 0.8em;
}
.PP .tutorial .slick-dots li:hover,
.PP .tutorial .slick-dots li.slick-active{
	color:#000;
	font-weight: bold;
}
/**** CT end ***/
/******** tutorial end ********/

.PP iframe{
	border: none;
	display: block;
	width: 100%;
	height:650px;
	margin-top:2.5%;
}
/*************** ctWrapper end ***************/
/********************************* PP end ******************************************/


@media screen and (max-width:1023px){
	
	.mainContainer > section.themeEventContainer{
		margin-top:10%;
		font-size:14px;
	}
	
	/********************************* PP start ******************************************/
	/*************** 區塊大標 start *********************/
	.PP > header h3 span{
		display: none;
	}
	.PP > header h3 br{
		display: block;
	}
	.PP header p{
		font-size: 1.1em;
	}
	/*************** 區塊大標 end *********************/
	
	/*************** ctWrapper start ***************/
	.PP .intro{
		display: block;
	}

	/******** rule start ********/
	.PP .intro .rule{
		width:auto;
	}
	.PP .intro .rule > li.contact span{
		display: block;
	}
	.PP .intro .rule > li.contact span em{
		display: block;
	}
	.PP .intro .rule > li.contact span ul{
		margin: 0;
	}
	/******** rule end ********/

	/******** type start ********/
	.PP .intro .type{
		width:auto;
		margin-top:1em;
	}
	/******** type end ********/

	/******** tutorial start ********/
	.PP .tutorial{
		margin-top:10%;
	}

	/**** CT start ***/
	.PP .tutorial .CT{
		margin-top:10%;
		padding:5% 8% 15%;
	}

	.PP .tutorial .CT h4{
		font-size: 1.25em;
	}

	.PP .tutorial .CT .stepWrapper{
		margin-top:8%;
		width:100%;
	}

	.PP .tutorial .CT .step h5{
		font-size: 1.1em;
	}

	.PP .tutorial ._slickPN{
		width:2em;
	}
	.PP .tutorial ._slickPN.prev{
		margin-right:0;
	}
	.PP .tutorial ._slickPN.next{
		margin-left:0;
	}

	.PP .tutorial .slick-dots{
		font-size: 1.1em;
	}
	.PP .tutorial .slick-dots li{
		margin:0 0.5em;
	}
	/**** CT end ***/
	/******** tutorial end ********/

	.PP iframe{
		margin-top:10%;
	}
	/*************** ctWrapper end ***************/
	/********************************* PP end ******************************************/
	
}