@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;400&display=swap');
@import url("reset.css?v=2.1");

html, body{
	font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
	
/* 	background: #cedc1c; */
}

body{
	width: 100%;
}

/* body#index{
	background: url("../images/bg/20230121bg_m.jpg?v=3.1") no-repeat right bottom fixed #000000; 	     	                
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 

} */

body#index.updbg{
	background: url("../images/bg/20240806bg_m.jpg?v=3.72") no-repeat center bottom fixed #000000; 
	background-size: cover!important; 
}

body#index.demobg{
	background: url("../images/bg/20240806bg_m.jpg?v=3.72") no-repeat center bottom fixed #000000; 
	background-size: cover!important; 
}




.mainHeader{
	display: none;
}

.clearBoth{
	clear: both;
}

.clearfix:after{

	display: block;
	visibility: hidden;
	clear: both;
	height: 0;
	content: "";
}


.pageloading{
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	z-index:1000;
	background:#000000 url(../images/guest_loading.gif) no-repeat;
	background-size: 30%;
	background-position: center center;
} 


.head{
	display: none;
	width: 95%;
	height: 60px;
	margin: 0 auto;
	padding-top: 20px;
}

.head a{
	float: right;
	font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    font-weight: lighter;
    color: #7c7878;
    line-height: 16px;
    text-decoration: none;
    margin-left: 50px;
}

.head a.mailBtn{
	display: none;
} 

.head h1{
	padding-left: 0px;
	float: left;
}

.head h1 a{
	margin-left: 0;
}
/*

.head h1 a:link, .head h1 a:visited{
	font-family: Verdana, Geneva, sans-serif;
	                font-size: 12px;
	                font-weight: lighter;
	                color: #7c7878;
	                line-height: 16px;
	                text-decoration: none;
}
*/

.head h1 a:hover{
/* 	color: white; */
}


