@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,700');

@font-face {
	font-family: DINProRegular;
	src:
		url(DINProRegular.eot),
		url(DINProRegular.woff) format("woff"),
		url(DINProRegular.ttf) format("truetype");
}
@font-face {
	font-family: Gotham-Medium;
	src:
		url(Gotham-Medium.eot),
		url(Gotham-Medium.woff) format("woff"),
		url(Gotham-Medium.ttf) format("truetype");
}
@font-face {
	font-family: Gotham-Black;
	src:
		url(Gotham-Black.eot),
		url(Gotham-Black.woff) format("woff"),
		url(Gotham-Black.ttf) format("truetype");
}

html{
	overflow-x:hidden;
}
html.disableScroll{
	overflow:hidden;
}

body, h1, h2, h3, h4, h5, h6, ol, ul, li, dl, dt, dd{
	margin:0;
	padding:0;
}

body{
	font-family:Gotham-Medium, 'Noto Sans TC', 微軟正黑體, sans-serif;
	font-weight:bold;
	color:#444;
}

*,
*:before,
*:after{
	box-sizing:border-box;
}
ul, ol{
	list-style:none;
}
a{
	text-decoration:none;
}

#container{
	position:relative;
	max-width:1920px;
	margin:0 auto;
	z-index:0;
}
main{
	display:block; /* for IE */
	padding:0 2.1% 2.1%;
	background:url(../images/rulerT.gif) repeat-x, url(../images/rulerL.gif) repeat-y, url(../images/rulerR.gif) repeat-y, url(../images/rulerB.gif) repeat-x;
	background-position:left 4.77em, left top, right top, left bottom;
}

main > section{
	min-height:100vh;
	padding-top:4.77em;
}
main > section:not(#home),
#home .ct{
	background:#ececec;
}


/*********************************** 共用 start *****************************************/
p{
	line-height:1.4em;
	margin:0;
}
*+p{
	margin-top:2em;
}

.sectionTitleBlock{
	display:flex;
	color:#c00d23;
	font-size:2.3em;
	font-family:Gotham-Black, 'Noto Sans TC', 微軟正黑體, sans-serif;
}
.sectionTitle hgroup h3{
	font-size:0.43em;
	display:flex;
	align-items:center;
}
.sectionTitle hgroup h3 span{
	position:relative;
	display:block;
	white-space:nowrap;
	font-family:Gotham-Medium;
	font-size:0.9em;
	font-weight:normal;
	line-height:1em;
	padding:0.6em 0.85em 0.7em;
	background:#ececec;
	border:2px solid;
	border-radius:4px;
	transform-origin:right bottom;
}
.sectionTitle hgroup h3 span:before{
	position:absolute;
	content:"";
	display:block;
	left:0.35em;
	right:0.35em;
	bottom:0.5em;
	height:0.7em;
	background:#FE0;
}
.sectionTitle hgroup h3 span i{
	position:relative;
	display:block;
	font-style:normal;
}
.sectionTitle hgroup h3 span:after{
	position:absolute;
	right:0.5em;
	top:100%;
	content:"";
	display:block;
	width:18px;
	height:15px;
	background:url(../images/sectionTalkTriangle.png) no-repeat right top/contain;
}
.sectionTitle hgroup h3 em{
	color:#444;
	display:block;
	font-style:normal;
	margin-left:1em;
	letter-spacing:0.08em;
}

.sectionTitle hgroup h2{
	margin-top:0.15em;
	font-family:Gotham-Black;
	font-weight:normal;
	line-height:1em;
}

.sectionTitle > em{
	display:block;
	font-size:0.75em;
	font-style:normal;
	margin-top:0.7em;
	line-height:1.2em;
}
/*********************************** 共用 end *****************************************/


/************************************** header start ***************************************************/
header{
	position:fixed;
	left:0;
	top:0;
	width:100%;
	background:#FFF;
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:1.2em 3em 1.2em 2em;
	z-index:1;
	box-shadow:0 1px 0 0 rgba(0, 0, 0, 0.15);
}
header h1{
	width:4.875em;
	max-width:78px;
}
header h1 a{
	display:block;
	font-size:0;
}
header h1 a:before{
	content:"";
	display:block;
	padding-top:48.71%;
	background:url(../images/logo.png) no-repeat center top/contain;
}

/******************* 主選單 start **********************/
header nav{
	margin-left:auto;
}
header nav ul{
	display:flex;
	align-items:center;
}
header nav ul li+li{
	margin-left:4.5em;
}
header nav ul li a{
	color:#333;
	font-family:DINProRegular, 'Noto Sans TC', 微軟正黑體, sans-serif;
	font-weight:100;
	letter-spacing:0.05em;
	line-height:1em;
	transition:color 0.2s;
}
header nav ul li a:before{
	content:"";
	display:inline-block;
	width:0.5em;
	height:0.5em;
	border-radius:50%;
	background:transparent;
	vertical-align:middle;
	margin:-0.2em 0.5em 0 0;
	transition:background 0.2s;
}
header nav ul li a:hover,
header nav ul li.active a{
	color:#c00d23;
	font-weight:bold;
}
header nav ul li.active a:before{
	background:currentColor;
}
/******************* 主選單 end **********************/

