@import "common.css";

/* 轮播 */
.inner-banner{background: url("https://nurmai.oss-cn-hangzhou.aliyuncs.com/video/applets-banner.jpg") no-repeat center; background-size: cover;}

/* 劣势 */
.poor li{width: calc((100% - 180px) / 3);}
.poor li img{width: 72px; height: 72px;}
.poor li h3{font-size: 18px;}

/* 优势 */
.good{height: 280px;}
.good li{width: calc((100% - 120px) / 5); height: 100%; position: relative;}
.good li .off{width: 100%; height: 100%; box-sizing: border-box; padding: 0 30px; position: absolute;}
.good li .on{width: 100%; height: 100%; box-sizing: border-box; padding: 0 30px; position: absolute; background: linear-gradient(224deg,#0f81fe,#1668FF); z-index: 1; box-shadow: 0 2px 33px 0 rgba(15,89,254,.37); opacity: 0;transition: box-shadow .2s linear,height .15s linear,top .15s linear,-webkit-box-shadow .2s linear;}
.good li img{width: 80px; height: 80px;}
.good li h2{font-size: 18px;}
.good li .on p{line-height: 22px; color: hsla(0,0%,100%,.8);}
.good li .button{width: 128px; height: 40px; box-sizing: border-box; border: 1px solid hsla(0,0%,100%,.7);}
.good li .button i{width: 15px; height: 15px; margin-top: 1px;}
.good li .button:hover{background-color: #FFFFFF;}
.good li .button:hover > *{color: #1668FF;}
.good li:hover .on{height: 320px; opacity: 1;}

/* 入口 */
.entry li{width: 118px; margin-top: 50px; margin-right: calc((100% - 826px) / 6);}
.entry li:nth-child(7n){margin-right: 0;}
.entry li .i{width: 78px; height: 78px;}
.entry li .i:after{width: 100%; height: 100%; border-radius: 14px; transform: rotate(23deg); background-color: rgba(22,104,255,0.18); position: absolute; content: ''; z-index: -1; transition: all .3s ease-out 0s;}
.entry li .i i{border-radius: 14px; font-size: 32px;}
.entry li b{font-size: 18px; line-height: 18px;}
.entry li:hover .i:after{transform: rotate(45deg);}

/* 特点 */
.special .info{width: calc(100% - 750px);}
.special .info h2{font-size: 36px; line-height: 36px;}
.special .info h3{font-size: 18px; line-height: 18px;}
.special .info h3:before{width: 8px; height: 8px; background-color: #1668FF; border-radius: 50%; float: left; margin-right: 12px; content: ''}
.special .info a{width: 145px; height: 50px; background-color: #1668FF; color: #FFFFFF;}
.special .image{width: 650px; height: 500px;}
.special ul li{padding: 30px; box-sizing: border-box; align-items: flex-start;}
.special ul li i{width: 58px; height: 58px; font-size: 30px; background-image: linear-gradient(0deg, #F2F9FF 0%,#f8faff 100%); color: #1668FF;}
.special ul li h2{font-size: 18px; line-height: 18px;}
.special ul.n3 li{width: calc((100% - 60px) / 3);}
.special ul.n2 li{width: calc((100% - 30px) / 2);}

/* 流程 */
.step li{width: calc((100% - 90px) / 4); padding: 15px 0; z-index: 2;}
.step li:before{width: calc(100% - 30px); height: 100%; border: #FFFFFF 1px solid; box-sizing: border-box; border-radius: 6px; position: absolute; top: 0; content: ''; z-index: -1;}
.step .info{padding: 30px; top: 45px;}
.step .info h3{font-size: 18px; line-height: 18px;}
.step .info .image{width: 70px; height: 70px; background-image: linear-gradient(0deg, #F2F9FF 0%, #F8FAFF 100%);}
.step .info .image img{width: 60px; height: 60px;}

/* 方案 */
.industry{height: 340px;}
.industry li{width: calc((100% - 620px) / 4); height: 100%; position: relative; transition: all .3s ease-in-out;}
.industry li:first-child{background: url("https://nurmai.oss-cn-hangzhou.aliyuncs.com/applets/industry-a.jpg") no-repeat;background-size: cover;background-position-x: 85%;}
.industry li:nth-child(2){background: url("https://nurmai.oss-cn-hangzhou.aliyuncs.com/applets/industry-b.jpg") no-repeat;background-size: cover;background-position-x: 86%;}
.industry li:nth-child(3){background: url("https://nurmai.oss-cn-hangzhou.aliyuncs.com/applets/industry-c.jpg") no-repeat;background-size: cover;background-position-x: 80%;}
.industry li:nth-child(4){background: url("https://nurmai.oss-cn-hangzhou.aliyuncs.com/applets/industry-d.jpg") no-repeat;background-size: cover;background-position-x: 55%;}
.industry li:nth-child(5){background: url("https://nurmai.oss-cn-hangzhou.aliyuncs.com/applets/industry-e.jpg") no-repeat;background-size: cover;background-position-x: 88%;}
.industry li .txt{width: 100%; height: 100%; padding: 30px; box-sizing: border-box; display: flex; flex-direction: column; opacity: 0; left: -100%; transition: left .4s cubic-bezier(.4,0,.2,1);transition-delay: .1s; position: absolute;}
.industry li .txt h2 p,.industry li .txt h3{font-size: 18px; font-weight: 500;}
.industry li .txt h2{height: 28px;}
.industry li .txt h2 img{width: 28px; height: 28px; margin-top: -1px;}
.industry li .txt h3{width: 100%; line-height: 36px;}
.industry li .txt a{width:108px; height: 40px; background-color: #1668FF; color: #FFFFFF;}
.industry li .icon{width: 100%; height: 111px; position: absolute; bottom: 0;}
.industry li .icon img{width: 40px; height: 40px;}
.industry li .icon p{font-size: 18px; font-weight: 500;}
.industry li.on{width: 560px; background-position-x:0;}
.industry li.on .txt{left: 0; opacity: 1;}
.industry li.on .icon{opacity: 0; visibility: hidden;}

/* 我们 */
.our li{width: calc((100% - 90px) / 4);}
.our li img{width: 160px; height: 118px; border-radius: 8px; position: relative;}
.our li h2{font-size: 18px; line-height: 18px;}

@media (max-width: 1440px) {
    .step .info p{font-size: 15px;}
    .step .info .image{width: 60px; height: 60px;}
    .step .info .image img{width: 50px; height: 50px;}
}
@media (max-width: 1280px) {
    .step .info p{font-size: 14px;}
    .step .info .image{width: 50px; height: 50px;}
    .step .info .image img{width: 40px; height: 40px;}
}