@charset "utf-8";
body{
    background-color: #fff;
}
body, dd, dl, dt, h2, h3, h4, h6, li, ol, p, ul {
    margin: 0;/*外边距属性*/
    padding: 0;/*内边距属性*/
    list-style: none;/*实现取消掉li前面的点*/
    -webkit-text-size-adjust: none;/*禁用Webkit内核浏览器的文字大小调整功能*/
}

img {
    border: 0;/*边框属性*/
}

em, i, h2, h3, h4, h6 {
    font-style: normal;/*浏览器显示一个标准的字体样式。*/
}

body {
    font: 12px/1.2 "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", arial, Tahoma, SimSun, sans-serif;/*字体大小：12px 行高是12px的1.2倍 Microsoft YaHei，兼容性强，不会有编码的问题 微软雅黑 亚洲字体 */
    color: #a1a1a1;/*字体颜色*/
    /*min-width: 1190px;!*最小宽度*!*/
    text-rendering: geometricPrecision;/*text-rendering CSS 属性定义浏览器渲染引擎如何渲染字体。浏览器会在速度、清晰度、几何精度之间进行权衡。geometricPrecision着重考虑几何精度， 而不是渲染速度和易读性*/
    -webkit-font-smoothing: antialiased;/*使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服*/
    _background-image: url(about:blank);/*专为IE6写的，帮助相对于窗口固定位置的元素实现无抖动效果(_background-image:url(about:blank);_background-attachment:fixed;)*/
    _background-attachment: fixed;/*在IE7以上的浏览器以及标准浏览器，都支持一个属性 position:fixed ，可以很简单地实现想要的效果，*/
    background-color: #f8f8f8;/*背景颜色*/
}

a {
    text-decoration: none;/*表示的是文本没有下划线,一般用来去除a标签默认样式的下划线。*/
    cursor: pointer;/*手型鼠标*/
    color: #a1a1a1;
    transition: all .2s;
}
a:hover{
    color:#0d1659;
    transition:all .2s;
    text-decoration: none;
}
/*.clear是选择器而已，就是为class为clear的元素规定样式 .clear:after是加外一种东西，after是个伪元素，意思就是在class为clear的元素后面加入新内容。*/
.clear:after {
    content: "";/*content是插入生成的内容，一般与伪元素:befor和:after配合使用。表示在需要的地方插入"."。*/
    display: block;/*元素将显示为块级元素，此元素前后会带有换行符*/
    clear: both;/*清除浮动*/
}
/*选择获得焦点的输入字段，并设置其样式：*/
:focus {
    outline: 0;/*outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。*/
}
strong, b, em, i, cite {
    font-weight: 400;
    font-style: normal;
}

/*动画-start*/
.animated {
    animation-duration: 1.5s !important;
    -webkit-animation-duration: 1.5s !important;
    animation-fill-mode: both !important;
    -webkit-animation-fill-mode: both !important;
}
.animated02 {
    animation-duration: 1s !important;
    -webkit-animation-duration: 1s !important;
    animation-fill-mode: both !important;
    -webkit-animation-fill-mode: both !important;
}
/*逐渐显示*/
.toShow {
    position: absolute;
    animation: toShow 1.5s 0.5s;
    animation: toShow 1.5s 0.5s;
    animation-fill-mode: both !important;
    -webkit-animation-fill-mode: both !important;
}
/* 放大效果*/
.enlarge {
    animation-name: enlarge;
    -webkit-animation: enlarge;
}
/*从上到下进入*/
.fadeInDown {
    animation-name: fadeInDown;
    -webkit-animation: fadeInDown;
}
/*从下到上进入*/
.fadeInUpLeft {
    animation-name: fadeInUpLeft;
    -webkit-animation: fadeInUpLeft;
}
/*从右到左进入*/
.fadeInRight {
    animation-name: fadeInRight;
    -webkit-animation: fadeInRight;
}
/*从左到右进入*/
.fadeInLeft {
    animation-name: fadeInLeft;
    -webkit-animation: fadeInLeft;
}
/*中心旋转*/
.coreRotate {
    animation-name: coreRotate;
    -webkit-animation-name: coreRotate;
}

