/* 防止css污染 */
/* yj-pic-box */
.yj-pic-box {
    display:inline-block;text-align:left;
}
.yj-pic-box>.box {
    position:relative;
}
.yj-pic-box>.box>.container {
    width:100%;height:100%;overflow:hidden;
}
.yj-pic-box>.box>.container>ul {
    list-style:none;height:100%;transition: all 0.5s;
}
.yj-pic-box>.box>.container>ul>li {
    height:100%;
}
.yj-pic-box>.box>.side {
    position:absolute;width:40px;height:40px;border-radius:20px;background-color:#000;transition:all 0.5s ease-out;cursor:pointer;
}
.yj-pic-box>.box>.side>i {
    position:absolute;display:inline-block;margin-top:-8px;top:50%;margin-left:-8px;left:50%;color:#fff;font-size:16px;
}
.yj-pic-box>.box>.left {
    margin-top:-20px;top:50%;left:15px;
}
.yj-pic-box>.box>.right {
    margin-top:-20px;top:50%;right:15px;
}
.yj-pic-box>.box>.top {
    margin-left:-20px;left:50%;top:15px;
}
.yj-pic-box>.box>.bottom {
    margin-left:-20px;left:50%;bottom:15px;
}
.yj-pic-box>.box>.title {
    position:absolute;width:100%;height:30px;line-height:30px;left:0px;bottom:0px;padding:0px 15px;background-color:#000;opacity:0.8;overflow:hidden;text-align:center;color:#fff;font-size:14px;
}
.yj-pic-box>.box>.btns {
    position:absolute;
}
.yj-pic-box>.box>.btns>span {
    width:10px;height:10px;border-radius:5px;background-color:#fff;opacity:0.5;transition:all 0.5s ease-out;cursor:pointer;
}
.yj-pic-box>.box>.btns>span:hover {
    opacity:1;
}
.yj-pic-box>.box>.horizontal {
    width:100%;height:40px;left:0px;bottom:0px;display:flex;align-items:center;justify-content:center;
}
.yj-pic-box>.box>.horizontal>span {
    margin-right:5px;
}
.yj-pic-box>.box>.vertical {
    height:100%;width:40px;right:0px;top:0px;display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.yj-pic-box>.box>.vertical>span {
    margin-bottom:5px;
}
/* classic */
.yj-pic-box>.box>.prev,.yj-pic-box>.box>.next {
    position:absolute;width:45px;height:100px;margin-top:-50px;top:50%;background-image:url(/content/images/sprite.png);background-repeat:no-repeat;opacity:0.3;transition:all 0.5s ease-out;cursor:pointer;
}
.yj-pic-box>.box>.prev:hover,.yj-pic-box>.box>.next:hover {
    opacity:0.5;
}
.yj-pic-box>.box>.prev {
    left:0px;background-position:left top;
}
.yj-pic-box>.box>.next {
    right:0px;background-position:right top;
}
/* yj-bgpic-box */
.yj-bgpic-box {
    width:100%;
}
.yj-bgpic-box>.box {
    position:relative;width:100%;transition:all 0.5s;
}
.yj-bgpic-box>.box>.side {
    position:absolute;width:40px;height:40px;margin-top:-20px;top:50%;border-radius:20px;background-color:#000;transition:all 0.5s ease-out;cursor:pointer;
}
.yj-bgpic-box>.box>.side>i {
    position:absolute;display:inline-block;margin-top:-8px;top:50%;margin-left:-8px;left:50%;color:#fff;font-size:16px;
}
.yj-bgpic-box>.box>.btns {
    position:absolute;width:100%;height:40px;left:0px;bottom:0px;display:flex;align-items:center;justify-content:center;
}
.yj-bgpic-box>.box>.btns>span {
    width:10px;height:10px;border-radius:5px;margin-right:5px;background-color:#fff;opacity:0.5;transition:all 0.5s ease-out;cursor:pointer; 
}
.yj-bgpic-box>.box>.btns>span:hover {
    opacity:1;
}
/* yj-scroll */
.yj-scroll {
    display:inline-block;text-align:left;
}
.yj-scroll>ul {
    list-style:none;
}
.yj-scroll>ul>li {
    position:relative;
}
.yj-scroll>ul>.left,.yj-scroll>ul>.right {
    width:30px;height:100%;
}
.yj-scroll>ul>.up,.yj-scroll>ul>.down {
    width:100%;height:30px;
}
.yj-scroll>ul>li>i {
    position:absolute;display:inline-block;
    margin-left:-15px;left:50%;margin-top:-15px;top:50%;color:#666;font-size:30px;cursor:pointer;
}