/* ================================================
invisalign
=============================================== */
.invisalign-about{padding-block: 150px;}
.invisalign-about > div{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 20px;align-items: center;}
.invisalign-about .image-content img{display: block;width: 100%;}
.invisalign-about .content-inner{padding-left: 10%;}
.invisalign-about.reverse .image-content{order: 2;}
.invisalign-about.reverse .content-inner{order: 1;padding-left: 0;padding-right: 10%;}
.invisalign-about.reverse .content-body{max-width: 700px;}

@media all and (max-width:1024px) {
    .invisalign-about{padding-block: 100px;}
    .invisalign-about > div{grid-template-columns: repeat(1,minmax(0,1fr));gap: 30px;}
    .invisalign-about .content-inner{padding: 0;align-self: start;order: 1;}
    .invisalign-about .image-content{order: 2;}
    .invisalign-about.reverse .content-inner{padding-right: 0;}
}

@media all and (max-width:767px) {
    .invisalign-about{padding-block: 60px;gap: 30px;}
}



.invisalign-strength{position: relative;}
.invisalign-strength__media img{display: block;width: 100%;height: 100%;object-fit: cover;}
.invisalign-strength__body{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: 1;width: 100%;}
.invisalign-strength__body > div{}

.pill-list{display: flex;flex-direction: column;gap: 10px;margin-top: 20px;max-width: 655px;}
.pill-list li{display: flex;align-items: center;gap: 20px;padding: 18px 30px;border-radius: 999px;background: var(--color-neutral-1);border: 1px solid var(--color-neutral-2);line-height: 1.6;}
.pill-list strong{font-weight: 600;font-size: 20px;color: var(--color-primary);display: block;}
.pill-list span{font-size: 20px;color: var(--color-neutral-7);display: block;}

@media all and (max-width:1440px) {
    .pill-list{margin-top: 10px;max-width: 550px;}
    .pill-list li{padding: 16px 24px;}
    .pill-list strong{font-size: 16px;}
    .pill-list span{font-size: 16px;}
}

@media all and (max-width:1024px) {
    .invisalign-strength__media{height: 550px;}
    .invisalign-strength__media .cf-pc{height: 100%;}
    .pill-list{max-width: 500px;}
}

@media all and (max-width:767px) {
    .invisalign-strength__media{height: auto;}
    .invisalign-strength__body{position: static;transform: none;margin-bottom: 35px;}

    .pill-list{gap: 0;}
    .pill-list li{flex-direction: column;align-items: flex-start;gap: 4px;padding: 15px 0;border: none;border-top: 1px solid var(--color-primary);border-radius: 0;}
    .pill-list span{font-size: 14px;}
}



