.slideshow { width: 100%; overflow: hidden; position: relative; } .slideshow img { width: 100%; } .swiper-container { width: 100%; height: 100%; } .slideshow .swiper-slide { cursor: e-resize; } .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 210px; } .swiper-pagination-bullet { width: 75px; height: 10px; border-radius: 10px; background-color: #fff; opacity: 1; } .swiper-pagination-bullet-active { background-color: #ee0808; } .product_center { margin: 100px 0; } .product_center img { width: 80%;margin-bottom:20%; } .product_center_explain h3 { font-size: 32px; color: #000; } .product_center_explain .col-xs-3 div a { height: 38px; line-height: 38px; font-size: 14px!important; color: #fff!important; border-radius: 38px; } .explain_shuoming { color: #666; border-bottom: 1px dotted #b9b9b9; height: 62px; } .explain_shu { height: 49px; line-height: 49px; border-bottom: 1px dotted #b9b9b9; } .explain_tu { height: 175px; margin-top: 52px; } .explain_tu div { cursor: pointer; height: 175px; overflow: hidden; } .explain_tu div img { width: 80%;margin:10%; height: auto; transition: all 1s ease; -moz-transition: all 1s ease; -webkit-transition: all 1s ease; -o-transition: all 1s ease; } .explain_tu div.swiper-slide-thumb-active img { transform: scale(1.2) } .explain_tu div.swiper-slide-thumb-active { border: 1px solid #15569d; } .video_box { height: 157px; background-color: #efefef; display: flex; justify-content: space-between; align-items: center; padding: 0 10px; } .video_box:hover i { color: #ff0000; visibility: visible!important; transition: all .4s; } .video_box:hover { background-color: #fff; box-shadow: 1px 1px 2px 2px #efefef; transition: all .4s; } .video_box i { font-size: 56px; color: #000; } .video_box_zi { display: flex; flex-direction: column; } .video_box_zi h4 { font-size: 24px; } .video_box_zi p { font-size: 14px; color: #666; } .about_t { height: 102px; display: flex; justify-content: space-between; align-items: center; } .about_t span { font-size: 54px; } .about_t a { width: 144px; height: 38px; line-height: 38px; font-size: 14px; background-color: #e9e9e9; border-radius: 38px; } .about p { color: #666; } .about img { display: block; height: 403px; } .capacity { background-color: #efefef; } .capacity_c { height: 405px; padding-top: 143px; padding-left: 0; } .capacity_cn { height: 186px; background-color: #fff; display: flex; justify-content: space-between; } .capacity_c img { width: 202px; } .capacity_c p { margin: 44px 0 0 44px; font-size: 16px; color: #666; } .news_t { height: 70px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #efefef; } .news_t span { font-size: 32px; } .news_t a { width: 142px; height: 35px; line-height: 35px; font-size: 14px; background-color: #efefef; border-radius: 35px; } .news_b { padding-top: 60px; } .news_b div:nth-child(1) { font-size: 26px; color: #d9d9d9; height: 46px; } .news_b div:nth-child(2) { font-size: 18px; color: #000; height: 37px; } .news_b div:nth-child(3) { font-size: 14px; color: #999; height: 23px; } .news_b div:nth-child(4) { display: inline-block; font-size: 14px; color: #ff0000; margin-top: 43px; border-bottom: 2px solid #ff0000; } .slideshow .swiper-button-prev, .slideshow .swiper-button-next { color: #000; font-size: 48px; opacity: 0; transition: all .3s; display: none; } .slideshow .swiper-button-prev, .swiper-container-rtl .swiper-button-next { left: 90px; right: auto; transition: all .3s; } .slideshow .swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: 90px; left: auto } .slideshow:hover .swiper-button-prev, .slideshow:hover .swiper-button-next { opacity: 1; } .slideshow:hover .swiper-button-prev, .swiper-container-rtl .swiper-button-next { left: 70px; } .slideshow:hover .swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: 70px; } .czjz { display: flex; align-items: center; } .hauto { height: 100%; } .textwz { margin-top: -300px !important; } .swiper-button-next, .swiper-button-prev { top: 40%; } .text-box { color: #000; width: 80% } .textwz .text-box { width: 100%;} .text-box h3 { font-size: 52px; font-weight: bold; margin-bottom: 20px; } .text-box h3 span { color: #ff0000 } .text-box h3 p { line-height: 1; width: 100%; } .text-box .stit { line-height: 26px; padding: 0; margin: 0 } .text-box p { line-height: 26px; padding: 0; margin: 0 } .text-box img { width: auto; padding: 20px 0; } .btndiy { width: 210px; border-radius: 25px; margin-top: 20px; overflow: hidden; text-align: center; } .btndiy a { display: block; padding: 15px; color: #fff; font-size: 18px; } footer .logo .hvr-bounce-to-right{ background: #fff; } .hvr-bounce-to-right { background: #111; display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translatez(0); transform: perspective(1px) translatez(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: .5s; transition-duration: .5s; } .hvr-bounce-to-right:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #ff0000; -webkit-transform: scalex(0); transform: scalex(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: .5s; transition-duration: .5s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-bounce-to-right:active:before, .hvr-bounce-to-right:focus:before, .hvr-bounce-to-right:hover:before { -webkit-transform: scalex(1); transform: scalex(1); -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, .37, .66); transition-timing-function: cubic-bezier(0.52, 1.64, .37, .66) } .slideshow .swiper-slide .text-box { display: none } .slideshow .swiper-slide-active .text-box { display: block; } .slideshow .wzfb .text-box { color: #fff; } .slideshow .swiper-slide:nth-of-type(2) .text-box .hvr-bounce-to-right { background: #fff; } .slideshow .swiper-slide:nth-of-type(2) .text-box .btndiy a { color: #000; } .slideshow .swiper-slide:nth-of-type(2) .text-box .btndiy:hover a { color: #fff; } @media screen and (max-width: 1280px) { .slideshow .swiper-button-prev, .slideshow .swiper-button-next { display: none; } .text-box { text-align: center; width: 100%; } .text-box h3 { font-size: 42px; } .text-box h3 p { font-size: 22px; font-weight: 900; } .text-box h3 span { color: #ff0000 } .text-box p { width: 100%; line-height: 23px; padding: 0; margin: 0; font-size: 14px; } .text-box img { width: auto; padding: 20px 0; } .textwz { margin-top: -350px !important; } .btndiy { width: 210px; border-radius: 25px; margin-top: 20px; overflow: hidden; text-align: center; margin-left: auto; margin-right: auto } .btndiy a { display: block; padding: 15px; color: #fff; font-size: 18px; } } @media screen and (max-height: 800px) { .text-box img { display: none; } .textwz { margin-top: -200px !important; width: 100%; } } @media screen and (max-width: 768px) { .text-box h3 { font-size: 28px; } .btndiy a { display: block; padding: 10px; color: #fff; font-size: 16px; } } .cpnav { bottom: 0; background: #15569d; height: 80px; width: 100%;max-width:1600px;margin:0 auto; z-index: 3 } .cpnav .max-width { height: 100%; } .cpnav ul { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0; height: 100%; } .cpnav li { border-right: 1px solid rgba(255, 255, 255, 0.4); height: 100%; width: 100%; display: flex; align-items: center; cursor: pointer; } .cpnav li:last-child { border: none; } .cpnav li .cpl { padding: 20px; display: inline-block; color: #fff; text-align: center; width: 100%; } .cpnav li i { font-size: 38px; color: #fff; display: block; margin-bottom: 5px; } .cpnav li span { display: block; font-size: 18px; line-height: 1.2; } .cpnav li .sjx { position: absolute; bottom: -7px; color: #fff; font-size: 20px; margin: 0; left: 50%; transform: translatex(-50%); display: none; } .cpnav li:hover .sjx { display: block; } .cpnav li.active .sjx { display: block; } @media screen and (max-width: 1280px) { .cpnav { height: 100px; } .cpnav li a { padding: 5px; } .cpnav li i { font-size: 28px; } .cpnav li span { font-size: 16px; } } .cpnav .navxt { display: none } @media screen and (max-width: 992px) { .cpnav {} .cpnav .max-width { padding: 0; } .cpnav .navxt { display: block; content: ""; position: absolute; top: 50%; height: 1px; width: 100%; background: rgba(255, 255, 255, 0.4); } .cpnav ul { display: unset; } .cpnav li { height: 50%; float: left; width: 33.33%; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, 0.4); } .cpnav li a { padding: 18px 0; } .cpnav li i { display: none; } .cpnav li span { font-size: 14px; } .cpnav li .sjx { display: none; } .cpnav li:hover .sjx { display: none; } .cpnav li.active .sjx { display: none; } .cpnav li:last-child { border-right: 1px solid rgba(255, 255, 255, 0.4); ; } } .hvr-sweep-to-top { display: inline-block; vertical-align: middle; position: relative; } .hvr-sweep-to-top:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #000; -webkit-transform: scaley(0); transform: scaley(0); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-sweep-to-top:hover, .hvr-sweep-to-top:focus, .hvr-sweep-to-top:active { color:#003366; } .hvr-sweep-to-top.active:before { -webkit-transform: scaley(1); transform: scaley(1); } .product_center_img { padding-right: 40px; padding-left: 0; position: relative; z-index: 3 } .product_center_img .proc { width: 68px; height: 68px; bottom: 55px; cursor: pointer; line-height: 68px; text-align: center; color: #fff; z-index: 4 } .product_center_img .procl { background: rgba(0, 0, 0, 0.8); position: absolute; right: 40px; } .product_center_img .procr { background: #15569d; position: absolute; right: -68px; transform: translatex(-40px); } .product_center_img .procl i { font-size: 32px; transition: all .2s ease; -moz-transition: all .2s ease; -webkit-transition: all .2s ease; -o-transition: all .2s ease; } .product_center_img .procl:hover i { font-size: 42px; } .product_center_img .procr i { font-size: 32px; transition: all .2s ease; -moz-transition: all .2s ease; -webkit-transition: all .2s ease; -o-transition: all .2s ease; } .product_center_img .procr:hover i { font-size: 42px; } .product_center_explain { z-index: 2; padding-left: 60px; padding-right: 0; } .product_center_explain .biaoti { margin-bottom: 20px; } .product_center_explain h3 { font-size: 32px; line-height: 1.5; margin: 0; } .product_center_explain .btn01 div { width: 100%; overflow: hidden; border-radius: 38px; margin-top: 6px; } .product_center_explain .btn01 div a { width: 100%; background: #000; color: #fff; padding: .5rem; font-size: 14px !important; } .product_center_explain .btn01 div a i { font-size: 12px; margin-left: 10px; color: #f00; } .product_center_explain .btn01 div a:hover i{ color: #fff; } .product_center_explain .explain_shu a { position: relative; display: inline-block; width: 100%; text-align: left; } .product_center_explain .explain_shu a:before { content: ""; width: 6px; height: 6px; background: #ff0000; border-radius: 6px; display: inline-block; vertical-align: middle; margin-right: 10px; margin-top: -2px; } .product_center_img .swiper-wrapper {} .product_center_img {} .product_center_img .proimg { overflow: hidden; } .explain_tu { overflow: hidden; } @media screen and (max-width: 992px) { .product_center_img .procl { left: -14px; top: 150px } .product_center_img .procr { right: -54px; top: 150px } .product_center_img { padding: 0 20px; width: 100%; } .product_center_explain { padding: 0 20px; margin-bottom: 30px; } } @media screen and (max-width: 768px) { .cpnav li a { padding: 0; font-size: 14px } .cpnav li span { font-size: 14px; max-width: 90%; margin: auto; } .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 150px; } }