/* 
font-family: 'Orbitron', sans-serif; 英文方正字型
font-family: 'Noto Sans TC', sans-serif; 中文黑體
font-family: 'Orbitron', 'Noto Sans TC', sans-serif; 英文方正字+中文黑體
*/

/* reset & default ===================================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html,body { height: 100%; }
body { background-color: #ccc; color: #222;
  font-size: 0.95rem; letter-spacing: 0.05rem;
  font-family: Helvetica, Arial, "Microsoft JhengHei UI", 微軟正黑體, sans-serif;  }
a { text-decoration: none; }
ul,ol,li { list-style: none; }


/* header  ============================================================================================== */
header { position: absolute; left: 0; top: 0; width: 100%; z-index: 9; }
header div { background-color: #272A32; box-shadow: 0 3px 3px #000; }
header img { display: block; margin: 0 auto; max-width: 50%; }
header nav { display: flex; justify-content: center; }
header nav a { background-image: url(../images/btn-s.png); display: block; 
  width: 200px; height: 65px; text-align: center; padding-top: 10px; 
  color: #fff; font-size: 20px; letter-spacing: 10px; padding-left: 10px; 
  font-family: 'Orbitron', 'Noto Sans TC', sans-serif; }
header .showMenu { display: none; }


header.fixed { position: fixed; width: 100%; left: 0; top: 0; animation: headerAni 0.8s; }

@keyframes headerAni{
  0% { transform: translateY(-150px); }
  100% { transform: translateY(0px); }
}


/* section all page =================================================================================== */
section { min-height: 100%; position: relative; padding: 200px 7% 50px; overflow: hidden; }

body>section:nth-of-type(1) { background-image: url(../images/bg1.png); }
body>section:nth-of-type(2) { background-image: url(../images/bg2.png); }
body>section:nth-of-type(3) { background-image: url(../images/bg3.png); }
body>section:nth-of-type(4) { background-image: url(../images/bg4.png); }
body>section:nth-of-type(5) { background-image: url(../images/bg5.png); }

#sec1 { overflow: hidden; }
#sec1 .imgAni { position: absolute; height: auto }
#sec1 .imgAni:nth-of-type(1) { width: 25vw;  left:  50vw; top: 25vh; transform: translateX(-50%) scale(1); } /*中央文字圖*/
#sec1 .imgAni:nth-of-type(2) { width: 45vw;  left: -13vw; bottom: -35vh; } /*平板*/
#sec1 .imgAni:nth-of-type(3) { width: 45vw; right: -10vw; bottom: -38vh; } /*筆記本*/
#sec1 .imgAni:nth-of-type(4) { width: 25vw; right:  -3vw; bottom:   0vh; } /*手機*/
#sec1 .imgAni:nth-of-type(5) { width: 15vw; right:  20vw; bottom:   3vh; } /*筆*/
#sec1 .imgAni:nth-of-type(6) { width: 25vw;  left:  18vw; bottom: -15vh; } /*咖啡杯*/

#sec1 .imgAni.whs:nth-of-type(1) { width: 50vw; left: 50vw; top: 20vh; transform: translateX(-50%) scale(1); } /*中央文字圖*/
#sec1 .imgAni.whs:nth-of-type(2) { width: 65vw;  left: -25vw; bottom: 12vh; } /*平板*/
#sec1 .imgAni.whs:nth-of-type(3) { width: 65vw; right: -20vw; bottom:  2vh; } /*筆記本*/
#sec1 .imgAni.whs:nth-of-type(4) { width: 35vw; right:  -8vw; bottom: 25vh; } /*手機*/
#sec1 .imgAni.whs:nth-of-type(5) { width: 25vw; right:  12vw; bottom:  5vh; } /*筆*/
#sec1 .imgAni.whs:nth-of-type(6) { width: 45vw;  left:  10vw; bottom:  5vh; } /*咖啡杯*/

#sec1 .imgAni:nth-of-type(1) { animation: sec1ImgAni1 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } /*中央文字圖*/
#sec1 .imgAni:nth-of-type(2) { animation: sec1ImgAni2 2.5s; } /*平板*/
#sec1 .imgAni:nth-of-type(3) { animation: sec1ImgAni3 2.5s; } /*筆記本*/
#sec1 .imgAni:nth-of-type(4) { animation: sec1ImgAni2 5.0s cubic-bezier(0.89, 0, 0.78, 0.56); } /*手機*/
#sec1 .imgAni:nth-of-type(5) { animation: sec1ImgAni3 5.5s cubic-bezier(0.86, 0, 0.07, 1); } /*筆*/
#sec1 .imgAni:nth-of-type(6) { animation: sec1ImgAni4 5.0s cubic-bezier(0.645, 0.045, 0.355, 1); } /*咖啡杯*/

/*中央文字圖*/
@keyframes sec1ImgAni1{
  0% { transform: translateX(-50%) scale(0); }
  20% { transform: translateX(-50%) scale(0); }
}      
/*平板,手機*/
@keyframes sec1ImgAni2{
  0% { transform: translate(-40vh, 80vh); }
  20% { transform: translate(-40vh, 80vh); }
}      
/*筆記本,筆*/
@keyframes sec1ImgAni3{
  0% { transform: translate(40vh, 80vh); }
  40% { transform: translate(40vh, 80vh); }
}
/*咖啡杯*/
@keyframes sec1ImgAni4{
  0% { transform: scale(0) rotate(0deg); }
  50% { transform: scale(0) rotate(0deg); }
  100% { transform: scale(1) rotate(360deg); }
}

/*飛機 ---------------------------------------------- */
.fly { background-image: url(../images/titleImg1.png); width: 114px; height: 75px;
  position: absolute; right: -200px; top: 150px; animation: flyAni 12s infinite; z-index: 1;
}
@keyframes flyAni{
  50% { transform: translate(-170vw, 30vw); z-index: 1; 
    background-image: url(../images/titleImg1.png); width: 114px; height: 75px; }
  50.1% { z-index: 0; background-image: url(../images/titleImg2.png); width: 98px; height: 116px; }
  100% { z-index: 0; background-image: url(../images/titleImg2.png); width: 98px; height: 116px; }
}

/* 手機版 header & #sec1 區域 ------------------------------------------------- */
@media( max-width: 1000px ){
  header { position: fixed; width: 100%; }
  header .showMenu { display: block; position: absolute; right: 0; top: 0;
    color: #FFF; font-size: 25px; padding: 10px; }
  header>div { padding: 5px; position: relative; z-index: 9;} 
  header #logo { height: 10vh; width: auto; padding-top: 1vh; }

  header nav { position: absolute; z-index: 8; top: 0; width: 100%; height: 100vh; 
    flex-direction: column; justify-content: flex-start; padding: 120px 0; 
    background-size: cover; background: url(../images/mobile_nav_bg.jpg) center bottom;  }
  header nav a { background-image: none; background-color: rgba(255, 255, 255, 0.1);
    display: block; width: 100%; height: auto;
    font-size: 1.5rem; letter-spacing: 2rem; padding: 10px; margin-bottom: 10px; }
  header nav a:hover, header nav a.active { color: yellow; padding-top: 10px; font-size: 20px; 
    font-size: 1.5rem; letter-spacing: 2rem; padding: 10px; margin-bottom: 10px; }
  .fly { width: 20vw; height: 20vw; background-size: contain; background-repeat: no-repeat; }
}

/* #sec2  ========================================================================================== */
.page2Container { max-width: 1400px; margin: 0 auto; display: flex; flex-wrap: wrap; }
.page2Container .block { width: 21%; margin: 2%; padding: 20px; 
  border: 12px solid #999; background: white; transition: all 0.5s; }

.page2Container .block .fa { width: 100px; height: 100px; margin: 0 auto;
  border-radius: 50%; border: 4px solid #999; text-align: center; transition: all 0.5s; 
  display: flex; justify-content: center; align-items: center; }

.page2Container .block h2 { font-size: 20px; text-align: center; padding: 20px 0; }
.page2Container .block p { text-align: justify; }

#sec2 .block:hover { box-shadow: 0 20px 20px rgba(0, 0, 0, 0.7); cursor: pointer;
  background-color: #cfe4f8; border: 12px solid #396487; margin-top: -10px; }

#sec2 .block:hover .fa { background: #4b7fb4; border: 5px solid #1a5584; color: #FFF; }

#sec2 .block.ani { animation: sec2Ani 1s;  opacity: 1; }

@keyframes sec2Ani {
  0% { transform: translateY(200px); opacity: 0; }
}

@media ( max-width:1030px ){ .page2Container .block { width: 46%; margin: 2%; } }
@media ( max-width:700px ){ .page2Container .block { width: 96%; margin: 2%; } }


/* #sec3  ============================================================================================== */
#sec3 { padding: 0; }

/* #sec3 中的第1個section ----------------------------------------------------- */
#quotes {
  background: url(../images/quotes-bg.jpg) 50% 0 repeat-y fixed;
  color: #ffffff; position: relative; padding: 280px 0px; 
}
.parallax-section {
  background-attachment: fixed !important;
  background-size: cover !important;
}

#quotes .container { display: block; text-align: center; max-width: 1200px; margin: 0 auto;
  position: relative; z-index: 2; }
#quotes .overlay {
  background: rgba(0, 0, 0, 0.6); width: 100%; height: 100%; position: absolute; top: 0;
}
#quotes h2 { margin-bottom: 15px; }

