/*
	4.2. Banner
 */

.banner-callus {
    &.spc1 {
        margin-bottom: 50px;
        @media(min-width: $screen-md) {
            margin-bottom:78px;
        }
    }
    &.spc2 {
        margin-bottom: 50px;
        @media(min-width: $screen-md) {
            margin-bottom:86px;
        }
    }
    &.spc5{
        margin-top:30px;
       @media(min-width: $screen-md) {
            margin-top:-136px;
       } 
    }
}

.homepage-banner {
    @media(min-width: 1681px) {
        .row {
            margin:0 -20px;
        }
        [class*="col-"] {
            padding: 0 20px;
        }
    }
    &.spc1 {
        margin-bottom: 30px;
        @media(min-width: $screen-md) {
            margin-bottom:76px;
        }
        @media(max-width:$screen-xs) {
            margin-bottom: 0px;
        }
    }
    &.spc2{
        margin-bottom: 30px;
        @media(min-width: $screen-md) {
            margin-bottom:59px;
        }
    }
    &.spc3{
        margin-bottom: 30px;
        @media(min-width: $screen-md) {
            margin-bottom:125px;
        }
    }
}

.banner-content {
    position: absolute;
    left: 60px;
    top: 50%;
    @media(max-width: $screen-xs) {
        top:15%;
    }
    .banner-title {
        color: #fff;
        font-size: 33px;
        font-weight: 500;
        margin-bottom: 5px;
    }
    p {
        color: #fff;
        font-size: 16px;
        font-weight: 500;
        padding-bottom: 10px;
        position: relative;
        &:before {
            @include line-left2(32px);
        }
    }
}

.h-banner-content {
    position: absolute;
    left: 58px;
    top: 113px;
    max-width: 200px;
    &.v2 {
        left: 48px;
        top: 83px;
        max-width: 177px;
        @media(max-width: $screen-sm-max) {
            top: 40px;
        }
    }
    &.v3 {
        max-width: unset;
        text-align: center;
        top: 70px;
        @media(max-width: 1366px) {

            left: 50%;
            transform: translate(-50%, 0);
        }
        .content-name {
            margin-bottom: 5px;
        }
        .content-price {
            margin-bottom: 12px;
        }
    }
    &.v4 {
        max-width: 166px;
        left: 42px;
        top: 82px;
        @media(max-width: $screen-sm-max) {
            top: 20%;
        }
    }
    &.v5 {
        top: 70px;
        left: 39px;
        @media(max-width: $screen-sm-max) {
            top: 20%;
        }
        .content-name {
            margin-bottom: 4px;
        }
    }
    &.v6 {
        text-align: center;
        top: 44px;
        left: 50%;
        transform: translate(-50%, 0);
        .content-name {
            margin-bottom: 0;
        }
        .content-price {
            margin-bottom: 0px;
        }
    }
    &.v7 {
        max-width: unset;
        text-align: center;
        top: 44px;
        .content-name {
            margin-bottom: 0;
        }
        .content-price {
            margin-bottom: 4px;
        }
        @media(max-width:1366px) {

            left: 50%;
            transform: translate(-50%, 0);
        }
    }
    @media(max-width:$screen-sm-max) {
        left: 58px;
        top: 25%;
    }
    .content-name {
        font-size: 22px;
        line-height: 26px;
        font-weight: 500;
        margin-bottom: 13px;
        @media(max-width: 812px) {
            font-size: 18px;
            margin-bottom: 5px;
        }
    }
    .content-price {
        font-size: 16px;
        font-weight: 500;
        color: #999999;
        margin-bottom: 20px;
        @media(max-width: 812px) {
            font-size: 14px;
            margin-bottom: 5px;
        }
        .red {
            color: #ff5050;
            font-size: 30px;
            position: relative;
            &:before {
                content: "$";
                position: absolute;
                font-size: 15px;
                font-weight: 500;
                right: -15px;
            }
            @media(max-width:812px) {
                font-size: 20px;
            }
        }
        &.percent {
            .red {
                &:before {
                    content: "%";
                    position: absolute;
                    font-size: 15px;
                    font-weight: 500;
                }
            }
        }
    }
    .btn-banner {
        color: #ff5050;
        font-weight: 500;
        i {
            margin-left: 15px;
        }
    }
}

.banner-img2 {
    @extend .about-img;
}

.banner-img {
    position: relative;
    @media(max-width: $screen-xs-max) {
        margin-bottom:30px;
    }
}

.pd-banner {
    &.v2 {
        padding-top: 27px;
    }
}