@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);

/* font-family: 'Righteous', cursive; 英文方圓體    */
/* font-family: 'Noto Sans TC', sans-serif; 中文黑體 */
/* font-family: 'Righteous', 'Noto Sans TC', sans-serif; 英文方圓體中文黑體 */

/* reset & default & all 區域 ============================================================ */
* { margin: 0; padding: 0; }

html, body { height: 100%; }

body { background-color: #d7dde8; font-size: 15px; letter-spacing: 1px;
  font-family: Helvetica, Arial, STHeiti, "Microsoft JhengHei", 微軟正黑體, sans-serif;}

ul, ol, li { list-style: none; }
a { text-decoration: none; color: #3c75b7; 
  font-family: 'Righteous', 'Noto Sans TC', sans-serif; }
a:hover { color: #d600a5; }


/* section all 區域 ======================================================================= */
/*
當有四邊設定=>合併縮寫的方式
padding: 四周;
padding: 上下 左右;
padding: 上 右 下 左;
padding: 上 右左 下;
*/
section { min-height: 100%; padding: 50px 7% 100px; overflow: hidden;
  background-repeat: repeat-x; position: relative; box-sizing: border-box; }
section:nth-of-type(even) { background-image: url(images/even_bg.png); background-color: #b8c4dd; }
section:nth-of-type(odd)  { background-image: url(images/odd_bg.png); }
section:nth-of-type(1) { background-image: none; padding: 0; }
section:nth-of-type(1) .container { padding: 50px 7% 100px; }

section h1 { font-weight: normal; font-size: 2em; margin-bottom: 20px;
  font-family: 'Righteous', 'Noto Sans TC', sans-serif; }
.fa-heartbeat { font-size: 1.5em; }

/* section #sec1 區域 ===================================================================== */
/* nav 區域 ----------------------------- */
nav { 
  display: -moz-flex; 
  display: -webkit-flex; 
  display: flex; 
  justify-content: center; 
  align-items: flex-end; 
  height: 60px; 
}
nav a { background-color: #a431f8; color: #fff; padding: 10px 15px; margin: 0 3px; 
  border-radius: 10px 10px 0 0; font-size: 17px; transition: all 0.3s; 
}

nav a:hover { padding-bottom: 25px; color: #fff; }

nav a {
  /* 設計按鈕漸層顏色 */
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b456b7+0,cf85d3+8,993a91+33,592855+94 */
  background: #524f9d; /* Old browsers */ /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #504d91 0%,#c9c7eb 8%,#504d91 33%,#232150 90%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #504d91 0%,#c9c7eb 8%,#504d91 33%,#232150 90%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b456b7', endColorstr='#592855',GradientType=0 ); /* IE6-9 */
}

#showMenu { display: none; }

@media screen and (max-width: 700px) {
  nav { display: block; height: auto; }
  nav a, nav a:hover { 
    display: block; background: transparent; color: #000; text-align: center; 
    border-bottom: 1px dotted gray; padding: 10px 15px 5px 15px; 
  }

  #showMenu { font-size: 24px; padding: 10px; display: inline-block; cursor: pointer; }
}

/* header 區域 ----------------------------- */
header { height: 200px; 
  background-image: url(images/header.jpg);
  background-repeat: no-repeat;
  background-color: #232150;
  background-position: center top;
}

@media(max-width:1200px){
  header { background-position: left top; }
}

.fa-home { animation-name: homeAni; animation-duration: 2s; }

@keyframes homeAni{
  0% { transform: translateX(330px); opacity: 0; }
  50% { transform: translateX(330px); opacity: 1; }
  100% {  }
}

/* section #sec1 區域 ===================================================================== */
#slide { border: 5px solid #fff; background-color: #cdcceb; 
  width: 1200px; margin: 0 auto; display: flex; }

#slideContent { width: 900px; position: relative; }
#slideContent li { width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0;
  background-position: center; background-size: cover; animation: slideAni 40s infinite; }
#slideContent li:nth-of-type(1) { background-image: url(images/slide1.jpg); }
#slideContent li:nth-of-type(2) { background-image: url(images/slide2.jpg); }
#slideContent li:nth-of-type(3) { background-image: url(images/slide3.jpg); }
#slideContent li:nth-of-type(4) { background-image: url(images/slide4.jpg); }
#slideContent li:nth-of-type(5) { background-image: url(images/slide5.jpg); }
#slideContent li:nth-of-type(6) { background-image: url(images/slide6.jpg); }
#slideContent li:nth-of-type(7) { background-image: url(images/slide7.jpg); }
#slideContent li:nth-of-type(8) { background-image: url(images/slide8.jpg); }

#slideContent li:nth-of-type(1) { animation: slideAni 40s  0s infinite; }
#slideContent li:nth-of-type(2) { animation: slideAni 40s  5s infinite; }
#slideContent li:nth-of-type(3) { animation: slideAni 40s 10s infinite; }
#slideContent li:nth-of-type(4) { animation: slideAni 40s 15s infinite; }
#slideContent li:nth-of-type(5) { animation: slideAni 40s 20s infinite; }
#slideContent li:nth-of-type(6) { animation: slideAni 40s 25s infinite; }
#slideContent li:nth-of-type(7) { animation: slideAni 40s 30s infinite; }
#slideContent li:nth-of-type(8) { animation: slideAni 40s 35s infinite; }

#slideMenu { width: 300px; border-left: 5px solid #fff; display: flex; flex-direction: column; }

#slideMenu li { border-bottom: 1px solid #fff; }
#slideMenu li:last-child { border-color: transparent; }

#slideMenu li a { display: block; padding: 10px 20px 10px 60px; transform: translateX(-40px);
  font-family: 'Righteous', 'cwTeXHei', sans-serif; color: #000; 
  width: 340px; box-sizing: border-box; }

