/* =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;

  border: 0;

  margin: 0;

  padding: 0;

  vertical-align: baseline; }



body {

  line-height: 1; }



h1, h2, h3, h4, h5, h6 {

  clear: both;

  font-weight: normal; }



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; }



/*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: 80% !important; /**2017-11-24編輯**/

  margin: 0 auto;

  padding: 0 30px; }



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: 150px;

  overflow: visible; /**2017-12-15編輯**/

  position: fixed;

  top: 0;

  left: 0;

  z-index: 999;

  border-bottom: #FF9E1D 1px solid; /**2017-10-23編輯**/

  /*background-color: #0683c9;*/ /**2017-10-23編輯**/



  background: url(../../images/en/headerbg.jpg) top center no-repeat;



  -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: 150px;

    line-height: 115px; /**2017-10-26編輯**/

    float: left;

    /*font-family: "Oswald", sans-serif;*/ /**2017-10-23編輯**/

    font-size: 60px;

    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 nav {

    /*display: inline-block;*/

    float: right;



    padding: 4em 0;



    -webkit-transition:all 0.4s ease;

    -moz-transition:all 0.4s ease;

    -o-transition:all 0.4s ease;

    transition:all 0.4s ease;

  

  }



  header nav .test {

    display: inline-block;

    

    background-color: transparent;

    -ms-transform: skewX(-45deg); /* IE 9 */

    -webkit-transform: skewX(-45deg); /* Safari */

    transform: skewX(-45deg); /* Standard syntax */



    border-right: #858585 1px solid;



  }



  header nav .test:last-child {

    border-right: none;



  }





    /**2017-11-23編輯**/

    header nav .test > div {

      margin: 0;

      padding: 0.5em 1em;

      color: #ffffff;

      font-weight: 400;

      font-size: 17px;

      vertical-align: middle;



      -ms-transform: skewX(45deg); /* IE 9 */

      -webkit-transform: skewX(45deg); /* Safari */

      transform: skewX(45deg); /* Standard syntax */

    }



      /**2017-11-23編輯**/

      header nav .test:hover {

        color: #ffffff;



        background: rgba(253,120,4,1);

        background: -moz-linear-gradient(left, rgba(253,120,4,1) 0%, rgba(238,188,22,1) 100%);

        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(253,120,4,1)), color-stop(100%, rgba(238,188,22,1)));

        background: -webkit-linear-gradient(left, rgba(253,120,4,1) 0%, rgba(238,188,22,1) 100%);

        background: -o-linear-gradient(left, rgba(253,120,4,1) 0%, rgba(238,188,22,1) 100%);

        background: -ms-linear-gradient(left, rgba(253,120,4,1) 0%, rgba(238,188,22,1) 100%);

        background: linear-gradient(to right, rgba(253,120,4,1) 0%, rgba(238,188,22,1) 100%);

        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fd7804', endColorstr='#eebc16', GradientType=1 );





        -webkit-transition:all 0.4s ease;

        -moz-transition:all 0.4s ease;

        -o-transition:all 0.4s ease;

        transition:all 0.4s ease;

      }









  header.smaller {

    height: 75px;

    background: #000000; /**2017-10-23編輯**/

    /*border-bottom: none;*/ /**2017-10-23編輯**/

  }

    header.smaller h1#logo {

      width: 250px; /**2017-12-14編輯**/

      height: 75px;

      line-height: 60px; /**2017-10-26編輯**/

      font-size: 30px; 

      padding: 0.2em 0; /**2017-10-26編輯**/

    }

    header.smaller nav{

      /*line-height: 50px;*/ /**2017-11-24編輯**/

      padding: 1.5em 0; /**2017-11-24編輯**/

    }



/* =Footer

-------------------------------------------------------------- */

/* =Extras

-------------------------------------------------------------- */

.clearfix:after {

  visibility: hidden;

  display: block;

  content: "";

  clear: both;

  height: 0; }



/* =Media Queries

-------------------------------------------------------------- */

@media (max-width: 1500px){

  header nav {

    display: none;

  }

  header{

    height: 75px;

    background-color: #000000; /**2017-10-23編輯**/

    /*border-bottom: none;*/ /**2017-10-23編輯**/

  }

  header h1#logo {

    width: 250px; /**2017-12-14編輯**/

    height: 75px;

    line-height: 60px;  /**2017-10-26編輯**/

    font-size: 30px;

    padding: 0.2em 0; /**2017-10-26編輯**/

  }

  header nav a {

    line-height: 75px; }



  header.smaller h1#logo {

    line-height: 60px; /**2017-10-26編輯**/

}

}









@media all and (max-width: 660px) {

  /* =Header

  -------------------------------------------------------------- */

  header h1#logo {

    display: block;

    float: none;

    margin: 0 auto;

    height: 100px;

    line-height: 60px; /**2017-10-26編輯**/

    text-align: center; }

  header nav {

    /*display: block;*/ /**2017-10-24編輯**/

    float: none;

    height: 50px;

    text-align: center;

    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; }

    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; } }

@media(max-width:400px){
header .container {
    padding-right: 15px;
    padding-left: 0px;
    margin-right: auto;
    margin-left: 5px;
}
}