@media screen and(min-width:768px){
    .slider-container{
        width: 100%;
        height: 100%;
    }
}

@media screen and(max-width:767px){
    .slider-container{
        width: 100%;
        height: 200px;
        .dowmBtn{
            display: none;
        }
        .fir-tit{
            font-size: 20px;
            top: 31%;
        }
        .fir-detail{
            font-size: 12px;
            top: 49%;
        }
        .fir-btn{
            top: 64%;
            li {
                width: 80px;
                height: 25px;
                font-size: 10px;
                text-indent: 0;
                line-height: 25px;
                text-align: center;
                i{
                    display: none;
                }
            }
        }
        .change-bg-btn{
            .left-change-bg{
                left: 3%;
            }
            .right-change-bg{
                right: 3%;
            }
        }
       
    }
}

.slider-container{
    position: relative;
    overflow: hidden;
    > div {
        color: #fff;
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
        // background-attachment: fixed;
        z-index: 1;
    }
    .default-left{
        left: 0;
    }

    /* 轮播图的进来和离开 开始 */ 
    .next-in{
        -webkit-animation: nexfIn .5s ease forwards;
        -moz-animation: nexfIn .5s ease forwards;
        -ms-animation: nexfIn .5s ease forwards;
        animation: nexfIn .5s ease forwards;
        z-index: 9;
    }

    .next-leave{
        -webkit-animation: nextLeave .5s ease forwards;
        -moz-animation: nextLeave .5s ease forwards;
        -ms-animation: nextLeave .5s ease forwards;
        animation: nextLeave .5s ease forwards;
    }

    .front-in{
        -webkit-animation: frontIn .5s ease forwards;
        -moz-animation: frontIn .5s ease forwards;
        -ms-animation: frontIn .5s ease forwards;
        animation: frontIn .5s ease forwards;
        z-index: 9;
    }

    .front-leave{
        -webkit-animation: frontLeave .5s ease forwards;
        -moz-animation: frontLeave .5s ease forwards;
        -ms-animation: frontLeave .5s ease forwards;
        animation: frontLeave .5s ease forwards;
    }
    /* 轮播图的进来和离开 结束 */ 

    /* 左右两个切换按钮 开始*/ 
    &:hover .change-bg-btn li{
        opacity: 0.7;
        &:hover{
            opacity: 1;
        }
    }
    .change-bg-btn li{
        width: 31px;
        height: 31px;
        position: absolute;
        top: 48%;
        z-index: 99;
        background-size: 15px 15px !important;
        opacity: 0;
        cursor: pointer;
    }
    .left-change-bg{
        left: 50px;
        background: url("../../../../../assets/images/sliders/dot_pre.png") no-repeat;
    }
    .right-change-bg{
        right: 50px;
        background: url("../../../../../assets/images/sliders/dot_next.png") no-repeat;
    }
    /* 左右两个切换按钮 结束*/ 
    

}


/* 向下按钮 */ 
.dowmBtn{
    background: transparent url("../../../../../assets/images/sliders/dot_down.png") center 9px no-repeat;
    background-size: 14px 14px !important;
    border: 3px solid rgba(255,255,255, 1);
    border-radius: 36px;
    height: 36px;
    width: 36px;
    position: absolute;
    bottom: 200px;
    z-index: 99;
    display: block;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: left !important;
    cursor: pointer;
}

