﻿body { overflow-x:hidden;height:100%;position:relative}
.wrap { width: 1200px; margin: 0 auto; list-style-type: none;height:auto }


.p1 { height:470px;position:relative}
.p1 h2, .p1 h3, .p1 h4 { position: absolute; left: 50%; margin: 0 0 0 -600px; z-index: 2;color:white }
.p1 h2 { top: 180px; font-size: 35px; animation: fadeInUp 1s ease; }
.p1 h3 { top: 240px; font-size: 24px; font-weight: normal; animation: fadeInUp 1.5s ease; }
.p1 h4 { top: 275px; font-size: 18px; font-weight: normal; animation: fadeInUp 1.8s ease; }
.p1 a { overflow:hidden; position: absolute; left: 50%; top: 320px; 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;}
.p1 .wrap{background: url(../img/cardbanner.png) no-repeat;width:100%;height:100%}

.p2{height: 600px;background-color:#f5f9ff;}
.p2 .wrap{display:flex;align-items:center;justify-content:space-between;height:100%;}
.p2-1 h2{ color:#5689FF;font-size:36px;margin-bottom: 25px;}
.p2-1 h3{ color:#222;font-size:18px;width:80%;font-weight:normal;padding-bottom:20px}
.p2-1 p{ display:block;margin-bottom: 5px;font-size:20px}
.p2-1 p:before {position: relative;top: -3px;display: inline-block;width: 6px;height: 6px;content: "";margin-right: 10px;background:rgba(210,238,255,1);border-radius: 50%;}
.link{margin-top:45px; width: 272px;height: 54px;line-height: 54px;display: inline-block;text-align: center;background-color:#5689FF;border-radius: 27px;font-size: 22px;color:#fff!important;cursor:pointer}
.link:hover{box-shadow: 0 5px 15px 2px #c6e5ff;}

.p3{background-color:white;height:460px}
.p3 .wrap{display:flex;align-items:center;justify-content:center;height:100%;}
.p3-2 { padding-left:20px}
.p3-2 h2{ color:#5689FF;font-size:36px;margin-bottom: 25px;}
.p3-2 h3{ color:#222;font-size:18px;width:80%;font-weight:normal;padding-bottom:55px}

.p4{height:500px;background:#f5f9ff}
.p4 .wrap{display:flex;align-items:center;justify-content:space-between;height:100%;}
.p4-1 h2{ color:#5689FF;font-size:36px;margin-bottom: 25px;}
.p4-1 h3{ color:#222;font-size:18px;width:80%;font-weight:normal;padding-bottom:20px}
.p4-1 h3 a{ color:#5689FF;text-decoration:underline}

.p5 h2{text-align:center;color:#5689FF;font-size:36px;padding-top:80px}
.p5 .wrap{text-align:center;}
.p5 .wrap .link{margin-bottom:45px}
.p5 h3 { color:#222;font-size: 18px;width: 80%;font-weight: normal;padding:30px 0;text-align:center;width:100% }
.p5 ul{display:flex;align-items:center;flex-wrap:wrap}
.p5 ul li{display:flex;align-items:center;justify-content:center;width:25%;margin-bottom:30px}
.p5 ul li img{box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);width:200px}

.cardPlus{position:fixed;top:0;bottom:0;left:0;right:0;z-index:999999;width:100%;height:100%;overflow:hidden;display:none}
.cardPlus.bg{background: rgba(21, 27, 31, 0.7);}
.cardPlus>div{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
.cardPlus .cp1{background-image: linear-gradient(180deg, #b9d7e4 1%,#ffffff 33%);border-radius: 8px;padding: 40px;box-sizing: border-box;text-align:center}
.cardPlus .cp1 h2{ font-family: 'PingFangTC-Semibold';font-size: 32px;color:#0084BF;text-align: center;line-height: 45px;}
.cardPlus .cp1 p{font-family: 'PingFangTC-Regular';font-size: 14px;color:rgba(0, 0, 0, 0.5);text-align: center;line-height: 20px;padding: 0; }
.cardPlus .cp1 button{cursor:pointer; border: none;text-align: center;height: 54px;line-height: 54px;outline: none;background:#0084BF;border-radius: 8px;font-family: 'PingFangTC-Semibold';font-size: 16px;color:#FFFFFF;margin: 18px 0 0;padding:0 45px}
.cardPlus img{width:80%;margin:15px auto}
.cardPlus .cp3{text-align:center}

