@charset "utf-8";

@import url("jquery.fancybox.css");

/* reset css */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, p, th, td {margin:0; padding:0; -webkit-text-size-adjust:none;}
th{font-weight:normal; text-align:left;}
table{border-collapse:collapse; border-spacing:0;}
img{border:0;}
ol, ul{list-style:none;}
a{outline:none; hlbr:expression(this.onFocus=this.blur()); text-decoration:none; cursor:pointer;}
input , select , textarea , button{outline:none; border-radius:0; font-family:arial , "微軟正黑體";}
button{padding:0; cursor:pointer;}

body{background:#fce100; font-family:arial , "微軟正黑體";}

/* container */
#container{position:relative; width:96%; max-width:1170px; margin:0 auto; padding:15px 0 130px 0;}

/* logo */
#logo{ position:absolute; left:-100px; top:35px; width:244px; height:90px; background:url(../images/logo.png); background-size:100% auto; text-indent:-9999px; opacity:0; animation:logo .3s linear; -webkit-animation:logo .3s linear; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; z-index:1}
#logo a{ display:block; height:100%;}

@keyframes logo{
from{left:-100px; opacity:0}
to{left:0; opacity:1;}
}

@-webkit-keyframes logo{
from{left:-100px; opacity:0}
to{left:0; opacity:1;}
}

/* imagery */
#imagery{width:100%; padding-bottom:59%; background:url(../images/imagery.jpg) center top no-repeat; background-size:100% auto; text-indent:-9999px; opacity:0; animation:imagery .5s .5s; -webkit-animation:imagery .5s .5s; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;}

@keyframes imagery{
0%{transform:scale(0,0); opacity:0}
60%{transform:scale(1.5,1.5);}
100%{transform:scale(1,1); opacity:1;}
}

@-webkit-keyframes imagery{
0%{-webkit-transform:scale(0,0); opacity:0}
60%{-webkit-transform:scale(1.5,1.5);}
100%{-webkit-transform:scale(1,1); opacity:1;}
}

/* film */
#film{position:absolute; left:35px; bottom:2%; display:block; width:202px; height:181px; background:url(../images/film.png); background-size:100% auto; text-indent:-9999px; opacity:0; animation-name:film; -webkit-animation-name:film; animation-duration:.3s; -webkit-animation-duration:.3s; animation-delay:1s; -webkit-animation-delay:1s; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; transition:all .3s;}

@keyframes film{
from{bottom:-100px; opacity:0;}
to{bottom:2%; opacity:1;}
}

@-webkit-keyframes film{
from{bottom:-100px; opacity:0;}
to{bottom:2%; opacity:1;}
}

/* navigation */
#navigation{position:absolute; left:280px; top:87%; width:880px; text-align:right;}
#navigation a{position:relative; left:-100px; display:inline-block; width:200px; height:109px; margin:0 10px; background:#cb0000; border:2px solid #000; border-radius:50%; box-shadow:10px -10px 0 #370000; font-size:24px; color:#ffff00; line-height:109px; text-align:center; box-sizing:border-box; opacity:0; animation-name:navi; -webkit-animation-name:navi; animation-duration:.3s; -webkit-animation-duration:.3s; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; transition:all .3s;}
#navigation a:nth-child(1){animation-delay:1.3s; -webkit-animation-delay:1.3s;}
#navigation a:nth-child(2){animation-delay:1.5s; -webkit-animation-delay:1.5s;}
#navigation a:nth-child(3){animation-delay:1.7s; -webkit-animation-delay:1.7s;}
#navigation a:nth-child(4){animation-delay:1.9s; -webkit-animation-delay:1.9s;}
#navigation a:hover{box-shadow:0 0 0 #370000; color:#FFF;}

@keyframes navi{
form{left:-100px; opacity:0;}
to{left:0; opacity:1;}
}

@-webkit-keyframes navi{
form{left:-100px; opacity:0;}
to{left:0; opacity:1;}
}


/* footer */
#footer{padding:30px 10px; font-size:15px; color:#474747; text-align:center;}

/* gotop */
#gotop{ display:none; position:fixed; top:50%; right:20px; margin-top:-30px; width:60px; height:60px; border-radius:50%; background:url(../images/top.png) no-repeat center 10px rgba(0,0,0,.8); color:#fff; font-weight:bold; font-size:15px; line-height:70px; text-align:center; transition:all .3s; }
#gotop:hover{ opacity:.8;}


/* RWD */
@media screen and (max-width:1240px){
/* navigation */
#navigation{left:28%; width:680px;}
#navigation a{width:150px; height:80px; box-shadow:5px -5px 0 #370000; font-size:20px; line-height:80px;}
}

@media screen and (max-width:1000px){
/* logo */
#logo{width:200px; height:74px; margin-bottom:20px;}
/* container */
#container{padding:35px 0 10px 0;}
/* imagery */
#imagery{background-image:url(../images/imagery_mobile.jpg);}
/* navigation */
#navigation{position:static; width:100%; margin-top:5%; text-align:center;}
/* film */
#film{position:static; width:400px; height:359px; margin:20px auto; background-image:url(../images/film_mobile.png);}
}

@media screen and (max-width:768px){
/* logo */
#logo{width:150px; height:56px;}
/* navigation */
#navigation{width:390px; margin:0 auto;}
#navigation a{margin:20px;}
}
@media screen and (max-width:840px){
/* gotop */
#gotop{ top:inherit; bottom:20px; margin-top:0; right:2%;}
}
@media screen and (max-width:480px){
/* header */
#logo{ width:120px; height:44px;}
/* navigation */
#navigation{width:100%;}
#navigation a{width:144px; height:60px; margin:5px; box-shadow:3px -3px 0 #370000; font-size:15px; line-height:60px;}
/* film */
#film{width:280px; height:250px; margin:10px auto;}
}
@media screen and (max-width:414px){
/* header */
#logo{ width:80px; height:30px;}
}
@media screen and (max-width:320px){
/* navigation */
#navigation a{width:140px;}
}