@charset "utf-8";
/* CSS Document */

* { padding:0; margin:0; list-style:none;}
*, *:before, *:after { box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box;}
html, body { height:100%; position:relative;}
body { background:url(Body.jpg) repeat;}
audio { display:block; width:0; height:0; overflow:hidden; opacity:0;}
.team-group { position:absolute; width:100%; height:90px; padding:20px; background:#222; left:0; bottom:10px;}
.team-group * { border:0; outline:none; height:50px; line-height:50px; font-size:30px;}
.team-group .team { width:49%; height:50px; overflow:hidden; float:left; position:relative; margin-right:2%;}
.team-group .team select { width:calc( 100% - 100px ); float:left; background:darkgreen; color:#fff; font-family:"Microsoft JhengHei","Arial", "Helvetica", sans-serif; padding:0 10px;}
.team-group .team:nth-child(2) select { background:crimson;}
.team-group .team:nth-child(2) { margin-right:0;}
.team-group .team input { width:100px; text-align:center; float:left; background:yellow; color:blcak; font-weight:bold; font-family:Arial, Helvetica, sans-serif; font-size:50px;}
.Card { position:absolute; width:100%; height:calc( 100vh - 90px ); top:0; left:0; overflow:hidden;
-webkit-flex-display:flex; display: flex;
flex-wrap:wrap;}
.footer { position:absolute; width:100%; height:10px; line-height:10px; background:#000; text-align:right; font-size:10px; left:0; bottom:0; overflow:hidden;}
.footer * {color:#222;}
.Card li { width:16.66%; height:calc( ( ( 100vh - 100px ) / 5 ) - 2px ); overflow:hidden; float:left; position:relative; padding:5px; background-color:transparent; perspective:1000px;}
.Card li > span { display:block; position:relative; width:100%; height:100%; text-align:center; transition: transform 0.6s; transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); background:url(Body.jpg) repeat;}
.Card li > span > span { display:block; overflow:hidden; position:absolute; width:100%; height:100%; top:0; left:0; backface-visibility: hidden;
 -webkit-flex-display:flex; display: flex;
-webkit-align-items:center; align-items:center;
-webkit-justify-content:center; justify-content:center;
flex-wrap:wrap;}
.Card li > span > span.No { background:url(Body.jpg) repeat; color:#fff; font-family:Arial, Helvetica, sans-serif; font-size:90px; font-weight:bold;
text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);}
.Card li > span > span.Img { transform: rotateY(180deg); background:url(Body.jpg) repeat;}
.Card li > span > span.Img img { display:block; max-width:100%; height:auto; margin:0 auto; max-height:calc( ( ( 100vh - 90px ) / 5 ) - 10px );}
.Card li.open  > span{ transform: rotateY(180deg);}
.Card li.open { position:relative;}
.bomb1.open,
.bomb2.open { display:block; width:0; height:0; position:fixed; top:0; left:0; z-index:99999; opacity:0;
background:url(bomb.png) center center no-repeat, rgba(235,186,26,0.95);
/*背景圖片尺寸*/
-moz-background-size:contain;
-webkit-background-size:contain;
-o-background-size:contain;
background-size:contain;
-webkit-animation:open_ani 1s forwards;animation:open_ani 1s forwards;}
@-webkit-keyframes open_ani{
0%{ opacity:0;width:0; height:0;}
1%{ opacity:0; width:100vw; height:100vh;}
50%{ opacity:1; width:100vw; height:100vh;}
90%{ opacity:1; width:100vw; height:100vh;}
99%{ opacity:0; width:100vw; height:100vh;}
100%{ opacity:0;width:0; height:0;}
}
@keyframes open_ani{
0%{ opacity:0;width:0; height:0;}
1%{ opacity:0; width:100vw; height:100vh;}
50%{ opacity:1; width:100vw; height:100vh;}
90%{ opacity:1; width:100vw; height:100vh;}
99%{ opacity:0; width:100vw; height:100vh;}
100%{ opacity:0;width:0; height:0;}
}
.openbtn { display:block; width:200px; height:200px; overflow:hidden; background:url(Card.jpg) center center repeat; position:fixed; top:50%; margin-top:-100px; left:50%; margin-left:-100px; z-index:1;
 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); color:#fff;
/*圓角*/
-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;}
.openbtn > span { display:block; width:100%; text-align:center; color:#fff; font-family:Arial, Helvetica, sans-serif;}
.openbtn > span.openspan {height:180px; line-height:180px; font-size:30px;}
.openbtn > span.closespan { height:20px; line-height:20px; font-size:12px;}