.photo-mode1 .box{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}
.photo-mode1 .info{width:48%}
.photo-mode1 .info .title{font-size:36px;font-weight:600}
.photo-mode1 .info .text{font-size:18px;margin-top:10px}
.photo-mode1 .info .more{width:160px;height:46px;border-radius:2px;color:#fff;background-color:var(--color);display:inline-flex;align-items:center;justify-content:center;margin-top:40px;cursor:pointer}
.photo-mode1 .img{width:48%}
.photo-mode2 .list{display:flex;flex-wrap:wrap}
.photo-mode2 .list li{width:23.5%;margin-right:2%;display:inline-flex;align-items:center;justify-content:center;height:46px;padding:10px;border-radius:4px;background-color:#fff;box-sizing:border-box;border:1px solid #ebebeb;margin-bottom:20px;cursor:pointer}
.photo-mode2 .list li:nth-child(4n){margin-right:0}
.photo-mode2 .list li.act{color:var(--color);border-color:var(--color)}
.photo-mode2 .img-list{display:flex;flex-wrap:wrap;width:calc(100% + 1%)}
.photo-mode2 .img-list li{margin-top:20px;cursor:pointer;margin-right:1.3%}
.photo-mode2 .img-list li .img{width:100%;height:270px;overflow:hidden;border-radius:4px;border:1px solid transparent;transition:all .2s linear}
.photo-mode2 .img-list li .img img{width:100%;height:100%;object-fit:cover;transition:all .2s linear}
.photo-mode2 .img-list li .tit{text-align:center;margin-top:20px;color:#010101;transition:all .2s linear}
.photo-mode2 .img-list li:hover .img{border-color:var(--color)}
.photo-mode2 .img-list li:hover .img img{transform:scale(1.03)}
.photo-mode2 .img-list li:hover .tit{color:var(--color)}
.photo-mode2 .img-list.actlist li{width:31%!important;margin-right:2%!important}
.photo-mode2 .img-list .imgwidth1{width:31%}
.photo-mode2 .img-list .imgwidth1 .img{aspect-ratio:4/3}
.photo-mode2 .img-list .imgwidth2{width:34%}
.photo-mode2 .img-list .imgwidth2 .img{aspect-ratio:3/2}
.photo-mode2 .img-list .imgwidth3{width:25%}
.photo-mode2 .img-list .imgwidth3 .img{aspect-ratio:1/1}
.photo-mode2 .img-list .imgwidth4{width:35.5%}
.photo-mode2 .img-list .imgwidth4 .img{aspect-ratio:3/2}
.photo-mode2 .img-list .imgwidth5{width:32%}
.photo-mode2 .img-list .imgwidth5 .img{aspect-ratio:4/3}
.photo-dialog{position:fixed;width:100vw;height:100vh;left:0;top:0;z-index:9999;background-color:rgba(0,0,0,.5);display:none}
.photo-dialog .photo-box{background-color:#fff;width:880px;position:absolute;top:10%;right:40px;border-radius:6px;overflow:hidden}
.photo-dialog .photo-box .head{height:80px;background-color:#f9f8f6;text-align:center;display:flex;align-items:center;padding:10px 20px}
.photo-dialog .photo-box .head .title{width:100%;text-align:center;color:#000;font-size:20px;font-weight:700}
.photo-dialog .photo-box .head .close{position:absolute;right:20px;cursor:pointer;width:36px;height:36px;background-color:rgba(0,0,0,.3);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;transition:all .2s linear}
.photo-dialog .photo-box .head .close em{font-size:12px}
.photo-dialog .photo-box .head .close:hover{background-color:var(--color)}
.photo-dialog .photo-box .box{padding:20px 40px 40px;position:relative}
.photo-dialog .photo-box .box .img-box{position:relative}
.photo-dialog .photo-box .box .img{overflow:hidden;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;height:600px;width:100%}
.photo-dialog .photo-box .box .img img{max-height:100%;max-width:100%;}
.photo-dialog .photo-box .box .more{margin-top:20px;display:flex;align-items:center;justify-content:center;height:46px;background-color:var(--color);border-radius:4px;color:#fff}
.photo-dialog .photo-box .box .more img{margin-right:6px}
.photo-dialog .photo-box .box .photo-next,.photo-dialog .photo-box .box .photo-prev{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;background-color:rgba(0,0,0,.5);color:#fff;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.photo-dialog .photo-box .box .photo-next:hover,.photo-dialog .photo-box .box .photo-prev:hover{background-color:var(--color)}
.photo-dialog .photo-box .box .photo-prev{left:20px}
.photo-dialog .photo-box .box .photo-prev em{transform:rotate(90deg)}
.photo-dialog .photo-box .box .photo-next{right:20px}
.photo-dialog .photo-box .box .photo-next em{transform:rotate(-90deg)}
@media screen and (max-width:1440px){.photo-dialog .photo-box{width:700px}
.photo-dialog .photo-box .box .img{height:450px}
}
@media screen and (max-width:1280px){.photo-dialog .photo-box .head{height:52px}
.photo-dialog .photo-box .head .title{font-size:16px}
.photo-dialog .photo-box .head .close{width:24px;height:24px}
.photo-dialog .photo-box{width:560px}
.photo-dialog .photo-box .box{padding:20px}
.photo-dialog .photo-box .box .img{height:320px}
}
@media screen and (max-width:1024px){.photo-mode1 .info .title{font-size:26px}
.photo-mode2 .list li{height:64px}
}
@media screen and (max-width:768px){.photo-mode1 .info{width:100%}
.photo-mode1 .info .more{margin-top:20px}
.photo-mode1 .img{width:100%;margin-top:25px}
.photo-dialog .photo-box{width:98%;left:50%;transform:translateX(-50%)}
.photo-mode2 .img-list{justify-content:space-between;width:100%}
.photo-mode2 .img-list li{width:49%!important;margin-right:0}
.photo-mode2 .img-list li .tit{font-size:14px}
.photo-dialog .photo-box .box .img{height:420px}
.photo-dialog .photo-box .box .photo-next,.photo-dialog .photo-box .box .photo-prev{width:36px;height:36px}
}
@media screen and (max-width:500px){.photo-dialog .photo-box .box .img{height:240px}
.photo-dialog .photo-box .head .title{padding:0 20px}
.photo-mode2 .img-list li .img{height:132px}
.photo-mode2 .list{justify-content:space-between}
.photo-mode2 .list li{width:49%;margin-right:0}
.photo-dialog .photo-box .box .more{height:42px;margin-top:10px}
}