/* app page add style sheet */

.app-absolute-container{
    position: relative;
    flex: 1;
    width: 100%;
    min-height: 0;
}

@media (min-width: 1900px) and (min-height: 1000px){
    .app-absolute-container{
        flex: revert;
        min-height: 650px;
    }
}

@media (min-width: 1024px){
    .app-absolute-content{
        position: absolute;
        inset: 0;
        margin: auto;
        opacity: 0;
    }
}
@media not all and (min-width: 1024px){
    html{
        scroll-behavior: smooth;
    }
    .app-absolute-content{
        scroll-margin-top: calc(1 * (64px + 48px));
    }
}

@media not all and (min-width: 1024px){
    .app-absolute-content{
        margin-top: 160px;
    }
}

.app-nav-buttons{}

#section2.app-section{
    min-height: 100vh;
    padding-top: calc(1 * (64px + 48px));
}
@media (min-width: 1024px){
    #section2.app-section{
        padding-top: calc(1 * (64px + min(78px, 3vw)));
    }
}

.app-section--outPointSection{
    margin-top: 300px;
}
@media not all and (min-width: 1024px){
    .app-section--outPointSection{
        margin-top: 160px;
    }
}



.c-app-navButton > *{
    pointer-events: none;
}

@media (any-hover:hover){
    .c-app-navButton .c-app-navButton__base,
    .c-app-navButton.is-active .c-app-navButton__hover{
        opacity: 1;
        visibility: visible;
    }
    .c-app-navButton .c-app-navButton__hover,
    .c-app-navButton.is-active .c-app-navButton__base{
        opacity: 0;
        visibility: hidden;
    }
}
@media (any-hover:hover) and (max-width: 1023px) {
    .c-app-navButton .c-app-navButton__hover,
    .c-app-navButton.is-active .c-app-navButton__base{
        opacity: 1;
        visibility: visible;
    }
}


@media (min-width: 1024px){
    .c-app-point__container{
        /* 1cqi = 9.10px */
        container-type: inline-size;
        width: 85%;
        height: 100%;
        max-width: 910px;
        margin-inline: auto;
    }
    .c-app-point{
        display: grid;
        grid-template-columns: auto 24.8cqi;
        width: 100%;
        max-width: none;
        margin-top: 8cqi;
        margin-inline: 0;
        padding-bottom: 5cqi;
    }
    .c-app-point__copy {
        margin-left: 1cqi;
    }
    .c-app-point__appealBox{
        margin-left: 1cqi;
        padding-right: 11cqi;
    }
    .c-app-point__rounded{
        width: 16cqi;
    }
}



@media (min-width: 1024px) and (min-height: 480px) and (max-height: 780px) {
    .c-app-point__rounded{
        width: 9cqi;
        width: calc(100vh * 98 / 780);
    }
    .c-app-point__copy .app-section-heading{
        font-size: 2.2cqi;
        font-size: calc(100vh * 28 / 780);
    }
    .o-app-pointBox {
        padding-block: 2.2cqi;
        padding-inline: 2.4cqi;
        padding: calc(100vh * 32 / 780);
    }
    .o-app-pointBox__title.app-section-heading{
        font-size: 1.7cqi;
        font-size: calc(100vh * 22 / 780);
    }
    .o-app-pointBox__desc.app-base-text{
        font-size: 1.5cqi;
        font-size: calc(100vh * 16 / 780);
    }
}

@media (min-width: 1024px) and (min-height: 480px) and (max-height: 600px) {
    .c-app-point__container{
        display: grid;
    }
    .c-app-point{
        grid-template-columns: auto 18cqi;
        margin-top: 4cqi;
    }
}

@media (min-width: 1024px) and (min-height: 600px) and (max-height: 780px) {
    .c-app-point{
        grid-template-columns: auto calc((100vh * 460 / 780) * 228 / 460);
        margin-top: calc(100vh * 42 / 780);
        padding-bottom: calc(100vh * 64 / 780);
    }
    .c-app-point__text{
        /* justify-content: normal; */
        gap: 2cqi;
    }
}

@media (min-width: 1024px) and (min-height: 781px) {
    .c-app-point__text{
        gap: 6cqi;
    }
    .c-app-point{
        grid-template-columns: auto 30cqi;
    }
}


/* 202508 add */
@media not all and (min-width: 1024px){
    .swiper-slide{
        height: auto;
    }
    .app-slider-content{
        height: 100%;
        align-items: revert;
    }
    .c-app-step{
        justify-content: revert;
    }
}