.mobileBack{
	background: url("../images/bg/guest_bg_m_20230217.jpg") no-repeat;
	background-size: cover;
	background-position: top left;
	/* background-attachment: fixed; */
	width:100%;
	height: 100vh;
	position: fixed;
	z-index: -1;
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {

	.mobileBack{
		background: url("../images/bg/guest_bg_m_20230217.jpg") no-repeat;
		background-size: cover;
		background-position: top left;
		/* background-attachment: fixed; */
		width:100%;
		height: 100vh;
		position: fixed;
		z-index: -1;
	}

}

.wrapper{
	width: 95%;
	margin: 0 auto;
	margin-bottom: 100px;
	margin-top: 30px;
	padding-top: 10px;
	-webkit-isplay: -webkit-flex;
	flex-direction: -webkit-column-reverse;
	display: flex;
	flex-direction:column-reverse;
}

/* 留言板 */
.wrapper .content.Left.message{
	width:100%;
	height:auto;
}

.leftMsgWrapper{
	width: 100%;
		margin: 0 auto;
		padding:0 15px;
		padding-bottom: 1px;
	/* 	background: #eeeeee; */
		background: #fff;
		float: none;
		opacity: 1;
		transition: all .3s ease-in-out;
		-webkit-transition: all .3s ease-in-out;
		-moz-transition: all .3s ease-in-out;
}

.leftMsgWrapper.xhide{
	opacity: 0;
}

.openMsg{
	display: none;
	text-decoration: none;
	color:#5f5c5c;
}

.content.Left.message .title{
	width: 100%;
}



.content.Left.message .title h2{
	font-size: 9pt;
	color: #666666;
	font-family: 'Noto Serif TC', 'Noto Serif SC', serif;
	font-weight: normal;
}

.content.Left.message .title a{
	font-size: 11px;
	color: #aeaeae;
	text-decoration: none;
	line-height: 3;
}



.content.Left.message .title table{
	width: 100%;
	margin-bottom: 1.2rem;
}



.content.Left.message .messageBox{
	padding-bottom: 20px;
	margin-bottom: 20px;
/* 	border: 1px solid #C0C0C0; */
	background: #ffffff;
	padding: 5px;
/*
	height: auto;
	min-height: 100px;
*/
	overflow: hidden;
}

.content.Left.message .messageBox.top:last-of-type{
	border-bottom: 0px;
}


/*
.content.Left.message .messageBox.top{
	border-bottom: 2px solid black;
	border-top: 2px solid black;
	padding-bottom: 0px;
	padding-top: 10px;
	background: -webkit-linear-gradient(#ffffff 0%, #eaeaea 100%); 
}
*/

.inTop{
	width: 120px;
	display: block;
	margin: 0 auto;
	text-align: center;
	background: #000;
	color: #ccc;
	font-size: 11px;
	padding: 5px;
	margin-top: 10px;
}



/* 開閉留言高度
.content.Left.message .messageBox.messageClick{
	height: auto;
}
*/

.content.Left.message .imgBox{
	display: block;
	float: left;
}

.content.Left.message .imgBox img{
	width: 30px;
	height: 30px;
}



.content.Left.message .messageText{
    width: 85%;
    margin-left: 8px;
	float: left;
}

.content.Left.message .messageText.mo{
	width: 80%;
}

.content.Left.message .messageText h3{
	font-size: .9rem;
	color: black;
	line-height: 1.4;
	margin-bottom: 10px;
	word-wrap:break-word;
	word-break:normal;
	font-family: 'Noto Serif TC', 'Noto Serif SC', serif;
}

.content.Left.message .messageText p{
	font-size: .9rem;
	color: gray;
	line-height: 1.6;
	margin-bottom:1rem;
	word-wrap: break-word;
	word-break: break-all;
	color: #333333;
	font-family: 'Noto Serif TC', 'Noto Serif SC', serif;
}


/*
.content.Left.message .messageText p{
	 font-size:9pt;
	 color:rgba(128,128,128,1);	
	 background-color:#f2f2f2;
	 padding:15px 5px;	
	 border-radius:5px;
	}
*/

.content.Left.message .messageText .user, .content.Left.message .messageText .user a{
	text-align: right;
	 color: #666666;
	 display: flex;
	 align-items: flex-end;
	 justify-content: flex-end;
	 font-size: 10pt;
	 line-height: 1.2;
	 position: relative;
	 height: auto;
	 margin-bottom: 0rem;
	 background: #fff;
	 border-radius: 3px;
	 flex-direction: column;
	 /* background: #ecebeb; */
	 /* border-top: 1px solid #cecece; */

}

.content.Left.message .messageText .user, .content.Left.message .messageText .user .userinfo{
	display: flex;
	margin-bottom:.5rem;
}

.content.Left.message .messageText .user, .content.Left.message .messageText .user .userinfo a{
	
}

.content.Left.message .messageText .user.userWithid a{
	font-size: 10pt;
	line-height: 1.4;
}

.content.Left.message .messageText .user p{
	padding: 0;
	margin: 0;
	font-size: 12px;
	 line-height: 2;
}


.content.mobile.reply{
	display: none;
}

.content.Right.reply{
}





/* for mobile */


.content.Right.reply{
	width: 100%;
	float: none;
	margin: 0 auto;
	margin-bottom: 20px;
	overflow: hidden;
}

.content.Right.reply .noNukeTitle{
	width: 100%;
	text-align: right;
	margin-bottom: 5px;
	display: none;
}





.blackBoard{
	font-family: Georgia, "STSong", "Times New Roman", Times, serif;
	padding-top: 0px;
	margin-bottom: 15px;
	background: #000;
}




.content.Right.reply .blackBoard .replyTitle{
	width: 100%;
	font-size: 11px;
	color: #34dab5;
	background: #000000;
	padding:5px 15px;
	line-height: 30px;
}

.content.Right.reply .blackBoard .replyTitle p{
	font-family: Georgia, "STSong", "Times New Roman", Times, serif;
	float: left;
	height: 30px;
	line-height: 30px;
	width: 90%;
	text-align: center;
}

.content.Right.reply .blackBoard .replyTitle img{
	float: right;
}


.content.Right.reply .blackBoard .replyTitle a.fixBack{
	float: left; 
	color: #34dab5;
	height: 30px;
	line-height: 30px;
	font-size: 12pt;
	text-decoration: none;
}

.content.Right.reply .blackBoard .replyImg img{
	width: 95%;
}

.content.Right.reply .blackBoard .reply_content{
	font-family: 'Noto Serif TC', 'Noto Serif SC', serif;
    /* font-family: "微軟正黑體","Microsoft JhengHei","Heiti TC", arial; */    
    background: #000;
/*     height: 110px; */
	overflow: hidden;
}

/* 用來判斷電腦或行動裝置的值，勿更動 */
.content.Right.reply .blackBoard .reply_content{
	padding-bottom: 0px;
	
}

.content.Right.reply .blackBoard .reply_content p{
	padding: 0px 15px;
    font-size: 13px;
    font-weight: 100;
    line-height: 1.6;
    color: #909090;
    word-wrap: break-word;
    word-break: break-all;
}



.content.Right.reply .showBlackBoard{
	color: gray;
	background: rgba(0,0,0,1);
	font-size: 10px;
	text-align: center;
	padding: 10px;
	display: block;
}

.content.Right.reply .showBlackBoard .showReply{
	background: url("../images/mobileBlackBoardDropDownBtn.png") no-repeat;
	background-size: 23px 23px;
	width: 23px;
	height: 23px;
	margin: 0 auto;
	display: block;
}


.content.Right.reply .warnning{
	font-family: Georgia, "STSong", "Times New Roman", Times, serif;
    line-height: 1.5;
    filter: alpha(opacity=90);
    opacity: 0.9;
    color: #333333;
    font-size: 10px;
}

















/* NAV */

#TOP-MENU{
	display:block;
	width:100%;
	height:50px;
	position:fixed;
	background:rgba(0,0,0,0.9);
	bottom: 0px;
	left: 0px;
}

