html, body{
	margin:0;
	padding:0;
	height:100%;
}

body
{
	font-family:"Microsoft Jhenghei";
	background-attachment: fixed;	
	/* background-color:#95cc8b; */
}

div{
	overflow: hidden;
}

/* table, th, td, tr{
	border:1px solid #333;
	padding:6px;
} */

a{color:#333;}

ol{margin-left:60px;}

ol li{list-style-type:decimal;}

section{
	line-height:160%;
	padding:10px;
}
table td{
	border:1px solid #666;
}
#left_menu{	
	width:60px;
	height:100%;
	padding:0 5px;
	float:left;
	background-color:#53564e;
	position: fixed;
	z-index:100;
	
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	-ms-transition: all 0.4s ease;
	transition: all 0.4s ease;
}

#left_menu:hover{	
	width:220px;
}


#left_menu span.closePanel{
	font-size:1.6em;
	color:#fff;
	position:absolute;
	top:5px;
	right:10px;
}

#left_menu li{
	color:#fff;
	list-style:none;
	margin:15% 10px 15% 10px;
}
#left_menu ul{
	width:200px;
}
#mobile_menu{
	color:#fff;
	position: fixed;
    top: 0;
	background-color:rgba(0,0,0,0.8);
	width:100%;
	z-index: 1;
	padding:10px 0;
	height:50px;
}
#mobile_menu a{color:#fff;}
div.icons{
	display:inline-block;
	vertical-align:middle;
	width:32px;
	height:32px;
	background-image:url("../images/icons.png");
}

div.list{ background-position:0 0; }
div.home{ background-position:-32px 0; }
div.intro{ background-position:-64px 0; }
div.event{ background-position:-96px 0; }
div.album{ background-position:0 -32px; }
div.winner{ background-position:-32px -32px; }
div.target{ background-position:-64px -32px; }
div.instrument{ background-position:96px -32px; }
div.contect{ background-position:0 -64px; }

#left_menu li span{ margin-left:10px; cursor:pointer; }
#left_menu li span:hover{ color:#FC0; }


#all_container{
	/* border-left:5px solid #9ee13f;
	border-right:5px solid #9ee13f; */
	padding:0;
}

#top_container{
	padding:10px 20px;
	width:calc(100% - 60px );
	
	left:60px;
	z-index: 1;
	
	display:none;
	position:fixed;
	background-color:#6d8dbd;
}

#top_container p{
	color:#fff;
	font-weight:bolder;
	margin:0;
}

#page-index p.ch{
	color:#fff;
	font-size: 3em;
	font-weight:bolder;
	/* text-shadow: 3px 3px #2154a0; */
}
#page-index p.en{
	color:#fff;
	font-size: 1.4em;	
	font-weight:bolder;
	/* text-shadow: 2px 2px #2154a0; */	
}

#page-intro .story{
	color:#fff;
	font-size:1.2em;
	line-height: 2em;
}


#top_container a{
	float:right;
}



footer{
	color:#fff;
	background-color:#265ab8;
	padding:5px 20px;
	letter-spacing:1px;
	
}
footer img{
	max-width:100%;
}

/* div.container{
	padding:15px 0;

} */

div.pages{
	/* border-bottom:1px solid #666; */
	background-color:#fff;
}

div.pages p.title{
	
	color:#2870c3;
	font-size:2em;
	margin:10px 20px 30px 0px;
	font-weight:bolder;
	border-bottom:6px solid #2870c3;
	
}

div.pages a.btn1{
	display: inline-block;
    margin: 40px 0 0 60px;
	padding:20px 80px;
	font-size:1.8em;
	font-weight:bolder;
	color:#FFF;
	background-color:#F60;
	border-radius:5px;
}


