.banner .bg { background-image: url("/images/economy/bg_head.jpg"); } .banner .bg-fireworks { position: absolute; background-size: cover; background-position: right; width: 100%; height: 100%; transition: all .5s; opacity: 1; } .banner .bg-fireworks img { position: absolute; display: block; height: 100%; left: 50%; transform: translateX(-50%); } .main { width: 100%; min-width: 320px; } .space { position: relative; width: 100%; padding-bottom: 55.8%; } .space .space-bg-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .space .space-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; transition: all 1s; opacity: 0; } .space .space-bg.active { opacity: 1; } .space .space-mask { position: absolute; left: 50%; top: 0; background: rgba(0, 0, 0, 0.5); width: 50%; height: 100%; } .space .space-mask .space-mask-title { padding-left: 17.6%; padding-top: 19.6%; } .space .space-mask .space-mask-title .space-mask-title-h { font-weight: bold; margin-bottom: 2.5%; line-height: 1; color: #ffffff; white-space: pre; } .space .space-mask .space-mask-title .space-mask-title-p { font-size: 14px; line-height: 24px; color: #8e8e8f; } .space .space-mask .space-mask-list { padding-top: 8%; padding-left: 16.25%; } .space .space-mask .space-mask-list .space-mask-list-item { display: flex; margin-bottom: 80px; } .space .space-mask .space-mask-list .space-mask-list-item .city { display: flex; justify-content: center; align-items: center; width: 150px; height: 150px; border-radius: 50%; background: rgba(61, 61, 61, 0.8); font-weight: bold; color: #ffffff; cursor: pointer; transition: all .5s; } .space .space-mask .space-mask-list .space-mask-list-item .city:hover { opacity: 0.8; } .space .space-mask .space-mask-list .space-mask-list-item .city-active { background: #d90400; } .space .space-mask .space-mask-list .space-mask-list-item .city-text { display: none; align-self: center; padding-left: 28px; line-height: 1.5; color: #ffffff; transition: all .5s; } .space .space-mask .space-mask-list .space-mask-list-item .city-text:hover { opacity: 0.7; } .space .space-mask .space-mask-list .space-mask-list-item .city-text:hover .detail { opacity: 1; } .space .space-mask .space-mask-list .space-mask-list-item .city-text .link-wrap { display: flex; margin-top: 10px; align-items: center; color: #fff; } .space .space-mask .space-mask-list .space-mask-list-item .city-text .link-wrap .more-icon { transition: all .5s; border: 1px solid #fff; border-radius: 50%; width: 22px; height: 22px; line-height: 20px; text-align: center; margin-right: 10px; } .space .space-mask .space-mask-list .space-mask-list-item .city-text .link-wrap .more-icon i { font-size: 14px; display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; } .space .space-mask .space-mask-list .space-mask-list-item .city-text .link-wrap:hover .more-icon { border-color: #d90600; background: #d90600; } .space .space-mask .space-mask-list .space-mask-list-item .detail { display: inline-block; color: #fff; position: relative; margin-top: 10px; } .space .space-mask .space-mask-list .space-mask-list-item .detail::after { content: ''; position: absolute; left: 50%; width: 100%; bottom: 0; height: 1px; background: #fff; transform: translateX(-50%); transition: all 1s; } .space .space-mask .space-mask-list .space-mask-list-item .detail:hover::after { width: 50%; } .space .space-mask .space-mask-list .space-mask-list-item .city-text-active { display: block; } .advantages { position: relative; width: 100%; padding-bottom: 50.8%; overflow: hidden; } .advantages .advantages-pic { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .advantages .advantages-text { position: absolute; left: 12.5%; top: 21.75%; color: #ffffff; } .advantages .advantages-text h1 { font-weight: bold; line-height: 1; } .advantages .advantages-text h2 { margin: .2em 0 10px; line-height: 1; } .advantages .advantages-text h4 { font-weight: bold; margin: 20px 0 1em; line-height: 1; } .advantages .advantages-text p { line-height: 1.7; color: #939899; } .advantages .advantages-select { position: absolute; top: 0; left: 0; width: 52px; height: 100%; z-index: 10; transition: all 1s; } .advantages .advantages-select .item { position: absolute; left: 0; white-space: normal; color: #fff; cursor: pointer; transform: translateY(-50%); } .advantages .advantages-select .item .dot { position: absolute; width: 52px; height: 52px; left: 0; top: 50%; transform: translateY(-50%); background: #2e3030; border-radius: 50%; } .advantages .advantages-select .item:nth-child(1) { top: 30%; left: 30px; } .advantages .advantages-select .item:nth-child(2) { top: 50%; left: -26px; } .advantages .advantages-select .item:nth-child(3) { top: 70%; left: 30px; } .advantages .advantages-select .item.select .dot { background: #d90400; } .advantages .advantages-select .item.select .item-title { font-size: 32px; color: #fff; top: -60px; } .advantages .advantages-select .item.select .item-desc { max-height: 200px; opacity: 1; } .advantages .advantages-select .item.select .line { width: 756px; } .advantages .advantages-select .item-title { position: absolute; white-space: nowrap; left: 100px; top: -20px; color: rgba(255, 255, 255, 0.3); transition: top 1s; } .advantages .advantages-select .item-title:hover { color: #fff; opacity: 0.8; transition: 1s; } .advantages .advantages-select .item-desc { position: absolute; width: 280px; left: 100px; top: 26px; color: rgba(255, 255, 255, 0.3); max-height: 0; overflow: hidden; transition: all 1s; } .advantages .advantages-select .item-desc:hover { color: #fff; opacity: 0.7; transition: 1s; } .advantages .advantages-select .line { position: absolute; top: 50%; left: 100%; height: 2px; background: rgba(255, 255, 255, 0.2); transform: translateY(-50%); width: 0; transition: all .2s; } .advantages .advantages-right { position: absolute; width: 80%; right: -37%; top: 50%; transform: translateY(-50%); } .advantages .advantages-right.show .img-box { width: 100%; height: 100%; top: 0; left: 0; } .advantages .advantages-right.show .advantages-select { opacity: 0; } .advantages .advantages-right .img-box { position: relative; width: 100%; height: 100%; width: 50%; height: 50%; top: 25%; left: 25%; box-sizing: border-box; border-radius: 50%; overflow: hidden; transition: all 1s; display: flex; align-items: center; justify-content: center; } .advantages .advantages-right .img-box img { position: absolute; min-width: 100%; min-height: 100%; } .advantages .advantages-right .wrap { position: relative; width: 100%; padding-bottom: 100%; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); background: #16191a; box-sizing: border-box; overflow: hidden; } .advantages .advantages-right .wrap .advantages-swiper { position: absolute; width: 100%; height: 100%; } .advantages .advantages-right .wrap .advantages-swiper .slide-wrap { width: 100%; height: 100%; } .service .service-head { margin-top: 105px; text-align: center; } .service .service-head h2 { color: #ea3d31; } .service .service-head h3 { line-height: 1; color: #333333; margin: 5px 0 40px; } .service .service-head .desc { width: 860px; max-width: 90%; min-width: 44%; margin: 0 auto; line-height: 1.7; color: #848484; margin-bottom: 20px; } .service .service-swiper { padding: 50px 0; } .service .service-swiper .swiper-slide { margin-right: 0; position: relative; width: 45%; transform: scale(0.8); transform-origin: center; } .service .service-swiper .swiper-slide .img-box { position: relative; width: 100%; padding-bottom: 56.38%; } .service .service-swiper .swiper-slide .video-wrap { position: relative; width: 100%; padding-bottom: 56.38%; } .service .service-swiper .swiper-slide .video { position: absolute; width: 100%; height: 100%; } .service .service-swiper .swiper-slide img { position: absolute; width: 100%; height: 100%; -webkit-filter: grayscale(100%); filter: grayscale(100%); } .service .service-swiper .swiper-slide .play-btn { width: 60px; height: 60px; background-image: url("/images/play.png"); background-size: 100%; background-repeat: no-repeat; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); cursor: pointer; z-index: 4; } .service .service-swiper .swiper-slide .slide-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #ffffff; opacity: 0; white-space: nowrap; } .service .service-swiper .swiper-slide .mask { top: 0; left: 0; position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); } .service .service-swiper .swiper-slide-active, .service .service-swiper .swiper-slide-duplicate-active { height: 100%; transform: scale(1); } .service .service-swiper .swiper-slide-active img, .service .service-swiper .swiper-slide-active .video, .service .service-swiper .swiper-slide-duplicate-active img, .service .service-swiper .swiper-slide-duplicate-active .video { -webkit-filter: grayscale(0); filter: grayscale(0); } .service .service-swiper .swiper-slide-active .slide-text, .service .service-swiper .swiper-slide-duplicate-active .slide-text { opacity: 1; } .service .service-swiper .page-btn { position: absolute; width: 5%; top: 50%; transform: translateY(-50%); z-index: 999; cursor: pointer; } .service .service-swiper .page-btn.prev-btn { left: 7%; } .service .service-swiper .page-btn.next-btn { right: 7%; } .service .service-swiper .page-btn img { width: 100%; } .service .service-bottom { line-height: 1; margin-bottom: 145px; display: flex; justify-content: center; flex-wrap: wrap; } .service .service-bottom .item-text { display: inline-block; padding: 0 15px; border-right: 2px solid #d3d3d3; color: #333333; margin-bottom: 10px; } .service .service-bottom .item-text:last-child { border: 0; } @-webkit-keyframes fireworks { 0% { background-image: url("/images/service/fireworks/2_00000.jpg"); } 1.5% { background-image: url("/images/service/fireworks/2_00001.jpg"); } 3% { background-image: url("/images/service/fireworks/2_00002.jpg"); } 4.5% { background-image: url("/images/service/fireworks/2_00003.jpg"); } 6% { background-image: url("/images/service/fireworks/2_00004.jpg"); } 7.5% { background-image: url("/images/service/fireworks/2_00005.jpg"); } 9% { background-image: url("/images/service/fireworks/2_00006.jpg"); } 10.5% { background-image: url("/images/service/fireworks/2_00007.jpg"); } 12% { background-image: url("/images/service/fireworks/2_00008.jpg"); } 13.5% { background-image: url("/images/service/fireworks/2_00009.jpg"); } 15% { background-image: url("/images/service/fireworks/2_00010.jpg"); } 16.5% { background-image: url("/images/service/fireworks/2_00011.jpg"); } 18% { background-image: url("/images/service/fireworks/2_00012.jpg"); } 19.5% { background-image: url("/images/service/fireworks/2_00013.jpg"); } 21% { background-image: url("/images/service/fireworks/2_00014.jpg"); } 22.5% { background-image: url("/images/service/fireworks/2_00015.jpg"); } 24% { background-image: url("/images/service/fireworks/2_00016.jpg"); } 25.5% { background-image: url("/images/service/fireworks/2_00017.jpg"); } 27% { background-image: url("/images/service/fireworks/2_00018.jpg"); } 28.5% { background-image: url("/images/service/fireworks/2_00019.jpg"); } 30% { background-image: url("/images/service/fireworks/2_00020.jpg"); } 31.5% { background-image: url("/images/service/fireworks/2_00021.jpg"); } 33% { background-image: url("/images/service/fireworks/2_00022.jpg"); } 34.5% { background-image: url("/images/service/fireworks/2_00023.jpg"); } 36% { background-image: url("/images/service/fireworks/2_00024.jpg"); } 37.5% { background-image: url("/images/service/fireworks/2_00025.jpg"); } 39% { background-image: url("/images/service/fireworks/2_00026.jpg"); } 40.5% { background-image: url("/images/service/fireworks/2_00027.jpg"); } 42% { background-image: url("/images/service/fireworks/2_00028.jpg"); } 43.5% { background-image: url("/images/service/fireworks/2_00029.jpg"); } 45% { background-image: url("/images/service/fireworks/2_00030.jpg"); } 46.5% { background-image: url("/images/service/fireworks/2_00031.jpg"); } 48% { background-image: url("/images/service/fireworks/2_00032.jpg"); } 49.5% { background-image: url("/images/service/fireworks/2_00033.jpg"); } 51% { background-image: url("/images/service/fireworks/2_00034.jpg"); } 52.5% { background-image: url("/images/service/fireworks/2_00035.jpg"); } 54% { background-image: url("/images/service/fireworks/2_00036.jpg"); } 55.5% { background-image: url("/images/service/fireworks/2_00037.jpg"); } 57% { background-image: url("/images/service/fireworks/2_00038.jpg"); } 58.5% { background-image: url("/images/service/fireworks/2_00039.jpg"); } 60% { background-image: url("/images/service/fireworks/2_00040.jpg"); } 61.5% { background-image: url("/images/service/fireworks/2_00041.jpg"); } 63% { background-image: url("/images/service/fireworks/2_00042.jpg"); } 64.5% { background-image: url("/images/service/fireworks/2_00043.jpg"); } 66% { background-image: url("/images/service/fireworks/2_00044.jpg"); } 67.5% { background-image: url("/images/service/fireworks/2_00045.jpg"); } 69% { background-image: url("/images/service/fireworks/2_00046.jpg"); } 70.5% { background-image: url("/images/service/fireworks/2_00047.jpg"); } 72% { background-image: url("/images/service/fireworks/2_00048.jpg"); } 73.5% { background-image: url("/images/service/fireworks/2_00049.jpg"); } 75% { background-image: url("/images/service/fireworks/2_00050.jpg"); } 76.5% { background-image: url("/images/service/fireworks/2_00051.jpg"); } 78% { background-image: url("/images/service/fireworks/2_00052.jpg"); } 79.5% { background-image: url("/images/service/fireworks/2_00053.jpg"); } 81% { background-image: url("/images/service/fireworks/2_00054.jpg"); } 82.5% { background-image: url("/images/service/fireworks/2_00055.jpg"); } 84% { background-image: url("/images/service/fireworks/2_00056.jpg"); } 85.5% { background-image: url("/images/service/fireworks/2_00057.jpg"); } 87% { background-image: url("/images/service/fireworks/2_00058.jpg"); } 88.5% { background-image: url("/images/service/fireworks/2_00059.jpg"); } 90% { background-image: url("/images/service/fireworks/2_00060.jpg"); } 91.5% { background-image: url("/images/service/fireworks/2_00061.jpg"); } 93% { background-image: url("/images/service/fireworks/2_00062.jpg"); } 94.5% { background-image: url("/images/service/fireworks/2_00063.jpg"); } 96% { background-image: url("/images/service/fireworks/2_00064.jpg"); } 97.5% { background-image: url("/images/service/fireworks/2_00065.jpg"); } 99% { background-image: url("/images/service/fireworks/2_00066.jpg"); } 100.5% { background-image: url("/images/service/fireworks/2_00067.jpg"); } 100% { background-image: url("/images/service/fireworks/2_00000.jpg"); } } @keyframes fireworks { 0% { background-image: url("/images/service/fireworks/2_00000.jpg"); } 1.5% { background-image: url("/images/service/fireworks/2_00001.jpg"); } 3% { background-image: url("/images/service/fireworks/2_00002.jpg"); } 4.5% { background-image: url("/images/service/fireworks/2_00003.jpg"); } 6% { background-image: url("/images/service/fireworks/2_00004.jpg"); } 7.5% { background-image: url("/images/service/fireworks/2_00005.jpg"); } 9% { background-image: url("/images/service/fireworks/2_00006.jpg"); } 10.5% { background-image: url("/images/service/fireworks/2_00007.jpg"); } 12% { background-image: url("/images/service/fireworks/2_00008.jpg"); } 13.5% { background-image: url("/images/service/fireworks/2_00009.jpg"); } 15% { background-image: url("/images/service/fireworks/2_00010.jpg"); } 16.5% { background-image: url("/images/service/fireworks/2_00011.jpg"); } 18% { background-image: url("/images/service/fireworks/2_00012.jpg"); } 19.5% { background-image: url("/images/service/fireworks/2_00013.jpg"); } 21% { background-image: url("/images/service/fireworks/2_00014.jpg"); } 22.5% { background-image: url("/images/service/fireworks/2_00015.jpg"); } 24% { background-image: url("/images/service/fireworks/2_00016.jpg"); } 25.5% { background-image: url("/images/service/fireworks/2_00017.jpg"); } 27% { background-image: url("/images/service/fireworks/2_00018.jpg"); } 28.5% { background-image: url("/images/service/fireworks/2_00019.jpg"); } 30% { background-image: url("/images/service/fireworks/2_00020.jpg"); } 31.5% { background-image: url("/images/service/fireworks/2_00021.jpg"); } 33% { background-image: url("/images/service/fireworks/2_00022.jpg"); } 34.5% { background-image: url("/images/service/fireworks/2_00023.jpg"); } 36% { background-image: url("/images/service/fireworks/2_00024.jpg"); } 37.5% { background-image: url("/images/service/fireworks/2_00025.jpg"); } 39% { background-image: url("/images/service/fireworks/2_00026.jpg"); } 40.5% { background-image: url("/images/service/fireworks/2_00027.jpg"); } 42% { background-image: url("/images/service/fireworks/2_00028.jpg"); } 43.5% { background-image: url("/images/service/fireworks/2_00029.jpg"); } 45% { background-image: url("/images/service/fireworks/2_00030.jpg"); } 46.5% { background-image: url("/images/service/fireworks/2_00031.jpg"); } 48% { background-image: url("/images/service/fireworks/2_00032.jpg"); } 49.5% { background-image: url("/images/service/fireworks/2_00033.jpg"); } 51% { background-image: url("/images/service/fireworks/2_00034.jpg"); } 52.5% { background-image: url("/images/service/fireworks/2_00035.jpg"); } 54% { background-image: url("/images/service/fireworks/2_00036.jpg"); } 55.5% { background-image: url("/images/service/fireworks/2_00037.jpg"); } 57% { background-image: url("/images/service/fireworks/2_00038.jpg"); } 58.5% { background-image: url("/images/service/fireworks/2_00039.jpg"); } 60% { background-image: url("/images/service/fireworks/2_00040.jpg"); } 61.5% { background-image: url("/images/service/fireworks/2_00041.jpg"); } 63% { background-image: url("/images/service/fireworks/2_00042.jpg"); } 64.5% { background-image: url("/images/service/fireworks/2_00043.jpg"); } 66% { background-image: url("/images/service/fireworks/2_00044.jpg"); } 67.5% { background-image: url("/images/service/fireworks/2_00045.jpg"); } 69% { background-image: url("/images/service/fireworks/2_00046.jpg"); } 70.5% { background-image: url("/images/service/fireworks/2_00047.jpg"); } 72% { background-image: url("/images/service/fireworks/2_00048.jpg"); } 73.5% { background-image: url("/images/service/fireworks/2_00049.jpg"); } 75% { background-image: url("/images/service/fireworks/2_00050.jpg"); } 76.5% { background-image: url("/images/service/fireworks/2_00051.jpg"); } 78% { background-image: url("/images/service/fireworks/2_00052.jpg"); } 79.5% { background-image: url("/images/service/fireworks/2_00053.jpg"); } 81% { background-image: url("/images/service/fireworks/2_00054.jpg"); } 82.5% { background-image: url("/images/service/fireworks/2_00055.jpg"); } 84% { background-image: url("/images/service/fireworks/2_00056.jpg"); } 85.5% { background-image: url("/images/service/fireworks/2_00057.jpg"); } 87% { background-image: url("/images/service/fireworks/2_00058.jpg"); } 88.5% { background-image: url("/images/service/fireworks/2_00059.jpg"); } 90% { background-image: url("/images/service/fireworks/2_00060.jpg"); } 91.5% { background-image: url("/images/service/fireworks/2_00061.jpg"); } 93% { background-image: url("/images/service/fireworks/2_00062.jpg"); } 94.5% { background-image: url("/images/service/fireworks/2_00063.jpg"); } 96% { background-image: url("/images/service/fireworks/2_00064.jpg"); } 97.5% { background-image: url("/images/service/fireworks/2_00065.jpg"); } 99% { background-image: url("/images/service/fireworks/2_00066.jpg"); } 100.5% { background-image: url("/images/service/fireworks/2_00067.jpg"); } 100% { background-image: url("/images/service/fireworks/2_00000.jpg"); } } /* .footer .footer-wrap { max-width: 80%; } */ @media all and (min-width: 2000px) { .advantages .advantages-select .item:nth-child(1) { left: 52px; } .advantages .advantages-select .item:nth-child(3) { left: 52px; } } @media all and (min-width: 2600px) { .space .space-mask .space-mask-title .space-mask-title-p { font-size: 18px; line-height: 32px; } .space .space-mask .space-mask-list .space-mask-list-item { margin-bottom: 20px; } .advantages .advantages-select .item .item-title { font-size: 40px; line-height: 40px; } .advantages .advantages-select .item.select .item-title { font-size: 42px; line-height: 42px; } } @media all and (min-width: 3840px) { .space .space-mask .space-mask-title .space-mask-title-p { font-size: 24px; line-height: 44px; } .space .space-mask .space-mask-list .space-mask-list-item { margin-bottom: 30px; } .space .space-mask .space-mask-list .space-mask-list-item .city { width: 200px; height: 200px; } .advantages .advantages-select .item .dot { width: 72px; height: 72px; } .advantages .advantages-select .item .item-title { font-size: 50px; line-height: 50px; } .advantages .advantages-select .item.select .item-title { font-size: 52px; line-height: 52px; } .advantages .advantages-select .item:first-child, .advantages .advantages-select .item:last-child { left: 95px; } } .video-dialog { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.7); z-index: 999; display: none; } .video-dialog .close-btn { width: 50px; height: 50px; line-height: 50px; position: absolute; right: 0; top: 0; background: rgba(0, 0, 0, 0.7); color: #fff; text-align: center; z-index: 10; cursor: pointer; } .video-dialog .close-btn i { font-size: 24px; } .video-dialog .video { width: 100%; position: absolute; left: 50%; transform: translate(-50%, -50%); top: 50%; } @media all and (max-width: 1440px) { .space .space-mask .space-mask-list .space-mask-list-item .city { width: 100px; height: 100px; } .advantages .advantages-select .point, .advantages .advantages-select .top-ball, .advantages .advantages-select .center-ball, .advantages .advantages-select .bottom-ball { width: 42px; height: 42px; } .advantages .advantages-select .top-ball::after, .advantages .advantages-select .bottom-ball::after { font-size: 18px; line-height: 42px; margin-left: 4.6rem; } .advantages .advantages-select .center-ball::before { font-size: 24px; margin-left: 4.6rem; } .advantages .advantages-select .center-ball::after { font-size: 15px; line-height: 24px; margin-left: 4.6rem; } .space .space-mask .space-mask-title .space-mask-title-p { font-size: 12px; } } @media all and (max-width: 1280px) { .space .space-mask .space-mask-title { padding-left: 10%; padding-top: 10%; } .space .space-mask .space-mask-title .space-mask-title-p { line-height: 1.2rem; } .space .space-mask .space-mask-list { padding-left: 10%; } .advantages .advantages-select .point, .advantages .advantages-select .top-ball, .advantages .advantages-select .center-ball, .advantages .advantages-select .bottom-ball { width: 42px; height: 42px; } .advantages .advantages-select .item-desc { top: 15px; } } @media all and (max-width: 1000px) { .space .space-mask .space-mask-list .space-mask-list-item .city { width: 70px; height: 70px; } .advantages .advantages-text { left: 5.5%; } .advantages .advantages-select .point, .advantages .advantages-select .top-ball, .advantages .advantages-select .center-ball, .advantages .advantages-select .bottom-ball { width: 22px; height: 22px; } .advantages .advantages-select .top-ball::after, .advantages .advantages-select .bottom-ball::after { font-size: 15px; line-height: 22px; margin-left: 3.6rem; } .advantages .advantages-select .center-ball::before { top: -110%; font-size: 20px; margin-left: 3.6rem; } .advantages .advantages-select .center-ball::after { width: 8rem; font-size: 13px; line-height: 16px; margin-left: 3.6rem; } .advantages .advantages-select .item-desc { left: 60px; } .advantages .advantages-select .item-title { left: 75px; } .advantages .advantages-select .item.select .item-title { font-size: 24px; } .advantages .advantages-select .item:nth-child(1) { left: 10px; } .advantages .advantages-select .item:nth-child(3) { left: 10px; } .service .service-bottom { margin-bottom: 60px; } } @media all and (max-width: 768px) { .video-dialog .video { width: 100%; left: 0; position: absolute; transform: translateY(-50%); top: 50%; } .space { padding-bottom: 100%; } .space .space-mask { width: 80%; left: 20%; } .space .space-mask .space-mask-title { padding-top: 10%; padding-left: 10%; } .space .space-mask .space-mask-title .space-mask-title-h { font-size: 20px; padding-right: .5em; margin-bottom: 1em; } .space .space-mask .space-mask-title .space-mask-title-p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 16px; padding-right: 5%; } .space .space-mask .space-mask-list { padding-top: 10%; padding-left: 10%; } .space .space-mask .space-mask-list .space-mask-list-item { margin-bottom: 55px; } .space .space-mask .space-mask-list .space-mask-list-item .city { width: 70px; height: 70px; font-size: 14px; } .space .space-mask .space-mask-list .space-mask-list-item .city-text { padding-left: 10px; line-height: 1.5; width:65%; } .space .space-mask .space-mask-list .space-mask-list-item .city-text .link-wrap .more-icon { width: 18px; height: 18px; line-height: 18px; margin-right: 10px; } .space .space-mask .space-mask-list .space-mask-list-item .city-text .link-wrap .more-icon i { display: block; transform: scale(0.8); transform-origin: center; } .advantages { padding-bottom: 0; background: url(/images/economy/bg-advantage.jpg) no-repeat center; background-size: cover; } .advantages .advantages-pic { display: none; } .advantages .advantages-text { position: relative; top: 0; left: 6%; padding-top: 30px; } .advantages .advantages-text h1 { display: inline-block; } .advantages .advantages-text h2 { display: inline-block; font-weight: bold; margin: 6px auto 10px; } .advantages .advantages-text h4 { margin: 10px 0; } .advantages .advantages-text p { width: 80%; } .advantages .advantages-select { position: relative; width: 100%; padding: 30px 0 0; } .advantages .advantages-select .item { position: relative; width: 100%; left: 0; top: 0; margin-bottom: 20px; transform: none; } .advantages .advantages-select .item:nth-child(1) { top: 0; left: 0; } .advantages .advantages-select .item:nth-child(2) { left: 0; top: 0; } .advantages .advantages-select .item:nth-child(3) { left: 0; top: 0; } .advantages .advantages-select .item.select .item-title { top: 0; font-size: 18px; } .advantages .advantages-select .item .item-title { position: relative; font-size: 16px; left: 0; padding-left: 30px; top: 0; line-height: 26px; padding-bottom: 20px; } .advantages .advantages-select .item .item-desc { left: 30px; width: 100%; transition: all .1s; } .advantages .advantages-select .item .dot { width: 26px; height: 26px; top: 0; transform: none; } .advantages .advantages-select .item .line { display: none; } .advantages .advantages-select .item-desc { top: 30px; } .advantages .advantages-right { position: relative; width: 90%; right: 0; top: 0; transform: translateY(0); margin: 30px 5%; } .advantages .advantages-right .wrap { width: 100%; padding-bottom: 56.25%; background: none; border-radius: 0; border: none; } .advantages .advantages-right .img-box { width: 100%; height: 100%; left: 0; top: 0; border-radius: 0; } .service .service-head { margin-top: 20px; } .service .service-head h3 { margin: 0 0 30px; } .service .service-head .desc { margin-bottom: 0; } .service .service-swiper { padding: 25px 0; } .service .service-swiper .swiper-slide .play-btn { width: 30px; height: 30px; } .service .service-bottom { margin-bottom: 30px; } .service .service-bottom .item-text { padding: 0 5px; } }