/* ========================================================================================================================
	  Parallax_Banner 
======================================================================================================================== */

/* 解決 Rich Content 背景圖因 sectiion_blur 的動態造成遲滯感 

   #parallax_banner_scro_bg {
	   -skrollr-animation-name: sk-Banner_BG;
   }
	   
   @-skrollr-keyframes sk-Banner_BG {
   
	   top-top {
		   transform: translateY(0px);
		   filter: blur(100px);
		   opacity: 0;
	   }
   
	   bottom-bottom {
		   transform: translateY(300px)
		   filter: blur(0px);
		   opacity: 1;
	   }
   
	   
   }
   */

   

/* 遮住 Button > 文字區 > Image */
#parallax_banner.Pointer-Events_None .markets-top-banner.richcontent div[class*="text-block"] img.img-responsive {
	pointer-events: none !important;
}



/* 產品跳出 RC_BG >> 用 jave 將產品區塊移除,再新生成產品區塊 */
.parallax_product_section {
    z-index: 999;
    background: none;
    position: relative;
    top: -1000px;
    height: 0px;
}


/* BG for parallax_banner */
#parallax_banner, 
#parallax_banner .markets-solutions-applications {
    background: #08375e;
}



/* parallax banner >> Title 藍框框 */
#parallax_banner.Brackets .wording_block::before, 
#parallax_banner.Brackets .wording_block::after {
    content: '';
    display: block;
    /*height: 105%;*/
    height: 92%;
    width: 30px;
    border: 10px solid rgba(10, 211, 235, 0.3);
    position: absolute;
    /*top: 15px;*/
    top: 6px;
}



/* parallax banner >> Title 藍框框 */
.Brackets .wording_block::before {
    border-radius: 15px 0 0 15px;
    left: 30px;
    border-right: 0 !important;
}


/* parallax banner >> Title 藍框框 */
.Brackets .wording_block::after {
    border-radius: 0 15px 15px 0;
    right: 30px;
    border-left: 0 !important;
}

#parallax_banner .markets-solutions-applications, 
#parallax_hero_image .markets-solutions-applications, 
#youtube_banner .markets-solutions-applications {
    padding: 0;
}


/* Banner > Title (parallax_banner 標題) */
.banner__caption h1, #parallax_banner .Full_Width_Rich_Content h3, 
#parallax_banner .Rich_Content h3 {
    /*font-family: 'Saira Semi Condensed', Roboto, sans-serif !important;*/
    color: #fff;
    font-weight: 400;
    /*letter-spacing: -1px;*/
    letter-spacing: -0.01em;
    /*text-shadow: 0px 0px 17px rgba(0, 0, 0, 0.5);*/
    text-shadow: 0px 0px 17px rgba(0, 0, 0, 0.7);
}


/* Banner > SubTitle (parallax_banner 副標題) */
#parallax_banner .Full_Width_Rich_Content h4, 
#parallax_banner .Rich_Content h4 {
    /*color:#0ff;*/
    opacity: 0.8 !important;
    letter-spacing: -0.01em;
    text-shadow: 0px 0px 17px rgba(0, 0, 0, 0.7);
}


/* Banner >> Red Play Icon >> Span 
#parallax_banner .Full_Width_Rich_Content h3 span::after, 
#parallax_banner .Rich_Content h3 span::after {
    content: "\f04b";
    color: #dc1919;
    font-family: "Font Awesome 5 Free";
    font-size: 0.5em;
    font-weight: 900;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    padding-left: 28px;
    top: -9px;
    position: relative;
}
*/


/* 針對 Rich Content 的視差滾輪 >> parallax */
#parallax_banner .markets-top-banner.richcontent .text-block {
}


