@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: DINProMedium;
	src:
		url(DINProMedium.eot),
		url(DINProMedium.woff) format("woff"),
		url(DINProMedium.ttf) format("truetype");
}
@font-face {
	font-family: DINProBold;
	src:
		url(DINProBold.eot),
		url(DINProBold.woff) format("woff"),
		url(DINProBold.ttf) format("truetype");
}

html.disableScroll,
html.disableScroll body{
	overflow:hidden;
}

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

body{
	font-family:DINProRegular, 'Noto Sans TC', 微軟正黑體, sans-serif;
	color:#444;
	background-color:#d9c5ad;
	background-image:
		linear-gradient(to right, transparent, transparent 11px, #dfcfb8 11px, #dfcfb8 12px),
		linear-gradient(to bottom, transparent, transparent 11px, #dfcfb8 11px, #dfcfb8 12px);
	background-size:12px 12px;
}

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

#container{
	position:relative;
	z-index:0;
}
section{
	overflow:hidden;
}

/*********************************** 共用 start *****************************************/
/****************** 區塊大標 start *********************/
h4{
	display:flex;
	align-items:flex-end;
}
h4 i:before{
	content:"";
	display:block;
	background-repeat:no-repeat;
	background-size:100%;
}
h4 strong{
	font-size:2.625em;
}
/****************** 區塊大標 end *********************/

/****************** tag 標題 start *********************/
.tag{
	position:relative;
	background:#FFF;
	padding:0.6em 0.8em;
	line-height:1em;
	font-weight:bold;
}
.tag:before,
.tag:after{
	position:absolute;
	content:"";
	display:block;
}
.tag:before{
	left:0;
	top:calc(100% - 1px);
	width:100%;
	height:10.52%;
	background:url(../images/tagBdrBtm.png) repeat-x left top/auto 100%;
}
.tag:after{
	left:calc(100% - 1px);
	top:0;
	width:0.44em;
	height:110.52%;
	background:url(../images/tagBdrRight.png) no-repeat left top/cover;
}
.tag.reverse:before,
.tag.reverse:after{
	left:auto;
	top:auto;
	transform:scale(-1);
}
.tag.reverse:before{
	right:0;
	bottom:calc(100% - 1px);
}
.tag.reverse:after{
	right:calc(100% - 1px);
	bottom:0;
}
/****************** tag 標題 end *********************/

.popCT{
	display:none;
}

p{
	line-height:1.6em;
	margin:0;
}
*+p{
	margin-top:1.8em;
}
/*********************************** 共用 end *****************************************/


/************************************** header start ***************************************************/
header{
	position:fixed;
	left:0;
	top:0;
	width:90.52%;
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	margin:2.5% 4.74% 0;
	z-index:1;
	color:#FFF;
	border-bottom:2px solid;
	transition:all 0.2s;
}
header.scroll{
	width:100%;
	margin:0;
	padding:1% 2% 0;
	background:rgba(29, 64, 56, 0.95);
}
header h1{
	width:8.72%;
	max-width:150px;
	margin-bottom:1.16%;
}
header h1 a{
	display:block;
	font-size:0;
}
header h1 a:before{
	content:"";
	display:block;
	padding-top:48%;
	background:url(../images/logo.png) no-repeat center top/contain;
}

/******************* 主選單 start **********************/
header nav{
	margin-left:auto;
}
header nav ul{
	display:flex;
	align-items:flex-end;
	font-size:1.06em;
}
header nav ul li+li{
	margin-left:3.5em;
}
header nav ul li a{
	display:inline-block;
	color:#FFF;
	font-weight:bold;
	letter-spacing:0.1em;
	line-height:1em;
	padding-bottom:1em;
	border-bottom:0.3em solid transparent;
	transition:border 0.2s;
}
header nav ul li a:hover,
header nav ul li.active a{
	border-color:#FFF;
}
/******************* 主選單 end **********************/

/******************* toTop start **********************/
.toTop{
	position:fixed;
	right:30px;
	bottom:30px;
	cursor:pointer;
	color:#FFF;
	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 span{
	animation:floatUp 0.4s ease-in infinite alternate;
}
@keyframes floatUp{
	to{
		transform:translateY(-10px) translateX(-50%);
	}
}
/******************* toTop end **********************/
/************************************** header end ***************************************************/


/************************************** home start ***************************************************/
#home{
	min-height:100vh;
	height:100vh; /* for IE */
}
#home .ct{
	position:relative;
	height:100%;
}

/********************* 山景 start **********************/
.mountain{
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
}

.m{
	position:absolute;
	bottom:0;
}
.m:before{
	content:"";
	display:block;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center bottom;
	animation:mFloat 3s ease-in-out infinite alternate both;
}
@keyframes mFloat{
	from{
		transform:translateY(5%);
	}
}
.m1{
	left:0;
	width:34.52%;
	margin-bottom:25.26%;
}
.m1:before{
	padding-top:35.06%;
	background-image:url(../images/m1.png);
	animation-delay:0s;
}
.m2{
	left:0;
	width:100%;
	margin-bottom:7.26%;
}
.m2:before{
	padding-top:35.78%;
	background-image:url(../images/m2.png);
	animation-delay:0.5s;
}
.m3{
	left:0;
	width:72.73%;
	margin-bottom:5.15%;
}
.m3:before{
	padding-top:26.19%;
	background-image:url(../images/m3.png);
	animation-delay:1s;
}
.m4{
	right:0;
	width:26.31%;
	margin-bottom:11.84%;
}
.m4:before{
	padding-top:52%;
	background-image:url(../images/m4.png);
	animation-delay:1.5s;
}
.m5{
	right:0;
	width:81.36%;
	margin-bottom:3.42%;
}
.m5:before{
	padding-top:20.05%;
	background-image:url(../images/m5.png);
	animation-delay:2s;
}
.m6{
	left:0;
	width:49.78%;
	margin-bottom:0.31%;
}
.m6:before{
	padding-top:34.88%;
	background-image:url(../images/m6.png);
	animation-delay:2.5s;
}
.m7{
	left:0;
	width:100%;
}
.m7:before{
	padding-top:17.36%;
	background-image:url(../images/m7.png);
	animation-delay:3s;
}
.m8{
	right:0;
	width:31.57%;
}
.m8:before{
	padding-top:25%;
	background-image:url(../images/m8.png);
	animation-delay:3.5s;
}

