/* banner */
#banner {
    --swiper-theme-color: var(--theme-color-1);
}

/*num-area*/
.layout-index {
    padding: 0 0 0;
    background-color: #f1f1f1;
}

.num-area {
    width: 86%;
    max-width: 1440px;
    padding: 1.875em 3.75em;
    margin: 0 auto;
    border-bottom: 1px solid #e5e5e5;

}

.num-area .num-item {
    display: flex;
    width: 13.75em;
}

.num-area .num-icon {
    width: 3.75em;
    height: 3.75em;
    position: relative;
}

.num-area .num-icon .num-icon-img {
    width: 100%;
    height: 100%;
    background-image: url(../images/sprite.png);
    background-repeat: no-repeat;
    background-size: 518% 518%;

}

.num-area .num-icon .num-icon-img-1 {
    background-position: 0% 0%;
}

.num-area .num-icon .num-icon-img-2 {
    background-position: 26% 0%;
}

.num-area .num-icon .num-icon-img-3 {
    background-position: 52% 0%;
}

.num-area .num-icon .num-icon-img-4 {
    background-position: 78% 0%;
}

.num-area .num-item .num-info {
    margin: .5em 0 0 1em;
}

.num-area .num-item .num-info p {
    font-size: 1em;
    color: var(--text-color-2);
    position: relative;

}

.num-area .num-item .num-info p::after {
    content: " ";
    width: 8.875em;
    height: 1px;
    background: linear-gradient(to right, var(--theme-color-o-2) 80%, var(--theme-color-o-1));
    position: absolute;
    bottom: 0px;
    left: 0;
}

.num-area .num-item .num-info strong {
    display: inline-block;
    font-size: 3.625em;
    color: var(--text-color-2);
    font-family: 'Noto Sans SC';
    font-weight: bolder;
    line-height: 1;
    position: relative;

}

.num-area .num-item .num-info strong::after {
    content: "+";
    font-size: .45em;
    font-weight: 100;
    color: var(--theme-color-1);
    position: absolute;
    right: -.5em;
    top: 0;
}

/*涓婚〉servie*/
.index-service {
    background: url(../images/bg.jpg) no-repeat top / cover;
}

.index-service-contain {
    width: 86%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 5.5em 0 6.25em 0;
}

.col-title-item {
    display: flex;
    flex-direction: column;
}

.col-title-item .title-tip {
    font-family: 'OP-M', sans-serif;
    font-size: 3em;
    color: var(--text-color-2);
    position: relative;
    display: inline-block;
    line-height: 1;
    text-transform: uppercase;
}

/* .col-title-item .title-tip::after {
    content: '';
    width: 80px;
    height: 4px;
    position: absolute;
    background-color: var(--theme-color-1);
    bottom: -20px;
    left: 0;
} */
/* 
.col-title-item .title-tip::before {
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--theme-color-1);
    position: absolute;
    right: -10px;
    top: 0px;
} */

.col-title-item .col-title {
    font-weight: 300;
    font-size: 2.5em;
    color: var(--text-color-2);
    margin-top: .35em;
    display: inline-block;
}

.polygon-box {
    width: 11em;
    height: 11.375em;
    position: relative;
}

.polyglon-area {
    display: flex;
    align-items: center;
    gap: 1em;
}

.index-service-project {
    gap: 5.25em
}

.index-service-project .left-info {
    margin-top: 2.5em;
}

.index-service-project .left-info p {
    font-size: 1.5em;
    line-height: 1.4;
    color: var(--text-color-2);
}

.index-service-project .left-info span {
    font-size: 2.6em;
    line-height: 1.4;
    color: var(--text-color-1);
}

.cls-1 {
    fill: none;
    stroke: var(--theme-color-3);
    stroke-miterlimit: 10;
    stroke-dashoffset: 0;
    stroke-width: 6px;
    vector-effect: non-scaling-stroke;
}

.polygon-txt {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    padding: 12px;
    transform: translate(-50%, -50%);
}

.polygon-txt p {
    font-family: 'OP-B';

    color: var(--text-color-1);
    font-size: 1.6em;
    font-weight: bolder;
    text-align: center;
}

.polygon-txt span {
    display: block;
    color: var(--text-color-2);
    text-align: center;
    font-size: .8em;
    margin: 8px 0 0 0;
}

.polygon-box:last-child .polygon-txt span {
    line-height: 1.1;
}

.index-service-project .left {
    margin-top: 2.255em;
}

.index-service-project .right {
    flex: 1;
    max-width: 750px;
    display: flex;
    flex-direction: column;
    gap: .75em
}

.index-service-project .service-item {
    background-color: #fff;
    border: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    min-height: 5.625em;
    transition: all .3s ease-in-out;

}

.index-service-project .service-item:hover {
    background-color: var(--theme-color-1);
}

.index-service-project .service-item:hover .service-info p,
.index-service-project .service-item:hover .service-info span {
    color: #fff;
}



.index-service-project .service-item .service-icon {
    width: 3.75em;
    height: 3.75em;
    position: relative;
    margin: 0 1.875em;
}

.index-service-project .service-item .service-icon>div {
    width: 100%;
    height: 100%;
    background-image: url(../images/sprite.png);
    background-repeat: no-repeat;
    background-size: 490% 490%;
    transition: all .3s ease-in-out;
}

.index-service-project .service-item:nth-child(1) .service-icon>div {
    background-position: 0% 50%;
}

.index-service-project .service-item:nth-child(2) .service-icon>div {
    background-position: 27% 50%;
}

.index-service-project .service-item:nth-child(3) .service-icon>div {
    background-position: 54% 50%;
}

.index-service-project .service-item:nth-child(4) .service-icon>div {
    background-position: 81% 50%;
}

.index-service-project .service-item:hover .service-icon>div {
    background-position-y: 25%;
}

.index-service-project .service-item .service-info {
    flex: 1;
}

.index-service-project .service-item .service-info p {
    color: var(--text-color-2);
    font-size: 1.75em;
}

.index-service-project .service-item .service-info span {
    color: var(--text-color-4);
    font-size: .875em;
    display: block;
    line-height: 1.2;
}

.polygon-box svg {
    transition: transform .3s ease-in-out;
}

.polygon-box:hover svg {
    transform: rotate(90deg);
}

.cases-container {
    max-width: 86%;
    width: 1440px;
    margin: 0 auto;
    padding: 5.5em 0 6.8em 0;
}

.caes-tab ul {
    gap: .85em
}

.caes-tab li a {
    color: var(--text-color-2);
    font-size: 1.1em;
    padding: .25em .75em;
    border: 1px solid var(--text-color-4);
    transition: all .3s ease-in-out;
}

.caes-tab li a:hover {
    background-color: var(--theme-color-1);
    border: 1px solid var(--theme-color-1);
    border-radius: 5px;
    color: var(--text-color-white);
}

.cases-container-list {
    width: 100%;
    padding: 5.6em 0 0 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(100px, 1fr));
    grid-template-rows: repeat(2, 1fr);
    gap: 2em;
}

.cases-container-list .case-img {
    position: relative;

}

.cases-container-list .case-img .img {
    width: 100%;
    aspect-ratio: 1.536;
    overflow: hidden;
}

.cases-container-list .case-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cases-container-list .case-img h5 {
    position: absolute;
    bottom: 0;
    right: 0;
    color: var(--text-color-white);
    z-index: 1;
    font-size: 0.95em;
    padding: .25em .8em;
    background-color: var(--theme-color-1);
}

.case-description {
    background-color: var(--text-color-white);
}



.cases-container-list a {
    transition: all 0.3s ease-in-out;

}

.cases-container-list a:hover {
    transform: translateY(-.5em);
    box-shadow: 0 .2em .2em rgba(0, 0, 0, .01),
        0 .5em .8em rgba(0, 0, 0, .05);
}

