@charset "utf-8";
/* CSS Document */
/*清除内外边距*/
html,body,div,p,h1,h2,h3,h4,h5,h6,blockquote,ul,ol,li,table,th,td,span,img,dl,dd,dt,input,textarea,button{padding:0;margin:0;}
/*设置字体*/
body,textarea,button,input,select{font-family:"Microsoft Yahei"; font-size:12px; color:#333333;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
em{font-style:normal;}
/*设置列表*/
ul,ol{list-style:none;}
/*设置通用链接*/
a{ color:#333333; text-decoration:none; outline:none;blr:expression(this.onFocus=this.blur());}
a:hover{ color:#FF0000;}
#wrapper {
    width: 100%;
    min-height: 100%;
    position: relative;
    height: auto;
}
.headerbg {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 90vh;
    overflow-x: hidden
}


.headerbg .headershow {
    width: 106%;
    height: 95%;
    -webkit-transform-origin: 0, 0;
    transform-origin: 0, 0;
    -webkit-transform: rotate(4deg) translate(-144px, -40px);
    transform: rotate(4deg) translate(-144px, -40px);
    -webkit-transform: rotate(4deg) translate(-7.7rem, -2rem);
    transform: rotate(4deg) translate(-7.7rem, -2rem);
    border-radius: 0 0 50px 0;
    border-radius: 0 0 2.5rem 0;
    box-shadow: 1px 1px 35px 15px rgba(81, 90, 229, .4);
    filter: progid:DXImageTransform.Microsoft.Shadow(color="rgba(81,90,229,0.4)", Direction=125, Strength=9);
    background: url(https://www.bjch321.com/images/headbg.png) no-repeat 100% 100%;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="https://www.bjch321.com/images/headbg.png", sizingMethod="scale");
     background: linear-gradient(120deg, #316bed, #3189ed 30%, #2ca2dc 50%, #38acdf 90%, #388ddf);
    filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#3150ed, endcolorstr=#db38df, gradientType=1)
}

.headerbg .reactinner {
    width: 40%;
    height: 520px;
    height: 26rem
}

.headerbg .reactinner, .headerbg .reactout {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50px;
    border-radius: 2.5rem;
    behavior: url(https://www.bjch321.com/assets/PIE-1.0.0/PIE.htc);
    background: hsla(0, 0%, 100%, .05)
}

.headerbg .reactout {
    width: 56%;
    height: 360px;
    height: 18rem
}

.container{padding: 20px 8% 0;}
.logo{ display:flex; align-items: center; font-size: 18px; color: #FFF;}
.logo img{width:30px; margin-right: 10px;}
.ban-box{display:flex; flex-wrap: wrap; justify-content: space-around;}
.ban-box .ban-txt{width:55%; padding-top: 6%;}
.ban-box .ban-txt .t1{font-size:48px; color: #FFF; font-weight: bold;}
.ban-box .ban-txt .smtext{display:flex;  padding-top: 6%;}
.ban-box .ban-txt .smtext .item{border-radius:100%; width: 132px; height: 132px; color: #FFF; border:2px solid #FFF; margin: 0 20px;}
.ban-box .ban-txt .xz-btn{display:flex; flex-wrap: wrap; padding-top: 6%;}
.ban-box .ban-txt .xz-btn .btn-item{width:30%; margin-right: 2%; background: #FFF; border-radius: 40px; color: #3a9ae6; font-size: 18px; font-weight: bold; padding: 15px 0; display: flex; justify-content: center; align-items: center; cursor: pointer;}
.ban-box .ban-txt .xz-btn .btn-item img{width:30px; margin-right: 10px;}
.ban-box .ban-txt .smtext .item .tit{font-size:18px; text-align: center; padding-top: 20px;}
.ban-box .ban-txt .smtext .item .tit strong{font-weight:bold; font-size: 36px;}
.ban-box .ban-txt .smtext .item .ftit{font-size:18px; text-align: center;}
.ban-box .ban-pic{width:45%; text-align: center;}
.ban-box .ban-pic img{width:90%;}
.pd60{padding:100px 0;}
.js-box{display:flex; flex-wrap: wrap;}
.js-box:nth-child(2n){flex-direction:row-reverse}
.js-box .js-txt{width:50%; display: flex; align-items: center;}
.js-box .js-txt .item-tit{font-size:28px; color: #333;}
.js-box .js-txt .item-tit img{width:30px; margin-right: 10px;}
.js-box .js-txt .item-smtext{padding-top:20px; color: #666; font-size: 20px; line-height: 40px;}
.js-box .js-pic{width:50%; text-align: center;}
.js-box .js-pic img{width: 80%;}
.pingjia{width:60%; margin: 0 auto;}
.pingjia .tit{text-align:center; font-size: 32px; color: #333; margin-bottom: 40px;}
.pingjia .smtext{line-height:30px; color: #666; font-size: 16px; text-align: center;}
.pingjia .pj-pic{display:flex; flex-wrap:wrap; justify-content: space-between; padding-top: 30px;}
.pingjia .pj-img{width:16.6%; text-align: center; margin-bottom: 15px;}
.pingjia .pj-img img{max-width:80%;}

.copyright{padding:30px; text-align: center; font-size: 14px;}
.copyright p{margin-bottom:5px;}
.copyright a{ color:#337ab7;}



.open {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 99999;
    display: none;
}
.bigwx {
    position: absolute;
    background: #fff;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width:80%;
    max-width: 500px;
    height: 360px;
    margin: auto;
    text-align: center;
    overflow: hidden;
	-webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}
.bigwx .close {
	position: absolute; top:10px; right: 10px;
    cursor: pointer;
}

.bigwx .title{background: #4853e3; padding:20px 0; text-align: center; position: relative;}
.bigwx .bj_bd{width:90%; margin: 30px auto 0; display: flex; flex-flow: wrap;}
.bigwx .bj_bd .bd_l{width:10%; text-align: center; display: flex; justify-content: center; align-items: center;}
.bigwx .bj_bd .bd_l i{font-size:28px; color: #4853e3;}
.bigwx .bj_bd .bd_r{width:100%;}
.bigwx .bj_bd .bdtxt{padding:0 12px; line-height: 45px; border: none;  color: #333; font-size: 13px; width: 90%; background: #f4f4f4; border-left: 4px solid #4853e3;}
input:focus{outline:none}

.bigwx .tijiao {
    background: #4853e3;
    width: 82%;
    padding: 10px 0;
    text-align: center;
    font-size: 22px;
    color: #FFF;
    border-radius: 10px;
    border: none;
    -webkit-box-shadow: 0 15px 30px rgba(0,0,0,.1);
    box-shadow: 0 15px 30px rgba(0,0,0,.1);
    -webkit-transform: translate3d(0,-2px,0);
    cursor: pointer;
	margin: 30px auto 0;
}

.btn {
    display: block;
    position: relative;
    top: 100px;
    margin: 20px;
    width: 200px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 5px;
    font-size: 18px;
    color: salmon;
    background-color: skyblue
}

.btn-on {
    background-color: #4853e3;
}

@media (max-width:767px) {
	.headerbg .headershow{width:130%;}
	.ban-box .ban-txt{width:100%;}
	.ban-box .ban-txt .t1{font-size:28px;}
	.ban-box .ban-txt .smtext .item{width:90px; height:90px; margin: 0 5px;}
	.ban-box .ban-txt .smtext .item .tit strong{font-size:22px; margin-bottom: 5px; padding-top: 10px;}
	.ban-box .ban-txt .smtext .item .ftit{font-size:14px;}
	.ban-box .ban-txt .xz-btn .btn-item{width:80%; margin-bottom: 15px;}
	.ban-box .ban-txt .xz-btn{justify-content:center;}
	.ban-box .ban-pic{width:60%;}
	.js-box .js-txt{width:100%;}
	.js-box .js-txt .item-tit{font-size:22px;}
	.js-box .js-txt .item-smtext{font-size:16px; line-height: 28px;}
	.js-box .js-pic{width:100%; margin-top: 15px; margin-bottom: 15px;}
	.pingjia{width:90%;}
}