@import url(https://fonts.googleapis.com/css?family=Oswald:400,700,300|Source+Sans+Pro:400,600,700,900|Raleway:400,500,700|Noto+Sans:700|Poppins:300,400,500,600,700|Oswald:400,300,700);

@import "default.css";
@import "animation.css";
@import "fonts/style.css";
/*@import "plugins.css";*/



/* ==========================================================================
    public
 ========================================================================== */
*{
	-webkit-font-smoothing: antialiased;
}
 body{
 	opacity: 0;
 	-webkit-transition: all 1s linear;
	-moz-transition: all 1s linear;
	-o-transition: all 1s linear;
	-ms-transition: all 1s linear;
	transition: all 1s linear;
 }
.wp{
	overflow: hidden !important;
	min-width: 320px ;
}
section{
	width: 1300px;
	margin: 0 auto;
	background: #FFF;
}
p, a, h1, h2, h3, h4, h5, h6, span, label, input, select, button, tr, th, td{
	font-family: Arial, "微軟正黑體", "蘭亭黑-繁";
	letter-spacing: 0.5px;
}
.fixed-top{
	position: fixed !important;
	margin: 0;
	top: 83px;
	overflow-y: auto;
    height: calc(100vh - 80px);
    width: 75px;
}

.fixed-bottom{
	position: fixed !important;
	margin: 0;
	bottom: 338px;
	overflow-y: auto;
    height: calc(100vh - 420px);
    width: 75px;
}

@media screen and (max-width: 991px){
	.fixed-bottom{
		bottom: 418px;
    	height: calc(100vh - 500px);
	}
}

.clear,
.clearfix{
	clear: both;
}
.textHidden{
	clip: rect(1px, 1px, 1px, 1px) !important;
    height: 0px !important;
    overflow: hidden !important;
    position: absolute !important;
    width: 0px !important;
}
a, a:hover, a:active, a:focus, a:visited{
	text-decoration: none;
	outline: 0;
    outline-offset: 0px;
    color: #000;
}
ul.columns:after{
	content: "";
	clear: both;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
	visibility: hidden;
}
.nav-tabs>li.active>a, 
.nav-tabs>li.active>a:hover, 
.nav-tabs>li.active>a:focus{
	border: solid 1px transparent;
	background-color: transparent;
}
.nav>li>a:hover, .nav>li>a:focus{
	background-color: transparent;
	border-color: transparent;
}
.body > .nav-tabs > li{
	text-align: center;
	padding-right: 61px;
}
.nav-justified > li > a,
.nav-tabs > li > a{
    padding: 10px 0;
    margin: 0;
}

.dropbtn{
	z-index: 0;
}
.dropdown-content{
	z-index: 1;
}

input{
	letter-spacing: 1px;
}
input[type="checkbox"],
input[type=checkbox]:checked,
input[type="checkbox"]:not([multiple]) {
	-webkit-border-radius: 0 !important;  
	-moz-border-radius: 0 !important;  
	-ms-border-radius: 0 !important;  
	-o-border-radius: 0 !important;  
	border-radius: 0 !important; 
}
input[type="checkbox"]:not(:checked) + label:before,
input[type="checkbox"]:checked + label:before {
	-webkit-border-radius: 0;  
	-moz-border-radius: 0;  
	-ms-border-radius: 0;  
	-o-border-radius: 0;  
	border-radius: 0; 
}
button{
	-webkit-border-radius: 0;  
	-moz-border-radius: 0;  
	-ms-border-radius: 0;  
	-o-border-radius: 0;  
	border-radius: 0; 
	text-shadow: 0 0 0 transparent !important;
}

.bootstrap-select.btn-group .dropdown-menu li{
	height: 40px;
}
.bootstrap-select.btn-group .dropdown-menu li a{
	padding: 0 20px;
	line-height: 40px;
}

select:not([multiple]) {
	-webkit-border-radius: 0;  
	-moz-border-radius: 0;  
	-ms-border-radius: 0;  
	-o-border-radius: 0;  
	border-radius: 0; 
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    color: #999;
}
option:checked{
	color: #555;
}
table tr td{
	color: #9f9f9f;
}
.table>thead>tr>th{
	border-bottom: 0;
}
.control-label{
	font-weight: lighter;
}
.required:before{
	font-size: 16px;
	margin-right: 1px;
}

@media screen and (min-width: 768px){
	.navbar-right {
	     margin-right: 0; 
	}
}

@media screen and (max-width: 767px){
	.table-responsive {
	    border: 0px;
	}
}

@media screen and (max-width: 479px){
	.dropdown{
		min-height: auto;
	}
	.nav>li>a {
	    padding: 0px;
	}
}

/*=== 官方網站  ===*/

section{
	clear: both;
	width: 1200px;
}


.area {
	position: relative;
	display: inline-block;
	width: 100%;
}
.list{
	position: relative;
	display: block;
}
.list-item{
	position: relative;
	display: inline-block;
    float: left;
    margin: 0;
    padding: 0;
    z-index: 10;
}

@media screen and (max-width: 1407px){
	section{
		width: 100%;
	}
}

@media screen and (max-width: 767px){
	.area{
		display: block;
	    float: left;
	}
}
	    

/*=== Content Head  ===*/

/* nav */
#content .head{
	margin-top: 27px;
    margin-bottom: 35px;
}
#content .head .nav{
	display: block;
    position: relative;
}
#content .head .nav > ul{
	margin-bottom: 0;
}
#content .head .nav ul li{
	display: inline-block;
}
#content .head .nav ul li:first-child:before{
	content: none;
}
#content .head .nav ul li:before{
	content: " > ";
}
#content .head .nav ul li a{
	font-size: 15px;
	color: #565962;
	border-bottom: solid 1px #565962;
}
#content .head .nav ul li:last-child a{
	border-bottom: solid 1px transparent;
}

