body{ max-width: 1750px; margin: 0 auto;} .index_title{margin-top: 120px; margin-bottom:80px; display:flex;justify-content:space-between;} .index_title span{font-size:40px;line-height:56px} .index_title a{display: flex;align-items: center;font-size: 17px;color: #0071E3} .index_title a img{margin-left: 4px} @media ( max-width: 1500px){ .index_title{margin: 100px 0 60px;height: 46px;} .index_title span{font-size:46px;line-height: 46px;} .index_title a{font-size: 17px} } @media ( max-width: 991px){ .index_title{margin: 40px 0 40px;height: 26px} .index_title span{font-size:26px;line-height: 26px;} .index_title a{font-size: 16px} } @media ( max-width: 768px){ } #overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; } #popformContainer { display: none; position: fixed; left: 50%; top: 50%;transform: translate(-50%, -50%);z-index: 1001; } #thxformContainer { display: none; position: fixed; left: 50%; top: 50%;transform: translate(-50%, -50%);z-index: 1002; } .image-fit{ width: 100%; height: 100%; object-fit: cover; object-position: center; } /*导航*/ .header{ position:fixed; left: 0; top:0; width:100%; z-index:100; padding: 0 15px;background-color: #ffffff} .header .container{width: 1200px; display: flex;justify-content: space-between; align-items: center;height:80px; } .header .nav_list{display: flex; align-items: center;} .header .nav_list li{margin-right: 40px} .header .nav_list a{color: #606060;font-size: 15px;} .header .nav_list a:hover{color:#0071E3;} .header .nav_list .btn_close{position: absolute; top: 18px;right: 15px; cursor: pointer;display: none;margin-right: 0;} .header .right{display: flex; align-items: center;} .header .languages{position: relative; padding-right: 15px;} .header .languages span{cursor: pointer;} .header .languages .options{position: absolute;background: #ffffff; border-radius: 12px; width: 180px; box-shadow: 0 4px 10px rgba(0, 0, 0,0.2); padding: 10px 20px; right: 0;top:36px;display:none} .header .languages a{display: flex;align-items: center; height:56px;} .header .languages .item a{display: flex;align-items: center; height:56px;} .header .languages .item a img{margin-right: 12px} .header .languages .options .btn_close{position: absolute; top: 18px;right: 15px; cursor: pointer;display: none} .header_bg{height: 80px;} .header_menu{display: none;margin-left: 20px;cursor: pointer;} .header .logo{display:flex;} /*导航 下拉 更新 */ .nav_list { display: flex; flex-wrap: wrap; } .nav_list > li { position: relative; } .dropdown-menu { display: none; position: absolute; left: 0; background-color: #FFF; box-shadow: 0 8px 16px rgba(0,0,0,0.2); min-width: 160px; z-index: 1; margin-top: 2px; padding:10px; border-radius: 10px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { white-space: nowrap; padding:10px; } @media ( max-width:1279px){ .header .languages{padding-right: 0;} .header .nav_list li{margin-right: 30px} } @media ( max-width: 768px){ .header_menu{display:block;} .header .nav_list{ position:absolute;right:0;top:0;width:50%; display:block;background:#fcfcfc;border-radius: 30px; padding-top: 60px;padding-left:30px;display:none } .header .nav_list a{color: #1D1D1D;font-size: 16px; line-height: 46px;} .header .nav_list .btn_close{display:block;} .header .container{height:60px; } .header .logo1{height:30px} .header .logo2{display: none} .header .languages{position: static; } .header .languages .options{background:#fcfcfc;border-radius: 30px; width:50%;right: 0;top: 0; box-shadow: none; padding-top: 60px;} .header .languages .item a{font-size: 22px;color: #1D1D1D;} .header .languages .options .btn_close{display:block;} .header_bg{height:60px;} /*导航 下拉 更新 */ .nav_list li { list-style-type: none; margin: 0; padding: 0; text-align: left; } .dropdown-menu { position: relative; display: block; background-color: #FFF; box-shadow: none; } .dropdown-menu.active { display: block; } .dropdown { font-size:16px; } .dropdown-menu li { font-size:12px; margin: -10px 0; padding: 0; } .nav_list .dropdown .dropdown-menu li a { color: #5e5e5e; } .nav_list .dropdown { padding-top:18px; } } /*banner*/ .banner{ position: relative; overflow:hidden; width: 100%; } .banner .swiper-slide img{width:1920px;margin: 0 auto} .banner .swiper-slide{position: relative;} .banner .swiper-slide .banner_wrap{position: absolute; left: 0;top: 0;width: 100%;height: 100%; padding: 0 15px} .banner .swiper-slide .banner_wrap .container{display: flex;flex-flow: column;justify-content: center;height: 100%; width: 12rem} .banner .btn_box{position: absolute; height:100%;width: 100%; left: 0;top: 0; padding: 0 15px} .banner .btn_box .container{position: relative;height: 100%;width: 16rem} .banner .swiper-button-next,.banner .swiper-button-prev{width: 0.48rem;height: 0.48rem;background: none;margin-top: -0.24rem} .banner .swiper-pagination-bullet{width: 8px;height: 8px;border-radius: 8px;background: #ffffff;opacity: 1;} .banner .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin: 0 0.08rem} .banner .swiper-pagination-bullet-active{width: 0.24rem;background:#0071E3} .banner .swiper-slide2{color: #ffffff;} .banner .tit1{font-size: 0.4rem;margin-bottom: 0.4rem;font-weight: bold;} .banner .tit2{font-size: 0.4rem;color: #0071E3;font-weight: bold; margin-bottom: 0.05rem; line-height: 0.45rem} .banner .des{font-size: 0.24rem; line-height: 0.4rem;margin-bottom: 0.4rem} .banner .btn a{display:inline-block; width: 2.63rem;height: 0.44rem;border-radius:0.44rem;text-align: center;line-height: 0.44rem;background:#0071E3;font-size: 0.17rem;color: #ffffff} .banner .swiper-button-next:after{ display:none;} .banner .swiper-button-prev:after{ display:none;} @media ( max-width: 991px){ .banner .btn{display: none} .banner .tit1{margin-left: -1.0rem;} .banner .tit2{margin-left: -1.0rem;} .banner .des{margin: -0.1rem -1.0rem 0 -1.0rem; line-height:0.8rem;} .banner .swiper-button-next,.banner .swiper-button-prev{width: 1.2rem;height: 1.2rem; background: none; margin: -0.54rem -1.2rem 0 -1.2rem; } } /*new_product*/ .new_product{ padding:0 15px; } .new_product .title{margin-bottom: 30px;} .new_product_list{display: flex;justify-content: space-between;flex-wrap: wrap;} .new_product_list > a{ width: calc(25% - 15px); border-radius: 25px;overflow: hidden; position: relative; } .new_product_list .item > img{width: 100%; transition: all 0.3s ease} .new_product_list .item .text_info{position: absolute;left: 0;top:0;width: 100%;height: 100%; padding: 32px; display: flex;flex-flow: column;justify-content: space-between;transition: all 0.3s} .new_product_list .item .tit{font-size: 24px;line-height: 32px;margin-bottom: 10px;} .new_product_list .item .des{font-size: 17px;line-height: 23px;display: none} .new_product_list .item .text_info .bot{flex: 1;display: flex;align-items: center;justify-content: center;display: none;} .new_product_list .item .text_info .bot span{ width:117px;height:36px;text-align:center;line-height:36px;display:inline-block;background:#0071E3;color:#ffffff;font-size:14px;border-radius:36px; } @media ( max-width: 1300px){ .new_product_list .item{border-radius: 20px;} .new_product_list .item .text_info{padding: 26px;} .new_product_list .item .tit{font-size: 20px;line-height: 28px;margin-bottom: 10px;} .new_product_list .item .des{font-size: 16px;line-height: 22px;} } @media ( max-width: 991px){ .new_product_list > a{width: 100%; border-radius: 10px} .new_product_list > a{width: calc(50% - 7px); border-radius: 10px; margin-top:12px;} .new_product_list .item .text_info{padding:10px 15px;} .new_product_list .item .tit{font-size:14px;line-height: 22px;margin-bottom:5px;} .new_product_list .item .des{font-size:12px;line-height: 20px;} .new_product_list .item .text_info .bot a{width: 90px;height: 30px;line-height: 30px;font-size: 12px;} } @media ( min-width: 992px){ .new_product_list .item .text_info:hover{background: rgba(0, 0, 0,0.3);color: #ffffff} .new_product_list .item .text_info:hover .bot{display:flex;} .new_product_list .item .text_info:hover .des{display:block;} .new_product_list .item:hover img{transform: scale(1.02);} } .new_product_list3c{display: flex;justify-content: space-between;flex-wrap: wrap;} .new_product_list3c > a{ width: calc(25% - 15px); border-radius: 25px;overflow: hidden; position: relative; } .new_product_list3c .item > img{width: 100%; transition: all 0.3s ease} .new_product_list3c .item .text_info{position: absolute;left: 0;top:0;width: 100%;height: 100%; padding: 32px; display: flex;flex-flow: column;justify-content: space-between;transition: all 0.3s} .new_product_list3c .item .tit{font-size: 24px;line-height: 32px;margin-bottom: 10px;} .new_product_list3c .item .des{font-size: 17px;line-height: 23px;display: none} .new_product_list3c .item .text_info .bot{flex: 1;display: flex;align-items: center;justify-content: center;display: none;} .new_product_list3c .item .text_info .bot span{ width:117px;height:36px;text-align:center;line-height:36px;display:inline-block;background:#0071E3;color:#ffffff;font-size:14px;border-radius:36px; } @media ( max-width: 1300px){ .new_product_list3c .item{border-radius: 20px;} .new_product_list3c .item .text_info{padding: 26px;} .new_product_list3c .item .tit{font-size: 20px;line-height: 28px;margin-bottom: 10px;} .new_product_list3c .item .des{font-size: 16px;line-height: 22px;} } @media ( max-width: 991px){ .new_product_list3c > a{width: 100%; border-radius: 10px} .new_product_list3c .item:nth-child(-n+2) {margin-bottom: 15px;} .new_product_list3c .item .text_info{padding:10px 15px;} .new_product_list3c .item .tit{font-size:14px;line-height: 22px;margin-bottom:5px;} .new_product_list3c .item .des{font-size:12px;line-height: 20px;} .new_product_list3c .item .text_info .bot a{width: 90px;height: 30px;line-height: 30px;font-size: 12px;} } @media ( min-width: 992px){ .new_product_list3c .item .text_info:hover{background: rgba(0, 0, 0,0.3);color: #ffffff} .new_product_list3c .item .text_info:hover .bot{display:flex;} .new_product_list3c .item .text_info:hover .des{display:block;} .new_product_list3c .item:hover img{transform: scale(1.02);} } /*product_solutions*/ .product_solutions{padding: 0 15px} .product_solutions_list{display: flex;justify-content: space-between;flex-wrap:wrap; } .product_solutions_list a{ width: calc(50% - 10px); display: block;} .product_solutions_list .tit{font-size: 28px;margin-bottom: 20px;color:#1D1D1D;margin-top: 20px;font-weight: bold;} .product_solutions_list .des{font-size: 17px;color:#606060;} .product_solutions_list a:hover .tit{color:#0071E3} .product_solutions_list a:hover .des{color:#0071E3} .product_solutions_list .img{overflow: hidden;border-radius: 30px} .product_solutions_list .img:hover {transform: scale(1.02); transition: transform 0.3s ease; box-shadow: 0 4px 10px rgba(0, 0, 0,0.2);} .product_solutions_list .img img{transition: all 0.3s ease} .product_solutions_list .img:hover img{transform: scale(1.02);} @media ( max-width: 1300px){ .product_solutions_list .tit{font-size: 24px;margin-bottom:20px;margin-top: 20px;} .product_solutions_list .des{font-size: 16px;} } @media ( max-width: 991px){ .product_solutions_list a{width: 100%} .product_solutions_list a:first-child{margin-bottom: 30px} .product_solutions_list .tit{font-size: 14px;margin-bottom:15px;margin-top: 15px;} .product_solutions_list .des{font-size: 12px;} } /*about_us*/ .about_us{padding: 0 15px;} .about_us .big{font-size: 36px;font-weight: bold;text-align: center; margin-bottom: 30px; margin-left:50px;margin-right:50px; line-height:1.0rem;} .about_us .small{font-size: 17px;text-align: center; width: 1075px; max-width: 100%;margin: 0 auto; line-height: 30px;margin-bottom: 80px} .about_us .small br{display: none;} .about_us_list{display:flex;justify-content: space-between;flex-wrap: wrap;} .about_us_list .number .numArea{width:180px; text-align:right;} .about_us_list .item{width: calc(33.3333% - 11px); border-radius: 30px;background: #FAFAFA;display: flex;flex-flow: column;align-items: center;justify-content: center; height: 320px;padding: 0 15px} .about_us_list .item .number{display: flex; align-items: flex-end;color: #0071E3;font-size: 36px;margin-bottom: 36px} .about_us_list .item .number span{font-size: 72px; display: flex;align-items: center;} .about_us_list .item .number b{font-size: 72px; font-weight: initial;} .about_us_list .item .number span img{margin-right: 15px;} .about_us_list .item .text{font-size: 17px; width: 380px;max-width: 100%;line-height: 23px;text-align: center;} @media ( max-width:1300px){ .about_us_list .item .number{font-size: 30px;} .about_us_list .item .number span{font-size:52px;} .about_us_list .item .number span img{width:36px} } @media ( max-width: 991px){ .about_us .big{font-size:14px; margin-bottom:20px} .about_us .small{font-size:12px; line-height:22px;margin-bottom:30px} .about_us .small br{display: inline;} .about_us_list .item{width: 100%;border-radius: 5px; height: 200px;} .about_us_list .item:nth-child(-n+2) {margin-bottom: 15px;} .about_us_list .item .number{font-size:24px; margin-bottom: 20px} .about_us_list .item .number span{font-size:36px;} .about_us_list .item .number b{font-size: 36px;} .about_us_list .item .number span img{width:28px} .about_us_list .item .text{font-size: 14px;} .about_us_list .number .numArea{width:100px; text-align:right;} } /*news_blogs*/ .news_blogs{padding: 0 15px} .news_blogs_list{display: flex;justify-content: space-between;flex-wrap:wrap; } .news_blogs_list .item{width: calc(33.3333% - 11px); display: block;} .news_blogs_list .tit{font-size: 28px;margin-bottom: 20px;color:#1D1D1D;margin-top: 20px;font-weight: bold;} .news_blogs_list .des{font-size: 17px;color:#606060;} .news_blogs_list .text a{color: #0071E3;font-size: 17px;display: flex;margin-top:20px;} .news_blogs_list .img{position: relative;border-radius: 30px;overflow: hidden; } .news_blogs_list .img .item_cat{position:absolute;left: 0;top: 0;width: 143px;height: 35px;z-index: 2;background: #0071E3;font-size: 14px;color: #ffffff; border-radius: 30px 0 30px 0;text-align: center;line-height: 35px;} .news_blogs_list .img:hover {transform: scale(1.02); transition: transform 0.6s ease; box-shadow: 0 4px 10px rgba(0, 0, 0,0.2);} @media ( max-width: 1300px){ .news_blogs_list .tit{font-size: 24px;margin-bottom:20px;margin-top: 20px;} .news_blogs_list .des{font-size: 16px;} } @media ( max-width: 991px){ .news_blogs_list .item{width: 100%} .news_blogs_list .item:nth-child(-n+2) {margin-bottom:25px;} .news_blogs_list .tit{font-size: 18px;margin-bottom:15px;margin-top: 15px;} .news_blogs_list .des{font-size: 14px;} .news_blogs_list .text a{font-size: 14px; margin-top: 15px} } /*footer*/ .footer{padding:80px 15px; margin-top: 80px;background:#FAFAFA} .footer .container{width: 1200px;} .footer_list{display:flex;justify-content: space-between;} .footer_list .footer_col{max-width:300px;} .footer_list .item_tit{display: flex;justify-content: space-between;margin-bottom: 20px;font-size: 17px; align-items: center;font-weight: bold;} .footer_list .item_tit span{display: block; padding-left: 30px;cursor: pointer;} .footer_list .item_tit img{width: 16px; display: none; transition: all 0.3s} .footer_list .item_nav .nav a{margin-bottom: 20px;color:#606060;font-size: 14px;display:inline-block;} .footer_list .footer_col .item{margin-bottom:10px;} .footer_list .footer_col .share{display: flex;margin-bottom: 20px;} .footer_list .footer_col .share a{display:inline-block;margin-right:10px;} .footer_list .item_contact .item_tit{font-size: 32px;} .footer_list .item_contact .line{display:flex; margin-bottom: 20px;} .footer_list .item_contact .line .icon{display: inline-block;width:40px;} .footer_list .item_contact .line .text{flex: 1} .footer_list .item_contact .tel .text{font-size: 24px;color:#0071E3;padding-top:6px;} .footer_list .item_contact .email .text{font-size: 24px;color:#0071E3;padding-top:6px;} .footer_list .item_contact .addr .text{font-size:14px;color:#606060;line-height:19px;} .footer_list .item_contact .btn button{ display: inline-flex;align-items: center;justify-content: center; height: 36px; width: 136px; border-radius:22px; text-align: center; font-size: 14px; color: #fff; background: #0071e3;text-decoration: none; border:none; } @media ( max-width: 991px){ .footer_list{flex-flow: column;} .footer_list .footer_col{max-width:100%;} .footer{padding:40px 15px;margin-top: 40px} .footer_list .item_tit{font-size: 16px;} .footer_list .item_contact .item_tit{font-size: 16px;} .footer_list .item_nav{display: none} .footer_list .item_info{display: none} .footer_list .footer_col .item{border-bottom: 1px solid #E1E1E1; margin-bottom: 20px} .footer_list .item_tit img{width: 16px; display:block;} .footer_list .item_contact .tel .text{font-size: 16px;} .footer_list .item_contact .email .text{font-size: 16px;} .footer_list .item.on .item_nav{display:inline-block;} .footer_list .item.on .item_info{display:inline-block;} .footer_list .item.on .item_tit img{transform: rotate(180deg);} } /*.product_listMain*/ .w1380{ width: 1380px; margin: 0 auto;} .banner img{ display: block; width: 100%;} .product_listMain .layer1{ width: 100%; overflow: hidden;} .product_listMain .layer1 .swiper-container{ width: 100%; height: auto;} .product_listMain .layer1 .icon{ padding-top: 130px; width: 100%;} .product_listMain .layer1 .icon img{ display: block; width: 365px; margin: 0 auto; border-radius:50% ;} .product_listMain .layer1 .swiper-wrapper{ display: block;} .product_listMain .layer1 .swiper-slide{ width: 32%; float: left; margin: 0 2% 0 0;} .product_listMain .layer1 .swiper-slide:nth-child(3n){ margin-right: 0;} .product_listMain .layer1 .text{ padding: 20px 0; width: 100%;} .product_listMain .layer1 .text .tit{ border-bottom: 1px solid #e1e1e1; padding: 55px 0 20px 0;} .product_listMain .layer1 .text .tit h2{ font-size: 22px; color: #1d1d1d; margin-bottom: 25px;} .product_listMain .layer1 .text .tit p{ font-size: 22px; line-height: 28px; height: 50px;} .product_listMain .layer1 .textBox{ width: 100%; border-bottom: 1px solid #e1e1e1; padding: 25px 0;} .product_listMain .layer1 .textBox h2{ font-weight: normal; font-size: 22px; color:#1d1d1d; margin-bottom: 25px; color: #000;} .product_listMain .layer1 .textBox p{ font-size: 14px; line-height: 20px; color: #333;} .product_listMain .layer1 .textBox h3{ font-size: 22px; color: #000; line-height: 48px; color: #000;} .product_listMain .layer1 .textBox p span{ font-size: 22px; color: #000;} .product_listMain .layer1 .textBox p.mg{ margin-top: 15px; height:48px;} .product_listMain .layer1 .textBox li{ font-size: 14px; line-height: 32px; color: #333;} .product_listMain .layer1 .textBox li span{ display: inline-block; vertical-align: middle; background: url(../images/pl_05.png); width: 15px; height: 15px; background-size:100% 100% ; margin-right: 6px; transform: translateY(-2px);} .product_listMain .layer1 .textBox li .icon2{display:inline-block; height:15px;} .product_listMain .layer1 .textBox li .icon2 img{ display:black; height:100%; width:auto;} .product_listMain .layer1 .textBox li b{ font-size:14px; font-weight:normal;} .product_listMain .layer1 .textBox li span.on{ background: url(../images/pl_03.png); background-size:100% 100%;} .product_listMain .layer1 .nrBottom{ width: 100%; height: 95px; line-height: 95px; font-size: 14px; color: #000;} .product_listMain .layer1 .nrBottom img{ display: inline-block; vertical-align: middle; margin-right: 15px;} .product_listMain .layer1 .more{ display: block; text-align: center; width: 133px; height: 44px; line-height: 44px; font-size: 14px; color: #fff; border-radius:22px; color: #fff; background: #0071e3;} .product_listMain .layer2{ width: 100; margin: 0 auto; padding: 110px 0 0 0; overflow: hidden;} .product_listMain .layer2 .layer2Left{ float: left; width: 460px; float: left;} .product_listMain .layer2 .layer2Left h2{ font-weight: normal; text-align: center; width: 100%; line-height: 42px; font-size: 16px; color: #000;} .product_listMain .layer2 .layer2Left img.pic{ display: block; margin: 30px auto; width: 400px; height: auto; border-radius:50%;} .product_listMain .layer2 .layer2Left ul{ width: 100%;} .product_listMain .layer2 .layer2Left ul li{ height: 48px; line-height: 48px; font-size: 16px; color: #000;} .product_listMain .layer2 .layer2Left ul li img{ display: inline-block; vertical-align: middle; transform: translateY(-2px); margin-right: 15px;} .product_listMain .layer2 .layer2Right{ width: calc(100% - 460px); float: left; padding-left: 10%; box-sizing: border-box;} .product_listMain .layer2 .layer2Right .tit{ width: 100%; height: 55px; font-size: 22px; font-weight: bold; color: #000;} .product_listMain .layer2 .layer2Right ul{ width: 100%; overflow: hidden;} .product_listMain .layer2 .layer2Right li{ font-size: 14px; color: #606060; width: 49%; float: left; margin: 0 2% 20px 0;} .product_listMain .layer2 .layer2Right li:nth-child(2){ margin-right: 0;} .product_listMain .layer2 .layer2Right li:nth-child(5){ margin-right: 0;} .product_listMain .layer2 .layer2Right li input[type=text]{ display: block; width: 100%; height: 36px; border: 1px solid #e1e1e1; box-sizing: border-box; border-radius:4px; background: #fafafa; text-indent: 10px;} .product_listMain .layer2 .layer2Right li.long{ width: 100%; margin-right: 0;} .product_listMain .layer2 .layer2Right li select{ display: block; width: 100%; height: 36px; border: 1px solid #e1e1e1; box-sizing: border-box; border-radius:4px; background: #fafafa; text-indent: 10px;} .product_listMain .layer2 .layer2Right li input[type=radio]{ vertical-align: middle; transform: translateY(-3px); margin-left: 25px;} .product_listMain .layer2 .layer2Right li .text{ width: 100%; height: 130px; border: 1px solid #e1e1e1; box-sizing: border-box; border-radius:4px; background: #fafafa; padding: 12px;} .product_listMain .layer2 .layer2Right li .text p{ line-height: 38px; font-size: 14px; color: #606060;} .product_listMain .layer2 .layer2Right li .text textarea{ display: block; width: 100%; height: 100%; resize: none; outline: none; border: none; background: none; font-size: 14px; font-family: "微软雅黑";} .product_listMain .layer2 .layer2Right button{ border: none; display: block; text-align: center; width: 173px; height: 44px; line-height: 44px; font-size: 14px; color: #fff; border-radius:22px; color: #fff; background: #0071e3;} .product_listMain .layer3 .tit h2{ text-align: center; font-size: 36px; color: #333;} .product_listMain .layer3{ width: 100%; padding: 125px 0 0 0; overflow: hidden;} .product_listMain .layer3 .tit{ text-align: center; font-size: 38px; color: #000; padding-bottom: 90px;} .product_listMain .layer3 .layer3Box{ float: left; width: 47%; margin-right: 6%;} .product_listMain .layer3 .layer3Box:last-child{ margin-right: 0;} .product_listMain .layer3 .layer3Box h2{ height: 60px; font-weight: normal; font-size: 16px; color: #000; line-height:24px;} .product_listMain .layer3 .layer3Box ul{ overflow: hidden;} .product_listMain .layer3 .layer3Box ul li{ overflow: hidden; width: 32%; float: left; margin: 0 2% 24px 0; position: relative; height: 213px; background: #fafafa; border-radius:24px ; position: relative;} .product_listMain .layer3 .layer3Box ul li .icon img{ display: block; margin: 0 auto; border-radius:24px ; max-width:180px; max-height:180px;} .product_listMain .layer3 .layer3Box ul li .bg{z-index:100; transition: 0.5s; opacity: 0; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0,0,0,0.4);} .product_listMain .layer3 .layer3Box ul li p{ position: absolute; width: 100%; text-align: center; line-height: 22px; font-size: 14px; color: #000; transition: 0.5s; bottom: 20px; padding: 0 25px; box-sizing: border-box; z-index: 2;} .product_listMain .layer3 .layer3Box ul li .bg .more{display: block; text-align: center; width: 133px; height: 44px; line-height: 44px; font-size: 14px; color: #fff; border-radius:22px; color: #fff; background: #0071e3; position: absolute; top: 50px; left: 50%; transform: translateX(-50%);} .product_listMain .layer3 .layer3Box ul li:hover p{ color: #fff;} .product_listMain .layer3 .layer3Box ul li:hover .bg{ opacity: 1;} .product_listMain .layer3 .layer3Box ul li:nth-child(3n){ margin-right: 0;} /* .bannerPage.on img{ transform: scale(1.1);} */ /* .bannerPage.on img{width:1920px; margin: 0 auto} */ /* 08.07 -- 服务器最后版本 */ .bannerPage.on img{width:100%; margin: 0 auto} .bannerPage .textBox{ width: 1200px; margin: 0 auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);} .bannerPage .textBox h2{ font-size: 30px; font-weight: bold; color: #0071e3;} .bannerPage .textBox p{ line-height: 38px; font-size: 22px; color: #000; padding: 40px 0 60px 0;} .bannerPage .textBox ul{ overflow: hidden;} .bannerPage .textBox ul li{ text-align: center; float: left; margin-right: 50px;} .bannerPage .textBox ul li h3{ margin-bottom: 12px; font-size: 22px; font-weight: bold; color:#000;} .bannerPage .textBox ul li h3 span{ font-weight: normal; font-size: 12px;} .bannerPage .textBox ul li h4{ font-weight: normal; font-size: 14px; color: #999} @media (min-width:991px ) and (max-width:1380px) { .w1380{ width: 100%; padding: 0 10px; box-sizing: border-box;} } @media(max-width:990px) { .w1380{ width: 100%; padding: 0 10px; box-sizing: border-box;} .product_listMain .layer1 .swiper-wrapper{ display: flex;} .product_listMain .layer1 .icon{ padding: 2.6rem 0 0 0;} .product_listMain .layer1 .icon img{ width: 95%;} .product_listMain .layer1 .text .tit{padding: 1.05rem 0 .4rem 0;} .product_listMain .layer1 .text .tit h2{ font-size: .8rem;} .product_listMain .layer1 .text .tit p{ font-size: .6rem; line-height: 1.1rem;} .product_listMain .layer1 .textBox{ padding: .64rem 0;} .product_listMain .layer1 .textBox h2{ font-size: .68rem;} .product_listMain .layer1 .textBox p{ font-size: .48rem; line-height: .84rem;} .product_listMain .layer1 .textBox h3{ font-size: .76rem; line-height: 2rem;} .product_listMain .layer1 .textBox p span{ font-size: .64rem;} .product_listMain .layer1 .textBox li span{ width: .48rem; height: .48rem; margin-right: .15rem;} .product_listMain .layer1 .textBox li{ font-size: .34rem;} .product_listMain .layer1 .textBox li b{display:block; width:100%;} .product_listMain .layer1 .textBox li .icon2{ height:.48rem;} .product_listMain .layer1 .textBox p.mg{ margin-top: .7rem;} .product_listMain .layer1 .nrBottom{ font-size: .4rem; overflow: hidden;} .product_listMain .layer2{ width: 100%; } .product_listMain .layer2 .layer2Left{ width: 100%;} .product_listMain .layer2 .layer2Left img.pic{ width: 70%; margin: 30px auto;} .product_listMain .layer2 .layer2Left ul li{ text-align: center;} .product_listMain .layer2 .layer2Right{; width: 100%; padding: 0; padding-top: 30px} .product_listMain .layer2 .layer2Right li{ width: 100%; margin: 0 0 20px 0;} .product_listMain .layer3{ width: 100%; padding-top: 30px;} .product_listMain .layer3 .layer3Box{ width: 100%; margin: 0 0 20px 0;} .product_listMain .layer3 .layer3Box ul li{ width: 49%; float: left; margin: 0 2% 15px 0;} .product_listMain .layer3 .layer3Box ul li .icon img{ display: block; margin: 0 auto; border-radius:24px; } .product_listMain .layer3 .layer3Box ul li:nth-child(3n){ margin-right: 2%;} .product_listMain .layer3 .layer3Box ul li:nth-child(2n){ margin-right: 0;} .product_listMain .layer3 .layer3Box h2{ height: 80px; } .product_listMain .layer3 .tit h2{ text-align: center; font-size: 24px; color: #333;} } /*Equipment*/ .Equipment{ width: 100%;} .Equipment .Equipment_layer1{ padding-top: 130px;} .Equipment .Equipment_layer1 ul{ width: 100%; overflow: hidden;} .Equipment .Equipment_layer1 ul li{ height: 770px; width: 50%; float: left;} .Equipment .Equipment_layer1 ul li:first-child{ width: 100%;} .Equipment .Equipment_layer1 ul li .icon{ height: 400px;} .Equipment .Equipment_layer1 ul li .icon img{ width: auto; display: block; margin: 0 auto;} .Equipment .Equipment_layer1 ul li:first-child .text{ width: 68%; margin: 0 auto;} .Equipment .Equipment_layer1 ul li .text h2{ text-align: center; font-size: 26px; color: #000;} .Equipment .Equipment_layer1 ul li .text h3{ line-height: 28px; padding: 20px 0; font-weight: normal; text-align: center; font-size: 22px; color: #000;} .Equipment .Equipment_layer1 ul li .text p{ font-size: 16px; color: #333; text-align: center; line-height: 26px;} .Equipment .Equipment_layer1 ul li .text{ width: 73%; margin: 0 auto;} .Equipment .Equipment_layer1 ul li .text a{ display: block; margin: 25px auto 0 auto; width: 142px; height: 44px; border-radius:22px; text-align: center; line-height: 44px; font-size: 14px; color: #fff; background: #0071e3;} .Equipment_layer2{ background: #fafafa; width: 100%; overflow: hidden; height: auto; position: relative;} .Equipment_layer2 .icon{ width: 50%; height: 600px; float: left; overflow: hidden;} .Equipment_layer2 .icon img{ display: block; width: 100%; height: auto; transition: 0.5s;} .Equipment_layer2 .icon:hover img{ transform: scale(1.1);} .Equipment_layer2 .text{ width: 50%; position: absolute; right: 0; height: 100%;} .Equipment_layer2 .text .textBox{ position: absolute; width: 100%; top: 50%; transform: translateY(-50%); padding: 0 65px; box-sizing: border-box;} .Equipment_layer2 .text .textBox h2{ margin-bottom: 15px; font-size: 32px; color: #333;} .Equipment_layer2 .text .textBox p{ font-size: 20px; color: #333; line-height: 44px;} .Equipment_layer2 .text .textBox p span{ font-weight: bold; margin-right: 5px;} /*newList*/ .w1600{ width: 1600px; margin: 0 auto;} .newList_layer1{ overflow: hidden; padding-bottom: 100px;} .newList_layer1 ul{ overflow: hidden;} .newList_layer1 ul li{ width: 32%; float: left; margin: 0 2% 0 0; padding-bottom:40px;} .newList_layer1 ul li:nth-child(3n){ margin-right: 0;} .newList_layer1 ul li .bt{font-size: 14px; color: #333; width: 100%; height: 64px; line-height: 64px;} .newList_layer1 ul li .icon{ width: 515px; height: 280px; overflow: hidden;} .newList_layer1 ul li .icon img{ display: block; width: 100%; height: 100%; border-radius:18px;} .newList_layer1 ul li .text{ width: 100%;} .newList_layer1 ul li .text h2{ color: #000; font-size: 18px; padding: 12px 0; line-height:32px; height:72px;} .newList_layer1 ul li .text p{ font-size: 14px; color: #666; line-height: 26px;} .newList_layer2 .tit{ width: 100%; padding-bottom: 80px;} .newList_layer2 .tit ul{ overflow: hidden;} .newList_layer2 .tit ul li{ float: left; margin-right: 20px;} .newList_layer2 .tit ul li select{ width: 388px; height: 36px; border: 1px solid #e4e4e4; box-sizing: border-box; border-radius:4px; padding: 0 12px; box-sizing: border-box; font-size: 16px; outline: none; background: #fafafa;} .newList_layer2 .tit ul li button{ display: block;cursor: pointer; height: 36px; width: 84px; text-align: center; border-radius:18px; color: #fff; background: #0071e3; border: none; outline: none;} .newList_layer2 .Main{ width: 100%;} .newList_layer2 .Main ul li{ width: 100%; overflow: hidden; margin-bottom: 20px;} .newList_layer2 .Main ul li .icon{ width: 200px; float: left;} .newList_layer2 .Main ul li .icon img{ display: block; width: 100%; height: auto;} .newList_layer2 .Main ul li .text{ width:calc(100% - 200px); float: left; overflow: hidden; padding-left: 40px; box-sizing: border-box;} .newList_layer2 .Main ul li .text p{ height:150px; font-size: 18px; line-height: 40px; float: left; display: block; width: 33%;} .newList_layer2 .Main ul li .text p button{ cursor: pointer; height: 36px; width: 105px; text-align: center; border-radius:18px; color: #fff; background: #0071e3; border: none; outline: none;} .newList_layer2 .Main ul li .text p:last-child{ text-align: right;} /*newDetails*/ .w1200{ width: 1200px; margin: 0 auto;} .newDetails .title{ width: 100%; border-bottom: 1px solid #e4e4e4; box-sizing: border-box; padding-bottom: 20px;} .newDetails .title h1{ padding: 15px 0; font-size: 42px; line-height: 56px; color: #000;} .newDetails .title h2{ padding: 15px 0; font-size: 38px; line-height: 48px; color: #000;} .newDetails .title h3{ padding: 15px 0; font-size: 32px; line-height: 46px; color: #000;} .newDetails .title p{ font-size: 14px; color: #666;} .newDetails .Main{ padding: 40px 0 0 0;} .newDetails .Main .icon{ width: 100%; margin-bottom: 35px;} .newDetails .Main .icon img{ display: block; width: 100%; height: auto;} .newDetails .Main p{ margin-bottom: 35px; font-size: 14px; color: #333; line-height: 26px; } .newDetails .Main .bt{font-weight: bold; margin-bottom: 30px; font-size: 20px; color: #000;} .newLink{ width: 100%; height: 125px; border-top:1px solid #e4e4e4;} .newLink ul{ overflow: hidden;} .newLink ul li{font-size: 16px; color: #333; float: left; margin-right: 20px; line-height: 125px;} .newLink ul li img{ display: inline-block; vertical-align: middle; transform: translateY(-2px);} .Application{ width: 800px;} .Application h2{ height: 70px; line-height: 70px; font-size: 28px; color: #000;} .Application ul{ overflow: hidden;} .Application ul li{ width: 49%; float: left; margin: 0 2% 20px 0;} .Application ul li:nth-child(2n){ margin-right: 0;} .Application ul li:last-child{ margin-right: 0; width: 100%; margin-bottom: 0;} .Application ul li input{ width: 100%; height: 36px; border: 1px solid #e4e4e4; border-radius:4px; box-sizing: border-box; background: #fafafa; padding: 0 12px; font-size: 12px;} .Application ul li select{ width: 100%; height: 36px; border: 1px solid #e4e4e4; border-radius:4px; box-sizing: border-box; background: #fafafa; padding: 0 12px; font-size: 12px;} .Application ul li textarea{ box-sizing: border-box; padding: 10px; box-sizing: border-box; height: 80px;border: 1px solid #e4e4e4; border-radius:4px; background: #fafafa; resize: none; width: 100%;} .Application h2{ height: 60px; line-height: 60px; color: #000; font-weight: normal; font-size: 14px; color: #000;} .Application button{ display: block; width: 105px; height: 44px; border: none; outline: none; text-align: center; line-height: 44px; font-size: 14px; color: #fff; border-radius:22px ; background: #0d78e4;} .ToLike .bt{ width: 100%; text-align: center; line-height: 205px; font-size: 32px; color: #000;} .ToLike ul{ width: 100%; overflow: hidden;} .ToLike ul li{ width: 32%; float: left; margin: 0 2% 0 0;} .ToLike ul li:last-child{ margin-right: 0;} .ToLike ul li .icon{ width: 100%; } /* height: 347px; */ .ToLike ul li .icon img{ display: block; width: 100%; height: 100%;} .ToLike ul li .text{ width: 100%; padding-top: 20px;} .ToLike ul li .text h2{ font-size: 20px; color: #000; line-height: 34px; height: 68px; overflow: hidden;} .ToLike ul li .text p{ padding-top: 15px; font-size: 14px; color: #3a3a3a;} .newPop{ width: 48px; position: fixed; right: 40px; top: 50%; transform: translateY(-50%);} .newPop ul{ width: 100%;} .newPop ul li{ background: #fff; margin-bottom: 20px; width: 48px; height: 48px; border: 1px solid #e4e4e4; box-sizing: border-box; border-radius:50%; position: relative;} .newPop ul li a{ display: block; width: 100%; height: 100%;} .newPop ul li img{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);} .newPop ul li:last-child{ margin-bottom: 0;} /* .bannerPage img{ transition: 3s; display: block; width: 100%; height: auto;} */ .bannerPage img{transition: 3s; display: block; width:1920px; margin: 0 auto} .bannerPage{ width: 100%; position: relative; overflow: hidden; } .bannerPage .bannerBox{ width: 100%; position: absolute; left: 0; padding: 0 8%; box-sizing: border-box; top: 50%; transform: translateY(-50%); } .bannerPage .bannerBox h2{ margin-bottom:20px;} .bannerPage .bannerBox p{ } .bannerPage .bannerBoxBlock{height:30px;} /* .bannerPage .bannerBox h2, */ /* .bannerPage .bannerBox p { */ /* background-color: rgba(28, 77, 180, 0.8); */ /* color: white; */ /* display: inline; */ /* padding: 5px 10px; */ /* box-decoration-break: clone; */ /* -webkit-box-decoration-break: clone; Chrome, Safari */ /* } */ .bannerPage .bannerBox h2 span { background-color: rgba(28, 77, 180, 0.8); color: #fff; padding: 5px 10px; box-decoration-break: clone; -webkit-box-decoration-break: clone; font-size: 40px; line-height: 62px; } .bannerPage .bannerBox p span { background-color: rgba(28, 77, 180, 0.8); color: #fff; padding: 5px 10px; box-decoration-break: clone; -webkit-box-decoration-break: clone; font-size: 28px; line-height: 52px; } .bannerPage .playClick{ background: url(../images/banner_arrow.png); width: 64px; height: 64px; background-size:100% 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); cursor: pointer;} .bannerPage .bannerBoxTxt{ width: 100%; position: absolute; left: 0; top: 50%; text-align:center; transform: translateY(-50%);} .bannerPage .bannerBoxTxt h2{ font-size: 40px; line-height: 32px; color: #fff; padding-bottom:30px;} .bannerPage .bannerBoxTxt p{ font-size: 24px; color: #fff; line-height: 36px;} .aboutContainer{ width:100% ;} .aboutContainer .about_Layer1{ overflow: hidden; padding-top: 170px; margin-bottom: 100px;} .aboutContainer .about_Layer1 .NrBox{ position: relative; width: 100%; overflow: hidden; margin-bottom: 100px;} .aboutContainer .about_Layer1 .NrBox .icon{ width: 50%; float: left; position: absolute; height: 100%; left: 0; top: 0;} .aboutContainer .about_Layer1 .NrBox .icon img{ } .aboutContainer .about_Layer1 .NrBox .aboutContainer .about_Layer1 .NrBox .text{ width: 50%; float: right;} .aboutContainer .about_Layer1 .NrBox .text h2{ font-size: 28px; color: #000; line-height: 36px; margin-bottom: 20px;} .aboutContainer .about_Layer1 .NrBox .text ul{ padding: 20px 0; width: 100%; overflow: hidden;} .aboutContainer .about_Layer1 .NrBox .text ul li{ text-align: center; font-size: 12px; color: #0f0f0f; width: 25%; float: left;} .aboutContainer .about_Layer1 .NrBox .text ul li b{ display: block; font-size: 20px; color: #000; margin-bottom: 15px;} .aboutContainer .about_Layer1 .NrBox .text p{ font-size: 16px; color: #4b4b4b; line-height: 24px; margin-bottom: 10px;} .aboutContainer .about_Layer1 .NrBox .text p span{ font-weight: bold; margin-right: 5px;} .aboutContainer .about_Layer1 .NrBox .text a{ display: block; width: 140px; height: 44px; text-align: center; border-radius: 22px; text-align: center; font-size: 14px; color: #fff; background: #0071e3; text-align: center; line-height: 44px; margin-top: 20px;} .aboutContainer .about_Layer2{ width: 100%; overflow: hidden; background: #fafafa;} .aboutContainer .about_Layer2 .tit{ height: 170px; line-height: 170px; text-align: center; font-size: 28px; color: #333;} .aboutContainer .about_Layer2 ul{ text-align: center;} .aboutContainer .about_Layer2 ul li{padding-bottom: 80px; width: 304px; display: inline-block; margin: 0 10px;} .aboutContainer .about_Layer2 ul li img{ display: block; width: 100%; height: 420px;} .aboutContainer .about_Layer2 ul li p{ text-align: center; font-size: 16px; color: #000; padding-top: 20px;} .aboutContainer .about_Layer3 .tit{ height: 170px; line-height: 170px; text-align: center; font-size: 28px; color: #333;} .aboutContainer .about_Layer3{overflow: hidden; width: 100%; padding-bottom: 60px;} .aboutContainer .about_Layer3 .Main{ width: 1200px; margin: 0 auto; height: 600px;} .aboutContainer .about_Layer3 .Main .swiper-container{ width: 100%; height: 100%; overflow:inherit ;position: relative;} .aboutContainer .about_Layer3 .Main .swiper-container img{ display: block; width: 100%; height:100%; transition: 0.5s; transform: scale(0.75);} .aboutContainer .about_Layer3 .Main .swiper-container .swiper-slide-active img { transform: scale(1.0);} .aboutContainer .about_Layer3 .Main .swiper-container .swiper-button-next{ background: url(../images/banner_arrow2.png); width: 48px; height: 48px; right: 42px;} .aboutContainer .about_Layer3 .Main .swiper-container .swiper-button-prev{ background: url(../images/banner_arrow1.png); width: 48px; height: 48px; left: 42px;} .aboutContainer .about_Layer3 .Main .swiper-container .swiper-button-next:after{ display: none;} .aboutContainer .about_Layer3 .Main .swiper-container .swiper-button-prev:after{ display: none;} .aboutContainer .about_Layer4{ width: 100%; background: #fafafa; overflow: hidden;} .aboutContainer .about_Layer4 .tit{ height: 170px; line-height: 170px; text-align: center; font-size: 28px; color: #333;} .aboutContainer .about_Layer4 .Main{overflow: hidden; width: 1200px; position: relative; height: 320px; margin: 0 auto;} .aboutContainer .about_Layer4 .Main .swiper-container{ width: 100%; height: 100%;} .aboutContainer .about_Layer4 .Main .MainBox{ margin: 0 auto; width: 900px; height: 320px; background: #fff; border-radius:25px; padding:30px; box-sizing: border-box;} .aboutContainer .about_Layer4 .Main .MainBox h2{ height: 90px; border-bottom: 1px solid #e4e4e4; color: #1d1d1d; font-size: 42px;} .aboutContainer .about_Layer4 .Main .MainBox p{ padding-top: 20px; font-size: 14px; color: #333; line-height: 24px;} .aboutContainer .about_Layer4 .Main .MainBox p span{ color: #0056de;} .aboutContainer .about_Layer4 .Main .swiper-button-next{ background: url(../images/banner_arrow2.png); width: 48px; height: 48px; right: 42px;} .aboutContainer .about_Layer4 .Main .swiper-button-prev{ background: url(../images/banner_arrow1.png); width: 48px; height: 48px; left: 42px;} .aboutContainer .about_Layer4 .Main .swiper-button-next:after{ display: none;} .aboutContainer .about_Layer4 .Main .swiper-button-prev:after{ display: none;} .aboutContainer .about_Layer4 .hd{ width: 100%;} .aboutContainer .about_Layer4 .hd ul{ width: 100%; overflow: hidden;} .aboutContainer .about_Layer4 .hd .nr{ cursor: pointer; width: 100%; float: left;} .aboutContainer .about_Layer4 .hd .nr .icon{ width: 100%; height: 90px; border-bottom: 1px dashed #e1e1e1; position: relative;} .aboutContainer .about_Layer4 .hd .nr .icon span{box-sizing: initial; display: block; width: 12px; height: 12px; border-radius:50%; position: absolute; left: 50%; bottom: 0; transform: translate(-50%,50%); background: #e1e1e1; border:6px solid #fafafa; border-radius:50% ;} .aboutContainer .about_Layer4 .hd .nr p{ padding: 30px 0 60px 0; text-align: center; font-size: 22px; color: #474747; font-weight: bold;} .aboutContainer .about_Layer4 .hd .swiper-slide-thumb-active .nr .icon span{ border:6px solid #0071e3; background: #fff;} .aboutContainer .about_Layer5{ width: 1200px; margin: 0 auto;} .aboutContainer .about_Layer5 .Main{ width: 1200px; margin: 0 auto; position: relative;} .aboutContainer .about_Layer5 .tit{ height: 170px; line-height: 170px; text-align: center; font-size: 28px; color: #333;} .aboutContainer .about_Layer5 .Main{ position: relative; width: 100%; overflow: hidden;} .aboutContainer .about_Layer5 .swiper-container{ width: 100%;} .aboutContainer .about_Layer5 .MainBox{ width: 900px; margin: 0 auto;} .aboutContainer .about_Layer5 .MainBox p{ padding: 60px 0; background: url(../images/aboutBg_03.png) left top no-repeat; font-size: 14px; color: #000; line-height: 24px;} .aboutContainer .about_Layer5 .MainBox .icon{ margin: 0 auto;} .aboutContainer .about_Layer5 .MainBox .icon img{ display: block; margin: 0 auto; max-width:80px; border-radius:50%;} .aboutContainer .about_Layer5 .MainBox .Name h2{ line-height: 54px; text-align: center; font-size: 18px; color: #181818;} .aboutContainer .about_Layer5 .MainBox .Name span{ text-align: center; display: block; font-size: 14px; color: #666;} .aboutContainer .about_Layer5 .MainBox .Name img{ display: block; margin:15px auto 0 auto; max-width:60px; border-radius:50%;} .aboutContainer .about_Layer5 .Main .swiper-button-next{ background: url(../images/banner_arrow2.png); width: 48px; height: 48px; right: 42px;} .aboutContainer .about_Layer5 .Main .swiper-button-prev{ background: url(../images/banner_arrow1.png); width: 48px; height: 48px; left: 42px;} .aboutContainer .about_Layer5 .Main .swiper-button-next:after{ display: none;} .aboutContainer .about_Layer5 .Main .swiper-button-prev:after{ display: none;} .newDetails .newList2{ width: 100%;} .newDetails .newList2 dl{ overflow: hidden; width: 100%; padding: 40px 0; border-bottom: 1px solid #e4e4e4;} .newDetails .newList2 dl dd{ float: left; margin-right: 12px;} .newDetails .newList2 dl dd a{ line-height: 40px; display: block; padding:0 15px; height: 40px; border-radius:20px; background:#fafafa; color: #404040;} .newDetails .newList2 ul{ overflow: hidden; padding: 40px 0;} .newDetails .newList2 ul li{ width: 31.5%; float: left; margin: 0 2% 0 0;} .newDetails .newList2 ul li:last-child{ margin-right: 0;} .newDetails .newList2 ul li .icon{ width: 100%; border-radius:8px; overflow: hidden;} .newDetails .newList2 ul li .icon img{ display: block; width: 100%;} .newDetails .newList2 ul li p{ padding-top: 20px; line-height: 22px; color: #000;} .service{ width: 100%;} .service .service_layer1{ padding-bottom: 100px; overflow: hidden;} .service .service_layer1 .bt{ padding: 75px 0; text-align: center; line-height: 36px; color: #333; font-size: 24px;} .service .service_layer1 dl{ overflow: hidden;} .service .service_layer1 dl dd{ width: 32%; float: left; margin: 0 2% 0 0;} .service .service_layer1 dl dd:last-child{ margin-right: 0;} .service .service_layer1 dl dd .icon{ width: 100%; height: 282px; border-radius:25px; overflow: hidden;} .service .service_layer1 dl dd .icon img{ display: block; width: 100%; height: 100%;} .service .service_layer1 dl dd .text{ width: 100%;} .service .service_layer1 dl dd .text h2{ height: 76px; color: #000; font-size: 22px; color: #000; line-height: 76px;} .service .service_layer1 dl dd .text ul{ overflow: hidden;} .service .service_layer1 dl dd .text li{ position: relative; padding-left: 20px; list-style:disc; line-height: 40px; color: #000; font-size: 16px;} .service .service_layer1 dl dd .text a{ display: inline-block; padding:0 25px; height: 44px; border-radius:22px; font-size: 16px; color: #fff; background: #0071e3;} .service .service_layer1 dl dd .text li:after{ content: '·'; width: 10px; line-height: 40px; font-weight: bold; position: absolute; left: 0; top: 0;} .service .service_layer2{ width: 100%; overflow: hidden;} .service .service_layer2{ background: #fafafa; width: 100%; overflow: hidden; height: auto; position: relative;} .service .service_layer2 .icon{ width: 50%; height: auto; float: left; overflow: hidden;} .service .service_layer2 .icon img{ display: block; width: 100%; height: auto; transition: 0.5s;} .service .service_layer2 .icon:hover img{ transform: scale(1.1);} .service .service_layer2 .text{ width: 50%; position: absolute; right: 0; height: 100%;} .service .service_layer2 .text .textBox{ position: absolute; width: 100%; top: 50%; transform: translateY(-50%); padding: 0 65px; box-sizing: border-box;} .service .service_layer2 .text .textBox h2{ margin-bottom: 15px; font-size: 32px; color: #333;} .service .service_layer2 .text .textBox p{ font-size: 20px; color: #333; line-height: 44px;} .service .service_layer2 .text .textBox p span{ font-weight: bold; margin-right: 5px;} .service .service_layer2 .text .textBox a{ display: block; width: 165px; height: 44px; border-radius:22px; text-align: center; line-height: 44px; color: #fff; font-size: 16px; background: #0071e3; color: #fff; margin-top: 15px;} .service_layer3{ width: 1080px; margin: 0 auto;} .service_layer3 .tit{ padding: 130px 0 85px 0;} .service_layer3 .tit h2{ text-align: center; font-size: 28px; font-weight: bold; color:#1d1d1d; margin-bottom: 35px;} .service_layer3 .tit p{ text-align: center; font-size: 24px; color: #333;} .service_layer3 ul{ width: 100%; overflow: hidden; justify-content: flex-start; list-style-type: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; } /* .service_layer3 ul li{ width: 18.4%; float: left; margin: 0 2% 45px 0;} */ /* .service_layer3 ul li .icon{ width: 100%; height: auto; position: relative;} */ /* .service_layer3 ul li .icon img.pic{ display: block; width: 100%; height: auto;} */ /* .service_layer3 ul li p{ text-align: center; padding: 20px 0 0 0; font-size: 14px; color: #333;} */ /* .service_layer3 ul li .icon .downLoad{ display: block; background: url(../images/download.png); width: 48px; height: 48px; position: absolute; top: 80%; left: 50%; transform: translate(-50%,-50%); opacity: 0; transition: 0.5s;} */ /* .service_layer3 ul li:hover .icon .downLoad{ opacity: 1; top: 50%;} */ /* .service_layer3 ul li:nth-child(5n){ margin-right: 0;} */ /* .service_layer3 .more{ display: block; width: 200px; height: 44px; border-radius:22px; text-align: center; line-height: 44px; color: #fff; font-size: 16px; background: #0071e3; color: #fff; margin-top: 15px; margin: 0 auto;} */ .service_layer3 ul li{ width: 18.4%; float: left; margin: 0 2% 45px 0;} .service_layer3 ul li .icon{ width: 100%; height: auto; position: relative;} .service_layer3 ul li .icon img.pic{ display: block; width: 100%; height: auto;} .service_layer3 ul li p{ text-align: center; padding: 20px 0 0 0; font-size: 14px; color: #333;} .service_layer3 ul li .icon .downLoad{ display: block; background: url(../images/download.png); width: 48px; height: 48px; position: absolute; top: 80%; left: 50%; transform: translate(-50%,-50%); opacity: 0; transition: 0.5s;} .service_layer3 ul li:hover .icon .downLoad{ opacity: 1; top: 50%;} .service_layer3 ul li:nth-child(5n){ margin-right: 0;} .service_layer3 .more{ display: block; width: 200px; height: 44px; border-radius:22px; text-align: center; line-height: 44px; color: #fff; font-size: 16px; background: #0071e3; color: #fff; margin-top: 15px; margin: 0 auto;} .proDetails .proNav{ width: 100%; height: 64px; background: #fafafa; position: -webkit-sticky; /* 针对旧版WebKit浏览器的前缀 */ position: sticky; top: 0; /* 当元素到达视口顶部时固定的位置 */ width: 100%; /* 根据需要设置宽度 */ /* 其他样式... */ z-index: 1000; /* 确保导航在页面其他内容上方 */ } .content { margin: 20px 0; padding: 20px; border: 1px solid #ddd; } :target { padding-top: 60px; margin-top: -60px; } .proDetails .proNav ul{ text-align: center;} .proDetails .proNav ul li{ display: inline-block; margin: 0 23px; line-height: 64px;} .proDetails .proNav ul li a{ font-size: 14px; color: #333;} .proDetails .proNav .active a{ font-size: 24px; color: #333;} .proDetails .proNav ul li:hover a{ color: #0055de;} .proDetails .proNav ul li.on a{ color: #0055de;} .proDetails .tit{ width: 100%; line-height: 235px; font-size: 44px; color: #000;} .proDetails .proLayer1{ overflow: hidden;} .proDetails .proLayer1 ul{ overflow: hidden;} .proDetails .proLayer1 ul li{ width: 49%; margin: 0 2% 80px 0; float: left;} .proDetails .proLayer1 ul li:nth-child(2n){ margin-right: 0;} .proDetails .proLayer1 ul li .icon{ width: 100%; height: 430px; border-radius:25px; overflow: hidden;} .proDetails .proLayer1 ul li .icon img{ display: block; width: 100%; height: 100%;} .proDetails .proLayer1 ul li .text{ width: 100%;} .proDetails .proLayer1 ul li .text h2{line-height: 38px; font-size: 22px; color: #000;} .proDetails .proLayer1 ul li .text p{ font-size: 14px; line-height: 24px; color: #000; height: 48px; overflow: hidden;} .proDetails .proLayer1 .bt{ padding: 40px 0;} .proDetails .proLayer1 .bt h2{ font-size: 28px; color: #000; font-weight: bold; margin-bottom: 35px;} .proDetails .proLayer1 .bt p{ font-size: 16px; color: #333;} .proDetails .proLayer1 dl{ width: 100%; overflow: hidden; border-left:1px solid #e5e5e5; border-top:1px solid #e5e5e5; box-sizing: border-box;} .proDetails .proLayer1 dl dd{ width: 25%; float: left; height: 72px; box-sizing: border-box; border-right:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5; padding: 10px;} .proDetails .proLayer1 dl dd a{ display: block; width: 100%; height: 52px; border-radius:8px ; line-height: 52px; background: #ff7135; text-align: center; font-size: 14px; color: #fff;} .proDetails .proLayer2{ overflow: hidden;} .proDetails .proLayer2 ul{ width: 32%; float:left; margin: 0 2% 0 0;} .proDetails .proLayer2 ul:last-child{ margin-right: 0;} .proDetails .proLayer2 ul li{ width: 100%; margin-bottom: 20px; border: 1px solid #e5e5e5; border-radius:7px;} .proDetails .proLayer2 ul li .click{ width: 100%; height: 62px; line-height: 62px; position: relative; font-size: 16px; color: #000; background: #fafafa; padding-left: 55px; box-sizing: border-box;cursor: pointer;} .proDetails .proLayer2 ul li .click span{ display: block; width: 20px; height: 20px; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); border: 2px solid #c8ccd3; border-radius:4px; text-align: center; line-height: 15px; font-size: 14px; color: #3d495b; font-weight: bold;} .proDetails .proLayer2 ul li .text{ display: none; width: 100%; padding: 25px 30px; box-sizing: border-box;} .proDetails .proLayer2 ul li .text h2{ font-size: 16px; color: #000; line-height: 28px; margin-bottom: 15px;} .proDetails .proLayer2 ul li .text p{ font-size: 14px; color: #555; line-height: 24px; margin-bottom: 20px;} .proDetails .proLayer3{ margin-top: 60px;} .proDetails .proLayer3 img{ display: block; width: 100%; height: auto;} .proDetails .proLayer4{ width: 100%; padding: 125px 0 80px 0;} .proDetails .proLayer4 h2{ text-align: center; font-size: 28px; color: #000; margin-bottom: 50px;} .proDetails .proLayer4 .video{ width: 1200px; height: 670px; background: #000; margin: 0 auto; position: relative;} .proDetails .proLayer4 .video .vidClick{ background: url(../images/banner_arrow.png); width: 64px; height: 64px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background-size:100% 100%;} .proDetails .proLayer4 video{ width: 100%; display: block; height: 100%;} .proDetails2 .proLayer1{ width: 100%; padding: 155px 0 120px 0;} /* .proDetails2 .proLayer1 .icon{ width: 335px; height: 335px; border-radius:50%; margin: 0 auto; border: 6px solid #ff7b74; box-sizing: border-box; overflow: hidden;} */ /* 08.07 -- 服务器最后版本 */ .proDetails2 .proLayer1 .icon{ max-width: 350px; height: auto; margin: 0 auto; overflow: hidden;} .proDetails2 .proLayer1 .icon img{ display: block; width: 100%; height: 100%;} .proDetails2 .proLayer1 .text{ width: 800px; margin: 0 auto; padding: 60px 0 0 0;} .proDetails2 .proLayer1 .text h2{ font-size: 24px; text-align: center; font-weight: bold; color: #303030; margin-bottom: 25px;} .proDetails2 .proLayer1 .text p{ text-align: center; font-size: 16px; color: #3e3e3e; line-height: 28px; margin-bottom: 20px;} .proDetails2 .proLayer1 .text a{ display: block; width: 140px; height: 44px; border-radius:22px; text-align: center; line-height: 44px; color: #fff; font-size: 16px; background: #0071e3; color: #fff; margin: 15px auto 0 auto;} .proDetails2 .proLayer2{ background: #fafafa; width: 100%; overflow: hidden; height: auto; position: relative;} .proDetails2 .proLayer2 .icon{ width: 50%; height: auto; float: left; overflow: hidden;} .proDetails2 .proLayer2 .icon img{ display: block; width: 100%; height: auto; transition: 0.5s;} .proDetails2 .proLayer2 .icon:hover img{ transform: scale(1.1);} .proDetails2 .proLayer2 .text{ width: 50%; position: absolute; right: 0; height: 100%;} .proDetails2 .proLayer2 .text .textBox{ position: absolute; width: 100%; top: 50%; transform: translateY(-50%); padding: 0 65px; box-sizing: border-box;} .proDetails2 .proLayer2 .text .textBox h2{ margin-bottom: 15px; font-size: 18px; color: #333;} .proDetails2 .proLayer2 .text .textBox p{ font-size: 14px; margin-bottom: 15px; color: #333; line-height: 44px;} .proDetails2 .proLayer2 .text .textBox p span{ font-weight: bold; margin-right: 5px;} .proDetails2 .proLayer2 h2{ font-size: 24px; line-height: 36px;} .proDetails2 .proLayer2 p{ width: 730px; line-height: 24px!important; font-size: 16px;} .proDetails2 .proLayer2 ul{ width: 100%;} .proDetails2 .proLayer2 ul li{ line-height: 48px; font-size: 16px; color: #121212; padding-left: 28px; background: url(../images/duihao_03.png) left center no-repeat;} .proDetails2 .proLayer3{ width: 100%; overflow: hidden; height: auto; position: relative; display: flex; flex-direction: row-reverse; align-items: center; } .proDetails2 .proLayer3 .icon{ width: 50%; height: auto; float: left; overflow: hidden;} .proDetails2 .proLayer3 .icon img{ display: block; width: 100%; height: auto; transition: 0.5s;} .proDetails2 .proLayer3 .icon:hover img{ transform: scale(1.1);} .proDetails2 .proLayer3 .textBox{ width: 100%; box-sizing: border-box; padding-left:100px; padding-right:50px; } .proDetails2 .proLayer3 .textBox h2{ margin-bottom: 15px; font-size: 18px; color: #333;} .proDetails2 .proLayer3 .textBox p{ font-size: 14px; margin-bottom: 15px; color: #333; line-height: 44px;} .proDetails2 .proLayer3 .textBox p span{ font-weight: bold; margin-right: 5px;} .proDetails2 .proLayer3 h2{ font-size: 24px; line-height: 36px;} .proDetails2 .proLayer3 p{ width: 730px; line-height: 24px!important; font-size: 16px;} .proDetails2 .proLayer3 ul{ width: 100%;} .proDetails2 .proLayer3 ul li{ line-height: 48px; font-size: 16px; color: #121212; padding-left: 28px; background: url(../images/duihao_03.png) left center no-repeat;} .proDetails2 .proLayer5 { width: 100%; padding: 125px 0 80px 0;} .proDetails2 .proLayer5 h2{ text-align: center; font-size: 28px; color: #000; margin-bottom: 50px;} .proDetails2 .proLayer5 .video{ width: 1200px; height: 670px; background: #000; margin: 0 auto; position: relative;} .proDetails2 .proLayer5 .video .vidClick{ background: url(../images/banner_arrow.png); width: 64px; height: 64px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background-size:100% 100%; cursor: pointer;} .proDetails2 .proLayer5 video{ width: 100%; display: block; height: 100%;} .proDetails2 .proLayer6{ overflow: hidden;} .proDetails2 .title2{ padding:50px 0 ;} .proDetails2 .title2 h2{ font-size: 28px; font-weight: bold; color: #141414; text-align: center; margin-bottom: 35px;} .proDetails2 .title2 p{ font-size: 14px; line-height: 24px; width: 900px; margin: 0 auto; text-align: center;} .proDetails2 .proLayer6 ul{ overflow: hidden; display: flex; /* 使用Flexbox布局 */ flex-wrap: nowrap; /* 防止换行 */ align-items: center; /* 垂直居中子元素 */ justify-content: center; /* 水平居中，如果需要 */ } .proDetails2 .proLayer6 ul li{ width: 32%; float: left; margin: 0 2% 0 0 ;} .proDetails2 .proLayer6 ul li:last-child{ margin-right: 0;} .proDetails2 .proLayer6 ul li img{ display: block; width: 100%; height: auto;} .proDetails2 .proLayer6 ul li p{ padding: 0 0 0 0; text-align: center; font-size: 22px; color: #000; font-weight: bold;} .proDetails2 .proLayer6 span:last-child{ display: block; padding-top: 25px; font-size: 14px; color: #000; text-align: left; line-height: 26px; padding:16px;} .proDetails2 .proLayer7{ padding-top: 50px;} .proDetails2 .proLayer7 .tab{ width: 100%; border-left: 1px solid #e4e4e4; border-top:1px solid #e4e4e4 ; box-sizing: border-box;} .proDetails2 .proLayer7 .tab table{ width: 100%; height: 100%;} .proDetails2 .proLayer7 .tab td{ vertical-align: middle; border-right: 1px solid #e4e4e4; border-bottom:1px solid #e4e4e4 ; height: 70px; font-size: 16px; color: #0a0a0a; text-align: center; background: #fafafa; box-sizing: border-box; width: 70px;} .proDetails2 .proLayer7 .tab .bt2{ background: #fff; text-indent: 40px; text-align: left;} .proDetails2 .proLayer7 .tab .bt1{ width: 220px; background: #fff;} .bannerPage .app{ display: none;} .bannerPage .pc{ display: block;} @media (max-width:1680px ){ } @media (max-width:768px ){ .w1200{ width: 100%;} .w1380{ width: 100%;} .w1600{ width: 100%;} /* .bannerPage .bannerBox{ display: none;} */ .aboutContainer .about_Layer1{ padding: 20px;} .aboutContainer .about_Layer1 .NrBox .icon{ width: 100%; position: relative; left: auto; top: auto; height: 300px;} .aboutContainer .about_Layer1 .NrBox .icon img{ height: 80%; width: auto; left: 50%; top: 50%; transform: translate(-50%,-50%);} .aboutContainer .about_Layer1 .NrBox .text{ width: 100%;} .aboutContainer .about_Layer1 .NrBox{ margin-bottom: 50px;} .aboutContainer .about_Layer2 ul{ padding: 0 15px; box-sizing: border-box;} .aboutContainer .about_Layer2 ul li{ width: 49%; margin: 0 2% 20px 0; float: left; padding-bottom: 0;} .aboutContainer .about_Layer2 ul li img{ height: auto;} .aboutContainer .about_Layer2 .tit{ line-height: 100px; height: 100px;} .aboutContainer .about_Layer2 ul li:nth-child(2n){ margin-right: 0;} .aboutContainer .about_Layer3 .Main{ width: 85%; margin: 0 auto; height: auto;} .aboutContainer .about_Layer3 .Main .swiper-container .swiper-button-prev{ left: 0;} .aboutContainer .about_Layer3 .Main .swiper-container .swiper-button-next{ right: 0;} .aboutContainer .about_Layer4 .Main .MainBox{ width: 95%;} .aboutContainer .about_Layer4 .Main{ z-index: 10; width: 100%; overflow: initial;} .aboutContainer .about_Layer4 .hd{z-index: 9; width: 100%; overflow-x: scroll;} .aboutContainer .about_Layer4 .hd ul{ width: 1000px;} .aboutContainer .about_Layer4 .Main .swiper-button-next{ top: auto; bottom: -110px; right: 0; background: url(../images/arrow2.png); width: 36px; height: 36px; } .aboutContainer .about_Layer4 .Main .swiper-button-prev{ top: auto; bottom:-110px; left: 0; background: url(../images/arrow1.png); width: 36px; height: 36px; } .aboutContainer .about_Layer5{ width: 100%;} .aboutContainer .about_Layer5 .Main{ width: 100%;} .aboutContainer .about_Layer5 .MainBox{ width: 90%; margin: 0 auto;} .aboutContainer .about_Layer5 .Main .swiper-button-prev{ width: 36px; height: 36px; background-size:100% 100%; top: auto;bottom: 140px;} .aboutContainer .about_Layer5 .Main .swiper-button-next{ width: 36px; height: 36px; background-size:100% 100%; top: auto; bottom: 140px;} .Equipment .Equipment_layer1{ padding: 30px 20px; box-sizing: border-box;} .Equipment .Equipment_layer1 ul li{ margin-bottom: 30px;} .Equipment .Equipment_layer1 ul li .icon{ height: auto;} .Equipment .Equipment_layer1 ul li{ width: 100%; height: auto;} .Equipment .Equipment_layer1 ul li:first-child .text{ width: 100%;} .Equipment .Equipment_layer1 ul li .text{ width: 100%;} .Equipment_layer2 .icon{ width: 100%; height: auto;} .Equipment_layer2 .text{ float: left; position: relative; width: 100%;} .Equipment_layer2 .text .textBox{ position: relative; left: auto; top: auto; transform: none; padding:30px 20px; box-sizing: border-box;} .Equipment_layer2 .text .textBox h2{ font-size: 24px;} .Equipment_layer2 .text .textBox p{ font-size: 16px;} .newDetails .title{ width: 100%; padding: 20px 15px; box-sizing: border-box;} .newDetails .title h1{ font-size: 24px;line-height: 32px;} .newDetails .title h2{ font-size: 20px;line-height: 28px;} .newDetails .Main{ padding: 20px 15px; box-sizing: border-box;} .Application{ width: 100%; padding:0 15px; box-sizing: border-box;} .Application ul li{ width: 100%; margin-right: 0;} .newPop{ right: 10px; bottom: 10px; transform: none; top: auto;} .newLink{ height: 80px; padding: 0 10px; box-sizing: border-box;} .newLink ul li{ line-height: 80px;} .ToLike .bt{ height: 120px; line-height: 120px;} .ToLike ul{ padding: 0 15px; box-sizing: border-box;} .ToLike ul li{ width: 100%; margin: 0 0 15px 0;} .ToLike ul li .icon{ height: auto;} .newDetails .newList2 dl{ padding: 15px;} .newDetails .newList2 dl dd{ margin-bottom: 10px;} .newDetails .newList2 ul{ padding: 20px 15px; box-sizing: border-box;} .newDetails .newList2 ul li{ width: 100%; margin-bottom: 15px;} .newList_layer1{ width: 100%; padding: 0 15px; box-sizing: border-box;} .newList_layer1 ul li{ width: 100%; margin: 0 0 15px 0;} .newList_layer1 ul li .icon{ height: auto;} .newList_layer2{ padding: 0 15px; box-sizing:border-box;} .newList_layer2 .tit ul li{ width: 37%; float: left; margin: 0 2% 0 0;} .newList_layer2 .tit ul li select{ width: 100%;} .newList_layer2 .tit ul li:last-child{ float: right; width: auto; margin-right: 0;} .newList_layer2 .Main ul li .icon{ width: 100%; height: auto;} .newList_layer2 .Main ul li .text{ width: 100%; padding: 0;} .newList_layer2 .Main ul li .text p{ height: 100px; line-height: 50px;} .newList_layer2 .Main ul li .text p:nth-child(2){ text-align: center;} .newList_layer2 .Main ul li .text p button{ margin-top: 15px; transform: translateX(-260px);} .bannerPage .pc{ display: none;} .bannerPage .app{ display: block;} .proDetails .proNav{ margin-top: 50px;} .proDetails .tit{ font-size: 28px; height: 120px; line-height: 120px;} .proDetails .proLayer1{ padding: 0 15px; box-sizing: border-box;} .proDetails .proLayer1 ul li{ width: 100%; margin: 0 0 25px 0;} .proDetails .proLayer1 ul li .icon{ width: 100%; height: auto;} .proDetails .proLayer1 dl dd{ width: 33%; height: 62px;} .proDetails .proLayer1 dl dd:nth-child(3n){ width: 34%;} .proDetails .proLayer1 dl dd a{ height: 100%; line-height: 42px;} .proDetails .proLayer2{ width: 100%; padding: 0 15px; box-sizing: border-box;} .proDetails .proLayer2 ul{ width: 100%; margin: 0;} .proDetails .proLayer4{ padding: 50px 0 0 0;} .proDetails .proLayer4 .video{ width: 100%; height: 300px; } .proDetails2 .proLayer1{ padding: 30px 15px; box-sizing: border-box;} .proDetails2 .proLayer1 .icon{ width: 100%; } .proDetails2 .proLayer1 .text{ width: 100%;} .proDetails2 .proLayer1 .text h2{ line-height: 20px;} .proDetails2 .proLayer1 .text p{ font-size: 14px;} .proDetails2 .proLayer2 .icon{ width: 100%; height: auto;} .proDetails2 .proLayer2 .text{ float: left; width: 100%; position: relative; left: auto; top: auto; transform: none;} .proDetails2 .proLayer2 .text .textBox{position: relative; left: auto; top: auto; transform: none; width: 100%; padding: 25px 15px; box-sizing: border-box;} .proDetails2 .proLayer2 .text .textBox p{ line-height: 28px; width: 100%;} .proDetails2 .proLayer3{ background: #fafafa; width: 100%; display: flex; flex-direction:column;} .proDetails2 .proLayer3 .icon{ width: 100%;} .proDetails2 .proLayer3 .icon img{ max-width: 100%; height: auto; display: inline-block;} .proDetails2 .proLayer3 .textBox{ width: 100%; display:block;padding:0 20px; } .proDetails2 .proLayer3 .textBox h2{ width: 100%;line-height: 36px; } .proDetails2 .proLayer3 .textBox p{ width: 100%;font-size: 14px;} .proDetails2 .proLayer5 .video{ width: 100%; height: auto;} .proDetails2 .proLayer5{ padding: 50px 0 0 0;} .proDetails2 .title2{ padding: 20px 15px; box-sizing: border-box;} .proDetails2 .title2 h2{ font-size: 22px; line-height: 26px;} .proDetails2 .title2 p{ width: 100%;} .proDetails2 .proLayer6 ul{ text-align: left; width: 100%; text-align: left; padding: 0 15px; white-space: nowrap; box-sizing: border-box; overflow-x: scroll;} .proDetails2 .proLayer6 ul{ display: block; /* 使用Flexbox布局 */ flex-wrap: nowrap; /* 防止换行 */ } .proDetails2 .proLayer6 ul li{ display: inline-block; text-align: left; width: 300px; float: inherit;} .proDetails2 .proLayer7 .tab{ border: none; padding: 0 15px; box-sizing: border-box; overflow-x: scroll;} .proDetails2 .proLayer7 .tab table{ width: 1000px; border-left:1px solid #e4e4e4; border-top:1px solid #e4e4e4 ;} .service .service_layer1{ padding: 0 0 50px 0;} .service .service_layer1 .bt{ padding: 45px 15px; box-sizing: border-box; font-size: 16px; line-height: 28px;} .service .service_layer1 dl{ padding: 0 15px; box-sizing: border-box;} .service .service_layer1 dl dd{ width: 100%; margin: 0 2% 15px 0;} .service .service_layer1 dl dd .icon{ height: auto;} .service .service_layer2 .icon{ width: 100%; height: auto;} .service .service_layer2 .text{ float: left; width: 100%; position: relative; left: auto; top: auto;} .service .service_layer2 .text .textBox{ position: relative; left: auto; top: auto; transform: none; padding:20px 15px; box-sizing: border-box;} .service .service_layer2 .text .textBox h2{ text-align: center; font-size: 24px;} .service .service_layer2 .text .textBox p{ font-size: 16px; line-height: 28px; text-align: center;} .service .service_layer2 .text .textBox a{ margin: 25px auto 0 auto;} .service_layer3{ width: 100%;} .service_layer3 .tit{ padding: 55px 0;} .service_layer3 .tit h2{ margin-bottom: 15px;} .service_layer3 ul{ padding: 0 15px; box-sizing: border-box;} .service_layer3 ul li{ width: 28%; margin: 0 2% 15px 8px;} .service_layer3 ul li:nth-child(3n){ margin-right: 0;} } .newsBlogNav { max-width: 1600px; margin: 30px auto; display: flex; align-items: flex-end; } .newsBlogNav .cate { padding: 10px 5px; margin: 10px 10px; cursor: pointer; text-align: center; transition: color 0.3s, border 0.3s; /* 平滑颜色和边框变化 */ border-bottom: 2px solid transparent; /* 默认无边框 */ align-items: flex-end; } .newsBlogNav .cate a{ font-size: 24px; color: #606060; } .newsBlogNav .cate.active { border-bottom: 2px solid #0071E3; } .newsBlogNav .cate.active a{ color: #0071E3; font-size:32px; line-height:0.36rem; } .newsForm{ max-width: 900px; margin: 30px auto; } .nbfTitle{ text-align: center; font-size: 36px; color: #333; margin: 50px 12px 30px 12px; } .nbfDes{ text-align: center; font-size: 17px; line-height: 24px; color: #333; margin: 50px 0 30px 0; } @media (max-width: 900px) { .newsBlogItem { /* width: 100%; */ margin-bottom: 20px; } .newsBlogNav .cate a{ font-size: 20px; } .newsBlogNav .cate.active a{ font-size:28px; } .bannerPage .bannerBoxTxt h2{ font-size: 18px; line-height: 22px; color: #fff; padding-bottom:10px;} .bannerPage .bannerBoxTxt p{ font-size: 12px; color: #fff; line-height: 16px;} .bannerPage .bannerBox{ width: 100%; position: absolute; left: 0; padding: 0 3%; box-sizing: border-box; top: 50%; transform: translateY(-50%); } /* .bannerPage .bannerBox h2{ font-size: 14px; line-height: 18px; color: #fff; } */ /* .bannerPage .bannerBox p{ font-size: 12px; color: #fff; line-height: 16px;} */ .bannerPage .bannerBoxBlock{height:36px;} .bannerPage .bannerBox h2 span { background-color: rgba(28, 77, 180, 0.8); color: #fff; padding: 5px 10px; box-decoration-break: clone; -webkit-box-decoration-break: clone; font-size: 14px; line-height: 26px; } .bannerPage .bannerBox p span { background-color: rgba(28, 77, 180, 0.8); color: #fff; padding: 5px 10px; box-decoration-break: clone; -webkit-box-decoration-break: clone; font-size: 12px; line-height: 26px; } } .equipmentBanner,.materialBanner{ banner2 { width: 1600px; max-width: 100%; /* 确保在移动端不超过屏幕宽度 */ margin: 0 auto; /* 居中布局 */ overflow: hidden; } .title2 { width: 100%; padding: 10px; box-sizing: border-box; color: #fff; font-size: 2em; text-align: center; /* 标题居中 */ } .content-row2 { display: flex; justify-content: space-between; padding: 20px; box-sizing: border-box; } .des2, .mainImg2, .param2 { padding: 10px; box-sizing: border-box; } .des2{ flex-basis: calc(40%); padding-left: 100px; line-height: 30px; display: flex; align-items: center; /* 垂直居中 */ justify-content: center; /* 水平居中 */ flex-direction: column; /* 子元素垂直排列 */ } .param2{ flex-basis: calc(30%); padding-right: 100px; padding-top:50px; padding-bottom:50px; display: flex; align-items: center; /* 垂直居中 */ justify-content: center; /* 水平居中 */ flex-direction: column; /* 子元素垂直排列 */ } .des2 { } .mainImg2 { text-align: center; } .mainImg2 img.responsive { max-width: 96%; /* 图片在移动端适应屏幕 */ height: auto; margin: 0 auto; /* 水平居中图片 */ } .param2 { display: flex; flex-direction: column; } .param2 div { flex: 1; display: flex; flex-direction: column; justify-content: center; text-align: center; } } @media (max-width: 768px) { .equipmentBanner,.materialBanner{ .content-row2 { flex-direction: column; } .title2 { width: 100%; margin: 10px 0 -10px 0; } .des2, .mainImg2, .param2 { width: 100%; margin-bottom: 10px; /* 垂直间距 */ padding: 10px; /* 根据需要调整内边距 */ } .param2 { flex-direction: row; flex-wrap: wrap; justify-content: center; /* 参数水平居中 */ } .param2 div { width: calc(50% - 20px); /* 移动端两列布局，减去间距 */ margin-bottom: 10px; /* 垂直间距 */ } } } .equipmentBanner,.materialBanner{ /* 手机端样式 */ .mobile-only { display: none; } /* PC端样式 */ .pc-only { display: block; } /* 媒体查询，针对手机端 */ @media (max-width: 768px) { .mobile-only { display: block; } .pc-only { display: none; } } } /* 添加模态对话框样式 */ .modal { display: none; z-index: 1; position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); } .modal-content { background-color: #fefefe; margin: 15% auto; /* 15% from the top and centered */ padding: 20px; border: 1px solid #888; width: 300px; /* 可以设置为固定宽度，如300px */ } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } /* News Page CSS update - 0813 */ .newsContainer { width: 1600px; margin: 0 auto; padding: 0; list-style-type: none; margin-top:20px; } .newsList { /* display: flex; */ /* flex-wrap: wrap; */ /* justify-content: flex-start; /* 修改为flex-start，从行的开始对齐 */ */ list-style-type: none; /* 移除默认的列表项标记 */ padding: 0; /* 移除默认内边距 */ margin: 0; /* 移除默认外边距 */ display: flex; /* 使用flex布局 */ flex-wrap: wrap; /* 允许换行 */ /* justify-content: space-between; */ justify-content: flex-start; } .newsList li { width: calc(33.333% - 30px); /* 减去左右外边距的宽度 */ margin-right: 30px; /* 右侧外边距 */ margin-bottom: 30px; /* 底部外边距 */ } .newsList li:last-child { margin-right: 0; /* 最后一个li元素不设右边距 */ } /* .newsList li { */ /* list-style-type: none; */ /* padding-left: 0; */ /* width: calc(33.333% - 10px); */ /* margin-bottom: 10px; */ /* box-sizing: border-box; */ /* text-align: left; */ /* padding:10px; */ /* } */ .newsList li a .icon:hover img{transform: scale(1.02);} .newsList li a .icon img { max-width:100%; height: auto; display: block; margin-bottom: 5px; border-radius: 16px; object-fit: cover; /* 保持宽高比，裁剪图片以覆盖容器 */ } .newsList li a { text-decoration: none; color: inherit; } .newsList h2 { margin: 0; padding: 5px 0; font-size: 20px; line-height:28px; word-wrap: break-word; } .newsList h3 { margin: 0; padding: 5px 0; font-size: 14px; font-weight:normal; line-height:22px; word-wrap: break-word; color: #666; } .newsList .bt { margin: 0; padding: 16px 0; font-size: 16px; line-height:22px; word-wrap: break-word; } .newsList p { margin: 0; padding: 5px 0; font-size: 17px; line-height: 23px; color: #666; } .icon { position: relative; /* 设置定位上下文 */ } .icon img { display: block; /* 移除图片的默认间距 */ width: 100%; /* 根据需要设置图片宽度 */ height: auto; /* 保持图片的宽高比 */ } .overlay { position: absolute; /* 绝对定位 */ top: 50%; left: 50%; transform: translate(-50%, -50%); /* 使用CSS transform居中 */ z-index: 10; /* 确保图层在图片上方 */ } .overlay img { width: 50px; /* 根据需要设置图层图片的宽度 */ height: 50px; /* 根据需要设置图层图片的高度 */ } .newsContainerThin { width: 1200px; margin: 20px auto; padding: 0; list-style-type: none; } .newsContainerThin .newsList h2 { margin: 0; padding: 5px 0; font-size: 16px; line-height:24px; word-wrap: break-word; /* 长单词换行 */ } .newsContainerThin .newsList p { margin: 0; padding: 5px 0; font-size: 12px; line-height: 18px; color: #666; } .pagination { text-align: center; margin: 20px 0; } .pagination a { display: inline-block; padding: 8px 15px; margin-right: 5px; border: 1px solid #ddd; color: #333; text-decoration: none; border-radius: 4px; } .pagination a:hover { background-color: #f2f2f2; } .pagination .current { background-color: #1586c6; color: white; border-color: #1586c6; pointer-events: none; /* 防止高亮页码被点击 */ } .pagination .prev, .pagination .next { background-color: #f2f2f2; } .pagination .prev:hover, .pagination .next:hover { background-color: #e0e0e0; } .newsBlogNav { margin-left: 10px; } .navContainer { max-width: 1600px; display: flex; margin: 30px auto; } .searchBox { display: flex; align-items: center; /* 确保输入框和按钮垂直居中 */ margin-left: auto; margin-right: 30px; } .searchBox input { padding: 5px; border: 1px solid #ccc; border-radius: 4px; } .searchBox button { padding: 5px 10px; margin-left: 5px; border: none; border-radius: 12px; background-color: #0071E3; color: white; cursor: pointer; } /* Simple CSS for pagination links */ .paginationDynamic { display: inline-block; } .paginationDynamic a { color: black; float: left; padding: 8px 16px; text-decoration: none; border: 1px solid #ddd; margin:5px; } .paginationDynamic a.active { background-color: #1586c6; color: white; border: 1px solid #1586c6; } /* 响应式设计 */ @media (max-width: 768px) { .newsContainer { width: 100%; padding: 0; margin: 0; list-style-type: none; /* 移除默认的列表项标记 */ } .newsContainer ul, li { margin: 0; padding: 0; list-style-type: none; /* 移除列表项符号 */ } /* 如果需要，可以进一步检查和调整 */ .newsContainer li:before, li:after { content: none; /* 确保没有伪元素添加内容 */ } .newsList li { width: 100%; /* 移动端全屏宽度，可根据需要调整 */ margin: 10px 12px; /* 居中并保留间距 */ } .newsList li:last-child { margin-right: 0; /* 最后一个li元素不设右边距 */ } .newsList li.icon { width: 100%; /* 图片容器宽度设为100% */ } .newsContainerThin{ width: 100%; padding: 0; margin: 0; list-style-type: none; /* 移除默认的列表项标记 */ } .navContainer{ flex-direction: column; /* 垂直排列子元素 */ align-items: flex-start; /* 水平排列到容器的开始位置 */ } } .eventContainer { box-sizing: border-box; width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 10px; } .eventItem { box-sizing: border-box; width: 100%; margin-bottom: 30px; display: flex; align-eventItems: flex-start; } .eventItem img { width: 240px; height: auto; border-radius:10px; margin-right:20px; } .eventItem:hover img{transform: scale(1.02);} .eventItemContent { display: flex; flex-direction: column; width: 100%; } .eventTopRow { display: flex; justify-content: space-between; } .eventLeftCol { padding-left:30px; width:37%; text-align:left; font-size:20px; } .eventCentertCol { width:45%; font-size:20px; text-align:left; padding: 0; } .eventRightCol { width:18%; text-align:right; font-size:20px; } .eventbottomRow { text-align: right; margin-top: 20px; } .eventbottomRow a{ display: inline-flex;align-items: center;justify-content: center; height: 36px; width: 105px; border-radius:22px; text-align: center; font-size: 14px; color: #fff; background: #0071e3;text-decoration: none; } /* .eventbottomRow button{ */ /* cursor: pointer; height: 36px; width: 105px; text-align: center; border-radius:18px; color: #fff; background: #0071e3; border: none; outline: none; */ /* } */ @media (min-width: 768px) { .eventItem { flex-direction: row; } .eventTopRow { justify-content: space-between; } .eventLeftCol { text-align:left; } .eventRightCol { text-align:right; } } @media (max-width: 768px) { .eventContainer { width: 100%; } .eventItem { margin: 0; padding: 0; flex-direction: column; margin-bottom: 20px; } .eventItem img { height: auto; max-width:none; width:100%; margin-bottom: 10px; } .eventTopRow { display: flex; justify-content: space-between; margin-bottom: 10px; } .eventLeftCol { max-width:180px; font-size:14px; padding: 0; } .eventCentertCol { /* max-width:120px; */ padding-left:10px; font-size:14px; } .eventRightCol { width:auto; font-size:14px; } .eventbottomRow { margin-top: 0; text-align:center; } } /* 定义一个表单容器 */ .popformBox { position: relative; width: fit-content; /* 宽度自适应内容 */ height: fit-content; /* 高度自适应内容 */ display: flex; /* 使用flex布局 */ flex-direction: column; /* 垂直布局 */ align-items: center; /* 水平居中 */ justify-content: center; /* 垂直居中 */ gap: 15px; /* 定义子元素之间的间距 */ padding: 50px 40px 20px 40px; /* 内边距 */ box-shadow: 0px 106px 42px rgba(0, 0, 0, 0.01), 0px 59px 36px rgba(0, 0, 0, 0.05), 0px 26px 26px rgba(0, 0, 0, 0.09), 0px 7px 15px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */ border-radius: 11px; /* 添加圆角 */ font-family: "Inter", sans-serif; /* 使用字体 */ background-color:#eff7fc; } /* 定义一个标题容器 */ .poptitleBox { display: flex; /* 使用flex布局 */ flex-direction: column; /* 垂直布局 */ align-items: center; /* 水平居中 */ justify-content: center; /* 垂直居中 */ gap: 10px; /* 定义子元素之间的间距 */ min-width:280px; } /* 定义标题 */ .poptitle { margin: 0; /* 外边距 */ font-size: 22px; /* 字体大小 */ font-weight: 28px; /* 字体粗细 */ color: #212121; /* 字体颜色 */ } /* 子标题样式 */ .popsubtitle { font-size: 12px; max-width: 80%; text-align: center; line-height: 18px; color: #8B8E98; /* 文字颜色 */ } /* 输入框容器样式 */ .popinputBox { width: 100%; height: fit-content; position: relative; display: flex; flex-direction: column; gap: 5px; /* 子元素之间的间隔 */ } /* 输入框标签样式 */ .popinputLabel { font-size: 14px; color: #8B8E98; /* 文字颜色 */ font-weight: 18px; } /* 输入框样式 */ .popinputField { width: auto; height: 40px; padding: 0 0 0 10px; border-radius: 7px; outline: none; border: 1px solid #e5e5e5; /* 边框颜色 */ filter: drop-shadow(0px 1px 0px #efefef) /* 阴影 */ drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5)); transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1); /* 过渡效果 */ } /* 输入框获取焦点时的样式 */ .popinputField:focus { border: 1px solid transparent; box-shadow: 0px 0px 0px 2px #242424; /* 阴影 */ background-color: transparent; } .popmessageBox{ width: auto; height: 80px; padding: 10px; border-radius: 7px; outline: none; border: 1px solid #e5e5e5; /* 边框颜色 */ filter: drop-shadow(0px 1px 0px #efefef) /* 阴影 */ drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5)); transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1); /* 过渡效果 */ } /* 按钮样式 */ .popSubmitBTN { margin-top:15px; width: 60%; height: 40px; border: 0; background: #1586c6; /* 背景颜色 */ border-radius: 7px; outline: none; color: #ffffff; /* 文字颜色 */ cursor: pointer; } .popnoteInfo { font-size: 14px; /* 字体大小为0.75rem */ color: #8B8E98; /* 文字颜色为#8B8E98 */ } /* closeButton 样式 */ #closeButton { width: 30px; /* 按钮宽度 */ height: 30px; /* 按钮高度 */ /* position: absolute; */ /* top: 10px; */ /* right: 10px; */ cursor: pointer; /* 鼠标悬停时显示手形图标 */ background-color: #ccc; /* 按钮背景色 */ color: #fff; /* 文字颜色 */ text-align: center; /* 文本居中 */ line-height: 30px; /* 行高与按钮高度一致，实现垂直居中 */ border-radius: 50%; /* 圆形按钮 */ } /* 可选：添加悬停效果 */ #closeButton:hover { background-color: #999; } /* 定义一个表单容器 */ .NEWpopformBox { position: relative; width: fit-content; /* 宽度自适应内容 */ height: fit-content; /* 高度自适应内容 */ display: flex; /* 使用flex布局 */ flex-direction: column; /* 垂直布局 */ align-items: left; /* 水平居中 */ justify-content: center; /* 垂直居中 */ gap: 15px; /* 定义子元素之间的间距 */ padding: 20px 20px 20px 20px; /* 内边距 */ box-shadow: 0px 106px 42px rgba(0, 0, 0, 0.01), 0px 59px 36px rgba(0, 0, 0, 0.05), 0px 26px 26px rgba(0, 0, 0, 0.09), 0px 7px 15px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */ border-radius: 11px; /* 添加圆角 */ font-family: "Inter", sans-serif; /* 使用字体 */ background-color:#fff; min-width:360px; } /* 定义一个标题容器 */ .NEWpoptitleBox { } .NEWpoptitleBox { display: flex; /* 启用Flexbox布局 */ justify-content: space-between; /* 子元素分散对齐，第一个在开始位置，最后一个在结束位置 */ margin-bottom:10px; } .NEWpoptitleBox .title-left { /* 左对齐的样式，如果需要 */ font-size: 24px; color: #1D1D1D; align-items: center; } .NEWpoptitleBox .title-right { /* 右对齐的样式，如果需要 */ align-items:top; } /* 定义标题 */ .NEWpoptitle { margin: 0; /* 外边距 */ font-size: 36px; /* 字体大小 */ font-weight: 42px; /* 字体粗细 */ color: #212121; /* 字体颜色 */ } /* 子标题样式 */ .NEWpopsubtitle { font-size: 12px; max-width: 80%; text-align: center; line-height: 18px; color: #8B8E98; /* 文字颜色 */ } /* 输入框容器样式 */ .NEWpopinputBox { width: 100%; height: fit-content; position: relative; display: flex; flex-direction: column; gap: 5px; /* 子元素之间的间隔 */ } /* 输入框标签样式 */ .NEWpopinputLabel { font-size: 14px; color: #8B8E98; /* 文字颜色 */ font-weight: 18px; } /* 输入框样式 */ .NEWpopinputField { width: auto; height: 40px; padding: 0 0 0 10px; border-radius: 7px; outline: none; border: 1px solid #e5e5e5; /* 边框颜色 */ filter: drop-shadow(0px 1px 0px #efefef) /* 阴影 */ drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5)); transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1); /* 过渡效果 */ background-color:#fafafa; } /* 输入框获取焦点时的样式 */ .NEWpopinputField:focus { border: 1px solid transparent; box-shadow: 0px 0px 0px 2px #242424; /* 阴影 */ background-color: transparent; } .NEWpopmessageBox{ width: auto; height: 80px; padding: 10px; border-radius: 7px; outline: none; border: 1px solid #e5e5e5; /* 边框颜色 */ filter: drop-shadow(0px 1px 0px #efefef) /* 阴影 */ drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5)); transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1); /* 过渡效果 */ background-color:#fafafa; } /* 按钮样式 */ .NEWpopSubmitBTN { width: 100%; height: 40px; border: 0; background: #0071E3; /* 背景颜色 */ border-radius: 20px; outline: none; color: #ffffff; /* 文字颜色 */ cursor: pointer; } .NEWpopnoteInfo { font-size: 12px; /* 字体大小为0.75rem */ color: #8B8E98; /* 文字颜色为#8B8E98 */ } /* 感谢按钮 */ .thxformContainer { } .thxrespForm { padding: 30px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; box-shadow: 5px 5px 15px -1px rgba(0,0,0,0.75); background-color:#eff7fc; width:260px; } .thxInfo { color: rgb(77, 75, 75); text-transform: uppercase; letter-spacing: 2px; display: block; font-weight: bold; font-size: 22px; margin-bottom: 30px; } .thxDes { display: flex; margin-bottom: 30px; align-items: center; width:150px; font-size: 14px; text-align:center; } .thxcloseBTN { width: 50%; padding: 10px; padding-bottom:10px; border-radius: 5px; color: white; background-color: #1586c6; border: none; cursor: pointer; } .flex-divider { display: flex; align-items: center; justify-content: center; font-size: 0; margin-top:10px; } .flex-divider .line-left, .flex-divider .line-right { flex-grow: 1; border-bottom: 1px solid #ccc; } .flex-divider .text { margin: 0 20px; background-color: #fff; font-size: 16px; } .popPhoneNum{ display:flex; align-items: center; margin: 6px auto; } .popPhoneNum .popPhoneText{ font-size: 20px; color: #0071E3; padding-left: 10px; } /* milling machine 重新定义样式 */ .machineContent{ display: flex; justify-content: center; /* 水平居中 */ flex-wrap: wrap; /* 允许子元素换行 */ } .machineContainer { display: flex; /* 使用flex布局 */ width: 100%; /* 宽度为100% */ max-width: 1600px; /* 最大宽度为1600px，根据实际需要调整 */ margin: 50px auto; /* 上下外边距自动，左右外边距为自动居中 */ } .MCleft, .MCright { flex: 1; /* 允许左右两侧平分空间 */ max-width:800px; } .MCleft { text-align:center; } .machineContainer.left img { max-width: 100%; /* 图片最大宽度为100% */ height: auto; /* 高度自动 */ } .machineContainer .text{ margin:0 50px;} .machineContainer .text h2{ font-size: 28px; color: #000; line-height: 36px; margin-bottom: 20px;} .machineContainer .text .horList { padding: 20px 0; width: 100%; overflow: hidden;list-style-type: none;} .machineContainer .text .horList li{ text-align: center; font-size: 14px; color: #0f0f0f; width: 25%; float: left;} .machineContainer .text .horList li b{ display: block; font-size: 20px; color: #000; margin-bottom: 15px;} .machineContainer .text .verList {list-style-type: none; padding-left: 0;} .machineContainer .text .verList li{ display: flex; align-items: flex-start; margin-bottom: 5px;line-height:24px;font-size: 16px;} .machineContainer .text .verList li::before {content: "•"; margin-right: 10px; width: 20px; font-size: 24px;} .machineContainer .text p{ font-size: 16px; color: #4b4b4b; line-height: 24px; margin-bottom: 10px;} .machineContainer .text p span{ font-weight: bold; margin-right: 5px;} .machineContainer .text a{ display: block; width: 140px; height: 44px; text-align: center; border-radius: 22px; text-align: center; font-size: 14px; color: #fff; background: #0071e3; text-align: center; line-height: 44px; margin-top: 20px; text-decoration:none;} @media (max-width: 768px) { .machineContainer { width: 100%; flex-direction: column; } .machineContainer.MCleft { width: 100%; } .machineContainer.MCright { width: 100%; } .machineContainer .MCleft { width: 100%; height: auto; margin: 0; } .machineContainer .MCleft img { width: 100%; } .machineContainer .text{ margin:0 15px;} } .contactFABTop { position: fixed; bottom: 80px; right: 20px; background-color: #0071E3; color: white; width: 48px; height: 48px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; box-shadow: 0 2px 3px rgba(0,0,0,0.16), 0 2px 3px rgba(0,0,0,0.23); overflow: hidden; z-index: 1002; } .contactFABTop img { width: 50%; height: auto; } .contactFAB { position: fixed; bottom: 20px; right: 20px; background-color: #0071E3; color: white; width: 48px; height: 48px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; box-shadow: 0 2px 3px rgba(0,0,0,0.16), 0 2px 3px rgba(0,0,0,0.23); overflow: hidden; z-index: 1003; } .contactFAB a { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; text-decoration: none; } .contactFAB img { width: 50%; height: auto; } @media (min-width: 1200px) { .contactFABTop { right: 100px; } .contactFAB { right: 100px; } } .articleList { display: flex; flex-direction: column; width: 100%; padding: 0 12px; box-sizing: border-box; } .articleBlock { display: flex; align-items: center; margin-bottom: 20px; } .articleCate { background-color: #d0edfe; border-radius: 5px; padding: 5px 10px; color: #333; margin-right: 10px; } .articleTTL { text-decoration: none; color: #000; line-height: 28px; overflow-wrap: break-word; } @media (min-width: 1201px) { .articleList { width: 1200px; margin: 30px auto; } } @media (max-width: 1200px) and (min-width: 601px) { .articleList { width: 95%; margin: 30px auto; } } @media (max-width: 768px) { .articleList { padding: 0 12px; margin-top:20px; } .articleBlock { flex-direction: column; align-items: flex-start; } .articleCate { margin-left: -2px; } } .tagsIndex { max-width: 1200px; margin: 18px auto; padding: 0; } .singleTag { background-color: #d0edfe; border-radius: 5px; padding: 5px 10px; color: #333; display: inline-block; margin: 12px; padding: 10px 12px; text-decoration: none; } .tagContainer { display: flex; justify-content: left; align-items: center; margin-top: 10px; margin-bottom: 20px; } .tags-label { font-weight: bold; margin-right: 10px; } .tags-links a { margin-right: 20px; text-decoration: none; } .tags-links a:hover { text-decoration: underline; } @media (max-width: 768px) { .tagsIndex { padding: 0 8px; margin-top:20px; } .tagContainer { flex-direction: column; align-items: flex-start; margin-left: 12px; } .tags-label { margin-bottom:20px; } .tags-links a { margin-top: 5px; line-height: 28px; } } .ptbContainer { width: 100%; max-width: 1600px; margin: 20px auto; margin-bottom:-30px; } .ptbTabs { display: flex; justify-content: space-around; background-color: #fff; border-bottom: 1px solid #ddd; } .ptbTab { padding: 12px; flex-grow: 1; text-align: center; cursor: pointer; background-color: #ddf1fc; transition: background-color 0.3s; } .ptbTab.active { background-color: #a7d9f6; } .ptbContent { display: none; padding: 12px; background-color: #fff; } .ptbContent.active { display: block; } .ptbImage { max-width: 100%; height: auto; margin-top:12px; } .ptbDualContent { display: flex; justify-content: space-around; } .ptbDualContent > div { flex-basis: 50%; padding: 10px; } .ptbDualContent h2{ padding:12px 0; font-size:24px; } .ptbDualContent p{ padding:6px 0; font-size:16px; line-height:24px; } @media (max-width: 768px) { .ptbDualContent { flex-direction: column; } .ptbDualContent > div { flex-basis: 100%; } }