body{
    margin: 0;
    width: 100%;
}
*{
    box-sizing: border-box;
    list-style: none;
}
ul,li {
    list-style: none;
}

/*下拉列表*/

/*banner*/
.banner{
    width: 100%;
    height: 420px;
    background-color:#212526 ;
}
.banner-con{
    width: 1200px;
    height: 400px;
    margin: 0 auto;
}
.banner-con .zuo{
    width: 600px;
    height: 400px;
}
.banner-con .zuo .ban-title{
    padding-top:165px ;
    font-size:36px;
    font-family:Microsoft YaHei;
    font-weight:400;
    color:rgba(255,255,255,1);
    line-height:32px;
}
.banner-con .zuo .ban-text{
    padding-top: 30px;
    font-size:16px;
    font-family:Microsoft YaHei;
    font-weight:400;
    color:rgba(254,254,254,0.8);
    line-height:30px;
}

.banner-con .zuo .contact{
    margin-top: 60px;
    width:130px;
    height:34px;
    background:rgba(29,147,248,1);
    /*border-radius:16px;*/
    cursor: pointer;
}
.banner-con .zuo .contact:hover{
    background-color: #0c87f0;
}
.contact a{
    /*padding-top: 10px;*/
    text-decoration: none;
    display: block;
    text-align: center;
    font-size:15px;
    font-family:Microsoft YaHei;
    font-weight:400;
    color:rgba(255,255,255,1);
    line-height:34px;
}

/*痛点*/
.spot{
    width:100%;
    height:480px;
    background:rgba(250,251,253,0.5);
}
.spot-con{
    width: 1200px;
    height: 400px;
    margin: 0 auto;
    padding-top: 80px;
}
.spot-con-title{
    height: 80px;
    position:relative;
    margin: 0 auto;
    text-align: center;
}
.spot-con-title .upper{
    position:absolute;
    z-index: 2;
    width: 1200px;
    height: 40px ;
}
.spot-con-title .upper p{
    text-decoration: none;
    display: block;
    text-align: center;
    margin: 0 auto !important;
    text-align: center !important;
    font-size:36px;
    color:rgba(51,60,93,1);
    line-height:30px;
    letter-spacing:4px;
}

.spot-con-title .lower{
    position:absolute;
    z-index:1;
    width: 1200px;
    height: 40px ;

}
.spot-con-title .lower p{
    text-decoration: none;
    display: block;
    text-align: center;
    font-size:24px;
    color:#999999;
    line-height:30px;
    opacity:0.2;
    margin: 0 auto;
    letter-spacing: 4px;
}

.spot-con-detail{
    width: 100%;
    height: 240px;
}
.spot-con-detail01{
    width:378px;
    height:240px;
    background:white;
    box-shadow:0px 0px 8px 0px rgba(0, 0, 0, 0.06);
    border-radius:10px;
    float: left;
    cursor: pointer;
}
.det-title{
    font-size:20px;
    color:rgba(51,60,93,1);
    text-align: center;
    margin-top:40px;
    margin-bottom: 10px;
}
.line{
    width:30px;
    height:2px;
    background-color:rgba(111,116,121,1);
    margin: 0 auto;
    transition: 1s all cubic-bezier(.2, 1, .2, 1);
    border-radius: 1px;
    box-sizing: border-box;
}
.det-text{
    padding-top: 20px;
    margin: 0 auto;
    width:320px;
    font-size:14px;
    color:rgba(111,116,121,1);
    line-height:26px;
    text-indent: 2em;
    z-index: 4;
}
.spot-icon{
    z-index: 3;
    float: right;
    margin-right: 20px;
    margin-top: -80px;
}
.spot-con-detail01:hover{
    box-shadow:0px 0px 8px 0px #13A1FF;
    transform: scale(1.1);
}
.spot-con-detail01:hover .line{
    width: 60px;
    background: #13A1FF;
}

/*架构*/
.framework{
    width: 100%;
    height:700px;
    background:rgba(250,251,253,1);
}

