#photo-top {
    background-image: url("../img/pro_photo/photo@2x.jpg");
    background-position: top center;
    width: 100%;
    background-size: cover;
    height: 330px;
    max-width: 2000px;
    margin: 0 auto;
}

.photo-date {
    font-family: "frank-demcom";
    font-size: 120px;
    line-height: 120px;
    color: #08498C;
}

.photo-title {
    font-family: "frank-bookcom";
    font-size: 40px;
    line-height: 48px;
    color: #08498C;
}

.view-photo {
    font-family: "frank-heavy";
font-size: 22px;
line-height: 32px;
letter-spacing: 0.2px;
}

.view-photo a {
    color: #0093FF;
}

.view-photo a:hover {
    text-decoration: underline;
}

.padd-t-12 {
    padding-top:12px;
}

.padd-t-30 {
    padding-top:30px;
}

.padd-t-40 {
    padding-top:40px;
}

.padd-t-80 {
    padding-top:80px;
}

.pt-b-80 {
    padding-bottom: 80px;
}


@media (max-width: 820px) {

    #photo-top {
        background-image: url("../img/pro_photo/photo-m@2x.jpg");
        height: 300px;
    }

    .photo-date {
        font-size: 80px;
        line-height: 80px;
    }

    .photo-title {
        font-size: 60px;
        line-height: 68px;
    }

    .padd-t-30 {
        padding-top: 15px;
    }

}


@media (max-width: 768px) {
    .padd-t-30 {
        padding-top: 20px;
    }

.photo-date {
    font-size: 75px;
    line-height: 75px;
}

.photo-title {
    font-size: 50px;
    line-height: 50px;
}

.view-photo {
    font-size: 18px;
    line-height: 24px;
    padding-top:10px;
}

.padd-t-80 {
    padding-top:60px;
}

.mar-t-80 {
    margin-top:60px;
}

}


@media (max-width: 414px) {

    #photo-top {
        background-image: url("../img/pro_photo/photo-m@2x.jpg");
        height: 152px;
    }
}