@charset "utf-8";

#industries{margin: 0 auto;padding: 70px 0;}
#industries .wrap{max-width: 1280px;}

#industries>.display{margin: 0 auto;}
#industries>.display .lists{ margin: 0 auto;}
#industries>.display .lists>ul{margin: 0 auto;}
#industries>.display .lists>ul>li{display: block;float: left;width:32%; margin-right: 2%; margin-bottom: 2%;  position: relative;overflow: hidden; border-radius: 16px; background: #fff; transition: all .35s; }
#industries>.display .lists>ul>li:nth-child(3n){margin-right: 0;}
#industries>.display .lists>ul>li .img{text-align: center; overflow: hidden;border-radius: 10px; transition: all .5s;}
#industries>.display .lists>ul>li .img>img{width: 100%;height: auto;object-fit: cover; transition: all .8s;}
#industries>.display .lists>ul>li .box{ position: absolute; left: 0;top: 0; padding: 30px; width: 100%; box-sizing: border-box;}
#industries>.display .lists>ul>li .box>.ico{position: absolute;z-index: 12; right: 30px;top:60px; opacity: 0; text-align: left; transition: all .35s;}
#industries>.display .lists>ul>li .box>.ico>i{ position: relative; display: inline-block; font-style: normal; width:80px;height: 80px; border-radius: 100px; overflow: hidden; background:#fff;box-sizing: border-box;padding: 12px;}
#industries>.display .lists>ul>li .box>.ico>i>img{width: 100%;height: auto;}
#industries>.display .lists>ul>li .box>.title{font-size:2.4rem; font-weight: bold; color: #fff; transition: all .35s;}
#industries>.display .lists>ul>li:hover{  background: #33ab9f; box-shadow:0 8px 16px #20202026;}
#industries>.display .lists>ul>li:hover .img{transform: translateY(90px);}
#industries>.display .lists>ul>li:hover .box>.title{color: #fff;}
#industries>.display .lists>ul>li:hover .box>.ico{opacity: 1; top: 50px;}


#industries>.view .introduction{margin: 0 auto 30px auto; position: relative; padding:0;}
#industries>.view .introduction .info{position: absolute;z-index: 50; left: 50px; bottom: 30px; box-sizing: border-box;padding: 50px; width: 50%; text-align: left;}
#industries>.view .introduction .info .theme{ display: flex;align-items: center; align-content: center; position: relative; text-align: left;}
#industries>.view .introduction .info .theme>h3{ display: inline-block; font-size: 3.2rem; font-weight: bold; color: #fff; position: relative; z-index: 12;}
#industries>.view .introduction .info .theme>i{ display: none; width: 40px;}
#industries>.view .introduction .info .theme>i>img{width: 100%;height: auto;}
#industries>.view .introduction .info .content{ text-align: left; padding: 30px 0; }
#industries>.view .introduction .info .content>.text{padding-bottom: 30px;font-size: 1.6rem; line-height: 2.8rem; color: #fff;}
#industries>.view .introduction .info .content>.consult{ text-align: left;}
#industries>.view .introduction .info .content>.consult>a{display: inline-flex; background: #33ab9f; box-shadow:0 8px 16px #20202026; border-radius: 50px; color: #fff; padding: 16px 40px; transition: all .35s;}
#industries>.view .introduction .info .content>.consult>a>i{font-size: 2.4rem;display: inline-block; margin-right: 10px;}
#industries>.view .introduction .info .content>.consult>a>span{display: inline-block; font-size: 1.6rem; font-weight: bold;}
#industries>.view .introduction .info .content>.consult>a:hover{box-shadow:0 8px 26px rgba(255,255,255,.2); background: #1aa094; }
#industries>.view .introduction .img{ position: relative; text-align: center;margin: 0 auto; border-radius: 16px; overflow: hidden;}
#industries>.view .introduction .img:after{position: absolute;z-index: 1;left: 0;top: 0;width: 70%; height: 100%; background-image: linear-gradient(90deg, rgba(0,0,0,.7), rgba(0,0,0,0)); content: '';}
#industries>.view .introduction .img>img{width: 100%;height: auto;}
/*#industries>.view .introduction>.layout{ margin: 0 auto;}*/
/*#industries>.view .introduction>.layout .layout-left{width: 35%; box-sizing: border-box;padding-top: 30px;}*/
/*#industries>.view .introduction>.layout .layout-right{position: relative; border-radius: 50px;overflow: hidden; width: 56%;}*/
/*#industries>.view .introduction>.layout .theme{position: relative; text-align: left;}*/
/*#industries>.view .introduction>.layout .theme>h3{font-size: 3.2rem; color: #18181b; position: relative; z-index: 12;}*/
/*#industries>.view .introduction>.layout .theme>i{position: absolute;z-index: 1; left: 0;top: 50%; width: 80px; transform: translateY(-50%);opacity: .1;}*/
/*#industries>.view .introduction>.layout .theme>i>img{width: 100%;height: auto;}*/
/*#industries>.view .introduction>.layout .content{ text-align: left; padding: 30px 0; }*/
/*#industries>.view .introduction>.layout .content>.text{padding-bottom: 30px;font-size: 1.6rem; line-height: 2.8rem; color: #333;}*/
/*#industries>.view .introduction>.layout .content>.consult{ text-align: left;}*/
/*#industries>.view .introduction>.layout .content>.consult>a{display: inline-flex; background: #33ab9f; border-radius: 50px; color: #fff; padding: 16px 40px; transition: all .35s;}*/
/*#industries>.view .introduction>.layout .content>.consult>a>i{font-size: 2.4rem;display: inline-block; margin-right: 10px;}*/
/*#industries>.view .introduction>.layout .content>.consult>a>span{display: inline-block; font-size: 1.6rem; font-weight: bold;}*/
/*#industries>.view .introduction>.layout .content>.consult>a:hover{box-shadow:0 8px 16px #20202026; background: #18181b;}*/
/*#industries>.view .introduction>.layout .img{text-align: right;}*/
/*#industries>.view .introduction>.layout .img>img{width: 100%;height: auto;}*/

