body { margin:0px; 
      padding:0px;
	font-size: 16px;
	line-height:18px;

		
			
			
}

.center {	text-align: center;}

.adminContainer{
	
	width:800px;
	margin:0 auto;
	background-color:#FFF;
	
}


.Container{
	background-image:url("../images/bg.jpg");
   background-repeat:no-repeat;
	width:900px;
	height:1311px;
    background-size:contain;
	margin:0 auto;
	margin-top:0px;
	
}

.Container2{
	
	width:842px;
	margin:0 auto;
	background-color:#FFF;
	
}

.title1
{
	margin: 0 auto;
	color: #09C;
	font-size: 24px;
	line-height: 48px;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
}



.title2{
	margin: 0 auto;
	color: #09C;
	font-size: 22px;
	line-height: 32px;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
}

.title3{
	color: #999999;
	font-weight: bold;
}

.table_story{
	border: 1px solid #666666;	
		width: 950px;
		
}

.table_story th{
	color: #FFF;
	background-color:#0d6a93;
	padding: 3px;
}

.table_story td{
border: 1px solid #666666;	
	padding: 3px;
}

.table_singing{
	border: 1px solid #666666;	
		width: 800px;
		
}

.table_singing th{
	background-color:#CCC;
		
}

.table_singing td{
	border: 1px solid #666666;	
		
		
}

.table_singing td.title3{
	color: #666;
	font-weight: bold;
	width: 200px;
}

.Success{
	font-size: 24px;
	color: #0CF;	
	
}

.r1 {
     
	text-align: center;	
}

.r1 input{
     
	border:none;
}
.r1 p{
	layout-flow:vertical-ideographic;
	
}
.ErrorBlock
{  	background-color: #FFFF66;
	border:1px solid #FF0000;
}

