select::-ms-expand { display: none } .left { float: left } .right { float: right } .bgc { background-size: cover; background-repeat: no-repeat; background-position: center } .main { width: 100%; overflow: hidden; height: auto; position: relative } .table { width: 100%; height: 100%; display: table } .table .table-cell { width: 100%; height: 100%; vertical-align: middle; display: table-cell } .w1200 { width: 1200px; max-width: 92%; margin: 0 auto; position: relative; z-index: 5 } .fz50 { font-size: 50px; line-height: 52px; color: #000; font-weight: bold } .fz30 { font-size: 36px; line-height: 38px; font-weight: bold } @media (max-width: 1366px) { .fz50 { font-size: 40px; line-height: 42px } .fz30 { font-size: 30px; line-height: 32px } } @media (max-width: 1200px) { .fz50 { font-size: 30px; line-height: 32px } .fz30 { font-size: 24px; line-height: 26px } } @media (max-width: 768px) { .fz50 { font-size: 20px; line-height: 22px } .fz30 { font-size: 18px; line-height: 20px } } .headerBox { width: 100%; height: 80px } @media (max-width: 1024px) { .headerBox { height: 50px } } .header { width: 100%; height: 80px; background-color: #fff; position: fixed; top: 0; left: 0; z-index: 20; box-shadow: 0 0 40px rgba(0,0,0,0.3) } .header .lan { padding-left: 30px; font-size: 12px; line-height: 20px; display: block; float: left; margin-top: 30px; background-position: left center; background-repeat: no-repeat; background-image: url("/img/lan.png"); color: #dc0202; display: none; } .header .logo { width: 60px; height: auto; float: right; margin-top: 14px; display: block; } .header .nav { float: left; margin-left: 0 !important; } .header .nav ul li { float: left; margin-right: 55px; position: relative } .header .nav ul li .tits { font-size: 16px; line-height: 80px; color: #000; padding-left: 20px; background-position: left center; background-repeat: no-repeat; display: block } .header .nav ul li .tits.t { background-image: url("../img/dow.png") } .header .nav ul li dl { width: 160px; height: auto; top: 76px; left: 50%; margin-left: -80px; background-color: #fff; border-top: 4px solid #dc0202; position: absolute; padding: 8px 0; display: none; box-shadow: 0 5px 10px rgba(0,0,0,0.2) } .header .nav ul li dl dd a { width: calc(100% - 20px); display: block; margin: 0 auto; font-size: 14px; line-height: 40px; color: #666; border-bottom: 1px solid #fff; text-align: center } @media (min-width: 1024px) { .header .nav ul li dl dd:hover a { border-color: #dc0202; color: #dc0202 } } @media (min-width: 1024px) { .header .nav ul li:hover .tits { color: #dc0202; } .header .nav ul li:hover .tits.t { background-image: url("../img/dow_h.png") !important } .header .nav ul li:hover dl { display: block } } .header .nav ul li.on .tits { color: #dc0202; } .header .nav ul li.on .tits.t { background-image: url("../img/dow_h.png") !important } .header .navClick { width: 22px; height: 18px; margin-top: 16px; float: right; display: none; display: none } .header .navClick span { width: 100%; height: 2px; background-color: #333; display: block; position: relative; transition: .3s; -webkit-transition: .3s } .header .navClick span:nth-child(1) { margin-bottom: 6px } .header .navClick span:nth-child(2) { margin-bottom: 6px } .header .navClick.on span:nth-child(1) { transform: rotate(45deg); -webkit-transform: rotate(45deg); top: 8px; right: 0px } .header .navClick.on span:nth-child(2) { display: none } .header .navClick.on span:nth-child(3) { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); top: 0; right: 0 } @media (max-width: 1200px){ .header .nav ul li{ margin-right: 33px; } } @media (max-width: 1024px) { .header { height: 50px } .header .lan { float: right; margin-top: 15px; margin-right: 15px } .header .nav { display: none; width: 100%; height: calc(100% - 50px); top: 50px; background-color: #fff; position: fixed; left: 0; padding-left: 0; padding-bottom: 20px; margin-left: 0; overflow-y: scroll; border-top: 1px solid #ccc } .header .nav ul { padding-top: 20px; width: 92%; margin: 0 auto } .header .nav ul li { width: 100%; margin: 0 0 15px } .header .nav ul li .tits { display: block; width: 100%; font-size: 18px; line-height: 36px; color: #322e31 !important; border-bottom: 1px solid #e5e5e5; text-align: left; padding-left: 0; background: none !important } .header .nav ul li dl { display: block; width: 100%; position: relative; top: auto; left: auto; border-top: none; box-shadow: none; margin-left: 0; padding: 10px 0 0 } .header .nav ul li dl dd { float: left; display: inline-block; margin-right: 15px } .header .nav ul li dl dd a { font-size: 14px; line-height: 30px; width: auto; border-bottom: none } .header .nav ul li.on .tits { background-image: none !important } .header .logo { float: left; width: 40px; margin-top: 7px } .header .navClick { display: block } .header .nav ul li.on .tits.t{ background: none !important; } } .index-banner { width: 100%; height: auto; position: relative; overflow: hidden } .index-banner .video{ width: 100%; height: 100%; position: absolute !important; top: 0; left: 0; z-index: 10; background-color: #fff; } .index-banner .video .vidbacking-active-block-back{ height: 100%; object-fit: fill; } .index-banner .list ul li{ width: 100%; position: relative; } .index-banner .list ul li .bg{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-size: cover; background-repeat: no-repeat; background-image: url('../img/p_bg1.png'); } .index-banner .list .btns{ width: 100%; z-index: 10; text-align: center; position: absolute; bottom:35px; left: 0; } .index-banner .list .btns span{ margin: 0 8px; width: 8px; height: 8px; border-radius: 100%; display: inline-block; opacity: 0.3; background-color: #000; vertical-align: middle; } .index-banner .list .btns span.swiper-pagination-bullet-active{ width: 12px; height: 12px; background-color: #dc0202; box-shadow: 0 2px 6px rgba(77,18,18,0.39); opacity: 1; } .index-banner .box { width: 100%; height: 100%; top: 0; left: 0; position: absolute; background-size: cover; background-repeat: no-repeat; background-position: center; /*background-image: url("../img/banner_bg.png");*/ z-index: 15; } .index-banner .box .con { width: 100%; text-align: center; position: absolute; top: 50%; left: 0; transform: translateY(-50%); text-align: center; color: #fff } .index-banner .box .con .tits { color: #fff; font-size: 54px; line-height: 56px; } @media (max-width: 1366px){ .index-banner .box .con .tits { font-size: 44px; line-height: 46px; } } @media (max-width: 1200px){ .index-banner .box .con .tits { font-size: 34px; line-height: 36px; } } @media (max-width: 768px){ .index-banner .box .con .tits { font-size: 22px; line-height: 24px; } } .index-banner .box .con .tits span { color: #dc0202; position: relative } .index-banner .box .con .tits span:after { width: 8px; height: 8px; border-radius: 100%; border: 3px solid #dc0202; content: ''; position: absolute; top: -2px; left: -20px; display: none; } .index-banner .box .con .tit { font-size: 32px; line-height: 34px; font-weight: bold; margin-top: 25px } .index-banner .box .con .btn{ width: 100%; text-align: center; font-size: 0; margin-top: 30px; } .index-banner .box .con .btn a{ width: 133px; height: 46px; text-align: center; font-size: 16px; line-height: 44px; color: #dc0202; box-sizing: border-box; border-radius: 3px; border: 1px solid #fff; display: inline-block; margin-right: 30px; transition: all .5s; margin: 0 10px; } @media (min-width: 1024px){ .index-banner .box .con .btn a:hover{ background-color: #fff; color: #dc0202; border-color: #fff; } } @media (max-width: 768px){ .index-banner .box .con .btn{ margin-top: 15px; } .index-banner .box .con .btn a{ width: 120px; height: 34px; line-height: 32px; font-size: 14px; } } .index-banner .box .con .tit1 { color: #fff } .index-banner .box .con .tit1 span { position: relative } .index-banner .box .con .tit1 span:after { width: 8px; height: 8px; border-radius: 100%; border: 3px solid #dc0202; content: ''; position: absolute; top: -2px; left: -20px; display: none; } .index-banner .box .con .tit2 { font-size: 16px; line-height: 16px; color: #fff; margin-top: 30px } @media (max-width: 1366px) { .index-banner .box .con .tit { font-size: 26px; line-height: 28px } } @media (max-width: 1200px) { .index-banner .box .con .tit { font-size: 20px; line-height: 22px } } @media (max-width: 768px) { .index-banner img { width: 140%; margin-left: -20% } .index-banner .box .con .tit1 span:after { width: 6px; height: 6px; border-width: 2px; top: 0; left: -14px } .index-banner .box .con .tit2 { font-size: 14px; line-height: 14px; margin-top: 10px } .index-banner .box .con .tits span:after { width: 6px; height: 6px; border-width: 2px; left: -14px; top: 0 } .index-banner .box .con .tit { font-size: 18px; line-height: 20px; margin-top: 10px } } .index-porduct { margin: 9% auto; position: relative } .index-porduct .content { position: absolute; top: 0; left: 0; width: 100%; height: 100% } .index-porduct .content .w1200 { height: 100% } .index-porduct .content .w1200 .conLeft { width: 38.3%; float: left } .index-porduct .content .w1200 .conLeft .title span { color: #dc0202; margin-left: 0 !important; position: relative } .index-porduct .content .w1200 .conLeft .title span:after { width: 8px; height: 8px; border-radius: 100%; border: 3px solid #dc0202; content: ''; position: absolute; top: -2px; left: -28px; display: none; } .index-porduct .content .w1200 .conLeft .tabs { margin-top: 16.3% } .index-porduct .content .w1200 .conLeft .tabs a { display: block; padding-left: 27px; font-size: 16px; line-height: 32px; color: #bbb; position: relative } .index-porduct .content .w1200 .conLeft .tabs a span { font-weight: bold; font-family: LT } .index-porduct .content .w1200 .conLeft .tabs a:after { width: 8px; height: 8px; border-radius: 100%; border: 3px solid #dc0202; content: ''; position: absolute; top: 9px; left: 0; display: none } .index-porduct .content .w1200 .conLeft .tabs a.on { font-size: 24px; color: #191919 } .index-porduct .content .w1200 .conLeft .tabs a.on span { color: #dc0202 } .index-porduct .content .w1200 .conLeft .tabs a.on:after { display: none; } .index-porduct .content .w1200 .conLeft .line { width: calc(100% + 2000px); height: 1px; background-color: #f0f0f0; margin-left: 27px; margin-top: 25px } .index-porduct .content .w1200 .conLeft .itemBox { margin-top: 30px } .index-porduct .content .w1200 .conLeft .itemBox .item { display: none } .index-porduct .content .w1200 .conLeft .itemBox .item .con { width: calc(100% - 27px); padding-left: 27px } .index-porduct .content .w1200 .conLeft .itemBox .item .con .tits { font-size: 24px; line-height: 26px; color: #000; font-weight: bold } .index-porduct .content .w1200 .conLeft .itemBox .item .con .tit { font-size: 16px; line-height: 26px; color: #666; margin-top: 15px; text-align: justify; max-height: 156px; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .index-porduct .content .w1200 .conLeft .itemBox .item .tags { width: 100%; margin-top: 58px } .index-porduct .content .w1200 .conLeft .itemBox .item .tags a { width: 133px; height: 46px; text-align: center; font-size: 16px; line-height: 44px; color: #dc0202; box-sizing: border-box; border-radius: 3px; border: 1px solid #dc0202; display: block; float: left; margin-right: 30px; transition: all .5s } @media (min-width: 1024px) { .index-porduct .content .w1200 .conLeft .itemBox .item .tags a:hover { background-color: #dc0202; color: #fff } } .index-porduct .content .w1200 .conLeft .itemBox .item .tags .t { float: left; position: relative; cursor: pointer } .index-porduct .content .w1200 .conLeft .itemBox .item .tags .t .tt { width: 133px; height: 46px; text-align: center; font-size: 0; box-sizing: border-box; border-radius: 3px; border: 1px solid #eaeaea } .index-porduct .content .w1200 .conLeft .itemBox .item .tags .t .tt span { font-size: 16px; line-height: 44px; color: #999; padding-right: 36px; display: inline-block; background-position: right center; background-repeat: no-repeat; background-image: url("../img/index_icon1.png") } .index-porduct .content .w1200 .conLeft .itemBox .item .tags .t .tt span i { font-family: LT; font-weight: bold } .index-porduct .content .w1200 .conLeft .itemBox .item .tags .t .ewm { width: 133px; height: 146px; background-color: #fff; box-sizing: border-box; border-radius: 3px; border: 1px solid #eaeaea; position: absolute; top: 0; right: 0; transform-origin: top right; transform: scale(0); opacity: 0; transition: all .5s; z-index: 100 } .index-porduct .content .w1200 .conLeft .itemBox .item .tags .t .ewm .tits { text-align: center; font-size: 16px; line-height: 18px; color: #000; padding-top: 17px } .index-porduct .content .w1200 .conLeft .itemBox .item .tags .t .ewm img { width: 67px; display: block; margin: 24px auto 0 } @media (min-width: 1024px) { .index-porduct .content .w1200 .conLeft .itemBox .item .tags .t:hover .ewm { transform: scale(1); opacity: 1 } } .index-porduct .listBox .btns { width: 100%; margin-top: 20px; } .index-porduct .listBox .btns .btn { float: left; width: 86px } .index-porduct.box2 .listBox .btns .btn{ float: right; } .index-porduct.box2 .listBox .btns .num{ float: right; margin-left: 0; margin-right: 60px; } .index-porduct .listBox .btns .btn a { width: 32px; height: 32px; display: block; float: left; background-position: left center; background-repeat: no-repeat } .index-porduct .listBox .btns .btn a.prev { background-image: url("../img/prev.png") } .index-porduct .listBox .btns .btn a.next { background-image: url("../img/next.png"); background-position: right center; float: right } @media (min-width: 1024px) { .index-porduct .listBox .btns .btn a:hover.prev { background-image: url("../img/prev_h.png") } .index-porduct .listBox .btns .btn a:hover.next { background-image: url("../img/next_h.png") } } .index-porduct .listBox .btns .num { font-size: 16px; line-height: 18px; color: #aeaeae; font-weight: bold; float: left; padding-top: 14px; margin-left: 60px; position: relative } .index-porduct .listBox .btns .num span { color: #dc0000; margin-right: 34px } .index-porduct .listBox .btns .num em { width: 3px; height: 16px; bottom: 1px; left: 50%; margin-left: -1.5px; background-color: #aeaeae; display: block; position: absolute } .index-porduct .listBox { width: 48.7%; float: right; overflow: hidden; position: relative; z-index: 15 } .index-porduct .listBox .list { overflow: inherit; width: 100%; position: relative } .index-porduct .listBox .list ul { width: 100% } .index-porduct .listBox .list ul li { width: 34.7%; margin-right: 9.6%; cursor: pointer; } .index-porduct .listBox .list ul li:last-child { margin-right: 0 } .index-porduct .listBox .list ul li img { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%) } .index-porduct .listBox .list ul li span { font-size: 24px; line-height: 18px; color: #aeaeae; font-family: LT; font-weight: bold; background-color: #fff; position: absolute; bottom: 0; right: 0; padding-left: 9px; padding-top: 23px } .index-porduct .listBox .list ul li span em { font-size: 16px; margin-right: 4px } .index-porduct .listBox .list ul li:after { width: 8px; height: 8px; border-radius: 100%; border: 3px solid #dc0202; content: ''; position: absolute; top: 18px; left: 18px; display: none } .index-porduct .listBox .list ul li.swiper-slide-active img { -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%) } .index-porduct .listBox .list ul li.swiper-slide-active span em { color: #dc0000 } .index-porduct .listBox .list ul li.swiper-slide-active:after { display: none; } .index-porduct .listBox .list:after { width: 2000px; height: 49%; position: absolute; bottom: 44px; left: 0; background-color: #f0f0f0; content: ''; display: none !important; } .index-porduct.box2 .content .conLeft { float: right } .index-porduct.box2 .content .conLeft .title { text-align: right; line-height: 74px } .index-porduct.box2 .content .conLeft .title span { margin-left: 0 } .index-porduct.box2 .content .conLeft .line { background-color: #fff; margin-left: -2000px } .index-porduct.box2 .content .conLeft .itemBox .item .con .tit { margin-top: 0 } .index-porduct.box2 .content .conLeft .itemBox .item .tags a { float: right; margin-right: 0 } .index-porduct.box2 .content .btns { left: auto; right: 0 } .index-porduct.box2 .content .btns .btn { float: right } .index-porduct.box2 .content .btns .num { float: right } .index-porduct.box2 .listBox { width: 44.1%; float: left } .index-porduct.box2 .listBox .list ul li { width: 47.7%; margin-left: 10.6%; margin-right: 0; cursor: pointer; } .index-porduct.box2 .listBox .list ul li span { background-image: url("../img/index_bg1.jpg") } .index-porduct.box2 .listBox .list:after { background-color: #fff } .index-porduct.pp .listBox { float: left } .index-porduct.pp .listBox .list ul li { margin-left: 9.6%; margin-right: 0 } .index-porduct.pp .content .conLeft { float: right } .index-porduct.pp .content .btns { left: auto; right: 0 } .index-porduct.pp .content .btns .btn { float: right } .index-porduct.pp .content .btns .num { float: right } @media (max-width: 1690px){ .index-porduct .content .w1200 .conLeft .itemBox .item .tags{ margin-top: 30px; } } @media (max-width: 1580px) { .index-porduct .content .w1200 .conLeft .tabs { margin-top: 12% } .index-porduct .content .w1200 .conLeft .line { margin-top: 15px } .index-porduct .content .w1200 .conLeft .itemBox { margin-top: 20px } .index-porduct .content .w1200 .conLeft .itemBox .item .tags { margin-top: 32px } } @media (max-width: 1470px){ .index-porduct .listBox .list ul li { width: 39%; margin-right: 4% } } @media (max-width: 1366px) { .index-porduct .listBox .list ul li { width: 43%; margin-right: 4% } .index-porduct.box2 .content .conLeft .title { line-height: 52px } } @media (max-width: 1200px) { .index-porduct.box2 .listBox { width: 55% } .index-porduct.box2 .content .conLeft .title { line-height: 40px } } @media (max-width: 1024px) { .index-porduct .listBox { width: 57% } } @media (max-width: 960px) { .index-porduct.box2 .listBox .list ul li { width: 52%; margin-left: 4% } } @media (max-width: 768px) { .index-porduct .listBox { width: 100% !important; float: none !important } .index-porduct .content { position: relative; margin-top: 20px } .index-porduct .content .w1200 .conLeft { width: 100%; float: none !important } .index-porduct .content .w1200 .conLeft .title span { margin-left: 24px } .index-porduct .content .w1200 .conLeft .title span:after { width: 6px; height: 6px; top: 0; left: -14px; border-width: 2px; display: none; } .index-porduct .content .w1200 .conLeft .tabs { margin-top: 20px } .index-porduct .content .w1200 .conLeft .tabs a { font-size: 14px; line-height: 22px; padding-left: 18px } .index-porduct .content .w1200 .conLeft .tabs a:after { width: 6px; height: 6px; border-width: 2px; top: 5px } .index-porduct .content .w1200 .conLeft .tabs a.on { font-size: 18px } .index-porduct .content .w1200 .conLeft .line { margin-left: 18px; margin-top: 10px } .index-porduct .content .w1200 .conLeft .itemBox { margin-top: 10px } .index-porduct .content .w1200 .conLeft .itemBox .item .con { padding-left: 18px; width: calc(100% - 18px) } .index-porduct .content .w1200 .conLeft .itemBox .item .con .tits { font-size: 16px; line-height: 16px } .index-porduct .content .w1200 .conLeft .itemBox .item .con .tit { font-size: 14px; line-height: 22px; margin-top: 5px; max-height: 132px; } .index-porduct .content .w1200 .conLeft .itemBox .item .tags { margin-top: 20px } .index-porduct .content .w1200 .conLeft .itemBox .item .tags a { width: 120px; height: 34px; line-height: 32px; font-size: 14px } .index-porduct .content .w1200 .conLeft .itemBox .item .tags .t { display: none } .index-porduct .listBox .btns { width: 92%; position: relative; margin: 20px auto 0; } .index-porduct .listBox .btns .num{ float: right; } .index-porduct.box2 .listBox .btns .num{ float: right; margin-right: 0; margin-left: 0; } .index-porduct.box2 .listBox .btns .btn{ float: left; } .index-porduct.box2 .content .conLeft .title { text-align: left; line-height: 30px } .index-porduct.box2 .content .conLeft .title span { margin-left: 0 } .index-porduct.box2 .content .w1200 .conLeft .itemBox .item .con { padding-left: 0; width: 100% } .index-porduct.box2 .content .w1200 .conLeft .line { margin-left: 0 } .index-porduct.box2 .content .conLeft .itemBox .item .tags a { float: left } .index-porduct.box2 .content .btns .btn { float: left } .index-porduct .listBox .list ul li span { padding-top: 8px } .index-porduct .listBox .list:after { bottom: 29px } } .index-about { width: 100%; position: relative; overflow: hidden } .index-about .list .btns{ width: 100%; z-index: 10; text-align: center; position: absolute; bottom:35px; left: 0; } .index-about .list .btns span{ margin: 0 8px; width: 8px; height: 8px; border-radius: 100%; display: inline-block; opacity: 0.3; background-color: #000; vertical-align: middle; } .index-about .list .btns span.swiper-pagination-bullet-active{ width: 12px; height: 12px; background-color: #dc0202; box-shadow: 0 2px 6px rgba(77,18,18,0.39); opacity: 1; } .index-about .con { width: 100%; position: absolute; top: 0; left: 0; padding-top: 12.5% } .index-about .con .conn { width: 860px; max-width: 100% } .index-about .con .conn .tits span { color: #dc0000; margin-left: 30px; } .index-about .con .conn .tit { font-size: 20px; line-height: 26px; color: #000; margin-top: 30px } .index-about .con .conn .more { width: 133px; height: 45px; box-sizing: border-box; border: 1px solid #dc0000; font-size: 16px; line-height: 43px; color: #dc0000; display: block; text-align: center; border-radius: 3px; margin-top: 75px; transition: all .5s; background-color: #fff; } @media (min-width: 1024px) { .index-about .con .conn .more:hover { background-color: #dc0202; color: #fff } } /*@media (max-width: 1366px) { .index-about .con .conn .tits span { font-size: 50px } }*/ @media (max-width: 1200px) { /*.index-about .con .conn .tits span { font-size: 40px }*/ .index-about .con .conn .tit { font-size: 16px; line-height: 22px } } @media (max-width: 768px) { .index-about ul li{ overflow: hidden; } .index-about img { width: 160% !important; margin-left: -30%; } .index-about .con { padding-top: 7% } /*.index-about .con .conn .tits span { font-size: 30px }*/ .index-about .con .conn .tit { font-size: 14px; line-height: 20px; margin-top: 10px } .index-about .con .conn .more { width: 120px; height: 36px; line-height: 34px; font-size: 14px; margin-top: 30px } } .index-box1 { width: 100%; height: auto } .index-box1 .item { width: 50%; height: 100vh; max-height: 980px; float: left; position: relative; transition: all 1s } .index-box1 .item .img { width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background-color: #000 } .index-box1 .item .img img { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; min-width: 100%; max-height: 100% } .index-box1 .item .img .bg { width: 100%; position: absolute; top: 0; height: 100%; left: 0; background-image: url("../img/banner_bg1.png"); display: none; } .index-box1 .item .content { width: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%) } .index-box1 .item .content .con { width: 460px; margin: 0 auto } .index-box1 .item .content .con .tits { color: #fff } .index-box1 .item .content .con .tits span { margin-left: 0 !important; position: relative } .index-box1 .item .content .con .tits span:after { width: 8px; height: 8px; border-radius: 100%; border: 3px solid #dc0202; content: ''; position: absolute; top: -2px; left: -20px; display: none; } .index-box1 .item .content .con .tit { font-size: 20px; line-height: 20px; color: #fff; margin-top: 33px } .index-box1 .item .content .con .itemBox { width: 100%; height: auto; margin-top: 84px; height: 0; overflow: hidden; transform: translateY(20px); transition: all .5s } .index-box1 .item .content .con .itemBox .it { width: 66px; margin-right: 130px; float: left; margin-bottom: 60px } .index-box1 .item .content .con .itemBox .it .icon { width: 66px; height: 66px; position: relative } .index-box1 .item .content .con .itemBox .it .icon img { max-width: 100%; max-height: 100%; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto } .index-box1 .item .content .con .itemBox .it p { text-align: center; font-size: 16px; line-height: 16px; color: #fff; margin-top: 24px } .index-box1 .item .content .con .itemBox .it:nth-child(3n) { margin-right: 0 } .index-box1 .item .content .con .itemBox1 { width: 100%; height: auto; margin-top: 69px; height: 0; overflow: hidden; transform: translateY(20px); transition: all .5s } .index-box1 .item .content .con .itemBox1 .it { width: 128px; float: left; text-align: center; margin-bottom: 25px; margin-right: 15px } .index-box1 .item .content .con .itemBox1 .it:nth-child(4n) { margin-right: 0 } .index-box1 .item .content .con .itemBox1 .it .icon { width: 100%; height: auto; position: relative } .index-box1 .item .content .con .itemBox1 .it .icon img { width: 100%; } .index-box1 .item .content .con .itemBox1 .it .icon span{ width: 36px; height: 36px; background-color: #fff; border-radius: 100%; text-align: center; font-size: 20px; line-height: 36px; font-family: TL; color: #dc0202; position: absolute; top: 19px; right: 1px; font-weight: bold; } @media (max-width: 768px){ .index-box1 .item .content .con .itemBox1 .it .icon span{ font-size: 16px; line-height: 26px; width: 26px; height: 26px; top: 4px; } } .index-box1 .item .content .con .itemBox1 .it p { font-size: 16px; color: #fff; line-height: 16px; margin-top: 10px } .index-box1 .item .content .con .more { width: 133px; height: 45px; border-radius: 3px; border: 1px solid #fff; font-size: 16px; line-height: 43px; color: #fff; text-align: center; display: none; transition: all .5s } @media (min-width: 1024px) { .index-box1 .item .content .con .more:hover { background-color: #fff; color: #dc0202 } } .index-box1 .item .content.cc .con { width: 605px } .index-box1 .item.on { width: 61.45% } .index-box1 .item.on .content .con .itemBox { height: auto; transform: translateY(0) } .index-box1 .item.on .content .con .itemBox1 { height: auto; transform: translateY(0) } .index-box1 .item.on .content .con .more { display: block } .index-box1 .item.onN { width: 38.55% } .index-box1 .item.onN .img img { opacity: 0.5 } .index-box1 .item.onN .content .con .tits { opacity: 0.3 } .index-box1 .item.onN .content .con .tit { opacity: 0.3 } @media (max-width: 1366px) { .index-box1 .item .content .con .tit { margin-top: 20px } .index-box1 .item .content .con .itemBox { margin-top: 40px } .index-box1 .item .content .con .itemBox .item { margin-bottom: 30px } .index-box1 .item .content .con .itemBox1 { margin-top: 40px } .index-box1 .item .content .con .itemBox1 .it { margin-bottom: 25px } .index-box1 .item .content .con .tits span { margin-left: 35px } } @media (max-width: 1200px) { .index-box1 .item .content .con { width: 340px } .index-box1 .item .content .con .tit { margin-top: 10px; font-size: 16px; line-height: 16px } .index-box1 .item .content .con .itemBox { margin-top: 40px } .index-box1 .item .content .con .itemBox .it { margin-bottom: 20px; margin-right: 70px } .index-box1 .item .content .con .itemBox .it p { margin-top: 10px } .index-box1 .item .content .con .itemBox1 .it { margin-bottom: 15px; margin-right: 15px } .index-box1 .item .content .con .itemBox1 .it:nth-child(4n){ margin-right: 15; } .index-box1 .item .content .con .itemBox1 .it:nth-child(3n){ margin-right: 0; } .index-box1 .item .content .con .itemBox1 .it p { margin-top: 10px } .index-box1 .item .content.cc .con { width: 440px } } @media (max-width: 900px) { .index-box1 .item { width: 100%; height: 550px; float: none } .index-box1 .item .content .con { width: 360px } .index-box1 .item .content .con .itemBox { margin-top: 40px; height: auto; transform: translateY(0) } .index-box1 .item .content .con .tit{ text-align: center; } .index-box1 .item .content .con .itemBox .it .icon { width: 40px; margin: 0 auto; height: 40px } .index-box1 .item .content .con .itemBox .it p { font-size: 14px; margin-top: 5px } .index-box1 .item .content .con .more { width: 120px; height: 36px; line-height: 34px; font-size: 14px; display: block; margin: 30px auto 0; } .index-box1 .item .content .con .tits{ text-align: center; } .index-box1 .item .content .con .tits span{ margin-left: 26px; } .index-box1 .item .content .con .tits span:after{ width: 6px; height: 6px; border-width: 2px; left: -18px; } .index-box1 .item .content .con .itemBox1 { height: auto; transform: translateY(0); margin-top: 40px } .index-box1 .item .content .con .itemBox1 .it { width: 22.7%; margin-right: 15.95%; margin-bottom: 12px; } .index-box1 .item .content .con .itemBox1 .it:nth-child(4n){ margin-right: 15.95% } .index-box1 .item .content .con .itemBox1 .it:nth-child(3n){ margin-right: 0; } .index-box1 .item .content .con .itemBox1 .it .icon { width: 100%; height: auto; } .index-box1 .item .content .con .itemBox1 .it .icon img{ position: relative; width: 100%; } .index-box1 .item .content .con .itemBox1 .it p { font-size: 14px; line-height: 14px; margin-top: 6px; } .index-box1 .item .content.cc .con { width: 360px } } .index-box2 { /*background-image: url("../img/index_bg1.jpg"); background-size: cover; background-repeat: no-repeat;*/ background-color: #f0f0f0; padding: 9% 0 } .index-box2 .index-porduct { margin: 0 auto } .index-news { padding-top: 9.375%; padding-bottom: 9.6% } .index-news .title .tits { width: calc(100% - 200px); float: left } .index-news .title .tits .t span { color: #dc0000; margin-left: 0 !important; position: relative } .index-news .title .tits .t span:after { width: 8px; height: 8px; border-radius: 100%; border: 3px solid #dc0202; content: ''; position: absolute; top: -2px; left: -20px; display: none; } .index-news .title .tits .t1 { font-size: 16px; line-height: 20px; color: #999; margin-top: 35px } .index-news .title .more { width: 133px; height: 45px; box-sizing: border-box; font-size: 16px; line-height: 43px; color: #dc0000; float: right; display: block; border-radius: 3px; border: 1px solid #dc0000; text-align: center; margin-top: 60px; transition: all .5s } @media (min-width: 1024px) { .index-news .title .more:hover { background-color: #dc0202; color: #fff } } .index-news .list { margin-top: 7.5% } .index-news .list ul li { width: 28.3%; float: left; margin-right: 7.55% } .index-news .list ul li:last-child { margin-right: 0 } .index-news .list ul li a { width: 100%; height: auto; display: block } .index-news .list ul li a .pic { width: 100%; height: auto; overflow: hidden } .index-news .list ul li a .pic img { transition: all 1.5s } .index-news .list ul li a .tits { font-size: 18px; line-height: 26px; color: #000; font-weight: bold; height: 52px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-top: 33px } .index-news .list ul li a .tit { margin-top: 26px } .index-news .list ul li a .tit .t { font-size: 16px; line-height: 18px; color: #bbb; padding-left: 28px; background-position: left center; background-repeat: no-repeat; margin-right: 35px; float: left; font-family: LT } .index-news .list ul li a .tit .t.t1 { background-image: url("../img/time.png") } .index-news .list ul li a .tit .t.t2 { background-image: url("../img/kan.png") } @media (min-width: 1024px) { .index-news .list ul li:hover a .pic img { transform: scale(1.1) } .index-news .list ul li:hover a .tits { color: #dc0000 } } @media (max-width: 1366px) { .index-news .title .tits .t span { margin-left: 32px } } @media (max-width: 768px) { .index-news .title .tits { width: 100%; float: none } .index-news .title .tits .t span:after { width: 6px; height: 6px; left: -14px; top: 0; border-width: 2px } .index-news .title .tits .t1 { font-size: 14px; line-height: 20px; margin-top: 10px } .index-news .title { position: relative } .index-news .title .more { width: 120px; height: 36px; line-height: 34px; font-size: 14px; top: -12px; right: 0; position: absolute; margin-top: 0px } .index-news .list ul li { width: 100%; float: none; margin-bottom: 20px } .index-news .list ul li a .tits { font-size: 16px; line-height: 22px; height: 44px; margin-top: 10px } .index-news .list ul li a .tit { margin-top: 15px } .index-news .list ul li a .tit .t { font-size: 14px } .index-news .title .tits .t span { margin-left: 20px } } .footer { border-top: 1px solid #e5e5e5; background-color: #fff; padding: 20px 0 } .footer p { font-size: 14px; line-height: 40px; color: #000; float: left } .footer p a { color: #000; margin-left: 40px } @media (min-width: 1024px) { .footer p a:hover { color: #dc0000 } } .footer .share { float: right; margin-top: 5px } .footer .share a { width: 18px; height: 30px; padding: 0; margin: 0; display: block; float: left; background-position: center; background-repeat: no-repeat; margin-left: 32px } .footer .share a.a1 { background-image: url("../img/wb.png") } .footer .share a.a2 { background-image: url("../img/wx.png") } .footer .share a.a3 { background-image: url("../img/em.png") } @media (max-width: 860px) { .footer p a { margin-left: 20px } } @media (max-width: 768px) { .footer { padding: 15px 0 10px } .footer p { float: none; line-height: 20px } .footer p a { margin-left: 12px; line-height: 20px } } .xf { width: 54px; position: fixed; right: 0; top: 64%; transform: translateY(-50%); box-shadow: 0 0 14px rgba(0,0,0,0.2); z-index: 20 } .xf .a { width: 54px; height: auto; padding-top: 10px; padding-bottom: 10px; background-color: #fff; border-bottom: 1px solid #ececec; display: block; background-position: center; background-repeat: no-repeat; position: relative; box-sizing: border-box; cursor: pointer; } .xf .a .icon{ width: 100%; height: 21px; background-position: center; background-repeat: no-repeat; } .xf .a p{ text-align: center; font-size: 12px; line-height: 12px; margin-top: 5px; color: #000; } .xf .a.tel .icon { background-image: url("../img/tel_h.png") } .xf .a.ewm .icon { background-image: url("../img/xf1_h.png") } .xf .a.hqbj .icon { background-image: url("../img/xf3_h.png") } .xf .a.fx .icon { background-image: url("../img/xf4_h.png") } .xf .a:hover.tel .icon { background-image: url("../img/tel.png") } .xf .a:hover.ewm .icon { background-image: url("../img/xf1.png") } .xf .a:hover.hqbj .icon { background-image: url("../img/xf3.png") } .xf .a:hover.fx .icon { background-image: url("../img/xf4.png") } .xf .a.returnTop { padding-top: 0; padding-bottom: 0; height: 50px; background-image: url("../img/xf2.png") } .xf .a:last-child { border-bottom: none } .xf .a .ttt { width: 160px; height: 59px; position: absolute; top: 0; left: 0; background-color: #fff; font-size: 16px; line-height: 59px; color: #333; text-align: center; font-weight: bold; border: 1px solid #ececec; border-right: none; box-sizing: border-box; z-index: -1; transition: all .5s; opacity: 0; padding: 0 15px; color: #dc0202 !important; } .xf .a .ewmNew { width: 120px; height: 120px; top: 0; left: 0; z-index: -1; position: absolute; border: 1px solid #ececec; box-sizing: border-box; opacity: 0; transition: all .5s } .xf .a .share{ width: 100px; height: 59px; background-color: #fff; position: absolute; border: 1px solid #ececec; top: 0; left: 0; box-sizing: border-box; z-index: -1; transition: all .5s; opacity: 0; } .xf .a .share a{ width: 50%; float: left; height: 59px; display: block; background-position: center; margin: 0; padding: 0; background-repeat: no-repeat; } .xf .a .share a.bshare-sinaminiblog{ background-image: url('../img/wb.png'); } .xf .a .share a.bshare-weixin{ background-image: url('../img/wx.png'); } .xf .a:hover .ttt { left: -160px; opacity: 1 } .xf .a:hover .ewmNew { left: -120px; opacity: 1 } .xf .a:hover .share{ left: -100px; opacity: 1; } @media (max-width: 1024px) { .xf { display: block; top: auto; bottom: 5%; transform: translateY(0); } .xf .a.ewm{ display: none; } .xf .a.fx{ display: none; } } .banner { width: 100%; height: auto; position: relative } .banner .bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url("../img/banner_bg1.png"); display: none; } .banner .con { width: 100%; text-align: center; position: absolute; top: 0; left: 0; padding-top: 12.5%; color: #fff } .banner .con .tits { color: #fff } .banner .con .tits span { position: relative } .banner .con .tits span:after { width: 8px; height: 8px; border-radius: 100%; border: 3px solid #dc0202; content: ''; position: absolute; top: -2px; left: -34px; display: none; } .banner .con .tit1 { color: #fff } .banner .con .tit1 span { color: #dc0202; position: relative; margin-left: 0 !important; } .banner .con .tit1 span:after { width: 8px; height: 8px; border-radius: 100%; border: 3px solid #dc0202; content: ''; position: absolute; top: -2px; left: -24px; display: none; } .banner .con .tit { font-size: 16px; line-height: 18px; margin-top: 30px } .banner .btn { padding-left: 50px; font-size: 16px; line-height: 32px; background-image: url("../img/next_h.png"); background-position: left center; background-repeat: no-repeat; color: #fff; position: absolute; bottom: 85px; left: 50%; transform: translateX(-50%) } @media (max-width: 768px) { .banner { overflow: hidden } .banner img { width: 130%; margin-left: -15% } .banner .con .tits span:after { width: 6px; height: 6px; border-width: 2px; left: -16px } .banner .con .tit { font-size: 14px; line-height: 16px; margin-top: 10px } .banner .con .tit1 span { margin-left: 24px } .banner .con .tit1 span:after { width: 6px; height: 6px; border-width: 2px; left: -16px } } .service { padding-bottom: 7.3% } .service .box1 { text-align: center; color: #000; padding-top: 5.2%; padding-bottom: 7% } .service .box1 .tit { font-size: 20px; line-height: 26px; margin-top: 24px } .service .box1 .tit1 { width: 780px; max-width: 92%; margin: 4.7% auto 0; font-size: 16px; line-height: 28px } .service .box2 { background-color: #f5f5f5 } .service .box2 .item { position: relative } .service .box2 .item .pic { width: 50%; float: left } .service .box2 .item .con { width: 100%; height: auto; position: absolute; top: 0; left: 0; padding-top: 10.3% } .service .box2 .item .con .conn { width: 40%; float: right } .service .box2 .item .con .conn .tits { line-height: 60px } .service .box2 .item .con .conn .tits span { color: #dc0202; position: relative; margin-left: 0 !important; } .service .box2 .item .con .conn .tits span:after { width: 8px; height: 8px; border-radius: 100%; border: 3px solid #dc0202; content: ''; position: absolute; top: -2px; left: -27px; display: none; } .service .box2 .item .con .conn .tit { font-size: 16px; line-height: 26px; color: #000; margin-top: 35px } .service .box2 .item .con .conn .tit1 { font-size: 14px; line-height: 26px; color: #666; margin-top: 67px } .service .box2 .item .con .conn .tit1 p { width: calc(100% - 26px); position: relative; padding-left: 26px; margin-bottom: 8px } .service .box2 .item .con .conn .tit1 p:after { width: 8px; height: 8px; border-radius: 100%; border: 3px solid #bbb; content: ''; position: absolute; top: 7px; left: 0 } .service .box2 .item:nth-child(2n) .pic { float: right } .service .box2 .item:nth-child(2n) .con .conn { float: left } .service .box3 { text-align: center; padding-top: 8.3%; padding-bottom: 7.7% } .service .box3 .tits span { position: relative } .service .box3 .tits span:after { width: 8px; height: 8px; border-radius: 100%; border: 3px solid #dc0202; content: ''; position: absolute; top: -2px; left: -27px; display: none; } .service .box3 .tit { font-size: 16px; line-height: 40px; color: #000; margin-top: 46px } @media (max-width: 1366px) { .service .box2 .item .con { padding-top: 5.3% } .service .box2 .item .con .conn .tits { line-height: 46px } } @media (max-width: 1200px) { .service .box1 .tit { font-size: 16px; line-height: 22px } .service .box1 .tit1 { font-size: 14px; line-height: 24px } .service .box2 .item .con .conn .tits span { margin-left: 40px } .service .box2 .item .con .conn .tits { line-height: 36px } .service .box2 .item .con .conn .tit { margin-top: 15px } .service .box2 .item .con .conn .tit1 { margin-top: 30px } .service .box2 .item .con .conn { width: 45% } .service .box3 .tit { margin-top: 25px; line-height: 32px } } @media (max-width: 768px) { .service .box1 .tit { margin: 10px auto 0; max-width: 92% } .service .box2 .item .pic { width: 100%; float: none !important } .service .box2 .item .con { width: 100%; margin: 0 auto; position: relative; right: auto !important; left: auto !important; padding-top: 20px; padding-bottom: 25px } .service .box2 .item .con .conn { width: 100% } .service .box2 .item .con .conn .tits { line-height: 26px } .service .box2 .item .con .conn .tits span { margin-left: 0 !important; } .service .box2 .item .con .conn .tits span:after { width: 6px; height: 6px; border-width: 2px; left: -14px; display: none; } .service .box2 .item .con .conn .tit { font-size: 14px; line-height: 22px; margin-top: 5px } .service .box2 .item .con .conn .tit1 { margin-top: 10px; line-height: 22px } .service .box2 .item .con .conn .tit1 p { margin-bottom: 0; padding-left: 18px; width: calc(100% - 18px) } .service .box2 .item .con .conn .tit1 p:after { width: 6px; height: 6px; border-width: 2px; top: 5px } .service .box3 .tits span:after { width: 6px; height: 6px; border-width: 2px; left: -16px } .service .box3 .tit { font-size: 14px; line-height: 24px; width: 92%; margin: 10px auto 0 } } .news .top { position: relative; margin: 5.2% auto } .news .top ul li a { width: 100%; height: auto; position: relative; display: block } .news .top ul li a .pic { width: 53.3%; float: left } .news .top ul li a .con { width: 40%; float: right } .news .top ul li a .con .tits { font-size: 24px; line-height: 34px; color: #333; font-weight: bold; height: 68px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis } .news .top ul li a .con .tit { font-size: 14px; line-height: 24px; height: 72px; color: #777; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-top: 50px } .news .top ul li a .con .tit1 { margin-top: 58px } .news .top ul li a .con .tit1 .t { font-size: 16px; line-height: 18px; float: left; margin-right: 36px; padding-left: 28px; background-position: left center; background-repeat: no-repeat; color: #bbb } .news .top ul li a .con .tit1 .t.t1 { background-image: url("../img/time.png") } .news .top ul li a .con .tit1 .t.t2 { background-image: url("../img/kan.png") } .news .top ul li a .more { width: 133px; height: 45px; border: 1px solid #dc0000; font-size: 16px; line-height: 43px; color: #dc0000; text-align: center; display: block; border-radius: 3px; position: absolute; bottom: 0; right: 0; transition: all .5s } @media (min-width: 1024px) { .news .top ul li a .more:hover { background-color: #dc0202; color: #fff } } .news .top .btns { position: absolute; left: 60%; bottom: 0; z-index: 10 } .news .top .btns .btn { float: left; width: 86px } .news .top .btns .btn a { width: 32px; height: 32px; display: block; float: left; background-position: left center; background-repeat: no-repeat } .news .top .btns .btn a.prev { background-image: url("../img/prev.png") } .news .top .btns .btn a.next { background-image: url("../img/next.png"); background-position: right center; float: right } @media (min-width: 1024px) { .news .top .btns .btn a:hover.prev { background-image: url("../img/prev_h.png") } .news .top .btns .btn a:hover.next { background-image: url("../img/next_h.png") } } .news .top .btns .num { font-size: 16px; line-height: 18px; color: #aeaeae; font-weight: bold; float: left; padding-top: 14px; margin-left: 60px; position: relative } .news .top .btns .num span { color: #dc0000; margin-right: 34px } .news .top .btns .num em { width: 3px; height: 16px; bottom: 1px; left: 50%; margin-left: -1.5px; background-color: #aeaeae; display: block; position: absolute } .news .list { background-color: #f5f5f5; padding-top: 5.2%; padding-bottom: 7.3% } .news .list ul { padding-bottom: 58px } .news .list ul li { width: 33.33333%; box-sizing: border-box; border-left: 1px solid #e5e5e5; float: left; margin-bottom: 60px } .news .list ul li:nth-child(3n) { border-right: 1px solid #e5e5e5 } .news .list ul li:last-child { border-right: 1px solid #e5e5e5 } .news .list ul li a { width: 100%; height: auto; box-sizing: border-box; padding: 0 54px; display: block } .news .list ul li a .tags { font-size: 14px; line-height: 14px; color: #dc0000; padding-top: 5px } .news .list ul li a .tits { font-size: 18px; line-height: 20px; height: 20px; font-weight: bold; color: #000; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-top: 26px } .news .list ul li a .tit { font-size: 14px; line-height: 21px; color: #909090; height: 147px; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-top: 30px } .news .list ul li a .tit1 { margin-top: 40px } .news .list ul li a .tit1 .time { font-size: 16px; line-height: 16px; float: left; color: #909090 } .news .list ul li a .tit1 .more { width: 133px; height: 45px; font-size: 16px; line-height: 43px; color: #dc0000; border-radius: 3px; border: 1px solid #dc0000; text-align: center; float: right; display: block; opacity: 0; transition: all .5s } @media (min-width: 1024px) { .news .list ul li a .tit1 .more:hover { background-color: #dc0202; color: #fff } } @media (min-width: 1024px) { .news .list ul li:hover a .tits { color: #dc0000 } .news .list ul li:hover a .tit1 .more { opacity: 1 } } @media (max-width: 1200px) { .news .top ul li a .con .tits { font-size: 20px; line-height: 26px; height: 52px } .news .top ul li a .con .tit { margin-top: 15px } .news .top ul li a .con .tit1 { margin-top: 25px } .news .list ul li a { padding: 0 30px } } @media (max-width: 1024px) { .news .top .btns .num { margin-left: 30px } .news .top .btns .btn { width: 68px } .news .list ul li a .tit1 .more { opacity: 1 } } @media (max-width: 768px) { .news .top ul li a .pic { float: none; width: 100% } .news .top ul li a .con { width: 100%; float: none; margin-top: 15px } .news .top ul li a .con .tits { font-size: 16px; line-height: 22px; height: 44px } .news .top ul li a .con .tit { margin-top: 10px } .news .top ul li a .con .tit1 { margin-top: 10px } .news .top ul li a .more { position: relative; width: 120px; height: 34px; line-height: 32px; font-size: 14px; margin-top: 15px } .news .top .btns { width: 100%; position: relative; left: auto; margin-top: 20px } .news .list ul { padding-bottom: 20px } .news .list ul li { width: 100%; float: none; border-left: none; border-right: none !important; border-bottom: 1px solid #e5e5e5; margin-bottom: 20px } .news .list ul li a { padding: 0 10px 15px } .news .list ul li a .tits { font-size: 16px; line-height: 18px; height: 18px; margin-top: 8px } .news .list ul li a .tit { height: auto; margin-top: 10px } .news .list ul li a .tit1 { margin-top: 15px } .news .list ul li a .tit1 .more { width: 120px; height: 34px; line-height: 32px; font-size: 14px } } .page { text-align: center; font-size: 0; width: 100% } .page .p { display: inline-block; width: 32px; height: 32px; line-height: 32px; color: #f5f5f5; position: relative; font-size: 16px; } .page .p:after { width: 32px; position: absolute; top: 0; left: 0; content: ''; height: 32px; background-position: left center; background-repeat: no-repeat } .page .p.prev { margin-right: 40px } .page .p.prev:after { background-image: url("../img/prev.png") } .page .p.next { margin-left: 40px } .page .p.next:after { background-image: url("../img/next.png"); background-position: right center } @media (min-width: 1024px) { .page .p:hover.prev:after { background-image: url("../img/prev_h.png") } .page .p:hover.next:after { background-image: url("../img/next_h.png") } } .page .pageNew { display: inline-block } .page .pageNew a,.page .pageNew span { font-size: 16px; line-height: 32px; color: #aeaeae; width: 54px; display: inline-block; font-weight: bold; position: relative } .page .pageNew a:after,.page .pageNew span:after { width: 3px; height: 16px; position: absolute; right: 1.5px; top: 9px; background-color: #aeaeae; content: '' } .page .pageNew a:last-child:after,.page .pageNew span:last-child:after { display: none } .page .pageNew a:hover,.page .pageNew span:hover { color: #dc0000 } .page .pageNew span { color: #dc0000 } @media (max-width: 768px) { .page .p.prev { margin-right: 20px } .page .p.next { margin-left: 20px } } .newsInfo { width: 900px; max-width: 92%; margin: 0 auto; padding-top: 7.1% } .newsInfo .tags { font-size: 14px; line-height: 16px; color: #dc0000; margin-top: 74px } .newsInfo .tags .time { font-size: 16px; color: #909090; margin-left: 50px } .newsInfo .con { font-size: 16px; line-height: 24px; text-align: justify; color: #565656; margin-top: 70px; border-bottom: 1px solid #eaeaea; padding-bottom: 14.4% } .newsInfo .con img { max-width: 100%; height: auto !important; margin: 0 auto; display: block } @media (max-width: 1366px) { .newsInfo .tags { margin-top: 50px } .newsInfo .con { margin-top: 45px } } @media (max-width: 1200px) { .newsInfo .tags { margin-top: 30px } .newsInfo .con { margin-top: 25px } } @media (max-width: 768px) { .newsInfo .tags { margin-top: 15px } .newsInfo .con { margin-top: 10px; font-size: 14px; line-height: 22px; padding-bottom: 30px } } .paging { padding: 60px 0 } .paging a { width: calc(48% - 60px); display: block; font-size: 16px; line-height: 32px; color: #000; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; background-position: left center; background-repeat: no-repeat; padding-left: 60px } .paging a.left { background-image: url("../img/prev.png") } .paging a.right { background-image: url("../img/next.png"); background-position: right center; padding-right: 60px; padding-left: 0; text-align: right } @media (min-width: 1024px) { .paging a:hover.left { background-image: url("../img/prev_h.png") } .paging a:hover.right { background-image: url("../img/next_h.png") } } @media (max-width: 1200px) { .paging { padding: 40px 0 } } @media (max-width: 768px) { .paging { padding: 15px 0 } .paging a { width: calc(100% - 30px); float: none; padding-left: 30px } .paging a.right { padding-left: 30px; padding-right: 0; text-align: left; background-position: left center; background-image: url("../img/prev.png") } } .about .box1 { padding-top: 5%; padding-bottom: 8.2% } .about .box1 .tits { text-align: center } .about .box1 .tits span { color: #dc0000; font-family: LT; font-size: 60px; margin-left: 30px } .about .box1 .tit { font-size: 20px; line-height: 26px; color: #191919; margin-top: 53px } .about .box1 .itemBox { margin-top: 12.5% } .about .box1 .itemBox .item { width: 19.2%; margin-right: 7.7%; float: left } .about .box1 .itemBox .item:last-child { margin-right: 0 } .about .box1 .itemBox .item .t { font-size: 60px; line-height: 60px; color: #000; font-weight: bold; font-family: LT } .about .box1 .itemBox .item .t span { font-size: 50px } .about .box1 .itemBox .item .t1 { font-size: 14px; line-height: 21px; color: #666; margin-top: 30px } .about .box2 { background-color: #f5f5f5 } .about .box2 .item { position: relative } .about .box2 .item .pic { width: 50%; float: left } .about .box2 .item .con { width: 100%; height: auto; position: absolute; top: 0; left: 0; padding-top: 11.7% } .about .box2 .item .con .conn { width: 37.9%; float: right } .about .box2 .item .con .conn .tits { position: relative } .about .box2 .item .con .conn .tits:after { width: 8px; height: 8px; border-radius: 100%; border: 3px solid #dc0202; content: ''; position: absolute; top: 3px; left: -27px; display: none; } .about .box2 .item .con .conn .tit { font-size: 16px; line-height: 26px; color: #000; margin-top: 40px } .about .box2 .item .con .conn .icon { width: 32px; margin-top: 95px; display: none; } .about .box2 .item:nth-child(2n) .pic { float: right } .about .box2 .item:nth-child(2n) .con .conn { float: left } .about .box3 { text-align: center; padding-top: 8%; padding-bottom: 7.6% } .about .box3 .tits span { position: relative } .about .box3 .tits span:after { width: 8px; height: 8px; border-radius: 100%; border: 3px solid #dc0202; content: ''; position: absolute; top: -2px; left: -27px; display: none; } .about .box3 .tit { width: 780px; margin: 46px auto 0; max-width: 92%; font-size: 16px; line-height: 40px; color: #000 } .about .box3 .icon { width: 32px; margin: 50px auto 0; display: none; } .about .box3.bb { background-color: #f5f5f5; padding-bottom: 3.6% } .about .box4 { padding-top: 5.2%; padding-bottom: 7.3% } .about .box4 .list{ width: calc(100% - 80px); margin: 0 auto; position: relative; } .about .box4 .list:before{ width: 3px; height: 100%; top: 0; left: 50%; margin-left: -1.5px; content: ''; background-color: #000; position: absolute; } .about .box4 ul { width: calc(50% - 1.5px); float: left; } .about .box4 ul:nth-child(1) li:nth-child(even){ display: none; } .about .box4 ul:nth-child(2){ float: right; padding-top: 17.7%; } .about .box4 ul:nth-child(2) li:nth-child(odd){ display: none; } .about .box4 ul li { padding-bottom: 38px; padding-top: 35px; position: relative } .about .box4 ul li .year { font-size: 20px; line-height: 40px; color: #000; padding-right: 60px; box-sizing: border-box; text-align: right; } .about .box4 ul:nth-child(2) li .year{ padding-left: 65px; padding-right: 0; text-align: left; } .about .box4 ul li .year span { font-size: 40px; font-weight: bold; font-family: LT; margin-right: 13px } .about .box4 ul li .line { width: 100%; height: 1px; background-color: #bbb; margin-top: 22px; position: relative } .about .box4 ul li .line:after { width: 8px; height: 8px; background-color: #fff; border-radius: 100%; border: 3px solid #d60202; position: absolute; top: -6.5px; right: -8.5px; content: '' } .about .box4 ul:nth-child(2) li .line:after{ left: -8.5px; right: 0; } .about .box4 ul li .tit { width: calc(100% - 65px - 30px); font-size: 16px; line-height: 26px; color: #666; padding-right: 65px; text-align: right; margin-top: 27px; margin-left: 30px; } .about .box4 ul:nth-child(2) li .tit{ padding-left: 65px; padding-right: 0; text-align: left; margin-left: 0; } .about .box4 ul li .pic { width: calc(100% - 65px); margin-top: 28px; text-align: right; margin-right: 65px; } .about .box4 ul li .pic img{ max-width: 100%; width: auto !important; } .about .box4 ul:nth-child(2) li .pic{ margin-left: 65px; margin-right: 0; text-align: left; } .about .box4 ul:nth-child(2) li .pic img{ text-align: left; } .about .box5 { background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url("../img/about_bg.jpg"); padding-top: 7.3%; padding-bottom: 6.8% } .about .box5 .boxLeft { float: left } .about .box5 .boxLeft .img { width: 133px; float: left } .about .box5 .boxLeft .cc { float: left; margin-left: 22px; padding-top: 22px } .about .box5 .boxLeft .cc img { display: block } .about .box5 .boxLeft .cc p { font-size: 16px; line-height: 18px; color: #666; margin-top: 45px } .about .box5 .boxLeft .cc p span { color: #dc0000 } .about .box5 .boxRight { float: right } .about .box5 .boxRight .tits { text-align: right } .about .box5 .boxRight .tits span { position: relative; color: #dc0202; margin-left: 0 !important; } .about .box5 .boxRight .tits span:after { width: 8px; height: 8px; border-radius: 100%; border: 3px solid #dc0202; content: ''; position: absolute; top: 3px; left: -27px; display: none; } .about .box5 .boxRight .tit { margin-top: 55px } .about .box5 .boxRight .tit .t { line-height: 20px; padding-left: 30px; background-position: left center; background-repeat: no-repeat; color: #000; float: left } .about .box5 .boxRight .tit .t.t1 { font-size: 16px; background-image: url("../img/add.png") } .about .box5 .boxRight .tit .t.t2 { font-size: 20px; font-family: TL; background-image: url("../img/tel1.png"); font-weight: bold; margin-left: 35px } @media (max-width: 1366px) { .about .box1 .tits span { font-size: 50px } .about .box1 .itemBox .item .t { font-size: 50px; line-height: 50px } .about .box1 .itemBox .item .t span { font-size: 40px } } @media (max-width: 1200px) { .about .box1 .tits span { font-size: 36px; margin-left: 15px } .about .box1 .itemBox .item .t { font-size: 36px; line-height: 36px } .about .box1 .itemBox .item .t span { font-size: 30px } .about .box1 .itemBox .item { width: 23%; margin-right: 2.6% } .about .box1 .tit { font-size: 16px; line-height: 24px; margin-top: 30px } .about .box1 .itemBox .item .t1 { margin-top: 20px } .about .box2 .item .con .conn .icon { margin-top: 45px } .about .box2 .item .con .conn .tit { margin-top: 20px } } @media (max-width: 768px) { .about .box1 .tits span { font-size: 24px; margin-left: 10px } .about .box1 .tit { font-size: 14px; line-height: 20px; margin-top: 10px } .about .box1 .itemBox .item .t { font-size: 26px; line-height: 26px } .about .box1 .itemBox .item .t span { font-size: 20px } .about .box1 .itemBox { margin-top: 30px } .about .box1 .itemBox .item { width: 100%; margin-right: 0; margin-bottom: 20px } .about .box1 .itemBox .item:nth-child(2n) { margin-right: 0 } .about .box1 .itemBox .item .t1 { margin-top: 5px } .about .box2 .item .pic { width: 100%; float: none !important } .about .box2 .item .con { position: relative; padding-top: 20px; padding-bottom: 25px } .about .box2 .item .con .conn { width: 100%; float: none } .about .box2 .item .con .conn .tits:after { width: 6px; height: 6px; border-width: 2px; left: -14px } .about .box2 .item .con .conn .tit { font-size: 14px; line-height: 22px; margin-top: 10px } .about .box2 .item .con .conn .icon { margin-top: 20px } .about .box3 .tits span:after { width: 6px; height: 6px; border-width: 2px; left: -14px } .about .box3 .tit { font-size: 14px; line-height: 24px; margin: 10px auto 0 } .about .box3 .icon { margin: 25px auto 0 } .about .box4 .list{ width: 100%; } .about .box4 .list:before{ left: 0; margin-left: 0; } .about .box4 ul{ width: calc(100% - 3px); padding-top: 0 !important; } .about .box4 ul:nth-child(1){ display: none; } .about .box4 ul:nth-child(2){ display: block; } .about .box4 ul:nth-child(2) li{ display: block !important; } .about .box4 ul li { padding: 15px 0 } .about .box4 ul li .year { font-size: 14px; line-height: 22px; padding-left: 15px !important; } .about .box4 ul li .year span { font-size: 22px; margin-right: 5px } .about .box4 ul li .tit { font-size: 14px; line-height: 22px; margin-top: 10px; padding-left: 15px !important; width: calc(100% - 15px - 20px) !important; } .about .box4 ul li .pic { width: calc(100% - 30px) !important; padding-left: 15px !important; position: relative; margin-left: 0 !important; top: 0; margin-top: 10px; text-align: left !important; } .about .box4 ul li .pic img{ height: 130px; } .about .box4 ul li .line { margin-top: 10px } .about .box5 .boxLeft { float: none } .about .box5 .boxLeft .img { width: 99px } .about .box5 .boxLeft .cc { padding-top: 15px; margin-left: 10px } .about .box5 .boxLeft .cc img { width: 180px } .about .box5 .boxLeft .cc p { font-size: 14px; line-height: 16px; margin-top: 20px } .about .box5 .boxRight { float: none; margin-top: 15px } .about .box5 .boxRight .tits { text-align: left } .about .box5 .boxRight .tits span { margin-left: 20px } .about .box5 .boxRight .tits span:after { width: 6px; height: 6px; border-width: 2px; left: -14px; top: 0 } .about .box5 .boxRight .tit { margin-top: 20px } .about .box5 .boxRight .tit .t { float: none; margin-bottom: 10px } .about .box5 .boxRight .tit .t.t1 { font-size: 14px } .about .box5 .boxRight .tit .t.t2 { margin-left: 0; font-size: 16px } } .case { padding-bottom: 7.3% } .case .title { padding: 5% 0 4.2%; text-align: center; color: #282a1e } .case .title .tit { font-size: 20px; line-height: 26px; margin-top: 25px } .case .list { padding-bottom: 7.3%; width: 100%; position: relative } .case .list .white-panel { position: absolute; background-color: #f0f0f0 } .case .list .white-panel a { width: 100%; display: block; height: auto } .case .list .white-panel a.ddd{ cursor: auto; } .case .list .white-panel a .con { text-align: center; color: #000; padding: 14px 0 } .case .list .white-panel a .con .t { font-size: 22px; line-height: 22px } .case .list .white-panel a .con .t1 { font-size: 14px; line-height: 14px; margin-top: 10px } .case .list .white-panel a .box { width: 100%; height: 100%; position: absolute; background-color: rgba(0,0,0,0.5); top: 0; left: 0; transition: all .5s; opacity: 0 } .case .list .white-panel a .box .conn { width: 100%; top: 50%; transform: translateY(-50%); left: 0; position: absolute; text-align: center; color: #fff } .case .list .white-panel a .box .conn .tits { font-size: 22px; line-height: 22px } .case .list .white-panel a .box .conn .tit { font-size: 14px; line-height: 14px; margin-top: 10px } .case .list .white-panel a .box .conn .more { width: 133px; height: 45px; margin: 34px auto 0; border-radius: 3px; font-size: 16px; line-height: 43px; color: #fff; border: 1px solid #fff; transition: all .5s } @media (min-width: 1024px) { .case .list .white-panel a .box .conn .more:hover { background-color: #fff; color: #dc0202 } } @media (min-width: 1024px) { .case .list .white-panel:hover a .box { opacity: 1 } } .case .noCon { width: 1400px; max-width: 92%; margin: 0 auto 0; border-top: 1px solid #f5f5f5; padding-top: 4px } .case .noCon span { display: block; text-align: center; width: 100%; border-top: 1px solid #f5f5f5; padding-top: 25px; font-size: 14px; line-height: 14px } @media (max-width: 1200px) { .case .title .tit { font-size: 16px; line-height: 18px } .case .list .white-panel a .con .t { font-size: 18px; line-height: 18px } .case .list .white-panel a .box .conn .tits { font-size: 18px; line-height: 18px } } @media (max-width: 768px) { .case .title .tit { font-size: 14px; line-height: 16px; margin-top: 10px } .case .list { width: 92%; margin: 0 auto 0 } } .caseInfo .list { overflow: initial; position: relative } .caseInfo .list ul li { width: 100%; height: auto; position: relative; background-color: #000 } .caseInfo .list ul li .bg { width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-image: url("../img/banner_bg1.png"); position: absolute; top: 0; left: 0 } .caseInfo .list ul li img { opacity: 0.3 } .caseInfo .list ul li.swiper-slide-active img { opacity: 1 } .caseInfo .list .a { width: 32px; height: 32px; background-position: left center; background-repeat: no-repeat; bottom: 40px; z-index: 10; display: block; position: absolute } .caseInfo .list .a.prev { background-image: url("../img/prev1.png"); left: 45px } .caseInfo .list .a.next { background-image: url("../img/next1.png"); background-position: right center; right: 45px } @media (min-width: 1024px) { .caseInfo .list .a:hover.prev { background-image: url("../img/prev_h.png") } .caseInfo .list .a:hover.next { background-image: url("../img/next_h.png") } } .caseInfo .list .con { width: 100%; text-align: center; position: absolute; top: 0; left: 0; padding-top: 20.4%; color: #fff; z-index: 10 } .caseInfo .list .con .tits { color: #fff } .caseInfo .list .con .tits span { position: relative } .caseInfo .list .con .tits span:after { width: 8px; height: 8px; border-radius: 100%; border: 3px solid #dc0202; content: ''; position: absolute; top: -2px; left: -34px; display: none; } .caseInfo .list .con .tit1 { color: #fff } .caseInfo .list .con .tit1 span { color: #dc0202; position: relative; margin-left: 45px } .caseInfo .list .con .tit1 span:after { width: 8px; height: 8px; border-radius: 100%; border: 3px solid #dc0202; content: ''; position: absolute; top: -2px; left: -24px } .caseInfo .list .con .tit { font-size: 16px; line-height: 18px; margin-top: 30px } .caseInfo .box1 { text-align: center; padding-top: 5.2%; padding-bottom: 7% } .caseInfo .box1 .tit { font-size: 20px; line-height: 20px; color: #000; margin-top: 28px } .caseInfo .box1 .con { width: 780px; margin: 7.7% auto 0; font-size: 16px; line-height: 28px; color: #000; max-width: 100% } .caseInfo .box1 .itemBox { margin-top: 12.3%; width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between } .caseInfo .box1 .itemBox .item { width: 190px; text-align: center } .caseInfo .box1 .itemBox .item .icon { width: 100%; height: 64px; position: relative } .caseInfo .box1 .itemBox .item .icon img { max-width: 100%; max-height: 100%; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto } .caseInfo .box1 .itemBox .item .t { font-family: TL; color: #000; font-weight: bold; margin-top: 42px } .caseInfo .box1 .itemBox .item .t span { font-size: 24px; color: #dc0202 } .caseInfo .box1 .itemBox .item .t1 { font-size: 14px; line-height: 14px; color: #000; margin-top: 7px } .caseInfo .box2 { padding-bottom: 5.2% } .caseInfo .box2 .item { position: relative } .caseInfo .box2 .item .pic { width: 50%; float: left } .caseInfo .box2 .item .con { width: 100%; position: absolute; top: 50%; transform: translateY(-50%); left: 0 } .caseInfo .box2 .item .con .conn { width: 35%; float: right } .caseInfo .box2 .item .con .conn .tits { position: relative } .caseInfo .box2 .item .con .conn .tits:after { width: 8px; height: 8px; border-radius: 100%; border: 3px solid #dc0202; content: ''; position: absolute; top: 3px; left: -27px; display: none; } .caseInfo .box2 .item .con .conn .tit { font-size: 16px; line-height: 26px; color: #000; margin-top: 40px } .caseInfo .box2 .item:nth-child(2n) .pic { float: right } .caseInfo .box2 .item:nth-child(2n) .con .conn { float: left } @media (max-width: 1366px) { .caseInfo .box1 .itemBox .item .t span { font-size: 20px } } @media (max-width: 1200px) { .caseInfo .box1 .tit { font-size: 16px; line-height: 16px; margin-top: 20px } .caseInfo .box1 .itemBox .item .t span { font-size: 16px } .caseInfo .box2 .item .con .conn .tit { margin-top: 20px } } @media (max-width: 768px) { .caseInfo .list .con .tits span:after { width: 6px; height: 6px; border-width: 2px; top: 0; left: -14px } .caseInfo .list .con .tit { font-size: 14px; line-height: 16px; margin-top: 10px } .caseInfo .list .a { bottom: 10px } .caseInfo .list .a.prev { left: 10px } .caseInfo .list .a.next { right: 10px } .caseInfo .box1 .tit { font-size: 14px; line-height: 16px; margin-top: 10px } .caseInfo .box1 .con { font-size: 14px; line-height: 22px; margin: 15px auto 0 } .caseInfo .box1 .itemBox .item .icon { height: 46px } .caseInfo .box1 .itemBox .item .t { margin-top: 15px } .caseInfo .box2 .item .con .conn .tits:after { width: 6px; height: 6px; border-width: 2px; top: 0; left: -15px } .caseInfo .box2 .item .pic { width: 100%; float: none !important } .caseInfo .box2 .item .con { position: relative; transform: translateY(0); padding: 20px 0 } .caseInfo .box2 .item .con .conn { width: 100%; float: none !important } .caseInfo .box2 .item .con .conn .tit { font-size: 14px; line-height: 22px; margin-top: 10px } } .partners .title { text-align: center; color: #000; padding: 5.1% 0 } .partners .title .tit { font-size: 20px; line-height: 26px; margin-top: 25px } .partners .box1 { /*background-image: url("../img/partners_bg.jpg");*/ padding-top: 3.9%; padding-bottom: 2.9% } .partners .box1 .content { width: 1400px; max-width: 92%; margin: 0 auto; position: relative; } .partners .box1 .content .mapX{ width: 80%; margin: 0 auto; } .partners .box1 .content .conX{ width: 100%; margin-top: 4%; } .partners .box1 .content .conX table{ box-sizing: border-box; border: 2px solid #aaa; font-size: 16px; line-height: 26px; color: #666; text-align: center; background-color: #f5f5f5; } .partners .box1 .content .conX table tr th{ height: 50px; background-color: #fff; border-bottom: 2px solid #aaa; border-right: 1px solid #ddd; color: #000; font-weight: normal; width: 350px; } .partners .box1 .content .conX table tr th:nth-child(2){ border-right: 2px solid #aaa; } .partners .box1 .content .conX table tr th:last-child{ border-right: 0; } .partners .box1 .content .conX table tr td{ height: 38px; border-bottom: 1px solid #aaa; border-right: 1px solid #ddd; } .partners .box1 .content .conX table tr td:nth-child(2){ border-right: 2px solid #aaa; } .partners .box1 .content .conX table tr td:last-child{ border-right: none; } .partners .box1 .content .conX table tr:last-child td{ border-bottom: none; } @media (max-width: 1200px){ .partners .box1 .content .conX table{ font-size: 14px; line-height: 24px; } .partners .box1 .content .conX table tr th{ height: 50px; } } @media (max-width: 768px){ .partners .box1 .content .conX{ width: 100%; overflow-x: scroll; } .partners .box1 .content .conX table{ width: 800px; font-size: 12px } .partners .box1 .content .mapX{ width: 100%; } } .partners .box1 .content .map { width: 54.6%; float: left } .partners .box1 .content .con { width: 34.6%; position: absolute; padding-top: 4%; right: 6.9% } .partners .box1 .content .con .item { background-color: #f5f5f5; box-shadow: 0 0 21px rgba(102,102,102,0.2); position: relative; } .partners .box1 .content .con .item:nth-child(1){ z-index: 10; } .partners .box1 .content .con .item:nth-child(2){ z-index: 9; } .partners .box1 .content .con .item:nth-child(3){ z-index: 8; } .partners .box1 .content .con .item:nth-child(4){ z-index: 7; } .partners .box1 .content .con .item:nth-child(5){ z-index: 6; } .partners .box1 .content .con .item .pic{ height: 0; overflow: hidden; } .partners .box1 .content .con .item .tit{ padding: 25px 0; cursor: pointer; } .partners .box1 .content .con .item .tit .t { font-size: 20px; line-height: 20px; color: #999; margin-left: 40px; width: calc(100% - 80px); position: relative; background-position: right center; background-repeat: no-repeat; background-image: url('../img/ccc.png'); } .partners .box1 .content .con .item .tit .t:after{ width: 8px; height: 8px; border-radius: 100%; border: 3px solid #dc0202; position: absolute; right: 0; top: 3px; content: ''; display: none !important; } .partners .box1 .content .con .item .tit .t1 { width: calc(100% - 40px); display: none; margin-left: 40px; margin-top: 14px; } .partners .box1 .content .con .item .tit .t1 .tt{ font-size: 16px; line-height: 18px; color: #666; padding-left: 32px; background-image: url("../img/partners_icon.png"); background-position: left center; background-repeat: no-repeat; float: left; margin-right: 50px; } .partners .box1 .content .con .item .tit .t1 .tt1{ font-size: 16px; line-height: 18px; color: #666; padding-left: 32px; background-image: url("../img/zt.png"); background-position: left center; background-repeat: no-repeat; float: left; margin-right: 50px; } .partners .box1 .content .con .item.on{ background-color: #fff; } .partners .box1 .content .con .item.on .pic{ height: auto; } .partners .box1 .content .con .item.on .tit .t{ color: #000; background: none; } .partners .box1 .content .con .item.on .tit .t1{ display: block; } .partners .box1 .content .con .item.on .tit .t:after{ display: block; } @media (max-width: 1366px) { .partners .box1 .content .con { right: 0 } .partners .box1 .content .con .item .tit .t{ width: calc(100% - 40px); margin-left: 20px; } .partners .box1 .content .con .item .tit .t1{ width: calc(100% - 20px); margin-left: 20px; } .partners .box1 .content .con .item .tit .t1 .tt{ margin-right: 30px; } } @media (max-width: 1200px) { .partners .title .tit { font-size: 16px; line-height: 20px } .partners .box1 .content .con .item .tit .t { font-size: 18px; margin-left: 20px } } @media (max-width: 768px) { .partners .title .tit { font-size: 14px; line-height: 16px; margin-top: 10px } .partners .box1 .content .map { float: none } .partners .box1 .content .con { width: 100%; margin-top: 15px; position: relative; padding-top: 0 } .partners .box1 .content .con .item .tit { padding: 20px 0 } .partners .box1 .content .con .item .tit .t{ background-size: 8px; } .partners .box1 .content .con .item .tit .t { font-size: 16px; margin-left: 10px; float: none; line-height: 20px } .partners .box1 .content .con .item .tit .t1 { width: calc(100% - 10px); margin-top: 0; margin-left: 10px; } .partners .box1 .content .con .item .tit .t1 .tt{ padding-left: 30px; float: none; line-height: 20px; margin-top: 10px; font-size: 14px; } .partners .box1 .content .con .item .tit .t1 .tt1{ padding-left: 30px; float: none; line-height: 20px; margin-top: 10px; font-size: 14px; } } .tableBox { padding: 7.3% 0 } /*.product .tableBox{ padding-bottom: 0; }*/ .tableBox.cc { background-color: #f5f5f5 } .tableBox .tits { text-align: center } .tableBox .tits span { position: relative } .tableBox .tits span:after { width: 8px; height: 8px; border-radius: 100%; border: 3px solid #dc0202; content: ''; position: absolute; top: 3px; left: -22px; display: none; } .tableBox .tit { text-align: center; font-size: 16px; line-height: 16px; color: #999; margin-top: 40px } .tableBox .tit a{ padding-left: 45px; display: inline-block; background-image: url('../img/ic1.png'); background-repeat: no-repeat; background-position: left center; color: #dc0202; } .tableBox .tit a i{ border-bottom: 1px solid #dc0202; display: inline-block; padding-bottom: 8px; } .tableBox .tableNew { width: 990px; max-width: 100%; margin: 50px auto 0; } .tableBox .tableNew .text{ width: 100%; height: 48px; background: none; border: none; box-sizing: border-box; padding-left: 20px; font-size: 16px; line-height: 26px; color: #999; } .tableBox .tableNew .text::-webkit-input-placeholder{ color: #999; } .tableBox .tableNew .text:-moz-placeholder{ color: #ccc; } .tableBox .tableNew .text::-moz-placeholder{ color: #ccc; } .tableBox .tableNew .text:-ms-input-placeholder{ color: #ccc; } .tableBox .tableNew .sel{ width: 100%; height: 48px; border: none; background: none; background-position: calc(100% - 20px) center; background-repeat: no-repeat; background-image: url(../img/sel.png); -moz-appearance: none; -moz-appearance: none; -webkit-appearance: none; padding-left: 20px; font-size: 16px; color: #999; } .tableBox .tableNew .tBox{ margin-bottom: 35px; } .tableBox .tableNew .tBox .t{ width: 46.5%; float: left; background-color: #fff; position: relative; } .tableBox .tableNew .tBox .t:nth-child(2n){ float: right; } .tableBox .tableNew .tBox .t .tt{ width: 50%; float: left; position: relative; } .tableBox .tableNew .tBox .t:before { width: 1px; height: 26px; background-color: #eaeaea; content: ''; position: absolute; top: 11px; left: 50%; opacity: 0.5; } .tableBox .tableNew .tBox .t .tt em { font-size: 16px; line-height: 48px; color: #999; position: absolute; top: 0; right: 20px; } .tableBox .tableNew .tBox1 .tt{ width: 46.5%; float: left; background-color: #fff; position: relative; } .tableBox .tableNew .tBox1 .tt1{ width: 46.5%; float: right; position: relative; } .tableBox .tableNew .tBox1 .tt1 .ttt{ width: 288px; height: 48px; background-color: #fff; border-radius: 4px; max-width: calc(100% - 168px); float: left; overflow: hidden; } .tableBox .tableNew .tBox1 .tt1 .ttt .text{ width: calc(100% - 100px); float: left; } .tableBox .tableNew .tBox1 .tt1 .ttt .but{ width: 100px; height: 48px; border: none; background: none; box-sizing: border-box; display: block; float: right; text-align: center; font-size: 14px; line-height: 48px; color: #fff; background-color: #dc0202; } .tableBox .tableNew .tBox1 .tt1 .submit{ width: 148px; height: 48px; border: none; background: none; background-color: #dc0202; text-align: center; font-size: 16px; line-height: 48px; border-radius: 4px; color: #fff; float: right; display: block; } .tableBox .tableNew span{ width: 10px; height: 48px; position: absolute; left: -17px; top: 0; background-position: center; background-repeat: no-repeat; background-image: url(../img/xin.png); } @media (max-width: 768px){ .tableBox .tit a{ background-size: 20px auto; padding-left: 24px; } .tableBox .tit{ font-size: 12px; line-height: 14px; margin-top: 10px; } .tableBox .tableNew .tBox{ margin-bottom: 0; } .tableBox .tableNew .tBox .t{ width: 100%; float: none !important; margin-bottom: 10px; } .tableBox .tableNew .text{ padding-left: 10px; font-size: 14px; line-height: 38px; height: 38px; } .tableBox .tableNew .sel{ font-size: 14px; height: 38px; } .tableBox .tableNew .tBox .t .tt em{ line-height: 38px; font-size: 14px; right: 10px; } .tableBox .tableNew span{ height: 38px; width: 7px; background-size: 100% auto; left: -12px; } .tableBox .tableNew .tBox1 .tt{ width: 100%; float: none; margin-bottom: 10px; } .tableBox .tableNew .tBox1 .tt1{ width: 100%; float: none; } .tableBox .tableNew .tBox1 .tt1 .ttt{ width: 100%; float: none; max-width: 100%; height: 38px; } .tableBox .tableNew .tBox1 .tt1 .ttt .text{ } .tableBox .tableNew .tBox1 .tt1 .ttt .but{ width: 100px; height: 38px; line-height: 38px; } .tableBox .tableNew .tBox1 .tt1 .ttt a img{ width: 100%; } .tableBox .tableNew .tBox1 .tt1 .submit{ width: 120px; height: 38px; line-height: 38px; font-size: 14px; float: none; margin: 15px auto 0; } } /*.tableBox .tableNew .t { margin-bottom: 34px } .tableBox .tableNew .t .text { width: 46.5%; float: left; margin-right: 7%; background: none; background-color: #f5f5f5; box-sizing: border-box; padding-left: 20px; border-radius: 3px; border: none; font-size: 16px; line-height: 30px; color: #999; height: 48px } .tableBox .tableNew .t .text.text2 { margin-right: 0; } .tableBox .tableNew .t .tt { width: 20.3%; height: 48px; float: right; border-radius: 3px; background-color: #ddd } .tableBox .tableNew .t .tt .text1 { width: calc(100% - 100px); padding-left: 20px; font-size: 16px; line-height: 30px; color: #999; float: left; border: none; background: none; box-sizing: border-box } .tableBox .tableNew .t .tt .button { width: 100px; height: 48px; border: none; background: none; text-align: center; font-size: 16px; line-height: 48px; float: left } .tableBox .tableNew .t1 .sel { border: none; background: none; font-size: 16px; line-height: 30px; color: #999; padding-left: 16px; display: block; height: 48px; padding-right: 10px; background-color: #f5f5f5; } .tableBox .tableNew .t1 .tt.cc .sel{ background-color: #f5f5f5 !important; } .tableBox .tableNew .t1 .tt { width: 46.5%; float: left; margin-right: 7%; background-color: #f5f5f5; box-sizing: border-box; border-radius: 3px; height: 48px; position: relative } .tableBox .tableNew .t1 .tt:nth-child(2){ margin-right: 0; } .tableBox .tableNew .t1 .tt .sel { width: 50%; float: left } .tableBox .tableNew .t1 .tt:after { width: 1px; height: 26px; top: 11px; left: 50%; margin-left: -0.5px; background-color: #eaeaea; position: absolute; content: '' } .tableBox .tableNew .t1 .tt.s .sel { width: 100% } .tableBox .tableNew .t1 .tt.s:after { display: none } .tableBox .tableNew .t1 .submit { width: 148px; margin: 52px auto 0; height: 48px; border-radius: 3px; background: none; border: none; text-align: center; font-size: 16px; line-height: 48px; display: block; color: #fff; background-color: #dc0202 }*/ /*@media (max-width: 768px) { .tableBox .tits span:after { width: 6px; height: 6px; left: -14px; top: 0; border-width: 2px } .tableBox .tit { margin-top: 10px; font-size: 14px; line-height: 16px } .tableBox .tableNew { margin-top: 25px } .tableBox .tableNew .t { margin-bottom: 0 } .tableBox .tableNew .t .text { width: 100%; float: none; margin-bottom: 10px } .tableBox .tableNew .t .text.text2 { width: 100% } .tableBox .tableNew .t .tt { width: 100%; float: none; margin-bottom: 10px } .tableBox .tableNew .t1 .tt { width: 100%; float: none; margin-bottom: 10px } .tableBox .tableNew .t1 .submit { width: 130px; margin: 0 auto 0; float: none } }*/ .product .box1 { margin: 9% auto; position: relative } .product .box1 .content { position: absolute; top: 0; left: 0; width: 100%; height: 100% } .product .box1 .content .w1200 { height: 100% } .product .box1 .content .w1200 .conLeft { width: 38.3%; float: right } .product .box1 .content .w1200 .conLeft .tits span{ color: #dc0202; margin-left: 0 !important; position: relative; } .product .box1 .content .w1200 .conLeft .titleTabs{ margin-top: 30px; } .product .box1 .content .w1200 .conLeft .titleTabs .tt { border-bottom: 2px solid #bbb } .product .box1 .content .w1200 .conLeft .titleTabs .tt a { font-size: 24px; line-height: 52px; color: #bbb; padding: 0 30px; position: relative } .product .box1 .content .w1200 .conLeft .titleTabs .tt a:after { width: 8px; height: 8px; border-radius: 100%; border: 3px solid #dc0202; position: absolute; left: -25px; top: 0; content: ''; display: none } .product .box1 .content .w1200 .conLeft .titleTabs .tt a:before { width: 100%; height: 6px; left: 0; bottom: -11px; background-color: #dc0202; content: ''; display: none; position: absolute } .product .box1 .content .w1200 .conLeft .titleTabs .tt a.on { font-size: 40px; color: #000; font-weight: bold; padding: 0 } .product .box1 .content .w1200 .conLeft .titleTabs .tt a.on:after { display: none; } .product .box1 .content .w1200 .conLeft .titleTabs .tt a.on:before { display: block } .product .box1 .content .w1200 .conLeft .tabs { margin-top: 62px; position: relative } .product .box1 .content .w1200 .conLeft .tabs a { display: block; padding-left: 27px; font-size: 16px; line-height: 32px; color: #bbb; position: relative } .product .box1 .content .w1200 .conLeft .tabs a span { font-weight: bold; font-family: LT } .product .box1 .content .w1200 .conLeft .tabs a:after { width: 8px; height: 8px; border-radius: 100%; border: 3px solid #dc0202; content: ''; position: absolute; top: 9px; left: 0; display: none } .product .box1 .content .w1200 .conLeft .tabs a.on { font-size: 24px; color: #191919 } .product .box1 .content .w1200 .conLeft .tabs a.on span { color: #dc0202 } .product .box1 .content .w1200 .conLeft .tabs a.on:after { display: none; } .product .box1 .content .w1200 .conLeft .tabs .t { position: absolute; top: 0; right: 0; display: none !important; } .product .box1 .content .w1200 .conLeft .tabs .t .ttt { position: relative; cursor: pointer; display: none } .product .box1 .content .w1200 .conLeft .tabs .t .ttt .tt { width: 133px; height: 46px; text-align: center; font-size: 0; box-sizing: border-box; border-radius: 3px; border: 1px solid #eaeaea } .product .box1 .content .w1200 .conLeft .tabs .t .ttt .tt span { font-size: 16px; line-height: 44px; color: #999; padding-right: 36px; display: inline-block; background-position: right center; background-repeat: no-repeat; background-image: url("../img/index_icon1.png") } .product .box1 .content .w1200 .conLeft .tabs .t .ttt .tt span i { font-family: LT; font-weight: bold } .product .box1 .content .w1200 .conLeft .tabs .t .ttt .ewm { width: 133px; height: 146px; background-color: #fff; box-sizing: border-box; border-radius: 3px; border: 1px solid #eaeaea; position: absolute; top: 0; right: 0; transform-origin: top right; transform: scale(0); opacity: 0; transition: all .5s; z-index: 100 } .product .box1 .content .w1200 .conLeft .tabs .t .ttt .ewm .tits { text-align: center; font-size: 16px; line-height: 18px; color: #000; padding-top: 17px } .product .box1 .content .w1200 .conLeft .tabs .t .ttt .ewm img { width: 67px; display: block; margin: 24px auto 0 } @media (min-width: 1024px) { .product .box1 .content .w1200 .conLeft .tabs .t .ttt:hover .ewm { transform: scale(1); opacity: 1 } } .product .box1 .content .w1200 .conLeft .line { width: calc(100% + 2000px); height: 1px; background-color: #f0f0f0; margin-left: -2000px; margin-top: 22px } .product .box1 .content .w1200 .conLeft .itemBox { margin-top: 30px } .product .box1 .content .w1200 .conLeft .itemBox .item { display: none; } .product .box1 .content .w1200 .conLeft .itemBox .item .con { width: calc(100% - 27px); padding-left: 27px } .product .box1 .content .w1200 .conLeft .itemBox .item .con .tits { font-size: 24px; line-height: 26px; color: #000; font-weight: bold; } .product .box1 .content .w1200 .conLeft .itemBox .item .con .tit { font-size: 16px; line-height: 26px; color: #666; margin-top: 15px; text-align: justify; height: 156px; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .product .box1 .content .w1200 .conLeft .itemBox .item .tags { width: 100%; margin-top: 58px } .product .box1 .content .w1200 .conLeft .itemBox .item .tags a { width: 133px; height: 46px; text-align: center; font-size: 16px; line-height: 44px; color: #dc0202; box-sizing: border-box; border-radius: 3px; border: 1px solid #dc0202; display: block; float: left; margin-right: 30px; transition: all .5s } @media (min-width: 1024px) { .product .box1 .content .w1200 .conLeft .itemBox .item .tags a:hover { background-color: #dc0202; color: #fff } } .product .box1 .content .w1200 .conLeft .itemBox .item .tags .t { float: left; position: relative; cursor: pointer } .product .box1 .content .w1200 .conLeft .itemBox .item .tags .t .tt { width: 133px; height: 46px; text-align: center; font-size: 0; box-sizing: border-box; border-radius: 3px; border: 1px solid #eaeaea } .product .box1 .content .w1200 .conLeft .itemBox .item .tags .t .tt span { font-size: 16px; line-height: 44px; color: #999; padding-right: 36px; display: inline-block; background-position: right center; background-repeat: no-repeat; background-image: url("../img/index_icon1.png") } .product .box1 .content .w1200 .conLeft .itemBox .item .tags .t .tt span i { font-family: LT; font-weight: bold } .product .box1 .content .w1200 .conLeft .itemBox .item .tags .t .ewm { width: 133px; height: 146px; background-color: #fff; box-sizing: border-box; border-radius: 3px; border: 1px solid #eaeaea; position: absolute; top: 0; right: 0; transform-origin: top right; transform: scale(0); opacity: 0; transition: all .5s; z-index: 100 } .product .box1 .content .w1200 .conLeft .itemBox .item .tags .t .ewm .tits { text-align: center; font-size: 16px; line-height: 18px; color: #000; padding-top: 17px } .product .box1 .content .w1200 .conLeft .itemBox .item .tags .t .ewm img { width: 67px; display: block; margin: 24px auto 0 } @media (min-width: 1024px) { .product .box1 .content .w1200 .conLeft .itemBox .item .tags .t:hover .ewm { transform: scale(1); opacity: 1 } } .product .box1 .content .w1200 .conLeft .itemBox .item .con1 { width: 100%; padding: 20px 27px; box-sizing: border-box; border: 1px solid #eaeaea; font-size: 14px; line-height: 24px; color: #999; margin-top: 27px } .product .box1 .content .w1200 .conLeft .itemBox .item .con1 p span { color: #333 } .product .box1 .listBox .btns { width: 100%; margin-top: 20px; } .product .box1 .listBox .btns .btn { float: right; width: 86px } .product .box1 .listBox .btns .btn a { width: 32px; height: 32px; display: block; float: left; background-position: left center; background-repeat: no-repeat } .product .box1 .listBox .btns .btn a.prev { background-image: url("../img/prev.png") } .product .box1 .listBox .btns .btn a.next { background-image: url("../img/next.png"); background-position: right center; float: right } @media (min-width: 1024px) { .product .box1 .listBox .btns .btn a:hover.prev { background-image: url("../img/prev_h.png") } .product .box1 .listBox .btns .btn a:hover.next { background-image: url("../img/next_h.png") } } .product .box1 .listBox .btns .num { font-size: 16px; line-height: 18px; color: #aeaeae; font-weight: bold; float: right; padding-top: 14px; margin-right: 60px; position: relative } .product .box1 .listBox .btns .num span { color: #dc0000; margin-right: 34px } .product .box1 .listBox .btns .num em { width: 3px; height: 16px; bottom: 1px; left: 50%; margin-left: -1.5px; background-color: #aeaeae; display: block; position: absolute } .product .box1 .listBox { width: 48.7%; float: left; overflow: hidden; position: relative; z-index: 15 } .product .box1 .listBox .list { overflow: inherit; width: 100%; position: relative } .product .box1 .listBox .list ul { width: 100% } .product .box1 .listBox .list ul li { width: 34.7%; margin-left: 9.6% } .product .box1 .listBox .list ul li:last-child { margin-right: 0 } .product .box1 .listBox .list ul li img { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%) } .product .box1 .listBox .list ul li span { font-size: 24px; line-height: 18px; color: #aeaeae; font-family: LT; font-weight: bold; background-color: #fff; position: absolute; bottom: 0; right: 0; padding-left: 9px; padding-top: 23px } .product .box1 .listBox .list ul li span em { font-size: 16px; margin-right: 4px } .product .box1 .listBox .list ul li:after { width: 8px; height: 8px; border-radius: 100%; border: 3px solid #dc0202; content: ''; position: absolute; top: 18px; left: 18px; display: none } .product .box1 .listBox .list ul li.swiper-slide-active img { -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%) } .product .box1 .listBox .list ul li.swiper-slide-active span em { color: #dc0000 } .product .box1 .listBox .list ul li.swiper-slide-active:after { display: none } .product .box1 .listBox .list:after { width: 2000px; height: 49%; position: absolute; bottom: 44px; left: 0; background-color: #f0f0f0; content: '' } .product .box1.pp .listBox { float: left } .product .box1.pp .listBox .list ul li { margin-left: 9.6%; margin-right: 0 } .product .box1.pp .content .conLeft { float: right } .product .box1.pp .content .btns { left: auto; right: 0 } .product .box1.pp .content .btns .btn { float: right } .product .box1.pp .content .btns .num { float: right } .product .box2 { padding-top: 12%; padding-bottom: 11.8%; position: relative; } .product .box2:after{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 3; background-color: rgba(0,0,0,0.3); content: ''; } .product .box2.c { padding-bottom: 7.6% } .product .box2 .tits { text-align: center; color: #fff } .product .box2 .tits span { position: relative; margin-left: 0 !important; } .product .box2 .tits span:after { width: 8px; height: 8px; border-radius: 100%; border: 3px solid #dc0202; content: ''; position: absolute; top: -2px; left: -34px; display: none; } .product .box2 .tit { text-align: center; font-size: 20px; line-height: 20px; color: #fff; margin-top: 33px } .product .box2 .itemBox { margin-top: 7% } .product .box2 .itemBox .item { width: 25%; float: left; height: 180px; margin-right: 12.5%; margin-bottom: 60px } .product .box2 .itemBox .item:nth-child(3n) { margin-right: 0 } .product .box2 .itemBox .item .conLeft { width: 66px; height: auto; float: left } .product .box2 .itemBox .item .conLeft .icon { width: 66px; height: 66px; position: relative } .product .box2 .itemBox .item .conLeft .icon img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; max-width: 100%; max-height: 100% } .product .box2 .itemBox .item .conLeft p { text-align: center; font-size: 16px; line-height: 16px; color: #fff; margin-top: 24px } .product .box2 .itemBox .item .conRight { width: calc(100% - 102px); float: right; font-size: 12px; line-height: 20px; color: #fff; font-family: DFPHL; padding-top: 15px } .product .box2 .list { margin-top: 7.5% } .product .box2 .list ul li { width: 10.7%; float: left; margin-right: 19%; margin-bottom: 53px } .product .box2 .list ul li:nth-child(4n) { margin-right: 0 } .product .box2 .list ul li .icon { width: 100%; height: auto; position: relative } .product .box2 .list ul li .icon span { width: 36px; height: 36px; background-color: #fff; border-radius: 100%; text-align: center; font-size: 20px; line-height: 36px; font-family: TL; color: #dc0202; position: absolute; top: 19px; right: 1px; font-weight: bold } .product .box2 .list ul li p { text-align: center; font-size: 16px; line-height: 16px; color: #fff; margin-top: 5px } .product .box3 { background-color: #f5f5f5; padding: 9.1% 0 } .product .box3 .box-new { position: relative } .product .box3 .box-new .listBox { width: 48.7%; float: right; overflow: hidden; position: relative; z-index: 15 } .product .box3 .box-new .listBox .list { overflow: inherit; width: 100%; position: relative } .product .box3 .box-new .listBox .list ul { width: 100% } .product .box3 .box-new .listBox .list ul li { width: 34.7%; margin-right: 9.6%; position: relative } .product .box3 .box-new .listBox .list ul li:last-child { margin-right: 0 } .product .box3 .box-new .listBox .list ul li .imgBox { width: 100% } .product .box3 .box-new .listBox .list ul li .imgBox img { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); display: none } .product .box3 .box-new .listBox .list ul li .bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url("../img/product_bg.png") } .product .box3 .box-new .listBox .list ul li span { font-size: 24px; line-height: 18px; color: #aeaeae; font-family: LT; font-weight: bold; background-color: #fff; position: absolute; bottom: 0; right: 0; padding-left: 9px; padding-top: 23px } .product .box3 .box-new .listBox .list ul li span em { font-size: 16px; margin-right: 4px } .product .box3 .box-new .listBox .list ul li:after { width: 8px; height: 8px; border-radius: 100%; border: 3px solid #dc0202; content: ''; position: absolute; top: 18px; left: 18px; display: none } .product .box3 .box-new .listBox .list ul li.swiper-slide-active .imgBox img { -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%) } .product .box3 .box-new .listBox .list ul li.swiper-slide-active .bg { display: none } .product .box3 .box-new .listBox .list ul li.swiper-slide-active span em { color: #dc0000 } .product .box3 .box-new .listBox .list ul li.swiper-slide-active:after { display: none; } .product .box3 .box-new .listBox .list:after { width: 2000px; height: 49%; position: absolute; bottom: 44px; left: 0; background-color: #f0f0f0; content: '' } .product .box3 .box-new .content { position: absolute; top: 0; left: 0; width: 100%; height: 100% } .product .box3 .box-new .content .w1200 { height: 100% } .product .box3 .box-new .content .w1200 .conLeft { width: 38.3%; float: left } .product .box3 .box-new .content .w1200 .conLeft .title { position: relative } .product .box3 .box-new .content .w1200 .conLeft .title:after { width: 8px; height: 8px; border-radius: 100%; border: 3px solid #dc0202; content: ''; position: absolute; top: -2px; left: -28px; display: none; } .product .box3 .box-new .content .w1200 .conLeft .tabs { margin-top: 10px; position: relative } .product .box3 .box-new .content .w1200 .conLeft .tabs a { display: block; padding-left: 27px; font-size: 16px; line-height: 32px; color: #bbb; position: relative } .product .box3 .box-new .content .w1200 .conLeft .tabs a span { font-weight: bold; font-family: LT } .product .box3 .box-new .content .w1200 .conLeft .tabs a:after { width: 8px; height: 8px; border-radius: 100%; border: 3px solid #dc0202; content: ''; position: absolute; top: 9px; left: 0; display: none } .product .box3 .box-new .content .w1200 .conLeft .tabs a.on { font-size: 24px; color: #191919 } .product .box3 .box-new .content .w1200 .conLeft .tabs a.on span { color: #dc0202 } .product .box3 .box-new .content .w1200 .conLeft .tabs a.on:after { display: none; } @media (max-width: 1200px){ .product .box3 .box-new .content .w1200 .conLeft .tabs a.on { font-size: 20px; } } @media (max-width: 768px){ .product .box3 .box-new .content .w1200 .conLeft .tabs a.on { font-size: 18px; } .product .box3 .box-new .content .w1200 .conLeft .tabs a { font-size: 14px; line-height: 22px; padding-left: 18px; } .product .box3 .box-new .content .w1200 .conLeft .tabs a:after { width: 6px; height: 6px; border-width: 2px; top: 6px; } .product .box1 .listBox .btns{ width: 92%; margin: 20px auto 0; } .product .box1 .listBox .btns .num{ float: left; } } .product .box3 .box-new .content .w1200 .conLeft .line { width: calc(100% + 2000px); height: 1px; background-color: #e5e5e5; margin-left: 27px; margin-top: 35px } .product .box3 .box-new .content .w1200 .conLeft .itemBox { margin-top: 44px } .product .box3 .box-new .content .w1200 .conLeft .itemBox .item { display: none } .product .box3 .box-new .content .w1200 .conLeft .itemBox .item .con { width: calc(100% - 27px); padding-left: 27px } .product .box3 .box-new .content .w1200 .conLeft .itemBox .item .con .tits { font-size: 24px; line-height: 26px; color: #000; font-weight: bold } .product .box3 .box-new .content .w1200 .conLeft .itemBox .item .con .tit { font-size: 16px; line-height: 26px; color: #666; margin-top: 52px; text-align: justify } .product .box3 .box-new .content .w1200 .conLeft .itemBox .item .colorBox { margin-top: 50px } .product .box3 .box-new .content .w1200 .conLeft .itemBox .item .colorBox .t { padding-left: 27px; margin-bottom: 12px; position: relative } .product .box3 .box-new .content .w1200 .conLeft .itemBox .item .colorBox .t span { width: 70px; height: 24px; border-radius: 3px; display: block; box-sizing: border-box } .product .box3 .box-new .content .w1200 .conLeft .itemBox .item .colorBox .t:after { width: 8px; height: 8px; border: 3px solid #dc0202; top: 5px; left: 0; content: ''; display: block; position: absolute; border-radius: 100%; display: none } .product .box3 .box-new .content .w1200 .conLeft .itemBox .item .colorBox .t.on span { border: 1px solid #dc0000 } .product .box3 .box-new .content .w1200 .conLeft .itemBox .item .colorBox .t.on:after { display: none; } .product .box3 .box-new .listBox .btns { width: 100%; margin-top: 20px; } .product .box3 .box-new .listBox .btns .btn { float: left; width: 86px } .product .box3 .box-new .listBox .btns .btn a { width: 32px; height: 32px; display: block; float: left; background-position: left center; background-repeat: no-repeat } .product .box3 .box-new .listBox .btns .btn a.prev { background-image: url("../img/prev.png") } .product .box3 .box-new .listBox .btns .btn a.next { background-image: url("../img/next.png"); background-position: right center; float: right } @media (min-width: 1024px) { .product .box3 .box-new .listBox .btns .btn a:hover.prev { background-image: url("../img/prev_h.png") } .product .box3 .box-new .listBox .btns .btn a:hover.next { background-image: url("../img/next_h.png") } } .product .box3 .box-new .listBox .btns .num { font-size: 16px; line-height: 18px; color: #aeaeae; font-weight: bold; float: left; padding-top: 14px; margin-left: 60px; position: relative } .product .box3 .box-new .listBox .btns .num span { color: #dc0000; margin-right: 34px } .product .box3 .box-new .listBox .btns .num em { width: 3px; height: 16px; bottom: 1px; left: 50%; margin-left: -1.5px; background-color: #aeaeae; display: block; position: absolute } .product .box4 { padding-top: 7.3%; padding-bottom: 5.7% } .product .box4 .tits { text-align: center } .product .box4 .tits span { position: relative } .product .box4 .tits span:after { width: 8px; height: 8px; border-radius: 100%; border: 3px solid #dc0202; content: ''; position: absolute; top: -2px; left: -22px; display: none; } .product .box4 .tit { font-size: 16px; line-height: 16px; color: #000; text-align: center; margin-top: 35px } .product .box4 .list { margin-top: 6.7% } .product .box4 .list ul li { width: 30.3%; float: left; margin-right: 4.55%; background-color: #fff; box-shadow: 0 5px 20px rgba(153,153,153,0.2); height: 260px; box-sizing: border-box; padding: 30px; margin-bottom: 30px } .product .box4 .list ul li:nth-child(2n) { margin-right: 0 } .product .box4 .list ul li a { width: 100%; height: 100%; display: block; box-sizing: border-box; position: relative } .product .box4 .list ul li a .t { font-size: 20px; line-height: 26px; color: #000; padding-top: 6px; position: relative } .product .box4 .list ul li a .t:after { width: 8px; height: 8px; border-radius: 100%; border: 3px solid #dc0202; display: block; position: absolute; top: -14px; left: -14px; content: ''; display: none } .product .box4 .list ul li a .t1 { width: 100%; position: absolute; bottom: 0px; left: 0 } .product .box4 .list ul li a .t1 .tt { padding-left: 62px; font-size: 16px; line-height: 16px; color: #000; padding-top: 30px; background-position: left center; background-repeat: no-repeat; background-image: url("../img/product_icon7.png") } .product .box4 .list ul li a .t1 .tt span { color: #999 } .product .box4 .list ul li a .t1 .tt1 { width: 26px; height: 23px; position: absolute; bottom: 0; right: 0; background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url("../img/product_icon8.png") } @media (min-width: 1024px) { .product .box4 .list ul li:hover a .t:after { display: none; } .product .box4 .list ul li:hover a .t1 .tt { background-image: url("../img/product_icon7_h.png") } .product .box4 .list ul li:hover a .t1 .tt1 { background-image: url("../img/product_icon8_h.png") } } .product .box5 { /*background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url("../img/about_bg.jpg");*/ background-color: #fff; padding-top: 5.2% } .product .box5 .pic { width: 23.9%; float: left } .product .box5 .con { width: 600px; float: right; padding-top: 53px; text-align: center; } .product .box5 .con .tits span { font-size: 44px; color: #dc0000; display: block; } .product .box5 .con .tit { font-size: 16px; line-height: 26px; color: #000; margin-top: 32px } .product .box5 .con a { width: 143px; height: auto; display: block; margin: 25px auto 0; } @media (max-width: 1700px) { .product .box1 .content .w1200 .conLeft .tabs { margin-top: 25px } .product .box1 .content .w1200 { padding-bottom: 70px } } @media (max-width: 1570px) { .product .box1 .content .w1200 .conLeft .itemBox .item .tags{ margin-top: 32px; } .product .box3 .box-new .content .w1200 .conLeft .line { margin-top: 35px } .product .box3 .box-new .content .w1200 .conLeft .itemBox { margin-top: 25px } .product .box3 .box-new .content .w1200 .conLeft .itemBox .item .con .tit { margin-top: 20px } .product .box3 .box-new .content .w1200 .conLeft .itemBox .item .colorBox { margin-top: 30px } } @media (max-width: 1460px) { .product .box1 .content .w1200 .conLeft .line { margin-top: 10px } .product .box1 .content .w1200 .conLeft .itemBox { margin-top: 15px } .product .box1 .content .w1200 .conLeft .itemBox .item .con1 { margin-top: 20px } } @media (max-width: 1366px) { .product .box1 .listBox { width: 55% } .product .box1 .listBox .list ul li { width: 40%; margin-left: 4% } .product .box1 .content .w1200 { padding-bottom: 0 } .product .box1 .content .w1200 .conLeft .titleTabs .tt a.on { font-size: 30px } .product .box1 .content .w1200 .conLeft .titleTabs .tt a { line-height: 42px } .product .box1 .content .w1200 .conLeft .titleTabs .tt a:before { bottom: -9px } .product .box3 .box-new .listBox .list ul li { width: 42%; margin-right: 4% } } @media (max-width: 1280px) { .product .box2 .itemBox .item .conRight { width: calc(100% - 90px); padding-top: 10px } } @media (max-width: 1200px) { .product .box1 .content .w1200 .conLeft .tabs a.on { font-size: 20px } .product .box1 .content .w1200 .conLeft .itemBox .item .con .tits { font-size: 20px; line-height: 20px } .product .box1 .content .w1200 .conLeft .titleTabs .tt a.on { font-size: 24px } .product .box1 .content .w1200 .conLeft .titleTabs .tt a { font-size: 20px; line-height: 32px } .product .box1 .content .w1200 .conLeft .titleTabs .tt { padding-bottom: 3px } .product .box1 .listBox .list ul li { width: 46%; margin-left: 4% } .product .box2 .tit { font-size: 16px; line-height: 16px; margin-top: 20px } .product .box5 .con .tits span { font-size: 40px } } @media (max-width: 1100px) { .product .box2 .itemBox .item { width: 31%; margin-right: 3.5% } } @media (max-width: 1024px) { .product .box1 .listBox .list ul li { width: 54%; margin-left: 4% } } @media (max-width: 768px) { .product .box1 .content .w1200 .conLeft .itemBox .item .tags{ margin-top: 20px; } .product .box1 .content .w1200 .conLeft .itemBox .item .tags .t{ display: none; } .product .box1 .content .w1200 .conLeft .itemBox .item .tags a{ width: 120px; height: 34px; line-height: 32px; font-size: 14px; } .product .box1 .listBox { width: 100%; float: none } .product .box1 .content { position: relative; margin-top: 20px } .product .box1 .content .w1200 .conLeft { width: 100%; float: none } .product .box1 .content .w1200 .conLeft .titleTabs .tt a { font-size: 16px; line-height: 22px; padding: 0 15px } .product .box1 .content .w1200 .conLeft .titleTabs .tt a:after { width: 6px; height: 6px; border-width: 2px; top: 0; left: -14px } .product .box1 .content .w1200 .conLeft .titleTabs .tt a:before { height: 3px; bottom: -6px } .product .box1 .content .w1200 .conLeft .titleTabs .tt a.on { font-size: 18px } .product .box1 .content .w1200 .conLeft .titleTabs .tt { border-width: 1px } .product .box1 .content .w1200 .conLeft .tabs { margin-top: 15px } .product .box1 .content .w1200 .conLeft .tabs a { font-size: 14px; line-height: 22px; padding-left: 18px } .product .box1 .content .w1200 .conLeft .tabs a:after { width: 6px; height: 6px; border-width: 2px; top: 6px } .product .box1 .content .w1200 .conLeft .tabs a.on { font-size: 18px } .product .box1 .content .w1200 .conLeft .itemBox .item .con { padding-left: 18px; width: calc(100% - 18px) } .product .box1 .content .w1200 .conLeft .itemBox .item .con .tits { font-size: 16px; line-height: 16px } .product .box1 .content .w1200 .conLeft .itemBox .item .con .tit { font-size: 14px; line-height: 22px; margin-top: 5px; height: 220px; } .product .box1 .content .w1200 .conLeft .itemBox .item .con1 { padding: 10px 18px; margin-top: 10px } .product .box1 .content .w1200 .btns { width: 100%; position: relative; margin-top: 20px } .product .box1 .content .w1200 .btns .btn { float: left } .product .box2 .itemBox .item { width: 100%; margin-right: 0; height: auto; margin-bottom: 20px } .product .box2 .tit { margin-top: 10px; font-size: 14px; line-height: 14px } .product .box2 .tits span { margin-left: 0 !important; } .product .box2 .tits span:after { width: 6px; height: 6px; border-width: 2px; left: -14px; top: 0; display: none; } .product .box3 .box-new .listBox { width: 100%; float: none } .product .box3 .box-new .listBox .list ul li { width: 44% } .product .box3 .box-new .content { position: relative; margin-top: 20px } .product .box3 .box-new .content .w1200 .conLeft { width: 100%; float: none } .product .box3 .box-new .content .w1200 .conLeft .title:after { width: 6px; height: 6px; left: -14px; border-width: 2px; top: 0 } .product .box3 .box-new .content .w1200 .conLeft .line { margin-top: 10px; margin-left: 18px } .product .box3 .box-new .content .w1200 .conLeft .itemBox { margin-top: 15px } .product .box3 .box-new .content .w1200 .conLeft .itemBox .item .con { width: calc(100% - 18px); padding-left: 18px } .product .box3 .box-new .content .w1200 .conLeft .itemBox .item .con .tits { font-size: 16px; line-height: 16px } .product .box3 .box-new .content .w1200 .conLeft .itemBox .item .con .tit { font-size: 14px; line-height: 22px; margin-top: 10px } .product .box3 .box-new .content .w1200 .btns { width: 100%; position: relative; margin-top: 20px } .product .box3 .box-new .content .w1200 .btns .num { float: right } .product .box2 .list ul li { width: 22.7%; margin-right: 15.95%; margin-bottom: 20px } .product .box2 .list ul li:nth-child(4n) { margin-right: 15.95% } .product .box2 .list ul li:nth-child(3n) { margin-right: 0 } .product .box2 .list ul li .icon span { font-size: 16px; line-height: 26px; width: 26px; height: 26px; top: 4px } .product .box2 .list ul li p { font-size: 14px; line-height: 14px; margin-top: 10px } .product .box4 .tits span:after { width: 6px; height: 6px; top: 0; left: -14px; border-width: 2px; display: none; } .product .box4 .tit { font-size: 14px; line-height: 14px; margin-top: 10px } .product .box4 .list ul li { width: 100%; float: none; margin-bottom: 20px; padding: 15px; height: 160px } .product .box4 .list ul li a .t { font-size: 16px; line-height: 24px } .product .box5 .con .tits span { font-size: 20px; margin-left: 5px } .product .box5 .pic { width: 29%; padding-top: 10px; } .product .box5 .con { width: 230px; padding-top: 0 } .product .box5 .con .tit { font-size: 14px; line-height: 22px; margin-top: 10px } .product .box5 .con a { width: 100px; margin-top: 10px } .product .box1 .content .w1200 .conLeft .tabs .t { display: none } .product .box1 .listBox .list ul li span { padding-top: 10px } .product .box1 .listBox .list:after { bottom: 31px } .index-banner .list .btns{ bottom: 15px; } .product .box1 .content .w1200 .conLeft .titleTabs{ margin-top: 15px; } .product .box3 .box-new .listBox .btns{ width: 92%; margin: 20px auto 0; } .product .box3 .box-new .listBox .btns .num{ float: right; } } .tf { background-color: #fff !important } .tableTk{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1000; display: none; } .tableTk .box{ width: 540px; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: #fff; padding: 35px 40px 30px; border-radius: 4px; box-shadow: 0 0 14px rgba(0,0,0,0.2); box-sizing: border-box; } .tableTk .box .close{ width: 40px; height: 40px; position: absolute; top: -20px; right: -20px; background-size: cover; background-repeat: no-repeat; display: block; background-image: url('../img/close121.png'); } .tableTk .box .title{ text-align: center; padding-bottom: 30px; border-bottom: 1px solid #f5f5f5; } .tableTk .box .title .tits{ font-size: 30px; line-height: 30px; color: #000; font-weight: bold; } /*.tableTk .box .title .tit{ font-size: 16px; line-height: 16px; color: #666; margin-top: 16px; }*/ .tableTk .box .title .tit { text-align: center; font-size: 16px; line-height: 16px; color: #999; margin-top: 16px } .tableTk .box .title .tit a{ padding-left: 45px; display: inline-block; background-image: url('../img/ic1.png'); background-repeat: no-repeat; background-position: left center; color: #dc0202; } .tableTk .box .title .tit a i{ border-bottom: 1px solid #dc0202; display: inline-block; padding-bottom: 8px; } .tableTk .box .tableNew{ margin-top: 30px; } .tableTk .box .tableNew .t{ width: 100%; height: 48px; border-radius: 3px; background-color: #f5f5f5; margin-bottom: 15px; position: relative; } .tableTk .box .tableNew .t span{ width: 10px; height: 48px; position: absolute; left: -17px; top: 0; background-position: center; background-repeat: no-repeat; background-image: url('../img/xin.png'); } .tableTk .box .tableNew .t:before{ width: 1px; height: 26px; background-color: #ababab; content: ''; position: absolute; top: 11px; left: 50%; opacity: 0.5; } .tableTk .box .tableNew .t .tt{ width: 50%; float: left; position: relative; } .tableTk .box .tableNew .t .tt em{ font-size: 16px; line-height: 48px; color: #999; position: absolute; top: 0; right: 20px; } .tableTk .box .tableNew .t1{ position: relative; } .tableTk .box .tableNew .t1 span{ width: 10px; height: 48px; position: absolute; left: -17px; top: 0; background-position: center; background-repeat: no-repeat; background-image: url('../img/xin.png'); } .tableTk .box .tableNew .t1 .tt{ width: 50%; float: left; height: 48px; border-radius: 3px; background-color: #f5f5f5; } .tableTk .box .tableNew .t1 .tt1{ width: 47.2%; height: 48px; border-radius: 3px; background-color: #f5f5f5; float: right; overflow: hidden; } .tableTk .box .tableNew .t1 .tt1 .text{ width: calc(100% - 100px); float: left; } .tableTk .box .tableNew .t1 .tt1 .but{ width: 100px; height: 48px; background: none; box-sizing: border-box; display: block; float: right; font-size: 14px; line-height: 48px; background-color: #dc0202; color: #fff; text-align: center; border: none; } .tableTk .box .tableNew .text{ width: 100%; height: 48px; background: none; border: none; box-sizing: border-box; padding-left: 20px; font-size: 16px; line-height: 26px; color: #999; } .tableTk .box .tableNew .sel{ width: 100%; height: 48px; border: none; background: none; background-position: calc(100% - 20px) center; background-repeat: no-repeat; background-image: url('../img/sel.png'); -moz-appearance: none; -moz-appearance: none; -webkit-appearance: none; padding-left: 20px; font-size: 16px; color: #999; } .tableTk .box .tableNew .submit{ width: 148px; height: 48px; border-radius: 3px; border: none; background: none; background-color: #dc0202; display: block; margin: 30px auto 0; color: #fff; font-size: 16px; line-height: 48px; } @media (max-width: 768px){ .tableTk .box{ width: 92%; padding: 20px 20px 10px; } .tableTk .box .title{ padding-bottom: 15px; } .tableTk .box .title .tits{ font-size: 20px; line-height: 20px; } .tableTk .box .title .tit{ font-size: 12px; line-height: 14px; margin-top: 10px; } .tableTk .box .title .tit a i{ padding-bottom: 4px; } .tableTk .box .title .tit a{ background-size: 20px auto; padding-left: 24px; } .tableTk .box .tableNew{ margin-top: 15px; } .tableTk .box .tableNew .t{ height: 38px; margin-bottom: 5px; } .tableTk .box .tableNew .text{ height: 38px; line-height: 38px; font-size: 14px; padding-left: 10px; } .tableTk .box .tableNew .t span{ height: 38px; width: 7px; background-size: 100% auto; left: -12px; } .tableTk .box .tableNew .t1 span{ height: 38px; width: 7px; background-size: 100% auto; left: -12px; } .tableTk .box .tableNew .sel{ height: 38px; font-size: 14px; padding-left: 10px; } .tableTk .box .tableNew .t:before{ height: 18px; } .tableTk .box .tableNew .t .tt em{ font-size: 14px; line-height: 38px; right: 10px; } .tableTk .box .tableNew .t1 .tt{ width: 100%; float: left; margin-bottom: 5px; height: 38px; } .tableTk .box .tableNew .t1 .tt1{ width: 100%; float: left; height: 38px; } .tableTk .box .tableNew .t1 .tt1 .but{ width: 80px; height: 38px; line-height: 38px; font-size: 13px; } .tableTk .box .tableNew .t1 .tt1 a img{ width: 100%; } .tableTk .box .tableNew .submit{ width: 120px; height: 38px; line-height: 38px; margin: 15px auto 0; } .tableTk .box .close{ top:-15px; right: -15px; width: 34px; height: 34px; } } input::-webkit-input-placeholder{ color: #999; } input:-moz-placeholder{ color: #999; } input::-moz-placeholder{ color: #999; } input:-ms-input-placeholder{ color: #999; } .proInfo .box1{ padding-top: 5.1%; padding-bottom: 5%; } .proInfo .box1 img{ max-width: 100%; height: auto !important; } .proInfo .box1 .tits{ text-align: center; } .proInfo .box1 .tit{ text-align: center; font-size: 20px; line-height: 20px; color: #000; margin-top: 30px; } .proInfo .box1 .txts{ font-size: 16px; line-height: 24px; color: #000; text-align: center; width: 780px; margin: 7.6% auto 0; max-width: 100%; } .proInfo .box2{ /*background-size: cover; background-repeat: no-repeat; background-repeat: no-repeat; background-image: url('../img/info_bg.jpg');*/ background-color: #f5f5f5; width: 100%; height: auto; padding-top: 7.3%; padding-bottom: 20px; } .proInfo .box2 .item{ width: 25.4%; float: left; margin-right: 11.9%; float: left; margin-bottom: 9.8%; } .proInfo .box2 .item:nth-child(3n){ margin-right: 0; } .proInfo .box2 .item .itemLeft{ width: 64px; float: left; } .proInfo .box2 .item .itemLeft .icon{ width: 100%; height: 64px; position: relative; } .proInfo .box2 .item .itemLeft .icon img{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; max-width: 100%; max-height: 100%; margin: auto; } .proInfo .box2 .item .itemLeft p{ text-align: center; font-size: 16px; line-height: 16px; font-weight: bold; margin-top: 25px; color: #333; } .proInfo .box2 .item .con{ width: calc(100% - 110px); float: right; font-size: 14px; line-height: 22px; color: #333; } @media (max-width: 1024px){ .proInfo .box2 .item{ width: 30%; margin-right: 5%; } .proInfo .box2 .item .con{ width: calc(100% - 80px); } } @media (max-width: 768px){ .proInfo .box1 .tit{ margin-top: 10px; font-size: 16px; line-height: 16px; } .proInfo .box1 .txts{ font-size: 14px; line-height: 22px; margin: 15px auto 0; } .proInfo .box2 .item{ width: 48.5%; float: left; margin-right: 3%; margin-bottom: 25px; } .proInfo .box2 .item:nth-child(2n){ margin-right: 0; } .proInfo .box2 .item .itemLeft{ width: 34px; } .proInfo .box2 .item .itemLeft .icon{ height: 38px; } .proInfo .box2 .item .itemLeft p{ margin-top: 15px; } .proInfo .box2 .item .con{ width: calc(100% - 50px); min-height: 88px; } } .caseTabs{ width: 100%; height: 60px; background-color: #f5f5f5; text-align: center; font-size: 0; } .caseTabs a{ font-size: 12px; line-height: 60px; color: #000; display: inline-block; margin: 0 39px; } .caseTabs a span{ position: relative; } .caseTabs a span:after{ width: 100%; height: 2px; background-color: #dc0202; position: absolute; bottom: -5px; left: 0; content: ''; display: none; } .caseTabs a.on{ color: #dc0202; } .caseTabs a.on span:after{ display: block; } @media (max-width: 768px){ .caseTabs{ height: 46px; } .caseTabs a{ margin: 0 14px; line-height: 46px; } } .case .selBox{ width: 332px; height: auto; background-color: #f5f5f5; border-radius: 4px; margin: 0 auto 4.3%; position: relative; } .case .selBox span{ text-align: center; font-size: 16px; line-height: 48px; color: #000; width: 120px; display: block; float: left; position: relative; } .case .selBox span:after{ width: 1px; height: 26px; background-color: #eaeaea; position: absolute; top: 11px; right: 0; content: ''; display: block; } .case .selBox .sel{ height: 48px; border: none; background: none; background-position: calc(100% - 20px) center; background-repeat: no-repeat; background-image: url(../img/sel.png); -moz-appearance: none; -moz-appearance: none; -webkit-appearance: none; padding-left: 20px; font-size: 16px; color: #999; width: 212px; float: left; } @media (max-width: 768px){ .case .selBox span{ font-size: 14px; line-height: 38px; } .case .selBox .sel{ height: 38px; font-size: 14px; } .case .selBox span:after{ height: 18px; } } .partners .box2{ background-color: #f5f5f5; padding: 5.2% 0; } .partners .box2 .t{ width: 100%; margin-bottom: 34px; } .partners .box2 .t .text{ width: 20.5%; float: left; border: none; background: none; border-radius: 4px; background-color: #fff; box-sizing: border-box; padding-left: 20px; font-size: 16px; line-height: 26px; color: #999; height: 48px; margin-right: 2%; } .partners .box2 .t .tttt{ width: 23%; margin-right: 2%; background: none; border-radius: 4px; background-color: #fff; box-sizing: border-box; float: left; overflow: hidden; } .partners .box2 .t .tttt .text{ width: calc(100% - 100px); box-sizing: border-box; padding-left: 20px; float: left; margin-right: 0; } .partners .box2 .t .tttt a{ width: 100px; height: 48px; float: right; text-align: center; font-size: 16px; line-height: 48px; color: #999; display: block; float: left; background-color: #dc0202; color: #fff; } .partners .box2 .t .tt{ width: 30%; border-radius: 4px; background-color: #fff; float: right; position: relative; } .partners .box2 .t .tt:before{ width: 1px; height: 26px; background-color: #eaeaea; top: 11px; left: 50%; content: ''; display: block; position: absolute; } .partners .box2 .t .tt .sel{ width: 50%; float: left; height: 48px; display: block; padding-left: 20px; border: none; background: none; background-position: calc(100% - 20px) center; background-repeat: no-repeat; background-image: url(../img/sel.png); -moz-appearance: none; -moz-appearance: none; -webkit-appearance: none; font-size: 16px; color: #999; } .partners .box2 .txt{ width: 100%; border: none; background: none; background-color: #fff; border-radius: 4px; height: 140px; font-size: 16px; line-height: 26px; color: #999; padding: 12px 20px; box-sizing: border-box; } .partners .box2 .submit{ width: 148px; height: 48px; border-radius: 3px; border: none; background: none; background-color: #dc0202; display: block; margin: 35px auto 0; color: #fff; font-size: 16px; line-height: 48px; } @media (max-width: 768px){ .partners .box2 .t{ margin-bottom: 10px; } .partners .box2 .t .text{ padding-left: 10px; width: 100%; float: none; height: 38px; line-height: 38px; font-size: 14px; margin-right: 0; margin-bottom: 10px; } .partners .box2 .t .tt{ width: 100%; float: none; } .partners .box2 .t .tt .sel{ font-size: 14px; height: 38px; } .partners .box2 .t .tt:before{ height: 22px; } .partners .box2 .txt{ font-size: 14px; line-height: 24px; padding: 10px; } .partners .box2 .submit{ margin: 20px auto 0; width: 120px; height: 38px; font-size: 14px; line-height: 38px; } .partners .box2 .t .tttt{ width: 100%; float: none; margin-bottom: 10px; } .partners .box2 .t .tttt .text{ margin-bottom: 0; padding-left: 10px; } .partners .box2 .t .tttt a{ line-height: 38px; height: 38px; } } .partnersTabs{ border-top: 1px solid #f5f5f5; padding-top: 24px; padding-bottom: 22px; text-align: center; font-size: 0; position: relative; } .partnersTabs:before{ width: 3px; height: 16px; left: 50%; margin-left: -1.5px; top: 32px; content: ''; background-color: #aeaeae; position: absolute; } .partnersTabs a{ display: inline-block; padding-left: 50px; font-size: 12px; line-height: 32px; color: #000; margin: 0 102px; background-position: left center; background-repeat: no-repeat; } .partnersTabs a span{ position: relative; } .partnersTabs a span:after{ width: 100%; height: 2px; position: absolute; bottom: -6px; left: 0; content: ''; background-color: #df1515; display: none; } .partnersTabs a.on{ background-image: url('../img/next_h.png'); color: #df1515; } .partnersTabs a.on span:after{ display: block; } .partners .box1 .content .legend{ bottom: 0; left: 0; position: absolute; } .partners .box1 .content .legend .t1{ margin-bottom: 5px; } .partners .box1 .content .legend .t{ margin-bottom: 8px; } .partners .box1 .content .legend .t .tt{ width: 36px; height: 16px; box-sizing: border-box; border-bottom: 2px solid #706f6f; float: left; } .partners .box1 .content .legend .t .tt.tt1{ background-color: #dc0202; } .partners .box1 .content .legend .t .tt.tt2{ background-color: #f19a9a; } .partners .box1 .content .legend .t .tt.tt3{ background-color: #e5e5e5; } .partners .box1 .content .legend .t span{ float: left; margin-left: 15px; font-size: 12px; line-height: 16px; color: #000; } .partners .box1 .itemC{ display: none; } .partners .box1 .content1 .pccc{ width: 864px; max-width: 92%; margin: 0 auto; } .partners .box1 .content1 .pccc img{ max-width: 100%; height: auto !important; } @media (max-width: 768px){ .partnersTabs{ padding-top: 12px; padding-bottom: 10px; } .partnersTabs a{ margin: 0 25px; background-size: 24px; line-height: 24px; padding-left: 30px; } .partnersTabs a span:after{ bottom: -4px; height: 1px; } .partnersTabs:before{ top: 17px; } } .videoList{ margin: 5.2% auto 0; padding-bottom: 7.3%; } .videoList .page{ margin-top: 60px; } .videoList ul li{ width: 48.75%; float: left; cursor: pointer; margin-bottom: 44px; } .videoList ul li:nth-child(2n){ float: right; } .videoList ul li .pic{ width: 100%; height: auto; overflow: hidden; position: relative; } .videoList ul li .pic img{ transition: all 1.5s; } .videoList ul li .pic .icon{ width: 90px; height: 90px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-size: cover; background-repeat: no-repeat; background-image: url('../img/video_icon.png'); display: none; } .videoList ul li .tits{ font-size: 24px; line-height: 34px; color: #333; height: 68px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-top: 25px; } .videoList ul li .time{ font-size: 16px; line-height: 16px; color: #909090; margin-top: 16px; } @media (min-width: 1024px){ .videoList ul li:hover .pic .icon{ display: block; } .videoList ul li:hover .pic img{ transform: scale(1.1); } .videoList ul li:hover .tits{ color: #dc0000; } } @media (max-width: 1200px){ .videoList ul li .tits{ font-size: 20px; line-height: 30px; height: 60px; } } @media (max-width: 768px){ .videoList ul li{ width: 100%; float: none !important; margin-bottom: 20px; } .videoList ul li .tits{ margin-top: 10px; font-size: 16px; line-height: 24px; height: auto; } .videoList ul li .time{ font-size: 14px; line-height: 14px; margin-top: 5px; } .videoList ul li .pic .icon{ display: block; width: 50px; height: 50px; } .videoList .page{ margin-top: 20px; } } .vvvv { width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: none; z-index: 1000; } .vvvv .bgz { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.6); } .vvvv .videoBox { width: 1100px; height: 620px; position: absolute; top: 0%; left: 0; right: 0; bottom: 0; margin: auto; background-color: #000; } .vvvv .videoBox video { width: 100%; height: 100%; } .click-close { width: 40px; height: 40px; background: #fff url("../img/close.png") center no-repeat; position: absolute; background-size: 16px; top: -20px; right: -20px; z-index: 20000000; border-radius: 100%; display: none; cursor: pointer; } @media (max-width: 1366px) { .vvvv .videoBox { width: 900px; height: 480px; } } @media (max-width: 1024px) { .click-close{ top: 0; right: 0; } .vvvv .videoBox { width: 100%; height: 100%; } } .infoBanner{ position: relative; overflow: hidden; height: calc(80vh - 80px); } .infoBanner #container{ width: 100%; height: calc(80vh - 80px); position: absolute; top: 0; left: 0; } .infoBanner .tits{ text-align: center; font-size: 16px; line-height: 40px; color: #fff; position: absolute; width: 100%; position: absolute; left: 0; bottom: 40px; } @media (max-width: 768px){ .infoBanner img{ width: 160%; margin-left: -30%; } } .index-banner .fff{ position: absolute; bottom: 40px; right: 30px; font-size: 14px; line-height: 16px; color: #fff; z-index: 16; } @media (max-width: 768px){ .index-banner .fff{ font-size: 12px; right: 15px; bottom: 15px; } } .product .box6{ background-color: #f5f5f5; padding: 5.2% 0; } .product .box6 .tits{ text-align: center; } .product .box6 .table1{ width: 100%; height: auto; } .product .box6 table{ box-sizing: border-box; border: 2px solid #aaa; font-size: 16px; line-height: 26px; color: #666; text-align: center; } .product .box6 table tr th{ height: 70px; background-color: #fff; border-bottom: 2px solid #aaa; border-right: 1px solid #ddd; color: #000; font-weight: normal; } .product .box6 table tr th:last-child{ border-right: 0; } .product .box6 table tr td{ height: 47px; border-bottom: 1px solid #aaa; border-right: 1px solid #ddd; } .product .box6 table tr td:last-child{ border-right: none; } .product .box6 table tr:last-child td{ border-bottom: none; } .product .box6 .table1{ margin-top: 5.6%; } .product .box6 .table1 table tr th:nth-child(1){ width: 332px; } .product .box6 .table1 table tr th:nth-child(2){ width: 865px; } .product .box6 .table2{ margin-top: 60px; } .product .box6 .table2 table tr th span{ color: #999; font-size: 14px; } .product .box6 .table2 table tr th{ width: 124px; } .product .box6 .table2 table tr th:nth-child(1){ width: 110px; } .product .box6 .table2 table tr th:nth-child(2){ width: 88px; } .product .box6 .t{ text-align: center; font-size: 16px; line-height: 18px; color: #dc0202; margin-top: 40px; } .product .box6 .t span{ text-decoration: underline; } @media (max-width: 1024px){ .product .box6 table{ font-size: 14px; line-height: 22px; } } @media (max-width: 800px){ .product .box6 .table2{ width: 100%; overflow-x: scroll; } .product .box6 .table2 table{ width: 800px; } .product .box6 table tr th{ height: 50px; } .product .box6 .table2 table tr th span{ font-size: 12px; } .product .box6 .table2{ margin-top: 20px; } .product .box6 .t{ font-size: 14px; line-height: 16px; margin-top: 15px; } }