html, body { font-size: 14px; color: #333; font-family: "Microsoft YaHei"; } a { color: #333; } a:hover { text-decoration: none; } ul, li { list-style: none; } .boxshadows { box-shadow: 0 0 20px 0 rgb(0 0 0 / 10%); } .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ellipsis-line2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .left { float: left; } .right { float: right; } .wrapper,.noWrapper { /*width: 84%; margin: auto;*/ padding: 0 5%; height: auto; overflow: hidden; } .top-main { position: fixed; width: 100%; height: 120px; left: 0; top: 0px; z-index: 1000; transition: 0.8s all; } .hide-nav.top-main { top: -120px; } .top { height: 40px; line-height: 40px; background-color: #0f2341; color: #ffffff; } .top .right span { display: inline-block; margin: 0 5px; color: #ffffff; } .top .right a { color: #ffffff; opacity: 0.45; } .top .right a.active, .top .right a:hover { opacity: 1; } .header { height: 80px; line-height: 80px; position: relative; background: rgba(15, 35, 65, 0.2); box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.06); } .header .logo { /*min-width: 200px;*/ height: 80px; } .header .logo img { height: 50px; } .header .search { min-width: 200px; height: 80px; text-align: right; } .header .search form { position: relative; } .header .search form i { position: absolute; right: 15px; font-size: 18px; color: #ffffff; } .header .search input { background: transparent; height: 40px; padding: 0 12px; border: 1px solid #666666; color: #ffffff; } .header .search input:focus { border: 1px solid #666666; outline: none; color: #293751; } .header .nav { text-align: right; } .header .nav a { display: block; height: 80px; padding: 0 25px; color: #ffffff; font-size: 20px; } .header .nav .nav-item { display: inline-block; } .header .nav .nav-title { position: relative; } .header .nav-item.active a, .hover .header .nav-item.active a, .hover .header .nav-item:hover a, .header .nav-item.current a, .hover .header .nav-item.current a { /*color: #3a51df;*/ color: #0b7de0; } .header .nav-item.active .nav-title::before, .header .nav-item.current .nav-title::before, .header .nav-title:hover::before { content: ""; position: absolute; width: 100%; height: 2px; bottom: 0px; left: 0; /*background-color: #3a51df;*/ background-color: #0b7de0; } .header .nav .group_item { display: none; background: #293751; position: absolute; left: 0; width: 100%; top: 80px; min-height: 100px; } .header .nav .nav-item.active .group_item { display: block; } .header .nav .group_item .left { padding: 40px 0; width: 40%; text-align: left; border-right: 1px solid rgba(255, 255, 255, 0.1); } .header .nav .group_item .left a { display: block; position: relative; height: 220px; padding: 0; } .header .nav .group_item .left img { height: 220px; width: 370px; /*height: 200px; width: 200px;*/ } .header .nav .group_item .left span { position: absolute; left: 25px; bottom: 5px; color: #ffffff; font-size: 20px; height: auto; } .header .nav .group_item .right { width: 60%; padding: 40px 0 40px 60px; text-align: left; } .header .nav .group_item .right a { display: inline-block; height: 30px; font-size: 15px; color: #cccccc; } .header .nav .group_item .right a:hover { color: #007bff; } .hover .header, .header.active { background-color: #ffffff; } .hover .header .nav-item a, .header.active .nav-item a { color: #666666; } .hover .header .search form i, .header.active .search form i { color: #333333; } .topSlider { margin-top: 40px; } .topSlider .swiper-slide { background-position: center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 800px; } .topSlider .swiper-slide a { display: block; width: 100%; height: 100%; } /*/product type*/ .in-product-type { background: url(../img/home_brandbg.png) no-repeat; background-size: cover; padding: 60px 0px 90px; } .in-product-type .wrapper > .title, .in-parts .title { font-size: 48px; font-weight: 700; line-height: 54px; color: #fff; text-align: center; } .in-product-type .wrapper > .sub-title, .in-parts .sub-title { font-size: 20px; line-height: 30px; color: #fff; opacity: 0.7; text-align: center; margin: 20px 0 45px; } .in-product-type ul { min-width: 100%; height: 100%; padding: 0; } .in-product-type li { display: inline-block; /*width: 13.2%;*/ width: 12.5%; height: 500px; text-align: center; border-left: 5px solid #0f2341; border-right: 5px solid #0f2341; box-sizing: border-box; vertical-align: top; position: relative; overflow: hidden; vertical-align: middle; margin-left: -5px; position: relative; background: url(/web/img/p1.png) no-repeat; background-size:cover; /*background-size: 100% 100%*/ } .in-product-type .cover-box { display: inline-block; position: relative; padding-top: 80%; background: no-repeat; background-size: 100%; } .in-product-type .cover-box p { font-size: 16px; line-height: 26px; color: #fff; opacity: 0.6; margin-bottom: 5px; font-weight: 700; } .in-product-type .cover-box span { font-size: 22px; line-height: 38px; color: #fff; font-weight: 700; } .in-product-type li.active .cover-box { display: none; } .in-product-type li:first-child { border-left: 0px; } .in-product-type li .inner-box { display: none; } .in-product-type li.active .inner-box { display: block; position: relative; text-align: left; color: #ffffff; } .in-product-type li.active .inner-box img { height: 500px; width: 100%; } .in-product-type li .inner-box .box-txt { position: absolute; bottom: 40px; left: 30px; width: 90%; } .in-product-type li .inner-box .box-txt .title { font-size: 28px; line-height: 34px; display: inline-block; font-weight: 700; } .in-product-type li .inner-box .box-txt .sub-title { font-size: 16px; line-height: 1.75; opacity: 0.9; margin-top: 15px; } .in-product-type li .inner-box .box-txt a { float: right; color: #ffffff; font-size: 16px; line-height: 34px; } .in-customer { background: url(../img/livebanner_bg.jpg) no-repeat; position: relative; /* background-size: 100%;*/ background-size: 100% 100%; overflow: hidden; transform: translate3d(0, 0, 0); padding: 100px 0; } .in-customer .swiper-slide .wrapper { position: relative; } /*.in-customer .swiper-slide { height: 500px; }*/ .in-customer .swiper-slide img { /* height: 500px; position: absolute; left: 0; top: 0;*/ } .in-customer .swiper-slide .customer-text { /*width: 750px; float: right; padding-top: 100px;*/ width:49%; display:inline-block; vertical-align:top; padding-left:2%; } .videoWrapper { width: 50%; height: 100%; display: inline-block; position: relative; } .in-customer .swiper-slide .customer-text .title { font-size: 20px; font-weight: 400; font-stretch: normal; line-height: 26px; letter-spacing: 0; color: #999; margin-bottom: 20px; } .in-customer .swiper-slide .customer-text h2 { background-image: linear-gradient(to right, #32beff 0, #005aab 100%); -webkit-background-clip: text; color: transparent; font-size: 48px; font-weight: 700; font-stretch: normal; line-height: 54px; letter-spacing: 0; } .in-customer .swiper-slide .customer-text .line { height: 1px; background-color: #e5ebf3; margin: 30px 0; position: relative; } .in-customer .swiper-slide .customer-text .summary { font-size: 16px; font-stretch: normal; line-height: 28px; letter-spacing: 0; color: #999; margin-bottom: 45px; } .in-customer .swiper-slide .customer-text .line::before { width: 200px; content: ""; display: block; position: absolute; background-color: #32beff; height: 3px; left: 0; top: -1px; } .in-customer .swiper-slide .customer-text .more { width: 200px; height: 50px; line-height: 50px; font-size: 16px; display: inline-block; background-image: linear-gradient(to right, #32beff 0, #005aab 51%, #32beff 100%); background-size: 200% auto; color: #fff; text-align: center; transition: 0.5s; } .in-customer .swiper-slide .customer-text .more:hover { background-position: right center; background-color: #005aab; } .in-parts { background: url(../img/product_bg.png) no-repeat #f8f8f8; position: relative; overflow: hidden; transform: translate3d(0, 0, 0); padding: 80px 0; } .in-parts .tags { padding: 30px 0 0 0; text-align: center; } .product_tagMobile{ display:none; } .in-parts .tags a, .tags_a { display: inline-block; background: rgba(255, 255, 255, 0.8); padding: 8px 20px; border-radius: 2px; margin: 0 5px; text-align: center; } .in-parts .tags a:hover { color: #fff; text-decoration: none; background-image: linear-gradient(to right, #32beff 0, #005aab 51%, #32beff 100%); background-size: 200% auto; } .in-parts .swiper-slide_product { background-color: #ffffff; padding-bottom: 15px; } .in-parts .swiper-slide_product a.box-img { display: inline-block; padding-bottom: 15px; border-bottom: 1px solid #e6e7e8; width: 100%; position: relative; transition: all 0.36s ease; } .in-parts .swiper-slide_product a.box-img img { width: 100%; } .in-parts .swiper-slide_product:hover a.box-img::before { content: ""; display: block; bottom: 0; height: 2px; background: #32beff; position: absolute; left: 0; width: 100%; transition: all 0.36s ease; } .in-parts .p-title { margin: 25px 0 10px; font-size: 20px; padding: 0 15px; } .in-parts .p-sub-title { margin: 0px 0 15px; font-size: 14px; padding: 0 15px; } .in-parts .more { display: inline-block; padding: 0 15px; } .in-news { padding: 80px 0; position: relative; } .in-news .wrapper > .title { background-image: linear-gradient(to right, #32beff 0, #005aab 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 48px; font-weight: 700; font-stretch: normal; line-height: 54px; letter-spacing: 0; text-align: center; margin-bottom: 50px; } .in-news-wall .news-hot { width: 35%; } .in-news-wall .news-hot img { width: 100%; height: 315px; } .in-news-wall .news-hot .news-foot { padding: 20px; background-color: #ffffff; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1); } .in-news-wall .news-hot > a { display: block; overflow: hidden; } .in-news-wall .news-hot > a:hover img { transition: all 1s; transform: scale(1.1); } .in-news-wall .news-hot .news-foot .title { font-size: 22px; display: block; } .in-news-wall .news-hot .news-foot .summary { font-size: 14px; margin-top: 10px; line-height: 26px; height: 50px; } .in-news-wall .news-hot-2 { margin-left: 20px; width: 22%; } .in-news-wall .news-hot-2 img { height: 190px; } .in-news-wall .news-hot-2 .news-foot { padding: 10px 20px; } .in-news-wall .news-hot-2 .news-foot .summary { height: auto; } .in-news-wall .news-hot-sign { margin-top: 20px; position: relative; overflow: hidden; } .in-news-wall .news-hot-sign img { width: 100%; /*height: 150px;*/ height: 174px; } .in-news-wall .news-hot-sign:hover img { transition: all 1s; transform: scale(1.1); } .in-news-wall .news-hot-sign span { display: block; position: absolute; width: 100%; height: 40px; line-height: 40px; text-align: center; bottom: 0; left: 0; color: #ffffff; background: rgba(0, 0, 0, 0.2); } .in-news-wall .news-hot-3 { width: 40%; } .in-news-wall .news-hot-3 li { border-bottom: 1px solid #e6e7e8; padding-bottom: 18px; margin-bottom: 15px; } .in-news-wall .news-hot-3 li .title { font-size: 20px; display: block; line-height: 30px; margin-bottom: 5px; } .in-news-wall .news-hot-3 li .type-date { color: #e6e7e8; } .in-news-wall .news-hot-3 li .type-date a { color: #3a51df; margin-right: 8px; display: inline-block; } .in-news-wall .news-hot-3 li .type-date span { display: inline-block; margin-left: 8px; color: #888888; } .in-news-wall .news-hot-3 .more { width: 200px; height: 50px; line-height: 50px; font-size: 16px; display: inline-block; background-image: linear-gradient(to right, #32beff 0, #005aab 51%, #32beff 100%); background-size: 200% auto; color: #fff; text-align: center; transition: 0.5s; margin-left: 40px; margin-top: 50px; } .in-news-wall .news-hot-3 .more:hover { background-position: right center; background-color: #005aab; } .in-server { background: url(../img/server_1.png) no-repeat; background-size: cover; height: 550px; position: relative; } .in-server::before { content: ""; position: absolute; top: 20px; left: 20px; bottom: 20px; right: 20px; border: 1px solid #fff; opacity: 0.3; filter: alpha(opacity=5); pointer-events: none; z-index: 1; } .in-server .wrapper > a { display: block; color: #ffffff; padding: 10% 0 0 5%; } .in-server h1 { font-size: 48px; } .in-server p { font-size: 20px; width: 50%; margin-top: 20px; } .in-server .comp { font-size: 20px; } .footer-search { padding: 150px 0; position: relative; background: url(../img/search-gb.jpg) no-repeat; background-size: 100% 100%; height: 545px; } .footer-search .search-form { text-align: center; padding-top: 5%; position: relative; z-index: 50; } .footer-search .search-form form { position: relative; } .footer-search .search-form i { font-size: 20px; position: absolute; left: 31%; top: 10px; color: #007bff; } .footer-search .search-form input { background-color: #ffffff; height: 50px; border: 0; width: 40%; padding: 0 50px; } .footer-search .search-form input:focus { border: 0; outline: black; } .tagcloud { position: relative; margin-top: -150px; } .tagcloud a { position: absolute; top: 0; left: 0; display: block; padding: 11px 30px; color: #333; font-size: 16px; border: 1px solid #e6e7e8; border-radius: 18px; background-color: #f2f4f8; opacity: 0.8; text-decoration: none; white-space: nowrap; -o-box-shadow: 6px 4px 8px 0 rgba(151, 142, 136, 0.34); -ms-box-shadow: 6px 4px 8px 0 rgba(151, 142, 136, 0.34); -moz-box-shadow: 6px 4px 8px 0 rgba(151, 142, 136, 0.34); -webkit-box-shadow: 6px 4px 8px 0 rgba(151, 142, 136, 0.34); box-shadow: 6px 4px 8px 0 rgba(151, 142, 136, 0.34); } .tagcloud a:hover { color: #3385cf; } .in-tags { position: absolute; left: 0; top: 0px; width: 250px; height: 125px; } .in-tags .tag-a { display: inline-block; width: 250px; height: 125px; background: url(../img/tag_a.png) no-repeat; background-size: 100% 100%; position: absolute; top: -125px; } .in-tags .tag-b { display: inline-block; width: 250px; height: 125px; background: url(../img/tag_b.png) no-repeat; background-size: 100% 100%; } .footer { background: #0f2341; min-height: 200px; padding-top: 40px; color: #ffffff; } .footer ul { padding: 0; margin: 20px 0 50px 0; } .footer .foot-nav { width: 25%; } .footer .foot-nav h2 { font-size: 20px; } .footer .foot-nav li { width: 45%; display: inline-block; } .footer .foot-nav li a { opacity: 0.45; color: #ffffff; display: inline-block; line-height: 35px; font-size: 15px; } .footer .foot-nav li a:hover { opacity: 1; } .footer .foot-nav:nth-child(3) { width: 20%; } .footer .foot-nav:nth-child(3) li { width: 100%; } .footer .foot-nav:last-child { width: 30%; } .footer .foot-nav:last-child li { width: 100%; text-align: left; } .footer .foot-nav:last-child .foot-icon { display: inline-block; margin-right: 40px; position: relative; } .footer .foot-nav:last-child .foot-icon span { display: inline-block; width: 50px; height: 50px; border-radius: 100%; border: 1px solid #999999; text-align: center; line-height: 50px; cursor: pointer; } .footer .foot-nav:last-child .foot-icon i { font-size: 26px; } .footer .foot-nav:last-child .foot-icon .code-img { position: absolute; left: -25px; top: 60px; display: none; background-color: #ffffff; padding: 5px; z-index: 15; } .footer .foot-nav:last-child .foot-icon .code-img::after { width: 0; height: 0; position: absolute; top: -5px; left: 45%; content: ""; display: block; border-right: 5px solid transparent; border-left: 5px solid transparent; border-bottom: 5px solid #ffffff; } .footer .bottom { background-color: #0b182b; line-height: 50px; height: 50px; opacity: 0.5; color: #fff; position: relative; z-index: 1; } .go-top { position: fixed; z-index: 1001; right: 20px; bottom: 15px; width: 48px; cursor: pointer; display: none; } .go-top a { display: block; width: 45px; height: 45px; background-color: #005aab; background-image: linear-gradient(to right, #32beff 0, #005aab 51%, #32beff 100%); background-size: 200% auto; transition: 0.5s; margin-bottom: 5px; color: #ffffff; text-align: center; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); } .go-top a:hover { background-position: right center; background-color: #005aab; } .go-top a i { font-size: 25px; position: relative; top: 5px; } .pub-wall { padding: 120px 0 50px 0; } .pub-bg { height: 300px; background-size: 100% 100%; /*margin-bottom: 20px;*/ line-height: 300px; text-align: center; font-size: 6rem; } .co-title { font-size: 45px; font-family: Times New Roman; color: #666; } .co-title span { color: #111; text-transform: capitalize; } .heading { /*font-size:2rem*/ color: #666666; font-weight: 200; } .weizhi { /*float: right;*/ /*margin-top: 10px;*/ /*font-size: 12px;*/ font-size: 14px; line-height: 50px; } .weizhi a { color: #808080; } .category-wall { border-top: #dadada 1px solid; /* margin: 10px auto 0;*/ height: 80px; text-align: center; } .category-wall .selected { display: none; } .category-wall ul { display: inline-block; } .category-wall ul li { /*float: left;*/ display:inline-block; padding: 0 20px; } .category-wall ul li a { display: inline-block; padding: 20px 10px; color: #333; position: relative; z-index: 10; } .category-wall ul li a:hover { text-decoration: none; } .category-wall ul li.active a { /*color: #007bff;*/ color: #0b7de0; } .category-wall ul li.active a::before { content: ""; height: 2px; /*background-color: #007bff;*/ background-color: #0b7de0; position: absolute; top: -3px; width: 150%; left: -25%; } .news_box { margin: 0 auto 30px; } .news_box .left_news { width: 75%; float: left; } .news_box .left_news img { max-width: 100% !important; } .right_content { width: 230px; float: right; } .call { background: url(../img/callus.gif); height: 100px; } .call span { display: block; padding: 65px 0 0 150px; color: #ffffff; font-size: 16px; } .contentus { background: #f7f7f7; padding-bottom: 60px; } .contentus a { display: block; padding-top: 120px; padding-bottom: 20px; width: 130px; margin: auto; font-size: 14px; color: #808080; } .contentus a span { display: block; width: 130px; text-align: center; } .telphone { background: url(../img/callicon.gif) no-repeat center 35px; } .fax { background: url(../img/callicon.gif) no-repeat center -110px; } .mailbox { background: url(../img/callicon.gif) no-repeat center -245px; } /* 鏂伴椈 */ .new-item-block { margin: 0 2.5% 55px 0; } .new-item-block > a { display: block; } .new-item-block .item-img { width: 36%; overflow: hidden; } .new-item-block .item-img img { width: 100%; max-height: 240px; transition: all 0.36s ease; } .new-item-block .item-wrapper { width: 57.5%; margin-top: 55px; margin-left: 5%; position: relative; } .new-item-block .item-wrapper .title { font-size: 18px; width: calc(100% - 150px); transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; } .new-item-block .item-wrapper .sub-title { font-size: 15px; margin-top: 20px; width: calc(100% - 150px); transition: all 0.36s ease; } .new-item-block .item-wrapper .date-wrap { position: absolute; top: 10px; right: 0; font-size: 36px; font-family: Times New Roman; } .new-item-block:hover .item-img img { transform: scale(1.08); } .new-item-block:hover .item-wrapper .title, .new-item-block:hover .item-wrapper .sub-title { margin-top: -10px; } .new-item-block:hover .item-wrapper .title, .new-item-block:hover .item-wrapper .sub-title { margin-top: 25px; } .new-item-block:hover a { color: #333333; } .news-title { padding: 30px 25px; background-color: #f7f7f7; font-size: 22px; font-weight: bold; color: #000; line-height: 30px; position: relative; margin-bottom: 20px; } .news-title p { margin-top: 20px; font-size: 14px; font-weight: normal; } .news-title .bdsharebuttonbox { position: absolute; right: 30px; bottom: 30px; } /* 瑙嗛 */ .video-item li { height: auto; width: 31%; margin: 0 9px 20px 0; float: left; transition: all 0.36s ease; } .video-item .video-img { position: relative; overflow: hidden; } .video-item .video-img img { border: 3px solid transparent; width: 100%; height: 240px; transition: all 0.36s ease; } .video-item .video-img .mask { transition: 0.36s ease; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: transparent; } .video-item .video-img .mask::after { width: 60px; height: 60px; opacity: 1; transform: translate3d(0, 0, 0); margin: -30px; background-color: transparent; border: 3px solid #fff; color: #fff; border-radius: 50%; position: absolute; top: 50%; left: 50%; transition: 0.36s ease; content: ""; } .video-item .video-img .mask::before { border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 14px solid #ffffff; width: 0; height: 0; display: block; content: ""; position: absolute; color: #fff; left: 48.5%; top: 46%; z-index: 2; } .video-item li:hover .video-img .mask { background-color: rgba(0, 0, 0, 0.18); } .video-item li:hover .video-img .mask::after { transform: translate3d(0, 0, 0); opacity: 1; width: 120px; height: 120px; margin: -62px -60px; opacity: 0; border-width: 5px; } .video-item .video-info { position: relative; padding: 16px 60px 6px 0px; transition: all 0.36s ease; } .video-item .video-info .title { font-size: 16px; padding-left: 20px; } .video-item .video-info .sub-title { font-size: 13px; color: #888888; padding-left: 20px; } .video-item li:hover .video-img img { border: 3px solid #007bff; } .video-item li:hover { box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3); } .video-item .video-info .video-go { width: 35px; height: 35px; line-height: 35px; text-align: center; position: absolute; right: 35px; top: 15px; transition: all 0.36s ease; border-radius: 50%; } .video-item li:hover .video-go { background-color: #007bff; color: #ffffff; right: 20px; } .video-area { position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.8); width: 100%; height: 100%; z-index: 100; transition: background 1s ease; } .video-area .vplay-wall { width: 960px; padding: 10px; height: 620px; background: #f7f7f7; overflow: hidden; position: absolute; left: 50%; top: 50%; margin-left: -480px; margin-top: -330px; z-index: 2; border: 1px solid #dedede; transition: margin 0.36s ease, background 1s ease, border-color 1s ease; } .video-area .vplay-wall .vheader .title { margin-top: 5px; font-size: 16px; } .video-area .vplay-wall .vheader .sub-title { font-size: 13px; color: #888888; } /* download */ .pub-search { padding: 20px 2%; background-color: #f9f9f9; } .pub-search input { height: 54px; width: 80%; line-height: 54px; text-indent: 20px; background-color: #ffffff; border: 0; } .pub-search input:focus { border: 0; outline: initial; } .pub-search button { height: 54px; width: 20%; background: #0b7de0; color: #fff; font-size: 22px; text-align: center; outline: initial; border: 0; } .pub-search button i { font-size: 25px; margin-right: 10px; vertical-align: middle; } .pub-column { padding: 20px 0; } .pub-column a { display: inline-block; position: relative; padding: 10px 0px; margin-right: 2px; background: #f9f9f9; font-size: 14px; width: 16.2%; text-align: center; } .pub-column a.active { background: #0b7de0; color: #ffffff; } .down-list, .product-list, .parts-list { margin-bottom: 30px; padding: 0; } .down-list li { padding: 15px 0; border-bottom: 1px solid #e6e7e8; position: relative; } .down-list li a { display: inline-block; width: 90%; position: relative; } .down-list li a.adown { width: 50px; position: absolute; right: 0; } .down-list li a .size { position: absolute; right: 0; } .down-list li .down { font-size: 20px; color: #32beff; } .product-list li { width: 23.8%; margin-right: 1.6%; margin-bottom: 30px; background: none; transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; float: left; } .product-list li:nth-child(4n) { margin-right: 0px; } .product-list .product-img { position: relative; display: block; overflow: hidden; box-shadow: 0 14px 40px 0 rgba(112,117,120,.26); /*box-shadow: 0 10px 30px 0 rgb(11, 125, 224,.22);*/ } .product-list .product-img img { width: 100%; } .product-list .product-info { padding: 10px 0 10px 20px; position: relative; background-color: ghostwhite; } .product-list .product-info::before { content: ""; position: absolute; display: block; width: 100%; height: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0.1); left: 0; bottom: 0; transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; } .product-list .product-info::after { content: ""; width: 0%; position: absolute; top: 16%; left: 0; transition: all 0.5s ease-out 0s; margin-top: -13px; border-top: 1px solid #828282; opacity: 0; } .product-list .product-info .title { color: #333333; font-size: 16px; margin-bottom: 5px; padding-right: 20%; } .product-list .product-info .subtitle { color: #666666; font-size: 13px; margin-bottom: 10px; padding-right:20%; } .product-list .product-info span { width: 35px; height: 35px; line-height: 35px; text-align: center; position: absolute; right: 35px; top: 20px; transition: all 0.36s ease; border-radius: 50%; } .product-list li:hover .product-info span, .product-list li.active .product-info span { background-color: #007bff; color: #ffffff; right: 20px; } .product-list li:hover .product-info::after, .product-list li.active .product-info::after { opacity: 0.15; width: 100%; } .product-list li:hover .product-info::before, .product-list li.active .product-info::before { border-bottom: 1px solid rgba(0, 0, 0, 0.4); top: -500px; border-color: transparent; } .product-list li:hover .product-info, .product-list li.active .product-info { background-color: skyblue; } .pd-bg { background-color: #f7f7f7; padding: 30px 0; padding-bottom:20px; } .pd-info, .pd-tab { position: relative; } .pd-info::after { content: ""; position: absolute; height: 1px; background-color: #eee; width: 100%; bottom: 0; left: 0; } .pd-walls .pd-walls-item { padding: 30px 0px; display: none; width: 65%; margin: 0 auto } .pd-walls .pd-walls-item.notFirst img { max-width: 100%; } .pd-walls .pd-walls-item.active { display: block; } .pd-tab { line-height: 60px; } .pd-tab span { font-size: 16px; padding: 0 30px; position: relative; display: inline-block; height: 60px; cursor: pointer; } .pd-tab span.active { color: #32beff; } .pd-tab span.active::after { content: ""; position: absolute; height: 2px; background-color: #32beff; width: 100%; bottom: 0; left: 0; } .p-preview { width: 50%; position: relative; } .pinfo-text { width: 50%; padding: 110px 50px 0 2%; text-align: left; } .pinfo-text p { color: #888; margin-top: 20px; } .pinfo-text a { display: inline-block; border-radius: 30px; background-color: #007bff; color: #fff; margin-top: 50px; padding: 13px 50px; } .pinfo-text a:hover{ color: #fff; } .bg_left { margin-top: 30px; width: 450px; height: auto; } .bg_right { position: absolute; left: 450px; top: 30px; } .show { width: 450px; height: 450px; margin-bottom: 10px; position: relative; border: 1px solid #e8e8e8; cursor: move; } .show img { width: 450px; height: 450px; } .mask { width: 215px; height: 215px; background: #0099ff; filter: Alpha(opacity=50); opacity: 0.5; position: absolute; top: 0; left: 0; display: none; } .bigshow { width: 450px; height: 450px; overflow: hidden; margin-left: 10px; display: none; } .bigshow img { width: 860px; height: 860px; margin-right: 10px; } .smallshow { width: 100%; height: 70px; position: relative; } .smallshow img { width: 100%; height:100%; border: 1px solid #e8e8e8; box-sizing: border-box; transition: all 0.5s; } .smallshow video { width: 100%; border: 1px solid #e8e8e8; box-sizing: border-box; transition: all 0.5s; } .smallshow > .middle_box { margin-left: 30px; margin-right: 30px; width: 380px; overflow: hidden; height: 70px; } .smallshow .middle { overflow: hidden; transition: all 0.5s; height: 70px; padding: 0; } .smallshow .middle > li { width: 75px; height: 70px; float: left; cursor: pointer; padding: 0 5px; } .smallshow .middle > div { width: 75px; height: 70px; display: inline-block; vertical-align: middle; cursor: pointer; padding: 0 5px; white-space: normal; word-wrap: break-word; word-break: break-all; overflow-x:auto; } .smallshow > p { position: absolute; top: 50%; width: 22px; height: 32px; margin-top: -16px; } .smallshow > .prev { left: 0; background: url(../img/hover-prev.png) no-repeat; transition: all 0.5s; cursor:pointer; } .smallshow > .next { right: 0; background: url(../img/hover-next.png) no-repeat; transition: all 0.5s; cursor: pointer; } .smallshow > .prev.prevnone { left: 0; background: url(../img/prev.png) no-repeat; cursor: not-allowed; } .smallshow > .next.nextnone { right: 0; background: url(../img/next.png) no-repeat; cursor: not-allowed; } /* parts-list */ .parts-list .parts-img { overflow: hidden; } .parts-list .parts-img img { transition: all 0.36s ease; width: 100%; } .parts-list > li { width: calc(100% / 3 - 15px); margin-right: 20px; float: left; background-color: #f6f7f7; margin-bottom: 20px; } .parts-list > li:nth-child(3n) { margin-right: 0px; } .parts-list .parts-info { padding: 42px 52px; position: relative; } .parts-list .parts-info .title { transition: 0.36s ease; font-size: 17px; color: #555; position: relative; line-height: 30px; } .parts-list .parts-info::after { display: block; content: ""; height: 1px; position: absolute; left: 0; width: 0%; background: transparent; top: 72px; left: 5%; transition: 0.36s ease; } .parts-list .parts-info .subtitle { transition: 0.36s ease; color: #999; } .parts-list li:hover { box-shadow: 0px 18px 25px rgba(0, 0, 0, 0.08); background-color: #fff; } .parts-list li:hover .parts-info::after{ width: 90%; background: #e6e7e8; } .parts-list li:hover .parts-info .title{ transform: translateY(-10px); } .parts-list li:hover .parts-info .subtitle{ transform: translateY(10px); } .parts-list li:hover .parts-img img{ transform: scale(1.08) translate3d(0, 0, 0); } .link1 { width: 175px; border: 0px; outline: none; } .link2 { width: 145px; border: 0px; outline: none; } .link3 { width: 35px; border: 0px; outline: none; } .link4 { width: 30px; } /* 閰嶄欢璐墿杞 */ .parts-column { width: 19%; background-color: #f6f7f7; padding: 20px 0 20px 10px; height: 680px; } .link-number-text { font-size: 18px; color: #333; font-family: "Microsoft YaHei"; /*position:relative; z-index:2;*/ cursor: pointer; } .map-position { left: 10px; top: 10px; text-align: center; width: 40px; height: 30px; line-height: 30px; /* border-radius: 20px;*/ overflow: hidden; cursor:pointer; } .parts-column a { display: block; font-size: 13px; line-height: 24px; padding: 10px 10px; } .parts-column a.active { background-color: #ffffff; color: #3385cf; } .parts-preview { width: 40%; min-height: 400px; overflow: hidden; height: 680px; position: relative; } .parts-cart { /* width: 41%;*/ /*width: 57%;*/ width: 59%; background-color: white; /*height: 680px;*/ } .patr-items { height: auto; max-height: 680px; overflow-x: scroll } .parts-cart th { font-size: 14px; font-weight: normal; } .parts-cart td { font-size: 13px; overflow: hidden; } .parts-cart td:first-child { width: 10%; } .parts-cart td:nth-child(1) { width: 10%; } .parts-cart td:nth-child(2) { width: 12%; } .parts-cart td:nth-child(4) { width: 20%; } .parts-cart td:last-child { width: 18%; text-align: center; } .parts-preview .zoom { display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: justify; justify-content: space-between; height: 40px; width: 100px; z-index: 100; position: relative; background-color: #ffffff; font-size: 25px; margin-left: 20px; } .parts-preview .zoom span { display: inline-block; text-align: center; background: #f6f7f7; cursor: pointer; border-radius: 5px; margin-right: 10px; padding: 0px 15px; } .parts-preview .zoom span i { position: relative; top: -2px; font-size: 20px; } #box-all { position: relative !important; text-align: center; width: 100%; } #box-all img { max-width: 100%; height: 580px; } /* login */ .flex-sb-m { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: space-between; -ms-align-items: center; align-items: center; } .w-full { width: 100%; } .p-b-30 { padding-bottom: 30px; } .user-lr-wall { text-align: center; } .wrap-login100 { width: 670px; background: #fff; border-radius: 10px; overflow: hidden; position: relative; margin: 100px auto; } .login100-form-title { width: 100%; position: relative; z-index: 1; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; background-repeat: no-repeat; background-size: cover; background-position: center; padding: 70px 15px 74px 15px; } .login100-form-title-1 { font-family: Poppins-Bold; font-size: 30px; color: #fff; text-transform: uppercase; line-height: 1.2; text-align: center; } .login100-form-title::before { content: ""; display: block; position: absolute; z-index: -1; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(54, 84, 99, 0.7); } /*================================================================== [ Form ]*/ .login100-form { width: 100%; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 43px 88px 93px 190px; } /*------------------------------------------------------------------ [ Input ]*/ .wrap-input100 { width: 100%; position: relative; border-bottom: 1px solid #b2b2b2; margin-bottom: 15px; } .label-input100 { font-family: Poppins-Regular; font-size: 15px; color: #808080; line-height: 1.2; text-align: right; position: absolute; top: 14px; left: -105px; width: 80px; } /*---------------------------------------------*/ .input100 { font-family: Poppins-Regular; font-size: 15px; color: #555555; line-height: 1.2; border: 0; display: block; width: 100%; background: transparent; padding: 0 5px; outline: none; } .input100:focus { border: 0; } .focus-input100 { position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; } .focus-input100::before { content: ""; display: block; position: absolute; bottom: -1px; left: 0; width: 0; height: 1px; -webkit-transition: all 0.6s; -o-transition: all 0.6s; -moz-transition: all 0.6s; transition: all 0.6s; background: #57b846; } /*---------------------------------------------*/ input.input100 { height: 45px; } .input100:focus + .focus-input100::before { width: 100%; } .has-val.input100 + .focus-input100::before { width: 100%; } /*------------------------------------------------------------------ [ Button ]*/ /*涓汉*/ .container-login100-form-btn { width: 100%; text-align: left; } .container-login100-form-btn a { display: inline-block; margin-left: 50px; color: #32beff; } /*.side-menu-tree { padding-left: 10px; }*/ .login100-form-btn { padding: 0 30px; min-width: 160px; height: 45px; border-radius: 25px; font-family: Poppins-Regular; font-size: 16px; color: #fff; line-height: 1.2; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; outline: none; border: 0; background-image: linear-gradient(to right, #32beff 0, #005aab 51%, #32beff 100%); background-size: 200% auto; color: #fff; text-align: center; } .login100-form-btn:hover { background-color: #32beff; outline: none; border: 0; } /* 娉ㄥ唽 */ .reg-wall { width: 900px; } .reg-tab { height: 45px; line-height: 45px } .reg-tab a { display: block; width: 50%; text-align: center; height: 45px; background-color: #f7f7f7 } .reg-tab a.active { background-image: linear-gradient(to right, #32beff 0, #005aab 100%); color: #ffffff; } .reg-form { padding: 43px 90px 93px 110px; } .reg-form .row { width: 100%; margin-bottom: 25px; } .reg-form .col-form-label { text-align: right; color: #666; } .reg-form .form-control { height: calc(1.5em + .75rem + 8px); } .reg-form .col-form-label span { color: #fd4343; } .reg-form .container-login100-form-btn { text-align: right; } .reg-form label.error { position: absolute; left: 16px; font-size: 12px; color: #fd4343; } .shop-column { width: 19%; background-color: #f6f7f7; /*padding: 20px 0 20px 10px;*/ height: 790px; line-height: 33px; background-color: white; /*float: left;*/ border-right: 1px solid #e5e5e5; } .shop-preview { /*width: 65%;*/ /* min-height: 400px;*/ /* width: 79%;*/ overflow: hidden; height: 790px; position: relative; vertical-align: bottom; text-align: center; /*float: left;*/ background-color: white; } .am-form-nowpassword { width: 285px; height: 45px; margin-left: 22px; } .am-form-newpassword { width: 285px; height: 45px; margin-left: 22px; } .am-form-newpassword2 { width: 285px; height: 45px; margin-left: 22px; padding-left: 10px; } .am-btn { width: 265px; height: 50px; font-size: 16px; border: 1px rgba(187, 187, 187, 0.5)B solid; margin: 0 auto; border-radius: 5px; } .val { left: 474px; position: absolute; font-size: 1em; line-height: 40px; } .title0 { margin-left: -305px; font-size: 2em; } .title2 { margin-left: -43px; font-size: 2em; } .title3 { margin-left: -20px; font-size: 2em; } .title1 { margin-left: -350px; font-size: 2em; } .am-btn1 { width: 265px; height: 50px; font-size: 16px; border: 1px rgba(187, 187, 187, 0.5)B solid; margin: 0 auto; border-radius: 5px; } .am-form-email { width: 285px; height: 45px; margin-left: 22px; } .am-form-phone { width: 285px; height: 45px; margin-left: 22px; } .order-letf { overflow-x: hidden; overflow-y: auto; height: 790px } .person { padding-top: 110px; padding: 120px 0 50px 0; } /* 涓汉涓績 */ .uc-wrapper { position: relative; padding-top: 15px; } .uc-nav { width: 260px; background-color: #ffffff; min-height: 500px; box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.06); padding: 20px 0px 20px 40px; } .uc-nav h4 { font-size: 15px; } .uc-nav ul { padding: 0; } .uc-nav ul a { display: inline-block; padding: 10px 10px 10px 30px; } .uc-nav ul a.active { color: #005aab; } .nc-wall { width: calc(100% - 275px); min-height: 500px; background-color: #ffffff; box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.06); padding: 20px; color: #666; } .nc-wall .col { padding-top: 15px; padding-bottom: 15px; margin-right: 10px; background: #f6f7f7; } .nc-wall .col:last-child { margin-right: 0px; } .nc-wall .col span, .nc-wall .col a { color: #007bff; } .nc-wall .col p:last-child { margin-bottom: 0px; } .nc-wall .col h4 { font-size: 15px; margin-bottom: 10px; } .bd-callout { padding: 1.25rem; margin-top: 1.25rem; margin-bottom: 1.25rem; border: 1px solid #eee; border-left-width: .25rem; border-radius: .25rem; border-left-color: #5bc0de; } .uc-form { padding: 10px 100px 0 100px; } .uc-wall-tab { margin: 0; padding: 0; border-bottom: 1px solid #e6e7e8; } .uc-wall-tab li { display: inline-block; } .uc-wall-tab li a { display: block; padding: 15px 30px; position: relative; } .uc-wall-tab li a.active, .uc-wall-tab li a:hover { color: #007bff; } .uc-wall-tab li a.active::before, .uc-wall-tab li a:hover::before { content: ''; height: 2px; background-color: #007bff; position: absolute; left: 0px; bottom: 0px; width: 100%; } .uc-table { margin-top: 10px; } .uc-table .btn { font-size: 12px; } .header .app-toggler, .footer-nav { display: none; } /*鑷畾涔夋粴鍔ㄦ潯鏍峰紡*/ .scrollbar::-webkit-scrollbar { /*婊氬姩鏉℃暣浣撴牱寮?/ width:7px; /*楂樺鍒嗗埆瀵瑰簲妯珫婊氬姩鏉$殑灏哄*/ height: 7px; border-radius: 10px; overflow: hidden; opacity: 0.3; } .scrollbar::-webkit-scrollbar-thumb { /*婊氬姩鏉¢噷闈㈠皬鏂瑰潡*/ border-radius: 10px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: #0b7de0; } .scrollbar::-webkit-scrollbar-track { /*婊氬姩鏉¢噷闈㈣建閬?/ -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); border-radius: 10px; background: transparent; opacity: 0.3; /*background:;*/ } /*鑷畾涔夋粴鍔ㄦ潯鏍峰紡*/ .nav-title > i { display: none; transition: transform 0.5s; -moz-transition: -moz-transform 0.5s; /* Firefox 4 */ -webkit-transition: -webkit-transform 0.5s; /* Safari 鍜 Chrome */ -o-transition: -o-transform 0.5s; padding-right:5px; } .myCenter { font-size: 16px; padding: 10px 0 10px 50px; border-bottom: 1px solid #e5e5e5; } .side-menu-tree .layui-icon { font-size: 18px; } .side-menu-tree dd { padding-left: 70px; } .myCenter_userIcon{ width:15%; height:15%; max-width:200px; max-height:200px; min-width:100px; min-height:100px; } .uc_name { font-size: 18px; } /*.myInfoWrapper{ padding:20px; }*/ @media only screen and (min-width: 1400px) { .header .nav a { padding: 0 20px; } .topSlider .swiper-slide { height: 640px; } .in-product-type .cover-box { padding-top: 100%; } .in-product-type .cover-box span { font-size: 22px; } /* .in-customer .swiper-slide img, .in-customer .swiper-slide { height: 400px; }*/ /* .in-customer .swiper-slide .customer-text { width: 46%; }*/ /* .in-customer .swiper-slide .customer-text { padding-top: 10px; }*/ .pub-column a { width: 12%; } .wrap-login100 { margin: 50px auto; } } /*鐢佃剳绔?/ @media only screen and (min-width: 900px) { patr-items{ overflow-y: scroll; } } @media only screen and (min-width: 1200px) and (max-width: 1400px) { .header .nav a { padding: 0 15px; font-size:18px; } } @media only screen and (min-width: 1000px) and (max-width: 1200px) { .header .nav a { padding: 0 7px; font-size: 17px } } @media only screen and (min-width: 400px) and (max-width: 1000px) { .header .nav a { padding: 0 5px; font-size: 16px } } @media (min-width: 576px) { .col-sm-2 { -ms-flex: 0 0 22%; flex: 0 0 22%; max-width: 22%; } } @media (min-width: 576px) { .col-sm-10 { -ms-flex: 0 0 78%; flex: 0 0 78%; max-width: 78%; } } /* 鎵嬫満 */ @media screen and (max-width: 900px) { /*閰嶄欢椤甸潰 鎵嬫満绔 鑷畾涔夋粴鍔ㄦ潯鏍峰紡*/ .part_scrollbar { overflow-y: auto; overflow-x: auto; height: auto; max-height: 70vh; } .part_scrollbar::-webkit-scrollbar { /*婊氬姩鏉℃暣浣撴牱寮?/ width: 20px; /*楂樺鍒嗗埆瀵瑰簲妯珫婊氬姩鏉$殑灏哄*/ height: 7px; border-radius: 3px; overflow: hidden; opacity: 0.3; } .part_scrollbar::-webkit-scrollbar-thumb { /*婊氬姩鏉¢噷闈㈠皬鏂瑰潡*/ border-radius: 3px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: rgba(0, 0, 0, 0.2); } .part_scrollbar::-webkit-scrollbar-track { /*婊氬姩鏉¢噷闈㈣建閬?/ -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); border-radius: 3px; background: transparent; opacity: 0.3; /*background:;*/ } /*閰嶄欢椤甸潰 鎵嬫満绔 鑷畾涔夋粴鍔ㄦ潯鏍峰紡缁撴潫*/ .pd-walls .pd-walls-item { width: 100%; } /*.page-last { width: 50%; } .page-last .page-link { display: block; border: 1px solid #0c5ca8; border-radius: .4rem; text-align: center; font-size: 1.2rem; line-height:1.5rem; color: #0c5ca8; cursor: pointer; box-sizing: border-box; }*/ .weizhi { display: none; } .nav-title > i { display: block; } .nav-item.active i { transform: rotate(180deg); -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); } .in-product-type li .inner-box .box-txt { left: 5%; } .wrapper.noWrapper { padding: 0; } .header .nav-item.active a, .hover .header .nav-item.active a, .hover .header .nav-item:hover a, .header .nav-item.current a, .hover .header .nav-item.current a { color: #333; } .in-product-type li .inner-box .box-txt .sub-title { margin-top: 0px; } .videoWrapper, .in-customer .swiper-slide .customer-text { width: 100%; } .in-product-type li { width: 100%; } .in-customer { background: none; } .shop-column { width: 23%; background-color: #f6f7f7; /*padding: 20px 0 20px 10px;*/ height: 760px; line-height: 33px; background-color: white; font-size: 10px; display: inline; } .person { padding-top: 20px } .title0 { margin-left: -111px; font-size: 1em; } .title2 { margin-left: 3px; font-size: 1em; } .title3 { margin-left: -1px; font-size: 1em; } .val { left: 121px; position: absolute; font-size: 1em; line-height: 23px; } .am-form-email { width: 131px; height: 32px; margin-left: 3px; } .am-form-phone { width: 113px; height: 33px; margin-left: 7px; } .title1 { margin-left: -134px; font-size: 1em; } /*.side-menu-tree { padding-left: 12px }*/ .myCenter { font-size: 12px; padding:10px 0 10px 4px; } .side-menu-tree .layui-icon { font-size: 12px; } .side-menu-tree dd { padding-left: 0; text-align: center; } .shop-preview { width: 77%; /* min-height: 400px;*/ overflow: hidden; height: 760px; position: relative; vertical-align: bottom; text-align: center; display: inline; font-size:10px; } .order-letf { overflow-x: hidden; overflow-y: auto; height: 760px } .am-btn1 { width: 176px; height: 41px; font-size: 16px; border: 1px rgba(187, 187, 187, 0.5)B solid; margin: 0 auto; border-radius: 5px; } .am-form-nowpassword { width: 173px; height: 28px; margin-left: 22px; } .am-form-newpassword { width: 173px; height: 28px; margin-left: 22px; } .am-form-newpassword2 { width: 178px; height: 28px; margin-left: 55px; } .am-btn { width: 198px; height: 45px; font-size: 16px; border: 1px rgba(187, 187, 187, 0.5)B solid; margin: 0 auto; border-radius: 5px; } .dbindex { position: absolute; } .left, .right { float: inherit; } .wrapper { /*width: 92%; height: auto; margin: auto;*/ width: 100%; height: auto; margin: auto; } .topSlider { margin-top: 0px; } .top-main { height: 50px; background: rgba(15, 35, 65, .2); } .top { display: none; } .header { height: 50px; line-height: 50px; } .header .logo { min-width: 100px; height: 50px; display: inline-block; padding: 0 15px; } .header .app-toggler { float: right; position: relative; right:10px; height:30px; top: 10px; display: block; outline: none; } .header .app-toggler::after { height: 1px; content: ''; display: block; /*background: #ffffff;*/ background: #000; position: absolute; left: 20%; top: 2px; width: 25px; transition: 0.3s all; } .header .app-toggler::before { height: 1px; content: ''; display: block; /*background: #ffffff;*/ background: #000; position: absolute; left: 20%; top: 10px; width: 25px; transition: 0.3s all; } .header .app-toggler span { display: inline-block; /*border-bottom: 1px solid #ffffff;*/ border-bottom: 1px solid #000; height: 11px; position: relative; position: relative; left: -2px; width: 25px; } .app-hover .header { background: #ffffff; } .app-hover .header .app-toggler::before, .app-hover .header .app-toggler::after, .hover .header .app-toggler::before, .hover .header .app-toggler::after { background: #333; } .hover .header .app-toggler span { border-bottom: 1px solid #333; } .app-hover .header .app-toggler::before { transform: rotate(50deg); left: -20%; } .app-hover .header .app-toggler::after { transform: rotate(-50deg); top: 10px; left: -20% } .app-hover .header .app-toggler span { display: none; } .header .logo img { height: 35px; } .header .search { display: none; } .header .nav { background: #ffffff; /*left: -5%; width: 110%;*/ width: 100%; position: relative; padding: 10px 0 20px 0; display: none; } .app-hover .header .nav { display: block; } .header .nav .nav-item { width: 100%; border-bottom: 1px solid #e6e7e8; } .header .nav .nav-item:last-child { border-bottom: 0px; } .header .nav .nav-title { color: #333; font-size: 16px; height: 50px; line-height: 50px; text-align: left; padding: 0 10px; } .header .nav .nav-title a { display: inline-block; color: #333; font-size: 16px; height: 50px; line-height: 50px; padding:0 5px; } .header .nav .active .nav-title a, .header .nav-item.current.active a { color: #0b7de0; } .header .nav .group_item { position: relative; background: transparent; top: 0px; } .header .nav .group_item .left { display: none; } .header .nav .group_item .right { width: 100%; padding: 10px 0 10px 0px; } .header .nav .group_item .right a { color: #666; padding-left: 10px; width: 45%; display: inline-block; vertical-align: middle; font-size:13px; } .header .nav-item.active .nav-title::before, .header .nav-title:hover::before { content: ""; position: absolute; width: 100%; height: 1px; bottom: 0px; left: 0; background-color: transparent; } .nav-item.active .nav-title, .nav-item.current.active .nav-title { border-bottom: 1px solid #e6e7e8; } /* .header .nav-item.active .nav-title::before{ content: ""; position: absolute; width: 100%; height: 1px; bottom: 0px; left: 0; background-color: #e6e7e8; }*/ .header .nav .nav-item:first-child { display: none; } .header .footer-nav { background: #0f2341; display: block; position: absolute; height: 40px; line-height: 40px; text-align: right; bottom: 0px; width: 100%; padding-right: 20px; } .header .footer-nav a { height: auto; font-size: 14px; display: inline-block; padding: 0 5px; opacity: .45; } .header .footer-nav a.active { opacity: 1; } .header .footer-nav span { color: #fff; opacity: .45; } .topSlider .swiper-slide { height: 500px; /*background-size: 400% 100%;*/ background-size:cover; } .news-hot-2 { display: none; } .in-parts { padding: 20px 0; } .in-product-type .wrapper > .title, .in-parts .title { font-size: 20px; } .in-parts .tags { padding: 10px 0 0 0; } .product_tagMobile{ display:block; } .tags_a { display: block; margin: 0; padding: 10px 0; } .tags{ display:none; } .in-product-type .wrapper > .sub-title, .in-parts .sub-title { font-size: 13px; } .in-news-wall .news-hot, .in-news-wall .news-hot-3 { width: 100%; } .in-news-wall .news-hot-3 ul { margin: 0; padding: 0 10px; } .in-news-wall .news-hot-3 { margin-top: 20px; } .in-news-wall .news-hot img { height: auto; } .in-news-wall .news-hot-3 li .title { font-size: 15px; } .in-news-wall .news-hot-3 li .type-date a, .in-news-wall .news-hot-3 li .type-date span { font-size: 12px; } .in-news-wall .news-hot-3 .more { margin: 20px auto 0; display: block; } .in-news { padding: 20px 0; } .in-news .wrapper > .title { font-size: 20px; margin-bottom: 20px; } .in-server { height: 420px; background: url(../img/server_2.png) no-repeat; /*background-size: 100% 100%;*/ background-size:cover; text-align: center } .in-server h1 { font-size: 25px; } .in-server p { width: 100%; font-size: 14px; padding: 0px 10%; } .in-server .wrapper > a { padding-left: 0px; } .in-server .comp { font-size: 14px; } .in-customer { padding: 30px 0; } .in-customer .swiper-slide { height: auto; width: 100%; } .in-customer .swiper-slide img { position: inherit; height: auto; width: 100%; } .in-customer .swiper-button-next, .in-customer .swiper-button-prev { display: none; } .in-customer .swiper-slide .customer-text .title { font-size: 14px; margin-bottom: 0px; } .in-customer .swiper-slide .customer-text h2 { font-size: 15px; line-height: 30px; } .in-customer .swiper-slide .customer-text .line { margin: 10px 0; } .in-customer .swiper-slide .customer-text .summary { font-size: 12px; margin-bottom: 15px; } .in-customer .swiper-slide .customer-text { width: 100%; } .in-customer .swiper-slide .customer-text .more { font-size: 12px; margin: 0px auto 10px; height: 40px; line-height: 40px; } .in-customer .swiper-pagination { bottom: 0px !important; } .in-tags { display: none; } .in-product-type { padding: 20px 0px 30px; } .in-product-type li { height: 130px; width: 100%; position: relative; margin-left: 0px; border: 0px; margin-bottom: 5px; /*background-size:100%*/ } .in-product-type .cover-box { padding-top: 30px; } .in-product-type li.active .inner-box a { display: block; position: relative; overflow: hidden; } .in-product-type li.active .inner-box a img { position: relative; width:100%; height:250px /* width: 200%; left: -50%;*/ } .in-product-type li.active { /*height: 360px;*/ height: 250px; } .in-product-type li.active .inner-box { position: absolute; bottom: 0px; } .in-product-type li .inner-box .box-txt .title { font-size: 17px; } .in-product-type .cover-box span { font-size: 22px; } .in-product-type li .inner-box .box-txt .sub-title, .in-product-type li .inner-box .box-txt a, .in-product-type .cover-box p { font-size: 14px; z-index: 999; } .tagcloud.right { display: none; } .footer-search { overflow: hidden; /*height: 400px;*/ height: 260px; padding: 50px 0; } .footer-search .search-form input { width: 90%; } .footer-search .search-form i { left: 10%; } .footer { overflow: hidden; } .footer .foot-nav h2 { font-size: 15px; } .footer .foot-nav:nth-child(3) li { width: 45%; } .footer .foot-nav li a { font-size: 13px; } .footer .foot-nav { width: 100% !important; } .footer ul { margin: 10px 0 20px 0; } .footer .foot-nav:last-child .foot-icon { margin: 0; width: 30%; text-align: center; } .footer .foot-nav:last-child .foot-icon .code-img { left: 0px; transform: rotate( 180deg ); top: -140px; } .footer .foot-nav:last-child { text-align: center; } .footer .bottom { line-height: 26px; text-align: center; height: auto; padding: 30px 10px; font-size: 13px; } .pub-wall { padding-top: 50px; } .pub-bg { height: 100px; line-height:100px; font-size:1.5rem; } .category-wall { /*margin-top: 20px;*/ height: auto; min-height: 50px; overflow-x: auto; white-space: nowrap; border-top:none; } .category-wall::-webkit-scrollbar { display: none; } .category-wall ul { padding: 0px; } .category-wall ul li { padding: 0 10px; display:inline-block; } .category-wall ul li.active { border-bottom: 2px solid #0b7de0; } .category-wall ul li a { padding: 10px 5px; } .news_box .left_news { width: 100%; float: inherit; } .news_box .left_news img { max-width: 100%; } .right_content { display: none; } .new-item-block { margin-right: 0px; } .new-item-block .item-img { width: 100%; } .new-item-block .item-wrapper { width: 100%; margin-top: 15px; margin-left: 0%; } .new-item-block .item-wrapper .title { width: 100%; } .new-item-block .item-wrapper .date-wrap { top: 50px; } .pub-search { padding: 10px 2%; } .pub-search button { font-size: 12px; width: 28%; height: 40px; position: relative; /*top: 5px;*/ display: inline-block; vertical-align: top; } .pub-search input { height: 40px; width: 70%; display:inline-block; vertical-align:top; } .pub-column a { width: 30%; margin-bottom: 10px; } .video-item { padding: 0px; } .video-item li, .product-list li, .p-preview { width: 100%; } .video-area .vplay-wall { width: 100%; margin: 0px; left: 0px; top: 20%; height: 300px; } .pd-bg { padding: 10px 0; } .bg_left { margin-top: 15px; /* height: 400px;*/ width: 100%; } .show { width: 100%; height: 300px; } .smallshow > .middle_box { width: 80%; } .show img { width: 100%; height: 300px; } .pd-tab { text-align: center; } .pd-tab span { padding: 0px 10px; font-size: 14px; } .pinfo-text { width: 100%; padding: 10px 0px 0 0; } .pinfo-text a { margin-top: 10px; margin-bottom: 20px; } .parts-list > li { width: 100%; float: inherit; margin-right: 0px; } .parts-list .parts-info { padding: 15px; } .parts-column, .parts-cart, .parts-preview, .patr-items { width: 100%; height: auto; /*max-height: 300px;*/ /*overflow: auto;*/ } .parts-preview { height: 500px; } .parts-preview .zoom { margin-top: 15px; } #box-all img { height: auto; } .wrap-login100 { margin: 20px auto; } .wrap-login100 { width: 100%; } .login100-form-title { padding: 30px 15px; } .login100-form { padding: 15px; } .label-input100 { display: none; } .reg-form .col-form-label { text-align: left; } .reg-form .form-control, .uc-nav, .nc-wall { width: 100%; } .reg-form .container-login100-form-btn { display: flex; } .container-login100-form-btn a { margin-left: 20px; padding-top: 15px; } .uc-nav { min-height: 200px; } .nc-wall .row { display: block; } .nc-wall .col:last-child { margin-top: 15px; } .uc-nav ul li { display: inline-block; } .uc-form { padding: 10px 10px 0 10px; margin-top: 15px; } .down-list li a.adown { width: 30px; top: 10px; } .down-list li a { width: 85%; } .down-list li span.title { display: inline-block; width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .header .nav-item.current .nav-title::before { display: none; } /* .header .nav-item.current a { color: #333 !important; }*/ .pub-column { width: 100%; overflow-x: auto; white-space: nowrap; } .pub-column::-webkit-scrollbar { display: none; } } /*鎵嬫満鏍峰紡缁撴潫*/ .searchres-wall { padding-top: 80px; } /* flex甯冨眬*/ .flex{ display: -webkit-box; display: -webkit-flex; display: flex; } .flex-alc { align-items: center; } .flex-item { flex: 1; min-width: 0; } .cur{ cursor:pointer }