.center_wrap_bg {
  top:0px;
  left:0px;
  position: fixed;
  height:100%;
  width:100%;
  margin:0px;
  padding:0px;
 
 }

 .center_bg {
 
  position: fixed;
  top: calc(50% - 80px);  left: calc(50% - 115px);
  
  background-color: yellow;
 }
 
 .main_canv_styles {
      
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;

    transform-origin: 0% 0%;
    
 } 
  
 
 .main_canv_size       { transform: scale(1); }
 .main_canv_index_size { transform: scale(1); }
 
 @media all and (max-width:3909px) and (max-height: 2719px) {   .main_canv_size {  transform: scale(16); } .center_bg { top: calc(50% - (80px * 16));  left: calc(50% - (115px * 16)); } }  
 @media all and (max-width:3679px) and (max-height: 2559px) {   .main_canv_size {  transform: scale(15); } .center_bg { top: calc(50% - (80px * 15));  left: calc(50% - (115px * 15)); } }  
 @media all and (max-width:3449px) and (max-height: 2399px) {   .main_canv_size {  transform: scale(14); } .center_bg { top: calc(50% - (80px * 14));  left: calc(50% - (115px * 14)); } }  
 @media all and (max-width:3219px) and (max-height: 2239px) {   .main_canv_size {  transform: scale(13); } .center_bg { top: calc(50% - (80px * 13));  left: calc(50% - (115px * 13)); } }  
 @media all and (max-width:2989px) and (max-height: 2079px) {   .main_canv_size {  transform: scale(12); } .center_bg { top: calc(50% - (80px * 12));  left: calc(50% - (115px * 12)); } }  
 @media all and (max-width:2759px) and (max-height: 1919px) {   .main_canv_size {  transform: scale(11); } .center_bg { top: calc(50% - (80px * 11));  left: calc(50% - (115px * 11)); } }  
 @media all and (max-width:2529px) and (max-height: 1759px) {   .main_canv_size {  transform: scale(10); } .center_bg { top: calc(50% - (80px * 10));  left: calc(50% - (115px * 10)); } }  
 
 @media all and (max-width:2299px) and (max-height: 1599px) {   .main_canv_size {  transform: scale(9); } .center_bg { top: calc(50% - (80px * 9));  left: calc(50% - (115px * 9)); } }  
 @media all and (max-width:2069px) and (max-height: 1439px) {   .main_canv_size {  transform: scale(8); } .center_bg { top: calc(50% - (80px * 8));  left: calc(50% - (115px * 8)); } }  
 @media all and (max-width:1839px) and (max-height: 1279px) {   .main_canv_size {  transform: scale(7); } .center_bg { top: calc(50% - (80px * 7));  left: calc(50% - (115px * 7)); } }  
 @media all and (max-width:1609px) and (max-height: 1119px) {   .main_canv_size {  transform: scale(6); } .center_bg { top: calc(50% - (80px * 6));  left: calc(50% - (115px * 6)); } }  
 @media all and (max-width:1379px) and (max-height: 959px)  {   .main_canv_size {  transform: scale(5); } .center_bg { top: calc(50% - (80px * 5));  left: calc(50% - (115px * 5)); } }  
 @media all and (max-width:1149px) and (max-height: 799px)  {   .main_canv_size {  transform: scale(4); } .center_bg { top: calc(50% - (80px * 4));  left: calc(50% - (115px * 4)); } }    
  @media all and (max-width:919px) and (max-height: 639px)  {   .main_canv_size {  transform: scale(3); } .center_bg { top: calc(50% - (80px * 3));  left: calc(50% - (115px * 3)); } }    
  @media all and (max-width:689px) and (max-height: 479px)  {   .main_canv_size {  transform: scale(2); } .center_bg { top: calc(50% - (80px * 2));  left: calc(50% - (115px * 2)); } }  
  @media all and (max-width:459px) and (max-height: 319px)  {   .main_canv_size {  transform: scale(1); }  }
 

 @media all and (max-width:3910px) and (max-height: 2720px) {   .main_canv_index_size {  transform: scale(17); } .center_bg { top: calc(50% - (80px * 17));  left: calc(50% - (115px * 17)); } }  
 @media all and (max-width:3680px) and (max-height: 2560px) {   .main_canv_index_size {  transform: scale(16); } .center_bg { top: calc(50% - (80px * 16));  left: calc(50% - (115px * 16)); } }  
 @media all and (max-width:3450px) and (max-height: 2400px) {   .main_canv_index_size {  transform: scale(15); } .center_bg { top: calc(50% - (80px * 15));  left: calc(50% - (115px * 15)); } }  
 @media all and (max-width:3220px) and (max-height: 2240px) {   .main_canv_index_size {  transform: scale(14); } .center_bg { top: calc(50% - (80px * 14));  left: calc(50% - (115px * 14)); } }  
 @media all and (max-width:2990px) and (max-height: 2080px) {   .main_canv_index_size {  transform: scale(13); } .center_bg { top: calc(50% - (80px * 13));  left: calc(50% - (115px * 13)); } }  
 @media all and (max-width:2760px) and (max-height: 1920px) {   .main_canv_index_size {  transform: scale(12); } .center_bg { top: calc(50% - (80px * 12));  left: calc(50% - (115px * 12)); } }  
 @media all and (max-width:2530px) and (max-height: 1760px) {   .main_canv_index_size {  transform: scale(11); } .center_bg { top: calc(50% - (80px * 11));  left: calc(50% - (115px * 11)); } }  
 @media all and (max-width:2300px) and (max-height: 1600px) {   .main_canv_index_size {  transform: scale(10); } .center_bg { top: calc(50% - (80px * 10));  left: calc(50% - (115px * 10)); } }  
 @media all and (max-width:2070px) and (max-height: 1440px) {   .main_canv_index_size {  transform: scale(9); }  .center_bg { top: calc(50% - (80px * 9));   left: calc(50% - (115px * 9));  } }  
 @media all and (max-width:1840px) and (max-height: 1280px) {   .main_canv_index_size {  transform: scale(8); }  .center_bg { top: calc(50% - (80px * 8));   left: calc(50% - (115px * 8));  } }  
 @media all and (max-width:1610px) and (max-height: 1120px) {   .main_canv_index_size {  transform: scale(7); }  .center_bg { top: calc(50% - (80px * 7));   left: calc(50% - (115px * 7));  } }   
 @media all and (max-width:1380px) and (max-height: 960px)  {   .main_canv_index_size {  transform: scale(6); }  .center_bg { top: calc(50% - (80px * 6));   left: calc(50% - (115px * 6));  } }  
 @media all and (max-width:1150px) and (max-height: 800px)  {   .main_canv_index_size {  transform: scale(5); }  .center_bg { top: calc(50% - (80px * 5));   left: calc(50% - (115px * 5));  } }     
  @media all and (max-width:920px) and (max-height: 640px)  {   .main_canv_index_size {  transform: scale(4); }  .center_bg { top: calc(50% - (80px * 4));   left: calc(50% - (115px * 4));  } }   
  @media all and (max-width:690px) and (max-height: 480px)  {   .main_canv_index_size {  transform: scale(3); }  .center_bg { top: calc(50% - (80px * 3));   left: calc(50% - (115px * 3));  } }    
  @media all and (max-width:460px) and (max-height: 320px)  {   .main_canv_index_size {  transform: scale(2); }  .center_bg { top: calc(50% - (80px * 2));   left: calc(50% - (115px * 2));  } }