@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap');
@font-face {
	font-family: DINProMedium;
	src:
		url(https://www.nordic.com.tw/css/eventFonts/DINProMedium.eot),
		url(https://www.nordic.com.tw/css/eventFonts/DINProMedium.woff) format("woff"),
		url(https://www.nordic.com.tw/css/eventFonts/DINProMedium.ttf) format("truetype");
		/* 本機站使用
		url(../../../www/css/eventFonts/DINProMedium.eot),
		url(../../../www/css/eventFonts/DINProMedium.woff) format("woff"),
		url(../../../www/css/eventFonts/DINProMedium.ttf) format("truetype");
		*/
		/* demo 站使用
		url(../../../new_ec/www/css/eventFonts/DINProMedium.eot),
		url(../../../new_ec/www/css/eventFonts/DINProMedium.woff) format("woff"),
		url(../../../new_ec/www/css/eventFonts/DINProMedium.ttf) format("truetype");
		*/
		/* 正式站使用
		url(https://www.nordic.com.tw/css/eventFonts/DINProMedium.eot),
		url(https://www.nordic.com.tw/css/eventFonts/DINProMedium.woff) format("woff"),
		url(https://www.nordic.com.tw/css/eventFonts/DINProMedium.ttf) format("truetype");
		*/
}

html.disableScroll{
	overflow:hidden;
}

.mainContainer{
	max-width:none;
	overflow:hidden;
}

.midBlock.hide,
.themeMain.hide{
	display:none;
}

.themeEventContainer{
	font-family:Arial, 'Noto Sans TC', Tahoma, 微軟正黑體, sans-serif;
	color:#665e58;
	background:#fff1e1;
}


/************************************** 其它共用 start ***************************************************/
.themeEventContainer .CT{
	position:relative;
	/***** 以下兩行修正 Safari 文字閃動 bug *******/
	-webkit-font-smoothing:antialiased;
	-webkit-transform:translate3d(0, 0, 0);
}

.o{
	position:absolute;
}
.o:before{
	content:"";
	display:block;
	background-repeat:no-repeat;
	background-position:center;
	background-size:contain;
}
.oAnim1{ animation:oAnim1 5s ease-in-out alternate infinite both;}
@keyframes oAnim1{
	from{ transform:translateY(-35%) rotate(-15deg);}
	to{	transform:translateY(35%) rotate(15deg);}
}
.oAnim2{ animation:oAnim2 3s ease-in-out alternate infinite both;}
@keyframes oAnim2{
	from{ transform:translateY(40%) rotate(10deg);}
	to{	transform:translateY(-40%) rotate(-10deg);}
}
.oAnim3{ animation:oAnim3 8s linear infinite both;}
@keyframes oAnim3{
	to{	transform:rotate(-360deg);}
}
.oAnim4{ animation:oAnim4 4s linear infinite both;}
@keyframes oAnim4{
	to{	transform:rotate(360deg);}
}
.oAnim5{ animation:oAnim5 1s ease-in alternate infinite both;}
@keyframes oAnim5{
	from{ transform:scale(0.9);}
	to{	transform:scale(1.1);}
}
/************************************** 其它共用 end ***************************************************/


/************************************** header start ***************************************************/
.themeEventContainer header,
.themeEventContainer header nav > *{
	width:15.38em;
}

.themeEventContainer header{
	position:fixed;
	right:0;
	top:90px;
	color:currentColor;
	z-index:1;
}

.themeEventContainer header nav,
.themeEventContainer header ._burgerBtn{
	position:absolute;
	right:0;
	top:0;
}

/********************** nav start *************************/
.themeEventContainer header nav{
	display:flex;
	flex-direction:column;
	background:rgba(255, 241, 225, 0.85);
	width:0;
	height:100vh;
	font-size:1.2em;
	overflow:hidden;
	transition:all 0.2s;
}

.themeEventContainer header nav > ul{
	margin-top:5em;
}
.themeEventContainer header nav a{
	display:flex;
	align-items:center;
	font-weight:500;
	padding:0.8em 0 0.8em 1.92em;
	line-height:1em;
	color:currentColor;
	transition:all 0.2s;
}
.themeEventContainer header nav a:hover,
.themeEventContainer header nav li.active a{
	color:#f3733a;
	font-weight:500;
}
.themeEventContainer header nav a:before{
	content:"";
	display:inline-block;
	margin-right:1em;
	width:0.24em;
	height:0.24em;
	border-radius:50%;
	background:currentColor;
}

.themeEventContainer header nav .sns{
	margin:2em 0 0 3em;
}
.themeEventContainer header nav .sns ul{
	display:flex;
}
.themeEventContainer header nav .sns ul li{
	cursor:pointer;
	width:1.5em;
	transition:transform 0.2s;
}
.themeEventContainer header nav .sns ul li+li{
	margin-left:1em;
}
.themeEventContainer header nav .sns ul li:hover{
	transform:scale(1.2);
}
.themeEventContainer header nav .sns ul li:before{
	content:"";
	display:block;
	padding-top:100%;
	background:url(../images/sns.png) no-repeat;
	background-size:300%;
	background-position-y:top;
}
.themeEventContainer header nav .sns ul li:nth-child(1):before{ background-position-x:left;}
.themeEventContainer header nav .sns ul li:nth-child(2):before{ background-position-x:center;}
.themeEventContainer header nav .sns ul li:nth-child(3):before{ background-position-x:right;}
.themeEventContainer header nav .sns ul li span{
	display:none;
}
/********************** nav end *************************/

/********************** _burgerBtn start *************************/
.themeEventContainer header ._burgerBtn{
	margin:5em 1.92em 0 0;
	width:3.5em;
}
.themeEventContainer header ._burgerBtn span,
.themeEventContainer header ._burgerBtn span:before,
.themeEventContainer header ._burgerBtn span:after{
	position:absolute;
	display:block;
	right:0;
	width:100%;
	height:4px;
	border-radius:0.25em;
	background:#FFF;
}
.themeEventContainer header ._burgerBtn span:before,
.themeEventContainer header ._burgerBtn span:after{
	content:"";
	top:50%;
	transition:transform 0.2s;
}
.themeEventContainer header ._burgerBtn span{
	top:0;
	margin-top:27.77%;
	z-index:0;
}
.themeEventContainer header ._burgerBtn span:before{ transform:translateY(-400%);}
.themeEventContainer header ._burgerBtn span:after{ transform:translateY(300%);}
.themeEventContainer header ._burgerBtn:after{
	position:absolute;
	right:0;
	top:0;
	content:"";
	display:block;
	width:100%;
	padding-top:65%;
	opacity:0;
	z-index:2;
}
/********************** _burgerBtn end *************************/
/************************************** header end ***************************************************/


/****************************************** home start ************************************************/
.home .CT{
	position:relative;
}

/********************* 場景 start *************************/
.sceneWrapper{
	position:relative;
	padding-top:42.1%;
	z-index:0;
}

.scene{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}

.mask{
	position:absolute;
	top:0;
	width:50%;
	height:100%;
	overflow:hidden;
	background-repeat:no-repeat;
	background-size:cover;
}
.mask.L{
	right:50%;
	background-position-x:right;
}
.mask.R{
	left:50%;
	background-position-x:left;
}

.mask .o{
	position:absolute;
	top:0;
}
.mask.L .o{	right:0;}
.mask.R .o{	left:0;}

/********** 景 1 start ***********/
.scene:nth-child(1) .mask.L{
	background-image:url(../images/homeKV1_L.svg);
}
.scene:nth-child(1) .mask.L .o:nth-child(1){
	width:4.21vw;
	margin:5.05vw 20.52vw 0 0;
}
.scene:nth-child(1) .mask.L .o:nth-child(1):before{
	padding-top:105%;
	background-image:url(../images/homeKV1Obj1.svg);
}
.scene:nth-child(1) .mask.L .o:nth-child(2){
	width:2.63vw;
	margin:24.52vw 7.47vw 0 0;
}
.scene:nth-child(1) .mask.L .o:nth-child(2):before{
	padding-top:100%;
	background-image:url(../images/homeKV1Obj2.svg);
}
.scene:nth-child(1) .mask.R{
	background-image:url(../images/homeKV1_R.svg);
}
.scene:nth-child(1) .mask.R .o:nth-child(1){
	width:4.73vw;
	margin:2.63vw 0 0 19.57vw;
}
.scene:nth-child(1) .mask.R .o:nth-child(1):before{
	padding-top:75.55%;
	background-image:url(../images/homeKV1Obj3.svg);
}
.scene:nth-child(1) .mask.R .o:nth-child(2){
	width:2.31vw;
	margin:27.47vw 0 0 7.57vw;
}
.scene:nth-child(1) .mask.R .o:nth-child(2):before{
	padding-top:100%;
	background-image:url(../images/homeKV1Obj4.svg);
}
/********** 景 1 end ***********/

/********** 景 2 start ***********/
.scene:nth-child(2) .mask.L{
	background-image:url(../images/homeKV2_L.svg);
}
.scene:nth-child(2) .mask.L .o:nth-child(1){
	width:4.63vw;
	margin:5.57vw 21.36vw 0 0;
}
.scene:nth-child(2) .mask.L .o:nth-child(1):before{
	padding-top:77.27%;
	background-image:url(../images/homeKV2Obj1.svg);
}
.scene:nth-child(2) .mask.L .o:nth-child(2){
	width:2.63vw;
	margin:26.84vw 4.31vw 0 0;
}
.scene:nth-child(2) .mask.L .o:nth-child(2):before{
	padding-top:100%;
	background-image:url(../images/homeKV2Obj2.svg);
}
.scene:nth-child(2) .mask.R{
	background-color:#f8c5a9;
	background-image:url(../images/homeKV2_R.svg);
}
.scene:nth-child(2) .mask.R .o:nth-child(1){
	width:2.1vw;
	margin:9.26vw 0 0 24.21vw;
}
.scene:nth-child(2) .mask.R .o:nth-child(1):before{
	padding-top:100%;
	background-image:url(../images/homeKV2Obj3.svg);
}
.scene:nth-child(2) .mask.R .o:nth-child(2){
	width:4vw;
	margin:25.36vw 0 0 5.05vw;
}
.scene:nth-child(2) .mask.R .o:nth-child(2):before{
	padding-top:113.15%;
	background-image:url(../images/homeKV2Obj4.svg);
}
/********** 景 2 end ***********/

/********** 景 3 start ***********/
.scene:nth-child(3) .mask.L{
	background-image:url(../images/homeKV3_L.svg);
}
.scene:nth-child(3) .mask.L .o:nth-child(1){
	width:4.21vw;
	margin:4.73vw 20.42vw 0 0;
}
.scene:nth-child(3) .mask.L .o:nth-child(1):before{
	padding-top:100%;
	background-image:url(../images/homeKV3Obj1.svg);
}
.scene:nth-child(3) .mask.L .o:nth-child(2){
	width:2.63vw;
	margin:25.78vw 6.31vw 0 0;
}
.scene:nth-child(3) .mask.L .o:nth-child(2):before{
	padding-top:100%;
	background-image:url(../images/homeKV3Obj2.svg);
}
.scene:nth-child(3) .mask.R{
	background-image:url(../images/homeKV3_R.svg);
}
.scene:nth-child(3) .mask.R .o:nth-child(1){
	width:2.63vw;
	margin:11.15vw 0 0 23.89vw;
}
.scene:nth-child(3) .mask.R .o:nth-child(1):before{
	padding-top:100%;
	background-image:url(../images/homeKV3Obj3.svg);
}
.scene:nth-child(3) .mask.R .o:nth-child(2){
	width:2.1vw;
	margin:29.78vw 0 0 8vw;
}
.scene:nth-child(3) .mask.R .o:nth-child(2):before{
	padding-top:100%;
	background-image:url(../images/homeKV3Obj3.svg);
}
/********** 景 3 end ***********/

/********** 景 4 start ***********/
.scene:nth-child(4) .mask.L{
	background-image:url(../images/homeKV4_L.svg);
}
.scene:nth-child(4) .mask.L .o:nth-child(1){
	width:2.1vw;
	margin:27.47vw 7.36vw 0 0;
}
.scene:nth-child(4) .mask.L .o:nth-child(1):before{
	padding-top:100%;
	background-image:url(../images/homeKV4Obj2.svg);
}
.scene:nth-child(4) .mask.R{
	background-image:url(../images/homeKV4_R.svg);
}
.scene:nth-child(4) .mask.R .o:nth-child(1){
	width:3.68vw;
	margin:3.68vw 0 0 21.05vw;
}
.scene:nth-child(4) .mask.R .o:nth-child(1):before{
	padding-top:128.57%;
	background-image:url(../images/homeKV4Obj3.svg);
}
.scene:nth-child(4) .mask.R .o:nth-child(2){
	width:2.63vw;
	margin:30.1vw 0 0 9.57vw;
}
.scene:nth-child(4) .mask.R .o:nth-child(2):before{
	padding-top:100%;
	background-image:url(../images/homeKV4Obj4.svg);
}
/********** 景 4 end ***********/
/********************* 場景 end *************************/

/********************* 主標前言 start *************************/
.mainTWrapper{
	position:absolute;
	left:50%;
	bottom:50%;
	width:45.26%;
	transform:translateX(-50%);
	margin-bottom:-6.1%;
	z-index:1;
}

/********** mainT start **********/
.mainT{
	transform-origin:center bottom;
}

.mainT .txt{
	background:url(../images/homeMainTBg.svg) no-repeat center bottom/100% 100%;
	padding:7.2% 11.62% 16.74%;
	xanimation:mainTxt 2s ease-in-out alternate infinite; /* 暫時移除飄浮動畫, 因為 Chrome 版本 89.0.4389.82 (正式版本) (64 位元) 有 bug 造成顯示模糊 */
}
@keyframes mainTxt{
	from{ transform:translateY(5px);}
	to{ transform:translateY(-5px);}
}
.mainT .txt > *{
	text-align:center;
}
.mainT h2{
	margin:0 auto;
	width:77.1%;
	font-size:0;
}
.mainT h2:before{
	content:"";
	display:block;
	padding-top:18.43%;
	background:url(../images/logo.svg) no-repeat;
	background-position-x:center;
	background-size:auto 200%;
	transition:background-position-y 0.5s ease-out;
}
.mainTWrapper.s1 h2:before,
.mainTWrapper.s3 h2:before{
	background-position-y:top;
}
.mainTWrapper.s2 h2:before,
.mainTWrapper.s4 h2:before{
	background-position-y:bottom;
}
.mainT h3{
	font-size:1.04vw;
	font-weight:500;
	letter-spacing:0.09em;
	color:#473a30;
	margin:1em 0 0;
}
.mainT p{
	font-size:0.85vw;
	line-height:1.6em;
	letter-spacing:0.1em;
	margin:0.4em 0 0;
}
/********** mainT end **********/

/********** 物件 start **********/
.ogWrapper,
.og{
	position:absolute;
	left:0;
	top:0;
	width:100%;
}
.og{
	opacity:0;
	transition:opacity 0.5s;
}
.mainTWrapper.s1 .og:nth-child(1),
.mainTWrapper.s2 .og:nth-child(2),
.mainTWrapper.s3 .og:nth-child(3),
.mainTWrapper.s4 .og:nth-child(4){
	opacity:1;
}
.og:nth-child(1) .o:nth-child(1){
	right:0;
	top:0;
	width:6.97%;
	margin:32.55% -2.79% 0 0;
}
.og:nth-child(1) .o:nth-child(1):before{
	padding-top:156.66%;
	background-image:url(../images/homeKV1Obj5.svg);
}
.og:nth-child(2) .o:nth-child(1){
	right:0;
	top:0;
	width:5.81%;
	margin:3.72% 5.34% 0 0;
}
.og:nth-child(2) .o:nth-child(1):before{
	padding-top:148%;
	background-image:url(../images/homeKV2Obj5.svg);
}
.og:nth-child(4) .o:nth-child(1){
	left:0;
	top:0;
	width:9.3%;
	margin:6.97% 0 0 -5.11%;
}
.og:nth-child(4) .o:nth-child(1):before{
	padding-top:100%;
	background-image:url(../images/homeKV4Obj1.svg);
}
.og:nth-child(4) .o:nth-child(2){
	right:0;
	top:0;
	width:9.3%;
	margin:38% 3.48% 0 0;
}
.og:nth-child(4) .o:nth-child(2):before{
	padding-top:92.5%;
	background-image:url(../images/homeKV4Obj5.svg);
}
/********** 物件 end **********/
/********************* 主標前言 end *************************/

/********************* scrollHint start *************************/
.scrollHint{
	position:absolute;
	left:50%;
	bottom:0;
	width:5%;
	transform:translate(-50%, -20%);
	cursor:pointer;
	z-index:2;
}
.scrollHint span{
	position:relative;
	display:block;
	width:100%;
	padding-top:100%;
	animation:scrollHint 0.5s ease-in infinite alternate;
}
@keyframes scrollHint{
	to{
		transform:translateY(10px);
	}
}
.scrollHint span:before,
.scrollHint span:after{
	position:absolute;
	bottom:40%;
	content:"";
	display:block;
	width:50%;
	height:2px;
	background:#FFF;
}
.scrollHint span:before{
	right:50%;
	transform-origin:right bottom;
	transform:rotate(42deg);
}
.scrollHint span:after{
	left:50%;
	transform-origin:left bottom;
	transform:rotate(-42deg);
}
/********************* scrollHint end *************************/
/****************************************** home end ************************************************/


/****************************************** product start ************************************************/
/********************* 標頭區 start *************************/
.product .info{
	text-align:center;
}

.product .header{
	position:relative;
	padding-top:7.36%;
	font-size:3vw;
	display:flex;
	flex-direction:column;
	align-items:center;
}

.product .info h3{
	position:relative;
	font-size:1em;
	font-weight:500;
	line-height:1em;
}
.product .info h3 .curve,
.product .info h3 .oWrapper{
	position:absolute;
	left:50%;
	top:0;
	width:280%;
	transform:translate(-49.4%, -12%);
}

.product .info h3 .curve:before{
	content:"";
	display:block;
	padding-top:13.15%;
	background:url(../images/productHeaderCurve.svg) no-repeat center/contain;
}
.product .info h3 .curve svg{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
.product .info h3 .curve svg path{
	stroke:#fff1e1;
	stroke-width:10;
	fill:none;
}

.product .info h3 .oWrapper:before{
	content:"";
	display:block;
	padding-top:13.15%;
	background:url(../images/productHeaderOWrapper.svg) no-repeat center/contain;
}
.product .info h3 .o{
	left:0;
	top:0;
}
.product .info h3 .o:nth-child(1){
	width:4.42%;
	margin:4.84% 0 0 21.26%;
}
.product .info h3 .o:nth-child(1):before{
	padding-top:150%;
	background:url(../images/productHeaderObj1.svg) no-repeat center/contain;
}
.product .info h3 .o:nth-child(2){
	width:2.21%;
	margin:2.21% 0 0 26.84%;
}
.product .info h3 .o:nth-child(2):before{
	padding-top:204.76%;
	background:url(../images/productHeaderObj2.svg) no-repeat center/contain;
}
.product .info h3 .o:nth-child(3){
	width:2.42%;
	margin:1.84% 0 0 71.57%;
	animation-delay:1s;
}
.product .info h3 .o:nth-child(3):before{
	padding-top:213.04%;
	background:url(../images/productHeaderObj3.svg) no-repeat center/contain;
}
.product .info h3 .o:nth-child(4){
	width:6.63%;
	margin:6.31% 0 0 81.15%;
}
.product .info h3 .o:nth-child(4):before{
	padding-top:84.12%;
	background:url(../images/productHeaderObj4.svg) no-repeat center/contain;
}

.product .info h3 span{
	position:relative;
	display:inline-block;
	margin-left:0.41em;
}
.product .info h3 span:nth-of-type(5){
	margin-left:0.9em;
}
.product .info h3 span:nth-of-type(odd){
	color:#f3733a;
}
.product .info h3 span:nth-of-type(even){
	color:#e58c83;
}

.product .header p{
	position:relative;
	margin:1em 0 0;
	font-size:0.41em;
	letter-spacing:0.1em;
	margin-left:1.5em;
}

.product .header:after{
	position:absolute;
	left:0;
	top:0;
	content:"";
	display:block;
	width:100%;
	padding-top:10%;
	background:linear-gradient(to bottom, rgba(255, 236, 211, 1), rgba(255, 236, 211, 0));
}

.product .info > p{
	margin:6% 0 0;
	font-size:2.28em;
	font-weight:500;
	letter-spacing:0.15em;
}
.product .info > p strong{
	display:inline-block;
	color:#f3733a;
	font-size:1.5em;
	font-weight:700;
	transform:translateY(5%);
	animation:zoomHint 0.5s ease-in alternate infinite;
}
@keyframes zoomHint{
	from{
		opacity:0.5;
	}
}
.product .info > p strong em{
	display:inline-block;
	font-style:normal;
	font-size:1.9em;
	transform:translateY(10%);
}
/********************* 標頭區 end *************************/

/********************* 商品區 start *************************/
.product .CT > ul{
	margin-top:8%;
}
.product .CT > ul > li{
	display:flex;
	align-items:flex-start;
}
.product .CT > ul > li+li{
	margin-top:6.84%;
}

/********* 情境 start **********/
.type{
	position:relative;
	width:52.64%;
}
.product .CT > ul > li:nth-child(even) .type{
	order:1;
}

.type .bg:before{
	content:"";
	display:block;
	padding-top:50%;
}
.product .CT > ul > li:nth-child(odd) .type .bg:before{ background:#f9d4c5;}
.product .CT > ul > li:nth-child(even) .type .bg:before{ background:#d5dadd;}
.type .people{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
}
.product .CT > ul > li:nth-child(1) .type .people{ background-image:url(../images/productType1.svg);}
.product .CT > ul > li:nth-child(2) .type .people{ background-image:url(../images/productType2.svg); height:124%;}
.product .CT > ul > li:nth-child(3) .type .people{ background-image:url(../images/productType3.svg);}
.product .CT > ul > li:nth-child(4) .type .people{ background-image:url(../images/productType4.svg);}
.type h4{
	position:absolute;
	left:0;
	top:0;
	width:36%;
	color:#FFF;
	font-size:1.78vw;
	font-weight:500;
	letter-spacing:0.1em;
	text-align:center;
	line-height:1em;
	padding:0.9em 2.88em 1em;
	background-repeat:no-repeat;
	background-position:center;
	background-size:100% 100%;
}
.product .CT > ul > li:nth-child(odd) .type h4{ background-image:url(../images/productTypeTitleOdd.svg);}
.product .CT > ul > li:nth-child(even) .type h4{ background-image:url(../images/productTypeTitleEven.svg);}
.product .CT > ul > li:nth-child(1) .type h4{ margin:-5% 0 0 35%;}
.product .CT > ul > li:nth-child(2) .type h4,
.product .CT > ul > li:nth-child(4) .type h4{ margin:-2.6% 0 0 20.6%;}
.product .CT > ul > li:nth-child(3) .type h4{ margin:-2.6% 0 0 35%;}
/********* 情境 end **********/

/********* 商品 start **********/
.prd{
	position:relative;
	width:47.36%;
}

.prd .oWrapper,
.prd a{
	position:absolute;
	top:0;
}

.prd .oWrapper{
	left:0;
	width:100%;
}
.product .CT > ul > li:nth-child(1) .o:nth-child(1){ width:47.11%; margin:-10% 0 0 28.88%;}
.product .CT > ul > li:nth-child(1) .o:nth-child(1):before{ padding-top:71.69%; background-image:url(../images/productObj1_1.svg);}
.product .CT > ul > li:nth-child(2) .o:nth-child(1){ width:59.77%; margin:2.44% 0 0 21.55%; animation-duration:30s;}
.product .CT > ul > li:nth-child(2) .o:nth-child(1):before{ padding-top:57.62%; background-image:url(../images/productObj2_1.svg);}
.product .CT > ul > li:nth-child(2) .o:nth-child(2){ width:8%; margin:22.22% 0 0 81.11%;}
.product .CT > ul > li:nth-child(2) .o:nth-child(2):before{ padding-top:100%; background-image:url(../images/productObj2_2.svg);}
.product .CT > ul > li:nth-child(3) .o:nth-child(1){ width:23.33%; margin:17.55% 0 0 7.55%;}
.product .CT > ul > li:nth-child(3) .o:nth-child(1):before{ padding-top:87.61%; background-image:url(../images/productObj3_1.svg);}
.product .CT > ul > li:nth-child(3) .o:nth-child(2){ width:13.55%; margin:14% 0 0 48.66%;}
.product .CT > ul > li:nth-child(3) .o:nth-child(2):before{ padding-top:96.72%; background-image:url(../images/productObj3_2.svg);}
.product .CT > ul > li:nth-child(4) .o:nth-child(1){ width:49.44%; margin:-5.55% 0 0 23.33%; animation-duration:20s;}
.product .CT > ul > li:nth-child(4) .o:nth-child(1):before{ padding-top:76.92%; background-image:url(../images/productObj4_1.svg);}

.prd a{
	display:block;
	width:48.88%;
	margin-top:-8.88%;
}
.product .CT > ul > li:nth-child(odd) .prd a{ left:0; margin-left:10.55%;}
.product .CT > ul > li:nth-child(even) .prd a{ right:0; margin-right:10.55%;}
.prd a .slick-list{
	transition:transform 0.5s;
}
.prd a:hover .slick-list{
	transform:scale(1.05);
}
.prd a img{
	display:block;
	width:100%;
}
.prd a .btm{
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
}
.prd a .btm .name{
	width:71%;
	font-family:DINProMedium, 'Noto Sans TC';
	font-size:1.2vw;
	transition:color 0.2s;
}
.prd a .btm .cta{
	width:24%;
	transition:transform 0.5s;
}
.prd a:hover .btm .cta{
	transform:scale(1.1);
}
.prd a .btm .cta:before{
	content:"";
	display:block;
	padding-top:100%;
	background:#665e58 url(../images/bag.svg) no-repeat center/contain;
	border-radius:50%;
	transition:background-color 0.2s;
	animation:ctaHint 0.6s ease-in alternate infinite;
}
@keyframes ctaHint{
	from{ transform:scale(0.95);}
	to{	transform:scale(1.1);}
}
.product .CT > ul > li:nth-child(odd) .prd a:hover .btm{ color:#f3733a;}
.product .CT > ul > li:nth-child(even) .prd a:hover .btm{ color:#125468;}
.prd a:hover .btm .cta:before{ background-color:currentColor;}

.prd .slick-dots{
	bottom:-25.9%;
	text-align:left;
}
.prd .slick-dots li{
	width:3.63%;
	transition:transform 0.2s;
}
.prd .slick-dots li+li{	
	margin-left:4%;
}
.prd .slick-dots li.slick-active{
	transform:scale(1.4);
}
.prd .slick-dots li button{
	height:0;
	padding:100% 0 0;
	background:#d1c5b8;
	box-shadow:none;
	transition:background 0.2s;
}
.product .CT > ul > li:nth-child(odd) .prd .slick-dots li button:hover,
.product .CT > ul > li:nth-child(odd) .prd .slick-dots li.slick-active button{
	background:#fcb042;
}
.product .CT > ul > li:nth-child(even) .prd .slick-dots li button:hover,
.product .CT > ul > li:nth-child(even) .prd .slick-dots li.slick-active button{
	background:#7094c0;
}
/********* 商品 end **********/
/********************* 商品區 end *************************/
/****************************************** product end ************************************************/


/****************************************** event start ************************************************/
.event .CT{
	margin-top:6.31%;
	padding:4% 0;
	background:#fce2d3;
}

/********************* 標題區 start *************************/
.event hgroup{
	display:flex;
	height:7.36vw;
}

.event hgroup .dash.L{
	width:16.84%;
}
.event hgroup .dash.R{
	width:55.78%;
}
.event hgroup .dash span{
	display:block;
	height:100%;
}
.event hgroup .dash span:before{
	content:"";
	display:block;
	height:inherit;
	background-repeat:no-repeat;
	background-position:left center;
	background-size:cover;
}
.event hgroup .dash.L span:before{
	background-image:url(../images/eventTDashL.svg);
}
.event hgroup .dash.R span:before{
	background-image:url(../images/eventTDashR.svg);
}

.event hgroup h3{
	flex-grow:1;
	display:flex;
	justify-content:center;
	align-items:center;
	font-size:3.57vw;
	font-weight:500;
	color:#f3733a;
}
.event hgroup h3 *{
	display:inline-block;
}
.event hgroup h3 span{
	margin:0 0.1em;
}
.event hgroup h3 span:nth-child(4){
	margin-left:0.35em;
}
.event hgroup h3 span:nth-child(n+4){
	font-size:0.65em;
	color:#e58c83;
}
.event hgroup h3 i{
	font-style:normal;
}
.event hgroup h3 span:nth-child(1) i{ transform:translateY(8%) rotate(-15deg);}
.event hgroup h3 span:nth-child(2) i{ transform:translateY(-27%) rotate(-5deg);}
.event hgroup h3 span:nth-child(3) i{ transform:translateY(-32%) rotate(-5deg);}
.event hgroup h3 span:nth-child(4) i{ transform:translateY(-57%) rotate(10deg);}
.event hgroup h3 span:nth-child(5) i{ transform:translate(8%, -50%) rotate(9deg);}
.event hgroup h3 span:nth-child(6) i{ transform:translateY(-17%) rotate(5deg);}
.event hgroup h3 span:nth-child(7) i{ transform:translateY(16%) rotate(15deg);}
/********************* 標題區 end *************************/

/********************* 內容區 start *************************/
.event .detailBlock{
	position:relative;
	margin:1.15% auto 0;
	width:68.42%;
	padding:1.15% 0 0 32.1%;
	min-height:25.26vw;
}

.event .detailBlock:before{
	position:absolute;
	left:0;
	top:0;
	content:"";
	display:block;
	width:46.92%;
	padding-top:36.92%;
	background-image:url(../images/eventP.svg);
	background-repeat:no-repeat;
	background-position-y:center;
	background-size:cover;
	transition:background-position-x 0.5s;
}
.event .detailBlock.t1:before{ background-position-x:left;}
.event .detailBlock.t2:before{ background-position-x:right;}

.event .tab{
	display:flex;
	align-items:flex-start;
}
.event .tab li,
.event h4{
	font-size:1.5vw;
	font-weight:500;
	line-height:1em;
	padding:0.5em 0.9em 0.5em 1.2em;
	border:3px solid;
	border-radius:2em;
	text-align:center;
	letter-spacing:0.2em;
}
.event .tab li{
	cursor:pointer;
	color:#f3733a;
	transition:all 0.2s;
	animation:tabHint 0.5s ease-in alternate infinite;
}
@keyframes tabHint{
	to{
		background:#FFF;
	}
}
.event .tab li+li{
	margin-left:0.7em;
}
.event .detailBlock.t1 .tab li:nth-child(1),
.event .detailBlock.t2 .tab li:nth-child(2),
.event .tab li:hover,
.event h4{
	border-color:#f3733a;
	background:#f3733a;
	color:#FFF;
}
.event .detailBlock.t1 .tab li:nth-child(1),
.event .detailBlock.t2 .tab li:nth-child(2),
.event .tab li:hover{
	animation:none;
}

.event .tabCTWrapper{
	margin:6% 0 0 5%;
}
.event .tabCT{
	display:none;
}
.event .detailBlock.t1 .tabCT:nth-child(1),
.event .detailBlock.t2 .tabCT:nth-child(2){
	display:block;
}

.event h4{
	margin-bottom:1.5em;
	display:none;
}

.event dl{
	font-size:1.5vw;
	letter-spacing:0.1em;
	line-height:1em;
}
.event .row{
	display:flex;
	flex-wrap:wrap;
}
.event .row+.row{
	margin-top:0.8em;
}
.event dt{
	width:5.2em;
	font-weight:900;
}
.event dd{
	flex-grow:1;
}
.event dd strong{
	font-weight:700;
	color:#f3733a;
	letter-spacing:normal;
}
.event .row:nth-child(2) dd{
	width:100%;
	margin-top:1em;
	font-size:0.8em;
}
.event .row:nth-child(2) dd ol{
	list-style:decimal;
	padding-left:1.5em;
	line-height:1.6em;
}
.event .row:nth-child(2) dd ol strong{
	display:inline-block;
	font-size:1.4em;
	transform:translateY(5%);
}
.event .row:nth-child(2) dd ol strong em{
	display:inline-block;
	font-size:1.8em;
	font-style:normal;
	transform:translateY(20%);
}
.event .row:nth-child(2) dd ol i{
	font-size:0.65em;
	font-style:normal;
}

.event dd ul{
	font-size:0.6em;
	padding-left:1.5em;
	list-style:disc;
	white-space:nowrap;
}
.event dd ul li em{
	display:inline-block;
	font-style:normal;
	width:12em;
}
.event dd ul li a{
	text-decoration:underline;
	transition:color 0.2s;
}
.event dd ul li a:hover{
	text-decoration:none;
	color:#f3733a;
}

.event .att{
	font-size:1.1em;
	margin-top:0.5em;
	color:currentColor;
	line-height:1.8em;
}
.event .att span{
	display:inline-block;
}
.event .att span:nth-of-type(2){
	margin-left:1em;
}

.event .oWrapper{
	position:absolute;
	left:0;
	top:0;
	width:100%;
}
.event .o:nth-child(1){	width:1.26%; margin:31.26% 0 0 8.1%;}
.event .o:nth-child(1):before{ padding-top:108.33%;	background-image:url(../images/eventObj1.svg);}
.event .o:nth-child(2){	width:4.52%; margin:33.05% 0 0 87.57%;}
.event .o:nth-child(2):before{ padding-top:95.34%;	background-image:url(../images/eventObj2.svg);}
/********************* 內容區 end *************************/
/****************************************** event end ************************************************/


/****************************************** movie start ************************************************/
.movie .CT{
	background:#fce2d3;
	padding-top:1%;
}

/********************* 標題 start *************************/
.movie h4{
	font-size:2.5vw;
	font-weight:500;
	text-align:center;
	letter-spacing:0.31em;
	color:#473a30;
	transform:translateX(0.1em);
}
.movie h4 span{
	display:inline-block;
	width:1em;
	height:1em;
	margin:-0.2em 0.2em 0 0;
	vertical-align:middle;
}
.movie h4 span i{
	position:relative;
	font-size:0;
	display:block;
	height:100%;
}
.movie h4 span i:before,
.movie h4 span i:after{
	position:absolute;
	content:"";
	left:50%;
	top:50%;
	width:65%;
	height:0.21vw;
	background:currentColor;
}
.movie h4 span i:before{
	transform:translate(-50%, -50%) rotate(-45deg);
}
.movie h4 span i:after{
	transform:translate(-50%, -50%) rotate(-135deg);
}
/********************* 標題 end *************************/

/********************* 預覽 start *************************/
.videoBlock{
	position:relative;
	width:61.05%;
	margin:2% auto 0;
}

.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:10.68%;
	min-width:50px;
	max-width:124px;
	background:#fff1e1;
	border-radius:50%;
	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(../images/vBtn.svg) no-repeat center/contain;
}
.videoBlock .vBtn:hover span{
	animation:none;
}
/********************* 預覽 end *************************/

/********************* 資訊 start *************************/
.movie .info{
	width:61.05%;
	margin:2% auto 0;
	display:flex;
}

.movie .info ul{
	width:41%;
	font-size:0.98vw;
	list-style:disc;
	padding:0.5% 0 0.5% 1.5em;
	line-height:1.6em;
	letter-spacing:0.1em;
}
.movie .info ul li+li{
	margin-top:0.8em;
}

.movie .detail{
	width:51.72%;
	margin-left:6.89%;
	padding:0.5% 0 0.5% 6.89%;
	background:linear-gradient(to bottom, #f6c9bc 0.63vw, transparent 0.63vw, transparent 1vw) repeat-y left top/0.31vw 1vw;
}

.movie .detail > strong{
	display:block;
	color:#f3733a;
	font-size:1.26vw;
	margin-bottom:1em;
}

.movie dl{
	font-size:1.26vw;
	letter-spacing:0.1em;
	line-height:1em;
}
.movie .row{
	display:flex;
	flex-wrap:wrap;
}
.movie .row+.row{
	margin-top:1em;
}
.movie dt{
	width:5.2em;
	font-weight:900;
}
.movie dd{
	flex-grow:1;
}
.movie dd strong{
	font-weight:700;
	color:#f3733a;
}
.movie .row:nth-child(2) dd{
	width:100%;
	margin-top:0.5em;
	font-size:0.79em;
	line-height:1.8em;
}
.movie .row:nth-child(2) dd strong em{
	font-size:1.6em;
	font-style:normal;
}
.movie .att{
	margin-top:1.5em;
	color:currentColor;
}
/********************* 資訊 end *************************/

/**************** 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 ********************/

.movie .oWrapper{
	position:absolute;
	left:0;
	top:0;
	width:100%;
}
.movie .o:nth-child(1),
.movie .o:nth-child(7){ width:2.63%;}
.movie .o:nth-child(1){ margin:15.05% 0 0 10.52%;}
.movie .o:nth-child(1):before,
.movie .o:nth-child(7):before{ padding-top:168%; background-image:url(../images/movieObj1.svg);}
.movie .o:nth-child(2){width:1.57%; margin:21.05% 0 0 5.57%;}
.movie .o:nth-child(2):before{ padding-top:106.66%; background-image:url(../images/movieObj2.svg);}
.movie .o:nth-child(3){width:4.42%; margin:46.63% 0 0 8.84%;}
.movie .o:nth-child(3):before{ padding-top:123.8%; background-image:url(../images/movieObj3.svg);}
.movie .o:nth-child(4){width:1.15%; margin:22.73% 0 0 92%;}
.movie .o:nth-child(4):before{ padding-top:118.18%; background-image:url(../images/movieObj4.svg);}
.movie .o:nth-child(5){width:1.26%; margin:25.05% 0 0 93.15%; animation-delay:0.5s;}
.movie .o:nth-child(5):before{ padding-top:125%; background-image:url(../images/movieObj5.svg);}
.movie .o:nth-child(6){width:1.68%; margin:28.94% 0 0 88.84%;}
.movie .o:nth-child(6):before{ padding-top:262.5%; background-image:url(../images/movieObj6.svg);}
.movie .o:nth-child(7){ margin:50.52% 0 0 86.63%;}
.movie .o:nth-child(7):before{ transform:scaleX(-1);}

.movie .CT:after{
	content:"";
	display:block;
	margin-top:1.05%;
	padding-top:35.78%;
	background:url(../images/movieBtm.svg) no-repeat center bottom/cover;
}
/****************************************** movie end ************************************************/


@media screen and (min-width:1024px) and (max-width:1200px){
	
	.themeEventContainer{
		font-size:1.04vw;
	}
	
}


@media screen and (min-width:1025px){
	
	/************************************** header start ***************************************************/
	/********************** nav start *************************/
	.themeEventContainer header:hover nav{
		width:12em;
	}
	/********************** nav end *************************/
	/********************** _burgerBtn start *************************/
	.themeEventContainer header:hover ._burgerBtn{
		opacity:0;
	}
	/********************** _burgerBtn end *************************/
	/************************************** header end ***************************************************/
	
}


@media screen and (max-width:1024px){
	
	/************************************** header start ***************************************************/	
	/********************** nav start *************************/
	.themeEventContainer header nav{
		font-size:0.95em;
	}
	.themeEventContainer header.open nav{
		width:12em;
		height:calc(100vh - 47px);
	}
	/********************** nav end *************************/
	/********************** _burgerBtn start *************************/
	.themeEventContainer header ._burgerBtn{
		margin:8% 5% 0 0;
		width:1.45em;
		height:1.45em;
		cursor:pointer;
	}
	.themeEventContainer header ._burgerBtn span,
	.themeEventContainer header ._burgerBtn span:before,
	.themeEventContainer header ._burgerBtn span:after{
		height:2px;
	}
	.themeEventContainer header.open ._burgerBtn span{
		background:none;
	}
	.themeEventContainer header ._burgerBtn span:before{ transform:translateY(-300%);}
	.themeEventContainer header ._burgerBtn span:after{ transform:translateY(200%);}
	.themeEventContainer header.open ._burgerBtn span:before,
	.themeEventContainer header.open ._burgerBtn span:after{
		background:currentColor;
	}
	.themeEventContainer header.open ._burgerBtn span:before{
		transform:translateY(-50%) rotate(-45deg);
	}
	.themeEventContainer header.open ._burgerBtn span:after{
		transform:translateY(-50%) rotate(45deg);
	}
	/********************** _burgerBtn end *************************/
	/************************************** header end ***************************************************/
	
}


@media screen and (max-width:1023px){
	
	.themeEventContainer{
		font-size:14px;
	}
	
	/************************************** header start ***************************************************/	
	/********************** nav start *************************/
	.themeEventContainer header{
		top:47px;
	}
	/********************** nav end *************************/
	/************************************** header end ***************************************************/
	
	/****************************************** home start ************************************************/	
	/********************* 場景 start *************************/
	.sceneWrapper{
		padding-top:calc(100vh - 100px);
	}
	.mask .o{
		display:none;
	}
	/********************* 場景 end *************************/
	
	/********************* 主標前言 start *************************/
	.mainTWrapper{
		width:80%;
		margin-bottom:-15%;
	}
	
	/********** mainT start **********/	
	.mainT .txt{
		padding:9% 9% 25%;
	}
	.mainT h2{
		width:85%;
	}
	.mainT h3{
		font-size:3vw;
	}
	.mainT p{
		font-size:2vw;
		letter-spacing:auto;
	}
	/********** mainT end **********/
	
	/********** 物件 start **********/
	.ogWrapper{
		display:none;
	}
	/********** 物件 end **********/
	/********************* 主標前言 end *************************/
	
	/********************* scrollHint start *************************/
	.scrollHint{
		width:10%;
		margin-bottom:5%;
	}
	/********************* scrollHint end *************************/
	/****************************************** home end ************************************************/
	
	/****************************************** product start ************************************************/
	/********************* 標頭區 start *************************/	
	.product .info h3{
		font-size:2.5em;
	}
	
	.product .header p{
		font-size:3vw;
	}
	
	.product .info > p{
		margin-left:2.5%;
		margin-right:2.5%;
		font-size:1.2em;
		letter-spacing:auto;
		line-height:1.6em;
	}
	/********************* 標頭區 end *************************/
	
	/********************* 商品區 start *************************/
	.product .CT > ul{
		margin-top:15%;
	}

	.product .CT > ul > li{
		display:block;
	}
	.product .CT > ul > li+li{
		margin-top:0;
	}
	
	/********* 情境 start **********/
	.type{
		position:relative;
		width:auto;
	}
	.type h4{
		width:48%;
		font-size:4.5vw;
	}
	/********* 情境 end **********/
	
	/********* 商品 start **********/
	.prd{
		width:auto;
		padding-top:115%;
	}
	.prd .oWrapper{
		margin-top:20%;
	}
	.prd a{
		width:80%;
		margin-top:0;
	}
	.product .CT > ul > li:nth-child(odd) .prd a{ margin-left:10%;}
	.product .CT > ul > li:nth-child(even) .prd a{ margin-right:10%;}
	
	.prd a .btm .name{
		font-size:4vw;
	}
	/********* 商品 end **********/
	/********************* 商品區 end *************************/
	/****************************************** product end ************************************************/
	
	/****************************************** event start ************************************************/
	.event .CT{
		margin-top:0;
		padding:10% 0;
	}
	
	/********************* 標題區 start *************************/
	.event hgroup{
		height:15vw;
	}
	
	.event hgroup .dash.L{
		width:5%;
	}
	.event hgroup .dash.R{
		width:25%;
	}
	
	.event hgroup h3{
		font-size:9.5vw;
	}
	/********************* 標題區 end *************************/
	
	/********************* 內容區 start *************************/
	.event .detailBlock{
		margin-top:5%;
		width:95%;
		padding:0;
		min-height:0;
	}
	
	.event .detailBlock:before{
		display:none;
	}
	
	.event .tab{
		display:none;
	}
	.event .tab li,
	.event h4{
		font-size:5vw;
	}
	
	.event .tabCTWrapper{
		margin:0;
	}
	.event .tabCT{
		display:block;
	}
	.event .tabCT+.tabCT{
		margin-top:10%;
	}
	
	.event h4{
		display:block;
	}
	
	.event dl{
		font-size:4.5vw;
		letter-spacing:normal;
	}
	.event .row:nth-child(2) dd ol br{
		display:none;
	}
	
	.event dd ul{
		font-size:0.7em;
	}
	.event dd ul li+li{
		margin-top:0.5em;
	}
	
	.event .att{
		font-size:0.9em;
	}
	.event .att span{
		display:block;
	}
	.event .att span:nth-of-type(2){
		margin-left:0;
	}
	
	.event .oWrapper{
		display:none;
	}
	/********************* 內容區 end *************************/
	/****************************************** event end ************************************************/
	
	/****************************************** movie start ************************************************/	
	.movie .CT{
		padding-top:4%;
	}
	
	/********************* 標題 start *************************/
	.movie h4{
		font-size:4.8vw;
		letter-spacing:normal;
		transform:none;
	}
	.movie h4 span{
		margin-left:0.2em;
	}
	/********************* 標題 end *************************/
	
	/********************* 預覽 start *************************/
	.videoBlock{
		width:auto;
		margin-top:5%;
	}
	/********************* 預覽 end *************************/
	
	/********************* 資訊 start *************************/
	.movie .info{
		width:95%;
		margin-top:5%;
		display:block;
	}
	
	.movie .info ul{
		width:auto;
		font-size:4vw;
		padding-top:0;
		padding-bottom:0;
	}
	
	.movie .detail{
		width:auto;
		margin:6% 0 0 0;
		padding:8% 0 0 0;
		background:linear-gradient(to right, #f6c9bc 3.2vw, transparent 3.2vw, transparent 4.8vw) repeat-x left top/4.8vw 1vw;
	}
	
	.movie .detail > strong{
		font-size:4.5vw;
	}
	
	.movie dl{
		font-size:4.5vw;
	}
	.movie .row:nth-child(2) dd br{
		display:none;
	}
	
	.movie .att{
		margin-top:0.8em;
	}
	/********************* 資訊 end *************************/
	
	.movie .oWrapper{
		display:none;
	}
	
	.movie .CT:after{
		margin-top:5%;
		padding-top:50%;
	}
	/****************************************** movie end ************************************************/

}


@media screen and (max-width:767px){
	
	/****************************************** home start ************************************************/	
	/********************* 主標前言 start *************************/
	.mainTWrapper{
		width:110%;
		margin-bottom:-28%;
	}
	
	/********** mainT start **********/	
	.mainT h3{
		font-size:4vw;
	}
	.mainT p{
		font-size:3.2vw;
	}
	/********** mainT end **********/
	/********************* 主標前言 end *************************/
	/****************************************** home end ************************************************/
	
}