* { margin: 0; padding: 0; outline: 0; -moz-box-sizing: border-box; box-sizing: border-box; } ul { list-style: none; } a { text-decoration: none; } img { display: block; border: none; } input[type="checkbox"] { margin-right: 10px; width: 16px; height: 16px; vertical-align: middle; position: relative; } input[type="checkbox"]::after { position: absolute; top: 0; background-color: #fff; color: #fff; width: 16px; height: 16px; display: inline-block; visibility: visible; text-align: center; border-radius: 3px; border: 1px solid #666; content: ""; } input[type="checkbox"]:checked::after { background-color: #d90012; border-color: #d90012; content: ""; } input[type="checkbox"]:checked::before { position: absolute; left: 5px; z-index: 1; color: #fff; content: "✓"; } .w1200 { width: 1200px; margin: 0 auto; } .icon-1 { display: inline-block; background: url(../images/icon-1.png) no-repeat; background-position-x: left; vertical-align: middle; } .icon-2 { display: inline-block; background: url(../images/icon-2.png) no-repeat; background-position-x: left; vertical-align: middle; } .triangle-up { width: 0; height: 0; margin: auto; border: 8px solid #000; border-bottom-color: #6aa84f; border-top-color: transparent; border-left-color: transparent; border-right-color: transparent; } .triangle-down { width: 0; height: 0; margin: auto; border: 8px solid #000; border-top-color: #6aa84f; border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; } header { background-color: #000; height: 42px; line-height: 42px; } header a { color: #fff; font-size: 14px; } header > ul { display: -moz-box; display: flex; -moz-box-pack: end; justify-content: flex-end; } header > ul > li i { width: 25px; height: 26px; } header ul li span{ color: #FFF; } header > ul > li:nth-child(1) a { border-right: 1px solid #fff; padding-right: 23px; } header > ul > li:nth-child(2) { position: relative; } header > ul > li:nth-child(2):hover div { display: block; } header > ul > li:nth-child(2) > a { padding: 0 30px 0 25px; } header > ul > li:nth-child(2) > div { display: none; position: absolute; top: 34px; z-index: 2; width: 130px; } header > ul > li:nth-child(2) > div ul { text-align: center; } header > ul > li:nth-child(2) > div ul li { background-color: #fff; padding: 17px 0 16px 0; line-height: 1; } header > ul > li:nth-child(2) > div ul li:not(:last-child) { border-bottom: 1px solid #e6e6e6; } header > ul > li:nth-child(2) > div ul li.active, header > ul > li:nth-child(2) > div ul li:hover { background-color: #6aa84f; } header > ul > li:nth-child(2) > div ul li.active a, header > ul > li:nth-child(2) > div ul li:hover a { color: #fff; } header > ul > li:nth-child(2) > div ul li a { color: #384041; } header > ul > li:nth-child(3) a { } header > ul > li:nth-child(3) a span { display: inline-block !important; width: 18px; height: 18px; line-height: 18px; text-align: center; background-color: #d81b00; border-radius: 50%; transform: translate(10px, -50%); } header > ul > li:nth-child(4) { padding-right: 0px; } header > ul > li:nth-child(4) a { border-right: 1px solid #fff; padding-right: 23px; } header > ul > li:nth-child(6) { padding: 0 7px 0 23px; } nav { display: -moz-box; display: flex; -moz-box-pack: justify; justify-content: space-between; -moz-box-align: center; align-items: center; height: 84px; line-height: 84px; } nav ul { display: flex; width: 720px; text-align: center; justify-content: flex-end; margin-left: auto; margin-right: 30px; } nav ul li { flex-basis: 13.7%; position: relative; } nav ul li ul{ position: fixed; z-index: 222; width: 100vw; left: 0; display: none; padding: 32px calc((100% - 1200px)/2); flex-wrap: wrap; justify-content: flex-start; } nav ul li ul i{ position: absolute; width: 100%; height: 100%; mix-blend-mode: normal; opacity: 1; background: rgba(0, 0, 0, 0.5);background-blend-mode: normal; backdrop-filter: blur(30px); top: 0; left: 0; z-index: -1; } nav ul li ul a,nav ul li ul div{ display: flex; width: 240px; height: 64px; border-right: 1px solid #FFF; align-items: center; justify-content: center; font-size: 0; } nav ul li ul a:nth-of-type(5n){ border: none; } nav ul li ul a img{ display: block; width: 30px; height: 30px; object-fit: cover; } nav ul li ul a p{ font-size: 14px; font-weight: 400; color: #FFFFFF; margin-left: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; } nav ul li ul a:hover{ background: #6AA84F; } nav ul li:hover ul{ display: flex; } nav ul li a { display: block; color: #fff; font-size: 16px; font-weight: bold; } nav ul li a.active, nav ul li a:hover { color: #6aa84f; font-weight: 700; } nav form { display: -moz-box; background: #FFF; display: flex; -moz-box-align: center; align-items: center; -moz-box-pack: justify; justify-content: space-between; padding: 0 10px; width: 165px; height: 26px; border: 1px solid #999; border-radius: 84px; } nav form input { border: none; width: 150px; font-size: 12px; } nav form .icon-1 { width: 14px; height: 14px; background-position-y: -36px; border: none; } .banner { position: relative; margin-top: 42px; min-height: 84px; } .banner img { width: 100%; height: auto; } .banner form { position: absolute; left: 50%; bottom: 50px; transform: translateX(-50%); height: 50px; line-height: 50px; font-size: 0; display: flex; z-index: 2; } .banner form ::-webkit-input-placeholder { font-size: 14px; color: #ccc; } .banner form button, .banner form input { height: 100%; } .banner form input { width: 360px; border: 1px solid #6aa84f; border-right: none; height: 50px; line-height: 50px; padding-left: 20px; font-size: 16px; box-sizing: border-box; } .banner form button { width: 140px; border: none; background-color: #6aa84f; font-size: 14px; color: #fff; vertical-align: middle; } .banner form button i { width: 20px; height: 20px; background-position-y: -652px; margin-right: 10px; } .index-pro { background-color: #f5f5f5; padding: 50px calc((100% - 1200px) / 2); } .index-pro .title { font-size: 28px; padding-bottom: 30px; } .index-pro ul { display: -ms-grid; display: grid; -ms-grid-rows: (1fr) [2]; grid-template-rows: repeat(2, 1fr); -ms-grid-columns: (1fr) [4]; grid-template-columns: repeat(4, 1fr); row-gap: 20px; } .index-pro ul li a { display: block; width: 280px; transition: all 0.3s; } .index-pro ul li a .img-box{ overflow: hidden; width: 100%; height: 280px; } .index-pro ul li a .img-box img{ width: 100%; height: 100%; object-fit: cover; transition-duration: .3s; } .index-pro ul li a p { height: 60px; line-height: 60px; color: #404040; background-color: #fff; padding: 0 10px; white-space: nowrap; text-overflow: ellipsis; text-align: center; overflow: hidden; } .index-pro ul li a:hover { box-shadow: 0 5px 12px rgba(0, 0, 0, 0.1); } .index-pro ul li a:hover img{ transform: scale(1.1); } .index-smart { height: 543px; background: url("../images/isbg.jpg") no-repeat center center; background-size: cover; } .index-smart ul { display: -ms-grid; display: grid; -ms-grid-columns: (1fr) [3]; grid-template-columns: repeat(3, 1fr); text-align: center; height: 100%; } .index-smart ul li a { display: block; padding-top: 85px; color: #fff; height: 100%; transition: all 0.3s; } .index-smart ul li a:hover { padding-top: 65px; } .index-smart ul li a img { height: 100px; margin: 0 auto; } .index-smart ul li a h1 { font-size: 28px; margin-top: 50px; } .index-smart ul li a h2 { font-size: 26px; padding-top: 10px; height: 120px; } .index-smart ul li a p { width: 173px; height: 29px; line-height: 29px; border: 1px solid #fff; font-size: 14px; border-radius: 50px; margin: auto; transition-duration: .3s; } .index-smart ul li a p:hover{ border-color: #6aa84f; } .index-smart ul li:nth-child(2) a { border: 1px solid #fff; border-top: none; border-bottom: none; } .index-news { margin: 50px auto; } .index-news .tab_nav { display: -moz-box; display: flex; -moz-box-pack: justify; justify-content: space-between; text-align: center; } .index-news .tab_nav li { width: 100%; background-color: #eee; height: 40px; line-height: 40px; color: #666; } .index-news .tab_nav li.active, .index-news .tab_nav li:hover { background-color: #6aa84f; color: white; } .index-news .content { padding-top: 7px; border: 1px solid #eee; border-top: none; padding: 7px; } .index-news .content .item { display: -moz-box; display: flex; flex-wrap: wrap; font-size: 14px; } .index-news .content .item > img { width: 292px; height: auto; margin-right: 20px; object-fit: scale-down; } .index-news .content .item:not(:first-child) { display: none; } .index-news .content .item .news-list { -moz-box-flex: 1; flex: 1; } .index-news .content .item .news-list li a { display: -moz-box; display: flex; -moz-box-pack: justify; justify-content: space-between; -moz-box-align: center; align-items: center; border-bottom: 1px dotted #ccc; height: 48px; line-height: 48px; } .index-news .content .item .news-list li a::before { width: 8px; height: 8px; background-color: #6aa84f; border-radius: 50%; margin-right: 10px; content: ""; } .index-news .content .item .news-list li a .text { -moz-box-flex: 1; flex: 1; color: #666; } .index-news .content .item .news-list li a .text:hover { text-decoration: underline; } .index-news .content .item .news-list li a .date { color: #bbb; } .index-news .content .item .news-list li a.more { display: block; color: #666; } .index-news .content .item .news-list li a.more:before{ content: ''; width: 0; height: 0; margin: 0; } .index-news .content .item .news-list li a.more span{ margin-right: 5px; } .index-news .content .item .pro-list { display: -moz-box; display: flex; -moz-box-pack: justify; justify-content: space-between; width: 100%; } .index-news .content .item .pro-list li a { display: block; width: 270px; border: 1px solid #f3f3f3; } .index-news .content .item .pro-list li a img { width: 100%; height: 220px; object-fit: cover; } .index-news .content .item .pro-list li p { font-size: 14px; color: #404040; padding: 0 10px; } .index-news .content .item .pro-list li span { display: block; font-size: 12px; color: #999; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding: 0 10px; margin-bottom: 10px; } .index-news .content .item .page { flex-basis: 100%; margin: 20px 0; } .consult { width: 1000px; margin: 0 auto 100px auto; border: 1px solid #e6e6e6; padding: 45px 70px; } .consult > h1 { font-size: 24px; text-align: center; color: #272727; padding-bottom: 27px; border-bottom: 1px solid #ccc; } .consult h2 { font-size: 18px; color: #262626; } .consult form label { color: #262626; } .consult form p label { padding-right: 15px; line-height: 44px; } .consult form font { padding-right: 5px; } .consult form input, .consult form select, .consult form textarea { border: 1px solid #e6e6e6; } .consult form input[type="text"]{ width: 300px; height: 44px; line-height: 44px; font-size: 14px; padding: 15px; } .consult form select { width: 150px; height: 44px; line-height: 44px; margin-right: 10px; color: #262626; } .consult form ::-webkit-input-placeholder { font-size: 14px; color: #ccc; } .consult form button { display: block; color: #fff; font-size: 18px; width: 320px; height: 60px; line-height: 60px; text-align: center; margin: auto; background-color: #6aa84f; border: none; margin-top: 40px; } .consult form > div:first-of-type { padding-bottom: 50px; border-bottom: 1px solid #e6e6e6; } .consult form > div h2 { padding-top: 36px; } .consult form > div .item { display: -moz-box; display: flex; } .consult form > div .item > label { padding-right: 15px; } .consult form > div .item:nth-of-type(1) { -moz-box-pack: justify; justify-content: space-between; padding: 28px 0 30px 0; } .consult form > div .item:nth-of-type(2) ul { display: -ms-grid; display: grid; -ms-grid-columns: (1fr) [5]; grid-template-columns: repeat(5, 1fr); -ms-grid-rows: (1fr) [2]; grid-template-rows: repeat(2, 1fr); grid-gap: 41px 60px; } .consult form > div .item:nth-of-type(2) ul li label { color: #666; vertical-align: middle; } .consult form > div .item:nth-of-type(3) { padding: 34px 0 20px 0; } .consult form > div .item:nth-of-type(3) label { -ms-grid-row-align: center; white-space: nowrap; align-self: center; } .consult form > div .item:nth-of-type(3) input { width: 266px; vertical-align: middle; } .consult form > div .item:nth-of-type(4) textarea { width: 750px; height: 200px; resize: none; padding: 15px; font-family: "Microsoft YaHei"; } .consult form > div:nth-child(2) .item:nth-of-type(1) { padding-bottom: 20px; } .consult form > div:nth-child(2) .item:nth-of-type(1) p:first-child label { letter-spacing: 2px; } .consult form > div:nth-child(2) .item:nth-of-type(2) { -moz-box-pack: justify; justify-content: space-between; } .consult form > div:nth-child(2) .item:nth-of-type(2) p:first-child label { letter-spacing: 8px; } .consult form > div:nth-child(2) .item:nth-of-type(3) { padding: 20px 0 70px 0; } .consult form > div:nth-child(2) .item:nth-of-type(3) font { -ms-grid-row-align: center; align-self: center; } .consult form > div:nth-child(2) .item:nth-of-type(3) label { letter-spacing: 8px; } .consult > div { padding-top: 86px; } .consult > div h2 { padding-bottom: 19px; } .consult > div p { color: #666; } .service-support { display: -moz-box; display: flex; -moz-box-pack: justify; justify-content: space-between; padding-bottom: 86px; } .service-support > img { width: 434px; height: 434px; margin-right: 106px; } .service-support > div { -moz-box-align: center; align-items: center; } .service-support > div h1 { font-size: 44px; color: #303233; padding-bottom: 50px; } .service-support > div h1 span { font-size: 18px; color: #404040; font-weight: 400; margin-left: 20px; } .service-support > div ul { display: -moz-box; display: flex; -moz-box-pack: justify; justify-content: space-between; flex-wrap: wrap; } .service-support > div ul li a { width: 315px; height: 140px; border: 1px solid #f0f0f0; display: -moz-box; display: flex; -moz-box-align: center; align-items: center; padding-left: 30px; } .service-support > div ul li:nth-child(-n + 2) { margin-bottom: 30px; } .service-support > div ul li i { width: 54px; height: 54px; margin-right: 30px; } .service-support > div ul li:nth-child(1) i { background-position-y: -1239px; } .service-support > div ul li:nth-child(2) i { background-position-y: -1053px; } .service-support > div ul li:nth-child(3) i { background-position-y: -1114px; } .service-support > div ul li:nth-child(4) i { background-position-y: -1176px; } .service-support > div ul li h2 { font-size: 20px; color: #262626; } .service-support > div ul li p { font-size: 14px; color: #999; padding-top: 20px; } .service-support > div ul li:hover { border: none; box-shadow: 0 8px 20px 1px rgba(24, 51, 10, 0.1); } .service-support > div ul li:hover p { color: #262626; } .service-care { background-color: #f2f4f7; padding: 70px 0 108px 0; } .service-care .title { text-align: center; position: relative; z-index: 2; line-height: 1; } .service-care .title h1 { font-size: 44px; color: #303233; } .service-care .title p { font-size: 18px; color: #404040; padding-top: 20px; } .service-care ul { display: -moz-box; display: flex; -moz-box-pack: justify; justify-content: space-between; padding-top: 88px; width: 1200px; margin: 0 auto; } .service-care ul li { position: relative; width: 280px; } .service-care ul li img { width: 100%; height: 100%; } .service-care ul li div { position: absolute; top: 50px; left: 50%; transform: translateX(-50%); color: #fff; text-align: center; } .service-care ul li div i { width: 85px; height: 85px; margin-bottom: 30px; } .service-care ul li div h2 { font-size: 24px; white-space: nowrap; } .service-care ul li div h2:nth-of-type(2) { padding-top: 65px; } .service-care ul li div p { padding-top: 14px; line-height: 30px; } .service-care ul li:nth-child(1) i { background-position-y: -1589px; } .service-care ul li:nth-child(2) i { background-position-y: -1303px; } .service-care ul li:nth-child(3) i { background-position-y: -1398px; } .service-care ul li:nth-child(4) i { background-position-y: -1494px; } .service-care ul li:not(:first-child) h2:nth-of-type(2) { padding-top: 65px; } .service-care .service-en{ width: 100%; height: 540px; margin: 50px auto; overflow: hidden; position: relative; margin-bottom: 0; } .service-care .service-en>img{ filter: blur(5px); width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; } .service-care .service-en .title h2{ color: #FFF; font-size: 32px; margin-top: 72px; font-weight: 700; } .service-care .service-en .title p{ font-size: 24px; margin-top: 28px; color: #FFF; } .service-care .service-en li{ width: 300px; } .service-care .service-en li a{ display: flex; justify-content: center; flex-direction: column; align-items: center; align-items: center; height: 100%; width: 300px; height: 200px; background: #FFF; border-radius: 12px; } .service-care .service-en li img{ width: 56px; height: 56px; object-fit: cover; } .service-care .service-en li h2{ margin-top: 30px; font-size: 18px; color: #000; } .service-order { width: 1000px; margin: 0 auto 100px auto; border: 1px solid #e6e6e6; padding: 55px 70px 66px 67px; } .service-order h1 { font-size: 24px; text-align: center; color: #272727; padding-bottom: 27px; border-bottom: 1px solid #ccc; } .service-order h2 { font-size: 18px; color: #262626; } .service-order font { padding-right: 5px; } .service-order input, .service-order select, .service-order textarea { border: 1px solid #e6e6e6; } .service-order input[type="text"] { width: 300px; height: 44px; line-height: 44px; padding: 15px; } .service-order select { margin-right: 10px; width: 150px; height: 44px; line-height: 44px; } .service-order ::-webkit-input-placeholder { font-size: 14px; color: #ccc; } .service-order form > div:first-of-type { border-bottom: 1px solid #e6e6e6; padding-bottom: 50px; } .service-order form > div:first-of-type h2 { padding: 36px 0; } .service-order form > div:last-of-type h2 { padding: 36px 0 28px 0; } .service-order form > div:last-of-type .item:nth-of-type(1) { -moz-box-pack: justify; justify-content: space-between; } .service-order form > div:last-of-type .item:nth-of-type(3) input { vertical-align: middle; } .service-order form > div .item { display: -moz-box; display: flex; justify-content: space-between; margin-bottom: 20px; } .service-order form > div .item p{ display: flex; align-items: center; } .service-order form > div .item p > label, .service-order form > div .item > label { text-align-last: justify; padding-right: 15px; width: 100px; min-width: 100px; } .service-order form > div .item ul { display: flex; justify-content: space-between; flex-wrap: wrap; width: 750px; } .service-order form > div .item ul li{ display: flex; align-items: center; margin-bottom: 25px; width: 150px; } .service-order form > div .item ul li label { color: #666; vertical-align: middle; white-space: nowrap; } .service-order form > div .item:nth-of-type(3) { margin-top: 20px; -moz-box-align: center; align-items: center; } .service-order form > div .item:nth-of-type(3) label { } .service-order form > div .item.uploadImg { margin-top: 20px; -moz-box-align: center; align-items: center; } .service-order form > div .item.uploadImg>div{ width: 750px; } .service-order form > div .item.uploadImg > p { margin-bottom: 32px; } .service-order form > div .item.uploadImg div dl { display: -moz-box; display: flex; } .service-order form > div .item.uploadImg div dl dt { margin-right: 10px; } .service-order form > div .item.uploadImg div dl dd { width: 100px; height: 100px; background-position-y: -542px; } .service-order form > div .item.uploadImg div dl dd.en{ width: 100px; height: 100px; background:url("../images/upload.png"); background-size: 100% 100%; } .service-order form > div .item.uploadImg div dl dd input { opacity: 0; width: 100%; height: 100%; } .service-order form > div .item.uploadImg div p { padding-top: 15px; font-size: 12px; color: #999; } .service-order form > div .item:nth-of-type(5) { margin-top: 30px; } .service-order form > div .item textarea { width: 750px; height: 200px; padding: 15px; resize: none; } .service-order form button { display: block; width: 320px; height: 60px; line-height: 60px; color: #fff; text-align: center; margin: auto; border: none; background-color: #6aa84f; margin-top: 70px; font-size: 18px; } .service-order form .distpicker,.contact-coopera form .distpicker,.service-install .distpicker,.distpicker{ display: flex; justify-content: space-between; width: 750px; } .service-order form .distpicker select,.contact-coopera form .distpicker select,.service-install .distpicker select,.distpicker select{ display: block !important; } .service-order > div h2 { padding: 90px 0 12px 0; } .service-order > div p { color: #666; padding: 7px 0; } .service-install { width: 1000px; margin: 0 auto 100px auto; border: 1px solid #e6e6e6; padding: 55px 70px 66px 67px; } .service-install h1 { font-size: 24px; text-align: center; color: #272727; padding-bottom: 27px; border-bottom: 1px solid #ccc; } .service-install h2 { font-size: 18px; color: #262626; } .service-install font { padding-right: 5px; } .service-install input, .service-install select, .service-install textarea { border: 1px solid #e6e6e6; } .service-install input[type="text"] { width: 300px; height: 44px; line-height: 44px; padding: 15px; } .service-install select { margin-right: 10px; width: 150px; height: 44px; line-height: 44px; padding-left: 10px; } .service-install ::-webkit-input-placeholder { font-size: 14px; color: #ccc; } .service-install form > div .item { display: -moz-box; display: flex; } .service-install form > div .item p > label, .service-install form > div .item > label { padding-right: 15px; } .service-install form > div:first-of-type { border-bottom: 1px solid #e6e6e6; padding-bottom: 50px; } .service-install form > div:first-of-type h2 { padding: 36px 0; } .service-install form > div .item:nth-of-type(1) ul { display: flex; justify-content: space-between; flex-wrap: wrap; width: 750px; } .service-install form > div .item:nth-of-type(1) ul li{ display: flex; align-items: center; margin-bottom: 25px; width: 150px; } .service-install form > div:first-of-type .item:nth-of-type(1) ul li label { color: #666; vertical-align: middle; } .service-install form > div:first-of-type .item:nth-of-type(2), .service-install form > div:first-of-type .item:nth-of-type(3) { margin-top: 34px; -moz-box-align: center; align-items: center; } .service-install form > div:first-of-type .item:nth-of-type(2) > p, .service-install form > div:first-of-type .item:nth-of-type(3) > p { margin-bottom: 32px; } .service-install form > div:first-of-type .item:nth-of-type(2) div dl, .service-install form > div:first-of-type .item:nth-of-type(3) div dl { display: -moz-box; display: flex; } .service-install form > div:first-of-type .item:nth-of-type(2) div dl dt, .service-install form > div:first-of-type .item:nth-of-type(3) div dl dt { margin-right: 10px; } .service-install form > div:first-of-type .item:nth-of-type(2) div dl dd, .service-install form > div:first-of-type .item:nth-of-type(3) div dl dd { width: 100px; height: 100px; background-position-y: -542px; } .service-install form > div:first-of-type .item:nth-of-type(2) div dl dd input, .service-install form > div:first-of-type .item:nth-of-type(3) div dl dd input { opacity: 0; width: 100%; height: 100%; cursor: pointer; } .service-install form > div:first-of-type .item:nth-of-type(2) div p, .service-install form > div:first-of-type .item:nth-of-type(3) div p { padding-top: 15px; font-size: 12px; color: #999; } .service-install form > div:first-of-type .item:nth-of-type(4) { margin-top: 30px; } .service-install form > div:first-of-type .item:nth-of-type(4) textarea { width: 750px; height: 200px; padding: 15px; resize: none; font-family: "Microsoft YaHei"; } .service-install form > div:last-of-type h2 { padding: 36px 0 28px 0; } .service-install form > div:last-of-type .item:nth-of-type(1) { -moz-box-pack: justify; justify-content: space-between; } .service-install form > div:last-of-type .item:nth-of-type(1) p:first-child label { letter-spacing: 2px; } .service-install form > div:last-of-type .item:nth-of-type(2) { padding-top: 20px; -moz-box-pack: justify; justify-content: space-between; } .service-install form > div:last-of-type .item:nth-of-type(2) p:first-child label { letter-spacing: 8px; } .service-install form > div:last-of-type .item:nth-of-type(3) { padding-top: 20px; -moz-box-align: center; align-items: center; } .service-install form > div:last-of-type .item:nth-of-type(3) label { letter-spacing: 8px; } .service-install form > div:last-of-type .item:nth-of-type(3) input { width: 281px; vertical-align: middle; } .service-install form button { display: block; width: 320px; height: 60px; line-height: 60px; color: #fff; text-align: center; margin: auto; border: none; background-color: #6aa84f; margin-top: 70px; font-size: 18px; } .service-install > div h2 { padding: 90px 0 12px 0; } .service-install > div p { color: #666; padding: 7px 0; } .service-repair { width: 1000px; margin: 0 auto 100px auto; border: 1px solid #e6e6e6; padding: 55px 70px 66px 67px; } .service-repair h1 { font-size: 24px; text-align: center; color: #272727; padding-bottom: 27px; border-bottom: 1px solid #ccc; } .service-repair h2 { font-size: 18px; color: #262626; } .service-repair font { padding-right: 5px; } .service-repair input, .service-repair select, .service-repair textarea { border: 1px solid #e6e6e6; } .service-repair input[type="text"] { width: 300px; height: 44px; line-height: 44px; padding: 15px; } .service-repair .distpicker{ display: flex; width: 100%; justify-content: space-between; } .service-repair select { width: 150px; height: 44px; line-height: 44px; padding-left: 10px; } .service-repair ::-webkit-input-placeholder { font-size: 14px; color: #ccc; } .service-repair form > div .item { display: -moz-box; display: flex; } .service-repair form > div .item p > label, .service-repair form > div .item > label { padding-right: 15px; white-space: nowrap; } .service-repair form > div:first-of-type { border-bottom: 1px solid #e6e6e6; padding-bottom: 50px; } .service-repair form > div:first-of-type h2 { padding: 36px 0; } .service-repair form > div:first-of-type .item:nth-of-type(1) { padding-top: 40px; -moz-box-pack: justify; justify-content: space-between; } .service-repair form > div:first-of-type .item:nth-of-type(1) p:first-child font { visibility: hidden; } .service-repair form > div:first-of-type .item:nth-of-type(1) p:last-child label { letter-spacing: 2px; } .service-repair form > div:first-of-type .item:nth-of-type(2) { margin-top: 30px; } .service-repair form > div:first-of-type .item:nth-of-type(2) textarea { width: 750px; height: 200px; padding: 15px; resize: none; font-family: "Microsoft YaHei"; } .service-repair form > div:first-of-type .item:nth-of-type(3) { margin-top: 34px; -moz-box-align: center; align-items: center; } .service-repair form > div:first-of-type .item:nth-of-type(3) > p { margin-bottom: 32px; } .service-repair form > div:first-of-type .item:nth-of-type(3) div dl { display: -moz-box; display: flex; } .service-repair form > div:first-of-type .item:nth-of-type(3) div dl dt { margin-right: 10px; } .service-repair form > div:first-of-type .item:nth-of-type(3) div dl dd { width: 100px; height: 100px; background-position-y: -542px; } .service-repair form > div:first-of-type .item:nth-of-type(3) div dl dd input { opacity: 0; width: 100%; height: 100%; cursor: pointer; } .service-repair form > div:first-of-type .item:nth-of-type(3) div p { padding-top: 15px; font-size: 12px; color: #999; } .service-repair form > div:last-of-type h2 { padding: 36px 0 28px 0; } .service-repair form > div:last-of-type .item:nth-of-type(1) { -moz-box-pack: justify; justify-content: space-between; } .service-repair form > div:last-of-type .item:nth-of-type(1) p:first-child label { letter-spacing: 2px; } .service-repair form > div:last-of-type .item:nth-of-type(2) { padding-top: 20px; -moz-box-pack: justify; justify-content: space-between; } .service-repair form > div:last-of-type .item:nth-of-type(2) p:first-child label { } .service-repair form > div:last-of-type .item:nth-of-type(3) { padding-top: 20px; -moz-box-align: center; align-items: center; } .service-repair form > div:last-of-type .item:nth-of-type(3) label { letter-spacing: 8px; } .service-repair form > div:last-of-type .item:nth-of-type(3) input { width: 281px; vertical-align: middle; } .service-repair form button { display: block; width: 320px; height: 60px; line-height: 60px; color: #fff; text-align: center; margin: auto; border: none; background-color: #6aa84f; margin-top: 70px; font-size: 18px; } .service-que-list { border: 1px solid #e6e6e6; botder-top: none; margin-bottom: 100px; } .service-que-list .classify { display: -moz-box; display: flex; -moz-box-pack: justify; justify-content: space-between; height: 50px; line-height: 50px; text-align: center; } .service-que-list .classify li { width: 100%; } .service-que-list .classify li a { display: block; color: #404040; background-color: #f0f0f0; } .service-que-list .classify li a.active, .service-que-list .classify li a:hover { color: #fff; background-color: #6aa84f; } .service-que-list .list { padding: 30px 40px 0 40px; } .service-que-list .list > li:not(:first-child) { padding-top: 30px; } .service-que-list .list > li a { display: -moz-box; display: flex; -moz-box-pack: justify; justify-content: space-between; border-bottom: 1px solid #e6e6e6; padding-bottom: 19px; } .service-que-list .list > li a img { width: 200px; height: 140px; border-radius: 10px; margin-right: 20px; object-fit: cover; min-width: 200px; } .service-que-list .list > li a div { display: -moz-box; display: flex; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; -moz-box-pack: justify; justify-content: space-between; padding: 10px 0 8px 0; min-width: 900px; } .service-que-list .list > li a div h1 { font-size: 15px; color: #262626; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .service-que-list .list > li a div p { font-size: 14px; color: #666; line-height: 28px; } .service-que-list .list > li a div ul { display: -moz-box; display: flex; -moz-box-pack: justify; justify-content: space-between; color: #ccc; font-size: 14px; } .service-que-list .list > li a div ul li i { width: 16px; height: 16px; margin-right: 5px; } .service-que-list .list > li a div ul li:nth-child(1) i { background-position-y: -800px; } .service-que-list .list > li a div ul li:nth-child(2) i { background-position-y: -682px; } .service-que-list .list > li a div ul li:nth-child(3) i { background-position-y: -704px; } .service-que-list .list > li a:hover img { filter: brightness(0.6); } .service-que-list .list > li a:hover div h1 { color: #6aa84f; } .service-que-list .list > li a:hover div p, .service-que-list .list > li a:hover div ul { color: #262626; } .service-que-list .list > li a:hover div ul li:nth-child(1) i { background-position-y: -729px; } .service-que-list .list > li a:hover div ul li:nth-child(2) i { background-position-y: -753px; } .service-que-list .list > li a:hover div ul li:nth-child(3) i { background-position-y: -776px; } .service-que-list .page { margin: 70px 0 72px 0; } .service-que-details { display: -moz-box; display: flex; -moz-box-pack: justify; justify-content: space-between; } .service-que-details .left .container, .service-que-details .left .pagination a, .service-que-details .right { border: 1px solid #e6e6e6; } .service-que-details .left { width: 880px; margin-right: 20px; } .service-que-details .left .container { padding: 50px 60px 69px 60px; } .service-que-details .left .container > h1 { text-align: center; font-size: 24px; color: #272727; } .service-que-details .left .container > ul { display: -moz-box; display: flex; -moz-box-pack: center; justify-content: center; font-size: 14px; color: #666; padding: 20px 0 30px 0; border-bottom: 1px solid #e5e5e5; } .service-que-details .left .container > ul li:nth-child(2) { padding: 0 40px; } .service-que-details .left .container .details { padding-top: 30px; } .service-que-details .left .container .details *{ max-width: 100% !important; height: auto !important; } .service-que-details .left .pagination { margin-top: 20px; display: -moz-box; display: flex; -moz-box-pack: justify; justify-content: space-between; text-align: center; font-size: 18px; height: 70px; line-height: 70px; } .service-que-details .left .pagination a { flex-basis: 50%; padding: 0 53px; color: #999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; align-items: center; justify-content: center; display: flex; } .service-que-details .left .pagination a span { color: #262626; font-size: 25px; margin: 0 10px; } .service-que-details .left .pagination a:hover { border-color: #6aa84f; background-color: #6aa84f; color: #fff; } .service-que-details .left .pagination a:hover span { color: #fff; } .service-que-details .right { height: 620px; -moz-box-flex: 1; flex: 1; padding: 30px 20px 0 20px; } .service-que-details .right h1 { font-size: 20px; color: #404040; border-left: 4px solid #6aa84f; line-height: 1; padding-left: 10px; margin-bottom: 20px; } .service-que-details .right > a { display: block; position: relative; width: 260px; height: 180px; border-radius: 10px; overflow: hidden; margin-bottom: 10px; } .service-que-details .right > a img { width: 100%; height: 100%; } .service-que-details .right > a p { width: 100%; position: absolute; bottom: 0; background-color: rgba(0, 0, 0, 0.65); color: #fff; font-size: 14px; padding: 13px 15px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .service-que-details .right ul { font-size: 14px; } .service-que-details .right ul li { display: -moz-box; display: flex; -moz-box-pack: justify; justify-content: space-between; padding: 8px 0; } .service-que-details .right ul li a { display: inline-block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #666; width: 160px; } .service-que-details .right ul li a::before { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background-color: #6aa84f; margin-bottom: 2px; margin-right: 10px; content: ""; } .service-que-details .right ul li span { color: #ccc; } .contact .text { padding-bottom: 25px; border-bottom: 1px solid #e6e6e6; } .contact .classify { display: -moz-box; display: flex; -moz-box-pack: justify; justify-content: space-between; padding-top: 30px; } .contact .classify li a { position: relative; display: block; width: 380px; height: 280px; } .contact .classify li a img { width: 100; height: 100%; filter: brightness(0.6); } .contact .classify li a p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 20px; font-weight: 700; color: #fff; white-space: nowrap; } .contact .classify li a p i { display: block; width: 80px; height: 80px; margin: auto auto 34px auto; background-position-y: -824px; } .contact .info { margin-top: 78px; background: url(../images/contact-bg.png) no-repeat; padding: 70px 0 100px 0; } .contact .info > img { width: 100%; height: auto; } .contact .info .container { display: -moz-box; display: flex; background-color: #fff; padding: 20px; } .contact .info .container .map { width: 640px; height: 460px; margin-right: 70px; } .contact .info .container .address { color: #262626; } .contact .info .container .address h1 { font-size: 30px; padding-bottom: 25px; } .contact .info .container .address ul li { padding-bottom: 28px; } .contact .info .container .address ul li i { width: 24px; height: 24px; margin-right: 16px; } .contact .info .container .address ul li:nth-child(1) i { background-position-y: -1018px; } .contact .info .container .address ul li:nth-child(2) i { background-position-y: -914px; } .contact .info .container .address ul li:nth-child(3) i { background-position-y: -950px; } .contact .info .container .address ul li:nth-child(4) i { background-position-y: -984px; } .contact .info .container .address .qr-box{ display: flex; justify-content: center; width: 400px; } .contact .info .container .address .qrcode { width: 120px; } .contact .info .container .address .qrcode img { width: 100%; height: 120px; border: 1px solid #e6e6e6; } .contact .info .container .address .qrcode p { font-size: 14px; text-align: center; padding-top: 20px; } .contact-brand { padding-bottom: 100px; } .contact-brand .title { text-align: center; padding-bottom: 50px; line-height: 1; } .contact-brand .title h1 { color: #303233; font-size: 44px; } .contact-brand .title p { font-size: 18px; text-transform: uppercase; color: #404040; padding-top: 20px; } .contact-brand .details { } .contact-brand .details img{ max-width: 100%; height: auto !important; } .contact-about { display: -moz-box; display: flex; -moz-box-pack: justify; justify-content: space-between; padding-bottom: 100px; } .contact-about > img { width: 500px; margin-right: 80px; object-fit: cover; } .contact-about > div h1 { font-size: 44px; color: #303233; line-height: 1; padding-bottom: 40px; } .contact-about > div h1 span { color: #404040; font-size: 18px; text-transform: uppercase; margin-left: 20px; font-weight: 400; } .contact-about > div .details { line-height: 36px; } .contact-about > div .details p:nth-child(2) { padding: 10px 0; } .contact-coopera { width: 1000px; margin: 0 auto 100px auto; border: 1px solid #e6e6e6; padding: 55px 70px 66px 67px; } .contact-coopera h1 { font-size: 24px; text-align: center; color: #272727; padding-bottom: 27px; border-bottom: 1px solid #ccc; } .contact-coopera h2 { font-size: 18px; color: #262626; } .contact-coopera font { padding-right: 5px; } .contact-coopera input, .contact-coopera select { border: 1px solid #e6e6e6; } .contact-coopera input[type="text"] { width: 300px; height: 44px; line-height: 44px; padding: 15px; } .contact-coopera select { margin-right: 10px; width: 150px; height: 44px; line-height: 44px; } .contact-coopera ::-webkit-input-placeholder { font-size: 14px; color: #ccc; } .contact-coopera form > div .item { display: -moz-box; display: flex; } .contact-coopera form > div .item p > label, .contact-coopera form > div .item > label { padding-right: 15px; } .contact-coopera form > div h2 { padding: 36px 0; } .contact-coopera form > div .item:nth-of-type(1) { padding-top: 54px; } .contact-coopera form > div .item:nth-of-type(1) ul { display: flex; justify-content: space-between; flex-wrap: wrap; width: 750px; } .contact-coopera form > div .item:nth-of-type(1) ul li{ display: flex; align-items: center; margin-bottom: 25px; width: 150px; } .contact-coopera form > div .item:nth-of-type(1) ul li label { color: #666; vertical-align: middle; } .contact-coopera form > div .item:nth-of-type(2) { margin-top: 34px; -moz-box-align: center; align-items: center; } .contact-coopera form > div .item:nth-of-type(3) { margin-top: 20px; -moz-box-pack: justify; justify-content: space-between; } .contact-coopera form > div .item:nth-of-type(3) p:first-child label { letter-spacing: 4px; } .contact-coopera form > div .item:nth-of-type(4) { margin-top: 20px; -moz-box-pack: justify; justify-content: space-between; } .contact-coopera form > div .item:nth-of-type(4) p:first-child label { } .contact-coopera form > div .item:nth-of-type(5) { margin-top: 20px; -moz-box-align: center; align-items: center; } .contact-coopera form > div .item:nth-of-type(5) input { width: 269px; vertical-align: middle; } .contact-coopera form button { display: block; width: 320px; height: 60px; line-height: 60px; color: #fff; text-align: center; margin: auto; border: none; background-color: #6aa84f; margin-top: 70px; font-size: 18px; } .contact-consult { width: 1000px; margin: 0 auto 100px auto; border: 1px solid #e6e6e6; padding: 55px 70px 66px 67px; } .contact-consult h1 { font-size: 24px; text-align: center; color: #272727; padding-bottom: 27px; border-bottom: 1px solid #ccc; } .contact-consult h2 { font-size: 18px; color: #262626; } .contact-consult font { padding-right: 5px; } .contact-consult input, .contact-consult select, .contact-consult textarea { border: 1px solid #e6e6e6; } .contact-consult input[type="text"] { width: 300px; height: 44px; line-height: 44px; padding: 15px; } .contact-consult select { margin-right: 10px; width: 150px; height: 44px; line-height: 44px; padding-left: 10px; } .contact-consult ::-webkit-input-placeholder { font-size: 14px; color: #ccc; } .contact-consult form > div .item { display: -moz-box; display: flex; justify-content: space-between; } .contact-consult form > div .item p > label, .contact-consult form > div .item > label { text-align-last: justify; padding-right: 15px; width: 100px; } .contact-consult form > div:first-of-type { border-bottom: 1px solid #e6e6e6; padding-bottom: 50px; } .contact-consult form > div:first-of-type h2 { padding: 36px 0; } .contact-consult form > div .item:nth-of-type(1) ul { display: flex; justify-content: space-between; flex-wrap: wrap; width: 750px; } .contact-consult form > div .item:nth-of-type(1) ul li{ display: flex; align-items: center; margin-bottom: 25px; width: 150px; } .contact-consult form > div:first-of-type .item:nth-of-type(1) ul li label { color: #666; vertical-align: middle; } .contact-consult form > div:first-of-type .item:nth-of-type(2) { margin-top: 30px; } .contact-consult form > div:first-of-type .item:nth-of-type(2) textarea { width: 750px; height: 200px; padding: 15px; resize: none; font-family: "Microsoft YaHei"; } .contact-consult form > div:last-of-type h2 { padding: 36px 0 28px 0; } .contact-consult form > div:last-of-type .item:nth-of-type(1) { -moz-box-pack: justify; justify-content: space-between; } .contact-consult form > div:last-of-type .item:nth-of-type(1) p:first-child label { letter-spacing: 2px; } .contact-consult form > div:last-of-type .item:nth-of-type(2) { padding-top: 20px; -moz-box-pack: justify; justify-content: space-between; } .contact-consult form > div:last-of-type .item:nth-of-type(2) p:first-child label { } .contact-consult form > div:last-of-type .item:nth-of-type(3) { padding-top: 20px; -moz-box-align: center; align-items: center; } .contact-consult form > div:last-of-type .item:nth-of-type(3) label { letter-spacing: 8px; } .contact-consult form > div:last-of-type .item:nth-of-type(3) input { width: 277px; vertical-align: middle; } .contact-consult form button { display: block; width: 320px; height: 60px; line-height: 60px; color: #fff; text-align: center; margin: auto; border: none; background-color: #6aa84f; margin-top: 70px; font-size: 18px; } .contact-consult form .distpicker{ display: flex; justify-content: space-between; width: 765px; } .contact-consult form .distpicker select{ display: block !important; } .down { margin-bottom: 100px; } .down > ul > li { border: 1px solid #e6e6e6; padding: 20px; } .down > ul > li > div { position: relative; display: -moz-box; display: flex; -moz-box-pack: justify; justify-content: space-between; background-color: #fff; cursor: pointer; } .down > ul > li > div > img { width: 580px; height: 360px; margin-right: 50px; } .down > ul > li > div > p { display: none; position: absolute; top: 0; left: 0; width: 580px; height: 360px; background-color: rgba(0, 0, 0, 0.6); } .down > ul > li .container { -moz-box-flex: 1; flex: 1; display: -moz-box; display: flex; -moz-box-pack: justify; justify-content: space-between; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; } .down > ul > li .container p { display: -moz-box; display: flex; -moz-box-pack: justify; justify-content: space-between; -moz-box-align: center; align-items: center; } .down > ul > li .container p i { width: 70px; height: 70px; } .down > ul > li .container p span { width: 180px; height: 50px; line-height: 50px; color: #999; text-align: center; border: 1px solid #e6e6e6; } .down > ul > li .container div { line-height: 1; } .down > ul > li .container div h1 { font-size: 24px; color: #262626; } .down > ul > li .container div p { color: #666; padding-top: 20px; } .down > ul > li .container ul { display: -ms-grid; display: grid; -ms-grid-rows: (1fr) [3]; grid-template-rows: repeat(3, 1fr); -ms-grid-columns: (1fr) [3]; grid-template-columns: repeat(3, 1fr); -moz-box-align: center; align-items: center; row-gap: 20px; font-size: 14px; line-height: 1; } .down > ul > li .container ul li a { display: -moz-box; display: flex; -moz-box-align: center; align-items: center; color: #666; } .down > ul > li .container ul li a i { width: 20px; height: 20px; margin-right: 10px; min-width: 20px; } .down > ul > li .container ul li:hover a { color: #262626; } .down > ul > li:hover { box-shadow: 0 5px 20px 1px rgba(0, 0, 0, 0.2); } .down > ul > li:hover > div > p { display: block; } .down > ul > li:hover .container p span { background-color: #6aa84f; border-color: #6aa84f; color: #fff; } .down > ul > li:nth-child(1) .container p i { background-position-y: -1925px; } .down > ul > li:nth-child(1):hover .container p i { background-position-y: -2005px; } .down > ul > li:nth-child(1):hover .container ul li:nth-child(1) i { background-position-y: -2564px; } .down > ul > li:nth-child(1):hover .container ul li:nth-child(2) i { background-position-y: -2387px; } .down > ul > li:nth-child(1):hover .container ul li:nth-child(3) i { background-position-y: -2477px; } .down > ul > li:nth-child(1):hover .container ul li:nth-child(4) i { background-position-y: -2327px; } .down > ul > li:nth-child(1):hover .container ul li:nth-child(5) i { background-position-y: -2417px; } .down > ul > li:nth-child(1):hover .container ul li:nth-child(6) i { background-position-y: -2508px; } .down > ul > li:nth-child(1):hover .container ul li:nth-child(7) i { background-position-y: -2357px; } .down > ul > li:nth-child(1):hover .container ul li:nth-child(8) i { background-position-y: -2448px; } .down > ul > li:nth-child(1):hover .container ul li:nth-child(9) i { background-position-y: -2534px; } .down > ul > li:nth-child(1) .container ul li:nth-child(1) i { background-position-y: -2746px; } .down > ul > li:nth-child(1) .container ul li:nth-child(2) i { background-position-y: -2806px; } .down > ul > li:nth-child(1) .container ul li:nth-child(3) i { background-position-y: -2716px; } .down > ul > li:nth-child(1) .container ul li:nth-child(4) i { background-position-y: -2892px; } .down > ul > li:nth-child(1) .container ul li:nth-child(5) i { background-position-y: -2980px; } .down > ul > li:nth-child(1) .container ul li:nth-child(6) i { background-position-y: -2836px; } .down > ul > li:nth-child(1) .container ul li:nth-child(7) i { background-position-y: -2685px; } .down > ul > li:nth-child(1) .container ul li:nth-child(8) i { background-position-y: -3010px; } .down > ul > li:nth-child(1) .container ul li:nth-child(9) i { background-position-y: -2950px; } .down > ul > li:nth-child(2) .container p i { background-position-y: -1684px; } .down > ul > li:nth-child(2):hover .container p i { background-position-y: -2085px; } .down > ul > li:nth-child(2):hover .container ul li:nth-child(1) i { background-position-y: -2564px; } .down > ul > li:nth-child(2):hover .container ul li:nth-child(2) i { background-position-y: -2387px; } .down > ul > li:nth-child(2):hover .container ul li:nth-child(3) i { background-position-y: -2327px; } .down > ul > li:nth-child(2):hover .container ul li:nth-child(4) i { background-position-y: -2595px; } .down > ul > li:nth-child(2):hover .container ul li:nth-child(5) i { background-position-y: -2508px; } .down > ul > li:nth-child(2):hover .container ul li:nth-child(6) i { background-position-y: -2656px; } .down > ul > li:nth-child(2):hover .container ul li:nth-child(7) i { background-position-y: -2448px; } .down > ul > li:nth-child(2):hover .container ul li:nth-child(8) i { background-position-y: -2625px; } .down > ul > li:nth-child(2):hover .container ul li:nth-child(9) i { background-position-y: -2534px; } .down > ul > li:nth-child(2) .container ul li:nth-child(1) i { background-position-y: -2746px; } .down > ul > li:nth-child(2) .container ul li:nth-child(2) i { background-position-y: -2806px; } .down > ul > li:nth-child(2) .container ul li:nth-child(3) i { background-position-y: -2892px; } .down > ul > li:nth-child(2) .container ul li:nth-child(4) i { background-position-y: -2776px; } .down > ul > li:nth-child(2) .container ul li:nth-child(5) i { background-position-y: -2836px; } .down > ul > li:nth-child(2) .container ul li:nth-child(6) i { background-position-y: -2922px; } .down > ul > li:nth-child(2) .container ul li:nth-child(7) i { background-position-y: -3010px; } .down > ul > li:nth-child(2) .container ul li:nth-child(8) i { background-position-y: -2862px; } .down > ul > li:nth-child(2) .container ul li:nth-child(9) i { background-position-y: -2950px; } .down > ul > li:nth-child(3) .container p i { background-position-y: -1764px; } .down > ul > li:nth-child(3):hover .container p i { background-position-y: -2166px; } .down > ul > li:nth-child(3):hover .container ul li:nth-child(1) i { background-position-y: -2564px; } .down > ul > li:nth-child(3):hover .container ul li:nth-child(2) i { background-position-y: -2387px; } .down > ul > li:nth-child(3):hover .container ul li:nth-child(3) i { background-position-y: -2327px; } .down > ul > li:nth-child(3):hover .container ul li:nth-child(4) i { background-position-y: -2656px; } .down > ul > li:nth-child(3):hover .container ul li:nth-child(5) i { background-position-y: -2448px; } .down > ul > li:nth-child(3):hover .container ul li:nth-child(6) i { background-position-y: -2595px; } .down > ul > li:nth-child(3):hover .container ul li:nth-child(7) i { background-position-y: -2508px; } .down > ul > li:nth-child(3):hover .container ul li:nth-child(8) i { background-position-y: -2625px; } .down > ul > li:nth-child(3):hover .container ul li:nth-child(9) i { background-position-y: -2534px; } .down > ul > li:nth-child(3) .container ul li:nth-child(1) i { background-position-y: -2746px; } .down > ul > li:nth-child(3) .container ul li:nth-child(2) i { background-position-y: -2806px; } .down > ul > li:nth-child(3) .container ul li:nth-child(3) i { background-position-y: -2892px; } .down > ul > li:nth-child(3) .container ul li:nth-child(4) i { background-position-y: -2922px; } .down > ul > li:nth-child(3) .container ul li:nth-child(5) i { background-position-y: -3010px; } .down > ul > li:nth-child(3) .container ul li:nth-child(6) i { background-position-y: -2776px; } .down > ul > li:nth-child(3) .container ul li:nth-child(7) i { background-position-y: -2836px; } .down > ul > li:nth-child(3) .container ul li:nth-child(8) i { background-position-y: -2862px; } .down > ul > li:nth-child(3) .container ul li:nth-child(9) i { background-position-y: -2950px; } .down > ul > li:nth-child(4) .container p i { background-position-y: -1844px; } .down > ul > li:nth-child(4):hover .container p i { background-position-y: -2246px; } .down > ul > li:nth-child(4):hover .container ul li:nth-child(1) i { background-position-y: -2564px; } .down > ul > li:nth-child(4):hover .container ul li:nth-child(2) i { background-position-y: -2387px; } .down > ul > li:nth-child(4):hover .container ul li:nth-child(3) i { background-position-y: -2327px; } .down > ul > li:nth-child(4):hover .container ul li:nth-child(4) i { background-position-y: -2417px; } .down > ul > li:nth-child(4):hover .container ul li:nth-child(5) i { background-position-y: -2508px; } .down > ul > li:nth-child(4):hover .container ul li:nth-child(6) i { background-position-y: -2357px; } .down > ul > li:nth-child(4):hover .container ul li:nth-child(7) i { background-position-y: -2448px; } .down > ul > li:nth-child(4):hover .container ul li:nth-child(8) i { background-position-y: -2625px; } .down > ul > li:nth-child(4):hover .container ul li:nth-child(9) i { background-position-y: -2534px; } .down > ul > li:nth-child(4) .container ul li:nth-child(1) i { background-position-y: -2746px; } .down > ul > li:nth-child(4) .container ul li:nth-child(2) i { background-position-y: -2806px; } .down > ul > li:nth-child(4) .container ul li:nth-child(3) i { background-position-y: -2892px; } .down > ul > li:nth-child(4) .container ul li:nth-child(4) i { background-position-y: -2980px; } .down > ul > li:nth-child(4) .container ul li:nth-child(5) i { background-position-y: -2836px; } .down > ul > li:nth-child(4) .container ul li:nth-child(6) i { background-position-y: -2685px; } .down > ul > li:nth-child(4) .container ul li:nth-child(7) i { background-position-y: -3010px; } .down > ul > li:nth-child(4) .container ul li:nth-child(8) i { background-position-y: -2862px; } .down > ul > li:nth-child(4) .container ul li:nth-child(9) i { background-position-y: -2950px; } .down > ul > li:not(:last-child) { margin-bottom: 30px; } .down-list { display: -moz-box; display: flex; padding-bottom: 100px; } .down-list .left { width: 240px; height: 680px; border: 1px solid #f0f0f0; padding: 30px 25px 0 25px; margin-right: 20px; } .down-list .left > h1 { font-size: 20px; color: #404040; border-left: 4px solid #6aa84f; padding-left: 10px; line-height: 1; margin-bottom: 15px; } .down-list .left ul li a { display: -moz-box; display: flex; -moz-box-align: center; align-items: center; height: 65px; color: #666; border-bottom: 1px solid #e6e6e6; padding-left: 15px; } .down-list .left ul li a .img-box { width: 25px; height: 25px; margin-right: 10px; min-width: 25px; } .down-list .left ul li a .img-box img{ width: 100%; height: 100%; } .down-list .left ul li a .img-box img:nth-of-type(2){ display: none; } .down-list .left ul li a.active, .down-list .left ul li a:hover { background-color: #6aa84f; color: #fff; font-weight: 700; } .down-list .left ul li a.active .img-box img, .down-list .left ul li a:hover .img-box img{ display: none; } .down-list .left ul li a.active .img-box img:nth-of-type(2), .down-list .left ul li a:hover .img-box img:nth-of-type(2){ display: block; } .down-list .right { -moz-box-flex: 1; flex: 1; border: 1px solid #e6e6e6; padding: 35px 30px 72px 30px; } .down-list .right .title { display: -moz-box; display: flex; -moz-box-pack: justify; justify-content: space-between; line-height: 1; border-bottom: 1px solid #ccc; } .down-list .right .title h1 { font-size: 20px; color: #272727; border-bottom: 6px solid #6aa84f; padding-bottom: 30px; } .down-list .right .title h2 { font-size: 16px; color: #272727; padding-bottom: 10px; } .down-list .right .title p { font-size: 14px; color: #999; } .down-list .right .list { padding-top: 30px; } .down-list .right .list > li { display: -moz-box; display: flex; -moz-box-pack: justify; justify-content: space-between; border-bottom: 1px solid #e6e6e6; padding: 30px 0 19px 0; } .down-list .right .list > li:hover div p{ color: #6aa84f; } .down-list .right .list > li:hover div ul { color: #404040; } .down-list .right .list > li:hover div ul li:nth-child(1) i { background-position-y: -5729px; } .down-list .right .list > li:hover div ul li:nth-child(2) i { background-position-y: -5679px; } .down-list .right .list > li:hover div ul li:nth-child(3) i { background-position-y: -5705px; } .down-list .right .list > li:hover > a i { background-position-y: -5755px; } .down-list .right .list > li > div p { color: #404040; padding-bottom: 24px; } .down-list .right .list > li > div ul { display: -moz-box; display: flex; font-size: 14px; color: #c8cacc; } .down-list .right .list > li > div ul li i { width: 18px; height: 18px; margin-right: 5px; } .down-list .right .list > li > div ul li:nth-child(1) i { background-position-y: -3921px; } .down-list .right .list > li > div ul li:nth-child(2) i { background-position-y: -3870px; } .down-list .right .list > li > div ul li:nth-child(3) i { background-position-y: -3896px; } .down-list .right .list > li > div ul li:not(:last-child) { padding-right: 125px; } .down-list .right .list > li > a { -ms-grid-row-align: center; align-self: center; border-left: 1px solid #e6e6e6; padding: 0 40px; } .down-list .right .list > li > a i { width: 30px; height: 30px; background-position-y: -5795px; } .down-list .right .page { margin-top: 70px; } .down-dev .left ul li:nth-child(1) i { background-position-y: -3417px; } .down-dev .left ul li:nth-child(1) .active i, .down-dev .left ul li:nth-child(1):hover i { background-position-y: -3452px; } .down-dev .left ul li:nth-child(2) i { background-position-y: -3038px; } .down-dev .left ul li:nth-child(2) .active i, .down-dev .left ul li:nth-child(2):hover i { background-position-y: -3488px; } .down-dev .left ul li:nth-child(3) i { background-position-y: -3074px; } .down-dev .left ul li:nth-child(3) .active i, .down-dev .left ul li:nth-child(3):hover i { background-position-y: -3523px; } .down-dev .left ul li:nth-child(4) i { background-position-y: -3109px; } .down-dev .left ul li:nth-child(4) .active i, .down-dev .left ul li:nth-child(4):hover i { background-position-y: -3558px; } .down-dev .left ul li:nth-child(5) i { background-position-y: -3144px; } .down-dev .left ul li:nth-child(5) .active i, .down-dev .left ul li:nth-child(5):hover i { background-position-y: -3523px; } .down-dev .left ul li:nth-child(6) i { background-position-y: -3175px; } .down-dev .left ul li:nth-child(6) .active i, .down-dev .left ul li:nth-child(6):hover i { background-position-y: -3625px; } .down-dev .left ul li:nth-child(7) i { background-position-y: -3210px; } .down-dev .left ul li:nth-child(7) .active i, .down-dev .left ul li:nth-child(7):hover i { background-position-y: -3660px; } .down-dev .left ul li:nth-child(8) i { background-position-y: -3244px; } .down-dev .left ul li:nth-child(8) .active i, .down-dev .left ul li:nth-child(8):hover i { background-position-y: -3694px; } .down-dev .left ul li:nth-child(9) i { background-position-y: -3278px; } .down-dev .left ul li:nth-child(9) .active i, .down-dev .left ul li:nth-child(9):hover i { background-position-y: -3730px; } .down-dev .right .title > div { display: -moz-box; display: flex; } .down-dev .right .title > div > div { text-align: right; padding-right: 20px; } .down-dev .right .title > div a { width: 120px; height: 44px; line-height: 44px; text-align: center; color: #fff; font-size: 14px; background-color: #6aa84f; } .down-soft .left ul li:nth-child(1) i { background-position-y: -3417px; } .down-soft .left ul li:nth-child(1) .active i, .down-soft .left ul li:nth-child(1):hover i { background-position-y: -3452px; } .down-soft .left ul li:nth-child(2) i { background-position-y: -3038px; } .down-soft .left ul li:nth-child(2) .active i, .down-soft .left ul li:nth-child(2):hover i { background-position-y: -3488px; } .down-soft .left ul li:nth-child(3) i { background-position-y: -3382px; } .down-soft .left ul li:nth-child(3) .active i, .down-soft .left ul li:nth-child(3):hover i { background-position-y: -3834px; } .down-soft .left ul li:nth-child(4) i { background-position-y: -3074px; } .down-soft .left ul li:nth-child(4) .active i, .down-soft .left ul li:nth-child(4):hover i { background-position-y: -3523px; } .down-soft .left ul li:nth-child(5) i { background-position-y: -3109px; } .down-soft .left ul li:nth-child(5) .active i, .down-soft .left ul li:nth-child(5):hover i { background-position-y: -3558px; } .down-soft .left ul li:nth-child(6) i { background-position-y: -3144px; } .down-soft .left ul li:nth-child(6) .active i, .down-soft .left ul li:nth-child(6):hover i { background-position-y: -3523px; } .down-soft .left ul li:nth-child(7) i { background-position-y: -3175px; } .down-soft .left ul li:nth-child(7) .active i, .down-soft .left ul li:nth-child(7):hover i { background-position-y: -3625px; } .down-soft .left ul li:nth-child(8) i { background-position-y: -3210px; } .down-soft .left ul li:nth-child(8) .active i, .down-soft .left ul li:nth-child(8):hover i { background-position-y: -3660px; } .down-soft .left ul li:nth-child(9) i { background-position-y: -3278px; } .down-soft .left ul li:nth-child(9) .active i, .down-soft .left ul li:nth-child(9):hover i { background-position-y: -3730px; } .down-soft .right .title { position: relative; } .down-soft .right .title > a { position: absolute; right: 0; bottom: 9px; display: -moz-box; display: flex; -moz-box-pack: justify; justify-content: space-between; -moz-box-align: center; align-items: center; height: 70px; background-color: rgba(106, 168, 79, 0.1); border-radius: 10px; border: 1px solid #6aa84f; padding: 0 20px; } .down-soft .right .title > a i { width: 44px; height: 44px; background-position-y: -3947px; } .down-soft .right .title > a>div { margin: 0 10px; } .down-soft .right .title > a span { width: 120px; height: 40px; line-height: 40px; border-radius: 5px; background-color: #6aa84f; font-size: 14px; text-align: center; color: #fff; } .down-doc .left ul li:nth-child(1) i { background-position-y: -3417px; } .down-doc .left ul li:nth-child(1) .active i, .down-doc .left ul li:nth-child(1):hover i { background-position-y: -3452px; } .down-doc .left ul li:nth-child(2) i { background-position-y: -3038px; } .down-doc .left ul li:nth-child(2) .active i, .down-doc .left ul li:nth-child(2):hover i { background-position-y: -3488px; } .down-doc .left ul li:nth-child(3) i { background-position-y: -3074px; } .down-doc .left ul li:nth-child(3) .active i, .down-doc .left ul li:nth-child(3):hover i { background-position-y: -3523px; } .down-doc .left ul li:nth-child(4) i { background-position-y: -3347px; } .down-doc .left ul li:nth-child(4) .active i, .down-doc .left ul li:nth-child(4):hover i { background-position-y: -3799px; } .down-doc .left ul li:nth-child(5) i { background-position-y: -3144px; } .down-doc .left ul li:nth-child(5) .active i, .down-doc .left ul li:nth-child(5):hover i { background-position-y: -3594px; } .down-doc .left ul li:nth-child(6) i { background-position-y: -3314px; } .down-doc .left ul li:nth-child(6) .active i, .down-doc .left ul li:nth-child(6):hover i { background-position-y: -3766px; } .down-doc .left ul li:nth-child(7) i { background-position-y: -3210px; } .down-doc .left ul li:nth-child(7) .active i, .down-doc .left ul li:nth-child(7):hover i { background-position-y: -3660px; } .down-doc .left ul li:nth-child(8) i { background-position-y: -3244px; } .down-doc .left ul li:nth-child(8) .active i, .down-doc .left ul li:nth-child(8):hover i { background-position-y: -3694px; } .down-doc .left ul li:nth-child(9) i { background-position-y: -3278px; } .down-doc .left ul li:nth-child(9) .active i, .down-doc .left ul li:nth-child(9):hover i { background-position-y: -3730px; } .down-dev-order { width: 1000px; margin: 0 auto 100px auto; border: 1px solid #e6e6e6; padding: 55px 70px 66px 67px; } .down-dev-order h1 { font-size: 24px; text-align: center; color: #272727; padding-bottom: 27px; border-bottom: 1px solid #ccc; } .down-dev-order h2 { font-size: 18px; color: #262626; } .down-dev-order font { padding-right: 5px; } .down-dev-order input, .down-dev-order select, .down-dev-order textarea { border: 1px solid #e6e6e6; } .down-dev-order input[type="text"] { width: 300px; height: 44px; line-height: 44px; padding: 15px; } .down-dev-order select { margin-right: 10px; width: 150px; height: 44px; line-height: 44px; } .down-dev-order ::-webkit-input-placeholder { font-size: 14px; color: #ccc; } .down-dev-order form > div:first-of-type { border-bottom: 1px solid #e6e6e6; padding-bottom: 50px; } .down-dev-order form > div:first-of-type h2 { padding: 36px 0; } .down-dev-order form > div:last-of-type h2 { padding: 36px 0 28px 0; } .down-dev-order form > div:last-of-type .item:nth-of-type(1) { -moz-box-pack: justify; justify-content: space-between; } .down-dev-order form > div:last-of-type .item:nth-of-type(1) p:first-child label { letter-spacing: 2px; } .down-dev-order form > div:last-of-type .item:nth-of-type(2) { padding-top: 20px; -moz-box-pack: justify; justify-content: space-between; } .down-dev-order form > div:last-of-type .item:nth-of-type(2) p:first-child label { letter-spacing: 8px; } .down-dev-order form > div .item { display: -moz-box; display: flex; } .down-dev-order form > div .item p > label, .down-dev-order form > div .item > label { padding-right: 15px; } .down-dev-order form > div .item:nth-of-type(1) ul { display: -ms-grid; display: grid; -ms-grid-rows: (1fr) [4]; grid-template-rows: repeat(4, 1fr); -ms-grid-columns: (1fr) [3]; grid-template-columns: repeat(3, 1fr); row-gap: 41px; -moz-column-gap: 25px; column-gap: 25px; } .down-dev-order form > div .item:nth-of-type(1) ul li{ display: flex; } .down-dev-order form > div .item:nth-of-type(1) ul li label { color: #666; vertical-align: middle; } .down-dev-order form > div .item:nth-of-type(2) { -moz-box-align: center; align-items: center; padding-top: 34px; } .down-dev-order form > div .item:nth-of-type(3) { margin-top: 20px; -moz-box-align: center; align-items: center; } .down-dev-order form > div .item:nth-of-type(3) > p { margin-bottom: 32px; } .down-dev-order form > div .item:nth-of-type(3) div dl { display: -moz-box; display: flex; } .down-dev-order form > div .item:nth-of-type(3) div dl dt { margin-right: 10px; } .down-dev-order form > div .item:nth-of-type(3) div dl dd { width: 100px; height: 100px; background-position-y: -542px; } .down-dev-order form > div .item:nth-of-type(3) div dl dd input { opacity: 0; width: 100%; height: 100%; cursor: pointer; } .down-dev-order form > div .item:nth-of-type(3) div p { padding-top: 15px; font-size: 12px; color: #999; } .down-dev-order form > div .item:nth-of-type(4) { margin-top: 30px; } .down-dev-order form > div .item:nth-of-type(4) textarea { width: 750px; height: 200px; padding: 15px; resize: none; font-family: "Microsoft YaHei"; } .down-dev-order form button { display: block; width: 320px; height: 60px; line-height: 60px; color: #fff; text-align: center; margin: auto; border: none; background-color: #6aa84f; margin-top: 70px; font-size: 18px; } .down-dev-order > div h2 { padding: 90px 0 12px 0; } .down-dev-order > div p { color: #666; padding: 7px 0; } .down-soft-order { width: 1000px; margin: 0 auto 100px auto; border: 1px solid #e6e6e6; padding: 55px 70px 66px 67px; } .down-soft-order h1 { font-size: 24px; text-align: center; color: #272727; padding-bottom: 27px; border-bottom: 1px solid #ccc; } .down-soft-order h2 { font-size: 18px; color: #262626; } .down-soft-order font { padding-right: 5px; } .down-soft-order input, .down-soft-order select, .down-soft-order textarea { border: 1px solid #e6e6e6; } .down-soft-order input[type="text"] { width: 300px; height: 44px; line-height: 44px; padding: 15px; } .down-soft-order select { margin-right: 10px; width: 150px; height: 44px; line-height: 44px; } .down-soft-order ::-webkit-input-placeholder { font-size: 14px; color: #ccc; } .down-soft-order form > div:first-of-type { border-bottom: 1px solid #e6e6e6; padding-bottom: 50px; } .down-soft-order form > div:first-of-type h2 { padding: 36px 0; } .down-soft-order form > div:last-of-type h2 { padding: 36px 0 28px 0; } .down-soft-order form > div:last-of-type .item:nth-of-type(1) { -moz-box-pack: justify; justify-content: space-between; } .down-soft-order form > div:last-of-type .item:nth-of-type(1) p:first-child label { letter-spacing: 2px; } .down-soft-order form > div:last-of-type .item:nth-of-type(2) { padding-top: 20px; -moz-box-pack: justify; justify-content: space-between; } .down-soft-order form > div:last-of-type .item:nth-of-type(2) p:first-child label { } .down-soft-order form > div .item { display: -moz-box; display: flex; } .down-soft-order form > div .item p > label, .down-soft-order form > div .item > label { padding-right: 15px; } .down-soft-order form > div .item:nth-of-type(1) ul { display: -ms-grid; display: grid; -ms-grid-rows: (1fr) [3]; grid-template-rows: repeat(3, 1fr); -ms-grid-columns: (1fr) [3]; grid-template-columns: repeat(3, 1fr); row-gap: 43px; -moz-column-gap: 48px; column-gap: 48px; } .down-soft-order form > div .item:nth-of-type(1) ul li label { color: #666; vertical-align: middle; } .down-soft-order form > div .item:nth-of-type(2) { -moz-box-align: center; align-items: center; padding-top: 34px; } .down-soft-order form > div .item:nth-of-type(3) { margin-top: 20px; -moz-box-align: center; align-items: center; } .down-soft-order form > div .item:nth-of-type(3) > p { margin-bottom: 32px; } .down-soft-order form > div .item:nth-of-type(3) div dl { display: -moz-box; display: flex; } .down-soft-order form > div .item:nth-of-type(3) div dl dt { margin-right: 10px; } .down-soft-order form > div .item:nth-of-type(3) div dl dd { width: 100px; height: 100px; background-position-y: -542px; } .down-soft-order form > div .item:nth-of-type(3) div dl dd input { opacity: 0; width: 100%; height: 100%; cursor: pointer; } .down-soft-order form > div .item:nth-of-type(3) div p { padding-top: 15px; font-size: 12px; color: #999; } .down-soft-order form > div .item:nth-of-type(4) { margin-top: 30px; } .down-soft-order form > div .item:nth-of-type(4) textarea { width: 750px; height: 200px; padding: 15px; resize: none; font-family: "Microsoft YaHei"; } .down-soft-order form button { display: block; width: 320px; height: 60px; line-height: 60px; color: #fff; text-align: center; margin: auto; border: none; background-color: #6aa84f; margin-top: 70px; font-size: 18px; } .down-soft-order > div h2 { padding: 90px 0 12px 0; } .down-soft-order > div p { color: #666; padding: 7px 0; } .solve { padding-bottom: 70px; } .solve .list { display: -ms-grid; display: grid; -ms-grid-rows: (1fr) [6]; grid-template-rows: repeat(6, 1fr); -ms-grid-columns: (1fr) [2]; grid-template-columns: repeat(2, 1fr); grid-gap: 30px; line-height: 1; } .solve .list > li { flex-basis: 50%; } .solve .list > li:hover a { box-shadow: 0 5px 20px 1px rgba(0, 0, 0, 0.2); } .solve .list > li:hover a > p { display: block; } .solve .list > li:hover a ul li:nth-child(1) span { color: #6aa84f; border-color: #6aa84f; } .solve .list > li:hover a ul li:nth-child(4) p:nth-child(1) span, .solve .list > li:hover a ul li:nth-child(4) p:nth-child(2) { background-color: #6aa84f; } .solve .list > li:hover a ul li:nth-child(4) p:nth-child(3) { border-color: #6aa84f; color: #6aa84f; } .solve .list > li a { position: relative; display: -moz-box; display: flex; background-color: #fff; border: 1px solid #e6e6e6; } .solve .list > li a > img { width: 265px; height: 360px; margin-right: 30px; } .solve .list > li a > p { display: none; position: absolute; width: 265px; height: 360px; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.6); } .solve .list > li a ul { width: 100%; display: -moz-box; display: flex; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; justify-content: space-around; padding-right: 30px; } .solve .list > li a ul li:nth-child(1) { display: -moz-box; display: flex; -moz-box-align: center; align-items: center; -moz-box-pack: justify; justify-content: space-between; } .solve .list > li a ul li:nth-child(1) .img-box{ width: 60px; height: 60px; border: 2px solid #6aa850; border-radius: 6px; display: block; position: relative; } .solve .list > li:hover a ul li:nth-child(1) .img-box{ background: #6aa850; } .solve .list > li a ul li:nth-child(1) .img-box img{ position: absolute; width: 50%; top: 50%; left: 50%; transform: translate(-50%,-50%); } .solve .list > li a ul li:nth-child(1) .img-box img:nth-of-type(2){ display: none; } .solve .list > li:hover a ul li:nth-child(1) .img-box img{ display: none; } .solve .list > li:hover a ul li:nth-child(1) .img-box img:nth-of-type(2){ display: block; } .solve .list > li a ul li:nth-child(1) span { color: #ccc; border-top: 4px solid #ccc; padding-top: 20px; } .solve .list > li a ul li:nth-child(2) { color: #262626; } .solve .list > li a ul li:nth-child(2) h1 { font-size: 24px; } .solve .list > li a ul li:nth-child(2) h2 { font-size: 16px; padding-top: 15px; } .solve .list > li a ul li:nth-child(3) { color: #404040; line-height: 24px; width: 210px; } .solve .list > li a ul li:nth-child(4) { display: -moz-box; display: flex; -moz-box-pack: justify; justify-content: space-between; -moz-box-align: center; align-items: center; } .solve .list > li a ul li:nth-child(4) p:nth-child(1) { display: -moz-box; display: flex; } .solve .list > li a ul li:nth-child(4) p:nth-child(1) span { width: 8px; height: 8px; background-color: #ccc; border-radius: 50%; } .solve .list > li a ul li:nth-child(4) p:nth-child(1) span:nth-child(2) { margin: 0 10px; } .solve .list > li a ul li:nth-child(4) p:nth-child(2) { width: 100%; height: 1px; background-color: #ccc; margin: 0 18px; } .solve .list > li a ul li:nth-child(4) p:nth-child(3) { font-size: 14px; color: #ccc; text-transform: uppercase; } .solve .list > li:nth-child(1) i { background-position-y: -4769px; } .solve .list > li:nth-child(1):hover i { background-position-y: -4839px; } .solve .list > li:nth-child(2) i { background-position-y: -4351px; } .solve .list > li:nth-child(2):hover i { background-position-y: -5259px; } .solve .list > li:nth-child(3) i { background-position-y: -4001px; } .solve .list > li:nth-child(3):hover i { background-position-y: -4909px; } .solve .list > li:nth-child(4) i { background-position-y: -4421px; } .solve .list > li:nth-child(4):hover i { background-position-y: -5329px; } .solve .list > li:nth-child(5) i { background-position-y: -4072px; } .solve .list > li:nth-child(5):hover i { background-position-y: -4979px; } .solve .list > li:nth-child(6) i { background-position-y: -4491px; } .solve .list > li:nth-child(6):hover i { background-position-y: -5399px; } .solve .list > li:nth-child(7) i { background-position-y: -4143px; } .solve .list > li:nth-child(7):hover i { background-position-y: -5049px; } .solve .list > li:nth-child(8) i { background-position-y: -4561px; } .solve .list > li:nth-child(8):hover i { background-position-y: -5469px; } .solve .list > li:nth-child(9) i { background-position-y: -4213px; } .solve .list > li:nth-child(9):hover i { background-position-y: -5119px; } .solve .list > li:nth-child(10) i { background-position-y: -4631px; } .solve .list > li:nth-child(10):hover i { background-position-y: -5539px; } .solve .list > li:nth-child(11) i { background-position-y: -4281px; } .solve .list > li:nth-child(11):hover i { background-position-y: -5189px; } .solve .list > li:nth-child(12) i { background-position-y: -4699px; } .solve .list > li:nth-child(12):hover i { background-position-y: -5609px; } .solve-details { display: -moz-box; display: flex; margin-bottom: 100px; } .solve-details .left, .solve-details .right .container, .solve-details .right .pro { border: 1px solid #e6e6e6; } .solve-details .left { width: 240px; height: 875px; margin-right: 20px; line-height: 1; padding: 30px 25px 0 25px; } .solve-details .left h1 { font-size: 20px; color: #404040; border-left: 4px solid #6aa84f; padding-left: 10px; margin-bottom: 15px; } .solve-details .left ul li a { display: -moz-box; display: flex; -moz-box-align: center; align-items: center; color: #666; padding: 24px 0 15px 0; border-bottom: 1px solid #e6e6e6; padding-left: 15px; } .solve-details .left ul li a p{ line-height: 25px; } .solve-details .left ul li a .img-box{ width: 25px; height: 25px; margin-right: 10px; min-width: 25px; } .solve-details .left ul li a .img-box img{ width: 100%; height: 100%; } .solve-details .left ul li a .img-box img:nth-of-type(2){ display: none; } .solve-details .left ul li a.active, .solve-details .left ul li a:hover { background-color: #6aa84f; font-weight: 700; color: #fff; } .solve-details .left ul li a.active img, .solve-details .left ul li a:hover img{ display: none; } .solve-details .left ul li a.active .img-box img:nth-of-type(2), .solve-details .left ul li a:hover .img-box img:nth-of-type(2){ display: block; } .solve-details .right { width: 940px; } .solve-details .right img{ max-width: 100%; height: auto !important; } .solve-details .right .container { padding: 50px 70px; } .solve-details .right .container > h1 { text-align: center; } .solve-details .right .container > ul { margin: 30px 0; display: -moz-box; display: flex; -moz-box-align: center; align-items: center; } .solve-details .right .container > ul li:first-child { -moz-box-flex: 1; flex: 1; width: 100%; height: 1px; border-top: 1px solid #ccc; } .solve-details .right .container > ul li:last-child a { width: 30px; height: 30px; } .solve-details .right .container > ul li:last-child a:nth-child(1) { background-position-y: -777px; } .solve-details .right .container > ul li:last-child a:nth-child(2) { background-position-y: -697px; } .solve-details .right .container > ul li:last-child a:nth-child(3) { background-position-y: -737px; } .solve-details .right .pro { margin-top: 20px; padding: 40px 30px; } .solve-details .right .pro .title { display: -moz-box; display: flex; -moz-box-pack: justify; justify-content: space-between; -moz-box-align: center; align-items: center; border-bottom: 1px solid #e6e6e6; padding-bottom: 20px; } .solve-details .right .pro .title h1 { font-size: 20px; color: #272727; } .solve-details .right .pro .title a { color: #999; } .solve-details .right .pro ul { margin-top: 20px; display: -moz-box; display: flex; -moz-box-pack: justify; justify-content: space-between; text-align: center; flex-wrap: wrap; } .solve-details .right .pro ul li a { position: relative; display: block; border: 1px solid #e6e6e6; } .solve-details .right .pro ul li a > img { width: 205px; height: 220px !important; object-fit: cover; } .solve-details .right .pro ul li a span { display: none; position: absolute; top: 0; left: 0; width: 205px; height: 220px; background-color: rgba(0, 0, 0, 0.6); } .solve-details .right .pro ul li a > p { color: #262626; border-top: none; line-height: 50px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 10px; } .solve-details .right .pro ul li a:hover span { display: block; } .solve-details .right .pro ul li a:hover p { color: white; background-color: #6aa84f; } .page ul { display: -moz-box; display: flex; -moz-box-pack: center; justify-content: center; font-size: 14px; } .page ul li { padding: 0 5px; } .page ul li a { display: block; color: #999; border: 1px solid #ccc; border-radius: 5px; padding: 0 10px; height: 35px; line-height: 35px; overflow: hidden; } .page ul li.active a, .page ul li:hover a { color: #fff !important; background-color: #6aa84f; border-color: #6aa84f; } .crumbs { width: 100%; height: 110px; background: url(../images/location-bg.png) no-repeat; background-size: cover; margin-bottom: 10px; } .crumbs > div { display: -moz-box; display: flex; -moz-box-pack: justify; justify-content: space-between; } .crumbs > div .location { display: -moz-box; display: flex; padding-top: 36px; font-size: 0; } .crumbs > div .location li { display: -moz-box; display: flex; height: 38px; line-height: 38px; } .crumbs > div .location li:first-child { background: url(../images/crumbs-gary-1.png) center right no-repeat; margin-right: -10px; } .crumbs > div .location li:first-child a { padding: 0 19px 0 20px; margin-right: 16px; } .crumbs > div .location li:first-child a i { width: 18px; height: 18px; background-position-y: -514px; margin-right: 10px; } .crumbs > div .location li:not(:first-child):not(:last-child) { background: url(../images/crumbs-gary-3.png) center left no-repeat; margin-right: 6px; } .crumbs > div .location li:not(:first-child):not(:last-child) a { margin-left: 15px; } .crumbs > div .location li:not(:first-child):not(:last-child) a::after { display: inline-block; width: 16px; height: 38px; background: url(../images/crumbs-gary-1.png) center right no-repeat; vertical-align: middle; transform: translateX(16px); content: ""; } .crumbs > div .location li:not(:first-child):not(:last-child) span { padding-left: 18px; } .crumbs > div .location li a { display: -moz-box; display: flex; -moz-box-align: center; align-items: center; color: #404040; background: url(../images/crumbs-gary-2.png) repeat; font-size: 15px; } .crumbs > div .location li:last-of-type { background: url(../images/crumbs-active-1.png) center left no-repeat; } .crumbs > div .location li:last-of-type a { background: url(../images/crumbs-active-2.png) repeat; color: #fff; margin-left: 16px; padding: 0 18px 0 17px; } .crumbs > div .location li:last-of-type a::after { display: none; } .crumbs > div .location li:last-of-type::after { display: inline-block; width: 16px; height: 38px; background: url(../images/crumbs-active-3.png) center right no-repeat; vertical-align: middle; content: ""; } .crumbs > div .tab-nav { display: -moz-box; display: flex; padding-top: 36px; } .crumbs > div .tab-nav li a { display: block; width: 120px; height: 40px; line-height: 40px; color: #262626; background-color: #f0f0f0; text-align: center; } .crumbs > div .tab-nav li a.active, .crumbs > div .tab-nav li a:hover { background-color: #6aa84f; color: #fff; } .crumbs > div .tab-nav li:nth-child(2) { padding: 0 20px; } .sidebar { position: fixed; top: 50%; right: 0; transform: translateY(-50%); width: 54px; z-index: 9999; } .sidebar ul { height: 100%; text-align: center; } .sidebar ul li { position: relative; border: 1px solid #f0f0f0; padding: 13px 0; background-color: #fff; } .sidebar ul li:not(:last-child) { border-bottom: none; } .sidebar ul li i { width: 26px; height: 26px; } .sidebar ul li div { display: none; position: absolute; top: -1px; background-color: #78bc27; font-size: 14px; color: #fff; line-height: 1; white-space: nowrap; } .sidebar ul li.online i { background-position-y: -444px; } .sidebar ul li.online div { right: 53px; padding: 20px 17px; } .sidebar ul li.online:hover i { background-position-y: -338px; } .sidebar ul li.cart i { background-position-y: -192px; } .sidebar ul li.cart div { left: -91px; padding: 20px 24px; } .sidebar ul li.cart:hover i { background-position-y: top; } .sidebar ul li.project i { background-position-y: -229px; } .sidebar ul li.project div { right: 53px; padding: 20px 17px; } .sidebar ul li.project:hover i { background-position-y: -372px; } .sidebar ul li.cooper i { background-position-y: -265px; } .sidebar ul li.cooper div { top: -56px; left: -117px; padding: 15px 21px 16px 15px; } .sidebar ul li.cooper div img { width: 80px; height: 80px; } .sidebar ul li.cooper div p { padding-top: 15px; } .sidebar ul li.cooper:hover i { background-position-y: -477px; } .sidebar ul li.top i { background-position-y: -301px; } .sidebar ul li.top div { right: 53px; padding: 20px 17px; } .sidebar ul li.top:hover i { background-position-y: -408px; } footer .nav { background-color: #333; padding-top: 50px; padding-bottom: 67px; border-bottom: 1px solid #666; } footer .nav .w1200 { display: -moz-box; display: flex; -moz-box-pack: justify; justify-content: space-between; } footer .nav .w1200 > div { display: -moz-box; display: flex; width: 100%; text-align: center; } footer .nav .w1200 > div::before { display: inline-block; width: 1px; height: 100%; background: url(../images/line.png) no-repeat; content: ""; } footer .nav .w1200 > div:nth-child(4) { font-size: 14px; } footer .nav .w1200 > div:nth-child(4) ul { margin: 0 auto; } footer .nav .w1200 > div:nth-child(4) ul i { width: 20px; height: 20px; margin-right: 10px; } footer .nav .w1200 > div:nth-child(4) ul li:nth-child(1) i { background-position-y: -121px; } footer .nav .w1200 > div:nth-child(4) ul li{ margin-bottom: 20px; } footer .nav .w1200 > div:nth-child(4) ul li:nth-child(2):hover div { display: block; } footer .nav .w1200 > div:nth-child(4) ul li:nth-child(2) i { background-position-y: -60px; } footer .nav .w1200 > div:nth-child(4) ul li:nth-child(2) div { display: none; position: absolute; left: -20px; top: -232px; } footer .nav .w1200 > div:nth-child(4) ul li:nth-child(2) div .qrcode { border: 2px solid #6aa84f; border-bottom: none; background-color: #fff; padding: 11px 15px 0 11px; } footer .nav .w1200 > div:nth-child(4) ul li:nth-child(2) div .qrcode img { width: 130px; height: 130px; } footer .nav .w1200 > div:nth-child(4) ul li:nth-child(2) div .qrcode span { display: block; padding: 16px 0 16px 0; line-height: 1; } footer .nav .w1200 > div:nth-child(4) ul li:nth-child(2) div h1 { height: 45px; line-height: 45px; color: #fff; font-size: 16px; background-color: #6aa84f; } footer .nav .w1200 > div:nth-child(4) ul li:nth-child(3) i { background-position-y: -91px; } footer .nav .w1200 > div:nth-child(4) ul li a { display: flex; width: 120px; height: 40px; line-height: 40px; color: #f9f9f9; background-color: #666; justify-content: center; align-items: center; } footer .nav .w1200 > div:nth-child(4) ul li a:hover { background-color: #6aa84f; } footer .nav .w1200 > div:nth-child(5) { text-align: left; } footer .nav .w1200 > div:nth-child(5) > div { padding-top: 0; padding-left: 64px; } footer .nav .w1200 > div:nth-child(5) > div > p { color: #999; } footer .nav .w1200 > div:nth-child(5) > div .text { padding-top: 30px; font-size: 16px; } footer .nav .w1200 > div:nth-child(5) > div .text::after { display: block; width: 30px; height: 1px; background-color: #999; margin-top: 10px; content: ""; } footer .nav .w1200 > div:nth-child(5) > div .tel { font-weight: 700; font-size: 30px; padding: 10px 0 20px 0; } footer .nav .w1200 > div:nth-child(5) > div > div { display: -moz-box; display: flex; -moz-box-align: center; align-items: center; color: #666; font-size: 14px; } footer .nav .w1200 > div:nth-child(5) > div > div i { width: 30px; height: 30px; background-position-y: -152px; } footer .nav .w1200 > div:nth-child(5) > div > div div:nth-child(2) { padding: 0 26px 0 15px; display: flex; align-items: center; justify-content: space-between; width: 220px; } footer .nav .w1200 > div > div { width: 100%; } footer .nav .w1200 > div > div > p { font-size: 18px; color: #ccc; } footer .nav .w1200 > div > div > p + ul li:first-child { padding-top: 16px; } footer .nav .w1200 > div > div > p + ul li:not(:first-child) { padding-top: 11px; } footer .nav .w1200 > div > div > p + ul li a { font-size: 14px; color: #999; } footer .copyright { background-color: #262626; height: 60px; line-height: 60px; text-align: center; font-size: 14px; } footer .copyright * { color: #666; } footer .copyright > a { color: #999; padding-left: 70px; } .main-header{ position: fixed; top: 0; z-index: 9999; width: 100%; } .main-header .main-nav{ width: 100%; background: rgba(0,0,0,.5); padding: 0 calc((100% - 1200) /2) !important; } .popup-box{ position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,.5); z-index: 99999999; display: none; } .popup-box *{ box-sizing: border-box; } .popup-box form{ display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #FFFFFF; width: 900px; height: 580px; padding: 40px 60px; } .popup-box form .input-group{ width: 100%; margin-bottom: 15px; display: flex; justify-content: space-between; } .popup-box form .input-group .input-item{ width: 100%; display: flex; justify-content: space-between; } .popup-box form .input-group .input-text{ width: 80px; font-size: 16px; color: #262626; text-align-last: justify; position: relative; height: 44px; display: flex; align-items: center; } .popup-box form .input-group .input-text.must:before{ content: '*'; color: #DC000C; font-size: 16px; position: absolute; top: 50%; transform: translateY(-50%); left: -10px; line-height: 44px; } .popup-box form .input-group .input-item .input-content{ width: 670px; line-height: 44px; font-size: 18px; color: #262626; display: flex; justify-content: space-between; } .popup-box form .input-group input,.popup-box form .input-group select{ width: 100%; height: 100%; line-height: 44px; border: 1px solid #E6E6E6; box-sizing: border-box; padding-left: 15px; font-size: 14px; } .popup-box form .input-group .input-item2{ height: 44px; display: flex; justify-content: space-between; } .popup-box form .input-group .input-item2 .input-content{ width: 260px; height: 44px; margin-left: 30px; } .popup-box form .input-group .input-item2 .input-content2{ border: 1px solid #E6E6E6; display: flex; margin-left: 30px; } .popup-box form .input-group .input-item2 .input-content2 div{ display: block; width: 65px; height: 44px; text-align: center; line-height: 44px; font-size: 20px; cursor: pointer; } .popup-box form .input-group .input-item2 .input-content2 input{ width: 90px; border-right: 1px solid #E6E6E6; border-left: 1px solid #E6E6E6; border-top: none; border-bottom: none; padding: 0; text-align: center; } .popup-box form .input-group .input-content3{ height: 44px; width: 670px; display: flex; justify-content: space-between; } .popup-box form .input-group .input-content3 select{ width: 120px; display: block !important; box-sizing: border-box; } .popup-box form .input-group .input-content3 input{ width: 280px; } .popup-box form .input-group textarea{ width: 670px; height: 120px; padding: 15px; border: 1px solid #E6E6E6; font-size: 14px; } .popup-box form .input-group button{ width: 310px; height: 60px; border: 1px solid #6AA84F; text-align: center; line-height: 60px; font-size: 18px; font-weight: 400; color: #6AA84F; background: none; } .popup-box form .input-group button[type='submit']{ background: #6AA84F; color: #FFF; } .popup-box form .close{ background: url("../images/close.png"); width: 50px; height: 50px; position: absolute; top: -25px; right: -25px; } .cart{ position: relative; } .cart .ey_4a1120d67cb92f474dda68b190cf0004{ display: block !important; position: absolute; top: 0; right: 0; width: 18px; height: 18px; line-height: 18px; text-align: center; background-color: #d81b00; border-radius: 50%; color: #FFF; } .recommend-content{ width: 100%; position: relative; } .recommend-content .swiper-button-prev{ left: -30px; color: grey; transform: scale(.8); } .recommend-content .swiper-button-next{ right: -30px; color: grey; transform: scale(.8); } #c-home-tips { display: none; position: fixed; z-index: 890; bottom: 0; left: 0; width: 100%; background: rgb(245, 245, 245); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); } #c-home-tips .c-wrap { display: flex; align-items: center; justify-content: space-between; position: relative; padding: 10px 0; line-height: 24px; text-align: center; } #c-home-tips .c-wrap p { margin-right: 30px; text-align: left; } #c-home-tips .c-wrap .c-common-btn1 { margin-right: 20px; flex-shrink: 0; cursor: pointer; width: 100px; height: 40px; line-height: 40px; border: 1px solid #6aa84f; } #c-home-tips .c-wrap .c-common-btn1:nth-of-type(1){ background: #6aa84f; line-height: 40px; color: #FFF; } #c-home-tips .c-wrap a { color: #6aa84f; } #c-home-tips .c-wrap a:hover { text-decoration: underline; } .online-shop{ padding: 180px 0; } .online-shop .item{ padding: 64px 46px; border: 1px solid #252626; border-radius: 36px; width: 1080px; height: 208px; display: block; } .online-shop .item .box{ display: flex; height: 100%; align-items: flex-end; } .online-shop .item .box img{ height: 100%; width: auto; } .online-shop .item .box p{ font-size: 36px; font-weight: bold; align-items: center; color: #252626; line-height: 1; margin-left: 40px; } .online-shop .item .box button{ width: 160px; height: 56px; background: #6AA84F; color: #fff; font-size: 16px; text-align: center; line-height: 52px; margin-left: auto; border: none; outline: none; }