#TOP-MENU.scroll_down{
	display: none;
}

#TOP-MENU h4{
	display:block;
	width:40px;
	height:40px;
	background-image:url(../images/mobileMenuBtn.png);
	position:absolute;
	right:15px;
	top:5px;
	text-indent:-9999px;
}


.menuWrapper{
	width:200px;
	height:auto;
	margin: 0 auto;	
}

.loginBox{
	float: none;
	width:200px;
	margin: 0 auto;
}

.loginBox span.helloID{
	margin-bottom: 10px;
	display: block;
}

/*
.menuBox{
	float: none;
	width: 90%;
	margin: 0 auto;
	margin-right: 80px;
}
*/


.deskotpMenuBox{
	display: none;
}



/*
.loginBox input.okSubmit{
	width: 97%;
	height: 30px;
	margin: 0 auto;
	line-height: 30px;
	text-align: center;
	color: #34dab5;
	display: block;
	border: 1px solid black;
	background: rgba(0, 0, 0, 0.6);
	font-size: 12px;
	
}
*/




#signerr{
	width: 300px;
	height: 100px;
	line-height: 60px;
	background: rgba(255, 0, 0, 0.6);
	color: white;
	text-align: center;
	padding: 20px;
	position: absolute;
	left:50%;
	top:50%;
	margin-left:-150px;
	margin-top:-50px;
}
/*
.joinMen a:first-child:after { 
	content: "|"; 
	margin-right: 30px;
	} 
*/

.e9{
	color: gray;
	font-size: 13px;
	line-height: 1.7;
	margin-bottom: 20px;
	font-family: arial, sans-serif;
}

