.main{ line-height: 30px; padding: 5% 0;} .main_zy{ line-height: 30px; padding: 7% 0 5%;} @media screen and (max-width:768px){ .row{ margin: 0;} .main_zy{ padding: 10% 0 5%;} } @media screen and (max-width:500px){ .main_zy{ padding: 15% 0 5%;} } .img-cover-4by3{ width: 100%; height: 0; padding-bottom: 50%; position: relative; overflow: hidden;} .abs-center{ width: 100%; height: 100%; object-fit: cover; left: 0; position: absolute; text-align: center;} /*.shuiyin{ position: absolute; background: url("../images/shuiyin.png") no-repeat center top; width: 100%; height: 100%; background-size: 100% 100%;}*/ #dituContent label { max-width: unset!important; text-align: center; } /*头部*/ #top_bj{ width: 100%; height: auto; transition:0.5s; background: #fff; position: relative;} #top_index{ height: auto; margin: 0 auto;} #logo{ padding-top: 1%; padding-bottom: 1%; text-align: center;} #logo a{ display: block;} #logo a img{ max-width: 100%; transition:0.5s; position: relative; z-index: 1; } #top_tel{ transition:0.5s; padding: 2% 0 0;} #top_tel .top_tel_con{ color: #c40000; font-family: Impact; font-size: 22px;} #top_tel .top_tel_con i{ float: left; font-size: 28px; padding-right: 10px;} #top_tel .top_search{ border-left: 1px solid #c7c7c7; margin-left: 20px; padding-left: 10px;} #top_tel .top_search i{ font-size: 30px; color: #c40000;} @media screen and (max-width:1700px){ #top_tel .top_search{ display: none;} } @media screen and (max-width:1300px){ #top_tel .top_tel_con{ font-size: 20px;} } @media screen and (max-width:768px){ #top_index{ padding: 0; width: 100%;} #logo{ padding: 2%; text-align: left;} } #nav{ height: auto; transition:0.3s; padding-top: 1.5%; text-align: center;} #nav li{ display: inline-block; width: 13%; height: 50px; line-height: 50px; font-size: 18px; font-weight: normal; color: #282828; text-align: center; transition:0.3s;} #nav li a{ display: inline-block; position: relative; z-index: 1; color: #282828;} #nav li:hover a{ color: #c40000;} #nav li a:after { content: ''; width: 100%; height: 3px; position: absolute; left: 0; bottom: 0; background-color: #c40000; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); -o-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left; -moz-transform-origin: left; -ms-transform-origin: left; -o-transform-origin: left; transform-origin: left; left: 0; } #nav li:hover a::after { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: right; -moz-transform-origin: right; -ms-transform-origin: right; -o-transform-origin: right; transform-origin: right; right: 0; } @media (min-width: 1200px) and (max-width: 1440px){ #nav li{ font-size: 15px;} } @media (min-width: 768px) and (max-width: 1200px){ #nav{ margin-top: 0;} #nav li{ font-size: 15px;} } .show-search-btn{ cursor: pointer;} .header-search-wrap {position: fixed;z-index: 4;left: 50%;top: 25px;-webkit-transform: scale(0);-ms-transform: scale(0);transform: scale(0);opacity: 0;width: 600px;height: 40px;margin-left: -300px;border: 1px solid rgba(0, 0, 0, 0.2);color: #666;line-height: 40px;transition: all 0.5s;background: #fff; } .header-search-wrap .submit {position: absolute;top: 0;left: 0; z-index: 5;width: 36px;height: 40px;background: url(../images/ser1.png) no-repeat center;background-size: 20px;border: none;z-index: 3;box-sizing: border-box; } .header-search-wrap .ser-input {width: 100%;height: 40px;position: relative;border: none;background: none;box-sizing: border-box;padding-left: 40px; } .header-search-wrap .search-close {position: absolute;display: block;right: -60px;top: 50%;margin-top: -20px;width: 40px;height: 40px;background: url(../images/close2.png) no-repeat center;background-size: 30px;cursor: pointer;transition-duration: .5s; } .header-search-wrap .search-close:hover {transform: rotate(90deg); } .show1 {z-index: 100000;-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);opacity: 1; } .hide1 {-webkit-transform: scale(0) !important;-ms-transform: scale(0) !important;transform: scale(0) !important;opacity: 0 !important; } .header .bgf{background: #fff;} .top_bj_active{ width: 100%; z-index: 20; background: #fff !important; top: 0; box-shadow: 0 0 20px rgba(0,0,0,0.2); position: fixed !important;} .top_bj_active #logo{ padding: 0.5% 0;} .top_bj_active #logo img{ transform: scale(0.9);} .top_bj_active #nav{ padding-top: .5%;} .top_bj_active #nav li{ font-size: 16px;} .top_bj_active #top_tel{ padding-top: 1%;} .top_bj_active #c-header .c-switch{ top: 25px;} .top_bj_active #c-header .c-nav2{ top: 55px;} .top_bj_active .header-search-wrap{ top: 15px;} #banner img{ width: 100%;} #banner .swiper-pagination{ bottom: 3%;} #banner .swiper-pagination-bullet{ width: 20px; height: 5px; border-radius: 1px; transition:0.3s; opacity: 0.3;} #banner .swiper-pagination-bullet-active{ width: 60px; background: #c40000; opacity: 1;} #banner .swiper-button-next:after,#banner .swiper-button-prev:after{ display: none;} #banner .swiper-button-next i,#banner .swiper-button-prev i{ color: #fff; font-size: 50px;} #banner .swiper-button-next,#banner .swiper-button-prev{ background: rgba(0,0,0,0.2); width: 50px; height: 80px;} #banner .swiper-button-next{ right: 5%;} #banner .swiper-button-prev{ left:5%; } #slideBox1{ position:relative; overflow:hidden; margin:0 auto; width:100%;/* 设置焦点图最大宽度 */ } #slideBox1 .hd{ position:absolute; height:28px; line-height:28px; bottom:0; right:0; z-index:1; } #slideBox1 .hd li{ display:inline-block; width:5px; height:5px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background:#333; text-indent:-9999px; overflow:hidden; margin:0 6px; } #slideBox1 .hd li.on{ background:#fff; } #slideBox1 .bd{ position:relative; z-index:0; } #slideBox1 .bd li{ position:relative; text-align:center; height:auto; overflow:hidden; } #slideBox1 .bd li img{ vertical-align:top; width:100%;/* 图片宽度100%，达到自适应效果 */} #slideBox1 .bd li a{ -webkit-tap-highlight-color:rgba(0,0,0,0); } /* 去掉链接触摸高亮 */ #slideBox1 .bd li .tit{ display:block; width:100%; position:absolute; bottom:0; text-indent:10px; height:28px; line-height:28px; color:#fff; text-align:left; } /*手机导航*/ .ovh{overflow: hidden;display: none; width: 100%;height: 100vh;position: fixed;left: 0;top:0;background: rgba(0,0,0,.3);width: 100%;height: 100%;position: absolute;left: 0;right: 0;top:0;bottom:0;z-index: 99;} .ovh.show{display: block;} .menu{position: absolute;right: 15px;line-height: 32px; width: 75px;height: 30px;top: 50%;transform: translateY(-50%); z-index: 1000;} .menu .menu_button{width: 35px;float: right;height: pointer;cursor: pointer} .menu .menu_button>.line{float: right;width: 100%;height: 3px;background: #323e4a;margin-top:6px;transition:.3s;transition-timing-function:ease;} .menu .menu_button>.line:nth-child(2){transition-delay:0.05s;} .menu .menu_button>.line:nth-child(3){transition-delay:0.1s;} .m-sub-menu.show {right: 0;transition: all 0.44s ease 0s;z-index: 100000000;} .m-sub-menu {position: fixed;right: -100%;width: 100%;top: 0;z-index: 100;height: 100%;background-color: #fff;transition: all 0.64s ease 0s;} .m-sub-menu .top-box {line-height: 70px;background-color: #333333;font-size: 16px;color: #fff;text-indent: 25px;position: relative;} .m-sub-menu .top-box .menu_button{width: 40px;height: 40px;cursor: pointer;position:absolute;right: 15px;top:18px; } .m-sub-menu .top-box .menu_button .line{background: #fff;float: right;width: 40px;height: 3px;margin-top:6px;transition:.3s;transition-timing-function:ease;} .m-sub-menu .top-box .menu_button .line:nth-child(1){transform:translateY(10px) rotate(45deg);-webkit-transform:translateY(10px) rotate(45deg);} .m-sub-menu .top-box .menu_button .line:nth-child(2){transform:translateY(0) rotate(0);-webkit-transform:translateY(0) rotate(0);display: none;} .m-sub-menu .top-box .menu_button .line:nth-child(3){transform:translateY(0px) rotate(-45deg);-webkit-transform:translateY(0px) rotate(-45deg);} .m-sub-menu .list-wrap{height:calc(100vh - 70px);overflow-y: scroll;} .m-sub-menu .list-wrap ul{padding-bottom: 80px;} .m-sub-menu .list-wrap li {line-height: 60px;border-bottom: 1px solid #f2f2f2;} .m-sub-menu .list-wrap li:last-child{border:none;} .m-sub-menu .list-wrap li .col-box {display: block;width: 100%; padding: 0 8%;} .m-sub-menu .list-wrap .tit {font-size: 16px;color: #666;} .m-sub-menu .sec-sub-list {position: absolute;right: -100%;top: 70px;width: 100%;} .m-sub-menu .sec-sub-list .return-fir {display: block; width: 100%; padding: 0 5%;line-height: 60px;background-color: #c40000;} .m-sub-menu .sec-sub-list .return-fir p {padding-left: 18px;color: #fff;font-size: 18px;} .m-sub-menu .sec-sub-list .return-fir p i{ float: left; padding-right: 10px;} .m-sub-menu .sec-sub-list .boxs {width: 100%;height: 100vh; position: absolute;left: 0;top: 0; transition: all 0.4s ease 0s;background-color: #fff;} .m-sub-menu .sec-sub-list .boxs.show {left: -100%;} .m-sub-menu .sec-sub-list ul{width: 100%;/*height: 400px;*/overflow-y:auto} .m-sub-menu .sec-sub-list li {line-height:50px; border-bottom: 1px solid #f2f2f2;} .m-sub-menu .sec-sub-list li a {display: block;width: 84%;padding: 0 7.8% 0 8.2%;font-size: 16px;color: #666;} /*底部*/ #end_nr_bj{ background: url("../images/end_bj.jpg") repeat center fixed; width: 100%; height: auto; overflow: hidden; color: #bebebe;} #end_nr_bj a{ color: #bebebe; transition: 0.3s; position: relative;} #end_nr_bj a:hover{ color: #fff;} #end_nr_bj a:after{z-index:1;content: ''; position: absolute; left: 0; bottom: 0; display: block; height:5px; background-color: rgba(255, 255, 255, .2);width:100%; -webkit-transition: transform .5s; -moz-transition: transform .5s; -ms-transition: transform .5s; -o-transition: transform .5s; transition: transform .5s; -webkit-transform: scaleX(0); transform: scaleX(0);-webkit-transform-origin: right center;transform-origin: right center;} #end_nr_bj a:hover::after{ -webkit-transform-origin: left center;transform-origin: left center; -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1);} #end_nr_bj .main{ padding: 2% 0;} #end_nr_bj .main .float-left ul{ float: left; width: 20%;} #end_nr_bj .main .float-left ul .tit{ font-size: 18px; color: #fff; position: relative; height: 40px;} #end_nr_bj .main .float-left ul li{ line-height: 30px; transition:0.3s;} #end_nr_bj .main .end_wx{ text-align: center;} #end_nr_bj .main .end_wx img{ max-width: 100%;} #end_nr_bj .main .float-right{ font-size: 15px;} #end_nr_bj .main .float-right .pic{ padding-bottom: 5%;} #end_nr_bj .main .float-right .pic img{ max-width: 100%;} @media screen and (max-width:768px){ #end_nr_bj .main .float-right .pic{ padding: 2% 0;} #end_nr_bj .main .float-right{ font-size: 14px;} } #end_line{ height: auto; padding: 10px 0; line-height: 30px; color: #bebebe; text-align: center; border-top: 1px solid rgba(255,255,255,0.1);} .footer_zx{ height:60px; overflow: hidden; right:0; bottom:0; z-index: 20; width:100%; line-height: 25px; position: fixed; background-color:#333;} .footer_zx a{ color:#fff !important; display: block; width: 50%; height: 100%; float: left; text-align: center; background-color:#c40000;} .footer_zx a:last-of-type{ background: #333;} .footer_zx i{ font-size: 28px; padding: 4% 0 1%; font-weight: normal;} .footer_zx p{font-size: 13px;} .kb50{ height: 60px;} @media screen and (max-width:991px){ .footer_zx i{ font-size: 26px; padding: 1.5% 0 1%; font-weight: normal;} } @media screen and (max-width:768px){ .footer_zx i{ font-size: 26px; padding: 4% 0 1%; font-weight: normal;} } /*首页*/ .tit_in{ text-align: center; position: relative;} .tit_in h1{ color: #c40000; font-size: 30px; position: relative; z-index: 2;} .tit_in p{ position: absolute; z-index: 1; width: 100%; top: -15px; color: rgba(204,204,204,0.3); font-family: '思源宋体'; font-size: 46px; font-weight: bold; text-transform: uppercase;} .tit_in i{ font-size: 15px; color: rgba(0,0,0,0.5); } @media screen and (max-width:768px){ .tit_in p{ font-size: 30px;} .tit_in h1{ font-size: 22px;} .tit_in i{ font-size: 12px;} } #huanjing{ margin-top: 3%;} #huanjing .swiper-container { width: 100%; height: auto; margin-left: auto; margin-right: auto;} #huanjing .swiper-slide { background-size: cover; background-position: center; position: relative;} #huanjing .gallery-top { background: #f7f8fc; height: auto; width: 100%; margin: 2% 0; padding-bottom: 5%; position: relative;} #huanjing .gallery-top:before{ position: absolute; left: 5%; top: 25%; content: 'PRODUCT center'; text-transform: uppercase; color: rgba(204,204,204,0.1); font-size: 160px; width: 100%; font-family: Impact; letter-spacing: 3px;} #huanjing .gallery-top .swiper-slide{ padding: 5% 5% 0;} #huanjing .gallery-top .swiper-slide .font .tit{ position: relative; color: #333333; font-size: 36px; padding-bottom: 4%;} #huanjing .gallery-top .swiper-slide .font .tit:before{ position: absolute; left: 0; bottom: 0; width: 10%; height: 3px; background: #c40000; content: '';} #huanjing .gallery-top .swiper-slide .font dl{ padding: 15% 0 0;} #huanjing .gallery-top .swiper-slide .font dl dt{ font-weight: normal; color: #666666; font-size: 16px; line-height: 35px;} #huanjing .gallery-top .swiper-slide .font dl dt i{ float: left; font-size: 12px; padding-right: 10px;} #huanjing .gallery-top .swiper-slide .pic li{ width: 100%; height: 0; padding-bottom: 65%; position: relative; overflow: hidden;} #huanjing .gallery-top .swiper-slide .pic li img{ width: 100%; height: 100%; object-fit: cover; left: 0; position: absolute; text-align: center; transition: 0.3s;} #huanjing .gallery-top .swiper-slide .pic li:hover img{ transform: scale(1.1);} #huanjing .gallery-top .cpfont{ padding: 0 5%;} #huanjing .gallery-top .cpfont .cp_tel{ padding-top: 2%;} #huanjing .gallery-top .cpfont .tel_font i{ float: left; color: #c40000; font-size: 90px; margin: 4% 1% 0 0;} #huanjing .gallery-top .cpfont .tel_font{ color: #666666; font-size: 16px;} #huanjing .gallery-top .cpfont .tel_font p{ color: #c40000; font-size: 32px; font-family: Impact;} #huanjing .gallery-top .cpfont .cp_tel .zx{ height: 45px; background: #333333; line-height: 45px; color: #fff; text-align: center; position: relative; margin-top: 3%; width: 85%; } #huanjing .gallery-top .cpfont .cp_tel .zx a{ position: relative; z-index: 1; color: #fff !important;} #huanjing .gallery-top .cpfont .cp_tel .zx:after{position: absolute; width: 100%; height: 0; content: ''; background-color: #c40000; left: 0; bottom: 0; transition: 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);} #huanjing .gallery-top .cpfont .cp_tel .zx:hover:after { height: 100%;width: 100%;} #huanjing .gallery-top .cpfont ul{ padding-top: 5%;} #huanjing .gallery-top .cpfont ul li{ text-align: center; cursor: pointer;} #huanjing .gallery-top .cpfont ul li p{ display: inline-block; width: 60px; height: 60px; line-height: 60px; transition: 0.3s; border-radius: 100%; border: 1px solid #a1a1a2;} #huanjing .gallery-top .cpfont ul li p i{ font-size: 30px; color: #a1a1a2; transition: 0.3s;} #huanjing .gallery-top .cpfont ul li span{ display: inline-block; color: #666666; line-height: 40px;} #huanjing .gallery-top .cpfont ul li:hover p{ background: #c40000; border: 1px solid #c40000;} #huanjing .gallery-top .cpfont ul li:hover p i{ color: #fff;} #huanjing .gallery-thumbs { height: auto; text-align: center; box-sizing: border-box;} #huanjing .gallery-thumbs .swiper-slide { cursor: pointer; padding: 2% 0; transition:0.3s;} #huanjing .gallery-thumbs .swiper-slide .icon{ display: inline-block; background: url("../images/cpicon.png") no-repeat center top; background-size: 100%; width: 40px; height: 40px;} #huanjing .gallery-thumbs .swiper-slide .tit{ color: #333333; font-size: 18px; transition: 0.3s; line-height: 22px;} #huanjing .gallery-thumbs .swiper-slide .tit span{ color: #c1c1c1; font-size: 12px; text-transform: uppercase;} #huanjing .gallery-thumbs .swiper-slide:hover .tit{ color: #c40000;} #huanjing .gallery-thumbs .swiper-slide:hover .tit span{ color: #c40000;} #huanjing .gallery-thumbs .swiper-slide:hover .icon{ background: url("../images/cpicon1.png") no-repeat center top; background-size: 100%;} #huanjing .gallery-thumbs .swiper-slide-thumb-active .tit{ color: #c40000;} #huanjing .gallery-thumbs .swiper-slide-thumb-active .tit span{ color: #c40000;} #huanjing .gallery-thumbs .swiper-slide-thumb-active .icon{ background: url("../images/cpicon1.png") no-repeat center top; background-size: 100%;} @media screen and (max-width:1200px){ #huanjing .gallery-top .cpfont .tel_font i{ font-size: 80px; margin-top: 6%;} #huanjing .gallery-top .cpfont .tel_font p{ font-size: 28px;} #huanjing .gallery-top .cpfont ul li{ padding-bottom: 1%;} } @media screen and (max-width:1000px){ #huanjing .gallery-top .swiper-slide .font dl{ padding: 5% 0 0;} #huanjing .gallery-top .cpfont{ padding: 5% 5% 0;} } @media screen and (max-width:768px){ #huanjing .gallery-top .swiper-slide{ padding-top: 10%;} #huanjing .gallery-top .swiper-slide .font .tit{ font-size: 26px;} #huanjing .gallery-top:before{ display: none;} #huanjing .gallery-top .cpfont .tel_font i{ font-size: 70px;} #huanjing .gallery-top .cpfont .tel_font p{ font-size: 24px;} #huanjing .gallery-top .swiper-slide .font dl dt{ font-size: 14px;} } #albj{ background: url("../images/albj.jpg") repeat center fixed;} #albj .tit_in h1{ color: #fff;} #albj .tit_in i{ color: rgba(255,255,255,0.5);} #mtbd{ margin-top: 3%;} #mtbd .swiper-container { margin: 0; width: 100%; height: 100%; padding-bottom: 5%; } #mtbd .swiper-slide { transition: 0.3s; position: relative; background: #fff; cursor: pointer; border-bottom: 2px solid #c40000; /* Center slide text vertically */ flex-direction: column; 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; } #mtbd .swiper-slide .pic{ width: 100%; height: 0; padding-bottom: 68%; position: relative; overflow: hidden;} #mtbd .swiper-slide .pic img{ width: 100%; height: 100%; object-fit: cover; left: 0; position: absolute; transition:0.3s;} #mtbd .swiper-slide .news_title{ color: #333333; font-size: 20px; text-align: center; line-height: 60px; overflow: hidden; text-overflow: ellipsis; white-space: pre; transition: 0.3s; border-bottom: 1px solid #e6e6e6; position: relative;} #mtbd .swiper-slide .news_title:before{ position: absolute; width: 20%; left: 40%; bottom: 0; content: ''; height: 1px; background: #c40000; transition: 0.3s;} #mtbd .swiper-slide .content{ width: 100%; color: #999999; text-align: center; padding: 3% 0;} #mtbd .swiper-slide .more{ margin: 0 auto; color: #fff; background: #c40000; border-radius: 20px; text-align: center; width: 140px; height: 35px; line-height: 35px; transition: 0.3s;} #mtbd .swiper-slide:hover .news_title:before{ width: 100%; left: 0; height: 2px; } #mtbd .swiper-slide:hover .more{ background: #333; width: 160px; letter-spacing: 3px;} #mtbd .swiper-pagination{ bottom: 0;} #mtbd .swiper-pagination .swiper-pagination-bullet{ width: 38px; height: 6px; border-radius: 2px; background: #fff; opacity: 0.5;} #mtbd .swiper-pagination .swiper-pagination-bullet-active{ background: #c40000; opacity: 1;} @media screen and (max-width:768px){ #mtbd .swiper-container{ padding-bottom: 8%;} #mtbd{ padding: 0 5%;} } #whybj{ background: url("../images/ysbj.jpg") no-repeat center top;} #why_font{ margin-top: 3%;} #why_font .swiper-container { margin: 0; width: 100%; height: 100%; } #why_font .swiper-slide { transition: 0.5s; position: relative; cursor: pointer; padding: 5% 0; border: 1px solid #fbfcfc; /* Center slide text vertically */ flex-direction: column; 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; } #why_font .swiper-slide .news_title{ margin-top: 3%; color: #333333; font-size: 22px; text-align: center; line-height: 60px; overflow: hidden; text-overflow: ellipsis; white-space: pre; transition: 0.3s; position: relative;} #why_font .swiper-slide .news_title:before{ position: absolute; width: 40%; left: 30%; bottom: 0; content: ''; height: 1px; background: #333333; transition: 0.3s;} #why_font .swiper-slide .content{ width: 100%; color: #666666; text-align: center; padding: 8% 0;} #why_font .swiper-slide:hover .news_title:before{ width: 100%; left: 0;} #why_font .swiper-slide .more{ width: 150px; height: 40px; line-height: 40px; border-radius: 20px; text-align: center; transition: 0.3s; overflow: hidden;} #why_font .swiper-slide .more a{ opacity: 0; transition: 0.3s;} #why_font .swiper-slide .more i{ color: #c40000; font-size: 35px;} #why_font .swiper-slide:hover{ background: #fff; border: 1px solid #e3e3e3; border-bottom: none;} #why_font .swiper-slide:hover .more{ background: #c40000;} #why_font .swiper-slide:hover .more a{ opacity: 1; color: #fff;} #why_font .swiper-slide:hover .more i{ display: none;} .social-btns .btn,.social-btns .btn:before,.social-btns .btn .fa { transition: all 0.35s; transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);} .social-btns .btn:before { top: 90%; left: -110%; background-color: #cb2f30;} .social-btns .btn .fa { -webkit-transform: scale(0.8); transform: scale(0.8); color: #cc0000;} .social-btns { height: 87px; margin: auto; font-size: 0; text-align: center;} .social-btns .btn { display: inline-block; border: 1px solid #666666; padding: 0; width: 85px; height: 85px; line-height: 85px; margin: 0 10px; text-align: center; position: relative; overflow: hidden; border-radius: 100%; box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.1); opacity: 0.99;} .social-btns .btn:before { content: ""; width: 120%; height: 120%; position: absolute; -webkit-transform: rotate(45deg); transform: rotate(45deg);} .social-btns .btn .fa { font-size: 38px; vertical-align: middle; color: #666666;} #why_font .swiper-slide:hover .social-btns .btn{ border: 1px solid #cb2f30;} #why_font .swiper-slide:hover .social-btns .btn:focus:before,#why_font .swiper-slide:hover .social-btns .btn:before { top: -10%; left: -10%;} #why_font .swiper-slide:hover .social-btns .btn:focus .fa,#why_font .swiper-slide:hover .social-btns .btn .fa { color: #fff; -webkit-transform: scale(1); transform: scale(1);} @media screen and (max-width:768px){ #why_font{ padding: 0 4%;} } #gsjjbj{ background: url("../images/jjbj.jpg") repeat center fixed; padding: 5% 0;} #gsjjbj .row{ margin: 0;} #gsjjbj .main{ background: #fff; padding: 0;} #gsjjbj #gsjj_left{ background: #c40000; position: relative; color: #fff; overflow: hidden; padding: 5% 4%;} #gsjjbj #gsjj_left:before{ position: absolute; left: 2%; bottom: 0; content: 'ABOUT'; text-transform: uppercase; writing-mode: tb; color: rgba(255,255,255,0.1); font-size: 160px; font-weight: bold;} #gsjjbj #gsjj_left .tit{ writing-mode: tb; font-family: '思源宋体'; font-size: 60px; font-weight: bold; float: left;} #gsjjbj #gsjj_left .font{ writing-mode: tb; font-size: 18px; letter-spacing: 7px; float: right; padding: 40% 0 0;} #gsjjbj #gsjj_right{ padding: 4%;} #gsjj_right .gsjj_pic img{ width: 100%;} #gsjj_right .gsjj_font .tit span{ color: #333333; font-size: 30px; font-weight: bold;} #gsjj_right .gsjj_font .tit p{ color: #333333; font-size: 20px;} #gsjj_right .gsjj_font .content{ color: #666666; padding: 10% 0; line-height: 35px; font-size: 15px;} #gsjj_right .gsjj_font .more{ width: 150px; height: 40px; line-height: 40px; background: #c40000; border-radius: 20px; text-align: center; color: #fff; transition: 0.3s; text-transform: uppercase;} #gsjj_right .gsjj_font .more:hover{ background: #333; letter-spacing: 3px;} #gsjj_right ul{ margin-top: 4% !important; text-align: center;} #gsjj_right ul li .num{ display: inline-block; font-size: 54px; font-family: Impact; color: #c40000; height: 60px; line-height: 60px; position: relative;} #gsjj_right ul li .float-left{ float: none !important; display: inline-block; text-align: left; line-height: 25px; padding: 10px 0 0 10px;} #gsjj_right ul li .float-left p{ color: #333; font-size: 20px;} #gsjj_right ul li .float-left span{ display: block; color: #666666;} #gsjj_right ul li:before{ position: absolute; right: 0; top: 0; content: ''; width: 1px; height: 100%; background-image: linear-gradient(#fff, #dedede, #fff);} @media screen and (max-width:1200px){ #gsjjbj #gsjj_left{ padding: 5% 3%;} #gsjjbj #gsjj_left .tit{ font-size: 50px;} #gsjjbj #gsjj_left .font{ font-size: 16px; line-height: 25px;} #gsjj_right ul li .num{ font-size: 44px;} #gsjj_right ul li .float-left p{ font-size: 16px;} #gsjj_right ul li .float-left span{ font-size: 12px;} } @media screen and (max-width:1000px){ #gsjj_right .gsjj_font .content{ padding: 3% 0;} .gsjj_pic{ padding-top: 3%;} #gsjj_right ul li:nth-of-type(2n):before{ display: none;} #gsjj_right ul li .num{ font-size: 46px;} #gsjj_right ul li .float-left p{ font-size: 16px;} } @media screen and (max-width:768px){ #gsjj_right ul li .num{ font-size: 40px;} } #news_in{ margin-top: 3%;} #news_in .swiper-container { margin: 0; width: 100%; height: 100%; padding-bottom: 5%; } #news_in .swiper-slide { transition: 0.3s; position: relative; background: #f4f3f4; cursor: pointer; overflow: hidden; /* Center slide text vertically */ flex-direction: column; 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; } #news_in .swiper-slide .row{ margin: 0; width: 100%;} #news_in .swiper-slide .news_time span{ display: block; color: #666666; font-size: 16px;} #news_in .swiper-slide .news_time{ color: #000000; font-size: 26px; font-weight: bold; text-align: right; padding: 5% 3% 0; background: url("../images/xwicon.png") no-repeat 20% 85%; transition: 0.3s;} #news_in .swiper-slide .font{ text-align: left; padding: 5%;} #news_in .swiper-slide .news_title{ color: #333333; font-size: 18px; line-height: 30px; overflow: hidden; text-overflow: ellipsis; white-space: pre; transition: 0.3s; font-weight: bold;} #news_in .swiper-slide .content{ width: 100%; color: #999999; padding: 5% 0;} #news_in .swiper-slide .more{ color: #c6c6c6; transition: 0.3s;} #news_in .swiper-slide .more i{ font-size: 35px; transition: 0.3s;} #news_in .swiper-slide:before{content:''; position:absolute; left:0; right:0; top:0; bottom:0; background:url("../images/xwbj.jpg") no-repeat center top; opacity:0; transition: 0.5s;} #news_in .swiper-slide:hover:before{ opacity: 1; background:url("../images/xwbj.jpg") no-repeat center bottom;} #news_in .swiper-slide:hover .news_time{ background: url("../images/xwicon1.png") no-repeat left 85%; color: #fff;} #news_in .swiper-slide:hover .news_title{ color: #fff;} #news_in .swiper-slide:hover .news_time span,#news_in .swiper-slide:hover .content,#news_in .swiper-slide:hover .more i{ color: #fff;} #news_in .swiper-pagination{ bottom: 0;} #news_in .swiper-pagination .swiper-pagination-bullet{ width: 38px; height: 6px; border-radius: 2px; background: #c5c5c5; opacity: 0.5;} #news_in .swiper-pagination .swiper-pagination-bullet-active{ background: #c40000; opacity: 1;} @media screen and (max-width:768px){ #news_in .swiper-container{ padding-bottom: 8%;} #news_in{ padding: 0 5%;} } #hzal{ position: relative;} #hzal .swiper-container { width: 100%; height: 100%; padding: 3% 0 0; } #hzal .swiper-slide { text-align: center; overflow: hidden; transition: 0.3s; /* Center slide text vertically */ flex-direction: column; 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; } #hzal .swiper-slide .pic{ width: 100%; height: 0; padding-bottom: 50%; position: relative; overflow: hidden; border: 1px solid #e6e6e6; background: #fff;} #hzal .swiper-slide .pic img{ width: 100%; height: 100%; object-fit: cover; left: 0; position: absolute; text-align: center; transition: 0.3s;} #hzal .swiper-slide:hover .pic img{ transform: scale(1.1);} #hzal .swiper-slide:hover{ filter: drop-shadow(-8px 5px 8px rgba(153, 153, 153, 0.2));} @media screen and (max-width:768px){ #hzal .swiper-container{ padding: 3% 5%;} } #jjwt{ position: relative;} #jjwt .swiper-container { width: 100%; height: auto; margin-left: auto; margin-right: auto;} #jjwt .swiper-slide { background-size: cover; background-position: center;} #jjwt .gallery-top { height: 80%; width: 100%; position: relative;} #jjwt .gallery-top .tit_in{ position: absolute; z-index: 9; width: 100%; margin-top: 20px; top: 10%;} #jjwt .gallery-top .tit_in h1{ color: #fff;} #jjwt .gallery-top .tit_in i{ color: rgba(255,255,255,0.5);} #jjwt .gallery-top img{ width: 100%;} #jjwt .jjwt_font{ position: absolute; bottom: 0; z-index: 9; width: 100%; border-top: 1px solid rgba(255,255,255,0.3);} #jjwt .gallery-thumbs { height: 20%; box-sizing: border-box;} #jjwt .gallery-thumbs .swiper-slide { width: 25%; height: 100%; padding: 3%; cursor: pointer; opacity: 1; text-align: center; color: #fff; border-right: 1px solid rgba(255,255,255,0.3);} #jjwt .gallery-thumbs .swiper-slide .pic{ transition: 0.3s;} #jjwt .gallery-thumbs .swiper-slide .pic img{ max-width: 100%;} #jjwt .gallery-thumbs .swiper-slide .tit{ font-size: 18px; padding: 6% 0 1%;} #jjwt .gallery-thumbs .swiper-slide-thumb-active { background: rgba(255,255,255,0.15);} #jjwt .gallery-thumbs .swiper-slide-thumb-active .pic{ transform: translateY(-10px);} @media screen and (max-width:1200px){ #jjwt .gallery-top img{ width: 150%;} } @media screen and (max-width:900px){ #jjwt .gallery-top img{ width: 200%;} #jjwt .gallery-thumbs .swiper-slide .pic img{ max-width: 30%;} #jjwt .gallery-top .tit_in h1{ font-size: 18px;} } @media screen and (max-width:600px){ #jjwt .gallery-top img{ width: 280%;} #jjwt .gallery-thumbs .swiper-slide .tit{ font-size: 14px;} #jjwt .gallery-thumbs .swiper-slide .content{ font-size: 12px; line-height: 20px;} } /*公司简介*/ #zi_banner{ width: 100%; height: auto; position: relative;} #zi_banner .pic{ text-align: center; overflow: hidden;} #zi_banner .pic img{ width: 100%;} @media screen and (max-width:1200px){ #zi_banner .pic img{ width: 100%;} } @media screen and (max-width:768px){ #zi_banner .pic img{ width: 150%; margin-left: -20%;} } .home{ width: 100%; height: 100px; left: 0; bottom: -60px; z-index: 1;} .home .container{ height: 80px; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.1);} .home .row{ margin: 0;} .home ul{ } .home ul li{ float: right; color: #666666; line-height: 80px; padding: 0 2%; font-size: 14px; position: relative;} .home ul li a{ color: #666666;} .home ul li i{ float: left; padding-right: 10px; font-size: 20px;} .home ul li:before{ position: absolute; left: 50%; bottom: 0; content: ''; height: 3px; background: #c40000; width: 0; transition: 0.3s;} .home ul li:hover:before{ left: 20%; width: 60%;} .home ul li:hover a{ color: #c40000;} .home .home_con{ line-height: 80px; color: #666666;} .home .home_con a{ color: #666666; padding: 0 5px;} .home .home_con a:hover{ color: #c40000;} .home .home_con i{ display: inline-block; color: #999999; font-size: 20px; padding-right: 10px;} @media screen and (max-width:1200px){ .home ul li{ padding: 0 2%; font-size: 14px;} } @media screen and (max-width:1000px){ .home ul li{ padding: 0 1%;} } @media screen and (max-width:991px){ .home ul li{ padding: 0 2%; float: left;} } @media screen and (max-width:765px){ .home ul{ padding: 0; width: 100%;} .home ul li{ font-size: 12px; width: 33%; line-height: 40px;} .home ul li:hover:before{ left: 0; width: 100%;} } .hui{ background: #fafafa;} .tit_jj{ text-align: center; line-height: 55px;} .tit_jj p{ color: #333333; font-size: 40px; font-weight: bold;} .tit_jj span{ color: #999999; font-size: 16px; text-transform: uppercase;} @media screen and (max-width:1200px){ .tit_jj p{ font-size: 30px;} } @media screen and (max-width:768px){ .tit_jj{ line-height: 30px;} .tit_jj p{ font-size: 20px;} .tit_jj span{ font-size: 12px;} } .jj_ys{ padding: 5% 0;} .jj_ys li{ background: #fff; border-radius: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.1); position: relative; padding: 20% 10% 10%;} .jj_ys li .pic{ position: absolute; width: 100%; top: -50px; left: 0; text-align: center;} .jj_ys li .pic p{ display: inline-block; width: 110px; height: 110px; border-radius: 100%; background: #c40000; text-align: center; line-height: 110px; color: #fff; transition: 0.3s;} .jj_ys li .pic p i{ font-size: 55px; transition: 0.6s;} .jj_ys li .tit{ color: #333333; font-size: 20px; font-weight: bold; text-align: center; position: relative; height: 40px;} .jj_ys li .tit:before{ position: absolute; content: ''; width: 20%; left: 40%; height: 2px; bottom: 0; background: #c40; transition: 0.3s;} .jj_ys li .content{ color: #666666; text-align: center; padding-top: 5%; line-height: 35px;} .jj_ys li:hover .pic p{ background: #333;} .jj_ys li:hover .tit:before{ left: 0; width: 100%;} .jj_ys li:hover .pic p i{ transform: rotate(360deg); } #shili{ margin-top: 3%;} #shili .swiper-container { margin: 0; width: 100%; height: 100%; padding-bottom: 5%; } #shili .swiper-slide { transition: 0.3s; position: relative; cursor: pointer; /* Center slide text vertically */ flex-direction: column; 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; } #shili .swiper-slide .font{ background: #fff; border-radius: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.1); position: relative; padding: 20% 10% 10%; margin: 50px 10px 10px;} #shili .swiper-slide .pic{ position: absolute; width: 100%; top: -50px; left: 0; text-align: center;} #shili .swiper-slide .pic p{ display: inline-block; width: 110px; height: 110px; border-radius: 100%; background: #c40000; text-align: center; line-height: 110px; color: #fff; transition: 0.3s;} #shili .swiper-slide .pic p i{ font-size: 55px; transition: 0.6s;} #shili .swiper-slide .tit{ color: #333333; font-size: 20px; font-weight: bold; text-align: center; position: relative; height: 40px;} #shili .swiper-slide .tit:before{ position: absolute; content: ''; width: 20%; left: 40%; height: 2px; bottom: 0; background: #c40; transition: 0.3s;} #shili .swiper-slide .content{ color: #666666; text-align: center; padding-top: 5%; line-height: 35px;} #shili .swiper-slide:hover .pic p{ background: #333;} #shili .swiper-slide:hover .tit:before{ left: 0; width: 100%;} #shili .swiper-slide:hover .pic p i{ transform: rotate(360deg); } @media screen and (max-width:768px){ #shili .swiper-container{ padding-bottom: 8%;} #shili{ padding: 0 5%;} #shili .swiper-slide .content{ line-height: 30px; font-size: 12px;} } .vrpic{ position: relative; cursor: pointer; overflow: hidden;} .vrpic .pic img{ width: 100%; transition: 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);} .vrpic:hover .pic img{transform: scale(1.1);} @media screen and (max-width:991px){ .vrpic .pic img{ width: 150%; margin-left: -20%;} } @media screen and (max-width:768px){ .vrpic .pic img{ width: 250%; margin-left: -73%;} } .hi-icon-wrap { position: absolute; left: 0; top: 0; text-align: center; width: 100%; margin: 0 auto; padding: 6% 0 0; } .hi-icon { display: inline-block; font-size: 0px; cursor: pointer; margin: 15px 30px; width: 160px; height: 160px; line-height: 160px; border-radius: 100%; text-align: center; position: relative; z-index: 1; color: #fff; } .hi-icon img{ display: inline-block;} .hi-icon:after { pointer-events: none; position: absolute; width: 100%; height: 100%; border-radius: 100%; content: ''; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .hi-icon:before { font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; display: block; -webkit-font-smoothing: antialiased; } .hi-icon-effect-8 .hi-icon { background: rgba(255,255,255,0.3); -webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s; -moz-transition: -moz-transform ease-out 0.1s, background 0.2s; transition: transform ease-out 0.1s, background 0.2s; } .hi-icon-effect-8 .hi-icon:after { top: 0; left: 0; padding: 0; z-index: -1; box-shadow: 0 0 0 2px rgba(255,255,255,0.1); opacity: 0; -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); } .vrpic:hover .hi-icon-effect-8 .hi-icon { background: rgba(255,255,255,0.05); color: #fff; } .vrpic:hover .hi-icon-effect-8 .hi-icon:after { -webkit-animation: sonarEffect 1.3s ease-out 75ms; -moz-animation: sonarEffect 1.3s ease-out 75ms; animation: sonarEffect 1.3s ease-out 75ms; } @-webkit-keyframes sonarEffect { 0% { opacity: 0.3; } 40% { opacity: 0.5; box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,0.5); } 100% { box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,0.5); -webkit-transform: scale(1.2); opacity: 0; } } @-moz-keyframes sonarEffect { 0% { opacity: 0.3; } 40% { opacity: 0.5; box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,0.5); } 100% { box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,0.5); -moz-transform: scale(1.2); opacity: 0; } } @keyframes sonarEffect { 0% { opacity: 0.3; } 40% { opacity: 0.5; box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,0.5); } 100% { box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,0.5); transform: scale(1.2); opacity: 0; } } #whbj{ background: url("../images/wh_bj.jpg") repeat center fixed; background-size: 100%; padding: 5% 0;} .qywh{ background: #fff; padding: 3%;} .qywh .tit{ color: #333333; font-size: 24px; font-weight: bold; margin-bottom: 3%;} .qywh .tit i{ float: left; color: #c40; font-size: 30px; margin-right: 10px;} .qywh .wh_con{ line-height: 38px; font-size: 15px;} .qywh ul li{ text-align: center; width: 50%; float: left; cursor: pointer;} .qywh ul li p{ display: inline-block; width: 85px; height: 85px; border: 1px solid #7c7c7c; color: #7c7c7c; border-radius: 100%; line-height: 85px; transition: 0.3s;} .qywh ul li p i{ font-size: 35px; transition: 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);} .qywh ul li span{ display: block; height: 50px; line-height: 40px; color: #7c7c7c; font-size: 16px; } .qywh ul li:hover p{ border: 1px solid #c40;} .qywh ul li:hover p i{ color: #c40; transform: rotate(360deg);} .qywh ul li:hover span{ color: #c40;} @media screen and (max-width:768px){ #whbj{ padding: 15% 15px;} } #fzlc{ margin-top: 2%;} #fzlc .swiper-container { width: 100%; height: 300px; margin-left: auto; margin-right: auto;} #fzlc .gallery-top { height: 80%; width: 100%; background: #fff; box-shadow: 0 0 15px rgba(0,0,0,0.08); border-radius: 10px;} #fzlc .gallery-top .swiper-slide{ padding: 4% 13%; text-align: center; color: #333333; font-size: 16px; line-height: 35px; } #fzlc .gallery-thumbs { height: auto; box-sizing: border-box; margin-top: 2%;} #fzlc .zzjg_font{ background: url("../images/lc.png") repeat-x center top;} #fzlc .gallery-thumbs .swiper-slide { height: 80px; line-height: 130px; opacity: 1; background: url("../images/lc.png") repeat-x center top #fff; text-align: center; color: #999999; font-size: 24px;} #fzlc .gallery-thumbs .swiper-slide-thumb-active { opacity: 1; background: url("../images/lc_hover.png") repeat-x center top #fff; color: #c40;} #fzlc .swiper-button-prev,#fzlc .swiper-button-next{ background: none; width: 45px; height: 45px; background: #c40000; border-radius: 100%; line-height: 45px; text-align: center; transition: 0.3s;} #fzlc .swiper-button-prev i,#fzlc .swiper-button-next i{ font-size: 30px; color: #fff;} #fzlc .swiper-button-prev{ left: 3%;} #fzlc .swiper-button-next{ right: 3%;} #fzlc .swiper-button-prev:hover,#fzlc .swiper-button-next:hover{ background: #333;} @media screen and (max-width:768px){ #fzlc .swiper-button-prev,#fzlc .swiper-button-next{ display: none;} #fzlc .gallery-top .swiper-slide{ font-size: 13px; line-height: 25px; padding: 4% 5%;} #fzlc .gallery-thumbs{ margin-top: 5%;} #fzlc .gallery-thumbs .swiper-slide{ font-size: 16px; line-height: 110px;} } #rybj{ background: url("../images/rybj.jpg") repeat-y center fixed;} #zzry{ margin-top: 2%;} #zzry .swiper-container { margin: 0; width: 100%; height: 100%; } #zzry .swiper-slide { transition: 0.3s; position: relative; background: #fff; cursor: pointer; border: 1px solid #dedede; /* Center slide text vertically */ flex-direction: column; 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; } #zzry .swiper-slide .pic{ width: 100%; height: 0; padding-bottom: 75%; background: #fff; position: relative; overflow: hidden;} #zzry .swiper-slide .pic p{ width: 100%; height: 100%; object-fit: cover; left: 0; position: absolute; text-align: center;} #zzry .swiper-slide .pic img{ max-width: 100%; height: 100%; transition:0.3s;} #zzry .swiper-slide .tit{ height: 50px; line-height: 50px; background: #dedede; font-size: 16px; width: 100%; text-align: center; transition: 0.3s;} #zzry .swiper-slide:hover .tit{ background: #c40000; color: #fff;} @media screen and (max-width:768px){ #zzry .swiper-container{ padding-bottom: 8%;} #zzry{ padding: 0 5%;} } #fuwu{ margin-top: 2% !important;} #fuwu li{ background: #f9f9f9; padding: 3.5%;} #fuwu li:nth-of-type(2),#fuwu li:nth-of-type(3),#fuwu li:nth-of-type(6){ background: #f2f2f2;} #fuwu li .tit{ color: #333333; font-size: 24px; font-weight: bold;} #fuwu li .content{ color: #333333; line-height: 33px; padding-top: 4%; font-size: 15px;} #fuwu li .pic{ text-align: center;} @media screen and (max-width:768px){ #fuwu li{ padding: 5% 3%;} #fuwu li:nth-of-type(2n){ background: #f2f2f2;} #fuwu li:nth-of-type(3){ background: #f9f9f9;} #fuwu li .tit{font-size: 22px;} #fuwu li .content{ font-size: 13px; line-height: 25px;} } #cpnr_lb .swiper-container { margin: 0; width: 100%; height: 100%; } #cpnr_lb .swiper-slide { transition: 0.3s; position: relative; background: #f4f4f4; cursor: pointer; overflow: hidden; text-align: center; border: 1px solid #e7e7e7; padding: 1% 0; /* Center slide text vertically */ flex-direction: column; 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; } #cpnr_lb .swiper-slide p{ color: #333333; font-size: 18px;} #cpnr_lb .swiper-slide p i{ display: inline-block; font-size: 25px; margin-right: 10px;} #cpnr_lb .swiper-slide span{ display: block; color: #c1c1c1; font-size: 14px; text-transform: uppercase;} #cpnr_lb .swiper-slide:hover{ background: #c40000;} #cpnr_lb .swiper-slide:hover p{ color: #fff;} #cpnr_lb .swiper-slide:hover span{ color: #fff;} @media screen and (max-width:768px){ #cpnr_lb{ padding: 0 5%;} #cpnr_lb .swiper-slide p{ font-size: 16px;} #cpnr_lb .swiper-slide p i{ font-size: 22px;} #cpnr_lb .swiper-slide span{ font-size: 12px;} } .cp_con li{ border: 1px solid #eceae9; transition: 0.3s;} .cp_con li .pic{ width: 100%; height: 0; padding-bottom: 75%; position: relative; overflow: hidden; background: #fff;} .cp_con li .pic img{ width: 100%; height: 100%; object-fit: cover; left: 0; position: absolute; text-align: center; transition:0.3s; } .cp_con li .pic:before{ position: absolute; left: 0; top: 0; content: ''; width: 100%; height: 100%; border: 10px solid #fff; z-index: 1; opacity: 0;transition: 0.5s;} .cp_con li .tit{ color: #333333; font-size: 16px; text-align: center; font-weight: bold; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; height: 50px; line-height: 50px; margin: 3% auto 5%; position: relative;} .cp_con li .tit:before{ position: absolute; left: 45%; bottom: 0; width: 10%; content: ''; height: 2px; background: #c40000; transition: 0.3s;} .cp_con li dl{ text-align: center;} .cp_con li dl dt{ float: left; width: 45%; margin: 0 1%; height: 35px; line-height: 35px; border: 1px solid #333333; background: #333333; color: #fff; font-size: 14px; transition:0.3s; font-weight: normal;} .cp_con li dl dt i{ display: inline-block; margin-right: 10px;} .cp_con li dl dt a{ color: #fff;} .cp_con li dl dt:last-of-type{ float: right; border: 1px solid #999999; color: #999999; background: none;} .cp_con li dl dt:last-of-type a{ color: #999999;} .cp_con li:hover{ box-shadow: -5px 8px 10px rgba(204,204,204,0.7); background: #333333;} .cp_con li:hover dl dt{ background: #fff; color: #333; border: 1px solid #fff;} .cp_con li:hover dl dt a{ color: #333;} .cp_con li:hover dl dt:last-of-type{ background: #c40000; border: 1px solid #c40000;} .cp_con li:hover dl dt:last-of-type a{ color: #fff;} .cp_con li:hover .tit{ color: #fff;} .cp_con li:hover .tit:before{ background: #fff;} .cp_con li:hover .pic:before{ opacity: 1;} .cpend_pic{ padding: 0; position: relative; overflow: hidden; cursor: pointer;} .cpend_pic img{ width: 100%; transition: 0.3s;} .cpend_pic .font{ position: absolute; width: 100%; text-align: center; top: 32%;} /*.cpend_pic .font p{ font-size: 30px; font-weight: bold; color: #fff; position: relative; height: 50px;}*/ /*.cpend_pic .font p:before{ position: absolute; content: ''; left: 48%; bottom: 0; width: 4%; height: 2px; background: #fff;}*/ .cpend_pic .font p{ display: inline-block; background: #fff; border-radius: 20px; margin-top: 2% !important; width: 120px; height: 30px; transition: 0.3s; position: relative;} .cpend_pic .font p:after{ position: absolute; content: ''; left: 35%; top: -95%; width: 30%; height: 2px; background: #fff;} .cpend_pic:hover .font p{ background: #c40000; color: #fff;} .cpend_pic:hover .pic img{ transform: scale(1.1);} .cl-effect-5 a { overflow: hidden; padding: 0 4px; height: 1em; position: relative; display: inline-block; margin: 15px 25px; outline: none; color: #fff; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; text-shadow: 0 0 1px rgba(255,255,255,0.3); font-size: 30px; } .cl-effect-5 a:hover, .cl-effect-5 a:focus { outline: none; } .cl-effect-5 a span { position: relative; display: inline-block; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; } .cl-effect-5 a span::before { position: absolute; top: 100%; content: attr(data-hover); font-weight: 700; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .cpend_pic:hover .cl-effect-5 a span, .cpend_pic:hover .cl-effect-5 a:focus span { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); } /*产品中心*/ .cptel i{ float: left; color: #c40000; font-size: 70px; margin: 6% 4% 0 0;} .cptel .left{ padding-left: 10px; line-height: 28px;} .cptel .left p{ color: #666666; font-size: 14px;} .cptel .left span{ color: #c40000; font-size: 28px; font-weight: bold;} @media screen and (max-width:768px){ .cptel .left span{ font-size: 24px;} } .pro-nav { width: 100%; margin: 0 auto; line-height: 70px; } .pro-sub-nav { margin: 0 auto !important; } .pro-sub-nav li { height: 70px; line-height: 70px; display: block; float: left; width: 14%; position: relative; } .pro-sub-nav p{ float: right; width: 11%; height: 45px; background: #c40000; line-height: 45px; text-align: center; color: #fff; margin-top: 12px !important; margin-left: 10px !important; transition: 0.3s;} .pro-sub-nav p:hover{ background: #333; letter-spacing: 3px;} .pro-sub-nav li:after { position: absolute; content: ""; width: 1px; height: 15px; top: 0; bottom:0; right: 0; margin: auto; background: #999 } .pro-sub-nav li:nth-last-of-type(1):after { position: absolute; content: ""; width: 0px; height: 20px; top: 10px; right: 0; } .pro-sub-nav li.current a{ color: #c40000} .pro-sub-nav li.current a:after{ width: 100%; left:0; color: #ff6101} .pro-sub-nav li a { display: block; width: 100%; font-size: 16px; text-align: center; color: #333; transition: all 0.5s; position: relative; } .pro-sub-nav li a:after { position: absolute; content: ""; bottom: 0px; width: 0; height: 2px; background: #c40000; left: 45%; transition: all 0.5s } .pro-sub-nav li a:hover:after { width: 100%; left: 0; } .pro-sub-nav li a:hover { color: #c40000; } .fix li a:hover { color: #c40000; } .fix { transition: all 0.5s; background:rgba(255,255,255,1); position: fixed; left: 0; top: 88px; z-index: 10; box-shadow: 10px 10px 20px rgba(0,0,0,0.3); } .fix li a { color: #333; font-weight: 100 } @media screen and (max-width:768px){ .pro-sub-nav li{ width: 24%; height: 40px; line-height: 40px;} .pro-sub-nav li a{ font-size: 14px;} .pro-sub-nav li:last-of-type{ display: none;} .fix{ top:47px;} } .cptit{ text-align: center; margin: 5% 0; position: relative; padding-top: 2%;} .cptit h1{ color: #c40000; font-size: 50px; font-weight: bold !important; position: relative; z-index: 2; display: inline-block;} .cptit h1:before{ position: absolute; left: -180px; top: 30%; content: ''; background: url("../images/cptit-left.png") no-repeat left top; background-size: 100%; width: 137px; height: 20px;} .cptit h1:after{ position: absolute; right: -180px; top: 30%; content: ''; background: url("../images/cptit-right.png") no-repeat left top; background-size: 100%; width: 137px; height: 20px;} .cptit p{ background-image: linear-gradient(180deg,#f2f2f2,#fff); -webkit-background-clip:text; color: transparent; font-size: 100px; font-family: Impact; position: absolute; top: 0; width: 100%; text-transform: uppercase; height: 100px; padding-top: 30px;} .cptit span{ display: block; color: #666666; font-size: 16px; padding-top: 10px;} @media screen and (max-width:1200px){ .cptit p{ font-size: 66px;} .cptit h1{ font-size: 33px;} } @media screen and (max-width:768px){ .cptit p{ font-size: 38px; padding: 0;} .cptit h1{ font-size: 28px;} .cptit h1:before{ width: 100px; left: -110px;} .cptit h1:after{ width: 100px; right: -110px;} .cptit span{ font-size: 12px; padding: 0;} } #cpend{ background: url("../images/cp_endpic.jpg") no-repeat center fixed; text-align: center; color: #fff; cursor: pointer;} #cpend .main{ padding: 3% 0;} #cpend h1{ font-size: 40px;} #cpend p{ font-size: 16px; letter-spacing: 8px; padding: 1% 0 2%;} #cpend span{ display: inline-block; height: 40px; width: 150px; border-radius: 20px; transition: 0.3s; background: #c40000; color: #fff; line-height: 40px;} #cpend:hover span{ background: #fff; color: #c40000; letter-spacing: 3px;} @media screen and (max-width:768px){ #cpend .main{ padding: 8% 0;} #cpend h1{ font-size: 22px;} #cpend p{ font-size: 12px; letter-spacing: 0;} } .contact_item{ padding:0; text-align: center; margin-top: 3%;} .contact_item li{ display: inline-block; margin-bottom: 30px;} .contact_item li span{display: block;width: 150px;height: 135px;margin:0 auto;text-align: center;position: relative;} .contact_item li span.contact_item_1{background: url(../images/contact_li_bg1.png) center no-repeat;line-height: 108px;} .contact_item li span.contact_item_2{background: url(../images/contact_li_bg2.png) center no-repeat;line-height: 135px;} .contact_item li span.contact_item_3{background: url(../images/contact_li_bg3.png) center no-repeat;line-height: 170px;} .contact_item li span img{vertical-align: middle;} .contact_item_ewm{width: 84px;height: 84px;position: absolute;left: 33px;top:45px;z-index: 1;} .contact_item_ewm img{width: 84px;height: 84px;position: absolute;left: 0;top:0;transition: all .4s;vertical-align: top;} .contact_item li h4{color: #333;font-size: 18px;line-height: 30px; text-align: center;margin: 10px auto !important; font-weight: bold !important;} .contact_item li p{color: #333;font-size: 14px;line-height: 26px;} .contact_item li:nth-child(3n) p{text-align: center;} .in_title{ line-height: 40px; padding: 30px 0 10px; color: #747474; font-size: 16px;} .in_title p{ font-size: 30px; color: #3e3e3e;} .news01 {padding: 0;} .news01 li{ margin-bottom: 7%;} .news01 .imgbox {width: 100%; height: 0; padding-bottom: 70%; position: relative; overflow: hidden;} .news01 .imgbox img { object-fit: cover; left: 0; position: absolute; text-align: center; height:100%; width:100%; transition: 0.3s;} /*.news01 .shuiyin{position: absolute; background: url("../images/shuiyin.png") no-repeat center; z-index: 1; left: 0; top: 0; width: 100%; height: 100%;}*/ .news01 .imgbox1 {width: 100%; height: 0; padding-bottom: 80%; position: relative; overflow: hidden;} .news01 .imgbox1 p { text-align: center; left: 0; position: absolute; height:100%; width:100%; transition: 0.3s;} .news01 .imgbox1 p img{ max-width: 100%; max-height: 100%; transition:0.3s;} .news01 .slide:hover .imgbox img {transform: scale(1.1);} .news01 .txtbox { height: 50px; line-height: 50px; text-align: center; font-size: 16px; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; position: relative; background: #fff; border-bottom: 1px solid #e2e2e2;} .news01 .txtbox span{ display: block; z-index: 1; position: relative; transition:0.3s;} .news01 .txtbox:after { position: absolute;content: ""; background: #c40000; height: 100%; width:100%; left: 0;bottom: 0; transition: all 0.5s; -webkit-transition: transform .5s; -moz-transition: transform .5s; -ms-transition: transform .5s; -o-transition: transform .5s; transition: transform .5s; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: right center; transform-origin: right center; } .news01 .slide:hover .txtbox::after { -webkit-transform-origin: left center; transform-origin: left center; -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); } .news01 .slide:hover .txtbox span{ color: #fff;} #xgcp{ padding: 7% 0 2%;} #xgcp li{ margin-bottom: 10%;} #xgcp li .pic{ width: 100%; height: 0; padding-bottom: 75%; position: relative; overflow: hidden;} #xgcp li .pic img{ width: 100%; height: 100%; object-fit: cover; left: 0; position: absolute; transition: 0.3s;} #xgcp li p{ height: 40px; line-height: 40px; background: #f4f4f4; text-align: center; transition: 0.3s; white-space: nowrap; overflow:hidden; text-overflow: ellipsis;} #xgcp li:hover p{ background: #333; color: #fff;} #xgcp li:hover .pic img{ transform: scale(1.1);} /*公共*/ .pro-sider { float: none; background: #fff;} .pro-sider .in-title { padding: 10% 0; overflow: hidden; text-align: center; background-color: #c40000; color: #fff; line-height: 30px; font-size: 30px; position: relative;} .pro-sider .in-title span{ font-size: 14px; font-family: Arial;} .pro-sider .in-title:before{ position: absolute; left: 0; bottom: -7%; content: 'product'; font-family: Impact; color: rgba(255,255,255,0.1); text-transform: uppercase; width: 100%; font-size: 80px;} .pro-sider-ul { height: auto; text-align: left; background: #fff; padding: 15px; border: 1px solid #ebebeb;} .pro-sider-ul .ul-li{ height: 50px; line-height: 50px; background: #eaeaea; font-size: 16px; padding: 0 5%; margin-top: 2%; transition: 0.3s;} .pro-sider-ul .ul-li i{ float: right; color: #333; font-size: 22px; transition: 0.3s;} .pro-sider-ul ul{ border: 1px solid #eaeaea; border-bottom: none;} .pro-sider-ul ul li{ border-bottom: 1px solid #eaeaea; height: 55px; line-height: 55px; padding: 0 5%; transition: 0.3s;} .pro-sider-ul ul li i{ float: right; color: #333; font-size: 22px; transition: 0.3s;} .pro-sider-ul ul #li-on a,.pro-sider-ul ul #li-on i{ color: #c40000;} .pro-sider-ul #li-on a,.pro-sider-ul #li-on i{ color: #c40000;} .pro-sider-ul .ul-li:hover{ background: #333;} .pro-sider-ul .ul-li:hover a,.pro-sider-ul .ul-li:hover i{ color: #fff;} .pro-sider-ul ul li:hover a,.pro-sider-ul ul li:hover i{ color: #fff;} .pro-sider-ul .top_tel_con{ padding-top: 3%;} .pro-sider-ul .top_tel_con .pic{ float: left; padding-top: 20px;} .pro-sider-ul .top_tel_con .pic i{ color: #c40000; font-size: 65px;} .pro-sider-ul .float-left span{ color: #c40000; font-size: 25px; font-weight: bold;} @media screen and (max-width:768px){ .pro-sider-ul .ul-li{ padding: 3% 0 3% 2%;} .pro-sider-ul .ul-li p{ font-size: 13px;} .pro-sider-ul .ul-li span{ font-size: 12px;} } @media screen and (max-width:1200px){ .pro-sider-ul .ul-li{ font-size: 14px;} .pro-sider .in-title{ font-size: 24px;} .pro-sider-ul .float-left span{ font-size: 20px;} .pro-sider-ul .ul-li i{ display: none;} } @media screen and (max-width:1000px){ .pro-sider-ul .float-left{ font-size: 12px; line-height: 20px;} } .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; }