@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:#f7c6bf; font-family:arial , "微軟正黑體";}


/* container */
#container {background:url(../images/bg.jpg) #edded8 no-repeat center;}
#container .wrap{position:relative; width:96%; max-width:1170px; margin:0 auto; padding:118px 0 0 0;}

/* logo */
#logo{ position:absolute; left:-100px; top:20px; width:168px; height:88px; 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_p */
#imagery_p{ width:100%; padding-bottom:58%; position:absolute; right:0; background:url(../images/imagery_p.png) left top no-repeat; background-size:100% auto; text-indent:-9999px; opacity:0; animation:imagery_p .5s .5s; -webkit-animation:imagery_p .5s .5s; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;}

@keyframes imagery_p{
0%{opacity:0;}
100%{opacity:1;}
}

@-webkit-keyframes imagery_p{
0%{opacity:0;}
100%{opacity:1;}
}

/* imagery */
#imagery{ width:100%; padding-bottom:56%; background:url(../images/imagery.png) left top no-repeat; background-size:100% auto; text-indent:-9999px; opacity:0; animation:imagery .5s 1s; -webkit-animation:imagery .5s 1s; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; position:relative; z-index:2;}

@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;}
}

/* bottom */
#bottom{ background:#f7c6bf; position:relative;}
#bottom:before{ content:""; display:block; width:100%; height:374px; background:url(../images/bottom_bg.png) center no-repeat; position:absolute; top:-374px;}
#bottom .wrap{ position:relative; width:96%; max-width:1170px; margin:0 auto; overflow:hidden; padding:10px 0 0 0; top:-10px;}
/* date */
#date{ float:left; width:333px; height:146px; background:url(../images/date.png) no-repeat; background-size:100% auto; text-indent:-9999px; opacity:0; animation-name:date; -webkit-animation-name:date; 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 date{
from{bottom:-100px; opacity:0;}
to{bottom:2%; opacity:1;}
}

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

/* navigation */
#navigation{float:right; padding:30px 0;}
#navigation a{position:relative; left:-100px; display:inline-block; width:184px; height:51px; line-height:42px; margin:0 10px; background:url(../images/menu_bg.png) no-repeat center; font-size:26px; color:#9f1f24; font-weight:bold; letter-spacing:5px; 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{ font-size:28px;}

@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{ float:right; font-size:15px; color:#999; 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:1196px){
/* navigation */
#navigation{ width:auto;}
#navigation a{ width:150px; height:50px; line-height:50px; font-size:20px; background:none; border-top:1px solid #841e2b; border-bottom:1px solid #841e2b;}
#navigation a:hover{ font-size:22px;}
/* date */
#date { width:280px;}
}

@media screen and (max-width:1000px){
/* logo */
#logo{ width:150px; height:79px;}
/* imagery */
#imagery{ padding-bottom:55%;}
/* date */
#date{ width:200px; height:86px;}
/* film */
#film{position:static; width:400px; height:359px; margin:20px auto; background-image:url(../images/film_mobile.png);}
/* footer */
#footer{ float:none; clear:both; margin:20px 0;}
}

@media screen and (max-width:916px){
/* logo */
#logo{ width:130px; height:68px;}
/* navigation */
#navigation a{ width:120px;}
/* date */
#date{ width:150px; height:65px;}
}
@media screen and (max-width:840px){
/* gotop */
#gotop{ top:inherit; bottom:20px; margin-top:0; right:2%;}

}

@media screen and (max-width:768px){
/* navigation */
#navigation{ width:500px; padding:20px 0;}
#navigation a{ width:100px;}

/* bottom */
#bottom{ padding:10px 0; }
}

@media screen and (max-width:680px){
/* date */
#date{ float:none; margin:0 auto; width:200px; height:88px;}
/* navigation */
#navigation{width:100%; float:none;} 
#navigation a{width:23%; height:50px; margin:1%; line-height:50px; letter-spacing:0;}
/* bottom */
#bottom{ padding-top:70px; top:-70px;}
#bottom:before{ display:none;}
}
@media screen and (max-width:414px){
/* header */
#logo{ width:80px; height:42px;}
/* container */
#container .wrap{ padding-top:70px;}
/* navigation */
#navigation{ width:90%; margin:0 auto;}
#navigation a{width:100%; margin:5px auto;}
}