/******************* toTop start **********************/
.toTop{
	position:fixed;
	right:30px;
	bottom:30px;
	cursor:pointer;
	color:#333;
	font-family:DINProRegular;
	transform:translateY(10em);
	transition:all 0.5s;
}
.toTop.show{
	transform:none;
}
.toTop span{
	position:absolute;
	display:block;
	left:50%;
	width:80%;
	padding-top:80%;
	transform:translateX(-50%);
	transition:transform 0.2s;
}
.toTop span:before,
.toTop span:after{
	position:absolute;
	bottom:90%;
	display:block;
	content:"";
	width:100%;
	height:2px;
	background:currentColor;
}
.toTop span:before{
	right:50%;
	transform-origin:right top;
	transform:rotate(-45deg);
}
.toTop span:after{
	left:50%;
	transform-origin:left top;
	transform:rotate(45deg);
}
.toTop:after{
	content:"TOP";
	display:block;
	margin-top:90%;
	font-size:1.1em;
}
.toTop:hover{
	color:#c00d22;
}
.toTop:hover span{
	animation:floatUp 0.4s ease-in infinite alternate;
}
@keyframes floatUp{
	to{
		transform:translateY(-10px) translateX(-50%);
	}
}
/******************* toTop end **********************/
/************************************** header end ***************************************************/


/************************************** home start ***************************************************/
#home{
	height:100vh; /* for IE */
	padding-top:calc(4.77em + 2.1%);
	display:flex;
}
#home .ct{
	position:relative;
	width:100%;
	overflow:hidden;
	display:flex;
	justify-content:center;
	align-items:center;
}

.slogan{
	position:absolute;
	left:100%;
	top:50%;
	width:294.5%;
	transform:translateY(-60.52%);
	z-index:0;
}
.slogan:before{
	content:"";
	display:block;
	padding-top:5.31%;
	background:url(../images/homeBgSlogan.png) no-repeat center/contain;
	animation:sloganIn 8s ease-in-out;
}
@keyframes sloganIn{
	to{
		transform:translateX(-133.95%);
	}
}

/******************* 建物 start **********************/
.building{
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	z-index:1;
}
.building:before{
	content:"";
	display:block;
	padding-top:29.56%;
	background:url(../images/homeBuilding.png) no-repeat center bottom/contain;
}
.building li{
	position:absolute;
	bottom:0;
}
.building li:before{
	content:"";
	display:block;
}
.building li svg{
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:0;
	animation:growHeight 1s ease-in-out;
	animation-fill-mode:forwards;
}
@keyframes growHeight{
	to{
		height:100%;
	}
}
.building li svg > *{
	opacity:0;
	animation:flashHint 0.8s ease-in infinite alternate;
	cursor:pointer;
}
@keyframes flashHint{
	to{
		opacity:0.5;
	}
}
.building li svg > *:hover{
	opacity:0.5;
	animation:none;
}
.building li span{
	position:absolute;
	display:block;
	pointer-events:none;
	transform-origin:right bottom;
}
.building li span i{
	position:absolute;
	display:block;
	background:#FFF;
	padding:0.65em 1em;
	font-size:0.875em;
	line-height:1em;
	font-weight:bold;
	font-style:normal;
	letter-spacing:0.1em;
	white-space:nowrap;
	color:#c00d23;
	border-radius:0.2em;
	right:-0.5em;
	bottom:100%;
	z-index:0;
}
.building li span:after{
	position:relative;
	content:"";
	display:block;
	width:1.14em;
	height:0.78em;
	background:url(../images/homeBuildingTalkTriangle.png) no-repeat right top/contain;
	z-index:1;
}
.building li:nth-child(1){
	left:3.18%;
	width:15.32%;
}
.building li:nth-child(1):before{ padding-bottom:192.83%;}
.building li:nth-child(1) svg,
.building li:nth-child(1) svg > *{ animation-delay:1s;}
.building li:nth-child(1) span{
	right:35%;
	bottom:34%;
}
.building li:nth-child(2){
	left:41.7%;
	width:11.97%;
}
.building li:nth-child(2):before{ padding-bottom:127.52%;}
.building li:nth-child(2) svg,
.building li:nth-child(2) svg > *{ animation-delay:1.2s;}
.building li:nth-child(2) span{
	right:30%;
	bottom:28%;
}
.building li:nth-child(3){
	left:55.2%;
	width:7.41%;
}
.building li:nth-child(3):before{ padding-bottom:371.85%;}
.building li:nth-child(3) svg,
.building li:nth-child(3) svg > *{ animation-delay:1.4s;}
.building li:nth-child(3) span{
	right:20%;
	bottom:46%;
}
.building li:nth-child(4){
	left:65.65%;
	width:7.41%;
}
.building li:nth-child(4):before{ padding-bottom:122.96%;}
.building li:nth-child(4) svg,
.building li:nth-child(4) svg > *{ animation-delay:1.6s;}
.building li:nth-child(4) span{
	right:10%;
	bottom:17%;
}
.building li:nth-child(5){
	left:77%;
	width:20.76%;
}
.building li:nth-child(5):before{ padding-bottom:102.38%;}
.building li:nth-child(5) svg,
.building li:nth-child(5) svg > *{ animation-delay:1.8s;}
.building li:nth-child(5) span{
	right:13%;
	bottom:52%;
}
/******************* 建物 end **********************/

/******************* 主標區塊 start **********************/
#home .txtBlock{
	position:relative;
	font-size:4.65em;
	display:flex;
	flex-direction:column;
	align-items:center;
	z-index:2;
	transform:translateY(-65%);
}

#home .txtBlock hgroup{
	color:#c00d23;
	font-family:Gotham-Black;
	display:flex;
	flex-direction:column;
}

#home .txtBlock hgroup h2{
	position:relative;
	align-self:flex-end;
	font-size:0.64em;
	font-weight:normal;
}
#home .txtBlock hgroup h2 span{
	position:absolute;
	right:109.14%;
	bottom:-30%;
	width:7.74%;
	display:block;
	font-size:0.6em;
	line-height:1em;
	transform-origin:right bottom;
}
#home .txtBlock hgroup h2 span i{
	position:absolute;
	right:-0.48em;
	bottom:calc(97% - 0.12em);
	padding:0.2em 0.85em 0.3em;
	background:#ececec;
	border:0.12em solid;
	border-radius:0.25em;
	font-style:normal;
	z-index:0;	
}
#home .txtBlock hgroup h2 span i:before{
	position:absolute;
	content:"";
	display:block;
	left:0.35em;
	right:0.35em;
	bottom:0.3em;
	height:0.5em;
	background:#FE0;
	z-index:-1;
}
#home .txtBlock hgroup h2 span:after{
	position:relative;
	content:"";
	display:block;
	padding-top:72.41%;
	background:url(../images/homeTalkTriangle.png) no-repeat right top/contain;
	z-index:1;
}
#home .txtBlock hgroup h2 em{
	display:block;
	font-style:normal;
}

