h1, h2, h3, h4, h5 {
  font-family: 'PingFangTC-Medium';
  color: #2E3A59;
  margin: 0;
}

p {
  font-family: 'PingFangTC-Regular';
  color: #2E3A59;
  margin: 0;
}


a{text-decoration: none;color:white;}
a:hover, a:visited, a:link, a:active {
  color:white;
}


.box-border {
  position: relative;
  width: 100%;
  padding: 1rem 0 0 0;
  border-bottom: 2px solid #2E3A59;
}

.navbar.navbar-expand-lg.navbar-dark {
  padding: .5rem 6rem .5rem 6rem;
  position: fixed;
  width: 100%;
  background-color:#2E3A59;
  z-index: 99;
}
.navbar-dark .navbar-nav .nav-link {
  padding:0 1rem 0 1rem;
  color: rgb(175 175 175);

}

.navbar-dark .navbar-nav .nav-link.active {
  color: #ffffff;
}

.navbar-dark .navbar-nav .nav-link:hover {
  color: #ffffff;
}

.navbar-dark .navbar-nav .nav-link:focus {
  color: #ffffff;
}

#logo {
  height: 36px;
}


@media (max-width: 768px) { 
  .navbar.navbar-expand-lg.navbar-dark {
    padding: .5rem 1rem .5rem 1rem;
  }
  .navbar-dark .navbar-nav .nav-link {
    padding-top: 14px;
    padding-bottom: 14px;
  }
  #navbarNavAltMarkup {
    min-height: 100vh;
    padding-top: 14px;
  }
  #logo {
    height: 30px;
  }
  .gopage{
    padding: 14px 16px;
  }
}



.welcome-bg {
  background-blend-mode: multiply;
  background-image: url("../image/welcome_pc_img.png");
  /* background-color: rgba(0, 0, 0, 0.5); */
  padding: 30vh 0 20vh 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
}

@media (max-width: 768px) { 
  .welcome-bg {
    padding: 24vh 2vh 20vh 2vh;
    background-image: url("https://landing.potatomedia.co/en/image/welcome_img.png");
  }
}

.welcome-p1 {
  font-size: 20px;
  padding-top: 2rem;
}
.welcome-p2 {
  font-size: 20px;
  padding-top: 4px;
}

.joinnow-btn {
  width: 100px;
  height: 100px;
  background-color: white;
  border-radius: 99px;
  position: sticky;
  left: 90%;
  bottom: 5%;
  margin-bottom: 2rem;
  border-radius: 100px;
  box-shadow: 0 8px 10px 0 rgba(226, 226, 226, 0.5);
}

/* 
.joinnow-title p{
  font-weight: 600;
} */

@media (max-width: 768px) { 
  .joinnow-btn {
    width: 84px;
    height: 84px;
    left: 72%;
    bottom: 5%;
    margin-bottom: 2rem;
  }
}

.join-us {
  background-color: #FFB200;
  width: 300px;
  padding: 14px;
  text-align: center;
  border-radius: 100px;
}

.join-us-p {
  color: white;
  font-weight: 600;
}

.join-us-btn {
  display: flex;
  /* justify-content: center; */
  /* padding: 30vh 0 10vh 0; */
  padding: 3vh 0;
}


@media (max-width: 768px) { 
  .join-us-btn {
    padding: 20vh 0 10vh 0;
    justify-content: center;
  }  
  .join-us{
    width: 400px;
  }
}

@media (max-width: 414px) { 
  .join-us-btn {
    padding: 20vh 0 10vh 0;
    justify-content: center;
  }  
}


/* 我們是誰  */

.our {
  padding: 20vh 0 20vh 0;
}

.our-title {
  text-align:center;
  padding-bottom: .5rem;
}

.second-title {
  text-align:center;
  padding-bottom: 1rem;
}

.our-p {
  text-align: center;
}

/* 我們是誰  */


/* 創作者特質 */

#imgscroll {
  width:360px ; 
  position: fixed; 
  bottom:0; 
  left:-100%; 
  z-index: 90; 
  transition: left .5s;
}