/* 每个部分公共样式开始 */ 
.fir-tit{
    width: 100%;
    font-size: 64px;
    // color: #fff;
    // color: #000;
    text-shadow: 2px 2px rgba(0,0,0, .2);
    text-align: center;
    position: absolute;
    top: 34%;
    opacity: 0;
}
.fir-detail{
    width: 100%;
    font-size: 28px;
    line-height: 1.3em;
    // color: rgba(255,255,255, .6);
    // color: #000;
    text-align: center;
    position: absolute;
    top: 46%;
    opacity: 0;
}
.fir-btn{
    width: 100%;
    color: #fff;
    position: absolute;
    top: 57%;
    li {
        width: 146px;
        height: 48px;
        font-size: 15px;
        letter-spacing: 3px;
        line-height: 48px;  
        text-indent: 40px;
        border-radius: 5px;      
        color: #fff;
        background: #f98805;
        margin: 0 auto;
        border-bottom: 3px solid rgba(0,0,0,.2);
        cursor: pointer;
        user-select: none;
        transition: all .75s ease;
        -moz-transition: all .75s ease;
        -webkit-transition:  all .75s ease;
        -o-transition:  all .75s ease;
        &:hover{
            background: #0061ae;
            text-indent: 30px;
            transition: all .75s ease;
            -moz-transition: all .75s ease;
            -webkit-transition:  all .75s ease;
            -o-transition:  all .75s ease;
        }
    }

}
.pick-li {
    opacity: 0;
    .btn-arrows{
        text-indent:0px;
        opacity: 0;
        transition: all .75s ease;
        -moz-transition: all .75s ease;
        -webkit-transition:  all .75s ease;
        -o-transition:  all .75s ease;
     }
     &:hover .btn-arrows {
        opacity: 1;
        text-indent: 7px;
        transition: all .75s ease;
        -moz-transition: all .75s ease;
        -webkit-transition:  all .75s ease;
        -o-transition:  all .75s ease;
     }
     
}

/* 每个部分公共样式结束 */ 


/* 轮播图的动画开始 */ 
/* 下一个动画 进来 */ 
@keyframes nexfIn{
    0%{
        left: -100%;
    }
    // 20%{
    //     left: -80%;
    // }
    100%{
        left: 0;
    }
}
/* 下一个动画 离开 */ 
@keyframes nextLeave{
    0%{
        left: 0;
    }
    100%{
        left: 100%;
    }
}
/* 上一个动画 进来 */ 
@keyframes frontIn{
    0%{
        left: 100%;
    }
    100%{
        left: 0;
    }
}
/* 上一个动画 离开 */ 
@keyframes frontLeave{
    0%{
        left: 0;
    }
    100%{
        left: -100%;
    }
}
/* 轮播图的动画结束 */ 

/* 轮播图背景 */ 
.fir-slider{
    background: url("../../../../../assets/images/sliders/8.jpg") ;
}
.sec-slider{
    background: url("../../../../../assets/images/sliders/4.jpg") ;
}
.thi-slider{
    background: url("../../../../../assets/images/sliders/6.jpg") ;
}
.fou-slider{
    background: url("../../../../../assets/images/sliders/7.jpg") ;
}

/* 弹入-从下 */
.a-bounceinB{
    -webkit-animation: bounceinB 1s ease-in forwards;
    -moz-animation: bounceinB 1s ease-in forwards;
    -ms-animation: bounceinB 1s ease-in forwards;
    animation: bounceinB 1s ease-in  forwards;
    opacity: 1;
}
/* 淡入-从上 */
.a-fadeinT{
    -webkit-animation: fadeinT 1s ease-out backwards;
    -moz-animation: fadeinT 1s ease-out backwards;
    -ms-animation: fadeinT 1s ease-out backwards;
    animation: fadeinT 1s ease-out backwards;
    opacity: 1;
}

/* 淡入-从左 */
.a-fadeinL{
    -webkit-animation: fadeinL 1s ease-out backwards;
    -moz-animation: fadeinL 1s ease-out backwards;
    -ms-animation: fadeinL 1s ease-out backwards;
    animation: fadeinL 1s ease-out backwards;
    opacity: 1;
}

/* 翻入-X轴 */
.a-flipinX{
    -webkit-animation:flipinX 1s ease-out backwards;
    -moz-animation:flipinX 1s ease-out backwards;
    -ms-animation:flipinX 1s ease-out backwards;
    animation:flipinX 1s ease-out backwards;
    opacity: 1;
}

