@charset "utf-8";

#commFeedback .kidsMusic{
	font-family:Microsoft JhengHei,Arial;
	position:relative;
	margin-top:-100px;
	margin-left:225px;
	width:825px;
	display:none;
	top:330px;
}
#commFeedback .kidsMusic .topTitle{
	position:relative;
	margin-top:77px;
	left:0px;
	opacity:0;
}
#commFeedback .kidsMusic .topTitle .title{
	position:relative;
	left:6px;
	height:38px;
	font-size:2.00em;
	opacity:0;
}
#commFeedback .kidsMusic .topTitle .underLine{
	position:relative;
	left:0px;
	margin-top:10px;
	width:375px;
	height:4px;
	background-color:#9ff170;
}

#commFeedback .kidsMusic .topTitle .date{
	position:relative;
	left:670px;
	margin-top:-10px;
	font-size:1em;
	font-weight:300;
}

#commFeedback .kidsMusic .topTitle .BG_cover{
	position:relative;
	top:-56px;
	left:635px;
	width:125px;
	height:50px;
	background-color:white;
}

#commFeedback .kidsMusic .topTitle .pencil{
	position:relative;
	left:320px;
	margin-top:-106px;
	width:96px;
	height:56px;
	background:url(../../../images/heartPlan/community/commFeedback_sprites.png)-291px 0px;
}
#commFeedback .kidsMusic .intro{
	position:relative;
	display:none;
	margin-top:35px;
	opacity:0;
}
#commFeedback .kidsMusic .intro .title{
	position:relative;
	font-size:1.56em;
}
#commFeedback .kidsMusic .intro .text{
	position:relative;
	margin-top:15px;
	width:825px;
/*	height:50px;*/
	font-size:1em;
	text-align:justify;
	letter-spacing:0.1em;
}
#commFeedback .kidsMusic .purpose{
	position:relative;
	display:none;
	margin-top:35px;
	left:0px;
	opacity:0;
}
#commFeedback .kidsMusic .purpose .title{
	position:relative;
	font-size:1.56em;
}
#commFeedback .kidsMusic .purpose .text{
	position:relative;
	margin-top:15px;
	width:825px;
	font-size:1em;
	text-align:justify;
	letter-spacing:0.1em;
}
#commFeedback .kidsMusic .goal{
	position:relative;
	display:none;
	margin-top:35px;
	opacity:0;
}
#commFeedback .kidsMusic .goal .title{
	position:relative;
	font-size:1.56em;
}
#commFeedback .kidsMusic .goal .text{
	position:relative;
	margin-top:15px;
	width:825px;
	font-size:1em;
	text-align:justify;
	letter-spacing:0.1em;
}
#commFeedback .kidsMusic .eventVideo{
	position:relative;
	display:none;
	margin-top:55px;
	opacity:0;
}
#commFeedback .kidsMusic .eventVideo .title{
	position:relative;
	top:0px;
	left:0px;
	width:283px;
	height:57px;
	background:url(../../../images/heartPlan/community/commFeedback_sprites.png)0px -169px;
}
#commFeedback .kidsMusic .eventVideo .shadow{
	position:relative;
	margin-top:92px;/*92px*/
	margin-left:209px;/*209px*/
	top:25px;
	left:25px;
	width:509px;
	height:337px;
	background:url(../../../images/heartPlan/community/commFeedback_sprites.png)-523px -362px;
}
#commFeedback .kidsMusic .eventVideo .video{
	position:relative;
	margin-top:-385px;/*-310px -385*/
	margin-left:155px;/*175px 155*/
	top:-25px;
	left:-25px;
	opacity:1;
}
#commFeedback .kidsMusic .eventVideo .border{
	position:relative;
	margin-top:0px;
	margin-left:0px;
	width:523px;
	height:343px;
	background:url(../../../images/heartPlan/community/commFeedback_sprites.png)0px -362px;
}
#commFeedback .kidsMusic .eventVideo .video video{
	position:relative;
	margin-top:34px;/*-310px*/
	margin-left:18px;/*175px*/
	width:480px;
	height:270px;
	opacity:1;
}
#commFeedback .kidsMusic .eventVideo .video .sensor{
	position:relative;
	margin-top:-158px;
	margin-left:18px;
	width:480px;
	height:270px;
	opacity:0;
	cursor:pointer;
}
#commFeedback .kidsMusic .eventVideo .video .gray{
	position:relative;
	margin-top:-275px;
	margin-left:18px;
	width:480px;
	height:270px;
	opacity:0.6;
	cursor:pointer;
	background-color:gray;
}
#commFeedback .kidsMusic .eventVideo .video .circle{
	position:absolute;
	margin-top:110px;
	margin-left:205px;
	width:116px;
	height:116px;
	text-align:center;
	opacity:0;/*0.85*/
}
#commFeedback .kidsMusic .eventVideo .video .circle .circle_white{
	position:absolute;
	width:116px;
	height:116px;
	border-radius:120px;
	background-color:white;
}
#commFeedback .kidsMusic .eventVideo .video .circle .circle_dark{
	position:relative;
	margin-top:8px;
	margin-left:8px;
	width:100px;
	height:100px;
	border-radius:120px;
	background-color:#3B3B3B;
}
#commFeedback .kidsMusic .eventVideo .video .circle .arrow{
	position:absolute;
	margin-top:39px;
	margin-left:45px;
	width:34px;
	height:40px;
	opacity:1;
	cursor:pointer;
	background:url(../../../images/heartPlan/community/commFeedback_sprites.png)-442px -84px;
}

