/*---------------------------------- Benefits / Requirements ( PNG Icon )  -----------------------------------*/


/* Benefits > Icon Green (綠色) */
.Icon-benefits .markets-solutions-applications .img-responsive, 
#Our-Advantage-Overview .markets-solutions-applications .img-responsive, 
#benefits .markets-solutions-applications .img-responsive, 
#Requirements .markets-solutions-applications .img-responsive {
    display: inline-block;
    filter: invert(0.4) sepia(1) saturate(20) hue-rotate(54deg) brightness(1.2) !important;
    margin: 17px auto 10px auto;
    /*background-color: #fff;*/
    /*filter: drop-shadow(1px 2px 6px rgba(48, 107, 125, 0.13));*/
    transition: all 0.3s;
}




/* Benefits > 區塊高度 */
.Icon-benefits div.markets-solutions-applications, 
#benefits div.markets-solutions-applications, 
#Requirements div.markets-solutions-applications {
     /*padding: 120px 0 110px;*/
     padding: 120px 0 120px;
}





/* Benefits > Icon > Hover */
.Icon-benefits .markets-solutions-applications .img-responsive:hover, 
#benefits .markets-solutions-applications .img-responsive:hover, 
#Requirements .markets-solutions-applications .img-responsive:hover {
    /*filter: invert(1) sepia(1) saturate(1) hue-rotate(0deg) brightness(1.2);
	border: 2px solid rgba(120,181,0, 1.0);
	background-color: #78b500;*/
    transform: scale(1.1);
    transition: all 0.2s ease-in-out 0s;
}



/** 所有 ICON_App-Block 邊距 **/
.Icon-benefits .markets-solutions-applications .app-block-container .app-products, 
#benefits .markets-solutions-applications .app-block-container .app-products, 
#Requirements .markets-solutions-applications .app-block-container .app-products {
    padding: 10px 50px 30px;
    margin-top: 10px;
    margin-bottom: 45px;
    background: #fff;
}


/* Benefits > Title > h2 */
.Icon-benefits .markets-solutions-applications h2, 
#benefits .markets-solutions-applications h2, 
#Requirements .markets-solutions-applications h2 {
    margin-bottom: 50px;
}




/* Benefits > 文字 */
.Icon-benefits .markets-solutions-applications h3, 
#benefits .markets-solutions-applications h3, 
#Requirements .markets-solutions-applications h3 {
    color: #2a2b2c;
    font-weight: 500 !important;
    word-spacing: .0em;
    text-align: center !important;
    margin-bottom: 5px;
}


/* Benefits > 文字 >> H3 */
.Icon-benefits .markets-solutions-applications h3:hover, 
#benefits .markets-solutions-applications h3:hover, 
#Requirements .markets-solutions-applications h3:hover {
    color: #2a2b2c !important;
}

/* Benefits > 文字 >> H4 */
#Our-Benefits .markets-solutions-applications h4, 
.Icon-benefits .markets-solutions-applications h4, 
#benefits .markets-solutions-applications h4, 
#Requirements .markets-solutions-applications h4 {
    margin-bottom: 7%;
}



/** 所有 ICON 區塊 **/
.Icon-benefits .markets-solutions-applications .app-block-container .app-products, 
#benefits .markets-solutions-applications .app-block-container .app-products, 
#Requirements .markets-solutions-applications .app-block-container .app-products {
    filter: contrast(100%);
    filter: brightness(100%);
    margin-bottom: 20px;
    transition: all 0.2s ease-in-out 0s;
}

/** 所有 ICON 區塊_Hover **/
.Icon-benefits .markets-solutions-applications .app-block-container .app-products:hover, 
#benefits .markets-solutions-applications .app-block-container .app-products:hover, 
#Requirements .markets-solutions-applications .app-block-container .app-products:hover {
    border-radius: 15px !important;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
    background: #fff;
    z-index: 100;
    filter: contrast(130%);
    filter: brightness(110%);
    transition: all 0.2s linear 0s;
}



.Icon-benefits .markets-solutions-applications .app-block-container p, 
#Requirements .markets-solutions-applications .app-block-container p, 
#benefits .markets-solutions-applications .app-block-container p {
    font-size: 1em !important;
    line-height: 1.5 !important;
}




/*----------------- Benefits >> Dark_Theme 暗黑 (Features Highlights)  >> 開始------------*/

