@charset "utf-8"; /* css document */ .banner img { width: 100%; transform: scale(1,1); transition: 1s linear 2s; } .banner .swiper-slide-active img{ transform: scale(2,2); transition: 25s linear; } .banners .swiper-pagination{ width:100%; left:0; bottom:50px; } .banners .swiper-pagination-bullet { width: 20px; height: 3px; display: inline-block; border-radius:2px; background: #fff; opacity: 1; margin:0 5px; } .banners .swiper-pagination-bullet-active { opacity: 1; background: #e30100; } /*******************首页简介*******************/ .in-ab .fl, .in-ab .fr{ width:50%; float:left; } .in-ab .fl{ position:relative; height:100%; } .in-ab .fl p{ font-size:14px; color:#8c8c8c; line-height: 25px; text-indent: 2em; } .in-ab .fr img{display:block;} .in-ab .img{ position: absolute; bottom: 0; } .in-ab .img img{ display:block; float:left; width:50%; height: auto; } .in-ab .fl .txt{ position: absolute; left:50%; transform: translatex(-50%); width:750px; } .in-tit{ padding-top: 80px; margin-bottom: 38px; } .in-tit h1{ font-size:32px; color:#282828; } .in-tit h2{ display: inline-block; font-size:30px; color:#b9b7b7; line-height: 55px; border-bottom: 2px solid #ff9b30; position: relative; font-family:calibri,arial, helvetica, "sans-serif" } .in-tit h2:after{ position:absolute; content: ''; display: block; width:80%; height: 2px; left:0; bottom:-2px; z-index: 1; background: #e20100; } .hmore{ display: block; width:127px; height:40px; text-align: center; line-height: 40px; background: linear-gradient(#e50000,#ab2001); font-size:12px; color:#fff; margin-top:25px; } .in-ab .in-tit{ padding-top:50px; } /****************视频****************/ .videos { position: relative; overflow: hidden; } .videos .img-box{ display: block; background-color: #fff; } .videos .img-box img{ display: block; width: 100%; height: 100%; -webkit-transition: all .6s ease; transition: all .6s ease; opacity: .9; } .videos .video-box{ position: absolute; z-index: 1; top: 0; left: 0; overflow: hidden; width: 100%; height: 100%; text-align: center; } .videos .play { position: absolute; display:block; width:100%; height:100%; background-color:rgba(0,0,0,.3); background-image:url(/uploads/image/images/play-btn1.png); background-repeat: no-repeat; background-position: center; -webkit-transition: all .4s; transition: all .4s; opacity: 0; } .videos .iframe { display: none; width: 100% !important; height: 100% !important; } .videos:hover .play{ opacity: 1; } /****************首页产品****************/ .tab-nav{ position:relative; } /*tab选项卡*/ #tabs { width:1500px; position: absolute; bottom:0; left: 50%; transform: translatex(-50%); z-index: 99; overflow: hidden; margin: 0; padding: 0; list-style: none; text-align: right; } #tabs li { display:block; width:25%; float:left; } #tabs li a{ display:block; text-align: center; font-size:14px; line-height: 50px; padding-bottom: 0; text-decoration: none; color: #fff; background: #d42727; cursor: pointer; } #tabs a:hover, #tabs a:focus, #tabs #current a { background: #ae1f01; } /* ------------------------------------------------- */ #content { margin-top: 30px; background: #fff; } #content img{ display:block; } #content #tab1{ position:relative; } #content .word-wrap{ max-width: 400px; position: absolute; z-index: 50; background: rgba(0,0,0,.2); padding:30px; left:210px; top:50%; transform:translatey(-50%); padding-bottom: 0; } #content .word-wrap h2{ font-size:30px; color:#fff; font-weight: bold; text-align: center; } #content .word-wrap h2:after{ content: ''; display:block; width:42px; height: 1px; background: rgba(255,255,255,.5); margin:15px auto; } #content .word-wrap p{ font-size:14px; color:#fff; line-height: 25px; } #content .word-wrap a{ display:block; width:127px; height:40px; text-align: center; border:1px solid #fff; line-height: 40px; font-size:12px; color:#fff; margin:38px auto; } /******************新闻列表********************/ .in-news{ padding-bottom: 80px; background:url(/uploads/image/images/index_06.jpg) center no-repeat; background-size: cover; } .grid-cols-3 { display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 28px; } .in-news .item{ background: #fff; border-radius:30px 0 0 0; overflow: hidden; } .in-news .item .img{ overflow:hidden; border-radius: 0 0 30px 0; } .in-news .item img{ display:block; width: 100%; transition: all 0.5s; height: auto; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .in-news .item .card-content{ padding:0 20px; } .card-content h2{ padding:30px 0 25px 0; font-size:18px; color:#333; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .in-news .item .card-content p{ font-size:14px; color:#8c8c8c; line-height: 25px; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .in-news .item .card-content .label{ margin-top: 20px; font-size:12px; color:#aeaeae; } .in-news .item .card-content .label span{ padding-right:25px; } .in-news .item .card-content a{ display:block; width:127px; height:40px; text-align: center; border:1px solid #d6d6d6; line-height: 40px; font-size:12px; color:#9d9d9d; margin:30px auto; } .in-news .item .card-content a:hover{ border:none; background:linear-gradient(#e40000,#af1e01); color:#fff; } .in-news .item .img:hover img{ -webkit-transform: scale(1.05,1.05); -moz-transform: scale(1.05,1.05); -ms-transform: scale(1.05,1.05); -o-transform: scale(1.05,1.05); transform: scale(1.05,1.05); } @-webkit-keyframes scale_b { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); } 100% { -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); transform: scale(2); } } @-moz-keyframes scale_b { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); } 100% { -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); transform: scale(2); } } @-ms-keyframes scale_b { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); } 100% { -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); transform: scale(2); } } @-o-keyframes scale_b { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); } 100% { -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); transform: scale(2); } }