@media screen and (max-width: 1407px){
	.body > .nav-tabs > li:first-child{
		padding-left: 15px;
	}
	#content .head{
	    margin-left: 15px;
	}
}
@media screen and (max-width: 767px){
	#content .head .nav{
		display: none;
	}
	#content > .body > .nav-tabs > li{
		width: 50%;
	}
	#news #content > .body > .nav-tabs > li{
		width: 33.33333333334%;
	}
	.body > .nav-tabs > li:first-child{
		padding-left: 0px;
	}
	.body > .nav-tabs > li{
		padding-right: 0px;
	}
}




 /* ==========================================================================
    Title
 ========================================================================== */

section .main-title{
	text-align: center;
	font-size: 34px;
}
section .main-title > h3{
	text-align: center;
	font-size: 20px;
	font-family: "微軟正黑體";
	color: #565962;
}
#products .main-title > h3{
    margin-top: 12px;
	color: #565962;
}

.products .main-title{
	font-family: "微軟正黑體";
	padding: 50px 0 10px 0;
	font-size: 34px;
	line-height: 60px;
	font-weight: 900;
	text-align: center;
	float: left;
	width: 100%;
    padding: 90px 0 25px 0;
    line-height: normal;
	color: #565962;
}
#exhibition .main-title{
	margin-bottom: 50px;
	color: #565962;
}

#partner .main-title{
	margin: 55px 0;
	color: #565962;
}

/*products thumbnail phone version*/
@media screen and (max-width: 991px){

	.max-md-size #products .main-title,
	.max-md-size #exhibition .main-title,
	.max-md-size #partner .main-title{
	    padding: 15px 0;
	    font-size: 26px;
	    line-height: 39px;
	    margin-bottom: 0;
	}
	.max-md-size #products .main-title h3,
	.max-md-size #exhibition .main-title h3,
	.max-md-size #partner .main-title h3{
		margin-bottom: 0;
	    font-size: 18px;
	}
	.max-md-size #partner .main-title{
		margin: 0;
	}
}

@media screen and (max-width: 767px){
	
	/*.max-sm-size #products .main-title{
		font-size: 20px;
	}
	.max-sm-size #products .main-title h3{
		padding-top: 0;
		margin-top: 0;
		font-size: 16px;
	}*/
	.max-sm-size #products .main-title,
	.max-sm-size #exhibition .main-title,
	.max-sm-size #partner .main-title{
		font-size: 20px;
		line-height: 39px;
	}
	.max-sm-size #products .main-title h3,
	.max-sm-size #exhibition .main-title h3,
	.max-sm-size #partner .main-title h3{
		padding-top: 0;
		margin-top: 0;
		font-size: 16px;
	}
	#products .main-title{
		background: #FFF;
	}
	#exhibition .main-title {
	    margin: 0;
	}
	#partner .main-title{
		margin: 15px 0;
	}

}

