@charset "utf-8";
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, table, tbody, p, th, td {
    -webkit-text-size-adjust: none;
    margin: 0;
    padding: 0;
    border: none;
    font-family: 'Microsoft Yahei light',STXihei, 'Microsoft Yahei', helvetica, arial;
}

html, body {
    width: 100%;
    overflow: auto;
    z-index: 1;
    background: #fff;
    min-width: 800px;
}

* {
    margin: 0;
    padding: 0;
}

img, input, button, a, select, textarea {
    margin: 0;
    padding: 0;
    resize: none;
    border: none;
    outline: none;
}

ol, ul {
    list-style: none;
}

h1, h2, h3, h4, h5, h6, p, em {
    word-wrap: break-word;
    font-weight: normal;
    font-style: normal;
}

a:active, a:focus, a:visited{
    outline: none;
}

button::-moz-focus-inner, input::-moz-focus-inner {
    padding: 0;
    border: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    font-size: 0;
}

.clearfix {
    zoom: 1;
}

.clear {
    clear: both;
    overflow: hidden;
}

a {
    text-decoration: none;
    cursor: pointer;
    color: #fff;
}

var, em {
    font-style: normal;
}

.hide {
    display: none;
}

.clear {
    clear: both;
}

p {
    margin: 0;
    padding: 0;
}

@keyframes mymove {
    0% {
        bottom: 70px;
    }
    50% {
        bottom: 80px;
    }
    100% {
        bottom: 70px;
    }
}

@-webkit-keyframes mymove {
    0% {
        bottom: 70px;
    }
    50% {
        bottom: 80px;
    }
    100% {
        bottom: 70px;
    }
}

.aTopLink {
    position: fixed;
    bottom: 70px;
    right: 30px;
    z-index: 9999;
    animation: mymove 1500ms infinite ease-in-out;
    -webkit-animation: mymove 1500ms infinite ease-in-out;
    display: none;
}

.wrap {
    width: 100%;
    position: relative;
}

.banner img, .cantext img, .footerRight span img, .examples img {
    width: 100%;
}

.examImgbg {
    height: 200px;
}

.header {
    position: fixed;
    top: 0;
    width: 100%;
    left: 0;
    min-width: 800px; /*background: #f00;*/
    padding: 15px 0 10px;
    z-index: 999;

}

.header nav {
}

/*.header nav.glay{background:#1a262d;}*/
.navText {
    width: 70%;
    margin-left: 15%;
    display: table;
    content: '';
    margin: 0 auto;
}

.header.glay {
    background: #1a262d;
}

.navText > a {
    float: left;
}

.navText ul {
    float: right;
    width: 50%;
    text-align: right;
    margin-top: 8px;
}

.navText li {
    display: block;
    margin-left: 9%;
    float: right;
    font-size: 18px;
}

.navText li a {
    color: #697e8d;
}

.navText li.cur a {
    color: #fff;
}

.logo {
    width: 140px;
}

.banner {
    position: relative;
}

.start {
    color: #fff;
    font-size: 25px;
    border-radius: 50px;
    border: 1px solid #fff;
    margin: 0 auto;
    position: absolute;
    bottom: 18%;
    left: 50%;
    margin-left: -15%;
    width: 30%;
    height: 60px;
    line-height: 60px;
    text-align: center;
}

.cantext {
    width: 70%;
    margin-left: 15%;
    margin-top: 40px;
    text-align: center;
    color: #a3a8ab;
    font-size: 15px;
}

.cantext .title{
    text-align: center;
    margin: 0 auto;
    font-size: 22px;
    font-weight: bold;
    color: #1F1F1F;
    position: relative;
    background-color: #fff;
}
.cantext .title span{
    background-color: #fff;
    display: inline-block;
    padding: 0 20px;
    z-index: 1;
    position: relative;
}
.cantext .title:before{
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    -moz-transform: translate(0, -50%) scaleY(0.5);
    -ms-transform: translate(0, -50%) scaleY(0.5);
    -webkit-transform: translate(0, -50%) scaleY(0.5);
    transform: translate(0, -50%) scaleY(0.5);
    border-top: 1px solid #505050;
    z-index: 0;
}

.cantext .canImg1 {
    margin-bottom: 50px;
    display: table;
    width: 100%;
    margin-top: 22px;
}

.canImg1 dl {
    text-align: center;
    display: inline-block;
    width: 29%;
    float: left;
    margin: 0 2%;
}

.canImg1 dl dt {
    width: 100%;
    margin: 0 auto 13px;
    height: 40px;
}

.canImg1 dl dt img {
    width: 20%;
    max-width: 50px;
}

