* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-color: #d7dde8; color: #000; 
  font-family: Helvetica, Arial, STHeiti, "Microsoft JhengHei", 微軟正黑體, sans-serif; }

html, body { height: 100%; }
body>section { min-height: 100%; 
  background-image: url(../img/images/bg_odd.png); 
  background-repeat: repeat-x;
}
body>section:nth-of-type(even) { 
  background-image: url(../img/images/bg_even.png); 
  background-color: #b8c4dd;
}
#sec1 { background-image: none; }
.container { max-width: 1200px; margin: 0 auto; padding: 50px 0; }
h1 img { vertical-align: middle; }
.wordRed { color: purple; }

/* nav 區域 ========================================================= */
#showMenu { display: none; }
nav { height: 70px; display: flex; 
  justify-content: center; align-items: flex-end;
}
nav a { background-color: #232150; color: #fff;
  font-size: 18px; font-weight: bold; letter-spacing: 2px;
  border-radius: 7px 7px 0 0; margin: 0 2px; padding: 10px 15px;
  text-decoration: none; transition: all .3s;
}
nav a:hover { padding-bottom: 25px; }

@media(max-width:700px){
  #showMenu { display: inline-block; 
    background-color: #232150; color: #fff; border-radius: 7px; 
    padding: 10px; margin: 5px; width: auto; }
  nav { height: auto; display: none; }
  nav a { display: block; text-align: center; padding: 10px; 
    background-color: transparent; color: #232150; margin: 10px 20px 0;
    border-bottom: 1px solid rgba(35, 33, 80, 0.5); 
  }
}

/* header 區域 ========================================================= */
header { height: 200px;
  background-image: url(../img/images/header.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  background-color: #232150;
}
@media(max-width:1200px){
  header { background-position: left top; }
}

.imgAni1 {
  animation-name: imgAni1;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
@keyframes imgAni1{
  50% { transform: scale(1.3); }
  60% { transform: scale(1.0); }
  70% { transform: scale(1.1); }
  80% { transform: scale(1.0); }
  90% { transform: scale(1.1); }
}

.imgAni2 {
  transform-origin: 100% 100%;
  animation-name: imgAni2;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
@keyframes imgAni2{
  50% { transform: rotate(-15deg); }
}

/* #sec1 區域 ========================================================= */
#sec1 ol { margin: 20px 50px; font-size: 17px; font-weight: bold; }
#sec1 li { margin-bottom: .5em; }

/* #sec2 區域 ========================================================= */
#sec2 .flexbox { display: flex; flex-wrap: wrap; padding: 30px; }
#sec2 figure { background-color: rgba(255, 255, 255, 0.4); /*float: left;*/
  width: 23%; margin: 1%; padding: 1.5%; position: relative;
}
#sec2 figure img { width: 100%; height: auto; border-radius: 5px;
  box-shadow: -2px -2px 2px rgba(0, 0, 0, 0.75); transition: all .5s; }
#sec2 figure img:hover { transform: scale(1.1); box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); }
#sec2 figure figcaption { text-align: center; padding-top: 10px; }
#sec2 figure::after { content: '';
  background-image: url(../img/images/shadow2.png);
  background-repeat: no-repeat;
  background-size: contain; width: 100%; height: 17px;
  position: absolute; left: 0; bottom: -17px;
}

@media(max-width:1000px){
  #sec2 figure { width: 40%; margin: 2.5%; padding: 2.5%; }
}
@media(max-width:500px){
  #sec2 figure { width: 84%; margin: 4%; padding: 4%; }
}

/* #sec3 區域 ========================================================= */
#sec3 { position: relative; padding-bottom: 50px; }
footer { position: absolute; left: 0; bottom: 0; width: 100%;
  padding: 15px; box-sizing: border-box; text-align: center;
  background-color: #232150; color: #fff;
}

#sec3 .container { overflow: hidden; }
#sec3 figure { width: 23%; margin: 1%; box-sizing: border-box;
  border: 10px solid rgba(20, 50, 132, 0.5); border-radius: 7px;
  float: left;  position: relative; overflow: hidden; }
#sec3 figure img { width: 100%; height: auto; display: block; }
#sec3 figure figcaption { box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.7); color: #fff; 
  width: 100%; height: 50%;
  position: absolute; left: 0; bottom: -50%; padding: 15px;
  text-align: center; transition: all .5s;
}
#sec3 figure:hover figcaption { bottom: 0; }

@media(max-width:1000px){
  #sec3 figure { width: 44%; margin: 3%; }
  #sec3 figure figcaption { bottom: 0; height: 30%; }
}
@media(max-width:500px){
  #sec3 figure { width: 84%; margin: 4% 8%; }
}

#goTop { font-size: 20px; font-weight: bold; text-decoration: none;
  background-color: rgba(255, 255, 255, 0.5); cursor: pointer; 
  width: 140px; height: 140px; border-radius: 50%;
  display: block; padding: 35px 15px; box-sizing: border-box; 
  position: fixed; right: -70px; bottom: -70px;
}

@media(min-width:701px){
  #goTop:hover { animation: goTopAni 1s infinite; }
  @keyframes goTopAni{
    50% { background-color: #ffffff; box-shadow: 0 0 20px red; transform: scale(1.1); }
  }
}