@media screen and (max-width: 479px){

	.max-xs-size #products .main-title{
		font-size: 20px;
		line-height: 39px;
	}

}

 /* ==========================================================================
    Title
 ========================================================================== */

#content #LeftBorderTitle{
	border-left: solid 4px #00a1e1;
    padding-left: 18px;
}
#content #LeftBorderTitle h3{
	font-size: 28px;
    letter-spacing: 2px;
    color: #565962;
}
#content .nav-tabs > li a #NavTabsTitle{
	font-family: "微軟正黑體";
	font-size: 30px;
	color: #c2c8c6;
	border-bottom: solid 1px transparent;
	margin-top: 0;
	margin-bottom: 20px;
}
#content .nav-tabs > li:hover a #NavTabsTitle,
#content .nav-tabs > li.active a #NavTabsTitle{
	color: #00a1e1;
}
#content .main.nav-tabs > li:hover a,
#content .main.nav-tabs > li.active a{
	border-bottom: solid 2px #00a1e1;
}
#content .sub.nav-tabs > li:hover a,
#content .sub.nav-tabs > li.active a{
	color: #00a1e1;
}

@media screen and (max-width: 991px){
	#content #LeftBorderTitle {
		margin: 0 15px;
	}
}
@media screen and (max-width: 767px){
	#content .nav-tabs > li a #NavTabsTitle{
		font-size: 20px;
	}
	#content #LeftBorderTitle {
		margin: 0 15px;
	}
	#content #LeftBorderTitle h3,
	#companyTW > .left > .title > h4,
	#company-info .company-location > .left > .title > h4{
		font-size: 16px;
		line-height: 25px;
	}
	#about .sub.nav-tabs li{
		width: 25%;
	}
	#about .sub.nav-tabs li a{
		padding-left: 5px;
	}
}

@media screen and (max-width: 599px){

	#about .sub.nav-tabs li{
		width: 33.33333333334%;
	}

}

@media screen and (max-width: 479px){
	#content .nav-tabs > li a #NavTabsTitle,
	#companyTW > .left > .title > h4,
	#company-info .company-location > .left > .title > h4{
		font-size: 16px;
	}
	#about .sub.nav-tabs li a h4{
		font-size: 14px;
		line-height: 25px;
	}
	#content #LeftBorderTitle h3, 
	#companyTW > .left > .title > h4, 
	#company-info .company-location > 
	.left > .title > h4{
		font-size: 16px;
		line-height: 20px;
	}
	#content #LeftBorderTitle {
	    border-left: solid 2px #00a1e1;
	    padding-left: 12px;
	}
}

@media screen and (max-width: 369px){

	#about .sub.nav-tabs li{
		width: 50%;
	}

}

 /* ==========================================================================
    Contaniner
 ========================================================================== */

@media screen and (max-width: 479px){
	#about #mission .mission-container{
		padding: 15px;
	}
}

 /* ==========================================================================
    Banner Up
 ========================================================================== */

#banner-up,
#bannerUp{
	margin-top: 80px;
}

#banner-up, 
#banner-down,
#bannerUp{
	width: 100%;
}

#bannerUp .banner{
	height: 305px;
	position: relative;
}
#bannerUp .banner .txt {
	position: absolute;
	width: 1200px;
	top: 50%;
    left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-mos-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	color: #565962;
}
#bannerUp .banner .txt h3{
	font-size: 40px;
	font-family: "微軟正黑體";
    font-weight: bold;
    letter-spacing: 3px;
    color: #FFF;
    margin-bottom: 13px;
}
#hr #bannerUp .banner .txt h3,
#hr #bannerUp .banner .txt h4{
	color: #565962;
}
#bannerUp .banner .txt h4{
	font-size: 20px;
	font-family: "微軟正黑體";
    font-weight: normal;
    letter-spacing: 1px;
    color: #FFF;
}

@media screen and (max-width: 1407px){

	#bannerUp .banner .txt {
	    width: 1200px;
	    top: 50%;
	    left: 50%;
	    -webkit-transform: translate(-50%,-50%);
		-mos-transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
		-o-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
		padding: 0 15px;
	}

}

@media screen and (max-width: 1199px){
	#bannerUp .banner .txt {
		width: 100%;
	}
}

