body{ overflow-x:hidden;} .banner_home.PC_banner{ position: relative; display: block} .banner_home.Mobile_banner{ display: none} .banner_home.PC_banner::before { right:0%; position: absolute; top:20%; content: " "; background: url("../images/banner_right_img.png") right center no-repeat; background-size:auto 100% ; height: 90%; width: 10%; z-index: 2 } .banner_home.PC_banner::after { left: 0%; position: absolute; top: 0%; content: " "; background: url("../images/banner_left_img.png") left center no-repeat; background-size:auto 100% ; height: 90%; width: 10%; z-index: 2 } .scr { pointer-events:none; width:0.5rem; z-index:12; animation:.8s cubic-bezier(.435,.25,.15,.965) infinite alternate scrFn; position:absolute; bottom:6%; left:50%; margin-left:-0.25rem; -webkit-animation: bounce-up 1.4s linear infinite; animation: bounce-up 1.4s linear infinite; } .scr>img { width:100%; display:block } 25% { -webkit-transform: translateY(-10px); } 50%, 100% { -webkit-transform: translateY(0); } 75% { -webkit-transform: translateY(10px); } } @keyframes bounce-down { 25% { transform: translateY(-10px); } 50%, 100% { transform: translateY(0); } 75% { transform: translateY(10px); } } .animate-bounce-down{ -webkit-animation: bounce-down 1.5s linear infinite; animation: bounce-down 1.5s linear infinite; } @-webkit-keyframes bounce-up { 25% { -webkit-transform: translateY(10px); } 50%, 100% { -webkit-transform: translateY(0); } 75% { -webkit-transform: translateY(-10px); } } @keyframes bounce-up { 25% { transform: translateY(10px); } 50%, 100% { transform: translateY(0); } 75% { transform: translateY(-10px); } } .animate-bounce-up{ -webkit-animation: bounce-up 1.4s linear infinite; animation: bounce-up 1.4s linear infinite; } /*banner 88038威尼斯检测中心*/ .banner_home{ height:8rem; width: 100%;} .banner_home .slick-slider,.banner_home .slick-list,.banner_home .slick-track{height: 100%; width: 100%;} .banner_home .item{ position: relative; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover;} .banner_home .item .videocon { position: absolute; top: 50%; left: 0; width: 100%; height: 100%; margin-top: -30%; } .banner_home .item .videocon video{ width: 100%; height: auto;} .banner_home .item .text{ position: absolute; left:15%; top: 50%; width:70%; text-align: left; color: #ffffff; margin-top:-150px; line-height: 1.5} .banner_home .item .text h5{font-weight: bold; font-size: 44px; margin-bottom: 30px;text-transform:uppercase;text-shadow:#000000 1px 1px 6px; max-width: 700px;} .banner_home .item .text p{font-size:20px; margin-bottom:50px;text-transform:uppercase;text-shadow:#000000 1px 1px 6px; max-width: 600px; line-height: 2} .banner_home .item .text a{ display: none; padding:14px 32px; font-size:13px; color: #ffffff;text-transform:uppercase;background-color: #229aba;border-radius:30px;} .banner_home .item .text a:hover{ padding:14px 36px; } .banner_home .item.slick-current h5{animation: fadeInDown 2s ease; animation-fill-mode: both;} .banner_home .item.slick-current{} .banner_home .item.slick-current p{animation: fadeInUp 2s ease; animation-fill-mode: both;} .banner_home .item.slick-current a{animation: fadeInUp 2s ease; animation-fill-mode: both;} .banner_home .slick-dots{ bottom:30px} .banner_home .slick-dots li button{ height: 10px; width: 10px; margin: 0 5px} .banner_home .slick-dots li.slick-active button { background: #006b6e; } html, body { position: relative; height: 100%; } #swiper_home{ width:100%; text-align:center; height:100%; margin-left:0; } #swiper_home .swiper-slide{ height:100%; width:100%; overflow:hidden; position:relative; } #swiper_home .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } #swiper_home .swiper-slide:last-child{ height: auto; background:#be8e44 url(../images/bottom_backs.jpg) center center no-repeat; background-size:cover } #swiper_home .swiper-slide.swiper-slide-active .home_pr_class{animation: moveLeftL 2s ease;animation-fill-mode: both;} .home_banner_show.PC{ display:block} .home_banner_show.mobile{ display:none;} .home_banner_show{ height: 100%; width: 100%} .home_banner_show .slick-slider{ height: 100%; width: 100%} .home_banner_show .slick-list{ height: 100%; width: 100%} .home_banner_show .slick-track{ height: 100%; width: 100%} .home_banner_show .item { position: relative; overflow: hidden} .home_banner_show .item::before { right:0; position: absolute; top:0%; content: " "; width:100%; -webkit-transition: .3s; transition: .3s; height: 100%; z-index:9; background: url(../images/back_mengcheng.png) center center no-repeat; background-size:cover; display:none } .home_banner_show .item .banner_home_font{ position: absolute; left: 15%; top: 50%; width: 70%; margin-top: -1.6rem; text-align: cnter; z-index:10} /*.home_banner_show .item:nth-child(3) .banner_home_font{ position: absolute; left: 15%; width:70%; top: 50%; margin-top: -2.4rem; text-align: center}*/ .home_banner_show .item.slick-current .banner_home_font{animation: moveUpL 2s ease;animation-fill-mode: both;} .home_banner_show .item .videocon { position: absolute; top: 50%; left: 0; width: 100%; height: 100%; margin-top: -30%; z-index:2 } .home_banner_show .item .videocon video{ width: 100%; height: auto;} .home_banner_show .item .img_show { width: 100%; overflow: hidden; transform: scale(1.1); transition: all 2s; } .home_banner_show .item.slick-current .img_show{ transform: scale(1); } .home_banner_show .item .banner_home_font .titile{ font-size: 0.6rem; font-weight: bold; color: #be8e44;font-family: ITCAvantGardePro-Bold,arail ,sans-serif; line-height:1.3; margin-bottom: 0.3rem;text-shadow: 0px 0px 10px #fff;text-transform: uppercase;} .home_banner_show .item .banner_home_font .descipe{ font-size: 0.34rem; font-weight: bold; color: #fff; line-height: 2; margin-bottom: 0.3rem;text-shadow: 1px 1px 2px #00224e;position: relative; display: inline-block;} .home_banner_show .item .banner_home_font .descipe::after { right:-1.6rem; position: absolute; top:50%; content: " "; width:1.3rem; -webkit-transition: .3s; transition: .3s; height: 3px; margin-top:-2px; background-color: #fff; display: none } .home_banner_show .slick-dots li { position:relative; display:inline-block; margin:0 0.1rem; padding:0; cursor:pointer } .home_banner_show .slick-dots li button { border:0; display:block; height:2px; width:0.3rem; padding:0; margin:0; outline:none; line-height:0; font-size:0; cursor:pointer; background:#d6d6d6; border-radius:0px } .home_banner_show .slick-dots li.slick-active button { background:#be8e44; width: 0.4rem; } .home_banner_show .slick-next{ border: 0; background: url("../images/right_btn.png") center center no-repeat; width: 0.6rem; height: 0.6rem; border-radius: 50%;box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.08); right:-0.7rem; left: inherit;background-size: cover; margin-top: -0.5rem} .home_banner_show .slick-prev{ border: 0; background: url("../images/left_btn.png") center center no-repeat; width: 0.6rem; height: 0.6rem; border-radius: 50%;box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.08); left:-0.7rem; background-size: cover; margin-top: -0.5rem} .home_banner_show:hover .slick-prev { left:0.3rem;animation: moveRightL 2s ease; animation-fill-mode: both;} .home_banner_show:hover .slick-next { right:0.3rem;animation: moveLeftL 2s ease; animation-fill-mode: both;} #swiper_home .swiper-slide.swiper-slide-active .about_home_show .tit_show{animation: moveLeftL 2s ease;animation-fill-mode: both;} #swiper_home .swiper-slide.swiper-slide-active .home_titilesd_show{animation: moveLeftL 2s ease;animation-fill-mode: both;} #swiper_home .swiper-slide.swiper-slide-active .about_home_show .decipe{animation: moveLeftL 2s ease;animation-fill-mode: both;} #swiper_home .swiper-slide.swiper-slide-active .more_home{animation: moveUpsL 2s ease;animation-fill-mode: both;} #swiper_home .swiper-slide.swiper-slide-active .home_new_lists{animation: moveUpsL 2s ease;animation-fill-mode: both;} #swiper_home .swiper-slide.swiper-slide-active .number_home_show li:nth-child(1){animation: moveRightL 2s ease;animation-fill-mode: both;animation-delay: 0.8s;} #swiper_home .swiper-slide.swiper-slide-active .number_home_show li:nth-child(2){animation: moveRightL 2s ease;animation-fill-mode: both;animation-delay: 1s;} #swiper_home .swiper-slide.swiper-slide-active .number_home_show li:nth-child(3){animation: moveRightL 2s ease;animation-fill-mode: both;animation-delay: 1.2s;} #swiper_home .swiper-slide.swiper-slide-active .number_home_show li:nth-child(4){animation: moveRightL 2s ease;animation-fill-mode: both;animation-delay: 1.4s;} #swiper_home .swiper-slide.swiper-slide-active .pro_home .pro_font_show{animation: moveUpsL 2s ease;animation-fill-mode: both;} #swiper_home .swiper-slide.swiper-slide-active .Home_Marketing .right_map{animation: moveUpsL 2s ease;animation-fill-mode: both;} #swiper_home .swiper-slide.swiper-slide-active .news_home_con .tit_show{animation: moveLeftL 2s ease;animation-fill-mode: both;} #swiper_home .swiper-slide.swiper-slide-active .news_home_con .decipe{animation: moveLeftL 2s ease;animation-fill-mode: both;} #swiper_home .swiper-slide.swiper-slide-active .home_Advantages{animation: moveUpsL 2s ease;animation-fill-mode: both;} .index_about_con{ position:relative; padding-top:1rem; padding-bottom:1rem; background-color:#fff;} .index_about_con::after { left: 0%; position: absolute; bottom:0.6rem; content: " "; background: url("../images/dog.png") center left no-repeat; background-size: auto; background-size: auto 100%; height: 7rem; width: 100%; z-index: 1; } .index_about_con::before { right: -1%; position: absolute; bottom: -0.6rem; content: " "; background: url("../images/mao.png") right bottom no-repeat; background-size: auto; background-size: auto 100%; height: 7rem; width: 100%; z-index: 0; } .index_about_con .cer8{ position:relative; z-index:10;text-align: center;} .index_about_con .index_about_tit{ position:relative; padding-bottom:0.5rem;} .index_about_con .index_about_tit::after { content: ''; position: absolute; left:50%; bottom: 0.2rem; z-index: 0; width: 0.4rem; height: 4px; background-color: #bf8e44; z-index: 1; margin-left:-0.2rem; } .index_about_con .index_about_tit img{ width:35%;} .index_about_con .index_about_font{ line-height:2.2; font-size:0.17rem; color:#444; padding-bottom:0.5rem;} .index_about_con .index_about_font .PC_content{ display: block} .index_about_con .index_about_font .Mobile_content{ display: none} .index_about_btn{ margin-bottom:0.6rem;} .index_about_btn a{ display:inline-block; margin:0 0.2rem; -webkit-transition: -webkit-transform 0.6s ease 0s; transition: transform 0.6s ease 0s; font-weight:bold} .index_about_btn a.vedio_btn{ border:#bf8e44 1px solid;background:#bf8e44 url(../images/icon_vedio.png) 80% center no-repeat; padding:0.15rem 0.35rem; padding-right:0.5rem; font-size:0.16rem; color:#FFFFFF; border-radius: 0.3rem; background-size:auto 0.15rem ;box-shadow: 0 6px 13px 0 rgba(191,142,68,0.05);} .index_about_btn a.about_more_btn{ border:#bf8e44 1px solid;background:#fff url(../images/icon_r.png) 80% center no-repeat; padding:0.15rem 0.35rem; padding-right:0.6rem; font-size:0.16rem; color:#bf8e44; border-radius: 0.3rem; background-size:auto 0.05rem ;box-shadow: 0 6px 13px 0 rgba(191,142,68,0.05);} .index_about_btn a:hover{-webkit-transform: scale(1.10) ; -moz-transform: scale(1.10); transform: scale(1.10);} .number_show_home{} .number_show_home ul.content_list { width: 100%; height: auto; } .number_show_home ul.content_list li { text-align: center; color: #666; padding: 0; border-right: 1px solid rgba(0, 0, 0, .1); display: inline-block; vertical-align: top; width: 24%; } .number_show_home ul.content_list li:last-child{ border:0} .number_show_home ul.content_list li div { } .number_show_home ul.content_list li:last-child div { border-right: none } .number_show_home ul.content_list li p { text-align: center; } .number_show_home ul.content_list li p.number {} .number_show_home ul.content_list li p.number .counterDX {font-size: 0.48rem; font-weight:bold; color:#bf8e44;font-family: "family_DIN";} .number_show_home ul.content_list li p.number .unit { position: relative; top:-10px; left:10px; vertical-align: top; font-size:0.44rem;color:#bf8e44;font-family: "family_DIN"; } .number_show_home ul.content_list li p.title { margin-top:0.1rem; font-size:0.16rem; color:#888} .index_back{position: relative; background: #fff url(../images/new_list_back.jpg) center bottom repeat-x; background-size: auto; background-size: 100% 1.4rem; padding-bottom: 0.7rem; } .news_home_con { padding-top:1rem;} .home_new_list{ padding-top:0.5rem;} .home_new_list ul li{ border-bottom:#e9e9e8 1px solid; padding:0.4rem 0;} .home_new_list ul li .home_new_time{ float:left; width:15%; text-align:left;font-size:0.20rem; font-weight:bold} .home_new_list ul li .home_new_img{ float:left;position: relative; height:2rem;width:30%; background-position: center center; background-repeat: no-repeat; background-size: cover;border-radius: 0.2rem;transition: 0.3s; -moz-transition: 0.3s; -webkit-transition: 0.3s; -o-transition: 0.3s; } .home_new_list ul li:hover .home_new_img{border-radius: 0rem;transition: 0.3s; -moz-transition: 0.3s; -webkit-transition: 0.3s; -o-transition: 0.3s;} .home_new_list ul li .home_new_font{ float:right; width:50%; text-align:left; padding-top:0.2rem} .home_new_list ul li .home_new_font .home_new_titile{ font-size:0.22rem; margin-bottom:0.25rem;} .home_new_list ul li .home_new_font .home_new_des{ line-height: 2; color: #666;font-size:0.16rem;} .pro_list_show{ background-color:#be9049; background-position:center center; background-repeat:no-repeat; background-size:cover; border-radius:0rem; height:7rem;box-shadow: 0 8px 30px #ddd;overflow: hidden; margin-bottom:0.3rem;position: relative; margin-top:0rem} .pro_list_show #tabcilk0 { text-align:left; position:relative; z-index:3} .pro_list_show #tabcilk0 li{ position:relative; display: inline; float:left; width:20%;height:7rem; vertical-align:top;} .pro_list_show #tabcilk0 li::after { right: 0%; position: absolute; bottom:0; content: " "; width:1px; -webkit-transition: .3s; transition: .3s; height: 100%; background-color: rgba(255, 255, 255, 0.3); } .pro_list_show #tabcilk0 li::before { right: 0%; position: absolute; bottom:0; content: " "; width:100%; -webkit-transition: .3s; transition: .3s; height: 100%; background-color: rgba(33, 22, 5, 0.25); } .pro_list_show #tabcilk0 li.on::before { right: 0%; position: absolute; bottom:0; content: " "; width:100%; -webkit-transition: .3s; transition: .3s; height: 100%; background-color: rgba(191, 142, 68, 0.9); backdrop-filter: blur(10px); } .pro_list_show #tabcilk0 li .fenlei_pro{ margin-top:0.8rem; margin-bottom:0.5rem;margin-left: 10%;position: relative;} .pro_list_show #tabcilk0 li .fenlei_pro span{ font-size:0.15rem; color:#fff; display:inline-block; padding:0.10rem 0.35rem; border-radius:0.3rem;border: #fff 1px solid;} .pro_list_show #tabcilk0 li .culture_icon { display:none; position:absolute; right: -0.3rem; bottom:0.1rem; z-index:2;transition: 0.3s; -moz-transition: 0.3s; -webkit-transition: 0.3s; -o-transition: 0.3s; width:66%;} .pro_list_show #tabcilk0 li .pro_links{ color:#fff;position:absolute; left:10%; bottom:0.5rem; z-index:2;transition: 0.3s; -moz-transition: 0.3s; -webkit-transition: 0.3s; -o-transition: 0.3s; display:inline-block; font-size:0.17rem;background: url(../images/icon_r2.png) 80% center no-repeat; background-size: auto 0.05rem; padding: 0.15rem 0.35rem; padding-right: 0.35rem; padding-left:0; padding-right: 0.6rem;} .pro_list_show #tabcilk0 li.on .culture_icon { display:block;transition: 0.3s; -moz-transition: 0.3s; -webkit-transition: 0.3s; -o-transition: 0.3s;} .pro_list_show #tabcilk0 li .font_show{ margin-left:10%; margin-right:10%;z-index:2; color:#fff;} .pro_list_show #tabcilk0 li .font_show .tit{ font-size:0.24rem; font-weight:bold; margin-bottom:0.1rem;} .pro_list_show #tabcilk0 li .tit_en{ position:relative; margin-bottom:0.6rem; font-size:0.12rem; } .pro_list_show #tabcilk0 li .tit_en::after { content: ''; position: absolute; left: 0%; bottom: -0.3rem; z-index: 0; width: 0.4rem; height:3px; background-color: #bf8e44; z-index: 1; } .pro_list_show #tabcilk0 li.on .tit_en::after { content: ''; position: absolute; left: 0%; bottom: -0.3rem; z-index: 0; width: 0.4rem; height:3px; background-color: #fff; z-index: 1; } .pro_list_show #tabcilk0 li .font_show .descipe{ display:block; font-size:0.16rem; line-height:2.2; margin-top:0.2rem; transition: 0.3s; -moz-transition: 0.3s; -webkit-transition: 0.3s; -o-transition: 0.3s; height:0.001rem; overflow:hidden} .pro_list_show #tabcilk0 li .font_show .descipe .descipe_font{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;} .pro_list_show #tabcilk0 li .font_show .descipe .a_more{ display:inline-block; margin-top:0.2rem; border-radius:0.3rem; border:#fff 1px solid; padding:0.1rem 0.15rem; font-size:0.13rem; line-height:1;} .pro_list_show #tabcilk0 li.on .font_show .descipe{ display:block; height:2.8rem; transition: 0.3s; -moz-transition: 0.3s; -webkit-transition: 0.3s; -o-transition: 0.3s;} .pro_list_show #tabbox0 .chanye_home_list{ position:absolute; left:0; top:0;z-index:2; background-size:cover;width:100%;height:100%; background-size:cover; background-position:center center; background-repeat:no-repeat; transition: 0.3s; -moz-transition: 0.3s; -webkit-transition: 0.3s; -o-transition: 0.3s;} .pro_list_show.PC_show{ display: block} .pro_list_show.Mobile_show{ display: none} .home_vedio_show{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 20000; height: 100%; width: 100%; background: rgba(0,0,0,0.7); display: none;backdrop-filter: blur(15px); } .vedios { position: fixed; top: 0%; left: 0%; width:100%; z-index: 20001; height:100%; text-align:center; display: none; } .vedios video{ max-width:60%;} .vedios .position_re{ position:relative;display: flex;justify-content: center;width:100%;align-items: center; height: 100%; } .vedios .position_re .close_btn{ display:none; position:absolute; top:10%; right:10%;} .vedios .position_re .close_btn img{ width:0.3rem;} .vedios .position_re .close_btn img:hover{transform: rotate(90x)} @media screen and (max-width: 768px){ .home_banner_show.PC{ display:none} .home_banner_show.mobile{ display:block} .index_about_con .index_about_tit img { width: 90%; } .index_about_con .index_about_font{font-size: 14px;} .index_about_btn a.vedio_btn,.index_about_btn a.about_more_btn,.number_show_home ul.content_list li p.title{font-size: 14px;} .number_show_home ul.content_list li{ width:48%; margin-bottom:0.4rem;} .number_show_home ul.content_list li:nth-child(2){border: 0;} .number_show_home ul.content_list li p.number .counterDX { font-size: 30px;} .pro_list_show{ height:10rem;} .pro_list_show #tabcilk0 li { position: relative; display: block; float: none; width: 100%; height: 2rem; } .pro_list_show #tabcilk0 li::after { right: 0%; position: absolute; bottom: 0; content: " "; width:100%; -webkit-transition: .3s; transition: .3s; height:1px; background-color: rgba(255, 255, 255, 0.3); } .pro_list_show #tabcilk0 li .fenlei_pro{ display:none;} .pro_list_show #tabcilk0 li .font_show { padding-top: 10%; } .pro_list_show #tabcilk0 li .pro_links{left: inherit; right: 10%; border: #fff 1px solid; font-size: 14px; bottom: inherit; top: 50%; margin-top: -0.2rem;padding-left: 0.2rem;} .pro_list_show #tabcilk0 li .font_show .tit { font-size: 20px;} .pro_list_show #tabcilk0 li .tit_en { position: relative; margin-bottom: 0; font-size: 12px; } .pro_list_show #tabcilk0 li.on .culture_icon { display:none;transition: 0.3s; -moz-transition: 0.3s; -webkit-transition: 0.3s; -o-transition: 0.3s;} .home_new_list ul li .home_new_time { float: none; width: auto; text-align: left; font-size: 16px; font-weight: bold; margin-bottom: 15px; } .home_new_list ul li .home_new_img { float: none; position: relative; height: 2.6rem; width: auto;} .home_new_list ul li .home_new_font { float: none; width: auto; text-align: left; padding-top: 20px; } .home_new_list ul li .home_new_font .home_new_titile { font-size: 20px;} .home_new_list ul li .home_new_font .home_new_des{ font-size:14px;} .video{ width: 90%; margin: 0px auto} .vedios video{max-width: initial;} .pro_list_show #tabcilk0 li .font_show .descipe{ display: none} .index_about_con .index_about_font .PC_content{ display: none} .index_about_con .index_about_font .Mobile_content{ display: block} .pro_list_show.PC_show{ display: none} .pro_list_show.Mobile_show{ display: block} }