/* =====================================================================================================
   Benefits / Requirements 齊左 ( PNG Icon ) >> 基於 Benefits_Icon_Green_Color_Defination
   ===================================================================================================== */


   .feature-content {
      float: right;
      padding: 10px;
      text-align: left;
      /*top:-5px;*/
  }

  .feature-list {
   margin: 0 0 30px;
   /*margin:0 0 10px;*/
}

.feature-iconblue {
   position: relative;
   z-index: 1;
   padding: 10px 0;
}

.feature-iconblue img {
   max-width: 85%;
   vertical-align: top;
   display: inline-block;
   border-radius: 0px;
   border-radius: 300px;
   filter: invert(0.4) sepia(1) saturate(20) hue-rotate(54deg) brightness(1.2) !important;
   /*border: 2px solid #000;*/
   padding: 5%;
}

  .markets-solutions-applications .feature-content p {
   font-size: 16px;
   color: #6d767b;
   color: #5f6264;
   color: #505253;
   line-height: 1.5;
}


/* Icon 圖 :: before (變白底使用) */
.BIcon_White .feature-iconblue::after {
   content: "";
   display: block;
   position: absolute;
   z-index: -1;
   background-color: #fff;
   border-radius: 50%;
}




/************************   RWD   >>  Icon > Green Icon > 齊左  *****************************************/


/* 橫向智慧手機到竪立平板電腦解析度 >> 1024 以上 */
@Media (min-width: 1024px) {

   .feature-content {
   padding-left: 20px;
   }

   .feature-iconblue img {
   max-width: 115%;
   /*top: -30px;*/
   max-width: 90%;
   position: relative;
   margin-right: 1%;
   padding-right: 5%;
   padding: 5%;
   padding: 13%;
   }

   /* Icon 圖 :: before (白底) */
   .BIcon_White .feature-iconblue::after {
   top: 10px;
   left: 5px !important;
   left: -1px !important;
   }

   #benefits div.app-products > div, 
   #Requirements div.app-products > div {
   /*border: 2px solid #87bf3c;
   border-radius: 300px;*/
   border: unset !important;
   width: 100%;
   height: 100%;
   padding: 5px;
   margin: 0 auto 5px;
   transition: all 0.2s ease-in-out 0s;
   float: left;
   }

   #benefits div.markets-solutions-applications .img-responsive, 
   #Requirements div.markets-solutions-applications .img-responsive {
   width: 120px !important;
   height: 100% !important;
   margin: unset !important;
   float: left;
   position: relative;
   left: -15px;
   }

   #benefits div.markets-solutions-applications h3, 
   #Requirements div.markets-solutions-applications h3 {
   text-align: left !important;
   }

   #benefits div.app-products > div:hover, 
   #Requirements div.app-products > div:hover {
   transform: unset !important;
   transition: all 0.3s ease-in-out 0s;
   }

   #benefits div.markets-solutions-applications .app-block-container .app-products:hover, 
   #Requirements div.markets-solutions-applications .app-block-container .app-products:hover {
   filter: brightness(100%);
   }

}


/*  1200 以上 */
@Media (min-width: 1200px) {

   /* Icon 圖 :: before (白底) */
   .BIcon_White .feature-iconblue::after {
   width: 91%;
   height: 86.7% !important;
   top: 12px !important;
   }

   .feature-iconblue {
   transform: scale(1.15) !important;
   }

   .feature-list {
   margin: 0 0 40px;
   margin: 0 0 50px;
   }
}



/* 中螢幕 >> 1050 ~1770 */
@Media (min-width: 1050px) and (max-width: 1770px) {

   #benefits div.markets-solutions-applications .img-responsive, 
   #Requirements div.markets-solutions-applications .img-responsive {
   width: 100px !important;
   }

}


/* Bowei 筆電寬螢幕 */
@Media (min-width: 1281px) and (max-width: 1366px) {

   /* Icon 圖 :: before (白底) */
   .BIcon_White .feature-iconblue::after {
   width: 91% !important;
   height: 84.75% !important;
   top: 11px !important;
   }

   #benefits div.markets-solutions-applications .img-responsive, 
   #Requirements div.markets-solutions-applications .img-responsive {
   width: 100px !important;
   }
 
}


