﻿.tab-container {
    width: 100%;
}

.tab-container {
    background: rgba(255,255,255,0.05);
    box-shadow: inset 0px -1px 0px 0px rgba(255,255,255,0.1);
    backdrop-filter: blur(13px);
    color: #FFFFFF;
}

    .tab-container .nav .nav-item .nav-link {
        color: rgba(255,255,255,0.65);
    }

        .tab-container .nav .nav-item .nav-link.active {
            color: rgba(255,255,255,1);
            border-bottom: 3px solid rgba(255, 255, 255, 1);
        }

    .tab-container .auth .btn-outline-primary {
        border-color: rgba(255, 255, 255, 1);
        color: rgba(255, 255, 255, 1);
    }

        .tab-container .auth .btn-outline-primary:hover {
            border-color: rgba(255, 255, 255, 1);
            background-color: rgba(255, 255, 255, 1);
            color: rgba(15, 102, 224, 1);
        }

    /*.tab-container .auth .btn-primary {
        border-color: rgba(255, 255, 255, 1);
        background-color: rgba(255, 255, 255, 1);
        color: rgba(15, 102, 224, 1);
    }*/

    .tab-container.scrolled {
        /*background: rgba(255, 255, 255, 1);
        backdrop-filter: unset;
        color: #132842;*/
        background: #0C4EFF;
        backdrop-filter: unset;
        color: #FFFFFF;
    }

.nav-placeholder {
    margin-top: 0px;
}

       /* .tab-container.scrolled .nav .nav-item .nav-link {
            color: #132842;
        }

            .tab-container.scrolled .nav .nav-item .nav-link.active {
                color: #0968F5;
                border-bottom: 3px solid #0968F5;
            }*/

        /*.tab-container.scrolled .auth .btn-outline-primary {
            color: #007bff;
            border-color: #007bff;
        }

            .tab-container.scrolled .auth .btn-outline-primary:hover {
                color: #fff;
                background-color: #007bff;
                border-color: #007bff;
            }

        .tab-container.scrolled .auth .btn-primary {
            color: #fff;
            background-color: #007bff;
            border-color: #007bff;
        }*/

#myCarousel .registerDiv {
    display: none;
}

#myCarousel .carousel-inner .carousel-item div.showdatabox {
    gap: 4rem;
}

    #myCarousel .carousel-inner .carousel-item div.showdatabox p {
        font-size: 0.87em;
    }


#platformConnection {
    z-index: 1;
}

    #platformConnection > div {
        box-shadow: 0px 19px 30px 0px rgba(153,154,158,0.06);
        border-radius: 8px;
    }

    #platformConnection .row {
        gap: 1rem;
    }



    #platformConnection .col-6 {
        -ms-flex: 0 0 calc(50% - 0.5rem);
        flex: 0 0 calc(50% - 0.5rem);
        max-width: calc(50% - 0.5rem);
    }

@media (min-width: 992px) {
    #platformConnection .col-lg-4 {
        -ms-flex: 0 0 calc(33.333333% - 1rem);
        flex: 0 0 calc(33.333333% - 1rem);
        max-width: calc(33.333333% - 1rem);
    }
}

@media (min-width: 1200px) {
    #platformConnection .col-xl-2 {
        -ms-flex: 0 0 12.666667%;
        flex: 0 0 12.666667%;
        max-width: 12.666667%;
    }
}

/*        #platformConnection .row a {
            padding: 0rem 1rem;
        }*/

#cardGroup {
    /*gap: 3rem;*/
}

    #cardGroup > div > div {
        background: #FFFFFF;
        border-radius: 8px;
        min-height: 265px;
        height: 96%;
    }

    #cardGroup img {
        min-width: 57px;
    }

