/*公共变量*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block; margin:0; padding:0}

/** the form elements **/
#hongkiat-form { box-sizing: border-box;}

#hongkiat-form .txtinput { 
display: block;
border-style: solid;
border-width: 1px;
border-color: #dedede;
font-size:12px; padding-left:8px;

width:185px; height:24px;
color: #777;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset; 
transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-moz-border-radius: 15px;      /* Gecko browsers */
-webkit-border-radius: 15px;   /* Webkit browsers */
border-radius:15px;            /* W3C syntax */
}

#hongkiat-form .txtinput:focus,#hongkiat-form .txtinput:hover { 
color: #333;
border-color: rgba(41, 92, 161, 0.4);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
outline: 0 none;
}

#hongkiat-form2 .txtinput,#hongkiat-form2 #saytext{ 
display: block;
border-style: solid;
border-width: 1px;
border-color: #dedede;
font-size:12px; padding-left:8px;

width:185px; height:24px;
color: #777;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset; 
transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-moz-border-radius: 6px;      /* Gecko browsers */
-webkit-border-radius: 6px;   /* Webkit browsers */
border-radius:6px;            /* W3C syntax */
}
#hongkiat-form2 #saytext{height:150px;outline: 0 none; padding:8px;}

#hongkiat-form2 .txtinput:focus,#hongkiat-form2 .txtinput:hover,#hongkiat-form2 #saytext:hover { 
color: #333;
border-color: rgba(41, 92, 161, 0.4);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
outline: 0 none;
}


.hi-icon {
	display: inline-block;
	cursor: pointer;
	width: 29px;
	height: 29px;
	border-radius: 50%;
	text-align: center;
	position: relative;
	z-index: 1; float:left
}
.hi-icon-effect-5 .hi-icon {
	box-shadow: 0 0 0 4px rgba(255,255,255,1);
	overflow: hidden;
	-webkit-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
	-moz-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
	transition: background 0.3s, color 0.3s, box-shadow 0.3s; background:url(../1/phone-h.png) #ffb100 no-repeat center center 
}

.hi-icon-effect-5 .hi-icon:after {
	display: none;
}

.no-touch .hi-icon-effect-5 .hi-icon:hover {
	background:url(../1/phone.png) no-repeat center center rgba(17,17,17,0.8);
	color: #702fa8;
	box-shadow: 0 0 0 2px rgba(34,33,50,0.3);
}

.no-touch .hi-icon-effect-5a .hi-icon:hover:before {
	-webkit-animation: toRightFromLeft 0.3s forwards;
	-moz-animation: toRightFromLeft 0.3s forwards;
	animation: toRightFromLeft 0.3s forwards;
}

.hi-icon-effect-6 li{ float:right; padding-left:10px;}
.hi-icon-effect-6 li{ float:right; padding-right:10px;}
.hi-icon-effect-6 a{
	box-shadow: 0 0 0 4px rgba(255,255,255,1);
	overflow: hidden;
	-webkit-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
	-moz-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
	transition: background 0.3s, color 0.3s, box-shadow 0.3s; background:url(../1/phone-h.png) #333 no-repeat center center;
	display: inline-block;
	cursor: pointer;
	width: 27px;
	height: 27px;
	border-radius: 50%;
	text-align: center;
	position: relative;
	z-index: 1;
}
.hi-icon-effect-6 .set-home{background:url(../1/home.png) #333 no-repeat center center;}
.hi-icon-effect-6 .mail-ico{background:url(../1/mail.png) #333 no-repeat center center;}
.hi-icon-effect-6 .go-eng{background:url(../1/en.png) #333 no-repeat center center;}
.hi-icon-effect-6 .go-ch{background:url(../1/ch.png) #333 no-repeat center center;}

.hi-icon-effect-6 a:after {
	display: none;
}

.no-touch .hi-icon-effect-6 a:hover {
	background:url(../1/phone.png) no-repeat center center rgba(51,51,51,0.8);
	color: #702fa8;
	box-shadow: 0 0 0 2px rgba(34,33,50,0.3);
}

.no-touch .hi-icon-effect-6 .set-home:hover {
	background:url(../1/home.png) no-repeat center center rgba(255,177,0,1);
	color: #702fa8;
	box-shadow: 0 0 0 2px rgba(255,177,0,0.3);
}
.no-touch .hi-icon-effect-6 .mail-ico:hover {
	background:url(../1/mail.png) no-repeat center center rgba(255,177,0,1);
	color: #702fa8;
	box-shadow: 0 0 0 2px rgba(255,177,0,0.3);
}
.no-touch .hi-icon-effect-6 .go-eng:hover {
	background:url(../1/en.png) no-repeat center center rgba(255,177,0,1);
	color: #702fa8;
	box-shadow: 0 0 0 2px rgba(255,177,0,0.3);
}
.no-touch .hi-icon-effect-6 .go-ch:hover {
	background:url(../1/ch.png) no-repeat center center rgba(255,177,0,1);
	color: #702fa8;
	box-shadow: 0 0 0 2px rgba(255,177,0,0.3);
}


.no-touch .hi-icon-effect-6a a:hover:before {
	-webkit-animation: toRightFromLeft 0.3s forwards;
	-moz-animation: toRightFromLeft 0.3s forwards;
	animation: toRightFromLeft 0.3s forwards;
}


@-webkit-keyframes toRightFromLeft {
	49% {
		-webkit-transform: translate(100%);
	}
	50% {
		opacity: 0;
		-webkit-transform: translate(-100%);
	}
	51% {
		opacity: 1;
	}
}
@-moz-keyframes toRightFromLeft {
	49% {
		-moz-transform: translate(100%);
	}
	50% {
		opacity: 0;
		-moz-transform: translate(-100%);
	}
	51% {
		opacity: 1;
	}
}
@keyframes toRightFromLeft {
	49% {
		transform: translate(100%);
	}
	50% {
		opacity: 0;
		transform: translate(-100%);
	}
	51% {
		opacity: 1;
	}
}