.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(/uploads/image/psmciicon/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(/uploads/image/psmciback/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(/uploads/image/psmciback/ib.png) no-repeat left 20%; } .intow { background: url(/uploads/image/psmciback/ibq.png) no-repeat left 20%; } .inthr { width: 100% !important; padding: 0 !important; margin: 0 !important; background: url(/uploads/image/psmciback/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(/uploads/image/psmciback/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(/uploads/image/psmciicon/qa.png) no-repeat left center; } .wujina{ background: url(/uploads/image/psmciicon/qaa.png) no-repeat left center !important; color: #f97111 !important; } .shiyan { background: url(/uploads/image/psmciicon/qb.png) no-repeat left center; } .shiyana { background: url(/uploads/image/psmciicon/qba.png) no-repeat left center !important; color: #f97111 !important; } .zhizao { background: url(/uploads/image/psmciicon/qca.png) no-repeat left center; } .zhizaoa { background: url(/uploads/image/psmciicon/qc.png) no-repeat left center !important; color: #f97111 !important; } .zhuanye { background: url(/uploads/image/psmciicon/qd.png) no-repeat left center; } .zhuanyea { background: url(/uploads/image/psmciicon/qda.png) no-repeat left center !important; color: #f97111 !important; } .sujiao { background: url(/uploads/image/psmciicon/qe.png) no-repeat left center; } .sujiaoa { background: url(/uploads/image/psmciicon/qea.png) no-repeat left center !important; color: #f97111 !important; } .corporate { width: 100%; display: flex; justify-content: center; background: url(/uploads/image/psmciback/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(/uploads/image/psmciicon/feiji.png) no-repeat center center; background-size: 80%; } .bbbb { background: url(/uploads/image/psmciicon/love.png) no-repeat center center; background-size: 80%; } .cccc { background: url(/uploads/image/psmciicon/niao.png) no-repeat center center; background-size: 80%; } .dddd { background: url(/uploads/image/psmciicon/zuan.png) no-repeat center center; background-size: 80%; } .eeee { background: url(/uploads/image/psmciicon/hua.png) no-repeat center center; background-size: 80%; } .aa:hover .aaaa{ background: url(/uploads/image/psmciicon/feijib.png) no-repeat center center !important; background-size: 80%; } .bb:hover .bbbb{ background: url(/uploads/image/psmciicon/loveb.png) no-repeat center center !important; background-size: 80%; } .cc:hover .cccc{ background: url(/uploads/image/psmciicon/niaob.png) no-repeat center center !important; background-size: 80%; } .dd:hover .dddd{ background: url(/uploads/image/psmciicon/zuanb.png) no-repeat center center !important; background-size: 80%; } .ee:hover .eeee{ background: url(/uploads/image/psmciicon/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(/uploads/image/psmciicon/right.png) no-repeat center center; background-size: 100%; } .qitade:hover .xianjie { background: url(/uploads/image/psmciicon/rightb.png) no-repeat center 50px; background-size: 30%; } .chuangyishiejie { width: 100%; height: 500px; background: url(/uploads/image/psmciback/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; } }