.Dark_Theme.Icon-benefits, 
.Icon-benefits.Dark_Theme, 
#benefits.Dark_Theme  {
    background-image: unset !important;
}

.Dark_Theme.Icon-benefits .markets-solutions-applications::before, 
.Dark_Theme.Icon-benefits .markets-top-banner::before, 
.Icon-benefits.Dark_Theme .markets-solutions-applications::before, 
.Icon-benefits.Dark_Theme .markets-top-banner::before, 
#benefits.Dark_Theme .markets-solutions-applications::before, 
#benefits.Dark_Theme .markets-top-banner::before {
    content: "";
    z-index: -1;
    position: absolute;
    height: 100%;
    width: 100%;
    background: -moz-linear-gradient(180deg, rgba(6, 23, 98, 1.0) 10%, rgba(7, 69, 118, 0) 68%, rgba(9, 65, 109, 0) 0%);
    background: -webkit-linear-gradient(180deg, rgba(6, 23, 98, 1.0) 10%, rgba(7, 69, 118, 0) 68%, rgba(9, 65, 109, 0) 0%);
    background: linear-gradient(180deg, rgba(6, 23, 98, 1.0) 10%, rgba(7, 69, 118, 0) 68%, rgba(9, 65, 109, 0) 0%);
  }


  .Dark_Theme.Icon-benefits div.markets-solutions-applications, 
  .Icon-benefits.Dark_Theme div.markets-solutions-applications, 
  #benefits.Dark_Theme div.markets-solutions-applications {
    padding: 0% 0 6% !important;
  }


  .Dark_Theme.Icon-benefits .markets-solutions-applications .container, 
  .Icon-benefits.Dark_Theme .markets-solutions-applications .container, 
  #benefits.Dark_Theme .markets-solutions-applications .container {
    padding-top: 8%;
  }

/*----------------- Benefits >> Dark_Theme 暗黑 (Features Highlights) >> 結束 ------------*/








/* =====================================================================================================
   RWD   >>  Icon > Green Icon > Green
   ===================================================================================================== */


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

    /* Benefits > Icon 總寬度 > 縮小 */
    .Icon-benefits .markets-solutions-applications .icon_Bullet, 
    #benefits .markets-solutions-applications .icon_Bullet, 
    #Requirements .markets-solutions-applications .icon_Bullet {
    width: 90%;
    float: none;
    text-align: center;
    margin: 0 auto;
    }

}



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


    /* Benefits > h3 */
    .Icon-benefits .markets-solutions-applications h3, 
    #benefits .markets-solutions-applications h3, 
    #Requirements .markets-solutions-applications h3 {
    font-size: 1.35em !important;
    line-height: 27px !important;
    height: 50px;
    min-height: 30px;
    }

    /* Benefits > 文字 >> H4 */
    #Our-Benefits .markets-solutions-applications h4, 
    .Icon-benefits .markets-solutions-applications h4, 
    #benefits .markets-solutions-applications h4, 
    #Requirements .markets-solutions-applications h4 {
    font-size: 1.1em;
    }


    /* Benefits > Title > h2 */
    .Icon-benefits .markets-solutions-applications h2, 
    #benefits .markets-solutions-applications h2, 
    #Requirements .markets-solutions-applications h2 {
    font-size: 3.5em;
    }


    /* Benefits > Icon 圖檔 > 大小 */
    .Icon-benefits .markets-solutions-applications .img-responsive, 
    #benefits .markets-solutions-applications .img-responsive, 
    #Requirements .markets-solutions-applications .img-responsive {
    width: 50%;
    height: 50%;
    }




    /* Benefits > Icon 圖檔 > 大小 */
    .Icon-benefits .markets-solutions-applications .img-responsive, 
    #benefits .markets-solutions-applications .img-responsive, 
    #Requirements .markets-solutions-applications .img-responsive {
    /*width: 50%;
    height: 50%;*/
    width: 55%;
    height: 55%;
    padding: 5px;
    }




    /** 所有 ICON 區塊_Hover **/
    .Icon-benefits .markets-solutions-applications .app-block-container .app-products:hover, 
    #benefits .markets-solutions-applications .app-block-container .app-products:hover, 
    #Requirements .markets-solutions-applications .app-block-container .app-products:hover {
    transform: scale(1.07);
    background: #fff;
    z-index: 100;
    transition: all 0.2s linear 0s;
    }


    /** 所有 ICON_App-Block 邊距 **/
    .Icon-benefits .markets-solutions-applications .app-block-container .app-products, 
    #benefits .markets-solutions-applications .app-block-container .app-products, 
    #Requirements .markets-solutions-applications .app-block-container .app-products {
    /*padding: 0 45px 30px;*/
    padding: 0 40px 30px;
    background: #fff;
    border-radius: 15px !important;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
    }


    /** Item x 4 >> 所有 ICON_App-Block 邊距 **/
    .Icon-benefits.item_x4 .markets-solutions-applications .app-block-container .app-products, 
    .item_x4.Icon-benefits .markets-solutions-applications .app-block-container .app-products, 
    #benefits.item_x4 .markets-solutions-applications .app-block-container .app-products, 
    #Requirements.item_x4 .markets-solutions-applications .app-block-container .app-products {
    padding: 10px 30px 40px !important;
    }



    .Icon-benefits .markets-solutions-applications .app-block-container p, 
    #Requirements .markets-solutions-applications .app-block-container p, 
    #benefits .markets-solutions-applications .app-block-container p {
    /*font-size: 1em !important;*/
    font-size: 0.95em !important;
    letter-spacing: 0.01em;
    line-height: 1.5 !important;
    height: 75px !important;
    min-height: 50px !important;
    display: inline-block;
    margin: 10px auto 10px !important;
    }


    /* 客製 Icon Box 底色色塊 + 無陰影 */
    .Icon-benefits.Icon-Gray-Box-NoShadow .markets-solutions-applications .app-block-container .app-products {
    background: #eef0f2;
    background: #f5f8fa;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.0);
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.0);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.0);
    transition: all 0.2s ease-in-out 0s;

    border: 1px solid #e9ebee !important;
    border-bottom: 1px solid #dddfe0 !important;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.07);
    -webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.07);
    -moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.07);
    }

    /* 客製 Icon Box 底色色塊 + 無陰影 ::hover */
    .Icon-benefits.Icon-Gray-Box-NoShadow .markets-solutions-applications .app-block-container .app-products:hover {
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
    transition: all 0.2s linear 0s;

    border: 1px solid transparent !important;
    border-bottom: 1px solid transparent !important;
    }



}



