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

body { background:black; color:#ffffff; }
body, textarea, select { font-family:Montserrat, 微軟正黑體, Microsoft Jhenghei, Verdana, Helvetica, Arial, sans-serif; }
body, textarea { font-size:14px; }
select { font-size:.8em; }
body, html, *, div { margin:0; padding:0; box-sizing:border-box; }
body, html { width:100%; height:100%; position:relative; }
table { border:none; border-collapse:collapse; border-spacing:0; }
img { border:none; }
a { text-decoration:none; color:white; }
a:hover { text-decoration:none; color:#ef5c21; }
p { font-size:1em; margin-bottom:1.3em; line-height:1.3em; 2text-align:justify; text-justify:inter-ideograph; }

@font-face {
  font-family: 'Montserrat';
  src: url('font-face/Montserrat-Bold.eot'); /* IE9 Compat Modes */
  src: url('font-face/Montserrat-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('font-face/Montserrat-Bold.woff') format('woff'), /* Modern Browsers */
       url('font-face/Montserrat-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('font-face/Montserrat-Bold.svg#2eb9a020d90588d099da01ff1a93c338') format('svg'); /* Legacy iOS */
       
  font-style:   normal;
  font-weight:  700;
}

@font-face {
  font-family: 'Montserrat';
  src: url('font-face/Montserrat-Light.eot'); /* IE9 Compat Modes */
  src: url('font-face/Montserrat-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('font-face/Montserrat-Light.woff') format('woff'), /* Modern Browsers */
       url('font-face/Montserrat-Light.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('font-face/Montserrat-Light.svg#c152625b71562a7bb7b752375273b2d5') format('svg'); /* Legacy iOS */
       
  font-style:   normal;
  font-weight:  200;
}

@font-face {
  font-family: 'Montserrat';
  src: url('font-face/Montserrat-Regular.eot'); /* IE9 Compat Modes */
  src: url('font-face/Montserrat-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('font-face/Montserrat-Regular.woff') format('woff'), /* Modern Browsers */
       url('font-face/Montserrat-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('font-face/Montserrat-Regular.svg#95d90f2cd2aa64bdfee0e9f34c516e71') format('svg'); /* Legacy iOS */
       
  font-style:   normal;
  font-weight:  400;
}

@font-face {
	font-family:"BebasNeue";
	src:url('font-face/bebasneue-webfont.eot');
	src:url('font-face/bebasneue-webfont.eot?#iefix') format('embedded-opentype'),
		url('font-face/bebasneue-webfont.woff') format('woff'),
		url('font-face/bebasneue-webfont.ttf') format('truetype'),
		url('font-face/bebasneue-webfont.svg#BebasNeue') format('svg');
		
  font-style:   normal;
  font-weight:  normal;
}





/* UTIL */

.clr { clear:both; height:0; }
.floatL { float:left; }
.floatR { float:right; }
.last { margin:0; }
.hide { display:none; }




/* ESSENTIAL */

.giveaway { position:relative; text-align:center; }

.giveaway .contents { z-index:2; position:relative; width:100%; height:100%; max-width:1630px; display:inline-block; vertical-align:top; padding:0 28px 48px; }
.giveaway .contents .hdr { padding:70px 0 28px; position:relative; width:100%; float:left; }
.giveaway .contents .hdr .logo { width:283px; position:relative; float:left; }
.giveaway .contents .hdr .logo img { width:100%; float:left; }
.giveaway .contents .hdr .title { width:165px; float:right; }
.giveaway .contents .hdr .fa { margin-right:5px; }
.giveaway .contents h1 { font-weight:200; text-align:left; margin-bottom:18px; font-size:28px; }
.giveaway .contents h2 { font-weight:200; text-align:left; margin-bottom:18px; font-size:24px; border-bottom:1px solid white; padding-bottom:10px; margin-botom:18px; }
.giveaway .contents .index_overlay { position:fixed; top:0; left:0; right:0; bottom:0; z-index:10; }
.giveaway .contents .index_overlay .wrapper { display:table; width:100%; height:100%; background-color:rgba(0,0,0,.7); }
.giveaway .contents .index_overlay .cell { display:table-cell; text-align:center; vertical-align:middle; width:100%; height:100%; }
.giveaway .contents .index_overlay .cell i { vertical-align:middle; }
.giveaway .contents .index_overlay .cell span { display:inline-block; vertical-align:middle; font-size:16px; }
.giveaway .contents .index_overlay .error { display:none; }
body.error .giveaway .contents .index_overlay .loading { display:none; }
body.error .giveaway .contents .index_overlay .error { display:block; }
.giveaway .contents .year_group { display:none; }

.templates { display:none; }

.items_grid_wrapper { width:100%; overflow:hidden; position:relative; }
.items_grid { width:100%; width:101.143%; float:left; position:relative; text-align:left; font-size:0; margin-left:-1.143%; }
.items_grid .item { width:20%; padding-left:1.143%; display:inline-block; vertical-align:top; font-size:14px; position:relative; margin-bottom:28px; }
.items_grid .item a { width:100%; cursor:pointer; position:relative; float:left; margin-bottom:18px; }
.items_grid .item a:hover { color:white; text-decoration:none; }
.items_grid .cover {
	width:100%; padding-bottom:100%; box-shadow:0 6px 12px rgba(0, 0, 0, 0.176); background-size:cover; background-position:center; background-repeat:no-repeat; position:relative;
	transition:filter 300ms; -webkit-transition:-webkit-filter 300ms; -ms-transition:-ms-filter 300ms;
}
.items_grid .cover.top { background-position:top; }
.items_grid .cover.bottom { background-position:bottom; }
.items_grid .type { text-decoration:underline; margin-bottom:5px; display:inline-block; }
.items_grid .name { margin-bottom:5px; font-size:16px; }
.items_grid .finish { display:none; font-size:18px; padding:5px; border-radius:5px; border:2px solid white; vertical-align:top; width:auto; position:absolute; top:18px; left:18px; box-shadow:0 6px 12px rgba(0, 0, 0, 0.176); background-color:white; color:black; z-index:1; white-space:nowrap; font-size:14px; }

.items_grid .item.disable .cover {
	filter:grayscale(100%) contrast(50%); -webkit-filter:grayscale(100%) contrast(50%); -ms-filter:grayscale(100%) contrast(50%);
}
.items_grid .item.disable .cover:hover { filter:none; -webkit-filter:none; -ms-filter:none; }
.items_grid .item.disable .finish { display:block; }

.copyright { float:right; position:relative; font-size:14px; margin-top:32px; line-height:1.6em; }

.giveaway .bg { z-index:1; position:fixed; top:0; left:0; right:0; bottom:0; background:#ef5c21 url('../img/bg.jpg') center center no-repeat; background-size:cover; }


@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 

}
@media screen and (max-width: 1319px) {

}
@media screen and (max-width: 1215px) {

}
@media screen and (min-width: 960px) {
	
}
@media screen and (max-width: 959px) {	
	.giveaway .contents .hdr { padding-top:36px; }
	
	.items_grid .item { width:33.333%; }
}
@media screen and (max-width: 819px) {

}
@media screen and (max-width: 767px) {
	.giveaway .contents .hdr .logo { width:50%; max-width:283px; }
	.giveaway .contents .hdr .title { width:40%; max-width:165px; }
	
	.items_grid .item { width:50%; }
	.items_grid .name { font-size:14px; }
	.items_grid .finish { top:10px; left:10px; }
	
	.items_grid .item.disable .cover {
		filter:grayscale(100%) contrast(50%); -webkit-filter:grayscale(100%) contrast(50%); -ms-filter:grayscale(100%) contrast(50%);
	}
}
@media screen and (max-width: 669px) {
	
}
@media screen and (max-width: 479px) {
	.giveaway .contents { padding-left:10px; padding-right:10px; }
}
@media screen and (max-width: 349px) {
	
}