﻿/* 全局CSS定义 */
body {font-family:"微软雅黑","Microsoft YaHei";  margin:0 auto; padding:0; font-size:16px;background-color:#fff; width:100%;}
div, form, ul, ol, li, span, p, dl, dt, dd { margin:0; padding:0; border:0; }
img, a img { border:0; margin:0; padding:0; }
h1, h2, h3, h4, h5, h6 { margin:0; padding:0; font-size:12px; }
ul, ol, li { list-style:none }
table, td, input { font-size:12px; padding:0; font-family:inherit; }
img{ vertical-align:middle;}
.pull-right {float:right; }
.pull-left {float:left; }
.list-unstyled { padding-left: 0; list-style: none;}
.font14 { font-size:14px;}
*, :before, :after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
a { text-decoration:none;outline:none;outline-style:none;}
 a:hover, a:active, a:visited,a:focus { outline:none; outline-style:none;}
.word { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;display:block; }
i {font-style:normal; }


/*头部*/
    body { padding-top:80px;line-height: 1.3;}
    * { -webkit-tap-highlight-color:transparent; }
    .header_big_wrap { background-color:#fff;box-shadow:1px 1px 3px 0px rgba(4,0,0,0.05);-webkit-box-shadow:1px 1px 3px 0px rgba(4,0,0,0.05);-moz-box-shadow:1px 1px 3px 0px rgba(4,0,0,0.05);z-index:10;}    
    .header_big_wrap { width:100%;position:fixed;top:0px;left:0px;z-index:20;} 
    .header_wrap { width:1200px;margin:auto;overflow:hidden;height:80px;}
    .header_wrap > a { display: block; float: left; padding-top:11px; }
    .nav_bar { float:right;font-size:0px;}
    .nav_bar > a { display:inline-block;padding:0px 30px;}
    .nav_bar > a > span { font-size:14px;color:#666;display:block;height:80px;line-height:80px;position:relative;}
    .nav_bar > a.active > span {font-size:16px;font-weight:bold;color:#007EE9; }
    .nav_bar > a.active > span:after { content:'';display:inline-block;width:100%;height:2px;background-color:#007EE9;position:absolute;bottom:0px;left:0px;}
    .nav_bar > p { display:inline-block;padding-left:30px;}
    .nav_bar > p > a > span { color:#007EE9;}
    .nav_bar > p > a { display: inline-block; width: 80px; height: 34px;text-align:center;line-height:34px;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;font-size:14px;border:1px solid #007EE9;}
    .nav_bar > p > a.active {background-color:#007EE9;margin-left:10px; }
    .nav_bar > p > a.active > span { color:#fff;}
        
   /*banner*/
    .pinpai_banner { width:100%;height:403px;overflow:hidden;height:403px;position:relative;}
    .pinpai_banner > p { position:absolute;height:403px;width:100%;top:0px;left:0px;}
    .pinpai_banner > p > img { display: block; text-align: center; position: absolute; left: 50%; margin-left: -960px; top: 0px; height: 403px; width: 1920px; }
    .pinpai_banner > .content { width:1200px;margin:auto;position:relative;z-index:2;}
    .pinpai_banner > .content > img { display:block;margin-top:100px;}
    .pinpai_banner > .content > p { font-size:28px;color:#333;padding-top:20px;}
    .pinpai_banner > .content > a {margin-top:65px;display:inline-block; }

    /*社区拼团小程序+APP+微商城*/
    .sqpt_box { width:1200px;margin:auto;font-size:0;overflow:hidden;padding-bottom:95px;}
    .sqpt_box > .img { display:inline-block;width:50%;padding-top:90px;vertical-align:top;}
    .sqpt_box > .img > img { display:block;max-width:100%;}
    .sqpt_content { display:inline-block;width:50%;vertical-align:top;}
    .sqpt_content > .title { font-size:40px;color:#007EE9;font-weight:bold;padding-top:105px;}
    .sqpt_content > .text { font-size:26px;color:#333;padding-top:15px;}
    .sqpt_content > .content { font-size:18px;color:#666;line-height:34px;padding-top:30px;}


     /*解决不同角色需求*/
    .btxq_big_wrap { width:100%;background-color:#F7F7F7;}
    .btxq_box { width:1200px;margin:auto;padding-bottom:90px;}
    .common_title { text-align:center;}
    .common_title > .title { font-size:40px;color:#333;font-weight:bold;padding-top:84px;}
    .common_title > .name{ font-size:17px;color:#ccc;font-family:Adobe Heiti Std R;}
    .common_title > span {display:inline-block;height:4px;width:46px;background:url(../image/index025.png) no-repeat;background-size:100%;clear:both;vertical-align:top;margin-top:15px; }

    .btxq_content {font-size:0;margin-top:39px;}
    .btxq_detail {width:33.333%;display:inline-block;padding:0px 15px;}
    .btxq_detail > div { background-color:#fff;border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;box-shadow:0px 2px 20px 0px rgba(0, 0, 0, 0.05);-webkit-box-shadow:0px 2px 20px 0px rgba(0, 0, 0, 0.05);-moz-box-shadow:0px 2px 20px 0px rgba(0, 0, 0, 0.05);height:335px;overflow:hidden;}
    .btxq_detail .top_box >.name{font-size:30px;color:#fff;font-weight:bold;padding-top:26px; }
    .btxq_detail .top_box> .text { font-size:18px;color:#fff;padding-top:14px;}
    .btxq_detail .top_one { background-color:#fd404b;}
    .btxq_detail .top_two { background-color:#6380FE;}
    .btxq_detail .top_three { background-color:#FF934B;}
    .btxq_detail .top_box { height:140px;overflow:hidden;text-align:center;}
    .btxq_detail .content { font-size:14px;color:#333;line-height:30px;padding:0px 33px;padding-top:20px;}

    /*社区拼团优势*/
    .ptys_box { width:1200px;margin:auto;}
    .ptys_content { font-size:0;padding-top:40px;padding-bottom:90px;}
    .ptys_content > p { text-align:center;display:inline-block;width:33%;text-align:center;}
    .ptys_content > p > img { display:block;width:140px;margin:auto;}
    .ptys_content > p > span { font-size:30px;color:#333;display:block;padding-top:10px;}

    /*拼团步骤*/
    .ptbz_box {width:955px;margin:auto;position:relative;padding-left:370px;padding-top:88px;padding-bottom:85px; }
    .ptbz_box > span { display:block;position:absolute;bottom:0px;left:0px;}
    .ptbz_box > .content > .name { font-size:32px;font-weight:bold;color:#333;padding-bottom:16px;}
    .ptbz_box > .content > .name>span{ color:#007EE9;}
    .ptbz_box > .content > .text { font-size:22px;color:#666;padding-top:28px;}


    /*多种功能组合*/
    .dzzh_box { width:1200px;margin:auto;font-size:0;padding-top:90px;}
    .dzzh_box > div { display:inline-block;width:50%;margin-bottom:100px;vertical-align:top;}
    .dzzh_box > .img { text-align:center;}
    .dzzh_content > .title { font-size:32px;color:#333;font-weight:bold;padding-bottom:15px;}
    .dzzh_content > .title > span { color:#007EE9;}
    .dzzh_content > .content > .name {display:block;font-size:24px;color:#444;font-weight:bold;padding-top:22px; }
    .dzzh_content > .content > .text {display:block;font-size:16px;color:#666;padding-top:9px; }
    .img_ctl { padding-top:30px;}
    .dzzh_box > .img > img { max-width:100%;}


     /*四大免费服务*/
    .sdfw_box { width:1200px;margin:auto;}
    .sdfw_box > .title { text-align:center;font-size:40px;font-weight:bold;color:#333;padding-top:75px;padding-bottom:22px;}
    .sdfw_box > .title > span { color:#007EE9;}
    .sdfw_content { position:relative;font-size:0;}
    .sdfw_content > p { font-size:32px;color:#333;text-align:center;display:inline-block;padding:0px 10px;margin-top:22px;width:50%;}
    .sdfw_content > p > span {height:131px;line-height:131px;display:block; }
    .sdfw_content > .p01>span { background:url(../image/index015.png) no-repeat;background-size:100%;}
    .sdfw_content > .p02>span { background:url(../image/index016.png) no-repeat;background-size:100%;}
    .sdfw_content > .p03>span { background:url(../image/index017.png) no-repeat;background-size:100%;}
    .sdfw_content > .p04>span { background:url(../image/index018.png) no-repeat;background-size:100%;}
    .sdfw_content > span { display:block;height:200px;width:200px;background-color:#007EE9;text-align:center;line-height:200px;font-size:32px;color:#fff;font-weight:bold;border-radius:100%;-webkit-border-radius:100%;-moz-border-radius:100%;position:absolute;left:50%;margin-left:-100px;top:50%;margin-top:-89px;}

    /*五大售后服务*/
    .shfw_box { width:1200px;margin:auto;margin-bottom:90px;}
    .shfw_box > p { font-size:40px;color:#333;font-weight:bold;padding-top:90px;text-align:center;padding-bottom:45px;}
    .shfw_content { font-size:0;}
    .shfw_content > .content { display:inline-block;width:20%;padding:0px 12px;}
    .shfw_content > .content > p {text-align:center;box-shadow:0px 2px 20px 0px rgba(0, 0, 0, 0.08);-webkit-box-shadow:0px 2px 20px 0px rgba(0, 0, 0, 0.08);-moz-box-shadow:0px 2px 20px 0px rgba(0, 0, 0, 0.08);border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;height:190px;padding-top:33px; }
    .shfw_content > .content > p > span { font-size:18px;color:#333;display:block;padding-top:10px;}

    /*底部*/
    .bottom_box { width:100%;height:400px;overflow:hidden;position:relative;}
    .bottom_box > p { position:absolute;height:400px;width:100%;top:0px;left:0px;}
    .bottom_box > p > img { display: block; text-align: center; position: absolute; left: 50%; margin-left: -960px; top: 0px; height: 400px; width: 1920px; }
    .bottom_box> .content { text-align:center;position:relative;z-index:2;}
    .bottom_box > .content > .title {font-size:20px;color:#fff;padding-top:20px; }
    .bottom_box > .content > .title > span { font-weight:bold;}
    .bottom_box > .content > .title i { color:#007EE9;}
    .bottom_box > .content > .text { font-size:16px;color:#fff;padding-top:10px;}
	.bottom_box > .content > .content {color: #fff;  font-size: 14px; margin: 5px;}
    .bottom_box > .content > .weixin { font-size:24px;color:#fff;height:60px;line-height:60px;padding:0px 19px;display:inline-block;background:url(../image/index024.png) no-repeat;background-size:100% 100%;margin-top:25px;}

    @media (max-width: 1200px) {
        .header_wrap,.sqpt_box , .pinpai_banner > .content { width:100%;padding:0px 20px;}
        .btxq_box,.ptys_box { width:100%;}
        .sqpt_box > .img { padding-right:20px;}
        .sqpt_content > .title { font-size:30px;}
        .sqpt_content > .text { font-size:20px;}
        .btxq_detail .top_box > .name { padding-top:15px;font-size:22px;}
        .btxq_detail .top_box { height:100px;}
        .sqpt_box { padding-bottom:95px;}
        .dzzh_box,.sdfw_box,.shfw_box { width:100%;}
        .dzzh_box > div { padding-left:20px;padding-right:20px;}
        .pt_img { padding-left:15px;padding-right:15px;}
        .sdfw_content > span { display:none;}
        .sdfw_content > .p02>span,.sdfw_content > .p01>span,.sdfw_content > .p03>span,.sdfw_content > .p04>span { background:none;border:1px solid #aaa;}
        .sdfw_content { padding-left:10px;padding-right:10px;}
     }
     @media (max-width:1000px) {    
        .nav_bar > a { padding:0px 10px;}
        .nav_bar > p { padding-left:10px;}
        .btxq_detail .top_box > .name { padding-top:15px;font-size:18px;}
        .btxq_detail .top_box { height:80px;}
        .btxq_detail .top_box > .text { font-size:16px;padding-top:5px;}
        .ptbz_box { width:100%;padding-right:20px;}
        .ptbz_box > span { left:20px;}
        .ptbz_box > .content > .name { font-size:26px;}
        .dzzh_content > .title ,.sdfw_box > .title,.shfw_box > p{ font-size:20px;}
        .dzzh_content > .content > .name { font-size:20px;}
        .shfw_content > .content { width:33.333%;margin-bottom:24px;}
        .bottom_box > p { display:none;}
        .bottom_box{ background:url(../image/index024.jpg ) no-repeat center center ;background-size:cover;height:auto;padding-bottom:40px;}
        .bottom_box > .content > .title { padding-top:40px;font-size:30px;}
     }
      @media (max-width:900px) {
        .pinpai_banner > .content > img { height:40px;margin-top:50px;}
        .pinpai_banner > .content > p { font-size:19px;}
        .pinpai_banner > .content > a>img { height:40px;}
        .pinpai_banner > .content > a { margin-top:45px;}
        .pinpai_banner,.pinpai_banner > p { height:240px;}
        .pinpai_banner > p > img{ width:1968px;height:287px;}
        .sqpt_content > .title { font-size:18px;}
        .sqpt_content > .text { font-size:16px;text-align: center;}
        .sqpt_content > .content { font-size:14px;text-align: center;}
        .btxq_detail { width:50%;margin-bottom:30px;}
        .ptys_content > p > img { width:115px;}
        .ptbz_box > span>img { width:220px; margin-right: 20px;}
        .ptbz_box { padding-left:280px;padding-top:50px;padding-bottom:40px;}
        .ptbz_box > .content > .name { font-size:20px;}
        .sdfw_box > .title { padding-top:50px; color: #007EE9;}
        .sdfw_content > p { font-size:20px;}
        .shfw_box,.dzzh_box > div { margin-bottom: 50px;}
        .shfw_box > p,.dzzh_box { padding-top:50px;}
     }
     @media (max-width:768px) {
        body { padding-top:0px;}
        .header_big_wrap { position:relative;}
        .w-nav-button { padding: 18px; font-size: 24px; display: block; cursor: pointer; height: 54px; width: 54px;position:absolute;top:13px;right:0px;z-index:20000; }
        .w-nav-button:focus { background:none;outline:none;}
        .bottom, .top { position: absolute; height: 2px; background-color:#000; }
        .top { top: 24px; display: block; width: 23px; margin-right: auto; margin-left: auto; transform-style: preserve-3d;-webkit-transform-style: preserve-3d; transition: transform 200ms, width 200ms;-webkit-transition: transform 200ms, width 200ms; width: 15px; transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px); }
        .bottom { top: 30px; width: 23px; transform-style: preserve-3d;-webkit-transform-style: preserve-3d; transition: transform 200ms;-webkit-transition: transform 200ms; transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
        .w-nav-button.active { position:fixed;}
        .w-nav-button.active .top { transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transition: transform 200ms, width 200ms; -webkit-transition: transform 200ms, width 200ms; width: 24px; transform: rotateX(0deg) rotateY(0deg) rotateZ(45deg) translateX(4px) translateY(5px) translateZ(0px); -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(45deg) translateX(4px) translateY(5px) translateZ(0px); background-color: #fff; }
        .w-nav-button.active .bottom { transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transition: transform 200ms; -webkit-transition: transform 200ms; transform: rotateX(0deg) rotateY(0deg) rotateZ(-45deg); -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(-45deg); background-color: #fff; }
        .nav_bar.active { transform: translateX(0px) translateY(0px);-webkit-transform: translateX(0px) translateY(0px);opacity:1;filter:Alpha(opacity=100);transition: transform 1000ms cubic-bezier(0.785, 0.135, 0.15, 0.86);-webkit-transition: transform 1000ms cubic-bezier(0.785, 0.135, 0.15, 0.86);}
        .nav_bar { position:fixed;top:0px;left:0px;width:100%;height:100vh;background-color:rgba(0,0,0,0.85);display:block;z-index:100;float:none;padding-top:20px;transform: translateX(-100%) translateY(0px);-webkit-transform: translateX(-100%) translateY(0px);filter:Alpha(opacity=0);font-size:0px;}   
        .nav_bar > a { display:block;text-align:center;width:100%;position:relative;z-index:1001;}
        .nav_bar > a > span { color:#fff;}     
        .nav_bar > a.active > span { color:#007EE9;border-bottom:none;}      
        .nav_bar > a { height:60px;line-height:60px;padding:0px;}
        .nav_bar > a > span { border:none;padding-bottom:0px;}
        .nav_bar > a.active > span:after { display:none;}
        /*导航动画*/
         .nav_bar>a, .nav_bar>p {  opacity: 0;transform: translate(0, 100%);}        
         .nav_bar.active > p {transition:all 300ms ease 1000ms; }
         .nav_bar.active>a , .nav_bar.active>p{transform: matrix(1, 0, 0, 1, 0, 0);opacity:1; }
         .nav_bar.active > a:nth-of-type(1){transition:all 300ms ease 500ms; }
         .nav_bar.active > a:nth-of-type(2){transition:all 300ms ease 600ms; }
         .nav_bar.active > a:nth-of-type(3){transition:all 300ms ease 700ms; }
         .nav_bar.active > a:nth-of-type(4){transition:all 300ms ease 800ms; }
         .nav_bar.active > a:nth-of-type(5){transition:all 300ms ease 900ms; }
         .nav_bar.active > p { width:100%;padding-top: 20px;}
         .nav_bar > p > a { display:block;width:268px;margin:auto;background-color:#007EE9;}
         .nav_bar > p > a > span { color:#fff;}
         .nav_bar > p > a.active {margin-left:0px;background-color:transparent;margin:auto;margin-top:20px; }
         .nav_bar > p > a.active > span { color:#007EE9;}

        .sqpt_box > .img { padding-right:0px;width:100%;padding-top:50px;}
        .sqpt_content { width:100%;}
        .sqpt_content > .title { padding-top:30px; text-align: center;}
		.sqpt_content > .content{display:none;}
        .sqpt_box { padding-bottom:50px;}
        .btxq_detail { width:100%;margin-bottom:30px;}
        .btxq_detail > div { height:auto;padding-bottom:20px;}
        .common_title > .title { font-size:18px;padding-bottom:5px;padding-top:50px;}
        .btxq_box { padding-bottom:30px;}
        .ptys_content { padding-bottom:20px;}
        .ptys_content > p > span { font-size:20px;}
        .ptys_content > p { width:33%;margin-bottom:40px;}
        .common_title > .name { font-size:14px;}
        .ptys_content > p > img { width:50%;}
        .ptbz_box > span { position:relative;margin-bottom:20px;text-align: center;}
        .ptbz_box { padding-left:0px;}
        .ptbz_box > .content { padding-left:20px;}
        .ptbz_box > .content > .text { font-size:18px;padding-top:20px;}
        .dzzh_box > div { width:100%;}
        .sdfw_content > p { width:50%;font-size:18px;}
        .sdfw_content > p > span { height:70px;line-height:70px;}
        .shfw_content > .content { width:33%;}
		.shfw_content > .content img { width: 50%;}
        .shfw_content > .content > p > span { font-size:14px;margin: 5px;}
        .shfw_content > .content > p { padding-top:20px;height:auto;padding-bottom:20px;}
        .bottom_box { padding-left:15px;padding-right:15px;}
        .bottom_box > .content > .title { font-size:18px;padding-top:30px;text-align:center;}
        .bottom_box > .content > .text { font-size:14px;padding-top:10px;text-align:center;}
		.bottom_box > .content > .content{font-size:12px;text-align:center;color: white; padding: 10px;}
        .bottom_box > .content > .weixin { font-size:16px;min-width:205px;height:45px;line-height:45px;}
        .btxq_detail { padding:0px 20px;}
        .shfw_content { padding-left:8px;padding-right:8px;}
        .dzzh_content > .content > .name { font-size:14px;}
		.dzzh_content > .content > .text { font-size:14px;}
        .pinpai_banner > .content > img { height:35px;}
		.dzzh_content > .title{ color: #007EE9;text-align: center;}
		.dzzh_content > .text {  font-size: 16px; text-align: center; }
		.sdfw_content > .p02>span, .sdfw_content > .p01>span, .sdfw_content > .p03>span, .sdfw_content > .p04>span{ border: initial;  font-size: 14px;  box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.08);  -webkit-box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.08);}
		.dzzh_box > .img > img{max-width: 80%;}
		.sdfw_box > .text { text-align: center;font-size: 16px;}
		
		}
     }
    









