/* 清除内外边距 */ @charset "utf-8"; body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ pre, /* text formatting elements 文本格式元素 */ fieldset, lengend, button, input, textarea, /* form elements 表单元素 */ th, td { /* table elements 表格元素 */ margin: 0; padding: 0; } input,textarea {border: 2 none; box-shadow: none; outline: none;} /* 设置默认字体 */ body,button, input, select, textarea {font: 14px/22px "Microsoft YaHei","微软雅黑","Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB",Arial,sans-serif; color: #666;} * h1,* h2,* h3,* h4,* h5,* h6{margin: 0px;} /*覆盖bootstrape对标题加的默认外边距*/ address, cite, dfn, em, i, var {font-style: normal;} /* 斜体扶正 */ /* 重置列表元素 */ ul, ol ,li{list-style: none;} /* 重置文本格式元素 */ a {text-decoration: none; color: #666; word-wrap:break-word;}/*英文换行*/ a:hover {text-decoration: none; color:#910800;} /* 重置表单元素 */ legend {color: #000;} /* for ie6 */ fieldset, img {border: none;} /* img 搭车:让链接里的 img 无边框 */ /* 注:optgroup 无法扶正 */ button, input, select, textarea { font-size: 100%; /* 使表单元素在 ie 下能继承字体大小 */ } /* 重置表格元素 */ table { border-collapse: collapse; border-spacing: 0; } /* 让非ie浏览器默认也显示垂直滚动条,防止因滚动条引起的闪烁 */ html {overflow-y: scroll;} /*设置浮动*/ .fl {float: left;} .fr {float: right;} .pr{position: relative;} .pa{position: absolute;} /*字体大小*/ .clear{clear: both;height: 0;} .blk-main .clearlist{ clear:both;height:0;padding:0;margin:0;border:0;width:100% ;float:none;} /*表单弹框*/ .nsw-modal { width: 100%; height: 100%; background: rgba(225, 225, 225, 0.5); position: fixed; top: 0; left: 0; z-index: 99999; } .modal-dialog { position: fixed; color: #000000; top: 150px; width: 400px; border-radius: 3px; min-height: 155px; overflow: hidden; z-index: 99998; margin-left: -200px; left: 50%; } .modal-dialog .css-icon { background-image: url("../images/modal-icons.png"); } .modal-dialog .modal-head { height: 30px; line-height: 30px; padding: 0px 20px; background: #F6EFEF; font-size: 14px; } .modal-dialog .modal-head .modal-logo { width: 15px; height: 15px; background-position: 1px 0px; margin: 8px 5px 0 0; float: left; } .modal-dialog .modal-head .close { float: right; width: 15px; height: 15px; background-position: -14px 0px; margin-top: 8px; } .modal-dialog .modal-body { width: 100%; min-height: 125px; background: #ffffff; } .modal-dialog .modal-body .modal-body-left { width: 140px; float: left; } .modal-dialog .modal-body .modal-body-left .icon { width: 64px; height: 64px; margin: 30px 0 0 48px; } .modal-dialog .modal-body .modal-body-left .success-message { background-position: 0px -14px; } .modal-dialog .modal-body .modal-body-left .warming-message { background-position: 0px -78px; } .modal-dialog .modal-body .modal-body-right { width: 260px; float: right; padding-top: 20px; } .modal-dialog .modal-body .modal-body-right .close-btn { color: #000; text-align: center; width: 90px; display: inline-block; height: 24px; line-height: 24px; background: #818079; } .modal-dialog .modal-body .modal-body-right p { line-height: 30px;} /**/ body{min-width: 1200px;max-width: 1920px;margin: 0 auto;overflow-x: hidden; width: 100%;} .content{ width:1200px; margin:0 auto;} /**/ .guide{height: 518px;background: #fff;box-shadow: 0 3px 10px 3px rgba(0,0,0,0.05);padding: 60px 60px 0 80px;box-sizing: border-box;margin-top: -135px;margin-bottom: 110px;position: relative;z-index: 1;} .gui_l{width: 380px;} .gui_tit{height: 120px;line-height: 44px;position: relative;font-size: 42px;color: #333;margin-bottom: 25px;} .gui_tit i{display: block;font-size: 18px;font-weight: normal;} .gui_tit:before,.ban01_l p:before,.green_m dl dd h5:before,.news03 h5:before{content: "";width: 150px;height: 1px;background: rgba(40,176,164,0.2);position: absolute;bottom: 1px;left: 0;} .gui_tit:after,.ban01_l p:after,.green_m dl dd h5:after,.news03 h5:after{content: "";width: 45px;height: 3px;background: #28b0a4;position: absolute;bottom: 0;left: 0;-webkit-transition:all .5s;transition:all .5s;} .gui_tit:hover:after,.green_m dl dd h5:hover:after,.news03 h5:hover:after{width: 60px;} .gui_l p,.green_m dl dd p{font-size: 16px;color: #666;line-height: 30px;position: relative;padding: 0 0 20px;} .gui_l p:before,.green_m dl dd p:before{content: "";width: 6px;height: 6px;background: #28b0a4;position: absolute;top: 12px;left: 0;border-radius: 50%;} .gui_l p span,.green_desc span{display: block;font-size: 20px;color: #333;padding-left: 20px;} .gui_l p span,.green_desc em{display: block;font-size: 16px;color: #666;padding-left: 20px;} .gui_r{width: 568px;padding: 10px 0 0;} .gui_r ul li{height: 88px;line-height: 88px;border-bottom: #fff 1px solid;background: #eee;font-size: 16px;color: #666; font-family:Arial, Helvetica, sans-serif;} .gui_r ul li em{display: block;float: left;width: 194px;text-align: center;border-right: #fff 1px solid;} .gui_r ul li span{display: block;float: left;width: 372px;text-align: center;} /*广告条*/ .ban01{height: 850px;padding-top: 0px;background: url(../images/d_ban01.jpg) no-repeat center 0;overflow: hidden;} .ban01_l{width: 400px;} .ban01_l p{font-size: 18px;color: #fff;height: 110px;line-height: 44px;position: relative;} .ban01_l p b{display: block;font-size: 42px;} .ban01_l i{display: block;font-size: 15px;color: rgba(255,255,255,0.6);height: 70px;line-height: 70px;overflow: hidden;} .ban01_l em{display: block;} .ban01_btn{display: block;width: 125px;text-align: center;height: 35px;line-height: 35px;background: #28b0a4;font-size: 14px;color: #fff;} .ban01_btn:hover{animation:shake .9s linear;-webkit-animation:shake .9s linear;color: #fff;} .ban01_r{color: #fff;width: 490px;padding: 40px 0 0;} .ban01_r ul li{width: 160px;float: left;text-align: center;position: relative;} .ban01_r ul li b{width: 98px;height: 98px;display: block;line-height: 0;margin: 0 auto;} .ban01_r ul li b img{width: 98px;height: 98px;} .ban01_r ul li em{display: block;width: 98px;height: 98px;line-height: 98px;overflow: hidden;position: absolute;top: 0;left: calc(50% - 49px);font-size: 22px; font-family:"Times New Roman", Times, serif;} .ban01_r ul li span{display: block;font-size: 15px;height: 50px;line-height: 50px;overflow: hidden;} .ban01_r ul li b{ -webkit-transition: -webkit-transform 0.5s ease-out; -moz-transition: -moz-transform 0.5s ease-out; -o-transition: -o-transform 0.5s ease-out; -ms-transition: -ms-transform 0.5s ease-out;} .ban01_r ul li:hover b { -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -o-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); transform: rotateZ(360deg); } /*源头厂家直供*/ .four{padding: 20px 0 120px;} .four_t{height: 118px;font-weight: normal;} .four_t p{float: left;line-height: 110px;font-size: 42px;color: #333;} .four_t p:hover{color: #28b0a4;} .four_t p i{display: block;font-size: 18px;color: #333;} .four_t em{display: block;float: right;padding: 45px 0 0;} .four dl{width: 300px;height: 578px;position: relative;float: left;} .four dl dt{width: 300px;height: 578px;line-height: 0;} .four dl dt img{width: 300px;height: 578px;} .four dl dd{width: 300px;height: 448px;padding-top: 130px;position: absolute;top: 0;left: 0;text-align: center;z-index: 1;} .four dl dd:before{content: "";width: 100%;height: 578px;background: rgba(0,0,0,0.6);position: absolute;top: 0;left: 0;-webkit-transition:all .5s;transition:all .5s;z-index: -1;} .four dl dd:after{content: "";width: 100%;height: 0;background: rgba(0,72,130,0.8);position: absolute;top: 0;left: 0;-webkit-transition:all .5s;transition:all .5s;z-index: -1;} .four dl dd em{width: 116px;height: 85px;display: block;line-height: 0;margin: 0 auto;} .four dl dd em img{width: 116px;height: 85px;} .four dl dd h5{font-size: 22px;color: #fff;font-weight: normal;line-height: 30px;height: 75px;position: relative;padding: 50px 0 0;} .four dl dd h5:before{content: "";width: 20px;height: 1px;background: #fff;position: absolute;bottom: 0;left: calc(50% - 10px);} .four dl dd h5 i{display: block;} .four dl dd p{width: 222px; margin: 0 auto;padding: 15px 0 0; font-size: 15px;color: #fff;line-height: 30px;display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:3; overflow: hidden; text-overflow: ellipsis; } .four dl dd:hover:before,.four dl.cur dd:before{height: 0;} .four dl dd:hover:after,.four dl.cur dd:after{height: 578px;} /*个性化解决方案*/ .five{height: 653px;padding-top: 126px;background: url(../images/d_fivebg.jpg) no-repeat center 0;overflow: hidden;} .five_m{width: 625px;} .five_m .gui_tit{height: 145px;font-weight: normal;} .five_m p{width: 560px;font-size: 15px;color: #666;line-height: 26px;padding: 10px 0 0;display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:3; overflow: hidden; text-overflow: ellipsis; } .five_m ul{padding: 55px 0 0;} .five_m ul li{font-size: 22px;color: #333;float: left;width:300px;height: 130px;line-height: 72px;overflow: hidden;} .five_m ul li em{width: 72px;height: 72px;display: block;float: left;line-height: 0;background: url(../images/d_fivek.png) no-repeat;margin-right: 10px;} .five_m ul li em img{width: 72px;height: 72px;transition: all 0.3s ease-in-out 0s;} .five_m ul li:hover em img{ transform: rotateY(180deg);} /*绿色科技*/ .green{padding: 90px 0 100px;} .green_t{height: 130px;font-weight: normal;} .green_t h5{float: left;line-height: 44px;font-size: 36px;color: #333;font-weight: normal;} .green_t h5:hover{color: #28b0a4;} .green_t h5 i{display: block;font-size: 18px;color: #333;} .green_t ul{float: right;width: 320px;padding: 15px 0 0;position: relative;} .green_t ul:before{content: "";width: 1px;height: 66px;background: #e5e5e5;position: absolute;top: 20px;left: 50%;} .green_t ul li{font-size: 20px;color: #333;float: left;width: 160px;text-align: center;line-height: 26px;cursor: pointer;} .green_t ul li em{display: block;line-height: 0;width: 50px;height: 44px;overflow: hidden;margin: 0 auto 5px;} .green_t ul li em img{width: 50px;height: 88px;-webkit-transition:all .5s;transition:all .5s;} .green_t ul li:hover,.green_t ul li.on{color: #28b0a4;font-weight: bold;} .green_t ul li:hover em img,.green_t ul li.on em img{margin-top: -44px;} .green_m dl{background: #f4f4f4;height: 766px;width: 1200px;} .green_m dl dt{width: 500px;height: 766px;float: left;line-height: 0;overflow: hidden;} .green_m dl dt img{width: 600px;height: 766px;} .green_m dl dt img{ -webkit-transition: 1s; -moz-transition: 1s; transition: 1s;} .green_m dl dt img:hover {-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1);} .green_m dl dd{width: 575px;float: left;padding: 30px 0 0 60px;} .green_m dl dd h5{font-size: 30px;color: #333;height: 76px;line-height: 76px;position: relative;overflow: hidden;} .green_desc{padding: 20px 0 0;height: 460px;} .green_desc span{padding-bottom: 5px;} .green_m ul{width: 473px;height: 172px;background: #fff;border: #e5e5e5 1px solid;border-bottom:none} .green_m ul li{height: 42px;line-height: 42px;border-bottom: #e5e5e5 1px solid;font-size: 16px;color: #666;} .green_m ul li em{display: block;float: left;width: 176px;text-align: center;border-right: #e5e5e5 1px solid;} .green_m ul li span{display: block;float: left;width: 294px;text-align: center;} /**/ .wei{height: 716px;padding-top: 134px;background: url(../images/d_weibg.jpg) no-repeat center 0;overflow: hidden;} .wei dl dt{width: 615px;height: 460px;float: left;line-height: 0;overflow: hidden;-webkit-transition:transform .3s;transition:transform .3s;} .wei dl dt img{width: 615px;height: 460px;} .wei dl dd{width: 470px;float: right;padding: 0 20px 0 0;} .wei dl dd h5{font-size: 42px;color: #fff;font-weight: normal;line-height: 50px;} .wei dl dd h5 i{display: block;} .wei dl dd h5:hover{font-weight: bold;} .wei_desc{font-size: 15px;color: #fff;line-height: 28px;padding: 30px 0 0;} .wei dl dd span{display: block;padding: 40px 0 0;} .wei dl dt:hover{-webkit-transform:translate(0,-5px);transform:translate(0,-5px);} /**/ .news03{padding: 60px 0 100px;} .news03 h5{height: 100px;line-height: 90px;position: relative;font-weight: normal;} .news03 h5 a{font-size: 42px;color: #333;} .news03 h5 a:hover,.news_list a:hover{color: #28b0a4;} .news03_m{width: 1138px;height: 230px;border: #d9d9d9 1px dashed;padding: 20px 30px 0;margin-top: 45px;} .news_list{width: 580px;} .news_list a{display: block;width: 500px;height: 110px;color: #333;} .news03 dl dt{font-size: 15px;height: 30px;line-height: 30px;position: relative;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;padding-left: 15px;} .news03 dl dt:before{content: "";width: 5px;height: 5px;background: #28b0a4;position: absolute;top: calc(50% - 2px);left: 0;border-radius: 50%;} .news03 dl dd{font-size: 14px;color: #999;line-height: 26px;display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; overflow: hidden; text-overflow: ellipsis; padding:5px 0 0 15px;} /**/ @-webkit-keyframes shake{ from,to{-webkit-transform:translate3d(0, 0, 0);} 20%,60%{-webkit-transform:translate3d(-10px, 0, 0);} 40%,80%{-webkit-transform:translate3d(10px, 0, 0);} } @keyframes shake { from,to{transform:translate3d(0, 0, 0);} 20%,60%{transform:translate3d(-10px, 0, 0);} 40%,80%{transform:translate3d(10px, 0, 0);} } /*图标抖动*/ @-webkit-keyframes hvr-buzz-out { 10% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 20% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 30% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 40% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 50% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 60% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 70% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 80% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 90% { -webkit-transform: translateX(1px) rotate(0); transform: translateX(1px) rotate(0); } 100% { -webkit-transform: translateX(-1px) rotate(0); transform: translateX(-1px) rotate(0); } } @keyframes hvr-buzz-out { 10% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 20% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 30% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 40% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 50% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 60% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 70% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 80% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 90% { -webkit-transform: translateX(1px) rotate(0); transform: translateX(1px) rotate(0); } 100% { -webkit-transform: translateX(-1px) rotate(0); transform: translateX(-1px) rotate(0); } }