﻿body {
    background: #F4F9FF;
}

@media screen and (min-width:1200px) {
    .banner img {
        display: block;
        width: 100%;
        object-fit: none;
    }
}

@media screen and (max-width:1200px) and (min-width:768px) {
    .banner {
        width: 100%;
        height: 4rem;
    }

    .banner img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

@media screen and (max-width:768px) {
    .banner {
        width: 100%;
        height: 4rem;
    }

    .banner img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

@media screen and (min-width:1200px) {
    .box1 {
        width: 100%;
        max-width: 1920px;
        margin: 82px auto 0;
    }

    .box1 .tab {
        width: 1200px;
        height: 92px;
        margin: 0 auto;
        border-radius: 5px;
    }

    .box1 .tab a {
        float: left;
        width: 16.6%;
        padding: 20px 0;
        height: 52px;
        line-height: 52px;
        text-align: center;
        vertical-align: middle;
        background: #8b9baf;
        display: -webkit-flex;
        justify-content: center;
        align-items: center;
    }

    .box1 .tab a.on {
        background: #0A58B4;
    }

    .box1 .tab a:first-child {
        border-radius: 5px 0 0 5px;
    }

    .box1 .tab a:last-child {
        border-radius: 0 5px 5px 0;
    }

    .box1 .tab a .iconfont {
        width: 46px;
        color: #fff;
        font-size: 28px;
    }

    .box1 .tab a .wz {
        line-height: 52px;
        font-size: 20px;
        color: #fff;
    }
}

@media screen and (max-width:1200px) and (min-width:768px) {
    .box1 {
        padding: .3rem .3rem 0;
    }

    .box1 .tab {
        height: .8rem;
        border-radius: .04rem;
        display: flex;
        background: #8b9baf;
    }

    .box1 .tab a {
        width: 20%;
        height: .8rem;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        background: #8b9baf;
    }

    .box1 .tab a.on {
        background: #0A58B4;
    }

    .box1 .tab a:first-child {
        border-radius: .04rem 0 0 .04rem;
    }

    .box1 .tab a:last-child {
        border-radius: 0 .04rem .04rem 0;
    }

    .box1 .tab a .iconfont {
        width: .4rem;
        color: #fff;
        font-size: .28rem;
    }

    .box1 .tab a .wz {
        font-size: .28rem;
        color: #fff;
    }
}

@media screen and (max-width:768px) {
    .box1 {
        margin: .3rem .3rem 0;
        overflow-x: scroll;
        white-space: nowrap;
    }

    .box1::-webkit-scrollbar {
        display: none;
    }

    .box1 .tab {
        width: 14rem;
        height: .8rem;
        display: flex;
        justify-content: space-between;
    }

    .box1 .tab a {
        width: 2.6rem;
        height: .8rem;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        background: #8b9baf;
        border-radius: .04rem;
    }

    .box1 .tab a.on {
        background: #0A58B4;
    }

    .box1 .tab a .iconfont {
        width: .5rem;
        color: #fff;
        font-size: .36rem;
    }

    .box1 .tab a .wz {
        font-size: .3rem;
        color: #fff;
    }
}

@media screen and (min-width:1200px) {
    .box2 {
        padding: 40px 50px 80px;
        width: 1100px;
        margin: 52px auto 80px;
        background: rgba(255,255,255,0.6);
        border-radius: 0 0 5px 5px;
    }

    .box2 .h1 {
        line-height: 32px;
        font-size: 22px;
        font-weight: bold;
        color: #333;
        margin-bottom: 30px;
    }

    .box2 .cInfo {
        display: flex;
        flex-flow:row wrap;
        justify-content: space-between;
        background: #19268f;
        padding-bottom: 30px;
    }

    .box2 .cInfo .fl {
        padding: 20px 25px 15px;
        margin-bottom: 10px;
        border-bottom: 1px dashed #fff;
        width: 85%;
        margin: 0 auto;
        flex:0 0 auto;
    }   
    .box2 .cInfo .fl:last-child{
        border: none;
    } 
    .box2 .cInfo .fl .info{
        display: flex;
        flex-flow:row nowrap;
        align-items:center;
    }

    .box2 .cInfo .fl .name {
        font-size: 26px;
        text-align: left;
        color: #fff;
    }

    .box2 .cInfo .fr {
        float: right;
        padding: 20px 15px 0;
        width: 500px;
        height: 120px;
        background: #fff;
        border-radius: 5px;
        box-shadow: 0 3px 10px #E9E9E9;
    }

    .box2 .cInfo .iconfont {
        line-height: 52px;
        font-size: 26px;
        margin-right: 25px;
        color: #fff;
        text-align: center;
        margin-bottom: 8px;
    }

    .box2 .cInfo .wz {
        line-height: 22px;
        font-size: 16px;
        color: #fff;
        text-align: center;
    }

    .box2 .eInfo {
        margin-top: 30px;
        margin-bottom: 30px;
        padding: 40px 38px;
        background: #fff;
        border-radius: 5px;
        box-shadow: 0 3px 10px #E9E9E9;
    }

    .box2 .eInfo p {
        line-height: 24px;
        font-size: 16px;
        color: #1F1F1F;
        margin-bottom: 10px;
    }

    .box2 .map {
        margin-top: 40px;
    }

    .box2 .map * {
        max-width: 100%;
    }
}

@media screen and (max-width:1200px) {
    .box2 {
        margin: .4rem 0;
        padding: .3rem;
        background: rgba(255,255,255,0.6);
    }

    .box2 .h1 {
        line-height: .5rem;
        font-size: .34rem;
        font-weight: bold;
        color: #333;
        margin-bottom: .25rem;
    }
    .box2 .cInfo {
        display: flex;
        flex-flow:row wrap;
        justify-content: space-around;
        padding: .3rem;
        background: #19268f;
        padding-bottom: 30px;
    }    

    .box2 .cInfo .fl {
        padding: .2rem;
        width: 100%;
        flex:0 0 auto;
        border-bottom: 1px dashed #fff;
        margin-bottom: .25rem;
    }
    .box2 .cInfo .fl:last-child{
        border: none;
    }
    .box2 .cInfo .fr {
        padding: .2rem;
        background: #fff;
        border-radius: .05rem;
        box-shadow: 0 .04rem .1rem #e9e9e9;
        margin-bottom: .25rem;
    }
    .box2 .cInfo .fl .info{
        display: flex;
        flex-flow:row nowrap;
    }
    .box2 .cInfo .iconfont {
        line-height: .5rem;
        font-size: .3rem;
        color: #fff;
        text-align: center;
        margin-right: 10px;
    }

    .box2 .cInfo .wz {
        line-height: .5rem;
        font-size: .26rem;
        color: #fff;
        text-align: left;
    }
    .box2 .cInfo .name {
        line-height: .5rem;
        font-size: .26rem;
        color: #fff;
        font-weight: 600;
    }

    .box2 .eInfo {
        padding: .2rem;
        background: #fff;
        border-radius: .05rem;
    }

    .box2 .eInfo p {
        line-height: .44rem;
        font-size: .26rem;
        color: #fff;
    }

    .box2 .eInfo p:nth-child(1) {
        margin-bottom: .1rem;
    }

    .box2 .map {
        width: 100%;
        max-width: 100%;
    }
}