body{
    font-family: 'Noto Sans TC', sans-serif;
}
.about_body{
    background:#e7ebec
    url(../images/bar/texture-white.png);  
  }
.max-width{
    max-width: 1280px;
}
.about_bread{
    line-height: 18px;
    position: fixed;
    /* z-index: 200; */
    width: 100%;
    top: 80px;
    background: #000;
    color: #fff;
    font-size: 12px;
    padding: 7px;
}
.about_bread_text{
    margin: 0 auto;
}
.about_bread_text a{
    font-size: 12px;
    color: #fff;
    text-decoration: none;
    margin-left:10px;
}
.about_content{
    margin: 0 auto;
    opacity: 0;
    animation-name:about_content;
    animation-duration:2s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
 }
 @keyframes about_content{
    0%{
  opacity: 0%;
  transform:translateY(-20px);
    }
    100%{
      opacity: 100%;
      transform:translateY(0px);
    }
  }
 .about_content h1{
     margin: 10px;
     color: #fff;
     font-size:80px;
     font-family: 'Libre Baskerville', serif;
 }
 .about_content h2{
     margin: 10px;
     color: #fff;
     font-size: 20px;
     position: relative;
 }
 .about_content h2::after{
     content: "";
 position: absolute;
 top: 30px;
 left: 0;
 border-bottom: 1px solid #fff;
 width:0px;
 margin: 0 auto;
 opacity: 0;
 animation-name:about_content_line;
 animation-duration:2s;
 animation-delay: 1.5s;
 animation-fill-mode: forwards;
 }
 .about_content h2::before{
     content: "";
     position: absolute;
     top: 33px;
     left: 0;
     border-top:1px solid #fff ;
     width:0px;
     margin: 0 auto;
     opacity: 0;
     animation-name:about_content_line;
     animation-duration:2s;
     animation-delay: 1.5s;
     animation-fill-mode: forwards;
 }
 @keyframes about_content_line{
    0%{
        opacity: 0;
        width:0px;
    }
    100%{
        opacity:100%;
        width:600px;
    }
  }
 .about_content p{
     margin: 10px;
     color: #fff;
     font-size:14px;
     line-height: 30px;
     letter-spacing: 3px;
 }
 
 @media screen and (max-width: 992px) {
     .about_content h1{
         font-size:60px;
     }
 }
 @media screen and (max-width: 680px) {
     .about_content h1{
         font-size:50px;
     } 
 }
 @media screen and (max-width: 500px) {
     .about_content{
         position: absolute;
         bottom: 0;
     }
     .about_content h1{
         font-size:30px;
 }
 .about_content h2::after{
 width:300px;
 }
 .about_content h2::before{
     width:300px;
 }
 .about_content p{
     font-size:12px;
     line-height:18px;
 }
 }