body{ font-family: 'Noto Serif TC', serif; background: #000}
.custom-container-width{ max-width: 1000px;}
.navbar{ border-bottom: solid 1px #c2986d;}
.navbar-brand{ width: 174px;}
.slogan{ width: 270px; margin-top:2.2rem;}
.album a{ position: relative; border: 3px solid #fff; display: block;}
.album a .info { position: absolute;width: 100%;display: block; height: 60%; bottom: 0;padding: 8px 15px;color: #a27c52;font-size: .7rem;opacity: 0;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+25 */
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 60%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 60%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 60%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
    transition: .5s;
}
.album a .info div{ position: absolute; bottom:80px; transition: .5s;}
.album a .info p{ margin:8px 0;}
.album a .info p b{ font-size: 1rem; line-height: 1.4rem;}
.album a:hover .info{ opacity: 1;}

.album a:hover .info div{ bottom:10px;}

@media (max-width: 767.98px) { 
    .albumtext{ font-size: .9rem; letter-spacing:1px; padding:0 10px;}
}

/*footer*/
footer{ text-align: center; margin-top: 80px; font-size: 0.8rem;}
footer ul{ display: inline-block;}
.social_icon{ padding-left:0;}
.social_icon li{ float:left; width: 30px; height: 30px; margin:30px; display: grid;}
.social_icon li a{ border:2px solid #fff; padding:0 7px; font-size: 1.7rem; font-weight: bolder; width: 50px; height: 50px; line-height: 2.7rem;}
.footer_text li{ float:left; color:#fff; list-style: none; padding:0 50px;}
.copyright{ color: #fff;}
footer a,footer a:hover{ color: #fff}

@media screen and (max-width: 768px){
    .navbar-brand{ width: 32vw}
    .slogan{ width: 47vw;}
    .album a .info {opacity: 1; }
    .album a .info div{ bottom:10px;}

    footer{ margin-top: 0;}
    .social_icon li a{ font-size: 1.7rem;}
    .footer_text li{ padding:0; float:none; border-color:#231815!important;}
    .footer_text{ padding-left: 0;}
    .social_icon{ padding-left: 0 ; margin-left: -7vw;}    
    .album{ margin-bottom: 15px;} 
}

@media screen and (max-width: 576px){
    .album{ margin-bottom: 15px;} 
}