.e9 a{
	
	color: #34dab5;
	width: 98%;
	height: 30px;
	line-height: 30px;
	margin-bottom: 10px;
	display: block;
	border: 1px solid #3b3b3b;
	background: rgba(0, 0, 0, 0.6);
	text-decoration: none;
	text-align: center;
}

/* new menu 2016 */

#left-menu .menuWrapper .joinMen a.SIGNAA.forMobile{
	display: none;
}

/* guest book page */


.guestBookWrapper{
	padding-top: 30px;
}

.guestBook{
	width: 95%;
	padding: 15px;
	background: #fff;
	margin-left: 0;
	margin: 0 auto;
}

.guestBook div{
	margin-bottom: 5px;
}


.guestBook .guestBookTitle{
	width: 100%;
}

.guestBook .guestBookTitle a{
	width: 13px;
	height: 30px;
	float: left;
}

.guestBook .guestBookTitle h1{
	float: left;
	font-size: 12px;
	color: #3b3b3b;
	height: 30px;
	line-height: 30px;
	font-weight: lighter;
	text-align: center;
	width: 90%;
}
.guestBook .guestBookTitle h1::before{
	clear: both;
}

.guestBook h2{
	font-size: 13px;
	line-height: 1.6;
	margin-bottom: 10px;
	color: #3b3b3b;
}


.guestBook .moodpic{}

.guestBook p.itemTitle{
	font-size: 12px;
	color: #3b3b3b;
	float: none;
	margin-bottom: 10px;
}

.guestBook .moodpic .picWrapper{
	width: 100%;
	float: none;
/* 	margin-left: -2%; */
}

.guestBook .moodpic .picWrapper .picBox{
	width: 80px;
	height: 110px;
	text-align: center;
	float: left;
	margin-left: 3%;
	margin-bottom: 15px;
}

.guestBook .moodpic .picWrapper .picBox img{
	border:2px solid #180E0C;
	margin-bottom: 5px;
	margin-left: 5px;
}

.guestBook .moodpic .picWrapper .picBox input{
	margin-left: 10px;
}


.guestBook .messageInput{
	font-size: 12px;
	color: #3b3b3b;	
	margin-bottom: 15px;
}



.guestBook .messageInput button{
	font-family: times, sans-serif;
	color: gray;
	height: 36px;
	line-height: 36px;
	background: none;
	border: 1px solid #ccc;
}



.guestBook .messageInput a{
	text-decoration: none;
}



.guestBook .messageInput input, .guestBook .messageInput textarea{
	float: none;
/* 	margin-left: 5px; */

}

.guestBook .messageInput input[name="subject"]{
	border: 1px solid #cecece;
	padding: 5px;
	width: 100%;
}


.guestBook .messageInput textarea{
	width:100%; 
	background-color: #F2F2F2; 
	border:0px; 
	padding: 5px;
	min-height: 200px;
}


.guestBook .messageInput.privateCheck{
	margin-left: 0;
}

.guestBook .messageInput.privateCheck input{
	float: left;
	margin-top: -5px;
}

#member .messageInput input{
	color: gray;
	padding: 5px;
}

#member .messageInput .forgetBtnArea{
	padding-top: 20px;
}


#member .messageInput .forgetBtnArea a, #member .messageInput .forgetBtnArea span{
	color: black;
	float: left;
	padding: 10px;
	
}


#member .messageInput .forgetBtnArea .fogetBtn{
	width: 161px;
	margin: 0 auto;

}

.messageInput.okBtn input{
	width: 80px;
	margin: 0 auto;
/* 	float: right; */
}


.messageInput.okBtn button{
	width: 33%;
	margin-left: 2%;
}


.guestBook div.sendMsgBtn{
	width: 63%;
	height: 36px; 
	line-height: 36px;
	color: gray; 
	border: 1px solid #ccc;
	text-align: center;
	float: left;
	margin-top: -5px; 
	font-size: 8pt; 
	cursor: pointer;
	margin-bottom: 0px;
}