.case-description .top {
    padding: 1.1em 1.35em;
    width: 100%;
}

.case-description .top p {
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    white-space: nowrap;
    font-family: 'OP-B';
    font-size: 1em;

}

.case-description .top span {
    text-overflow: ellipsis;
    width: 100%;
    /* white-space: nowrap; */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--text-color-4);
    font-size: .875em;
    margin-top: .85em;
    line-height: 1.6;
    min-height: 2.75em;
    white-space: nowrap;
}

.case-description .bottom {
    border-top: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .65em 1.35em;

}

.case-description .bottom .case-tip:nth-child(1) {
    min-width: 30%;
    width: 30%;
}

.case-description .bottom .case-tip:nth-child(2) {
    justify-content: flex-end;
    min-width: 100px;
}

.case-description .bottom .case-tip-icon {
    min-width: 1.25em;
    height: 1.25em;
    position: relative;
}

.case-description .bottom .case-tip-icon>div {
    width: 100%;
    height: 100%;
    background-image: url(../images/sprite.png);
    background-repeat: no-repeat;
    background-size: 1350% 1350%;
}

.case-tip:nth-child(1) .case-tip-icon>div {
    background-position: 0% 89%;
}

.case-tip:nth-child(2) .case-tip-icon>div {
    background-position: 8% 89%;
}

.case-description .bottom .case-tip {
    display: flex;
    align-items: center;
}

.case-description .bottom .case-tip span {
    overflow: hidden;
    text-overflow: ellipsis;
    width: auto;
    white-space: nowrap;
    display: block;
    font-size: .85em;
    flex: 1;
    color: var(--text-color-6);
    padding: 0 0 0 .25em;
}

/*鍏徃鏉垮潡*/
.company-container {
    width: 86%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 2.5em 0 6.8em 0;
    display: flex;
    justify-content: space-between;

}

.company-container .company-right {
    width: 46.17em;
    min-width: 51%;
    height: 30.06em;
}

.company-container .company-img {
    width: 100%;
    height: 100%;
}

.company-container .company-left {
    flex: .88;
    position: relative;
    z-index: 1;
}

.company-container .company-left::before {
    content: "Who \A are we?";
    white-space: pre-wrap;
    font-size: 8.43em;
    font-family: 'OP-B';
    color: transparent;
    -webkit-text-stroke: 1px var(--theme-color-2);
    position: absolute;
    width: 100%;
    line-height: 1;
    opacity: .2;
    top: -.45em;
    left: -.65em;
    z-index: -1;
}

.company-container .company-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.company-container .company-info {
    font-size: 1.125em;
    color: var(--text-color-2);
    margin-top: 3.2em;
}

.company-container .company-info p {
    margin-bottom: 1.5em;
    line-height: 1.8;
}

.company-container .company-info strong {
    font-weight: bold;
    font-family: 'OP-B';
}

/*鍚堜綔浼欎即*/
.parther-container {
    width: 86%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 2.5em 0 6.8em 0;

}

.parther-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .75em;
    margin: 2.5em 0 0 0;
}

.parther-list .parther-item {
    width: 100%;
    aspect-ratio: 1.82;
    background-color: #fff;
}

.parther-list .parther-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*璧勮涓績*/
.news-container {
    width: 86%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 2.5em 0 6.8em 0;
}

.information-list {
    display: flex;
    justify-content: space-between;
    gap: 2.5em;
}

.information-list .left {
    width: 66%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5em;
    min-height: 28.43em;

}

.information-list .bigStyle {
    flex: 1;
    position: relative;
    overflow: hidden;

}

.information-list .bigStyle .news-img-box {
    width: 100%;
    aspect-ratio: 1.64;
    overflow: hidden;
    position: relative;
    margin-bottom: 10em;
    transition: all .3s ease-in-out;
}

.information-list .bigStyle .news-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.information-list .bigStyle .news-info-box {
    background-color: #ffffff;
    position: absolute;
    top: 17em;
    bottom: 0;
    transition: all .3s ease-in-out;
    padding: 1.2em 2.2em;
    width: 100%;
}

.information-list .bigStyle:hover .news-info-box {
    top: 0;
    /* background-color: rgba(0, 0, 0, .5); */
    background: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, .7));
    bottom: 0;
    padding: 2.4em 2.2em;
}

.information-list .bigStyle:hover .new-date span:nth-child(1) {
    color: #d8d8d8;
}

.information-list .bigStyle:hover .new-date span:nth-child(2) {
    display: none;
}

.information-list .bigStyle:hover .news-img-box {
    aspect-ratio: 1.05;
    margin-bottom: 0;
}

.information-list .bigStyle:hover .info-box {
    display: block;
}

.information-list .bigStyle .info-box {
    display: none;
}

.information-list .bigStyle .info-box>p {
    color: #d8d8d8;
    font-size: 1em;
    line-height: 1.5;
    min-height: 4.5em;
    text-overflow: ellipsis;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 1.2em;
}

.information-list .bigStyle .info-box>a {
    display: flex;
    align-items: center;
    margin-top: 3.5em;
}

.information-list .bigStyle .info-box>a>p {
    color: var(--text-color-3);
    font-size: .875em;
}

.information-list .bigStyle .info-box>a span {
    width: 3.2em;
    height: 3.2em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #fff;
    margin-left: .8em;
    color: #fff;
    transition: all .3s ease-in-out;
}

.information-list .bigStyle .info-box>a:hover span {
    background-color: var(--theme-color-1);
    border: 1px solid var(--theme-color-1);
}

.information-list .bigStyle .new-date span:nth-child(1) {
    font-size: .875em;
    color: var(--text-color-1);
}

.information-list .bigStyle .new-date span:nth-child(2) {
    font-size: .875em;
    color: var(--text-color-4);
}

.information-list .bigStyle .news-info-box h5 {
    font-size: 1.4em;
    line-height: 1.5;
    font-family: 'OP-B';
    color: var(--text-color-2);
    margin: .75em 0;
    text-overflow: ellipsis;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.information-list .bigStyle:hover .news-info-box h5 {
    color: var(--text-color-white);
}



.information-list .right {
    flex: 1;
}

.information-list .right .new-lists li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.information-list .right .new-lists li a .small-style-img {
    width: 42%;
    aspect-ratio: 1.64;
    overflow: hidden;
    position: relative;
}

.information-list .right .new-lists li {
    margin-bottom: 2.25em;
}

.information-list .right .new-lists li:last-child {
    margin-bottom: 0;
}

.information-list .right .new-lists li a:hover img {
    transform: scale(1.10);
}

.information-list .right .new-lists li a .small-style-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .3s ease-in-out;
}

.information-list .right .new-lists li a .small-style-info {
    flex: 1;
    padding: 0 0 0 1em;
}

.information-list .right .new-lists li a .small-style-info .date {
    font-size: .85em;
    color: var(--text-color-4);
}

.information-list .right .new-lists li a .small-style-info .title {
    font-size: 1em;
    color: var(--text-color-2);
    text-overflow: ellipsis;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3em;
    margin: .85em 0;
}

.information-list .right .new-lists li a .small-style-info span {
    font-size: .85em;
    color: var(--text-color-6);
}

/*妗堜緥鍐呴〉*/
.common-page {
    padding: 0 0 6.8em 0;
}

.common-page .caes-tab {
    width: 100%;
    border-bottom: 1px solid #c5c5c5;
    display: flex;
    justify-content: center;
    padding: .8em 0;
}

.common-page .caes-tab li {
    position: relative;
    padding: .8em 1em;
}

.common-page .caes-tab li a {
    border: none;
    display: inline-block;
    padding: .5em 1.5em;

}

.common-page .caes-tab li::after {
    content: "";
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    width: 2px;
    height: 20px;
    background-color: #c5c5c5;
}

.common-page .caes-tab ul {
    gap: 0;
}

