*, ::after, ::before {
    box-sizing: border-box;
}


body.brand {background-color: #000;background-image: url(../images/brand/brand-bg-line.png);background-repeat: no-repeat;background-position: right bottom;background-attachment: fixed;background-size: 68vw;}
.brand-page{display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;
}
.brand-row{display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;color: #fff;width: 85%;margin-top: 40px;margin-bottom: 20px;}
.brand-col{padding: 40px;}
.brand-img img{width: 100%;}
.brand-content {padding: 15px 0 0;}
.brand-content img{margin-bottom: 10px;}
.brand-content p{color: #b8b8b8; font-size: 14px; line-height: 20px;}
.brand-left, .brand-right{padding-left: 15px; padding-right: 15px;width: 100%;}



@media (min-width: 1400px){
.brand-col{padding: 50px;}
.brand-row{width: 80%;}
}

@media (min-width: 768px){
.brand-left {-webkit-box-flex: 0;-ms-flex: 0 0 25%;flex: 0 0 25%;max-width: 25%;position: fixed;top: 0;bottom: 0;left: 0;width: 100%;height: 100%;}
.brand-right {-webkit-box-flex: 0;-ms-flex: 0 0 75%;flex: 0 0 75%;max-width: 75%;margin-left: 25%;}
.brand-col {-webkit-box-flex: 0;-ms-flex: 0 0 50%;flex: 0 0 50%;max-width: 50%;}
.brand-left-logo{ position: absolute;top: 0;left:15px;right: 15px;bottom: 0;margin: auto;transform: translate(0, -30px);}
}
@media (max-width: 991px){
.brand-row {width: 100%;}
}

@media (max-width: 767px){
img.brand-left-logo {margin: 40px auto;display: block;max-width: 50vw;}
.brand-col {padding: 30px 0;}
.brand-row{margin-top: 0;}
body.brand {background-size: 100vw;}
}