.bannerBox { min-height: 300px; max-height: 1600px; width: 100%; overflow: hidden; } .bannerBox .cover { height: 100vh; } * { padding: 0; margin: 0; } .bannerBox .swiper-slide img { width: 100%; display: block; } .bannerBox .cover { background: no-repeat center center; background-size: cover; } .bannerBox .content1 { width: 100%; overflow: hidden; height: auto; } .bannerBox .text { position: absolute; z-index: 29; width: 100%; height: 100%; left: 0; bottom: 0; } .bannerBox .binbox:after { content: ''; width: 1px; position: absolute; left: 0; top: 0; opacity: 0; height: 0; background: rgba(255, 255, 255, .4); transition: all 1s; z-index: 1; } .bannerBox .swiper-slide-active .binbox:after { height: 100%; opacity: 1; left: 0; -webkit-transition-delay: 1s; transition-delay: 1s; } .bannerBox .text .cn { font-size: 46px; } .bannerBox .binbox .en { font-size: 24px; color: rgba(255, 255, 255, 1); } .bannerBox .binbox .cn { opacity: 0; transition: all 1s; transform: translate3d(100%, 0, 0); } .bannerBox .swiper-slide-active .cn { opacity: 1; -webkit-transition-delay: 1.5s; transition-delay: 1.5s; transform: translate3d(0, 0, 0); } .bannerBox .binbox .en { opacity: 0; transition: all 1s; transform: translate3d(100%, 0, 0); } .bannerBox .swiper-slide-active .en { opacity: 1; -webkit-transition-delay: 2s; transition-delay: 2s; transform: translate3d(0, 0, 0); } .binbox { position: absolute; left: 7%; bottom: 72px; color: #fff; padding-left: 50px; } .banner_mouse { z-index: 99; position: absolute; bottom: 80px; right: 7%; width: 23px; height: 40px; cursor: pointer; background: url(/wp-content/themes/ccwebeasy/assets/share/img/rBQBG1yq-gaEI5zlAAAAAJ-lvOM030.png) no-repeat -23px 0px; -webkit-animation: nudgeMouse 1.6s linear infinite; animation: nudgeMouse 1.6s linear infinite; } .banner_mouse:after, .banner_mouse:before { content: ""; position: absolute; } .banner_mouse:before { width: 23px; height: 40px; background: url(/wp-content/themes/ccwebeasy/assets/share/img/rBQBG1yq-gaEI5zlAAAAAJ-lvOM030.png) no-repeat 0px 0px; -webkit-animation: colorSlide 1.6s linear infinite; animation: colorSlide 1.6s linear infinite; top: 0; left: 0; } .banner_mouse:after { background-color: #fff; width: 4px; height: 4px; border-radius: 100%; -webkit-animation: trackBallSlide 1.6s linear infinite; animation: trackBallSlide 1.6s linear infinite; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .f-copyright span{ font-family: iconfont; } @-webkit-keyframes colorSlide { 0% { height: 0; } 90% { height: 40px; } } @keyframes colorSlide { 0% { height: 0; } 90% { height: 40px; } } @-webkit-keyframes trackBallSlide { 0% { opacity: 1; -webkit-transform: scale(1) translateY(-8px); transform: scale(1) translateY(-8px); } 34% { opacity: 1; -webkit-transform: scale(0.9) translateY(4px); transform: scale(0.9) translateY(4px); } 68% { opacity: 0; -webkit-transform: scale(0.4) translateY(16px); transform: scale(0.4) translateY(16px); } 100% { opacity: 0; -webkit-transform: scale(0.4) translateY(-8px); transform: scale(0.4) translateY(-8px); } } @keyframes trackBallSlide { 0% { opacity: 1; -webkit-transform: scale(1) translateY(-8px); transform: scale(1) translateY(-8px); } 34% { opacity: 1; -webkit-transform: scale(0.9) translateY(4px); transform: scale(0.9) translateY(4px); } 68% { opacity: 0; -webkit-transform: scale(0.4) translateY(16px); transform: scale(0.4) translateY(16px); } 100% { opacity: 0; -webkit-transform: scale(0.4) translateY(-8px); transform: scale(0.4) translateY(-8px); } } @-webkit-keyframes nudgeMouse { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(8px); transform: translateY(8px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes nudgeMouse { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(8px); transform: translateY(8px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } .moreBtn { text-align: center; background: url(/group1/M00/03/AE/rBQBHVyrEVCEGb9CAAAAACbo3Fw552.png) no-repeat scroll center bottom; display: block; width: 110px; padding-bottom: 2px; position: relative; } .iboxT .moreBtn { float: right; margin-top: 4px; background: url(/wp-content/uploads/2023/05/jt_bew.png) no-repeat scroll left bottom; } .iboxT .en { text-transform: uppercase; padding-left: 6px; } .iboxT .moreBtn .txt{ font-family: iconfont; } .iboxT .zh, .iboxT .en { font-size: 24px; line-height: 1.5; font-family: iconfont; } .iboxT .zh { color: #333; } .iboxT .en { color: #999; } .w_grid { width: 94%; max-width: 1812px; min-width: 0px; height: auto; max-height: none; min-height: 192px; margin-top: 0px; margin-left: auto; margin-right: auto; margin-bottom: 0px; padding-top: 0px; padding-left: 0px; padding-right: 0px; padding-bottom: 0px; } .p_gridCell { margin-bottom: 5rem; margin-top: 5rem; margin-left: 0; margin-right: 0; clear: none; width: 100%; } #products { width: 100%; height: auto; overflow: hidden; padding: 1rem 0rem; position: relative; } .my_productlist { display: block; position: relative; } .aTop { width: 100%; height: 0px; padding-bottom: 100%; overflow: hidden; } .my_productlist .picture { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; border: #f1f1f1 solid 1px; } .my_productlist .proPic { width: 100%; height: 100%; } .blue { background: rgba(1, 114, 183, 0.8); top: 100%; left: 0px; width: 100%; height: 100%; transition: all .5s ease; position: absolute; } .number { margin-top: 15%; margin-bottom: 5%; font-size: 16px; padding-left: 20%; color: #fff; position: relative; } .number::before { content: ''; position: absolute; left: 5%; top: 0px; bottom: 0px; margin: auto; display: block; width: 10%; height: 2px; background: #fff; } .desc1 { padding: 0 20%; color: #fff; height: 6rem; line-height: 1.5rem; overflow: hidden; } .proName2 { display: block; color: #fff; font-size: 16px; background: #0172b7; margin-top: 0px; padding: 0 15%; border-top: 1px solid #0172b7; line-height: 60px; overflow: hidden; transition: all .5s ease; text-overflow: ellipsis; white-space: nowrap; } .proPrice { color: red; display: none; } .desc2 { color: #888; font-size: 0.75rem; margin: 16px 0 28px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 1; letter-spacing: 1px; transition: all .5s ease; display: none; } .productLi:hover .proName2 { background: #0172b7; color: #fff; } .productLi:hover .desc2 { opacity: 0; } .productLi:hover .blue { top: 0px; } .swiper-container-pro { width: calc(100% - 64px); margin: 0 auto; } #products .swiper-button-next, #products .swiper-button-prev { display: none; } #c_portalResPublic .iboxT .zh { color: #FFF; } #c_portalResPublic .iboxT .en { color: rgba(255, 255, 255, .5); } #c_portalResPublic { background: url(/wp-content/uploads/2023/05/bg_home.jpg?tenantId=192283&viewType=1&v=1662615305000) no-repeat center center; background-attachment: fixed; background-size: cover; width: 100%; overflow: hidden; position: static; } #c_portalResPublic .iboxT .moreBtn .txt { color: #fff; font-size: 16px; } .customer_box { display: flex; flex-wrap: wrap; } .customer_box>div { margin-top: 20px; width: 15.827%; margin-left: 1%; } .customer_box>div>img { width: 100%; } .customer_box>div:nth-child(6n+1) { margin-left: 0; } .p_gridCell2 { margin-bottom: 4rem; margin-top: 4rem; } .p_gridCell2 .w_grid { width: 94%; max-width: 1740px; } #news_center .w_grid, .partLast .w_grid { width: 90%; max-width: 1812px; } .news_center_title { margin-top: 30px; margin-bottom: 20px; } .newlistBoxs { display: flex; flex-wrap: wrap; position: relative; } .newlistBoxs>div { width: 50%; position: relative; height: 100%; } .list_images { position: relative; overflow: hidden; } .list_images .pic { transition: 600ms; -webkit-transition: 600ms; } .list_images:hover .pic { transform: scale(1.06); -webkit-transform: scale(1.06); -moz-transform: scale(1.06); } .cover { background-repeat: no-repeat; background-position: center center; background-size: cover; position: relative; height: 33.9rem; } .list_images img { width: 100%; transition: 600ms; -webkit-transition: 600ms; -ms-transition: 600ms; height: auto !important; left: 50% !important; top: 50% !important; -webkit-transform: translate(-50%, -50%) !important; -ms-transform: translate(-50%, -50%) !important; transform: translate(-50%, -50%) !important; position: absolute !important; display: none; } .cotentBox { background-color: rgba(0, 0, 0, .5); position: absolute; bottom: 0; padding: 20px; right: 0; left: 0; display: flex; width: 100%; } .listTimeBox { margin-top: -8px; display: none; width: 140px; height: 100%; } .listYear { font-size: 1.5rem; text-align: center; } .listmd { text-align: center; margin-top: 0.65rem; } .listCotentBox { padding: 0; width: 100%; } .titleh5 { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; margin: 0; } .gyBox { display: none; } .lsitSummary { font-size: 0.875rem; height: 3rem; line-height: 1.5rem; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; margin-bottom: 2rem; } .list{ transition: all .5s ease } .list .list_link { display: none; } .list:hover{ background-color: #f7f7f7; } .cotentBox2 { display: flex; width: 100%; } .listTimeBox2 { margin-top: 1rem; width: 140px; height: 100%; } .listYear2 { font-size: 1.5rem; text-align: center; font-family: iconfont; } .listCotentBox2 { border-left: 1px solid #e8e8e8; width: calc((100% - 140px)/1); padding: 0 1rem; } .titleBox2 { margin-top: 1.4rem; } .titleh52 { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gyBox2 { margin-top: 1rem; } .lsitSummary2 { font-size: 0.875rem; height: 3rem; line-height: 1.5rem; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; margin-bottom: 2rem; } .listmd2 { text-align: center; margin-top: 0.65rem; } .listmd2 .listMouth, .listmd2 .listDate{ font-family: iconfont; } .titleLink { color: #707070; } .titleLink:hover { color: #62b7a6; } .partLast01 { display: flex; flex-wrap: wrap; } .partLast01>div { width: 32.330099999999995%; margin-left: 1.5%; overflow: hidden; } .partLast01>div:nth-child(1) { margin-left: 0; } .w_imgbox { width: 100%; height: 100%; position: relative; } .w_imgbox:before { content: ""; position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; z-index: 1; background-color: rgba(0, 0, 0, .3); } .w_imgbox>img { transition: all .5s ease; -moz-transition: all .5s ease; -webkit-transition: all .5s ease; -o-transition: all .5s ease; width: 100%; height: auto; } .w_imgbox:hover>img { overflow: hidden; transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); cursor: pointer; } .p_contentbox { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; align-items: center; z-index: 2; } .content_box { width: 84%; margin-left: 8%; margin-right: 8%; margin-bottom: 3rem; margin-top: 3rem; } .img_icon { max-width: 60px; width: 100%; margin: 0 auto; } .img_icon>img { width: 100%; } .img_line { width: 30px; height: 29px; margin: 0 auto; line-height: 29px; } .img_line>div { border-top-color: #fff; border-top-width: 2px; border-top-style: solid; width: 100%; opacity: 1; filter: alpha(opacity:100); display: inline-block; vertical-align: middle; } .text_sty>a { display: block; color: #fff; width: 100%; text-align: center; line-height: 1.8; } .text_sty .title { font-size: 18px; font-weight: 700; } .text_sty .con { font-size: 16px; } .w_imgbox:after { content: ""; position: absolute; width: 100%; height: 0%; left: 0px; bottom: 0px; z-index: 1; background-color: rgba(1, 114, 183, 0.8); transition: all .5s cubic-bezier(.4, 0, .2, 1); } .w_imgbox:hover:after { height: 100%; top: 0px; bottom: auto; } @media only screen and (max-width: 1400px){ .iboxT .zh, .iboxT .en { font-size: 18px; } } @media only screen and (min-width: 1025px) { #wowslider-container1 { display: none !important; } } @media only screen and (max-width: 1024px) { .bannerBox,.cover { display: none; } .bannerBox .text .cn { font-size: 24px; } .bannerBox .text .en { font-size: 16px; } .bannerBox .line { max-width: 300px; } .bannerBox .text { height: 60%; background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6)); background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6)); } .newlistBoxs>div { width: 100%; } .list_images .pic{ padding-bottom: 60%; } .list_images img{ display: block; } } @media only screen and (max-width: 768px) { .c_portalResEbizads_banner-01001001 { margin-top: 60px !important; } .bannerBox .text .cn { font-size: 16px; } .bannerBox .text .en { font-size: 12px; } .binbox { padding-left: 20px; left: 5%; width: 80%; bottom: 10%; } .bannerBox .swiper-pagination-clickable, .banner_mouse { display: none; } .bannerBox { height: 35vh; } .bannerBox .cover { height: 35vh; } .p_gridCell,.p_gridCell2{ margin-bottom: 2rem; margin-top: 2rem; } .customer_box>div{ width: 32%; margin-left: 2%; } .customer_box>div:nth-child(3n+1){ margin-left: 0; } .list_images .pic{ padding-bottom: 50%; } .partLast01>div{ width: 100%; margin: 10px 0px; } .iboxT .moreBtn{ margin-top: 0; } .iboxT.clearfix{ margin-bottom: 10px; } .customer_box>div{ margin-top: 2%; } .listTimeBox2{ width: 60px; } .listYear2{ font-size: 1rem; } .listCotentBox2{ width: calc((100% - 60px)/1); } .titleh52{ font-size: 0.8rem; } .lsitSummary2{ font-size: 0.5rem; height: 2rem; line-height: 1rem; margin-bottom: 1rem; } .gyBox2{ margin-top: 0.5rem; } } .bannerBox { min-height: 300px; max-height: 1600px; width: 100%; } .bannerBox .cover { height: 680px; min-height: 300px; max-height: 1600px; width: 100%; } .bannerBox .text .cn { font-size: 46px; font-weight: bold; padding: 10px 0px; } .swiper-pagination-bullet { display: inline-block; background: #0068b7; border-radius: 0; transform-origin: center center; -webkit-transform-origin: center center; margin: 0 8px !important; width: 10px; height: 10px; transition: all 0.8s; opacity: 1; } .swiper-pagination-bullet-active { transform: rotate(45deg); -webkit-transform: rotate(45deg); }