.index_banner {
    padding-top: 1rem
}

.swiper-pagination .swiper-pagination-bullet {
    width: .12rem;
    height: .12rem;
    border: .02rem solid;
    border-color: #fff;
    background: 0 0
}

.swiper-pagination .swiper-pagination-bullet-active {
    border-color: var(--color);
    background: var(--color)
}

.banner_text_box {
    padding: .6rem 0;
    border-bottom: .01rem solid #222;
    margin-bottom: .6rem
}

.banner_text_box .banner_text {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.banner_text_box .banner_text .left {
    font-size: .3rem;
    font-family: Cambria;
    font-style: italic;
    width: 40%;
    line-height: .4rem
}

.banner_text_box .banner_text .right {
    font-size: .16rem;
    line-height: .26rem;
    width: 40%
}

.banner_text_box .banner_text .btn_effect4 {
    width: 10%
}

.banner_text_box .banner_text .btn_effect4 .btn_small_list {
    color: #fff;
    padding: .11rem .17rem;
    border-radius: .05rem
}

.banner_text_box .banner_text .btn_effect4 .btn_main_text {
    font-size: .18rem
}

.section {
    padding-bottom: .6rem
}

.head_block {
    margin-bottom: .3rem
}

.head_block .title {
    font-size: .46rem;
    font-family: RobotoBold;
    text-align: center
}

.index_pro_categories .categories_box {
    padding: 0 .2rem;
    margin-bottom: .7rem
}

.index_pro_categories .swiper-slide .item {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    background: #1f2a2d;
    border-radius: .1rem;
    height: 6rem;
    overflow: hidden
}

.index_pro_categories .swiper-slide .item .text_box {
    height: 1.6rem;
    color: #fff;
    padding: .4rem;
    padding-bottom: 0
}

.index_pro_categories .swiper-slide .item .text_box .title {
    font-size: .26rem;
    font-family: RobotoBold;
    margin-bottom: .05rem
}

.index_pro_categories .swiper-slide .item .text_box .remark {
    font-size: .16rem;
    line-height: .24rem;
    overflow: hidden
}

.index_pro_categories .swiper-slide .item .text_box .remark p {
    transform: translateY(-100%);
    transition: all .3s linear;
    height: .48rem;
    overflow: hidden
}

.index_pro_categories .swiper-slide .item .text_box .btn_effect4 {
    margin-top: .3rem;
    transform: translateY(-.5rem);
    transition: all .3s linear
}

.index_pro_categories .swiper-slide .item .text_box .btn_effect4 .btn_small_list {
    border-color: transparent;
    background: rgb(255 255 255 / 15%);
    padding: .06rem .21rem;
    color: #fff
}

.index_pro_categories .swiper-slide .item .text_box .btn_effect4 .btn_small_list:hover {
    background: #fff;
    color: #222
}

.index_pro_categories .swiper-slide .item .text_box .btn_effect4 .btn_main_text {
    font-family: RobotoBold
}

.index_pro_categories .swiper-slide .item .img_box {
    overflow: hidden
}

.index_pro_categories .swiper-slide .item:hover .text_box .remark p {
    transform: translateY(0)
}

.index_pro_categories .swiper-slide .item:hover .text_box .btn_effect4 {
    transform: translateY(0)
}

.index_pro_categories .index_pro_categories_bottom {
    text-align: center
}

.index_pro_categories .index_pro_categories_bottom>p {
    font-size: .2rem;
    line-height: .3rem
}

.index_pro_categories .index_pro_categories_bottom .btn_box {
    margin-top: .3rem
}

.index_pro_categories .index_pro_categories_bottom .btn_box .btn_effect4 .btn_small_list {
    border-width: .02rem;
    color: #fff;
    border-color: var(--color);
    background: var(--color);
    padding: .1rem .25rem;
    min-width: 2.1rem
}

.index_pro_categories .index_pro_categories_bottom .btn_box .btn_effect4 .btn_small_list.hover {
    border-color: #222;
    background-color: #fff;
    color: #222
}

.index_pro_categories .index_pro_categories_bottom .btn_box .btn_effect4:first-child {
    margin-right: .15rem
}

.index_pro_categories .index_pro_categories_bottom .btn_box .btn_effect4:first-child .btn_small_list {
    border-color: #222;
    background: 0 0;
    color: #222
}

.index_pro_categories .index_pro_categories_bottom .btn_box .btn_effect4:first-child .btn_small_list.hover {
    border-color: var(--color);
    background: var(--color);
    color: #fff
}

.index_product {
    padding-bottom: .8rem
}

.index_product .index_product_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border: .01rem solid #222;
    border-radius: .1rem;
    overflow: hidden
}

