/* .main { width: 100%; min-width: 1400px; height: 100%; overflow: hidden;  }

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

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

/* page1 */

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

.page1 .content { position: relative; margin-top: 240px;z-index: 91; -moz-transform-origin:center top;}

.page1 .slogn { width: 850px; display: block; pointer-events: none;     margin: 0 auto;  }

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

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

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

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

.page2 { background: url(../img/page2/map.jpg) center center no-repeat; background-size: cover; position: relative; }
.page2 .juanzhou-left{ width: 263px; 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: 173px; 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: 1850px; height: 960px; margin: 0 auto; position: relative; z-index: 99; -moz-transform-origin: left center;}

.page2 .title { width: 100%; }

.page2 .title h3 { color: #e9c277; font-size: 90px; font-family: mb; text-shadow: 0 0 8px #513c09; }

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

.page2 .giftbox { width: 1700px; height: auto; margin: 50px auto 0; position: relative; z-index: 30; }

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

.page2 .giftbox .list li {
    position: relative;
    width: 260px;
    height: 500px;
    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: 300px; height: 550px; background: url(../img/page2/bg-j.png) center center no-repeat; background-size: 100% auto; margin-top: -30px; }

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

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

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




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


.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(0px 0px 20px #63b0ff); filter: drop-shadow(0px 0px 20px #63b0ff); }


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

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

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


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

.page2 .giftbox .list li.on:nth-child(4) img { width: 160px; left: 64px; top: 105px; }
.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: 350px; }


.page2 .giftbox .list li.on:nth-child(5) .page2-Hero {width: 130px; left: 80px; top: 110px;  background: url(../img/page2/gift3M-on.png) center center no-repeat;background-size: 100%;}


.page2 .giftbox .jindu { width: 1415px; height: 220px; background: url(../img/page2/luxian.png) top center no-repeat; background-size: 100% auto; margin: -60px auto 0; position: relative; }

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



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

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

.page2 .jindu li:nth-child(3) { left: 675px; top: 88px; }

.page2 .jindu li:nth-child(4) { left: 1005px; top: 78px; }

.page2 .jindu li:nth-child(5) { right: 0; top: 40px; }

.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) 
{ background-position: -20px -1890px; }



