.comPop{
    display: none;
    position: fixed;
    right: 50rem;
    top: 150rem;
    width: 300rem;
    height: 300rem;
}

.comPop .comimgbox{
    display: block;
    width: 300rem;
    height: 300rem;
    background: url(../img/choujiang.png) center center no-repeat;
    background-size: 100% auto;
}
.comPop .close{
    position: absolute;
    right:20rem;
    width: 40rem;
    height: 40rem;
    background: url(../img/close.png) center center no-repeat;
    background-size: 100% auto;
    transition: all .5s ease-in-out;
}
.comPop .close:hover {
    transform: rotate(360deg);
}

.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; }

.rowdownCom{position: absolute;z-index: 90; width: 160rem; height: 100rem; background-size: 250rem auto; background-position:-15rem -1908rem; cursor: pointer;margin-left: -80rem;left: 50%;}
.rowdown { bottom: 5rem;  animation: scroll_tip 1s  linear infinite alternate; display: none;}
.rowdownSmall{ bottom: 0rem;   background-size: 130rem auto; background-position: 0 -985rem;     height: 50rem;    width: 100rem;margin-left: -50rem;left: 50%;}

/* page1 */

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

.page1 .content { position: relative; z-index: 91;}

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

.page1 .play { width: 70rem; height: 70rem; background-size: 250rem; background-position: -12rem -1479rem; display: block; margin: -50rem auto 50rem; }

