.intellgent-box{ width: 100%; height: 11rem; padding-top: 110px; /* background: url(../images/intellgent04.jpg) no-repeat bottom; */ background-size: cover; } .intellgent-top{ position: relative; } .intellgent-top .img1{ position: absolute; top: calc(6.5rem - 100px); left: .7rem; width: 35%; z-index: 1; } .intellgent-top .img2{ width: 30%; position: absolute; left: 0; } .intellgent-top .img3{ position: absolute; right: 30px; width: 56%; z-index: 0; height: 10rem; top: 1rem; } .img5{ position: absolute; right: .5rem; top: 8.5rem; width: 31%; } .img6{ position: absolute; right: 1rem; top: 14rem; width: 12%; } .intell-content-box{ width: 80%; margin: 0 auto; position: relative; margin-top: 0; padding-bottom: 3rem; } .cb-1 h3,.cb-2 h3,.cb-3 h3,.cb-4 h3{ font-size: 28px; font-weight: bold; letter-spacing: 2px; } .cb-1 p,.cb-2 p,.cb-3 p,.cb-4 p{ font-size: 16px; color: #666; padding: 10px 0; } .cb-1 ul{ display: flex; flex-wrap: wrap; width: 410px; } .cb-1 li{ width: 130px; height: 130px; margin: 5px 5px 0 0; position: relative; transition: all ease-in .3s; } .cb-1 li span{ width: 130px; height: 130px; line-height: 130px; text-align: center; color: #fff; display: block; position: relative; z-index: 1; } /*.img7-bg{background:url("../images/intellgent07.jpg") no-repeat;background-size:100%} .img8-bg{background:url("../images/intellgent08.jpg") no-repeat;background-size:100%} .img9-bg{background:url("../images/intellgent09.jpg") no-repeat;background-size:100%} .img10-bg{background:url("../images/intellgent10.jpg") no-repeat;background-size:100%} .img11-bg{background:url("../images/intellgent11.jpg") no-repeat;background-size:100%} .img12-bg{background:url("../images/intellgent12.jpg") no-repeat;background-size:100%}*/ .cb-1 li:hover{background-size:110%} .cb-2{ margin-top: 100px; } .cb-3 ul{ width: 700px; } .cb-3 li{ display: inline-block; margin: 30px 20px 0 0; font-size: 16px; color: #444; width: 150px; position: relative; } .img13{ margin-top: 40px; } .img14{ position: relative; top: -130px; left: 0; } .cb-3-child-box{ display: flex; position: relative; } .cb-3 li:after{ content: ''; width: 24px; height: 24px; position: absolute; left: -11px; top: -8px; z-index: -1; border-radius: 50px; } .cb-3 li:nth-child(1):after{background:#ffe4e4} .cb-3 li:nth-child(2):after{background:#e4f1ff} .cb-3 li:nth-child(3):after{background:#fddfb8} .cb-3 li:nth-child(4):after{background:#def6f1} .cb-3 li:nth-child(5):after{background:#f5e0f7} .cb-4-child-box ul{ display: flex; } .cb-4-child-box li:last-child{margin-right:0} .cb-4-child-box li{ background: #f1f1f1; padding: 15px; width: 33%; margin-right: 10px; display: flex; align-items: center; } .cb-4-child-box h4{ font-size: 16px; color: #333; padding: 18px 0; position: relative; } .cb-4-child-box a{ color: #af8437; } .img15{ width: 150px; height: 150px; margin-right: 20px; } .cb-4{width: 1100px;} .cb-4-child-box h4:after{content:'';width: 30px;background: #333;height: 5px;display: block;position: absolute;top: 0;} .cb-4-child-box{margin-top:30px;} .intell-content-box:before{content:'KEEY';position: absolute;left: -98px;letter-spacing: 10px;transform: rotate(90deg);top: 29px;} .intell-content-box:after{content:'';width: 4px;height: calc(100% - 300px);border: 1px solid #333;display: block;position: absolute;left: -40px;top: 0;} .img5,.img6{ animation: inUp 1s ease-in forwards; opacity:0; } @keyframes inUp { 0% { transform: translateY(50%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } .img5{animation-delay:1s} .img6{animation-delay:2s} .img1{ animation: inUp 1s ease-in forwards; opacity:0; } .img2{ animation: inLeft 1s ease-in forwards; opacity:0; } @keyframes inLeft { 0% { transform: translateX(-50%); transform: translateY(-50%); opacity: 0; } 100% { transform: translateX(0); transform: translateY(0%); opacity: 1; } } .flex-box{display: flex;justify-content: flex-start;margin-top: 100px;} /*鎵嬫満绔嚜閫傚簲*/ @media screen and (max-width: 1025px) and (min-width: 320px){ .intellgent-box{ padding-top: 1rem !important; } .intellgent-top .img1{ width: 80%; left: .33rem; top: .5rem; z-index: 1; } .intellgent-top .img3{ width: 90%; top: 2.5rem; left: 0; right: 0; margin: 0 auto; } .swiper-slide{ width: 100% !important; } .img5{ width: 35%; top: 10rem; } .img6{ width: 14%; right: .8rem; top: 12.95rem; } .intell-content-box{ width: 90%; padding: 1rem 0 .1rem; } .intell-content-box:before{ display: none; } .intell-content-box:after{ display: none; } .intell-content-box .cb-2{ width: 100%; margin-top: 1.6rem; } .intell-content-box h3{ font-size: .4rem; letter-spacing: .1em; } .intell-content-box p{ font-size: .3rem; padding: .2rem 0 .1rem; max-width: 500px; margin-bottom: 10px; } .img13{ display: none; } .img13-phone{ display: block !important; width: 100%; } .img15{ width: 100%; height: auto; margin-right: 0; } .flex-box{ width: 100%; margin-top: .8rem; flex-direction: column; } .cb-3-child-box{ margin-bottom: .5rem; } .cb-3 ul{ width: 100%; margin-top: -.2rem; display: flex; flex-wrap: wrap; } .cb-3 li{ margin: .5rem 0 0 0; font-size: .3rem; } .cb-1 ul{ width: 100%; justify-content: space-between; } .cb-1 li{ width: 32%; height: auto; margin: 0 0 .1rem 0; } .cb-1 li img{ width: 100%; } .cb-4{ width: 100%; margin-top: .1rem; } .cb-4-child-box{ margin-top: .3rem; } .cb-4-child-box ul{ flex-wrap: wrap; } .cb-4-child-box li{ width: calc(100% - .6rem); margin: 0 0 .3rem; padding: .3rem; justify-content: space-between; } .cb-4-child-box li>div:nth-child(1){ width: 40%; } .cb-4-child-box li>div:nth-child(2){ width: 55%; } .cb-4-child-box h4{ font-size: .35rem; } .cb-4-child-box h4:after{ width: .7rem; height: .1rem; } .cb-4-child-box a{ font-size: .3rem; } } /*pad鑷€傚簲*/ @media screen and (max-width: 1025px) and (min-width: 760px){ .intellgent-top .img1{ top: calc(2.5rem - 100px); left: .7rem; width: inherit; height: 60px; } .img13-phone{display: none !important;} .img13{display: block;width: 80%;} .intellgent-top .img2{width:30%} .cb-1 li{width:15%} .cb-1 ul{width:90%} .cb-4-child-box li{ width: 25%; margin-right: 15px; } .cb-4-child-box h4{ font-size:14px; } .cb-4-child-box a{font-size:12px;} }