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


/* 1~479
================================================== */

@media only screen and (min-width: 1px) and (max-width: 479px) {
	
#banner_all {
	float: left;
	width: 100%;
	max-height: 640px;
}
	
.main_image {
	width: 100%;
	height: 180px;
	overflow: hidden;
	margin: 0 auto;
	position: relative;
}

.main_image ul {
	width: 9999px;
	height: auto;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	list-style-image: none; 
    list-style-type: none;
}

.main_image li {
	float: left;
	width: 100%;
	height: 180px;
}

.main_image li span {
	display: block;
	width: 100%;
	height: 180px;
}

.main_image li a {
	display: block;
	width: 100%;
	height: 180px;
}

#btn_prev {
	background: url(../images/hover_left.png) no-repeat left top;
	left: 20px;
}

#btn_next {
	background: url(../images/hover_right.png) no-repeat right top;
	right: 20px;
}

.flicking_con {
	width: 990px;
	margin: 0 auto;
	position: relative;
}

.flicking_con .flicking_inner {
	position: absolute;
	top: 140px;
	left: 90px;
	width: 300px;
	height: 21px
}

}	





/* 480~767
================================================== */

@media only screen and (min-width: 480px) and (max-width: 767px) {
	
#banner_all{
	float: left;
	width: 100%;
	max-height: 640px;
}
	
.main_image {
	width: 100%;
	height:250px;
	overflow: hidden;
	margin: 0 auto;
	position: relative;
}

.main_image ul {
	width: 9999px;
	height: auto;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	list-style-image: none; 
    list-style-type: none;
}

.main_image li {
	float: left;
	width: 100%;
	height: 250px;
}

.main_image li span {
	display: block;
	width: 100%;
	height: 250px;
}

.main_image li a {
	display: block;
	width: 100%;
	height: 250px;
}

#btn_prev {
	background: url(../images/hover_left.png) no-repeat left top;
	left: 20px;
}

#btn_next {
	background: url(../images/hover_right.png) no-repeat right top;
	right: 20px;
}

.flicking_con {
	width: 990px;
	margin: 0 auto;
	position: relative;
	z-index: 99;
}

.flicking_con .flicking_inner {
	position: absolute;
	top: 210px;
	left: 90px;
	z-index: 999;
	width: 300px;
	height: 21px;
}

}	





/* 481~1020
================================================== */

@media only screen and (min-width: 481px) and (max-width: 1020px) {
	
#banner_all {
	float: left;
	width: 100%;
	max-height: 640px;
}
	
.main_image {
	width: 100%;
	height: 333px;
	overflow: hidden;
	margin: 0 auto;
	position: relative;
}

.main_image ul {
	width: 9999px;
	height: auto;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
    list-style-image: none; 
    list-style-type: none;
}

.main_image li {
	float: left;
	width: 100%;
	height: 333px;
}

.main_image li span {
	display: block;
	width: 100%;
	height: 333px;
}

.main_image li a {
	display: block;
	width: 100%;
	height: 333px;
}

#btn_prev {
	background: url(../images/hover_left.png) no-repeat left top;
	left: 20px;
}

#btn_next {
	background: url(../images/hover_right.png) no-repeat right top;
	right: 20px;
}

.flicking_con {
	width: 990px;
	margin: 0 auto;
	position: relative;
	z-index: 99;
}

.flicking_con .flicking_inner {
	position: absolute;
	top: 293px;
	left: 90px;
	z-index: 999;
	width: 300px;
	height: 21px;
}

}	





/* 1021~
================================================== */

@media (min-width: 1021px) {
	
#banner_all {
	float: left;
	width: 100%;
	max-height: 640px;
	margin-top: 150px;
}

.main_image {
	width: 100%;
	height: 640px;
	overflow: hidden;
	margin: 0 auto;
	position: relative;
}

.main_image ul {
	width: 9999px;
	height: 640px;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	list-style-image: none; 
    list-style-type: none;
}

.main_image li {
	float: left;
	width: 100%;
	height: 640px;
}

.main_image li span {
	display: block;
	width: 100%;
	height: 640px;
}

.main_image li a {
	display: block;
	width: 100%;
	height: 640px;
}

#btn_prev {
	background: url(../images/hover_left.png) no-repeat left top;
	left: 100px;
}

#btn_next {
	background: url(../images/hover_right.png) no-repeat right top;
	right: 100px;
}

.flicking_con {
	width: 990px;
	margin: 0 auto;
	position: relative;
	z-index: 99;
}

.flicking_con .flicking_inner {
	position: absolute;
	top: 600px;
	left: 90px;
	z-index: 999;
	width: 300px;
	height: 21px;
}

}





.main_image ul li span {
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
}
	
.flicking_con a {
	float: left;
	width: 21px;
	height: 21px;
	margin: 0;
	padding: 0;
	display: block;
	text-indent: -1000px;
	background-image: url(../images/btn_main_img.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}

.flicking_con a.on {
	background-position: 0 -21px;
}

#btn_prev,#btn_next {
	z-index: 1;
	width: 73px!important;
	height: 74px!important;
	top: 50%;
	margin-top: -37px;
	/*position:absolute;*/ /*左右箭頭*/
}