.animation-top{position: relative; top: -30px; transition:0.5s; -webkit-transition:0.5s; opacity: 0;}
.animation-top.active{top: 0; opacity: 1;}
.animation-right{position: relative; right: -30px; transition:0.5s; -webkit-transition:0.5s; opacity: 0;}
.animation-right.active{right: 0; opacity: 1;}
.animation{transition:0.5s; -webkit-transition:0.5s; opacity: 0;}
.animation.active{opacity: 1;}

@media (min-width: 1201px) {

    .top{ width: 100%; height: 980px; position: relative; overflow: hidden;}
    .top video{ min-width: 101%; min-height: 100%;  position: absolute; transform: translate3d(-50%, 0, 0); transition: opacity 1.2s; left: 50%;bottom: 0;}
    .top .top-content{ width: 100%; height: 100%; position: absolute; top: 0;left: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0, rgba(0, 0, 0, 0) 100%); padding-top: 410px; transition:0.5s; -webkit-transition:0.5s;}
    .top .top-content-animation{background-color: #1a1a1a;}
    .top .top-content .logo{ width: 695px; display: block; margin: 0 auto;}
    .top .top-content .btn-box{ width: 780px; margin: 0 auto; margin-top: 75px;}
    .top .top-content .btn-box img{width: 252px; margin-right: 5px;}
    .top .top-content .platform-icon{ width: 470px; display: block; margin: 0 auto; margin-top: 35px;}
    .top::after{content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 20px; background: url(https://ioi-crimsondesert-1308616072.cos.ap-chengdu.myqcloud.com/crimsondesert/images/media_bg_top.png); background-position: center; z-index: 2;}


    .media{ width: 100%; height: 1175px;background-image: url(https://ioi-crimsondesert-1308616072.cos.ap-chengdu.myqcloud.com/crimsondesert/images/media-bg.jpg); background-size: 100% auto;}
    .media .media-content{ width: 1300px; height: 100%; margin: 0 auto; padding-top: 60px;}
    .media .media-content .title{ width: 1150px; height: 150px; margin: 0 auto; background-image: url(https://ioi-crimsondesert-1308616072.cos.ap-chengdu.myqcloud.com/crimsondesert/images/title-bg.png); background-size: 100% auto; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; font-size: 36px; color: #dedcd8;}
    .media .media-content .img-box{ width: 100%; margin-top: 45px; position: relative;}
    .media .media-content .img-box .swiper-container{width: 1145px;  margin: 0 auto;}
    .media .media-content .img-box .img-area{ width: 100%; height: 645px;}
    .media .media-content .img-box .img-area img{ width: 100%;}
    .media .media-content .img-box .img-area img.link{cursor: pointer;}
    .media .media-content .img-box .arrow{ width: 25px; height: 70px; background-image: url(https://ioi-crimsondesert-1308616072.cos.ap-chengdu.myqcloud.com/crimsondesert/images/arrow.png); background-size: 100%; background-position: center center; background-repeat: no-repeat; position: absolute;  top:50%; z-index: 2; cursor: pointer;}
    .media .media-content .img-box .arrow.prev{left: 0;}
    .media .media-content .img-box .arrow.next{transform: rotate(180deg); right: 0;}

    .media .media-content .media-btn-box{ width: 1000px; display: flex; align-items: center; justify-content: center; height: 166px; margin: 0 auto; flex-wrap: wrap; margin-top: 30px;}
    .media .media-content .media-btn-box p{ width: 100%; text-align: center; color: #b39c74; font-size: 20px;}
    .media .media-content .media-btn-box img{ width: 222px; margin-left: 25px;}
    .media .media-content .media-btn-box img.heihe{ margin-right: 0;}

    .activity{width: 100%;  height: 980px;  background-image: url(https://ioi-crimsondesert-1308616072.cos.ap-chengdu.myqcloud.com/crimsondesert/images/activity-bg.png), url(https://ioi-crimsondesert-1308616072.cos.ap-chengdu.myqcloud.com/crimsondesert/images/activity-bottom-bg.png); background-size: 100% auto, 100% auto; background-repeat: no-repeat, no-repeat; background-position: top center, bottom center;  margin-top: -20px; position: relative;}
    .activity .activity-content{ width: 1150px; height: 100%; margin: 0 auto; padding-top: 60px;}
    .activity .activity-content .title{ width: 100%; height: 150px; margin: 0 auto; background-image: url(https://ioi-crimsondesert-1308616072.cos.ap-chengdu.myqcloud.com/crimsondesert/images/title-bg.png); background-size: 100% auto; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; font-size: 36px; color: #dedcd8;}
    .activity .activity-content .list-box{ width: 100%; display: flex; flex-wrap: wrap; margin-top: 70px;}
    .activity .activity-content .list-box li{list-style: none; width: calc((100% - 80px) / 3); margin-right: 40px; margin-bottom: 40px;}
    .activity .activity-content .list-box li:nth-child(3n){ margin-right: 0;}
    .activity .activity-content .list-box li .list-bg{width: 100%; height: 200px; background-size: cover;}
    .activity .activity-content .list-box li p{ color: #b5b5b5; font-size: 18px; margin-top: 20px;}

    .footer{ width: 100%; height: 120px; background-color: #1a1a1a; margin-top: -15px; position: relative; z-index: -1; display: flex; align-items: center; justify-content: center; color: #b3b3b3; font-size: 16px;}
    .footer .logo-pearlabyss{ width: 150px; margin-right: 50px;}


    .nav-list{ width: 36px; position: fixed; right: 50px; top: calc(50% - 113px); transition:0.5s; -webkit-transition:0.5s; z-index: 10 ;}
    .nav-list-animation{right: 0; opacity: 0;}

    .nav-list li{list-style: none; width: 35px; height: 35px; background-image: url(https://ioi-crimsondesert-1308616072.cos.ap-chengdu.myqcloud.com/crimsondesert/images/nav-list-bg.png); background-size: 11px 11px; background-repeat: no-repeat; background-position: center center; margin-bottom: 35px; cursor: pointer; position: relative;} 
    .nav-list li.cur{background-image: url(https://ioi-crimsondesert-1308616072.cos.ap-chengdu.myqcloud.com/crimsondesert/images/nav-list-bg-cur.png); background-size: 100%;}
    .nav-list li .nav-name{ width: 100px; height: 33px; border: 1px solid #6c5d48; position: absolute; left: -120px; color: #dedcd8; display: none; align-items: center; justify-content: center; font-size: 16px; border-radius: 5px; }
    .nav-list li:hover{ background-image: url(https://ioi-crimsondesert-1308616072.cos.ap-chengdu.myqcloud.com/crimsondesert/images/nav-list-bg-cur.png); background-size: 100%;}
    .nav-list li:hover .nav-name{ display: flex;}
    .nav-list li a{ width: 100%; height: 100%; display: block;}
}

@media (max-width: 1200px) {
    
    .nav-list{display: none;}
    .top{ width: 100%; height: 160vw; position: relative; overflow: hidden;}
    .top video{display: none;}
    .top .top-content{ width: 100%; height: 100%;  position: absolute; top: 0;left: 0; background-image: url(https://ioi-crimsondesert-1308616072.cos.ap-chengdu.myqcloud.com/crimsondesert/images/mobile-top-bg.png); background-size: 100% auto; padding-top: 68vw; transition:0.5s; -webkit-transition:0.5s; background-repeat: no-repeat;}
    .top .top-content .logo{ width: 62.2vw; display: block; margin: 0 auto;}
    .top .btn-box{ width: 70vw; display: block; margin: 0 auto; margin-top: 6vw;}
    .top .btn-box img{ width: 100%; margin-bottom: 2.6vw;}
    .top .top-content .platform-icon{ width: 62.6vw; display: block; margin: 0 auto; margin-top: 3.33vw;}

    .media-content{ background-color: #15141a;}
    .media .title{ width: 100%; height: 20vw; background-image: url(https://ioi-crimsondesert-1308616072.cos.ap-chengdu.myqcloud.com/crimsondesert/images/mobile-meida-titile.png); background-size: auto 100%; background-repeat: no-repeat;background-position: center; display: flex; align-items: center; justify-content: center; font-size: 5vw; color: #dedcd8;}

    .media .img-box{ width: 100%; margin-top: 4vw; position: relative;}
    .media .img-area{ width: 80vw;}

    .media .media-content .media-btn-box{ width: 100%; display: flex; align-items: center; justify-content: center; height: 22vw;  flex-wrap: wrap; margin-top: 30px; flex-wrap: wrap;}
    .media .media-content .media-btn-box p{ width: 100%; text-align: center; color: #b39c74; font-size: 2.5vw;}
    .media .media-content .media-btn-box img{ width: 10vw; margin: 5vw;}

    .activity{width: 100%;  height: 108vw;  background-image: url(https://ioi-crimsondesert-1308616072.cos.ap-chengdu.myqcloud.com/crimsondesert/images/mobile-activity-bg.png), url(https://ioi-crimsondesert-1308616072.cos.ap-chengdu.myqcloud.com/crimsondesert/images/mobile-activity-bottom-bg.png); background-size: auto 100%, auto 100%; background-repeat: no-repeat, no-repeat; background-position: top center, bottom center;  margin-top: -2.3vw; position: relative; padding-top: 8vw;}
    .activity .title{ width: 100%; height: 20vw; background-image: url(https://ioi-crimsondesert-1308616072.cos.ap-chengdu.myqcloud.com/crimsondesert/images/mobile-meida-titile.png); background-size: auto 100%; background-repeat: no-repeat;background-position: center center; display: flex; align-items: center; justify-content: center; font-size: 5vw; color: #dedcd8;}

    .activity .list-area{ width: 100%; height: 58.6vw; margin-top: 8vw;}
    .activity .list-area li{list-style: none; width: 80vw; height: 45.3vw; color: #b5b5b5; font-size: 2.5vw;}
    .activity .list-area li .list-bg{width: 100%; height: 45vw; background-size: cover; position: relative;}

    .footer{ width: 100%; height: 29.3vw; background-color: #15141a; margin-top: -2.6vw; padding-top: 8vw;}
    .footer .logo-pearlabyss{ width: 28.6vw; color: #b5b5b5; display: block; margin: 0 auto;}
    .footer span{color: #b5b5b5; font-size: 3vw; width: 100%; text-align: center; display: block; margin-top: 2.6vw;}




}