#home .txtBlock hgroup h1{
	margin-top:0.15em;
	font-weight:normal;
	font-size:1em;
	line-height:1em;
}

#home .txtBlock p{
	color:#555;
	font-size:0.29em;
	line-height:1em;
	margin-top:1em;
	letter-spacing:0.13em;
	text-align:center;
}
#home .txtBlock p br{
	display:none;
}

/********** scroll start *************/
#home .txtBlock > span{
	position:relative;
	color:#555;
	font-size:0.18em;
	font-family:Gotham-Medium, sans-serif;
	margin-top:6.5%;
	line-height:1em;
	letter-spacing:0.1em;
	display:flex;
	flex-direction:column;
	align-items:center;
}
#home .txtBlock > span:before{
	content:"";
	display:block;
	width:1px;
	height:5em;
	background:currentColor;
	margin-bottom:1.3em;
}
#home .txtBlock > span:after{
	position:absolute;
	left:50%;
	top:1em;
	content:"";
	display:block;
	width:0.7em;
	height:0.7em;
	background:#c00d23;
	border-radius:50%;
	transform:translateX(-50%);
	animation:scrollHint 0.6s ease-in infinite alternate;
}
@keyframes scrollHint{
	to{
		top:3.5em;
	}
}
/********** scroll end *************/
/******************* 主標區塊 end **********************/
/************************************** home end ***************************************************/


/************************************** intro start ***************************************************/
#intro{
	height:100vh; /* for IE */
	padding-top:0;
	display:flex;
}
#intro .ct{
	width:100%;
	display:flex;
}
#intro .ct img{
	display:block;
	width:51.64%;
	margin-bottom:9%;
	align-self:flex-end;
}
#intro .ct .txt{
	display:flex;
	width:48.36%;
	flex-direction:column;
	justify-content:flex-end;
	padding:0 5% 9% 3.29%;
	background:url(../images/introMap.png) no-repeat right top/73.86%;
}
#intro .ct .txt h2{
	color:#c00d23;
	font-family:Gotham-Black;
	font-weight:normal;
	font-size:3.4em;
}
#intro .ct .txt p{
	line-height:1.8em;
	font-size:0.95em;
	margin:0;
}
#intro .ct .txt h2 + p{
	margin-top:3.5em;
}
#intro .ct .txt * + p{
	margin-top:1.2em;
}
/************************************** intro end ***************************************************/


/************************************** bigwave start ***************************************************/
#bigwave{
	display:flex;
	justify-content:center;
	align-items:center;
}
#bigwave .ct{
	width:81.31%;
}

#bigwave .ct ul{
	margin-top:6%;
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
}
#bigwave .ct ul li{
	width:20.94%;
}
#bigwave .ct ul li a{
	display:block;
	color:#c00d23;
}
#bigwave .ct ul li a .img{
	position:relative;
	transform-origin:center bottom;
	transition:transform 0.2s;
}
#bigwave .ct ul li a .img span{
	position:relative;
	display:block;
	background:#000;
	border-radius:50%;
	overflow:hidden;
}
#bigwave .ct ul li a .img span img{
	display:block;
	width:100%;
	opacity:0.6;
	transition:opacity 0.2s;
}
#bigwave .ct ul li a .img span:after{
	position:absolute;
	content:"";
	display:block;
	left:0;
	top:0;
	width:100%;
	height:100%;
	border:0.3125em solid;
	border-radius:50%;
	opacity:0;
	transition:opacity 0.2s;
}
#bigwave .ct ul li a .img:after{
	position:absolute;
	content:"";
	display:block;
	right:9.48%;
	top:3.58%;
	width:17.43%;
	padding-top:17.43%;
	border-radius:50%;
	background:#c00d23 url(../images/check.png) no-repeat center/contain;
	transform:scale(0);
	opacity:0;
	transition:all 0.4s;
}
#bigwave .ct ul li a em{
	display:block;
	font-style:normal;
	color:#444;
	margin-top:2.5em;
	text-align:center;
	transition:color 0.2s;
}
#bigwave .ct ul li a[href]:hover .img{
	transform:scale(1.25);
}
#bigwave .ct ul li a[href]:hover .img span img,
#bigwave .ct ul li a[href]:hover .img span:after,
#bigwave .ct ul li a[href]:hover .img:after{
	opacity:1;
}
#bigwave .ct ul li a[href]:hover .img:after{
	transform:scale(1);
}
#bigwave .ct ul li a[href]:hover em{
	color:#c00d23;
}
/************************************** bigwave end ***************************************************/


/************************************** design start ***************************************************/
#design .ct{
	position:relative;
	overflow:hidden;
	padding-bottom:8%;
}
#design .sectionTitleBlock{
	position:absolute;
	right:0;
	top:0;
	margin:2.25% 5.49% 0 0;
	z-index:1;
}

#design .main{
	padding:13% 4.12% 0;
}
#design .main .group{
	position:relative;
}
#design .main .g2{
	margin-top:15%;
}

#design .main .group h4{
	position:absolute;
	top:0;
	border:0.125em solid #c00d23;
}
#design .main .group h4:before{
	content:"";
	display:block;
}
#design .main .group h4 span{
	position:absolute;
	display:block;
	top:0;
	color:#FFF;
	background:#c00d23;
	font-size:1.125em;
	padding:1.5em;
	line-height:1em;
	transform:translateY(-50%);
}