.index_product .index_product_box .item {
    width: 33.33333%;
    border-top: .01rem solid #222;
    border-right: .01rem solid #222;
    position: relative;
    background-color: #f1faff;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.index_product .index_product_box .item:nth-child(-n+3),.index_product .index_product_box .item:nth-last-child(-n+3) {
    border-top: 0
}

.index_product .index_product_box .item:nth-child(3n) {
    border-right: 0
}

.index_product .index_product_box .item a {
    padding: .4rem;
    display: block;
    position: relative;
    z-index: 2
}

.index_product .index_product_box .item .img_box {
    overflow: hidden;
    text-align: center;
    margin-bottom: .5rem;
    margin-top: .3rem
}

.index_product .index_product_box .item .text_box {
    text-align: center;
    font-size: .18rem;
    font-family: RobotoBold;
    -webkit-line-clamp: 2;
    min-height: .54rem
}

.index_product .index_product_box .item:hover .text_box {
    color: var(--color)
}

.index_about {
    padding: .6rem 0
}

.index_about .auto-container {
    display: flex;
    flex-direction: column-reverse;
    align-items: center
}

.index_about .left {
    width: 9.8rem;
    margin-top: .3rem;
    position: relative
}

.index_about .left .play_btn {
    position: absolute;
    bottom: .2rem;
    left: .2rem;
    background: #fff;
    width: .6rem;
    height: .3rem;
    border-radius: .3rem;
    transition: all .3s linear;
    cursor: pointer
}

.index_about .left .play_btn:before {
    content: '';
    position: absolute;
    top: 20%;
    left: 50%;
    border: .06rem solid transparent;
    border-bottom: .12rem solid #222;
    transform: rotate(90deg);
    transition: all .3s linear
}

.index_about .left .play_btn:hover {
    background: var(--color)
}

.index_about .left .play_btn:hover:before {
    border-bottom-color: #fff
}

.index_about .right {
    width: 11rem;
    text-align: center;
    color: #fff
}

.index_about .right .head_block {
    margin-bottom: .3rem
}

.index_about .right .remark {
    white-space: pre-line;
    font-size: .16rem;
    line-height: .26rem;
    margin-bottom: .1rem
}

.index_about .right .btn_effect4 .btn_small_list {
    border-color: #fff;
    border-width: .02rem;
    background-color: transparent;
    color: #fff
}

.index_about .right .btn_effect4 .btn_small_list.hover {
    border-color: var(--color);
    background-color: var(--color)
}

.index_why_us .head_block {
    max-width: 65%;
    margin: auto;
    text-align: center;
    margin-bottom: .6rem
}

.index_why_us .head_block .title1 {
    font-size: .16rem;
    font-family: RobotoBold;
    color: var(--color)
}

.index_why_us .head_block .remark {
    font-size: .24rem;
    line-height: .36rem;
    margin-bottom: .1rem
}

.index_why_us .index_why_us_box {
    position: relative
}

.index_why_us .index_why_us_box .item_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    min-height: 5rem;
    align-items: center
}

.index_why_us .index_why_us_box .item {
    width: 50%;
    display: flex;
    flex-direction: row-reverse;
    padding-right: 2.5rem;
    justify-content: space-between
}

.index_why_us .index_why_us_box .item:nth-child(even) {
    flex-direction: row;
    padding-left: 2.5rem;
    padding-right: 0
}

