@charset "utf-8";

body {background-color: #fff;}

/* service-list (서비스종류) */

.service-list { display: flex; gap: 30px; margin-top: 60px; }
.service-item { flex: 1; text-align: center; }
.service-link { display: block; text-decoration: none; color: inherit; }

.service-img-box { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 20px; overflow: hidden; margin-bottom: 25px; }
.service-img-box img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.service-link:hover .service-img-box img { transform: scale(1.05); }

.service-item-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 15px; transition: color 0.3s ease; }
.service-link:hover .service-item-title { color: var(--color-primary); } 
.service-item-desc { font-size: 18px; color: var(--color-text-light); line-height: 1.6; word-break: keep-all; }


@media (max-width: 1280px) {
    .service-list { gap: 20px; padding: 0 20px; }
    .service-item-title { font-size: 1.4rem; }
    .service-item-desc { font-size: 16px; }
}


@media (max-width: 767px) {
    .service-list { flex-direction: column; gap: 40px; margin-top: 40px; }
    .service-img-box { aspect-ratio: 16 / 10; border-radius: 15px; }
    .service-item-title { font-size: 1.5rem; margin-bottom: 10px; }
    .service-item-desc { font-size: 15px; }
}

/* service-point (특징) */

.service-point-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.service-point-item { display: flex; align-items: center; gap: 30px; padding: 50px 40px; border-radius: 20px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 4px 4px 18px rgba(0, 0, 0, 0.1) transition: transform 0.3s ease, box-shadow 0.3s ease; }

.point-icon-box { flex-shrink: 0; width: 3.9rem; height: auto; display: flex; align-items: center; justify-content: center; }
.point-icon-box svg { width: 100%; height: auto; }

.point-line { width: 1px; height: 100%; background-color: #eee; flex-shrink: 0; }
.point-txt-box { flex: 1; }
.point-title { font-size: 24px; font-weight: 700; margin-bottom: 15px; }
.point-desc { font-size: 16px; color: var(--color-text-light); line-height: 1.6; word-break: keep-all; }


@media (max-width: 1280px) {
    .service-point { padding: 80px 20px; }
    .service-point-title { font-size: 30px; margin-bottom: 40px; }
    .service-point-item { padding: 40px 30px; gap: 20px; }
    .point-icon-box { width: 60px; height: 60px; }
    .point-title { font-size: 22px; }
    .point-desc { font-size: 15px; }
}

@media (max-width: 767px) {
    .service-point { padding: 60px 0; }
    .service-point-title { font-size: 24px; margin-bottom: 30px; }
    .service-point-list { grid-template-columns: 1fr; gap: 15px; }
    .service-point-item { padding: 30px 20px; border-radius: 15px; }
    .point-icon-box { width: 50px; height: 50px; }
    .point-title { font-size: 20px; margin-bottom: 10px; }
    .point-desc { font-size: 14px; }
}

/* banner(배너) */

.banner-btn {display: block; text-align: center; border-radius: 500px; color: #fff; font-weight: 600; transition: background-color 0.3s ease; border: 1px solid #fff; margin: 0 auto; font-size: 1.13em; padding: 1.33em 0; width: 13.33em;}
.banner-btn:hover {background-color: #ffffff52; }
.banner-btn a {color: #fff;}

.service-banner {background: url('/image/service/service_banner.jpg'); background-repeat: no-repeat; background-size: cover; padding: 7em 0 !important; background-position: 20%; }
.service-banner h2{font-size: 3em; color: #fff; white-space: pre-line; font-weight: 600; line-height: 132%; text-align: center; margin-bottom: 2rem;}


@media screen and (max-width: 1280px){
	.service-banner {padding: 4em 0;}
	.service-banner h2{font-size: 2em;}
}