* {
    margin: 0;
    padding: 0
}

*, ::after, ::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
a{
    text-decoration: none;
}
body{
    font-family: -apple-system,BlinkMacSystemFont,PingFang SC,Helvetica Neue,STHeiti,Microsoft Yahei,Tahoma,Simsun,sans-serif;
    background-color: #f2f6f9;
}
ol, ul{
    padding: 0;
}

#my-toolTip{
    position: fixed;
    width: 200px;
    z-index: 999999;
    top: 50%;
    left: 50%;
    margin-left: -100px;
    margin-top: -100px;
    text-align: center;
}

.form-control:focus, .form-select:focus,select:focus,input:focus, textarea:focus {
    outline: 0;
    box-shadow: 0 0 3px #8cddff;
    -webkit-box-shadow: 0 0 5px #8cddff !important;
    border: 1px solid #80bdff !important;
}

.header{
    height: 66px;
    background: #FFF;
    box-shadow: 0 1px 5px 0 rgb(20 20 20 / 9%);
}
.header .navbar{
    background-color: #FFF;
    max-width: 1200px;
    margin: 2px auto;
}

.logo{
    width: 143px;
}

.fixed-top-r {
    height: 56px;
}
@media only screen and (min-width: 768px) {
    .fixed-top-r {
        height: 60px;
    }
}


.navbar-nav .nav-link {
    color: #c9c9c9;
    border-bottom: 1px solid #353535;
    padding: 1rem 0;
}
@media only screen and (min-width: 768px) {
    .navbar-nav .nav-link {
        color: #4b587c;
        border-bottom: 0px;
        padding: .5rem 1rem !important;
        font-weight: normal;
    }
    .navbar-nav .nav-link:hover {
        color: #0067cb;
    }
}

@media (min-width: 1400px){
    .container{
        max-width: 1200px;
    }
}


.header-search {
    background: #f2f6f9;
    height: 36px;
    border-radius: 6px;
    position: relative;
}

.header-search input {
    background: none !important;
    width: 100%;
    border: 0 !important;
    outline: none;
    padding: 0px 40px 0px 15px;
    line-height: 36px;
    font-size: 14px;
}

.header-search input:focus {
    outline: none;
}

.header-search-btn {
    border: 0 !important;
    background: none !important;
    width: 36px;
    height: 36px;
    position: absolute;
    right: 0;
}

.header-search-btn i {
    color: #989898;
}

@media only screen and (min-width: 768px) {
    .header-search {
    }
}


.elem-quote{
    background-color: #ecf9f2;
    color: #414159;
    padding: 15px;
    border-radius: 5px;
    margin: 15px 0px;
    border-left: 5px solid #27a76d;
}
.elem-quote h1{
    margin-bottom: 0px;
    font-size: 22px;
}
@media only screen and (min-width: 768px) {
    .elem-quote{
        padding: 20px;
    }
}



#banner{
    overflow: hidden;
    position: relative;
}
#banner .swiper-slide img{display: block;width: 100%;}
#banner .banner-slide {position: relative;height: 300px;background: rgb(0 0 0 / 55%);}
#banner .banner-slide .banner-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
}
#banner .banner-slide .banner-content {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2;
    padding: 0px 2rem;
}
#banner .banner-slide .banner-content .title {
    color: #FFFFFF;
    font-size: 30px;
    margin-bottom: 10px;
    text-align: center;
}
#banner .banner-slide .banner-content .desc {
    color: #a8a8a8;
    font-size: 18px;
    margin-bottom: 10px;
    text-align: center;
}
#banner .banner-slide .banner-content .btn {
    /*background-color: #FFFFFF;*/
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
    border-radius: 90px;
    font-size: 14px;
    padding: 10px 20px;
}
@media only screen and (min-width:768px) {
    #banner .banner-slide {
        height: 600px;
    }
    #banner .banner-slide .banner-content .title {
        font-size: 70px;
        margin-bottom: 15px;
    }

    #banner .banner-slide .banner-content .desc {
        font-size: 20px;
        margin-bottom: 15px;
    }

    #banner .banner-slide .banner-content .btn {
        font-size: 16px;
        padding: 15px 50px;
    }
    #banner .banner-slide .banner-content .btn:hover {
        font-size: 16px;
        background-color: #FFFFFF;
        color: #00a0e9;
        padding: 15px 50px;
    }
}


