@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Noto+Sans+TC:wght@100..900&display=swap');

:root{
    --chatGray-100:#F2F1EF;
    --chatGray-200: #b4b4b4;
    --chatGray-700: #4E4D4E;

    --chatGreen-500: #00A971;

    --chatBlue-500: #2980C0;
    --chatBlue-700: #0B57A6;

    --chatOrange-500: #F2A426;
    --chatRed-500: #E20012;

}

.bg-gray-sky{
    background:var(--chatGray-100);
}

.bg-chatBlue-500{
    color: var(--chatBlue-500);
}

.font-Lato{
    font-family: "Lato", "Noto Sans TC", sans-serif !important;
}

.font-chatRed{
    color: var(--chatRed-500);
}

.text-chatBlue{
    color: var(--chatBlue-500);
}

.joychats-page{
    .header_after_login{
        background:var(--chatGray-100);
        z-index:99;
    }

    #footer-login{
        background:var(--chatGray-100);
    }
}

.joyChats{
    .chats-banner{
        background:var(--chatGray-100);
        z-index:5;

        button{
            p{
                font-size:1.75rem;
            }
        }
    }
    
    .chats-btn-group{        
        bottom:1rem;
        right:30rem;

        button{
            background:var(--chatGreen-500);
            border-radius:5rem;
            border:0;
            width:fit-content;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
            padding:.5rem 2rem;

            &:hover:not(:disabled){
                box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
            }

            &:disabled{
                opacity: 0.5;
                cursor: not-allowed;

                p{
                    color: white;
                }

                img{
                    opacity: 0.5;
                }
            }

            p{
                font-weight:700;
                color:var(--chatBlue-500);
            }
        }
        
        ul{
            width:70%;
            margin-block-start:0;

            li{
                list-style:none;
                margin-left: -1.5rem;

                & + li{
                    margin-left: 1rem;
                    padding-left: 1rem;
                    border-left:1px var(--chatGray-200) solid;
                }
            }
        }

        a{
            width:fit-content;            
            color: var(--chatGray-700);
            text-decoration: none;
            font-size:1.125rem;
            font-weight:500;

            .icon-downloads{
                background: var(--chatGray-200);
                -webkit-mask-img:url('/../../../images/2025/joyChats/icon_downloads.svg');
                mask-image: url('/../../../images/2025/joyChats/icon_downloads.svg');

                -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
                -webkit-mask-position: center;
                mask-position: center;
                -webkit-mask-size: contain;
                mask-size: contain;

                width:.8rem;
                height:.8rem;
            }

            &:hover{
                color:var(--chatGray-700);

                .icon-downloads{
                    background-color: var(--chatGray-700);
                }
            }            
        }

    }

    .joyChats-step{
        background:var(--chatGray-100);
        padding:4rem 0 8rem 0;
        z-index:3;
        
        .step-con{
            width:53%;

            .title{
                h2{
                    font-weight:700;
                    color:var(--chatBlue-700);
                }
            }

            .step-wrap{
                justify-content: space-between;

                .step-group{
                    background:white;
                    border-radius:50%;
                    width:10rem;
                    height:10rem;

                    .photo{
                        width:60%;
                    }

                    p{
                        font-weight:700;
                        color:var(--chatBlue-700);
                        line-height:1.5rem;
                    }

                    &:before{
                        position:absolute;
                        content:"";
                        display:block;
                        background:url('/../../../images/2025/joyChats/icon_left.png');
                        width:28px;
                        height:34px;
                        margin:auto;
                        top:0;
                        bottom:0;
                        right:-3rem;
                    }

                    &:last-child:before{
                        display:none;
                    }

                }
                
            }

        }
    }

    .advantage{
        background:var(--chatBlue-700);
        padding:1rem 0 3rem 0;
        z-index:5;

        .advantage-con{
            width:65%;

            .advantage-title{
                color:white;

                h2{
                    font-size:1.875rem;

                    span{
                        text-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
                    }
                }
            }

            .advantage-wrap{
                gap:1rem 3rem;

                .advantage-group{
                    width:30%;

                    .title{
                        border-bottom:1px solid var(--chatGreen-500); 

                        .photo{
                            width:15%;
                        }
                    }
                }
            }
            
            .bg-advantage{                

                img{
                    position:absolute;
                    display:block;
                    margin:auto;
                    top:-.5rem;
                    left:0;
                    z-index:7;
                }
            }
        }
    }

    .question{
        background:var(--chatGray-100);
        overflow:hidden;

        .question-con{
            z-index:5;

            padding:3rem 0 4rem 0;

            .title{
                h2{
                    font-size:2.25rem;
                    font-weight:700;
                    color:var(--chatBlue-700);
                }
            }

            ul.nav{
                width:65%;
                justify-content: space-between;
                gap: 1rem;

                li.nav-item{

                    button{
                        background:white;
                        font-size:1.125rem;
                        font-weight:500;
                        color:var(--chatBlue-500);
                        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
                        border:0;
                        border-radius:2rem;
                        cursor: pointer;
                        transition: all .3s;

                        &:hover{
                            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
                        }

                        &.active{
                            background:var(--chatBlue-700);
                            color:white;
                        }
                    }
                }
            }

            .question-wrap{
                width:65%;

                .question-group{
                    min-height:31rem;

                    .question-item{
                        margin-bottom: 1rem;

                        button{
                            background:white;
                            font-size:1.125rem;
                            border-radius:1rem;
                            border:0;
                            width:100%;
                            padding: 1rem 2rem;

                            .icon-state{
                                color:var(--chatGreen-500);
                                transition: transform .3s ease;
                            }

                            &:not(.collapsed){
                                border-radius:1rem 1rem 0 0;

                                .icon-state{
                                   transform: rotate(225deg); 
                                }
                            }                            
                        }

                        .question-body{
                            background:rgba(255,255,255, .6);
                            border-radius:0 0 1rem 1rem;
                            width:100%;
                            padding:1rem 2rem;

                            ul.bodyCon{
                                margin-left: -1.125rem;
                            }

                            ol{
                                margin-top: 0.5rem;
                                margin-bottom: 0.5rem;

                                li{
                                    line-height:2rem;
                                }
                            }

                            button{
                                &.btn-goClass{
                                    background:var(--chatBlue-500);
                                    color:white;
                                    border-radius:1rem;
                                    width:fit-content;
                                    border-radius:2rem;
                                    padding:.5rem 1rem;
                                }
                            }

                            a{
                                font-weight:500;
                                color:var(--chatBlue-500);

                                &:hover{
                                    text-decoration: none;
                                }
                            }
                        }
                    }

                    
                }
            }

        }

        .bg-question{
            img{
                top:-.5rem;
                right:0;
                z-index:1;
            }
        }

    }

    .goToClass{
        top:0;
        bottom:0;
        right:.5rem;
        z-index:9999999999;

        .photo{
            width:125px;
        }
    }
}

