.left { float: left; } .right { float: right; } .table { width: 100%; height: 100%; display: table; } .table .table-cell { width: 100%; height: 100%; vertical-align: middle; display: table-cell; } .w1520 { width: 1520px; height: auto; } @media (max-width: 1540px) { .w1520 { width: 94%; } } .container { width: 100%; height: auto; overflow: hidden; } .main { width: 100%; height: auto; overflow: hidden; position: relative; top: 0; left: 0; transition: left 1s ease 0s; } .main.on .header-n { display: none; } .main.on .header-b { display: block; } @media (max-width: 1024px) { .main.on .header-b { display: none; } .main.on .header-m-n { display: none; } .main.on .header-m-b { display: block; } } .sidebar { width: 100%; left: 0; height: 100%; position: fixed; top: 0; display: none; overflow: scroll; background: #343434; z-index: 9; /*transform: rotateY(90deg); transform-origin: 0 0;*/ transition: left 1s ease 0s; } .sidebar .sidebar-new { width: calc(100% - 60px); height: auto; padding: 20px 30px; margin-top: 80px; } .sidebar .sidebar-new .logo { width: 184px; height: auto; display: block; } .sidebar .sidebar-new .nav { width: 100%; height: auto; } .sidebar .sidebar-new .nav ul li{ width: 100%; height: auto; } .sidebar .sidebar-new .nav ul li .tits { width: 100%; height: auto; display: block; font-size: 24px; line-height: 60px; border-bottom: 1px solid #fff; color: #fff; } .sidebar .sidebar-new .nav ul li .tits span { margin-left: 2%; font-size: 16px; } .sidebar .sidebar-new .nav ul li .tits i { margin-left: 2%; } .sidebar .sidebar-new .nav ul li .tits em{ width: 12px; float: right; height: 60px; margin-right: 2%; background-position: center; background-repeat: no-repeat; background-image: url(../images/right.png); } .sidebar .sidebar-new .nav ul li .tits em.n{ background-image: url(../images/jia.png); -webkit-background-size: 100% auto; background-size: 100% auto; } .sidebar .sidebar-new .nav ul li .tits.on em.n{ background-image: url(../images/jia_h.png); } .sidebar .sidebar-new .nav ul li dl{ width: 100%; height: auto; display: none; } .sidebar .sidebar-new .nav ul li dl a{ width: calc(96% - 30px); padding-left: calc(4% + 30px); font-size: 20px; line-height: 40px; display: block; color: #fff; } @media (max-width: 730px) { .sidebar .sidebar-new { margin-top: 60px; } .sidebar .sidebar-new .nav ul li .tits { font-size: 16px; } .sidebar .sidebar-new .nav ul li dl a{ font-size: 16px; } } @media (max-width: 640px) { .sidebar .sidebar-new .logo { width: 150px; } .sidebar .sidebar-new .nav ul li .tits { font-size: 16px; } .sidebar .sidebar-new .nav ul li dl a{ width: calc(96% - 20px); padding-left: calc(4% + 20px); font-size: 14px; line-height: 45px; } } @media (max-width: 455px) { .sidebar .sidebar-new .nav ul li .tits span { font-size: 14px; } } .index { width: 100%; height: auto; } .index .index-banner { width: 100%; height: auto; position: relative; } .index .index-banner.banner-m{ display: none;} .index .index-banner ul { width: 100%; height: auto; } .index .index-banner ul li { width: 100%; height: auto; } .index .index-banner .a { width: 40px; height: 68px; position: absolute; z-index: 10; top: 50%; margin-top: -34px; opacity: 0; background: url(../images/banner_btn.png) no-repeat; transition: opacity .5s; } .index .index-banner .a.prev { left: 3%; } .index .index-banner .a.next { right: 3%; transform: rotate(180deg); } .index .index-banner .btns { width: 100%; height: auto; position: absolute; bottom: 30px; left: 0; z-index: 20; font-size: 0; text-align: center; } .index .index-banner .btns span { width: 8px; height: 8px; display: inline-block; margin: 0 7px; cursor: pointer; border: 2px solid #fff; border-radius: 8px; opacity: 1; background: none; } .index .index-banner .btns span.swiper-pagination-bullet-active { background: #fff; } .index .index-banner:hover .a { opacity: 0.5; } @media (max-width: 1024px) { .index .index-banner.banner-pc{ display: none;} .index .index-banner.banner-m{ display: block;} .index .index-banner ul li { overflow: hidden; } .index .index-banner .a{ display: none;}} @media (max-width: 640px) { .index .index-banner .btns { bottom: 15px; } } .index .index-nav { width: 100%; height: 250px; background: #fff; } .index .index-nav .nav-new { width: 100%; height: auto; text-align: center; font-size: 0; padding-top: 74px; } .index .index-nav .nav-new a { width: 160px; height: auto; display: inline-block; margin: 0 0.5%; } .index .index-nav .nav-new a .item { width: 100%; height: auto; transition: transform .5s; } .index .index-nav .nav-new a .item .icon { width: 100%; height: 40px; position: relative;} .index .index-nav .nav-new a .ycTbAct{width: 100%;height: 100%;position: absolute;top:0;left: 0; opacity: 1;transition: all .5s;-webkit-background-size: auto 90% !important;background-size: auto 90% !important;} .index .index-nav .nav-new a:nth-child(1) .ycTbAct{-webkit-background-size: auto 72% !important; background-size: auto 72% !important;} .index .index-nav .nav-new a .ycTbAct-h{width: 100%;height: 100%;position: absolute;top:0;left: 0;opacity: 0;transition: all .5s;-webkit-background-size: auto 90% !important;background-size: auto 90% !important;} .index .index-nav .nav-new a:hover .ycTbAct{opacity: 0;} .index .index-nav .nav-new a:hover .ycTbAct-h{opacity: 1;} .index .index-nav .nav-new a .item .cn { text-align: center; width: 100%; height: auto; font-size: 16px; line-height: 22px; color: #333; margin-top: 10px; } .index .index-nav .nav-new a .item .en { font-size: 12px; line-height: 16px; color: #333; margin-top: 5px; text-align: center; } @media (min-width: 1024px) { .index .index-nav .nav-new a:hover .item { transform: translateY(-20px); } } @media (max-width: 1600px){ .index .index-nav .nav-new a{ width: 140px; } } @media (max-width: 1400px) { .index .index-nav .nav-new a { width: 120px; } } @media (max-width: 1200px) { .index .index-nav .nav-new a { width: 110px; } } @media (max-width: 1100px) { .index .index-nav { height: auto; } .index .index-nav .nav-new { padding-top: 50px; padding-bottom: 50px; } } @media (max-width: 1024px){ .index .index-nav .nav-new a { width: 110px; margin: 0; } } @media (max-width: 980px) { .index .index-nav .nav-new a { /*width: 122.5px;*/ margin: 0; margin-bottom: 20px; } .index .index-nav .nav-new a .item .cn { margin-top: 13px; } } @media (max-width: 550px) { .index .index-nav .nav-new { padding-top: 0; padding-bottom: 0; } .index .index-nav .nav-new a { display: block; float: left; margin-bottom: 0; width: calc(33.3333% - 1px); height: 105px; border-left: 1px solid #eee; border-bottom: 1px solid #eee; } .index .index-nav .nav-new a .item{ padding-top: 15px; } .index .index-nav .nav-new a .item .icon { background-size: auto 30px !important; } .index .index-nav .nav-new a .item .cn { font-size: 12px; line-height: 14px; } .index .index-nav .nav-new a .item .en { line-height: 14px; display: none; margin-top: 2px; } } @media (max-width: 460px) { .index .index-nav .nav-new { text-align: left; text-align: center; font-size: 0; } /*.index .index-nav .nav-new a { width: 33.3%; display: inline-block; } */} .index .index-innovate { width: 100%; height: 760px; background-size: cover !important; background-position: center center; background-repeat: no-repeat; overflow: hidden; } .index .index-innovate .innovate-new { width: 1200px; height: 100%; margin: 0 auto; } .index .index-innovate .innovate-new .pic { float: left; width: 55%; height: 100%; position: relative; } .index .index-innovate .innovate-new .pic .img { width: 659px; height: auto; position: absolute; left: -35px; bottom: 16px; } .index .index-innovate .innovate-new .pic .line { width: 615px; position: absolute; left: 3px; bottom: 128px; transition-delay: 0.3s; } .index .index-innovate .innovate-new .pic .line img { opacity: 0.7; } .index .index-innovate .innovate-new .con { width: 45%; height: auto; float: left; padding-top: 15%; } .index .index-innovate .innovate-new .con .tits { font-size: 30px; line-height: 32px; text-align: center; color: #333; } .index .index-innovate .innovate-new .con .tit { font-size: 24px; line-height: 26px; color: #333; text-align: center; margin-top: 42px; } .index .index-innovate .innovate-new .con .tit1 { width: 86.7%; height: auto; margin: 25px auto 0; font-size: 14px; line-height: 28px; color: #333; text-align: center; } .index .index-innovate .innovate-new .con .tag { width: 100%; height: auto; text-align: center; font-size: 0; margin-top: 35px; } .index .index-innovate .innovate-new .con .tag .item { display: inline-block; margin: 0 33px; } .index .index-innovate .innovate-new .con .tag .item .icon { width: 90px; height: 40px; display: block; background-repeat: no-repeat; background-position: center center; background-size: auto 100% !important; transition: transform .5s; } .index .index-innovate .innovate-new .con .tag .item .icon.i1 { background-image: url(../images/x1.png); } .index .index-innovate .innovate-new .con .tag .item .icon.i2 { background-image: url(../images/x2.png); } .index .index-innovate .innovate-new .con .tag .item .icon.i3 { background-image: url(../images/x3.png); } .index .index-innovate .innovate-new .con .tag .item span { width: 100%; display: block; font-size: 16px; line-height: 32px; margin-top: 10px; color: #333; } @media (min-width: 1024px) { .index .index-innovate .innovate-new .con .tag .item:hover .icon { transform: rotate(360deg); } } .index .index-innovate .innovate-new .con .more { width: 171px; height: 44px; border-radius: 5px; border: 2px solid #333; display: block; margin: 45px auto 0; position: relative; } .index .index-innovate .innovate-new .con .more span { font-size: 12px; line-height: 42px; position: absolute; top: 0; left: 35px; color: #333; transition: left .5s; } .index .index-innovate .innovate-new .con .more i { width: 15px; height: 4px; display: block; background: url(../images/index_more2.png) center no-repeat; top: 20px; right: 42px; position: absolute; transition: right .5s; } .index .index-innovate .innovate-new .con .more:hover span { left: 30px; } .index .index-innovate .innovate-new .con .more:hover i { right: 37px; } @media (max-width: 1220px) { .index .index-innovate { height: auto; } .index .index-innovate .innovate-new { width: 94%; } .index .index-innovate .innovate-new .pic .img { width: 100%; left: 0; position: relative; bottom: 0; } .index .index-innovate .innovate-new .pic .line { width: 92%; left: 6%; bottom: 16%; } .index .index-innovate .innovate-new .con { padding-bottom: 10%; float: right; } } @media (max-width: 1120px) { .index .index-innovate .innovate-new .pic .img { bottom: auto; margin-top: -14%; } .index .index-innovate .innovate-new .con { padding-top: 10%; } .index .index-innovate .innovate-new .con .tit { margin-top: 20px; } .index .index-innovate .innovate-new .con .tag { margin-top: 30px; } .index .index-innovate .innovate-new .con .tag .item { margin: 0 15px; } .index .index-innovate .innovate-new .con .more { margin: 25px auto 0; } } @media (max-width: 870px) { .index .index-innovate{ background-image: url(../images/index_m.jpg) !important;} .index .index-innovate .innovate-new .pic { width: 40%; } .index .index-innovate .innovate-new .pic img { margin-top: 3%; } .index .index-innovate .innovate-new .con { width: 60%; } } @media (max-width: 740px) { .index .index-innovate .innovate-new .pic { width: 100%; float: none; } .index .index-innovate .innovate-new .pic .img { width: 80%; height: auto; display: block; margin: -9% auto 0; } .index .index-innovate .innovate-new .pic .line { width: 72%; left: 14.5%; bottom: 16%; } .index .index-innovate .innovate-new .con { width: 100%; float: none; } .index .index-innovate .innovate-new .con .tits { font-size: 20px; line-height: 26px; } .index .index-innovate .innovate-new .con .tit { font-size: 16px; line-height: 20px; margin-top: 10px; } .index .index-innovate .innovate-new .con .tit1 { width: 94%; font-size: 12px; line-height: 20px; margin: 10px auto 0; } .index .index-innovate .innovate-new .con .more { width: 128px; height: 30px; } .index .index-innovate .innovate-new .con .more span { line-height: 30px; left: 18px; } .index .index-innovate .innovate-new .con .more i { right: 20px; top: 14px; } } @media (max-width: 440px) { .index .index-innovate .innovate-new .con .tag .item { margin: 0 6%; } .index .index-innovate .innovate-new .con .tag .item .icon { width: 70px; height: 30px; } .index .index-innovate .innovate-new .con .tag .item span { margin-top: 5px; line-height: 28px; font-size: 15px;} } .index .index-product { width: 100%; height: auto; background: #f5f4f3; padding: 76px 0; } .index .index-product .product-new { width: 1720px; height: auto; margin: 0 auto; } .index .index-product .product-new .title { width: 100%; height: auto; text-align: center; font-size: 30px; line-height: 32px; color: #000; } .index .index-product .product-new .list { width: 100%; height: auto; margin-top: 40px; } .index .index-product .product-new .list .list-left { width: 62.2%; height: auto; float: left; } .index .index-product .product-new .list .list-left .item { width: 100%; height: auto; margin-bottom: 1%; } .index .index-product .product-new .list .list-left .item .item-box { height: auto; border-radius: 5px; overflow: hidden; position: relative; } .index .index-product .product-new .list .list-left .item .item-box a { width: 100%; height: auto; } .index .index-product .product-new .list .list-left .item .item-box a .img { transition: transform 1s; } .index .index-product .product-new .list .list-left .item .item-box a .bg{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: all .5s; background-color: rgba(0,0,0,0.34); z-index: 4; display: block; } .index .index-product .product-new .list .list-left .item .item-box a .tits { width: 100%; height: 70px; position: absolute; bottom: 0; left: 0; z-index: 5; transition: background .5s; } .index .index-product .product-new .list .list-left .item .item-box a .tits span { float: left; font-size: 14px; line-height: 70px; color: #fff; } .index .index-product .product-new .list .list-left .item .item-box a .tits i { width: 25px; height: 3px; display: block; position: relative; display: block; float: right; margin-top: 33px; overflow: hidden; } .index .index-product .product-new .list .list-left .item .item-box a .tits i img { position: absolute; top: 0; left: -10px; transition: left .5s; } .index .index-product .product-new .list .list-left .item .item-box:hover a .img { transform: scale(1.1); } .index .index-product .product-new .list .list-left .item .item-box:hover a .tits { background: rgba(0, 0, 0, 0.5); } .index .index-product .product-new .list .list-left .item .item-box:hover a .tits i img { left: 0; } .index .index-product .product-new .list .list-left .item .item-box:hover a .bg{ opacity: 0; } .index .index-product .product-new .list .list-left .item .item-left { width: 39.4%; } .index .index-product .product-new .list .list-left .item .item-left a .tits span { margin-left: 7.1%; } .index .index-product .product-new .list .list-left .item .item-left a .tits i { margin-right: 7.8%; } .index .index-product .product-new .list .list-left .item .item-right { width: 59.6%; } .index .index-product .product-new .list .list-left .item .item-right a .tits span { margin-left: 4.7%; } .index .index-product .product-new .list .list-left .item .item-right a .tits i { margin-right: 4.3%; } .index .index-product .product-new .list .list-right { width: 37.1%; height: auto; float: right; overflow: hidden; border-radius: 5px; position: relative; } .index .index-product .product-new .list .list-right a { width: 100%; height: auto; display: block; } .index .index-product .product-new .list .list-right a .img { transition: transform .5s; } .index .index-product .product-new .list .list-right a .bg{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0,0,0,0.34); z-index: 4; transition: all .5s; display: block; } .index .index-product .product-new .list .list-right a .con { width: 83.4%; height: auto; position: absolute; z-index: 5; left: 8.3%; top: 12%; } .index .index-product .product-new .list .list-right a .con .line { width: 30px; height: 2px; background: #fff; } .index .index-product .product-new .list .list-right a .con .tits { font-size: 30px; line-height: 32px; color: #fff; margin-top: 23px; } .index .index-product .product-new .list .list-right a .con .tit { font-size: 28px; line-height: 30px; color: #fff; margin-top: 12px; } .index .index-product .product-new .list .list-right a .con .tit1 { font-size: 14px; line-height: 16px; color: #fff; margin-top: 16px; } .index .index-product .product-new .list .list-right a .con .line1 { width: 25px; height: 3px; position: relative; overflow: hidden; margin-top: 38px; } .index .index-product .product-new .list .list-right a .con .line1 img { position: absolute; top: 0; left: -10px; transition: left .5s; } .index .index-product .product-new .list .list-right:hover a .bg{ opacity: 0; } .index .index-product .product-new .list .list-right:hover a .img { transform: scale(1.1); } .index .index-product .product-new .list .list-right:hover a .con .line1 img { left: 0; } .index .index-product .product-new .more { width: 24.5%; height: 68px; border-radius: 5px; /*background: #fff;*/ display: block; border: 1px solid #ddd; margin: 20px auto 0; text-align: center; font-size: 0; position: relative; transition: background .5s; } .index .index-product .product-new .more span { font-size: 12px; line-height: 70px; color: #9a9a9a; margin-left: -10%; transition: color .5s; } .index .index-product .product-new .more i { width: 16px; height: 3px; display: inline-block; background: url(../images/index_more2.png) no-repeat; position: absolute; top: 35px; right: 40%; transition: background .5s; } .index .index-product .product-new .more:hover { background: #B0A5A1; } .index .index-product .product-new .more:hover span { color: #fff; } .index .index-product .product-new .more:hover i { background: url(../images/index_more.png) -10px no-repeat; } @media (max-width: 1740px) { .index .index-product .product-new { width: 94%; } } @media (max-width: 1440px) { .index .index-product .product-new .more i { right: 35%; } } @media (max-width: 1200px) { .index .index-product .product-new .list .list-left .item .item-box a .tits { height: 40px; } .index .index-product .product-new .list .list-left .item .item-box a .tits span { line-height: 40px; } .index .index-product .product-new .list .list-left .item .item-box a .tits i { margin-top: 18px; } .index .index-product .product-new .more { height: 45px; } .index .index-product .product-new .more span { line-height: 45px; margin-left: -20%; } .index .index-product .product-new .more i { top: 23px; right: 30%; } } @media (max-width: 1024px) { .index .index-product { padding: 40px 0; } .index .index-product .product-new .list { margin-top: 25px; } .index .index-product .product-new .list .list-right a .con .tits { font-size: 24px; line-height: 26px; margin-top: 14px; } .index .index-product .product-new .list .list-right a .con .tit { font-size: 22px; line-height: 24px; } .index .index-product .product-new .list .list-right a .con .tit1 { margin-top: 10px; } .index .index-product .product-new .list .list-right a .con .line1 { margin-top: 25px; } } @media (max-width: 730px) { .index .index-product .product-new .title { font-size: 22px; line-height: 24px; } .index .index-product .product-new .more { height: 34px; } .index .index-product .product-new .more span { line-height: 34px; margin-left: -30%; } .index .index-product .product-new .more i { right: 24%; top: 17px; } } @media (max-width: 640px) { .index .index-product .product-new .list .list-left .item .item-box a .bg{ display: block; } .index .index-product .product-new .list .list-left .item .item-box a .tits{ bottom: auto; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .index .index-product .product-new .list .list-left .item .item-box a .tits span{ width: 100%; display: block; text-align: center; margin-left: 0; } .index .index-product .product-new .list .list-left .item .item-box a .tits i{ display: none; } .index .index-product .product-new .list .list-right a .con .tits{ text-align: center; } .index .index-product .product-new .list .list-right a .con{ width: 100%; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); left: 0; } .index .index-product .product-new .list .list-right a .con .line{ display: none; } .index .index-product .product-new .list .list-right a .con .line1{ display: none; } .index .index-product .product-new .list .list-left { width: 100%; float: none; } .index .index-product .product-new .list .list-right { width: 100%; float: none; } .index .index-product .product-new .more { width: 145px; height: 34px; text-align: left; } .index .index-product .product-new .more span { margin-left: 25px; } .index .index-product .product-new .more i { right: 20px; } } @media (max-width: 414px) { .index .index-product { padding: 30px 0; } .index .index-product .product-new .title { font-size: 18px; line-height: 20px; } .index .index-product .product-new .list { margin-top: 15px; } .index .index-product .product-new .list .list-right a .con .tits { font-size: 20px; line-height: 22px; margin-top: 10px; } .index .index-product .product-new .list .list-right a .con .tit { font-size: 18px; line-height: 20px; margin-top: 7px; } } .index .index-box { width: 1720px; height: auto; background-color: #fff; margin: 0 auto; position: relative; padding-bottom: 84px; } .index .index-box .index-news { width: 50%; height: auto; float: left; padding-top: 75px; } .index .index-box .index-news .title { width: 100%; height: auto; text-align: center; font-size: 30px; line-height: 32px; color: #000; } .index .index-box .index-news .tabs { width: 280px; height: 42px; overflow: hidden; margin: 39px auto 0; } .index .index-box .index-news .tabs a { width: 139px; height: 40px; display: block; float: left; font-size: 14px; line-height: 40px; color: #666; text-align: center; border: 1px solid #eaeaea; border-right: none; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .index .index-box .index-news .tabs a.a { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-right: 1px solid #eaeaea; border-left: none; } .index .index-box .index-news .tabs a.on { background: #B0A5A1; color: #fff; border: 1px solid #B0A5A1; border-right: none; } .index .index-box .index-news .tabs a.a.on { border-left: none; } .index .index-box .index-news .list { width: 70%; height: auto; margin-left: 12.8%; margin-top: 33px; } .index .index-box .index-news .list .item { width: 100%; height: auto; } .index .index-box .index-news .list .item ul { width: 100%; height: auto; } .index .index-box .index-news .list .item ul li { width: 100%; height: auto; position: relative; } .index .index-box .index-news .list .item ul li a { width: 100%; height: auto; } .index .index-box .index-news .list .item ul li a .time { width: 88px; height: 26px; border-radius: 3px; border: 1px solid #dbdbdb; float: left; text-align: center; font-size: 12px; line-height: 26px; color: #666; position: relative; z-index: 3; margin-top: 11px; } .index .index-box .index-news .list .item ul li a .tits { margin-left: 107px; font-size: 14px; line-height: 50px; color: #333; position: relative; border-bottom: 1px dashed #dbdbdb; height: 50px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .index .index-box .index-news .list .item ul li a .bg { width: 107px; height: 51px; background: #fff; position: absolute; top: 0; left: 0; } @media (min-width: 1024px) { .index .index-box .index-news .list .item ul li:hover a .tits { color: #B0A5A1; } } .index .index-box .index-news .list .item .more { width: 69.8%; height: 66px; border: 1px solid #eaeaea; border-radius: 5px; margin-left: 107px; display: block; margin-top: 40px; text-align: center; font-size: 12px; line-height: 70px; color: #9a9a9a; position: relative; transition: color .5s,background .5s; } .index .index-box .index-news .list .item .more span { margin-left: -36px; } .index .index-box .index-news .list .item .more i { width: 16px; height: 3px; display: inline-block; background: url(../images/index_more2.png) no-repeat; position: absolute; top: 35px; right: 40%; transition: background .5s; } @media (min-width: 1024px) { .index .index-box .index-news .list .item .more:hover { background: #B0A5A1; color: #fff; border: 1px solid #B0A5A1; } .index .index-box .index-news .list .item .more:hover i { background: url(../images/index_more.png) no-repeat; } } .index .index-box .index-about { width: 50%; height: auto; float: left; padding-top: 75px; } .index .index-box .index-about .title { font-size: 30px; line-height: 32px; color: #000; text-align: center; } .index .index-box .index-about .box { width: 69.8%; height: auto; margin-left: 18.6%; margin-top: 32px; } .index .index-box .index-about .box .pic { width: 33.7%; height: auto; float: left; } .index .index-box .index-about .box .con { width: 54%; height: auto; float: right; margin-top: 5%; } .index .index-box .index-about .box .con .tits { font-size: 18px; line-height: 28px; color: #333; } .index .index-box .index-about .box .con .tit { font-size: 14px; line-height: 28px; color: #333; height: 112px; width: 100%; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-top: 17px; } .index .index-box .index-about .more { width: 49%; height: 66px; border: 1px solid #eaeaea; border-radius: 5px; display: block; text-align: center; font-size: 12px; margin-left: 25%; line-height: 70px; margin-top: 13%; position: relative; color: #9a9a9a; transition: color .5s,background .5s; } .index .index-box .index-about .more span { margin-left: -36px; } .index .index-box .index-about .more i { width: 16px; height: 3px; display: inline-block; background: url(../images/index_more2.png) no-repeat; position: absolute; top: 35px; right: 40%; transition: background .5s; } @media (min-width: 1024px) { .index .index-box .index-about .more:hover { background: #B0A5A1; color: #fff; border: 1px solid #B0A5A1; } .index .index-box .index-about .more:hover i { background: url(../images/index_more.png) no-repeat; } } .index .index-box .line { width: 1px; height: 360px; position: absolute; top: 105px; left: 50%; background: #dbdbdb; } @media (max-width: 1740px) { .index .index-box { width: 96%; } } @media (max-width: 1380px) { .index .index-box .index-news .list .item .more { height: 50px; } .index .index-box .index-news .list .item .more span { line-height: 50px; margin-left: -50px; } .index .index-box .index-news .list .item .more i { top: 25px; right: 35%; } .index .index-box .index-about .more { height: 50px; } .index .index-box .index-about .more span { line-height: 50px; margin-left: -50px; } .index .index-box .index-about .more i { top: 25px; right: 35%; } } @media (max-width: 1024px) { .index .index-box { padding-bottom: 55px; } .index .index-box .index-news { padding-top: 45px; } .index .index-box .index-news .title { font-size: 22px; line-height: 24px; } .index .index-box .index-news .tabs { width: 200px; height: 32px; margin: 25px auto 0; } .index .index-box .index-news .tabs a { width: 99px; height: 30px; line-height: 30px; } .index .index-box .index-news .list { width: 85%; margin-left: 7%; } .index .index-box .index-news .list .item ul li a .time { margin-top: 5px; width: 74px; } .index .index-box .index-news .list .item ul li a .tits { margin-left: 85px; height: 40px; line-height: 40px; } .index .index-box .index-news .list .item ul li a .bg { width: 85px; } .index .index-box .index-news .list .item .more { width: 153px; height: 40px; text-align: left; margin-left: 85px; margin-top: 20px; } .index .index-box .index-news .list .item .more span { line-height: 40px; margin-left: 25px; } .index .index-box .index-news .list .item .more i { right: 20%; top: 20px; } .index .index-box .index-about { padding-top: 45px; } .index .index-box .index-about .title { font-size: 22px; line-height: 24px; } .index .index-box .index-about .box { width: 85%; margin-left: 5%; } .index .index-box .index-about .box .pic { width: 43%; } .index .index-box .index-about .more { width: 153px; height: 40px; text-align: left; margin-top: 9%; } .index .index-box .index-about .more span { line-height: 40px; margin-left: 25px; } .index .index-box .index-about .more i { right: 20%; top: 20px; } .index .index-box .line { height: 255px; } } @media (max-width: 600px) { .index .index-box .line { display: none; } .index .index-box .index-news { width: 100%; float: none; } .index .index-box .index-news .list { margin-top: 15px; } .index .index-box .index-news .list .item .more { margin: 20px auto 0; } .index .index-box .index-about { width: 100%; float: none; } .index .index-box .index-about .box { width: 100%; margin-left: 0; } .index .index-box .index-about .more { margin: 20px auto 0; bottom: auto; left: auto; position: relative; } } .footer { width: 100%; height: auto; background: #B0A5A1; } .footer .foot { width: 1720px; height: auto; margin: 0 auto; padding-top: 65px; padding-bottom: 80px; } .footer .foot .con { width: 17.4%; height: auto; float: left; } .footer .foot .con .logo { width: 184px; height: 35px; display: block; } .footer .foot .con .tel { width: 100%; height: auto; margin-top: 30px; } .footer .foot .con .tel span { font-size: 14px; line-height: 36px; color: #fff; width: 100%; display: block; } .footer .foot .con .tel i { font-size: 24px; line-height: 29px; color: #fff !important; display: block; } .footer .foot .con .tag { width: 100%; height: auto; margin-top: 33px; } .footer .foot .con .tag a { font-size: 14px; line-height: 36px; color: #fff; padding-left: 26px; display: block; } .footer .foot .con .tag a.i1 { background: url(../images/footer_icon1.png) left center no-repeat; } .footer .foot .con .tag a.i2 { background: url(../images/footer_icon2.png) left center no-repeat; } .footer .foot .con .tag a.i3 { background: url(../images/footer_icon3.png) left center no-repeat; } .footer .foot .con .tag a:hover { color: #B0A5A1; } .footer .foot .nav { width: 76%; height: auto; float: right; } .footer .foot .nav dl { width: 12.2%; height: auto; margin-right: 4.46%; float: left; } .footer .foot .nav dl dt { width: 100%; height: auto; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 18px; line-height: 18px; padding-bottom: 20px; margin-bottom: 12px; } .footer .foot .nav dl dt a { display: block; width: 100%; height: auto; color: #fff; transition: color .5s; } .footer .foot .nav dl dt a:hover { color: #B0A5A1; } .footer .foot .nav dl dd { width: 100%; height: auto; font-size: 14px; line-height: 28px; } .footer .foot .nav dl dd a { color: #eee; display: block; width: 100%; height: auto; transition: color .5s; } .footer .foot .nav dl dd a:hover { color: #fff; } @media (max-width: 1740px) { .footer .foot { width: 94%; } } @media (max-width: 1330px) { .footer .foot .nav { width: 80%; } .footer .foot .nav dl { width: 15%; margin-right: 1.6%; } } @media (max-width: 1120px) { .footer .foot .nav { width: 75%; } .footer .foot .nav .d1 { width: 14%; } .footer .foot .nav .d2 { width: 18%; } } @media (max-width: 1024px) { .footer .foot .con { width: 24%; } .footer .foot .con .tag a.i3 { display: none; } } @media (max-width: 940px) { .footer .foot .nav { width: 75%; } .footer .foot .nav .d1 { width: 13%; } .footer .foot .nav .d2 { width: 21%; } } @media (max-width: 840px) { .footer .foot { padding-top: 45px; padding-bottom: 50px; } .footer .foot .con .logo { width: 100%; } } @media (max-width: 820px) { .footer .foot { width: 90%; } .footer .foot .con { width: 100%; } .footer .foot .con .logo { width: 184px; } .footer .foot .con .tel { margin-top: 15px; } .footer .foot .con .tag { margin-top: 20px; } .footer .foot .nav { display: none; } } @media (max-width: 620px) { .footer .foot { padding-top: 35px; padding-bottom: 20px; } .footer .foot .con .tag { margin-top: 10px; } } @media (max-width: 600px){ .footer .foot .con .tag a{ display: inline-block;margin-right: 20px; } } .footer .foott { width: 100%; height: 68px; background: #383230; } .footer .foott .foott-new { width: 1720px; height: auto; margin: 0 auto; } .footer .foott .foott-new .foott-left { float: left; } .footer .foott .foott-new .foott-left .txt { float: left; font-size: 12px; line-height: 68px; color: #9f9f9f; } .footer .foott .foott-new .foott-left .nav { float: left; font-size: 12px; line-height: 68px; color: #9f9f9f; margin-left: 30px; } .footer .foott .foott-new .foott-left .nav a { color: #9f9f9f; transition: color .5s; } @media (min-width: 1024px) { .footer .foott .foott-new .foott-left .nav a:hover { color: #fff; } } .footer .foott .foott-new .foott-left .nav span { margin: 0 4px; } .footer .foott .foott-new .foott-right { float: right; } .footer .foott .foott-new .foott-right span { float: left; font-size: 12px; line-height: 68px; color: #b5b5b5; } .footer .foott .foott-new .foott-right a { float: left; width: 21px; height: 20px; display: block; margin: 24px 0 0 21px; transition: background .5s; } .footer .foott .foott-new .foott-right a.bds_tsina { background: url("../images/footer_wb.png") center no-repeat; } .footer .foott .foott-new .foott-right a.bds_weixin { background: url("../images/footer_wx.png") center no-repeat; } .footer .foott .foott-new .foott-right a.bds_qzone { background: url("../images/footer_kj.png") center no-repeat; } .footer .foott .foott-new .foott-right a.bds_douban { background: url("../images/footer_db.png") center no-repeat; } @media (min-width: 1024px) { .footer .foott .foott-new .foott-right a:hover.bds_tsina { background: url("../images/footer_wb_h.png") center no-repeat; } .footer .foott .foott-new .foott-right a:hover.bds_weixin { background: url("../images/footer_wx_h.png") center no-repeat; } .footer .foott .foott-new .foott-right a:hover.bds_qzone { background: url("../images/footer_kj_h.png") center no-repeat; } .footer .foott .foott-new .foott-right a:hover.bds_douban { background: url("../images/footer_db_h.png") center no-repeat; } } @media (max-width: 1740px) { .footer .foott .foott-new { width: 94%; } } @media (max-width: 620px) { .footer .foott { height: auto; padding-top: 20px; padding-bottom: 10px; } .footer .foott .foott-new .foott-left { width: 100%; } .footer .foott .foott-new .foott-left .txt { line-height: 35px; } .footer .foott .foott-new .foott-left .nav { float: right; line-height: 35px; margin-left: 0; } .footer .foott .foott-new .foott-right { width: 100%; float: none; } .footer .foott .foott-new .foott-right span { line-height: 38px; } .footer .foott .foott-new .foott-right a { margin-top: 9px; } } @media (max-width: 340px) { .footer .foott .foott-new .foott-left .nav span { margin: 0; } } .footer-m{ width: 100%; height: auto; padding: 30px 0; display: none; text-align: center; font-size: 14px; line-height: 20px; color: #fff; background-color: #333;} .footer-m .logo{ width: 200px; height: auto; display: block; margin: 0 auto;} .footer-m .t{ margin-top: 15px; } .footer-m .t1{ display: inline-block; margin-top: 10px; color: #fff;} .footer-m .t2{ margin-top: 10px; } .footer-m .t2 a{ color: #fff; } .footer-m .t2 span{ margin: 0 5px;} .footer-m .t3{ margin-top: 10px; } @media (max-width: 750px){ .footer{ display: none; } .footer-m{ display: block; } } .banner { width: 100%; height: auto; margin-top: 98px; position: relative; } .banner img { width: 100%; height: auto; } .banner .con { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .banner .con .tits { text-align: center; font-size: 72px; line-height: 74px; color: #fff; font-family: ATB; margin-top: 9%; text-transform: uppercase; } .banner .con .tit { text-align: center; font-size: 48px; line-height: 50px; color: #fff; margin-top: 20px; } .banner .con .nav { width: 760px; height: auto; text-align: center; font-size: 0; margin: 4% auto 0; position: relative; } .banner .con .nav a { display: inline-block; padding: 0 8px; font-size: 14px; line-height: 20px; color: #fff; margin: 0 20px; position: relative; padding-bottom: 26px; } .banner .con .nav a span { width: 0; height: 1px; background: #fff; position: absolute; bottom: 0; left: 50%; transition: width .5s,left .5s; } .banner .con .nav a.on { font-weight: bold; } .banner .con .nav a.on span { width: 100%; left: 0; } .banner .con .nav a:hover { font-weight: bold; } .banner .con .nav a:hover span { width: 100%; left: 0; } .banner .con .nav .line { width: 100%; height: 1px; background: #fff; position: absolute; bottom: 0; left: 0; opacity: .2; } .banner.s .con .tits { color: #fff; } .banner.s .con .tit { color: #fff; } .banner.s .con .nav a { color: #fff; } .banner.s .con .nav a span { background: #fff; } .banner.s .con .nav .line { background: #fff; } @media (max-width: 1230px) { .banner .con .tits { margin-top: 5%; } } @media (max-width: 1024px) { .banner { margin-top: 80px; } .banner .con .tits { font-size: 50px; line-height: 52px; margin-top: 10%; } .banner .con .tit { font-size: 32px; line-height: 34px; } .banner .con .nav{ display: none;} } @media (max-width: 780px) { .banner img { width: 120%; margin-left: -10%; } .banner .con .nav { width: 90%; } } @media (max-width: 730px) { .banner { margin-top: 60px; } } @media (max-width: 640px) { .banner img { width: 150%; margin-left: -25%; } .banner .con .tits { margin-top: 17%; font-size: 34px; line-height: 36px; } .banner .con .tit { font-size: 26px; line-height: 28px; } .banner .con .nav a { padding-bottom: 15px; margin: 0 10px; } } @media (max-width: 460px) { .banner img { width: 160%; margin-left: -30%; } .banner .con .tits { font-size: 24px; line-height: 26px; } .banner .con .tit { font-size: 16px; line-height: 18px; margin-top: 10px; } .banner .con .nav { border: none; } .banner .con .nav a { margin: 0 10px 10px 10px; } .banner .con .nav .line { display: none; } } @media (max-width: 455px) { .banner { margin-top: 50px; } } @media (max-width: 360px) { .banner .con .nav { border: none; } .banner .con .nav a { margin: 0 5px 10px 5px; } } .about { width: 100%; height: auto; margin-bottom: 110px; } .about .about-con .tits { font-size: 16px; line-height: 18px; color: #999; } .about .about-con .en { font-size: 48px; line-height: 50px; color: #2c2f30; font-family: ATB; text-transform: uppercase; } .about .about-con .cn { font-size: 36px; line-height: 38px; color: #2c2f30; } .about .about-brand { margin: 0 auto; } .about .about-brand .title { float: left; width: 32.9%; height: auto; margin-top: 52px; } .about .about-brand .title .en { margin-top: 21px; } .about .about-brand .title .cn { margin-top: 21px; } .about .about-brand .con { width: 38.2%; height: auto; text-align: justify; float: left; font-size: 14px; line-height: 24px; color: #666; opacity: 0.9; margin-top: 100px; } .about .about-brand .time { width: 14.8%; height: auto; float: right; margin-right: 7.8%; text-align: center; font-family: ATB; margin-top: 85px; } .about .about-brand .time .num { font-size: 72px; line-height: 74px; color: #adadad; } .about .about-brand .time .en { font-size: 24px; line-height: 26px; color: #2c2f30; text-transform: uppercase; margin-top: 0;} .about .about-design { width: 100%; height: auto; margin-top: 56px; } .about .about-design .pic-box1{ width: 50%; overflow: hidden; float: left; } .about .about-design .pic { width: 100%; height: 620px; transition: transform 1.5s; background-repeat: no-repeat; background-position: right center; background-size: cover !important; } .about .about-design .pic-box:hover .pic{ transform: scale(1.1); } .about .about-design .con { width: 50%; height: auto; float: right; } .about .about-design .con .con-new { width: 79.2%; height: auto; } .about .about-design .con .con-new .conn { width: 68.4%; height: auto; margin: 31px auto 0; } .about .about-design .con .con-new .conn .en { margin-top: 40px; } .about .about-design .con .con-new .conn .cn { margin-top: 21px; } .about .about-design .con .con-new .conn .text { font-size: 14px; line-height: 24px; color: #666; margin-top: 43px; height: 150px; } .about .about-design .con .con-new .conn .line { width: 1px; height: 150px; background: #999; margin-left: 2px; margin-top: 74px; } .about .about-box { margin: 120px auto 0; } .about .about-box .box-left { width: 27.6%; height: auto; } .about .about-box .box-left .con { width: 100%; height: auto; } .about .about-box .box-left .con .en { margin-top: 21px; } .about .about-box .box-left .con .cn { margin-top: 20px; } .about .about-box .box-left .con .text { font-size: 14px; line-height: 24px; color: #666; margin-top: 43px; } .about .about-box .box-left .pic1 { width: 100%; height: auto; display: none; } .about .about-box .box-left .pic { overflow: hidden; width: 100%; height: auto; } .about .about-box .box-left .pic img{ transition: transform 1.5s; } .about .about-box .box-left .pic:hover img{ transform: scale(1.1); } .about .about-box .box-left.left .pic { margin-top: 74px; } .about .about-box .box-left.right .con { margin-top: 40px; } .about .about-box .box-center { width: 32.6%; height: 100%; overflow: hidden; margin-left: 5.9%; } .about .about-box .box-center img{ max-width: 100% !important; transition: transform 1.5s; } .about .about-box .box-center:hover img{ transform: scale(1.1); } .about .about-figure { width: 100%; height: auto; margin-top: 100px; background-position: center center; background-repeat: no-repeat; background-size: cover !important; } .about .about-figure .figure-new { padding-top: 130px; padding-bottom: 182px; margin: 0 auto; } .about .about-figure .figure-new .con { width: 34.2%; height: auto; text-align: right; } .about .about-figure .figure-new .con .en { margin-top: 21px; } .about .about-figure .figure-new .con .cn { margin-top: 23px; } .about .about-figure .figure-new .con .text { font-size: 14px; line-height: 24px; color: #666; margin-top: 42px; text-align: left; } .about .about-course { margin: 100px auto 0; } .about .about-course .pic { width: 50%; height: auto; overflow: hidden; float: left; } .about .about-course .pic img{ transition: transform 1.5s; } .about .about-course .pic:hover img{ transform: scale(1.1); } .about .about-course .con { width: 50%; height: auto; float: left; } .about .about-course .con .con-new { width: 68.4%; height: auto; margin: 0 auto; } .about .about-course .con .con-new .tits { margin-top: 19px; } .about .about-course .con .con-new .en { margin-top: 21px; } .about .about-course .con .con-new .cn { margin-top: 21px; } .about .about-course .con .con-new .text { font-size: 14px; line-height: 24px; color: #666; text-align: justify; margin-top: 42px; } .about .about-course .con .con-new .more { width: 198px; height: 54px; border: 1px solid #B0A5A1; border-radius: 27px; display: block; text-align: center; font-size: 16px; line-height: 54px; background:#B0A5A1; color: #fff; font-family: ATB; text-transform: uppercase; margin-top: 44px; transition: background .5s,color .5s; } @media (min-width: 1024px) { .about .about-course .con .con-new .more:hover { background: #766B67; border: 1px solid #766B67; color: #fff; } } @media (max-width: 1540px) { .about .about-course .con .con-new .en { margin-top: 10px; } .about .about-course .con .con-new .cn { margin-top: 10px; } .about .about-course .con .con-new .text { margin-top: 25px; } .about .about-course .con .con-new .more { margin-top: 30px; } } @media (max-width: 1500px) { .about .about-figure .figure-new { padding-top: 80px; padding-bottom: 100px; } } @media (max-width: 1320px) { .about .about-brand .title { width: 38%; } .about .about-brand .time { width: 20%; margin-right: 2%; } .about .about-design .con .con-new { width: auto; padding-right: 6%; } .about .about-design .con .con-new .conn { width: 80%; } .about .about-course .pic { overflow: hidden; } .about .about-course .pic img { width: 120%; margin-left: -10%; } .about .about-course .con .con-new { width: 85%; } .about .about-course .con .con-new .tits { margin-top: 9px; } .about .about-course .con .con-new .text { margin-top: 10px; } .about .about-course .con .con-new .more { margin-top: 20px; height: 42px; line-height: 42px; border-radius: 21px; } .about .about-con .en{ font-size: 34px; line-height: 30px; } .about .about-con .cn{ font-size: 24px; line-height: 24px; }} @media (max-width: 1200px) { .about .about-figure { margin-top: 60px; } .about .about-figure .figure-new { padding-top: 50px; padding-bottom: 70px; } .about .about-figure .figure-new .con .en { margin-top: 10px; } .about .about-figure .figure-new .con .cn { margin-top: 7px; } .about .about-figure .figure-new .con .text { margin-top: 20px; } } @media (max-width: 1170px) { .about .about-brand .title { width: 32%; } .about .about-brand .con { width: 42.2%; } } @media (max-width: 1024px) { .about { margin-bottom: 60px; } .about .about-con .en { font-size: 34px; line-height: 36px; } .about .about-con .cn { font-size: 30px; line-height: 32px; } .about .about-brand .title { margin-top: 40px; } .about .about-brand .title .en { margin-top: 10px; } .about .about-brand .title .cn { margin-top: 10px; } .about .about-brand .con { margin-top: 70px; } .about .about-brand .time { margin-top: 40px; } .about .about-brand .time .num { font-size: 46px; line-height: 48px; } .about .about-brand .time .en { font-size: 18px; line-height: 20px; margin-top: 7px; margin-bottom: 5px; } .about .about-design .pic { height: 480px; } .about .about-design .con .con-new .conn { margin: 20px auto 0; } .about .about-design .con .con-new .conn .en { margin-top: 20px; } .about .about-design .con .con-new .conn .cn { margin-top: 10px; } .about .about-design .con .con-new .conn .text { margin-top: 15px; } .about .about-design .con .con-new .conn .line { margin-top: 10px; } .about .about-box { margin: 60px auto 0; } .about .about-box .box-left { width: 30%; } .about .about-box .box-left .con .en { margin-top: 10px; } .about .about-box .box-left .con .cn { margin-top: 10px; } .about .about-box .box-left .con .text { margin-top: 15px; } .about .about-box .box-center { margin-left: 3.8%; } .about .about-course { margin: 50px; } } @media (max-width: 940px) { .about .about-figure .figure-new { padding-top: 20px; padding-bottom: 30px; } } @media (max-width: 840px) { .about .about-course .pic img { width: 140%; margin-left: -20%; } } @media (max-width: 790px) { .about .about-figure { margin-top: 40px; background-size: 150% !important; background-position: top right; } .about .about-figure .figure-new { padding-top: 50%; } .about .about-figure .figure-new .con { width: 100%; text-align: left; } .about .about-course { margin: 0 auto; } .about .about-course .pic { width: 100%; float: none; } .about .about-course .pic img { width: 100%; margin-left: 0; } .about .about-course .con { float: none; width: 100%; } .about .about-course .con .con-new { width: 100%; } .about .about-course .con .con-new .tits { margin-top: 20px; } } @media (max-width: 760px) { .about .about-box { margin-top: 30px; } .about .about-box .box-left { width: 48%; } .about .about-box .box-center { display: none; } } @media (max-width: 720px) { .about .about-design .pic { height: 330px; } .about .about-design .con .con-new .conn { margin: 10px auto 0; } .about .about-design .con .con-new .conn .en { margin-top: 10px; } .about .about-design .con .con-new .conn .text { height: auto; } .about .about-design .con .con-new .conn .line { display: none; } } @media (max-width: 600px) { .about { margin-bottom: 40px; } .about .about-brand .title{ margin-top: 30px; } .about .about-con .tits{ font-size: 14px; line-height: 16px; } .about .about-con .en { font-size: 22px; line-height: 24px; } .about .about-con .cn { font-size: 18px; line-height: 20px; } .about .about-brand .title { width: 100%; } .about .about-brand .con { font-size: 12px; width: 100%; margin-top: 20px; } .about .about-brand .time { display: none; } .about .about-design{ margin-top: 25px; }} @media (max-width: 520px) { .about .about-design .pic-box{ width: 100%; float: none; } .about .about-design .pic { width: 100%; } .about .about-design .con .con-new { width: 100%; padding-right: 0; } .about .about-design .con .con-new .conn { width: 92%; } } @media (max-width: 500px) { .about .about-design .pic-box1{ width: 100%; float: none; } .about .about-design .con{ width: 100%; float: none; margin-top: 20px; } .about .about-box .box-left { width: 100%; margin-bottom: 30px; } .about .about-box .box-left .pic1 { display: block; } .about .about-box .box-left .pic2 { display: none; } .about .about-box .box-left .con { margin-top: 20px; } .about .about-box .box-left.right .con { margin-top: 20px; } .about .about-figure { margin-top: 0; } } .project { width: 100%; height: auto; } .project .project-con .en { font-size: 48px; line-height: 50px; font-family: ATB; color: #2c2f30; text-transform: uppercase; } .project .project-con .cn { font-size: 36px; line-height: 38px; color: #2c2f30; margin-top: 21px; } .project .project-con .text { font-size: 14px; line-height: 24px; color: #666; margin-top: 42px; } .project .project-con .more { width: 198px; height: 54px; border: 1px solid #dbdbdb; border-radius: 27px; text-align: center; font-size: 16px; line-height: 54px; font-family: ATB; display: block; margin-top: 44px; color: #2c2f30; transition: background .5s,color .5s; } @media (min-width: 1024px) { .project .project-con .more:hover { background: #2c2f30; color: #fff; border: 1px solid #2c2f30; } } .project .project-box { width: 100%; height: auto; background-position: center center; background-repeat: no-repeat; background-size: cover !important; } .project .project-box .box-new { margin: 0 auto; padding-top: 100px; padding-bottom: 135px; } .project .project-box .box-new .con { width: 30.3%; height: auto; } .project .project-box1 { width: 100%; height: auto; } .project .project-box1 .box { width: 50%; height: auto; position: relative; -webkit-background-size: 100% !important; background-size: 100% !important; padding-top: 76px; padding-bottom: 220px; } .project .project-box1 .box .con { width: 760px; height: auto; } .project .project-box1 .box .con .con-new { width: 60.5%; height: auto; margin-left: 10%; } .project .project-box2 { width: 100%; height: auto; background-repeat: no-repeat; background-position: center center; background-size: cover !important; } .project .project-box2 .box-new { margin: 0 auto; padding-top: 93px; padding-bottom: 364px; } .project .project-box2 .box-new .con { width: 50%; height: auto; float: left; } .project .project-box2 .box-new .con .con-new { width: 60.5%; height: auto; } .project .project-box2 .box-new .con-right { width: 50%; height: auto; float: left; margin-top: 80px; } .project .project-box2 .box-new .con-right .more { width: 198px; height: 54px; border: 1px solid #dbdbdb; border-radius: 27px; text-align: center; font-size: 16px; line-height: 54px; font-family: ATB; display: block; color: #2c2f30; float: left; margin-left: 200px; transition: background .5s,color .5s; } @media (min-width: 1024px) { .project .project-box2 .box-new .con-right .more:hover { background: #2c2f30; color: #fff; border: 1px solid #2c2f30; } } .project .project-box2 .box-new .con-right .line { width: 150px; height: 1px; background: #ddd; margin-top: 27px; float: right; } .project .project-box3 { width: 100%; position: relative; height: auto; } .project .project-box3 .pic { width: 50%; height: 580px; background-position: right center; background-repeat: no-repeat; background-size: cover !important; float: left; } .project .project-box3 .pic img { display: none; } .project .project-box3 .con { width: 50%; float: left; height: auto; } .project .project-box3 .con .con-new { width: 79.2%; height: auto; margin-top: 90px; } .project .project-box3 .con .con-new .conn { width: 60.5%; margin-left: 25%; } @media (max-width: 1300px){ .project .project-box1 .box{ padding-top: 40px; padding-bottom: 320px; } } @media (max-width: 1220px) { .project .project-box1 .box .con { width: 80%; margin: 0 auto; } .project .project-box1 .box .con .con-new { width: 100%; margin-left: 0; } .project .project-box2 .box-new .con-right .more { margin-left: 20%; } } @media (max-width: 1024px) { .project .project-box1 .box { padding-top: 40px; } } @media (max-width: 1000px) { .project .project-con .en { font-size: 34px; line-height: 36px; } .project .project-con .cn { font-size: 26px; line-height: 28px; } .project .project-con .text { margin-top: 25px; } .project .project-con .more { margin-top: 30px; } .project .project-box .box-new { padding-top: 50px; padding-bottom: 75px; } .project .project-box .box-new .con { width: 40%; } .project .project-box3 .pic { height: 450px; } .project .project-box3 .con .con-new { width: 100%; } .project .project-box3 .con .con-new .conn { width: 92%; margin: 0 auto; } } @media (max-width: 960px) { .project .project-box2 .box-new { padding-top: 60px; padding-bottom: 200px; } .project .project-box2 .box-new .con .con-new { width: 90%; } .project .project-box2 .box-new .con-right .more { float: right; margin-left: 0; } .project .project-box2 .box-new .con-right .line { display: none; } } @media (max-width: 640px) { .project .project-con .en { font-size: 28px; line-height: 30px; } .project .project-con .cn { font-size: 22px; line-height: 24px; margin-top: 10px; } .project .project-con .text { margin-top: 15px; } .project .project-con .more { width: 120px; height: 33px; line-height: 33px; font-size: 16px; } .project .project-box .box-new .con { width: 60%; } } @media (max-width: 560px) { .project .project-box1 .box .con{ width: 94%; } .project .project-box2 .box-new { padding-top: 30px; } .project .project-box2 .box-new .con { width: 100%; float: none; } .project .project-box2 .box-new .con-right { width: 100%; float: none; margin-top: 30px; } .project .project-box2 .box-new .con-right .more { float: left; width: 120px; height: 33px; line-height: 33px; font-size: 16px; border-radius: 16px; } } @media (max-width: 530px) { .project .project-con .en{ font-size: 24px; line-height: 24px; } .project .project-con .cn{ font-size: 18px; line-height: 18px; } .project .project-con .text{ display: none; } .project .project-box1 .box { width: 100%; float: none; padding-bottom: 120px; } .project .project-box3 .pic { width: 100%; height: auto; float: none; background: none !important; } .project .project-box3 .pic img { display: block; } .project .project-box3 .con { position: absolute; top: 40px; left: 0; width: 100%; } .project .project-box2 .box-new{ width: 88%; } .project .project-box .box-new{ width: 88%; } .project .project-box1 .box .con{ width: 88%; } .project .project-box3 .con .con-new { width: 100%; margin-top: 0; margin-bottom: 40px; } .project .project-box3 .con .con-new .conn { width: 88%; } } .video { width: 100%; height: auto; background: #f6f6f6; } .video .content { margin: 0 auto; padding-top: 60px; padding-bottom: 95px; } .video .content .box { width: 100%; height: auto; } .video .content .box .item { width: 48.7%; height: auto; background: #fff; } .video .content .box .item a { width: 100%; height: auto; } .video .content .box .item a .pic { width: 100%; height: auto; overflow: hidden; position: relative; } .video .content .box .item a .pic .img { transition: transform .5s; } .video .content .box .item a .pic .icon { width: 48px; height: 48px; position: absolute; bottom: 30px; left: 35px; background: url(../images/video_icon.png) no-repeat; background-size: cover !important; } .video .content .box .item a .tits { width: 91.8%; height: 80px; font-size: 24px; margin: 0 auto; line-height: 80px; color: #2c2f30; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-family: ATB; } @media (min-width: 1024px) { .video .content .box .item:hover a .pic .img { transform: scale(1.1); } } .video .content .list { width: 100%; height: auto; overflow: hidden; margin-top: 40px; } .video .content .list ul { width: 110%; height: auto; padding-bottom: 30px; } .video .content .list ul li { width: 28.7%; height: auto; overflow: hidden; float: left; margin-bottom: 40px; margin-right: 2.5%; background: #fff; } .video .content .list ul li a { width: 100%; height: auto; } .video .content .list ul li a .pic { width: 100%; height: auto; overflow: hidden; position: relative; } .video .content .list ul li a .pic .img { transition: transform .5s; } .video .content .list ul li a .pic .icon { width: 48px; height: 48px; position: absolute; bottom: 30px; left: 35px; background: url(../images/video_icon.png) no-repeat; background-size: cover !important; } .video .content .list ul li a .tits { width: 91.8%; height: 56px; font-size: 16px; margin: 0 auto; line-height: 56px; color: #2c2f30; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-family: ATB; } @media (min-width: 1024px) { .video .content .list ul li:hover a .pic .img { transform: scale(1.1); } } .video .click-close { width: 40px; height: 40px; background: #fff url(../images/nav_close_b.png) center no-repeat; position: fixed; top: 0; right: 0; z-index: 20000000; display: none; } @media (max-width: 1024px) { .video .content { padding-top: 40px; padding-bottom: 50px; } .video .content .box .item a .tits { height: 50px; line-height: 50px; font-size: 18px; } .video .content .list { margin-top: 30px; } .video .content .list ul li a .tits { height: 50px; line-height: 50px; font-size: 18px; } } @media (max-width: 800px) { .video .content { padding-top: 40px; padding-bottom: 50px; } .video .content .box .item a .pic .icon { width: 28px; height: 28px; bottom: 15px; left: 15px; } .video .content .list { margin-top: 30px; } .video .content .list ul { padding-bottom: 10px; } .video .content .list ul li a .pic .icon { width: 28px; height: 28px; bottom: 15px; left: 15px; } } @media (max-width: 540px) { .video .content { padding-top: 20px; padding-bottom: 30px; } .video .content .box .item a .tits { height: 40px; line-height: 40px; font-size: 16px; } .video .content .list ul li { width: 44.7%; } .video .content .list ul li a .tits { height: 40px; line-height: 40px; font-size: 16px; } } @media (max-width: 414px) { .video .content .box .item { width: 100%; float: none !important; margin-bottom: 10px; } .video .content .list { margin-top: 0; } .video .content .list ul li { width: 100%; float: none; margin-bottom: 10px; margin-right: 0; } } .news{ width: 100%; height: auto; background: #f6f6f6; padding-bottom: 80px; } .news .list { width: 1280px; max-width: 94%; margin: 60px auto 0; overflow: hidden; } .news .list ul li{ width: 100%; height: auto; padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #ccc; } .news .list ul li .pic{ width: 24.9%; height: auto; display: block; float: left; overflow: hidden; } .news .list ul li .pic img{ -webkit-transition: all 1.5s; -o-transition: all 1.5s; transition: all 1.5s; } .news .list ul li .con{ width: 73%; height: auto; float: right; } .news .list ul li .con .tits{ font-size: 32px; line-height: 34px; color: #2c2f30; display: block; height: 34px; margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .news .list ul li .con .tit{ font-size: 14px; line-height: 24px; color: #666; height: 96px; margin-top: 25px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .news .list ul li .con .tit1{ width: 100%; height: auto; margin-top: 10px; } .news .list ul li .con .tit1 .top{ width: 54px; height: 17px; position: relative; float: left; } .news .list ul li .con .tit1 .share { width: 54px; height: 17px; background: url(../images/news_icon1.png) right center no-repeat; font-size: 14px; line-height: 17px; position: relative; color: #999; } .news .list ul li .con .tit1 .share-new { width: 84px; height: auto; height: auto; overflow: hidden; position: absolute; top: 17px; left: -1px; display: none; } .news .list ul li .con .tit1 .share-new a { width: 40px; height: 40px; margin: 0 auto; padding: 0; background-position: center center; background-repeat: no-repeat; display: block; float: left; border: 1px solid #eaeaea; background-color: #fff; transition: all .5s; } .news .list ul li .con .tit1 .share-new a.bds_qzone { background-image: url(../images/header_kj.png); border-right: none; border-bottom: none; } .news .list ul li .con .tit1 .share-new a.bds_qzone:hover { background-image: url(../images/header_kj_h.png); } .news .list ul li .con .tit1 .share-new a.bds_tsina { background-image: url(../images/header_wb.png); border-bottom: none; } .news .list ul li .con .tit1 .share-new a.bds_tsina:hover { background-image: url(../images/header_wb_h.png); } .news .list ul li .con .tit1 .share-new a.bds_douban { background-image: url(../images/header_db.png); border-right: none; } .news .list ul li .con .tit1 .share-new a.bds_douban:hover { background-image: url(../images/header_db_h.png); } .news .list ul li .con .tit1 .share-new a.bds_weixin { background-image: url(../images/header_wx.png); } .news .list ul li .con .tit1 .share-new a.bds_weixin:hover { background-image: url(../images/header_wx_h.png); } .news .list ul li .con .tit1 .share-new a:hover { background-color: #B0A5A1; } .news .list ul li .con .tit1:hover .share { color: #B0A5A1; background: url(../images/news_icon1_h.png) right center no-repeat; } .news .list ul li .con .tit1 .top:hover .share-new { display: block; } .news .list ul li .con .tit1 .time{ float: right; font-size: 16px; line-height: 17px; color: #999; } @media (min-width: 1024px){ .news .list ul li:hover .pic img{ -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .news .list ul li:hover .con .tits{ color: #B0A5A1; } } @media (max-width: 1350px){ .news .list ul li .con .tits{ font-size: 24px; line-height: 26px; height: 26px; margin-top: 0; } .news .list ul li .con .tit{ margin-top: 15px; } } @media (max-width: 1170px){ .news .list ul li .pic{ width: 29%; } .news .list ul li .con{ width: 67%; } } @media (max-width: 980px){ .news .list ul li .con .tit{ height: 48px; margin-top: 10px; -webkit-line-clamp: 2; } } @media (max-width: 660px){ .news .list{ margin: 30px auto 0; } .news .list ul li{ padding-bottom: 20px; margin-bottom: 20px; } .news .list ul li .pic{ width: 100%; float: none; } .news .list ul li .con { width: 100%; float: none; margin-top: 15px; } } @media (max-width: 500px){ .news .list ul li .con .tits{ font-size: 20px; line-height: 20px; height: 20px; } } .news-details { width: 100%; height: auto; margin-top: 98px; padding-bottom: 40px; } .news-details .details-banner { width: 100%; height: 280px; background-position: center center; background-repeat: no-repeat; } .news-details .content { width: 1200px; height: auto; margin: 0 auto; max-width: 94%; } .news-details .content .top { width: 100%; height: auto; margin-top: 2%; } .news-details .content .top .tits { font-size: 36px; line-height: 46px; color: #333; text-align: center; } .news-details .content .top .tag { width: 100%; height: auto; font-size: 0; text-align: center; margin-top: 1%; } .news-details .content .top .tag .t { display: inline-block; padding-left: 24px; font-size: 16px; line-height: 16px; color: #999; background-position: left center; background-repeat: no-repeat; margin: 0 20px 10px; } .news-details .content .top .tag .t.t1 { background-image: url(../images/info_icon1.png); } .news-details .content .top .tag .t.t2 { background-image: url(../images/info_icon2.png); } .news-details .content .top .tag .t.t3 { background-image: url(../images/info_icon3.png); } .news-details .content .con { width: 900px; margin: 0 auto; max-width: 100%; text-align: justify; font-size: 16px !important; line-height: 24px !important; color: #333; margin: 2.5% auto 0; border-bottom: 1px solid #d9d9d9; padding-bottom: 20px; } .news-details .content .con p span{ font-size: 16px; } .news-details .content .con img { max-width: 100%; margin: 10px auto !important; display: block; } .news-details .content .con .share { width: 100%; height: auto; margin: 0 auto; margin-top: 50px; } .news-details .content .con .share span { font-size: 14px; line-height: 16px; color: #999; float: left; margin-right: 10px; float: right; } .news-details .content .con .share a { width: 16px; height: 16px; padding: 0; float: left; display: inline-block; margin: 0; float: right; background-size: cover; background-position: center center; } .news-details .content .con .share a.bds_tsina { background-image: url(../images/info_wb.png); margin: 0 10px 0 0; } .news-details .content .con .share a.bds_weixin { background-image: url(../images/info_wx.png); margin: 0 10px 0 0; } .news-details .content .con .share a.bds_qzone { background-image: url(../images/info_qq.png); } .news-details .content .paging { width: 900px; margin: 15px auto 0; max-width: 100%; } .news-details .content .paging p { font-size: 16px; line-height: 30px; width: 100%; } .news-details .content .paging p a { color: #333; } .news-details .content .paging .return-list{ width: 140px; height: 45px; border: 1px solid #ddd; display: block; text-align: center; font-size: 16px; line-height: 45px; border-radius: 23px; float: right; margin-top: 20px; color: #999; transition: all .5s; } @media (min-width: 1024px) { .news-details .content .paging p a:hover { color: #B0A5A1; } .news-details .content .paging .return-list:hover{ background-color: #B0A5A1; border: 1px solid #B0A5A1; color: #fff; }} } @media (max-width: 1024px) { .news-details .details-banner{ display: none; } .news-details .content{ padding-top: 5%; } .news-details { margin-top: 80px; } } @media (max-width: 730px) { .news-details { margin-top: 60px; } } @media (max-width: 690px) { .news-details .content{ max-width: 88%; margin: 8% auto 0; } .news-details .content .top .tag .t{ font-size: 14px; } .news-details .content .top .tits { font-size: 28px; line-height: 40px; } .news-details .content .con{ margin: 5% auto 0; } .news-details .content .top .tag { margin-top: 15px; } } @media (max-width: 455px) { .news-details { margin-top: 50px; } .news-details .content .top .tits { font-size: 18px; line-height: 30px; } .news-details .content .top .tag .t { margin-right: 5px; } .news-details .content .con{ line-height: 24px !important; } .news-details .content .con span { font-size: 12px !important; } .news-details .content .paging p { font-size: 14px; line-height: 24px; } } .activity { width: 100%; height: auto; background: #f6f6f6; padding-bottom: 80px; } .activity .list { margin: 60px auto 0; overflow: hidden; } .activity .list ul { width: 100%; height: auto; padding-bottom: 10px; } .activity .list ul li { width: 32%; height: auto; float: left; margin-right: 2%; margin-bottom: 40px; background: #fff; } .activity .list ul li:nth-child(3n){ margin-right: 0%; } .activity .list ul li a { width: 100%; height: auto; display: block; padding-bottom: 38px; } .activity .list ul li a .top { width: 91.9%; height: 80px; margin: 0 auto; } .activity .list ul li a .top .time { float: left; background: url(../images/time.png) left center no-repeat; font-size: 14px; line-height: 20px; color: #999; padding-left: 30px; margin-top: 30px; } .activity .list ul li a .top .time span { color: #333; } .activity .list ul li a .top .tag { width: 76px; height: 24px; border-radius: 12px; background: #B0A5A1; font-size: 14px; line-height: 24px; color: #fff; text-align: center; float: right; margin-top: 28px; } .activity .list ul li a .top .tag.over { background: #cecece; } @media (max-width: 1240px){ .activity .list ul li a .top .time{ width: calc(100% - 30px); margin-top: 15px; } .activity .list ul li a .top .tag{ margin-top: 5px; } } .activity .list ul li a .pic { width: 100%; height: auto; overflow: hidden; } .activity .list ul li a .pic img { transition: transform .5s; } .activity .list ul li a .con { width: 91.9%; height: auto; margin: 30px auto 0; } .activity .list ul li a .con .tits { font-size: 24px; line-height: 26px; width: 100%; height: 26px; color: #2c2f30; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; transition: color .5s; } .activity .list ul li a .con .text { font-size: 14px; line-height: 24px; color: #666; height: 48px; width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-top: 18px; } .activity .list ul li a .con .more { font-size: 16px; line-height: 18px; font-family: ATB; color: #999; margin-top: 20px; } @media (min-width: 1024px) { .activity .list ul li:hover a .pic img { transform: scale(1.1); } .activity .list ul li:hover a .con .tits { color: #B0A5A1; } } @media (max-width: 1024px){ .activity .list ul li{ width: 48%; margin-right: 4%; } .activity .list ul li:nth-child(3n){ margin-right: 4%; } .activity .list ul li:nth-child(2n){ margin-right: 0; } } @media (max-width: 900px) { .activity { padding-bottom: 50px; } .activity .list { margin: 30px auto 0; } .activity .list ul li a .top { height: 60px; } .activity .list ul li a .top .time { width: auto; margin-top: 20px; } .activity .list ul li a .top .tag { margin-top: 18px; } .activity .list ul li a .con { margin: 20px auto 0; } .activity .list ul li a .con .tits { font-size: 18px; line-height: 20px; height: 20px; } .activity .list ul li a .con .text { margin-top: 10px; } } @media (max-width: 800px) { .activity .list ul li { margin-bottom: 20px; } .activity .list ul li a { padding-bottom: 20px; } .activity .list ul li a .top .time { padding-left: 25px; } .activity .list ul li a .top .tag { width: 60px; } } @media (max-width: 750px) { .activity .list ul li a .top .tag { display: none; } } @media (max-width: 620px) { .activity .list ul { width: 100%; } .activity .list ul li { width: 100%; margin-right: 0; float: none; } } .history { width: 100%; height: auto; overflow: hidden; padding-bottom: 160px; } .history .content { padding-top: 100px; margin: 0 auto 0; } .history .content .tabs { width: 325px; height: 48px; margin: 0 auto; position: relative; } .history .content .tabs a { height: 46px; display: block; float: left; font-size: 16px; line-height: 46px; color: #333; border: 1px solid #dbdbdb; background-repeat: no-repeat; } .history .content .tabs a.a1 { padding-left: 74px; width: 87px; border-right: none !important; border-top-left-radius: 23px; border-bottom-left-radius: 23px; background-image: url(../images/history_icon1.png); background-position: 44px center; } .history .content .tabs a.a2 { padding-left: 59px; width: 102px; border-left: none !important; float: right; border-top-right-radius: 23px; border-bottom-right-radius: 23px; background-image: url(../images/history_icon2.png); background-position: 36px center; } .history .content .tabs a.on { background-color: #191d1c; border: 1px solid #191d1c; color: #fff; } .history .content .tabs a.on.a1 { background-image: url(../images/history_icon1_h.png); } .history .content .tabs a.on.a2 { background-image: url(../images/history_icon2_h.png); } .history .content .tabs span { width: 1px; height: 48px; top: 0; left: 162px; background: #dbdbdb; position: absolute; display: block; } .history .content .content-new { width: 100%; height: auto; margin-top: 20px; } .history .content .content-new .box { width: 100%; height: auto; } .history .content .content-new .box .con-list { width: 100%; height: auto; position: relative; margin-bottom: 30px; margin-top: 20px; overflow: hidden; } .history .content .content-new .box .con-list ul { width: 100%; height: auto; } .history .content .content-new .box .con-list ul li { width: 100%; height: auto; display: none; float: left; } .history .content .content-new .box .con-list ul li.on{ display: block; } .history .content .content-new .box .con-list ul li .list{ width: 100%; overflow: hidden; height: auto;} .history .content .content-new .box .con-list ul li .list dl{ width: 100%; height: auto;} .history .content .content-new .box .con-list ul li .list dl dd{ width: 100%; height: auto; float: left;} .history .content .content-new .box .con-list ul li .list dl dd .item { width: 64.6%; height: auto; margin: 0 auto; } .history .content .content-new .box .con-list ul li .list dl dd .item .con { width: 49%; height: auto; float: left; margin-top: 145px; } .history .content .content-new .box .con-list ul li .list dl dd .item .con .year { font-size: 72px; line-height: 74px; color: #333; font-family: ATB; } .history .content .content-new .box .con-list ul li .list dl dd .item .con .txt { font-size: 14px; line-height: 24px; color: #666; margin-top: 26px; } .history .content .content-new .box .con-list ul li .list dl dd .item .pic { width: 43.8%; height: 100%; float: right; position: relative; text-align: center; margin-top: 10%; } .history .content .content-new .box.b .con-list ul li .list dl dd .item .pic{ background-image: url(../images/waikuang.png); background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; background-size: cover; } .history .content .content-new .box .con-list ul li .list dl dd .item .pic img { max-height: 100%; max-width: 100%; } .history .content .content-new .box.b .con-list ul li .list dl dd .item .pic img{ max-width: 80%; max-height: 80%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .history .content .content-new .box .con-list .a { width: 56px; height: 56px; position: absolute; top: 50%; margin-top: -28px; display: block; background-size: cover !important; background-position: center center; background-repeat: no-repeat; transition: all .5s;z-index: 10; } .history .content .content-new .box .con-list .a.prev { background-image: url(../images/history_prev.png); left: 0; } .history .content .content-new .box .con-list .a.next { background-image: url(../images/history_next.png); right: 0; } .history .content .content-new .box .con-list .a:hover.prev { background-image: url(../images/history_prev_h.png); } .history .content .content-new .box .con-list .a:hover.next { background-image: url(../images/history_next_h.png); } .history .content .content-new .box .year-list { width: 100%; height: auto; padding-left: 102px; position: relative; background-position: 77px 48.4px; -webkit-background-size: 9.8%; background-size: 9.8%; background-repeat: repeat-x; overflow: hidden; } .history .content .content-new .box .year-list ul { width: 100%; height: auto; } .history .content .content-new .box .year-list ul li { width: 142px; height: 80px; position: relative; float: left; z-index: 10; cursor: pointer; } .history .content .content-new .box .year-list ul li .line { width: 10px; height: 10px; background-color: #999; border-radius: 100px; position: absolute; top: 48px; left: 50%; margin-left: -5px; background-size: 100%; } .history .content .content-new .box .year-list ul li .year { width: 100%; height: auto; font-size: 14px; line-height: 14px; text-align: center; color: #999; font-family: ATB; left: 0; top: 64px; position: absolute; transition: top 1s,color 1s; } .history .content .content-new .box .year-list ul li .icon { width: 100%; height: 8px; background: url(../images/history_icon3.png) center center no-repeat; position: absolute; top: 82px; left: 0; opacity: 0; transition: top 1s,opacity 1s; } .history .content .content-new .box .year-list ul li.on .year { font-size: 36px; line-height: 36px; top: -5px; color: #333; } .history .content .content-new .box .year-list ul li.on .icon { top: 72px; opacity: 1; } .history .content .content-new .box .year-list .bg { width: 100%; height: 10px; background: url(../images/nn.png) repeat-x; position: absolute; top: 48px; left: 0; z-index: 9; } .history .content .content-new .box.on { display: block; } @media (max-width: 1200px) { .history .content .content-new .box .con-list ul li .list dl dd .item .con { margin-top: 70px; } } @media (max-width: 1024px) { .history { padding-bottom: 100px; } .history .content { padding-top: 70px; margin: 0 auto 0; } .history .content .content-new .box .con-list ul li .list dl dd .item { width: 80%; } .history .content .content-new .box .con-list ul li .list dl dd .item .con { margin-top: 50px; } .history .content .content-new .box .con-list ul li .list dl dd .item .con .year { font-size: 48px; line-height: 50px; } .history .content .content-new .box .year-list { padding-left: 0; } .history .content .content-new .box .year-list ul li.on .year { font-size: 26px; line-height: 28px; top: 10px; } } @media (max-width: 800px) { .history { padding-bottom: 60px; } .history .content { padding-top: 50px; margin: 0 auto 0; } .history .content .content-new .box .con-list ul li .list dl dd .item .con .year { font-size: 40px; line-height: 42px; } .history .content .content-new .box .con-list ul li .list dl dd .item .con .txt { margin-top: 10px; } } @media (max-width: 660px) { .history .content .content-new .box .con-list .a{ width: 40px; height: 40px; margin-top: -20px; } .history .content .tabs { width: 200px; height: 38px; } .history .content .tabs a { height: 36px; line-height: 36px; font-size: 14px; } .history .content .tabs a.a1 { width: 64px; padding-left: 34px; -webkit-background-size: 14px; background-size: 14px; background-position: 14px center; } .history .content .tabs a.a2 { width: 68px; padding-left: 30px; background-position: 10px center; } .history .content .tabs span { height: 38px; left: 99px; } .history .content .content-new .box .con-list ul li .list dl dd .item .pic { width: 100%; float: none; margin-top: 0; } .history .content .content-new .box .con-list ul li .list dl dd .item .con { width: 100%; float: none; margin-top: 10px; } .history .content .content-new .box .con-list ul li .list dl dd .item .con .year { display: none; } /*.history .content .content-new .box .con-list .a{ display: none; }*/ .history .content .content-new .box .year-list .bg{ height: 1px; background-color: #999; } .history .content .content-new .box .year-list ul li .list dl dd .line{ background-color: #fff; border: 1px solid #999; z-index: 5; } .history .content .content-new .box .year-list ul li.on .line{ background-color: #999; } .history .content .content-new .box .year-list .bg{ top: 53px; } .history .content .content-new .box .year-list ul li.on .icon{ display: none; } .history .content .content-new .box .con-list ul li .list dl dd .item .con .txt { text-align: center; margin-top: 10px; } } .project-details { width: 100%; height: auto; padding-bottom: 50px; } .project-details .details-top { width: 100%; height: auto; background-position: center center; background-repeat: no-repeat; background-size: cover; margin-top: 98px; padding-top: 142px; padding-bottom: 194px; } .project-details .details-top .top-new { margin: 0 auto; position: relative; } .project-details .details-top .top-new .con { width: 30.3%; height: auto; } .project-details .details-top .top-new .con .en { font-size: 48px; text-transform: uppercase; line-height: 50px; color: #fff; font-family: ATB; } .project-details .details-top .top-new .con .cn { font-size: 36px; line-height: 38px; color: #fff; margin-top: 22px; } .project-details .details-top .top-new .con .txt { font-size: 14px; line-height: 24px; color: #fff; margin-top: 43px; } .project-details .details-top .top-new .return { width: 56px; height: 56px; position: absolute; top: 0; left: -65px; background-image: url(../images/details_icon1.png); background-size: cover; background-position: center center; background-repeat: no-repeat; display: block; } .project-details .tabs { margin: 50px auto 0; position: relative; } .project-details .tabs .tabs-new { width: 87.8%; height: auto; margin: 0 auto; overflow: hidden; } .project-details .tabs .tabs-new ul { width: 10000%; height: auto; } .project-details .tabs .tabs-new ul li { width: 69px; height: auto; float: left; margin-right: 10px; cursor: pointer; } .project-details .tabs .tabs-new ul li img { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; } .project-details .tabs .tabs-new ul li.on img { -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: grayscale(0%); filter: gray; } .project-details .tabs .a { width: 56px; height: 56px; position: absolute; top: 50%; margin-top: -28px; display: block; background-size: cover !important; background-position: center center; background-repeat: no-repeat; transition: all .5s; } .project-details .tabs .a.prev { background-image: url(../images/history_prev.png); left: 0; } .project-details .tabs .a.next { background-image: url(../images/history_next.png); right: 0; } .project-details .tabs .a:hover.prev { background-image: url(../images/history_prev_h.png); } .project-details .tabs .a:hover.next { background-image: url(../images/history_next_h.png); } .project-details .list { width: 100%; height: auto; overflow: hidden; margin-top: 50px; border-bottom: 1px solid #eaeaea; } .project-details .list ul { width: 100%; height: auto; } .project-details .list ul li { width: 23.9%; height: auto; padding-bottom: 209px; float: left; position: relative; cursor: pointer; } .project-details .list ul li .pic { width: 100%; height: auto; overflow: hidden; } .project-details .list ul li .pic img { transition: all .5s; } .project-details .list ul li .con { width: 100%; height: 370px; position: absolute; bottom: -160px; left: 0; transition: bottom .5s,background .5s; z-index: 10; } .project-details .list ul li .con .con-new { width: 80%; height: auto; margin: 0 auto; } .project-details .list ul li .con .con-new .num { font-size: 36px; line-height: 36px; text-align: center; font-family: ATB; color: #999; margin-top: 55px; transition: color .5s; } .project-details .list ul li .con .con-new .tits { text-align: center; font-size: 24px; line-height: 24px; color: #2c2f30; margin-top: 15px; transition: color .5s; width: 100%; position: relative; } .project-details .list ul li .con .con-new .tits .add { position: absolute; right: 0; bottom: 5px; display: inline-block; background: url(../images/add.png) left center no-repeat; font-size: 12px; color: rgab(255, 255, 255, 0.8); padding-left: 18px; line-height: 14px; display: none; } .project-details .list ul li .con .con-new .txt { width: 100%; height: 144px; font-size: 14px; line-height: 24px; color: #fff; opacity: 0; margin-top: 40px; transition: opacity .5s; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } @media (min-width: 1024px) { .project-details .list ul li:hover .pic img { margin-top: -160px; } .project-details .list ul li:hover .con { background: #B0A5A1; } .project-details .list ul li:hover .con .con-new .num { margin-top: 40px; color: #fff; } .project-details .list ul li:hover .con .con-new .tits { color: #fff; } .project-details .list ul li:hover .con .con-new .tits .add { display: block; } .project-details .list ul li:hover .con .con-new .txt { transform: translateY(0); opacity: 1; } } .project-details .details-bottom { width: 94.8%; height: auto; margin: 50px auto 0; } .project-details .details-bottom a { width: 49.5%; height: auto; position: relative; display: block; overflow: hidden; } .project-details .details-bottom a img { transition: transform .5s; } .project-details .details-bottom a .tits { position: absolute; font-size: 36px; line-height: 36px; color: #c1c6cb; color: #fff; top: 50%; margin-top: -18px; display: inline-block; } .project-details .details-bottom a .tits i { font-family: ATB; opacity: 0.32; } .project-details .details-bottom a .tits span { font-size: 24px; } .project-details .details-bottom a.prev .tits { padding-left: 40px; background: url(../images/details_prev.png) left center no-repeat; left: 11.1%; } .project-details .details-bottom a.prev .tits span { margin-left: 20px; } .project-details .details-bottom a.next .tits { right: 11.1%; padding-right: 40px; background: url(../images/details_next.png) right center no-repeat; } .project-details .details-bottom a.next .tits span { margin-right: 20px; float: right; } .project-details .details-bottom a.next .tits i { float: right; } @media (min-width: 1024px) { .project-details .details-bottom a:hover img { transform: scale(1.1); } } @media (max-width: 1540px) { .project-details .details-top .top-new { width: 82%; } } @media (max-width: 1200px) { .project-details .tabs .a { width: 38px; height: 38px; margin-top: -19px; } .project-details .list ul li { padding-bottom: 140px; } .project-details .list ul li .con { height: 300px; bottom: -90px; } .project-details .list ul li .con .con-new .num { margin-top: 95px; font-size: 20px; line-height: 22px; } .project-details .list ul li .con .con-new .tits { font-size: 18px; } .project-details .list ul li .con .con-new .txt { margin-top: 20px; } } @media (max-width: 1200px) and (min-width: 1024px) { .project-details .list ul li:hover .pic img { margin-top: -89px; } .project-details .list ul li:hover .con .con-new .num { margin-top: 20px; } } @media (max-width: 1170px) { .project-details .details-top .top-new { width: 82%; } .project-details .details-top .top-new .con { width: 49%; } } @media (max-width: 1024px) { .project-details .details-top { margin-top: 80px; padding-top: 80px; padding-bottom: 100px; } .project-details .details-top .top-new .con .en { font-size: 32px; line-height: 34px; } .project-details .details-top .top-new .con .cn { font-size: 24px; line-height: 26px; margin-top: 10px; } .project-details .details-top .top-new .con .txt { margin-top: 20px; } .project-details .list ul li { padding-bottom: 35px; } .project-details .list ul li .con { position: relative; bottom: auto; height: auto; } .project-details .list ul li .con .con-new .num { margin-top: 20px; } .project-details .list ul li .con .con-new .txt { display: none; } .project-details .details-bottom { margin: 30px auto 0; } } @media (max-width: 930px) { .project-details { padding-bottom: 30px; } .project-details .details-bottom a .tits { font-size: 28px; line-height: 28px; margin-top: -14px; } .project-details .details-bottom a .tits span { font-size: 20px; } .project-details .details-bottom a.prev .tits { padding-left: 20px; } .project-details .details-bottom a.prev .tits span { margin-left: 10px; } .project-details .details-bottom a.next .tits { padding-right: 20px; } .project-details .details-bottom a.next .tits span { margin-right: 10px; } } @media (max-width: 730px) { .project-details .details-top { margin-top: 60px; padding-top: 50px; padding-bottom: 60px; } .project-details .details-top .top-new .con { width: 60%; } .project-details .details-top .top-new .return { width: 40px; height: 40px; left: -50px; } .project-details .tabs { margin: 30px auto 0; } .project-details .list { margin-top: 30px; } } @media (max-width: 660px) { .project-details .details-bottom a .tits { font-size: 20px; line-height: 20px; margin-top: -10px; } .project-details .details-bottom a .tits span { font-size: 16px; } .project-details .details-bottom a.prev .tits { left: 4%; } .project-details .details-bottom a.next .tits { right: 4%; } } @media (max-width: 560px) { .project-details .details-top { padding-top: 30px; padding-bottom: 40px; } .project-details .details-top .top-new { width: 80%; } .project-details .details-top .top-new .con { width: 100%; } .project-details .details-top .top-new .return { width: 30px; height: 30px; left: -10%; } } @media (max-width: 470px) { .project-details { padding-bottom: 20px; } .project-details .details-bottom a { width: 100%; margin-bottom: 10px; } .project-details .details-bottom a.prev .tits { left: 4%; } .project-details .details-bottom a.next .tits { left: 4%; right: auto; padding-left: 20px; padding-right: 0; background: url(../images/details_next.png) left center no-repeat; } .project-details .details-bottom a.next .tits i { float: left; } .project-details .details-bottom a.next .tits span { float: left; } } @media (max-width: 455px) { .project-details .details-top { margin-top: 50px; } } .product { width: 100%; height: auto; padding-top: 98px; } .product .box { margin: 57px auto 0; } .product .box .title { font-size: 36px; line-height: 38px; color: #333; text-align: center; } .product .box .search { width: 578px; height: 60px; margin: 40px auto 0; border: 1px solid #dbdbdb; border-radius: 5px; } .product .box .search .text { width: 480px; height: 60px; border: none; background: none; float: left; font-size: 16px; line-height: 60px; color: #999; padding-left: 20px; } .product .box .search .submit { width: 66px; height: 60px; float: right; background: url(../images/product_search.png) center no-repeat; border: none; } .product .box .nav { width: 100%; height: auto; margin-top: 50px; overflow: hidden; } .product .box .nav a { width: 20%; height: 160px; float: left; border-left: 1px solid #eaeaea; border-top: 1px solid #eaeaea; margin-left: -1px; margin-top: -1px; } .product .box .nav a .item { width: 100%; height: auto; transition: transform .5s; } .product .box .nav a .item .icon { width: 100%; height: 40px; margin-top: 24px; position: relative;} .product .box .nav a .item .icon .ycTbAct{width: 100%;height: 100%;position: absolute;top:0;left: 0; opacity: 1;transition: all .5s;max-height: 100%;-webkit-background-size: auto 90% !important;background-size: auto 90% !important;} .product .box .nav a .item .icon .ycTbAct-h{width: 100%;height: 100%;position: absolute;top:0;left: 0;opacity: 0;transition: all .5s;max-height: 100%;-webkit-background-size: auto 90% !important;background-size: auto 90% !important;} .product .box .nav a:hover .item .icon .ycTbAct{opacity: 0;} .product .box .nav a:hover .item .icon .ycTbAct-h{opacity: 1;} .product .box .nav a:nth-child(1) .item .icon .ycTbAct { -webkit-background-size: auto 72% !important; background-size: auto 72% !important; } /*.ycTbAct{position: absolute;top: 0;left: 0;bottom: 0;right: 0;opacity: 0;transition:all linear .3s;-webkit-transition:all linear .3s;-moz-transition:all linear .3s;-ms-transition:all linear .3s;-o-transition:all linear .3s;} */ /*.product .box .nav a:hover .ycTbAct{opacity: 1;}*/ /*.product .box .nav a .item .icon.i1 { background: url(../images/index_icon1.png) center no-repeat; } .product .box .nav a .item .icon.i2 { background: url(../images/index_icon2.png) center no-repeat; } .product .box .nav a .item .icon.i3 { background: url(../images/index_icon3.png) center no-repeat; } .product .box .nav a .item .icon.i4 { background: url(../images/index_icon4.png) center no-repeat; } .product .box .nav a .item .icon.i5 { background: url(../images/index_icon5.png) center no-repeat; } .product .box .nav a .item .icon.i6 { background: url(../images/index_icon6.png) center no-repeat; } .product .box .nav a .item .icon.i7 { background: url(../images/index_icon7.png) center no-repeat; } .product .box .nav a .item .icon.i8 { background: url(../images/index_icon8.png) center no-repeat; }*/ .product .box .nav a .item .cn { text-align: center; width: 100%; height: auto; font-size: 16px; line-height: 22px; color: #333; margin-top: 10px; } .product .box .nav a .item .en { font-size: 12px; line-height: 16px; color: #333; margin-top: 5px; text-align: center; } @media (min-width: 1024px) { .product .box .nav a:hover .item { transform: translateY(-10px); } } .product .box1 { width: 100%; height: auto; } .product .box1 .title { text-align: center; font-size: 36px; line-height: 38px; color: #333; margin-top: 87px; } .product .box1 .list { width: 100%; height: auto; overflow: hidden; position: relative; margin-top: 40px; } .product .box1 .list ul { width: 100%; height: auto; } .product .box1 .list ul li { position: relative; } .product .box1 .list ul li .bbg{ width: 100%; height: 100%; background-color: rgba(255,255,255,0.5); position: absolute; top: 0; left: 0; z-index: 5; } .product .box1 .list ul li.swiper-slide-active .bbg{ display: none; } .product .box1 .list ul li .item { width: 40px; height: 40px; position: absolute; top: 65%; z-index: 10; left: 18%; } .product .box1 .list ul li .item .item-click { width: 40px; height: 40px; position: relative; } .product .box1 .list ul li .item .item-click .icon { width: 40px; height: 40px; position: absolute; top: 0; left: 0; background: url(../images/product_click.png) no-repeat; transition: transform .5s; z-index: 5; } .product .box1 .list ul li .item .item-click .bg { width: 26px; height: 26px; background-color: #fff; top: 7px; left: 7px; position: absolute; z-index: 3; opacity: 0.3; border-radius: 26px; transition: transform .5s; } .product .box1 .list ul li .item .con { width: 318px; height: 201px; background: url(../images/product_bg.png) no-repeat; position: absolute; bottom: 8px; left: 40px; display: none; } .product .box1 .list ul li .item .con .con-new { width: 300px; height: 201px; float: right; } .product .box1 .list ul li .item .con .con-new .top { width: 100%; height: 46px; } .product .box1 .list ul li .item .con .con-new .top .pic { width: 100px; height: 100px; float: left; position: relative; margin-top: -54px; background: #fff; border-top-left-radius: 5px; border-top-right-radius: 5px; } .product .box1 .list ul li .item .con .con-new .top .pic img { max-width: 100%; max-height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .product .box1 .list ul li .item .con .con-new .top .tits { float: left; margin-left: 20px; font-size: 16px; line-height: 46px; color: #fff; } .product .box1 .list ul li .item .con .con-new .conn { width: 100%; height: 108px; background: #fff; } .product .box1 .list ul li .item .con .con-new .conn .conn-new { width: 260px; height: auto; margin: 0 auto; font-size: 12px; line-height: 20px; color: #666; padding-top: 10px; } .product .box1 .list ul li .item .con .con-new .more { width: 100%; height: 46px; } .product .box1 .list ul li .item .con .con-new .more span { line-height: 46px; font-size: 12px; color: #fff; float: left; margin-left: 114px; } .product .box1 .list ul li .item .con .con-new .more i { width: 15px; height: 4px; background: url(../images/product_more.png) no-repeat; float: left; margin-left: 10px; margin-top: 22px; } .product .box1 .list ul li .item.i1 { top: 65%; left: 18%; } .product .box1 .list ul li .item.i2 { top: 32%; left: 55%; } @media (min-width: 1024px) { .product .box1 .list ul li .item:hover .item-click .icon { transform: rotate(360deg); } .product .box1 .list ul li .item:hover .item-click .bg { transform: scale(1.5); } } .product .box1 .list .btns { height: 15px; margin: 35px auto 0; position: relative; } .product .box1 .list .btns .swiper-scrollbar { width: 93%; height: 4px; margin: 0 auto; top: 5px; background: #eaeaea; opacity: 1 !important; } .product .box1 .list .btns .swiper-scrollbar .swiper-scrollbar-drag { background: #333; } .product .box1 .list .a{ width: 40px; height: 68px; position: absolute; top: 50%; margin-top: -34px; z-index: 10; background-position: center; background-repeat: no-repeat; background-image: url(../images/banner_btn.png); } @media (max-width: 750px){ .product .box1 .list .a{ display: none; } .product .box1 .list ul li .item .item-click{ display: none; } } .product .box1 .list .a.prev{ left: 1%; } .product .box1 .list .a.next{ right: 1%; transform: rotate(180deg); } .product .box1 .list .btns .a { width: 23px; height: 15px; position: absolute; margin-top: 0; top: 0; } .product .box1 .list .btns .a.prev { background: url(../images/product_prev.png) no-repeat; left: 0; } .product .box1 .list .btns .a.next { background: url(../images/product_next.png) no-repeat; right: 0; } @media (min-width: 1024px) { .product .box1 .list .btns .a:hover.prev { background: url(../images/product_prev_h.png) no-repeat; } .product .box1 .list .btns .a:hover.next { background: url(../images/product_next_h.png) no-repeat; } } .product .product-bottom { width: 100%; height: auto; margin-top: 95px; } .product .product-bottom a { width: 50%; height: auto; float: left; padding-top: 95px; padding-bottom: 125px; background-position: center center; background-repeat: no-repeat; background-size: cover; } .product .product-bottom a .con { width: 52%; height: auto; margin-left: 10.4%; color: #fff; transition: transform .5s; } .product .product-bottom a .con .tits { font-size: 36px; line-height: 38px; font-family: ATB; text-transform: uppercase; } .product .product-bottom a .con .text { font-size: 14px; line-height: 24px; height: 48px; width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-top: 20px; } .product .product-bottom a .con .icon { width: 48px; height: 48px; background: url(../images/product_icon1.png) center no-repeat; margin-top: 24px; } @media (min-width: 1024px) { .product .product-bottom a:hover .con { transform: translateY(-20px); } } @media (max-width: 1024px) { .product .box { margin: 30px auto 0; } .product .box .title { font-size: 26px; line-height: 28px; } .product .box .search { margin: 20px auto 0; } .product .box .nav { margin-top: 20px; } .product .box1 .title { margin-top: 55px; font-size: 26px; line-height: 28px; } .product .product-bottom { margin-top: 45px; } } @media (max-width: 840px) { .product .product-bottom a { padding-top: 40px; padding-bottom: 60px; } .product .product-bottom a .con { width: 80%; margin: 0 auto; } .product .product-bottom a .con .tits { font-size: 26px; line-height: 28px; } .product .product-bottom a .con .text { margin-top: 10px; } .product .product-bottom a .con .icon { width: 30px; height: 30px; background-size: cover !important; } } @media (max-width: 730px) { .product { padding-top: 60px; } } @media (max-width: 640px) { .product .box .nav a { width: 33.3%; border-bottom: 1px solid #eaeaea; border-top: none; } .product .box .nav a:last-child { border-right: 1px solid #eaeaea; } .product .box .search { width: 92%; height: 40px; } .product .box .search .text { width: 60%; height: 40px; line-height: 40px; font-size: 14px; } .product .box .search .submit { width: 40px; height: 40px; } .product .box1 .list { margin-top: 20px; } .product .product-bottom a { width: 100%; } } @media (max-width: 460px) { .product .box .title { font-size: 20px; line-height: 22px; } .product .box1 .title { margin-top: 25px; font-size: 20px; line-height: 22px; } .product .box1 .list .btns { margin: 15px auto 0; } } @media (max-width: 455px) { .product { padding-top: 50px; } } .product-list { width: 100%; height: auto; margin-top: 98px; } .product-list .list-top { width: 100%; height: 118px; background: #d5dee5; } .product-list .list-top .top-left { width: 25%; height: 100%; float: left; position: relative; } .product-list .list-top .top-left .search { width: 250px; height: 22px; margin-top: 48px; float: right; margin-right: 50px; } .product-list .list-top .top-left .search .submit { width: 22px; height: 22px; float: right; background: url(../images/product_search1.png) center no-repeat; border: none; } .product-list .list-top .top-left .search .text { width: 210px; height: 22px; border: none; background: none; text-align: right; font-size: 12px; line-height: 22px; color: #79888f; } .product-list .list-top .top-left .line { width: 1px; height: 100%; background: #eaeaea; position: absolute; top: 0; right: 0; } .product-list .list-top .top-right { width: 75%; height: 100%; float: left; background: #B0A5A1; } .product-list .list-top .top-right .nav { width: 100%; margin-top: 34px; } .product-list .list-top .top-right .nav .nav-new{ margin-left: 52px; width: auto; } .product-list .list-top .top-right .nav a { display: block; height: 50px; float: left; border-radius: 5px; transition: background .5s; font-size: 14px; line-height: 50px; margin-right: 5px; padding: 0 28px; color: #fff; } .product-list .list-top .top-right .nav a.on { background: #4abae8; } @media (min-width: 1024px) { .product-list .list-top .top-right .nav a:hover { background: #4abae8; } } .product-list .content { width: 100%; height: auto; background: #eff4f7; } .product-list .content .nav { width: 25%; height: auto; float: left; } .product-list .content .nav a { width: 100%; height: 79px; display: block; border-bottom: 1px solid #eaeaea; font-size: 16px; line-height: 79px; color: #333; transition: background .5s; } .product-list .content .nav a i { width: 27px; height: 100%; float: left; display: block; position: relative; margin-left: 16%; } .product-list .content .nav a i img { max-width: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0;transition:all linear .3s; -webkit-transition:all linear .3s;-moz-transition:all linear .3s;-ms-transition:all linear .3s;-o-transition:all linear .3s; margin: auto; } .product-list .content .nav a i img:last-child{opacity: 0;} .product-list .content .nav a:hover img:last-child{opacity: 1;} .product-list .content .nav a:hover img:first-child{opacity: 0;} .product-list .content .nav a span { float: left; margin-left: 20px; } .product-list .content .nav a.on { background: #fff; } @media (min-width: 1024px) { .product-list .content .nav a:hover { background: #fff; } } .product-list .content .list { width: 75%; height: auto; float: left; background: #fff; overflow: hidden; padding-bottom: 160px; } .product-list .content .list ul { width: 100%; height: auto; padding-bottom: 30px; } .product-list .content .list ul li { width: 33.3333333333%; height: auto; float: left; margin-left: -1px; border-left: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; position: relative; } .product-list .content .list ul li .a { width: 100%; height: auto; display: block; padding-bottom: 45px; } .product-list .content .list ul li .a .item { width: 79.2%; height: auto; margin: 0 auto; padding-top: 20px; } .product-list .content .list ul li .a .item .pic { width: 100%; height: 235px; position: relative; } .product-list .content .list ul li .a .item .pic img { max-width: 100%; max-height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; transition: transform .5s; } .product-list .content .list ul li .a .item .tits { font-size: 18px; height: 20px; line-height: 20px; color: #2c2f30; margin-top: 22px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .product-list .content .list ul li .a .item .con { width: 100%; font-size: 14px; line-height: 24px; color: #666; height: 72px; margin-top: 22px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .product-list .content .list ul li .tag { position: absolute; top: 60px; right: 8%; z-index: 10; width: 40px; } .product-list .content .list ul li .tag .shop { width: 40px; height: 40px; display: block; background-image: url(../images/shop.png); background-position: center center; background-repeat: no-repeat; transition: background .5s; } @media (min-width: 1024px) { .product-list .content .list ul li .tag .shop:hover { background-color: #B0A5A1; background-image: url(../images/shop_h.png); } } .product-list .content .list ul li .tag .share { width: 40px; height: 40px; margin-top: 10px; cursor: pointer; position: relative; } .product-list .content .list ul li .tag .share .icon { width: 100%; height: 40px; background-image: url(../images/share.png); background-repeat: no-repeat; background-position: center center; } .product-list .content .list ul li .tag .share .share-new { width: 83px; height: auto; height: auto; overflow: hidden; position: absolute; top: 40px; right: -1px; display: none; } .product-list .content .list ul li .tag .share .share-new a { width: 40px; height: 40px; margin: 0 auto; padding: 0; background-position: center center; background-repeat: no-repeat; display: block; float: left; border: 1px solid #eaeaea; background-color: #fff; transition: all .5s; margin-top: -1px; margin-left: -1px; } .product-list .content .list ul li .tag .share .share-new a.bds_qzone { background-image: url(../images/header_kj.png); } .product-list .content .list ul li .tag .share .share-new a.bds_qzone:hover { background-image: url(../images/header_kj_h.png); } .product-list .content .list ul li .tag .share .share-new a.bds_tsina { background-image: url(../images/header_wb.png); } .product-list .content .list ul li .tag .share .share-new a.bds_tsina:hover { background-image: url(../images/header_wb_h.png); } .product-list .content .list ul li .tag .share .share-new a.bds_douban { background-image: url(../images/header_db.png); } .product-list .content .list ul li .tag .share .share-new a.bds_douban:hover { background-image: url(../images/header_db_h.png); } .product-list .content .list ul li .tag .share .share-new a.bds_weixin { background-image: url(../images/header_wx.png); } .product-list .content .list ul li .tag .share .share-new a.bds_weixin:hover { background-image: url(../images/header_wx_h.png); } .product-list .content .list ul li .tag .share .share-new a:hover { background-color: #B0A5A1; } .product-list .content .list ul li .tag .share:hover .icon { background-color: #B0A5A1; background-image: url(../images/share_h.png); } .product-list .content .list ul li .tag .share:hover .share-new { display: block; } @media (min-width: 1024px) { .product-list .content .list ul li:hover .a .item .pic img { transform: scale(1.1); } } @media (max-width: 1320px){ .product-list .list-top .top-right .nav .nav-new a{ padding: 0 10px; } } @media (max-width: 1200px) { .product-list .content .list ul li .a .item .pic { height: 200px; } } @media (max-width: 1024px) { .product-list { margin-top: 80px; } .product-list .list-top { height: 80px; } .product-list .list-top .top-left .search { margin-top: 29px; margin-right: 25px; } .product-list .list-top .top-right .nav { overflow-x: scroll; margin-top: 15px; } .product-list .list-top .top-right .nav .nav-new{ width: 120%; } .product-list .content .nav a { height: 64px; line-height: 64px; font-size: 16px; } .product-list .content .list { padding-bottom: 60px; } .product-list .content .list ul li .a { padding-bottom: 20px; } .product-list .content .list ul li .a .item .pic { height: 200px; } .product-list .content .list ul li .a .item .tits { margin-top: 10px; font-size: 16px; line-height: 18px; height: 18px; } .product-list .content .list ul li .a .item .con { margin-top: 10px; line-height: 20px; height: 60px; } .product-list .content .list ul li .tag { display: none; } } @media (max-width: 730px) { .product-list { margin-top: 60px; } .product-list .list-top { height: 60px; } .product-list .list-top .top-left .search { margin-top: 19px; margin-right: 10px; width: 235px; } .product-list .list-top .top-right .nav { margin-left: 30px; } .product-list .list-top .top-right .nav .nav-new{ margin-left: 0; } .product-list .list-top .top-right .nav a { height: 30px; padding: 0 15px; line-height: 30px; } .product-list .content .nav{ display: none; } .product-list .content .nav a { height: 50px; line-height: 50px; font-size: 14px; } .product-list .content .nav a i { margin-left: 6%; } .product-list .content .nav a span { margin-left: 10px; } .product-list .content .list ul { padding-bottom: 0; margin-bottom: 30px; border-bottom: 1px solid #eaeaea; } .product-list .content .list ul li { width: 50%; } .product-list .content .list ul li:last-child { border: none; border-right: 1px solid #eaeaea; } } @media (max-width: 530px) { .product-list .list-top .top-left { display: none; } .product-list .list-top .top-right { width: 100%; } .product-list .content .nav { width: 60px; } .product-list .content .nav a i { margin-left: 0; width: 100%; } .product-list .content .nav a i img { max-width: 24px; } .product-list .content .nav a span { display: none; } .product-list .content .list { width: auto; float: none; } .product-list .content .list ul li .a .item .pic { height: 280px; } } @media (max-width: 455px) { .product-list .content .list ul li{ width: 100%; float: none; } .product-list { margin-top: 50px; } } @media (max-width: 400px) { .product-list .content .list { width: auto; float: none; } /*.product-list .content .list ul li { width: 100%; } .product-list .content .list ul li .a .item .pic { height: auto; } .product-list .content .list ul li .a .item .pic img { position: relative; }*/ } .product-details { width: 100%; height: auto; margin-top: 98px; } .product-details .pic-list { width: 50%; height: 100%; float: left; position: relative; } .product-details .pic-list .img-big { width: 100%; height: 75%; margin-top: 5%; overflow: hidden; } .product-details .pic-list .img-big ul { width: 100%; height: 100%; } .product-details .pic-list .img-big ul li { width: 100%; height: 100%; display: none; position: relative; float: left; } .product-details .pic-list .img-big ul li img { max-width: 98%; max-height: 98%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; border:#eee 1px solid } .product-details .pic-list .small-box { width: 100%; height: 20%; } .product-details .pic-list .small-box .small-list { width: 390px; height: auto; text-align: center; overflow: hidden; font-size: 0; margin: 0 auto; } .product-details .pic-list .small-box .small-list ul { width: 100%; display: inline-block; height: auto; } .product-details .pic-list .small-box .small-list ul li { width: 88px; height: 88px; margin-right: 10px; border: 1px solid #eee; position: relative; cursor: pointer; float: left; } .product-details .pic-list .small-box .small-list ul li img { max-width: 100%; max-height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .product-details .pic-list .small-box .small-list ul li.on { border: 1px solid #000; } .product-details .pic-list .small-box .small-list ul li:last-child { margin-right: 0; } .product-details .content { width: 50%; height: 100%; float: left; overflow: hidden; position: relative; background: #f6f6f6; } .product-details .content .content-new { width: 64.6%; height: auto; margin-left: 10.4%; padding-top: 100px; padding-bottom: 80px; } .product-details .content .content-new img { max-width: 100%; height: auto !important; } .product-details .content .content-new .tits { font-size: 26px; line-height: 26px; color: #1b1b1b; } .product-details .content .content-new .tits span{ float: left; } .product-details .content .content-new .tits .ewm{ width: 22px; float: right; position: relative; height: 26px; margin-right: 30px; } .product-details .content .content-new .tits .ewm .qr_code1{ position:absolute; left:-37px; top:29px; display:none } .product-details .content .content-new .tits .ewm:hover .qr_code1{ display:block} .product-details .content .content-new .tits .ewm .qr_code1 img{ width:108px !important; height:108px !important; max-width:108px !important} .product-details .content .content-new .tits .ewm i{ width: 22px; height: 18px; display: block; background: url(../images/d_wx.png) center no-repeat; cursor: pointer; } .qr_code { display: none; position: absolute; top: 30px; right: -35px; width: 144px; height: 144px; border: 2px solid #5c5d61; background: #fff; padding: 10px; z-index: 500; } .qr_code:before { width: 0; height: 0; display: block; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #5c5d61; content: ''; position: absolute; top: -9px; right: 38px; margin-left: -8px; } .product-details .content .content-new .tits .ewm.open .qr_code{ display: block; } .product-details .content .content-new .tit { font-size: 24px; line-height: 24px; font-family: ATB; color: #2c2f30; text-transform: uppercase; margin-top: 24px; } .product-details .content .content-new .tit1 { font-size: 18px; line-height: 20px; color: #5c5d61; margin-top: 22px; } .product-details .content .content-new .color { width: 100%; height: auto; margin-top: 47px; } .product-details .content .content-new .color .t { font-size: 24px; line-height: 26px; color: #666; font-family: ATB; text-transform: uppercase; } .product-details .content .content-new .color .tt { width: 100%; height: auto; margin-top: 20px; } .product-details .content .content-new .color .tt span { width: 50px; height: 35px; display: block; float: left; border: 1px solid #ccc; padding: 1px; margin-bottom: 5px; margin-right: 8px; } .product-details .content .content-new .tit2 { width: 100%; height: auto; font-size: 24px; line-height: 26px; border-bottom: 1px solid #eaeaea; padding-bottom: 20px; margin-top: 47px; } .product-details .content .content-new .txt { font-size: 14px; line-height: 30px; color: #333; margin-top: 16px; } .product-details .content .content-new .txt table{ width: 100% !important; } .product-details .content .content-new .txt table tr td{ width: 50%; } .product-details .content .content-new .txt p{ width: 100%; float: left; } .product-details .content .content-new p, .product-details .content .content-new p span { font-size:14px !important} .product-details .content .content-new .txt span{ color: #666; } .product-details .content .content-new .con { width: 100%; height: auto; color: #666 !important; margin-top: 38px; } .product-details .content .content-new .con p{ font-size: 14px; line-height: 24px; color: #666; } /*.product-details .content .content-new .con span{ color: #666 !important; }*/ .product-details .content .content-new .con .t { width: 100%; height: auto; font-size: 14px; line-height: 24px; } .product-details .content .content-new .con .ttt1 { width: 100%; height: auto; font-size: 24px; line-height: 26px; border-bottom: 1px solid #eaeaea; padding-bottom: 20px; } .product-details .content .content-new .con .tttt{ margin-top: 16px; font-size: 14px; line-height: 24px; } .product-details .content .content-new .con .t1 { font-size: 14px; line-height: 30px; color: #333; margin-top: 16px; } .product-details .content .content-new .con .text { font-size: 14px; line-height: 24px; color: #666; margin-top: 15px !important; } .product-details .content .content-new .con img { max-width: 100%; height: auto !important; display: block; margin-top: 10px; } .product-details .content .content-new .dd{ width: 100%; height: auto; margin-top: 8%; } .product-details .content .content-new .dd .t{ font-size: 24px; line-height: 24px; color: #2c2f30; border-bottom: 1px solid #eaeaea; padding-bottom: 16px; } .product-details .content .content-new .dd .t span{ font-size: 14px; color: #9a9b9b; } .product-details .content .content-new .dd .tt{ width: 100%; height: auto; } .product-details .content .content-new .dd .tt ul li{ width: 100%; height: auto; padding: 20px 0; border-bottom: 1px solid #eaeaea; } .product-details .content .content-new .dd .tt ul li span{ font-size: 14px; line-height: 40px; color: #666; padding-left: 20px; position: relative; } .product-details .content .content-new .dd .tt ul li span:before{ width: 5px; height: 5px; content: ""; position: absolute; left: 0; top: 50%; margin-top: -4px; border: 2px solid #aaacac; border-radius: 5px; } .product-details .content .content-new .dd .tt ul li .a{ float: right; width: 45px; height: 38px; border-radius: 5px; border: 1px solid #fe0335; margin-left: 5px; background-position: center center; background-repeat: no-repeat; } .product-details .content .content-new .dd .tt ul li .a.download{ background-image: url(../images/cpxq-12.png); } .product-details .content .content-new .dd .tt ul li .a.view{ background-image:url(../images/cpxq-11.png); } .product-details .content .content-new .dd .tt ul li .a:hover.download{ background-image:url(../images/cpxq-13.png); } .product-details .content .content-new .dd .tt ul li .a:hover.view{ background-image: url(../images/cpxq-10.png); } .product-details .content .content-new .shop{ margin-top: 4%; width: 100%; } .product-details .content .content-new .shop .t{ width: 137px; height: 52px; background: #fe0335; text-align: center; float: left; font-size: 16px; line-height: 52px; color: #fff; } .product-details .content .content-new .shop .t span{ background: url(../images/ggg_icon1.png) left center no-repeat; padding-left: 28px; } .product-details .content .content-new .shop .tt{ float: left; width: 270px; background: #231815; } .product-details .content .content-new .shop .tt a{ width: 90px; height: 52px; float: left; display: block; text-align: center; font-size: 16px; line-height: 52px; color: #fff; } .product-details .content .content-new .shop .tt a span{ padding-left: 20px; } .product-details .content .content-new .shop .tt a span.s1{ background: url(../images/ggg_icon2.png) left center no-repeat; } .product-details .content .content-new .shop .tt a span.s2{ background: url(../images/ggg_icon3.png) left center no-repeat; } .product-details .content .content-new .shop .tt a span.s3{ background: url(../images/ggg_icon4.png) left center no-repeat; } .product-details .content .content-new .shop .tt a:hover span{ border-bottom: 1px solid #fff; } /*.product-details .content .content-new .shop a{ width: 187px; height: 52px; background: #fe0335; text-align: center; font-size: 16px; line-height: 52px; display: block; color: #fff; margin-right: 10px; margin-bottom: 10px; } .product-details .content .content-new .shop span{ background: url(../images/shop_h.png) left center no-repeat; padding-left: 30px; }*/ .product-details .content .content-new .return-list{ width: 140px; height: 45px; border: 1px solid #ddd; display: block; text-align: center; font-size: 16px; line-height: 45px; border-radius: 23px; float: right; margin-top: 20px; color: #999; transition: all .5s; } @media (min-width: 1024px) { .product-details .content .content-new .return-list:hover{ background-color: #d5273d; border: 1px solid #d5273d; color: #fff; }} @media (max-width: 500px){ .product-details .content .content-new .tits .ewm{ display: none; } .product-details .content .content-new .shop .t{ width: 100px; font-size: 14px; } .product-details .content .content-new .shop .tt{ width: 180px; } .product-details .content .content-new .shop .tt a{ width: 60px; font-size: 14px; } } .product-details .content .mCSB_scrollTools { width: 5px; } .product-details .content .mCSB_scrollTools .mCSB_draggerRail { width: 5px; background: none; border-left: 1px solid #ccc; } .product-details .content .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background: #000; width: 5px; } .product-details .content .return-top { width: 38px; height: 43px; display: block; position: fixed; top: 35%; right: 6%; background: url(../images/top.png) no-repeat; } .product-details .fix-bottom { width: 50%; height: 70px; background: rgba(44, 47, 48, 0.9); position: fixed; bottom: 0; right: 0; z-index: 100; } .product-details .fix-bottom .a { width: 18.5%; height: 100%; text-align: center; display: block; float: left; border-right: 1px solid rgba(255, 255, 255, 0.1); } .product-details .fix-bottom .a span { padding-left: 25px; display: inline-block; font-size: 14px; line-height: 70px; color: #fff; } .product-details .fix-bottom .a span.s1 { background: url(../images/product_icon10.png) left center no-repeat; } .product-details .fix-bottom .a span.s2 { background: url(../images/product_icon11.png) left center no-repeat; } .product-details .fix-bottom .a1 { width: 29.2%; height: 100%; background: #fe0335; float: right; text-align: center; } .product-details .fix-bottom .a1 span { padding-left: 32px; display: inline-block; font-size: 14px; line-height: 70px; color: #fff; background: url(../images/product_icon12.png) left center no-repeat; } @media (max-width: 1540px) { .product-details .content .content-new { width: 80%; margin-left: 10%; } .product-details .content .return-top { right: 2%; } } @media (max-width: 1366px){ .product-details .pic-list .img-big{ height: 70%; } } @media (max-width: 1024px) { .product-details { margin-top: 80px; height: auto !important; } .product-details .pic-list { width: 100%; height: auto; float: none; } .product-details .pic-list .img-big { height: 400px; } .product-details .pic-list .small-box { height: 85px; padding: 10px 0; } .product-details .content { width: 100%; height: auto !important; } .product-details .content .content-new { width: 92%; margin: 0 auto; padding-top: 40px; padding-bottom: 80px; } .product-details .content .content-new .tit { font-size: 32px; line-height: 34px; margin-top: 15px; } .product-details .content .content-new .tit1 { font-size: 26px; line-height: 28px; margin-top: 10px; } .product-details .content .content-new .color { margin-top: 20px; } .product-details .content .content-new .color .tt { margin-top: 10px; } .product-details .content .content-new .tit2 { font-size: 18px; line-height: 20px; padding-bottom: 10px; margin-top: 25px; } .product-details .content .content-new .con { margin-top: 25px; } .product-details .content .content-new .con .t { font-size: 18px; line-height: 20px; padding-bottom: 10px; } .product-details .content .content-new .con .ttt1 { font-size: 18px; line-height: 20px; padding-bottom: 10px; } .product-details .content .return-top { display: none; } .product-details .fix-bottom { width: 100%; height: 60px; } .product-details .fix-bottom .a span { line-height: 60px; } .product-details .fix-bottom .a1 span { line-height: 60px; } } @media (max-width: 730px) { .product-details { margin-top: 60px; } } @media (max-width: 530px) { .product-details .content .content-new .tit { font-size: 22px; line-height: 24px; } .product-details .content .content-new .tit1 { font-size: 20px; line-height: 22px; } .product-details .fix-bottom .a { width: 25%; } .product-details .fix-bottom .a1 { width: 35%; } } @media (max-width: 455px) { .product-details { margin-top: 50px; } .product-details .pic-list { width: 100%; height: auto; float: none; } .product-details .pic-list .img-big { height: 300px; } .product-details .pic-list .small-box { height: 60px; padding: 10px 0; } .product-details .pic-list .small-box .small-list { width: 270px; } .product-details .pic-list .small-box .small-list ul li { width: 58px; height: 58px; } } @media (max-width: 380px) { .product-details .fix-bottom .a { width: 30%; } .product-details .fix-bottom .a1 { width: 39%; } } .service { width: 100%; height: auto; } .service .title{ text-align: center; font-size: 20px; line-height: 20px; color: #333; display: none; margin-top: 20px; } @media (max-width: 600px){ .service .title{ display: block; } } .service .list { margin: 50px auto 100px; overflow: hidden; } .service .list ul { width: 110%; height: auto; padding-bottom: 10px; } .service .list ul li { width: 28.1%; height: auto; float: left; margin-bottom: 50px; margin-right: 3.2%; padding-bottom: 37px; border-bottom: 1px solid #dbdbdb; cursor: pointer; } .service .list ul li a { width: 100%; height: auto; display: block; } .service .list ul li a .pic { width: 100%; height: auto; overflow: hidden; } .service .list ul li a .pic img { transition: transform .5s; } .service .list ul li a .tits { font-size: 24px; line-height: 26px; height: 26px; color: #2c2f30; font-family: ATB; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-top: 29px; } .service .list ul li a .tit { width: 100%; height: auto; margin-top: 20px; } .service .list ul li a .tit .more { display: inline-block; font-size: 14px; line-height: 18px; color: #858585; background: url(../images/download.png) left center no-repeat; padding-left: 25px; float: left; } .service .list ul li a .tit .kb { display: inline-block; font-size: 14px; line-height: 18px; color: #858585; margin-left: 15px; background: url(../images/kb.png) left center no-repeat; padding-left: 25px; float: left; } .service .list ul li a .tit .time { font-size: 14px; line-height: 17px; color: #999; font-family: ATB; float: right; } @media (min-width: 1024px) { .service .list ul li:hover a .pic img { transform: scale(1.1); } .service .list ul li:hover a .tits { color: #B0A5A1; } } @media (max-width: 1024px) { .service .list ul li .tits { font-size: 18px; line-height: 20px; height: 20px; margin-top: 15px; } } @media (max-width: 700px) { .service .list { margin: 30px auto 60px; } .service .list ul li { width: 44.1%; margin-bottom: 20px; padding-bottom: 25px; margin-right: 2.8%; } } @media (max-width: 450px) { .service .list ul { width: 100%; } .service .list ul li { width: 100%; margin-right: 0; } .service .list ul li a .tits{ font-size: 20px; line-height: 20px; margin-top: 10px; height: 20px;} .service .list ul li a .tits{ margin-top: 10px;} } .service-bottom { width: 100%; height: auto; background-size: cover; background-position: center center; background-repeat: no-repeat; padding-top: 103px; padding-bottom: 123px; } .service-bottom .con { margin: 0 auto; } .service-bottom .con .title { width: 26.3%; float: left; height: auto; text-align: right; } .service-bottom .con .title .en { font-family: ATB; font-size: 48px; line-height: 50px; color: #333; } .service-bottom .con .title .cn { font-size: 36px; line-height: 38px; color: #333; margin-top: 23px; } .service-bottom .con .con-new { width: 40%; height: auto; float: left; margin-left: 150px; position: relative; margin-top: 10px; } .service-bottom .con .con-new .txt { font-size: 14px; line-height: 24px; font-family: ATB; color: #333; text-align: center; } .service-bottom .con .con-new .i1 { width: 42px; height: 33px; background: url(../images/icon1.png) no-repeat; position: absolute; left: -104px; top: -17px; } .service-bottom .con .con-new .i2 { width: 42px; height: 33px; background: url(../images/icon2.png) no-repeat; position: absolute; right: -104px; top: -17px; } @media (max-width: 1520px) { .service-bottom .con .title .en { font-size: 36px; line-height: 38px; } .service-bottom .con .title .cn { font-size: 28px; line-height: 30px; margin-top: 15px; } } @media (max-width: 1200px) { .service-bottom { padding-top: 65px; padding-bottom: 90px; } } @media (max-width: 800px) { .service-bottom { padding-top: 30px; padding-bottom: 40px; } .service-bottom .con .title { width: 100%; float: none; text-align: left; } .service-bottom .con .con-new { width: 100%; float: none; margin-left: 0; } .service-bottom .con .con-new .i1, .service-bottom .con .con-new .i2 { display: none; } .service-bottom .con .con-new .txt { text-align: left; } } .service-tabs { width: 100%; height: auto; margin: 0 auto; text-align: center; font-size: 0; } .service-tabs a { border: 1px solid #dbdbdb; margin-left: -1px; width: 104px; display: inline-block; text-align: center; font-size: 16px; line-height: 46px; color: #333; transition: background .5s,color .5s; } .service-tabs a.a1 { width: 128px; border-top-left-radius: 23px; border-bottom-left-radius: 23px; } .service-tabs a.a2 { width: 126px; border-top-right-radius: 23px; border-bottom-right-radius: 23px; } .service-tabs a.on { background: #191d1c; color: #fff; } @media (min-width: 1024px) { .service-tabs a:hover { background: #191d1c; color: #fff; } } .service-tabs.m a { width: 230px; } .service-tabs.m a.a1 { width: 240px; } .service-tabs.m a.a2 { width: 219px; } .service-tabs-m { width: 100%; height: 50px; border-bottom: 1px solid #ddd; overflow-y: scroll; display: none; } .service-tabs-m ul { width: 500px; height: auto; } .service-tabs-m ul li { width: 100px; height: 47px; border-bottom: 3px solid #fff; float: left; text-align: center; font-size: 16px; line-height: 47px; } .service-tabs-m ul li a { color: #333; } .service-tabs-m ul li.on { border-bottom: 3px solid #000; } .water { width: 100%; height: auto; } .water .content {padding-top: 100px; margin: 0 auto 0; } .water .content .title { width: 100%; height: auto; text-align: center; font-size: 36px; line-height: 38px; color: #2c2f30; margin-top: 50px; } .water .content .list { margin: 50px auto 80px; overflow: hidden; } .water .content .list ul { width: 110%; height: auto; padding-bottom: 40px; } .water .content .list ul li { width: 20.3%; height: auto; float: left; margin-bottom: 40px; margin-right: 3.2%; padding-bottom: 27px; border-bottom: 1px solid #dbdbdb; } .water .content .list ul li .pic { width: 100%; height: 180px; background: #f1f0f7; overflow: hidden; position: relative; } .water .content .list ul li .pic img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; transition: transform .5s; } .water .content .list ul li .tits { font-size: 18px; line-height: 20px; height: 20px; color: #2c2f30; font-family: ATB; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-top: 19px; } .water .content .list ul li .tits i{ font-size: 14px; line-height: 20px; color: #999; font-family: ATB; float: right; } .water .content .list ul li .tit { width: 100%; height: auto; margin-top: 17px; } .water .content .list ul li .tit .more { display: inline-block; font-size: 14px; line-height: 18px; color: #858585; background: url(../images/download.png) left center no-repeat; padding-left: 25px; float: left; } .water .content .list ul li .tit .kb { display: inline-block; font-size: 14px; line-height: 18px; color: #858585; margin-left: 15px; background: url(../images/kb.png) left center no-repeat; padding-left: 25px; float: left; } .water .content .list ul li .tit .time { } @media (min-width: 1024px) { .water .content .list ul li:hover .pic img { transform: scale(1.1); } .water .content .list ul li:hover .tits { color: #B0A5A1; } } @media (max-width: 1100px) { .water .content { padding-top: 60px; margin: 0 auto 0; } .water .content .title { font-size: 28px; line-height: 30px; margin-top: 25px; } .water .content .list { margin: 30px auto 60px; } .water .content .list ul li { width: 28.8%; margin-right: 2.2%; margin-bottom: 30px; } } @media (max-width: 800px) { .water .content .list ul li { width: 44.2%; padding-bottom: 20px; } } @media (max-width: 620px) { .water .content .service-tabs a { width: 70px; font-size: 14px; line-height: 34px; } .water .content .service-tabs a.a1 { width: 97px; } .water .content .service-tabs a.a2 { width: 100px; } } @media (max-width: 540px){ .water .content .list ul li .tit{ height: 41px; } .water .content .list ul li .tit .more{ display: block; float: none; } .water .content .list ul li .tit .kb{ display: block; float: none; margin-left: 0; margin-top: 5px; } .water .content .title{ font-size: 20px; line-height: 20px; } } @media (max-width: 445px) { .water .content{ padding-top: 0; } .water .service-tabs-m { display: block; } .water .content { margin: 0 auto; } .water .content .service-tabs { display: none; } .water .content .title { font-size: 22px; line-height: 24px; } } @media (max-width: 360px) { .water .content .list ul { width: 100%; } .water .content .list ul li { width: 100%; margin-right: 0; } } .choose { width: 100%; height: auto; } .choose .content { margin: 100px auto 0; } .choose .content .title { width: 100%; height: auto; text-align: center; font-size: 36px; line-height: 38px; color: #2c2f30; margin-top: 50px; } .choose .content .gg { width: 100%; height: 280px; background: #2b2f2f; position: relative; margin-top: 44px; } .choose .content .gg img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .choose .content .list { width: 100%; height: auto; overflow: hidden; margin-top: 40px; margin-bottom: 43px; } .choose .content .list ul { width: 110%; height: auto; } .choose .content .list ul li { width: 100%; height: auto; float: left; margin-right: 2.3%; border-bottom: 1px solid #eaeaea; } .choose .content .list ul li .tits { cursor: pointer; font-size: 18px; line-height: 20px; padding: 40px 0 40px 25px; background: url(../images/choose_icon.png) left center no-repeat; color: #2c2f30; } @media (min-width: 1024px){ .choose .content .list ul li:hover .tits{ color: #B0A5A1; background: url(../images/choose_icon_h.png) left center no-repeat; } } .choose .content .list ul li.on .tits{ color: #B0A5A1; background: url(../images/choose_icon_h.png) left center no-repeat; } .choose .content .list ul li .tit { border-top: 1px solid #eaeaea; padding: 36px; width: calc(100% - 72px); font-size: 16px; line-height: 28px; display: none; color: #666; } .choose .content .list ul li .tit span{ width: 25px; display: block; float: left; } .choose .content .list ul li .tit i{ width: calc(100% - 25px); display: block; float: left; } @media (max-width: 1070px) { .choose .content .service-tabs a { width: 70px; font-size: 14px; line-height: 34px; } .choose .content .service-tabs a.a1 { width: 97px; } .choose .content .service-tabs a.a2 { width: 100px; } .choose .content .title { font-size: 26px; line-height: 28px; } } @media (max-width: 760px) { .choose .service-tabs-m { display: block; } .choose .service-tabs-m ul { width: 900px; } .choose .content { margin: 0 auto; } .choose .content .service-tabs { display: none; } .choose .content .title { margin-top: 30px; } .choose .content .gg { margin-top: 25px; } } @media (max-width: 700px) { .choose .content .list ul li .tits{ padding: 15px 0 15px 25px; font-size: 16px; background: url(../images/choose_icon.png) left 18px no-repeat; } .choose .content .list ul li .tit{ padding: 15px; font-size: 14px; line-height: 24px; } } @media (max-width: 540px) { .choose .content .title{ font-size: 20px; line-height: 20px; margin-top: 20px; } .choose .content .list { margin-top: 20px; margin-bottom: 10px; } .choose .content .list ul { width: 100%; } .choose .content .list ul li { width: 100%; float: none; height: auto !important; } } .maintain { width: 100%; height: auto; } .maintain .content { width: 100%; height: auto; margin-top: 100px; } .maintain .content .list { margin-top: 60px; position: relative; border-top: 1px solid #dbdbdb; border-bottom: 1px solid #dbdbdb; } .maintain .content .list .item { width: 25%; height: 100%; float: left; margin-left: -1px; border-left: 1px solid #dbdbdb; } .maintain .content .list .item .con { width: 79.2%; height: auto; margin: 38px auto 60px; } .maintain .content .list .item .con .num { text-align: center; font-size: 36px; line-height: 38px; color: #333; font-family: ATB; } .maintain .content .list .item .con .tits { font-size: 24px; line-height: 26px; color: #2c2f30; text-align: center; margin-top: 23px; } .maintain .content .list .item .con .tit { font-size: 14px; line-height: 24px; font-family: ATB; color: #666; margin-top: 32px; } .maintain .content .list .item .con .conn { font-size: 14px; height: 400px; line-height: 24px; font-family: ATB; color: #666; margin-top: 32px; } .maintain .content .box { margin: 55px auto 0; padding-bottom: 80px; } .maintain .content .box .con { width: 84.2%; height: auto; margin: 0 auto; } .maintain .content .box .con .icon { width: 39px; height: 39px; background: url(../images/maintain_icon.png) no-repeat; margin: 0 auto; } .maintain .content .box .con .tits { text-align: center; font-size: 24px; line-height: 26px; color: #333; margin-top: 17px; } .maintain .content .box .con .tit { font-size: 14px; line-height: 24px; color: #666; font-family: ATB; text-align: center; margin-top: 18px; } @media (max-width: 1024px) { .maintain .content { margin-top: 40px; } } @media (max-width: 850px) { .maintain .content .list { margin-top: 30px; } .maintain .content .list .item { width: 50%; margin-top: -1px; border-top: 1px solid #dbdbdb; } .maintain .content .list .item .con { width: 90%; margin: 25px auto 30px; } .maintain .content .list .item .con .num { font-size: 28px; line-height: 30px; } .maintain .content .list .item .con .tits { font-size: 18px; line-height: 20px; margin-top: 10px; } .maintain .content .list .item .con .tit { margin-top: 20px; } .maintain .content .list .item .con .conn { margin-top: 20px; } } @media (max-width: 720px) { .maintain .content .service-tabs a { width: 160px; font-size: 14px; } } @media (max-width: 640px) { .maintain .content .list .item { width: 100%; height: auto !important; } } @media (max-width: 500px) { .maintain .title{ display: block; font-size: 20px; line-height: 20px; color: #333; margin-top: 20px; text-align: center; } .maintain .content{ margin: 20px auto 0; } .maintain .service-tabs-m ul { width: 570px; } .maintain .service-tabs-m ul li { width: 190px; } .maintain .content .service-tabs { display: none; } } .after-sales { width: 100%; height: auto; } .after-sales .content { width: 100%; height: auto; padding-bottom: 95px; border-bottom: 1px solid #eaeaea; } .after-sales .content .after-top { width: 94.5%; margin: 70px auto 62px; position: relative; } .after-sales .content .after-top .contact { width: 33.3%; height: auto; float: left; } .after-sales .content .after-top .contact .icon { width: 16%; height: auto; float: left; margin-left: 10.5%; margin-top: 34px; } .after-sales .content .after-top .contact .con { width: 58%; height: auto; position: relative; float: left; margin-left: 39%; } .after-sales .content .after-top .contact .con:after{ width: 38px; height: 37px; position: absolute; top: 0; left: -70px; background-image: url(../images/x1_icon1.png); background-position: center center; -webkit-background-size: cover; background-size: cover; background-repeat: no-repeat; content: ''; } .after-sales .content .after-top .contact .con .tits { font-size: 18px; line-height: 18px; color: #333; } .after-sales .content .after-top .contact .con .tel { font-size: 36px; line-height: 38px; font-family: ATB; color: #333 !important; margin-top: 9px; } .after-sales .content .after-top .contact .con .tit { font-size: 14px; line-height: 16px; color: #999; margin-top: 13px; } .after-sales .content .after-top .contact .con .tit1 { font-size: 18px; line-height: 20px; color: #333; margin-top: 26px; } .after-sales .content .after-top .contact .con .tit1 span { font-family: ATB; } .after-sales .content .after-top .add { width: 33.3%; height: auto; float: left; } .after-sales .content .after-top .add .icon { width: 16%; height: auto; float: left; margin-left: 9%; margin-top: 34px; } .after-sales .content .after-top .add .con { width: 61%; margin-left: 33%; height: auto; position: relative; float: left; } .after-sales .content .after-top .add .con:after{ width: 42px; height: 38px; position: absolute; top: 0; left: -73px; background-image: url(../images/x1_icon2.png); background-position: center center; -webkit-background-size: cover; background-size: cover; background-repeat: no-repeat; content: ''; } .after-sales .content .after-top .add .con .tits { font-size: 18px; line-height: 18px; color: #333; } .after-sales .content .after-top .add .con .tit { font-size: 16px; line-height: 22px; color: #333; } .after-sales .content .after-top .add .con .tit1 { font-size: 14px; line-height: 26px; color: #333 !important; margin-top: 12px; font-family: ATB; } .after-sales .content .after-top .add .con .tit1 span { color: #666; } .after-sales .content .after-top .table-box{ width: 33.3%; height: auto; float: left;} .after-sales .content .after-top .table-box .icon{ width: 16%; margin-left: 6%; margin-top: 34px; float: left;} .after-sales .content .after-top .table-box .table-new{ width: 60%; float: left; margin-left: 30%; position: relative; } .after-sales .content .after-top .table-box .table-new:after{ width: 40px; height: 37px; position: absolute; top: 0; left: -73px; background-image: url(../images/x1_icon3.png); background-position: center center; -webkit-background-size: cover; background-size: cover; background-repeat: no-repeat; content: ''; } .after-sales .content .after-top .table-box .table-new .t{ width: 100%; height: auto; margin-bottom: 10px; } .after-sales .content .after-top .table-box .table-new .t span{ width: 75px; height: auto; font-size: 14px; line-height: 30px; color: #666; display: block; float: left; } .after-sales .content .after-top .table-box .table-new .t .text{ width: calc(100% - 78px); float: left; height: 28px; text-indent: 1rem; border: 1px solid #e1e1e1; background: none; font-size: 14px; line-height: 30px; color: #333; } .after-sales .content .after-top .table-box .table-new .t .txt{ width: calc(100% - 78px - 2rem); height: 60px; padding: 0 1rem; float: left; border: 1px solid #e1e1e1; background: none; font-size: 14px; line-height: 30px; color: #333; } .after-sales .content .after-top .table-box .table-new .submit{ width: calc(100% - 70px); margin-left: 70px; height: 34px; background: #191d1c; text-align: center; font-size: 14px; line-height: 34px; color: #fff; border: none; } .after-sales .content .after-top .line { width: 1px; height: 160px; background: #eaeaea; position: absolute; top: 0; left: 33.3%; } .after-sales .content .after-top .line1{ left: 66.6%; } .after-sales .content .content-new { width: 100%; height: auto; position: relative; } .after-sales .content .content-new .map { width: 100%; height: 680px; } .after-sales .content .content-new .tabs { width: 260px; height: auto; position: absolute; top: 50px; left: 50%; margin-left: -65px; z-index: 10; } .after-sales .content .content-new .tabs a { width: 128px; height: 46px; margin-left: -1px; border: 1px solid #dbdbdb; display: block; float: left; background: #fff; font-size: 16px; line-height: 46px; color: #333; text-align: center; } .after-sales .content .content-new .tabs a.a1 { border-top-left-radius: 23px; border-bottom-left-radius: 23px; } .after-sales .content .content-new .tabs a.a2 { border-top-right-radius: 23px; border-bottom-right-radius: 23px; } .after-sales .content .content-new .tabs a.on { background: #191d1c; color: #fff; } .after-sales .content .content-new .box { margin: -260px auto 0; position: relative; z-index: 20; } .after-sales .content .content-new .box .box-top { width: 100%; height: auto; position: relative; z-index: 100; } .after-sales .content .content-new .box .box-top .item { width: 27%; height: 58px; background: #fff; box-shadow: 0 3px 1px rgba(0, 0, 0, 0.15); float: left; margin-right: 0.6%; } .after-sales .content .content-new .box .box-top .item .icon { width: 58px; height: 100%; float: left; border-right: 1px solid #eaeaea; background-repeat: no-repeat; background-position: center center; background-size: auto; } .after-sales .content .content-new .box .box-top .item .icon.i1 { background-image: url(../images/after_icon4.png); } .after-sales .content .content-new .box .box-top .item .icon.i2 { background-image: url(../images/after_icon5.png); } .after-sales .content .content-new .box .box-top .item .icon.i3 { background-image: url(../images/after_icon6.png); } .after-sales .content .content-new .box .box-top .item .select { margin-left: 59px; height: 100%; cursor: pointer; position: relative; } .after-sales .content .content-new .box .box-top .item .select .tits { font-size: 18px; line-height: 58px; color: #999; margin-left: 14px; } .after-sales .content .content-new .box .box-top .item .select ul { width: 100%; height: auto; position: absolute; overflow-y: scroll; max-height: 240px; border-top: 1px solid #eaeaea; top: 58px; left: 0; z-index: 10; background: #fff; display: none; } .after-sales .content .content-new .box .box-top .item .select ul li { width: 100%; height: 40px; font-size: 16px; line-height: 40px; color: #999; transition: color .5s,background .5s; } .after-sales .content .content-new .box .box-top .item .select ul li span { margin-left: 14px; } @media (min-width: 1024px) { .after-sales .content .content-new .box .box-top .item .select ul li:hover { color: #fff; background: #B0A5A1; } } .after-sales .content .content-new .box .box-top .submit { width: 17%; height: 58px; float: right; background: #333; font-size: 18px; line-height: 58px; color: #fff; border: none; } .after-sales .content .content-new .box .box-new { width: 100%; height: auto; background: #fff; box-shadow: 0 3px 1px rgba(0, 0, 0, 0.15); margin-top: 30px; } .after-sales .content .content-new .box .box-new .title { width: 100%; height: 79px; border-bottom: 1px solid #eaeaea; } .after-sales .content .content-new .box .box-new .title .tits { font-size: 18px; line-height: 79px; color: #999; margin-left: 30px; } .after-sales .content .content-new .box .box-new .title .tits span { font-family: ATB; color: #333; } .after-sales .content .content-new .box .box-new .list { padding: 0 10px 55px; } .after-sales .content .content-new .box .box-new .list ul { width: 100%; height: auto; } .after-sales .content .content-new .box .box-new .list ul li { width: 30.7%; height: auto; margin: 0 1.3%; float: left; position: relative; border-bottom: 1px solid #eaeaea; padding-bottom: 12px; margin-top: 32px; cursor: pointer; } .after-sales .content .content-new .box .box-new .list ul li .tits { font-size: 14px; line-height: 16px; color: #333; } .after-sales .content .content-new .box .box-new .list ul li .tit { font-size: 12px; line-height: 20px; color: #333 !important; margin-top: 11px; height: 100px; } .after-sales .content .content-new .box .box-new .list ul li .add{ width: 32px; height: 32px; display: block; position: absolute; right: 8%; top: -8px; z-index: 10; background-repeat: no-repeat; background-image: url(../images/dd.png); } .after-sales .content .content-new .box .box-new .more { width: 100%; height: 69px; text-align: center; display: block; font-size: 12px; line-height: 69px; color: #333; border-top: 1px solid #eaeaea; } @media (max-width: 1535px){ .after-sales .content .after-top .add .con{ margin-left: 25%; width: 75%; } } @media (max-width: 1500px){ .after-sales .content .after-top .contact .con{ margin-left: 23%; width: 70%; } .after-sales .content .after-top .add .con{ margin-left: 25%; width: 75%; } .after-sales .content .after-top .table-box .table-new{ margin-left: 24%; width: 75%; } } @media (max-width: 1340px){ .after-sales .content .after-top .contact .con{ width: 82%; margin-left: 18%; } .after-sales .content .after-top .contact .con:after{ width: 30px; height: 29px; left: -45px; } .after-sales .content .after-top .add .con{ width: 82%; margin-left: 18%; } .after-sales .content .after-top .add .con:after{ width: 30px; left: -49px; height: 27px; } .after-sales .content .after-top .table-box .table-new{ width: 80%; margin-left: 20%; } .after-sales .content .after-top .table-box .table-new:after{ width: 30px; height: 27px; left: -47px; } } @media (max-width: 1180px){ .after-sales .content .after-top .add{ width: 38.3%; } .after-sales .content .after-top .table-box{ width: 28.3%; } .after-sales .content .after-top .line1{ left: 71.6%; } } @media (max-width: 1100px){ .after-sales .content .after-top .contact .con{ margin-left: 16%; width: 82%; } .after-sales .content .after-top .add .con{ margin-left: 17%; width: 82%; } .after-sales .content .after-top .table-box .table-new{ margin-left: 17%; width: 82%; } /*.after-sales .content .after-top .contact .con:after{ left: -47px; width: 34px; -webkit-background-size: 100%; background-size: 100%; } .after-sales .content .after-top .add .con:after{ -webkit-background-size: 100%; background-size: 100%; width: 39px; left: -47px; } .after-sales .content .after-top .table-box .table-new:after{ -webkit-background-size: 100%; background-size: 100%; width: 34px; left: -47px; }*/ } @media (max-width: 1100px){ .after-sales .content .after-top .add .con .tit{ font-size: 15px; line-height: 20px; } .after-sales .content .after-top .contact .con .tel{ font-size: 30px; line-height: 32px; } } @media (max-width: 1024px) { .after-sales .content .after-top .contact{ width: 600px; margin: 0 auto 30px; float: none; max-width: 100%; } .after-sales .content .after-top .contact .con{ width: calc(100% - 60px); margin-left: 60px; } /*.after-sales .content .after-top .contact .con:after{ width: 26px; }*/ .after-sales .content .after-top .add{ width: 600px; margin: 0 auto; float: none; max-width: 100%; } .after-sales .content .after-top .add .con{ width: calc(100% - 60px); margin-left: 60px; } .after-sales .content .after-top .add .con:after{ width: 30px; } .after-sales .content .after-top .table-box{ width: 600px; margin: 0 auto; float: none; max-width: 100%; margin-top: 30px; } .after-sales .content .after-top .table-box .table-new{ width: calc(100% - 60px); margin-left: 60px; } .after-sales .content .after-top .table-box .table-new:after{ width: 30px; } .after-sales .content .after-top .line{ display: none; } .after-sales .content .content-new #mapiframe{display: none;} .after-sales .content .content-new .tabs{ position: relative; top: 0; left: 0; margin: 0 auto; } .after-sales .content .content-new .map { height: 460px; } .after-sales .content .content-new .box { margin: 20px auto 0; } .after-sales .content .content-new .box .box-new .title{ border-top: 1px solid #eaeaea; } .after-sales .content .content-new .box .box-top .item { height: 48px; } .after-sales .content .content-new .box .box-top .item .icon { width: 48px; } .after-sales .content .content-new .box .box-top .item .select { margin-left: 49px; } .after-sales .content .content-new .box .box-top .item .select .tits { font-size: 16px; line-height: 48px; } .after-sales .content .content-new .box .box-top .item .select ul { top: 48px; } .after-sales .content .content-new .box .box-top .submit { height: 48px; line-height: 48px; font-size: 16px; } .after-sales .content .content-new .box .box-new .title { height: 60px; } .after-sales .content .content-new .box .box-new .title .tits { line-height: 60px; } } @media (max-width: 940px) { .after-sales .content { padding-bottom: 60px; } .after-sales .content .after-top { margin: 40px auto 30px; } .after-sales .content .after-top .contact .icon { margin-top: 0; } .after-sales .content .after-top .contact .con .tel { font-size: 26px; line-height: 28px; } .after-sales .content .after-top .table-box .icon { margin-top: 0; } .after-sales .content .after-top .add .icon { margin-top: 0; } } @media (max-width: 800px) { .after-sales .content .content-new .box .box-new .list ul li { width: 46.7%; } } @media (max-width: 640px) { .after-sales .content { padding-bottom: 40px; } .after-sales .content .after-top .contact { width: 100%; margin-bottom: 30px; } .after-sales .content .after-top .table-box{ width: 100%; max-width: 100%; margin-top: 30px; } .after-sales .content .after-top .contact .icon { width: 88px; } .after-sales .content .after-top .table-box .icon { width: 88px; } .after-sales .content .after-top .add { width: 100%; } .after-sales .content .after-top .add .icon { width: 88px; } .after-sales .content .after-top .line { display: none; } .after-sales .content .content-new .box .box-top .item { width: 48%; margin-right: 2%; margin-bottom: 10px; } .after-sales .content .content-new .box .box-top .submit { width: 48%; margin-right: 2%; } .after-sales .content .content-new .box .box-new { margin-top: 10px; } .after-sales .content .content-new .box .box-new .more { height: 49px; line-height: 49px; } } @media (max-width: 560px) { .after-sales .content .content-new .box .box-new .list ul li { width: 100%; margin: 20px 0 0 0; padding-bottom: 20px; } .after-sales .content .content-new .box .box-new .list ul li .tit { height: auto; } } @media (max-width: 480px) { .after-sales .content .after-top .contact .icon { width: 60px; margin-left: 0; } /*.after-sales .content .after-top .contact .con { width: 77%; }*/ .after-sales .content .after-top .contact .con .tits { font-size: 16px; } .after-sales .content .after-top .add .icon { width: 60px; margin-left: 0; } .after-sales .content .after-top .table-box .icon { width: 60px; margin-left: 0; } .after-sales .content .after-top .add .con { width: 77%; } .after-sales .content .after-top .table-box .table-new { width: 77%; } .after-sales .content .after-top .add .con .tits { font-size: 16px; line-height: 16px; } .after-sales .content .after-top .add .con .tit { font-size: 14px; line-height: 14px; } } @media (max-width: 430px) { .after-sales .content .after-top .contact .icon { width: 16%; } .after-sales .content .after-top .table-box .icon { width: 16%; } .after-sales .content .after-top .add .icon { width: 16%; } } @media (max-width: 400px) { .after-sales .content .content-new .tabs { width: 200px; } .after-sales .content .content-new .tabs a { width: 98px; height: 34px; line-height: 34px; } .after-sales .content .content-new .box .box-top .item { width: 100%; margin-right: 0; } .after-sales .content .content-new .box .box-top .submit { width: 100%; margin-right: 0; } .after-sales .content .content-new .box .box-new { margin-top: 10px; border-top: 1px solid #eaeaea; } .after-sales .content .content-new .box .box-new .title { height: 40px; } .after-sales .content .content-new .box .box-new .title .tits { line-height: 40px; font-size: 15px; } } .table { width: 100%; height: 100%; display: table; } .table .table-cell { width: 100%; height: 100%; display: table-cell; vertical-align: middle; } .technology { width: 100%; height: auto; } .technology .tabs { width: 100%; height: auto; top: 98px; height: 57px; border-top: 1px solid #eaeaea; position: fixed; left: 0; background: #fff; z-index: 100; } .technology .tabs #menu { float: left; margin-left: 33px; margin-top: 11px; } .technology .tabs #menu li { padding: 0 25px; height: 34px; border-radius: 17px; float: left; margin-right: 10px; transition: background .5s; } .technology .tabs #menu li a { width: 100%; height: auto; display: block; font-size: 14px; line-height: 34px; color: #333; transition: color .5s; } .technology .tabs #menu li.active { background: #B0A5A1; } .technology .tabs #menu li.active a { color: #fff; } @media (min-width: 1024px) { .technology .tabs #menu li:hover { background: #B0A5A1; } .technology .tabs #menu li:hover a { color: #fff; } } .technology .tabs .nav { float: right; } .technology .tabs .nav a { background: #B0A5A1; color: #fff; font-size: 14px; line-height: 57px; padding: 0 42px; display: inline-block; float: left; } .technology .tabs .nav a.on { background: #333; } .technology .tabs.t { top: 0; } .technology .box1 { width: 100%; height: auto; overflow: hidden; background-repeat: no-repeat; background-position: center center; /*background-color: #04050b;*/ background-size: cover; position: relative; } .technology .box1 .box-new { width: 100%; height: auto; padding-top: 10%; margin: 0 auto; } .technology .box1 .box-new .tits { text-align: center; font-size: 48px; color: #fff; line-height: 48px; transform: translateY(-50px); opacity: 0; filter: alpha(opacity=0); transition: transform .5s,opacity .5s; } .technology .box1 .box-new .tits span{ padding-left: 96px; background-position: left center; background-repeat: no-repeat; } .technology .box1 .box-new .tit { width: 630px; height: auto; margin: 1.5% auto 0; max-width: 92%; font-size: 16px; line-height: 30px; text-align: center; color: #fff; transform: translateY(-50px); opacity: 0; filter: alpha(opacity=0); transition: transform .5s,opacity .5s; } .technology .box1 .box-new .con{ width: 1230px; margin: 0 auto; } .technology .box1 .box-new .con .img{ width: 69.1%; height: auto; float: left; transform: translateY(50px); opacity: 0; filter: alpha(opacity=0); transition: transform .5s,opacity .5s; } .technology .box1 .box-new .con .con-new{ float: left; margin-top: 10%; margin-left: -6%; position: relative; } .technology .box1 .box-new .con .con-new .yuan-box{ width: 186px; height: 186px; position: relative; transform: translateY(50px); opacity: 0; transition: transform .5s,opacity .5s; transition-delay: 0.6s; } .technology .box1 .box-new .con .con-new .yuan{ width: 100%; height: 100%; background-image: url(../images/yuan.png); background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; /*animation: yuan 3s linear infinite;*/ } .technology .box1 .box-new .con .con-new .yuan1{ width: 152px; height: 152px; background-image: url(../images/yuan1.png); background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .technology .box1 .box-new .con .con-new .yuan2{ width: 130px; height: 130px; background-image: url(../images/yuan2.png); background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; /*animation: yuan1 3s linear infinite;*/ } .technology .box1 .box-new .con .con-new .yuan3{ width: 104px; height: 104px; background-image: url(../images/yuan3.png); background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .technology .box1 .box-new .con .con-new .t{ width: 100%; height: 100%; text-align: center; font-size: 18px; line-height: 186px; color: #fff; position: absolute; top: 0; left: 0; } .technology .box1 .box-new .con .con-new .list{ width: 230px; left: 143px; top: 70px; position: absolute; } .technology .box1 .box-new .con .con-new .list li{ width: 100%; transform: translateY(50px); opacity: 0; filter: alpha(opacity=0); transition: transform .5s,opacity .5s; } .technology .box1 .box-new .con .con-new .list li.l1{ transition-delay: 0.8s; } .technology .box1 .box-new .con .con-new .list li.l2{ transition-delay: 1.0s; } .technology .box1 .box-new .con .con-new .list li.l3{ transition-delay: 1.2s; } .technology .box1 .box-new .con .con-new .list li.l4{ transition-delay: 1.4s; } .technology .box1 .box-new .con .con-new .list li .line{ width: 76px; height: 24px; float: left; background-position: right center; background-repeat: no-repeat; } .technology .box1 .box-new .con .con-new .list li .line.line1{ background-image: url(../images/cc_line1.png); } .technology .box1 .box-new .con .con-new .list li .line.line2{ background-image: url(../images/cc_line2.png); } .technology .box1 .box-new .con .con-new .list li .line.line3{ background-image: url(../images/cc_line3.png); } .technology .box1 .box-new .con .con-new .list li .line.line4{ background-image: url(../images/cc_line4.png); } .technology .box1 .box-new .con .con-new .list li .ttt{ font-size: 14px; line-height: 24px; color: #fff; float: right; width: 150px; } .technology .box1 .box-new .con .con-new .li{ width: 200px; height: 1px; background-color: #30acd5; transform: rotate(-20deg); position: absolute; top: 200px; left: -192px; opacity: 0; -webkit-transition: top .5s,opacity .5s; -o-transition: top .5s,opacity .5s; transition: top .5s,opacity .5s; transition-delay: 0.3s; } .pic-box{ width: 224px; height: auto; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); z-index: 1000; right: 1%; } .pic-box .yuan-box{ width: 224px; height: 224px; position: relative; } .pic-box .yuan-box .yuan{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-repeat: no-repeat; background-position: center; -webkit-background-size:cover; background-size:cover; background-image: url(../images/cc_yuan1.png); animation: yuan 3s linear infinite; } .pic-box .yuan-box .yuan1{ width: 87.5%; height: 87.5%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background-repeat: no-repeat; background-position: center; -webkit-background-size:cover; background-size:cover; background-image: url(../images/cc_yuan2.png); animation: yuan1 3s linear infinite; } .pic-box .yuan-box .yuan2{ width: 75%; height: 75%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background-repeat: no-repeat; background-position: center; -webkit-background-size:cover; background-size:cover; background-image: url(../images/cc_yuan3.png); animation: yuan 3s linear infinite; } .pic-box .yuan-box .pic{ width: 70.5%; height: 70.5%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background-repeat: no-repeat; background-position: center; -webkit-background-size:cover; background-size:cover; } .pic-box .t{ text-align: center; font-size: 14px; line-height: 24px; color: #fff; margin-top: 15px; } @media (max-width: 1570px){ .pic-box{ width: 180px; } .pic-box .yuan-box{ width: 180px; height: 180px; } } @media (max-width: 1470px){ .technology .box1 .box-new .con{ width: 76%; } } @keyframes yuan{ from {transform: rotate(0deg);} to {transform: rotate(360deg);} } @-moz-keyframes yuan{ from {transform: rotate(0deg);} to {transform: rotate(360deg);} } @-webkit-keyframes yuan{ from {transform: rotate(0deg);} to {transform: rotate(360deg);} } @-o-keyframes yuan{ from {transform: rotate(0deg);} to {transform: rotate(360deg);} } @keyframes yuan1{ from {transform: rotate(0deg);} to {transform: rotate(-360deg);} } @-moz-keyframes yuan1{ from {transform: rotate(0deg);} to {transform: rotate(-360deg);} } @-webkit-keyframes yuan1{ from {transform: rotate(0deg);} to {transform: rotate(-360deg);} } @-o-keyframes yuan1{ from {transform: rotate(0deg);} to {transform: rotate(-360deg);} } .technology .box1.on .box-new .tits { transform: translateY(0); opacity: 1; filter: alpha(opacity=1); } .technology .box1.on .box-new .tit { transform: translateY(0); opacity: 1; filter: alpha(opacity=1); } .technology .box1.on .box-new .pic { transform: translateY(0); opacity: 1; filter: alpha(opacity=1); } .technology .box1.on .box-new .con .img { transform: translateY(0); opacity: 1; filter: alpha(opacity=1); } .technology .box1.on .box-new .con .con-new .li{ top: 146px; opacity: 1; filter: alpha(opacity=1); } .technology .box1.on .box-new .con .con-new .yuan-box{ transform: translateY(0); opacity: 1; filter: alpha(opacity=1); } .technology .box1.on .box-new .con .con-new .list li{ transform: translateY(0); opacity: 1; filter: alpha(opacity=1); } .technology .box2 { width: 100%; height: 100%; position: relative; background-size: cover !important; } .technology .box2 .vidbacking-active-block-back { background-size: cover !important; } .technology .box2 .con { width: 100%; height: 100%; position: absolute; top: 0; background-image: url(../images/cc_bg.png); background-position: center; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; background-color: rgba(0,0,0,0.4); left: 0; z-index: 10; } .technology .box2 .con .top { width: 100%; height: auto; position: absolute; top: 17%; left: 0; color: #fff; text-align: center; transform: translateY(-50px); opacity: 0; filter: alpha(opacity=0); transition: transform .5s,opacity .5s; } .technology .box2 .con .top .en { font-size: 72px; line-height: 74px; font-family: ATB; } .technology .box2 .con .top .cn { font-size: 48px; line-height: 50px; text-align: center; margin-top: 1%; } .technology .box2 .con .top .cn span{ padding-left: 100px; background-position: left center; background-repeat: no-repeat; } .technology .box2 .con .top .txt { width: 880px; height: auto; margin: 1.5% auto 0; font-size: 16px; line-height: 30px; } .technology .box2 .button { width: 60px; height: 60px; position: absolute; bottom: 40%; left: 50%; margin-left: -30px; z-index: 30; } .technology .box2 .button .play1 { background: url(../images/play.png) no-repeat; width: 100%; height: 100%; cursor: pointer; display: none; background-size: cover !important; } .technology .box2 .button .pause1 { background: url(../images/pause.png) no-repeat; width: 100%; height: 100%; cursor: pointer; background-size: cover !important; } .technology .box2 .con .bottom { width: 100%; height: auto; position: absolute; bottom: 14%; left: 0; font-size: 0; text-align: center; color: #fff; transform: translateY(50px); opacity: 0; filter: alpha(opacity=0); transition: transform .5s,opacity .5s; } .technology .box2 .con .bottom span { font-size: 24px; line-height: 52px; height: 52px; display: inline-block; padding-left: 73px; background-position: left center; background-repeat: no-repeat; margin: 0 4%; } .technology .box2 .con .bottom span.s1{background-image: url(../images/cc_icon1.png);} .technology .box2 .con .bottom span.s2{background-image: url(../images/cc_icon2.png);} .technology .box2 .con .bottom span.s3{background-image: url(../images/cc_icon3.png);} .technology .box2.on .con .top { transform: translateY(0px); opacity: 1; filter: alpha(opacity=1); } .technology .box2.on .con .bottom { transform: translateY(0px); opacity: 1; filter: alpha(opacity=1); } .technology .box3 { width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; /*background: url(../images/x_bg1.jpg) center no-repeat;*/ background-size: cover !important; } .technology .box3 .con{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .technology .box3 .con .title{ text-align: center; font-size: 48px; line-height: 57px; color: #fff; width: 100%; height: auto; position: absolute; top: 17%; left: 0; transform: translateY(40px); opacity: 0; filter: alpha(opacity=0); transition: all .5s; } .technology .box3 .con .title span{ padding-left: 96px; background-repeat: no-repeat; background-position: left center; line-height: 57px; display: inline-block; } .technology .box3 .con .bottom{ width: 100%; height: auto; position: absolute; bottom: 10%; left: 0; transform: translateY(40px); opacity: 0; filter: alpha(opacity=0); transition: all .5s; } .technology .box3 .con .bottom .bottom-new{ width: 1250px; height: auto; margin: 0 auto; } .technology .box3 .con .bottom .bottom-new .item{ width: 50%; float: left; } .technology .box3 .con .bottom .bottom-new .item img{ float: left; } .technology .box3 .con .bottom .bottom-new .item .img1{ width: 23.68%; margin-left: 16%; } .technology .box3 .con .bottom .bottom-new .item .img2{ width: 22.72%; margin-left: 16%; } .technology .box3 .con .bottom .bottom-new .item .conn{ width: 56%; float: left; } .technology .box3 .con .bottom .bottom-new .item .conn .tits{ font-size: 24px; line-height: 24px; color: #fff; } .technology .box3 .con .bottom .bottom-new .item .conn .tit{ font-size: 14px; line-height: 24px; color: #fff; margin-top: 18px; } .technology .box3 .button { width: 60px; height: 60px; position: absolute; bottom: 47%; left: 50%; margin-left: -30px; transform: translateY(40px); opacity: 0; filter: alpha(opacity=0); transition: all .5s; z-index: 30; } .technology .box3 .button .play2 { background: url(../images/play.png) no-repeat; width: 100%; height: 100%; cursor: pointer; display: none; background-size: cover !important; } .technology .box3 .button .pause2 { background: url(../images/pause.png) no-repeat; width: 100%; height: 100%; cursor: pointer; background-size: cover !important; } .technology .box3.on .con .bottom { transform: translateY(0); opacity: 1; filter: alpha(opacity=1); } .technology .box3.on .con .title { transform: translateY(0); opacity: 1; filter: alpha(opacity=1); } .technology .box3.on .button { transform: translateY(0); opacity: 1; filter: alpha(opacity=1); } .technology .box4 { width: 100%; height: 100%; background-color: #181715; background-repeat: no-repeat; background-position: top center; background-size: 100%; } .technology .box4 .con{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .technology .box4 .con .pic{ width: 65%; height: auto; margin: 15% auto 0; position: relative; } .technology .box4 .con .pic .img{ width: 100%; margin-left: -7%; } .technology .box4 .con .pic ul{ width: 100%; height: 100%; position: absolute; top: 0; } .technology .box4 .con .pic ul li{ position: absolute; width: 13px; height: 13px; transform: translateY(-40px); opacity: 0; filter: alpha(opacity=0); transition: all .5s; } .technology .box4 .con .pic ul li .icon{ width: 13px; height: 13px; position: relative; z-index: 10; } .technology .box4 .con .pic ul li .icon span{ width: 13px; height: 13px; border-radius: 13px; background-color: #c60005; display: block; position: relative; z-index: 12; } .technology .box4 .con .pic ul li .icon:after{ width: 21px; height: 21px; position: absolute; top: -4px; left: -4px; background-color: rgba(255,255,255,0.5); content: ''; border-radius: 21px; z-index: 11; } .technology .box4 .con .pic ul li .icon:before{ width: 21px; height: 21px; position: absolute; top: -4px; left: -4px; background-color: rgba(255,255,255,0.5); content: ''; border-radius: 100%; z-index: 11; animation: myfirst 1s linear infinite; } .technology .box4 .con .pic ul li.l1{ top: 55%; left: 12.5%; } .technology .box4 .con .pic ul li.l2{ top: 29%; left: 25%; transition-delay: 0.2s; z-index: 1000; } .technology .box4 .con .pic ul li.l3{ top: 61%; left: 48%; transition-delay: 0.4s; } .technology .box4 .con .pic ul li.l4{ top: 29%; left: 72%; transition-delay: 0.6s; } .technology .box4 .con .pic ul li.l5{ top: 40%; left: 80%; transition-delay: 0.8s; } .technology .box4 .con .pic ul li.l6{ top: 48%; left: 91%; transition-delay: 1s; } .technology .box4 .con .pic ul li .line{ width: 150px; height: 1px; background-color: #B0A5A1; transform: rotate(70deg); position: absolute; bottom: 78px; right: -43px; opacity: 0; transition: all .5s; } .technology .box4 .con .pic ul li .line.line1{ transform: rotate(-75deg); left: -48px; right: auto; } .technology .box4 .con .pic ul li .conn{ width: 310px; position: absolute; text-align: right; border-radius: 10px; background-color: rgba(0,105,153,0.4); padding: 25px; border: 1px solid #006999; opacity: 0; transition: all .5s; transform: translateY(20px); z-index: 8; } .technology .box4 .con .pic ul li .conn .icon1{ width: 100%; height: 66px; } .technology .box4 .con .pic ul li .conn .icon1 img{ float: right; } .technology .box4 .con .pic ul li .conn .tits{ width: 100%; font-size: 24px; line-height: 36px; color: #fff; } .technology .box4 .con .pic ul li .conn .tit{ font-size: 14px; line-height: 24px; color: #fff; width: 100%; /* opacity: 0.6;*/ margin-top: 10px; } .technology .box4 .con .pic ul li .conn.c1{ left: -407px; top: -200px; } .technology .box4 .con .pic ul li .conn.c2{ left: 46px; top: -200px; text-align: left; } .technology .box4 .con .pic ul li .conn.c2 .icon1 img{ float: left; } .technology .box4 .con .pic ul li.on .line{ opacity: 1; } .technology .box4 .con .pic ul li.on .conn{ opacity: 1; transform: translateY(0); } /* .technology .box4 .box-new { height: 100%; margin: 0 auto; position: relative; } .technology .box4 .box-new .list { width: 100%; height: auto; position: absolute; bottom: 70px; left: 0; overflow: hidden; } .technology .box4 .box-new .list ul { width: 100%; height: auto; } .technology .box4 .box-new .list ul li { width: 33.3333333333%; height: 124px; border-top: 1px solid rgba(255, 255, 255, 0.15); border-left: 1px solid rgba(255, 255, 255, 0.15); margin-top: -1px; margin-left: -1px; float: left; transform: translateY(50px); opacity: 0; filter: alpha(opacity=0); transition: transform .5s,opacity .5s; } .technology .box4 .box-new .list ul li .item { width: 80.8%; height: auto; margin: 0 auto; color: #fff; } .technology .box4 .box-new .list ul li .item .tits { font-size: 24px; line-height: 26px; margin-top: 19px; } .technology .box4 .box-new .list ul li .item .tit { font-size: 14px; line-height: 24px; margin-top: 13px; }*/ .technology .box4.on .con .pic ul li { transform: translateY(0); opacity: 1; filter: alpha(opacity=1); } .technology .box5 { width: 100%; height: 100%; background-size: cover !important; } .technology .box5 .box-new { width: 835px; height: 100%; margin: 0 auto; max-width: 92%; } .technology .box5 .box-new .con { width: 100%; height: auto; } .technology .box5 .box-new .con .tits { font-size: 46px; line-height: 46px; text-align: center; color: #fff; transform: translateY(-50px); opacity: 0; filter: alpha(opacity=0); transition: transform .5s,opacity .5s; } .technology .box5 .box-new .con .tits span{ padding-left: 230px; background-position: left bottom; background-repeat: no-repeat; padding-top: 10px; } .technology .box5 .box-new .con .tit { font-size: 16px; line-height: 20px; color: #fff; text-align: center; margin-top: 3%; transform: translateY(-50px); opacity: 0; filter: alpha(opacity=0); transition: transform .5s,opacity .5s; } .technology .box5 .box-new .con .list { width: 100%; height: 340px; position: relative; z-index: 10; margin-top: 15%; } .technology .box5 .box-new .con .list ul { width: 100%; position: relative; z-index: 10; height: 100%; } .technology .box5 .box-new .con .list ul li { width: 100px; height: 100px; border: 5px solid #B0A5A1; box-shadow: 0 0 18px rgba(76, 200, 255, 0.67); border-radius: 100%; text-align: center; line-height: 100px; font-size: 16px; color: #fff; transition: all .5s; cursor: pointer; position: absolute; } .technology .box5 .box-new .con .list ul li.on{ background-color: rgba(27,165,227,0.57); } .technology .box5 .box-new .con .list ul li.i1 { left: 0; bottom: 0; transform: translate(-50px, 0); opacity: 0; filter: alpha(opacity=0); } .technology .box5 .box-new .con .list ul li.i2 { left: 16.5%; bottom: 45%; transform: translate(-50px, -50px); opacity: 0; filter: alpha(opacity=0); } .technology .box5 .box-new .con .list ul li.i3 { left: 50%; margin-left: -55px; top: 0; transform: translate(0, -50px); opacity: 0; filter: alpha(opacity=0); } .technology .box5 .box-new .con .list ul li.i4 { right: 16.5%; bottom: 45%; transform: translate(50px, 50px); opacity: 0; filter: alpha(opacity=0); } .technology .box5 .box-new .con .list ul li.i5 { right: 0; bottom: 0; transform: translate(50px, 0); opacity: 0; filter: alpha(opacity=0); } .technology .box5 .box-new .con .list .txt { width: 100%; text-align: center; position: absolute; bottom: 15%; transform: translateY(50px); opacity: 0; z-index: 6; filter: alpha(opacity=0); transition: transform .5s,opacity .5s; } .technology .box5 .box-new .con .list .txt .t { font-size: 36px; line-height: 36px; color: #fff; } .technology .box5 .box-new .con .list .txt .t1 { width: 345px; font-size: 16px; line-height: 26px; color: #fff; margin: 17px auto 0; } .technology .box5.on .box-new .con .tits { transform: translate(0); opacity: 1; filter: alpha(opacity=1); } .technology .box5.on .box-new .con .tit { transform: translate(0); opacity: 1; filter: alpha(opacity=1); } .technology .box5.on .box-new .con .list ul li { transform: translate(0) !important; opacity: 1 !important; filter: alpha(opacity=1) !important; } .technology .box5.on .box-new .con .list .txt { transform: translate(0); opacity: 1; filter: alpha(opacity=1); } .technology .box6 { width: 100%; height: 100%; background-size: cover !important; position: relative; } .technology .box6 .box-new { width: 1520px; height: 100%; max-width: 94%; margin: 0 auto; } .technology .box6 .box-new .box-left { width: 38.8%; height: auto; float: left; position: relative; z-index: 20; transform: translateX(-50px); opacity: 0; filter: alpha(opacity=0); transition: transform 1s,opacity 1s; } .technology .box6 .box-new .box-left .en { font-size: 72px; line-height: 74px; font-family: ATB; } .technology .box6 .box-new .box-left .cn { font-size: 48px; color: #000; line-height: 60px; margin-top: 18px; } .technology .box6 .box-new .box-left .cn span{ padding-left: 205px; background-repeat: no-repeat; display: block; background-position: left center; } .technology .box6 .box-new .box-left .tit { font-size: 14px; color: #646464; line-height: 24px; margin-top: 20px; } .technology .box6 .box-new .box-left .list { width: 100%; height: auto; margin-top: 60px; } .technology .box6 .box-new .box-left .list ul { width: 100%; height: auto; } .technology .box6 .box-new .box-left .list ul li { width: 45%; height: 65px; } .technology .box6 .box-new .box-left .list ul li .icon { width: 51px; height: 100%; float: left; } .technology .box6 .box-new .box-left .list ul li .con { width: calc(100% - 65px); float: right; height: 100%; display: table; font-size: 14px; color: #646464; line-height: 24px; } .technology .box6 .box-new .box-left .list ul li .con .t { width: 100%; height: 100%; display: table-cell; vertical-align: middle; color: #646464; } .technology .box6 .box-new .pic { width: 56.1%; float: right; transition: right 1s; transform: translateX(50px); opacity: 0; filter: alpha(opacity=0); transition: transform 1s,opacity 1s; } .technology .box6.on .box-new .box-left { transform: translateX(0); opacity: 1; filter: alpha(opacity=1); } .technology .box6.on .box-new .pic { transform: translateX(0); opacity: 1; filter: alpha(opacity=1); } @media (max-width: 1570px){ .technology .box4 .con .pic ul li .conn{ width: 200px; } .technology .box4 .con .pic ul li .conn.c1{ left: -250px; } } @media (max-width: 1400px) { .technology .box5 .box-new .con .list{ margin-top: 8%; } .technology .box5 .box-new .con{ padding-top: 58px; } .technology .tabs #menu li { padding: 0 10px; } .technology .tabs .nav a { padding: 0 18px; } .technology .box1 .box-new { padding-top: 10%; } .technology .box1 .box-new .tits { font-size: 32px; line-height: 32px; } .technology .box1 .box-new .pic { width: 370px; } .technology .box3 .con .title{ font-size: 36px; } .technology .box2 .con .top .en { font-size: 50px; line-height: 52px; } .technology .box2 .con .top .cn { font-size: 32px; line-height: 34px; } .technology .box2 .con .bottom span { font-size: 22px; line-height: 22px; } } @media (max-width: 1280px) { .technology .box6 .box-new .box-left .en { font-size: 50px; line-height: 52px; } .technology .box6 .box-new .box-left .cn { font-size: 36px; } .technology .box5 .box-right .box-new .con .tits { font-size: 50px; line-height: 52px; } .technology .box5 .box-right .box-new .con .tit { font-size: 36px; line-height: 38px; } .technology .box5 .box-right .box-new .con1 { margin-top: 25px; } .technology .box5 .box-right .box-new .con1 .list { margin-top: 20px; } .technology .box3 .box-new .con .con-new { margin-top: 40px; } .technology .box1 .con .con-new .en { font-size: 50px; line-height: 52px; } .technology .box1 .con .con-new .cn { font-size: 32px; line-height: 34px; margin-top: 10px; } .technology .box1 .con .con-new .tits { margin-top: 20px; } .technology .box1 .con .con-new .pic { width: 80%; } } @media (max-width: 1024px) { .technology { display: none; } } .technology-m { width: 100%; height: auto; display: none; } .technology-m .box1 { width: 100%; height: auto; background-image: url(../images/tech_bg1.jpg); background-size: cover !important; position: relative; } .technology-m .box1 .box-new { width: 100%; height: auto; padding-top: 22%; } .technology-m .box1 .box-new .lo{ width: 167px; height: auto; margin: 0 auto; transform: translateY(-50px); opacity: 0; filter: alpha(opacity=0); transition: transform .5s,opacity .5s; } .technology-m .box1 .box-new .tits { text-align: center; font-size: 48px; color: #fff; margin-top: 17px; transform: translateY(-50px); opacity: 0; filter: alpha(opacity=0); transition: transform .5s,opacity .5s; line-height: 48px; } .technology-m .box1 .box-new .tit { width: 93.3%; height: auto; margin: 5% auto 0; font-size: 24px; line-height: 44px; text-align: center; transform: translateY(-50px); opacity: 0; filter: alpha(opacity=0); transition: transform .5s,opacity .5s; color: #fff; } .technology-m .box1 .box-new .img{ width: 100%; margin: 15% auto 0; transform: translateY(-50px); opacity: 0; filter: alpha(opacity=0); transition: transform .5s,opacity .5s; } .technology-m .box1 .box-new .img1{ width: 74.6%; height: auto; margin-left: 16.9%; margin-top: -28%; position: relative; z-index: 5; transform: translateY(-50px); opacity: 0; filter: alpha(opacity=0); transition: transform .5s,opacity .5s; } .technology-m .box1.on .box-new .lo,.technology-m .box1.on .box-new .tits,.technology-m .box1.on .box-new .tit,.technology-m .box1.on .box-new .img,.technology-m .box1.on .box-new .img1{ transform: translateY(0px); opacity: 1; filter: alpha(opacity=1); } .technology-m .box2 { width: 100%; height: auto; background-image: url(../images/technology_bg2.jpg); -webkit-background-size: cover; background-size: cover; background-position: center center; position: relative; } .technology-m .box2 .vidbacking-active-block-back{ z-index: 10; } .technology-m .box2 .con { width: 100%; height: 100%; position: absolute; background-image: url(../images/tech_bg2.png); background-position: bottom center; background-repeat: no-repeat; background-size: 100% auto; background-color: rgba(0,0,0,0.4); z-index: 15; } .technology-m .box2 .con .con-new { width: 92%; height: auto; text-align: center; color: #fff; padding-top: 22%; margin: 0 auto; } .technology-m .box2 .con .con-new .lo{ width: 168px; height: auto; margin: 0 auto; } .technology-m .box2 .con .con-new .cn { font-size: 48px; margin-top: 17px; line-height: 48px; } .technology-m .box2 .con .con-new .txt { font-size: 24px; line-height: 44px; margin-top: 5%; } .technology-m .box2 .con .con-new .click-box { width: 12%; height: auto; margin: 10% auto 0; } .technology-m .box2 .con .con-new .click-box .play { width: 100%; height: auto; display: none; } .technology-m .box2 .con .con-new .click-box .pause { width: 100%; height: auto; } .technology-m .box2 .con .con-new .tit{ width: 100%; height: auto; position: relative; margin-top: 27%; } .technology-m .box2 .con .con-new .tit .t{ font-size: 30px; line-height: 30px; position: absolute; top: 0; } .technology-m .box2 .con .con-new .tit .t.y1{ left: 0; } .technology-m .box2 .con .con-new .tit .t.y2{ width: 100%; left: 0; } .technology-m .box2 .con .con-new .tit .t.y3{ right: 0; } .technology-m .box2 .con .con-new .tit .t p{ margin-top: 30px; } .technology-m .box2.on .con .con-new .js{ transform: translateY(0px); opacity: 1; filter: alpha(opacity=1); } .js{ transform: translateY(40px); opacity: 0; filter: alpha(opacity=0); transition: all .5s; } .technology-m .box3 { width: 100%; height: auto; background-size: cover !important; } .technology-m .box3 .vv{ width: 100%; height: 55%; } .technology-m .box3 .vv .con{ width: 100%; height: auto; padding-top: 17%; } .technology-m .box3 .vv .con .lo{ width: 118px; height: auto; margin: 0 auto; } .technology-m .box3 .vv .con .tits{ font-size: 48px; line-height: 48px; text-align: center; color: #fff; margin-top: 27px; } .technology-m .box3 .vv .con .click-box { width: 9%; height: auto; margin: 25% auto 0; } .technology-m .box3 .vv .con .click-box .play3 { width: 100%; height: auto; display: none; } .technology-m .box3 .vv .con .click-box .pause3 { width: 100%; height: auto; } .technology-m .box3 .box-new { width: 100%; height: 45%; background-color: #201e1d; margin: 0 auto; } .technology-m .box3 .box-new .con { width: 92%; margin: 0 auto; height: auto; color: #fff; } .technology-m .box3 .box-new .con .con-new { width: 100%; height: auto; padding-top: 6%; } .technology-m .box3 .box-new .con .con-new .item { width: 100%; height: auto; margin-bottom: 5%; } .technology-m .box3 .box-new .con .con-new .item .img{ width: 22.3%; height: auto; float: left; } .technology-m .box3 .box-new .con .con-new .item .cc{ width: 77.7%; float: left; } .technology-m .box3 .box-new .con .con-new .item .tits { font-size: 30px; line-height: 32px; } .technology-m .box3 .box-new .con .con-new .item .tit { font-size: 24px; line-height: 40px; margin-top: 3%; } .technology-m .box3.on .js-m{ transform: translateY(0px); opacity: 1; filter: alpha(opacity=1); } .technology-m .box4 { width: 100%; height: auto; background-color: #181715; background-repeat: no-repeat; background-position: top center; background-size: 100%; } .technology-m .box4 .box-new { width: 92%; height: auto; margin: 0 auto; padding-top: 13%; } .technology-m .box4 .box-new .lo{ width: 163px; height: auto; margin: 0 auto; } .technology-m .box4 .box-new .tits{ font-size: 48px; line-height: 48px; color: #fff; text-align: center; margin-top: 13px; } .technology-m .box4 .box-new .list { width: 85%; height: auto; margin: 80% auto 0; } .technology-m .box4 .box-new .list .item { width: 100%; margin-bottom: 5%; height: auto; } .technology-m .box4 .box-new .list .item .icon{ width: 100%; height: 66px; text-align: center; } .technology-m .box4 .box-new .list .item .tits { margin-top: 10px; width: 100%; text-align: center; } .technology-m .box4 .box-new .list .item .tits .tits-new{ display: inline-block; background-position: left center; background-repeat: no-repeat; -webkit-background-size: 20%; background-size: 20%; padding-left: 40px;} .technology-m .box4 .box-new .list .item .tits .tits-new.ii{ -webkit-background-size: 16%; background-size: 16%; } .technology-m .box4 .box-new .list .item .tits .tits-new.ii1{ -webkit-background-size: 24%; background-size: 24%; } .technology-m .box4 .box-new .list .item .tits .tits-new .cn{ font-size: 20px; line-height: 20px; text-align: left; color: #B0A5A1;} .technology-m .box4 .box-new .list .item .tits .tits-new .en{ text-align: left; font-size: 12px; line-height: 12px; margin-top: 5px; color: #B0A5A1; font-family: ATB;} .technology-m .box4 .box-new .list .item .tit { font-size: 24px; line-height: 40px; min-height: 80px; color: #fff; text-align: center; margin-top: 4%; } .technology-m .box4 .box-new .list .btns{ width: 100%; height: auto; font-size: 0; text-align: center; margin-top: 6% } .technology-m .box4 .box-new .list .btns span{ width: 20px; height: 20px; border-radius: 100%; display: inline-block; margin: 0 10px; background-color: #8a8a88; opacity: 1; } .technology-m .box4 .box-new .list .btns span.swiper-pagination-bullet-active{ background-color: #B0A5A1; } .technology-m .box4.on .js-m{ transform: translateY(0px); opacity: 1; filter: alpha(opacity=1); } .technology-m .box5 { width: 100%; height: auto; background-size: cover !important; padding-top: 10%; padding-bottom: 15%; } .technology-m .box5 .pic { width: 98%; margin: 10% auto 0; } .technology-m .box5 .pic img { width: 100%; } .technology-m .box5 .con { width: 92%; height: auto; margin: 10% auto 0; } .technology-m .box5 .con .lo{ width: 179px; height: auto; margin: 0 auto; } .technology-m .box5 .con .cn { font-size: 48px; line-height: 50px; color: #000; text-align: center; margin-top: 3%; } .technology-m .box5 .con .txt { font-size: 24px; line-height: 40px; color: #646464; margin-top: 6%; } .technology-m .box5 .con .list { width: 100%; height: auto; margin-top: 9%; } .technology-m .box5 .con .list ul { width: 100%; height: auto; } .technology-m .box5 .con .list ul li { width: 45%; margin-bottom: 4%; height: 65px; } .technology-m .box5 .con .list ul li .icon { width: 51px; height: 100%; float: left; } .technology-m .box5 .con .list ul li .conn { width: calc(100% - 65px); float: right; height: 100%; display: table; font-size: 20px; color: #646464; line-height: 34px; } .technology-m .box5 .con .list ul li .conn .t { width: 100%; height: 100%; display: table-cell; vertical-align: middle; color: #646464; } .technology-m .box5.on .js-m{ transform: translateY(0px); opacity: 1; filter: alpha(opacity=1); } .technology-m .box6{ width: 100%; height: auto; -webkit-background-size: cover; background-size: cover; background-position: center; background-repeat: no-repeat;} .technology-m .box6 .box-new{ width: 100%; padding-top: 16%; height: auto;} .technology-m .box6 .box-new .lo{ width: 210px; margin: 0 auto; height: auto;} .technology-m .box6 .box-new .tits{ text-align: center; font-size: 48px; line-height: 48px; margin-top: 27px; color: #fff;} .technology-m .box6 .box-new .tit{ width: 92%; margin: 20px auto 0; font-size: 22px; line-height: 40px; color: #fff;} .technology-m .box6 .box-new .list{ width: 82.7%; margin: 24% auto 0; overflow: hidden; padding-top: 30px; padding-bottom: 30px; height: auto;} .technology-m .box6 .box-new .list ul{ width: 1000%; height: auto; position: relative;} .technology-m .box6 .box-new .list ul li{ width: 17.7%; height: 110px; border: 4px solid #B0A5A1; text-align: center; font-size: 30px; line-height: 30px; color: #fff; float: left; border-radius: 100%; box-sizing: border-box; margin: 0 5.1%;} .technology-m .box6 .box-new .list ul li.on{ width: 33.5%; background-color: rgba(27,165,227,0.57); box-shadow: 0 0 30px rgba(76,200,255,1); height: 208px;} .technology-m .box6 .box-new .con{ width: 79.3%; height: auto; margin: 5% auto 0;} .technology-m .box6 .box-new .con .line{ width: 23%; height: 1px; margin: 0 auto; background-color: #fff;} .technology-m .box6 .box-new .con .txt{ text-align: center; font-size: 30px; line-height: 40px; margin-top: 6%; color: #fff;} .technology-m .box6.on .js-m{ transform: translateY(0px); opacity: 1; filter: alpha(opacity=1); } @media (max-width: 1024px) { .technology-m { display: block; } } @media (max-width: 655px){ .technology-m .box2 .con .con-new .lo{ width: 110px; } .technology-m .box2 .con .con-new .cn{ font-size: 34px; line-height: 34px; } .technology-m .box2 .con .con-new .txt{ font-size: 20px; line-height: 38px; } .technology-m .box2 .con .con-new .tit .t{ font-size: 22px; line-height: 22px; } .technology-m .box2 .con .con-new .tit .t img{ width: 50px; } .technology-m .box2 .con .con-new .tit .t p{ margin-top: 15px; } } @media (max-width: 540px){ .technology-m .box1 .box-new{ padding-top: 17%; } .technology-m .box1 .box-new .lo{ width: 100px; } .technology-m .box1 .box-new .tits{ font-size: 22px; line-height: 22px; } .technology-m .box1 .box-new .tit{ width: 80%; font-size: 14px; line-height: 26px; } .technology-m .box1 .box-new .img{ margin: 3% 0 0 0; } .technology-m .box1 .box-new .tits{ margin-top: 10px; } .technology-m .box1 .box-new .tit{ margin: 3% auto 0; } .technology-m .box2 .con .con-new .cn{ font-size: 22px; line-height: 22px; } .technology-m .box2 .con .con-new .txt{ font-size: 14px; line-height: 24px; } .technology-m .box2 .con .con-new .tit .t{ font-size: 16px; line-height: 16px; } .technology-m .box2 .con .con-new .tit .t img{ width: 50px; } .technology-m .box2 .con .con-new .tit .t p{ margin-top: 15px; } .technology-m .box4 .box-new{ padding-top: 17%; } .technology-m .box4 .box-new .lo{ width: 90px; } .technology-m .box4 .box-new .tits{ font-size: 22px; line-height: 22px; } .technology-m .box4 .box-new .list .item .tits{ font-size: 18px; line-height: 18px; } .technology-m .box4 .box-new .list .item .tit{ font-size: 14px; line-height: 24px; min-height: 48px; } .technology-m .box4 .box-new .list .btns span{ width: 10PX; height: 10px; } .technology-m .box3 .vv .con .lo{ width: 80px; } .technology-m .box3 .vv .con .tits{ font-size: 22px; line-height: 22px; } .technology-m .box3 .box-new .con .con-new .item .tits{ font-size: 18px; line-height: 18px; } .technology-m .box3 .box-new .con .con-new .item .tit{ font-size: 14px; line-height: 24px; } .technology-m .box5 .con .lo{ width: 100px; } .technology-m .box5 .con .cn{ font-size: 22px; line-height: 22px; } .technology-m .box5 .con .txt{ font-size: 14px; line-height: 24px; } .technology-m .box5 .con .list ul li{ width: 48%; height: 50px; } .technology-m .box5 .con .list ul li .icon{ width: 30px; -webkit-background-size: 100% auto !important; background-size: 100% auto !important; } .technology-m .box5 .con .list ul li .conn{ font-size: 14px; line-height: 20px; width: calc(100% - 40px); } .technology-m .box6 .box-new .tits{ font-size: 22px; line-height: 22px; } .technology-m .box6 .box-new .lo{ width: 130px; } .technology-m .box6 .box-new .tit{ font-size: 16px; line-height: 26px; } .technology-m .box6 .box-new .list ul li{ font-size: 16px; border: 2px solid #B0A5A1; } .technology-m .box6 .box-new .list ul li.on{ font-size: 18px; } .technology-m .box6 .box-new .con .txt{ font-size: 16px; line-height: 24px; } } .fp-auto-height { height: auto !important; } .fp-auto-height .fp-tableCell { height: auto !important; } .loading { width: 56px; height: 56px; margin: 0 auto; position: relative; } .loading .bg { width: 56px; height: 56px; top: 0; left: 0; position: absolute; background: url(../images/loading.png) no-repeat; animation: animationOne .5s linear infinite; } .loading span { text-align: center; font-size: 12px; line-height: 12px; font-family: ATB; color: #999; width: 100%; display: block; padding-top: 19px; } .anchorBL { display: none !important; } .search-list { width: 100%; height: auto; padding-top: 98px; background-color: #f6f6f6; padding-bottom: 5%; } .search-list .list { margin: 0 auto; } .search-list .list .title { font-size: 48px; line-height: 50px; text-align: center; color: #2c2f30; margin-top: 5%; } .search-list .list .txt { width: 100%; height: auto; font-size: 24px; line-height: 24px; text-align: center; color: #2c2f30; margin-top: 2%; } .search-list .list .txt span { color: #f00; } .search-list .list ul { width: 100%; height: auto; margin-top: 3%; padding-bottom: 30px; } .search-list .list ul li { width: 100%; height: auto; border-bottom: 1px solid #eee; margin-bottom: 10px; } .search-list .list ul li a { width: 100%; height: auto; display: block; color: #2c2f30; line-height: 40px; padding-bottom: 10px; } .search-list .list ul li a .tits { float: left; font-size: 24px; width: 80%; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .search-list .list ul li a .tits span { color: #f00; } .search-list .list ul li a .tit { float: right; font-size: 18px; } @media (min-width: 1024px) { .search-list .list ul li:hover a .tits { color: #B0A5A1; } } @media (max-width: 1024px) { .search-list { padding-top: 80px; } .search-list .list .title { font-size: 32px; line-height: 34px; } .search-list .list .txt { font-size: 18px; line-height: 18px; } .search-list .list ul li a { line-height: 30px; } .search-list .list ul li a .tits { font-size: 20px; height: 30px; } .search-list .list ul li a .tit { font-size: 16px; } } @media (max-width: 730px) { .search-list { padding-top: 60px; } } @media (max-width: 550px) { .search-list .list .title { font-size: 24px; line-height: 26px; } .search-list .list .txt { font-size: 14px; line-height: 14px; } .search-list .list ul li a .tits { font-size: 16px; } .search-list .list ul li a .tit { font-size: 14px; } } @medai (max-width: 455px) { .search-list { padding-top: 50px; } } @keyframes animationOne { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .layui-layer { max-width: 90%; } @keyframes myfirst { from { width: 21px; height: 21px; top: -4px; left: -4px; opacity: 1; } to { width: 31px; height: 31px; top: -9px; left: -9px; opacity: 0; } } @-moz-keyframes myfirst { from { width: 21px; height: 21px; top: -4px; left: -4px; opacity: 1; } to { width: 31px; height: 31px; top: -9px; left: -9px; opacity: 0; } } @-webkit-keyframes myfirst { from { width: 21px; height: 21px; top: -4px; left: -4px; opacity: 1; } to { width: 31px; height: 31px; top: -9px; left: -9px; opacity: 0; } } @-o-keyframes myfirst { from { width: 21px; height: 21px; top: -4px; left: -4px; opacity: 1; } to { width: 31px; height: 31px; top: -9px; left: -9px; opacity: 0; } } .js-m { transform: translateY(50px); opacity: 0; filter: alpha(opacity=0); transition: transform .5s,opacity .5s; } .js-m1 { transform: translateY(-50px); opacity: 0; filter: alpha(opacity=0); transition: transform .5s,opacity .5s; } .js-m2 { transform: translateX(-50px); opacity: 0; filter: alpha(opacity=0); transition: transform .5s,opacity .5s; } .js-m3 { transform: translateX(50px); opacity: 0; filter: alpha(opacity=0); transition: transform .5s,opacity .5s; } .animate { transform: translate(0px); opacity: 1; filter: alpha(opacity=100); } .pagefy { width: 100%; height: auto; text-align: center; font-size: 0; } .pagefy a { padding: 5px 10px; font-size: 14px; color: #666; border: 1px solid #aaa; cursor: pointer; } .pagefy a:hover { color: #fff; border: 1px solid #B0A5A1; background: #B0A5A1; } .pagefy span { padding: 5px 10px; font-size: 14px; color: #fff; border: 1px solid #B0A5A1; cursor: pointer; background: #B0A5A1; } .home{ display: none; width: 100%; padding: 20px 0; margin: 0; color: #777; text-align: center; font-size: 16px; line-height: 16px; } .home a{ color: #1b1b1b; margin: 0 10px; } .home span{ margin: 0 10px; } @media (max-width: 1024px){ .home{ } } .join{ width: 100%; height: auto; margin-top: 98px; } @media (max-width: 1024px){ .join{ margin-top: 80px; } } @media (max-width: 730px){ .join{ margin-top: 60px; } } @media (max-width: 455px){ .join{ margin-top: 50px; } } .join .join-banner{ width: 100%; height: auto; position: relative; } .join .join-banner .con{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .join .join-banner .con .con-new{ width: 795px; height: auto; max-width: 94%; margin: 0 auto; } .join .join-banner .con .con-new .tits{ width: 257px; height: auto; margin: 0 auto; max-width: 90%; } .join .join-banner .con .con-new .tit{ font-size: 48px; line-height: 68px; color: #fff; text-align: center; margin-top: 1%; } .join .join-banner .con .con-new .tit1{ font-size: 16px; line-height: 24px; color: #fff; text-align: center; opacity: 0.9; margin-top: 6%; } @media (max-width: 1024px){ .join .join-banner .con .con-new{ width: 80%; } .join .join-banner .con .con-new .tit{ font-size: 36px; line-height: 56px; } } @media (max-width: 730px){ .join .join-banner .img{ width: 120%; margin-left: -10%; } .join .join-banner .con .con-new .tits{ width: 180px; } .join .join-banner .con .con-new .tit{ font-size: 28px; line-height: 40px; } } @media (max-width: 500px){ .join .join-banner .img{ width: 140%; margin-left: -20%; } .join .join-banner .con .con-new{ width: 90%; } .join .join-banner .con .con-new .tits{ width: 140px; } .join .join-banner .con .con-new .tit{ font-size: 20px; line-height: 30px; } .join .join-banner .con .con-new .tit1{ font-size: 14px; } } .join-box1{ width: 100%; height: auto; background-position: center center; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; padding-top: 6%; } .join-box1 .box-new{ width: 100%; height: auto; } .join-box1 .box-new .title{ font-size: 45px; line-height: 48px; color: #fff; text-align: center; } .join-box1 .box-new .title .t{ display: inline-block; } .join-box1 .box-new .title span{ float: left; } .join-box1 .box-new .title i{ font-size: 53px; line-height: 48px; color: #fff; text-transform: uppercase; font-family: Arial; float: left; display: block; margin-top: 3px; margin-left: 5px; } .join-box1 .box-new .list{ width: calc(100% - 60px); height: auto; padding: 6% 30px; position: relative; } .join-box1 .box-new .list ul li{ width: 24%; height: auto; float: left; margin-right: 1.3%; position: relative; } .join-box1 .box-new .list ul li:last-child{ margin-right: 0; } .join-box1 .box-new .list ul li .pic{ width: 100%; height: auto; position: relative; z-index: 3; -webkit-transition: transform 1s; -o-transition: transform 1s; transition: transform 1s; } .join-box1 .box-new .list ul li .con{ width: 100%; height: 460px; margin-top: -35%; /*background-color: #B0A5A1;*/ position: relative; z-index: 5; -webkit-transition: width 1s,margin 1s; -o-transition: width 1s,margin 1s; transition: width 1s,margin 1s; } .join-box1 .box-new .list ul li .con .num{ text-align: center; font-family: Arial; font-size: 36px; line-height: 36px; color: #fff; padding-top: 10%; } .join-box1 .box-new .list ul li .con .tits{ font-size: 24px; line-height: 26px; color: #fff; text-align: center; margin-top: 5px; } .join-box1 .box-new .list ul li .con .txt{ width: 78%; height: auto; margin: auto; font-size: 14px; line-height: 24px; color: #fff; opacity: 0; margin-top: 8%; } .join-box1 .box-new .list ul li .con .txt p{ width: calc(100% - 14px); padding-left: 14px; height: auto; position: relative; } .join-box1 .box-new .list ul li .con .txt p:before{ content: ''; position: absolute; width: 3px; height: 3px; top: 11px; left: 0; border-radius: 3px; background: #fff; } .join-box1 .box-new .list .a{ width: 40px; height: 68px; position: absolute; top: 35%; background: url(../images/banner_btn.png) no-repeat; z-index: 10; } .join-box1 .box-new .list .a.prev{ left: 0%; } .join-box1 .box-new .list .a.next{ right: 0%; transform: rotate(180deg); } @media (min-width: 1024px){ .join-box1 .box-new .list ul li:hover{ z-index: 5; } .join-box1 .box-new .list ul li:hover .pic{ -webkit-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); } .join-box1 .box-new .list ul li:hover .con{ width: 130%; margin-left: -15%; background: #B0A5A1; } .join-box1 .box-new .list ul li:hover .con .txt{ opacity: 0.9; } } @media (max-width: 1400px){ .join-box1 .box-new .list ul li .con{ margin-top: -50%; } } @media (max-width: 1100px){ .join-box1 .box-new .list ul li .con .num{ font-size: 24px; line-height: 24px; } .join-box1 .box-new .list ul li .con .tits{ font-size: 18px; line-height: 20px; } } @media (max-width: 1024px){ .join-box1 .box-new .list{ width: calc(100% - 40px); padding: 6% 20px; } .join-box1 .box-new .list ul li .con{ height: auto; padding-bottom: 20px; width: 100%; background: #B0A5A1; } .join-box1 .box-new .list ul li .con .txt{ opacity: 0.9; } .join-box1 .box-new .list ul li .con .num{ padding-top: 5%; } .join-box1 .box-new .title{ font-size: 32px; line-height: 34px; } .join-box1 .box-new .title .t i{ font-size: 34px; line-height: 34px; } } @media (max-width: 730px){ .join-box1 .box-new .list{ width: 94%; padding: 6% 0; } .join-box1 .box-new .title{ font-size: 26px; line-height: 30px; } .join-box1 .box-new .title .t i{ font-size: 28px; line-height: 30px; } } @media (max-width: 600px){ .join-box1 .box-new .list .a{ width: 20px; } } .join-box2{ width: 100%; height: auto; padding: 6% 0; background-position: center center; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; } .join-box2 .con{ width: 920px; height: auto; max-width: 94%; margin: auto; } .join-box2 .con .tits{ width: 420px; height: auto; max-width: 60%; margin: 0 auto; } .join-box2 .con .tit{ font-size: 48px; line-height: 68px; text-align: center; color: #fff; margin-top: 2%; } .join-box2 .con .tit1{ font-size: 16px; line-height: 24px; color: #fff; opacity: 0.9; text-align: center; margin-top: 4%; } @media (max-width: 1024px){ .join-box2 .con .tit{ font-size: 36px; line-height: 56px; } } @media (max-width: 600px){ .join-box2 .con .tit{ font-size: 28px; line-height: 40px; } } @media (max-width: 450px){ .join-box2 .con .tit{ font-size: 20px; line-height: 30px; } .join-box2 .con .tit1{ font-size: 14px; line-height: 20px; } } .join-box3{ width: 100%; background-position: center center; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; padding-top: 5%; padding-bottom: 2%; } .join-box3 .box-new{ width: 1520px; height: auto; margin: 0 auto; max-width: 94%; } .join-box3 .box-new .title{ font-size: 45px; line-height: 48px; color: #000; text-align: center; } .join-box3 .box-new .title .t{ display: inline-block; } .join-box3 .box-new .title span{ float: left; } .join-box3 .box-new .title i{ font-size: 53px; line-height: 48px; color: #2c2f30; text-transform: uppercase; font-family: Arial; float: left; display: block; margin-top: 3px; margin-left: 5px; } .join-box3 .box-new .list{ width: 100%; height: auto; overflow: hidden; margin-top: 5%; } .join-box3 .box-new .list ul{ width: 100%; height: auto; overflow: hidden; margin: 0 auto; border-bottom: 1px solid #eaeaea } .join-box3 .box-new .list ul.u{ width: 75%; border-bottom: none; } .join-box3 .box-new .list ul.u li{ width: 33.3%; } .join-box3 .box-new ul li{ width: calc(25% - 1px); height: 254px; margin-left: -1px; border-left: 1px solid #eaeaea; float: left; } .join-box3 .box-new ul li .con{ width: 260px; height: auto; max-width: 90%; margin: 0 auto; } .join-box3 .box-new ul li .con .icon{ width: 100%; height: 46px; background-repeat: no-repeat; background-position: center center; margin-top: 32px; } .join-box3 .box-new ul li .con .tits{ width: 100%; height: auto; text-align: center; margin-top: 10px; } .join-box3 .box-new ul li .con .tits .cn{ font-size: 18px; line-height: 18px; color: #333; } .join-box3 .box-new ul li .con .tits .en{ font-size: 12px; line-height: 16px; color: #333; margin-top: 6px; } .join-box3 .box-new ul li .con .tit{ font-size: 14px; line-height: 24px; text-align: center; color: #000; margin-top: 24px; } @media (max-width: 1024px){ .join-box3 .box-new .title{ font-size: 32px; line-height: 34px; } .join-box3 .box-new .title .t i{ font-size: 34px; line-height: 34px; } } @media (max-width: 800px){ .join-box3 .box-new .list ul{ border: none; } .join-box3 .box-new .list ul.u{ width: 100%; } .join-box3 .box-new .list ul li{ width: 50%; border: none; border-right: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; } .join-box3 .box-new .list ul.u li{ width: 50%; } } @media (max-width: 730px){ .join-box3 .box-new .title{ font-size: 26px; line-height: 30px; } .join-box3 .box-new .title .t i{ font-size: 28px; line-height: 30px; } } .join-box4{ width: 100%; height: auto; padding-top: 0; } .join-box4 .box-new{ width: 1520px; height: auto; max-width: 94%; margin: 0 auto; } .join-box4 .box-new.b1{ width: 100%; max-width: 100%; margin-top:2%; } .join-box4 .box-new .title{ font-size: 45px; line-height: 48px; color: #fff; text-align: center; } .join-box4 .box-new .title .t{ display: inline-block; } .join-box4 .box-new .title span{ float: left; } .join-box4 .box-new .title i{ font-size: 53px; line-height: 48px; color: #fff; text-transform: uppercase; font-family: Arial; float: left; display: block; margin-top: 3px; margin-left: 5px; } .join-box4 .box-new .list{ width: 100%; height: auto; margin-top: 4%; } .join-box4 .box-new .list .item{ width: 10.3%; height: auto; float: left; } .join-box4 .box-new .list .item .icon{ width: 100%; height: 75px; text-align: center; position: relative; } .join-box4 .box-new .list .item .icon img{ max-width: 60%; display: inline-block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .join-box4 .box-new .list .item .tits{ text-align: center; font-size: 16px; line-height: 28px; color: #fff; margin-top: 8%; } .join-box4 .box-new .list span{ width: 2.5%; height: 75px; display: block; float: left; background-image: url(../images/join_icon16.png); background-position: center center; background-repeat: no-repeat; -webkit-background-size: 100% auto; background-size: 100% auto; } .join-box4 .box-new .list1{ width: 100%; height: auto; position: relative; margin-top:0; } .join-box4 .box-new .list1 ul li{ width: 62.5%; height: auto; float: left; position: relative; } .join-box4 .box-new .list1 ul li .bg{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(255,255,255,0.5); } .join-box4 .box-new .list1 ul li.swiper-slide-active .bg{ display: none; } .join-box4 .box-new .list1 .a{ width: 44px; height: 27px; position: absolute; top: 50%; margin-top: -13.5px; z-index: 10; } .join-box4 .box-new .list1 .a.prev{ left: 1%;background: url(../images/081002.png) no-repeat; } .join-box4 .box-new .list1 .a.next{ right: 1%;background: url(../images/081003.png) no-repeat; /* transform: rotate(180deg);*/ } @media (max-width: 1024px){ .join-box4 .box-new .title{ font-size: 32px; line-height: 34px; } .join-box4 .box-new .title .t i{ font-size: 34px; line-height: 34px; } } @media (max-width: 800px){ .join-box4 .box-new .list .item{ width: 20.6%; } .join-box4 .box-new .list span{ width: 5.5% } .join-box4 .box-new .list span:nth-child(8){ display: none; } .join-box4 .box-new .list .item .tits{ font-size: 14px; line-height: 20px; } } @media (max-width: 730px){ .join-box4 .box-new .title{ font-size: 26px; line-height: 30px; } .join-box4 .box-new .title .t i{ font-size: 28px; line-height: 30px; } } @media (max-width: 420px){ .join-box4 .box-new .list .item{ margin-bottom: 10px; } .join-box4 .box-new .list .item .icon{ height: 60px; } } .join-box5{ width: 100%; height: auto; background-position: center center; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; padding-top: 7%; padding-bottom: 7%; } .join-box5 .box-new .title{ font-size: 45px; line-height: 48px; color: #fff; text-align: center; } .join-box5 .box-new .title .t{ display: inline-block; } .join-box5 .box-new .title span{ float: left; } .join-box5 .box-new .title i{ font-size: 53px; line-height: 48px; color: #fff; text-transform: uppercase; font-family: Arial; float: left; display: block; margin-top: 3px; margin-left: 5px; } .join-box5 .box-new .table-box{ width: 797px; height: auto; max-width: 94%; margin: 4% auto 0; } .join-box5 .box-new .table-box .t{ width: 100%; height: auto; margin-bottom: 32px; } .join-box5 .box-new .table-box .t .tt{ font-size: 18px; line-height: 20px; color: #fff; } .join-box5 .box-new .table-box .t .text{ width: 100%; height: 22px; color: #8b8b8b; line-height: 22px; font-size: 14px; border: none; border-bottom: 1px solid #fff; background: none; margin-top: 8px; } .join-box5 .box-new .table-box .t .txt{ width: calc(100% - 28px); height: 190px; background: rgba(255,255,255,0.1); font-size: 14px; line-height: 26px; color: #8b8b8b; padding: 5px 14px; border: none; margin-top: 14px; } .join-box5 .box-new .submit{ width: 180px; height: 60px; text-align: center; background: #fe0335; font-size: 18px; line-height: 60px; color: #fff; margin: 38px auto 0; display: block; border: none; } @media (max-width: 1024px){ .join-box5 .box-new .title{ font-size: 32px; line-height: 34px; } .join-box5 .box-new .title .t i{ font-size: 34px; line-height: 34px; } } @media (max-width: 730px){ .join-box5 .box-new .title{ font-size: 26px; line-height: 30px; } .join-box5 .box-new .title .t i{ font-size: 28px; line-height: 30px; } } @media (max-width: 600px){ .join-box4 .box-new .list1 .a{ width: 20px; } } @media (max-width: 550px){ .join-box5 .box-new .table-box .t{ margin-bottom: 20px; } .join-box5 .box-new .submit{ width: 160px; height: 35px; line-height: 35px; font-size: 16px; margin: 20px auto 0; } } .pic-tk{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 10000; display: none; } .pic-tk .bg{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0,0,0,0.5); } .pic-tk .pic{ width: 778px; height: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .pic-tk .pic img{ width: 100%; } @media (max-width: 800px){ .pic-tk .pic{ width: 90%; } } .cot{ width: 1100px; height: auto; margin: 2% auto 6%; } .cot table{ width: 100%; height: auto; border: 1px solid #eaeaea; font-size: 16px; line-height: 26px; color: #666; } .cot table tr{ width: 100%; border: 1px solid #eaeaea; } .cot table tr td{ border: 1px solid #eaeaea; padding: 10px; } .cot table tr td p{ padding-left: 10px; } @media (max-width: 1150px){ .cot{ width: 94%; } .cot table{ font-size: 14px; line-height: 24px; } .cot table tr td{ padding: 5px 5px; } .cot table tr td p{ padding-left: 0px; } } .xxx{ width: 80px; height: auto; position: fixed; top: 50%; right: 0; transform: translateY(-50%); } .xxx .close{ width: 80px; height: 80px; display: block; background-color: #f6f6f6; background-image: url(../images/xx1_icon1.png); background-repeat: no-repeat; background-position: center; } .xxx .xxx-new{ width: 100%; height: auto; margin-top: 2px; } .xxx .xxx-new a{ width: 80px; height: 80px; display: block; background-color: #f6f6f6; border-bottom: 1px solid #e5e5e5; } .xxx .xxx-new a:last-child{ border: none; } .xxx .xxx-new a .icon{ width: 100%; height: 27px; padding-top: 15px; background-position: center bottom; background-repeat: no-repeat; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .xxx .xxx-new a p{ text-align: center; font-size: 14px; line-height: 14px; color: #666; margin-top: 9px; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .xxx .xxx-new a .icon.i1{ background-image: url(../images/xx1_icon2.png); } .xxx .xxx-new a .icon.i2{ background-image: url(../images/xx1_icon3.png); } .xxx .xxx-new a .icon.i3{ background-image: url(../images/xx1_icon4.png); } .xxx .xxx-new a .icon.i4{ background-image: url(../images/xx1_icon5.png); } .xxx .xxx-new a .icon.i5{ background-image: url(../images/xx1_icon6.png); } .xxx .xxx-new a .icon.i6{ background-image: url(../images/xx1_icon7.png); } .xxx .xxx-new a:hover .icon.i1{ background-image: url(../images/xx1_icon2_h.png); } .xxx .xxx-new a:hover .icon.i2{ background-image: url(../images/xx1_icon3_h.png); } .xxx .xxx-new a:hover .icon.i3{ background-image: url(../images/xx1_icon4_h.png); } .xxx .xxx-new a:hover .icon.i4{ background-image: url(../images/xx1_icon5_h.png); } .xxx .xxx-new a:hover .icon.i5{ background-image: url(../images/xx1_icon6_h.png); } .xxx .xxx-new a:hover .icon.i6{ background-image: url(../images/xx1_icon7_h.png); } .xxx .xxx-new a:hover p{ color: #B0A5A1; } .BMap_bubble_title{ font-size: 14px !important; line-height: 18px !important; } .BMap_bubble_content{ font-size: 12px !important; line-height: 16px !important; } /*# sourceMappingURL=style.css.map */ .jmAllMK02:after, .jmAllMK03:after, .jmAllMK04:after, .jmAllMK05:after, .jmAllMK06:after, .jmAllMK07:after, .jmAllMK07 .w1200:after, .tmsqCon:after{content:""; clear:both; display:block; height:0px; overflow:hidden;} .jmxzBan{color: #333;} .jmxzBanCon{position: absolute;top:0;bottom: 0;left: 50%; width: 100%;max-width: 1200px;-webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);-ms-transform: translateX(-50%);-o-transform: translateX(-50%);transform: translateX(-50%);z-index: 3;} .jmxzBanConNr{position: absolute;left: 50%;top: 22%;-webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);-ms-transform: translateX(-50%);-o-transform: translateX(-50%);transform: translateX(-50%);} .jmxzBanConNr .tits{ text-align: center; font-size: 72px; line-height: 74px; color: #fff; font-family: ATB; text-transform: uppercase; } .jmxzBanConNr .tit{ text-align: center; font-size: 48px; line-height: 50px; color: #fff ; margin-top: 5px;} .jmxzBanConZx{width: 178px; height: 43px; border: 1px solid #ddd; cursor: pointer; transition: all .5s; border-radius: 21px;font-size: 20px;text-align: center;color: #999;line-height: 43px;margin: 80px auto 0;} .jmxzBanConZx a{color: #fff;} @media (min-width: 1024px){ .jmxzBanConZx:hover{ background-color: #B0A5A1; border: 1px solid #B0A5A1; color: #fff; } } .jmAllMKZ{padding: 5% 0;width: 1200px;max-width: 92%;margin: 0 auto;} .jmAllMKZ .con-left{ width: 45%; float: left; height: auto; } .jmAllMKZ .con-left .jmAllMKTit01{ font-size: 20px; font-weight: bold; color: #333; text-align: left; } .jmAllMKZ .con-left .jmAllMKTit02{ font-size: 12px; color: #999; text-transform: uppercase; text-align: left; } .jmAllMKZ .con-left .jmAllMKTit03{ font-size: 14px; line-height: 24px; color: #999; margin-top: 20px; } .jmAllMKZ .list{ width: calc(50% - 1px); height: auto; border-right: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5; float: right; } .jmAllMKZ .list li{ width: calc(25% - 1px); height: 149px; border-left: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; float: left; } .jmAllMKZ .list li .icon{ width: 100%; height: 35px; position: relative; margin-top: 22px; } .jmAllMKZ .list li .icon img{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; max-height: 100%; } .jmAllMKZ .list li .t{ text-align: center; font-size: 14px; line-height: 18px; height: 36px; width: 80%; color: #666; margin: 12px auto 0; } .jmAllMKZ .list li .num{ text-align: center; font-size: 24px; line-height: 24px; font-weight: bold; font-family: Arial; color: #333; margin-top: 6px; } .jmAllMK-new{ width: 1200px; height: auto; margin: 0 auto; max-width: 93%; padding: 4% 0 5%; } .jmAllMK-new .jmAllMK05{ margin-top: 2%; } @media (max-width: 930px){ .jmAllMKZ .con-left{width: 100%;float: none;} .jmAllMKZ .list{width: calc(100% - 1px);float: none;margin-top: 4%;} } @media (max-width: 500px){ .jmAllMKZ .list li{ width: calc(50% - 1px); } .jmAllMKZ .list li .t{ width: 100%; } .jmAllMKZ .con-left .jmAllMKTit03{ display: none; } } .w1200 { width: 93%; max-width: 1200px; margin-left: auto; margin-right: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .jmAllMKTit01{font-size: 20px;text-align: center;} .jmAllMKTit02{font-size: 12px;color: #999999;text-align: center;text-transform: uppercase;} .jmAllMK01{text-align: center;font-size: 14px;color: #999999;margin-top: 2.6%;line-height: 2;} .floatl{float: left;} .floatr{float: right;} .jmAllMK02{position: relative;margin-top: 2.6%;} .jmAllMK02 .floatl{position: relative;width: 51.7%;} .jmAllMK02 .floatr{width: 40%;float: right;padding-top: 26px;} .jmAllMK02 .floatr .tits{font-size: 24px;line-height: 30px;color: #333;position: relative;} .jmAllMK02 .floatr .tits span{position: absolute;left: 60px;top: -22px;z-index: -1;} .jmAllMK02 .floatr .tit{font-size: 14px;line-height: 24px;color: #999;margin-top: 22px;} .jmAllMK02 .floatr .item-box{ width: 100%; height: auto; margin-top: 16%; } .jmAllMK02 .floatr .item-box .item{ float: left; border-right: 1px solid #e9e9e9; text-align: center; } .jmAllMK02 .floatr .item-box .item:last-child{ border-right: none; } .jmAllMK02 .floatr .item-box .item.it1{ width: 23.75%; } .jmAllMK02 .floatr .item-box .item.it2{ width: 38.2%; } .jmAllMK02 .floatr .item-box .item.it3{ width: 31.25%; } .jmAllMK02 .floatr .item-box .item .num{ font-family: Arial; font-size: 48px; line-height: 48px; color: #333; text-align: center; } .jmAllMK02 .floatr .item-box .item .num i{ display: inline-block; } .jmAllMK02 .floatr .item-box .item .num span{ display: inline-block; vertical-align: super; font-size: 26px; } /*.jmAllMK02 .floatr .item-box .item.it1 .t{ margin-top: 5px; }*/ .jmAllMK02 .floatr .item-box .item .num.i1{ -moz-margin-top: 0; margin-top: -10px; } .jmAllMK02 .floatr .item-box .item .t{ font-size: 16px; line-height: 16px; color: #999; margin-top: 11px; } .img-responsive{display:block;width:100%;height:auto} .img-responsive01{display:inline-block;max-width:100%;height:auto} .jmAllMK02LcON{position: absolute;top: 50%;left: 50%;margin-top: -44px;margin-left: -44px;} .jmAllMK02LcON img{display: block;} .jmAllMK02List{} .jmAllMK02List li{height: 81px; background-color: #fafafa;line-height: 81px;font-size: 18px;color: #666666;text-align: center;margin: 20px 0 0;} .jmAllMK02List li:nth-child(1){margin-top: 0;} .jmAllMK02List li:hover{background-color: #b3b3b3;color: #ffffff;} .bjHuise{background: #F6F6F6;} .jmAllMK03{} .jmAllMK0301{} .jmAllMK0301Ico{width: 78px; height: 78px; position: relative; border: solid 1px #e6e6e6;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;margin: 0 auto 0;} .jmAllMK0301Ico img{position: absolute;top:0;left:0;right:0;bottom:0;margin: auto; } .jmAllMK03 li{float: left;background: #fff;width: 32%;margin: 2% 2% 0 0;text-align: center;position: relative;height: 300px;} .jmAllMK03 li .jmAllMK0301{ padding-top: 80px; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .jmAllMK03 li .jmAllMK0301 .jmAllMK0301Tit{ font-size: 18px; line-height: 20px; color: #333; text-align: center; margin-top: 18px; } .jmAllMK03 li .jmAllMK0301 .txt{ width: 85.3%; height: auto; margin: 15px auto 0; font-size: 14px; line-height: 20px; color: #333; text-align: left; opacity: 0; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .jmAllMK03 li:hover .jmAllMK0301{ padding-top: 40px; } .jmAllMK03 li:hover .jmAllMK0301 .txt{ opacity: 1; } @media (max-width: 960px){ .jmAllMK03 li{ height: auto; padding: 80px 0; } .jmAllMK03 li .jmAllMK0301{ padding-top: 0; } .jmAllMK03 li:hover .jmAllMK0301{ padding-top: 0; } .jmAllMK03 li .jmAllMK0301 .txt{ display: none !important; } } /*.jmAllMK0301Tit span{border-bottom: 1px solid #CCCCCC;padding-bottom: 5px;display: inline-block;}*/ .jmAllMK03Pos .fon14{font-size: 14px;color: #999999;line-height: 26px;height: 182px;overflow: hidden;} .jmAllMK03Pos .jmxzBanConZx{font-size: 18px;margin: 8px auto 0;} .jmAllMK03Pos{position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: #fff;opacity: 0;-webkit-transition: all .5s;-o-transition: all .5s;transition: all .5s;-webkit-transform: scale(0.5);-ms-transform: scale(0.5);-o-transform: scale(0.5);transform: scale(0.5);} .jmAllMK03PosNr{padding: 9% 8% 0;} .jmAllMK03 li:nth-child(3n){margin-right: 0;} .jmAllMK03 li:hover .jmAllMK03Pos{opacity: 1;-webkit-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);} .jmAllMKPz{ width: 100%; height: auto; position: relative; background-position: center; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; } .jmAllMKPz .con{ padding-top: 3.3%; } .jmAllMKPz .con .jmAllMKTit01{ color: #fff; } .jmAllMKPz .con .jmAllMKTit02{ color: #fff; } .jmAllMKPz .con .jmAllMKTit03{ width: 510px; height: auto; max-width: 94%; color: #fff; font-size: 14px; line-height: 20px; text-align: center; margin: 40px auto 0; } .jmAllMKPz .con .con-new{ width: 100%; height: auto; margin-top: 6%; } .jmAllMKPz .con .con-new .pic{ width: 31%; margin-left: 16.6%; float: left; } .jmAllMKPz .con .con-new .conn{ width: 42%; float: right; margin-top: 5%; } .jmAllMKPz .con .con-new .conn .t{ width: 272px; margin-left: -40px; } .jmAllMKPz .con .con-new .conn .t1{ font-size: 16px; line-height: 28px; color: #fff; margin-top: 4px; } .jmAllMKPz .con .con-new .conn .t1 span{ font-size: 14px; } .jmAllMKPz .con .con-new .conn .t2{ font-size: 14px; line-height: 24px; color: #fff; margin-top: 16px; } .jmAllMKPz .con .con-new .conn .t3{ width: 100%; height: auto; margin-top: 46px; } .jmAllMKPz .con .con-new .conn .t3 .item{ width: 105px; float: left; } .jmAllMKPz .con .con-new .conn .t3 .item p{ font-size: 12px; line-height: 22px; color: #fff; margin-top: 4px; } @media (max-width: 1100px){ .jmAllMKPz .con .con-new .pic{ width: 41%; margin-left: 6%; } .jmAllMKPz .con .con-new .conn{ width: 50%; } .jmAllMKPz .con .con-new .conn .t3{ margin-top: 20px; } } .jmAllMKPzCon{width: 93%;max-width: 1618px;margin-left: auto;margin-right: auto;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;background: #fff;padding: 3% 0 0;margin-top:2%;} .jmAllMKPzCon01{font-size: 14px;color: #999999;text-align: center;} .jmAllMKPzCon02{width: 90%;margin: 2.2% auto 0;} .jmAllMK04{} .jmAllMK04Bot{font-size: 14px;color: #666666;margin-top: 10px;} .jmAllMK04 li{text-align: center;background-color: #fafafa;width: 23.5%;margin: 2% 2% 0 0;padding: 53px 0 0;float: left; height: 203px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .jmAllMK04 li:nth-child(4n){margin-right: 0;} .jmAllMK04Ico img:nth-child(1){display: inline-block;} .jmAllMK04Ico img:last-of-type{display: none;} .jmAllMK04 li:hover .jmAllMK04Ico img:last-of-type{display: inline-block;} .jmAllMK04 li:hover .jmAllMK04Ico img:nth-child(1){display: none;} .jmAllMK04 li:hover .jmAllMK04Bot{color: #333333;} .jmAllMK.pt0{padding-top: 0;-webkit-background-size: cover;background-size: cover;background-position: center;background-repeat: no-repeat;} .jmAllMK05{} .jmAllMK05 li{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;float: left;width: 23.5%;margin: 2% 2% 0 0;text-align: center;height: 238px;padding: 4% 2% 0;background-color: rgba(255,255,255,0.8);} .jmAllMK0502{font-size: 16px;color: #666666;margin-top: 5%;} .jmAllMK0503{font-size: 14px;color: #999999;margin-top: 3%;} .jmAllMK05 li:nth-child(4n){margin-right: 0;} .jmAllMK0501 img:nth-child(1){display: inline-block;} .jmAllMK0501 img:last-of-type{display: none;} .jmAllMK05 li:hover .jmAllMK0501 img:nth-child(1){display: none;} .jmAllMK05 li:hover .jmAllMK0501 img:last-of-type{display: inline-block;} .jmAllMK05 li:hover .jmAllMK0502{color: #333;} .jmAllMK05 li:hover .jmAllMK0503{color: #333;} .jmAllMK06{} .jmAllMK06 li{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;float: left;width: 32%;margin: 2% 2% 0 0;text-align: center;height: 242px;padding: 5% 6% 0;background-color: rgba(255,255,255,0.8);} .jmAllMK06 li:nth-child(3n){margin-right: 0;} .jmAllMK06 li:hover .jmAllMK0501 img:nth-child(1){display: none;} .jmAllMK06 li:hover .jmAllMK0501 img:last-of-type{display: inline-block;} .jmAllMK06 li:hover .jmAllMK0502{color: #333;} .jmAllMK06 li:hover .jmAllMK0503{color: #333;} .jmAllMK.bjzcH{ padding-top: 4%; } /*.bjzcH{background: #F7F7F7;}*/ .jmAllMK.pb0{padding-bottom: 0;} .jmAllMK07{width: 93%;max-width: 1618px;margin-left: auto;margin-right: auto;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;background: #fff;padding:3% 0 7%;margin-top:2%;} .jmAllMK07mk{float: left;width: 80px;text-align: center;position: relative;} .jmAllMK07mk .bg{width: 128px;height: 128px;border-radius: 100%;background-color: #fff;position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); z-index: 4; border: 1px solid #cfcfcf; } @media (max-width: 900px){ .jmAllMK07mk .bg{width: 100px;height: 100px;} } @media (max-width: 650px){ .jmAllMK07mk .bg{display: none;} } .jmAllMK07mk02{font-size: 16px;color: #666666;margin-top: 5px;position: relative; z-index: 5;} .jmAllMK07mkHr{width: 200px;height: 1px;background: #CCCCCC;float: left;position: relative;margin-top: 28px;z-index: 3;} .jmAllMK07mkHr img{display: block;position: absolute;top: 50%;left: 50%;margin-top: -6px;margin-left: -3px;} .jmAllMK07mk01{position: relative;z-index: 5;} .jmAllMK07mk01 img:nth-child(1){display: inline-block;} .jmAllMK07mk01 img:last-of-type{display: none;} .jmAllMK07mk:hover .jmAllMK07mk01 img:nth-child(1){display: none;} .jmAllMK07mk:hover .jmAllMK07mk01 img:last-of-type{display: inline-block;} .jmAllMK07mk:hover .jmAllMK07mk02{color: #333333;} .jmAllMK07Sh{width: 1px;height: 100px;background: #CCCCCC;position: relative;margin:8px 39px 8px 0;z-index: 3;} .jmAllMK07Sh img{display: block;position: absolute;top: 50%;left: 50%;margin-top: -3px;margin-left: -6px;} .jmAllMK08 .jmAllMK07mk{float: right;} .jmAllMK08 .jmAllMK07mkHr{float: right;} .jmAllMK07mk01{height: 50px;} .tmsqCon{margin-top: 4%;} .tmsqConInp{display: block;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;height: 40px;border: none; border: 1px solid #e5e5e5;font-size: 14px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;width: calc(100% - 15px);margin-top: 27px;padding-left: 15px;} .tmsqConInp.mt0{margin-top: 0;} .tmsqCon .floatl{width: 49%;} .tmsqCon .floatr{width: 49%;border: 1px solid #e5e5e5;} .tmsqCon .floatr textarea{display: block;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;height: 172px;background: #fff; border: none;font-size: 14px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;width: 100%;padding: 6px 10px;} .jmxzBanConZx.jmsqBut{width: 233px; height: 62px;border-radius: 31px;font-size: 18px;line-height: 62px;margin: 5% auto 0;} .jmAllMK04 li:hover, .jmAllMK03 li:hover, .jmAllMK05 li:hover, .jmAllMK06 li:hover{-webkit-box-shadow: 0px 0px 26px #CCCCCC;-moz-box-shadow: 0px 0px 26px #CCCCCC;-ms-box-shadow: 0px 0px 26px #CCCCCC;-o-box-shadow: 0px 0px 26px #CCCCCC;box-shadow: 0px 0px 26px #CCCCCC;} .jmFixR{position: fixed;width: 80px;right: 10px;top: 50%;z-index: 9999;-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-ms-transform: translateY(-50%);-o-transform: translateY(-50%);transform: translateY(-50%);} .jmFixRCon{border: 1px solid #E6E6E6;border-bottom: none;background: #fff;} .jmFixRCon li{height: 64px;border-bottom: 1px solid #E6E6E6;text-align: center;padding-top: 1px;position: relative;cursor: pointer;} .jmFixRCon li:hover{background: #B0A5A1;} .jmFixRCon01{margin-top: 10px} .jmFixRCon01 img:nth-child(1){display: inline-block;} .jmFixRCon01 img:last-of-type{display: none;} .jmFixRCon li:hover .jmFixRCon01 img:nth-child(1){display: none;} .jmFixRCon li:hover .jmFixRCon01 img:last-of-type{display: inline-block;} .jmFixRCon02{font-size: 14px;color: #666666;} .jmFixRCon li:hover .jmFixRCon02{color: #fff;} .jmFixRConNr{width: 0px;height: 65px;background:#B0A5A1;position: absolute;top: 0;right: 100%;color: #fff;font-size: 14px;padding-top: 14px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;overflow: hidden;transition:all linear .3s; -webkit-transition:all linear .3s;-moz-transition:all linear .3s;-ms-transition:all linear .3s;-o-transition:all linear .3s;} .jmFixRConNr p{line-height: 1.3;white-space: nowrap;} .jmFixRCon li:hover .jmFixRConNr{width: 140px;} .jmFixRTop{width: 80px;height: 60px;background: url(../images/jmr01.png) no-repeat top center;text-align: center;padding-top:1px ;cursor: pointer;} .jmFixRTop img{margin-top: 25px;} .jmAllMK{padding: 5% 0;} .quality{ width: 100%; height: auto; display: none; background-color: #f7f7f7; padding-bottom: 5%; } .quality .title{ width: 100%; height: auto; padding-top: 7%; background-color: #fff; } .quality .jmAllMKTit03{ width: 70%; margin: auto; font-size: 14px; line-height: 20px; text-align: center; color: #333; padding-top: 3%; margin: 0 auto 0; background: #fff; } .quality .pic{ width: 100%; height: auto; padding-top: 6%; background: #fff; } .quality .con{ width: 92%; height: auto; margin: -12% auto 0; background-color: #fff; box-shadow: 0 10px 20px rgba(0,0,0,0.15); z-index: 10; position: relative; padding-bottom: 10%; } .quality .con .con-new{ width: 73.9%; height: auto; margin: 0 auto; } .quality .con .con-new .t{ width: 53.3%; height: auto; margin: 0 auto; padding-top: 10%; } .quality .con .con-new .t1{ text-align: center; font-size: 16px; line-height: 24px; color: #333; margin-top: 15px; } .quality .con .con-new .t1 span{ font-size: 14px; } .quality .con .con-new .t2{ font-size: 14px; line-height: 24px; color: #666; margin-top: 20px; text-align: center; } .quality .con .con-new .t3 { width: 100%; height: auto; margin-top: 10%; text-align: center; } .quality .con .con-new .t3 .item { width: 105px; display: inline-block; text-align: left; } .quality .con .con-new .t3 .item p { font-size: 12px; line-height: 22px; color: #666; margin-top: 4px; } @media (max-width: 450px){ .quality .jmAllMKTit03{ width: 80%; } .quality .con .con-new{ width: 90%; } } @media (max-width: 750px){ .jmAllMK03 li{ width: 100%; padding: 0; position: relative; } .jmAllMK03 li .jmAllMK0301 .b{ width: 31.3%; float: left; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .jmAllMK03 li .jmAllMK0301 .txt{ width: 62.3%; float: right; margin-right: 3.2%; font-size: 18px; line-height: 28px; color: #333; display: block !important; opacity: 1; padding-top: 3%; padding-bottom: 4%; margin-top: 0; text-align: justify; } .jmAllMKPz{ display: none; } .quality{ display: block; } } @media (max-width: 580px){ .jmAllMK02 .floatr .tits{ font-size: 20px; line-height: 20px; } .jmAllMK02 .floatr .tits span{ width: 100%; left: 10%; } .jmAllMK02 .floatr .item-box{ margin-top: 5%; } .jmAllMK02 .floatr .item-box .item .num{ font-size: 32px; line-height: 32px; } .jmAllMK02 .floatr .item-box .item .num sup{ font-size: 18px; } .jmAllMK02 .floatr .item-box .item .num.i1{ -moz-margin-top: 0; margin-top: -5px; } .jmAllMK02 .floatr .item-box .item .t{ font-size: 14px; line-height: 14px; } .jmAllMK03 li{ height: 180px; } .jmAllMK03 li .jmAllMK0301 .txt{ font-size: 14px; line-height: 24px; } .jmAllMK03 li .jmAllMK0301 .jmAllMK0301Tit{ font-size: 14px; line-height: 16px; margin-top: 8px; } } @media (max-width: 700px){ .jmAllMKPz .con .jmAllMKTit03{ margin: 15px auto 0; } .jmAllMKPz .con{top: 6% ;} .imgg{ width: 300%; margin-left: -100%; } } @media (max-width: 900px){ .jmFixR{display: none;} } @media only screen and (min-width: 100px) and (max-width:1080px){ .jmAllMK02List li{height: 60px;line-height: 60px;font-size: 16px;} } @media only screen and (min-width: 100px) and (max-width:815px){ .jmAllMK02 .floatr .item-box .item .num span{ font-size: 20px; } .jmAllMK02 .floatl{width: 100%;margin-top: 20px;} .jmAllMK02 .floatr{width: 100%;position: static;-webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0);} .jmAllMK02List li{height: 45px;line-height: 45px;font-size: 14px;margin: 10px 0 0;} .jmAllMK02List li:nth-child(1){margin-top: 10px;} .jmAllMK02 .floatr .item-box{ margin-top: 5%; } } @media only screen and (min-width: 100px) and (max-width:600px){ .jmAllMK02LcON img{width: 50px;} .jmAllMK02LcON{margin-top: -25px; margin-left: -25px;} } /*@media only screen and (min-width: 100px) and (max-width:1000px){ .jmAllMK0301Ico img{width: 60px;margin: 20px 0 0 20px;} }*/ @media only screen and (min-width: 100px) and (max-width:850px){ /*.jmAllMK03 li{width: 49%;} .jmAllMK03 li:nth-child(3n){margin-right: 2%;} .jmAllMK03 li:nth-child(2n){margin-right: 0;}*/ } @media only screen and (min-width: 100px) and (max-width:640px){ /*.jmAllMK0301Ico img{width: 40px;margin: 20px 0 0 20px;}*/ .jmAllMK0301Ico{width: 80px;height: 80px;} /*.jmAllMK03 li{padding: 8% 0;}*/ .jmAllMK0301Tit{font-size: 16px;} .jmAllMK03 li:hover .jmAllMK03Pos{display: none;} /*.jmAllMKPzCon{padding: 5% 5% 0;}*/ } @media only screen and (min-width: 100px) and (max-width:920px){ .jmAllMK04 li{width: 49%;} .jmAllMK04 li:nth-child(4n){margin-right: 2%;} .jmAllMK04 li:nth-child(2n){margin-right:0;} } @media only screen and (min-width: 100px) and (max-width:550px){ .jmAllMK04Ico img{width: 40px;} .jmAllMK04 li{height: 150px;padding: 36px 0 0;} } @media only screen and (min-width: 100px) and (max-width:1030px){ .jmAllMK05 li{width: 49%;} .jmAllMK05 li:nth-child(4n){margin-right: 2%;} .jmAllMK05 li:nth-child(2n){margin-right:0;} } @media only screen and (min-width: 100px) and (max-width:920px){ .jmAllMK06 li{width: 49%;} .jmAllMK06 li:nth-child(2n){margin-right:0;} .jmAllMK06 li:nth-child(3n){width: 100%;} } @media only screen and (min-width: 100px) and (max-width:580px){ .jmAllMK0501 img{width: 40px;} .jmAllMK06 li{height: 173px;} .jmAllMK05 li{height: 173px;} .jmAllMK0503{margin-top: 5px;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:3;word-break: break-all;overflow: hidden;} .jmAllMK0502{margin-top: 4px;} } @media only screen and (min-width: 100px) and (max-width:1440px){ .jmAllMK07mk{width: 10%;} .jmAllMK07mkHr{width: 12.5%;} .jmAllMK07Sh{margin-right: 4.6%;} } @media only screen and (min-width: 100px) and (max-width:900px){ .jmAllMK07mk01 img{height: 24px;} .jmAllMK07mk01{height: 30px;} .jmAllMK07mkHr{margin-top: 21px;} } @media only screen and (min-width: 100px) and (max-width:650px){ .jmAllMK07mkHr{display: none;} .jmAllMK07mk{width: 20%;margin-top: 5%;} .jmAllMK07Sh{display: none;} .jmAllMK08 .jmAllMK07mk{float: left;} .jmAllMK07mk02{font-size: 14px;} } @media only screen and (min-width: 100px) and (max-width:710px){ .join-box4 .box-new .list1 .a{display: none;} } @media only screen and (min-width: 100px) and (max-width:800px){ .tmsqCon .floatr textarea{height: 157px;} .tmsqConInp{margin-top: 20px;} .jmxzBanConZx.jmsqBut{height: 50px;line-height: 50px;font-size: 18px;font-weight: bold;} } @media only screen and (min-width: 100px) and (max-width:500px){ .tmsqCon .floatl{width: 100%;} .tmsqConInp{ width: 100%; margin-top: 10px; } .tmsqCon .floatr{width: 100%;margin-top: 10px;} .tmsqCon .floatr textarea{ padding: 6px 15px; } } @media only screen and (min-width: 100px) and (max-width:1024px){ .jmxzBanConNr .tits{font-size: 50px;line-height: 1.2;} .jmxzBanConNr .tit{font-size: 32px;line-height: 1.2;} .jmxzBanConZx{font-size: 16px;margin-top: 15px;} } @media only screen and (min-width: 100px) and (max-width:640px){ .jmxzBanConNr .tits{font-size: 34px;line-height: 1.2;} .jmxzBanConNr .tit{font-size: 26px;line-height: 1.2;} .jmxzBanConZx{font-size: 16px;margin-top: 15px;} } @media only screen and (min-width: 100px) and (max-width:460px){ .jmxzBanConNr .tits{font-size: 24px;line-height: 1.2;} .jmxzBanConNr .tit{font-size: 16px;line-height: 1.2;} .jmxzBanConZx{font-size: 14px;margin-top: 15px;width: 130px;height: 36px;line-height: 36px;} } .return-top{ width: 80px; height: 60px; background: url(../images/jmr01.png) no-repeat top center; text-align: center; padding-top: 1px; cursor: pointer; position: fixed; bottom: 3%; right: 2%; z-index: 10000; display: block; -webkit-background-size: cover !important; background-size: cover !important; } .return-top img{ margin-top: 25px; } @media (max-width: 750px){ .return-top{ width: 40px; height: 30px; } .return-top img{ margin-top: 12px; width: 18px; display: block; margin: 12px auto 0; } } .bottom-box{ width: 100%; height: auto; -webkit-background-size: cover; background-size: cover; background-position: center; margin-top: 6%; } .bottom-box .bottom-new{ width: 1200px; height: auto; margin: 0 auto; max-width: 92%; text-align: center; padding: 5% 0; } .bottom-box .bottom-new .item{ display: inline-block; margin: 0 90px; color: #fff; } .bottom-box .bottom-new .item .item-left{ text-align: right; float: left; margin-top: 6px; } .bottom-box .bottom-new .item .item-left .t{ font-size: 30px; line-height: 36px; } .bottom-box .bottom-new .item .item-left .t1{ font-size: 12px; line-height: 20px; text-transform: uppercase; margin-top: 7px; } .bottom-box .bottom-new .item .line{ width: 1px; height: 75px; background-color: #bcbcbd; float: left; margin: 0 30px; } .bottom-box .bottom-new .item .item-right{ font-size: 24px; line-height: 36px; float: left; text-align: left; margin-top: 3px; } .bottom-box .bottom-new .item .item-right span{ font-size: 18px; } @media (max-width: 1290px){ .bottom-box .bottom-new .item{ margin: 0 40px; } } @media (max-width: 1060px){ .bottom-box .bottom-new .item .item-left .t{ font-size: 22px; line-height: 28px; } .bottom-box .bottom-new .item .item-right{ font-size: 18px; line-height: 28px; } .bottom-box .bottom-new .item .line{ height: 66px; margin: 0 15px; } } @media (max-width: 870px){ .bottom-box .bottom-new .item{ margin: 0; width: 100%; display: block; margin-bottom: 3%; } .bottom-box .bottom-new .item .item-left{ width: 43.5%; } .bottom-box .bottom-new .item .item-right{ width: 47.8%; } .bottom-box .bottom-new .item .item-left .t1{ line-height: 14px; } } #newBridge .nb-icon-wrap{ width: 60px; height: 60px; } #newBridge .nb-invite-wrap-base{ display: none !important; } .social { margin: 5% auto 6%; } .social .s-box{ width: 100%; height: auto; position: relative; margin-top: 5%; } .social .s-box .pic{ width: 50%; float: left; } .social .s-box .con{ width: 40%; height: 100%; position: absolute; top: 0; right: 5%; } .social .s-box .con .t{ font-size: 24px; line-height: 24px; color: #333; } .social .s-box .con .t1{ font-size: 16px; line-height: 26px; color: #999; margin-top: 10px; } .social .tabs{ width: 100%; height: auto; text-align: center; font-size: 0; margin-top: 3%; } .social .tabs a{ width: 148px; height: 48px; border: 1px solid #666; font-size: 18px; line-height: 48px; color: #666; display: inline-block; text-align: center; margin: 0 15px; } .social .tabs a.on{ background-color: #B0A5A1; color: #fff; border: 1px solid #B0A5A1; } .social .list { width: 100%; height: auto; background-color: #fff; margin-top: 3%; } .social .list ul li .tits { width: 90%; height: 60px; border-bottom: 1px solid #f2f2f2; padding: 0 5%; cursor: pointer; position: relative; } .social .list ul li .tits .t { font-size: 14px; line-height: 60px; color: #666; float: left; } .social .list ul li .tits .t.t1 { font-size: 16px !important; color: #333; width: 37.5%; } .social .list ul li .tits .t.t2 { width: 22.6%; } .social .list ul li .tits .t.t3 { width: 13%; } .social .list ul li .tits .t.t4 { width: 15.6%; } .social .list ul li .tits .t.t5 { width: 10.9%; } .social .list ul li .tits .t.t6 { width: calc(11.4% - 2px); height: 48px; border: 1px solid #ccc; text-align: center; display: block; font-size: 18px; line-height: 48px; color: #878787; margin-top: 43px; transition: all .5s; } @media (min-width: 1024px) { .social .list ul li .tits .t.t6:hover { background-color: #deb01a; border: 1px solid #deb01a; color: #fff; } } .social .list ul li .tits .more-click { width: 10%; position: absolute; height: 100%; top: 0; right: 0; background-position: center center; background-repeat: no-repeat; -webkit-background-size: 20px; background-size: 20px; background-image: url(../images/campus_icon2.png); } .social .list ul li .con { width: 90%; height: auto; margin: 0 auto; padding: 45px 5% 60px; border-bottom: 1px solid #f2f2f2; display: none; } .social .list ul li .con .con-left { width: 100%; height: auto; float: left; font-size: 14px; line-height: 26px; color: #666; } .social .list ul li .con .con-left .apply{ width: 150px; height: 50px; background-color: #191d1c; font-size: 18px; line-height: 50px; color: #fff; text-align: center; border: none; display: block; margin-top: 40px;} .social .list ul li.on .tits .more-click { background-image: url(../images/campus_icon2_h.png); } .social .more { width: 180px; height: 50px; margin: 4% auto 0; text-align: center; font-size: 18px; line-height: 50px; color: #fff; display: block; background-color: #B0A5A1; position: relative; } .social .more span { display: inline-block; background-repeat: no-repeat; background-position: right center; position: relative; z-index: 5; } .social .more:after { width: 100%; height: 100%; position: absolute; z-index: 4; background-color: #B0A5A1; content: ''; top: 0; left: 0; } @media (min-width: 1024px) { .social .more:hover:after { animation: hoverAnimation .5s linear; } } @media (max-width: 1366px) { .social .title .tits { font-size: 30px; } } @media (max-width: 1280px) { .social .list ul li .tits { width: 94%; padding: 0 3%; } .social .list ul li .tits .t.t2 { width: 15.6%; } .social .list ul li .tits .more-click { width: 9.5%; background-size: 20px; } .social .list ul li .con { width: 94%; padding: 4% 3%; } .social .list ul li .con .con-left { font-size: 16px; line-height: 26px; } .social .list ul li .con .con-right .table-box .text { font-size: 16px; } .social .list ul li .con .con-right .table-box .t1 { font-size: 16px; } .social .list ul li .con .con-right .table-box .t1 .tt1 { margin-right: 20px; } .social .list ul li.on .tits .t { font-size: 16px; } } @media (max-width: 1024px) { .social { margin: 0 auto 130px; } .social .title .tits { font-size: 30px; margin-left: 0; } .social .title .search-box { width: 60%; margin-right: 0; } } @media (max-width: 800px) { .social .list ul li .tits .t.t1 { width: 45.5%; } .social .list ul li .tits .t.t2 { width: 26%; } .social .list ul li .tits .t.t4 { width: 21.6%; } .social .list ul li .tits .t.t3 { display: none; } .social .list ul li .tits .t.t5 { display: none; } .social .list ul li .con .con-left { width: 100%; float: none; } .social .list ul li .con .con-right { width: 100%; float: none; margin-top: 3%; } } @media (max-width: 768px) { .social { margin: 0 auto 8%; } .social .s-box .pic{ width: 100%; float: none;} .social .s-box .con{ width: 90%; margin: 3% auto 0; position: relative; right: auto;} .social .s-box .con .t{ font-size: 18px; line-height: 18px;} .social .s-box .con .t1{ font-size: 14px; line-height: 24px;} .social .list ul li .con .con-left .apply{ width: 120px; line-height: 35px; height: 35px; margin-top: 20px; font-size: 16px;} .social .tabs a{ width: 120px; height: 35px; line-height: 35px; font-size: 16px; } } @media (max-width: 640px) { .social .title .tits { font-size: 20px; width: 100%; line-height: 24px; float: none; } .social .title .search-box { float: none; margin-top: 20px; width: 100%; } .social .title .search-box .text { height: 38px; line-height: 38px; font-size: 14px; } .social .title .search-box .submit { height: 40px; line-height: 40px; font-size: 16px; } .social .list ul li .con .con-left{ font-size: 14px; line-height: 24px;}} @media (max-width: 450px) { .social .list ul li .tits { height: 50px; } .social .list ul li .tits .t { font-size: 16px; line-height: 50px; } .social .list ul li .tits .t.t1 { width: 90%; font-size: 16px !important; } .social .list ul li .tits .t.t2 { display: none; } .social .list ul li .tits .t.t4 { display: none; } .social .list ul li .tits .more-click { background-size: 15px; } .social .more { width: 130px; height: 38px; font-size: 14px; line-height: 38px; } } .verifyPassword { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 110000; display: none; } .verifyPassword .bg { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); } .verifyPassword .con { width: 225px; height: 120px; padding: 20px; background-color: #fff; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .verifyPassword .con .tits { font-size: 18px; line-height: 24px; color: #B0A5A1; } .verifyPassword .con .text { width: 100%; height: 33px; font-size: 16px; color: #999; text-indent: 1em; line-height: 33px; border: 1px solid #999; margin-top: 10px; } .verifyPassword .con .submit { width: 100px; height: 34px; background-color: #B0A5A1; text-align: center; margin: 15px auto 0; border: none; color: #fff; display: block; font-size: 16px; } .verifyPassword .con .close { width: 16px; height: 16px; background-size: 10px; background-position: center center; background-repeat: no-repeat; background-image: url(../images/nav_close_b.png); position: absolute; top: 10px; right: 10px; display: block; }