@charset "utf-8";
/* CSS Document */
*{margin:0;padding:0;list-style:none;}
body{ font-family:"Microsoft YaHei","Verdana";font-size: 12px;color:#000;}
input,select{ font-family:"Microsoft YaHei","Verdana"}
img{border:none;}
@font-face {
  font-family: "font"; 
  src: url('DIN-Medium.otf') format('truetype');
}
ul,li,dl,dt,dd{list-style:none; }
em{font-style: normal;}
a{ text-decoration: none; color:#000;cursor: pointer;}
a:hover {text-decoration: none; color:#e62129;}
.cl{clear:both; overflow:hidden; }
.blank5{height:5px; clear:both; overflow:hidden}
.blank10{height:10px; clear:both; overflow:hidden;}
.main{width:1200px; margin:0 auto; position:relative }
.fl{ float:left}.fr{ float:right}
.center{ text-align:center}
.ts{transition: .6s ease all;-webkit-transition: .6s ease all;-moz-transition: .6s ease all;-o-transition: .6s ease all;-ms-transition: .6s ease all; }
.banner{ background:url(../img/banner-bg.jpg) no-repeat center; height:690px; width:100%; position:relative}
.banner-t{ background:url(../img/banner-t.png?v=1.0.2) no-repeat center; width:100%; height:407px; position:absolute;left:0;bottom:120px}
#wave{width: 100%;height: 60px;position: absolute;left: 0;top: 50%;opacity: .3; margin-top:-30px}
.head{padding:30px 0 0 0}
.head .logo{float:left}
.head .nav{ float:right}
.head .nav ul li{ float:left; position:relative}
.head .nav ul li a{ color:#fff; font-size:18px; display:block;padding-left:30px; height:42px; line-height:42px}
.head .nav ul li a:hover{ color:rgba(255,255,255,.8)}
.head .nav ul li a i {margin-left: 5px;display: inline-block;transition: .6s ease all;}
.head .nav ul li:hover a i {transform: rotate(180deg);transition: .6s ease all;}
.head .nav ul li:hover .submenu {display: block;}
.head .submenu {display:none ;position: absolute;background-color: #fff;border-radius: 8px;padding: 5px; z-index:100; width:120px; box-shadow:0 5px 20px rgba(0,0,0,.5)}
.head .submenu li{ width:100%}
.head .submenu li a{font-size: 14px!important;text-align: center;width: 100%;border-radius: 5px; color:#333!important;padding:0 !important;}
.head .submenu li:hover {background: #00bebd !important; border-radius:5px}
.head .submenu li a:hover {color: #fff !important;}
.title .hd{ background:url(../img/title-hd.png?v=1.0.1) no-repeat center; width:100%; height:125px; margin:60px 0 0 0}
.title .hd.white{ background:url(../img/title-hd-white.png?v=1.0.1) no-repeat center}
.title .bd{background:url(../img/title.png?v=1.0.1) no-repeat center; width:880px; height:50px; overflow:hidden; margin:30px auto 40px}
.title .bd.t1{ background-position:0 0;}
.title .bd.t2{ background-position:0 -50px;}
.title .bd.t3{ background-position:0 -100px;}
.title .bd.t4{ background-position:0 -150px;}
.title .bd.t5{ background-position:0 -200px;}
.title .bd.t6{ background-position:0 -250px;}
.title .bd.t7{ background-position:0 -300px;}
.title .bd.t8{ background-position:0 -350px;}
.title .bd.t9{ background-position:0 -400px;}
.title .bd.t10{ background-position:0 -450px;}
.title p{ text-align:center; color:#40405a; font-size:18px; text-align:center; margin:-20px 0 40px}
.page-a{ padding-bottom:50px; overflow:hidden}
.page-a .img{ width:381px; float:left}
.page-a .txt{float:right; width:790px; font-size:16px; color:#333; line-height:33px}
.page-b{ width:100%; overflow:hidden; background:#12afb0;background: linear-gradient(120deg,#00bebd,#00a6a7);padding-bottom:80px}
.page-b ul{ display:flex; justify-content: space-between;}
.page-b ul li{ background:#fff; border-radius:10px; width:285px; padding:40px 0 40px; text-align:center}
.page-b ul li p{ font-size:18px; line-height:30px; padding:40px 30px 0}
.page-b ul li:hover{transform: translateY(-5px);}
.page-b ul li:hover .icon{transform: rotateY(180deg);}
.page-b .time{ background:rgba(255,255,255,.1); border:rgba(255,255,255,.5) solid 1px; border-radius:30px; font-size:20px; color:#fff; padding:0 40px; line-height:60px; display:inline-block; margin-top:60px}
.page-b .waves {position: relative;width: 100%;height:150px;margin-bottom: -7px;min-height: 100px;max-height: 150px;transform: rotate(180deg);}
.page-b .content {position: relative;height: 20vh;text-align: center;background-color: white;} 
.page-b .parallax > use {animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;}
.page-b .parallax > use:nth-child(1) {animation-delay: -2s;animation-duration: 7s;}
.page-b .parallax > use:nth-child(2) {animation-delay: -3s;animation-duration: 10s;}
.page-b .parallax > use:nth-child(3) {animation-delay: -4s;animation-duration: 13s;}
.page-b .parallax > use:nth-child(4) {animation-delay: -5s;animation-duration: 20s;}
@keyframes move-forever {0% {transform: translate3d(90px,0,0);}100% {transform: translate3d(-85px,0,0);}}
.page-c .info{ font-size:18px; color:#333; line-height:36px; margin-top:-10px}
.page-c ul{display:flex; justify-content: space-between; margin:30px 0 80px}
.page-c ul li{ width:200px; text-align:center; }
.page-c ul li h3{ font-size:20px; color:#333; padding:20px 0 10px}
.page-c ul li p{font-size:18px; color:#333;}
.page-c ul li .icon{ width:130px; height:130px; display:inline-block; position:relative;}
.page-c ul li .icon:before{content:''; position:absolute; background:url(../img/icon-bg.png) no-repeat center;left:0;top:0; width:100%; height:100%;transition: .6s ease all;}
.page-c ul li .icon i{ font-size:50px; color:#00bebd; line-height:130px; display:inline-block}
.page-c ul li:hover .icon:before{transform: rotate(180deg);transition: .6s ease all;}
.page-c ul li:hover .icon i{transform: rotateY(360deg);}
.page-d{ background:#f2f6fe; overflow:hidden; padding-bottom:50px}
.page-d ul{ text-align:center; position:relative;width:1250px}
.page-d ul li{ width:380px; background:#fff; border-radius:20px; display:inline-block; margin:0 12px 30px; box-shadow:0 5px 20px rgba(14,5,10,.02);padding:30px 0}
.page-d ul li h3{ font-size:24px; color:#40405a; padding:20px 0 10px}
.page-d ul li h3 em{ color:#00a6a7}
.page-d ul li p{ font-size:16px; color:#333}
.page-d ul li:hover{transform: translateY(-5px);box-shadow:0 5px 20px rgba(14,5,10,.1);}
.page-e{ overflow:hidden}
.page-e .item{ width:90%; margin:0 auto; text-align:center;}
.page-e .item li{ width:20%;padding:0 15px;float: left; box-sizing:border-box}
.page-e .item li img{ width:100%;border:#ccc solid 3px; box-shadow:0 5px 20px rgba(0,0,0,.1); transition: .6s ease all;}
.page-e .item li:hover{transform: translateY(-5px);}
.page-e .item li:hover img{ border:#00a6a7 solid 3px;box-shadow:0 5px 30px rgba(0,0,0,.1);}
.page-e .item li p{ text-align:center; margin:15px 0 20px 0; font-size:16px; color:#333; height:56px; line-height:28px; overflow:hidden}
.page-e .btn{ text-align:center; padding:30px 0 80px 0}
.page-e .btn a{ display:inline-block; font-size:20px; color:#fff; border-radius:50px;background: linear-gradient(120deg,#00bebd,#00a6a7); width:280px; height:65px; line-height:65px; font-weight:bold; box-shadow:0 5px 20px rgba(0,166,167,.5)}
.page-e .btn a:hover{box-shadow:0 15px 50px rgba(0,166,167,.5);transform: translateY(-5px);}
.page-f{ background:#f8f8fc; overflow:hidden; padding:20px 0 70px;}
.page-f .item{ float:left; width:160px}
.page-f .item .img{width:160px; height:160px; overflow:hidden; border-radius:100%}
.page-f .item .img img{ width:160px; height:160px;}
.page-f .item p{ font-size:18px; color:#40405a; line-height:30px; padding:20px 0 0 0; text-align:center}
.page-f .item:hover .img img{transform: scale(1.1);}
.page-f .arrow{ width:48px; float:left; background:url(../img/icon-right.png) no-repeat center; height:160px}
.page-g{overflow:hidden; padding:20px 0 60px;}
.page-g .item{}
.page-g .item ul li{ float:left; width:300px; text-align: center; margin:20px 0}
.page-g .item ul li .icon{ width:80px; height:80px; background:#00bebd; border-radius:100%; display:inline-block; position:relative; z-index:10}
.page-g .item ul li .icon i{ color:#fff; line-height:80px; font-size:40px; display:inline-block}
.page-g .item ul li .icon:before{content:''; position:absolute; width:100px; height:100px; background:rgba(0,190,189,.2); z-index:-2; border-radius:100%;left:50%; top:50%; margin:-50px 0 0 -50px;}
.page-g .item ul li .icon:after{content:''; position:absolute; width:120px; height:120px; background:rgba(0,190,189,.1); z-index:-1; border-radius:100%;left:50%; top:50%; margin:-60px 0 0 -60px;}
.page-g .item ul li h3{ font-size:20px; color:#333; padding:35px 0 10px}
.page-g .item ul li p{ font-size:16px; color:#333; line-height:26px}
.page-g .item ul li:hover .icon:before,.page-g .item ul li:hover .icon:after{ display:none}

.page-g .item ul li:hover .icon{
    border-radius:100%;
    -webkit-animation: ripple-white 1s linear infinite;
    animation: ripple-white 1s linear infinite;
    -webkit-transition: .5s; display:inline-block; width:80px; height:80px; background:#00bebd; line-height:100px
}
.page-g .item ul li:hover .icon i{transform: rotateY(360deg);}
@-webkit-keyframes ripple-white {
     0% {
        -webkit-box-shadow: 0 0 0 0 rgba(0,190,189, 0.2), 0 0 0 10px rgba(0,190,189, 0.2), 0 0 0 20px rgba(0,190,189, 0.2);
        box-shadow: 0 0 0 0 rgba(0,190,189, 0.2), 0 0 0 10px rgba(0,190,189, 0.2), 0 0 0 20px rgba(0,190,189, 0.2)
    }
    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(0,190,189, 0.2), 0 0 0 20px rgba(0,190,189, 0.2), 0 0 0 30px rgba(0,190,189, 0);
        box-shadow: 0 0 0 10px rgba(0,190,189, 0.2), 0 0 0 20px rgba(0,190,189, 0.2), 0 0 0 30px rgba(0,190,189, 0)
    }
}

@keyframes ripple-white {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(0,190,189, 0.2), 0 0 0 10px rgba(0,190,189, 0.2), 0 0 0 20px rgba(0,190,189, 0.2);
        box-shadow: 0 0 0 0 rgba(0,190,189, 0.2), 0 0 0 10px rgba(0,190,189, 0.2), 0 0 0 20px rgba(0,190,189, 0.2)
    }
    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(0,190,189, 0.2), 0 0 0 20px rgba(0,190,189, 0.2), 0 0 0 30px rgba(0,190,189, 0);
        box-shadow: 0 0 0 10px rgba(0,190,189, 0.2), 0 0 0 20px rgba(0,190,189, 0.2), 0 0 0 30px rgba(0,190,189, 0)
    }
}
.page-h{ background:#f2f6fe; overflow:hidden; padding:20px 0 80px}
.page-h .box{ background:#fff; border-radius:10px; box-shadow:0 5px 20px rgba(14,5,10,.1); overflow:hidden;}
.page-h .box .img{ float:left; width:572px; border-right:#f8f8fc solid 5px}
.page-h .box .txt{ float:right; width:560px; padding:30px 30px 0 0; font-size:16px; color:#333; line-height:32px}
.page-i{ overflow:hidden; padding:20px 0 80px}
.page-i ul{ display:flex; justify-content: space-between;}
.page-i ul li{ background:#fff; border-radius:10px; width:285px; padding:60px 0 40px; text-align:center; background:#00bebd;}
.page-i ul li .icon{ -webkit-animation: ripple-white 1s linear infinite;
    animation: ripple 1s linear infinite;
    -webkit-transition: .5s; width:80px; height:80px; border-radius:100%; display:inline-block}
.page-i ul li p{ font-size:18px; line-height:30px; padding:50px 0 0; color:#fff}
.page-i ul li:hover{transform: translateY(-5px);}
@-webkit-keyframes ripple-white {
0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255,255,255,0.3), 0 0 0 10px rgba(255,255,255,0.3), 0 0 0 20px rgba(255,255,255,0.3);
        box-shadow: 0 0 0 0 rgba(255,255,255,0.3), 0 0 0 10px rgba(255,255,255,0.3), 0 0 0 20px rgba(255,255,255,0.3)
    }
    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(255,255,255,0.3), 0 0 0 20px rgba(255,255,255,0.3), 0 0 0 30px rgba(0,190,189, 0);
        box-shadow: 0 0 0 10px rgba(255,255,255,0.3), 0 0 0 20px rgba(255,255,255,0.3), 0 0 0 30px rgba(0,190,189, 0)
    }	
}

@keyframes ripple {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255,255,255,0.3), 0 0 0 10px rgba(255,255,255,0.3), 0 0 0 20px rgba(255,255,255,0.3);
        box-shadow: 0 0 0 0 rgba(255,255,255,0.3), 0 0 0 10px rgba(255,255,255,0.3), 0 0 0 20px rgba(255,255,255,0.3)
    }
    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(255,255,255,0.3), 0 0 0 20px rgba(255,255,255,0.3), 0 0 0 30px rgba(0,190,189, 0);
        box-shadow: 0 0 0 10px rgba(255,255,255,0.3), 0 0 0 20px rgba(255,255,255,0.3), 0 0 0 30px rgba(0,190,189, 0)
    }
}
.page-j{ background:url(../img/bd-bg.jpg) no-repeat top center; width:100%; height:634px; overflow:hidden; padding-top:20px}
.page-j .swiper-container{ margin-top:30px}
.page-j .swiper-container:before{content:''; position:absolute; height:1px; width:100%;top:9px;
background: linear-gradient(90deg,rgba(0,190,189,0),rgba(0,190,189,.2) 26.88%,rgba(0,190,189,.3) 50.28%,rgba(0,190,189,.2) 73.78%,rgba(0,190,189,0));}
.page-j .swiper-slide{ color:#fff; width:300px; position:relative; padding-top:50px; opacity:.5;transition: all 1s;}
.page-j .swiper-slide h4{ font-size:44px; font-family:font}
.page-j .swiper-slide h4 em{ font-size:14px; font-weight: normal}
.page-j .swiper-slide p{ padding-right:70px; font-size:16px; color:rgba(255,255,255,.8); line-height:28px; padding-top:10px}
.page-j .swiper-slide .icon{ width:7px; height:7px; background:#00bebd; position:absolute;top:6px; border-radius:100%;left:6px}
.page-j .swiper-slide .icon:before{content:''; position:absolute; width:15px; height:15px; border:#00bebd solid 2px; border-radius:100%;top:-6px;left:-6px}
.page-j .swiper-container:after{content:''; position:absolute; width:500px; height:100%;left:0;top: 0; z-index:10;background:-moz-radial-gradient(30% 30%,white,gray,black);}
.page-j .swiper-slide-prev,.page-j .swiper-slide-active,.page-j .swiper-slide-next{ opacity:1;transition: all 1s;}
.page-j .swiper-wrapper{transition-timing-function:linear !important;-webkit-transition-timing-function: linear !important;-moz-transition-timing-function: linear !important;-ms-transition-timing-function: linear !important;-o-transition-timing-function: linear !important;transition-timing-function: linear !important;}

.foot{ background:#0f141f; overflow:hidden; padding:40px 0; text-align:center}
.foot .t{ font-size:20px; color:#fff; line-height:36px; padding-bottom:30px}
.foot .copy{ font-size:14px; color:#fff; color:rgba(255,255,255,.3);border-top:rgba(255,255,255,.03) solid 1px; padding-top:30px}
@media screen and (max-width: 1000px) {
    .wap_main {width: 1200px;margin: 0 auto;overflow: hidden}
	.page-e .item li p{height:20px; overflow:hidden; padding:0; margin:15px 0 30px}
}
.activity{ background:rgba(0,0,0,.9); height:100px; overflow:hidden; width:100%; position:fixed;left:0;bottom:0; z-index:9999;bottom:-100px}
.activity .img{ background:url(../img/activity.png?v=1.3) no-repeat center; height:100px}
.activity .close{ position:absolute;top:50%;right:20px; width:38px; height:38px; border:#fff solid 1px; border-radius:50%; text-align:center; margin-top:-19px; cursor:pointer}
.activity .close i{ color:#fff; font-size:24px; line-height:38px}