.banner {
    height: 550px;
    width: 100%;
    margin-top: 80px;
    background-color: #3178F2;
}

.banner-box {
    height: 100%;
    position: relative;
    width: 1180px;

    margin: 0 auto;
}

.banner-pic {
    height: 100%;
    background: url(../images/productbanner.png) no-repeat;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    width: 1920px;
    right: -410px;
    top: 0;
}

.banner h3 {
    font-size: 44px;
    font-weight: 400;
    padding-top: 138px;
    color: #fff;
}

.banner p {
    color: #fff;
    font-size: 20px;
    margin-top: 15px;
    line-height: 30px;
}

.banner-con {
    width: 100%;
    position: absolute;
    opacity: 0;
    top: 500px;
}

.subtitle {
    opacity: 0;
    position: relative;
    top: 100px;
}

.product-jiagou {
    padding: 0 0 0;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.28);
    border-radius: 4px;
    margin: -112px auto 70px auto;
    background: #fff;
    /* top:300px;
    opacity: 0; */
}

.jiagou-pic {
    padding: 30px 140px 30px;
    opacity: 0;
}

.jiagou-pic img {
    width: 100%;
}

.jierubg {
    width: 100%;
    overflow: hidden;
}

.jiagou-con {
    display: flex;
    background: #FAFCFF;
}

.jiagou-con li {
    flex: 1;
    margin: 15px 0 15px 49px;
    border-right: 1px solid #E1E8FD;
}

.jiagou-con li:nth-last-of-type(1) {
    border-right: 0 none;
}

.jiagou-con li h3 {
    font-size: 18px;
    font-weight: 500;
    color: #323232;
}

.jiagou-con li p {
    color: #5D6494;
}

.jieru-con {
    background: url(../images/jierubg.png) no-repeat;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;

}

.jieru-con .subtitle {
    padding-top: 50px;
    color: #fff;
}

.jierucon-list {
    text-align: center;
    width: 550px;
    border-bottom: 1px solid #ffffff6b;
    display: flex;
    margin: 0 auto;
    opacity: 0;
}

.jierucon-list li {
    flex: 1;
    padding: 12px 0;
    margin-left: 30px;
    font-size: 17px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
}

.jierucon-list li.active,
.jierucon-list li:hover {
    border-bottom: 1px solid #fff;
}

.jieru-listconbox {
    height: 394px;
    position: relative;
    opacity: 0;
}

.jierucon-listcon {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
}

.jierucon-listcon:nth-of-type(1) {
    opacity: 1;
}

.jieru-left {
    color: #fff;
    font-size: 18px;
}

.jieru-leftcon {
    padding: 80px;
}

.jieru-left h3 {
    font-size: 26px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 9px;
}

.jieru-left,
.jieru-pic {
    float: left;
    width: 50%;
}

.jieru-pic img {
    width: 100%;
}

.tedianlist {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    background: #fff;
    z-index: 1;
    opacity: 0;
}

.tedianlist-li,
.tedianlist-li2 {
    flex: 1;
    flex-basis: 20%;
    text-align: center;
    cursor: pointer;
    border-bottom: 2px solid #fff;
}

.tedianlist-li:hover,
.tedianlist-li.active,
.tedianlist-li2:hover,
.tedianlist-li2.active {
    border-bottom: 2px solid #3178F2;
}

/* .icon {
    background:url(../images/product.png) no-repeat;
    background-position: -22px -30px;
    width: 58px;
    height: 58px;
    background-size: 428px;
    display: inline-block;
}

.icon2 {
    background-position: -102px -30px;
}
.icon3 {
    background-position: -180px -30px;
}
.icon4 {
    background-position: -258px -30px;
}
.icon5 {
    background-position: -339px -30px;
}
.icon6 {
    background-position: -22px -109px;
}
.icon7 {
    background-position: -102px -109px;
}
.icon8 {
    background-position: -180px -109px;
}
.icon9 {
    background-position: -258px -109px;
}
.icon10 {
    background-position: -339px -109px;
} */
.icontxt {
    font-size: 20px;
    font-weight: 500;
    color: #323232;
    margin: 30px 0 20px 0;
}

.tedianconbox {
    margin-bottom: 40px;
    background: #fff;
}

.tedianconbox,
.tedianconbox2 {
    /* display: none; */
    height: 0;
    overflow: hidden;
    background: #F3F8FF;
    top: -142px;
    position: relative;

}

.tedianconbox ul,
.tedianconbox2 ul {
    display: flex;
    padding: 40px 20px 20px;
    position: relative;
    top: 100px;
    opacity: 0;
    flex-wrap: wrap;
}

.tedianconbox li,
.tedianconbox2 li {
    flex: 1;
    padding: 0 60px 20px;
    flex-basis: 33%;
}

.tediancon {
    display: none;
}

.pd70 {
    padding: 70px;
}

.youshibg {
    width: 100%;
    background: #F7F6FB;
}

.youshi-pic {
    opacity: 0;
}

.youshi-pic img {
    width: 100%;
}

.tedianbox {
    padding: 70px 0;
}

.shiyong {
    background: url(../images/shiyongbg.png) no-repeat;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center center;
    padding-bottom: 36px;
    text-align: center;
    background-color: #3177f2;
}

.shiyong .subtitle {
    padding: 50px 0 27px 0;
    color: #fff;
    margin-bottom: 0;
}

.applybtn2 {
    margin: 0 auto;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    color: #3178F2;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    top: 100px;
    opacity: 0;
    padding: 10px 58px;
}

.visual {
    width: 100%;
    padding: 90px 0;
}

.visualBox {
    display: flex;
    width: 1200px;
    margin: 0 auto;
}

.visualLeft {
    flex: 1;
    opacity: 0;
}

.visualLeft h3 {
    font-size: 44px;
    color: #000;
    margin-bottom: 38px;
}

.visualLeft p {
    font-size: 18px;
    color: #666;
    line-height: 30px;
}

.visualRight {
    background: url('../images/visualRightBg.png') no-repeat top left;
    width: 665px;
    height: 372px;
    position: relative;
    left: 200px;
    opacity: 0;
}
.prosliderBox {
	position: absolute;
	left: 80px;
	vertical-align: middle;
	top: 22px;
	width:495px;
	height: 306px;
}
.prosliderBox .bx-wrapper .bx-controls-direction a {
	left: -614px;
	top: 232px;
	background: url(../images/procontrols.png) no-repeat;
	width: 50px;
	height: 50px;
    cursor: pointer;
    z-index: 1;
}
.prosliderBox .bx-wrapper .bx-controls-direction a.bx-next{
	left: -550px;
	background-position: -51px 0;
}
.prosliderBox .bx-wrapper .bx-controls-direction a:hover{
	background-position: 0 -51px;
}
.prosliderBox .bx-wrapper .bx-controls-direction a.bx-next:hover{
	background-position: -51px -51px;
}