#commFeedback .kidsMusic .eventRecords{
	position:relative;
	margin-top:70px;
	margin-left:0px;
	opacity:0;
}
#commFeedback .kidsMusic .eventRecords .title{
	position:relative;
	margin-top:0px;
	margin-left:0px;
	width:283px;
	height:57px;
	opacity:1;
	background:url(../../../images/heartPlan/community/commFeedback_sprites.png)0px -226px;
}
#commFeedback .kidsMusic .eventRecords .borderThin{
	position:relative;
	width:187px;
	height:156px;
	opacity:1;
	background:url(../../../images/heartPlan/community/commFeedback_sprites.png)-850px 0px;
}
#commFeedback .kidsMusic .eventRecords .eventRecord_01 .borderThin{
	margin-top:30px;
	margin-left:5px;
}

#commFeedback .kidsMusic .eventRecords .eventRecord_02 .borderThin{
	margin-top:45px;
	margin-left:5px;
}
#commFeedback .kidsMusic .eventRecords .borderThick{
	position:relative;
	width:185px;
	height:154px;
	opacity:1;
	background:url(../../../images/heartPlan/community/commFeedback_sprites.png)-665px 0px;
}
#commFeedback .kidsMusic .eventRecords .eventRecord_01 .borderThick{
	margin-top:-160px;
	margin-left:0px;
}

#commFeedback .kidsMusic .eventRecords .eventRecord_02 .borderThick{
	margin-top:-160px;
	margin-left:0px;
}
#commFeedback .kidsMusic .eventRecords .picBox{
	position:relative;
	top:11px;
	left:13px;
	width:160px;
	height:132px;
	line-height:136px;
	text-align:center;
	overflow:hidden;
}
#commFeedback .kidsMusic .eventRecords .picBox .pic{
	position:relative;
	top:0px;
	left:0px;
	width:160px;
	height:132px;
	opacity:0;
	background-size:cover;
	background-repeat:no-repeat;
}
#commFeedback .kidsMusic .eventRecords .picBox .loading{
	position:absolute;
	top:36%;
	left:40%;
	width:45px;
	height:45px;
	opacity:0.65;
	background-size:contain;
	background:url(../../../images/loading.gif)no-repeat;
}
#commFeedback .kidsMusic .eventRecords .textField{
	position:relative;
	margin-top:-140px;
	margin-left:235px;
	width:590px;
	height:150px;
}
#commFeedback .kidsMusic .eventRecords .textField .name{
	position:relative;
	width:100%;
	height:25px;
}
#commFeedback .kidsMusic .eventRecords .speech{
	position:relative;
	top:10px;
	left:0px;
	width:590px;
	height:105px;
	text-align:justify;
}