.btn-big-primary {
    background: linear-gradient( 137deg, #0566F5 0%, #4590FE 100%);
    border-radius: 8px;
    padding: .8rem 2rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: .3rem;
    color: rgba(255, 255, 255, 1);
}

.advantage ul {
    list-style: none;
    gap: 2.5rem;
    padding-left: 5rem;
    margin-top: 3.5rem;
}

.advantage .card-img {
    width: 70rem;
}

.advantage-other h3 {
    color: #64728D;
    text-align: center;
    height: 8%;
    line-height: 1.75;
}

.advantage-other ul li {
    color: #64728D;
}

.advantage-option ul {
    margin-top: 6.5rem;
    padding: 0;
}

.advantage-shelf h3 {
    color: #FCFDFE;
    text-align: center;
    height: 8%;
    line-height: 1.75;
}

#infoTab {
    gap: 3rem;
}

    #infoTab .nav-link {
        border-radius: 8px;
        border: 1px solid #C2C8D3;
        color: rgba(100, 114, 141, 1);
    }

        #infoTab .nav-link.active {
            background: linear-gradient( 137deg, #0566F5 0%, #4590FE 100%);
            color: rgba(255, 255, 255, 1);
        }

#myInfoTabContent .flex-column > * {
    height: 32%;
}

#myInfoTabContent .card .card-body {
    overflow: hidden;
}

#myInfoTabContent .card .card-title {
    display: -webkit-box; /* 需要配合 WebKit 内核支持 */
    -webkit-box-orient: vertical; /* 垂直布局 */
    -webkit-line-clamp: 2; /* 限制为两行 */
    overflow: hidden; /* 隐藏溢出的内容 */
}

#myInfoTabContent .card .card-text {
    color: rgba(100, 114, 141, 1) !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

#myInfoTabContent a {
    text-decoration: none;
    color: rgba(19, 40, 66, 1);
}

    #myInfoTabContent a .card:hover {
        color: rgba(9, 104, 245, 1);
        border-bottom: 3px solid rgba(9, 104, 245, 1);
    }

@media (min-width: 1900px) {
    .d-xxl-none {
        display: none !important
    }

    .d-xxl-inline {
        display: inline !important
    }

    .d-xxl-inline-block {
        display: inline-block !important
    }

    .d-xxl-block {
        display: block !important
    }

    .d-xxl-table {
        display: table !important
    }

    .d-xxl-table-row {
        display: table-row !important
    }

    .d-xxl-table-cell {
        display: table-cell !important
    }

    .d-xxl-flex {
        display: -ms-flexbox !important;
        display: flex !important
    }

    .d-xxl-inline-flex {
        display: -ms-inline-flexbox !important;
        display: inline-flex !important
    }
}

@media (min-width: 1080px) {
    #myCarousel .carousel-item-2 .registerDiv {
        display: block;
    }
}

@media (min-width: 1205px) {
    #myCarousel .carousel-item-3 .showdatabox {
        display: flex !important;
    }
    #myCarousel .carousel-item-1 .showdatabox {
        display: block !important;
    }
}

@media (min-width: 1430px) {
    #myCarousel .carousel-item-1 .registerDiv {
        display: block;
    }
}

@media (min-width: 1560px) {
    #myCarousel .carousel-item-3 .registerDiv {
        display: block;
    }
}

@media (min-width: 1560px) {
    #platformConnection {
        position: relative !important;
        top: -2rem;
        margin-top: 0px !important;
        margin-bottom: 0px !important;
    }

    #myCarousel .carousel-indicators {
        bottom: 5%;
    }
}

@media (min-width: 1640px) {
    #platformConnection {
        position: relative !important;
        top: -3.5rem;
        margin-top: 0px !important;
        margin-bottom: 0px !important;
    }

    #myCarousel .carousel-indicators {
        bottom: 10%;
    }
}

@media (min-width: 1770px) {
    #platformConnection {
        position: relative !important;
        top: -6rem;
        margin-top: 0px !important;
        margin-bottom: 0px !important;
    }

    #myCarousel .carousel-indicators {
        bottom: 15%;
    }
}