.seclist {
    display: flex;
    flex-direction: column;
}
.list {
    * {
        transition: all 0.3s;
    }
    a {
        padding: 70px 15px;
        &:nth-child(1) {
            border-top: 1px solid #d8d8d8;
        }
        border-bottom: 1px solid #d8d8d8;
        width: 100%;
        display: block;
        color: #333;
        transition: all 0.3s;
        &:hover {
            .bt {
                transform: scale(1.05);
                .img {
                    .imle {
                        margin-left: 15px;
                    }
                }
            }
            .listimg {
                opacity: 0.5;
            }
        }
        &:active {
            .bt {
                transform: scale(0.95);
            }
        }
    }
    .listtitle {
        position: relative;
        display: flex;
        width: 100%;
        align-items: center;
        .nu {
            background: rgb(215, 215, 215);
            height: 60px;
            width: 60px;
            font-size: 22px;
            font-weight: 800;
            color: #fff;
            border-radius: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 0;
        }
        .bt {
            background: linear-gradient(90deg, #0e3eff, #01aaff);
            width: 90px;
            height: 90px;
            display: flex;
            flex-direction: column;
            color: #fff;
            justify-content: center;
            align-items: center;
            position: absolute;
            right: 0;
            border-radius: 100px;
            gap: 5px;
            .img {
                height: auto;
                position: relative;
                width: 15px;
                height: 15px;
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
                img {
                    width: 15px;
                    height: auto;
                }
                .imle {
                    margin-left: -15px;
                }
            }
        }
        .lt {
            width: 100%;
            margin-left: 90px;
            margin-right: 120px;
            .li01 {
                font-size: 24px;
                font-weight: 600;
            }
            .li02 {
                font-size: 34px;
                font-weight: 800;
                width: fit-content;
                background: linear-gradient(90deg, #0e3eff, #01aaff);
                color: transparent;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent; 
            }
            .li03 {
                font-size: 20px;
                margin-top: 15px;
                p {
                    font-weight: 500;
                    color: gray;
                    padding-bottom: 0;
                    margin-bottom: 0;
                }
            }
        }
    }
}
.listimg {
    height: 200px;
    position: absolute;
    right: 120px;
    z-index: -1;
    opacity: 0;
    border-radius: 20px;
    box-shadow: 0 0 100px 0 #ebebeb;
}


@media (max-width: 768px) {
    .list {
        a {
            padding: 70px 0px;
            padding-bottom: 160px;
            &:nth-child(1) {
                border-top: 1px solid #d8d8d8;
            }
            border-bottom: 1px solid #d8d8d8;
            width: 100%;
            display: block;
            color: #333;
            transition: all 0.3s;
            &:hover {
                .bt {
                    transform: scale(1.05);
                    .img {
                        .imle {
                            margin-left: 15px;
                        }
                    }
                }
                .listimg {
                    opacity: 1;
                }
            }
            &:active {
                .bt {
                    transform: scale(0.95);
                }
            }
        }
        .listtitle {
            position: relative;
            display: flex;
            flex-direction: column-reverse;
            width: 100%;
            align-items: center;
            .nu {
                background: rgb(215, 215, 215);
                height: 60px;
                width: 60px;
                font-size: 22px;
                font-weight: 800;
                color: #fff;
                border-radius: 100px;
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                top: 0;
                left: 0;
            }
            .bt {
                background: linear-gradient(90deg, #0e3eff, #01aaff);
                width: 100%;
                max-width: 300px;
                margin-left: auto;
                margin-right: auto;
                height: 50px;
                display: flex;
                flex-direction: row;
                color: #fff;
                justify-content: center;
                align-items: center;
                position: absolute;
                right: 0;
                left: 0;
                border-radius: 100px;
                gap: 5px;
                bottom: -90px;
                .img {
                    height: auto;
                    position: relative;
                    width: 15px;
                    height: 15px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    overflow: hidden;
                    img {
                        width: 15px;
                        height: auto;
                    }
                    .imle {
                        margin-left: -15px;
                    }
                }
            }
            .lt {
                width: auto;
                margin: 0;
                margin-right: auto;
                .li01 {
                    font-size: 20px;
                    font-weight: 600;
                    margin-top: 30px;
                }
                .li02 {
                    font-size: 29px;
                    font-weight: 800;
                    letter-spacing: 1.5px;
                }
                .li03 {
                    font-size: 16px;
                    margin-top: 15px;
                }
            }
        }
    }
    .listimg {
        height: auto;
        width: 100%;
        max-width: 800px;
        position: relative;
        left: auto;
        right: auto;
        margin-left: auto;
        margin-right: auto;
        z-index: -1;
        opacity: 1;
        border-radius: 20px;
        border-top-left-radius: 40px;
        box-shadow: 0 0 100px 0 #ebebeb;
    }
}

.cs {
    font-size: 25px;
    text-align: center;
    padding: 20px;
    margin-top: 20px;
    font-weight: bolder;
    color: gray;
}