﻿@charset "utf-8";
.ipro{max-width: 1920px;margin: 0 auto;}
.ipro .section{padding: 4rem 0;}
@media only screen and (max-width: 1440px){
.ipro .section{padding: 3rem 0;}}
@media only screen and (max-width: 768px){
.ipro .section{padding: 2rem 0;}}

.pro_list{margin: -.75% 0;}
.pro_list ul{display: flex;flex-wrap: wrap;margin: -.75%;}
.pro_list li{position: relative;width: calc(100% / 4);margin: 0;padding: .75%;}
.pro_list li a{position: relative;display: flex;flex-direction: column;}
.pro_list li .img{position: relative;width: 100%;padding-bottom: 85.5%;border: 1px solid #707070;border-bottom: 0;overflow: hidden;}
.pro_list li .img img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;transition: all .5s;}
.pro_list li .tit{display: flex;font-size: 18px;background: #b4b4b4;overflow: hidden;}
.pro_list li .tit h3{flex: 1;min-width: 0;color: #000;line-height: 3.35;padding-left: 7%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.pro_list li .tit span{position: relative;flex: none;display: flex;width: 28%;color: #fff;margin-left: auto;background: #bf0818;transform: skewX(-27deg);transform-origin: bottom;justify-content: center;align-items: center;}
.pro_list li .tit span i{font-size: inherit;transform: skewX(27deg) scale(2);transform-origin: right;}
.pro_list li .mask{position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;background: rgba(0,0,0,.65);opacity: 0;transition: all .5s;}
.pro_list li .mask span{position: relative;display: block;color: #000;font-size: 14px;line-height: 2.3;padding: 0 20px;border-radius: 50px;background: rgba(255,255,255,.65);transition: all .5s;}
.pro_list li .mask span i{margin-left: 10px;}
.pro_list li .mask span:hover{background: #fff;}
.pro_list li:hover .mask{opacity: 1;}
.pro_list li:hover .img img{transform: scale(1.1);}
.pro_list .swiper ul{margin: 0;flex-wrap: initial;}
.pro_list .swiper li{padding: 0;}
@media only screen and (max-width: 1440px){
.pro_list li .tit{font-size: 16px;}}
@media only screen and (max-width: 1024px){
.pro_list li{width: calc(100% / 3);}
.pro_list li .tit{font-size: 15px;}
.pro_list li .mask span{font-size: 13px;}}
@media only screen and (max-width: 768px){
.pro_list li{width: calc(100% / 2);padding: 1%;}
.pro_list li .tit{font-size: 14px;}
.pro_list li .mask span{font-size: 12px;padding: 0 15px;}
.pro_list li .mask span i{margin-left: 5px;}}
@media only screen and (max-width: 480px){
.pro_list li{padding: 1.5%;}
.pro_list li .tit{font-size: 13px;text-align: center;}
.pro_list li .tit h3{line-height: 3;padding: 0 5%;}
.pro_list li .tit span{display: none;}
.pro_list li .mask span{line-height: 2;}
.pro_list .swiper li{width: 60%;margin: 0 1.5%!important;}}

.show .pro_list .swiper:before,.show .pro_list .swiper:after{content:"";position: absolute;top: 0;left: 0;width: 15%;height: 100%;background: linear-gradient(-90deg, transparent 0%, #fff 90%);z-index: 2;pointer-events: none;}
.show .pro_list .swiper:after{left: auto;right: 0;background: linear-gradient(90deg, transparent 0%, #fff 90%);}
@media only screen and (max-width: 1024px){
.show .pro_list{margin: -.75% 3%;}}

.advantage{padding-top: 0!important;}
.advantage dl{display: flex;}
.advantage dd{position: relative;width: 16%;height: 480px;transition: all 1s;}
.advantage dd .img{width: 100%;height: 100%;}
.advantage dd .img img{width: 100%;height: 100%;object-fit: cover;object-position: left;}
.advantage dd .txt{position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;padding: 0 50%;color: #fff;text-align: center;flex-direction: column;align-items: center;justify-content: center;background: rgba(0, 0, 0, .85);text-shadow: 0 0 10px #000;transition: all 1s;}
.advantage dd .txt h3{font-size: 36px;font-weight: bold;transition: all 1s;}
.advantage dd.cur{width: 52%;}
.advantage dd.cur .txt{padding: 0;background: rgba(0, 0, 0, .3);}
@media only screen and (max-width: 1440px){
.advantage dd{height: 450px;}
.advantage dd .txt h3{font-size: 32px;}}
@media only screen and (max-width: 1024px){
.advantage dd{height: 400px;}
.advantage dd .txt h3{font-size: 24px;}}
@media only screen and (max-width: 768px){
.advantage{padding-bottom: 3%!important;}
.advantage dl{display: flex;flex-wrap: wrap;justify-content: space-between;margin: -1%;}
.advantage dd{width: 48%!important;height: auto;margin: 1%;}
.advantage dd .img{position: relative;height: auto;padding-bottom: 72.5%;}
.advantage dd .img img{position: absolute;top: 0;left: 0;}
.advantage dd .txt{padding: 0;background: rgba(0, 0, 0, .3);}
.advantage dd .txt h3{font-size: 20px;}}
@media only screen and (max-width: 480px){
.advantage dd .txt h3{font-size: 14px;}}

.youshi dl{position: relative;display: flex;margin: 3rem 0;align-items: center;}
.youshi dl:last-child{margin-right: 0;flex-direction: row-reverse;}
.youshi dt{position: relative;width: 50%;color: #fff;font-size: 14px;padding: 5.5% 8.5%;background: #121212;z-index: 1;}
.youshi dt .tit h3{font-size: 36px;font-weight: bold;}
.youshi dt .tit p{margin-top: 4%;}
.youshi dt .txt p{display: flex;align-items: center;margin-top: 11.5%;}
.youshi dt .txt span{position: relative;display: flex;flex: none;float: left;width: 48px;height: 48px;font-size: 18px;font-weight: bold;justify-content: center;align-items: center;border-radius: 50%;margin-right: 1.5%;background: rgb(191 8 24/45%);z-index: 1;}
.youshi dt .txt span:after{content:"";position: absolute;top: 50%;left: 50%;width: 100%;height: 100%;transform: translate(-50%,-50%) scale(.6666);border-radius: inherit;background: #bf0818;z-index: -1;}
.youshi dd{width: 50%;margin: 2.5rem 0;}
.youshi dd .img{width: 100%;height: 100%;}
.youshi dd .img img{width: 100%;height: 100%;object-fit: cover;}
.youshi ul{display: flex;}
.youshi li{position: relative;width: calc(100% / 4);}
.youshi li:last-child{margin-right: 0;}
.youshi li .img{position: relative;padding-bottom: 100%;overflow: hidden;}
.youshi li .img img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;}
.youshi li h3{position: absolute;bottom: 0;width: 100%;color: #fff;font-size: 22px;line-height: 3;text-align: center;background: rgba(0,0,0,.45);overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
@media only screen and (max-width: 1600px){
.youshi li h3{font-size: 18px;}}
@media only screen and (max-width: 1440px){
.youshi dt{padding: 4.5% 6.5%;}
.youshi dt .tit h3{font-size: 30px;}
.youshi li h3{font-size: 16px;}}
@media only screen and (max-width: 1024px){
.youshi dl{margin: 2rem 0;}
.youshi dt{font-size: 12px;padding: 3.5% 4.5%;}
.youshi dt .tit h3{font-size: 24px;}
.youshi dt .txt p{margin-top: 8%;}
.youshi dt .txt span{transform: scale(.7);transform-origin: left;margin-right: -2%;}
.youshi dd{margin: 1.5rem 0;}
.youshi li h3{font-size: 14px;}}
@media only screen and (max-width: 768px){
.youshi dl{margin: 1.5rem 0;align-items: stretch;}
.youshi dt{width: 70%;}
.youshi dt .tit h3{font-size: 20px;}
.youshi dd{margin: 0;}
.youshi .swiper{margin: 0 3%;margin-bottom: 1%;padding-bottom: 1%;}
.youshi li h3{font-size: 13px;}}
@media only screen and (max-width: 480px){
.youshi>main{display: flex;overflow: auto;flex-direction: row;}
.youshi dl{flex: none;width: 100%;margin: 3% 0;margin-right: 3%;}
.youshi dt{width: 100%;padding: 10% 3%;background: rgb(0 0 0 / 50%);backdrop-filter: blur(5px);}
.youshi dt .tit h3{font-size: 16px;}
.youshi dd{position: absolute;width: 100%;height: 100%;}
.youshi .swiper{margin: 3%;padding-bottom: 3%;margin-bottom: 0;}
.youshi li{width: 80%;margin: 0 1.5%;}}