.common-page .caes-tab li a.action {
    background-color: var(--theme-color-1);
    color: var(--text-color-white);
    border-radius: 5px;
}

/*鏂伴椈椤�*/
.news-page-lists {
    display: flex;
    flex-direction: column;
    gap: 3.75em;
    margin: 6.8em 0 0 0;
}

.news-page-lists li {
    transition: all .3s ease-in-out;

}

.news-page-lists li:hover {
    transform: translateY(-.5em);
    box-shadow: 0 .2em .2em rgba(0, 0, 0, .01),
        0 .5em .8em rgba(0, 0, 0, .05);
}

.news-page-lists li:hover img {
    transform: scale(1.05);
}

.news-page-lists li .row-img {
    width: 26.85em;
    aspect-ratio: 1.65;
    position: relative;
    overflow: hidden;
}

.news-page-lists li .row-img img {
    transition: all .3s ease-in-out;

    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-page-lists li .row-info {
    flex: 1;
    min-width: 100px;
    padding: 1.25em 2.25em;
    background-color: #fff;
}

.news-page-lists li .row-info .date {
    font: 1em;
    color: var(--text-color-6);
}

.news-page-lists li .row-info .news-title {
    font-size: 1.25em;
    color: var(--text-color-2);
    margin: .75em 0;
    font-family: 'OP-B';
    font-weight: bold;
    text-overflow: ellipsis;
    white-space: nowrap;

    width: 100%;
    overflow: hidden;
}

.news-page-lists li a {
    align-items: center;
    background-color: #ffffff;
}

.news-page-lists li .row-info {
    height: 100%;
}

.news-page-lists li .row-info .desc {
    font-size: 1em;
    color: var(--text-color-4);
    text-overflow: ellipsis;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3em;
    white-space: nowrap;
}

.news-page-lists li .row-info span {
    font-size: .85em;
    color: #b3b3b3;
    display: flex;
    margin: 1.25em 0 0 0;
    align-items: center;
}

.news-page-lists li .row-info span strong {
    width: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    border-radius: 50%;
    margin-left: 1em;
    border: 1px solid #b3b3b3;

}

/*鑱旂郴鎴戜滑*/
.container {
    width: 86%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 6.5em 0 6.8em 0;

}

.contact-tab {
    display: flex;
    justify-content: space-between;
    gap: 1.875em;
    margin: 2.5em 0;
}

.contact-tab li {
    background-color: #fff;
    flex: 1;
    padding: 1.8em 2.5em;

}

.contact-tab li .contact-tab-icon {
    width: 3.75em;
    height: 3.75em;

}

.contact-tab li .contact-tab-icon>div {
    width: 100%;
    height: 100%;
    background-image: url(../images/sprite2.png);
    background-repeat: no-repeat;
    background-size: 518% 518%;

}

.contact-tab li:nth-child(1) .contact-tab-icon>div {
    background-position: 0% 0%;
}

.contact-tab li:nth-child(2) .contact-tab-icon>div {
    background-position: 27% 1%;
}

.contact-tab li:nth-child(3) .contact-tab-icon>div {
    background-position: 54% 0%;
}


.contact-tab li .tab-title {
    font-size: 1.675em;
    font-weight: bold;
    font-family: 'OP-B';
    color: var(--text-color-2);
    margin: .45em 0;

}

.contact-tab li .tel {
    font-size: 1.375em;
    color: var(--text-color-6);
}

.contact-tab li .add {
    font-size: 1em;
    color: var(--text-color-6);
}

.contact-tab li {
    position: relative;
}

.contact-tab li .code {
    position: absolute;
    right: 10%;
    top: 50%;
    transform: translate(0, -50%);

}

.map {
    width: 100%;
}

.contact-form {
    background: url(../images/formBg.jpg) no-repeat center center / cover;
}

.contact-form form {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.contact-form .form-title {
    font-size: 1.85em;
    color: var(--text-color-white);
    text-align: center;
}

.contact-form .container {
    padding: 2.5em 0;
}

.contact-form form .left {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-form form .bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 35px;
    margin-top: 35px;
}

.contact-form form .bottom .top {
    display: flex;
    gap: 16px;
}

.contact-form form .bottom .top>div {
    display: flex;
    align-items: center;
}

.contact-form form .bottom .top .icon {
    width: 40px;
    height: 40px;
    background-color: #e2e2e2;
}

.contact-form form .bottom .top .icon>div {
    width: 100%;
    height: 100%;
    background-image: url(../images/sprite2.png);
    background-repeat: no-repeat;
    background-size: 1036% 1036%;
    background-position: 0 0;
}

.contact-form form .bottom .top>div:nth-child(1) .icon>div {
    background-position: 0% 23%;
    transform: scale(.6);
}

.contact-form form .bottom .top>div:nth-child(2) .icon>div {
    background-position: 11% 23%;
    transform: scale(.6);
}



.contact-form form .bottom .top .icon:nth-child .contact-form form .bottom .top>div {
    display: flex;
    align-items: center;
}

.contact-form form .bottom .top input {
    height: 40px;
    line-height: 40px;
    padding: 6px 8px;
    font-size: 1em;
    background-color: #fff;
    display: block;
    flex: 1;
    min-width: 250px;

}

.contact-form form .bottom .left .textarea .icon {
    width: 40px;
    height: 40px;
    background-color: #e2e2e2;
}

.contact-form form .bottom .left .textarea>div {
    background-color: #e2e2e2;
    display: flex;
}

.contact-form form .bottom .left .textarea .icon>div {
    width: 100%;
    height: 100%;
    background-image: url(../images/sprite2.png);
    background-repeat: no-repeat;
    background-size: 1036% 1036%;
    background-position: 22% 23%;
    transform: scale(.6);

}

.contact-form form .bottom .left .textarea textarea {
    display: block;
    flex: 1;
    padding: 6px 8px;
    font-size: 1em;
    background-color: #fff;
    resize: none;
}

.contact-form form .right button {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    color: var(--text-color-1);
    background-color: #fff;
    box-shadow: 0 0 10px rgba(200, 16, 46, 1);
    position: relative;
    z-index: 1;
}

.contact-form form .right button::after {
    position: absolute;
    inset: 0;
    content: "";
    background-color: #fff;
    border-radius: 50%;
    z-index: -1;
    animation: big 3s infinite ease-in;

}

.contact-form form .right button::before {
    position: absolute;
    inset: 0;
    content: "";
    background-color: #fff;
    border-radius: 50%;
    z-index: -1;
    animation: big 1.6s infinite ease-in;

}

@keyframes big {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;

    }
}

/*璇︽儏椤�*/
.pageContet-title h1 {
    text-align: center;
    font-size: 2em;
}

.pageContet-title .date {
    text-align: center;
    font-size: 1.2em;
    margin-top: .6em;
    color: var(--text-color-3);
    margin-bottom: 20px;
}

.pageContet {
    padding: 3.5em 0;
    border-top: 1px dashed #c8c8c8;
    border-bottom: 1px dashed #c8c8c8;

}

.pageButtonAera {
    padding: 20px 0;
}

.pageButtonAera a {
    font-size: 1.025em;
}

.pageButtonAera a span {
    margin: 0 8px;
}

.content-layout {
    padding: 6.5em 0 0 0;
}

/*鍏ㄩ摼鏉�*/
.alllink-des {
    font-size: 1.125em;
    color: var(--text-color-2);
    margin-top: 3.5em;
    line-height: 1.8;
}

.alllink-des strong {
    font-weight: bold;
    font-size: 1.2em;
    font-family: 'OP-B';
}

.alllink-layout {
    display: flex;
    flex-direction: column;
    gap: 3.5em;
    padding: 0 0 6.8em 0;
}

.alllink-container {
    background: #fff;
    box-shadow: 0 10px 20px rgba(118, 118, 118, 0.1);
    overflow: hidden;
}

.alllink-item {
    display: flex;
    width: 86%;
    max-width: 1440px;
    margin: 0 auto;
}

.alllink-item>div {
    flex: 1;
}

.alllink-item .left {
    display: flex;
    flex-direction: column;
    padding: 0 10em 0 0;
    position: relative;
    z-index: 10;
    background-color: var(--text-color-white);
}

.alllink-item .left::before {

    content: "";
    width: 37.5em;
    height: 39.5em;
    border-radius: 50%;
    border: 54px solid #f6dcda;
    position: absolute;
    top: 50%;
    right: -3em;
    background-color: #fff;
    transform: translate(0, -50%);
    z-index: 2;
    transition: all .3s ease-in-out;
    /* animation: swiper .3s infinite alternate linear; */

    /* animation-play-state: paused; */

    clip-path: polygon(80% 0, 100% 0, 100% 100%, 80% 100%);
}

.alllink-item .left::after {
    content: "";
    width: 37.5em;
    height: 39.5em;
    border-radius: 50%;
    border: 54px solid #e4928e;
    position: absolute;
    top: 50%;
    right: -6em;
    transition: all .3s ease-in-out;

    transform: translate(0, -50%);
    /* animation: swiper .3s infinite alternate linear; */
    z-index: 2;
    /* animation-play-state: paused; */
    clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}

.alllink-item:hover .left::before,
.alllink-item:hover .left::after {
    transform: translate(8%, -50%);
}

@keyframes swiper {
    0% {
        transform: translate(0, -50%);
        /* width: 37.5em; */
    }

    100% {
        transform: translate(8%, -50%);
        /* width: 55.5em; */

    }
}

@keyframes swiper2 {
    0% {
        transform: translate(0, -50%);
        /* width: 37.5em; */
    }

    100% {
        transform: translate(-8%, -50%);
        /* width: 55.5em; */

    }
}

.alllink-item .left .alllink-title {
    font-size: 2.18em;
    color: var(--theme-color-1);
    font-weight: bold;
    font-family: 'OP-B';
    padding: 16px 0;
}

.alllink-item .left span {
    display: block;
    font-size: 1.125em;
    color: var(--text-color-5);
    letter-spacing: 1px;
    line-height: 1.8;
    height: 8.125em;
}

.alllink-item .right {
    position: relative;
}

.alllink-item .right .alllink-img {
    width: 50vw;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.alllink-item .right .alllink-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-detail-code {
    display: flex;
    align-items: center;
    padding: 2em 0;
}

.service-detail-code a {
    margin-right: 20px;
    color: #b4b4b4;
}

.service-detail-code-img {
    width: 2.875em;
    height: 2.875em;
    background-color: #b4b4b4;
    border-radius: 10px;
    position: relative;
    z-index: 1;
}

.service-detail-code-img::after {
    width: 1.575em;
    height: 1.05em;
    background-color: #b4b4b4;
    content: "";
    position: absolute;
    bottom: 0;
    left: -.875em;
    z-index: -1;
    clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
}

.service-detail-code-img>div:nth-child(1) {
    width: 100%;
    height: 100%;
    background-image: url(../images/sprite.png);
    background-repeat: no-repeat;
    background-size: 476% 476%;
    background-position: -2% 78%;
}

.service-detail-code-img:hover .qrcode {
    display: block;
}

.service-detail-code-img .qrcode {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 90px;
    height: 90px;
    border-radius: 10px;
    padding: 10px;
    background-color: #b4b4b4;
    animation: openMode .25s ease-in-out forwards;

    transform-origin: bottom left;
}

@keyframes openMode {
    0% {
        transform: scale(.5);
    }

    100% {
        transform: scale(1);
    }
}

.service-detail-code-img .qrcode img {
    width: 100%;
    height: 100%;
}

.alllink-container:nth-child(2n) .alllink-item {
    flex-direction: row-reverse;
}

.alllink-container:nth-child(2n) .alllink-item .left {
    padding: 0 0 0 10em;
}

.alllink-container:nth-child(2n) .alllink-item .right .alllink-img {
    left: auto;
    right: 0;
}

.alllink-container:nth-child(2n) .alllink-item .left::before {
    right: auto;
    left: -3em;
    /* animation: swiper2 .3s infinite alternate linear; */
    /* animation-play-state: paused; */

    clip-path: polygon(20% 0, 0% 0, 0% 100%, 20% 100%);
}

.alllink-container:nth-child(2n) .alllink-item .left::after {
    right: auto;
    left: -6em;
    clip-path: polygon(20% 0, 0% 0, 0% 100%, 20% 100%);
    /* animation: swiper2 .3s infinite alternate linear; */
    /* animation-play-state: paused; */


}

.alllink-container:nth-child(2n):hover .alllink-item .left::before,
.alllink-container:nth-child(2n):hover .alllink-item .left::after {
    transform: translate(-8%, -50%);

}

/*鍏徃椤甸潰*/
.company-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    padding: 1.25em 0;
    margin: 1.75em 0;
}

.company-tab li {
    position: relative;
    text-align: center;
    flex: 1;
    z-index: 1;
}

.company-tab li::after {
    content: "";
    position: absolute;
    width: 3px;
    height: 90%;
    top: 50%;
    right: 0;
    transform: translate(0%, -50%);
    background-color: #e5e5e5;
}

.company-tab li:last-child:after {
    display: none;
}

.company-tab li p {
    letter-spacing: 1.25em;
    font-size: 1.75em;
    font-weight: bold;
    font-family: 'OP-B';
    transform: translate(calc(1.25em / 2), 0);

}

.company-tab li span {
    position: absolute;
    z-index: -1;
    left: 50%;
    transform: translate(-50%, 0);
    font-weight: bold;
    font-family: 'OP-B';
    letter-spacing: 4px;
    font-size: 1.85em;
    background-color: #e5e5e5;
    text-transform: uppercase;
    opacity: 0.5;
    background: linear-gradient(to bottom, #f1f1f1 50%, var(--theme-color-1) 110%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    bottom: -10px;
}

.company-layout .company-desc p {
    font-size: 1.125em;
    line-height: 1.7;

}

.company-layout .company-desc p strong {
    font-family: 'OP-B';
    font-weight: bold;
    font-size: 1.25em;
}

.company-layout .company-desc span {
    font-family: 'OP-B';
    font-weight: bold;
    font-size: 1.25em;
    display: block;
    margin-top: 1.75em;
    margin-bottom: .875em;
}

.company-core-area {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    position: relative;
    margin-top: 3.8em;
}

.company-core-area .col-line {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(to bottom, #fff 10%, var(--theme-color-1) 50%, #fff 90%);
    left: 50%;
    width: 3px;
    height: 48em;
}

.company-core-area .row-line {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(to right, #fff 10%, var(--theme-color-1) 50%, #fff 90%);
    left: 50%;
    width: 100%;
    height: 3px;
}

.company-core-area .core-item {
    width: 100%;
    aspect-ratio: 1.82;
    background-color: #fff;
    padding: 1.75em 4.25em;
    position: relative;
}

.company-core-area .core-tip {
    font-family: 'OP-B';
    font-weight: bold;
    font-size: 1.25em;
    color: var(--text-color-2);
}

.company-core-area .core-title {
    font-size: 1.5em;
    font-family: 'OP-B';
    font-weight: bold;
    margin: 1.25em 0 1.6em 0;
    color: var(--theme-color-1);
}

.company-core-area .core-item>div:nth-child(3) {
    display: flex;
    flex-direction: column;
    gap: .25em;
}

.company-core-area .core-item>div:nth-child(3) p {
    font-size: 1em;
    font-family: 'OP-B';
    font-weight: bold;

}

.company-core-area .core-item>div:nth-child(3) span {
    font-size: .875em;
    color: var(--text-color-5);

}

.company-core-area .core-item:after {
    font-family: 'OP-B';
    color: var(--theme-color-1);
    font-size: 5.75em;
    position: absolute;
    line-height: 1;
    opacity: .1;
    transition: all .3s ease-in-out;

}

.company-core-area .core-item:nth-child(2n) {
    text-align: right;
}

.company-core-area .core-item:nth-child(1):after {
    right: 5.2%;
    bottom: 3%;
    content: "01";
}

.company-core-area .core-item:nth-child(2):after {
    left: 3%;
    bottom: 3%;
    content: "02";
}

.company-core-area .core-item:nth-child(3):after {
    right: 3%;
    top: 3%;
    content: "03";
}

.company-core-area .core-item:nth-child(4):after {
    left: 3%;
    top: 3%;
    content: "04";
}

.company-core-area .core-item:hover::after {
    opacity: 1;
}

.group-item {
    padding: 6.8em 0 0;
}

.group-item .group-img {
    background-color: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 3.6em;
}

.group-item .group-img>div:nth-child(1) {
    width: 30%;
}

.group-item .group-img>div:nth-child(1) img {
    width: 100%;
}

.group-item .group-img .right {
    padding: 2.5em;
    flex: 1;
}

.group-item .group-img img {
    height: 100%;
}

.group-item .qua-title {
    font-size: 1.125em;
    margin: 2.5em 0 .75em;
    color: var(--text-color-5);
}

.swiper-free-mode#qua {
    background-color: #fff;
    padding: 3.5em 0;
}

.swiper-free-mode#qua .swiper-slide>div {
    padding: .5em;
    border-radius: 5px;
    border: 1px solid #d4d4d4;
}

.swiper-free-mode#qua>.swiper-wrapper {
    transition-timing-function: linear;
    -webkit-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    -moz-transition-timing-function: linear;
    -ms-transition-timing-function: linear;
}

/*鏈嶅姟*/
.service-first-item .service-item .service-item-info {
    padding: 2.5em;
    flex: 1;
}

.service-first-item {
    display: flex;
    flex-direction: column;
}

.service-first-item .service-item:nth-child(2) {
    flex-direction: row-reverse;
}

.service-first-item .service-item .service-item-info p {
    font-weight: bold;
    font-family: 'OP-B';
    font-size: 1.85em;
    margin-bottom: .75em;
}

.service-item-img {
    width: 50%
}

.service-item-img img {
    width: 100%;
}

.service-first-item .service-item .service-item-info span {
    font-size: 1.35em;
    display: block;
    font-size: 1em;
    line-height: 1.7;
}

.service-second-item>p {
    font-weight: bold;
    font-family: 'OP-B';
    font-size: 1.85em;
    margin-bottom: .75em;
}

.service-second-item ul {
    display: flex;
    justify-content: space-between;
}

.service-second-item ul li {
    width: 30%;
}

.service-second-item ul li img {
    width: 100%;
}

.service-second-item ul li .service-item p {
    font-size: 1.125em;
    padding: .25em .65em;
    width: 60%;
    color: #fff;
    background: var(--theme-color-1);
    position: relative;
    margin-bottom: .75em;
}

.service-second-item ul li .service-item {
    transform: translateY(-20px);
}

.service-second-item ul li .service-item span {
    line-height: 1.7;
}

.service-second-item ul li .service-item p:after {
    content: "";
    height: 100%;
    width: 45px;

    position: absolute;
    top: 0;
    right: -45px;
    background-color: var(--theme-color-1);
    clip-path: polygon(0% 0, 100% 100%, 0 100%);

}

.service-first-item {
    padding: 4.5em 0 0 0;
}

.service-second-item {
    padding: 4.5em 0 6.5em;
}

.service-layout {
    padding: 6.5em 0 0 0;
}

.white-bg {
    background-color: #fff;
}

.nomarl-style {
    margin: 4.8em 0 0 0;
}

.style-title {
    font-weight: bold;
    font-family: 'OP-B';
    font-size: 1.85em;
    margin-bottom: .75em;
}

.nomarl-style ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nomarl-style ul li {
    width: 19%;
}




.nomarl-style ul li>p {
    background-color: #d1d1d1;
    border: 1px solid var(--theme-color-1);
    border-radius: 15px;
    color: #fff;
    text-align: center;
    font-weight: bold;
    font-family: 'OP-B';
    font-size: 1.5em;
    line-height: 2.725em;
    position: relative;

}

.nomarl-style ul li>p::after {
    width: 2em;
    height: 1.375em;
    content: "";
    position: absolute;
    right: -33%;
    top: 50%;
    transform: translate(0, -50%);
    background-image: url(../images/sprite2.png);
    background-repeat: no-repeat;
    background-size: 971.8% 971.8%;
    background-position: 39% 24%;
}

.nomarl-style ul li:last-child>p::after {
    display: none;
}

.nomarl-style ul li .normal-info {
    background-color: #f0f0f0;
    border: 1px dashed var(--theme-color-1);
    padding: .875em 1.275em;
    margin-top: 3.8em;
    position: relative;
    min-height: 19.875em;
    transition: all .3s ease-in-out;
}


.nomarl-style ul li .normal-info:after {
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    background-color: var(--theme-color-1);
    border-radius: 50%;
    border: 4px solid #dddddd;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
}

.nomarl-style ul li .normal-info:before {
    width: 2px;
    height: 3.8em;
    border-right: 1px dashed var(--theme-color-1);
    content: "";
    position: absolute;
    top: -3.8em;
    left: 50%;
    transform: translateX(-50%);

}

.nomarl-style ul li .normal-info p {
    line-height: 2;
    font-size: 1.125em;
}

.industrialize-item {
    display: flex;
    justify-content: space-between;
}

.industrialize-item .right {
    width: 55%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
}

.industrialize-item .right>div {
    width: 33.33%;
    background-color: #b3b3b3;
    aspect-ratio: 0.36;
}

.industrialize-item .right>div:nth-child(1) {
    background: url(../images/serviceImg6.jpg) no-repeat center / cover;
}

.industrialize-item .right>div:nth-child(2) {
    background: url(../images/serviceImg7.jpg) no-repeat center / cover;
}

.industrialize-item .right>div:nth-child(3) {
    background: url(../images/serviceImg8.jpg) no-repeat center / cover;
}

.industrialize-item .left .style-step-detail {
    position: relative;
}

.industrialize-item .left .style-step>p {
    font-size: 1.55em;
    font-weight: bold;
    font-family: 'OP-B';
    color: var(--text-color-2);
    margin-bottom: 1.25em;
    line-height: 1;
    padding: 0 0 0 16px;
    border-left: 6px solid var(--theme-color-1);

}

.industrialize-item .left .style-step>div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25em 3.25em;
    margin-bottom: 1.85em;
}

