@charset "utf-8";

.service-body{ background: url(../images/yj_fl_service_bg.png) no-repeat top center;background-size: cover; overflow-x: hidden;}

.service-head{ position: relative; overflow: hidden;}
/* todo */
.service-head .logo{ margin-top: .35rem; text-align: center;} 
.service-head .logo img{ width:auto; height:.64rem;object-fit: cover;}

.service-content{ position: relative; z-index: 1;background:url(../images/yj_fl_service_foot_bg.png) no-repeat bottom center;background-size: 100% auto; overflow: hidden;}
/* todo */
.service-content #section-swiper{
    margin-top: 1rem;
    width: 100%;
    overflow: visible;
}
.service-content #section-swiper .swiper-slide{
    position: relative;
    width: 10rem;
    box-sizing: border-box;
}
.service-content #section-swiper .swiper-slide-active {
       /*width: 10.35rem;*/
   transform: scale(1.05);
   -webkit-transform: scale(1.05);
   -moz-transform: scale(1.05);
   -ms-transform: scale(1.05);
   -o-transform: scale(1.05);
}

.service-content #section-swiper .swiper-slide .list-box{
    /* todo */
    position: relative;
    /* margin-top: .20rem; */
    width: 8.5rem;
    height: 3.8rem;
    box-sizing: border-box;
    box-shadow: 0 0 .08rem 0 #dceaf7;
    background-color: rgba(229, 239, 255, .7);
    border-radius: .08rem;
    -webkit-border-radius: .08rem;
    -moz-border-radius: .08rem;
    -ms-border-radius: .08rem;
    -o-border-radius: .08rem;
    z-index: 2;
}
.service-content #section-swiper .swiper-slide-active .list-box{ 
    /* margin-top: 0;
    width: 9rem;
    height: 4.55rem; */
}
.service-content #section-swiper .swiper-slide .list-box .slide-title{
    /* todo */
    position: absolute;
    top: -.40rem;
    left: -.14rem;
    width: 1.16rem;
    height: .40rem;
    background-color: #92add3;
    /* background: linear-gradient(to right, #bcc4db 50%, #9ca7c8 50%); */
    background: linear-gradient(to right, rgb(129,169,232) 50%, rgb(102,144,228) 50%);
    border-top-right-radius: .08rem;
    z-index: 10;
}
.service-content #section-swiper .swiper-slide-active .list-box .slide-title{
    /* todo */
    top: -.52rem;
    left: -.14rem;
    width: 1.54rem;
    height: .52rem;
    background-color: #fdd107;
    /* background: linear-gradient(to right, #f8c63f 50%, #f5be28 50%); */
    background: linear-gradient(to right, rgb(245,188,49) 50%, rgb(240,178,32) 50%);
}
.service-content #section-swiper .swiper-slide .list-box .slide-title span{
    /* todo */
    display: block;
    margin: 0 auto;
    width: 100%;
    height: .40rem;
    line-height: .4rem;
    font-size: .24rem;
    text-align: center;
    box-sizing: border-box;
    color: #fff;
}
.service-content #section-swiper .swiper-slide-active .list-box .slide-title span{
    /* todo */
    height: .52rem;
    font-size: .28rem;
    line-height: .52rem;
}
.service-content #section-swiper .swiper-slide .list-box .tringle{
    display: block;
    position: absolute;
    top: 0;
    left: -.14rem;
    width: 0;
    height: 0;
    width: 0;
    height: 0;
    border: .07rem solid;
    border-color: rgb(102,144,228) rgb(102,144,228) transparent transparent;
}
.service-content #section-swiper .swiper-slide-active .list-box .tringle{
    top: 0;
    left: -.14rem;
    border-color: rgb(240,178,32) rgb(240,178,32) transparent transparent;
}
.service-content #section-swiper .swiper-slide .list-box ul{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
.service-content #section-swiper .swiper-slide .list-box ul::after{
    clear: both;
    height: 0;
    content: "";
    display: block;
    visibility: hidden; 
}
.service-content #section-swiper .swiper-slide .list-box ul li img{
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
}
.service-content #section-swiper .swiper-slide .list-box ul li:hover img{
    transform: scale(1.03);
    -webkit-transform: scale(1.03);
    -moz-transform: scale(1.03);
    -ms-transform: scale(1.03);
    -o-transform: scale(1.03);
}


/* 一行2个带图标，总共2行 */
.service-content #section-swiper .swiper-slide .list-box .ico-list-2{
    /* todo */
    padding: .3rem 0 .2rem 0;
    box-sizing: border-box;
}
.service-content #section-swiper .swiper-slide .list-box .ico-list-2 li{
    float: left;
    width: 50%;
    height: 50%;
    text-align: center;
}

.service-content #section-swiper .swiper-slide .list-box .ico-list-2 li img { 
    /* todo */
    display: block;
    margin:  0 auto;
    width: .85rem;
    height: .85rem;
}
.service-content #section-swiper .swiper-slide .list-box .ico-list-2 li span {
    display: block;
    height: .5rem;
    margin-top: .1rem;
    line-height: .25rem;
    font-size: .17rem;
    letter-spacing: 1.28px;
    text-align: center;
    color: #333;
    overflow: hidden;
}

/* 一行3个带图标，总共2行 */
.service-content #section-swiper .swiper-slide .list-box .ico-list-3{
    /* todo */
    padding: .3rem 0 .2rem 0;
    box-sizing: border-box;
}
.service-content #section-swiper .swiper-slide .list-box .ico-list-3 li{
    float: left;
    padding: 0 .1rem;
    width: 33.33%;
    height: 50%;
    text-align: center;
    box-sizing: border-box;
}