.canImg1 dl dd {
    color: #2b2b2b;
    font-size: 16px;
    line-height: 23px;
    margin-bottom: 20px;
}

.canImg1 dl dd p {
    color: #a3a8ab;
    font-size: 12px;
    line-height: 19px;
}

.canHei {
    line-height: 50px;
}

.canHeis {
    line-height: 30px;
    text-align: left;
    width: 80%;
    margin: 0 auto;
    margin-top: 20px;
}

.canHeis img {
    margin-top: 40px;
}

.canHeie {
    line-height: 30px;
    text-align: left;
    width: 70%;
    margin: 0 auto;
}

.canHeie img {
    margin-bottom: 50px;
}

.example {
    width: 100%;    
    margin-top: 20px;
}

.example li {
    width: 20%;
    cursor: pointer;
    margin-left: 0%;
    float: left;
    margin-top: 0%;
    position: relative;
}

.example li:nth-child(1), .example li:nth-child(6), .example li:nth-child(11), .example li:nth-child(16), .example li:nth-child(21), .example li:nth-child(26), .example li:nth-child(31), .example li:nth-child(36) {
    margin-left: 0;
}

.example li img {
    width: 100%;
}

.example ul {
    width: 100%;
    display: table;
    content: '';
    margin-bottom: 25px;
}

.more {
    color: #0e8cfd;
    border: 1px solid #0e8cfd;
    width: 250px;
    height: 50px;
    cursor: pointer;
    line-height: 50px;
    text-align: center;
    margin: 0 auto;
    clear: both;
}

.moreH {
    color: #0e8cfd;
    border: 1px solid #0e8cfd;
    width: 250px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin: 0 auto;
    clear: both;
    cursor: pointer;
}

.cooperate {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 25px;
    display: table;
    content: '';
}

.cooperate li {
    float: left;
    height: 120px;
    line-height: 120px;
    width: 16%;
    border-left: 1px solid #e7e7e9;
    border-bottom: 1px solid #e7e7e9;
}

.cooperate li:nth-child(1), .cooperate li:nth-child(7), .cooperate li:nth-child(13), .cooperate li:nth-child(19) {
    border-left: none;
}

.cooperate li img {
    width: 80%;
    display: inline-block;
    vertical-align: middle;
}

.contactWay {
    margin: 0 auto;
    display: table;
    content: '';
    margin-bottom: 50px;
    margin-top: 20px;
}

.contactWay li {
    float: left;
    width: 255px;
    text-align: center;
    margin: 0 5px;
    border: 1px solid #e6e6e6;
}

.contactWay li p {
    color: #0e8cfd;
    font-size: 18px;
    line-height: 27px;
    padding-bottom: 5px;
}

.contactWay li h3 {
    font-weight: bold;
    color: #1a262d;
    font-size: 20px;
    line-height: 27px;
    padding: 5px 0 2px;
}

.quote {
    width: 350px;
    font-size: 18px;
    height: 52px;
    line-height: 52px;
    text-align: center;
    background: #0e8cfd;
    margin: 0 auto;
    margin-bottom: 50px;
}

.quote a {
    color: #fff;
}

footer {
    height: 66px;
    width: 100%;
    background: #1a262d;
}

footer .footer {
    width: 60%;
    margin: 0 auto;
}

/*.footerLeft{color:#94a5af;font-size: 18px;float:left;margin-top:25px;width:80%;}*/
.footerLeft {
    float: left;
    width: 100%;
    text-align: center;
    color: #485b66;
    font-size: 14px;
    margin-top: 40px;
}

/*.footerLeft p:nth-child(2){color:#303b42;font-size: 14px;margin-top:52px;}*/
.footerRight {
    float: right;
    margin-top: 25px;
    position: relative;
    cursor: pointer;
}

.code {
    position: absolute;
    top: -241px;
    right: -85px;
    display: none;
}

.footerRight span {
    display: inline-block;
    margin-left: 10px;
}

.opabg {
    background: #000;
    opacity: 0.3;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

.examBg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: none;
}

.examImg {
    position: absolute;
    top: 8%;
    z-index: 99999;
    width: 100%;
}

.examImg li {
    width: 80%;
    margin-left: 10%;
    background: #fff;
}

.examTop {
    display: table;
    content: '';
    padding-top: 20px;
    width: 100%;
}

.examTopLeft {
    float: left;
    margin-left: 20px;
    margin-top: 2px;
}

.examTopCenter {
    float: left;
    margin-left: 10px;
    width: 80%;
}

.examTopRight {
    float: right;
    margin-right: 20px;
    cursor: pointer;
}