.c{
	position:absolute;
	bottom:0;
}
.c:before{
	content:"";
	display:block;
	background-size:100%;
	background-repeat:no-repeat;
	background-position:center;
	animation:cFloat 3s ease-in-out infinite alternate both;
}
@keyframes cFloat{
	from{
		transform:translateX(10%);
	}
}
.T{	width:4.21%;}
.T:before{
	padding-top:175%;
	background-image:url(../images/T.png);
}
.O{	width:6.1%;}
.O:before{
	padding-top:100%;
	background-image:url(../images/O.png);
}
.M{	width:7.15%;}
.M:before{
	padding-top:86.76%;
	background-image:url(../images/M.png);
}
.R{	width:4.84%;}
.R:before{
	padding-top:152.17%;
	background-image:url(../images/R.png);
}
.W{	width:7.05%;}
.W:before{
	padding-top:85.07%;
	background-image:url(../images/W.png);
}
.c1{
	left:8%;
	margin-bottom:11.84%;
}
.c1:before{	animation-delay:0s;}
.c2{
	left:15.26%;
	margin-bottom:19.68%;
}
.c2:before{	animation-delay:1s;}
.c3{
	left:19.68%;
	margin-bottom:9.15%;
}
.c3:before{	animation-delay:2s;}
.c4{
	left:31.36%;
	margin-bottom:4.73%;
}
.c4:before{	animation-delay:3s;}
.c5{
	left:38%;
	margin-bottom:16.94%;
}
.c5:before{	animation-delay:4s;}
.c6{
	left:57.1%;
	margin-bottom:7.26%;
}
.c6:before{	animation-delay:5s;}
.c7{
	left:64.52%;
	margin-bottom:8%;
}
.c7:before{	animation-delay:6s;}
.c8{
	left:81.05%;
	margin-bottom:3.26%;
}
.c8:before{	animation-delay:7s;}
/********************* 山景 end **********************/

/********************* 主標 start **********************/
.mainTitle{
	position:absolute;
	left:50%;
	bottom:0;
	width:26.84%;
	margin-bottom:19.47%;
	font-size:0;
}
.mainTitle h2,
.mainTitle h3,
.mainTitle p{
	background-repeat:no-repeat;
	background-position:left center;
	background-size:cover;
}
.mainTitle.done h2,
.mainTitle.done h3,
.mainTitle.done p{
	background-size:100%;
}
.mainTitle h2{
	padding-top:23.52%;
	background-image:url(../images/mainT1.png);
}
.mainTitle h3{
	margin-top:3.13%;
	padding-top:7.84%;
	background-image:url(../images/mainT2.png);
}
.mainTitle p{
	margin:3.13% 0 0;
	padding-top:4.31%;
	background-image:url(../images/mainT3.png);
}
/********************* 主標 end **********************/

.scrollHint{
	position:absolute;
	left:50%;
	bottom:1em;
	width:2.5em;
	height:5.625em;
	color:#FFF;
	cursor:pointer;
	animation: scrollHint 0.5s ease-out infinite alternate;
}
@keyframes scrollHint{
	to{
		transform:translateY(-10%);
	}
}
.scrollHint:before,
.scrollHint:after{
	position:absolute;
	content:"";
	display:block;
	border-radius:1em;
	width:3px;
	background:#FFF;
}
.scrollHint:before{
	left:0;
	top:0;
	height:100%;
}
.scrollHint:after{
	left:0;
	bottom:0;
	height:22%;
	transform-origin:right bottom;
	transform:rotate(-28deg);
}
.scrollHint span{
	position:absolute;
	left:100%;
	top:0;
	transform-origin:left top;
	transform:rotate(90deg);
	font-size:1.25em;
	letter-spacing:0.15em;
}
/************************************** home end ***************************************************/


/************************************** data start ***************************************************/
#data .tag{
	font-size:2em;
}

#data .main{
	position:relative;
	padding:9% 4.73% 2.1%;
	background:url(../images/01bg.jpg) repeat-y center top/100%;
	color:#FFF;
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	flex-wrap:wrap;
}
#data .main:after{
	position:absolute;
	left:0;
	top:100%;
	content:"";
	display:block;
	width:100%;
	padding-top:14.73%;
	background:url(../images/01btm.png) no-repeat center top/100%;
}

#data .main .tag{
	color:#1d4038;
}

/****************** 區塊大標 start *********************/
#data h4{
	width:100%;
}
#data h4 i{
	width:12.875em;
}
#data h4 i:before{
	padding-top:65.04%;
	background-image:url(../images/01.png);
}
#data h4 strong{
	margin-left:1em;
}
/****************** 區塊大標 end *********************/

