/*===========================================
Homepage
===========================================*/
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700);
#homepage-container{
	height:auto!important;min-height:420px;height:420px; 
}
#homepage-container *{
	box-sizing:border-box;
}
#homepage-top{
	padding:35px 0;
	height:auto!important;min-height:326px;height:326px; 
}
.home-title{
	margin:0;
	height:40px;
}
/*-------------------------------------------
epaper
-------------------------------------------*/
#epaper{
	height:97px;
	background:url(../images/home-epaper-bg.jpg) 50% 50% no-repeat #9ca2a9;
}
.epaper-section{
	position:absolute; left:296px; top:32px;
}
.epaper-title{
	background:url(../images/home-titile-epaper.png) 0 0 no-repeat;
	width:118px; height:24px;
	display:inline-block;
	vertical-align:3px;
	text-indent:-99999em;
}
#epaper .epaper-email{
	width:260px;
	border-color:#999;
	margin:0 0 0 5px;
}
#epaper .btn-order{padding:8px 15px;}

/*-------------------------------------------
login
-------------------------------------------*/
#login{
	position:absolute; left:0px; top:-76px;
	width:238px; height:310px;
	padding:32px 10px;
	background-color:#fff;
}
	#login .home-title{
		background:url(../images/home-titile-member.png) no-repeat;
		text-indent:-99999em;
		margin-bottom:15px;
	}
	#login div{
		position:relative;
		margin-bottom:7px;
	}
		#login input{
			width:100%;
			background-color:#fafafa;
			padding:8px;
		}
		#login .input-code{
			width:50%;
		}
			#login .v-code{
				position:absolute; right:0; top:2px;
				width:40%;
				background-color:#d1d1d1;
				color:#fff; letter-spacing:5px; font-size:18px;
				text-align:center;
				padding:4px;
				cursor:default;
			}
			#login .v-code:hover{
				background-color:#999;
			}
			#login .btn-login{
				background-color:#009def;
				font-size:16px;
				margin-top:8px;
			}

#logined{
	padding:0 10px;
}
	#logined strong{
		font-size:16px;
	}
	#logined p{
		line-height:1.8;
		text-indent:2em;
	}
ul#you-can{
	margin:15px 0;
	padding:0;
	list-style:none;
	text-align:center;
}
	ul#you-can li{
		display:inline-block;
		width:86px;
		margin:0 5px;
		text-align:center;
		padding-bottom:5px;
	}
		ul#you-can li .btn{
			width:100%;
			line-height:40px;
			background-color:#f4f4f4;
			color:#009def; font-size:15px;
		}
		ul#you-can li .btn:hover{
			background-color:#009def;
			color:#fff !important;
		}
/*-------------------------------------------
news list
-------------------------------------------*/
#news-list{
	float:left;
	margin-left:295px;
	width:635px;
	position:relative;
}
#news-list .home-title{
	background:url(../images/home-titile-news.png) no-repeat;
	text-indent:-99999em;
	margin-bottom:16px;
}
#news-list .btn-more{
	position:absolute; right:0; top:0;
	font-size:12px;
	box-shadow:none;
}
#news-list ul{
	margin:0;
	padding:0;
	list-style:none;
}
#news-list li{
	padding:6px 0;
	line-height:20px;
}
#news-list time{
	display:inline-block;
	background:url(../images/news-time-tag.png) no-repeat;
	text-align:center;
	color:#fff; font-size:12px; line-height:20px; text-indent:-10px;
	width:86px;
	vertical-align:2px;
}
#news-list .news{
	display:inline-block;
	width:530px; height:22px;
	margin-left:10px;
	padding-top:5px;
	overflow:hidden;
	color:#222;
}
#news-list .news:hover{
	color:#00aeef;
}

