@charset "utf-8";

/*!
 * @名称：base.css
 * @功能：1、重设浏览器默认样式
 *       2、设置通用原子类
 */
/* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */
* {
    font-family: 'Microsoft YaHei';
}

html {
    /* 转换后10px */
    font-size: 62.5%;
    background: white;
    color: black;
}

/* 内外边距通常让各个浏览器样式的表现位置不同 */
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
hr,
button,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    margin: 0;
    padding: 0;
}

/* 要注意表单元素并不继承父级 font 的问题 */
body,
button,
input,
select,
textarea {
    /* 转换后10px */
    font-size: 100%;
}

/*input,select,textarea {
    font-size:100%;
}*/
/* 去掉 table cell 的边距并让其边重合 */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* ie bug：th 不继承 text-align */
th {
    text-align: inherit;
}

/* 去除默认边框 */
fieldset,
img {
    border: none;
}

/* ie6 7 8(q) bug 显示为行内表现 */
iframe {
    display: block;
}

/* 去掉 firefox 下此元素的边框 */
abbr,
acronym {
    border: none;
    font-variant: normal;
}

/* 一致的 del 样式 */
del {
    text-decoration: line-through;
}

address,
caption,
cite,
code,
dfn,
em,
th,
var {
    font-style: normal;
    font-weight: 500;
}

/* 去掉列表前的标识，li 会继承 */
ol,
ul {
    list-style: none;
}

/* 对齐是排版最重要的因素，别让什么都居中 */
caption,
th {
    text-align: left;
}

/* 来自yahoo，让标题都自定义，适应多个系统应用 */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: 500;
}

q:before,
q:after {
    content: '';
}

/* 统一上标和下标 */
sub,
sup {
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* 让链接在 hover 状态下显示下划线 */
/*a:hover {
    text-decoration:underline;
}*/
/* 默认不显示下划线，保持页面简洁 */
ins,
a {
    text-decoration: none;
}

/* 去除 ie6 & ie7 焦点点状线 */
a:focus,
*:focus {
    outline: none;
}

a {
    color: #1a1a1a;
}

img {
    /*max-width: 100%;*/
    border: 0px;
    vertical-align: top;
    border: none;
}

input {
    border: none;
    appearance: none;
    -moz-appearance: none;
    outline: none;
    /** input标签聚焦不出现默认边框: **/
    -webkit-appearance: none;
    /** 用于IOS下移除原生样式 **/
}

button {
    border: 0;
    background-color: none;
    outline: none;
    -webkit-appearance: none;
    /** 用于IOS下移除原生样式 **/
}

select {
    border: none;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    /*在选择框的最右侧中间显示小箭头图片*/
    background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;
    padding-right: 14px;
}


/* 清除浮动 */
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

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

.clearfix {
    zoom: 1;
    /* for ie6 & ie7 */
}

.clear {
    clear: both;
    display: block;
    font-size: 0;
    height: 0;
    line-height: 0;
    overflow: hidden;
}

/* 设置显示和隐藏，通常用来与 js 配合 */
.hide {
    display: none;
}

.block {
    display: block;
}

/* 设置浮动，减少浮动带来的 bug */
.fl,
.fr {
    display: inline;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

/* ---------------------------------------------------------------- */


body {
    min-width: 1280px;
    font-family: "Microsoft YaHei", Arial, Verdana, Helvetica, sans-serif;
}

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

/* ----------------------------header------------------------------------- */
body {
    background: url('1882.jpg')center no-repeat;
    background-size: 100% 100%;
}

.home {
    background-color: #fff;
}

.home .w a {
    padding-left: 2.5rem;
    font-size: 1.6rem;
    line-height: 5rem;
    background: url(1883.png)left no-repeat;
}

.header .w img {
    width: 100%;
    margin-top: 11.5rem;
    margin-bottom: 10rem;
}

/* ---------------------列表页------------------------------- */

.main .w {
    display: flex;
    justify-content: space-around;
    padding-top: 5rem;
    background-color: #fff;
    border-radius: 1rem;
    /* background-color: pink; */
}

.main .w .list {
    flex: 0 1 21%;
}

.main .w .list ul {
    display: flex;
    flex-direction: column;
}

.main .w .list ul li {
    width: 24.5rem;
    padding: 2rem 0 2rem 2.5rem;
    margin-bottom: 2rem;
    border: 0.1rem;
    border-radius: .7rem;

    background: linear-gradient(to right, #189659, #13764e, #106147);
}

.main .w .list ul li a {
    font-size: 2.4rem;
    color: #fff;
}

.main .w .list ul .cur {

    box-shadow: 0 0 .7rem .2rem #c5e8d5;
    background: #fff;
}

.main .w .list ul .cur a {
    color: #0f7a40;
}

/* ------------------内容------------------------------------- */
.main .w .con {
    flex: 0 1 72.5%;
}

.main .w .con ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.main .w .con ul li {
    flex: 0 1 48.2%;
    height: 32.2rem;
}

.main .w .con ul li img {
    width: 100%;
    height: 25.2rem;
}

.main .w .con ul li a {
    line-height: 7rem;
    font-size: 1.8rem;
}

.page {
    height: 6rem;
}

/* --------------------------footer------------------------------- */
.footer .w {
    display: flex;
    height: 10.5rem;
    line-height: 10.5rem;
    justify-content: center;
    font-size: 1.8rem;
    color: #fff;
}

.footer .w a {
    color: #fff;
}


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

    html {
        width: 100%;
    }

    body {
        width: 100%;
        min-width: 100%;
    }

    .w {
        width: 90%;
    }

    .header .w img {
        margin: 2rem 0;
    }

    .home .w a {
        padding-left: 3rem;
    }

    .main .w {
        flex-direction: column;
        padding-top: 2rem;
    }

    .main .w .list {
        flex: 0 1 100%;
        overflow: hidden;
    }

    .main .w .list ul {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: scroll;

    }

    .main .w .list ul::-webkit-scrollbar {
        width: 0px;

    }

    .main .w .list ul::-webkit-scrollbar {

        display: none;

    }

    .main .w .list ul li {
        flex: none;
        flex-wrap: nowrap;
        width: auto;
        padding: .8rem 1rem;
        margin-right: 2rem;
    }


    .main .w .con {
        flex: 0 1 100%;
    }

    .main .w .con ul {
        flex-wrap: wrap;
        justify-content: center;
    }

    .main .w .con ul li {
        flex: 0 1 95%;
        height: 27rem;

    }

    .main .w .con ul li img {
        height: 21rem;
    }

    .main .w .con ul li a {
        line-height: 4rem;
    }

    .footer .w {
        line-height: 3.5rem;
        flex-direction: column;
    }

    .footer .w a,
    .footer .w span {
        display: flex;
        justify-content: center;
    }
}