/****************** intro start *********************/
#data .intro{
	width:45.34%;
	margin-top:3em;
	font-size:0.93em;
}
#data .intro h5{
	font-size:1.6em;
}
/****************** intro end *********************/

/****************** number start *********************/
#data .number{
	position:relative;
	width:47.09%;
	margin-top:-4.5%;
}
#data .number:before{
	content:"";
	display:block;
	padding-top:89.38%;
}
#data .number h5{
	position:absolute;
	right:0;
	top:0;
	padding-right:5em;
	transform:translate(4em, 0) rotate(5deg);
}
#data .number ul{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
#data .number ul:before,
#data .number ul:after{
	position:absolute;
	left:0;
	top:0;
	height:2px;
	content:"";
	display:block;
	background:currentColor;
	transform-origin:left center;
	z-index:0;
}
#data .number ul:before{
	margin:38.5% 0 0 29.4%;
	width:12.8%;
	transform:rotate(63.4deg);
}
#data .number ul:after{
	margin:53.81% 0 0 59.01%;
	width:6.79%;
	transform:rotate(-43.5deg);
}
#data .number ul li{
	position:absolute;
	left:0;
	top:0;
	width:40.74%;
	height:45.58%;
	border:2px solid;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	border-radius:50%;
	cursor:pointer;
	transition:all 0.2s;
	z-index:1;
}
#data .number ul li.active{
	border-color:transparent;
	background:#FFF;
	color:#1d4038;
	transform:scale(1.1);
}
#data .number ul li:nth-child(2){
	margin:47.65% 0 0 23.95%;
}
#data .number ul li:nth-child(3){
	margin:14.56% 0 0 58.02%;
}
#data .number ul li strong{
	font-size:5.05vw;
}
#data .number ul li:nth-child(1) strong{
	transform:translateX(-0.1em);
}
#data .number ul li strong i{
	font-size:0.5em;
	font-style:normal;
}
#data .number ul li em{
	font-size:1.34vw;
	font-style:normal;
	font-weight:bold;
	letter-spacing:0.2em;
	transform:translateX(0.2em);
}
/****************** number end *********************/

/****************** point start *********************/
#data .point{
	width:100%;
	margin-top:5.26%;
}
#data .point h5{
	display:inline-block;
	transform:rotate(-5deg);
}
#data .point ul{
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	width:81.39%;
	margin:1% auto 0;
}
#data .point ul li{
	position:relative;
	width:22.28%;
	color:#FFF;
	text-align:center;
	cursor:pointer;
	transition:color 0.2s;
}
#data .point ul li:hover{
	color:#00ff00;
}
#data .point ul li:before{
	content:"";
	display:block;
	padding-top:208.33%;
	background:url(../images/01point.png) no-repeat;
	background-size:300%;
}
#data .point ul li:nth-child(1):before{	background-position:left top;}
#data .point ul li:nth-child(2):before{	background-position:center top;}
#data .point ul li:nth-child(3):before{	background-position:right top;}
#data .point ul li:nth-child(1):hover:before{ background-position:left center;}
#data .point ul li:nth-child(2):hover:before{ background-position:center center;}
#data .point ul li:nth-child(3):hover:before{ background-position:right center;}

#data .point ul li h6{
	margin-top:0.2em;
	font-size:2em;
}
#data .point ul li span{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	margin-top:97%;
	font-size:1.34vw;
	font-weight:bold;
}
#data .point ul li span strong{
	font-size:1.6em;
	margin:0 0.15em;
}
/****************** point end *********************/

/****************** think start *********************/
#data .think{
	margin-top:14.73%;
	padding:0 1em 3em;
	text-align:center;
	color:#333;
}
#data .think h5{
	display:inline-block;
}
#data .think p{
	font-weight:bold;
	font-size:0.93em;
}
#data .think h5 + p{
	margin-top:4em;
}
/****************** think end *********************/
/************************************** data end ***************************************************/


/************************************** imagine start ***************************************************/
#imagine .ct{
	padding:9% 4.73% 2.1%;
	color:#000;
}

/****************** 區塊大標 start *********************/
#imagine h4 i{
	width:14.375em;
}
#imagine h4 i:before{
	padding-top:58.26%;
	background-image:url(../images/02.png);
}
#imagine h4 strong{
	margin-left:1em;
}
/****************** 區塊大標 end *********************/

#imagine ul{
	width:80.23%;
	max-width:1380px;
	margin:4.65% auto 0;
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
}
#imagine ul li{
	position:relative;
	width:26.52%;
}
#imagine ul li a{
	display:block;
	color:currentColor;
}
#imagine ul li img{
	display:block;
	width:100%;
}
#imagine ul li span{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:rgba(0, 0, 0, 0.8);
	display:block;
	color:#FFF;
	padding:2em;
	font-size:1.2em;
	line-height:1.8em;
	opacity:0;
	transition:opacity 0.2s;
}
#imagine ul li a:not([href]) span{
	text-align:center;
}
#imagine ul li a:hover span{
	opacity:1;
}
#imagine ul li em{
	position:absolute;
	left:50%;
	top:0;
	margin-top:94%;
	width:61.74%;
	font-style:normal;
	font-size:1.3em;
	text-align:center;
	letter-spacing:0.1em;
	padding:0.7em;
	transform:translateX(-50%);
}
/************************************** imagine end ***************************************************/


