/* =====================================================================================================
     * SIcon & 外層 > 一般定義 
===================================================================================================== */

/* Sicon >> Icon 基本設定 */
.app-products .Sicon {
    display: inline-block;
    width: 100%;
    height: 100%;
    background-size: cover;
    mask-size: cover !important;
    background: #666;
    /*transform: scale(0.6);*/
    transform: scale(1.0);
}

/* Sicon 加了外區塊 >> Icon 基本設定 */
.app-products .Icon_OutBox .Sicon, 
.app-products .Icon_Outline .Sicon {
    transform: scale(0.8);
}


/* Block 外框(寬高) >> Sicon */
.app-products #Icon_Block {
    display: block;
    width: 130px;
    height: 130px;
    background: #fff;
    margin: 0 auto 5px;
    transition: all 0.3s;
}

/* Block 外框:Hover >> Sicon */
.app-products #Icon_Block:hover {
    transform: scale(1.1);
    transition: all 0.2s ease-in-out 0s;
}


/* 外層 > 一般 Icon > 底部間距 */
.app-products #Icon_Block .Sicon {
    margin: 0 auto;
}


/* 外層 > 外框 > 底部間距 */
.app-products #Icon_Block.Icon_Outline, 
.app-products #Icon_Block.Icon_OutBox {
    margin: 0 auto 20px;
}


/* 外層 > 一般 > transition */
.app-products #Icon_Block .Sicon, 
.app-products #Icon_Block.Icon_Outline, 
.app-products #Icon_Block.Icon_OutBox {
    transition: all 0.3s;
}


/* 外層 > 一般:Hover > transition */
.app-products #Icon_Block .Sicon:hover, 
.app-products #Icon_Block:hover .Sicon, 
.app-products #Icon_Block.Icon_Outline:hover, 
.app-products #Icon_Block.Icon_OutBox:hover {
    transition: all 0.2s ease-in-out 0s;
}







/* =====================================================================================================
     * SIcon > Shape (圓型 / 方型)
===================================================================================================== */


/* 圓型 >> 外框(Outline)  */
.app-products .Shape_Circle, 
.app-products #Icon_Block.Icon_Outline.Shape_Circle {
    border-radius: 300px;
}


/* 方型 >> 外框(Outline)  */
.app-products .Shape_Square, 
.app-products #Icon_Block.Icon_Outline.Shape_Square {
    border-radius: 10px;
}








/* =====================================================================================================
     * SIcon > Outline / OutBox (框線物件/ 實心物件)
===================================================================================================== */



/* 外層 > 一般設定 */
/*.Icon_Outline, 
#Icon_Block.Icon_Outline, */
.Icon_OutBox, 
#Icon_Block.Icon_OutBox {
    filter: drop-shadow(1px 2px 4px rgba(39, 46, 48, 0.15));
}



/************* SIcon > OutLine (框線物件) ***********/


/* 框線物件(Outline) > 一般(灰) */
.Icon_Outline, 
#Icon_Block.Icon_Outline {
    border: 2px solid #666;
}


/* 框線物件(Outline):Hover > 一般(灰) */
.Icon_Outline:hover, 
#Icon_Block.Icon_Outline:hover {
    border: 2px solid #999;
}





/************* SIcon > OutBox (實心物件) ***********/

/* 實心物件(OutBox) > 一般(灰) */
.Icon_OutBox, 
#Icon_Block.Icon_OutBox {

}


/* 實心物件(OutBox):Hover > 一般(灰) */
.Icon_OutBox:hover, 
#Icon_Block.Icon_OutBox:hover {

}
















/* =====================================================================================================
     * SIcon > Color (色彩應用)
===================================================================================================== */



/************* Sicon >> Color >> Blue (ATEN 藍) ***********/

/* Icon > ATEN Blue */
.Sicon-Ablue, 
.Sicon-Ablue .Sicon, 
#Icon_Block.Sicon-Ablue .Sicon {
    background: #074576;
}

/* Icon > ATEN Blue : Hover */
.Sicon-Ablue:hover, 
.Sicon-Ablue .Sicon:hover, 
#Icon_Block.Sicon-Ablue:hover .Sicon {
    background: #017ab1;
}


