.wrapper {
    background: #0c0c0c
}

.first-page {
    height: 1000px;
    background: url(../images/bg1-1.jpg) 50% 50% no-repeat;
    width: 100%
}

.first-page .icon {
    position: absolute;
    top: 8px;
    left: 47px;
    width: 88px;
    height: 88px
}

.first-page .icon img {
    width: 100%
}

.first-page .top-pic {
    position: absolute;
    top: 125px;
    left: 20px
}

.first-page .logo {
    position: absolute;
    width: 324px;
    height: 139px;
    right: -162px
}

.first-page .logo a {
    display: block
}

.first-page .logo a img {
    width: 100%
}

.first-page .qrcode {
    position: absolute;
    width: 136px;
    height: 111px;
    left: 525px;
    top: 580px
}

.first-page .qrcode img {
    width: 100%
}

.first-page .qrcode .img-l {
    width: 23px;
    height: 111px;
    float: left
}

.first-page .qrcode .img-r {
    width: 113px;
    height: 111px;
    float: left
}

.first-page .order {
    position: absolute;
    width: 792px;
    height: 160px;
    top: 705px;
    left: 208px;
    font-size: 18px
}

.first-page .order>img {
    width: 100%
}

.first-page .order .mobile {
    position: absolute;
    left: 88px;
    top: 28px
}

.first-page .order .mobile>input {
    height: 56px;
    width: 180px;
    border: 0;
    background: none;
    color: #91836e;
    outline: none
}

.first-page .order .order-result {
    position: absolute;
    width: 220px;
    height: 56px;
    top: 28px;
    right: 60px;
    color: #fff;
    line-height: 56px;
    text-align: center
}

.first-page .order .error {
    position: absolute;
    font-size: 14px;
    left: 90px;
    top: 108px;
    color: #c71111
}

.second-page {
    height: 681px;
    background: url(../images/bg-2.jpg) 50% 50% no-repeat;
    width: 100%
}

.second-page .tit-bar {
    width: 431px;
    height: 59px;
    position: absolute;
    left: 385px;
    top: 56px;
    background: url(../images/tit-demon.png) left top no-repeat;
    top: 36px
}

.third-page {
    height: 691px;
    background: url(../images/bg-3.jpg) 50% 50% no-repeat;
    width: 100%
}

.third-page .tit-bar {
    width: 431px;
    height: 59px;
    position: absolute;
    left: 385px;
    top: 56px;
    background: url(../images/tit-thing.png) left top no-repeat
}

.third-page .thing-text {
    background: url(../images/text-things.png) left top no-repeat;
    width: 254px;
    height: 451px;
    left: 98px;
    top: 176px;
    position: absolute
}

.third-page .video-box {
    width: 758px;
    height: 475px;
    position: absolute;
    left: 365px;
    top: 125px
}

.third-page .video-box .play {
    width: 88px;
    height: 88px;
    background: url(../images/video-btn.png) left top no-repeat;
    position: absolute;
    margin-left: -44px;
    margin-top: -44px;
    left: 50%;
    top: 50%;
    z-index: 4;
    opacity: .8
}

.third-page .video-box .play:hover {
    opacity: 1
}

.third-page .video-box .play:active {
    transform: scale(1.2)
}

.third-page .video-box .bg {
    background: url(../images/video-v-1.png) 50% 50% no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 3
}

.third-page .video-box .view {
    width: 700px;
    height: 380px;
    background: #000 url(../images/video-v.jpg) center center no-repeat;
    position: absolute;
    left: 35px;
    top: 60px
}

.forth-page {
    height: 716px;
    background: url(../images/bg-4.jpg) 50% 50% no-repeat;
    width: 100%
}

.forth-page .tit-bar {
    width: 431px;
    height: 59px;
    position: absolute;
    left: 385px;
    top: 56px;
    background: url(../images/tit-tese.png) left top no-repeat
}

