@charset "utf-8";
/*
 /$$$$$$$   /$$$$$$   /$$$$$$  /$$$$$$  /$$$$$$        /$$$$$$$   /$$$$$$   /$$$$$$  /$$$$$$$$        /$$$$$$  /$$$$$$$$ /$$$$$$$$ /$$   /$$ /$$$$$$$ 
| $$__  $$ /$$__  $$ /$$__  $$|_  $$_/ /$$__  $$      | $$__  $$ /$$__  $$ /$$__  $$| $$_____/       /$$__  $$| $$_____/|__  $$__/| $$  | $$| $$__  $$
| $$  \ $$| $$  \ $$| $$  \__/  | $$  | $$  \__/      | $$  \ $$| $$  \ $$| $$  \__/| $$            | $$  \__/| $$         | $$   | $$  | $$| $$  \ $$
| $$$$$$$ | $$$$$$$$|  $$$$$$   | $$  | $$            | $$$$$$$/| $$$$$$$$| $$ /$$$$| $$$$$         |  $$$$$$ | $$$$$      | $$   | $$  | $$| $$$$$$$/
| $$__  $$| $$__  $$ \____  $$  | $$  | $$            | $$____/ | $$__  $$| $$|_  $$| $$__/          \____  $$| $$__/      | $$   | $$  | $$| $$____/ 
| $$  \ $$| $$  | $$ /$$  \ $$  | $$  | $$    $$      | $$      | $$  | $$| $$  \ $$| $$             /$$  \ $$| $$         | $$   | $$  | $$| $$      
| $$$$$$$/| $$  | $$|  $$$$$$/ /$$$$$$|  $$$$$$/      | $$      | $$  | $$|  $$$$$$/| $$$$$$$$      |  $$$$$$/| $$$$$$$$   | $$   |  $$$$$$/| $$      
|_______/ |__/  |__/ \______/ |______/ \______/       |__/      |__/  |__/ \______/ |________/       \______/ |________/   |__/    \______/ |__/      
*/

::selection {
	background: #DDE852;
	color: #000;
}
::-moz-selection {
	background: #DDE852;
	color: #000;
}
.header2 {
	position: fixed;
	right: 120px;
	max-width: 100%;
	max-height: 100vh;
	height: auto;
	z-index: -1000;
	opacity: 0.03;
}

/* SCROLLBAR ===================================================================================================== */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-button {
    width: 0px;
    height: 0px;
}

::-webkit-scrollbar-thumb {
    background: #f2eb00;
    border: 0px none #ffffff;
    border-radius: 0px;
}

::-webkit-scrollbar-thumb:hover {
    background: #000000;
}

::-webkit-scrollbar-thumb:active {
    background: #000000;
}

::-webkit-scrollbar-track {
    background: #ffffff;
    border: 0px none #ffffff;
    border-radius: 0px;
}

::-webkit-scrollbar-track:hover {
    background: #ffffff;
}

::-webkit-scrollbar-track:active {
    background: #ffffff;
}

::-webkit-scrollbar-corner {
    background: transparent;
}
/* NAVIGATION LINKS ===================================================================================================== */