.fram-con{
    width: 1200px;
    height: 400px;
    margin: 0 auto;
    padding-top: 80px;
}
.fram-con-title{
    height: 80px;
    position:relative;
    margin: 0 auto;
    text-align: center;
}
.fram-con-title .upper{
    position:absolute;
    z-index: 2;
    width: 1200px;
    height: 40px ;
}
.fram-con-title .upper p{
    letter-spacing: 8px;
    text-decoration: none;
    display: block;
    text-align: center;
    margin: 0 auto !important;
    text-align: center !important;
    font-size:36px;
    color:rgba(51,60,93,1);
    line-height:30px;
}

.fram-con-title .lower{
    position:absolute;
    z-index:1;
    width: 1200px;
    height: 40px ;

}
.fram-con-title .lower p{
    text-decoration: none;
    display: block;
    text-align: center;
    font-size:24px;
    color:#999999;
    line-height:30px;
    opacity:0.2;
    margin: 0 auto;
    letter-spacing: 4px;
}
.fram-con-detail{
    width:100%;
    height: 500px;
    /*background-color: #c4e3f3;*/
}
/*架构图*/
.fram-con-detail .zuo{
    width: 620px;
    float: left;
}
.fram-con-detail .you{
    width: 455px;
    height: 500px;
    /*background-color: #00A2F7;*/
    float: right;
    margin-top: 28px;

}
.Related-products{
    margin-top: 10px;
}
.trait-title{
    width: 100%;
    height:24px;
    margin-bottom: 20px;
    margin-top: 40px;
}
.trait-title .striang{
    width: 17px;
    height: 17px;
    margin-top: 6px;
    margin-right: 16px;
    float: left;
}
.trait-title .title-text p{
    margin: 0 auto;
    font-size:20px;
    font-family:Source Han Sans CN;
    font-weight:400;
    color:#333C5D;
    line-height:30px;
    float: left;
    letter-spacing: 1px;
}
.trait-text{
    width: 430px;
    margin-left: 33px;
    margin-bottom: 40px;

}
.trait-text p{
    margin: 0 auto;
    text-indent:2em;
    font-size:16px;
    /*font-family:Source Han Sans CN;*/
    font-weight:400;
    color:rgba(111,116,121,1);;
    line-height:30px;
    letter-spacing: 1px;
}


.pro-title{
    width: 100%;
    height:24px;
    margin-bottom: 30px;
}
.pro-title .striang{
    width: 17px;
    height: 17px;
    margin-top: 6px;
    margin-right: 16px;
    float: left;
}
.pro-title .pro-text p{
    margin: 0 auto;
    font-size:20px;
    font-family:Source Han Sans CN;
    font-weight:400;
    color:#333C5D;
    line-height:30px;
    float: left;
    letter-spacing: 1px;

}
.re-pro-con{
    width: 100%;
}
.re-pro-con div{
    width:120px;
    height:32px;
    border:1px solid rgba(111,116,121,0.4);
    border-radius:20px;
    float: left;
    margin-left:26px;
    display: table;
    cursor: pointer;
}
.re-pro-con a{
    text-align: center;
    display:table-cell;
    vertical-align:middle;
    font-size:15px;
    /*font-family:Source Han Sans CN;*/
    font-weight:400;
    color:rgba(111,116,121,1);;
    line-height:15px;
    letter-spacing: 1px;
}
.re-pro-con div:hover{
    background-color:  rgba(18,164,255,1);
    border: 0 ;
}
.re-pro-con div:hover a{
    color: white;
}

/*产品推荐*/
.Recommend{
    width: 100%;
    height:760px;
    background:rgba(250,251,253,1);
}

.recon-con{
    width: 1200px;
    height: 400px;
    margin: 0 auto;
    padding-top: 80px;
}
.recon-con-title{
    height: 80px;
    position:relative;
    margin: 0 auto;
    text-align: center;
}
.recon-con-title .upper{
    position:absolute;
    z-index: 2;
    width: 1200px;
    height: 40px ;
}
.recon-con-title .upper p{
    letter-spacing: 8px;
    text-decoration: none;
    display: block;
    text-align: center;
    margin: 0 auto !important;
    text-align: center !important;
    font-size:36px;
    color:rgba(51,60,93,1);
    line-height:30px;
}

