@charset "utf-8";
/* CSS Document */
img{border:0px;}
body {margin:0; padding:0; color:#999; font-size:14px; font-family:'Microsoft Yahei';}
li{list-style:none}
.img_left{ width:27%; height:73%; background:url(../images/bg_circle.png) no-repeat; background-size:100% 100%; position:relative;}
.img_left i{ color:#2e83e2; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);}
.img-responsive{display:block;max-width:100%;height:auto;}
.pr{position:relative;}
.pa{position:absolute;}
.f28{font-style:28px;}
.f14{font-size:14px;}
.f16{font-style:16px;}
.c_2e83e2{color:#2e83e2;}
.c_000{color:#666;}
.c_333{color:#333;}
.c_666{color:#666;}
.w600{width:600px;}
.pl60{padding-left:60px;}
.pt15{padding-top:15px;}
.pt25{padding-top:25px;}
.pt30{padding-top:30px;}
.pt37{padding-top:37px;}
.pt40{padding-top:40px;}
.pt50{padding-top:50px;}
.pt100{padding-top:100px;}

.pl20{padding-left:20px;}
.mr20{margin-right:20px;}
.mt40{margin-top:40px;}
.ml20{margin-left:20px;}
.ml20{margin-left:20px;}
.f30{font-size:30px;}
.mob{display:none;}
.pt14{padding-top:14px;}

.top{background:#383838;}
.introduction{text-align:center;}
.introduction span{font-weight:bold;}
.center .main .introduction h2{line-height:1.6}
.center .main .introduction_02 p{line-height:1.7}
.rightbox p{line-height:1.7}
.rightbox h3{font-size:18px;}
.rightbox p{font-size:14px}

.function{width:100%;background:#f5f5f5;height:auto;}
.function h1{font-weight:bold;}
.square,.square_02{border:1px solid #fff;}
.logo{padding-top:10px;}

.A_01{position:absolute;left:50px; /*bottom:-4px;*/ bottom:0;}
.landa{right:240px;top:100px;}
.landa_02{right:60px;top:200px;}
.android{right:356px;top:330px;}
.iphone{right:356px;top:407px;}
.erweima{right:160px;top:323px;}

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


/* 媒体查询定义 */
@media (max-width:767px){ /* phone  */
    
    .mob{display:block;}
    .main{width:100%;}
    .B_01{display:none;}

    .logo{width:39.06%;padding-left:10px;padding-top:10px;padding-bottom:10px;}

    .banner{width:100%;height:160px;background:url(../images/mob_bg.jpg) no-repeat top center;background-size:cover;overflow:hidden;}
    .banner .main{height:160px;}
    .A_01{width:34%;bottom:-2px; left:0;}
    .landa{width:33.75%;margin-right:20%;right:0;top: 20%;}
    .landa_02{width:60.3125%;right:0;margin-right:2.5%;top: 38%;}
    .android{width:24%;right:0;margin-right:32.1875%;top: 60%;}
    .iphone{width:24%;top: 77%;right:0;margin-right:32.1875%;}
    .erweima{width:15.625%;right:0px;margin-right:12.5%;top: 60%;}

    
    .cen_box{width:50%;text-align:center;margin:0 auto;padding-top:30px;}
    .introduction{width:88%;margin-left:6%;font-size:16px;padding-top:30px;}

    .introduction_02{width:88%;margin-left:6%;padding-bottom:50px;font-size:12px}
    
    .function{height:980px;}
    .function h1{line-height:70px;padding-top:10px;font-size:22px;padding-top:10px;text-align:center;}   
    .square,.square_02{width:92%;height:120px;padding-top:20px;background:#fff;margin-left:4%;margin-bottom:6px;}
    .img_left{margin-left:6%;padding-top:15px;}
    .rightbox{width:57.625%;margin-right:4%;}
    .rightbox h3{font-size:14px;}
    .rightbox p{font-size:12px}

    .footer{height:48px;text-align:center;background:#2c2d2b;}
    .footer p {line-height:48px;font-size:10px}
    .footer p span{display:none}

}

@media (min-width:768px) and (max-width:959px){/* pad 竖 */
    .img-responsive{display: block;max-width: 100%;height: auto;}
    .main{width:100%;}
    .B_01{display:none;}
    .mob{display:block;}
    
    .top .main{height:50px;}
    .logo{width:39.06%;padding-left:4%;}

    .banner{width:100%;height:400px;background:url(../images/mob_bg.jpg) no-repeat top center;background-size:100%}
    .banner .main{height:400px;}
    .A_01{width:34%;bottom:0; left:0;}
    .landa{width:33.75%;margin-right:20%;right:0;top:65px;}
    .landa_02{width:60.3125%;right:0;margin-right:2.5%;top:130px;}
    .android{width:24%;right:0;margin-right:32.1875%;top:215px;}
    .iphone{width:24%;top:277px;right:0;margin-right:32.1875%;}
    .erweima{width:15.625%;right:0px;margin-right:12.5%;top:212px;}
    .cen_box{width:50%;text-align:center;margin:0 auto;padding-top:50px;}
    .introduction{width:76%;margin-left:12%;font-size:28px;padding-top:60px;padding-left:0}
    .introduction_02{width:88%;margin-left:6%;padding-bottom:70px;font-size:16px;}
    
    

    .function{height:1030px;}
    .function .main{height:1030px;}
    .function h1{line-height:100px;padding-top:10px;font-size:30px;padding-top:10px;text-align:center;}
    .square,.square_02{width:92%;/*height:124px;*/height:128px;padding-top:30px;background:#fff;margin-left:4%;margin-bottom:6px;}
    
    .img_left{width:15%; height:80%; margin-left:6%;}
    .rightbox{width:68.625%;margin-right:4%;padding-top:5px;}

    .footer{height:48px;text-align:center;background:#2c2d2b;margin-top:10px;}
    .footer p {line-height:48px;}
    .footer p span{display:none}


    
}

@media (min-width:960px) and (max-width:1199px){/* pad & pc 1200 横  */

    .main{width:100%;}
    .mob{display:none;}
    .img-responsive{display: block;max-width: 100%;height: auto;}
    .logo{padding-left:2%;}

    .top{width:100%;height:60px;background:#383838;}
    .top .main{height:60px;}
    .banner{width:100%;height:590px;background:url(../images/bg_banner.jpg) no-repeat top center;}
    .banner .main{height:590px;position:relative;}
    
    .A_01{ width:37%; position:absolute;left:0;bottom:0;}
    .landa{right:0px;padding-right:16%;top:100px;}
    .landa_02{right:0px;padding-right:2%;top:200px;}
    .android{right:0px;padding-right:30%;top:330px;}
    .iphone{right:0px;padding-right:30%;top:407px;}
    .erweima{right:0px;padding-right:12%;top:323px;}
    .center{width:100%;height:482px;}
    .center .main{height:482px;overflow:hidden;}
    .tit_cen{text-align:left;}
    .center .main .introduction{width:50%;padding-left:60px;padding-top:100px;text-align:center;font-size:28px}
    .center .main .introduction_02{position:absolute;width:50%;padding-left:60px;font-style:16px;}
    .center .main .introduction_02 h2{line-height:1.6}
    .center .main .introduction_02 p{line-height:1.7}
    .B_01{position:absolute;right:-30px;bottom:-110px;}

    .function{width:100%;height:612px;background:#f5f5f5;}
    .function .main{height:612px;}
    .function h1{line-height:100px;padding-top:10px;font-size:30px;padding-top:10px;text-align:center;}
    .square,.square_02{width:30.3333333%;height:163px;background:#fff;margin-bottom:20px;padding-top:37px;margin-left:1.4%;margin-right:1.4%;}
    .img_left{width:31%;margin-left:3%;padding-top:5px;}
    .rightbox{width:60%;height:110px;padding-right:10px; }
    .footer{width:100%;height:64px;background:#2c2d2b;}
    .footer .main p{padding-top:10px}
    
    

}

@media (min-width:1200px){/* PC  */
    .main{width:1180px;margin:0 auto;}
    .top{width:100%;height:60px;background:#383838;}
    .top .main{height:60px;}
    .logo{padding-top:14px;}
    
    .banner{width:100%;height:590px;background:url(../images/bg_banner.jpg) no-repeat top center; background-size:100% 100%;}
    .banner .main{height:590px;position:relative;}
    .center{width:100%;height:482px;}
    .center .main{height:482px;overflow:hidden;}
    .center .main .introduction{width:600px;padding-top:100px;text-align:center;font-size:28px;padding-left:60px;}
    .center .main .introduction_02{width:600px;font-size:16px;padding-left:60px;}
    .B_01{position:absolute;right:0px;bottom:-110px;}


    .function{width:100%;height:612px;background:#f5f5f5;}
    .function .main{height:612px;}
    .function h1{line-height:100px;padding-top:10px;font-size:30px;padding-top:10px;text-align:center;}
    .square{width:378px;height:143px;background:#fff;margin-bottom:20px;padding-top:37px;margin-right:20px;}
    .square_02{width:378px;height:143px;background:#fff;margin-bottom:20px;padding-top:37px;}
    .img_left{margin-left:6%;}
    .rightbox{width:210px;height:110px;padding-right:20px; }

    .footer{width:100%;height:64px;background:#2c2d2b;}
    .footer .main p{padding-top:10px}
    .footer .main{text-align:center;line-height:22px;}

}


@media \0screen\,screen\9{ 
    
    .main{width:1180px;margin:0 auto;}
    .top{width:100%;height:60px;background:#383838;}
    .top .main{height:60px;}
    .logo{padding-top:14px;}
    
    .banner{width:100%;height:590px;background:url(../images/bg_banner.jpg) no-repeat top center;}
    .banner .main{height:590px;position:relative;}
    .center{width:100%;height:482px;}
    .center .main{height:482px;overflow:hidden;}
    .center .main .introduction{width:600px;padding-top:100px;text-align:center;font-size:28px;padding-left:60px;}
    .introduction span{font-weight:bold;}
    .center .main .introduction_02{width:600px;font-size:16px;padding-left:60px;}

    .B_01{position:absolute;right:0px;bottom:-110px;}


    .function{width:100%;height:612px;background:#f5f5f5;}
    .function .main{height:612px;}
    .function h1{line-height:100px;padding-top:10px;font-size:30px;padding-top:10px;text-align:center;}
    .square{width:378px;height:143px;background:#fff;margin-bottom:20px;padding-top:37px;margin-right:20px;}
    .square_02{width:378px;height:143px;background:#fff;margin-bottom:20px;padding-top:37px;}
    .img_left{margin-left:6%;}
    .rightbox{width:210px;height:110px;padding-right:20px; }

    .footer{width:100%;height:64px;background:#2c2d2b;}
    .footer .main p{padding-top:10px}

}



@media only screen and (min-width:320px) and (max-width:360px)and (orientation : portrait){  /* IPHONE 5 */

	.img_left{width:26%; height:60%; padding-top:5px;}
	
}
@media only screen and (min-width:360px) and (max-width:365px) and (orientation : portrait) {
    .top{height:40px;}
    .banner{height:180px;}
    .banner .main{height:180px;}
    .img_left{ width:27%;padding-top:10px;}
	.rightbox{ margin-right:2%;}
}
@media only screen and (min-width: 375px) and (max-width: 667px) and (orientation : portrait) { /* IPHONE 6 */
    .top{height:40px;}
    .banner{height:210px;}
    .banner .main{height:210px;}
    .A_01{width:35%}
    .introduction{font-size:16px;}
    .img_left{width:25%;padding-top:5px;}
}
@media only screen and (min-width: 414px) and (max-width: 644px) and (orientation : portrait) {  /* IPHONE 6 PLUS */
    .top{height:45px;}
    .banner{height:220px;}
    .banner .main{height:220px;}
    .introduction{font-size:18px;}

}
@media only screen and (min-width: 599px) and (max-width: 767px) and (orientation : portrait) {  /* IPHONE 6 PLUS */
    .top{height:55px;}
    .banner{height:350px;}
    .banner .main{height:350px;}
    .introduction{font-size:18px;}

}
@media only screen and (max-width:736px) and (orientation : landscape){
	.banner{height:320px;}
    .banner .main{height:320px;}
	.A_01{width:32%}	
	.landa{top: 10%;}
    .landa_02{top: 28%;}
    .android{top: 52%;}
    .iphone{top: 73%;}
    .erweima{top: 52%;}
}
@media only screen and (max-width:667px) and (orientation : landscape){
	.banner{height:280px;}
    .banner .main{height:280px;}
}
@media only screen and (max-width:568px) and (orientation : landscape){
	.banner{height:240px;}
    .banner .main{height:240px;}
	.iphone{top: 73%;}
}