.astext {
	background: none;
	border: none;
	margin: 0;
	padding: 0;
	text-decoration: none;
	font-size: 60px;
    font-weight: normal;
	line-height: 90px;
	color: #F2EB00;
	display: inline-block;
	transition: 0.3s;
	margin-left: 200px;
	text-align: left;
	font-family: "Georgia", Serif;
	cursor: pointer;
}
button .link_chinese {
	display: none;
}
button:hover .link {
	display: none;
}
button:hover .link_chinese {
	display: block;
	color: #000;
	cursor: pointer;
}
button:focus, button:active {
	background: none;
	outline: none;
	padding: 0;
}
#nav-prev {
	position: fixed;
	bottom: 80px;
	z-index: 100;
	font-size: 50px;
	font-family: "Georgia", Serif;
	text-align: left;
	letter-spacing: 0px;
	font-weight: normal;
	display: inline-block;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
	filter: alpha(opacity=40);
	opacity: 0.4;
}
#nav-prev a {
	border-bottom: 4px solid transparent;
	padding-bottom: 5px;
	text-decoration: none;
	color: #000;
	background-image:
	  linear-gradient(
	      transparent 0px,
	      #DBD332 0px,
	      #DBD332 4px,
	      transparent 4px
	  ),
	  linear-gradient(
	      transparent 0px,
	      #000 0px,
	      #000 4px,
	      transparent 4px
	  );
	background-size: 0% 4px, 100% 4px;
	background-position: 0 bottom, 0 bottom;
	transition: background-size 0.3s ease-in-out;
	background-repeat: no-repeat;
}
#nav-prev a:hover {
	background-size: 100% 4px;
}
#nav-prev a:hover span {
	display: none;
}
#nav-prev a:hover:before {
	content: "上個";
}
#nav-next {
	position: fixed;
	bottom: 80px;
	z-index: 100;
	font-size: 50px;
	font-family: "Georgia", Serif;
	text-align: right;
	right: 0;
	letter-spacing: 0px;
	font-weight: normal;
	display: inline-block;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
	filter: alpha(opacity=40);
	opacity: 0.4;
}
#nav-next a {
	border-bottom: 4px solid transparent;
	padding-bottom: 5px;
	text-decoration: none;
	color: #000;
	background-image:
	  linear-gradient(
	      transparent 0px,
	      #DBD332 0px,
	      #DBD332 4px,
	      transparent 4px
	  ),
	  linear-gradient(
	      transparent 0px,
	      #000 0px,
	      #000 4px,
	      transparent 4px
	  );
	background-size: 0% 4px, 100% 4px;
	background-position: 0 bottom, 0 bottom;
	transition: background-size 0.3s ease-in-out;
	background-repeat: no-repeat;
}
#nav-next a:hover {
	background-size: 100% 4px;
}
#nav-next a:hover span {
	display: none;
}
#nav-next a:hover:before {
	content: "下個";
}
#nav-home {
	position: fixed;
	bottom: 80px;
	z-index: 100;
	font-size: 50px;
	font-family: "Georgia", Serif;
	left: 50%;
	transform: translate(-50%);
	letter-spacing: 0px;
	font-weight: normal;
	display: inline-block;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
	filter: alpha(opacity=40);
	opacity: 0.4;
}
#nav-home a {
	border-bottom: 4px solid transparent;
	padding-bottom: 5px;
	text-decoration: none;
	color: #000;
	background-image:
	  linear-gradient(
	      transparent 0px,
	      #DBD332 0px,
	      #DBD332 4px,
	      transparent 4px
	  ),
	  linear-gradient(
	      transparent 0px,
	      #000 0px,
	      #000 4px,
	      transparent 4px
	  );
	background-size: 0% 4px, 100% 4px;
	background-position: 0 bottom, 0 bottom;
	transition: background-size 0.3s ease-in-out;
	background-repeat: no-repeat;
}
#nav-home a:hover {
	background-size: 100% 4px;
}
#nav-home a:hover span {
	display: none;
}
#nav-home a:hover:before {
	content: "所有工作";
}
/* NAVIGATION MENU ====================================================================================================== */