/*-------------------------------------------
events
-------------------------------------------*/
#events{
	background-color:#babfc5;
}
	#eventsTab{
		text-align:right;
	}
		#eventsTab .btn{
			position:absolute; right:80px; top:-30px; z-index:10;
			box-shadow:none;
			border-bottom-left-radius:0; border-bottom-right-radius:0;
			margin:0;
			padding:0;
			width:80px; height:30px;
			line-height:30px;
		}
		#eventsTab .btn:hover{
			
		}
		#eventsTab .btn:nth-child(2){
			right:0;
		}
		#eventsTab .btn.active{
			background-color:#f5f5f5 !important;
		}
		#eventsTab .btn.active:hover{
			color:#000 !important;
		}
	#events .eventsTabContent{
		display:none;
	}
	#events .eventsTabContent.active{
		display:block;
	}
		#events ul{
			padding:0;
			list-style:none;
		}
			#events ul li{
				display:block;
				float:left;
				width:25%;
				position:relative;
				border-bottom:1px solid #ddd;
			}
				#events .event{
					background:url(../images/home-event-bg.png) 0 0 repeat-y #fff;
					width:100%;
					height:auto!important;min-height:276px;height:276px;
					font-family:'Roboto Condensed', "나눔고딕", "Nanum Gothic", Arial, "微軟正黑體", "Microsoft JhengHei", "微软雅黑体", "Microsoft YaHei", "LiHei Pro", Helvetica, sans-serif;
				}
					#events .big-date{
						background:url(../images/home-event-date-bg.png) 0 0 repeat-y #00acf2;
						color:#fff;
						padding:8px 12px;
						height:100px;
					}
						#events .big-date strong{
							display:block;
							font-size:80px; line-height:70px; font-weight:400;
							text-align:center;
							margin-top:-5px;
						}
					#events .desc{
						padding:17px;
						color:#333;
						height:auto!important;min-height:200px;height:200px;
					}
						#events .desc .name{
							margin:0 0 16px;
							color:#009def; font-size:18px; line-height:1.3; 
						}
						#events .desc .name.long-name{
							height:66px;
							overflow:hidden;
						}
						#events .desc div{
							margin:3px 0;
						}
						#events .desc .date{
							font-weight:700;
						}
						#events .desc .venue{
							height:18px;
							overflow:hidden;
						}
						#events .desc .organizers{
							color:#aaa;
						}
				#events .latest{
					position:absolute; top:-84px; z-index:10;
					box-shadow:0 1px 5px rgba(0,0,0,.2);
				}
					#events .latest .big-date{
						height:156px;
					}
						#events .latest .big-date strong{
							font-size:140px;
							line-height:120px;
						}
						#events .latest .name{
							font-size:20px;
						}
						#events .latest .name.long-name{
							height:104px;
							overflow:hidden;
						}
						#events .latest .desc{
							height:265px !important;
							overflow:hidden;
						}

/*-------------------------------------------
dr map
-------------------------------------------*/
#dr-map{
	height:300px;
	background:url(../images/home-map-bg.jpg);
	background-size:cover;
}
#dr-map *{
	box-sizing:border-box;
}
#dr-map .home-title{
	background:url(../images/home-titile-map.png) no-repeat;
	text-indent:-99999em;
	margin-bottom:18px;
}
#search-info{
	float:left;
	width:237px;
	padding-top:76px;
}
	#search-info div{
		margin:8px 0;
	}
		#search-info select{
			width:47%;
			border-color:#0f85c3;
		}
		#search-info input{
			width:100%;
			border-color:#0f85c3;
			padding:10px;
		}
		#search-info .btn-search{
			font-size:16px;
		}
		#search-info .btn-search:disabled{
			background-color:#e3e3e3;
			color:#999;
		}
#map-contact{
	float:right;
	width:705px; height:254px;
	margin-top:22px;
}

/*-------------------------------------------
gallery
-------------------------------------------*/
#homepageGallery{
	padding:40px 0;
	position:relative;
}
	#homepageGallery .home-title{
		background:url(../images/home-titile-gallery.png) no-repeat;
		text-indent:-99999em;
		margin-bottom:30px;
	}
	#homepageGallery .btn-more{
		position:absolute; right:0; top:40px;
		font-size:12px;
		box-shadow:none;
	}
	#homepageGallery ul{
		overflow:hidden;
		list-style:none;
		margin:0;
		padding:0;
	}
		#homepageGallery ul li{
			float:left;
			margin:0 20px;
			padding:5px;
			width:16%;
			background-color:#f2f2f2;
		}
			#homepageGallery ul li img{
				width:150px;
				height:110px;
			}
			#homepageGallery ul li a{
				display:block;
				margin:6px 0 2px;
				font-size:14px;
				line-height:18px;
			}
				#homepageGallery ul li a time{
					margin-top:5px;
					color:#555;
					display:block;
					font-size:13px;
				}
					#homepageGallery ul li a time i.icon-calendar{
						margin-right:5px;
						font-size:12px;
					}

/*-------------------------------------------
@2x
-------------------------------------------*/
@media 
all and (min--moz-device-pixel-ratio: 1.5),
all and (-o-min-device-pixel-ratio: 3/2),
all and (-webkit-min-device-pixel-ratio: 1.5),
all and (min-device-pixel-ratio: 1.5),
all and (min-resolution: 1.5dppx) {
	
}

@media screen and (min-width: 1200px) {
	#news-list{
		width:700px;
	}
	#news-list .news{
		width:590px;
	}
}
@media screen and (max-width: 1024px) {
	#news-list{
		width:635px;
	}
	#news-list .news{
		width:525px;
	}
}