/************************************** class start ***************************************************/
/****************** 區塊大標 start *********************/
#class h4{
	flex-direction:row-reverse;
	background:url(../images/03titleBg.png) no-repeat center top/cover;
	padding:13.36% 4.73% 0;
}
#class h4 i{
	width:14.375em;
}
#class h4 i:before{
	padding-top:58.26%;
	background-image:url(../images/03.png);
}
#class h4 strong{
	margin-right:1em;
}
/****************** 區塊大標 end *********************/

#class ul{
	position:relative;
	margin-bottom:16.31%;
	padding:5.78% 4.73% 1.5%;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:flex-start;
	align-content:flex-start;
	background:url(../images/03bg.jpg) repeat-y center top/100%;
}
#class ul:before{
	position:absolute;
	content:"";
	display:block;
	right:0;
	bottom:0;
	width:24.31%;
	padding-top:18.63%;
	background:url(../images/03bgDeco.png) no-repeat right top/contain;
	transform:translateY(14.12%);
	z-index:2;
}
#class ul:after{
	position:absolute;
	left:0;
	top:100%;
	content:"";
	display:block;
	width:100%;
	padding-top:16.31%;
	background:url(../images/03btm.png) no-repeat center top/100%;
	z-index:1;
}
#class ul li{
	width:24.41%;
}
#class ul li:not(:nth-child(-n+4)){
	margin-top:0.87%;
}
#class ul li:last-child{
	margin-right:25.19%;
}
#class ul li:hover{
	position:relative;
	z-index:1;
}
#class ul li a{
	position:relative;
	display:block;
	color:#FFF;
}
#class ul li a:before{
	position:absolute;
	content:"";
	display:block;
	left:0;
	top:0;
	width:100%;
	height:100%;
	border:1px solid #1c3f38;
	transition:transform 0.2s;
	z-index:0;
}
#class ul li a:hover:before{
	transform:translate(-2%, -2.5%);
}
#class ul li a img{
	position:relative;
	display:block;
	width:100%;
	z-index:1;
}
#class ul li a .txt{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:rgba(29, 64, 56, 0.8);
	padding:1em;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	text-align:center;
	opacity:0;
	transition:opacity 0.2s;
	z-index:2;
}
#class ul li a:hover .txt{
	opacity:1;
}
#class ul li a .txt span{
	font-family:'Century Gothic';
	font-weight:bold;
	font-size:2.4em;
	border-bottom:1px solid;
	padding-bottom:0.3em;
}
#class ul li a .txt strong{
	font-weight:bold;
	font-size:1.2em;
	margin-top:1.5em;
	letter-spacing:0.1em;
}
#class ul li a .txt em{
	font-style:normal;
	margin-top:1.2em;
	color:#00ff00;
}
/************************************** class end ***************************************************/


/************************************** tour start ***************************************************/
#tour{
	position:relative;
	margin-top:-16.31%;
}
#tour:before{
	position:absolute;
	content:"";
	display:block;
	right:0;
	top:0;
	width:32.52%;
	margin-top:12.31%;
	padding-top:12.21%;
	background:url(../images/04bgDeco.png) no-repeat right top/cover;
	z-index:1;
}
#tour .ct{
	position:relative;
	padding:10% 4.73% 0;
	color:#FFF;
	background-color:#3f6430;
	background-image:
		linear-gradient(to right, transparent, transparent 11px, #4e703e 11px, #4e703e 12px),
		linear-gradient(to bottom, transparent, transparent 11px, #4e703e 11px, #4e703e 12px);
	background-size:12px 12px;
	z-index:0;
}
/****************** 區塊大標 start *********************/
#tour h4 i{
	width:14.375em;
}
#tour h4 i:before{
	padding-top:58.26%;
	background-image:url(../images/04.png);
}
#tour h4 strong{
	margin-left:1em;
}
/****************** 區塊大標 end *********************/

#tour ul{
	position:relative;
	max-width:1720px;
	margin:2.9% auto 0;
}
#tour ul:before{
	content:"";
	display:block;
	padding-top:31.56%;
}
#tour ul:after{
	position:absolute;
	content:"";
	display:block;
	left:0;
	top:0;
	width:7.09%;
	margin-top:3%;
	padding-top:19.18%;
	background:url(../images/04boy.png) no-repeat center/contain;
	z-index:1;
}
#tour ul li{
	position:absolute;
	left:0;
	top:0;
}
#tour ul li:before{
	position:absolute;
	content:"";
	display:block;
	right:0;
	top:0;
	margin:50% 50% 0 0;
	border-top:0.3125em dotted;
	transform-origin:right center;
	z-index:-1;
}
#tour ul li:nth-child(1):before{
	width:200%;
	transform:rotate(-15deg);
}
#tour ul li:nth-child(2):before{
	width:150%;
	transform:rotate(15deg);
}
#tour ul li:nth-child(3):before{
	width:150%;
	transform:rotate(-5deg);
}
#tour ul li:nth-child(1){
	margin:2.79% 0 0 10.17%;
	width:19.88%;
}
#tour ul li:nth-child(2){
	margin:6.97% 0 0 37.79%;
	width:24.36%;
}
#tour ul li:nth-child(3){
	margin:9.65% 0 0 77.2%;
	width:20.46%;
}
#tour ul li a{
	position:relative;
	display:block;
	color:currentColor;
}
#tour ul li a .img{
	position:relative;
	border-radius:50%;
	padding:2.14%;
	background:#FFF;
	overflow:hidden;
}
#tour ul li a img{
	display:block;
	width:100%;
	border-radius:50%;
}
#tour ul li a .img:after{
	position:absolute;
	content:"";
	display:block;
	left:2.14%;
	top:2.14%;
	width:95.72%;
	height:95.72%;
	border-radius:50%;
	background:#1d4038;
	opacity:0.8;
	transition:opacity 0.2s;
}
#tour ul li a .txt{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	padding:1em;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	text-align:center;
}
#tour ul li a .txt span{
	font-family:'Century Gothic';
	font-weight:bold;
	font-size:2.4em;
	border-bottom:1px solid;
	padding-bottom:0.3em;
}
#tour ul li a .txt strong{
	font-weight:bold;
	font-size:1.2em;
	margin-top:1.2em;
	letter-spacing:0.1em;
}
#tour ul li a .txt p{
	margin:1.2em 0 0;
	display:none;
}
/************************************** tour end ***************************************************/