/* 外框(Outline) > ATEN Blue */
#Icon_Block.Icon_Outline.Sicon-Ablue {
    border: 2px solid #074576;
}

/* 外框(Outline):Hover > ATEN Blue */
#Icon_Block.Icon_Outline.Sicon-Ablue:hover {
    border: 2px solid #017ab1;
}





/*********** Sicon >> Color >> Light Blue (ATEN 淺藍) ***********/

/* Icon > Light Blue (ATEN 淺藍) */
.Sicon-Lblue, 
.Sicon-Lblue .Sicon, 
#Icon_Block.Sicon-Lblue .Sicon {
    background: #017ab1;
}

/* Icon > Light Blue (ATEN 淺藍) : Hover */
.Sicon-Lblue:hover, 
.Sicon-Lblue .Sicon:hover, 
#Icon_Block.Sicon-Lblue:hover .Sicon {
    background: #00b8ee;
}

/* 外框 > Light Blue (ATEN 淺藍) */
#Icon_Block.Icon_Outline.Sicon-Lblue {
    border: 2px solid #017ab1;
}

/* 外框:Hover > Light Blue (ATEN 淺藍) */
#Icon_Block.Icon_Outline.Sicon-Lblue:hover {
    border: 2px solid #00b8ee;
}



/*********** Sicon >> Color >> Green (綠) ***********/

/* Icon > Green */
.Sicon-Green, 
.Sicon-Green .Sicon, 
#Icon_Block.Sicon-Green .Sicon {
    background: #87bf3c;
}

/* Icon > Green : Hover */
.Sicon-Green:hover, 
.Sicon-Green .Sicon:hover, 
#Icon_Block.Sicon-Green:hover .Sicon {
    background: rgba(159, 226, 40, 1.0);
}


/* 外框 > Green */
#Icon_Block.Icon_Outline.Sicon-Green {
    border: 2px solid #87bf3c;
}

/* 外框:Hover > Green */
#Icon_Block.Icon_Outline.Sicon-Green:hover {
    border: 2px solid rgba(159, 226, 40, 1.0);
}



/* 實心 > Green */
#Icon_Block.Icon_OutBox.Sicon-Green .Sicon {
    background: #fff;
}

/* 實心:Hover > Green */
#Icon_Block.Icon_OutBox.Sicon-Green:hover .Sicon {
    background: #fff;
}



/* Block 實心 >> Green */
#Icon_Block.Icon_OutBox.Sicon-Green {
    /*background: #87bf3c;*/
    background: #8ec21f;
}

/* Block 實心 >> Green:Hover */
#Icon_Block.Icon_OutBox.Sicon-Green:hover {
    background: rgba(159, 226, 40, 1.0);
}





/* =====================================================================================================
     SIcon > Image Library
===================================================================================================== */