/* 转入-从左下 */
.a-rotateinLB{
    -webkit-animation:rotateinLB 1s ease-out backwards;
    -moz-animation:rotateinLB 1s ease-out backwards;
    -ms-animation:rotateinLB 1s ease-out backwards;
    animation:rotateinLB 1s ease-out backwards;
    opacity: 1;
}

/* 弹入-从左 */
.a-bounceinL{
    -webkit-animation:bounceinL 1s ease-out backwards;
    -moz-animation:bounceinL 1s ease-out backwards;
    -ms-animation:bounceinL 1s ease-out backwards;
    animation:bounceinL 1s ease-out backwards;
    opacity: 1;
}

/* 震颤 */
.a-shake{
    -webkit-animation: shake 1s ease;
    -moz-animation: shake 1s ease;
    -ms-animation: shake 1s ease;
    animation: shake 1s ease;
    opacity: 1;
}

/* 弹入-从下 */
@-webkit-keyframes bounceinB{
    0%{opacity:0;-webkit-transform:translateY(100px);}
    100%{opacity:1;-webkit-transform:translateY(0);}
}
@-moz-keyframes bounceinB{
    0%{opacity:0;-webkit-transform:translateY(100px);}
    100%{opacity:1;-webkit-transform:translateY(0);}
}
@-ms-keyframes bounceinB{
    0%{opacity:0;-webkit-transform:translateY(100px);}
    100%{opacity:1;-webkit-transform:translateY(0);}
}
@keyframes bounceinB{
    0%{opacity:0;-webkit-transform:translateY(100px);}
    100%{opacity:1;-webkit-transform:translateY(0);}
}


/* 淡入-从上 */
@-webkit-keyframes fadeinT{
    0%{opacity:0;-webkit-transform:translateY(-100px);}
    100%{opacity:1;-webkit-transform:translateY(0);}
}
@-moz-keyframes fadeinT{
    0%{opacity:0;-moz-transform:translateY(-100px);}
    100%{opacity:1;-moz-transform:translateY(0);}
}
@-ms-keyframes fadeinT{
    0%{opacity:0;-ms-transform:translateY(-100px);}
    100%{opacity:1;-ms-transform:translateY(0);}
}
@keyframes fadeinT{
    0%{opacity:0;transform:translateY(-100px);}
    100%{opacity:1;transform:translateY(0);}
}


/* 翻入-X轴 */
@-webkit-keyframes flipinX{
    0%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;}
    40%{-webkit-transform:perspective(400px) rotateX(-10deg);}
    70%{-webkit-transform:perspective(400px) rotateX(10deg);}
    100%{-webkit-transform:perspective(400px) rotateX(0);opacity:1;}
}
@-moz-keyframes flipinX{
    0%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0;}
    40%{-moz-transform:perspective(400px) rotateX(-10deg);}
    70%{-moz-transform:perspective(400px) rotateX(10deg);}
    100%{-moz-transform:perspective(400px) rotateX(0);opacity:1;}
}
@-ms-keyframes flipinX{
    0%{-ms-transform:perspective(400px) rotateX(90deg);opacity:0;}
    40%{-ms-transform:perspective(400px) rotateX(-10deg);}
    70%{-ms-transform:perspective(400px) rotateX(10deg);}
    100%{-ms-transform:perspective(400px) rotateX(0);opacity:1;}
}
@keyframes flipinX{
    0%{transform:perspective(400px) rotateX(90deg);opacity:0;}
    40%{transform:perspective(400px) rotateX(-10deg);}
    70%{transform:perspective(400px) rotateX(10deg);}
    100%{transform:perspective(400px) rotateX(0);opacity:1;}
}


/* 转入-从左下 */
@-webkit-keyframes rotateinLB{
    0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0;}
    100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}
}
@-moz-keyframes rotateinLB{
    0%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0;}
    100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;}
}
@-ms-keyframes rotateinLB{
    0%{-ms-transform-origin:left bottom;-ms-transform:rotate(90deg);opacity:0;}
    100%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;}
}
@keyframes rotateinLB{
    0%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;}
    100%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
}

