@charset 'utf-8';

@media all and (max-width:479px){

	.photo-area .photo-box ul{grid-template-columns: 1fr;}
	/* .photo-area .photo-box ul li{width: 100%} */

}

@media all and (min-width:480px) and (max-width:767px){

    h4{width: 95% !important}

    .photo-area .photo-box ul{overflow: hidden; grid-template-columns: repeat(2, 1fr);}
	/* .photo-area .photo-box ul li{width: 50%;float: left} */

}

@media all and (min-width:768px) and (max-width:1279px){

    h4{width: 95% !important}

    .photo-area .photo-box ul{overflow: hidden ;  grid-template-columns: repeat(2, 1fr);}
	/* .photo-area .photo-box ul li{width: 33.3%;float: left} */

}

@media all and (min-width:1280px){
    
    .nav-box ul li:nth-child(4){border-bottom: 2px solid #41e6f7}
    h4{width: 100%}

    .photo-area .photo-box ul{overflow: hidden}
	/* .photo-area .photo-box ul li{width: 33.3%;float: left} */

}

h4{font-size: 1.5em;margin: 0 0 30px 0;padding: 0 0 10px 0; border-bottom: 1px solid #ccc}

.photo-area .photo-box ul{display: grid; grid-template-columns: repeat(3, 1fr); gap:30px;}
.photo-area .photo-box ul li{height: 250px;}
.photo-area .photo-box ul li span{display: block;border:1px solid #eeeeee; width: 100%;margin: 0 auto;height: 100%;background-size: cover;background-position: center;}