#design .main .g1 h4{
	left:0;
	width:82.73%;
	margin:-6.23% 0 0 -10.57%;
}
#design .main .g1 h4:before{ padding-top:119.56%;}
#design .main .g1 h4 span{ left:15.94%;}
#design .main .g2 h4{
	right:0;
	width:83.93%;
	margin:-6% -11.51% 0;
}
#design .main .g2 h4:before{ padding-top:40.57%;}
#design .main .g2 h4 span{ right:19.14%;}

#design .main .group ul{
	display:flex;
	justify-content:space-between;
}
#design .main .g1 ul li{
	width:49.75%;
}
#design .main .g2 ul li{
	width:19.51%;
}
#design .main .group ul li a,
#design .main .group ul li a img{
	display:block;
}
#design .main .group ul li a{
	position:relative;
}
#design .main .group ul li a:before{
	position:absolute;
	content:"";
	display:block;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:#c00d23;
	opacity:0;
	transition:opacity 0.2s;
}
#design .main .group ul li a img{
	width:100%;
}
#design .main .group ul li a em{
	position:absolute;
	left:50%;
	top:50%;
	width:100%;
	padding:0 1em;
	display:block;
	transform:translate(-50%, -50%);
	color:#FFF;
	line-height:1.8em;
	font-size:1.3em;
	font-style:normal;
	text-align:center;
	opacity:0;
	transition:opacity 0.2s;
}
#design .main .group ul li a:hover:before{
	opacity:0.6;
}
#design .main .group ul li a:hover em{
	opacity:1;
}
/************************************** design end ***************************************************/


/************************************** event start ***************************************************/
#event{
	min-height:0;
}
#event .ct{
	padding:4.67% 0 8.24%;
	display:flex;
	flex-direction:column;
	align-items:center;
	background:#c00d23;
	background-repeat:no-repeat;
	background-image:url(../images/qaBgObj_1.png), url(../images/qaBgObj_2.png), url(../images/qaBgObj_3.png), url(../images/qaBgObj_4.png);
	background-position:-16% 55%, 17% top, right 5% top, right 2% bottom -8.5%;
	background-size:25.93%, 8.62%, 19.61%, 25.43%;
}
#event hgroup{
	color:#FFF;
	text-align:center;
	letter-spacing:0.1em;
}
#event hgroup h4{
	font-size:1.875em;
}
#event hgroup span{
	font-size:1em;
	font-weight:normal;
	display:block;
	margin-top:1em;
}

.quiz{
	position:relative;
	background:#FFF;
	width:48%;
	margin-top:3em;
}
.quiz:before{
	content:"";
	display:block;
	padding-top:50%;
}

.rule,
.quiz .olWrapper,
.quiz > ul,
.quiz > button,
.quiz:after{
	position:absolute;
}

.rule,
.quiz .olWrapper,
.quiz ol{
	height:100%;
}
.rule,
.quiz .olWrapper{
	left:0;
	top:0;
}
.rule,
.quiz .olWrapper{
	width:100%;
}

/***** 規則 start *****/
.rule{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
}
.rule.hide{
	display:none;
}
.rule p{
	margin:0;
	line-height:2em;
	text-align:center;
}
.rule button{
	border:none;
	outline:none;
	margin-top:2em;
	color:#FFF;
	background:#c00d23;
	padding:1em 2em;
	cursor:pointer;
	font-family:Gotham-Medium, 'Noto Sans TC', 微軟正黑體, sans-serif;
	font-weight:bold;
	letter-spacing:0.1em;
	transition:background 0.2s;
}
.rule button:hover{
	background:#333;
}
/***** 規則 end *****/

.quiz .olWrapper{
	overflow:hidden;
	display:none;
}
.quiz .olWrapper.show{
	display:block;
}
.quiz ol{
	display:flex;
	width:500%;
	padding:5% 0;
	transition:transform 0.5s;
}
.quiz ol.q2{ transform:translateX(-20%);}
.quiz ol.q3{ transform:translateX(-40%);}
.quiz ol.q4{ transform:translateX(-60%);}
.quiz ol.end{ transform:translateX(-80%);}
.quiz ol > li{
	width:20%;
	height:inherit;
	display:flex;
}

/******** 問答內容 start *******/
.Q,
.A{
	width:50%;
	padding:0 1em;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
}
.Q{
	text-align:center;
}
.Q *{
	display:block;
}
.Q em{
	font-family:Gotham-Black;
	font-weight:normal;
	font-style:normal;
	letter-spacing:0.05em;
	font-size:4.3em;
	margin-top:-0.6em;
}
.Q span{
	font-size:1.25em;
	margin-top:0.5em;
}
.A{
	border-left:2px dashed #999;
}
.A ul{
	margin-left:-1em;
}
.A li{
	cursor:pointer;
}
.A li+li{
	margin-top:2em;
}
.A li i{
	display:inline-flex;
	justify-content:center;
	align-items:center;
	vertical-align:middle;
	margin-right:1.2em;
	width:20px;
	height:20px;
	border:1px solid;
	border-radius:50%;
}
.A li i:before{
	content:"";
	display:block;
	width:6px;
	height:6px;
	background:#c00d23;
	border-radius:50%;
	opacity:0;
	transition:opacity 0.2s;
}
.A li:hover i:before,
.A li.active i:before{
	opacity:1;
}
/******** 問答內容 end *******/

/***** 結果 start *****/
.result{
	display:flex;
}
.result > *{
	width:50%;
	padding:0 4%;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
}

.result .img{
	text-align:center;
	color:currentColor;
}
.result .img *{
	display:block;
}
.result .img em{
	font-family:Gotham-Black;
	font-weight:normal;
	font-style:normal;
	letter-spacing:0.05em;
	font-size:1.2em;
}
.result .img span{
	font-size:0.9em;
	margin-top:0.25em;
}
.result .img img{
	width:100%;
	margin-top:1em;
}

