@charset "UTF-8";
/* CSS Document */

#servicesArea{
padding: 60px 10px 100px;
}

@media screen and (max-width: 999px){
#servicesArea{
padding: 40px 10px 50px;
}
}/*999*/





#servicesArea>div{
max-width: 1000px;
margin: 0 auto;
}





#servicesTag{
margin-bottom: 50px;
}
#servicesTag>ul{
display: flex;
flex-wrap: wrap;
margin: -10px 0 0 -10px;
}
#servicesTag>ul>li{
margin: 10px 0 0 10px;
}
#servicesTag>ul>li>a{
display: block;
position: relative;
color: #ffffff;
background-color:#387ebe;
font-size: 0.875rem;
text-decoration: none;
padding: 7px 20px 7px 33px;
transition: background 100ms ease;
}
#servicesTag>ul>li>a::before{
content: '';
display: block;
position: absolute;
top: 50%;
left: 20px;
transform: translate(0, -50%);
border-top: 6px solid rgba(255,255,255,1.0);
border-right: 4px solid rgba(255,255,255,0);
border-bottom: 0px solid rgba(255,255,255,0);
border-left: 4px solid rgba(255,255,255,0);
}
#servicesTag>ul>li>a:hover{
background-color: #67cecc;
}





#servicesMain .servicesMainBox+.servicesMainBox{
margin-top: 100px;
}
#servicesMain .servicesMainBox ul{
display: flex;
flex-wrap: wrap;
margin: -50px 0 0 -40px;
}
#servicesMain .servicesMainBox ul li{
width: 50%;
padding-left: 40px;
margin-top: 80px;
}
#servicesMain .servicesMainBox ul li figure{
position: relative;
padding-top: 60%;
border-radius: 20px;
overflow: hidden;
}
#servicesMain .servicesMainBox ul li figure img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
#servicesMain .servicesMainBox ul li h3{
font-size: 1.5rem;
line-height: 1.5;
font-weight: 700;
margin-top: 1em;
}
#servicesMain .servicesMainBox ul li p{
margin-top: 1em;
}

@media screen and (max-width: 999px){
#servicesMain .servicesMainBox+.servicesMainBox{
margin-top: 80px;
}
#servicesMain .servicesMainBox ul{
margin: -40px 0 0 0;
}
#servicesMain .servicesMainBox ul li{
width: 100%;
padding-left: 0;
margin-top: 60px;
}
}/*999*/