/* 首页加视频 */ /* 2022-10-21 */ .video-masks { position: fixed; left: 0; top: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; z-index: 100000; } .video-masks .video-maskss { position: fixed; left: 0; top: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 100000; } .video-masks .item-video { position: relative; width: 70%; z-index: 100001; } .video-masks.hide { display: none; } .videos-box .gy-video { position: relative; width: 100%; } .videos-box .gy-video .gy-icon { width: 50px; height: 50px; background-image: url(/uploads/image/asgimages/play-icon.png); background-repeat: no-repeat; background-size: cover; cursor: pointer; } .videos-box .gy-video .gy-shadow { position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3); } .videos-box .gy-video .gy-img { width: 100%; } .videos-box .gy-video .gy-img .gy-imgs { display: inline-block; width: 100%; } /* 首页加视频 */ .wrapper { min-width: 768px; margin: 0px auto; width: 100%; overflow: hidden; } .anibtn { display: block; width: 25px; height: 22px; background: url(/uploads/image/asicartoon/heart.png) no-repeat; background-size: 100% 100%; position: absolute; right: -25px; top: 17px; z-index: 10; cursor: pointer; display: none; } .anibtn { -webkit-animation: anibtn 2s linear 0s infinite forwards; -moz-animation: anibtn 2s linear 0s infinite forwards; animation: anibtn 2s linear 0s infinite forwards; } .top { display: block; width: 100%; min-width: 768px; height: 60px; position: absolute; left: 0; top: 0; z-index: 2; background: url(/uploads/image/asi/topbg.png) repeat; padding-bottom: 30px; } .top .left { position: absolute; left: 2%; top: 15px; width: 21%; z-index: 2; font-size: 0; padding-top: 1%; } .top .right { position: absolute; right: 2%; top: 15px; width: 20%; height: 60px; padding-top: 17px; z-index: 2; text-align: right; } .top .nav { display: inline-block; width: 100%; height: 60px; position: absolute; left: 0; top: 15px; text-align: center; padding-top: 1%; z-index: 1; } .top .nav .item { display: inline-block; color: #414141; font-size: 16px; line-height: 24px; font-family: 'microsoft yahei'; margin: 0 3.5%; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; } .top .nav .item:hover { color: #eb6000; } .banner { width: 100%; z-index: 1; background: #000; overflow: hidden; } .banner_img { display: block; width: 100%; height: 945px; background: url(/uploads/image/asi/index-banner.png); position: relative; left: 0; top: 0; z-index: 1; } .video-content { position: absolute; top: 50%; left: 60%; z-index: 2; width: 640px; height: 360px; transform: translatey(-50%); transition: all .7s } .video-mask { position: absolute; top: 50%; right: 0; z-index: 2; width: 640px; height: 360px; transform: translatey(-50%); z-index: 3; } .video_room { display: none; width: 27.08%; position: absolute; } .video_room .video_border { display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; } .video_room .video_box_bg { display: block; width: 96.92%; height: 94.66%; left: 1.54%; top: 2.67%; position: absolute; background: #000; z-index: 2; } .video_room .video_box_bg .video_box { display: block; width: 100%; height: 100%; left: 0; top: 0; position: absolute; } .video_room .video_box_bg .video_box img { width: 100%; height: 100%; } .banner_1_box { display: block; width: 26.5625%; position: absolute; left: 13.4%; top: 20%; display: none; z-index: 5; } .banner_1_box .banner_1_font { width: 100%; display: block; margin-bottom: 10px; } .banner_1_box .banner_pro_box { display: block; width: 94.12%; height: 280px; height: 43.75%; position: relative; margin: 0px auto; } .banner_1_box .banner_pro_box .banner_pro_list { display: block; width: 50%; height: 91.07%; margin: 0px auto; position: relative; } .banner_1_box .banner_pro_box .banner_pro_list .pro_item { display: block; width: 100%; height: 100%; text-align: center; font-size: 0; position: absolute; left: 0; top: 0; } .banner_1_box .banner_pro_box .banner_pro_list .pro_item span { display: inline-block; width: 1px; margin-left: -1px; line-height: 100%; height: 100%; vertical-align: bottom; } .banner_1_box .banner_pro_box .banner_pro_list .pro_item img { display: inline-block; line-height: 100%; vertical-align: bottom; max-width: 100%; max-height: 100%; } .banner_1_box .pro_btn { display: block; width: 50px; height: 50px; position: absolute; top: 50%; margin-top: -3%; z-index: 10; cursor: pointer; } .banner_1_box .pro_btn.prev { background: url(/uploads/image/asi/pro_prev.png) no-repeat; background-size: 56% 100%; left: 8.8%; } .banner_1_box .pro_btn.next { background: url(/uploads/image/asi/pro_next.png) no-repeat right; background-size: 56% 100%; right: 8.8%; } .banner_1_box .pro_btn.prev:hover { background: url(/uploads/image/asi/pro_prev_hover.png) no-repeat; background-size: 56% 100%; } .banner_1_box .pro_btn.next:hover { background: url(/uploads/image/asi/pro_next_hover.png) no-repeat right; background-size: 56% 100%; } .banner_1_box .pro_num { display: block; width: 100%; text-align: center; height: 12px; position: absolute; bottom: 0; left: 0; } .banner_1_box .pro_num .clicktext { display: inline-block; width: 8px; height: 8px; border: 1px solid #10645c; border-radius: 50%; text-indent: 5000px; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; margin: 0 3px; vertical-align: middle; cursor: pointer; } .banner_1_box .pro_num .clicktext.cur { background: #10645c; -webkit-transform: scale(1.3); -moz-transform: scale(1.3); transform: scale(1.3); } .banner.box1 .banner_1_box { display: block; } .banner.box2 .video_room { display: block; left: 63.75%; top: 22.3%; } .banner.box3 .video_room { display: block; left: 9.8958%; top: 21.8367%; } .banner.box4 .video_room { display: block; left: 59.1666%; top: 26.1632%; } .padbottom { display: none; } .jump_close { position: absolute; display: block; bottom: 5%; left: 50%; width: 140px; margin-left: -70px; border-radius: 40px; border: 2px solid #fff; z-index: 10; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .jump_close:hover { border: 2px solid #f26521; background: #f26521; } .jump_close img { width: 100%; } @media screen and (max-width: 1366px) { .jump_close { -webkit-transform: scale(1.3, 1.3); -moz-transform: scale(1.3, 1.3); -o-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3); } } @media screen and (max-width: 1200px) { .top { padding-bottom: 20px; } } @media screen and (min-width: 770px) and (max-width: 1025px) { .banner.box2 .video_room { display: block; left: 67%; top: 22.3%; } } .blufix { width: 100%; height: 100%; position: fixed; left: 0; top: 0; background: #9df5ee; z-index: 9; display: none; } /*��������*/ .float_top { display: block; width: 100%; height: auto; position: fixed; top: 0; left: 0; z-index: 3; -webkit-transform: translate3d(0, -100%, 0); -moz-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } .float_top .top_mini { width: 100%; height: 40px; position: absolute; left: 0; top: 0; z-index: 1; text-align: center; background: #fff; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transform: translate3d(0, -100%, 0); -moz-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } .float_top .top_mini.show { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .float_top .top_mini .left { width: 30%; position: absolute; left: 0; top: 0; height: 40px; vertical-align: middle; } .float_top .top_mini .left .logo { display: inline-block; width: 68px; height: 27px; margin-top: 6px; float: left; margin-left: 6%; } .float_top .top_mini .left .logo img { width: 100%; display: inline-block; } .float_top .top_mini .left .tell { display: inline-block; width: 160px; height: 16px; margin-top: 10px; float: left; margin-left: 4%; } .float_top .top_mini .right { width: 30%; position: absolute; right: 0; top: 0; height: 40px; vertical-align: middle; } .float_top .top_mini .right .shop_link { display: inline-block; padding: 0 5px; height: 20px; font-size: 12px; line-height: 20px; text-align: center; background: #eb6000; color: #fff; vertical-align: top; border-radius: 4px; margin-right: 4%; float: right; margin-top: 10px; } .float_top .top_mini .right .search_link { display: block; width: 20px; height: 20px; background: url(/uploads/image/asi/search_btn.png) no-repeat center; background-size: 100% 100%; margin-top: 10px; float: right; margin-right: 6%; } .float_top .top_mini .menu_btn { display: inline-block; height: 40px; line-height: 40px; font-size: 16px; color: #eb6000; font-family: 'microsoft yahei'; padding: 0 10px; cursor: pointer; } .float_top .top_mini .menu_btn span { display: inline-block; vertical-align: middle; } .float_top .top_mini .menu_btn i { display: inline-block; width: 9px; height: 7px; vertical-align: middle; background: no-repeat center; margin-left: 6px; } .float_top .top_mini .menu_btn:hover i { -webkit-animation: menu_arrow 1s linear 0s infinite forwards; -moz-animation: menu_arrow 1s linear 0s infinite forwards; animation: menu_arrow 1s linear 0s infinite forwards; } /*��ʒģ��*/ .product_cont { display: block; width: 100%; background: #f7f7f7; position: relative; overflow: hidden; } .product_cont .fruit_1 { width: 29.4%; position: absolute; left: -10%; top: 35.7%; z-index: 1; } .product_cont .fruit_2 { width: 31.14%; position: absolute; right: -19.6%; top: 18.2%; z-index: 1; } .product_cont .product_textbox { display: block; width: 16%; height: 76%; border: 2px solid #eb6000; position: absolute; left: 42%; top: 14.28%; } .product_cont .product_textbox .product_title { display: block; width: 100%; position: absolute; top: 6.3%; left: 0; text-align: center; font-size: 38px; line-height: 38px; color: #eb6000; font-weight: normal; } .product_cont .product_textbox .product_text em { display: block; text-align: center; font-size: 12px; color: #a0a0a0; line-height: 12px; margin-bottom: 1%; margin-top: 1.6%; } .product_cont .product_textbox .product_text span { display: block; text-align: center; font-size: 18px; color: #eb6000; line-height: 18px; margin-bottom: 1%; font-family: "xf"; } .product_cont .product_textbox .product_text i { display: block; text-align: center; font-size: 14px; color: #eb6000; line-height: 14px; } .product_cont .product_textbox .product_text .product_font { width: 100%; } .product_cont .product_textbox .product_text.text_1 { display: block; width: 188%; height: 11.8%; position: absolute; top: 14%; left: -44%; background: #f7f7f7; text-align: center; font-family: simsun; } .product_cont .product_textbox .product_text.text_2 { display: block; text-align: center; width: 100%; position: absolute; bottom: 4.3%; left: 0; } .product_room { display: block; width: 100%; height: 40.8%; position: absolute; top: 38.26%; left: 0; overflow: hidden; background: #f7f7f7; z-index: 2; opacity: 0; transition: all 0.5s ease; transition: all 0.5s ease; } .product_room.cur { opacity: 1; } .product_room .product_list { display: block; width: 100%; height: 100%; font-size: 0; } .product_room .product_list .product_item { display: block; width: 16.66%; height: 100%; float: left; position: relative; cursor: pointer; z-index: 1; margin: 0; } .product_room .product_list .product_item .bigimg_box { display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; font-size: 0; text-align: center; } .product_room .product_list .product_item .bigimg_box span { display: inline-block; width: 1px; margin-left: -1px; line-height: 100%; height: 100%; vertical-align: middle; } .product_room .product_list .product_item .bigimg_box img { display: inline-block; line-height: 100%; vertical-align: middle; width: 100%; } .product_room .product_list .product_item .smallimg_box { display: block; width: 43.75%; height: 35%; position: absolute; left: 28.125%; top: 32.5%; z-index: 3; font-size: 0; text-align: center; opacity: 0; filter: alpha(opacity=0); -moz-transition: all ease 0.3s; -webkit-transition: all ease 0.3s; -o-transition: all ease 0.3s; transition: all ease 0.3s; } .product_room .product_list .product_item .mask { position: absolute; z-index: 1; width: 100%; height: 100%; opacity: 0; filter: alpha(opacity=0); -moz-transition: all ease 0.3s; -webkit-transition: all ease 0.3s; -o-transition: all ease 0.3s; transition: all ease 0.3s; } .product_room .product_list .product_item:hover .mask { opacity: 1; filter: alpha(opacity=100); } .product_room .product_list .product_item .smallimg_box span { display: inline-block; width: 1px; margin-left: -1px; line-height: 100%; height: 100%; vertical-align: bottom; } .product_room .product_list .product_item .smallimg_box img { display: inline-block; line-height: 100%; vertical-align: bottom; max-width: 100%; max-height: 100%; } .product_room .product_list .product_item .item_font { display: block; width: 100%; height: 21%; position: absolute; bottom: 0; left: 0; background: rgba(245, 163, 170, .9); z-index: 2; -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; } .product_room .product_list .product_item .item_font strong { display: block; text-align: center; color: #fff; font-size: 24px; line-height: 24px; margin-bottom: 5px; margin-top: 7%; font-weight: normal; } .product_room .product_list .product_item .item_font em { display: block; text-align: center; color: #fff; font-size: 12px; line-height: 12px; font-family: "xf"; } .product_room .product_list .product_item:hover .item_font { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .product_room .product_list .product_item:hover .item_font.show { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .product_room .product_list .product_item:hover .smallimg_box { opacity: 1; filter: alpha(opacity=100); } .product_room .machine_list { display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; font-size: 0; background: rgba(245, 163, 170, .95); text-align: center; z-index: 2; -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; } .product_room .machine_list.show { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .product_room .machine_list .machine_close { display: block; width: 1%; height: 6.25%; position: absolute; right: 1.5%; top: 7.5%; z-index: 2; background: url(/uploads/image/asi/machine_close.png) no-repeat; background-size: 100% 100%; cursor: pointer; } .product_room .machine_list .machine_item { display: inline-block; width: 16.66%; height: 100%; position: relative; cursor: pointer; z-index: 1; } .product_room .machine_list .machine_item .img_box { display: block; width: 62.5%; height: 50%; position: absolute; left: 18.75%; top: 25%; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; } .product_room .machine_list .machine_item .img_box .line_img, .product_room .machine_list .machine_item .img_box .entity_img { display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; font-size: 0; text-align: center; z-index: 1; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; } .product_room .machine_list .machine_item .img_box .line_img span, .product_room .machine_list .machine_item .img_box .entity_img span { display: inline-block; width: 1px; margin-left: -1px; line-height: 100%; height: 100%; vertical-align: middle; } .product_room .machine_list .machine_item .img_box .line_img img, .product_room .machine_list .machine_item .img_box .entity_img img { display: inline-block; line-height: 100%; vertical-align: middle; max-width: 100%; max-height: 100%; } .product_room .machine_list .machine_item .img_box .entity_img { z-index: 2; opacity: 0; } .product_room .machine_list .machine_item .mechine_font { display: block; width: 100%; position: absolute; bottom: 11.25%; left: 0; text-align: center; color: #fff; opacity: 0; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; } .product_room .machine_list .machine_item .mechine_font strong { display: block; font-weight: normal; font-size: 24px; line-height: 24px; margin-bottom: 10px; } .product_room .machine_list .machine_item .mechine_font em { display: block; font-size: 12px; line-height: 12px; font-family: simsun; } .product_room .machine_list .machine_item:hover .img_box { -webkit-transform: translate3d(0, -10%, 0); -moz-transform: translate3d(0, -10%, 0); transform: translate3d(0, -10%, 0); } .product_room .machine_list .machine_item:hover .line_img { opacity: 0; } .product_room .machine_list .machine_item:hover .entity_img { opacity: 1; } .product_room .machine_list .machine_item:hover .mechine_font { opacity: 1; } /*�ƽ���ʒ*/ .special_cont { display: block; width: 100%; background: #fff; position: relative; font-size: 0; opacity: 0; transition: all 0.5s ease; -font-weight: : all 0.5s ease; } .special_cont.cur { opacity: 1; } .special_item { display: inline-block; width: 33.33%; height: 100%; position: relative; overflow: hidden; } .special_item .special_text { display: block; width: 100%; text-align: center; position: absolute; bottom: 68%; left: 0; color: #8b8b8b; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; } .special_item .special_text strong { display: block; font-size: 50px; line-height: 50px; margin-bottom: 15px; font-weight: normal; } .special_item .special_text em { display: block; font-size: 24px; line-height: 24px; margin-bottom: 15px; } .special_item .special_text p { font-size: 9px; line-height: 12px; width: 55%; margin: 0px auto; color: #dfdfdf; } .special_item .special_img { width: 100%; height: 57.15%; position: absolute; left: 0; bottom: 0; -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; -webkit-transform: scale(.96); -moz-transform: scale(.96); transform: scale(.96); } .special_item .special_img img { position: absolute; left: 0; bottom: 0; max-width: 100%; max-height: 100%; } .special_item.gray { background: #faf8f8; } .special_item:hover .special_text { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); transform: scale(1.1); color: #eb6000; } .special_item:hover .special_img { -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } .special_item:last-child .special_img { -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; text-align: right; } .special_item:last-child .special_img img { left: initial; right: 0; } /*���˱ر�*/ .essential_cont { display: block; width: 100%; position: relative; background: #f7f7f7; } .essential_cont .console { width: 22%; height: 78%; position: absolute; left: 39%; top: 0; background: #fff; } .essential_cont .console .console_text { width: 100%; text-align: center; margin-top: 18%; } .essential_cont .console .console_text strong { display: block; font-weight: normal; color: #464646; font-size: 32px; line-height: 32px; margin-bottom: 15px; } .essential_cont .console .console_text em { display: block; color: #acacac; font-size: 12px; line-height: 12px; } .essential_cont .console .console_box { width: 75%; height: 37.8%; position: absolute; left: 12.5%; bottom: 20%; font-size: 0; } .essential_cont .console .console_box .console_item { display: inline-block; width: 33.33%; height: 50%; position: relative; cursor: pointer; } .essential_cont .console .console_box .console_item.noclick { pointer-events: none; } .essential_cont .console .console_box .console_item .line_img, .essential_cont .console .console_box .console_item .color_img { display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; font-size: 0; text-align: center; z-index: 1; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; } .essential_cont .console .console_box .console_item .line_img span, .essential_cont .console .console_box .console_item .color_img span { display: inline-block; width: 1px; margin-left: -1px; line-height: 100%; height: 100%; vertical-align: middle; } .essential_cont .console .console_box .console_item .line_img img, .essential_cont .console .console_box .console_item .color_img img { display: inline-block; line-height: 100%; vertical-align: middle; max-width: 100%; max-height: 100%; } .essential_cont .console .console_box .console_item .color_img img { width: 100px; height: 100px; max-width: 100px; max-height: 100px; } .essential_cont .console .console_box .console_item .color_img { z-index: 2; opacity: 0; } .essential_cont .console .console_box .console_item1 .line_img { background: url(/uploads/image/asi/icon3.png) no-repeat center top; } .essential_cont .console .console_box .console_item1:hover .line_img, .essential_cont .console .console_box .console_item1.click .line_img { background: url(/uploads/image/asi/icon3.png) no-repeat center -100px; } .essential_cont .console .console_box .console_item2 .line_img { background: url(/uploads/image/asi/icon3.png) no-repeat center -200px; } .essential_cont .console .console_box .console_item2:hover .line_img, .essential_cont .console .console_box .console_item2.click .line_img { background: url(/uploads/image/asi/icon3.png) no-repeat center -300px; } .essential_cont .console .console_box .console_item3 .line_img { background: url(/uploads/image/asi/icon3.png) no-repeat center -400px; } .essential_cont .console .console_box .console_item3:hover .line_img, .essential_cont .console .console_box .console_item3.click .line_img { background: url(/uploads/image/asi/icon3.png) no-repeat center -500px; } .essential_cont .console .console_box .console_item4 .line_img { background: url(/uploads/image/asi/icon3.png) no-repeat center -600px; } .essential_cont .console .console_box .console_item4:hover .line_img, .essential_cont .console .console_box .console_item4.click .line_img { background: url(/uploads/image/asi/icon3.png) no-repeat center -700px; } .essential_cont .console .console_box .console_item5 .line_img { background: url(/uploads/image/asi/icon3.png) no-repeat center -800px; } .essential_cont .console .console_box .console_item5:hover .line_img, .essential_cont .console .console_box .console_item5.click .line_img { background: url(/uploads/image/asi/icon3.png) no-repeat center -900px; } .essential_cont .console .console_box .console_item6 .line_img { background: url(/uploads/image/asi/icon3.png) no-repeat center -1000px; } .essential_cont .console .console_box .console_item6:hover .line_img, .essential_cont .console .console_box .console_item6.click .line_img { background: url(/uploads/image/asi/icon3.png) no-repeat center -1100px; } .essential_cont .console .console_box .console_item:hover .line_img {} .essential_cont .console .console_box .console_item.click .line_img {} .essential_cont .console .btn_box { display: block; width: 100%; height: 10.6%; position: absolute; bottom: 0; left: 0; font-size: 0; } .essential_cont .console .btn_box .color_btn { display: inline-block; width: 50%; height: 100%; border: 2px solid #fff; box-sizing: border-box; background: #f7f7f7; position: relative; cursor: pointer; } .essential_cont .console .btn_box .color_btn em { display: block; width: 100%; height: 14px; font-size: 14px; color: #eb6000; text-align: center; line-height: 14px; position: absolute; top: 50%; margin-top: -7px; left: 0; opacity: 0; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; } .essential_cont .console .btn_box .color_btn em::selection { color: #eb6000; background: rgba(255, 255, 255, 0); } .essential_cont .console .btn_box .color_btn em::-moz-selection { color: #eb6000; background: rgba(255, 255, 255, 0); } .essential_cont .console .btn_box .color_btn em::-webkit-selection { color: #eb6000; background: rgba(255, 255, 255, 0); } .essential_cont .console .btn_box .color_btn.prev { border-right: 1px solid #fff; } .essential_cont .console .btn_box .color_btn.prev i { display: block; width: 0; height: 0; border-color: rgba(0, 0, 0, 0) #a5a5a5 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); border-style: dashed solid dashed dashed; border-width: 5px; position: absolute; left: 50%; margin-left: -10px; top: 50%; margin-top: -5px; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; } .essential_cont .console .btn_box .color_btn.next { border-left: 1px solid #fff; } .essential_cont .console .btn_box .color_btn.next i { display: block; width: 0; height: 0; border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #a5a5a5; border-style: dashed dashed dashed solid; border-width: 5px; position: absolute; right: 50%; margin-right: -10px; top: 50%; margin-top: -5px; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; } .essential_cont .console .btn_box .color_btn.prev:hover i { border-color: rgba(0, 0, 0, 0) #eb6000 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); -webkit-transform: translate3d(-350%, 0, 0); -moz-transform: translate3d(-350%, 0, 0); transform: translate3d(-350%, 0, 0); } .essential_cont .console .btn_box .color_btn.next:hover i { border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #eb6000; -webkit-transform: translate3d(350%, 0, 0); -moz-transform: translate3d(350%, 0, 0); transform: translate3d(350%, 0, 0); } .essential_cont .console .btn_box .color_btn:hover em { opacity: 1; } .essential_cont .console .btn_box .color_btn.noclick { pointer-events: none; } .essential_cont .essential_font { display: block; width: 22%; height: 16%; position: absolute; left: 39%; bottom: 0; } .essential_cont .essential_font .font_item { display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: none; } .essential_cont .essential_font .font_item em { display: block; width: 85%; margin: 0px auto 10px; color: #878787; line-height: 22px; text-align: center; margin-bottom: 10px; } .essential_cont .essential_font .font_item a { display: block; width: 100%; text-align: center; font-size: 12px; color: #eb6000; } .essential_cont .essential_font .font_item.show { display: block; } .essential_cont .pro_left { width: 39%; height: 100%; position: absolute; left: 0; top: 0; overflow: hidden; } .essential_cont .pro_right { width: 39%; height: 100%; position: absolute; right: 0; top: 0; overflow: hidden; } .essential_cont .pro_left .img_box, .essential_cont .pro_right .img_box { display: block; width: 52.6%; height: 58.8%; position: absolute; left: 23.7%; top: 20.6%; font-size: 0; text-align: center; } .essential_cont .pro_left .img_box span, .essential_cont .pro_right .img_box span { display: inline-block; width: 1px; margin-left: -1px; line-height: 100%; height: 100%; vertical-align: middle; } .essential_cont .pro_left .img_box img, .essential_cont .pro_right .img_box img { display: inline-block; line-height: 100%; vertical-align: middle; max-width: 100%; max-height: 100%; } .essential_cont .pro_left .img_box .img_text, .essential_cont .pro_right .img_box .img_text { display: block; text-align: center; font-size: 16px; color: #494949; width: 100%; position: absolute; bottom: -21%; left: 0; font-weight: normal; } .essential_cont .pro_left .img_box .img_text strong, .essential_cont .pro_right .img_box .img_text strong, .essential_cont .pro_left .img_box .img_text em, .essential_cont .pro_right .img_box .img_text em { display: block; text-align: center; margin-bottom: 8px; } .essential_cont .pro_left.run .img_box { -webkit-animation: pro_left 1.6s ease 0s 1 forwards; -moz-animation: pro_left 1.6s ease 0s 1 forwards; animation: pro_left 1.6s ease 0s 1 forwards; } .essential_cont .pro_right.run .img_box { -webkit-animation: pro_right 1.6s ease 0s 1 forwards; -moz-animation: pro_right 1.6s ease 0s 1 forwards; animation: pro_right 1.6s ease 0s 1 forwards; } .essential_cont .pro_left { width: 39%; height: 100%; position: absolute; left: 0; top: 0; overflow: hidden; } .essential_cont .pro_right { width: 39%; height: 100%; position: absolute; right: 0; top: 0; overflow: hidden; } .essential_cont .pro_left .img_box, .essential_cont .pro_right .img_box { display: block; width: 52.6%; height: 58.8%; position: absolute; left: 23.7%; top: 20.6%; font-size: 0; text-align: center; } .essential_cont .pro_left .img_box span, .essential_cont .pro_right .img_box span { display: inline-block; width: 1px; margin-left: -1px; line-height: 100%; height: 100%; vertical-align: middle; } .essential_cont .pro_left .img_box img, .essential_cont .pro_right .img_box img { display: inline-block; line-height: 100%; vertical-align: middle; max-width: 100%; max-height: 100%; } .essential_cont .pro_left.run .img_box { -webkit-animation: pro_left 1.6s ease 0s 1 forwards; -moz-animation: pro_left 1.6s ease 0s 1 forwards; animation: pro_left 1.6s ease 0s 1 forwards; } .essential_cont .pro_right.run .img_box { -webkit-animation: pro_right 1.6s ease 0s 1 forwards; -moz-animation: pro_right 1.6s ease 0s 1 forwards; animation: pro_right 1.6s ease 0s 1 forwards; } /*�ĸ�ģ��*/ .module_cont { display: block; width: 100%; position: relative; background: #fff; font-size: 0; text-align: center; } .module_cont .module_box { display: inline-block; width: 25%; height: 100%; box-sizing: border-box; vertical-align: top; overflow: hidden; border-right: 1px solid #f7f7f7; box-sizing: border-box; } .module_cont .module_box .box_title { width: 100%; height: 35%; text-align: center; margin-top: 10%; margin-bottom: 6.5%; position: relative; z-index: 1; } .module_cont .module_box .box_title .title_logo { display: block; width: 100px; margin: 0px auto 4%; overflow: hidden; position: relative; box-sizing: border-box; } .module_cont .module_box .box_title .title_logo img { width: 100%; height: 100%; z-index: 1; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; } .module_cont .module_box .box_title .title_logo img.img_2 { opacity: 0; } .module_cont .module_box .box_title .title_font { display: block; text-align: center; font-size: 26px; line-height: 26px; color: #909090; } .module_cont .module_box .box_cont { width: 100%; height: 48%; z-index: 2; position: relative; } .module_cont .module_box .icon_list { width: 92%; height: 92%; font-size: 0; overflow: hidden; margin: 0px auto; position: relative; } .module_cont .module_box .icon_list .icon_item { display: inline-block; width: 23%; height: 42.9%; margin: 0 1% 4% 1%; vertical-align: top; position: relative; } .module_cont .module_box .icon_list .icon_item .icon_img { display: block; width: 80%; height: 93%; overflow: hidden; border: 1px solid #e4e4e4; box-sizing: border-box; border-radius: 50%; margin: 0px auto 12%; } .module_cont .module_box .icon_list .icon_item .icon_img img { width: 100%; height: 100%; } .module_cont .module_box .icon_list .icon_item .icon_font { display: block; text-align: center; font-size: 12px; line-height: 12px; color: #8b8b8b; } .module_cont .module_box .icon_list .icon_item .code_em { display: block; width: 165px; height: 165px; padding: 10px; border: 2px solid #eb6100; position: absolute; top: -208px; left: 50%; margin-left: -92.5px; display: none; opacity: 0; background: #fff; } .module_cont .module_box .icon_list .icon_item .code_em img { width: 100%; height: 100%; } .module_cont .module_box .icon_list .icon_item .code_em i { display: block; width: 32px; height: 16px; background: url(/uploads/image/asi/code_arrow.png) no-repeat; background-size: 100% 100%; position: absolute; bottom: -16px; left: 50%; margin-left: -16px; } .module_cont .module_box .icon_list .icon_item .icon_img:hover { border: 1px solid #eb6000; } .module_cont .module_box .icon_list .icon_part { display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: none; } .module_cont .module_box .icon_list .icon_num { width: 100%; text-align: center; position: absolute; top: 65%; height: 12px; } .module_cont .module_box .icon_list .icon_num .icon_text { display: inline-block; width: 10px; height: 10px; border: 1px solid #c7c7c7; background: #fff; border-radius: 50%; box-sizing: border-box; margin: 0 5px; cursor: pointer; } .module_cont .module_box .icon_list .icon_num .icon_text.cur { border: 1px solid #eb6000; background: #eb6000; } .module_cont .module_box.noflow .icon_list .icon_item:hover .icon_img { border: 1px solid #eb6000; } .module_cont .module_box.noflow .icon_list .icon_item:hover .code_em { display: block; -webkit-animation: opcity .6s linear 0s 1 forwards; -moz-animation: opcity .6s linear 0s 1 forwards; animation: opcity .6s linear 0s 1 forwards; } .module_cont .module_box.noflow { overflow: visible; } .module_cont .module_box .icon_list.noflow { overflow: visible; } .module_cont .module_box .box_cont .ad_box { width: 86%; height: 75%; font-size: 0; overflow: hidden; margin: 0px auto; position: relative; } .module_cont .module_box .box_cont .ad_box .ad_img { display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; text-align: center; font-size: 0; display: none; } .module_cont .module_box .box_cont .ad_box .ad_img span { display: inline-block; width: 1px; margin-left: -1px; line-height: 100%; height: 100%; vertical-align: bottom; } .module_cont .module_box .box_cont .ad_box .ad_img img { display: inline-block; line-height: 100%; vertical-align: bottom; max-width: 100%; max-height: 100%; } .module_cont .module_box .box_cont .ad_num { display: block; width: 100%; height: 7px; position: absolute; bottom: 10px; text-align: center; } .module_cont .module_box .box_cont .ad_num .text { display: inline-block; width: 16px; height: 4px; background: #fff; margin: 0 2px; vertical-align: bottom; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; cursor: pointer; } .module_cont .module_box .box_cont .ad_num .text.cur { height: 7px; background: #eb6000; } .module_cont .module_box:hover .box_title .title_font { color: #eb6000; } .module_cont .module_box:hover .box_title .title_logo .img_1 { opacity: 0; } .module_cont .module_box:hover .box_title .title_logo .img_2 { opacity: 1; } .hide { -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } .show { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .pad_search { display: none; } .icon_box1 { background: url(/uploads/image/asi/icon2.png) no-repeat center top; background-size: 100% auto; } .icon_box2 { background: url(/uploads/image/asi/icon2.png) no-repeat center 28.6%; background-size: 100% auto; } .icon_box3 { background: url(/uploads/image/asi/icon2.png) no-repeat center 57.2%; background-size: 100% auto; } .icon_box4 { background: url(/uploads/image/asi/icon2.png) no-repeat center 85.7%; background-size: 100% auto; } .module_box:hover .icon_box1 { background: url(/uploads/image/asi/icon2.png) no-repeat center 14.3%; background-size: 100% auto; } .module_box:hover .icon_box2 { background: url(/uploads/image/asi/icon2.png) no-repeat center 42.8%; background-size: 100% auto; } .module_box:hover .icon_box3 { background: url(/uploads/image/asi/icon2.png) no-repeat center 71.4%; background-size: 100% auto; } .module_box:hover .icon_box4 { background: url(/uploads/image/asi/icon2.png) no-repeat center bottom; background-size: 100% auto; } .loading_t { position: absolute; width: 100%; height: 100%; background: #fff url(/uploads/image/asi/jy_icon8.png) no-repeat center; z-index: 100; } @media screen and (max-width: 1550px) { .module_cont .module_box .box_title .title_logo { width: 80px; } } @media screen and (max-width: 1280px) { .module_cont .module_box .box_title { margin-bottom: 35px; } } @media screen and (max-width: 769px) { .top .left { width: 12%; } .top .logo { display: inline-block; width: 100%; vertical-align: middle; font-size: 0; margin-top: -3%; } .top .tell { display: none; } .top .shop_link { padding: 0 8px; height: 30px; line-height: 30px; margin-top: -10px; margin-bottom: 0px; margin-right: 0; } .top .search_link { display: none; } .pad_search { display: block; display: inline-block; width: 20px; height: 20px; background: url(/uploads/image/asi/search_btn.png) no-repeat center; background-size: 100% 100%; margin-left: 10px; margin-top: -2px; } .top .right { padding-top: 30px; height: 50px; top: 0; } .top .search_link span { padding: 0 7px; margin-right: 0; height: 20px; line-height: 20px; } .float_top .top_mini .left .tell { display: none; } .float_top .top_cont .right .shop_link { margin-right: 10px; } .float_top .top_cont .left, .float_top .top_cont .right { width: 100px; } .float_top .top_cont { height: 70px; } .float_top .top_cont .menu .menu_item { margin: 0 15px; } .float_top .top_cont .menu .menu_item .item_title { font-size: 14px; line-height: 14px; padding: 27px 15px; } .float_top .top_cont .menu .menu_item .sub_menu { top: 70px; } .float_top .top_cont .menu .menu_item .sub_menu .sub_item { padding: 15px 15px; } .float_top .top_cont .left .tell { display: none; } .float_top .top_cont .left .logo { width: 90%; margin-top: 15px; } .float_top .top_cont .right .shop_link { margin-bottom: 5px; margin-top: -8px; margin-right: 0; } .float_top .top_cont .right .search_link { text-align: right; } .float_top .top_cont .right .search_link span { padding: 0 7px; margin-right: 0; } .product_cont .product_textbox .product_title { font-size: 18px; line-height: 18px; } .product_cont .product_textbox .product_text em { font-size: 9px; line-height: 9px; } .product_room .machine_list .machine_item .mechine_font { bottom: 8%; } .product_room .machine_list .machine_item .mechine_font strong { font-size: 14px; line-height: 14px; margin-bottom: 5px; } .product_room .product_list .product_item .item_font strong { font-size: 14px; line-height: 14px; margin-top: 10%; } .product_room .product_list .product_item .item_font em { font-size: 10px; line-height: 10px; } .product_cont .product_textbox .product_text.text_2 { bottom: 1.5%; } .product_cont .product_textbox .product_text span { font-size: 12px; line-height: 12px; } .product_cont .product_textbox .product_text i { font-size: 12px; line-height: 12px; } .special_item .special_text strong { font-size: 26px; line-height: 26px; margin-bottom: 10px; } .special_item .special_text em { font-size: 14px; line-height: 14px; margin-bottom: 10px; } .special_item .special_text p { line-height: 10px; width: 80%; margin: 0px auto; color: #dfdfdf; } .footer .phone { font-size: 24px; line-height: 24px; } .footer .footer_nav .nav_item { margin: 0 16px; } .module_cont .module_box .box_title .title_font { font-size: 20px; } .module_cont { display: none; } .padborder { border: none; } .padbottom { height: 260px; display: block; } .pad_left { float: left; width: 25%; height: 100%; } .pad_left .box { border-right: 1px solid #d9d9d9; width: 100%; box-sizing: border-box; height: 100%; } .pad_right { float: right; width: 75%; height: 100%; } .padbottom .pad_title { height: 58%; } .pad_right .pad_cut { float: left; width: 33.1%; height: 90%; border-left: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9; box-sizing: border-box; } .pad_right .pad_cut.cur { border-bottom: none; } .padbottom .box_title { height: 70%; text-align: center; padding-top: 10%; position: relative; z-index: 1; } .padbottom .box_title .title_logo { display: block; width: 37%; height: 73.8%; border: 1px solid #929292; border-radius: 50%; margin: 0px auto 4%; overflow: hidden; position: relative; box-sizing: border-box; } .padbottom .pad_cut.cur .box_title .title_logo { border: 1px solid #eb6000; } .padbottom .pad_cut.cur .box_title .title_font { color: #eb6000; } .padbottom .box_title .title_logo img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; } .padbottom .box_title .title_logo img.img_2 { opacity: 0; } .padbottom .pad_cut.cur .box_title .title_logo img.img_2 { opacity: 1; } .padbottom .pad_cut.cur .box_title .title_logo img.img_1 { opacity: 0; } .padbottom .box_title .title_font { display: block; text-align: center; font-size: 18px; line-height: 26px; color: #909090; } .padcont { width: 100%; height: 40%; } .padcont .padborder { width: 100%; height: 100%; text-align: left; padding-left: 10px; box-sizing: border-box; } .padcont .padborder .icon_item { display: inline-block; width: 80px; height: 42.9%; margin: 0 5px; vertical-align: top; position: relative; } .padcont .padborder .icon_item .icon_img { display: block; width: 64px; height: 64px; overflow: hidden; border: 1px solid #e4e4e4; box-sizing: border-box; border-radius: 50%; margin: 0px auto 12%; } .padcont .padborder .icon_item .icon_img img { width: 100%; } .padcont .padborder .icon_item .icon_font { display: block; text-align: center; font-size: 12px; line-height: 16px; color: #8b8b8b; } .padcont .padborder .icon_item .code_em { display: block; width: 165px; height: 165px; padding: 10px; border: 2px solid #eb6100; position: absolute; top: -208px; left: 50%; margin-left: -92.5px; display: none; background: #fff; z-index: 2; } .padcont .padborder .icon_item.cur .code_em { display: block; } .padcont .padborder .icon_item .code_em img { width: 100%; height: 100%; } .padcont .padborder .icon_item .code_em i { display: block; width: 32px; height: 16px; background: url(/uploads/image/asi/code_arrow.png) no-repeat; background-size: 100% 100%; position: absolute; bottom: -16px; left: 50%; margin-left: -16px; } .padcont .padborder .icon_item.cur .icon_img { border: 1px solid #eb6000; } .essential_cont .console .console_box { width: 84%; left: 8%; } .essential_cont .console { width: 26%; left: 37%; } .essential_cont .console .console_text { margin-top: 10%; } .float_top2 .top_mini2 .left .tell { display: none; } .top_cont2 .menu2 .menu_item2 .item_title { padding: 33px 5px; } .padborder #wrapper { width: 100%; overflow: hidden; } .banner_1_box .banner_1_font { display: none; } .banner_1_box { left: -4%; top: 48%; width: 60%; } .banner_1_box .pro_btn.prev { left: 12%; } .banner_1_box .pro_btn.next { right: 12%; } .essential_cont .pro_left .img_box, .essential_cont .pro_right .img_box { top: 15.6%; } .essential_cont .pro_left .img_box .img_text, .essential_cont .pro_right .img_box .img_text { bottom: -37%; } .product_room { top: 37.26%; } .video_room { width: 45%; } .banner.box2 .video_room { left: 40%; } } @media screen and (min-width: 770px) and (max-width: 1025px) { .top .nav .item { font-size: 14px; line-height: 20px; } .top .shop_link { line-height: 20px; height: 20px; } .top .search_link { line-height: 20px; height: 20px; } .float_top .top_cont .left, .float_top .top_cont .right { width: 200px; margin-top: 5px; } .float_top .top_cont { height: 80px; } .float_top .top_cont .menu .menu_item { margin: 0 20px; } .float_top .top_cont .menu .menu_item .item_title { font-size: 14px; line-height: 14px; padding: 32px 15px; } .float_top .top_cont .menu .menu_item .sub_menu { top: 80px; } .float_top .top_cont .menu .menu_item .sub_menu .sub_item { padding: 15px 15px; } .product_room .machine_list .machine_item .mechine_font strong { font-size: 16px; line-height: 16px; margin-bottom: 5px; } .product_cont .product_textbox .product_title { font-size: 20px; line-height: 20px; } .product_cont .product_textbox .product_text em { font-size: 10px; line-height: 10px; } .product_room .product_list .product_item .item_font strong { font-size: 18px; line-height: 18px; margin-top: 12%; } .product_cont .product_textbox .product_text.text_2 { bottom: 2.5%; } .product_cont .product_textbox .product_text span { font-size: 14px; line-height: 14px; } .product_cont .product_textbox .product_text i { font-size: 12px; line-height: 12px; } .special_item .special_text strong { font-size: 36px; line-height: 36px; margin-bottom: 10px; } .special_item .special_text em { font-size: 18px; line-height: 18px; margin-bottom: 10px; } .special_item .special_text p { width: 70%; } .module_cont .module_box .box_title .title_font { font-size: 18px; line-height: 18px; } .module_cont .module_box .icon_list .icon_item .icon_font { font-size: 8px; line-height: 14px; } .footer .phone { font-size: 26px; line-height: 26px; } .footer .footer_nav .nav_item { margin: 0 16px; } .essential_cont .essential_font { height: 18%; } .essential_cont .essential_font .font_item em { line-height: 16px; font-size: 10px; margin-bottom: 5px; } .module_cont .module_box .icon_list .icon_num { top: 87%; } .essential_cont .pro_left .img_box, .essential_cont .pro_right .img_box { top: 15.6%; } .essential_cont .pro_left .img_box .img_text, .essential_cont .pro_right .img_box .img_text { bottom: -31%; } } @media screen and (min-width:1026px) and (max-width: 1366px) { .essential_cont .console .console_box { bottom: 18% !important; } .essential_cont .console .console_text { margin-top: 26% !important; } .essential_cont .console .console_box .console_item .line_img, .essential_cont .console .console_box .console_item .color_img { zoom: 70%; } .float_top .top_cont .left, .float_top .top_cont .right { width: 250px; } .float_top .top_cont { height: 80px; } .float_top .top_cont .menu .menu_item { margin: 0 16px; } .float_top .top_cont .menu .menu_item .item_title { font-size: 14px; line-height: 14px; padding: 32px 15px; } .float_top .top_cont .menu .menu_item .sub_menu { top: 80px; } .float_top .top_cont .menu .menu_item .sub_menu .sub_item { padding: 20px 15px; } .product_room .machine_list .machine_item .mechine_font strong { font-size: 20px; line-height: 20px; } .product_cont .product_textbox .product_title { font-size: 30px; line-height: 30px; } .product_room .product_list .product_item .item_font strong { font-size: 20px; line-height: 20px; } .special_item .special_text strong { font-size: 40px; line-height: 40px; margin-bottom: 10px; } .special_item .special_text em { font-size: 20px; line-height: 20px; margin-bottom: 10px; } .special_item .special_text p { width: 60%; } .module_cont .module_box .box_title .title_font { font-size: 22px; line-height: 22px; } .module_cont .module_box .icon_list .icon_item .icon_font { font-size: 11px; line-height: 14px; } .footer .phone { font-size: 30px; line-height: 30px; } .essential_cont .essential_font .font_item em { line-height: 18px; } .module_cont .module_box .icon_list .icon_num { top: 70%; } } @media screen and (min-width:1367px) and (max-width: 1600px) { .float_top .top_cont .left, .float_top .top_cont .right { width: 300px; } .float_top .top_cont .left { margin-top: .5%; } .special_item .special_text p { width: 60%; } } @media screen and (min-width:1280px) and (max-width: 1600px) { .top .right { width: 24%; padding-top: 14px; } } @media screen and (max-width: 1620px) { .video-content { left: 55%; } } @media screen and (max-width: 1442px) { .video-content { left: 50%; } } @media screen and (max-width: 1300px) { .video-content { left: 45%; } } @media screen and (max-width: 1182px) { .video-content { left: 50%; transform: translate(-50%, -50%); } } .container { position: relative; } .container .logos { position: absolute; top: 5%; left: 5%; display: block; } .container .cent_cont { position: absolute; width: 100%; text-align: center; top: 25%; } .container .cent_cont .img { width: 14.8%; } .container .cent_cont h3 { font: normal 30px 'microsoft yahei'; color: #eb6100; margin-bottom: 20px; } .container .cent_cont p { color: #272727; font: normal 18px 'microsoft yahei'; margin-bottom: 40px; } .container .cent_cont ul { width: 840px; margin: 0 auto; } .container .cent_cont li { width: 100px; margin: 0 10px; float: left; } .container .cent_cont li img { margin-bottom: 10px; } .container .cent_cont li span { display: block; color: #5b5b5b; } .pop-box { background: rgba(255, 255, 255, 0.7); position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 999999; text-align: center; vertical-align: middle; font-size: 0; } .pop-imgbox { width: 1000px; top: 50%; margin-top: -250px !important; height: 500px; left: 50%; display: block; margin: 0 auto; position: absolute; text-align: center; /* margin-left: -25%; */ transform: translatex(-50%); } .pop-imgbox i { position: absolute; background: url(/uploads/image/asimages/pop-close.png) no-repeat; background-size: 100% auto; width: 30px; height: 30px; right: -48px; top: -35px; cursor: pointer; }