.traits-bg {
  background-blend-mode: multiply;
  background-image: url("../image/traits_img.png");
  background-color: rgba(0, 0, 0, 0);
  padding: 122px 0 128px 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.traits-g {
  flex-wrap: wrap;
  justify-content: space-around;
}

.traits.card {
  max-width: 160px;
  max-height: 160px;
  text-align: center;
  padding:33px 20px 33px 20px;
  margin-top:16px;
  border: none;
  box-shadow: 2px 3px 3px 0 #e9e9e9;
  background-color: white;
}
/* 
.traits-g:nth-of-type(1) {
  margin-bottom: 20px;
} */


.card-title {
  text-align: center;
  margin: .5rem 0 0 0;
}

.card-deck .card {
  margin-right: 0;
  margin-left: 0;
}

.card-box {
  justify-content: space-around;
}

@media (max-width: 768px) { 
  .traits-g {
    padding-left: 0;
    padding-right: 0;
  }
  .traits.card {
    margin-top: 12px;
  }
}

/* 創作者特質 */


/* 創作者收益 */

.income-group {
  display: flex;
  margin: auto;
  flex-wrap: wrap;
  padding-top: 200px;
  /* padding-bottom: 122px; */
}

.income-btn {
  /* width: 200px; */
  padding: 4px 0 ;
  /* border-radius: 20px;
  border: solid 1px #2e3a59; */
}

.income-btn2 {
  width: 128px;
  padding: 4px 0;
  /* border-radius: 20px;
  border: solid 1px #2e3a59; */
}

.income-small-title {
  margin-bottom:24px;
  margin-top: 2px;
}

.income {
  padding-left: 8rem;
  align-self: center;
}

.income-p {
  margin-top: 24px;
  padding-left: 0;
  padding-right: 0;
}

.income-p2 {
  margin-top: 12px;
  padding-left: 0;
  padding-right: 0;
}


@media (max-width: 768px) { 
  .income {
    padding-left: 15px;
    padding-top: 2rem;
    align-self:none;
  }
  .income-group {
    display: flex;
    margin: auto;
    flex-wrap: wrap;
    padding-top: 122px;
    padding-bottom: 122px;
  }
  .income-pic {
    padding-left: 0;
    padding-right: 0;
  }
  .income-pic.creator {
    text-align: center;
  }
}

/* 創作者收益 */


/* 創作者制度 */

.system{
  align-self: center;
}

.system-group {
  display: flex;
  margin: auto;
  flex-wrap: wrap;
  padding-top: 200px;
  /* padding-bottom: 122px; */
}

.system-small-title {
  margin-top: 2px;
  margin-bottom: 24px;
}


.system-p {
  margin-top: 12px;
  padding-left: 0;
  padding-right: 0;
}

.system-pic {
  padding-left: 8rem;
}


@media (max-width: 768px) { 
  .system-group {
    padding-top: 122px;
    padding-bottom: 122px;
    flex-direction: column-reverse;
  }
  .system-pic {
    padding-left: 0;
    padding-right: 0;
  }
  .system {
    padding-top: 32px;
  }
}

/* 創作者制度 */


/* 創作者資源 */

.resource.container {
  padding-top: 122px;
  padding-bottom: 122px;
}

.resource-pic {
  text-align: center;
  padding-top: 65px;
}

@media (max-width: 768px) { 
  .resource-pic {
    width: 90%;
  }
}

/* 創作者資源 */

.welcome-title{
  font-size: 32px;
}
@media (min-width: 768px) { 
  .welcome-title{
    width: 50%;
    font-size: 32px;
  }
}

/* 合作夥伴 */

.body {
  margin: 0;
  padding:10px;
}
.partner-s.container {
  box-sizing:border-box;
  display:flex;
  flex-wrap:wrap;
  /* flex-wrap:nowrap; */
  box-sizing:border-box;
  padding:32px 0 32px 0 ;
  width:100%;
  /* border:1px solid #000; */
  overflow:auto;
  justify-content: space-around;
  overflow: -moz-scrollbars-none; 
  -ms-overflow-style: none;  
}

.partner-s.container:nth-child(odd) {
  padding:65px 0 0 0;
}


.partner-s.container::-webkit-scrollbar {
  width: 0 !important;
}



.partner.container {
  padding:200px 0 200px 0;
}

.partner.card {
  box-sizing:border-box;
  width: 140px;
  height: 196px;
  flex-shrink: 0;
  background:#fff;
  border:none;
}

.partner.card .row{
  margin-left: 0;
  margin-right: 0;
}


.partner.card .pic{
  width: 140px;
}
.partner.card .pic img {
  border-radius: .25rem .25rem 0 0;
  width: 100%;
  border-radius: 50%;
}

.partner.card + .partner.card {
  margin-left:10px;
}

@media (min-width: 768px) { 
  .partner.container.mobile {
    display: none;
  }
}
@media (max-width: 768px) { 
  .partner.container.pc {
    display: none;
  }
  .partner.container.mobile {
    display: block;
  }
  .partner.container {
    padding:122px 0 122px 0;
  }

  .partner-s.container {
    width: 100%;
    padding: 32px 0 ;
    justify-content: center;
  }

  .partner.card{
    width: 74px;
    height: 124px;
  }

  .partner.card p{
    font-size: 14px;
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; 
  }

  .partner.card .pic img {
    border-radius: .25rem .25rem 0 0;
    width: 100%;
    border-radius: 50%;
  }
}

.carousel-indicators{
  position: absolute;
  top: 100%;
}
.carousel-indicators li {
  background-color:#2E3A59;
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  cursor:pointer;
  margin-right: .5rem;
}
.carousel-control-next, .carousel-control-prev {
  width: 15%;
}

@media (min-width: 768px) { 
  #carousel-partner-p{
    display: none;
  } 
  #carousel-partner-n{
    display: none;
  } 
} 