@media (max-width: 1920px) {
    .joyChats{
        .chats-btn-group{
            bottom:0;
            right:25rem;

            button{
                padding:.5rem 3.5rem;
            }
        }

        .joyChats-step{
            .step-con{
                width:45%;
            }
        }

        .advantage{
            .advantage-con{
                .bg-advantage{
                    img{
                        top:-5.7em;
                    }
                }
            }            
        }        
    }       
}

@media (max-width: 1800px) {
    .joyChats{
        .chats-btn-group{
            bottom:-1rem;
            right:22rem;

            button{
                padding:.5rem 4rem;
            }
        }

        .joyChats-step{
            .step-con{
                width:45%;
            }
        }

        .advantage{
            .advantage-con{
                .bg-advantage{
                    img{
                        top:-5.2rem;
                    }
                }
            }
            
        }
    }       
}

@media (max-width: 1600px) {
    .joyChats{
        .chats-btn-group{
            bottom:-2em;
            right:17rem;

            button{
                padding:.5rem 4rem;
            }
        }

        .joyChats-step{
            .step-con{
                width:53%;
            }
        }

        .advantage{
            .advantage-con{
                .bg-advantage{
                    img{
                        top:-4.8rem;
                    }
                }
            }
            
        }        
    }       
}

@media (max-width: 1400px) {
    .joyChats{
        .chats-btn-group{
            bottom:-2rem;
            right:14rem;

            button{
                padding:.5rem 3.5rem;
            }
        }

        .joyChats-step{
            .step-con{
                width:60%;
            }
        }

        .advantage{
            .advantage-con{
                width:75%;

                .bg-advantage{
                    img{
                        top:-4.2rem;
                    }
                }
            }
            
        }

        .question{
            .question-con{
                ul.nav{
                    width:75%;
                }
                
                .question-wrap{
                    width:75%;
                }
            }
        }
    }
}

