.main-container {padding: 0px;}
.box-Left { position: relative; padding-top: 0px;}

@media(max-width: 460px) /* OK Done */
{
    .main-container 
    { height: auto; max-width: 95%; width: 95%;
    margin-left: 2.6%; grid-template-rows: 0.5fr 1.5fr; margin-bottom: 10px;
    }
    /* --------------------- */
    .images-Sys-L { width: 10%;}
    #img-Sys-CPU {display: block; position: relative; top: 50px;}
    .ulRequired { margin-left: 12%; font-size: 1.2rem; margin-top: -305px;}
    ul li {font-size: 0.9rem; line-height: 25px; }
     #img-Sys-Note {left: 3%; margin-top: 285px;}
    .ulReqNote { margin-left: 11%; margin-top: 15px; margin-bottom: 10px;}
    .box-Right {margin-top: -10px;}
    .images-Sys-R { margin-top: 22px; margin-left: 0; width: 10%; }
    .ulOptional1 li, .ulOptional2 li, .ulOptional3 li, .ulOptional4 li, .ulOptional5 li { font-size: 0.9rem; line-height: 23px; }
    .ulOptional1 { margin-left: 12%; margin-top: -38px; font-size: 1.2rem; }
    .ulOptional2, .ulOptional3, .ulOptional4, .ulOptional5 { margin-left: 12%; margin-top: -38px; }
    .ulOptional5 {margin-bottom: 10px;}
}

@media(min-width: 461px) and (max-width: 576px) /* OK Done */
{
    .main-container 
    { height: 1520px; max-width: 95%; width: 95%; top: 30px;
    margin-left: 2.6%; grid-template-rows: 0.98fr 1.02fr; margin-bottom: 40px;
    }
    /* --------------------- */
    .images-Sys-L { position: absolute; left: 4.5%; width: 10%;}
    #img-Sys-CPU {top: 40.4px;}
    .ulRequired { margin-left: 12%; margin-top: 10px; font-size: 1.4rem;}
    ul li {font-size: 1.2rem; line-height: 33px; }
    #img-Sys-Note {left: 3%; margin-top: 410px;}
    .ulReqNote { margin-left: 11%; margin-top: 1px; position: absolute;}
    .images-Sys-R { margin-top: 22px; margin-left: 0; width: 10%; position: absolute;}
    .ulOptional1 li, .ulOptional2 li, .ulOptional3 li, .ulOptional4 li, .ulOptional5 li { font-size: 1.2rem; line-height: 28px; }
    .ulOptional1 { margin-left: 12%; margin-top: 18px; font-size: 1.4rem; }
    .ulOptional2, .ulOptional3, .ulOptional4, .ulOptional5 { margin-left: 12%; margin-top: 20px; }
}
@media(min-width: 577px) and (max-width: 767px) /* OK Done */
{
    .main-container 
    { height: 1360px; max-width: 95%; width: 95%; top: 30px;
    margin-left: 2.6%; grid-template-rows: 0.98fr 1.02fr; margin-bottom: 40px;
    }
    /* --------------------- */
    .images-Sys-L { position: absolute; left: 4.5%; width: 10%;}
    #img-Sys-CPU {top: 40.4px;}
    .ulRequired { margin-left: 14%; margin-top: 10px; font-size: 1.6rem;}
    ul li {font-size: 1.4rem; line-height: 33px; }
    #img-Sys-Note {left: 3%; margin-top: 410px;}
    .ulReqNote { margin-left: 12%; margin-top: 1px; position: absolute;}
    .images-Sys-R { margin-top: 22px; margin-left: 0; width: 10%; position: absolute;}
    .ulOptional1 li, .ulOptional2 li, .ulOptional3 li, .ulOptional4 li, .ulOptional5 li { font-size: 1.4rem; line-height: 28px; }
    .ulOptional1 { margin-left: 12%; margin-top: 18px; font-size: 1.6rem; }
    .ulOptional2, .ulOptional3, .ulOptional4, .ulOptional5 { margin-left: 12%; margin-top: 20px; }
}
@media(min-width: 768px) and (max-width: 991px)  /* OK Done But Position NOT Fixed */
{
    .main-container
    { height: 1320px; max-width: 74%; width: 74%; 
    margin-left: 24%; grid-template-rows: 1.2fr 0.8fr; margin-bottom: 40px;
    }
    /* --------------------- */
    .images-Sys-L { position: absolute; left: 4.5%; width: 10%;}
    #img-Sys-CPU {top: 40.4px;}
    .ulRequired { margin-left: 14%; margin-top: 10px; font-size: 1.6rem;}
    ul li {font-size: 1.4rem; line-height: 33px; }
    #img-Sys-Note {left: 3%; margin-top: 410px;}
    .ulReqNote { margin-left: 12%; margin-top: 1px; position: absolute;}
    .images-Sys-R { margin-top: 22px; margin-left: 0; width: 10%; position: absolute;}
    .ulOptional1 li, .ulOptional2 li, .ulOptional3 li, .ulOptional4 li, .ulOptional5 li { font-size: 1.4rem; line-height: 28px; }
    .ulOptional1 { margin-left: 12%; margin-top: 18px; font-size: 1.6rem; }
    .ulOptional2, .ulOptional3, .ulOptional4, .ulOptional5 { margin-left: 12%; margin-top: 20px; }
}

