@charset "utf-8";
/* CSS Document */

/* 电脑板 */
@media screen and (min-width: 1025px) {


    /* content */
    .head {position: relative; top: 0; left: 50%; margin-left: -50%; width: 100%;}
    .head img{width: 100%;}
    .cont {width: 1100px; margin: 0 auto;}
    .tab {margin: 50px 0 30px; height: 70px; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; text-align: center;}
    .tab a{display: inline-block; height: 70px; font: 16px/68px 'MS Serif'; color: #8c8c8c; margin: 0 26px;}
    .tab a.v{color: #333; border-top: 1px solid #333; border-bottom: 1px solid #333; margin-top: -1px;}
    .tab a:hover{color: #333; border-top: 1px solid #333; border-bottom: 1px solid #333; margin-top: -1px;}
    .tab_v {margin: 0 0 30px; text-align: center; opacity: 1; transition: .3s;}
    .tab_v a{display: inline-block; font: 16px/30px 'MS Serif'; color: #8c8c8c; margin: 0 16px; border-bottom: 1px solid #f9f9f9;}
    .tab_v a.v{color: #008ad1; border-bottom: 1px solid #008ad1;}
    .tab_v a:hover{color: #008ad1; border-bottom: 1px solid #008ad1;}
    .s04_list {width: 100%; overflow: hidden;}
    .s04_list ul{width: 120%; margin-bottom: 140px;}
    .s04_list ul li{position: relative; float: left; width: 267px; margin: 0 13px 13px 0;}
    .s04_list ul li img{width: 100%; height: 217px;}
    .s04_list ul li .list_pop{display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.6); padding: 28px; visibility: hidden; opacity: 0; transition: .3s;}
    .s04_list ul li .list_pop .txt1{font: bold 23px/26px 'NanumGothic'; color: #fff; padding-top: 10px;}
    .s04_list ul li .list_pop .txt2{font: bold 16px/26px 'NanumGothic'; color: #fff; padding-top: 10px;}
    .s04_list ul li .list_pop .txt3{font: bold 16px/26px 'NanumGothic'; color: #9e9e9e;}
    .s04_list ul li:hover .list_pop{visibility: visible; opacity: 1;}

}

/* 小电脑 */
@media screen and (max-width: 1600px) {
}

/* 手机版 */
@media screen and (max-width: 1024px) {

    /* content */
    .head {position: relative; top: 0; left: 50%; margin-left: -960px; width: 1920px;}
    .cont {width: 100%; padding: 0 1rem;}
    .tab {margin: 2rem 0 0; text-align: center;}
    .tab a{display: inline-block; height: 4rem; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; font: 1rem/4rem 'MS Serif'; color: #8c8c8c; margin: .5rem 1rem;}
    .tab a.v{color: #333; border-top: 1px solid #333; border-bottom: 1px solid #333; margin-top: -1px;}
    .tab a:hover{color: #333; border-top: 1px solid #333; border-bottom: 1px solid #333; margin-top: -1px;}
    .tab_v {margin: 1rem 0; text-align: center; }
    .tab_v a{display: inline-block; font: 1rem/2rem 'MS Serif'; color: #8c8c8c; margin: 0 .6rem;}
    .tab_v a.v{color: #008ad1; border-bottom: 1px solid #008ad1;}
    .tab_v a:hover{color: #008ad1; border-bottom: 1px solid #008ad1;}
    .s04_list {width: 100%; overflow: hidden;}
    .s04_list ul{width: 100%; margin-bottom: 6rem;}
    .s04_list ul li{position: relative; float: left; width: 48%; margin: 0 0 1rem 0; height:220px;background:#fff;line-height:220px;}
    .s04_list ul li:nth-child(2n){float: right;}
    .s04_list ul li img{height: auto;width:100%;}
    .s04_list ul li .list_pop{display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.6); padding: 1.2rem; visibility: hidden; opacity: 0; transition: .3s;}
    .s04_list ul li .list_pop .txt1{font: bold 1.2rem/1.6rem 'NanumGothic'; color: #fff; padding-top: .5rem;}
    .s04_list ul li .list_pop .txt2{font: bold .8rem/1.2rem 'NanumGothic'; color: #fff; padding-top: .5rem;}
    .s04_list ul li .list_pop .txt3{font: bold .8rem/1.2rem 'NanumGothic'; color: #9e9e9e;}
    .s04_list ul li:hover .list_pop{visibility: visible; opacity: 1;}

}