.champion-container {
    background-color: #cfecfc;
    padding: 100px 0;
    position: relative;
    background-image: url(https://xystcdn.xydec.com.cn/zt/champion/images/record_video_bg.jpg);
    background-size: 100% 755px;
    background-repeat: no-repeat;
    background-position: center bottom;
}
.champion-title {
    text-align: center;
}
.champion-title h2 {
    font-family:  "HYXinRenWenSong75J", sans-serif;
    font-size: 48px;
    color: #000;
    line-height: 55px;
}
.champion-title p {
    font-family:  "HYQiHei-60J", sans-serif;
    font-size: 30px;
    color: #da9a5f;
}
.champion-list {
    width: 1200px;
    margin: 0 auto;
}
.champion-list ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-content: space-between;
    flex-wrap: wrap;
}
.champion-list ul li {
    width: 295px;
    margin-top: 50px;
}
.champion-list ul li .thumb {
    width: 100%;
    height: 446px;
    background: #f1f1f1;
    position: relative;
    cursor: pointer;
}
.champion-list ul li .thumb img {
    width: 100%;
    display: block;
}
.champion-list ul li .thumb img.play {
    width: 60px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -30px 0 0 -30px;
    transition: 1s all;
}
.champion-list ul li .thumb:hover .play {
    transform: scale(1.2);
}
.champion-list ul li .con {
    font-family:  "HYQiHei-60J", sans-serif;
    font-size: 20px;
    color: #000;
    text-align: center;
    margin-top: 20px;
}
.champion-list ul li .con p {
    line-height: 1.5;
}
.videoBox {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0,0,0,.9);
    z-index: 10000;
    display: none;
}
.videoBox .video {
    width: 294px;
    height: 446px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -223px 0 0 -147px;
}
.videoBox #video {
    width: 100%;
    height: 100%;
}
.videoBox-close {
    width: 27px;
    height: 27px;
    position: absolute;
    right: 30px;
    top: 30px;
    color: #fff;
    cursor: pointer;
}
.videoBox-close img {
    width: 100%;
    display: block;
}
/*大小伸缩*/
.hg {
    -webkit-animation: pulse 2s .2s ease both infinite;
    -moz-animation: pulse 2s .2s ease both infinite;
    -o-animation: pulse 2s .2s ease both infinite;
    -ms-animation: pulse 2s .2s ease both infinite;
    animation: pulse 2s .2s ease both infinite;
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1)
    }

    50% {
        -webkit-transform: scale(1.1)
    }

    100% {
        -webkit-transform: scale(1)
    }
}

@-moz-keyframes pulse {
    0% {
        -moz-transform: scale(1)
    }

    50% {
        -moz-transform: scale(1.1)
    }

    100% {
        -moz-transform: scale(1)
    }
}

@-o-keyframes pulse {
    0% {
        -o-transform: scale(1)
    }

    50% {
        -o-transform: scale(1.1)
    }

    100% {
        -o-transform: scale(1)
    }
}

@-ms-keyframes pulse {
    0% {
        -ms-transform: scale(1)
    }

    50% {
        -ms-transform: scale(1.1)
    }

    100% {
        -ms-transform: scale(1)
    }
}
/*page*/
#page{max-width:1200px;margin:0 auto;display:box;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-justify-content:center;-moz-justify-content:center;-ms-justify-content:center;-o-justify-content:center;justify-content:center;}
#page .m-style{margin:30px 0;}
#page .m-style .active{background:#da251d;border:1px solid #da251d;}
#page .jump-btn{width:85px;height:38px;line-height:38px;background:#da251d;border:1px solid #da251d;color:#fff;}
#page .next,#page .prev{width:85px;height:38px;line-height:38px;}
#page a{color:#a0a0a0;border:1px solid #cecece;}
#page a:hover{color:#fff;background:#da251d;}
#page .jump-ipt{width:65px;height:38px;line-height:38px;background:#fff;border:1px solid #f5f5f5;}
#page em{float:left;margin:0 5px;width:auto;height:38px;line-height:38px;color:#bdbdbd;font-size:14px;}