.page2 .giftbox .on_2::after,
.page2 .giftbox .on_3::after,
.page2 .giftbox .on_4::after,
.page2 .giftbox .on_5::after { content: ''; width: 1415px; height: 220px; left: 0; top: 15px; position: absolute; background: url(../img/page2/luxian-on.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 { 
    content: '';
    width: 220px;
    height: 125px;
    position: absolute;
    background: url(../img/page2/qibing.png) center center no-repeat;
    background-size: 2000px auto;
    background-position: -10px 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: -56px; top: 32px; }
.page2 .giftbox .on_2::before{ left: 285px; top: 63px; }
.page2 .giftbox .on_3::before{ left: 630px; top: 50px; }

.page2 .giftbox .on_4::before{ left: 965px; top: 45px; }
.page2 .giftbox .on_5::before{ left: 1310px; top: 8px; }


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

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

.page2 .giftbox .on_4::after { clip: rect(0px, 1030px, 220px, 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: 70px; height: 172px; background: url(../img/page2/yc-gift.png) center center no-repeat; background-size: 100% auto; z-index: 50; top: 90px; right: 17px; font-size: 8px;    cursor: unset; }
.page2 .ycgift span{ position: absolute; bottom: 57px; left: 50%; margin-left: -23px; width: 42px; }
.page2 .zhucebtn { font-family: mb; width: 620px; height: 120px; line-height: 109px; font-weight: bold; background: url(../img/page1/zhuce.png) center center no-repeat; background-size: 100% auto; display: block; margin:0 auto 0; color: #5a361e; font-size: 32px;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; -moz-transform-origin: center center;}
.page3 .toptxt{ position: absolute; width: auto; top: 200px; left: 100px; text-align: left; z-index: 30; transform: translate(113px, 0); opacity: 0;pointer-events: none; }

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

}

.page3 .toptxt  small{ font-size: 21px; color: #fff; margin-top: 18px; display: block; line-height: 42px; width: 610px;}
.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(0px, 0px); }
.page3 .lunBox{ position: absolute; height: 100%; width: 70%; right: 0; bottom: 0; }
.page3 .lunBox .swiper-container{ height: 100%; width: 100%; }

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

.page3 .lunBox .imgbox{ 
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -500px;
    width: 100%;
    height: 1050px;
    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{ right: 50%;margin-right: -730px; position: absolute;z-index: 15; width: 1160px; height: 240px; background: url(../img/page3/lb-txtbg.png) center bottom no-repeat; background-size: 100% auto; bottom: 130px; }
.page3 .lunBox  .biaoti h4{ font-family: nsb;  font-size:55px; color: #482e10; line-height: 1; margin-top: 50px; text-shadow: 0 0 20px #ffd339; }

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

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

.page3 .page3_dian{ height: 66px; bottom: 50px; width: auto; display: flex; right: 50%;margin-right: -780px; left: auto; justify-content: space-evenly;z-index: 50; }
.page3 .page3_dian::after{ content: ''; position: absolute; height: 2px; bottom: 35px; 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: 60px; background: none; position: relative; z-index: 30; opacity: 1; background: url(../img/icon.png) no-repeat; background-position: 67px -344px; background-size: 300px; }

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

.page3 .page3_dian .swiper-pagination-bullet-active{ height: 60px; background: url(../img/page3/dian2.png) center center no-repeat; background-size: 60px 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: 130px; transform: translate(-50%); font-family: mb; color: #ffdf91; z-index: 60; }
.page4 .title h4{ font-size: 70px; text-shadow: 0 0 5px #513c09; position: relative; }
/* .page4 .title h4::after{ content: ''; position: absolute; height: 15px; width: 400px; background: url(../img/icon.png)  no-repeat; background-position:  -30px -248px; left: -420px; top: 33px; }
.page4 .title h4::before{ content: ''; position: absolute; height: 15px; width: 400px; background: url(../img/icon.png)  no-repeat; background-position: -30px -323px; right: -420px; top: 33px; } */


.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: cover; 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  .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: 1035px; transform: translate(250px, 0); opacity: 0; }

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

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

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


.page4 .hero .herotxtbox{ position: absolute; right: 50px; bottom: 235px; width: 790px; height: auto; z-index: 80; transform: translate(250px, 0); opacity: 0; }
.page4 .hero .herotxtbox h5{ font-family: spdb; color: #ffdf91; font-size: 66px; text-align: right; margin-right: 25px;  text-transform: uppercase;}
.page4 .hero .herotxtbox .heroCombq { height: 90px; width: 490px; background: url(../img/page4/heroIcon.png) no-repeat; background-position: right -291px; background-size: 500px auto; margin-top: 20px; position: absolute; right: 0; display: flex; justify-content: center; }
.page4 .hero .herotxtbox .heroCombq span{ font-family: mb; color: #ffdf91; font-size: 28px; line-height: 93px; font-weight: bold; margin-right: 30px;     text-transform: uppercase;}

.page4 .hero .herotxtbox .heroCombq  .smicon{ display: inline-block; height: 100%; vertical-align: middle; }
.page4 .hero .herotxtbox .heroCombq  .smicon i{ background: url(../img/page4/heroIcon.png) no-repeat; width: 50px; height: 100%; display: inline-block; margin-right: 20px; }

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

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

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


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

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

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

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


/* page5 */

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

.page5 .toptxt h3{     font-family: mb;

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

.page5 .teseBox{ position: relative; width: 100%; height: 100%; display: flex; }
.page5 .teseBox .box{ height: 100%; position: absolute;  width: 25%; top: 0;  /* .transition: .3s; -webkit-transition: .3s;*/} 
.page5 .teseBox .box1{ background: url(../img/page5/french-bg.jpg) center center no-repeat; background-size: cover; clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%); }
.page5 .teseBox .box2{ left: 25%; }
.page5 .teseBox .box3{ left: 50%; }
.page5 .teseBox .box4{ left: 75%; background: url(../img/page5/chinese-bg.jpg) center center no-repeat; background-size: cover; clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%); }
.page5 .teseBox .box2 .te-txt{ position: absolute; width: 133%; height: 100%; 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%); top: 0; left: -20%; }
 .page5 .teseBox .box3 .te-txt{ background: url(../img/page5/romans-bg.jpg) center right  no-repeat; background-size: cover; clip-path: polygon(17% 0%, 100% 0%, 83% 100%, 0% 100%); position: absolute; width: 133%; height: 100%; top: 0; left: -10%; }




.page5 .teseBox.tb1 .box2{ left: 60%; }
.page5 .teseBox.tb1 .box3{ left: 73%; }
.page5 .teseBox.tb1 .box4{ left: 85%; }
.page5 .teseBox .box1.on{ width: 60%; z-index: 20; clip-path: polygon(0% 0%, 100% 0%, 92% 100%, 0% 100%); }



.page5 .teseBox.tb2 .box2{ left: 19%; }
.page5 .teseBox.tb2 .box3 { left: 72.3%; }
.page5 .teseBox.tb2 .box4 { left: 85%; }
.page5 .teseBox .box2.on,.page5 .teseBox .box3.on{ width: 50%; z-index: 20; }
.page5 .teseBox .box2.on .te-txt{ clip-path: polygon(15% 0%, 100% 0%, 91.5% 100%, 0% 100%); }

.page5 .teseBox.tb3 .box2{ left: 16%; }
.page5 .teseBox.tb3 .box3{ left: 31%; }
.page5 .teseBox.tb3 .box4 { left: 82%; }
.page5 .teseBox .box3.on .te-txt{ clip-path: polygon(8% 0%, 100% -45%, 85% 100%, 0% 100%); }

.page5 .teseBox.tb4 .box2{ left: 16%; }
.page5 .teseBox.tb4 .box3{ left: 29%; }
.page5 .teseBox.tb4 .box4 { left: 42%; }
.page5 .teseBox .box4.on{ width: 60%; z-index: 20; clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%); }


.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: 218px; 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: 218px; 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: 218px; 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: 218px; 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 .on .te-txt::after{ content: ''; position: absolute; height: 100%; width: 100%; background: none; top: 0; left: 0; }


.page5 .teseBox  .box .tbBox{ position: absolute; bottom: 50px; height: auto; width: auto; z-index: 99; display: block; margin-left: 45px; }
.page5 .teseBox  .box .tbBox i{ width: 130px; height: 120px; display: block; margin: 0 auto; }
.page5 .teseBox  .box1 .tbBox i{ background: url(../img/page5/civi-icon1.png) no-repeat; background-size: 260px auto;  background-position: 0px -638px;}
.page5 .teseBox  .box2 .tbBox i{ background: url(../img/page5/civi-icon1.png)  no-repeat; background-size: 260px auto; background-position:-9px -487px; }
.page5 .teseBox  .box3 .tbBox i{ background: url(../img/page5/civi-icon1.png)   no-repeat; background-size:280px auto;  background-position: -17px -373px;}
.page5 .teseBox  .box4 .tbBox i{ background: url(../img/page5/civi-icon1.png)   no-repeat; background-size:240px auto; background-position: -6px -726px; }
.page5 .teseBox  .tbBox h5{ color: #e4e5e4; font-family: nsb; font-size: 23px; display: block; margin-top: 10px; }


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

.page5 .teseBox  .box.on  .showtb h5{ color: #ffdf91; text-shadow: 0px 0px 2px #ffdf91; font-family: nsb; font-size: 23px; width: 100%; position: absolute; bottom: 0; background: url(../img/page5/civi-icon1.png)  no-repeat; height: 50px; text-align: center; line-height: 46px; }
.page5 .teseBox  .box.on  .showtb p{ position: absolute;  left: 300px; bottom: 25px; line-height: 33px; color: #fff; text-align: left; z-index: 30; transform: translate(0px, 100px); opacity: 0; font-size: 24px;width: 765px;}
.page5 .teseBox  .box.on  .showhero{ position: absolute; width: auto; height: 620px; bottom: 0; z-index: 10; transform: translate(300px, 0px); opacity: 0; }
.page5 .teseBox  .box1.on  .showtb h5{ background-position: -15px -287px; background-size: 280px; }
.page5 .teseBox  .box2.on  .showtb h5{  background-position: -15px -15px; background-size: 250px;  }
.page5 .teseBox  .box3.on  .showtb h5{ background-position: -15px -198px; background-size: 280px; }
.page5 .teseBox  .box4.on  .showtb h5{ background-position: -7px -100px; background-size: 260px; }


.page5 .teseBox  .box1.on  .showhero{ left: 870px; }

.page5 .teseBox  .box2.on  .showhero{ left:950px; }
 
.page5 .teseBox  .box3.on  .showhero{ left:900px; }

.page5 .teseBox  .box4.on  .showhero{ left:950px; }

.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(0px, 0px); }


/* page6 */

.page6{ background: url(../img/page6/bg.jpg) center center no-repeat; background-size: cover; position: relative; }
.page6 .content{
    margin: 0 auto;
    
 -moz-transform-origin: left center;}
    .page6 .content .top{
        position: relative;
        height: 80px;
        margin-bottom: 80px;   
    }
.page6 .title { position: absolute; left: 50%; top:0; transform: translate(-50%); font-family: mb; color: #ffdf91; z-index: 60; }
.page6 .title h4{ font-size: 70px; text-shadow: 0 0 10px #513c09; font-weight: bold; position: relative; line-height: 70px;}
.page6 .title h4::after{ content: ''; position: absolute; height: 15px; width: 400px; background: url(../img/icon.png)  no-repeat; background-position:  -30px -248px; left: -420px; top: 33px; }
.page6 .title h4::before{ content: ''; position: absolute; height: 15px; width: 400px; background: url(../img/icon.png)  no-repeat; background-position: -30px -323px; right: -420px; top: 33px; }
.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{ width:765px; background: url(../img/page6/newsbg.jpg) center top no-repeat; background-size: cover;margin: 0 30px 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: 40px; background: url(../img/page6/line.png) center bottom no-repeat; background-size: 100% auto; line-height: 100px; text-align: left; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.page6 .newsBox .news-list .txt p{  color: #343434; text-align: left; line-height: 30px; margin-top: 20px; font-size: 18px; }

.page6 .newsBox .news-list .txt em{display: block; margin: 15px auto; text-align: left;;font-family: nsb; color: #464242; font-size: 20px;  }
.page6 .newsBox  .more{text-transform: uppercase; width: auto; height: 35px; position: absolute; right: 0; bottom: -100px; color: #e3b555; font-size: 40px;  font-family: mb; line-height: 35px;     padding-right: 55px;}
.page6 .newsBox  .more::after{
    position: absolute;
    content: '';
    height: 35px;
    width: 100px;
    background: url(../img/icon.png) no-repeat;
    background-position: -110px -915px;
    right: 0;
    top: 0;
}

.page6 .newsBox .tips{
    height: 300px;
    line-height: 300px;
    font-size: 30px;
}

.page7 .ffcontent{
    background: #000;
    width: 100%;
 }