body{
  margin:0;
  padding:0;
  background-color:#fafafa;
}

.header-blog .container {
  position: relative;
  height: 100%;
}

.header-blog, .stats, footer, .video, .call-to-action {
  background-image: url("https://melodychuan.synology.me/assets/img/post-bg.jpg");
}

.header-blog {
  height: 60vh;
  padding-top: 100px;
  margin-top:70px;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-box-shadow: 0 15px 30px 0 rgba(5, 16, 44, .15);
  box-shadow: 0 15px 30px 0 rgba(5, 16, 44, .15);
}


.bg-animation {
  -webkit-animation: bg-animation 25s ease-in-out infinite;
  animation: bg-animation 25s ease-in-out infinite;
}


header{
  display:block;
}

.header-blog .container {
  position: relative;
  height: 100%;
}

.header-row {
  height: 100%;
}

.white {
  color: #F7F8FC;
}
.h1, h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto', sans-serif;
}

.white-link {
  font-weight: bold;
  opacity: .7;
  color: #F7F8FC;
  transition: .4s;
  -webkit-transition: .4s;
}

.white-link:hover {
  opacity: 1;
  color: #F7F8FC;
}

/*****animated text start*****/
/****將 .typing-txt-block 背景圖的圖片以及高度設定好*****/
.typing-txt-block {
  height: 70vh;
  display: block;
  background-image: url("../images/bg-banner-01.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}
/****接下來設定控制背景圖片 .bg-animation 的動態效果****/
.typing-txt-block.bg-animation {
  -webkit-animation: bg-animation 20s ease-in-out infinite;
  animation: bg-animation 20s ease-in-out infinite;
}
/****利用 position 的觀念，將文字區塊垂直置中在圖片正中央****/
.typing-txt-block .container h1 {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  letter-spacing: 5px;
  color: transparent;
}

/****利用偽元素 ::before ，將要呈現的文字顯示以及輸入文字動態效果的 css 樣式寫入****/
.typing-txt-block .container h1::before {
  content: attr(data-text);
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  color: #fff;
  overflow: hidden;
  border-right: 1px solid #ffffff;
  animation: type 3s steps(18), blink 0.5s infinite alternate;
  -webkit-animation: type 3s steps(18), blink 0.5s infinite alternate;
  white-space: nowrap;
}

/****在 3 秒內將文字寬度以 18 格從 0% ~ 100% 顯示，只播放****/
@keyframes type {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
/*****animated text End*****/
/****blink 的動畫設定：

 -- 每 0.5s 顯示輸入的閃爍線，並無限播放閃爍線顏色(從透明變白色****/
@keyframes blink {
  from {
    border-color: transparent;
  }
  to {
    border-color: #ffffff;
  }
}

/*****bg-animation 的動畫設定： 背景圖片上下位移*****/
@keyframes bg-animation {
  0% {
    background-position: top;
  }
  50% {
    background-position: bottom;
  }
  100% {
    background-position: top;
  }
}