@charset "utf-8";
/* CSS Document */

body {
	font-family: Arial, Helvetica, "STHeitiTC-Light", "Microsoft JhengHei", "微軟正黑體", "Noto Sans TC", sans-serif;
	font-size: 16px;
	line-height: 0.5;
	background-color: #ffffff;
	color: #3e3a39;
	overflow-x: hidden;
	text-align: justify;
	word-wrap: break-word;
	margin: 0;
	padding: 0;
	height: 100%;
}

/* FontAwesome */
@font-face {
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	src: url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0");
	src: url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"),
	  url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0") format("woff2"),
	  url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0") format("woff"),
	  url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0") format("truetype"),
	  url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg");
  }

/* Material Icons */
@font-face {
	font-family: 'Material Icons';
	font-style: normal;
	font-weight: 400;
	src: url(https://example.com/MaterialIcons-Regular.eot);
	/* For IE6-8 */
	src: local('Material Icons'),
		local('MaterialIcons-Regular'),
		url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
		url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
		url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	/* Preferred icon size */
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;

	/* Support for all WebKit browsers. */
	-webkit-font-smoothing: antialiased;
	/* Support for Safari and Chrome. */
	text-rendering: optimizeLegibility;

	/* Support for Firefox. */
	-moz-osx-font-smoothing: grayscale;

	/* Support for IE. */
	font-feature-settings: 'liga';
}

a:focus,
a:hover {
	text-decoration: none;
}


/* 封面主視覺 */


/*超寬螢幕*/
@media screen and (min-width: 768px) {

	#cover.bottom {
		-webkit-box-pack: end;
		-ms-flex-pack: end;
		justify-content: flex-end;
	}

	#cover {
		height: 100vh;
		padding: 12% 8%;
		position: relative;
	}

	.title_all_1 {
		width: 100%;
		height: 50%;
		opacity: 0;
		padding-bottom: 5%;

		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+20,000000+100&0+20,1+90 */
		background: -moz-linear-gradient(top,  rgba(0,0,0,0) 20%, rgba(0,0,0,1) 90%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 20%,rgba(0,0,0,1) 90%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom,  rgba(0,0,0,0) 20%,rgba(0,0,0,1) 90%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		align-items: flex-end;
		position: absolute;
		bottom: 0;
	}

	.title_all_3 {
		width: 100%;
		height: 35%;
		opacity: 0;
		padding-bottom: 5%;
		background: -moz-linear-gradient(top, rgba(0,0,0,0) 20%, rgba(0,0,0,1) 80%, rgba(0,0,0,1) 100%);
		background: -webkit-linear-gradient(top, rgba(0,0,0,0) 20%,rgba(0,0,0,1) 80%,rgba(0,0,0,1) 100%);
		background: linear-gradient(to bottom, rgba(0,0,0,0) 20%,rgba(0,0,0,1) 80%,rgba(0,0,0,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 );
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		align-items: flex-end;
		position: absolute;
		bottom: 0;
	}

	.title_all_show {
		/* IE6-9 */
		-webkit-animation: 1s kv-bg 1.5s ease-out forwards;
		-moz-animation: 1s kv-bg 1.5s ease-out forwards;
		-o-animation: 1s kv-bg 1.5s ease-out forwards;
		animation: 1s kv-bg 1.5s ease-out forwards;
	}


	.topic_title {
		width: auto;
		margin-top: 5%;
		opacity: 0;
	}

	.topic_title_show {
		-webkit-animation: topictitle 1s ease-out 1.5s forwards;
		-moz-animation: topictitle 1s ease-out 1.5s forwards;
		-o-animation: topictitle 1s ease-out 1.5s forwards;
		animation: topictitle 1s ease-out 1.5s forwards;
	}

	.kv-title {
		width: 100%;
		-webkit-animation: kv-title 1s ease-out 2s forwards;
		-moz-animation: kv-title 1s ease-out 2s forwards;
		-o-animation: kv-title 1s ease-out 2s forwards;
		animation: kv-title 1s ease-out 2s forwards;
		display: flex;
		justify-content: center;
		opacity: 0;
	}


	/* 主視覺標題 */

	#title-contain {
		position: relative;
		width: auto;
		padding: 20px;
		/* max-width: 550px; */
	}

	#cover h1 {
		color: #FFFFFF;
		font-weight: 700;
		letter-spacing: -1px;
		line-height: 1.1;
		margin: 0;
	}

	 h1 {
		/* font-size: 55px;
		color: #FFFFFF;
		text-align: center; */
	}

	/* 指示箭頭 */

	.arrow {
		position: absolute;
		z-index: 999;
		left: 50%;
		bottom: 25px;
		width: 100px;
		margin-left: -50px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		cursor: pointer;
		color: #ffffff;
	}

	.arrow a {
		color: #ffffff;
	}


	.arrowImg {
		-webkit-animation: arrow 555ms infinite ease-out;
		animation: arrow 555ms infinite ease-out;
	}

	@-webkit-keyframes arrow {
		0% {
			-webkit-transform: translate(0, 0);
			transform: translate(0, 0);
		}

		50% {
			-webkit-transform: translate(0, 10px);
			transform: translate(0, 10px);
		}

		100% {
			-webkit-transform: translate(0, 0);
			transform: translate(0, 0);
		}
	}


}

/*動畫 keyframesy*/


/* KV */
@-webkit-keyframes kv {
	0% {
		display: none;
		opacity: 0;
	}

	100% {
		display: block;
		opacity: 1;
	}
}

@-moz-keyframes kv {
	0% {
		display: none;
		opacity: 0;
	}

	100% {
		display: block;
		opacity: 1;
	}
}

@-o-keyframes kv {
	0% {
		display: none;
		opacity: 0;
	}

	100% {
		display: block;
		opacity: 1;
	}
}

@keyframes kv {
	0% {
		display: none;
		opacity: 0;
	}

	100% {
		display: block;
		opacity: 1;
	}
}

/* 精選專題 Logo  */
@-webkit-keyframes topictitle {

	from {
		opacity: 0;
		clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
	}

	to {
		opacity: 1;
		clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
	}

}

@-moz-keyframes topictitle {

	from {
		opacity: 0;
		clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
	}

	to {
		opacity: 1;
		clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
	}

}

@-o-keyframes topictitle {

	from {
		opacity: 0;
		clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
	}

	to {
		opacity: 1;
		clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
	}

}

@keyframes topictitle {

	from {
		opacity: 0;
		clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
	}

	to {
		opacity: 1;
		clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
	}

}

/* kv-bg */
@-webkit-keyframes kv-bg {
	0% {
		opacity: 0;
		clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
	}

	100% {
		opacity: 1;
		clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
	}
}

@-moz-keyframes kv-bg {
	0% {
		opacity: 0;
		clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
	}

	100% {
		opacity: 1;
		clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
	}
}

@-o-keyframes kv-bg {
	0% {
		opacity: 0;
		clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
	}

	100% {
		opacity: 1;
		clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
	}
}

@keyframes kv-bg {
	0% {
		opacity: 0;
		clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
	}

	100% {
		opacity: 1;
		clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
	}
}


/* kv-bg */
@-webkit-keyframes kv-bg-m {
	0% {
		display: none;
		opacity: 0;
		clip-path: polygon(100% 100%, 0 100%, 0 100%, 100% 100%);

	}

	100% {
		display: block;
		opacity: 1;
		clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 0);
	}
}

@-moz-keyframes kv-bg-m {
	0% {
		display: none;
		opacity: 0;
		clip-path: polygon(100% 100%, 0 100%, 0 100%, 100% 100%);

	}

	100% {
		display: block;
		opacity: 1;
		clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 0);
	}
}

@-o-keyframes kv-bg-m {
	0% {
		display: none;
		opacity: 0;
		clip-path: polygon(100% 100%, 0 100%, 0 100%, 100% 100%);

	}

	100% {
		display: block;
		opacity: 1;
		clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 0);
	}
}

@keyframes kv-bg-m {
	0% {
		display: none;
		opacity: 0;
		clip-path: polygon(100% 100%, 0 100%, 0 100%, 100% 100%);

	}

	100% {
		display: block;
		opacity: 1;
		clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 0);
	}
}