.recon-con-title .lower{
    position:absolute;
    z-index:1;
    width: 1200px;
    height: 40px ;

}
.recon-con-title .lower p{
    text-decoration: none;
    display: block;
    text-align: center;
    font-size:24px;
    color:#999999;
    line-height:30px;
    opacity:0.2;
    margin: 0 auto;
    letter-spacing: 4px;
}

.recon-nav{
    width:1120px;
    margin: 0 auto;
}

.recon-nav .f1{
    width: 900px;
    height: 100px;
    margin-left:160px;
}
/*.recon-nav>div{*/
/*cursor: pointer;*/
/*!*height:128px;*!*/
/*margin: 0 auto;*/
/*float: left;*/
/*}*/
.recon-nav #fw1,#fw2,#fw3{
    width:180px;
    height: 40px;
    float: left;
    margin-right: 120px;
    text-align: center;
    cursor: pointer;
}
#fw1,#fw2,#fw3 p{
    font-size:18px;
    font-family:Source Han Sans CN;
    font-weight:400;
    color:rgba(51,60,93,1);
    line-height:15px;
}
#fw1:hover{
    border-bottom: 2px solid #13A1FF;
}
#fw2:hover{
    border-bottom: 2px solid #13A1FF;
}
#fw3:hover{
    border-bottom: 2px solid #13A1FF;
}
#fw1.active{
    border-bottom: 2px solid #13A1FF;
}
#fw2.active{
    border-bottom: 2px solid #13A1FF;
}
#fw3.active{
    border-bottom: 2px solid #13A1FF;
}
.pro-commment{
    width: 100%;
    height: 420px;
    /*background-color: #00A0E9;*/
}
#div11{
    width:1180px;
    margin: 0 auto;
}
#div12{
    width:1180px;
    margin: 0 auto;
}
#div13{
    width:1180px;
    margin: 0 auto;
}

.pro1{
    width:1180px;
    height:120px;
    background:rgba(255,255,255,1);
    border:1px solid rgba(242,240,240,1);
    border-radius:4px;
    margin-bottom: 20px;
}
.pro1:hover{
    border:1px solid rgba(50,172,255,1);
}
.pro1 .zuo{
    width: 160px;
    height: 80px;
    margin-left: 24px;
    margin-top: 20px;
    float: left;
}
.pro1-title{
    height: 40px;
}
.pro1 .zuo .pro1-title p{
    margin: 0 auto;
    font-size:16px;
    font-family:Source Han Sans CN;
    font-weight:400;
    color:rgba(51,60,93,1);
    /*line-height:30px;*/
}

.pro1-text p{
    margin: 0 auto;
    font-size:12px;
    font-family:Source Han Sans CN;
    font-weight:400;
    color:rgba(168,173,185,1);
    /*line-height:18px;*/
}
.middle{
    width: 700px;
    height: 100px;
    margin-left: 60px;
    /*margin-top:20px;*/
    float: left;
}

table{
    margin-top:18px;
    margin-left: 10px;
}
table td{
    width: 124px;
    height: 24px;
}
.pz_t{
    margin: 0 auto;
    font-size:14px;
    font-family:Microsoft YaHei;
    font-weight:400;
    color:rgba(137,144,153,1);
    line-height:30px;
}
.pz_n{
    margin: 0 auto;
    font-size:16px;
    font-family:Microsoft YaHei;
    font-weight:400;
    color:rgba(40,158,229,1);
    line-height:30px;
}
.you{
    width: 220px;
    float: right;
}
.you .price{
    /*margin-left: 8px;*/
    margin-top: 28px;
}
.you .operation{
    width: 100%;
}
.you .operation .buy{
    width:80px;
    height:24px;
    border-radius:12px;
    margin-top: 12px;
    float: left;
    cursor: pointer;
    border:1px solid white;
    background-color: white;
    box-shadow:0px 1px 4px 0px rgba(208,217,224,0.2);
}

.you .operation .buy:hover{
    background-color:rgba(29,147,248,1) ;
}
.you .operation .buy:hover a{
    color: white;
}
.you .operation .buy a{
    font-size:12px;
    font-family:Microsoft YaHei;
    font-weight:400;
    color:rgba(40,158,229,1);
    line-height:22px;
    text-decoration: none;
    display: block;
    text-align: center;
}
.you .operation .consultation{
    width:80px;
    height:24px;
    border-radius:24px;
    margin-top: 12px;
    margin-left:16px;
    float: left;
    cursor: pointer;
    border:1px solid white;
    background-color: white;
    box-shadow:0px 1px 4px 0px rgba(208,217,224,0.2);
}