.examTopCenter p {
    color: #000;
    font-size: 24px;
    line-height: 28px;
}

.examTopCenter p:nth-child(2) {
    color: #a3a8ab;
    font-size: 14px;
    line-height: 22px;
    margin-top: 10px;
}

.examTopCenter p:nth-child(3) {
    color: #a3a8ab;
    font-size: 14px;
    line-height: 22px;
}

.examCenter {
    position: relative;
}

.examBan {
    overflow: hidden;
    width: 88%;
    position: relative;
    left: 7%;
    margin-top: 20px;
}

.examWid {
    width: 202%;
    display: table;
}

.examBan .examWid > div {
    float: left;
    width: 50%;
}

.leftbtn {
    position: absolute;
    left: 14px;
    top: 50%;
    margin-top: -16px;
    cursor: pointer;
}

/*.leftbtn img,.rightbtn img{width:100%;margin-top:50%;}*/
.rightbtns {
    width: 10%;
    height: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
    cursor: pointer;
}

.leftbtns {
    width: 10%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    cursor: pointer;
}

.rightbtn {
    position: absolute;
    right: 14px;
    top: 50%;
    margin-top: -16px;
    width: 18px;
    cursor: pointer;
}

.examBan span {
    display: inline-block;
    width: 23.5%;
    margin-right: 0.5%;
}

.examBan span img {
    width: 100%;
}

.examBan span.cur {
    opacity: 1;
}

.btnColor {
    height: 1px;
    margin-top: 7px;
    margin-bottom: 6px;
    padding: 0;
    text-align: center;
}

.btnColor span {
    display: inline-block;
    width: 50px;
    height: 20px;
    border-bottom: #c5cad0 1px solid;
    cursor: pointer;
}

.btnColor span.cur {
    border-bottom: 1px solid #1f8ff8;
}

.btText {
    clear: both;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
}

.moreExam {
    height: 50px;
    width: 100%;
    text-align: center;
    line-height: 50px;
    color: #babdc0;
    background: #e8e9ea;
    cursor: pointer;
}

.con1 {
    color: #1F2A3B;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    margin-top: 16px;
    line-height: 20px;
}

.con2 {
    color: #8a93a0;
    font-size: 14px;
    text-align: center;
    margin-bottom: 16px;
    margin-top: 8px;
    line-height: 19px;
    height: 38px;
}

.example li img.new {
    position: absolute;
    right: 0;
    top: 0;
    width: 22%;
}

.black {
    background: #303b42;
}

.violet {
    background: #a46adc;
}

.blue {
    background: #139ff0;
}

.green {
    background: #8acd00;
}

.red {
    background: #dc4242;
}

.orange {
    background: #ff8200;
}

.yellow {
    background: #fcbd00;
}

.gray {
    background: #dbdbdb;
}

.colorType {
    width: 70%;
    margin-left: 15%;
    border-bottom: 1px solid #c5cad0;
    display: table;
    padding: 40px 0 0 0;
    margin-bottom: 25px;
}

.colorLeft {
    float: left;
}

.colorRight {
    float: right;
    margin-top: 7px;
    padding-bottom: 13px;
}

.colorLeft li {
    float: left;
    color: #5e676c;
    font-size: 18px;
    padding: 0 20px 10px;
    cursor: pointer;
}

.colorLeft li.cur {
    color: #1f8ff8;
    border-bottom: 1px solid #1f8ff8;
}

.colorRight li {
    float: left;
    width: 12px;
    height: 12px;
    margin: 0 2px;
    cursor: pointer;
}

.timePosition {
    position: absolute;
    top: 50%;
    text-align: center;
    width: 100%;
}

.time {
    color: #4d84a7;
    text-align: center;
    margin: 0 auto;
    display: table;
}

.time li {
    float: left;
    padding: 0 27px;
    border-right: 1px solid #4d84a7;
    height: 20px;
    line-height: 17px;
}

.time li:last-child {
    border-right: none;
}

.time li span {
    color: #fff;
    font-size: 24px;
    margin-right: 7px;
}

.timeText {
    color: #4d84a7;
    text-align: center;
    font-size: 13px;
    clear: both;
    margin-top: 15px;
}

.timebtn {
    color: #fff;
    text-align: center;
    cursor: pointer;
    background: #1f8ff8;
    font-size: 16px;
    width: 267px;
    height: 40px;
    line-height: 40px;
    margin: 0 auto;
    margin-top: 21px;
}

img.widNine {
    width: 80%;
    margin: 0 auto;
}

.icons {
    text-align: center;
    display: table;
    width: 80%;
    margin: 0 auto;
}

