/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  /*background: transparent;*/ /**2018-03-31編輯**/
  border: 0;
  margin: 0;
  padding: 0;
  vertical-align: baseline; }

body {
  line-height: 1; }

/*h1, h2, h3, h4, h5, h6 {
  clear: both;
  font-weight: normal; }*/ /**2018-01-09編輯**/

ol, ul {
  list-style: none; }

blockquote {
  quotes: none; }

blockquote:before, blockquote:after {
  content: '';
  content: none; }

del {
  text-decoration: line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0; }

a img {
  border: none; }

/* =Scss Variables
-------------------------------------------------------------- */
/* =Global
-------------------------------------------------------------- */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

/**2017-10-23編輯**/
/*body {
  background-color: #3cb5f9;
  color: #505050;
  font-family: "Ubuntu", sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8; 
}*/

/* Headings */
/*h1, h2, h3, h4, h5, h6 {
  line-height: 1;
  font-weight: 300; }*/ /**2018-01-09編輯**/

/**2018-01-09編輯**/
/*.h1, h1 {
    font-size: 12px !important;
}*/

/*a {
  text-decoration: none;
  color: #3cb5f9; }

a:hover {
  color: #0793e2; }*/ /**2017-11-30編輯**/

/* =Template
-------------------------------------------------------------- */
#wrapper {
  width: 100%;
  margin: 0 auto; }

#main {
  background-color: #fff;
  padding-top: 150px; }

.container {
  width: 70% !important; /**2017-12-20編輯**/
  margin: 0 auto;
  position: relative; /**2017-12-20編輯**/
}

section {
  padding: 60px 0; }
  section h1 {
    font-weight: 700;
    margin-bottom: 10px; }
  section p {
    margin-bottom: 30px; }
    section p:last-child {
      margin-bottom: 0; }
  section.color {
    background-color: #3cb5f9;
    color: white; }

/* =Info Bar
-------------------------------------------------------------- */
#info-bar {
  background-color: #3cb5f9; }
  #info-bar a {
    color: white;
    font-size: 14px;
    text-transform: uppercase;
    display: inline-block;
    margin: 0;
    padding: 10px; }
    #info-bar a:hover {
      background-color: #0793e2; }
  #info-bar span.all-tutorials,
  #info-bar span.back-to-tutorial {
    display: block;
    width: 50%; }
  #info-bar span.all-tutorials {
    float: left;
    text-align: left; }
  #info-bar span.back-to-tutorial {
    float: right;
    text-align: right; }

/* =Header
-------------------------------------------------------------- */
header {
  width: 100%;
  height: 145px; /**2018-04-17編輯**/
  /*overflow: hidden;*/ /**2017-12-20編輯**/
  position: fixed;
  top: 0;
  left: 0;
  z-index: 990; /**2018-05-05編輯**/
  
  /**2018-04-17編輯**/
  -moz-box-shadow: 0 0 12px -2px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 0 12px -2px rgba(0,0,0,0.5);
  box-shadow: 0 0 12px -2px rgba(0,0,0,0.5);
  
  /**2018-01-08編輯**/
  width: 100%;
  background-color: #ffffff;
  
  /**2018-03-31編輯**/
  text-align: center;


  -webkit-transition: height 0.3s;
  -moz-transition: height 0.3s;
  -ms-transition: height 0.3s;
  -o-transition: height 0.3s;
  transition: height 0.3s; }
  header h1#logo {
    display: inline-block;
    height: 100px; /**2018-04-17編輯**/
    line-height: 115px; /**2017-10-26編輯**/
    float: left; /**2018-04-17編輯**/
    /*font-family: "Oswald", sans-serif;*/ /**2017-10-23編輯**/
    /*font-size: 60px;*/ /**2017-12-20編輯**/
    padding: 1.2em 0; /**2018-04-17編輯**/

    color: white;
    font-weight: 400;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s; 
  }


  /**主選單設定**/
  header .lead-menu{
      padding: 2.4em 0;
      text-align: right;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s; 
  }

  header .lead-menu ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      display: inline-block;
  }

  header .lead-menu ul li {
      display: inline-block;
      text-align: center;
  }

  header .lead-menu ul li a {
      font-family: Heiti TC, 'Noto Sans TC', "メイリオ", Microsoft JhengHei, Helvetica, Arial, sans-serif;
      display: block;
      font-size: 18px;
      font-weight: 500; /**2018-04-17編輯**/
      letter-spacing: 1px;
      line-height: 2;
      color: #000000;
      padding: 0 0.5em;
      text-decoration: none;
  }

  header .lead-menu ul li a span{
      display: block;
      font-size: 12px;
      font-weight: 400; /**2018-02-07編輯**/
      /*color: #727272;*/
  }

  header .lead-menu ul li a span:after{
      content:"";
      display: block;
      width: 100%;
      height: 2px;
      background-color: transparent;
  }

  header .lead-menu ul li a:hover{
      color: #006934;
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
  }

  header .lead-menu ul li a span:hover{
      color: #006934;
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
  }

  header .lead-menu ul li a:hover span:after{
      background-color: #006934;
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
  }

  



  header nav {
    display: inline-block;
    float: right; 
  }
  header nav a {
    line-height: 150px;
    margin-left: 20px;
    color: #9fdbfc;
    font-weight: 700;
    font-size: 18px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s; 
  }
  header nav a:hover {
    color: white; 
  }



  header.smaller {
    height: 110px; /**2018-04-02編輯**/
    text-align: unset;
    background-color: rgba(255,255,255,.9);
  }
  
    header.smaller h1#logo {
      width: 200px; /**2018-04-02編輯**/
      height: 80px; /**2018-04-02編輯**/
      line-height: 60px; /**2017-10-26編輯**/
      font-size: 30px; 
      padding: 0.8em 0; /**2018-04-17編輯**/
    }
    header.smaller nav{
      /*line-height: 50px;*/ /**2017-11-23編輯**/
      padding: 0; /**2017-11-23編輯**/
    }

    header.smaller .page-head-set{
      top: 0;
    }
    
    /**2017-12-25編輯**/
    /*header.smaller .page-head-set ul {
      height: 30px;
    }*/

    header.smaller .lead-menu{
      padding: 1em 0;
    }

  
    
    header.smaller .lead-menu ul li a {
      font-size: 16px;
    }

    


