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



Primary style



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

*, *::after, *::before {

  box-sizing: border-box;

}



html {

  font-size: 62.5%;

}



body {

  font-size: 1.6rem;

  font-family: Heiti TC, 'Noto Sans TC', "メイリオ", Microsoft JhengHei, Helvetica, Arial, sans-serif ; /*2016-12-16編輯*/

  color: #ffffff;

  /*background-color: #a0f6aa;*/ /*2016-12-16編輯*/

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}



/*a {

  color: #a0f6aa;

  text-decoration: none;

}*/



h1 {

  text-align: center;

  width: 90%;

  margin: 2em auto 0;

  font-size: 2.4rem;

  color: #507b55;

  font-weight: bold;

}

@media only screen and (min-width: 600px) {

  h1 {

    font-size: 3.2rem;

  }

}



input {

  font-family: Heiti TC, 'Noto Sans TC', "メイリオ", Microsoft JhengHei, Helvetica, Arial, sans-serif ; /*2016-12-16編輯*/

  font-size: 1.6rem;

}



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



Main Components 



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

.cd-accordion-menu {

  width: 90%;

  /*max-width: 600px;*/ /*2016-12-21編輯*/

  /*background: #4d5158;*/ /*2016-12-16編輯*/

  /*margin: 4em auto;*/ /*2016-12-20編輯*/

  /*box-shadow: 0 4px 40px #70ac76;*/  /*2016-12-16編輯*/

}

.cd-accordion-menu ul {

  /* by default hide all sub menus */

  display: none;  /*2016-12-21編輯*/

}

.cd-accordion-menu li {

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

}

.cd-accordion-menu input[type=checkbox] {

  /* hide native checkbox */

  position: absolute;

  opacity: 0;

}

.cd-accordion-menu label{

  font-family: Heiti TC, 'Noto Sans TC', "メイリオ", Microsoft JhengHei, Helvetica, Arial, sans-serif ; /*2016-12-16編輯*/

  position: relative;

  display: block;

  padding: 10px 18px 10px 10px; /*2016-12-16編輯*/

  background: #ffffff; /*2016-12-16編輯*/

  /*box-shadow: inset 0 -1px #878787;*/ /*2016-12-16編輯*/

  color: #303030; /*2016-12-16編輯*/

  font-size: 1.6rem; /*2016-12-16編輯*/

  text-align: left; /*2016-12-16編輯*/

  letter-spacing: 1px; /*2016-12-16編輯*/

  

}



.cd-accordion-menu a {

  font-family: Heiti TC, 'Noto Sans TC', "メイリオ", Microsoft JhengHei, Helvetica, Arial, sans-serif ; /*2016-12-16編輯*/

  position: relative;

  display: block;

  padding: 10px 18px 10px 10px; /*2016-12-16編輯*/

  background: #ffffff; /*2016-12-16編輯*/

  /*box-shadow: inset 0 -1px #878787;*/ /*2016-12-16編輯*/

  color: #7ea4af; /*2017-05-08編輯*/

  font-size: 1.6rem; /*2016-12-16編輯*/

  text-align: left; /*2016-12-16編輯*/

  letter-spacing: 1px; /*2016-12-16編輯*/

}





.no-touch .cd-accordion-menu label:hover, .no-touch .cd-accordion-menu a:hover {

  background: #7ea4af; /*2016-12-16編輯*/

  color: #ffffff; /*2016-12-16編輯*/

  border-radius:8px; /*2016-12-16編輯*/

  /*2016-12-16編輯*/

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

}



.cd-accordion-menu label::before, .cd-accordion-menu label::after, .cd-accordion-menu a::after {

  /* icons */

  content: '';

  display: inline-block;

  width: 16px;

  height: 16px;

  position: absolute;

  top: 50%;

  -webkit-transform: translateY(-50%);

  -moz-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  -o-transform: translateY(-50%);

  transform: translateY(-50%);

}

.cd-accordion-menu label {

  cursor: pointer;

}

.cd-accordion-menu label::before, .cd-accordion-menu label::after {

  background-image: url(../img/cd-icons.svg);

  background-repeat: no-repeat;

}

.cd-accordion-menu label::before {

  /* arrow icon */

  left: 18px;

  background-position: 0 0;

  -webkit-transform: translateY(-50%) rotate(-90deg);

  -moz-transform: translateY(-50%) rotate(-90deg);

  -ms-transform: translateY(-50%) rotate(-90deg);

  -o-transform: translateY(-50%) rotate(-90deg);

  transform: translateY(-50%) rotate(-90deg);

}

