@font-face {
	font-family: "msjhbd";
	src: url('../font/msjhbd.ttc');
}
*{
	font-family:"Verdana", "Microsoft JhengHei";
}
strong{
	font-family:"msjhbd";
	color:#000000;
}
html,body{
	margin:0;
	padding:0;
	width:100%;
	height:100%;
}
#top{
	width:100%;
	height:calc(100vw * 0.233);
	background-image:url('../images/bg_top.png');
	background-size:cover;
}
#logo{
	padding-top:calc(100vw * 0.233 * 0.18);
	padding-left:34px;
}
#logo img{
	width:55%;
}
.block{
	width:70%;
	margin:50px auto;
	border:10px solid rgba(213,239,252, 0.6);
	border-radius:10px;
	padding:34px;
	box-shadow: 2px 2px 10px rgba(0,0,0,0.6);
}
.block_item{
	display:inline-block;
	vertical-align:middle;
}
.block_transparent{
	width:calc(100% - 68px);
	margin:50px auto;
	padding:34px;
}
.block_transparent .block_item{
	text-align:center;
}
.btn_row{
	width:100%;
	clear:both;
	padding-top:40px;
}
#break-record{
	padding-bottom:30px;
	background-image:url('../images/bg_break_record.png');
	background-size:50% auto;
	background-position:left bottom;
	background-repeat:repeat-x;
}
#break-record .block_item:nth-child(odd){
	width:33%;
}
#break-record .block_item:nth-child(even){
	width:66%;
}
#break-record-join-btn{
	width:100px;
	margin:0 auto;
	border-radius:5px;
	background-color:#fcb03a;
	color:white;
	font-size:24px;
	padding:17px 34px;
	font-weight:bold;
	cursor:pointer;
}
#theme-song{
	width:100%;
	background-image:url('../images/bg_theme_song2.png');
	background-size:cover;
	border-top:20px solid #cccccc;
	padding-bottom:34px;
	border-bottom:20px solid #cccccc;
	margin-top:68px;
}
#theme-song .block_item:nth-child(odd){
	width:49%;
	margin-bottom:10px;
}
#theme-song .block_item:nth-child(even){
	width:50%;
	margin-bottom:10px;
}
#theme-song iframe{
	border:10px solid rgba(240,240,240,0.4);
	border-radius:10px;
	box-shadow: 2px 2px 10px rgba(0,0,0,0.6);
}
.title{
	width:100%;
	text-align:center;
	font-size:40px;
	font-weight:bold;
	color:#6da1cf;
	padding-bottom:40px;
	text-shadow:0 0 4px #ffffff;
}
#bottom{
	background-color:#78a0cb;
	color:white;
	font-size:14px;
	padding:17px 17px;
}
#info{
	display:inline-block;
}
#info span{
	font-size:15px;
}

@media screen and (max-width: 820px) {
	.title{
		font-size:34px;
	}
	#break-record .block_item:nth-child(odd){
		width:100%;
	}
	#break-record .block_item:nth-child(even){
		width:100%;
	}
	#break-record{
		background-size:100% auto;
	}
}

@media screen and (max-width: 1024px) {
	.block{
		border:10px solid rgba(213,239,252, 0.6);
	}
	.block_item{
		text-align:center;
		clear:both;
		margin-bottom:30px;
	}
	#theme-song .block_item:nth-child(odd){
		width:100%;
	}
	#theme-song .block_item:nth-child(even){
		width:100%;
	}
}