/* 寬電腦解析度 >> 1373 以下 */

@Media (max-width: 1373px) {


    .Icon-benefits .markets-solutions-applications h3, 
    #benefits .markets-solutions-applications h3, 
    #Requirements .markets-solutions-applications h3 {
        font-size: 1.2em !important;
        line-height: 23px !important;
    }


}








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

    /* Benefits > Item x 4 >> Cotainer Width */
    .item_x4.Icon-benefits .markets-solutions-applications .container, 
    .Icon-benefits.item_x4 .markets-solutions-applications .container, 
    #Requirements.item_x4 .markets-solutions-applications .container, 
    #benefits.item_x4 .markets-solutions-applications .container, 
    #Requirements.item_x4 .markets-solutions-applications .container {
        width: 1200px !important;
    }

    .Icon-benefits .markets-solutions-applications h3, 
    #benefits .markets-solutions-applications h3, 
    #Requirements .markets-solutions-applications h3 {
        font-size: 1.2em !important;
        line-height: 23px !important;
    }

}




/* 寬電腦解析度 >> 1023 以下 */

@Media (max-width: 1023px) {

    .Icon-benefits .markets-solutions-applications h3, 
    #benefits .markets-solutions-applications h3, 
    #Requirements .markets-solutions-applications h3 {
        font-size: 1.2em !important;
        line-height: 25px !important;
        text-align: center;
        height: auto !important;
        min-height: unset !important;
        margin-bottom: 10px;
    }

    .Icon-benefits .markets-solutions-applications .img-responsive, 
    #benefits .markets-solutions-applications .img-responsive, 
    #Requirements .markets-solutions-applications .img-responsive {
        width: 50%;
        height: 50%;
    }

    .Icon-benefits .markets-solutions-applications .app-block-container .app-products, 
    #benefits .markets-solutions-applications .app-block-container .app-products, 
    #Requirements .markets-solutions-applications .app-block-container .app-products {
        /*background: transparent !important;*/
        box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.15);
        border-radius: 10px !important;
        padding: 0 30px 30px;
        width: 70% !important;
        margin: 0 auto 30px !important;
    }

    .Icon-benefits .markets-solutions-applications .app-block-container .app-products:hover, 
    #benefits .markets-solutions-applications .app-block-container .app-products:hover, 
    #Requirements .markets-solutions-applications .app-block-container .app-products:hover {
        border-radius: 0px !important;
        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0) !important;
        -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0);
        -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0);
    }


}




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

    /* Benefits > Item x 4 >> Cotainer Width */
    .item_x4.Icon-benefits .markets-solutions-applications .container, 
    .Icon-benefits.item_x4 .markets-solutions-applications .container, 
    #benefits.item_x4 .markets-solutions-applications .container, 
    #Requirements.item_x4 .markets-solutions-applications .container, 
    #benefits.item_x4 .markets-solutions-applications .container, 
    #Requirements.item_x4 .markets-solutions-applications .container {
    width: 1400px !important;
    }
  
}




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

    /* Benefits > Item x 4 >> Cotainer Width */
    .item_x4.Icon-benefits .markets-solutions-applications .container, 
    .Icon-benefits.item_x4 .markets-solutions-applications .container, 
    #benefits.item_x4 .markets-solutions-applications .container, 
    #Requirements.item_x4 .markets-solutions-applications .container, 
    #benefits.item_x4 .markets-solutions-applications .container, 
    #Requirements.item_x4 .markets-solutions-applications .container {
        width: 1400px;
    }

}