#parallax_banner .RC_BG {
    position: relative;
    background-position: center 50%;
    background-repeat: no-repeat;
    background-size: cover;
    /*background-attachment: fixed;*/
    /* banner scroll >> No delay */
    transition-duration: 0s !important;
    animation-duration: 0s !important;
    transition-delay: 0s !important;
    animation-delay: 0s !important;
    /* firefox */
    -moz-transition-duration: 0s !important;
    -moz-animation-duration: 0s !important;
    -moz-transition-delay: 0s !important;
    -moz-animation-delay: 0s !important;
}


/* Banner Product 圖檔 > BG */
#parallax_product .RC_BG {
    background-position: center bottom !important;
}



/* Banner Product 圖檔 > 陰影 */
#parallax_product .markets-top-banner.richcontent .text_block_top-center img.img-responsive, 
#parallax_banner .markets-top-banner.richcontent .text_block_top-center img.img-responsive, 
#parallax_banner .markets-top-banner.richcontent .text_block_bottom-center img.img-responsive, 
#parallax_banner .markets-top-banner.richcontent .text_block_top-left img.img-responsive {
    position: relative;
    z-index: 99;
    filter: drop-shadow(1px -10px 15px rgba(0, 9, 35, 0.1));
    /*filter: drop-shadow(-1px -10px 20px rgba(0,9,35,0.6));*/
}


#parallax_product {
    /*background: unset !important;*/
    background-color: #fff !important;
}


#parallax_banner .Full_Width_Rich_Content h3 span, 
#parallax_banner .Rich_Content h3 span {
    /*font-family: 'Saira Semi Condensed',Roboto,sans-serif !important;*/
    color: #fff;
    font-weight: 500;
    /*letter-spacing: -1px;*/
    letter-spacing: -0.02em;
    text-shadow: 0px 0px 17px rgba(0, 0, 0, 0.7);
}



/* #parallax_banner >> h3.Compact-Title (緊湊的標題) */
#parallax_banner.Compact-Title .markets-top-banner.richcontent .text_block_top-center h3, 
#parallax_banner.Compact-Title .markets-top-banner.richcontent .text_block_bottom-center h3, 
#parallax_banner.Compact-Title .Full_Width_Rich_Content h3, 
#parallax_banner.Compact-Title .Rich_Content h3 {
    line-height: 1.1em !important;
}


/* Banner >> Subtitle (副標)*/
#parallax_banner .Full_Width_Rich_Content h4, 
#parallax_banner .Rich_Content h4 {
    /*font-family: 'Saira Semi Condensed',Roboto,sans-serif !important;*/
    font-weight: 300;
    opacity: 1.0;
    text-shadow: 0px 0px 17px rgba(0, 0, 0, 0.8);
}


/* #parallax_banner >> 距離下一層高度(任何 id 名稱)  */
#parallax_banner.PBottom_High + section {
    margin-top: 2%;
}






/* 避免 Banner 圖片區太大 >> 蓋住 Button 區塊以致無法點選 */
#parallax_banner .markets-top-banner.richcontent .text-block .image_block img {
    /*pointer-events: none;*/
}


/* Ivan 後台新增第二顆 Button 修正*/
#parallax_banner .markets-top-banner.richcontent a.btn.btn-primary:last-child {
 /*transform: scale(1.0) !important;
 transform: unset !important;*/
 transform: none;
}


















/* =====================================================================================================
                                 RWD   >>  parallax_banner
   ===================================================================================================== */






