@charset "UTF-8";

/* CSS Document */

@media screen and (min-width:1200px) {

    body {
        background: #1c1311 url(../image/lineBG2.jpg) center 4.6rem no-repeat;
        background-size: 100%;
    }

    header {
        top: 0;
        background: #2f201d;
        position: relative;
        z-index: 10;
        margin: 0px;
    }

    .menuItem {
        text-shadow: 0.02rem 0.02rem 0.05rem #000;
    }

    #proBanner {
        width: 100%;
        height: auto;
        overflow: hidden;
    }

    #pbLogoControl {
        position: absolute;
        width: 12rem;
        height: 3rem;
        left: 50%;
        top: 50%;
        margin: -1.5rem -6rem;
        z-index: 10;
    }

    .pblcBtn {
        float: left;
        width: 1.8rem;
        overflow: hidden;
        height: 0.8rem;
        background-position: center;
        background-size: 50%;
        background-repeat: no-repeat;
        top: 40%;
        opacity: 0.5;
        cursor: pointer;
        transition: all 0.5s ease 0s;
    }

    .pblcBtn>div {
        display: block;
        float: left;
        background: url(../image/proArrow.png) no-repeat;
        background-size: 0.48rem;
        width: 0.24rem;
        height: 100%;
        text-indent: 999rem;
    }

    #pblcPrev>div {
        background-position: 0 center;
    }

    #pblcNext>div {
        background-position: -0.24rem center;
    }

    #pblcNext>div {
        float: right;
    }

    .pblcBtn:hover {
        opacity: 1;
    }

    #pblcCurrent {
        width: 8.4rem;
        height: 100%;
        float: left;
        background-repeat: no-repeat;
        background-position: center center;
    }

    #proBanner>img {
        width: 100%;
        opacity: 0.4;
    }

    #proIntro {
        padding: 0.5rem 0;
        width: 12rem;
        margin: 0 auto;
        color: #edd2b2;
        line-height: 0.24rem;
        letter-spacing: 0.05rem;
        text-align: justify;
    }

    #proSubmenu {
        width: 100%;
        padding: 0.3rem 0;
        border-top: 0.01rem #4b403a solid;
        border-bottom: 0.01rem #4b403a solid;
        overflow: hidden;
    }

    #subMenuWrap {
        width: 4rem;
        height: 0.3rem;
        margin: 0 auto;
    }

    .smItem {
        float: left;
        width: 25%;
        height: 100%;
        line-height: 0.3rem;
        color: #edd2b2;
        left: 0.05rem;
        border-radius: 0.3rem;
        text-align: center;
    }

    #subMenuWrap .current {
        background-color: #edd2b2;
        color: #1c1311;
    }

    #proList {
        width: 100%;
        overflow: hidden;
        min-height: 9.1rem;
    }

    #proView {
        width: 100%;
        background: #f3e2cb;
        position: absolute;
        z-index: 10;
        transition: all 0.5s ease 0s;
        bottom: 0;
    }

    .proviewAct {
        height: 100%;
    }

    .proviewNormal {
        height: 0;
    }

    #pvClose {
        background: url(../image/proClose.png) center no-repeat;
        width: 0.41rem;
        height: 0.59rem;
        float: right;
        padding-top: 0.18rem;
    }

    #pvImgWrap {
        clear: both;
        margin-top: 0.08rem;
        width: 100%;
        height: 6.14rem;
    }

    .pviBtn {
        float: left;
        background: url(../image/arrow_dark.png) 0 center no-repeat;
        background-size: 0.44rem;
        cursor: pointer;
        width: 0.7rem;
        height: 100%;
        background-clip: content-box;
    }

    #pviPrev {
        padding-right: 0.48rem;
    }

    #pviNext {
        background-position: 0.25rem center;
        padding-left: 0.48rem;
    }

    #pviImg {
        width: 10.6rem;
        height: 100%;
        background-position: center center;
        float: left;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    #pviImg img {
        width: 100%;
    }

    #pvContent {
        clear: both;
        padding-top: 0.5rem;
        overflow: hidden;
        text-align: center;
    }

    #plWrap {
        width: 12rem;
        margin: 0 auto;
        padding-top: 0.8rem;
        /* overflow: hidden; */
        display: flex;
        flex-wrap: wrap;
    }

    #plWrap li {
        width: 2.85rem;
        overflow: hidden;
        margin: 0.05rem;
        position: static !important;
    }

    .plItem {
        border-radius: 0.05rem;
        overflow: hidden;
        cursor: pointer;
    }

    .plItem img {
        width: 100%;
        transition: all 0.5s ease 0s;
    }

    .plItem img:hover {
        width: 110%;
        margin-top: -5%;
        margin-left: -5%;
    }
}

