#rgb_macro {
    background: url("../images/rgb_macro_1920.jpg") center no-repeat;
    height: 1268px;
    position: relative;
}

#rgb_macro .frame {
    position: absolute;
    left: 0px;
    top: 220px;
    width: 540px;
}

#rgb_macro .frame2 {
    position: absolute;
    left: 0px;
    top: 716px;
    width: 530px;
}

@media screen and (max-width: 1366px) {
    #rgb_macro {
        background: url("../images/rgb_macro_1366.jpg") center no-repeat;
        height: 960px;
    }
    #rgb_macro .frame {
        left: 30px;
        top: 142px;
        width: 394px;
    }

    #rgb_macro .frame2 {
        left: 30px;
        top: 570px;
        width: 360px;
    }
    #rgb_macro h3 {
        line-height: 1.2;
    }
}

@media screen and (max-width: 960px) {
    #rgb_macro {
        background: url("../images/rgb_macro_960.jpg") center no-repeat;
        height: 1250px;
    }
    #rgb_macro .frame,
    #rgb_macro .frame2 {
        position: static;
        text-align: center;
        width: auto;
        margin: 0 20px;
    }

    #rgb_macro .frame {
        padding-top: 80px;
    }
    #rgb_macro .frame2 {
        padding-top: 780px;
    }
}

@media screen and (max-width: 640px) {
    #rgb_macro {
        background: url("../images/rgb_macro_640.jpg") center no-repeat;
        height: 979px;
    }
    #rgb_macro .frame,
    #rgb_macro .frame2 {
        margin: 0 16px;
    }
    #rgb_macro .frame {
        padding-top: 60px;
    }
    #rgb_macro .frame2 {
        padding-top: 520px;
    }
}