.you .operation .consultation a{
    font-size:12px;
    font-family:Microsoft YaHei;
    font-weight:400;
    color:rgba(40,158,229,1);
    line-height:22px;
    text-decoration: none;
    display: block;
    text-align: center;
}
.you .operation .consultation:hover{
    border:1px solid rgba(29,147,248,1);
    background-color:rgba(29,147,248,1) ;
}
.you .operation .consultation:hover a{
    color: white;
}

/*方案优势*/
.adv{
    width: 100%;
    height:560px;
}

.adv-con{
    width: 1200px;
    height: 400px;
    margin: 0 auto;
    padding-top: 80px;
}
.adv-con-title{
    height: 80px;
    position:relative;
    margin: 0 auto;
    text-align: center;
}
.adv-con-title .upper{
    position:absolute;
    z-index: 2;
    width: 1200px;
    height: 40px ;
}
.adv-con-title .upper p{
    letter-spacing: 8px;
    text-decoration: none;
    display: block;
    text-align: center;
    margin: 0 auto !important;
    text-align: center !important;
    font-size:36px;
    color:rgba(51,60,93,1);
    line-height:30px;
}

.adv-con-title .lower{
    position:absolute;
    z-index:1;
    width: 1200px;
    height: 40px ;

}
.adv-con-title .lower p{
    text-decoration: none;
    display: block;
    text-align: center;
    font-size:24px;
    color:#999999;
    line-height:30px;
    opacity:0.2;
    margin: 0 auto;
    letter-spacing: 4px;
}
.adv-con-detail{
    width:100%;
    height: 400px;
}
.adv01{
    width: 25%;
    height: 320px;
    float: left;
    /*background-color: #d4d4d4;*/
}
.adv01:hover{
    background-color: white;
    box-shadow:0px 0px 4px 0px rgba(0, 0, 0, 0.1);
}
.adv01:hover .adv-icon{
    transform: rotateY(360deg);
    transition: all 2s ease 0s;
}
.adv-icon{
    text-align: center;
    margin: 0 auto;
    padding-top: 40px;
    padding-bottom: 20px;
}
.text1{
    text-align: center;
}
.text1 p{
    margin-top: 12px;
    margin-bottom: 20px;
    font-size:20px;
    font-family:Source Han Sans CN;
    font-weight:400;
    color:rgba(51,60,93,1);
    line-height:30px;
    /*opacity:0.87;*/
}
.text2{
    text-align: center;
}
.text2 p{
    font-size:14px;
    font-family:Source Han Sans CN;
    font-weight:400;
    color:rgba(111,116,121,1);
    line-height:24px;
    /*opacity:0.78;*/
}
.banner-con .you {
    width: 380px;
    height: 480px;
    margin-right: 50px;
}
.banner-con .you .pic{
    margin-top: 110px;
    float: right;
}
.fram-con-detail .zuo{
    width: 620px;
    float: left;
    /*margin-top: 40px;*/
}
.banner-con .you_fina {
    width: 500px;
    height: 480px;
}
.banner-con .you_fina .pic{
    margin-top: 140px;
    float: right;
}
.banner-con .you_game {
    width: 380px;
    height: 480px;
    margin-right: 80px;
}
.banner-con .you_game .pic{
    margin-top: 109px;
    margin-left: 10px;
    float: right;
}
.banner-con .you_reta {
    width: 500px;
    height: 480px;
}
.banner-con .you_reta .pic{
    margin-top: 110px;
    float: right;
}
.banner-con .you_video {
    width: 500px;
    height: 480px;
}
.banner-con .you_video .pic{
    margin-top: 110px;
    float: right;
}
.banner-con .you_web {
    width: 500px;
    height: 480px;
}
.banner-con .you_web .pic{
    margin-top: 120px;
    float: right;
}
.agreebox{
     border-left: 0px ;
     border-right: 0px ;
     border-top: 0px ;
     border-bottom: 1px solid black;
     width: 400px;
 }