html,
body {
perspective: 1000px;
position: relative;
height: 100%;
overflow: hidden;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
overflow: hidden;
transform-origin: 0 0;
}
.wrap {
display: flex;
align-items: center;
position: relative;
z-index: 6;
width: 100%;
height: 100%;
padding: 60px 0 0;
}
.video-bg {
display: none;
position: fixed;
z-index: 99;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
}
.alerts {
position: absolute;
z-index: 99;
left: 0;
bottom: 10%;
width: 100%;
text-align: center;
}
.alerts img {
width: 40px;
}
.video-bg div {
display: flex;
align-items: center;
position: fixed;
z-index: 1;
width: 100%;
height: 100%;
}
.videos {
width: 100%;
}
.tel400 {
position: absolute;
z-index: 15;
left: 36px;
bottom: 36px;
padding-left: 12px;
background: rgba(0, 0, 0, 0.6);
border-radius: 20px;
}
.tel400 i {
position: absolute;
z-index: 5;
left: -24px;
top: -8px;
padding: 3px;
background: rgba(255, 255, 255, 0.6);
border-radius: 50%;
}
.tel400 i img {
height: 36px;
}
.tel400 p {
padding: 0 10px;
font: bold 12px/24px '微软雅黑';
color: #fff;
}
.m-layer{
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 0;
top: 50;
width: 100%;
height: 100%;
padding: 1rem;
background: rgba(0, 0, 0, 0.6);
}
.m-layer img{
width: 100%;
}
/* 第1部分 */
.part1 {
position: relative;
background: url(../images/mbanner.jpg) no-repeat 0 0/cover;
}
.banner-font {
padding: 3rem 0 0;
text-align: center;
}
.banner-font img {
width: 6.6rem;
}
.video-btn {
position: absolute;
left: 0;
bottom: 2.4rem;
width: 100%;
text-align: center;
}
.video-btn img {
width: 3.4rem;
}
/* 第2部分 */
.part2 {
position: relative;
background: url(../images/mpart2_bg.jpg) no-repeat center 0/cover;
}
.part2-main {
position: relative;
width: 100%;
}
.part2-top {
position: relative;
z-index: 1;
color: #fff;
text-align: center;
}
.part2-en {
font: bold 18px/30px '微软雅黑';
}
.part2-ch {
font: 400 16px/30px '微软雅黑';
}
.part2-bottom {
position: relative;
padding: 0.6rem 0 0;
border-bottom: 1px solid #bcf6f1;
}
.part2-bottom::before {
content: '';
position: absolute;
z-index: 5;
left: 0;
bottom: -9px;
width: 100%;
height: 10px;
background: url(../images/part2_singe.png) no-repeat 1.8rem 0/auto 3px;
}
.part2-bottom ul li {
width: 100%;
padding: 3px 0 0;
border-top: 1px solid #bcf6f1;
}
.part2-bottom ul li a {
position: relative;
z-index: 5;
display: block;
color: #fff;
}
.part2-bottom ul li a::before {
content: '';
position: absolute;
z-index: 5;
left: 0;
top: -5px;
width: 100%;
height: 10px;
background: url(../images/part2_singe.png) no-repeat 1.8rem 0/auto 3px;
}
.part2-border {
display: flex;
align-items: flex-end;
padding: 0.4rem 0.6rem;
}
.part2-li-icon {
margin: 0 0.2rem 0 0;
}
.part2-li-icon img {
width: 1rem;
}
.part2-li-font {
width: 2.2rem;
font: 400 0.48rem/0.64rem '微软雅黑';
}
.part2-li-more {
display: flex;
margin-left: 2.75rem;
text-align: center;
}
.part2-li-more span {
width: 2rem;
height: 0.64rem;
font: 400 0.4rem/0.64rem "微软雅黑";
color: #fff;
background: #000;
}
.part2-li-more i {
width: 0.64rem;
height: 0.64rem;
background: #fff url(../images/san_b.png) no-repeat center center/5px;
}
/* 第3部分 */
.part3 {
position: relative;
background: url(../images/mpart3_bg.jpg) no-repeat center center/cover;
}
.part3-main {
position: relative;
z-index: 5;
width: 100%;
padding: 0 0.3rem 6rem;
}
.part3-title {
padding: 0 0 25px;
}
.part3-title img {
width: 6.16rem;
}
.part3-big {
font: 400 24px/30px "微软雅黑";
color: #000;
}
.part3-small {
width: 6.4rem;
margin: 0 0 0.4rem;
font: 400 0.4rem/0.5rem "微软雅黑";
color: #000;
}
.part3-more {
display: flex;
text-align: center;
}
.part3-more span {
width: 2rem;
height: 0.64rem;
font: 400 0.4rem/0.64rem "微软雅黑";
color: #fff;
background: #a8000f;
}
.part3-more i {
width: 0.64rem;
height: 0.64rem;
background: #000 url(../images/san.png) no-repeat center center/5px;
}
.event {
position: absolute;
z-index: 1;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
background: url(../images/mpart3_line.png) no-repeat center bottom/100%;
}
.event-box {
position: absolute;
z-index: 1;
left: 0;
bottom: 0;
width: 100%;
height: 10rem;
}
.event-li {
position: absolute;
}
.eveny-li-title {
display: flex;
}
.event-li-year {
position: relative;
z-index: 1;
padding: 0 0.1rem;
font: 400 0.4rem/0.6rem '微软雅黑';
color: #fff;
background: #a8000f;
}
.event-li-circle {
position: relative;
z-index: 5;
left: -3px;
top: 9px;
}
.event-li-circle img {
width: 0.2rem;
}
.event-li-p {
margin: 0.6rem 0 0 0.8rem;
font: 400 0.4rem/0.5rem "微软雅黑";
color: #000;
}
.event-li:nth-child(1) {
left: 1.1rem;
bottom: 1.2rem;
}
.event-li:nth-child(2) {
left: 3.2rem;
bottom: 2.4rem;
}
.event-li:nth-child(3) {
left: 5rem;
bottom: 3.8rem;
}
/* 第4部分 */
.part4 {
position: relative;
background: url(../images/mpart4_bg.jpg) no-repeat center center/cover;
}
.part4-main {
position: relative;
width: 100%;
}
.part4-nav {
padding: 0 0 0.8rem;
}
.part4-title {
padding: 0 0 12px;
font: 400 16px/30px '微软雅黑';
color: #fff;
text-align: center;
}
.part4-nav ul {
display: flex;
justify-content: center
}
.part4-nav li {
width: 85px;
padding: 0 2px;
}
.part4-nav li:nth-child(1) a {
padding-right: 15px;
}
.part4-nav li:nth-child(3) a {
padding-left: 15px;
}
.part4-nav li:nth-child(2) {
width: 100px;
}
.part4-nav li a {
display: block;
position: relative;
font: 400 16px/30px '微软雅黑';
color: #fff;
text-align: center;
background: #a8000f;
transform: skew(-30deg);
}
.part4-nav li:nth-child(1) a::before {
content: '';
position: absolute;
z-index: 1;
left: -15px;
top: 0;
width: 30px;
height: 100%;
background: #a8000f;
transform: skew(30deg);
}
.part4-nav li:nth-child(3) a::before {
content: '';
position: absolute;
z-index: 1;
right: -15px;
top: 0;
width: 30px;
height: 100%;
background: #a8000f;
transform: skew(30deg);
}
.part4-nav li a span {
display: block;
position: relative;
z-index: 10;
transform: skew(30deg);
}
.part4-ul {
position: relative;
height: 5.8rem;
}
.part4-ul ul {
position: absolute;
display: flex;
}
.part4-ul ul li {
width: 4.8rem;
padding: 0 0.2rem;
}
.part4-ul ul a {
display: block;
position: relative;
}
.part4-ul ul i {
display: block;
position: relative;
z-index: 1;
overflow: hidden;
background: #fff;
border: 2px solid #000;
}
.part4-ul ul i img {
width: 100%;
}
.pic-li-line {
display: flex;
padding: 0 0.2rem;
font: 400 0.4rem/0.8rem '微软雅黑';
color: #fff;
text-align: center;
background: #000;
}
.pic-li-line p {
width: 1.8rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pic-li-line span {
display: none;
width: 2.6rem;
}
.part4-more {
display: flex;
width: 2.64rem;
margin: 0 auto;
text-align: center;
}
.part4-more span {
width: 2rem;
height: 0.64rem;
font: 400 0.4rem/0.64rem "微软雅黑";
color: #fff;
background: #000;
}
.part4-more i {
width: 0.64rem;
height: 0.64rem;
background: #fff url(../images/san_b.png) no-repeat center center/5px;
}
/* 第5部分 */
.part5 {
position: relative;
background: url(../images/mpart5_bg.jpg) no-repeat center center/cover;
}
.part5-main {
width: 100%;
padding: 0 1.1rem;
}
.part5-title {
width: 2rem;
text-align: center;
background: #000;
}
.part5-title span {
display: block;
font: 400 0.4rem/0.52rem "微软雅黑";
color: #fff;
}
.part5-left a {
display: block;
}
.new-li-img img {
width: 100%;
}
.new-li-time {
padding: 0.2rem 0;
font: 400 12px/18px "微软雅黑";
color: #999999;
}
.new-li-title {
overflow: hidden;
font: 400 18px/30px '微软雅黑';
color: #a8000f;
text-overflow: ellipsis;
white-space: nowrap;
}
.new-li-p {
height: 48px;
overflow: hidden;
margin: 5px 0 0;
font: 400 14px/24px '微软雅黑';
color: #000;
text-align: justify;
}
.new-li-more {
width: 94px;
margin: 10px 0 0;
padding: 0 0 0 20px;
font: 400 14px/20px '微软雅黑';
color: #fff;
background: #000 url(../images/new_more_line.png) no-repeat 5px center/12px;
}
.part5-right {
padding: 0.4rem 0 0;
}
.part5-right a {
display: block;
}
.part5-right img {
width: 100%;
}
/* 第6部分 */
.part6 {
position: relative;
background: url(../images/mpart6_bg.jpg) no-repeat center 0/cover;
}
.part6-main {
width: 100%;
text-align: center;
}
.part6-title {
text-align: center
}
.part6-title img {
width: 8.4rem;
}
.part6-box {
width: 100%;
overflow: auto;
}
.part6-ul {
display: flex;
width: 16.4rem;
margin: 2rem 0 0;
padding: 0 0.2rem 0 0;
}
.part6-li {
width: 5.4rem;
padding: 0 1rem 1rem 1.2rem;
text-align: left;
}
.part6-li:nth-child(1) {
background: url(../images/part6_icon1.png) no-repeat right bottom/1rem;
}
.part6-li:nth-child(2) {
background: url(../images/part6_icon2.png) no-repeat right bottom/1rem;
}
.part6-li:nth-child(3) {
background: url(../images/part6_icon3.png) no-repeat right bottom/1rem;
}
.part6-li-en {
font: 400 16px/30px '微软雅黑';
color: #d1e332;
text-transform: uppercase;
}
.part6-li-ch {
padding: 0 0 10px;
font: 400 14px/24px '微软雅黑';
color: #000;
background: url(../images/part6_line.png) no-repeat 0 bottom;
}
.part6-li-p {
margin: 0.4rem 0 0;
font: 400 14px/24px '微软雅黑';
color: #000;
}
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background: #a8000f;
}
.foot-box {
position: relative;
width: 100%;
padding: 0 10px;
}
.foot-left {
display: flex;
padding: 10px 0;
font: 400 14px/24px '微软雅黑';
color: #fff;
}
.foot-right {
display: flex;
align-items: flex-end;
position: absolute;
right: 10px;
bottom: 10px;
}
.foot-right i {
padding: 0 10px;
}
.foot-right i img {
width: 64px;
}