.index-project {
    padding: 30px;
}

.index-project h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-weight: 700;
    font-size: 22px;
}

.index-project .item {
    margin: 2px;
    overflow: hidden;
    background-color: #FFFFFF;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
}

.index-project img {
    display: inline-block;
    width: 70px;
    margin-bottom: 1rem;
}

.index-project .item h3 {
    font-size: 18px;
    font-weight: 600;
    color: #3a3a3f;
}

.index-project .item p {
    color: #869ab8;
}

@media only screen and (min-width: 768px) {
    .index-project {
        padding: 5rem 0;
    }

    .index-project h2 {
        margin-bottom: 3rem;
        font-size: 42px;
        font-weight: 400;
    }

    .index-project .item {
        padding: 30px;
    }

    .index-project .item h3 {
        font-size: 18px;
    }

    .index-project img {
        width: 50px;
    }
}


.index-examples {
    padding: 2rem 0;
}

.index-examples h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-weight: 700;
    font-size: 22px;
}

.index-examples .row a {
    padding: 1rem;
    background: rgba(21, 21, 21, 0.1);
    border-radius: 5px;
    display: block;
    margin-bottom: 1rem;
}

.index-examples .row img {
    display: block;
    width: 100%;
}

@media only screen and (min-width: 992px) {
    .index-examples {
        padding: 4rem 0;
    }

    .index-examples h2 {
        margin-bottom: 3rem;
        font-size: 42px;
        font-weight: 400;
    }

    .index-examples .row a {
        padding: 2rem;
        margin-bottom: 2rem;
    }
}



.index-page {
    background-color: #151515 !important;
}

.index-page h2 {
    color: #EEEEEE;
    font-weight: 700;
    font-size: 22px;
    margin: 2rem 0;
}

.index-page img {
    display: block;
    width: 100%;
}

@media only screen and (min-width: 768px) {
    .index-page h2 {
        margin: 5rem 0;
        font-size: 42px;
        font-weight: 400;
    }
}



.index-server {
    padding: 1rem 0;
}

.index-server-title {
    font-weight: 700;
    font-size: 22px;
    margin-bottom: 1rem;
    text-align: center;
}

.index-server .item {
    background: #FFFFFF;
    border: 1px solid #eee;
    padding: 2rem;
}

.index-server h3 {
    padding: 1rem;
    text-align: center;
    position: relative;
}

.index-server h3 span {
    font-size: 12px;
    margin-top: 0;
    position: absolute;
    font-weight: normal;
}

.index-server-info {
    text-align: center;
    border-top: 1px solid #eceaea;
    border-bottom: 1px dashed #eceaea;
    padding: 2rem 0;
}

.index-server-info p {
    margin-bottom: 0;
    color: #5f5f5f;
    font-size: 15px;
}

.index-server .youhui {
    text-align: center;
    padding-top: 1rem;
}

.index-server .youhui .count {
    display: inline-block;
    border: 1px solid #ff8a00;
    padding: 0 24px;
    font-size: 12px;
    color: #ff8a00;
    overflow: hidden;
    transform: skew(-30deg);
    text-align: center;
    margin-bottom: 0;
}

.index-server .youhui .count span {
    display: inline-block;
    transform: skew(30deg);
}

.index-server .goumai {
    text-align: center;
}

.index-server .goumai .price {
    display: inline-block;
    text-align: center;
    line-height: 50px;
    font-size: 18px;
    color: #ff8a00;
    position: relative;
}

.index-server .goumai .price em {
    font-style: normal;
    position: absolute;
    left: -14px;
    top: -5px;
    font-size: 18px;
    color: #ff8a00;
}

.index-server .goumai .price span {
    font-size: 36px;
    color: #ff8a00;
    font-family: '黑体';
}

