@charset "utf-8";
/* CSS Document */

.i-bn-animate{position:relative; margin:auto; width:100%; height:0; padding-bottom:41.66%; z-index:1;
	display:block;
	background-color:#000;
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
}

.i-full-down{
	position:absolute;
	right:0;
	left:0;
	bottom:0;
	margin:auto;
	padding:14px 20px;
	display:block;
	width:100%;
	max-width:140px;
	font-size:15px;
	color:#fff;
	background:rgba(0,0,0,0.8);
	text-align:center;
	letter-spacing:2px;
	border-top-right-radius:6px;
	border-top-left-radius:6px;
	z-index:100;
}
.i-full-down i{margin-left:4px;}

.i-full-down:hover{
	color:#000;
	background:rgba(243,180,61,1);
}



/* inner bn */
.i-bn-inner{position:relative; margin:auto; width:100%; z-index:1;
	height:0; padding-bottom:16.145%;
	display:block;
	background-color:#000;
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
}

.i-bn-inner h2{
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	margin:auto;
	height:48px;
	font-size:36px;
	font-weight:bold;
	color:#fff;
	text-align:center;
	text-shadow:rgba(0,0,0,1) 0 0 6px;
	letter-spacing:8px;
	z-index:3;
}










/* Animate */
.flexslider li .i-bn-animate *{
	-webkit-animation:fadeOut both .3s;
	animation:fadeOut both .3s;
}

.i-bn-animate.i-full-bg-a{
}

.i-full-cover{
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	margin:auto;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.4);
	opacity:1;
	transition:all ease-out 0.2s;
	z-index:2;
}

.i-bn-animate h2{
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	margin:auto;
	height:56px;
	font-size:48px;
	font-weight:bold;
	color:#fff;
	text-align:center;
	text-shadow:rgba(0,0,0,1) 0 0 6px;
	letter-spacing:8px;
	z-index:3;
}
.i-bn-animate h2 span{
	display:inline-block;
}

.i-full-award{
	position:absolute;
	display:flex;
	flex-wrap:wrap;
	align-content:center;
	justify-content:center;
	top:0;
	right:0;
	bottom:0;
	left:auto;
	margin:auto 8% auto auto;
	width:10%;
	height:auto;
	z-index:4;
}

.i-full-award .if-a-item{
	position:relative;
	display:block;
	margin:auto auto 12px auto;
	width:60%;
	border:#fff 1px solid;
	background:rgba(0,0,0,0.1);
}

.i-full-award .if-a-item:hover{
	background:rgba(243,180,61,0.5);
	box-shadow:rgba(0,0,0,1) 0 0 8px;
}

.i-full-award .if-a-item .co-pic img{
	margin:auto !important;
}








/* Animate Trigger */
.flexslider li.flex-active-slide .i-bn-animate.i-full-bg-a{
}

.flexslider li.flex-active-slide .i-bn-animate .i-full-cover{
	-webkit-animation:fadeIn .1s .1s both;
	animation:fadeIn .1s .1s both;
	opacity:0.1;
}

.flexslider li.flex-active-slide .i-bn-animate h2{
	-webkit-animation:zoomIn .5s 1.5s both;
	animation:zoomIn .5s 1.5s both;
}



/* Animate RWD */
@media screen and (max-width: 768px) {

.i-bn-animate h2{
	width:80%;
	height:24px;
	font-size:20px;
	letter-spacing:4px;
}

.i-bn-inner{
	padding-bottom:32%;
}

.i-bn-inner h2{
	width:80%;
	height:28px;
	font-size:20px;
	letter-spacing:4px;
}


.i-full-award{
	margin:auto 8% 20% auto;
	width:16%;
	align-content:flex-end;
	justify-content:flex-end;
}



}











/* Animate keyframe */

.bounce {
  animation: bounce_3395 3.6s ease infinite;
  transform-origin: 50% 50%;
}

@keyframes bounce_3395 {
  0% { transform:translateY(0) }
  5.55556% { transform:translateY(0) }
  11.11111% { transform:translateY(0) }
  22.22222% { transform:translateY(-15px) }
  27.77778% { transform:translateY(0) }
  33.33333% { transform:translateY(-15px) }
  44.44444% { transform:translateY(0) }
  100% { transform:translateY(0) }
}

.vertical {
  animation: vertical_6138 6s ease infinite;
  transform-origin: 50% 50%;
}

@keyframes vertical_6138 {
  0% { transform:translate(0,-3px) }
  3.27869% { transform:translate(0,3px) }
  6.55738% { transform:translate(0,-3px) }
  9.83606% { transform:translate(0,3px) }
  13.11475% { transform:translate(0,-3px) }
  16.39344% { transform:translate(0,3px) }
  18.03279% { transform:translate(0,0) }
  100% { transform:translate(0,0) }
}

@-webkit-keyframes imageAnimate { 
	0% {
	    opacity: 1;
	    -webkit-animation-timing-function: ease-in;
	}
	25% {
	    opacity: 1;
	    -webkit-transform: scale(1.1);
	    -webkit-animation-timing-function: ease-out;
	}
	50% {
	    opacity: 1;
	    -webkit-transform: scale(1.2);
	}
	100% { opacity: 1 }
}
@-moz-keyframes imageAnimate {
	
	0% {
	    opacity: 1;
	    -moz-animation-timing-function: ease-in;
	}
	25% {
	    opacity: 1;
	    -moz-transform: scale(1.1);
	    -moz-animation-timing-function: ease-out;
	}
	50% {
	    opacity: 1;
	    -moz-transform: scale(1.2);
	}
	100% { opacity: 1 }
}
@-o-keyframes imageAnimate { 
	0% {
	    opacity: 1;
	    -o-animation-timing-function: ease-in;
	}
	25% {
	    opacity: 1;
	    -o-transform: scale(1.1);
	    -o-animation-timing-function: ease-out;
	}
	50% {
	    opacity: 1;
	    -o-transform: scale(1.2);
	}
	100% { opacity: 1 }
}
@-ms-keyframes imageAnimate { 
	0% {
	    opacity: 1;
	    -ms-animation-timing-function: ease-in;
	}
	25% {
	    opacity: 1;
	    -ms-transform: scale(1.1);
	    -ms-animation-timing-function: ease-out;
	}
	50% {
	    opacity: 1;
	    -ms-transform: scale(1.2);
	}
	100% { opacity: 1 }
}
@keyframes imageAnimate { 
	0% {
	    opacity: 1;
	    animation-timing-function: ease-in;
	}
	25% {
	    opacity: 1;
	    transform: scale(1.1);
	    animation-timing-function: ease-out;
	}
	50% {
	    opacity: 1;
	    transform: scale(1.2);
	}
	100% { opacity: 1 }
}