.header {
    background: #fff;
}

.pro {
    margin: 40px auto 80px;
    /* border-top: 1px solid #e9e9e9; */
    width: 1140px;
}

.carry {
    margin: 30px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.carry form {
    box-sizing: border-box;
    border: 1px solid #ddd;
    width: 290px;
    height: 40px;
    display: flex;
}

.carry form input,
.carry form button {
    height: 100%;
}

.carry form input {
    width: calc(100% - 40px);
    box-sizing: border-box;
    padding: 0 15px;
    border: none;
}

.carry form button {
    width: 40px;
    box-sizing: border-box;
    padding: 6px;
    border: none;
    background-color: #0092de;
}

.carry form button img {
    display: block;
    width: 100%;
}

.carry h5 {
    font-size: 13px;
    font-weight: 300;
    color: #666;
}

.proList {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.proList li {
    background: #fff;
    box-shadow: 0 0 20px 0 rgba(169, 169, 169, 0.3);
    overflow: hidden;
    position: relative;
    padding: 10px 10px 25px;
    text-align: center;
}

.proMg {
    height: 120px;
    margin: 0 0 10px;
}

.proMg img {
    display: block;
    margin: 0 auto;
    max-height: 100%;
}

.proList h5 {
    font-size: 16px;
    color: #63666A;
    font-weight: normal;
}

.hov-list {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    position: absolute;
    top: 110%;
    left: 0;
    z-index: 1;
    transition: .4s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 20px;
}

.proList li:hover .hov-list {
    top: 0;
}

.hov-list h6 {
    font-size: 16px;
    color: #fff;
}

.hov-list p {
    font-size: 14px;
    color: #fff;
}

.entry {
    width: 1200px;
    margin: 0 auto;
}

.listing {
    width: 100%;
    background: #F6F6F6;
}

.listing>div {
    padding: 50px 0 30px;
}

.listSeach {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 30px;
}

.listSeach form {
    width: 340px;
    height: 50px;
    display: flex;
    background-color: #fff;
}

.listSeach form input {
    width: calc(100% - 50px);
    border: none;
    background: none;
    box-sizing: border-box;
    padding: 0 15px;
    font-size: 16px;
}

.listSeach form button {
    width: 50px;
    padding: 8px;
    border: none;
    background-color: #0092de;
}

.listSeach form button img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

.category {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 20px;
}

.category a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #666666;
    cursor: pointer;
    min-width: 150px;
    height: 50px;
    background-color: #ffffff;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 5px;
    transition: .4s;
}

.category a:hover,
.category a.active {
    background: #0092de;
    color: #fff;
}

.result {
    margin: 30px 0 0;
}

.result li {
    box-sizing: border-box;
    background-color: #fff;
    padding: 30px;
    display: flex;
    justify-content: space-between;
}

.resMg {
    width: 425px;
    box-sizing: border-box;
    border: 1px solid #e5e5e5;
    box-sizing: border-box;
    padding: 3px;
}

.resMg img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

.resTxt {
    width: calc(100% - 425px);
    padding-left: 30px;
    box-sizing: border-box;
}

.resTxt h4 {
    font-weight: normal;
    font-size: 20px;
    color: #0092de;
    margin: 15px 0 20px;
}

.resTxt p {
    font-size: 14px;
    color: #555;
    line-height: 25px;
}

.string {
    background: #fff;
    padding: 50px 0 30px;
}

.rice {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.rice h5 {
    font-size: 16px;
    margin: 0 0 5px;
    font-weight: normal;
    color: #333;
}

.filter {
    position: relative;
    box-sizing: border-box;
    padding: 0 30px 0 10px;
    border: 1px solid #555;
    height: 40px;
}

.filter::after {
    display: inline-block;
    content: "";
    border-left: 5px solid transparent;
    border-top: 5px solid #333;
    border-right: 5px solid transparent;
    position: absolute;
    right: 9px;
    top: 50%;
    margin-top: -2px;
    z-index: 1;
}

.filter input {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: none;
    background: none;
}

.filst {
    position: absolute;
    background: #fff;
    width: 100%;
    top: 100%;
    left: 0;
    padding: 10px 0;
    box-sizing: border-box;
    border: 1px solid #555;
    display: none;
    z-index: 3;
}

.filst p {
    padding: 5px 15px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
}

.dispatc {
    width: 100%;
    text-align: center;
    table-layout: fixed;
}

.dispatc tr:nth-child(odd) {
    background-color: #F9F9F9;
}

.dispatc tr:hover {
    background: #F0F0F0;
}

.dispatc th,
.dispatc td {
    padding: 10px 5px;
    box-sizing: border-box;
    border-bottom: 1px solid #e9e9e9;
}

.dispatc th {
    background: #E9E9E9;
    border-right: 1px solid #fff;
}

.disMg {
    width: 55px;
    margin: 0 auto;
}

.disMg img {
    display: block;
    width: 100%;
}

.dispatc a {
    color: #333;
    font-size: 13px;
}

.paging {
    display: flex;
    justify-content: center;
    gap: 3px;
    margin: 30px 0 0;
}

.paging li>* {
    border: 1px solid #707070;
    box-sizing: border-box;
    border-radius: 4px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #333;
    padding: 3px 12px;
}

.paging li a:hover,
.paging li a.active {
    background: #0092de;
    color: #fff;
}

/* contact */
.contact {
    width: 1100px;
    margin: 0 auto;
}

.contNav {
    display: flex;
    align-items: center;
    padding: 15px 0;
    gap: 8px;
}

.contNav a,
.contNav span {
    font-size: 15px;
    color: #555;
}

.touch {
    margin: 20px 0 50px;
    background-color: #fff;
}

.touch h3,
.onLine h3 {
    padding: 20px 30px;
    font-weight: normal;
    font-size: 26px;
    color: #232323;
}

.touch hr {
    width: 100%;
    border: none;
    height: 1px;
    background: #eee;
    margin: 20px 0;
}

.intel {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    box-sizing: border-box;
    padding: 0 30px 20px;
}

.intLogo {
    margin: 0 0 25px;
}

.intLogo img {
    display: block;
    max-width: 50%;
}

.intLeft h4 {
    color: #63666A;
    font-size: 24px;
}

.intRght {
    box-sizing: border-box;
    padding: 10px;
    background: #fff;
    border: 1px solid #eee;
}

.intRght img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

.intLeft p {
    padding: 3px 0;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #63666A;
}

.consult {
    padding: 20px 0 130px;
}

.conList {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.conList li {
    margin: 20px 0 0;
    padding: 0 75px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.conTxt h5 {
    color: #222;
    font-size: 20px;
    margin: 13px 0;
    font-weight: normal;
}

.conTxt h6 {
    font-weight: normal;
    font-size: 16px;
    color: #63666A;
    margin: 5px 0;
}

.conCode {
    width: 120px;
}

.conCode img {
    display: block;
    width: 100%;
}

.onLine {
    padding: 10px 0 70px;
    background: #fff;
}

.onLine h3 {
    text-align: center;
}

.onlist {
    padding: 0 15px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.onlist li {
    background: #F7F7F7;
    padding: 40px 10px;
    box-sizing: border-box;
    border-bottom: 3px solid transparent;
}

.onlist li:hover {
    border-color: #0070BC;
}

.onlist li a {
    text-align: center;
    display: block;
}

.onlMg {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.onlMg img {
    display: block;
    max-width: 70%;
}

.onlist h5 {
    margin: 20px 0 30px;
    color: #222;
    font-size: 20px;
    font-weight: 300;
}

.onlist p {
    font-size: 14px;
    color: #616265;
    line-height: 25px;
}

.onlist h6 {
    margin: 20px 0 0;
    color: #0070BC;
    font-size: 14px;
    font-weight: normal;
}

/* subscribe */
.subscribe {
    margin: 50px 0;
    background: #fff;
    padding: 30px;
}

.subNav {
    display: flex;
    padding: 10px 0;
}

.subNav li {
    cursor: pointer;
    margin: 0 40px 0 0;
    font-size: 18px;
    color: #222;
    padding: 10px 0;
    border-bottom: 2px solid transparent;
}

.subNav li.active {
    border-color: #0070BC;
    font-weight: 700;
}

.gather h6 {
    font-size: 15px;
    /* color: #f00; */
    margin: 20px 0;
    font-weight: 300;
}

.gather h5 {
    border-left: 5px solid #0072CE;
    background: #F6F6F6;
    font-size: 15px;
    /* color: #f00; */
    font-weight: normal;
    display: flex;
    align-items: center;
}

.gather h5 span {
    padding: 5px 10px;
    background: #fff;
    display: block;
    margin-right: 10px;
}

.editText {
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-between; */
    margin: 20px 0;
    gap: 15px 0;
}

.editText>div {
    display: flex;
    align-items: center;
    gap: 5px;
}

.editText div>p {
    font-size: 15px;
    color: #666;
    width: 100px;
    text-align: right;
}

.editText div>p span{
    color: red;
}

.editText input[type="text"] {
    display: block;
    width: 170px;
    height: 40px;
    box-sizing: border-box;
    padding: 0 10px;
    font-size: 16px;
    border: 1px solid #eaeaea;
}

.editText textarea {
    width: calc(100% - 105px);
    border: 1px solid #eaeaea;
    height: 200px;
    box-sizing: border-box;
    padding: 15px;
    resize: vertical;
}

.choice label {
    display: flex;
    align-items: center;
    gap: 5px;
}

.gather button {
    border: none;
    background: #0092de;
    font-size: 15px;
    color: #fff;
    font-weight: 600;
    width: 160px;
    height: 50px;
    border-radius: 4px;
    cursor: pointer;
}

.subFom li {
    display: none;
}

.subFom li.active {
    display: block;
}

.specifics {
    width: 1140px;
    margin: 0 auto;
}

.specInfo {
    margin: 50px 0 0;
}

.specInfo h3 {
    text-align: center;
    padding: 0 0 25px;
    border-bottom: 1px solid #AAAAAA;
    font-size: 36px;
    color: #2A5245;
}

.specBox {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin: 20px 0 0;
}

.specBox>div {
    padding-bottom: 30px;
}

.specBox>div:nth-child(1) {
    box-sizing: border-box;
    padding-right: 30px;
    border-right: 1px solid #aaa;
}

.specBox>div:nth-child(2) {
    box-sizing: border-box;
    padding-left: 30px;
}

.specMg h4 {
    font-weight: normal;
    color: #2A5245;
    font-size: 18px;
    margin: 0 0 15px;
}

.jqzoom {
    border: none;
    position: relative;
    padding: 0px;
    cursor: pointer;
    margin: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.jqzoom img {
    display: block;
    max-width: 300px;
}

.zoomdiv {
    z-index: 100;
    position: absolute;
    top: 0px;
    left: auto;
    left: 1000px !important;
    width: 310px !important;
    height: 310px !important;
    background: #ffffff;
    border: 1px solid #CCCCCC;
    display: none;
    text-align: center;
    overflow: hidden;
}

.jqZoomPup {
    z-index: 10;
    visibility: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 20px;
    height: 20px;
    cursor: crosshair;
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    filter: alpha(Opacity=50);
}

.specary a {
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    padding: 10px;
}

.toDown,
.toShop {
    width: 220px;
    height: 75px;
    border-radius: 40px;
    color: #fff;
    margin: 0 0 40px;
}

.toDown {
    background: #0092de;
}

.toShop {
    background: #C0392B;
}

.toDown h5,
.toShop h5 {
    font-size: 20px;
    font-weight: lighter;
}

.toDown p,
.toShop p {
    font-size: 12px;
    margin: 5px 0 0;
}

.caryMg {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 5px;
    background: #fff;
    overflow: hidden;
}

.caryMg img {
    display: block;
    max-height: 100%;
}

.toTall h6 {
    font-size: 26px;
    color: #2A5345;
    line-height: normal;
    font-weight: normal;
}

.toTall h6 p {
    font-weight: lighter;
    font-size: 16px;
    margin: 0 0 5px;
}

.toTall h6 span{
    display: block;
    margin-bottom: 5px;
}

.specDate {
    margin: 90px 0;
}

.specNav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.specNav li {
    background: #BBBBBB;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    padding: 20px;
    font-size: 20px;
    color: #fff;
    position: relative;
}

.specNav li.active {
    background: #0092de;
}

.specNav li.active::after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: #0092de;
    transform: rotate(45deg);
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    margin: auto;
}

.specont {
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    margin: 10px 0 0;
    background: #EEEEEE;
}

.specont li {
    display: none;
}

.specont li.active {
    display: block;
}

.specont .detaMg li{
    display: block;
}

.detaMg img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

.related {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    box-sizing: border-box;
    padding: 0 10px;
}

.relMg {
    background: #fff;
}

.relMg img {
    display: block;
    width: 100%;
}

.related p {
    font-size: 16px;
    color: #5782D8;
    text-align: center;
}

.glean {
    width: 1180px;
    margin: 40px auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
}

.glFom {
    display: table;
    width: 100%;
    margin: 30px 0 0;
}

.glFom>div {
    display: table-row;
}

.glFom>div h5,
.glFom>div input {
    display: table-cell;
}

.glFom>div h5 {
    font-size: 15px;
    font-weight: normal;
    padding: 15px 0;
    width: 170px;
}

.glFom>div input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #eee;
    padding: 0 15px;
    height: 40px;
}

.glFom>div textarea {
    width: 100%;
    height: 200px;
    resize: vertical;
    box-sizing: border-box;
    border: 1px solid #eee;
    padding: 0 15px;
}

.glean button {
    border: none;
    background: #0092de;
    font-size: 15px;
    color: #fff;
    font-weight: 600;
    width: 160px;
    height: 50px;
    border-radius: 4px;
    margin: 40px auto 0;
    display: block;
}

@media screen and (max-width:1280px) {

    .pro,
    .glean {
        width: 90%;
    }

    .glFom>div h5 {
        font-size: 14px;
        padding: 15px 0;
        width: 150px;
    }

    .contact,
    .entry,
    .specifics {
        max-width: 90%;
    }

    .category {
        grid-template-columns: repeat(7, 1fr);
        gap: 10px;
    }

    .category a {
        min-width: auto;
        width: 100%;
    }

}

@media screen and (max-width:1024px) {

    .glean {
        grid-template-columns: repeat(1, 1fr);
        gap: 30px;
    }

    .resMg,
    .resTxt {
        width: 48%;
    }

    .resTxt {
        padding: 0;
    }

    .dispatc th,
    .dispatc td {
        padding: 5px 2px;
        border-bottom: 1px solid #e9e9e9;
    }

    .category {
        grid-template-columns: repeat(5, 1fr);
        gap: 10px;
    }

    .rice {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .header {
        background: #fff;
        position: sticky;
        top: 0;
        left: 0;
        z-index: 3;
        width: 100%;
    }

    .toDown,
    .toShop {
        width: 210px;
        height: 65px;
        margin: 0 0 20px;
    }

    .caryMg {
        width: 40px;
        height: 40px;
    }

    .toDown h5,
    .toShop h5 {
        font-size: 18px;
        font-weight: lighter;
        line-height: normal;
    }

    .toDown p,
    .toShop p {
        font-size: 12px;
        margin: 0;
    }

    .specNav li {
        padding: 10px;
        font-size: 18px;
    }

}

@media screen and (max-width:768px) {

    .event .w {
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
    }

    .proList {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .pro {
        margin: 20px auto 40px;
    }

    .glFom>div h5 {
        font-size: 12px;
        padding: 15px 0;
        width: 120px;
    }

    .editText div>p {
        font-size: 13px;
        width: 80px;
    }

    .intel {
        grid-template-columns: repeat(1, 1fr);
        padding: 0 10px 20px;
    }

    .intLeft h4 {
        font-size: 20px;
    }

    .intLeft p {
        padding: 1px 0;
        font-size: 14px;
    }

    .subscribe {
        margin: 20px 0;
        padding: 15px;
    }

    .gather button {
        border: none;
        background: #0092de;
        font-size: 14px;
        width: 140px;
        height: 40px;
    }

    .category a {
        font-size: 12px;
    }

    .category {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .result li {
        flex-wrap: wrap;
        gap: 10px;
    }

    .result li>* {
        width: 100%;
    }

    .resTxt h4 {
        font-weight: normal;
        font-size: 18px;
        color: #0092de;
        margin: 5px 0;
    }

    .rice {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .string {
        background: #fff;
        padding: 20px 0;
    }

    .rice h5 {
        font-size: 14px;
    }

    .carry form {
        width: 230px;
    }


    .disBox {
        overflow-x: auto;
        margin: 0 0 20px;
    }

    .dispatc {
        min-width: 700px;
    }

    .specBox {
        grid-template-columns: repeat(1, 1fr);
        margin: 20px 0 0;
    }

    .specBox>div:nth-child(1) {
        border: none;
    }

    .related {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        box-sizing: border-box;
        padding: 0;
    }

    .specont {
        width: 100%;
        box-sizing: border-box;
        padding: 10px;
        margin: 10px 0 0;
        background: #EEEEEE;
    }

    .specNav li {
        padding: 10px;
        font-size: 15px;
    }

    .specDate {
        margin: 0 0 50px;
    }

    .specInfo h3 {
        padding: 0 0 15px;
        font-size: 26px;
    }





}