#industries>.view .details{margin: 0 auto;}
#industries>.view .details>.nav{margin: 0 auto; border-bottom: 1px solid #ddd; }
#industries>.view .details>.nav.active{background: #eee; width: 100%;max-width: 100%; position: fixed;z-index: 90; left: 0; top: 60px; border-bottom: 0;}
#industries>.view .details>.nav>ul{ display: flex; align-items: center;align-content: center;justify-content: center; margin: 0 auto;}
#industries>.view .details>.nav>ul>li{ position: relative; display: inline-flex; align-content: center;align-items: center; margin: 0 20px;}
#industries>.view .details>.nav>ul>li:after{position: absolute;z-index: 1; left: 0;bottom: -1px;width: 100%;height: 3px;background: #33ab9f;content: '';opacity: 0; transition: all .35s;}
#industries>.view .details>.nav>ul>li>a{ position: relative; display: inline-block; font-size: 1.6rem; color: #333;font-weight: bold;padding: 16px 0;}
#industries>.view .details>.nav>ul>li:hover:after, #industries>.view .details>.nav>ul>li.active:after{opacity: 1;}
#industries>.view .details>.content{margin: 0 auto; padding: 70px 0;}
#industries>.view .details>.content>.marginbottom{margin-bottom: 40px;}
#industries>.view .details>.content .theme{ font-size: 2.4rem; font-weight: bold; color: #18181b;}
#industries>.view .details>.content .container{margin: 0 auto;padding-top: 30px;}
#industries>.view .details>.content .solution .item{ display: block; margin: 0 auto; padding: 30px 0;}
#industries>.view .details>.content .solution .item>.img{width: 36%; float: left;}
#industries>.view .details>.content .solution .item>.img>img{width: 100%;height: auto; border-radius: 16px;}
#industries>.view .details>.content .solution .item>.box{ width: 60%; float: right; box-sizing: border-box;padding: 50px 50px 0 50px;}
#industries>.view .details>.content .solution .item>.box>.title{font-size: 2rem;}
#industries>.view .details>.content .solution .item>.box>.intro{padding-top: 20px; font-size: 1.6rem; color: #666; line-height: 2.4rem;}
#industries>.view .details>.content .solution .item:nth-child(even)>.img{ float: right;}
#industries>.view .details>.content .solution .item:nth-child(even)>>.box{float: left;}
#industries>.view .details>.content .advantage .rows{display: flex; align-items: center;align-content: center; margin-bottom: 16px;}
#industries>.view .details>.content .advantage .rows>i{display: inline-block;font-size: 3.6rem; color: #33ab9f; margin-right: 10px;}
#industries>.view .details>.content .advantage .rows>span{display: inline-block; font-size: 1.6rem; color: #333;}

#industries>.view .details .cases{background: #eff6f5; padding: 70px 0;}
#industries>.view .details .cases>.theme{font-size: 3.2rem;color: #18181b; margin: 0 auto; text-align: center;}
#industries>.view .details .cases>.container{padding-top: 70px; margin: 0 auto; position: relative;}
#industries>.view .details .cases>.container>.layout{margin: 0 auto;}
#industries>.view .details .cases>.container>.layout .rows{display: block; width: 48%; margin-bottom: 3%; float: left; background: #fff; border-radius: 16px;overflow: hidden;box-shadow:0 8px 16px rgba(0,0,0,.05); transition: all .35s;}
#industries>.view .details .cases>.container>.layout .rows:nth-child(even){float: right;}
#industries>.view .details .cases>.container>.layout .rows>.img{width: 40%; float:left;text-align: left;overflow: hidden;}
#industries>.view .details .cases>.container>.layout .rows>.img>img{width: 100%;height: auto; transition: all .8s;}
#industries>.view .details .cases>.container>.layout .rows>.box{width: 60%; float: right; box-sizing: border-box;padding: 50px 30px;text-align: left;}
#industries>.view .details .cases>.container>.layout .rows>.box>.title{font-size: 1.8rem;font-weight: bold; color: #333;transition: all .35s;}
#industries>.view .details .cases>.container>.layout .rows:hover{box-shadow:0 8px 16px rgba(0,0,0,.1); }
#industries>.view .details .cases>.container>.layout .rows:hover .box>.title{color: #33ab9f;}
#industries>.view .details .cases>.container>.layout .rows:hover .img>img{transform: scale(1.05)}