@media only screen and (min-width: 768px) {
    .index-server {
        padding-top: 7rem;
    }

    .index-server-title {
        margin-bottom: 2rem;
        font-size: 42px;
        font-weight: 400;
    }

    .index-server .item {
        padding: 2rem;
    }
}



.index-news {
    padding: 1rem 0;
    background: #FFFFFF;
}

.index-news-title {
    font-weight: 700;
    font-size: 22px;
    margin-bottom: 1rem;
    text-align: center;
}

.index-news-li a {
    display: block;
    border-bottom: 1px solid #f4f4f4;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.index-news-li h5 {
    display: block;
    color: #5c7482;
    font-size: 1rem;
    margin-bottom: 0.2rem;
}

.index-news-li .info .category {
    display: inline-block;
    color: #0084ff;
    border-radius: 5px;
    background: rgba(0, 132, 255, .1);
    margin-right: 5px;
    font-size: 12px;
    padding: 0.1rem 0.3rem;
}

.index-news-li .info .time {
    color: #c6c6c6;
    font-size: 13px;
}

@media only screen and (min-width: 768px) {
    .index-news {
        padding: 3rem 0;
    }

    .index-news-title {
        margin-bottom: 2rem;
        font-size: 42px;
        font-weight: 400;
    }

    .index-news-li h5 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-bottom: 0.3rem;
    }

    .index-news-li .info .category {
        font-size: 0.8rem;
        padding: 0.1rem 0.3rem;
    }

    .index-news-li .info .time {
        color: #c6c6c6;
        font-size: 0.9rem;
    }

}


.index-form {
    /*background-color: #0131b8;*/
    background-image: url('../images/index-form-bg.png');
    background-position: 50%;
    background-size: cover;
    /*background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%) !important;*/
    padding: 50px 10px;
    text-align: center;
}

.index-form h2 {
    margin-bottom: 1.2rem;
    font-weight: 700;
    font-size: 22px;
    color: #000000;
}

.index-form-libao {
    max-width: 1200px;
    margin: 1rem auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.index-form-libao .libao-li {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 48%;
    margin: 1%;
    padding: 20px 10px 10px 10px;;
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
    background: -webkit-linear-gradient(top,hsla(0,0%,100%,.3),hsla(0,0%,100%,.5) 94.12%);
    background: -moz-linear-gradient(top,hsla(0,0%,100%,.3) 0,hsla(0,0%,100%,.5) 94.12%);
    background: linear-gradient(180deg,hsla(0,0%,100%,.3),hsla(0,0%,100%,.5) 94.12%);
    border-radius: 16px;
    box-shadow: inset 0 4px 20px hsl(0deg 0% 100% / 60%);
    /*background-image: linear-gradient(93deg, rgb(108, 94, 255) 4%, rgb(168, 36, 245) 100%);*/
}

.index-form-libao .libao-li .bi {
    width: 35px;
    height: 35px;
    color: #3266d6;
    margin-bottom: 5px;
}

.index-form-libao .libao-li .title {
    color: #121314;
    display: inline-block;
    font-weight: bold;
    font-size: 16px;
    /*background-image: linear-gradient(93deg, rgb(108, 94, 255) 4%, rgb(168, 36, 245) 100%);*/
    /*-webkit-background-clip: text;*/
    /*color: transparent;*/
}

.index-form-libao .libao-li .desc {
    font-size: 12px;
    color: #909299;
}

.index-form form {
    position: relative;
    max-width: 550px;
    margin: 0 auto;
    box-sizing: border-box;
}

.index-form form input:focus {
    outline: 0;
}

.index-form .newsletter-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 80px 10px 20px;
    height: 50px;
    border-radius: 50px;
    border: 1px solid #ccc;
    font-size: 16px;
}

.index-form .newsletter-button {
    border-radius: 2em;
    display: inline-block;
    color: #fff;
    background-color: #007bff;
    transition: all 0.15s ease;
    box-sizing: border-box;
    border: 1px solid #007bff;
    font-size: 1.05em;
    letter-spacing: 0.1em;
    min-width: 8em;
    text-align: center;
    position: absolute;
    padding: 4px 20px;
    margin: 0;
    height: calc(100% - 8px);
    right: 4px;
    top: 4px;
    cursor: pointer;
}