@media (max-width: 1200px) {
    .joyChats{
        .chats-btn-group{
            bottom:-3rem;
            right:11rem;

            button{
                padding:.5rem 3rem;
            }
        }

        .joyChats-step{
            .step-con{
                width:70%;
            }
        }

        .advantage{
            .advantage-con{
                width:80%;

                .bg-advantage{
                    img{
                        top:-3.5rem;
                    }
                }
            }
            
        }

        .question{
            .question-con{
                ul.nav{
                    width:80%;
                    justify-content: center;
                    gap:1rem 5rem;

                    li{
                        width:fit-content;
                        text-align:center;
                    }
                }
                
                .question-wrap{
                    width:80%;
                }
            }
        }
    }
}

@media (max-width: 1024px) {
    .joyChats{
        .chats-btn-group{
            bottom:-3.5rem;
            right:8rem;

            button{
                padding:.3rem 2.5rem;
            }
        }

        .joyChats-step{
            padding:4rem 0 6rem 0;

            .step-con{
                width:80%;
            }
        }

        .advantage{
            .advantage-con{
                width:80%;

                .advantage-wrap{
                    .advantage-group{
                        width:43%;
                    }
                }

                .bg-advantage{
                    img{
                        top:-3rem;
                    }
                }
            }
            
        }
    }
}

@media (max-width: 992px) {
    .joyChats{
        .chats-btn-group{
            bottom:-3.5rem;
            right:7.5rem;

            button{
                padding:.3rem 2rem;
            }
        }

        .joyChats-step{
            .step-con{
                width:85%;
            }
        }

        .advantage{
            .advantage-con{
                width:80%;

                .advantage-wrap{
                    .advantage-group{
                        width:43%;
                    }
                }

                .bg-advantage{
                    img{
                        top:-3rem;
                    }
                }
            }
            
        }
    }
}

@media (max-width: 768px) {
    .joyChats{
        .chats-banner{
            z-index:9;
        }

        .chats-btn-group{
            bottom:-4.55rem;
            right:4rem;

            button{
                padding:.3rem 2rem;

                p{
                    width:1.rem;
                }
            }

            a{
                p{
                    font-size:1rem;
                }
            }
        }

        .joyChats-step{
            padding-bottom: 4em;
            
            .step-con{
                width:90%;

                .step-wrap{
                    justify-content: center;
                    width:50%;
                    margin:auto;

                    .step-group{
                        width:12rem;
                        height:12rem;

                        &:before{ 
                            transform: rotate(90deg);
                            top:-0;
                            bottom:-15rem;
                            left:0;
                            right:0;
                        }

                        & + .step-group{
                            margin-top: 3rem;
                        }
                    }
                }
            }
        }

        .advantage{
            .advantage-con{
                width:75%;

                .advantage-wrap{
                    .advantage-group{
                        width:100%;

                        .title{
                            .photo{
                                width:12%;
                            }
                        }                        
                    }
                }

                .bg-advantage{
                    img{
                        top:-2.3rem;
                    }
                }
            }
            
        }

        .question{
            .question-con{
                ul.nav{
                    width:80%;
                    justify-content: center;
                    gap:1rem;

                    li{
                        width:fit-content;
                        text-align:center;
                    }
                }
                
                .question-wrap{
                    width:80%;
                }
            }

            .question-wrap{
                .question-group{
                    .question-item{
                        button{
                            font-size:1rem;
                            text-align:left;
                            padding: 1rem;
                        }
                    }
                }
            }

            .bg-question{
                img{
                   width:35%;     
                }
                
            }
        }

        .goToClass{
            .photo{
                width:110px;
            }
        }
    }
}

