/* ==========================================================================
   Public
============================================================================= */
@import url("https://use.fontawesome.com/releases/v6.4.0/css/all.css");
@import url('https://fonts.googleapis.com/earlyaccess/notosanstc.css'); /* 思源黑體 */

body, html { width:100%; height:100%; }


body { 
	font:1vw/1.5 Verdana, Meiryo, "Meiryo UI", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif;
	letter-spacing:0.06em;
	color:#222;
	background:#FFF url(../img/bg.jpg) center bottom no-repeat fixed;
	background-size:cover;
}

img {
	border:none;
	vertical-align:middle;
	
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;	/* Chrome 和 Safari */
    -moz-backface-visibility:hidden; 	/* Firefox */
    -ms-backface-visibility:hidden; 	/* Internet Explorer */
	
	image-rendering:-moz-crisp-edges;          /* Firefox        */
    image-rendering:-o-crisp-edges;            /* Opera          */
    image-rendering:-webkit-optimize-contrast; /* Safari         */
    image-rendering:optimize-contrast;         /* CSS3 Proposed  */
}


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


a {
	text-decoration:none;
	-webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}



.deer {
	position:absolute;
	left:0;
	bottom:0;
	width:42vw;
}
.deer img { width:100%; }


main {
	position:absolute;
	right:12vw;
	top:8vw;
	width:40vw;
}

header { width:100%; text-align:center; }
header img { width:100%; }

nav { text-align:center; margin-top:2vw; }
nav a {
	display:inline-block;
	width:46%;
	color:#FFF;
	font-size:1.6vw;
	margin:2%;
	text-align:center;
	padding:2vw 0;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
	border-radius:1vw;
	-webkit-box-shadow: 1px 2px 3px 2px rgba(0,0,0,0.2);
	-moz-box-shadow: 1px 2px 3px 2px rgba(0,0,0,0.2);
	box-shadow: 1px 2px 3px 2px rgba(0,0,0,0.2);
}
nav a:hover { background:#222!important; }
nav a img { width:2.5vw; margin-right:0.5vw; }



@media screen and (max-width:1024px) {
	main { position:relative; top:10vh; left:15%; width:70%; z-index:2; }
	nav a { font-size:3vw; padding:3vw 0; border-radius:8px; }
	nav a img { width:4vw; margin-right:1vw; vertical-align:bottom; }
	.deer { width:50vw; }
}

@media screen and (max-width:640px) {
	nav { margin-top:10%; }
	nav a { display:block; width:100%; margin:6% 0; font-size:5vw; }
	nav a img { width:8vw; margin-right:2vw; padding:3vw 0; vertical-align:middle; }
	.deer { width:80vw; }
}