File: /www/wwwroot/www.ycfawu.com/wp-content/themes/twentytwentythree/assets/css/pc.service.css
* { margin: 0; padding: 0; list-style: none; }
section {
padding-bottom: 50px;
}
.w_1200 {
width: 1200px;
margin: 0 auto;
}
.title {
font-size: 14px;
padding: 50px 0 30px;
text-align: center;
}
.title h3 {
font-size: 36px;
font-weight: normal;
}
.title hr {
width: 80px;
border-top: none;
border-left: none;
border-right: none;
border-width: 5px;
border-color: #3d4564;
display: inline-block;
}
.title p {
font-size: 20px;
}
.swiper-container.swiper1 .swiper-slide {
display: block;
height: 620px;
background-position: center;
}
.swiper-container.swiper1 .swiper-pagination-bullet {
width: 100px;
height: 5px;
opacity: 1;
border-radius: 0;
background-color: #fff;
}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 20px;
}
.swiper-container .swiper-pagination-bullet.swiper-pagination-bullet-active {
background-color: #23468c;
}
.part1 ul {
display: flex;
justify-content: space-between;
}
.part1 ul li {
width: 15%;
padding: 5px;
cursor: pointer;
border-bottom: 2px solid #ccc;
transition: all 0.8s;
}
.part1 ul li p {
color: #333;
font-size: 12px;
line-height: 1.5;
padding: 10px 0;
}
.part1 ul li img {
width: 100%;
display: block;
}
.part1 ul li:hover {
box-shadow: 0 0 10px 2px rgba(0,0,0,0.3);
}
.part2 ul {
display: flex;
justify-content: space-between;
}
.part2 ul li {
width: 23%;
cursor: pointer;
}
.part2 ul li div {
overflow: hidden;
}
.part2 ul li:hover img {
transform: scale(1.1);
}
.part2 ul li img {
width: 100%;
display: block;
transition: all 0.8s;
}
.part2 ul li h5 {
width: 80%;
color: #fff;
padding: 0 10px;
font-size: 18px;
font-weight: normal;
margin: -20px auto 0;
line-height: 2.5;
background-color: rgba(45, 53, 86, .6);
position: relative;
z-index: 9;
}
.part2 ul li h5 label {
width: 24px;
height: 24px;
line-height: 24px;
font-size: 12px;
margin-right: 10px;
text-align: center;
display: inline-block;
border-radius: 24px;
background-color: #c3987a;
vertical-align: middle;
}
.part3 {
padding-top: 50px;
background-color: #f0f4f7;
}
.part3 .w_1200 {
display: flex;
justify-content: space-between;
}
.part3 .w_1200 .left {
width: 360px;
height: 619px;
background-image: url(./index/part1_img1.png);
background-repeat: no-repeat;
}
.part3 .w_1200 .left ul {
color: #333;
font-size: 20px;
padding-top: 40px;
line-height: 1.6;
position: relative;
left: 140px;
}
.part3 .w_1200 .right {
width: 820px;
background-color: #fff;
}
.part3 .w_1200 .head {
color: #fff;
line-height: 3;
padding: 0 10px;
background-color: #23468c;
}
.part3 .w_1200 .right ul {
padding: 8px 0;
}
.part3 .w_1200 .right li {
display: flex;
padding: 15px 30px;
}
.part3 .w_1200 .right li .desc h5 {
line-height: 3;
font-size: 18px;
color: #333;
}
.part3 .w_1200 .right li .desc {
line-height: 1.5;
font-size: 14px;
padding: 0 20px;
color: #666;
}
.part3 .w_1200 .right .meta {
margin-top: 30px;
}
.part3 .w_1200 .right .meta a {
color: #fff;
padding: 5px 20px;
display: inline-block;
margin-right: 20px;
border-radius: 50px;
text-decoration: none;
background-color: #23468c;
}
.part3 .w_1200 .right .meta a:last-of-type {
background-color: #ff6349;
}
.part4 ul.w_1200 {
display: flex;
flex-wrap: wrap;
margin-top: 100px;
margin-bottom: 50px;
justify-content: space-between;
}
.part4 ul.w_1200 li {
width: 30%;
cursor: pointer;
padding-bottom: 15px;
border-radius: 2px;
text-align: center;
background-color: #f9fafc;
box-shadow: 0 0 5px 1px #f1f1f1;
}
.part4 ul.w_1200 li:hover img {
transform: rotateY(360deg);
}
.part4 ul.w_1200 li img {
width: 100px;
margin-top: -50px;
transition: all 1s;
}
.part4 ul.w_1200 li h5 {
color: #2d3556;
font-size: 24px;
line-height: 3;
}
.part4 ul.w_1200 li p {
color: #2d3556;
font-size: 20px;
line-height: 1.5;
}
.part5 .swiper-slide img {
width: 100%;
display: block;
}
.part5 .swiper-slide .desc hr {
width: 30px;
border-color: #2d3556;
}
.part5 .swiper-slide .desc h5 {
color: #2d3556;
font-size: 24px;
line-height: 1.5;
}
.part5 .swiper-slide .desc {
font-size: 16px;
color: #2a3454;
padding: 10px 15px;
line-height: 1.8;
text-align: left;
background-color: rgba(255, 255, 255, 0.6);
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
.swiper-container.swiper2 .swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
transition: 300ms;
transform: scale(0.8);
transform-origin: center bottom;
}
.swiper-container.swiper2 .swiper-slide-active,
.swiper-container.swiper2 .swiper-slide-duplicate-active {
transform: scale(1);
}
.swiper-container.swiper2 .swiper-slide-active .desc,
.swiper-container.swiper2 .swiper-slide-duplicate-active .desc {
background-color: rgb(35, 57, 117, .5)
}
.swiper-container.swiper2 .swiper-slide-active h5,
.swiper-container.swiper2 .swiper-slide-duplicate-active h5 {
color: #fff;
}
.swiper-container.swiper2 .swiper-slide-active hr,
.swiper-container.swiper2 .swiper-slide-duplicate-active hr {
border-color: #fff;
}
.swiper-container.swiper2 .swiper-slide-active p,
.swiper-container.swiper2 .swiper-slide-duplicate-active p {
color: #fff;
}
.swiper-container.swiper2 .swiper-slide .a {
display: block;
}
.swiper-container.swiper2 .swiper-slide .b {
display: none;
}
.swiper-container.swiper2 .swiper-slide-active .a {
display: none;
}
.swiper-container.swiper2 .swiper-slide-active .b {
display: block;
}
.part6 ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.part6 ul li {
width: 26%;
color: #2d3556;
line-height: 3;
font-size: 24px;
font-weight: bold;
}
.part6 ul li img {
width: 40px;
margin-right: 40px;
vertical-align: middle;
}
.part6 p.w_1200 {
color: #2d3556;
margin-top: 150px;
padding-bottom: 100px;
font-size: 24px;
line-height: 2;
text-align: center;
}
.pc {
display: none;
}
.wap .mianbao {
color: #fff;
font-size: 14px;
padding: 5px 10px;
background-color: #2d3556;
}
.wap img {
width: 100%; display: block;
}
@media(max-width: 1200px) {
body {
width: 100%;
max-width: 750px;
margin: 0 auto;
}
body .wap {
display: block;
}
}
@media(min-width: 1200px) {
body .pc {
display: block;
}
body .wap {
display: none;
}
}