.index_why_us .index_why_us_box .item .img_box {
    width: 1rem;
    height: 1rem;
    background: #8edcff;
    border-radius: 1rem;
    line-height: 1rem;
    text-align: center;
    transition: all .3s linear
}

.index_why_us .index_why_us_box .item .img_box img {
    vertical-align: middle;
    max-height: .5rem;
    transition: all .3s linear
}

.index_why_us .index_why_us_box .item:hover .img_box {
    background: var(--color)
}

.index_why_us .index_why_us_box .item:hover .img_box img {
    filter: brightness(0) invert(1)
}

.index_why_us .index_why_us_box .item .text_box {
    width: 80%;
    padding-left: .15rem
}

.index_why_us .index_why_us_box .item:nth-child(odd) .text_box {
    text-align: end;
    padding-right: .15rem
}

.index_why_us .index_why_us_box .item .text_box p {
    font-size: .2rem;
    font-family: RobotoBold;
    line-height: .26rem;
    margin-bottom: .1rem
}

.index_why_us .index_why_us_box .item .text_box span {
    font-size: .16rem;
    line-height: .26rem
}

.index_why_us .index_why_us_box .why_thumb {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center;
    z-index: -1
}

.index_why_us .index_why_us_box .why_thumb img {
    max-width: 6.2rem
}

.index_solutions {
    padding-bottom: 0
}

.index_solutions .auto-container {
    padding-bottom: 1rem;
    border-bottom: .01rem solid
}

.index_solutions .index_solutions_box {
    display: flex;
    justify-content: space-between
}

.index_solutions .index_solutions_box .item {
    width: 48%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end
}

.index_solutions .index_solutions_box .item:nth-child(even) {
    flex-direction: column-reverse
}

.index_solutions .index_solutions_box .item .img_box {
    overflow: hidden;
    width: 100%
}

.index_solutions .index_solutions_box .item .img_box img {
    width: 100%;
    height: auto
}

.index_solutions .index_solutions_box .item .text_box {
    padding-right: .55rem;
    padding-top: .6rem;
    padding-bottom: .55rem
}

.index_solutions .index_solutions_box .item:nth-child(even) .text_box {
    padding-top: .3rem;
    padding-right: 0;
    padding-left: .5rem
}

.index_solutions .index_solutions_box .item .text_box .title {
    font-size: .28rem;
    line-height: .36rem;
    margin-bottom: .15rem
}

.index_solutions .index_solutions_box .item .text_box .remark {
    font-size: .14rem;
    white-space: pre-line;
    -webkit-line-clamp: 11;
    line-height: .22rem
}

.index_solutions .index_solutions_box .item .text_box .btn_effect4 {
    height: .4rem;
    margin-top: .3rem
}

.index_solutions .index_solutions_box .item .text_box .btn_effect4 .btn_small_list {
    border-color: #222;
    border-width: .02rem;
    background-color: transparent;
    color: #222;
    padding: .05rem .25rem
}

.index_solutions .index_solutions_box .item .text_box .btn_effect4 .btn_small_list .btn_main_text {
    font-size: .14rem
}

.index_solutions .index_solutions_box .item .text_box .btn_effect4 .btn_small_list.hover {
    border-color: var(--color);
    background-color: var(--color)
}

.index_solutions .index_solutions_box .item .text_box .btn_effect4 .btn_small_list.hover .btn_main_text {
    color: #fff
}

.index_faq .auto-container {
    display: flex
}

.index_faq .index_faq_box {
    width: 65%;
    position: relative
}

.index_faq .index_faq_box .faq_box {
    padding-top: 1.4rem
}

.index_faq .index_faq_box .faq_box:before {
    content: '';
    display: block;
    background: url(/res/magic/images/index_faq_bg.webp);
    width: 9.57rem;
    height: 8.13rem;
    position: absolute;
    top: 0;
    z-index: -1
}

.index_faq .index_faq_box .faq_box .faq_bg {
    position: absolute;
    top: 2.35rem;
    right: 0;
    z-index: -1
}

