.bg-color { background: #fff; } .head { position: fixed; width:100%; left:0; top:0; background: rgba(0, 0, 0, 0.6); z-index: 1000; } .head .warpper{ display:flex; align-items: center; justify-content: space-between; height: 100px; } .logo{ display:flex; align-items: center; } .logo>div{ margin-left:4px; margin-top:7px; } .logo>div>h1{ color: #fff; font-size: 26px; letter-spacing: 4px; line-height: 30px; font-family: lianmeng; } .logo>div>small{ color: #fff; font-size: 12px; line-height: 12px; text-transform: uppercase; } .nav-bar{ width: 770px; height: 100%; } .nav-bar li{ float:left; width:12.5%; height: 100%; position: relative; text-align: center; display:flex; align-items: center; justify-content: center; } .nav-bar li:hover,.nav-bar li.active{ background: rgba(33, 33, 32, 0.6); } .nav-bar li>a>b{ display:block; border-radius: 50%; border:1px solid #fff; width: 43px; height: 43px; margin:0 auto; } .nav-bar li>a>b img{ height: 100%; width: 100%; object-fit: none; filter:grayscale(100) brightness(100); } .nav-bar li:hover>a>b,.nav-bar li.active>a>b{ border:1px solid #e20002; } .nav-bar li:hover>a>b img,.nav-bar li.active a>b img { filter:grayscale(0) brightness(1); } .nav-bar li>a>p{ color: #fff; font-size: 15px; margin-top: 3px; } .nav-bar li:hover>a>p,.nav-bar li.active>a>p{ color: #e20002; } .navdown-list{ position: absolute; top:100%; left:0; } #navproclick .navdown-list{ display:none; } .list01{ background: rgba(0, 0, 0, 0.8); } .list02,.list04{ position: relative; min-width:150px; height: 48px; } .list03,.list05{ position: absolute; left:100%; top:0; min-width:170px; background: rgba(226, 0, 2, 0.8); display:none; } .list05{ background: #e20002; } .list02>a{ display:block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; min-width:140px; text-align-last: justify; height: 48px; line-height: 48px; font-size: 16px; color: #fff; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; text-align: center; -webkit-transition: 350ms 0s all ease; -moz-transition: 350ms 0s all ease; -ms-transition: 350ms 0s all ease; -o-transition: 350ms 0s all ease; transition: 350ms 0s all ease; padding:0 39px; } .list02>a:hover{ background: #b50102; } .list03>a,.list04>a,.list05>a{ display:block; color: #fff; line-height: 48px; font-size: 14px; -webkit-transition: 350ms 0s all ease; -moz-transition: 350ms 0s all ease; -ms-transition: 350ms 0s all ease; -o-transition: 350ms 0s all ease; transition: 350ms 0s all ease; } .list04{ min-width: 215px; } .list03>a:hover{ background: #e20002; } .list04>a:hover{ background: #e20002; } .list05>a:hover{ background: #ff080a; } /*nav comlist*/ #navcomclick,#navsloclick{ position: relative; } .navcomlist,.navslolist{ display:none; position: absolute; top:100%; left:50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); background: rgba(0, 0, 0, 0.6); } .navcomlist a,.navslolist a{ display: block; line-height: 48px; width: 120px; text-align: center; font-size: 14px; color: #fff; -webkit-transition: 350ms 0s all ease; -moz-transition: 350ms 0s all ease; -ms-transition: 350ms 0s all ease; -o-transition: 350ms 0s all ease; transition: 350ms 0s all ease; } .navcomlist a:hover,.navslolist a:hover{ background: #e20002; } @media screen and (min-width: 1200px) { #navproclick:hover .navdown-list,.list02:hover .list03,.list04:hover .list05{ display:block; } #navcomclick:hover .navcomlist,#navsloclick:hover .navslolist{ display:block; } } .navlx{ width: 325px; display:flex; justify-content: space-between; } .navlx>a{ display:block; position: relative; } .navlx>a>p,.navlx>a>div{ position: absolute; top:100%; } .navtel{ display:flex; justify-content: center; align-items: center; /*border:1px solid #fff;*/ border-radius: 15px; padding:0 10px; padding-left:15px; /*background:url("../images/navicontel.png") no-repeat left center;*/ } .navtel>img{ display: inline-block; vertical-align: middle; filter:grayscale(100) brightness(100); -webkit-transition: 350ms 0s all ease; -moz-transition: 350ms 0s all ease; -ms-transition: 350ms 0s all ease; -o-transition: 350ms 0s all ease; transition: 350ms 0s all ease; } .navtel>span{ color: #fff; line-height: 16px; } .navshop{ border:1px solid #fff; border-radius: 15px; line-height: 27px; padding-left:15px; overflow: hidden; -webkit-transition: 350ms 0s all ease; -moz-transition: 350ms 0s all ease; -ms-transition: 350ms 0s all ease; -o-transition: 350ms 0s all ease; transition: 350ms 0s all ease; } .navshop:hover{ background: #fff; border:1px solid rgba(0, 0, 0, 0.6); } .navshop>span>img{ display: inline-block; margin-right: 8px; vertical-align: middle; filter:grayscale(100) brightness(100); -webkit-transition: 350ms 0s all ease; -moz-transition: 350ms 0s all ease; -ms-transition: 350ms 0s all ease; -o-transition: 350ms 0s all ease; transition: 350ms 0s all ease; } .navshop:hover>span>img{ filter:grayscale(0) brightness(1); } .navshop>span{ color: #fff; display:block; float:left; -webkit-transition: 350ms 0s all ease; -moz-transition: 350ms 0s all ease; -ms-transition: 350ms 0s all ease; -o-transition: 350ms 0s all ease; transition: 350ms 0s all ease; } .navshop:hover>span{ color: #e20002; } .navshop>b{ width: 30px; margin-left: 12px; display:block; float:left; border-left:1px solid #fff; height: 27px; background: url("../images/navline.png") no-repeat 10px center; -webkit-transition: 350ms 0s all ease; -moz-transition: 350ms 0s all ease; -ms-transition: 350ms 0s all ease; -o-transition: 350ms 0s all ease; transition: 350ms 0s all ease; } .navshop:hover>b{ background:#e20002 url("../images/navline.png") no-repeat 10px center; } .navlx>a .navshop_style{ width: 93px; border-radius: 18px; } .navlx>a .navshop_style:after{ display:block; content: ''; clear:both; } .navlx>a .navshop_style img{ float:left; width:initial; } .navlx>a .navshop_style p{ float:left; line-height: 29px; color: #fff; font-weight: normal; } .navlx>a:hover .navshop_style p{ color: #000; } .navlx_code>b{ display:block; width: 27px; height: 27px; border-radius: 50%; border:1px solid #fff; -webkit-transition: 350ms 0s all ease; -moz-transition: 350ms 0s all ease; -ms-transition: 350ms 0s all ease; -o-transition: 350ms 0s all ease; transition: 350ms 0s all ease; } .navlx_code:hover>b{ background: #fff; } .navlx_code>b>img{ height: 100%; width:100%; object-fit: none; -webkit-transition: 350ms 0s all ease; -moz-transition: 350ms 0s all ease; -ms-transition: 350ms 0s all ease; -o-transition: 350ms 0s all ease; transition: 350ms 0s all ease; filter:grayscale(100) brightness(100); } .navlx>a:hover>b>img{ filter:grayscale(0) brightness(1); } .navlx .navlx_code>p{ display:none; background: rgba(255, 255, 255, 0.8); padding:0 25px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; min-width:152px; height: 40px; line-height:40px; font-size:14px; color:#000000; border-radius:4px; text-align: center; display:none; position: absolute; top:46px; left:50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .navlx .navlx_code>div{ display:none; background: #fff; width:120px; position: absolute; top:46px; left:50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .navlx .navlx_code:hover>div,.navlx .navlx_code:hover>p { display:block; } .navlx .navlx_code>div>img{ width: 100%; } /*首页*/ .title{ text-align: center; margin-bottom: 2vw; } .title h4{ color: rgba(255, 255, 255, 0.1); font-size: 48px; line-height: 40px; text-transform: uppercase; font-weight: 900; font-family: Arial; } .title p{ color: #fff; font-size: 36px; font-weight: bold; position: relative; top:-28px; } .indexbg{ width: 100%; overflow: hidden; } .indexswiper>.swiper-pagination{ right:35px; } .indexswiper>.swiper-pagination:before{ display:block; content: ''; position: absolute; left:50%; transform: translateX(-50%); width:2px; height: 100%; background: rgba(255, 255, 255, 0.2); } .indexswiper>.swiper-pagination span.swiper-pagination-bullet{ background: #fff; opacity: 1; margin:50px 0; } .indexswiper>.swiper-pagination span:first-of-type{ margin-top: 0; } .indexswiper>.swiper-pagination span:last-of-type{ margin-bottom:0; } .indexswiper>.swiper-pagination span.swiper-pagination-bullet-active{ position: relative; } .indexswiper>.swiper-pagination span.swiper-pagination-bullet-active:after{ display:block; content: ''; width: 18px; height: 18px; border-radius:50%; border:1px solid #fff; position: absolute; left:50%; top: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%); } #bannerSwiper{ width: 100%; height: 100%; } #bannerSwiper .swiper-slide a{ display:block; width:100%; height: 100%; position:relative; overflow: hidden; } #bannerSwiper .swiper-slide a img{ width: 100%; height:100%; object-fit: cover; } .indexswiper { width: 100%; height: 100%; } .indexswiper>.swiper-wrapper>.swiper-slide{ display:flex; align-items: center; width:100%; height: 100%; overflow: hidden; } .indexswiper .slide-inner { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-size: cover; background-position: center; } .banner{ position: relative; } .banner_mouse{ position: absolute; right:20px; text-align: center; bottom:5%; z-index: 99; } .banner_mouse>b{ display:block; margin:0 auto; position: relative; background: rgba(255, 255, 255, 0.2); width: 2px; height: 160px; overflow: hidden; } .banner_mouse>b i{ display:block; position: absolute; left:0; top:0; background: #fff; width: 2px; height: 30px; animation: scrollline 4s ease 0s infinite normal; } @keyframes scrollline { 0%{ top:0; } 100%{ top:100%; } } .banner_mouse>img{ margin:0 auto; margin-top:16px; margin-bottom: 7px; cursor: pointer; } .banner_mouse>span{ color: #fff; font-size: 12px; display:block; margin:0 auto; cursor: pointer; } .ban-pagin{ position:absolute; left:50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); width:355px; text-align: center; bottom:7px; z-index: 100; } .ban-pagin .swiper-button-next:after,.ban-pagin .swiper-button-prev:after{ display:none; } .ban-pagin .swiper-button-next{ padding-right:33px; right:0; top:50%; transform: translateY(-50%); color: #fff; background: url("../images/banjt_r.png") no-repeat center right; } .ban-pagin .swiper-button-prev{ left:0; top:50%; transform: translateY(-50%); padding-left:33px; color: #fff; background: url("../images/banjt_l.png") no-repeat center left; } .ban-pagin .swiper-pagination{ color: rgba(255, 255, 255, 0.5); font-size: 24px; font-weight: bold; line-height: 24px; width: 135px; left:50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .ban-pagin .swiper-pagination span.swiper-pagination-current{ color: #fff; font-size: 40px; } /*news*/ .indexnews{ width:100%; height: 100%; background: url("../images/newsbg.jpg") no-repeat center; background-size:cover; display:flex; align-items: center; justify-content: center; } .news{ margin-top:100px; } .newscont{ position: relative; height: 456px; width: 750px; } .swiper-news{ width: 100%; height: 100%; overflow: visible; } .newscont .swiper-slide{ filter: brightness(0.5); } .newscont .swiper-slide.swiper-slide-active{ filter: brightness(1); } .newscont .swiper-slide a{ display:block; background: rgba(211, 24, 26, 0.5); width: 100%; height: 100%; } .newscont .swiper-slide a:after{ display:block; content: ''; clear: both; } .newscont .swiper-slide a>b{ width:45%; float:left; height: 100%; } .news_textbg{ width:95%; height: 100%; margin:0 auto; display:flex; justify-content: center; align-items: center; } .news_text{ width: 80%; } .news_text>h3{ color: #fff; font-size: 30px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .news_text>p{ color: #fff; font-size: 16px; font-weight: bold; margin-top: 1.5vw; margin-bottom: 1.5vw; } .news_text>small{ display:block; color: #fff; font-weight: lighter; font-size: 16px; line-height: 29px; margin-bottom: 3vw; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-indent: 32px; } .news_text>span{ color: #fff; font-size: 14px; padding-bottom:8px; background: url("../images/newsjt.png") no-repeat left bottom; } .newscont .swiper-button-next,.newscont .swiper-button-prev{ width: 62px; height: 62px; background:#fff; border-radius:50%; } .newscont .swiper-button-next{ right:-108px; } .newscont .swiper-button-prev{ left:-108px; } .newscont .swiper-button-next:after,.newscont .swiper-button-prev:after{ color: #fe1010; font-size: 18px; } .newscont .swiper-pagination{ width: 100%; bottom:-77px; } .newscont .swiper-pagination span{ background: #fff; margin: 0 18px; border:2px solid #fff; color: #fff; overflow:hidden; opacity: 1; } .newscont .swiper-pagination span.swiper-pagination-bullet-active{ color: #fff; background:none; position: relative; top: 21px; width: 46px; height: 46px; line-height: 46px; border-radius: 50%; font-size: 16px; } /*footer*/ .indexswiper>.swiper-wrapper>.footer-slide{ height: 210px; } .footer{ background: #000000; height: 210px; width: 100%; overflow: hidden; } .fot_top{ height: 125px; display:flex; justify-content: space-between; align-items: center; } .fot_top i{ width:1px; height:100%; display:block; background: #262626; } .fot_tel{ padding-left:67px; background: url("../images/foticon.png") no-repeat left center; } .fot_tel>h4{ color: #fff; font-size: 30px; line-height: 37px; font-weight: bold; } .fot_tel>p{ color: #fff; font-size: 14px; } .fot_lx>small{ display:block; color: #fff; font-size: 16px; } .fot_lx>p{ color: #fff; font-size: 14px; } .fot_lx>a p{ color: #fff; font-size: 14px; cursor: pointer; } .fot_bom{ line-height: 76px; border-top: 1px solid #262626; } .fot_bom .warpper>p{ float:left; color: #fff; font-size: 14px; } .fot_bom .warpper>p a{ font-size: 14px; color: #fff; } .fot_bom .warpper>a{ font-size: 14px; float:right; color: #fff; } .page { font-size: 0; text-align: center; } .page .center { display: inline-block; overflow: hidden; } .page .center .page-span { float: left; font-size: 14px; color: #c3c3c3; line-height: 32px; margin-right: 30px; } .page .center .page-list { float: left; overflow: hidden; } .page .center .page-list ul li { float: left; width: auto; min-width: 30px; height: 32px; text-align: center; line-height: 30px; font-size: 14px; margin: 0 4px; padding: 0; border: none; background: transparent; } .page .center .page-list ul li a { min-width: 20px; padding: 0 5px; border: 1px solid #eee; display: block; color: #333; border-radius: 4px; -webkit-border-radius: 4px; overflow: hidden; background: #fff; } .page .center .page-list ul li:hover a { color: #f3c04b; } .page .center .page-list ul li.active a { background: #f3c04b; color: #fff; } .news-center { background: #fff; padding-bottom: 25px; } .news-center .new-list { padding: 45px 45px 0px; } .news-center .new-list ul li { margin-bottom: 35px; border-bottom: 1px solid #eee; } .news-center .new-list ul li a { overflow: hidden; display: block; height: 90px; padding-bottom: 30px; } .news-center .new-list ul li a .img { float: left; width: 130px; height: 90px; background: #eee; line-height: 90px; font-size: 0; text-align: center; } .news-center .new-list ul li a .img img { display: inline-block; vertical-align: middle; max-width: 100%; max-height: 100%; } .news-center .new-list ul li a .info { float: right; width: 690px; } .news-center .new-list ul li a .info h3 { font-size: 14px; font-weight: bold; line-height: 24px; color: #333; } .news-center .new-list ul li a .info em { display: block; font-size: 12px; color: #999; line-height: 16px; margin-bottom: 10px; } .news-center .new-list ul li a .info p { font-size: 14px; line-height: 22px; color: #999; max-height: 44px; overflow: hidden; } .news-center .new-list ul li a:hover h3 { color: #f3c04b; } .message-c { background: #fff; padding: 40px 50px; overflow: hidden; } .message-c .p { font-size: 16px; line-height: 30px; color: #666; margin-bottom: 35px; } .message-c .from input { display: block; height: 38px; line-height: 38px; padding: 0 5px; border: 1px solid #d2d2d2; margin-bottom: 10px; font-size: 14px; color: #333; } .message-c .from input[name=user], .message-c .from input[name=phone] { width: 348px; } .message-c .from textarea { font-size: 14px; color: #333; line-height: 20px; display: block; width: 728px; height: 130px; border: 1px solid #d2d2d2; padding: 5px; margin-bottom: 10px; } .message-c .from .code { overflow: hidden; } .message-c .from .code input[name=code] { width: 258px; float: left; } .message-c .from .code a { display: block; float: left; width: 80px; height: 38px; padding: 1px 0; margin-left: 10px; } .message-c .from .code a img { width: 80px; height: 38px; } .message-c .from .btn { padding-top: 25px; } .message-c .from .btn a { display: block; width: 362px; height: 40px; text-align: center; line-height: 40px; color: #fff; font-size: 16px; background: #8fa4de; } .message-c .from .btn a:hover { background: #8397d0; } .contact-o { background: #fff; overflow: hidden; padding: 40px 0; text-align: center; } .contact-o iframe { width: 830px; height: 500px; margin: 0 auto; } .bjintro{ margin-top: 3vw; background:#fff; border-radius: 10px; padding:15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; line-height: 35px; } .bjintro>span{ font-size: 20px; color: #3f3f3f; position: relative; padding-bottom: 1vw; font-weight: bold; }