.icons li {
    float: left;
    width: 18%;
    margin: 0 1%;
}

.icons li img {
    width: 47%;
    margin: 0 auto;
    margin-top: 40px;
    margin-bottom: 35px;
    display: table;
}

.icons li p {
    color: #a3a8ab;
    font-size: 12px;
    line-height: 30px;
}

.icons li p.bold {
    color: #2b2b2b;
    font-size: 18px;
    margin-bottom: 5px;
}

.icons li p a {
    color: #a3a8ab;
}

.aboutType {
    width: 100%;
    background: #32383f;
    height: 60px;
    display: none;
    line-height: 60px;
    text-align: right;
}

.aboutType span {
    font-size: 17px;
    padding-left: 17px;
    cursor: pointer;
}

.aboutType span:last-child {
    margin-right: 17%;
}

.aboutType span a {
    color: #697e8d;
}

.aboutType span.curs a {
    color: #0e8cfd;
}

.examples {
    width: 70%;
    margin: 0 auto;
    display: table;
}

.examples li {
    width: 50%;
    float: left;
}

.solid {
    margin: 50px auto;
    text-align: center;
    display: table;
    padding-top: 50px;
    clear: both;
}

.bottomLeft {
    float: left;
    width: 8px;
    cursor: pointer;
}

.bottomCenter {
    float: left;
    margin: 0 5px;
}

.bottomCenter span {
    cursor: pointer;
    width: 17px;
    height: 17px;
    background: #fff;
    text-align: center;
    color: #a3a8ab;
    line-height: 17px;
    margin: 0 5px;
    font-size: 14px;
    display: inline-block;
}

.bottomCenter span.cur {
    width: 17px;
    height: 17px;
    background: #0e8cfd;
    color: #fff;
}

.bottomRight {
    float: left;
    width: 8px;
    cursor: pointer;
}

.case {
}

.case img {
    width: 100%;
}

.starTwo {
    width: 66%;
    margin: 0 auto;
    margin-left: 17%;
}

.starH3 {
    border-bottom: 1px solid #e7e7e9;
    width: 100%;
    margin-top: 150px;
    margin-bottom: 30px;
}

.starH3 p {
    font-size: 30px;
    color: #000;
}

.starH3 p:nth-child(2) {
    color: #a3a8ab;
    font-size: 14px;
}

.starTwo > p {
    width: 100%;
    font-size: 16px;
    color: #000;
    line-height: 28px;
    margin-bottom: 20px;
}

.starTwo > img {
    width: 100%;
    margin-bottom: 20px;
}

.box {
    padding: 0 30px;
    width: 80%;
    position: relative;
    margin: 30px auto;
}

.bj {
    position: absolute;
    background: url(../img/left.jpg) no-repeat;
    top: 50%;
    margin-top: -10px;
    left: 0;
    width: 12px;
    height: 20px;
    background-size: 100%;
    cursor: pointer;
}

.bj1 {
    position: absolute;
    background: url(../img/right.jpg) no-repeat;
    top: 50%;
    margin-top: -10px;
    right: 0;
    width: 12px;
    height: 20px;
    background-size: 100%;
    cursor: pointer;
}

.cantextImg {
    width: 100%;
    height: 312px;
    overflow: hidden;
    position: relative;
}

.weiImg {
    width: 300%;
    position: absolute;
}

.weiImg li {
    float: left;
}

.img {
    width: 33.5%;
}

.img a {
    float: left;
    width: 32%;
    margin: 0 0.5%;
}

.img a img {
    width: 100%;
}

.weiImg li a {
    position: relative;
}

.imgAbso {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
}

.imgAbsobg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #1f8ff8;
    opacity: 0;
}

.imgAbsoMain {
    width: 80%;
    margin-left: 10%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
}

.img a .imgAbsoMain img {
    width: 16%;
    margin: 30% auto 20%;
    z-index: 999;
}

.imgAbsoMain p:nth-child(2) {
    font-size: 14px;
    text-align: left;
}

.imgAbsoMain p:nth-child(3) {
    font-size: 12px;
    text-align: left;
    margin-top: 15px;
}

.imgExam {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
}

.topText, .bottomText {
    opacity: 0;
}

.imgexambg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #1f8ff8;
    opacity: 0;
}

.imgexamMain {
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    width: 80%;
    margin-left: 10%;
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 99;
    margin-top: -40%;
}

.example li .imgexamMain img {
    width: 22%;
    margin: 20% auto 7%;
    margin-left: 42%;
}

.imgexamMain p:nth-child(2) {
    font-size: 14px;
    text-align: center;
    line-height: 20px;
}