.button {
 
   background: #3e779d;
  background: linear-gradient(to bottom, #3e779d, #0e99f5);
   background: -webkit-linear-gradient(top, #3e779d, #0e99f5);
   background: -moz-linear-gradient(top, #3e779d, #0e99f5);
   background: -ms-linear-gradient(top, #3e779d, #0e99f5);
   background: -o-linear-gradient(top, #3e779d, #0e99f5);
   padding: 3px 19px;
   margin:0px 10px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   
     -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  box-shadow: 0px 1px 3px #666666;
   color: #ffffff;
   font-size: 16px;
   font-family: Helvetica, Arial, Sans-Serif;
   text-decoration: none;
   vertical-align: middle;
   display:inline-block;
   }
   
 .button:hover {
  
   background: #0CC;
   color: #000;
   }
 .button:active {

   background: #3e779d;
   }



.box23
{   
    
   padding:15px 5px;
  
 
	text-align:center;
	border:4px solid #FFF;
 font-size:20px;
 line-height:28px;
 font-weight:bold;
    background: #06C;
  background-image: -webkit-linear-gradient(top, #06C, #3CF);
  background-image: -moz-linear-gradient(top, #06C, #3CF);
  background-image: -ms-linear-gradient(top, #06C, #3CF);
  background-image: -o-linear-gradient(top, #06C, #3CF);
  background-image: linear-gradient(to bottom,#06C, #3CF8);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
 color:white;
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  box-shadow: 0px 1px 3px #666666;
  display:block;
  cursor:pointer;
	
}

.box23:hover
{   
     color:#333;
  background: #0FF;
  background-image: -webkit-linear-gradient(top, #0FF, #3CF);
  background-image: -moz-linear-gradient(top, #0FF, #3CF);
  background-image: -ms-linear-gradient(top, #0FF, #3CF);
  background-image: -o-linear-gradient(top, #0FF, #3CF);
  background-image: linear-gradient(to bottom,#0FF, #3CF8);
 
	
}



.buttonDiv2{
	
	margin-left:570px;
	margin-top:-200px;
	
}

.gvClass td,.gvClass th{
	padding: 3px 5px 3px 5px;
	border: 1px solid #999;	
}

.Error{
	border:1px solid #FF0000;
	background-color:#FC0;
	
}

#timeDiv1{
	background-image:url("../images/btntable2.png");
         background-position:center top;
             background-repeat:no-repeat;
	width:273px;
	height:216px;
	
	
}

.timeTable {

    width:350px;
	font-size:12px;
}

.timeTable th{

    color:#039;
	background-color:#0CF;
}

.timeTable td{
	 color:#039;
	
    border:1px solid #0CF;
	padding:2px 4px;
	text-shadow: 1px 1px 1px #FF0;
}

.rowRed{
	
	color:#03F;
	
}


.memberSpan {

    display:inline-block;
    width:100%;
    font-size:18px;
    line-height:24px;
        vertical-align: top;
        text-indent:80px;
}

.buttonDiv{
	float:right;
	margin-right:60px;
margin-top:460px;
	
}

.box{
	cursor: pointer;
	padding: 5px;
	font-size: 32px;
	line-height: 48px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	width: 250px;
	height: 130px;
	margin-top: 5px;
	text-align: right;
	
	vertical-align:top;
	color:#FF0000;
}

.boxspan{
	
	cursor: pointer;

	
	vertical-align: middle;
	font-size: 32px;
	line-height: 42px;
	display:inline-block;
	text-align: center; 
}
 /*  設定偽元素令元素內垂直可以置中*/
.box::before{
   content:'';
   width:0;
   height:100%;
   display:inline-block;
   position:relative;
   vertical-align:middle;
   background:#f00;
 }
 



#OldDiv {
	
	background-image: url("../images/icon1.png");
	background-position: center center;
	background-repeat: no-repeat;
		
           background-size: contain;	 
	
	
}


#applyDiv{
	
	background-image: url("../images/icon2.png");
	background-position:  center center;
	background-repeat: no-repeat;

	background-size: contain;	
		
            
}

#infoDiv{
	
      background-image:url("../images/icon3.png");
         background-position: center center;
             background-repeat:no-repeat;
     background-size: contain;	
			
	
}

#photoDiv{
	
      background-image:url("../images/icon4.png");
         background-position: center center;
             background-repeat:no-repeat;
     
			background-size: contain;	
}

#OnlineDiv{
	
      background-image:url("../images/icon5.png");
         background-position: center center;
             background-repeat:no-repeat;
     
			background-size: contain;	
}

#FaceDiv{
	
      background-image:url("../images/icon6.png");
         background-position: center center;
             background-repeat:no-repeat;
     
			background-size: contain;	
}

.SubContainer {
	width:100%;
	
   text-align:center;
   background-color:#FCC;
   margin-top:20px;
}

.SubContainer2 {
	width:100%;
	
   text-align:center;
 
   margin-top:20px;
}

.listcourse {
	width:100%;
	font-size:14px;
	line-height:16px;
}

.coursedetail td {
   
  
}

.coursedetail{
	width:100%;
	
}

.coursedetail2 td {
    background:#FCC;
  
}

.coursedetail2{
	width:100%;
	float:left;
}

.buttonDiv3{
	float:right;
}

.courserow1{

    width:150px;
    line-height:32px;
    font-size:16px;
}

.courserow2{

   text-align:left;
}


.lbUserinfo,.inputUserinfo ,.inputUserinfoP,.lbUserinfo2,.lbUserinfo3
{ 
  display:inline-block;
  margin:5px 0 0 0;
  padding:2px 0px;
  font-size:16px;
}

.lbUserinfo
{   line-height:22px;
     
	width: 180px;
        
}

.lbUserinfo2
{   line-height:24px;
	width: 170px;
	font-weight:bold;
}

.clear{
 clear: both;
	
}

.lbUserinfo3
{   line-height:24px;
	width: 170px;
	font-weight:bold;
    color:#999;
}

.lbUserinfo4
{   line-height:22px;
	width: 90px;
}

.lbUserinfo5
{   line-height:24px;
	width: 300px;
	font-weight:bold;
}

.inputUserinfoP {
	width:450px;
	color:#09F;
	
}
  
.Long{
	width:100%;
}

.ulUserinfo,.ulUserinfo li
{ list-style:none;
   text-align:left;

  
}

.HeadContainer{
	width:90%;
	margin:0 auto;
	padding:0;
	background-color: #FFF;
}

.yellowtag,.whitetag{
	width:33%;
	display:inline-block;
	border:solid 1px #999;
	padding:10px;
	box-sizing:border-box;
	text-align:center;
	height:70px;
	vertical-align:top;
	
}


.yellowtag2,.whitetag2{
	width:25%;
	display:inline-block;
	border:solid 1px #999;
	padding:10px;
    
    border-spacing: 0;
    border-collapse: collapse;
    /*
    border-width:0;
    */
	box-sizing:border-box;
	text-align:center;
	height:70px;
	vertical-align:top;
	
}


.yellowtag,.yellowtag2{
	font-weight:bold;
	background-color: #FF0;	
}

.whitetag,.whitetag2{
	
}
 
.divBack{
	
	text-align:right;
}


ul, li {
 margin: 2px;
 padding: 2px;
}

.itemleft{
	text-align:left;
	
}

.itemleft a {
	text-decoration: none;	
}

.periodcss{
	width:120px;
	
}

.photoBoxList {
    background-color:white;
    width:100%;
}

.photoBox {

    float:left;
    width:430px;
    
    padding:20px;
     background-color:white;
	 display:inline-block;
}

.imageItem {
      width:100%;
	  vertical-align: middle;

}

.file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
}
.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}
.file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
}

.querybox {

    text-align:left;
}

.leftDiv {

    display:block;
    float:left;
    
}

@media all and (min-width: 240px) and (max-width: 736px) {
	
	body{	
			margin:0px;
			padding:0px;
			width:100%;
			height:100%;
			 
	}
.Container{
	position:absolute;
		background-image:url("../images/mobilebg.jpg");
       width:100%;
		background-size:95% auto;
      background-repeat:no-repeat;

	margin:0 auto;
	margin-top:0px;
	

	
	
}

.Container2{
	
	width:100%;
	margin:0 auto;
	background-color:#FFF;
	
}

.buttonDiv{
	margin-top:45%;

	width:30%;
	
}



#applyDiv,#infoDiv,#OldDiv,#photoDiv,#OnlineDiv,#FaceDiv{
	
			
      width:90%;  	 
	
}

.box{
	cursor: pointer;
	padding: 5px;
	font-size: 32px;
	line-height: 48px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	width: 250px;
	height: 8%;
	margin-top: 10px;
	text-align: right;
	padding-left: 0px;
	padding-bottom: 10px;
	
	
}

.boxspan{
	 cursor:pointer;

	vertical-align:top; 
	 font-size:14px;
	 line-height:20px;
	

display:inline-block;
 
}




	.ulUserinfo
{ list-style:none;
   text-align:left;
   -webkit-margin-before: 0px;
    -webkit-margin-after: 0px;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 5px;
	margin-left:0px;
  
}

.ulUserinfo li{
	-webkit-margin-before: 0px;
    -webkit-margin-after: 0px;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px;
	margin-left:0px;
}

ul, li {
 margin: 2px;
 padding: 2px;
}

.inputUserinfoP{
	width:100%;
	color:#09F;
	
}
	.box23
{   
    
   padding:3px 1px;
  
 
	text-align:center;
	border:2px solid #FFF;
 font-size:16px;
 line-height:20px;
 font-weight:bold;
    background: #06C;
  background-image: -webkit-linear-gradient(top, #06C, #3CF);
  background-image: -moz-linear-gradient(top, #06C, #3CF);
  background-image: -ms-linear-gradient(top, #06C, #3CF);
  background-image: -o-linear-gradient(top, #06C, #3CF);
  background-image: linear-gradient(to bottom,#06C, #3CF8);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
 color:white;
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  box-shadow: 0px 1px 3px #666666;
  display:block;
  cursor:pointer;
	
}

.SubContainer {
	
	width:100%;
 
  
}

.lbUserinfo,.lbUserinfo3,.lbUserinfo5
{  width:100%;
   
}

}