body { overflow-x:hidden;height:100%;position:relative}

.none {display:none; }
.p1 { height:470px;position:relative}
.p1-bg { position: absolute; z-index: -1; top: -30px; width: 48%; height: 520px; background: linear-gradient(to bottom right, #fdeebf, #fcc4a5);  transform: perspective(20px) rotateX(0.5deg) rotateY(-1deg); right: -40px; border-radius: 70px 0 0 35px; }
.p1-bg img { bottom: 10px; left: 50px; position: absolute; }
.p1 h2, .p1 h3, .p1 h4 { position: absolute; left: 50%; margin: 0 0 0 -600px; z-index: 2; }
.p1 h2 { top: 145px; font-size: 60px; animation: fadeInUp 1s ease; }
.p1 h3 { top: 240px; font-size: 24px; font-weight: normal; animation: fadeInUp 1.5s ease; }
.p1 h4 { top: 225px; font-size: 22px; font-weight: normal; animation: fadeInUp 1.8s ease; }
.p1 a { position: absolute; left: 50%; top: 280px; margin: 0 0 0 -600px; line-height: 40px; color: #fff; padding: 0 25px; border-radius: 5px; font-size: 14px; z-index: 3; animation: fadeInUp 1.5s ease; transition: all .5s ease; background:linear-gradient(to bottom right, #fad55f, #f76c1d);}

.p2 { background: #fff2e9; }
.p2 ul { display:flex;align-items:center;height:100px;justify-content:center}
.p2 ul li{ width:25%;height: 100%;cursor:pointer}
.p2 ul li a{display:block;text-align:center; display:flex;align-items:center;justify-content:center;height: 100%;font-size:20px}
.p2 ul li a .if{font-size:40px;}
.p2 ul li:not(:first-child) a .if {padding-right:10px }
.p2 ul li.select { background:white;}
.p2 ul li.select a{ color:#fe4600}

.p3 {padding-top:40px; }
.style1 ul {display:flex;align-items:center;justify-content:space-between;margin-bottom:40px }
.style1 ul li {width:270px;height:554px;position:relative ;border:1px solid #eee;border-radius:25px;display:flex;align-items:center;justify-content:space-between}
.style1:not(.weixingongzhonghao) ul li:hover {background:#fe4600 ;    transition: all 300ms ease-out 0s;}
.style1:not(.weixingongzhonghao) ul li:hover p.code {opacity:1 ; transition: all 400ms ease-out 0s;}
.style1:not(.weixingongzhonghao) ul li:hover span {background:white }
.style1:not(.weixingongzhonghao) ul li:hover i {color:white }
.style1 ul li a{display:block;padding:0 15px;position:relative;line-height:0}
.style1 ul li a p.img{width:100%;height:100%;border-radius:10px;overflow:hidden}
.style1 ul li a p.img img{width:240px;height:100%;}
.style1 ul li a p.code{position:absolute;left:15px;top:0;right:15px;bottom:0;background:rgba(0, 0, 0, 0.5);display:flex;align-items:center;justify-content:center;border-radius:10px;opacity:0}
.style1 ul li a p.code img{width:120px;height:120px;border:4px solid #fe4600;background:white;}

.style1 ul span {position:absolute;width:40px;height:6px;border-radius:10px;background:#eee;left:115px;top:25px }
.style1.weixingongzhonghao ul i {position:absolute;width:40px;height:40px;border-radius:40px; border :2px solid #eee;bottom:10px;left:115px; }
.style1:not(.weixingongzhonghao) ul i {position:absolute;left:0;right:0;text-align:center; bottom:20px; font-size:15px}
.style1 h3 {text-align:center; color:#999;padding:20px 0 }

.style2 h3 {text-align:center; color:#999;padding:20px 0 }
.style2 ul {display:flex;align-items:center;justify-content:space-between;margin-bottom:40px }
.style2 ul li {width:30%;overflow:hidden;position:relative;cursor:pointer}
.style2 ul li:hover .info{transition: all 300ms ease-out 0s;top:0 } 

.style2 ul li a.img{display:block;position:relative}
.style2 ul li a.img >p {background:rgba(0, 0, 0, 0.5);color:white;font-size:15px;position:absolute;bottom:0;left:0;right:0;padding:15px 0;text-align:center}
.style2 ul li a.info {position:absolute;left:0;right:0;top:100%;bottom:0;background:rgba(254, 70, 0, 0.9);padding:20px;transition: all 300ms ease-out 0s }
.style2 ul li a.info p {color:white; }
.style2 ul li a.info p:nth-child(1) {font-size:18px;padding-bottom:60px;font-weight:bold}
.style2 ul li a.info p:nth-child(2) {height:45px;overflow:hidden;font-size:15px;line-height:20px}
.style2 ul li a.info p:nth-child(3) {padding-top:10px;}
.style2 ul li a.info p:nth-child(4) {margin-top:-12px;}