.industrialize-item .left .style-step>div span {
    display: block;
    padding: .575em 1.25em;
    border-radius: .575em;
    background-color: #eaeaea;
    color: var(--text-color-2);
    min-width: 9.5em;
    font-size: 1em;
    text-align: center;
    transition: all .3s ease-in-out;

}

.industrialize-item .left .style-step>div span:hover {
    background-color: var(--theme-color-1);
    color: #fff;
}

.industrialize-item .left .style-step>div .style-step-detail>p {
    display: block;
    padding: .575em 1.25em;
    border-radius: .575em;
    background-color: #eaeaea;
    color: var(--text-color-2);
    min-width: 9.5em;
    font-size: 1em;
    text-align: center;
    transition: all .3s ease-in-out;
}

.industrialize-item .left .style-step>div .style-step-detail>p:hover {
    background-color: var(--theme-color-1);
    color: #fff;
}

.industrialize-item .left .style-step>div .style-step-detail>div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: absolute;
    top: 4.4em;
    left: 0;
    width: 100%;
    background-color: #fff8f8;
    border: 1px dashed var(--theme-color-1);
    padding: .875em 1.275em;
}

.industrialize-item .left .style-step>div .style-step-detail>div p {
    width: 50%;
    font-size: .875em;
    color: var(--text-color-2);
    line-height: 1.8;

}

