.banner_content { position: relative; overflow: hidden; width: 100%; height: 100vh; } .banner_swiper { position: absolute; right: 160px; bottom: 35px; z-index: 22; overflow: hidden; width: 480px; } .mySwiper2 .pic { position: relative; width: 100%; display: block; } .mySwiper2 .pic img { width: 100%; height: 100vh; } .mySwiper2 .pic .pic_po { position: absolute; top: 50%; width: 1600px; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: flex-start; } .mySwiper2 .pic .pic_po .po_name { display: flex; flex-direction: column; align-items: flex-start; /* background: rgba(0, 0, 0, 0.2); */ padding: 30px; border-radius: 20px; } .mySwiper2 .pic .pic_po .po_name h2 { font-size: 45px; font-family: Microsoft YaHei; font-weight: bold; color: #f9f9f9; line-height: 1.2; text-shadow: 1px 1px 1px #D71718; letter-spacing: 3px; /* letter-spacing: 10px; */ /* margin-bottom: 20px; */ } .mySwiper2 .pic .pic_po .po_name .po_name_h2 { padding-bottom: 25px; margin-bottom: 25px; position: relative; } .mySwiper2 .pic .pic_po .po_name .po_name_h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 110px; height: 5px; background: #D71718; } .mySwiper2 .pic .pic_po .po_name h4 { font-size: 24px; font-family: Arial; font-weight: 400; color: #f9f9f9; text-transform: uppercase; letter-spacing: 1px; text-shadow: 1px 1px 1px #D71718; } .mySwiper2 .swiper-pagination-bullet { background: #FFFFFF; opacity: 1; } .mySwiper2 .swiper-pagination-bullet-active { background: #D71718; } .mySwiper2 .swiper-button-next, .mySwiper2 .swiper-button-prev { height: 80px; width: 40px; top: 50%; margin-top: -40px; opacity: 0.5; background: url(../images/index/kv-icon.png) transparent; transition: .5s; } .mySwiper2 .swiper-button-prev { left: 0; } .mySwiper2 .swiper-button-next { right: 0; background-position: -45px 0; } .mySwiper2 .swiper-button-prev:hover, .mySwiper2 .swiper-button-next:hover { opacity: 1; } .b_about { margin-top: 100px; display: flex; flex-direction: row; width: 100%; justify-content: space-between; } .b_about .about_left { width: 58%; display: flex; flex-direction: column; justify-content: space-between; } .b_about .about_left .left_top { padding: 0 160px; display: flex; flex-direction: column; width: 100%; align-items: flex-start; } .b_about .about_left .left_top h2 { font-size: 48px; font-family: Microsoft YaHei; font-weight: bold; color: #333333; } .b_about .about_left .left_top .left_top_p { margin: 45px 0; width: 100%; } .b_about .about_left .left_top .left_top_p p, .about_service .about_name h5 { font-size: 17px; font-family: Microsoft YaHei; font-weight: 400; color: #666666; line-height: 25px; text-indent: 2em; margin-bottom: 20px; } .about_service .about_name h5 { margin-bottom: 0 !important } .b_about .about_left .left_top .left_top_p p:last-child { margin-bottom: 0; } .b_about .about_left .left_bootom { height: 180px; background: url(../images/welcome/left_bootom.png) no-repeat; background-size: cover; position: relative; padding: 0 70px 0 100px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .b_about .about_left .left_bootom .bootom_column { display: flex; flex-direction: column; align-items: center; } .b_about .about_left .left_bootom .bootom_column p { font-size: 18px; font-family: Microsoft YaHei; font-weight: 400; color: #FFFFFF; line-height: 1; display: flex; align-items: flex-end; } .b_about .about_left .left_bootom .bootom_column p sup { display: inline-block; line-height: initial; top: -1.0rem; padding: 0; font-size: 2.0rem; } .b_about .about_left .left_bootom .bootom_column p span { font-size: 48px; font-family: Arial; font-weight: bold; color: #FFFFFF; line-height: 1; } .b_about .about_left .left_bootom .bootom_column h3 { font-size: 16px; font-family: Microsoft YaHei; font-weight: 400; color: #FFFFFF; line-height: 30px; margin-top: 8px; } .b_about .about_right { width: 42%; position: relative; } .b_about .about_right .swiper-pagination-bullet { width: 29px; height: 3px; background: #FFFFFF; border-radius: 2px; opacity: .8; } .b_about .about_right .swiper-pagination-bullet-active { background: #D71718; } .b_but { border: 1px solid #CCCCCC; /* border-radius: 25px; */ padding: 10px 40px; font-size: 16px; font-family: Microsoft YaHei; font-weight: 400; color: #666666; transition: .5s; } .b_but:hover { color: #D71718; border: 1px solid #D71718; } .b_business { padding: 70px 0; position: relative; } .b_business .business_row { width: 100%; display: flex; flex-direction: row; justify-content: space-between; } .b_business .business_row .business_left { width: 40%; display: flex; flex-direction: column; align-items: flex-start; } .b_business .business_row .business_left .left_top { display: flex; flex-direction: row; width: 100%; justify-content: space-between; align-items: center; } .b_business .business_row .business_left .left_top h2 { font-size: 48px; font-family: Microsoft YaHei; font-weight: bold; color: #333333; } .b_business .business_row .business_left .left_top .top_row { display: flex; flex-direction: row; align-items: center; } .b_business .business_row .business_left .left_top .top_row h4 { padding-left: 35px; padding-right: 30px; margin-right: 30px; font-size: 18px; line-height: 30px; font-family: Microsoft YaHei; font-weight: bold; color: #666666; border-right: 1px solid #DCDCDC; background: url(../images/welcome/business_left1.png) no-repeat left center; background-size: 22px 22px; } .b_business .business_row .business_left .left_top .top_row h4:hover { color: #D71718; } .b_business .business_row .business_left .left_top .top_row h4:last-child { padding-right: 0px; margin-right: 0px; border-right: none; background: url(../images/welcome/b2.png) no-repeat left center; background-size: 23px 23px; } .b_business .business_row .business_left .left_top .top_row h4:hover { color: #D71718; background: url(../images/welcome/b1.png) no-repeat left center; background-size: 22px 22px; } .b_business .business_row .business_left .left_top .top_row h4:last-child:hover { background: url(../images/welcome/business_left2.png) no-repeat left center; background-size: 23px 23px; } .b_business .business_row .business_left .left_p { font-size: 16px; font-family: Microsoft YaHei; font-weight: 400; color: #666666; line-height: 30px; margin: 70px 0 60px; } .b_business .business_row .business_right { position: relative; width: 56%; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; } .b_business .business_row .business_swiper { position: relative; width: 100%; display: flex; flex-direction: row; justify-content: flex-start; } .b_business .business_row .business_swiper .business_content { display: flex; flex-direction: column; align-items: center; width: calc((100% - 210px) / 4); margin-right: 70px; margin-bottom: 30px; } .b_business .business_row .business_swiper .business_content:nth-of-type(4n) { margin-right: 0; } .b_business .business_row .business_swiper .business_content .pic { overflow: hidden; margin-bottom: 40px; } .b_business .business_row .business_swiper .business_content .pic img { transition: .5s; width: 100%; } .b_business .business_row .business_swiper .business_content:hover .pic img { transform: scale(1.05); -moz-transform: scale(1.05); -webkit-transform: scale(1.05); } .b_business .business_row .business_swiper .business_content p { padding: 0 20px; font-size: 18px; font-family: Microsoft YaHei; font-weight: 400; color: #333333; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .b_business .business_row .business_swiper { position: relative; width: 100%; display: flex; flex-direction: row; justify-content: flex-start; } .b_business .business_row .business_swiper .business_content { display: flex; flex-direction: column; align-items: center; width: calc((100% - 210px) / 4); margin-right: 70px; margin-bottom: 30px; } .b_business .business_row .business_swiper .business_content:nth-of-type(4n) { margin-right: 0; } .b_business .business_row .business_swiper .business_content .pic { overflow: hidden; margin-bottom: 40px; } .b_business .business_row .business_swiper .business_content .pic img { transition: .5s; width: 100%; } .b_business .business_row .business_swiper .business_content:hover .pic img { transform: scale(1.05); -moz-transform: scale(1.05); -webkit-transform: scale(1.05); } .b_business .business_row .business_swiper .business_content p { padding: 0 20px; font-size: 18px; font-family: Microsoft YaHei; font-weight: 400; color: #333333; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .b_business .business_row .business_bootom { display: flex; flex-direction: row; width: 100%; align-items: center; justify-content: flex-end; } .b_business .business_row .business_bootom .business-prev { background-image: url(../images/welcome/business_bootom.png); width: 52px; height: 52px; transform: rotateY(180deg); margin-right: 15px; } .b_business .business_row .business_bootom .business-next { background-image: url(../images/welcome/business_bootom.png); width: 52px; height: 52px; } .my_item { padding: 80px 0 90px; position: relative; overflow: hidden; } .my_item .my_item_content { display: flex; flex-direction: column; width: 100%; align-items: center; } .my_item .my_item_content h2, .about_service .about_name h2 { font-size: 48px; font-family: Microsoft YaHei; font-weight: bold; color: #333333; } .my_item .my_item_content .item_min { position: relative; width: 100%; margin-top: 90px; } .my_item .my_item_content .item_min .item_swiper { position: relative; /* margin: 0 auto; width: 72%; */ } .my_item .my_item_content .item_min .item_swiper .pic { position: relative; overflow: hidden; /* border-radius: 20px; */ display: block; } .my_item .my_item_content .item_min .item_swiper .pic .po_name { position: absolute; bottom: 0; left: 0; width: 100%; height: 60px; line-height: 60px; background: rgb(0, 0, 0, 0.4); padding: 0 50px; font-size: 18px; font-family: Microsoft YaHei; font-weight: 400; color: #FFFFFF; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; } .my_item .my_item_content .item_min .item_swiper .pic img { /* border-radius: 20px; */ width: 100%; } .my_item .my_item_content .item_min .item_swiper .swiper-container { overflow: inherit; } /* .my_item .my_item_content .item_min .item_swiper .swiper-slide-active { transform: scale(1.08); -moz-transform: scale(1.08); -webkit-transform: scale(1.08); } */ .my_item .my_item_content .item_min .item_swiper .item-prev, .my_item .my_item_content .item_min .item_swiper .item-next { position: absolute; top: 50%; width: 50px; height: 50px; margin-top: -25px; z-index: 10; cursor: pointer; background-size: 50px 50px; background-position: center; background-repeat: no-repeat; } .my_item .my_item_content .item_min .item_swiper .item-prev { left: 9%; background-image: url(../images/welcome/item-prev1.png); } .my_item .my_item_content .item_min .item_swiper .item-next { right: 9%; background-image: url(../images/welcome/item-prev1.png); transform: rotateY(180deg) } .my_item .my_item_content .item_min .item_swiper .item-prev:hover { background-image: url(../images/welcome/item-prev2.png); transform: rotateY(180deg) } .my_item .my_item_content .item_min .item_swiper .item-next:hover { background-image: url(../images/welcome/item-prev2.png); transform: rotateY(0deg) } .my_item .my_item_content .item_bootom { margin-top: 100px; position: relative; width: 100%; } .my_item .my_item_content .item_bootom .item_bootom_dian { width: 100%; text-align: center; margin-top: 30px; } .my_item .my_item_content .item_bootom .item_bootom_dian .swiper-pagination-bullet { width: 13px; height: 13px; background: #D4D4D4; opacity: 0.5; border-radius: 50%; margin: 0 10px; } .my_item .my_item_content .item_bootom .item_bootom_dian .swiper-pagination-bullet-active { background: #D71718; opacity: 1; } .b_news { padding: 44px 0 70px; background: url(../images/welcome/b_news.png) no-repeat; background-size: cover; } .b_news .news_content { display: flex; flex-direction: column; align-items: center; width: 100%; } .b_news .news_content .news_top { display: flex; flex-direction: row; width: 100%; justify-content: space-between; align-items: center; } .b_news .news_content .news_top h2 { font-size: 48px; font-family: Microsoft YaHei; font-weight: bold; color: #333333; } .b_news .news_content .news_top .top_row { display: flex; flex-direction: row; align-items: center; } .b_news .news_content .news_top .top_row h4 { padding-left: 35px; padding-right: 30px; margin-right: 30px; font-size: 18px; line-height: 30px; font-family: Microsoft YaHei; font-weight: bold; color: #666666; border-right: 1px solid #DCDCDC; background: url(../images/welcome/b_3.png) no-repeat left center; background-size: 28px 21px; } .b_news .news_content .news_top .top_row h4:hover { color: #D71718; background: url(../images/welcome/b3.png) no-repeat left center; background-size: 28px 21px; } .b_news .news_content .news_top .top_row h4:last-child { padding-right: 0px; margin-right: 0px; border-right: none; background: url(../images/welcome/b4.png) no-repeat left center; background-size: 27px 23px; } .b_news .news_content .news_top .top_row h4:last-child:hover { background: url(../images/welcome/b_4.png) no-repeat left center; background-size: 27px 23px; } .b_news .news_content .news_min { margin: 40px 0; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; width: 100%; } .b_news .news_content .news_min .news_column { display: flex; flex-direction: column; width: calc((100% - 200px) / 3); margin-right: 100px; margin-bottom: 0px; position: relative; } .b_news .news_content .news_min .news_column:nth-of-type(3n) { margin-right: 0; } .b_news .news_content .news_min .news_column .pic_but { padding: 50px 0; display: flex; flex-direction: column; width: 100%; } .b_news .news_content .news_min .news_column .news_time { display: flex; flex-direction: column; width: 100%; } .b_news .news_content .news_min .news_column .news_time h2 { font-size: 60px; font-family: Arial; font-weight: bold; color: #999999; line-height: 1; } .b_news .news_content .news_min .news_column .news_time h4 { font-size: 16px; font-family: Arial; font-weight: 400; color: #999999; line-height: 1; } .b_news .news_content .news_min .news_column .news_nr { margin: 0 0 70px; display: flex; flex-direction: column; width: 100%; } .b_news .news_content .news_min .news_column .news_nr h2 { font-size: 20px; font-family: Microsoft YaHei; font-weight: bold; color: #333333; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-bottom: 25px; transition: .5s; line-height: 35px; height: 70px; } .b_news .news_content .news_min .news_column:hover .news_nr h2, .b_news .news_content .news_min .news_column:hover .news_but .bx_news_time { color: #D71718; } .b_news .news_content .news_min .news_column .news_nr p { font-size: 16px; font-family: Microsoft YaHei; font-weight: 400; color: #666666; line-height: 24px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .b_news .news_content .news_min .news_column .news_but { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; } .b_news .news_content .news_min .news_column .news_but .bx_news_time { font-size: 16px; font-family: Arial; font-weight: 400; color: #999999; line-height: 1; transition: .5s; } /* .b_news .news_content .news_min .news_column:hover .pic_but { display: none; } */ .b_news .news_content .news_min .news_column .pic { position: relative; display: none; width: 100%; border-radius: 20px; overflow: hidden; height: 100%; } .b_news .news_content .news_min .news_column .pic img { height: 100%; } .b_news .news_content .news_min .news_column:hover .pic { display: block; } .b_news .news_content .news_min .news_column .pic .pic_time { width: 115px; height: 115px; background: #D71718; border-radius: 20px 0px 20px 0px; display: flex; flex-direction: column; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; } .b_news .news_content .news_min .news_column .pic .pic_time h2 { font-size: 60px; font-family: Arial; font-weight: bold; color: #FFFFFF; line-height: 1; } .b_news .news_content .news_min .news_column .pic .pic_time h4 { font-size: 16px; font-family: Arial; font-weight: 400; color: #FFFFFF; } @media (max-width: 1701px) { .b_about .about_left .left_top { padding: 0 5%; } } @media (max-width: 1601px) { .mySwiper2 .pic .pic_po { width: 90%; } .mySwiper2 .pic .pic_po .po_name h2 { font-size: 40px; } .mySwiper2 .pic .pic_po .po_name .po_name_h2::after { height: 4px; } .mySwiper2 .pic .pic_po .po_name h4 { font-size: 20px; } .banner_swiper { right: 5%; } .b_about .about_left .left_top { padding: 0 10%; } .b_about .about_left .left_top h2, .b_business .business_row .business_left .left_top h2, .my_item .my_item_content h2, .b_news .news_content .news_top h2, .about_service .about_name h2 { font-size: 38px; } .b_about .about_left .left_top .left_top_p { margin: 35px 0; } .b_about .about_left .left_top .left_top_p p, .b_business .business_row .business_left .left_p, .about_service .about_name h5 { font-size: 14px; line-height: 28px; } .b_but { padding: 8px 30px; font-size: 14px; } .b_about .about_left .left_bootom { height: 143px; } .b_business .business_row .business_swiper .business_content .pic { margin-bottom: 30px; } .b_business .business_row .business_swiper .business_content p { font-size: 16px; } .b_news .news_content .news_min .news_column .news_time h2 { font-size: 50px; } .b_news .news_content .news_min .news_column .news_time h4 { font-size: 14px; } .b_news .news_content .news_min .news_column .news_nr { margin: 0 0 50px; } .b_news .news_content .news_min .news_column .news_nr h2 { font-size: 18px; margin-bottom: 22px; line-height: 30px; height: 60px; margin-bottom: 10px; } .b_news .news_content .news_min .news_column .news_nr p { font-size: 15px; line-height: 24px; } .b_news .news_content .news_min .news_column .news_but .bx_news_time { font-size: 14px; } } @media (max-width: 1501px) { .b_about .about_left .left_bootom { padding: 10px 70px 0 70px; height: 120px; } .b_about .about_left .left_bootom .bootom_column p { font-size: 16px; } .b_about .about_left .left_bootom .bootom_column p span { font-size: 40px; } .b_about .about_left .left_bootom .bootom_column h3 { font-size: 14px; } .b_business { padding: 70px 0 0; } .mySwiper2 .pic .pic_po .po_name h2 { font-size: 35px; } .mySwiper2 .pic .pic_po .po_name .po_name_h2 { padding-bottom: 20px; margin-bottom: 20px; } .mySwiper2 .pic .pic_po .po_name .po_name_h2::after { width: 80px; } .mySwiper2 .pic .pic_po .po_name h4 { font-size: 18px; } } @media (max-width: 1440px) { .mySwiper2 .pic .pic_po .po_name { padding: 25px; border-radius: 12px; } /* .mySwiper2 .pic .pic_po .po_name h2 { } */ /* .mySwiper2 .pic .pic_po .po_name h4 { font-size: 16px; } */ .b_about .about_left .left_top h2, .b_business .business_row .business_left .left_top h2, .my_item .my_item_content h2, .b_news .news_content .news_top h2, .about_service .about_name h2 { font-size: 34px; } .b_about .about_left .left_top .left_top_p { margin: 25px 0; } .b_news .news_content .news_min .news_column .pic .pic_time { width: 100px; height: 100px; } .b_news .news_content .news_min .news_column .pic .pic_time h2 { font-size: 45px; } .b_news .news_content .news_min .news_column .pic .pic_time h4 { font-size: 14px; } .b_news .news_content .news_min .news_column { width: calc((100% - 120px) / 3); margin-right: 60px; } } @media (max-width: 992px) { .banner_content, .mySwiper2 .pic img { height: auto; } .banner_content { padding-top: 80px; } .banner_swiper { width: 360px; bottom: 20px; } .b_about { margin-top: 60px; flex-direction: column; } .b_about .about_left { width: 100%; } .b_about .about_right { width: 100%; } .b_about .about_left .left_top { margin-bottom: 30px; } .b_business { padding: 20px 0 0; } .b_business .business_row { flex-direction: column; } .b_business .business_row .business_left { width: 100%; margin-bottom: 50px; } .b_business .business_row .business_right { width: 100%; } .my_item .my_item_content .item_min .item_swiper { width: 100%; } .b_news .news_content .news_min .news_column { width: calc((100% - 60px) / 3); margin-right: 30px; } .mySwiper2 .pic .pic_po .po_name { padding: 20px; border-radius: 12px; } .mySwiper2 .pic .pic_po .po_name h2 { font-size: 24px; } .mySwiper2 .pic .pic_po .po_name .po_name_h2 { padding-bottom: 15px; margin-bottom: 15px; } .mySwiper2 .pic .pic_po .po_name .po_name_h2::after { height: 2px; width: 40px; } .mySwiper2 .pic .pic_po .po_name h4 { font-size: 12px; } .my_item .my_item_content .item_min .item_swiper .pic .po_name { height: 46px; line-height: 46px; padding: 0 30px; font-size: 16px; } .mySwiper2 .swiper-button-next, .mySwiper2 .swiper-button-prev { display: none !important; } } @media (max-width: 600px) { .mySwiper2 .pic .pic_po { display: none; } .banner_content { padding-top: 64px; } .banner_swiper { width: 200px; bottom: 15px; } .b_about .about_left .left_top h2, .b_business .business_row .business_left .left_top h2, .my_item .my_item_content h2, .b_news .news_content .news_top h2, .about_service .about_name h2 { font-size: 26px; } .b_about { margin-top: 35px; } .b_about .about_left .left_top .left_top_p p, .b_business .business_row .business_left .left_p, .about_service .about_name h5 { font-size: 14px; } .b_about .about_left .left_bootom { padding: 20px; height: auto; flex-direction: column; align-items: flex-start; } .b_about .about_left .left_bootom .bootom_column { padding: 0; width: 100%; align-items: flex-start; margin-bottom: 15px; } .b_about .about_left .left_bootom .bootom_column:last-child { margin-bottom: 0; } .b_about .about_left .left_bootom .bootom_column p { /* font-size: 12px; padding: 0.5rem 0 0 0; flex-direction: column; align-items: center; */ } .b_about .about_left .left_bootom .bootom_column p span { font-size: 38px; } .b_about .about_left .left_bootom .bootom_column p sup { top: 0; font-size: 2rem; padding: 0.5rem 0 0 0; } .b_about .about_left .left_bootom .bootom_column h3 { /* font-size: 12px; margin-top: 2px; line-height: 1.2; text-align: center; */ font-size: 16px; line-height: 1.5; } .b_business { margin-top: 20px; } .b_business .business_row .business_left .left_p { margin: 40px 0 30px; } .b_business .business_row .business_swiper { flex-wrap: wrap; } .b_business .business_row .business_swiper .business_content { width: calc((100% - 40px) / 2); margin-right: 40px; margin-bottom: 40px; } .b_business .business_row .business_swiper .business_content:nth-of-type(2n) { margin-right: 0; } .b_business .business_row .business_swiper .business_content .pic { margin-bottom: 20px; } .b_business .business_row .business_swiper .business_content p { font-size: 14px; } .my_item { padding: 30px 0 40px; } .my_item .my_item_content .item_min { margin-top: 45px; } .my_item .my_item_content .item_min .item_swiper .item-prev, .my_item .my_item_content .item_min .item_swiper .item-next { width: 40px; height: 40px; margin-top: -20px; background-size: 40px 40px; } .b_news .news_content .news_top { flex-direction: column; align-items: flex-start; } .b_news .news_content .news_top .top_row { margin-top: 20px; } .b_news .news_content .news_min { flex-wrap: wrap; } .b_news .news_content .news_min .news_column { width: 100% !important; margin-right: 0 !important; } .my_item .my_item_content .item_min .item_swiper .pic, .my_item .my_item_content .item_min .item_swiper .pic img { /* border-radius: 8px; */ } .my_item .my_item_content .item_min .item_swiper .pic .po_name { height: 30px; line-height: 30px; padding: 0 20px; font-size: 12px; } }