@media (max-width: 648px) {
    .joyChats{
        .chats-banner{
            z-index:9;

            button{
                p{
                    font-size:1.25rem;
                }
            }
        }

        .chats-btn-group{
            bottom:-3.5rem;
            right:3rem;

            button{
                padding:.3rem 1.5rem;
            }
        }

        .joyChats-step{
            padding-bottom: 4rem;
            
            .step-con{
                width:90%;

                .step-wrap{
                    justify-content: center;
                    width:50%;
                    margin:auto;

                    .step-group{
                        width:12rem;
                        height:12rem;

                        &:before{ 
                            transform: rotate(90deg);
                            top:-0;
                            bottom:-15rem;
                            left:0;
                            right:0;
                        }

                        & + .step-group{
                            margin-top: 3rem;
                        }
                    }
                }
            }
        }

        .advantage{
            .advantage-con{
                width:85%;

                .advantage-wrap{
                    .advantage-group{
                        width:100%;

                        .title{
                            .photo{
                                width:12%;
                            }
                        }                        
                    }
                }

                .bg-advantage{
                    img{
                        top:-2rem;
                    }
                }
            }            
        }

        .question{
            .question-con{
                ul.nav{
                    width:90%;
                    justify-content: center;
                    gap:1rem;

                    li{
                        width:fit-content;

                        &.nav-item{
                            button{
                                font-size: 1rem;
                            }
                        }                        
                    }
                }
                
                .question-wrap{
                    width:90%;
                }
            }
        }
    }
}

@media (max-width: 576px) {
    .joyChats{
        .chats-banner{
            z-index:9;

            button{
                p{
                    font-size:1.25rem;
                }
            }
        }

        .chats-btn-group{
            bottom:-4rem;
            right:2rem;

            button{
                padding:.3rem 1.5rem;
            }
        }

        .joyChats-step{
            padding-bottom: 4rem;
            
            .step-con{
                width:90%;

                .title{
                    h2{
                        font-size:1.75rem;
                    }
                }

                .step-wrap{
                    justify-content: center;
                    width:50%;
                    margin:auto;

                    .step-group{
                        width:12rem;
                        height:12rem;

                        &:before{ 
                            transform: rotate(90deg);
                            top:-0;
                            bottom:-15rem;
                            left:0;
                            right:0;
                        }

                        & + .step-group{
                            margin-top: 3rem;
                        }
                    }
                }
            }
        }

        .advantage{
            .advantage-con{
                width:85%;

                .advantage-wrap{
                    .advantage-group{
                        width:100%;

                        .title{
                            .photo{
                                width:12%;
                            }
                        }                        
                    }
                }

                .bg-advantage{
                    img{
                        top:-1.5rem;
                    }
                }
            }
            
        }

        .question{
            .question-con{
                ul.nav{
                    gap:1rem;

                    li{
                        width:25%;      
                    }
                }
            }
        }
    }
}

