@import url("https://fonts.googleapis.com/css?family=Lato:400,100,300,700,100italic,300italic,400italic,700italic,900,900italic");
@import url("https://fonts.googleapis.com/css?family=Raleway:400,700");

body {
  padding: 0;
  margin: 0;
}

body .btn-bg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

body .btn-bg.bg-1 {}

body .btn-bg.bg-1 .btn-1 button {
  width: 100% !important;
  color: #fff;
  background: transparent;
  border: 3px solid #f18f00;
  background-color: #f18f00;
  border-radius: 35px;
  transition: all 0.5s ease;
  transform: translate(0, 0);
}

body .btn-bg.bg-1 .btn-1 button:hover {
  background: #ffe2b7;
  color: #f12d00;
  border: 3px solid #f18f00;
  transition: all 0.35s ease;
}

body .btn-bg.bg-1 .btn-1 button:active {
  transform: translate(5px, 5px);
}


.btn {
  width: 85%;
  margin: 20px auto 20px auto;
}

h2 {
  text-align: center;
  font-family: 'Raleway';
  font-weight: 600;
  color: #fff;
}

button {
  cursor: pointer;
  overflow: hidden;
  outline: none;
  color: #fff;
  position: relative;
  letter-spacing: 0.1em;
  font-weight: 500;
  padding: 1rem 3rem;
  text-transform: uppercase;
  font-family: "Lato";
  font-size: 1.8em;
}

button a {
  text-decoration: none;
}


.btn-custom {
  width: 20% !important;  
  margin: 0 auto  20px auto !important;
}

/* ===== 手機版 ===== */
@media screen and (max-width:1049px){

  button {
    font-weight: bold;    
    font-size: 3.5em;
  }

  .btn {
    width: 80%;
    margin: 00px auto 00px auto !important
  }

  body .btn-bg.bg-1 .btn-1 button {
    border-radius: 100px;
  }


  .btn-custom {
    width: 75% !important; 
	margin: 15px 0px 0px 0px !important;
	  padding: 5px auto !important; 
	 
	  
  }

}