/* kv-title */
@-webkit-keyframes kv-title {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-moz-keyframes kv-title {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-o-keyframes kv-title {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes kv-title {
	0% {
		opacity: 0;

	}

	100% {
		opacity: 1;
	}
}

/* scrollDown */

@-webkit-keyframes scrollDown {
	0% {
		top: 8px;
	}

	100% {
		top: 12px;
	}
}


@-moz-keyframes scrollDown {
	0% {
		top: 8px;
	}

	100% {
		top: 12px;
	}
}


@-o-keyframes scrollDown {
	0% {
		top: 8px;
	}

	100% {
		top: 12px;
	}
}


@keyframes scrollDown {
	0% {
		top: 8px;
	}

	100% {
		top: 12px;
	}
}



/*** LOGO ***/

/* 手機 */
@media screen and (max-width: 767px) {

	.logo {
		height: 30px;
		margin-top: 10px;
		position: absolute;
		left: 50%;
		margin-left: -50px !important;
		display: block;
	}

	.go {
		margin: 5px 10px;
		font-size: 16px;
		padding: 0px 15px 0px 15px;
		border-radius: 30px;
		border: solid 1px #585858;
		line-height: 38px;
	}

	/* #space增加高度讓自動下向滾動可以偵測到距離 */
	/* #space {
		height: 230px;
	} */

}

@media screen and (min-width: 768px) {
	.logo {
		height: 30px;
		margin-top: 10px;
		text-align: left;
	}

	/* #space {
		height: 100px;
	} */

}

/* 進度條*/

.progress {
	background-color: #c1b494;
	position: fixed;
	top: 0;
	left: 0;
	height: 5px;
	z-index: 99999;
}

/* 社群分享按鈕區*/

/* 桌機&平板 */
@media screen and (min-width: 768px) {
	.share-block {
		height: auto;
		min-height: 22px;
		display: table;
		margin-top: 0px;
		margin-bottom: 0px;
		padding: 0;
		overflow: hidden;
	}

	.fb-like-block {
		margin-top: 0;
		float: left;
		display: table-cell;
		padding: 0;
	}

	.line-block {
		float: left;
		margin-top: -1px;
		margin-left: 5px;
		padding: 0;
		width: 98px;
		display: table-cell;
	}

	.line-block img {
		width: 98px;
		height: 22px;
	}
}

/* 手機 */
@media screen and (max-width: 767px) {
	.share-block {
		display: table;
		height: 22px;
		margin-bottom: 0px;
		margin-top: 0px;
		margin-left: auto;
		margin-right: auto;
		position: relative;
		width: 100%;
	}

	.fb-like-block {
		float: left;
		margin-top: 0px;
		display: table-row;

	}

	.line-block {
		width: 84px;
		float: left;
		margin-top: 0px;
		margin-left: 5px;
		display: table-row;
	}

	.line-block img {
		width: 84px;
		height: 20px;
	}

}



/* Navbar*/

.navbar-default {
	background-color: rgba(0, 0, 0, 0);
	/* opacity: 0; */
	visibility: hidden;
}

.navbar.scrolled {
	background-color: rgba(0, 0, 0, 1);
	/* opacity: 1; */
	visibility: visible;
	transition: all 0.6s ease;
	top: -21px;
}

.nav-link {
	background-color:transparent;
}

.navbar-light .navbar-toggler {
	color: rgba(0, 0, 0, .5);
	border-color: rgba(255, 255, 255, .1);
}

/* Navbar 滾動變色*/

.navbar {
	-webkit-transition: all 0.6s ease-out;
	-moz-transition: all 0.6s ease-out;
	-o-transition: all 0.6s ease-out;
	-ms-transition: all 0.6s ease-out;
	transition: all 0.6s ease-out;
	transition: opacity 1s ease;
	border-bottom-style: none;
	padding: 20px 0 0 15px;
}

.navbar-default .navbar-nav>li>a {
	font-size: 1em;
	font-weight: 500;
	margin-right: 15px;
	margin-left: 15px;
	cursor: pointer;
}

.navbar-light .navbar-nav .nav-link {
	color: #fff;
	padding: 20px 15px 20px 15px;
	background-color: transparent !important;
}

.navbar-light .navbar-nav .nav-link:hover {
	color: #000;
	background-color: yellow !important;
	-webkit-transition: opacity 0.35s ease-in-out, top 0.3s ease-out, color 0.3s linear, background 0.3s linear, -webkit-transform 0.35s ease-in-out;
	transition: opacity 0.35s ease-in-out, top 0.3s ease-out, color 0.3s linear, background 0.3s linear, -webkit-transform 0.35s ease-in-out;
	transition: opacity 0.35s ease-in-out, transform 0.35s ease-in-out, top 0.3s ease-out, color 0.3s linear, background 0.3s linear;
	transition: opacity 0.35s ease-in-out, transform 0.35s ease-in-out, top 0.3s ease-out, color 0.3s linear, background 0.3s linear, -webkit-transform 0.35s ease-in-out;
}

.navbar-light .navbar-nav .nav-link.actived {
    color: #000;
    padding: 20px 15px 20px 15px;
    background-color: yellow !important;
    height: 100%;
    display: flex;
	justify-content: center;
}

@media (max-width: 767px) {
	.navbar-light .navbar-nav .nav-link.actived {
    color: #000;
    padding: 20px 15px 20px 15px;
    background-color: yellow !important;
    height: 100%;
    display: flex;
    justify-content: left;
	}

}


/* Navbar過長處理*/

@media (max-width: 768px) {
	.navbar-header {
		float: none;
	}

	.navbar-toggle {
		display: block;
	}

	.navbar-collapse {
		border-top: 1px solid transparent;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
	}

	.navbar-nav>li {
		float: none;
	}

	.navbar-nav>li>a {
		padding-top: 10px;
		padding-bottom: 10px;
		cursor: pointer;
	}

	.navbar-text {
		float: none;
		margin: 15px 0;
	}

	/* since 3.1.0 */
	.navbar-collapse.collapse.in {
		display: block !important;
	}

	.collapsing {
		overflow: hidden !important;
	}

}

.custom-toggler.navbar-toggler {
    border-color: rgb(255,255,255,0);
}

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}


/* Navbar 動態*/
.navbar-toggler .navbar-toggler-icon {  
	position: relative;
	transition: all 500ms ease-in-out;
	margin-right: 15px;
}

/*第一條旋轉45度*/
.navbar-toggler.active .navbar-toggler-icon:nth-of-type(1) {
	top: 6px;
	transform: rotate(45deg);
}

/*第二條向左飛出*/
.navbar-toggler.active .navbar-toggler-icon:nth-of-type(2) {
	opacity: 0;
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}

/*第三條反轉45度*/
.navbar-toggler.active .navbar-toggler-icon:nth-of-type(3) {
	top: -6px;
	transform: rotate(-45deg);
}

/*漢堡選單邊框*/
.navbar-default .navbar-toggler {
	border-color: transparent;
}

/*漢堡選單底色*/
.navbar-default .navbar-toggler:hover,
.navbar-default .navbar-toggler:focus {
	background-color: transparent;
}


/* 視覺與滾動視差 */

/* 手機 */
@media screen and (max-width: 767px) {

	/* 背景外層 */
	.fixed-background {
		width: 100vw;
		height: 100vh;
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: flex-end;
	}

	.fixed-background2 {
		width: 100vw;
		height: auto;
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: flex-end;
	}

	/* 背景 */
	.fixed-bg {
		position: fixed;
		width: 100%;
		height: auto;
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: cover;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 0;
		/* -webkit-transition: opacity .7s ease;
		-o-transition: opacity .7s ease;
		transition: opacity .7s ease; */
	}

	.fixed-bg-no {
		position: fixed;
		width: 100%;
		height: auto;
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: cover;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: -1;
		/* -webkit-transition: opacity .7s ease;
		-o-transition: opacity .7s ease;
		transition: opacity .7s ease; */
	}

	/* 背景 */
	.fixed-bg2 {
		/* position: fixed; */
		width: 100%;
		height: auto;
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: cover;
		top: 39px;
		bottom: 0;
		left: 0;
		z-index: 0;
		/* -webkit-transition: opacity .7s ease;
		-o-transition: opacity .7s ease;
		transition: opacity .7s ease; */
	}

	#kv1-1{
		background-position: 50% 0;
		background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part1-1-m.jpg);
		}

	#kv1-2{
		background-position: 50% 0;
		background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part1-2-m.jpg);
		}

	#kv1-3{
		background-position: 50% 0;
		background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part1-3-m.jpg);
		}

	#kv1-4{
		background-position: 50% 0;
		background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part1-4-m.jpg);
		}
	
		#kv2-1{
			background-position: 50% 0;
			background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part2-1-m.jpg);
			}
		
		#kv2-2{
		background-position: 50% 0;
		background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part2-2-m.jpg);
		}
	
		#kv2-3{
		background-position: 50% 0;
		background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part2-3-m.jpg);
		}
		
		#kv2-4{
			background-position: 50% 0;
			background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part2-4-m.jpg);
			}
		
		#kv2-5{
		background-position: 50% 0;
		background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part2-5-m.jpg);
		}
	
		#kv3-1{
			background-position: 50% 0;
			background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part3-1-m.jpg);
			}
		
		#kv3-2{
		background-position: 50% 0;
		background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part3-2-m.jpg);
		}


	.black-g {
		width: 100%;
		height: 250px;
		padding: 40% 2% 0% 2%;
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+80,000000+100&0+0,0+50,0.8+80 */
		background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.8) 80%, rgba(0, 0, 0, 0.8) 100%);
		/* FF3.6-15 */
		background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.8) 80%, rgba(0, 0, 0, 0.8) 100%);
		/* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.8) 80%, rgba(0, 0, 0, 0.8) 100%);
		/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#cc000000', GradientType=0);
		/* IE6-9 */
		z-index: 1;
	}

	.black-g_yt {
		width: 100%;
		padding: 0% 5%;
		background-color: #FFFFFF;
		z-index: 1;
		position: absolute;
		bottom: 60px;
	}

	.black-g_kv {
		width: 100%;
		padding: 0% 0%;
		background-color: #FFFFFF;
		z-index: 1;
	}

	#intro1, #intro2, #intro3 {
		z-index: 2;
		position: relative;
	}

	#content1-1, #content1-2, #content1-3, #content1-4, 
	#content2-1, #content2-2, #content2-3,  #content2-4, #content2-5,
	#content3-1 , #content3-2, #content3-3 {
		z-index: 2;
		position: relative;
	}


}



/*超寬螢幕*/
@media screen and (min-width: 768px) {

	/* 背景外層 */
	.fixed-background {
		width: 100%;
		height: 100vh;
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: flex-end;
	}

	.fixed-background2 {
		width: 100%;
		height: auto;
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: flex-end;
	}

	/* 背景 */
	.fixed-bg {
		position: fixed;
		width: 100%;
		height: 100vh;
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: cover;
		top: 0;
		left: 0;
		z-index: -1;
		/* -webkit-transition: opacity .7s ease;
		-o-transition: opacity .7s ease;
		transition: opacity .7s ease; */
	}

	.fixed-bg-no {
		width: 100%;
		height: 100vh;
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: cover;
		top: 0;
		left: 0;
		z-index: -1;
		/* -webkit-transition: opacity .7s ease;
		-o-transition: opacity .7s ease;
		transition: opacity .7s ease; */
	}
	

	.fixed-bg2 {
		/* position: fixed; */
		width: 100%;
		height: auto;
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: cover;
		top: 0;
		left: 0;
		z-index: -1;
		/* -webkit-transition: opacity .7s ease;
		-o-transition: opacity .7s ease;
		transition: opacity .7s ease; */
	}

	#kv1-1{
		background-position: 50% 0;
		background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part1-1.jpg);
		}
	

	#kv1-2{
		background-position: 50% 0;
		background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part1-2.jpg);
		}
	

	#kv1-3{
		background-position: 50% 0;
		background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part1-3.jpg);
		}

	#kv1-4{
		background-position: 50% 0;
		background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part1-4.jpg);
		}

		#kv2-1{
			background-position: 50% 0;
			background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part2-1.jpg);
			}
		
		#kv2-2{
		background-position: 50% 0;
		background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part2-2.jpg);
		}
	
		#kv2-3{
		background-position: 50% 0;
		background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part2-3.jpg);
		}
		
		#kv2-4{
			background-position: 50% 0;
			background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part2-4.jpg);
			}
		
		#kv2-5{
		/* background-position: 50% 0;
		background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part2-5.jpg); */
		}
	
		#kv3-1{
			background-position: 50% 0;
			background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part3-1.jpg);
			}
		
		#kv3-2{
		background-position: 50% 0;
		background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part3-2.jpg);
		}
	

	.black-g, .black-g_yt, .black-g_kv {
		width: 100vw;
		margin: 0 auto;
		z-index: 1;
		position: absolute;
		bottom: 0;
	}

	#intro1, #intro2, #intro3 {
		z-index: 2;
		position: relative;
	}

	#content1-1, #content1-2, #content1-3, #content1-4,
	#content2-1, #content2-2, #content2-3, #content2-4, #content2-5, 
	#content3-1 , #content3-2, #content3-3 {
		z-index: 2;
		position: relative;
	}

}

/* ipad 直 */
@media all 
and (device-width: 768px) 
and (device-height: 1024px) 
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation:portrait) {
	/* 背景外層 */
	.fixed-background {
		width: 100%;
		height: 100vh;
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: flex-end;
	}

	/* 背景 */
	.fixed-bg {
		position: fixed;
		width: 100%;
		height: 100vh;
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: cover;
		top: 0;
		left: 0;
		z-index: -1;
		/* -webkit-transition: opacity .7s ease;
		-o-transition: opacity .7s ease;
		transition: opacity .7s ease; */
	}

	#kv1-1{
	background-position: 50% 0;
	background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part1-1-pad.jpg);
	}

	#kv1-2{
	background-position: 50% 0;
	background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part1-2-pad.jpg);
	}

	#kv1-3{
	background-position: 50% 0;
	background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part1-3-pad.jpg);
	}

	#kv1-4{
	background-position: 50% 0;
	background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part1-3-pad.jpg);
	}
	

	#kv2-1{
		background-position: 50% 0;
		background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part2-1-pad.jpg);
		}
	
	#kv2-2{
	background-position: 50% 0;
	background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part2-2-pad.jpg);
	}

	#kv2-3{
	background-position: 50% 0;
	background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part2-3-pad.jpg);
	}
	
	#kv2-4{
		background-position: 50% 0;
		background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part2-4-pad.jpg);
		}
	
	#kv2-5{
	/* background-position: 50% 0;
	background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part2-5-pad.jpg); */
	}

	#kv3-1{
		background-position: 50% 0;
		background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part3-1-pad.jpg);
		}
	
	#kv3-2{
	background-position: 50% 0;
	background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part3-2-pad.jpg);
	}

}

/* ipad pro 直 */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-height: 1366px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
	/* 背景外層 */
	.fixed-background {
		width: 100%;
		height: 100vh;
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: flex-end;
	}

	/* 背景 */
	.fixed-bg {
		position: fixed;
		width: 100%;
		height: 100vh;
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: cover;
		top: 0;
		left: 0;
		z-index: -1;
		/* -webkit-transition: opacity .7s ease;
		-o-transition: opacity .7s ease;
		transition: opacity .7s ease; */
	}

	#kv1-1{
		background-position: 50% 0;
		background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part1-1-pad.jpg);
		}
	
	#kv1-2{
	background-position: 50% 0;
	background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part1-2-pad.jpg);
	}

	#kv1-3{
	background-position: 50% 0;
	background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part1-3-pad.jpg);
	}

	#kv1-4{
	background-position: 50% 0;
	background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part1-4-pad.jpg);
	}

	#kv2-1{
		background-position: 50% 0;
		background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part2-1-pad.jpg);
		}
	
	#kv2-2{
	background-position: 50% 0;
	background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part2-2-pad.jpg);
	}

	#kv2-3{
	background-position: 50% 0;
	background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part2-3-pad.jpg);
	}
	
	#kv2-4{
		background-position: 50% 0;
		background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part2-4-pad.jpg);
		}
	
	#kv2-5{
	/* background-position: 50% 0;
	background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part2-5-pad.jpg); */
	}

	#kv3-1{
		background-position: 50% 0;
		background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part3-1-pad.jpg);
		}
	
	#kv3-2{
	background-position: 50% 0;
	background-image: url(https://money.udn.com/SSI/digital-news/2019/stock/img/kv-part3-2-pad.jpg);
	}

}


/* @-webkit-keyframes opacity { from { opacity:0; } to {opacity: 1;} }
@-moz-keyframes opacity { from { opacity:0; } to {opacity: 1;} }
@keyframes opacity { from { opacity:0; } to {opacity: 1;} } */


/* waypoint */

.teaser {
	opacity: 0
}

.lazyloaded {
	opacity: 1;
	transition: opacity 1s;
}

.hide {
	opacity: 0
}

.show {
	opacity: 1;
	/* transition: 1s opacity 0s; */
	z-index: 1;
}


/* 背景內標題 */