#commFeedback .kidsMusic .eventGallery{
	position:relative;
	margin-top:70px;
	margin-left:0px;
	opacity:0;
}
#commFeedback .kidsMusic .eventGallery .title{
	position:relative;
	margin-top:0px;
	margin-left:0px;
	width:283px;
	height:57px;
	opacity:1;
	background:url(../../../images/heartPlan/community/commFeedback_sprites.png)0px -283px;
}

#commFeedback .kidsMusic .eventGallery .frame_01,.kidsMusic .eventGallery .frame_02,.kidsMusic .eventGallery .frame_03{
	position:relative;
	margin-top:20px;
	margin-left:0px;
	width:818px;
	height:148px;
	opacity:1;
	background:url(../../../images/heartPlan/community/commFeedback_sprites.png)-284px -214px;
}
#commFeedback .kidsMusic .eventGallery .picColumn_wrapper{
	position:relative;
	top:12px;
	left:169px;
	width:483px;
	height:124px;
	overflow:hidden;
}
#commFeedback .kidsMusic .eventGallery .picColumn_wrapper .picColumn_01{
	position:absolute;
	left:-6px;
	width:495px;
	height:124px;
	background:url(../../../images/heartPlan/community/commFeedback_sprites.png)0px -705px;
}
#commFeedback .kidsMusic .eventGallery .picColumn_wrapper .picColumn_02{
	position:absolute;
	left:489px;
	width:495px;
	height:124px;
	background:url(../../../images/heartPlan/community/commFeedback_sprites.png)0px -705px;
}
#commFeedback .kidsMusic .eventGallery .picColumn_wrapper .picBox{
	position:relative;
	margin-left:6px;
	width:157px;
	height:124px;
	float:left;
	overflow:hidden;
	cursor:pointer;
}
#commFeedback .kidsMusic .eventGallery .picColumn_wrapper .picBox .pic{
	position:relative;
	top:0px;
	left:0px;
	width:157px;
	height:124px;
	opacity:0;
	background-size:cover;
	background-repeat:no-repeat;
}

#commFeedback .kidsMusic .eventGallery .picColumn_wrapper .picBox .loading{
	position:absolute;
	top:36%;
	left:40%;
	width:45px;
	height:45px;
	opacity:0.65;
	background-size:contain;
	background:url(../../../images/loading.gif)no-repeat;
}
#commFeedback .kidsMusic .eventGallery .graphics{
	margin-top:-127px;
}
#commFeedback .kidsMusic .eventGallery .insect_01{
	position:relative;
	top:90px;
	left:110px;
	width:32px;
	height:25px;
	opacity:1;
	background:url(../../../images/heartPlan/community/commFeedback_sprites.png)-442px 0px;
}

#commFeedback .kidsMusic .eventGallery .insect_02{
	position:relative;
	top:06px;
	left:670px;
	width:45px;
	height:46px;
	opacity:1;
	background:url(../../../images/heartPlan/community/commFeedback_sprites.png)-397px 0px;
}
#commFeedback .kidsMusic .eventGallery .plant_01{
	position:relative;
	top:24px;
	left:35px;
	width:64px;
	height:116px;
	opacity:1;
	background:url(../../../images/heartPlan/community/commFeedback_sprites.png)-474px 0px;
}

#commFeedback .kidsMusic .eventGallery .plant_02{
	position:relative;
	top:-54px;
	left:685px;
	width:89px;
	height:80px;
	opacity:1;
	background:url(../../../images/heartPlan/community/commFeedback_sprites.png)-538px 0px;
}