.messageInput button.loginBtn{
	width: 50px;
	text-align: center;
}


/* 送出留言的按鈕 開始 */

.guestBook .sendMsgBox{
	width: 100%;
	height: 30px;
	line-height: 30px;
	float: none;
	padding-bottom: 15px;
	
}


.guestBook .sendMsgBox div.sendMsgBtn, .guestBook .sendMsgBox button.resetMsgBtn{
	width: 49%;
	height: 36px; 
	line-height: 36px;
	color: gray; 
	border: 1px solid #ccc;
	text-align: center;
	float: left;
	margin-top: -5px; 
	font-size: 8pt; 
	cursor: pointer;
	margin-bottom: 0px;
}


.guestBook .sendMsgBox div.sendMsgBtn{
	float: left;
}


.guestBook .sendMsgBox button.resetMsgBtn{
	float: left;
	width: 48%;
	margin-left: 3%;
}

.guestBook .sendMsgBox span{
	font-size: 12px;
	float: left;
	height: 30px;
	line-height: 30px;
	color: gray;
	margin-left: 0px;
}


/*
.ui-panel-inner{
	-webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;;
    box-sizing: content-box;;
}
*/

.msgLoading{
	font-size: 12px;
	line-height: 2;
	color: black;
	padding: 5px 0px;
	margin-bottom: 10px;
}

#goTop{
	position: fixed;
	left: 0px;
	bottom:7%;
	width: 50px;
	height: 30px;
	background: rgba(55, 55, 55, 0.7);	
}

#goTop a{
	width: 50px;
	height: 30px;
	display: block;
	background: url("../images/back-top-icon.png") no-repeat;	
	text-decoration: none;
	background-size: 30px auto;
	background-position: center center;
}

#guestPage{
	/* background: url("../images/bg/guest_bg_m_20230217.jpg") no-repeat;
	background-size: cover;
	background-position: center right;
	background-attachment: fixed; */
	background: #000;
}


/* .user.replybtnbox button.toTop{ */
button.toTop{
	font-family: 'Noto Serif TC', 'Noto Serif SC', serif;
	font-weight: normal!important;
	margin-left: 0px;
	margin-top: -4px;
	padding: .15rem;
	background: #fff;
	color: #666666;
	border: 0px solid #989898;
	cursor: pointer;
	font-size: .8rem;
}

/*  */

#showallBtn, #hideallBtn{
	color: #666666;
	font-weight: light;
	box-shadow: none;
	border: 1px solid #989898;
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	background: #fff;
}


/* search bar */
/* search bar */
.searchBar{
	width: 100%;
	display: block;
	margin-bottom: 15px;
}

.searchBar p{
	font-size: 13px;
	color: gray;
}


.searchBar table{
	width: 100%;
}

.searchBar table tr{}

.searchBar table tr td:first-child{
	width: auto;
}

.searchBar table tr td:last-of-type{
	width: 30px;
	text-align: left;
}

.searchBar button{
	border-radius: 0;
/* 	border: 1px solid #ccc; */
	border: 0px;
	width: 30px;
	height: 30px;
	background: #fff;
	background-image: url(../images/searchicon.png);
	background-repeat: no-repeat;
	background-size: 26px 26px;
	cursor: pointer;
	margin-left: 10px;
	
}



#searchInput, input.inputStyle {
	padding: 5px;
	width: 50%;
	height: 30px!important;
	/* line-height: 30px; */
	border: 1px solid #aeaeae;
	border-radius: 0!important;
	border-color: #dfdfdf!important;
}

.searchBar .ui-input-text{
	padding: 3px;
	width: 100%;
	height: 30px;
	line-height: 20px;
	margin-right: 5px;
	border-radius: 0;
}

#whoselect-button{
	height: 30px;
	margin-bottom: 10px;
}