/* 手機 */
@media screen and (max-width: 767px) {
	.fix-text {
		font-size: calc(2.5vw + 2.5vh + 2.5vmin);
		font-weight: normal;
		letter-spacing: -.5px;
		color: #fffefe;
		text-shadow: 0 3px 7px rgba(0, 0, 0, .4);
		bottom: 40px;
		width: 100%;
		line-height: 2.5rem;
		margin-bottom: 35px;
		text-align: center;
	}

	.fix-text_p2 {
		color: #fff;
		bottom:0;
		width: 100%;
		height: auto;
		margin-top: 70vh;
		padding-top: 35px;
		padding-bottom: 35px;
		padding-left: 15px;
		line-height: .8em;
		display: flex;
		justify-content: flex-start;
		align-items: flex-end;
		position: absolute;
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&1+0,1+30,0+100 */
		background: -moz-linear-gradient(left,  rgba(0,0,0,1) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(0,0,0,1) 30%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right,  rgba(0,0,0,1) 0%,rgba(0,0,0,1) 30%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
	}

	.fixed-background .container {
		padding: 0;
	}

	.sub-text {
		font-size: 1.9rem;
		font-weight: 700;
		letter-spacing: -.5px;
		color: #fff;
		text-shadow: 0 3px 7px rgba(0, 0, 0, .4);
		max-width: .5em;
	}

	.fix-text_yt {
		bottom: 0px;
		width: 100%;
		margin-bottom: 0px;
		text-align: center;
		display: flex;
		flex-flow: column;
		flex-wrap: nowrap;
	}

	.text_q{
		width: 100%;
		display: flex;
	}
	.q_title{
		font-size: 60px;
		line-height: 1em;
	}
	.q_txt{
		font-size: 26px;
		line-height: 1em;
		padding-left: .5em;
	}

}

/* 小手機 */
@media screen and (max-width: 320px) {
	.q_title{
		font-size: 50px;
		line-height: 1em;
	}
	.q_txt{
		font-size: 22px;
		line-height: 1.25em;
		padding-left: .5em;
	}
}

/*超寬螢幕*/
@media screen and (min-width: 768px) {

	.fix-text {
		font-size: 55px;
		font-weight: normal;
		letter-spacing: -.5px;
		color: #fff;
		text-shadow: 0 3px 7px rgba(0, 0, 0, .4);
		bottom: 40px;
		width: 100%;
		height: 30vh;
		margin-top: 70vh;
		padding-bottom: 10vh;
		line-height: .8em;
		margin-bottom: 0px;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		line-height: 1;
    	text-align: center;
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.1+30,1+100 */
		background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 30%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 30%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 30%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
	}

	.fix-text_p2 {
		font-size: 67px;
		font-weight: 700;
		letter-spacing: -.5px;
		color: #fff;
		bottom:0;
		text-shadow: 0 3px 7px rgba(0, 0, 0, .4);
		width: 100%;
		height: auto;
/*		margin-top: 70vh;*/	
	padding-top: 35px;
		padding-bottom: 35px;
		padding-left: 45px;
		line-height: .8em;
		display: flex;
		justify-content: flex-start;
		align-items: flex-end;
		/* position: absolute; */
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&1+0,1+30,0+100 */
		background: -moz-linear-gradient(left,  rgba(0,0,0,1) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(0,0,0,1) 30%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right,  rgba(0,0,0,1) 0%,rgba(0,0,0,1) 30%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
	}

	.fix-text_yt {
		width: 96%;
		height: 100vh;
		padding-bottom: 5%;
		display: flex;
		padding-left: 2%;
		justify-content: center;
		align-items: flex-end;
		flex-wrap: nowrap;
	}

	.fixed-background .container {
		padding: 0;
	}

	.sub-text {
		font-size: 40px;
		font-weight: 700;
		letter-spacing: -.5px;
		color: #fffefe;
		text-shadow: 0 3px 7px rgba(0, 0, 0, .4);
		max-width: .5em;
	}
	.text_q{
		width: 100%;
		display: flex;
	}
	.q_title{
		/* font-size: 133px; */
		font-size: calc(4vw + 4vh + 4vmin);
		line-height: 1em;
	}
	.q_txt{
		/* font-size: 70px; */
		font-size: calc(2vw + 2vh + 4vmin);
		line-height: 1em;
		padding-left: .5em;
	}
}


/* ipad  直 */
@media all 
and (device-width: 768px) 
and (device-height: 1024px) 
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation:portrait) {

	.q_title {
		font-size:90px;
		line-height: 1em;
	} 

	.q_txt {
		font-size: 40px;
		line-height: 1em;
		padding-left: .5em;
	}
	
    
}
  
/* ipad pro 直 */
@media all 
  and (min-device-width: 1024px) 
  and (max-device-height: 1366px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

	.q_title {
		font-size:90px;
		line-height: 1em;
	} 

	.q_txt {
		font-size: 40px;
		line-height: 1em;
		padding-left: .5em;
	}
	
    
}




/* 主視覺標題 */

/* 手機 */
@media screen and (max-width: 481px) {

	#cover {
		height: 100vh;
		position: relative;
		padding: 0%;
	}

	#cover.bottom {
		/* -webkit-box-pack: end;
		-ms-flex-pack: end;
		justify-content: flex-end; */
	}

	.kv1 {
		width: 100%;
		height: 100%;
		background-image: url(../img/kv-part1-cover-m.jpg);
		background-size: cover;
		background-position: top;
	}

	.kv2 {
		width: 100%;
		height: 100%;
		background-image: url(../img/kv-part2-cover-m.jpg);
		background-size: cover;
		background-position: bottom;
	}

	.kv3 {
		width: 100%;
		height: 100%;
		background-image: url(../img/kv-part3-cover-m.jpg);
		background-size: cover;
		z-index: 1;

	}


	.title-set {
		position: relative;
		/* bottom: 50%; */
	}


	#title-contain {
		position: relative;
		width: auto;
		padding: 20px;
		/* max-width: 550px; */
	}

	#cover h1 {
		font-size: calc(2.5vw + 2.5vh + 2.5vmin);
		font-weight: normal;
		letter-spacing: -1px;
		line-height: 1.2;
		margin: 0;
	}

	.kv-title {
		width: 100%;
		-webkit-animation: kv-title 1s ease-out 2s forwards;
		-moz-animation: kv-title 1s ease-out 2s forwards;
		-o-animation: kv-title 1s ease-out 2s forwards;
		animation: kv-title 1s ease-out 2s forwards;
		display: flex;
		justify-content: center;
		text-align: center;
	}

	h1 {
		font-size: 55px;
		color: #FFFFFF;
	}

	.topic_title {
		margin-top: 50px;
		width: 120px;
	}
	.title_all_1,
	.title_all_2,
	.title_all_3 {
		width: 100%;
		height: 50%;
		padding: 0 0 0 0;
		position: absolute;
		bottom: 0;
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+70,000000+100&0+0,0.8+80 */
		background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 70%, rgba(0, 0, 0, 0.8) 80%, rgba(0, 0, 0, 0.8) 100%);
		/* FF3.6-15 */
		background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 70%, rgba(0, 0, 0, 0.8) 80%, rgba(0, 0, 0, 0.8) 100%);
		/* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 70%, rgba(0, 0, 0, 0.8) 80%, rgba(0, 0, 0, 0.8) 100%);
		/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#cc000000', GradientType=0);
		/* IE6-9 */
	}

	.title_all_part1 {
		width: 100%;
		padding: 0 15px 0 15px;
		position: absolute;
		bottom: 20vh;
	}

	.title_all_part2 {
		width: 100%;
		padding: 0 15px 0 15px;
		position: absolute;
		bottom: 20vh;
	}

	.title_all_part3 {
		width: 100%;
		padding: 0 15px 0 15px;
		position: absolute;
		bottom: 20vh;
	}


}


/*超寬螢幕*/
@media screen and (min-width: 768px) {

	#title-contain {
		position: relative;
		width: auto;
		padding: 20px;
		/* max-width: 550px; */
	}

	#cover h1 {
		font-weight: 700;
		letter-spacing: -1px;
		line-height: 1.1;
		margin: 0;
	}

	h1 {
		font-size: 55px;
		color: #FFFFFF;
		text-align: center;
	}

}

/*** 手機 橫***/
@media screen and (max-width: 823px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 1.5) {
	h1 {
		font-size: 3rem;
		color: #FFFFFF;
		text-align: center;
	}

}

/* ipad  直 */
@media all 
and (device-width: 768px) 
and (device-height: 1024px) 
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation:portrait) {

	h1 {
		font-size: 40px;
		color: #FFFFFF;
	}
	
    
}
  
/* ipad pro 直 */
@media all 
  and (min-device-width: 1024px) 
  and (max-device-height: 1366px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

	h1 {
		font-size: 40px;
		color: #FFFFFF;
	}
	
    
}
  


/* 指示箭頭 */

.arrow {
	position: absolute;
	z-index: 999;
	left: 50%;
	bottom: 25px;
	width: 100px;
	margin-left: -50px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	cursor: pointer;
	color: #ffffff;
}

.arrow a {
	color: #ffffff;
}

.arrowImg {
	-webkit-animation: arrow 555ms infinite ease-out;
	animation: arrow 555ms infinite ease-out;
}

@-webkit-keyframes arrow {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	50% {
		-webkit-transform: translate(0, 10px);
		transform: translate(0, 10px);
	}

	100% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}
}

/* container 內文區塊 */

/* 手機及通用 */
@media screen and (max-width: 767px) {
	.container {
		width: 90%;
		/* margin: 0 auto 0 auto; */
	}

	.content {
		padding: 0;
	}
}

/* 電腦或大型平板的版型設定：769px～991px */
@media screen and (min-width: 769px) and (max-width: 991px) {
	.container {
		width: 880px;
		/* margin: 0 auto 0 auto; */
	}

	.content {
		padding: 0;
	}

}

/* ipad 直 */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {

	.container {
		max-width: 680px !important;
		/* margin: 0 15px 0 15px; */
		padding: 0;
	}

	.content {
		padding: 0;
	}

}


/* 寬螢幕 992px以上*/
@media screen and (min-width: 992px) {
	.container {
		width: 880px;
		/* margin: 0 auto 0 auto; */
	}

	.content {
		padding: 0;
	}
}

/* 桌機平板 */
/* @media screen and (min-width: 768px) {
	.container {
		width: 880px;
		margin: 0 auto 0 auto;
	}

	.content {
		padding:   0;
	}
} */


/* 內文段落 */

/**** 段落間距 高度 ****/

/* 手機 767px以下*/
@media screen and (max-width: 767px) {

	.spacing-small {
		width: 100%;
		height: 35px;
		margin-right: auto;
		margin-left: auto;
		/* float: left; */
	}

	.spacing-medium {
		width: 100%;
		height: 65px;
		margin-right: auto;
		margin-left: auto;
		/* float: left; */
	}

	.spacing-large {
		width: 100%;
		height: 130px;
		margin-right: auto;
		margin-left: auto;
		/* float: left; */
	}


}

/* 電腦或大型平板的版型設定：769px～*/
@media screen and (min-width: 768px) {

	.spacing-small {
		width: 100%;
		height: 35px;
		margin-right: auto;
		margin-left: auto;
		/* float: left; */

	}

	.spacing-medium {
		width: 100%;
		height: 100px;
		margin-right: auto;
		margin-left: auto;
		/* float: left; */

	}

	.spacing-large {
		width: 100%;
		height: 175px;
		margin-right: auto;
		margin-left: auto;
		/* float: left; */
	}

}

/*** 標題 ***/

/*** 手機 ***/
@media screen and (max-width: 767px) {

	h2 {
		letter-spacing: -2px;
		color: #3e3a39;
		font-size: 8vmin;
		font-weight: normal;
		margin-bottom: 35px;
		margin-top: 0px;
		padding: 0;
	}

	h2.calculation-title {
		color: #3e3a39;
		font-size: 2em;
		font-weight: bold;
		margin-bottom: 35px;
		margin-top: 0px;
		padding: 0;
	}

	h3 {
		color: #3e3a39;
		font-size: 6vmin;
		font-weight: bold;
		margin-bottom: 15px;
		margin-top: 0px;
		padding: 0;
	}

	h3.more-title {
		color: #29a8df;
		font-size: 23px;
		line-height: 25px;
		font-weight: normal;
		margin-bottom: 20px;
		margin-top: 0px;
		padding: 0;
	}

	.title_br {
		display: block;
	}

	/* .fix-text {
		font-size: 1.5rem;
		letter-spacing: -2.5px;
	} */
	/* .sub-text {
		font-size: 1.5rem;
	} */
	.part4-text {
		font-size: 48px;
	}

	.part4-text br:first-child {
		line-height: 1.1;
	}
}

/*** 小手機 ***/
@media screen and (max-width: 320px) {

	h2.calculation-title {
		color: #3e3a39;
		font-size: 1.5rem;
		font-weight: bold;
		margin-bottom: 35px;
		margin-top: 0px;
		padding: 0;
	}
}

/*** 桌機 ***/
@media screen and (min-width: 768px) {

	h2 {
		color: #3e3a39;
		font-size: 43px;
		font-weight: bold;
		line-height: 47px;
		margin-bottom: 35px;
		margin-top: 0px;
		padding: 0;
	}

	h2.calculation-title {
		color: #3e3a39;
		font-size: 43px;
		font-weight: bold;
		line-height: 47px;
		margin-bottom: 35px;
		margin-top: 0px;
		padding: 0;
	}

	h3 {
		color: #3e3a39;
		font-size: 23px;
		line-height: 25px;
		font-weight: bold;
		margin-bottom: 15px;
		margin-top: 0px;
		padding: 0;
	}

	h3.more-title {
		color: #29a8df;
		font-size: 23px;
		line-height: 25px;
		font-weight: normal;
		margin-bottom: 15px;
		margin-top: 0px;
		padding: 0;
	}

	.title_br {
		display: none;
	}

}

/*** 內文段落 ***/

/*** 手機 ***/
@media screen and (max-width: 767px) {

	p {
		font-size: 6vmin;
		font-weight: normal;
		line-height: 1.5em;
		word-wrap: break-word;
		text-align: justify;
		margin-bottom: 30px;
		margin-top: 0px;
		padding: 0;
		letter-spacing: -1px;
	}

	p.calculation-text {
		font-size: 1.25rem;
	}

	p a {
		color: #ff8000;
	}


	p a:hover {
		color: #e50011;
		text-decoration: none;
	}

}

