@charset "utf-8";
/* CSS Document */
*{margin:0;padding:0;}
*, :after, :before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
body{ font-family: 'SourceHanSansCN',Arial,sans-serif; margin: 0; padding: 0;min-width: 1300px;}
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, p { padding: 0; margin: 0; }
ol, ul { list-style: none; }
li { list-style-type: none; }
img { border: 0; vertical-align:middle }
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
address, cite, code, em, th, i, b { font-weight: normal; font-style: normal; }
.clearfix { *zoom:1;
}
.clearfix:after { display: block; overflow: hidden; clear: both; height: 0; visibility: hidden; content: "."; }
a {  text-decoration: none; outline: none }

/*html5*/
article, aside, dialog, header, section, footer, nav, figure, menu { display: block }
.Hidden { display: none; }
.fl { float: left }
.fr { float: right }
.relative { position: relative }
.absolute { position: absolute }


.el-carousel__item:nth-child(3) {background: url(../images/bg1.jpg) no-repeat center;}
.el-carousel__item:nth-child(4) {background: url(../images/bg2.jpg) no-repeat center;}
.el-carousel__item:nth-child(5) {background: url(../images/bg3.jpg) no-repeat center;}


.js{ height: 900px;background: url(../images/bg4.jpg) no-repeat center;}
.xm{ height: 900px;background: url(../images/bg5.jpg) no-repeat center;}
.lx{ height: 900px;background: url(../images/bg6.jpg) no-repeat center; display: flex; align-items: center; overflow: visible; justify-content:center; }