.result .txt{
	border-left:2px dashed #999;
}
.result .txt *{
	display:block;
}
.result .txt em{
	font-family:Gotham-Black;
	font-weight:normal;
	font-style:normal;
	letter-spacing:0.05em;
	font-size:3em;
}
.result .txt span{
	font-size:1.5em;
}
.result .txt p{
	font-size:0.8em;
	margin:1.2em 0 0;
	line-height:1.8em;
	width:100%; /* for IE */
}
.result .txt a{
	font-size:0.85em;
	margin-top:2em;
	border:none;
	outline:none;
	color:#FFF;
	background:#c00d23;
	padding:1em 2em;
	letter-spacing:0.1em;
	transition:background 0.2s;
}
.result .txt a:hover{
	background:#333;
}
/***** 結果 end *****/

/******** 圓點 start *******/
.quiz > ul{
	left:50%;
	top:100%;
	transform:translateX(-50%);
	margin-top:2.8em;
	display:none;
}
.quiz > ul.show{
	display:flex;
}
.quiz > ul li{
	width:13px;
	height:13px;
	border-radius:50%;
	background:#FFF;
	transition:all 0.2s;
}
.quiz > ul li+li{
	margin-left:2em;
}
.quiz > ul li.active{
	transform:scale(1.65);
	background:#e69ea7;
}
/******** 圓點 end *******/

/***** 箭頭按鈕 start *****/
.quiz > button{
	left:100%;
	top:50%;
	font-size:1em;
	width:5em;
	height:5em;
	transform:translateY(-50%);
	margin-left:4.5em;
	padding:0;
	cursor:pointer;
	border:none;
	background:none;
	color:#FFF;
	overflow:visible; /* for IE */
	display:none;
}
.quiz > button.show{
	display:block;
}
.quiz > button:focus{
	outline:none;
}
.quiz > button span{
	display:flex;
	justify-content:center;
	align-items:center;
	height:100%;
	border:2px solid;
	border-radius:50%;
	background:rgba(255, 255, 255, 0);
	animation:nextHint 0.5s ease-in infinite alternate;
}
@keyframes nextHint{
	to{
		background:rgba(255, 255, 255, 0.3);
		transform:scale(1.2);
	}
}
.quiz > button:hover span{
	background:rgba(255, 255, 255, 0.3);
	transform:scale(1.2);
	animation:none;
}
.quiz > button span i{
	position:relative;
	display:block;
	width:25%;
	height:2px;
}
.quiz > button span i:before,
.quiz > button span i:after{
	position:absolute;
	right:0;
	top:0;
	content:"";
	display:block;
	width:100%;
	height:100%;
	background:currentColor;
	transform-origin:right center;
}
.quiz > button span i:before{	transform:rotate(30deg);}
.quiz > button span i:after{ transform:rotate(-30deg);}
/***** 箭頭按鈕 end *****/

.quiz:after{
	right:100%;
	top:100%;
	margin:-17.5% -8.75% 0 0;
	content:"";
	display:block;
	width:41.75%;
	padding-top:30.37%;
	background:url(../images/qaBgObj_5.png) no-repeat center/contain;
}
/************************************** event end ***************************************************/


/************************************** concept start ***************************************************/
#concept{
	display:flex;
	justify-content:center;
	align-items:center;
}
#concept .ct{
	position:relative;
	width:84.06%;
	display:flex;
	justify-content:flex-end;
}
#concept .ct .sectionTitleBlock{
	position:absolute;
	left:0;
	top:0;
	margin-top:5%;
}
#concept .ct ul{
	width:70%;
	display:flex;
	flex-wrap:wrap;
}
#concept .ct ul li{
	width:31.66%;
}
#concept .ct ul li+li{
	margin-left:2.5%;
}
#concept .ct ul li:not(:nth-child(-n+2)){
	margin-top:5%;
}
#concept .ct ul li:nth-child(1){
	margin-left:16.66%;
}
#concept .ct ul li:nth-child(2){
	margin-right:16.66%;
}
#concept .ct ul li:nth-child(3){
	margin-left:0;
}
#concept .ct ul li a,
#concept .ct ul li a img{
	display:block;
}
#concept .ct ul li a{
	position:relative;
}
#concept .ct ul li a:before,
#concept .ct ul li a:after,
#concept .ct ul li a em{
	position:absolute;
	display:block;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
#concept .ct ul li a:before,
#concept .ct ul li a:after{
	content:"";
}
#concept .ct ul li a:before{
	border:0.125em solid #c00d23;
}
#concept .ct ul li a img{
	position:relative;
	width:100%;
	transition:transform 0.2s;
}
#concept .ct ul li a em{
	font-style:normal;
	font-size:1.2em;
	display:flex;
	justify-content:center;
	align-items:center;
	text-align:center;
	padding:1em;
	color:#FFF;
	opacity:0;
	transition:all 0.2s;
	z-index:1;
}
#concept .ct ul li a:after{
	background:#c00d23;
	opacity:0;
	transition:all 0.2s;
}
#concept .ct ul li a:hover img,
#concept .ct ul li a:hover em,
#concept .ct ul li a:hover:after{
	transform:translate(-5.26%, 5.26%);
}
#concept .ct ul li a:hover em{
	opacity:1;
}
#concept .ct ul li a:hover:after{
	opacity:0.6;
}
/************************************** concept end ***************************************************/