.cd-accordion-menu label::after {

  /* folder icons */

  left: 41px;

  background-position: -16px 0;

}

.cd-accordion-menu a::after {

  /* image icon */

  left: 36px;

  background: url(../img/cd-icons.svg) no-repeat -48px 0;

}

.cd-accordion-menu input[type=checkbox]:checked + label::before {

  /* rotate arrow */

  -webkit-transform: translateY(-50%);

  -moz-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  -o-transform: translateY(-50%);

  transform: translateY(-50%);

}

.cd-accordion-menu input[type=checkbox]:checked + label::after {

  /* show open folder icon if item is checked */

  background-position: -32px 0;

}

.cd-accordion-menu input[type=checkbox]:checked + label + ul,

.cd-accordion-menu input[type=checkbox]:checked + label:nth-of-type(n) + ul {

  /* use label:nth-of-type(n) to fix a bug on safari (<= 8.0.8) with multiple adjacent-sibling selectors*/

  /* show children when item is checked */

  display: block;

}

.cd-accordion-menu ul label,

.cd-accordion-menu ul a {

  background: #ffffff; /*2016-12-16編輯*/

  /*box-shadow: inset 0 -1px #41444a;*/ /*2016-12-16編輯*/

  padding-left: 30px; /*2016-12-16編輯*/

}

.no-touch .cd-accordion-menu ul label:hover, .no-touch

.cd-accordion-menu ul a:hover {

  background: #7ea4af; /*2016-12-16編輯*/

}

.cd-accordion-menu > li:last-of-type > label,

.cd-accordion-menu > li:last-of-type > a,

.cd-accordion-menu > li > ul > li:last-of-type label,

.cd-accordion-menu > li > ul > li:last-of-type a {

  /*box-shadow: none;*/ /*2016-12-21編輯*/

}

.cd-accordion-menu ul label::before {

  left: 36px;

}

.cd-accordion-menu ul label::after,

.cd-accordion-menu ul a::after {

  left: 59px;

}

.cd-accordion-menu ul ul label,

.cd-accordion-menu ul ul a {

  padding-left: 100px;

}

.cd-accordion-menu ul ul label::before {

  left: 54px;

}

.cd-accordion-menu ul ul label::after,

.cd-accordion-menu ul ul a::after {

  left: 77px;

}

.cd-accordion-menu ul ul ul label,

.cd-accordion-menu ul ul ul a {

  padding-left: 118px;

}

.cd-accordion-menu ul ul ul label::before {

  left: 72px;

}

.cd-accordion-menu ul ul ul label::after,

.cd-accordion-menu ul ul ul a::after {

  left: 95px;

}

@media only screen and (min-width: 600px) {

  .cd-accordion-menu label, .cd-accordion-menu a {

    /*padding: 24px 24px 24px 82px;*/ /*2016-12-16編輯*/

    font-size: 1.6rem; /*2016-12-16編輯*/

  }

  .cd-accordion-menu label::before {

    left: 24px;

  }

  .cd-accordion-menu label::after {

    left: 53px;

  }

  .cd-accordion-menu ul label,

  .cd-accordion-menu ul a {

    /*padding-left: 106px;*/ /*2016-12-16編輯*/

  }

  .cd-accordion-menu ul label::before {

    left: 48px;

  }

  .cd-accordion-menu ul label::after,

  .cd-accordion-menu ul a::after {

    left: 77px;

  }

  .cd-accordion-menu ul ul label,

  .cd-accordion-menu ul ul a {

    padding-left: 130px;

  }

  .cd-accordion-menu ul ul label::before {

    left: 72px;

  }

  .cd-accordion-menu ul ul label::after,

  .cd-accordion-menu ul ul a::after {

    left: 101px;

  }

  .cd-accordion-menu ul ul ul label,

  .cd-accordion-menu ul ul ul a {

    padding-left: 154px;

  }

  .cd-accordion-menu ul ul ul label::before {

    left: 96px;

  }

  .cd-accordion-menu ul ul ul label::after,

  .cd-accordion-menu ul ul ul a::after {

    left: 125px;

  }

}

.cd-accordion-menu.animated label::before {

  /* this class is used if you're using jquery to animate the accordion */

  -webkit-transition: -webkit-transform 0.3s;

  -moz-transition: -moz-transform 0.3s;

  transition: transform 0.3s;

}