* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul {
    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #555;
    font-family: 'Microsoft YaHei', 'simhei', 'Open Sans', sans-serif;
}

.header {
    background: url("../../Images/trc_images/homebg.jpg") center 0 no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 405px;
    position: relative;
}

.left {
    width: 368px;
    height: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-105%, -50%);
}

.right {
    width: 490px;
    position: absolute;
    right: 50%;
    top: 50%;
    transform: translate(105%, -50%);
}

.title {
    text-align: center;
}

.hrefdemo {
    float: left;
    width: 190px;
    margin: 25px 25px;
    height: 56px;
    background: rgb(75, 217, 175);
    border-radius: 30px;
    text-align: center;
}

.hrefdemo1 {
    float: left;
    width: 190px;
    margin-left: 25px;
    height: 46px;
    background: rgb(75, 217, 175);
    border-radius: 30px;
    text-align: center;
    color: white;
}

.hrefdemo2 {
    float: left;
    margin-top: 55px;
    margin-bottom: 30px;
    color: white;
}

.main {
    width: 100%;
}

.kuan {
    width: 100%;
    margin: 0px auto;
    min-width: 1200px;
}

.bgf5 {
    background-color: #f0f0f0;
}

.pro_jishao {
    width: 1200px;
    margin: 0px auto;
    padding: 50px 0;
}

    .pro_jishao h2 {
        font-size: 42px;
        width: 100%;
        font-weight: normal;
        text-align: center;
        line-height: 80px;
    }

    .pro_jishao strong {
        font-size: 16px;
        font-weight: normal;
        width: 100%;
        float: left;
        padding: 20px 0 34px 0;
        text-align: center;
    }

    .pro_jishao ul {
        width: 100%;
        padding-top: 20px;
        float: left;
        padding-left: 0px;
    }

        .pro_jishao ul li {
            width: 258px;
            float: left;
            height: 380px;
            margin: 0 14px;
            text-align: center;
            box-sizing: border-box;
            padding: 30px;
        }

    .pro_jishao > ul > li:first-child {
        background-color: #f3f9ff;
    }

    .pro_jishao > ul > li:nth-child(2) {
        background-color: #f1fffc;
    }

    .pro_jishao > ul > li:nth-child(3) {
        background-color: #fffff6;
    }

    .pro_jishao > ul > li:nth-child(4) {
        background-color: #fff6f6;
    }

    .pro_jishao > ul > li:hover {
        background-color: rgba(28, 175, 245, 0.8) !important;
    }

    .pro_jishao ul li h3 {
        font-size: 16px;
        font-weight: normal;
        margin-top: 15px;
    }

    .pro_jishao ul li p {
        font-size: 14px;
        color: #666;
        line-height: 28px;
        text-align: left;
        margin-top: 10px;
    }

    .pro_jishao ul li .in_ico1 {
        background: url("../../Images/trc_images/js_ico.png") -80px 0 no-repeat;
        width: 80px;
        height: 70px;
        margin: 0 auto;
    }

    .pro_jishao ul li .in_ico2 {
        background: url("../../Images/trc_images/js_ico.png") -80px -70px no-repeat;
        width: 80px;
        height: 70px;
        margin: 0 auto;
    }

    .pro_jishao ul li .in_ico3 {
        background: url("../../Images/trc_images/js_ico.png") -80px -140px no-repeat;
        width: 80px;
        height: 70px;
        margin: 0 auto;
    }

    .pro_jishao ul li .in_ico4 {
        background: url("../../Images/trc_images/js_ico.png") -80px -210px no-repeat;
        width: 80px;
        height: 70px;
        margin: 0 auto;
    }

.clear {
    clear: both;
    overflow: hidden;
}

.screen {
    min-height: 100px;
    width: 1200px;
    margin: auto;
    overflow: hidden;
}

    .screen .s2-title {
        padding-top: 90px;
        text-align: center;
    }

    .screen .s2-title-line {
        width: 490px;
        margin: auto;
        margin-top: 30px;
    }

.screen-title-line {
    border-top: solid 1px #d5dfe7;
    padding: 30px 0 0 0;
}

.screen .screen-description .s2-desc {
    text-align: center;
    font-size: 14px;
}

.screen .screen-description p {
    color: #87959d;
    line-height: 24px;
    font-size: 14px;
}