@media only screen and (min-width: 768px) {
    .index-form {
        padding: 5rem;
    }

    .index-form h2 {
        margin-bottom: 2rem;
        font-size: 42px;
        font-weight: 400;
    }

    .index-form-libao .libao-li {
        width: 23%;
        padding: 40px 20px 20px 20px;
    }
    .index-form-libao .libao-li .bi {
        width: 60px;
        height: 60px;
        margin-bottom: 15px;
    }
    .index-form-libao .libao-li .title {
        font-size: 20px;
    }
    .index-form-libao .libao-li .desc {
        font-size: 16px;
    }
}



.news {
    padding: 0px;
}

.news-list {
    background: #FFF;
    padding-top: 15px;
}
.news-item{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid #f2f6f9;
}
.news-item-thumb{
    width: 100px;
    border-radius: 6px;
    overflow: hidden;
    margin-right: 10px;
}
.news-item-thumb img{
    display: block;
    width: 100%;
}
.news-item-body{
    flex: 1;
}
.news-item-body h4{
    line-height:1;
}
.news-item-body h4 a{
    font-size: 1rem;
    color: #21293c;
    line-height:1;
}
.news-item-meta a{
    background:var(--bs-info-bg-subtle);
    font-size: 12px;
    padding: 0.1rem 0.2rem;
    border-radius: 2px;
}
.news-item-meta span{
    color: #8590a6;
    font-size: 12px;
}
.news-item-desc{
    display: none;
    color: #4b587c;
}
@media only screen and (min-width: 768px) {
    .news {
        padding: 15px 0px;
    }

    .news-list {
        border-radius: 6px;
        padding: 15px 30px;
        box-shadow: 0 1px 3px rgba(27, 95, 160, .1);
    }
    .news-item{
        padding: 16px 0;
    }
    .news-item-thumb{
        width: 150px;
        margin-right: 15px;
    }
    .news-item-body h4{

    }
    .news-item-body h4 a{
        font-weight: 600;
        font-size: 20px;
    }
    .news-item-body h4 a:hover{
        color: #06c;
    }
    .news-item-desc{
        display: block;
        font-weight: 400;
        font-size: 15px;
        margin-top: 5px;
        word-break: break-all;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #4b587c;
    }
}


.pagination {
    padding: 20px;
    text-align: center;
    display: block;
}

.pagination li {
    display: inline-block;
}

.pagination li span,
.pagination li a {
    display: block;
    padding: 5px 10px;
    margin: 2px;
    background: #FFFFFF;
    color: #303133;
    border-radius: 8px;
    border: 1px solid #EDEFF2;
}

.pagination .active span {
    background: #0152D9;
    color: #fff;
}

.detail {
    padding: 0px;
}

.article {
    background: #FFFFFF;
    padding-top: 15px;
}

.article h1 {
    font-size: 1.6rem;
    margin-bottom: 18px;
}

.article .article-info {
    font-size: 0.9rem;
    margin-bottom: 15px;
    color: #B3B3B3;
}

.article .article-info .copyright {
    color: #B3B3B3;
    margin-left: 5px;
}

.article .description {
    padding: 15px;
    font-size: 0.95rem;
    color: #333;
    margin: 0 0 15px 0;
    background-color: #f6f6f6;
}

.article .keywords {
    margin-bottom: 20px;
    padding: 16px 0;
}

.article .keywords a {
    display: inline-block;
    color: #606266;
    border-radius: 5px;
    background: #F5F7FA;
    margin-bottom: 5px;
    margin-right: 5px;
    font-size: 14px;
    padding: 8px 15px;
}
.article .keywords a:hover {
    background: #E6F3FF;
    color: #0052D9;
}

.article .copyright-info {
    font-size: 0.8rem;
    color: #ababab;
    margin-bottom: 2rem;
}

.article .content {
    overflow: hidden;
}