#whoselect-button span{
	display: none;
}

.ui-select .ui-btn select{
	opacity: 1;
	padding-left: 10px;
}

select.whoreply{
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border: 1px solid #ccc;
	height: 23px;
	font-size: 12px;
	margin-right: 15px;
	display: none;
}


select#whoselect option{

}


.showDelBtn{
	width: 15px;
	height: 15px;
	display: block;
	background: url(../images/gear.png);
	background-size: 15px 15px;
	cursor: pointer;
	margin-top: 5px;
	position: absolute;
	right: 5px;
	top:2px;
	z-index: 999999999;
}

.showDelBtn.desktop{
	display: none;
}

.admDeleteBtn{
	display: flex;
	/* height: 30px; */
	/* line-height: 30px; */
	align-items: baseline;
	justify-content: flex-end;
}

.admDeleteBtn form{
	width: 80px;
	/* margin-top: 8px;
	float: left; */
}


/* .replyadmBtn{
	height: 30px;
	line-height: 30px;
} */


a.CheerResponseBtn{
	margin-left: 10px;
	width: 30px;
	height: 30px;
	display: block;
	background: url(../images/cheerResponseBtn.png) no-repeat center center;
	background-size: 23px;
	background-position-y: 0px;
	
}

/* guestResultList.php */

/*
#msgContent h2{
	font-size: 10pt;
	font-weight: normal;
	margin-bottom: 10px;
}
*/


#msgContent p{
	font-size: 10pt;
	color: #333333;
}

.getrep{
	width: 100%;
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 3px solid black;
}

.searchResultList{
	width: 100%;
	
	display: block;
	margin-bottom: 10px;
}

.searchResultList p{
	float: left;
}

.searchResultList p:nth-child(2){
	float: right;
	margin-right: 10px;
}