.industrialize-item .left .style-step>div .style-step-detail:nth-child(1)>p {
    min-width: 20.5em;
}

.industrialize-item .left .style-step>div .style-step-detail:nth-child(2)>p {
    min-width: 12.5em;
}

.industrialize-item .left .style-step>div .style-step-detail:nth-child(1)>div p {
    width: 33.33%;
}

.style-step-detail:after {
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    background-color: var(--theme-color-1);
    border-radius: 50%;
    border: 4px solid #dddddd;
    top: 3.8em;
    left: 50%;
    transform: translateX(-50%);
}

.style-step-detail:before {
    width: 2px;
    height: 3.8em;
    border-right: 1px dashed var(--theme-color-1);
    content: "";
    position: absolute;
    top: 2.8em;
    left: 50%;
    transform: translateX(-50%);
}

.industrialize-style {
    padding: 4.6em 0 0 0;
}

.service-layout2 {
    padding: 6.5em 0;
}

.service-third-item {
    padding: 2.5em 0 6.5em 0;
    display: flex;
    flex-direction: column;
}


.service-third-item .service-item .service-item-info span {
    line-height: 2.2;
}

.nomarl-style ul li.active>p {
    background-color: rgba(0, 0, 0, .25);
    z-index: 1;

}

.nomarl-style ul li>p::before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: var(--theme-color-1);
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 15px;
    z-index: -1;
}