#class-map{
	width:100%;
	background-image:url('');
	background-size:cover;
	background-color:#ffffff;
	border:3px solid #eeeeee;
}
#class_map_container{
	width:100%;
	min-height:75vw;
}
#class_map_title{
	padding:30px 34px 30px 34px;
	color:white;
	font-size:40px;
	font-weight: bold;
	background-color: #de669f;
	text-align:center;
	line-height:36px;
}
#class_container{
	width:calc(100% - 34px);
	/*background-color: #78a0cb;*/
	background-color: white;
	padding:0 17px;
}
#class_container table td img{
	vertical-align:middle;
}
#class_tbl_title{
	padding-top:34px;
	text-align:center;
	font-weight:bold;
	color:#de669f;
	font-size:40px;
	padding-bottom:34px;
}
.info_item{
	width:100%;
	max-width:1024px;
	margin:0 auto;
	margin-bottom:34px;
}
.info_block{
	display:inline-block;
	width:calc(100% - 6px);
	border-radius: 14px;
	border:1px solid #aaaaaa;
	background-color:white;
	padding:3px;
	margin-bottom:5px;
}
.info_block_key{
	display:inline-block;
	padding:10px 12px;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	background-color:#888888;
	color:white;
	font-size:15px;
}
.info_block:first-child .info_block_key{
	background-color:#bc5886;
}
.info_block_val{
	display:inline-block;
	padding:10px 12px;
	font-size:15px;
}
.info_block_row_btn{
	width:25%;
	margin: 1px 0 0 auto;
	line-height:16px;
	padding:6px 8px;
	border-radius: 14px;
	background-color:#fcb03a;
	color:white;
	text-align:center;
	cursor:pointer;
}
#copy{
	display:inline-block;
	float:right;
	font-size:14px;
}
#copy a{
	color:white;
	text-decoration: none;
	font-size:15px;
}
#copy span{
	border-bottom:1px solid #fcefdc;
	color:#fcefdc;
}
@media screen and (max-width:820px){
	#class_map_title{
		font-size:34px;
	}
	#class_map_title span{
		font-size:17px;
	}
	#class_tbl_title{
		font-size:34px;
	}
	.info_block_key{
		padding:6px 8px;
		font-size:13px;
	}
	.info_block_val{
		padding:6px 8px;
		font-size:13px;
	}
	.info_block_row_btn{
		line-height:12px;
	}
}





#highlight{
	background-image:url(../images/bg_highlight.png);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:50% 50%;
	height:100vh;
	cursor:pointer;
}




#join-staff{
	position:relative;
	background-image:url(../images/bg_join.png);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:top center;
	height:80vh;
	cursor:pointer;
}
#join-staff-txt{
	position:absolute;
	bottom:5vh;
	right:10vw;
	color:white;
	font-size:80px;
	font-weight:bold;
	text-shadow: 3px 3px 2px #cf4b1d;
}
@media screen and (min-width: 500px) and (max-width:820px){
	#highlight{
		height:70vh;
	}
	#join-staff{
		height:70vh;
	}
	#join-staff-txt{
		right:4vw;
		font-size:60px;
	}
	#copy{
		float:none;
		clear:both;
	}
}
@media screen and (max-width:500px){
	#highlight{
		height:60vh;
	}
	#join-staff{
		height:60vh;
	}
	#join-staff-txt{
		right:4vw;
		font-size:40px;
	}
	#copy{
		float:none;
		clear:both;
	}
}

#aboutus{
	position:relative;
	padding-bottom:34px;
}
#btn_aboutus{
	position:absolute;
	display:inline-block;
	top:-17px;
	right:0;
	border-top:5px solid #ef5ca1;
	border-left:5px solid #ef5ca1;
	border-bottom:5px solid #ef5ca1;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	color:#ef5ca1;
	font-size:30px;
	font-weight:bold;
	padding:17px 34px;
	padding-right:80px;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
	background-image:url('../images/bg_aboutus_btn2.png');
	background-size:cover;
	cursor:pointer;
	text-shadow: 0 0 2px rgba(255,255,255,0.6);
}
@media screen and (min-width: 500px) and (max-width:820px){
	#btn_aboutus{
		padding:12px 24px;
		padding-right:60px;
		font-size:24px;
		top:0px;
	}
}
@media screen and (max-width:500px){
	#btn_aboutus{
		padding:10px 20px;
		padding-right:50px;
		font-size:18px;
		top:0px;
	}
}










