/**
 * @Author: SuperMoo <SuperWoods>
 * @Date:   2017-03-28-13:09:04
 * @Email:  st_sister@me.com
 * @Filename: index.css
 * @Last modified by:   SuperWoods
 * @Last modified time: 2017-03-28-14:41:45
 * @License: MIT
 * @Copyright: Copyright (c) Xinhuanet Inc. All rights reserved.
 */
body {
    background-color: #efe5d8;
}

a:hover {
    color: #f49d1c !important;
}

.top {
    background-color: #275bb7;
    text-align      : center;
    font-size       : 12px;
    line-height     : 30px;
    height          : 30px;
    overflow        : hidden;
}

.top a {
    color : #FFF;
    margin: 0 12px;
}

.banner {
    background: url('//www.xinhuanet.com/video/zt/shmjg/bundle/banner.jpg') center 0 no-repeat;
    height    : 644px;
}

.banner h1 {
    display: none;
}

.part {
    width   : 1200px;
    margin  : 0 auto;
    overflow: hidden;
}

.col {
    background   : url('//www.xinhuanet.com/video/zt/shmjg/bundle/col-bg.jpg') 0 center no-repeat;
    overflow     : hidden;
    padding      : 12px 0;
    margin-bottom: 20px;
}

.col h2 {
    font-size   : 30px;
    padding-left: 60px;
}

.col,
.col h2 a,
.colm .col h2 {
    height     : 55px;
    line-height: 70px;
    color      : #f49d1c;
}

.box {
    width: 1220px;
}

.box:after {
    content : '';
    display : block;
    width   : 100%;
    overflow: hidden;
    height  : 0;
}

.item {
    float         : left;
    width         : 284px;
    padding-top   : 172px;
    padding-bottom: 10px;
    position      : relative;
    margin-right  : 20px;
    margin-bottom : 30px;
}

.item img {
    background-color: #CCC;
    position        : absolute;
    z-index         : 1;
    width           : 284px;
    height          : 161px;
    top             : 0;
    left            : 0;
}

.item:before {
    background    : url('//www.xinhuanet.com/video/zt/shmjg/bundle/icon-play-btn.png') 0 center no-repeat;
    content       : '';
    display       : block;
    z-index       : 2;
    width         : 52px;
    height        : 52px;
    margin-left   : -26px;
    margin-top    : -26px;
    top           : 81px;
    left          : 50%;
    position      : absolute;
    pointer-events: none;
}

.sub-title {
    pointer-events  : none;
    position        : absolute;
    z-index         : 3;
    top             : 161px;
    background-color: #f49d1c;
    color           : #FFF;
    display         : inline;
    padding         : 0 4px;
    line-height     : 22px;
    margin-top      : -22px;
    overflow        : hidden;
    font-size       : 14px;
}

.footer {
    text-align      : center;
    color           : #FFF;
    background-color: #4d4a42;
    line-height     : 24px;
    padding         : 22px 0 30px;
    font-size       : 14px;
}
@media (min-width:736px) and (max-width:1024px) {
    .banner {
        height         : 400px;
        background-size: cover;
    }

    .top a {
        margin: 0 6px;
    }

    .part {
        width: 96%;
    }

    .box {
        width: 110%;
    }
}
@media (min-width:569px) and (max-width:735px) {
    .banner {
        height             : 240px;
        background-size    : auto 240px;
        background-position: -125px 0;
        background-repeat  : repeat-x;
    }

    .top {
        display: none;
    }

    .part {
        width: 98%;
    }

    .box {
        width: 100%;
    }

    .item {
        float : none;
        width : 90%;
        margin: 0 auto;
    }

    .item img {
        width: 100%;
    }

    .footer {
        font-size: 12px;
    }
}
@media screen and (max-width:568px) {
    .banner {
        height             : 200px;
        background-size    : auto 200px;
        background-position: -106px 0;
    }

    .top {
        display: none;
    }

    .part {
        width: 98%;
    }

    .box {
        width: 100%;
    }

    .item {
        float : none;
        width : 90%;
        margin: 0 auto;
    }

    .item img {
        width: 100%;
    }

    .footer {
        font-size: 12px;
    }
}