/* .main { width: 100%; height: 100%; overflow: hidden; } */


.comPop{
   
    position: fixed;
    right: .10rem;
    top: 1.2rem;
    width: 2.2rem;
    height: auto;
}

.comPop .comimgbox{
    display: block;
    width: 2rem;
    height: 2.75rem;
    background: url(../img/fuceng.png) center center no-repeat;
    background-size: 100% auto;
}
.comPop .close{
    position: absolute;
    top: .4rem;
    left: 0rem;
    width: .30rem;
    height: 0.7rem;
}





.main_swiper { width: 100%; height: 100%; }

.part { text-align: center; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; position: relative; }

.section{ height: 100%; position: relative; }

.rowdown { position: absolute; z-index: 40; width: 1.01rem; height: .52rem; background: url(../img/rowdown.png) center center no-repeat; background-size: 100% auto; bottom: .3rem; animation: scroll_tip 1000ms linear infinite alternate; }

.pagebox{width: 100%; height: 100%; overflow: hidden;}


/* page1 */

.page1 { background: url(../img/page1/bg.jpg) center center no-repeat; background-size: cover; }

.page1 .slogn { display: block; width:7rem; margin: 1.5rem auto 0; pointer-events: none; }

.page1 .play { position: absolute; bottom: 4rem; width: 0.75rem; height: 0.75rem; background: url(../img/page1/play.png) center center no-repeat; background-size: 100% auto; }

.page1 .zhucebtn { position: absolute; z-index: 50;  width: 5.7rem; height: 1.15rem; line-height: 1rem; background: url(../img/page1/zhuce.png) center center no-repeat; background-size: 100% auto; display: block; margin:8rem auto 0; font-size: .34rem; }