#leftmenu_container{
	position:fixed;
	z-index:1100;
	top:0;
	left:0;
	overflow:hidden;
	width:0px;
	height:100%;
	box-shadow: 10px 0px 1px rgba(0,0,0,0.3);
	opacity:0;
}
#leftmenu{
	position:absolute;
	overflow-x:hidden;
	overflow-y:auto;
	top:0;
	bottom:0;
	right:0;
	width:240px;
	display:inline-block;
	background-color:#ff9b00;
	color:white;
	padding:17px;
	padding-top:50px;
}
.leftmenu_item{
	font-size:17px;
	padding:12px 16px;
	border-bottom:1px solid rgba(255,255,255,0.4);
	cursor:pointer;
}
.leftmenu_item:last-child{
	border-bottom:0;
}
#btn_menu{
	display:table-cell;
	position:fixed;
	z-index:1101;
	left:0px;
	bottom:20%;
	background-color:#ff9b00;
	width:60px;
	height:135px;
	text-align:right;
	line-height:56px;
	/*box-shadow: 7px 10px 1px rgba(0,0,0,0.3);*/
	cursor:pointer;
	border-radius: 10px;
	border:2px solid rgba(255,255,255,0.6);
}
#btn_menu img{
	vertical-align:middle;
	margin-right:16px;
	width:28px;
	height:28px;
}
#btn_menu_txt{
	font-size:22px;
	color:white;
	text-align:center;
	line-height:36px;
	margin-top:-8px;
}
@media screen and (max-width:600px){
	#btn_menu{
		height:60px;
	}
	#btn_menu_txt{
		display:none;
	}
}
.block_desc{
	font-size:22px;
	color:#3370b5;
	padding:34px 0 0px 0;
	text-align:center;
	font-weight:bold;
}
.block_desc span{
	white-space:nowrap;
}
.custom_content a{
	color:#6495ED;
}










.photo_block_item{
	border:8px solid #FFE5CC;
	width:30%;
	aspect-ratio:4/3;
	background-size:cover;
	background-position:50% 50%;
	border-radius: 14px;
	box-shadow: rgba(0, 0, 0, 0.35) 2px 2px 10px;
	display:inline-block;
	vertical-align:middle;
	margin-bottom:17px;
	cursor:pointer;
	aspect-ratio: 16 / 9;
}
.photo_block_item iframe{
	width:100%;
	aspect-ratio: 16 / 9;
}
.subtitle{
	width:100%;
	border-bottom:1px solid #e0e0e0;
	font-size:24px;
	margin-bottom:34px;
	color:#bc5886;
}
.content_txt{
	position:absolute;
	bottom:0;
	padding:10px 12px;
	text-shadow: 1px 1px 4px black;
	text-align:left;
}
.content_date{
	font-size:17px;
	margin-bottom:4px;
	color:#ffbada;
	-webkit-text-stroke: 1px #ffbada;
}
.content_desc{
	font-size:20px;
	color:#ffe38c;
	-webkit-text-stroke: 1px #ffe38c;
}
@media screen and (min-width:620px) and (max-width:1024px){
	.content_date{
		font-size:15px;
	}
	.content_desc{
		font-size:17px;
	}
}
@media screen and (max-width:620px){
	.content_date{
		font-size:17px;
	}
	.content_desc{
		font-size:20px;
	}
}















	#member_login_box{
		min-height:80vh;
		padding-top:5vh;
		font-size:24px;
		width:60vw;
		min-width:200px;
		margin:0 auto;
		text-align:center;
	}
	.subtitle_center{
		width:100%;
		border-bottom:1px solid #e0e0e0;
		font-size:24px;
		margin-bottom:34px;
		color:#bc5886;
		text-align:center;
	}
	#member_login_box .input_text{
		display:inline-block;
		height:40px;
		line-height:38px;
		width:250px;
		font-size:19px;
		border:1px solid #f29bc4;
		padding:0 8px;
		margin-right:5px;
		margin-bottom:5px;
		vertical-align:middle;
	}
	.btn_center{
		display:inline-block;
		width:42px;
		height:42px;
		line-height:36px;
		font-size:17px;
		background-color:#fdecf4;
		border:1px solid #f29bc4;
		color:#e41b7a;
		margin-bottom:5px;
		vertical-align:middle;
		cursor:pointer;
	}
	@media screen and (max-width:620px){
		#member_login_box{
			width:90vw;
		}
	}