div.pages + div.grace_green{	background-color:#a2c44d; }
div.pages + div.gray_yellow{	background-color:#dbdd2d; }
div.pages + div.pool_blue{	background-color:#80d5ae; }
div.pages + div.orange{	background-color:#ff9135; }
div.pages + div.ocean_blue{	background-color:#53aefd; }
div.pages + div.rose_red{	background-color:#c63f63; }
div.pages + div.purple{	background-color:#9076d8; }

/* #page-news table.table, #page-news table.table tr, #page-news table.td{
	border-color:#fff;
} */

/*span.white{
	color:#FFF;
	font-size:3em;
}
span.green{
	color:#9EE13F
}*/





/*擐㚚��峕艶瞍詨惜�𠧧嚗�銁28th����㕑�誩���𥕦迤*/
#page-index{
	padding: 0;
}

/*擐㚚�LOGO��𣇉��*/
#page-index {
	color:#fff;
	 background:#2154a0 url("../images/bg-1.png") center center no-repeat; 

	background-size: cover;
}

#page-index, #page-index > div, #page-index > div > #hand{
	min-height:600%;
}

#page-index > div > #hand{
	/* background:url("../images/hand.png") 14% bottom no-repeat; */
	
	background-size: contain;
}

#page-index .intro-title{
	margin:1% 0;
	padding:10px 3%;	
	background-color:rbga(0,0,0,0.5);
	font-weight:bolder;
}

#page-index .intro-title img.qrCode{
	box-shadow: 3px 3px 3px grey;
	margin:5px;
}
#page-index .intro-title .slogon{
	background-color:rgba(0, 0, 0, 0.5);
}
#page-index  img{
	max-width:100%;
}


.intro-dot-square{			background-image: url("../images/intro-bg-square.png"); }
.intro-dot-circle{			background-image: url("../images/intro-bg-circle.png"); }
.intro-dot-vertical-line{	background-image: url("../images/intro-bg-vertical-line.png"); }
.intro-dot-horizontal-line{	background-image: url("../images/intro-bg-horizontal-line.png"); }
.intro-dot-triangle{		background-image: url("../images/intro-bg-triangle.png"); }


#page-index img.intro-logo{
	display: block;
	margin:0 auto;	
	background-color:rgba(255,255,255,0.3);
	border:1px solid #fff;
	padding:10px 50px;
	
}

#page-index p.content{
	font-size: 1.5em;
	max-width: 700px;
	color: #333;
	margin: 30px;
	line-height: 2em;
	font-weight:bolder;
}

#page-index span.red{
	color:red;
}

#page-intro {
	background:#144f8c url("../images/bg2.png") center center no-repeat;
	background-size:cover;
	
}
#page-intro hr{border-color:#fff;}

#page-event h5{ color:#2c75ff;}
#page-event table { max-width:500px;}
#page-event table td,#page-event table tr,#page-event table th{ border-color:#69f}
#page-event table th{ background-color:#69f;color:#fff;}
#page-event ul{ margin-left:20px;}
#page-event li{ margin-bottom:10px;}
#page-event img{ max-width:100%}


div.winnersArea{display:none;}
table.Winners{max-width:500px;margin:0 auto;}
table.Winners th{background-color:#ff5e5e;color:#fff;border:1px solid #000}
table.Winners td{padding:6px}

.sp-btn{
	cursor:pointer;
	color:#ffffff;
	position:fixed; 
	top:0; 
	right:10px;
	background-color:#ff5e1f;
	padding:10px 10px 10px 20px;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
	font-weight:bolder;
}
.sp-btn:hover{background-color:#e30;}

@media (min-width: 576px) {
	#main_container{ margin-left: 60px;}
	#mobile_menu{display:none;}
	footer{padding-left:120px;}
	div.icons{margin-right:10px;}
	#page-intro .story{	padding:40px 15%;}
	#page-index .intro-title p.info{ font-size:2em;}
}

@media (max-width: 576px) {
	#page-index .intro-title p.info{ font-size:1.2em;}
	#main_container{ margin-top: 50px;}
	#left_menu{display:none;}
	footer{font-size:0.8em}
	footer p{margin-bottom:0;}
	#mobile_menu div{padding:0}
	#page-intro .story{	padding:10px 0;}
	.sp-btn{top:50px;font-size:0.8em;padding:0 10px}
	/* #page-index img.intro-pic{
		width:768px;
		height:auto;
		max-width:1280px;
	} */
	
	/* #page-index div.intro-logo-bg{
		background-image:none;
	}
	#page-index img.intro-logo{
		width:100%;
	} */
}