.page_top{
    height: 82.66px;
    background: #333333;
}
@media (max-width: 768px){
    .page_top{
        height: 80px;
        background: transparent;
    }
}

.nav_container{
  max-width: 1170px;
  margin: auto;
}
.nav-bar {
    border-bottom: 1px solid #8cc63f;
} 
.nav-container {
    display:flex;  
    position:relative;
}
.link {
    position:relative;
    display:flex;
    justify-content: center; 
    align-items: center;  
    flex-direction:column;
    height:70px;
    margin-bottom:-2px;
    margin: 0 20px;
    overflow:hidden;
    cursor: pointer;
    padding-top: 20px;
} 
.active p{
    color: #333333;
}
.active-bar {
    position:absolute;
    height:5px;
    bottom:0;
    background-color: #8cc63f;
    transition: left .25s linear, width .25s linear;
    left:0;
    padding: 0 20px;
    margin: 0 -20px;
}

.cd-fixed-background .cd-content::after {
  /* phone image on small devices */
  content: '';
  display: block;
  width: 100%;
  padding: 60% 0;
  margin: 2em auto 0;
}
.cd-fixed-background {
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

/* .cd-fixed-background.img-1 {
  background-image: url("/image/project/text/img-1.jpg");
}
  
.cd-fixed-background.img-2 {
  background-image: url("/image/project/text/img-2.jpg");
}
  
.cd-fixed-background.img-3 {
  background-image: url("/image/project/text/img-3.jpg");
} */

/* project_detail */
.cd-fixed-background {
  position: relative;
  padding: 3em 5% 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.cd-fixed-background h2, .cd-fixed-background p {
  color: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.cd-fixed-background h2 {
  font-size: 2.4rem;
  margin-bottom: 1em;

}
.cd-fixed-background p {
  line-height: 1.6;
  font-size: 24px;
  font-family: "Merriweather", serif;
}

.cd-fixed-background .cd-content::after {
  /* phone image on small devices */
  content: '';
  display: block;
  width: 100%;
  padding: 60% 0;
  margin: 2em auto 0;
}
/* 手機版 */
@media(max-width:768px){
  .cd-fixed-background.img-1 {
    background-color: #0f1044;
    z-index: -1;
  }
  .cd-fixed-background.img-1 .cd-content::after {
    background: url("/image/project_detail/cca_po-yuan/po-yuan_m1.png") no-repeat;
    background-size: 100% auto;
  }
  .cd-fixed-background.img-2 {
    background-color: #383a63;
    z-index: -1;
  }
  .cd-fixed-background.img-2 .cd-content::after {
    background: url("/image/project_detail/cca_po-yuan/po-yuan_m2.png") no-repeat;
    background-size: 100% auto;
  }
  .cd-fixed-background.img-3 {
    background-color: #006284;
    z-index: -1;
  }
  .cd-fixed-background.img-3 .cd-content::after {
    background: url("/image/project_detail/cca_po-yuan/po-yuan_m3.png") no-repeat;
    background-size: 100% auto;
 
  }
  .cd-fixed-background.img-4 {
    background-color: #255359;
    z-index: -1;
  }
  .cd-fixed-background.img-4 .cd-content::after {
    background: url("/image/project_detail/cca_po-yuan/po-yuan_m4.png") no-repeat;
    background-size: 100% auto;

  }
  .cd-fixed-background.img-5 {
    background-color: #748259;
    z-index: -1;
  }
  .cd-fixed-background.img-5 .cd-content::after {
    background: url("/image/project_detail/cca_po-yuan/po-yuan_m5.png") no-repeat;
    background-size: 100% auto;

  }
}
/* pc版 */
@media (min-width: 768px) {
  .cd-fixed-background {
    height: 100%;
    padding: 0;
    min-height: 800px;
  }
  .cd-fixed-background h2 {
    font-size: 3.6rem;
    font-weight: 300;
  }
  .cd-fixed-background p {
    font-size: 1.8rem;
    line-height: 1.8;
  }
  .cd-fixed-background .cd-content {
    width: 50%;
    position: inherit;
    top: 300px;
    left: 5%;
    bottom: auto;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .cd-fixed-background .cd-content::after {
    display: none !important;
  }
  .cd-fixed-background.img-1 {
    background-image: url("/image/project_detail/cca_po-yuan/po-yuan_pc1.png");
    z-index: -1;
  }
  .cd-fixed-background.img-2 {
    background-image: url("/image/project_detail/cca_po-yuan/po-yuan_pc2.png");
    z-index: -1;
  }
  .cd-fixed-background.img-3 {
    background-image: url("/image/project_detail/cca_po-yuan/po-yuan_pc3.png");
    z-index: -1;
  }
  .cd-fixed-background.img-4 {
    background-image: url("/image/project_detail/cca_po-yuan/po-yuan_pc4.png");
    z-index: -1;
  }
  .cd-fixed-background.img-5 {
    background-image: url("/image/project_detail/cca_po-yuan/po-yuan_pc5.png");
    z-index: -1;
  }
}
@media (min-width: 1048px) {
  .cd-fixed-background {
    background-attachment: fixed;
    min-height: 700px;
  }
  .cd-fixed-background .cd-content {
    width: 40%;
    left: 10%;
  }
}

.cd-vertical-nav {
  position: inherit;
  z-index: 2;
  right: 3%;    
  top: 300px;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  display: none;
}
.cd-vertical-nav a {
  display: block;
  height: 40px;
  width: 40px;
  /* image replace */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: transparent url(../img/cd-icon-arrow.svg) no-repeat center center;
  -webkit-transition: opacity 0.2s 0s, visibility 0.2s 0s;
  -moz-transition: opacity 0.2s 0s, visibility 0.2s 0s;
  transition: opacity 0.2s 0s, visibility 0.2s 0s;
}
.cd-vertical-nav a.cd-prev {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
  margin-bottom: 10px;
}
.cd-vertical-nav a.inactive {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.2s 0s, visibility 0s 0.2s;
  -moz-transition: opacity 0.2s 0s, visibility 0s 0.2s;
  transition: opacity 0.2s 0s, visibility 0s 0.2s;
}
@media (min-width: 1200px) {
  .cd-vertical-nav {
    display: block;
  }
}

.no-js .cd-vertical-nav {
  display: none;
}



/* next_page */
.next_page{
  height: 60px;
  margin: 0 auto;
  background-color: #33333370;
  margin-top: -60px;
  z-index: 99999999;
}
.pagination-wrapper {
  font-size: 0;
  position: absolute;
  margin-top: 30px;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

@keyframes pagination-container--animation-prev {
  0% { transform: translateX(0); }
  100% { transform: translateX(18px); }
}

@keyframes pagination-container--animation-next {
  0% { transform: translateX(0); }
  100% { transform: translateX(-18px); }
}

.transition-prev .pagination-container {
  animation: pagination-container--animation-prev 0.3s forwards;
}

.transition-next .pagination-container {
  animation: pagination-container--animation-next 0.3s forwards;
}

.little-dot {
  width: 6px;
  height: 6px;
  background: #ffffff;
  border-radius: 100%;
  display: inline-block;
  vertical-align: middle;
  margin: 0 6px;
  position: relative;
  z-index: 10;
}

.little-dot--first,
.little-dot--last {
  z-index: 5;
}

@keyframes slideLeft {
  0% {
    transform: translateX(0px);
  }

  100% {
    transform: translateX(-18px);
  }
}

.transition-prev .little-dot--first {
  animation: slideLeft 0.4s 0.3s forwards cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes little-dot--first--animation {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.transition-next .little-dot--first {
  animation: little-dot--last--animation 0.3s forwards;
}


@keyframes little-dot--last--animation {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.transition-prev .little-dot--last {
  animation: little-dot--last--animation 0.3s forwards;
}

@keyframes slideRight {
  0% {
    transform: translateX(0px);
    opacity: 1;
  }

  100% {
    transform: translateX(18px);
    opacity: 1;
  }
}

.transition-next .little-dot--last {
  animation: slideRight 0.4s 0.3s forwards cubic-bezier(0.165, 0.84, 0.44, 1);
}

.big-dot {
  width: 12px;
  height: 12px;
  border-radius: 100%;
  background: #ff8f12;
  position: absolute;
  top: 50%;
  right: -6px;
  transform: translateY(-50%);
}

.transition-next .big-dot {
  right: auto;
  left: -6px;
}

.big-dot-container {
  width: 18px;
  height: 18px;
  border-radius: 100%;
  position: absolute;
  top: 50%;
  right: 3px;
  transform: translateY(-50%);
  z-index: 10;
}

.transition-next .big-dot-container {
  right: auto;
  left: 3px;
}

@keyframes big-dot-container--animation-prev {
  0% { transform: translateY(-50%); }
  100% { transform: translateY(-50%) rotate(-179deg); }
}

@keyframes big-dot-container--animation-next {
  0% { transform: translateY(-50%); }
  100% { transform: translateY(-50%) rotate(-181deg); }
}

.transition-prev .big-dot-container {
  animation: big-dot-container--animation-prev 0.3s forwards;
}

.transition-next .big-dot-container {
  animation: big-dot-container--animation-next 0.3s forwards;
}

.btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  fill: #ffffff;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn:hover {
  opacity: 0.6;
}

.btn--next {
  left: calc(100% + 20px);  
}

.btn--prev {
  right: calc(100% + 20px);
}