@import 'base_pc';
@import 'footer';
$themeColor: #1994FC;

body { background: #F5F5F5;font-family: 'Microsoft YaHei', Arial;}

header {
    .header-tip {
        padding: 14px 0 15px;
        line-height: 1;
        font-size: 14px;
        color: #999;
        border-bottom: 1px solid #eee;
        display: none;
        h1, h2{
            font-size: 14px;
        }
    }
    .header-content {
        background: #fff;
        width: 100%;
        border-bottom: 1px solid #e2e2e2;
        .wrap {
            display: flex;
            justify-content: space-between;
            padding: 0 8px;
        }
        .logo { 
            height: 75px;
            display: flex;
            align-items: center;
            .img {
                width: 130px;
                height: 42px;
            }
            .text {
                font-size: 14px;
                margin-left: 10px;
                color: #666;
                font-weight: normal;
                white-space: nowrap;
                font-family: SimSun;
                line-height: 1;
                p + p { margin-top: 6px; }
            }
        }
        .nav {
            display: flex;
            font-size: 16px;
            line-height: 70px;
            a { 
                display: inline-block;
                width: 66px;
                text-align: center;
                color: #000;
                position: relative;
            }
            li{
                padding-right: 55px;
                &.active a,&:hover a, { 
                    color: $themeColor; 
                    //新增
                     &:after {
                       content: '';
                        display: block;
                        width: 44px;
                        height: 4px;
                        background: #177BE3;
                        border-radius: 2px;
                        position: absolute;
                        left: 25%;
                        bottom: 15px;
                        margin-left: -4px;
                        z-index: 1;
                    }
                    //结束
                }
            }
        }
    }
}

.section-4{
    margin-top: -3px;
}

.banner {
    width: 100%;
    height: 490px;
    background: url("../images/banner-bg.png")no-repeat center;
    background-size: 100% 100%;
    margin-top: 76px;
//  margin: 114px 0 60px;
//  .wrap {
//      display: flex;
//      justify-content: center;
//      .img { width: 233px; }
//      .banner-content {
//          margin-left: 125px;
//          width: 405px;
//          padding-top: 35px;
//          .banner-btn {
//              width: 290px;
//              margin-top: 35px;
//              height: 76px;
//              line-height: 76px;
//              background: #ffed26;
//              border-radius: 38px;
//              color: #5c4038;
//              font-size: 30px;
//              text-align: center;
//          }
//          .download {
//              margin-top: 28px;
//              display: flex;
//              .down-btns {
//                  width: 217px;
//                  margin-right: 38px;
//                  .btn { 
//                      display: block; 
//                      border-radius: 8px;
//                      border: 1px solid #fff;
//                      height: 50px;
//                      line-height: 48px;
//                      font-size: 18px;
//                      padding-left: 74px;
//                      color: #fff;
//                      &.android-btn {
//                          background: url("../images/icon-android.png")no-repeat 21px center;
//                          background-size: 32px auto;
//                      }
//                      &.ios-btn {
//                          background: url("../images/icon-ios.png")no-repeat 21px center;
//                          background-size: 29px auto;
//                      }
//                  }
//                  .btn + .btn {
//                      margin-top: 18px;
//                  }
//              }
//              .down-code {
//                  width: 120px;
//                  height: 120px;
//                  border: 2px solid #fff;
//                  border-radius: 5px;
//                  padding: 8px;
//              }
//          }
//      }
//  }
}

section {
    .sec-head {
        background: #f8f8f8;
        padding: 37px 0 32px;
        font-size: 32px;
        text-align: center;
        color: #363635;
        line-height: 1;
        border-bottom: 1px solid #dcdcdc;
        .sec-head-tip {
            font-size: 16px;
            color: #abaaaa;
            margin-top: 10px;
        }
    }
    .sec-body {
        background: #fff;
        padding: 80px 0;
        .sec-items {
            display: flex;
            justify-content: center;
        }
    }
    &.section-1 .sec-body {
        color: #333333;
        text-align: center;
        .sec-msg {
            font-size: 26px;
            line-height: 1;
            .sec-msg-text{
                font-size: 18px;
                margin-top: 20px;
            }
            .text-h4{
                margin-top: 20px;
            }
            p {
                margin-bottom: 25px;
                &:last-of-type { margin-bottom: 0; }
            }
            span { color: $themeColor; }
        }
        .sec-items {
            width: 860px;
            align-items: center;
            margin: 110px auto 0;
            .item {
                flex: 0 0 auto;
                font-size: 16px;
                .img {
                    width: 130px;
                    height: 130px;
                    margin-bottom: 32px;
                    border: 1px solid $themeColor;
                    border-radius: 50%;
                    padding: 8px;
                }
            }
            .line {
                width: 50%;
                height: 2px;
                background: #ff9564;
                position: relative;
                margin-top: -48px;
                &:before {
                    content: '';
                    display: block;
                    width: 16px;
                    height: 16px;
                    background: #ff9564;
                    border-radius: 50%;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    z-index: 1;
                    margin-top: -8px;
                    margin-left: -8px;
                }
            }
           
        }
    }
     .app-item{
                width: 1200px;
                .app-img{
                    width: 100%;
                    background-size: 100%;
                }
            }
    &.section-2 .sec-body, &.section-3 .sec-body {
        .sec-items {
            .item {
                width: 235px;
                & + .item { margin-left: 140px; }
                .img { width: 132px; margin: 0 auto 40px; }
                .msg {
                    font-size: 16px;
                    color: #666666;
                    line-height: 1.8;
                    h5 {
                        color: #000000;
                        font-size: 20px;
                        text-align: center;
                        margin-bottom: 30px;
                        line-height: 1;
                    }
                }
            }
        }
    }
    &.section-3 .sec-body {
        padding-bottom: 180px;
        background: #fff url("../images/bg-1.png")no-repeat center bottom;
        background-size: 100% 632px;
        .sec-items{
            position: relative;
            &:before {
                content: '';
                display: block;
                border-bottom: 2px dashed $themeColor;
                width: 830px;
                position: absolute;
                top: 65px;
                left: 50%;
                z-index: 0;
                margin-left: -415px;
            }
            .item {
                .img { background: #fff; position: relative;z-index: 1;}
                .msg { font-size: 16px; color: #333333; }
            } 

        } 
    }
    &.section-4 .sec-body {
        position: relative;
        background: #f9f9f9;
        padding: 0;
        .sec-msg {
            height: 310px;
            position: relative;
            &:before {
                content: '';
                display: block;
                width: 65px;
                height: 33px;
                background: url("../images/icon-s.png")no-repeat;
                background-size: 100% 100%;
                position: absolute;
                top: 0;
                left: 50%;
                z-index: 1;
                margin-left: -32.5px;

            }
            .wrap { height: 100%; }
            .person {
                display: none;
                justify-content: center;
                padding-top: 65px;
                &.active { display: flex; }
                .img {
                    width: 180px;
                    margin-right: 60px;
                    box-shadow: 0px 3px 21px 0px rgba(126, 126, 126, 0.35);
                    border-radius: 50%;
                    overflow: hidden;
                }
                .msg {
                    width: 450px;
                    padding-top: 15px;
                    font-size: 14px;
                    color: #666666;
                    line-height: 1.8;
                    h5 {
                        line-height: 1;
                        font-size: 16px;
                        color: #111111;
                        margin-bottom: 17px;
                    }
                }
            }
        }
        .sec-roles {
            position: relative;
            z-index: 1;
            height: 310px;
            background: #fff;
            &:after {
                content: '';
                width: 100%;
                height: 105%;
                background: url("../images/bg-2.png") no-repeat center center;
                background-size: auto 100%;
                position: absolute;
                top: 20px;
                left: 0;
                z-index: 0;
            }
            .wrap { height: 100%; }
            .items {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: space-around;
                .item {
                    position: relative;
                    cursor: pointer;
                    .img {
                        width: 120px;
                        height: 120px;
                        border-radius: 50%;
                        overflow: hidden;
                        position: relative;
                        &:after {
                            content: '';
                            display: block;
                            width: 100%;
                            height: 100%;
                            background: rgba(255,255,255,0.4);
                            position: absolute;
                            top: 0;
                            left: 0;
                            z-index: 1;
                        }
                    }
                    p {
                        display: none;
                        position: absolute;
                        left: 50%;
                        bottom: -80px;
                        z-index: 1;
                        font-size: 16px;
                        color: #333333;
                        white-space: nowrap;
                        transform: translate(-50%, 0);
                    }
                    &.active {
                        margin-top: -40px;
                        @keyframes myscale {
                            from {
                                transform: scale(1);
                            }
                            to {
                                transform: scale(1.5);
                            }
                        }
                        .img {
                            animation: myscale 450ms ease-out forwards;
                            transform-origin: center center;
                            &:after { display: none; }
                            box-shadow: 1px 1px 3px 3px #eee;
                        }
                        p { display: block; }
                    }
                }
            }
        }
    }
}
     .section-5 {
//       display: none;
//       margin-top: 70px;
        .sec-head{
            background: #F5F5F5;
            .wrap{
                background: #fff;
             .consultation-ul{
                 .consultation-li{
                        padding: 30px 30px;
                        border-bottom: 1px solid #EEEEEE;
                        overflow: hidden;
                        display: flex;
                        justify-content: center;
                    .consultation{
                        overflow: hidden;
//                      display: flex;
//                      justify-content: center;
                        .consultation-left{
                            float: left;
                            width: 380px;
//                          height: 210px;
//                          background: red;
                            color: red;
//                          margin-left: 100px;
                            img{
                                display: block;
                                width: 100%;
                                background-size: 100%;
                            }
                        }
                        .consultation-right{
                            float: left;
//                          width: 500px;
                            width: 720px;
                            margin-left: 39px;
                            text-align: left;
                            padding: 24px 0 0 0;
                            .title{
                                font-size: 24px;
                                color: #000000;
                            }
                            .text-content{
                                color: #666666;
                                font-size: 18px;
                                text-align: justify;
                                margin: 25px 0 27px 0;
                                line-height: 27px;
                                
                            }
                            .time{
                                color: #999999;
                                font-size: 18px;
                            }
                        }
                    }          
                 }
             }
             }
        } 
       
    }
    .set{
        width: 100%;
//      background: #F5F5F5;
        .sec-head{
            background: #F5F5F5;
            padding: 0;
            .wrap{
                background: #FFFFFF;
                .details{
                    text-align: center;
                    padding-top: 37px;
                    margin:97px 0 20px 0;
//                  .tips{
//                      color: #666666;
//                      font-size: 18px;
//                  }
                    .details-title{
                        color: #000000;
                        font-size: 36px;   
                        margin-bottom: 42px; 
                    }
                    .details-method{
                        width: 550px;
                        color: #666666;
                        font-size: 18px;
                        text-align: justify;
                        line-height: 27px;
                        margin: 20px auto; 
                        padding-bottom: 20px;
                        p{
                            margin-top: 10px;
                        }
                    }
                    .content-fximg{
                        width: 725px;
                        margin: 0 auto;
                        margin-bottom: 20px;
                        img{
                            width: 100%;
                            background-size: 100%;
                        }
                    }
                    .details-method-bottom{
                        padding-bottom: 10px;
                    }
                    .details-content{
        //              display: flex;
//                      justify-content: center;
                        overflow: hidden;
                        .content-item{
                             margin-left: 220px;
                             float: left;
                            .content-img{
                                margin-bottom: 30px;
                                img{
                                    width: 330px;
                                    height: 504px;
                                    background-size: 100%;
                                    display: block;
                                }   
                            }
                            .content-msg{
                                width: 314px;
                                height: 130px;
                                color: #666666;
                                font-size: 18px;
                                text-align: justify;
                                line-height: 27px;
                                margin: 20px 16px 0 0;
                                p{
                                    margin-top: 10px;
                                }
                            }
                          
                        }
                        .second{
                            margin-left: 100px;
                        }
                    }
                }
             }
         }
    }