@media screen and (max-width: 991px){

	#bannerUp .banner .txt {
		width: 100%;
	    top: 50px;
	    left: 50px;
	    -webkit-transform: translate(0%,0%);
		-mos-transform: translate(0%,0%);
		-ms-transform: translate(0%,0%);
		-o-transform: translate(0%,0%);
		transform: translate(0%,0%);
	}
	#bannerUp .banner .txt h3{
		font-size: 36px;
	}
	#bannerUp .banner .txt h4{
		font-size: 18px;
	}

}

@media screen and (max-width: 767px){
	
	#bannerUp .banner{
		height: 220px;
		width: 100%;
	}
	#bannerUp .banner .pic{
		width: 100%;
	}
	#bannerUp .banner .txt {
	    top: 20px;
	    left: 20px;
	    -webkit-transform: translate(0%,0%);
		-mos-transform: translate(0%,0%);
		-ms-transform: translate(0%,0%);
		-o-transform: translate(0%,0%);
		transform: translate(0%,0%);
	}
	#bannerUp .banner .txt h3{
		font-size: 26px;
		letter-spacing: 1px;
	}
	#bannerUp .banner .txt h4{
		font-size: 14px;
		letter-spacing: 0;
	}

}

@media screen and (max-width: 479px){
	
	#bannerUp .banner{
		height: 160px;
		width: 100%;
	}
	#bannerUp .banner .pic{
		width: 100%;
	}
	#bannerUp .banner .txt {
	    top: 20px;
	    left: 20px;
	    -webkit-transform: translate(0%,0%);
		-mos-transform: translate(0%,0%);
		-ms-transform: translate(0%,0%);
		-o-transform: translate(0%,0%);
		transform: translate(0%,0%);
	}
	#bannerUp .banner .txt h3{
		font-size: 18px;
		letter-spacing: 0;
	}
	#bannerUp .banner .txt h4{
		display: none;
	}

}

 /* ==========================================================================
    Table => Store & Contact
 ========================================================================== */
.company-location > .left > .info{
	font-size: 16px;
	margin-top: 3px;
    float: left;
	width: 100%;
}
#store .company-location > .left > .info{
	margin-top: 6px;
}
.company-location > .left > .info > li{
	line-height: 29px;
}
.company-location > .left > .info > li,
.company-location > .left > .info > li span{
	color: #565962;
	font-family: "微軟正黑體";
}
.company-location > .left > .info table thead,
.company-location > .left > .info .panel > .panel-heading{
	background: #00a1e1;
}
.company-location > .left > .info table th,
.company-location > .left > .info table td,
.company-location > .left > .info .panel > .panel-heading > a{
	font-size: 16px;
	text-align: center;
}
.company-location > .left > .info table td:last-child{
	text-align: left;
	padding-left: 30px;
	padding-right: 30px;
	line-height: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.company-location > .left > .info table th,
.company-location > .left > .info .panel > .panel-heading{
	color: #FFF;
	border: 0;
    height: 52px;
    line-height: 52px;
    margin: 0;
    padding: 0;
    padding-left: 23px;
    padding-right: 23px;
    text-align: left;
}
.company-location > .left > .info .panel > .panel-heading > a{
	color: #FFF;
	padding: 0 20px;
}
.company-location > .left > .info thead th,
.company-location > .left > .info tbody tr,
.company-location > .left > .info tbody td{
	vertical-align: middle;
}
.company-location > .left > .info tbody tr {
    height: 56px;
}
.company-location > .left > .info table td{
	color: #565962;
	border-top: 0;
	border-bottom: solid 1px #d7dfdc;
	line-height: 52px;
	margin: 0;
	padding: 0;
}
.company-location > .left > .info table td:first-child{
	background: #ebefed;
	width: 215px;
}
#contact #company-info .company-location:last-child{
	margin-bottom: 77px;
}
#store .company-location{
	margin-bottom: 21px;
    float: left;
    width: 100%;
}
#store .company-location > .left > .info .panel > .panel-heading > a{
	display: block;
	text-align: left;
}
.panel,
.panel-heading{
	box-shadow: 0 0 0 transparent;
	border: 0;
	border-radius: 0;
}
.panel-group .panel+.panel {
    margin-top: 2px;
}



