.our-case{overflow-x:hidden;}
.home-titles{text-align:center;max-width:1200px;margin-left:auto;margin-right:auto}
.home-titles .title{position:relative}
.home-titles h1,.home-titles h3,.home-titles h4{font-weight: var(--fontbold7);font-size:45px;color:#7852A9;line-height:1;padding:0 60px;display:inline-block;position:relative;z-index:2;background:#f7f7f7}
.home-titles p{font-weight: var(--fontbold6);font-size:19px;color:#353435;text-transform:uppercase;line-height:1;margin-top:15px}
.home-titles .title::after{position:absolute;content:'';width:100%;height:1px;background:silver;left:0;top:50%;transform:translateY(-50%);z-index:0}
.home-cases{padding:110px 0;margin:0 auto;max-width:1200px;position:relative}
.home-cases:before{content:'';width:100vw;height:100%;background:#f6f5f6;position:absolute;left:50%;top:0;transform:translateX(-50%)}
.home-cases .l-wraps{position:relative}
.cases-row{display:flex;flex-wrap:wrap;justify-content:space-between;margin-top:60px}
.cases-col{width:48%;margin-bottom:4%;padding: 10px;position: relative;}
.cases-col:nth-last-child(-n+2){margin-bottom:0}
.cases-images{position:relative;z-index: 2;}
.cases-com{position:absolute;right:10px;bottom:10px;display:flex}
.cases-ic{margin-left:5px;border:5px solid #ffffff00;border-radius:100%;overflow:hidden;transition: all .3s ease-in-out;}
.cases-con{display:flex;justify-content:space-between;align-items:center;background:#fff;padding:11px 13px;position: relative;z-index: 2;}
.cases-add{display:flex;align-items: center;}
.cases-btn{display:flex;align-items:center}
.cases-add p{font-weight: var(--fontbold6);font-size:19px;color:#0b0b0b;line-height:30px;margin-left:10px}
.cases-col::after {content: "";position: absolute;left: 0;top: 0;width: 100%;height: 100%;border: 3px solid transparent;border-radius: 10px;z-index: 0;box-sizing:border-box}
.cases-col:hover::after {border-color:#7852A9;animation: drawBorderLine 2s linear infinite;}
@keyframes drawBorderLine {
    0% {clip-path: inset(100% 0 0 0)}
    25% {clip-path: inset(0 100% 0 0)}
    50% {clip-path: inset(0 0 100% 0)}
    75% {clip-path: inset(0 0 0 100%)}
    100% {clip-path: inset(100% 0 0 0)}
}
@media (max-width:1600px){.home-cases{padding:100px 0}}
@media (max-width:1366px){.home-cases{padding:65px 0}
.home-titles h3{font-size:38px;}}
@media (max-width:1024px){.home-cases{padding:50px 0}
.home-titles h3{font-size:32px;}
.cases-row,.choose-row{margin-top: 35px;}
.cases-add p{font-size: 16px;}}
@media (max-width:768px){.home-cases{padding:35px 0}
.home-titles h3{font-size:26px;}
.home-titles p{font-size:16px;margin-top:10px;}}
@media (max-width:550px){.home-cases{padding:25px 0}
.home-titles h3{font-size:22px;padding:0;}
.home-titles p{font-size:14px;margin-top:0;}
.cases-col{width: 100%;}
.cases-btn img{max-width: 30px;}
.cases-ic{width: 65px;}}