/*** 桌機 ***/
@media screen and (min-width: 768px) {

	p {
		font-size: 23px;
		font-weight: normal;
		line-height: 1.5;
		word-wrap: break-word;
		text-align: justify;
		margin-bottom: 50px;
		margin-top: 0px;
		padding: 0;
		letter-spacing: -1px;
	}

	p a {
		color: #ff8000;
	}

	p a:hover {
		color: #e50011;
		text-decoration: none;
	}

}

/*** 重點  ***/

/*** 手機 ***/
@media screen and (max-width: 767px) {

	.point {
		font-size: 6vmin;
		color: #3e3a39;
		font-weight: normal;
		width: 100vw;
		height: auto;
		;
		margin: 0 auto;
		padding: 0;
		position: relative;
		/* max-width: 100vw; */
		margin-left: -20px;
		margin-right: -20px;
	}

	.point>ul {
		width: 100%;
		margin: 0 auto;
		padding: 0;
		list-style-type: none;
	}

	.point>ul>li {
		margin: 0 auto;
		padding-top: 0.4em;
		padding-bottom: 0.4em;
		padding-right: 1em;
		padding-left: 2em;
		list-style-type: none;
		height: auto;
		line-height: 1.3;
		width: 100%;
		text-indent: -1em;
	}

	.point>ul>li:nth-child(odd) {
		background-color: #e0e0e0;
	}

	.point>ul>li:nth-child(even) {
		background-color: #fff;
	}

	.point>ul>li:last-child {
		margin-bottom: 0;

	}

	.things {
		font-size: 23px;
		color: #3e3a39;
		font-weight: normal;
		width: 100%;
		height: auto;
		margin: 0 auto;
		padding: 0;
		position: relative;
	}

	.things>ul {
		width: 100%;
		margin: 0 auto;
		padding: 0;
		list-style-type: none;
	}

	.things>ul>li {
		margin: 0 auto;
		padding-top: 0.4em;
		padding-bottom: 0.4em;
		padding-left: 1em;
		padding-right: 0em;
		list-style-type: none;
		height: auto;
		min-height: 1.2em;
		line-height: 1.2;
		text-indent: -1em;
	}

	.things>ul>li:last-child {
		margin-bottom: 0;
		border-bottom: none;
	}

	.note {
		font-size: 5vmin;
		color: #3e3a39;
		font-weight: normal;
		width: 100%;
		height: auto;
		margin: 0 auto 0 auto;
		padding: 0;
		position: relative;
		display: flex;
		flex-flow: column;
	}

	.note>ul {
		width: auto;
		margin: 0;
		padding: 0;
		list-style-type: none;
	}

	.note>ul>li {
		margin: 0 auto;
		padding-top: 0;
		padding-bottom: 0.8em;
		padding-left: 2em;
		padding-right: 1em;
		list-style-type: none;
		height: auto;
		min-height: 1.2em;
		line-height: 1.2;
		text-indent: -1.5em;
	}

	.note_title {
		list-style-type: none;
		height: auto;
		min-height: 1.2em;
		line-height: 1.2;
		text-indent: -1.5em;
	}

	.note_red {
		width: 100%;
		padding: 15px;
		text-align: left;
		background-color: #e71c24;
		color: #fff;
		height: auto;
		font-size: 1em;
		line-height: 1.5;
	}

}


/*** 桌機 ***/
@media screen and (min-width: 768px) {

	.point {
		font-size: 1.5em;
		color: #3e3a39;
		font-weight: normal;
		width: 100%;
		height: auto;
		;
		margin: 0 auto;
		padding: 0;
		position: relative
	}

	.point>ul {
		width: 100%;
		margin: 0 auto;
		padding: 0;
		list-style-type: none;
	}

	.point>ul>li {
		margin: 0 auto;
		padding-top: 0.5em;
		padding-bottom: 0.5em;
		padding-left: 2em;
		padding-right: 2em;
		list-style-type: none;
		height: auto;
		min-height: 1.5em;
		line-height: 1.2;
		text-indent: -1.5em;
	}

	.point>ul>li:nth-child(even) {
		background-color: #e0e0e0;
	}

	.point>ul>li:last-child {
		margin-bottom: 0;

	}

	.things {
		font-size: 23px;
		color: #3e3a39;
		font-weight: normal;
		width: 100%;
		height: auto;
		margin: 0 auto;
		padding: 0;
		position: relative;
	}

	.things>ul {
		width: 100%;
		margin: 0;
		padding: 0;
		list-style-type: none;
	}

	.things>ul>li {
		margin: 0 auto;
		padding-top: 0.8em;
		padding-bottom: 0.8em;
		padding-left: 1.5em;
		padding-right: 2em;
		list-style-type: none;
		height: auto;
		min-height: 1.2em;
		line-height: 1.2;
		text-indent: -1.5em;
	}


	.things>ul>li:last-child {
		margin-bottom: 0;
		border-bottom: none;
	}

	.note {
		font-size: 23px;
		color: #3e3a39;
		font-weight: normal;
		width: 100%;
		height: auto;
		margin: 0 auto;
		padding: 0;
		position: relative;
		display: flex;
        align-items: flex-start;
	}

	.note>ul {
		width: auto;
		margin: 0;
		padding: 0;
		list-style-type: none;
	}

	.note>ul>li {
		margin: 0 auto;
		padding-top: 0;
		padding-bottom: 0.8em;
		padding-left: 2em;
		padding-right: 2em;
		list-style-type: none;
		height: auto;
		min-height: 1.2em;
		line-height: 1.2;
		text-indent: -1.5em;
	}

	.note_title {
		list-style-type: none;
		height: auto;
		min-height: 1.2em;
		line-height: 1.2;
		text-indent: -1.5em;
	}

	.note_red {
		text-align: center;
		background-color: #e71c24;
		color: #fff;
		height:2.5em;
		font-size: 1em;
		line-height: 2.5;
	}


}

/*** 延伸閱讀  ***/

/*** 手機 ***/
@media screen and (max-width: 767px) {

	.read-more {
		width: 100%;
		height: auto;
		border: 1px solid #000;
	}

	.more-photo {
		display: none;

	}

	.read-content img {
		display: none;
	}

	.read-content {
		font-size: 5.4vmin;
		display: flow-root;
		height: auto;
		min-height: 75px;
		padding: .5em .5em 0em .5em;
	}

	.see-more {
		color: #29a8df;
		font-weight: normal;
		width: auto;
		height: auto;
		margin-right: 10px;
		float: left;
		display: block;
		/* background-color: #a0efb7; */
		line-height: 1.2em;
	}

	.see-more:before {
		content: "\f100";
		font-family: FontAwesome;
	}


	.see-more:after {
		content: "\f101";
		font-family: FontAwesome;
	}

	.more-content {
		float: left;
		display: block;
		height: auto;
		width: 59%;
		line-height: 1.2em;
	}

	.read-more a {
		font-weight: 500;
		color: #3e3a39;
		width: 100%;
		display: flow-root;
		margin-bottom: 10px;
		height: auto;
		/* background-color: #ba7cd0; */
	}

	.read-more a:hover {
		color: #e50011;
	}

	.see-more:hover {
		color: #e50011;
	}
}



/*** 桌機 ***/
@media screen and (min-width: 768px) {

	.read-more {
		width: 100%;
		height: 92px;
		border: 1px solid #000;
	}

	.more-photo {
		float: left;

	}

	.read-content img {
		float: left;
	}

	.read-content {
		font-size: 1.4rem;
		display: flow-root;
		height: 90px;
		padding: 1em;
		float: left;
	}

	.see-more {
		color: #29a8df;
		font-weight: normal;
		width: auto;
		height: auto;
		margin-right: 15px;
		float: left;
		display: inline;
	}

	.see-more:before {
		content: "\f100";
		font-family: FontAwesome;
	}


	.see-more:after {
		content: "\f101";
		font-family: FontAwesome;
	}


	.more-content {
		float: left;
		display: block;
	}

	.read-more a {
		font-weight: 500;
		color: #3e3a39;
		width: 100%;
		display: block;
		height: 1em;
		margin-bottom: .4em;
	}

	.read-more a:hover {
		color: #e50011;
	}

	.see-more:hover {
		color: #e50011;
	}
}

/* ipad 直 */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {

	.read-content {
		font-size: 1.36rem;
		display: flow-root;
		height: 90px;
		padding: 1em;
	}
}


/*** 人物  ***/

/*** 手機 ***/
@media only screen and (max-width: 767px) {
	.photo img {
		max-width: 138px;
		border: 4px solid #c2ad94;
	}

	div.col-12 {
		margin-bottom: 20px;
	}

	div.col-12:nth-child(3) {
		margin-bottom: 0;
	}

	.people {
		width: 40%;
		float: left;
	}

	.people-desc {
		position: absolute;
		top: 50%;
		left: 48%;
	}

	.people-desc span {
		display: block;
		line-height: 1;
		font-size: 6.7vmin;
		margin-bottom: 10px;

	}
}


/*** 桌機 ***/
@media only screen and (min-width: 768px) {

	.people {
		float: left;
		margin-bottom: 5px;
		width: 100%;
		text-align: center;

	}

	.people-desc {
		font-family: "Noto Sans TC", sans-serif;
		font-weight: normal;
		color: #000;
		text-align: center;
		line-height: 2em;
	}

	.people-title {
		font-size: 30px;
		line-height: 1.5;
		/* margin-bottom: 15px; */
		display: block;
		float: left;
		text-align: center;
		width: 100%;
	}

	.people-name {
		font-size: 35px;
		line-height: 1.5;
		display: block;
		float: left;
		text-align: center;
		width: 100%;
	}

	.people img {
		max-width: 220px;
		border: 4px solid #c2ad94;
		border-image-width: 4px;
		/* border-style: solid;
		border-color: #c2ad9;
		border-width: 4px; */
	}
}


/*** 看更多  ***/

/*** 手機 ***/
@media screen and (max-width: 767px) {

	.link-more {
		color: #29a8df;
		font-size: 26px;
		font-weight: normal;
		width: auto;
		height: auto;
	}

	.link-more:before {
		content: "\f100";
		font-family: FontAwesome;
	}

	.link-more:after {
		content: "\f101";
		font-family: FontAwesome;
	}

	.more-list {
		width: 100%;
		height: auto;
		min-height: 70px;
		border: 1px solid #000;
		padding: 0 .5em .0 0;
		display: flex;
	}

	.link-photo {
		float: left;
	}

	.link-photo img {
		width: 120px;
		height: 90px;
	}


	.link-content img {
		float: left;
	}

	.list-title {
		font-size: .8em;
		display: block;
		color: #29a8df;
		font-weight: normal;
		line-height: 1.5em;
	}

	.list-content {
		float: left;
		display: block;
		font-size: .8em;
		line-height: 1.5em;
		text-align: left;
	}

	.link-content {
		font-size: 1.4rem;
		height: auto;
		padding: 0em 0em 0em .5em;
		align-items: center;
		display: flex;
	}

	.link-content a {
		font-weight: 500;
		color: #3e3a39;
		width: 100%;
		display: block;
		height: auto;
	}

	.link-content a:hover {
		color: #e50011;
	}


}

/*** 桌機 ***/
@media screen and (min-width: 768px) {

	.link-more {
		color: #29a8df;
		font-size: 26px;
		font-weight: normal;
		width: auto;
		height: auto;
	}

	.link-more:before {
		content: "\f100";
		font-family: FontAwesome;
	}

	.link-more:after {
		content: "\f101";
		font-family: FontAwesome;
	}

	.more-list {
		width: 100%;
		height: auto;
		border: 1px solid #000;
	}

	.link-photo {
		float: left;
	}

	.link-content img {
		float: left;
	}

	.list-title {
		font-size: 1.2em;
		display: block;
		color: #29a8df;
		font-weight: normal;
		height: 1em;
		margin-bottom: 5px;
	}

	.list-content {
		/* font-size: 1.5em; */
		float: left;
		display: block;
	}

	.link-content {
		font-size: 1.4rem;
		display: flex;
		height: 100%;
		padding: 1em;
		float: left;
		justify-content: center;
		flex-flow: column;
	}

	.link-content a {
		font-weight: 500;
		color: #3e3a39;
		width: 100%;
		display: block;
		height: auto;
	}

	.link-content a:hover {
		color: #e50011;
	}

}

/*** 表格樣式 ***/

.table-responsive {
	display: block;
	width: 100%;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}

.red_border1 {
	border-top-style: solid !important;
	border-left-style: solid !important;
	border-bottom-style: solid !important;

	border-top-width: 4px !important;
	border-left-width: 4px !important;
	border-bottom-width: 4px !important;

	border-top-color: #ff0000 !important;
	border-left-color: #ff0000 !important;
	border-bottom-color: #ff0000 !important;
}

.red_border2 {
	border-top-style: solid !important;
	border-right-style: solid !important;
	border-bottom-style: solid !important;

	border-top-width: 4px !important;
	border-right-width: 4px !important;
	border-bottom-width: 4px !important;

	border-top-color: #ff0000 !important;
	border-right-color: #ff0000 !important;
	border-bottom-color: #ff0000 !important;
}

