.banner { max-width: 100%; overflow: hidden; position: relative; /*height: calc(100vh - 80px);*/ } .banner > img { width: 100%; } .banner h1 { /*color: var(--themeColor);*/ color: #fff; font-size: 56px; font-weight: 800; font-family: 'hei'; position: absolute; left: 85px; top: 50%; transform: translateY(-50%); } nav { display: flex; justify-content: flex-start; align-items: center; padding: 25px 0; color: #999; } nav a img{ width: 18px; } nav a { color: #999; /*font-size: 16px;*/ font-size: 22px; font-weight: 800; margin: 0 12px; } nav a.nav_a { color: var(--themeColor); } .contents .appfloor1 { background: url('/web/image/yingyong.png') no-repeat; padding: 70px 0 180px 0; } .contents .appfloor1 .yiy { padding-right: 120px; position: relative; } .contents .appfloor1 .yiy .yiyo { padding: 55px 60px; padding-bottom: 48px; background: linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff); box-shadow: -1px 0px 4px 0px rgba(129, 129, 129, 0.21); } .contents .appfloor1 .yiy .yiyo h1 { font-size: 32px; color: #333; margin-bottom: 15px; } .contents .appfloor1 .yiy .yiyo .yiyoimg{ display: flex; justify-content: space-between; /*align-items: flex-start;*/ } .detail .floor1 .yiy .yiyo .yiyoimg{ display: flex; justify-content: space-between; align-items: flex-start; } .contents .appfloor1 .yiy .yiyo p { max-width: 50%; line-height: 2; font-size: 18px; color: #666; padding-top:36px ; } .contents .appfloor1 .yiy img { /*position: absolute;*/ transform: translateX(100px); width: 50%; /*height: 400px;*/ object-fit: contain; /*right: 0;*/ /*bottom: 50px;*/ } .contents .appfloor2 { position: relative; } .contents .appfloor2 .zhpin { width: 90%; position: absolute; z-index: 11; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #fff; display: flex; justify-content: space-between; align-items: flex-start; } .contents .appfloor2 .zhpin .zhpin_left { max-width: 720px; } .contents .appfloor2 .zhpin .zhpin_left h4 { margin-bottom: 200px; font-size: 30px; } .contents .appfloor2 .zhpin .zhpin_left h1 { font-size: 48px; margin-bottom: 10px; margin-top: 100px; } .contents .appfloor2 .zhpin .zhpin_left h6 { font-size: 24px; margin-bottom: 50px; } .contents .appfloor2 .zhpin .zhpin_left p { font-size: 24px; line-height: 2; white-space: wrap; } .contents .appfloor2 .zhpin .zhpin_right { width: 450px; position: relative; } .contents .appfloor2 .zhpin .zhpin_right .swiper { height: 700px; } .contents .appfloor2 .zhpin .zhpin_right .swiper-slide { height: 100%; padding: 20px; } .contents .appfloor2 .zhpin .zhpin_right .swipers { height: 100%; margin-left: auto; margin-right: auto; position: relative; list-style: none; padding: 0; z-index: 1; } .contents .appfloor2 .zhpin .zhpin_right .my-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; flex-direction: column; transition-property: transform; box-sizing: content-box; } .contents .appfloor2 .zhpin .zhpin_right .my-slide { cursor: pointer; padding: 25px; background: rgba(255,255,255,0.8); transition: 0.3s; box-shadow: 0px 1px 6px 0px rgba(129, 129, 129, 0.21); border-radius: 5px; margin-bottom: 30px; } .contents .appfloor2 .zhpin .zhpin_right .my-slide:hover { transform: scale(1.05); } .contents .appfloor2 .zhpin .zhpin_right .my-slide:hover .icon { transition: all 0.8s; transform: scale(1.1); } .contents .appfloor2 .zhpin .zhpin_right .my-slide:hover .icon .progress-right .progress-bar { animation: loading-1 0.4s linear forwards; } .contents .appfloor2 .zhpin .zhpin_right .my-slide:hover .icon .progress-left .progress-bar { animation: loading-2 0.4s linear forwards 0.4s; } .contents .appfloor2 .zhpin .zhpin_right .my-slide:hover .icon img.img1 { display: block; } .contents .appfloor2 .zhpin .zhpin_right .my-slide:hover .icon img.img2 { display: none; } .contents .appfloor2 .zhpin .zhpin_right .my-slide h3 { font-size: 22px; color: #333; margin-bottom: 10px; } .contents .appfloor2 .zhpin .zhpin_right .my-slide p { font-size: 16px; color: #999999; margin-bottom: 10px; display: -webkit-box; display: -moz-box; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; white-space: normal !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .contents .appfloor2 .zhpin .zhpin_right .my-slide .icon { height: 34px !important; width: 34px !important; border-radius: 50%; display: flex; justify-content: center; align-items: center; border: 1px solid #DBDCE1; margin: 0; } .contents .appfloor2 .zhpin .zhpin_right .my-slide .icon img { width: calc(100% - 12px); } .contents .appfloor2 .zhpin .zhpin_right .my-slide .icon img.img1 { display: none; } .contents .appfloor2 .zhpin .zhpin_right .my-slide .icon img.img2 { display: block; } .contents .appfloor2 .zhpin .zhpin_right .swiper_btn { position: absolute; bottom: 40px; right: -50px; } .contents .appfloor2 .zhpin .zhpin_right .swiper_btn .swiper-buttons { width: 48px; cursor: pointer; aspect-ratio: 1; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-top: 14px; background: var(--themeColor); } .contents .appfloor2 .zhpin .zhpin_right .swiper_btn .swiper-buttons .img2 { transform: rotateX(180deg); } .contents .appfloor2 .zhpin .zhpin_right .swiper_btn .swiper-buttons.swiper-button-prevs .img2 { display: none; } .contents .appfloor2 .zhpin .zhpin_right .swiper_btn .swiper-buttons.swiper-button-nexts .img1 { display: none; } .contents .appfloor2 .zhpin .zhpin_right .swiper_btn .swiper-buttons.swiper-button-disabled { background: #fff; } .contents .appfloor2 .zhpin .zhpin_right .swiper_btn .swiper-buttons.swiper-button-disabled.swiper-button-prevs .img1 { display: none; } .contents .appfloor2 .zhpin .zhpin_right .swiper_btn .swiper-buttons.swiper-button-disabled.swiper-button-prevs .img2 { display: block; } .contents .appfloor2 .zhpin .zhpin_right .swiper_btn .swiper-buttons.swiper-button-disabled.swiper-button-nexts .img1 { display: block; } .contents .appfloor2 .zhpin .zhpin_right .swiper_btn .swiper-buttons.swiper-button-disabled.swiper-button-nexts .img2 { display: none; } .contents .appfloor2 .zhpin .zhpin_right .swipers_bt { padding: 0 20px; margin-bottom: 40px; } .contents .appfloor2 .zhpin .zhpin_right .swipers_bt .swipe_top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .contents .appfloor2 .zhpin .zhpin_right .swipers_bt .swipe_top .swipe_num { display: flex; align-items: flex-start; } .contents .appfloor2 .zhpin .zhpin_right .swipers_bt .swipe_top .swipe_num h3 { font-size: 48px; line-height: 1; } .contents .appfloor2 .zhpin .zhpin_right .swipers_bt .swipe_top .swipe_num h6 { font-size: 24px; } .contents .appfloor2 .zhpin .zhpin_right .swipers_bt .swipe_top .swipe_bt { position: relative; display: flex; align-items: center; } .contents .appfloor2 .zhpin .zhpin_right .swipers_bt .swipe_top .swipe_bt .swiper-button { position: static; width: auto; height: auto; margin: 0; margin-left: 25px; } .contents .appfloor2 .zhpin .zhpin_right .swipers_bt .swipe_top .swipe_bt .swiper-button img { width: 25px; } .contents .appfloor2 .zhpin .zhpin_right .swipers_bt .swipe_top .swipe_bt .swiper-button::after { content: ""; } .contents .appfloor2 .zhpin .zhpin_right .swipers_bt .swiper-pagination { position: static; background: #DBDCE1; height: 4px; } .contents .appfloor2 .zhpin .zhpin_right .swipers_bt .swiper-pagination .swiper-pagination-progressbar-fill { background: var(--themeColor); } .contents .appfloor3 { background: #F1F6FA; padding: 100px 0; } .contents .appfloor3 h5 { font-size: 30px; font-weight: bold; margin-bottom: 80px; } .contents .appfloor3 .app_ul { overflow: hidden; } .contents .appfloor3 .app_ul .swiper-slide { position: relative; border-radius: 5px; overflow: hidden; transition: 0.3s; background-repeat: no-repeat; background-position: top right; background-size: cover; } .contents .appfloor3 .app_ul .swiper-slide:hover { box-shadow: 0 0 18px 0px rgba(0, 0, 0, 0.2); } .contents .appfloor3 .app_ul .swiper-slide .text { /*position: absolute;*/ /*left: 50px;*/ /*top: 75px;*/ /*color: #fff;*/ /*width: calc(100% - 100px);*/ width: 100%; padding: 50px; } .contents .appfloor3 .app_ul .swiper-slide .text h3 { font-size: 27px; font-weight: bold; margin-bottom: 45px; color: #fff; } .contents .appfloor3 .app_ul .swiper-slide .text span { width: 90px; height: 2px; background: #fff; display: block; margin-bottom: 48px; } .contents .appfloor3 .app_ul .swiper-slide .text p { font-size: 18px; color: #fff; height: 4.5em; overflow: hidden; } .detail .floor1 { background: url('/web/image/yydetailbg.png') no-repeat; background-size: cover; padding: 70px 0; } .detail .floor1 .yiy { padding-right: 120px; position: relative; } .detail .floor1 .yiy .yiyo { padding: 55px 60px; padding-bottom: 50px; background: linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff); box-shadow: -1px 0px 4px 0px rgba(129, 129, 129, 0.21); } .detail .floor1 .yiy .yiyo h1 { font-size: 32px; color: #333; margin-bottom: 50px; } .detail .floor1 .yiy .yiyo p { max-width: 50%; line-height: 2; font-size: 18px; color: #666; } .detail .floor1 .yiy img { /*position: absolute;*/ transform: translateX(20%); height: 400px; object-fit: contain; /*right: 0;*/ /*bottom: 50px;*/ } .detail .floor2 { display: flex; justify-content: flex-start; align-items: center; padding: 70px 0; } .detail .floor2 .floor2_left { overflow-y: auto; height: 380px; width: 240px; margin-right: 28px; border-right: 1px solid #EDEDED; position: relative; } .detail .floor2 .floor2_left::before { content: ""; z-index: 11; position: absolute; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 90%, rgba(255, 255, 255, 0.8) 100%); } .detail .floor2 .floor2_left li { padding: 13px 47px; position: relative; margin-bottom: 20px; transition: 0.3s; cursor: pointer; } .detail .floor2 .floor2_left li:last-of-type { margin-bottom: 0; margin-right: 0; } .detail .floor2 .floor2_left li:hover { background: var(--themeColor); } .detail .floor2 .floor2_left li:hover span { color: #fff; } .detail .floor2 .floor2_left li.active { background: var(--themeColor); } .detail .floor2 .floor2_left li.active span { color: #fff; } .detail .floor2 .floor2_left li span { width: 110px; font-size: 16px; color: #333; transition: 0.3s; font-family: Regular; } .detail .floor2 .floor2_left li img { position: absolute; right: 35px; top: 50%; transform: translateY(-50%); width: 20px; } .detail .floor2 .floor2_right { width: calc(100% - 268px); } .detail .floor2 .floor2_right .floor2_top { margin-bottom: 35px; display: flex; justify-content: space-between; align-items: center; } .detail .floor2 .floor2_right .floor2_top .floor2_swp { overflow: hidden; width: calc(100% - 120px); } .detail .floor2 .floor2_right .floor2_top .swiper-slide { width: auto; font-size: 18px; padding: 5px 25px; border: 1px solid transparent; transition: 0.3s; cursor: pointer; font-family: Regular; } .detail .floor2 .floor2_right .floor2_top .swiper-slide:hover { border-color: var(--themeColor); color: var(--themeColor); box-shadow: inset 2px 2px 13px 0px rgba(207, 15, 25, 0.08); } .detail .floor2 .floor2_right .floor2_top .swiper-slide.active { border-color: var(--themeColor); color: var(--themeColor); box-shadow: inset 2px 2px 13px 0px rgba(207, 15, 25, 0.08); } .detail .floor2 .floor2_right .floor2_top .swiper_btn { display: flex; align-items: center; margin-left: 30px; } .detail .floor2 .floor2_right .floor2_top .swiper_btn .swiper_btns { width: 48px; aspect-ratio: 1; border-radius: 50%; display: flex; justify-content: center; align-items: center; background: var(--themeColor); margin-left: 20px; cursor: pointer; } .detail .floor2 .floor2_right .floor2_top .swiper_btn .swiper_btns .img1 { display: block; } .detail .floor2 .floor2_right .floor2_top .swiper_btn .swiper_btns .img2 { display: none; } .detail .floor2 .floor2_right .floor2_top .swiper_btn .swiper_btns.swiper-button-prevss { transform: rotate(180deg); } .detail .floor2 .floor2_right .floor2_top .swiper_btn .swiper_btns.swiper-button-disabled { box-shadow: 0px 2px 9px 0px rgba(207, 15, 25, 0.06); background: #fff; } .detail .floor2 .floor2_right .floor2_top .swiper_btn .swiper_btns.swiper-button-disabled .img1 { display: none; } .detail .floor2 .floor2_right .floor2_top .swiper_btn .swiper_btns.swiper-button-disabled .img2 { display: block; } .detail .floor2 .floor2_right .appswiper { width: 100%; overflow: hidden; } .detail .floor2 .floor2_right .appswiper .swiper-slide:hover .img { border-color: var(--themeColor); } .detail .floor2 .floor2_right .appswiper .swiper-slide:hover .img img { scale: 1.1; } .detail .floor2 .floor2_right .appswiper .swiper-slide:hover .txt { color: var(--themeColor); } .detail .floor2 .floor2_right .appswiper .swiper-slide:hover .txt .txt_img { border-color: var(--themeColor); } .detail .floor2 .floor2_right .appswiper .swiper-slide:hover .txt .txt_img img.img2 { display: block; } .detail .floor2 .floor2_right .appswiper .swiper-slide:hover .txt .txt_img img.img1 { display: none; } .detail .floor2 .floor2_right .appswiper .swiper-slide .img { height: 250px; border: 1px solid #EDEDED; display: flex; justify-content: center; align-items: center; margin-bottom: 20px; transition: 0.3s; overflow: hidden; } .detail .floor2 .floor2_right .appswiper .swiper-slide .img img { object-fit: contain; width: 80%; transition: 0.3s; } .detail .floor2 .floor2_right .appswiper .swiper-slide .txt { font-size: 18px; color: #666; display: flex; align-items: center; justify-content: space-between; } .detail .floor2 .floor2_right .appswiper .swiper-slide .txt .txt_img { width: 22px; aspect-ratio: 1; display: flex; justify-content: center; align-items: center; border: 1px solid rgba(102, 102, 102, 0.5); border-radius: 50%; transition: 0.3s; } .detail .floor2 .floor2_right .appswiper .swiper-slide .txt .txt_img img { width: 50%; } .detail .floor2 .floor2_right .appswiper .swiper-slide .txt .txt_img img.img1 { display: block; } .detail .floor2 .floor2_right .appswiper .swiper-slide .txt .txt_img img.img2 { display: none; } .detail .floor3 { position: relative; } .detail .floor3 img{ width:100%; height: 100%; object-fit: cover; /*position: relative;*/ } .detail .floor3 .floor3_txt { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; } .detail .floor3 .floor3_txt h3 { font-size: 30px; font-family: Bold; margin-bottom: 28px; } .detail .floor3 .floor3_txt p { font-size: 18px; font-family: Regular; } @media screen and (max-width: 1550px) { .contents .appfloor1 .yiy .yiyo { padding-bottom: 120px; } .detail .floor1{ padding-bottom: 80px; } .contents .appfloor1 .yiy .yiyo p { font-size: 14px; } .detail .floor1 .yiy .yiyo { padding-bottom: 120px; } .detail .floor1 .yiy .yiyo p { font-size: 14px; } .detail .floor2 .floor2_right .appswiper .swiper-slide .img { height: 200px; } .contents .appfloor1 .yiy img{ height: auto; width: 50%; } .detail .floor1 .yiy img{ height: auto; width: 50%; } .contents .appfloor2 .zhpin .zhpin_left { max-width: 600px; } .contents .appfloor2 .zhpin .zhpin_left h4 { font-size: 28px; margin-bottom: 100px; } .contents .appfloor2 .zhpin .zhpin_left h1 { font-size: 32px; } .contents .appfloor2 .zhpin .zhpin_left h6 { font-size: 20px; margin-bottom: 30px; } .contents .appfloor2 .zhpin .zhpin_left p { font-size: 18px; } .contents .appfloor2 .zhpin .zhpin_right { width: 400px; } /*.contents .appfloor2 .zhpin .zhpin_right .swiper {*/ /* height: 500px;*/ /*}*/ .contents .appfloor2 .zhpin .zhpin_right .swipers_bt { margin-bottom: 20px; } .contents .appfloor2 .zhpin .zhpin_right .swipers_bt .swipe_top .swipe_num h3 { font-size: 36px; } .contents .appfloor2 .zhpin .zhpin_right .swipers_bt .swipe_top .swipe_num h6 { font-size: 18px; } .contents .appfloor2 .zhpin .zhpin_right .my-slide h3 { font-size: 16px; } .contents .appfloor2 .zhpin .zhpin_right .my-slide p { font-size: 14px; } } @media screen and (max-width: 1350px) { nav{ padding: 15px 0; } nav a{ font-size: 14px; } .detail .floor2 .floor2_right .floor2_top .swiper-slide{ font-size: 14px; padding: 5px 15px; } .detail .floor2 .floor2_right .appswiper .swiper-slide .txt{ font-size: 14px; } .detail .floor2 .floor2_right .floor2_top .swiper_btn .swiper_btns{ width: 35px; } .contents .appfloor2 .zhpin .zhpin_right .my-slide{ padding: 30px; } .contents .appfloor1 { padding-bottom: 100px; } .contents .appfloor2 > img { width: 100%; } .contents .appfloor2 .zhpin .zhpin_left { max-width: 600px; } .contents .appfloor2 .zhpin .zhpin_left h4 { font-size: 28px; margin-bottom: 100px; } .contents .appfloor2 .zhpin .zhpin_left h1 { font-size: 32px; } .contents .appfloor2 .zhpin .zhpin_left h6 { font-size: 20px; margin-bottom: 30px; } .contents .appfloor2 .zhpin .zhpin_left p { font-size: 18px; } .contents .appfloor2 .zhpin .zhpin_right { width: 360px; } .contents .appfloor2 .zhpin .zhpin_right .swiper { height: 500px; } .contents .appfloor2 .zhpin .zhpin_right .swipers_bt { margin-bottom: 20px; } .contents .appfloor2 .zhpin .zhpin_right .swipers_bt .swipe_top .swipe_num h3 { font-size: 36px; } .contents .appfloor2 .zhpin .zhpin_right .swipers_bt .swipe_top .swipe_num h6 { font-size: 18px; } .contents .appfloor2 .zhpin .zhpin_right .my-slide h3 { font-size: 16px; } .contents .appfloor2 .zhpin .zhpin_right .my-slide p { font-size: 14px; } } @media screen and (max-width:600px){ nav a{ margin: 0 5px; } .contents .appfloor1{ padding: 60px 0; } .contents .appfloor1 .yiy{ padding-right: 0; } .contents .appfloor1 .yiy .yiyo{ padding: 30px !important; } .contents .appfloor1 .yiy .yiyo h1{ font-size: 28px; margin-bottom: 15px; } .contents .appfloor1 .yiy .yiyo p{ max-width: 100%; width: 100%; line-height: 1.5; margin-bottom: 15px; } .contents .appfloor1 .yiy img{ width: 100%; position: static; } .banner{ height: 200px; } .banner > img{ height: 100%; object-fit: cover; } .banner h1{ left: 5vw; font-size: 30px; animation-fill-mode:none; } .contents .appfloor2 > img{ display: none; } .contents .appfloor2{ background: url('/web/image/wupinbg.png') no-repeat; background-size: cover; } .contents .appfloor2 .zhpin{ transform: none; position: static; flex-direction: column; } .contents .appfloor2 .zhpin .zhpin_left{ width: 100%; max-width: 100%; margin-bottom: 20px; padding-top: 20px; } .contents .appfloor2 .zhpin .zhpin_right{ width: 100%; padding-bottom: 20px; } .contents .appfloor2 .zhpin .zhpin_left h4{ margin-bottom: 20px; } .contents .appfloor2 .zhpin .zhpin_left h1{ font-size: 28px; } .contents .appfloor2 .zhpin .zhpin_left h6{ margin-bottom: 20px; font-size: 18px; } .contents .appfloor2 .zhpin .zhpin_left p{ font-size: 14px; line-height: 1.5; } .contents .appfloor2 .zhpin .zhpin_right .swipers_bt .swipe_top .swipe_bt{ display: none !important; } .contents .appfloor2 .zhpin .zhpin_right .swipers_bt .swipe_top{ margin-bottom: 10px; } .contents .appfloor2 .zhpin .zhpin_right .swiper{ height: 300px; } .contents .appfloor2 .zhpin .zhpin_right .swipers_bt{ margin-bottom: 0; } .contents .appfloor2 .zhpin .zhpin_right .swiper_btn{ display: none !important; } .contents .appfloor3{ padding: 50px 0; } .contents .appfloor3 h5{ font-size: 28px; margin-bottom: 20px; } .contents .appfloor3 .app_ul .swiper-slide img{ width: 100%; } .contents .appfloor3 .app_ul .swiper-slide .text{ left: 50%; top: 50%; width: 80%; transform: translate(-50%,-50%); } .contents .appfloor3 .app_ul .swiper-slide .text h3{ font-size: 24px; margin-bottom: 15px; } .contents .appfloor3 .app_ul .swiper-slide .text span{ margin-bottom: 10px; } .contents .appfloor3 .app_ul .swiper-slide .text p{ font-size: 14px; } .detail .floor1{ padding: 60px 0; } .detail .floor1 .yiy{ padding-right: 0; } .detail .floor1 .yiy .yiyo{ padding: 30px !important; } .detail .floor1 .yiy .yiyo h1{ font-size: 28px; margin-bottom: 15px; } .detail .floor1 .yiy .yiyo p{ max-width: 100%; width: 100%; line-height: 1.5; margin-bottom: 15px; } .detail .floor1 .yiy img{ width: 100%; position: static; } .detail .floor2{ padding: 30px 0; flex-direction: column; align-items: flex-start; visibility:visible !important; } .detail .floor2 .floor2_left{ width: 100%; border-right:none; border-bottom: 1px solid #ededed; margin-right: 0; margin-bottom: 15px; overflow-x: auto; overflow-y: hidden; height: auto; } .detail .floor2 .floor2_left .gund{ overflow-x: auto;height: auto;width: 100%; overflow-y: hidden; padding-bottom: 5px; } .detail .floor2 .floor2_left .gund::-webkit-scrollbar{ height: 2px; } .detail .floor2 .floor2_left ul{ display: flex; justify-content: flex-start; align-items: center; } .detail .floor2 .floor2_left li{ padding: 10px 20px; margin-bottom: 0; margin-right:20px; white-space:nowrap; } .detail .floor2 .floor2_right{ width: 100%; } .detail .floor2 .floor2_left li img{ display: none; } .detail .floor2 .floor2_right .floor2_top .floor2_swp{ width: 100%; } .detail .floor2 .floor2_right .floor2_top .swiper_btn{ display: none !important; } .detail .floor3{ visibility:visible !important; height: 200px; } .detail .floor3 img{ width: 100%; height: 100%; object-fit: cover; } .detail .floor3 .floor3_txt h3{ font-size: 24px; margin-bottom: 15px; } .detail .floor3 .floor3_txt p{ font-size: 14px; } } @media (min-width: 600px){ .contents .appfloor2 .zhpin .zhpin_right .swiper{ height: 65vh; } .contents .appfloor2 > img{ height: 90vh; object-fit: cover; } } @media (max-width: 600px){ .contents .appfloor1 .yiy .yiyo .yiyoimg{ display: block; } .contents .appfloor1 .yiy img{ transform: none; } }