.sidenav {
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	background-image: linear-gradient(20deg, #DDE852 0%, #C3BA64 100%);
	overflow-x: hidden;
	transition: 0.5s;
	padding-top: 70px;
	text-align: left;
	opacity: .99;
}
.box {
	position: fixed;
	height: 20%;
	left: -30px;
	top: 100px;
	z-index: 4;
}
.box-content {
	font-family: "Georgia", Serif;
	text-align: center;
	font-size: 18px;
	cursor: pointer;
	/* Safari */
	-webkit-transform: rotate(-90deg);
	/* Firefox */
	-moz-transform: rotate(-90deg);
	/* IE */
	-ms-transform: rotate(-90deg);
	/* Opera */
	-o-transform: rotate(-90deg);
}
.box-content a {
	padding: 10px 20px;
	display: inline-block;
	position: relative;
	overflow: hidden;
}
.box-content a:after {
	content: '';
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 15%;
	left: 0;
	bottom: 2px;
	background-image: linear-gradient(20deg, #DDE852 5%, #C3BA64 100%);
	-webkit-transition: all ease 0.3s;
	transition: all ease 0.3s;
}
.box-content a:hover {
	color: #000;
}
.box-content a:hover:after {
	height: 90%;
}
.box-content a {
	color: #C3BA64;
}
.sidenav a {
	text-decoration: none;
	font-size: 60px;
	line-height: 90px;
	display: inline-block;
	transition: 0.3s;
	margin-left: 200px;
}
.sidenav .closebtn {
	font-family: 'Satoshi', Helvetica, Arial, sans-serif;
	font-weight: 100;
	position: absolute;
	top: 5px;
	right: 20px;
	font-size: 75px;
	margin-left: 50px;
	color: #F2EB00;
}
.sidenav>.closebtn:hover {
	color: #000;
}
.content {
	font-size: 14px;
	font-weight: bold;
	color: #000;
	position: absolute;
	font-family: 'Satoshi', Helvetica, Arial, sans-serif;
	letter-spacing: 1px;
	margin-left: 20px;
	bottom: 150px;
}
.content a {
	font-size: 14px;
	text-decoration: none;
	color: #000;
	margin-left: 100px;
	line-height: 20px;
	border-bottom: 1px solid #000;
}
.content a:hover, .offcanvas a:focus {
	color: #F2EB00;
	border-bottom: 1px solid #F2EB00;
	-webkit-transition-delay: -1s;
	/* Safari */
	transition-delay: -1s;
}
.content_mobile {
	display: none;
	font-size: 14px;
	color: #000;
	position: absolute;
	bottom: 20px;
	font-family: 'Satoshi', Helvetica, Arial, sans-serif;
	letter-spacing: 2px;
	margin-left: 20px;
}
.content_mobile a {
	display: none;
	font-size: 14px;
	text-decoration: none;
	color: #000;
	margin-left: 0px;
	line-height: 20px;
	border-bottom: 1px solid #000;
}
/* VIDEO PLAYER ====================================================================================================== */

.youtube {
	/* continer (responsive) */
	position: relative;
	cursor: pointer;
	background: #ccc no-repeat center center / cover;
	padding-bottom: 56.25%;
	/* 16:9 */
	height: 0px;
	clear: both;
}
.youtube::before {
	/* play bubble */
	content: '';
	background: #DDE852;
	height: 80px;
	width: 80px;
	display: block;
	margin: -40px 0 0 -40px;
	border-radius: 100px;
	position: absolute;
	top: 50%;
	left: 50%;
	transition: all .1s ease;
	z-index: 1;
}
.youtube:hover::before {
	/* play bubble hover */
	background: #DDE852;
	width: 100px;
	height: 100px;
	margin: -50px 0 0 -50px;
}
.youtube::after {
	/* Play Triangle */
	content: '';
	width: 0;
	height: 0;
	line-height: 0px;
	display: block;
	border-style: solid;
	border-width: 20px 0 20px 40px;
	margin: -20px 0 0 -15px;
	border-color: transparent transparent transparent #000;
	position: absolute;
	top: 50%;
	left: 50%;
	height: 0;
	width: 0;
	z-index: 2;
}
.youtube iframe {
	/* youtube embed (responsive) */
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
}
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}
.video-container iframe, .video-container object, .video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/*
 /$$      /$$ /$$$$$$$$ /$$$$$$$  /$$$$$$  /$$$$$$         /$$$$$$  /$$   /$$ /$$$$$$$$ /$$$$$$$  /$$$$$$ /$$$$$$$$  /$$$$$$ 
| $$$    /$$$| $$_____/| $$__  $$|_  $$_/ /$$__  $$       /$$__  $$| $$  | $$| $$_____/| $$__  $$|_  $$_/| $$_____/ /$$__  $$
| $$$$  /$$$$| $$      | $$  \ $$  | $$  | $$  \ $$      | $$  \ $$| $$  | $$| $$      | $$  \ $$  | $$  | $$      | $$  \__/
| $$ $$/$$ $$| $$$$$   | $$  | $$  | $$  | $$$$$$$$      | $$  | $$| $$  | $$| $$$$$   | $$$$$$$/  | $$  | $$$$$   |  $$$$$$ 
| $$  $$$| $$| $$__/   | $$  | $$  | $$  | $$__  $$      | $$  | $$| $$  | $$| $$__/   | $$__  $$  | $$  | $$__/    \____  $$
| $$\  $ | $$| $$      | $$  | $$  | $$  | $$  | $$      | $$/$$ $$| $$  | $$| $$      | $$  \ $$  | $$  | $$       /$$  \ $$
| $$ \/  | $$| $$$$$$$$| $$$$$$$/ /$$$$$$| $$  | $$      |  $$$$$$/|  $$$$$$/| $$$$$$$$| $$  | $$ /$$$$$$| $$$$$$$$|  $$$$$$/
|__/     |__/|________/|_______/ |______/|__/  |__/       \____ $$$ \______/ |________/|__/  |__/|______/|________/ \______/ 
                                                               \__/                                                          
*/

/* MEDIA QUERIES 1920px MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM MEDIA QUERIES 1920px 
  __    ___    ___     ___  
 /_ |  / _ \  |__ \   / _ \ 
  | | | (_) |    ) | | | | |
  | |  \__, |   / /  | | | |
  | |    / /   / /_  | |_| |
  |_|   /_/   |____|  \___/ 
*/

@media all and (min-width: 1920px) {}
@media all and (max-width: 1920px) {}
/* MEDIA QUERIES 1366px MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM  MEDIA QUERIES 1366px 
  __   ____      __      __  
 /_ | |___ \    / /     / /  
  | |   __) |  / /_    / /_  
  | |  |__ <  | '_ \  | '_ \ 
  | |  ___) | | (_) | | (_) |
  |_| |____/   \___/   \___/ 
*/

@media all and (max-width: 1366px) {
	.astext {
		background: none;
		border: none;
		margin: 0;
		padding: 0;
		text-decoration: none;
		font-size: 60px;
		line-height: 90px;
		display: inline-block;
		transition: 0.3s;
		margin-left: 50px;
		text-align: left;
	}
	.sidenav a {
		text-decoration: none;
		font-size: 60px;
		line-height: 90px;
		display: inline-block;
		transition: 0.3s;
		margin-left: 50px;
	}
	.content {
		font-size: 14px;
		font-weight: bold;
		position: absolute;
		bottom: 15%;
		font-family: 'Satoshi', Helvetica, Arial, sans-serif;
		letter-spacing: 1px;
		margin-left: 20px;
	}
	.content a {
		font-size: 14px;
		text-decoration: none;
		margin-left: 100px;
		line-height: 20px;
	}
}
/* ++END++ */

/* MEDIA QUERIES 64em MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM MEDIA QUERIES 64em 
    __    _  _   
   / /   | || |  
  / /_   | || |_ 
 | '_ \  |__   _|
 | (_) |    | |  
  \___/     |_|  
*/

@media all and (max-width: 64em) {
	.header2 {
		right: 90px;
	}
    .box-content {
        font-size: 13px;
    }    
}
/* ++END++ */

/* MEDIA QUERIES 48em MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM MEDIA QUERIES 48em 
  _  _      ___  
 | || |    / _ \ 
 | || |_  | (_) |
 |__   _|  > _ < 
    | |   | (_) |
    |_|    \___/ 
*/

@media all and (max-width: 48em) {

	.header2 {
		right: 80px;
	}
	.astext {
		background: none;
		border: none;
		margin: 0;
		padding: 0;
		text-decoration: none;
		font-size: 40px;
		line-height: 60px;
		display: inline-block;
		transition: 0.3s;
		margin-left: -20px;
		text-align: left;
	}
	button .link_chinese {
		display: none;
	}
	button:hover .link {
		display: none;
	}
	button:hover .link_chinese {
		display: block;
	}
	.sidenav a {
		text-decoration: none;
		font-size: 30px;
		line-height: 60px;
		display: inline-block;
		transition: 0.3s;
		margin-left: 20px;
	}
	.content {
		display: none;
		font-size: 12px;
		font-weight: bold;
		position: absolute;
		bottom: 15%;
		font-family: 'Satoshi', Helvetica, Arial, sans-serif;
		letter-spacing: 2px;
		margin-left: 20px;
	}
	.content a {
		display: none;
		font-size: 14px;
		font-weight: bold;
		text-decoration: none;
		margin-left: 100px;
		line-height: 20px;
		border-bottom: 1px solid #fff;
	}
	.content_mobile {
		display: inline-block;
		font-size: 14px;
		font-weight: bold;		
		position: absolute;
		bottom: 5%;
		font-family: 'Satoshi', Helvetica, Arial, sans-serif;
		letter-spacing: 2px;
		margin-left: 20px;
		bottom: 150px;
	}
	.content_mobile a {
		display: inline-block;
		font-size: 14px;
		font-weight: bold;		
		text-decoration: none;
		margin-left: 0px;
		line-height: 20px;
		bottom: 50px;
	}
	.box {
		position: fixed;
		left: -30px;
	}
	.box-content a:after {
		content: '';
		position: absolute;
		z-index: -1;
		width: 100%;
		height: 10%;
		left: 0;
		bottom: 12px;
		-webkit-transition: all ease 0.3s;
		transition: all ease 0.3s;
	}
	.box-content {
		text-align: center;
		font-size: 12px;
		cursor: pointer;
		/* Safari */
		-webkit-transform: rotate(-90deg);
		/* Firefox */
		-moz-transform: rotate(-90deg);
		/* IE */
		-ms-transform: rotate(-90deg);
		/* Opera */
		-o-transform: rotate(-90deg);
	}
	#nav-prev {
		bottom: 40px;
		font-size: 25px;
	}
	#nav-next {
		bottom: 40px;
		font-size: 25px;
	}
	#nav-home {
		bottom: 40px;
		font-size: 25px;
	}
}
/* ++END++ */

