.supply-chain-support .layer>header {
    max-width: var(--root-max-width);
    margin: auto;
    padding-top: calc(100 * var(--px));
    padding-bottom: calc(50 * var(--px));
}

.supply-chain-support .layer>header h3 {
    font-size: calc(48 * var(--px));
    font-weight: bold;
    line-height: calc(52 * var(--px));
}

.supply-chain-support .layer>header .desc {
    color: #333;
    font-size: calc(20 * var(--px));
    line-height: calc(24 * var(--px));
    padding-top: calc(20 * var(--px));
}

.supply-chain-support .layer>main {
    max-width: var(--root-max-width);
    margin: auto;
    padding-bottom: calc(100 * var(--px));
}

.layer.comprehensive>main {
    margin-top: calc(166 * var(--px));
    padding-bottom: calc(150 * var(--px));
}

.layer.comprehensive .comprehensive-content {
    --r: 625 / 2;
    width: calc(calc(var(--r) * 2) * var(--px));
    height: calc(calc(var(--r) * 2) * var(--px));
    margin: auto;
    background-image: radial-gradient(circle at center, #fff 62%, rgba(246, 246, 246, .6) 62%, #fff 80%);
    border-radius: 50%;
    border: 2px dashed #e5e5e5;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.layer.comprehensive .comprehensive-content::after {
    content: '';
    width: 100%;
    height: 100%;
    background: url(/themes/basic/skin/images/arrow-bg.png) no-repeat;
    background-position: center bottom;
    background-size: 89% 87%;
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    z-index: 2;
}

.layer.comprehensive .comprehensive-content h4 {
    color: var(--root-color);
    font-size: calc(32 * var(--px));
    line-height: calc(42 * var(--px));
    text-align: center;
    position: relative;
    z-index: 1;
}

.layer.comprehensive .comprehensive-content .comprehensive-item {
    --wD: 166;
    --hD: 166;
    --l: 50%;
    --t: 50%;
    display: flex;
    justify-content: space-between;
    position: absolute;
    left: 0;
    top: 0;
    translate: calc((var(--wD) / 2) * var(--px) * -1) calc((var(--hD) / 2) * var(--px) * -1);
    z-index: 3;
}

.layer.comprehensive .comprehensive-content .comprehensive-item.top .comprehensive-text {
    left: 0;
    /* top: calc((100% + 20 * var(--px)) * -1); */
    top: -100%;
    translate: calc(12 * var(--px));
}

.layer.comprehensive .comprehensive-content .comprehensive-item.top .comprehensive-text .title {
    margin-right: calc(20 * var(--px));
}

.layer.comprehensive .comprehensive-content .comprehensive-item.text-left .comprehensive-text {
    right: calc((var(--wD) + 20) * var(--px));
    top: 100%;
    translate: 0 -50%;
}

.layer.comprehensive .comprehensive-content .comprehensive-item.text-left .comprehensive-text ul {
    order: 1;
}

.layer.comprehensive .comprehensive-content .comprehensive-item.text-left .comprehensive-text .title {
    order: 2;
    margin-left: calc(20 * var(--px) * 1);
}

.layer.comprehensive .comprehensive-content .comprehensive-item.text-right .comprehensive-text {
    left: calc((var(--wD) + 20) * var(--px));
    top: 100%;
    translate: 0 -50%;
}

.layer.comprehensive .comprehensive-content .comprehensive-item.text-right .comprehensive-text .title {
    margin-right: calc(20 * var(--px) * 1);
}

.layer.comprehensive .comprehensive-content .dashed {
    /* --deg: 360deg / 5; */
    width: calc(var(--wD) * var(--px));
    height: calc(var(--hD) * var(--px));
    border: 1px dashed var(--root-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* position: absolute; */
    /* translate: -50% -50%; */
}

.layer.comprehensive .comprehensive-content .comprehensive-text {
    --l: 50%;
    --t: 50%;
    display: flex;
    align-items: center;
    position: absolute;
    /* translate: -50% -50%; */
}

.layer.comprehensive .comprehensive-content .comprehensive-text .title {
    flex: 0 0 auto;
    color: var(--root-color);
    font-size: calc(24 * var(--px));
    font-weight: bold;
    text-align: center;
    line-height: calc(26 * var(--px));
    background-color: #dcdcdc;
    width: calc(140 * var(--px));
    height: calc(140 * var(--px));
    padding: calc(12 * var(--px));
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.layer.comprehensive .comprehensive-content .comprehensive-text ul {
    width: max-content;
}

.layer.comprehensive .comprehensive-content .comprehensive-text ul li {
    font-size: calc(16 * var(--px));
    line-height: calc(24 * var(--px));
    color: #666;
    display: flex;
    align-items: flex-start;
}

.layer.comprehensive .comprehensive-content .comprehensive-text ul li p {
    flex: 1 0 0;
}

.layer.comprehensive .comprehensive-content .comprehensive-text ul li::before {
    content: '';
    width: 4px;
    height: 4px;
    background-color: var(--root-color);
    border-radius: 50%;
    margin-right: calc(12* var(--px));
    margin-top: calc(8* var(--px));
    flex: 0 0 auto;
}

/* .layer.comprehensive .comprehensive-content .dashed:nth-of-type(1) {
    --a: calc(var(--deg) * 0);
    left: calc(var(--l) + var(--r) * cos(var(--a)) * var(--px));
    top: calc(var(--t) + var(--r) * sin(var(--a)) * var(--px));
}
.layer.comprehensive .comprehensive-content .dashed:nth-of-type(2) {
    --a: calc(var(--deg) * 1);
    left: calc(var(--l) + var(--r) * cos(var(--a)) * var(--px));
    top: calc(var(--t) + var(--r) * sin(var(--a)) * var(--px));
}
.layer.comprehensive .comprehensive-content .dashed:nth-of-type(3) {
    --a: calc(var(--deg) * 2);
    left: calc(var(--l) + var(--r) * cos(var(--a)) * var(--px));
    top: calc(var(--t) + var(--r) * sin(var(--a)) * var(--px));
}
.layer.comprehensive .comprehensive-content .dashed:nth-of-type(4) {
    --a: calc(var(--deg) * 3);
    left: calc(var(--l) + var(--r) * cos(var(--a)) * var(--px));
    top: calc(var(--t) + var(--r) * sin(var(--a)) * var(--px));
}
.layer.comprehensive .comprehensive-content .dashed:nth-of-type(5) {
    --a: calc(var(--deg) * 4);
    left: calc(var(--l) + var(--r) * cos(var(--a)) * var(--px));
    top: calc(var(--t) + var(--r) * sin(var(--a)) * var(--px));
} */
.layer.comprehensive .comprehensive-content .dashed .border {
    width: calc((var(--wD) - 40) * var(--px));
    height: calc((var(--hD) - 40) * var(--px));
    border: 1px solid var(--root-color);
    border-radius: 50%;
    position: relative;
    transform: rotate(-45deg);
    display: flex;
    justify-content: center;
    align-items: center;
}

.layer.comprehensive .comprehensive-content .dashed .border::before,
.layer.comprehensive .comprehensive-content .dashed .border::after {
    --r: 12;
    content: '';
    position: absolute;
    width: calc(var(--r) * var(--px));
    height: calc(var(--r) * var(--px));
    background-image: linear-gradient(to right, #ea703a, #f59348);
    border-radius: 50%;
}

.layer.comprehensive .comprehensive-content .dashed .border::before {
    left: 0;
    top: 50%;
    translate: -50% -50%;
}

.layer.comprehensive .comprehensive-content .dashed .border::after {
    right: 0;
    top: 50%;
    translate: 50% -50%;
}

.layer.comprehensive .comprehensive-content .dashed .border .icon {
    width: calc((var(--wD) - 72) * var(--px));
    height: calc((var(--wD) - 72) * var(--px));
    border-radius: 50%;
    transform: rotate(45deg);
}

.layer.comprehensive .comprehensive-content .dashed .border .icon img {
    width: 100%;
    height: 100%;
}





.map {
    background-color: #f3f6f8;
}

.map .map-content {
    max-width: var(--root-max-width);
    margin: auto;
    padding-bottom: calc(100 * var(--px));
}

.map .map-content img {
    width: 100%;
}

.layer.supply-chain-integration>main {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(10 * var(--px));
}

.layer.supply-chain-integration>main .integration {
    min-height: calc(230 * var(--px));
    padding: calc(40 * var(--px));
    background-color: #fdeee8;
    transition: background .3s ease;
}

.layer.supply-chain-integration>main .integration:hover {
    background-color: var(--root-color);
}

.layer.supply-chain-integration>main .integration:hover .num {
    background-color: #fff;
    color: var(--root-color);
}

.layer.supply-chain-integration>main .integration:hover section {
    color: #fff;
}

.layer.supply-chain-integration>main .integration .num {
    --r: 46;
    width: calc(var(--r) * var(--px));
    height: calc(var(--r) * var(--px));
    color: #fff;
    font-weight: bold;
    border-radius: 50%;
    background-color: var(--root-color);
    text-align: center;
    line-height: calc(var(--r) * var(--px));
}

.layer.supply-chain-integration>main .integration section {
    color: #666;
    font-size: calc(18 * var(--px));
    padding-top: calc(18 * var(--px));
    line-height: calc(24 * var(--px));
}

@media screen and (max-width: 1024px) {
    .layer.comprehensive .comprehensive-content h4 {
        font-size: calc(20 * var(--px));
    }

    .layer.comprehensive .comprehensive-content {
        --r: 425 / 2;
    }

    .layer.comprehensive .comprehensive-content .comprehensive-item {
        --wD: 110;
        --hD: 110;
    }

    .layer.comprehensive .comprehensive-content .comprehensive-text .title {
        width: calc(84 * var(--px));
        height: calc(84 * var(--px));
    }

    .layer.comprehensive .comprehensive-content .comprehensive-text .title {
        font-size: calc(16 * var(--px));
    }
}

@media screen and (max-width: 768px) {
    .layer.supply-chain-integration>main {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: calc(10 * var(--px));
    }
}