.page1 .zhucebtn a { color: #5a361e;display: block; }

.page1 .zhucebtn .line { position: absolute; width: 3.45rem; height: 0.82rem; top: 0.1rem; left: 1.12rem; overflow: hidden; border-radius: 0.05rem; pointer-events: none; }

.page1 .zhucebtn i { position: absolute; display: block; }

.page1 .zhucebtn i:nth-child(1) { top: 0; left: 0; width: 100%; height: 0.04rem; background: linear-gradient(90deg, transparent, #f9e173); animation: animate1 1.5s linear infinite; }

.page1 .zhucebtn i:nth-child(2) { top: -100%; right: 0; width: 0.04rem; height: 100%; background: linear-gradient(180deg, transparent, #f9e173); animation: animate2 1.5s linear infinite; animation-delay: .4s; }

.page1 .zhucebtn i:nth-child(3) { opacity: 0; bottom: 0; right: 0; width: 100%; height: 0.04rem; background: linear-gradient(270deg, transparent, #f9e173); animation: animate3 1.5s linear infinite; animation-delay: .70s; }

.page1 .zhucebtn i:nth-child(4) { bottom: -100%; left: 0; width: 0.04rem; height: 100%; background: linear-gradient(360deg, transparent, #f9e173); animation: animate4 1.5s linear infinite; animation-delay: 1.05s; }

.page1 .zhucebtn .line span { position: absolute; top: 0; left: 0; width: 3.45rem; height: 0.82rem; background-color: rgba(255, 255, 255, 0.8); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: lightmove 1.6s ease-in infinite; -o-animation: lightmove 1.6s ease-in infinite; animation: lightmove 1.6s ease-in infinite; filter: blur(.45rem); }

.page1 .appBox{
    width: 4.7rem;
    position: absolute;
    bottom: 1.2rem;
    z-index: 45;
}
.page1 .appBox a{
    display: inline-block;
    width: 2.29rem;
    height: 0.64rem;
    position: relative;

    color: #050608;
}
.page1 .appBox img {height: 100%;}
.page1 .appBox .midas1 {
    width: 2.29rem;
    height:1rem;    
}
.page1 .appBox .midas1 img{
    width: 2.29rem;
    height:1rem;   
}
.page1 .appBox .midas1 span{
   
    position: absolute;
    font-size: .2rem;
    width: 100%;
    text-align: center;
    top: 0;
    line-height: .4rem;
    text-shadow: 0 0 .05rem #fff5b7, 0 0 .05rem #fff5b7, 0 0 .05rem #fff5b7
}
.page1 .appBox .midas2 {
    height: 1.2rem; 
}
.page1 .appBox .midas2 img{
    width: 2.52rem;
    height: 1.2rem;
    margin-left: -0.1rem;  
}

.page1 .appBox .midas2 span{
    line-height: 1;
    position: absolute;
   white-space: nowrap;
    width: 100%;
    text-align: center;
    top: 0;
    text-shadow: 0 0 .05rem #fff5b7, 0 0 .05rem #fff5b7, 0 0 .05rem #fff5b7
}

.page1 .appBox .midas2 span:nth-child(1){
    font-size: .14rem;
    top: 0.15rem;
}
.page1 .appBox .midas2 span:nth-child(2){
    color: #7d2415;
    font-weight: bold;
    font-size: .22rem;
    top: 0.3rem;
   
}




/* page2 */

.page2 { background: url(../img/page2/bg.jpg) center center no-repeat; background-size: cover; }

.page2 .p2icon { background: url(../img/page2/p2-icon.png) no-repeat; background-size: 3.31rem auto; }

.page2 .map-box { background: url(../img/page2/jxmap.png) center center no-repeat; background-size: cover; width: 7.47rem; height: 12.87rem; position: relative; top:1rem;margin: auto;}

.page2 .content { position: absolute; width: 6.3rem; height: auto; left: 50%; margin-left: -3.15rem; top: 0.7rem; }

.page2 .content .title,
.page2 .content .title2 {  font-size: .56rem; color: #2c1c0b; line-height: 1; text-transform: uppercase; position: absolute; transform: translate(-50%); left: 50%; white-space: nowrap; }

.page2 .content .title2::before,
.page2 .content .title2::after { position: absolute; content: ''; background: url(../img/page2/p2-icon.png) no-repeat; background-size: 3.31rem auto; width: 1.25rem; height: 0.05rem; top: .25rem; }
.page2 .content .title2 { top: .6rem;    font-size: .5rem; }
.page2 .content .title2::before { right: -1.45rem; background-position: -.3rem -.3rem; }
.page2 .content .title2::after { background-position: -.3rem -.94rem; left: -1.45rem; }
.page2 .content .title3 { position: absolute; top: 1.1rem; color: #675538; font-size: .2rem; font-family: nsb; transform: translate(-50%); left: 50%; text-transform: uppercase; white-space: nowrap; }
.page2 .content .title3::before,
.page2 .content .title3::after { position: absolute; content: ''; background: url(../img/page2/p2-icon.png) no-repeat; background-size: 3.31rem auto; width: .15rem; height: 0.1rem; top: .15rem; background-position: -.3rem -2.9rem; }
.page2 .content .title3::before { right: -.3rem; }
.page2 .content .title3::after { left: -.25rem; }


.page2 .content .map { position: absolute; width: 3.62rem; height:7.18rem; background: url(../img/page2/luxian1-1.png) no-repeat; background-size: cover; transform: translate(-53%); left: 50%; top: 2.6rem; }
.page2 .content .map-on{ width: 3.62rem; height:7.18rem; position: absolute; background: url(../img/page2/luxian2-1.png) no-repeat; background-size: cover; transform: translate(-50%); left: 50%; top: 0; }


.page2 .content .on_1 .map-on { clip: rect(0, 0, 0, 0); }

.page2 .content .on_2 .map-on { clip: rect(0, 4.26rem, 0.8rem, 0); }
.page2 .content .on_3 .map-on { clip: rect(0, 4.26rem, 2.9rem, 0); }
.page2 .content .on_4 .map-on { clip: rect(0, 4.26rem, 3.8rem, 0); }
.page2 .content .on_5 .map-on { clip: rect(0, 4.26rem,6.35rem, 0); }
.page2 .content .on_6 .map-on { clip: rect(0, 4.26rem,7.18rem, 0); }


.page2 .map .jticon i { position: absolute; background: url(../img/page2/p2-icon.png) no-repeat; background-size: 3.31rem auto; width: 0.83rem; height: 0.25rem; background-position: -.3rem -3.58rem; }
.page2 .map .jticon i:nth-child(1) { top: -0.26rem; }
.page2 .map .jticon i:nth-child(2) { top: 1.1rem; transform: scaleX(-1) rotate(45deg); margin-left: 0.16rem; }
.page2 .map .jticon i:nth-child(3) { top: 4.4rem; transform: rotate(145deg); left: 0.8rem; }
.page2 .map .jticon i:nth-child(4) { top: 6.2rem; transform: scaleY(-1) rotate(-10deg); }


.page2 .map .box { position: absolute; width: 2.71rem; height: 2.71rem; background-position: 0.22rem -8.65rem; z-index: 10;}
.page2 .map .box .num { position: absolute; width: 1.4rem; height: 0.41rem; background-position: -0.3rem -5.29rem; transform: translate(-50%); left: 50%; font-size: .32rem; color: #d5c9b2; font-family: nsb; line-height: .41rem; text-shadow: 0 0 4px #4f4232; -webkit-text-stroke: 0.5px #4f4232; top: 0; }

.page2 .map .box img { left: 50%; position: absolute; filter: drop-shadow(5px 3px 5px #000); }
.page2 .map .box h3 { position: absolute;  font-size: .26rem; color: #503e21; transform: translate(-50%); left: 50%; bottom: .28rem; }
.page2 .map .box h3::after,
.page2 .map .box h3::before { position: absolute; content: ''; background: url(../img/page2/p2-icon.png) no-repeat; background-size: 3.31rem auto; width: 0.85rem; height: 0.08rem; top: .2rem; }
.page2 .map .box h3::before { background-position: -.27rem -2.23rem; right: -0.9rem; }
.page2 .map .box h3::after { background-position: -.3rem -1.57rem; left: -0.9rem; }

.page2 .map .box p { position: absolute; top: 2.4rem; color: #000; font-size: .21rem;  line-height: 1; width: 113%; left: -.15rem;}
.page2 .map .box p em { display: block;     margin-bottom: .03rem;}

.page2 .map .gift-box1 { top: -1rem; left: -1.3rem; }
.page2 .map .gift-box1 img { width: 1.6rem; transform: translate(-50%, 37%); }

.page2 .map .gift-box2 { top: -1rem; right: -1.2rem; }
.page2 .map .gift-box2 img { width: 1.6rem; transform: translate(-52%, 50%); }

.page2 .map .gift-box3 {    top: 2.3rem;left: -1.2rem; }
.page2 .map .gift-box3 img { width: 1.45rem; transform: translate(-52%, 36%); }

.page2 .map .gift-box4 { top: 2.3rem;right: -1.2rem; }
.page2 .map .gift-box4 img { width: 1.24rem; transform: translate(-57%, 37%); }

.page2 .map .gift-box5 { top: 5.8rem; left: -1.2rem; }


.page2 .map .gift-box5  .page2-Hero { 
    width: 1.09rem;
    left: 0.8rem;
    top: 0.5rem;
    background: url(../img/page2/gift3M.png) center center no-repeat;
    background-size: 100%;
    height: 1.33rem;
    position: absolute;
    filter: drop-shadow(0px 0px 0.2rem #fff);    
}
.page2 .map .gift-box6 { top: 5.8rem; right: -1.2rem;}
.page2 .map .gift-box6 img {    width: 1.41rem;  transform: translate(-50%, 22%); }




.page2 .map .gift-box6 .hide-gift { position: absolute; width: 1.1rem; height: 2.18rem; background-position: -0.3rem -11.56rem; right: -0.36rem; z-index: 20;  font-size: .12rem; color: #ffe698; }
.page2 .map .gift-box6 .hide-gift em{ position: absolute; width: 0.6rem; left: 50%; line-height: .15rem; top: 1rem; transform:translate(-50%); }


.page2 .map .box.get{ background-position:-.1rem -14.11rem; }
.page2 .map .box.get .num,.page2 .map .box.on .num{ top: 0.12rem; color: #eec258; background-position: -.3rem -6.265rem; text-shadow: 0 0 4px #513c09; -webkit-text-stroke: 0.5px #513c09; }
.page2 .map .box.get img{ filter: drop-shadow(5px 3px 5px #ffe692); }
.page2 .map .box.get h3{ bottom: .2rem; }
.page2 .map .box.get p{ top: 2.45rem; }

.page2 .map .gift-box1.get img{ width: 1.6rem; }
.page2 .map .gift-box2.get img{ transform: translate(-50%, 56%); }
.page2 .map .gift-box3.get img{ transform: translate(-54%, 45%); width: 1.35rem; }
.page2 .map .gift-box4.get img{ transform: translate(-50%, 45%); }

/* .page2 .map .gift-box5.get img{ transform: translate(-53%, 45%); } */

.page2 .map .gift-box5.get .page2-Hero {background: url(../img/page2/gift3M-on.png) center center no-repeat;background-size: 100%;   }
.page2 .map .gift-box5.on .page2-Hero {background: url(../img/page2/gift3M-on.png) center center no-repeat;background-size: 100%;    top: 0.7rem;}

.page2 .map .gift-box5.get .hide-gift{ top: 0.1rem; }


.page2 .map .box.on{ background-position: -.32rem -17.15rem; }
.page2 .map .box.on .num{ top: .3rem; }
.page2 .map .box.on img{ filter: drop-shadow(5px 3px 5px #ffe692); }
.page2 .map .box.on h3{ bottom:0; }
.page2 .map .box.on p{ top: 2.7rem; }

.page2 .map .gift-box1.on{ top: -1.28rem; }
.page2 .map .gift-box2.on{ top: -1.16rem; }
.page2 .map .gift-box1.on img{  transform: translate(-50%, 55%); }
.page2 .map .gift-box2.on img{ transform: translate(-48%, 69%); }
.page2 .map .gift-box3.on img{ transform: translate(-50%, 58%); width: 1.37rem; }
.page2 .map .gift-box4.on img{ transform: translate(-50%, 57%); }
/* .page2 .map .gift-box5.on{ top: 4.7rem; } */
.page2 .map .gift-box6.on img{ transform: translate(-46%, 42%) }
.page2 .map .gift-box6.on .hide-gift{ top: 0.3rem; }




/* page3 */

.page3 { background: url(../img/page3/bg.jpg) center center no-repeat; background-size: cover; }

.page3 .p3icon{ background: url(../img/page3/p3icon.png) no-repeat; background-size: 8.03rem auto; }
.page3 .content{ width: 7.5rem; margin: 0 auto; height: 100%; position: relative; }

.page3  .title{ position: relative;z-index: 40; margin-top: 1.8rem;  font-size: .56rem; color: #ffdf91;  text-shadow: 0 0 2px #463814; text-transform: uppercase; left: 50%; transform: translate(-50%); width: 100%; line-height: 1; }
.page3  .title::after{ position: absolute; content: ''; background: url(../img/page3/p3icon.png) no-repeat; background-size: 8.03rem auto; background-position: -0.3rem -4.26rem; width: 6.41rem; height: 0.16rem; left: 50%; transform: translate(-50%); bottom: -0.2rem; }
.page3 .title2{ position: relative;z-index: 40;margin: 0.2rem auto 0;font-size: .22rem; color: #fff; width: 7.2rem;    font-weight: normal;line-height: .4rem; text-align: left;}
.page3 .title2 i{ color: #ffdf91; }

.page3 .lunBox{ position: absolute; width: 100%; height: 100%;top:-1rem ;z-index: 30;}
.page3 .lunBox .swiper-container{ height: 100%; width: 100%; }
.page3 .lunBox .imgbox{ position: absolute; right: 0; top: -.8rem; width: 100%; height:auto; overflow: hidden; background-size: 100% auto; background-position:left center; background-repeat: no-repeat; opacity: 1; }

.page3 .lunBox .biaoti { position: absolute; z-index: 15; width: 7.43rem; height: 1.9rem; background-position: -0.3rem -8.51rem; top:64%; left: 50%; margin-left: -3.715rem; }
.page3 .lunBox .biaoti h4 { font-family: nsb; font-size: .26rem; color: #482e10; line-height: 1; text-shadow: 0 0 .2rem #ffd339; margin-top: 0.5rem;     white-space: nowrap;}
.page3 .lunBox .biaoti small { display: block; font-family: nsb; color: #482e10; line-height: 1; font-size: .22rem; margin-top: 0.1rem; position: absolute; text-shadow: 0 0 0.2rem #ffd339; left: 50%; transform: translate(-50%); white-space: nowrap; }
.page3 .lunBox .biaoti small::after, .page3 .lunBox .biaoti small::before{ position: absolute; content: ''; background: url(../img/page3/p3icon.png) no-repeat; background-size: 8.03rem auto; width: 0.82rem; height: 0.08rem; top: .07rem; }
.page3 .lunBox .biaoti small::after { background-position: -.3rem -2.21rem; right: -.9rem; }
.page3 .lunBox .biaoti small::before { background-position: -.3rem -1.54rem; left: -.9rem; }
.page3 .lunBox .page3_jd { width: .55rem; height: .55rem; top: 42%;filter: drop-shadow(1px 1px .1rem #08162C);outline: none;}
.page3 .lunBox .page3_next::after,.page3 .lunBox .page3_prev::after{content: '';}
.page3 .lunBox .page3_next { background-position:-.3rem -6.15rem; right: .5rem; }
.page3 .lunBox .page3_prev { background-position:-.3rem -5rem; left: .5rem; }

.page3 .page3_dian{ top: 76%;}
.page3 .page3_dian .swiper-pagination-bullet {width: auto; ;min-width: 1.9rem; background: none; position: relative; z-index: 30; opacity: 1; height: auto; margin-right: 0.2rem; text-align: center; border-radius: 0; }
.page3 .page3_dian .swiper-pagination-bullet::after{ position: absolute; content: ''; background: url(../img/page3/p3icon.png); background-size: 8.03rem auto; background-position: -0.28rem -2.86rem; width: 0.15rem; height: 0.15rem; left: 0; top: 0.12rem; }
/* .page3 .page3_dian .swiper-pagination-bullet::before{ position: absolute; content: ''; background: url(../img/page3/p3icon.png); background-size: 8.03rem auto; background-position: -0.3rem -0.3rem; width: 1.9rem; height: 0.04rem; bottom: 0; left: 0; } */

.page3 .page3_dian .swiper-pagination-bullet em {  color: #7bb2f1; font-size: .2rem; display: block; text-align: left; text-indent: 0.22rem;  text-transform: uppercase;}
.page3 .page3_dian .swiper-pagination-bullet-active::after{ position: absolute; content: ''; background: url(../img/page3/p3icon.png); background-size: 8.03rem auto; background-position: -0.28rem -3.55rem; width: 0.15rem; height: 0.15rem; left: 0; top: 0.12rem; }
/* .page3 .page3_dian .swiper-pagination-bullet-active::before{ position: absolute; content: ''; background: url(../img/page3/p3icon.png); background-size: 8.03rem auto; background-position: -0.3rem -0.92rem; width: 1.9rem; height: 0.04rem; bottom: 0; left: 0; } */

.page3 .page3_dian .swiper-pagination-bullet-active em{color: #ffdf91; text-shadow: 0 0 .1rem #fff;}


/* page4 */

.page4 { background: url(../img/page4/bg.jpg) center center no-repeat; background-size: cover; }
.page4 .p4icon{ background: url(../img/page4/p4icon.png) no-repeat; background-size: 4.51rem auto; }
.page4 .content{ width: 7.5rem; margin: 0 auto; height: 100%; position: relative; }
.page4 .title { position: absolute; top: 1.8rem;  font-size: .56rem; color: #ffdf91; text-shadow: 0 0 2px #463814; text-transform: uppercase; left: 50%; transform: translate(-50%); width: 100%; line-height: 1; z-index: 60; }
.page4 .title::after { position: absolute; content: ''; background: url(../img/page4/p4icon.png) no-repeat; background-size:4.51rem auto; background-position: -0.3rem -1.78rem; width: 3.91rem; height: 0.16rem; left: 50%; transform: translate(-50%); bottom: -0.2rem; }
.page4 .videoBox{ position: absolute; width: 100%; height: 100%; z-index: 40; }
.page4  .swiper-container{ width: 100%; height: 100%; }
.page4 .videoBox .page4_jd { width: .55rem; height: .55rem; top: 50%; }
.page4 .videoBox .page4_next::after,.page4 .videoBox .page4_prev::after{content: '';}
.page4 .videoBox .page4_next { background-position:-.3rem -12.37rem; right: .5rem; }
.page4 .videoBox .page4_prev { background-position:-.3rem -11.22rem; left: .5rem; filter: drop-shadow(1px 1px .1rem #08162C)}

.page4 .page4_dian { height: auto; bottom:.5rem; width: auto; display: flex; justify-content: center; left: 50%; transform: translate(-50%); }
.page4 .page4_dian .swiper-pagination-bullet { background: url(../img/page4/p4icon.png) no-repeat; background-size: 4.51rem auto; width: 0.14rem; height: 0.14rem; background-position: -0.3rem -.3rem; opacity: 1; z-index: 60; margin-left: 0.3rem; }
.page4 .page4_dian .swiper-pagination-bullet-active { background-position: -.3rem  -1.04rem; box-shadow: 0 0 .2rem #fff; }



.page4  .hero .heroComimg{ position: absolute; top: 0; z-index: 40; width:100%; height: auto; left: 0; }
.page4 .herotxtbox{ position: absolute; bottom: 0; width: 100%; height: 5.06rem; background: url(../img/page4/btbg.png) center center no-repeat; background-size: 100% auto; z-index: 50; }
.page4 .hero .herotxtbox .heroCombq {     height: 1.76rem;
    width: 95%;
    position: absolute;
    display: flex;
    justify-content: space-between;
    top: 1.5rem;
    transform: translate(-50%);
    left: 50%; }


    .page4 .hero .heroimg6{
        width: 115%;
        transform: translate(-53%,-66%) !important;
    }
    
    .page4 .hero .heroimg7{
        width: 115%;
        transform: translate(-45%, -47%) !important;
    }
    
    .page4 .hero .heroimg8{
        width: 140%;
        transform: translate(-53%, -60%) !important;
    }
    .page4 .hero .heroimg9{
        width: 115%;
        transform:translate(-53%, -50%) !important
    } 
    .page4 .hero .heroimg10{
        width: 100%;
        transform: translate(-46%, -44%) !important;
    } 

    .page4 .hero .heroimg11{
        width: 150%;
        transform: translate(-55%, -44%) !important;
    } 
    .page4 .hero .heroimg12{
        width: 115%;
        transform: translate(-55%, -50%) !important;
    } 

    .page4 .hero .heroimg13{
        width: 120%;
        transform: translate(-57%, -53%) !important;
    } 
    .page4 .hero .heroimg14{
        width: 90%;
        transform: translate(-50%, -50%) !important;
    } 


.page4 .hero .herotxtbox .txt{width: 58%; height: 100%; position: relative; background: none;}
.page4 .hero .herotxtbox .videobg{ width: 42%; height: 100%; position: relative; background: none;}

.page4 .hero .herotxtbox .txt h5 { font-family: nsb; color: #ffdf91; font-size: .47rem; line-height: 1; margin-top: .2rem; text-align: left;    text-transform: uppercase; }
.page4 .hero .herotxtbox .txt .smicon{ width: 3.25rem; height: 0.5rem; background-position: -0.3rem -5.63rem; position: absolute; text-align: left; bottom: 0; }
.page4 .hero .herotxtbox .txt .smicon span{ font-size: .22rem; color: #ffdf91;  display: inline-block;   margin-left: .25rem;line-height: .5rem;width: 1.3rem; text-transform: uppercase;}
.page4 .hero .herotxtbox .txt .smicon i{ background: url(../img/page4/p4icon.png) no-repeat; background-size:4.51rem auto; display: inline-block; margin-top: -0.05rem;    height: .56rem; width: .42rem; margin-right: 0.1rem; }
.page4 .hero .herotxtbox .videobg img{ width: 2.98rem; height: 1.72rem; display: block; margin: 0.02rem auto 0; }
.page4 .hero .herotxtbox .videobg::before{ position: absolute; content: ''; background: url(../img/page4/p4icon.png) no-repeat; background-size:4.51rem auto; width: 3rem; height: 1.76rem; background-position: -.3rem  -14.7rem; left: 50%; top: 50%; transform: translate(-50%,-50%); box-shadow: .05rem .05rem .2rem #000; }
.page4 .hero .herotxtbox .videobg::after{ position: absolute; content: ''; background: url(../img/page4/p4icon.png) no-repeat; background-size:4.51rem auto; width: 0.6rem; height: 0.6rem; background-position: -.3rem -13.52rem; left: 50%; top: 50%; transform: translate(-50%,-50%); }

.page4 .hero .heroicon1 .txt .smicon i:nth-child(2){ background-position: -.3rem  -8.94rem; }
.page4 .hero .heroicon1 .txt .smicon i:nth-child(3){ background-position: -.3rem  -2.45rem; }
.page4 .hero .heroicon1 .txt .smicon i:nth-child(4){ background-position: -.3rem  -3.48rem; }

.page4 .hero .heroicon2 .txt .smicon i:nth-child(2){ background-position: -.3rem  -8.94rem; }
.page4 .hero .heroicon2 .txt .smicon i:nth-child(3){ background-position: -.3rem  -2.45rem;    }
.page4 .hero .heroicon2 .txt .smicon i:nth-child(4){ background-position: -.3rem  -6.68rem; }

.page4 .hero .heroicon3 .txt .smicon i:nth-child(2){ background-position: -.3rem  -10.09rem; }
.page4 .hero .heroicon3 .txt .smicon i:nth-child(3){ background-position: -.3rem  -3.48rem;  }

.page4 .hero .heroicon4 .txt .smicon i:nth-child(2){ background-position: -.3rem  -10.09rem; }
.page4 .hero .heroicon4 .txt .smicon i:nth-child(3){ background-position: -.3rem  -2.45rem;    }

.page4 .hero .heroicon5 .txt .smicon i:nth-child(2){ background-position: -.3rem  -7.8rem; }
.page4 .hero .heroicon5 .txt .smicon i:nth-child(3){ background-position: -.3rem  -3.48rem;}
.page4 .hero .heroicon5 .txt .smicon i:nth-child(4){ background-position:  -.3rem  -4.52rem; ; }


.page4 .hero .heroicon6 .txt .smicon i:nth-child(2){ background-position: -.3rem  -10.09rem }
.page4 .hero .heroicon6 .txt .smicon i:nth-child(3){ background-position:  -.3rem  -6.68rem}

.page4 .hero .heroicon7 .txt .smicon i:nth-child(2){ background-position: -.3rem  -10.09rem }
.page4 .hero .heroicon7 .txt .smicon i:nth-child(3){ background-position: -.3rem  -3.48rem}

.page4 .hero .heroicon8 .txt .smicon i:nth-child(2){ background-position: -.3rem  -10.09rem }
.page4 .hero .heroicon8 .txt .smicon i:nth-child(3){ background-position: -.3rem  -3.48rem}
.page4 .hero .heroicon8 .txt .smicon i:nth-child(4){ background-position: -.3rem  -6.68rem}

.page4 .hero .heroicon9 .txt .smicon i:nth-child(2){ background-position: -.3rem  -10.09rem }
.page4 .hero .heroicon9 .txt .smicon i:nth-child(3){ background-position: -.3rem  -3.48rem}

.page4 .hero .heroicon10 .txt .smicon i:nth-child(2){ background-position: -.3rem  -8.94rem }
.page4 .hero .heroicon10 .txt .smicon i:nth-child(3){ background-position: -.3rem  -3.48rem}

.page4 .hero .heroicon11 .txt .smicon i:nth-child(2){ background-position: -.3rem  -7.8rem }
.page4 .hero .heroicon11 .txt .smicon i:nth-child(3){ background-position:-.3rem  -4.52rem}


.page4 .hero .heroicon12 .txt .smicon i:nth-child(2){ background-position: -.3rem  -8.94rem }
.page4 .hero .heroicon12 .txt .smicon i:nth-child(3){ background-position:-.3rem  -4.52rem}
.page4 .hero .heroicon12 .txt .smicon i:nth-child(4){ background-position:-.3rem  -6.68rem}

.page4 .hero .heroicon13 .txt .smicon i:nth-child(2){ background-position: -.3rem  -7.8rem }
.page4 .hero .heroicon13 .txt .smicon i:nth-child(3){ background-position:-.3rem  -4.52rem}

.page4 .hero .heroicon14 .txt .smicon i:nth-child(2){ background-position: -.3rem  -8.94rem }
.page4 .hero .heroicon14 .txt .smicon i:nth-child(3){ background-position:  -.3rem  -6.68rem}




/* page5 */


.page5 { position: relative; }
.page5 .p5icon{ background: url(../img/page5/p5icon.png) no-repeat; background-size: 6.01rem auto; }
.page5 .content{ width: 7.5rem; margin: 0 auto; height: 100%; position: relative; }

.page5 .title { position: relative; padding-top: 1.8rem;  font-size: .56rem; color: #ffdf91;  text-shadow: 0 0 2px #463814; text-transform: uppercase; left: 50%; transform: translate(-50%); width: 100%; line-height: 1; z-index: 60; }

.page5 .title::after { position: absolute; content: ''; background: url(../img/page5/p5icon.png) no-repeat; background-size: 6.01rem auto; background-position: -.3rem  -.97rem; width: 5.41rem; height: 0.16rem; left: 50%; transform: translate(-50%); bottom: -0.25rem; }

.page5 .title2{ position: relative; margin-top: .5rem; font-size: .26rem; font-family: nsb; color: #fff; width: 100%; z-index: 60;     text-shadow: 0 0 2px #463814;}
.page5 .title2 i{ color: #ffdf91; }


.page5 .cityBox{ position: absolute; width: 100%; height: 100%; z-index: 40;top: 0; }
.page5  .swiper-container{ width: 100%; height: 100%; }
.page5 .cityBox .page5_jd { width: .55rem; height: .55rem; top: 45%; }
.page5 .cityBox .page5_next::after,.page5 .cityBox .page5_prev::after{content: '';}
.page5 .cityBox .page5_next { background-position: -.3rem  -2.86rem; right: .5rem; }
.page5 .cityBox .page5_prev { background-position: -.3rem  -1.71rem; left: .5rem; }

.page5 .city { position: absolute; right: 0; top: 0; width: 100%; height:80%; overflow: hidden; background-size: cover; background-position: center bottom; background-repeat: no-repeat; box-shadow: inset 0px 2.5rem 1rem 0.4rem rgba(12, 33, 65, 0.6); }

.page5 .ct-message{ position: absolute; bottom: 0; width: 100%; height: 5rem;  }

.page5 .herobg1{background: url(../img/page5/bg2.png) center top no-repeat; background-size: 100% auto;}
.page5 .herobg2{background: url(../img/page5/bg3.png) center top no-repeat; background-size: 100% auto;}
.page5 .herobg3{background: url(../img/page5/bg1.png) center top no-repeat; background-size: 100% auto;}
.page5 .herobg4{background: url(../img/page5/bg4.png) center top no-repeat; background-size: 100% auto;}
.page5 .herobg5{background: url(../img/page5/bg5.png) center top no-repeat; background-size: 100% auto;}
.page5 .herobg6{background: url(../img/page5/bg2.png) center top no-repeat; background-size: 100% auto;}
.page5 .herobg7{background: url(../img/page5/bg4.png) center top no-repeat; background-size: 100% auto;}
.page5 .herobg8{background: url(../img/page5/bg6.png) center top no-repeat; background-size: 100% auto;}




.page5 .ct-message .bigicon1{ position: absolute; left: 0.5rem; top: -1rem; width: 1.31rem; height: 1.74rem; background-position: -.3rem  -19.73rem; filter: drop-shadow(0.05rem 0.05rem 0.05rem #0c2141); }
.page5 .ct-message .bigicon2{ position: absolute; left: 0.5rem; top: -1rem; width: 1.38rem; height: 1.90rem; background-position: -.3rem  -24.5rem; filter: drop-shadow(0.05rem 0.05rem 0.05rem #0d2241); }
.page5 .ct-message .bigicon3{ position: absolute; left: 0.5rem; top:-1rem; width: 1.27rem; height: 1.83rem; background-position: -.3rem  -22.07rem; filter: drop-shadow(0.05rem 0.05rem 0.05rem #1a1105); }
.page5 .ct-message .bigicon4{ position: absolute; left: 0.5rem; top: -1rem; width: 1.61rem; height: 1.64rem; background-position: -.3rem  -17.49rem; filter: drop-shadow(0.05rem 0.05rem 0.05rem #2b0f0e); }
.page5 .ct-message .bigicon5{ position: absolute; left: 0.5rem; top:-1rem; width: 1.61rem; height: 1.64rem; background-size: 5.2rem auto;background-position: -3.05rem  -15.05rem; filter: drop-shadow(0.05rem 0.05rem 0.05rem #2b0f0e); }
.page5 .ct-message .bigicon6{ position: absolute; left: 0.5rem; top: -1rem; width: 1.61rem; height: 1.64rem;    z-index: 20; background-size: 5rem auto;background-position: -2.95rem  -16.4rem; filter: drop-shadow(0.05rem 0.05rem 0.05rem #2b0f0e); }
.page5 .ct-message .bigicon7{ position: absolute; left: 0.5rem; top: -1rem; width: 1.61rem; height: 1.64rem;    z-index: 20; background-size: 5rem auto;background-position:-2.95rem  -18.35rem; filter: drop-shadow(0.05rem 0.05rem 0.05rem #643038); }
.page5 .ct-message .bigicon8{ position: absolute; left: 0.5rem; top: -1rem; width: 1.61rem; height: 1.64rem;    z-index: 20; background-size: 5rem auto;background-position: -2.95rem  -20.2rem; filter: drop-shadow(0.05rem 0.05rem 0.05rem #314b46); }




.page5 .ct-message  .dec{ position: absolute; top: 1rem; left: 0.5rem; height: auto; width:5.9rem; z-index: 20; }
.page5 .ct-message  .dec h3{ position: absolute; color: #ffdf91; font-size: .42rem;  text-transform: uppercase;text-shadow: 2px 2px 0.08rem #000; }
.page5 .ct-message  .dec h3::after{ position: absolute; content: ''; background: url(../img/page5/p5icon.png) no-repeat; background-size: 6.01rem auto; background-position: -.3rem  -.3rem; width: 4.16rem; height: .07rem; bottom: 0; left: 0; }

.page5 .ct-message  .dec p{ display: block; font-size: .3rem; color: #fff; line-height: .33rem; margin-top: .8rem; text-align: left; }
.page5 .ct-message .showhero1 { position: absolute; width: 4.63rem; height: 6.2rem; bottom: 0; z-index: 10; right:0;filter: drop-shadow(-0.15rem 0.4rem 0.1rem #0c2141); }
.page5 .ct-message .showhero2 {position: absolute; width:6.01rem; height:8.06rem; bottom: 0; z-index: 10; right: 0; filter: drop-shadow(-0.15rem 0.15rem 0.06rem #0d2241); }
.page5 .ct-message .showhero3 {  position: absolute; width:5.24rem; height:7.69rem; bottom: 0; z-index: 10; right:-.5rem; filter: drop-shadow(-0.2rem 0.2rem 0.1rem #1a1105); }
.page5 .ct-message .showhero4 { position: absolute; width:3.91rem; height: 7.32rem; bottom: 0; z-index: 10; right: 0; filter: drop-shadow(-0.2rem 0.3rem 0.07rem #2b0f0e);}
.page5 .ct-message .showhero5 { position: absolute; width:6.6rem; height: auto; bottom: 0; z-index: 10; right:-2rem; filter: drop-shadow(-0.2rem 0.3rem 0.07rem #171c25);}
.page5 .ct-message .showhero6 { position: absolute; width:10.5rem; height: auto; bottom: 0; z-index: 10; right:-2.5rem; filter: drop-shadow(-0.2rem 0.3rem 0.07rem #171e26);}

.page5 .ct-message .showhero7 { position: absolute; width:7.5rem; height: auto; bottom: 0; z-index: 10; right:-3.8rem; filter: drop-shadow(-0.2rem 0.3rem 0.07rem #281912);}
.page5 .ct-message .showhero8 { position: absolute; width:5.6rem; height: auto; bottom: 0; z-index: 10; right:-1rem; filter: drop-shadow(-0.2rem 0.3rem 0.1rem #33291c);}






.page5 .page5_dian { height: 1.2rem; bottom: 0.5rem; width: auto; display: flex; justify-content: center; left: 0.2rem; bottom: -.02rem; z-index: 99;}

.page5 .page5_dian .swiper-pagination-bullet { width: 0.86rem; height: 1.19rem; z-index: 60; margin: 0 0.04rem 0 0; border-radius: initial; background: url(../img/page5/p5icon.png) no-repeat; background-size: 6.01rem auto; opacity: 1; position: relative; }

.page5 .page5_dian .swiper-pagination-bullet:nth-child(1){   background-position: -.3rem  -5.28rem; }
.page5 .page5_dian .swiper-pagination-bullet:nth-child(2){background-position: -.3rem  -6.86rem;}
.page5 .page5_dian .swiper-pagination-bullet:nth-child(3){  background-position: -.3rem  -8.44rem;}
.page5 .page5_dian .swiper-pagination-bullet:nth-child(4){ background-position: -.3rem  -3.70rem; }
.page5 .page5_dian .swiper-pagination-bullet:nth-child(5){background-size: 6.5rem auto; background-position:-2.95rem  -4.05rem }
.page5 .page5_dian .swiper-pagination-bullet:nth-child(6){  background-size: 6.5rem auto;background-position: -2.95rem -5.75rem; }
.page5 .page5_dian .swiper-pagination-bullet:nth-child(7){ background-size: 6.5rem auto;background-position: -2.95rem   -7.45rem; }
.page5 .page5_dian .swiper-pagination-bullet:nth-child(8){ background-size: 6.5rem auto;background-position:  -2.95rem   -9.15rem; }




.page5 .page5_dian .swiper-pagination-bullet:nth-child(1).swiper-pagination-bullet-active{  background-position: -.3rem  -12.02rem; }
.page5 .page5_dian .swiper-pagination-bullet:nth-child(2).swiper-pagination-bullet-active{background-position: -.3rem  -13.81rem; }
.page5 .page5_dian .swiper-pagination-bullet:nth-child(3).swiper-pagination-bullet-active{ background-position: -.3rem  -15.6rem; }
.page5 .page5_dian .swiper-pagination-bullet:nth-child(4).swiper-pagination-bullet-active{ background-position: -.3rem  -10.23rem; }
.page5 .page5_dian .swiper-pagination-bullet:nth-child(5).swiper-pagination-bullet-active{ background-position: -2.95rem   -11.03rem; }
.page5 .page5_dian .swiper-pagination-bullet:nth-child(6).swiper-pagination-bullet-active{ background-position:-2.95rem   -13rem; }
.page5 .page5_dian .swiper-pagination-bullet:nth-child(7).swiper-pagination-bullet-active{ background-position:-2.95rem   -15rem; }
.page5 .page5_dian .swiper-pagination-bullet:nth-child(8).swiper-pagination-bullet-active{ background-position:-2.95rem   -16.9rem; }








/* page6 */

.page6 { background: url(../img/page6/bg.jpg) center center no-repeat; background-size: cover; }

.page6 .p6icon{ background: url(../img/page6/p6icon.png) no-repeat; background-size: 8.1rem auto; }
.page6 .content { width: 7.5rem; margin: 0 auto; height: 100%; position: relative; }
.page6  .titletop{    position: relative;padding-top: 1.5rem;}
.page6 .title { position: absolute;  font-size: .56rem; color: #ffdf91; text-shadow: 0 0 3px #463814; text-transform: uppercase; left: 50%; transform: translate(-50%); line-height: 1; z-index: 60; }
.page6 .content .title::before,
.page6 .content .title::after { position: absolute; content: ''; background: url(../img/page6/p6icon.png) no-repeat; background-size: 8.1rem auto; width:1.8rem; height: 0.07rem; top: .25rem; }
.page6 .content .title::before{ background-position: -.3rem  -2.88rem; right: -2rem; }
.page6 .content .title::after{ background-position: -.3rem  -2.21rem; left:  -2rem; }


.page6 .newsbox { width: 100%; margin: 2rem auto 0; position: relative;}

.page6 .newsbox  .swiper-container { width: 100%; height: 100%; }
.page6 .newsbox  .swiper-slide { width: 5.5rem; height: 6.55rem; filter: brightness(.5); }

.page6 .newsbox .page6_jd { width: 1rem; height: 1rem; top: 45%; }
.page6 .newsbox .page6_next::after, .page6 .newsbox .page6_prev::after{content: '';}
.page6 .newsbox .page6_next { background-position: -.1rem  -12.5rem; right:0; }
.page6 .newsbox .page6_prev { background-position: -.05rem  -11.35rem; left:0; }

.page6 .newsbox .tips{font-size: .5rem;
    color: #fff;
    margin-top: 2.5rem;}



.page6 .newsbox  .swiper-slide a{ display: block; width: 100%; height: 100%; background: url(../img/page6/newsbg.png) center center no-repeat; background-size: 100% auto; }

.page6 .newsbox  .swiper-slide img{ width: 95%; margin: 2.5%  auto 0; height: auto}
.page6 .newsbox  .swiper-slide-active{ filter: brightness(1); }
.page6 .newsbox .swiper-slide .txt h3 { width: 95%;  margin: 0 auto;font-family: nsb; color: #482e10; font-size: .32rem; line-height: .45rem; text-align: center; text-overflow: ellipsis; overflow: hidden; position: relative; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.page6 .newsbox .swiper-slide .txt .line { position: absolute; background-position: -.3rem -1.54rem; width: 4.81rem; height: 0.07rem; left: 50%; margin-top: .15rem; transform: translate(-50%); }
.page6 .newsbox .swiper-slide .txt p {
    color: #482e10;
    text-align: left;
    line-height: .32rem;
    font-size: .22rem;
    width: 88%;
    margin: 0.3rem auto 0;
 }
.page6 .newsbox .swiper-slide .txt em { position: absolute;  color: #482e10; font-size:.2rem; bottom: .2rem; right:5%; }

.page6 .page6_dian { height: auto; bottom: -.5rem; width: auto; display: flex; justify-content: center; left: 50%; transform: translate(-50%); }
.page6 .page6_dian .swiper-pagination-bullet { background: url(../img/page6/p6icon.png) no-repeat; background-size: 8.1rem auto; width: 0.14rem; height: 0.14rem; background-position: -0.3rem -4.29rem; opacity: 1; z-index: 60; margin-left: 0.3rem; }
.page6 .page6_dian .swiper-pagination-bullet-active { background-position: -.3rem -3.55rem; box-shadow: 0 0 .2rem #fff; }





.page6 .fg-line{ width: 6.66rem; display: block; height: 0.03rem; background-position: -0.3rem -0.91rem; margin: 1rem auto 0; }
.page6 .morelink{ display: block; color: #ffdf91;  font-size: .28rem; text-shadow: 0 0 .1rem #000; text-transform: uppercase; margin-top: .3rem; position: relative; }
.page6 .morelink::after{ background: url(../img/page6/p6icon.png) no-repeat; background-size: 8.1rem auto; position: absolute; content: ''; width: 0.18rem; height: 0.17rem; background-position: -0.3rem -5.79rem; margin-left: 0.15rem; top: 0.15rem; }


/* page7 */

.page7 { background: url(../img/page7/bg.jpg) center center no-repeat; background-size: cover; }

.page7  .title{ position: relative;z-index: 40; margin-top: 1.8rem;  font-size: .56rem; color: #ffdf91;  text-shadow: 0 0 2px #463814; text-transform: uppercase; left: 50%; transform: translate(-50%); width: 100%; line-height: 1; }
.page7  .title::after{ position: absolute; content: ''; background: url(../img/page3/p3icon.png) no-repeat; background-size: 8.03rem auto; background-position: -0.3rem -4.26rem; width: 6.41rem; height: 0.16rem; left: 50%; transform: translate(-50%); bottom: -0.2rem; }

.page7 .plBox{
    position: relative;
    margin: .8rem auto 0;
    width: 6.2rem;
    height: 7rem;
}
.page7 .plBox .pinglun1{
    width: 5.82rem;
    height: 6.73rem;
    background: url(../img/page7/plbg1.png) center center no-repeat;
    background-size: auto 6.73rem;
}
.page7 .plBox .pinglun2{
    width: 5.82rem;
    height: 6.73rem;
    background: url(../img/page7/plbg2.png) center center no-repeat;
    background-size: auto 6.73rem;
}

.page7 .plBox .pinglun3{
    width: 5.82rem;
    height: 6.73rem;
    background: url(../img/page7/plbg3.png) center center no-repeat;
    background-size: auto 6.73rem;
}
.page7 .plBox .pinglun4{
    width: 5.82rem;
    height: 6.73rem;
    background: url(../img/page7/plbg2.png) center center no-repeat;
    background-size: auto 6.73rem;
}

.page7 .plBox .pinglun5{
    width: 5.82rem;
    height: 6.73rem;
    background: url(../img/page7/plbg3.png) center center no-repeat;
    background-size: auto 6.73rem;
}
.page7 .plBox .pinglun6{
    width: 5.82rem;
    height: 6.73rem;
    background: url(../img/page7/plbg2.png) center center no-repeat;
    background-size: auto 6.73rem;
}





.page7  .pl-message{
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    width: 5.4rem;
    height: 5.6rem;
    top: .3rem;
}
.page7  .pl-message .img{
    height: 1.35rem;
    display: flex;
    align-items: center;
}
.page7  .pl-message .topicon{
    width: 4.36rem;
    margin: 0 auto;
}
.page7  .pinglun2 .topicon{
    width: 4.3rem;
}
.page7  .pinglun3 .topicon{
    width: 4.57rem;
}
.page7  .pinglun5 .topicon{
    width: 3rem;
}



.page7  .pl-message .pl-title{
    display: none;
    color: #e9c277;
    font-family: nsb;
    font-size: .28rem;
    line-height: .35rem;
    text-transform: uppercase;
    margin-top: .1rem;
}

.page7  .pl-message p{
    margin-top: .4rem;
    line-height: .4rem;
    color: #c9c9c9;
    font-size: .28rem;
    text-transform: uppercase;
    text-align: left;
}
.page7  .pl-message  a{
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 50%;
    color: #fff;
    font-size: .24rem;
    font-family: nsb;
    text-transform: uppercase;
    transform: translate(-50%);
}


.page7 .p7icon{ background: url(../img/page4/p4icon.png) no-repeat; background-size: 4.51rem auto; }
.page7 .page7_jd {     width: .55rem;
    height: .55rem;
    top: 50%;
    transform: translate(0, -50%); }
.page7 .page7_next::after,.page7 .page7_prev::after{content: '';}
.page7 .page7_next { background-position:-.3rem -12.37rem; right: -.4rem; }
.page7 .page7_prev { background-position:-.3rem -11.22rem; left: -.4rem; filter: drop-shadow(1px 1px .1rem #08162C)}

.page7 .page7_dian { height: auto; bottom:.7rem; width: auto; display: flex; justify-content: center; left: 50%; transform: translate(-50%); }
.page7 .page7_dian .swiper-pagination-bullet { background: url(../img/page4/p4icon.png) no-repeat; background-size: 4.51rem auto; width: 0.14rem; height: 0.14rem; background-position: -0.3rem -.3rem; opacity: 1; z-index: 60; margin-left: 0.3rem; }
.page7 .page7_dian .swiper-pagination-bullet-active { background-position: -.3rem  -1.04rem; box-shadow: 0 0 .2rem #fff; }


.page7 .pagebottom{
    position: absolute;
    bottom: 0;
    height: 4.81rem;
    width: 100%;
    background: url(../img/page7/bottombg.jpg) center center no-repeat;
    background-size: 100% 4.81rem;
}

.page7 .personMessage{
    margin: .35rem auto 0;
    width: 6.3rem;
    height: 4.2rem;
}
.page7 .personMessage .swiper{height: 100%;}
.page7 .personMessage .comtxt .txt{
    color: #ffe49a;
    font-size: .2rem;
    font-family: nsr;
    width: 95%;
    margin: 0.3rem auto 0;
    line-height: .3rem;
    text-align-last: left;
}
.page7 .personMessage .comtxt i{
    display: inline-block;
    width: 0.25rem;
    height: 0.25rem;
    background: url(../img/page7/maohao.png) no-repeat;
    background-size: .75rem auto;
}
.page7 .personMessage .comtxt .i1{
    background-position: .02rem  0.04rem;
    margin-right: .3rem;
}

.page7 .personMessage .comtxt .i2{
    background-position: -.48rem  0.04rem;
    margin-left: .3rem;
}
.page7 .personMessage .page7_btn {
    position: absolute;
    z-index: 20;
    height: 1.35rem;
    top: 2.5rem;
}


.page7 .personMessage .page7_btn  .swiper-pagination-bullet {
	outline:none;
    margin: 0 .25rem;
    opacity: .5;
    position: relative;
    border-radius: 0;
    width: .85rem;
    height: 0.85rem;
    background: url(../img/page7/txbox.png) center center no-repeat;
    background-size: .85rem auto;
}
.page7 .personMessage .page7_btn  .swiper-pagination-bullet i{
    position: absolute;
    border-radius: 50%;
    left: 0.04rem;
    top: 0.04rem;
    width: .77rem;
    height: .77rem;
 
}
.page7 .personMessage .page7_btn  .swiper-pagination-bullet:nth-child(1) i{
    background: url(../img/page7/tx1.jpg) center center no-repeat;
    background-size: 100% auto;
}
.page7 .personMessage .page7_btn  .swiper-pagination-bullet:nth-child(2) i{
    background: url(../img/page7/tx2.jpg) center center no-repeat;
    background-size: 100% auto;
}
.page7 .personMessage .page7_btn  .swiper-pagination-bullet:nth-child(3) i{
    background: url(../img/page7/tx3.jpg) center center no-repeat;
    background-size: 100% auto;
}



.page7 .personMessage .page7_btn  .swiper-pagination-bullet em{display: none;}

.page7 .personMessage .page7_btn  .swiper-pagination-bullet-active{
    opacity: 1;
    width: 1.1rem;
    height: 1.1rem;
 
    background-size: 1.1rem auto;
}

.page7 .personMessage .page7_btn  .swiper-pagination-bullet-active i{
    position: absolute;
    border-radius: 50%;
    left: 0.05rem;
    top: 0.04rem;
    width: 1rem;
    height: 1rem;
}

.page7 .personMessage .page7_btn  .swiper-pagination-bullet-active em{
    display: block;
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: -.2rem;
    height: 0.38rem;
    line-height: .38rem;
    width: 2.07rem;
    color: #091b35;
    font-size: .2rem;
    background: url(../img/page7/txbg.png) center center no-repeat;
    background-size: 2.07rem auto;
}


.page7 .personMessage .more{
    font-family: nsb;
    color: #fff;
    font-size: .2rem;
    position: absolute;
    z-index: 90;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
}






/* media */

.media { background: url(../img/media/bg.jpg) center center no-repeat; background-size: cover; }

.media .content { width: 7.5rem; margin: 0 auto; height: 100%; position: relative; }

.media  .titletop{    position: relative;padding-top: 1.5rem;}
.media .title { position: absolute;  font-size: .56rem; color: #ffdf91; text-shadow: 0 0 3px #463814; text-transform: uppercase; left: 50%; transform: translate(-50%); line-height: 1; z-index: 60; }
.media .content .title::before,
.media .content .title::after { position: absolute; content: ''; background: url(../img/page6/p6icon.png) no-repeat; background-size: 8.1rem auto; width:1.8rem; height: 0.07rem; top: .25rem; }
.media .content .title::before{ background-position: -.3rem  -2.88rem; right: -2rem; }
.media .content .title::after{ background-position: -.3rem  -2.21rem; left:  -2rem; }

.media .list{
    width: 6rem;
    height: auto;
    margin: 1rem auto 0;
}

.media  .art,.media  .video{
    position: relative;
    margin: 0 auto;
    width: 5.88rem;
    height: 3.77rem;
    background: url(../img/media/libg1.png) center center no-repeat; background-size: cover;
}

.media .screenshot{
    position: relative;
    margin: .3rem auto;
    width: 6rem;
    height: 4.01rem;
    background: url(../img/media/libg2.png) center center no-repeat; background-size: cover;

}


.media  .showimg{
    width: 5.40rem;
    position: absolute;
    left: 50%;
    top: .3rem;
    transform: translate(-50%);
}

.media .popimg{
    position: absolute;
    z-index: 30;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-70%);
    width: .59rem;
    height: .59rem;
    background: url(../img/media/look.png) center center no-repeat;
    background-size: 100% auto; 
}
.media .btn{
    position: absolute;
    top: 3rem;
    left: 50%;
    transform: translate(-50%);
    color: #222f43;
    font-size: .2rem;
    width:2.43rem;
    height: .61rem;
    line-height: .61rem;
    text-align: center;
    background: url(../img/media/btn.png) center center no-repeat;
    background-size: 100% auto;     
}


/* lang */
.lang_es  .media  .screenshot .btn {    font-size: .16rem;}

.lang_it  .media  .art .btn {    font-size: .18rem;}



/* history */

.historyPage { background: url(../img/history/bg.jpg) center center no-repeat; background-size: cover; }

.historyPage .content{ width: 100%; margin: 0 auto; height: 100%; position: relative; }

.historyPage  .title{ position: relative;z-index: 40; margin-top: 1.3rem;  font-size: .52rem; color: #ffdf91;  text-shadow: 0 0 2px #463814; text-transform: uppercase; left: 50%; transform: translate(-50%); width: 100%; line-height: 1; }
.historyPage  .title::after{ position: absolute; content: ''; background: url(../img/page3/p3icon.png) no-repeat; background-size: 8.03rem auto; background-position: -0.3rem -4.26rem; width: 6.41rem; height: 0.16rem; left: 50%; transform: translate(-50%); bottom: -0.2rem; }
.historyPage .title2{ position: relative;z-index: 40;margin: 0.2rem auto 0;font-size: .30rem; color: #fff; width: 7.2rem;    font-weight: normal;line-height: .4rem; }
.historyPage .title2 i{ color: #ffdf91; }

.historyPage .txtp1{

    color: #fff;
    font-size: .2rem;
    width: 96%;
    margin: .1rem auto;
	
}
.historyPage .bookMessage{
    position: relative;
    width: 100%;
    height: 10rem;
}

.historyPage .jiedianBox{
    position: absolute;
    z-index: 10;
    top: 1.5rem;
    left: -3.4rem;
    width: 4.21rem;
    height: 5.46rem;
    background: url(../img/history/boxbg.png) center center no-repeat;
    background-size: 4.21rem auto;
    transition: all .5s;
}
.historyPage .jiedianBox.on{
   left: 0;
}
.historyPage .hideAndshow{
    position: absolute;
    top: -0.3rem;
    height: 0.6rem;
    width: 100%;
    z-index: 10;
}
.historyPage .hideAndshow i{
    position: absolute;
    right: 0.18rem;
    width: 0.58rem;
    height: 0.56rem;
    background: url(../img/history/showIcon.png) center center no-repeat;
    background-size: 100% auto;
}
.historyPage .hideAndshow i.on{
    background: url(../img/history/hideIcon.png) center center no-repeat;
    background-size: 100% auto;  
}




.historyPage  .jiedianBox .list {
    position: absolute;
    width: 4.21rem;
    height: 5.46rem;
    
}
.historyPage  .jiedianBox .list ul{padding-top: .6rem;}
.historyPage  .jiedianBox .list .sp{
    position: absolute;
    width: 100%;
    font-size: .17rem;
    color: #fff;
    bottom: .1rem;
    z-index: 10;
    left: 0.15rem;
    text-align: left;
}
.historyPage  .jiedianBox li {
    position: relative;
    display: inline-block;
    margin-bottom: .15rem;
    margin-left: -.1rem;
    height: .57rem;
    line-height: .57rem;
    width: 4.48rem;
    background: url(../img/history/listbg1.png) center center no-repeat;
    background-size: 4.48rem auto;
    color: #fff;
    filter: drop-shadow(0 0.1rem .05rem #000);
}

.historyPage  .jiedianBox li span {
    position: absolute;
    left: .20rem;
    
    pointer-events: none;
}
.historyPage  .jiedianBox li small{
    font-size: .25rem;
}
.historyPage  .jiedianBox li em {
    display: inline-block;
    margin-left: .10rem;
    font-size: .13rem;
}

.historyPage  .jiedianBox li h4 {
    position: absolute;
    right: 0.4rem;
    font-size: .16rem;
    text-transform: uppercase;
    pointer-events: none;
}


.historyPage  .jiedianBox li.champion i {
    pointer-events: none;
    position: absolute;
    top: 0;
    right: -.2rem;
    width: .50rem;
    height: .5rem;
    background: url(../img/history/championIcon.png) center top no-repeat;
    background-size: 100% auto;
}

.historyPage  .jiedianBox li.champion {
    background: url(../img/history/championbg.png) center center no-repeat;
    background-size: 100% auto;
}

.historyPage  .jiedianBox li.champion {
    color: #19284c
}

.historyPage  .jiedianBox li.champion.on {
    background: url(../img/history/championbg2.png) center center no-repeat;
    background-size: 100% auto;
}



.historyPage  .jiedianBox li.on {
    background: url(../img/history/listbg2.png) center center no-repeat;
    background-size: 100% auto;
}

.historyPage  .jiedianBox li.on h4 {
    color: #ffe992;
}

.historyPage  .jiedianBox li.champion.on h4 {
    color: #19284c
}






.historyPage .bookBox{
    width: 100%;
    height: 8.43rem;
    background: url(../img/history/book.png) center center no-repeat;
    background-size: 100% auto;
    position: relative;
}
.historyPage .pageNumber {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
}
.historyPage .pageNumber.on{
    transition: opacity 1s ease-in-out;
    opacity: 1;
    z-index: 8;
}
.historyPage .PrevOn{
    transform: rotateY(-180deg);
    backface-visibility: visible;
    transform-origin: right center; 
    transition: transform .5s;
    z-index: 1;
}

.historyPage .booktxt .pagetxt{
    width: 75%;
    height: 6.5rem;
    overflow: hidden;
    padding-top: .4rem;
    margin-left: 1.2rem;
    text-align: left;
    padding-bottom: .5rem;
}

.historyPage .booktxt h3 {
    font-size: .34rem;
    text-align: left;
    color: #343434;
    line-height: .65rem;
    background: url(../img/history/btline.png) center bottom no-repeat;
    background-size: 100% auto;

}
.historyPage .booktxt .p1{
    font-size: .16rem;
    color: #343434;
    margin-top: .20rem;
    margin-bottom: .3rem;
    line-height: .30rem;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 5.5rem;
    padding-right: .20rem;
}
.historyPage .booktxt .p1 img{
    max-width: 100%;
    width: auto;
    height: auto;
}



.historyPage .booktxt .p1 a{
    word-wrap: break-word;
}
.historyPage .booktxt .p1 span{
    display: block;
}
.historyPage .bookfy{
    position: absolute;
    height: .7rem;
    width: 80%;
    left: 50%;
    bottom: .45rem;
    transform: translate(-50%);
    z-index: 10;
}
.historyPage .pageBtn {
    position: absolute;
    bottom: 0.07rem;
    z-index: 20;
    color: #402e22;
    font-size: .30rem;
    text-decoration: underline;
    text-underline-offset: .12rem;
    text-decoration-thickness: .02rem;
   width: auto;
  

}

.historyPage .pageBtn1 {
    left: 0;
    padding-left: .40rem;
}

.historyPage .pageBtn2 {
    right:0;
    padding-right: .40rem;
}

.historyPage .pageBtn1::after {
    content: '';
    position: absolute;
    left: 0;
    width: .25rem;
    height: .50rem;
    background: url(../img/history/jtBtn.png) left .15rem no-repeat;
    background-size: .23rem auto;
   
}

.historyPage .pageBtn2::after {
    content: '';
    position: absolute;
    right: 0;
    width: .25rem;
    height: .50rem;
    background: url(../img/history/jtBtn.png) left  0.02rem no-repeat;
    background-size: .23rem auto;
    transform: rotate(-180deg);
}

.historyPage .bookfy .dian{
        position: absolute;
        left: 50%;
        transform: translate(-50%);
        width: 2rem;
        height: 100%;
}

.historyPage .bookfy .dian i{
    display: inline-block;
    width: 0.15rem;
    height: 0.15rem;
    margin-top: .35rem;
    margin-right: .2rem;
    background: url(../img/history/dian1.png) center center no-repeat;
    background-size: .11rem auto;
}
.historyPage .bookfy .dian i.on{
    background: url(../img/history/dian2.png) center center no-repeat;
    background-size: .11rem auto;  
}



.historyPage .svbtn {
    position: absolute;
    height: .7rem;
    bottom: .80rem;
    width: 100%;
    text-align: center;
}

.historyPage .svbtn a {
    display: inline-block;
    font-size: .35rem;
    color: #4e3b2a;
    bottom: .30rem;
    line-height: .7rem;
    text-indent: .40rem;
    text-align: center;
    width: 2.53rem;
    height: .7rem;
}

.historyPage .sub {
    margin-right: .25rem;
    background: url(../img/history/subBtn.png) center center no-repeat;
    background-size: 100% auto;
}

.historyPage .vote {
    margin-left: .25rem;
    background: url(../img/history/voteBtn.png) center center no-repeat;
    background-size: 100% auto;
}

.historyPage .svbtn .tips{
    color: #fff;
    font-size: .14rem;
    margin-left: 3.20rem;
    margin-top: .05rem;   
}

/* footer */

.fp-auto-height{
    position: relative;
    background: #000;
}