.ok02-download{padding:clamp(35px, 5.2vw, 100px) 0;background:#ffffff;}
.ok02-download .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;}

.ok02-download .card {display:flex;flex-direction:column;background:#ffffff;border:1px solid #f5f5f5;border-radius:2px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,0.05);transition:all 0.5s;}
.ok02-download .card .img-wrap {position:relative;aspect-ratio:3 / 4;overflow:hidden;}
.ok02-download .card .img-wrap img {width:100%;height:100%;object-fit:cover;transition:transform 0.7s;}
.ok02-download .card .img-wrap .img-overlay {position:absolute;inset:0;background:rgba(0,0,0,0.6);opacity:0;transition:opacity 0.3s;display:flex;align-items:center;justify-content:center;}
.ok02-download .card .img-wrap .img-overlay .inner{transform:translateY(16px);transition:transform 0.3s;display:flex;flex-direction:column;align-items:center;gap:8px;}
.ok02-download .card .img-wrap .img-overlay .icon-circle {width:48px;height:48px;border-radius:50%;background:#ffffff;display:flex;align-items:center;justify-content:center;color:#000000;}
.ok02-download .card .img-wrap .img-overlay .icon-circle svg {width:20px;height:20px;}
.ok02-download .card .img-wrap .img-overlay .icon-circle i{font-size:20px;}
.ok02-download .card .img-wrap .img-overlay .view-text {font-size:12px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:#ffffff;}

.ok02-download .card .info {padding:1.5rem;flex-grow:1;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:1.5rem;}
.ok02-download .card .info h3 {font-size:14px;font-weight:600;color:#333333;line-height:1.5;transition:color 0.3s;min-height:40px;}

.ok02-download .card .dl-btn{display:flex;align-items:center;position:relative;width:100%;height:44px;background:#fafafa;border:1px solid #f5f5f5;border-radius:9999px;padding:0 8px;overflow:hidden;transition:all 0.3s;text-decoration:none;}
.ok02-download .card .dl-btn:active {transform:scale(0.98);}

.ok02-download .card .dl-btn .bg-slide{position:absolute;inset:0;width:100%;height:100%;background:#000000;transform:translateX(-101%);transition:transform 0.5s ease-in-out;}
.ok02-download .card .dl-btn .btn-content {position:relative;z-index:1;width:100%;display:flex;align-items:center;justify-content:space-between;padding:0 12px;}
.ok02-download .card .dl-btn .btn-left {display:flex;align-items:center;gap:8px;}
.ok02-download .card .dl-btn .btn-icon {width:28px;height:28px;border-radius:50%;background:#ffffff;border:1px solid #f5f5f5;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 2px rgba(0,0,0,0.05);transition:all 0.5s;}
.ok02-download .card .dl-btn .btn-icon svg {width:12px;height:12px;color:#a3a3a3;transition:color 0.5s;}
.ok02-download .card .dl-btn .btn-icon i{font-size:12px;color:#a3a3a3;transition:color 0.5s;}
.ok02-download .card .dl-btn .btn-text {font-size:10px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:#a3a3a3;transition:color 0.5s;}
.ok02-download .card .dl-btn .btn-arrow {opacity:0;transition:opacity 0.3s;}
.ok02-download .card .dl-btn .btn-arrow svg {width:12px;height:12px;color:rgba(255,255,255,0.4);}
.ok02-download .card .dl-btn .btn-arrow i{font-size:12px;color:rgba(255,255,255,0.9);}

.ok02-download .card .dl-btn:hover {border-color:#000000;}
.ok02-download .card .dl-btn:hover .bg-slide {transform:translateX(0);}
.ok02-download .card .dl-btn:hover .btn-icon {background:#171717;border-color:#262626;}
.ok02-download .card .dl-btn:hover .btn-icon svg {color:#ffffff;}
.ok02-download .card .dl-btn:hover .btn-icon i{color:#ffffff;}
.ok02-download .card .dl-btn:hover .btn-text {color:#ffffff;}
.ok02-download .card .dl-btn:hover .btn-arrow {opacity:1;}


.ok02-download .card:hover {box-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 8px 10px -6px rgba(0,0,0,0.1);}
.ok02-download .card:hover .img-wrap img {transform:scale(1.1);}
.ok02-download .card:hover .img-wrap .img-overlay {opacity:1;}
.ok02-download .card:hover .img-wrap .img-overlay .inner {transform:translateY(0);}
.ok02-download .card:hover .info h3 {color:#000000;}



@media (max-width:1024px) {
.ok02-download .grid {grid-template-columns:repeat(2,1fr);}
}
@media (max-width:768px) {
.ok02-download .grid {grid-template-columns:repeat(2,1fr);gap:24px;}
}
@media (max-width:480px) {
.ok02-download .grid {grid-template-columns:1fr;max-width:600px;}
}