.in_banner_bot { width: 100%; height: 3.85rem; overflow: hidden; position: relative; } .content { width: 100%; position: relative; z-index: 3; background-color: white; padding-top: 0.33rem; } .content .box { width: 100%; } .content .box .nav { margin-left: 1.9575rem; } .content .box .nav nav ul::after { content: ""; width: 0; height: 0; display: block; float: none; clear: both; } .content .box .nav nav ul li { float: left; font-size: 0.105rem; line-height: 0.105rem; color: #a8a8a8; } .content .box .nav nav ul li a { color: #a8a8a8; } .content .box .nav nav ul li:nth-of-type(2n) { margin: 0 0.135rem; } .content .box .nav nav ul li.active a { color: #333; } .content .box .h1 { font-family: "Arial"; font-size: 0.465rem; font-weight: bold; line-height: 0.465rem; color: #d52029; margin-top: 0.6975rem; text-align: center; } .content .box .h1 span { display: block; font-size: 0.315rem; font-weight: bold; line-height: 0.315rem; color: #333333; margin-top: 0.225rem; } .content .box .h1 .intro { margin-top: 0.3rem; font-weight: normal; font-size: 0.15rem; color: #000; line-height: 0.27rem; } .content .number-top { margin-top: 1rem; } .content .number-bot { margin-top: 0.2rem; } .content .number-top, .content .number-bot { width: 100%; display: flex; justify-content: center; position: relative; } .content .number-top li, .content .number-bot li { margin: 0 0.1125rem; flex-shrink: 0; width: 2.475rem; height: 1.125rem; background-color: #FFFFFF; box-shadow: 0px 5px 27px 0px rgba(0, 0, 0, 0.1); display: flex; flex-wrap: wrap; justify-content: center; align-content: center; } .content .number-top li .num, .content .number-bot li .num { width: 100%; display: block; font-size: 0.4875rem; line-height: 0.4875rem; text-align: center; font-family: DIN; font-weight: bold; color: #000; transition: all 0.5s; } .content .number-top li .text, .content .number-bot li .text { margin-top: 0.1rem; display: block; height: 0.135rem; font-size: 0.135rem; color: #666666; } .content .number-top li:hover .num, .content .number-bot li:hover .num { color: #ea222d; } .content .box .map-box { margin-top: 1rem; margin-bottom: 0.5475rem; } .content .box .map-box .map { width: 11.3853rem; margin: 0 auto; margin-top: 0.14rem; position: relative; } .content .box .map-box .map .img { width: 100%; } .content .box .map-box .map .img img { width: 100%; } .content .box .map-box .map .dot1 { position: absolute; top: 1.7rem; left: 1.4rem; } .content .box .map-box .map .dot1 .round1 { position: absolute; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-image: radial-gradient(rgba(222, 201, 154, 0), #d59e77); animation: r1 5s infinite; } .content .box .map-box .map .dot1 .round4 { position: absolute; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-image: radial-gradient(rgba(222, 201, 154, 0), #d59e77); animation: r1 5s infinite; animation-delay: 4s; } .content .box .map-box .map .dot1 .round3 { position: absolute; z-index: 1; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-color: #d59e77; cursor: pointer; transition: 0.5s; } .content .box .map-box .map .dot1 .round3::after { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background-color: #fff; border-radius: 50%; transform: scale(0.2); transition: 0.5s; } .content .box .map-box .map .dot1 .round3:hover { transform: scale(1.3); } .content .box .map-box .map .dot1 .round3:hover::after { transform: scale(0.14); } .content .box .map-box .map .dot1 .name-father { width: 0; position: absolute; top: 0.1rem; left: 0.1rem; overflow: hidden; transition: 2s; transition-delay: 0.5s; } .content .box .map-box .map .dot1 .name-father.show { width: 2.9775rem; } .content .box .map-box .map .dot1 .name-box { width: 2.9775rem; height: 1.23578rem; } .content .box .map-box .map .dot1 .name-box .line { width: 100%; height: 1.23578rem; position: absolute; top: 0; left: 0; } .content .box .map-box .map .dot1 .name-box .line img { width: 2.9775rem; } .content .box .map-box .map .dot1 .name-box .name { float: right; position: relative; right: 0; bottom: 0rem; font-size: 0.24rem; font-weight: bold; line-height: 0.24rem; letter-spacing: -0.0075rem; color: #E84127; text-align: right; } .content .box .map-box .map .dot1 .name-box .name span { display: block; font-size: 0.15rem; font-family: DIN; font-weight: bold; color: #333; letter-spacing: -0.0075rem; margin-top: 0.08rem; } .content .box .map-box .map .dot2 { position: absolute; top: 2.7rem; left: 1.8rem; } .content .box .map-box .map .dot2 .round1 { position: absolute; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-image: radial-gradient(rgba(222, 201, 154, 0), #bd7c59); animation: r1 5s infinite; animation-delay: 1s; } .content .box .map-box .map .dot2 .round4 { position: absolute; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-image: radial-gradient(rgba(222, 201, 154, 0), #bd7c59); animation: r1 5s infinite; animation-delay: 5s; } .content .box .map-box .map .dot2 .round3 { position: absolute; z-index: 1; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-color: #bd7c59; cursor: pointer; transition: 0.5s; } .content .box .map-box .map .dot2 .round3::after { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background-color: #fff; border-radius: 50%; transform: scale(0.2); transition: 0.5s; } .content .box .map-box .map .dot2 .round3:hover { transform: scale(1.3); } .content .box .map-box .map .dot2 .round3:hover::after { transform: scale(0.14); } .content .box .map-box .map .dot2 .name-father { width: 0; position: absolute; top: 0.1rem; left: 0.1rem; overflow: hidden; transition: 2s; transition-delay: 0.5s; } .content .box .map-box .map .dot2 .name-father.show { width: 2.9775rem; } .content .box .map-box .map .dot2 .name-box { width: 2.9775rem; height: 1.23578rem; } .content .box .map-box .map .dot2 .name-box .line { width: 100%; height: 1.23578rem; position: absolute; top: 0; left: 0; } .content .box .map-box .map .dot2 .name-box .line img { width: 2.9775rem; } .content .box .map-box .map .dot2 .name-box .name { float: right; position: relative; right: 0; bottom: 0rem; font-size: 0.24rem; font-weight: bold; line-height: 0.24rem; letter-spacing: -0.0075rem; color: #E84127; text-align: right; } .content .box .map-box .map .dot2 .name-box .name span { display: block; font-size: 0.15rem; font-family: DIN; font-weight: bold; color: #333; letter-spacing: -0.0075rem; margin-top: 0.08rem; } .content .box .map-box .map .dot3 { position: absolute; top: 1.5rem; left: 1.8rem; } .content .box .map-box .map .dot3 .round1 { position: absolute; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-image: radial-gradient(rgba(222, 201, 154, 0), #694c45); animation: r1 5s infinite; animation-delay: 3s; } .content .box .map-box .map .dot3 .round4 { position: absolute; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-image: radial-gradient(rgba(222, 201, 154, 0), #694c45); animation: r1 5s infinite; animation-delay: 7s; } .content .box .map-box .map .dot3 .round3 { position: absolute; z-index: 1; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-color: #694c45; cursor: pointer; transition: 0.5s; } .content .box .map-box .map .dot3 .round3::after { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background-color: #fff; border-radius: 50%; transform: scale(0.2); transition: 0.5s; } .content .box .map-box .map .dot3 .round3:hover { transform: scale(1.3); } .content .box .map-box .map .dot3 .round3:hover::after { transform: scale(0.14); } .content .box .map-box .map .dot3 .name-father { width: 0; position: absolute; top: 0.1rem; left: 0.1rem; overflow: hidden; transition: 2s; transition-delay: 0.5s; } .content .box .map-box .map .dot3 .name-father.show { width: 2.9775rem; } .content .box .map-box .map .dot3 .name-box { width: 2.9775rem; height: 1.23578rem; } .content .box .map-box .map .dot3 .name-box .line { width: 100%; height: 1.23578rem; position: absolute; top: 0; left: 0; } .content .box .map-box .map .dot3 .name-box .line img { width: 2.9775rem; } .content .box .map-box .map .dot3 .name-box .name { float: right; position: relative; right: 0; bottom: 0rem; font-size: 0.24rem; font-weight: bold; line-height: 0.24rem; letter-spacing: -0.0075rem; color: #E84127; text-align: right; } .content .box .map-box .map .dot3 .name-box .name span { display: block; font-size: 0.15rem; font-family: DIN; font-weight: bold; color: #333; letter-spacing: -0.0075rem; margin-top: 0.08rem; } .content .box .map-box .map .dot4 { position: absolute; top: 2rem; left: 2.5rem; } .content .box .map-box .map .dot4 .round1 { position: absolute; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-image: radial-gradient(rgba(222, 201, 154, 0), #bd7c59); animation: r1 5s infinite; animation-delay: 1.5s; } .content .box .map-box .map .dot4 .round4 { position: absolute; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-image: radial-gradient(rgba(222, 201, 154, 0), #bd7c59); animation: r1 5s infinite; animation-delay: 5.5s; } .content .box .map-box .map .dot4 .round3 { position: absolute; z-index: 1; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-color: #bd7c59; cursor: pointer; transition: 0.5s; } .content .box .map-box .map .dot4 .round3::after { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background-color: #fff; border-radius: 50%; transform: scale(0.2); transition: 0.5s; } .content .box .map-box .map .dot4 .round3:hover { transform: scale(1.3); } .content .box .map-box .map .dot4 .round3:hover::after { transform: scale(0.14); } .content .box .map-box .map .dot4 .name-father { width: 0; position: absolute; top: 0.1rem; left: 0.1rem; overflow: hidden; transition: 2s; transition-delay: 0.5s; } .content .box .map-box .map .dot4 .name-father.show { width: 2.9775rem; } .content .box .map-box .map .dot4 .name-box { width: 2.9775rem; height: 1.23578rem; } .content .box .map-box .map .dot4 .name-box .line { width: 100%; height: 1.23578rem; position: absolute; top: 0; left: 0; } .content .box .map-box .map .dot4 .name-box .line img { width: 2.9775rem; } .content .box .map-box .map .dot4 .name-box .name { float: right; position: relative; right: 0; bottom: 0rem; font-size: 0.24rem; font-weight: bold; line-height: 0.24rem; letter-spacing: -0.0075rem; color: #E84127; text-align: right; } .content .box .map-box .map .dot4 .name-box .name span { display: block; font-size: 0.15rem; font-family: DIN; font-weight: bold; color: #333; letter-spacing: -0.0075rem; margin-top: 0.08rem; } .content .box .map-box .map .dot5 { position: absolute; top: 2.95rem; left: 3.5rem; } .content .box .map-box .map .dot5 .round1 { position: absolute; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-image: radial-gradient(rgba(222, 201, 154, 0), #c0a66d); animation: r1 5s infinite; animation-delay: 0s; } .content .box .map-box .map .dot5 .round4 { position: absolute; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-image: radial-gradient(rgba(222, 201, 154, 0), #c0a66d); animation: r1 5s infinite; animation-delay: 4s; } .content .box .map-box .map .dot5 .round3 { position: absolute; z-index: 1; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-color: #c0a66d; cursor: pointer; transition: 0.5s; } .content .box .map-box .map .dot5 .round3::after { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background-color: #fff; border-radius: 50%; transform: scale(0.2); transition: 0.5s; } .content .box .map-box .map .dot5 .round3:hover { transform: scale(1.3); } .content .box .map-box .map .dot5 .round3:hover::after { transform: scale(0.14); } .content .box .map-box .map .dot5 .name-father { width: 0; position: absolute; top: 0.1rem; left: 0.1rem; overflow: hidden; transition: 2s; transition-delay: 0.5s; } .content .box .map-box .map .dot5 .name-father.show { width: 2.9775rem; } .content .box .map-box .map .dot5 .name-box { width: 2.9775rem; height: 1.23578rem; } .content .box .map-box .map .dot5 .name-box .line { width: 100%; height: 1.23578rem; position: absolute; top: 0; left: 0; } .content .box .map-box .map .dot5 .name-box .line img { width: 2.9775rem; } .content .box .map-box .map .dot5 .name-box .name { float: right; position: relative; right: 0; bottom: 0rem; font-size: 0.24rem; font-weight: bold; line-height: 0.24rem; letter-spacing: -0.0075rem; color: #E84127; text-align: right; } .content .box .map-box .map .dot5 .name-box .name span { display: block; font-size: 0.15rem; font-family: DIN; font-weight: bold; color: #333; letter-spacing: -0.0075rem; margin-top: 0.08rem; } .content .box .map-box .map .dot6 { position: absolute; top: 2.4rem; left: 4.1rem; } .content .box .map-box .map .dot6 .round1 { position: absolute; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-image: radial-gradient(rgba(222, 201, 154, 0), #c0a66d); animation: r2 5s infinite; animation-delay: 3.5s; } .content .box .map-box .map .dot6 .round4 { position: absolute; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-image: radial-gradient(rgba(222, 201, 154, 0), #c0a66d); animation: r2 5s infinite; animation-delay: 7.5s; } .content .box .map-box .map .dot6 .round3 { position: absolute; z-index: 1; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-color: #c0a66d; cursor: pointer; transition: 0.5s; } .content .box .map-box .map .dot6 .round3::after { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background-color: #fff; border-radius: 50%; transform: scale(0.2); transition: 0.5s; } .content .box .map-box .map .dot6 .round3:hover { transform: scale(1.3); } .content .box .map-box .map .dot6 .round3:hover::after { transform: scale(0.14); } .content .box .map-box .map .dot6 .name-father { width: 0; position: absolute; top: 0.1rem; left: 0.1rem; overflow: hidden; transition: 2s; transition-delay: 0.5s; } .content .box .map-box .map .dot6 .name-father.show { width: 2.9775rem; } .content .box .map-box .map .dot6 .name-box { width: 2.9775rem; height: 1.23578rem; } .content .box .map-box .map .dot6 .name-box .line { width: 100%; height: 1.23578rem; position: absolute; top: 0; left: 0; } .content .box .map-box .map .dot6 .name-box .line img { width: 2.9775rem; } .content .box .map-box .map .dot6 .name-box .name { float: right; position: relative; right: 0; bottom: 0rem; font-size: 0.24rem; font-weight: bold; line-height: 0.24rem; letter-spacing: -0.0075rem; color: #E84127; text-align: right; } .content .box .map-box .map .dot6 .name-box .name span { display: block; font-size: 0.15rem; font-family: DIN; font-weight: bold; color: #333; letter-spacing: -0.0075rem; margin-top: 0.08rem; } .content .box .map-box .map .dot7 { position: absolute; top: 3.4rem; left: 3.6rem; } .content .box .map-box .map .dot7 .round1 { position: absolute; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-image: radial-gradient(rgba(222, 201, 154, 0), #d59e77); animation: r1 5s infinite; animation-delay: 0.6s; } .content .box .map-box .map .dot7 .round4 { position: absolute; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-image: radial-gradient(rgba(222, 201, 154, 0), #d59e77); animation: r1 5s infinite; animation-delay: 4.6s; } .content .box .map-box .map .dot7 .round3 { position: absolute; z-index: 1; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-color: #d59e77; cursor: pointer; transition: 0.5s; } .content .box .map-box .map .dot7 .round3::after { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background-color: #fff; border-radius: 50%; transform: scale(0.2); transition: 0.5s; } .content .box .map-box .map .dot7 .round3:hover { transform: scale(1.3); } .content .box .map-box .map .dot7 .round3:hover::after { transform: scale(0.14); } .content .box .map-box .map .dot7 .name-father { width: 0; position: absolute; top: 0.1rem; left: 0.1rem; overflow: hidden; transition: 2s; transition-delay: 0.5s; } .content .box .map-box .map .dot7 .name-father.show { width: 2.9775rem; } .content .box .map-box .map .dot7 .name-box { width: 2.9775rem; height: 1.23578rem; } .content .box .map-box .map .dot7 .name-box .line { width: 100%; height: 1.23578rem; position: absolute; top: 0; left: 0; } .content .box .map-box .map .dot7 .name-box .line img { width: 2.9775rem; } .content .box .map-box .map .dot7 .name-box .name { float: right; position: relative; right: 0; bottom: 0rem; font-size: 0.24rem; font-weight: bold; line-height: 0.24rem; letter-spacing: -0.0075rem; color: #E84127; text-align: right; } .content .box .map-box .map .dot7 .name-box .name span { display: block; font-size: 0.15rem; font-family: DIN; font-weight: bold; color: #333; letter-spacing: -0.0075rem; margin-top: 0.08rem; } .content .box .map-box .map .dot8 { position: absolute; top: 2.6rem; left: 8.5rem; } .content .box .map-box .map .dot8 .round1 { position: absolute; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-image: radial-gradient(rgba(222, 201, 154, 0), #d59e77); animation: r1 5s infinite; animation-delay: 1.2s; } .content .box .map-box .map .dot8 .round4 { position: absolute; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-image: radial-gradient(rgba(222, 201, 154, 0), #d59e77); animation: r1 5s infinite; animation-delay: 5.2s; } .content .box .map-box .map .dot8 .round3 { position: absolute; z-index: 1; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-color: #d59e77; cursor: pointer; transition: 0.5s; } .content .box .map-box .map .dot8 .round3::after { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background-color: #fff; border-radius: 50%; transform: scale(0.2); transition: 0.5s; } .content .box .map-box .map .dot8 .round3:hover { transform: scale(1.3); } .content .box .map-box .map .dot8 .round3:hover::after { transform: scale(0.14); } .content .box .map-box .map .dot8 .name-father { width: 0; position: absolute; top: 0.1rem; left: 0.1rem; overflow: hidden; transition: 2s; transition-delay: 0.5s; } .content .box .map-box .map .dot8 .name-father.show { width: 2.9775rem; } .content .box .map-box .map .dot8 .name-box { width: 2.9775rem; height: 1.23578rem; } .content .box .map-box .map .dot8 .name-box .line { width: 100%; height: 1.23578rem; position: absolute; top: 0; left: 0; } .content .box .map-box .map .dot8 .name-box .line img { width: 2.9775rem; } .content .box .map-box .map .dot8 .name-box .name { float: right; position: relative; right: 0; bottom: 0rem; font-size: 0.24rem; font-weight: bold; line-height: 0.24rem; letter-spacing: -0.0075rem; color: #E84127; text-align: right; } .content .box .map-box .map .dot8 .name-box .name span { display: block; font-size: 0.15rem; font-family: DIN; font-weight: bold; color: #333; letter-spacing: -0.0075rem; margin-top: 0.08rem; } .content .box .map-box .map .dot9 { position: absolute; top: 2.43rem; left: 3.7rem; } .content .box .map-box .map .dot9 .round1 { position: absolute; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-image: radial-gradient(rgba(222, 201, 154, 0), #d59e77); animation: r1 5s infinite; animation-delay: 1.2s; } .content .box .map-box .map .dot9 .round4 { position: absolute; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-image: radial-gradient(rgba(222, 201, 154, 0), #d59e77); animation: r1 5s infinite; animation-delay: 5.2s; } .content .box .map-box .map .dot9 .round3 { position: absolute; z-index: 1; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-color: #d59e77; cursor: pointer; transition: 0.5s; } .content .box .map-box .map .dot9 .round3::after { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background-color: #fff; border-radius: 50%; transform: scale(0.2); transition: 0.5s; } .content .box .map-box .map .dot9 .round3:hover { transform: scale(1.3); } .content .box .map-box .map .dot9 .round3:hover::after { transform: scale(0.14); } .content .box .map-box .map .dot9 .name-father { width: 0; position: absolute; top: 0.1rem; left: 0.1rem; overflow: hidden; transition: 2s; transition-delay: 0.5s; } .content .box .map-box .map .dot9 .name-father.show { width: 2.9775rem; } .content .box .map-box .map .dot9 .name-box { width: 2.9775rem; height: 1.23578rem; } .content .box .map-box .map .dot9 .name-box .line { width: 100%; height: 1.23578rem; position: absolute; top: 0; left: 0; } .content .box .map-box .map .dot9 .name-box .line img { width: 2.9775rem; } .content .box .map-box .map .dot9 .name-box .name { float: right; position: relative; right: 0; bottom: 0rem; font-size: 0.24rem; font-weight: bold; line-height: 0.24rem; letter-spacing: -0.0075rem; color: #E84127; text-align: right; } .content .box .map-box .map .dot9 .name-box .name span { display: block; font-size: 0.15rem; font-family: DIN; font-weight: bold; color: #333; letter-spacing: -0.0075rem; margin-top: 0.08rem; } .content .box .map-box .map .dot10 { position: absolute; top: 3.2rem; left: 3.5rem; } .content .box .map-box .map .dot10 .round1 { position: absolute; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-image: radial-gradient(rgba(222, 201, 154, 0), #694c45); animation: r1 5s infinite; animation-delay: 1.2s; } .content .box .map-box .map .dot10 .round4 { position: absolute; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-image: radial-gradient(rgba(222, 201, 154, 0), #694c45); animation: r1 5s infinite; animation-delay: 5.2s; } .content .box .map-box .map .dot10 .round3 { position: absolute; z-index: 1; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-color: #694c45; cursor: pointer; transition: 0.5s; } .content .box .map-box .map .dot10 .round3::after { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background-color: #fff; border-radius: 50%; transform: scale(0.2); transition: 0.5s; } .content .box .map-box .map .dot10 .round3:hover { transform: scale(1.3); } .content .box .map-box .map .dot10 .round3:hover::after { transform: scale(0.14); } .content .box .map-box .map .dot10 .name-father { width: 0; position: absolute; top: 0.1rem; left: 0.1rem; overflow: hidden; transition: 2s; transition-delay: 0.5s; } .content .box .map-box .map .dot10 .name-father.show { width: 2.9775rem; } .content .box .map-box .map .dot10 .name-box { width: 2.9775rem; height: 1.23578rem; } .content .box .map-box .map .dot10 .name-box .line { width: 100%; height: 1.23578rem; position: absolute; top: 0; left: 0; } .content .box .map-box .map .dot10 .name-box .line img { width: 2.9775rem; } .content .box .map-box .map .dot10 .name-box .name { float: right; position: relative; right: 0; bottom: 0rem; font-size: 0.24rem; font-weight: bold; line-height: 0.24rem; letter-spacing: -0.0075rem; color: #E84127; text-align: right; } .content .box .map-box .map .dot10 .name-box .name span { display: block; font-size: 0.15rem; font-family: DIN; font-weight: bold; color: #333; letter-spacing: -0.0075rem; margin-top: 0.08rem; } .content .box .map-box .map .henan { position: absolute; top: 2.05rem; left: 3.65rem; text-align: center; } .content .box .map-box .map .henan .icon { width: 0.3rem; margin: 0 auto; } .content .box .map-box .map .henan .icon img { margin: 0 auto; width: 100%; } .content .box .map-box .map .henan .text { margin-top: 0.05rem; text-align: center; font-size: 0.12rem; line-height: 0.12rem; font-weight: bold; color: #000000; } .content .box .map-box .alert { width: 5.0551rem; height: 2.52rem; background-color: #fff; box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05); position: absolute; top: -0.4275rem; right: 0.5475rem; } .content .box .map-box .alert .top-img { width: 100%; height: 1.8rem; overflow: hidden; position: relative; } .content .box .map-box .alert .top-img img { width: 100%; height: 100%; object-fit: cover; object-position: center center; } .content .box .map-box .alert .text { padding: 0 0.24rem; box-sizing: border-box; width: 100%; height: 0.735rem; display: flex; justify-content: space-between; align-items: center; } .content .box .map-box .alert .text .left .icon, .content .box .map-box .alert .text .left .font { display: inline-block; vertical-align: middle; } .content .box .map-box .alert .text .left .icon { width: 0.135rem; height: 0.165rem; background-image: url(../images/core_service_icon_address_black.jpg.png); background-repeat: no-repeat; background-size: 100% 100%; } .content .box .map-box .alert .text .left .font { font-size: 0.135rem; line-height: 0.135rem; font-weight: bold; color: #333333; } .content .box .map-box .alert .text .right { font-size: 0.18rem; line-height: 0.18rem; font-weight: bold; color: #000; } .content .box .number { width: 10.48504rem; margin: 0 auto; } .content .box .number .list::after { content: ""; width: 0; height: 0; display: block; float: none; clear: both; } .content .box .number .list .item { width: 2.43001rem; float: left; margin-left: 0.255rem; margin-bottom: 0.3rem; } .content .box .number .list .item .timer { font-family: "Arial"; font-size: 0.45rem; font-weight: bold; line-height: 0.45rem; letter-spacing: -0.015rem; display: inline-block; } .content .box .number .list .item .name { font-size: 0.18rem; font-weight: bold; font-stretch: normal; line-height: 0.18rem; letter-spacing: -0.0075rem; margin-top: 0.18rem; } .content .box .number .list .item .en { font-family: "Arial"; font-size: 0.135rem; line-height: 0.135rem; letter-spacing: -0.0075rem; color: #333333; opacity: 0.5; margin-top: 0.1425rem; } .content .box .number .list .item .line { width: 100%; height: 0.015rem; margin-top: 0.105rem; } .content .box .number .list .item .p { font-size: 0.135rem; line-height: 0.135rem; letter-spacing: -1px; color: #333333; margin-top: 0.1125rem; } .content .box .number .list .item .p span { font-family: "Arial"; } .content .box .number .list .item:first-child { margin-left: 0; } .content .box .number .list .item.item1 { color: #c0a66d; } .content .box .number .list .item.item1 .line { background-color: #c0a66d; } .content .box .number .list .item.item2 { color: #bd7c59; } .content .box .number .list .item.item2 .line { background-color: #bd7c59; } .content .box .number .list .item.item3 { color: #694c45; } .content .box .number .list .item.item3 .line { background-color: #694c45; } .content .box .number .list .item.item4 { color: #d59e77; } .content .box .number .list .item.item4 .line { background-color: #d59e77; } .content .box .inquire { width: 100%; height: 2.29501rem; margin-top: 0.7725rem; background-color: #2a2a2a; position: relative; overflow: hidden; } .content .box .inquire .img { width: 3.44251rem; height: 3.72001rem; position: absolute; top: -1.08rem; left: 1.47rem; } .content .box .inquire .img img { width: 100%; } .content .box .inquire .left { float: left; width: 3.60001rem; margin-top: 0.5925rem; margin-left: 3.45001rem; position: relative; z-index: 1; } .content .box .inquire .left .h1 { font-size: 0.27rem; font-weight: bold; line-height: 0.27rem; color: #ffffff; opacity: 0.5; margin-top: 0; text-align: left; } .content .box .inquire .left .line { width: 100%; height: 0.0075rem; background-color: white; margin-top: 0.2025rem; opacity: 0.5; } .content .box .inquire .left .p { font-size: 0.135rem; line-height: 0.27rem; color: #ffffff; margin-top: 0.2625rem; } .content .box .inquire .right { width: 1.515rem; height: 0.465rem; float: right; margin-top: 1.02rem; margin-right: 2.40001rem; background-color: #ea222d; transition: 0.3s; position: relative; z-index: 1; } .content .box .inquire .right a { width: 100%; height: 100%; display: block; text-align: center; } .content .box .inquire .right a span { font-size: 0.12rem; line-height: 0.465rem; color: #ffffff; margin-left: 0.2rem; position: relative; } .content .box .inquire .right a span::after { content: ""; width: 0.0375rem; height: 0.135rem; background-color: white; position: absolute; left: -0.1875rem; top: 0.02rem; } .content .box .inquire .right:hover { background-color: #d52029; } .m-area { display: none; } @media screen and (max-width: 1020px) { .in_banner_bot { height: 5rem; } .content .box .nav { margin-left: 5%; margin-top: 0.3rem; } .content .box .nav nav ul li { font-size: 0.25rem; line-height: 0.25rem; } .content .box .title { width: 90%; } .content .box .title .title-box { width: 4.9rem; margin: 0 auto; position: relative; } .content .box .title .title-box .left a { font-size: 0.34615rem; line-height: 0.34615rem; } .content .box .title .title-box .right a { font-size: 0.34615rem; line-height: 0.34615rem; } .content .box .title .title-box .line { width: 0.07212rem; height: 0.25962rem; background-color: #ea222d; position: absolute; bottom: -0.4rem; left: 3.7rem; } .content .box .title .line { margin-top: 0.25rem; } .content .box .h1 .intro { margin-top: 0.2rem; font-weight: normal; font-size: 0.25rem; color: #000; line-height: 0.35rem; } .content .number-top { margin-top: 1rem; } .content .number-top li, .content .number-bot li { margin: 0 0.05rem; flex-shrink: 0; width: 1.8rem; height: 1.7rem; background-color: #FFFFFF; box-shadow: 0px 5px 27px 0px rgba(0, 0, 0, 0.1); display: flex; flex-wrap: wrap; justify-content: center; align-content: center; } .content .number-top li .num, .content .number-bot li .num { width: 100%; display: block; font-size: 0.5rem; line-height: 0.5rem; font-family: DIN-BOLD; letter-spacing: -0.03rem; font-weight: bold; color: #000; transition: all 0.5s; } .content .number-top li .text, .content .number-bot li .text { text-align: center; margin-top: 0.1rem; display: block; height: 0.14rem; font-size: 0.2rem; color: #666666; } .content .box .map-box { margin-top: 4rem; margin-bottom: 0.2rem; } .content .box .map-box .title { margin-left: 5%; margin-bottom: 4rem; padding-left: 0.15rem; height: 0.4rem; border-left: 0.045rem solid #ea222d; font-size: 0.42rem; line-height: 0.42rem; font-weight: bold; color: #000000; } .content .box .map-box .map { width: 100%; margin: 0 auto; margin-top: 0.14rem; position: relative; } .content .box .map-box .map .henan { position: absolute; top: 29%; left: 29%; text-align: center; } .content .box .map-box .map .dot1 { position: absolute; top: 32%; left: 12%; } .content .box .map-box .map .dot2 { position: absolute; top: 49%; left: 16%; } .content .box .map-box .map .dot3 { position: absolute; top: 29%; left: 16%; } .content .box .map-box .map .dot4 { position: absolute; top: 39%; left: 22%; } .content .box .map-box .map .dot5 { position: absolute; top: 55%; left: 31%; } .content .box .map-box .map .dot6 { position: absolute; top: 45%; left: 36%; } .content .box .map-box .map .dot7 { position: absolute; top: 64%; left: 32%; } .content .box .map-box .map .dot8 { position: absolute; top: 51%; left: 75%; } .content .box .map-box .map .dot9 { position: absolute; top: 45.5%; left: 33%; } .content .box .map-box .map .dot10 { position: absolute; top: 60%; left: 31%; } .content .box .map-box .alert { width: 90%; height: 3rem; background-color: #fff; box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.2); position: absolute; top: -3.4275rem; right: 0.31rem; } .content .box .map-box .alert .top-img { width: 100%; height: 2rem; overflow: hidden; position: relative; } .content .box .map-box .alert .top-img .img-text { font-size: 0.22rem; line-height: 0.22rem; font-weight: bold; color: #FFFFFF; position: absolute; bottom: 0.18rem; right: 0.18rem; } .content .box .map-box .alert .text { padding: 0 0.24rem; box-sizing: border-box; width: 100%; height: 1rem; display: flex; justify-content: space-between; align-items: center; } .content .box .map-box .alert .text .left .icon { width: 0.2rem; height: 0.235rem; background-image: url(../images/core_service_icon_address_black.jpg.png); background-repeat: no-repeat; background-size: 100% 100%; } .content .box .map-box .alert .text .left .font { font-size: 0.28rem; line-height: 0.28rem; font-weight: normal; color: #333333; } .content .box .map-box .alert .text .right { font-size: 0.35rem; line-height: 0.35rem; font-weight: bold; color: #000; } .content .box .number { width: 90%; margin-top: 0.5rem; } .content .box .number .list .item { width: calc(50% - 0.2rem); margin-left: auto; margin-right: 0.4rem; } .content .box .number .list .item:nth-child(2n) { margin-right: 0; } .content .box .number .list .item .p { font-size: 0.2rem; line-height: 0.2rem; } .content .box .inquire { width: 100%; height: 5rem; margin-top: 1.5rem; background-color: #2a2a2a; } .content .box .inquire .img { width: 3.44251rem; height: 3.72001rem; position: absolute; top: 0.5rem; left: 0.47rem; } .content .box .inquire .left { float: none; width: 72%; padding-top: 0.5rem; margin-left: 14%; } .content .box .inquire .left .h1 { font-size: 0.51923rem; font-weight: bold; line-height: 0.51923rem; color: #ffffff; opacity: 0.5; text-align: center; } .content .box .inquire .left .p { font-size: 0.27rem; line-height: 0.4rem; color: #ffffff; margin-top: 0.2625rem; text-align: center; } .content .box .inquire .right { width: 3rem; height: 0.8rem; margin: 0 auto; float: none; margin-top: 0.5rem; margin-right: auto; background-color: #ea222d; transition: 0.3s; } .content .box .inquire .right a span { font-size: 0.24rem; line-height: 0.8rem; color: #ffffff; margin-left: 0.2rem; position: relative; } .content .box .inquire .right a span::after { content: ""; width: 0.0375rem; height: 0.23rem; background-color: white; position: absolute; left: -0.1875rem; top: 0.05rem; } .m-area { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; } .m-area li { flex-shrink: 0; width: 50%; height: 1rem; line-height: 1rem; text-align: center; font-size: 0.28rem; background-color: #f8f8f8; transition: all 0.5s; } .m-area .areaActive { background-color: #ea222d; color: #fff; } } @keyframes r1 { 0% { opacity: 1; transform: scale(0); } 100% { opacity: 0; transform: scale(4); } } @-webkit-keyframes r1 { 0% { opacity: 1; transform: scale(0); } 100% { opacity: 0; transform: scale(4); } } /*.in_banner_bot { width: 100%; height: 3.85rem; overflow: hidden; position: relative; } .content { width: 100%; position: relative; z-index: 3; background-color: white; padding-top: 0.33rem; } .content .box { width: 100%; } .content .box .nav { margin-left: 1.9575rem; } .content .box .nav nav ul::after { content: ""; width: 0; height: 0; display: block; float: none; clear: both; } .content .box .nav nav ul li { float: left; font-size: 0.105rem; line-height: 0.105rem; color: #a8a8a8; } .content .box .nav nav ul li a { color: #a8a8a8; } .content .box .nav nav ul li:nth-of-type(2n) { margin: 0 0.135rem; } .content .box .nav nav ul li.active a { color: #333; } .content .box .h1 { font-family: "Arial"; font-size: 0.465rem; font-weight: bold; line-height: 0.465rem; color: #d52029; margin-top: 0.6975rem; text-align: center; } .content .box .h1 span { display: block; font-size: 0.315rem; font-weight: bold; line-height: 0.315rem; color: #333333; margin-top: 0.225rem; } .content .box .map-box { margin-top: 1rem; margin-bottom: 0.5475rem; } .content .box .map-box .map { width: 11.3853rem; margin: 0 auto; margin-top: 0.14rem; position: relative; } .content .box .map-box .map .img { width: 100%; } .content .box .map-box .map .img img { width: 100%; } .content .box .map-box .map .dot1 { position: absolute; top: 1.7rem; left: 1.4rem; } .content .box .map-box .map .dot1 .round1 { position: absolute; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-image: radial-gradient(rgba(222, 201, 154, 0), #e7b693); animation: r1 5s infinite; } .content .box .map-box .map .dot1 .round4 { position: absolute; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-image: radial-gradient(rgba(222, 201, 154, 0), #e7b693); animation: r1 5s infinite; animation-delay: 4s; } .content .box .map-box .map .dot1 .round3 { position: absolute; z-index: 1; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-color: #e7b693; cursor: pointer; transition: 0.5s; } .content .box .map-box .map .dot1 .round3::after { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background-color: #fff; border-radius: 50%; transform: scale(0.2); transition: 0.5s; } .content .box .map-box .map .dot1 .round3:hover { transform: scale(1.3); } .content .box .map-box .map .dot1 .round3:hover::after { transform: scale(0.14); } .content .box .map-box .map .dot1 .name-father { width: 0; position: absolute; top: 0.1rem; left: 0.1rem; overflow: hidden; transition: 2s; transition-delay: 0.5s; } .content .box .map-box .map .dot1 .name-father.show { width: 2.9775rem; } .content .box .map-box .map .dot1 .name-box { width: 2.9775rem; height: 1.23578rem; } .content .box .map-box .map .dot1 .name-box .line { width: 100%; height: 1.23578rem; position: absolute; top: 0; left: 0; } .content .box .map-box .map .dot1 .name-box .line img { width: 2.9775rem; } .content .box .map-box .map .dot1 .name-box .name { float: right; position: relative; right: 0; bottom: 0rem; font-size: 0.24rem; font-weight: bold; line-height: 0.24rem; letter-spacing: -0.0075rem; color: #E84127; text-align: right; } .content .box .map-box .map .dot1 .name-box .name span { display: block; font-size: 0.15rem; font-family: DIN; font-weight: bold; color: #333; letter-spacing: -0.0075rem; margin-top: 0.08rem; } .content .box .map-box .map .dot2 { position: absolute; top: 2.7rem; left: 1.8rem; } .content .box .map-box .map .dot2 .round1 { position: absolute; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-image: radial-gradient(rgba(222, 201, 154, 0), #bd7c59); animation: r1 5s infinite; animation-delay: 1s; } .content .box .map-box .map .dot2 .round4 { position: absolute; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-image: radial-gradient(rgba(222, 201, 154, 0), #bd7c59); animation: r1 5s infinite; animation-delay: 5s; } .content .box .map-box .map .dot2 .round3 { position: absolute; z-index: 1; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-color: #bd7c59; cursor: pointer; transition: 0.5s; } .content .box .map-box .map .dot2 .round3::after { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background-color: #fff; border-radius: 50%; transform: scale(0.2); transition: 0.5s; } .content .box .map-box .map .dot2 .round3:hover { transform: scale(1.3); } .content .box .map-box .map .dot2 .round3:hover::after { transform: scale(0.14); } .content .box .map-box .map .dot2 .name-father { width: 0; position: absolute; top: 0.1rem; left: 0.1rem; overflow: hidden; transition: 2s; transition-delay: 0.5s; } .content .box .map-box .map .dot2 .name-father.show { width: 2.9775rem; } .content .box .map-box .map .dot2 .name-box { width: 2.9775rem; height: 1.23578rem; } .content .box .map-box .map .dot2 .name-box .line { width: 100%; height: 1.23578rem; position: absolute; top: 0; left: 0; } .content .box .map-box .map .dot2 .name-box .line img { width: 2.9775rem; } .content .box .map-box .map .dot2 .name-box .name { float: right; position: relative; right: 0; bottom: 0rem; font-size: 0.24rem; font-weight: bold; line-height: 0.24rem; letter-spacing: -0.0075rem; color: #E84127; text-align: right; } .content .box .map-box .map .dot2 .name-box .name span { display: block; font-size: 0.15rem; font-family: DIN; font-weight: bold; color: #333; letter-spacing: -0.0075rem; margin-top: 0.08rem; } .content .box .map-box .map .dot3 { position: absolute; top: 1.5rem; left: 1.8rem; } .content .box .map-box .map .dot3 .round1 { position: absolute; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-image: radial-gradient(rgba(222, 201, 154, 0), #694c45); animation: r1 5s infinite; animation-delay: 3s; } .content .box .map-box .map .dot3 .round4 { position: absolute; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-image: radial-gradient(rgba(222, 201, 154, 0), #694c45); animation: r1 5s infinite; animation-delay: 7s; } .content .box .map-box .map .dot3 .round3 { position: absolute; z-index: 1; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-color: #694c45; cursor: pointer; transition: 0.5s; } .content .box .map-box .map .dot3 .round3::after { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background-color: #fff; border-radius: 50%; transform: scale(0.2); transition: 0.5s; } .content .box .map-box .map .dot3 .round3:hover { transform: scale(1.3); } .content .box .map-box .map .dot3 .round3:hover::after { transform: scale(0.14); } .content .box .map-box .map .dot3 .name-father { width: 0; position: absolute; top: 0.1rem; left: 0.1rem; overflow: hidden; transition: 2s; transition-delay: 0.5s; } .content .box .map-box .map .dot3 .name-father.show { width: 2.9775rem; } .content .box .map-box .map .dot3 .name-box { width: 2.9775rem; height: 1.23578rem; } .content .box .map-box .map .dot3 .name-box .line { width: 100%; height: 1.23578rem; position: absolute; top: 0; left: 0; } .content .box .map-box .map .dot3 .name-box .line img { width: 2.9775rem; } .content .box .map-box .map .dot3 .name-box .name { float: right; position: relative; right: 0; bottom: 0rem; font-size: 0.24rem; font-weight: bold; line-height: 0.24rem; letter-spacing: -0.0075rem; color: #E84127; text-align: right; } .content .box .map-box .map .dot3 .name-box .name span { display: block; font-size: 0.15rem; font-family: DIN; font-weight: bold; color: #333; letter-spacing: -0.0075rem; margin-top: 0.08rem; } .content .box .map-box .map .dot4 { position: absolute; top: 2rem; left: 2.5rem; } .content .box .map-box .map .dot4 .round1 { position: absolute; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-image: radial-gradient(rgba(222, 201, 154, 0), #bd7c59); animation: r1 5s infinite; animation-delay: 1.5s; } .content .box .map-box .map .dot4 .round4 { position: absolute; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-image: radial-gradient(rgba(222, 201, 154, 0), #bd7c59); animation: r1 5s infinite; animation-delay: 5.5s; } .content .box .map-box .map .dot4 .round3 { position: absolute; z-index: 1; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-color: #bd7c59; cursor: pointer; transition: 0.5s; } .content .box .map-box .map .dot4 .round3::after { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background-color: #fff; border-radius: 50%; transform: scale(0.2); transition: 0.5s; } .content .box .map-box .map .dot4 .round3:hover { transform: scale(1.3); } .content .box .map-box .map .dot4 .round3:hover::after { transform: scale(0.14); } .content .box .map-box .map .dot4 .name-father { width: 0; position: absolute; top: 0.1rem; left: 0.1rem; overflow: hidden; transition: 2s; transition-delay: 0.5s; } .content .box .map-box .map .dot4 .name-father.show { width: 2.9775rem; } .content .box .map-box .map .dot4 .name-box { width: 2.9775rem; height: 1.23578rem; } .content .box .map-box .map .dot4 .name-box .line { width: 100%; height: 1.23578rem; position: absolute; top: 0; left: 0; } .content .box .map-box .map .dot4 .name-box .line img { width: 2.9775rem; } .content .box .map-box .map .dot4 .name-box .name { float: right; position: relative; right: 0; bottom: 0rem; font-size: 0.24rem; font-weight: bold; line-height: 0.24rem; letter-spacing: -0.0075rem; color: #E84127; text-align: right; } .content .box .map-box .map .dot4 .name-box .name span { display: block; font-size: 0.15rem; font-family: DIN; font-weight: bold; color: #333; letter-spacing: -0.0075rem; margin-top: 0.08rem; } .content .box .map-box .map .dot5 { position: absolute; top: 2.95rem; left: 3.5rem; } .content .box .map-box .map .dot5 .round1 { position: absolute; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-image: radial-gradient(rgba(222, 201, 154, 0), #dec99a); animation: r1 5s infinite; animation-delay: 0s; } .content .box .map-box .map .dot5 .round4 { position: absolute; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-image: radial-gradient(rgba(222, 201, 154, 0), #dec99a); animation: r1 5s infinite; animation-delay: 4s; } .content .box .map-box .map .dot5 .round3 { position: absolute; z-index: 1; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-color: #dec99a; cursor: pointer; transition: 0.5s; } .content .box .map-box .map .dot5 .round3::after { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background-color: #fff; border-radius: 50%; transform: scale(0.2); transition: 0.5s; } .content .box .map-box .map .dot5 .round3:hover { transform: scale(1.3); } .content .box .map-box .map .dot5 .round3:hover::after { transform: scale(0.14); } .content .box .map-box .map .dot5 .name-father { width: 0; position: absolute; top: 0.1rem; left: 0.1rem; overflow: hidden; transition: 2s; transition-delay: 0.5s; } .content .box .map-box .map .dot5 .name-father.show { width: 2.9775rem; } .content .box .map-box .map .dot5 .name-box { width: 2.9775rem; height: 1.23578rem; } .content .box .map-box .map .dot5 .name-box .line { width: 100%; height: 1.23578rem; position: absolute; top: 0; left: 0; } .content .box .map-box .map .dot5 .name-box .line img { width: 2.9775rem; } .content .box .map-box .map .dot5 .name-box .name { float: right; position: relative; right: 0; bottom: 0rem; font-size: 0.24rem; font-weight: bold; line-height: 0.24rem; letter-spacing: -0.0075rem; color: #E84127; text-align: right; } .content .box .map-box .map .dot5 .name-box .name span { display: block; font-size: 0.15rem; font-family: DIN; font-weight: bold; color: #333; letter-spacing: -0.0075rem; margin-top: 0.08rem; } .content .box .map-box .map .dot6 { position: absolute; top: 2.4rem; left: 4.1rem; } .content .box .map-box .map .dot6 .round1 { position: absolute; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-image: radial-gradient(rgba(222, 201, 154, 0), #dec99a); animation: r2 5s infinite; animation-delay: 3.5s; } .content .box .map-box .map .dot6 .round4 { position: absolute; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-image: radial-gradient(rgba(222, 201, 154, 0), #dec99a); animation: r2 5s infinite; animation-delay: 7.5s; } .content .box .map-box .map .dot6 .round3 { position: absolute; z-index: 1; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-color: #dec99a; cursor: pointer; transition: 0.5s; } .content .box .map-box .map .dot6 .round3::after { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background-color: #fff; border-radius: 50%; transform: scale(0.2); transition: 0.5s; } .content .box .map-box .map .dot6 .round3:hover { transform: scale(1.3); } .content .box .map-box .map .dot6 .round3:hover::after { transform: scale(0.14); } .content .box .map-box .map .dot6 .name-father { width: 0; position: absolute; top: 0.1rem; left: 0.1rem; overflow: hidden; transition: 2s; transition-delay: 0.5s; } .content .box .map-box .map .dot6 .name-father.show { width: 2.9775rem; } .content .box .map-box .map .dot6 .name-box { width: 2.9775rem; height: 1.23578rem; } .content .box .map-box .map .dot6 .name-box .line { width: 100%; height: 1.23578rem; position: absolute; top: 0; left: 0; } .content .box .map-box .map .dot6 .name-box .line img { width: 2.9775rem; } .content .box .map-box .map .dot6 .name-box .name { float: right; position: relative; right: 0; bottom: 0rem; font-size: 0.24rem; font-weight: bold; line-height: 0.24rem; letter-spacing: -0.0075rem; color: #E84127; text-align: right; } .content .box .map-box .map .dot6 .name-box .name span { display: block; font-size: 0.15rem; font-family: DIN; font-weight: bold; color: #333; letter-spacing: -0.0075rem; margin-top: 0.08rem; } .content .box .map-box .map .dot7 { position: absolute; top: 3.4rem; left: 3.6rem; } .content .box .map-box .map .dot7 .round1 { position: absolute; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-image: radial-gradient(rgba(222, 201, 154, 0), #e7b693); animation: r1 5s infinite; animation-delay: 0.6s; } .content .box .map-box .map .dot7 .round4 { position: absolute; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-image: radial-gradient(rgba(222, 201, 154, 0), #e7b693); animation: r1 5s infinite; animation-delay: 4.6s; } .content .box .map-box .map .dot7 .round3 { position: absolute; z-index: 1; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-color: #e7b693; cursor: pointer; transition: 0.5s; } .content .box .map-box .map .dot7 .round3::after { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background-color: #fff; border-radius: 50%; transform: scale(0.2); transition: 0.5s; } .content .box .map-box .map .dot7 .round3:hover { transform: scale(1.3); } .content .box .map-box .map .dot7 .round3:hover::after { transform: scale(0.14); } .content .box .map-box .map .dot7 .name-father { width: 0; position: absolute; top: 0.1rem; left: 0.1rem; overflow: hidden; transition: 2s; transition-delay: 0.5s; } .content .box .map-box .map .dot7 .name-father.show { width: 2.9775rem; } .content .box .map-box .map .dot7 .name-box { width: 2.9775rem; height: 1.23578rem; } .content .box .map-box .map .dot7 .name-box .line { width: 100%; height: 1.23578rem; position: absolute; top: 0; left: 0; } .content .box .map-box .map .dot7 .name-box .line img { width: 2.9775rem; } .content .box .map-box .map .dot7 .name-box .name { float: right; position: relative; right: 0; bottom: 0rem; font-size: 0.24rem; font-weight: bold; line-height: 0.24rem; letter-spacing: -0.0075rem; color: #E84127; text-align: right; } .content .box .map-box .map .dot7 .name-box .name span { display: block; font-size: 0.15rem; font-family: DIN; font-weight: bold; color: #333; letter-spacing: -0.0075rem; margin-top: 0.08rem; } .content .box .map-box .map .dot8 { position: absolute; top: 2.6rem; left: 8.5rem; } .content .box .map-box .map .dot8 .round1 { position: absolute; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-image: radial-gradient(rgba(222, 201, 154, 0), #e7b693); animation: r1 5s infinite; animation-delay: 1.2s; } .content .box .map-box .map .dot8 .round4 { position: absolute; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-image: radial-gradient(rgba(222, 201, 154, 0), #e7b693); animation: r1 5s infinite; animation-delay: 5.2s; } .content .box .map-box .map .dot8 .round3 { position: absolute; z-index: 1; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-color: #e7b693; cursor: pointer; transition: 0.5s; } .content .box .map-box .map .dot8 .round3::after { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background-color: #fff; border-radius: 50%; transform: scale(0.2); transition: 0.5s; } .content .box .map-box .map .dot8 .round3:hover { transform: scale(1.3); } .content .box .map-box .map .dot8 .round3:hover::after { transform: scale(0.14); } .content .box .map-box .map .dot8 .name-father { width: 0; position: absolute; top: 0.1rem; left: 0.1rem; overflow: hidden; transition: 2s; transition-delay: 0.5s; } .content .box .map-box .map .dot8 .name-father.show { width: 2.9775rem; } .content .box .map-box .map .dot8 .name-box { width: 2.9775rem; height: 1.23578rem; } .content .box .map-box .map .dot8 .name-box .line { width: 100%; height: 1.23578rem; position: absolute; top: 0; left: 0; } .content .box .map-box .map .dot8 .name-box .line img { width: 2.9775rem; } .content .box .map-box .map .dot8 .name-box .name { float: right; position: relative; right: 0; bottom: 0rem; font-size: 0.24rem; font-weight: bold; line-height: 0.24rem; letter-spacing: -0.0075rem; color: #E84127; text-align: right; } .content .box .map-box .map .dot8 .name-box .name span { display: block; font-size: 0.15rem; font-family: DIN; font-weight: bold; color: #333; letter-spacing: -0.0075rem; margin-top: 0.08rem; } .content .box .map-box .map .dot9 { position: absolute; top: 2.43rem; left: 3.7rem; } .content .box .map-box .map .dot9 .round1 { position: absolute; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-image: radial-gradient(rgba(222, 201, 154, 0), #e7b693); animation: r1 5s infinite; animation-delay: 1.2s; } .content .box .map-box .map .dot9 .round4 { position: absolute; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-image: radial-gradient(rgba(222, 201, 154, 0), #e7b693); animation: r1 5s infinite; animation-delay: 5.2s; } .content .box .map-box .map .dot9 .round3 { position: absolute; z-index: 1; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-color: #e7b693; cursor: pointer; transition: 0.5s; } .content .box .map-box .map .dot9 .round3::after { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background-color: #fff; border-radius: 50%; transform: scale(0.2); transition: 0.5s; } .content .box .map-box .map .dot9 .round3:hover { transform: scale(1.3); } .content .box .map-box .map .dot9 .round3:hover::after { transform: scale(0.14); } .content .box .map-box .map .dot9 .name-father { width: 0; position: absolute; top: 0.1rem; left: 0.1rem; overflow: hidden; transition: 2s; transition-delay: 0.5s; } .content .box .map-box .map .dot9 .name-father.show { width: 2.9775rem; } .content .box .map-box .map .dot9 .name-box { width: 2.9775rem; height: 1.23578rem; } .content .box .map-box .map .dot9 .name-box .line { width: 100%; height: 1.23578rem; position: absolute; top: 0; left: 0; } .content .box .map-box .map .dot9 .name-box .line img { width: 2.9775rem; } .content .box .map-box .map .dot9 .name-box .name { float: right; position: relative; right: 0; bottom: 0rem; font-size: 0.24rem; font-weight: bold; line-height: 0.24rem; letter-spacing: -0.0075rem; color: #E84127; text-align: right; } .content .box .map-box .map .dot9 .name-box .name span { display: block; font-size: 0.15rem; font-family: DIN; font-weight: bold; color: #333; letter-spacing: -0.0075rem; margin-top: 0.08rem; } .content .box .map-box .map .dot10 { position: absolute; top: 3.2rem; left: 3.5rem; } .content .box .map-box .map .dot10 .round1 { position: absolute; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-image: radial-gradient(rgba(222, 201, 154, 0), #694c45); animation: r1 5s infinite; animation-delay: 1.2s; } .content .box .map-box .map .dot10 .round4 { position: absolute; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-image: radial-gradient(rgba(222, 201, 154, 0), #694c45); animation: r1 5s infinite; animation-delay: 5.2s; } .content .box .map-box .map .dot10 .round3 { position: absolute; z-index: 1; top: 0; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 50%; background-color: #694c45; cursor: pointer; transition: 0.5s; } .content .box .map-box .map .dot10 .round3::after { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background-color: #fff; border-radius: 50%; transform: scale(0.2); transition: 0.5s; } .content .box .map-box .map .dot10 .round3:hover { transform: scale(1.3); } .content .box .map-box .map .dot10 .round3:hover::after { transform: scale(0.14); } .content .box .map-box .map .dot10 .name-father { width: 0; position: absolute; top: 0.1rem; left: 0.1rem; overflow: hidden; transition: 2s; transition-delay: 0.5s; } .content .box .map-box .map .dot10 .name-father.show { width: 2.9775rem; } .content .box .map-box .map .dot10 .name-box { width: 2.9775rem; height: 1.23578rem; } .content .box .map-box .map .dot10 .name-box .line { width: 100%; height: 1.23578rem; position: absolute; top: 0; left: 0; } .content .box .map-box .map .dot10 .name-box .line img { width: 2.9775rem; } .content .box .map-box .map .dot10 .name-box .name { float: right; position: relative; right: 0; bottom: 0rem; font-size: 0.24rem; font-weight: bold; line-height: 0.24rem; letter-spacing: -0.0075rem; color: #E84127; text-align: right; } .content .box .map-box .map .dot10 .name-box .name span { display: block; font-size: 0.15rem; font-family: DIN; font-weight: bold; color: #333; letter-spacing: -0.0075rem; margin-top: 0.08rem; } .content .box .map-box .map .henan { position: absolute; top: 2.05rem; left: 3.65rem; text-align: center; } .content .box .map-box .map .henan .icon { width: 0.3rem; margin: 0 auto; } .content .box .map-box .map .henan .icon img { margin: 0 auto; width: 100%; } .content .box .map-box .map .henan .text { margin-top: 0.05rem; text-align: center; font-size: 0.12rem; line-height: 0.12rem; font-weight: bold; color: #000000; } .content .box .map-box .alert { width: 5.0551rem; height: 2.22rem; background-color: #fff; box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05); position: absolute; top: -0.4275rem; right: 0.5475rem; } .content .box .map-box .alert .top-img { width: 100%; height: 1.485rem; overflow: hidden; position: relative; } .content .box .map-box .alert .top-img img { width: 100%; height: 100%; object-fit: cover; object-position: center center; } .content .box .map-box .alert .text { padding: 0 0.24rem; box-sizing: border-box; width: 100%; height: 0.735rem; display: flex; justify-content: space-between; align-items: center; } .content .box .map-box .alert .text .left .icon, .content .box .map-box .alert .text .left .font { display: inline-block; vertical-align: middle; } .content .box .map-box .alert .text .left .icon { width: 0.135rem; height: 0.165rem; background-image: url(/static/index/img/domestic_04.png); background-repeat: no-repeat; background-size: 100% 100%; } .content .box .map-box .alert .text .left .font { font-size: 0.135rem; line-height: 0.135rem; font-weight: bold; color: #333333; } .content .box .map-box .alert .text .right { font-size: 0.18rem; line-height: 0.18rem; font-weight: bold; color: #000; } .content .box .number { width: 10.48504rem; margin: 0 auto; } .content .box .number .list::after { content: ""; width: 0; height: 0; display: block; float: none; clear: both; } .content .box .number .list .item { width: 2.43001rem; float: left; margin-left: 0.255rem; margin-bottom: 0.3rem; } .content .box .number .list .item .timer { font-family: "Arial"; font-size: 0.45rem; font-weight: bold; line-height: 0.45rem; letter-spacing: -0.015rem; display: inline-block; } .content .box .number .list .item .name { font-size: 0.18rem; font-weight: bold; font-stretch: normal; line-height: 0.18rem; letter-spacing: -0.0075rem; margin-top: 0.18rem; } .content .box .number .list .item .en { font-family: "Arial"; font-size: 0.135rem; line-height: 0.135rem; letter-spacing: -0.0075rem; color: #333333; opacity: 0.5; margin-top: 0.1425rem; } .content .box .number .list .item .line { width: 100%; height: 0.015rem; margin-top: 0.105rem; } .content .box .number .list .item .p { font-size: 0.135rem; line-height: 0.135rem; letter-spacing: -1px; color: #333333; margin-top: 0.1125rem; } .content .box .number .list .item .p span { font-family: "Arial"; } .content .box .number .list .item:first-child { margin-left: 0; } .content .box .number .list .item.item1 { color: #dec99a; } .content .box .number .list .item.item1 .line { background-color: #dec99a; } .content .box .number .list .item.item2 { color: #bd7c59; } .content .box .number .list .item.item2 .line { background-color: #bd7c59; } .content .box .number .list .item.item3 { color: #694c45; } .content .box .number .list .item.item3 .line { background-color: #694c45; } .content .box .number .list .item.item4 { color: #e7b693; } .content .box .number .list .item.item4 .line { background-color: #e7b693; } .content .box .inquire { width: 100%; height: 2.29501rem; margin-top: 0.7725rem; background-color: #2a2a2a; position: relative; overflow: hidden; } .content .box .inquire .img { width: 3.44251rem; height: 3.72001rem; position: absolute; top: -1.08rem; left: 1.47rem; } .content .box .inquire .img img { width: 100%; } .content .box .inquire .left { float: left; width: 3.60001rem; margin-top: 0.5925rem; margin-left: 3.45001rem; position: relative; z-index: 1; } .content .box .inquire .left .h1 { font-size: 0.27rem; font-weight: bold; line-height: 0.27rem; color: #ffffff; opacity: 0.5; margin-top: 0; text-align: left; } .content .box .inquire .left .line { width: 100%; height: 0.0075rem; background-color: white; margin-top: 0.2025rem; opacity: 0.5; } .content .box .inquire .left .p { font-size: 0.135rem; line-height: 0.27rem; color: #ffffff; margin-top: 0.2625rem; } .content .box .inquire .right { width: 1.515rem; height: 0.465rem; float: right; margin-top: 1.02rem; margin-right: 2.40001rem; background-color: #ea222d; transition: 0.3s; position: relative; z-index: 1; } .content .box .inquire .right a { width: 100%; height: 100%; display: block; text-align: center; } .content .box .inquire .right a span { font-size: 0.12rem; line-height: 0.465rem; color: #ffffff; margin-left: 0.2rem; position: relative; } .content .box .inquire .right a span::after { content: ""; width: 0.0375rem; height: 0.135rem; background-color: white; position: absolute; left: -0.1875rem; top: 0.02rem; } .content .box .inquire .right:hover { background-color: #d52029; } .m-area { display: none; } @media screen and (max-width: 1020px) { .in_banner_bot { height: 5rem; } .content .box .nav { margin-left: 5%; margin-top: 0.3rem; } .content .box .nav nav ul li { font-size: 0.25rem; line-height: 0.25rem; } .content .box .title { width: 90%; } .content .box .title .title-box { width: 4.9rem; margin: 0 auto; position: relative; } .content .box .title .title-box .left a { font-size: 0.34615rem; line-height: 0.34615rem; } .content .box .title .title-box .right a { font-size: 0.34615rem; line-height: 0.34615rem; } .content .box .title .title-box .line { width: 0.07212rem; height: 0.25962rem; background-color: #ea222d; position: absolute; bottom: -0.4rem; left: 3.7rem; } .content .box .title .line { margin-top: 0.25rem; } .content .box .map-box { margin-top: 4rem; margin-bottom: 0.2rem; } .content .box .map-box .title { margin-left: 5%; margin-bottom: 4rem; padding-left: 0.15rem; height: 0.4rem; border-left: 0.045rem solid #ea4027; font-size: 0.42rem; line-height: 0.42rem; font-weight: bold; color: #000000; } .content .box .map-box .map { width: 100%; margin: 0 auto; margin-top: 0.14rem; position: relative; } .content .box .map-box .map .henan { position: absolute; top: 29%; left: 29%; text-align: center; } .content .box .map-box .map .dot1 { position: absolute; top: 32%; left: 12%; } .content .box .map-box .map .dot2 { position: absolute; top: 49%; left: 16%; } .content .box .map-box .map .dot3 { position: absolute; top: 29%; left: 16%; } .content .box .map-box .map .dot4 { position: absolute; top: 39%; left: 22%; } .content .box .map-box .map .dot5 { position: absolute; top: 55%; left: 31%; } .content .box .map-box .map .dot6 { position: absolute; top: 45%; left: 36%; } .content .box .map-box .map .dot7 { position: absolute; top: 64%; left: 32%; } .content .box .map-box .map .dot8 { position: absolute; top: 51%; left: 75%; } .content .box .map-box .map .dot9 { position: absolute; top: 45.5%; left: 33%; } .content .box .map-box .map .dot10 { position: absolute; top: 60%; left: 31%; } .content .box .map-box .alert { width: 90%; height: 3rem; background-color: #fff; box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.2); position: absolute; top: -3.4275rem; right: 0.31rem; } .content .box .map-box .alert .top-img { width: 100%; height: 2rem; overflow: hidden; position: relative; } .content .box .map-box .alert .top-img .img-text { font-size: 0.22rem; line-height: 0.22rem; font-weight: bold; color: #FFFFFF; position: absolute; bottom: 0.18rem; right: 0.18rem; } .content .box .map-box .alert .text { padding: 0 0.24rem; box-sizing: border-box; width: 100%; height: 1rem; display: flex; justify-content: space-between; align-items: center; } .content .box .map-box .alert .text .left .icon { width: 0.2rem; height: 0.235rem; background-image: url(../images/core_service_icon_address_black.jpg.png); background-repeat: no-repeat; background-size: 100% 100%; } .content .box .map-box .alert .text .left .font { font-size: 0.28rem; line-height: 0.28rem; font-weight: normal; color: #333333; } .content .box .map-box .alert .text .right { font-size: 0.35rem; line-height: 0.35rem; font-weight: bold; color: #000; } .content .box .number { width: 90%; margin-top: 0.5rem; } .content .box .number .list .item { width: calc(50% - 0.2rem); margin-left: auto; margin-right: 0.4rem; } .content .box .number .list .item:nth-child(2n) { margin-right: 0; } .content .box .number .list .item .p { font-size: 0.2rem; line-height: 0.2rem; } .content .box .inquire { width: 100%; height: 5rem; margin-top: 1.5rem; background-color: #2a2a2a; } .content .box .inquire .img { width: 3.44251rem; height: 3.72001rem; position: absolute; top: 0.5rem; left: 0.47rem; } .content .box .inquire .left { float: none; width: 72%; padding-top: 0.5rem; margin-left: 14%; } .content .box .inquire .left .h1 { font-size: 0.51923rem; font-weight: bold; line-height: 0.51923rem; color: #ffffff; opacity: 0.5; text-align: center; } .content .box .inquire .left .p { font-size: 0.27rem; line-height: 0.4rem; color: #ffffff; margin-top: 0.2625rem; text-align: center; } .content .box .inquire .right { width: 3rem; height: 0.8rem; margin: 0 auto; float: none; margin-top: 0.5rem; margin-right: auto; background-color: #ea222d; transition: 0.3s; } .content .box .inquire .right a span { font-size: 0.24rem; line-height: 0.8rem; color: #ffffff; margin-left: 0.2rem; position: relative; } .content .box .inquire .right a span::after { content: ""; width: 0.0375rem; height: 0.23rem; background-color: white; position: absolute; left: -0.1875rem; top: 0.05rem; } .m-area { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; } .m-area li { flex-shrink: 0; width: 50%; height: 1rem; line-height: 1rem; text-align: center; font-size: 0.28rem; background-color: #f8f8f8; transition: all 0.5s; } .m-area .areaActive { background-color: #EA4027; color: #fff; } } @keyframes r1 { 0% { opacity: 1; transform: scale(0); } 100% { opacity: 0; transform: scale(4); } } @-webkit-keyframes r1 { 0% { opacity: 1; transform: scale(0); } 100% { opacity: 0; transform: scale(4); } } */