.searchResultList a:link, .searchResultList a:visited{
	width: 100%;
	height: 40px;
	line-height: 40px;
	display: block;
	font-size: 11pt;
	text-decoration: none;
	padding-left: 10px;
	color: gray;
	background: #ffffff;
	border: 1px solid #e7e7e7;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

/* 2016 reply update on frontDesk */

.blackBoardFixSection.hhide{
	display: none;
}


.showFixContent_d{
	display: none;
}

.showFixContent_m{
	width: 18px;
	height: 18px;
	display: block;
	background: url(../images/replyFixBtn.png) no-repeat;
	background-size: 18px;
	float: left;
	margin-top: 5px;
}



.showFixContent{
	width: 18px;
	height: 18px;
	display: block;
	background: url(../images/replyFixBtn.png) no-repeat;
	background-size: 18px;
	float: left;
	margin-top: 5px;
}

.reply_contentfix{
	font-family: 'Noto Serif TC', 'Noto Serif SC', serif;
    /* font-family: "微軟正黑體","Microsoft JhengHei","Heiti TC", arial; */    
    background: #000;
	width: 95%;
	margin: 0 auto;
	overflow: hidden;
	margin-bottom: 30px;
}


.blackBoard.fix{
	height: auto;
}

.replyImg.fix{
/* 	background: pink; */
}

.uploadfileInput{
	color: gray;
	margin-bottom: 20px;
}

.uploadfileInput input{
	width: 95%;
	margin: 0 auto;
}

.replyImg.fix img{
	margin-bottom: 15px;
}

.replytextContent{
	display: block;
	background: #000;
	color: #fff;
	border: 0px;
	font-size: 13px;
    font-weight: 100;
    line-height: 1.7;
	font-family: 'Noto Serif TC', 'Noto Serif SC', serif;
	overflow: hidden;
	height: auto;
}

font.font1{
	color: #fff;
}



.removeImgInput{
	width: 95%;
	margin: 0 auto;
	padding-top: 3px;
	text-align: right;
}

.removeImgInput label{
	color: #cecece;
	font-size: 11pt;
}


.submitbtn_Bar{
	width: 100%;
	height: 50px;
	line-height: 50px;
	display: block;
	text-align: center;
	
}

.submitbtn_Bar .fixSendBtn{
	width: 80px;
	height: 40px;
	margin: 0 auto;
	
}



.submitbtn_Bar input.inputBtn{
	width: 80px;
	height: 35px;
	display: block;
	line-height: 33px;
	text-align: center;
	background: #7f7f7f;
	border: 0px;
	color: #000;
	border: 0px;
	cursor: pointer;
	font-size: 12pt;
}

.submitbtn_Bar input:hover{
	background: #414141;
	color: #cecece;
}

.submitbtn_Bar a{
	width: 80px;
	height: 40px;
	display: block;
	text-align: center;
	line-height: 40px;
	background: #cecece;
	color: #000;
	border: 0px;
	float: left;
	text-decoration: none;
	margin-left: 5px;
}


.hhide{
	opacity: 0;
	transition: ease 0.5s;
/* 	display: none; */
}

.sshow{
	opacity: 1;
	transition: ease 0.5s;
/* 	display: block; */
}

.searchBar select{
	-webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   border-radius: 0px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border: 1px solid #cccccc;
	padding: 5px auto;
	width: 50px;
	height: 30px;
	overflow: hidden;
	background: url("../images/arrow.png") no-repeat scroll right center transparent;
	padding-right: 14px;
	padding-left: 5px;
}


/* 2018 leaf find頁面 */
.lifeContent.findPage{
	margin-left: -1vw;
}

.lifeContent.findPage .lifeArticle{
	width: 26vw;
    height: 26vw;
	display: block;
	float: left;
	overflow: hidden;
	margin-left: 3vw;
	background: #000;
}

.lifeContent.findPage .lifeArticle .imgArea{
	width: 100%;
	height: 100%;
	position: relative;
}

.lifeContent.findPage .lifeArticle .imgArea a{
	width: 100%;
	height: 100%;
	display: block;
	font-size: 10px;
	color: #a9a9a9;
	position: relative;
}

.lifeContent.findPage .lifeArticle .imgArea a.theContent{
	padding: 6px 8px;
	overflow:hidden;
	line-height: 1.5;
/*
	text-align:justify;
	display: -webkit-box;  
	text-overflow : ellipsis;
	-webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
*/
    
}

.lifeContent.findPage .lifeArticle .imgArea a img{
	
	
}

.lifeContent.findPage .lifeArticle .imgArea span{
	position: absolute;
	bottom: 0px;
	right: 0px;
/*
	width: 20%;
	height: 20%;
	border-radius: 50%;
*/
	background: #9c9c9c;
	color: #000;
	z-index: 2;
	font-size: 9pt;
	padding: 1px 2px;
	text-align: center;
	min-width: 20px;
	line-height: 20px;
}

.lifeContent.findPage .lifeArticle .imgArea span.isPublic{
	background: #34dab5;
}

/* title Bar */
.titleBar{
	width: 100%;
	height: 40px;
	position: relative;
}


.contentSession.musicJourney .titleBar{
	margin-bottom: 30px;
}

.titleBar h2{
	width: 100%;
	position: relative;
	line-height: 40px;
	color: #686868;
	text-align: center;
	font-family: Georgia;
    font-weight: 400;
    font-size: 11px;
}

.titleBar a.dispBtn{
	display: none;
}


.titleBar .chgLan{
	width: auto;
	position: absolute;
	left: 0;
	z-index: 1;
	color: #686868;
	font-size: 9pt;
	line-height: 40px;
}

.titleBar .chgLan a{
	text-decoration: none;
	color: #686868;
	font-size: 9pt;
	line-height: 40px;
}
	
	
/* mail to Cheer */
#mailtoCheerWrapper{
	width: 100%;
	height: 100%;
	position: fixed;
	display: inline-block;
	background: rgba(0,0,0,.8);
	z-index: 99999;
}

