@charset "utf-8";
/* CSS Document */
#wrap{   
	margin: 30px auto;
	}
*{margin:0; padding:0;}
#wrap{width:900px; height:260px; background:#000; overflow:hidden;}

#main_ul{padding:2px;}
#wrap li{list-style:none;}
#main_view_wrap{width:440px; height:260px; margin-bottom:2px; float:right; position:relative; overflow:hidden;}
#main_view_wrap input{display:none;}
#main_view_wrap li{position:absolute; top:0; left:0;}
#main_view_wrap input:checked + img{opacity:1; -moz-opacity:1; filter: alpha(opacity=100);
	-webkit-animation:'check_on' 1s ease 1;
	-moz-animation:'check_on' 1s ease 1;
	-ms-animation:'check_on' 1s ease 1;
	-o-animation:'check_on' 1s ease 1;
}

#main_view_wrap img{width:440px; height:256px; opacity:0; -moz-opacity:0; filter: alpha(opacity=0);
	-webkit-animation:'check_off' 1s ease 1;
	-moz-animation:'check_off' 1s ease 1;
	-ms-animation:'check_off' 1s ease 1;
	-o-animation:'check_off' 1s ease 1;
}

.switch{width:112px; height:84px; float:left;  margin:0 2px 2px 0;}
.switch label img{
	opacity:0.8; -moz-opacity:0.8; filter: alpha(opacity=80);
	-webkit-animation:'check_out' 0.5s ease 1;
	-moz-animation:'check_out' 0.5s ease 1;
	-ms-animation:'check_out' 0.5s ease 1;
	-o-animation:'check_out' 0.5s ease 1;
}

.switch label img:hover{
	opacity:1; -moz-opacity:1; filter: alpha(opacity=100);
	-webkit-animation:'check_over' 0.5s ease 1;
	-moz-animation:'check_over' 0.5s ease 1;
	-ms-animation:'check_over' 0.5s ease 1;
	-o-animation:'check_over' 0.5s ease 1;
}

.switch label{cursor:pointer;}
.switch img{width:112px; height:84px;}




/* keyframes check_over */
	@-webkit-keyframes check_over{
		0%{opacity:0.8;}
		100%{opacity:1;}
	}
	@-moz-keyframes check_over{
		0%{-moz-opacity:0.8;}
		100%{-moz-opacity:1;}
	}
	@-ms-keyframes check_over{
		0%{ filter: alpha(opacity=80);}
		100%{ filter: alpha(opacity=100);}
	}
	@-o-keyframes check_over{
		0%{opacity:0.8;}
		100%{opacity:1;}
	}
	@keyframes check_over{
		0%{opacity:0.8;}
		100%{opacity:1;}
	}	
/* keyframes check_over */


/* keyframes check_out */
	@-webkit-keyframes check_out{
		0%{opacity:1;}
		100%{opacity:0.8;}
	}
	@-moz-keyframes check_out{
		0%{-moz-opacity:1;}
		100%{-moz-opacity:0.8;}
	}
	
	@-ms-keyframes check_out{
		0%{filter: alpha(opacity=80);}
		100%{filter: alpha(opacity=80);}
	}
	
	@-o-keyframes check_out{
		0%{opacity:1;}
		100%{opacity:0.8;}
	}
	
	@keyframes check_out{
		0%{opacity:1;}
		100%{opacity:0.8;}
	}
/* keyframes check_out */



/* keyframes check_on */
	@-webkit-keyframes check_on{
		0%{opacity:0;}
		100%{opacity:1;}
	}
	@-moz-keyframes check_on{
		0%{-moz-opacity:0;}
		100%{-moz-opacity:1;}
	}
	@-ms-keyframes check_on{
		0%{-moz-opacity:0;}
		100%{-moz-opacity:1;}
	}
	
	@-o-keyframes check_on{
		0%{-moz-opacity:0;}
		100%{-moz-opacity:1;}
	}
	@keyframes check_on{
		0%{-moz-opacity:0;}
		100%{-moz-opacity:1;}
	}	
/* keyframes check_on */



/* keyframes check_on */
	@-webkit-keyframes check_off{
		0%{opacity:1;}
		100%{opacity:0;}
	}
	@-moz-keyframes check_off{
		0%{-moz-opacity:1;}
		100%{-moz-opacity:0;}
	}
	@-ms-keyframes check_off{
		0%{-moz-opacity:1;}
		100%{-moz-opacity:0;}
	}
	
	@-o-keyframes check_off{
		0%{-moz-opacity:1;}
		100%{-moz-opacity:0;}
	}
	@keyframes check_off{
		0%{-moz-opacity:1;}
		100%{-moz-opacity:0;}
	}	
/* keyframes check_on */