@charset "utf-8";
@import url("rwd.css");
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
*{
padding:0;
margin:0;

}

html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}
::selection{
background:transparent;}
::-moz-selection{
background:transparent;}

/*theme color*/
html, .other, header{background:#000000;}

.icon{
margin-top:40px;
float: right;
border-left:#000000 160px solid;
border-top:#fff 160px solid;
border-right:#000000 160px solid;
border-bottom:#fff 160px solid;animation: spin 16s linear infinite;}

@media only screen and (max-width:1200px){
.icon{
border-left:#000000 100px solid;
border-top:#fff 100px solid;
border-right:#000000 100px solid;
border-bottom:#fff 100px solid;}}
/*theme color*/


#wrap{
background:rgba(0,0,0,0.5);
position:fixed;
z-index:99999;
width:100%;
height:100%;
}

#loader {
margin:auto;
border: 3px solid #f3f3f3; /* Light grey */
border-top: 3px solid #aaa; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
margin-top:250px;
animation: spin 2s linear infinite;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

header{
width:100%;
padding-top:10px;
padding-left:20px;
padding-right:20px;
padding-bottom: 100px;
text-align: center;
}

header h1{
font-family: 'Ropa Sans', sans-serif;
font-weight:200;
font-size:3em;
color:#fff;
text-align: left;
line-height: 1.1;
}

a{text-decoration: none;}
a:hover h1  {color:#ddd;}

header h1 span{
font-size:0.8em;
letter-spacing: 0em;
}

header h2{
font-family: 'Noto Sans TC', sans-serif;
color:#fff;
font-weight:400;
font-size:3vw;
line-height: 1.1;
text-align: right;
}

header h2 span, footer h2 span{
font-size:0.4em; 
letter-spacing: 5px;
}

header h3{font-family: 'Ropa Sans', sans-serif;
font-weight:400;
font-size:18vw;
letter-spacing: -2px;
color:#fff;
line-height: 1.1;
margin-left:-20px;
text-align: left;}

.parallax-window {
min-height: 800px;
background: transparent;
}

.other{
min-height: 600px;
color:#fff;
-webkit-align-items:center;
align-items:center;
padding-left: 20px;
padding-top:80px;
padding-bottom:80px;
padding-right:50px;
position:relative;
}

.other:after{
bottom: 100%;
left: 50%;
z-index: 999;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(213, 0, 0, 0);
border-width: 30px;
margin-left: -30px;
border-bottom-color:#000000;/*theme color*//*theme color*//*theme color*//*theme color*//*theme color*/
}

.other h1{
margin-top:20px;
font-family: 'Noto Sans TC', sans-serif;
color:#fff;
font-weight:400;
font-size:5.5em;
line-height: 1.1;
text-align: left;
letter-spacing: 15px;
margin-bottom: 20px;}

.other h3{
font-family:  'Noto Sans TC',  'Noto Sans Japanese',  sans-serif;
color:#fff;
font-weight:400;
font-size:1.5em;
margin-left:10px;
letter-spacing: 2px;
line-height: 1.6;
text-align: left;}

.other h4{
font-family: 'Noto Sans TC', sans-serif;
color:#fff;
font-weight:300;
font-size:0.8em;
letter-spacing: 3px;
line-height: 1.5;
margin-top:20px;
margin-left:10px;
text-align: left;}

.text{
margin-top:100px;
}

.other p{
font-family:  'Noto Sans TC',  'Noto Sans Japanese',  sans-serif;
color:#fff;
font-weight:200;
font-size:1em;
margin-left:10px;
letter-spacing: 3px;
line-height: 1.6;
text-align: left;
margin-bottom:20px;
}

.other img{
height:80px;
margin-left:10px;
margin-right:10px;
}

.other img:hover{
opacity:0.5;
transition: all ease-in-out 0.2s;
}

.other .down{
margin-top:30px;
margin-left:10px;
}

.fancybox-thumb{
text-decoration: none;}

footer{
float:left;
width:100%;
height:auto;
padding-top:80px;
padding-bottom: 80px;
padding-right:60px;
background:#fff;
}

.colours{

width:100%;
height:100px;
z-index:888;
box-sizing: border-box;
text-align: center;
}

footer h2{
font-family: 'Noto Sans TC',  'Noto Sans Japanese', sans-serif;
color:#333;
font-weight:400;
font-size:3em;
line-height: 1.1;
text-align: left;
}

header h2 span, footer h2 span{
font-size:0.4em; 
letter-spacing: 5px;
}

.red, .blue, .yellow, .black, .purple, .green{width:0px;height:0px;display:inline-block;
margin:30px;}

.red{
border-top:#ed1c24 30px solid;
border-left:#ed1c24 30px solid;
border-bottom:#a01f28 30px solid;
border-right:#a01f28 30px solid;}

.blue{
border-top:#0071bc 30px solid;
border-left:#0071bc 30px solid;
border-bottom:#2E3192 30px solid;
border-right:#2E3192 30px solid;}

.yellow{
border-top:#FDEE21 30px solid;
border-left:#FDEE21 30px solid;
border-bottom:#F8931F 30px solid;
border-right:#F8931F 30px solid;}

.black{
border-top:#F2F2F2 30px solid;
border-left:#F2F2F2 30px solid;
border-bottom:#000000 30px solid;
border-right:#000000 30px solid;}

.purple{
border-top:#93268F 30px solid;
border-left:#93268F 30px solid;
border-bottom:#662E91 30px solid;
border-right:#662E91 30px solid;}

.green{
border-top:#3AB54A 30px solid;
border-left:#3AB54A 30px solid;
border-bottom:#006837 30px solid;
border-right:#006837 30px solid;}

.colours a:hover:nth-child(odd){
border-top:30px solid #fff;
border-bottom:30px solid #fff;
transition:0.1s ease-in-out all;}

.colours a:hover:nth-child(even){
border-left:30px solid #fff;
border-right:30px solid #fff;
transition:0.1s ease-in-out all;}


button {
-webkit-appearance: none;
background: transparent;
border: 0;
outline:0;
}

svg {
padding: 5px;
}

.arrow {
cursor: pointer;
z-index: 9999;
width: 80px;
height: 80px;

}

.down:hover polyline,.down:focus polyline,.top:hover polyline,.top:focus polyline {
stroke-width: 9;}

.top:active polyline, .down:active polyline {
stroke-width: 4;
transition: all 100ms ease-in-out;}

polyline {
transition: all 250ms ease-in-out;
}


@media only screen and (max-height:640px){
html {overflow-y: visible;}
header .down{display:none;}
section .down{display:none;}
}

@media only screen and (max-width:1200px){
.other h1{font-size:4.5em;}
footer{padding-right:0px;}
header .down{display:none;}
section .down{display:none;}
html {overflow-y: visible;}
.other {display:visible;}
}

@media only screen and (max-width:768px){
header h1{font-size:2em;}
header h3{font-size:5em;margin-left:-8px;}
header h2{text-align: left;
font-size:1.5em;}
.icon{float: left;}
.text{margin-top:0px;}
.other{ padding-left: 5px;
padding-right:15px;}
.other img{width:100%; height:auto;margin-bottom: 0px;margin-top: 0px;}
footer{text-align: center;}
.colours{margin:auto;
width:100%;height:auto;}
.red, .blue, .yellow, .black, .purple, .green{width:0px;height:0px;display:block;margin:auto;
margin-bottom:30px;}
footer h2{text-align: center;}

}