/*
        樣式分級：
        1. 基本樣式（Mobile First）
        2. 平板（min-width: 576px）
        3. 桌機（min-width: 1200px）
*/

/*  基本樣式  */

h2 {
    padding-top: 25px;
    margin-bottom: 25px;
    font-size: 24px;
}
/*  header  */

/*  marketing  */
#media-detail {
    background-color: #000;
    padding: 30px 0 30px 0;
}
#media-detail::after {
    content: '';
    display: block;
    clear: both;
}
.photo-info {
    margin: 0 auto;
    max-width: 960px;
}
.photo-unit {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    font-size: 0;
}
.detail-arrow {
    display: inline-block;
    font-size: 72px;
    margin-top: 80px;
    cursor: pointer;
    color: var(--text-gray-5);
}
.detail-arrow:hover {
    color: var(--text-gray-15);
}
.detail-photo {
    display: inline-block;
    margin: 0 5px;
    width: calc(100% - 27px - 27px - 10px);
    vertical-align: top;
}
.detail-photo img {
    width: 100%;
}
.photo-spec {
    display: block;
    color: var(--text-gray-15);
    width: 426px;
    margin: 15px auto;
}
.photo-spec .detail-caption {
    font-size: 16px;
}
.photo-spec table {
    margin-top: 15px;
    font-size: 13px;
}
.photo-spec table tr:hover {
    background-color: var(--bg-gray-5);
}
.photo-spec table th {
    border-bottom: 1px solid var(--text-gray-15);
}
.photo-spec table th,
.photo-spec table td {
    padding: 10px 5px 3px 5px;
}
.photo-spec table th:nth-child(1),
.photo-spec table td:nth-child(1) {
    padding-left: 20px;
}
.photo-spec table th:nth-child(2),
.photo-spec table td:nth-child(2) {
    width: 15em;
}
.photo-spec table th:nth-child(3),
.photo-spec table td:nth-child(3) {
    width: 15em;
}
.photo-spec .detail-size {
    width: 22px;
    text-align: center;
    border: solid 1px var(--text-gray-15);
    display: inline-block;
    margin-right: 5px;
}
.photo-spec .detail-size:nth-last-child(1) {
    border: solid 1px var(--orange);
    color: var(--orange);
}
.detail-author {
    font-size: 15px;
    margin-top: 30px;
    float: left;
}
.detail-author .icon-s-author {
    float: left;
    margin-left: 16px;
}
.detail-author .author-name {
    margin-left: 40px;
}
.detail-author .file-id {
    margin-left: 40px;
}
.detail-btn {
    width: 148px;
    float: right;
    margin-top: 30px;
}
.detail-btn-add {
    width: 100%;
    background-color: var(--red);
    padding: 0.1rem 0.75rem;
    margin-bottom: 5px;
}
.detail-btn-add:hover {
    background-color: rgba(240, 70, 60, .7);
}
.detail-btn-favorite,
.detail-btn-checkout {
    width: 48%;
    background-color: var(--orange);
    padding: 0.1rem 0.75rem;
}
.detail-btn-favorite:hover,
.detail-btn-checkout:hover {
    background-color: rgba(250, 160, 40, .7);
}
.detail-btn-add:link,
.detail-btn-favorite:link,
.detail-btn-checkout:link {
    color: white;
}
.detail-btn-add:visited,
.detail-btn-favorite:visited,
.detail-btn-checkout:visited {
    color: white;
}
.detail-keywords {   
    margin: 0 auto;
    margin-top: 25px;
    max-width: 514px;
}
.detail-keywords .keyword-caption {
    font-size: 16px;
    color: var(--text-gray-15);
    margin-bottom: 5px;
}
.detail-keywords a {
    color: var(--text-gray-15);
}
.detail-keywords a.btn {
    background-color: var(--bg-gray-5);
    margin-right: 5px;
    margin-bottom: 5px;
}
.detail-keywords a.keyword-more {
    text-decoration: underline;
    display: inline-block;
}
#media-related {
    padding-top: 25px;
}
#media-related #related-head {
    margin: 0 7px;
}
#media-related .related-sum {
    color: var(--text-gray-10);
    font-size: 13px;
}
#media-related #similar {
    margin-top: 10px;
}
@media (max-width: 576px) {
    .photo-spec table th:nth-child(3),
    .photo-spec table td:nth-child(3) {
        display: none;
    }
    .photo-spec {
        width: 230px;
    }
}
@media (max-width: 991.98px) {
    #media-related {
        max-width: 100%;
    }
}
@media (min-width: 576px) {
    .photo-unit {
        max-width: 514px;
    }
}
@media (min-width: 576px) and (max-width: 767.98px) {

}

@media (min-width: 768px) {

}
@media (min-width: 992px) {
    #media-detail {
        padding: 70px 0 30px 0;
    }
    .photo-info::after {
        content: '';
        display: block;
        clear: both;
    }
    .photo-unit {
        float: left;
    }
    .photo-spec {

        float: left;
        vertical-align: top;
        margin-top: 0;
    }
    .photo-spec table th:nth-child(2),
    .photo-spec table td:nth-child(2) {
        width: 13em;
    }
    .photo-spec table th:nth-child(3),
    .photo-spec table td:nth-child(3) {
        width: 15em;
    }
    .photo-spec table th:nth-child(4),
    .photo-spec table td:nth-child(4) {
        width: 3em;
    }
    .detail-keywords {  
        max-width: 960px;
    }
    #media-related .related-sum  {
        float: right;
    }
}
@media (min-width: 1200px) {
    .container {
        max-width: 1150px;
        padding-left: 0px;
        padding-right: 0px;
    }
}