@media (min-width: 980px) {}






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


    #parallax_banner .RC_BG {
    /*height: 1000px;*/

    /* 兩邊等寬 
    clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%);*/

    /* 左窄右寬 
    clip-path: polygon(0 0, 100% 0, 100% 58%, 39% 100%, 0 75%);*/

    }



    /* 針對 Bannert (文字左右) > Rich Content 區塊的視差滾輪 */
    #parallax_banner .markets-top-banner.richcontent .text-block.text_block_top-left, 
    #parallax_banner .markets-top-banner.richcontent .text-block.text_block_top-Right {
    padding-top: 110px !important;
    padding-bottom: 100px !important;
    }


    /* 針對 Bannert (文字上下) > Rich Content 區塊的視差滾輪 */
    #parallax_banner .markets-top-banner.richcontent .text-block.text_block_top-center, 
    #parallax_banner .markets-top-banner.richcontent .text-block.text_block_bottom-center {
    padding-top: 170px !important;
    padding-bottom: 160px !important;
    }




    /* Parallax Banner 中的 text-block 垂直居中 (包含圖文左右上下) */
    #parallax_banner.Vertical-Align .markets-top-banner.richcontent .text-block {
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding-top: unset !important;
    padding-bottom: unset !important;
    }

    /* Parallax Banner 僅 text_block_top-center/ Bottom 垂直居中 (僅含圖文上下) */
    #parallax_banner.Vertical-Align .markets-top-banner.richcontent .text-block.text_block_top-center, 
    #parallax_banner.Vertical-Align .markets-top-banner.richcontent .text-block.text_block_bottom-center {
    justify-content: center; /* 水平置中 */
    flex-direction: column; /* 垂直排列 (每一個單物件分不同行垂直排列) */
    }

    /* 高度要一樣 (不一樣銜接會出錯)*/
    #parallax_banner.Vertical-Align .markets-top-banner::before, 
    #parallax_banner.Vertical-Align .RC_BG, 
    #parallax_banner.Vertical-Align div.RC_BG, 
    #parallax_banner.Vertical-Align .markets-top-banner.richcontent div[class*="text-block"] {
    height: 93vh;

    height: 75vh;/* 要給基本高度 >> 因為 flex, 所以 padding 都設為 0 */
    }

    /* Parallax Banner 中的 text-block/text_block_top-center 垂直居中 */
    #parallax_banner.Vertical-Align .markets-top-banner.richcontent .text-block.text_block_top-center .wording_block, 
    #parallax_banner.Vertical-Align .markets-top-banner.richcontent .text-block.text_block_bottom-center .wording_block, 
    #parallax_banner.Vertical-Align .markets-top-banner.richcontent .text-block .wording_block {
    margin: 0 auto !important;
    }


    

    /* Banner 透明圖檔 > 大小 / 位置 */
    #parallax_banner .markets-top-banner.richcontent .text_block_top-center img.img-responsive, 
    #parallax_banner .markets-top-banner.richcontent .text_block_bottom-center img.img-responsive {
    width: 60% !important;
    /* margin: 0 auto -170px auto; */
    margin: 0 auto;
    }	

    /* Banner > Product 圖檔(有 Mask 使用) > 大小 / 位置 
    #parallax_product .markets-top-banner.richcontent .text_block_top-center img.img-responsive {
    width: 60% !important;
    margin: -200px auto -100px auto;
    }
    */

    /* Banner > Product 底圖大小位置 
    #parallax_product .Full_Width_Rich_Content .markets-top-banner.richcontent .text_block_top-center {
    padding: 50px 100px 40px !important;
    }
    */

    /* Banner > Product Image > Left & Right */
    #parallax_banner .markets-top-banner.richcontent .text_block_top-left img.img-responsive, 
    #parallax_banner .markets-top-banner.richcontent .text_block_top-right img.img-responsive {
    transform: scale(1.6);
    top: 200px;
    }

    /* Banner > Product Image > Left */
    #parallax_banner .markets-top-banner.richcontent .text_block_top-left img.img-responsive {
    right: -250px; 
    }

    /* Banner > Product Image > Right */
    #parallax_banner .markets-top-banner.richcontent .text_block_top-right img.img-responsive {
    right: -250px; 
    }

    /* Banner > Product Image > Top & Bottom Center */
    #parallax_banner .markets-top-banner.richcontent .text_block_top-center img.img-responsive, 
    #parallax_banner .markets-top-banner.richcontent .text_block_bottom-center img.img-responsive {
    transform: scale(1);
    right: 0px;
    top: 0px;
    }


    /* Banner > Title (parallax_banner 標題) */
    .banner__caption h1, 
    #parallax_banner .Full_Width_Rich_Content h3, 
    #parallax_banner .Rich_Content h3 {
    /*font-size: 60px !important;*/
    /*font-size: 55px !important;*/
    font-size: 62px !important;
    line-height: 1.2em;
    }

    #parallax_banner .Full_Width_Rich_Content h3 span, 
    #parallax_banner .Rich_Content h3 span {
    /*font-size: 80px;*/
    font-size: 54px;
    line-height: 1.2em;
    }

    #parallax_banner .Full_Width_Rich_Content h3 span sup, 
    #parallax_banner .Rich_Content h3 span sup {
    font-size: 20px;
    top: -51px;
    margin-right: -20px;
    }


    /* Banner >> Subtitle (副標)*/
    #parallax_banner .Full_Width_Rich_Content h4, 
    #parallax_banner .Rich_Content h4 {
    /*font-size: 2em;*/
    font-size: 1.8em;
    font-weight: 300;
    line-height: 1.4em;
    padding-bottom: 40px;
    /*opacity: 0.85;*/
    opacity: 1.0;
    text-shadow: 0px 0px 17px rgba(0,0,0,0.8);
    }


}



