.swiperRot { width: 100%; height: 800px; } .Rotation { width: 100%; height: 800px; overflow: hidden; position: relative; display: flex; flex-direction: column; justify-content: center; } .shine-ring{ width: 84px; height: 84px; cursor: pointer; position: relative; display: block; margin: 0 auto; background: url(../images/icon/sanjioa.png) no-repeat 16px 28px; } .Rotation>img { object-fit: cover; } .RotatiWen { position: absolute; left: 0; width: 100%; display: flex; flex-direction: column; align-items: center; color: white; } .Ronei { width: 80%; } .Ronei>div { width: 50px; height: 4px; background: #f97111; margin: 20px 0; } .Ronei>a { width: 150px; height: 45px; display: flex; align-items: center; justify-content: center; background: #f97111; margin-top: 40px; font-size: 15px; transition: all 0.5s; } .Ronei>a:hover { transform: scale(1.05); } .company { width: 80%; margin-left: 10%; height: 600px; overflow: hidden; display: flex; justify-content: space-between; background: url(../images/back/ia.png) no-repeat 50% 50%; background-size: 20%; } .companyLeft { width: 45%; display: flex; flex-direction: column; justify-content: center; /*padding: 80px 0;*/ } .companyLeft>.fontS29{ font-weight: 800; } .companyLeft>.fontS25 { margin-top: 10px; } .companyRight { width: 43%; overflow: hidden; } .companyRight>img { object-fit: cover; } #year, #zuan, #yuan, #xueli { height: 60px; display: flex; align-items: center; font-size: 30px; color: white; } .t-num { height: 100%; overflow: hidden; width: 24px; text-align: center; } .t-num-s { display: block; height: 100%; width: 100%; font-size: 50px !important; color: #1351d0; font-weight: 700; transform: scale(0.7, 1); } .companJian { width: 100%; display: flex; justify-content: space-between; margin-top: 60px; } .companJian>li { display: flex; flex-direction: column; align-items: center; } .companJian>li>div { display: flex; align-items: flex-end; font-size: 14px; color: #1351d0; } .companJian .fontS14 { color: #666666; } .companyLeft>.fontS14 { margin: 30px 0; color: #666666; line-height: 30px; } .companyLeft>a { width: 250px; height: 60px; margin-top: 70px; display: flex; align-items: center; /*justify-content: center;*/ color: #f97111; align-items: center; transition: all 0.5s; border: 1px solid #1352d000; position: relative; } .chanaaa{ width: 80%; padding: 0 10%; height: 100%; display: flex; align-items: center; justify-content: space-between; } .companyLeft>a>span img{ width: 80px; } .dise{ position: absolute; top: 0; width: 0%; height: 100%; display: flex; z-index: 0; background: #1351d0; transition: all 0.5s; } .iconfont{ font-size: 25px !important; } .companyLeft>a:hover .dise{ width: 100% !important; } .inPriTi>a:hover .dise{ width: 100%; } .zhuanli>img{ width: 46% !important; } .inPriTi>a:hover{ color: white; } .companyLeft>a:hover{ color: white; } .companyLeft>a>img { margin-left: 20px; } .inProduct { width: 100%; background: #f9f9f9; padding: 60px 0; } .inPriTi { width: 80%; margin-left: 10%; height: 90px; background-size: 40%; display: flex; justify-content: space-between; align-items: center; } .innoe { background: url(../images/back/ib.png) no-repeat left 20%; } .intow { background: url(../images/back/ibq.png) no-repeat left 20%; } .inthr { width: 100% !important; padding: 0 !important; margin: 0 !important; background: url(../images/back/ibe.png) no-repeat left 20%; } .inPriTi>.fontS28 { font-weight: 800; } .inPriTi>a { display: flex; align-items: center; /*justify-content: center;*/ width: 250px; height: 60px; transition: all 0.5s; border: 1px solid #1352d000; position: relative; } .inPriTi>a>img { width: 102px; margin-left: 20px; } .proContent { width: 80%; position: relative; padding: 30px 10%; background: url(../images/back/iba.png) no-repeat bottom center; background-size: 100%; } .slideOne { width: 100%; height: 450px; position: relative; overflow: hidden; } .slideOne>img { /*width: 100%;*/ height: 450px; } .cpntOne { position: absolute; top: 0; width: 80%; padding: 10% 10%; height: 80%; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.534), rgba(0, 0, 0, 0.493), rgba(255, 255, 255, 0)); color: white; transition: all 5.5s; } .cpntOne>.fontS14 { margin-top: 10px; } .cpntOnehover { display: flex; flex-direction: column; align-items: center; justify-content: center; } .cpntOne>a { width: 180px; height: 45px; align-items: center; justify-content: center; color: #f97111; border: 1px solid #f97111; font-size: 15px; display: none; margin-top: 60px; } .wuJin { background: url(../images/icon/qa.png) no-repeat left center; } .wuJina{ background: url(../images/icon/qaa.png) no-repeat left center !important; color: #f97111 !important; } .shiyan { background: url(../images/icon/qb.png) no-repeat left center; } .shiyana { background: url(../images/icon/qba.png) no-repeat left center !important; color: #f97111 !important; } .zhizao { background: url(../images/icon/qca.png) no-repeat left center; } .zhizaoa { background: url(../images/icon/qc.png) no-repeat left center !important; color: #f97111 !important; } .zhuanye { background: url(../images/icon/qd.png) no-repeat left center; } .zhuanyea { background: url(../images/icon/qda.png) no-repeat left center !important; color: #f97111 !important; } .sujiao { background: url(../images/icon/qe.png) no-repeat left center; } .sujiaoa { background: url(../images/icon/qea.png) no-repeat left center !important; color: #f97111 !important; } .Corporate { width: 100%; display: flex; justify-content: center; background: url(../images/back/iab.png) no-repeat left bottom; background-size: 20%; } .CorporeCult { width: 80%; display: flex; flex-wrap: wrap; justify-content: flex-end; border-right: 1px solid #dfe4f2; border-bottom: 1px solid #dfe4f2; } .strCopny{ width: 80%; margin-left: 10%; display: none; } .CorporeCult>li { height: 350px; border-top: 1px solid #dfe4f2; border-left: 1px #dfe4f2 solid; display: flex; flex-direction: column; justify-content: center; color: #333333; } .corTit { width: 48%; border: 0 !important; } .qitade { width: 25%; height: 300px; transition: all 0.2s; } .qitade>a { width: 80%; height: 90%; padding: 10% 10% 0 10%; position: relative; } .qitade:hover { background: #1351d0; color: white; } .qitade>a>.fontS25 { margin-top: 23px; margin-bottom: 10px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } .qitade>a>.fontS23{ margin-top: 20px; } .feji { width: 60px; height: 60px; } .aaaa { background: url(../images/icon/feiji.png) no-repeat center center; background-size: 80%; } .bbbb { background: url(../images/icon/love.png) no-repeat center center; background-size: 80%; } .cccc { background: url(../images/icon/niao.png) no-repeat center center; background-size: 80%; } .dddd { background: url(../images/icon/zuan.png) no-repeat center center; background-size: 80%; } .eeee { background: url(../images/icon/hua.png) no-repeat center center; background-size: 80%; } .aa:hover .aaaa{ background: url(../images/icon/feijib.png) no-repeat center center !important; background-size: 80%; } .bb:hover .bbbb{ background: url(../images/icon/loveb.png) no-repeat center center !important; background-size: 80%; } .cc:hover .cccc{ background: url(../images/icon/niaob.png) no-repeat center center !important; background-size: 80%; } .dd:hover .dddd{ background: url(../images/icon/zuanb.png) no-repeat center center !important; background-size: 80%; } .ee:hover .eeee{ background: url(../images/icon/huab.png) no-repeat center center !important; background-size: 80%; } .xianjie { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; position: absolute; bottom: 0; right: 0; background: url(../images/icon/right.png) no-repeat center center; background-size: 100%; } .qitade:hover .xianjie { background: url(../images/icon/rightb.png) no-repeat center 50px; background-size: 30%; } .chuangyiShiejie { width: 100%; height: 500px; background: url(../images/back/sanjiao.png) no-repeat; background-size: cover; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; } .chuangyiShiejie>.fontS14 { margin-top: 30px; margin-bottom: 60px; } .chuangyiShiejie div { border-radius: 100px; display: flex; align-items: center; justify-content: center; animation-name: scaleDraaa; /*关键帧名称*/ animation-timing-function: ease-in-out; /*动画的速度曲线*/ animation-iteration-count: infinite; /*动画播放的次数*/ animation-duration: 6s; /*动画所花费的时间*/ } @keyframes scaleDraaa { /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/ 0% { transform: scale(1); /*开始为原始大小*/ } 25% { transform: scale(1.05); /*放大1.1倍*/ } 50% { transform: scale(1); } 75% { transform: scale(1.05); } } .chuangyiShiejie>div { width: 120px; height: 120px; border: 1px white dotted; } .chuangyiShiejie>div>div { width: 80px; height: 80px; border: 1px white dashed; } .chuangyiShiejie>div>div>div { width: 45px; height: 45px; border: 1px white solid; } .chuangyiShiejie>div>div>div>img { width: 15px; } .inProduct .swiper-pagination{ width: 90%; height: 4px; left: 0; top: auto !important; bottom: 0; border-radius: 4px; overflow: hidden; } .inProduct .swiper-pagination span{ background: white; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top; } @media (max-width: 1100px){ .Rotation>img{ height: 100%; } .qitade>a>.fontS23{ font-size: 14px; } .qitade>a>.fontS25{ font-size: 12px; } .company{ height: auto !important; padding-top: 30px; } .swiperRot,.Rotation{ height: 600px; } .company{ flex-wrap: wrap; } .companyLeft{ width: 90%; } .companyRight{ width: 90%; height: 400px; overflow: hidden; } .companyRight>img{ width: 100%; height: auto !important; } .qitade{ width: 35%; } .proContent{ padding-bottom: 50px !important; } .intow{ width: 100% !important; flex-wrap: wrap; margin-left: 0 !important; } .intow>p{ padding-left: 10%; } .inPriTi>ul{ flex-wrap: wrap; padding-bottom: 50px; } .inPriTi{ height: auto !important; padding-top: 30px; } .inPriTi>ul{ margin-top: 22px; } } @media (max-width: 750px){ .mySwiper{ /*height: 70px !important;*/ } } @media (max-width: 500px){ .seioioio{ display: flex !important; } .qitade{ width: 49%; } .CorporeCult>li{ height: 270px; } .xianjie{ width: 50px !important; height: 50px !important; } .innoe{ flex-wrap: wrap; } .innoe>a{ margin-top: 20px; } .companJian{ flex-wrap: wrap; margin-top: 0 !important; } .companJian>li{ width: 50%; margin-bottom: 30px; } .fontS29 { font-size: 25px !important; white-space: nowrap; text-overflow:ellipsis; overflow: hidden; } .cpntOne>.fontS25{ text-align: left !important; } .companyLeft>.fontS14{ margin: 30px 0 !important; } .companyLeft>a{ margin-top: 0px !important; } .proContent{ width: 100%; margin-left: 0%; padding: 30px 0; background: none !important; }.swiperProduct .swiper-slide{ width: 80% !important; padding: 0 10% !important; } }