@CHARSET "utf-8"; /*----- Common css ------*/ .fl { float: left; } .fr { float: right; } .wid1200 { max-width: 1200px; margin: 0 auto; } .di { _display: inline; } .fwn { font-weight: normal; } .dib { *display: inline; _zoom: 1; _display: inline; _font-size: 0px; } #container { max-width: 1200px; margin: 0 auto; } .nav_tel{ display: none; } /*头部样式*/ .wellcome { height: 30px; line-height: 30px; background: #353535; position: relative; z-index: 9999; color: #a7a7a7; } .wellcome a{ color: #a7a7a7; } .wellcome a:hover{ color: #e87518; } .k1 { float: left; font-size: 12px; } .k1 a { font-size: 12px; } .hotSearch { float: right; font-weight: normal; } .hotSearch a { margin-right: 6px; } .head { height: 135px; background: url(../images/jhajg.png) no-repeat center bottom; background-size: cover; position: fixed; top: 0; width: 100%; z-index: 9999; } #header { max-width: 1200px; margin: 0 auto; height: 105px; position: relative; } .logo { float: left; margin-top: 2%; } /*热门搜索*/ /*热门搜索*/ .search { position: relative; float: right; width: 21px; height: 21px; cursor: pointer; z-index: 9999; margin-top: 46px; } .search1 { position: absolute; top: 0; left: 0; width: 21px; height: 21px; background: url(../images/ss.png) no-repeat; } #formsearch { position: absolute; z-index: 20; top: 46px; right: 0; display: none; width: 350px; margin-left: -20px; padding: 20px; border: 1px solid #e0e0e0; background: #fff; } #formsearch input { position: absolute; top: 1px; width: 100%; height: 34px; -webkit-transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out; border: 1px solid #ccc; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); } #formsearch input:focus { border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); } .sinput { position: relative; height: 36px; } #formsearch input#keyword { outline: none; } #formsearch input#s_btn { position: absolute; z-index: 2; top: 1px; right: -1px; width: 39px; height: 36px; border: 0; background: url(../images/hw1_sprite.png) 0 -142px; cursor: pointer; } #formsearch input#s_btn:hover { background-position: -42px -142px; } .search .triangle { position: absolute; top: -15px; right: 0; display: none\9; overflow: hidden; width: 320px; height: 15px; } .search .triangle:before { position: absolute; top: 5px; right: 10px; width: 20px; height: 20px; content: ''; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); border: 1px solid #ddd; background-color: #fff; /* background-image: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#fff)); */ /* background-image: -webkit-linear-gradient(top,#fff,#fff); */ background-image: -moz-linear-gradient(top, #fff, #fff); background-image: -o-linear-gradient(top, #fff, #fff); /* background-image: linear-gradient(180deg,#fff,#fff); */ } /***banner***/ .banner { width: 100% } .banner_wz { position: absolute; left: 5%; top: 40%; z-index: 999; } .banner_wz h1 { color: #b68f6b; } .banner_wz p { color: #b68f6b; font-size: 18px; text-align: right; } .banner_video { position: absolute; left: 0px; bottom: 10%; z-index: 999; width: 33.5%; transition: all 0.7s linear; -webkit-transition: all 0.7s linear; -moz-transition: all 0.7s linear; -ms-transition: all 0.7s linear; -o-transition: all 0.7s linear; } .banner_video_bt { background: #222122; width: 27%; float: left; text-align: center; transition: all 0.7s linear; -webkit-transition: all 0.7s linear; -moz-transition: all 0.7s linear; -ms-transition: all 0.7s linear; -o-transition: all 0.7s linear; } .banner_video_bt p { font-size: 20px; color: #fff; line-height: 60px; margin: 0; } .banner_video_sp { float: left; margin-top: 9%; width: 60%; } .banner_news { position: absolute; right: 0px; bottom: 20px; z-index: 999; width: 24.7%; } .ban_newslist {} .ban_newslist_left { width: 8.5%; background: #fff; float: left; border-bottom: 1px solid #ccc; } .ban_newslist_left p { text-align: center; margin-top: 50px; margin-bottom: 100px; font-weight: bold; font-size: 20px; color: #000; cursor: pointer; -webkit-animation-name: pounding; -webkit-animation-duration: 1.5s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; animation-name: pounding; animation-duration: 1.5s; animation-iteration-count: infinite; animation-timing-function: ease-in-out } /*.ban_newslist_left p:hover { -webkit-animation-play-state: paused; animation-play-state: paused } @-webkit-keyframes pounding { 0% { -webkit-transform:translate(0, 0) } 50% { -webkit-transform:translate(0, 8px) } 100% { -webkit-transform:translate(0, 0) } } @keyframes pounding { 0% { transform:translate(0, 0) } 50% { transform:translate(0, 8px) } 100% { transform:translate(0, 0) } }*/ .ban_newslist_left h1 { font-size: 12px; margin: 0; text-align: center; font-weight: bold; font-family: Arial, Helvetica, sans-serif; transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); } .ban_newslist_right { width: 91.5%; background: rgba(0, 0, 0, 0.8); float: right; padding: 61px 20px; } .ban_newslist_nr {} .ban_newslist_nr img { width: 40%; float: left; } .ban_video_dx { float: left; width: 40%; height: 60%; } .ban_newslist_wz { width: 55%; float: right; } .ban_newslist_wz p { color: #fff; line-height: 22px; overflow: hidden; } .wzhide { height: 42px; margin-top: 20px; line-height: 22px; } .ban_newslist_wz i { width: 40px; height: 1px; background: #fff; display: block; margin-top: 10px; } .ban_newslist_bt {} .ban_newslist_bt h1 { color: #fff; line-height: 22px; font-size: 14px; margin-bottom: 0; margin-top: 0; } .ban_newslist_bt p { color: #fff; } /*.swiper-container { width: 100%; height: 300px; margin: 20px 0; } .swiper-slide { text-align: center; font-size: 18px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } */ .banlist01 { position: relative; right: -91.5%; } .banlist02 { position: relative; right: -91.5%; } .banmore { margin-top: 20px; } .banmore a { display: block; width: 120px; height: 30px; line-height: 30px; color: #b68f6b; text-align: center; border: 1px solid #b68f6b; } .banmore a:hover { background: #b68f6b; color: #fff; } .cb-slideshow li span img{ width:100%; height:auto; } .cb-slideshow, .cb-slideshow:after { position: fixed; width: 100%; height: 100%; top: 113px; left: 0px; z-index: 0; } .cb-slideshow:after { content: ''; background: transparent url(../images/pattern.png) repeat top left; } .cb-slideshow li span { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: none; opacity: 0; z-index: 0; -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 36s linear infinite 0s; -moz-animation: imageAnimation 36s linear infinite 0s; -o-animation: imageAnimation 36s linear infinite 0s; -ms-animation: imageAnimation 36s linear infinite 0s; animation: imageAnimation 36s linear infinite 0s; } .cb-slideshow li div { z-index: 1000; position: absolute; top: 35%; left: 18%; width: 100%; text-align: left; opacity: 0; -webkit-animation: titleAnimation 36s linear infinite 0s; -moz-animation: titleAnimation 36s linear infinite 0s; -o-animation: titleAnimation 36s linear infinite 0s; -ms-animation: titleAnimation 36s linear infinite 0s; animation: titleAnimation 36s linear infinite 0s; } .cb-slideshow li div h3 { font-size: 40px; padding-left: 30px; line-height: 35px; color: #fff; font-family: 微软雅黑; padding-right: 70px; text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.7); font-weight: normal; } .cb-slideshow li:nth-child(1) span { background-image: url(../images/banner.jpg) } .cb-slideshow li:nth-child(2) span { background-image: url(../images/banner1.jpg); -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; } .cb-slideshow li:nth-child(3) span { background-image: url(../images/banner2.jpg); -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; } .cb-slideshow li:nth-child(4) span { background-image: url(../images/banner3.jpg); -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s; } .cb-slideshow li:nth-child(5) span { background-image: url(../images/banner1.jpg); -webkit-animation-delay: 24s; -moz-animation-delay: 24s; -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s; } .cb-slideshow li:nth-child(6) span { background-image: url(../images/banner2.jpg); -webkit-animation-delay: 30s; -moz-animation-delay: 30s; -o-animation-delay: 30s; -ms-animation-delay: 30s; animation-delay: 30s; } .cb-slideshow li:nth-child(2) div { -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; } .cb-slideshow li:nth-child(3) div { -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; } .cb-slideshow li:nth-child(4) div { -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s; } .cb-slideshow li:nth-child(5) div { -webkit-animation-delay: 24s; -moz-animation-delay: 24s; -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s; } .cb-slideshow li:nth-child(6) div { -webkit-animation-delay: 30s; -moz-animation-delay: 30s; -o-animation-delay: 30s; -ms-animation-delay: 30s; animation-delay: 30s; } @-webkit-keyframes imageAnimation { 0% { opacity: 0; -webkit-animation-timing-function: ease-in; } 8% { opacity: 1; -webkit-transform: scale(1.05); -webkit-animation-timing-function: ease-out; } 17% { opacity: 1; -webkit-transform: scale(1.1); } 25% { opacity: 0; -webkit-transform: scale(1.1); } 100% { opacity: 0 } } @-moz-keyframes imageAnimation { 0% { opacity: 0; -moz-animation-timing-function: ease-in; } 8% { opacity: 1; -moz-transform: scale(1.05); -moz-animation-timing-function: ease-out; } 17% { opacity: 1; -moz-transform: scale(1.1); } 25% { opacity: 0; -moz-transform: scale(1.1); } 100% { opacity: 0 } } @-o-keyframes imageAnimation { 0% { opacity: 0; -o-animation-timing-function: ease-in; } 8% { opacity: 1; -o-transform: scale(1.05); -o-animation-timing-function: ease-out; } 17% { opacity: 1; -o-transform: scale(1.1); } 25% { opacity: 0; -o-transform: scale(1.1); } 100% { opacity: 0 } } @-ms-keyframes imageAnimation { 0% { opacity: 0; -ms-animation-timing-function: ease-in; } 8% { opacity: 1; -ms-transform: scale(1.05); -ms-animation-timing-function: ease-out; } 17% { opacity: 1; -ms-transform: scale(1.1); } 25% { opacity: 0; -ms-transform: scale(1.1); } 100% { opacity: 0 } } @keyframes imageAnimation { 0% { opacity: 0; animation-timing-function: ease-in; } 8% { opacity: 1; transform: scale(1.05); animation-timing-function: ease-out; } 17% { opacity: 1; transform: scale(1.1); } 25% { opacity: 0; transform: scale(1.1); } 100% { opacity: 0 } } @-webkit-keyframes titleAnimation { 0% { opacity: 0; -webkit-transform: translateX(200px); } 8% { opacity: 1; -webkit-transform: translateX(0px); } 17% { opacity: 1; -webkit-transform: translateX(0px); } 19% { opacity: 0; -webkit-transform: translateX(-400px); } 25% { opacity: 0 } 100% { opacity: 0 } } @-moz-keyframes titleAnimation { 0% { opacity: 0; -moz-transform: translateX(200px); } 8% { opacity: 1; -moz-transform: translateX(0px); } 17% { opacity: 1; -moz-transform: translateX(0px); } 19% { opacity: 0; -moz-transform: translateX(-400px); } 25% { opacity: 0 } 100% { opacity: 0 } } @-o-keyframes titleAnimation { 0% { opacity: 0; -o-transform: translateX(200px); } 8% { opacity: 1; -o-transform: translateX(0px); } 17% { opacity: 1; -o-transform: translateX(0px); } 19% { opacity: 0; -o-transform: translateX(-400px); } 25% { opacity: 0 } 100% { opacity: 0 } } @-ms-keyframes titleAnimation { 0% { opacity: 0; -ms-transform: translateX(200px); } 8% { opacity: 1; -ms-transform: translateX(0px); } 17% { opacity: 1; -ms-transform: translateX(0px); } 19% { opacity: 0; -ms-transform: translateX(-400px); } 25% { opacity: 0 } 100% { opacity: 0 } } @keyframes titleAnimation { 0% { opacity: 0; transform: translateX(200px); } 8% { opacity: 1; transform: translateX(0px); } 17% { opacity: 1; transform: translateX(0px); } 19% { opacity: 0; transform: translateX(-400px); } 25% { opacity: 0 } 100% { opacity: 0 } } .no-cssanimations .cb-slideshow li span { opacity: 1; } .nh6 { text-align: left; margin-left: 30px; margin-top: 15px; color: #fff; font-size: 22px; margin-right: 30px; font-weight: normal; } .nh6 .pp1 { width: 456px; height: 90px; background: #752250; line-height: 90px; font-size: 50px; letter-spacing: 8px; text-align: center; } .nh6 .pp2 { width: 508px; height: 70px; background: #752250; letter-spacing: 8px; text-align: center; font-size: 36px; margin-top: 8px; line-height: 70px; } /*content*/ .about-box { padding: 40px 0px; /*background: url(../images/bj1.jpg) no-repeat center;*/ } .about-left { width: 41%; float: left; } .reuse { font-size: 30px; color: #aeaeae; padding-top: 30px; background: url(../images/h2bj1.png) no-repeat 0px 15px; } .reuse p { font-size: 30px; font-weight: normal; color: #3f3f3f; } .about-left .about-text { color: #434343; font-size: 16px; line-height: 24px; padding-top: 30px; } .about-left .about-link { display: block; width: 140px; height: 50px; line-height: 50px; text-align: left; text-indent: 15px; background: url(../images/ablink.png) no-repeat 100px 14px #242424; color: #fff; font-size: 12px; margin-top: 80px; margin-bottom: 100px; } .about-left .about-link:hover { background: url(../images/ablink.png) no-repeat 105px 14px #242424; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.3); } .about-left .about-link { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: transform; transition-property: transform; transition: all 0.3s; } .about-left .about-link:before { pointer-events: none; position: absolute; z-index: -1; content: ''; top: 100%; left: 5%; height: 10px; width: 90%; opacity: 0; background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); /* W3C */ -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform, opacity; transition-property: transform, opacity; } .about-left .about-link:hover, .about-left .about-link:focus, .about-left .about-link:active { -webkit-transform: translateY(-5px); transform: translateY(-5px); /* move the element up by 5px */ } .about-left .about-link:hover:before, .about-left .about-link:focus:before, .about-left .about-link:active:before { opacity: 1; -webkit-transform: translateY(5px); transform: translateY(5px); /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */ } .about-right { width: 56.2%; float: right; position: relative; margin-top: 17px; } .about-right img { max-width: 100%; float: right; margin-right: 70px; transition: all 1s; cursor: pointer; } .about-right .morezp { width: 145px; height: 95px; background: #242424; display: block; position: absolute; text-align: center; font-family: "Arial"; font-size: 18px; color: #fff; font-weight: bold; line-height: 65px; bottom: 10%; right: 0; transition: all 1s; } .about-right .morezp p { font-weight: normal; line-height: 0px; } .about-right:hover img { margin-right: 0px; } .about-right:hover .morezp { margin-right: 100px; opacity: 0.8; box-shadow: 0px 8px 8px rgba(0, 0, 0, 1); } .num-list { background: url(../images/aghffghaghf.png) no-repeat center top; background-size:cover; } .num-list li { width: 16.66%; float: left; border-right: 1px solid #232529; border-left: 1px solid #54565d; } .num-list li p { color: #c8c8c8; font-size: 14px; line-height: 28px; text-indent: 28%; } .num-list li div { text-indent: 28%; color: #fff; } .num-list li div .timer { font-size: 48px; } .num-list li div span { font-size: 14px; } .num-list li p:first-child { padding-top: 16%; } .num-list li p:last-child { padding-bottom: 16%; color: #fff; } .roll-wrap { position: relative; width: 100%; height: 269px; } .roll-hide { position: relative; width: 100%; height: 269px; overflow: hidden; } .roll_row .roll__list { width: 9999px; } .roll_row .roll__list li { float: left; display: block; margin-right: 25px; width: 382px; height: 269px; } .control { position: absolute; top: 110px; width: 32px; height: 54px; opacity: 0; transition: all 1s; } .control.pre { left: -50px; background: url(../images/le.png) no-repeat center; } .control.next9 { right: -50px; background: url(../images/ri.png) no-repeat center; } .roll-wrap:hover .control { opacity: 1; } .adv-list { text-align: justify; margin-top: 20px; } .adv-list li { position: relative; display: inline-block; width: 32.5%; vertical-align: top; } .adv-list li a.img { display: block; overflow: hidden; } .adv-list li:hover a.img img { transform: scale(1.2); } .adv-list li a.img img { width: 100%; transition: .5s; } .adv-list:after { display: inline-block; overflow: hidden; width: 100%; height: 0; content: ''; } .adv-list li h3 { width: 270px; height: 60px; /*background: #fff;*/ margin: 0 auto; position: absolute; z-index: 999; /*border: 1px solid #333;*/ text-align: center; font-size: 16px; color: #fff; font-weight: normal; bottom: -27px; left: 0; right: 0; /*box-shadow: 0px 2px 8px rgba(255, 255, 255, 1);*/ } .h3class-2 { /*line-height: 60px;*/ } .h3class-1, .h3class-3,.h3class-2 { line-height: 23px; /*padding-top: 5px;*/ } .advdetail { position: absolute; width: 100%; height: 100%; background: url(../images/adv.png) no-repeat center rgba(0, 0, 0, 0.52); top: 0; left: 0; opacity: 0; transition: all 0.5s; } .adv-list li:hover .advdetail { opacity: 1; } .advdetail a { display: block; position: absolute; width: 100%; height: 100%; } .pro-list-box { height: 800px; background: url(../images/bj2.jpg) no-repeat center fixed; margin-top: 60px; overflow: hidden; position: relative; background-size: cover; } .reuse1 { text-align: center; font-size: 30px; color: #aeadab; font-weight: normal; padding: 30px 0px; } .reuse1 p { color: #fff } .cate-list { text-align: justify; margin-top: 5px; } .cate-list li { position: relative; display: inline-block; width: 48.3%; vertical-align: top; border-top: 3px solid #fff; border-bottom: 3px solid #fff; border-left: 5px solid #fff; border-right: 5px solid #fff; overflow: hidden; } .cate-list:after { display: inline-block; overflow: hidden; width: 100%; height: 0; content: ''; } .cate-list li h3 { position: absolute; bottom: 0; left: 0; width: 100%; line-height: 55px; background: rgba(0, 0, 0, 0.4); color: #fff; text-align: center; font-weight: normal; font-size: 18px; margin-bottom: 40px; transition: all 0.3s; } .cate-list li:hover h3 { margin-bottom: 70px; } .cate-list li p { position: absolute; bottom: 0; left: 0; text-align: center; font-size: 16px; color: #fff; width: 100%; text-align: center; opacity: 0; transition: all 0.4s; } .cate-list li:hover p { margin-bottom: 40px; opacity: 0.7; } .cate-list li img { width: calc(100% + 50px); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(-40px, 0, 0); transform: translate3d(-40px, 0, 0); } .cate-list li:hover img { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .roll-wrap1 { position: relative; width: 100%; height: 200px; } .roll-hide1 { position: relative; width: 100%; height: 200px; overflow: hidden; } .roll_row1 .roll__list { width: 9999px; } .roll_row1 .roll__list li { float: left; display: block; margin-right: 13px; width: 290px; height: 200px; position: relative; overflow: hidden; } .roll_row1 .roll__list li a.img { display: block; overflow: hidden; } .roll_row1 .roll__list li a.img img { transition: .5s; } .roll_row1 .roll__list li:hover a.img img { transform: scale(1.1); } .control1 { position: absolute; z-index: 9999; top: 29%; display: block; overflow: hidden; width: 35px; height: 60px; cursor: pointer; opacity: 0; transition: all 0.3s; } .control1.pre { left: -50px; background: url(../images/l.png) no-repeat center; } .control1.next9 { right: -50px; background: url(../images/r.png) no-repeat center; } .roll-wrap1:hover .control1 { opacity: 0.5; } .roll_row1 .roll__list li h3 { position: absolute; width: 100%; height: 100%; background: url(../images/hjgajghjgh.png) no-repeat center rgba(0, 0, 0, 0.4); top: 0; left: 0; text-align: center; transition: all 0.5s; margin-top: -200px; } .roll_row1 .roll__list li h3 a { color: #fff; font-size: 15px; font-weight: normal; display: block; line-height: 172px; } .roll_row1 .roll__list li h4{ position: absolute; width: 100%; bottom: 0; left: 0;text-align: center; } .roll_row1 .roll__list li h4 a { color: #fff; font-size: 15px; font-weight: normal; display: block; line-height: 30px; } .roll_row1 .roll__list li:hover h3 { margin-top: -28px; } .case-box { position: relative; z-index: 999; overflow: hidden; margin-bottom: 30px; } .reuse2 { background: none; padding-top: 50px; padding-bottom: 30px; } .case-left { width: 23.75%; float: left; position: relative; } .case-right { width: 74.17%; float: right; } .case1 { /*border: 1px solid #d2d2d2;*/ } .case1 .img { width: 31.7%; float: left; position: relative; } .case1 .img img { max-width: 100%; } .case1 .img a { position: absolute; width: 100%; height: 100%; background: url(../images/jia.png) no-repeat center 70%; text-align: center; font-size: 24px; color: #fff; line-height: 180px; } .case1 h3 { width: 68.3%; float: left; border-left: none; } .case1 h3 a { font-size: 20px; color: #3f3f3f; font-weight: normal; line-height: 45px; padding-left: 10%; display: block; padding-top: 5%; } .case1 h3 p { font-weight: normal; line-height: 30px; font-size: 14px; color: #727272; padding-left: 10%; } .case-sort { text-align: justify; } .case-sort .case2 { position: relative; display: inline-block; width: 31.8%; vertical-align: top; margin-top: 10px; overflow: hidden; } .case-sort .case2:last-child a.list_item{ display: none; } .case-sort .case2:hover img { transform: scale(1.2); opacity: 1; } .case-sort:after { display: inline-block; overflow: hidden; width: 100%; height: 0; content: ''; } .case2 img { max-width: 100%; transition: .5s; } .case2 a { position: absolute; width: 100%; height: 100%; background: url(../images/jia.png) no-repeat center 70%; text-align: center; font-size: 24px; color: #fff; line-height: 180px; top: 0; left: 0; } .indexShow { width: 100%; position: relative; } .viewTop { display: none; } .indexShowLeft { display: none; } .indexShowRight { width: 100%; position: relative; } .indexShowRightBg { width: 100%; } .indexShowRightBg img { display: block; width: 100%; } .indexShowRightContent { position: absolute; left: 50%; bottom: 20%; z-index: 50; height: 50px; margin: 0 0 0 -105px; } .indexShowRightContent li { float: left; width: 50px; margin: 0 10px; } .indexShowRightContent li img { display: block; width: 100%; } .indexShowRightWords { display: none; } @media (min-width: 768px) { .indexShowRightContent { height: 100px; margin: 0 0 0 -210px; } .indexShowRightContent li { width: 100px; margin: 0 20px; } } @media (max-width: 768px) { .head{ position: relative; } } @media (min-width: 1200px) { .indexShow { height: 350px; } .viewTop { display: block; width: 436px; position: absolute; left: 50%; top: 50%; z-index: 2000; margin: -65px 0 0 -200px; -webkit-transition: all 1s; -o-transition: all 1s; -moz-transition: all 1s; transition: all 1s; } .indexShowLeft { display: block; width: 50%; height: 350px; position: absolute; left: 0; top: 0; overflow: hidden; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; } .indexShowLeftBg { height: 150%; position: absolute; left: 0; top: 0; } .indexShowLeftBg img { display: block; height: 100%; } .indexShowLeftContent { height: 100px; position: absolute; top: 50%; left: 30%; z-index: 50; } .indexShowLeftContent li { display: table; width: 100px; height: 100px; background: #232020; text-align: center; border-radius: 100%; float: left; margin: -50px 20px 0 20px; color: #fff; font-size: 16px; line-height: 24px; opacity: 0; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; -webkit-transform: translate(-100%, 0); -moz-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); -o-transform: translate(-100%, 0); transform: translate(-100%, 0); } .indexShowLeftContent li span { display: table-cell; vertical-align: middle; } .indexShowLeftContent li p { display: table-cell; vertical-align: middle; } .indexShowRight { width: 50%; height: 350px; position: absolute; top: 0; right: 0; z-index: 10; overflow: hidden; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; } .indexShowRightBg { width: auto; height: 150%; position: absolute; right: 0; top: 0; } .indexShowRightBg img { width: auto; height: 100%; } .indexShowRightContent { bottom: 35%; margin: 0 0 0 -145px; } .indexShowRightContent li { margin: 0 50px; opacity: 0; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; -ms-transform: translate(100%, 0); -webkit-transform: translate(100%, 0); -moz-transform: translate(100%, 0); -o-transform: translate(100%, 0); transform: translate(100%, 0); } .indexShowRightWords { display: block; position: absolute; width: 100%; text-align: center; right: 0; bottom: 10%; z-index: 50; font-size: 14px; color: #fff; line-height: 22px; box-sizing: border-box; padding-left: 15%; opacity: 0; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; -webkit-transform: translate(0, 100%); -moz-transform: translate(0, 100%); -o-transform: translate(0, 100%); -ms-transform: translate(0, 100%); transform: translate(0, 100%); } .indexShowLeft:hover { width: 70%; z-index: 20; } .indexShowLeft:hover .indexShowLeftContent li { opacity: 1; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } .indexShowRight:hover { width: 70%; z-index: 20; } .indexShowRight:hover .indexShowRightContent li { opacity: 1; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } .indexShowRight:hover .indexShowRightWords { opacity: 1; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } } @media (min-width: 1440px) { .indexShow, .indexShowRight, .indexShowLeft { height: 630px; } .viewTop { width: 520px; margin: -77px 0 0 -240px; } .indexShowLeftContent { height: 123px; } .indexShowLeftContent li { width: 123px; height: 123px; margin: -61px 20px 0 20px; } .indexShowRightContent { bottom: 50%; margin: 0px 0 0 -210px; } .indexShowRightContent li { width: 99px; height: 99px; } .indexShowRightWords { font-size: 16px; line-height: 28px; bottom: 20%; } } @media (min-width: 1920px) { .indexShow, .indexShowRight, .indexShowLeft { height: 640px; } .viewTop { width: 749px; margin: -103px 0 0 -350px; } .indexShowLeftContent { height: 123px; } .indexShowLeftContent li { width: 123px; height: 123px; margin: -61px 20px 0 20px; } .indexShowRightContent { bottom: 42%; margin: 0px 0 0 -210px; } .indexShowRightContent li { width: 99px; height: 99px; } .indexShowRightWords { font-size: 17px; line-height: 30px; bottom: 12%; } } .w100 { display: block; width: 100%; } .join-box { padding: 50px 0px; } .reuse3 { font-size: 35px; text-align: center; color: #aeaeae; } .reuse3 p { font-weight: normal; color: #222222; font-size: 30px; } .join-list { text-align: justify; } .join-list li { position: relative; display: inline-block; width: 24%; vertical-align: top; margin-top: 35px; } .join-list li img { width: 100%; } .join-list li .img2 { display: none; } .hoin-list:after { display: inline-block; overflow: hidden; width: 100%; height: 0; content: ''; } .join-list li h2 { position: absolute; bottom: 120px; font-size: 24px; color: #fff; width: 100%; text-align: center; font-weight: normal; transition: all 0.8s; } .join-list li h2 p { display: none; font-family: "Arial"; transition: all 0.8s; padding: 15px 0; opacity: 0;text-transform: uppercase; } .join-list li a { display: block; font-size: 14px; color: #fff; text-align: center; bottom: 55px; position: absolute; width: 100%; padding-bottom: 40px; background: url(../images/abj.png) no-repeat bottom; transition: all 0.8s; } .join-list li:hover h2 { margin-bottom: 150px; } .join-list li:hover h2 p { opacity: 0.9; display: block; } .join-list li:hover h2 p{border-bottom:1px solid #ffffff;} .join-list li:hover a { padding-bottom: 100px; background: url(../images/abj2.png) no-repeat center 40px; ; } .news-box { min-height: 600px; background: url(../images/bj3.jpg) no-repeat center; background-size: cover; } .news-center { max-width: 1200px; margin: 0 auto; } .reuse4 { font-size: 30px; color: rgba(255,255,255,.51); text-align: center; padding-top: 70px; padding-bottom: 30px; } .reuse4 p { font-size: 30px; color: #fff; font-weight: normal; } .tabbtn { margin-bottom: 50px; text-align: center; } .tabbtn li { width: 144px; height: 40px; display: inline-block; font-size: 18px; line-height: 40px; text-align: center; cursor: pointer; margin: 0px 24px; } .tabbtn li a { display: block; color: #2c1f16; border: 2px solid #2c1f16; } .tabbtn li.current a { background: #2c1f16; color: #fff; border: 2px solid #2c1f16; } .tabbtn1 { text-align: center; } .tabbtn1 li { width: 18px; height: 18px; border-radius: 50%; border: 3px solid #212121; display: inline-block; margin: 7px; margin-top: 50px; background: #212121; cursor: pointer; } .tabbtn1 li.current { border: 3px solid #fff; background: none; } .sublist1 li { width: 48%; background: #fff; padding: 15px 10px; } .sublist1 li:first-child { float: left; } .sublist1 li:last-child { float: right; } .sublist1 li .img1 { width: 34.9%; float: left; } .sublist1 li h3 { width: 62%; float: right; } .sublist1 li h3 a { font-size: 18px; font-weight: normal; color: #282828; line-height: 40px; } .sublist1 li:hover h3 a { text-decoration: underline; } .sublist1 li h3 p { font-size: 14px; color: #727272; font-weight: normal; line-height: 25px; } .sublist1 li h3 span { font-size: 14px; font-weight: normal; color: #727272; display: block; padding-top: 2%; } /*友情链接*/ .f_link { max-width: 1200px; margin: 0 auto; line-height: 45px; font-size: 14px; color: #3f3f3f; } #gotop{ position: fixed; width:38px; height:39px; right:15%; z-index: 9999; display: block; bottom:30.2%; } /*页面底部*/ .foot { background: url(../images/akjgkghjkhj.png) no-repeat center top; background-size: cover; padding: 30px 0px; } #footer { position: relative; max-width: 1200px; margin: 0 auto; } .foot-left { width: 16.6%; float: left; background: url(../images/tel.png)no-repeat left 185px; ; } .foot-left img { padding-bottom: 40px; } .foot-left p { font-size: 14px; color: #fff; line-height: 25px; text-indent: 45px; font-weight: bold; } .foot-right { width: 85%; margin: 0 auto; } .nav1 { padding-top: 40px; padding-bottom: 20px; border-bottom: 1px solid #4c4c4c; } .nav1 li { float: left; width: 12.5%; text-align: center; background: url(../images/nav1bj.png) no-repeat right; } .nav1 li a { display: block; color: #fff; font-size: 16px; } .nav1 li a:hover { text-decoration: underline; } .nav1 li:last-child { background: none; } .nav_tel{ position: absolute; right: -200px; color: #fff; font-size: 16px; line-height: 105px; } .foot-lx {} .foot-lx .lxx { float: left; font-size: 14px; color: #dbdbdb; line-height: 30px; padding-top: 10px; } .foot-lx .ewm { float: right; margin-top: 30px; } .copyright { text-align: left; color: #fff; padding-top: 15px; line-height: 25px; } .copyright a { color: #fff; } .zhuyin { color: #fff; } .zhuyin a { color: #fff; } /*左侧工具条*/ #toolbar { position: fixed; z-index: 9999; right: 33px; bottom: 30%; } #toolbar li { margin-bottom: 3px; font-size: 0; width: 77px; height: 65px; right: 0; position: relative; } #toolbar li a { display: block; position: absolute; z-index: 9; right: 0; top: 0; width: 77px; height: 65px; overflow: hidden; background: #111; -webkit-transition: all .5s ease; transition: all .5s ease; white-space: nowrap; font-size: 0; } #toolbar li .iconfont { display: inline-block; vertical-align: middle; width: 77px; height: 65px; background-color: #d9d9d9; vertical-align: middle; text-align: center; line-height: 65px; color: #2b2b2b; font-size: 26px; } #toolbar li .wz { display: inline-block; line-height: 65px; color: #fff; vertical-align: middle; padding-left: 10px; font-size: 14px; } #toolbar li.ewm .ewm-box { position: absolute; z-index: 1; padding: 5px; background: #111; width: 110px; right: 120%; bottom: 0; opacity: 0; visibility: hidden; -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transition: all .7s; transition: all .7s; } #toolbar li.ewm .ewm-box p { margin-bottom: 0; } #toolbar li.ewm .ewm-box img { max-width: 100%; } #toolbar li.ewm .ewm-box:after { content: ''; position: absolute; right: -5px; bottom: 20px; width: 0; height: 0; line-height: 0; font-size: 0; overflow: hidden; border-width: 5px; cursor: pointer; border-style: dashed dashed dashed solid; border-color: transparent transparent transparent #ab001a; border-right: none; } #toolbar li.ewm:hover .icon { background-position: -57px -180px; } #toolbar li.ewm:hover .ewm-box { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } #toolbar li.backtop { cursor: pointer; } #toolbar li.backtop .iconfont { color: #fff; background-color: #111; } #toolbar li:nth-child(2):hover a { width: 200px; } #toolbar li:hover .iconfont { background-color: #111; color: #fff; } @media (max-width: 990px) { #toolbar { display: none; } } /*------------内页-------------------*/ .prodescription { border: 1px solid #e5e5e5; background: #f9f9f9; line-height: 24px; padding: 10px; margin-bottom: 15px; text-indent: 20px; display: none; } .n_banner { text-align: center; } .n_banner img { max-width: 100%; height: auto; } .m55 { max-width: 1200px; margin: 0 auto; } .left { width: 243px; float: left; padding-top: 36px; } .right { width: 920px; float: right; padding-top: 50px; } .left h3 { font-size: 22px; font-weight: normal; line-height: 56px; color: #fff; text-align: center; background: url(../images/nei.png) no-repeat left; ; background-size: cover; margin-top: 15px; } .left .content { border: 1px solid #eee; border-top: none; } .n_contact .content { padding: 10px; line-height: 30px; } .right .content { padding: 10px; } .sitemp { border-left: 10px solid #752250; background: #e5e5e5; margin-bottom: 14px; height: 50px; line-height: 50px; } .sitemp .site { font-size: 14px; color: #000; margin-right: 20px; float: right; } .site a { font-size: 14px; color: #000; } .sitemp h2 { font-size: 20px; color: #000; float: left; text-indent: 30px; line-height: 50px; } @media (max-width: 1200px){ .sw-pro-box { padding-left: 15px; padding-right: 15px; min-height: auto !important; } } #nav-fiexd a.navbar-brand img { width: auto; max-height: 100%; } .sw-cp-list li { width: 100%; padding: 0px 15px; text-align: center; } .sw-cp-list li h3 { line-height: 30px; text-align: center; } .sw-cp-list li h3 a { color: #fff; } .sw-cp-list li img { max-width: 100%; } .mobile-join img { width: 100%; margin-top: 15px; } .saiwen-banner img.img2{ display: none; } @media (max-width: 768px) { .navbar-header{ background:#1b1b1b; } .case-sort li:last-child{ display:none; } .navbar-default .navbar-collapse{ background:#1b1b1b; } .navbar-default .navbar-nav>li>a{ color:#d6d6d6 !important; } .foot-lx .lxx p span{ display:block; } .saiwen-banner img.img1{ display: none; } .saiwen-banner img.img2{ display: block; } }