@charset "utf-8";

#main-service{position:relative;margin:100px auto 80px;width:85%}
#main-service ul{display:flex;justify-content:center;align-items:flex-start;gap:50px;max-width:1100px;margin:50px auto 0}
#main-service ul li{position:relative;z-index:1;width:calc(100% / 6 - 5px);text-align:center}
#main-service ul li a{display:flex;flex-direction:column;align-items:center}
#main-service ul li .icon{display:flex;position:relative;width:100px;height:100px;border:1px solid var(--primary-line);border-radius:12px;background-color:#fff;transition:all .3s}
#main-service ul li .icon img{margin:auto}
#main-service ul li:nth-child(-n+3) .icon img{position:absolute;top:50%;transform:translate(-50%, -50%);width:130px;height:130px;object-fit:cover}
#main-service ul li:nth-child(1) .icon img{width:150px;height:150px;left:56%}
#main-service ul li:nth-child(2) .icon img{left:54%}
/*#main-service ul li:nth-child(3) .icon img{left:52%}*/
#main-service ul li:nth-child(3) .icon img{left:46%}
#main-service ul li:nth-child(4) .icon img{width:48px}
#main-service ul li:nth-child(5) .icon img{width:60px}
#main-service ul li .icon .circle{position:absolute;bottom:-10px;right:-10px;display:flex;justify-content:center;align-items:center;width:30px;height:30px;border-radius:50%;background:var(--primary);animation:circle_rotate 3s linear infinite}
#main-service ul li .icon .circle svg{width:16px;height:16px;color:#fff}
#main-service ul li h3{margin:15px 0;font-size:20px;font-weight:600;color:var(--dark);transition:all .2s}
#main-service ul li p{opacity:0;position:absolute;top:100%;left:50%;z-index:2;transform:translate(-50%, 10px);padding:20px 25px;width:max-content;font-size:15px;border-radius:10px;box-shadow:4px 4px 20px rgba(111, 111, 111, 0.2);transition:all .3s;color:#777;background-color:#fff}
#main-service ul li p span{display:block;width:max-content;padding:5px 15px;margin:0 auto 10px;border-radius:20px;font-size:13px;font-weight:500;line-height:1;color:#fff;background:var(--primary)}
@keyframes circle_rotate {0% {transform:rotate(0deg)} 50%{transform:rotate(-180deg)} 100%{transform:rotate(-360deg)}}

@media (hover:hover){
#main-service ul li a:hover .icon{background:var(--pale)}
#main-service ul li a:hover h3{color:var(--primary)}
#main-service ul li a:hover+p{transform:translate(-50%, 0);opacity:1}
}

@media(max-width:1024px){
#main-service ul{gap:30px}    
}
@media(max-width:768px){
#main-service{width:calc(100% - 30px);margin:40px auto}
#main-service ul{display:grid;grid-template-columns:repeat(2, 1fr);align-items:stretch;gap:15px;margin-top:20px}
#main-service ul li{display:flex;align-items:center;width:auto;padding:15px;border-radius:12px;border:1px solid #e1e1e1}
#main-service ul li .icon{width:75px;height:75px}
#main-service ul li h3{margin:10px 0 0;font-size:15px;line-height:1.4}
#main-service ul li p{opacity:1;position:relative;top:auto;left:auto;z-index:unset;transform:none;width:auto;padding:0 0 0 25px;font-size:13px;text-align:left;box-shadow:none;background:none}
#main-service ul li p span{margin:0 0 10px;font-size:12px;background:var(--dark)}
#main-service ul li:last-child{grid-column:span 2}
#main-service ul li:nth-child(1) .icon img{width:120px;height:120px;left:56%}
#main-service ul li:nth-child(2) .icon img{width:105px;height:105px}
#main-service ul li:nth-child(3) .icon img{width:110px;height:110px}
#main-service ul li:nth-child(4) .icon img{width:38px}
#main-service ul li:nth-child(5) .icon img{width:50px}
}
@media(max-width:480px){
#main-service ul{display:flex;flex-direction:column}
}