.nomarl-style ul li.active>p::before {
    animation: toRight .5s ease-in-out forwards;
}

@keyframes toRight {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

.nomarl-style ul li.active .normal-info {
    background-color: #fff8f8;
}

/*鎬绘壙鍖�*/
.epc-layout .company-container .company-left::before {
    display: none;
}

.epc-layout .chatUs {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--theme-color-3);
    width: 160px;
    border-radius: 5px;
    padding: .65em 0;
    transition: all .3s ease-in-out;
    cursor: pointer;
}

.epc-layout .chatUs:hover {
    background-color: var(--theme-color-1);
    color: #fff;
}

.epc-layout .chatUs .chat-img {
    width: 1.5em;
    height: 1.5em;
    margin-right: 6px;
}

.epc-layout .chatUs .chat-img>div {
    width: 100%;
    height: 100%;
    background: url(../images/sprite.png) no-repeat;
    background-size: 516% 516%;
    background-position: 54% 77%;
    ;
}

.epc-layout .chatUs p {
    color: #fff;
    font-size: 1.125em;
}

.epc-layout .company-container {
    padding: 6.4em 0 0;
}

.epc-container-2 .epc-2-title {
    font-weight: bold;
    font-family: 'OP-B';
    font-size: 1.85em;
    margin-bottom: .75em;
}

.epc-container-2 .epc-2 {
    background-color: #fff;
    padding: 2.5em;

}

.epc-container-2 .epc-2 .epc-2-tip {
    font-size: 1.5em;
    color: var(--text-color-2);
    display: block;
    color: var(--theme-color-1);
}

.epc-container-2 .epc-2 .epc-2-sub-title {
    position: relative;
    display: inline-block;
    margin: 1.275em 0;
}

.epc-container-2 .epc-2 .epc-2-sub-title::after {
    width: 1.25em;
    height: 1.25em;
    content: "";
    border: 2px solid var(--theme-color-1);
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    z-index: 2;
    left: calc(100% + 22px);
    background-color: #fff;
    clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
}

.epc-container-2 .epc-2 .epc-2-sub-title p {
    font-size: 2.05em;
    font-weight: bold;
    font-family: 'OP-B';
    color: var(--text-color-2);
    display: inline-block;
}

.epc-container-2 .epc-2 .epc-2-sub-title span {
    position: absolute;
    top: 50%;
    display: inline-block;
    white-space: nowrap;
    left: calc(100% + 30px);
    transform: translateY(-50%);
    font-size: 1.25em;
    color: var(--text-color-1);
    padding: .35em .75em;
    border-radius: 5px;
    border: 2px solid var(--theme-color-1);
}

.epc-container-2 .epc-2-detail {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75em 5.5em;
    margin: 2.6em 0;
}

.epc-container-2 .epc-2-item {
    background-color: #bcbcbc;
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: .5em 0;
    transition: all .3s ease-in-out;

}

.epc-container-2 .epc-2-item p {
    font-size: 1.325em;
    color: #fff;
    padding-left: 1.875em;
    margin-left: 1.875em;
    position: relative;

}

.epc-container-2 .epc-2-item:hover {
    background-color: var(--theme-color-1);
    transform: translateY(-5px);
}
.epc-container-2 .epc-2-item.active {
    background-color: var(--theme-color-1);
    transform: translateY(-5px);
}


.epc-container-2 .epc-2-item p::after {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 2px;
    height: 80%;
    content: "";
    background-color: #979797;
}

.epc-container-2 .epc-2-item .epc-2-item-img {
    width: 3.75em;
    height: 3.75em;
    margin: 0 0 0 1.75em;
}

.epc-container-2 .epc-2-item .epc-2-item-img>div {
    width: 100%;
    height: 100%;
    background: url(../images/sprite2.png) no-repeat;
    background-size: 516% 516%;
}

.epc-container-2 .epc-2-item:nth-child(1) .epc-2-item-img>div {
    background-position: 0% 42%;
}

.epc-container-2 .epc-2-item:nth-child(2) .epc-2-item-img>div {
    background-position: 24% 42%;
}

.epc-container-2 .epc-2-item:nth-child(3) .epc-2-item-img>div {
    background-position: 48% 42%;
}

.epc-container-2 .epc-2-item:nth-child(4) .epc-2-item-img>div {
    background-position: 72% 42%;
}

.epc-container-2 .epc-2-item:nth-child(5) .epc-2-item-img>div {
    background-position: 96% 42%;
}

.epc-container-2 .epc-2-item:nth-child(6) .epc-2-item-img>div {
    background-position: 0% 66%;
}

.epc-container-2 .epc-2-item:nth-child(7) .epc-2-item-img>div {
    background-position: 24% 66%;
}

.epc-container-2 .epc-2-item:nth-child(8) .epc-2-item-img>div {
    background-position: 48% 66%;
}

.epc-container-2 .epc-2-item:nth-child(9) .epc-2-item-img>div {
    background-position: 72% 66%;
}

.epc-container-2 .chatNow {
    font-size: 1.5em;
    font-family: 'OP-B';
    cursor: pointer;
    display: inline-block;
    position: relative;

}

.epc-container-2 .chatNow::after {
    content: "";
    width: .675em;
    height: .675em;
    content: "";
    border: 2px solid var(--theme-color-1);
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
    z-index: 2;
    left: calc(100% + 22px);
    background-color: #fff;
    clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
    transition: all .3s ease-in-out;
}

.epc-container-2 .chatNow:hover::after {
    transform: translateY(-80%) rotate(45deg) translateX(10px);
    clip-path: polygon(100% 0%, 0% 108%, 100% 100%);
    height: 1.875em;
}

.epc-container-2 .chatNow:hover {
    color: var(--theme-color-1);
}

.small-padding {
    padding: 5.8em 0 0 0;
}

.epc-container-3 .epc-2-title {
    font-weight: bold;
    font-family: 'OP-B';
    font-size: 1.85em;
    margin-bottom: .75em;
}

.epc-3-detail {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4.5em 0;
}

