.center{ width: 1680px; margin: 0 auto; } .flex{ display: flex; display: -webkit-flex; justify-content: space-between; } .flex_wrap{ flex-wrap: wrap; } .flex_center{ align-items: center; } .img-fluid{width:100%;height:auto;} .head_top{ background-color: #144973; color: white; padding: 11px 0; } .head_top ul li{ font-size: 16px; padding-left: 24px; position: relative; margin-right: 40px; } .head_top ul li::before{ content: url(../image/dianhua-icon.png); position: absolute; top: 0; left: 0; } .head_top ul li:nth-child(2)::before{ content: url(../image/youxiang.png); } .head_top form { margin-left: 840px; } .head_top form input{ padding: 0 10px; font-size: 14px; color: white; width: 140px; background: none; border: 1px solid white; border-radius: 20px; height: 22px; } .head_top form input::placeholder{ color: #b3bdc9; } .head_top form button{ width: 24px; height: 24px; border-radius: 50%; border: none; padding: 0; cursor: pointer; margin-left: 12px; } .head_top p{ position: relative; } .head_top p::before{ content: url(../image/diqiu-icon.png); position: relative; top: 3px; left: -8px; } .head_top p a{ color: white; font-size: 16px; } .head_top p a:hover{ color: #ff124f; } .head_bottom{ padding: 15px 0 15px 0; } .head_bottom .nav>li{ margin-left: 82px; } .head_bottom .nav>li>a{ color: #4c4c4c; font-size: 17px; } .head_bottom ul .nav_ac{ color: #144973; position: relative; } .head_bottom ul .nav_ac::after{ content: ''; display: block; width: 100%; height: 2px; background-color: #ff124f; position: absolute; bottom: -12px; left: 0; } .head_bottom ul .nav_ac::before{ content: ''; width: 0; height: 0; border: 8px solid transparent; /* border-bottom-color: #ff124f;*/ position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); } /* ¶þ¼¶²Ëµ¥ */ .head_bottom .nav>li{ position: relative; } .head_bottom .nav>li>h3{ display: none; font-size: 30px; color: #144973; position: absolute; top: 12px; right: 20px; font-weight: 500; transition: all .3s; transform: rotate(0deg); } .erji_nav{ display: none; position: absolute; top: 28px; left: 50%; z-index: 99; min-width: 70px; text-align: center; width: auto; transform: translateX(-50%); } .erji_nav li{ background-color: #ff124f; } .erji_nav li a{ display: block; text-align: center; color: white; white-space: nowrap; padding: 10px 20px; } .erji_nav li:hover{ background-color: #144973; } .head_bottom .flex>img{ width: 100px; } .head_bottom .nav>li::before{ content: ''; width: 0; height: 0; border: 8px solid transparent; border-bottom-color: #ff124f; position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); display: none; } .head_bottom .nav>li:hover::before{ display: block; } .banner .swiper .swiper-slide img{ width: 100%; } .brand{ background-color: #f4f5f6; padding-top: 65px; padding-bottom: 74px; } .title_index{ position: relative; } .title_index h3{ font-size: 40px; font-weight: 530; color: #4c4c4c; /*position: absolute;*/ position: relative; top: 0; left: 0; } .title_index h3 span{ color: #ff124f; } .title_index h4{ font-size: 40px; color: #e4e5e6; padding-top: 20px; } .title_index a{ display: inline-block; background-color: #ff124f; height: 50px; line-height: 50px; font-size: 17px; color: white; padding-left: 25px; padding-right: 68px; position: relative; } .title_index a::after{ content: url(../image/biaoti-jiantou.png); position: absolute; top: -4px; right: 24px; } .brand_main{ margin-top: 60px; justify-content: start; } .brand_main .item{ width: 20%; overflow: hidden; box-sizing: border-box; position: relative; margin: -1px 0 0 -1px; z-index: 1; transition: all .3s linear; border: 1px solid #eaeff7; } .brand_main .item img{ width: 100%; transition: all .3s linear; } .brand_main .item:hover { box-shadow: 0 10px 30px rgb(0 0 0 / 20%); border-color: #ff124f; z-index: 2; } .brand_main .item:hover img { transform: scale(1.1); } .youshi{ padding-top: 70px; padding-bottom: 70px; } .youshi .youshi_main{ margin-top: 50px; justify-content: flex-end; position: relative; } .youshi .youshi_main .swiper{ width: 1790px; margin: 0; } .youshi .youshi_main #swiper_2 h3{ display: inline-block; font-size: 32px; color: #ff124f; padding-bottom: 28px; position: relative; margin-bottom: 40px; } .youshi .youshi_main #swiper_2 h3::after{ content: ''; display: block; width: 100%; height: 3px; background-color: #ff124f; position: absolute; bottom: 0; left: 0; } .youshi .youshi_main #swiper_2 p{ font-size: 20px; color: #6b6b6b; line-height: 36px; } .youshi .youshi_main #swiper_2 .youshi_text{ width: 45%; } .youshi .youshi_main #swiper_2 .youshi_img{ width: 53%; overflow: hidden; } .youshi .youshi_main #swiper_2 .youshi_img img{ width: 100%; } .youshi .youshi_main #thumbs{ width: 42%; position: absolute; bottom: 77px; left: 5.9%; z-index: 99; background-color: rgba(244, 245, 246, .8); } .youshi .youshi_main #thumbs .swiper-slide{ text-align: center; color: #144973; font-size: 18px; padding: 25px 0; cursor: pointer; } .youshi .youshi_main #thumbs .youshi_icon{ margin: 0 auto; width: 66px; overflow: hidden; margin-bottom: 15px; } .youshi .swiper-slide-thumb-active{ background-color: #ff124f; } .youshi .swiper-slide-thumb-active p{ color: white; } .youshi .swiper-slide-thumb-active img{ margin-left: -66px; } .case{ position: relative; } .case h2{ position: absolute; top: 170px; left: 160px; z-index: 99; color: white; font-size: 50px; font-weight: 500; } .case .swiper-slide .text{ position: absolute; top: 280px; left: 160px; z-index: 99; color: white; font-size: 16px; line-height: 23px; max-width:60%; } .case .swiper-slide .text a{ display: inline-block; background-color: #ff124f; color: white; margin-top: 134px; font-size: 18px; padding: 16px 30px; } .case .swiper-slide .text a::after{ display: inline-block; content: url(../image/biaoti-jiantou.png); margin-left: 20px; transform: translateY(-3px); } .case .case_anniu{ width: 100%; position: absolute; bottom: 0; left: 0; background-color: rgba(255, 255, 255, .8); z-index: 99; } .case .case_anniu .swiper-slide{ text-align: center; padding: 33px 0; cursor: pointer; height: 100%; } .case .case_anniu .swiper-slide .case_icon{ width: 88px; overflow: hidden; margin: 0 auto; } .case .case_anniu .swiper-slide p{ font-size: 22px; margin-top: 14px; } .case .case_anniu .swiper-slide-thumb-active{ background-color: #ff124f; } .case .case_anniu .swiper-slide-thumb-active p{ color: white; } .case .case_anniu .swiper-slide-thumb-active img{ margin-left: -88px; } .hezuo{ padding-top: 70px; padding-bottom: 80px; background-color: #f4f5f6; } .hezuo .title_index p{ font-size: 20px; color: #4c4c4c; margin-top: 35px; margin-bottom: 38px; } .hezuo .hezuo_box .item{ box-sizing: border-box; width: 16.667%; border: 1px solid #71aaff; overflow: hidden; } .indexmap{width:840px;} .foot_top{ padding: 52px 0; } .foot_top ul:first-child li{ font-size: 20px; color: #4a4f54; line-height: 46px; } .foot_top ul:first-child li:first-child{ font-size: 26px; } .foot_bottom{ line-height: 58px; border-top: 2px solid #e6e6e6; font-size: 20px; color: #4a4f54; } .foot_bottom ul li a{ color: #4a4f54; margin-left: 30px; } .foot_bottom ul li a:hover{ color: #ff124f; } @media(max-width: 1700px) { html{ zoom: 0.9; } } @media(max-width: 1600px) { html{ zoom: 0.85; } } @media(max-width: 1500px) { html{ zoom: 0.8; } } @media(max-width: 1400px) { html{ zoom: 0.75; } } @media(max-width: 1300px) { html{ zoom: 0.7; } } @media(max-width: 1200px) { html{ zoom: 0.6; } } @media(max-width: 1100px) { html{ zoom: 0.5; } }