.index-service {}
.index-service .service-item {cursor: pointer;}
.index-service .service-item:hover .drop {color: white;}
.index-service .service-item:hover .drop::before {background-color: var(--brand-color);}
.index-service .service-item:hover h4 {color: var(--brand-color);}

.index-product{ padding-top: 1.2rem; }
.index-product .title{ text-align: center; color: #000; font-weight: bold; }
.index-product .tab{ padding-top: 0.5rem; text-align: center;}
.index-product .tab li{ display: inline-block; margin: 0 1rem; padding-bottom: 1rem; position: relative; cursor: pointer; transition:All 0.5s ease;}
.index-product .tab li:after{ content: ''; position: absolute; left: 50%; bottom: 0; height: 2px; width: 0; background: #0b308e; transition:All 0.5s ease; }
.index-product .tab li:hover {color: #0b308e;}
.index-product .tab li:hover:after{width: 100%; left: 0;}
.index-product .tab .liNow{ color: #0b308e; }
.index-product .tab .liNow:after{ width: 100%; left: 0;}
.index-product .tabContent {display: none;}
.index-product .tabContentDiv{ background: #f8f8f8 url(../images/bg-product.png) center no-repeat; background-size: cover; }
.index-product .leftCon{ padding-top: 5rem; width: 100%; animation: am_left 0.8s ease-out 0.1s backwards; -webkit-animation: am_left 0.8s ease-out 0.1s backwards; }
.index-product .name{ font-size: var(--heading-two); color: #000; font-weight: bold; }
.index-product .midmid{ overflow: hidden; }
.index-product .msg{ margin-bottom: 0.5rem;}
.index-product .links ul {display: flex; flex-wrap: wrap; margin:0; padding: 0;}
.index-product .links li{ display: flex; align-items: center; margin: .5rem 0; height: 2.5rem; width: 50%; line-height: 1; box-sizing: border-box; padding-right: 20px; border-bottom: 1px transparent solid;}
.index-product .links li i {transition: all 0.3s ease-in-out; color: var(--brand-color);}
.index-product .links li:hover i {transform: rotate(180deg); color: var(--brand-color);}
.index-product .links li a{ display: block; padding-left: 4px; line-height: 1; text-overflow: ellipsis; white-space: nowrap;}
.index-product .links li a:hover {color: var(--brand-color);}
.index-product .more {margin-top: 5rem; display: inline-flex; padding: 0 2rem; height: 3rem; align-items: center; line-height: 1; background-color: #eee; border-radius: .65rem;}
.index-product .more:hover{ background: var(--brand-color); color: #fff; }
.index-product .more:hover i {color: #fff;}
.index-product .more span {margin-right: 0.9rem; line-height: 1}
.index-product .more i {margin-bottom: 2px; font-size: 1.2rem; line-height: 1; color: var(--brand-color)}
.index-product .rightImg{ display: flex; justify-content: flex-end; animation: am_right 0.8s ease-out 0.1s backwards; -webkit-animation: am_right 0.8s ease-out 0.1s backwards;  }
.index-product .rightImg img{ margin-left: auto; width: 100%; height: 100%; max-width: 30rem; object-fit: cover; }

.section-news {}
.section-news .swiper-slide .link-arrow {transition: all 0.3s ease-in-out;}
.section-news .swiper-slide:hover .link{color: var(--brand-color);}
.section-news .swiper-slide:hover .link-arrow{transform: translateX(0.5rem);}

@media (max-width: 767.98px) {
    .index-product .tab {width: 100%; overflow-x: auto;}
    .index-product .tab ul {display: inline-flex; padding: 0 1rem; min-width: 100%;}
    .index-product .tab li {flex: 1; padding-bottom: .65rem; font-size: .9rem; white-space: nowrap;}
}
@media (max-width: 575.98px) {
    .index-product .tab li {margin: 0 .8rem;}
}