

 .advan {
    margin-top: 60px;
     padding: 60px  85px;
    background: url("/skin/images/appli_bg.webp") no-repeat;
     background-size: 100% 100%;
 }

 .advan h3 {
     margin-bottom: 5px;
     font-size: var(--fontsize35);
     text-align: center;
     text-transform: uppercase;
     font-size: 48px;
 }

 .advan .title {
     margin: 0px auto;
     color: var(--introcolor);
     max-width: 50%;
     text-align: center;
     margin-bottom: 54px
 }

 .advan .advan-list {
     display: flex;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     margin: 0px -25px
 }

 .advan .advan-list>li {
     width: 25%;
     padding: 0px 25px;
     box-sizing: border-box
 }

 .advan .advan-item {
     padding: 38px 20px 46px;
     box-sizing: border-box;
     height: 100%;
     background: #FFFFFF;
     position: relative
 }

 .advan .advan-item .tit {
     margin: 0px auto;
     text-align: center;
     font-weight: var(--fontbold6);
     margin: 20px 0px;
     font-size: var(--fontsize20)
 }

 .advan .advan-item .con {
     text-align: center;
     line-height: 1.5em;
     color: var(--introcolor)
 }

 .advan .advan-item:hover .advan-icon {
     background-color: var(--color)
 }

 .advan .advan-item:hover .advan-icon .qa {
     background-position: -36px 0px
 }

 .advan .advan-item:hover .advan-icon .gs {
     background-position: -108px 0px
 }

 .advan .advan-item:hover .advan-icon .rn {
     background-position: -180px 0px
 }

 .advan .advan-item:hover .advan-icon .fd {
     background-position: -252px 0px
 }

 .advan .advan-item:hover:after {
     border-bottom: 24px solid var(--color);
     border-left: 24px solid transparent
 }

 .advan .advan-item:after {
     content: "";
     position: absolute;
     display: block;
     height: 0px;
     width: 0px;
     right: 14px;
     bottom: 14px;
     border-bottom: 14px solid var(--color);
     border-left: 14px solid transparent;
     transition: border .3s ease
 }

 .advan .advan-icon {
     width: 65px;
     height: 65px;
     margin: 0px auto;
     border-radius: 5px;
     background: #F6F6F6;
     display: flex;
     justify-content: center;
     align-items: center;
     transition: background-color .3s ease
 }

 .advan .advan-icon>i,
 .advan .advan-icon>em {
     display: block;
     width: 36px;
     height: 36px;
     background: url("/skin/images/advan_icon.webp") no-repeat
 }

 .advan .advan-icon .gs {
     background-position: -72px 0px
 }

 .advan .advan-icon .rn {
     background-position: -144px 0px
 }

 .advan .advan-icon .fd {
     background-position: -216px 0px
 }

 @media screen and (max-width:1470px) {
     .advan .advan-item {
         padding: 15px 10px
     }

     .advan .advan-item .tit {
         margin: 18px 30px
     }
 }

 @media screen and (max-width:768px) {
     #sol-swiper .swiper-slide {
         display: block
     }

     #sol-swiper .sol-title {
         font-size: var(--fontsize18)
     }

     #sol-swiper .sol-r-wrap {
         padding: 5.3333333333vw 4vw
     }

     #sol-swiper .sol-con {
         font-size: var(--fontsize16);
         margin-bottom: 4vw
     }

     .sol-top h3 {
         font-size: var(--fontsize20);
         padding: 5vw 0
     }

     .sol-top {
         background-size: auto 30%;
         background-position: top 0 center
     }

     .more-btn {
         font-size: var(--fontsize14);
         padding: 10px 30px
     }

     .advan h3 {
         font-size: var(--fontsize20)
     }

     .advan .title {
         max-width: 100%;
         font-size: var(--fontsize16);
         margin-bottom: 5.3333333333vw
     }

     .advan {
         padding: 5.3333333333vw 0
     }

     .advan .advan-list>li {
         width: 50%;
         margin-bottom: 4vw;
         padding: 0vw 2vw
     }

     .advan .advan-list {
         margin: 0vw -2vw
     }

     .advan .advan-item .tit {
         font-size: var(--fontsize16);
         margin: 4vw 0vw
     }

     .advan .advan-item .con {
         font-size: var(--fontsize16)
     }
 }

