
.title{width:716px; margin:0 auto; background:url(../img/titbg.png) no-repeat; text-align:center; }
.title h1{height:76px; font-size:40px; line-height:70px; font-weight:bold;}
.title p{font-size:24px;color:#666; margin-top:10px;}

.btn{display:block; width:360px; height:60px; line-height:60px; border-radius:30px; font-size:24px; color:#fefefe; background-image:linear-gradient(90deg,#ff668c 0%,#ff666b 100%); box-shadow:0 4px 9px 0 rgba(247, 77, 83, 0.25); position:relative; text-align:center;}
.btn span{
     display: block;
     position: relative;
     z-index: 2;
 }
.btn:after{
     content: '';
     position: absolute;
     top:0;
     left: 0;
     width: 100%;
     height: 100%;
     border-radius:30px;
     background: #fb383f;
     transform: scale(0.1, 1);
     transition: 0.5s;
     opacity: 0;
     z-index: 0;
     filter:alpha(opacity=0);
 }
.btn:hover:after{
     transform: scale(1);
     transition: 0.5s;
     opacity: 1;
     filter:alpha(opacity=100);
 }
.btn:hover span{
     background: #fb383f \9;
 }

.linkbox{margin-top:30px; display:flex; justify-content:center;}
.linkbox a.btn{margin:0 25px;}


.con4 .item h3 span{transition:all 0.2s; overflow:hidden; position:relative;}

.con4 .item h3 span:hover:after{
    animation: btn-animate .75s;
}


.con4 .item h3 span:after{
    width: 0;
    padding-top:0;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    content: "";

}
@keyframes btn-animate{
    0%{
        width: 0;
        padding-top: 0;
        background: rgba(0,0,0,.25);
    }
    100%{
        width: 100%;
        padding-top: 100%;
        background-color:transparent;
    }
}


.con1 .box .item h3,
.con1 .box .item h2,
.con1 .box .item p,
.con4 .item,
.con6 .item,
.con8 .item,
.con9 .item,
.con10 .con10-r p{-webkit-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out;}

.con6 .item:hover,
.con9 .item:hover{transform:translateY(-10px);}

.con1 .box .item h3:hover,
.con1 .box .item h2:hover,
.con1 .box .item p:hover,
.con4 .item:hover,
.con8 .item:hover,
.con10 .con10-r p:hover{-webkit-transform:scale(1.05,1.05);-moz-transform:scale(1.05,1.05);transform:scale(1.05,1.05);}

/* header */
.banner{width:100%; height:580px; background:url(../img/banbg.jpg) center top no-repeat #30a2ff; padding-top:60px;}
.banner .ban{width:860px; -webkit-animation-duration:1s;animation-duration:1s;}
.banner p{width:640px; height:60px; margin:40px 0 0 130px; -webkit-animation-duration:1s;animation-duration:1s;}
.banner p a.btn{width:640px; transition:all .6s; font-size:22px;}
.banner p a.btn span{display:block; -webkit-animation-duration:.6s;animation-duration:.6s;-webkit-animation-fill-mode:both;animation-fill-mode:both;}

.con1,.con4,.con6,.con10{width:100%; background:#dcf4fa;}

/* con1 */
.con1{padding:54px 0 60px;}
.con1 a.box{display:block; margin-top:30px; height:230px; background:url(../img/con1-bg.jpg); display:flex; justify-content:space-between; box-sizing:border-box; padding:0 40px; }
.con1 .box .item{width:248px; text-align: center;}
.con1 .box .item h3,
.con1 .box .item h2{height:50px; line-height:50px;font-size:24px; font-weight:bold; color:#fff;}
.con1 .box .item h3{background-color:#30a5ff; border-radius:10px; }
.con1 .box .item h2{background-color:#28ceca; border-radius:25px;}
.con1 .box .item p{margin-top:60px; background:#fff; border-radius:10px; padding:20px 0; line-height:30px; }
.con1 .box .item:nth-child(2),
.con1 .box .item:nth-child(3){width:200px;}
.con1 .box .item:nth-child(2){padding-top:130px;}
.con1 .box .item:nth-child(3){padding-top:110px;}

/* con2 */
.con2{margin-top:60px; }
.con2 .box{margin-top:30px;display:flex; justify-content:space-between;}
.con2 .item{width:360px; height:410px; box-sizing: border-box; padding-top:42px;-webkit-transition:all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.con2 .item h3{height:48px; font-size:24px; text-align: center; font-weight:bold;}
.con2 .item p{padding:15px 40px 0; line-height:30px; color:#666;}
.con2 .item:nth-child(1){background:url(../img/con2-bg1.jpg);}
.con2 .item:nth-child(2){background:url(../img/con2-bg2.jpg);}
.con2 .item:nth-child(3){background:url(../img/con2-bg3.jpg);}
.con2 .box .item:hover{animation: moveleftright 1s 1 ease-in-out;}
@keyframes moveleftright {
  0% {
    transform: translate(0, 0);
  }
  33% {
    transform: translate(-10px, 0);
  }
  66% {
    transform: translate(10px, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}

/* con3 */
.con3{margin-top:65px;}
.con3 img{display:block; margin-top:50px;}

/* con4 */
.con4{margin-top:65px; background:url(../img/bg4.jpg) center bottom no-repeat #dcf4fa; padding:30px 0 60px;}
.con4 a.box{display:flex; justify-content:space-between; flex-wrap:wrap; }
.con4 .item{display:flex; justify-content:space-between; width:430px; height:60px; margin-top:30px; background-color:#30a5ff; box-shadow:0 4px 9px 0 rgba(42, 102, 247, 0.25); border-radius:10px; color:#fff;}
.con4 .item p{width:300px; line-height:60px; box-sizing:border-box;}
.con4 .item h3{width:130px; height:60px; box-sizing:border-box; padding-top:10px;}
.con4 .item h3 span{display:block; width:100px; height:40px; background-color:#ff666b; border-radius:20px; line-height:40px; color:#fff; text-align: center;}
.con4 .item:nth-child(odd) h3{background:url(../img/h3bg1.png); padding-left:10px;}
.con4 .item:nth-child(odd) p{padding-left:20px;}
.con4 .item:nth-child(even) h3{background:url(../img/h3bg2.png); padding-left:20px;}
.con4 .item:nth-child(even) p{text-align:right; padding-right:20px;}
.con4 .item:nth-child(6) p{padding-right:10px;}
.con4 .item:nth-child(1),
.con4 .item:nth-child(9){margin-left:80px;}
.con4 .item:nth-child(3),
.con4 .item:nth-child(7){margin-left:40px;}
.con4 .item:nth-child(2),
.con4 .item:nth-child(10){margin-right:80px;}
.con4 .item:nth-child(4),
.con4 .item:nth-child(8){margin-right:40px;}

/* con5 */
.con5{margin-top:60px;}
.con5 .box{margin-top:30px;}

/* con6 */
.con6{margin-top:60px; padding:60px 0; }
.con6 a.box{display:flex; justify-content:space-between; flex-wrap:wrap; }
.con6 .item{width:272px; height:290px; margin-top:30px; border-radius:10px; text-align:center;}
.con6 .item1{background:url(../img/con6-bg1.png); box-shadow:0 4px 9px 0 rgba(13, 178, 208,.3);}
.con6 .item2{background:url(../img/con6-bg2.png); box-shadow:0 4px 9px 0 rgba(42, 102, 247,.3);}
.con6 .item h2{width:232px; height:50px; line-height:50px; font-size:24px; color:#fefefe; font-weight:bold;}
.con6 .item h3{color:#2a66f7; margin-top:16px;}
.con6 .item p{line-height:30px; margin-top:12px;}
.con6 .item h4{height:40px; line-height:40px; background-color:#ff666b; border-radius:20px; color:#fff; transition:all .2s ease-in;}
.con6 .item h4:hover{background-color:#f53238;}
.con6 .item1 p{height:105px;}
.con6 .item2 p{height:148px;}
.con6 .item1 .h4box{padding:0 36px 0 10px; line-height:40px; display:flex;}
.con6 .item1 .h4box span{display:block; width:125px; color:#ff666b;}
.con6 .item1 .h4box h4{width:100px;}
.con6 .item2 h4{width:160px; margin:0 auto;}

/* con7 */
.con7{margin-top:60px;}
.con7 table{margin-top:30px; text-align:center; border-collapse:collapse; border-spacing:0;}
.con7 table tr td,
.con7 table tr th{border:1px solid #30a5ff; padding:15px 0; line-height:30px;}
.con7 table tr th{font-size:22px; background:#30a5ff; font-weight:bold; color:#fff;}
.con7 table tr td.tit{font-weight:bold;}
.con7 table tr td a{display: block; width:170px; height:40px; margin:0 auto; line-height:40px; background-color:#ff666b; border-radius:20px; color:#fff;transition: all .2s ease-in; border:1px solid #f66e48;}
.con7 table tr td a:hover{background-color:#f53238;}
.con7 table tr td:nth-child(3){padding:15px 20px;}

/* con8 */
.con8{width:100%; margin-top:60px; background:url(../img/bg8.jpg) center bottom no-repeat #dcf4fa; padding:60px 0 55px;}
.con8 .box{margin-top:30px; display:flex;}
.con8 .item{width:236px;}
.con8 .item h3{height:130px; background:url(../img/con8-bg.jpg); text-align: center; color:#fff; text-align: center; font-weight:bold; font-size:24px; line-height:60px;}
.con8 .item p{width:212px; background-color:#ffffff; border-radius:0 0 10px 10px;border:solid 1px #30a5ff; border-top:none; box-sizing: border-box; padding:20px 20px 0; line-height:30px;}
.con8 .item1{margin-top:120px;}
.con8 .item1 p{height:260px;}
.con8 .item2{margin-top:90px;}
.con8 .item2 p{height:290px;}
.con8 .item3{margin-top:60px;}
.con8 .item3 p{height:320px;}
.con8 .item4{margin-top:30px;}
.con8 .item4 p{height:350px;}
.con8 .item5 p{height:380px;}
.con8 h2{margin-top:115px; font-size:30px; color:#ffffff; font-weight:bold; text-align:center;}
.con8 .box2{margin-top:20px;}

/* con9 */
.con9{margin-top:60px;}
.con9 .box{margin-top:30px; display:flex;justify-content:space-between;}
.con9 .item{width:565px; height:264px;}
.con9 .item ul{display:flex; flex-wrap:wrap; padding-top:7px;}
.con9 .item ul li{width:183px; height:24px; margin-top:30px; padding-left:33px; box-sizing: border-box;}
.con9 .item1{background:url(../img/con9-bg1.jpg);}
.con9 .item1 ul{padding-left:160px;}
.con9 .item1 ul li{background:url(../img/arrow1.jpg) left top no-repeat;}
.con9 .item2{background:url(../img/con9-bg2.jpg);}
.con9 .item2 ul{padding-left:50px;}
.con9 .item2 ul li{background:url(../img/arrow2.jpg) left top no-repeat;}

/* con10 */
.con10{margin-top:60px; padding:60px 0;}
.con10 .box{width:1185px; overflow:hidden; margin-top:30px; display:flex;justify-content:space-between;}
.con10 .con10-l{width:565px; height:480px; background:url(../img/con10-bg1.jpg); display:flex; flex-wrap:wrap;justify-content:flex-end;}
.con10 .con10-l .item{height:120px; box-sizing:border-box; padding:30px 0 0 80px;}
.con10 .con10-l .item h3{font-size:24px; font-weight:bold; color:#2a66f7;}
.con10 .con10-l .item p{margin-top:10px;}
.con10 .con10-l .item1{width:325px;}
.con10 .con10-l .item2{width:405px;}
.con10 .con10-l .item3{width:485px;}
.con10 .con10-l .item4{width:565px;}
.con10 .con10-r{width:570px;}
.con10 .con10-r p{height:100px; margin-bottom:30px;background:url(../img/con10-bg2.jpg); line-height:90px; display:flex; color:#fff;}
.con10 .con10-r p:last-child{margin-bottom:0;}
.con10 .con10-r p span{display:block; width:135px; text-align:center; margin-right:15px; font-size:24px; font-weight:bold; color:#333;}



