@charset "UTF-8";
#case .case_cat{
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-pack: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
margin-bottom: 100px;
}

#case .case_cat li{
margin: 0 15px;
}

#case .case_cat li a{
font-size: 16px;
font-weight: bold;
color: #ccc;
padding-bottom: 10px;
border-bottom: 3px solid #fff;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}

#case .case_cat li a:hover,#case .case_cat li a.active{
color: #14429a;
border-bottom: 3px solid #14429a;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}

#case .case_list{
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 100px;
}

#case .case_list li{
width: 31%;
margin-right: 3.5%;
margin-bottom: 50px;
}

#case .case_list li:nth-child(3n){
margin-right: 0;
}

#case .case_list li a .img{
display: block;
position: relative;
padding-top: 66.6666%;
overflow: hidden;
}

#case .case_list li a .img img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}

#case .case_list li a:hover .img img{
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}

#case .case_list li a .title{
color: #14429a;
font-size: 18px;
font-weight: bold;
display: block;
padding: 10px;
}

#case .case_list li a .disc{
font-size: 13px;
color: #000;
line-height: 1.8em;
display: block;
padding:0 10px 10px;
}


.pager{
text-align: center;
margin-bottom: 100px;
}

.pager a{
color: #000;
text-decoration: none;
display: inline-block;
margin: 0 5px;
font-size: 14px;
line-height: 1em;
font-weight: bold;
padding: 10px 15px;
background: #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.pager a.current,.pager a:hover{
background: #eee;
}


@media screen and (max-width: 810px) {
#case .case_cat{
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack:flex-start;
-webkit-box-pack:flex-start;
-webkit-justify-content:flex-start;
justify-content: flex-start;
margin-bottom: 60px;
}

#case .case_cat li{
flex-basis: 48%;
margin: 0 0 20px;
margin-right: 4%;
}

#case .case_cat li:nth-child(2n){
margin-right: 0;
}

#case .case_cat li a{
display:block; 
font-size: 14px;
border-bottom: 3px solid #ccc;
}

#case .case_list{
display:block;
margin-bottom: 100px;
}

#case .case_list li{
width: 100%;
margin-right: 0;
margin-bottom: 50px;
}

#case .case_list li a .title{
font-size: 16px;
}

#case .case_list li a .disc{
font-size: 12px;
}


}