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

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

/* 서비스 소개 */
.summary_wrap .container{padding-bottom: 0;}

/* 왜 KT인가요? */
.target_wrap ul{display: flex; gap: var(--spacing-container-side); flex-wrap: wrap;}
.target_wrap li{flex-basis: 30%; flex-grow: 1; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-75, 12px);}
.target_wrap li p{font: var(--sys-font-body-3); text-align: center;}
.target_wrap li strong{color: var(--color-content-accent-standard, #2E4FD1); font: var(--sys-font-title-5);}
.target_wrap li img{width: 100%;  object-fit: cover;}

/* KT 하이오더를 쓰면 이런 점이 좋아요 */
.merit_wrap .contents{display: flex; gap: var(--spacing-350, 56px);}
.merit_wrap .merit_list{display: flex; gap: var(--spacing-container-side); flex-wrap: wrap;}
.merit_wrap .merit_list li{display: flex; padding: var(--spacing-200, 32px); flex-direction: column; gap: var(--spacing-200, 32px); border-radius: var(--radius-200, 16px); border: 1px solid var(--color-border-frame-light, #E6E6E6); background: var(--color-background-onsurface, #FFF); flex-basis: 35%; flex-grow: 1;}
.merit_wrap .merit_list li .text{display: flex; flex-direction: column; align-items: center; text-align: center;}
.merit_wrap .merit_list li .text span{color: var(--color-text-subdued, #595959); font: var(--sys-font-body-3);}
.merit_wrap .merit_list li .text strong{font: var(--sys-font-body-2);}
.merit_wrap .merit_list li .note{font: var(--sys-font-detail-3); color: var(--color-text-disabled, #999); width: 100%;}
.merit_wrap .merit_list li img{width: 100%;}
.merit_wrap .bna{ display: flex; padding: var(--spacing-250, 40px) var(--spacing-150, 24px);  background: var(--color-background-light, #FAFAFA); flex-direction: column; align-items: center; gap: var(--spacing-300, 48px); border-radius: var(--radius-300, 24px); background: var(--color-background-light, #FAFAFA);}
.merit_wrap .bna strong{ display: flex; height: var(--sizing-600, 48px); padding: 0px var(--spacing-125, 20px); border-radius: var(--radius-400, 32px); border: 1px solid var(--color-content-accent-standard, #2E4FD1); background: var(--color-background-onsurface, #FFF); justify-content: center; align-items: center; border-radius: var(--radius-400, 32px); border: 1px solid var(--color-content-accent-standard, #2E4FD1); background: var(--color-background-onsurface, #FFF); color: var(--color-content-accent-standard, #2E4FD1); font: var(--sys-font-title-5);}
.merit_wrap .bna.after strong{background: var(--color-content-accent-standard, #2E4FD1); color: var(--color-background-onsurface, #FFF);}
.merit_wrap .bna ul{display: flex; gap: var(--spacing-350, 56px); justify-content: center;}
.merit_wrap .bna li{display: flex; flex-direction: column; align-items: center; gap: var(--spacing-100, 16px); position: relative; text-align: center;}
.merit_wrap .bna li:not(:last-child):after{content: ''; display: block; width: 11px; height: 19px; background: url('../img/arrow_right_content.svg')no-repeat; position: absolute; right: -35px; top: 92px; background-size: contain;}
.merit_wrap .bna p{font: var(--sys-font-body-6);}

/* KT 하이오더 구성에 대해 알아볼까요? */
.composition_wrap .contents{ flex-direction: column; gap: var(--spacing-200, 32px); align-items: center;}
.composition_wrap .type{display: flex; gap: var(--spacing-200, 32px); width: 100%;}
.composition_wrap .type li{display: flex; padding: var(--spacing-250, 40px) var(--spacing-200, 32px); flex-direction: column; align-items: center; gap: var(--spacing-100, 16px); flex-grow: 1;border-radius: var(--radius-400, 32px); border: 1px dashed var(--color-text-disabled, #999); background: var(--color-background-onsurface, #FFF); text-align: center;}
.composition_wrap .type li .dvision{display: flex; height: var(--sizing-600, 48px); padding: 0px var(--spacing-125, 20px); justify-content: center; align-items: center; border-radius: var(--radius-400, 32px); background: var(--color-content-accent-standard, #2E4FD1); color: var(--color-background-onsurface, #FFF); font: var(--sys-font-title-5);}
.composition_wrap .type li dl{display: flex; flex-direction: column; align-items: center; flex-grow: 1;}
.composition_wrap .type li dt{font: var(--sys-font-subtitle-3);}
.composition_wrap .type li dd{color: var(--color-text-subdued, #595959); font: var(--sys-font-body-5); flex-grow: 1;}
.composition_wrap .plus{display: flex; width: var(--sizing-600, 48px); height: var(--sizing-600, 48px); justify-content: center; align-items: center; border-radius: var(--radius-full, 360px); background: var(--color-content-accent-standard, #2E4FD1);}
.composition_wrap .part{width: 100%; display: flex;  padding: var(--spacing-250, 40px) 0px; flex-direction: column; align-items: center; gap: var(--spacing-100, 16px); border-radius: var(--radius-400, 32px); border: 1px dashed var(--color-text-disabled, #999); background: var(--color-background-onsurface, #FFF);}
.composition_wrap .part .title{display: flex; flex-direction: column; align-items: center; text-align: center;}
.composition_wrap .part .title strong{font: var(--sys-font-title-4);}
.composition_wrap .part .title p{font: var(--sys-font-body-5); color: var(--color-text-subdued, #595959);}
.composition_wrap .part ul{display: flex; gap: var(--spacing-100, 16px);}
.composition_wrap .part li{display: flex; flex-direction: column; align-items: center; text-align: center;}
.composition_wrap .part li dl{display: flex; flex-direction: column; align-items: center; gap: var(--spacing-50, 8px);}
.composition_wrap .part li dt{font: var(--sys-font-body-4);}
.composition_wrap .part li dd{font: var(--sys-font-detail-1); display: flex; flex-direction: column; align-items: center; gap: var(--spacing-50, 8px);}
.composition_wrap .part li dd span{font: var(--sys-font-detail-3); color: var(--color-text-disabled, #999);}

/* 사장님께서 원하시는 타입/색상으로 선택하세요! */
.type_wrap .contents{ display: flex; padding-top: var(--spacing-150, 24px); flex-direction: column;  gap: var(--spacing-500, 80px);}
.type_wrap .area{ display: flex; flex-direction: column; align-items: center; position: relative; padding: var(--spacing-600, 96px) var(--spacing-250, 40px) var(--spacing-250, 40px) var(--spacing-250, 40px); border-radius: var(--radius-400, 32px); border: 1px dashed var(--color-border-frame-dark-alt, #999); background: var(--color-background-onsurface, #FFF);gap: var(--spacing-200, 32px);}
.type_wrap .area .division{ display: flex; position: absolute; top: calc(-1 * (var(--sizing-700, 56px) / 2)); height: var(--sizing-700, 56px); padding: 0px var(--spacing-200, 32px); border-radius: var(--radius-400, 32px); background: var(--color-content-accent-standard, #2E4FD1); justify-content: center; align-items: center; color: var(--color-grey-white, #FFF); font: var(--sys-font-title-5);}
.type_wrap .area ul{width: 100%; display: flex;}
.type_wrap .area li{display: flex; flex-direction: column; align-items: center; flex-grow: 1; flex-basis: 0; gap: var(--spacing-200, 32px);}
.type_wrap .area li img{width: 250px;}
.type_wrap .area li strong{display: flex; height: var(--sizing-600, 48px); padding: 0px var(--spacing-125, 20px); border-radius: var(--radius-400, 32px); border: 1px solid var(--color-content-accent-standard, #2E4FD1); background: var(--color-background-onsurface, #FFF); justify-content: center; align-items: center; color: var(--color-content-accent-standard, #2E4FD1); font: var(--sys-font-title-5);}
.type_wrap .area li dl{display: flex; flex-direction: column; align-items: center; text-align: center;}
.type_wrap .area li dt{font: var(--sys-font-subtitle-3);}
.type_wrap .area li dd{color: var(--color-text-subdued, #595959); font: var(--sys-font-body-5);}
.type_wrap .area .note{color: var(--color-text-subdued, #595959); font: var(--sys-font-detail-1); text-align: left; width: 100%;}

/* KT 하이오더 요금 안내 */
.charge_wrap .contents{ display: flex; padding-top: var(--spacing-150, 24px); flex-direction: column;  gap: var(--spacing-500, 80px);}
.charge_wrap .area{ display: flex; justify-content: center; position: relative; padding: var(--spacing-600, 96px) var(--spacing-250, 40px) var(--spacing-250, 40px) var(--spacing-250, 40px); border-radius: var(--radius-400, 32px); border: 1px dashed var(--color-border-frame-dark-alt, #999); background: var(--color-background-onsurface, #FFF);gap: var(--spacing-200, 32px); align-items: center;}
.charge_wrap .area .division{ display: flex; position: absolute; top: calc(-1 * (var(--sizing-700, 56px) / 2)); height: var(--sizing-700, 56px); padding: 0px var(--spacing-200, 32px); border-radius: var(--radius-400, 32px); background: var(--color-content-accent-standard, #2E4FD1); justify-content: center; align-items: center; color: var(--color-grey-white, #FFF); font: var(--sys-font-title-5);}
.charge_wrap .area img{width: 0; flex-basis: 49%; flex-grow: 1;}
.charge_wrap .table_wrap{flex-grow: 1; display: flex; flex-direction: column; gap: var(--spacing-50, 8px); min-width: 450px;}
.charge_wrap .table_wrap strong{font: var(--sys-font-subtitle-4);}
.charge_wrap .table_wrap .note{color: var(--color-text-disabled, #999); font: var(--sys-font-detail-3);}
.charge_wrap .table_wrap th:first-child{min-width: 125px;}

.charge_wrap .benefits_wrap{display: flex; flex-direction: column; border-radius: var(--radius-400, 32px); border: 1px dashed var(--color-border-frame-dark-alt, #999); background: var(--color-background-onsurface, #FFF); overflow: hidden;}
.charge_wrap .benefits_wrap .benefits_cont{display: flex; padding: var(--spacing-400, 64px) 0px; justify-content: center;}
.charge_wrap .benefits:first-child{border-right: 1px solid var(--color-border-frame-light, #E6E6E6);}
.charge_wrap .benefits{flex-grow: 1; flex-basis: 0; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-300, 48px);}
.charge_wrap .benefits .title{ display: flex; height: var(--sizing-800, 64px); padding: 0px var(--spacing-200, 32px); border-radius: var(--radius-400, 32px); border: 1px solid var(--color-text-default, #1A1A1A); background: var(--color-background-onsurface, #FFF); justify-content: center; align-items: center; font: var(--sys-font-title-5);}
.charge_wrap .benefits .cont{ display: flex; flex-direction: column; justify-content: center; gap: var(--spacing-100, 16px);}
.charge_wrap .benefits .coupon_wrap{ display: flex; flex-direction: column; align-items: center; gap: var(--spacing-200, 32px);}
.charge_wrap .benefits .note{color: var(--color-text-disabled, #999); font: var(--sys-font-detail-3);}
.charge_wrap .coupon{width: 380px; height: 190px; border-radius: var(--radius-100, 8px); display: flex;}
.charge_wrap .coupon .left{width: var(--sizing-1200, 96px); display: flex; align-items: center; justify-content: center; font: var(--sys-font-title-5); position: relative; border-radius: var(--radius-100, 8px) 0 0 var(--radius-100, 8px); position: relative;}
.charge_wrap .coupon .left:before, .charge_wrap .coupon .left:after{content: ''; display: block; width: 16px; height: 16px; position: absolute; right: -7px;border-radius: 100%; background-color: var(--color-background-onsurface, #FFF);}
.charge_wrap .coupon .left:before{top: -8px; }
.charge_wrap .coupon .left:after{bottom: -8px; }
.charge_wrap .coupon .right{position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; flex-grow: 1;}
.charge_wrap .coupon .right .top{display: flex; align-items: center; gap: var(--spacing-100, 16px);}
.charge_wrap .coupon .right .cost_wrap{font-size: 16px; line-height: 160%; font-weight: 500; display: flex; align-items: center; position: relative;}
.charge_wrap .coupon .right .cost_wrap:before{content: ''; width: calc(100% + 16px); height: 0.5px; background-color: var(--color-text-default, #1A1A1A); position: absolute; left: -4.5px; top: 50%; opacity: 0.5;}
.charge_wrap .coupon .right .cost_wrap:after{content: ''; display: block; width: 18px; height: 18px; background: url('../img/coupon-arrow.svg')no-repeat; position: absolute; top: calc(50% - 1px); right: -12px;}
.charge_wrap .coupon .right .cost_wrap strong{font-size: 20px;}
.charge_wrap .coupon .right .discount{color: var(--color-content-information-standard, #FA0); font-size: 18px; line-height: 170%; font-weight: 600;}
.charge_wrap .coupon .right:before, .charge_wrap .coupon .right:after{content: ''; display: block; width: 16px; height: 12px; position: absolute; left: -9px; border-radius: 100%; background-color: var(--color-background-onsurface, #FFF); }
.charge_wrap .coupon .right:before{top: -9px;}
.charge_wrap .coupon .right:after{bottom: -9px;}
.charge_wrap .coupon .price_wrap{ font-size: 25px; line-height: 210%; font-weight: 500;}
.charge_wrap .coupon .price_wrap strong{font-size: 48px; line-height: 140%; font-weight: 700; vertical-align: baseline;}
.charge_wrap .coupon.blue{border: 1px solid var(--color-content-accent-standard, #2E4FD1);}
.charge_wrap .coupon.blue .left{background: var(--color-content-accent-lighter, #F7F8FD); color: var(--color-content-accent-standard, #2E4FD1);}
.charge_wrap .coupon.blue .left:before, .charge_wrap .coupon.blue .left:after{border: 1px solid var(--color-content-accent-standard, #2E4FD1);}
.charge_wrap .coupon.blue .price_wrap{color: var(--color-content-accent-standard, #2E4FD1);}
.charge_wrap .coupon.green{border: 1px solid var(--color-state-positive-standard, #40BF75);}
.charge_wrap .coupon.green .left{background: var(--color-state-positive-lighter, #F7F8FD); color: var(--color-state-positive-standard, #40BF75);}
.charge_wrap .coupon.green .left:before, .charge_wrap .coupon.green .left:after{border: 1px solid var(--color-state-positive-standard, #40BF75);}
.charge_wrap .coupon.green .price_wrap{color: var(--color-state-positive-standard, #40BF75);}
.charge_wrap .notice{ display: flex; padding: var(--spacing-200, 32px); background: var(--color-background-dark, #F2F2F2); flex-direction: column; background: var(--color-background-dark, #F2F2F2);}
.charge_wrap .notice p{color: var(--color-text-subdued, #595959); font: var(--sys-font-detail-1); display: flex; gap: var(--spacing-50, 8px);}
.charge_wrap .notice p:before{content: '·';}

@media(max-width: 1100px){
    .composition_wrap .part li dd .br{display: block;}
}

@media(max-width: 1010px){
    .merit_wrap .bna li img{height: 100px;}
    .merit_wrap .bna li:not(:last-child):after{ top: 46px;}
    
    .charge_wrap .area{padding: var(--spacing-600, 96px) var(--spacing-150, 24px) var(--spacing-250, 30px) var(--spacing-150, 40px);}
    
    .charge_wrap .benefits_wrap .benefits_cont{flex-direction: column; gap: var(--spacing-400, 48px);}
    .charge_wrap .benefits{gap: var(--spacing-200, 24px); padding: 0 var(--spacing-container-side, 15px);}
    .charge_wrap .benefits .coupon_wrap{flex-direction: row;}
    .charge_wrap .benefits:first-child{border: none;}
    
}

@media(max-width: 900px){
    .charge_wrap .benefits .coupon_wrap{flex-direction: column;}
}

@media(max-width: 800px){
    .banner{background: url('/img/banner/mobile/table-order.jpg')no-repeat; background-size: cover; background-position: right bottom;}
    
    .merit_wrap .merit_list li .text strong{color: var(--color-content-accent-standard, #2E4FD1);}
    .merit_wrap .bna strong{height: var(--sizing-700, 42px); font: var(--sys-font-subtitle-4);}
    .composition_wrap .plus img{width: var(--sizing-200); height: var(--sizing-200);}
    
    .type_wrap .area .division, .charge_wrap .area .division{height: var(--sizing-800, 64px); top: calc(-1 * (var(--sizing-800, 64px) / 2));}
    .type_wrap .area li strong{height: var(--sizing-800, 64px); padding: 0px var(--spacing-150, 24px);}
    .type_wrap .area ul{flex-direction: column;}
    .type_wrap .area li{ padding: var(--spacing-250, 30px) 0px;}
    .type_wrap .area li:not(:first-child){border-top: 1px solid var(--color-border-frame-light, #E6E6E6);}
    
    .charge_wrap .contents{padding-top: var(--spacing-200, 24px);}
    .charge_wrap .area{flex-direction: column;}
    .charge_wrap .area img{width: auto; height: 150px; flex-basis: auto;}
    .charge_wrap .table_wrap{width: 100%; min-width: auto; max-width: 540px;}
}

@media(max-width: 700px){
    .target_wrap ul{gap: var(--spacing-200, 24px) var(--spacing-container-side, 15px);}
    .target_wrap li{flex-basis: 40%;}
    .merit_wrap .merit_list{flex-direction: column; flex-wrap: nowrap; gap: var(--spacing-200, 24px);}
    .merit_wrap .merit_list li{flex-basis: auto; align-items: center;}
    .merit_wrap .merit_list li .text span{font: var(--sys-font-body-3);}
    .merit_wrap .merit_list li .text strong{font: var(--sys-font-title-3);}
    .merit_wrap .merit_list li img{max-width: 458px;}
    
    .composition_wrap .part ul{flex-wrap: wrap;}
    .composition_wrap .part li{flex-basis: 40%; flex-grow: 1;}
    .composition_wrap .part li img{width: auto; height: 156px; object-fit: cover;}
}


@media(max-width: 600px){
    .target_wrap ul{gap: var(--spacing-200, 24px) var(--spacing-container-side, 15px);}
    .target_wrap li{flex-basis: 40%;}
    .merit_wrap .merit_list{flex-direction: column; flex-wrap: nowrap; gap: var(--spacing-200, 24px);}
    .merit_wrap .merit_list li{flex-basis: auto;}
    .merit_wrap .merit_list li .text span{font: var(--sys-font-body-3);}
    .merit_wrap .merit_list li .text strong{font: var(--sys-font-title-3); color: var(--color-content-accent-standard, #2E4FD1);}
    
    .merit_wrap .bna ul{flex-wrap: wrap;}
    .merit_wrap .bna li:first-child{flex-basis: 100%;}
    .merit_wrap .bna li:not(:last-child):after{width: var(--sizing-150); height: var(--sizing-250);}
    .merit_wrap .bna li:not(:first-child):after{right: -28px;}
    .merit_wrap .bna li:first-child:after{top: auto; bottom: -30px; right: 50%; transform: rotate(90deg); margin-right: calc(-1 * (var(--sizing-150) / 2));}
    
    .type_wrap .area .division, .charge_wrap .area .division{height: var(--sizing-700, 42px); top: calc(-1 * (var(--sizing-700, 42px) / 2));}
    .type_wrap .area li strong{height: var(--sizing-700, 42px);}
}

@media(max-width: 500px){
    .composition_wrap .type{flex-direction: column;}
    .composition_wrap .type img{max-width: 300px; width: 100%;}
    
    .charge_wrap .coupon{width: 324px; height: 162px; border-radius: var(--radius-150, 9px);}
    .charge_wrap .notice p{font: var(--sys-font-detail-3);}
    .charge_wrap .coupon .left{width: 80px; border-radius: var(--radius-150, 9px) 0 0 var(--radius-150, 9px);}
    .charge_wrap .coupon .left:before, .charge_wrap .coupon .left:after{width: 10px; height: 10px; right: -5px;}
    .charge_wrap .coupon .left:before{top: -5px;}
    .charge_wrap .coupon .left:after{bottom: -5px;}
    .charge_wrap .coupon .right:before, .charge_wrap .coupon .right:after{width: 12px; height: 6px; left: -6px;}
    .charge_wrap .coupon .right .top{gap: 10px}
    .charge_wrap .coupon .right:before{top: -6px;}
    .charge_wrap .coupon .right:after{bottom: -6px;}
    .charge_wrap .coupon .right .cost_wrap{font-size: 13px;}
    .charge_wrap .coupon .right .cost_wrap strong{font-size: 18px;}
    .charge_wrap .coupon .right .discount{font-size: 13px;}
    .charge_wrap .coupon .right .cost_wrap:before{width: calc(100% + 12px);}
    .charge_wrap .coupon .right .cost_wrap:after{right: -9px;}
    .charge_wrap .coupon .price_wrap{font-size: 22px;}
    .charge_wrap .coupon .price_wrap strong{font-size: 40px;}
}

@media(max-width: 385px){
    .charge_wrap .coupon{width: 254px; height: 127px; border-radius: var(--radius-100, 6px);}
    .charge_wrap .notice p{font: var(--sys-font-detail-3);}
    .charge_wrap .coupon .left{width: 70px; border-radius: var(--radius-100, 6px) 0 0 var(--radius-100, 6px);}
    .charge_wrap .coupon .right:before, .charge_wrap .coupon .right:after{width: 12px; height: 6px; left: -6px;}
    .charge_wrap .coupon .right .cost_wrap, .charge_wrap .coupon .right .cost_wrap strong, .charge_wrap .coupon .right .discount{font-size: 12px;}
    .charge_wrap .coupon .right .cost_wrap:before{width: calc(100% + 12px);}
    .charge_wrap .coupon .right .cost_wrap:after{width: 11px; height: 11px; background-size: contain;}
    .charge_wrap .coupon .price_wrap{font-size: 18px;}
    .charge_wrap .coupon .price_wrap strong{font-size: 32px;}
}

@media(max-width: 370px){
    .merit_wrap .bna ul{flex-direction: column;}
    .merit_wrap .bna li:not(:first-child):after{top: auto; bottom: -30px; right: 50%; transform: rotate(90deg); margin-right: calc(-1 * (var(--sizing-150) / 2));}
    
    .composition_wrap .part ul{flex-direction: column;}
    .composition_wrap .part li{width: 100%; flex-basis: auto;}
    .composition_wrap .part li dd .br{display: inline-block;}
}