.cer5 {
    max-width: 1600px;
    margin: 0 auto;
}

.fysout {
    padding: 0px 20px 30px;
    /* background: url('../picture/20.jpg') center no-repeat; */
}

.fyslist {
    position: relative;
    width: 100%;
    height: 666px;
}

.fyslist .quan1 {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 10;
    width: 220px;
    height: 220px;
    background: url('../picture/19.png') center no-repeat;
    margin-left: -110px;
    margin-top: -110px;
    pointer-events: none;
    border-radius: 50%;
}


.fyslist li {
    position: absolute;
    z-index: 3;
    width: 520px;
}

.fyslist li .hx {
    position: relative;
    width: 100%;
    height: 1px;
    margin: 29px 0;
}

.fyslist li .hx:before {
    content: '';
    position: absolute;
    top: -5px;
    z-index: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}



.fyslist li h3 {
    font-size: 20px;
    color: #222;
    line-height: 26px;
    font-weight: bold;
    height: 26px;
    overflow: hidden;
    padding: 0 20px;
}

.fyslist li .txt {
    font-size: 14px;
    color: #444;
    line-height: 25px;
    /*height: 90px;*/
    padding: 0 20px;
}


.fyslist li.i2,
.fyslist li.i3 {
    left: 0;
    text-align: right;
}

.fyslist li.i1,
.fyslist li.i4 {
    right: 0;
    text-align: left;
}

.fyslist li.i1,
.fyslist li.i2 {
    top: 77px;
}

.fyslist li.i3{
    bottom: 64px;
}

.fyslist li.i4 {
    bottom: 180px;
}
.fyslist li.i1 .hx {
    background-color: #172A88;
}

.fyslist li.i2 .hx {
    background-color: #172A88;
}

.fyslist li.i3 .hx {
    background-color: #172A88;
}

.fyslist li.i4 .hx {
    background-color: #172A88;
}

.fyslist li.i1 .hx:before {
    background-color: #172A88;
    left: 0;
}

.fyslist li.i2 .hx:before {
    background-color: #172A88;
    right: 0;
}

.fyslist li.i3 .hx:before {
    background-color: #172A88;
    right: 0;
}

.fyslist li.i4 .hx:before {
    background-color: #172A88;
    left: 0;
}

.fyslist li.i1 .hx:after {
    border-color: #172A88;
    right: 100%;
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
}

.fyslist li.i2 .hx:after {
    border-color: #172A88;
    left: 100%;
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}


.fyslist li.i4 .hx:after {
    border-color: #172A88;
    right: 100%;
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
}


.fycont{
    display: none;
    position: absolute;
    width: 100%;
    z-index: 10;
    background-color: #fff;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    border: 1px solid #d1d1d1;
    padding: 20px;
    border-radius: 10px;
}
.coretu {
    position: absolute;
    width: 380px;
    height: 380px;
    z-index: 2;
    background-color: #fff;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    border-radius: 50%;
}

.coretu dd {
    position: absolute;
    z-index: 3;
    width: 189px;
    height: 189px;
}



.coretu dd .dot {
    width: 120px;
    height: 120px;
    position: absolute;
    z-index: 0;
    /* background: url('https://www.greentech-bio.com/public/images/dot-core.png') center no-repeat; */
}

.coretu dd.i1,
.coretu dd.i2 {
    bottom: 50%;
    margin-bottom: 1px;
}

.coretu dd.i3,
.coretu dd.i4 {
    top: 50%;
    margin-top: 1px;
}

.coretu dd.i2,
.coretu dd.i3 {
    right: 50%;
    margin-right: 1px;
}

.coretu dd.i1,
.coretu dd.i4 {
    left: 50%;
    margin-left: 1px;
}

.coretu dd.i1 {
    background-color: #DFDFDF;
    border-top-right-radius: 100%;
}


.coretu dd.i2 {
    background-color: #DFDFDF;
    border-top-left-radius: 100%;
}

.coretu dd.i3 {
    background-color: #DFDFDF;
    border-bottom-left-radius: 100%;
}

.coretu dd.i4 {
    background-color: #DFDFDF;
    border-bottom-right-radius: 100%;
}


.coretu dd.i1 .dot {
    left: 90px;
    bottom: 90px;
    background: url('../picture/23.png') center no-repeat;
}

.coretu dd.i2 .dot {
    right: 90px;
    bottom: 90px;
    background: url('../picture/21.png') center no-repeat;
}

.coretu dd.i3 .dot {
    right: 90px;
    top: 90px;
    background: url('../picture/22.png') center no-repeat;
}

.coretu dd.i4 .dot {
    left: 90px;
    top: 90px;
    background: url('../picture/24.png') center no-repeat;
}

.coretu dd.i1 .pic {
    left: 0;
    bottom: 0;
    border-top-right-radius: 100%;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
}

.coretu dd.i2 .pic {
    right: 0;
    bottom: 0;
    border-top-left-radius: 100%;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}

.coretu dd.i3 .pic {
    right: 0;
    top: 0;
    border-bottom-left-radius: 100%;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
}

.coretu dd.i4 .pic {
    left: 0;
    top: 0;
    border-bottom-right-radius: 100%;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

@media screen and (max-width: 1500px) {
    .fyslist li {
        width: 420px;
    }
}

@media screen and (max-width: 1300px) {
    .fyslist li {
        width: 320px;
    }

    .fyslist li.on .hx:after {
        opacity: 1;
        width: 120px;
    }
}

@media screen and (max-width: 1024px) {
    .fysout {
        padding: 100px 20px;
    }
    .fyslist li.i1,
    .fyslist li.i2 {
        top: -47px;
    }

    .fyslist li.i3,
    .fyslist li.i4 {
        bottom: -60px;
    }

    .fyslist li .hx {
        margin: 19px 0;
    }

    .fyslist li .txt {
        display: none;
    }
}

@media screen and (max-width: 700px) {
    .fyslist {
        height: 520px;
    }

    .coretu {
        width: 300px;
        height: 300px;
    }

    .coretu dd {
        width: 148px;
        height: 148px;
    }

    .coretu dd.i1 .dot {
        left: 60px;
        bottom: 80px;
    }

    .coretu dd.i2 .dot {
        right: 60px;
        bottom: 80px;
    }

    .coretu dd.i3 .dot {
        right: 60px;
        top: 80px;
    }

    .coretu dd.i4 .dot {
        left: 60px;
        top: 80px;
    }

    .fyslist li {
        width: 50%;
    }

    .fyslist li .txt {
        height: auto;
        min-height: 90px;
        padding: 0 10px;
    }

}