.about_a { background: #fff; padding-bottom: 7.3%; } .about_a .p-tl-box { margin-bottom: 22px; } .about_a .swiper-box { width: 980px; margin: 0 auto; } .about_a .swiper-box #company { margin-bottom: 20px; max-width: 780px; text-align: center; } .about_a .swiper-box #company .swiper-slide { line-height: 32px; font-size: 16px; color: #4c4c4c; height: 192px; overflow: auto; } .about_a .swiper-box .scroll-box { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .about_a .swiper-box .scroll-box .box { width: 218px; position: relative; } .about_a .swiper-box .scroll-box .box .imgbox { width: 100px; margin: 0 auto; position: relative; margin-bottom: 27px; } .about_a .swiper-box .scroll-box .box .te { text-align: center; font-size: 20px; -webkit-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s; -o-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s; -moz-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s; transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s; } .about_a .swiper-box .scroll-box .box::after { content: ""; height: 1px; background: #ccc; width: 163px; top: 50%; left: 100%; } .about_a .swiper-box .scroll-box .box:last-child::after { display: none; } .about_a .swiper-box .scroll-box .current .imgbox .act { opacity: 1; } .about_a .swiper-box .scroll-box .current .imgbox .nor { opacity: 0; } .about_a .swiper-box .scroll-box .current .te, .about_a .swiper-box .scroll-box .box:hover .te { color: #e40000; } .about_b { background-color: #282828; } .about_b .p-tl-box { margin-bottom: 80px; } .about_b .p-tl-box .en, .about_b .p-tl-box .cn { color: #fff; } .about_b .p-tl-box .line { background: rgba(255, 255, 255, 0.2); } .about_b .par-box { border-bottom: 1px solid transparent; } .about_b .par-box li { width: 21.4286%; float: left; margin-right: 17.8571%; margin-bottom: 120px; } .about_b .par-box li:nth-child(3n) { margin-right: 0; } .about_b .par-box li::after { content: ""; left: 0; top: 0; width: 100%; height: 100%; border: 1px solid rgba(255, 255, 255, 0.04); -webkit-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s; -o-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s; -moz-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s; transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s; } .about_c { background: #333; } .about_c .p-tl-box { margin-bottom: 50px; } .about_c .p-tl-box .en, .about_c .p-tl-box .cn { color:#fff; } .about_c .p-tl-box .line { background: rgba(255, 255, 255, 0.2); } #map { height: 700px; } .window { width: 500px; padding: 40px; -webkit-box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.15); -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; border: solid 1px #e5e5e5; background: rgba(255, 255, 255, 0.9); } .window .zs { position: absolute; left: -26px; top: -26px; z-index: 20; } .window .top { padding-bottom: 20px; border-bottom: 1px solid #e5e5e5; margin-bottom: 14px; } .window .top a img { width: 100px; } .window .top .close-map { position: absolute; right: 30px; padding: 10px; top: 30px; cursor: pointer; } .window .list { line-height: 36px; color: #666666; } .window .list li a { display: inline-block; } @media (max-width: 1280px) { .about_a .swiper-box #company .swiper-slide { font-size: 14px; line-height: 28px; height: 168px; } .about_a .swiper-box .scroll-box .box .te { font-size: 16px; } } @media (max-width: 1024px) { #map { height: 550px; } .window { padding: 20px; width: 400px; } .window .top { padding-bottom: 10px; margin-bottom: 8px; } .window .top .close-map { top: 15px; right: 10px; } .window .list { line-height: 28px; } } @media (max-width: 1440px) { #map { height: 600px; } } @media (max-width: 768px) { .about_a { padding-bottom: 60px; } .about_a .swiper-box { width: 90%; margin: 0 auto; } .about_a .swiper-box .scroll-box .box { width: 60px; } .about_a .swiper-box .scroll-box .box .imgbox { width: 100%; margin-bottom: 15px; } .about_a .swiper-box .scroll-box .box::after { width: -webkit-calc((100vw - 10vw - 180px) / 2); width: -moz-calc((100vw - 10vw - 180px) / 2); width: calc((100vw - 10vw - 180px) / 2); } .about_b { padding-bottom: 40px; } .about_b .p-tl-box { margin-bottom: 40px; } .about_b .par-box li { width: 48.5%; margin-right: 3%; margin-bottom: 3%; } .about_b .par-box li:nth-child(3n) { margin-right: 3%; } .about_b .par-box li:nth-child(2n) { margin-right: 0; } #map { height: 400px; } .window { width: 56px; background: none; padding: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .window .zs { position: static; } .window .top { display: none; } .window ul { display: none; } } .about_d { background-color: #f2f2f2; padding-bottom: 60px; } .about_d .p-tl-box { margin-bottom: 50px; } .about_d #media-ul .swiper-slide { height: 200px; background-color: #ffffff; -webkit-box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.01); -moz-box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.01); box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.01); overflow: hidden; position: relative; } .about_d #media-ul .swiper-slide a { height: 100%; position: relative; padding: 30px 25px 0 25px; z-index: 10; } .about_d #media-ul .swiper-slide a .media-title { font-size: 18px; font-weight: bold; margin-bottom: 35px; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .about_d #media-ul .swiper-slide a .time { margin-bottom: 15px; font-size: 12px; line-height: 14px; padding-left: 20px; background: url(../images/clock.png) no-repeat left center; } .about_d #media-ul .swiper-slide a .text { height: 48px; line-height: 24px; font-size: 14px; color: #555555; } .about_d #media-ul .swiper-slide::after { content: ""; width: 0%; right: 0; top: 0; height: 100%; -webkit-transition: width .4s ease; -o-transition: width .4s ease; -moz-transition: width .4s ease; transition: width .4s ease; background-color: #e5e5e5; } .about_d #media-ul .swiper-slide:hover::after { right: auto; left: 0; width: 100%; } .about_d .swiper-pagination-bullet { background: #000; } .about_d .swiper-pagination-bullet-active { background: #e40000; } .news_a { margin-top: 60px; } .news_a .wrap1200 { margin: 0 auto; max-width: 1200px; width: 90%; } .news_a .wrap1200 .content { background-color: #f9f9f9; line-height: 28px; color: #4c4c4c; } .news_a .wrap1200 .content .inwrap { max-width: 800px; width: 90%; margin: 0 auto; } .news_a .wrap1200 .content .inwrap .title { padding-top: 80px; color: #333333; font-size: 30px; margin-bottom: 40px; text-align: center; } .news_a .wrap1200 .content .inwrap .from-box { text-align: center; padding-bottom: 40px; } .news_a .wrap1200 .content .inwrap .from-box span { padding-right: 26px; position: relative; font-size: 12px; margin-right: 26px; } .news_a .wrap1200 .content .inwrap .from-box span::after { content: ""; width: 1px; height: 10px; right: 0; top: 1px; background-color: #dbdbdb; } .news_a .wrap1200 .content .inwrap .from-box span:last-child { margin-right: 0; padding-right: 0; } .news_a .wrap1200 .content .inwrap .from-box span:last-child::after { display: none; } .news_a .wrap1200 .content .inwrap .text-box { border-top: 1px solid #d6d6d6; padding: 60px 0; } .news_a .back-btn-box { padding: 60px 0; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -webkit-justify-content: flex-end; -moz-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .news_a .back-btn-box a { margin: 0; } @media (max-width: 768px) { .about_d #media-ul .swiper-slide a { padding: 25px 20px 0 20px; } .about_d #media-ul .swiper-slide a .media-title { font-size: 16px; } .news_a { margin-top: 40px; } .news_a .wrap1200 .content .inwrap .title { padding-top: 40px; font-size: 18px; margin-bottom: 10px; } .news_a .wrap1200 .content .inwrap .from-box { padding-bottom: 20px; } .news_a .wrap1200 .content .inwrap .from-box span { display: block; padding-right: 0; margin-right: 0; line-height: 24px; } .news_a .wrap1200 .content .inwrap .from-box span::after { display: none; } .news_a .wrap1200 .content .inwrap .text-box { padding: 30px 0; } .news_a .back-btn-box { padding: 30px 0 60px; } }