.epc-3-circal {
    width: 36.75em;
    height: 36.75em;
    border-radius: 50%;
    padding: 5.125em;
    background: radial-gradient(circle at center, #e0e0e0 30%, rgba(231, 24, 24, .2) 25%, #e5e5e5 65%, #ebebeb 100%);
}

.epc-3-circal .circal-big {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .35em;
}

.epc-3-circal .circal-big>div {
    background-color: #b5b5b5;
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .3s ease-in-out;
    position: relative;


}

.epc-3-circal .circal-big>div:nth-child(1) .outside-area {
    position: absolute;
    top: -4.8em;
    left: -28.5em;
    width: 12.875em;
}

.epc-3-circal .circal-big>div:nth-child(2) .outside-area {
    position: absolute;
    top: -4.8em;
    right: -28.5em;
    width: 12.875em;
}

.epc-3-circal .circal-big>div:nth-child(3) .outside-area {
    position: absolute;
    top: 4.8em;
    left: -28.5em;
    width: 12.875em;
}

.epc-3-circal .circal-big>div .outside-area>p {
    font-size: 1.5em;
    color: var(--text-color-2);
    font-family: 'OP-B';
    text-align: center;
    margin-bottom: .75em;
}

.epc-3-circal .circal-big>div .outside-area>.square {
    width: 100%;
    height: 4.75em;
    display: flex;
    flex-wrap: wrap;
    border: 1px dashed var(--theme-color-1);
    border-radius: 10px;
    background-color: #e5e5e5;
    gap: .125em;
    padding: .5em .875em;
    transform: translate(0, 0);
    position: relative;

}

.epc-3-circal .circal-big>div:nth-child(1) .outside-area>.square:after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--theme-color-3);
    position: absolute;
    top: 50%;
    right: -10%;
    transform: translateY(-50%);
}

.epc-3-circal .circal-big>div:nth-child(2) .outside-area>.square:after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--theme-color-3);
    position: absolute;
    top: 50%;
    left: -10%;
    transform: translateY(-50%);
}

.epc-3-circal .circal-big>div:nth-child(3) .outside-area>.square:after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--theme-color-3);
    position: absolute;
    top: 50%;
    right: -10%;
    transform: translateY(-50%);
}

.epc-3-circal .circal-big>div:nth-child(1) .outside-area>.square::before {
    width: 6em;
    height: 2px;
    background-color: var(--theme-color-3);
    content: "";
    position: absolute;
    top: 50%;
    right: -55%;
    transform: translateY(-50%);
}

.epc-3-circal .circal-big>div:nth-child(2) .outside-area>.square::before {
    width: 6em;
    height: 2px;
    background-color: var(--theme-color-3);
    content: "";
    position: absolute;
    top: 50%;
    left: -55%;
    transform: translateY(-50%);
}

.epc-3-circal .circal-big>div:nth-child(3) .outside-area>.square::before {
    width: 6em;
    height: 2px;
    background-color: var(--theme-color-3);
    content: "";
    position: absolute;
    top: 50%;
    right: -55%;
    transform: translateY(-50%);
}

.epc-3-circal .circal-big>div .outside-area>.square p {
    width: 45%;
    color: var(--theme-color-3);
}

.epc-3-circal .circal-big>div:hover {
    background-color: var(--theme-color-1);
}

.epc-3-circal .circal-big>div:hover .outside-area>p {
    color: var(--theme-color-1);
}

.epc-3-circal .circal-big>div:hover .outside-area .square {
    background-color: var(--theme-color-1);
}

.epc-3-circal .circal-big>div:hover .outside-area .square::before,
.epc-3-circal .circal-big>div:hover .outside-area .square::after {
    background-color: var(--theme-color-1);
}

.epc-3-circal .circal-big>div:hover .outside-area .square p {
    color: #fff;
}

.epc-3-circal .circal-big>div:hover:nth-child(1)::after {
    background: linear-gradient(to right, var(--theme-color-1), transparent);
}

.epc-3-circal .circal-big>div:hover:nth-child(2)::after {
    background: linear-gradient(to right, var(--theme-color-1), transparent);
}

.epc-3-circal .circal-big>div:hover:nth-child(3)::after {
    background: linear-gradient(to right, var(--theme-color-1), transparent);
}

.epc-3-circal .circal-big>div.active {
    background-color: var(--theme-color-1);
}

.epc-3-circal .circal-big>div.active .outside-area>p {
    color: var(--theme-color-1);
}

.epc-3-circal .circal-big>div.active .outside-area .square {
    background-color: var(--theme-color-1);
}

.epc-3-circal .circal-big>div.active .outside-area .square::before,
.epc-3-circal .circal-big>div.active .outside-area .square::after {
    background-color: var(--theme-color-1);
}

.epc-3-circal .circal-big>div.active .outside-area .square p {
    color: #fff;
}

.epc-3-circal .circal-big>div.active:nth-child(1)::after {
    background: linear-gradient(to right, var(--theme-color-1), transparent);
}

.epc-3-circal .circal-big>div.active:nth-child(2)::after {
    background: linear-gradient(to right, var(--theme-color-1), transparent);
}

.epc-3-circal .circal-big>div.active:nth-child(3)::after {
    background: linear-gradient(to right, var(--theme-color-1), transparent);
}

.epc-3-circal .circal-big>div:nth-child(1) {
    border-top-left-radius: 100%;
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, .15),
        inset -10px -10px 10px rgba(255, 255, 255, .25);
    position: relative;
}

.epc-3-circal .circal-big>div:nth-child(1)::after {
    width: 6em;
    height: 2px;
    background: linear-gradient(to right, var(--theme-color-3), transparent);
    content: "";
    position: absolute;
    transform: rotate(15deg);
    top: 20.45%;
    left: -7.8em;

}

.epc-3-circal .circal-big>div:nth-child(2)::after {
    width: 6em;
    height: 2px;
    background: linear-gradient(to right, var(--theme-color-3), transparent);
    content: "";
    position: absolute;
    transform: rotate(165deg);
    top: 20.45%;
    right: -7.8em;

}

.epc-3-circal .circal-big>div:nth-child(3)::after {
    width: 6em;
    height: 2px;
    background: linear-gradient(to right, var(--theme-color-3), transparent);
    content: "";
    position: absolute;
    transform: rotate(-15deg);
    top: 66.55%;
    left: -7.8em;

}

.epc-3-circal .circal-big>div:nth-child(1) div {
    transform: translate(1em, 1em);

}

.epc-3-circal .circal-big>div:nth-child(2) {
    border-top-right-radius: 100%;
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, .15),
        inset 10px -10px 10px rgba(255, 255, 255, .25);
}

.epc-3-circal .circal-big>div:nth-child(2) div {
    transform: translate(-1em, 1em);
}

.epc-3-circal .circal-big>div:nth-child(3) {
    border-bottom-left-radius: 100%;
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, .15),
        inset -10px 10px 10px rgba(255, 255, 255, .25);
}

.epc-3-circal .circal-big>div:nth-child(3) div {
    transform: translate(1em, -1em);
}


.epc-3-circal .circal-big>div:nth-child(4) {
    border-bottom-right-radius: 100%;
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, .15),
        inset 10px 10px 10px rgba(255, 255, 255, .25);
}

.epc-3-circal .circal-big>div:nth-child(4) div {
    transform: translate(-1em, -1em);
}

.epc-container-3 {
    padding: 5.8em 0;
}

.epc-4-tip {
    font-size: 1.5em;
    color: var(--text-color-2);
}

.epc-4-tip strong {
    font-family: 'OP-B';
    color: var(--theme-color-1);
}

.pc-service-img {
    /* background: url(../images/epc4Bg.png) no-repeat center;
    background-size: 92% 92%; */
    height: 19em;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: relative;
    z-index: 1;
}

.bgImg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 92%;
    display: block;
    z-index: -1;
    /* background-color: #979797; */
}