/* 手機及通用 */
@media only screen and (max-width: 767px) {

	.table {
		border-top: 1px solid #9e9f9f;
		font-size: 6vmin;
	}

	.table td,
	.table th {
		padding: 0 5px;
		vertical-align: middle;
	}

	.table>thead>tr>th {
		border: 1px solid #9e9f9f;
		font-weight: normal;
		color: #3e3a39;
		text-align: left;
		font-size: 6vmin;
	}

	.gary {
		background-color: #e0e0e0;
	}

	.table>tbody>tr>td,
	.table>tbody>tr>th,
	.table>tfoot>tr>td,
	.table>tfoot>tr>th,
	.table>thead>tr>td {
		padding: 8px auto 8px 30px;
		line-height: 1.42857143;
		vertical-align: center;
		border: 1px solid #9e9f9f;
	}

	.city {
		width: 40%;
		vertical-align: middle;
	}

	.table th {
		line-height: 1.5;
		text-align: left !important;
	}

	.table td {}

	.table>tbody>tr>td.reach {
		width: 60%;
		vertical-align: middle;
	}

	.table>tbody>tr>td>ul {
		list-style-type: none;
		margin-left: 1.5em;
	}

	.table>tbody>tr>td>ul>li {
		list-style-type: none;
		text-indent: -1.5em;

	}

	.table>tbody>tr>td>li.reach-t {
		list-style-type: none;
		text-indent: 0em;
	}

	/* table1 */
	.table1 tr td:nth-child(n+2) {
		text-align: left !important;
	}

	.table1 tr:nth-child(3) td:nth-child(n+2) {
		line-height: auto;
	}

	/* table2 */

	th.first {
		width: 35%;
	}

	th.second {
		width: 45%;
		vertical-align: top !important;
	}

	th.third {
		width: 20%;
	}

	.table2 tr:nth-child(2) td {
		letter-spacing: -1px;
	}

	/* table3 */

	.table3 th,
	.table3 td:nth-child(n+2) {
		text-align: right !important;
	}
}

/* 電腦或大型平板的版型設定：769px～ */
@media screen and (min-width: 768px) {

	.table {
		width: 100%;
		font-size: 23px;
	}

	.table>thead>tr>th {
		border: 1px solid #9e9f9f;
		font-weight: normal;
		color: #3e3a39;
		text-align: left;
		font-size: 23px;
		line-height: 1.5;
	}

	.table thead th {
		vertical-align: top;
	}

	.gary {
		background-color: #e0e0e0;
	}

	.city {
		width: 40%;
		font-size: 23px;
	}

	.table>tbody>tr>td,
	.table>tbody>tr>th,
	.table>tfoot>tr>td,
	.table>tfoot>tr>th,
	.table>thead>tr>td {
		padding-top: 8px;
		padding-left: auto;
		padding-bottom: 8px;
		padding-right: auto;
		line-height: 1.42857143;
		vertical-align: top;
		border: 1px solid #9e9f9f;
	}


	.table th {}

	.table td {}


	.table>tbody>tr>td.reach {
		font-size: 23px;
		vertical-align: middle;
		width: 60%;

	}


	.table>tbody>tr>td>ul {
		list-style-type: none;
		margin-left: 1.5em;
	}

	.table>tbody>tr>td>ul>li {
		list-style-type: none;
		text-indent: -1.5em;
	}

	.table>tbody>tr>td>li.reach-t {
		list-style-type: none;
		text-indent: 0em;
	}

}

/* footer */

/* 手機 */
@media screen and (max-width: 767px) {
	.footer {
		width: 100%;
		height: auto;
		text-align: left;
		padding-top: 10px;
		padding-bottom: 10px;
		background-color: #000000;
		color: #FFFFFF;
		font-size: 12px;
		line-height: 30px;
		position: relative;
		z-index: 10;
		display: none;
	}

	.footer .team_info {
		padding: 0;
		padding-left: 5%;
	}

	.footer a {
		color: #FFFFFF;
		text-decoration: none;
		margin: 0 0 0 5%;
	}

	.footer a:nth-child(3) {
		margin: 0;
	}

	.footer a:hover {
		text-decoration: underline;
	}

	.footer2 {
		width: 100%;
		height: auto;
		text-align: left;
		padding-top: 10px;
		padding-bottom: 10px;
		background-color: #000000;
		color: #FFFFFF;
		font-size: 12px;
		line-height: 30px;
		position: relative;
		z-index: 10;
	}

	.footer2 .team_info {
		padding: 0;
		padding-left: 5%;
	}

	.footer2 a {
		color: #FFFFFF;
		text-decoration: none;
		margin: 0 0 0 5%;
	}

	.footer2 a:nth-child(3) {
		margin: 0;
	}

	.footer2 a:hover {
		text-decoration: underline;
	}

}

/* 電腦或大型平板的版型設定：769px～991px */
@media screen and (min-width: 767px) {
	.footer {
		width: 100%;
		height: auto;
		text-align: center;
		padding-top: 10px;
		padding-bottom: 10px;
		background-color: #000000;
		color: #FFFFFF;
		font-size: 12px;
		line-height: 30px;
		position: relative;
		z-index: 10;
		display: none;
	}

	.footer .team_info {
		text-align: center;
	}

	.footer a {
		color: #FFFFFF;
		text-decoration: none;
	}

	.footer a:hover {
		text-decoration: underline;
	}

	.footer2 {
		width: 100%;
		height: auto;
		text-align: center;
		padding-top: 10px;
		padding-bottom: 10px;
		background-color: #000000;
		color: #FFFFFF;
		font-size: 12px;
		line-height: 30px;
		position: relative;
		z-index: 10;
	}

	.footer2 .team_info {
		text-align: center;
	}

	.footer2 a {
		color: #FFFFFF;
		text-decoration: none;
	}

	.footer2 a:hover {
		text-decoration: underline;
	}

}

/* 回到TOP按鈕 */
#toTop, #toTop2 {
	display: none;
	text-decoration: none;
	position: fixed;
	bottom: 14px;
	right: 3%;
	overflow: hidden;
	width: 48px;
	height: 48px;
	border: none;
	text-indent: 100%;
	background: url("../img/to-top.png") no-repeat 0px 0px;
	z-index: 999;
}

#toTopHover, #toTopHover2 {
	width: 48px;
	height: 48px;
	display: block;
	overflow: hidden;
	float: right;
	opacity: 0;
	-moz-opacity: 0;
	filter: alpha(opacity=0);
}

/* 立即試算 按鈕 */

.action {
	width: 48px;
	height: 48px;
	position: fixed;
	bottom: 70px;
	right: 3%;
	z-index: 9999;
}

/* 圖表 */


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

	.chart {
		width: 100%;
		height: 475px;
		position: relative;
	}

	.chart-bg {
		width: 100%;
		height: auto;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		opacity: 0;
		animation: .5s bg .5s ease-out;
		-webkit-animation: .5s bg .5s ease-out;
		-moz-animation: .5s bg .5s ease-out;
		-o-animation: .5s bg .5s ease-out;
	}

	.bg-show {
		opacity: 1;
		opacity: 1;
		transition: opacity 1s;
	}

	.chart-line {
		width: 100%;
		height: auto;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		opacity: 0;
		-webkit-animation: lineshow 500ms;
		-webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
		clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
		transition: 1.5s, width 1s;
		-webkit-transition: 1.5s, width 1s;
		-moz-transition: 1.5s, width 1s;
		-ms-transition: 1.5s, width 1s;
	}


	.line-show {
		opacity: 1;
		-webkit-animation: lineshow 1.5s;
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
		transition: 1.5s, width 1s;
		-webkit-transition: 1.5s, width 1s;
		-moz-transition: 1.5s, width 1s;
		-ms-transition: 1.5s, width 1s;
	}

	.chart-num0 {
		width: 100%;
		height: auto;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 3;
		opacity: 0;
	}

	.chart-num {
		width: 100%;
		height: auto;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 3;
		opacity: 0;
	}

	.num-show0 {
		opacity: 1;
		transition: opacity 1s;
		transition-delay: .2s;
		-moz-transition-delay: .2s;
		/* Firefox 4 */
		-webkit-transition-delay: .2s;
		/* Safari 和 Chrome */
		-o-transition-delay: .2s;
		/* Opera */
	}

	.num-show {
		opacity: 1;
		transition: opacity 1s;
		transition-delay: .5s;
		-moz-transition-delay: .5s;
		/* Firefox 4 */
		-webkit-transition-delay: .5s;
		/* Safari 和 Chrome */
		-o-transition-delay: .5s;
		/* Opera */
	}

}

@media screen and (max-width: 480px) {
	.chart {
		width: 100%;
		height: 300px;
		position: relative;
	}
}



@media screen and (min-width: 768px) {

	.chart {
		width: 100%;
		height: 765px;
		position: relative;
	}

	.chart-bg {
		width: 100%;
		height: auto;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		opacity: 0;
		animation: .5s bg .5s ease-out;
		-webkit-animation: .5s bg .5s ease-out;
		-moz-animation: .5s bg .5s ease-out;
		-o-animation: .5s bg .5s ease-out;
	}

	.bg-show {
		opacity: 1;
		opacity: 1;
		transition: opacity 1s;
	}

	.chart-line {
		width: 100%;
		height: auto;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		opacity: 0;
		-webkit-animation: lineshow 500ms;
		-webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
		clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
		transition: 1.5s, width 1s;
		-webkit-transition: 1.5s, width 1s;
		-moz-transition: 1.5s, width 1s;
		-ms-transition: 1.5s, width 1s;
	}


	.line-show {
		opacity: 1;

		animation: lineshow 1.5s infinite;
		/*IE*/
		-moz-animation: lineshow 1.5s infinite;
		/*FireFox*/
		-webkit-animation: lineshow 1.5s infinite;
		/*Chrome, Safari*/
		-ms-animation: lineshow 1.5s infinite;
		/*Chrome, Safari*/

		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
		-moz-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
		-ms-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);

		transition: 1.5s, width 1s;
		-webkit-transition: 1.5s, width 1s;
		-moz-transition: 1.5s, width 1s;
		-ms-transition: 1.5s, width 1s;
	}

	.chart-num0 {
		width: 100%;
		height: auto;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 3;
		opacity: 0;
	}

	.chart-num {
		width: 100%;
		height: auto;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 3;
		opacity: 0;
	}

	.num-show0 {
		opacity: 1;
		transition: opacity 1s;
		transition-delay: .2s;
		-moz-transition-delay: .2s;
		/* Firefox 4 */
		-webkit-transition-delay: .2s;
		/* Safari 和 Chrome */
		-o-transition-delay: .2s;
		/* Opera */
	}

	.num-show {
		opacity: 1;
		transition: opacity 1s;
		transition-delay: .5s;
		-moz-transition-delay: .5s;
		/* Firefox 4 */
		-webkit-transition-delay: .5s;
		/* Safari 和 Chrome */
		-o-transition-delay: .5s;
		/* Opera */
	}

}

@keyframes bg {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}


/* @keyframes numshow {
	0%   {opacity: 0;}
	100% {opacity: 1;}
	} */


