@charset "utf-8";
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}

#n{margin:10px auto; width:920px; border:1px solid #CCC;font-size:12px; line-height:30px;}
#n a{ padding:0 4px; color:#333}

/* flexslider */
.flexslider{position:relative;height:550px;overflow:hidden;background:url(../images/loading.gif) 50% no-repeat;}
.slides{position:relative;z-index:1;}
.slides li{height:550px;}
.slides li a{ display:block; width:100%;  text-align:left; text-indent:-9999px}
.flex-control-nav{position:absolute;bottom:10px;z-index:2; left:45%;text-align:center;}
.flex-control-nav li{display:inline-block;width:14px; float:left;height:14px;margin:0 5px;*display:inline;zoom:1;}
.flex-control-nav a{display:inline-block;width:14px;height:14px;line-height:40px;overflow:hidden;background:url(../images/dot.png) right 0 no-repeat;cursor:pointer;}
.flex-control-nav .flex-active{background-position:0 0;}

.flex-direction-nav{position:absolute;z-index:3; left:0;width:100%;top:45%;}
.flex-direction-nav li a{display:block;width:50px;height:50px;overflow:hidden;cursor:pointer;position:absolute;}
.flex-direction-nav li a.flex-prev{left:60px;background:url(../images/prev.png) center center no-repeat;}
.flex-direction-nav li a.flex-next{right:60px;background:url(../images/next.png) center center no-repeat;}


#frame {/*----------图片轮播相框容器----------*/  
            position: absolute; /*--绝对定位，方便子元素的定位*/  
            width: 585px;  
            height: 400px;  
            overflow: hidden;/*--相框作用，只显示一个图片---*/  
            border-radius:5px;  
        }  
        #dis {/*--绝对定位方便li图片简介的自动分布定位---*/  
            position: absolute;  
            left: 0px;  
           top: 365px;
            opacity: 0.5;  
        }  
        #dis li {  
            display: inline-block;  
            width: 585px;  
            height: 30px;  
            margin: 0px 0px;  
            float: left;  
            text-align: left;  
            color: #fff;
			text-indent:10px;
            font-size: 16px;
            padding-top: 5px;
            background: #000;  
        }  
        #photos img {  
            float: left;  
            width:585px;  
            height:400px;  
        }  
        #photos {/*---设置总的图片宽度--通过位移来达到轮播效果----*/  
            position: absolute;z-index:9px;  
            width: calc(585px * 5);/*---修改图片数量的话需要修改下面的动画参数*/  
        }  
        .play{  
            animation: ma 20s ease-out infinite alternate;/**/  
        }  
        @keyframes ma {/*---每图片切换有两个阶段：位移切换和静置。中间的效果可以任意定制----*/  
            0%,20% {        margin-left: 0px;       }  
            25%,40% {       margin-left: -585px;    }  
            45%,60% {       margin-left: -1170px;    }  
            65%,80% {       margin-left: -1755px;    }  
            85%,100% {      margin-left: -2340px;   }  
        }  
        .num{  
            position:absolute;z-index:10;  
            display:inline-block;  
            right:10px;top:370px;  
            border-radius:100%;  
            background:#b1b1b1;  
            width:25px;height:25px;  
            line-height:25px;  
            cursor:pointer;  
            color:#fff;  
            text-align:center;  
            opacity:0.8;  
        }  
		.numm{  
            position:absolute;z-index:10;  
            display:inline-block;  
            right:10px;top:224px;  
            border-radius:100%;  
            background:#b1b1b1;  
            width:25px;height:25px;  
            line-height:25px;  
            cursor:pointer;  
            color:#fff;  
            text-align:center;  
            opacity:0.8;  
        }  
        .num:hover{background:#525252;}  
        .num:hover,#photos:hover{animation-play-state:paused;}  
        .num:nth-child(2){margin-right:30px}  
        .num:nth-child(3){margin-right:60px}  
        .num:nth-child(4){margin-right:90px}  
        .num:nth-child(5){margin-right:120px}  
        #a1:hover ~ #photos{animation: ma1 .5s ease-out forwards;}  
        #a2:hover ~ #photos{animation: ma2 .5s ease-out forwards;}  
        #a3:hover ~ #photos{animation: ma3 .5s ease-out forwards;}  
        #a4:hover ~ #photos{animation: ma4 .5s ease-out forwards;}  
        #a5:hover ~ #photos {animation: ma5 .5s ease-out forwards;}  
        @keyframes ma1 {0%{margin-left:-2340px;}100%{margin-left:-0px;} }  
        @keyframes ma2 {0%{margin-left:-2340px;}100%{margin-left:-585px;}   }  
        @keyframes ma3 {100%{margin-left:-1170px;}   }  
        @keyframes ma4 {100%{margin-left:-1755px;}   }  
        @keyframes ma5 {100%{margin-left:-2340px;}  }