@media screen and (max-width: 991px){

	.company-location > .left > .info{
		padding-left: 15px;
		padding-right: 15px;
	}

	.max-md-size #contact .table-responsive .table>thead>tr>th{
		text-align: center;
	}

	.max-md-size #contact .table-responsive .table>thead>tr>th, 
	.max-md-size #contact .table-responsive .table>tbody>tr>th, 
	.max-md-size #contact .table-responsive .table>tfoot>tr>th, 
	.max-md-size #contact .table-responsive .table>thead>tr>td, 
	.max-md-size #contact .table-responsive .table>tbody>tr>td, 
	.max-md-size #contact .table-responsive .table>tfoot>tr>td,
	.max-md-size #store .table-responsive .table>thead>tr>th,
	.max-md-size #store .table-responsive .table>tbody>tr>th,
	.max-md-size #store .table-responsive .table>tfoot>tr>th,
	.max-md-size #store .table-responsive .table>thead>tr>td,
	.max-md-size #store .table-responsive .table>tbody>tr>td,
	.max-md-size #store .table-responsive .table>tfoot>tr>td{
	    white-space: normal;
	}

	.company-location > .left > .info table th,
	.company-location > .left > .info tbody tr,
	.company-location > .left > .info table td, 
	.company-location > .left > .info .panel > .panel-heading{
		height: auto;
    	line-height: normal;
	}
	.company-location > .left > .info table th, 
	.company-location > .left > .info table td,
	.company-location > .left > .info .panel > .panel-heading > a,
	#store > #content > .body > .company-location > .left > .info table td:first-child{
		padding: 10px 0;
	}
	.company-location > .left > .info .panel > .panel-heading > a{
		padding: 10px;
	}
	.company-location > .left > .info table td:first-child,
	.company-location > .left > .info table td:last-child{
		width: 100%;
		display: block;
	}
	.company-location > .left > .info table td span{
		line-height: 22px;
	}
	.company-location > .left > .info tbody tr.addr td,
	.company-location > .left > .info tbody tr.tel td,
	.company-location > .left > .info tbody tr.fax td,
	.company-location > .left > .info tbody tr.mail td{
		text-align: center;
	}
}

@media screen and (max-width: 767px){

	.company-location > .left > .info{
		font-size: 13px;
	}
	.company-location > .left > .info table th, 
	.company-location > .left > .info table td,
	.company-location > .left > .info .panel > .panel-heading > a,
	#store > #content > .body > .company-location > .left > .info table td:first-child{
		font-size: 13px;
	}
	#store .company-location > .left > .info .panel > .panel-heading > a{
	    position: relative;
	    height: auto;
	    margin-right: 20px;
	}
	#store .company-location > .left > .info .panel > .panel-heading > a:after {
	    font-family: "icomoon";
	    float: right;
	    font-size: 24px;
	    position: absolute;
	    right: -15px;
	    top: 50%;
	    -webkit-transform: translateX(-50%);
		-mos-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	.company-location > .left > .info table th, 
	.company-location > .left > .info .panel > .panel-heading{
		padding-left: 10px;
		padding-right: 10px;
	}
}

@media screen and (max-width: 479px){
	.company-location > .left > .info table td span{
		line-height: 20px;
	}
}

 /* ==========================================================================
    Table Responsive
 ========================================================================== */

@media screen and (max-width: 991px){

	.max-md-size .table-responsive {
	    width: 100%;
	    margin-bottom: 15px;
	    overflow-y: hidden;
	    -ms-overflow-style: -ms-autohiding-scrollbar;
	}
	.max-md-size #member.prefecture #track .table-responsive {
		margin-bottom: 0px;
	}
	.max-md-size .table-responsive .table {
	    margin-bottom: 0;
	}
	.max-md-size .table-responsive .table>thead>tr>th, 
	.max-md-size .table-responsive .table>tbody>tr>th, 
	.max-md-size .table-responsive .table>tfoot>tr>th, 
	.max-md-size .table-responsive .table>thead>tr>td, 
	.max-md-size .table-responsive .table>tbody>tr>td, 
	.max-md-size .table-responsive .table>tfoot>tr>td {
	    white-space: nowrap;
	}
	.max-md-size .table {
	  width: 100%;
	  max-width: 100%;
	  margin-bottom: 20px;
	}
	.max-md-size .table-responsive {
	  width: 100%;
	  overflow-x: auto;
	  overflow-y: auto;
	  -webkit-overflow-scrolling: touch;
	  -ms-overflow-style: -ms-autohiding-scrollbar;
	}

}




 /* ==========================================================================
    Change Page
 ========================================================================== */