/* 什麼是CFO*/

.cfo.container{
  padding: 200px 0 0 0;
}
.cfo{
  align-self: center;
}

.cfo-group {
  display: flex;
  margin: auto;
  flex-wrap: wrap;
}

.cfo-small-title {
  margin-top: 2px;
  margin-bottom: 24px;
}


.cfo-p {
  margin-top: 12px;
  padding-left: 0;
  padding-right: 0;
}

.cfo-pic {
  padding-left: 6rem;
} 



.cfobig-second-title {
  padding-bottom: 65px;
}


@media (max-width: 768px) { 
  .cfo-group {
    /* padding-top: 122px;
    padding-bottom: 122px;  */
    flex-direction: column-reverse; 
  }
  .cfo-pic {
    padding-left: 0;
    padding-right: 0;
  }
  .cfo-pic img {
    width: 100%;
  }
  .cfo {
    padding-top: 32px;
    padding-left: 15px;
  }
  .cfo.container{
    padding:122px 0;
  }
}

/* 什麼是CFO*/


/* 項目 */

.project.container {
  padding: 200px 0 0 0;
}

.project-second-title {
  padding-bottom: 65px;
}


@media (min-width: 768px) { 
  .cfo-project-m .pic{
    display: none;
  }
  .cfo-project .pic{
    display: block;
  }
} 

@media (max-width: 768px) { 
  .project.container{
    padding: 122px 0;
  }
  .cfo-project-m.container{
    padding: 0;
  }
  .cfo-project .pic{
    display: none;
  }
} 


/* 項目 */




/* 官方創作者 */

.income-creator {
  align-self: center;
  padding-left: 8rem;
}
.income-creator-pic img {
  width: 80%;
}
.income-btn p {
  padding-left: 4px;
} 



@media (max-width: 768px) { 
  .income-creator-pic {
    padding: 0;
  }
  .income-creator-pic img {
    width: 100%;
  }
  .income-creator {
    padding-top: 32px;
    padding-left: 15px;
  }
} 

/* 官方創作者 */



/* 關於團隊 */
.about-team{
  margin: auto;
}

@media (max-width: 768px) { 
  .about-team .about-team-padding{
    padding:0 ;
  }
  .about-team {
    padding:0 ;
  }
}

.about-team {
  justify-content: center;
}



/* 關於團隊 */



.profile-card-4 {
    max-width: 340px;
    background-color: #FFF;
    border-radius: 5px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    position: relative;
    margin: 10px auto;
    cursor: pointer;
    cursor:default ;
}

.profile-card-4 img {
    transition: all 0.25s linear;
}

.profile-card-4 .profile-content {
    position: relative;
    padding: 15px 15px 20px 15px;
    background-color: #FFF;
}

.profile-card-4 .profile-name {
    font-weight: bold;
    position: absolute;
    left: 0px;
    right: 0px;
    top: -80px;
    color: #FFF;
    font-size: 22px;
}

.profile-card-4 .profile-name p {
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 1.5px;
    color: #FFF;
}


.profile-card-4 .profile-description {
    color: #969CAC;
    font-size: 14px;
    padding: 10px 0 0 0;
}

.profile-card-4 .profile-overview {
    padding: 15px 0px;
}

.profile-card-4 .profile-overview p {
    font-size: 10px;
    font-weight: 600;
    color: #969CAC;
}


.profile-card-4 .profile-content::before {
    content: "";
    position: absolute;
    height: 20px;
    top: -10px;
    left: 0px;
    right: 0px;
    background-color: #FFF;
    z-index: 0;
    transform: skewY(3deg);
    cursor:default ;
}

.profile-card-4:hover img {
    transform: rotate(5deg) scale(1.1, 1.1);
    filter: brightness(110%);
    cursor:default ;
}

.profile-content {
  height: 192px;
}

.social {
  font-size:24px;
  color:#a2a8ae;
  text-align: start;
  padding-top: 1rem;
}

.social a {
  color:inherit;
  margin:0 10px;
  display:inline-block;
  opacity:0.7;
}

.social a:hover {
  opacity:1;
}




@media (max-width: 768px) { 
  footer.text-white .footer.text-light{
    font-size: 14px;
  }
  .btn-group-lg>.btn, .btn-lg{
    padding:.5rem .8rem;
  }
}