/* 1900 以上 */
@media (min-width: 1900px) {}





/* 橫向智慧手機到竪立平板電腦解析度 >> 1500 以上 */
@Media (min-width: 1500px) { 
	   
    .banner__caption h1, #parallax_banner .Full_Width_Rich_Content h3, 
    #parallax_banner .Rich_Content h3 {
    font-size: 58px !important;
    line-height: 1.2em !important;
    }
  
}





/* 大螢幕 */
@Media (min-width: 1200px) and (max-width: 1920px) { 

    /* Banner > Product Image > Left & Right */
    #parallax_banner .markets-top-banner.richcontent .text_block_top-left img.img-responsive, 
    #parallax_banner .markets-top-banner.richcontent .text_block_top-right img.img-responsive {
    transform: scale(1.75) !important;
    top: 130px !important;
    }

    /* Banner > Product Image > Left */
    #parallax_banner .markets-top-banner.richcontent .text_block_top-left img.img-responsive {
    right: -150px !important;
    }

    /* Banner > Product Image > Right */ 
    #parallax_banner .markets-top-banner.richcontent .text_block_top-right img.img-responsive {
    right: -150px !important;
    }

}


/* 大螢幕 */
@Media (min-width: 1200px) and (max-width: 1904px) { 
	   
    #parallax_banner .Full_Width_Rich_Content .text_block_top-left .wording_block, 
    #parallax_banner .Full_Width_Rich_Content .text_block_top-right .wording_block {
    width: 83%;
    }
    
}





/* 寬螢幕 */
@Media (min-width: 1400px) and (max-width: 1500px)  { 
	   
    /* Banner > Product Image > Left & Right */
    #parallax_banner .markets-top-banner.richcontent .text_block_top-left img.img-responsive, 
    #parallax_banner .markets-top-banner.richcontent .text_block_top-right img.img-responsive {
    transform: scale(1.7) !important;
    top: 150px !important;
    }

    /* Banner > Product Image > Left */
    #parallax_banner .markets-top-banner.richcontent .text_block_top-left img.img-responsive {
    right: -170px !important;
    }

    /* Banner > Product Image > Right */ 
    #parallax_banner .markets-top-banner.richcontent .text_block_top-right img.img-responsive {
    right: -170px !important;
    }

    
}




