@charset "utf-8";
@import url("../css/reset.css");

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section{	display:block;}
html{font-size:100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;}
body{margin:0; padding:0; font-size:1em; line-height:1.4em; color:#666; 
	font-family:Helvetica, Tahoma, Arial, sans-serif;}
a{text-decoration:none; color:#666;}
a:hover{text-decoration:underline; color:#12989d;}

button, input, select, textarea{font-family:sans-serif; color:#333;}
input[type="checkbox"], input[type="radio"]{box-sizing:border-box; padding:0; *width:13px;}

/* clear float */
.clearfix:before, .clearfix:after{content:"";	display:table;}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}
.clearboth{clear:both;}


/* right menu */
nav ul{
	list-style:none;
	position:fixed;
	right:20px;
	z-index:999;
}

#nav li{
	margin:0 0 15px 0;	
}

article h2{ font-family:'Lobster Two'; font-size:60px; margin:25px 0; line-height:1em; }

.story{ height:950px; padding:0; margin:0; width:100%; max-width:1920px; position:relative; margin:0 auto; border-top:1px solid rgba(255,255,255,0.3); border-bottom:1px solid rgba(0,0,0,0.4); box-shadow:0 0 50px rgba(0,0,0,0.8);}

#first{ background:url(../images/first-bg.jpg) 50% 0 no-repeat fixed; }
#second{ background:url(../images/slide2.jpg) 50% 0 no-repeat fixed; }
#fourth{ background:url(../images/slide3.jpg) 50% 0 no-repeat fixed; }
#third{ background:url(../images/slide4.jpg) 50% 0 no-repeat fixed; }
#theend{ background:url(../images/puckered.png) 50% bottom no-repeat fixed; }

/* Introduction */
#first .nfi-logo{ background:url(../images/nfi-logo.png) 50% 100px no-repeat fixed; min-height:100%; padding:0; margin:0; width:100%; max-width:1920px; position:relative; margin:0 auto; }
#first article{ width:100%; top:440px; position:absolute; text-align:center;}
#first article p,
#first article a{ color:#111; text-decoration:none; }
#first article a:hover{ color:#fff; text-decoration:none;}
#first article .service{color:#fff; font-size:24px; font-family:"微軟正黑體"; text-shadow:0 1px 3px rgba(0%,0%,0%,.7); padding:1em 0 1.5em;}
#first article small{font-size:13px; color:#111;font-weight:bold;}

/* Background Only */
#second{ padding:50px 0;}
#second article{ background:url(../images/grain.png) repeat #333; color:#fff; width:445px; margin-left:100px; padding:10px 20px; text-shadow:0 -1px 0 rgba(0,0,0,0.5); line-height:1.5em; box-shadow:0 0 25px rgba(0,0,0,0.3); border:1px solid rgba(150,150,150,0.1); }
#second article p{ margin-bottom:25px; }
#second article a{ color:#ff0;}

/* Photograph */
#third article{background:url(../images/grain.png) repeat #333; color:#fff; padding:10px 20px; margin:100px 0 0 60%; text-shadow:0 -1px 0 rgba(0,0,0,0.5); line-height:1.5em; color:#fff; position:absolute; top:0; box-shadow:0 0 25px rgba(0,0,0,0.3); border:1px solid rgba(150,150,150,0.1); }
#third .photograph{background:url(../images/qr.png) transparent 20% 100px no-repeat fixed; min-height:1000px; padding:0; margin:0; width:100%; max-width:1920px; position:relative; margin:0 auto; }
#third article p{ width:300px; margin-bottom:25px; }

/* HTML5 Video */
#fourth article{  margin-left:10%; text-shadow:0 -1px 0 rgba(0,0,0,0.5); line-height:1.5em; color:#fff; position:absolute; top:0; }
#fourth article p{ width:300px; margin:50px 0; }
#fourth video{ position:fixed; left:50%; box-shadow:0 0 25px rgba(0,0,0,0.7); z-index:1;}

/* The End */
#theend .byebye{ background:url(../images/theend.png) 40% 100px no-repeat fixed; height:1000px; padding:0; margin:0; width:100%; max-width:1920px; position:relative; margin:0 auto; }