.swiper-button-Left-Img-btn { position: absolute; width: 100%; top: 50%; z-index: 15; } .swiper-button-Left-Img-prev{ margin: 0; width: 52px; height: 52px; line-height: 52px; text-align: center; background: #fff; opacity: 1; font-family: 'fonticon'; -webkit-transition: .168s; -o-transition: .168s; transition: .168s; float: left; font-size: 14px; } .swiper-button-Left-Img-next{ margin: 0; width: 52px; height: 52px; line-height: 52px; text-align: center; background: #fff; opacity: 1; font-family: 'fonticon'; -webkit-transition: .168s; -o-transition: .168s; transition: .168s; float: right; font-size: 14px; } .MasonryBox{ width: 96%; margin: 0 auto; max-width: 1200px; } .MasonryBox .Masonry-mod{ float: left; width: 20%; box-sizing: border-box; padding: 0; overflow: hidden; background: #000; border: 12px solid #fff; cursor: pointer; position: relative; } .MasonryBox .Masonry-mod img{ display: block; width: 100%; transition: .368s; } .MasonryBox .Masonry-mod:hover img{ opacity: .6; transform: scale(1.1); } .MasonryBox .Masonry-mod p{ position: absolute; width: 100%; height: 38px; line-height: 38px; padding: 0 10px; text-align: center; font-size: 16px; color: #222; background: rgba(255,255,255,.8); bottom: -42px; left: 0; box-sizing: border-box; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; transition: .368s; } .MasonryBox .Masonry-mod:hover p{ bottom: 0; } @media screen and (max-width: 1080px) { .MasonryBox{ width: 96%; } .MasonryBox .Masonry-mod { width: 25%; } } .chanpin-tan-window{ position: fixed; top: 0; left: 0; overflow: hidden; z-index: 999999; background: rgba(0,0,0,.8); width: 0; height: 0; opacity: 0; transition: opacity .6s;} .chanpin-tan-window.show{width: 100%; height: 100%; opacity: 1;} .chanpin-tan-window .img-box{position: absolute;} .chanpin-tan-window .img-box img{display: block; max-width: 1200px; max-height: 600px;} .chanpin-tan-window .img-box p{position: absolute; padding: 10px 20px; background: rgba(0,0,0,.5); bottom: 0; left: 0; font-size: 14px; color: #fff;} .chanpin-tan-window .out{ width: 50px; height: 50px; position: absolute; top: -80px; right: -80px; background: #fff; display: flex; justify-content: center; align-items: Center; cursor: pointer; color: #222; font-size: 20px; font-weight: bold; transition: .3s; } .chanpin-tan-window .out:hover{background: #fff; color: #333; border-radius: 10px;} @media screen and (max-width: 768px) { .swiper-button-Left-Img-btn {display:none;} .MasonryBox .Masonry-mod { width: 50%; } .MasonryBox .Masonry-mod p{ bottom: 0; } .chanpin-tan-window .img-box img{ display: block; max-width: 100%; } .chanpin-tan-window .out{ top: -80px; right: 0px; } } @media screen and (max-width: 568px) { .MasonryBox{ width: 98%; } .MasonryBox .Masonry-mod { width: 50%; } .MasonryBox .Masonry-mod p{ bottom: 0; } } .c_portalResEbizads_banner-01001{width:400px;height:200px;overflow:hidden} .chanpin-mod-20190525{ width: 100%; height: 100%; background: #fff; position: relative; overflow: hidden; } .chanpin-mod-20190525 .swiper-Left-Img{ width: 56%; height: 100%; overflow: hidden; position: relative; animation-name: fadeInLeft; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .chanpin-mod-20190525 .swiper-Left-Img .left-tit{ position: absolute; top: 62px; left: 7.5%; z-index: 2; animation-name: fadeInUp; -webkit-animation-duration: 0.8s; animation-duration: 0.8s; -webkit-animation-delay: 1s; animation-delay: 1s; } .chanpin-mod-20190525 .swiper-Left-Img .left-tit h2{ font-family: 'adineuePROBold'; padding-top: 80px; font-size: 24px; color: #fff; text-transform: uppercase; } .chanpin-mod-20190525 .swiper-Left-Img .left-tit span{ display: block; width: 14px; height: 14px; border-radius: 50%; border: 3px solid #78be20; position: absolute; right: -23px; box-sizing: border-box; bottom: 7px; } .chanpin-mod-20190525 .swiper-Left-Img ul{ } .chanpin-mod-20190525 .swiper-Left-Img ul li{ overflow: hidden; background: #000; } .chanpin-mod-20190525 .swiper-Left-Img ul li a{ display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; -webkit-transition: .868s; -o-transition: .868s; transition: .868s; } .chanpin-mod-20190525 .swiper-Left-Img ul li a img{ transform:none!important; position: relative!important; top: auto!important; left: auto!important; max-width: none!important; display: block; width: 100%; } .chanpin-mod-20190525 .swiper-Left-Img ul li a:hover{ -webkit-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); opacity: .7; cursor:url(/img/yz_himg5.png),Move; } .chanpin-mod-20190525 .swiper-Left-Img .swiper-pagination{ bottom: 60px; margin: 0; left: 7.5%; width: auto; } .chanpin-mod-20190525 .swiper-Left-Img .swiper-pagination span{ width: 6px; height: 6px; background: #fff; opacity: .5; margin: 0 2px; } .chanpin-mod-20190525 .swiper-Left-Img .swiper-pagination span.swiper-pagination-bullet-active{ opacity: 1; } .chanpin-mod-20190525 .swiper-Left-Img .swiper-scrollbar{ left: 0; width: 100%; border-radius: 0; height: 1px; bottom: 50px; background: rgba(255,255,255,.3); } .chanpin-mod-20190525 .swiper-Left-Img .swiper-scrollbar-drag{ background: #fff; } .chanpin-mod-20190525 .chanpin-tit{ z-index: 2; position: absolute; top: 60px; right: 0; box-sizing: border-box; width: 44%; padding: 0 5%; animation-name: fadeInUp; -webkit-animation-duration: 0.8s; animation-duration: 0.8s; -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .chanpin-mod-20190525 .chanpin-tit a{} .chanpin-mod-20190525 .chanpin-tit a img{} .chanpin-mod-20190525 .chanpin-tit p{ padding-top: 30px; font-size: 16px; line-height: 24px; color: #5e5e5e; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; } .chanpin-mod-20190525 .swiper-Right-min{ z-index: 3; position: absolute; bottom: 60px; right: 5%; box-sizing: border-box; width: 34%; padding-top: 148px; overflow-x: hidden; animation-name: fadeInUp; -webkit-animation-duration: 0.8s; animation-duration: 0.8s; -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } .chanpin-mod-20190525 .swiper-Right-min ul{ } .chanpin-mod-20190525 .swiper-Right-min ul li{ height: 0; padding-bottom: 22%; overflow: hidden; border: 4px solid #fff; box-sizing: border-box; background-size: cover; -webkit-transition: .168s; -o-transition: .168s; transition: .168s; } .chanpin-mod-20190525 .swiper-Right-min ul li a{ height: 32px; position:absolute; left:0; bottom: -32px; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; /*display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;*/ width: 100%; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; background-color: rgba(120,190,32,0.8); color: #fff; text-align: center; line-height: 32px; } .chanpin-mod-20190525 .swiper-Right-min ul li.swiper-slide-thumb-active a, .chanpin-mod-20190525 .swiper-Right-min ul li:hover a{bottom: 0;} .chanpin-mod-20190525 .swiper-Right-min ul li.swiper-slide-thumb-active, .chanpin-mod-20190525 .swiper-Right-min ul li:hover{ border: 4px solid #78be20; } .chanpin-mod-20190525 .swiper-Right-min .swiper-scrollbar{ left: 0; width: 100%; border-radius: 0; height: 5px; top: 96px; bottom: inherit; background: #f1f1f1; } .chanpin-mod-20190525 .swiper-Right-min .swiper-scrollbar-drag{ background: #78be20; } .chanpin-mod-20190525 .swiper-Right-min .btn{ top: 10px; margin: 0; width: 52px; height: 32px; line-height: 18px; border: 1px solid #dddddd; border-radius: 38px; text-align: center; background: #fff; opacity: 1; font-family: 'fonticon'; -webkit-transition: .168s; -o-transition: .168s; transition: .168s; } .chanpin-mod-20190525 .swiper-Right-min .swiper-button-next{ right: inherit; left: 90px; } .chanpin-mod-20190525 .swiper-Right-min .btn:hover{ background: #78be20; color: #fff; border-color: #78be20; box-shadow: 2px 6px 14px rgba(120,190,32,0.2); } @media screen and (max-width: 1600px) { .chanpin-mod-20190525 .chanpin-tit{ top: 0; } .chanpin-mod-20190525 .chanpin-tit p { padding-top: 22px; font-size: 15px; line-height: 24px; -webkit-line-clamp: 4; } .chanpin-mod-20190525 .swiper-Right-min { bottom: 0; } } @media screen and (max-width: 1080px) { .chanpin-mod-20190525 .swiper-Left-Img .left-tit{ display: none; } .chanpin-mod-20190525 .swiper-Left-Img{ width: 100%; } .chanpin-mod-20190525 .swiper-Left-Img .swiper-pagination{ display: none; } .chanpin-mod-20190525 .swiper-Left-Img .swiper-scrollbar{ display: none; } .chanpin-mod-20190525 .chanpin-tit{ width: 90%; padding: 0; position: relative; top: auto; left: auto; right: auto; bottom: auto; margin: 20px auto; } .chanpin-mod-20190525 .chanpin-tit a { display: inline-block; padding: 0; background: #fff; box-sizing: border-box; } .chanpin-mod-20190525 .chanpin-tit a img{ display: block; } .chanpin-mod-20190525 .chanpin-tit p{ /* display: none; */ -webkit-line-clamp: unset; } .chanpin-mod-20190525 .chanpin-tit p br:last-child{ display: none; } .chanpin-mod-20190525 .swiper-Right-min{ width: 90%; left: 5%; padding: 0 0 20px;bottom: 22px; } .chanpin-mod-20190525 .swiper-Right-min .btn{ display: none; } .chanpin-mod-20190525 .swiper-Right-min .swiper-scrollbar{ top: inherit; bottom: 0; } } @media screen and (max-width: 768px) { } .chanpin-mod-xfn{ width: 70%; position: absolute; right: 0; top: 50%; margin-top: 40px; -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .chanpin-mod-xfn .left-tit{ position: absolute; left: -36%; z-index: 3; animation-name: fadeInLeft; -webkit-animation-duration: 1s !important; animation-duration: 1s !important; -webkit-animation-delay: 0.6s !important; animation-delay: 0.6s !important; } .chanpin-mod-xfn .left-tit img{ display: block; margin-top: 38px; } .chanpin-mod-xfn .left-tit p{ font-size: 14px; line-height: 24px; width: 72%; margin-top: 60px; } .chanpin-mod-xfn ul{ z-index: 1; } .chanpin-mod-xfn ul li{ width: 512px; height: 490px; position: relative; overflow: hidden; transition: .368s; animation-name: fadeInRight; -webkit-animation-duration: 1.6s !important; animation-duration: 1.6s !important; -webkit-animation-delay: 0.4s !important; animation-delay: 0.4s !important; } .chanpin-mod-xfn ul li a{ display: block; width: 100%; height: 100%; transition: .9s; } .chanpin-mod-xfn ul li:hover a{ opacity: .8; } .chanpin-mod-xfn ul li a img{ display: block; weight: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .chanpin-mod-xfn .xfn-bg{ width: 50%; height: 100%; background: #fff; position: absolute; top: 0; left: -50%; z-index: 2; } .chanpin-mod-xfn .btn{ width: 52px; height: 32px; line-height: 18px; top: auto; bottom: 152px; border: 1px solid #dddddd; border-radius: 38px; text-align: center; background: #fff; opacity: 1; font-family: 'fonticon'; -webkit-transition: .168s; -o-transition: .168s; transition: .168s; animation-name: fadeInLeft; -webkit-animation-duration: 1s !important; animation-duration: 1s !important; -webkit-animation-delay: 0.8s !important; animation-delay: 0.8s !important; } .chanpin-mod-xfn .btn:hover { background: #78be20; color: #fff; border-color: #78be20; box-shadow: 2px 6px 14px rgba(255,97,0,.5); } .chanpin-mod-xfn .swiper-button-prev{left: -36%;} .chanpin-mod-xfn .swiper-button-next{left: -30%;} .chanpin-mod-xfn .swiper-scrollbar{ border-radius: 0; width: 30% !important; height: 5px !important; left: -36% !important; bottom: 70px !important; background: #f1f1f1; animation-name: fadeInUp; -webkit-animation-duration: 1s !important; animation-duration: 1s !important; -webkit-animation-delay: 0.9s !important; animation-delay: 0.9s !important; } .chanpin-mod-xfn .swiper-scrollbar-drag{ background: #78be20; } @media screen and (max-width: 1660px) { } @media screen and (max-width: 1380px) { .chanpin-mod-xfn ul li { width: 382px; height: 398px; } .chanpin-mod-xfn .left-tit img { margin-top: 18px; width: 54%; } .chanpin-mod-xfn .left-tit p { margin-top: 24px; } .chanpin-mod-xfn .btn{ bottom: 120px; } .chanpin-mod-xfn .swiper-scrollbar{ bottom: 46px; } } @media screen and (max-width: 768px) { .chanpin-mod-xfn{ width: 100%; margin-top: 60px; } .chanpin-mod-xfn .left-tit { width: 100%; left: 0; top: -120px; } .chanpin-mod-xfn .left-tit p{ display: none; } .chanpin-mod-xfn .left-tit img { width: 54%; display: block; margin: 0 auto; } .chanpin-mod-xfn ul li{ border-radius: 30px; height: 386px; opacity: 0.6; } .chanpin-mod-xfn .swiper-slide-active{ transform: scale(1.2); opacity: 1; } } .c_portalResEbizads_banner-01001 .p_Product{ width:calc((100% - 0px)/3); margin:0px; margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; } .c_portalResEbizads_banner-01001 .p_CommonSummaryBoxA { text-align:center; } .c_portalResEbizads_banner-01001 .p_MatteIcon .iconfont:before{ content:'\e602'; } .c_portalResEbizads_banner-01001 >div{ animation-fill-mode:both; } .c_portalResEbizads_banner-01001 .p_page .pre .iconfont:before{ shadow-angle:0px; shadow-distance:0px; shadow-angle-ofInset:0px; shadow-distance-ofInset:0px; } .c_portalResEbizads_banner-01001 .p_page .next .iconfont:before{ shadow-angle:0px; shadow-distance:0px; shadow-angle-ofInset:0px; shadow-distance-ofInset:0px; }