/* 大螢幕 */
@Media (min-width: 1905px) and (max-width: 2100px) { 
    
    #parallax_banner .Full_Width_Rich_Content .text_block_top-left .wording_block, 
    #parallax_banner .Full_Width_Rich_Content .text_block_top-right .wording_block {
    width: 65%;
    }

    /* Banner > Product Image > Left & Right */
    #parallax_banner .markets-top-banner.richcontent .text_block_top-left img.img-responsive, 
    #parallax_banner .markets-top-banner.richcontent .text_block_top-right img.img-responsive {
    transform: scale(1.5) !important;
    top: 160px !important;
    }

    /* Banner > Product Image > Left */
    #parallax_banner .markets-top-banner.richcontent .text_block_top-left img.img-responsive {
    right: -150px !important;
    }

    /* Banner > Product Image > Right */
    #parallax_banner .markets-top-banner.richcontent .text_block_top-right img.img-responsive {
    right: -150px !important;
    }

}






/* Bowei 筆電寬螢幕 */
@Media (min-width: 1281px) and (max-width: 1336px)  { 
	   
    #parallax_banner .Full_Width_Rich_Content .text_block_top-left .wording_block, 
    #parallax_banner .Full_Width_Rich_Content .text_block_top-right .wording_block {
    width: 85%;
    }	


    #parallax_banner .Full_Width_Rich_Content h4, 
    #parallax_banner .Rich_Content h4 {
    font-size: 1.6em;
    }
    
    #parallax_banner .markets-top-banner.richcontent .golink.btn.btn-primary {
    width: unset !important;
    }
    
    
    /* Banner > Product Image > Left & Right */
    #parallax_banner .markets-top-banner.richcontent .text_block_top-left img.img-responsive, 
    #parallax_banner .markets-top-banner.richcontent .text_block_top-right img.img-responsive {
    transform: scale(1.75) !important;
    top: 130px !important;
    }

    /* Banner > Product Image > Left */
    #parallax_banner .markets-top-banner.richcontent .text_block_top-left img.img-responsive {
    right: -150px !important;
    }

    /* Banner > Product Image > Right */ 
    #parallax_banner .markets-top-banner.richcontent .text_block_top-right img.img-responsive {
    right: -150px !important;
    }

}







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


/* 1199 以下 */
@Media (max-width: 1199px)  { 

	#parallax_banner .richcontent .text_block_top-left .wording_block, 
	#parallax_banner .richcontent .text_block_top-right .wording_block, 
	#parallax_banner .Full_Width_Rich_Content .text_block_top-left .wording_block, 
	#parallax_banner .Full_Width_Rich_Content .text_block_top-right .wording_block {
	width: 100%;
	text-align: center;
	}

}






/* 橫向智慧手機到竪立平板電腦解析度 >> 1270 以下 */
@Media (max-width: 1270px) { 
	   
    /* Banner > Title (parallax_banner 標題) */
    .banner__caption h1, 
    #parallax_banner .Full_Width_Rich_Content h3, 
    #parallax_banner .Rich_Content h3 {
    font-size: 45px !important;
    }
    
    
    #parallax_banner .Full_Width_Rich_Content h3 span sup, 
    #parallax_banner .Rich_Content h3 span sup {
    font-size: 18px !important;
    top: -44px !important;
    }
    
    #parallax_banner .Full_Width_Rich_Content h4, 
    #parallax_banner .Rich_Content h4 {
    font-size: 1.5em !important;
    }
    
    /* Banner > Product Image > Left & Right */
    #parallax_banner .markets-top-banner.richcontent .text_block_top-left img.img-responsive, 
    #parallax_banner .markets-top-banner.richcontent .text_block_top-right img.img-responsive {
    transform: scale(2) !important;
    top: 130px !important;
    }

    /* Banner > Product Image > Left */
    #parallax_banner .markets-top-banner.richcontent .text_block_top-left img.img-responsive {
    right: -100px !important;
    }

    /* Banner > Product Image > Right */ 
    #parallax_banner .markets-top-banner.richcontent .text_block_top-right img.img-responsive {
    right: -100px !important;
    }
    
}




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



/* 寬電腦解析度 >> 1038 以下 */
@Media (max-width: 1038px) { 
	   
    /* Banner > Title (parallax_banner 標題) */
    .banner__caption h1, 
    #parallax_banner .Full_Width_Rich_Content h3, 
    #parallax_banner .Rich_Content h3 {
    font-size: 45px !important;
    }
    
}