.imgexamMain p:nth-child(3) {
    font-size: 12px;
    text-align: center;
    width: 100%;
    margin-top: 5px;
}

.resume {
    color: #1a262d;
    font-size: 20px;
    margin-bottom: 100px;
    text-align: center;
    width: 100%;
}

.resume span {
    color: #0e8cfd;
    margin-left: 2px;
}

.cantext img.welfare {
    width: 70%;
    margin: 50px auto;
}

.recruit {
    width: 90%;
    margin: 0 auto;
}

.recruit h3 {
    text-align: left;
    clear: both;
    font-weight: normal;
    font-size: 20px;
    width: 100%;
    border-bottom: 1px solid #c5cad0;
    height: 50px;
    line-height: 50px;
}

.blue1 {
    color: #1f8ff8;
}

.green1 {
    color: #3cac22;
}

.orange1 {
    color: #ee9a38;
}

.recruit ul {
    color: #5e676c;
    width: 100%;
    font-size: 14px;
    display: table;
    margin-top: 10px;
    margin-bottom: 50px;
}

.recruit ul li {
    width: 40%;
    float: left;
    text-align: left;
    line-height: 27px;
}

.recruit ul li:first-child {
    width: 20%;
}

.recruit ul li p {
    display: table;
    clear: both;
    width: 100%;
}

.recruit ul li p span {
    float: left;
}

.recruit ul li p span:last-child {
    width: 90%;
}

.examImgs {
    width: 100%;
    overflow-y: scroll;
}

.examImgs img {
    width: 100%;
    margin: 0;
    padding: 0;
    display: -webkit-box;
    cursor: pointer;
}

.examImg li.exampleLi {
    background: none;
}

.exambgposi {
    position: absolute;
    height: 56px;
    width: 80%;
    top: 0;
}

.examBgColor {
    background: #fff;
    opacity: 0.9;
    position: absolute;
    top: 0;
    width: 100%;
    height: 56px;
}

.examBgText {
    position: absolute;
    top: 0;
}

::-webkit-scrollbar {
    width: 0px
}

.moveP .topText {
    -webkit-animation-name: slideInTop;
    -webkit-animation-duration: .8s;
    -webkit-animation-iteration-count: 1;
    animation-name: slideInTop;
    animation-duration: .8s;
    animation-iteration-count: 1;
    opacity: 1;
}

.moveP .bottomText {
    -webkit-animation-name: slideInBottom;
    -webkit-animation-duration: .8s;
    -webkit-animation-iteration-count: 1;
    animation-name: slideInBottom;
    animation-duration: .8s;
    animation-iteration-count: 1;
    opacity: 1;

}

/* 由上到下 */
@-webkit-keyframes slideInTop {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
        visibility: visible;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes slideInTop {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
        visibility: visible;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

/* 由下到上 */
@-webkit-keyframes slideInBottom {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
        visibility: visible;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes slideInBottom {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
        visibility: visible;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@-moz-keyframes slideInBottom {
    0% {
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        transform: translateY(-100%);
        visibility: visible;
    }

    100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
}

/* shang出 */
@-webkit-keyframes fadeOutTop {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}

@keyframes fadeOutTop {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}

.outP .topText {
    -webkit-animation-name: fadeOutTop;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 1s;
    animation-name: fadeOutTop;
    animation-duration: 1s;
    animation-iteration-count: 1;
}

/* xia出 */
@-webkit-keyframes fadeOutBottom {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}

@keyframes fadeOutBottom {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}

.outP .bottomText {
    -webkit-animation-name: fadeOutBottom;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    animation-name: fadeOutBottom;
    animation-duration: 1s;
    animation-iteration-count: 1;
}

/* 淡出 */
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.8;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.8;
    }
}

.moveP .popImg {
    -webkit-animation-name: fadeIn;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-iteration-count: 1;
    opacity: 0.8;

}

/* 淡出 */
@-webkit-keyframes fadeOut {
    0% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
    }
}

.outP .popImg {
    -webkit-animation-name: fadeOut;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    animation-name: fadeOut;
    animation-duration: 1s;
    animation-iteration-count: 1;
    opacity: 0;
}

.exampleContent li > div:first-child {
    overflow: hidden;
    height: 0;
    padding-bottom: 100%;
}

.exampleContent li > div:first-child img {
    transition: all 1s;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    width:100%;
    overflow:hidden;
}

.exampleContent li:hover div:first-child img {
    transform: scale(1.08);
    -moz-transform: scale(1.08);
    -webkit-transform: scale(1.08);
    -o-transform: scale(1.08);
}