/* MEDIA QUERIES 36em MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM MEDIA QUERIES 36em 
  ____      __  
 |___ \    / /  
   __) |  / /_  
  |__ <  | '_ \ 
  ___) | | (_) |
 |____/   \___/ 
*/

@media all and (max-width: 36em) {
	.header2 {
		right: 70px;
	}
	.astext {
		background: none;
		border: none;
		margin: 0;
		padding: 0;
		text-decoration: none;
		font-size: 35px;
		line-height: 60px;
		display: inline-block;
		transition: 0.3s;
		margin-left: -20px;
		text-align: left;
	}
	button .link_chinese {
		display: none;
	}
	button:hover .link {
		display: none;
	}
	button:hover .link_chinese {
		display: block;
	}
	.sidenav a {
		text-decoration: none;
		font-size: 30px;
		line-height: 60px;
		display: inline-block;
		transition: 0.3s;
		margin-left: 20px;
	}
	.content_mobile {
		display: inline-block;
		font-size: 14px;
		font-weight: bold;		
		position: absolute;
		bottom: 100px;
		font-family: 'Satoshi', Helvetica, Arial, sans-serif;
		letter-spacing: 2px;
		margin-left: 20px;
	}
	.content_mobile a {
		display: inline-block;
		font-size: 14px;
		font-weight: bold;		
		text-decoration: none;
		margin-left: 0px;
		line-height: 20px;
		bottom: 100px;
	}
	#nav-prev {
		bottom: 40px;
		font-size: 25px;
	}
	#nav-next {
		bottom: 40px;
		font-size: 25px;
	}
	#nav-home {
		bottom: 40px;
		font-size: 25px;
	}
	.youtube {
		/* continer (responsive) */
		position: relative;
		cursor: pointer;
		background: #ccc no-repeat center center / cover;
		padding-bottom: 56.25%;
		/* 16:9 */
		height: 0px;
		clear: both;
	}
	.youtube::before {
		/* play bubble */
		content: '';
		background: #DDE852;
		height: 50px;
		width: 50px;
		display: block;
		margin: -25px 0 0 -25px;
		border-radius: 100px;
		position: absolute;
		top: 50%;
		left: 50%;
		transition: all .1s ease;
		z-index: 1;
	}
	.youtube:hover::before {
		/* play bubble hover */
		background: #DDE852;
		width: 60px;
		height: 60px;
		margin: -30px 0 0 -30px;
	}
	.youtube::after {
		/* Play Triangle */
		content: '';
		width: 0;
		height: 0;
		line-height: 0px;
		display: block;
		border-style: solid;
		border-width: 15px 0 15px 25px;
		margin: -15px 0 0 -10px;
		border-color: transparent transparent transparent #000;
		position: absolute;
		top: 50%;
		left: 50%;
		height: 0;
		width: 0;
		z-index: 2;
	}
	.youtube iframe {
		/* youtube embed (responsive) */
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 3;
	}
}
/* ++END++ */