/* 一般pc小螢幕 */
@Media (min-width: 980px) and (max-width: 1199px) {

    #parallax_banner .Full_Width_Rich_Content .text_block_top-left .wording_block, 
    #parallax_banner .Full_Width_Rich_Content .text_block_top-right .wording_block {
    width: 90%;
    }

}




/* 寬電腦解析度 >> 1023 以下 */
@Media (max-width: 1023px) { 
	   
    /* 針對 Bannert (文字左右) > Rich Content 區塊的視差滾輪 */
    #parallax_banner .markets-top-banner.richcontent .text-block.text_block_top-left, 
    #parallax_banner .markets-top-banner.richcontent .text-block.text_block_top-Right {
    padding: 30% 0 20% !important;
    }

    /* 針對 Bannert (文字上下) > Rich Content 區塊的視差滾輪 */
    #parallax_banner .markets-top-banner.richcontent .text-block.text_block_top-center, 
    #parallax_banner .markets-top-banner.richcontent .text-block.text_block_bottom-center {
    padding: 17% 0 10% !important;
    }
    
    /* Banner > Title (parallax_banner 標題) */
    .banner__caption h1, 
    #parallax_banner .Full_Width_Rich_Content h3, 
    #parallax_banner .Rich_Content h3 {
    font-size: 45px !important;
    line-height: 60px;
    }

    
    #parallax_banner .Full_Width_Rich_Content h3 span sup, 
    #parallax_banner .Rich_Content h3 span sup {
    font-size: 18px !important;
    top: -44px !important;
    }

    
}







/* 寬電腦解析度 >> 1006 以下 */
@Media (max-width: 1006px) {
   
	   
    #parallax_banner .Full_Width_Rich_Content h3 span sup, 
    #parallax_banner .Rich_Content h3 span sup {
    font-size: 16px !important;
    top: -30px !important;
    margin-right: -3px;
    }

}


 /* 979 以下 */
 @media (max-width: 979px) {}


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

    #parallax_banner .markets-top-banner.richcontent .text_block_top-left .wording_block, 
    #parallax_banner .markets-top-banner.richcontent .text_block_top-right .wording_block, 
    #parallax_banner .markets-top-banner.richcontent .text_block_top-center .wording_block, 
    #parallax_banner .markets-top-banner.richcontent .text_block_bottom-center .wording_block {
    margin: 0 auto !important;
    text-align: center !important;
    }
    

    
    #parallax_banner .image_block {
    margin-top: 50px;
    }

}




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


    #parallax_banner .Full_Width_Rich_Content .text_block_top-left .wording_block, 
    #parallax_banner .Full_Width_Rich_Content .text_block_top-right .wording_block {
    margin: 0 auto !important;
    text-align: center !important;
    }

    #vid_BG {
        width: 200% !important;
    }

    /* Banner > Product Image > Left & Right */
    #parallax_banner .markets-top-banner.richcontent .text_block_top-left img.img-responsive, 
    #parallax_banner .markets-top-banner.richcontent .text_block_top-right img.img-responsive {
        transform: scale(1.5) !important;
        top: 130px !important;
    }

    /* Banner > Product Image > Left */
    #parallax_banner .markets-top-banner.richcontent .text_block_top-left img.img-responsive {
        right: -100px !important;
    }

    /* Banner > Product Image > Right */
    #parallax_banner .markets-top-banner.richcontent .text_block_top-right img.img-responsive {
        right: -100px !important;
    }


    /* 針對 Bannert (文字左右) > Rich Content 區塊的視差滾輪 */
    #parallax_banner .markets-top-banner.richcontent .text-block.text_block_top-left, 
    #parallax_banner .markets-top-banner.richcontent .text-block.text_block_top-Right {
        padding-top: 160px !important;
    }

    /* 針對 Bannert (文字上下) > Rich Content 區塊的視差滾輪 */
    #parallax_banner .markets-top-banner.richcontent .text-block.text_block_top-center, 
    #parallax_banner .markets-top-banner.richcontent .text-block.text_block_bottom-center {
        padding-top: 160px !important;
    }

}





