@charset "UTF-8"; /* 鏁板瓧鏂板熀寤 */ h5 { margin-bottom: 10px; } .banner .bg { background-image: url("/images/digital/banner.jpg"); } .banner .wifi-animate { position: absolute; width: 100%; height: 100%; } .banner .wifi-animate img { width: 100%; vertical-align: middle; } .section { position: relative; } .content-wrap { width: 1440px; max-width: 90%; min-width: 75%; margin: 0 auto; position: relative; } .section-keywords { background-image: url("/images/digital/keyword_bg.jpg"); background-size: cover; background-position: bottom; } .section-keywords .keywords-title { font-size: 90px; color: #ea3d31; } .section-keywords .content-wrap { overflow: hidden; padding: 9% 0 14%; } .section-keywords .keywords-list { width: 30%; float: left; padding-top: 30px; position: relative; z-index: 10; } .section-keywords .keywords-list .keywords-item { font-size: 30px; color: #888; line-height: 1; margin-top: 35px; position: relative; cursor: pointer; transition: color 1.5s; } .section-keywords .keywords-list .keywords-item:hover { color: #eb1d16; } .section-keywords .keywords-list .keywords-item::before { content: ''; position: absolute; width: 0; height: 3px; background: transparent; bottom: 0; z-index: 1; transition: width 1s; } .section-keywords .keywords-list .keywords-item.select { color: #333; font-size: 36px; font-weight: bold; padding-bottom: 39px; } .section-keywords .keywords-list .keywords-item.select::before { width: 130%; background: #ea3d31; } .section-keywords .center-img { width: 36.25%; position: absolute; left: 29.8%; padding-top: 18%; top: 0; } .section-keywords .img-box { width: 100%; padding-bottom: 100%; border: 1px solid #b8b8b8; border-radius: 50%; overflow: hidden; box-sizing: border-box; position: relative; } .section-keywords .img-box .img-wrap { position: absolute; width: 100%; height: 100%; padding: 9.5%; box-sizing: border-box; opacity: 0; transition: all .5s; } .section-keywords .img-box .img-wrap.show { opacity: 1; } .section-keywords .img-box img { width: 100%; height: 100%; border-radius: 50%; } .section-keywords .keyword-info { float: right; width: 422px; max-width: 33%; padding-top: 6.9%; } .section-keywords .keyword-info .info-item { display: none; } .section-keywords .keyword-info .info-item.show { display: block; } .section-keywords .keyword-info h5 { font-size: 26px; line-height: 1; margin-bottom: 25px; color: #333; } .section-keywords .keyword-info p { color: #666; line-height: 1.5; } .link-btn { display: inline-block; position: relative; line-height: 2.4; color: rgba(255, 255, 255, 0.8); border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 50px; text-align: center; padding: 0 52px 0 32px; box-sizing: border-box; transition: all 1s; } .link-btn:hover { color: white; border: 1px solid white; } .link-btn span { position: absolute; right: 20px; margin-left: 20px; top: 0; } .link-btn.black { color: #333; border: 1px solid #333; } .light { position: absolute; width: 100%; height: 100%; z-index: 2; -webkit-animation: light infinite 3s; animation: light infinite 3s; background-image: url(/images/digital/light.png); background-size: cover; background-position: bottom; } .section-lamp { width: 100%; padding-bottom: 55.6%; background-image: url("/images/digital/street_lamp_bg.jpg"); background-size: cover; overflow: hidden; } .section-lamp .lamp { position: absolute; width: 100%; height: 100%; background-image: url("/images/digital/street_lamp.png"); background-size: cover; background-position: bottom; z-index: 1; } .section-lamp .section-wrap { position: absolute; width: 100%; height: 100%; color: rgba(255, 255, 255, 0.8); z-index: 2; } .section-lamp .section-wrap .title-box { text-align: center; position: absolute; top: 11.8%; width: 100%; } .section-lamp .section-wrap .title { line-height: 1; color: #ea3d31; margin-bottom: 10px; } .section-lamp .section-wrap .sub-title { color: #fff; } .section-lamp .section-wrap .dot { position: absolute; width: 12px; height: 12px; background-color: #ea3d31; border-radius: 50%; } .section-lamp .section-wrap .left { position: absolute; top: 50%; left: 20.31%; } .section-lamp .section-wrap .left .text { width: 300px; line-height: 1.5; position: relative; margin-bottom: 110px; } .section-lamp .section-wrap .left .text .dot { right: -20px; top: 8px; } .section-lamp .section-wrap .left .section { overflow: hidden; } .section-lamp .section-wrap .left .section h3 { color: rgba(255, 255, 255, 0.8); line-height: 24px; } .section-lamp .section-wrap .left .section .section-text { margin-top: 18px; display: flex; flex-direction: column; } .section-lamp .section-wrap .left .section .section-text a { color: rgba(255, 255, 255, 0.8); line-height: 2; } .section-lamp .section-wrap .left .section .section-text a::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 15px; vertical-align: 2px; border-top: 1px solid rgba(255, 255, 255, 0.8); border-right: 1px solid rgba(255, 255, 255, 0.8); transform: rotate(45deg); } .section-lamp .section-wrap .right { position: absolute; top: 59.4%; left: 59.375%; } .section-lamp .section-wrap .right .icon-list .icon-wrap { display: inline-block; width: 60px; height: 60px; border-radius: 50%; margin-bottom: 60px; border: 1px solid rgba(255, 255, 255, 0.3); margin-right: 8px; transition: all 1s; } .section-lamp .section-wrap .right .icon-list .icon-wrap:hover { border-color: white; } .section-lamp .section-wrap .right .icon-list .icon-wrap img { width: 100%; vertical-align: middle; } .section-lamp .section-wrap .right .text { width: 380px; line-height: 1.5; position: relative; padding-left: 10px; } .section-lamp .section-wrap .right .text .dot { left: -20px; top: 8px; } .section-lamp .section-wrap .right .link-btn { margin-top: 40px; margin-left: 10px; } .section-brain .content-wrap { padding: 8% 0 6.25%; overflow: hidden; } .section-brain .content-wrap .content { display: flex; padding-bottom: 10vh; } .section-brain .content-wrap .content .text-wrap { width: 40%; margin-top: 20vh; } .section-brain .content-wrap .content .text-wrap p { width: 100%; line-height: 1.5; color: #666; margin-top: 20px; box-sizing: border-box; /* padding-right: 20px; */ } .section-brain .content-wrap .content .right-img { margin-left: 100px; margin-top: calc(20vh + 20px); max-height: 350px; overflow: hidden; max-width: 50%; } .section-brain .content-wrap .content .right-img .img:hover { transform: scale(1.1); transition: all 1s; } .section-brain .title-box { position: absolute; } .section-brain .title-box h5 { color: #ea3d31; margin-bottom: 10px; line-height: 1; } .section-brain .title-box h6 { color: #333; } .section-brain .content-case { position: absolute; padding-top: 18.5%; float: left; width: 25%; overflow: hidden; } .section-brain .content-case h3 { font-weight: 400; color: #333333; line-height: 24px; } .section-brain .content-case .section-text { margin-top: 18px; display: flex; flex-direction: column; } .section-brain .content-case .section-text a { font-weight: 400; color: #333333; line-height: 2; } .section-brain .content-case .section-text a::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 15px; vertical-align: 2px; border-top: 1px solid #333333; border-right: 1px solid #333333; transform: rotate(45deg); } .section-brain .left { float: left; width: 53.75%; position: relative; } .section-brain .left .content-box { margin-top: 85px; float: right; width: 55%; } .section-brain .left .content-box .text { width: 95%; line-height: 30px; color: #666; margin-bottom: 20px; word-break: keep-all; } .section-brain .left .content-box .img-box { position: relative; width: 100%; padding-bottom: 56.06%; overflow: hidden; margin-bottom: 35px; } .section-brain .left .content-box .img-box:hover .img { transform: scale(1.2); } .section-brain .left .content-box .img-box .img { position: absolute; width: 100%; height: 100%; transition: all 1s; } .section-brain .img-content { float: right; width: 73.75%; padding-top: 2%; } .section-brain .img-content .img-content-wrap { width: 100%; display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 5%; } .section-brain .img-content .left-img { width: 37.28%; } .section-brain .img-content .right-img { width: 59.88%; } .section-brain .img-content .img-box { width: 100%; padding-bottom: 66.66%; overflow: hidden; margin-bottom: 30px; position: relative; } .section-brain .img-content .img-box:hover .img { transform: scale(1.2); } .section-brain .img-content .img-box .img { position: absolute; width: 100%; height: 100%; transition: all 1s; } .section-brain .img-content .text { width: 95%; line-height: 1.5; color: #666; } .section-parking { background-color: #ff5043; color: #fff; overflow: hidden; } .section-parking h5 { line-height: 1; } .section-parking h6 { line-height: 1; } .section-parking .content-wrap { height: 100%; z-index: 5; } .section-parking .title-box { position: absolute; left: 52%; top: 15%; z-index: 3; } .section-parking .left { padding-top: 8%; width: 33%; } .section-parking .left p { line-height: 1.7; margin-bottom: 20px; } .section-parking .left .link-btn { margin-top: 60px; background-color: #fff; color: #eb1d16; } .section-parking .content-case { padding-top: 8%; min-height: 200px; padding-bottom: 10%; width: 40%; overflow: hidden; color: #fff; } .section-parking .content-case h3 { line-height: 1; } .section-parking .content-case .section-text { margin-top: 18px; display: flex; flex-direction: column; } .section-parking .content-case .section-text a { display: block; line-height: 2; color: #fff; } .section-parking .content-case .section-text a::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 15px; vertical-align: 2px; border-top: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; transform: rotate(45deg); } .section-parking .car-wrap { position: absolute; width: 78.85%; height: 100%; right: 0; top: 0; overflow: hidden; z-index: 6; } .section-parking .car-wrap .car-img-box { position: absolute; top: 42%; width: 66.25%; right: 8%; } .section-parking .car-wrap .car-img-box img { width: 100%; } .section-parking .mask { position: absolute; width: 47.81%; height: 100%; top: 0; left: 0; z-index: 2; background-image: url("/images/digital/mask_bg.png"); background-size: 100% 100%; opacity: .6; } .section-parking .circle-box { position: absolute; top: 0; left: 0; width: 100%; top: 56%; } .section-parking .circle-box .circle-bg { width: 121.5%; } .section-parking .circle-box .circle-bg .circle { width: 100%; padding-bottom: 16.35%; background-image: url("/images/digital/circle.png"); background-size: cover; } .section-parking .circle-box .point-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .section-parking .circle-box .point-wrap .point { position: absolute; width: 3.58%; } .section-parking .circle-box .point-wrap .point img { width: 100%; } .section-parking .circle-box .point-wrap .point:nth-child(1) { width: 3%; left: 12%; top: 4%; } .section-parking .circle-box .point-wrap .point:nth-child(2) { left: 68%; bottom: 0; } /*wifi鍔ㄧ敾甯?/ @-webkit-keyframes wifiAnimate { 1.82% { background-image: url("/images/service/wifi/banner1_00015.png"); } 3.64% { background-image: url("/images/service/wifi/banner1_00016.png"); } 5.46% { background-image: url("/images/service/wifi/banner1_00017.png"); } 7.28% { background-image: url("/images/service/wifi/banner1_00018.png"); } 9.1% { background-image: url("/images/service/wifi/banner1_00019.png"); } 10.92% { background-image: url("/images/service/wifi/banner1_00020.png"); } 12.74% { background-image: url("/images/service/wifi/banner1_00021.png"); } 14.56% { background-image: url("/images/service/wifi/banner1_00022.png"); } 16.38% { background-image: url("/images/service/wifi/banner1_00023.png"); } 18.2% { background-image: url("/images/service/wifi/banner1_00024.png"); } 20.02% { background-image: url("/images/service/wifi/banner1_00025.png"); } 21.84% { background-image: url("/images/service/wifi/banner1_00026.png"); } 23.66% { background-image: url("/images/service/wifi/banner1_00027.png"); } 25.48% { background-image: url("/images/service/wifi/banner1_00028.png"); } 27.3% { background-image: url("/images/service/wifi/banner1_00029.png"); } 29.12% { background-image: url("/images/service/wifi/banner1_00030.png"); } 30.94% { background-image: url("/images/service/wifi/banner1_00031.png"); } 32.76% { background-image: url("/images/service/wifi/banner1_00032.png"); } 34.58% { background-image: url("/images/service/wifi/banner1_00033.png"); } 36.4% { background-image: url("/images/service/wifi/banner1_00034.png"); } 38.22% { background-image: url("/images/service/wifi/banner1_00035.png"); } 40.04% { background-image: url("/images/service/wifi/banner1_00036.png"); } 41.86% { background-image: url("/images/service/wifi/banner1_00037.png"); } 43.68% { background-image: url("/images/service/wifi/banner1_00038.png"); } 45.5% { background-image: url("/images/service/wifi/banner1_00039.png"); } 47.32% { background-image: url("/images/service/wifi/banner1_00040.png"); } 49.14% { background-image: url("/images/service/wifi/banner1_00041.png"); } 50.96% { background-image: url("/images/service/wifi/banner1_00042.png"); } 52.78% { background-image: url("/images/service/wifi/banner1_00043.png"); } 54.6% { background-image: url("/images/service/wifi/banner1_00044.png"); } 56.42% { background-image: url("/images/service/wifi/banner1_00045.png"); } 58.24% { background-image: url("/images/service/wifi/banner1_00046.png"); } 60.06% { background-image: url("/images/service/wifi/banner1_00047.png"); } 61.88% { background-image: url("/images/service/wifi/banner1_00048.png"); } 63.7% { background-image: url("/images/service/wifi/banner1_00049.png"); } 65.52% { background-image: url("/images/service/wifi/banner1_00050.png"); } 67.34% { background-image: url("/images/service/wifi/banner1_00051.png"); } 69.16% { background-image: url("/images/service/wifi/banner1_00052.png"); } 70.98% { background-image: url("/images/service/wifi/banner1_00053.png"); } 72.8% { background-image: url("/images/service/wifi/banner1_00054.png"); } 74.62% { background-image: url("/images/service/wifi/banner1_00055.png"); } 76.44% { background-image: url("/images/service/wifi/banner1_00056.png"); } 78.26% { background-image: url("/images/service/wifi/banner1_00057.png"); } 80.08% { background-image: url("/images/service/wifi/banner1_00058.png"); } 81.9% { background-image: url("/images/service/wifi/banner1_00059.png"); } 83.72% { background-image: url("/images/service/wifi/banner1_00060.png"); } 85.54% { background-image: url("/images/service/wifi/banner1_00061.png"); } 87.36% { background-image: url("/images/service/wifi/banner1_00062.png"); } 89.18% { background-image: url("/images/service/wifi/banner1_00063.png"); } 91% { background-image: url("/images/service/wifi/banner1_00064.png"); } 92.82% { background-image: url("/images/service/wifi/banner1_00065.png"); } 94.64% { background-image: url("/images/service/wifi/banner1_00066.png"); } 96.46% { background-image: url("/images/service/wifi/banner1_00067.png"); } 98.28% { background-image: url("/images/service/wifi/banner1_00068.png"); } 100% { background-image: url("/images/service/wifi/banner1_00015.png"); } } @keyframes wifiAnimate { 1.82% { background-image: url("/images/service/wifi/banner1_00015.png"); } 3.64% { background-image: url("/images/service/wifi/banner1_00016.png"); } 5.46% { background-image: url("/images/service/wifi/banner1_00017.png"); } 7.28% { background-image: url("/images/service/wifi/banner1_00018.png"); } 9.1% { background-image: url("/images/service/wifi/banner1_00019.png"); } 10.92% { background-image: url("/images/service/wifi/banner1_00020.png"); } 12.74% { background-image: url("/images/service/wifi/banner1_00021.png"); } 14.56% { background-image: url("/images/service/wifi/banner1_00022.png"); } 16.38% { background-image: url("/images/service/wifi/banner1_00023.png"); } 18.2% { background-image: url("/images/service/wifi/banner1_00024.png"); } 20.02% { background-image: url("/images/service/wifi/banner1_00025.png"); } 21.84% { background-image: url("/images/service/wifi/banner1_00026.png"); } 23.66% { background-image: url("/images/service/wifi/banner1_00027.png"); } 25.48% { background-image: url("/images/service/wifi/banner1_00028.png"); } 27.3% { background-image: url("/images/service/wifi/banner1_00029.png"); } 29.12% { background-image: url("/images/service/wifi/banner1_00030.png"); } 30.94% { background-image: url("/images/service/wifi/banner1_00031.png"); } 32.76% { background-image: url("/images/service/wifi/banner1_00032.png"); } 34.58% { background-image: url("/images/service/wifi/banner1_00033.png"); } 36.4% { background-image: url("/images/service/wifi/banner1_00034.png"); } 38.22% { background-image: url("/images/service/wifi/banner1_00035.png"); } 40.04% { background-image: url("/images/service/wifi/banner1_00036.png"); } 41.86% { background-image: url("/images/service/wifi/banner1_00037.png"); } 43.68% { background-image: url("/images/service/wifi/banner1_00038.png"); } 45.5% { background-image: url("/images/service/wifi/banner1_00039.png"); } 47.32% { background-image: url("/images/service/wifi/banner1_00040.png"); } 49.14% { background-image: url("/images/service/wifi/banner1_00041.png"); } 50.96% { background-image: url("/images/service/wifi/banner1_00042.png"); } 52.78% { background-image: url("/images/service/wifi/banner1_00043.png"); } 54.6% { background-image: url("/images/service/wifi/banner1_00044.png"); } 56.42% { background-image: url("/images/service/wifi/banner1_00045.png"); } 58.24% { background-image: url("/images/service/wifi/banner1_00046.png"); } 60.06% { background-image: url("/images/service/wifi/banner1_00047.png"); } 61.88% { background-image: url("/images/service/wifi/banner1_00048.png"); } 63.7% { background-image: url("/images/service/wifi/banner1_00049.png"); } 65.52% { background-image: url("/images/service/wifi/banner1_00050.png"); } 67.34% { background-image: url("/images/service/wifi/banner1_00051.png"); } 69.16% { background-image: url("/images/service/wifi/banner1_00052.png"); } 70.98% { background-image: url("/images/service/wifi/banner1_00053.png"); } 72.8% { background-image: url("/images/service/wifi/banner1_00054.png"); } 74.62% { background-image: url("/images/service/wifi/banner1_00055.png"); } 76.44% { background-image: url("/images/service/wifi/banner1_00056.png"); } 78.26% { background-image: url("/images/service/wifi/banner1_00057.png"); } 80.08% { background-image: url("/images/service/wifi/banner1_00058.png"); } 81.9% { background-image: url("/images/service/wifi/banner1_00059.png"); } 83.72% { background-image: url("/images/service/wifi/banner1_00060.png"); } 85.54% { background-image: url("/images/service/wifi/banner1_00061.png"); } 87.36% { background-image: url("/images/service/wifi/banner1_00062.png"); } 89.18% { background-image: url("/images/service/wifi/banner1_00063.png"); } 91% { background-image: url("/images/service/wifi/banner1_00064.png"); } 92.82% { background-image: url("/images/service/wifi/banner1_00065.png"); } 94.64% { background-image: url("/images/service/wifi/banner1_00066.png"); } 96.46% { background-image: url("/images/service/wifi/banner1_00067.png"); } 98.28% { background-image: url("/images/service/wifi/banner1_00068.png"); } 100% { background-image: url("/images/service/wifi/banner1_00015.png"); } } @media all and (max-width: 1600px) { .section-lamp { padding-bottom: 68%; } .section-lamp .section-wrap .left { left: 15%; } .section-brain .left { top: 15%; } .section-parking .title-box { top: 10%; } .section-parking .left { top: 15%; } .section-parking .car-wrap .car-img-box { top: 45%; } } @media all and (max-width: 1100px) { .section-lamp { padding-bottom: 81%; } .section-lamp .section-wrap .left { left: 7%; top: 38%; } .section-lamp .section-wrap .right { top: 59.4%; left: 54.375%; } .section-lamp .section-wrap .right .text { width: 97%; } .section-lamp .section-wrap .right .link-btn { margin-top: 25px; } .section-lamp .section-wrap .right .icon-list .icon-wrap { width: 50px; height: 50px; margin-bottom: 30px; } } @media all and (max-width: 768px) { .section-brain .content-wrap .content { width: 100%; display: flex; flex-wrap: wrap; flex-direction: column; padding-bottom: 0vh; } .section-brain .content-wrap .content .text-wrap { width: 100%; margin-top: 0vh; } .section-brain .content-wrap .content .text-wrap p { width: 100%; line-height: 1.5; color: #666; margin-top: 20px; padding-right: 0; /* margin-left: 20px; */ } /* .section-brain .content-wrap .content .text-wrap p::before { content: ''; position: absolute; height: 6px; width: 6px; margin-top: 5px; left: 0px; background-color: #333333; border-radius: 9993em; } */ .section-brain .content-wrap .content .right-img { margin: 10px auto; height: 100%; min-width: 100%; } .section-brain .content-wrap .content .right-img .img { max-width: 100%; } .section-brain .content-wrap .content .right-img .img:hover { transform: scale(1.1); transition: all 1s; } .section-keywords .keywords-title { color: #ea3d31; } .section-keywords .content-wrap { overflow: hidden; padding: 45px 0 30px; } .section-keywords .keywords-list { float: left; width: 25%; padding-top: 40px; } .section-keywords .keywords-list .keywords-item { margin-top: 20px; } .section-keywords .keywords-list .keywords-item.select { padding-bottom: 10px; } .section-keywords .keywords-list .keywords-item.select::before { width: 100%; background: #ea3d31; } .section-keywords .center-img { width: 30%; position: absolute; left: auto; right: 0; padding-top: 5%; } .section-keywords .img-box { width: 100%; padding-bottom: 100%; border: 1px solid #b8b8b8; border-radius: 50%; overflow: hidden; box-sizing: border-box; position: relative; } .section-keywords .img-box .img-wrap { position: absolute; width: 100%; height: 100%; padding: 9.5%; box-sizing: border-box; } .section-keywords .img-box img { width: 100%; height: 100%; border-radius: 50%; } .section-keywords .keyword-info { width: 70%; max-width: 100%; padding-top: 17%; } .section-keywords .keyword-info h5 { line-height: 1.5; margin-bottom: 10px; } .section-keywords .keyword-info p { color: #666; line-height: 20px; } .link-btn { width: 120px; padding: 0 35px 0 25px; } .section-lamp { width: 100%; padding-bottom: 125%; height: auto; } .section-lamp .lamp { background-position: 70%; } .section-lamp .light { background-position: 70%; } .section-lamp .section-wrap { position: absolute; } .section-lamp .section-wrap .title-box { width: 100%; top: 5%; } .section-lamp .section-wrap .title { margin-bottom: 10px; } .section-lamp .section-wrap .dot { width: 8px; height: 8px; } .section-lamp .section-wrap .left { top: 20%; left: 5%; } .section-lamp .section-wrap .left .section { padding-top: 78%; padding-left: 38%; } .section-lamp .section-wrap .left .text { width: 80%; line-height: 20px; margin-bottom: 6%; padding-left: 20px; } .section-lamp .section-wrap .left .text .dot { left: 0; right: 0; top: 6px; } .section-lamp .section-wrap .left .section .section-text { margin-top: 18px; } .section-lamp .section-wrap .left .section .section-text a { line-height: 20px; } .section-lamp .section-wrap .right { top: 52%; left: 35%; } .section-lamp .section-wrap .right .icon-list .icon-wrap { width: 30px; height: 30px; margin-bottom: 10px; } .section-lamp .section-wrap .right .text { width: 80%; line-height: 20px; padding-left: 5px; } .section-lamp .section-wrap .right .text .dot { top: 6px; } .section-lamp .section-wrap .right .link-btn { margin-top: 20px; } .section-brain .content-wrap { padding: 8% 0 6.25%; overflow: hidden; } .section-brain .title-box { position: relative; } .section-brain .img-content { width: 100%; padding-top: 20px; } .section-brain .img-content .img-box { margin-bottom: 15px; position: relative; } .section-brain .img-content-wrap { width: 100%; flex-direction: column; } .section-brain .img-content-wrap .left-img { width: 100%; } .section-brain .img-content-wrap .right-img { width: 100%; margin-top: 20px; } .section-brain .img-content-wrap .content-box { margin-top: 10px; float: right; width: 100%; } .section-brain .img-content-wrap .content-box .text { width: 95%; } .section-brain .img-content-wrap .content-box .img-box { margin-bottom: 10px; } .section-brain .right { float: right; width: 100%; padding-top: 15px; } .section-brain .right .text { width: 95%; line-height: 20px; } .section-brain .content-case { position: relative; width: 100%; padding-top: 20px; } .section-brain .content-case .section-text { margin-top: 10px; } .section-parking { padding-bottom: 0; } .section-parking .section-wrap { position: relative; width: 100%; height: 100%; padding-bottom: 30%; } .section-parking .content-wrap { height: 100%; z-index: 9; } .section-parking .title-box { position: relative; padding-top: 40px; padding-left: 20px; left: 0; z-index: 3; } .section-parking .left { top: 10%; width: 100%; position: relative; left: 0; z-index: 3; padding-top: 40px; } .section-parking .left .link-btn { margin-top: 30px; } .section-parking .car-wrap { position: relative; width: 100%; height: 200px; background: #ff5043; margin-top: 45%; z-index: 6; } .section-parking .car-wrap .car-img-box { position: absolute; top: 15%; width: 60%; right: 19%; } .section-parking .content-case { position: absolute; width: 100%; padding-bottom: 40px; min-height: 200px; top: 100%; padding-top: 80%; } .section-parking .content-case .section-text { margin-top: 10px; } .section-parking .mask { width: 100%; height: 0; padding-bottom: 80%; background-image: url(/images/digital/mask_bg1.png); } .section-parking .circle-box { top: 35%; } .section-parking .circle-box .circle-bg { width: 100%; } .section-parking .circle-box .circle-bg .circle { padding-bottom: 17%; } .section-parking .circle-box .point-wrap .point:nth-child(1) { width: 3%; left: 15%; top: -3%; } .section-parking .circle-box .point-wrap .point:nth-child(2) { bottom: 6%; } } @media all and (max-width: 620px) { .section-lamp { padding-bottom: 145%; } .section-lamp .lamp { background-position: 64%; } .section-lamp .light { background-position: 64%; } .section-lamp .section-wrap .left { top: 25%; left: 10%; bottom: 0; } .section-lamp .section-wrap .left .text { margin-bottom: 25%; } .section-lamp .section-wrap .left .section { padding-top: 47%; padding-left: 27%; } .section-lamp .section-wrap .right { top: 48%; left: 35%; } .section-lamp .section-wrap .right .text { width: 98%; } } @media all and (max-width: 480px) { .section-lamp { padding-bottom: 180%; } .section-lamp .section-wrap .left { top: 25%; left: 10%; bottom: 0; } .section-lamp .section-wrap .left .text { margin-bottom: 25%; } .section-lamp .section-wrap .left .section { padding-top: 80%; padding-left: 20%; } .section-lamp .section-wrap .right { top: 48%; left: 35%; } .section-parking { padding-bottom: 0; } .section-parking .car-wrap { margin-top: 30%; } .section-parking .mask { padding-bottom: 110%; } .section-parking .circle-box { top: 35%; } .section-parking .circle-box .point-wrap .point:nth-child(2) { bottom: 0; } } @media all and (max-width: 400px) { .section-parking { padding-bottom: 0; } .section-parking .left .link-btn { margin-top: 30px; } .section-parking .car-wrap { position: relative; width: 100%; height: 200px; background: #ff5043; margin-top: 25%; z-index: 6; } .section-parking .car-wrap .car-img-box { position: absolute; top: 20%; width: 60%; right: 19%; } .section-parking .content-case { position: absolute; width: 100%; padding-bottom: 40px; min-height: 200px; top: 100%; padding-top: 80%; } .section-parking .content-case .section-text { margin-top: 10px; } .section-parking .mask { width: 100%; height: 0; padding-bottom: 120%; background-image: url(/images/digital/mask_bg1.png); } .section-parking .circle-box { top: 35%; } .section-parking .circle-box .circle-bg { width: 100%; } .section-parking .circle-box .circle-bg .circle { padding-bottom: 17%; } .section-parking .circle-box .point-wrap .point:nth-child(1) { width: 3%; left: 15%; top: -3%; } .section-parking .circle-box .point-wrap .point:nth-child(2) { bottom: 0; } } @media all and (max-width: 320px) { .section-lamp { height: 100px; } .section-lamp .section-wrap .title-box { top: 2%; } .section-lamp .section-wrap .left { top: 28%; } .section-lamp .section-wrap .right .text { width: 88%; } .section-parking .left .link-btn { margin-top: 30px; } .section-parking .mask { padding-bottom: 140%; } } @-webkit-keyframes carMove { from { transform: translateX(50%); } to { transform: translateX(0); } } @keyframes carMove { from { transform: translateX(50%); } to { transform: translateX(0); } } @-webkit-keyframes light { 0% { opacity: 0.3; } 50% { opacity: .8; } 100% { opacity: 0.3; } } @keyframes light { 0% { opacity: 0.3; } 50% { opacity: .8; } 100% { opacity: 0.3; } } .carMove { -webkit-animation-name: carMove; animation-name: carMove; animation-duration: 2s; }