body { font-family: "微软雅黑"; font-size: 14px; color: #4c4b4b; margin: 0; background: #ffffff; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } img { border: 0; } a { text-decoration: none; color: #000; } ol, ul { list-style: none; } input, textarea { font-family: "微软雅黑"; } ol, ul, li { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: top; background: transparent; border-collapse: collapse; } * { margin: 0; padding: 0; hide-focus: expression(this.hideFocus=true); /* for ie 5+ */ outline: none; /* for firefox 1.5 + */ } .clear { clear: both; } .fl { float: left; } .fr { float: right; } .container { max-width: 1366px; margin: 0 auto; } .containeral { max-width: 1366px; margin: 0 auto; } /*公共头部*/ .header { height: 145px; padding: 0; z-index: 10 } .header .header-container { background: #fff; width: 100%; position: relative; top: 0; -webkit-transition: top .2s ease-in-out; -o-transition: top .2s ease-in-out; -moz-transition: top .2s ease-in-out; transition: top .2s ease-in-out } .header .header-container .header-content { /* max-width: 1280px; */ margin: 0 auto; text-align: center; margin-bottom: 0px; /* height: 105px; */ } .header .header-container .header-content>.left { float: left; position: relative; top: 38px } .header .header-container .header-content>.left>ul>li { position: relative; display: inline-block; padding: 0 20px } .header .header-container .header-content>.left>ul>li>a { position: relative; display: block; color: #999 } .header .header-container .header-content>.left>ul>li>a:before { content: ''; width: 0; height: 0; overflow: hidden; border-style: solid; border-width: 0 10px 8px; border-color: transparent transparent #fff; position: absolute; left: 50%; margin-left: -10px; bottom: -21px } .header .header-container .header-content>.left>ul>li>a .icon, .header .header-container .header-content>.left>ul>li>a span, .min-pdp-dialog .product-content .product-right .product-main .product-suit .product-single .single-show .btn i.icon { vertical-align: middle } .header .header-container .header-content>.left>ul>li>a span { font-size: 14px } .header .header-container .header-content>.left>ul>li>a:hover, .header .header-container .nav-content .functional-area>.right>ul>li>a:hover { color: #fff } .header .header-container .header-content>.left>ul>li>.sub-menu { padding: 30px 28px 35px; border-radius: 0; border: 1px solid #d8d8d8; text-align: left; top: -moz-calc(100% + 20px); top: calc(100% + 20px) } .header .header-container .header-content>.left>ul>li>.sub-menu:after { content: ''; height: 6px; background: #000; position: absolute; left: -1px; right: -1px; bottom: -1px } .header .header-container .header-content>.left>ul>li>.sub-menu:before, .header .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li>.sub-menu:before { content: ''; position: absolute; top: -21px; right: 0; bottom: 0; left: 0; z-index: -1 } .header .header-container .header-content>.left>ul>li.is-hover>a { color: #fff; z-index: 11 } .header .header-container .header-content>.left>ul>li.is-hover>a:before, .header .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li.is-hover>a:before { opacity: 1 } .header .header-container .header-content>.left>ul>li.header-country>.sub-menu { width: 1060px; left: -25px; font-size: 0 } .header .header-container .header-content>.left>ul>li.header-country>.sub-menu>ul { display: inline-block; vertical-align: top; width: 250px } .header .header-container .header-content>.left>ul>li.header-country>.sub-menu>ul>li { width: 100%; position: relative; padding-left: 23px; margin-top: 22px } .header .header-container .header-content>.left>ul>li.header-country>.sub-menu>ul>li:nth-child(1) { margin-top: 0 } .header .header-container .header-content>.left>ul>li.header-country>.sub-menu>ul>li>a { color: #000; padding: 0 } .header .header-container .header-content>.left>ul>li.header-country>.sub-menu>ul>li>a .icon, .header .header-container .header-content>.left>ul>li.header-country>.sub-menu>ul>li>a span, .header .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li>.sub-menu .nav-sub-menu-bottom .nav-sub-menu-bottom-wrap .nav-sub-menu-bottom-content .our-selection, .header .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li>.sub-menu .nav-sub-menu-bottom .nav-sub-menu-bottom-wrap .nav-sub-menu-bottom-content .products-recommended, .header .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li>.sub-menu .nav-sub-menu-bottom .nav-sub-menu-bottom-wrap .nav-sub-menu-bottom-content .products-recommended>.left, .header .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li>.sub-menu .nav-sub-menu-bottom .nav-sub-menu-bottom-wrap .nav-sub-menu-bottom-content .products-recommended>.right { display: inline-block; vertical-align: middle } .header .header-container .header-content>.left>ul>li.header-country>.sub-menu>ul>li>a .icon { position: absolute; top: 2px; left: 0 } .header .header-container .header-content>.left>ul>li.header-country>.sub-menu>ul>li>a span { font-size: 14px } .header .header-container .header-content>.left>ul>li.header-country>.sub-menu>ul>li>a:hover { color: #8c8c8c } .header .header-container .header-content>.left>ul>li.header-country>.sub-menu>ul>li.has-icon>a span { font-weight: 700 } .header .header-container .header-content>.left>ul>li.header-counter-inquiry>a .icon { margin-right: 8px } .header .header-container .header-content>.left>ul>li:after { content: ''; width: 1px; height: 8px; background: #565656; position: absolute; top: 5px; right: 0 } .header .header-container .header-content>.left>ul>li:first-child { padding-left: 0 !important } .header .header-container .header-content>.left>ul>li:last-child:after { content: ''; width: 0 } .header .header-container .header-content>.left>ul>li.header-account>.sub-menu { width: 887px; left: -143px; font-size: 0 } .header .header-container .header-content>.left>ul>li.header-account>.sub-menu>.left, .header .header-container .header-content>.left>ul>li.header-account>.sub-menu>.right { display: inline-block; vertical-align: top } .header .header-container .header-content>.left>ul>li.header-account>.sub-menu>.left .title, .header .header-container .header-content>.left>ul>li.header-account>.sub-menu>.right .title { color: #000; margin-bottom: 20px } .header .header-container .header-content>.left>ul>li.header-account>.sub-menu>.left .title h3, .header .header-container .header-content>.left>ul>li.header-account>.sub-menu>.right .title h3 { font-size: 18px; margin-bottom: 4px } .header .header-container .header-content>.left>ul>li.header-account>.sub-menu>.left .title p, .header .header-container .header-content>.left>ul>li.header-account>.sub-menu>.right .title p { font-size: 14px; margin-bottom: 0 } .header .header-container .header-content>.left>ul>li.header-account>.sub-menu>.left { width: 459px; padding-right: 81px } .header .header-container .header-content>.left>ul>li.header-account>.sub-menu>.left>ul>li { position: relative; padding: 5px 32px 5px 0; margin-bottom: 2px } .header .header-container .header-content>.left>ul>li.header-account>.sub-menu>.left>ul>li>a { padding: 0; color: #999 } .header .header-container .header-content>.left>ul>li.header-account>.sub-menu>.left>ul>li>a span, .header .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li>a span { font-size: 16px } .header .header-container .header-content>.left>ul>li.header-account>.sub-menu>.left>ul>li>a .icon { position: absolute; top: 50%; margin-top: -7px; right: 32px } .header .header-container .header-content>.left>ul>li.header-account>.sub-menu>.right { padding-left: 79px } .header .header-container .header-content>.left>ul>li.header-account>.sub-menu>.right:before { content: ''; width: 1px; background: #d8d8d8; position: absolute; top: 0; bottom: 0; margin-left: -79px } .header .header-container .header-content>.left>ul>li.header-account>.sub-menu>.right>ul { padding-top: 7px } .header .header-container .header-content>.left>ul>li.header-account>.sub-menu>.right>ul>li { position: relative; margin-bottom: 23px; padding-left: 27px } .header .header-container .header-content>.left>ul>li.header-account>.sub-menu>.right>ul>li .line-server, .header .header-container .header-content>.left>ul>li.header-account>.sub-menu>.right>ul>li>a { font-size: 14px; color: #000; padding: 0 } .header .header-container .header-content>.left>ul>li.header-account>.sub-menu>.right>ul>li .line-server .icon, .header .header-container .header-content>.left>ul>li.header-account>.sub-menu>.right>ul>li>a .icon { position: absolute; left: 0 } .header .header-container .header-content>.left>ul>li.header-account>.sub-menu>.right>ul>li .line-server .icon.icon-header-online-consultation, .header .header-container .header-content>.left>ul>li.header-account>.sub-menu>.right>ul>li>a .icon.icon-header-online-consultation { top: -2px; left: -3px } .header .header-container .header-content>.left>ul>li.header-account>.sub-menu>.right>ul>li .line-server .icon.icon-header-support-hotline, .header .header-container .header-content>.left>ul>li.header-account>.sub-menu>.right>ul>li>a .icon.icon-header-support-hotline { top: -3px } .header .header-container .header-content>.left>ul>li.header-account>.sub-menu>.right>ul>li .line-server .icon.icon-header-mail-consultation, .header .header-container .header-content>.left>ul>li.header-account>.sub-menu>.right>ul>li>a .icon.icon-header-mail-consultation { top: 3px; left: 1px } .header .header-container .header-content>.left>ul>li.header-account>.sub-menu>.right>ul>li .line-server:hover { text-decoration: none } .header .header-container .header-content>.left>ul>li.header-account>.sub-menu>.right>ul>li>p { font-size: 14px; color: #999; margin-top: 12px; margin-bottom: 0 } .header .header-container .header-content>.left>ul>li.header-account>.sub-menu>.right>ul>li>p:last-child { margin-top: 6px } .header .header-container .nav-content { max-width: 1366px; margin: 0 auto; } .header .header-container .nav-content>.logo { width: 0; height: 0; overflow: hidden } .header .header-container .nav-content>.logo a img { width: 100%; margin-left: 5px; } .header .header-container .nav-content .nav-wrap { float: left } .header .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills { position: static } .header .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li { line-height: 56px; margin-right: 15px; -webkit-transition: margin-right .2s ease-in-out; -o-transition: margin-right .2s ease-in-out; -moz-transition: margin-right .2s ease-in-out; transition: margin-right .2s ease-in-out } .header .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li>a { color: #333; padding: 0 16px; font-size: 16px; } /*.header .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li>a:before { content: ''; width: 0; height: 0; overflow: hidden; border-style: solid; border-width: 0 10px 8px; border-color: transparent transparent #fff; position: absolute; bottom: -1px; left: 50%; margin-left: -10px; opacity: 0; -webkit-transition: opacity .2s ease-in-out; -o-transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out }*/ .header .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li .sub-menu { border-radius: 0; padding: 0 } .header .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li .sub-menu a { line-height: normal; padding: 0 } .header .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li>.sub-menu { width: 100%; left: 0; border-bottom: 1px solid #e0e0e0; padding-top: 24px; max-height: -moz-calc(100vh - 140px); max-height: calc(100vh - 140px); overflow: auto } .header .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li>.sub-menu.sub-menu-img { border: 0; padding: 0; overflow: visible } .header .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li>.sub-menu>ul { max-width: 1320px; margin: 0 auto; font-size: 0; padding: 0 40px 38px } .header .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li>.sub-menu>ul>li { min-width: 164px; margin-right: 9%; display: inline-block; vertical-align: top; line-height: normal } .header .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li>.sub-menu>ul>li:last-child { margin-right: 0 } .header .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li>.sub-menu>ul>li a span { font-size: 14px; color: #000 } .header .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li>.sub-menu>ul>li>a { display: inline-block; margin-bottom: 15px; cursor: default } .header .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li>.sub-menu>ul>li>a span { font-weight: 700 } .header .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li>.sub-menu>ul>li>.sub-menu { border: 0; display: block; position: relative } .header .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li>.sub-menu>ul>li>.sub-menu>ul>li { margin-bottom: 15px } .header .header-container .nav-content .functional-area>ul>li.nav-search, .header .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li>.sub-menu>ul>li>.sub-menu>ul>li>a { display: inline-block } .header .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li>.sub-menu .nav-sub-menu-bottom { position: relative; border-top: 1px solid #d8d8d8 } .header .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li>.sub-menu .nav-sub-menu-bottom .nav-sub-menu-bottom-wrap { max-width: 1320px; padding: 20px 20px 30px; margin: 0 auto } .header .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li>.sub-menu .nav-sub-menu-bottom .nav-sub-menu-bottom-wrap .nav-sub-menu-bottom-content .our-selection { width: 270px; background: #000; padding: 20px; margin-right: 10px } .header .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li>.sub-menu .nav-sub-menu-bottom .nav-sub-menu-bottom-wrap .nav-sub-menu-bottom-content .our-selection>ul>li { margin-bottom: 9px } .footer .footer-sticky-nav .footer-sticky-nav-container .left span, .header .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li>.sub-menu .nav-sub-menu-bottom .nav-sub-menu-bottom-wrap .nav-sub-menu-bottom-content .our-selection>ul>li a span { font-size: 14px; color: #fff } .header .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li>.sub-menu .nav-sub-menu-bottom .nav-sub-menu-bottom-wrap .nav-sub-menu-bottom-content .our-selection>ul>li:first-child { margin-bottom: 10px } .header .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li>.sub-menu .nav-sub-menu-bottom .nav-sub-menu-bottom-wrap .nav-sub-menu-bottom-content .our-selection>ul>li:first-child a span { font-weight: 700 } .header .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li>.sub-menu .nav-sub-menu-bottom .nav-sub-menu-bottom-wrap .nav-sub-menu-bottom-content .products-recommended { padding: 0 6% 0 30px } .header .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li>.sub-menu .nav-sub-menu-bottom .nav-sub-menu-bottom-wrap .nav-sub-menu-bottom-content .products-recommended>.left { width: 140px; height: 140px; background: #ccc; margin-right: 30px } .header .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li>.sub-menu .nav-sub-menu-bottom .nav-sub-menu-bottom-wrap .nav-sub-menu-bottom-content .products-recommended>.left a { height: 100%; display: block } .header .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li>.sub-menu .nav-sub-menu-bottom .nav-sub-menu-bottom-wrap .nav-sub-menu-bottom-content .products-recommended>.right h4 { margin-bottom: 14px } .header .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li>.sub-menu .nav-sub-menu-bottom .nav-sub-menu-bottom-wrap .nav-sub-menu-bottom-content .products-recommended>.right h4 a { font-size: 14px; font-weight: 700; color: #000 } .header .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li>.sub-menu .nav-sub-menu-bottom .nav-sub-menu-bottom-wrap .nav-sub-menu-bottom-content .products-recommended>.right p a { font-size: 14px; color: #999; line-height: normal; margin-bottom: 43px } .header .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li>.sub-menu .nav-sub-menu-bottom .nav-sub-menu-bottom-wrap .nav-sub-menu-bottom-content .products-recommended>.right .learn-more span { font-size: 14px; color: #999 } .header .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li>.sub-menu .nav-sub-menu-bottom .nav-sub-menu-bottom-wrap .nav-sub-menu-bottom-content .products-recommended:after { content: ''; width: 1px; height: 100%; background: #d8d8d8; position: absolute; top: 0; margin-left: 3% } .header .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li>.sub-menu .nav-sub-menu-bottom .nav-sub-menu-bottom-wrap .nav-sub-menu-bottom-content .products-recommended:last-child { padding: 0 } .header .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li>.sub-menu .nav-sub-menu-bottom .nav-sub-menu-bottom-wrap .nav-sub-menu-bottom-content .products-recommended:last-child:after { display: none } .header .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li.is-hover>a { z-index: 11 } .header .header-container .nav-content .functional-area>ul>li, .header .header-container .nav-content .nav-wrap .menu-mask { display: none } .header .header-container .nav-content .functional-area { min-height: 40px; float: right; position: relative } .header .header-container .nav-content .functional-area>ul>li.nav-search .form-input { position: relative; width: 280px; margin-top: 6px; } .header .header-container .nav-content .functional-area>ul>li.nav-search .form-input input { width: 100%; height: 40px; background: #fff; border: 0; color: #808080; padding: 20px 60px 20px 15px; border: 1px solid #c8c8c8; } .header .header-container .nav-content .functional-area>ul>li.nav-search .form-input input::-webkit-input-placeholder { font-family: "Helvetica", "PingFangSC-Regular", "Arial", "Times New Roman", "微软雅黑", "Microsoft YaHei", sans-serif; font-size: 14px; color: #808080; letter-spacing: 0 } .header .header-container .nav-content .functional-area>ul>li.nav-search .form-input input:-moz-placeholder { font-family: "Helvetica", "PingFangSC-Regular", "Arial", "Times New Roman", "微软雅黑", "Microsoft YaHei", sans-serif; font-size: 14px; color: #808080; letter-spacing: 0 } .header .header-container .nav-content .functional-area>ul>li.nav-search .form-input input:-ms-input-placeholder, .header .header-container .nav-content .functional-area>ul>li.nav-search .form-input input::-ms-input-placeholder { font-family: "Helvetica", "PingFangSC-Regular", "Arial", "Times New Roman", "微软雅黑", "Microsoft YaHei", sans-serif; font-size: 14px; color: #808080; letter-spacing: 0 } .header .header-container .nav-content .functional-area>ul>li.nav-search .form-input input::placeholder { font-family: "Helvetica", "PingFangSC-Regular", "Arial", "Times New Roman", "微软雅黑", "Microsoft YaHei", sans-serif; font-size: 14px; color: #808080; letter-spacing: 0 } .header .header-container .nav-content .functional-area>ul>li.nav-search .form-input input.is-focus::-webkit-input-placeholder { font-size: 0 !important } .header .header-container .nav-content .functional-area>ul>li.nav-search .form-input input.is-focus:-moz-placeholder { font-size: 0 !important } .header .header-container .nav-content .functional-area>ul>li.nav-search .form-input input.is-focus:-ms-input-placeholder, .header .header-container .nav-content .functional-area>ul>li.nav-search .form-input input.is-focus::-ms-input-placeholder { font-size: 0 !important } .header .header-container .nav-content .functional-area>ul>li.nav-search .form-input input.is-focus::placeholder { font-size: 0 !important } .header .header-container .nav-content .functional-area>ul>li.nav-search .form-input .icon { cursor: pointer; position: absolute; top: 50%; margin-top: -9px; right: 15px } .header .header-container .nav-content .functional-area>ul>li.nav-search .form-input .icon:before { content: ''; width: 34px; height: 34px; position: absolute; top: -50%; left: -50% } .header .header-container .nav-content .functional-area>ul>li.nav-search>.sub-menu { width: 532px; right: 0; border-radius: 0; border: 1px solid #d8d8d8; padding: 0; text-align: left; max-height: -moz-calc(100vh - 140px); max-height: calc(100vh - 140px); overflow: auto } .header .header-container .nav-content .functional-area>ul>li.nav-search>.sub-menu ul li a { padding: 0; display: inline-block } .header .header-container .nav-content .functional-area>ul>li.nav-search>.sub-menu .search-related { text-align: right; padding: 30px; margin-bottom: 10px } .header .header-container .nav-content .functional-area>ul>li.nav-search>.sub-menu .search-related>li { margin-bottom: 10px } .header .header-container .nav-content .functional-area>ul>li.nav-search>.sub-menu .search-related>li>a { font-weight: 700; font-size: 14px; color: #000 } .header .header-container .nav-content .functional-area>ul>li.nav-search>.sub-menu .search-related>li>a span.related { color: #999 } .header .header-container .nav-content .functional-area>ul>li.nav-search>.sub-menu .search-results-title { padding: 0 30px 40px } .header .header-container .nav-content .functional-area>ul>li.nav-search>.sub-menu .search-results-title .title-content { border-bottom: 2px solid #000; padding-bottom: 19px } .header .header-container .nav-content .functional-area>ul>li.nav-search>.sub-menu .search-results-title .title-content span:first-child { float: left; font-size: 18px } .header .header-container .nav-content .functional-area>ul>li.nav-search>.sub-menu .search-results-title .title-content span:last-child { float: right; font-size: 14px; font-weight: 700; position: relative; top: 4px } .header .header-container .nav-content .functional-area>ul>li.nav-search>.sub-menu .search-results-title .title-content span:last-child a { color: #000; cursor: auto } .header .header-container .nav-content .functional-area>ul>li.nav-search>.sub-menu .search-results-list { padding: 0 40px } .header .header-container .nav-content .functional-area>ul>li.nav-search>.sub-menu .search-results-list>li { position: relative; margin-bottom: 40px } .header .header-container .nav-content .functional-area>ul>li.nav-search>.sub-menu .search-results-list>li .product-information { padding-left: 20px; padding-right: 175px; width: -moz-calc(100% - 102px); width: calc(100% - 102px) } .header .header-container .nav-content .functional-area>ul>li.nav-search>.sub-menu .search-results-list>li .product-information .price>span { display: block; font-size: 14px; font-weight: 700 } .header .header-container .nav-content .functional-area>ul>li.nav-search>.sub-menu .search-results-list>li .product-information .price .star { margin-top: 20px } .header .header-container .nav-content .functional-area>ul>li.nav-search>.sub-menu .search-results-list>li .product-information .price .star ul>li { display: inline-block; margin-right: 4px } .header .header-container .nav-content .functional-area>ul>li.nav-search>.sub-menu .search-results-list>li .btn-box { position: absolute; bottom: 0; right: 0 } .header .header-container .nav-content .functional-area>ul>li.nav-search>.sub-menu .search-results-list>li .btn-box .btn { min-width: 150px } .header .header-container .nav-content .functional-area>ul>li.nav-search>.sub-menu .view-all { border-top: 1px solid #d8d8d8; padding: 30px 30px 40px; text-align: center } .header .header-container .nav-content .functional-area>ul>li.nav-search>.sub-menu .view-all .btn { min-width: 200px } .header .header-container .nav-content .functional-area>.right { position: absolute; top: -47px; right: 20px } .header .header-container .nav-content .functional-area>.right>ul { font-size: 0; white-space: nowrap } .header .header-container .nav-content .functional-area>.right>ul>li { position: relative; display: inline-block; padding: 0 15px 0 13px } .header .header-container .nav-content .functional-area>.right>ul>li .is-logged-content, .header .header-container .nav-content .functional-area>.right>ul>li>a { position: relative } .header .header-container .nav-content .functional-area>.right>ul>li .is-logged-content:before, .header .header-container .nav-content .functional-area>.right>ul>li>a:before { content: ''; width: 0; height: 0; overflow: hidden; border-style: solid; border-width: 0 10px 8px; border-color: transparent transparent #fff; position: absolute; left: 50%; margin-left: -10px; opacity: 0; -webkit-transition: opacity .2s ease-in-out; -o-transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; bottom: -21px } .header .header-container .nav-content .functional-area>.right>ul>li>a { display: block; color: #999 } .header .header-container .nav-content .functional-area>.right>ul>li>a .icon, .header .header-container .nav-content .functional-area>.right>ul>li>a span { vertical-align: top } .header .header-container .nav-content .functional-area>.right>ul>li>a span { font-size: 14px } .header .header-container .nav-content .functional-area>.right>ul>li>a .icon { margin-left: 9px } .header .header-container .nav-content .functional-area>.right>ul>li:after, .header .header-container .nav-content .functional-area>.right>ul>li:before { content: ''; width: 1px; height: 8px; background: #565656; position: absolute; top: 5px } .header .header-container .nav-content .functional-area>.right>ul>li:before { left: 0 } .header .header-container .nav-content .functional-area>.right>ul>li:after { right: 0 } .header .header-container .nav-content .functional-area>.right>ul>li:first-child { padding-left: 0 } .footer .footer-container .con-content>ul>li:first-child:before, .header .header-container .nav-content .functional-area>.right>ul>li:first-child:before { display: none } .header .header-container .nav-content .functional-area>.right>ul>li:last-child { padding-right: 0 } .footer .footer-container .con-content>ul>li:last-child:after, .header .header-container .nav-content .functional-area>.right>ul>li:last-child:after { display: none } .header .header-container .nav-content .functional-area>.right>ul>li>.sub-menu { border-radius: 0; border: 1px solid #d8d8d8; padding: 0; text-align: left; top: -moz-calc(100% + 20px); top: calc(100% + 20px) } .header .header-container .nav-content .functional-area>.right>ul>li>.sub-menu:after { content: ''; height: 6px; background: #000; position: absolute; left: -1px; right: -1px; bottom: -1px } .header .header-container .nav-content .functional-area>.right>ul>li>.sub-menu:before { content: ''; position: absolute; top: -21px; right: 0; bottom: 0; left: 0; z-index: -1 } .header .header-container .nav-content .functional-area>.right>ul>li.is-hover .is-logged-content, .header .header-container .nav-content .functional-area>.right>ul>li.is-hover>a { z-index: 11 } .header .header-container .nav-content .functional-area>.right>ul>li.is-hover .is-logged-content:before, .header .header-container .nav-content .functional-area>.right>ul>li.is-hover>a:before { opacity: 1 } .header .header-container .nav-content .functional-area>.right>ul>li.header-login>a .icon { display: none; margin-left: 0 } .header .header-container .nav-content .functional-area>.right>ul>li.header-login .is-logged-content { display: none; vertical-align: top } .header .header-container .nav-content .functional-area>.right>ul>li.header-login .is-logged-content p { cursor: pointer; color: #999; font-size: 14px; margin-bottom: 0 } .header .header-container .nav-content .functional-area>.right>ul>li.header-login .is-logged-content p a { color: #999 } .header .header-container .nav-content .functional-area>.right>ul>li.header-login .is-logged-content p a:last-child { text-decoration: underline } .header .header-container .nav-content .functional-area>.right>ul>li.header-login .is-logged-content p a:hover, .header .header-container .nav-content .functional-area>.right>ul>li.header-login .is-logged-content:hover p, .header .header-container .nav-content .functional-area>.right>ul>li.header-login .is-logged-content:hover p a { color: #fff } .header .header-container .nav-content .functional-area>.right>ul>li.header-login .is-logged-content .icon-box, .header .header-container .nav-content .functional-area>.right>ul>li.header-login.is-logged>a, .header .header-container .nav-content .functional-area>.right>ul>li.header-shopping-bag:after, .header .header-container .nav-content .functional-area>.right>ul>li.nav-menu-btn { display: none } .header .header-container .nav-content .functional-area>.right>ul>li.header-login>.sub-menu { width: 366px; right: -98px; padding-bottom: 5px } .header .header-container .nav-content .functional-area>.right>ul>li.header-login>.sub-menu>.bottom, .header .header-container .nav-content .functional-area>.right>ul>li.header-login>.sub-menu>.title, .header .header-container .nav-content .functional-area>.right>ul>li.header-login>.sub-menu>ul { padding: 30px } .header .header-container .nav-content .functional-area>.right>ul>li.header-login>.sub-menu>.title, .header .header-container .nav-content .functional-area>.right>ul>li.header-login>.sub-menu>ul { border-bottom: 1px solid #dadada } .header .header-container .nav-content .functional-area>.right>ul>li.header-login>.sub-menu>.title p { color: #000; font-size: 14px; font-weight: 700; margin-bottom: 16px } .header .header-container .nav-content .functional-area>.right>ul>li.header-login>.sub-menu>.title p:nth-child(2) span { color: #d61b52 } .header .header-container .nav-content .functional-area>.right>ul>li.header-login>.sub-menu>.title p:nth-child(3) { color: #999; margin-bottom: 0 } .header .header-container .nav-content .functional-area>.right>ul>li.header-login>.sub-menu>ul>li { margin-bottom: 20px } .header .header-container .nav-content .functional-area>.right>ul>li.header-login>.sub-menu>ul>li a { display: inline-block; padding: 0; font-size: 14px; color: #999 } .header .header-container .nav-content .functional-area>.right>ul>li.header-login>.sub-menu>.bottom a { font-size: 14px; color: #000; text-decoration: underline } .header .header-container .nav-content .functional-area>.right>ul>li.header-login.is-logged .is-logged-content, .header-simple .headerbar-account a { display: inline-block } .header .header-container .nav-content .functional-area>.right>ul>li.header-shopping-bag>a { color: #f5f5f5 } .header .header-container .nav-content .functional-area>.right>ul>li.header-shopping-bag.is-full>a .icon.is-max:after, .header .header-container .nav-content .functional-area>.right>ul>li.header-shopping-bag.is-full>a .icon.is-max:before { width: 19px; height: 19px } .header .header-container .nav-content .functional-area>.right>ul>li.header-shopping-bag.is-full>a .icon.is-max:after { line-height: 19px } .header .header-container .nav-content .functional-area>.right>ul>li.header-shopping-bag.is-full>a .icon:after, .header .header-container .nav-content .functional-area>.right>ul>li.header-shopping-bag.is-full>a .icon:before { content: ''; width: 18px; height: 18px; position: absolute; top: -9px; right: -12px } .header .header-container .nav-content .functional-area>.right>ul>li.header-shopping-bag.is-full>a .icon:before { background: #d51b51; border-radius: 50% } .header .header-container .nav-content .functional-area>.right>ul>li.header-shopping-bag.is-full>a .icon:after { content: attr(data-value); font-size: 12px; -webkit-transform: scale(.91666667, .91666667); -moz-transform: scale(.91666667, .91666667); -ms-transform: scale(.91666667, .91666667); -o-transform: scale(.91666667, .91666667); transform: scale(.91666667, .91666667); color: #fff; line-height: 18px; text-align: center } .header .header-container .nav-content .functional-area>.right>ul>li.header-shopping-bag>.sub-menu { white-space: normal; right: -33px } .header .header-container .nav-content .functional-area>.right>ul>li.header-shopping-bag>.sub-menu.sub-menu-empty { width: 714px; font-size: 0 } .header .header-container .nav-content .functional-area>.right>ul>li.header-shopping-bag>.sub-menu.sub-menu-empty .left { width: 297px; height: 100%; background: #f5f5f5; position: absolute; top: 0; left: 0; padding-top: 89px; padding-left: 30px } .header .header-container .nav-content .functional-area>.right>ul>li.header-shopping-bag>.sub-menu.sub-menu-empty .left>h3 { font-size: 24px; line-height: 36px; margin-bottom: 110px } .header .header-container .nav-content .functional-area>.right>ul>li.header-shopping-bag>.sub-menu.sub-menu-empty .left>a { font-size: 12px; color: #000; text-decoration: underline } .header .header-container .nav-content .functional-area>.right>ul>li.header-shopping-bag>.sub-menu.sub-menu-empty .right { min-height: 350px; width: 100%; padding: 30px 40px 5px 327px } .header .header-container .nav-content .functional-area>.right>ul>li.header-shopping-bag>.sub-menu.sub-menu-empty .right>h4 { font-size: 18px; margin-bottom: 30px } .header .header-container .nav-content .functional-area>.right>ul>li.header-shopping-bag>.sub-menu.sub-menu-full { width: 626px; padding-bottom: 35px } .header .header-container .nav-content .functional-area>.right>ul>li.header-shopping-bag>.sub-menu.sub-menu-full .mincart-title { padding-left: 32px; padding-right: 20px } .header .header-container .nav-content .functional-area>.right>ul>li.header-shopping-bag>.sub-menu.sub-menu-full .mincart-title>ul>li { display: inline-block; vertical-align: top; font-size: 18px; color: #000; height: 77px; line-height: 77px } .header .header-container .nav-content .functional-area>.right>ul>li.header-shopping-bag>.sub-menu.sub-menu-full .mincart-title>ul>li:first-child { width: 342px } .header .header-container .nav-content .functional-area>.right>ul>li.header-shopping-bag>.sub-menu.sub-menu-full .mincart-title>ul>li:nth-child(2) { text-align: center; width: 70px; background: #f5f5f5 } .header .header-container .nav-content .functional-area>.right>ul>li.header-shopping-bag>.sub-menu.sub-menu-full .mincart-title>ul>li:last-child { width: 160px; text-align: center } .header .header-container .nav-content .functional-area>.right>ul>li.header-shopping-bag>.sub-menu.sub-menu-full .mincart-content { padding-left: 32px; padding-right: 20px; margin-bottom: 30px } .header .header-container .nav-content .functional-area>.right>ul>li.header-shopping-bag>.sub-menu.sub-menu-full .mincart-total { background: #f5f5f5; height: 60px; line-height: 60px; margin-bottom: 30px } .header .header-container .nav-content .functional-area>.right>ul>li.header-shopping-bag>.sub-menu.sub-menu-full .mincart-total span { float: right } .header .header-container .nav-content .functional-area>.right>ul>li.header-shopping-bag>.sub-menu.sub-menu-full .mincart-total span:first-child { width: 118px; font-size: 18px; font-weight: 700 } .header .header-container .nav-content .functional-area>.right>ul>li.header-shopping-bag>.sub-menu.sub-menu-full .mincart-total span:last-child { width: 110px; font-size: 14px } .header .header-container .nav-content .functional-area>.right>ul>li.header-shopping-bag>.sub-menu.sub-menu-full .mincart-btn { text-align: right; padding-right: 30px } .header .header-container .nav-content .functional-area>.right>ul>li.header-shopping-bag>.sub-menu.sub-menu-full .mincart-btn .btn { min-width: 200px } @media (min-width:100px) { .header.header-fixed .header-container { position: fixed } .header.header-fixed .header-container .header-content { visibility: hidden; position: absolute; z-index: -1 } .header.header-fixed .header-container .nav-content>.logo { width: 162px; height: inherit; -webkit-transition: width .2s ease-in-out; -o-transition: width .2s ease-in-out; -moz-transition: width .2s ease-in-out; transition: width .2s ease-in-out; float: left; position: relative; /*top: 17px;*/ margin-right: 40px } .header.header-fixed .header-container .nav-content .four_list { display: none; /*margin-top: 14px;*/ } .header.header-fixed .header-container .nav-content .four_listtwo { display: block; margin-top: 14px; } .header.header-fixed .header-container .nav-content .nav-wrap { margin-top: 15px } .header.header-fixed .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li { margin-right: 10px; line-height: 52px } .header.header-fixed .header-container .nav-content .nav-wrap .header-scroll .scroller-wrap .header-scroll-container>.nav-pills>li>a:before { bottom: -7px } .header.header-fixed .header-container .nav-content .functional-area { padding: 13px 0; font-size: 0 } .header.header-fixed .header-container .nav-content .functional-area>.right, .header.header-fixed .header-container .nav-content .functional-area>.right>ul>li.header-login, .header.header-fixed .header-container .nav-content .functional-area>.right>ul>li.header-shopping-bag, .header.header-fixed .header-container .nav-content .functional-area>ul { display: inline-block; vertical-align: middle } .header.header-fixed .header-container .nav-content .functional-area>.right>ul>li.header-login .is-logged-content .icon-box, .header.header-fixed .header-container .nav-content .functional-area>.right>ul>li.header-login>a .icon, .header.header-fixed .header-container .nav-content .functional-area>ul>li { display: block } .header.header-fixed .header-container .nav-content .functional-area>ul>li.nav-search .form-input { width: 268px } .header.header-fixed .header-container .nav-content .functional-area>ul>li.nav-search .form-input input { height: 40px; padding: 8px 52px 8px 12px } .header.header-fixed .header-container .nav-content .functional-area>ul>li.nav-search .form-input input.is-focus::-webkit-input-placeholder { font-size: 0 !important } .header.header-fixed .header-container .nav-content .functional-area>ul>li.nav-search .form-input input.is-focus:-moz-placeholder { font-size: 0 !important } .header.header-fixed .header-container .nav-content .functional-area>ul>li.nav-search .form-input input.is-focus:-ms-input-placeholder, .header.header-fixed .header-container .nav-content .functional-area>ul>li.nav-search .form-input input.is-focus::-ms-input-placeholder { font-size: 0 !important } .header.header-fixed .header-container .nav-content .functional-area>ul>li.nav-search .form-input input.is-focus::placeholder { font-size: 0 !important } .header.header-fixed .header-container .nav-content .functional-area>ul>li.nav-search>.sub-menu { margin-top: 1px } .header.header-fixed .header-container .nav-content .functional-area>.right { position: static; margin-left: 18px } .header.header-fixed .header-container .nav-content .functional-area>.right>ul>li { display: none; padding: 0 18px } .header.header-fixed .header-container .nav-content .functional-area>.right>ul>li.header-login .is-logged-content>p, .header.header-fixed .header-container .nav-content .functional-area>.right>ul>li.header-login>a>span, .header.header-fixed .header-container .nav-content .functional-area>.right>ul>li.header-shopping-bag>a>span, .header.header-fixed .header-container .nav-content .functional-area>.right>ul>li:after, .header.header-fixed .header-container .nav-content .functional-area>.right>ul>li:before { display: none } .header.header-fixed .header-container .nav-content .functional-area>.right>ul>li.header-shopping-bag>a .icon { width: 21px; height: 22px; margin-left: 0 } .header.header-fixed .header-container .nav-content .functional-area>.right>ul>li.header-shopping-bag.is-full>a .icon:after, .header.header-fixed .header-container .nav-content .functional-area>.right>ul>li.header-shopping-bag.is-full>a .icon:before { width: 26px; height: 26px; font-size: 15px; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; top: -14px; right: -17px } .header.header-fixed .header-container .nav-content .functional-area>.right>ul>li.header-shopping-bag.is-full>a .icon:after { line-height: 26px } } .float_l{ float: left; } .float_r{ float: right; } .clear{ clear: both; } .center{ width: 1200px; margin: auto; } .header_top{ width: 100%; height: 42px; background: #343d42; position: fixed; z-index: 999; } .header_top .float_l{ font-size: 14px; color: #ffffff; line-height: 42px; } .header_top .float_r p{ font-size: 14px; color: #ffffff; line-height: 18px; border-left: solid 1px #fff; padding: 0 12px; margin-top: 13px; } .header_top .float_r a:nth-child(1) p{ border-left: none; } .header_top_height{ height: 42px; } .header-content .height{ width: 100%; height: 109px; background: #fff; border-bottom: solid 1px #eeeeee; } .header-content .logo{ margin-right: 82px; } .header-content .logo img{ width: 500px; height: 109px; } .header-content .input{ position: relative; margin-top: 42px; } .header-content .input input{ width: 221px; height: 37px; border:solid 1px #cfcfcf; border-radius: 50px; font-size: 14px; color: #999999; padding: 0 50px 0 18px; background: url("../img/search.png") top 6px right 15px no-repeat; } .header-content .input input::-webkit-input-placeholder{ color:#999999; } .header-content .input input::-moz-placeholder{ /* Mozilla Firefox 19+ */ color:#999999; } .header-content .input input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */ color:#999999; } .header-content .input input:-ms-input-placeholder{ /* Internet Explorer 10-11 */ color:#999999; } .header-content .input a{ display: block; width: 50px; height: 39px; position: absolute; top: 0; right: 0; } .header-content .head_telephone img{ width: 220px; height: 109px; } .nav-content{ height: 59px; } .nav-content ul li{ float: left; width: 150px; height: 56px; line-height: 56px; text-align: center; font-size: 16px; color: #333333; position: relative; } .nav-content ul li .nav_drop_down{ display: none; position: absolute; top: 59px; left: 0; width: 100%; } .nav-content ul li:hover .nav_drop_down{ display: block; } .nav-content ul li .nav_li{ background: #fff; margin-bottom: 1px; font-size: 14px; color: #333333; height: 59px; line-height: 59px; text-align: center; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; } .nav-content ul li:hover{ border-bottom: solid 3px #4e70c3; } .nav-content ul .select{ border-bottom: solid 3px #4e70c3; } .banner .banner_img{ /* background: url("../img/banner.png") top center no-repeat; */ height: 593px; } #wrapper{ z-index: 999; } .header{ height: 214px; } .banner .swiper-pagination-bullet{ border: solid 2px #fff; background: none; width: 14px; height: 14px; opacity: 1; } .banner .swiper-pagination-bullet-active{ background: #fff; opacity: 1; } .foot{ width: 100%; height: 283px; background: #343d42; } .foot .foot_logo{ border-right: solid 1px #434c50; margin-top: 45px; margin-right: 57px; } .foot .foot_logo img{ width: 418px; height: 103px; } .foot .p{ width: 579px; margin-top: 40px; } .foot .p p{ font-size: 14px; color: #b2afaf; line-height: 30px; } .foot .qr_code .float_l:nth-child(1){ margin-right: 28px; } .foot .qr_code .float_l img{ width: 107px; height: 107px; margin-top: 40px; } .foot .qr_code .float_l p{ font-size: 14px; color: #b2afaf; text-align: center; line-height: 10px; margin-top: 10px; } .foot .bottom{ border-top: solid 1px #5a5f63; height: 64px; margin-top: 27px; } .foot .bottom .float_l{ font-size: 14px; color: #b2afaf; line-height: 64px; } .foot .bottom .float_r{ margin:8px 0; font-size: 14px; color: #b2afaf; line-height: 20px; } .foot .bottom .float_r a{ font-size: 14px; color: #b2afaf; line-height: 20px; margin-left: 18px; } .foot .bottom .float_r a:nth-child(1){ margin-left: 0px; } .index_service_items{ height: 705px; } .index_service_items .center{ position: relative; } .index_service_items .title{ padding-top: 70px; margin-bottom: 28px; } .index_service_items .title h6{ font-size: 22px; color: #333333; margin-bottom: 10px; } .index_service_items .title p{ font-size: 14px; color: #999999; text-transform:uppercase; } .swiper-container-index_s .float_l{ position: relative; height: 491px; width: 389px; margin-left: 16px; margin-top: 8px; transition:all 0.4s ease-in-out; } .swiper-container-index_s .float_l:hover{ margin-top: 0px; } .swiper-container-index_s .swiper-slide .float_l:nth-child(1){ margin-left: 0px; } .swiper-container-index_s .float_l .button{ position: absolute; bottom: 0; left: 16px; width: 99px; height: 38px; border: solid 1px #dddddd; background: url("../img/arrow1.png") top center no-repeat; transition:all 0.4s ease-in-out; } .swiper-container-index_s .float_l:hover .button{ left: 287px; background: url("../img/arrow2.png") top center no-repeat; } .swiper-container-index_s .float_l img{ width: 389px; height: 294px; } .swiper-container-index_s .float_l .text{ height: 131px; border-bottom: solid 1px #eeeeee; padding: 0 20px; } .swiper-container-index_s .float_l .text h6{ font-size: 16PX; color: #333333; padding-top: 20px; margin-bottom: 10px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; } .swiper-container-index_s .float_l .text p{ font-size: 14PX; color: #666666; line-height: 26px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .index_service_items .swiper-button-prev,.index_service_items .swiper-container-rtl .swiper-button-next{ background: url("../img/arrow3.png") top center no-repeat; top: 102px; left: 1119px; width: 39px; height: 39px; transition:all 0.2s ease-in-out; } .index_service_items .swiper-button-prev:hover,.index_service_items .swiper-container-rtl .swiper-button-next:hover{ background: url("../img/arrow3_2.png") top center no-repeat; } .index_service_items .swiper-button-next,.index_service_items .swiper-container-rtl .swiper-button-prev{ background: url("../img/arrow4.png") top center no-repeat; top: 102px; left: 1160px; width: 39px; height: 39px; transition:all 0.2s ease-in-out; } .index_service_items .swiper-button-next:hover,.index_service_items .swiper-container-rtl .swiper-button-prev:hover{ background: url("../img/arrow4_2.png") top center no-repeat; } /* 产品分类 */ .index_product{ background: url("../img/background1.png") top center no-repeat; background-size: auto 100%; min-height: 669px; padding-top: 60px; padding-bottom: 9px; } .index_product .left{ width: 241px; z-index: 99; position: relative; } .index_product .left .title{ height: 95px; background: #4e70c3; } .index_product .left .title h6{ text-align: center; font-size: 22px; color: #ffffff; padding-top: 22px; margin-bottom: 7px; } .index_product .left .title p{ text-align: center; font-size: 12px; color: #ffffff; text-transform:uppercase; } .index_product .left ul li{ background: #fff; height: 45px; border: solid 1px #e1e1e1; text-align: center; line-height: 45px; font-size: 16px; color: #333333; border-top: none; position: relative; transition:all 0.2s ease-in-out; } .index_product .left ul li:hover{ border-color:#f1940f; background: #f1940f; color: #ffffff; } .index_product .left ul li:nth-child(1){ border-top: solid 1px #e1e1e1; } .index_product .left ul li:nth-child(1):hover{ border-top: solid 1px #f1940f; } .index_product .left ul li:hover a{ color: #fff; } .second_level{ width: 197px; position: absolute; top: 0; left: 0; margin-left: 240px; display: none; } .index_product .left ul li:hover .second_level{ display: block; } .second_level .li{ height: 45px; background: #f1940f; font-size: 14px; color: #fff; line-height: 45px; transition:all 0.2s ease-in-out; position: relative; } .second_level .li:hover{ background: #4e70c3; } .three_level{ width: 197px; position: absolute; top: 0; left: 0; margin-left: 197px; display: none; } .index_product .left .second_level .li:hover .three_level{ display: block; } .three_level div{ height: 45px; background: #4e70c3; font-size: 14px; color: #fff; line-height: 45px; transition:all 0.2s ease-in-out; } .three_level div:hover{ background: #f1940f; } .index_product .right{ margin-left: 54px; width: 904px; } .index_product .right .title{ padding-top:5px; margin-bottom: 46px; } .index_product .right .title h6{ font-size: 22px; color: #333333; } .index_product .right .title h6 span{ font-size: 14px; color: #999999; text-transform: uppercase; margin-left: 10px; } .index_product .right .title .float_r{ font-size: 16px; color: #888888; } .index_product .right .content .float_l{ margin-left: 15px; width: 291px; height: 268px; transition:all 0.2s ease-in-out; margin-bottom: 20px; } .index_product .right .content .float_l:hover{ margin-top: -14px; } .index_product .right .content .float_l:nth-child(1){ margin-left: 0; } .index_product .right .content .float_l img{ width: 289px; height: 217px; border: solid 1px #e1e1e1; display: block; } .index_product .right .content .float_l p{ height: 52px; padding: 0 15px; font-size: 16px; color: #333333; text-align: center; line-height: 52px; transition:all 0.2s ease-in-out; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; } .index_product .right .content .float_l:hover p{ background: #4e70c3; color: #fff; } .product_html{ background: #fff; padding-bottom: 75px; } .product_html .margin_t{ margin-top: 27px; } .product_html .news_left{ border: solid 1px #e1e2e3; border-top:none; padding: 14px 24px; background: #fff; } .product_html .news_left p{ font-size: 15px; color: #333333; line-height: 40px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; /* -webkit-line-clamp:1;*/ } .product_html .news_left p:hover{ color: #4e70c3; } .product_html .contact_left{ margin-top: 25px; border: solid 1px #e1e2e3; padding: 42px 19px 40px 19px; background: #fbfbfb; } .product_html .contact_left h5{ font-size: 27.5px; color: #4e70c3; font-family: monospace; font-weight: 700; margin-bottom: 18px; } .product_html .contact_left h6{ width: 200px; height: 47px; line-height: 47px; font-size: 24px; color: #555555; font-weight: 600; border: dashed 1px #cccccc; border-left: none; border-right: none; margin-bottom: 20px; } .product_html .contact_left p{ font-size: 16px; color: #333333; line-height: 48px; } .product_html .right .title{ border-bottom: solid 1px #eeeef0; padding-top: 0px; margin-bottom: 55px; height: 95px; line-height: 95px; } .product_html .right .title .float_r .float_l{ font-size: 14px; color: #555555; } .product_html .right .title .float_r .float_l a{ font-size: 14px; color: #555555; } .product_html .right .title .float_r img{ margin-right: 7px; } .product_html .right .content .float_l{ margin-bottom: 40px; } .paging{ text-align: center; } .paging ul{ display: inline-flex; } .paging ul li{ min-width: 45px; height: 45px; border: solid 1px #e3e4e5; text-align: center; line-height: 45px; margin: 0 2px; font-size: 18px; color: #777777; background: #fff; } .paging ul li:hover{ border: solid 1px #f1940f; color: #fff; background: #f1940f; } .paging ul .xuanzhong{ border: solid 1px #f1940f; color: #fff; background: #f1940f; } .paging ul .width{ width: 102px; } .product_html .paging{ margin-top: 10px; } .product_html_tj{ background: #f8f8f8; height: 475px; } .product_html_tj .float_l{ width: 289px; height: auto; margin-left: 14px; } .product_html_tj .float_l img{ width: 289px; height: 217px; border: solid 1px #dfe0e1; display: block; } .advertisement4{ height: 237px; background: url("../img/advertisement4.png") top center no-repeat; margin-top: -42px; } .product_html_tj .title{ padding-top: 50px; } .product_html_tj .float_l p{ height: 52px; padding: 0 15px; font-size: 16px; color: #333333; text-align: center; line-height: 52px; transition: all 0.2s ease-in-out; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .product_html_tj .float_l:hover p { background: #4e70c3; color: #fff; } .banner .banner2_img{ /* background: url(../img/inner_page_banner.png) top center no-repeat; */ height: 390px; } .details_content{ } .details_content h3{ font-size: 24px; color: #333333; text-align: center; } .details_content .shijian{ text-align: center; border-top: dashed 1px #dddddd; border-bottom: dashed 1px #dddddd; height: 60px; line-height: 60px; margin-top: 32px; } .details_content .shijian span{ font-size: 14px; color: #888888; margin: 0 19px; } .details_content .product_details_img{ position: relative; margin-top: 50px; } .details_content .product_details_img .left_button{ display: block; width: 44px; height: 44px; background: url(../img/arrow5_1.png) no-repeat; position: absolute; top: calc(50% - 22px); left: 62px; transition: all 0.2s ease-in-out; } .details_content .product_details_img .left_button:hover{ background: url(../img/arrow5_2.png) no-repeat; } .details_content .product_details_img .right_button{ display: block; width: 44px; height: 44px; background: url(../img/arrow6_1.png) no-repeat; position: absolute; top: calc(50% - 22px); right: 62px; transition: all 0.2s ease-in-out; } .details_content .product_details_img .right_button:hover{ background: url(../img/arrow6_2.png) no-repeat; } .details_content .product_details_img img{ display: block; width: 568px; height: 427px; margin: auto; border: solid 1px #eeeef0; } .label_nav{ border-bottom: solid 1px #dedfe0; margin-top: 50px; } .label_nav h4{ width: 137px; height: 45px; text-align: center; line-height: 45px; font-size: 16px; color: #ffffff; cursor: pointer; margin-right: 2px; } .label_nav h4:nth-child(1){ background-color:#4e70c3; color:#fff; } .label_nav h4:nth-child(2){ background-color:#f1940f; color:#fff; } .label_page_each{ padding: 10px 18px 70px 18px; font-size: 14px; line-height: 40px; color: #333333; text-align: justify; } .label_page_each img{ /*width: 100%;*/ } .details_bottom{ border-top: dashed 1px #dddddd; border-bottom: dashed 1px #dddddd; height: 126px; } .details_bottom .float_r{ width: 410px; padding-top: 20px; } .details_bottom .float_r a{ display: block; font-size: 14px; color: #333333; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; line-height: 40px; } .details_bottom .float_r a span{ font-weight: 600; } .details_bottom .float_l{ padding-top: 42px; } .details_bottom .float_l span{ font-size: 14px; color: #333333; font-weight: 600; float: left; line-height: 36px; margin-left: 20px; } .news_html .block{ padding: 60px 0 0 34px; border-bottom: solid 1px #e1e2e3; height: 144px; } .news_html .block .riqi{ width: 158px; transition:all 0.4s ease-in-out; } .news_html .block .riqi p:nth-child(1){ font-size: 52px; color: #333333; line-height: 40px; margin-bottom: 10px; font-family: MyNewFont; font-weight: 600; } .news_html .block .riqi p:nth-child(2){ font-size: 16px; color: #333333; margin-bottom: 10px; font-family: MyNewFont; font-weight: 600; } @font-face { font-family: 'MyNewFont'; /*字体名称*/ src: url('HelveticaNeueLTPro-ThEx.otf'); /*字体源文件*/ } .news_html .block .riqi .chankan{ font-size: 14px; color: #777777; } .news_html .block .riqi .chankan img{ display: block; float: left; padding-top: 4px; } .news_html .block .xinxi{ width: 664px; } .news_html .block .xinxi h3{ font-size: 24px; color: #555555; line-height: 30px; margin-bottom: 14px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; } .news_html .block .xinxi p{ font-size: 14px; color: #777777; line-height: 30px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .news_html .block:hover .riqi{ width: 200px; } .advertisement1{ background: url("../img/advertisement1.png") top center no-repeat; height: 330px; position: relative; z-index: 9; } .advertisement2{ background: url("../img/advertisement2.png") top center no-repeat; height: 354px; position: relative; z-index: 9; } .advertisement3{ background: url("../img/advertisement3.png") top center no-repeat; height: 304px; position: relative; z-index: 9; margin-top: -109px; } .index_about{ height: 782px; background: #f8f8f8; /*margin-top: -62px;*/ } .index_about .title{ padding-top: 78px; } .index_about .title ul{ position: absolute; top:94px; right: 0; } .index_about .title ul a{ display: block; float: left; width: 90px; /* height: 28px; */ padding-top: 10px; padding-bottom: 10px; background: none; text-align: center; line-height: 28px; color: #333333; } .index_about .title ul .xuanzhong{ background: #4e70c3; color: #fff; } .index_about .title ul a:hover{ background: #4e70c3; color: #fff; } .index_about .title ul a:nth-child(1) li{ border-left:none; } .index_about .title ul a li{ border-left: solid 1px #9b9b9b; line-height: 13px; } .index_about .index_about_img{ width: 412px; height: 315px; float: left; } .index_about .swiper-slide img{ width: 412px; height: 315px; } .index_about_img .swiper-button-prev,.index_about_img .swiper-container-rtl .swiper-button-next{ background: url("../img/arrow3.png") top center no-repeat; top: 422px; left: 414px; width: 39px; height: 39px; transition:all 0.2s ease-in-out; transform:rotate(90deg); -ms-transform:rotate(90deg); /* IE 9 */ -moz-transform:rotate(90deg); /* Firefox */ -webkit-transform:rotate(90deg); /* Safari 和 Chrome */ -o-transform:rotate(90deg); } .index_about_img .swiper-button-prev:hover,.index_about_img .swiper-container-rtl .swiper-button-next:hover{ background: url("../img/arrow3_2.png") top center no-repeat; } .index_about_img .swiper-button-next,.index_about_img .swiper-container-rtl .swiper-button-prev{ background: url("../img/arrow4.png") top center no-repeat; top: 463px; left: 414px; width: 39px; height: 39px; transition:all 0.2s ease-in-out; transform:rotate(90deg); -ms-transform:rotate(90deg); /* IE 9 */ -moz-transform:rotate(90deg); /* Firefox */ -webkit-transform:rotate(90deg); /* Safari 和 Chrome */ -o-transform:rotate(90deg); } .index_about_img .swiper-button-next:hover,.index_about_img .swiper-container-rtl .swiper-button-prev:hover{ background: url("../img/arrow4_2.png") top center no-repeat; } .index_about .index_about_p{ width: 680px; margin-left: 106px; } .index_about .index_about_p h6{ font-size: 20px; color: #333333; text-indent: 34px; padding-top: 66px; margin-bottom: 28px; } .index_about .index_about_p p{ font-size: 14px; line-height: 36px; color: #666666; text-indent: 34px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:6; } .index_about .more_button{ display: block; background: url("../img/arrow1.png") no-repeat; width: 98px; height: 38px; border: solid 1px #d1d1d1; transition:all 0.2s ease-in-out; float: right; margin-top: 40px; } .index_about .more_button:hover{ background: url("../img/arrow2.png") no-repeat; border: solid 1px #4e70c3; } .index_about_bottom{ width: 1200px; height: 190px; background: #fff; margin-top: 22px; } .index_about_bottom .float_l{ height: 98px; border-left: solid 1px #eeeeee; width: 299px; text-align: center; margin-top: 49px; } .index_about_bottom .float_l:nth-child(1){ border-left: none; width: 300px; } .index_about_bottom .inline_flex{ display: inline-flex; text-align: center; } .index_about_bottom .inline_flex .counter{ font-size: 48px; color: #333333; font-family: MyNewFont; } .index_about_bottom .inline_flex p{ font-size: 14px; color: #333333; margin-top: 32px; margin-left: 12px; } .index_about_bottom .inline_flex span{ font-size: 18px; color: #f1940f; } .index_about_bottom .float_l .p{ font-size: 16px; color: #333; margin-top: 14px; } .index_case{ height: auto; padding-bottom: 46px; } .index_case .title { padding-top: 72px; margin-bottom: 42px; position: relative; } .index_case .title ul{ position: absolute; top:94px; right: 0; } .index_case .title ul a{ display: block; float: left; width: 90px; /* height: 28px; */ padding-top: 10px; padding-bottom: 10px; background: none; text-align: center; line-height: 28px; color: #333333; } .index_case .title ul .xuanzhong{ background: #4e70c3; color: #fff; } .index_case .title ul a:hover{ background: #4e70c3; color: #fff; } .index_case .title ul a:nth-child(1) li{ border-left:none; } .index_case .title ul a li{ border-left: solid 1px #9b9b9b; line-height: 13px; } .index_case .float_l{ width: 291px; margin-left: 11px; transition:all 0.2s ease-in-out; } .index_case .float_l:hover{ margin-top: -16px; } .index_case .content{ margin-bottom: 38px; } .index_case .content .float_l:nth-child(1){ margin-left: 0px; } .index_case .float_l img{ width: 289px; height: 217px; border: solid 1px #e1e4ed; display: block; } .index_case .float_l p{ height: 54px; background: none; font-size: 16px; color: #333333; text-align: center; line-height: 54px; transition:all 0.2s ease-in-out; } .index_case .float_l:hover p{ background: #4e70c3; color: #ffffff; } .index_contact{ background: url("../img/shouye_lianxi.png") top center no-repeat; height: 505px; } .index_contact h3{ font-size: 22px; color: #333333; text-align: center; padding-top: 55px; margin-bottom: 10px; } .index_contact p{ font-size: 14px; color: #aaaaaa; text-align: center; text-transform:uppercase; margin-bottom: 26px; } .index_contact input{ width: 324px; height: 50px; border: solid 1px #cfcfcf; font-size: 14px; color: #888888; padding: 0 22px; margin-left: 45px; margin-bottom: 15px; } .index_contact input::-webkit-input-placeholder{ font-size: 14px; color: #888888; } .index_contact input::-moz-placeholder{ /* Mozilla Firefox 19+ */ font-size: 14px; color: #888888; } .index_contact input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */ font-size: 14px; color: #888888; } .index_contact input:-ms-input-placeholder{ /* Internet Explorer 10-11 */ font-size: 14px; color: #888888; } .index_contact input:nth-child(1){ margin-left: 0; } .index_contact textarea{ width: 1154px; height: 129px; border: solid 1px #cfcfcf; font-size: 14px; color: #888888; padding:18px 22px 18px 22px; } .index_contact textarea::-webkit-input-placeholder{ font-size: 14px; color: #888888; } .index_contact textarea::-moz-placeholder{ /* Mozilla Firefox 19+ */ font-size: 14px; color: #888888; } .index_contact textarea:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */ font-size: 14px; color: #888888; } .index_contact textarea:-ms-input-placeholder{ /* Internet Explorer 10-11 */ font-size: 14px; color: #888888; } .index_contact .chongzhi{ width: 178px; height: 38px; line-height: 38px; text-align: center; font-size: 16px; color: #fff; background: #343d42; border: none; margin-left: 418px; margin-right: 8px; margin-top: 18px; cursor: pointer; position: relative; z-index: 10; } .index_contact .tijiao{ width: 178px; height: 38px; line-height: 38px; text-align: center; font-size: 16px; color: #fff; background: #f1940f; border: none; margin-top: 18px; cursor: pointer; position: relative; z-index: 10; } .index_news{ height: 644px; margin-top: -16px; } .index_news .title{ padding-top: 78px; } .index_news_nr .left{ width: 475px; margin-right: 78px; } .index_news_nr .left img{ width: 475px; height: 240px; display: block; } .index_news_nr .left .xinxi{ width: 475px; height: 167px; background: #4e70c3; } .index_news_nr .left .xinxi .float_l:nth-child(1){ width: 88px; height: 88px; border: solid 1px #e3e6eb; margin-top: 33px; margin-left: 20px; } .index_news_nr .left .xinxi .float_l:nth-child(1) h6{ font-size: 36px; color: #fff; font-weight: 700; text-align: center; padding-top: 8px; } .index_news_nr .left .xinxi .float_l:nth-child(1) p{ font-size: 14px; color: #fff; text-align: center; } .index_news_nr .left .xinxi .float_l:nth-child(2){ width: 310px; margin-top: 33px; margin-left: 20px; } .index_news_nr .left .xinxi .float_l:nth-child(2) h6{ font-size: 18px; color: #ffffff; margin-bottom: 20px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; } .index_news_nr .left .xinxi .float_l:nth-child(2) p{ font-size: 14px; color: #b7d8ff; line-height: 24px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .index_news_nr .right .xinxi{ width: 645px; height: 167px; } .index_news_nr .right .xinxi .float_l:nth-child(2){ width: 88px; height: 88px; border: solid 1px #cfcfcf; margin-top: 16px; } .index_news_nr .right .xinxi .float_l:nth-child(2) h6{ font-size: 36px; color: #666666; font-weight: 700; text-align: center; padding-top: 8px; } .index_news_nr .right .xinxi .float_l:nth-child(2) p{ font-size: 14px; color: #666666; text-align: center; } .index_news_nr .right .xinxi .float_l:nth-child(1){ width: 496px; margin-right: 58px; } .index_news_nr .right .xinxi .float_l:nth-child(1) h6{ font-size: 18px; color: #333333; margin-top: 22px; line-height: 42px; height: 42px; padding-bottom: 10px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; border-bottom: solid 1px #dddddd; } .index_news_nr .right .xinxi .float_l:nth-child(1) p{ font-size: 14px; margin-top: 14px; color: #666666; line-height: 24px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .index_news_nr .right ul{ padding-top: 14px; } .index_news_nr .right ul li{ margin-top: 18px; } .index_news_nr .right ul li .float_l{ font-size: 14px; color: #666666; text-indent: 2px; transition:all 0.2s ease-in-out; width: 500px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; background: url("../img/jiantou.png") no-repeat left -32px top 7px; } .index_news_nr .right ul li:hover .float_l{ text-indent: 30px; color: #000; background: url("../img/jiantou.png") no-repeat left 0px top 7px;; } .index_news_nr .right ul li .float_r{ font-size: 14px; color: #666666; margin-right: 32px; transition:all 0.2s ease-in-out; } .index_news_nr .right ul li:hover .float_r{ color: #000; margin-right: 2px; } .index_news_nr .right ul li{ border-bottom: solid 1px #dddddd; padding-bottom: 18px; } .index_news_genduo{ width: 50px; display: block; position: absolute; top: 100px; right: 6px; font-size: 16px; color: #888888; background: url("../img/index_news_genduo.png") top 5px right 2px no-repeat; } .pc_none{ display: none; }