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

/* banner */
.banner{background: url('/img/banner/sterilize.jpg')no-repeat center;}

/* 서비스 소개 */
.summary_wrap{background: var(--color-background-onsurface, #FFF) !important;}
.summary_wrap .contents{align-items: center;}

/* KT 방역로봇이 새로운 방역의 패러다임을 열어갑니다 */
.paradigm_wrap{height: 800px; background: url('../img/sterilize/paradigm_bg.jpg')no-repeat center; background-size: cover; display: flex; align-items: center;}
.paradigm_wrap .container{display: flex; padding: var(--spacing-container-padding, 96px) 0px; background: rgba(255, 255, 255, 0.90); flex-direction: column; gap: var(--spacing-container-spacing, 64px);}
.paradigm_wrap .contents{flex-direction: row; }
.paradigm_wrap .list{flex-grow: 1; flex-basis: 0; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-25, 4px); text-align: center;}
.paradigm_wrap .list p{font: var(--sys-font-body-5);}
.paradigm_wrap .list strong{font: var(--sys-font-title-5); color: var(--color-content-accent-standard, #2E4FD1);}

/* KT 방역로봇으로 무엇을 할 수 있나요? */
.value_wrap .contents{ gap: var(--spacing-200, 32px);}
.value_wrap .box{ display: flex; padding: var(--spacing-300, 48px) 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);}
.value_wrap .box{ display: flex; padding: var(--spacing-300, 48px) 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); align-items: center;}
.value_wrap .box .title{display: flex; flex-direction: column; gap: var(--spacing-125, 20px); text-align: center; align-items: center;}
.value_wrap .box .title strong{color: var(--color-content-accent-standard, #2E4FD1); font: var(--sys-font-title-2);}
.value_wrap .box .title p{color: var(--color-text-subdued, #595959); font: var(--sys-font-body-3); max-width: 400px;}
.value_wrap .box .detail{display: flex; gap: var(--spacing-200, 32px); justify-content: center; font: var(--sys-font-body-5); width: 100%; text-align: center;}
.value_wrap .box .detail dl{display: flex; flex-direction: column; gap: var(--spacing-75, 12px); flex-grow: 1; flex-basis: 0; text-align: left;}
.value_wrap .box .detail dt{display: flex; padding-bottom: var(--spacing-75, 12px); border-bottom: 1px solid var(--color-border-frame-light-alt, #595959); font: var(--sys-font-subtitle-4);}
.value_wrap .box .detail dd{color: var(--color-text-subdued, #595959); font: var(--sys-font-detail-1);}

/* 스스로 이동하면서 다양한 방역 기능을 시공간의 제한 없이 실행합니다 */
.mode_wrap .contents{gap: var(--spacing-200, 32px); align-items: center; flex-direction: row; flex-wrap: wrap; justify-content: center;}
.mode_wrap .list{display: flex; flex-basis: 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);}
.mode_wrap .list .text dl:nth-of-type(1){margin-top: var(--spacing-50, 8px);}
.mode_wrap .list .text dt{width: 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);}
.mode_wrap .list .text ol{display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--spacing-50, 8px); margin-top: var(--spacing-50, 8px);;}
.mode_wrap .list .text li{color: var(--color-content-accent-standard, #2E4FD1); font: var(--sys-font-detail-2); display: flex; gap: var(--spacing-50, 8px); align-items: center; flex-shrink: 0;}
.mode_wrap .list .text li:not(:last-child):after{content: ''; display: block; width: 5px; height: 9px; background: url('../img/arrow_right_content.svg')no-repeat; background-size: contain;}

/* KT 방역로봇의 상세 정보를 알아볼까요? */
.spec_wrap .contents{padding: var(--spacing-250, 40px) var(--spacing-200, 32px); border: 1px solid var(--color-border-frame-light, #E6E6E6); background: var(--color-background-onsurface, #FFF); gap: var(--spacing-250, 40px); align-items: center;}
.spec_wrap .comp-table-large{table-layout: auto;}
.spec_wrap .contents img{width: 100%; max-width: 500px;}
.spec_wrap .contents th{width: 120px;}
.spec_wrap .contents td{text-align: left;}

/* KT 방역로봇 요금 안내 */
.charge_wrap .contents{gap: var(--spacing-100, 16px);}
.charge_wrap .table{width: 100%; overflow-x: auto;}
.charge_wrap .table table{min-width: 800px;}
.charge_wrap .des{color: var(--color-text-subdued, #595959); font: var(--sys-font-detail-1);}
.charge_wrap .notice{width: 100%; color: var(--color-text-disabled, #999); font: var(--sys-font-detail-1);}
.charge_wrap .notice p:before{content: '·'; margin-right: var(--spacing-50, 8px);}

/* KT 방역로봇 효과 체험 */
.experience_video_wrap iframe{width: 100%; height: 608px;}

@media(max-width: 1100px){
    .paradigm_wrap{padding: 0 var(--spacing-container-side);}
    .spec_wrap .contents{padding: var(--spacing-250, 30px) var(--spacing-container-side, 18px);}
    .value_wrap .box{padding: var(--spacing-300, 36px) var(--spacing-container-side, 15px);;}
    .experience_video_wrap iframe{height: 52vw;}
}

@media(max-width: 1010px){
    .mode_wrap .list .text{padding: var(--spacing-125, 20px) var(--spacing-150, 24px); width: 100%;}
    .mode_wrap .list .text dl{font: var(--sys-font-detail-1);}
    .charge_wrap .comp-table-large colgroup col:nth-child(5){width: 31%;}
}

@media(max-width: 970px){
    .paradigm_wrap{height: auto; padding: var(--spacing-container-side, 15px);}
    .paradigm_wrap .contents{flex-wrap: wrap; gap: var(--spacing-200, 24px) 0px;}
    .paradigm_wrap .comp-title{padding: 0 var(--spacing-200);}
    .paradigm_wrap .list{flex-basis: 50%;}
    .mode_wrap .list img{width: 40%; flex-shrink: 0;}
}

@media(max-width: 800px){
    .banner{background: url('/img/banner/mobile/sterilize.jpg')no-repeat; background-size: cover; background-position: right center;}
    .mode_wrap .list img{width: 40%; height: auto; align-self: stretch;}
    .scroll_guide{display: block}
}

@media(max-width: 700px){
    .value_wrap .box .detail{flex-direction: column;}
}

@media(max-width: 500px){
    .paradigm_wrap .list p{font: var(--sys-font-detail-3);}
    .mode_wrap .list{flex-direction: column;}
    .mode_wrap .list img{width: 100%; height: auto;}
}

@media(min-width: 600px){
    .spec_wrap .comp-table-large tbody{display: grid; grid-template-columns: 1fr 1fr;}
    .spec_wrap .comp-table-large tr{display: grid; grid-template-columns: 32% 1fr;}
    .spec_wrap .contents th{width: 100%}
    .spec_wrap .comp-table-large th, .spec_wrap .comp-table-large td{display: flex; align-items: center; justify-content: center; text-align: center;border-left: none; flex-direction: column;}
    .spec_wrap .comp-table-large tr:not(:nth-last-child(-n+1)) > *{border-bottom: none;}
    .spec_wrap .comp-table-large tr:nth-child(odd) > *:last-child{border-right: 1px solid var(--color-border-frame-light, #E6E6E6);}
    .spec_wrap tr:last-child{grid-column: 1/3;}
    .spec_wrap .comp-table-large tr:last-child{grid-template-columns: 16% 1fr;}
    .spec_wrap .comp-table-large tr:last-child > *:last-child{border-right: none;}
}