@charset "UTF-8"; .tabNav ul li{width: 12.5%;} .tabNav.soldetNav ul li{width: 14.28571%;} .soluKv{position: relative} .soluKv .bg{z-index:2;} .soluKv .bg img{display:block;width:100%;} /*.soluKv::before{content:"";position: absolute;left:0;right:0;top:0;bottom:0;background-color:rgba(0,0,0,.3);z-index:4}*/ .soluKv .box{position:absolute;left:0;right:0;top:0;bottom:0;z-index:5;} .soluKv .container{position: relative;height:100%;z-index:5;} .soluKv .container .txt_body{position: absolute;top:50%;transform: translateY(-50%);} .soluKv .container .txt_body h2{font-size:24px;font-size:2.4rem;color:#fff;font-weight:bold;margin-bottom:25px;} .soluKv .container .txt_body h3{font-size:48px;font-size:4.8rem;line-height:60px;color:#fff;font-weight:bold;} .solu_1{padding-top:55px;} .solu_1 .txt_body{font-size:16px;font-size:1.6rem;line-height:30px;color:#444;} .solu_1 .txt_body p{font-size:16px;font-size:1.6rem;line-height:30px;color:#444;} .solu_2{padding:50px 0 85px;} .solu_2 .content{display:flex;align-items:flex-start;} .solu_2 .content .img_out{width:710px;position: relative;} .solu_2 .content .img_out .box{overflow:hidden;width:710px;position: relative;z-index:2;} .solu_2 .content .img_out i{display:inline-block;height:4px;background-color:#25c1ff;position: absolute;left:0;right:0;bottom:0;z-index:6;} .solu_2 .content .txt_body{margin-left:40px;margin-right:10px;width:calc(100% - 760px);} .solu_2 .content .txt_body h4{font-size:20px;font-size:2rem;line-height:30px;color:#237ae4;font-weight:bold;margin-top:20px} .solu_2 .content .txt_body p{font-size:16px;font-size:1.6rem;line-height:28px;color:#444;text-align:justify;} .solu_2 .content .txt_body h4:first-child{margin-top:0;} .solu_3{height:660px;background-repeat:no-repeat;background-position:right center;position: relative;background-size:100% auto;background-attachment: fixed;}/**/ .solu_3::before{content:"";position: absolute;left:0;right:0;top:0;bottom:0;background:url(../images/solution/bg.png) no-repeat center;background-attachment: fixed;background-size:100% 100%;z-index:1;} .solu_3 .txt_body{padding-top:90px;padding-right:550px;position: relative;z-index:2;} .solu_3 .txt_body h3.pageTit{color:#fff;margin-bottom:45px;} .solu_3 .txt_body h3.pageTit::before{background:#fff;} .solu_3 .txt_body p{font-size:16px;font-size:1.6rem;line-height:28px;color:#fff;padding-left:35px;position: relative;margin-top:20px;text-align:justify;} .solu_3 .txt_body p::before{content:"";display:inline-block;width:4px;height:4px;background-color:#fff;border-radius:50%;position: absolute;left:16px;top:10px;} .solu_4{padding-top:65px; padding-bottom:40px;} .solu_4 .slider{position: relative;} .solu_4 .slider .slider-btn{outline:0;cursor:pointer;display:inline-block;width:30px;height:60px;background-repeat:no-repeat;background-position:center;position: absolute;top:50%;transform: translateY(-50%);transition:all linear .5s;} .solu_4 .slider .slider-btn.left{left:-70px;background-image:url(../images/solution/solu_4_left.png);} .solu_4 .slider .slider-btn.left:hover{background-image:url(../images/solution/solu_4_left_h.png);} .solu_4 .slider .slider-btn.right{right:-70px;background-image:url(../images/solution/solu_4_right.png);} .solu_4 .slider .slider-btn.right:hover{background-image:url(../images/solution/solu_4_right_h.png);} .solu_4 .slider .swiper-slide a{display:block;height:370px;background:#ebf0f4;text-align:center;box-sizing: border-box;padding-top:60px;text-decoration:none;transition:all linear .5s;position: relative} .solu_4 .slider .swiper-slide a .img_out{height:200px;overflow:hidden;margin-bottom:20px;text-align:center;} .solu_4 .slider .swiper-slide a .img_out img{display:inline-block;height:100%;transition:all ease-out .5s;} .solu_4 .slider .swiper-slide a::after{content:"";height:4px;background-color:#25c1ff;display:inline-block;position: absolute;bottom:0;left:50%;transform: translateX(-50%);width:0; z-index:4;transition:all linear .3s;} .solu_4 .slider .swiper-slide a h4{font-size:16px;font-size:1.6rem;line-height:26px;color:#1B2026;transition:all linear .3s;} .solu_4 .slider .swiper-slide a:hover{background:linear-gradient(to bottom right, #25c1ff, #237ae4);background-size:cover;} .solu_4 .slider .swiper-slide a:hover .img_out img{transform: scale(1.05);} .solu_4 .slider .swiper-slide a:hover h4{color:#fff;} .solu_4 .slider .swiper-slide a:hover::after{width:100%;} .solutionKv .txt_body h2{font-size:24px;font-size:2.4rem;color:#fff;font-weight:bold;} .solutionKv .txt_body h3{font-size:48px;font-size:4.8rem;line-height:60px;font-weight:bold;color:#fff;} .soluBy .tabNav a{padding:0 10px;} .soluList{padding-bottom:70px;padding-top:40px;} .soluList .list{padding-top:30px;} .soluList .list .list_box{font-size:0;} .soluList .list .list_box .box{display:inline-block;width:385px;height:260px;margin-right:22px;margin-bottom:40px;} .soluList .list .list_box .box:nth-child(3n){margin-right:0;} .soluList .list .list_box .box a{display:block;width:100%;height:100%;overflow:hidden;position:relative;background-color:#eeeeee;} .soluList .list .list_box .box a .img_out{display:block;width:100%;height:100%;background-color:#eeeeee;text-align:center;} .soluList .list .list_box .box a .img_out img{width:100%;height:100%;object-fit: cover;transition:all linear .5s;} .soluList .list .list_box .box a .txt{width:305px;height:80px;position: absolute;left:0;bottom:0;background-color:#eff0f4;transition:all linear .3s;} .soluList .list .list_box .box a .txt i{font-size:24px;font-size:2.4rem;color:#1B2026;position: absolute;right:15px;top:28px;} .soluList .list .list_box .box a .txt h4{font-size:18px;font-size:1.8rem;line-height:28px;color:#1B2026;position: absolute;left:20px;right:40px;top:50%;transform:translateY(-50%);} .soluList .list .list_box .box a .txt::after{content:"";display:inline-block;position: absolute;bottom:0;background-color:#25c1ff;height:4px;transition:all linear .3s;width:0;left:50%;transform: translateX(-50%);} .soluList .list .list_box .box a:hover .txt::after{width:100%;} .soluList .list .list_box .box a:hover .txt{background-color:#237ae4;} .soluList .list .list_box .box a:hover .txt h4,.soluList .list .list_box .box a:hover .txt i{color:#fff;} .soluList .list .list_box .box a:hover .img_out img{transform: scale(1.05);} .solu_7{background-color:#f0f1f5;padding:60px 0;} .solu_7 .slider{position: relative;} .solu_7 .slider .slider-btn{outline:0;cursor:pointer;display:inline-block;width:30px;height:60px;background-repeat:no-repeat;background-position:center;position: absolute;top:50%;transform: translateY(-50%);transition:all linear .5s;} .solu_7 .slider .slider-btn.left{left:-70px;background-image:url(../images/solution/solu_4_left.png);} .solu_7 .slider .slider-btn.left:hover{background-image:url(../images/solution/solu_4_left_h.png);} .solu_7 .slider .slider-btn.right{right:-70px;background-image:url(../images/solution/solu_4_right.png);} .solu_7 .slider .slider-btn.right:hover{background-image:url(../images/solution/solu_4_right_h.png);} .solu_7 .slider .swiper-slide a{display:block;width:100%;height:100%;overflow:hidden;position: relative;background-color:#eeeeee;} .solu_7 .slider .swiper-slide a .img_out{display:block;width:100%;height:100%;background-color:#eeeeee;height:240px;} .solu_7 .slider .swiper-slide a .img_out img{display:block;width:100%;height:100%;object-fit: cover;transition:all linear .5s;} .solu_7 .slider .swiper-slide a .txt{width:305px;height:80px;position: absolute;left:0;bottom:0;background-color:#eff0f4;transition:all linear .3s;} .solu_7 .slider .swiper-slide a .txt i{font-size:24px;font-size:2.4rem;color:#1B2026;position: absolute;right:15px;top:28px;} .solu_7 .slider .swiper-slide a .txt h4{font-size:20px;font-size:2rem;line-height:28px;color:#1B2026;position: absolute;left:20px;right:40px;top:50%;transform:translateY(-50%);} .solu_7 .slider .swiper-slide a .txt::after{content:"";display:inline-block;position: absolute;lbottom:0;background-color:#25c1ff;height:4px;transition:all linear .3s;width:0;bottom:0;left:50%;transform:translateX(-50%);} .solu_7 .slider .swiper-slide a:hover .txt::after{width:100%;} .solu_7 .slider .swiper-slide a:hover .txt{background-color:#237ae4;} .solu_7 .slider .swiper-slide a:hover .txt h4,.solu_7 .slider .swiper-slide a:hover .txt i{color:#fff;} .solu_7 .slider .swiper-slide a:hover .img_out img{transform: scale(1.05);} .case_tab{padding:30px 0;background:linear-gradient(to bottom right, #25c1ff, #237ae4);text-align:center;} .case_tab a{display:inline-block;margin:0 35px;text-decoration:none;} .case_tab a .icon{width:76px;height:76px;border:2px solid #fff;border-radius:6px;display:inline-block;box-sizing: border-box;background-repeat:no-repeat;background-position:center;transition:all linear .5s;} .case_tab a .icon i{display:block;width:100%;height:100%;background-repeat:no-repeat;background-position:center;opacity:0;transition:all linear .5s;} .case_tab a p{font-size:16px;font-size:1.6rem;line-height:24px;color:#fff;margin-top:10px;} .case_tab a.active .icon,.case_tab a:hover .icon{background-color:#fff;} .case_tab a.active .icon i,.case_tab a:hover .icon i{opacity:1;} .case_1{padding:60px 0;} .case_1 p.txt_body{font-size:16px;font-size:1.6rem;line-height:30px;color:#444;padding-right:120px} .case_2{background-color:#f0f1f5;padding:60px 0;} .case_2 .txt_body img{max-width:100%;} .case_3{padding:60px 0;} .case_3 .txt_body img{max-width:100%;} @media only screen and (min-width : 1920px) { .solu_3{background-size:auto 100%;} }