@charset "utf-8";

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


@font-face {
      font-family: 'fontello';
      src: url('../font/fontello.eot?32328449');
      src: url('../font/fontello.eot?32328449#iefix') format('embedded-opentype'),
           url('../font/fontello.woff?32328449') format('woff'),
           url('../font/fontello.ttf?32328449') format('truetype'),
           url('../font/fontello.svg?32328449#fontello') format('svg');
	    
      font-weight: normal;
      font-style: normal;
    }
     
     
    .fet_arrow_icon
    {
      font-family: "fontello";
      font-style: normal;
      font-weight: normal;
      speak: none;
     
      display: inline-block;
      text-decoration: inherit;
      width: 1em;
      margin-right: .2em;
      text-align: center;
      /* opacity: .8; */
     
      /* For safety - reset parent styles, that can break glyph codes*/
      font-variant: normal;
      text-transform: none;
     
      /* fix buttons height, for twitter bootstrap */
      line-height: 1em;
     
      /* Animation center compensation - margins should be symmetric */
      /* remove if not needed */
      margin-left: .2em;
     
      /* You can be more comfortable with increased icons size */
      /* font-size: 120%; */
     
      /* Font smoothing. That was taken from TWBS */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
     
      /* Uncomment for 3D effect */
      /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
    }

.button_fet {
	font-family: Helvetica, Arial, '儷黑 Pro', 'LiHei Pro', '微軟正黑體', sans-serif;
	display: inline-block;
	border-radius: 40px;
	background-color: transparent; 
	border: 1px solid #7e878c;
	color: rgb(193, 24, 33);
	text-align: center;
	font-size: 20px;
	padding: 15px 35px 15px 35px;
	/*transition: all 0.5s;*/
	cursor: pointer;
	margin: 10px;
}


.button_fet:hover {
	background-color: rgb(193, 24, 33);
    color: #FFFFFF;
}

.button_fet .fet_arrow_icon {
	color: red
}

.button_fet:hover .fet_arrow_icon {
	color: #fff;
	 right: 0px;
transition: 0.5s;

	
}

.button_fet:hover .fet_arrow_icon:after {

	  right: -50px;
  transition: 0.5s;
}



.button_fet span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button_fet span::after {
  font-family: "fontello";
  content: '\fe';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
  margin-right: -5px
}

.button_fet:hover span {
  padding-right: 25px;
}

.button_fet:hover span:after {
  opacity: 1;
  right: 0;
}

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

.button_fet {
	font-family: Helvetica, Arial, '儷黑 Pro', 'LiHei Pro', '微軟正黑體', sans-serif;
	display: inline-block;
	border-radius: 30px;
	background-color: transparent; 
	border: 0px solid #7e878c;
	color: rgb(193, 24, 33);
	text-align: center;
	font-size: 17px;
	padding: 10px 25px 10px 25px;
	/*transition: all 0.5s;*/
	cursor: pointer;
	/* margin: 10px; */
	/* margin-top: 300px; */
}
.button_fet:hover {
	background-color: rgb(193, 24, 33);
    color: #FFFFFF;
}

.button_fet span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button_fet span:after {
  content: '\fe';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button_fet:hover span {
  padding-right: 25px;
}

.button_fet:hover span:after {
  opacity: 1;
  right: 0;
}

}