.forth-page .tese-l {
    position: absolute;
    background: url(../images/tese-yun-1.png) left top no-repeat;
    width: 242px;
    height: 309px;
    left: -105px;
    top: 250px
}

.forth-page .tese-r {
    position: absolute;
    background: url(../images/tese-yun-2.png) left top no-repeat;
    top: 123px;
    right: -111px;
    width: 273px;
    height: 381px
}

.forth-page .tese-box {
    position: absolute;
    left: 120px;
    top: 100px
}

.forth-page .tese-box .pic-frame {
    background: url(../images/tese-bg.png) left top no-repeat;
    width: 981px;
    height: 549px;
    position: absolute;
    z-index: 2
}

.forth-page .tese-box .tese-carousel {
    width: 880px;
    height: 505px;
    position: absolute;
    left: 50px;
    top: 42px
}

.forth-page .tese-box .tese-carousel img {
    width: 100%
}

.forth-page .tese-box .pagination {
    position: absolute;
    z-index: 20;
    left: 405px;
    top: 65px;
    width: 204px;
    text-align: center
}

.fifth-page {
    height: 440px;
    background: url(../images/bg-5.jpg) 50% 50% repeat-x;
    width: 100%
}

.fifth-page .news-carousel {
    width: 460px;
    height: 240px;
    position: absolute;
    left: 100px;
    top: 96px
}

.fifth-page .news-carousel img {
    width: 100%
}

.fifth-page .pagination2 {
    position: absolute;
    z-index: 20;
    left: 0;
    bottom: 15px;
    width: 100%;
    text-align: center
}

.fifth-page .swiper-pagination-switch {
    border: 1px solid #b18f69
}

.fifth-page .swiper-active-switch {
    background: #c8a176
}

.fifth-page .text-box {
    position: absolute;
    top: 96px;
    right: 88px;
    width: 520px;
    height: 240px;
    overflow: hidden
}

.swiper-pagination-switch {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: transparent;
    margin: 0 7px;
    opacity: 1;
    border: 1px solid #44331f;
    cursor: pointer;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg)
}

.swiper-active-switch {
    background: #623623
}

.text-box {
    width: 450px;
    height: 240px;
    padding: 0;
    color: #bebebe
}

.text-box a {
    text-decoration: none
}

.text-box>.selector {
    position: relative;
    border-bottom: 1px solid #4c4159
}

.text-box>.selector>span {
    padding: 0px 26px 6px 14px;
    display: inline-block;
    position: relative
}

.text-box>.selector>span.active>a {
    color: #c8a176
}

.text-box>.selector>span.active:after {
    content: "/";
    position: absolute;
    top: 0;
    right: 10px;
    z-index: 1;
    width: 10px;
    color: #c8a176
}

.text-box>.selector>span.more {
    position: absolute;
    right: 0;
    padding: 0;
    top: 0;
    display: none
}

.text-box>.selector>span.more>a {
    font-size: 12px;
    color: #bebebe
}

.text-box>.selector>span.more>a:hover {
    color: #c8a176
}

.text-box>.selector>span>a {
    color: #bebebe;
    font-size: 18px
}

.text-box>.selector>span>a:hover {
    color: #c8a176
}

.text-box>.content {
    padding: 0;
    display: none;
    margin-top: 15px
}

.text-box>.content a {
    color: #C9CDCD;
    font-size: 14px
}

.text-box>.content .time {
    float: right;
    font-size: 14px
}

.text-box>.content>.item {
    height: 33px;
    line-height: 33px;
    border-bottom: 1px solid #4c4159;
    padding-left: 20px;
    position: relative
}

.text-box>.content>.item:hover,
.text-box>.content>.item.new {
    color: #c8a176
}

.text-box>.content>.item:hover a,
.text-box>.content>.item.new a {
    color: #c8a176
}

.text-box>.content>.item:hover:before,
.text-box>.content>.item.new:before {
    border-left-color: #c8a176
}

