* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    overflow-x: hidden;
}
ul li {
    text-decoration: none;
}

.d-flex-center {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

[v-cloak] {
    display: none;
}

.pl-18vw {
    padding-left: 18%;
}

.pr-18vw {
    padding-right: 18%;
}

.carouselItem {
    width: 100%;
    max-height: 600px;
    position: relative;
}

.c_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

dl, ol, ul {
    margin-bottom: 0 !important;
}

.carouseMask {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
}

.mask1 {
    right: 20%;
}

.mask2 {
    left: 20%;
}

.c_title {
    font-size: 36px;
    font-weight: 700;
    color: #333333;
}

.c_s_title {
    opacity: 0.6;
    font-size: 18px;
    text-align: right;
    color: #333333;
}

button.diybtn {
    outline: none;
}

button.diybtn:hover {
    opacity: .8;
}

.diyBtn1 {
    width: 124px;
    height: 40px;
    background: linear-gradient(180deg, #065fd5, #4897ff);
    border-radius: 20px;
    font-size: 18px;
    color: #fff;
    border: none;
}

.diyBtn1.btn2 {
    color: #065FD5;
    background: #fff;
}

.diyBtn2.btn3 {
    border-color: #fff !important;
    color: #fff;
}

.diyBtn2 {
    width: 124px;
    height: 40px;
    background: rgba(255, 255, 255, 0.00);
    border: 1px solid #4bc9d2;
    border-radius: 20px;
    font-size: 18px;
    color: #4BC9D2;
}

.superiority {
    height: auto;
    background: rgb(248, 248, 248);
}

.contentBg {
    background-image: url(../images/section2_1.png);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    width: 90%;
    min-height: 528px;
    height: auto;
    margin: 0 auto;
    padding-top: 123px;
}

.section_title {
    position: absolute;
    top: 0;
    left: calc(50% - 500px);
    max-width: 1000px;
    height: 129px;
    background-image: url(../images/section2_2.png);
}

.st_text {
    height: 49px;
    width: 190px;
    background-image: url(../images/text-bg.png);
    line-height: 49px;
    text-align: center;
    font-size: 32px;
    color: #333333;
}

.contentBox {
    max-width: 1200px;
    background-color: #fff;
    margin: 0 auto;
}

.superItem:hover {
    border-radius: 4px;
    box-shadow: 0px 3px 6px 0px rgba(6, 95, 213, 0.40);
    border-bottom: 4px solid #065fd5;
}

.superItem:hover .superTitle {
    opacity: 1;
}

.superItem:hover .superText {
    opacity: .8;
}

.superItem {
    height: 400px;
    cursor: pointer;
    transition: all .3s linear;
    border-bottom: 4px solid transparent;
}

.superItemBox {
    height: 65%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.superTitle {
    font-size: 24px;
    color: #333;
    opacity: .6;
}

.superText {
    font-size: 14px;
    opacity: .5;
    color: #333333;
}

.superItems {
    width: 114px;
    height: 52px;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.superItem1:hover .itemImg1 {
    background-image: url(../images/s3_1.png);
}

.superItems.itemImg1 {
    transition: all .3s linear;
    background-image: url(../images/s3_1gray.png);
}

.superItem2:hover .itemImg2 {
    background-image: url(../images/s3_2.png);
}

.superItems.itemImg2 {
    transition: all .3s linear;
    background-image: url(../images/s3_2gray.png);
}

.superItem3:hover .itemImg3 {
    background-image: url(../images/s3_3.png);
}

.superItems.itemImg3 {
    transition: all .3s linear;
    background-image: url(../images/s3_3gray.png);
}

.superItem4:hover .itemImg4 {
    background-image: url(../images/s3_4.png);
}

.superItems.itemImg4 {
    transition: all .3s linear;
    background-image: url(../images/s3_4gray.png);
}

.superItem5:hover .itemImg5 {
    background-image: url(../images/s3_5.png);
}

.superItems.itemImg5 {
    transition: all .3s linear;
    background-image: url(../images/s3_5gray.png);
}

.superItem6:hover .itemImg6 {
    background-image: url(../images/s3_6.png);
}

.superItems.itemImg6 {
    transition: all .3s linear;
    background-image: url(../images/s3_6gray.png);
}

/* 痛点分析 */

.bigCircle {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    position: relative;
}

.smallCircle {
    width: 266px;
    height: 266px;
    border-radius: 50%;
    position: relative;
}

.centerCircle {
    width: 134px;
    height: 134px;
    background: #ff6d8a;
    border-radius: 50%;
}

.userIcon {
    width: 56px;
    height: 64px;
}

.pain {
    position: absolute;
    height: 32px;
    background: rgba(255, 109, 138, .1);
    color: rgba(51, 51, 51, .8);
    font-size: 16px;
    border-radius: 16px;
    z-index: 10;
}

.pain1 {
    top: -16px;
    left: 30px;
}

.pain7 {
    bottom: 0;
    left: -44px;
}

.pain2 {
    right: -61px;
    top: 30px;
}

.pain3 {
    left: -77px;
    top: 74px;
}

.pain4 {
    bottom: 140px;
    left: -46px;
}

.pain5 {
    right: -70px;
    top: 122px;
}

.pain6 {
    right: -70px;
    bottom: 75px;
}

.painItem {
    width: 32px;
    height: 32px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0px 3px 6px 0px rgba(6, 95, 213, 0.20);
    color: #FF6D8A;
    font-size: 16px;
    text-align: center;
    line-height: 32px;
}

.areaPain {
    border-radius: 4px;
    background: rgba(6, 95, 213, 0.05);
    width: 100%;
    height: auto;
}

.dataTotal {
    background: rgb(248, 248, 248);
}

.tabItem {
    border-top: 4px solid transparent;
    font-size: 16px;
    color: #065fd5;
    font-weight: bold;
    opacity: .5;
    cursor: pointer;
}

.tabItem.tabItemAct {
    border-top: 4px solid #065fd5;
    opacity: 1;
}

/* 解决方案 */

.scheme {
    background-image: url(../images/scheme.png);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* 优点 */

.merit {
    background-image: url(../images/g_bg.png);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.btn-diy {
    width: auto;
    height: 56px;
    border: 2px solid #ffffff;
    border-radius: 28px;
    color: #fff;
    font-size: 18px;
}

.btn-diy:hover {
    color: #fff;
    box-shadow: 0 0 5px #fff inset;
}

.zan {
    width: auto;
    height: 120px;
    opacity: 0.8;
    background: #292f3a;
    border-radius: 20px 20px 0px 0px;
}

/* 服务套餐 */

.serverContainer {
    background-image: url(../images/serverbg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
}

.serveName>img {
    width: 56px;
    height: 66px;
}

.serveName>span {
    font-size: 24px;
    color: #fff;
}

.serveItem {
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.serveItem1 {
    background-image: url(../images/medalbg1.png);
}

.serveItem2 {
    background-image: url(../images/medalbg2.png);
}

.serveItem3 {
    background-image: url(../images/medalbg3.png);
}

.medalCancel {
    width: 12px;
    height: 12px;
    background: rgba(6, 95, 213, 0.20);
    border-radius: 50%;
}

.medalCancelImg {
    width: 10px;
    height: 12px;
}

.conTet {
    font-size: 18px;
    color: #333333;
    opacity: .8;
}

.btnMedal {
    font-size: 16px;
    color: #fff;
    outline: none;
    border: none;
    width: auto;
    height: auto;
    border-radius: 20px;
}

.btnMedal:hover {
    opacity: .8;
}

.btnMedal:focus {
    border: none;
    outline: none;
}

.btnMedal1 {
    background: linear-gradient(224deg, #b6d5fe 13%, #7eacea 92%);
    box-shadow: 0px 3px 6px 0px rgba(6, 95, 213, 0.20);
}

.btnMedal2 {
    background: linear-gradient(226deg, #c9d0dd 7%, #abb7ca 88%);
    box-shadow: 0px 3px 6px 0px rgba(33, 57, 96, 0.20);
}

.btnMedal3 {
    background: linear-gradient(226deg, #e2c194 7%, #c49b64 88%);
    box-shadow: 0px 3px 6px 0px rgba(197, 156, 102, 0.20);
}

.serveItemBox {
    border-radius: 8px;
}

.serverItemContent {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: auto;
    min-height: 680px;
}

.serveItemBox1 {
    box-shadow: 0px 3px 6px 0px rgba(6, 95, 213, 0.20);
}

.serveItemBox2 {
    box-shadow: 0px 3px 6px 0px rgba(171, 183, 202, 0.60);
}

.serveItemBox3 {
    box-shadow: 0px 3px 6px 0px rgba(128, 80, 17, 0.20);
}

.explain {
    max-width: 1200px;
    width: auto;
    height: auto;
    background: rgba(6, 95, 213, 0.05);
    border-radius: 8px 8px 0px 0px;
}

.explainText {
    font-size: 12px;
    color: #333333;
    opacity: .6;
}

/* 建议与反馈 */

.suggest {
    height: auto;
    background-image: url(../images/sugestbg.png);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* 修改表单样式 */

.form-control {
    border: 1px solid #065fd5;
    border-radius: 0 !important;
    background-color: transparent;
}

.form-control:focus {
    background-color: transparent;
}

.form-controls {
    width: 100% !important;
    height: 240px !important;
    border: 1px solid #065fd5;
    border-radius: 0 !important;
    background-color: transparent;
}

.form-controls:focus {
    background-color: transparent;
    border: 1px solid #065fd5;
    border-radius: 0 !important;
}

textarea {
    resize: none;
}

.btnCancel {
    padding: 7px;
    width: 88px;
    height: 88px;
    background: rgba(6, 95, 213, 0.20);
    border-radius: 50%;
    transition: all .3s linear;
}
.btnCancel:hover{
    background: rgba(6, 95, 213, 0.60);
}
.btnCancelSm {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    cursor: pointer;
    background: #ffffff;
    box-shadow: 0px 3px 6px 0px rgba(6, 95, 213, 0.20);
    font-size: 18px;
    font-weight: 700;
    color: #065fd5;
}
.btnSubmit {
    border-radius: 50%;
    outline: none;
    border: none;
}
.btnSubmit:focus {
    border-radius: 50%;
    outline: none;
    border: none;
}
/* 底部 */
.footer {
    height: auto;
    background: #f8f8f8;
}
.code1 {
    width: 120px;
height: 120px;
background: #ffffff;
border-radius: 8px;
box-shadow: 0px 3px 6px 0px rgba(6,95,213,0.20); 
}
.code1>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.footerText {
    font-size: 14px;
    color: #333333;
    opacity: .6;
}
.footer2 {
    color: #d8d8d8;
    font-weight: 700;
    font-size: 18px;
}
.footer3 {
    font-size: 14px;
    color: #333333;
}
.footer4{
    font-size: 16px;
    color: #333333;
}
/* 侧边栏 */
.side {
    position: fixed;
    right: 0;
    bottom: 15%;
    height: auto;
    width: 56px;
    background-color: rgb(123,123,123);
}
.sideItem {
    width: 56px;
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.sideItem>img {
    width: 24px;
    height: 24px;
}
a {
    text-decoration: none;
}
a.footer3:hover {
    text-decoration: none;
    font-size: 14px;
    color: #333333;
}
.hideMenu {
    display: none;
    padding: 10px 0 0 10px;
    width: 128px;
    height: 120px;
    position: absolute;
    left:-128px;
    top: calc(50% - 60px);
    background-image: url(../images/tooltipbg.png);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.sideItemcode:hover .hideMenu {
    display: block;
}
.tooltip-inner{
    background-color: rgb(152,152,152)!important;
}
.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before {
    border-left-color: rgb(152,152,152)!important;
}

@media screen and (max-width:600px) {
    .btn {
        padding: 0;
    }
    .contentBg {
        padding-top: 0px;
        padding-bottom: 20px;

    }
    .solution {
        width: 100% !important;
        object-fit: contain;
        height: 170px !important;
    }
    .goodNum {
        padding: 0 20px !important;
        text-align: center;
    }
    .goodNum>span {
        font-size: 20px !important;
    }
    .zan {
        height: auto !important;
    }
    .merit {
        display: block !important;
    }
    .totalNum {
        width: 100% !important;
        height: 300px !important;
        object-fit: contain;
    }
    .experience {
        display: block !important;
    }
}