/************************************** star start ***************************************************/
#star{
	position:relative;
	display:flex;
	justify-content:center;
	align-items:center;
	padding-bottom:3em;
}
#star:before{
	position:absolute;
	content:"";
	display:block;
	width:98.07%;
	padding-top:60.98%;
	left:0;
	bottom:0;
	background:url(../images/starBgLine.png) no-repeat left bottom/contain;
	pointer-events:none;
}
#star .ct{
	position:relative;
	width:65%;
	display:flex;
	flex-direction:column;
}
#star .ct .sectionTitleBlock{
	align-self:flex-end;
}
#star .ct ul{
	margin-top:3.46%;
	display:flex;
	justify-content:space-between;
}
#star .ct ul li{
	width:31.53%;
}
#star .ct ul li a,
#star .ct ul li a img{
	display:block;
}
#star .ct ul li a{
	transition:transform 0.2s;
}
#star .ct ul li a img{
	width:100%;
}
#star .ct ul li a em{
	display:flex;
	justify-content:center;
	align-items:center;
	font-style:normal;
	font-size:0.875em;
	text-align:center;
	color:#FFF;
	background:#555;
	height:6em;
	padding:1em;
	transition:background 0.2s;
}
#star .ct ul li a:hover{
	transform:scale(1.1);
}
#star .ct ul li a:hover em{
	background:#c00d23;
}
/************************************** star end ***************************************************/


/************************************** city start ***************************************************/
#city{
	display:flex;
	justify-content:center;
	align-items:center;
}
#city .ct{
	width:86.26%;
}
#city .ct .sectionTitleBlock{
	margin-left:5.73%;
}
#city .ct .sectionTitle hgroup h3 span:before{
	left:1.5em;
	right:1.5em;
}
#city .ct .sectionTitle hgroup h3 span i{
	margin:0 1.2em;
}
#city .ct ul{
	width:85%;
	margin:3.82% auto;
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
}
#city .ct ul li{
	width:33%;
	padding:0.5em;
	border:1px solid transparent;
	border-radius:50%;
	transition:border-color 0.2s;
}
#city .ct ul li:hover{
	border-color:#c00d23;
}
#city .ct ul li:nth-child(even){
	margin-top:7.38%;
}
#city .ct ul li a,
#city .ct ul li a img{
	display:block;
}
#city .ct ul li a{
	position:relative;
	display:block;
	border-radius:50%;
	overflow:hidden;
}
#city .ct ul li a:before,
#city .ct ul li a em{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	opacity:0;
	transition:opacity 0.2s;
}
#city .ct ul li a:before{
	content:"";
	display:block;
	background:#c00d23;
}
#city .ct ul li a img{
	width:100%;
}
#city .ct ul li a em{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	text-align:center;
	font-style:normal;
	line-height:1.8em;
	padding:0 2em;
	color:#FFF;
}
#city .ct ul li a em:before{
	content:"";
	display:block;
	width:2.56em;
	height:3.625em;
	background:url(../images/marker.png) no-repeat center bottom/contain;
	margin-bottom:0.5em;
	transform-origin:center bottom;
	transform:scale(0);
	transition:transform 0.4s;
}
#city .ct ul li a:hover:before{
	opacity:0.6;
}
#city .ct ul li a:hover em{
	opacity:1;
}
#city .ct ul li a:hover em:before{
	transform:none;
}
/************************************** city end ***************************************************/


/************************************** footer start ***************************************************/
footer .ct{
	color:#FFF;
	background:#c00d23;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	padding:3.29% 1.64%;
	font-size:0.815em;
	line-height:1em;
	font-family:Gotham-Medium, 'Noto Sans TC', 微軟正黑體, sans-serif;
	text-align:center;
}
footer .ct h6{
	font-size:1.025em;
	padding:0.5em 0.6em;
	border:1px solid;
	border-radius:0.4em;
}
footer .ct ul{
	margin-top:1em;
	line-height:1.8em;
	font-weight:normal;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
}
footer .ct ul li+li{
	margin-left:2.5em;
}
footer .ct span{
	margin-top:4em;
	line-height:1.6em;
}
/************************************** footer end ***************************************************/


@media screen and (min-width:1921px){
	
	/************************************** home end ***************************************************/
	/******************* 主標區塊 start **********************/
	#home .txtBlock{
		font-size:4.71em;
	}
	/******************* 主標區塊 end **********************/
	/************************************** home end ***************************************************/
	
}


@media screen and (min-width:1024px) and (max-width:1440px){
	
	body{
		font-size:0.85em;
	}
	main{
		background-position:left 5.11em, left top, right top, left bottom;
	}
	main > section{
		padding-top:5.11em;
	}
	
	/************************************** header start ***************************************************/
	/******************* 主選單 start **********************/
	header nav ul li+li{
		margin-left:3vw;
	}
	/******************* 主選單 end **********************/
	/******************* toTop start **********************/
	.toTop{
		right:20px;
		bottom:20px;
	}
	/******************* toTop end **********************/
	/************************************** header end ***************************************************/
	
	/************************************** home start ***************************************************/
	#home{
		padding-top:calc(5.11em + 2.1%);
	}
	/******************* 主標區塊 start **********************/
	#home .txtBlock{
		font-size:3.8em;
		transform:translateY(-50%);
	}
	/******************* 主標區塊 end **********************/
	/************************************** home end ***************************************************/
	
	/************************************** design start ***************************************************/	
	#design .main{
		padding-top:15%;
	}
	#design .main .g1 h4{
		width:78%;
	}
	#design .main .g1 h4:before{ padding-top:126%;}
	/************************************** design end ***************************************************/
	
	/************************************** event start ***************************************************/
	.quiz{
		width:60%;
	}
	/************************************** event end ***************************************************/
	
}