#commFeedback .kidsMusic .eventGallery .chicken{
	position:relative;
	top:91px;
	left:55px;
	width:45px;
	height:47px;
	opacity:1;
	background:url(../../../images/heartPlan/community/commFeedback_sprites.png)-387px -56px;
}
#commFeedback .kidsMusic .eventGallery .pageCT{
	position:relative;
	margin:40px auto;
	height:25px;
	opacity:1;
	overflow:visible;
}
#commFeedback .kidsMusic .eventGallery .pageNum{
	position: relative;
	margin:0 10px;
	top:1px;
	height:25px;
	text-align:center;
	float:left;
}
#commFeedback .kidsMusic .eventGallery .pageNum .on{
	position:relative;
	margin:0px 5px;
	padding:0px;
	top:-1px;
	width:20px;
	height:25px;
	font-size:1.3em;
	font-weight:bold;
	line-height: 25px;
	color:rgba(40,124,78,0.8);
	cursor:pointer;
	float:left;
}
#commFeedback .kidsMusic .eventGallery .pageNum .off{
	position:relative;
	margin:0px 5px;
	padding:0px;
	bottom:0px;
	width:20px;
	height:25px;
	font-size:1.0em;
	font-weight:normal;
	line-height: 25px;
	color:black;
	cursor:pointer;
	float:left;
}
#commFeedback .kidsMusic .eventGallery .pageCT .leftArrow{
	position:relative;
	top:0px;
	width:20px;/*10px*/
	height:25px;/*12px*/
	float:left;
	cursor:pointer;
	background:url(../../../images/list_prev.png)center center no-repeat;
}	
#commFeedback .kidsMusic .eventGallery .pageCT .rightArrow{
	position:relative;
	padding:0px;
	top:0px;
	left:0px;
	width:20px;
	height:25px;
	float:left;
	cursor:pointer;
	background:url(../../../images/list_next.png)center center no-repeat;
}

body .lightbox{
	
}
body .lightbox .darkBG{
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	opacity:0;
	background-color:black;
	z-index:20;
	cursor:pointer;
}
body .lightbox .closeSensor{
	position:fixed;
	display:none;
	top:50%;
	left:50%;
	width:80px;
	height:80px;
	opacity:1;
	cursor:pointer;
	z-index:20;
}
body .lightbox .close{
	position:fixed;
	display:none;
	top:50%;
	left:50%;
	width:27px;
	height:27px;
	opacity:0;
	cursor:pointer;
	border:0px;
	background:url(../../../images/close.png);
	z-index:20;
}
body .lightbox .whiteBoard{
	position:fixed;
	top:50%;
	left:50%;
	opacity:0;
	border-radius:5px;
	background-color:white;
	z-index:20;
}
body .lightbox .whiteBoard_aside{
	position:fixed;
	display:none;
	top:50%;
	left:50%;
	opacity:0;
	border-radius:5px;
	background-color:white;
	z-index:20;
}
body .lightbox .photo{
	position:relative;
	display:none;
	top:10px;
	left:10px;
	opacity:1;
	
}
body .lightbox .describe{
	position:relative;
	box-sizing:border-box;
	top:30px;
	left:10px;
	padding-top:5px;
	padding-left:15px;
	font-size:1.2em;
	color:white;
	opacity:0;
	border-radius:5px;
	z-index:20;
}
body .lightbox .prevSensor{
	position:fixed;
	top:50%;
	left:50%;
	width:0px;
	height:0px;
	opacity:1;
	cursor:pointer;
	z-index:20;
}
body .lightbox .prevSensor .prevArrow{
	position:relative;
	top:45%;
	left:20px;
	width:50px;
	height:45px;
	opacity:0;
	cursor:pointer;
	background:url(../../../images/prevArrow.png);
}
body .lightbox .nextSensor{
	position:fixed;
	top:50%;
	left:50%;
	width:0px;
	height:0px;
	opacity:1;
	cursor:pointer;
	z-index:20;
}
body .lightbox  .nextSensor .nextArrow{
	position:relative;
	top:45%;
	margin-right:20px;
	width:50px;
	height:45px;
	float:right;
	opacity:0;
	cursor:pointer;
	background:url(../../../images/nextArrow.png);
}
body .lightbox .loading_BG{
	position:fixed;
	top:49%;
	left:49%;
	width:64px;
	height:64px;
	opacity:0;
	z-index:20;
	border-radius:5px;
	background-color:rgba(228,228,228,1.00);
}
body .lightbox .loading{
	position:relative;
	top:16px;
	left:16px;
	width:32px;
	height:32px;
	opacity:1;
	z-index:20;
	background:url(../../../images/loading.gif);
}
body .lightbox .block{
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	z-index:20;
}