/************************************** book start ***************************************************/
#book .ct{
	padding:10% 4.73% 5%;
	color:#FFF;
	background-color:#3f6430;
	background-image:
		linear-gradient(to right, transparent, transparent 11px, #4e703e 11px, #4e703e 12px),
		linear-gradient(to bottom, transparent, transparent 11px, #4e703e 11px, #4e703e 12px);
	background-size:12px 12px;
}
/****************** 區塊大標 start *********************/
#book h4 i{
	width:28.75em;
}
#book h4 i:before{
	padding-top:28.69%;
	background-image:url(../images/PLUS.png);
}
#book h4 strong{
	margin:0 0 0.9em 1em;
}
/****************** 區塊大標 end *********************/

#book ul{
	max-width:1720px;
	margin:4% auto 0;
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
}
#book ul li{
	width:13.95%;
	text-align:center;
	cursor:pointer;
}
#book ul li .cover{
	position:relative;
}
#book ul li .cover:before{
	position:absolute;
	left:0;
	top:0;
	content:"";
	display:block;
	width:100%;
	height:100%;
	background:#1d4039;
	z-index:0;
	transition:transform 0.2s;
}
#book ul li:hover .cover:before{
	transform:translate(12.5%, -8.57%);
}
#book ul li .cover img{
	position:relative;
	display:block;
	width:100%;
	z-index:1;
}
#book ul li h5{
	display:block;
	font-size:1.25em;
	margin-top:1.5em;
}
#book ul li em{
	display:block;
	font-style:normal;
	font-size:0.93em;
	margin-top:1em;
}
/************************************** book end ***************************************************/


