_related-brand.scss 1.73 KB
@mixin relatedTitle {
    margin: 0 29rem / $pxConvertRem;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-bottom: none;
    line-height: 72rem / $pxConvertRem;
    font-size: 30rem / $pxConvertRem;
    color: #b0b0b0;
    text-align: center;
}

.related-brand {
    margin: 30rem / $pxConvertRem 0 0 0;
    
    h2 {
        @include relatedTitle;
    }

    .brand-list {
        padding: 30rem / $pxConvertRem 0 30rem / $pxConvertRem;
        background: #fff;
        border-top: 1px solid #e0e0e0;
        border-bottom: 1px solid #e0e0e0;

        li {
            float: left;
            width: 158rem / $pxConvertRem;
            height: 120rem / $pxConvertRem;
            border-left: 1px solid #e0e0e0;

            a {
                display: block;
                text-decoration: none;
            }

            .brand-logo {
                display: table-cell;
                width: 158rem / $pxConvertRem;
                height: 94rem / $pxConvertRem;
                vertical-align:middle;

                img {
                    display: block;
                    max-width: 158rem / $pxConvertRem;
                    max-height: 94rem / $pxConvertRem;
                    vertical-align: middle;
                    margin: 0 auto;
                }
            }
            
            .brand-name {
                margin: 2px 0 0 0;
                line-height: 24rem / $pxConvertRem;
                font-size: 18rem / $pxConvertRem;
                color: #babac2;
                text-align: center;
                text-decoration: none;
                border-bottom: none;
                overflow: hidden;
            }
            
        }

        li:first-child {
            border-left: none;
        }
    }
}