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

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}



html {

  font-size: 62.5%;

}



html * {

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}



body {

  font-size: 1.6rem;

  font-family: "PT Sans", sans-serif;

  color: #2E4057;

  background-color: #ffffff;

}



a {

  color: #2E4057;

  text-decoration: none;

}



section {

  /* used just to separate paginations */

  border-bottom: 1px solid #e6e6e6;

}

section h2 {

  width: 90%;

  margin: 2em auto 0;

  color: #7d98ba;

  font-weight: 700;

  text-align: center;

}

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

  section h2 {

    margin: 4em auto 0;

  }

}



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



Basic style



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

nav[role="navigation"] {

  text-align: center;

}



.cd-pagination {

  width: 90%;

  max-width: 768px;

  margin: 2em auto 4em;

  text-align: center;

}

.cd-pagination li {

  /* hide numbers on small devices */

  display: inline-block; /*2017-08-14編輯*/

  margin: 0 .2em;

}

.cd-pagination li.button {

  /* make sure prev next buttons are visible */

  display: inline-block;

}

.cd-pagination a, .cd-pagination span {

  display: inline-block;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

  /* use padding and font-size to change buttons size */

  padding: .4em .8em; /*2017-05-26編輯*/

  font-size: 1.6rem;

}

.cd-pagination a {

  border: 1px solid #c9caca;/*2017-03-17編輯*/

  background-color:#c9caca;/*2017-03-17編輯*/

  -webkit-border-radius: 50px !important; /*2017-03-17編輯*/

  -moz-border-radius: 50px!important; /*2017-03-17編輯*/

  border-radius:50px!important; /*2017-03-17編輯*/

  color: #ffffff; /*2017-03-17編輯*/

}

.no-touch .cd-pagination a:hover {

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

  border: 1px solid #7ea4af; /*2017-05-26編輯*/

  -webkit-border-radius: 50px !important; /*2017-03-17編輯*/

  -moz-border-radius: 50px!important; /*2017-03-17編輯*/

  border-radius:50px!important; /*2017-03-17編輯*/

  -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-pagination a:active {

  /* click effect */

  -webkit-transform: scale(0.9);

  -moz-transform: scale(0.9);

  -ms-transform: scale(0.9);

  -o-transform: scale(0.9);

  transform: scale(0.9);

}

.cd-pagination a.disabled {

  /* button disabled */

  color: rgba(255, 255, 255, 0.9); /*2017-03-17編輯*/

  pointer-events: none;

}

.cd-pagination a.disabled::before, .cd-pagination a.disabled::after {

  opacity: .4;

}

.cd-pagination .button:first-of-type a::before {

  content: '\00ab  ';

}

.cd-pagination .button:last-of-type a::after {

  content: ' \00bb';

}

.cd-pagination .current {

  /* selected number */

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

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

  color: #ffffff;

  pointer-events: none;

}

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

  .cd-pagination li {

    display: inline-block;

  }

}

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

  .cd-pagination {

    margin: 4em auto 8em;

  }

}



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



No space - remove distance between list items



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

.cd-pagination.no-space {

  width: auto;

  max-width: none;

  display: inline-block;

  border-radius: 0.25em;

  border: 1px solid #e6e6e6;

}

.cd-pagination.no-space:after {

  content: "";

  display: table;

  clear: both;

}

.cd-pagination.no-space li {

  margin: 0;

  float: left;

  border-right: 1px solid #e6e6e6;

}

.cd-pagination.no-space li:last-of-type {

  border-right: none;

}

.cd-pagination.no-space a, .cd-pagination.no-space span {

  float: left;

  border-radius: 0;

  padding: .8em 1em;

  border: none;

}

.cd-pagination.no-space li:first-of-type a {

  border-radius: 0.25em 0 0 0.25em;

}

.cd-pagination.no-space li:last-of-type a {

  border-radius: 0 0.25em 0.25em 0;

}



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



move buttons - move prev and next buttons to the sides



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

.cd-pagination.move-buttons:after {

  content: "";

  display: table;

  clear: both;

}

.cd-pagination.move-buttons .button:first-of-type {

  float: left;

}

.cd-pagination.move-buttons .button:last-of-type {

  float: right;

}



.cd-pagination.no-space.move-buttons {

  width: 90%;

  max-width: 768px;

  display: block;

  overflow: hidden;

}

.cd-pagination.no-space.move-buttons li {

  float: none;

  border: none;

}

.cd-pagination.no-space.move-buttons a, .cd-pagination.no-space.move-buttons span {

  float: none;

}



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



custom icons - customize the small arrow inside the next and prev buttons 



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

