@charset "UTF-8"; /*主色调*/ /*文字文本*/ /*单行省略号*/ /*多行省略号*/ /*箭头*/ /**a标签hoverboder效果**/ /**使用vw适配**/ body { background: #fff; } .banner .swiper-wrapper { height: calc(100vw * (280 / 375)) !important; overflow: hidden; } @media (min-width: 768px) { .banner .swiper-wrapper { height: 600px !important; } } @media (min-width: 1200px) { .banner .swiper-wrapper { height: 800px !important; } } @media (min-width: 1960px) { .banner .swiper-wrapper { height: 900px !important; } } .banner .swiper-slide { width: 100%; height: calc(100vw * (280 / 375)) !important; overflow: hidden; background-repeat: no-repeat; background-position: center; background-size: cover; } @media (min-width: 768px) { .banner .swiper-slide { height: 600px !important; } } @media (min-width: 1200px) { .banner .swiper-slide { height: 800px !important; } } @media (min-width: 1960px) { .banner .swiper-slide { height: 900px !important; } } .banner .swiper-slide .txt { display: block; color: #fff; position: relative; z-index: 1; text-align: center; width: 100%; height: 100%; line-height: calc(100vw * (280 / 375)); } @media (min-width: 768px) { .banner .swiper-slide .txt { line-height: 600px; } } @media (min-width: 1200px) { .banner .swiper-slide .txt { line-height: 800px; } } .banner .swiper-slide .txt h2 { padding: 0 20px; width: 100%; font-size: 32px; margin-bottom: 40px; line-height: 1.4; font-weight: bold; letter-spacing: 5px; display: inline-block; vertical-align: middle; } @media (min-width: 768px) { .banner .swiper-slide .txt h2 { font-size: 50px; margin-bottom: 100px; padding: 0 50px; } } @media (min-width: 1200px) { .banner .swiper-slide .txt h2 { font-size: 60px; } } @media (min-width: 1400px) { .banner .swiper-slide .txt h2 { font-size: 68px; } } .banner .swiper-slide .txt a { display: inline-block; position: absolute; bottom: 40px; border: 1px solid #fff; font-size: 15px; color: #fff; text-align: center; margin-top: 80px; cursor: pointer; overflow: hidden; width: 180px; left: 0; right: 0; margin: 0 auto 10px; height: 40px; line-height: 40px; } @media (min-width: 768px) { .banner .swiper-slide .txt a { width: 240px; height: 48px; line-height: 48px; bottom: 120px; font-size: 18px; } } @media (min-width: 1200px) { .banner .swiper-slide .txt a { bottom: 200px; } } .banner .swiper-slide .txt a:after { content: ''; position: absolute; z-index: -1; -webkit-transition: width 0.3s, opacity 0.3s; transition: width 0.3s, opacity 0.3s; width: 0; height: 530px; top: 50%; left: 50%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; background: #000000; background: rgba(0, 0, 0, 0.3); -webkit-transform: translate3d(-50%, -50%, 0) rotate(45deg); transform: translate3d(-50%, -50%, 0) rotate(45deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .banner .swiper-slide .txt a:hover:after, .banner .swiper-slide .txt a:active:after { width: 100%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; } .banner .swiper-slide .txt:after { content: ""; height: 100%; display: inline-block; vertical-align: middle; } .banner .swiper-slide:before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .banner .swiper-pagination { position: absolute; display: inline-block; left: 0; right: 0; bottom: 12px; text-align: center; } @media (min-width: 1200px) { .banner .swiper-pagination { bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; } } .banner .swiper-pagination li { display: inline-block; background: #ffffff; background: rgba(255, 255, 255, 0.5); border-radius: 50%; cursor: pointer; width: 8px; height: 8px; margin: 0 3px; } @media (min-width: 768px) { .banner .swiper-pagination li { width: 12px; height: 12px; margin: 0 6px; } } .banner .swiper-pagination li.cur { background: #ed4747; background: rgba(237, 71, 71, 0.8); } .banner .swiper-pagination li h2, .banner .swiper-pagination li p { display: none; } @media (min-width: 1200px) { .banner .swiper-pagination li { background: #000000; background: rgba(0, 0, 0, 0.5); -webkit-box-flex: 1; -ms-flex: auto; flex: auto; width: 1%; padding: 25px; height: auto; border-radius: 0; margin: 0; text-align: center; color: #fff; -webkit-transition: all .5s ease; transition: all .5s ease; } .banner .swiper-pagination li h2 { display: block; font-size: 24px; margin-bottom: 15px; width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; } .banner .swiper-pagination li p { display: block; font-size: 18px; width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; } } .index-tit { font-size: 20px; margin: 40px 0 30px; line-height: 1.8; color: #333; text-align: center; } @media (min-width: 768px) { .index-tit { font-size: 26px; margin: 50px 0 30px; } } @media (min-width: 992px) { .index-tit { font-size: 32px; margin: 80px 0 50px; } } @media (min-width: 1200px) { .index-tit { font-size: 36px; margin: 80px 0 50px; } } .fast-track .index-tit { margin-bottom: 10px; } @media (min-width: 768px) { .fast-track .index-tit { margin-bottom: 30px; } } #fast { position: relative; height: 148px !important; padding-top: 20px; overflow: hidden; } #fast .swiper-wrapper { height: 128px !important; } #fast .swiper-slide { text-align: center; } #fast .swiper-slide a { display: inline-block; cursor: pointer; padding: 0 10px; } #fast .swiper-slide a:hover img, #fast .swiper-slide a:active img { -webkit-transform: translateY(-10px); transform: translateY(-10px); } #fast .swiper-slide a:hover p, #fast .swiper-slide a:active p { color: #ed4747; -webkit-transform: translateY(-15px); transform: translateY(-15px); } #fast .swiper-slide img { width: 60px; height: 52px; -o-object-fit: contain; object-fit: contain; -webkit-transition: all .5s ease; transition: all .5s ease; } @media (min-width: 768px) { #fast .swiper-slide img { width: 80px; height: 70px; } } @media (min-width: 1200px) { #fast .swiper-slide img { width: 89px; height: 78px; } } #fast .swiper-slide p { font-size: 14px; color: #666; margin-top: 15px; -webkit-transition: all .5s ease .1s; transition: all .5s ease .1s; } @media (min-width: 768px) { #fast .swiper-slide p { font-size: 16px; } } #fast .swiper-pagination { display: block; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; } #fast .swiper-pagination span { display: inline-block; width: 8px; height: 8px; background: #000000; background: rgba(0, 0, 0, 0.3); border-radius: 50%; margin: 0 6px; } #fast .swiper-pagination span.swiper-visible-switch { background: #ed4747; background: rgba(237, 71, 71, 0.5); } #fast .swiper-pagination span.swiper-active-switch { background: #ed4747; } #fast .arrow { cursor: pointer; position: absolute; top: 50%; margin-top: -18px; display: inline-block; width: 20px; height: 35px; background-repeat: no-repeat; background-position: center; } #fast .arrow.arrow-left { background-image: url("/assets/image/arrow-left.png"); left: 0; } #fast .arrow.arrow-left:hover, #fast .arrow.arrow-left:active { background-image: url("/assets/image/arrow-left-on.png"); } #fast .arrow.arrow-right { background-image: url("/assets/image/arrow-right.png"); right: 0; } #fast .arrow.arrow-right:hover, #fast .arrow.arrow-right:active { background-image: url("/assets/image/arrow-right-on.png"); } #fast .arrow.disabled { pointer-events: none; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; opacity: .8; cursor: default; } .product .row a { display: block; overflow: hidden; position: relative; -webkit-transition: all .5s ease; transition: all .5s ease; } .product .row a .img { overflow: hidden; height: calc(100vw * (206 / 375)); } @media (min-width: 768px) { .product .row a .img { height: 197px; } } @media (min-width: 992px) { .product .row a .img { height: 266px; } } @media (min-width: 1200px) { .product .row a .img { height: 328px; } } .product .row a img { -webkit-transition: all .5s ease; transition: all .5s ease; width: 100%; height: 100%; } .product .row a:hover, .product .row a:active { -webkit-box-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.2); box-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.2); } .product .row a:hover .txt:after, .product .row a:active .txt:after { width: 50px; } .product .row a:hover .con, .product .row a:active .con { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; } .product .row a:hover .con h2, .product .row a:active .con h2 { -webkit-transform: translateY(0px); transform: translateY(0px); } .product .row a:hover .con p, .product .row a:active .con p { -webkit-transform: translateY(0px); transform: translateY(0px); } .product .con { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #ed4747; background: rgba(237, 71, 71, 0.85); padding: 12px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; -webkit-transition: all .5s ease; transition: all .5s ease; color: #fff; } @media (min-width: 768px) { .product .con { padding: 15px; } } @media (min-width: 1200px) { .product .con { padding: 30px 20px; } } .product .con h2 { padding-bottom: 5px; font-size: 20px; -webkit-transition: all .5s ease; transition: all .5s ease; -webkit-transform: translateY(15px); transform: translateY(15px); font-size: 16px; } @media (min-width: 1200px) { .product .con h2 { font-size: 20px; } } .product .con p { margin-top: 10px; line-height: 1.4; -webkit-transition: all .5s ease; transition: all .5s ease; -webkit-transform: translateY(10px); transform: translateY(10px); font-size: 12px; } @media (min-width: 768px) { .product .con p { line-height: 2; } } @media (min-width: 1200px) { .product .con p { font-size: 14px; } } .product .row { padding: 0 15px; } @media (min-width: 768px) { .product .row { padding: 0; } } .product .row > div { padding: 0; padding-bottom: 15px; } .product .row > div:nth-child(odd) { padding-right: 7.5px; } .product .row > div:nth-child(even) { padding-left: 7.5px; } @media (min-width: 768px) { .product .row > div { padding-left: 15px; padding-right: 15px; padding-bottom: 0; } .product .row > div:nth-child(odd) { padding-right: 15px; } .product .row > div:nth-child(even) { padding-left: 15px; } } .product .txt { position: absolute; bottom: 0; left: 0; right: 0; padding: 15px; font-size: 14px; color: #fff; -webkit-box-shadow: inset 0px -38px 22px 0px rgba(0, 0, 0, 0.3); box-shadow: inset 0px -38px 22px 0px rgba(0, 0, 0, 0.3); } .product .txt p { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .product .txt:after { content: ""; display: block; width: 30px; height: 4px; background: #ed4747; margin-top: 4px; -webkit-transition: all .5s ease; transition: all .5s ease; } .product .more { display: block; width: 200px; height: 42px; line-height: 42px; border: 1px solid #bfbfbf; font-size: 15px; color: #666; text-align: center; margin: 10px auto 20px; position: relative; overflow: hidden; } @media (min-width: 768px) { .product .more { margin: 50px auto 20px; font-size: 20px; height: 48px; line-height: 48px; } } .product .more:after { content: ''; position: absolute; z-index: -1; -webkit-transition: width 0.3s, opacity 0.3s; transition: width 0.3s, opacity 0.3s; width: 0; height: 530px; top: 50%; left: 50%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; background: #ed4747; -webkit-transform: translate3d(-50%, -50%, 0) rotate(45deg); transform: translate3d(-50%, -50%, 0) rotate(45deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .product .more:hover, .product .more:active { color: #fff; border-color: #ed4747; } .product .more:hover:after, .product .more:active:after { width: 100%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; } .service .left { margin-bottom: 15px; position: relative; } @media (min-width: 768px) { .service .left { width: 30%; margin-bottom: 25px; } } .service .left .img { overflow: hidden; position: relative; } .service .left .img img { width: 100%; -webkit-transition: all .5s ease; transition: all .5s ease; } .service .left .img:hover img, .service .left .img:active img { -webkit-transform: scale(1.05); transform: scale(1.05); } .service .left .img:after { content: ""; left: 0; right: 0; top: 0; bottom: 0; background: #000000; background: rgba(0, 0, 0, 0.3); position: absolute; } .service .left .txt { position: absolute; z-index: 2; bottom: 10%; color: #fff; text-align: center; padding: 0 15%; left: 15px; right: 15px; } .service .left .txt h2 { position: relative; margin-bottom: 30px; font-size: 20px; } @media (min-width: 768px) { .service .left .txt h2 { font-size: 24px; margin-bottom: 40px; } } .service .left .txt h2:after { content: ""; display: inline-block; width: 30px; height: 2px; background: #fff; position: absolute; bottom: -16px; left: 50%; margin-left: -15px; } .service .left .txt p { font-size: 14px; margin-bottom: 20px; line-height: 1.5; width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; } @media (min-width: 768px) { .service .left .txt p { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; margin-bottom: 30px; } } .service .left .txt a { display: inline-block; width: 140px; height: 40px; line-height: 40px; font-size: 14px; border-radius: 2px; background: #ed4747; color: #fff; overflow: hidden; position: relative; -webkit-transition: all .5s ease; transition: all .5s ease; } .service .left .txt a:hover, .service .left .txt a:active { -webkit-transform: scale(0.95); transform: scale(0.95); } @media (min-width: 768px) { .service .right { width: 70%; } } .service .right .row { padding: 0 15px; } @media (min-width: 768px) { .service .right .row { padding: 0; } } .service .right .row > div { padding: 0; padding-bottom: 15px; margin-bottom: 5px; } .service .right .row > div:nth-child(odd) { padding-right: 7.5px; } .service .right .row > div:nth-child(even) { padding-left: 7.5px; } @media (min-width: 768px) { .service .right .row > div { padding-left: 15px; padding-right: 15px; padding-bottom: 0; margin-bottom: 25px; } .service .right .row > div:nth-child(odd) { padding-right: 15px; } .service .right .row > div:nth-child(even) { padding-left: 15px; } } .service .right .img { overflow: hidden; } .service .right a { overflow: hidden; height: calc(100vw * (123px / 375)); } @media (min-height: 768px) { .service .right a { height: 108px; } } @media (min-height: 992px) { .service .right a { height: 146px; } } @media (min-height: 1200px) { .service .right a { height: 182px; } } .service .right a img { width: 100%; height: 100%; -webkit-transition: all .5s ease; transition: all .5s ease; } .service .right a:hover img, .service .right a:active img { -webkit-transform: scale(1.05); transform: scale(1.05); } .service .right .txt h2 { width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; font-size: 15px; margin-top: 10px; } .service .right .txt h2 a { color: #333; } .service .right .txt h2 a:hover, .service .right .txt h2 a:active { color: #ed4747; } @media (min-width: 768px) { .service .right .txt h2 { font-size: 18px; margin-top: 15px; } } .service .right .txt p { font-size: 12px; color: #666; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; height: 32px; margin-top: 6px; } @media (min-width: 768px) { .service .right .txt p { font-size: 14px; margin-top: 10px; height: 38px; } } .ad-ent { position: relative; margin-top: 20px; width: 100%; height: 300px; text-align: center; } @media (min-width: 768px) { .ad-ent { height: 450px; margin-top: 50px; background-image: url("/assets/image/back-2.jpg"); background-attachment: fixed; background-position: center; background-size: cover; } } @media (min-width: 1200px) { .ad-ent { height: 600px; margin-top: 70px; } } .ad-ent:after { content: ""; display: inline-block; vertical-align: middle; height: 100%; } .ad-ent .txt { color: #fff; text-align: center; overflow: hidden; padding: 0 15px; display: inline-block; vertical-align: middle; } .ad-ent .txt h2 { font-size: 32px; } @media (min-width: 768px) { .ad-ent .txt h2 { font-size: 44px; } } @media (min-width: 1200px) { .ad-ent .txt h2 { font-size: 54px; } } .ad-ent .txt p { font-size: 18px; margin-top: 50px; } @media (min-width: 768px) { .ad-ent .txt p { font-size: 32px; margin-top: 100px; } } @media (min-width: 1200px) { .ad-ent .txt p { font-size: 42px; margin-top: 150px; } } .ad-ent:after { content: ""; display: inline-block; vertical-align: middle; height: 100%; } @media (max-width: 767px) { .ad-ent:before { content: ''; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; background: url("/assets/image/back-22.jpg") center no-repeat; background-size: cover; } } .ad-num { background: #f9f9f9; padding: 40px 0; } @media (min-width: 768px) { .ad-num { padding: 20px 0; } } @media (min-width: 1200px) { .ad-num { padding: 40px 0; } } .ad-num .row > div { text-align: center; } .ad-num .row > div p { font-family: "trump_gothic_east_bold"; color: #333; font-size: 30px; } @media (min-width: 768px) { .ad-num .row > div p { font-size: 48px; } } @media (min-width: 1200px) { .ad-num .row > div p { font-size: 60px; } } .ad-num .row > div span { color: #666; font-size: 16px; } .info-box { padding-top: 50px; padding-bottom: 50px; } @media (min-width: 768px) { .info-box { padding-top: 80px; padding-bottom: 80px; } } .news .tabs { font-size: 0; margin-bottom: 20px; } @media (min-width: 768px) { .news .tabs { margin-bottom: 30px; } } .news .tabs span { display: inline-block; height: 40px; line-height: 40px; font-size: 15px; color: #ed4747; border: 1px solid #ed4747; width: 22%; text-align: center; cursor: pointer; -webkit-transition: all .5s ease; transition: all .5s ease; } @media (min-width: 768px) { .news .tabs span { height: 44px; line-height: 44px; font-size: 18px; } } @media (min-width: 1200px) { .news .tabs span { height: 50px; line-height: 50px; font-size: 20px; } } .news .tabs span.cur, .news .tabs span:hover { background: #ed4747; color: #fff; } .news .tabs span ~ span { margin-left: 4%; } .news .tab-con { height: calc(100vw * (320 / 375)) !important; } @media (min-width: 768px) { .news .tab-con { height: 400px !important; } } @media (min-width: 1200px) { .news .tab-con { height: 596px !important; } } .news .tab-con .swiper-wrapper { height: 320px !important; } @media (min-width: 768px) { .news .tab-con .swiper-wrapper { height: 400px !important; } } @media (min-width: 1200px) { .news .tab-con .swiper-wrapper { height: 596px !important; } } .news .tab-con .img { display: block; overflow: hidden; } .news .tab-con .img img { width: 100%; -webkit-filter: none; filter: none; -webkit-transition: all .5s ease; transition: all .5s ease; height: calc(100vw * (230 / 375)); } @media (min-width: 768px) { .news .tab-con .img img { height: 320px; } } @media (min-width: 992px) { .news .tab-con .img img { height: 410px; } } @media (min-width: 1200px) { .news .tab-con .img img { height: 500px; } } .news .tab-con .img:hover img, .news .tab-con .img:active img { -webkit-transform: scale(1.05); transform: scale(1.05); } .news .tab-con .txt { position: relative; } .news .tab-con .txt .left { margin-right: 140px; } .news .tab-con .txt .left h2 { color: #333; font-size: 15px; margin-top: 18px; } @media (min-width: 768px) { .news .tab-con .txt .left h2 { font-size: 24px; } } .news .tab-con .txt .left p { color: #666; font-size: 12px; margin-top: 6px; width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; } @media (min-width: 768px) { .news .tab-con .txt .left p { font-size: 16px; margin-top: 10px; } } .news .tab-con .txt .right { position: absolute; right: 0; top: 0; } @media (min-width: 768px) { .news .tab-con .txt .right { top: 0px; } } .news .tab-con .txt .right a { display: inline-block; width: 140px; height: 36px; line-height: 36px; border: 1px solid #e0e0e0; color: #666; text-align: center; font-size: 14px; position: relative; overflow: hidden; } @media (min-width: 768px) { .news .tab-con .txt .right a { height: 40px; line-height: 40px; font-size: 16px; } } .news .tab-con .txt .right a:after { content: ''; position: absolute; z-index: -1; -webkit-transition: width 0.3s, opacity 0.3s; transition: width 0.3s, opacity 0.3s; width: 0; height: 530px; top: 50%; left: 50%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; background: #ed4747; -webkit-transform: translate3d(-50%, -50%, 0) rotate(45deg); transform: translate3d(-50%, -50%, 0) rotate(45deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .news .tab-con .txt .right a:hover, .news .tab-con .txt .right a:active { color: #fff; border-color: #ed4747; } .news .tab-con .txt .right a:hover:after, .news .tab-con .txt .right a:active:after { width: 100%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; } .media-all h2 { font-size: 20px; color: #333; text-align: left; margin-top: 40px; } @media (min-width: 768px) { .media-all h2 { margin-top: 0; font-size: 24px; text-align: right; } } @media (min-width: 1200px) { .media-all h2 { font-size: 30px; } } .media-all h2 span { font-size: 12px; } @media (min-width: 768px) { .media-all h2 span { font-size: 14px; } } @media (min-width: 1200px) { .media-all h2 span { font-size: 18px; } } .media-all .icons { padding: 0 30px; } .media-all .icons:after { content: ''; display: block; clear: both; } @media (min-width: 768px) { .media-all .icons { padding: 80px 0; } } .media-all .icons li { float: left; width: 50%; text-align: center; margin-top: 30px; position: relative; } @media (min-width: 768px) { .media-all .icons li { padding-left: 20%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 1000; perspective: 1000; } } .media-all .icons li a { display: block; position: relative; } .media-all .icons li .img { position: relative; z-index: 1; width: 90px; margin: 0 auto; display: block; border-radius: 50%; border: 1px solid #e0e0e0; -webkit-transition: all .5s ease; transition: all .5s ease; -webkit-transform: rotateY(0); transform: rotateY(0); background: #fff; } @media (min-width: 768px) { .media-all .icons li .img { width: 100%; } } .media-all .icons li .img img { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; width: 100%; -webkit-transition: all .5s ease; transition: all .5s ease; } .media-all .icons li .img:hover, .media-all .icons li .img:active { -webkit-box-shadow: inset 0 0 11px 5px rgba(153, 153, 153, 0.2); box-shadow: inset 0 0 11px 5px rgba(153, 153, 153, 0.2); } .media-all .icons li .img:hover > img, .media-all .icons li .img:active > img { -webkit-transform: scale(0.9); transform: scale(0.9); } .media-all .icons li p { color: #333; margin-top: 15px; font-size: 16px; } .media-all .icons li.wx-box { -webkit-transition: all .5s ease; transition: all .5s ease; } .media-all .icons li.wx-box:hover .img, .media-all .icons li.wx-box:active .img { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); z-index: 0; } .media-all .icons li.wx-box:hover .wxQrcode, .media-all .icons li.wx-box:active .wxQrcode { -webkit-transform: rotateY(0) scale(1) translateZ(2px); transform: rotateY(0) scale(1) translateZ(2px); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; z-index: 1; } .media-all .icons li .wxQrcode { position: absolute; z-index: 0; top: 0; left: 50%; margin-left: -45px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateY(-180deg) scale(0.6) translateZ(1px); transform: rotateY(-180deg) scale(0.6) translateZ(1px); -webkit-transition: all .5s ease; transition: all .5s ease; } @media (min-width: 768px) { .media-all .icons li .wxQrcode { left: 0; margin-left: 0; } } .media-all .icons li .wxQrcode img { border: 1px solid #e0e0e0; width: 90px; } @media (min-width: 768px) { .media-all .icons li .wxQrcode img { width: 150px; } } .map-box { padding: 90px 0; width: 100%; position: relative; text-align: center; position: relative; } @media (min-width: 768px) { .map-box { background-image: url("/assets/image/back-1.jpg"); background-attachment: fixed; background-position: center; background-size: cover; } } .map-box:before { content: ''; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; background: url("/assets/image/back-1.jpg") center no-repeat; background-size: cover; } .map-box:after { display: block; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #254369; background: rgba(37, 67, 105, 0.6); z-index: 1; } .map-box .container { z-index: 2; position: relative; max-width: 1100px; } .map-box .container:after { content: ''; display: block; clear: both; } .map-box .container .img { float: left; width: 100%; overflow: hidden; } @media (min-width: 768px) { .map-box .container .img { height: 295px; width: 35%; } } @media (min-width: 992px) { .map-box .container .img { height: 385px; } } @media (min-width: 1200px) { .map-box .container .img { height: 440px; } } .map-box .container .img img { width: 100%; -webkit-transition: all .5s ease; transition: all .5s ease; } .map-box .container .img:hover img { -webkit-transform: scale(1.05); transform: scale(1.05); } .map-box .container .map { float: left; width: 100%; height: 300px; background: url("/assets/image/mapbg.jpg") center no-repeat; background-size: 100%; position: relative; } @media (min-width: 768px) { .map-box .container .map { height: 295px; width: 65%; } } @media (min-width: 992px) { .map-box .container .map { height: 385px; } } @media (min-width: 1200px) { .map-box .container .map { height: 440px; } } .map-box .container .map #map { width: 100%; height: 100%; position: relative; } .map-box .container .map .tip { font-size: 18px; color: #333; position: absolute; z-index: 1; bottom: 20px; right: 20px; } @media (min-width: 768px) { .map-box .container .map .tip { font-size: 20px; } } @media (min-width: 992px) { .map-box .container .map .tip { font-size: 20px; } } @media (min-width: 1200px) { .map-box .container .map .tip { font-size: 26px; } } .map-box { padding: 0; height: 200px; } .map-box .container { height: 100%; font-size: 0; } .map-box .container:after { content: ""; display: inline-block; vertical-align: middle; height: 100%; } .map-box h2.title { display: inline-block; vertical-align: middle; color: #fff; font-size: 26px; } @media (min-width: 768px) { .map-box h2.title { font-size: 42px; } } @media (min-width: 1200px) { .map-box h2.title { font-size: 60px; } } @media (min-width: 768px) { .map-box { height: 400px; } } @media (min-width: 1200px) { .map-box { height: 540px; } }