#container section:nth-child(odd){background: var(--color-background-light, #FAFAFA);}

/* banner */
.banner{background: url('/img/banner/serving.jpg')no-repeat center;}
.banner .container{color: var(--color-text-default);}

/* 서비스 소개 */
.summary_wrap .contents{align-items: center;}

/* 서빙부터 퇴식까지 책임지는 KT 서빙로봇 */
.mode_wrap .container{align-items: center;}
.mode_wrap .contents{align-items: stretch; gap: var(--spacing-200, 32px);}
.mode_wrap .list{ display: flex; max-width: 896px; overflow: hidden; border-radius: var(--radius-300, 24px); background: var(--color-background-light, #FAFAFA); align-items: center; gap: var(--spacing-none, 0px);}
.mode_wrap .list img{width: 300px; height: 216px; object-fit: cover;}
.mode_wrap .list .text{display: flex; padding: var(--spacing-125, 20px) var(--spacing-250, 40px); flex-direction: column; align-items: flex-start; gap: var(--spacing-25, 4px); flex-grow: 1;}
.mode_wrap .list .text strong{font: var(--sys-font-subtitle-3);}
.mode_wrap .list .text dl{display: flex; gap: var(--spacing-50, 8px); color: var(--color-text-subdued, #595959); font: var(--sys-font-body-5); width: 100%;}
.mode_wrap .list .text dl:nth-of-type(1){margin-top: var(--spacing-25, 4px);}
.mode_wrap .list .text dt{flex-basis: var(--sizing-400, 32px); flex-shrink: 0;}
.mode_wrap .list .text dd{display: flex; gap: var(--spacing-50, 8px);}
.mode_wrap .list .text dd:before{content: '|'; color: var(--color-border-frame-dark, #D9D9D9);}

/* 다양한 서비스 로봇들을 소개합니다 */
.charge_wrap .contents{ display: flex; flex-direction: column; justify-content: center;  gap: var(--spacing-200, 32px);}
.charge_wrap .list{display: flex; padding: var(--spacing-250, 40px) var(--spacing-200, 32px); border: 1px solid var(--color-border-frame-light, #E6E6E6); background: var(--color-background-onsurface, #FFF); flex-direction: column; gap: var(--spacing-250, 40px); position: relative;}
.charge_wrap .list.point_wrap{padding: var(--spacing-600, 96px) var(--spacing-200, 32px) var(--spacing-250, 40px) var(--spacing-200, 32px); border: 1px solid var(--color-content-accent-standard, #2E4FD1);}
.charge_wrap .list .point{display: flex; position: absolute; left: 0; top: 0; width: 100%; height: var(--sizing-800, 64px); background: linear-gradient(90deg, #21A5DE 0%, #2127DE 100%); justify-content: center; align-items: center; color: var(--color-grey-white, #FFF); font: var(--sys-font-title-5);}
.charge_wrap .list .top{display: flex; gap: var(--spacing-250, 40px);}
.charge_wrap .list img{flex-grow: 1; width: 0; object-fit: contain;}
.charge_wrap .list .spec_wrap{display: flex; flex-basis: 304px; flex-direction: column;  gap: var(--spacing-75, 12px); flex-shrink: 0;}
.charge_wrap .list .spec_wrap strong{display: flex; padding-bottom: var(--spacing-75, 0px); border-bottom: 1px solid var(--color-border-frame-light-alt, #595959); font: var(--sys-font-subtitle-4);}
.charge_wrap .list .spec_wrap .spec{display: flex; flex-direction: column; gap: var(--spacing-25, 4px);}
.charge_wrap .list .spec_wrap .spec dl{display: flex; gap: var(--spacing-25, 4px);}
.charge_wrap .list .spec_wrap .spec dt{font: var(--sys-font-detail-2); flex-shrink: 0;}
.charge_wrap .list .spec_wrap .spec dd{flex-grow: 1; color: var(--color-text-subdued, #595959); font: var(--sys-font-detail-1);}
.charge_wrap .list .spec_wrap .spec dd span{display: block;}
.charge_wrap .list .table_wrap{display: flex; padding-top: var(--spacing-250, 40px); border-top: 1px solid var(--color-border-frame-light, #E6E6E6); flex-direction: column;gap: var(--spacing-100, 16px); align-items: center;}
.charge_wrap .list .table_wrap h6{font: var(--sys-font-subtitle-4)}
.charge_wrap .list .table_wrap .table{overflow-x: auto; width: 100%;}
.charge_wrap .list .table_wrap .notice{width: 100%; color: var(--color-text-disabled, #999); font: var(--sys-font-detail-1);}
.charge_wrap .list .table_wrap .notice p:before{content: '·'; margin-right: var(--spacing-50, 8px);}

.comp-table-large{min-width: 1000px;}

@media(max-width: 1100px){
    .charge_wrap .list, .charge_wrap .list.point_wrap{padding: var(--spacing-250, 30px) var(--spacing-container-side);}
    .charge_wrap .list.point_wrap{padding-top: var(--spacing-600, 96px);}
    .charge_wrap .list .top{flex-direction: column;}
    .charge_wrap .list img{object-fit: contain; width: 100%; max-height: 450px;}
    .charge_wrap .list .spec_wrap{flex-basis: auto; width: 100%;}
    .charge_wrap .list .spec_wrap .spec{flex-direction: row; flex-wrap: wrap; gap: var(--spacing-50, 6px) var(--spacing-100, 12px);}
    .charge_wrap .list .spec_wrap .spec dl{display: block;}
    .charge_wrap .list .spec_wrap .spec dt{display: inline;}
    .charge_wrap .list .spec_wrap .spec dd{display: inline;}
    .charge_wrap .list .spec_wrap .spec dd span{display: inline-block;}
    .charge_wrap .list .spec_wrap .spec dd span:not(:last-child):after{content: ','; margin-right: 0.04em;}
    
    .comp-table-large{min-width: 800px;}
}

@media(max-width: 1010px){
    
    .mode_wrap .contents{width: 100%;}
    .mode_wrap .list{max-width: none;}
    .mode_wrap .list img{width: 250px; height: auto;}
    .mode_wrap .list .text{padding: var(--spacing-125, 20px) var(--spacing-150, 24px);}
    .mode_wrap .list .text dl{font: var(--sys-font-detail-1);}
}

@media(max-width: 900px){
    .scroll_guide{display: block}
}

@media(max-width: 800px){
    .banner{background: url('/img/banner/mobile/serving.jpg')no-repeat; background-size: cover; background-position: right center;}
    .banner .container{color: var(--color-grey-white, #FFF)}
    
    .charge_wrap .list .top{flex-direction: column;}
    .charge_wrap .list .spec_wrap .spec{flex-wrap: wrap; flex-direction: row; gap: var(--spacing-25, 3px) var(--spacing-100, 12px);}
}

@media(max-width: 700px){
    .mode_wrap .list img{display: none;}
    .mode_wrap .list .text{padding: var(--spacing-150, 18px); width: 100%;}
    .mode_wrap .list .text strong{color: var(--color-content-accent-standard, #2E4FD1);}
    .mode_wrap .list .text dl{font: var(--sys-font-body-5);}
}

@media(max-width: 500px){
    .charge_wrap .list .spec_wrap strong{font: var(--sys-font-subtitle-3);}
    .charge_wrap .list .spec_wrap .spec{flex-direction: column;}
    .charge_wrap .list .spec_wrap .spec dl{display: flex;}
    .charge_wrap .list .spec_wrap .spec dd span{display: block;}
    .charge_wrap .list .spec_wrap .spec dd span:after{display: none;}
}