.sign{
    width: 228px;
    height: 178px;
    background: url("../Images/sign.png") no-repeat center center;
    position: absolute;
    bottom: 0px;
    left: 50%;
    margin-left: 220px;
    z-index: 3;
}

.slider{
    width: 100%;
    height: 550px;
    position: relative;
}

.slider section{
    width: 100%;
    height: 550px;
    position: absolute;
    left: 100%;
    top: 0px;
}

.slider section.current{
    left: 0px;
}

.slider .detail{
    display: inline-block;
    background: #c2121c url("../Images/detail-arrow.gif") no-repeat 80px center;
    border-radius: 5px;
    color: #ffffff;
    line-height: 34px;
    padding: 0px 30px 0px 10px;
    position: absolute;
    left: 50%;
    bottom: 20%;
    margin-left: 2px;
    opacity: 0;
}

.slider section.current .detail{
    opacity: 1;
    margin-left: -48px;
    transition: all 1s ease 1s;
}

.slider-nav{
    width: 100%;
    height: 63px;
    line-height: 50px;
    position: absolute;
    left: 0px;
    bottom: 0px;
    background: url("../Images/slideMask.png") no-repeat bottom center;
    text-align: center;
    z-index: 2;
}

.slider-nav a{
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 9px;
    background: #ffffff;
    text-decoration: none;
    margin: 0px 20px;
    vertical-align: middle;
    outline: none;
}

.slider-nav a.nav{
    width: 18px;
    height: 18px;
    border-radius: 9px;
    background: #ffffff;
    transition: all 200ms ease 0s;
}

.slider-nav a.current{
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background: #c8000b;
    transition: all 200ms ease 0s;
}

.scs{
    background: url("../Images/scs-1.jpg") no-repeat center center;
}
.scs .slug{
    left: 55%;
    top: 35%;
    width: 400px;
    height: 150px;
    position: absolute;
}
.scs .slug span{
    display: inline-block;
}
.scs .slug .left{
    width: 140px;
    height: 150px;
    background: url("../Images/scs-slug-01.png") no-repeat right center;
    opacity: 0;
    position: absolute;
    left: 0px;
    top: -50px;
}
.scs .slug .center{
    width: 80px;
    height: 0px;
    background: url("../Images/slider-line.png") no-repeat center center;
    position: absolute;
    left: 140px;
    top: 0px;
    opacity: 0;
}
.scs .slug .right{
    width: 180px;
    height: 150px;
    background: url("../Images/scs-slug-02.png") no-repeat left center;
    opacity: 0;
    position: absolute;
    left: 220px;
    top: 50px;
}
.scs .current .left{
    opacity: 1;
    top: 0px;
    transition: all 1s ease 500ms;
}
.scs .current .center{
    opacity: 1;
    height: 150px;
    transition: all 500ms ease 0s;
}
.scs .current .right{
    opacity: 1;
    top: 0px;
    transition: all 1s ease 1s;
}

.apf{
    background: url("../Images/apf-1.jpg") no-repeat center center;
}
.apf .slug{
    left: 36%;
    top: 20%;
    width: 400px;
    height: 150px;
    position: absolute;
}
.apf .slug span{
    display: inline-block;
}
.apf .slug .left{
    width: 140px;
    height: 150px;
    background: url("../Images/apf-slug-01.png") no-repeat right center;
    opacity: 0;
    position: absolute;
    left: 0px;
    top: -50px;
}
.apf .slug .center{
    width: 80px;
    height: 0px;
    background: url("../Images/slider-line.png") no-repeat center center;
    position: absolute;
    left: 140px;
    top: 0px;
    opacity: 0;
}
.apf .slug .right{
    width: 180px;
    height: 150px;
    background: url("../Images/apf-slug-02.png") no-repeat left center;
    opacity: 0;
    position: absolute;
    left: 220px;
    top: 50px;
}
.apf .current .left{
    opacity: 1;
    top: 0px;
    transition: all 1s ease 500ms;
}
.apf .current .center{
    opacity: 1;
    height: 150px;
    transition: all 500ms ease 0s;
}
.apf .current .right{
    opacity: 1;
    top: 0px;
    transition: all 1s ease 1s;
}

.trust{
    background: url("../Images/trust.jpg") no-repeat center center;
}
.trust .slug{
    left: 50%;
    top: 30%;
    width: 716px;
    height: 130px;
    margin-left: -358px;
    position: absolute;
}
.trust .slug span{
    display: inline-block;
}
.trust .slug .top{
    width: 716px;
    height: 55px;
    background: url("../Images/trust-slug-01.png") no-repeat center center;
    opacity: 0;
    position: absolute;
    left: 0px;
    top: -50px;
}
.trust .slug .bottom{
    width: 716px;
    height: 55px;
    background: url("../Images/trust-slug-02.png") no-repeat center center;
    opacity: 0;
    position: absolute;
    left: 0px;
    bottom: -50px;
}
.trust .current .top{
    opacity: 1;
    top: 0px;
    transition: all 500ms ease 500ms;
}
.trust .current .bottom{
    opacity: 1;
    bottom: 0px;
    transition: all 1s ease 1s;
}

.controller{
    background: url("../Images/controller.jpg") no-repeat center center;
}
.controller .slug{
    left: 25%;
    top: 10%;
    width: 490px;
    height: 370px;
    margin-left: -53px;
    position: absolute;
}
.controller .slug span{
    display: inline-block;
}
.controller .slug .top{
    width: 430px;
    height: 249px;
    background: url("../Images/controller-slug-01.png")no-repeat left center;
    opacity: 0;
    position: absolute;
    top: 0px;
    left: 50px;
}
.controller .slug .middle{
    width: 430px;
    height: 42px;
    background: url("../Images/controller-slug-02.png") no-repeat left center;
    opacity: 0;
    position: absolute;
    top: 259px;
    left: 50px;
}
.controller .slug .bottom{
    width: 430px;
    height: 53px;
    background: url("../Images/controller-slug-03.png") no-repeat left center;
    opacity: 0;
    position: absolute;
    top: 311px;
    left: 50px;
}
.controller .current .top{
    opacity: 1;
    left: 0px;
    transition: all 500ms ease 500ms;
}
.controller .current .middle{
    opacity: 1;
    left: 0px;
    transition: all 500ms ease 700ms;
}
.controller .current .bottom{
    opacity: 1;
    left: 0px;
    transition: all 500ms ease 900ms;
}
.slider .controller .detail{
    left: 25%;
    bottom: 15%;
}

.slider-arrow{ position: absolute; top: 10%; width: 130px; height: 80%; cursor: pointer; z-index: 100;}
.slider-left{ left: 100px;}
.slider-right{ right: 100px;}
.slider-arrow .arrow{ position: absolute; top: 50%; margin-top: -50px; width: 100px; height: 100px; opacity: 0; -webkit-transition:all 0.2s ease-out; -moz-transition:all 0.2s ease-out; -o-transition:all 0.2s ease-out; -ms-transition:all 0.2s ease-out; transition:all 0.2s ease-out;}
.slider-left .arrow{ left: 30px; background: rgba(0, 0, 0, 0.5) url("../Images/arrow-left-light.png") no-repeat center center;}
.slider-right .arrow{ right: 30px; background: rgba(0, 0, 0, 0.5) url("../Images/arrow-right-light.png") no-repeat center center;}
.slider-left:hover .arrow{ opacity: 1; left: 0px;}
.slider-right:hover .arrow{ opacity: 1; right: 0px;}