@media(min-width: 992px) and (max-width: 1199px)  /* OK Done But Position NOT Fixed */
{
    .main-container 
    { height: 570px; max-width: 78.1%; width: 78.1%; margin-left: 20%; 
    grid-template-columns: 1.03fr 0.97fr; 
    }
    /* --------------------- */
    .images-Sys-L { position: absolute; left: 4.5%; width: 12%;}
    #img-Sys-CPU {top: 40.4px;}
    .ulRequired { margin-left: 11%; margin-top: 3px; font-size: 1.3rem;}
    ul li {font-size: 1.1rem; line-height: 35px; }
    #img-Sys-Note {left: 4.5%; margin-top: 380px;}
    .ulReqNote { margin-left: 14.1%; margin-top: 5px; position: absolute;}
    .images-Sys-R { margin-top: 25px; margin-left: 0; width: 6%; position: absolute;}
    .ulOptional1 li, .ulOptional2 li, .ulOptional3 li, .ulOptional4 li, .ulOptional5 li { font-size: 1.1rem; line-height: 25px; }
    .ulOptional1 { margin-left: 15.5%; margin-top: 27px; font-size: 1.3rem; }
    .ulOptional2, .ulOptional3, .ulOptional4, .ulOptional5 { margin-left: 15.5%; margin-top: 22px; }
}

@media(min-width: 1200px) and (max-width: 1399px)
{
    .images-Sys-L { position: absolute; left: 4.5%; width: 15%;}
    #img-Sys-CPU {top: 40.4px;}
    .ulRequired { margin-left: 16%; margin-top: 10px; font-size: 1.5rem;}
    ul li {font-size: 1.2rem; line-height: 28px; }
    #img-Sys-Note {left: 4.5%; margin-top: 380px;}
    .ulReqNote { margin-left: 14.1%; margin-top: 70px; position: absolute;}
    .images-Sys-R { margin-top: 25px; margin-left: 0; width: 6%; position: absolute;}
    .ulOptional1 li, .ulOptional2 li, .ulOptional3 li, .ulOptional4 li, .ulOptional5 li { line-height: 25px; }
    .ulOptional1 { margin-left: 14.5%; margin-top: 27px; }
    .ulOptional2, .ulOptional3, .ulOptional4, .ulOptional5 { margin-left: 14.5%; margin-top: 22px; }
}

@media(min-width: 1400px) 
{
    .images-Sys-L { position: absolute; left: 4.5%; width: 15%;}
    #img-Sys-CPU {top: 40.4px;}
    .ulRequired { margin-left: 16%; margin-top: 10px; font-size: 1.5rem;}
    ul li {font-size: 1.2rem; line-height: 28px; }
    #img-Sys-Note {left: 4.5%; margin-top: 380px;}
    .ulReqNote { margin-left: 14.1%; margin-top: 70px; position: absolute;}
    .images-Sys-R { margin-top: 25px; margin-left: 0; width: 6%; position: absolute;}
    .ulOptional1 li, .ulOptional2 li, .ulOptional3 li, .ulOptional4 li, .ulOptional5 li { line-height: 25px; }
    .ulOptional1 { margin-left: 14.5%; margin-top: 27px; }
    .ulOptional2, .ulOptional3, .ulOptional4, .ulOptional5 { margin-left: 14.5%; margin-top: 22px; }
}