/* 810 以上 */

@Media (min-width: 810px) {

   .feature-box {
   display: flex; /* 水平並排置中使用 */
   align-items: center; /* 水平並排置中使用 */
   }
   
   #benefits .markets-solutions-applications p {
   margin-bottom: 0px;
   }

}


/* 橫向智慧手機到竪立平板電腦解析度 >> 992 以下 */
@Media (max-width: 992px) { 

	#benefits .app-products > div.Icon_Desc, #Requirements .app-products > div.Icon_Desc {
	width: unset !important;
	height: unset !important;
	}
		
} 
   
   

/* 橫向智慧手機到竪立平板電腦解析度 >> 992 以下 */
@Media (min-width: 670px) and (max-width: 992x) {

	#benefits .app-products > div.Icon_Desc, #Requirements .app-products > div.Icon_Desc {
	width: unset;
	height: unset;
	text-align: left !important;
	}

	#benefits .markets-solutions-applications .Icon_Desc h3, #Requirements .markets-solutions-applications .Icon_Desc h3 {
	text-align: left !important;
	}

	#benefits div.markets-solutions-applications h3, #Requirements div.markets-solutions-applications h3 {
	text-align: left !important;
	}
 
 }


/* 橫向智慧手機到竪立平板電腦解析度 >> 768 以下 */
@Media (max-width: 768px) { 

   .feature-iconblue {
   filter: drop-shadow(1px 4px 6px rgba(2, 29, 44, 0.15));
   }

   /* Icon 圖 :: before (白底) */
   .BIcon_White .feature-iconblue::after {
   position: absolute;
   background-color: #fff;
   width: 91%;
   height: 91%;
   left: -4px;
   top: 10px;
   }


   #benefits .markets-solutions-applications .app-block-container .app-products, 
   #Requirements .markets-solutions-applications .app-block-container .app-products {
   display: block !important;
   margin: 0 auto 10px !important;
   }

   #benefits .app-products > div.Icon_Desc, 
   #Requirements .app-products > div.Icon_Desc {
   width: 100% !important;
   height: unset !important;
   display: block;
   margin-top: 100px;
   }

   #benefits div.app-products > div.Icons_Block, #Requirements div.app-products > div.Icons_Block {
   width: 70% !important;
   display: block !important;
   float: none;
   }

   #benefits .markets-solutions-applications .img-responsive, 
   #Requirements .markets-solutions-applications .img-responsive {
   width: 100% !important;
   height: auto !important;
   margin: unset !important;
   }

   #benefits div.markets-solutions-applications h3, 
   #Requirements div.markets-solutions-applications h3, 
   div.page_stitle1 {
   margin-top: 20px !important;
   margin-bottom: 15px !important;
   }


}



/* iPad */
@Media (min-width: 768px) and (max-width: 1020px) {

   .feature-content {
   padding-left: 3% !important;
   }
   .feature-box {
   padding: 0 0 0 17% !important;
   }
   .feature-iconblue {
   width: 27% !important;
   }

}



/* 橫向智慧手機到竪立平板電腦解析度 >> 480 以下 */
@Media (max-width: 480px) { 

   
   .feature-iconblue {
   text-align: center;
   }

   .feature-iconblue img {
   text-align: center;
   max-width: 70%;
   }

   .feature-content>div>div {
   margin-top: 0px !important;
   }

   #benefits .app-products > div.Icon_Desc, 
   #Requirements .app-products > div.Icon_Desc {
   width: 100% !important;
   margin: 0 auto 10px !important;
   margin-top: 0px !important;
   }

   #benefits .markets-solutions-applications .app-block-container .app-products, 
   #Requirements .markets-solutions-applications .app-block-container .app-products {
   display: block !important;
   }

   #benefits div.app-products > div.Icons_Block, #Requirements div.app-products > div.Icons_Block {
   width: 70% !important;
   display: block !important;
   }

   #benefits .markets-solutions-applications .img-responsive, 
   #Requirements .markets-solutions-applications .img-responsive {
   width: 100% !important;
   }

   #benefits div.markets-solutions-applications h3, 
   #Requirements div.markets-solutions-applications h3, 
   div.page_stitle1 {
   margin-top: 20px !important;
   margin-bottom: 15px !important;
   }

}