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;
position: relative;
z-index: 6;
width: 100%;
height: 100%;
padding: 60px 0 0;
}
/* 第1部分 */
.part1 {
position: relative;
background: url(../images/mbanner1.jpg) no-repeat center center/cover;
}
.video-btn {
position: absolute;
left: 0;
bottom: 1rem;
width: 100%;
text-align: center;
}
.video-btn img {
width: 3rem;
}
/*样式表*/
.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%;
}
.banner img {
width: 100%;
}
/* 第2部分 */
.part2 {
position: relative;
background: url(../images/mpart2_bg.jpg) no-repeat center 0 / cover;
border-bottom: 10px solid #b9d601;
}
.part2 .wrap {
align-items: center;
}
.part2-main {
width: 100%;
padding: 0 0.6rem;
}
.part2-title {
text-align: left;
}
.part2-en {
font: 400 12px/18px '微软雅黑';
color: #fff5e0;
text-transform: uppercase;
opacity: 0;
transform: translate3d(50%, 0, 0);
transition: 0.8s;
}
.part2-ch {
padding: 0 0 0.4rem;
opacity: 0;
transform: translate3d(50%, 0, 0);
transition: 0.8s;
}
.part2-ch img {
width: 7rem;
}
.part2-p {height: 160px;overflow: hidden;font: 400 14px/20px '微软雅黑';color: #fff;text-align: justify;opacity: 0;transform: translate3d(50%, 0, 0);transition: 0.8s;}
.part2-box {
display: flex;
margin-top:20px;
}
.part2-left {
width: 3.4rem;
opacity: 0;
transform: translate3d(50%, 0, 0);
transition: 0.8s;
}
.part2-li {
padding: 0.4rem 0 0.2rem;
}
.part2-li-num {
display: flex;
align-items: flex-end;
font: 400 12px/16px '微软雅黑';
color: #fff;
}
.part2-li-num span {
font: 400 24px/24px '微软雅黑';
color: #b9d601;
}
.part2-li p {
font: 400 12px/18px '微软雅黑';
color: #fff;
}
.part2-more {
width: 2.1rem;
margin-top: 2.1rem;
}
.part2-more a {
display: block;
padding: 0 8px;
border: 1px solid #b9d601;
border-radius: 15px;
}
.part2-more a span {
display: block;
font: 400 12px/24px '微软雅黑';
color: #fff;
background: url(../images/part2_more_san.png) no-repeat right center;
}
.part2-right {
width: 5.4rem;
opacity: 0;
transform: translate3d(50%, 0, 0);
transition: 0.8s;
}
.part2-box ul {
display: flex;
flex-wrap: wrap;
border-right: 1px solid rgba(255, 255, 255, 0.6);
}
.part2-box ul li {
width: 50%;
background: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(255, 255, 255, 0.6);
border-right: 0;
}
.part2-box ul a {
display: block;
position: relative;
padding: 0.4rem 0 0.4rem 0.4rem;
}
.part2-li-img {
position: relative;
width: 0.6rem;
overflow: hidden;
}
.part2-li-img i {
position: relative;
z-index: 1;
display: block;
}
.part2-li-img i img {
width: 100%;
}
.part2-li-name {
padding: 0.6rem 0 0.3rem;
font: 400 16px/20px '微软雅黑';
color: #fff;
}
.part2-li-icon {
width: 10px;
height: 12px;
background: url(../images/part2_li_san.png) no-repeat -12px center;
}
/* 动画 */
.part2.swiper-slide-active .part2-en {
opacity: 1;
transform: translate3d(0, 0, 0);
transition-delay: 1.2s;
}
.part2.swiper-slide-active .part2-ch {
opacity: 1;
transform: translate3d(0, 0, 0);
transition-delay: 1.5s;
}
.part2.swiper-slide-active .part2-p {
opacity: 1;
transform: translate3d(0, 0, 0);
transition-delay: 1.8s;
}
.part2.swiper-slide-active .part2-left {
opacity: 1;
transform: translate3d(0, 0, 0);
transition-delay: 2.1s;
}
.part2.swiper-slide-active .part2-right {
opacity: 1;
transform: translate3d(0, 0, 0);
transition-delay: 2.4s;
}
/* 第3部分 */
.part3 {
position: relative;
background: url(../images/mpart3_bg.jpg) no-repeat center 0 / cover;
}
.part3 .wrap {
align-items: center;
}
.part3-main {
width: 100%;
}
.part3-top {
display: flex;
justify-content: space-between;
padding: 0 0.3rem 0.4rem;
}
.part3-title {
padding-bottom: 0.3rem;
text-align: left;
background: url(../images/mpart3_line.png) no-repeat 0 bottom/8px;
opacity: 0;
transform: translate3d(-50%, 0, 0);
transition: 0.8s;
}
.part3-ch img {
width: 2rem;
}
.part3-en {
font: 400 12px/18px '微软雅黑';
color: #999999;
text-transform: uppercase;
}
.part3-detail {
font: 400 12px/18px '微软雅黑';
color: #000;
text-align: right;
opacity: 0;
transform: translate3d(50%, 0, 0);
transition: 0.8s;
}
.part3-nav {
margin: 0 0 0.4rem;
padding: 0 0.3rem;
opacity: 0;
transform: translate3d(0, 50%, 0);
transition: 0.8s;
}
.part3-nav ul {
display: flex;
}
.part3-nav ul li {
width: 25%;
padding: 0 5px;
background: #004b7d;
}
.part3-nav ul a {
display: block;
font: 400 14px/24px '微软雅黑';
color: #fff;
text-align: center;
}
.part3-box {
display: flex;
padding: 1.8rem 0 0;
background: url(../images/mpart3_rice.png) no-repeat 0 0/3rem;
}
.part3-slide {
position: relative;
width: 3rem;
padding: 6.2rem 0 0 0.6rem;
}
.part3-ad img {
width: 1.5rem;
}
.part3-more {
width: 2.1rem;
}
.part3-more a {
display: block;
padding: 0 8px;
border: 1px solid #000;
border-radius: 15px;
}
.part3-more a span {
display: block;
font: 400 12px/24px '微软雅黑';
color: #000;
background: url(../images/mpart2_more_san.png) no-repeat right center/auto 8px;
}
.marquee {
position: relative;
width: 7rem;
overflow: hidden;
opacity: 0;
transform: translate3d(50%, 0, 0);
transition: 0.8s;
}
.part3-box ul {
display: flex;
position: absolute;
left: 0;
top: 0;
}
.part3-box ul li {
width: 4.6rem;
padding: 0 0.1rem;
}
.part3-box ul a {
display: block;
position: relative;
}
.part3-box ul i {
display: block;
}
.part3-box ul i img {
width: 100%;
}
.part3-li-font {
margin-top: 0.2rem;
text-align: center;
}
.part3-li-name {
font: 400 18px/24px '微软雅黑';
color: #e47018;
}
.part3-li-weight {
font: 400 12px/18px '微软雅黑';
color: #e47018;
}
/* 动画 */
.part3.swiper-slide-active .part3-title {
opacity: 1;
transform: translate3d(0, 0, 0);
transition-delay: 1.2s;
}
.part3.swiper-slide-active .part3-detail {
opacity: 1;
transform: translate3d(0, 0, 0);
transition-delay: 1.2s;
}
.part3.swiper-slide-active .part3-detail {
opacity: 1;
transform: translate3d(0, 0, 0);
transition-delay: 1.5s;
}
.part3.swiper-slide-active .marquee {
opacity: 1;
transform: translate3d(0, 0, 0);
transition-delay: 1.8s;
}
/* 第4部分 */
.part4 {
position: relative;
background: url(../images/mpart4_bg.jpg) no-repeat center 0 / cover;
}
.part4 .wrap {
align-items: center;
}
.part4-main {
position: relative;
width: 9.4rem;
margin: 0 auto;
padding: 0.6rem 0 0;
background: url(../images/mpart4_dun.png) no-repeat right 0/3rem;
}
.part4-title {
text-align: left;
opacity: 0;
transform: translate3d(0, 50%, 0);
transition: 0.8s;
}
.part4-ch {
padding: 0 0 3px;
}
.part4-ch img {
width: 2.4rem;
}
.part4-en {
padding-bottom: 0.3rem;
font: 400 12px/18px '微软雅黑';
color: #000;
text-transform: uppercase;
background: url(../images/part4_line.png) no-repeat 0 bottom/auto 3px;
}
.part4-nav {
padding-top: 0.3rem;
opacity: 0;
transform: translate3d(0, 50%, 0);
transition: 0.6s;
}
.part4-nav ul {
display: flex;
background: #004b7d;
}
.part4-nav ul li {
width: 33.3%;
}
.part4-nav ul a {
display: block;
font: 400 16px/30px '微软雅黑';
color: #fff;
text-align: center;
}
.part4-box {
padding: 0.2rem 0 0;
opacity: 0;
transform: translate3d(0, 50%, 0);
transition: 0.8s;
}
.part4-box ul {
display: flex;
flex-wrap: wrap;
}
.part4-box ul li {
width: 50%;
padding: 2px;
}
.part4-box ul a {
display: block;
position: relative;
}
.part4-box ul i {
display: block;
overflow: hidden;
}
.part4-box ul i img {
width: 100%;
}
.part4-box ul p {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
font: 400 14px/30px '微软雅黑';
color: #fff;
text-align: center;
background: rgba(0, 0, 0, 0.5);
}
.part4-font {
padding: 0.2rem 0 0;
text-align: center;
opacity: 0;
transform: translate3d(0, 50%, 0);
transition: 0.8s;
}
.part4-font img {
width: 100%;
}
/* 动画 */
.part4.swiper-slide-active .part4-title {
opacity: 1;
transform: translate3d(0, 0, 0);
transition-delay: 1.2s;
}
.part4.swiper-slide-active .part4-nav {
opacity: 1;
transform: translate3d(0, 0, 0);
transition-delay: 1.5s;
}
.part4.swiper-slide-active .part4-box {
opacity: 1;
transform: translate3d(0, 0, 0);
transition-delay: 1.8s;
}
.part4.swiper-slide-active .part4-font {
opacity: 1;
transform: translate3d(0, 0, 0);
transition-delay: 2.1s;
}
/* 第5部分 */
.part5 {
position: relative;
background: url(../images/mpart5_bg.jpg) no-repeat center 0 / cover;
}
.part5 .wrap {
align-items: center;
padding-bottom: 2rem;
}
.part5-main {
display: block;
width: 100%;
padding: 0 0.3rem;
}
.part5-logo {
text-align: center;
opacity: 0;
transform: translate3d(0, 50%, 0);
transition: 0.8s;
}
.part5-logo img {
width: 5rem;
}
.part5-font {
padding: 0.1rem 0 0.4rem;
text-align: center;
opacity: 0;
transform: translate3d(0, 50%, 0);
transition: 0.8s;
}
.part5-font img {
width: 6.4rem;
}
.part5-nav {
padding: 0;
opacity: 0;
transform: translate3d(0, 50%, 0);
transition: 0.8s;
}
.part5-nav ul {
display: flex;
background: #004b7d;
}
.part5-nav ul li {
width: 25%;
}
.part5-nav ul a {
display: block;
font: 400 16px/30px '微软雅黑';
color: #fff;
text-align: center;
}
.part5-box {
padding: 0;
opacity: 0;
transform: translate3d(0, 50%, 0);
transition: 0.8s;
}
.part5-box ul a {
display: block;
padding: 0.3rem 0;
border-bottom: 1px solid #004b7d;
}
.new-li-title {
margin-bottom: 0.2rem;
overflow: hidden;
font: bold 16px/24px '微软雅黑';
color: #004b7d;
text-overflow: ellipsis;
white-space: nowrap;
}
.new-li-p {
height: 48px;
overflow: hidden;
font: 400 14px/24px '微软雅黑';
color: #000;
}
.new-li-more {
display: block;
margin-top: 0.2rem;
}
.new-li-more span {
display: block;
width: 100px;
padding: 0 15px;
font: 400 14px/24px '微软雅黑';
color: #004b7d;
background: url(../images/part_icon_blue.png) no-repeat 80px center;
border: 1px solid #004b7d;
border-radius: 12px;
}
.part5-bottom {
position: absolute;
z-index: 1;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
opacity: 0;
transform: translate3d(0, 50%, 0);
transition: 0.8s;
}
.part5-bottom img {
width: 8.2rem;
}
/* 动画 */
.part5.swiper-slide-active .part5-logo {
opacity: 1;
transform: translate3d(0, 0, 0);
transition-delay: 1.2s;
}
.part5.swiper-slide-active .part5-font {
opacity: 1;
transform: translate3d(0, 0, 0);
transition-delay: 1.5s;
}
.part5.swiper-slide-active .part5-nav {
opacity: 1;
transform: translate3d(0, 0, 0);
transition-delay: 1.8s;
}
.part5.swiper-slide-active .part5-box {
opacity: 1;
transform: translate3d(0, 0, 0);
transition-delay: 2.1s;
}
.part5.swiper-slide-active .part5-font {
opacity: 1;
transform: translate3d(0, 0, 0);
transition-delay: 2.4s;
}
.part5.swiper-slide-active .part5-bottom {
opacity: 1;
transform: translate3d(0, 0, 0);
transition-delay: 2.7s;
}
/* 第6部分 */
.part6 {
position: relative;
background: url(../images/mpart6_bg.jpg) no-repeat center 0 / cover;
}
.part6 .wrap {
align-items: center;
}
.part6-main {
width: 100%;
padding: 0 0.3rem;
}
.part6-title {
padding-bottom: 0.8rem;
text-align: center;
opacity: 0;
transform: translate3d(0, 50%, 0);
transition: 0.8s;
}
.part6-title img {
width: 6rem;
}
.part6-font {
text-align: center;
opacity: 0;
transform: translate3d(0, 50%, 0);
transition: 0.8s;
}
.part6-name {
padding-bottom: 0.4rem;
font: 400 18px/24px '微软雅黑';
color: #000;
}
.part6-p {
font: 400 14px/24px '微软雅黑';
color: #000;
}
.part6-ul {
display: flex;
justify-content: center;
padding: 0.8rem 0;
background: url(../images/part6_border.png) no-repeat center center/1px 14px;
opacity: 0;
transform: translate3d(0, 50%, 0);
transition: 0.8s;
}
.part6-li {
display: flex;
align-items: center;
padding: 0 0.4rem;
font: 400 14px/30px '微软雅黑';
color: #000;
}
.part6-li i {
padding: 0 5px;
}
.part6-li img {
width: 0.6rem;
}
.part6-ewm {
opacity: 0;
transform: translate3d(0, 50%, 0);
transition: 0.8s;
}
.part6-ewm ul {
display: flex;
justify-content: center;
}
.part6-ewm ul li {
padding: 0 0.1rem;
}
.part6-ewm ul li a {
display: block;
}
.part6-ewm ul li img {
width: 2rem;
}
.part6-ewm ul li p {
margin-top: 2px;
font: 400 12px/24px '微软雅黑';
color: #fff;
text-align: center;
background: #000;
}
footer {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 60px;
font: 400 14px/24px '微软雅黑';
color: #fff;
opacity: 0;
transform: translate3d(0, 50%, 0);
transition: 0.8s;
}
footer p {
padding: 0 5px;
}
/* 动画 */
.part6.swiper-slide-active .part6-title {
opacity: 1;
transform: translate3d(0, 0, 0);
transition-delay: 1.2s;
}
.part6.swiper-slide-active .part6-font {
opacity: 1;
transform: translate3d(0, 0, 0);
transition-delay: 1.5s;
}
.part6.swiper-slide-active .part6-ul {
opacity: 1;
transform: translate3d(0, 0, 0);
transition-delay: 1.8s;
}
.part6.swiper-slide-active .part6-ewm {
opacity: 1;
transform: translate3d(0, 0, 0);
transition-delay: 2.1s;
}
.part6.swiper-slide-active footer {
opacity: 1;
transform: translate3d(0, 0, 0);
transition-delay: 2.4s;
}