#industries>.view .details .product{ padding: 70px 0;}
#industries>.view .details .product>.theme{font-size: 3.2rem;color: #18181b; margin: 0 auto; text-align: center;}
#industries>.view .details .product>.container{padding-top: 70px; margin: 0 auto; position: relative;}
#industries>.view .details .product>.container .swiper{margin: 0 auto;padding: 20px;}
#industries>.view .details .product>.container .swiper .swiper-slide>a{display: block; background: #f6f6f6; border-radius: 16px; overflow: hidden; transition: all .35s;}
#industries>.view .details .product>.container .swiper .swiper-slide>a .img{text-align: left; padding: 0 20px; transition: all .7s;}
#industries>.view .details .product>.container .swiper .swiper-slide>a .img>img{width: 100%;height: auto;}
#industries>.view .details .product>.container .swiper .swiper-slide>a .box{padding: 30px; box-sizing: border-box; text-align: center;}
#industries>.view .details .product>.container .swiper .swiper-slide>a .box>.title{font-size: 1.8rem; font-weight: bold; color: #333; transition: all .35s;}
#industries>.view .details .product>.container .swiper .swiper-slide>a .box>.intro{ margin-top: 20px; height: 100px;  font-size: 1.5rem; line-height: 2rem; color: #999;}
#industries>.view .details .product>.container .swiper .swiper-slide>a:hover .img{transform: scale(.9);}
#industries>.view .details .product>.container .swiper .swiper-slide>a:hover .box>.title{color: #33ab9f;}
#industries>.view .details .product>.container .prev, #industries>.view .details .product>.container .next{ position: absolute;z-index: 12; left: -70px;top: 50%; cursor: pointer; display: flex;align-content: center;align-items: center; justify-content: center; color: #fff; width: 50px;height: 50px; background: #33ab9f; border-radius: 100%; transition: all .35s;}
#industries>.view .details .product>.container .next{left: auto; right: -70px;}
#industries>.view .details .product>.container .prev i, #industries>.view .details .product>.container .next i{font-size: 2.4rem;}
#industries>.view .details .product>.container .prev:hover, #industries>.view .details .product>.container .next:hover{background: #333;}

#industries>.view .pageurl{display: flex;justify-content: flex-end; align-items: center;}
#industries>.view .pageurl>a{display: inline-block; width: 56px; height: 56px; line-height: 56px;overflow: hidden; text-align: center;border: 1px solid #ddd; color: #666; margin-left: 20px; border-radius: 6px; transition: all .35s;}
#industries>.view .pageurl>a:hover{border-color: #34bab8; color: #34bab8; transform: translateY(-3px);}






@media only screen and (max-width: 1460px){







}

@media only screen and (max-width: 1200px){


    #industries>.display .lists>ul>li .box>.tit{font-size:1.6rem; line-height: 2.4rem; height: 100px; }
    #industries>.display .lists>ul>li .box>.date{ font-size: 1.3rem;}


}


@media only screen and (max-width: 1080px){

    #industries>.view .group .title{ font-size: 3.2rem;}
    #industries>.view .group .row>span{ font-size: 1.2rem;}
}


@media only screen and (max-width: 980px){

    #industries>.display .lists>ul>li{display: block;float: left;width:45%; margin-right: 0;}
    #industries>.display .lists>ul>li:nth-child(even){float: right; }

}

@media only screen and (max-width: 860px){

    #industries>.view .group .title{ width: 100%; font-size: 2.8rem;}
    #industries>.view .group .row{display: block;}
    #industries>.view .group .row>span{display: inline-block;}

    #industries>.view .pageurl>a{width: 42px; height: 42px; line-height: 42px;}

}



@media only screen and (max-width: 780px){

    #industries>.display .lists>ul>li .box>.date{ font-size: 1.2rem;}
    #industries>.display .lists>ul>li .box>.view>span{ font-size: 1.4rem;}

}

@media only screen and (max-width:640px){

    #industries>.display .lists>ul>li{display: block;float: none;width:100%; }
    #industries>.display .lists>ul>li:nth-child(even){float: none; }


    #industries>.view .group .title{ font-size: 2.4rem;}
    #industries>.view .group .row>span{display:block; background: transparent; padding: 5px 0; text-align: center; margin:  auto;}
    #industries>.view .content{ font-size: 1.4rem; line-height: 2.4rem;}
    #industries>.view .pageurl{justify-content: center;}


}