.screen .s2-icon {
    overflow: hidden;
    padding-top: 72px;
}

    .screen .s2-icon .list {
        float: left;
        width: 300px;
    }

        .screen .s2-icon .list .icon {
            text-align: center;
            height: 200px;
            width: 300px;
            position: relative;
        }

            .screen .s2-icon .list .icon img:hover {
                width: 210px !important;
                height: 210px !important;
                top:45px !important;
                left:-5px !important;
            }

        .screen .s2-icon .list .lib-name {
            font-size: 18px;
            padding-top: 42px;
            color: #4b565c;
        }

        .screen .s2-icon .list .lib-name,
        .screen .s2-icon .list .lib-desc {
            text-align: center;
        }

        .screen .s2-icon .list .lib-desc {
            font-size: 12px;
            padding-top: 20px;
            padding-bottom: 113px;
            color: #8698a7;
        }

img {
    vertical-align: middle;
}

img {
    border: 0;
}

.screen-line {
    border-top: solid 1px #d5dfe7;
    width: 1200px;
    margin: auto;
}

.screen .s3-left {
    width: 660px;
    padding-bottom: 115px;
}

.screen .left-block,
.screen .right-block {
    float: left;
}

.screen .s3-left .image {
    background: url("../../Images/trc_images/s3-bg1-1.png") no-repeat 0 0;
    width: 662px;
    height: 460px;
    font-size: 0px;
    margin-top: 150px;
    margin-left: -15px;
    position: relative;
}

.screen .s3-right {
    padding-left: 68px;
    width: 472px;
}

.screen .left-block,
.screen .right-block {
    float: left;
}

.screen .s3-right .s3-title {
    padding: 150px 0 0 0;
}

.screen .s3-right .s3-title-line {
    width: 368px;
    margin-top: 60px;
}

.screen .s3-right .s3-icon {
    overflow: hidden;
    padding-top: 62px;
    position: absolute;
}

    .screen .s3-right .s3-icon .list .icon {
        font-size: 0;
        margin-right: 40px;
        background: url("../../Images/trc_images/bg-gray.png") no-repeat 0 0;
    }

        .screen .s3-right .s3-icon .list .icon:hover {
            background: url("../../Images/trc_images/bg-green.png") no-repeat 0 0;
        }

    .screen .s3-right .s3-icon .second {
        padding-top: 25px;
    }

    .screen .s3-right .s3-icon .list,
    .screen .s3-right .s3-icon .list .icon {
        float: left;
    }

.screen .s4-left {
    padding: 127px 0 0 58px;
    width: 492px;
    height: auto;
}

.s4-title-line,
.s5-title-line {
    width: 355px;
    margin-top: 30px;
}

.screen .s4-left .s4-list .s4-item {
    overflow: hidden;
}

    .screen .s4-left .s4-list .s4-item .s4-icon {
        float: left;
    }

    .screen .s4-left .s4-list .s4-item .s4-desc {
        float: left;
        padding: 5px 0 0 28px;
    }

        .screen .s4-left .s4-list .s4-item .s4-desc .s4-lib-name {
            font-size: 18px;
            color: #48637b;
            padding: 3px 0 0 0;
        }

        .screen .s4-left .s4-list .s4-item .s4-desc .s4-lib-desc {
            font-size: 12px;
            color: #8698a7;
            padding: 3px 0 0 0;
        }

.screen .s4-right .s4-image {
    padding: 148px 0 112px 0;
    position: relative;
}

    .screen .s4-right .s4-image img,
    .screen .s5-left .s5-image img {
        position: absolute;
    }

.screen .s4-left .s4-list .item-not-first {
    margin: 30px 0 0 0;
}

.screen .s5-left {
    width: 685px;
}

    .screen .s5-left .s5-image {
        padding: 85px 0 60px 28px;
        position: relative;
    }

.screen .s5-right {
    padding: 180px 0 0 104px;
}

    .screen .s5-right .s5-desc .part {
        color: #8698a7;
        line-height: 24px;
        font-size: 14px;
    }

.s6-left {
    padding-left: 60px;
}

.s6-right {
    padding: 100px 0 50px 40px;
}

.s6-title {
    padding: 270px 0 0 0;
    padding-left: 32px;
}

.s6-title-line {
    width: 352px;
    /* margin: auto; */
    margin-top: 60px;
    margin-left: 5px;
}

.s6-desc {
    float: right;
    margin-left: 0px;
}

    .s6-desc .part {
        color: #8698a7;
        margin-right: 0px;
    }

.s6-right .s6-image {
    position: relative;
    height: 523px;
    width: 739px;
}

    .s6-right .s6-image img {
        position: absolute;
    }