.body .top-title { text-align: center; width: 100%; padding-top: 1.5rem; } .body .top-title p { font-size: 0.4rem; font-family: Microsoft YaHei; font-weight: bold; line-height: 0.46rem; color: #1CB0F7; } .body .top-title span { margin: 0 auto; margin-top: 0.3rem; display: block; width: 0.41rem; height: 0.07rem; background: #1CB0F7; } .body .module-first { position: relative; width: 100%; } .body .module-first .top-img { width: 100%; height: 100%; } .body .module-first p { position: absolute; z-index: 2; top: 2.7rem; width: 100%; text-align: center; font-size: 0.4rem; font-family: Microsoft YaHei; font-weight: bold; line-height: 0.46rem; color: #FFFFFF; } .body .module-second { background-color: #fff; padding-left: 1.7rem; display: flex; justify-content: space-between; width: calc(100% - 1.7rem); position: relative; padding-bottom: 1.7rem; } .body .module-second .left { z-index: 2; padding-top: 1.98rem; width: calc(54.2% - 0.22rem); padding-right: 0.22rem; } .body .module-second .left .title { font-size: 0.4rem; font-family: Microsoft YaHei; font-weight: bold; line-height: 0.6rem; color: #1CB0F7; } .body .module-second .left .subtitle-bottom { margin: 0.3rem 0; display: block; width: 0.41rem; height: 0.07rem; background: #1CB0F7; } .body .module-second .left p { padding-top: 0.4rem; font-size: 0.16rem; font-family: Microsoft YaHei; font-weight: 400; line-height: 0.36rem; /* color: #A5A5A5; */ } .body .module-second .right { z-index: 2; padding-top: 1.62rem; width: 45.8%; height: 6.64rem; } .body .module-second .right img { width: 100%; height: 100%; } .body .module-second .bg { position: absolute; bottom: 0; width: calc(100% - 1.7rem); } .body .module-third { background: #fff; overflow-x: hidden; } .body .module-third .bottom-timer { margin-top: 0.74rem; } .body .module-third .bottom-timer .development { width: 12.6rem; margin: 0 auto; overflow: hidden; } .body .module-third .bottom-timer .development #cul-swiper li { display: flex; justify-content: flex-start; align-items: center; position: relative; height: 100%; } .body .module-third .bottom-timer .development #cul-swiper li .bgc_number { position: absolute; left: 0; top: 0; width: 100%; height: 3rem; display: flex; justify-content: center; align-items: flex-start; color: #F1F1F1; opacity: 0.24; font-size: 1.5rem; z-index: 80; padding-left: 1rem; margin-top: -0.2rem; } .body .module-third .bottom-timer .development #cul-swiper li .dev_pic { width: 4.52rem; height: 4.87rem; overflow: hidden; } .body .module-third .bottom-timer .development #cul-swiper li .dev_pic img { width: 100%; height: 100%; } .body .module-third .bottom-timer .development #cul-swiper li .dev_content { width: calc(100% - 4.52rem); padding-left: 2.03rem; box-sizing: border-box; } .body .module-third .bottom-timer .development #cul-swiper li .dev_content .title { font-size: 0.34rem; font-weight: bold; line-height: 0.24rem; color: #141414; opacity: 1; padding-bottom: 0.26rem; } .body .module-third .bottom-timer .development #cul-swiper li .dev_content .decribe { width: 5.79rem; font-size: 0.16rem; line-height: 0.28rem; color: #666666; } .body .module-third .bottom-timer .timer { margin-top: 0.25rem; /* margin-top: 1rem; */ position: relative; width: 100%; height: 0.88rem; list-style: none; display: flex; align-items: center; } .body .module-third .bottom-timer .timer .dot-line-parent { width: 12.6rem; height: 100%; margin: 0 auto; padding: 0 0.5rem; overflow: hidden; position: relative; z-index: 22; } .body .module-third .bottom-timer .timer #yearList { margin: 0 auto; display: flex; justify-content: flex-start; align-items: center; height: 100%; transition: all 0.3s ease-in-out; } .body .module-third .bottom-timer .timer #yearList::after { content: ""; display: table; clear: both; } .body .module-third .bottom-timer .timer #yearList li { display: inline-block; height: 100%; } .body .module-third .bottom-timer .timer #yearList li > div { text-align: center; position: relative; display: flex; justify-content: flex-start; align-items: center; width: 2.49rem; font-size: 0; height: 100%; } .body .module-third .bottom-timer .timer #yearList li > div i { background-color: #909090; z-index: 25; display: inline-block; width: 0.08rem; height: 0.08rem; border-radius: 50%; cursor: pointer; transition: all 0.3s ease-in-out; } .body .module-third .bottom-timer .timer #yearList li > div .line { position: relative; z-index: 2; display: inline-block; height: 2px; background-color: transparent; width: 0; } .body .module-third .bottom-timer .timer #yearList li > div .value { top: 0.5rem; left: 0%; margin-left: -0.16rem; font-size: 0.16rem; position: absolute; color: #909090; cursor: pointer; } .body .module-third .bottom-timer .timer .year-active > div .value { color: #1CB0F7 !important; } .body .module-third .bottom-timer .timer .year-active > div i { background-color: #1CB0F7 !important; } .body .module-third .bottom-timer .timer .year-active > div .line { transition: width 3s ease-in-out; width: calc(100% - 0.08rem) !important; background-color: #1CB0F7 !important; } .body .module-third .bottom-timer .timer .year-active > div .year-dot { background-color: #1CB0F7 !important; z-index: 25; } .body .module-third .bottom-timer .timer .dotted-line { height: 1px; background-color: #eeeeee; position: absolute; top: 50%; margin-top: -0.5px; z-index: 0; width: 100%; } .body .module-third .bottom-timer .timer .left_btn { position: absolute; left: 0.8rem; top: 50%; margin-top: -0.22rem; width: 0.44rem; height: 0.44rem; background-color: #E9E9E9; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 23; transition: all 0.3s ease-in-out; } .body .module-third .bottom-timer .timer .left_btn:hover { background: linear-gradient(276deg, #7BCFEB 0%, #5DBEFF 100%); transition: all 0.3s ease-in-out; } .body .module-third .bottom-timer .timer .left_btn:hover svg #left { fill: #fff; transition: all 0.3s ease-in-out; } .body .module-third .bottom-timer .timer .right_btn { position: absolute; right: 0.8rem; top: 50%; margin-top: -0.22rem; width: 0.44rem; height: 0.44rem; background-color: #E9E9E9; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 23; transition: all 0.3s ease-in-out; } .body .module-third .bottom-timer .timer .right_btn:hover { background: linear-gradient(276deg, #7BCFEB 0%, #5DBEFF 100%); transition: all 0.3s ease-in-out; } .body .module-third .bottom-timer .timer .right_btn:hover svg #right { fill: #fff; transition: all 0.3s ease-in-out; } .body .module-culture { background: #fff; } .body .module-culture .bottom-contant { width: 13.8rem; margin: 0 auto; margin-top: 0.4rem; display: flex; flex-direction: column; padding-bottom: 2.3rem; } .body .module-culture .bottom-contant img { font-size: 0; } .body .module-culture .bottom-contant .line { display: flex; height: 3.53rem; overflow-y: hidden; } .body .module-culture .bottom-contant .line .first, .body .module-culture .bottom-contant .line .second { width: 25%; height: 100%; background: #F5F5F5; display: flex; align-items: center; font-size: 0; } .body .module-culture .bottom-contant .line .first > div, .body .module-culture .bottom-contant .line .second > div { text-align: center; } .body .module-culture .bottom-contant .line .first > div > p:first-child, .body .module-culture .bottom-contant .line .second > div > p:first-child { display: inline; } .body .module-culture .bottom-contant .line .first p, .body .module-culture .bottom-contant .line .second p { margin-top: 0.47rem; height: 0.93rem; font-size: 1.04rem; font-family: Microsoft YaHei; font-weight: bold; line-height: 1.56rem; color: #333333; position: relative; } .body .module-culture .bottom-contant .line .first p span, .body .module-culture .bottom-contant .line .second p span { position: absolute; right: 0; bottom: 0.15rem; font-size: 0.16rem; font-weight: 400; background: #F5F5F5; height: 0.5rem; width: 0.45rem; line-height: 0.5rem; } .body .module-culture .bottom-contant .line .first p:last-child, .body .module-culture .bottom-contant .line .second p:last-child { font-size: 0.14rem; font-family: Microsoft YaHei; font-weight: 400; line-height: 0.24rem; color: #707376; padding: 0 0.5rem; margin: 0 auto; margin-top: 0.1rem; text-align: left; } .body .module-culture .bottom-contant .line .second { background: #fff; } .body .module-culture .bottom-contant .line .second p span { background-color: #fff; width: 0.6rem; text-align: center; } .body .module-culture .bottom-contant .line .second p:last-child { padding: 0 0.4rem; } .body .module-culture .bottom-contant .line .third { width: 50%; } .body .module-culture .bottom-contant .line img { height: 100%; } .body .module-culture .bottom-contant .line-second { display: flex; height: 3.53rem; overflow-y: hidden; } .body .module-culture .bottom-contant .line-second .first { width: 50%; } .body .module-culture .bottom-contant .line-second .third, .body .module-culture .bottom-contant .line-second .second { width: 25%; background: #333333; display: flex; flex-direction: column; align-items: center; } .body .module-culture .bottom-contant .line-second .third p, .body .module-culture .bottom-contant .line-second .second p { margin-top: 0.47rem; font-size: 1.04rem; font-family: Microsoft YaHei; font-weight: bold; line-height: 1.56rem; color: #fff; position: relative; } .body .module-culture .bottom-contant .line-second .third p span, .body .module-culture .bottom-contant .line-second .second p span { position: absolute; right: 0; bottom: 0.25rem; font-size: 0.16rem; font-weight: 400; background: #333333; color: #fff; height: 0.5rem; line-height: 0.5rem; width: 0.63rem; text-align: center; } .body .module-culture .bottom-contant .line-second .third p:last-child, .body .module-culture .bottom-contant .line-second .second p:last-child { font-size: 0.14rem; font-family: Microsoft YaHei; font-weight: 400; line-height: 0.24rem; color: #707376; padding: 0 0.5rem; margin: 0 auto; margin-top: 0.1rem; text-align: left; } .body .module-culture .bottom-contant .line-second .third { background: #fff; } .body .module-culture .bottom-contant .line-second .third p { color: #333; } .body .module-culture .bottom-contant .line-second .third p span { background-color: #fff; text-align: center; color: #333; width: 0.62rem; } .body .module-culture .bottom-contant .line-second .third p:last-child { padding: 0 0.4rem; } .pro-btn { width: 1.73rem; height: 0.57rem; background: linear-gradient(276deg, #7BCFEB 0%, #5DBEFF 100%); border-radius: 0.3rem; color: #fff; display: flex; justify-content: center; align-items: center; left: 0; right: 0; font-size: 0.14rem; cursor: pointer; } .pro-btn i { padding-left: .18rem; } .pro-btn:hover { background: #FFFFFF !important; box-shadow: 0px .03rem .06rem rgba(0, 0, 0, 0.16); color: #515151 !important; } @media screen and (max-width: 768px) { .header .logo { width: 2.57rem; } .body .module-first .top-img { font-size: 0; } .body .module-first p { top: 1.4rem; font-size: 0.3rem; } .body .module-second { padding: 0 0.25rem; box-sizing: border-box; display: flex; width: 100%; flex-direction: column; } .body .module-second .left .pro-btn { height: 0.47rem; font-size: 0.12rem; } .body .module-second .left { padding: 0; padding-top: 0.4rem; width: 100%; } .body .module-second .left span { margin: 0.15rem 0; } .body .module-second .left .title { font-size: 0.3rem; line-height: 0.36rem; } .body .module-second .left .decribe p { padding: 0; padding-bottom: 0.2rem; } .body .module-second .right { width: 100%; padding-top: 0.2rem; height: auto; } .body .module-third .top-title { padding-top: 0.5rem; font-size: 0.3rem; line-height: 0.36rem; } .body .module-third .top-title p { font-size: 0.3rem; line-height: 0.36rem; } .body .module-third .top-title span { margin: 0.15rem auto; } .body .module-third #cList { width: 100%; } .body .module-third #yearList { display: flex; } .body .module-third .left_btn, .body .module-third .right_btn { top: 0.2rem; } .body .module-third .dotted-line { /* top: -0.66rem !important; */ } .body .module-third .development #cul-swiper { width: 12.6rem; } .body .module-third .bottom-timer{ margin-top: 0.37rem; } .body .module-third .bottom-timer .development #cul-swiper { width: 100%; } .body .module-third .bottom-timer .development #cul-swiper li { display: block; } .body .module-third .bottom-timer .development #cul-swiper li .dev_pic { width: 100%; text-align: center; box-sizing: border-box; padding: 0 0.25rem; } .body .module-third .bottom-timer .development #cul-swiper li .dev_pic img { margin: 0 auto; } .body .module-third .bottom-timer .development #cul-swiper li .dev_content { width: 100%; padding: 0 0.2rem; padding-top: 0.2rem; box-sizing: border-box; } .body .module-third .bottom-timer .development #cul-swiper li .dev_content .decribe { width: 100%; } .body .module-third .bottom-timer .timer { margin-top: 0.25rem; margin-bottom: 0.25rem; } .body .module-third .bottom-timer .timer .dot-line-parent { display: none; } .body .module-third .bottom-timer .timer .dotted-line { display: none; } .body .module-third .bottom-timer .timer .right_btn, .body .module-third .bottom-timer .timer .left_btn { width: 0.3rem; height: 0.3rem; margin-top: -0.15rem; text-align: center; } .body .module-third .bottom-timer .timer .right_btn svg, .body .module-third .bottom-timer .timer .left_btn svg{ width: 40%; } .body .module-third .bottom-timer .timer .left_btn { left: 0.08rem; } .body .module-third .bottom-timer .timer .right_btn { right: 0.08rem; } .body .module-third .bottom-timer .timer #yearList li { padding: 0.1rem 0; } .body .module-culture .top-title { padding-top: 0.5rem; font-size: 0.3rem; line-height: 0.36rem; } .body .module-culture .top-title p { font-size: 0.3rem; line-height: 0.36rem; } .body .module-culture .top-title span { margin: 0.15rem auto; } .body .module-culture .bottom-contant { padding: 0 0.25rem; box-sizing: border-box; width: 100%; } .body .module-culture .bottom-contant .line { display: flex; flex-direction: column; height: auto; } .body .module-culture .bottom-contant .line .third { height: auto !important; } .body .module-culture .bottom-contant .line .first, .body .module-culture .bottom-contant .line .second, .body .module-culture .bottom-contant .line .third { width: 100%; height: 4rem; } .body .module-culture .bottom-contant .line .first img, .body .module-culture .bottom-contant .line .second img, .body .module-culture .bottom-contant .line .third img { width: 100%; } .body .module-culture .bottom-contant .line-second { display: flex; flex-direction: column; height: auto; } .body .module-culture .bottom-contant .line-second .first { height: auto !important; } .body .module-culture .bottom-contant .line-second .first, .body .module-culture .bottom-contant .line-second .second, .body .module-culture .bottom-contant .line-second .third { width: 100%; height: 3.4rem; } .body .module-culture .bottom-contant .line-second .first img, .body .module-culture .bottom-contant .line-second .second img, .body .module-culture .bottom-contant .line-second .third img { width: 100%; } .bottom .bottom_list { display: flex; flex-direction: column-reverse; margin-bottom: 0.6rem; } .bottom .bottom_list .bottom_a { width: 100% !important; display: flex; flex-wrap: wrap; } .bottom .bottom_list .bottom_a ul { margin-bottom: 0.4rem; } .bottom .bottom_QR { width: auto !important; } .bottom .bottom_QR img { margin: 0 !important; } .bottom .bottom_copyright { padding: 0.25rem; width: calc(100% - 0.5rem) !important; } .bottom .bottom_copyright .center { display: flex; flex-direction: column; text-align: center; padding-bottom: 0.25rem; } .body .module-third .bottom-timer .mb-timer .year-active > div .line{ width: calc(100% / 2 + 0.04rem) !important; } .body .module-third .bottom-timer .mb-timer #yearList li { width: calc(100% / 2 - 0.04rem) !important; } }