body{
    position: relative;
}

.close {

    color: #fff;
    border-radius: 12px;
    line-height: 20px;
    text-align: center;
    height: 20px;
    width: 20px;
    font-size: 18px;
    padding: 1px;
    top: -10px;
    right: -10px;
    position: absolute;
    z-index: 2;
    background: url("../images/cccc.png");
    background-size: cover;
}
/* use cross as close button */


.suol{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.9);
    /* position: absolute; */
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    position: fixed;
    /* overflow: hidden; */
    /*display: none;*/
}

/* 效果CSS开始 */
.mod18 {
    width: 677px;
    position: relative;
    margin: 0 auto;
    top:50%;
}

.mod18 .btn {
    position: absolute;
    cursor: pointer;
    z-index: 99;
    font-size: 50px;
    font-weight: bold;
}

.mod18 .prev {
    left: -60px;
    background: url(../images/prevBtnTop.png) no-repeat;
    background-size: cover;
}

.mod18 #prevTop, .mod18 #nextTop {
    top: 222px;
    width: 52px;
    height: 52px;
}

.mod18 #prev, .mod18 #next {
    top: 464px;
    width: 20px;
    height: 20px;
}

.mod18 #prevTop {
    background: url(../images/prevBtnTop.png) 0 0 no-repeat;

}

.mod18 #nextTop {
    background: url(../images/nextBtnTop.png) 0 0 no-repeat;
}

.mod18 .next {
    right: -60px;
    background: url(../images/nextBtnTop.png) no-repeat;
    background-size: cover;
}

.mod18 li {
    float: left;
}

.mod18 .cf li {
    position: relative;
    color: #fff;
}

.mod18 .cf a {
    display: block;
    width: 600px;
    height: 400px;
    position: absolute;
    color: #fff;
}

.mod18 .cf li span {
    display: block;
    width: 486px;
    position: absolute;
    left: 75px;
    bottom: 0;
    padding: 10px 20px;
    line-height: 22px;
    text-align: left;
    background: rgba(0, 0, 0, 0.6);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr="#60000000", endColorstr="#60000000");
}

.mod18 .picBox {
    width: 677px;
    height: 400px;
    /*padding-left: 75px;*/
    /*padding-right: 76px;*/
    position: relative;
    overflow: hidden;
    background: #0D0D0D;
    /*padding-top: 40px;*/
}

.mod18 .picBox ul {
    height: 377px;
    position: absolute;
    left: 0;
}

.mod18 .picBox li {
    /*padding-left: 75px;*/
    /*padding-right: 1px;*/
    width: 677px;
    height: 400px;
}
.mod18 .picBox li img{
    width: 100%;
}

.mod18 .listBox {
    width: 677px;
    height: 100px;
    margin: 0 auto;
    position: relative;
    padding-top: 15px;
    overflow: hidden;
}

.mod18 .listBox ul {
    height: 100px;
    position: absolute;
    /*padding-left: 12px;*/
}

.mod18 .listBox li {
    width: 134px;
    height: 100px;
    cursor: pointer;
    position: relative;
    padding: 5px 0 0 0;
}

.mod18 .listBox li i {
    display: none;
}

.mod18 .listBox li a {
    display: block;
    width: 108px;
    height: 77px;
}

.mod18 .listBox img {
    border: 3px solid #fff;
    width: 100%;
    height: 100%;
}

.mod18 .listBox .on img {
    border: 3px solid #CECDCC;
}

/*.mod18 .listBox .on{background:url(../images/img_bg.jpg) center top no-repeat;}*/
.mod18 .listBox .on i {
    display: block;
}
.gallery-top,.gallery-top img{
    width: 600px;
}
.gallery-thumbs .swiper-wrapper{
    height: 100px;
}
.gallery-thumbs {
    width: 600px !important;
}