/* =Footer
-------------------------------------------------------------- */
/* =Extras
-------------------------------------------------------------- */
.clearfix:after {
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0; }

/* =Media Queries
-------------------------------------------------------------- */
@media (max-width: 1500px){
  
  header nav a {
    line-height: 75px; }

  
  header.smaller {
    height: 110px; /**2018-04-02編輯**/
  }
}


@media (max-width: 1164px) {
    header .lead-menu ul li a {
        padding: 0 0.3em;
    }
}




@media (max-width: 1024px){
  header{
    height: 110px;
  }
  
  header .page-head-set {
    display: none;
  }
  header .lead-menu {
    display: none;
  }
  header.smaller .lead-menu {
    display: none;
  }
  
  header h1#logo {
    width: 250px;
    height: 75px;
    line-height: 60px;
    font-size: 30px; 
    padding: 1em 0;
    margin: 0 auto !important;
    display: block;
  }

  header .head-bottom-mask {
    display: none;
  }


  header.smaller h1#logo {
    line-height: 60px;
    padding: 1em 0;
  }
  header nav {
    text-align: left;
  }
}





@media all and (max-width: 660px) {
  /* =Header
  -------------------------------------------------------------- */
  header h1#logo {
    display: block;
    float: none;
    margin: 0 auto !important; /**2018-02-09編輯**/
    width: auto; /**2017-12-20編輯**/
    height: 100px;
    line-height: 60px; /**2017-10-26編輯**/
    text-align: center; /**2018-02-08編輯**/
  }
  header nav {
    display: block; /**2017-12-21編輯**/
    float: none;
    height: 50px;
    margin: 0 auto; }
    header nav a {
      line-height: 50px;
      margin: 0 10px; }
  header.smaller {
    height: 75px; }
    header.smaller h1#logo {
      height: 40px;
      line-height: 60px; /**2017-10-26編輯**/
      font-size: 30px;
      padding: 0.5em 0; /**2018-04-20編輯**/
    }
    header.smaller nav {
      height: 35px; }
      header.smaller nav a {
        line-height: 35px; } }
@media all and (max-width: 600px) {
  .container {
    width: 100%; }

  #info-bar a {
    display: block; }
  #info-bar span.all-tutorials,
  #info-bar span.back-to-tutorial {
    width: 100%; }
  #info-bar span.all-tutorials,
  #info-bar span.back-to-tutorial {
    float: none;
    text-align: center; }
  #info-bar span.all-tutorials {
    border-bottom: solid 1px #0793e2; } }