@keyframes lineshow {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-moz-keyframes lineshow

/* Firefox */
	{
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-webkit-keyframes lineshow

/* Safari 和 Chrome */
	{
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-o-keyframes lineshow

/* Opera */
	{
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}


/* 浮動Scroll down提示*/

.hero__scroll img {
	display: inline-block;
}

.hero__scroll .chevron {
	margin-top: 5%;
	display: block;
	-webkit-animation: pulse 2s infinite;
	animation: pulse 2s infinite;
	color: #FFF;

}

/* ipad 直 */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {

	.hero__scroll {
		width: 70px;
		height: 70px;
		margin: 0 auto;
		text-align: center;
		color: #FFF;
		position: absolute;
		bottom: 24vh;
		left: 45%;
		cursor: pointer;
		z-index: 99;
	}


	.hero__scroll .chevron {
		margin-top: 5%;
		display: block;
		-webkit-animation: pulse 2s infinite;
		animation: pulse 2s infinite;
		color: #FFF;
	}

	.chevron::before {
		border-style: solid;
		border-width: 0.25em 0.25em 0 0;
		content: '';
		display: inline-block;
		height: 50px;
		position: relative;
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
		vertical-align: top;
		width: 50px;
	}

	.chevron.bottom:before {
		top: 0;
		-webkit-transform: rotate(135deg);
		-ms-transform: rotate(135deg);
		transform: rotate(135deg);
	}

}


/* 電腦或大型平板的版型設定：1280px~ */
@media screen and (min-width: 769px) {

	.hero__scroll {
		display: block;
	}

	.hero__scroll {
		width: 70px;
		height: 70px;
		margin: 0 auto;
		text-align: center;
		color: #FFF;
		position: absolute;
		bottom: 50px;
		left: 50%;
		cursor: pointer;
		z-index: 99;
		transform: translate(-50%, -50%);
	}


	.hero__scroll img {
		width: auto;
		height: 60px;
	}

	.hero__scroll .chevron {
		margin-top: 5%;
		display: block;
		-webkit-animation: pulse 2s infinite;
		animation: pulse 2s infinite;
		color: #FFF;
	}

	.chevron::before {
		border-style: solid;
		border-width: 0.25em 0.25em 0 0;
		content: '';
		display: inline-block;
		height: 50px;
		position: relative;
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
		vertical-align: top;
		width: 50px;
	}

	.chevron.bottom:before {
		top: 0;
		-webkit-transform: rotate(135deg);
		-ms-transform: rotate(135deg);
		transform: rotate(135deg);
	}

}

/* ipad pro  直 */
@media all and (device-width: 1024px) and (device-height: 1366px) and (orientation:portrait) {

	.hero__scroll {
		width: 70px;
		height: 70px;
		margin: 0 auto;
		text-align: center;
		color: #FFF;
		position: absolute;
		bottom: 24vh;
		left: 45%;
		cursor: pointer;
		z-index: 99;

	}


	.hero__scroll .chevron {
		margin-top: 5%;
		display: block;
		-webkit-animation: pulse 2s infinite;
		animation: pulse 2s infinite;
		color: #FFF;
	}


	.chevron::before {
		border-style: solid;
		border-width: 0.25em 0.25em 0 0;
		content: '';
		display: inline-block;
		height: 50px;
		position: relative;
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
		vertical-align: top;
		width: 50px;
	}

	.chevron.bottom:before {
		top: 0;
		-webkit-transform: rotate(135deg);
		-ms-transform: rotate(135deg);
		transform: rotate(135deg);
	}

}

/* 手機 */
@media screen and (max-width: 767px) {

	.hero__scroll {
		width: 90%;
		margin: 0 auto;
		text-align: center;
		color: #FFF;
		position: absolute;
		bottom: 17vh;
		left: 5%;
		z-index: 99;

	}

	.chevron::before {
		border-style: solid;
		border-width: 0.25em 0.25em 0 0;
		content: '';
		display: inline-block;
		height: 25px;
		position: relative;
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
		vertical-align: top;
		width: 25px;
	}

	.chevron.bottom:before {
		top: 0;
		-webkit-transform: rotate(135deg);
		-ms-transform: rotate(135deg);
		transform: rotate(135deg);
	}

}

@-webkit-keyframes pulse {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	50% {
		-webkit-transform: translate(0, 10px);
		transform: translate(0, 10px);
	}

	100% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}
}

@keyframes pulse {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	50% {
		-webkit-transform: translate(0, 10px);
		transform: translate(0, 10px);
	}

	100% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}
}

/* 文末團隊署名*/

/* 電腦或大型平板的版型設定：769px～960px */
@media only screen and (min-width: 768px) {

	.team_info {
		font-size: 18px;
		line-height: 22px;
		margin-top: 0px;
		margin-bottom: 0px;
		/* padding-left: -15px;
	  padding-right: -15px;*/
	}

}

/* 手機及通用 */
@media only screen and (max-width: 768px) {
	.team_info {
		font-size: 18px;
		line-height: 22px;
		margin-top: 0px;
		margin-bottom: 0px;
	}

}

.topic-title.part5 {
	float: none;
	height: 15%;
}

.section-common {
	position: relative;
	height: 680px;
	padding: 85px 0 0 65px;
	margin-bottom: 10px;
	overflow: hidden;
}

.cover img {
	display: block;
	width: auto;
	position: absolute;
	right: 0;
	bottom: 0;
	transition: transform .3s linear;
}

.section-common:hover .cover img {
	transform: scale(1.05);
}

.section1 {
	background-color: #AEAEAE;
}

.section2 {
	background-color: #D0A972;
}

.section3 {
	background-color: #839EB3;
}

.title {
	position: absolute;
	top: 180px;
	font-size: 60px;
	line-height: 1.2;
	opacity: 0;
	transition: opacity .4s linear;
}

.title.opacity,
.name.opacity,
.more.opacity {
	opacity: 1;
}

.name {
	color: #333;
	font-size: 40px;
	position: absolute;
	z-index: 1;
	bottom: 230px;
	opacity: 0;
	transition: opacity .8s linear;
}

.name span {
	font-size: 30px;

}

.name span:before {
	content: "/";
	font-size: 36px;
	margin: 0 10px;
}

.more {
	position: absolute;
	bottom: 55px;
	opacity: 0;
	transition: opacity .8s linear;
}

.more span:before {
	content: "";
}

.more p {
	font-size: 30px;
	letter-spacing: 1px;
	color: #000;
}

.more span {
	color: red;
	font-size: 30px;
}

.mobile-only {
	display: none;
}

@media screen and (max-width:767px) {
	.section-common {
		height: 250px;
		margin-bottom: 0;
		padding: 0;
	}

	.section2 .cover img {
		right: -10%;
	}

	.cover img {
		width: 140%;
	}

	.topic-title.part5 {
		width: 40%;
		position: absolute;
		left: 25px;
		top: 25px;
	}

	.title {
		top: 80px;
		left: 25px;
		font-size: 24px;
		color: #fff;
	}

	.name {
		padding-left: 25px;
		width: 100%;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .6);
		color: white;
		line-height: 1.5;
		font-size: 20px;
		margin: 0;
	}

	.name span {
		font-size: 16px;
	}

	.name span:before {
		font-size: 20px;
		margin: 0 5px;
	}

	.more {
		left: 25px;
		bottom: 45px;
	}

	.more p {
		font-size: 18px;
		width: auto;
		background-color: transparent;
		color: black;
		margin-bottom: 0;
	}

	.more span {
		font-size: 20px;
	}

	.desktop-only {
		display: none;
	}

	.mobile-only {
		display: block;
	}
}

/***** 封面video ******/
/* 桌機 */
@media screen and (min-width: 768px) {
	#cover_video {
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		position: relative;
		width: 100%;
		height: 100vh;
		overflow: hidden;
	}

	.center {
		-webkit-box-pack: center;
		-ms-flex-pack: end;
		justify-content: center;
		align-items: center;
	}

	#myVideo {
		position: relative;
		top: -8px;
		left: 0;
		width: 100%;
		height: 100%
	}

	video#myVideo {
		min-width: 100%;
		min-height: 100%;
		width: auto;
		height: auto;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}

/* 手機 */
@media screen and (max-width: 767px) {

	#cover_video {
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		position: relative;
		padding-bottom: 54.5%;
		width: 100%;
	}

	video#myVideo {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}


	.myBtn {
		font-size: 12px;
		padding: 20px 10px;
		border: none;
		background-color: rgba(255, 255, 255, 0.7);
		color: #000;
		cursor: pointer;
		display: flex;
		z-index: 999;
		padding: 14px 26px 14px 30px;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 5px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	/* .myBtn:after {
		content: "";
		display: block;
		border-style: solid;
		border-color: transparent transparent transparent #111;
		border-width: 14px 0 14px 24px;
	} */

	#cover_video h1 {
		display: none;
	}

}

/*桌機*/
@media screen and (min-width: 768px) {
	.myBtn {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 180px;
		height: 180px;
		background: transparent;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
		-webkit-transition: background .3s ease-in-out;
		-o-transition: .3s background ease-in-out;
		-moz-transition: .3s background ease-in-out;
		transition: background .3s ease-in-out;
		border: solid 1px #ffffff;
		z-index: 1;
	}

	/* .myBtn:after {
		content: "";
		display: block;
		border-style: solid;
		border-color: transparent transparent transparent #111;
		border-width: 28px 0 28px 44px;
	} */

	.myBtn_play {
		position: absolute;
		background-color: #FFFFFF;
		top: 30%;
		left: 30%;
	}
	.myBtn_play:before,
	.myBtn_play:after {
		content: '';
		position: absolute;
		background-color: inherit;	
	}

	.myBtn_play,
	.myBtn_play:before,
	.myBtn_play:after {
		width:  3em;
		height: 3em;
		border-top-right-radius: 30%;
	}
	
	.myBtn_play {
		transform: rotate(-90deg) skewX(-30deg) scale(1,.866);
	}
	.myBtn_play:before {
		transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-100%);
	}
	.myBtn_play:after {
		transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(100%,50%);
	}


	#cover_video h1 {
		font-size: 67px;
		color: #ffffff;
		text-shadow: 0 3px 7px rgba(0, 0, 0, .4);
		/* top: 65%;  */
		width: auto;
		position: relative;
		margin-top: 200px;
		z-index: 999;
	}




}

#status {
	opacity: 0;
}

	.infinite-container {
		max-width: 100vw;

	}

	article.content {

	}

/* CSS loader spinner */

.page-load-status {
	display: none; /* hidden by default */
	padding-top: 20px;
	padding-bottom: 20px;

	/* border-top: 1px solid #DDD; */
	text-align: center;
	color: #777;
	background-color:#000 ;
  }

.scroller-status{
	/* padding-top: 50px;
	padding-bottom: 50px;
	display: block; */
	height: 100px;
}

.loader-wheel {
	font-size: 64px; /* change size here */
	position: relative;
	height: 1em;
	width: 1em;
	padding-left: 0.45em;
	overflow: hidden;
	margin: 0 auto;
	animation: loader-wheel-rotate 0.5s steps(12) infinite;
  }
  
  .loader-wheel i {
	display: block;
	position: absolute;
	height: 0.3em;
	width: 0.1em;
	border-radius: 0.05em;
	background: #333; /* change color here */
	opacity: 0.8;
	transform: rotate(-30deg);
	transform-origin: center 0.5em;
  }
  
  @keyframes loader-wheel-rotate {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
  }


  .main .js-fadeIn {
	-ms-filter: "alpha(opacity=0)";
	opacity: 0;
	transition: all 0.9s linear;
	-webkit-transition: all 0.9s linear;
	-moz-transition: all 0.9s linear;
	-o-transition: all 0.9s linear;
	-ms-transition: all 0.9s linear;
  }
  
  .main .js-fadeIn.fadeIn {
	-ms-filter: "alpha(opacity=100)";
	opacity: 1;
  }

  .loader-ellips {
	font-size: 20px; /* change size here */
	position: relative;
	width: 4em;
	height: 1em;
	margin: 10px auto;
	display: block;
	/* padding-bottom: 50px;
	padding-top: 50px; */
  }
  
  .loader-ellips__dot {
	display: block;
	width: 1em;
	height: 1em;
	border-radius: 0.5em;
	background: #555; /* change color here */
	position: absolute;
	animation-duration: 0.5s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
  }
  
  .loader-ellips__dot:nth-child(1),
  .loader-ellips__dot:nth-child(2) {
	left: 0;
  }
  .loader-ellips__dot:nth-child(3) { left: 1.5em; }
  .loader-ellips__dot:nth-child(4) { left: 3em; }
  
  @keyframes reveal {
	from { transform: scale(0.001); }
	to { transform: scale(1); }
  }
  
  @keyframes slide {
	to { transform: translateX(1.5em) }
  }
  
  .loader-ellips__dot:nth-child(1) {
	animation-name: reveal;
  }
  
  .loader-ellips__dot:nth-child(2),
  .loader-ellips__dot:nth-child(3) {
	animation-name: slide;
  }
  
  .loader-ellips__dot:nth-child(4) {
	animation-name: reveal;
	animation-direction: reverse;
  }

/* page4 style */


.topic-title.part5 {
	float: none;
	height: 15%;
}

.section-common {
	position: relative;
	height: 680px;
	padding: 85px 0 0 65px;
	margin-bottom: 10px;
	overflow: hidden;
	width: 100vw;
}

.cover img {
	display: block;
	width: auto;
	position: absolute;
	right: 0;
	bottom: 0;
	transition: transform .3s linear;
}

.section-common:hover .cover img {
	transform: scale(1.05);
}

.section1 {
	background-color: #AEAEAE;
}

.section2 {
	background-color: #D0A972;
}

.section3 {
	background-color: #839EB3;
}

.title {
	position: absolute;
	top: 180px;
	font-size: 60px;
	line-height: 1.2;
	opacity: 0;
	transition: opacity .4s linear;
}

.title.opacity,
.name.opacity,
.more.opacity {
	opacity: 1;
}

.name {
	color: #333;
	font-size: 40px;
	position: absolute;
	z-index: 1;
	bottom: 230px;
	opacity: 0;
	transition: opacity .8s linear;
}

.name span {
	font-size: 30px;

}

.name span:before {
	content: "/";
	font-size: 36px;
	margin: 0 10px;
}

.more {
	position: absolute;
	bottom: 55px;
	opacity: 0;
	transition: opacity .8s linear;
}

.more span:before {
	content: "";
}

.more p {
	font-size: 30px;
	letter-spacing: 1px;
	color: #000;
}

.more span {
	color: red;
	font-size: 30px;
}

.mobile-only {
	display: none;
}

@media screen and (max-width:767px) {
	.section-common {
		height: 250px;
		margin-bottom: 0;
		padding: 0;
	}

	.section2 .cover img {
		right: -10%;
	}

	.cover img {
		width: 140%;
	}

	.topic-title.part5 {
		width: 40%;
		position: absolute;
		left: 25px;
		top: 25px;
	}

	.title {
		top: 80px;
		left: 25px;
		font-size: 24px;
		color: #fff;
	}

	.name {
		padding-left: 25px;
		width: 100%;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .6);
		color: white;
		line-height: 1.5;
		font-size: 20px;
		margin: 0;
	}

	.name span {
		font-size: 16px;
	}

	.name span:before {
		font-size: 20px;
		margin: 0 5px;
	}

	.more {
		left: 25px;
		bottom: 45px;
	}

	.more p {
		font-size: 18px;
		width: auto;
		background-color: transparent;
		color: black;
		margin-bottom: 0;
	}

	.more span {
		font-size: 20px;
	}

	.desktop-only {
		display: none;
	}

	.mobile-only {
		display: block;
	}
}