.invisalign-diff{position: relative;overflow: hidden;color: var(--color-neutral-1);}
.invisalign-diff__media img{display: block;width: 100%;height: 100%;object-fit: cover;}
.invisalign-diff .content-inner{position: absolute;top: 0;right: 0;width: 57%;height: 100%;background: #002A78CC;display: flex;flex-direction: column;justify-content: center;padding-left: 7%;padding-right: var(--size-wrap-padding);}
.invisalign-diff .content-title{color: var(--color-neutral-1);}
.invisalign-diff .content-label{color: var(--color-sub-1);}
.invisalign-diff .content-body{max-width: 655px;}
.invisalign-diff .content-body > p{color: var(--color-neutral-1);}

@media all and (max-width:1024px) {
    .invisalign-diff__media{height: 550px;}
    .invisalign-diff__media .cf-pc{height: 100%;}
    .invisalign-diff .content-inner{max-width: none;width: 57%;}
}

@media all and (max-width:767px) {
    .invisalign-diff .content-inner{background: none;width: 100%;padding-inline: var(--size-wrap-padding);justify-content: flex-end;padding-bottom: 35px;}
}



.invisalign-process{padding-block: 150px;border-top: 1px solid var(--color-neutral-3);}
.invisalign-process .content-inner{text-align: center;margin-bottom: 80px;}
.process-list{display: grid;grid-template-columns: repeat(3,minmax(0,1fr));gap: 60px 20px;}
.process-list li{position: relative;line-height: 1.6;}
.process-num{position: absolute;top: 30px;left: 30px;z-index: 1;display: flex;align-items: center;justify-content: center;width: 70px;height: 70px;border-radius: 999px;background: var(--color-primary);color: var(--color-neutral-1);font-weight: 600;font-size: 28px;}
.process-media{margin-bottom: 20px;}
.process-media img{display: block;width: 100%;height: 100%;object-fit: cover;}
.process-list h3{font-weight: 600;font-size: 28px;color: var(--color-primary);margin-bottom: 6px;text-align: center;}
.process-list p{font-size: 20px;color: var(--color-neutral-7);text-align: center;}

@media all and (max-width:1440px) {
    .invisalign-process .content-inner{margin-bottom: 60px;}
    .process-num{width: 50px;height: 50px;font-size: 20px;top: 20px;left: 20px;}
    .process-media{margin-bottom: 15px;}
    .process-list h3{font-size: 22px;margin-bottom: 4px;}
    .process-list p{font-size: 16px;}
}

@media all and (max-width:1024px) {
    .invisalign-process{padding-block: 100px;}
    .process-list{grid-template-columns: repeat(2,minmax(0,1fr));gap: 40px 20px;}
}

@media all and (max-width:767px) {
    .invisalign-process{padding-block: 60px;}
    .invisalign-process .content-inner{margin-bottom: 40px;}
    .process-list{grid-template-columns: repeat(1,minmax(0,1fr));gap: 30px;}
    .process-num{width: 50px;height: 50px;font-size: 20px;top: 15px;left: 15px;}
    .process-list h3{font-size: 18px;}
    .process-list p{font-size: 14px;}
}



.invisalign-first{position: relative;}
.invisalign-first__media img{display: block;width: 100%;height: 100%;object-fit: cover;}
.invisalign-first__inner{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: 1;display: flex;justify-content: flex-end;}
.invisalign-first__inner .content-body{max-width: 655px;}

@media all and (max-width:1440px) {
    .invisalign-first__inner .content-body{max-width: 500px;}
}

@media all and (max-width:1024px) {
    .invisalign-first__media{height: 550px;}
    .invisalign-first__media .cf-pc{height: 100%;}
    .invisalign-first__inner .content-body{max-width: 330px;}
}

@media all and (max-width:767px) {
    .invisalign-first__media{height: auto;}
    .invisalign-first__inner{top: auto;transform: translateX(-50%);bottom: 75px;}
    .invisalign-first__inner .content-body{max-width: none;}
    .invisalign-first__inner .content-label{color: var(--color-sub-1);}
    .invisalign-first__inner .content-title{color: var(--color-neutral-1);}
    .invisalign-first__inner .content-title .tit-sub{color: var(--color-sub-1);}
    .invisalign-first__inner .content-body > p{color: var(--color-neutral-1);}
}



.invisalign-check{position: relative;display: flex;justify-content: flex-end; background: var(--color-bg-2);}
.invisalign-check__media{width: 43%;}
.invisalign-check__media img{display: block;width: 100%;height: 100%;object-fit: cover;}
.invisalign-check .content-inner{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: 1;}
.invisalign-check .content-inner .pill-list{max-width: 790px;}

@media all and (max-width:1440px) {
    .invisalign-check .content-inner .pill-list{max-width: 630px;}
}

@media all and (max-width:1024px) {
    .invisalign-check{flex-direction: column;}
    .invisalign-check__media{width: 100%;}
    .invisalign-check .content-inner{position: static;transform: none;padding-inline: var(--size-wrap-padding);padding-block: 100px;}
}

@media all and (max-width:767px) {
    .invisalign-check .content-inner{padding-block: 60px;}
    .invisalign-check .pill-list li{background: var(--color-bg-2);}
}



.invisalign-notice{position: relative;}
.invisalign-notice__media img{display: block;width: 100%;height: 100%;object-fit: cover;}
.invisalign-notice__inner{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: 1;}
.invisalign-notice .content-label{color: var(--color-sub-1);}
.invisalign-notice .content-title{color: var(--color-neutral-1);}
.invisalign-notice .content-body{max-width: 790px;}
.invisalign-notice .content-body > p{color: var(--color-neutral-1);}

@media all and (max-width:1440px) {
    .invisalign-notice .content-body{max-width: 600px;}
}

@media all and (max-width:1024px) {
    .invisalign-notice__media{height: 350px;}
    .invisalign-notice__media .cf-pc{height: 100%;}
    .invisalign-notice .content-body{max-width: 530px;}
}

@media all and (max-width:767px) {
    .invisalign-notice__media{height: auto;}
    .invisalign-notice__inner{top: 30% !important;}
}



.invisalign-faq{padding-block: 150px;background: var(--color-bg-2);}
.invisalign-faq .content-inner{text-align: center;margin-bottom: 80px;}

@media all and (max-width:1440px) {
    .invisalign-faq .content-inner{margin-bottom: 60px;}
}

@media all and (max-width:1024px) {
    .invisalign-faq{padding-block: 100px;}
}

@media all and (max-width:767px) {
    .invisalign-faq{padding-block: 60px;}
    .invisalign-faq .content-inner{margin-bottom: 40px;}
}



/* ===============================================
pediatric
=============================================== */
.pediatric-treat{padding-block: 150px;}
.pediatric-treat .content-inner{text-align: center;margin-bottom: 80px;}
.pediatric-treat .treat-content{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 20px;}
.pediatric-treat .treat-content .image-content img{display: block;width: 100%;}
.pediatric-treat .treat-content .text-content{display: flex;flex-direction: column;gap: 20px;height: 100%;}
.pediatric-treat .treat-content .text-content div{border-radius: 10px;background: var(--color-bg-2);padding-inline: 35px;height: stretch;display: flex;flex-direction: column;justify-content: center;}
.pediatric-treat .treat-content .text-content div h3{font-weight: 600;font-size: 22px;color: var(--color-primary);margin-bottom: 6px;}
.pediatric-treat .treat-content .text-content div p{font-size: 18px;color: var(--color-neutral-7);}

@media all and (max-width:1440px) {
    .pediatric-treat .content-inner{margin-bottom: 60px;}
    .pediatric-treat .treat-content .text-content div{padding-inline: 30px;}
    .pediatric-treat .treat-content .text-content div h3{font-size: 20px;}
    .pediatric-treat .treat-content .text-content div p{font-size: 16px;}
}

@media all and (max-width:1024px) {
    .pediatric-treat{padding-block: 100px;}
    .pediatric-treat .treat-content{grid-template-columns: repeat(1,minmax(0,1fr));gap: 15px;}
    .pediatric-treat .treat-content .text-content{gap: 15px;}
    .pediatric-treat .treat-content .text-content div{padding: 25px;}
}

@media all and (max-width:767px) {
    .pediatric-treat{padding-block: 60px;}
    .pediatric-treat .content-inner{margin-bottom: 40px;}
    .pediatric-treat .treat-content .text-content div{padding: 20px;}
    .pediatric-treat .treat-content .text-content div h3{font-size: 18px;}
    .pediatric-treat .treat-content .text-content div p{font-size: 14px;}
}



.pediatric-approach{padding-block: 150px;background: var(--color-bg-2);}
.pediatric-approach > div{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 20px;align-items: center;}
.pediatric-approach .image-content{order: 2;}
.pediatric-approach .image-content img{display: block;width: 100%;}
.pediatric-approach .content-inner{order: 1;padding-right: 10%;}
.pediatric-approach .content-body{max-width: 700px;}

@media all and (max-width:1024px) {
    .pediatric-approach{padding-block: 100px;}
    .pediatric-approach > div{grid-template-columns: repeat(1,minmax(0,1fr));gap: 30px;}
    .pediatric-approach .content-inner{padding: 0;align-self: start;order: 1;}
    .pediatric-approach .image-content{order: 2;}
}

@media all and (max-width:767px) {
    .pediatric-approach{padding-block: 60px;gap: 30px;}
}



.pediatric-phase{padding-block: 150px;}
.pediatric-phase .content-inner{text-align: center;margin-bottom: 80px;}
.phase-content{display: grid;grid-template-columns: repeat(4,minmax(0,1fr));gap: 20px;}
.phase-content .phase__item{text-align: center;}
.phase-content .phase__item img{display: block;width: 100%;}
.phase-content .phase__item .text-content{margin-top: 15px;}
.phase-content .phase__item .text-content h3{font-weight: 600;font-size: 22px;color: var(--color-primary);margin-bottom: 10px;}
.phase-content .phase__item .text-content p{font-size: 16px;color: var(--color-neutral-7);}

@media all and (max-width:1440px) {
    .pediatric-phase .content-inner{margin-bottom: 60px;}
    .phase-content .phase__item .text-content h3{font-size: 18px;margin-bottom: 7px;}
    .phase-content .phase__item .text-content p{font-size: 14px;}
}

@media all and (max-width:1024px) {
    .pediatric-phase{padding-block: 100px;}
    .phase-content{grid-template-columns: repeat(2,minmax(0,1fr));gap: 60px 15px;}
}

@media all and (max-width:767px) {
    .pediatric-phase{padding-block: 60px;}
    .pediatric-phase .content-inner{margin-bottom: 40px;}
    .pediatric-phase .content-title{font-size: 26px;}
    .phase-content{grid-template-columns: repeat(1,minmax(0,1fr));gap: 40px;}
}



/* ===============================================
adult
=============================================== */
.adult-treat{padding-block: 150px;position: relative;}
.adult-treat .content-inner{text-align: center;margin-bottom: 80px;align-items: center;}
.adult-treat .content-body{max-width: 100%;}
.adult-treat .treat-content{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 20px;}
.adult-treat.reverse::after{position: absolute;top: 0;left: 50%;transform: translateX(-50%);width: calc(100% - var(--size-wrap-padding) * 2);max-width: 1600px;height: 1px;content: '';background: var(--color-neutral-2);}
.adult-treat.reverse .treat-content .text-content{order: 1;}
.adult-treat.reverse .treat-content .image-content{order: 2;}
.adult-treat .treat-content .image-content img{display: block;width: 100%;}
.adult-treat .treat-content .text-content{display: flex;flex-direction: column;gap: 20px;height: 100%;}
.adult-treat .treat-content .text-content div{border-radius: 10px;background: var(--color-bg-2);padding-inline: 35px;height: stretch;display: flex;flex-direction: column;justify-content: center;}
.adult-treat .treat-content .text-content div h3{font-weight: 600;font-size: 22px;color: var(--color-primary);margin-bottom: 6px;}
.adult-treat .treat-content .text-content div p{font-size: 18px;color: var(--color-neutral-7);}
.adult-treat .treat-txt{text-align: center;font-size: 18px;color: var(--color-neutral-7);margin-top: 50px;}

@media all and (max-width:1440px) {
    .adult-treat .content-inner{margin-bottom: 60px;}
    .adult-treat .treat-content .text-content div{padding-inline: 30px;}
    .adult-treat .treat-content .text-content div h3{font-size: 20px;}
    .adult-treat .treat-content .text-content div p{font-size: 16px;}
}

@media all and (max-width:1024px) {
    .adult-treat{padding-block: 100px;}
    .adult-treat .treat-content{grid-template-columns: repeat(1,minmax(0,1fr));gap: 15px;}
    .adult-treat .treat-content .text-content{gap: 15px;}
    .adult-treat.reverse .treat-content .text-content{order: 2;}
    .adult-treat.reverse .treat-content .image-content{order: 1;}
    .adult-treat .treat-content .text-content div{padding: 25px;}
    .adult-treat .treat-txt{margin-top: 30px;}
}

@media all and (max-width:767px) {
    .adult-treat{padding-block: 60px;}
    .adult-treat .content-inner{margin-bottom: 40px;}
    .adult-treat .treat-content .text-content div{padding: 20px;}
    .adult-treat .treat-content .text-content div h3{font-size: 18px;}
    .adult-treat .treat-content .text-content div p{font-size: 14px;}
    .adult-treat .treat-txt{font-size: 13px;}
}



/* ===============================================
ai-growth-plate
=============================================== */
.ai-matters{padding-block: 150px;}
.ai-matters > div{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 20px;align-items: center;}
.ai-matters .image-content{order: 2;}
.ai-matters .image-content img{display: block;width: 100%;}
.ai-matters .content-inner{order: 1;padding-right: 10%;}
.ai-matters .content-body{max-width: 700px;}

@media all and (max-width:1024px) {
    .ai-matters{padding-block: 100px;}
    .ai-matters > div{grid-template-columns: repeat(1,minmax(0,1fr));gap: 30px;}
    .ai-matters .content-inner{padding: 0;align-self: start;order: 1;}
    .ai-matters .image-content{order: 2;}
}

@media all and (max-width:767px) {
    .ai-matters{padding-block: 60px;gap: 30px;}
}



.ai-process{padding-block: 150px;background: var(--color-bg-2);}
.ai-process .content-inner{text-align: center;margin-bottom: 80px;align-items: center;}
.ai-process .content-body{max-width: 100%;}
.process-content{display: grid;grid-template-columns: repeat(3,minmax(0,1fr));gap: 20px;}
.process-content .process-item{text-align: center;}
.process-content .process-item img{display: block;width: 100%;}
.process-content .process-item h3{font-weight: 600;font-size: 22px;color: var(--color-primary);margin-bottom: 6px;}

@media all and (max-width:1440px) {
    .ai-process .content-inner{margin-bottom: 60px;}
}

@media all and (max-width:1024px) {
    .ai-process{padding-block: 100px;}
}

@media all and (max-width:767px) {
    .ai-process{padding-block: 60px;}
    .ai-process .content-inner{margin-bottom: 40px;}
}



.ai-check{padding-block: 150px;}
.ai-check .content-inner{text-align: center;margin-bottom: 80px;align-items: center;}
.check-list{border: 1px solid var(--color-neutral-3);border-radius: 20px;overflow: hidden;}
.check__item{display: grid;grid-template-columns: minmax(220px, 25%) 1fr;border-bottom: 1px solid var(--color-neutral-3);}
.check__item:last-child{border-bottom: none;}
.check__label{display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 8px;padding: 40px 30px;text-align: center;line-height: 1.4;background: var(--color-bg-2);}
.check__item.is-primary .check__label{background: var(--color-primary);color: var(--color-neutral-1);}
.check__num{font-weight: 600;font-size: 16px;color: var(--color-primary);font-family: var(--font-point);}
.check__item.is-primary .check__num{color: var(--color-sub-1);}
.check__label h3{font-weight: 600;font-size: 28px;color: var(--color-neutral-9);}
.check__item.is-primary .check__label h3{color: var(--color-neutral-1);}
.check__body{display: flex;align-items: center;padding: 40px 50px;background: var(--color-neutral-1);}
.check__body p{font-size: 20px;line-height: 1.6;color: var(--color-neutral-7);}

@media all and (max-width:1440px) {
    .ai-check .content-inner{margin-bottom: 60px;}
    .check__label{padding: 35px 25px;}
    .check__label h3{font-size: 22px;}
    .check__body{padding: 35px 40px;}
    .check__body p{font-size: 16px;}
}

@media all and (max-width:1024px) {
    .ai-check{padding-block: 100px;}
    .check__item{grid-template-columns: minmax(200px, 30%) 1fr;}
    .check__label{padding: 30px 20px;}
    .check__body{padding: 30px;}
}

@media all and (max-width:767px) {
    .ai-check{padding-block: 60px;}
    .ai-check .content-inner{margin-bottom: 40px;}
    .check-list{border-radius: 10px;}
    .check__item{grid-template-columns: repeat(1,minmax(0,1fr));}
    .check__label{padding: 25px 20px;}
    .check__num{font-size: 14px;}
    .check__label h3{font-size: 18px;}
    .check__body{padding: 20px;}
    .check__body p{font-size: 13px;}
    .check__body p br{display: none;}
}



/* ===============================================
gallery
=============================================== */
.ba-gallery{padding-block: 100px;}
.ba-gallery-nav{display: flex;flex-wrap: wrap;justify-content: center;gap: 10px;margin-bottom: 80px;}
.ba-gallery-nav__btn{padding: 7px 16px;border: 1px solid var(--color-neutral-2);border-radius: 999px;font-size: 14px;line-height: 1.4;color: var(--color-neutral-4);white-space: nowrap;transition: background-color .15s ease, border-color .15s ease, color .15s ease;}
.ba-gallery-nav__btn.is-active{background: var(--color-primary);border-color: var(--color-primary);color: var(--color-neutral-1);font-weight: 600;}

.ba-gallery-list{display: flex;flex-direction: column;gap: 20px;}
.ba-gallery-item{display: block;}

.ba-gallery-card{display: grid;grid-template-columns: minmax(0, 1fr) 50px minmax(0, 1fr);gap: 0;border-radius: 20px;overflow: hidden;border: 1px solid var(--color-neutral-2);}
.ba-gallery-card__side{position: relative;min-width: 0;}
.ba-gallery-card__badge{position: absolute;top: 20px;left: 20px;z-index: 1;padding: 6px 14px;border-radius: 999px;font-size: 12px;font-weight: 600;line-height: 1;text-transform: uppercase;color: var(--color-neutral-1);}
.ba-gallery-card__badge--before{background: var(--color-neutral-4);}
.ba-gallery-card__badge--after{background: var(--color-primary);}
.ba-gallery-card__media{}
.ba-gallery-card__media img{display: block;width: 100%;object-fit: cover;}

.ba-gallery-card__divider{display: flex;align-items: center;justify-content: center;background: var(--color-primary);color: var(--color-neutral-1);}

.ba-gallery-empty{margin-top: 40px;text-align: center;font-size: 18px;color: var(--color-neutral-4);}

@media all and (max-width:1024px) {
    .ba-gallery{padding-block: 60px;}
    .ba-gallery-nav{margin-bottom: 60px;}
    .ba-gallery-card{grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr);}
    .ba-gallery-card__badge{top: 16px;left: 16px;font-size: 11px;padding: 5px 12px;}
}

@media all and (max-width:767px) {
    .ba-gallery{padding-block: 60px;}
    .ba-gallery-nav{gap: 7px;margin-bottom: 40px;}
    .ba-gallery-nav__btn{font-size: 13px;padding: 8px 14px;}
    .ba-gallery-list{gap: 15px;}
    .ba-gallery-card{grid-template-columns: minmax(0, 1fr);border-radius: 15px;}
    .ba-gallery-card__badge{top: 12px;left: 12px;font-size: 10px;padding: 4px 10px;}
    .ba-gallery-card__divider{height: 35px;}
    .ba-gallery-card__divider svg{transform: rotate(90deg);}
    .ba-gallery-empty{font-size: 14px;margin-top: 30px;}
}