html,
body {
perspective: 1000px;
position: relative;
height: 100%;
overflow: hidden;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
overflow: hidden;
transform-origin: 0 0;
}
.swiper-container-vertical>.swiper-pagination-bullets {
z-index: 99;
right: 1%;
}
.swiper-pagination-bullet {
width: 20px;
height: 36px;
margin: 0 0 20px;
background: url(../images/icon.png) no-repeat center center;
opacity: 1;
}
.swiper-pagination-bullet-active {
background: url(../images/icona.png) no-repeat center center;
}
.wrap {
display: flex;
position: relative;
z-index: 6;
width: 100%;
height: 100%;
padding-bottom: 54px;
}
footer {
display: flex;
justify-content: center;
position: absolute;
z-index: 50;
left: 0;
bottom: 0;
width: 100%;
font: 400 16px/56px '微软雅黑';
color: #fff;
background: #000;
}
footer p {
padding: 0 5px;
}
.part-bg {
position: absolute;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
transform: matrix(1, 0, 0, 1, 0, 0);
transform-origin: center center;
transition: 10s;
}
.part-bg img {
width: 100%;
}
/* 第1部分 */
.part1 {
position: relative;
background: url(../images/part1_bg.jpg) no-repeat center center/cover;
}
.video-layer {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
.video-layer img {
width: 100%;
}
/* 第2部分 */
.part2 {
position: relative;
/* background: url(../images/part2_bg.jpg) no-repeat center 0 / cover; */
}
.part2-bg {
transform: matrix(1.2, 0, 0, 1.2, 0, 0);
}
.part2 .wrap {
align-items: center;
}
.part2-main {
position: relative;
width: 1200px;
margin: 0 auto;
padding: 0 0 0 70px;
}
.part2-name {
padding: 0 0 10px;
text-align: left;
opacity: 0;
transform: translate3d(50%, 0, 0);
transition: 1s;
}
.part2-detail {
width: 600px;
height: 72px;
overflow: hidden;
font: 400 16px/36px '微软雅黑';
color: #202020;
opacity: 0;
transform: translate3d(50%, 0, 0);
transition: 1s;
}
.part2-detail span {
font-size: 21px;
color: #9d0d07;
}
.part2-title {
margin-top: 50px;
font: 400 30px/36px '微软雅黑';
color: #9d0d07;
opacity: 0;
transform: translate3d(50%, 0, 0);
transition: 1s;
}
.part2-p {
width: 540px;
height: 120px;
overflow: hidden;
font: 400 16px/30px '微软雅黑';
color: #000;
opacity: 0;
transform: translate3d(50%, 0, 0);
transition: 1s;
}
.part2-ul {
display: flex;
margin: 60px 0 0;
opacity: 0;
transform: translate3d(50%, 0, 0);
transition: 1s;
}
.part2-li {
padding-right: 15px;
}
.part2-li-top {
display: flex;
align-items: flex-end;
padding-right: 15px;
font: 400 14px/1 '微软雅黑';
color: #000;
border-right: 2px solid #000;
}
.part2-li:last-child .part2-li-top {
border: 0;
}
.part2-li-top span {
font: 400 56px/42px '微软雅黑';
color: #9d0d07;
}
.part2-li p {
padding: 15px 0 0;
font: 400 14px/20px '微软雅黑';
color: #9d0d07;
}
.part2-img {
position: absolute;
right: -72px;
bottom: -72px;
opacity: 0;
transform: translate3d(50%, 0, 0);
transition: 1s;
}
/* 动画 */
.part2.swiper-slide-active .part2-bg {
transform: matrix(1, 0, 0, 1, 0, 0);
transition-delay: 0.8s;
}
.part2.swiper-slide-active .part2-name {
opacity: 1;
transform: translate3d(0, 0, 0);
transition-delay: 1.2s;
}
.part2.swiper-slide-active .part2-detail {
opacity: 1;
transform: translate3d(0, 0, 0);
transition-delay: 1.4s;
}
.part2.swiper-slide-active .part2-title {
opacity: 1;
transform: translate3d(0, 0, 0);
transition-delay: 1.6s;
}
.part2.swiper-slide-active .part2-p {
opacity: 1;
transform: translate3d(0, 0, 0);
transition-delay: 1.8s;
}
.part2.swiper-slide-active .part2-ul {
opacity: 1;
transform: translate3d(0, 0, 0);
transition-delay: 2s;
}
.part2.swiper-slide-active .part2-img {
opacity: 1;
transform: translate3d(0, 0, 0);
transition-delay: 2.2s;
}
/* 第3部分 */
.part3 {
position: relative;
/* background: url(../images/part3_bg.jpg) no-repeat center 0 / cover; */
}
.part3-bg {
transform: matrix(1, 0, 0, 1, 0, 0);
}
.part3 .wrap {
align-items: center;
}
.part3-main {
perspective: 1000px;
width: 1200px;
margin: 0 auto;
}
.part3-title {
text-align: center;
opacity: 0;
transform: translate3d(0, -50%, 0);
transition: 1s;
}
.part3-box {
padding: 60px 0 0;
opacity: 0;
transform: rotateX(-60deg);
transition: 1s;
}
.part3-box ul {
display: flex;
}
.part3-box ul li {
width: 400px;
padding: 0 15px;
}
.part3-box ul li a {
display: block;
height: 485px;
padding: 35px 0 0 0;
background: url(../images/pic_li_bg.png) no-repeat 0 0;
transition: 1s;
}
.pic-li-border {
position: relative;
margin-left: 35px;
padding: 40px 0 0;
background: url(../images/pic_border.png) no-repeat 0 0;
}
.pic-li-name {
font: 400 48px/56px '微软雅黑';
color: #fff;
text-align: center;
}
.pic-li-weight {
position: absolute;
left: -20px;
top: 150px;
color: #fff;
text-align: center;
}
.pic-li-weight p {
margin: 0 0 15px;
font: bold 30px/36px '微软雅黑';
color: #fff;
}
.pic-li-weight span {
display: block;
width: 100px;
font: 400 20px/30px '微软雅黑';
border: 3px solid #fff;
}
.pic-li-img {
padding: 30px 0 0 85px;
}
.pic-li-img img {
width: 228px;
}
.pic-li-kind {
margin: 15px 0 0;
padding-right: 35px;
font: 400 16px/36px '微软雅黑';
color: #fff;
text-align: center;
}
.part3-box ul li a:hover {
background-image: url(../images/pic_lia_bg.png);
}
.part3-box ul li a:hover .pic-li-kind {
color: #000;
}
/* 动画 */
.part3.swiper-slide-active .part3-bg {
transform: matrix(1.2, 0, 0, 1.2, 0, 0);
transition-delay: 0.8s;
}
.part3.swiper-slide-active .part3-title {
opacity: 1;
transform: translate3d(0, 0, 0);
transition-delay: 1.2s;
}
.part3.swiper-slide-active .part3-box {
opacity: 1;
transform: rotateX(0);
transition-delay: 1.2s;
}
/* 第4部分 */
.part4 {
position: relative;
/* background: url(../images/part4_bg.jpg) no-repeat center 0 / cover; */
}
.part4-bg {
transform: matrix(1.2, 0, 0, 1.2, 0, 0);
}
.part4 .wrap {
align-items: center;
}
.part4-main {
perspective: 1000px;
width: 1200px;
margin: 0 auto;
}
.part4-title {
text-align: center;
opacity: 0;
transform: rotateY(-120deg);
transition: 1s;
}
.part4-box {
padding-left: 460px;
}
.part4-box ul {
width: 740px;
height: 420px;
overflow: hidden;
opacity: 0;
transform: rotateY(120deg);
transition: 1s;
}
.part4-box ul li {
height: 160px;
padding: 0 140px 0 0;
overflow: hidden;
transform: translate3d(140px, 0, 0);
transition: 0.6s;
}
.part4-box ul li:nth-child(1) {
margin-bottom: 20px;
}
.part4-box ul li a {
position: relative;
display: block;
padding: 35px 25px 0 150px;
color: #000;
}
.new-li-time {
position: absolute;
left: 35px;
top: 35px;
background: url(../images/new_line.png) no-repeat center 0;
}
.new-li-day {
padding-left: 10px;
font: 400 28px/42px '微软雅黑';
}
.new-li-month {
padding-left: 30px;
font: bold 42px/42px '微软雅黑';
}
.new-li-title {
font: bold 26px/30px '微软雅黑';
}
.new-li-p {
height: 60px;
overflow: hidden;
margin: 30px 0 0;
font: 400 14px/30px '微软雅黑';
}
.new-li-arrow {
padding: 30px 0;
opacity: 0;
}
.part4-box ul li:hover {
height: 240px;
transform: translate3d(0, 0, 0);
}
.part4-box ul li:hover {
background: url(../images/part4_li_bg.png) no-repeat 0 center/100% 100%;
}
.part4-box ul li:hover a {
color: #fff;
}
.part4-box ul li:hover .new-li-time {
background-image: url(../images/new_linea.png);
}
.part4-box ul li:hover .new-li-arrow {
opacity: 1;
}
/* 动画 */
.part4.swiper-slide-active .part4-bg {
transform: matrix(1, 0, 0, 1, 0, 0);
transition-delay: 0.8s;
}
.part4.swiper-slide-active .part4-title {
opacity: 1;
transform: rotateY(0);
transition-delay: 1.2s;
}
.part4.swiper-slide-active .part4-box ul {
opacity: 1;
transform: rotateY(0);
transition-delay: 1.2s;
}
/* 第5部分 */
.part5 {
position: relative;
background: url(../images/part5_bg.jpg) no-repeat center 0 / cover;
}
.part5-bg {
transform: matrix(1, 0, 0, 1, 0, 0);
}
.part5 .wrap {
align-items: center;
}
.part5-main {
width: 1200px;
margin: 0 auto;
}
.part5-title {
text-align: center;
opacity: 0;
transform: translate3d(0, -50%, 0);
transition: 1s;
}
.part5-box {
padding: 45px 0 0;
}
.part5-box ul {
display: flex;
justify-content: space-around;
}
.part5-box ul li {
width: 283px;
border: 3px solid #fff;
opacity: 0;
transform: translate3d(0, 50%, 0);
transition: 1s;
}
.part5-box ul li a {
display: block;
position: relative;
color: #fff;
background: #9d0d07;
}
.part5-li-img img {
width: 100%;
opacity: 0.2;
transition: 0.6s;
}
.part5-li-border {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-align: center;
background: url(../images/part5_border.png) no-repeat center center;
}
.part5-li-big {
padding: 70px 0 30px;
font: 400 60px/1 '微软雅黑';
}
.part5-li-font {
padding: 0 0 40px;
font: 400 20px/30px '微软雅黑';
}
.part5-li-logo {
transition: 0.3s;
}
.part5-box ul li a:hover .part5-li-img img {
opacity: 1;
}
.part5-box ul li a:hover .part5-li-logo {
opacity: 0;
}
/* 动画 */
.part5.swiper-slide-active .part5-bg {
transform: matrix(1.2, 0, 0, 1.2, 0, 0);
transition-delay: 0.8s;
}
.part5.swiper-slide-active .part5-title {
opacity: 1;
transform: translate3d(0, 0, 0);
transition-delay: 1.2s;
}
.part5.swiper-slide-active .part5-box ul li {
opacity: 1;
transform: translate3d(0, 0, 0);
transition-delay: 1.4s;
}
.part5.swiper-slide-active .part5-box ul li:nth-child(2) {
transition-delay: 1.6s;
}
.part5.swiper-slide-active .part5-box ul li:nth-child(3) {
transition-delay: 1.8s;
}
/* 第6部分 */
.part6 {
position: relative;
/* background: url(../images/part6_bg.jpg) no-repeat center 0 / cover; */
}
.part6-bg {
transform: matrix(1, 0, 0, 1, 0, 0);
}
.part6 .wrap {
align-items: center;
}
.part6-main {
width: 1200px;
margin: 0 auto;
}
.part6-title {
text-align: center;
opacity: 0;
transform: translate3d(0, -50%, 0);
transition: 1s;
}
.part6-box {
display: flex;
justify-content: space-between;
align-items: center;
width: 1100px;
height: 510px;
margin: 0 auto;
padding: 0 40px;
background: url(../images/part6_con.png) no-repeat center 0;
opacity: 0;
transform: scale(1.2);
transition: 1s;
}
.part6-left {
width: 360px;
font: 400 22px/30px '微软雅黑';
color: #fff;
}
.part6-left p {
padding: 10px 0;
}
.part6-right {
width: 360px;
text-align: right;
}
/* 动画 */
.part6.swiper-slide-active .part6-bg {
transform: matrix(1.2, 0, 0, 1.2, 0, 0);
transition-delay: 0.8s;
}
.part6.swiper-slide-active .part6-title {
opacity: 1;
transform: translate3d(0, 0, 0);
transition-delay: 1.2s;
}
.part6.swiper-slide-active .part6-box {
opacity: 1;
transform: scale(1);
transition-delay: 1.5s;
}
@media (max-width: 1480px) {
.wrap {
padding-bottom: 36px;
}
footer {
font-size: 14px;
line-height: 36px;
}
.video-layer,
.part2-main,
.part3-main,
.part4-main,
.part5-main,
.part6-main {
transform: scale(0.8);
transform-origin: center center;
}
.part3-box {
padding-top: 45px;
}
}
.fixed {
display: none;
}
@media (min-width: 1200px) {
/* 悬浮执照 */
.fixed {
display: block;
position: fixed;
z-index: 9999;
right: 0;
bottom: 0;
background: #fff;
}
.fiexd-top {
padding: 10px 0;
text-align: right;
font-size: 0;
border-bottom: 1px solid #999;
}
.fiexd-top span {
display: inline-block;
margin: 0 6px;
font: 400 12px/20px '微软雅黑';
cursor: pointer;
}
.fiexd-top .open {
padding: 0 5px 0 20px;
background: url('../img/open.png') no-repeat 5px center;
border: 1px solid #000;
}
.fiexd-top .close {
padding: 0 5px 0 20px;
background: url('../img/close.png') no-repeat 5px center;
border: 1px solid #000;
opacity: 1;
}
.fixed-content {}
.fixed-content img {
width: 1000px;
}
}