.service-content #section-swiper .swiper-slide .list-box .ico-list-3 li img { 
    /* todo */
    display: block;
    margin:  0 auto;
    width: .85rem;
    height: .85rem;
}
.service-content #section-swiper .swiper-slide .list-box .ico-list-3 li span {
    display: block;
    height: .5rem;
    margin-top: .1rem;
    line-height: .25rem;
    font-size: .17rem;
    letter-spacing: 1.28px;
    text-align: center;
    color: #333;
    overflow: hidden;
}
/* 文字 一行2个 */
.service-content #section-swiper .swiper-slide .list-box .text-list-2{
    /* todo */
    padding: .3rem .4rem 0 .4rem;
    box-sizing: border-box;
}
.service-content #section-swiper .swiper-slide .list-box .text-list-2 li{
    float: left;
    padding: 0 .1rem;
    margin-right: .30rem;
    margin-bottom: .25rem;
    width: calc((100% - .3rem) / 2);
    height: .74rem;
    box-sizing: border-box;
    border: 1px dashed #7aa4dd;
}
.service-content #section-swiper .swiper-slide .list-box .text-list-2 li:nth-child(2n+2){
    margin-right: 0;
}
.service-content #section-swiper .swiper-slide .list-box .text-list-2 li a{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 100%;
}
.service-content #section-swiper .swiper-slide .list-box .text-list-2 li span {
    line-height: 1.3;
    font-size: .17rem;
    letter-spacing: 1.28px;
    text-align: center;
    color: #333;
    overflow: hidden;
}
.service-content #section-swiper .swiper-slide .list-box .text-list-2 li a:hover span{
    color: #4b85d3;
}
/* 文字 一行3个 */
.service-content #section-swiper .swiper-slide .list-box .text-list-3{
    /* todo */
    padding: .3rem .4rem 0 .4rem;
    box-sizing: border-box;
}
.service-content #section-swiper .swiper-slide .list-box .text-list-3 li{
    float: left;
    padding: 0 .1rem;
    margin-right: .30rem;
    margin-bottom: .25rem;
    width: calc((100% - .6rem) / 3);
    height: .74rem;
    box-sizing: border-box;
    border: 1px dashed #7aa4dd;
}
.service-content #section-swiper .swiper-slide .list-box .text-list-3 li:nth-child(3n+3){
    margin-right: 0;
}
.service-content #section-swiper .swiper-slide .list-box .text-list-3 li a{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 100%;
}
.service-content #section-swiper .swiper-slide .list-box .text-list-3 li span {
    line-height: 1.3;
    font-size: .17rem;
    letter-spacing: 1.28px;
    text-align: center;
    color: #333;
    overflow: hidden;
}
.service-content #section-swiper .swiper-slide .list-box .text-list-3 li a:hover span{
    color: #4b85d3;
}

.service-content .section-foot{
    /* todo */
    margin-top: 1.2rem;
    position: relative;
    width: 100%;
    /* height: 1.36rem; */
    z-index: 3;
    box-sizing: border-box;
}

.service-content .section-foot ul{
    margin: 0 auto;
    padding: 0 .4rem;
    width: 100%;
    height: .4rem;
    text-align: center;
    background: url(../images/yj_fl_service_foot_bar_bg.png) no-repeat center;
    box-sizing: border-box;
}

.service-content .section-foot ul li{
    position: relative;
    display: inline-block;
    width: calc(100% / 10);
    height: 100%;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
}
.service-content .section-foot ul li .normal{
    display: inline-block;
    margin-top: .12rem;
    width: .12rem;
    height: .12rem;
    vertical-align: middle;
}
.service-content .section-foot ul li .select{
    display: none;
    margin-top: .11rem;
    width: .18rem;
    height: .18rem;
    vertical-align: middle;
}
.service-content .section-foot ul .active .normal{
    display: none;
}
.service-content .section-foot ul .active .select{
    display: inline-block;
}

.service-content .section-foot ul li .title-box{
    position: absolute;
    left: calc(50% - .5rem);
    top: -.45rem;
    width: 1rem;
    height: .35rem;
    text-align: center;
    /* background-color: rgba(114, 198 , 144, 1); */
    background-color: rgb(91, 190, 125);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-radius: .05rem;
    -webkit-border-radius: .05rem;
    -moz-border-radius: .05rem;
    -ms-border-radius: .05rem;
    -o-border-radius: .05rem;
}
.service-content .section-foot ul li .title-box span{
    font-size: .2rem;
    line-height: .35rem;
    color: #fff;
    font-weight: bold;
    letter-spacing: 1.13px;
}
.service-content .section-foot ul li .tringle{
    position: absolute;
    left: calc(50% - .04rem);
    top: -.1rem;
    width: 0;
    height: 0;
    border: .04rem solid;
    border-color: rgba(114, 198 , 144, 1) transparent transparent transparent;
}
.service-content .section-foot ul li .select-image{
    display: none;
    position: absolute;
    left: calc(50% - .4rem);
    top: -.35rem;
    width: .8rem;
    height: .35rem;
}

.service-content .section-foot ul .active .title-box{
    /* left: calc(50% - .38rem);
    width: .76rem; */
    top: -.85rem;
    background-color: #f3bc00;
}

.service-content .section-foot ul .active .tringle{
    top: -.5rem;
    border-color: #f3bc00 transparent transparent transparent;
}
.service-content .section-foot ul .active .select-image{
    display: block;
}