/* page1 style */

.post {
	/* border-top: 1px solid #DDD;
	margin: 60px 0; */
  }
  

  @keyframes scroll {
	0% {
	  transform: translate(-100%, 0);
	}
	100% {
	  transform: translate(0, 0);
	}
  }




/* 往下滑 */

  .more_load, .more_load2 {
	width: 300px;
    height: auto;
    background: #e0e0e0;
    display: flex;
    position: fixed;
    justify-content: space-between;
    flex-direction: row;
    align-items: stretch;
    padding: 10px;
    opacity: 0;
    bottom: 130px;
    right: 58px;
    z-index: 3;
}

.more_load_show {
/* duration動畫時間 | timing-function速度曲線 | delay延遲時間 | iteration-count次數 | direction是否輪流播放 | fill-mode停止狀態 | play-state | name名稱 */
	-webkit-animation: .3s ease-out 0s 1 forwards fadeIn;
	   -moz-animation: .3s ease-out 0s 1 forwards fadeIn;
	     -o-animation: .3s ease-out 0s 1 forwards fadeIn;
	        animation: .3s ease-out 0s 1 forwards fadeIn;
}

@-webkit-keyframes fadeIn { from { opacity:0; } to {opacity: 1;} }
@-moz-keyframes fadeIn { from { opacity:0; } to {opacity: 1;} }
@keyframes fadeIn { from { opacity:0; } to {opacity: 1;} }


/* 捲動觸發CSS動畫 */

.load_pic, .load_pic2 {
	position: relative; 
	width: 120px;
	/* opacity: 0; */
}

.load_pic_show {
/* duration動畫時間 | timing-function速度曲線 | delay延遲時間 | iteration-count次數 | direction是否輪流播放 | fill-mode停止狀態 | play-state | name名稱 */
-webkit-animation: .6s ease-out 0s 1 forwards fadeIn_pic;
   -moz-animation: .6s ease-out 0s 1 forwards fadeIn_pic;
	 -o-animation: .6s ease-out 0s 1 forwards fadeIn_pic;
		animation: .6s ease-out 0s 1 forwards fadeIn_pic;
}

@-webkit-keyframes fadeIn_pic { from { opacity:0; } to {opacity: 1;} }
@-moz-keyframes fadeIn_pic { from { opacity:0; } to {opacity: 1;} }
@keyframes fadeIn_pic { from { opacity:0; } to {opacity: 1;} }

.load_title, .load_title2  {
    width: auto;
	display: flex;
	position: relative;
	padding-bottom: 9px;
	align-items: flex-end;
	/* opacity: 0; */
	padding-left: .5em;
}

.load_title_show {
/* duration動畫時間 | timing-function速度曲線 | delay延遲時間 | iteration-count次數 | direction是否輪流播放 | fill-mode停止狀態 | play-state | name名稱 */
-webkit-animation: .8s ease-out 0s 1 forwards MoveToRight;
   -moz-animation: .8s ease-out 0s 1 forwards MoveToRight;
	 -o-animation: .8s ease-out 0s 1 forwards MoveToRight;
		animation: .8s ease-out 0s 1 forwards MoveToRight;
}

.title_text {
    font-size: 21px;
    color: #000;
    line-height: 1.2;
}


@keyframes MoveToRight {
	from {
		 left: -15px;
		 opacity: 0;
	 }
    to {
		 left: 5px;
		 opacity: 1;
	}
}


.more_load_m, .more_load2_m {
	width: 100%;
    height: auto;
    background: #e0e0e0;
    display: flex;
    /* position: fixed; */
    justify-content: space-between;
    flex-direction: row;
    align-items: stretch;
    padding: 10px;
	opacity: 0;
      /*bottom: 130px;
    right: 58px; */
	z-index: 3;
	position: fixed;
    right: 0px;
    bottom: 120px;
}

.more_load_show_m {
	/* duration動畫時間 | timing-function速度曲線 | delay延遲時間 | iteration-count次數 | direction是否輪流播放 | fill-mode停止狀態 | play-state | name名稱 */
		-webkit-animation: 1s ease-out 0s 1 forwards fadeIn;
		   -moz-animation: 1s ease-out 0s 1 forwards fadeIn;
			 -o-animation: 1s ease-out 0s 1 forwards fadeIn;
				animation: 1s ease-out 0s 1 forwards fadeIn;
	}
	
	@-webkit-keyframes fadeIn { from { opacity:0; } to {opacity: 1;} }
	@-moz-keyframes fadeIn { from { opacity:0; } to {opacity: 1;} }
	@keyframes fadeIn { from { opacity:0; } to {opacity: 1;} }


.load_pic_m, .load_pic2_m {
	/* position: relative;  */
	width: 93px;
	height: 70px;
	/* opacity: 0; */
	display: flex;

}

.load_title_m, .load_title2_m  {
    width: auto;
	display: flex;
	position: relative;
	padding-bottom: 9px;
	align-items: flex-end;
	/* opacity: 0; */
	padding-left: .5em;
}

.title_text_m {
    font-size: 21px;
    color: #000;
    line-height: 1.2;
}


/* 主視覺雪碧圖 */
.sprite_part1, .sprite_part2, .sprite_part3 {
	width: 100vw;
    height: 100vh;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
	align-items: end;
	z-index: 1;
	position: relative;
}

.sprite_show_part1 {
  	background-repeat: no-repeat;
	background-size: 1000vw auto;
    background-position: 50% 0;
	background-image: url(../img/sprite_part1.jpg);
	animation: frame 1800ms steps(1,end) forwards 1;
}

.sprite_part2 {
  background-repeat: no-repeat;
  background-size: calc(100% - 0px);
  background-position: 50% 0;
  background-image: url(../img/kv-part2-cover.jpg);
  opacity: 1;
  transition: 1s opacity 0s;
}

.sprite_show_part3 {
  background-repeat: no-repeat;
  background-size: 1000vw auto;
  background-position: 50% 0;
  background-image: url(../img/sprite_part3.jpg);
  animation: frame 1800ms steps(1,end) forwards 1;
}

/* 特殊尺寸 */


/* ipad pro 橫 */
@media all and (device-width: 1366px) and (device-height: 1024px) and (orientation:landscape) {

	.sprite_part2  {
		width: 100vw;
		height: calc(80vh - 0px);
		background-color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: end;
		z-index: 1;
	}
}


@media screen and (max-width: 1280px) and (min-width: 992px) {
	.sprite_part2  {
		width: 100vw;
		height: calc(80vh - 0px);
		background-color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: end;
		z-index: 1;
	}
}

@media screen and (max-width: 991px) and (min-width: 768px) {
	.sprite_part2  {
		width: 100vw;
		height: calc(80vh - 0px);
		background-color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: end;
		z-index: 1;
	}
}

/* ipad 直 */
@media all 
and (device-width: 768px) 
and (device-height: 1024px) 
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation:portrait) {
	.sprite_part1, .sprite_part2, .sprite_part3 {
		width: 100vw;
		height: 45vh;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: end;
		z-index: 1;
	}
}

/* ipad pro 直 */
@media all
  and (min-device-width: 1024px) 
  and (max-device-height: 1366px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
	.sprite_part1, .sprite_part2, .sprite_part3 {
		width: 100vw;
		height: 45vh;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: end;
		z-index: 1;
	}
}



@keyframes frame {
      0% {background-position: 0 0;opacity: 0;}
     10% {background-position: 0 0;opacity: 0.1;}
     20% {background-position: -100vw 0;opacity: 0.2;}
     30% {background-position: -200vw 0;opacity: 0.3;}
     40% {background-position: -300vw 0;opacity: 0.4;}
     50% {background-position: -400vw 0;opacity: 0.5;}
     60% {background-position: -500vw 0;opacity: 0.6;}
     70% {background-position: -600vw 0;opacity: 0.7;}
	 80% {background-position: -700vw 0;opacity: 0.8;}
	 90% {background-position: -800vw 0;opacity: 0.9;}
    100% {background-position: -900vw 0;opacity: 1;}
}



/* youtube List */

/*超寬螢幕*/
@media screen and (min-width: 1281px) {

	.yt_list{
		width: 765px;
		height: auto;
		margin-bottom: 15px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-flow: row;
        padding: 15px;
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.8+30,1+100 */
		background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 30%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 30%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 30%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
	}

	.yt_list_pic{
		width: 46%;
		height: auto;
		position: relative;
	}

	.play-button {
		position: absolute;
		width: 72px;
		height: 72px;
		top: 40%;
		left: 46%;
		background: transparent;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
		-webkit-transition: background .3s ease-in-out;
		-o-transition: .3s background ease-in-out;
		-moz-transition: .3s background ease-in-out;
		transition: background .3s ease-in-out;
		transform: translate(-50%,-50%);
		border: solid 1px #ffffff;
	}

	.triangle {
		position: absolute;
		background-color: white;
		top: 35%;
		left: 35%;
	}
	.triangle:before,
	.triangle:after {
		content: '';
		position: absolute;
		background-color: inherit;
	}

	.triangle,
	.triangle:before,
	.triangle:after {
		width:  1em;
		height: 1em;
		border-top-right-radius: 30%;
	}
	
	.triangle {
		transform: rotate(-90deg) skewX(-30deg) scale(1,.866);
	}
	.triangle:before {
		transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
	}
	.triangle:after {
		transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
	}

	.yt_list_info{
		width: 98%;
		height: auto;
		padding-left: 2%;
		display: flex;
		flex-flow: column;
		align-self: flex-end;
	}

	.yt_list_name{
		width: 100%;
		height: 42px;
		float: left;
		font-size: 22px;
		color: #ffffff;
        margin-bottom: 1em;
	}

	.yt_list_txt{
		width: 100%;
		height: auto;
		float: left;
		font-size: 26px;
		line-height: 1.5em;
		color: #ffffff;
	}

}

/*** 桌機 ***/
@media screen and (min-width: 1024px) and (max-width: 1280px) {

	.yt_list{
		width: 99%;
		margin: auto 1%;
		height: auto;
		margin-bottom: 15px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-flow: row;
		padding-top: 15px;
		padding-bottom: 15px;
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.8+30,1+100 */
		background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 30%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 30%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 30%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
	}

	.yt_list_pic{
		width: 46%;
		height: auto;
		position: relative;
	}

	.play-button {
		position: absolute;
		width: 72px;
		height: 72px;
		top: 40%;
		left: 46%;
		background: transparent;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
		-webkit-transition: background .3s ease-in-out;
		-o-transition: .3s background ease-in-out;
		-moz-transition: .3s background ease-in-out;
		transition: background .3s ease-in-out;
		transform: translate(-50%,-50%);
		border: solid 1px #ffffff;
	}

	.triangle {
		position: absolute;
		background-color: white;
		top: 35%;
		left: 35%;
	}
	.triangle:before,
	.triangle:after {
		content: '';
		position: absolute;
		background-color: inherit;
	}

	.triangle,
	.triangle:before,
	.triangle:after {
		width:  1em;
		height: 1em;
		border-top-right-radius: 30%;
	}
	
	.triangle {
		transform: rotate(-90deg) skewX(-30deg) scale(1,.866);
	}
	.triangle:before {
		transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
	}
	.triangle:after {
		transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
	}

	.yt_list_info{
		width: 98%;
		height: auto;
		padding-left: 2%;
		display: flex;
		flex-flow: column;
		align-self: flex-end;
	}

	.yt_list_name{
		width: 100%;
		height: 42px;
		float: left;
		font-size: 22px;
		color: #ffffff;
        margin-bottom: 1em;
	}

	.yt_list_txt{
		width: 100%;
		height: auto;
		float: left;
		font-size: 26px;
		line-height: 1.5em;
		color: #ffffff;
	}

}

/*** 小桌機 ***/
@media screen and (min-width: 768px) and (max-width: 1024px) {

	.yt_list{
		width: 765px;
		height: 212px;
		margin-bottom: 15px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-flow: row;
		padding-top: 15px;
		padding-bottom: 15px;
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.8+30,1+100 */
		background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 30%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 30%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 30%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
	}

	.yt_list_pic{
		width: 46%;
		height: 182px;
		position: relative;
	}

	.play-button {
		position: absolute;
		width: 72px;
		height: 72px;
		top: 40%;
		left: 46%;
		background: transparent;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
		-webkit-transition: background .3s ease-in-out;
		-o-transition: .3s background ease-in-out;
		-moz-transition: .3s background ease-in-out;
		transition: background .3s ease-in-out;
		transform: translate(-50%,-50%);
		border: solid 1px #ffffff;
	}

	.triangle {
		position: absolute;
		background-color: white;
		top: 35%;
		left: 35%;
	}
	.triangle:before,
	.triangle:after {
		content: '';
		position: absolute;
		background-color: inherit;
	}

	.triangle,
	.triangle:before,
	.triangle:after {
		width:  1em;
		height: 1em;
		border-top-right-radius: 30%;
	}
	
	.triangle {
		transform: rotate(-90deg) skewX(-30deg) scale(1,.866);
	}
	.triangle:before {
		transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
	}
	.triangle:after {
		transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
	}

	.yt_list_info{
		width: 98%;
		height: auto;
		padding-left: 2%;
		display: flex;
		flex-flow: column;
		align-self: flex-end;
	}

	.yt_list_name{
		width: 100%;
		height: 42px;
		float: left;
		font-size: 22px;
		color: #ffffff;
        margin-bottom: 1em;
	}

	.yt_list_txt{
		width: 100%;
		height: auto;
		float: left;
		font-size: 26px;
		line-height: 1.5em;
		color: #ffffff;
	}

}

