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

.abgne-yahoo-carousel {
	width: 100%;
	height: 90px;
	padding: 0px;
	border: 0px;
	position:relative;
	/*left: 0px;
	top: 170px;*/
	}
	.abgne-yahoo-carousel * {
		margin: 0;
		padding: 0;
	}
	.abgne-yahoo-carousel ul, .abgne-yahoo-carousel li {
		list-style: none;
	}
	@media screen and (min-width: 630px) {
	.abgne-yahoo-carousel a img {
		border: none;
		width: 90px;
		height:90px;
	}
	}
	@media screen and (max-width: 629px) {
	.abgne-yahoo-carousel a img {
		border: none;
		width: 50px;
		height:50px;
	}
	}
	.abgne-yahoo-carousel h3 {
		font-size: 18px;
		height: 30px;
	}
	.abgne-yahoo-carousel .page {
		position: absolute;
		top: 12px;
		right: 80px;
	}
	@media screen and (min-width: 630px) {
	.abgne-yahoo-carousel .IMGbtn {
		position: relative;
    	height: 38px;
    	width: 38px;
    	/* background-color: #998675; */
    	border: 1px solid #c9c9c9;
    	float: left;
    	top: 30px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}
	}
	@media screen and (max-width: 629px) and (min-width: 414px) {
	.abgne-yahoo-carousel .IMGbtn {
		position:absolute;
    	height: 38px;
    	width: 38px;
    	/* background-color: #998675; */
    	border: 1px solid #c9c9c9;
    	float: left;
    	top: 5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}
	.IMGbtnR {
		right:0;
	}
	.IMGbtnL {
		left:0;
	}
	}
	@media screen and (max-width: 413px) {
	.abgne-yahoo-carousel .IMGbtn {
		position:absolute;
    	height: 38px;
    	width: 38px;
    	/* background-color: #998675; */
    	border: 1px solid #c9c9c9;
    	float: left;
    	top: 60px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}
	.IMGbtnR {
		right:0;
	}
	.IMGbtnL {
		left:0;
	}
	}
	.abgne-yahoo-carousel .IMGbtn a {
		float: left;
		width:40px;
		height:40px;
		text-align:center;
		line-height:40px;
		color:rgba(153,153,153,1);
		transition:.3s;
		
	}
	.abgne-yahoo-carousel .IMGbtn a:hover {
		background-color: rgba(255,153,0,1);
		color:rgba(255,255,255,1);
		transition:.3s;
	}
	.abgne-yahoo-carousel .IMGbtn a.prev {
		/*background:url(../images/Pleft-03.png) no-repeat;*/
	}
	.abgne-yahoo-carousel .IMGbtn a.next {
		/*background:url(../images/pright-03.png) no-repeat;*/
	}
	@media screen and (min-width: 630px) {
	.abgne-yahoo-carousel .frame {
		    position: relative;
    	overflow: hidden;
    	width: 490px;/* (li 的寬度 + li 的邊框寬度 * 2 ) * 一次要顯示的數量 + li 的右邊界 * (一次要顯示的數量 - 1) */
    	height: 90px;
    	float: left;
		margin:0 10px;
	}
	}
	@media screen and (max-width: 629px) {
	.abgne-yahoo-carousel .frame {
		position: relative;
    	overflow: hidden;
    	width: 290px;/* (li 的寬度 + li 的邊框寬度 * 2 ) * 一次要顯示的數量 + li 的右邊界 * (一次要顯示的數量 - 1) */
    	height: 50px;
		margin:0 auto;
	}
	}
	.abgne-yahoo-carousel ul {
		width: 99999px;
		position:relative;
		float:left;
	}
	@media screen and (min-width: 630px) {
	.abgne-yahoo-carousel li {
		float: left;
		width: 90px;
		height: 90px;
		position: relative;
		margin-right: 10px;
		cursor: pointer;
		opacity:.7;
		transition:.3s;
	}
	}
	@media screen and (max-width: 629px) {
		.abgne-yahoo-carousel li {
		float: left;
		width: 50px;
		height: 50px;
		position: relative;
		margin-right: 10px;
		cursor: pointer;
		opacity:.7;
		transition:.3s;
	}
	}
	.abgne-yahoo-carousel li:hover {
		opacity:1;
		transition:.3s;
	}
	.abgne-yahoo-carousel li .thumb, .abgne-yahoo-carousel li .ovrly, .abgne-yahoo-carousel li h3 {
		position: absolute;
	}
	.abgne-yahoo-carousel li .ovrly, .abgne-yahoo-carousel li h3 {
		width: 100%;
		height: 50px;
		line-height: 50px;
		text-align: center;
		bottom: 0;
		font-size:14px;
		font-weight:100;
	}
	.abgne-yahoo-carousel li .ovrly {
		background: #000;
	}
	.abgne-yahoo-carousel li h3 a {
		color: #fff;
	}
	.abgne-yahoo-carousel li h3 a:hover {
		color: #f90;
	}

	.demo2, .demo2 .frame {
		width: 490px;	/* (li 的寬度 + li 的邊框寬度 * 2 ) * 一次要顯示的數量 + li 的右邊界 * (一次要顯示的數量 - 1) */
	}