@media screen and (min-width:541px) and (max-width:1199px) {

    body {
        background: #1c1311 url(../image/lineBG2.jpg) center 4.6rem no-repeat;
        background-size: 100%;
    }

    header {
        top: 0;
        background: #2f201d;
        position: relative;
        z-index: 10;
        margin: 0px;
    }

    .menuItem {
        text-shadow: 0.02rem 0.02rem 0.05rem #000;
    }

    #proBanner {
        width: 100%;
        height: 4rem;
        overflow: hidden;
    }

    #pbLogoControl {
        position: absolute;
        width: 7.5rem;
        height: 3rem;
        left: 50%;
        top: 50%;
        margin: -1.5rem -3.75rem;
        z-index: 8;
    }

    .pblcBtn {
        float: left;
        width: 1.8rem;
        overflow: hidden;
        height: 0.8rem;
        background-position: center;
        background-size: 50%;
        background-repeat: no-repeat;
        top: 40%;
        opacity: 0.5;
        cursor: pointer;
        transition: all 0.5s ease 0s;
    }

    .pblcBtn div {
        display: block;
        float: left;
        background: url(../image/proArrow.png) no-repeat;
        background-size: 0.48rem;
        width: 0.24rem;
        height: 100%;
        text-indent: 999rem;
    }

    #pblcPrev div {
        background-position: 0 center;
    }

    #pblcNext div {
        background-position: -0.24rem center;
    }

    #pblcNext div {
        float: right;
    }

    .pblcBtn:hover {
        opacity: 1;
    }

    #pblcCurrent {
        width: 3.9rem;
        height: 100%;
        float: left;
        background-repeat: no-repeat;
        background-position: center center;
    }

    #proBanner>img {
        width: 19.2;
        height: 4rem;
        position: absolute;
        left: 50%;
        top: 0;
        margin: 0 -9.6rem;
        opacity: 0.4;
    }

    #proIntro {
        padding: 0.5rem 0;
        width: 7.5rem;
        margin: 0 auto;
        color: #edd2b2;
        line-height: 0.24rem;
        letter-spacing: 0.05rem;
        text-align: justify;
    }

    #proSubmenu {
        width: 100%;
        padding: 0.3rem 0;
        border-top: 0.01rem #4b403a solid;
        border-bottom: 0.01rem #4b403a solid;
        overflow: hidden;
    }

    #subMenuWrap {
        width: 4rem;
        height: 0.3rem;
        margin: 0 auto;
    }

    .smItem {
        float: left;
        width: 25%;
        height: 100%;
        line-height: 0.3rem;
        color: #edd2b2;
        left: 0.05rem;
        border-radius: 0.3rem;
        text-align: center;
    }

    #subMenuWrap .current {
        background-color: #edd2b2;
        color: #1c1311;
    }

    #proList {
        width: 100%;
        overflow: hidden;
        min-height: 9.1rem;
    }

    #proView {
        width: 100%;
        background: #f3e2cb;
        position: absolute;
        z-index: 10;
        transition: all 0.5s ease 0s;
        bottom: 0;
    }

    .proviewAct {
        height: 100%;
    }

    .proviewNormal {
        height: 0;
    }

    #pvClose {
        background: url(../image/proClose.png) center no-repeat;
        width: 0.41rem;
        height: 0.59rem;
        float: right;
        padding-top: 0.18rem;
    }

    #pvImgWrap {
        clear: both;
        margin: 0 auto;
        margin-top: 0.08rem;
        width: 7.5rem;
        height: 6.14rem;
    }

    .pviBtn {
        float: left;
        background: url(../image/arrow_dark.png) 0 center no-repeat;
        background-size: 0.44rem;
        cursor: pointer;
        width: 0.7rem;
        height: 100%;
        background-clip: content-box;
    }

    #pviPrev {
        padding-right: 0.48rem;
    }

    #pviNext {
        background-position: 0.25rem center;
        padding-left: 0.48rem;
    }

    #pviImg {
        width: 6rem;
        height: 100%;
        background-position: center center;
        float: left;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    #pviImg img {
        width: 100%;
    }

    #pvContent {
        clear: both;
        padding-top: 0.5rem;
        overflow: hidden;
        text-align: center;
    }

    #plWrap {
        width: 7.5rem;
        margin: 0 auto;
        padding-top: 0.8rem;
        overflow: hidden;
    }

    #plWrap li {
        width: 2.85rem;
        overflow: hidden;
        margin: 0.05rem;
    }

    .plItem {
        border-radius: 0.05rem;
        overflow: hidden;
        cursor: pointer;
    }

    .plItem img {
        width: 100%;
        transition: all 0.5s ease 0s;
    }

    .plItem img:hover {
        width: 110%;
        margin-top: -5%;
        margin-left: -5%;
    }
}

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

    body {
        background: #1c1311 url(../image/lineBG2.jpg) center 4.6rem no-repeat;
        background-size: 100%;
    }


    header {
        top: 0;
        background: #2f201d;
        z-index: 10;
        margin: 0px;
        height: 1.23rem;
    }

    #pageLogo {
        float: left;
        background: url(../image/logoHead.png) left center no-repeat;
        background-size: 2.65rem;
        width: 2.65rem;
        height: 0.6rem;
        margin-top: 0.33rem;
    }

    #menuICO {
        margin-top: 0.43rem;
    }

    #proBanner {
        width: 100%;
        height: 4rem;
        overflow: hidden;
    }

    #pbLogoControl {
        position: absolute;
        width: 5.1rem;
        height: 3rem;
        left: 50%;
        top: 50%;
        margin: -1.5rem -2.55rem;
        z-index: 8;
    }

    .pblcBtn {
        float: left;
        width: 0.48rem;
        overflow: hidden;
        height: 0.8rem;
        background-position: center;
        background-size: 0%;
        background-repeat: no-repeat;
        top: 40%;
        opacity: 0.5;
        cursor: pointer;
        transition: all 0.5s ease 0s;
    }

    .pblcBtn div {
        display: block;
        float: left;
        background: url(../image/proArrow.png) no-repeat;
        background-size: 0.48rem;
        width: 0.24rem;
        height: 100%;
        text-indent: 999rem;
    }

    #pblcPrev div {
        background-position: 0 center;
    }

    #pblcNext div {
        background-position: -0.24rem center;
    }

    #pblcNext div {
        float: right;
    }

    .pblcBtn:hover {
        opacity: 1;
    }

    #pblcCurrent {
        width: 4.14rem;
        height: 100%;
        float: left;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 80%;
    }

    #proBanner>img {
        width: 19.2;
        height: 4rem;
        position: absolute;
        left: 50%;
        top: 0;
        margin: 0 -9.6rem;
        opacity: 0.4;
    }

    #proIntro {
        padding: 0.5rem 0;
        width: 5.1rem;
        margin: 0 auto;
        color: #edd2b2;
        line-height: 0.24rem;
        letter-spacing: 0.05rem;
        text-align: justify;
    }

    #proSubmenu {
        width: 100%;
        padding: 0.3rem 0;
        border-top: 0.01rem #4b403a solid;
        border-bottom: 0.01rem #4b403a solid;
        overflow: hidden;
    }

    #subMenuWrap {
        width: 4rem;
        height: 0.3rem;
        margin: 0 auto;
    }

    .smItem {
        float: left;
        width: 25%;
        height: 100%;
        line-height: 0.3rem;
        color: #edd2b2;
        left: 0.05rem;
        border-radius: 0.3rem;
        text-align: center;
    }

    #subMenuWrap .current {
        background-color: #edd2b2;
        color: #1c1311;
    }

    #proList {
        width: 100%;
        overflow: hidden;
        min-height: 9.1rem;
    }

    #proView {
        width: 100%;
        background: #f3e2cb;
        position: fixed;
        z-index: 10;
        transition: all 0.5s ease 0s;
        bottom: 0;
    }

    .proviewAct {
        height: 100%;
    }

    .proviewNormal {
        height: 0;
    }

    #pvClose {
        background: url(../image/proClose.png) center no-repeat;
        width: 0.41rem;
        height: 0.59rem;
        float: right;
        padding-top: 0.18rem;
        bottom: 0;
        background-size: 100%;
    }

    #pvImgWrap {
        clear: both;
        margin: 0 auto;
        margin-top: 0.08rem;
        width: 5.1rem;
        height: 6.14rem;
    }

    .pviBtn {
        float: left;
        background: url(../image/arrow_dark.png) 0 center no-repeat;
        background-size: 0.44rem;
        cursor: pointer;
        width: 0.7rem;
        height: 100%;
        background-clip: content-box;
    }

    #pviPrev {
        padding-right: 0.48rem;
    }

    #pviNext {
        background-position: 0.25rem center;
        padding-left: 0.48rem;
    }

    #pviImg {
        width: 3.7rem;
        height: 100%;
        background-position: center center;
        float: left;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    #pviImg img {
        width: 100%;
    }

    #pvContent {
        clear: both;
        padding-top: 0.2rem;
        overflow: hidden;
        text-align: center;
        line-height: 0.2rem;
    }

    #plWrap {
        width: 7.5rem;
        margin: 0 auto;
        padding-top: 0.8rem;
        overflow: hidden;
    }

    #plWrap li {
        width: 5rem;
        overflow: hidden;
        margin: 0.05rem;
    }

    .plItem {
        border-radius: 0.05rem;
        overflow: hidden;
        cursor: pointer;
    }

    .plItem img {
        width: 100%;
        transition: all 0.5s ease 0s;
    }

    .plItem img:hover {
        width: 110%;
        margin-top: -5%;
        margin-left: -5%;
    }
}