* {
    margin: 0px;
    padding: 0px;
}

html,
body {
    width: 100%;
    /*height: 100%;*/
    background-color: #fff;
}

.toplogo {
    width: 100%;
    height: 90px;
    background-color: #eee;
    background: url(../img/toppic.png)center center no-repeat;
    background-size: 100% 100%;
}

.homelogo {
    /* margin-left: 5%;
    margin-top: -70px;
    position: absolute; */
    margin-top: 20px;
}

.mytopbg {
    width: 100%;
    /* height: 700px; */
}

    .mytopbg img {
        width: 100%;
        height: 100%;
    }

.graybg {
    width: 100%;
    background: url(../img/middlebg2.png)center center no-repeat;
    background-size: 100% 100%;
    padding-top: 50px;
    padding-bottom: 30px;
}

.whitebg {
    width: 100%;
    /*background: url(../img/middlebg.png)center center no-repeat; */
    background-size: 100% 100%;
    padding-top: 50px;
    padding-bottom: 30px;
}

.endgraybg {
    width: 100%;
    background: url(../img/middlebg3.jpg)center center no-repeat;
    background-size: 100% 100%;
    padding-top: 50px;
    padding-bottom: 30px;
    height: 588px;
}

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

.titletxt {
    font-size: 28px;
    text-align: center;
}

.titlebox {
    width: 100%;
    margin-bottom: 30px;
    text-align: center;
}

.mapbox {
    width: 100%;
    height: 500px;
}

    .mapbox img {
        width: 100%;
        height: 100%;
    }


.leftPart {
    margin: 0 auto;
    z-index: 99;
    margin-top: -528px;
    margin-left: -157px;
    position: absolute;
}

    .leftPart::-webkit-scrollbar {
        width: 3px !important;
        height: 6px !important;
    }

    .leftPart::-webkit-scrollbar-thumb {
        border-radius: 1px;
        background-color: rgb(4, 4, 119) !important;
    }

    .leftPart::-webkit-scrollbar-track {
        box-shadow: inset 0 0 1px transparent;
        background: rgb(230, 230, 230);
        border-radius: 1px;
    }


    .leftPart .li {
        height: 50px;
    }

        .leftPart .li .pic {
            display: none;
            float: left;
            width: 450px;
            height: 350px;
            background-color: #eee;
            white-space: break-spaces;
            border-radius: 8px;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            background-color: #f0d8b1;
        }

.picUl {
    width: 96%;
    height: 90%;
    margin-top: 4%;
    border: 3px solid #a38d66;
    border-radius: 8px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background-color: #fff7ea;
}

    .picUl li {
        display: inline-block;
        width: 48%;
        height: 50%;
        text-align: center;
    }

        .picUl li img {
            width: 80%;
            margin: 0 auto;
            height: 75px;
            border-radius: 5px;
            margin-top: 30px;
        }

        .picUl li p {
            height: 50px;
            line-height: 50px;
        }

.leftPart .li.show .pic {
    display: block;
}

.menuname {
    width: 177px;
    height: 49px;
    /*    background-color: #0f6ed2;*/
    /* background: url(../img/placeblue.png)center center no-repeat;
    background-size: 100% 100%; */
    background: url('../img/areabg.png')center center no-repeat;
    color: #fff;
    float: left;
    background-size: 95%;
    cursor: pointer;
}

    .menuname:hover {
        background: url('../img/areabg_.png')center center no-repeat;
    }

.leftPart .li.show .menuname {
    background-color: #f19724;
    /* background: url(../img/placeyellow.png)center center no-repeat;
    background-size: 100% 100%; */
    color: #fff;
}

.leftPart .li .menuname .wrap {
    text-align: center;
    margin: 0 auto;
    line-height: 43px;
    font-size: 20px;
    /*word-wrap: break-word;
    writing-mode: vertical-lr;*/
    letter-spacing: 16px;
    /*background: url(../img/blueend.png) bottom center no-repeat;*/
    padding-bottom: 40px;
}

.leftPart .li.show .menuname .wrap {
    background: url(../img/yellowend.png) bottom center no-repeat !important;
    padding-bottom: 40px;
}

.leftPart .li .menuname .wrap span {
    /*padding: 2px;
    background: linear-gradient(to bottom, rgba(81, 124, 241, 0.3), rgba(19, 93, 161, 0.3));
    cursor:pointer;*/
    margin-left: -16px;
    font-family: 'KaiTi';
}

.leftPart .li.show .menuname .wrap span {
    background: linear-gradient(to bottom, rgba(241, 225, 81, 0.3), rgba(187, 176, 28, 0.3));
}

.viewtxtUl {
    margin-top: 40px;
    width: 100%;
}

    .viewtxtUl li {
        display: inline-block;
        width: 32.3%;
        margin-right: 1%;
        margin-bottom: 1%;
        float: left;
    }

        .viewtxtUl li:nth-child(3),
        .viewtxtUl li:nth-child(6),
        .viewtxtUl li:nth-child(9) {
            margin-right: 0;
        }

        .viewtxtUl li div:nth-child(1) {
            width: 388px;
            height: 250px;
        }

            .viewtxtUl li div:nth-child(1) img {
                width: 100%;
                height: 100%;
            }
/* 
.viewtxtUl li div:nth-child(2) {
    width: 100%;
    height: 45px;
    line-height: 45px;
    font-size: 18px;
    text-align: center;
    color: #fff;
    background-color: #0c0b0a;
} */

.endbox {
    height: 70px;
    line-height: 70px;
    color: #fff;
    background-color: #323232;
    text-align: center;
}

    .endbox span {
        margin-right: 20px;
    }

#mytopbg .swiper-pagination-bullet {
    width: 43px;
    height: 4px;
    border-radius: 0;
    background: #eee;
}

.viewtxt {
    width: 388px;
    /* height: 100%; */
    text-align: center;
    /*line-height: 250px;*/
    background: url(../img/fixbg.png)center center no-repeat;
    background-size: 100% 100%;
    height: 250px;
    position: absolute;
    margin-top: -250px;
    z-index: 99;
    /*display: none;*/
    color: #fff;
    font-size: 18px;
}

/*.viewtxtUl li:hover .viewtxt{
display: block;
}*/

.jdname {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 9px 0px;
    background-color: rgba(0,0,0,0.5);
    font-family: 'KaiTi';
}

#play1, #play2, #play3, #play4, #play5, #play6 {
    cursor: pointer;
}
#play7, #play8, #play9, #play10, #play11, #play12 {
    cursor: pointer;
}