@charset 'utf-8'; .img-responsive { display: inline-block; max-width: 100%; } html { overflow-x: auto; overflow-y: auto; } body { color: #333; background-color: #fff; } .container { width: 1200px; margin: 0 auto; } p { line-height: 2; letter-spacing: .7px; } /*公司简介*/ .blue { color: #0094b9; } .banner { margin-top: 25px; margin-bottom: 25px; } .banner img{ width: 100%; } .content { width: 840px; } .list { width: 326px; padding-bottom:30px; } .listnav { width: 100%; padding-top: 15px; padding-right: 38px; padding-left: 38px; /*padding-bottom: 15px;*/ background: #dcf0fe; } .listnav li { padding-top: 16px; padding-bottom: 16px; border-bottom: 1px solid #e7f5fe; } .listnav a { color: #666; } .listnav a:hover { color: #0094b9; } .listnav a.hover { font-size: 16px; font-weight: bold; color: #0094b9; } .content .headh2 { padding-top: 10px; padding-bottom: 30px; border-bottom: 1px solid #0094b9; } .intro { margin-bottom: 30px; } .intro span{ font-weight: inherit; } .intro .content .fp { margin-top: 30px; } .intro .content .imgdiv { margin-top: 17px; } .intro .content .imgp { margin-top: 26px; } .intro .content .secp { margin-top: 22px; } .more { line-height: 36px; display: block; height: 36px; margin-top: 37px; background: #f2f2f2; } .more img { margin-left: 6px; } .more:hover { color: #fff; background: #0094b9; } .more:hover .eye { display: none; } .more .eyew { display: none; } .more:hover .eyew { display: inline; } .reco .recoin { margin-top: 25px; } .reco .recoin:hover img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } .reco .imgdiv { overflow: hidden; width: 100%; height: 144px; } .title h5 { font-weight: bold; line-height: 42px; bottom: 0; left: 0; width: 100%; height: 42px; padding-left: 30px; background: #0094b9; } .reco .recoin:hover h5 { background: #00a7ac; } /*公司介绍完整*/ .complete { margin-bottom: 45px; } .complete h3 { font-size: 26px; margin-top: 33px; margin-bottom: 17px; } .complete .straul { margin-top: 9px; margin-bottom: 9px; } .complete .straul li { font-weight: bold; line-height: 2.37; letter-spacing: .7px; } .complete .straul li span { font-size: 36px; line-height: .5; display: inline-block; margin-right: 6px; margin-bottom: 7px; vertical-align: middle; } .square { margin-top: 15px; } .square .sq { display: inline-block; height: 392px; vertical-align: top; background: #ecf7fb; } .square .sq1 { width: 236px; margin-right: 14px; padding-top: 45px; padding-left: 25px; } .square .sq1 h2 { margin-bottom: 20px; } .square .sq1 li { font-size: 12px; font-weight: bold; line-height: 2.333; } .square .sq2 { width: 360px; margin-right: 14px; } .square .sq2 .imgdiv { padding-top: 18px; padding-bottom: 25px; padding-left: 92px; } .square .sq2 .text-center { padding-right: 26px; padding-left: 26px; } .square .sq2 ul { display: inline-block; width: 100%; border-top: 1px solid #eaedee; } .square .sq2 ul li { font-size: 12px; font-weight: bold; float: left; width: 50%; padding-top: 13px; padding-bottom: 13px; text-align: left; border-bottom: 1px solid #eaedee; } .square .sq2 ul li:nth-child(2n-1) { padding-left: 22px; border-right: 1px solid #eaedee; } .square .sq2 ul li:nth-child(2n) { padding-left: 28px; } .square .sq.sq3 { width: 206px; background: transparent; } .square .sq3 .top, .square .sq3 .bottom { font-weight: bold; height: 187px; background: #ecf7fb; } .square .sq3 .bottom { margin-top: 18px; } .square .sq3 .top { padding-top: 25px; text-align: center; } .square .sq3 .top img { margin-bottom: 7px; } .square .sq3 .fl, .square .sq3 .fr { width: 50%; } .square .sq3 span { font-family: Arial; font-size: 36px; font-weight: bold; } .square .sq3 h5 { font-weight: bold; } .square .sq3 h5 { margin-bottom: 9px; } .square .sq3 .top .fl { padding-top: 23px; padding-left: 14px; } .square .sq3 .bottom { padding-top: 17px; } .square .sq3 .bottom img { margin-bottom: 7px; } .complete .sech3 { margin-top: 36px; } .complete .salep { margin-bottom: 12px; } .complete .promote h3 { margin-top: 32px; } .complete .promote h5 { margin-top: 8px; margin-bottom: 8px; } .complete .promote .mainul { margin-bottom: 7px; } .complete .promote .mainul li { line-height: 2.16; letter-spacing: .7px; } .complete .promote .mainul li ul { padding-left: 18px; } .complete .lastp { font-size: 18px; margin-top: 5px; } /*发展历程*/ .progress { margin-bottom: 40px; } .progress .timeslick { width: 654px; margin: auto; margin-top: 35px; background: url(../images/xian.jpg) no-repeat center; } .progress .timeslick .cir { font-family: Arial; font-size: 16px; width: 111px; height: 111px; margin-right: 70px; padding: 0; cursor: pointer; -moz-transition: all .3s ease-out 0s; -ms-transition: all .3s ease-out 0s; -o-transition: all .3s ease-out 0s; transition: all .3s ease-out 0s; text-align: center; border: 5px solid #e7f2fa; border-radius: 50%; background: #8bcce0 center; } .progress .timeslick .cir:hover, .progress .timeslick .cir.act { border-color: #0094b9; } .progress .timeslick .cir.act img { opacity: 1; } .progress .timeslick .cir span { position: absolute; z-index: 100; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); color: #fff; } .progress .timeslick .cir img { -moz-transition: all .3s ease-out 0s; -ms-transition: all .3s ease-out 0s; -o-transition: all .3s ease-out 0s; transition: all .3s ease-out 0s; opacity: 0; } .progress .timeslick .cir:hover img { opacity: 1; } .progress .slick-prev, .progress .slick-next { width: 44px; height: 107px; -webkit-transition: all .2s ease-out 0s; -moz-transition: all .2s ease-out 0s; -ms-transition: all .2s ease-out 0s; -o-transition: all .2s ease-out 0s; transition: all .2s ease-out 0s; } .progress .slick-prev { left: -95px; border-radius: 5px; background: url(../images/al.png) no-repeat center #e7f2fa; } .progress .slick-next { right: -95px; border-radius: 5px; background: url(../images/ar.png) no-repeat center #e7f2fa; } .progress .slick-prev:hover { background: url(../images/alb.png) no-repeat center #0094b9; } .progress .slick-next:hover { background: url(../images/arb.png) no-repeat center #0094b9; } .progress .con { position: relative; overflow:hidden; margin-top: 50px; } .progress .lcon { position: absolute; top: 0; left: 0; visibility: hidden; opacity: 0; } .progress .lcon.act { visibility: visible; opacity: 1; } .progress .lcon h1 { font-family: Arial; font-size: 44px; } .progress .lcon ul { position: relative; overflow: hidden; margin-top: 35px; padding-left: 120px; } .progress .lcon ul h3 { position: absolute; top: 16px; left: 0; } .progress .lcon ul li { line-height: 2; position: relative; padding-top: 15px; padding-bottom: 15px; -webkit-transition: all .2s ease-out 0s; -moz-transition: all .2s ease-out 0s; -ms-transition: all .2s ease-out 0s; -o-transition: all .2s ease-out 0s; transition: all .2s ease-out 0s; letter-spacing: .7px; } .progress .lcon ul li::after { position: absolute; z-index: 8; top: -28px; left: -48px; width: 5px; height: 100%; content: ''; background: url(../images/after.jpg) repeat-y center; } .progress .lcon ul li::before { position: absolute; z-index: 10; top: 22px; left: -48px; width: 52px; height: 15px; content: ''; background: url(../images/before1.jpg) no-repeat left; } .progress .lcon ul li:hover { font-weight: bold; color: #0094b9; } .progress .lcon ul li:hover::before { left: -53px; background: url(../images/before2.jpg) no-repeat left; } /*荣誉资质*/ .honor { margin-bottom: 65px; } .honorslide { overflow: hidden; height: 452px; margin-top: 28px; padding-top: 35px; background: url(../images/honorbg.jpg) repeat-x 0 368px #ebf7fa; } .honorslide .item { position: relative; z-index: 8; width: 280px; height: 295px; } .honorslide h4, .honorslide h5 { position: absolute; z-index: 8; bottom: 10px; left: 50%; width: 200%; -webkit-transition: all .3s ease-out 0s; -moz-transition: all .3s ease-out 0s; -ms-transition: all .3s ease-out 0s; -o-transition: all .3s ease-out 0s; transition: all .3s ease-out 0s; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); opacity: 0; color: #333; } .honorslide h5 { bottom: -80px; } .honorslide img { position: absolute; z-index: 8; bottom: 0; left: 50%; width: 114px; height: 87px; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .honorslide .slick-list { overflow: visible; } .honorslide .item::after { position: absolute; bottom: -61px; left: 50%; width: 27px; height: 55px; content: ''; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); background: url(../images/c1.jpg) no-repeat center; } .honorslide .slick-current img { bottom: 40px; width: 325px; height: 255px; } .honorslide .slick-current::after { bottom: -53px; background: url(../images/c2.jpg) no-repeat center; } .honorslide .slick-current h4, .honorslide .slick-current h5 { opacity: 1; } .honorslide .slick-prev, .honorslide .slick-next { z-index: 100; top: 49.5%; width: 39px; height: 39px; cursor: pointer; -webkit-transition: all .3s ease-out 0s; -moz-transition: all .3s ease-out 0s; -ms-transition: all .3s ease-out 0s; -o-transition: all .3s ease-out 0s; transition: all .3s ease-out 0s; } .honorslide .slick-prev { left: 14px; background: url(../images/left.png) no-repeat center #8dcfe0; } .honorslide .slick-next { right: 14px; background: url(../images/right.png) no-repeat center #8dcfe0; } .honorslide .slick-prev:hover { background: url(../images/left.png) no-repeat center #0094b9; } .honorslide .slick-next:hover { background: url(../images/right.png) no-repeat center #0094b9; } .honor .listdiv { margin-top: 50px; } .honor .listdiv .fl { position: relative; overflow: hidden; width: 269px; height: 253px; margin-top: 20px; margin-right: 16px; padding-top: 36px; border: 1px solid #e5e5e5; } .honor .listdiv .fl img{max-width:100%; max-height:139px;} .honor .listdiv .modal-box:nth-of-type(3n) .fl { margin-right: 0; } .honor .listdiv .fl h5 { position: absolute; bottom: 20px; left: 50%; width: 100%; padding-right: 5px; padding-left: 5px; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .honor .listdiv .fl .scale { line-height: 42px; position: absolute; bottom: -42px; left: 0; width: 100%; height: 42px; background: #0094b9; } .honor .listdiv .fl:hover .scale { bottom: 0; } .honor .listdiv .fl:nth-child(3n) { margin-right: 0; } .mask { position: fixed; z-index: 5000; top: 0; left: 0; visibility: hidden; width: 10000px; height: 10000px; -webkit-transition: all .3s ease-out 0s; -moz-transition: all .3s ease-out 0s; -ms-transition: all .3s ease-out 0s; -o-transition: all .3s ease-out 0s; transition: all .3s ease-out 0s; opacity: .4; background: #000; } .mask.act { visibility: visible; opacity: .4; } .modal-boxmain.act { visibility: visible; opacity: 1; } .modal-boxmain { position: fixed; z-index: 6000; top: 60px; left: 50%; visibility: hidden; width: auto; height: auto; padding-top: 20px; padding-right: 15px; padding-bottom: 20px; padding-left: 15px; -webkit-transition: all .3s ease-out 0s; -moz-transition: all .3s ease-out 0s; -ms-transition: all .3s ease-out 0s; -o-transition: all .3s ease-out 0s; transition: all .3s ease-out 0s; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); opacity: 0; background: #fff; } .modal-boxmain .imgcon { position: relative; overflow: hidden; width: 1100px; height: 500px; } .modal-boxmain .dragAble { position: absolute; } .modal-boxmain .close { font-size: 30px; position: absolute; z-index: 1000000; top: 25px; right: 25px; opacity: .5; } .modal-boxmain .close:hover { opacity: 1; } .modal-boxmain h5 { margin-top: 10px; } .modal-boxmain .control { position: absolute; top: 50%; right: 25px; width: 30px; margin-top: -50px; padding-right: 5px; padding-left: 5px; background: #f2f2f2; } .modal-boxmain .control div { line-height: 50px; height: 50px; border-bottom: 1px solid #fff; } .honor .page { margin-top: 70px; } /*合作伙伴*/ .part { margin-bottom: 68px; } .part h2 { position: relative; } .part h2 span { font-size: 14px; position: absolute; right: 0; bottom: 10px; margin-top: 20px; } .logolist { margin-bottom: 80px; } .logolist li { position: relative; float: left; width: 33.333%; height: 204px; margin-top: 51px; padding-top: 20px; text-align: center; border-left: 1px dotted #919191; } .logolist li a{color:#333; display:block; width:100%; height:100%;} .logolist li img{ max-width: 190px; max-height: 120px; } .logolist li img, .logolist li h5 { -webkit-transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -ms-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; transition: all 1s ease 0s; } .logolist li:nth-child(3n) { border-right: 1px dotted #919191; } .logolist li h5 { position: absolute; bottom: 18px; width: 100%; } .logolist li:hover img { -webkit-transform: translateY(-15px); -moz-transform: translateY(-15px); -ms-transform: translateY(-15px); -o-transform: translateY(-15px); transform: translateY(-15px); } .logolist li:hover h5 { font-weight: bold; color: #0094b9; -webkit-transform: translateY(-15px); -moz-transform: translateY(-15px); -ms-transform: translateY(-15px); -o-transform: translateY(-15px); transform: translateY(-15px); } .page li { line-height: 40px; display: inline-block; width: 40px; height: 40px; margin-right: 3px; margin-left: 3px; -webkit-transition: all .3s ease-out 0s; -moz-transition: all .3s ease-out 0s; -ms-transition: all .3s ease-out 0s; -o-transition: all .3s ease-out 0s; transition: all .3s ease-out 0s; color: #666; border: 1px solid #e3e3e3; } .page li img { margin-bottom: 2px; } .page li .r { display: none; } .page li.activepage, .page li:hover { color: #fff; border-color: #0094b9; background: #0094b9; } .page li:hover .r { display: inline-block; } .page li:hover .b { display: none; } /*销售网络*/ .sale .fp { font-size: 16px; margin-top: 32px; padding-right: 100px; } .sale .map { position: relative; margin-top: 32px; margin-bottom: 40px; } .sale .map .pointarea { position: absolute; width: 84px; height: 80px; } .sale .map .dot { position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; margin-top: -2px; margin-left: -2px; border-radius: 50%; background: #4ed6eb; } .sale .map .addr { position: absolute; top: 45px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .sale .map .mess { position: absolute; z-index: 100; top: -195px; left: -159px; visibility: hidden; width: 398px; height: 224px; padding-right: 16px; padding-bottom: 15px; padding-left: 16px; -webkit-transition: all .3s ease-out 0s; -moz-transition: all .3s ease-out 0s; -ms-transition: all .3s ease-out 0s; -o-transition: all .3s ease-out 0s; transition: all .3s ease-out 0s; opacity: 0; background: #0094b9; } .sale .map .tianjin .mess{top: -214px; left: -180px;} .sale .map .beijing .mess{top: -214px; left: -180px;} .sale .map .mess::after { position: absolute; bottom: -10px; left: 50%; width: 23px; height: 11px; margin-left: -11.5px; content: ''; background: url(../images/tra.png) no-repeat center; } .sale .map .mess h4 { font-size: 16px; } .sale .map .mess .m { margin-bottom: 12px; padding-bottom: 13px; border-bottom: 1px solid #66bfd5; } .sale .map .mess .m h4 { text-align: left; } .sale .map .mess .m h4:first-child { font-weight: bold; } .sale .map .mess .mainh4 { margin-bottom: 8px; padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid #66bfd5; } .sale .map .mess .subh4, .sale .map .mess p { text-align: left; letter-spacing: .4px; color: #d0eaf1; } .sale .map .mess .subh4 { margin-top: 18px; margin-bottom: 18px; } .mCSB_scrollTools .mCSB_draggerContainer { top: 17px; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 6px; border-radius: 0; background: #027693; } .sale .point { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 10px; width: 100%; height: 10px; height: 100%; margin: auto; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background: transparent; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } .sale .pointarea:hover .point-10::after { position: absolute; z-index: 10; top: 0; right: 0; bottom: 0; left: 0; display: block; content: ''; -webkit-animation: ripple 4500ms ease-out 225ms infinite; -moz-animation: ripple 4500ms ease-out 225ms infinite; -o-animation: ripple 4500ms ease-out 225ms infinite; animation: ripple 4500ms ease-out 225ms infinite; opacity: 0; border: 2px solid #00cdec; border-radius: 50%; } .sale .pointarea:hover .point-40::after { position: absolute; z-index: 10; top: 0; right: 0; bottom: 0; left: 0; display: block; content: ''; -webkit-animation: ripple 4500ms ease-out 900ms infinite; -moz-animation: ripple 4500ms ease-out 900ms infinite; -o-animation: ripple 4500ms ease-out 900ms infinite; animation: ripple 4500ms ease-out 900ms infinite; opacity: 0; border: 2px solid #00cdec; border-radius: 50%; } .sale .pointarea:hover .point-80::after { position: absolute; z-index: 10; top: 0; right: 0; bottom: 0; left: 0; display: block; content: ''; -webkit-animation: ripple 4500ms ease-out 1800ms infinite; -moz-animation: ripple 4500ms ease-out 1800ms infinite; -o-animation: ripple 4500ms ease-out 1800ms infinite; animation: ripple 4500ms ease-out 1800ms infinite; opacity: 0; border: 2px solid #00cdec; border-radius: 50%; } .sale .pointarea:hover .point-shadow::after { z-index: 10; -webkit-box-shadow: inset 0 0 5em rgba(0, 205, 236, .16); -moz-box-shadow: inset 0 0 5em rgba(0, 205, 236, .16); box-shadow: inset 0 0 5em rgba(0, 205, 236, .16); } .sale .pointarea:hover .mess { visibility: visible; opacity: 1; } @keyframes ripple { 0% { -webkit-transform: scale(.1,.1); -moz-transform: scale(.1,.1); -ms-transform: scale(.1,.1); transform: scale(.1,.1); opacity: 0; } 5% { opacity: 1; } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 0; } } @-webkit-keyframes ripple { 0% { -webkit-transform: scale(.1,.1); -moz-transform: scale(.1,.1); -ms-transform: scale(.1,.1); transform: scale(.1,.1); opacity: 0; } 5% { opacity: 1; } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 0; } } .sale .map .pointarea.tianjin { z-index: 20; width: 40px; height: 40px; } .sale .map .pointarea.tianjin .addr, .sale .map .pointarea.beijing .addr { top: 24px; width: 40px; } .sale .map .pointarea.beijing .addr { top: -1px; } .sale .map .pointarea.beijing { width: 40px; height: 40px; } .sale .map .pointarea.none { height: 12px; } /*科研中心*/ .tech span{ font-weight: inherit; } .tech .headh2 { margin-bottom: 34px; } .tech .square { margin-top: 10px; margin-bottom: 36px; } .tech .result { height: 401px; margin-top: 33px; margin-bottom: 113px; } .tech .result .l { width: 471px; } .tech .result .l .imgdiv { overflow: hidden; width: 471px; height: 359px; } .tech .result .r { width: 368px; height: 100%; padding-top: 20px; padding-right: 25px; padding-left: 25px; background: #ebf7fa; } .tech .result .r p{max-height:140px; overflow:hidden;} .tech .result .r h3.fb { padding-bottom: 20px; border-bottom: 1px solid #0094b9; } .tech .result .r .reslide { padding-top: 52px; } .tech .result .r .reslide h3 { margin-bottom: 26px; } .tech .slick-dots { bottom: -70px; } .tech .slick-dots li { width: 12px; height: 12px; } .tech .slick-dots li button { width: 12px; height: 12px; margin: auto; border: 1px solid #0094b9; border-radius: 50%; background: transparent; } .tech .slick-dots li.slick-active button { background: #0094b9; } .tech .slick-dots li button::before { display: none; } .tech .slick-prev, .tech .slick-next { top: -13%; width: 11px; height: 18px; } .tech .slick-prev { right: 75px; background: url(../images/arrow_sl.png) no-repeat center; } .tech .slick-next { right: 19px; background: url(../images/arrow_sr.png) no-repeat center; } /*产品中心*/ .product .shift { width: 692px; margin: auto; margin-top: 46px; /*background: url(../images/blue.jpg) repeat-x 0 36px;*/ } .product .shift ul{ background: url(../images/blue.jpg) repeat-x 0 36px; display: inline-block; } .product .shift .a2 { display: none; } .product .shift li { margin-right: 80px; text-align: center; } .product .shift li#pro_47{ margin-right: 68px; } .product .shift li:last-child { margin-right: 0; } .product .shift .imgdiv { line-height: 66px; width: 72px; height: 72px; -webkit-transition: all .3s ease-out 0s; -moz-transition: all .3s ease-out 0s; -ms-transition: all .3s ease-out 0s; -o-transition: all .3s ease-out 0s; transition: all .3s ease-out 0s; text-align: center; border: 1px solid #0094c5; border-radius: 50%; background: #fff; } .product .shift li.act .imgdiv, .product .shift li:hover .imgdiv { background: #0094c5;; } .product .shift li.act .a2, .product .shift li:hover .a2 { display: inline; } .product .shift li.act .a1, .product .shift li:hover .a1 { display: none; } .product .shift li h5 { margin-top: 23px; color: #333; } .product .repro { height: 270px; margin-top: 50px; } .product .repro .item { padding-top: 30px; padding-right: 0; padding-bottom: 30px; padding-left: 0; background: #ebf7fa; } .product .repro .l, .product .repro .r { overflow: hidden; width: 50%; height: 100%; } .product .repro .l { border-right: 1px solid #33cbe3; } .product .repro .l a{display:block;width: 100%; height: 100%;} .product .repro .l img { height: 227px; width: 300px; } .product .repro .r { padding-top: 31px; padding-right: 30px; padding-left: 30px; } .product .repro .r h4 { margin-bottom: 18px; } .product .repro .r h4 a { display: inline-block; margin-top: 0; color: #333; font-weight: bold; } .product .repro .r a { display: block; margin-top: 23px; } .product .slick-dots { right: 30px; bottom: 47px; } .product .slick-dots { text-align: right; } .product .slick-dots li { width: 10px; height: 10px; } .product .slick-dots li button { width: 10px; height: 10px; padding: 0; border: 1px solid #0094b9; border-radius: 50%; background: transparent; } .product .slick-dots li.slick-active button { background: #0094b9; } .product .slick-dots li button::before { display: none; } .product .logolist li { height: 175px; margin-top: 74px; padding-top: 0; } .product .logolist li h5 { line-height: 32px; bottom: 0; left: 50%; width: 216px; height: 32px; -webkit-transition: all .3s ease-out 0s; -moz-transition: all .3s ease-out 0s; -ms-transition: all .3s ease-out 0s; -o-transition: all .3s ease-out 0s; transition: all .3s ease-out 0s; -webkit-transform: translate(-50%,0); -moz-transform: translate(-50%,0); -ms-transform: translate(-50%,0); -o-transform: translate(-50%,0); transform: translate(-50%,0); color: #333; } .product .logolist li h5 img { margin-left: 4px; opacity: 0; } .product .logolist li:hover h5 { font-weight: normal; color: #fff; background: #0094b9; -webkit-transform: translate(-50%,-15px); -moz-transform: translate(-50%,-15px); -ms-transform: translate(-50%,-15px); -o-transform: translate(-50%,-15px); transform: translate(-50%,-15px); } .product .logolist li:hover h5 img { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .product .page { margin-bottom: 85px; } .z_page{padding:30px 0;}