/* #sec3 中的第2,3個section裡面的文字區 ---------------------------- */
#sec3 .wowArea { padding: 0; }
#sec3 .wowArea .container { display: flex; flex-wrap: wrap; }
#sec3 .wowArea .container .divBg { width: 50%; min-height: 400px; background-size: cover; }
#sec3 .wowArea .container .divText { width: 50%; padding: 80px 40px; }
#sec3 .wowArea .container .wow { padding-bottom: 30px; }

/* #sec3 中的第2個section ---------------------------- */
#experience .fa { float: left; }
#experience h3 { padding:5px 0 0 60px; }
#experience p { padding:5px 0 0 60px; }

/* #sec3 中的第3個section ---------------------------- */
#education .fa { float: right; }
#education h3 { padding:5px 60px 0 0; }
#education p { padding:5px 60px 0 0; }

@media( max-width: 1030px ){
  #sec3 .wowArea .container .divBg,
  #sec3 .wowArea .container .divText { 
    width: 100%; 
    background-position: center!important;
    background-size: cover!important;
  }
}


/* #sec4  ============================================================================================== */
#sec4 ul {  }
#sec4 ul li { float: left; width: 14.66%; height: auto; margin: 1%; padding: 20px; text-align: center;
  background-color: #d7f4cd; border-radius: 15px; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6); }