/* 橫向智慧手機到竪立平板電腦解析度 >> 1300 以上 */
@Media (min-width: 1300px) { 
	
	/* Benefits/ Requirements x 4 > container */
    .Icon-benefits #item_x4.markets-solutions-applications .container, 
    #benefits #item_x4.markets-solutions-applications .container, 
    #Requirements #item_x4.markets-solutions-applications .container, 
    #benefits.item_x4 .markets-solutions-applications .container, 
    #Requirements.item_x4 .markets-solutions-applications .container, 
    #benefits .markets-solutions-applications .container.item_x4, 
    #Requirements .markets-solutions-applications .container.item_x4 {
	width: 1300px;
    }

    /* Benefits > Item x 2 & 3 >> 加大寬度 >> Cotainer Width */
    .item_x3.Icon-benefits .markets-solutions-applications .container, 
    .item_x3.Icon-benefits .markets-solutions-applications .container, 
    .Icon-benefits.item_x3 .markets-solutions-applications .container, 
    #benefits.item_x3 .markets-solutions-applications .container, 
    #Requirements.item_x3 .markets-solutions-applications .container, 
    #benefits.item_x3 .markets-solutions-applications .container, 
    #Requirements.item_x3 .markets-solutions-applications .container {
    width: 1200px !important;
    }
    
}



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


    .Icon-benefits .markets-solutions-applications .img-responsive, 
    #benefits .markets-solutions-applications .img-responsive, 
    #Requirements .markets-solutions-applications .img-responsive {
        width: 50%;
        height: 50%;
    }

    .item_x4.Icon-benefits .markets-solutions-applications .img-responsive, 
    .Icon-benefits.item_x4 .markets-solutions-applications .img-responsive, 
    #benefits.item_x4 .markets-solutions-applications .img-responsive, 
    #Requirements.item_x4 .markets-solutions-applications .img-responsive {
        width: 60%;
        height: 60%;
    }

}




/* 中螢幕 */
@Media (min-width: 975px) and (max-width: 1069px) {

    .Icon-benefits .markets-solutions-applications .img-responsive, 
    #benefits .markets-solutions-applications .img-responsive, 
    #Requirements .markets-solutions-applications .img-responsive {
        width: 50%;
        height: 50%;
    }

    .Icon-benefits .markets-solutions-applications h3, 
    #benefits .markets-solutions-applications h3, 
    #Requirements .markets-solutions-applications h3 {
        height: unset !important;
        max-height: unset !important;
        margin-bottom: 10px;
    }

}




/* 小螢幕 >> 974 以下 */
@Media (max-width: 974px) {

    .Icon-benefits .markets-solutions-applications .img-responsive, 
    #benefits .markets-solutions-applications .img-responsive, 
    #Requirements .markets-solutions-applications .img-responsive {
        width: 30% !important;
        height: 30% !important;
        padding: 1.5%;
        margin-bottom: 30px;
    }

}




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

    .Icon-benefits .markets-solutions-applications .img-responsive, 
    #benefits .markets-solutions-applications .img-responsive, 
    #Requirements .markets-solutions-applications .img-responsive {
        width: 30% !important;
        height: 30% !important;
        padding: 1.5%;
        margin-bottom: 30px;
        box-shadow: unset !important;
        -webkit-box-shadow: unset !important;
        -moz-box-shadow: unset !important;
    }



}