/* 橫向智慧手機到竪立平板電腦解析度 >> 736 以下 */

@Media (max-width: 736px) {}





/* 比手機大-比平板小-解析度 */

@Media (min-width: 481px) and (max-width: 600px) {}





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

@Media (min-width: 373px) and (max-width: 414px) {}





 /* 480 以下 */
 @media (max-width: 480px) {}





@media (max-width: 460px) {}
























/* ========================================================================================================
	  CSS Animation Original >> 不是 Skroll Animation (跟其它 CSS 寫在一起時,要放置在最下方,跟 @ Import Webfont 分開)
======================================================================================================== */
   
   
   /*--- Banner_Section 動態  ---*/
   #parallax_banner {
    animation-name: sk-Banner;
    animation-duration: 0.7s; /* 0.7秒播完動畫 */
    -webkit-animation-fill-mode: forwards; /*停在最後狀態 */
    animation-fill-mode: forwards;/*停在最後狀態 */
}
    
@keyframes sk-Banner {
    from {
     filter: blur(100px);
    }
    
    to {
     filter: blur(0px);
    }
    
}

















/* =====================================================================================================
   CSS Animation for Skrollr >> 跟其它 CSS 寫在一起時,要放置在最下方,跟 @ Import Webfont 分開
   (>> 實際的 Banner Blur 作用)
===================================================================================================== */



/*---- #parallax_banner -- Html 動態 ----*/

#skrollr_banner {
    -skrollr-animation-name: sk-Banner-html;
}
    
@-skrollr-keyframes sk-Banner-html {

    200-top {
        filter: blur(100px);
        transform: scale(1.5);
        opacity: 1;
    }

    top-bottom {
        filter: blur(0px);
        transform: scale(1);
        opacity: 0;
    }
    
}















/******************  [ #parallax_banner >> skrollr animation (Rich Content 動態) ]  *******************/



/*--- Banner_Title >> Skroll 動態  ---*/
#parallax_banner_scro_title {
    -skrollr-animation-name: sk-Banner_Title;
}
    
@-skrollr-keyframes sk-Banner_Title {

    0 {
        transform: scale(1.5);
        transform: translateX(-100px);
        opacity: 0;
    }

    30 {
        transform: scale(0);
        transform: translateX(0px);
        opacity: 1;
    }

    
}


/*--- Banner_Subtitle >> Skroll 動態  ---*/
#parallax_banner_scro_subtitle {
    -skrollr-animation-name: sk-Banner_Subtitle;
}
    
@-skrollr-keyframes sk-Banner_Subtitle {

    20 {
        transform: scale(1.5);
        transform: translateX(-80px);
        opacity: 0;
    }

    50 {
        transform: scale(0);
        transform: translateX(0px);
        opacity: 1;
    }
    
}


/*--- Banner_Button >> Skroll 動態  ---*/
#parallax_banner_scro_button {
    -skrollr-animation-name: sk-Banner_Button;
}
    
@-skrollr-keyframes sk-Banner_Button {

    40 {
        transform: scale(1.5);
        transform: translateX(-70px);
        opacity: 0;
    }

    60 {
        transform: scale(0);
        transform: translateX(0px);
        opacity: 1;
    }
    
}


/*--- Banner_Image >> Skroll 動態  ---*/
#parallax_banner_scro_image {
    -skrollr-animation-name: sk-Banner_Image;
}
    
@-skrollr-keyframes sk-Banner_Image {

    15 {
        transform: scale(1.5);
        transform: translateX(100px);
        opacity: 0;
    }

    55 {
        transform: scale(0);
        transform: translateX(0px);
        opacity: 1;
    }
    
}