body { overflow-x:hidden;height:100%;position:relative}
.wrap { width: 1200px; margin: 0 auto; list-style-type: none;height:auto }
body { overflow-x:hidden;height:100%;position:relative}
.wrap { width: 1200px; margin: 0 auto; list-style-type: none;height:auto }

.header > div .menu a{color:white!important}
.header{background:rgba(0,0,0,.2)}
.header-right a:nth-child(1){border-color:white;color:white}

.p1-bg{position:absolute;top:0;left:0;right:0;z-index:-1;height:645px;background: url(../img/shopbanner.jpg) no-repeat;background-size:100% auto;}
.p1 { height:594px;position:relative}

.p1 h2, .p1 h3, .p1 h4 { position: absolute; left: 80%; margin: 0 0 0 -600px; z-index: 2; color:white}
.p1 h2 { top: 180px; font-size: 40px; animation: fadeInUp 1s ease; }
.p1 h3 { top: 260px; font-size: 24px; font-weight: normal; animation: fadeInUp 1.5s ease; }
.p1 h4 { top: 295px; font-size: 18px; font-weight: normal; animation: fadeInUp 1.8s ease; }
.p1 a { overflow:hidden; position: absolute; left:80%; top: 345px; margin: 0 0 0 -600px;  color: #fff;padding: 10px 40px;border-radius: 114px; font-size: 20px; z-index: 3; animation: fadeInUp 1.5s ease; transition: all .5s ease;  border:1px solid white;color:white;}
.p1 a::after {content: '';width: 100%;padding-top: 100%;top: 50%;left: 50%;position: absolute;transform: translate(-50%, -50%);border-radius: 50%;animation: ripple 1.3s infinite;}

.p2{height:550px; position:relative}
.p2 h2{font-size:30px;padding-top:80px;color:#595961;text-align:center}
.p2 ul{display:flex;align-items:center;justify-content:space-around;flex-wrap:wrap;padding-top:20px}
.p2 ul li{flex-shrink:0;width:32%;height: 140px;box-shadow: 0 8px 24px 0 rgba(46,61,101,.1);border-radius: 10px;margin-top: 30px;}
.p2 ul li a{display:flex;align-items:center;}
.p2 ul li a>p{width:80px;height:80px;margin: 30px 26px 0 20px;flex-shrink:0}
.p2 ul li:nth-child(1) a>p{background:url(../img/shopp2.png)}
.p2 ul li:nth-child(2) a>p{background:url(../img/shopp2.png) 0 -80px}
.p2 ul li:nth-child(3) a>p{background:url(../img/shopp2.png) 0 -160px}
.p2 ul li:nth-child(4) a>p{background:url(../img/shopp2.png) 0 -240px}
.p2 ul li:nth-child(5) a>p{background:url(../img/shopp2.png) 0 -320px}
.p2 ul li:nth-child(6) a>p{background:url(../img/shopp2.png) 0 80px}

.p2 ul li a div>p:nth-child(1){font-size: 22px;color:#696d82;margin-top: 26px;font-weight:bold}
.p2 ul li a div>p:nth-child(2){margin-top: 10px;font-size: 14px;color:#8d91a5;letter-spacing: 0;line-height: 24px;padding-right:25px}


.p3{position:relative}
.p3 h2{font-size:30px;padding-top:80px;color:#595961;text-align:center;}
.p3 h3{font-weight:normal;text-align:center;padding-bottom:30px;padding-top:20px;color:#8d91a5}

#p3swiper {position: relative;width: 1200px;margin: 0 auto}
#p3swiper .swiper-container {padding-bottom: 60px;}
#p3swiper  .swiper-slide p{position: relative;width: 221px;height: 495px;line-height: 0;margin-left: -2px;}
#p3swiper  .swiper-slide img{display:block;   margin-top:13px}
#p3swiper  .swiper-slide:not(.swiper-slide-active) span {position: absolute;left: 0%;right: 0%;top: 0%;bottom: 0%;margin: 0 auto;background:#fff;opacity: .4;}
#p3swiper .swiper-button-prev {	left: -45px;}
#p3swiper .swiper-button-next {	right: -45px;}
.p3phone {position: absolute;left: 0%;top: 0%;right: 0%;margin: 0 auto;width: 20.9%;z-index: 100000;}


.p4{position:relative;background:#f2f3fa}
.p4 h2{font-size:30px;padding-top:80px;color:#595961;text-align:center;}
.p4 h3{font-weight:normal;text-align:center;padding-top:20px;color:#8d91a5}
.p4>div>img{margin: 14px 0 35px 0;}
.p4 ul{position:absolute;width:100%;height:400px;bottom:36px}
.p4 li{position:absolute;}
.p4 li p{font-size:16px;margin-top: -8px;}
.p4 li img{width:62px;height:62px; animation: heart 2s ease infinite;}

.p4 li:nth-child(1){left:162px;top:20px;}
.p4 li:nth-child(1) img{animation-delay: 0s;}
.p4 li:nth-child(2){left:386px;top:0px;}
.p4 li:nth-child(2) img{animation-delay: 1s;}
.p4 li:nth-child(3){left: 647px;top: 47px;}
.p4 li:nth-child(3) img{animation-delay: 0s;}
.p4 li:nth-child(4){left: 833px;top: -24px;}
.p4 li:nth-child(4) img{animation-delay: 0s;}
.p4 li:nth-child(5){left: 961px;top: -39px;}
.p4 li:nth-child(5) img{animation-delay: 0s;}
.p4 li:nth-child(6){left: 99px;top: 196px;}
.p4 li:nth-child(6) img{animation-delay: 0s;}
.p4 li:nth-child(7){left: 273px;top: 228px;}
.p4 li:nth-child(7) img{animation-delay: 1s;}
.p4 li:nth-child(8){left: 438px;top: 198px;}
.p4 li:nth-child(8) img{animation-delay: 1s;}
.p4 li:nth-child(9){left: 568px;top: 227px;}
.p4 li:nth-child(9) img{animation-delay: 0s;}
.p4 li:nth-child(10){left: 692px;top: 163px;}
.p4 li:nth-child(10) img{animation-delay: 0s;}
.p4 li:nth-child(11){left: 692px;top: 332px;}
.p4 li:nth-child(11) img{animation-delay: 1s;}
.p4 li:nth-child(12){left: 805px;top: 252px;}
.p4 li:nth-child(12) img{animation-delay: 1s;}
.p4 li:nth-child(13){left: 913px;top: 228px;}
.p4 li:nth-child(13) img{animation-delay: 0s;}
.p4 li:nth-child(14){left: 806px;top: 161px;}
.p4 li:nth-child(14) img{animation-delay: 1s;}
.p4 li:nth-child(15){left: 1003px;top: 161px;}
.p4 li:nth-child(15) img{animation-delay: 0s;}
.p4 li:nth-child(16){left: 313px;top: 103px;}
.p4 li:nth-child(16) img{animation-delay: 1s;}
/*.p4 li:nth-child(17){padding:20px}
.p4 li:nth-child(17) a{border-radius:65px;width:65px;height:65px;border:2px solid #568aff;box-shadow:0 5px 5px rgba(86, 138, 255, 0.55);display:flex;align-items:center;justify-content:center}
.p4 li:nth-child(17) p{border-radius:62px;width:62px;height:62px;border:2px solid #568aff;display:flex;align-items:center;justify-content:center}*/

.p4 li:nth-child(17) {left: 568px;top: 132px; width: 60px;height: 60px;border-radius: 100%;}
.p4 li:nth-child(17) span:nth-child(1) {position: absolute;width: 62px;height: 62px;border-radius: 100%;left: 50%;top: 50%;margin: -31px 0 0 -31px;background: #ffffff;box-shadow: 0 0 16px rgba(51,140,255,0.85);}
.p4 li:nth-child(17) span:nth-child(2) {position: absolute;width: 46px;height: 46px;border-radius: 100%;left: 50%;top: 50%;margin: -23px 0 0 -23px;box-shadow: 0 0 16px rgba(51,140,255,0.85);}
.p4 li:nth-child(17) span:nth-child(3) {color:rgba(51,140,255,1);font-weight:bold; position: absolute;width: 40px;height: 40px;border-radius: 100%;left: 50%;top: 50%;margin: -20px 0 0 -20px;display: flex;align-items: center;justify-content: center;font-size: 13px;}


.p5{position:relative;background:#f2f3fa;background:url(../img/shopp5bg.png) no-repeat;}
.p5 h2{font-size:30px;padding-top:80px;color:white;text-align:center;}
.p5>div> h3{font-weight:normal;text-align:center;padding-top:20px;color:white}
.p5 ul{display:flex;align-items:center;justify-content:space-around;padding-top:80px}
.p5 ul li{display:flex;flex-direction:column;align-items: center;width:17%;flex-shrink:0;overflow:visible}
.p5 ul li:nth-child(2n){opacity:.8;flex-shrink:1; align-self:flex-start;padding-top:50px}
.p5 ul li:hover a{animation: bounce 1s ease infinite;}

.p5 ul a{display:flex;align-items:center;justify-content:center; width:102px;height:102px;border-radius:102px;background:rgba(255, 255, 255, 0.9)}
.p5 ul a img{opacity:.5;width:50px}
.p5 ul h3{font-size: 20px;padding: 18px 0 25px;text-align: center;color:white}
.p5 ul p{color:white;opacity:.8}
.p5>div div{text-align:center;padding:50px 0}
.p5 div>a{cursor:pointer; color: #fff;padding: 10px 40px;border-radius: 114px; font-size: 20px;border:1px solid white;color:white;}