/************************************** footer start ***************************************************/
footer .ct{
	color:#FFF;
	background:#1d4038;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	padding:3.29% 1.64%;
	font-size:0.815em;
	line-height:1em;
	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 ***************************************************/


/*********************************** overlay start ***********************************************/
.overlay{
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100vh;
	display:flex;
	justify-content:center;
	align-items:center;
	background:rgba(0, 0, 0, 0.5);
	z-index:2;
	visibility:hidden;
}
.overlay.show{
	visibility:visible;
}

.overlayCT{
	position:relative;
	width:81.05%;
	max-width:1540px;
	color:#1d4039;
	background-color:#FFF;
	background-image:
		linear-gradient(to right, transparent, transparent 11px, #e0ece7 11px, #e0ece7 12px),
		linear-gradient(to bottom, transparent, transparent 11px, #e0ece7 11px, #e0ece7 12px);
	background-size:12px 12px;
}

.overlayCT .ct{
	width:100%;
	padding:5.19% 6.49%;
	overflow:hidden;
}

/***************** pop 內容 start *********************/
.overlayCT .ct h6{
	font-size:1.5em;
	letter-spacing:0.06em;
}
.overlayCT .ct p{
	font-family:DINProRegular, 微軟正黑體, sans-serif;
	font-weight:bold;
}
.overlayCT .ct p.ps{
	font-size:0.85em;
}
.overlayCT .ct .btnBlock{
	display:flex;
	justify-content:flex-end;
}
.overlayCT .ct .btnBlock a,
.overlayCT .ct .btnBlock button{
	color:#FFF;
	background:#1d4039;
	border:none;
	font-size:1.3em;
	padding:0.4em 0.8em;
	display:flex;
	align-items:center;
	cursor:pointer;
	outline:none;
	letter-spacing:0.05em;
	font-weight:normal;
	transition:background 0.2s;
}
.overlayCT .ct .btnBlock a{
	margin-right:1em;
}
.overlayCT .ct .btnBlock a:hover,
.overlayCT .ct .btnBlock button:hover{
	background:#488a54;
}
.overlayCT .ct .btnBlock button:before{
	content:"";
	display:block;
	width:1.45em;
	height:1.48em;
	background:url(../images/fb.png) no-repeat left center/contain;
	border-right:1px solid;
	margin-right:0.6em;
}

/********* _number start ***********/
._number .img strong,
._number .img em{
	display:block;
}
._number .img strong{
	font-size:30em;
	letter-spacing:0.02em;
	line-height:1em;
}
._number .img strong i{
	font-size:0.4em;
	font-style:normal;
}
._number .img em{
	font-size:2.5em;
	font-style:normal;
	font-weight:bold;
	letter-spacing:0.3em;
}
._number .txt h6 span{
	display:inline-block;
	padding-bottom:0.05em;
	border-bottom:3px solid #00ff00;
	margin-top:0.15em;
}
._number .txt p{
	margin-top:2em;
}

._n1{
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
}
._n1 .img{
	width:42.85%;
	margin-top:-5%;
}
._n1 .img strong{
	margin-left:-22.5%;
}
._n1 .img em{
	margin:5% 0 0 18%;
}
._n1 .txt{
	width:50%;
	margin-top:5%;
}
._n1 .txt .btnBlock{
	margin-top:2em;
}

._n2 .img{
	display:flex;
	align-items:flex-end;
	margin-top:-5%;
	text-align:right;
}
._n2 .img strong{
	flex:1;
}
._n2 .img em{
	margin:0 0 0.8em 1em;
}
._n2 .txt{
	margin:4.5em 0 0 1.5em;
}
._n2 .txt .btnBlock{
	margin-top:-3em;
}

._n3 .img{
	margin-top:-5%;
	width:75%;
	text-align:right;
}
._n3 .img strong{
	letter-spacing:-0.02em;
}
._n3 .txt{
	position:relative;
	margin:-7em 0 0 1.5em;
}
._n3 .txt h6{
	position:absolute;
	right:0;
	bottom:calc(100% + 3em);
	width:23%;
	letter-spacing:normal;
}
._n3 .txt .btnBlock{
	margin-top:-3em;
}
/********* _number end ***********/

/********* _point end ***********/
._point{
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
}
._point .img{
	position:relative;
	width:23.28%;
	margin-left:3%;
	text-align:center;
}
._point .img:before{
	content:"";
	display:block;
	padding-top:208.33%;
	background:url(../images/01point.png) no-repeat;
	background-size:300%;
}
._p1 .img:before{ background-position:left bottom;}
._p2 .img:before{ background-position:center bottom;}
._p3 .img:before{ background-position:right bottom;}
._point .img span{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	margin-top:97%;
	font-size:1.34vw;
	font-weight:bold;
}
._point .img span strong{
	font-size:1.6em;
	margin:0 0.15em;
}

._point .txt{
	width:62.68%;
	margin-top:3%;
}
._point .txt .btnBlock{
	margin-top:4em;
}
/********* _point end ***********/

/********* _book end ***********/
._book{
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	padding:2% 0;
}
._book .img{
	position:relative;
	width:17.91%;
	margin:2.53% 0 0 4.47%;
}
._book .img:before{
	position:absolute;
	left:0;
	top:0;
	content:"";
	display:block;
	width:100%;
	height:100%;
	background:#1d4039;
	transform:translate(12.5%, -8.57%);
	z-index:0;
}
._book .img img{
	position:relative;
	width:100%;
	display:block;
	z-index:1;
	transition:transform 0.2s;
}
._book .img:hover img{
	transform:scale(1.05);
}
._book .txt{
	width:62.68%;
}
._book .txt em{
	display:block;
	font-style:normal;
	font-size:1.125em;
	margin-top:0.8em;
}
._book .txt .btnBlock{
	margin-top:4em;
}
/********* _book end ***********/
/***************** pop 內容 end *********************/

.overlayCT .btnClose{
	position:absolute;
	right:0;
	top:0;
	margin:1.94% 1.94% 0 0;
	width:3.75em;
	height:3.75em;
	cursor:pointer;
	z-index:1;
}
.overlayCT .btnClose span{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	transition:transform 0.2s;
}
.overlayCT .btnClose span:before,
.overlayCT .btnClose span:after{
	position:absolute;
	content:"";
	display:block;
	left:0;
	top:50%;
	width:100%;
	height:3px;
	background:currentColor;
}
.overlayCT .btnClose span:before{
	transform:translateY(-50%) rotate(-45deg);
}
.overlayCT .btnClose span:after{
	transform:translateY(-50%) rotate(45deg);
}
.overlayCT .btnClose:hover span{
	transform:rotate(-90deg);
}
/*********************************** overlay end ***********************************************/


@media screen and (min-width:1024px){
	
	/************************************** tour start ***************************************************/
	#tour ul li a:hover .img:after{
		opacity:0;
	}
	#tour ul li a:hover .txt{
		height:auto;
		padding:0;
		display:block;
	}
	#tour ul li:nth-child(1) a:hover .txt{
		margin:calc(100% + 1em) 0 0 10%;
		text-align:left;
	}
	#tour ul li:nth-child(2) a:hover .txt{
		top:auto;
		bottom:0;
		margin:0 0 calc(100% + 0.5em) 10%;
		text-align:left;
	}
	#tour ul li:nth-child(3) a:hover .txt{
		left:auto;
		top:auto;
		right:0;
		bottom:0;
		margin:0 80% 90% 0;
		text-align:right;
	}
	#tour ul li a:hover .txt span{
		display:none;
	}
	#tour ul li a:hover .txt strong{
		font-size:1em;
	}
	#tour ul li a:hover .txt p{
		display:block;
	}
	/************************************** tour end ***************************************************/
	
}


@media screen and (min-width:1024px) and (max-width:1920px){
	
	/*********************************** overlay start ***********************************************/		
	.overlayCT{
		font-size:0.84vw;
	}
	/*********************************** overlay end ***********************************************/
	
}


@media screen and (min-width:1024px) and (max-width:1440px){
	
	body{
		font-size:0.85em;
	}
	
}


