html,
body {
perspective: 1000px;
position: relative;
height: 100%;
background: #fff;
}
.swiper-container {
width: 100%;
}
.swiper-slide {
overflow: hidden;
transform-origin: 0 0;
}
/* banner部分 */
.banner {
position: relative;
border-bottom: 3px solid #204a82;
}
.btn-prev {
position: absolute;
z-index: 99;
left: 2%;
top: 50%;
transform: translate3d(0, -30px, 0);
}
.btn-next {
position: absolute;
z-index: 99;
right: 2%;
top: 50%;
transform: translate3d(0, -30px, 0);
}
.btn-prev img,
.btn-next img {
width: 24px;
cursor: pointer;
}
.banner .swiper-slide img {
width: 100%;
}
/* 第1部分 */
.part1 {
padding: 1.2rem 0;
}
.part1-main {
width: 100%;
}
.part1-title {
padding: 0 0 0.5rem;
text-align: center;
}
.part1-title p {
font: 400 0.42rem/0.6rem '微软雅黑';
color: #000;
}
.part1-detail {
font: 400 0.4rem/0.5rem '微软雅黑';
color: #204a82;
text-align: center;
background: url(../images/mpart1_border.png) no-repeat center center/100%;
}
.part1-ul {
display: flex;
justify-content: center;
padding: 1rem 0.1rem 0.5rem;
}
.part1-li {
flex-grow: 1;
text-align: center;
}
.part1-li-num {
font: 400 12px/42px '微软雅黑';
}
.part1-li-num span {
font-weight: bold;
font-size: 24px;
padding: 0 2px;
}
.part1-li:nth-child(1) .part1-li-num {
color: #000;
}
.part1-li:nth-child(2) .part1-li-num {
color: #fd5e16;
}
.part1-li:nth-child(3) .part1-li-num {
color: #006b3e;
}
.part1-li:nth-child(4) .part1-li-num {
color: #b28850;
}
.part1-li-detail {
font: 400 12px/18px '微软雅黑';
color: #000;
text-align: center;
}
.part1-box {
padding: 0 0.3rem;
}
.part1-top {
padding: 0;
}
.part1-top ul {
display: flex;
}
.part1-top ul li {
width: 50%;
}
.part1-top ul li a {
display: flex;
padding: 1rem 0.4rem;
border: 1px solid #dcdcdc;
}
.part1-top ul i {
margin-right: 0.1rem;
}
.part1-top ul i img {
width: 1.2rem;
}
.part1-top .part1-li-box {
text-align: left;
}
.li-name {
font: 400 0.4rem/0.5rem '微软雅黑';
color: #000;
}
.li-en {
font: 400 0.32rem/0.4rem '微软雅黑';
color: #b7b7b7;
}
.part1-bottom {
width: 100%;
padding: 0.5rem 0 1.2rem;
}
.part1-p {
height: 120px;
overflow: hidden;
font: 400 12px/20px '微软雅黑';
color: #000;
text-align: justify;
}
.part1-line {
display: flex;
margin-top: 6px;
}
.part1-more {
margin-right: 5px;
padding: 0 15px;
background: #fd5e16;
}
.part1-contact {
padding: 0 15px;
background: #204a82;
}
.part1-line a {
display: block;
padding-right: 18px;
font: 400 14px/30px '微软雅黑';
color: #fff;
background: url(../images/part1_arrow.png) no-repeat right center;
}
/* 广告 */
.ad {
position: relative;
}
.ad-bg {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
z-index: 99;
left: 0;
top: -50px;
width: 100%;
height: 80px;
background: url(../images/ad.jpg) no-repeat center center/auto 100%;
}
.ad-main {
padding: 0.6rem 0 0.6rem 1.4rem;
color: #fff;
background: url(../images/ad_logo.png) no-repeat 0 center/1.2rem;
}
.ad-top {
font: 400 12px/18px '微软雅黑';
color: #fff;
}
.ad-top span {
font-weight: bold;
}
.ad-bottom {
font: 400 14px/24px '微软雅黑';
}
/* 第2部分 */
.part2 {
padding: 40px 0 50px;
background: #ededed url(../images/part2_bg.jpg) no-repeat center 0;
}
.part2-main {
padding: 0 0.8rem;
}
.part2-title {
padding: 0.4rem 0 0.4rem;
font: 400 18px/36px '微软雅黑';
color: #204a82;
background: url(../images/part2_arrow.png) no-repeat 2.4rem center/5px;
}
.part2-top {
padding-top: 0.4rem;
}
.part2-banner {
position: relative;
}
.btn2-prev {
position: absolute;
z-index: 99;
left: 0;
top: 50%;
margin-top: -37px;
}
.btn2-next {
position: absolute;
z-index: 99;
right: 0;
top: 50%;
margin-top: -37px;
}
.btn2-prev img,
.btn2-next img {
width: 24px;
cursor: pointer;
}
.part2-banner i {
display: block;
}
.part2-banner i img {
width: 100%;
}
.part2-banner p {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 0 10px;
overflow: hidden;
font: 400 16px/30px '微软雅黑';
color: #fff;
text-overflow: ellipsis;
white-space: nowrap;
background: rgba(0, 0, 0, 0.64);
}
.part2-right {
width: 100%;
}
.part2-ul li {
margin: 0 0 15px;
background: #fff;
}
.part2-ul li a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 15px;
font: 400 14px/30px '微软雅黑';
color: #000;
}
.part2-ul li a p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.part2-ul li a span {
width: 14px;
height: 14px;
background: url(../images/new_arrow.png) no-repeat center center/14px;
}
/* 第3部分 */
.part3 {
padding: 40px 0;
border-bottom: 1px solid #f1f1f1;
}
.part3-main {
padding: 0 0.3rem;
}
.part3-top {
display: block;
}
.part3-title {
display: flex;
}
.part3-title .ch {
padding-right: 5px;
font: 400 24px/30px '微软雅黑';
color: #000;
}
.part3-title .en {
margin-top: 5px;
padding-left: 30px;
font: 400 12px/1 '微软雅黑';
color: #000;
text-align: right;
background: url(../images/part3_line.png) no-repeat 0 center/30px 1px;
}
.part3-nav ul {
display: flex;
justify-content: space-around;
background: #204a82;
}
.part3-nav li {
padding: 0 5px;
}
.part3-nav li a {
display: block;
font: 400 0.4rem/0.64rem '微软雅黑';
color: #fff;
}
.part3-box {
padding: 0.6rem 0;
}
.part3-box ul {
display: flex;
flex-wrap: wrap;
}
.part3-box ul li {
width: 50%;
padding: 0.3rem;
}
.part3-box ul li a {
position: relative;
display: block;
padding-bottom: 0.4rem;
border: 1px solid #d2d2d2;
}
.part3-box ul a i {
display: block;
}
.part3-box ul li a img {
width: 100%;
}
.pic-li-name {
font: 400 18px/20px '微软雅黑';
color: #000;
text-align: center;
}
.pic-li-kind {
font: 400 12px/16px '微软雅黑';
color: #000;
text-align: center;
}
.pic-li-more {
position: absolute;
left: 50%;
bottom: -12px;
width: 3rem;
margin-left: -1.5rem;
padding: 0 0.3rem;
text-transform: uppercase;
background: #dcdcdc;
}
.pic-li-more span {
display: block;
font: 400 14px/24px '微软雅黑';
color: #000;
background: url(../images/arrow_b.png) no-repeat right center;
}
/* 第4部分 */
.part4 {
padding: 40px 0 20px;
}
.part4-title {
font: 400 24px/30px '微软雅黑';
color: #000;
text-align: center;
}
.part4-ul {
display: block;
padding: 0 0.3rem;
}
.part4-li {
padding-bottom: 5px;
}
.part4-li a {
position: relative;
display: block;
color: #000;
}
.part4-li a i {
display: block;
}
.part4-li i img {
width: 100%;
}
.part4-li .part4-li-font {
position: absolute;
left: 0.6rem;
top: 1.2rem;
}
.part4-li-font .ch {
font: 400 0.4rem/0.5rem '微软雅黑';
}
.part4-li-font .en {
font: 400 0.32rem/0.4rem '微软雅黑';
text-transform: capitalize;
}