.cd-pagination.custom-icons .button a {

  position: relative;

}

.cd-pagination.custom-icons .button:first-of-type a {

  padding-left: 2.4em;

}

.cd-pagination.custom-icons .button:last-of-type a {

  padding-right: 2.4em;

}

.cd-pagination.custom-icons .button:first-of-type a::before,

.cd-pagination.custom-icons .button:last-of-type a::after {

  content: '';

  position: absolute;

  display: inline-block;

  /* set size for custom icons */

  width: 16px;

  height: 16px;

  top: 50%;

  /* set margin-top = icon height/2 */

  margin-top: -8px;

  background: transparent url("../img/cd-icon-arrow-1.svg") no-repeat center center;

}

.cd-pagination.custom-icons .button:first-of-type a::before {

  left: .8em;

}

.cd-pagination.custom-icons .button:last-of-type a::after {

  right: .8em;

  -webkit-transform: rotate(180deg);

  -moz-transform: rotate(180deg);

  -ms-transform: rotate(180deg);

  -o-transform: rotate(180deg);

  transform: rotate(180deg);

}



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



custom buttons - replace prev and next buttons text with a custom icon 



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

.cd-pagination.custom-buttons a, .cd-pagination.custom-buttons span {

  vertical-align: middle;

}

.cd-pagination.custom-buttons .button a {

  /* set custom width */

  width: 40px;

  /* image replacement */

  overflow: hidden;

  white-space: nowrap;

  text-indent: 100%;

  color: transparent;

  background-image: url("../img/cd-icon-arrow-2.svg");

  background-repeat: no-repeat;

  background-position: center center;

}

.cd-pagination.custom-buttons .button:last-of-type a {

  -webkit-transform: rotate(180deg);

  -moz-transform: rotate(180deg);

  -ms-transform: rotate(180deg);

  -o-transform: rotate(180deg);

  transform: rotate(180deg);

}

.no-touch .cd-pagination.custom-buttons .button:last-of-type a:active {

  -webkit-transform: scale(0.9) rotate(180deg);

  -moz-transform: scale(0.9) rotate(180deg);

  -ms-transform: scale(0.9) rotate(180deg);

  -o-transform: scale(0.9) rotate(180deg);

  transform: scale(0.9) rotate(180deg);

}



.cd-pagination.no-space.custom-buttons .button:last-of-type a {

  border-radius: 0.25em 0 0 0.25em;

}



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



animated buttons - animate the text inside prev and next buttons 



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

.cd-pagination.animated-buttons a, .cd-pagination.animated-buttons span {

  padding: 0 1.4em;

  height: 50px;

  line-height: 50px;

  overflow: hidden;

}

.cd-pagination.animated-buttons .button a {

  position: relative;

  padding: 0 2em;

}

.cd-pagination.animated-buttons .button:first-of-type a::before,

.cd-pagination.animated-buttons .button:last-of-type a::after {

  left: 50%;

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

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

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

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

  transform: translateX(-50%);

  right: auto;

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

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

  transition: transform 0.3s;

}

.cd-pagination.animated-buttons .button:last-of-type a::after {

  -webkit-transform: translateX(-50%) rotate(180deg);

  -moz-transform: translateX(-50%) rotate(180deg);

  -ms-transform: translateX(-50%) rotate(180deg);

  -o-transform: translateX(-50%) rotate(180deg);

  transform: translateX(-50%) rotate(180deg);

}

.cd-pagination.animated-buttons i {

  display: block;

  height: 100%;

  -webkit-transform: translateY(100%);

  -moz-transform: translateY(100%);

  -ms-transform: translateY(100%);

  -o-transform: translateY(100%);

  transform: translateY(100%);

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

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

  transition: transform 0.3s;

}



.no-touch .cd-pagination.animated-buttons .button a:hover i {

  -webkit-transform: translateY(0);

  -moz-transform: translateY(0);

  -ms-transform: translateY(0);

  -o-transform: translateY(0);

  transform: translateY(0);

}



.no-touch .cd-pagination.animated-buttons .button:first-of-type a:hover::before {

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

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

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

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

  transform: translateX(-50%) translateY(-50px);

}



.no-touch .cd-pagination.animated-buttons .button:last-of-type a:hover::after {

  -webkit-transform: translateX(-50%) rotate(180deg) translateY(50px);

  -moz-transform: translateX(-50%) rotate(180deg) translateY(50px);

  -ms-transform: translateX(-50%) rotate(180deg) translateY(50px);

  -o-transform: translateX(-50%) rotate(180deg) translateY(50px);

  transform: translateX(-50%) rotate(180deg) translateY(50px);

}