.article .content blockquote {
    margin: 14px 0px;
    padding: .5rem .5rem .5rem 1rem;
    border-radius: 3px;
    border-left: 3px solid rgb(0 102 255);
    background: #f3f3f3;
}

.article .content blockquote p {
    margin-bottom: 0;
}

.article .content p {
    color: #2a2a2a;
    margin-bottom: 0.5rem;
    line-height: 1.8;
    word-break: break-word;
}

.article .content h1 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.article .content h2 {
    margin-top: 1.8rem;
    margin-bottom: 1rem;
}

.article .content h3 {
    margin-top: 1.6rem;
    margin-bottom: 1rem;
}

.article .content h4 {
    margin-top: 1.4rem;
    margin-bottom: 1rem;
}

.article .content h5 {
    margin-top: 1.2rem;
    margin-bottom: .8rem;
}

.article .content h6 {
    margin-top: 1rem;
    margin-bottom: .6rem;
}

.article .content img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.article .content pre {
    background: #50556B;
    padding: 1rem;
    color: #ccc;
    border-radius: 3px;
}

.article .content table {
    max-width: 100%;
    border: 1px solid #dbdbdb;
}

.article .content table th {
    border: 1px solid #e6e6e6 !important;
    padding: 5px 8px !important;
}

.article .content table td {
    border: 1px solid #e6e6e6 !important;
    padding: 5px 8px !important;
}
.article .content ol, .article .content ul{
    padding-left: 2rem;
}

@media only screen and (min-width: 768px) {
    .detail {
        padding: 15px 0px;
    }

    .article {
        border-radius: 4px;
        padding: 30px;
        box-shadow: 0 1px 3px rgba(27, 95, 160, .1);
    }

    .article h1 {
        margin-bottom: 18px;
        font-weight: 600;
        font-size: 24px;
        color: #21293c;
    }

    .article .article-info {
        margin-bottom: 1rem;
        color: #B3B3B3;
    }

    .article .description {
        padding: 20px 30px;
        font-size: 1rem;
        color: #333;
        margin: 0 0 40px 0;
        background-color: #f6f6f6;
    }

    .article .keywords {
        margin-bottom: 20px;
    }

    .article .content {
    }

    .article .content blockquote {
    }
}


.sidebar .top {
    background: #FFF;
    padding: 15px;
    margin-top: 15px;
}

.sidebar .top .top-title {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 15px;
}

.sidebar .top li {
    list-style: none;
    padding: 10px 0;
    border-top: #F2F2F2 solid 1px;
}

.sidebar .top li a {
    display: block;
    color: #21293c;
    margin-bottom: 0.1rem;
    font-weight: 600;
    font-size: 15px;
}

.sidebar .top li span {
    display: inline-block;
    margin-right: 5px;
    font-size: 0.8rem;
    color: #757575;
}

@media only screen and (min-width: 768px) {
    .sidebar .top {
        border-radius: 6px;
        margin-top: 0px;
        box-shadow: 0 1px 3px rgba(27, 95, 160, .1);
    }
}


.tags {
    padding: 15px;
}

.tags-list ul {
}

.tags-list ul li {
    width: 100%;
    list-style: none;
    padding: 8px 5px;
}

.tags-list ul li a {
    display: block;
    padding: 0px 10px;
    line-height: 50px;
    border: 1px solid #e6e6e6;
    background-color: #FFFFFF;
    border-radius: 2px;
    color: #000000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
}

.tags-list ul li a span {
    color: #999;
    font-size: 12px;
    float: right;
}

@media only screen and (min-width: 768px) {
    .tags {
    }

    .tags-list {
        margin: 0 auto;
        width: 1140px;
    }

    .tags-list h2 {
        font-size: 1.2rem;
        line-height: 50px;
    }

    .tags-list ul {
        display: flex;
        flex-wrap: wrap;
    }

    .tags-list ul li {
        width: 20%;
    }

    .tags-list ul li a {
        font-weight: 400;
        font-size: 16px;
        padding: 0px 15px;
    }

    .tags-list ul li a:hover {
        border: 1px solid #C5002B;
        color: #C5002B;
    }
}