.el-tabs__header{ width: 100%;  text-align: center; position: fixed; bottom: -15px; z-index: 999; background-color: #fff;}
.el-tabs__nav{ margin: 0 auto; display: flex; justify-content:center; }
.el-tabs__nav-wrap{ width: 100%; display: flex; align-items: center; overflow: visible; justify-content:center; }
.el-tabs__nav-scroll{ overflow: visible;}


.el-carousel__indicators{ width: 100%; position: relative; bottom: 150px; left: 0; text-align: center;}
.el-carousel__indicators--outside button{ width: 15px; height: 15px; border: 2px solid #fff; background-color: #fff; border-radius: 10px;opacity:1}
.el-carousel__indicator.is-active button{ border: 2px solid #22a3a8; background-color: #6ec6ca;opacity:1}
.el-carousel__arrow{ width: 100px; height: 100px;}
.el-carousel__arrow i{ font-size: 50px;}

.el-icon-logo{ width: 210px; height: 85px; background: url(../images/logo1.png) no-repeat center;}
.el-icon-zx{ width: 95px; height: 70px;background: url(../images/ic12.png) no-repeat center; position: absolute; top: -30px; right: -80px; }

.el-tabs__item{ height: 85px; line-height: 85px; font-size:20px; position: relative; padding: 0 35px;}
.el-tabs__nav-wrap::after{ top: 0; height: 4px; background-color: #22a3a8;}
.el-tabs__item.is-active{ color: #22a3a8; font-weight: bold;}
.el-tabs__item:hover{color: #22a3a8;}
.el-tabs__item.is-active { border: none;}
.el-tabs__active-bar{ top: 0; height: 4px; background-color: #535353;}
.hdzx,.hdzx:hover{color: #f00;}


.c_logo{ width: 320px; height: 85px; position: fixed; left: 205px; top: 0; background-color: #22a3a8; border-radius: 0 0 25px 25px; z-index: 999; display: flex; align-items: center; overflow: visible; justify-content:center;}

.nav_box2{ width:1300px; margin: 0 auto; padding-top: 150px;}
.about-left{width:60%;float:left; overflow:hidden;}
.about-left h3{margin:0;margin-left: -100px; -webkit-animation: slide 0.5s forwards;animation: slide 0.5s forwards;}
.about-left h3 span{display:block;font-size:3rem;font-weight: bold;color:#22a3a8;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;}
.about-left dl{width:100%;color:#262626;margin-left: -100px; -webkit-animation: slide 0.5s forwards;animation: slide 0.5s forwards;}
.about-left dt{ margin-bottom:1.5rem;float:left; width:8%; font-size:1.3rem;color:#22a3a8;}
.about-left dd{margin-bottom:1rem; float:left; width:90%; font-size:1rem; line-height:1.8rem; color:#262626;}
.gyml{color:#22a3a8; font-size:2rem; line-height:4.2rem;margin:0 0 2rem -100px; -webkit-animation: slide 0.5s forwards;animation: slide 0.5s forwards;line-height:1;}
.clear{clear:both;}


.picture-ul{ width:1300px; margin: 0 auto; padding-top: 150px;}
.zxxm_left{width:30%; float:left; color:#FFF; margin-right:15%; margin-top:3rem; margin-left:5%}
.zxxm_left h1{font-size:4rem; font-weight:500; margin-left: -100px; -webkit-animation: slide 0.5s forwards;animation: slide 0.5s forwards;}
.zxxm_left p{margin-top:1rem; font-size:1.1rem; line-height:1.8rem; margin-left: -100px; -webkit-animation: slide 0.5s forwards;animation: slide 0.5s forwards;}
.zxxm_an{background-image: linear-gradient(to right , #955fff, #26d4dc); width:10rem; height:3rem; margin-top:2rem; text-align:center; line-height:3rem; font-size:1.2rem;animation: heart 0.8s ease-in-out 0.8s infinite alternate;}
.zxxm_an a{color:#FFF;}
.zxxm_an a:hover{color:#dd0000;}  
.zxxm_right{width:50%; float:left;}    
.nav_box3 ul li {width:25%;position: relative; float: left; height:10rem; background:#FFF; margin-left:1rem; margin-bottom:1rem;}
.nav_box3 ul li a{ color:#999}
.nav_box3 ul li i{position:absolute;width:100%;height:100%;background-color:#6ec6ca;opacity:0;-webkit-animation:orangeOut 0.4s ease;animation:orangeOut 0.4s ease;}
.nav_box3 ul li:hover i{opacity:1; -webkit-animation:orangeIn 0.2s ease; animation:orangeIn 0.2s ease;}
.nav_box3 ul li a {width:100%;  position:absolute; text-align: center; color: #0d131a;}
.nav_box3 ul li a b{ width: 15%; height: 1px; background-color: #0d131a; display:block; margin: 0.25rem auto;}
.nav_box3 ul li a em{display: block; margin:-1px auto auto; width:50%; height:7rem;}
.nav_box3 ul li a:hover{ color:#FFF;}
.nav_box3 ul li a:hover b{ background-color:#FFF;}
.icon_nav1 a em{ background:url(../images/ic1_1.png) no-repeat center; background-size:100%;}
.icon_nav1 a:hover em{background:url(../images/ic1.png) no-repeat center;background-size:100%;}
.icon_nav2 a em{ background:url(../images/ic2_1.png) no-repeat center;background-size:100%;}
.icon_nav2 a:hover em{background:url(../images/ic2.png) no-repeat center;background-size:100%;}
.icon_nav3 a em{ background:url(../images/ic3_1.png) no-repeat center;background-size:100%;}
.icon_nav3 a:hover em{background:url(../images/ic3.png) no-repeat center;background-size:100%;}
.icon_nav4 a em{ background:url(../images/ic4_1.png) no-repeat center;background-size:100%;}
.icon_nav4 a:hover em{background:url(../images/ic4.png) no-repeat center; background-size:100%;}
.icon_nav5 a em{ background:url(../images/ic5_1.png) no-repeat center; background-size:100%;}
.icon_nav5 a:hover em{background:url(../images/ic5.png) no-repeat center; background-size:100%;}
.icon_nav6 a em{ background:url(../images/ic6_1.png) no-repeat center; background-size:100%;}
.icon_nav6 a:hover em{background:url(../images/ic6.png) no-repeat center; background-size:100%;}
.icon_nav7 a em{ background:url(../images/ic7_1.png) no-repeat center; background-size:100%;}
.icon_nav7 a:hover em{background:url(../images/ic7.png) no-repeat center; background-size:100%;}
.icon_nav8 a em{ background:url(../images/ic8_1.png) no-repeat center; background-size:100%;}
.icon_nav8 a:hover em{background:url(../images/ic8.png) no-repeat center; background-size:100%;}
.icon_nav9 a em{ background:url(../images/ic9_1.png) no-repeat center; background-size:100%;}
.icon_nav9 a:hover em{background:url(../images/ic9.png) no-repeat center; background-size:100%;}



.nav_box4{ background: rgba(0,0,0,0.45); padding: 2rem 2rem 0.4rem;opacity:0; -webkit-animation:orangeIn 0.5s forwards; animation:orangeIn 0.5s forwards;animation-delay:0.2s}
.contact-left{ float: left; margin-right: 20px;}
.contact-right{ float: left; width: 400px; color: #fff; padding-top: 30px;}
.contact-right p{display: flex; align-items: center; font-size: 20px;}
.contact-right h2{ font-size: 50px; font-weight: bold;}
.wx{ margin: 20px 0;}
.wx em{ float: right; line-height: 40px;}
.wx em b { font-size: 30px; color: #22a3a8; padding-top: 10px;display: block;}


.x_bei{ position:relative; bottom: -50px; width: 100%; text-align: center; font-size: 20px; color: #fff; display: flex; align-items: center; overflow: visible; justify-content:center; }
.js,.xm,.lx{ position: relative; bottom: -900px; -webkit-animation: myfirst 0.2s forwards;animation: myfirst 0.2s forwards;}





@-webkit-keyframes orangeIn {
    0% {
        -webkit-transform:scale(0.8);
        -ms-transform:scale(0.8);
        transform:scale(0.8);
        opacity:0
    }
    100% {
        -webkit-transform:scale(1);
        -ms-transform:scale(1);
        transform:scale(1);
        opacity:1
    }
}
@-moz-keyframes orangeIn {
    0% {
        -webkit-transform:scale(0.8);
        -ms-transform:scale(0.8);
        transform:scale(0.8);
        opacity:0
    }
    100% {
        -webkit-transform:scale(1);
        -ms-transform:scale(1);
        transform:scale(1);
        opacity:1
    }
}
@-ms-keyframes orangeIn {
    0% {
        -webkit-transform:scale(0.8);
        -ms-transform:scale(0.8);
        transform:scale(0.8);
        opacity:0
    }
    100% {
        -webkit-transform:scale(1);
        -ms-transform:scale(1);
        transform:scale(1);
        opacity:1
    }
}
@keyframes orangeIn {
    0% {
        -webkit-transform:scale(0.8);
        -ms-transform:scale(0.8);
        transform:scale(0.8);
        opacity:0
    }
    100% {
        -webkit-transform:scale(1);
        -ms-transform:scale(1);
        transform:scale(1);
        opacity:1
    }
}

@-webkit-keyframes orangeOut {
    0% {
        -webkit-transform:scale(1);
        -ms-transform:scale(1);
        transform:scale(1);
        opacity:1
    }
    100% {
        -webkit-transform:scale(0.8);
        -ms-transform:scale(0.8);
        transform:scale(0.8);
        opacity:0
    }
}
@-moz-keyframes orangeOut {
    0% {
        -webkit-transform:scale(1);
        -ms-transform:scale(1);
        transform:scale(1);
        opacity:1
    }
    100% {
        -webkit-transform:scale(0.8);
        -ms-transform:scale(0.8);
        transform:scale(0.8);
        opacity:0
    }
}
@-ms-keyframes orangeOut {
    0% {
        -webkit-transform:scale(1);
        -ms-transform:scale(1);
        transform:scale(1);
        opacity:1
    }
    100% {
        -webkit-transform:scale(0.8);
        -ms-transform:scale(0.8);
        transform:scale(0.8);
        opacity:0
    }
}
@keyframes orangeOut {
    0% {
        -webkit-transform:scale(1);
        -ms-transform:scale(1);
        transform:scale(1);
        opacity:1
    }
    100% {
        -webkit-transform:scale(0.8);
        -ms-transform:scale(0.8);
        transform:scale(0.8);
        opacity:0
    }}


@keyframes heart{

    from{margin-top:0px;}

    to{margin-top:-6px;}

}


@keyframes heart{

    from{transform:translate(0,0)}

    to{transform:translate(0,6px)}

}

@-webkit-keyframes slide {
    100% { margin-left: 0;opacity:1;  }
}

@keyframes slide {
    100% { margin-left: 0; opacity:1; }
}


@keyframes myfirst{
0%   {bottom:-900px;}
25%  {bottom:-675px;}
50%  {bottom:-450px;}
75%  {bottom:-225px;}
100% {bottom:0;}
}