.bode{ width:100%; } .banner{ width:100%; position: relative; } .banner .item{ position: relative; } .banner .owl-carousel .owl-item .img{ overflow: hidden; } .banner .owl-carousel .owl-item .img img{ display: block; width:100%; } .banner .owl-carousel video{ width:100%; display:block; object-fit: fill} /* 分页器 */ .owl-theme .owl-controls { bottom:15px; } .owl-theme .owl-dots .owl-dot span { width: 10px; height: 10px; border-radius: 100%; margin: 0 10px; position: relative; background: #000; opacity: .4; } @media only screen and (max-width:480px){ .owl-theme .owl-controls { bottom:5px; } } /* .owl-theme .owl-dots .owl-dot span:after { content: ''; display: block; width: 4px; height: 4px; border-radius: 100%; background: #fff; content: ''; position: absolute; top: 50%; margin-top: -2px; left: 50%; margin-left: -2px; } */ .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background:#09ef3b; opacity: 1; } /* .details .owl-theme .owl-dots .owl-dot span:after { background: #be9a78 } */ .details .owl-theme .owl-dots .owl-dot.active span, .details .owl-theme .owl-dots .owl-dot:hover span { } .owl-theme .owl-dots .owl-dot.active span{ background:#09ef3b; width:20px; border-radius: 33px; } .owl-theme .owl-dots .owl-dot span { width: 8px; height: 8px; border-radius: 100%; margin: 0 10px; position: relative; background: #fff; opacity: 1; } /* 左右 */ .banner_cur { } @media only screen and (max-width: 750px){ .banner_cur { display:none; } } .banner_cur .prev{ cursor: pointer; display: block; width: 70px; height:70px; background-image: url(/uploads/image/tdimages/prev.png); background-repeat: no-repeat; background-position: center center; background-size: 20px 20px; opacity: 0; position: absolute; left:0; top:50%; margin-top:-35px; z-index:100; /* background-color:#f75b5b; */ transition: all ease .25s; background-color:rgba(0,0,0,.5); border-radius: 100%; } .banner_cur span.next{ cursor: pointer; display: block; width: 70px; height:70px; background-image: ; background-repeat: no-repeat; background-position: center center; background-size: 20px 20px; opacity: 0; position: absolute; right:0; top:50%; margin-top:-35px; z-index:100; background-color:rgba(0,0,0,.5); border-radius: 100%; } .banner:hover .banner_cur .prev{ left:30px; opacity: 1; } .banner:hover .banner_cur span.next{ right:30px; opacity: 1; } .banner .banner_cur .prev:hover{ background-color:rgba(0,0,0,.8); } .banner .banner_cur span.next:hover{ background-color:rgba(0,0,0,.8); } .bode1{ width:100%; padding:30px 0; background:#fff; } .bode1 .wrap{ display:flex; justify-content: space-between; flex-wrap:wrap; } .bode1 .wrap .left{ width:33%; position: relative; overflow: hidden; } .bode1 .wrap .left img{ width:100%; transition: all ease .25s; height:100%; } .bode1 .wrap .left img:hover{ transform: scale(1.1,1.1) } .bode1 .wrap .left .img{ position: absolute; left:0; top:0; width:140px; height:140px; background: no-repeat center center; background-size: 100% 100%; } .bode1 .wrap .left .img p{ position: absolute; left:20px; top:20px; color:#fff; font-size: 16px; } .bode1 .wrap .right{ width:66%; height:100%; } .bode1 .wrap .right li{ border:2px solid rgba(0,0,0,0); overflow: hidden; padding:1px 2px; position: relative; height:100%; } .bode1 .wrap .right li p{ width:100%; color:#333; font-size: 14px; text-align: center; padding:20px; } .bode1 .wrap .right li:hover p{ color:#008d84; } .bode1 .wrap .right li:hover{ border:2px solid #008d84; } .bode1 .wrap .right img{ width:100%; } @media only screen and (max-width: 600px){ .bode1 .wrap .left{ width:100%; } .bode1 .wrap .left .img{ position: absolute; left:0; top:0; width:140px; height:140px; background: no-repeat center center; background-size: 100% 100%; } .bode1 .wrap .left .img p{ position: absolute; left:20px; top:20px; color:#fff; font-size: 16px; } .bode1 .wrap .right{ width:100%; margin-top:15px; } } @media only screen and (max-width: 480px){ .bode1 .wrap .right li p{ padding:5px; font-size: 12px; } } .bode2{ width:100%; background:#fff; } .bode2 .top{ width:100%; background: no-repeat center center; background-size: cover; padding:70px 0; } .bode2 .top .tit{ width:100%; } .bode2 .top .tit h1{ font-size: 37px; line-height: 45px; text-align: center; color:#fff; } .bode2 .top .tit span{ display:block; width:100%; text-align: center; line-height: 25px; margin-top:10px; color:#fff; font-size: 16px; } .bode2 .top .nav{ width:100%; display:flex; justify-content: center; flex-wrap:wrap; margin-top:20px; } .bode2 .top .nav li{ margin:0 5px; } .bode2 .top .nav li a{ display:block; padding:5px 15px; border:1px solid rgba(0,0,0,0); color:#fff; text-align: center; font-size: 16px; } .bode2 .top .nav .on_bode2 a{ border:1px solid #fff; } .bode2 .bot{ width:100%; padding:50px 0; } .bode2 .bot .bot_item:nth-child(n 2){ display: none; } .bode2 .bot .bot_flex{ width:100%; display:flex; justify-content: space-between; flex-wrap:wrap; align-items: center; } .bode2 .bot .list{ width:58%; height: 380px; } .bode2 .bot .list ul{ width:100%; } .bode2 .bot .list ul li{ width:100%; padding:15px 5%; border-bottom: 1px solid #ddd; } .bode2 .bot .list ul li .tit{ width:100%; display:flex; justify-content: space-between; align-items: center; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .bode2 .bot .list ul li .tit h4{ color:#333; font-size: 15px; line-height: 25px; } .bode2 .bot .list ul .on_list1 .tit h4{ font-size: 20px; } .bode2 .bot .list ul li:hover .tit h4{ color:#008d84; } .bode2 .bot .list ul li .tit span{ display:block; color:#333; font-size: 13px; } .bode2 .bot .list ul li p{ color:#333; font-size: 12px; line-height: 25px; margin-top:10px; height:0; margin-top:0px; transition: all linear .25s; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .bode2 .bot .list ul .on_list1 p{ height:50px; margin-top:10px; transition: all linear .25s; } .bode2 .bot .img{ width:40%; } .bode2 .bot .img .img_list{ width:100%; overflow: hidden; } .bode2 .bot .img .img_list img{ width:100%; transition: all ease .25s; } .bode2 .bot .img :hover img{ transform: scale(1.1,1.1); } .bode2 .bot .img .img_list:nth-child(n 2){ margin-top:20px; } @media only screen and (max-width: 960px){ .bode2 .bot .list{ width:48%; } .bode2 .bot .img{ width:48%; } } @media only screen and (max-width: 750px){ .bode2 .top{ padding:35px 0 } .bode2 .top .tit h1{ font-size: 24px; } .bode2 .top .nav li a{ padding:5px 10px; } .bode2 .bot{ padding:25px 0; } .bode2 .bot .list{ width:100%; } .bode2 .bot .img{ width:100%; margin-top:20px; } .bode2 .bot .list ul li{ padding:10px; } .bode2 .bot .list ul li .tit h4{ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width:60%; } .bode2 .bot .list ul .on_list1 .tit h4{ font-size: 18px; } } .bode3{ width:100%; padding: 40px 0; } .bode3 .wrap>.tit{ width:100%; display:flex; justify-content: center; align-items: center; padding:60px 0; color:#333; font-size: 37px; } .bode3 .wrap>.tit .line{ width:60px; height:1px; background:#333; margin:0 10px; } .bode3 .wrap>.tit a{ display:block; color:#333; font-size: 37px; padding:0 10px; } .bode3 .wrap>.tit a:hover{ font-weight: bold; color:#008d84; } .bode3 .nav{ width:100%; display:flex; justify-content: center; align-items: center; } .bode3 .nav ul{ display:flex; justify-content: space-between; flex-wrap:wrap; color:#333; font-size: 13px; } .bode3 .nav ul li{ margin:0 10px; } .bode3 .nav ul li a{ color:#333; font-size: 13px; } .bode3 .nav ul li a:hover{ color:#008d84; } .bode3 .nav img{ width:13px; margin:0 10px; height:100%; padding-top:2px; } .bode3 .product_search{ width:100%; display:flex; justify-content: space-between; padding:10px 20px; margin-top:30px; background:#008d84; align-items: center; } .bode3 .product_search .left{ color:#fff; font-size: 14px; } .bode3 .product_search .right{ display:flex; justify-content: space-between; align-items: center; } .bode3 .product_search .right .gjc{ color:#fff; font-size: 13px; } .bode3 .product_search .right .gjc a{ color:#fff; font-size: 13px; margin:0 7px; } .bode3 .product_search .right form{ display:flex; justify-content: space-between; align-items: center; } .bode3 .product_search .right form .input1{ display:block; margin-left:10px; padding:0px 15px; color:#999; font-size: 12px; outline: none; border:none; width:210px; line-height: 33px; } .bode3 .product_search .right form .input2{ outline: none; border:none; display:block; width:100px; color:#fff; font-size: 12px; background:no-repeat 25px center; background-color:#334048; background-size: 15px 15px; margin-left:10px; height:100%; line-height: 33px; text-align: center; padding-left:20px; cursor: pointer; } .bode3 .top_pic{ width:100%; height:240px; background:no-repeat center center; background-size:cover; } #pro_exh{ width:100%; padding:40px 0; } #pro_exh .tit{ width:100%; display:flex; justify-content: space-between; flex-wrap:wrap; align-items: center; } #pro_exh .tit h4{ color:#333; font-size: 24px; line-height: 30px; font-weight: normal; } #pro_exh .tit a{ display:flex; justify-content: space-between; align-items: center; } #pro_exh .tit a span{ display:block; color:#333; font-size: 14px; } #pro_exh .tit a:hover span{ color:#008d84; } #pro_exh .tit a em{ display:block; width:20px; height:20px; text-align: center; line-height: 20px; font-style: normal; color:#fff; font-size:12px; background:#969696; border-radius: 100%; font-family: "宋体"; margin-left:10px; } #pro_exh .content{ width:100%; display:flex; justify-content: space-between; flex-wrap:wrap; } #pro_exh .content .left{ width:19%; margin-top:10px; } #pro_exh .content .left img{ width:100%; } #pro_exh .content .right{ width:80%; display:flex; justify-content: flex-start; flex-wrap:wrap; } #pro_exh .content .right li{ width:24%; /*height: 48.5%;*/ margin-top:10px; background:#fff; padding:15px 0; border:2px solid rgba(0,0,0,0); margin-left:7px; } #pro_exh .content .right li:hover{ border:2px solid #008d84; } #pro_exh .content .right li .img{ width:80%; margin:0 auto; } #pro_exh .content .right li .img img{ width:100%; } #pro_exh .content .right li .text{ width:100%; padding:0px 10px; } #pro_exh .content .right li .text p{ text-align: center; color:#333; font-size: 14px; margin-top:15px; } #pro_exh .content .right li .text span{ display:block; color:#333; font-size: 13px; text-align: center; color:#008d84; margin-top:20px; } #pro_exh .content .right li:hover .text span{ color:#ff0000; } @media only screen and (max-width: 1000px){ .bode3 .wrap>.tit{ font-size: 24px; } .bode3 .wrap>.tit a{ font-size: 24px; } .bode3 .product_search .right .gjc{ display:none; } #pro_exh .content .left{ display:none; } #pro_exh .content .right{ width:100%; } } @media only screen and (max-width: 750px){ .bode3 .wrap>.tit{ padding:30px 0; font-size: 16px; } .bode3 .wrap>.tit .line{ width:20px; } .bode3 .wrap>.tit a{ font-size: 16px; } .bode3 .product_search .right form .input1{ width:200px; margin-left:0; } .bode3 .product_search .right form .input2{ width:80px; background: no-repeat 15px center; background-color: #334048; background-size: 15px 15px; } #pro_exh .content .right{ justify-content: space-between; } #pro_exh .content .right li{ padding:10px 0; width:49%; height: auto; margin-left:0; } #pro_exh .tit h4{ font-size: 16px; } #pro_exh .tit a span{ font-size: 12px; } #pro_exh .tit a em{ width:15px; height:15px; line-height: 15px; } #pro_exh{ padding:20px 0; } .bode3 .product_search{ margin-top:15px; } } @media only screen and (max-width: 480px){ .bode3 .wrap>.tit a{ font-size: 14px; padding:0 2px; } .bode3 .nav ul{ justify-content: flex-start; } .bode3 .product_search{ justify-content: center; flex-wrap:wrap; } .bode3 .product_search .left{ width:100%; text-align: center; } .bode3 .product_search .right{ margin-top:10px; } } .bode4{ width:100%; } .bode4 .top_pic{ width:100%; height:240px; background:no-repeat center center; background-size:cover; } @media only screen and (max-width: 850px){ .bode4 .top_pic{ width:100%; height:150px; background:no-repeat center center; background-size:cover; } } @media only screen and (max-width: 480px){ .bode4 .top_pic{ width:100%; height:70px; background:no-repeat center center; background-size:cover; } } .bode5{ width:100%; } .bode5 .top_pic{ width:100%; height:240px; background:no-repeat 90% center; background-size:cover; } @media only screen and (max-width: 850px){ .bode5 .top_pic{ width:100%; height:150px; background:no-repeat 100% center; background-size:cover; } } @media only screen and (max-width: 480px){ .bode5 .top_pic{ width:100%; height:70px; background:no-repeat 95% center; background-size:cover; } } .bode6{ width:100%; } .bode6 .top_pic{ width:100%; height:240px; background:no-repeat center center; background-size:cover; } @media only screen and (max-width: 850px){ .bode6 .top_pic{ width:100%; height:150px; background:no-repeat center center; background-size:cover; } } @media only screen and (max-width: 480px){ .bode6 .top_pic{ width:100%; height:70px; background:no-repeat center center; background-size:cover; } } .bode7{ width:100%; } .bode7 .top_pic{ width:100%; height:240px; background:no-repeat 30% center; background-size:cover; } @media only screen and (max-width: 850px){ .bode7 .top_pic{ width:100%; height:150px; background:no-repeat 20% center; background-size:cover; } } @media only screen and (max-width: 480px){ .bode7 .top_pic{ width:100%; height:70px; background:no-repeat 9% center; background-size:cover; } } .bode8{ width:100%; } .bode8 .top_pic{ width:100%; height:240px; background:no-repeat center center; background-size:cover; } @media only screen and (max-width: 850px){ .bode8 .top_pic{ width:100%; height:150px; background:no-repeat center center; background-size:cover; } } @media only screen and (max-width: 480px){ .bode8 .top_pic{ width:100%; height:70px; background:no-repeat center center; background-size:cover; } } .bode8 .tit{ width:100%; display:flex; justify-content: center; align-items: center; margin-top:30px; } .bode8 .tit .line{ width:30px; height:1px; background:#333; } .bode8 .tit h1{ font-size: 37px; color:#333; padding:0 15px; } .bode8 .content{ padding:30px 0; } .bode8 .content .hc_owl{ width:100%; position: relative; } .bode8 .content .hc_owl .owl{ width:100%; margin:0 auto } .bode8 .content .hc_owl .owl li{ display:table-cell; padding:10px; } .bode8 .content .hc_owl .owl li .img{ width:100%; overflow: hidden; position: relative; } .bode8 .content .hc_owl .owl li .img .picture{ width:100%; } .bode8 .content .hc_owl .owl li .img .picture img{ width:100%; } .bode8 .content .hc_owl .owl li .img .img_text{ position: absolute; left: 0; top:50%; z-index:10; width:100%; margin-top:-20px; } .bode8 .content .hc_owl .owl li .img .img_text h3{ color:#fff; font-size:24px; line-height: 25px; text-align: center; } .bode8 .content .hc_owl .owl li .img .img_text p{ color:#fff; font-size: 12px; line-height: 20px; text-align: center; margin-top:10px; } .bode8 .content .hc_owl .owl li .img .img_box{ width:100%; position: absolute; left:0; bottom:100%; width:100%; height:100%; background:rgba(0,0,0,.8); z-index: 20; transition: all ease .25s; } .bode8 .content .hc_owl .owl li:hover .img .img_box{ width:100%; position: absolute; left:0; bottom:0; width:100%; height:100%; background:rgba(0,0,0,.8); z-index: 20; transition: all ease .25s; } .bode8 .content .hc_owl .owl li .img .img_box img{ position: absolute; width:150px; height:150px; left:50%; top:50%; margin-left:-75px; margin-top:-75px; z-index:30; } .bode8 .content .hc_owl .owl li .text{ background:#333333; line-height: 40px; padding:0 10px; display:flex; justify-content: space-between; align-items: center; } .bode8 .content .hc_owl .owl li:hover .text{ background:#008d84; } .bode8 .content .hc_owl .owl li .text p{ color:#fff; font-size: 12px; } .bode8 .content .hc_owl .owl li .text img{ width:10px; height:10px; } .bode8 .content .hc_owl .owl_cur .prev{ width:50px; height:50px; position: absolute; left:0; top:50%; margin-top:-25px; background:no-repeat center center; background-size: 100% 100%; z-index:100%; cursor: pointer; } .bode8 .content .hc_owl .owl_cur .next{ width:50px; height:50px; position: absolute; right:0; top:50%; margin-top:-25px; background:no-repeat center center; background-size: 100% 100%; z-index:100%; cursor: pointer; } @media only screen and (max-width: 480px){ .bode8 .content .hc_owl .owl{ width:70%; margin:0 auto } .bode8 .content .hc_owl .owl_cur .prev{ width:30px; height:30px; position: absolute; left:0; top:50%; margin-top:-15px; background:no-repeat center center; background-size: 100% 100%; z-index:100%; cursor: pointer; } .bode8 .content .hc_owl .owl_cur .next{ width:30px; height:30px; position: absolute; right:0; top:50%; margin-top:-15px; background:no-repeat center center; background-size: 100% 100%; z-index:100%; cursor: pointer; } .bode8 .content .hc_owl .owl li .img .img_box img{ position: absolute; width:120px; height:120px; left:50%; top:50%; margin-left:-60px; margin-top:-60px; z-index:30; } } .bode9{ width:100%; } .bode9 .top_pic{ width:100%; height:240px; background:no-repeat center center; background-size:cover; } .bode03{ width:100%; } .bode03 .top_pic{ width:100%; height:240px; background:no-repeat center center; background-size:cover; } @media only screen and (max-width: 850px){ .bode9 .top_pic{ width:100%; height:150px; background:no-repeat center center; background-size:cover; } } @media only screen and (max-width: 480px){ .bode9 .top_pic{ width:100%; height:70px; background:no-repeat center center; background-size:cover; } .bode03 .top_pic{ width:100%; height:70px; background:no-repeat center center; background-size:cover; } } .bode10{ width:100%; } .bode10 .top_pic{ width:100%; height:240px; background:no-repeat center center; background-size:cover; } @media only screen and (max-width: 850px){ .bode10 .top_pic{ width:100%; height:150px; background:no-repeat center center; background-size:cover; } } @media only screen and (max-width: 480px){ .bode10 .top_pic{ width:100%; height:70px; background:no-repeat center center; background-size:cover; } } .bode11{ width:100%; } .bode11 .top_pic{ width:100%; height:240px; background:no-repeat center center; background-size:cover; } @media only screen and (max-width: 850px){ .bode11 .top_pic{ width:100%; height:150px; background:no-repeat center center; background-size:cover; } } @media only screen and (max-width: 480px){ .bode11 .top_pic{ width:100%; height:70px; background:no-repeat center center; background-size:cover; } } .bode12{ width:100%; } .bode12 .top_pic{ width:100%; height:240px; background:no-repeat center center; background-size:cover; } @media only screen and (max-width: 850px){ .bode12 .top_pic{ width:100%; height:150px; background:no-repeat center center; background-size:cover; } } @media only screen and (max-width: 480px){ .bode12 .top_pic{ width:100%; height:70px; background:no-repeat center center; background-size:cover; } }