.Sicon-Test {
    mask: url(https://assets.aten.com/webpage/shared/CMS_Libraries/Images/Icon/SVG/icon-bike-black-3.svg);
    background-image: url(https://assets.aten.com/webpage/shared/CMS_Libraries/Images/Icon/SVG/icon-bike-black-3.svg);
}

.Sicon-1080P {
    mask: url(https://assets.aten.com/webpage/shared/CMS_Libraries/Images/Icon/SVG/Icon_1080P-3.svg);
    background-image: url(https://assets.aten.com/webpage/shared/CMS_Libraries/Images/Icon/SVG/Icon_1080P-3.svg);
}

.Sicon-2Plantform {
    mask: url(https://assets.aten.com/webpage/shared/CMS_Libraries/Images/Icon/SVG/Icon_2Plantform.svg);
    background-image: url(https://assets.aten.com/webpage/shared/CMS_Libraries/Images/Icon/SVG/Icon_2Plantform.svg);
}

.Sicon-Direct-Streaming {
    mask: url(https://assets.aten.com/webpage/shared/CMS_Libraries/Images/Icon/SVG/Icon_Direct-Streaming.svg);
    background-image: url(https://assets.aten.com/webpage/shared/CMS_Libraries/Images/Icon/SVG/Icon_Direct-Streaming.svg);
}

.Sicon-HDMI-Port {
    mask: url(https://assets.aten.com/webpage/shared/CMS_Libraries/Images/Icon/SVG/Icon_HDMI-Port.svg);
    background-image: url(https://assets.aten.com/webpage/shared/CMS_Libraries/Images/Icon/SVG/Icon_HDMI-Port.svg);
}

.Sicon-Intuitive-Control {
    mask: url(https://assets.aten.com/webpage/shared/CMS_Libraries/Images/Icon/SVG/Icon_Intuitive-Control.svg);
    background-image: url(https://assets.aten.com/webpage/shared/CMS_Libraries/Images/Icon/SVG/Icon_Intuitive-Control.svg);
}

.Sicon-Plug-Play {
    mask: url(https://assets.aten.com/webpage/shared/CMS_Libraries/Images/Icon/SVG/Icon_Plug-Play-4.svg);
    background-image: url(https://assets.aten.com/webpage/shared/CMS_Libraries/Images/Icon/SVG/Icon_Plug-Play-4.svg);
}

.Sicon-Record {
    mask: url(https://assets.aten.com/webpage/shared/CMS_Libraries/Images/Icon/SVG/Icon_Record-3.svg);
    background-image: url(https://assets.aten.com/webpage/shared/CMS_Libraries/Images/Icon/SVG/Icon_Record-3.svg);
}

.Sicon-Scene-Switch {
    mask: url(https://assets.aten.com/webpage/shared/CMS_Libraries/Images/Icon/SVG/Icon_Scene-Switch-7.svg);
    background-image: url(https://assets.aten.com/webpage/shared/CMS_Libraries/Images/Icon/SVG/Icon_Scene-Switch-7.svg);
}

.icon-bike {
    mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bike-black.svg);
}








/* =====================================================================================================
     Benefits Icon (Features Icon) >> 不變色 (.No-Change-Color)
===================================================================================================== */

/* Benefits > Icon 不變色 (.No-Change-Color) */
.Icon-benefits.No-Change-Color .markets-solutions-applications .feature-iconblue img, 
.No-Change-Color.Icon-benefits .markets-solutions-applications .feature-iconblue img, 
#Our-Advantage-Overview.No-Change-Color .markets-solutions-applications .feature-iconblue img, 
#benefits.No-Change-Color .markets-solutions-applications .feature-iconblue img, 
#Requirements.No-Change-Color .markets-solutions-applications .feature-iconblue img, 
.Icon-benefits.No-Change-Color .markets-solutions-applications .img-responsive, 
.No-Change-Color.Icon-benefits .markets-solutions-applications .img-responsive, 
#Our-Advantage-Overview.No-Change-Color .markets-solutions-applications .img-responsive, 
#benefits.No-Change-Color .markets-solutions-applications .img-responsive, 
#Requirements.No-Change-Color .markets-solutions-applications .img-responsive {
    filter: invert(0) sepia(0) saturate(1) hue-rotate(0deg) brightness(1) !important;
}






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



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

}




/* 寬電腦解析度 >> 1023 以下 */
@Media (max-width: 1023px) { 



}



/* 平板電腦、橫向手機和一般桌機解析度 */
@Media (min-width: 768px) and (max-width: 979px) { 
	   
    #Icon_Block {
        width: 300px;
        height: 300px;
        margin: 0 auto 30px;
    }
   
}



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

    #Icon_Block {
        width: 300px;
        height: 300px;
        margin: 0 auto 30px;
    }

}




/* 比手機大-比平板小-解析度 */
@Media (min-width: 481px) and (max-width: 600px) { 
    
    #Icon_Block {
        width: 150px;
        height: 150px;
        margin: 0 auto 30px;
    }
	
}




/* iPhone 6 & 6 plus > 4.7吋--手機及其他更小解析度 */
@Media (min-width: 373px) and (max-width: 414px) { 

        #Icon_Block {
            width: 150px;
            height: 150px;
            margin: 0 auto 30px;
        }

}



/* 橫向智慧手機及其他更小解析度 */
@Media (max-width: 480px) { 
	
    
    #Icon_Block {
        width: 150px;
        height: 150px;
        margin: 0 auto 30px;
    }
	

	
}





@media (max-width: 460px){
	


}