.text-box>.content>.item.new>span,
.text-box>.content>.item.hot>span {
    position: relative
}

.text-box>.content>.item.new>span:after,
.text-box>.content>.item.hot>span:after {
    content: "NEW";
    width: 54px;
    height: 16px;
    border-radius: 10px;
    background-color: #c8a176;
    position: absolute;
    right: -58px;
    top: 7px;
    font-size: 12px;
    color: #000;
    text-align: center;
    line-height: 16px;
    font-weight: 700
}

.text-box>.content>.item.hot>span:after {
    content: "HOT";
    color: #fff;
    background: #c71111
}

.text-box>.content>.item:before {
    content: "";
    position: absolute;
    top: 10px;
    left: 0;
    z-index: 1;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-left-color: #bebebe
}

.text-box>.content>.item>span {
    display: inline-block
}

.text-box>.content>.item>.item-title {
    display: inline-block
}

.text-box>.content>.item>.item-title>a {
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block
}

.qr-bar {
    width: 188px;
    height: 504px;
    position: fixed;
    right: 0;
    top: 50%;
    margin-top: -252px;
    z-index: 10
}

.qr-bar .top,
.qr-bar .bottom {
    width: 100%;
    background: url(../images/qr-bar.png) 50% 50% no-repeat;
    height: 25px
}

.qr-bar .qr-cont {
    padding-left: 14px
}

.qr-bar .qr-cont .left-bar {
    position: absolute;
    left: 0;
    top: 45px;
    width: 14px;
    height: 107px;
    background: url(../images/qr-sidebar.png) left top no-repeat
}

.qr-bar .qr-cont .left-bar-back {
    position: absolute;
    left: -14px;
    top: 45px;
    width: 14px;
    height: 107px;
    background: url(../images/qr-bar-l.png) left top no-repeat;
    display: none
}

.qr-bar .qr-cont .contact {
    padding: 12px 0;
    border-top: 1px solid #f4ede5
}

.qr-bar .qr-cont .inner-box {
    background: #edd4b8;
    color: #56462e;
    font-size: 12px;
    padding: 0 14px
}

.qr-bar .qr-cont .inner-box a {
    color: #56462e
}

.qr-bar .qr-cont .inner-box .p-text {
    text-align: center;
    padding: 6px 0 12px 0
}

.qr-bar .qr-cont .inner-box .small-icon {
    float: left;
    width: 36px
}

.qr-bar .qr-cont .inner-box .info {
    float: left;
    font-size: 14px;
    line-height: 1.4
}

.qr-bar .qr-cont .inner-box .info .info-title {
    font-weight: 700
}

.qr-bar .qr-cont .inner-box .info .detail {
    font-size: 12px
}

.qr-bar .qr-cont .inner-box .info .like {
    font-size: 12px;
    width: 68px;
    height: 16px;
    border: 1px solid #675037;
    background: #fff;
    display: block;
    text-align: center;
    margin-top: 6px;
    line-height: 16px
}

.qr-bar .qr-cont .inner-box .qrcode {
    text-align: center
}

.qr-bar .qr-cont .inner-box .qrcode img {
    width: 100%
}

.mir-demon .prev {
    position: absolute;
    width: 36px;
    height: 64px;
    background: url(../images/screenshot-arrow-left.png) 50% 50% no-repeat;
    z-index: 1;
    left: -80px;
    top: 300px
}

.mir-demon .next {
    position: absolute;
    width: 36px;
    height: 64px;
    background: url(../images/screenshot-arrow-rigth.png) 50% 50% no-repeat;
    z-index: 1;
    right: -70px;
    top: 300px
}

@media (max-width: 1366px) {
    .mir-demon .prev {
        left: -70px
    }
}

.mir-demon .demon-on {
    position: absolute;
    top: 600px;
    left: 560px
}

.mir-demon .demon-on .on {
    background: #623623
}