.page1 .zhucebtn { position: relative;  width: 620rem; height: 120rem; line-height: 105rem; font-weight: bold; background: url(../img/page1/zhuce.png) center center no-repeat; background-size: 100% auto; display: block; margin: 30rem auto 0; font-size: 29rem; }
.page1 .zhucebtn a{ color: #5a361e;display: block; width: 60%;margin: 0 auto;text-align: center;}

.page1 .zhucebtn  .line{ position: absolute; width: 371rem; height: 91rem; top: 8rem; left: 120rem; overflow: hidden; border-radius: 9rem; pointer-events: none; }
.page1 .zhucebtn  i { position: absolute; display: block; }

.page1 .zhucebtn  i:nth-child(1) { top: 0; left: 0; width: 100%; height: 4rem; background: linear-gradient(90deg,transparent,#f9e173); animation: animate1 1.5s linear infinite; }
.page1 .zhucebtn  i:nth-child(2) { top: -100%; right: 0; width: 4rem; 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: 4rem; 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: 2rem; 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: 300rem; height: 50rem; 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(36rem); }
.page1 .appBox{
    display: flex;
    justify-content: space-between;
    width: 1030rem;
    height: 70rem;
    margin: 0 auto 0;

}
.page1 .appBox a{
    position: relative;
    width: 236rem;
    height: 100%;
  
}
.page1 .appBox .midas{
    height: 112rem;
    margin-top: -43rem;
}
.page1 .appBox .midas2{
    height: 130rem;
    margin-top: -60rem;
}

.page1 .appBox a img{
    width: auto;
    height: 100%;
}
.page1 .appBox .midas img,.page1 .appBox .midas2 img{
    margin-left: -25rem;
}
.page1 .appBox .midas span{
    position: absolute;
    color: #050608;
    font-size: 25rem;
    text-align: center;
    line-height: 40rem;
    width: 100%;
    margin-left: -5rem;
    text-shadow: 0 0 1rem #fff5b7, 0 0 2rem #fff5b7, 0 0 2rem #fff5b7, 0 0 2rem #fff5b7, 0 0 2rem #fff5b7, 0 0 2rem #fff5b7, 0 0 2rem #fff5b7, 0 0 2rem #fff5b7, 0 0 2rem #fff5b7, 0 0 2rem #fff5b7, 0 0 2rem #fff5b7;
}
.page1 .appBox .midas2 span{
    position: absolute;
    color: #050608;
    white-space: nowrap;
    text-align: center;
    line-height: 48rem;
    width: 100%;
    text-shadow: 0 0 1rem #fff5b7, 0 0 2rem #fff5b7, 0 0 2rem #fff5b7, 0 0 2rem #fff5b7, 0 0 2rem #fff5b7, 0 0 2rem #fff5b7, 0 0 2rem #fff5b7, 0 0 2rem #fff5b7, 0 0 2rem #fff5b7, 0 0 2rem #fff5b7, 0 0 2rem #fff5b7;
}
.page1 .appBox .midas2 span:nth-child(1){
    top: -2rem;
    font-size: 17rem;
}
.page1 .appBox .midas2 span:nth-child(2){
    top: 18rem;
    font-size: 26rem;
    color: #7d2415;
    font-weight: bold;
}







.page1 .appBox a:hover{
    filter: drop-shadow(1rem 1rem 5rem #fff);
}

.page1 .appBox .ewm{
    display: none;
    width: 200rem;
    height: 220rem;
    background: url(../img/page1/ewmbox.png) center center no-repeat;
    background-size: 100% auto;
    position: absolute;
    top: -215rem;
    z-index: 99;
    left: 50%;
    transform: translate(-50%);
}
.page1 .appBox .ewm img{
    width: 140rem;
    display: block;
    margin: 34rem auto 0;
    height: 140rem;
    border-radius: 8rem;
}

.page1 .appBox a:hover .ewm{display: block;}





/* page2 */

.page2 { background: url(../img/page2/map.jpg) center center no-repeat; background-size: cover; position: relative; }
.page2 .juanzhou-left{ width: 263rem; height: 100%; margin: 0 auto; position: absolute; background: url(../img/page2/leftzhou.png) no-repeat; background-size:  100% 100%; z-index: 60; left: 0; }
.page2 .juanzhou-right{ width: 173rem; height: 100%; margin: 0 auto; position: absolute; background: url(../img/page2/rightzhou.png) no-repeat; background-size: 100% 100%; z-index: 60; right: 0; }
.page2 .content { width: 2130rem; height: auto;     margin: 50rem auto 0; position: relative; z-index: 99;}

.page2 .title { width: 100%; }

.page2 .title h3 { color: #e9c277; font-size: 90rem;  text-shadow: 0 0 8rem #513c09; text-align: center;}

.page2 .title small {text-align: center; position: relative; font-size: 22rem; color: #ffe698; display: block; width: 100%; height: 65rem; line-height: 58rem; background: url(../img/page2/smallbg.png) center center no-repeat; background-size: 100% auto; font-family: nsb;  text-shadow: 0 0 4rem #513c09;text-transform: uppercase; }

.page2 .giftbox { width: 2130rem; height: auto; margin: 50rem auto 0; position: relative; z-index: 30;pointer-events: none; }

.page2 .giftbox .list { display: flex; justify-content: space-around; }

.page2 .giftbox .list li {
    position: relative;
    width: 260rem;
    height: 500rem;
    background: url(../img/page2/bg-h.png) center center no-repeat;
    background-size: 100% auto;
}

.page2 .giftbox .list li.get { background: url(../img/page2/bg-l.png) center center no-repeat; background-size: 100% auto; }


.page2 .giftbox .list li.on { width: 300rem; height: 550rem; background: url(../img/page2/bg-j.png) center center no-repeat; background-size: 100% auto; margin-top: -30rem;margin-left: -30rem; }

.page2 .giftbox .list li h4 {font-family: nsb;  color: #cbc7bc; font-size: 30rem; position: absolute; left: 17rem; top: 50rem; text-shadow: 0 0 5rem #816223; width: 200rem;text-align: center; }

.page2 .giftbox .list li p { position: absolute; color: #cbc7bc; font-size: 16rem; line-height: 22rem; width: 195rem; top: 290rem; left: 20rem; text-align: center; }
.page2 .giftbox .list li p span{display: block;}
.page2 .giftbox .list li em { position: absolute; bottom: 50rem; color: #878d94; font-size: 38rem; width: 200rem; left: 18rem;text-align: center; }

.page2 .giftbox .list li img { position: absolute; left: 40rem; top: 100rem; width: 168rem; -webkit-filter: drop-shadow(0rem 0rem 20rem #c8c4b9); filter: drop-shadow(0rem 0rem 20rem #c8c4b9); }




.page2 .giftbox .list li:nth-child(4) img { width: 150rem; left: 42rem; }
.page2 .giftbox .list li:nth-child(5) .page2-Hero { width: 138rem; left: 47rem;top: 90rem;background: url(../img/page2/gift3M.png) center center no-repeat;background-size: 100%; height: 165rem;
    position: absolute;
    filter: drop-shadow(0rem 0rem 20rem #fff);    
}

.page2 .giftbox .list li:nth-child(3) p,
.page2 .giftbox .list li:nth-child(4) p,
.page2 .giftbox .list li:nth-child(5) p { top: 310rem; }
.page2 .giftbox .list li:nth-child(6) img { width: 150rem; left: 50rem; }

.page2 .giftbox .list li.get h4 { color: #ffdf91; }

.page2 .giftbox .list li.get p { color: #fff; }

.page2 .giftbox .list li.get em { color: #678db4; }

.page2 .giftbox .list li.get img { -webkit-filter: drop-shadow(0rem 0rem 20rem #63b0ff); filter: drop-shadow(0rem 0rem 20rem #63b0ff); }


.page2 .giftbox .list li.on h4 { color: #3b2d0f; width: 230rem; left:29rem}

.page2 .giftbox .list li.on p { color: #0a152e; top: 325rem;left: 42rem;width: 210rem; }

.page2 .giftbox .list li.on em { width: 230rem; color: #233648; bottom: 60rem;left: 29rem; }


.page2 .giftbox .list li.on img { left: 65rem; top: 120rem; width: 165rem; -webkit-filter: drop-shadow(0rem 0rem 20rem #fff); filter: drop-shadow(0rem 0rem 20rem #fff); }

.page2 .giftbox .list li.on:nth-child(4) img { width: 160rem; left: 64rem; top: 105rem; }
.page2 .giftbox .list li.on:nth-child(3) p,
.page2 .giftbox .list li.on:nth-child(4) p,
.page2 .giftbox .list li.on:nth-child(5) p { top: 350rem; }
.page2 .giftbox .list li.on:nth-child(5) .page2-Hero {width: 130rem; left: 80rem; top: 110rem;  background: url(../img/page2/gift3M-on.png) center center no-repeat;background-size: 100%;}

.page2 .giftbox .list li.on:nth-child(6) img {   top: 105rem; }



.page2 .giftbox .jindu { width: 1820rem; height: 270rem; background: url(../img/page2/luxian1.png) top center no-repeat; background-size: 100% auto; margin: -60rem auto 0; position: relative; }

.page2 .jindu li { position: absolute; z-index: 30; width: 70rem; height: 80rem; background: url(../img/icon.png) center center no-repeat; background-size: 300rem auto; background-position: -20rem -2006rem;}



.page2 .jindu li:nth-child(1) { left: -24rem; top: 60rem;}

.page2 .jindu li:nth-child(2) { left: 333rem; top: 105rem; }

.page2 .jindu li:nth-child(3) { left: 680rem; top: 92rem; }

.page2 .jindu li:nth-child(4) { left: 1035rem; top: 83rem; }

.page2 .jindu li:nth-child(5) { left: 1390rem; top: 45rem; }
.page2 .jindu li:nth-child(6) { right: 0; top: 83rem; }

.page2 .giftbox .jindu.on_1 li:nth-child(1),
.page2 .giftbox .jindu.on_2 li:nth-child(1),.page2 .giftbox .jindu.on_2 li:nth-child(2),
.page2 .giftbox .jindu.on_3 li:nth-child(1),.page2 .giftbox .jindu.on_3 li:nth-child(2),.page2 .giftbox .jindu.on_3 li:nth-child(3),
.page2 .giftbox .jindu.on_4 li:nth-child(1),.page2 .giftbox .jindu.on_4 li:nth-child(2),.page2 .giftbox .jindu.on_4 li:nth-child(3),.page2 .giftbox .jindu.on_4 li:nth-child(4),
.page2 .giftbox .jindu.on_5 li:nth-child(1),.page2 .giftbox .jindu.on_5 li:nth-child(2),.page2 .giftbox .jindu.on_5 li:nth-child(3),.page2 .giftbox .jindu.on_5 li:nth-child(4),.page2 .giftbox .jindu.on_5 li:nth-child(5) ,
.page2 .giftbox .jindu.on_6 li:nth-child(1),.page2 .giftbox .jindu.on_6 li:nth-child(2),.page2 .giftbox .jindu.on_6 li:nth-child(3),.page2 .giftbox .jindu.on_6 li:nth-child(4),.page2 .giftbox .jindu.on_6 li:nth-child(5) ,.page2 .giftbox .jindu.on_6 li:nth-child(6) 
{ background-position: -20rem -1890rem; }



.page2 .giftbox .on_2::after,
.page2 .giftbox .on_3::after,
.page2 .giftbox .on_4::after,
.page2 .giftbox .on_5::after ,
.page2 .giftbox .on_6::after
{ content: ''; width: 1820rem; height: 270rem; left: 0; top: -7rem; position: absolute; background: url(../img/page2/luxian-on1.png) center center no-repeat; background-size: 100% auto; }

.page2 .giftbox .on_1::before,
.page2 .giftbox .on_2::before,
.page2 .giftbox .on_3::before,
.page2 .giftbox .on_4::before,
.page2 .giftbox .on_5::before ,
.page2 .giftbox .on_6::before { 
    content: '';
    width: 220rem;
    height: 125rem;
    position: absolute;
    background: url(../img/page2/qibing.png) center center no-repeat;
    background-size: 2000rem auto;
    background-position: -10rem 0;
    z-index: 40;
    animation: qibingicon 1.2s steps(8, end) infinite;
    -webkit-animation: qibingicon 1.2s steps(8, end) infinite;
}






.page2 .giftbox .on_1::before{ left: -56rem; top: 32rem; }
.page2 .giftbox .on_2::before{ left: 285rem; top: 63rem; }
.page2 .giftbox .on_3::before{ left: 630rem; top: 50rem; }

.page2 .giftbox .on_4::before{ left: 1000rem; top: 45rem; }
.page2 .giftbox .on_5::before{ left: 1357rem; top: 8rem; }
.page2 .giftbox .on_6::before{ right: -120rem; top: 40rem; }

.page2 .giftbox .on_2::after { clip: rect(0rem, 350rem, 270rem, 0); }

.page2 .giftbox .on_3::after { clip: rect(0rem, 700rem, 270rem, 0); }

.page2 .giftbox .on_4::after { clip: rect(0rem, 1030rem, 270rem, 0); }

.page2 .giftbox .on_5::after { clip: rect(0rem, 1420rem, 270rem, 0); }

.page2 .giftbox .on_6::after { clip: rect(0rem, 1800rem, 270rem, 0); }







.page2 .yun{
    position: absolute; width: 100%; height: 100%; z-index: 41; left: 0; top: 0;  
    background: url(../img/page2/yun.png) center center no-repeat;
    background-size:cover;
    animation: yunshan 2.5s linear infinite alternate;
}



.page2 .ycgift{ color: #ffe698; position: absolute; width: 70rem; height: 172rem; background: url(../img/page2/yc-gift.png) center center no-repeat; background-size: 100% auto; z-index: 50; top: 90rem; right: 17rem; font-size: 8rem;    cursor: unset;     text-align: center;}
.page2 .ycgift span{ position: absolute; bottom: 57rem; left: 50%; margin-left: -23rem; width: 42rem; }
.page2 .zhucebtn {text-align: center;  width: 620rem; height: 120rem; line-height: 109rem; font-weight: bold; background: url(../img/page1/zhuce.png) center center no-repeat; background-size: 100% auto; display: block; margin:-40rem auto 0; color: #5a361e; font-size: 30rem;text-transform: uppercase; }


/* page3 */

.page3 { background: url(../img/page3/bg.jpg) center center no-repeat; background-size: cover; position: relative; }
.page3 .content{width: 100%;height: 100%;position: relative;}
.page3 .toptxt{ position: absolute; width: auto; top: 200rem; left: 100rem; text-align: left; z-index: 30; transform: translate(113rem, 0); opacity: 0;pointer-events: none; }

.page3 .toptxt h3{ 
    position: relative;
     font-weight: bold; color: #e9c277; font-size: 60rem;line-height: 1; padding-bottom: 25rem;text-shadow: 0rem 0rem 5rem #513c09;
    background: url(../img/page3/line.png) left bottom no-repeat; background-size: 530rem auto; 
    text-transform: uppercase;

}

.page3 .toptxt  small{ font-size: 21rem; color: #fff; margin-top: 18rem; display: block; line-height: 42rem; width: 610rem;}
.page3 .toptxt  small i { font-family: nsb;}
.page3 .toptxt  small em{ color: #ffdf91; }



.page3 .anleft{ transition: opacity 1s ease 0s, transform 1s ease 0s; opacity: 1; transform: translate(0rem, 0rem); }
.page3 .lunBox{ position: absolute; height: 100%; width: 70%; right: 0; }
.page3 .lunBox .swiper-container{ height: 100%; width: 100%; }

.page3 .lunBox .page3_jd{ width: 35rem; height: 60rem; top: 50%; margin-top: -120rem;filter: drop-shadow(1rem 1rem 10rem #08162C);}
.page3 .lunBox .page3_next{ background: url(../img/icon.png)  no-repeat; background-size: 300rem auto; background-position: -18rem -1032rem; right: 5%; }
.page3 .lunBox .page3_prev{ background: url(../img/icon.png)  no-repeat; background-size:300rem auto; background-position: -18rem -947rem; left: 15%; }

.page3 .lunBox .imgbox{ 
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -500rem;
    width: 101%;
    height: 1050rem;
    overflow: hidden;
    background-size:cover;
    background-position: center  right;
    background-repeat: no-repeat;
    opacity: 0;
 }

.page3 .lunBox .boxMask {
    opacity: 1;
    display: block;
    z-index: 10;
    -webkit-mask: url(../img/page3/mask_up.png);
    -webkit-mask-size: 900% 98%;
    -webkit-mask-position: 0 0;
    animation: mask .8s steps(8) forwards;
}




.page3 .lunBox  .biaoti{text-align: center; right: 50%;margin-right: -730rem; position: absolute;z-index: 15; width: 1160rem; height: 240rem; background: url(../img/page3/lb-txtbg.png) center bottom no-repeat; background-size: 100% auto; bottom: 130rem; }
.page3 .lunBox  .biaoti h4{ font-family: nsb;  font-size:52rem; color: #482e10; line-height: 1; margin-top: 50rem; text-shadow: 0 0 20rem #ffd339; }

.page3 .lunBox  .biaoti  small{ display: block; font-family: nsb;   color: #482e10; line-height: 1; font-size: 33rem; margin-top: 15rem; position: relative; text-shadow: 0 0 20rem #ffd339; }

.page3 .lunBox  .biaoti  small::after{ content: ''; position: absolute; background: url(../img/icon.png) no-repeat; background-size: 300rem; background-position: -150rem -45rem; width: 300rem; height: 33rem; }
.page3 .lunBox  .biaoti  small::before{ content: ''; position: absolute; background: url(../img/icon.png) no-repeat; background-size: 300rem; background-position: -135rem 0rem; width: 172rem; height: 33rem; margin-left: -172rem; }

.page3 .page3_dian{ height: 66rem; bottom: 80rem; width: auto; display: flex; right: 50%;margin-right: -730rem; left: auto; justify-content: space-evenly;z-index: 50; }
.page3 .page3_dian::after{ content: ''; position: absolute; height: 2rem; bottom: 35rem; width: 100%; background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(226, 196, 132, 1) 50%, rgba(255, 0, 0, 0)); }

.page3 .page3_dian .swiper-pagination-bullet{ width: auto; height: 60rem; background: none; position: relative; z-index: 30; opacity: 1; background: url(../img/icon.png) no-repeat; background-position: 67rem -344rem; background-size: 300rem; }

.page3 .page3_dian .swiper-pagination-bullet em{ display: block; margin-top: 48rem; font-size: 16rem; width: 190rem;color: #fff; text-transform: uppercase;}

.page3 .page3_dian .swiper-pagination-bullet-active{ height: 60rem; background: url(../img/page3/dian2.png) center center no-repeat; background-size: 60rem auto; }

.page3 .page3_dian .swiper-pagination-bullet-active em{  color: #ffdf91; }



/* page4 */
.page4 { width: 100%; height: 100%; position: relative; }
.page4 .content{width: 100%;height: 100%;position: relative;}
.page4 .bg{ position: relative; z-index: 50; width: 100%; height: 100%; background: url(../img/page4/bg.png) no-repeat center center; background-size: cover; }
.page4 .title { position: absolute; left: 50%; top: 130rem; transform: translate(-50%);  color: #ffdf91; z-index: 60; }
.page4 .title h4{ font-size: 70rem; text-shadow: 0 0 5rem #513c09; position: relative;text-align: center; }
/* .page4 .title h4::after{ content: ''; position: absolute; height: 15rem; width: 400rem; background: url(../img/icon.png)  no-repeat; background-position:  -30rem -248rem; left: -420rem; top: 33rem; }
.page4 .title h4::before{ content: ''; position: absolute; height: 15rem; width: 400rem; background: url(../img/icon.png)  no-repeat; background-position: -30rem -323rem; right: -420rem; top: 33rem; } */


.page4 .videoBox{ position: absolute; width: 100%; height: 100%; z-index: 40; }

.page4  .swiper-container{ width: 100%; height: 100%; }
.page4  .bowen{ position: relative; z-index: 50; width: 100%; height: 100%; background: url(../img/page4/bowenbg.png) no-repeat center center; background-size: 100% 100%; pointer-events: none; }
.page4 .herobg{
    position: absolute;
    right: 0;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 35;
}
.page4 .herobg1{
    background: url(../img/page4/herobg1.png) center center no-repeat;
    background-size: cover;
}
.page4 .herobg2{
    background: url(../img/page4/herobg2.png) center center no-repeat;
    background-size: cover;
}
.page4 .herobg3{
    background: url(../img/page4/herobg3.png) center center no-repeat;
    background-size: cover;
}
.page4 .herobg4{
    background: url(../img/page4/herobg4.png) center center no-repeat;
    background-size: cover;
}
.page4 .herobg5{
    background: url(../img/page4/herobg5.png) center center no-repeat;
    background-size: cover;
}
.page4 .herobg6{
    background: url(../img/page4/herobg6.png) center center no-repeat;
    background-size: cover;
}

.page4 .herobg7{
    background: url(../img/page4/herobg7.png) center center no-repeat;
    background-size: cover;
}

.page4 .herobg8{
    background: url(../img/page4/herobg8.png) center center no-repeat;
    background-size: cover;
}

.page4  .videobg{ background-size: cover; position: absolute; top: 0; width: 100%; height: 100%; }
.page4  .hero .heroComimg{ position: absolute; right: 0; bottom: 0; z-index: 74; width: 1035rem; transform: translate(250rem, 0); opacity: 0; }

.page4  .hero .heroimg2{right:0;width: 925rem;}
.page4  .hero .heroimg3{right:0;width: 950rem;}

.page4  .hero .heroimg4{right:0;width: 725rem;}

.page4  .hero .heroimg5{right:0;width:980rem;}

.page4  .hero .heroimg6{right:0;width:1150rem;}

.page4  .hero .heroimg7{right:0;width:810rem;}

.page4  .hero .heroimg8{right:0;width:1100rem;}

.page4  .hero .heroimg9{right:0;width:950rem;}

.page4  .hero .heroimg10{right:0;width:1530rem;}

.page4  .hero .heroimg11{right:0;width:1050rem;}

.page4  .hero .heroimg12{right:0;width:1140rem;}

.page4  .hero .heroimg13{right:0;width:1600rem;}


.page4  .hero .heroimg14{right:0;width:1050rem;}


.page4 .hero .herotxtbox{ position: absolute; right: 50rem; bottom: 150rem; width: auto; height: 200rem; z-index: 80; transform: translate(250rem, 0); opacity: 0; }
.page4 .hero .herotxtbox h5{ font-family: spdb; color: #ffdf91; font-size: 66rem; text-align: right; margin-right: 25rem;  text-transform: uppercase;}
.page4 .hero .herotxtbox .heroCombq {
    height: 90rem;
    width: 490rem;
    background: url(../img/page4/heroIcon.png) no-repeat;
    background-position: right -291rem;
    background-size: 500rem auto;
    margin-top: 20rem;
    position: absolute;
    right: 0;
 }
.page4 .hero .herotxtbox .heroCombq span{  
    color: #ffdf91;
    font-size: 28rem;
    font-weight: bold;
    margin-right: 30rem;
    text-transform: uppercase;
    text-align: center;
    width: 210rem;
    position: absolute;
    left: 17rem;
    height: 60rem;
    top: 15rem;
    line-height: 60rem;
}

.page4 .hero .herotxtbox .heroCombq  .smicon{
    height: 100%;
    position: absolute;
    left: 230rem;
 }
.page4 .hero .herotxtbox .heroCombq  .smicon i{ background: url(../img/page4/heroIcon.png) no-repeat;    background-size: 726rem auto; width: 50rem; height: 100%; display: inline-block; margin-right: 20rem; }

.page4 .hero .herotxtbox .heroCombq  .smicon i:nth-child(1){ background-size: 500rem; width: 70rem; margin-right:15rem; }

.page4 .hero .herotxtbox .heroicon1  .smicon i:nth-child(1){ background-position: -13rem -172rem; }
.page4 .hero .herotxtbox .heroicon1  .smicon i:nth-child(2){ background-position:-32rem -11rem; }
.page4 .hero .herotxtbox .heroicon1  .smicon i:nth-child(3){ background-position:-30rem -126rem; }

.page4 .hero .herotxtbox .heroicon2  .smicon i:nth-child(1){ background-position: -13rem -172rem; }
.page4 .hero .herotxtbox .heroicon2  .smicon i:nth-child(2){ background-position:-32rem -11rem; }
.page4 .hero .herotxtbox .heroicon2  .smicon i:nth-child(3){ background-position:-143rem -130rem; }


.page4 .hero .herotxtbox .heroicon3  .smicon i:nth-child(1){ background-position: -32rem -552rem;}
.page4 .hero .herotxtbox .heroicon3  .smicon i:nth-child(2){ background-position:-30rem -126rem; }

.page4 .hero .herotxtbox .heroicon4  .smicon i:nth-child(1){ background-position: -32rem -552rem;}
.page4 .hero .herotxtbox .heroicon4  .smicon i:nth-child(2){ background-position:-32rem -11rem; }

.page4 .hero .herotxtbox .heroicon5  .smicon i:nth-child(1){ background-position: -13rem -416rem;}
.page4 .hero .herotxtbox .heroicon5  .smicon i:nth-child(2){ background-position:-30rem -126rem; }
.page4 .hero .herotxtbox .heroicon5  .smicon i:nth-child(3){ background-position:-150rem -11rem;  }


.page4 .hero .herotxtbox .heroicon6  .smicon i:nth-child(1){ background-position:-32rem -552rem;}
.page4 .hero .herotxtbox .heroicon6  .smicon i:nth-child(2){ background-position:-30rem -126rem; }
.page4 .hero .herotxtbox .heroicon6  .smicon i:nth-child(3){ background-position:-143rem -130rem }

.page4 .hero .herotxtbox .heroicon7  .smicon i:nth-child(1){ background-position:-32rem -552rem;}
.page4 .hero .herotxtbox .heroicon7  .smicon i:nth-child(2){ background-position:-30rem -126rem; }

.page4 .hero .herotxtbox .heroicon8  .smicon i:nth-child(1){ background-position:-32rem -552rem;}
.page4 .hero .herotxtbox .heroicon8  .smicon i:nth-child(2){ background-position:-30rem -126rem; }

.page4 .hero .herotxtbox .heroicon9  .smicon i:nth-child(1){ background-position:-13rem -172rem;}
.page4 .hero .herotxtbox .heroicon9  .smicon i:nth-child(2){ background-position:-30rem -126rem; }

.page4 .hero .herotxtbox .heroicon9  .smicon i:nth-child(1){ background-position:-13rem -172rem;}
.page4 .hero .herotxtbox .heroicon9  .smicon i:nth-child(2){ background-position:-30rem -126rem; }

.page4 .hero .herotxtbox .heroicon10  .smicon i:nth-child(1){ background-position:-13rem -416rem;}
.page4 .hero .herotxtbox .heroicon10  .smicon i:nth-child(2){ background-position:-150rem -11rem }

.page4 .hero .herotxtbox .heroicon11  .smicon i:nth-child(1){ background-position:-32rem -552rem;}
.page4 .hero .herotxtbox .heroicon11  .smicon i:nth-child(2){ background-position:-143rem -130rem }

.page4 .hero .herotxtbox .heroicon12  .smicon i:nth-child(1){ background-position:-13rem -172rem}
.page4 .hero .herotxtbox .heroicon12  .smicon i:nth-child(2){background-position: -150rem -11rem }
.page4 .hero .herotxtbox .heroicon12  .smicon i:nth-child(3){ background-position:-143rem -130rem }

.page4 .hero .herotxtbox .heroicon13  .smicon i:nth-child(1){ background-position:-13rem -416rem;}
.page4 .hero .herotxtbox .heroicon13  .smicon i:nth-child(2){ background-position:-150rem -11rem }

.page4 .hero .herotxtbox .heroicon14  .smicon i:nth-child(1){ background-position:-13rem -172rem;}
.page4 .hero .herotxtbox .heroicon14  .smicon i:nth-child(2){ background-position:-143rem -130rem }


.page4  .hero .herotxtimg{ position: absolute; right: 50rem; bottom: 150rem; width: 790rem; height: auto; z-index: 75; /*transform: translate(250rem, 0); opacity: 0; */; }
.page4 .hero .anright{ transition: opacity 1s ease 0s, transform 1s ease 0s; opacity: 1; transform: translate(0rem, 0rem); }
.page4  .hero .small{ position: absolute; left: 65rem; color: #f4ce7b;  font-size: 21rem; bottom: 85rem; z-index: 60; }
.page4 .page4_dian{ height: auto; bottom: 50rem; width: auto; display: flex; right: 72rem; left: auto; justify-content: space-evenly; }
.page4 .page4_dian .swiper-pagination-bullet{ width: 19rem; height: 17rem; background: url(../img/icon.png) no-repeat; background-position: -18.5rem -378rem; background-size: 310rem; opacity: 1; z-index: 60; margin-left: 25rem; }
.page4 .page4_dian .swiper-pagination-bullet-active{ background: url(../img/icon.png) no-repeat; background-position: -23rem -376rem; background-size:360rem; box-shadow: 0 0 20rem #fff; }
.page4 .videoBox video{ position: absolute; width: auto; height: auto; min-height: 100%; min-width: 100%; left: 50%; top: 0; transform: translate(-50%, 10%); }
.page4 .videoBox .page4_jd{ width: 35rem; height: 60rem; filter: drop-shadow(1rem 1rem 10rem #08162C);}
.page4 .videoBox .page4_next{ background: url(../img/icon.png)  no-repeat; background-size: 300rem auto; background-position: -18rem -1032rem; right: 5%; }
.page4 .videoBox .page4_prev{ background: url(../img/icon.png)  no-repeat; background-size:300rem auto; background-position: -18rem -947rem; left: 5%; }


/* page5 */

.page5{ background-color: #02213e; }
.page5 .content{width: 100%;height: 100%;position: relative;  }
.page5 .toptxt{ position: absolute; width:auto;min-width: 730rem; top: 200rem; left: 100rem; text-align: left; z-index: 999; pointer-events: none; }

.page5 .toptxt h3{     

    color: #ffdf91;
    font-size: 70rem;
    background: url(../img/page3/line.png) left bottom no-repeat;
    background-size: 710rem auto;
    line-height: 1;
    padding-bottom: 25rem;
    text-transform: uppercase;
    text-shadow: 0 0 6rem #513c09;}
.page5 .toptxt  small{ font-size: 24rem; color: #fff; font-family: nsb; margin-top: 18rem; display: block; line-height: 30rem;    text-shadow: 0 0 6rem #513c09;     text-transform: uppercase;}
.page5 .toptxt  small em{ color: #ffdf91; }

.page5 .teseBox{ position: relative; width: 100%; height: 100%; display: flex; }
.page5 .teseBox .box{ height: 100%; position: absolute;  width: 12.5%; top: 0; } 

.page5 .teseBox .box1{left:0;}
.page5 .teseBox .box2{ left:12.5%; }
.page5 .teseBox .box3{ left: 25%; }
.page5 .teseBox .box4{ left: 37.5%; }
.page5 .teseBox .box5{ left:50%; }
.page5 .teseBox .box6{ left: 62.5%; }
.page5 .teseBox .box7{ left: 75%; }
.page5 .teseBox .box8{ left: 87.5%; }

.page5 .teseBox .box .te-txt{
    position: absolute; width: 220%; height: 100%; top: 0;   
}

.page5 .teseBox .box1 .te-txt{ background: url(../img/page5/french-bg.jpg) center center no-repeat; background-size: cover; clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 0% 100%) ;  }
.page5 .teseBox .box2 .te-txt{ background: url(../img/page5/byzantine-bg.jpg) center center no-repeat; background-size: cover; clip-path: polygon(15% 0%, 100% 0%, 83% 100%, 0% 100%);   }
.page5 .teseBox .box3 .te-txt{ background: url(../img/page5/romans-bg.jpg) center right  no-repeat; background-size: cover; clip-path: polygon(15% 0%, 100% 0%, 83% 100%, 0% 100%);   }
.page5 .teseBox .box4 .te-txt{ background: url(../img/page5/chinese-bg.jpg) center right  no-repeat; background-size: cover; clip-path: polygon(15% 0%, 100% 0%, 83% 100%, 0% 100%);    }
.page5 .teseBox .box5 .te-txt{ background: url(../img/page5/japanese-bg.jpg) center right  no-repeat; background-size: cover; clip-path: polygon(15% 0%, 100% 0%, 83% 100%, 0% 100%);  }
.page5 .teseBox .box6 .te-txt{ background: url(../img/page5/korean-bg.jpg) center right  no-repeat; background-size: cover; clip-path: polygon(15% 0%, 100% 0%, 83% 100%, 0% 100%);   }
.page5 .teseBox .box7 .te-txt{ background: url(../img/page5/british-bg.jpg) center right  no-repeat; background-size: cover; clip-path: polygon(15% 0%, 100% 0%, 83% 100%, 0% 100%);  }
.page5 .teseBox .box8 .te-txt{ background: url(../img/page5/egyptian-bg.jpg) center right  no-repeat; background-size: cover; clip-path: polygon(19% 0%, 100% 0%, 100% 100%, 0% 100%);  }




.page5 .teseBox .box.on .te-txt{    width: 120%;}

.page5 .teseBox .box1.on{ width: 47%; z-index: 20; clip-path:polygon(0% 0%, 100% 0%, 91% 100%, 0% 100%); }
.page5 .teseBox.tb1 .box2{ left: 42.8%; }
.page5 .teseBox.tb1 .box3{ left: 51%; }
.page5 .teseBox.tb1 .box4{ left: 59%; }
.page5 .teseBox.tb1 .box5{ left: 67%; }
.page5 .teseBox.tb1 .box6{ left: 75%; }
.page5 .teseBox.tb1 .box7{ left: 83%; }
.page5 .teseBox.tb1 .box8{ left: 91%; }


.page5 .teseBox .box2.on{ width: 40.5%; z-index: 20; }
.page5 .teseBox .box2.on .te-txt{ clip-path: polygon(15% 0%, 100% 0%, 91.5% 100%, 0% 100%); }
.page5 .teseBox.tb2 .box2{ left: 7%; }
.page5 .teseBox.tb2 .box3{ left: 51%; }
.page5 .teseBox.tb2 .box4{ left: 59%; }
.page5 .teseBox.tb2 .box5{ left: 67%; }
.page5 .teseBox.tb2 .box6{ left: 75%; }
.page5 .teseBox.tb2 .box7{ left: 83%; }
.page5 .teseBox.tb2 .box8{ left: 91%; }


.page5 .teseBox .box3.on{ width: 43.5%; z-index: 20;}
.page5 .teseBox .box3.on .te-txt{ clip-path: polygon(8% 0%, 100% -60%, 87% 100%, 0% 100%) }
.page5 .teseBox.tb3 .box2{ left: 7%; }
.page5 .teseBox.tb3 .box3{ left: 14.5%; }
.page5 .teseBox.tb3 .box4{ left: 59%; }
.page5 .teseBox.tb3 .box5{ left: 67%; }
.page5 .teseBox.tb3 .box6{ left: 75%; }
.page5 .teseBox.tb3 .box7{ left: 83%; }
.page5 .teseBox.tb3 .box8{ left: 91%; }


.page5 .teseBox .box4.on{ width: 43.5%; z-index: 20; }
.page5 .teseBox .box4.on .te-txt{ clip-path: polygon(8% 0%, 100% -60%, 87% 100%, 0% 100%) }
.page5 .teseBox.tb4 .box2{ left: 7%; }
.page5 .teseBox.tb4 .box3{ left: 14.5%; }
.page5 .teseBox.tb4 .box4 { left: 22.2%; }
.page5 .teseBox.tb4 .box5{ left: 67%; }
.page5 .teseBox.tb4 .box6{ left: 75%; }
.page5 .teseBox.tb4 .box7{ left: 83%; }
.page5 .teseBox.tb4 .box8{ left: 91%; }

.page5 .teseBox .box5.on{ width: 43.5%; z-index: 20; }
.page5 .teseBox .box5.on .te-txt{ clip-path: polygon(8% 0%, 100% -60%, 87% 100%, 0% 100%) }
.page5 .teseBox.tb5 .box2{ left: 7%; }
.page5 .teseBox.tb5 .box3{ left: 14.5%; }
.page5 .teseBox.tb5 .box4 { left: 22.2%; }
.page5 .teseBox.tb5 .box5{ left: 30%; }
.page5 .teseBox.tb5 .box6{ left: 75%; }
.page5 .teseBox.tb5 .box7{ left: 83%; }
.page5 .teseBox.tb5 .box8{ left: 91%; }


.page5 .teseBox .box6.on{ width: 43.5%; z-index: 20; }
.page5 .teseBox .box6.on .te-txt{ clip-path: polygon(8% 0%, 100% -60%, 87% 100%, 0% 100%)  }
.page5 .teseBox.tb6 .box2{ left: 7%; }
.page5 .teseBox.tb6 .box3{ left: 14.5%; }
.page5 .teseBox.tb6 .box4 { left: 22.2%; }
.page5 .teseBox.tb6 .box5{ left: 30%; }
.page5 .teseBox.tb6 .box6 { left: 38%; }
.page5 .teseBox.tb6 .box7{ left: 83%; }
.page5 .teseBox.tb6 .box8{ left: 91%; }


.page5 .teseBox .box7.on{ width: 43.5%; z-index: 20; }
.page5 .teseBox .box7.on .te-txt{ clip-path: polygon(8% 0%, 100% -42%, 87% 100%, 0% 100%)  }
.page5 .teseBox.tb7 .box2{ left: 7%; }
.page5 .teseBox.tb7 .box3{ left: 14.5%; }
.page5 .teseBox.tb7 .box4 { left: 22.2%; }
.page5 .teseBox.tb7 .box5{ left: 30%; }
.page5 .teseBox.tb7 .box6 { left: 38%; }
.page5 .teseBox.tb7 .box7{ left: 46%; }
.page5 .teseBox.tb7 .box8{ left: 91%; }



.page5 .teseBox .box8.on{ width: 47%; z-index: 20; }
.page5 .teseBox .box8.on .te-txt{ clip-path: polygon(8% 0%, 100% 0%, 100% 100%, 0% 100%) }
.page5 .teseBox.tb8 .box2{ left: 7%; }
.page5 .teseBox.tb8 .box3{ left: 14.5%; }
.page5 .teseBox.tb8 .box4 { left: 22.2%; }
.page5 .teseBox.tb8 .box5{ left: 30%; }
.page5 .teseBox.tb8 .box6 { left: 38%; }
.page5 .teseBox.tb8 .box7{ left: 46%; }
.page5 .teseBox.tb8 .box8{ left: 54%; }



.page5 .teseBox .box .te-txt::after { content: ''; position: absolute; height: 100%; width: 100%; background: rgba(0, 0, 0, .4); top: 0; left: 0; }
.page5 .teseBox .box1.on .te-txt::before{ content: ''; position: absolute; height: 218rem; width: 100%; background: url(../img/page5/bmbg2.png) left bottom no-repeat; background-size: 100% 100%; left: 0; z-index: 9; bottom: 0; }
.page5 .teseBox .box2.on .te-txt::before{ content: ''; position: absolute; height: 218rem; width: 100%; background: url(../img/page5/bmbg3.png) left bottom no-repeat; background-size: 100% 100%; left: 0; z-index: 9; bottom: 0; }
.page5 .teseBox .box3.on .te-txt::before{ content: ''; position: absolute; height: 218rem; width: 100%; background: url(../img/page5/bmbg1.png) left bottom no-repeat; background-size: 100% 100%; left: 0; z-index: 9; bottom: 0; }
.page5 .teseBox .box4.on .te-txt::before{ content: ''; position: absolute; height: 218rem; width: 100%; background: url(../img/page5/bmbg4.png) left bottom no-repeat; background-size: 100% 100%; left: 0; z-index: 9; bottom: 0; }
.page5 .teseBox .box5.on .te-txt::before{ content: ''; position: absolute; height: 218rem; width: 100%; background: url(../img/page5/bmbg5.png) left bottom no-repeat; background-size: 100% 100%; left: 0; z-index: 9; bottom: 0; }
.page5 .teseBox .box6.on .te-txt::before{ content: ''; position: absolute; height: 218rem; width: 100%; background: url(../img/page5/bmbg6.png) left bottom no-repeat; background-size: 100% 100%; left: 0; z-index: 9; bottom: 0; }
.page5 .teseBox .box7.on .te-txt::before{ content: ''; position: absolute; height: 218rem; width: 100%; background: url(../img/page5/bmbg4.png) left bottom no-repeat; background-size: 100% 100%; left: 0; z-index: 9; bottom: 0; }
.page5 .teseBox .box8.on .te-txt::before{ content: ''; position: absolute; height: 218rem; width: 100%; background: url(../img/page5/bmbg8.png) left bottom no-repeat; background-size: 100% 100%; left: 0; z-index: 9; bottom: 0; }

.page5 .teseBox .on .te-txt::after{ content: ''; position: absolute; height: 100%; width: 100%; background: none; top: 0; left: 0; }


.page5 .teseBox  .box .tbBox{ position: absolute; bottom: 50rem; height: auto; width: auto; z-index: 99; display: block; margin-left:25rem; }
.page5 .teseBox  .box .tbBox i{ width: 130rem; height: 120rem; display: block; margin: 0 auto; }
.page5 .teseBox  .box1 .tbBox i{ background: url(../img/page5/civi-icon1.png) no-repeat; background-size: 260rem auto;  background-position: 0rem -638rem;}
.page5 .teseBox  .box2 .tbBox i{ background: url(../img/page5/civi-icon1.png)  no-repeat; background-size: 260rem auto; background-position:-9rem -487rem; }
.page5 .teseBox  .box3 .tbBox i{ background: url(../img/page5/civi-icon1.png)   no-repeat; background-size:280rem auto;  background-position: -17rem -373rem;}
.page5 .teseBox  .box4 .tbBox i{ background: url(../img/page5/civi-icon1.png)   no-repeat; background-size:240rem auto; background-position: -6rem -726rem; }
.page5 .teseBox  .box5 .tbBox i{ background: url(../img/page5/civi-icon1.png)   no-repeat; background-size:240rem auto; background-position:-1rem -1892rem }
.page5 .teseBox  .box6 .tbBox i{ background: url(../img/page5/civi-icon1.png)   no-repeat; background-size:240rem auto; background-position:0rem -2333rem; }
.page5 .teseBox  .box7 .tbBox i{ background: url(../img/page5/civi-icon1.png)   no-repeat; background-size:240rem auto; background-position:12rem -2770rem; }
.page5 .teseBox  .box8 .tbBox i{ background: url(../img/page5/civi-icon1.png)   no-repeat; background-size:240rem auto; background-position:10rem -3235rem; }


.page5 .teseBox  .tbBox h5{ color: #e4e5e4; font-family: nsb; font-size: 23rem; display: block; margin-top: 10rem;text-align: center; text-transform: uppercase;}

.page5 .teseBox  .box .showtb{ display: none; position: absolute; bottom:0; height: auto; width: 100%; z-index: 99; padding-bottom: 25rem;    }
.page5 .teseBox  .box.on  .showtb .icon{ width: 220rem; height: 230rem; position: relative; margin-left: 50rem; }
.page5 .teseBox  .box.on  .showtb i{ width: 150rem; height: 170rem; position: absolute; top: 0; left: 50%; margin-left: -75rem; }
.page5 .teseBox  .box1.on  .showtb i{ background: url(../img/page5/civi-icon1.png)  no-repeat; background-size: 200rem auto;  background-position:  2rem -886rem;}
.page5 .teseBox  .box2.on  .showtb i{ background: url(../img/page5/civi-icon1.png)  no-repeat; background-size: 200rem auto; background-position:  2rem -1253rem; }
.page5 .teseBox  .box3.on  .showtb i{ background: url(../img/page5/civi-icon1.png)  no-repeat; background-size: 200rem auto;  background-position:  2rem -1070rem;}
.page5 .teseBox  .box4.on  .showtb i{ background: url(../img/page5/civi-icon1.png)  no-repeat; background-size: 200rem auto; background-position: -7rem -715rem; }
.page5 .teseBox  .box5.on  .showtb i{ background: url(../img/page5/civi-icon1.png)  no-repeat; background-size: 200rem auto; background-position: -7rem -1720rem; }
.page5 .teseBox  .box6.on  .showtb i{ background: url(../img/page5/civi-icon1.png)  no-repeat; background-size: 200rem auto; background-position: 7rem -2080rem; }
.page5 .teseBox  .box7.on  .showtb i{ background: url(../img/page5/civi-icon1.png)  no-repeat; background-size: 200rem auto; background-position: -3rem -2460rem; }
.page5 .teseBox  .box8.on  .showtb i{ background: url(../img/page5/civi-icon1.png)  no-repeat; background-size: 200rem auto; background-position: 0rem -2845rem }


.page5 .teseBox  .box.on  .showtb h5{text-transform: uppercase; color: #ffdf91; text-shadow: 0rem 0rem 2rem #ffdf91; font-family: nsb; font-size: 23rem; width: 100%; position: absolute; bottom: 0; background: url(../img/page5/civi-icon1.png)  no-repeat; height: 50rem; text-align: center; line-height: 46rem; }
.page5 .teseBox  .box.on  .showtb p{ position: absolute;  left: 300rem; bottom: 30rem; line-height: 33rem; color: #fff; text-align: left; z-index: 30; transform: translate(0rem, 100rem); opacity: 0; font-size: 24rem;width: 680rem;}
.page5 .teseBox  .box.on  .showhero{ position: absolute; width: auto; height:530rem; bottom: 0; z-index: 10; transform: translate(300rem, 0rem); opacity: 0; left: 55%;}

.page5 .teseBox .box1.on .showhero{  height:480rem;left: 50%;}
.page5 .teseBox .box6.on .showhero{height: 610rem; left: 50%;}
.page5 .teseBox .box7.on .showhero{height: 580rem; left: 62%;}
.page5 .teseBox .box8.on .showhero{height: 480rem; left: 55%;}

.page5 .teseBox  .box1.on  .showtb h5{ background-position: -15rem -287rem; background-size: 280rem; }
.page5 .teseBox  .box2.on  .showtb h5{  background-position: -15rem -15rem; background-size: 250rem;  }
.page5 .teseBox  .box3.on  .showtb h5{ background-position: -15rem -198rem; background-size: 280rem; }
.page5 .teseBox  .box4.on  .showtb h5{ background-position: -7rem -100rem; background-size: 260rem; }
.page5 .teseBox  .box5.on  .showtb h5{ background-position:-16rem -1945rem; background-size: 260rem; }
.page5 .teseBox  .box6.on  .showtb h5{ background-position: -7rem -266rem; background-size: 260rem; }
.page5 .teseBox  .box7.on  .showtb h5{ background-position: -16rem -1945rem; background-size: 260rem;    font-size: 18rem;}
.page5 .teseBox  .box8.on  .showtb h5{ background-position: -15rem -198rem; background-size: 280rem;}

.page5 .box.on .showtb .anright,.page5 .box.on .showtb p.anup{ transition: opacity .5s ease 0s, transform 0.5s ease 0s; opacity: 1; transform: translate(0rem, 0rem); }





/* page6 */

.page6{ background: url(../img/page6/bg.jpg) center center no-repeat; background-size: cover; position: relative; }
.page6 .content{
    margin: 0 auto;
    position: relative;
}
 .page6 .content .top{
        position: relative;
        height: 80rem;
        margin-bottom: 80rem;   
    }
.page6 .title { position: absolute; left: 50%; top:0; transform: translate(-50%);  color: #ffdf91; z-index: 60; }
.page6 .title h4{ font-size: 70rem; text-shadow: 0 0 10rem #513c09; font-weight: bold; position: relative; line-height: 70rem;white-space: nowrap;}
.page6 .title h4::after{ content: ''; position: absolute; height: 15rem; width: 400rem; background: url(../img/icon.png)  no-repeat;   background-size: 460rem auto;background-position:  -30rem -248rem; left: -420rem; top: 33rem; }
.page6 .title h4::before{ content: ''; position: absolute; height: 15rem; width: 400rem; background: url(../img/icon.png)  no-repeat;  background-size: 460rem auto; background-position: -30rem -323rem; right: -420rem; top: 33rem; }
.page6 .newsBox{ height: auto; width: 90%;  margin: 0 auto;    position: relative;}
.page6 .newsBox .listbox{display: flex; justify-content: center; position: relative;  width: 100%;}
.page6 .newsBox .news-list{position: relative; width:765rem;height: 650rem; background: url(../img/page6/newsbg.jpg) center top no-repeat; background-size: cover;margin: 0 30rem auto 0;    overflow: hidden;}
.page6 .newsBox .news-list:nth-child(3){margin-right: 0;}
.page6 .newsBox .news-list .showimg{width: 99.6%;padding:0.2%;height: auto; overflow: hidden;}
.page6 .newsBox .news-list img{ width: 100%; display: block; }

.page6 .newsBox .news-list .txt{ width: 90%; margin: 0 auto; position: relative;  }

.page6 .newsBox .news-list .txt h3{ font-family: nsb; color: #482e10; font-size: 40rem; background: url(../img/page6/line.png) center bottom no-repeat; background-size: 100% auto; line-height: 100rem; text-align: left; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.page6 .newsBox .news-list .txt p{  color: #343434; text-align: left; line-height: 30rem; margin-top: 20rem; font-size: 18rem;

}

.page6 .newsBox .news-list em{position: absolute;bottom: 10rem; left: 35rem;font-family: nsb; color: #464242; font-size: 20rem;  }
.page6 .newsBox  .more{text-transform: uppercase; width: auto; height: 35rem; position: absolute; right: 0; bottom: -100rem; color: #e3b555; font-size: 40rem;   line-height: 35rem;     padding-right: 55rem;white-space: nowrap;}
.page6 .newsBox  .more::after{
    position: absolute;
    content: '';
    height: 35rem;
    width: 100rem;
    background: url(../img/icon.png) no-repeat;
    background-size: 460rem auto;
    background-position: -110rem -915rem;
    right: 0;
    top: 0;
}

.page6 .newsBox .tips{
    height: 300rem;
    line-height: 300rem;
    font-size: 30rem;
    text-align: center;
}

.pagebottom .ffcontent{
    background: #000;
    width: 100%;
    padding-bottom: 20rem;
 }
 

/* medio */

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

.mediaPage .content{position: relative;width: 100%;height: 100%;}

.mediaPage .title { position: absolute; left: 50%; top:280rem; transform: translate(-50%);  color: #ffdf91; z-index: 60;  }
.mediaPage .title h4{ font-size: 70rem; text-shadow: 0 0 10rem #513c09; font-weight: bold; position: relative; line-height: 70rem;white-space: nowrap;text-transform: uppercase;}
.mediaPage .title h4::after{ content: ''; position: absolute; height: 15rem; width: 400rem; background: url(../img/icon.png)  no-repeat;   background-size: 460rem auto;background-position:  -30rem -248rem; left: -420rem; top: 33rem; }
.mediaPage .title h4::before{ content: ''; position: absolute; height: 15rem; width: 400rem; background: url(../img/icon.png)  no-repeat;  background-size: 460rem auto; background-position: -30rem -323rem; right: -420rem; top: 33rem; }

.mediaPage .mediaBox{ 
    height: auto;
    width: 2130rem;
    margin: 520rem auto 0;
    position: relative;
}
.mediaPage .mediaBox .listbox{display: flex; justify-content: center; position: relative;  width: 100%;}

.mediaPage .mediaBox .listbox .com{
    position: relative;
    width: 1157rem;
    height: 470rem;
}


.mediaPage .mediaBox .listbox .artbg{
    width: 1157rem;
    height: auto;
    background: url(../img/media/artbg.png) top center no-repeat;
    background-size: 100% auto;
}

.mediaPage .mediaBox .listbox .screenbg{
    width: 1157rem;
    background: url(../img/media/screenbg.png) top center no-repeat;
    background-size: 100% auto;
}
.mediaPage .mediaBox .listbox .videobg{
    width: 1157rem;
    height: auto;
    background: url(../img/media/videobg.png) top center no-repeat;
    background-size: 100% auto;
}

.mediaPage .mediaBox .listbox  .showimg{
    width: 620rem;
    position: absolute;
    left: 50%;
    top: 37rem;
    transform: translate(-50%);
}

.mediaPage .mediaBox .listbox  .popimg{
    position: absolute;
    z-index: 30;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-70%);
    width: 105rem;
    height: 105rem;
    background: url(../img/media/look.png) center center no-repeat;
    background-size: 100% auto; 
}
.mediaPage .mediaBox .listbox .btn{
    position: absolute;
    bottom: -54rem;
    left: 50%;
    transform: translate(-50%);
    color: #222f43;
    font-size: 30rem;
    width: 480rem;
    height: 123rem;
    line-height: 116rem;
    text-align: center;
    background: url(../img/media/btn.png) center center no-repeat;
    background-size: 100% auto;     
}















/* page7 */
.page7 { height: 100%;}

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

.page7 .content{ width: 100%; height: 100%; position: relative;     overflow: hidden;}

.page7 .title { position: absolute; left: 50%; top:150rem; transform: translate(-50%); color: #ffdf91; z-index: 60; }
.page7 .title h4{ font-size: 70rem; text-shadow: 0 0 10rem #513c09; font-weight: bold; position: relative; line-height: 70rem; }
.page7 .title h4::after{ content: ''; position: absolute; height: 15rem; width: 400rem; background: url(../img/icon.png)  no-repeat; background-size: 460rem auto; background-position:  -30rem -248rem; left: -420rem; top: 33rem; }
.page7 .title h4::before{ content: ''; position: absolute; height: 15rem; width: 400rem; background: url(../img/icon.png)  no-repeat; background-size: 460rem auto; background-position: -30rem -323rem; right: -420rem; top: 33rem; }

.page7 .toplunbox{ position: absolute; top: 245rem; width: 1920rem; height: 600rem; left: 50%; transform: translate(-50%); }

.page7 .pinglun1 {
    width: 1920rem;
    height: 600rem;
    background: url(../img/page7/topad1.jpg) center center no-repeat;
    background-size: 100% auto;
}
.page7 .pinglun2 {
    width: 1920rem;
    height: 600rem;
    background: url(../img/page7/topad2.jpg) center center no-repeat;
    background-size: 100% auto;
}
.page7 .pinglun3 {
    width: 1920rem;
    height: 600rem;
    background: url(../img/page7/topad3.jpg) center center no-repeat;
    background-size: 100% auto;
}
.page7 .pinglun4 {
    width: 1920rem;
    height: 600rem;
    background: url(../img/page7/topad2.jpg) center center no-repeat;
    background-size: 100% auto;
}
.page7 .pinglun5 {
    width: 1920rem;
    height: 600rem;
    background: url(../img/page7/topad2.jpg) center center no-repeat;
    background-size: 100% auto;
}

.page7 .pinglun6 {
    width: 1920rem;
    height: 600rem;
    background: url(../img/page7/topad3.jpg) center center no-repeat;
    background-size: 100% auto;
}



.page7  .pl-message{
    position: absolute;
    top: 50%;
    left: 80rem;
    transform: translate(0,-50%);
    width: 1000rem;
    height: 400rem;
}
.page7  .pl-message .topicon{
    width: 400rem;
    margin-top: -35rem;
}

.page7  .pinglun3 .topicon{
    width: 540rem;
    margin-top: -20rem;
    margin-bottom: 20rem;
}
.page7  .pinglun4 .topicon{
    width: 540rem;
    margin-top: -20rem;
    margin-bottom: 20rem;
}
.page7  .pinglun5 .topicon{
    width: 300rem;
    margin-top: -20rem;
    margin-bottom: 20rem;
}

.page7  .pinglun6 .topicon{
    width: 400rem;
    margin-top: -20rem;
    margin-bottom: 20rem;
}



.page7  .pl-message .pl-title{
    display: none;
    color: #e9c277;
    font-family: nsb;
    font-size: 28rem;
    margin-top: 20rem;
    text-transform: uppercase;
}
.page7  .pl-message p{
    margin-top: 35rem;
    line-height: 35rem;
    color: #c9c9c9;
    font-size: 30rem;
    text-transform: uppercase;
}
.page7  .pl-message  a{
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    color: #fff;
    font-size: 24rem;
    font-family: nsb;
    text-transform: uppercase;
}








.page7 .page7_dian{ width: 100%; margin-top: 20rem; }

.page7 .page7_dian .swiper-pagination-bullet{ border-radius: 0; margin-right: 30rem; width: 130rem; height: 10rem; background: url(../img/page7/topicon.png) center center no-repeat; background-size: 100% auto; }

.page7 .page7_dian  .swiper-pagination-bullet-active{ background: url(../img/page7/topactive.png) center center no-repeat; background-size: 100% auto; }

.page7 .personMessage{ 
    position: absolute;
    top: 940rem;
    width: 2070rem;
    height: 300rem;
    left: 50%;
    transform: translate(-47%);
    overflow: hidden;
}
.page7 .btn{ 
    position: absolute;
    top: -65rem;
    right:50rem;
    font-size: 22rem;
    color: #fff;
    z-index: 20;
    height: 412rem;
    width: 11rem;
    background: url(../img/page7/rightbg.png) center center no-repeat;
    background-size: 100% auto;

}
.page7 .btn a{ 
    position: absolute;
    background: url(../img/icon.png) no-repeat;
    background-size: 300rem auto;
    background-position: -18rem -947rem;
    width: 35rem;
    height: 60rem;
    left: -12rem;
    filter: drop-shadow(4rem 0rem 10rem #08162C);
}
.page7 .btn a.prev{
    bottom: 80rem;
    transform: rotate(-90deg); 

}
.page7 .btn a.next{
    top: 80rem;
    transform: rotate(90deg); 
}







.page7 .messageBox{ width: 100%; height: 100%; }

.page7 .comtxt{ position: absolute; z-index: 15; width: 1920rem; height: 180rem; background: url(../img/page7/gerenbox1.png) center center no-repeat; background-size: 100% auto;    transform: scale(.8);
    top: -13rem; }
.page7 .comtxt{ opacity: 0; }


.page7  .prevBox .prev{ transform: scale(.8); top: -13rem; opacity: .15; animation:  upmove 1s alternate forwards; }
.page7 .prevBox .on{ opacity: 1; z-index: 20; position: relative; top: 50%; transform: translate(0,-50%) scale(1); background: url(../img/page7/gerenbox.png) center center no-repeat; background-size: 100% auto; animation:  showliuyan 1.2s  alternate forwards;  }

.page7 .prevBox .next{ transform: scale(.8);    top: auto; bottom: -20rem; opacity: .15; animation:  downmove 1s alternate forwards; } 

.page7  .nextBox .prev{ transform: scale(.8); top: -13rem; opacity: .15; animation:  upmove2 1s alternate forwards; }
.page7 .nextBox .on{ opacity: 1; z-index: 20; position: relative; top: 50%; transform: translate(0,-50%) scale(1); background: url(../img/page7/gerenbox.png) center center no-repeat; background-size: 100% auto; animation:  showliuyan2 1.2s  alternate forwards;  }

.page7 .nextBox .next{ transform: scale(.8);    top: auto; bottom: -20rem; opacity: .15; animation:  downmove2 1s alternate forwards; } 




.page7 .avatar{ position: absolute; width: 170rem; top: -35rem; left: 200rem; height: 226rem; background: url(../img/page7/txbox.png) center center no-repeat; background-size: 100% auto; }

.page7 .avatar .img{ position: absolute; width: 155rem; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%); }


.page7 .avatar .txbg{ position: absolute; z-index: 20; width: 260rem; height: 48rem; background: url(../img/page7/txbg.png) center center no-repeat; background-size: 100% auto; left: 50%; bottom: 10rem; transform: translate(-50%, 0); font-family: nsb; font-size: 23rem; line-height: 48rem; text-align: center; color: #091b35; }

.page7 .txt{ position: absolute; height: auto; width: 1370rem; top: 50%; left: 50%; transform: translate(-38%, -50%); }
.page7 .txt p{ font-size: 24rem; color: #ffe49f; font-family: nsr; }

.page7 .comtxt  a{position: absolute;
    right: 120rem;
    bottom: 25rem;
    font-size: 24rem;
    color: #fff;
    font-family: nsb; }