.rotation {
    width: 970px;
    height: auto;    
    opacity: 1; 
    -webkit-transition: opacity 1s ease;
    overflow: hidden;
    margin: 20px auto;
}
.rotation img {
    width: 100%;
    height: auto;
}

.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}

@font-face {
	font-family: 'flexslider-icon';
	src:url('../fonts/flexslider-icon.eot');
	src:url('../fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'),
		url('../fonts/flexslider-icon.woff') format('woff'),
		url('../fonts/flexslider-icon.ttf') format('truetype'),
		url('../fonts/flexslider-icon.svg#flexslider-icon') format('svg');
	font-weight: normal;
	font-style: normal;
}

.flexslider { 
    margin: 0;     
    position: relative;     
    zoom: 1; 
}

/* 上下頁 */
.flex-direction-nav {*height: 0;}
.flex-direction-nav a  { text-decoration:none; display: block; width: 40px; height: 40px; margin: -20px 0 0; position: absolute; top: 50%; z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; color: #fff; text-shadow: 1px 1px 0 rgba(255,255,255,0.3); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; }
.flex-direction-nav .flex-prev { left: -50px; }
.flex-direction-nav .flex-next { right: -50px; text-align: right; }
.flexslider:hover .flex-prev { opacity: 0.7; left: 10px; }
.flexslider:hover .flex-next { opacity: 0.7; right: 10px; }
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1; }
.flex-direction-nav .flex-disabled { opacity: 0!important; filter:alpha(opacity=0); cursor: default; }
.flex-direction-nav a:before  { font-family: "flexslider-icon"; font-size: 40px; display: inline-block; content: '\f001'; }
.flex-direction-nav a.flex-next:before  { content: '\f002'; }

/* 圓點 */
.flex-control-nav {
    width: 100%;
    position: absolute; 
    bottom: 5px;
    text-align: center;

}
.flex-control-nav li {
    margin: 0 4px;
    display: inline-block;
   
}
.flex-control-paging li a {
    width: 11px; 
    height: 11px; 
    display: block; 
    background: #fff; 
    cursor: pointer;
    text-indent: -9999px;
    -webkit-border-radius: 20px; 
    -moz-border-radius: 20px; 
    -o-border-radius: 20px;
    border-radius: 20px; 
    -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
    -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); 
    -o-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); 
    box-shadow: inset 0 0 3px rgba(0,0,0,0.3); 
}
.flex-control-paging li a:hover { 
    background: #aadce3; 
    opacity: .9;  
}
.flex-control-paging li a.flex-active { 
    background: #6cc4d0;  
    cursor: default; 
}

@media screen and (max-width: 768px) {
    .rotation {
        width: 100%;        
    }
    .flex-direction-nav a {
        width: 26px;
        height: 26px;
    }
    .flex-direction-nav a:before  {      
        font-size: 26px;
    }

}