.service-page { position: relative;}
.service-page.default-page {padding-bottom: 0;}
.service-page.default-page .H-title{margin-bottom: 0;}

.service-content{padding: 100px 0;}

.service-list{box-shadow: 0 40px 80px rgba(107, 186, 34, 0.24); padding: 90px 80px;
    background-image: url(../../image/background/bg-service-list.jpg);
    background-size: cover; background-position: center; background-repeat: no-repeat;
}
.service-list .W-head-box{margin-bottom: 0;}


.service-list-box{position: relative;}
.service-list-box .graphic{display: inline-block; width: 165px; filter:url(#round); opacity: 0.1;
    position: absolute; z-index: 0;
}
.service-list-box .graphic:before {content: ""; display: block; padding-top: 86.6%; 
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    background:linear-gradient(180deg, #00347C 0%, #559CFF 100%);
}
.service-list-box .graphic.-R{right: 150px; bottom: -190px;}
.service-list-box .item-list{margin: 0 0px 0 0;}
.service-list-box li{width: 33.33%; margin-left: -14px; margin-right: -14px;}
.service-list-box .link{display: block; position: relative; width: 300px;}
.service-list-box .bg{display: inline-block; width: 300px; filter:url(#round);}
.service-list-box .bg:before {content: ""; display: block; padding-top: 86.6%; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);}
.service-list-box .thumb{position: absolute; z-index: 1; top: -30px; left: 0; right: 0;}
.service-list-box .img-contain{width: 160px; height: 150px; margin: 0 auto; position: relative; top: 0;
    -webkit-transition: All 400ms ease;
    -moz-transition: All 400ms ease;
    -o-transition: All 400ms ease;
    transition: All 400ms ease;
}
.service-list-box .content{position: absolute; z-index: 1; top: 120px; left: 0; right: 0; text-align: center;}
.service-list-box .title{font-weight: var(--fw-bold); font-size: var(--typo-lg); line-height: 1.2;color: var(--color-white);}
.service-list-box .desc{font-weight: var(--fw-normal); font-size: var(--typo-sm); line-height: 1.5;color: var(--color-white);}
.service-list-box .link:hover .img-contain{top: -5px;}

.service-list-box .-I{margin-top: -140px;}
.service-list-box .-I .bg:before{background: linear-gradient(180deg, #F12DBC 0%, #750ECF 100%);}
.service-list-box .-II {margin-bottom: -110px; position: relative; bottom: -30px;}
.service-list-box .-II .bg:before{background: linear-gradient(180deg, #69D1F5 0%, #69D1F5 100%);}
.service-list-box .-III {margin-top: -140px;}
.service-list-box .-III .bg:before{background: linear-gradient(180deg, #FFF796 0%, #F59B00 100%);}


@media (max-width:1440px) {
    .service-list-box .item-list{margin: 0 -80px 0 0;}
    .service-list-box .graphic.-R {right: 10px;bottom: -200px;}
    .service-list-box .link {width: 260px;}
    .service-list-box .img-contain {width: 140px;height: 130px;}
    .service-list-box .content {top: 100px;}
    .service-list-box .title{font-size: var(--typo-md);}
    .service-list-box .bg {width: 260px;}
}

@media (max-width:991px) {
    .service-list {padding: 40px 80px;}
    .service-list .W-head-box{text-align: center;}
    .service-list .W-head-box br{display: none;}
    .service-list-box {padding-top: 180px;}
    .service-list-box .item-list { margin: 0 -90px 0px -40px;}

}

@media (max-width:767px) {
    .service-content {padding: 30px 0;}

    .service-list {padding: 30px;}
    .service-list .W-head-box br{display: block;}
    .service-list-box {padding-top: 20px;}
    .service-list-box .item-list { margin: 0;}
    .service-list-box .item-list > li{width:260px; margin-left: auto; margin-right: auto; float: none;}
    .service-list-box .-I,
    .service-list-box .-II,
    .service-list-box .-III{margin-top: 30px; margin-bottom: 0; bottom: 0;}
}