@charset "utf-8";
/* CSS Document */
.close_b a{
	display:block;
	width:25px;
	height:25px;
	float:right;
	margin-right:5px;
	color:#999;
	padding:3px;
	margin-top:1px;
	margin-bottom:5px;
	font-size:20px;
	text-align:center;}

.close_b a:hover{
	display:block;
	width:25px;
	height:25px;
	float:right;
	margin-right:5px;
	color:#999;
	padding:3px;
	margin-top:1px;
	margin-bottom:5px;
	font-size:20px;
	text-align:center;}

.sub-pl15{
	padding-left:35px;}
.center{
	text-align:center;}
.copy_bg{
	background-color:#666;
	color:#FFF;
	padding:20px;
	margin-bottom:-23px;}

.block33{
	width:100%;
	float:left;
	padding-left:30px;
	padding-right:20px;

	}
.join{
	font-size:15px;
	color: #938d9b;
	padding-top:20px;}


.gray_calendar{
	font-size:15px;
	text-align:left;
	padding-right:20px;
	color:#666;
	border:1px solid #E4E4E4}


.gray_txt{
	
	background-color:rgba(255,255,255,1);
	border_bottom:1px solid #000;
	box-shadow:0px 0px 3px rgba(20%,20%,40%,0.1);
	margin-left:7px;
	}

.gray{
	font-size:16px;
	text-align:right;
	padding-right:20px;}

.gray14{
	font-size:14px;}	


.gray15{
	font-size:25px;}
	
.gray2{
	font-size:20px;}

.gray11{
	font-size:11px;
	text-align:right;
	padding-right:20px;}

.white{
	font-size:30px;}

.white2{
	width:100%;
	font-size:1px;
	color:#FFF;}
	
.red{
	color:#C00;}

.red2{
	font-size:30px;
	color:#C00;

	}
	
.red-title{
	color: #e5668d;
	font-size:21px;
		padding-bottom:30px;
	}
	
.red-title2{
	color: #438180;
	font-size:21px;
		padding-bottom:10px;
	}
	
.sun_next{
	float:right;
	width:250px;
	margin-right:30px;
	margin-top:20px;
	}

.pink{color:#C00;
padding-left:30px;}

.sun_btn a{
float:left;
	width:150px;
 	display:block;
	background-color:#FC0;
	color:#FFF;
	border-radius:5px;
	padding:10px;
	text-align:center;
	margin-left:10px;}

.sun_btn a:hover{
float:left;
	width:150px;
 	display:block;
	background-color:#F90;
	color:#FFF;
	border-radius:5px;
	padding:10px;
	text-align:center;
	margin-left:10px;}


.sun_btn2 a{
	float:left;

	width:120px;
 	display:block;
	background-color:#FC0;
	color:#FFF;
	border-radius:5px;
	padding:10px;
	text-align:center;
	margin-left:10px;
	margin-top:10px;}

.sun_btn2 a:hover{
    float:left;
	width:120px;
 	display:block;
	background-color:#F90;
	color:#FFF;
	border-radius:5px;
	padding:10px;
	text-align:center;
	margin-left:10px;
	margin-top:10px;}


.sun_txt{
	margin-top:0px;
	width:100%;
	float:left;
	text-align:center;
	margin-bottom:80px;
    
	}

.sun_form{
	width:100%;
	text-align:center;
}
	
.sun_form2{
	width:90%;
	border:1px solid #CCC;
	padding:10px;}
	
.sun_form3{
	margin:0;
	width:50%;
	margin-top:50px;
	}

.sun_gray{
	color:#333;
	font-size:24px;
	padding-top:20px;}
	
.sun_content{
	float:left;
	width:75%;
	float:left;}

.sun_content_pic{

	width:43%;
	float:left;
	margin-left:10px;
	}

.sun_content_txt{

	width:50%;
	float:left;
	margin-left:40px;
	margin-bottom:50px;

	}

.sun_word{
	font-size:18px;

	}

.sun_depscription{
	float:left;
	width:100%;
	border:1px solid #CCC ;
	padding:20px;}


.sun_depscription_title{
	font-size:22px;
	color:#F60;
	
}	

.sun_table{
	width:90%;
	border:1px solid #CCC;
	padding:10px;}

.sun_process{
	width:80%;
	float:left;
}



 .step_container {
      width: 100%;
      margin: 100px auto; 
  }
  .progressbar {
      counter-reset: step;
  }
  .progressbar li {
      list-style-type: none;
      width: 20%;
      float: left;
      font-size: 16px;
      position: relative;
      text-align: center;
      text-transform: uppercase;
      color: #7d7d7d;
  }
  .progressbar li:before {
      width: 30px;
      height: 30px;
      content: counter(step);
      counter-increment: step;
      line-height: 30px;
      border: 2px solid #7d7d7d;
      display: block;
      text-align: center;
      margin: 0 auto 10px auto;
      border-radius: 50%;
      background-color: white;
  }
  .progressbar li:after {
      width: 100%;
      height: 2px;
      content: '';
      position: absolute;
      background-color: #7d7d7d;
      top: 15px;
      left: -50%;
      z-index: -1;
  }
  .progressbar li:first-child:after {
      content: none;
  }
  .progressbar li.active {
      color: green;
  }
  .progressbar li.active:before {
      border-color: #55b776;
  }
  .progressbar li.active + li:after {
      background-color: #55b776;
  }

.bbg{
	background-color:#666;
	width:100%;
	color:#FFF;
	padding-bottom:20px;}


.left-bar-block{
	float:left;	
	width:130px;
	height:40px;
	padding:5px;
	padding-left:18px;
	background-color:#f1f1f1;
	margin:5px;
	color:#666;
	-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
	}
	
.left-bar-block_selected{
	float:left;	
	width:130px;
	height:40px;
	padding:5px;
	padding-left:18px;
	background-color: #f7efa9;
	margin:5px;
	color:#666;
	-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

	}
	
.search-bar{
		width:100%;
		float:left;
		margin-top:10px;}

.input-bar{
		width:80%;
		float:right;
		margin-top:10px;}


.shopping-cart-list{
	width:100%;
	}
	

.member-contain{
	width:100%;
	margin-left:10%;
	
	
	
	}	
	
	
.icon-font{
	font-family:"微軟正黑體", "新細明體";
	font-size:16px;
	}




.process-step{outline:none;} .btn:focus{outline:none; }
.process{display:table;width:100%;position:relative;margin-top:100px;margin-bottom:50px;}
.process-row{display:table-row}
.process-step button[disabled]{opacity:1 !important;filter: alpha(opacity=100) !important}
.process-row:before{top:20px;bottom:0;position:absolute;content:" ";width:100%;height:1px;background-color:#ccc;z-order:0;}
.process-step{display:table-cell;text-align:center;position:relative}
.process-step p{margin-top:4px}
.btn-circle{width:150px;height:45px;text-align:center;font-size:20px;border-radius:20%; font-family:"微軟正黑體", "新細明體";}
.btn-circle-active{width:150px;height:45px;text-align:center;font-size:20px;border-radius:20%;background-color:#F60; font-family:"微軟正黑體", "新細明體"; border:1px solid #CCC}


.text-center{
	text-align:center;}

.text-center-title{
	text-align:center;
	padding-left:75px;}
	
.text-center-title2{
	text-align:center;
	padding-left:70px;}

.space-height{
	margin-top:10px;
	}

.space-height2{
	margin-top:-100px;
	}

.space-height3{
	margin-top:-10px;
	margin-left:10px;
	}

.space-height4{
	margin-bottom:20px;
	}

.table-sun{
		width:80%;
			margin-left:10%;
				margin-top:50px;
				margin-bottom:20px;
				
border-radius: 10px;
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.75);
-moz-box-shadow: 0 1px 5px rgba(0,0,0,0.75);
box-shadow: 0 1px 5px rgba(0,0,0,0.75);
}



.table-list{

	width:80%;
	margin-left:10%;
	margin-top:50px;
	margin-bottom:50px;
	padding:20px;
    
	
	}

.table-list  td{
	border:solid #fff 2px;
	padding:20px;
	
	}

.table-list  tr{
	border:solid #fff 1px;
	
	padding:20px;
	
	}
.table-list-bgc{
	background-color:#ffefa4;
	color:#a17e54;}

.table-list-bgc2{
	background-color:#fffdc9;
	color:#a5945f;}

.table-list-bgc3{
	background-color:#ffefbe;
	color:#7f3e22;
	font-size:18px;
	text-align:right;}

.table-list-bgc4{
	background-color:#ffefbe;
	color:#7f3e22;
	font-size:18px;
	}	
	




.popup-box {
	/*width: 55%;*/
	height:auto ;
	box-shadow: 0px 0px 15px  #c0c0c0;
	margin:10px;
	
	-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f3f3f3+50,ededed+51,ffffff+100;White+Gloss+%232 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(-45deg, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

.popup-box2 {
	width: 98%;
	height: auto;
	border: 1px  solid #ffffff;
	margin:15px;

	-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}


.popup-title{
	text-align:center;
	font-size:27px;
	color:#c7685b;
	margin-top:20px;
}

.popup-title2{
	text-align:left;
	font-size:18px;
	color: #369;
	margin-top:20px;
	padding:10px;
}
	
.popup-txt{
	text-align:left;
	font-size:16px;
	color:#687c7b;
	line-height:27px;
	padding-top:10px;
	padding-left:20px;
	padding-right:20px;
	padding-bottom:20px;
	
}

.way-block1{

	height:20px;
	width:20%;
	padding:10px;
}
	
.way-block2{

	height:20px;
	width:50%;
	padding:10px;	
}

.way-block3{

	height:20px;
	width:20%;
	padding:10px;}


.way-block4{
	border-bottom:#CCC 1px solid;
	background-color:#f3f3f3;
	}

.way-block5{
	border-bottom:#CCC 1px solid;
	background-color:#fff;
	}	


.checkbox{
	width:20px;
	height:20px;
	display: inline;
	padding-left:5px;
}
	




	
@media screen and (max-width: 640px) {

.table-list{

	width:98%;
	margin-left:1%;
	margin-right:1%;
	margin-top:5px;
	margin-bottom:5px;
	font-size:14px;
	}


.table-list  td{
	border:solid #fff 2px;
	padding:10px;
	
	}

.table-list  tr{
	border:solid #fff 1px;
	
	padding:10px;
	
	}




.text-center-title{
	text-align:center;
	padding-left:10px;
	}


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

.sun_content_pic{

	width:100%;
	float:left;
	margin-left:;
	}

.sun_content_txt{

	width:90%;
	float:left;
	margin-top:20px;
	margin-bottom:50px;

	}

.sun_depscription{
	float:left;
	width:100%;
	border:1px solid #CCC ;
	padding:20px;
	
	margin-left:20px;
	margin-right:30px;}	
	

	
.sun_btn a{
float:left;
	width:85%;
 	display:block;
	background-color:#FC0;
	color:#FFF;
	border-radius:5px;
	padding:10px;
	text-align:center;
	margin-left:10px;
	margin-top:10px;}

.sun_btn a:hover{
    float:left;
	width:85%;
 	display:block;
	background-color:#F90;
	color:#FFF;
	border-radius:5px;
	padding:10px;
	text-align:center;
	margin-left:10px;
	margin-top:10px;}

.member-contain{
	width:100%;
	margin-left:0%;}		



.process-step{outline:none;} .btn:focus{outline:none; }
.process{display:table;width:100%;position:relative;margin-top:100px;margin-bottom:20px;}
.process-row{display:table-row}
.process-step button[disabled]{opacity:1 !important;filter: alpha(opacity=100) !important}
.process-row:before{top:20px;bottom:0;position:absolute;content:" ";width:100%;height:1px;background-color:#ccc;z-order:0;}
.process-step{display:table-cell;text-align:center;position:relative}
.process-step p{margin-top:4px}
.btn-circle{width:100px;height:40px;text-align:center;font-size:14px;border-radius:10%; }
.btn-circle-active{width:100px;height:40px;text-align:center;font-size:14px;border-radius:10%;background-color:#F60; font-family:"微軟正黑體", "新細明體"; border:1px solid #CCC }


.table-sun{
		width:98%;
		margin-left:0px;
		margin-top:20px;
		
				
border-radius: 10px;
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.75);
-moz-box-shadow: 0 1px 5px rgba(0,0,0,0.75);
box-shadow: 0 1px 5px rgba(0,0,0,0.75);
}


.left-bar-block{
	float:left;	
	width:120px;
	height:40px;
	padding:5px;
	padding-left:px;
	background-color:#f1f1f1;
	margin:2px;
	margin-left:5px;
	color:#666;
	-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-align:center;
	}
	
.left-bar-block_selected{
	float:left;	
	width:120px;
	height:40px;
	padding:5px;
	padding-left:px;
	background-color: #f7efa9;
	margin:2px;
		margin-left:5px;
		

	color:#666;
	-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-align:center;

	}


.popup-box {
	width:90%;
	height:auto ;
	box-shadow: 0px 0px 15px  #c0c0c0;
	margin:10px;
	
	-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f3f3f3+50,ededed+51,ffffff+100;White+Gloss+%232 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(-45deg, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

.display-none{
	margin-top:-20px;
	margin-bottom:-20px;}
	
.space-left{
	margin-left:45px;}


.gray{
	font-size:16px;
	text-align:left;
	}
.sub-pl15{
	padding-left:0px;
	padding:5px;}
	

.close_b a{
	display:block;
	width:25px;
	height:25px;
	float:right;
	margin-right:15px;

	color:#999;
	padding:3px;
	margin-top:5px;
	margin-bottom:5px;
	font-size:18px;
	text-align:center;}

.close_b a:hover{
	display:block;
	width:25px;
	height:25px;
	float:right;
	margin-right:15px;

	color:#999;
	padding:3px;
	margin-top:5px;
	margin-bottom:5px;
	font-size:18px;
	text-align:center;}	
	
	
	


}