html {
/*    height: 100%;*/
}

@font-face
{
font-family: myFont;
src: url('TektonPro-BoldExt.otf');
} 

body {
	padding:0;
	margin:0;
	font-family:"microsoft jhengHei", arial, "apple Ligothic", heiti;
	color:#666;
	font-size:13px;
	height:100%;
	background: #ffffff;
	background: -webkit-linear-gradient(top,  #ffffff 0%,#f4f4f4 100%);
	background: linear-gradient(to bottom,  #ffffff 0%,#f4f4f4 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f4f4f4',GradientType=0 );
	background-attachment:fixed;
}
a {
    transition-duration: 0.5s; 
    -webkit-transition-duration: 0.5s; 
	}
a img {
	border:none;
}
.all {
	display:block;
	width:100%;
/*	min-width:800px;*/
	margin:auto;
	padding:100px 0 70px 0;
    -webkit-animation: fadein 1s; /* Safari and Chrome */
            animation: fadein 1s;
}
.page_box {
	display:block;
	width:100%;
/*	border-bottom:1px dotted #999;*/
	padding:25px 0;
	overflow:auto;
	background:url(../images/line.png) no-repeat bottom center;
    background-size: 100% 2px;
}


@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Safari and Chrome */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.top {
	border-bottom:1px dotted #eee;
	text-align:right;
	height:80px;
	width:100%;
	margin:0 auto 10px auto;
	background:#fff;
	background:rgba(255,255,255,0.95);
	position:fixed;
	top:0;
	z-index:10;
	text-shadow:0 1px 0 #fff;
	box-shadow:0 0 10px rgba(0,0,0,0.05);
}
.top div {
	width:100%;
	max-width:980px;
	display:block;
	margin:auto;
}
.top p {
	float:left;
	padding:10px;
	margin:0;
	line-height:40px;
	font-size:26px;
	color:#777;
	font-family:myFont;
}
.top p b {
	color:#a05ac8;
	font-weight:normal;
}
.top p span {
	display:block;
	line-height:20px;
	font-size:14px;
	font-family:arial;
	text-align:left;
	padding:0;
	margin:0;
}
.top p span img {
	height:80px;
	vertical-align: middle ;
	margin:-10px 10px 0 0;
}
.top span {
	display:inline-block;
	padding:10px;
}
.top span a {
	display:block;
	float:left;
	width:100px;
	line-height:58px;
	text-align:center;
	text-decoration:none;
	color:#666;
	margin:0 0 0 2px ;
	border-bottom:2px solid #f2e3ff;
}
.top span a:hover {
	background:#f2e3ff;
	border-bottom:2px solid #a05ac8;
}
.top span a.this_page {
	border-bottom:2px solid #a05ac8;
	color:#a05ac8;
}
img.index_photo {
	float:left;
	width:35%;
}
.index_textbox {
	width:58%;
	padding:0 2% 0 0;
	margin:0 0 0 40%;
	display:block;
	text-align:justify;
	line-height:20px;
	text-shadow:0 1px 0 #fff;
}
.index_textbox b , .all b {
	color:#a05ac8;
}
.index_textbox  ol , .all ol{
	padding:0 0 0 30px;
	margin:2px 0;
}
.index_textbox  ol li {
	color:#a05ac8;
}
.index_textbox  ol li p {
	color:#666;
	padding:0;
	margin:0;
	font-weight:normal;
}
.index_textbox strong{
	font-size:17px;
	color:#a05ac8;
	font-weight:normal;
}
.index_textbox h2 ,.index_textbox h3  {
	padding:2px 0;
	margin:0;
	line-height:normal;
	color:#5d287f;
	font-size:24px;
	font-weight:normal;
	font-family:myFont;
} 
.index_textbox h3  {
	margin:0 0 15px 100px;
}


.index_form {
	position:fixed;
	bottom:-440px;
	margin:0;
	height:400px;
	padding:15px;
	border:5px solid #fff;
	background:#fff;
	z-index:50;
	width:100%;
	max-width:640px;
	background:rgba(255,255,255,0.9);
	border-radius:10px 10px 0 0 ;
	box-shadow:0 0 10px rgba(0,0,0,0.1), inset 0 0 8px rgba(0,0,0,0.1);
}
.form_all {
	display:block;
	margin:auto;
	width:100%;
	max-width:980px;
	/*	min-width:800px;*/
}
.form_show {
	display:block;
	margin:-63px 0 10px 0;
	height:40px;
	line-height:40px;
	background:#A05AC8;
	width:200px;
	color:#fff;
	text-align:center;
	font-size:17px;
	cursor:pointer;
	box-shadow:0 -4px 5px rgba(0,0,0,0.1);
	border:3px solid #fff;
	border-bottom:0px;
	border-radius:10px 10px 0 0 ;
	background: -webkit-linear-gradient(top,  #c095e2 0%,#a05ac8 100%);
	background: linear-gradient(to bottom,  #c095e2 0%,#a05ac8 100%);
	/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c095e2', endColorstr='#a05ac8',GradientType=0 );*/
}
#form_show2 {
	display:none;
}
.form_in {
	display:block;
	width:100%;
	overflow:auto;
	overflow-x:hidden;
	height:420px;
}
.index_form p {
	display:block;
	padding:5px 0;
	margin:0;
	border-bottom:1px dotted #ccc;
}
.index_form p span {
	display:inline-block;
	min-width:180px;
	vertical-align:top;
	line-height:25px;
}
.index_form label {
	border:1px solid #ccc;
	display:inline-block;
	padding:2px 2px;
	margin:0 0 2px 0;
	cursor:pointer;
	background:#fff;
}
.index_form label input {
	vertical-align:middle;
}
.input01 {
	border:1px solid #ccc;
	font-family:"microsoft jhengHei", arial, "apple Ligothic", heiti;
	font-size:15px;
	color:#666;
	vertical-align: middle;
    transition-duration: 0.5s; 
    -webkit-transition-duration: 0.5s; 
}
.this_input {
	border:1px solid red;
	box-shadow:0 0 6px red;
	-webkit-box-shadow:0 0 6px red;
}
p.this_input {
	color:red;
	border:0px solid red;
	box-shadow:0 0 0 red;
	-webkit-box-shadow:0 0 0 red;
}
input.input01 {
	padding:2px 2%;
	width:94%;
	max-width:280px;
}
textarea.input01 {
	width:94%;
	max-width:280px;
	padding:2px 2%;
}
.submit_btn {
	padding:5px 30px;
	font-family:"microsoft jhengHei", arial, "apple Ligothic", heiti;
	margin:auto;
}

.bottom_text {
	display:block;
	bottom:0;
	padding:5px 0;
	min-height:25px;
	line-height:25px;
	width:100%;
	border-top:1px dotted #eee;
	background:#fff;
	background:rgba(250,250,250,0.8);
	position:fixed;
	z-index:10;
	text-shadow:0 1px 0 #fff;
	box-shadow:0 0 10px rgba(0,0,0,0.05);
}
.bottom_text p {
	display:block;
	width:100%;
	max-width:980px;
	/*	min-width:800px;*/
	margin:0 auto;
	padding:0;
}
.bottom_text p b {
	color:#a05ac8;
	font-size:16px;
	float:right;
	margin:0 5px 0 250px;
}
.bottom_text p span {
	float:right;
	font-size:11px;
	padding:0 5px;
	display:inline-block;
	text-align:right;
}
.bottom_text p span a {
	color:#666;
	text-decoration:none;
}
.bottom_text p span img {
	max-height:20px;
	margin:0 3px;
	vertical-align:middle;
}
h1.b_title {
	width:98%;
	margin:auto;
	max-width:960px;
	color:#5d287f;
	padding:0 1%;
	font-size:30px;
	line-height:normal;
	font-weight:normal;
	font-family:myFont;
}

.package_table {
    border-collapse:collapse; 
    border-spacing:0;
	width:100%;
/*	border-top:1px solid #ccc;*/
	border-left:1px solid #ccc;
}
.package_table th {
	background:#a05ac8;
	text-align:center;
	color:#fff;
}
.package_table th+th {
	border-left:1px solid #be9bd7;
}
.package_table th.package_text {
	background:#af87cd;
	text-align:left;
	color:#fff;
}
.package_table th.package_text b {
	display:block;
	background:#7a3b9e;
	color:#fff;
	font-size:15px;
/*	border-bottom:1px dotted #ebe1f5;*/
	padding:5px 10px;
	line-height:normal;
}
.package_table th.package_text ul {
	padding:5px 10px;
	margin:0;
	list-style:none;
}
.package_table th.package_text ul li {
	padding:3px 0;
	border-top:0px dotted #d3b4eb;
}
.package_table th.package_text ul li+li {
	border-top:1px dotted #d3b4eb;
}
.package_table th.package_text ul li span {
	display:inline-block;
	max-width:275px;
	width:30%;
	padding:0;
	font-weight:bold;
	border-right:1px dotted #d3b4eb;
	margin:0 10px 0 0 ;
}
.package_table th a  {
	padding:5px;
	color:#fff;
	display:block;
	text-decoration:none;
}
.package_table th a:hover {
	background: #B999FB;
}
.package_table td {
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
	padding:3px 5px;
	vertical-align:top;
}
.package_table tr:nth-child(odd) {
	background:rgba(220,205,235,0.3);
}
.package_table tr td {
	text-align:left;
	width:30%;
}
.package_table tr td+td {
	text-align: center;
	width:14%;
}
.price span{
	text-decoration:line-through;
}
.price b {
	display:block;
	font-size:17px;
	line-height:22px;
	color:#a05ac8;
	text-decoration:none;
}
.introduction {
	display:block;
	width:100%;
	max-width:980px;
	margin:auto;
}
.text_box {
	padding:10px 2%;
	display:block;
	width:96%;
	max-width:960px;
	margin:auto;
}
.text_box h2 {
	display:block;
	border-bottom:1px dotted #bbb;
	font-size:19px;
	font-weight:normal;
	padding:0;
	margin:5px 0;
	clear:both;
	color: #5D287F;
	line-height:normal;
}
.text_box h2 a {
	text-decoration:none;
	display:block;
	color: #5D287F;
}
.text_box h2 a:hover {
	color:#C6C;
}
.text_box h3 {
	color:#a05ac8;
	display:block;
	padding:0;
	margin:3px 0;
	line-height:normal;
}
.ref_text {
	display:block;
	padding:5px 0;
	text-align:justify;
	width:95%;
	clear:both;
}

a.pro_img {
	width:45%;
	height:200px;
	padding:5px;
	background:#fff;
	display:inline-block;
	float:left;
	margin:5px 2% 5px 0;
	text-align:center;
	border-radius:5px;
	box-shadow:0 0 10px rgba(0,0,0,0.1);
	*border:1px solid #ccc;
	*margin:5px 16px 5px 0;
}
a.pro_img img {
	max-height:200px;
	max-width:200px;
	width:100%;
}
a.pro_img:hover {
	margin:0px 2% 10px 0;
	box-shadow:0 10px 10px rgba(0,0,0,0.3);
}
a.pro_img:hover img {
	opacity:0.7;
	filter:alpha(opacity=70); 
}


a.demo_img {
	width:120px;
	height:120px;
	padding:3px;
	background:#fff;
	display:inline-block;
	float:left;
	margin:10px 20px 10px 0;
	border-radius:5px;
	box-shadow:0 0 10px rgba(0,0,0,0.1);
	*border:1px solid #ccc;
	*margin:5px 16px 5px 0;
}
a.demo_img img {
	max-height:120px;
	max-width:120px;
}
a.demo_img:hover {
	margin:0px 20px 10px 0;
	box-shadow:0 10px 10px rgba(0,0,0,0.3);
}
a.demo_img:hover img {
	opacity:0.7;
	filter:alpha(opacity=70); 
}


a.btn01 {
	display:inline-block;
	padding:5px 20px;
	margin:3px 2px 3px 0;
	min-width:150px;
	text-align:center;
	background:#a05ac8;
	color:#fff;
	border-radius:5px;
	text-decoration:none;
	box-shadow:1px 1px 2px rgba(0,0,0,0.3);
}
a.btn01:hover {
	background:#C6F;
}
.span_float {
	display:inline-block;
	width:48%;
	min-height:370px;
	float:left;
	margin:0 2% 1% 0;
}
.test_img {
	display:block;
	-webkit-column-width: 20em;
	-webkit-column-gap: 2em; 
	-webkit-column-rule: 1px solid #eee;  
	-webkit-column-count: 3;

	-moz-column-width: 20em;
	-moz-column-gap: 2em; 
	-moz-column-rule: 1px solid #eee;  
	-moz-column-count: 3;

	-ms-column-width: 20em;
	-ms-column-gap: 2em; 
	-ms-column-rule: 1px solid #eee;  
	-ms-column-count: 3;
	
	column-width: 20em;
	column-gap: 2em; 
	column-rule: 1px solid #eee;  
	column-count: 3;
	
	padding: 5px;
}
.test_img span {
	width:200px;
	display:inline-block;
	border:1px solid #000;
	vertical-align:top;
	margin:5px;
}
.test_img span img {
	width:200px;
}
.test_img span:nth-child(3n+2){
	border:1px solid red;
}

.test_img span:nth-child(3n+3) {
	border:1px solid #0f0;
}

ul.sales_point {
	padding:0;
	margin:20px 0;
	display:block;
	list-style:none;
	clear:both;
	text-align:center;
	width:100%;
	min-height:150px;
}
ul.sales_point li {
	display:inline-block;
	vertical-align:top;
	box-shadow:0 0 5px rgba(0,0,0,0.2);
	border-radius:100%;
	height:200px;
	padding:50px 10px 0 10px;
	width:230px;
	margin:10px 1%;
	color:#FFF;
	font-size:12px;
	text-shadow:0 -1px 1px rgba(0,0,0,0.5);
	background: #6c2580;
  background: radial-gradient(circle at 50% 120%, #f1a5ff, #d799ff 10%, #6c2580 80%, #1a0029 100%);
  box-shadow: 0 15px 10px rgba(0,0,0,0.3);
  
	animation:  bubble-anim 5s infinite ;
-webkit-animation:  bubble-anim 5s infinite; /* Safari and Chrome */
}

ul.sales_point li+li {
	animation:  bubble-anim 5s infinite linear 0.7s;
-webkit-animation:  bubble-anim 5s infinite linear 0.7s; /* Safari and Chrome */
	}
ul.sales_point li+li+li {
	animation:  bubble-anim 5s infinite linear 1.4s;
-webkit-animation:  bubble-anim 5s infinite linear 1.4s; /* Safari and Chrome */
	}
ul.sales_point li a {
	color:#fff;
	text-decoration:none;
}
ul.sales_point li:hover {
	background: #be38e4;
  background: radial-gradient(circle at 50% 120%, #f4baff, #e0b1ff 10%, #be38e4 80%, #64009d 100%);
}
	
@keyframes bubble-anim {
  0% {
    transform: scale(1);
  }
  5% {
    transform: scaleY(0.95) scaleX(1.05);
  }
  12% {
    transform: scaleY(1.1) scaleX(0.9);
  }
  17% {
    transform: scaleY(0.98) scaleX(1.02);
  }
  20% {
    transform: scaleY(1.02) scaleX(0.98);
  }
  25%, 100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bubble-anim {
  0% {
    transform: scale(1);
  }
  5% {
    transform: scaleY(0.95) scaleX(1.05);
  }
  12% {
    transform: scaleY(1.1) scaleX(0.9);
  }
  17% {
    transform: scaleY(0.98) scaleX(1.02);
  }
  20% {
    transform: scaleY(1.02) scaleX(0.98);
  }
  25%, 100% {
    transform: scale(1);
  }
}


ul.sales_point li span {
  display:block;
  width:240px;
  margin:-45px 0 -230px -5px;
  height:240px;
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 20% 0px, #ffffff, rgba(255, 255, 255, 0) 40%);

}
ul.sales_point li h1 {
	padding:25px 0 10px 0;
	margin:0;
}


a.more_btn {
	font-size:21px;
	display:block;
	margin:100px auto 0 auto;
	padding:7px 30px;
	color:#fff;
	width:60%;
	text-align:center;
	border-radius:20px;
	border:4px solid #fff;
	box-shadow: 0px 2px 5px  rgba(0,0,0,0.1);
	text-decoration:none;
	background: #a05ac8;
background: -moz-linear-gradient(top,  #aa79c6 0%, #a05ac8 100%);
background: -webkit-linear-gradient(top,  #aa79c6 0%,#a05ac8 100%);
background: linear-gradient(to bottom,  #aa79c6 0%,#a05ac8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aa79c6', endColorstr='#a05ac8',GradientType=0 );
}
a.more_btn:hover {
	background:#C6F;
}



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

.top {
	height:auto;
}
.top p { 
    float:none;
	text-align:center;
	width:100%;
	padding:0;
	line-height:40px;
}
.top span {
	display:block;
	padding:0;
	height:40px;
	width:100%;
}
.top span a {
	display:block;
	float:left;
	width:31%;
	line-height:35px;
	text-align:center;
	text-decoration:none;
	color:#666;
	margin:0 1% ;
	border-bottom:2px solid #f2e3ff;
}	
.top p span {
	text-align:center;
	padding:0;
	margin:0 auto;
	height:auto;
	font-size:12px;
}
.top p span img {
	margin:0 3px 0 0 ;
	height:45px;
}
.index_textbox h2, .index_textbox h3 {
	font-size:22px;
	line-height:25px;
}
.index_textbox h3 {
	margin:0 0 0 5%;
}
.span_float {
	width:100%;
	margin:10px 0 ;
	display:block;
	float:none;
}
.index_form {
	width:auto;
}
	
}


@media screen and (max-width: 640px){
	
.top p { 
    float:none;
	text-align:center;
	width:100%;
	line-height:20px;
	font-size:18px;
	padding:5px 0;
}
img.index_photo {
	display:block;
	width:100%;
	margin:0 0 -50px 0;
}
.index_textbox {
	width:96%;
	padding:0 2%;
	margin:0;
}
.index_textbox h2, .index_textbox h3 {
	margin:0;
	font-size:20px;
	line-height:25px;
}
.span_float {
	width:100%;
	margin:10px 0 ;
	display:block;
	float:none;
	min-height:100px;
}
.all {
	margin:auto;
	width:100%;
	padding:80px 0 80px 0;
}

.form_in {
	margin:0 -10px;
	width:auto;
}

.bottom_text {
	position:inherit;
	height:auto;
	padding:5px 0 50px 0;
}
.bottom_text p b {
	color:#a05ac8;
	position:fixed;
	bottom:0;
	padding:5px;
	background:rgba(255,255,255,0.8);
	display:block;
	font-size:16px;
	line-height:20px;
	float:right;
	margin:0 5px 0 180px;	
border-radius:5px 5px 0 0;
	text-shadow:0 0 5px #fff;
}
.bottom_text p span {
	float:none;
	font-size:10px;
	line-height:13px;
	padding:0 3px;
	display:block;
	text-align: center;
}
.form_show {
	width:160px;
	margin-left:-15px;
}
a.pro_img {
	margin:15px auto;
	float:none;
	display:block;
	width:200px;
}
a.pro_img:hover {
	margin:15px auto;
	box-shadow:0 10px 10px rgba(0,0,0,0.3);
}
.ref_text {
	width:100%;
}

.package_table th.package_text ul li span {
	display:block;
	width:100%;
	border:none;
}
ul.sales_point {
	margin:10px 0 ;
}

a.more_btn {
	margin:0 auto;
}

}