@media (max-width: 425px) {
    .joyChats{
        .chats-banner{
            z-index:9;

            button{
                p{
                    font-size:1.25rem;
                }
            }
        }

        .chats-btn-group{
            bottom:-6.5rem;
            left:0;
            right:0;
            margin:auto;

            button{
                padding:.3rem 1.5rem;
            }
        }

        .joyChats-step{
            padding-top: 8rem;
            padding-bottom: 4rem;
            
            .step-con{
                width:90%;

                .title{
                    h2{
                        font-size:1.75rem;
                    }
                }

                .step-wrap{
                    justify-content: center;
                    width:50%;
                    margin:auto;

                    .step-group{
                        width:12rem;
                        height:12rem;

                        &:before{ 
                            transform: rotate(90deg);
                            top:-0;
                            bottom:-15rem;
                            left:0;
                            right:0;
                        }

                        & + .step-group{
                            margin-top: 3rem;
                        }
                    }
                }
            }
        }

        .advantage{
            .advantage-con{
                width:85%;

                .advantage-title{
                    h2{
                        font-size:1.6rem;
                    }
                }

                .advantage-wrap{
                    .advantage-group{
                        width:100%;

                        .title{
                            .photo{
                                width:12%;
                            }
                        }                        
                    }
                }

                .bg-advantage{
                    img{
                        top:-1em;
                    }
                }
            }            
        }

        .question{
            .question-con{
                ul.nav{
                    gap:1rem;

                    li{
                        width:46%;  
                        
                        &.nav-item{
                            button{
                                min-height:4rem;
                            }
                        }
                    }
                }
            }
        }        

        .goToClass{
            .photo{
                width:100px;
            }
        }
    }
}

@media (max-width: 375px) {
    .joyChats{
        .chats-banner{
            z-index:9;

            button{
                p{
                    font-size:1.25rem;
                }
            }
        }

        .chats-btn-group{
            bottom:-6.5rem;
            left:0;
            right:0;
            margin:auto;

            button{
                padding:.3rem 1.5rem;
            }
        }

        .joyChats-step{
            padding-top: 8rem;
            padding-bottom: 4rem;
            
            .step-con{
                width:90%;

                .title{
                    h2{
                        font-size:1.75rem;
                    }
                }

                .step-wrap{
                    justify-content: center;
                    width:50%;
                    margin:auto;

                    .step-group{
                        width:10rem;
                        height:10rem;

                        &:before{ 
                            transform: rotate(90deg);
                            top:-0;
                            bottom:-13rem;
                            left:0;
                            right:0;
                        }

                        & + .step-group{
                            margin-top: 3rem;
                        }
                    }
                }
            }
        }

        .advantage{
            .advantage-con{
                width:85%;

                .advantage-title{
                    h2{
                        font-size:1.6rem;
                    }
                }

                .advantage-wrap{
                    .advantage-group{
                        width:100%;

                        .title{
                            .photo{
                                width:12%;
                            }
                        }                        
                    }
                }

                .bg-advantage{
                    img{
                        top:-1.2rem;
                    }
                }
            }            
        }

        .goToClass{
            .photo{
                width:90px;
            }
        }
    }
}

@media (max-width: 320px) {
    .joyChats{
        .chats-banner{
            z-index:9;

            button{
                p{
                    font-size:1.25rem;
                }
            }
        }

        .chats-btn-group{
            bottom:-6.5rem;
            left:0;
            right:0;
            margin:auto;

            button{
                padding:.3rem 1.5rem;
            }
        }

        .joyChats-step{
            padding-top: 8rem;
            padding-bottom: 4rem;
            
            .step-con{
                width:90%;

                .title{
                    h2{
                        font-size:1.75rem;
                    }
                }

                .step-wrap{
                    justify-content: center;
                    width:50%;
                    margin:auto;

                    .step-group{
                        width:8rem;
                        height:8rem;

                        &:before{ 
                            transform: rotate(90deg);
                            top:-0;
                            bottom:-11rem;
                            left:0;
                            right:0;
                        }

                        & + .step-group{
                            margin-top: 3rem;
                        }
                    }
                }
            }
        }

        .advantage{
            .advantage-con{
                width:85%;

                .advantage-title{
                    h2{
                        font-size:1.6rem;
                    }
                }

                .advantage-wrap{
                    .advantage-group{
                        width:100%;

                        .title{
                            .photo{
                                width:12%;
                            }
                        }                        
                    }
                }

                .bg-advantage{
                    img{
                        top:-1.1rem;
                    }
                }
            }            
        }

        .goToClass{
            .photo{
                width:80px;
            }
        }
    }
}