#slideMenu li:nth-of-type(1) a { animation: slideMenuAni 40s  0s infinite; }
#slideMenu li:nth-of-type(2) a { animation: slideMenuAni 40s  5s infinite; }
#slideMenu li:nth-of-type(3) a { animation: slideMenuAni 40s 10s infinite; }
#slideMenu li:nth-of-type(4) a { animation: slideMenuAni 40s 15s infinite; }
#slideMenu li:nth-of-type(5) a { animation: slideMenuAni 40s 20s infinite; }
#slideMenu li:nth-of-type(6) a { animation: slideMenuAni 40s 25s infinite; }
#slideMenu li:nth-of-type(7) a { animation: slideMenuAni 40s 30s infinite; }
#slideMenu li:nth-of-type(8) a { animation: slideMenuAni 40s 35s infinite; }
 
@keyframes slideMenuAni{
   2.0% { background-image: url(images/slideMenuHover.png); color: #fff; }
  12.5% { background-image: url(images/slideMenuHover.png); color: #fff; }
  14.5% { background-image: none; color: #000; }
}

@keyframes slideAni{
   2.0% { opacity: 1; }
  12.5% { opacity: 1; }
  14.5% { opacity: 0; }
}

#slide:hover li a { animation-play-state: paused; }
#slide:hover li { animation-play-state: paused; }

@media screen and (max-width:1500px){
  #slide { width: 900px; flex-direction: column; }
  #slideContent { width: 900px; height: 400px; }
  #slideMenu { width: 100%; display: flex; border: none;
    flex-direction: row; justify-content: space-between; }
  #slideMenu li { border: none; flex: 1; }
  #slideMenu li span { display: none; }
  #slideMenu li a { width: 100%; padding: 10px 0; transform: none; text-align: center; }

  @keyframes slideMenuAni{
     2.0% { background-color: #b7a0d3; color: #fff; position: static; }
    12.5% { background-color: #b7a0d3; color: #fff; position: static; }
    14.5% { background-color: transparent; color: #000; }
  }
}

@media screen and (max-width:1100px){
  #sec1content { padding: 50px 20px 100px; }
  #slide { width: 100%; }
  #slideContent { width: 100%; height: 330px; }
  #slideMenu li a { font-size: 13px; }
}

@media screen and (max-width:750px){
  #slideMenu { display: none; }
  #slideContent { height: 220px; }
}

/* section #sec2 區域 ===================================================================== */

.fa-heartbeat { 
  transform-origin: 50% 100%;
  animation-name: heartAni; 
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

@keyframes heartAni{
  0% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
  100% { transform: rotate(-10deg); }
}

#sec2 article { float: left; width: 46%; margin: 2%; }
#sec2 article img { float: left; }
#sec2 article h2 { padding-left: 120px; padding-bottom: 20px; }
#sec2 article p { padding-left: 120px; text-align: justify; word-break: break-all; }

#sec2 article .testWrap { width: 200px; display: inline-block;
  background-color: rgba(255, 255, 255, 0.6); 
  white-space: nowrap; overflow: hidden; text-overflow:ellipsis;
  transition: all 0.5s; vertical-align: middle;
}

#sec2 article .testWrap:hover { width: 300px; }

@media(max-width:1000px){ #sec2 article { float: none; width: 90%; margin: 5%; } }
@media(max-width:700px){ 
  #sec2 article { text-align: center; }
  #sec2 article img { float: none; }
  #sec2 article h2 { padding: 20px 0; }
  #sec2 article p { padding-left: 0px;  }
}


/* section #sec3 區域 ===================================================================== */
#sec3 .container { display: flex; flex-wrap: wrap; }
#sec3 figure { background-color: rgba(255, 255, 255, 0.4); position: relative;
  float: left; width: 19%; margin: 1%; padding: 2%; }

#sec3 figure img { width: 100%; height: auto; border-radius: 10px;
  box-shadow: -1px -2px 2px #000; transition: all 0.5s; }

#sec3 figure img:hover { transform: scale(1.1);
  box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.44); }

#sec3 figure figcaption { text-align: center; padding-top: 10px; }

#sec3 figure:after { content: ''; 
  background-image: url(images/shadow2.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute; left: 0; bottom: -17px; width: 100%; height: 17px;
}

@media(max-width:760px){ #sec3 figure { width: 40%; margin: 2%; padding: 3%; }  }
@media(max-width:400px){ #sec3 figure { width: 82%; margin: 4%; padding: 5%; }  }


/* section #sec4 區域 ===================================================================== */
#sec4 figure { float: left; width: 14.66%; margin: 1%; position: relative; 
  border-radius: 50%; transition: all 0.5s; }

#sec4 figure img { width: 100%; height: auto; border-radius: 50%; display: block; }

#sec4 figure a { position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.6); color: #fff;
  font-size: 20px; text-align: center;
  border-radius: 50%; display: flex; justify-content: center; align-items: center; 
  opacity: 0;/*不透明度*/ transition: all 3s;
}

#sec4 figure:hover { transform: scale(1.4) rotate(360deg); z-index: 1;
  box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.5);
  border-width: 3px;
  border-style: solid;
  border-color: #fff;
  border: 3px solid #fff;
  box-sizing: border-box;
}
#sec4 figure:hover a { opacity: 1; }

@media( max-width:1300px ){ #sec4 figure { width: 18%; } }
@media( max-width:1000px ){ #sec4 figure { width: 23%; } }
@media( max-width:700px ){ 
  #sec4 figure { width: 31.33%; } 
  #sec4 figure a { opacity: 1; background-color: rgba(0, 0, 0, 0.4); }
}
@media( max-width:500px ){ #sec4 figure { width: 48%; } }
@media( max-width:350px ){ #sec4 figure { width: 98%; } }


/* section #sec5 區域 ===================================================================== */
audio, video { display: block; width: 100%; max-width: 800px; margin: 30px auto; }

/* footer 區域 ----------------------- */
footer { background-color: #232150; color: #d1cfff; 
  width: 100%; padding: 1em; text-align: center;
  position: absolute; left: 0; bottom: 0; border: 5px solid #4a4780;
  box-sizing: border-box; }


/*  aside 區域 ============================================================================ */
aside { position: fixed; right: 0; top: 50%; transform: translateY(-50%); }
aside a { display: block; background-color: rgba(255, 255, 255, 0.2); padding-right: 20px;
  right: -20px; position: relative; transition: all 0.3s; 
  animation: asideAni 0.5s 3;
}
aside a:nth-of-type(1) { animation-delay: 2.0s; }
aside a:nth-of-type(2) { animation-delay: 2.3s; }
aside a:nth-of-type(3) { animation-delay: 2.6s; }
aside a:nth-of-type(4) { animation-delay: 2.9s; }
aside a:nth-of-type(5) { animation-delay: 3.2s; }
aside a:nth-of-type(6) { animation-delay: 3.5s; }

aside a img { width: 60px; height: auto; }

/* asude a:nth-of-type(1) { border-top-left-radius: 10px; } */
aside a:first-of-type { border-top-left-radius: 10px; }
aside a:last-of-type { border-bottom-left-radius: 10px; }

aside a:hover { 
  background-color: rgba(255, 255, 255, 1); 
  box-shadow: 2px 2px 2px #000;
  border-radius: 10px 0 0 10px;
  right: 0;
}

@keyframes asideAni {
  50% { background-color: rgba(255, 255, 255, 1); 
    box-shadow: 2px 2px 2px #000;
    border-radius: 10px 0 0 10px;
    right: 0; }
}

/*  #goTop 區域 ============================================================================ */
#goTop { width: 150px; height: 150px; border-radius: 50%; position: fixed; 
  left: 50%; bottom: 0; transform: translate(-50%,70%); cursor: pointer;
  background-color: rgba(0, 0, 0, 0.3); color: #fff;
  font-size: 20px; text-align: center; padding-top: 20px;
  box-sizing: border-box; animation: goTopAni 8s infinite;
}

@keyframes goTopAni {
  0%  { transform: translate(-50%,70%); }
  20% { transform: translate(-50%,70%); }
  30% { transform: translate(-50%,25%); 
    -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
    animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
  35% { transform: translate(-50%,25%) scale(1.2); }
  40% { transform: translate(-50%,25%) scale(1); }
  60% { transform: translate(-50%,25%) scale(1.5); }
  100% { transform: translate(-50%,70%) scale(1); }
}