@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;user-select:none;font-family: "Roboto", serif;}
blockquote,body,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,iframe,input,li,object,ol,p,pre,span,td,textarea,th,ul{padding:0;margin:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
ol,ul{list-style:none}
h1,h2,h3,h4,h5,h6{font-weight:400;font-size:100%}
body{font:12px/1.6 "Roboto", serif;}
a,a *{text-decoration:none;-webkit-transition:all .3s;transition:all .3s}
a:active{outline:0}
img{border:0;vertical-align:middle;-ms-interpolation-mode:bicubic}
button,input[type=checkbox],input[type=radio]{-webkit-appearance:none;appearance:none}
button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}
button[disabled],html input[disabled]{cursor:default}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
input::-moz-placeholder,textarea::-moz-placeholder{color:#999}
input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#999}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#999}
input{outline:0;border:0;font-family:"Roboto", serif;}
textarea{overflow:auto;resize:none}
.clearfix:after{content:"";height:0;visibility:hidden;display:block;clear:both}
.clearfix{zoom:1}
.hide{display:none!important}
.fl{float:left}
.fr{float:right}
em,i{font-style:normal}
button,input,select{background:0 0;outline:0;border:0}
::-webkit-scrollbar{width:6px;height:7px;background-color:#f9cf9b}
::-webkit-scrollbar-track{background-color:#f9cf9b}
::-webkit-scrollbar-thumb{background-color:#c5320b}
.ab-center,.tip-pop .pop-con p,.usual-pop .pop-con p{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.ab-center-x{position:absolute;left:50%;-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}
.ab-center-y{position:absolute;top:50%;-webkit-transform:translate(0,-50%);transform:translate(0,-50%)}
body,html{height:100%}
body{position:relative;min-width:1200px;height:100%;background-color:#ab473e;overflow:hidden}
.wrapper{position:relative;width:1200px;height:100%;margin:0 auto}
.public_top_full_bg{position:fixed!important;left:0;top:0;width:100%}
.public_top_full_bg a,.public_top_full_bg a:hover{-webkit-transition:none;transition:none}
.bg-contain{position:absolute;left:50%;bottom:50%;width:0;height:0;z-index:2}
.bg-contain .bg{position:absolute;left:50%;top:50%;margin:-540px 0 0 -960px;width:1920px;height:1080px;z-index:2}
.contain{position:absolute;left:50%;bottom:0;width:0;height:0;z-index:3}
.cover{position:absolute;left:50%;bottom:50%;width:0;height:0;z-index:5}
.bottom{position:absolute;left:50%;bottom:0;width:0;height:0}
.cover-con{position:absolute;left:50%;top:50%;margin:-540px 0 0 -960px;width:1920px;height:1080px;z-index:5}
.main{position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden;z-index:2}
.main[v-cloak]{display:none}
.logo{position:absolute;left:30px;top:30px;width:200px;pointer-events:auto;z-index:8}
.logo a,.logo img{display:block;width:100%}
.nav-cover{pointer-events:none;z-index:8}
.nav{position:absolute;left:50%;margin-left:-1100px;bottom:25px;display:flex;flex-direction:row;justify-content:center;align-items:flex-start;width:2200px;height:155px;background:url(../images/nav-box.png) no-repeat center/100% auto;opacity:0;filter:Alpha(Opacity=0);-webkit-transform:translate(0,100%);transform:translate(0,100%);-webkit-transition:all .3s;transition:all .3s;z-index:20;pointer-events:auto}
.nav.show{opacity:1;filter:Alpha(Opacity=100);-webkit-transform:translate(0,0);transform:translate(0,0);pointer-events:auto}
.nav a{position:relative;width:261px;height:96px;line-height:96px;font-size:0;margin:20px}
.nav a.nav-go{background:url(../images/nav-go.png) no-repeat}
.nav a.nav-go.on,.nav a.nav-go:hover{background:url(../images/nav-on-go.png) no-repeat}
.nav a.nav-home{background:url(../images/nav-home.png) no-repeat}
.nav a.nav-home.on,.nav a.nav-home:hover{background:url(../images/nav-on-home.png) no-repeat}
.nav a.nav-story{background:url(../images/nav-story.png) no-repeat}
.nav a.nav-story.on,.nav a.nav-story:hover{background:url(../images/nav-on-story.png) no-repeat}
.home,.intro,.story{position:absolute;left:0;top:0;right:0;bottom:0;opacity:0;filter:Alpha(Opacity=0);-webkit-transition:opacity .5s ease-out;transition:opacity .5s ease-out;pointer-events:none;overflow:hidden}
.home.show,.intro.show,.story.show{opacity:1;filter:Alpha(Opacity=100);pointer-events:auto;z-index:5}
.home.show::after,.intro.show::after,.story.show::after{-webkit-animation:scale .2s ease-out forwards;animation:scale .2s ease-out forwards}
.home::after,.intro::after,.story::after{position:absolute;left:0;top:0;right:0;bottom:0;content:'';z-index:2;opacity:0;filter:Alpha(Opacity=0);-webkit-transform:scale(3);transform:scale(3)}
.intro.show,.story.show{-webkit-mask-image:url(https://wjdown.99.com/games/my/img/ani/mask/mask-transition.png);-webkit-mask-size:100% 3000%;mask-size:100% 3000%;-webkit-mask-position:0 0;mask-position:0 0;-webkit-animation:startMask 2s steps(29) both;animation:startMask 2s steps(29) both}
.home::after{background:url(../images/home-bg.jpg) no-repeat center/cover}
.home.show .slogan{-webkit-animation:slogan .2s .1s ease-out forwards;animation:slogan .2s .1s ease-out forwards}
.home.show .skin-box p{-webkit-animation:move .3s .2s ease-out forwards;animation:move .3s .2s ease-out forwards}
.home.show .story-nav::after{width:1595px}
.home.show .story-nav>div .tag{opacity:1;filter:Alpha(Opacity=100);-webkit-transform:translate(0,0);transform:translate(0,0)}
.home .slogan{position:absolute;left:50%;margin-left:-461.5px;top:10px;width:923px;height:393px;font-size:0;background:url(../images/slogan.png) no-repeat;z-index:3;pointer-events:none;opacity:0;filter:Alpha(Opacity=0);-webkit-transform:scale(20);transform:scale(20)}
.home .skin-box{position:absolute;left:50%;margin-left:-813.5px;bottom:40px;width:1627px;height:780px;background:url(../images/skin-box.png) no-repeat bottom center;z-index:2}
.home .skin-box p{position:absolute;opacity:0;filter:Alpha(Opacity=0);-webkit-transition:all .3s;transition:all .3s}
.home .skin-box p.show{cursor:pointer;z-index:10}
.home .skin-box p.show a{-webkit-transform:scale(1.1);transform:scale(1.1)}
.home .skin-box p a{display:block;-webkit-transition:all .3s;transition:all .3s}
.home .skin-box p img{display:block}
.home .skin-box p span{position:absolute;top:30px;display:flex;flex-direction:column;justify-content:center;align-items:center;width:200px;height:53px;line-height:53px;font-size:19px;color:#f9cf9b;background:url(../images/name-box.png) no-repeat;padding:20px}
.home .skin-box p.xqtd{left:0;bottom:154px;width:635px;height:627px;-webkit-transform:translate(510px,0);transform:translate(510px,0)}
.home .skin-box p.xqtd span{left:55px}
.home .skin-box p.gy{left:187px;bottom:134px;width:581px;height:543px;-webkit-transform:translate(300px,0);transform:translate(300px,0); z-index: 1;}
.home .skin-box p.gy span{top:60px;right:115px}
.home .skin-box p.rsxx{bottom:164px;right:383px;width:706px;height:537px;-webkit-transform:translate(-100px,0);transform:translate(-100px,0)}
.home .skin-box p.rsxx span{left:145px}
.home .skin-box p.swk{bottom:147px;right:114px;width:634px;height:633px;-webkit-transform:translate(-420px,0);transform:translate(-420px,0)}
.home .skin-box p.swk span{top:30px;right:115px}
.home .skin-box p.fw{bottom:165px;right:-13px;width:489px;height:456px;-webkit-transform:translate(-660px,0);transform:translate(-660px,0); z-index: 1;}
.home .skin-box p.fw span{top:80px;left:120px}
.home .skin-box .layer{position:absolute;left:0;bottom:0;width:1627px;height:780px;z-index:32}
.home .skin-box .layer:hover{cursor:pointer}
.home .skin-box .layer #map{width:1920px;height:1080px}
.home .story-nav{position:absolute;left:50%;margin-left:-797.5px;bottom:180px;display:flex;flex-direction:row;justify-content:center;align-items:center;width:1595px;height:76px;z-index:10;padding-left:130px;overflow-x:hidden}
.home .story-nav::after{position:absolute;left:0;top:0;width:130px;height:76px;content:'';background:url(../images/story-nav.png) no-repeat left 8px;-webkit-transition:width .3s .1s;transition:width .3s .1s;z-index:2}
.home .story-nav>div{position:relative;width:263px;height:76px;z-index:3}
.home .story-nav>div:nth-of-type(1) .tag{-webkit-transition:opacity .3s .1s,transform .3s .1s;transition:opacity .3s .1s,transform .3s .1s}
.home .story-nav>div:nth-of-type(2) .tag{-webkit-transition:opacity .3s .15s,transform .3s .15s;transition:opacity .3s .15s,transform .3s .15s}
.home .story-nav>div:nth-of-type(3) .tag{-webkit-transition:opacity .3s .2s,transform .3s .2s;transition:opacity .3s .2s,transform .3s .2s}
.home .story-nav>div:nth-of-type(4) .tag{-webkit-transition:opacity .3s .25s,transform .3s .25s;transition:opacity .3s .25s,transform .3s .25s}
.home .story-nav>div:nth-of-type(5) .tag{-webkit-transition:opacity .3s .3s,transform .3s .3s;transition:opacity .3s .3s,transform .3s .3s}
.home .story-nav a{display:inline-block;zoom:1}
.home .story-nav a:hover .coming,.home .story-nav a:hover .hover{display:flex}
.home .story-nav a:hover .tag{display:none}
.home .story-nav a p{display:none;flex-direction:row;justify-content:flex-start;align-items:center;text-align:center;height:76px;font-size:28px}
.home .story-nav a .tag{display:flex;justify-content:center;width:81px;color:#fae9c3;background:url(../images/icon-story.png) no-repeat;opacity:0;filter:Alpha(Opacity=0);-webkit-transform:translate(-100%,0);transform:translate(-100%,0)}
.home .story-nav a .coming,.home .story-nav a .hover{width:264px}
.home .story-nav a .coming i,.home .story-nav a .hover i{width:76px}
.home .story-nav a .coming span,.home .story-nav a .hover span{width:168px}
.home .story-nav a .hover{color:#c75621;background:url(../images/icon-story-hover.png) no-repeat}
.home .story-nav a .coming{color:#fae9c3;background:url(../images/icon-story-coming.png) no-repeat}
.home .story-nav a .coming span{display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:16px;line-height:20px}
.intro::after{background:url(../images/intro-bg.jpg) no-repeat center/cover}
.intro .cover-con{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:130px 150px 260px}
.intro .skin-nav{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;width:139px;z-index:3}
.intro .skin-nav a{position:relative;width:139px;height:139px;background:url(../images/head-box.png) no-repeat;-webkit-filter:brightness(.8);filter:brightness(.8)}
.intro .skin-nav a.on,.intro .skin-nav a:hover{-webkit-transform:scale(1.1);transform:scale(1.1);-webkit-filter:brightness(1);filter:brightness(1)}
.intro .skin-nav a.coming{background:url(../images/head-box-coming.png) no-repeat}
.intro .skin-nav a:nth-of-type(2),.intro .skin-nav a:nth-of-type(4){margin-left:-70px}
.intro .skin-nav a:nth-of-type(3){margin-left:-100px}
.intro .skin-nav a img{position:absolute;left:50%;top:50%;margin:-50px 0 0 -50px;width:100px;height:100px;background:#fff;-webkit-border-radius:50%;border-radius:50%}
.intro .skin-item{position:absolute;left:300px;top:60px;width:1451px;height:764px;background:url(../images/skin-item.png) no-repeat;padding:150px 705px 64px 75px;visibility:hidden;z-index:2}
.intro .skin-item.show{visibility:visible}
.intro .skin-item.show .img,.intro .skin-item.show .name,.intro .skin-item.show .skin-story{opacity:1;filter:Alpha(Opacity=100);-webkit-transform:translate(0,0);transform:translate(0,0)}
.intro .skin-item .btns-box,.intro .skin-item .name,.intro .skin-item .play-btn,.intro .skin-item .skin-story{position:relative;z-index:2}
.intro .skin-item .img,.intro .skin-item .name,.intro .skin-item .skin-story{opacity:0;filter:Alpha(Opacity=0);-webkit-transition:all .3s;transition:all .3s}
.intro .skin-item .name{height:96px;-webkit-transform:translate(0,-100%);transform:translate(0,-100%)}
.intro .skin-item .skin-story{height:320px;font-size:22px;color:#491309;background:rgba(255,255,255,.48);overflow-y:auto;margin-top:30px;padding:10px;-webkit-transform:translate(40%,0);transform:translate(40%,0)}
.intro .skin-item .skin-story p{text-indent:2em}
.intro .skin-item .btns-box{display:flex;flex-direction:row;justify-content:center;align-items:center;margin-top:30px}
.intro .skin-item .btns-box a{width:296px;height:69px}
.intro .skin-item .btns-box a:hover{-webkit-filter:brightness(1.1);filter:brightness(1.1)}
.intro .skin-item .btns-box .detail-btn{background:url(../images/btn-detail.png) no-repeat}
.intro .skin-item .btns-box .paint-btn{background:url(../images/btn-paint.png) no-repeat}
.intro .skin-item .play-btn{position:absolute;right:60px;top:160px;width:139px;height:138px;background:url(../images/btn-play.png) no-repeat;z-index:3;-webkit-transition:all .3s;transition:all .3s}
.intro .skin-item .play-btn:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}
.intro .img{position:absolute;bottom:-200px;z-index:1;-webkit-transform:translate(-30%,0);transform:translate(-30%,0)}
.intro .skin-xqtd .name{background:url(../images/name-xqtd.png) no-repeat center}
.intro .skin-xqtd .img{right:-330px}
.intro .skin-gy .name{background:url(../images/name-gy.png) no-repeat center}
.intro .skin-gy .img{right:-184px;bottom:-120px}
.intro .skin-rsxx .name{background:url(../images/name-rsxx.png) no-repeat center}
.intro .skin-rsxx .img{right:-380px;bottom:-105px}
.intro .skin-swk .name{background:url(../images/name-swk.png) no-repeat center}
.intro .skin-swk .img{right:-175px}
.intro .skin-fw .name{background:url(../images/name-fw.png) no-repeat center}
.intro .skin-fw .img{right:-415px;bottom:-70px}
.story::after{background:url(../images/story-bg.jpg) no-repeat center/cover}
.story .story-box{position:absolute;left:50%;margin-left:-935px;top:10px;display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:1870px;height:926px;background:url(../images/story-box.png) no-repeat;padding:125px 345px 166px 280px}
.story .story-tab{width:268px}
.story .story-tab>div{height:76px;overflow:hidden;-webkit-transition:height .3s;transition:height .3s}
.story .story-tab>div.open{height:auto}
.story .story-tab>div>a{position:relative;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;height:76px;line-height:76px;text-align:center;font-size:24px;color:#fae9c3;background:url(../images/story-tab.png) no-repeat;z-index:2}
.story .story-tab>div>a.on,.story .story-tab>div>a:hover{color:#c75621;background:url(../images/story-tab-on.png) no-repeat}
.story .story-tab>div>a i{width:76px;text-align:center}
.story .story-tab>div>a span{width:177px;text-align:center}
.story .story-tab>div>div{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:0 20px}
.story .story-tab>div>div a{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;height:60px;line-height:60px;font-size:20px;color:#fae9c4}
.story .story-tab>div>div a.on{font-size:24px}
.story .story-tab>div>div a.on::before{background:url(../images/icon-dot-on.png) no-repeat center}
.story .story-tab>div>div a::before{width:35px;height:35px;content:'';background:url(../images/icon-dot.png) no-repeat center;margin-right:20px}
.story .story-con{width:930px;height:100%;padding:50px}
.story .story-con>div{height:100%;font-size:22px;color:#752618;overflow-y:auto}
.story .story-con>div p{text-indent:2em}
.go-footer{position:fixed;bottom:30px;right:30px;display:inline-block;zoom:1;height:30px;line-height:30px;font-size:14px;color:#000;background:rgba(255,255,255,.75);z-index:40;padding:0 20px;border-radius:15px}
.go-footer.open i{-webkit-transform:rotate(180deg);transform:rotate(180deg)}
.go-footer i{display:inline-block;zoom:1;width:22px;height:22px;background:url(../images/icon-arrow.png) no-repeat;margin-left:5px;vertical-align:middle;-webkit-transition:all .3s;transition:all .3s}
.footer{position:fixed;left:0;bottom:0;width:100%;font-size:12px;color:#fff;background:#000;padding:10px 0;z-index:12;visibility:hidden;-webkit-transform:translate(0,100%);transform:translate(0,100%);-webkit-transition:all .3s;transition:all .3s}
.footer.show{visibility:visible;-webkit-transform:translate(0,0);transform:translate(0,0)}
.footer a{color:#fff}
.lt8{position:fixed!important;left:0;top:0;display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%;height:50px;line-height:50px;text-align:center;font-size:20px;color:#1e5494;background:#fff;border-bottom:1px solid #e6e6c6;z-index:10001}
.lt8 .google-btn{padding:0 20px;height:40px;line-height:40px;color:#264694;background:#f1e5b0}
.pop-box{position:fixed;left:0;top:0;width:100%;height:100%;z-index:1000;visibility:hidden}
.pop-box.show{visibility:visible}
.pop-box.show .pop{-webkit-transform:scale(1,1);transform:scale(1,1);opacity:1;filter:Alpha(Opacity=100)}
.pop-box.show::after{opacity:.6;filter:Alpha(Opacity=60)}
.pop-box .pop{-webkit-transition:all .3s;transition:all .3s;-webkit-transform:scale(1,0);transform:scale(1,0);opacity:0;filter:Alpha(Opacity=0);z-index:3;padding:50px 70px}
.pop-box::after{position:absolute;left:0;top:0;content:'';width:100%;height:100%;background:#000;opacity:0;filter:Alpha(Opacity=0);-webkit-transition:opacity .3s;transition:opacity .3s;z-index:2}
.pop-box .btns-box{display:flex;flex-direction:row;justify-content:space-around}
.pop-box .btn{height:50px;line-height:50px;text-align:center;font-size:22px;color:#fff;background:#d9c292;-webkit-border-radius:8px;border-radius:8px}
.pop-box .btn:hover{-webkit-filter:brightness(1.1);filter:brightness(1.1)}
.pop-box .close-btn{position:absolute;right:-10px;top:25px;width:40px;height:40px;background:url(../images/btn-close.png) no-repeat center;z-index:10}
.pop-box .close-btn:hover{-webkit-transform:rotate(180deg);transform:rotate(180deg)}
.tip-pop.show,.usual-pop.show{z-index:10001}
.tip-pop .pop,.usual-pop .pop{position:absolute;left:50%;top:50%;margin:-60px 0 0 -300px;width:600px;height:120px;background:rgba(0,0,0,.8);border-radius:14px}
.tip-pop .close-btn,.usual-pop .close-btn{right:-50px}
.tip-pop .pop-con,.usual-pop .pop-con{position:relative;height:100%;text-align:center}
.tip-pop .pop-con p,.usual-pop .pop-con p{width:100%;font-size:24px;color:#fbfaea}
.version-pop.show{z-index:100000}
.version-pop .pop{position:absolute;left:50%;top:50%;margin:-150px 0 0 -250px;width:500px;height:300px;font-size:24px;color:#264694;background:#fff}
.version-pop .pop-con{width:100%;text-align:center}
.version-pop .btns-box{text-align:center;margin-top:30px}
.version-pop .google-btn{padding:0 30px;height:60px;line-height:60px;color:#264694;background:#f1e5b0}
.paint-pop .pop,.video-pop .pop{position:absolute;left:50%;top:50%;margin:-224px 0 0 -400px;width:800px;height:448px;background:#fff;padding:0}
.paint-pop .close-btn,.video-pop .close-btn{right:-45px;top:-10px}
.paint-pop .pop-con,.video-pop .pop-con{width:100%;height:100%;overflow:hidden}
.paint-pop .pop-con img,.video-pop .pop-con img{width:100%;height:100%}
.paint-pop iframe,.paint-pop video,.video-pop iframe,.video-pop video{width:100%;height:100%;border:0;outline:0;background:#000}

.footer { padding: 40px 0; text-align: center; font-size: 16px; }
.footer p { padding: 6px 0; }
.footer a { margin: 0 5px;  }
.footer a:hover { text-decoration:underline; }

#videoBox iframe { width:800px; height:448px; }

/*https://img9.99.com/yhkd/image/act/2024/opera/*/