/*-----------------------------------*\
    #public
\*-----------------------------------*/
*{
    box-sizing: border-box;
    list-style: none;
}
a{
  text-decoration: none;  
}
body{font-family:Arial,'Times New Roman','Microsoft YaHei',SimHei;}
body.bgcolor-grey{background-color:#f6f6f6 !important;}
.mr-10 {margin-right: 10px !important;}
.mt-50 {margin-top: 50px !important;}
.mb-120 {margin-bottom: 120px !important;}
.f-16 {font-size: 16px !important;}
.tl-main-left {float: left;width: 170px;}
.tl-main-right {float: right;width: 1000px;}
.tl-border{border:1px solid #e6e6e6;}


/*-----------------------------------*\
    #首页
\*-----------------------------------*/

.introduce-box.index-box-bg {background-color: #f7faff;}
.introduce-box h2{margin-top :48px;font-size:32px;font-weight:normal;text-align:center;color:#000;}
.introduce-tab{margin:0 -25px;}
.introduce-tab li{float:left;margin:0 25px;}
.introduce-tab a{display:block;width:200px;height:50px;border:1px solid;border-radius:25px;font-size:18px;font-weight:bold;text-align:center;line-height:48px;color:#00c0ff;transition: all .3s;}
.introduce-tab a:hover,
.introduce-tab li.active a{border-color:#00c0ff;text-decoration:none;color:#fff;background-color:#00c0ff;}
.introduce-box .tab-content{padding:28px 0;}
.introduce-txt {padding: 10px 30px 20px 30px;text-align: center;font-size: 18px;color:#666;}
.introduce-txt p {line-height:32px;margin-bottom: 0;}
.introduce-txt.f-16 {padding-top:2px;}
.introduce-gif {width: 1180px;margin-top:120px;padding-bottom:30px;position: relative;}
.introduce-gif .intr-con {width: 812px;height: 426px;background: url(../img/ico_index_01.png) no-repeat; margin: 0 auto;position: relative;}
.introduce-gif .intr-light {width: 368px;height: 344px;background: url(../img/ico_index_02.png) no-repeat;position: absolute;top:-62px;left:218px;z-index: 2;}
.introduce-gif .intr-pad {width: 246px;height: 176px;/*background: url(../images/ico/ico_index_03.png) no-repeat;*/position: absolute;top:-105px;left:278px;z-index: 1;}
.introduce-gif .intr-pad img {animation: myfirst 2.5s infinite;}
@keyframes myfirst {
    0% {
        transform: translate(0px, 0px);
    }
    50% {
        transform: translate(0px, -30px);
    }
    100% {
        transform: translate(0px, 0px);
    }
}
.introduce-gif .intr-tit {width:230px;height: 60px;position: absolute;}
.introduce-gif .intr-s-tit {display: inline-block;margin-bottom: 10px;font-size: 24px;color:#0091ff;}
.introduce-gif .intr-s-infor {display: inline-block;font-size: 18px;color:#666;}
.introduce-gif .intr-s-type1 {top:42px;left:-8px;text-align: right;}
.introduce-gif .intr-s-type2 {top:42px;right:-3px;text-align: left;}
.introduce-gif .intr-s-type3 {top:338px;left:-10px;text-align: right;}
.introduce-gif .intr-s-type4 {top:288px;right:-3px;text-align: left;}

.introduce-advantage {margin:5px -42px 20px 0;}
.introduce-advantage-list li{float:left;width: 570px;height: 234px;margin:30px 40px 30px 0;padding:10px 10px 20px 30px;background: #fff;border-radius: 8px;box-shadow: 0 1px 3px #e4e4e4;}
.inr-ad-left {float:left;width: 340px;}
.inr-ad-right {float:left;width: 180px;position: relative;}
.inr-ad-type {display: inline-block;font-size: 24px;color:#0091ff;padding-bottom: 10px;border-bottom:#0091ff solid 4px;}
.inr-ad-txt {margin-top:25px;font-size: 20px;color:#000;}
.inr-ad-title {width: 340px;line-height:28px;font-size: 16px;color:#666;}
.inr-index-personIcon {display: inline-block;position: absolute;width: 180px;height: 260px;top: -42px;right: -10px;}
.inr-personIcon-1 {background: url(../img/ico_img_p1.png) no-repeat;}
.inr-personIcon-2 {background: url(../img/ico_img_p2.png) no-repeat;}
.inr-personIcon-3 {background: url(../img/ico_img_p3.png) no-repeat;}
.inr-personIcon-4 {background: url(../img/ico_img_p4.png) no-repeat;}
.introduce-our-user {margin-bottom: 20px;text-align: center;}
.introduce-our-user li{float:left;width: 25%;height: 340px; }
.introduce-our-user li img{width:180px;height: 180px;}
.introduce-our-usere li p{
    color: #fff;
    font-size: 20px;
}

.introduce-advantage-list li:hover{
    animation: run1 1s linear;
}
.introduce-our-user li:hover{
    animation: run 1s linear;
}
@keyframes run{
    0%{transform: scale(1)}
    25%{transform: scale(0.8)}
    50%{transform: scale(0.5)}
    100%{transform: scale(1)}
}
@keyframes run1{
    0%{transform: rotateY(0deg)}
   
    50%{transform: rotateY(45deg)}
    100%{transform: rotateY(0deg)}
}
.introduce-box{
    background-color:#282828;
}