﻿#banner
        {
            /*width: 100%; js指定*/
            /*height: 890px;js指定*/
            position: relative;
            overflow:hidden;


        }
        
        #banner .box .slide
        {
            position: absolute;
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            /*background-attachment: fixed;*/
            background-position: top center;
            background-size: cover;
            /*z-index: 0;*/top:0px; left:0;
        }
        
        #banner .word
        {
            /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
background: -moz-linear-gradient(left,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */



            z-index: 3;
            position: absolute;
            color:#FFFFFF;
            padding: 35px 0px 35px 105px;
             width: 738px; 
             left: -5738px;
             top: 244px;
            }
        
        #banner .slide h1,#banner .slide h2
        {
             margin:0px 0;
        }
        
        #banner .box .prevslide
        {
            z-index: 1;
        }
        #banner .box .activeslide
        {
            z-index: 2;
        }
        
        /* 左右箭頭 */
        #banner .nav .prev,#banner .nav .next
        {
            width: 31px;
            height: 60px;
            z-index: 2;
            position: absolute;
            cursor: pointer;
            top: 50%;
            margin-top: -30px; /*js指定*/
            z-index:3;
        }
        
        #banner .nav .prev
        {
            background: url(../img/sprites.png) no-repeat -8px -38px;
            left: 20px;
        }
        
        #banner .nav .next
        {
            background: url(../img/sprites.png) no-repeat -59px -38px;
            right: 20px;
        }
        
        #banner .nav a.disabled
        {
            display: none;
        }
        
        /* 點索引 */
        #banner .dot
        {
            text-align: center;
    position: absolute;
    /*bottom: 2%; js指定 */
    height: 30px;
    width: 100%;
    left: 0;
    z-index: 1000;
        }
        
        #banner .dot span {
    background: rgba(150,150,150,0.1);
    margin: 6px;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    box-shadow: 0 1px 1px rgba(255,255,255,0.4), inset 0 1px 1px rgba(0,0,0,0.1), 0 0 0 2px rgba(255,255,255,0.5);
}

#banner .dot span {
    display: inline-block;
    position: relative;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin: 10px;
    background: #ddd;
    background: rgba(150,150,150,0.4);
    cursor: pointer;
    box-shadow: 0 1px 1px rgba(255,255,255,0.4), inset 0 1px 1px rgba(0,0,0,0.1);
}

        
        #banner .dot span.current, #banner .dot span:hover {
    box-shadow: 0 1px 1px rgba(255,255,255,0.4), inset 0 1px 1px rgba(0,0,0,0.1), 0 0 0 2px rgba(255,255,255,0.5);
}

 #banner .dot span.current:after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    top: 3px;
    left: 3px;
    border-radius: 50%;
    background: rgba(255,255,255,0.8);
}
        
      
        
        
        