@charset "utf-8";

:root {
    --check-size: 1.25rem;
}

section:not(.hero) {width: 100%; padding: var(--section-padding-t) 0;}
section .inner {width: 100%; max-width: var(--inner2-width); padding: var(--inner2-padding);}


/* ──────────────────────────────────────────
   물류 서비스
────────────────────────────────────────── */
.service-list>* + * {margin-top: var(--section-padding-t);}

.service {display: flex; align-items: center; gap: clamp(12px, 1.875rem, 30px);}

.service-media {width: 100%; aspect-ratio: 690 / 508; border-radius: 30px; overflow: hidden;}
.service-media img {width: 100%; height: 100%; object-fit: cover; display: block;}

.service-body {padding: clamp(30px, 3.25rem, 52px) 0; display: flex; flex-direction: column; justify-content: center; gap: clamp(20px, 2.5rem, 40px);}

.intro {color: var(--primary);}
.intro .title {margin-bottom: clamp(16px, 1.15em, 32px);}

.features {color: var(--gray700);}
.features-tit {margin-bottom: 1rem;}

.feature + .feature {margin-top: 1rem;}
.feature {display: flex; flex-direction: column; gap: 0.25rem;}


.feature .head {display: flex; align-items: start; gap: 0.5rem;}
.feature .head::before {
    content: ''; width: var(--check-size); height: auto; aspect-ratio: 1/1; display: block;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.7998 11.1713L6.48561 15.8571L18.2001 4.14258' stroke='%23009C74' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); 
    background-size: contain; background-repeat: no-repeat; background-position: center;
}
.feature .tit {margin: calc( ( var(--check-size) - var(--title5-fs)*var(--title5-lh) )/2 ) 0;}

.feature .desc {white-space: pre-line;}


/* ──────────────────────────────────────────
   부가서비스
────────────────────────────────────────── */
.additional {background: var(--gray200);}

.additional .txt-area {margin-bottom: clamp(40px, 3.75rem, 80px); color: var(--gray900); text-align: center;}
.additional .title {margin-bottom: 1.25rem;}

.additional-list {display: grid; grid-template-columns: repeat(16, 1fr); justify-content: center; gap: clamp(12px, 1.875rem, 30px);}

.additional-list .card {padding: clamp(30px, 3.125rem, 50px) clamp(20px, 1.875rem, 30px); display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 1.25rem, 20px); border-radius: clamp(22px, 1.875rem, 30px); background: #fff; box-shadow: 0 0 clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px) clamp(-5px, calc( 0px - 5 / var(--inner) * 100vw ), -1px) rgba(34, 31, 31, 0.1);}

.additional-list .card .icon-area {width: clamp(60px, 6.25rem, 100px); height: auto; aspect-ratio: 1/1; display: flex; justify-content: center; align-items: center;}
.additional-list .card .icon-area img {width: 100%; height: 100%; display: block; object-fit: contain;}

.add-text {color: var(--primary); text-align: center; font-size: clamp(16px, 1.375rem, 22px); font-weight: 600; line-height: 1.5; letter-spacing: var(--ls);}





@media (min-width:1025px){
    .service-media {flex: 1 1 0;}
    .service-body {flex: 1 1 0;}
}

@media (min-width:769px) and (max-width:1024px){
    .service-media {flex: 3 1 0;}
    .service-body {flex: 4 1 0;}
}

@media (min-width:769px){
    .service:nth-child(odd) {flex-direction: row;}
    .service:nth-child(even) {flex-direction: row-reverse;}

    .service-media {box-shadow: 0 0 clamp(10px, calc( 50 / var(--inner) * 100vw ), 50px) clamp(-8px, calc( 0px - 8 / var(--inner) * 100vw ), -1px) rgba(34, 31, 31, 0.25);}

    .service:nth-child(odd) .service-body {padding-left: clamp(24px, 3rem, 48px);}
    .service:nth-child(even) .service-body {padding-right: clamp(24px, 3rem, 48px);}
}

@media (max-width:768px){
    .service {flex-direction: column;}

    .service-media {max-width: 690px; box-shadow: 0 0 clamp(10px, calc( 50 / 768 * 100vw ), 50px) clamp(-8px, calc( 0px - 8 / 768 * 100vw ), -1px) rgba(34, 31, 31, 0.25);}

    .service-body {padding-left: clamp(20px, 3rem, 48px); padding-right: clamp(20px, 3rem, 48px);}
}

@media (min-width:601px){
    .additional-list {grid-template-columns: repeat(16, 1fr);}

    .additional-list .card:nth-child(-n+4) {grid-column: span 4;}
    .additional-list .card:nth-child(5) {grid-column: 3 / span 4;}
    .additional-list .card:nth-child(6) {grid-column: 7 / span 4;}
    .additional-list .card:nth-child(7) {grid-column: 11 / span 4;}
}

@media (min-width:361px) and (max-width:600px){
    .additional-list {grid-template-columns: repeat(4, 1fr);}
    .additional-list .card:nth-child(-n+6) {grid-column: span 2;}
    .additional-list .card:nth-child(7) {grid-column: 2 / span 2;}
}

@media (max-width:360px){
    .additional-list {grid-template-columns: 100%;}
}