.friendly{padding:100px 0; position:relative;}
.friendly-title{text-align:center;}
.friendly-title>h2{font-size:38px; margin-bottom:15px;}
.friendly-title>p{font-size:16px; color:#686868;}
.friendly-box{display:block; margin-top:60px;}
.friendly-box>ul{display:block; margin:0 -12px;}
.friendly-box>ul:after{display:block; content:''; clear:both;}
.friendly-box>ul>li{float:left; width:33.3333%; padding:12px;}
.friendly-box>ul>li>span{display:block; width:100%; padding-bottom:100%; position:relative; overflow:hidden; background:#f2f3f4;}
.friendly-box>ul>li>span>aside{position:absolute; width:100%; height:100%; left:0; top:0; text-align:center; padding:30px; display:flex; justify-content:center; flex-direction:column;transition:.3s;}
.friendly-box>ul>li>span>aside>h3{font-size:25px;}
.friendly-box>ul>li>span>aside>p{font-size:15px; margin-top:10px; color:#686868;}
.friendly-box>ul>li>span>ins{position:absolute; width:100%; height:100%; left:0; top:0; overflow:hidden;}
.friendly-box>ul>li>span>ins>img{display: block; width: 100%; height: 100%; object-fit:cover;}
.friendly-box>ul>li:hover>span>aside{transform:translateY(-3px);}
.friendly-box>ul>li:hover>span>img,
.friendly-box>ul>li.zy:hover+li>span>img{transform:scale(1.05);}
@media(max-width:1200px){
.friendly{padding:50px 0;}
.friendly-title>h2{font-size:32px; margin-bottom:10px;}
.friendly-title>p{font-size:15px;}
.friendly-box{margin-top:40px;}
.friendly-box>ul{margin:0 -10px;}
.friendly-box>ul>li{padding:10px;}
.friendly-box>ul>li>span>aside{padding:20px;}
.friendly-box>ul>li>span>aside>h3{font-size:22px;}
.friendly-box>ul>li>span>aside>p{font-size:14px; margin-top:5px;}
}
@media(max-width:992px){
.friendly-box>ul>li{width:50%;}
.friendly-box>ul>li:nth-child(3n){float:right;}    
}
@media(max-width:767px){
.friendly{padding:20px 0;}
.friendly-box{margin-top:20px;}
.friendly-title>h2{font-size:22px; margin-bottom:5px;}
.friendly-title>p{font-size:14px;}
.friendly-title>p br{display:none;}
.friendly-box>ul{margin:0 -4px;}
.friendly-box>ul>li{padding:4px; width:100%;}
.friendly-box>ul>li>span>aside{padding:10px;}
.friendly-box>ul>li.zy>span{height:auto; padding:0;}
.friendly-box>ul>li.zy>span>aside{position:relative;}
.friendly-box>ul>li:not(.zy)>span{padding-bottom:50%;}
}


.enver{position:relative; margin-bottom:100px; background:#f8f9fa;}
.enver>article{display:flex;}
.enver-title{padding:100px 0; float:left; width:50%; display:flex; justify-content:center; flex-direction:column;}
.enver-title>h2{font-size:38px; margin-bottom:15px;}
.enver-title>p{font-size:16px; color:#686868;}
.enver-title>div>a{display:inline-block; padding:8px 20px; margin-top:30px; font-size:16px; position:relative; overflow:hidden; border:1px solid #686868;}
.enver-title>div>a>b{float:left; font-weight:normal; position:relative; z-index:1;}
.enver-title>div>a>i{float:left; line-height:inherit; position:relative; z-index:1; margin-left:10px; transform:translateX(2px); transition:.3s;}
.enver-title>div>a:before{position:absolute; left:-200px; bottom:-200px; content:''; width:0; height:0; border-radius:50%; transition:.8s; background:#768047;}
.enver-title>div>a:hover{color:#fff; border-color:#768047;}
.enver-title>div>a:hover:before{width:500px; height:500px;}
.enver-title>div>a:hover>i{transform:translateX(-3px);}
.enver-image{float:right; width:50%; position:relative;}
.enver-image:before{position:absolute; z-index:1; top:0; right:0; bottom:0; left:0; content:''; background:linear-gradient(to left, transparent 33.333%, #f8f9fa);}
.enver-image img{display:block; width:100%; min-height:380px; object-fit:cover;}
@media(max-width:1200px){
.enver{margin-bottom:50px;}
.enver-title{padding:50px 0;}
.enver-title>h2{font-size:32px; margin-bottom:10px;}
.enver-title>p{font-size:15px;}
.enver-title>p br{display:none;}
}
@media(max-width:992px){
.enver>article{display:block;}
.enver-title{float:none; width:100%;}
.enver-image{float:none; width:100%;}
.enver-image img{min-height:100px;}
.enver-image:before{background:linear-gradient(to top, transparent 33.333%, #f8f9fa);}
}
@media(max-width:767px){
.enver{margin-bottom:20px;}
.enver-title{padding:20px 0;}
.enver-title>h2{font-size:22px; margin-bottom:5px;}
.enver-title>p{font-size:14px;}
.enver-title>div>a{padding:0 8px; margin-top:20px; border-radius:88px;}
.enver-title>div>a>b{font-size:14px; line-height:28px;} 
}