body,ul{margin: 0;padding:0}
li{list-style: none}
button:focus{outline: 0}
.wrap,.btn{
    position: relative;
    width:600px;
    height: 335px;
    margin: 35px auto
}
.btn{ height: 65px; text-align: center;}
.wrap>ul>li{
    position: absolute;
    display: none;
    width:100%;
    height:100%;
    color:#fff;
    text-align:center;
    line-height:335px;
    font-size:48px;
}
.wrap>ul>li.active{ display: block;}
.arrow{
    position: absolute;
    width: 25px;
    height: 50px;
    top:50%;
    margin-top: -25px;
    color:#fff;
    line-height: 50px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    background-color: rgba(51,136,125,.5);
}
.arrow:hover{ background-color: rgba(51,136,125,.9);}
.a-left{ left: 0;}
.a-right{right: 0;}
.intro{
    position: absolute;
    width: 100%;
    height: 38px;
    line-height: 38px;
    font-size:16px;
    color:#fff;
    text-align: center;
    background-color: rgba(0,0,0,.6);
}
.t-num{ top: 0;}
.b-title{ bottom: 0;}
.btn>button{
    width: 100px;
    height: 38px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    background-color: MediumVioletRed;
    border:solid 1px #ccc;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    margin: 15px;
    cursor: pointer;
}
.btn>button.active{background-color: orange}
.btn>button:hover{background-color: #935404}