.gallery{

    width:60%;

    margin:0 auto 100px;

    position:relative;

}


.gallery-image{

    width:100%;

    display:block;

}


.gallery .nav{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    background:none;

    border:none;

}


.gallery .left{

    left:-80px;

}


.gallery .right{

    right:-80px;

}


.gallery .nav img{

    width:35px;

}


.dots{

    display:flex;

    justify-content:center;

    gap:10px;

    margin-top:15px;

}


.dot{

    width:10px;

    height:10px;

    border:1px solid black;

    border-radius:50%;

}


.dot.active{

    background:black;

}


@media(max-width:768px){


.gallery{

    width:100%;

}


.gallery .left{

    left:10px;

}


.gallery .right{

    right:10px;

}

}

@media(max-width:768px){


/* =========================
   GALLERY MOBILE
========================= */


.gallery{

    width:82%;

    margin:40px auto 60px;

}


/* 图片 */

.gallery-image{

    width:90%;
    
    margin:0 auto;

}


/* 左右切换按钮 */

.gallery .left{

    left:-28px;

}


.gallery .right{

    right:-28px;

}


/* 按钮图标尺寸 */

.gallery .nav img{

    width:18px;

}


/* 按钮本身 */

.gallery .nav{

    top:50%;

}



/* =========================
   DOTS
========================= */


.dots{

    gap:8px;

    margin-top:12px;

}


.dot{

    width:8px;

    height:8px;

}


}