.loadingBox-teamlogo{display:block;width:0;height:1.4rem;position:relative;overflow:hidden}
.loadingBox-teamlogo::before{content:"";display:block;background:url(../images/loading/teamlogo.png) no-repeat left 0/11.11rem 1.4rem;width:11.11rem;height:1.4rem;position:absolute;top:0;left:7rem;margin-left:-5.555rem}
.loadingBox-lucia{display:block;background-image:url(../images/loading/lucia-ani.png);background-repeat:no-repeat;background-size:11rem 1.1rem;background-position:0 0;width:1.1rem;height:1.1rem;position:absolute;bottom:.08rem;left:0;-webkit-transform:translateX(-1.1rem);transform:translateX(-1.1rem);-webkit-animation:luciaAni steps(10) .5s infinite;animation:luciaAni steps(10) .5s infinite}
@-webkit-keyframes luciaAni{
0%{background-position:0 0}
100%{background-position:-11rem 0}
}
@keyframes luciaAni{
0%{background-position:0 0}
100%{background-position:-11rem 0}
}
.loadingBox-line{display:block;width:0;height:.08rem;position:absolute;bottom:0;left:0;overflow:hidden}
.loadingBox-line::before{content:"";display:block;width:14rem;height:.08rem;background-color:#fff}
.readyMode{position:absolute;top:0;z-index:3;background-color:#000;width:100%;height:100%;overflow:hidden;opacity:0;-webkit-transition:opacity .5s;transition:opacity .5s;cursor:url(../spriteSheet/mouse.png),auto}
.readyMode.cur{opacity:1}
.wrapper{width:100%;height:100%;overflow:hidden;background:url(../images/other/bg.png) no-repeat center 0/cover;display:none}
.home-wrap{width:100%;height:100%;position:relative;z-index:999;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.home-wrap .home-page{width:100%;height:100%;overflow:hidden;position:relative;font-size:50px;color:#000;text-align:center}
.home-wrap .home-page.page6{height:auto!important;border-top:.1rem solid #f05;background:#000}
.home-wrap .home-page.page6 .fp-tableCell{height:100%!important}
.nav{width:100%;height:1.16rem;position:fixed;top:0;left:0;z-index:1000}
.nav-box{width:100%;height:100%;background-color:#000000ba;-webkit-transform:translateY(-100%);transform:translateY(-100%);-webkit-transition:all .5s;transition:all .5s}
.nav-box.cur{-webkit-transform:translateY(0);transform:translateY(0)}
.nav:hover .nav-box{-webkit-transform:translateY(0);transform:translateY(0)}
.nav-container{width:25.6rem;height:1.16rem;margin:0 auto;position:relative}
.nav-logo{float:left;width:2rem;margin-left:.8rem;margin-top:.3rem}
.nav-logo img{width:100%;height:100%}
.nav-menuBox{float:left;width:12rem;margin-left:3rem;position:relative}
.nav-menu{width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
.nav-menu li a{display:block;width:100%;height:100%;color:#fff;font-size:.34rem;line-height:1.16rem;-webkit-transition:color .3s;transition:color .3s;font-weight:700}
.nav-menu li.active a{color:#f94a53}
.nav-menu li:hover a{color:#f94a53}
.page5-menuBox{display:none;width:3.1rem;height:2.5rem;background-color:#000000ba;padding:.3rem 0;position:absolute;top:1.16rem;right:-.8rem}
.page5-menu{width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
.page5-menu li a{display:block;width:100%;color:#fff;font-size:.34rem;text-align:center;-webkit-transition:color .3s;transition:color .3s}
.page5-menu li a:hover{color:#f94a53}
.page5-menu::before{content:"";background:url(../images/other/icon.png) no-repeat 0 0/100% 100%;width:2.73rem;height:.05rem;position:absolute;top:.85rem;left:50%;margin-left:-1.365rem}
.page5-menu::after{content:"";background:url(../images/other/icon.png) no-repeat 0 0/100% 100%;width:2.73rem;height:.05rem;position:absolute;top:1.6rem;left:50%;margin-left:-1.365rem}
.nav-snsBox{float:left;width:3rem;height:.55rem;margin-left:3.8rem;margin-top:.3rem}
.nav-sns{width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
.nav-sns li{width:.55rem;height:.55rem}
.nav-sns li a{display:block;width:100%;height:100%}
.nav-sns li:first-child a{background:url(../images/other/twitter.png) no-repeat 0 0/1.86rem .55rem}
.nav-sns li:nth-child(2) a{background:url(../images/other/discord.png) no-repeat 0 0/1.86rem .55rem}
.nav-sns li:nth-child(3) a{background:url(../images/other/youtube.png) no-repeat 0 0/1.86rem .55rem}
.nav-sns li:nth-child(4) a{background:url(../images/other/support.png) no-repeat 0 0/1.86rem .55rem}
.nav-sns li a:hover{background-position-x:-1.322rem}
.nav-sns li:nth-child(4) a:hover{background-position-x:-1.3rem}
.page1-video{width:100%;height:100%;overflow:hidden;position:relative}
.page1-video::before{content:"";background:url(../images/page1/mask.png) no-repeat 0 0/100% 100%;width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;opacity:.5}
.video-bg{position:absolute;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);opacity:0;visibility:hidden;-webkit-transition:opacity 2s;transition:opacity 2s}
.video-bg.cur{opacity:1;visibility:visible}

.page1-recBox{width:2.4rem;height:.5rem;position:absolute;top:1.54rem;right:.5rem;opacity:0}
.is-active .page1-recBox{-webkit-animation:fadeInDown .5s ease both;animation:fadeInDown .5s ease both}
.rec-ani{border:2px solid #ed084d;-webkit-box-shadow:0 0 10px #ed084d;box-shadow:0 0 10px #ed084d;width:.32rem;height:.32rem;border-radius:50%;position:absolute;top:.1rem;left:.1rem}
.rec-ani::before{content:"";width:.2rem;height:.2rem;background-color:#ed084d;border-radius:50%;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-animation:recAni 1s ease-in-out infinite;animation:recAni 1s ease-in-out infinite}
@-webkit-keyframes recAni{
0%{opacity:0}
50%{opacity:1}
100%{opacity:0}
}
@keyframes recAni{
0%{opacity:0}
50%{opacity:1}
100%{opacity:0}
}
.rec-icon{width:.67rem;height:.27rem;position:absolute;top:.1rem;left:.56rem}
.rec-connection{background:url(../images/page1/contacting.png) no-repeat 0 0/100% 100%;width:.82rem;height:.22rem;position:absolute;top:.02rem;left:1.3rem;text-indent:-999em}
.rec-time{color:#fff;font-size:.16rem;position:absolute;top:.3rem;left:1.32rem}
.page1-playBtn{width:1.3rem;height:1.43rem;position:absolute;top:50%;left:50%;margin-left:-.65rem;margin-top:-.715rem;z-index:3;opacity:0;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
.page1-playBtn img{width:100%}
.page1-playBtn:hover{opacity:1}
.page1-downloadBox{background:url(../images/page1/download-bg.png) no-repeat 0 0/100% 100%;width:6.83rem;height:1.83rem;padding:.6rem .84rem;position:absolute;bottom:1.9rem;left:50%;margin-left:-3.415rem;z-index:4;opacity:0}
.is-active .page1-downloadBox{-webkit-animation:zoomIn1 .5s ease both;animation:zoomIn1 .5s ease both}
@-webkit-keyframes zoomIn1{
0%{-webkit-transform:scale3d(.3,.3,.3);opacity:0;transform:scale3d(.3,.3,.3)}
100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}
@keyframes zoomIn1{
0%{-webkit-transform:scale3d(.3,.3,.3);opacity:0;transform:scale3d(.3,.3,.3)}
100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}
.page1-download{width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
.page1-download a{width:1.89rem;height:.61rem;-webkit-transition:all .3s;transition:all .3s}
.page1-download a.page1-as{width:2.11rem;height:.62rem}
.page1-download a.page1-gp{width:2.07rem;height:.63rem}
.page1-download a img{width:100%}
.page1-download a:hover{-webkit-transform:translateY(-5%);transform:translateY(-5%)}
.page1-scroll{width:.72rem;height:.91rem;position:absolute;bottom:.6rem;left:50%;margin-left:-.36rem}
.page1-scroll.scrollAni img{-webkit-animation:scrollAni 1.5s infinite;animation:scrollAni 1.5s infinite}
.page1-scroll img{width:100%}
@-webkit-keyframes scrollAni{
0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}
100%{-webkit-transform:translateY(.4rem);transform:translateY(.4rem);opacity:0}
}
@keyframes scrollAni{
0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}
100%{-webkit-transform:translateY(.4rem);transform:translateY(.4rem);opacity:0}
}
.home-wrap .home-page.page2{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.page2-banner{width:6.4rem;height:8.8rem;overflow:hidden;opacity:0}
.is-active .page2-banner{-webkit-animation:fadeInLeft .5s ease both;animation:fadeInLeft .5s ease both}
.page2-banner .swiper-container-news{width:100%;height:100%}
.page2-banner .swiper-container-news .swiper-slide{width:100%;height:100%}
.page2-banner .swiper-container-news .swiper-slide img{width:100%}
.swiper-pagination-news{position:absolute;text-align:right;z-index:1;bottom:.2rem!important}
.swiper-pagination-news .swiper-pagination-bullet{width:.8rem;height:.12rem;margin:0 .1rem;background-color:#7d7c7f;opacity:1!important;border-radius:0!important;-webkit-transition:background .3s;transition:background .3s}
.swiper-pagination-news .swiper-pagination-bullet-active{background-color:#f05}
.page2-news{width:9.56rem;height:8.89rem;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;opacity:0}
.is-active .page2-news{-webkit-animation:fadeInRight .5s ease both;animation:fadeInRight .5s ease both}
.page2-news-tagBox{width:8rem;height:.57rem;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
.page2-news-tagBox li{width:20%;height:.57rem;background-image:url(../images/page2/tab-li-bg.png);background-repeat:no-repeat;background-size:3.38rem .57rem;background-position:0 0;color:#a3a3ae;font-size:.24rem;text-align:center;line-height:.57rem;cursor:pointer}
.page2-news-tagBox li:hover{background-position:-1.76rem 0;color:#4d4d50;font-weight:700}
.page2-news-tagBox li.cur{background-position:-1.76rem 0;color:#4d4d50;font-weight:700}
.page2-news-conBox{width:100%;height:8.3rem}
.page2-news-conBox ul{width:100%;height:100%;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-moz-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;overflow:hidden;display:none}
.page2-news-conBox ul.cur{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex}
.page2-news-conBox ul li{background:url(../images/page2/tab-con-bg-0.png) no-repeat 0 0/100% 100%;width:4.73rem;height:2.66rem;margin-top:.1rem;-webkit-transition:background .5s;transition:background .5s;cursor:pointer}
.page2-news-conBox ul li:nth-child(2n){margin-left:.1rem}
.page2-news-conBox ul li:hover{background:url(../images/page2/tab-con-bg-1.png) no-repeat 0 0/100% 100%}
.page2-news-conBox ul li a{display:block;width:100%;height:100%;padding:.5rem .44rem .44rem .5rem;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
.page2-news-con-row{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center}
.page2-news-con-tag{font-size:.24rem;color:#aea9ac;-webkit-transition:all .5s;transition:all .5s;position:relative;font-weight:700}
.page2-news-conBox ul li:hover .page2-news-con-tag{color:#000}
.page2-news-con-tag::after{content:"";width:100%;height:.06rem;position:absolute;bottom:-.16rem;left:.01rem;background-color:#f05;-webkit-transition:all .3s;transition:all .3s}
.page2-news-con-time{color:#aea9ac;font-size:.18rem;-webkit-transition:all .5s;transition:all .5s}
.page2-news-conBox ul li:hover .page2-news-con-time{color:#000}
.page2-news-con-title{font-size:.2rem;color:#aea9ac;text-align:left;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-transition:all .5s;transition:all .5s}
.page2-news-conBox ul li:hover .page2-news-con-title{color:#000}
.page2-news-con-more{text-indent:-999em;background-image:url(../images/page2/detail-more.png);background-repeat:no-repeat;background-size:1.21rem 1.06rem;background-position:0 -.68rem;width:1.21rem;height:.42rem;-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end}
.page2-news-conBox ul li:hover .page2-news-con-more{background-position:0 0}
.page2-more{width:1.11rem;height:.57rem;background-image:url(../images/page2/news-more.png);background-repeat:no-repeat;background-size:1.11rem 1.22rem;background-position:0 0;position:absolute;top:0;right:0;text-indent:-999em}
.page2-more:hover{background-position:0 -.65rem}
.page3-icon-lt{width:3.3rem;height:12.53rem;position:absolute;top:.54rem;left:.33rem;z-index:11}
.page3-icon-rt{width:4.07rem;height:13.3rem;position:absolute;top:.54rem;right:.33rem;z-index:11}
.page3-icon-rb{width:2.58rem;height:1.39rem;position:absolute;bottom:.54rem;right:.78rem;z-index:11}
.page3-icon-lb{width:2.25rem;height:.58rem;position:absolute;bottom:.93rem;left:.82rem;z-index:11}
.swiper-wv{width:100%;height:100%}
.swiper-wv.opened::before{content:"";width:100%;height:100%;background-color:#00000075;position:absolute;top:0;left:0;z-index:10}
.swiper-wv .swiper-slide{background:no-repeat center center/cover;width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center}
.page3-bgV{background:no-repeat center 0/cover;width:100%;height:100%;overflow:hidden;position:absolute;z-index:-1}
.swiper-wv .swiper-slide .wv-content{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;margin-top:-1rem}
.swiper-wv .swiper-slide .wv-desc{width:9.4rem;color:#e1dfdf;font-size:.3rem;line-height:1.8;margin-top:.28rem;text-align:center;opacity:0}
.is-active .swiper-wv .swiper-slide .wv-desc{-webkit-animation:fadeInUp .5s ease both;animation:fadeInUp .5s ease both}
.swiper-wv .swiper-slide .wv-detail{width:1.03rem;height:1.08rem;margin-top:.84rem;z-index:10;cursor:pointer;outline:0;border:none;position:relative;background:0 0;opacity:0}
.is-active .swiper-wv .swiper-slide .wv-detail{-webkit-animation:fadeInUp .5s .2s ease both;animation:fadeInUp .5s .2s ease both}
.swiper-wv .swiper-slide .wv-detail img{width:1.03rem;height:1.08rem;position:absolute;top:0;left:0;z-index:2}
.swiper-wv .swiper-slide .wv-detail::after{content:"";width:.6rem;height:.6rem;position:absolute;top:.26rem;left:.21rem;background-color:#fff;opacity:.4;-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-animation:wave 1s linear infinite;animation:wave 1s linear infinite;-webkit-transform-origin:center center;transform-origin:center center}
@-webkit-keyframes wave{
0%{-webkit-transform:rotate(45deg) scale(1);transform:rotate(45deg) scale(1);opacity:.4}
100%{-webkit-transform:rotate(45deg) scale(2);transform:rotate(45deg) scale(2);opacity:0}
}
@keyframes wave{
0%{-webkit-transform:rotate(45deg) scale(1);transform:rotate(45deg) scale(1);opacity:.4}
100%{-webkit-transform:rotate(45deg) scale(2);transform:rotate(45deg) scale(2);opacity:0}
}
.swiper-wv-thumbsBox{width:12rem;height:1.59rem;position:absolute;bottom:-.5rem;left:50%;margin-left:-6rem;z-index:2;opacity:0}
.is-active .swiper-wv-thumbsBox{-webkit-animation:fadeInUp .5s .4s ease both;animation:fadeInUp .5s .4s ease both}
.wv-next::after,.wv-prev::after{display:none!important}
.wv-prev{background:url(../images/page3/arrow.png) no-repeat 0 0/100% 100%;width:.46rem;height:.4rem;-webkit-transform:rotate(180deg);transform:rotate(180deg);left:1.4rem!important;margin-top:-1.27rem!important;opacity:1!important;-webkit-transition:all .5s;transition:all .5s}
.wv-next{background:url(../images/page3/arrow.png) no-repeat 0 0/100% 100%;width:.46rem;height:.4rem;right:1.4rem!important;margin-top:-1.27rem!important;opacity:1!important;-webkit-transition:all .5s;transition:all .5s}
.wv-next.opened,.wv-prev.opened{opacity:0!important}
.swiper-wv-thumbsCon{-webkit-transform:scale(.8);transform:scale(.8)}
.swiper-wv-thumbs{width:9.4rem;position:absolute;bottom:-.3rem;left:50%;margin-left:-4.7rem;padding-top:1rem;padding-bottom:.3rem;-webkit-transition:all .5s;transition:all .5s}
.swiper-wv-thumbs .swiper-slide{height:.72rem;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
.wv-thumbs-line{width:1rem;height:.72rem;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center}
.wv-thumbs-line span{width:100%;height:1px;background-color:#fff}
.wv-thumbs-icon{width:.88rem;height:.72rem;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer}
.wv-thumbs-icon span{width:.3rem;height:.3rem;-webkit-transform:rotate(45deg);transform:rotate(45deg);background-color:#ababab}
.wv-thumbs-icon span::after{content:"";opacity:0;position:absolute;top:-.1rem;left:-.1rem;width:.5rem;height:.5rem;border:.02rem solid #fff}
.swiper-wv-thumbs .swiper-slide-thumb-active .wv-thumbs-icon span::after{opacity:1}
.swiper-wv-thumbs .swiper-slide-thumb-active .wv-thumbs-icon span{background-color:#fff}
.wv-thumbs-name{width:2rem;height:.69rem;position:absolute;left:.6rem;top:-.8rem;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer}
.wv-thumbs-name span{background-image:url(../images/page3/thumb-bg.png);background-repeat:no-repeat;background-size:4.14rem .69rem;background-position:-2.26rem -.08rem;width:1.9rem;height:.58rem;color:#ababab;font-weight:700;font-size:.24rem;line-height:.58rem;text-align:center}
.swiper-wv-thumbs .swiper-slide-thumb-active .wv-thumbs-name span{background-position:0 0;width:2rem;height:.69rem;line-height:.69rem;color:#fff}
.wv-thumbs-lock{width:.25rem;height:.3rem;position:absolute;bottom:-.3rem;right:.3rem}
.wv-thumbs-lock img{width:100%;height:100%}
.page3-iconBox.opened img{opacity:.3}
.page3-detailBox.start .swiper-clewsBox{-webkit-animation:widthShow 1s linear both;animation:widthShow 1s linear both}
@-webkit-keyframes widthShow{
0%{width:12.6rem}
100%{width:100%}
}
@keyframes widthShow{
0%{width:12.6rem}
100%{width:100%}
}

.clews-wvName{width:1.03rem;position:absolute;top:1.4rem;left:.96rem;opacity:0}
.page3-detailBox.start .clews-wvName{-webkit-animation:fadeInLeft .3s linear both;animation:fadeInLeft .3s linear both}
.clews-wvName img{width:100%}
.swiper-clews .swiper-slide{width:12.61rem;height:8.55rem;text-align:initial;-webkit-filter:brightness(60%);filter:brightness(60%)}
.clews-name{display:inline-block;padding:0 .26rem;height:.52rem;background:-webkit-linear-gradient(135deg,transparent .1rem,#fff 0);background:linear-gradient(-45deg,transparent .1rem,#fff 0);color:#000;font-size:.3rem;font-weight:700;line-height:.52rem;margin-top:.66rem}
.clews-close{background-image:url(../images/page3/close.png);background-repeat:no-repeat;background-size:.65rem 1.6rem;background-position:0 0;width:.65rem;height:.65rem;float:right;cursor:pointer;display:none;margin-top:.5rem}
.clews-close:hover{background-position:0 -.96rem}
.clews-img{margin-top:.24rem;width:12.61rem;height:7.13rem;position:relative}
.clews-img img{width:100%}
.clews-img::before{content:"";width:100%;height:100%;position:absolute;top:0;left:0;background:-webkit-linear-gradient(top,transparent,#00000087);opacity:0;-webkit-transition:opacity .5s;transition:opacity .5s}
.clews-desc{width:100%;color:#fff;line-height:1.5;font-size:.24rem;overflow:hidden;position:absolute;bottom:.38rem;padding:0 .7rem;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:10;-webkit-box-orient:vertical;opacity:0;-webkit-transition:all .5s;transition:all .5s;-webkit-transform:translateY(100%);transform:translateY(100%);letter-spacing:2px}
.swiper-clews .swiper-slide-active:hover .clews-desc{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
.swiper-clews .swiper-slide-active:hover .clews-img::before{opacity:1}
.swiper-clews .swiper-slide-active .clews-close{display:block}
.swiper-clews .swiper-slide-active{-webkit-filter:brightness(100%);filter:brightness(100%);cursor:pointer;overflow:hidden}
.swiper-pagination-clews{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;height:.3rem;bottom:0!important;opacity:0}
.page3-detailBox.start .swiper-pagination-clews{-webkit-animation:fadeInUp .3s linear both;animation:fadeInUp .3s linear both}
.swiper-pagination-clews .swiper-pagination-bullet{width:.14rem;height:.14rem;background:#ccc!important;opacity:1!important;margin:0 .16rem!important;-webkit-transition:all .3s;transition:all .3s}
.swiper-pagination-clews .swiper-pagination-bullet-active{-webkit-transform:scale(1.4);transform:scale(1.4);background:#fff!important}
.clews-next::after,.clews-prev::after{display:none!important}
.clews-prev{width:2.5rem;height:4.8rem;left:0!important;margin-top:-3.2rem!important}
.clews-next{width:2.5rem;height:4.8rem;right:0!important;margin-top:-3.2rem!important}
.home-wrap .home-page.page4{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.page4-container{width:25.6rem;height:14.4rem;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.page4-liBox{width:2.1rem;height:8.76rem;position:absolute;top:2.92rem;left:1.94rem;z-index:10;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;opacity:0}
.is-active .page4-liBox{-webkit-animation:fadeInLeft .5s ease both;animation:fadeInLeft .5s ease both}
.page4-liBox ul{width:2.1rem;height:8rem;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
.page4-liBox ul li{width:2.1rem;height:1.17rem;position:relative}
.page4-liBox ul li::after{content:"";width:0;height:1.4rem;border-left:1px dashed #bcbcbc;position:absolute;top:1.12rem;left:.14rem}
.page4-liBox ul li:last-child:after{display:none}
.page4-liBox ul li a{width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
.page4-liBox ul li a .li-l{background-image:url(../images/page4/bullet.png);background-repeat:no-repeat;background-size:.28rem .7rem;background-position:0 0;width:.28rem;height:.28rem;position:relative}
.page4-liBox ul li.cur a .li-l,.page4-liBox ul li:hover a .li-l{background-position:.01rem -.415rem}
.page4-liBox ul li a .li-l span{color:#afb0b0;font-size:.2rem;position:absolute;bottom:-.3rem;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}
.page4-liBox ul li a .li-r{width:1.54rem;height:1.17rem;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center}
.page4-liBox ul li a .li-r img{width:1.03rem;height:1.17rem;-webkit-filter:grayscale(100%);filter:grayscale(100%)}
.page4-liBox ul li.cur a .li-r img,.page4-liBox ul li:hover a .li-r img{-webkit-filter:grayscale(0);filter:grayscale(0)}
.page4-liBox ul li a .li-r span{background:url(../images/page4/arrow-lr.png) no-repeat 0 0/100% 100%;width:1.54rem;height:.18rem;position:absolute;opacity:0}
.page4-liBox ul li.cur a .li-r span{opacity:1}
.page4-navigation{width:.36rem;height:100%;position:absolute;top:.12rem;left:-.01rem;z-index:-1;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
.page4-next,.page4-prev{background:transparent url(../images/page4/arrow-t.png) no-repeat 0 0/100% 100%;width:.31rem;height:.36rem;outline:0;border:none;cursor:pointer}
.page4-next{-webkit-transform:rotate(180deg);transform:rotate(180deg)}
.page4-conBox{width:100%;height:100%;position:absolute;top:0;left:0}
.page4-tectosome{width:25.6rem;height:14.4rem;position:absolute;top:0;left:0;display:none}
.page4-tectosome.cur{display:block}
.page4-bg,.page4-info{width:25.6rem;height:14.4rem;position:absolute;top:0;left:0;opacity:0}
.is-active .cur .page4-bg{-webkit-animation:fadeInRight1 .6s ease both;animation:fadeInRight1 .6s ease both}
@-webkit-keyframes fadeInRight1{
0%{-webkit-transform:translate3d(3rem,0,0);opacity:0;transform:translate3d(3rem,0,0)}
100%{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}
}
@keyframes fadeInRight1{
0%{-webkit-transform:translate3d(3rem,0,0);opacity:0;transform:translate3d(3rem,0,0)}
100%{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}
}
@-webkit-keyframes fadeInRight2{
0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}
100%{-webkit-transform:translateZ(0);transform:translateZ(0)}
}
@keyframes fadeInRight2{
0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}
100%{-webkit-transform:translateZ(0);transform:translateZ(0)}
}
.is-active .cur .page4-info-r{-webkit-animation:fadeInRight1 .6s .2s ease both;animation:fadeInRight1 .6s .2s ease both}
.is-active .cur .page4-info-l1{-webkit-animation:fadeInUp1 .5s .2s ease both;animation:fadeInUp1 .5s .2s ease both}
.is-active .cur .page4-info-l2{-webkit-animation:fadeInUp1 .5s .3s ease both;animation:fadeInUp1 .5s .3s ease both}
.is-active .cur .page4-info-l3{-webkit-animation:fadeInUp1 .5s .5s ease both;animation:fadeInUp1 .5s .5s ease both}
@-webkit-keyframes fadeInUp1{
0%{opacity:0;-webkit-transform:translate3d(0,200px,0);transform:translate3d(0,200px,0)}
100%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
}
@keyframes fadeInUp1{
0%{opacity:0;-webkit-transform:translate3d(0,200px,0);transform:translate3d(0,200px,0)}
100%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
}
.is-active .page4-tectosome.active .page4-bg{-webkit-animation:fadeInRight1 .6s ease both;animation:fadeInRight1 .6s ease both}
.is-active .page4-tectosome.active .page4-info-r{-webkit-animation:fadeInRight1 .6s .2s ease both;animation:fadeInRight1 .6s .2s ease both}
.is-active .page4-tectosome.active .page4-info-l1{-webkit-animation:fadeInUp1 .5s ease both;animation:fadeInUp1 .5s ease both}
.is-active .page4-tectosome.active .page4-info-l2{-webkit-animation:fadeInUp1 .5s .1s ease both;animation:fadeInUp1 .5s .1s ease both}
.is-active .page4-tectosome.active .page4-info-l3{-webkit-animation:fadeInUp1 .5s .3s ease both;animation:fadeInUp1 .5s .3s ease both}
.page4-ani{background-repeat:no-repeat;background-position:0 0;background-size:15rem 15rem;width:15rem;height:15rem;position:absolute;top:0;left:0;z-index:2;opacity:0}
.is-active .cur .page4-ani{-webkit-animation:fadeInRight1 .6s .6s ease both;animation:fadeInRight1 .6s .6s ease both}
.is-active .page4-tectosome.active .page4-ani{-webkit-animation:fadeInRight1 .6s .6s ease both;animation:fadeInRight1 .6s .6s ease both}
.page4-cv-0{width:2.99rem;height:.76rem;position:absolute;top:3.24rem;right:10rem;cursor:pointer;z-index:1;-webkit-transition:all .3s;transition:all .3s;-webkit-filter:brightness(1);filter:brightness(1)}
.page4-cv{background-repeat:no-repeat;background-size:2.99rem .76rem;background-position:0 0;width:2.99rem;height:.76rem;opacity:0}
.is-active .cur .page4-cv{-webkit-animation:fadeInRight .6s .4s ease both;animation:fadeInRight .6s .4s ease both}
.is-active .page4-tectosome.active .page4-cv{-webkit-animation:fadeInRight .6s .4s ease both;animation:fadeInRight .6s .4s ease both}
.page4-cv-0.cur{-webkit-transform:translateY(-10%);transform:translateY(-10%);-webkit-filter:brightness(1.2);filter:brightness(1.2)}
.page4-cv-1{width:3.49rem;height:.76rem;position:absolute;top:3.24rem;right:10rem;cursor:pointer;z-index:3}
.page5-bgBox .page5-bg.cur{opacity:1}
.page5-bgBox .comic-bg{background:url(../images/page5/comic-bg.png) no-repeat center 0/cover}
.page5-bgBox .painting-bg{background:url(../images/page5/painting-bg.png) no-repeat center 0/cover}
.page5-box{width:15.42rem;height:9.47rem;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
.page5-box a{width:4.96rem;height:9.46rem;position:relative;opacity:0}
.is-active .page5-box a:first-child{-webkit-animation:fadeInUp .5s .3s ease both;animation:fadeInUp .5s .3s ease both}
.is-active .page5-box a:nth-child(2){-webkit-animation:fadeInUp 1s .3s ease both;animation:fadeInUp 1s .3s ease both}
.is-active .page5-box a:last-child{-webkit-animation:fadeInUp 1.5s .3s ease both;animation:fadeInUp 1.5s .3s ease both}
.page5-box a img{width:100%;height:100%;position:absolute;top:0;left:0;z-index:2;opacity:1;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:all .5s;transition:all .5s}
.page5-box a img.cur{opacity:0;-webkit-transform:scale(.96);transform:scale(.96)}
.page5-box a video{width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;opacity:0;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:all .3s;transition:all .3s}
.page5-box a video.cur{opacity:1;-webkit-transform:scale(.96);transform:scale(.96)}
.mask{background-color:#000;border-top:1px solid #000;position:fixed;top:0;left:0;width:100%;height:100%;opacity:0;z-index:-1}
.mask.on{-webkit-opacity:.8;-moz-opacity:.8;opacity:.8;z-index:9998}
.dialog{display:none;position:fixed;top:50%;left:50%;z-index:9999}
.dialog.on{display:block}
.dialog-close{background:url(../images/page1/close.png) no-repeat 0 0/.65rem 1.6rem;width:.65rem;height:.65rem;position:absolute;top:0;right:-1rem;cursor:pointer}
.dialog-close:hover{background-position:0 -.96rem}
.dialog-iframe{width:14rem;height:8rem;margin-left:-7rem;margin-top:-4rem;background-color:#000;border:3px solid #ccc}
.dialog-iframe .dialog-con{width:100%;height:100%}
.dialog-iframe iframe{width:100%;height:100%}