﻿
img { max-width: 100%; }
.banner { width: 100%; margin: 0px auto; }
    .banner > img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; }


nav.breadbig { width: 100%; background-color: #f7f7f7; font-size: 14px; color: #999; margin: 0px auto; }
    nav.breadbig > .conn { display: flex; width: 100%; flex-wrap: wrap; max-width: 1920px; padding: 20px 6%; margin: 0px auto; }
        nav.breadbig > .conn > .l { flex: 1; }
            nav.breadbig > .conn > .l > a { font-size: 14px; color: #999; }
        nav.breadbig > .conn > .r { text-align: right; }
            nav.breadbig > .conn > .r > a { margin-left: 4rem; font-size: 1.125rem; color: #363636; position: relative; line-height: 1; }
                nav.breadbig > .conn > .r > a.action { color: #f08200 }
                    nav.breadbig > .conn > .r > a.action:after { position: absolute; margin: 0px auto; bottom: -20px; left: 0px; right: 0px; content: ""; height: 2px; width: 18px; background-color: #f08200 }

@media only screen and (max-width:1280px) {
    nav.breadbig > .conn { padding: 20px 3%; }
}

@media only screen and (max-width:1024px) {
    nav.breadbig > .conn { padding-left: 1rem; padding-right: 1rem; }
}



.title { width: 100%; }
    .title > b { color: #232323; font-size: 2rem; font-weight: 400; position: relative; }
        .title > b::after { position: absolute; content: ""; border-bottom: solid 2px #f08200; width: 28px; left: 0px; bottom: -1.25rem; }

.titlebai > b { color: #fff; }

@media only screen and (max-width:1400px) {
    .title > b { font-size: 1.85rem; }
}

@media only screen and (max-width:1280px) {
    .title > b { font-size: 1.6rem; }
}

@media only screen and (max-width:1024px) {
    .title > b { font-size: 1.45rem; }
}

@media only screen and (max-width:960px) {
    .title > b { font-size: 1.3rem; }
}

@media only screen and (max-width:768px) {
    .title > b { font-size: 1.15rem; }
}

@media only screen and (max-width:480px) {
    .title > b { font-size: 1rem; }
}




.wbcontentbig { width: 100%; padding: 0px 6%; max-width: 1920px; margin: 0px auto; }
    .wbcontentbig > .conn { width: 100%; padding: 6.25rem 0px; }
        .wbcontentbig > .conn > .text { width: 100%; margin-top: 3.25rem; background-color: #fff; text-align: center; }
            .wbcontentbig > .conn > .text > img { margin: 0px auto; margin-bottom: 2rem; }
            .wbcontentbig > .conn > .text > ul { width: 100%; display: grid; grid-gap: 30px; grid-template-columns: repeat(3,auto) }
                .wbcontentbig > .conn > .text > ul > li { text-align: center; box-shadow: 2px 2px 3px 3px rgba(0,0,0,.05); border-radius: 10px; }


.item { padding: 20px; width: 100%; }
    .item > a { display: block; text-align: left; color: #b8b8b8 }
        .item > a > h3 { color: #232323; font-weight: 400; font-size: 1.15rem; -moz-transition: all, 0.5s; -webkit-transition: all, 0.5s; -o-transition: all, 0.5s; transition: all, 0.5s }
        .item > a > .add { padding: 10px 0px; border-bottom: solid 1px #eeeeee }
        .item > a > .info { margin-top: 10px; }
            .item > a > .info > i { font-style: normal; color: #666; font-size: 14px; display: block; margin-bottom: 5px; }
            .item > a > .info > p { line-height: 1.5; color: #b8b8b8; font-size: 14px; }
    .item > .img > img { width: 100%; object-fit: cover; }
    .item > a > .more { margin-top: 10px; text-align: left; overflow: hidden; }
        .item > a > .more > i { display: inline-block; float: left; width: 40px; height: 40px; border: solid 1px #e5e5e5; border-radius: 20px; text-align: center; color: #999; font-style: normal; padding-top: 10px; -moz-transition: all, 0.5s; -webkit-transition: all, 0.5s; -o-transition: all, 0.5s; transition: all, 0.5s }
            .item > a > .more > i > svg { fill: #999; }

    .item > a:hover > h3 { color: #f08200;  }
    .item > a:hover > .more > i { background-color: #f08200; border: solid 1px #f08200; }
        .item > a:hover > .more > i > svg { fill: #fff }


@media only screen and (max-width:1280px) {
    .wbcontentbig { padding: 0px 3%; }
}

@media only screen and (max-width:1024px) {
    .wbcontentbig { padding-left: 1rem; padding-right: 1rem; }
        .wbcontentbig > .conn { padding: 4rem 0px; }
            .wbcontentbig > .conn > .text { margin-top: 3rem; }
}

@media only screen and (max-width:768px) {
    .wbcontentbig > .conn { padding: 2rem 0px; }
        .wbcontentbig > .conn > .text > ul { grid-template-columns: repeat(2,auto) }
}

@media only screen and (max-width:480px) {
    .wbcontentbig > .conn > .text > ul { grid-template-columns: repeat(1,auto) }
}