.mailtoCheerBody{
	width:95%;
	height:auto;
	background: #E9E6E1;
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	padding: 30px;
	padding-bottom: 25px;
}


.mailtoCheerBody .copyNote{
	width: 140px;
	height: 40px;
	line-height: 40px;
	background: rgba(0,0,0,.5);
	border-radius: 5px;
	display: none;
	position: absolute;
	left: 0;
	top:0;
	right: 0;
	bottom: 0;
	margin: auto;
	font-size: 10pt;
	text-align: center;
	color: #fff;
	font-weight: 300;
}

.mailtoCheerBody a#closeToCheer{
	width: 14px;
	height: 14px;
	display: block;
	background: url(../images/close_icon.svg);
	position: absolute;
	top:5px;
	right:5px;
}


.mailtoCheerBody .mailtoText p
{
	line-height: 1.6;
	font-size: 10pt;
	margin-bottom: 15px;
	position: relative;
	text-align: justify;
}


.mailtoCheerBody .mailtoText p.copyLink{
	margin-bottom: 5px;
}


.mailtoCheerBody .mailtoText p.copyLink span{
	float: left;
}



.mailtoCheerBody .mailtoText p span.copyIcon{
	width: 20px;
	height: 20px;
	display: inline-block;
	background: url(../images/copy_icon.svg) no-repeat 1px;
	background-size: 16px auto;
	cursor: pointer;
	margin-left: 5px;
}


.mailtoCheerBody .mailtoText p span.copyIcon:hover{
	opacity: 1;
}


.mailtoCheerBody .mailtoText p.copyLink a{
	text-decoration:none;
	color: #000;
	float: left;
}

.mailtoCheerBody .mailtoText p.copyLink a:hover{
	color: #717171;
}


/* 登入欄位 */

.formSection form{
	width: 100%;
}

.formSection .inputFiled{
	width: 100%;
	margin-bottom: 15px;
	text-align: center;
}

.formSection .inputFiled .filedColum{
	display: flex;
	justify-content:flex-start;
	margin-bottom: 1.2rem;
	align-items: center;
	flex-wrap: wrap;
}

.formSection .inputFiled .filedColum.lastC{
	margin-bottom: 25px;
}

.formSection .inputFiled .filedColum span{
	width: 100%;
	display: block;
	text-align: left;
	margin-bottom: .35rem;
	font-size: 1rem;
}

.formSection .inputFiled .filedColum input{
	width: 100%;
	padding: 10px;
	font-size: 10pt;
	line-height: 1.5;
	height: auto;
	margin-left: 0;
}

.formSection input{
	padding: 5px;
}

.imgcodeBox{
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	margin-left: 0;
}

.imgcodeBox a#chgimgcode{
	margin-bottom: .5rem;
}


.formSection a.loginBtn:link, .formSection a.loginBtn:visited{
	border: 1px solid #b2b2b2;
	font-size: 10pt;
	padding:5px 10px;
	text-decoration: none;
	color: #525252;
}

.formSection a.loginBtn:hover{
	color: #3e3e3e;
	border: 1px solid #7b7b7b;
}

.formSection .memOperation{
	width: 100%;
	display: flex;
	justify-content: center;
}

.formSection .memOperation a{
	text-decoration: none;
	color: #525252;
}

.formSection .joinRule{
	width: 100%;
	margin-bottom: 20px;
}

.formSection .joinRule p{
	font-size: 9pt;
	line-height: 1.6;
	margin-bottom: 5px;
}

.formSection .joinRule ol{
	
	margin-left: 15px;
}

.formSection .joinRule ol li{
	font-size: 9pt;
	line-height: 1.6;
	list-style: decimal;
}

.formSection .operatInput{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 20px;
}

.formSection .operatInput label{
	margin-left: 5px;
}