.index_faq .index_faq_box .faq_box .head_block {
    margin-bottom: 0
}

.index_faq .index_faq_box .faq_box .head_block .title {
    text-align: left;
    line-height: .5rem
}

.index_faq .index_faq_box .faq_box .btn_effect4 {
    height: .4rem;
    margin-top: .3rem
}

.index_faq .index_faq_box .faq_box .btn_effect4 .btn_small_list {
    border-color: #d9d9d9;
    border-width: .02rem;
    background-color: transparent;
    color: #222;
    padding: .05rem .2rem
}

.index_faq .index_faq_box .faq_box .btn_effect4 .btn_small_list.hover {
    border-color: var(--color);
    background-color: var(--color)
}

.index_faq .index_faq_box .faq_box .btn_effect4 .btn_small_list.hover .btn_main_text {
    color: #fff
}

.index_faq .index_faq_box .faq_box .index_faq_swiper {
    width: 4.3rem;
    margin-left: unset;
    border-radius: .1rem;
    border: .01rem solid #d5dee2;
    background: #fff;
    padding: .3rem .4rem;
    position: relative;
    margin-top: .4rem
}

.index_faq .index_faq_box .faq_box .index_faq_swiper:before {
    content: '';
    display: block;
    background: url(/res/magic/images/arrow_icon.png);
    width: .23rem;
    height: .25rem;
    position: absolute;
    right: -.23rem;
    top: .2rem
}

.index_faq .index_faq_box .faq_box .swiper-wrapper {
    width: 4.3rem
}

.index_faq .index_faq_box .faq_box .swiper-slide .text_box {
    cursor: grab
}

.index_faq .index_faq_box .faq_box .swiper-slide .text_box .title {
    font-size: .2rem;
    line-height: .24rem;
    font-family: RobotoBold;
    margin-bottom: .1rem
}

.index_faq .index_faq_box .faq_box .swiper-slide .text_box .remark {
    font-size: .16rem;
    line-height: .24rem;
    white-space: pre-line
}

.index_faq .index_faq_box .faq_box .swiper-pagination {
    bottom: -.4rem;
    left: 0
}

.index_faq .index_faq_box .faq_box .swiper-pagination .swiper-pagination-bullet {
    border-color: #222
}

.index_faq .index_faq_box .faq_box .swiper-pagination .swiper-pagination-bullet-active {
    background: #fff;
    border-color: var(--color)
}

.index_faq .index_quotation {
    width: 35%;
    margin-top: 1rem;
    border: .02rem solid;
    border-radius: .05rem;
    background-color: #edf7fc;
    padding: .5rem
}

.index_faq .index_quotation .head_block .title {
    font-size: .26rem;
    margin-bottom: .1rem
}

.index_faq .index_quotation .head_block .remark {
    font-size: .16rem;
    line-height: .24rem;
    text-align: center
}

.index_faq .index_quotation .form_box .input {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}

.index_faq .index_quotation .form_box .input div {
    border: .01rem solid #dbdbdb;
    width: 49.5%;
    border-radius: .05rem;
    background: #fff;
    margin-bottom: .05rem
}

.index_faq .index_quotation .form_box .input div input {
    width: 100%;
    line-height: .5rem;
    padding-left: .15rem;
    font-size: .16rem;
    color: #222
}

.index_faq .index_quotation .form_box .input div input::placeholder,.index_faq .index_quotation .form_box textarea::placeholder {
    color: #666
}

.index_faq .index_quotation .form_box .input .pro_categories {
    position: relative
}

.index_faq .index_quotation .form_box .input .pro_categories::before {
    content: '';
    position: absolute;
    top: 40%;
    right: .05rem;
    width: 0;
    height: 0;
    border-left: .06rem solid transparent;
    border-right: .06rem solid transparent;
    border-top: .09rem solid #222;
    transform: translateX(-50%)
}

.index_faq .index_quotation .form_box .input .pro_categories select {
    width: 100%;
    line-height: .5rem;
    padding-left: .15rem;
    cursor: pointer
}