.ativeImg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 92%;
    display: block;
    z-index: -1;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
    transition: all 3s ease-in-out;
    /* background-color: #979797; */
    /* background: url(../images/epc4Bg-active.png) no-repeat center;
    background-size: 92% 92%; */
    /* clip-path: polygon(0% 0%, 10% 0%, 10% 100%, 0% 100%); */
    /* clip-path: polygon(0% 0%, 74.5% 0%, 74.5% 100%, 0% 100%); */

    /* animation: clipPath 21s infinite ease-in-out forwards; */
    /* animation-delay: 3s; */
}

@keyframes clipPath {
    0% {
        clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);

    }

    20% {
        clip-path: polygon(0% 0%, 24% 0%, 24% 100%, 0% 100%);
    }

    40% {
        clip-path: polygon(0% 0%, 38% 0%, 38% 100%, 0% 100%);
    }

    60% {
        clip-path: polygon(0% 0%, 61.5% 0%, 61.5% 100%, 0% 100%);
    }

    80% {
        clip-path: polygon(0% 0%, 74.5% 0%, 74.5% 100%, 0% 100%);
    }

    100% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
}



.pc-service-img .service-img-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.pc-service-img .service-img-item p {
    font-family: 'OP-B';
    font-size: 1.5em;
    color: var(--text-color-2);
    transition: all .3s ease-in-out;
    cursor: pointer;
}

.pc-service-img .service-img-item span {
    font-size: 1.2em;
    color: var(--text-color-4);
}

.pc-service-img .service-img-item .circal {
    margin-top: 30px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    border: 4px solid var(--theme-color-3);
    transition: all .3s ease-in-out;
}

.pc-service-img>div:nth-child(1) {
    transform: translate(0em, -1em);
}

.pc-service-img>div:nth-child(6) {
    transform: translate(0em, -1em);
}

.pc-service-img>div:nth-child(2) {
    transform: translate(2.5em, -2.5em);
}

.pc-service-img>div:nth-child(5) {
    transform: translate(-2.5em, -2.8em);
}

.pc-service-img>div:nth-child(3) {
    transform: translate(-1.9em, -12.8em);
}

.pc-service-img>div:nth-child(4) {
    transform: translate(3.5em, -12.8em);
}

.servier-step ul {
    display: flex;
    justify-content: space-between;
    margin: 4.6em 0 0 0;
}

.pc-service-img>div:nth-child(3) .circal {
    position: relative;
    z-index: 1;
}

.pc-service-img>div:nth-child(3) .circal:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 10px;
    width: 2px;
    height: 23em;
    z-index: -1;
    border-right: 2px dashed var(--theme-color-3);

}

.pc-service-img>div:nth-child(4) .circal {
    position: relative;
    z-index: 1;
}

.pc-service-img>div:nth-child(4) .circal:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 10px;
    width: 2px;
    height: 23em;
    z-index: -1;
    border-right: 2px dashed var(--theme-color-3);
    transition: all .3s ease-in-out;

}

.pc-serviece-area {
    overflow: hidden;
    padding: 6.2em 0;
}

.servier-step ul li {
    flex: 1;
    font-family: 'OP-B';
    color: var(--theme-color-3);
    text-align: center;
    font-size: 1.65em;

}

.pc-service-img .service-img-item:hover>p {
    color: var(--theme-color-1);
}

.pc-service-img .service-img-item:hover .circal {
    transform: scale(1.3);
    background-color: var(--theme-color-1);
    border: 4px solid var(--theme-color-1);


}

.pc-service-img .service-img-item:hover .circal:after {
    transform: scale(1);
    height: 18em;
}

.epc-layout-3 .cases-container {
    padding: 5.5em 0 0 0;
}

.gray-bg {
    background-color: var(--theme-color-1);
}

.epc-5-container {
    padding: .875em;
    max-width: 86%;
    width: 1440px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.promise-img {
    width: 4.375em;
    height: 5em;
}

.promise-img>div {
    width: 100%;
    height: 100%;
    background: url(../images/sprite2.png) no-repeat;
    background-size: 444.28% 388.75%;
}

.epc-5-container>div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.epc-5-container>div:nth-child(1)>div:nth-child(1)>div {
    background-position: 0% 100%;
}

.epc-5-container>div:nth-child(2)>div:nth-child(1)>div {
    background-position: 30% 100%;
}

.epc-5-container>div:nth-child(3)>div:nth-child(1)>div {
    background-position: 60% 100%;
}

.epc-5-container>div:nth-child(4)>div:nth-child(1)>div {
    background-position: 90% 100%;
}

.epc-5-container>div>div:nth-child(2) {
    flex: 1;
    margin-left: .5em;
}

.epc-5-container>div>div:nth-child(2) p {
    font-family: 'OP-B';
    color: #fff;
    font-size: 1.35em;
}

.epc-5-container>div>div:nth-child(2) span {
    color: var(--text-color-white);
}

#map {
    width: 100%;
    height: 40em;
}

.cpc-form {
    display: flex;
    justify-content: space-between;
}

.cpc-form .left {
    display: flex;
    align-items: center;
}

.cpc-form .left .qr-img {
    width: 13.125em;
    height: 13.125em;

}

.cpc-form .left .qr-img img {
    width: 100%;
}

.cpc-form .left .qr-info {
    margin-left: 1.25em;
}

.cpc-form .left .qr-info p {
    font-size: 1.35em;
    color: var(--text-color-5)
}

.cpc-form .left .qr-info span {
    font-size: 2.75em;
    display: block;
    margin: .25em 0 .575em 0;
    line-height: 1;
    font-family: 'OP-B';
    color: var(--text-color-2);
    font-weight: bold;
}

.cpc-form .left .qr-info>div {
    display: flex;
    align-items: center;
    background-color: var(--theme-color-3);
    width: 60%;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    padding: 0 0 0 .55em;
    transition: all .3s ease-in-out;
    cursor: pointer;

}

.cpc-form .left .qr-info>div:hover {
    background-color: var(--theme-color-1);
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;

}

.cpc-form .left .qr-info>div .chat-icon {
    width: 2.5em;
    height: 2.5em;

}

.cpc-form .left .qr-info>div p {
    color: #fff;
}

.cpc-form .left .qr-info>div .chat-icon>div {
    width: 100%;
    height: 100%;
    background: url(../images/sprite.png) no-repeat;
    background-size: 512% 512%;
    background-position: 54% 77%;
}

.cpc-form .right {
    margin-left: 6em;
    flex: 1;
    background-color: #f1f1f1;
    padding: 2.25em 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.cpc-form .right>p {
    font-size: 1.75em;
    display: block;
    line-height: 1;
    font-family: 'OP-B';
    color: var(--text-color-2);
    font-weight: bold;
    margin-bottom: 1.25em;
}

.cpc-form .right form>div {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .725em 1.75em;

}

.cpc-form .right form>div label {
    width: 5em;
    display: inline-block;
    font-size: 1.125em;

}

.cpc-form .right form>div input {
    background-color: #fff;
    font-size: 1.125em;
    padding: .5em;
    border-radius: 5px;
}

.cpc-form .right form .submit {
    width: 50%;
    margin: 1.25em auto .875em;
    color: #fff;
    border-radius: 15px;
    padding: .625em 0;
    display: block;
    font-size: 1.125em;
    justify-content: center;
    background-color: var(--theme-color-1);
    animation: jump 1.25s infinite ease-in-out;
}

.cpc-form .right form .submit:hover {
    animation-play-state: paused;
}

.cpc-form .right form span {
    color: var(--text-color-1);
    font-size: .875em;
    display: block;
    text-align: center;

}

@keyframes jump {
    0% {
        transform: scale(1) rotate(0);

    }

    /* 20% {
        transform: skewX(5deg);
    } */

    70% {
        transform: scale(1.05);
    }

    /* 60% {
        transform: skewX(-5deg);
    } */



    100% {
        transform: scale(1);
    }

}

.pc-service-img .active p {
    color: var(--theme-color-1);
}

.pc-service-img .active .circal {
    background-color: var(--theme-color-1);
    border: 4px solid var(--theme-color-1);

}