#content .body nav{
	margin-bottom: 80px;
}
#content .body nav ul{
	position: relative;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-mos-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	margin-bottom: 20px;
    margin-top: 2px;
}
#content .body nav .pagination  > li > a, 
#content .body nav .pagination  > li span{
	border: 0;
	background: transparent;
	color: #565962;
	font-size: 16px;
}
#content .body nav .pagination > .active > a, 
#content .body nav .pagination > .active > span, 
#content .body nav .pagination > .active > a:hover, 
#content .body nav .pagination > .active > span:hover, 
#content .body nav .pagination > .active > a:focus, 
#content .body nav .pagination > .active > span:focus{
	background: transparent;
	color: #00a1e1;
	font-weight: bold;
}
#content .body nav ul.pagination > li > a{
	padding: 6px 8px;
}
#content .body nav ul.pagination > li:hover > a,
#content .body nav .pagination  > li:hover span{
	color: #00a1e1;
}
#content .body nav .pagination  > li.disabled:hover span,
#content .body nav .pagination  > li.disabled:hover a{
	color: #565962;
}
#changeLeft:before{
	content: "<";
	padding-right: 5px;
}
#changeRight:after{
	content: ">";
    padding-left: 5px;
}



 /* ==========================================================================
    Video Controls Custom Button
 ========================================================================== */

.attend-container > .video{
	position: relative;
}
.attend-container > .video > #play-pause{
	background-size: 80px;
	position: absolute;
    display: block;
    width: 80px;
    height: 80px;
    top: 50%;
    left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-mos-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
    z-index: 999;
}
.attend-container > .video > #play-pause > img{
	width: 100%;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
.attend-container > .video > #play-pause > img:hover{
	transform: scale(1.3);
}
@media screen and (max-width: 599px){

	.attend-container > .video > #play-pause{
		background-size: 65px;
	    width: 65px;
    	height: 65px;
	}

}
@media screen and (max-width: 479px){

	.attend-container > .video > #play-pause{
		background-size: 50px;
	    width: 50px;
    	height: 50px;
	}

}


 /* ==========================================================================
    Fancybox
 ========================================================================== */

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), not all, not all{
	#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span{
		background-image: none !important;
	}

}

 /* ==========================================================================
    Animate
 ========================================================================== */

@-webkit-keyframes thumbnail {
    0% { background-color: #FFF; }
    100% { background-color: #00a1e1; }
}
@-webkit-keyframes thumbnail {
    0% { background-color: #FFF; }
    100% { background-color: #00a1e1; }
}
@-moz-keyframes thumbnail {
    0% { background-color: #FFF; }
    100% { background-color: #00a1e1; }
}
@-ms-keyframes thumbnail {
    0% { background-color: #FFF; }
    100% { background-color: #00a1e1; }
}
@-o-keyframes thumbnail {
    0% { background-color: #FFF; }
    100% { background-color: #00a1e1; }
}
@keyframes thumbnail {
    0% { background-color: #FFF; }
    100% { background-color: #00a1e1; }
}

@-webkit-keyframes hoverOut {
    0% { background-color: #00a1e1; }
    100% { background-color: #FFF; }
}
@-webkit-keyframes hoverOut {
    0% { background-color: #00a1e1; }
    100% { background-color: #FFF; }
}
@-moz-keyframes hoverOut {
    0% { background-color: #00a1e1; }
    100% { background-color: #FFF; }
}
@-ms-keyframes hoverOut {
    0% { background-color: #00a1e1; }
    100% { background-color: #FFF; }
}
@-o-keyframes hoverOut {
    0% { background-color: #00a1e1; }
    100% { background-color: #FFF; }
}
@keyframes hoverOut {
    0% { background-color: #00a1e1; }
    100% { background-color: #FFF; }
}

.bannerDownTransition{
    -webkit-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}
.bannerDownTransitionStop{
	transition: all 0s ease-out;
    -webkit-transition: all 0s ease-out;
	-moz-transition: all 0s ease-out;
	-o-transition: all 0s ease-out;
	-ms-transition: all 0s ease-out;
}
.TransitionCubic{
	-webkit-transition: all .4s cubic-bezier(0.25, 0.46, 0.45, 0.94);;
	-moz-transition: all .4s cubic-bezier(0.25, 0.46, 0.45, 0.94);;
	-o-transition: all .4s cubic-bezier(0.25, 0.46, 0.45, 0.94);;
	transition: all .4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


/*簡易版*/