.index_faq .index_quotation .form_box .upload-box #fileName {
    color: var(--color);
    font-size: .16rem;
    overflow: hidden
}

.index_faq .index_quotation .form_box .upload-box .upload-wrap {
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: .4rem
}

.index_faq .index_quotation .form_box .upload-box .upload-wrap .file-ele {
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    height: 100%;
    width: 100%;
    cursor: pointer
}

input[type=file]::-webkit-file-upload-button {
    cursor: pointer
}

.index_faq .index_quotation .form_box .textarea_box {
    border: .01rem solid #dbdbdb;
    border-radius: .1rem;
    height: 1.2rem;
    padding: .15rem;
    background: #fff
}

.index_faq .index_quotation .form_box .textarea_box textarea {
    font-size: .16rem;
    color: #222;
    width: 100%;
    height: 100%
}

.index_faq .index_quotation .form_box .submit {
    margin-top: .2rem;
    text-align: center
}

.index_faq .index_quotation .form_box .submit .btn_effect4 .btn_small_list {
    border-radius: .05rem;
    color: #fff
}

.index_faq .index_quotation .form_box .upload-box {
    padding: .14rem .2rem;
    background: #d5dee2;
    border: .01rem dashed #222;
    border-radius: .05rem;
    margin-top: .1rem;
    margin-bottom: .1rem
}

.index_faq .index_quotation .form_box .upload-box #fileName {
    width: 100%!important;
    margin-top: .1rem
}

.index_faq .index_quotation .form_box .upload-box .upload-wrap {
    display: flex;
    align-items: center
}

.index_faq .index_quotation .form_box .upload-box .upload-wrap .file-open {
    height: 100%;
    width: 1.5rem;
    line-height: .36rem;
    border: .01rem solid #222;
    padding: 0 .1rem;
    border-radius: .05rem;
    background: #fff
}

.index_faq .index_quotation .form_box .upload-box .upload-wrap p {
    font-size: .14rem;
    color: #222;
    display: inline-block;
    margin-left: .3rem
}

.index_faq .index_quotation .form_box .upload-box .upload-wrap .file-open img {
    vertical-align: middle;
    margin-right: .2rem
}

.index_factory {
    padding: .8rem 0
}

.index_factory .index_factory_box .swiper-slide {
    overflow: hidden;
    cursor: pointer;
    width: auto
}

.index_factory .index_factory_box .swiper-slide img {
    height: 2.2rem;
    object-fit: cover
}

.index_news {
    background: #d5dee2;
    padding: .8rem 0;
    padding-bottom: 1.3rem
}

.index_news .index_news_box .index_news_swiper .swiper-slide .item {
    background: #fff
}

.index_news .index_news_box .index_news_swiper .swiper-slide .img_box {
    width: 100%;
    overflow: hidden;
    height: 3rem
}

.index_news .index_news_box .index_news_swiper .swiper-slide .img_box img {
    height: 100%;
    object-fit: cover;
    width: 100%
}

.index_news .index_news_box .index_news_swiper .swiper-slide .text_box {
    padding: .3rem;
    transition: all .3s linear
}

.index_news .index_news_box .index_news_swiper .swiper-slide .text_box h3 {
    font-size: .18rem;
    font-family: RobotoBold;
    line-height: .2rem;
    margin-bottom: .1rem;
    min-height: .4rem;
}

.index_news .index_news_box .index_news_swiper .swiper-slide .text_box p {
    font-size: .16rem;
    line-height: .2rem;
    margin-bottom: .1rem;
    min-height: .4rem;
}

.index_news .index_news_box .index_news_swiper .swiper-slide .text_box span {
    font-size: .16rem;
    line-height: .26rem;
    color: var(--color)
}

.index_news .index_news_box .swiper-pagination {
    margin-top: .4rem;
    left: 0;
    right: 0
}

.index_news .index_news_box .swiper-pagination .swiper-pagination-bullet {
    border-color: #222
}

.index_news .index_news_box .swiper-pagination .swiper-pagination-bullet-active {
    background: 0 0;
    border-color: var(--color)
}