body {background: #100903; color: #CCCBA6;}

.wrapper {max-width: 1024px;}
.header {
    padding: 0 10px;
}
.header h1 {
    font-size: 36px;
    font-weight: normal;
}
.block-content .block-1 .left {
    padding: 10px;
    background: url(../jpg/about_head.jpg) no-repeat;
    background-size: 140%;
    background-position: center;
}
.block-content .block-1 .left ul > li {
    margin-bottom: 5px;
    color: #a3dfe7;
}
.block-content .block-1 .left ul > li:nth-of-type(odd) {
    color: #f4d464;
}
.block-content .block-1 .right {
    padding: 10px;
}
.block-content .block-2 {
    background-color: #211a16;
    margin-top: 10px;
    padding: 5px;
}
.block-content .block-2 .pattern .preview figure {
    text-align: center;
}
.block-content .block-2 .pattern .preview figure img {
    display: block;
    margin: 0 auto;
}
.block-content .block-2 .pattern .preview figure figcaption {
    margin-top: 5px;
    font-size: 14px;
    color: #9be7ee;
}
.block-content .block-2 .pattern .detail {
    padding: 5px;
}
.block-content .block-3 .production {
    margin-top: 20px;
}
.block-content .block-3 .production figure {
    text-align: center;
}
.block-content .block-3 .production figure img {
    display: block;
    margin: 0 auto;
}
.block-content .block-3 .production .detail {
    padding: 10px;
}
.block-content .block-4 {
    background-color: #211a16;
    padding: 5px;
}
.block-content .block-4 .designer .preview figure {
    text-align: center;
}
.block-content .block-4 .designer .preview figure img {
    display: block;
    margin: 0 auto;
}
.block-content .block-4 .designer .detail {
    padding: 5px;
}
.block-content .block-5 figure figcaption {
    padding: 10px;
    background-image: linear-gradient(to right, #5f4232, rgba(255,0,0,0));
}
.block-content .block-5 figure figcaption h3 {
    font-weight: normal;
}
.block-content .block-5 figure img {
    display: block;
    width: 100%;
    margin: 10px auto;
}
.block-content .block-6 {
    text-align: center;
    color: #f4d464;
    font-size: 14px;
}

@media only screen and (min-width: 768px) {
    .header h1 {
        font-size: 50px;
    }
    .block-content .block-1 > div {
        float: left;
        width: 50%;
    }
    .block-content .block-1 .left {
        padding: 15px;
    }
    .block-content .block-1 .right {
        padding: 3% 20px 0 20px;
    }
    .block-content .block-2 {
        margin: 20px 0;
        padding: 20px 10px;
    }
    .block-content .block-2 .pattern > div {
        float: left;
    }
    .block-content .block-2 .pattern .preview {
        width: 40%;
    }
    .block-content .block-2 .pattern .detail {
        width: 60%;
    }
    .block-content .block-2 .pattern .preview figure img {
        width: 100%;
    }
    .block-content .block-2 .pattern .preview figure figcaption {
        font-size: 12px;
    }
    .block-content .block-2 .pattern .detail {
        padding: 3% 20px 0 20px;
    }
    .block-content .block-3 .production .production-item figure {
        float: left;
        width: 40%;
    }
    .block-content .block-3 .production .production-item .detail {
        float: left;
        width: 60%;
        padding: 5% 20px 0 20px;
    }
    .block-content .block-4 {
        margin: 30px auto;
    }
    .block-content .block-4 .designer > div {
        float: left;
    }
    .block-content .block-4 .designer .preview {
        width: 40%;
    }
    .block-content .block-4 .designer .preview figure img {
        width: 100%;
    }
    .block-content .block-4 .designer .detail {
        width: 60%;
        padding: 10% 20px 0 20px;
    }
}

@media only screen and (min-width: 1024px) {
    .block-content .block-1 .left {
        background-size: cover;
    }
    .block-content .block-2 .pattern .preview {
        padding: 10px 30px 10px;
    }
    .block-content .block-2 .pattern .detail {
        padding-top: 5%;
    }
    .block-content .block-3 .production .production-item {
        float: left;
        width: 33.33%;
    }
    .block-content .block-3 .production .production-item figure {
        float: none;
        width: 100%;
        height: 300px;
    }
    .block-content .block-3 .production .production-item .detail {
        float: none;
        width: 100%;
    }
    .block-content .block-4 .designer .preview {
        width: 30%;
    }
    .block-content .block-4 .designer .detail {
        width: 70%;
        padding-top: 8%;
    }
}