.wrap-photo1 .more {position: absolute; right: 15.8rem; top: -10.8rem; display: block; width: 3rem; height: 3rem; background: url('../images/btn-photo-more.png') no-repeat center / cover; text-indent: -9999rem; transition: transform .35s;z-index: 1;}
.wrap-photo1 .more:hover {transform: rotate(270deg);}
.wrap-photo1 .list {margin-top: 6rem;}
.wrap-photo1 .list ul {display: flex; width: calc(100% + 4rem)}
.wrap-photo1 .list li {padding-right: 4rem; padding-bottom: 4rem;}
.wrap-photo1 .list a {position: relative; display: block;}
.wrap-photo1 .list a::after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 170,229,.8) url('../images/btn-photo.png') no-repeat center; opacity: 0; transition: .35s;}
.wrap-photo1 .list a:hover::after {opacity: 1;}

@media screen and (max-width: 1640px) {
  	.wrap-photo1 .more {right: 4rem;}
}

@media screen and (max-width: 1024px) {
  	.wrap-photo1 .list {margin-top: 5rem;}
  	.wrap-photo1 .list ul {width: 100%;margin-bottom: 3rem;}
  	.wrap-photo1 .list li {width: 38.4rem !important;padding-right: 3rem;padding-bottom: 0.5rem;}
  	.wrap-photo1 .more {width: 2.4rem;height: 2.4rem;top: -9rem;}
}

@media screen and (max-width: 768px) {
  	.wrap-photo1 .list {margin-top: 3.5rem;}
  	.wrap-photo1 .list ul {margin-bottom: 2.5rem;}
  	.wrap-photo1 .list li {width: 32rem !important; padding-right: 2.5rem;padding-bottom: 0;}
  	.wrap-photo1 .more {right: 2rem;top: -7.2rem;}
  	.wrap-photo1 .list a::after {background-size: 3rem;}
}