*,
*::after,
*::before {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	--background-color: #1d1b22;
	background-repeat: no-repeat;
	background-attachment: fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	--text-color: #fff;
	--link-color: #f9ed8a;
	--link-hover-color: #fff; 
	 font-family: 'Roboto Mono', monospace; 
	 font-weight: 500; 
	 color: #fff; 
	color: var(--text-color);
	background-color: #363dc2;
	background-color: var(--background-color);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin: 0;
	padding: 0;
}
body::before {
	animation: grain 8s steps(10) infinite;
	background-image: url(../img/noise.png);
	content: '';
	height: 300%;
	left: -50%;
	opacity: .6;
	position: fixed;
	top: -100%;
	width: 300%;
	z-index: 1;
}

@keyframes grain {
  0%, 100% { transform:translate(0, 0); }
  10% { transform:translate(-5%, -10%); }
  20% { transform:translate(-15%, 5%); }
  30% { transform:translate(7%, -25%); }
  40% { transform:translate(-5%, 25%); }
  50% { transform:translate(-15%, 10%); }
  60% { transform:translate(15%, 0%); }
  70% { transform:translate(0%, 15%); }
  80% { transform:translate(3%, 35%); }
  90% { transform:translate(-10%, 10%); }
}

main {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.container {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px;
	position: relative;
}

a {
	text-decoration: none;
	color: var(--link-color);
	outline: none;
}

a:hover,
a:focus {
	color: var(--link-hover-color);
	outline: none;
}

.hidden {
	position: absolute;
	overflow: hidden;
	width: 0;
	height: 0;
	pointer-events: none;
}

/* Icons */
.icon {
	display: block;
	width: 1.5em;
	height: 1.5em;
	margin: 0 auto;
	fill: currentColor;
}



/* SVG Morph */
.morph-wrap {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.morph {
	position: relative;
	height: 100%;
	fill: var(--background-color-2);
	flex: none;
}

.content-wrap {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
	min-height: 600px;
	pointer-events: none;
}

.content {
	position: relative;
	display: grid;
}

.content--fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	min-height: 600px;
	z-index: 100;
	pointer-events: none;
	padding: 1.5em;
	grid-template-columns: 50% 50%; 
	grid-template-rows: auto auto 4em;
	grid-template-areas:	"header ..."
							"... decotitle"
							"demos decotitle";
}

.content--fixed a {
	pointer-events: auto;
}

.content--layout {
	pointer-events: auto;
	justify-content: center;
	align-content: center;
	grid-template-columns: 220px 220px 200px 200px;
	grid-template-rows: 240px 100px 100px;
	grid-template-areas:
		"... title title title"
		"author ... desc desc"
		"author ... link link";
}

.content--related {
	align-content: center;
	justify-content: center;
	
	min-height: 600px;
}

.content__img {
	grid-column: 1 / 3;
	grid-row: 1 / 3;
	opacity: .8;
	/* width: 440px; */
	height: 400px;
}
.content__house {
	grid-column: 1 / 3;
	grid-row: 1 / 3;
	opacity: 1;
	 width: 440px; 
	/* height: 350px;*/
	z-index: 10;
}

.content__title {
	grid-area: title;
	/* font-family: 'nexa_boldregular', sans-serif; */
	letter-spacing: -0.025em;
	font-size: 4em;
	
	line-height: 160px;
	margin: 0;
	margin-top: 50px;
	text-transform: lowercase;
	z-index: 10;
	cursor: default;
}

.content__author {
	grid-area: author;
	margin: 0;
	-webkit-writing-mode: vertical-lr;
	writing-mode: vertical-lr;
	padding: 1em;
	/* text-align: right; */
	z-index: 10;
	cursor: default;
	top: 0;
	color: #000;
	grid-column: 1 / 1;
	grid-row: 1 / 3;
	font-size: 1.5em;
}

.content__desc {
	grid-area: desc;
	margin: 0;
	z-index: 10;
	padding: 0 1em;
	cursor: default;
}

.content__img,
.content__title,
.content__author,
.content__desc {
	transition: transform 0.3s ease-out;
}

.content__link {
	pointer-events: auto;
	grid-area: link;
	align-self: end;
	justify-self: start;
	z-index: 10;
	    padding: 0.5em 1em 0.5em;
    margin: 0 20px 50px;
	
	    border: 3px solid #ffffff;
}

.content__info {
	grid-column: 1 / 3;
}

.content__related-item {
	padding: 1em;
	transition: color 0.3s;
}

.content__related-img {
	max-width: 100%;
	opacity: 0.8;
	transition: opacity 0.3s;
}

.content__related-item:hover .content__related-img,
.content__related-item:focus .content__related-img {
	opacity: 1;
}

.content__related-title {
	font-size: 1em;
	margin: 0;
	padding: 0.5em;
}

/* Different layouts */

/* layout-2 */
.content--layout-2 {
	grid-template-areas:	"... title title title"
							"desc desc ... author"
							"link link ... author";
}

.content--layout-2 .content__img {
	grid-column: 3 / 5;
	grid-row: 1 / 3;
}
.content--layout-2 .content__house {
	grid-column: 3 / 4;
	grid-row: 1 / 3;
}

.content--layout-2 .content__desc {
	text-align: right;
}

.content--layout-2 .content__link {
	justify-self: end;
}

.content--layout-2 .content__author {
	justify-self: end;
	align-self: start;
	grid-column: 5 / 1;
	grid-row: 1 / 3;
}

/* layout-3 */
.content--layout-3 {
	grid-template-rows: 50px 200px 150px;
	grid-template-areas:	"... ... desc desc"
							"author title title title"
							"author ... link link";
}

.content--layout-3 .content__img {
	grid-column: 1 / 3;
	grid-row: 1 / 3;
}
.content--layout-3 .content__house {
	grid-column: 1 / 3;
	grid-row: 1 / 3;
}
.content--layout-3 .content__desc {
	align-self: end;
}

/* layout-4 */

.content--layout-4 {
	grid-template-areas:	"title title title desc"
							"... author ... desc"
							"... author ... link";
}

.content--layout-4 .content__img {
	grid-column: 2 / 4;
	grid-row: 1 / 3;
}
.content--layout-4 .content__house {
	grid-column: 2 / 4;
	grid-row: 1 / 3;
}

.content--layout-4 .content__author {
	justify-self: start;
    align-self: start;
    grid-column: 2 /5;
    grid-row: 2/ 5;
}



/* Demos */
.demos {
	grid-area: demos;
	align-self: end;
}

.demo {
	display: inline-block;
	position: relative;
	font-size: 0.85em;
	margin: 0 0.25em 0.5em 0;
	padding: 1em;
}


.demo--current {
	color: var(--link-hover-color);
	border-color: currentColor;
}


/* Deco elements */
.deco {
	pointer-events: none;
}

.deco--title {
	grid-area: decotitle;
	-webkit-writing-mode: vertical-lr;
	writing-mode: vertical-lr;
	text-align: right;
	align-self: end;
	justify-self: end;
}

/* Top Navigation Style */


.codrops-icon {
	position: relative;
	display: inline-block;
	padding: 0.75em 0.75em 1em;
}

/* Demo themes */




@media screen and (max-width: 50em) {
	.content--fixed {
		height: auto;
		min-height: 0;
		display: block;
		z-index: 10;
		position: absolute;
	}

	.deco--title {
		display: none;
	}
	.demos {
		text-align: center;
	}


}



@media screen and (max-width: 768px) {
	.content--layout {
		    transform: scale3d(0.7,0.7,1);
		    grid-template-columns: 25% 25% 25% 25%;
		    grid-template-rows: 250px 250px 150px 150px;
	}
	.content__author,
	.content__desc,
	.content__link {
		font-size: 1.5em;
	}
	.content__img {
    grid-column: 2 / 4;
    grid-row: 1 / 4;
    height: 450px;
}
	.content__title {
	line-height: 1em;
}	
	.content__house {
	 height: 450px;
	 z-index: 10;
	 grid-column: 1 / 3;
	 grid-row: 1 / 3;
}
	.content__desc{
	grid-column: 2 / 5;
	grid-row: 3 /4;
	}
	.content__link{
	grid-column: 2 / 4;
	grid-row: 4 /4;
	}
	

	
	
/* layout-2 */	
.content--layout-2 .content__img {
	    grid-column: 1 / 4;
    grid-row: 1 / 4;
}
.content--layout-2 .content__house {
	grid-column: 1 / 4;
	grid-row: 1 / 3;
}

.content--layout-2 .content__desc {
	text-align: left;
	grid-column: 1/ 4;
    grid-row: 3 /4;
}

.content--layout-2 .content__link {
	justify-self: end;
	    grid-column: 1/ 4;
    grid-row: 4 /4;
}

.content--layout-2 .content__author {
	justify-self: left;
    align-self: start;
    grid-column: 1 / 1;
    grid-row: 1 / 3;
    padding: 1em;
}
/* layout-3 */
.content--layout-3 {
	grid-template-areas:	"... ... desc desc"
							"author title title title"
							"author ... link link";
}
.content--layout-3 .content__title {
	  grid-column: 2/ 5;
	  grid-row: 1 /4;
}

.content--layout-3 .content__img {
	grid-column: 1 / 4;
	grid-row: 1 / 4;
}
.content--layout-3 .content__house {
	grid-column: 1 / 4;
	grid-row: 1 / 4;
}
.content--layout-3 .content__desc {
	align-self: baseline;
	grid-column: 1 / 5;
	grid-row: 3 /4;
}

	
	
/* layout-4 */

.content--layout-4 {
	grid-template-areas:	"title title title desc"
							"... author ... desc"
							"... author ... link";
}

.content--layout-4 .content__img {
	grid-column: 2 / 4;
	grid-row: 1 / 3;
}
.content--layout-4 .content__house {
	grid-column: 2 / 4;
	grid-row: 1 / 3;
}

.content--layout-4 .content__author {
	justify-self: start;
    align-self: start;
    grid-column: 2 /5;
    grid-row: 2/ 5;
}

	
	
}

@media screen and (max-width: 420px) {
	.content--layout {
		transform: scale3d(0.6,0.6,1);
	}
}



@media screen and (max-width: 320px) {
	.content--layout {
		transform: scale3d(0.4,0.4,1);
	}
}









/*－－－－－影片－－－－－－*/
.container-w {
	width: 50%;
	margin: auto;
	margin-top: 100px;
	height: 100vh;
	min-height: 500px;
	position:relative;

	}
.video-container:before {
content: " ";
    display: block;
    position: absolute;
	top: 350px;
    left: -45px;
    width: 100%;
    height: 220px;
	  background: url(../img/cloud.svg) center center no-repeat;
	z-index: 10;
}
.video-container {
	border-radius: 30px;
    pointer-events: auto;
    justify-content: center;
    align-content: center;
position:relative;
height:0;
	padding-bottom: 60%;
	box-shadow: 0px 8px 0px 0px rgba(0, 0, 0, 0.1);
}

.video-container iframe,
.video-container object,
.video-container embed{
position:absolute;
top:0;

left:0;

width:100%;

height:100%;

}

@media screen and (max-width: 420px) {
.container-w {
	width: 90%;
    margin: auto;
    margin-top: 300px;
    height: 100vh;
    min-height: 500px;
	}
	}

.logo {

width: 250px;
}

.film {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
	min-height: 600px;
	pointer-events: none;
	opacity: 1;
	z-index: 10;
	background-color: #000;
	  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}


.parallax {
	position: relative;
	height: auto;
	background-repeat: no-repeat;
	background-attachment: fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width: 100%;
	height: 100vh;
	min-height: 600px;
	z-index: 10;
}

.parallax.parallax-1 {
	background-position: 100% 100%;
}

.parallax .map {
	width: 40%;
	position: absolute;
	left: 50%;
	bottom: 0px;
	transform:translateX(-50%);
}


/*---------浮動動畫----------*/
.float-box {
	height:100%;
	width: 100%;
	top:0;
	left:0;
	pointer-events:none;
	position: absolute;
	z-index: 10;
}
.lazyloaded {
    opacity: 1;
    transition: opacity .3s;
}

.float-box img {
	position:absolute;
	width:300px;
	animation:float 3s ease-in-out infinite;
}
.float-box .-top {
	width:95%;
	top:0;
	left: 50%;
	transform: translatex(-50%);
	position: absolute;
}
.float-box .ba {
	top: 350px;
    right: -50px;
    animation-delay: .2s;
}
 .float-box .bb {
   top: 100px;
    right: 0px;
    animation-delay: .8s;
}
.float-box .bc {
	top: 300px;
    left: 100px;
    animation-delay: .5s;
}
.float-box .bd {
	top: 420px;
    right: 250px;
    animation-delay: 1.2s;
    z-index: 1;
	width:400px;
}
.float-box .be {
	    top: 50px;
    right: 50px;
    animation-delay: .4s;
}
.float-box .bf {
	top:-65px;
	right:-5px;
	animation-delay:.2s;
}
.float-box .bg {
	top:-50px;
	left:-30px;
	animation-delay:1.2s;
}
.float-box .bg {
	top:-50px;
	left:-30px;
	animation-delay:1.2s;
}


@keyframes float {
0% {
	transform:translateZ(0)
}
65% {
	transform:translate3d(0,15px,0)
}
to {
	transform:translateZ(0)
}
}




@media screen and (max-width: 420px) {
.float-box img {
	position:absolute;
	width:150px;
	animation:float 3s ease-in-out infinite;
}
.float-box .ba {
    top: 100px;
    right: -50px;
}
.float-box .bc {
    top: 350px;
    left: -50px;
}	

	}
/*---------星星----------*/
.star {
	display: block;
	position: absolute;
	top: 25%;
	left: 25%;
	width: 8px;
	height: 8px;
	  background: url(../img/Space.svg) center center no-repeat;
	overflow: hidden;
	z-index: 2;
	animation: glitter 4.5s linear 0s infinite normal;
	-webkit-animation: glitter 4.5s linear 0s infinite normal;
	-moz-animation: glitter 4.5s linear 0s infinite normal;
	-ms-animation: glitter 4.5s linear 0s infinite normal;
	-o-animation: glitter 4.5s linear 0s infinite normal;
}
.star-top,.star-bottom{
	position: relative;
	display: block;
}
.star-top:before , 
.star-top:after ,
.star-bottom:before ,
.star-bottom:after{
	content: "";
	width: 24px;
	height: 24px;
	background: #212121;
	border-radius: 25%;
	position: absolute;
}
/*CSS3 pseudo class for positioning curves*/
.star-top:before {
	top: -12px;
	left: -12px;
}
.star-top:after {
	bottom: -12px;
	left: 12px;
}
.star-bottom:before {
	top: 12px;
	left: -12px;
}
.star-bottom:after {
	top: 12px;
	left: 12px;
}
/*css3 keyframes for glittering effect*/
@-webkit-keyframes glitter {
	0%   { -webkit-transform: scale(1.0); opacity: 1; }
	25%  { -webkit-transform: scale(0.5); opacity: 0; }
	50%  { -webkit-transform: scale(1.0); opacity: 1; }
	75%  { -webkit-transform: scale(0.5); opacity: 0; }
	100% { -webkit-transform: scale(1.0); opacity: 1; }
}
@-moz-keyframes glitter {
	0%   { -moz-transform: scale(1.0); opacity: 1; }
	25%  { -moz-transform: scale(0.5); opacity: 0; }
	50%  { -moz-transform: scale(1.0); opacity: 1; }
	75%  { -moz-transform: scale(0.5); opacity: 0; }
	100% { -moz-transform: scale(1.0); opacity: 1; }
}
/*-------------------------*/
/* $parallax graphic
---------------------------*/
[class^="graphic_"]{
    position: absolute;
}
@media (max-width: 768px){
    [class^="graphic_"]{
        transform: scale(0.5);
    }
}
.graphic_1-1{top: -20%;right: -5%;}
.graphic_1-2{bottom: 0%;right: 50%;}
.graphic_1-3{top: 10%;left: 1%;}
.graphic_1-4{top: 35%;left: 15%;}
.graphic_1-5{bottom: 20%;left: 5%;}
.graphic_2-1{bottom: 5%;left: 15%;}
.graphic_2-2{bottom: 50%;right: 25%;}
.graphic_2-3{top: 0%;right: 10%;}
.graphic_2-4{bottom: -20%;right: 10%;}
.graphic_3-1{top: 10%;right: 10%;}
.graphic_3-2{bottom: 50%;left: 5%;}
.graphic_3-3{bottom: -10%;right: 20%;}

.graphic_4-1{top: -20%;right: -5%;}
.graphic_4-2{bottom: 0%;right: 50%;}
.graphic_4-3{top: 10%;left: 1%;}
.graphic_4-4{top: -10%;right: 5%;}
.graphic_5-1{top: 30%;left: 10%;}
.graphic_5-2{bottom: 20%;left: 5%;}
.graphic_5-3{bottom: 0%;right: 25%;}
.graphic_6-1{top: -30%;left: 10%;}
.graphic_6-2{top: 10%;right: 10%;}
.graphic_6-3{bottom: 50%;left: 5%;}
.graphic_7-1{top: 20%;right: 25%;}
.graphic_7-2{bottom: 0%;right: 50%;}
.graphic_7-3{top: 10%;left: 1%;}
.graphic_7-4{top: 30%;left: 10%;}
.graphic_8-1{bottom: 2%;left: 5%;}
.graphic_8-2{bottom: 10%;right: 25%;}
.graphic_8-3{top: 10%;left: 10%;}






.m-ttl-sets1{
        width: 500px;
        height:  500px;
        background: url(../img/Space.svg) center center no-repeat;
        position: absolute;
         text-align: center; 
        -webkit-animation:myRotate 80s linear infinite;
        animation:myRotate 80s linear infinite;
        margin: 0;
        padding: 0;
}
.m-ttl-sets2{
    width: 130px;
    height:  130px;
    background: url(../img/Space2.svg) center center no-repeat;
    position: absolute;
    text-align: center;
   -webkit-animation:myRotate 100s linear infinite;
    animation:myRotate 100s linear infinite;
}
.m-ttl-sets3{
    width: 130px;
    height:  130px;
    background: url(../img/Space3.svg) center center no-repeat;
    position: absolute;
    text-align: center;
   -webkit-animation:myRotate 20s linear infinite;
    animation:myRotate 20s linear infinite;
}

.m-ttl-sets4{
    width: 100px;
    height:  100px;
    background: url(../img/Space4.svg) center center no-repeat;
    position: absolute;
    text-align: center;
   -webkit-animation:myRotate 80s linear infinite;
    animation:myRotate 80s linear infinite;
}
.m-ttl-sets5{
    width: 200px;
    height:  200px;
    background: url(../img/Space5.svg) center center no-repeat;
    position: absolute;
    text-align: center;
	-webkit-animation:float2 3s ease-in-out infinite;
	animation:float2 3s ease-in-out infinite;

}
.m-ttl-sets6{
    width: 300px;
    height:  300px;
    background: url(../img/Space6.svg) center center no-repeat;
	background-size: 50%;
    position: absolute;
    text-align: center;
	 -webkit-animation: rocket 10s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
          animation: rocket 10s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;

}
.m-ttl-sets7{
    width: 50px;
    height:  50px;
    background: url(../img/Space7.svg) center center no-repeat;
	
    position: absolute;
    text-align: center;
   -webkit-animation: shine 2.3s linear infinite;
    animation: shine 2.3s linear infinite;
}
@-webkit-keyframes myRotate{
    0%{ -webkit-transform: rotate(0deg);}
    50%{ -webkit-transform: rotate(180deg);}
    100%{ -webkit-transform: rotate(360deg);}
}
@keyframes myRotate{
    0%{ -webkit-transform: rotate(0deg);}
    50%{ -webkit-transform: rotate(180deg);}
    100%{ -webkit-transform: rotate(360deg);}
}


@-webkit-keyframes float2{
    0% {transform:translateZ(0)}
    65% {transform:translate3d(0,15px,0)}
    to {transform:translateZ(0)}
}
@keyframes float2{
   0% {transform:translateZ(0)}
   65% {transform:translate3d(0,15px,0)}
  to {transform:translateZ(0)}
}



@-webkit-keyframes shine{
   10% {opacity: 0;}
    90% {opacity: 1;}
}
@keyframes shine{
    10% {opacity: 0;}
    90% {opacity: 1;}
}
@keyframes rocket{
   0% {
	top: 0;
	left: 0;
	opacity: 1;
	}
    100% {
		top:-300px;
	    left: 300px;
		opacity: 0;
	}
	
}
@media screen and (max-width: 420px) {
	.m-ttl-sets1{
        width: 200px;
        height:   200px;
        background: url(../img/Space.svg) center center no-repeat;
        position: absolute;
         text-align: center; 
        -webkit-animation:myRotate 80s linear infinite;
        animation:myRotate 80s linear infinite;
        margin: 0;
        padding: 0;
}
	}