@charset "utf-8"; /* ===================棣栭〉鏍峰紡========================== */ /* 琛屼笟搴旂敤 s */ .ind_app{} .ind_app .tit{ text-align: center; padding: 0.55rem 0 0.45rem; } .ind_app .tit img{ display: inline-block; height: 0.5rem; margin-bottom: 0.25rem; } .ind_app .tit p{ font-size: 18px; line-height: 1.3; color: #55616d; } .ind_app .pic{ position: relative; width: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; min-height: 600px; } .ind_app .pic .txt{ position: absolute; color: white; width: 100%; padding: 1.1rem 10% 1rem ; } .ind_app .pic .txt h4{ font-size: 0.3rem; line-height: 1.5; max-width: 6.8rem; text-transform: uppercase; margin-bottom: 0.25rem; } .ind_app .pic .txt p{ max-width: 7.7rem; font-size: 18px; line-height: 1.6; display: block; } .ind_app .pic .txt a{ margin: 0.6rem 0 0; } .ind_app .bot{ margin-top: 0.3rem; } .ind_app .bot ul{} .ind_app .bot ul li{ position: relative; min-height: 400px; background-repeat: no-repeat; background-size: cover; background-position: center; } .ind_app .bot ul li::after{ position: absolute; content: ""; width: 100%; height: 100%; left: 0; top: 0; background-color: rgb(0,0,0,.35); z-index: 2; } .ind_app .bot ul li .info{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0.5rem 0.3rem; height: 100%; color: white; z-index: 3; } .ind_app .bot ul li:nth-child(4n - 3) .info{ padding-left: 0.8rem; } .ind_app .bot ul li:nth-child(4n) .info{ padding-right: 0.8rem; } .ind_app .bot ul li .info h4{ font-size: 26px; line-height: 30px; } .ind_app .bot ul li .info .txt{ margin: 0.3rem 0; font-size: 16px; line-height: 1.4; height: 7em; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 5; } .ind_app .bot ul li .info a{ font-size: 16px; } .ind_app .swiper-button-next.swiper-button-disabled, .ind_app .swiper-button-prev.swiper-button-disabled{ display: none; } .ind_app .swiper-button-next:after, .ind_app .swiper-button-prev:after{ font-size: 0.3rem; color: white; font-weight: 700; } /* 琛屼笟搴旂敤 e */ /* 鍏充簬鎴戜滑 s */ .ind_about{ margin-top: 0.3rem; } /* 鍏充簬鎴戜滑 e */ /* 浜у搧涓績 s */ .ind_pro{ padding-top: 0.6rem; } .ind_pro .con{ /* margin-top: 0.55rem; */ } .ind_pro ul{ display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; } .ind_pro ul li{ position: relative; width: 19%; margin-bottom: 0.25rem; border: 1px solid #ddd; } .ind_pro ul li .pic{ overflow: hidden; } .ind_pro ul li .pic img{ width: 100%; } .ind_pro ul li .mask{ position: absolute; width: 100%; height: 17%; bottom: 0; overflow: hidden; transition: all 0.5s; } .ind_pro ul li .mask-cont{ position: relative; width: 100%; height: 100%; } .ind_pro ul li .mask em{ position: absolute; width: 31px; height: 31px; border-radius: 50%; border: 1px solid #fff; left: 50%; top: -100%; transform: translateX(-50%); transition: all 1s; } .ind_pro ul li .mask em::before { display: block; content: ''; position: absolute; width: 50%; height: 1px; background-color: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%); } .ind_pro ul li .mask em::after { display: block; content: ''; position: absolute; width: 1px; height: 50%; background-color: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%); } .ind_pro ul li .mask h4{ width: 100%; text-align: center; font-size: 18px; line-height: 1.3; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 10px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.3s; } .ind_pro ul li .mask span{ position: absolute; top: 100%; left: 50%; transform: translateX(-50%); font-size: 14px; color: #fff; border-bottom: 1px solid #fff; padding-bottom: 5px; transition: all 0.8s; white-space: nowrap; } .ind_pro ul li:hover .mask { background-color: rgba(200, 33, 38, 0.8); height: 100%; } .ind_pro ul li:hover .mask .mask-cont em { top: 25%; } .ind_pro ul li:hover .mask .mask-cont h4 { top: 45%; color: #fff; } .ind_pro ul li:hover .mask .mask-cont span { top: 75%; } .ind_pro .swiper-button-next:after, .ind_pro .swiper-button-prev:after{ color: #000; } .ind_pro .swiper-button-next:hover:after,.ind_pro .swiper-button-prev:hover:after{ color: #C82126; } .ind_pro .swiper-button-next{ left: auto; right: 0; margin-right: -0.6rem; } .ind_pro .swiper-button-prev{ left: auto; margin-left: -0.6rem; } /* 浜у搧涓績 e */ /* 鏂伴椈涓績 s */ .ind_news{ padding-top: 0.6rem; } .ind_news .con{} .ind_news ul{} .ind_news ul li{ float: left; width: 32%; margin-right: 2%; } .ind_news ul li:nth-child(3n){ margin-right: 0; } .ind_news ul li a{ display: block; padding: 0.5rem 0.55rem; background-color: #f0f2f7; color: #2c2c2c; } .ind_news ul li:hover a{ color: white; background-color: #C82126; } .ind_news ul li h4{ font-size: 20px; line-height: 25px; height: 50px; margin-top: 0.25rem; } .ind_news ul li span{ display: block; font-size: 14px; margin: 0.16rem 0; } .ind_news ul li .info{ font-size: 16px; line-height: 1.5; height: 4.5em; } /* 鏂伴椈涓績 e */ /* 琛屼笟搴旂敤 s */ /* 琛屼笟搴旂敤 e */ /* 琛屼笟搴旂敤 s */ /* 琛屼笟搴旂敤 e */ /* -------------------------PC绔?-------------------------- */ @media all and (max-width:1700px) { /* 1600 脳 (900/1024/1200) */ } @media all and (max-width:1599px) { /* 1440 脳 (900/1050) */ } @media all and (max-width:1439px) { /* 1360 脳 (768) */ } @media all and (max-width:1359px) { /* 1280 脳 (800/854/1024) */ } @media all and (max-width:1279px) { /* 1152 脳 (864) */ } @media all and (max-width:1151px) { /* 1024 脳 (600/768) */ } /* ------------------------鎵嬫満绔?------------------------- */ @media all and (max-width:1000px) { /* 骞虫澘璁惧 720 閫傞厤 */ .ind_app .pic .txt{ padding: 8% 4%; } .ind_app .tit p{ font-size: 16px; } .ind_app .pic .txt h4{ font-size: 0.42rem; line-height: 1.3; max-width: 100%; } .ind_app .pic .txt p{ width: 100%; font-size: 16px; } .ind_app .pic .txt{ position: relative; } .ind_about .pic{ min-height: auto; background: url('../images/i_about_bg.jpg') no-repeat center/cover !important; } .ind_app .bot ul li{ min-height: auto; } .ind_app .bot ul li .info,.ind_app .bot ul li:nth-child(4n - 3) .info{ padding: 10% 4%; } .ind_app .bot ul li .info{ position: relative; } .ind_app .bot ul li .info h4{ font-size: 20px; line-height: 25px; height: 50px; } .ind_app .bot ul li .info .txt{ margin: 0.65rem 0 0.5rem; } .ind_app .swiper-button-next{ right: 0; } .ind_app .swiper-button-prev{ left: 0; } .ind_pro .swiper-button-next{ margin-right: 5px; } .ind_pro .swiper-button-prev{ margin-left: 5px; } .ind_pro .swiper-button-prev::after,.ind_pro .swiper-button-next::after{ font-size: 32px; } .ind_pro ul li{ width: 49%; } .ind_news ul li{ width: 100%; margin-right: 0; margin-bottom: 0.35rem; } .ind_news ul li a{ padding: 8% 4%; } .ind_news ul li span{ margin: 0.3rem 0; } .ind_tem ul{ background-color: #EEEEEE; padding: 6% 20px; } .ind_tem ul li{ width: 100%; margin-bottom: 10px; border-left: none; border-top: none; margin-bottom: 0; padding: 0.8rem 0; } .ind_tem ul li i{ font-size: 1.05rem; } .ind_tem ul li h4{ font-size: 0.36rem; margin: 0.3rem 0; } .ind_app .pic{ min-height: 6rem; } .ind_pro ul li .mask h4{ font-size: 16px; } } @media all and (max-width:768px) {} @media all and (max-width:640px) { /* 绉诲姩缁堢浠ヤ笂 360 閫傞厤 */ .ind_news ul li a,.ind_app .pic .txt,.ind_app .bot ul li .info,.ind_app .bot ul li:nth-child(4n - 3) .info{ padding: 10% 25px; } .ind_news ul li h4{ font-size: 18px; } } @media all and (max-width:480px) {} @media all and (max-width:420px) { .ind_app .pic .txt p,.ind_app .bot ul li .info .txt,.ind_app .tit p,.ind_news ul li .info{ font-size: 14px; } } @media all and (max-width:376px) {}