@keyframes toShow {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@-webkit-keyframes toShow {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes enlarge
{
    from {
        opacity: 0;
        -ms-transform: scale(0.1,0.1); /* IE 9 */
        -webkit-transform: scale(0.1,0.1); /* Safari */
        transform: scale(0.1,0.1); /* 标准语法 */
    }
    to {
        opacity:1;
        -webkit-transform:scale(1,1);
        transform:scale(1,1);
    }
}

@-webkit-keyframes enlarge /* Safari 与 Chrome */
{
    from {
        opacity:0;
        -ms-transform: scale(0.1,0.1); /* IE 9 */
        -webkit-transform: scale(0.1,0.1); /* Safari */
        transform: scale(0.1,0.1); /* 标准语法 */
    }
    to {
        opacity:1;
        -webkit-transform:scale(1,1);
        transform:scale(1,1);
    }
}

/*从上到下*/
@keyframes fadeInDown
{
    from {
        opacity: 0;
        -webkit-transform: translate(0,-1000px); /* Safari */
        transform: stranslate(0,-1000px); /* 标准语法 */
    }
    to {
        opacity:1;
        -webkit-transform: translate(0,10px); /* Safari */
        transform: stranslate(0,10px); /* 标准语法 */
    }
}

@-webkit-keyframes fadeInDown /* Safari 与 Chrome */
{
    from {
        opacity:0;
        -webkit-transform: translate(0,-1000px); /* Safari */
        transform: stranslate(0,-1000px); /* 标准语法 */
    }
    to {
        opacity:1;
        -webkit-transform: translate(0,10px); /* Safari */
        transform: stranslate(0,10px); /* 标准语法 */
    }
}
/*从左下到右上*/
@keyframes fadeInUpLeft
{
    from {
        opacity: 0;
        -webkit-transform: translate(-1000px,1000px); /* Safari */
        transform: stranslate(-1000px,1000px); /* 标准语法 */
    }
    to {
        opacity:1;
        -webkit-transform: translate(0,10px); /* Safari */
        transform: stranslate(0,10px); /* 标准语法 */
    }
}

@-webkit-keyframes fadeInUpLeft /* Safari 与 Chrome */
{
    from {
        opacity:0;
        -webkit-transform: translate(-1000px,1000px); /* Safari */
        transform: stranslate(-1000px,1000px); /* 标准语法 */
    }
    to {
        opacity:1;
        -webkit-transform: translate(0,10px); /* Safari */
        transform: stranslate(0,10px); /* 标准语法 */
    }
}
/*从右到左进入*/
@keyframes fadeInRight
{
    from {
        opacity: 0;
        -webkit-transform: translate(1000px,0);
        transform: stranslate(1000px,0);
    }
    to {
        opacity:1;
        -webkit-transform: translate(10px,0);
        transform: stranslate(10px,0);
    }
}

@-webkit-keyframes fadeInRight
{
    from {
        opacity:0;
        -webkit-transform: translate(1000px,0);
        transform: stranslate(1000px,0);
    }
    to {
        opacity:1;
        -webkit-transform: translate(10px,0);
        transform: stranslate(10px,0);
    }
}
/*从左到右进入*/
@keyframes fadeInLeft
{
    from {
        opacity: 0;
        -webkit-transform: translate(-1000px,0);
        transform: stranslate(-1000px,0);
    }
    to {
        opacity:1;
        -webkit-transform: translate(10px,0);
        transform: stranslate(10px,0);
    }
}

@-webkit-keyframes fadeInLeft
{
    from {
        opacity:0;
        -webkit-transform: translate(-1000px,0);
        transform: stranslate(-1000px,0);
    }
    to {
        opacity:1;
        -webkit-transform: translate(10px,0);
        transform: stranslate(10px,0);
    }
}

/*绕中心旋转*/
@keyframes coreRotate {
    5% {
        transform:rotate(5deg);
        -ms-transform:rotate(5deg); /* IE 9 */
        -webkit-transform:rotate(5deg); /* Safari and Chrome */
    }
    30% {
        transform:rotate(-5deg);
        -ms-transform:rotate(-5deg);
        -webkit-transform:rotate(-5deg);
    }
    60% {
        transform:rotate(5deg);
        -ms-transform:rotate(5deg);
        -webkit-transform:rotate(5deg);
    }
    90% {
        transform:rotate(-5deg);
        -ms-transform:rotate(-5deg);
        -webkit-transform:rotate(-5deg);
    }
}
@-webkit-keyframes coreRotate {
    5% {
        transform:rotate(5deg);
        -ms-transform:rotate(5deg); /* IE 9 */
        -webkit-transform:rotate(5deg); /* Safari and Chrome */
    }
    30% {
        transform:rotate(-5deg);
        -ms-transform:rotate(-5deg);
        -webkit-transform:rotate(-5deg);
    }
    60% {
        transform:rotate(5deg);
        -ms-transform:rotate(5deg);
        -webkit-transform:rotate(5deg);
    }
    90% {
        transform:rotate(-5deg);
        -ms-transform:rotate(-5deg);
        -webkit-transform:rotate(-5deg);
    }
}
/*动画-end*/


        
        /* 12证书 */
#List5{ width: 100%; float: left;}
#List5 .certList .u1{ width: 102%; margin: 0 -1%; overflow: hidden;}
#List5 .certList .l1{ float: left; width: 31.3%; margin: 15px 1%; box-shadow: 0 0 5px #ccc; position: relative;}
#List5 .certList .l1 .img{ line-height: 0; }
#List5 .certList .l1 .bg{ display: none; position: absolute; top: 0; width: 100%; height: 100%; background: rgba(16,68,146,0.8);}
#List5 .certList .l1 i{ width: 60px; height: 60px; background:url(../images/924_cert2.png) center no-repeat; background-size:100% 100%; z-index: -1; position:absolute; top: 50%; left: -60px; margin-left: -30px; margin-top: -30px;
-webkit-transition: all 0.2s ease-out 0s; 
-moz-transition: all 0.2s ease-out 0s; 
-o-transition: all 0.2s ease-out 0s; 
transition: all 0.2s ease-out 0s;
}
#List5 .certList .l1 em{ width: 60px; height: 60px; background:url(../images/924_cert3.png) center no-repeat; background-size:100% 100%; z-index: -1; position:absolute; top: 50%; right: -60px; margin-top: -30px; margin-right: -30px;
-webkit-transition: all 0.2s ease-out 0s; 
-moz-transition: all 0.2s ease-out 0s; 
-o-transition: all 0.2s ease-out 0s; 
transition: all 0.2s ease-out 0s;
}
#List5 .certList .l1 .t1{ width: 100%; font-size: 16px; height: 20px; line-height: 20px; overflow: hidden; color: #333; text-align: center; margin-bottom: 30px; padding:0 5px;} 
#List5 .certList .l1 .t2{ display: none; width: 100%; font-size: 16px; height: 20px; line-height: 20px; overflow: hidden; color: #fff; text-align: center; position: absolute; bottom: 30px;  padding:0 5px;} 
#List5 .certList .l1:hover .bg{ display: block;}
#List5 .certList .l1:hover em{ right: 50%; z-index: 1;}
#List5 .certList .l1:hover i{ display: block; left: 50%; z-index: 1;}
#List5 .certList .l1:hover .t1{ color: #fff;}
#List5 .certList .l1:hover .t2{ display: block;}
#List5 .imgPop{ width: 100%; height: 100%; background: rgba(0,0,0,0.2); position: fixed; top: 0; left: 0; z-index: 99; display: none;}
#List5 .imgPop2{ background:#fff; min-height: 100px; width:32%; left:36%;  position: absolute; top:50%;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);}
#List5 .imgPop2 .img{ display:block;width: 100%;}
#List5 .imgPop2 .clo{ width: 30px; height: 30px; position: absolute; top: -15px; right: -15px; background: url(../images/924_close.png) no-repeat center; background-size: cover;}
@media  screen and (max-width:1023px){
#List5 .certList .l1{ width: 48%; margin: 5px 1%;}  
#List5 .certList .l1 .img{ margin: 5px 0;}
#List5 .certList .l1 i{ width: 40px; height: 40px; left: -40px; margin-left: -20px; margin-top: -20px;}
#List5 .certList .l1 em{ width: 40px; height: 40px; right: -40px; margin-top: -20px; margin-right: -20px;}
#List5 .certList .l1 .t1{ font-size: 14px; height: 16px; line-height: 16px; margin-bottom: 10px;}  
#List5 .certList .l1 .t2{ font-size: 14px; height: 16px; line-height: 16px; bottom: 10px;} 
#List5 .imgPop2{ width:80%; left: 10%;}
}

@media screen and  (max-width:1630px){

}
@media screen and  (max-width:1200px){

}
@media screen and  (max-width:992px){

}
@media screen and  (max-width:768px){

}