/* ipad 直 */
@media all 
and (device-width: 768px) 
and (device-height: 1024px) 
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation:portrait) {

	.yt_list{
		width: 50%;
		height: 160px;
		margin-bottom: 15px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-flow: row;
		padding-top: 15px;
		padding-bottom: 15px;
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.8+30,1+100 */
		background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 30%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 30%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 30%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
	}

	.yt_list_pic{
		width: 50%;
		height: 122px;
		position: relative;
	}

	.play-button {
		position: absolute;
		width: 72px;
		height: 72px;
		top: 38%;
		left: 50%;
		background: transparent;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
		-webkit-transition: background .3s ease-in-out;
		-o-transition: .3s background ease-in-out;
		-moz-transition: .3s background ease-in-out;
		transition: background .3s ease-in-out;
		transform: translate(-50%,-50%);
		border: solid 1px #ffffff;
	}

	.yt_list_info{
		width: 96%;
		height: auto;
		padding-left: 2%;
		padding-right: 2%;
		display: flex;
		flex-flow: column;
		align-self: flex-start;
	}

	.yt_list_name{
		width: 100%;
		height: 42px;
		float: left;
		color: #ffffff;
        margin-bottom: .5em;
	}

	.yt_list_txt{
		width: 100%;
		height: auto;
		float: left;
		font-size: 18px;
		line-height: 1.5em;
		color: #ffffff;
	}
}

/* ipad pro 直 */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

	.fix-text_yt {
		width: 96%;
		height: 100vh;
		padding-bottom: 5%;
		display: flex;
		padding-left: 2%;
		justify-content: center;
		align-content: flex-end;
		flex-wrap: wrap;
	}

	.yt_list{
		width: 100%;
		height: 300px;
		margin-bottom: 15px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-flow: row;
		padding-top: 15px;
		padding-bottom: 15px;
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.8+30,1+100 */
		background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 30%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 30%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 30%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
	}

	.yt_list_pic{
		width: 50%;
		height: 234px;
		position: relative;
	}

	.play-button {
		position: absolute;
		width: 120px;
		height: 120px;
		top: 50%;
		left: 50%;
		background: transparent;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
		-webkit-transition: background .3s ease-in-out;
		-o-transition: .3s background ease-in-out;
		-moz-transition: .3s background ease-in-out;
		transition: background .3s ease-in-out;
		transform: translate(-50%,-50%);
		border: solid 1px #ffffff;
	}

	.triangle {
		position: absolute;
		background-color: white;
		top: 33%;
		left: 33%;
	}

	.triangle, .triangle:before, .triangle:after {
		width: 2em;
		height: 2em;
		border-top-right-radius: 30%;
	}

	.yt_list_info{
		width: 96%;
		height: auto;
		padding-left: 2%;
		padding-right: 2%;
		display: flex;
		flex-flow: column;
		align-self: center;
	}

	.yt_list_name{
		width: 100%;
		float: left;
		color: #ffffff;
        margin-bottom: .5em;
	}

	.yt_list_txt{
		width: 100%;
		height: auto;
		float: left;
		font-size: 30px;
		line-height: 1.5em;
		color: #ffffff;
	}

}

/*** 手機 直***/
@media screen and (max-width: 767px) {

	.yt_list{
		width: 100%;
		height: auto;
		margin-bottom: 15px;
		/* display: flex; */
		justify-content: center;
		align-items: center;
		flex-flow: column;
	}

	.yt_list_pic{
		width: 100%;
		height: auto;
		position: relative;
		margin-bottom: 2px;
	}

	.play-button {
		position: absolute;
		width: 72px;
		height: 72px;
		top: 40%;
		left: 50%;
		background: transparent;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
		-webkit-transition: background .3s ease-in-out;
		-o-transition: .3s background ease-in-out;
		-moz-transition: .3s background ease-in-out;
		transition: background .3s ease-in-out;
		transform: translate(-50%,-50%);
		border: solid 1px #ffffff;
	}

	.triangle {
		position: absolute;
		background-color: #ffffff;
		text-align: left;
		top: 35%;
		right: 40%;
	}
	.triangle:before,
	.triangle:after {
		content: '';
		position: absolute;
		background-color: inherit;
	}
	.triangle,
	.triangle:before,
	.triangle:after {
		width:  1em;
		height: 1em;
		border-top-right-radius: 30%;
	}
	
	.triangle {
		transform: rotate(-90deg) skewX(-30deg) scale(1,.866);
	}
	.triangle:before {
		transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
	}
	.triangle:after {
		transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
	}

	.yt_list_info{
		width: 100%;
		height: auto;
		/* padding-left: 60%; */
		display: flex;
		flex-flow: column;
		align-self: flex-end;
		background-color: #dedede;
	}

	.yt_list_name{
		width: 95%;
		height: 42px;
		float: left;
		font-size: 22px;
		color: #3e3a39;
		line-height: 2;
		text-align: right;
	}

	.yt_list_txt{
		display: none;
	}
}

/*** 小手機 直***/
@media screen and (max-width: 320px) {

}

/*** 手機 橫***/
@media screen and (max-width: 823px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 1.5) {

}

/*** 小手機 橫***/
@media screen and (max-width: 480px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 1.5) {

}

/* 註解區域 */



.hidden {
	display: none;
	/* animation: 300ms ease 0s 1 normal none running ; */
}

.show_exp {
	display: block;
	/* animation: 300ms ease 0s 1 normal none running ; */
}

.exp{
	color: #00bbff;
	cursor: pointer;
	display: inline-block;
}

.exp-contain{
	background-color: #e0e0e0;
    color: #000;
    font-size: 23px;
    line-height: 1.57;
    padding: 16px 24px;
	margin: 10px 0;
	position: relative;
}

.exp-contain::after{
	content:'';
	position:absolute;
	bottom:100%;
	left:163px;
	width:0;
	height:0;
	border-width:10px;
	border-style:solid;
	border-color:transparent;
	border-bottom-width:15px;
	border-bottom-color:currentColor;
	color:#e0e0e0;
}

.exp2{
	color: #00bbff;
	cursor: pointer;
	display: inline-block;
}

.exp-contain2{
	background-color: #e0e0e0;
    color: #000;
    font-size: 23px;
    line-height: 1.57;
    padding: 16px 24px;
	margin: 10px 0;
	position: relative;
}

.exp-contain2::after{
	content:'';
	position:absolute;
	bottom:100%;
	left:136px;
	width:0;
	height:0;
	border-width:10px;
	border-style:solid;
	border-color:transparent;
	border-bottom-width:15px;
	border-bottom-color:currentColor;
	color:#e0e0e0;
}

.exp3{
	color: #00bbff;
	cursor: pointer;
	display: inline-block;
}

.exp-contain3{
	background-color: #e0e0e0;
    color: #000;
    font-size: 23px;
    line-height: 1.57;
    padding: 16px 24px;
	margin: 10px 0;
	position: relative;
}

.exp-contain3::after{
	content:'';
	position:absolute;
	bottom:100%;
	left:295px;
	width:0;
	height:0;
	border-width:10px;
	border-style:solid;
	border-color:transparent;
	border-bottom-width:15px;
	border-bottom-color:currentColor;
	color:#e0e0e0;
}

.exp4{
	color: #00bbff;
	cursor: pointer;
	display: inline-block;
}

.exp-contain4{
	background-color: #e0e0e0;
    color: #000;
    font-size: 23px;
    line-height: 1.57;
    padding: 16px 24px;
	margin: 10px 0;
	position: relative;
}

.exp-contain4::after{
	content:'';
	position:absolute;
	bottom:100%;
	right:280px;
	width:0;
	height:0;
	border-width:10px;
	border-style:solid;
	border-color:transparent;
	border-bottom-width:15px;
	border-bottom-color:currentColor;
	color:#e0e0e0;
}

.exp5{
	color: #00bbff;
	cursor: pointer;
	display: inline-block;
}

.exp-contain5{
	background-color: #e0e0e0;
    color: #000;
    font-size: 23px;
    line-height: 1.57;
    padding: 16px 24px;
	margin: 10px 0;
	position: relative;
}

.exp-contain5::after{
	content:'';
	position:absolute;
	bottom:100%;
	left:96px;
	width:0;
	height:0;
	border-width:10px;
	border-style:solid;
	border-color:transparent;
	border-bottom-width:15px;
	border-bottom-color:currentColor;
	color:#e0e0e0;
}

.arrow-circle-down {
    cursor: pointer;
    display: inline-block;
    background-color: #ffffff;
    border-radius: 50%;
    border-color: #00bbff;
	border-width: 2px;
    border-style: solid;
    height: 20px;
	margin-left: 3px;
	margin-right: 3px;
    position: relative;
    width: 20px;
}

.arrow-circle-down::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 2px;
    border-color: #00bbff transparent;
    border-style: solid;
	border-width: 6px 6px 0;
}

.arrow-circle-up {
    cursor: pointer;
    display: inline-block;
    background-color: #ffffff;
    border-radius: 50%;
    border-color: #00bbff;
	border-width: 2px;
    border-style: solid;
    height: 20px;
	margin-left: 3px;
	margin-right: 3px;
    position: relative;
    width: 20px;
}

.arrow-circle-up::after {
	content: "";
    position: absolute;
    top: 5px;
    left: 2px;
    border-color: #00bbff transparent;
    border-style: solid;
    border-width: 0 6px 6px;
}


.icon_check {
    width: 1em;
    height: 1.5em;
    margin-right: 15px;
    padding-bottom: .2em;
}


/*** 手機 直***/
@media screen and (max-width: 767px) {

	.exp-contain::after{
		content:'';
		position:absolute;
		bottom:100%;
		left:40px;
		width:0;
		height:0;
		border-width:10px;
		border-style:solid;
		border-color:transparent;
		border-bottom-width:15px;
		border-bottom-color:currentColor;
		color:#e0e0e0;
	}

	.exp-contain2::after{
		content:'';
		position:absolute;
		bottom:100%;
		left:70px;
		width:0;
		height:0;
		border-width:10px;
		border-style:solid;
		border-color:transparent;
		border-bottom-width:15px;
		border-bottom-color:currentColor;
		color:#e0e0e0;
	}

	.exp-contain3::after{
		content:'';
		position:absolute;
		bottom:100%;
		left:150px;
		width:0;
		height:0;
		border-width:10px;
		border-style:solid;
		border-color:transparent;
		border-bottom-width:15px;
		border-bottom-color:currentColor;
		color:#e0e0e0;
	}

	.exp-contain4::after{
		content:'';
		position:absolute;
		bottom:100%;
		right:25px;
		width:0;
		height:0;
		border-width:10px;
		border-style:solid;
		border-color:transparent;
		border-bottom-width:15px;
		border-bottom-color:currentColor;
		color:#e0e0e0;
	}

	.exp-contain5::after{
		content:'';
		position:absolute;
		bottom:100%;
		left:104px;
		width:0;
		height:0;
		border-width:10px;
		border-style:solid;
		border-color:transparent;
		border-bottom-width:15px;
		border-bottom-color:currentColor;
		color:#e0e0e0;
	}


}

.article-facebook{
	width: 100%;
}

.case {
	font-size: 23px;
	line-height: 1.5;
	margin-bottom: 15px;
	float: left;
	width: 100%;
}

.case>ul {
	width: 100%;
	padding: 0;
	margin-bottom: 15px;
	float: left;
}

.case>ul.end {
	width: 100%;
	padding: 0;
	margin-bottom: 15px;
	border-bottom: 1px solid  #000;
	float: left;
	font-size: 6vmin;
}

h2.end {
	padding-bottom: 15px;
	border-bottom: 1px solid  #000;
	font-size: 6vmin;
}

.case>ul>li {
	width:100%;
	list-style: none;
	display: block;
	line-height: 1.5em;
	font-size: 6vmin;
}

.case>ul>li.aaa {
	width:100%;
}

.case>ul>li>span.bbb{
	width:65%;
	float: left;
	text-align: left;
}

.case>ul>li>span.ccc{
	width:35%;
	float: right;
	text-align: right;
}

.case>ul>li>span.ddd{
	width: 25%;
    float: right;
    text-align: right;
    background-image: url(../img/red_circle.svg);
    background-repeat: no-repeat;
    background-size: contain;
	background-position-x: right;
	font-size: 6vmin;
}

.case>ul>li>span.eee {
    width: 25%;
    float: right;
    text-align: right;
    background-image: url(../img/red_circle.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: right;
	padding-right: 5%;
	font-size: 6vmin;
}


.case>ul>li>span.fff{
	width:75%;
	float: left;
	text-align: left;
	font-size: 6vmin;
}