#sec4 ul li h2 { margin-bottom: 10px; }
#sec4 ul li img { width: 100%; height: auto; 
  border-radius: 10px; box-shadow: -2px -2px 2px rgba(0, 0, 0, 0.8); }

@media(max-width:1300px){ #sec4 ul li { width:18%; } }
@media(max-width:1000px){ #sec4 ul li { width:21%; margin: 2%; } }
@media(max-width: 700px){ #sec4 ul li { width:29.33%; } }
@media(max-width: 500px){ #sec4 ul li { width:46%; } }
@media(max-width: 400px){ #sec4 ul li { width:94%; } }

@media( max-width: 1030px ){ #sec4 { padding-top: 120px; } }

hr { clear: both; margin-bottom: 50px; }

#sec4 .filter-nav { display: flex; justify-content: center;  }
#sec4 .filter-nav a { color: #006200; display: block; padding: 5px 15px; margin: 0 5px;
  border: 2px solid #009500; border-radius: 20px; transition: all 0.5s; }
#sec4 .filter-nav a:hover { background-color: #006200; color: yellow; box-shadow: 0 0 20px yellow; }

#sec4 .filtr-container {  }
#sec4 .filtr-container .filtr-item { padding: 15px; }
#sec4 .filtr-container .filtr-item img { border-radius: 50%; width:200px; height: auto; }


/* #sec5  ============================================================================================== */      
#sec5 { height: auto; min-height: 100vh; overflow: hidden; }
#sec5 .container { max-width: 1300px; margin: 0 auto; }

#infoArea { float: left; width: 30%; text-align: center; position: relative; z-index: 1; }
#infoArea img { opacity: 0.5; }
#infoArea p { font-family: 'Orbitron', 'cwTeXYen', sans-serif; color: #666;  }
#infoArea iframe { display: block; width: 100%; margin-top: 50px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); }

#sec5 .contact { float: right; width: 60%; /*min-height: 100vh;*/ 
  transform: rotate(-7deg) translate(0,-10vh); padding: 100px 5%; 
  background-color: rgba(255, 255, 255, 0.6); position: relative; }
#sec5 .contact::after {
  content: ''; height: 40px; width: 100%; position: absolute; left: 0; bottom: -36px;
  background-image: url(../images/shadow2.png);
  background-size: contain;
  background-repeat: no-repeat;
}

#sec5 .contact h1 { color: #666; font-size: 40px; }
#sec5 .contact p { padding:20px 0px 10px; font-size: 18px; }

.contact input, .contact textarea { background-color: transparent; border: none; font-size: 18px; 
  padding: 15px; box-shadow: 0 0 3px #ddd; }
.contact input { width: 80%; border-bottom: 1px dotted rgba(0, 0, 0, 0.1); }
.contact textarea { width: 100%; }
.contact input:focus, .contact textarea:focus { box-shadow: 0 0 5px #999; }
.contact input::placeholder, .contact textarea::placeholder { color: #bbb; }
#submitBtn { display: block; width: auto; margin: 0px auto; transition: all 0.5s; }
#submitBtn:hover { background-color: #333; color: #FFF; border-radius: 9px; cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);}

footer { background-color: #272A32; color: #fff; padding: 15px; text-align: center; 
  position: absolute; left: 0; bottom: 0; width: 100%; font-size: 0.8125rem; }

@media( max-width: 1030px ){
  #sec5 { padding-top: 120px; }
  #infoArea, #sec5 .contact { width: 100%; }
}

/* 遮色片及顯示大圖 ======================================================================== */
#maskArea { width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.8); 
  position: fixed; z-index: 10000; left: 0; top: 0; display: none; }
#showPhoto { background-color: #f2baff; width: 60vw; max-width: 1000px; 
  /*height: 60vh;*/ max-height: 90vh; overflow: hidden;
  position: fixed; z-index: 10001; left: 50%; top: 50%; transform: translate(-50%, -50%);
  border-radius: 30px; display: none; padding: 30px; }

#showPhoto img { width: 50%; height: auto; float: left; }
#showPhoto div div { width: 48%; float: right; /*overflow: auto;*/ }
#showPhoto h1 { text-align: center; margin-bottom: 20px; }
#showPhoto p { /*text-align: justify;*/ font-size: 1em; letter-spacing: 0.1em;
  text-indent: -5.5em; padding-left: 5.5em; margin-bottom: 10px; }

#closeBtn { position: absolute; right: 10px; top: 10px; color: #fff; cursor: pointer; }

@media(max-width:1000px){
  #showPhoto { width: 90vw; }
}
@media(max-width:700px){
  #showPhoto { padding: 10px; }
  #showPhoto img { float: none; width: 65%; max-width: 60vw; 
    display: block; margin: 10px auto; }
  #showPhoto div div { float: none; width: 100%; }
  #showPhoto p { font-size: 13px; }
}