.banner { position: relative; margin-top: 60px; overflow: hidden; }
    .banner .weixnqr { position: absolute; top: -5px; left: calc(50% + 24%); text-align: center; width: 120px; z-index: 11; }
        .banner .weixnqr img { width: 120px; top: 0; }
    .banner .bannerTip { position: absolute; top: 10%; left: calc(50% - 15%); text-align: center; width: 30%; z-index: 10; }
        .banner .bannerTip .bannerLogo { width: 120px; margin: 0 auto; }
        .banner .bannerTip .tipBlock { width: 100%; height: 40px; }
    .banner .tipCenter { font-family: FZQKBYSJW--GB1-0; font-size: 24px; color: #FFFFFF; letter-spacing: 0; text-shadow: 0 1px 0 rgba(0,0,0,0.20); margin: 30px 0; }
        .banner .tipCenter img { width: 222px; }


.clickTabs { display: inline-block; }
    .clickTabs .click { width: 11px; height: 11px; display: inline-block; background: #fff; }
    .clickTabs .clickTxt { display: inline-block; line-height: 37px; font-size: 18px; color: #fff; }
.tipDown { margin-top: 50px; background: #FFFFFF; border-radius: 100px; width: 139px; height: 42px; line-height: 42px; color: #666; display: inline-block; cursor: pointer; position: relative }
.artwareList { width: 100%; position: relative; top: 8%; }
    .artwareList .hd a { display: block; width: 60px; height: 60px; position: absolute; top: 50%; margin-top: -30px; cursor: pointer; z-index: 9; }
        .artwareList .hd a.prev { background: url("/images/left.png") no-repeat; background-size: 100% auto; left: 50px; width: 40px; height: 40px }
        .artwareList .hd a.next { background: url("/images/right.png") no-repeat; background-size: 100% auto; right: 50px; width: 40px; height: 40px }
    .artwareList .bd { width: 80%; margin: 0 auto; }
        .artwareList .bd li { width: 23%; float: left; margin: 1%; }
            .artwareList .bd li img { width: 100%; border-radius: 10px }
.artwareList { width: 100%; position: relative; top: 8%; }
    .artwareList .hd a { display: block; width: 60px; height: 60px; position: absolute; top: 50%; margin-top: -30px; cursor: pointer; z-index: 9; }
        .artwareList .hd a.prev { background: url("/images/left.png") no-repeat; background-size: 100% auto; left: 50px; width: 40px; height: 40px }
        .artwareList .hd a.next { background: url("/images/right.png") no-repeat; background-size: 100% auto; right: 50px; width: 40px; height: 40px }
    .artwareList .bd { width: 80%; margin: 0 auto; }
        .artwareList .bd li { width: 23%; float: left; margin: 1%; }
            .artwareList .bd li img { width: 100%; }
.artwareList1 { width: 100%; position: relative; top: 8%; }
    .artwareList1 .hd a { display: block; width: 60px; height: 60px; position: absolute; top: 50%; margin-top: -30px; cursor: pointer; z-index: 9; }
        .artwareList1 .hd a.prev { background: url("/images/left.png") no-repeat; background-size: 100% auto; left: 50px; width: 40px; height: 40px }
        .artwareList1 .hd a.next { background: url("/images/right.png") no-repeat; background-size: 100% auto; right: 50px; width: 40px; height: 40px }
    .artwareList1 .bd { width: 80%; margin: 0 auto; }
        .artwareList1 .bd li { width: 23%; float: left; margin: 1%; position: relative; border-radius: 10px; overflow: hidden; }
            .artwareList1 .bd li:hover img { transform: scale(1.1); }
            .artwareList1 .bd li:hover { box-shadow: 0 4px 29px 0 rgba(0,0,0,0.07); }
                .artwareList1 .bd li:hover .mark { bottom: 0px; }
            .artwareList1 .bd li .mark { height: 123px; background: #fff; position: absolute; bottom: -123px; left: 0px; width: 100%; webkit-transition: bottom .3s linear; transition: bottom .3s linear; }
                .artwareList1 .bd li .mark .markName { font-size: 16px; color: #333333; margin: 30px 0px 15px 20px; line-height: 29px; }
                .artwareList1 .bd li .mark .markIntroduce { font-size: 14px; color: #888888; line-height: 19px; padding: 0 17px 0 20px }
            .artwareList1 .bd li img { width: 100%; border-radius: 10px; cursor: pointer; transition: all 0.6s; display: block; }

.introduce { margin-left: 20%; height: 520px }
.content { height: 520px; width: 21%; float: left; }
    .content .contentLeft { height: 520px; writing-mode: vertical-lr; writing-mode: tb-lr; float: left; padding-top: 10px; width: 25px; line-height: 26px; font-size: 16px; letter-spacing: 6px; color: #333333; border-top: 3px solid #C63535; font-family: MicrosoftYaHei; }

    .content .contentCenter { background: #D8D8D8; height: 520px; float: left; margin: 0 25px; width: 1px; }
    .content .contentRight { float: left; width: 100px; }
        .content .contentRight .txt { margin: 0 auto; height: 520px; writing-mode: vertical-lr; writing-mode: tb-lr; display: inline-block; font-size: 13px; color: #666; letter-spacing: 5px; font-family: MicrosoftYaHeiLight; font-weight: 300 }
            .content .contentRight .txt span { width: 15px; margin: 0 auto; line-height: 24px; color: #333; font-size: 13px; word-wrap: break-word; writing-mode: horizontal-tb; margin-top: -7px; }
.slideTip { text-align: center; margin-top: 80px; }
    .slideTip .h1 { font-size: 18px; color: #333333; font-family: MicrosoftYaHei; }
    .slideTip .border { width: 60px; height: 3px; background: #C63535; display: inline-block; box-shadow: 0 0 black; margin: 30px 0; }
    .slideTip .tipBottom { display: inline-block; width: 100%; font-size: 14px; color: #666666; margin-bottom: 50px; font-family: MicrosoftYaHei; }
.download { position: relative; top: 17px; left: 32%; width: 109px; height: 109px; background: #fff; display: none; padding: 15px; border-radius: 20px; }
.downloadHide { display: none; }
.download .side { font-size: 22px; position: absolute; top: -15px; left: 45%; color: #fff; }
.download .close-btn { position: absolute; right: 5px; top: 5px; cursor: pointer; }
    .download .close-btn img { width: 10px; height: 10px }