/* 分页 */ .cut { color: #999; } .cut a:hover { color: #005bac; } .paging { position: relative; margin-top: 50px; } .paging a { color: #888; margin: 0 5px; height: 35px; line-height: 35px; text-align: center; font-size: 14px; border: 1px solid #eee; } .paging a.active { background: #005bac; color: #fff; } .paging a:not(.noPage):hover { background: #005bac; color: #fff; } .paging .page { width: 35px; } .paging .prevPage, .paging .nextPage { padding: 0 10px; } .paging .firstPage, .paging .lastPage { padding: 0 10px; } .paging .noPage { opacity: 0.5; cursor: default; } /* 详情页切换 */ .switch { color: #888888; overflow: hidden; } .switch a span { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; } .switch a:hover span { color: #005bac; } /* 点击加载更多 */ .loadData { text-align: center; } .loadData a { position: relative; margin: 0 auto; display: none; width: 140px; height: 40px; color: #005bac; line-height: 40px; font-size: 14px; border-radius: 20px; border: solid 1px #005bac; } .loadData .loading { background: #005bac; color: #eee; } .loadData .loading span { display: inline-block; font-size: 20px; margin-left: 5px; -webkit-transform: translateY(2px); transform: translateY(2px); -webkit-animation: loading_move 1s infinite; animation: loading_move 1s infinite linear; } .loadData .loadEnd { background: #eee; color: #999; cursor: default; } .loadData .active { display: block; } .loadData .loadStart:hover { background: #005bac; color: #fff; } /* 居中标签 */ .center { max-width: 1300px; margin: 0 auto; } @media (min-width: 1200) { .center { padding: 0 20px; } } /* crumbs START */ .hide { display: none; } .crumbs { height: 70px; background-color: #fff; border-bottom: 1px solid #e9e9e9; } .crumbs .center .c_nav { line-height: 70px; } .crumbs .center .c_nav .line { position: relative; height: 100%; margin-right: 55px; font-size: 16px; } .crumbs .center .c_nav .line::after { content: ""; position: absolute; bottom: 0; left: 0; height: 2px; width: 0; background-color: #005bac; display: block; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s; } .crumbs .center .c_nav .line.active::after, .crumbs .center .c_nav .line:hover::after { width: 100%; } .crumbs .center .c_nav .iconfont { font-size: 30px; margin-right: 10px; } .crumbs .center .c_nav .iconfont.icon-chuangxin { color: #f23263; } .crumbs .center .c_nav .iconfont.icon-sheji { color: #00a1e5; } .crumbs .center .c_nav .iconfont.icon-allicon-18 { color: #00b38b; font-size: 24px; } .crumbs .center .c_nav .iconfont.icon-SMT-jieliao { color: #f3af32; } .crumbs .center .c_nav .iconfont.icon-zhaohuoxuanxing { color: #4d32f3; } .crumbs .center .home { margin-right: 8px; } .crumbs .center .item { position: relative; line-height: 70px; color: #888; font-size: 14px; } .crumbs .center .item a { z-index: 10; display: box; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; position: relative; -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; } .crumbs .center .item a:hover { color: #005bac; } .crumbs .center .item .active { color: #005bac; } .crumbs .center .item .iconfont { font-size: 14px; } .crumbs .center .item .iconfont.icon-icon_home { margin-right: 10px; color: #005bac; font-size: 16px; } .crumbs .center .item .iconfont.icon-sanjiao-l-copy { font-size: 12px; margin-left: 4px; margin-right: 4px; color: #777777; } /* crumbs END */ .product_list .product_list_title { font-size: 30px; color: #333333; height: 90px; line-height: 89px; border-bottom: 1px solid #ccc; } .product_list ul { padding-top: 10px; padding-bottom: 80px; } .product_list li { margin-top: 40px; margin-right: 2.5%; width: 14.58%; text-align: center; } .product_list li:nth-child(6n) { margin-right: 0; } .product_list li:hover .pro_img .cloth { opacity: 1; } .product_list li .pro_img { position: relative; margin: 0 auto; width: 175px; height: 115px; overflow: hidden; } .product_list li .pro_img .picture_container { padding-top: 65.7%; } .product_list li .pro_img .img { width: 100%; height: 100%; } .product_list li .pro_img .cloth { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); color: #fff; overflow: hidden; -o-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); -o-transition: all 0.8s; -moz-transition: all 0.8s; -webkit-transition: all 0.8s; transition: all 0.8s; opacity: 0; } .product_list li .pro_img .cloth p { margin-top: 32px; } .product_list li .pro_img .cloth .icon { margin-top: 10px; } .product_list li .pro_img .cloth .icon_main { width: 60px; margin-left: -15px; } .product_list li .pro_img .cloth .iconfont { width: 5px; font-size: 14px; animation: toggle_opacity 1.5s infinite; -webkit-animation: toggle_opacity 1.5s infinite; } .product_list li .pro_img .cloth .iconfont:nth-child(1) { opacity: 0.4; -o-animation-delay: 0.2s; -moz-animation-delay: 0.2s; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .product_list li .pro_img .cloth .iconfont:nth-child(2) { opacity: 0.7; -o-animation-delay: 0.4s; -moz-animation-delay: 0.4s; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .product_list li .pro_img .cloth .iconfont:nth-child(3) { opacity: 1; -o-animation-delay: 0.8s; -moz-animation-delay: 0.8s; -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .product_list li .name { margin-top: 25px; line-height: 1; letter-spacing: 1px; color: #444; } .technology { height: 125px; line-height: 104px; border-bottom: 1px solid #eee; } .technology_list { padding-top: 20px; text-align: center; } .technology_list li { position: relative; font-size: 24px; color: #999999; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s; } .technology_list li:first-child { margin-right: 22.92%; margin-left: 29.17%; } .technology_list li::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 0; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s; -o-transform: translate3d(-50%, 0, 0); -moz-transform: translate3d(-50%, 0, 0); -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); border-bottom: 3px solid #e60012; } .technology_list li.active, .technology_list li:hover { color: #333; } .technology_list li.active::after, .technology_list li:hover::after { width: 100%; } /* 浏览器低版本提示 START */ #browser_mask { background-color: #000; background: rgba(0, 0, 0, 0.7); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); z-index: 1000000000; position: absolute; height: 100%; width: 100%; top: 0; left: 0; right: 0; bottom: 0; margin: auto; display: none; } #browser_hint { z-index: 9999999999; position: absolute; display: none; height: 100%; width: 100%; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } #browser_hint #browser_container .explain { width: 800px; color: #555; margin: 0 auto; position: absolute; text-align: center; background: #fff; left: 50%; top: 50%; padding: 50px; margin-top: -150px; margin-left: -450px; } #browser_hint #browser_container .explain .explain_title { font-size: 22px; font-weight: bold; } #browser_hint #browser_container .explain .explain_title span { color: red; } #browser_hint #browser_container .explain .explain_list { margin-top: 40px; overflow: hidden; } #browser_hint #browser_container .explain .item { width: 110px; margin: 0 20px; text-align: center; display: inline-block; } #browser_hint #browser_container .explain .item .item_icon { width: 100px; height: 100px; margin: 0 auto; border-radius: 50%; line-height: 100px; box-sizing: content-box; background: #66CC66; font-weight: bold; font-size: 22px; color: #fff; cursor: pointer; } #browser_hint #browser_container .explain .item .item_text { font-size: 16px; margin-top: 10px; color: #555; } /* 浏览器低版本提示 END */ /* go_top START */ .go_top { position: fixed; right: 5%; bottom: 30.3%; width: 60px; height: 60px; background: rgba(150, 150, 150, 0.5); border-radius: 50%; text-align: center; line-height: 60px; color: #fff; cursor: pointer; z-index: 10000; display: none; } .go_top .iconfont { font-size: 24px; } .go_top:hover { background: #005bac; } /* go_top END */