.banner { position: relative; } .banner img { width: 100%; } .banner .text { position: absolute; width: 100%; top: 46%; color: #fff; } .banner .text h2 { text-align: center; font-size: 2.3rem; font-weight: bold; letter-spacing: 1px; } .banner .text p { text-align: center; font-size: 1.2rem; letter-spacing: 1px; margin-top: 0.6rem; } .sub-nav { height: 4rem; border-bottom: 1px solid #ddd; overflow: hidden; position: relative; top: 0; background: #fff; width: 100%; border-top: 1px solid #ddd; z-index: 100; } .sub-nav .content .left { float: left; } .sub-nav .content .left h6 { line-height: 4rem; font-size: 1.3rem; font-weight: bold; } .sub-nav .content .left h6 span { font-size: 1rem; color: #9f223d; margin-left: 1rem; position: relative; top: -0.1rem; } .sub-nav .content .right { float: right; } .sub-nav .content .right > ul li { float: left; width: 4.6rem; height: 4rem; text-align: center; position: relative; } .sub-nav .content .right > ul li a { line-height: 4rem; font-size: 0.8rem; display: block; } .sub-nav .content .right > ul li:not(:last-child) { margin-right: 2rem; } .sub-nav .content .right > ul li:before { content: ''; width: 0; height: 3px; background: #9f223d; position: absolute; bottom: 0; left: 0; } .sub-nav .content .right > ul li.active:before { width: 100%; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .sub-nav .content .right > ul li.active a { color: #9f223d; } .sub-nav .content .right > ul li:hover:before { width: 100%; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .sub-nav .content .right > ul li:hover a { color: #9f223d; } .china-map { position: relative; } .china-map img { width: 100%; } .china-map .con { position: absolute; width: 100%; top: 15%; } .china-map .con .text h3 { font-size: 1.8rem; font-weight: bold; } .china-map .con .text h2 { font-size: 1.8rem; color: #9f223d; font-weight: bold; margin-bottom: 2.5rem; } .china-map .con .text h4 { font-size: 1.2rem; font-weight: bold; } .china-map .con .text span { font-size: 2rem; color: #9f223d; font-weight: bold; } .china-map .con .text p { font-size: 0.8rem; font-weight: bold; color: #999; } .china-map .con .text .seek { width: 7.9rem; height: 2.5rem; border-radius: 26px; background: #9f223d; margin-top: 2.5rem; } .china-map .con .text .seek a { display: block; text-align: center; line-height: 2.5rem; color: #fff; font-size: 0.8rem; } .china-map .con .text .seek:hover { background: #7a1d2f; } .china-address { position: relative; } .china-address .left { float: left; width: 43.6%; height: 0; padding-bottom: 35%; overflow: hidden; } .china-address .left img { width: 100%; } .china-address .right { float: left; width: 56.4%; height: 0; padding-bottom: 35%; overflow: hidden; } .china-address .right img { width: 100%; } .china-address .con { position: absolute; width: 100%; top: 16%; color: #fff; } .china-address .con .text h2 { font-size: 1.8rem; font-weight: bold; } .china-address .con .text p.address { font-size: 1rem; width: 29%; margin: 1.5rem 0; } .china-address .con .text span.cn { display: block; line-height: 1.4rem; } .china-address .con .text h3 { font-size: 1rem; opacity: 0.5; margin: 1.5rem 0 0.6rem; } .china-address .con .text p.eng { font-size: 0.8rem; opacity: 0.5; width: 34%; margin-bottom: 0.2rem; } .china-address .con .text p.eng span { float: left; } .china-address .con .text p.eng span:first-child { width: 9%; } .china-address .con .text p.eng span:last-child { width: 91%; } .china-address .con .text span.eng { display: block; font-size: 0.8rem; opacity: 0.5; line-height: 1.4rem; } .china-time .left { float: left; width: 28.6%; padding-top: 5rem; } .china-time .left h2 { font-size: 1.6rem; font-weight: bold; padding-bottom: 1.5rem; border-bottom: 1px solid #dcdcdc; } .china-time .left p { font-size: 1rem; color: #666; margin-top: 1.5rem; } .china-time .left p.server { margin-top: 2.5rem; } .china-time .left .tu { margin-top: 4rem; } .china-time .left .tu img { width: 100%; } .china-time .left h3 { font-size: 1.6rem; font-weight: bold; color: #999; margin: 1rem 0; } .china-time .left a { font-size: 0.9rem; color: #9f223d; line-height: 1rem; } .china-time .left a .btn { width: 1rem; height: 1rem; border-radius: 50%; background: #9f223d; text-align: center; display: inline-block; margin-right: 0.4rem; } .china-time .left a .btn span { color: #fff; font-size: 0.6rem; position: relative; top: -2px; left: 1px; } .china-time .left a:hover { color: #7a1d2f; } .china-time .left a:hover .btn { background: #7a1d2f; } .china-time .right { float: right; width: 63%; padding-top: 5rem; } .china-time .right form > div { float: left; width: 100%; margin-top: 1rem; } .china-time .right form > div > div { width: 100%; } .china-time .right form > div > div label { font-size: 1rem; display: block; margin-bottom: 0.5rem; } .china-time .right form > div > div > div input { width: 100%; height: 3rem; border: none; background: #f3f3f5; padding-left: 1rem; font-size: 0.8rem; } .china-time .right form > div > div > div textarea { width: 100%; border: none; background: #f3f3f5; padding: 1rem; font-size: 0.8rem; } .china-time .right form > div:nth-child(3) { width: 47%; } .china-time .right form > div:nth-child(4) { width: 47%; margin-left: 6%; } .china-time .right form > div:nth-child(5) { width: 47%; } .china-time .right form > div:nth-child(6) { width: 47%; margin-left: 6%; } .china-time .right form > div:nth-child(8) { width: 47%; position: relative; } .china-time .right form > div:nth-child(8) .verify-code { position: absolute; right: 0; background: none !important; } .china-time .right form > div:nth-child(8) .verify-change-code { display: none; } .china-time .right form .btn { margin: 3.3rem 0 5rem; } .china-time .right form .btn input { width: 7.9rem; height: 2.5rem; background: #95a2a9; border-radius: 26px; color: #fff; border: none; font-size: 0.8rem; } .china-time .right form .btn input:hover { background: #9f223d; } .china-time .right form .btn input:first-child { margin-right: 1rem; } .china-list { background: #eceef0; padding: 3.5rem 0 5rem; } .china-list .con > ul li { margin-top: 1.5rem; } .china-list .con > ul li .left { float: left; width: 31.1%; height: 0; padding-bottom: 21.5%; overflow: hidden; } .china-list .con > ul li .left img { width: 100%; } .china-list .con > ul li .right { float: left; width: 68.9%; background: #fff; height: 0; padding-bottom: 21.5%; overflow: hidden; } .china-list .con > ul li .right h2 { float: left; width: 28%; font-size: 1.3rem; font-weight: bold; color: #9f223d; padding: 5% 0 0 8.5%; } .china-list .con > ul li .right .address { float: right; width: 72%; padding-top: 6%; padding-right: 8%; position: relative; } .china-list .con > ul li .right .address h4 { font-size: 0.8rem; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; line-height: 1.5; height: 3em; } .china-list .con > ul li .right .address h3 { font-size: 1.2rem; font-weight: bold; margin-top: 1.5rem; margin-bottom: 0.5rem; } .china-list .con > ul li .right .address p { font-size: 0.8rem; color: #999; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; line-height: 1.5; height: 4.5em; } .china-list .con > ul li .right .address:before { content: ''; width: 86%; height: 1px; background: #dcdcdc; position: absolute; left: 0; top: 44%; } @media screen and (max-width: 1500px) { .china-address .con { top: 8%; } } @media screen and (max-width: 1366px) { .china-address .con { top: 7%; } } @media screen and (max-width: 1024px) { .banner { margin-top: 5.5rem; } .banner .text { top: 38%; } .china-address .con { top: 6%; } .china-address .con .text h2 { font-size: 1.5rem; } .china-address .con .text p.address { margin: 0.5rem 0 1rem; } .china-address .con .text h3 { margin: 1rem 0 0.2rem; } .china-list .con > ul li .right .address h3 { margin-top: 1rem; margin-bottom: 0; } .china-list .con > ul li .right .address { padding-top: 5%; } .china-list .con > ul li .right .address:before { top: 40%; } .china-list .con > ul li .right h2 { padding: 4% 0 0 6.5%; } } @media screen and (max-width: 768px) { .banner .text { top: 30%; } .banner .text h2 { font-size: 18px; } .banner .text p { font-size: 13px; margin-top: 0.2rem; } .sub-nav .content .left { display: none; } .sub-nav .content .right { width: 100%; } .sub-nav .content .right > ul li { width: 20%; } .sub-nav .content .right > ul li a { font-size: 12px; } .sub-nav .content .right > ul li:not(:last-child) { margin-right: 0; } .china-map .con { top: 5%; } .china-map .con .text h3 { font-size: 12px; } .china-map .con .text h2 { font-size: 16px; margin-bottom: 0.5rem; } .china-map .con .text h4 { font-size: 12px; } .china-map .con .text span { font-size: 13px; } .china-map .con .text .seek { margin-top: 0.5rem; } .china-map .con .text .seek a { font-size: 14px; } .china-address .left { width: 100%; padding-bottom: 74%; } .china-address .right { width: 100%; } .china-address .con .text h2 { font-size: 16px; } .china-address .con .text p { font-size: 13px; } .china-address .con .text p.address { width: 100%; } .china-address .con .text p.eng { width: 100%; font-size: 13px; } .china-address .con .text span { font-size: 13px; } .china-address .con .text span.eng { font-size: 13px; } .china-time .left { width: 100%; padding-top: 1.5rem; } .china-time .left h2 { font-size: 16px; padding-bottom: 1rem; } .china-time .left p { font-size: 13px; } .china-time .left p.server { margin-top: 1.5rem; } .china-time .left .tu { margin-top: 2rem; } .china-time .left h3 { font-size: 16px; } .china-time .left a { font-size: 14px; } .china-time .left a .btn { width: 14px; height: 14px; } .china-time .left a .btn span { top: 0; } .china-time .right { width: 100%; padding-top: 2rem; } .china-time .right form > div > div label { font-size: 13px; } .china-time .right form .btn input { width: 8rem; height: 3rem; font-size: 14px; } .china-list { padding: 0.5rem 0 5rem; } .china-list .con > ul li .left { width: 100%; padding-bottom: 69.5%; } .china-list .con > ul li .right { width: 100%; padding-bottom: 58%; } .china-list .con > ul li .right h2 { width: 100%; font-size: 18px; padding: 0; padding: 5% 3% 3% 3%; } .china-list .con > ul li .right .address { width: 100%; padding-left: 3%; padding-right: 3%; padding-top: 0; } .china-list .con > ul li .right .address h4 { font-size: 13px; } .china-list .con > ul li .right .address h3 { margin-top: 1rem; font-size: 14px; } .china-list .con > ul li .right .address p { font-size: 13px; } .china-list .con > ul li .right .address:before { display: none; } } /*# sourceMappingURL=about_china.css.map */