.clearfix:after{ display: block; content: ''; clear: both; } button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"]>input[type="button"]::-moz-focus-inner{ border:none; padding:0;} input[type="button"], input[type="submit"], input[type="reset"], input[type="text"] { -webkit-appearance: none; } textarea { -webkit-appearance: none; } *{ box-sizing: border-box; } a{ -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } @font-face { font-family: 'cll1'; src: url("../img/DINPRO-MEDIUM.OTF"); } @font-face { font-family: 'cll2'; src: url("../img/Oswald-Medium.ttf"); } /*����*/ .all-head-box{ width: 100%; } .all-head{ width: 100%; background: #163c5d; position: relative; box-shadow: 0 2px 10px -9px #757575; } .head-warpper{ width: 83%; margin:0 auto; height: 95px; display: flex; align-items: center; justify-content: space-between; } .head-warpper h1{ position: relative; display: flex; align-items: center; height: 100%; background: #fff; padding-right: 2%; } .head-warpper h1 img{ max-width: 100%; } .head-warpper h1:before{ content: ""; position: absolute; right: 100%; top: 0; width: 1000vh; height: 100%; background: #fff; } .head-menu{ display: flex; align-items: center; justify-content: space-between; width: 66%; } .head-menu ul{ display: flex; width: 71%; justify-content: space-between; flex-wrap: nowrap; } .head-menu ul li{ position: relative; height: 95px; display: flex; align-items: center; flex-wrap: wrap; } .head-menu ul li:before{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; margin: auto; width: 0; height: 6px; background: #13b87b; transition: 0.3s; } .head-menu ul li.active:before, .head-menu ul li:hover:before { left: -10px; width: 25px; } .head-menu ul li:after{ content: "/"; position: absolute; right: -21px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); color: #285073; font-size: 14px; font-weight: lighter; } .head-menu ul li:last-child:after{ display: none; } .head-menu ul li:last-child{ margin-right: 0; } .head-menu ul li>a{ color:#fff; font-size:16px; position: relative; z-index: 1; } .head-tel a{ display: block; line-height: 45px; background: #13b87b url("../img/tel.png") no-repeat left 25px center; font-size:24px; color:#fff; width: 245px; padding-left: 60px; border-radius: 30px; font-family: 'cll1'; } .head-menu ul li .erji{ position: absolute; left:50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); top:100%; z-index: 2; display: none; } .head-menu ul li:hover .erji{ display: block; } .head-menu ul li .erji a{ display: block; font-size:16px; color:#333; background: #fff; padding:0 20px; line-height: 40px; border-bottom:1px solid #eee; white-space: nowrap; } .head-menu ul li .erji a:hover{ background: #13b87b; color:#fff; } .head-menu ul li .erji:before{ content: ""; position: absolute; width: 0px; height: 0px; border: 13px solid transparent; border-bottom: 13px solid #fff; display: block; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); top: -26px; } /*banner*/ .swiper-container-banner .imgbox { position: relative; } .swiper-container-banner .imgbox img{ width: 100%; } .swiper-container-banner .banner-text{ position: absolute; width: 100%; display: none; } .swiper-container-banner .banner-text-inner{ width: 83%; margin:0 auto; position: relative; } .swiper-container-banner .banner-text-inner img{ max-width: 100%; margin:0 auto; } .swiper-container-banner .banner3-text .banner-text-inner img{ float: right; } .swiper-container-banner .banner2-text .banner-text-inner img{ margin-left: 0; } .swiper-container-banner .banner1-text{ top:30%; } .swiper-container-banner .banner2-text{ top:20%; } .swiper-container-banner .banner3-text{ top:30%; } .swiper-container-banner .swiper-pagination-bullet{ width: 13px; height: 13px; background: #fff; opacity: 0.6; } .swiper-container-banner .swiper-pagination-bullet-active{ background: none; opacity: 1; border:2px solid #fff; } /*�ܱ���*/ .all_index_title{ text-align:center; margin-bottom: 3%; } .all_index_title .fir{ font-size:40px; font-weight: 700; color:#363636; line-height: 45px; } .all_index_title img{ max-width: 100%; margin:12px auto; } .all_index_title .sec{ font-size:24px; color:#13b87b; line-height: 25px; font-family: cll2; text-transform: uppercase; } .textover{ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .index_product{ padding:4% 0; } .index_pro_type{ text-align:center; } .index_pro_type .abox{ position: relative; width: 100%; margin-bottom: 40px; } .index_pro_type .abox a{ display: block; line-height: 80px; background: #f6f6f6; text-align:center; font-size:22px; color:#313131; padding:0 5%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .index_pro_type .abox:after{ display: block; content:""; position: absolute; width: 0; height: 0; border-width: 10px; border-style: solid; border-color:#13b87b transparent transparent transparent; bottom:-30px; left:50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; opacity: 0; } .index_pro_type .abox:hover:after{ opacity: 1; } .index_pro_type .abox[date=active]:after{ opacity: 1; } .index_pro_type .abox:hover a{ color:#fff; background: #13b87b; } .index_pro_type .abox[date=active] a{ color:#fff; background: #13b87b; } .index_pro_type a i{ margin-left: 6%; color:#c5c5c5; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .index_pro_type .abox:hover a i{ color:#fff; } .index_pro_type .abox[date=active] a i{ color:#fff; } .index_pro_lunbo{ width: 100%; height: 700px; } .index_pro_lunbo_left{ float: left; width: 31%; height: 100%; background: #f6f6f6; padding:4% 3% 0 3%; } .swiper-container-pro{ width: 100%; height: 100%; } .index_pro_lunbo_left .title{ font-size:20px; color:#454545; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } .index_pro_lunbo_left .des{ font-size:16px; color:#9b9b9b; line-height: 25px; margin: 6% 0 14% 0; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; } .index_pro_lunbo_left span{ display: block; width: 150px; line-height: 50px; background: #13b87b; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; color:#fff; font-size:16px; text-align:center; } .index_pro_lunbo_left span:hover{ box-shadow: 0px 0px 20px #13b87b85; } .index_pro_lunbo_left span i{ color: #fff; font-size: 19px; margin-left: 9%; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .index_pro_lunbo_left span:hover i{ margin-left: 12%; } .index_pro_lunbo_left .imgbox{ width: 100%; margin-top: 29%; } .index_pro_lunbo_left .imgbox img{ max-width: 100%; margin:0 auto; } .index_pro_lunbo_right{ float: right; width: 67%; height: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; } .index_pro_lunbo_right_list{ width: 48.5%; } .index_pro_lunbo_right_list_inner .imgbox{ width: 100%; height: 280px; background: #f6f6f6; overflow: hidden; position: relative; } .index_pro_lunbo_right_list_inner .imgbox img{ position: absolute; max-width: 100%; max-height: 100%; top:0; bottom:0; left:0; right:0; margin:auto; } .index_pro_lunbo_right_list_inner .title{ line-height: 60px; padding:0 5%; border:1px solid #e6e6e6; border-top: none; font-size:18px; color:#454545; position: relative; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .index_pro_lunbo_right_list_inner .title em{ display: block; line-height: 60px; font-size:18px; color:#454545; width: 65%; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .index_pro_lunbo_right_list_inner:hover .title{ background: #13b87b; border:1px solid #13b87b; border-top: none; color:#fff; } .index_pro_lunbo_right_list_inner:hover .title em{ color:#fff; } .index_pro_lunbo_right_list_inner .title span{ display: block; line-height: 30px; width: 90px; text-align:center; background: #efefef; font-size:16px; color:#13b87b; font-family: 'cll1'; position: absolute; right: 5%; top:50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); text-transform: uppercase; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .index_pro_lunbo_right_list_inner:hover .title span{ background: #fff; color:#13b87b; } .index_pro_lunbo_right_list:nth-child(-n+2){ margin-bottom: 1%; } /*����*/ .index_youshi{ padding:4% 0 7% 0; background: url("../img/index_youshibg.jpg") no-repeat center / cover; } .index_youshi .index_youshi_box{ width: 100%; display: flex; justify-content: space-between; } .index_youshi_list{ width: 21.6%; background:url("../img/youshi_list_bg.png") no-repeat center bottom; background-size: auto 100%; padding-bottom: 4.5%; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .index_youshi_list:hover{ -webkit-transform: translateY(-10%); -moz-transform: translateY(-10%); -ms-transform: translateY(-10%); -o-transform: translateY(-10%); transform: translateY(-10%); } .index_youshi_list .imgbox{ width: 100%; } .index_youshi_list .imgbox img{ width: 100%; } .index_youshi_list .text{ margin-top: 10%; } .index_youshi_list .text .fir{ font-size:20px; color:#008fd5; font-weight: 700; text-align:center; } .index_youshi_list .text .sec{ font-size:16px; color:#89898a; line-height: 25px; padding: 0 12%; margin-top: 5%; } .index_youshi_list .text .line{ margin:3% auto 0 auto; background: #13b87b; width: 30px; height: 5px; margin-top: 11%; } .index_youshi_list:nth-child(1) ,.index_youshi_list:nth-child(4){ -webkit-transform: translateY(-13%); -moz-transform: translateY(-13%); -ms-transform: translateY(-13%); -o-transform: translateY(-13%); transform: translateY(-13%); } .index_youshi_list:nth-child(1):hover ,.index_youshi_list:nth-child(4):hover{ -webkit-transform: translateY(-20%); -moz-transform: translateY(-20%); -ms-transform: translateY(-20%); -o-transform: translateY(-20%); transform: translateY(-20%); } /*��˾���*/ .index_company_box{ width: 100%; height: 450px; margin-top: -50px; } .index_company_box .imgbox{ float: left; width: 50%; height: 100%; overflow: hidden;; } .index_company_box .imgbox img{ width: 100%; height: 100%; object-fit: cover; animation: moivescale 10s ease-in-out infinite alternate; } @keyframes moivescale { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } } .index_company_box .text{ float: left; width: 50%; height: 100%; background: #fff; border:1px solid #e6e6e6; padding:3.5% 5%; position: relative; } .index_company_box .text:before { width: 110px; height: 5px; background: #13b87b; content: ""; position: absolute; top: 24%; left: -8%; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-animation: elasticus 5s cubic-bezier(1, 0, 0, 1) infinite; animation: elasticus 5s cubic-bezier(1, 0, 0, 1) infinite; } .index_company_box .text .fir{ color:#13b87b; font-size:24px; font-family: cll1; font-weight: 700; } .index_company_box .text .sec{ color:#363636; font-size:34px; font-weight: 700; margin-bottom: 3%; } .index_company_box .text .thr{ color:#9b9b9b; font-size:16px; line-height: 30px; text-align:justify; } .index_company_box .text .indexthr{ overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 6; -webkit-box-orient: vertical; display: -webkit-box; } .company-more{ display: block; line-height: 30px; width: 90px; text-align: center; background: #efefef; font-size: 16px; color: #13b87b; font-family: 'cll1'; text-transform: uppercase; font-weight: 700; margin-top: 8%; } .company-more:hover{ background: #13b87b; color:#fff; } .honorbox{ padding:4% 0 6% 0; } .honor_type{ text-align:center; margin-bottom: 5%; } .honor_type a{ display: inline-block; width: 176px; line-height: 55px; background: #efefef; text-align:center; font-size:18px; color:#2f2f2f; position: relative; margin:0 1%; } .honor_type a:hover{ background: #13b87b; color:#fff; } .honor_type a.active{ background: #13b87b; color:#fff; } .honor_type a:after{ display: block; content: ""; position: absolute; width: 0; height: 0; border-width: 10px; border-style: solid; border-color: #13b87b transparent transparent transparent; bottom: -30px; left: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; opacity: 0; } .honor_type a:hover:after{ opacity: 1; } .honor_type a.active:after{ opacity: 1; } .swiper-container-honor .imgbox{ width: 100%; height: 325px; overflow: hidden; } .swiper-container-honor .imgbox img{ width: 100%; height: 100%; object-fit: cover; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .honor_lunbo_list{ display: none; position: relative; } .swiper-container-honor .title{ line-height: 60px; padding: 0 5%; border: 1px solid #e6e6e6; border-top: none; font-size: 18px; color: #454545; position: relative; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .swiper-container-honor .title em{ display: block; line-height: 60px; font-size: 18px; color: #454545; width: 65%; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .swiper-container-honor .swiper-slide:hover .title em{ color: #fff; } .swiper-container-honor .swiper-slide:hover .title{ background: #13b87b; border: 1px solid #13b87b; border-top: none; color:#fff; } .swiper-container-honor .title span{ display: block; line-height: 30px; width: 90px; text-align: center; background: #efefef; font-size: 16px; color: #13b87b; font-family: 'cll1'; position: absolute; right: 5%; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); text-transform: uppercase; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .swiper-container-honor .swiper-slide:hover .title span{ background: #fff; color: #13b87b; } .honor_lunbo_list .lunbobutton:after{ display: none!important; } .honor_lunbo_list .lunbobutton{ width: 60px; height: 60px; line-height: 60px; border:1px solid #e7e7e7; border-radius: 30px; text-align:center; font-size:20px; color:#c5c5c5; margin-top: -30px; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .honor_lunbo_list .lunbobutton i{ font-size:29px; color:#c5c5c5; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .honor_lunbo_list .swiper-button-next{ right: -6%; } .honor_lunbo_list .swiper-button-prev{ left: -6%; } .honor_lunbo_list .lunbobutton:hover{ background: #13b87b; border:1px solid #13b87b; } .honor_lunbo_list .lunbobutton:hover i{ color:#fff; } /*������Ѷ*/ .index_news{ background: #f8f8f8; padding:4% 0; } .index_news_left{ float: left; width: 48%; } .index_news_left_list:nth-child(-n+3){ margin-bottom: 20px; } .index_news_left_list .time{ float: left; width: 110px; height: 110px; background: #fff; text-align:center; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .index_news_left_list:hover .time{ background: #13b87b; } .index_news_left_list .time .fir{ font-size:52px; color:#13b87b; font-family: cll1; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; line-height: 50px; margin-top: 17%; } .index_news_left_list:hover .time .fir{ color:#fff; } .index_news_left_list .time .sec{ font-size:14px; color:#888888; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .index_news_left_list:hover .time .sec{ color:#fff; } .index_news_left_list .text{ float: right; width: -webkit-calc(100% - 110px); width: -moz-calc(100% - 110px); width: calc(100% - 110px); padding-left: 3%; } .index_news_left_list .text .title{ font-size:18px; color:#454545; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin: 3% 0 2% 0; } .index_news_left_list .text .des{ font-size:14px; color:#9b9b9b; line-height: 22px; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; } .index_news_left_list:hover .text .title{ color:#13b87b; } .index_news_right{ float: right; width: 48%; } .index_news_right .imgbox{ width: 100%; height: 405px; overflow: hidden; } .index_news_right .imgbox img{ width: 100%; height: 100%; object-fit: cover; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .index_news_right:hover .imgbox img{ -webkit-transform: scale(1.03) translate3d(0,0,0); -moz-transform: scale(1.03) translate3d(0,0,0); -ms-transform: scale(1.03) translate3d(0,0,0); -o-transform: scale(1.03) translate3d(0,0,0); transform: scale(1.03) translate3d(0,0,0); } .index_news_right .textbox{ width: 92%; margin: -9% auto 0 auto; background: #fff; padding: 3% 2.5% 3.5% 1%; position: relative; } .index_news_right .textbox .time{ width: 100px; height: 100px; position: relative; } .index_news_right .textbox .time:after{ display: block; content: ""; position: absolute; right: 0; top: 52%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); height: 68%; width: 1px; background: #eaeaea; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .index_news_right .index_news_left_list:hover .time:after{ background: #13b87b; } .index_news_right .textbox .time .fir{ margin-top: 12%; } .index_news_right .textbox .time .sec{ margin-top: 8%; } .index_news_right .textbox .text{ width: -webkit-calc(100% - 127px); width: -moz-calc(100% - 127px); width: calc(100% - 127px); padding-left: 0; float: right; } .index_news_right .textbox .text .title{ margin: 3% 0 0.5% 0; } .index_news_right .index_news_left_list{ margin-bottom: 0; } /*��վ�ײ�*/ .footerbox{ background: #21262b; padding:4% 0; } .footerbox-left{ float: left; } .footerbox-left-tel{ margin-bottom: 6%; } .footerbox-left-tel .fir{ font-size:16px; color:#fff; } .footerbox-left-tel .sec a{ font-size:32px; color:#1aca89; font-family: cll1; } .footerbox-left-pbox p{ font-size:14px; color:#8b8d8f; padding: 0.6% 0; } .footerbox-left-pbox p a{ color:#8b8d8f; } .footerbox-left-pbox p a:hover{ color:#fff; } .footerbox-left-pbox p span{ display: inline-block; width: 75px; text-align-last: justify; } .footerbox-erbox{ width: 22%; float: left; margin-left: 17%; } .footerbox-erbox-list{ float: left; width: 50%; border:1px solid #394046; padding: 7% 4%; } .footerbox-erbox-list:nth-child(1){ border-right: none; } .footerbox-erbox-list .imgbox{ width: 100%; } .footerbox-erbox-list .imgbox img{ max-width: 100%; margin:0 auto; } .footerbox-erbox-list p{ text-align:center; font-size:14px; color:#a3a3a3; margin-top: 11%; } .footerbox-right{ float: right; width: 188px; display: flex; justify-content: space-between; flex-wrap: wrap; } .footerbox-right a{ display: block; font-size: 16px; color: #fff; } .footerbox-right a:hover{ color: #1aca89; } .footerbox-right a:nth-child(-n+6){ margin-bottom: 18%; } .copy{ background: #21262b; } .copy .warpper{ padding:0.8% 0; border-top:1px solid #394046; } .copy-left{ float: left; font-size:14px; color:#4c5258; } .copy-left a{ color:#4c5258; } .copy-left a:not(:first-child):hover{ color:#fff; } .copy-right{ float: right; font-size:14px; color:#4c5258; } .copy-right a{ color:#4c5258; } .copy-right a:hover{ color:#fff; } @-webkit-keyframes elasticus { 0% { -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scale(0, 1); transform: scale(0, 1); } 50% { -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scale(1, 1); transform: scale(1, 1); } 50.1% { -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: scale(1, 1); transform: scale(1, 1); } 100% { -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: scale(0, 1); transform: scale(0, 1); } } @keyframes elasticus { 0% { -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scale(0, 1); transform: scale(0, 1); } 50% { -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scale(1, 1); transform: scale(1, 1); } 50.1% { -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: scale(1, 1); transform: scale(1, 1); } 100% { -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: scale(0, 1); transform: scale(0, 1); } } /*Сbanner*/ .sbannerbox{ width: 100%; height:500px; background: url("../img/sbanner.jpg") no-repeat center / cover; } .sbannerbox .warpper{ position: relative; height: 100%; } .sbannerbox .sbanner-title{ position: absolute; width: 100%; left:0; bottom:14%; color:#fff; } .sbannerbox .sbanner-title .fir{ font-size:34px; font-weight: 700; } .sbannerbox .sbanner-title .sec{ font-size:14px; } .sbannerbox .sbanner-title .sec a{ color:#fff; } .info{ padding:6% 0; } .company-inner{ background: #f8f8f8; } .company-inner .index_company_box { margin-top: 0; } .shili_inner{ padding:5% 0; } .shililunbo{ height: 630px; position: relative; } .shililunbo .swiper-container{ width: 100%; height: 100%; } .shililunbo .swiper-wrapper{ width: 100%; height: 100%; } .shililunbo .swiper-slide{ height: calc((100% - 20px) / 2); cursor: pointer; } .shililunbo .imgbox{ width: 100%; height: 250px; overflow: hidden; } .shililunbo .imgbox img{ width: 100%; height: 100%; object-fit: cover; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .shililunbo .swiper-slide:hover .imgbox img{ -webkit-transform: scale(1.03) translate3d(0,0,0); -moz-transform: scale(1.03) translate3d(0,0,0); -ms-transform: scale(1.03) translate3d(0,0,0); -o-transform: scale(1.03) translate3d(0,0,0); transform: scale(1.03) translate3d(0,0,0); } .shililunbo .title{ background: #fff; padding:0 10%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align:center; line-height: 55px; font-size:16px; color:#454545; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .shililunbo .swiper-slide:hover .title{ background: #13b87b; color:#fff; } .more-box{ width: 100%; display: flex; justify-content: space-around; flex-wrap: nowrap; } .more-list{ width: 48.5%; height: 260px; overflow: hidden; position: relative; } .more-list .pic{ width: 100%; height: 100%; object-fit: cover; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .more-list:hover .pic{ -webkit-transform: scale(1.03) translate3d(0,0,0); -moz-transform: scale(1.03) translate3d(0,0,0); -ms-transform: scale(1.03) translate3d(0,0,0); -o-transform: scale(1.03) translate3d(0,0,0); transform: scale(1.03) translate3d(0,0,0); } .more-list .meng{ position: absolute; width: 100%; height: 100%; top:0; left:0; padding: 10% 7%; color:#fff; } .more-list .meng .fir{ font-size:36px; font-weight: 700; } .more-list .meng .sec{ font-size:22px; font-family: cll2; text-transform: uppercase; } .more-list .meng span{ display: block; position: absolute; right: 9%; bottom: 20%; width: 20px; height: 19px; background: url("../img/more-jia.png") no-repeat center; } .product_inner_list{ float: left; width: 32%; margin-right: 2%; margin-bottom: 2%; } .product_inner_list:nth-child(3n){ margin-right: 0; } .pro-des-top{ width: 100%; height: 456px; } .pro-des-top .swiper-container{ height: 100%; } .pro-des-imgbox{ width: 45%; float: left; height: 100%; } .pro-des-imgbox .imgbox{ width: 100%; height: 100%; border: 1px solid #e6e6e6; background: #f6f6f6; position: relative; } .pro-des-imgbox .imgbox img{ max-width: 100%; max-height: 100%; position: absolute; top:0; bottom:0; left:0; right:0; margin:auto; } .pro-des-text{ float: right; width: 47%; height: 100%; position: relative; } .pro-des-text .title{ font-size: 24px; color: #13b87b; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .pro-des-text .line{ width: 100%; height: 1px; background: #eee; margin:4% 0 6% 0; position: relative; } .pro-des-text .line i{ position: absolute; display: block; width: 20px; height: 3px; background: #f19015; left:0; top:-1px; } .pro-des-text .des{ font-size:14px; color:#999; line-height: 25px; padding-left: 20px; position: relative; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; display: -webkit-box; } .pro-des-text .des:before{ position: absolute; content: ""; width: 5px; height: 5px; background: #13b87b; border-radius: 10px; left: 0; top: 10px; } .des-tumb{ position: absolute; width: 100%; left:0; bottom:0; } .des-tumb .swiper-container{ width: 85%; margin:0 auto; } .des-tumb .imgbox{ width: 100%; height: 130px; background: #f6f6f6; } .des-tumb .imgbox img{ width: 100%; height: 100%; object-fit: contain; } .des-tumb .pro-des-button{ width: 7%; height: 100%; top:0; margin-top: 0; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .des-tumb .pro-des-button:after{ display: none; } .des-tumb .swiper-button-next-pro-des{ background: #f4f4f4 url("../img/pro-des-right.png") no-repeat center; right:0; } .des-tumb .swiper-button-next-pro-des:hover{ background: #13b87b url("../img/pro-des-right1.png") no-repeat center; } .des-tumb .swiper-button-prev-pro-des{ background: #f4f4f4 url("../img/pro-des-left.png") no-repeat center; left:0; } .des-tumb .swiper-button-prev-pro-des:hover{ background: #13b87b url("../img/pro-des-left1.png") no-repeat center; } .des-tumb .swiper-slide{ border: 1px solid #e6e6e6; } .des-tumb .swiper-slide.swiper-slide-thumb-active{ border:1px solid #2da2a6; } .pro-des-bottom{ margin-top: 7%; } .product-t{ border-top: #e5e5e5 solid 1px; border-bottom: #e5e5e5 solid 1px; text-align: center; } .product-t span{ display: inline-block; height: 50px; line-height: 50px; font-size: 18px; border-bottom: #13b87b solid 2px; color: #13b87b; } .pro-des-content{ font-size: 14px; color: #999; line-height: 30px; padding: 3% 0; } .pro-des-content img{ max-width: 100%; margin:1% auto; } .parm table{ width: 100%; margin: 0 auto 20px auto; border: 1px solid #e5e5e5; border-collapse: collapse; margin-top:30px; } .parm table th{ line-height: 30px; font-size: 14px; font-weight: 700; color: #333; padding: 0.5%; word-break: break-all; word-wrap: break-word; border: 1px solid #eee; background: #edfff8; } .parm table tr td{ line-height: 30px; font-size: 14px; color: #515151; padding: 0.5%; word-break: break-all; word-wrap: break-word; border: 1px solid #eee; } .case-inner-item{ display: flex; justify-content: center; flex-wrap: wrap; } .case-inner-list{ width: 29.5%; margin: 0 1% 3% 1%; } .case-inner-list .imgbox{ width: 100%; height: 290px; overflow: hidden; background-color:#f6f6f6; } .case-inner-list .imgbox img{ width: 100%; height: 100%; object-fit: contain; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .case-inner-list:hover .imgbox img{ -webkit-transform: scale(1.03) translate3d(0,0,0); -moz-transform: scale(1.03) translate3d(0,0,0); -ms-transform: scale(1.03) translate3d(0,0,0); -o-transform: scale(1.03) translate3d(0,0,0); transform: scale(1.03) translate3d(0,0,0); } .case-inner-list .title{ color: #666; white-space:nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 18px; margin: 3% 0 2% 0; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .case-inner-list:hover .title{ color:#1aca89; } .case-inner-list .des{ color: #999; font-size: 14px; line-height: 25px; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; } .case-inner-list span{ display: block; width: 35px; height: 21px; background: url("../img/case-inner-more.png") no-repeat center; margin-top: 2%; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .case-inner-list:hover span{ background: url("../img/case-inner-more1.png") no-repeat center; } .inner-title-sub{ text-align:center; } .inner-title-sub .fir{ color: #666; font-size: 24px; padding-bottom: 15px; } .inner-title-sub .sec{ color: #bababa; padding-bottom: 15px; border-bottom: #eee solid 1px; font-size: 12px; } .inner-title-sub .sec span{ display: inline-block; margin:0 0.5%; } .inner-content{ padding: 3% 0; font-size: 14px; color: #000; line-height: 30px; } .inner-content img{ max-width: 100%; margin:1% auto; } .news-inner-top{ height: 336px; width: 100%; position: relative; } .news-inner-top .swiper-container{ width: 100%; height: 100%; background: #f5f5f5; } .news-inner-top .swiper-container .swiper-slide{ width: 100%; padding: 2% 9% 2% 2%; } .news-inner-top .swiper-container .imgbox{ width:400px; height: 100%; float: left; overflow: hidden; } .news-inner-top .swiper-container .imgbox img{ width: 100%; height: 100%; object-fit: cover; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .news-inner-top .swiper-container .swiper-slide:hover .imgbox img{ -webkit-transform: scale(1.03) translate3d(0,0,0); -moz-transform: scale(1.03) translate3d(0,0,0); -ms-transform: scale(1.03) translate3d(0,0,0); -o-transform: scale(1.03) translate3d(0,0,0); transform: scale(1.03) translate3d(0,0,0); } .news-inner-top .swiper-container .text{ float: right; width: -webkit-calc(100% - 506px); width: -moz-calc(100% - 506px); width: calc(100% - 506px); margin-top: 4%; } .news-inner-item .text-inner .title{ color: #666; font-size: 18px; border-bottom: #e0e0e0 solid 1px; padding-bottom: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .news-inner-item .text-inner .des{ line-height: 24px; padding-top: 20px; font-size: 14px; color: #999; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; } .news-inner-item .text-inner .more{ margin-top: 60px; } .news-inner-item .text-inner .more .time{ float: left; color: #bababa; font-size:12px; } .news-inner-item .text-inner .more .sec{ float: right; color: #666; font-size:12px; padding-right: 16px; background: url("../img/ico2.png") no-repeat right center; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; text-transform: uppercase; } .news-inner-item .text-inner .more .sec:hover{ color:#13b87b; background: url("../img/ico22.png") no-repeat right center; } .swiper-pagination-inner-news{ width: 100%; margin-top: 1%; } .swiper-pagination-inner-news .swiper-pagination-bullet{ margin:0 4px; width: 10px; height: 10px; } .swiper-pagination-inner-news .swiper-pagination-bullet-active{ background: #f19015; } .news-inner-bottom{ margin-top: 8%; } .news-inner-bottom .news-inner-list{ padding:3% 0 5% 0; border-bottom:1px dashed #eee; } .news-inner-bottom .news-inner-list .timediv{ float: left; width: 105px; text-align:center; } .news-inner-bottom .news-inner-list .timediv .fir{ background: #f5f5f5; line-height: 35px; font-size: 14px; color: #999; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .news-inner-bottom .news-inner-list .timediv .sec{ line-height: 50px; font-size: 30px; color: #999; background: #eee; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .news-inner-bottom .text{ float: right; width: 88%; } .news-inner-bottom .text-inner .more{ margin-top: 20px; } .news-inner-bottom .text-inner .more .sec{ float: left; } .news-inner-bottom .news-inner-list:hover .text-inner .more .sec{ color:#13b87b; background: url("../img/ico22.png") no-repeat right center; } .news-inner-bottom .news-inner-list:hover .text-inner .title{ color:#13b87b; font-weight: 700; } .news-inner-bottom .news-inner-list:hover .timediv .fir{ background: #6ad2ab; color: #fff; } .news-inner-bottom .news-inner-list:hover .timediv .sec{ background: #13b87b; color: #fff; } .news-inner .de-page-mian{ margin-top:3%; } .honor-inner-item{ display: flex; justify-content: center; flex-wrap: wrap; } .honor-inner-list{ width: 31%; margin:0 1% 2% 1%; } .honor-inner-list .imgbox{ width: 100%; height: 200px; border:1px solid #eee; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .honor-inner-list .imgbox img{ width: 100%; height: 100%; object-fit: contain; } .honor-inner-list .title{ line-height: 40px; background: #eee; text-align:center; font-size:16px; color:#666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding:0 3%; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .contact-title{ font-size:24px; font-weight: 700; color:#13b87b; padding-left: 20px; list-style: none; line-height: 25px; border-left:2px solid #f19015; margin-bottom: 40px; } .contact-lianxi{ width: 100%; height: 490px; margin-bottom: 4%; } .contact-lianxi-left{ width: 34%; height: 100%; float: left; } .contact-lianxi-left-list{ float: left; width: 50%; height: 50%; display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; text-align:center; background: #eee; } .contact-lianxi-left-list:nth-child(2) ,.contact-lianxi-left-list:nth-child(3){ background: #f6f6f6; } .contact-lianxi-left-list img{ margin:0 auto; } .contact-lianxi-left-list .fir{ font-weight: bold; font-size: 14px; color: #333; padding:10px 0; } .contact-lianxi-left-list .sec{ font-size: 14px; line-height: 22px; color: #999; } .contact-lianxi-left-list .sec a{ color: #999; } .contact-lianxi-right{ float: right; width: 64.5%; height: 100%; } .contact-lianxi-right #ditu{ width: 100%; height: 100%; } .contact-liuyan{ width: 100%; padding:3%; border:1px solid #eee; margin-top: 3%; } .contact-liuyan .form-left{ float: left; width: 75%; } .contact-liuyan .form-right{ float: right; width: 24%; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; } .contact-liuyan .inputbox{ display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; position: relative; } .contact-liuyan input[type=text]{ width: 49.5%; line-height: 45px; border:1px solid #eee; padding-left: 15px; outline: none; background: #fff; font-size:14px; color:#333; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; margin-bottom: 8px; } .contact-liuyan input:focus{ border:1px solid #13b87b; } .contact-liuyan input[type=text]::placeholder{ font-size:14px; color:#999; } .contact-liuyan input[name=captcha]{ width: 100%; } .contact-liuyan .verify{ height: 80px; width: 100%; border:1px solid #eee; padding:3px; } .contact-liuyan .verify img{ width: 100%; height: 100%; } .contact-liuyan textarea{ width:100%; height: 155px; border:1px solid #eee; padding:15px; outline: none; resize: none; font-size:14px; color:#333; font-family: "Microsoft Yahei"; } .contact-liuyan textarea::placeholder{ font-size:14px; color:#999; } .contact-liuyan textarea:focus{ border:1px solid #13b87b; } .contact-liuyan .submit{ display: block; width: 100%; line-height: 45px; text-align:center; color:#fff; font-size:16px; background: #13b87b; cursor: pointer; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; margin-top: 9%; } .contact-liuyan .inputbox .submit:hover{ background: #f19015; } .contact-liuyan .contact-liuyan-title{ color: #333; font-size: 25px; letter-spacing: 1px; margin-bottom: 2%; } .fixBut{ position: fixed; right: 28px; top: 15px; z-index: 1000; background: #13b87b; width: 41px; height: 41px; border-radius: 5px; cursor: pointer; display: none; } .sm-button-xian{ width: 26px; height: 15px; position: absolute; left:0; right:0; top:0; bottom:0; margin:auto; } .sm-button-xian span { display: block; position: absolute; height: 2px; background-color: #fff; right: 0; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; -ms-transition: all 0.35s; -o-transition: all 0.35s; transition: all 0.35s; } .sm-button-xian span.lin-top{ top:0; width: 70%; -webkit-transform-origin: left top 0; -ms-transform-origin: left top 0; transform-origin: left top 0; } .sm-button-xian span.lin-cent { top: 6px; width: 100%; } .sm-button-xian span.lin-bottom { bottom: 0; width: 70%; -webkit-transform-origin: left bottom 0; -ms-transform-origin: left bottom 0; transform-origin: left bottom 0; } .fixBut.active .sm-button-xian span.lin-top{ -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .fixBut.active .sm-button-xian span.lin-cent{ opacity: 0; } .fixBut.active .sm-button-xian span.lin-bottom{ -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .navBgout{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: #163c5d; opacity: 0; transition: all 1s ease 0s; transform: translate(0,-100%); z-index: 999; padding: 0 2%; } .navBgout.active{ opacity: 1; transform: translate(0,0); } .navBgTop { position: relative; z-index: 1; padding: 35px 40px; border-bottom: 1px solid #d8d8d8; } .navCloseButton { float: right; padding: 5px 0 0; width: 30px; height: 30px; cursor: pointer; -webkit-transition: all 0.9s; -moz-transition: all 0.9s; -ms-transition: all 0.9s; -o-transition: all 0.9s; transition: all 0.9s; } .navBgout-logo{ float: left; } .navBgout-logo a{ display: block; } .navCloseButton span { display: block; width: 100%; height: 1px; background: #333; transform-origin: left center; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .navCloseButton span:first-child { transform: rotate(45deg); } .navCloseButton span:last-child { margin-top: 20px; transform: rotate(-45deg); } .navBgBottom{ overflow: hidden; height: 100%; padding: 3%; display: flex; align-items: center; } .navBgBottom-con{ width: 100%; } .navBgBottom-con-list{ border-bottom:1px solid #224a6d; margin-bottom: 4%; padding-bottom: 3%; } .navBgBottom-con-list .t{ font-size:18px; font-weight: 700; color:#fff; margin-bottom: 2%; } .navBgBottom-con-list .abox a{ display: inline-block; font-size: 16px; color: #7093b1; margin-right: 4%; } .navBgBottom-con-list .abox a:hover{ color:#13b87b; font-weight: 700; } .navBgBottom-con-list .pbox p{ font-size: 16px; color: #7093b1; line-height: 30px; } .navBgBottom-con-list .pbox p a{ color: #7093b1; } .mobile-footer{ width: 100%; position: fixed; z-index: 999; left:0; bottom:0; background: #21262b; display: none; } .mobile-footer a{ float: left; width: 33.33%; display: block; line-height: 50px; text-align:center; font-size:14px; color:#fff; padding-left: 6%; position: relative; } .mobile-footer a:after{ display: block; content:""; position: absolute; right: 0; top:50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); height: 10px; width: 1px; background: #c9dfff; } .mobile-footer a:last-child:after{ display: none; } .mobile-footer a.mobile-home{ background: url(../img/mobile-home.png) no-repeat left 17% center; background-size: 23px; } .mobile-footer a.mobile-pro{ background: url(../img/mobile-pro.png) no-repeat left 17% center; background-size: 23px; } .mobile-footer a.mobile-tel{ background: url(../img/mobile-tel.png) no-repeat left 17% center; background-size: 23px; } .swiper-container-other{ margin:3% 0 5% 0; } .swiper-container-other .imgbox{ width: 100%; height: 300px; border:1px solid #eee; position: relative; } .swiper-container-other .imgbox img{ position: absolute; max-width: 80%; max-height: 80%; top:0; bottom:0; left:0; right:0; margin:auto; } .swiper-container-other .title{ line-height: 50px; text-align:center; font-size:14px; color:#333; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; -ms-transition: all 0.35s; -o-transition: all 0.35s; transition: all 0.35s; } .swiper-container-other .swiper-slide:hover .title{ background: #13b87b; color:#fff; } .cbl { width: 45px; position: fixed; right: 0; top: 44%; z-index: 3333; } .cbl.active { display: none; } .cbl li { margin-top: 2px; transition: 0.4s ease-in-out; } .cbl span { transition: 0.2s ease-in-out; display: inline-block; width: 45px; height: 45px; text-align: center; background: #00c0ff; box-sizing: border-box; font-size: 12px; color: white; position: relative; background-size: 30px; } .cbl span i { transition: 0.4s ease-in-out; display: block; font-size: 36px; color: #fff; line-height: 30px; } .cbl li.tel span{ background: #13b87b url("../img/cb-tel.png") no-repeat center; background-size: 23px; } .cbl li.kefu span{ background: #13b87b url("../img/cb-kefu.png") no-repeat center; background-size: 23px; } .cbl li.weixin span{ background: #13b87b url("../img/cb-weixin.png") no-repeat center; background-size: 23px; } .cbl li.fd span{ padding-top: 39px; background: #13b87b url("../img/fd.png") no-repeat center; background-size: 23px; } .cbl li.fd span .fir{ font-size:16px; } .cbl span .fir { font-size:14px; color:#fff; text-align:center; font-weight: lighter; display: none; } .cbl li aside { position: absolute; right: 50px; top: 0; padding:0 10px; line-height: 45px; opacity: 0; visibility: hidden; transform:rotateX(-90deg); transition: all .2s linear 0s; display: inline-block; vertical-align: top; background: #13b87b; box-sizing: border-box; font-size: 16px; color: white; white-space: nowrap; font-family: ziti2; } .cbl li aside.ex{ padding: 10px; } .cbl li aside img{ width: 100px; } .cbl li:hover aside{ transform:rotateX(0); opacity: 1; visibility: visible; } .cbl li aside:after{ width: 0px; height: 0px; border: 8px solid transparent; border-left: 8px solid #13b87b; display: block; content: ''; position: absolute; top: 12px; right: -16px; transition: top .2s linear; transition-delay: .1s; } .company-inner .index_company_box{ height: auto; } .company-inner .index_company_box .text{ width: 100%; } .company-inner .index_company_box .text .pic{ float: left; width: 50%; margin-right: 3%; } .company-inner .index_company_box .text .fir{ text-align: center; } .company-inner .index_company_box .text .sec{ text-align: center; } .company-inner .index_company_box .text:before{ display: none; }