.main .wrap{ width: 1146px; } @media only screen and (max-width: 1500px) { .main .wrap{ width: 94%; } } .business{ padding-top: 118px; padding-bottom: 112px; } @media only screen and (max-width: 1024px) { .business{ padding-top: 100px; padding-bottom: 100px; } } @media only screen and (max-width: 768px) { .business{ padding-top: 50px; padding-bottom: 50px; } } .business .business-text h1 { color: #FFFFFF; } .business-text span{ display: block; width: 85px; height: 2px; margin-top: 20px; background: #FFFFFF; } @media only screen and (max-width: 1520px) { .business-text span{ width: 70px; } } @media only screen and (max-width: 1366px) { .business-text span{ width: 60px; } } @media only screen and (max-width: 1024px) { .business-text span{ width: 50px; } } @media only screen and (max-width: 767px) { .business-text span{ width: 30px; } } .operation h1{ margin-top: 60px; margin-bottom: 20px; } @media only screen and (max-width: 1024px) { .operation h1{ margin-top: 40px; margin-bottom: 15px; } } @media only screen and (max-width: 768px) { .operation h1{ margin-top: 20px; margin-bottom: 10px; } } .operation h1 a{ color: #000000; } .operation p{ margin-bottom: 45px; color: #777777; } @media only screen and (max-width: 1024px) { .operation p{ margin-bottom: 30px; } } @media only screen and (max-width: 768px) { .operation p{ margin-bottom: 20px; } } .operation-list{ overflow: hidden; margin-top: -30px; margin-left: -15px; margin-right: -15px; margin-bottom: 92px; } @media only screen and (max-width: 1024px) { .operation-list{ margin-top: -20px; margin-bottom: 40px; } } @media only screen and (max-width: 768px) { .operation-list{ margin-top: -10px; margin-left: -10px; margin-right: -10px; margin-bottom: 10px; } } .operation-list li{ float: left; width: 50%; } @media only screen and (max-width: 600px) { .operation-list li{ width: 100%; } } .operation-inner{ margin-top: 30px; margin-left: 15px; margin-right: 15px; margin-bottom: 30px; } @media only screen and (max-width: 1024px) { .operation-inner{ margin-top: 20px; margin-bottom: 20px; } } @media only screen and (max-width: 768px) { .operation-inner{ margin-top: 10px; margin-left: 10px; margin-right: 10px; margin-bottom: 10px; } } .operation-inner h2{ margin-top: 40px; margin-bottom: 28px; } @media only screen and (max-width: 1024px) { .operation-inner h2{ margin-top: 30px; margin-bottom: 20px; } } @media only screen and (max-width: 768px) { .operation-inner h2{ margin-top: 20px; margin-bottom: 15px; } } .operation-inner h2 a{ color: #333333; } .operation-inner p{ margin-bottom: 50px; } @media only screen and (max-width: 1024px) { .operation-inner p{ margin-bottom: 30px; } } @media only screen and (max-width: 768px) { .operation-inner p{ margin-bottom: 20px; } } .product{ padding-top: 60px; padding-bottom: 106px; overflow: hidden; } @media only screen and (max-width: 1024px) { .product{ padding-top: 45px; padding-bottom: 60px; } } @media only screen and (max-width: 768px) { .product{ padding-bottom: 45px; } } @media only screen and (max-width: 767px) { .product{ padding-top: 20px; padding-bottom: 10px; } } .product-list{ margin-top: -16px; margin-left: -16px; margin-right: -16px; } @media only screen and (max-width: 768px) { .product-list{ margin-top: -10px; margin-left: -10px; margin-right: -10px; } } .product-list li{ float: left; width: 33.333%; } @media only screen and (max-width: 767px) { .product-list li{ width: 100%; } } .product-inner{ margin-top: 16px; margin-bottom: 16px; margin-left: 16px; margin-right: 16px; background: #F6F6F6; transition: all 0.6s; overflow: hidden; } @media only screen and (max-width: 768px) { .product-inner{ margin-top: 10px; margin-bottom: 10px; margin-left: 10px; margin-right: 10px; } } .product-inner:hover{ transform: scale(1.17); box-shadow: 0 0 13px #b5b5b5; } @media only screen and (max-width: 767px) { .product-inner:hover{ transform: scale(1.05); } } .product-inner>a { display: block; } .product-inner>a img{ width: 100%; height: 100%; } .product-inner h1{ margin-top: 30px; margin-bottom: 16px; padding-left: 30px; padding-right: 35px; } @media only screen and (max-width: 1024px) { .product-inner h1{ margin-top: 20px; margin-bottom: 10px; } } @media only screen and (max-width: 768px) { .product-inner h1{ margin-top: 10px; margin-bottom: 10px; } } .product-inner h1 a{ color: #0C5DC0; } .product-inner p{ margin-left: 30px; margin-right: 35px; margin-bottom: 29px; color: #999999; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; height: 63px; } @media only screen and (max-width: 1024px) { .product-inner p{ margin-bottom: 20px; color: #999999; } } @media only screen and (max-width: 768px) { .product-inner p{ margin-bottom: 10px; color: #999999; } } .fibrin .wrap{ padding-top: 60px; padding-bottom: 80px; } @media only screen and (max-width: 1024px) { .fibrin .wrap{ padding-top: 40px; padding-bottom: 50px; } } @media only screen and (max-width: 768px) { .fibrin .wrap{ padding-top: 20px; padding-bottom: 20px; } } .fibrin-t{ overflow: hidden; } .fibrin-l{ float: left; width: 50%; } @media only screen and (max-width: 767px) { .fibrin-l{ width: 100%; } } .fibrin-r{ float: right; width: 50%; } @media only screen and (max-width: 767px) { .fibrin-r{ width: 100%; margin-top: 10px; } } .fibrin-swiper{ margin-right: 12px; } @media only screen and (max-width: 767px) { .fibrin-swiper{ margin-right: 0; position: relative; } } .large_box{ overflow:hidden; border: 1px solid #E6E6E6; } .large_box li{ background: #F6F6F6; width: 100%; height: auto; padding-bottom: 74.73%; position: relative; } @media only screen and (max-width: 767px) { /*.large_box li{ padding-top: 0; padding-bottom: 0; }*/ } .large_box img{ width: 100%; height: 100%; max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); } .small_box{ overflow:hidden; position: relative; margin-top: 25px; } @media only screen and (max-width: 767px) { /*.small_box{ margin-top: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }*/ } .small_list{ position:relative; margin-left: 66px; margin-right: 56px; overflow:hidden; } @media only screen and (max-width: 767px) { /*.small_list{ display: none; }*/ } /*.small_list ul{ width: 100% !important; overflow:hidden; margin-left: -10px !important; margin-right: -10px; }*/ .small_list ul li{ float:left; width: 33.33%; cursor: pointer; } .small_list ul li .small_list-inner{ position:relative; width:100%; height: 0; padding-bottom: 100%; } .small_list ul li img{ width: auto; max-width: 80%; max-height: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); } .small_list ul li .small_list-inner .bun_bg{ display:block; position:absolute; top:0; left:0; width: 100%; height: 100%; background:#000; filter:alpha(opacity=60); -moz-opacity:0.6; -khtml-opacity:0.6; opacity:0.6; box-sizing: border-box; } .small_list ul li.on .small_list-inner{ /*border: 2px solid #0C5DC0;*/ background: #f7f7f7; } .small_list ul li.on .bun_bg{ background: none; border: 2px solid #0C5DC0; } .btn{ display:block; position: absolute; top: 0; width: 45px; height: 100%; background-color:#b3b3b3; background-repeat:no-repeat; background-position:center center; cursor:pointer; margin-top: 0 !important; } .small_box .swiper-button-next.swiper-button-disabled, .small_box .swiper-button-prev.swiper-button-disabled{pointer-events: initial; opacity: 1; cursor: pointer;} .small_box .swiper-button-next.disabled, .small_box .swiper-button-prev.disabled{opacity: 0.3; cursor: default; background-color:#b3b3b3;} @media only screen and (max-width: 767px) { .btn{ top: 50%; width: 20px; height: 40px; transform: translateY(-50%); } } .btn{ background-color:#0c5dc0; } .left_btn{ left: 0; background-image:url(../images/xiaoyu1_03.png); } @media only screen and (max-width: 767px) { .left_btn{ left: 10px; } } .right_btn{ right: 0; background-image:url(../images/dayu3_05.png); } @media only screen and (max-width: 767px) { .right_btn{ right: 10px; } } .fibrin-pic{ overflow: hidden; margin-right: 20px; position: relative; } .fibrin-box{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); } .productd1_l .slide_list.on .fibrin-box{ display: none; } .productd1_l .but .prev{ position: absolute; top: 0; width: 45px; height: 100%; display: block; cursor: pointer; background-image: url(../images/xiaoyu1_03.png); background-color: #0c5dc0 ; background-repeat: no-repeat; background-position: center center; cursor: pointer; left: 0; } .productd1_l .but .next{ position: absolute; top: 0; width: 45px; height: 100%; display: block; cursor: pointer; background-image: url(../images/dayu3_05.png); background-color: #b3b3b3; background-repeat: no-repeat; background-position: center center; cursor: pointer; right: 0; } .fibrin-l-b{ margin-top: 50px; width: 95%; } @media only screen and (max-width: 1200px) { .fibrin-l-b{ margin-top: 40px; } } @media only screen and (max-width: 1023px) { .fibrin-l-b{ margin-top: 30px; } } @media only screen and (max-width: 767px) { .fibrin-l-b{ margin-top: 20px; } } @media only screen and (max-width: 767px) { .fibrin-l-b{ width: 100%; } } .fibrin-l-b h2{ overflow: hidden; margin-bottom: 3px; line-height: 24px; color: #0c5dc0; } .fibrin-l-b h2 a{ color: #333; } .fibrin-l-b h2 a:hover{ color: #0c5dc0; } .fibrin-l-b h2>a{ margin-left: 21%; display: inline-block; width: 170px; overflow: hidden; text-align: center; text-overflow:ellipsis; white-space: nowrap; } @media only screen and (max-width: 1023px) { .fibrin-l-b h2>a{ margin-left: 7%; } } @media only screen and (max-width: 767px) { .fibrin-l-b h2>a{ margin-left: 5%; } } @media only screen and (max-width: 340px) { .fibrin-l-b h2>a{ margin-left: 5%; width: 130px; } } .fibrin-l-b h2 em{ display: inline-block; float: right; background: url(../images/service_dot15.png) center right no-repeat; margin-top: 2px; } .fibrin-l-b h2 em a{ display: block; } .fibrin-l-b span{ float: right; display: inline-block; padding-left: 18px; padding-right: 20px; color: #686868; font-family: arial; font-size: 12px; background: url(../images/service_dot16.png) left center no-repeat; } .fibrin-l-b span:hover{ color: #0c5dc0; } .fibrin-r .edit_con_original img{ width: 100%; } .fibrin-r .fibrin-list li>div img{ width: 100%; } .fibrin-list{ margin-left: 48px; border-top: 1px solid #CCCCCC; } .fibrin-list{ margin-left: 47px; } @media only screen and (max-width: 1024px) { .fibrin-list{ margin-left: 30px; } } @media only screen and (max-width: 768px) { .fibrin-list{ margin-left: 20px; } } @media only screen and (max-width: 767px) { .fibrin-list{ margin-left: 0; } } .fibrin-list li{ border-bottom: 1px solid #CCCCCC; } .fibrin-list li.on h1{ padding-top: 19px; padding-bottom: 21px; color: #0C5DC0; font-weight: bold; } @media only screen and (max-width: 768px) { .fibrin-list li.on h1{ padding-top: 10px; padding-bottom: 10px; } } .fibrin-list li h1{ padding-top: 39px; padding-bottom: 18px; color: #333333; } @media only screen and (max-width: 1024px) { .fibrin-list li h1{ padding-top: 30px; padding-bottom: 10px; } } @media only screen and (max-width: 768px) { .fibrin-list li h1{ padding-top: 20px; } } .fibrin-list li h1 img{ margin-top: 14px; width: 1.6%; margin-left: 6px; margin-right: 10px; } .fibrin-list li p{ padding-bottom: 39px; padding-left: 24px; } @media only screen and (max-width: 1024px) { .fibrin-list li p{ padding-bottom: 30px; } } @media only screen and (max-width: 768px) { .fibrin-list li p{ padding-bottom: 20px; } } @media only screen and (max-width: 767px) { .fibrin-list li p{ padding-left: 0; } } .fibrin-list li.on p{ padding-left: 0; } .fibrin-b h1{ padding-top: 39px; padding-bottom: 40px; } @media only screen and (max-width: 1024px) { .fibrin-b h1{ padding-top: 30px; padding-bottom: 30px; } } @media only screen and (max-width: 768px) { .fibrin-b h1{ padding-top: 20px; padding-bottom: 20px; } } .fibrin-b h1 a{ color: #0c5dc0; } .fibrin-b-list{ overflow: hidden; margin-left: -10px; margin-right: -10px; } .fibrin-b-list li{ float: left; width: 25%; } @media only screen and (max-width: 767px) { .fibrin-b-list li{ width: 50%; margin-bottom: 10px; } } .fibrin-b-inner{ margin-left: 10px; margin-right: 10px; background: #F5F5F5; } .fibrin-b-inner p{ padding-top: 20px; padding-left: 20px; padding-bottom: 18px; } .fibrin-b-inner p a{ color: #0c5dc0; } @media only screen and (max-width: 767px) { .large_box{ display: none; } .small_list ul li .small_list-inner .bun_bg{background: none; border: 2px solid #F6F6F6;} .small_box .swiper-button-next.swiper-button-disabled, .small_box .swiper-button-prev.swiper-button-disabled{pointer-events: initial; opacity: 1; cursor: default; background-color: #b3b3b3;} .small_box .swiper-button-next, .small_box .swiper-button-prev{background-color: #b3b3b3 !important;} .btn{background-size: 50%;} } body { position: relative; width: 100%; height: 100%; } .syst { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 96%; text-align: center; } .syst h2 { color: #000; font-size: 24px; }