/* 弹入-从左 */
@-webkit-keyframes bounceinL{
    0%{opacity:0;-webkit-transform:translateX(-100px);}
    60%{opacity:1;-webkit-transform:translateX(30px);}
    80%{-webkit-transform:translateX(-10px);}
    100%{-webkit-transform:translateX(0);}
}
@-moz-keyframes bounceinL{
    0%{opacity:0;-moz-transform:translateX(-100px);}
    60%{opacity:1;-moz-transform:translateX(30px);}
    80%{-moz-transform:translateX(-10px);}
    100%{-moz-transform:translateX(0);}
}
@-ms-keyframes bounceinL{
    0%{opacity:0;-ms-transform:translateX(-100px);}
    60%{opacity:1;-ms-transform:translateX(30px);}
    80%{-ms-transform:translateX(-10px);}
    100%{-ms-transform:translateX(0);}
}
@keyframes bounceinL{
    0%{opacity:0;transform:translateX(-100px);}
    60%{opacity:1;transform:translateX(30px);}
    80%{transform:translateX(-10px);}
    100%{transform:translateX(0);}
}

/* 弹入-从下 */
@-webkit-keyframes bounceinB{
    0%{opacity:0;-webkit-transform:translateY(100px);}
    60%{opacity:1;-webkit-transform:translateY(0px);}
    80%{-webkit-transform:translateY(0px);}
    100%{-webkit-transform:translateY(0);}
}
@-moz-keyframes bounceinB{
    0%{opacity:0;-moz-transform:translateY(100px);}
    // 60%{opacity:1;-moz-transform:translateY(-30px);}
    // 80%{-moz-transform:translateY(10px);}
    60%{opacity:1;-webkit-transform:translateY(0px);}
    80%{-webkit-transform:translateY(0px);}
    100%{-moz-transform:translateY(0);}
}
@-ms-keyframes bounceinB{
    0%{opacity:0;-ms-transform:translateY(100px);}
    60%{opacity:1;-webkit-transform:translateY(0px);}
    80%{-webkit-transform:translateY(0px);}
    100%{-ms-transform:translateY(0);}
}
@keyframes bounceinB{
    0%{opacity:0;transform:translateY(100px);}
    60%{opacity:1;-webkit-transform:translateY(0px);}
    80%{-webkit-transform:translateY(0px);}
    100%{transform:translateY(0);}
}


/* 震颤 */
@-webkit-keyframes shake{
    0%,100%{-webkit-transform:translateX(0);}
    10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);}
    20%,40%,60%,80%{-webkit-transform:translateX(10px);}
}
@-moz-keyframes shake{
    0%,100%{-moz-transform:translateX(0);}
    10%,30%,50%,70%,90%{-moz-transform:translateX(-10px);}
    20%,40%,60%,80%{-moz-transform:translateX(10px);}
}
@-ms-keyframes shake{
    0%,100%{-ms-transform:translateX(0);}
    10%,30%,50%,70%,90%{-ms-transform:translateX(-10px);}
    20%,40%,60%,80%{-ms-transform:translateX(10px);}
}
@keyframes shake{
    0%,100%{transform:translateX(0);}
    10%,30%,50%,70%,90%{transform:translateX(-10px);}
    20%,40%,60%,80%{transform:translateX(10px);}
}

/* 淡入-从左 */
@-webkit-keyframes fadeinL{
    0%{opacity:0;-webkit-transform:translateX(-100px);}
    100%{opacity:1;-webkit-transform:translateX(0);}
}
@-moz-keyframes fadeinL{
    0%{opacity:0;-moz-transform:translateX(-100px);}
    100%{opacity:1;-moz-transform:translateX(0);}
}
@-ms-keyframes fadeinL{
    0%{opacity:0;-ms-transform:translateX(-100px);}
    100%{opacity:1;-ms-transform:translateX(0);}
}
@keyframes fadeinL{
    0%{opacity:0;transform:translateX(-100px);}
    100%{opacity:1;transform:translateX(0);}
}