/* 比手機大-比平板小-解析度 */
@Media (min-width: 481px) and (max-width: 600px) {

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

    .Icon-benefits .markets-solutions-applications .app-block-container .app-products:hover, 
    #benefits .markets-solutions-applications .app-block-container .app-products:hover, 
    #Requirements .markets-solutions-applications .app-block-container .app-products:hover {
        box-shadow: unset !important;
        -webkit-box-shadow: unset !important;
        -moz-box-shadow: unset !important;
    }

    .Icon-benefits .markets-solutions-applications .app-block-container .app-products, 
    #benefits .markets-solutions-applications .app-block-container .app-products, 
    #Requirements .markets-solutions-applications .app-block-container .app-products {
        width: unset !important;
        margin: 0 auto 50px !important;
    }

}




/* iPhone 6 & 6 plus > 4.7吋--手機及其他更小解析度 */

@Media (min-width: 373px) and (max-width: 414px) {
    .Icon-benefits .markets-solutions-applications .img-responsive, 
    #benefits .markets-solutions-applications .img-responsive, 
    #Requirements .markets-solutions-applications .img-responsive {
        width: 60% !important;
        height: 60% !important;
    }



    .Icon-benefits .markets-solutions-applications .app-block-container .app-products:hover, 
    #benefits .markets-solutions-applications .app-block-container .app-products:hover, 
    #Requirements .markets-solutions-applications .app-block-container .app-products:hover {
        box-shadow: unset !important;
        -webkit-box-shadow: unset !important;
        -moz-box-shadow: unset !important;
    }



    .Icon-benefits .markets-solutions-applications h3, 
    #benefits .markets-solutions-applications h3, 
    #Requirements .markets-solutions-applications h3 {
        height: unset !important;
        max-height: unset !important;
    }


    .Icon-benefits .markets-solutions-applications .app-block-container .app-products, 
    #benefits .markets-solutions-applications .app-block-container .app-products, 
    #Requirements .markets-solutions-applications .app-block-container .app-products {
        padding: 10px 20px 20px;
    }


}





/* 橫向智慧手機及其他更小解析度 */
@Media (max-width: 480px) {

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

    .Icon-benefits .markets-solutions-applications .app-block-container .app-products, 
    #benefits .markets-solutions-applications .app-block-container .app-products, 
    #Requirements .markets-solutions-applications .app-block-container .app-products {
        padding: 10px 20px 20px;
        width: unset !important;
        margin: 0 auto 50px !important;
    }
    

    .Icon-benefits .markets-solutions-applications .app-block-container .app-products:hover,
    #benefits .markets-solutions-applications .app-block-container .app-products:hover, 
    #Requirements .markets-solutions-applications .app-block-container .app-products:hover {
        box-shadow: unset !important;
        -webkit-box-shadow: unset !important;
        -moz-box-shadow: unset !important;
    }

    .Icon-benefits .markets-solutions-applications h3, 
    #benefits .markets-solutions-applications h3, 
    #Requirements .markets-solutions-applications h3 {
        height: unset !important;
        max-height: unset !important;
    }




}




@media (max-width: 460px) {

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

    .Icon-benefits .markets-solutions-applications .app-block-container .app-products,
    #benefits .markets-solutions-applications .app-block-container .app-products, 
    #Requirements .markets-solutions-applications .app-block-container .app-products {
        padding: 10px 20px 20px;
        width: unset !important;
        margin: 0 auto 50px !important;
    }
    

    .Icon-benefits .markets-solutions-applications .app-block-container .app-products:hover, 
    #benefits .markets-solutions-applications .app-block-container .app-products:hover, 
    #Requirements .markets-solutions-applications .app-block-container .app-products:hover {
        box-shadow: unset !important;
        -webkit-box-shadow: unset !important;
        -moz-box-shadow: unset !important;
    }

    .Icon-benefits .markets-solutions-applications h3, 
    #benefits .markets-solutions-applications h3, 
    #Requirements .markets-solutions-applications h3 {
        height: unset !important;
        max-height: unset !important;
    }

    
}