html {
    background: #EFF3FF !important;
}

.ceo-authorization {
    --header-height: 62px;
    --footer-height: 546px;

    #mainWrapper {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: calc(100vh);
        overflow: hidden auto;
    }

    * {
        box-sizing: border-box;
    }

    .page {
        .main-content {
            min-height: calc(
                    100vh - var(--header-height) - var(--footer-height)
            );
        }
    }
}

.ceo-authorization-index {
    .wrapper {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 100px 20px 0;

        .ceo-product-bg {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow: hidden;
            z-index: -1;

            .bg-item-1 {
                position: absolute;
                background-image: url("https://website.weilaigpt.cn/bg-item-3.png");
                background-size: 100% 100%;
                width: 28vw;
                height: 20vw;
                left: 4.5vw;
                bottom: 4.5vw;
            }

            .bg-item-2 {
                position: absolute;
                background-image: url("https://website.weilaigpt.cn/bg-item-4.png");
                background-size: 100% 100%;
                width: 28vw;
                height: 21vw;
                top: 35vw;
                right: -1vw;
            }

            @media screen and (min-width: 768px) {
                .bg-item-1 {
                    width: 15.9vw;
                    height: 11.5vw;
                    left: 2.4vw;
                    bottom: 2.4vw;
                }

                .bg-item-2 {
                    width: 16vw;
                    height: 12vw;
                    top: 11.7vw;
                    right: 2vw;
                }
            }
        }

        .main-title {
            font-size: 36px;
            font-weight: bold;
            text-align: center;
            display: flex;
            flex-direction: column;
            color: transparent;
            background: linear-gradient(90deg, #8D5FDD 0%, #4279FF 100%);
            background-clip: text;
            line-height: 50px;

            .separate {
                display: none;
            }

            .line-break {
                display: inline;
            }
        }

        .sub-title {
            margin-top: 30px;
            font-size: 16px;
            font-weight: 600;
            color: #252432;
            line-height: 20px;
            text-align: center;
        }

        .input-content {
            margin-top: 20px;
            width: 100%;
            height: 45px;
            background-image: url("https://website.weilaigpt.cn/authorization_input_border.png");
            background-size: 100% 100%;
            position: relative;

            input {
                width: 100%;
                height: 100%;
                border: none;
                background: transparent;
                outline:none;
                padding-left: 10px;
                font-size: 16px;
            }

            &.placeholder {
                &::after {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    padding-left: 10px;
                    display: flex;
                    align-items: center;
                    content: "请输入要查询的域名";
                    font-size: 16px;
                    color: #AFAFAF;
                    z-index: -1;
                }
            }
        }

        .button-content {
            margin-top: 20px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            column-gap: 30px;
            row-gap: 30px;

            button, a {
                width: 165px;
                height: 45px;
                border-radius: 10px;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                font-size: 14px;
                font-weight: 600;
            }

            button {
                color: white;
                background: linear-gradient(90deg, #8D5FDD 0%, #4279FF 100%);
                border: none;

                &:hover {
                    opacity: 0.7;
                }
            }

            a {
                color: #4379FF;
                border: 1px solid #4379FF;

                &:hover {
                    background: rgba(255,255,255,0.5);
                }
            }
        }
    }

    @media screen and (min-width: 768px) {
        .wrapper {
            min-width: 1216px;
            width: 70%;
            padding: 240px 0 65px;

            .main-title {
                font-size: 60px;
                flex-direction: row;
                line-height: 60px;

                .separate {
                    display: inline;
                }

                .line-break {
                    display: none;
                }
            }

            .sub-title {
                margin-top: 40px;
                font-size: 18px;
                line-height: 18px;
            }

            .input-content {
                width: 776px;
                height: 60px;

                input {
                    width: 100%;
                    height: 100%;
                    padding-left: 20px;
                }

                &.placeholder {
                    &::after {
                        padding-left: 20px;
                    }
                }
            }

            .button-content {
                column-gap: 70px;

                button, a {
                    width: 211px;
                    height: 60px;
                    font-size: 16px;
                }

                button {
                    font-size: 16px;
                }
            }
        }
    }
}

.ceo-authorization-list {
    .wrapper {
        height: 100%;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 20px 40px 20px;

        .card-list {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            row-gap: 30px;
            column-gap: 30px;

            .card-list-item {
                border-radius: 10px;
                border: 2px solid #FFF;
                background: linear-gradient(180deg, #FEFEFF 0%, #F2F6FF 100%);
                padding: 20px;

                .list-question {
                    color: #4379FF;
                    text-align: center;
                    font-size: 20px;
                    font-weight: 600;
                }

                .list-answer {
                    margin-top: 16px;
                    color: #8A8A8A;
                    text-align: center;
                    font-size: 14px;
                    line-height: 28px;
                }
            }
        }
    }

    @media screen and (min-width: 768px) {
        .wrapper {
            min-width: 1216px;
            width: 70%;
            padding: 0 0 100px 0;

            .card-list {
                grid-template-columns: repeat(2, 1fr);
                row-gap: 40px;
                column-gap: 40px;

                .card-list-item {
                    padding: 34px 27px;

                    .list-question {
                        font-size: 24px;
                    }

                    .list-answer {
                        font-size: 14px;
                        line-height: 24px;
                    }
                }
            }
        }
    }
}