.city_data {
    padding: 50px 0px;
    background: #FFFFFF;
}

.city_data .hot li {
    display: inline-block;
    padding-right: 5px;
    margin-bottom: 10px;
}

.city_data .hot li.hot-title {
    padding: 0px;
}

.city_data .hot li a {
    color: #000000;
    font-weight: bold;
}

.city_data .list ul {
    padding: 10px 0;
    overflow: hidden;
    border-bottom: 1px dashed #ddd;
    margin-bottom: 0;
}

.city_data .list li {
    display: inline-block;
    padding-right: 5px;
    margin-bottom: 5px;
}

.city_data .list li a {
    color: #5a5a5a;
}

.city_data .list li.province {
    display: block;
    padding: 0px;
    width: 60px;
}

.city_data .list li.province a {
    color: #1CA7FF;
    font-weight: bold;
}

@media only screen and (min-width: 768px) {
    .city_data .hot li {
        margin-right: 10px;
    }

    .city_data .list ul {
        padding: 15px 0;
    }

    .city_data .list li {
        margin-bottom: 0
    }

    .city_data .list li.province {
        display: inline-block;
    }
}




/*pages*/
.pages-web-title {
    font-size: 30px;
    margin-bottom: 20px;
}

@media (min-width: 768px) {
    .pages-web-title {
        font-size: 48px;
        margin-bottom: 32px;
        font-weight: 600;
    }
}

.pages-web-banner {
    background: #eaf4fe;
}

.pages-web-banner .container {
    overflow: hidden;
}

.pages-web-banner .jumbotron {
    background: #eaf4fe url(../images/banner-img.png) no-repeat right bottom;
    background-size: 150px;
    padding: 3rem 0.5rem;
}

.pages-web-banner .jumbotron h1 {
    font-size: 2rem;
    font-weight: bold;
}

.pages-web-banner .jumbotron .lead {
    font-size: 18px;
    color: #f90000;
}

.pages-web-banner .jumbotron .desc {
    color: #869ab8;
}

.pages-web-banner .jumbotron .jumbotron-btn {
    display: inline-block;
    background: #000000;
    color: #FFFFFF;
    padding: 0 20px;
    font-size: 12px;
    line-height: 34px;
    border-radius: 90px;
}

@media (min-width: 768px) {
    .pages-web-banner .jumbotron {
        background: url(../images/banner-img.png) no-repeat right center;
        background-size: 300px;
        padding: 5rem 0;
    }

    .pages-web-banner .jumbotron h1 {
        font-size: 3.5rem;
    }

    .pages-web-banner .jumbotron .lead {
        font-weight: bold;
        font-size: 25px;
    }

    .pages-web-banner .jumbotron .desc {
        max-width: 700px;
    }

    .pages-web-banner .jumbotron .jumbotron-btn {
        padding: 0 32px;
        font-size: 16px;
        line-height: 46px;
    }
}


.pages-web-why {
    padding: 3rem 0.5rem;
    background: #FFFFFF;
}

.pages-web-why .container {
    background: url(../images/left_man.png) no-repeat right bottom;
    background-size: 150px;
}

.pages-web-why-content li {
    display: flex;
    align-items: baseline;
    margin-bottom: 10px;
}

.pages-web-why-content .bi {
    color: #21c87a;
    font-size: 20px;
    margin-right: 5px;
}

@media (min-width: 768px) {
    .pages-web-why {
        padding: 6rem 0;
    }

    .pages-web-why .container {
        background: url(../images/left_man.png) no-repeat right center;
        background-size: 300px;
    }

    .pages-web-why-content li {
        font-size: 20px;
    }
}

.pages-web-case {
    padding: 3rem 0.5rem;
    background: #F3F3F3;
}

.pages-web-case-content ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.pages-web-case-content li {
    width: 32%;
    overflow: hidden;
    background: #000000;
    cursor: pointer;
    margin-bottom: 20px;
}

.pages-web-case-content li img {
    width: 100%;
}