@media screen and (max-width:1023px){
	
	body{
		font-size:0.8125em;
	}
	main{
		padding:0 4% 4%;
		background-position:left 50px, left top, right top, left bottom;
	}
	main > section{
		padding-top:50px;
	}
	
	/*********************************** 共用 start *****************************************/	
	.sectionTitleBlock{
		font-size:1.75em;
	}	
	.sectionTitle hgroup h2{
		margin-top:0.5em;
	}
	/*********************************** 共用 end *****************************************/
	
	/************************************** header start ***************************************************/
	header{
		justify-content:center;
		padding:0;
		height:50px;
	}
	header.open{
		height:100vh;
	}
	header h1{
		position:absolute;
		left:10px;
		top:10px;
		width:60px;
	}
	/******************* 主選單 start **********************/
	header nav{
		margin-left:0;
		text-align:center;
		display:none;
	}
	header.open nav{
		display:block;
	}
	header nav ul{
		display:block;
	}
	header nav ul li+li{
		margin:1.8em 0 0;
	}
	header nav ul li a{
		font-size:1.4em;
	}
	header nav ul li a:before{
		display:none;
	}
	/******************* 主選單 end **********************/
	
	/***************** 漢堡 start *******************/
	header .burgerBtn{
		position:absolute;
		right:10px;
		top:5px;
		width:24px;
		height:36px;
		cursor:pointer;
	}
	header .burgerBtn span,
	header .burgerBtn span:before,
	header .burgerBtn span:after{
		position:absolute;
		left:0;
		display:block;
		width:100%;
		height:2px;
		background:#666;
		transition:all 0.2s;
	}
	header.open .burgerBtn span,
	header.open .burgerBtn span:before,
	header.open .burgerBtn span:after{
		background:#000;
	}
	header .burgerBtn span:before,
	header .burgerBtn span:after{
		content:"";
	}
	header .burgerBtn span{
		top:50%;
		transform:translateY(-50%);
	}
	header .burgerBtn span:before{
		top:-6px;
	}
	header .burgerBtn span:after{
		top:6px;
	}
	header.open .burgerBtn span{
		background:transparent;
	}
	header.open .burgerBtn span:before,
	header.open .burgerBtn span:after{
		top:0;
	}
	header.open .burgerBtn span:before{
		transform:rotate(-45deg);
	}
	header.open .burgerBtn span:after{
		transform:rotate(45deg);
	}
	/***************** 漢堡 end *******************/
	
	/******************* toTop start **********************/
	.toTop{
		right:10px;
		bottom:10px;
	}
	header.open .toTop{
		display:none;
	}
	/******************* toTop end **********************/
	/************************************** header end ***************************************************/
	
	/************************************** home start ***************************************************/
	#home{
		padding-top:calc(50px + 4%);
	}
	.slogan{
		width:800%;
	}
	@keyframes sloganIn{
		to{
			transform:translateX(-112.5%);
		}
	}
	/******************* 建物 start **********************/
	.building li:nth-child(1) span i{
		right:auto;
		left:-1.5em;
	}
	.building li:nth-child(1) span:after{
		transform:scaleX(-1);
	}
	/******************* 建物 end **********************/
	/******************* 主標區塊 start **********************/
	#home .txtBlock{
		font-size:9.5vw;
		transform:translateY(-15%);
	}
	#home .txtBlock hgroup h2 span{
		bottom:-20%;
	}
	#home .txtBlock p{
		font-size:0.45em;
		line-height:1.6em;
	}
	#home .txtBlock p br{
		display:block;
	}
	/******************* 主標區塊 end **********************/
	/************************************** home end ***************************************************/
	
	/************************************** intro start ***************************************************/
	#intro{
		height:auto;
		display:block;
	}
	#intro .ct{
		width:auto;
		display:block;
	}
	#intro .ct img{
		width:100%;
		margin:20% 0 0;
	}
	#intro .ct .txt{
		width:auto;
		display:block;
		padding:10% 5% 0;
		background-size:70%;
	}
	#intro .ct .txt h2{
		font-size:2em;
	}
	#intro .ct .txt h2 + p{
		margin-top:2em;
	}
	/************************************** intro end ***************************************************/
	
	/************************************** bigwave start ***************************************************/
	#bigwave{
		display:block;
	}
	#bigwave .ct{
		width:auto;
		padding:5% 5% 0;
	}
	#bigwave .ct ul{
		margin-top:15%;
		flex-wrap:wrap;
	}
	#bigwave .ct ul li{
		width:45%;
	}
	#bigwave .ct ul li:not(:nth-child(-n+2)){
		margin-top:15%;
	}
	#bigwave .ct ul li a em{
		margin-top:1em;
	}
	/************************************** bigwave end ***************************************************/
	
	/************************************** design start ***************************************************/
	#design .ct{
		position:static;
		padding:5% 0 0;
	}
	#design .sectionTitleBlock{
		position:static;
		margin:0% 5%;
	}
	#design .main{
		padding:0 5%;
	}
	#design .main .group{
		position:static;
		margin-top:10%;
	}
	#design .main .group h4{
		position:static;
		border:none;
		width:auto;
		margin:0;
	}
	#design .main .group h4:before{
		display:none;
	}
	#design .main .group h4 span{
		position:static;
		text-align:center;
		transform:none;
	}
	#design .main .group ul{
		display:block;
	}
	#design .main .group ul li{
		width:auto;
		margin-top:5%;
	}
	#design .main .g1 ul li a:before{
		display:none;
	}
	#design .main .g1 ul li a em{
		position:static;
		opacity:1;
		transform:none;
		padding:0;
		margin-top:0.5em;
		color:#333;
	}
	#design .main .g2 ul li a{
		overflow:hidden;
	}
	#design .main .g2 ul li a:before{
		display:none;
	}
	#design .main .g2 ul li a:after{
		content:"";
		display:block;
		padding-top:100%;
	}
	#design .main .g2 ul li a img{
		position:absolute;
		left:0;
		top:0;
	}
	#design .main .group ul li a em{
		font-size:1.1em;
	}
	#design .main .g2 ul li a em{
		left:0;
		top:auto;
		bottom:0;
		transform:none;
		background:rgba(192, 13, 35, 0.6);
		padding:0.5em 1em;
		opacity:1;
	}
	#design .main .group ul li a em br{
		display:none;
	}
	/************************************** design end ***************************************************/
	
	/************************************** event start ***************************************************/
	#event .ct{
		display:block;
		padding:30% 5% 60%;
		background-position:-16% 95%, 5% top, right 5% top, right 5% bottom -2%;
		background-size:35%, 15%, 40%, 35%;
	}
	#event hgroup h4{
		font-size:1.45em;
	}
	.quiz{
		width:auto;
		margin-top:2em;
		padding:5% 5% 10%;
	}
	.quiz:before{
		display:none;
	}
	.quiz .olWrapper,
	.quiz ol{
		height:auto;
	}
	/***** 規則 start *****/
	.rule{
		position:static;
	}
	.rule p br{
		display:none;
	}
	.rule button{
		margin-top:1em;
	}
	/***** 規則 end *****/
	.quiz .olWrapper{
		position:static;
		width:auto;
	}
	.quiz ol{
		padding:0;
	}
	.quiz ol > li{
		display:block;
	}
	/******** 問答內容 start *******/
	.Q,
	.A{
		width:auto;
	}
	.Q{
		padding:0 0 1.5em;
	}
	.Q em{
		font-size:3em;
		margin-top:0;
	}
	.A{
		padding:1.5em 0 0;
		border-top:2px dashed #999;
		border-left:none;
	}
	.A li+li{
		margin-top:1.5em;
	}
	/******** 問答內容 end *******/
	/***** 結果 start *****/
	.result{
		display:block;
	}
	.result > *{
		width:auto;
		padding:0;
	}
	.result .txt{
		border-left:none;
		border-top:2px dashed #999;
		margin-top:10%;
		padding-top:8%;
	}
	/***** 結果 end *****/
	/******** 圓點 start *******/
	.quiz > ul{
		margin-top:1.5em;
	}
	.quiz > ul li{
		width:10px;
		height:10px;
	}
	.quiz > ul li+li{
		margin-left:1em;
	}
	.quiz > ul li.active{
		transform:scale(1.5);
	}
	/******** 圓點 end *******/
	/***** 箭頭按鈕 start *****/
	.quiz > button{
		left:50%;
		top:100%;
		transform:translate(-50%, 0);
		margin:5em 0 0;
	}
	/***** 箭頭按鈕 end *****/
	/************************************** event end ***************************************************/
	
	/************************************** concept start ***************************************************/
	#concept{
		display:block;
	}
	#concept .ct{
		position:static;
		display:block;
		width:auto;
		padding:5% 5% 10%;
	}
	#concept .ct .sectionTitleBlock{
		position:static;
		margin-top:0;
	}
	#concept .ct ul{
		width:auto;
		display:block;
		margin-top:10%;
	}
	#concept .ct ul li{
		width:auto;
	}
	#concept .ct ul li+li,
	#concept .ct ul li:not(:nth-child(-n+2)){
		margin:10% 0 0;
	}
	#concept .ct ul li:nth-child(1){
		margin-left:0;
	}
	#concept .ct ul li:nth-child(2){
		margin-right:0;
	}
	#concept .ct ul li a{
		font-size:1.1em;
	}
	#concept .ct ul li a em{
		top:auto;
		bottom:0;
		height:auto;
		font-size:1em;
		background:rgba(192, 13, 35, 0.6);
    	padding:0.5em 1em;
    	opacity:1;
	}
	#concept .ct ul li a:after{
		display:none;
	}
	#concept .ct ul li a:hover img,
	#concept .ct ul li a:hover em{
		transform:translate(-1em, 1em);
	}
	/************************************** concept end ***************************************************/
	
	/************************************** star start ***************************************************/
	#star{
		position:static;
		display:block;
		padding-bottom:0;
	}
	#star:before{
		display:none;
	}
	#star .ct{
		position:static;
		width:auto;
		display:block;
		padding:5% 5% 0;
	}
	#star .ct ul{
		margin-top:10%;
		display:block;
	}
	#star .ct ul li{
		width:auto;
	}
	#star .ct ul li+li{
		margin-top:10%;
	}
	#star .ct ul li a em{
		height:auto;
		padding:2em 1em;
	}
	/************************************** star end ***************************************************/
	
	/************************************** city start ***************************************************/
	#city{
		display:block;
	}
	#city .ct{
		width:auto;
		padding:5% 5% 10%;
	}
	#city .ct .sectionTitleBlock{
		margin-left:0;
	}
	#city .ct ul{
		width:auto;
		margin:10% auto 0;
		display:block;
	}
	#city .ct ul li{
		width:auto;
		border:none;
		border-radius:0;
	}
	#city .ct ul li+li,
	#city .ct ul li:nth-child(even){
		margin-top:10%;
	}
	#city .ct ul li a{
		border-radius:0;
		color:currentColor;
		transition:color 0.2s;
		overflow:visible;
	}
	#city .ct ul li a:hover{
		color:#c00d23;
	}
	#city .ct ul li a:before{
		width:calc(100% + 20px);
		height:auto;
		padding-top:calc(100% + 16px);
		background:none;
		border:2px solid;
		border-radius:50%;
		transition:opacity 0.2s;
		transform:translate(-10px, -10px);
	}
	#city .ct ul li a:hover:before{
		opacity:1;
	}
	#city .ct ul li a img{
		border-radius:50%;
	}
	#city .ct ul li a em{
		position:static;
		height:auto;
		opacity:1;
		display:block;
		margin-top:1em;
		padding:0;
		color:inherit;
	}
	#city .ct ul li a em:before{
		display:none;
	}
	/************************************** city end ***************************************************/
	
	/************************************** footer start ***************************************************/
	footer .ct{
		padding:2em;
	}
	footer .ct ul{
		display:block;
	}
	footer .ct ul li+li{
		margin:0;
	}
	footer .ct span{
		margin-top:2em;
	}
	/************************************** footer end ***************************************************/
	
}