/* header */
header .fixed{position: fixed;}

/* banner */
.banner{height: 400px; color: var(--color-grey-white, #FFF);}
.banner .container{height: 100%; display: flex; flex-direction: column; justify-content: center; gap: var(--spacing-100, 16px);}
.banner .order{background: url('/img/banner/table-order.jpg')no-repeat center;}
.banner .serving{background: url('/img/banner/serving.jpg')no-repeat center; color: var(--color-text-default);}
.banner .delivery{background: url('/img/banner/inside_delivery.jpg')no-repeat center;}
.banner .sterilize{background: url('/img/banner/sterilize.jpg')no-repeat center;}
.banner h2{font: var(--sys-font-heading-3);}
.banner h2 .br{display: inline-block; content: ' '; padding: 0 0.1em;}
.banner h4{font: var(--sys-font-subtitle-4);}
.banner .swiper_btn button{display: flex; align-items: center; justify-content: center; width: var(--sizing-700, 56px); height: var(--sizing-700, 56px); padding-right: var(--spacing-25, 4px); justify-content: center; align-items: center; border-radius: var(--radius-400, 32px); background: var(--color-background-onsurface, #FFF); box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.10); margin-top: calc(-1 * var(--sizing-350, 28px));}
.banner .swiper_btn button:after{content: ''; width: var(--sizing-150, 12px); height: var(--sizing-250, 20px); background: url('/img/swiper-arrow.svg')no-repeat center; background-size: contain;}
.banner .swiper_btn button[class*="prev"]{left: 50%; margin-left: -620px;}
.banner .swiper_btn button[class*="next"]{left: auto; right: 50%; margin-right: -620px;}
.banner .swiper_btn button[class*="next"]{padding-left: var(--spacing-25, 4px); padding-right: var(--spacing-none, 0px);}
.banner .swiper_btn button[class*="next"]:after{transform: rotate(180deg);}

/* summmary */
.summary ul{display: flex;  gap: 32px var(--spacing-200, 32px); flex-wrap: wrap;}
.summary li{flex-grow: 1; flex-basis: 40%;}
.summary li a{border: 1px solid var(--color-border-frame-light, #E6E6E6); background: var(--color-background-onsurface, #FFF); display: flex; flex-direction: column; height: 100%;}
.summary img{width: 100%; height: 300px; object-fit: cover;}
.summary dl{display: flex; padding: var(--spacing-150, 24px); flex-direction: column; gap: var(--spacing-50, 8px); flex-grow: 1;}
.summary dt{display: flex; flex-direction: column;}
.summary dt span{font: var(--sys-font-body-5);}
.summary dt p{font: var(--sys-font-title-4); color: var(--color-content-accent-standard, #2E4FD1);}
.summary dd{color: var(--color-text-subdued, #595959); font: var(--sys-font-detail-1);}
.summary a:hover{border: 1px solid var(--color-content-accent-standard, #2E4FD1); background: var(--color-content-accent-lighter, #F7F8FD);}

/* ai robot */
.ai_robot{height: 500px; position: relative;}
.ai_robot .container{padding-top: 152px; z-index: 1; position: relative; padding-left: 0; padding-right: 0;}
.ai_robot ul{display: flex;}
.ai_robot li{flex-basis: 0; flex-grow: 1; display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--color-grey-white, #FFF); gap: var(--spacing-250, 40px);}
.ai_robot li.center{flex-basis: 308px; flex-grow: 0; padding: 0;}
.ai_robot li img{width: var(--sizing-1100); height: var(--sizing-1100);}
.ai_robot li dl{ display: flex; padding: var(--spacing-none, 0px); flex-direction: column; align-items: center; gap: var(--spacing-50, 8px);}
.ai_robot li dt{font: var(--sys-font-subtitle-4);}
.ai_robot li dd{font: var(--sys-font-detail-1); display: flex; flex-direction: column;}
.ai_robot li dd p{ padding: 0px var(--spacing-150, 20px);}
.ai_robot li dd span{font: var(--sys-font-detail-3); opacity: 0.7;}
.ai_robot .bg{width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
.ai_robot .bg picture{display: block; height: 100%;}
.ai_robot .bg source, .ai_robot .bg img{object-fit: cover; vertical-align: top; height: 100%; width: 100%;}

/* kt */
.kt .contents{display: flex; flex-direction: column; gap: var(--spacing-250, 40px); align-items: center;}
.kt .box{display: flex; max-width: 896px; width: 100%; padding: var(--spacing-none, 0px); align-items: center; gap: var(--spacing-none, 0px); border: 1px solid var(--color-border-frame-dark, #D9D9D9);}
.kt .box dl{display: flex; padding: var(--spacing-none, 0px) var(--spacing-250, 40px);flex-direction: column; align-items: flex-start; gap: var(--spacing-75, 12px); flex-grow: 1;}
.kt .box dt{font: var(--sys-font-subtitle-3);}
.kt .box dd{font: var(--sys-font-body-5); color: var(--color-text-subdued, #595959);}
.kt .box:nth-child(even){flex-direction: row-reverse;}

.video_wrap{background: var(--color-background-light, #FAFAFA);}

@media(max-width: 1280px){
    .banner .swiper_btn button{display: none;}
}

@media(max-width: 1100px){
    .banner h4 .br{display: block;}
    
    .summary dd .br{display: block;}
    .ai_robot .container{padding-top: 0; height: 100%;}
    .ai_robot ul{height: 100%; flex-wrap: wrap; gap: 0 310px;}
    .ai_robot li.center{display: none}
    .ai_robot li{flex-basis: 20%; flex-grow: 1; flex-shrink: 0; height: 50%; padding: var(--spacing-100); gap: var(--spacing-none, 0);}
    .ai_robot li:nth-child(n+3){justify-content: flex-end;}
    .ai_robot li dd p{padding: 0; font: var(--sys-font-detail-3);}
    .ai_robot li:nth-child(n+3) dd p{min-height: 5em;}
    
    .kt .box img{width: 0; flex-grow: 1;}
    .kt .box dl{flex-grow: 0; flex-basis: 54%; flex-shrink: 0;}
}

@media(max-width: 800px){
    .banner{height: 380px;}
    .banner .order{background: url('/img/banner/mobile/table-order.jpg')no-repeat center; background-size: cover; background-position: right center;}
    .banner .serving{background: url('/img/banner/mobile/serving.jpg')no-repeat center; background-size: cover; background-position: right center;}
    .banner .delivery{background: url('/img/banner/mobile/inside_delivery.jpg')no-repeat center; background-size: cover; background-position: right center;}
    .banner .sterilize{background: url('/img/banner/mobile/sterilize.jpg')no-repeat center; background-size: cover; background-position: right center;}
    .banner .container{width: 310px; margin: 0;}
    .banner h2 .br{display: block;}
    .banner h4 .br{display: inline-block;}
    .banner .swiper_btn button{display: none;}
    
    
}


@media(max-width: 660px){
    .kt .box dt{font: var(--sys-font-subtitle-4);}
    .kt .box dd{font: var(--sys-font-detail-1);}
}

@media(max-width: 600px){
    .summary ul{flex-direction: column;}
    .summary img{height: 51.5vw;}
    .summary dt span{display: none;}
    .summary dt p{font: var(--sys-font-title-3);}
    .summary dd{font: var(--sys-font-body-3);}
    
    .banner{height: 345px;}
    .banner .container{width: 280px;}
    .banner h2{font: var(--sys-font-heading-1);}
    
    .ai_robot{height: auto; }
    .ai_robot .container{padding: 0;}
    .ai_robot ul{gap: 50vw 0;}
    .ai_robot li{flex-basis: 40%; padding: var(--spacing-container-side);}
    
    .kt .box, .kt .box:nth-child(even){flex-direction: column; align-items: stretch;}
    .kt .box{border: none; width: 100%;}
    .kt .box img{width: 100%;}
    .kt .box dl{ padding: var(--spacing-150, 18px) var(--spacing-none, 0px);}
    .kt .box dt{font: var(--sys-font-subtitle-2);}
    .kt .box dd{font: var(--sys-font-body-3);}
}

@media(max-width: 450px){
    .kt .box dt{font: var(--sys-font-subtitle-4);}
    .kt .box dd{font: var(--sys-font-detail-1);}
}