@media (min-width: 768px) {
    .pages-web-case {
        padding: 6rem 0;
    }

    .pages-web-case-content li {
        border-radius: 20px;
    }

    .pages-web-case-content li img {
        opacity: .7;
    }

    .pages-web-case-content li:hover img {
        opacity: 1;
        -webkit-transition: all .25s linear .01s;
        transition: all .25s linear .01s
    }
}

.pages-web-choose {
    background: #f8f8f8;
    padding: 3rem 0.5rem;
}

.pages-web-choose-content ul {
    display: flex;
    flex-direction: column;
}

.pages-web-choose-content li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #FFFFFF;
    border-radius: 20px;
    margin-bottom: 20px;
}

.pages-web-choose-content li .bi {
    font-size: 30px;
    margin-right: 15px;
    color: #21c87a;
}

.pages-web-choose-content li .title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
}

.pages-web-choose-content li .desc {
    font-size: 14px;
    color: #869ab8;
}

@media (min-width: 768px) {
    .pages-web-choose {
        padding: 6rem 0rem;
    }

    .pages-web-choose-content ul {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .pages-web-choose-content li {
        width: 32%;
    }

    .pages-web-choose-content li .bi {
        color: #e0e0e0;
    }

    .pages-web-choose-content li:hover .bi {
        color: #21c87a;
    }

    .pages-web-choose-content li .title {
        font-size: 22px;
    }

    .pages-web-choose-content li .desc {
        font-size: 15px;
    }
}

.pages-web-flow {
    background: #FFFFFF;
    padding: 3rem 0.5rem;
}

.pages-web-flow-content ul {
    display: flex;
    flex-direction: column;
}

.pages-web-flow-content li {
    display: flex;
    flex-direction: column;
}

.pages-web-flow-content li .bi {
    font-size: 30px;
    color: #21c87a;
    margin-bottom: 10px;
}

.pages-web-flow-content li .title {
    color: #000000;
    font-size: 16px;
    font-weight: 600;
}

.pages-web-flow-content li .desc {
    color: #869ab8;
    font-size: 14px;
}

@media (min-width: 768px) {
    .pages-web-flow {
        padding: 6rem 0rem;
    }

    .pages-web-flow-content ul {
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    .pages-web-flow-content li {
        flex-direction: row;
        align-items: center;
    }

    .pages-web-flow-content li .bi {
        margin: 0 25px;
        transform: rotate(270deg);
        -ms-transform: rotate(270deg); /* Internet Explorer */
        -moz-transform: rotate(270deg); /* Firefox */
        -webkit-transform: rotate(270deg); /* Safari 和 Chrome */
        -o-transform: rotate(270deg); /* Opera */
    }

    .pages-web-flow-content li .title {
        font-size: 22px;
    }

    .pages-web-flow-content li .desc {
        min-height: 72px;
        font-size: 15px;
    }
}

.pages-web-service {
    background: #F3F3F3;
    padding: 3rem 0.5rem;
}

.pages-web-service-content ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: column;
}

.pages-web-service-content li {
    display: flex;
    flex-direction: row;
    justify-items: center;
    align-items: center;
    padding: 20px;
    border-radius: 20px;
    background: #FFFFFF;
    margin-bottom: 20px;
}

.pages-web-service-content li .bi {
    margin-right: 1rem;
}

.pages-web-service-content li span {
    font-size: 16px;
}

@media (min-width: 768px) {
    .pages-web-service {
        padding: 6rem 0rem;
    }

    .pages-web-service-content ul {
        flex-direction: row;
    }

    .pages-web-service-content li {
        flex-direction: column;
        width: 30%;
    }

    .pages-web-service-content li .bi {
        font-size: 40px;
        margin-bottom: 10px;
    }
}


.message {
    width: 100%;
    background: url(../images/contact_bk_vtpd.jpg) no-repeat center center;
    background-size: cover;
    overflow: hidden;
}
.message .container {
    margin: 10px auto;
    padding: 15px;
}
.message .container h1{
    margin-bottom: 1rem;
    font-size: 1.5rem;
}
.message .container .btn{
    width: 100%;
}
@media only screen and (min-width: 768px) {
    .message {
    }

    .message .container {
        width: 600px;
        margin: 50px auto;
    }
    .message .container h1{
        margin-bottom: 2rem;
        font-size: 2rem;
    }
}

.csstheme{
    padding: 15px;
}
.csstheme-search{
    margin-bottom: 15px;
}
.csstheme-search form{
    display: flex;
    flex-direction: column;
    padding: 0.75rem;
}
.csstheme-search-item{
    display: flex;
    flex-direction: row;
    align-items: center;

    margin-bottom: 15px;
}
.csstheme-search-item label{
    flex:none;
    width: 90px;
}
@media only screen and (min-width: 768px) {
    .csstheme-search form{
        flex-direction: row;
        padding: 0.75rem;
    }
    .csstheme-search-item{
        margin-right: 15px;
        margin-bottom: 0px;
    }
    .csstheme-search-item label{
        width: auto;
    }
}



.csstheme-list{
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    justify-content: space-between;
}
.csstheme-list li{
    width: 48%;
    margin-bottom: 4%;
    background-color:#FFFFFF;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #e9e9e9;
}
.csstheme-list li a{
    display: block;
    color: #000000;
}
.csstheme-list li img{
    width: 100%;
    margin-bottom: 8px;
}
.csstheme-list li a .title{
    margin-bottom: 8px;
    line-height: 1.2;
    font-size: .9rem;
    padding: 0px 10px;
}
.csstheme-list li a .meta{
    display: flex;
    align-items: center;
    padding: 0px 10px;
    margin-bottom: 8px;
}
.csstheme-list li a .meta span{
    margin-right: 10px;
    background: #e9e9e9;
    border-radius: 4px;
    font-size: 12px;
    padding: 2px 5px;
}
.csstheme-list li a .meta span.category{
    background: var(--bs-info-bg-subtle);
}
.csstheme-list li a .meta span.lang{
    background: var(--bs-light-border-subtle);
}

@media only screen and (min-width: 768px) {
    .csstheme-list li {
        width: 24%;
        margin-bottom: 1.5%;
    }
    .csstheme-list li img{
        margin-bottom: 10px;
    }
    .csstheme-list li a .title{
        margin-bottom: 10px;
        font-size: 1rem;
    }
    .csstheme-list li a .meta span{
        font-size: 14px;
        padding: 2px 5px;
    }
}



.footer {
    background: #1a2535;
    padding: 1.5rem 0rem;
}
.footer a{
    text-decoration: none;
}

.footer .kefu-tel {
    display: inline-block;
    font-size: 14px;
    color: #FFFFFF;
    padding: 6px 15px;
    margin: 15px 0px;
    background: #00a0ff;
}

.footer .icp {
    text-align: left;
}

.footer .icp h3 {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 1.5rem;
}

.footer .icp p {
    color: #949498;
    font-size: 14px;
    margin-bottom: 5px;
    /*display: inline-block;*/
}

.footer .icp p a {
    color: #949498;
    font-size: 14px;
}

.footer .partner{
    text-align: center;
    padding: 15px;
}
.footer .partner img {
    display: inline-block;
    width: 100px;
}
.footer .citylist__span {
    color: #949498;
    font-size: 16px;
    margin-right: 10px;
}

.footer .citylist__a {
    display: inline-block;
    color: #949498;
    font-size: 16px;
    padding: 2px 15px 2px 0;
    position: relative;
}

.footer .citylist__a::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 5px;
    height: 13px;
    border-right: 1px solid #38383f;
}

.footer .citylist__more {
    color: #949498;
    font-size: 16px;
}

@media only screen and (min-width: 768px) {
    .footer {
        padding: 3rem;
    }

    .footer .container{
        max-width: 1140px;
    }

    .footer .icp {
        text-align: center;
    }

    .footer .kefu-tel {
        background: none;
        margin: 0px;
        padding: 0px;
        border: 0px;
        font-size: 0.95rem;
    }

    .footer .icp p {
        font-size: 16px;
    }

    .footer .icp p a {
        font-size: 16px;
    }
}