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

.solution ul{display: flex;}
.solution li{position: relative;width: 32.66%;margin-right: 1%;overflow: hidden;}
.solution li .img{position: relative;width: 100%;padding-bottom: 100%;overflow: hidden;}
.solution li .img img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;transition: all .5s;}
.solution li .img h3{position: absolute;left: 0;right: 0;bottom: 0;color: #fff;font-size: 24px;line-height: 3;text-align: center;background: rgba(0,0,0,.65);transition: all .5s;}
.solution li .txt{position: absolute;top: 100%;left: 0;width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;color: #fff;padding: 10%;backdrop-filter: blur(5px);background: rgba(0,0,0,.65);opacity: 0;transition: all .5s;}
.solution li .txt h3{font-size: 24px;text-align: center;}
.solution li .txt p{font-size: 16px;line-height: 1.8;margin-top: 6%;}
.solution li:hover .img img{transform: scale(1.1);}
.solution li:hover .img h3{opacity: 0;bottom: -15%;}
.solution li:hover .txt{opacity: 1;top: 0;}
@media only screen and (max-width: 1440px){
.solution li h3{font-size: 20px!important;}
.solution li p{font-size: 15px!important;}}
@media only screen and (max-width: 1024px){
.solution li h3{font-size: 17px!important;}
.solution li p{font-size: 13px!important;}}
@media only screen and (max-width: 768px){
.solution li h3{font-size: 16px!important;}
.solution li p{font-size: 12px!important;}}

.scheme{background: #121212;}
.scheme ul{display: flex;flex-wrap: wrap;justify-content: space-between;padding: 4%;margin: 4% 0;background: #fff;}
.scheme li{width: calc(100% / 2 - 7%);margin-bottom: 4.5%;}
.scheme li:nth-last-child(-n+2){margin: 0;}
.scheme li .box{display: flex;align-items: center;}
.scheme li .txt{flex: 1;min-width: 0;margin-right: 7%;color: #000;}
.scheme li .txt h3{font-size: 22px;font-weight: bold;}
.scheme li .txt p{color: #808080;font-size: 14px;margin-top: 4%;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;}
.scheme li .img{flex: none;width: 20%;max-width: 110px;border: 1px solid #707070;}
.scheme li .img figure{position: relative;padding-bottom: 100%;}
.scheme li .img img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
@media only screen and (max-width: 1440px){
.scheme li .txt h3{font-size: 20px;}
.scheme li .txt p{font-size: 13px;}}
@media only screen and (max-width: 1024px){
.scheme li{width: calc(100% / 2 - 3%);margin-bottom: 3%;}
.scheme li .txt{margin-right: 5%;}
.scheme li .txt h3{font-size: 18px;}}
@media only screen and (max-width: 768px){
.scheme ul{padding: 2%;}
.scheme li{width: calc(100% / 2 - 1.5%);}
.scheme li .txt{margin-right: 3%;}
.scheme li .txt h3{font-size: 16px;}
.scheme li .txt p{font-size: 12px;}}
@media only screen and (max-width: 480px){
.scheme ul{padding: 5% 3%;}
.scheme li{width: 100%;padding-bottom: 3%;margin-bottom: 3%!important;border-bottom: 1px solid rgba(0,0,0,.1);}
.scheme li:last-child{margin: 0!important;padding: 0;border: 0;}
.scheme li .txt h3{font-size: 14px;}
.scheme li .txt p{margin-top: 2%;}}

.effect dl{display: flex;}
.effect dd{position: relative;width: 13.5%;height: 640px;transition: all 1s;}
.effect dd .img{width: 100%;height: 100%;}
.effect dd .img img{width: 100%;height: 100%;object-fit: cover;object-position: left;}
.effect 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;}
.effect dd .txt h3{font-size: 36px;font-weight: bold;transition: all 1s;}
.effect dd.cur{width: 59.5%;}
.effect dd.cur .txt{padding: 0;background: rgba(0, 0, 0, .3);}
@media only screen and (max-width: 1440px){
.effect dd{height: 450px;}
.effect dd .txt h3{font-size: 32px;}}
@media only screen and (max-width: 1024px){
.effect dd{height: 400px;}
.effect dd .txt h3{font-size: 24px;}}
@media only screen and (max-width: 768px){
.effect dl{display: flex;flex-wrap: wrap;justify-content: space-between;margin: -1% 2%;}
.effect dd{width: 48%!important;height: auto;margin: 1%;}
.effect dd .img{position: relative;height: auto;padding-bottom: 56.5%;}
.effect dd .img img{position: absolute;top: 0;left: 0;}
.effect dd .txt{padding: 0;background: rgba(0, 0, 0, .3);}
.effect dd .txt h3{font-size: 20px;}}
@media only screen and (max-width: 480px){
.effect dd .txt h3{font-size: 14px;}}

.industry .class{display: flex;justify-content: center;margin-bottom: 1rem;}
.industry .class a{position: relative;color: #000;font-size: 16px;padding: 1% 1.5%;padding-top: 0;margin: 0 1%;}
.industry .class a:after{content:"";position: absolute;left: 50%;bottom: 0;width: 0;height: 2px;transform: translateX(-50%);background: #bf0818;transition: all .5s;}
.industry .class a:hover:after,.industry .class a.on:after{width: 86px;}
.industry li a{display: flex;align-items: stretch;}
.industry li .img{width: 50%;}
.industry li .img figure{position: relative;padding-bottom: 35%;}
.industry li .img img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;}
.industry li .txt{display: flex;width: 50%;padding: 0 5%;flex-direction: column;justify-content: center;color: #000;}
.industry li .txt h3{font-size: 32px;font-weight: bold;}
.industry li .txt p{font-size: 16px;line-height: 1.8;margin-top: 2.5%;}
@media only screen and (max-width: 1440px){
.industry li .txt h3{font-size: 28px;}
.industry li .txt p{font-size: 14px;}}
@media only screen and (max-width: 1024px){
.industry .swiper{margin: -10px 1.5%;padding: 10px;}
.industry .class a{font-size: 14px;}
.industry .class a:hover:after,.industry .class a.on:after{width: 60px;}
.industry li{box-shadow: 0 0 10px rgba(0, 0, 0, .15);}
.industry li .img figure{padding-bottom: 50%;}
.industry li .txt h3{font-size: 24px;}
.industry li .txt p{font-size: 13px;}}
@media only screen and (max-width: 768px){
.industry .class a:hover:after,.industry .class a.on:after{width: 50px;}
.industry li a{display: block;}
.industry li .img,.industry li .txt{width: 100%;}
.industry li .img figure{padding-bottom: 35%;}
.industry li .txt{padding: 3%;}}
@media only screen and (max-width: 480px){
.industry .class a{font-size: 13px;}
.industry .class a:hover:after,.industry .class a.on:after{width: 40px;}
.industry li .txt h3{font-size: 18px;}
.industry li .txt p{font-size: 12px;}}

.service ul{display: flex;flex-wrap: wrap;justify-content: space-between;color: #000;text-align: center;}
.service li{position: relative;display: flex;width: calc(100% / 4 - 3.5%);padding: 1.5% 2.5%;box-shadow: 0 0 10px rgba(0, 0, 0, .15);flex-direction: column;align-items: stretch;background: #fff;justify-content: space-between;}
.service li .icon{display: flex;width: 56px;height: 56px;color: #808080;font-size: 34px;border: 1px solid #808080;border-radius: 50%;justify-content: center;align-items: center;margin: 6% auto;}
.service li .icon i{font-size: inherit;transition: all .5s;}
.service li h3{font-size: 18px;font-weight: bold;margin-bottom: 6%;}
.service li p{color: #808080;font-size: 14px;line-height: 1.5;margin-bottom: auto;}
.service li a{color: #fff;font-size: 16px;line-height: 2.5;border-radius: 5px;margin-top: 6%;background: #bf0818;}
.service li a:hover{background: #f00;}
.service li:hover .icon i{transform: rotateY(360deg);}
@media only screen and (max-width: 1024px){
.service li{width: calc(100% / 4 - 2%);padding: 1.5% 2%;}
.service li .icon{width: 50px;height: 50px;font-size: 30px;}
.service li h3{font-size: 17px;}
.service li p{font-size: 13px;}
.service li a{font-size: 14px;}}
@media only screen and (max-width: 768px){
.service ul{display: flex;flex-wrap: nowrap;padding: 10px;padding-bottom: 1rem;overflow: auto;}
.service li{flex: none;width: 31.333%;margin-right: 3%;}
.service li:last-child{margin-right: 0;}}
@media only screen and (max-width: 480px){
.service ul{display: flex;flex-wrap: wrap;padding: 0;margin-bottom: -3%;}
.service li{width: calc(100% / 2 - 1.5%);margin: 0;margin-bottom: 3%;}
.service li .icon{width: 40px;height: 40px;font-size: 24px;}
.service li h3{font-size: 16px;}
.service li p{font-size: 12px;}
.service li a{font-size: 13px;}}