@media screen and (max-width:1023px){
	
	body{
		font-size:0.8125em;
	}
	
	/*********************************** 共用 start *****************************************/
	/****************** 區塊大標 start *********************/
	h4 i{
		flex-shrink:0;
	}
	h4 strong{
		font-size:1.6em;
	}
	/****************** 區塊大標 end *********************/
	/****************** tag 標題 start *********************/
	.tag{
		position:relative;
		background:#FFF;
		padding:0.6em 0.8em;
		line-height:1em;
		font-weight:bold;
	}
	.tag:before,
	.tag:after{
		position:absolute;
		content:"";
		display:block;
	}
	.tag:before{
		left:0;
		top:calc(100% - 1px);
		width:100%;
		height:10.52%;
		background:url(../images/tagBdrBtm.png) repeat-x left top/auto 100%;
	}
	.tag:after{
		left:calc(100% - 1px);
		top:0;
		width:0.44em;
		height:110.52%;
		background:url(../images/tagBdrRight.png) no-repeat left top/cover;
	}
	.tag.reverse:before,
	.tag.reverse:after{
		left:auto;
		top:auto;
		transform:scale(-1);
	}
	.tag.reverse:before{
		right:0;
		bottom:calc(100% - 1px);
	}
	.tag.reverse:after{
		right:calc(100% - 1px);
		bottom:0;
	}
	/****************** tag 標題 end *********************/
	.popCT{
		display:none;
	}
	p{
		line-height:1.6em;
		margin:0;
	}
	*+p{
		margin-top:1.8em;
	}
	/*********************************** 共用 end *****************************************/
	
	/************************************** header start ***************************************************/
	header{
		justify-content:center;
		align-items:center;
		padding:0;
		width:95%;
		height:50px;
		margin:0 2.5%;
	}
	header.open{
		width:100%;
		height:100vh;
		border:none;
		background:rgba(29, 64, 56, 0.95);
		margin:0;
	}
	header h1{
		position:absolute;
		left:10px;
		top:10px;
		width:60px;
		margin-bottom:0;
	}
	/******************* 主選單 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;
		padding-bottom:0.5em;
		border-width:0.15em;
	}
	/******************* 主選單 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:#FFF;
		transition:all 0.2s;
	}
	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 ***************************************************/	
	/********************* 山景 start **********************/
	.mountain{
		transform-origin:75% bottom;
		transform:scale(3.5);
	}
	@keyframes cFloat{
		from{
			transform:translateX(25%);
		}
	}
	.T{	width:1.15%;}
	.O{	width:2.05%;}
	.M{	width:2.0%;}
	.R{	width:1.28%;}
	.W{	width:2%;}
	.c1{
		left:55%;
		margin-bottom:15%;
	}
	.c2{
		left:57%;
		margin-bottom:17%;
	}
	.c3{
		left:60%;
		margin-bottom:15%;
	}
	.c4{
		left:65%;
		margin-bottom:9%;
	}
	.c5{
		left:70%;
		margin-bottom:16.5%;
	}
	.c6{
		left:72%;
		margin-bottom:11%;
	}
	.c7{
		left:75%;
		margin-bottom:12%;
	}
	.c8{
		left:78%;
		margin-bottom:4%;
	}
	/********************* 山景 end **********************/
	/********************* 主標 start **********************/
	.mainTitle{
		left:12%;
		width:76%;
		margin-bottom:75%;
	}
	/********************* 主標 end **********************/
	.scrollHint{
		font-size:0.85em;
		height:5em;
	}
	/************************************** home end ***************************************************/
	
	/************************************** data start ***************************************************/	
	#data .tag{
		font-size:1.3em;
	}
	#data .main{
		padding:20% 5% 10%;
		display:block;
	}	
	/****************** 區塊大標 start *********************/
	#data h4 i{
		width:6em;
	}
	/****************** 區塊大標 end *********************/
	/****************** intro start *********************/
	#data .intro{
		width:auto;
	}
	#data .intro h5{
		font-size:1.4em;
	}
	/****************** intro end *********************/
	/****************** number start *********************/
	#data .number{
		width:auto;
		margin-top:10%;
	}
	#data .number ul li strong{
		font-size:11vw;
	}
	#data .number ul li em{
		font-size:4vw;
	}
	/****************** number end *********************/
	/****************** point start *********************/
	#data .point{
		margin-top:15%;
	}
	#data .point ul{
		display:block;
		width:70%;
		margin:0 auto;
	}
	#data .point ul li{
		width:auto;
	}
	#data .point ul li+li{
		margin-top:15%;
	}	
	#data .point ul li h6{
		font-size:1.5em;
	}
	#data .point ul li span{
		font-size:5vw;
	}
	/****************** point end *********************/
	/****************** think start *********************/
	#data .think h5 + p{
		margin-top:2em;
	}
	#data .think p br{
		display:none;
	}
	/****************** think end *********************/
	/************************************** data end ***************************************************/
	
	/************************************** imagine start ***************************************************/
	#imagine .ct{
		padding:20% 5% 10%;
	}
	/****************** 區塊大標 start *********************/
	#imagine h4 i{
		width:6.69em;
	}
	/****************** 區塊大標 end *********************/
	#imagine ul{
		width:90%;
		margin:10% auto 0;
		display:block;
	}
	#imagine ul li{
		width:auto;
	}
	#imagine ul li+li{
		margin-top:10%;
	}
	#imagine ul li span{
		position:static;
		height:auto;
		background:none;
		color:currentColor;
		margin-top:2em;
		font-weight:bold;
		padding:0;
		opacity:1;
	}
	/************************************** imagine end ***************************************************/
	
	/************************************** class start ***************************************************/
	/****************** 區塊大標 start *********************/
	#class h4{
		padding:20% 5% 0;
	}
	#class h4 i{
		width:6.69em;
	}
	/****************** 區塊大標 end *********************/
	#class ul{
		padding:5% 5% 0;
		display:block;
	}
	#class ul:before{
		display:none;
	}
	#class ul li{
		width:auto;
	}
	#class ul li:not(:nth-child(-n+4)){
		margin-top:0;
	}
	#class ul li+li{
		margin-top:5%;
	}
	#class ul li:last-child{
		margin-right:0;
	}
	#class ul li a{
		color:#1c3f39;
	}
	#class ul li a:before{
		display:none;
	}
	#class ul li a .txt{
		position:static;
		width:auto;
		height:auto;
		background:none;
		opacity:1;
		padding-top:0.5em;
	}
	#class ul li a .txt span{
		padding-bottom:0.15em;
	}
	#class ul li a .txt strong{
		margin-top:0.5em;
	}
	#class ul li a .txt em{
		margin-top:0.5em;
		color:#333;
	}
	/************************************** class end ***************************************************/
	
	/************************************** tour start ***************************************************/
	#tour:before{
		margin-top:5%;
	}
	#tour .ct{
		padding:20% 5% 0;
	}
	/****************** 區塊大標 start *********************/
	#tour h4 i{
		width:6.69em;
	}
	/****************** 區塊大標 end *********************/
	#tour ul{
		margin-top:10%;
	}
	#tour ul:before{
		display:none;
	}
	#tour ul:after{
		display:none;
	}
	#tour ul li{
		position:static;
	}
	#tour ul li:before{
		display:none;
	}
	#tour ul li:nth-child(1),
	#tour ul li:nth-child(2),
	#tour ul li:nth-child(3){
		margin:10% 0 0;
		width:auto;
	}
	#tour ul li:nth-child(1){
		margin-top:0;
	}
	#tour ul li a .img:after{
		display:none;
	}
	#tour ul li a .txt{
		position:static;
		width:auto;
		height:auto;
		margin-top:1em;
		padding:0;
		display:block;
	}
	#tour ul li a .txt span{
		display:inline-block;
	}
	#tour ul li a .txt strong{
		display:block;
	}
	#tour ul li a .txt p{
		display:block;
	}
	/************************************** tour end ***************************************************/
	
	/************************************** book start ***************************************************/
	#book .ct{
		padding:20% 5% 10%;
	}
	/****************** 區塊大標 start *********************/
	#book h4 i{
		width:10em;
	}
	#book h4 strong{
		margin-bottom:0;
	}
	/****************** 區塊大標 end *********************/
	#book ul{
		margin-top:10%;
		display:block;
	}
	#book ul li{
		width:auto;
	}
	#book ul li+li{
		margin-top:10%;
	}
	#book ul li .cover{
		width:60%;
		margin:0 auto;
	}
	#book ul li .cover:before{
		display:none;
	}
	#book ul li h5{
		margin-top:0.5em;
	}
	#book ul li em{
		margin-top:0.5em;
	}
	/************************************** book 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 ***************************************************/
	
	/*********************************** overlay start ***********************************************/		
	.overlayCT{
		width:100%;
		height:100%;
	}	
	.overlayCT .ct{
		height:100%;
		padding:10% 5%;
		overflow:auto;
	}
	/***************** pop 內容 start *********************/
	.overlayCT .ct .btnBlock a,
	.overlayCT .ct .btnBlock button{
		font-size:1.1em;
	}
	/********* _number start ***********/
	._number .img strong{
		font-size:36.5vw;
	}
	._number .txt h6 span{
		display:inline;
	}
	._number .txt h6 br{
		display:none;
	}
	._n1{
		display:block;
	}
	._n1 .img{
		width:auto;
		margin-top:0;
		text-align:center;
	}
	._n1 .img strong{
		margin-left:-5%;
	}
	._n1 .img em{
		margin:0;
	}
	._n1 .txt{
		width:auto;
		margin-top:5%;
	}
	._n2 .img{
		display:block;
		margin-top:0;
		text-align:center;
	}
	._n2 .img em{
		margin:0;
	}
	._n2 .txt{
		margin:5% 0 0;
	}
	._n2 .txt .btnBlock{
		margin-top:2em;
	}
	._n3 .img{
		margin:0;
		width:auto;
		text-align:center;
	}
	._n3 .img strong{
		letter-spacing:normal;
	}
	._n3 .txt{
		margin:5% 0 0;
	}
	._n3 .txt h6{
		position:static;
		width:auto;
	}
	._n3 .txt .btnBlock{
		margin-top:2em;
	}
	/********* _number end ***********/
	/********* _point end ***********/
	._point{
		display:block;
	}
	._point .img{
		width:70%;
		margin:-10% auto 0;
	}
	._point .img span{
		font-size:5vw;
	}
	._point .txt{
		width:auto;
		margin-top:5%;
	}
	._point .txt h6{
		text-align:center;
	}
	._point .txt .btnBlock{
		margin-top:2em;
	}
	/********* _point end ***********/
	/********* _book end ***********/
	._book{
		display:block;
		padding:0;
	}
	._book .img{
		width:60%;
		margin:0 auto;
	}
	._book .txt{
		width:auto;
		margin-top:5%;
	}
	._book .txt .btnBlock{
		margin-top:2em;
	}
	/********* _book end ***********/
	/***************** pop 內容 end *********************/
	.overlayCT .btnClose{
		width:2em;
		height:2em;
	}
	/*********************************** overlay end ***********************************************/
	
}