@import './reset.less';
@import './banner.less';
@import './tab.less';

.banner-service {
    // background: url(../imgs/chip-banner.jpg);
}

.banner-design {
    // background: url(../imgs/chip-banner-2.jpg);
}

.banner-quantity {
    // background: url(../imgs/chip-banner-3.jpg);
}

.chip-title {
    font-weight: bold;
    font-size: 30px;
    color: #343434;
    line-height: 40px;
}

.chip-p {
    font-weight: 400;
    font-size: 20px;
    color: #808080;
    line-height: 40px;
    margin-top: 20px;
}
.clear{ margin:0; padding:0; font-size:0; clear:both; }
.plan {
    padding-top: 67px;
    &-p {
        padding-bottom: 67px;
    }
}

.main-area .list .txt{ font-size:14px; line-height:2em; color:#999; margin-top:15px;}
.main-area .list .more1{ margin-top:20px;}
.main-area .list2{ margin-top:30px;}
.main-area .list2 ul li{ float:left; width:calc((100% - 30px)/3); margin:0 15px 15px 0;}
.main-area .list2 ul li:nth-child(3n){ margin-right:0;}
.main-area .list2 ul li .txt{ border:1px solid #d9d9d9; border-radius:10px; padding:25px 6px;}
.main-area .list2 ul li .txt .h2{ font-size:18px; line-height:28px; color:#c61e26; margin-bottom:20px;}
.main-area .list2 ul li .txt dl dd{ float:left; width:100%; font-size:14px; line-height:24px; margin-top:5px;}
.main-area .list2 ul li .txt dl{ height:212px;}
/*.fxfw1 .box2-1 .list2 ul li.li2 .txt dl dd,.fxfw1 .box2-1 .list2 ul li.li3 .txt dl dd{ width:50%;}*/
.main-area .list2 ul li .txt dl{ height:261px;}
/*.fxfw1 .box2-3 .list2 ul li.li2 .txt dl dd,.fxfw1 .box2-3 .list2 ul li.li3 .txt dl dd,.fxfw1 .box2-3 .list2 ul li.li4 .txt dl dd{ width:50%;}*/
.main-area .list2 ul li .txt dl{ height:232px;}
@media(max-width:768px){
.main-area .list2 ul li{ float:left; width:100%; margin:0 0 15px 0;}
.main-area .list2 ul li .txt{ padding:25px 5%;}
.main-area .list2 ul li .txt dl{ height:auto !important;}
.main-area .list2 ul li .txt dl dd{ float:left; width:100% !important;}
}
.shadow-blue {
    width: 100%;
    height: 840px;
    background: url(../imgs/chip-client-bg-1.png);
}

.client {
    padding-top: 40px;
    padding-bottom: 80px;
    text-align: center;


    .chip-client {
        // width: 988px;
        // height: 529px;
        // background: url(../imgs/chip-client-bg.png);
        // background-size: contain;
        // background-repeat: no-repeat;
        width: 1194px;
        height: 665px;
        margin: 0 auto;


        // position: relative;

        // .chip-client-img {
        //     position: absolute;
        //     right: -5.5%;
        //     bottom: -1%;
        //     width: auto;
        //     height: 100%;
        // }
    }
}

.chip-subtitle {
    padding-top: 20px;
    padding-bottom: 30px;
    font-weight: 400;
    font-size: 20px;
    color: #343434;
    line-height: 40px;
}

.design {
    padding: 62px 0 61px;

    .up {
        display: flex;
        justify-content: space-between;
        padding-bottom: 47px;

        .left {
            width: 700px;
        }

        .right {
            flex: 0 0 auto;
            padding-right: 31px;

            .pic {
                width: 591px;
                height: 309px;
                background: url(../imgs/chip-design.png);
            }
        }
    }

    .down {
        display: flex;
        flex-flow: row wrap;

        .flow-item {
            flex: 0 0 auto;
            width: 142px;
            height: 159px;
            background: #FFFFFF;
            border-radius: 7px 7px 7px 7px;
            border: 1px solid #D8D8D8;
            text-align: center;
            padding: 0 16px;
            position: relative;
            margin-bottom: 12px;

            .arrow {
                position: absolute;
                right: -14px;
                top: 50%;
                transform: translateY(-50%);
                width: 14px;
                height: 30px;
                background: url(../imgs/chip-arrow.png);
            }

            &:not(:last-of-type) {
                margin-right: 18px;
            }

            .flow-icon {
                width: 40px;
                height: 40px;
                margin-top: 36px;
            }

            .flow-txt {
                font-weight: bold;
                font-size: 20px;
                color: #343434;
                line-height: 1.5;
                text-align: center;
                vertical-align: middle;
                padding-top: 6px;
            }

            .flow-icon-56 {
                width: 56px;
                height: 56px;
                margin-top: 20px;
            }
        }
    }
}

.method {
    display: flex;
    justify-content: space-between;
    padding: 98px 0 86px;

    .left {
        flex: 0 0 auto;
        width: 810px;

        // height: 403px;
        // background: url(../imgs/chip-method.png);
        img {
            width: 100%;
            height: auto;
        }
    }

    .right {
        width: 553px;

        .chip-title {
            text-align: right;
            padding-right: 15px;
        }

        ul,
        li {
            list-style: disc;
            margin-left: 5px;
        }
    }
}

.ip {
    display: flex;
    justify-content: space-between;
    padding: 88px 0 82px;

    .left {
        width: 700px;

        p:not(:first-of-type) {
            margin-top: 18px;
        }
    }

    .right {
        flex: 0 0 auto;
        width: 620px;

        img {
            height: auto;
        }

        // height: 341px;
        // background: url(../imgs/chip-ip.png);
    }
}

.feature {
    padding: 65px 89px 99px 73px;


    .chip-title {
        text-align: center;
        margin-bottom: 70px;
    }

    .feature-box {
        display: flex;
        justify-content: space-between;
    }

    .menu-li {
        width: 281px;
        height: 70px;
        background: #fff;
        font-weight: 400;
        font-size: 20px;
        color: #808080;
        line-height: 26px;
        text-align: center;
        padding: 22px 0;

        &:hover {
            cursor: pointer;
            opacity: .75;
        }
    }

    .menu-li-active {
        background: #3C4854;
        color: #fff;
        position: relative;

        .arrow {
            position: absolute;
            right: -10px;
            top: 50%;
            transform: translateY(-50%);
            background: url(../imgs/chip-arrow.png);
            width: 14px;
            height: 30px;
        }
    }

    .content {
        background: #fff;
        padding: 33px;
        display: flex;
        justify-content: space-between;
        width: 917px;

        .left {
            width: 364px;
            font-weight: 400;
            font-size: 20px;
            color: #808080;
            line-height: 30px;
            overflow: hidden;

            .title {
                font-weight: bold;
                font-size: 20px;
                color: #343434;
                line-height: 30px;
            }

            .txt {
                font-weight: 400;
                font-size: 20px;
                color: #808080;
                line-height: 30px;
                margin-top: 11px;
            }
        }

        .right {
            padding-right: 9px;

            .pic {
                width: 425px;
                height: 210px;

                // background: url(../imgs/chip-feature.png);
                img {
                    width: 100%;
                }
            }
        }
    }
}

.plat-form {
    background: url(../imgs/chip-platform.png);
    width: 100%;
    height: 800px;
    background-repeat: no-repeat;
    background-position: left -44px;
    overflow: hidden;

    .chip-title {
        margin-bottom: 20px;
        margin-top: 67px;
    }
}

.plat-box {
    display: flex;
    justify-content: space-between;

    .plat-txt {
        width: 669px;
        font-weight: 400;
        font-size: 20px;
        color: #343434;
        line-height: 40px;
    }
}

.partner {
    .partner-imgs {
        img {
            width: 220px;
            height: auto;
            margin-left: 20px;
        }
    }

    .partner-txt {
        text-align: center;
        font-weight: 400;
        font-size: 20px;
        color: #343434;
        line-height: 40px;
    }
}

.platform-pic {
    text-align: center;
    padding-top: 17px;

    img {
        width: 593px;
        height: auto;
    }
}

.advantage {
    padding-top: 53px;
    padding-bottom: 86px;

    .chip-title {
        text-align: center;
    }

    .ad-list {
        padding-top: 31px;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        // padding-left: 156px;
        // padding-right: 216px;
        padding: 0 170px;

        .ad-it {
            margin: 20px 0 21px;
            width: 400px;
            display: flex;

            &:nth-of-type(odd) {
                margin-right: 10px;
            }

            .ad-icon {
                width: 94px;
                height: auto;
            }

            .ad-txt {
                line-height: 94px;
                padding-left: 10px;
            }
        }
    }
}

.quantity {
    display: flex;
    padding-top: 67px;
    padding-bottom: 67px;
    justify-content: space-between;

    .left {
        width: 700px;
    }

    .right {
        width: 603px;

        img {
            width: 100%;
            height: auto;
        }
    }
}

.flow {
    text-align: center;
    padding-top: 53px;
    padding-bottom: 64px;

    .flow-box {
        display: flex;
        justify-content: space-between;
        padding-top: 31px;

        .left {
            width: 1400px;

            .img-box {
                width: 100%;

                img {
                    width:1400px;
                    height: auto;
                    vertical-align: middle;
                }
            }
        }

        .right {
            width: 633px;

            .img-box {
                width: 100%;
                margin-bottom: 20px;

                img {
                    width: 100%;
                    height: auto;
                    vertical-align: middle;
                }
            }
        }


    }
}

.txt-box {
    font-weight: 400;
    font-size: 20px;
    color: #343434;
    line-height: 40px;
    text-align: center;
}

.test {
    padding-top: 72px;
    padding-bottom: 57px;

    .up {
        display: flex;

        .left {
            width: 700px;
        }

        .right {
            overflow: hidden;

            .img-box {
                img {
                    width: 330px;
                    height: auto;
                    vertical-align: middle;
                    margin: 0 13px;
                }

                margin-bottom: 27px;
            }
        }
    }

    .down {
        overflow: hidden;

        .img-box {
            margin-bottom: 38px;
            margin-top: 62px;

            img {
                width: 1400px;
                height: auto;
                vertical-align: middle;
            }
        }
    }
}


// @media screen and (max-width: 1400px) {
//     .method {
//         display: block;
//         padding-top: 58px;
//         overflow: hidden;

//         .left {
//             margin: 0 auto 20px;
//         }

//         .right {
//             width: 100%;
//             padding: 0 5%;

//             .chip-title {
//                 text-align: center;
//             }
//         }
//     }
// }

// @media screen and (max-width: 1240px) {
//     .feature {
//         padding: 65px 0 99px;

//         .feature-box {
//             .content {
//                 padding: 33px 0 33px 9px;
//             }
//         }
//     }
// }

// @media screen and (max-width: 1180px) {
//     .feature {

//         .feature-box {
//             flex-flow: column wrap;
//             justify-content: flex-start;

//             .menu {
//                 display: flex;
//                 margin-bottom: 1px;

//                 .menu-li {
//                     width: 25%;
//                 }

//                 .menu-li-active {
//                     .arrow {
//                         position: absolute;
//                         left: 50%;
//                         top: 60px;
//                         transform: translateX(-50%) rotate(90deg);
//                     }
//                 }
//             }

//             .content {
//                 width: 100%;
//                 padding: 33px 2% 33px;
//             }
//         }
//     }

// }

// @media screen and (max-width: 1000px) {
//     .client {
//         padding-bottom: 0px;

//         .chip-client {
//             width: 100%;
//         }
//     }
// }

@media screen and (max-width: 860px) {
    .plan {
        padding-left:5px;padding-right: 20px;
		padding-bottom: 30px; padding-top: 30px;
        margin: 0 auto;
        width: 90%;
    }

    .plan-p {
        padding-bottom: 0;
    }

    .shadow-blue {
        height: auto;
    }

    .client {
        padding: 20px 0 40px;

        .chip-client {
            width: 90%;
            height: auto;
            margin: 0 auto;

            img {
                height: auto;
            }
        }
    }

    .chip-subtitle {
        font-size: 12px;
        font-weight: normal;
        line-height: 1.5;
        padding: 5px 0 10px;
    }

    .chip-p {
        margin-top: 0px;
        font-size: 16px;
        line-height: 2;
    }

    .design {
        padding: 30px 0;
        overflow: hidden;

        .up {
            display: block;
            width: 90%;
            margin: 0 auto;

            .left {
                width: 100%;
                overflow: hidden;


            }

            .right {
                padding: 10px 0 0;

                .pic {
                    width: 100%;
                }
            }
        }

        .down {
            width: 90%;
            margin: 0 auto;
        }
    }

    .method {
        padding: 30px 5%;
        display: block;

        .left {
            width: 100%;
        }

        .right {
            width: 100%;
            padding-top: 20px;

            .chip-title {
                text-align: center;
            }
        }
    }

    .ip {
        display: block;
        padding: 30px 5%;

        .left {
            width: 100%;
            padding-bottom: 10px;

            p {
                &:not(:first-of-type) {
                    margin-top: 8px;
                }
            }
        }

        .right {
            width: 100%;
        }
    }

    .feature {
        padding: 30px 5%;
        display: block;

        .chip-title {
            margin-bottom: 20px;
        }

        .feature-box {
            display: block;

            .menu {
                display: flex;
                margin-bottom: 1px;

                .menu-li {
                    width: 25%;
                    font-size: 16px;
                    height: auto;
                    padding: 12px 0;
                }

                .menu-li-active {
                    .arrow {
                        position: absolute;
                        left: 50%;
                        top: 40px;
                        transform: translateX(-50%) rotate(90deg)scale(0.9);
                    }
                }
            }

            .content {
                width: 100%;
                display: block;
                padding: 20px 10px;

                .left {
                    width: 100%;
                    padding-bottom: 20px;

                    .txt {
                        font-size: 16px;
                        line-height: 2;
                    }
                }

                .right {
                    .pic {
                        width: 100%;
                        height: auto;

                        img {
                            height: auto;
                        }
                    }
                }
            }
        }
    }

    .chip-title {
        font-size: 20px;
        line-height: 2;
    }

    .plat-form {
        height: auto;

        .chip-title {
            text-align: center;
            margin-top: 30px;
        }
    }

    .plat-box {
        display: block;
        padding: 0 5%;

        .plat-txt {
            font-size: 16px;
            line-height: 2;
            width: 100%;
            padding-bottom: 10px;
        }

        .partner {
            img {
                width: 32%;
                margin: 0;
            }

            .partner-txt {
                font-size: 16px;
                line-height: 2;
            }
        }
    }

    .platform-pic {
        padding: 17px 5% 0;

        img {
            width: 100%;
        }
    }

    .advantage {
        padding: 30px 5%;

        .ad-list {
            padding: 0;
            display: block;

            .ad-it {
                margin: 0 0 10px;
                width: 100%;
                display: block;

                .ad-icon {
                    width: 50px;
                    vertical-align: middle;
                }

                .ad-txt {
                    display: inline-block;
                    width: calc(100% - 60px);
                    line-height: 50px;
                    font-size: 14px;
                }
            }

            .ad-it:nth-of-type(odd) {
                margin: 0 0 10px;
            }
        }
    }

    .quantity {
        padding: 30px 5%;
        display: block;

        .left,
        .right {
            width: 100%;
        }

        .right {
            padding-top: 10px;
        }
    }

    .flow {
        padding: 30px 5%;
        display: block;

        .flow-box {
            display: block;
            padding-top: 10px;
			padding-left:10px;padding-right: 25px;
		padding-bottom: 30px; padding-top: 30px;

            .left {
                width: 100%;

                .img-box {
                    img {
                        width: calc(99% - 5px);
                                        }
                }
            }

            .right {
                width: 100%;
                padding-top: 10px;

                .img-box {
                    margin-bottom: 5px;
                }
            }
        }
    }

    .test {
        padding: 30px 5%;

        .up {
            display: block;

            .left {
                width: 100%;
            }

            .right {
                padding-top: 10px;

                .img-box {
                    margin-bottom: 5px;

                    img {
                        width: calc(49% - 5px);
                        margin: 0 5px 0 0;
                    }
                }
            }
        }

        .down {
            .img-box {
                margin: 30px 0 10px;

                img {
                    width: 100%;
                }
            }

        }
    }

    .txt-box {
        font-size: 16px;
        line-height: 2;
    }
}