@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(https://fonts.googleapis.com/css?family=Geostar+Fill);


@media (orientation: landscape) { 
	span.holder{
		padding:1vw;
		font-size:0.8vw;
		line-height:1.5vw;
	}
	
	span#SNS img.icon{
		height:2.6vw;
		padding:0 0.2vw;
		padding-bottom:0.3vw;
	}
	
	span#SNS img.icon#logo{
		height:12vw;
	}
}


@media (orientation: portrait) {
	span.holder{
		padding:2vw;
		font-size:2.8vw;
		line-height:3.6vw;
	}
	
	span#SNS img.icon{
		height:7.5vw;
		padding:0 0.5vw;
		padding-bottom:1vw;
	}
	
	span#SNS img.icon#logo{
		height:38vw;
	}
}
span#SNS img.icon:hover{
	transform: scale(1.1); 
}
span#SNS img.icon#logo:hover{
	transform: scale(1.05); 
}
	
span.holder{
	background-color:rgba(0,0,0,0.7);
	display:inline-block; 
	vertical-align:middle;
	text-align:center;
	overflow:hidden;
}

/*========  < 1:1  ==========*/
span.holder1{
	//border:1vw groove #ddd;
	border-radius:2vw;
	width:90vw;
	height:50vw;
	margin:2vw 0;
}


/*========  <= 20:9  ==========*/
span.holder2{
	//border:0.4vw groove #ddd;
	border-radius:1.2vw;
	width:26vw;
	height:16vw;
	margin:0.8vw;	
}

/*========  > 20:9  ==========*/
span.holder3{
	//border:0.4vw groove #ddd;
	border-radius:1.2vw;
	width:32vw;
	height:18vw;
	margin:1vw;	
}

/*============================*/
span#gundam{
	background-image: url('../images/GCG_Logo.png');
	background-size:90%;
	background-position:center;
	background-repeat:no-repeat;
}
span#gundam:hover{
	transform: scale(1.05); 
}

span#ua{
	background-image: url('../ua/images/logo.png');
	background-size:90%;
	background-position:center;
	background-repeat:no-repeat;
}
span#ua:hover{
	transform: scale(1.05); 
}

span#dcg{
	background-image: url('../images/DCG_Logo.png');
	background-size:90%;
	background-position:center;
	background-repeat:no-repeat;
}
span#dcg:hover{
	transform: scale(1.05); 
}

span#conan{
	background-image: url('../conan/images/logo.png');
	background-size:75%;
	background-position:center;
	background-repeat:no-repeat;
}
span#conan:hover{
	transform: scale(1.05); 
}

span#pad{
	background-image: url('../pad/images/Logo.png');
	background-size:90%;
	background-position:center;
	background-repeat:no-repeat;
}
span#pad:hover{
	transform: scale(1.05); 
}

span#youtube{
	background-image: url('../YouTube/images/HKYouTubeChannel.png');
	background-size:90%;
	background-position:center;
	background-repeat:no-repeat;
}
span#youtube:hover{
	transform: scale(1.05); 
}

span#order1{
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
}

span#order2{
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
}


html {
    display: table;
	margin:auto;
}

body {
    display: table-cell;
	text-align:center;
    vertical-align: middle;
	font-family: 'Noto Sans TC', sans-serif;
	font-weight: 500;
	background-image: url('../images/bg-image.jpg');
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	background-attachment: fixed;
	color:#fff;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	overflow-x:hidden;
	height:100vh;
}

body:after{
	content:"";
	position:fixed; /* stretch a fixed position to the whole screen */
	top:0;
	height:100vh; /* fix for mobile browser address bar appearing disappearing */
	left:0;
	right:0;
	z-index:-2; /* needed to keep in the background */
	background-image: url('../images/bg-image.jpg');
	background-position:center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

html,body{
	padding:0;
	margin:0;
}

a{
    text-decoration: none;
	color:#fff;
}