.section{
    position: relative;
}

/* section_background ------------------------------------------------------------ */
.section .img_bg{
    width: 100%;
    height: 100vh;  
    max-height: 1200px;
    min-height: 900px;
    position: relative;
}
.home .img_bg{
    background: url(../images/top_bg.webp) center;
    background-size:cover;
}
.news .img_bg{
    height: auto;
    background: url(../images/news_bg.webp)  top center;
    background-size:100% 100%;
    padding-bottom: 150px;
}   
.world .img_bg{
    background: url(../images/world_bg.webp) center;
    background-size:cover; 
}
.character .img_bg{background: url(../images/character_bg.webp) center;
    background-size:cover; 
    animation: bg_ani 0.4s  forwards ease-in-out;
}
.system .img_bg{
    background: url(../images/system_bg.webp) center;
    background-size:cover; 
    animation: bg_ani 0.4s  forwards ease-in-out;
}
.world::before{
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 20%;
    background: url(../images/world_top_bg.webp) top center no-repeat;
    background-size: 100% auto;
    pointer-events: none;
    z-index: 5;
}
.movie{background: url(../images/movie_bg.webp) top no-repeat #050505;
    background-size:100% auto;
    padding-bottom: 30px;
}


/* section_title ------------------------------------------------------------ */
.section .title_box{
    padding-top: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: title_ani 0.5s 0.1s forwards ease-in-out;
    opacity: 0;
}
.section .title_box::before{
    content: '';
    display: block;
    width: 162px;
    height: 64px;
    background: url(../images/title_left_icon.webp);
}
.section .title_box::after{
    content: '';
    display: block;
    width: 158px;
    height: 67px;
    background: url(../images/title_right_icon.webp);
}
.section.world .title_box{
    padding-top: 150px;
}

/* home ------------------------------------------------------------ */
.home .img_bg{
    height: calc(100vh + 30px); 
    max-height: 1200px;
    min-height: 900px;
}
.top_char_img{
    width: 1200px;
    height: calc(100vh + 30px); 
    max-height: 1200px;
    min-height: 900px;
    margin: 0 auto;
    position: relative;
}
.top_char_img img{
    pointer-events: none;
    position: absolute;
}
.home .top_char_img .top_bg_char{   
    top: 0;
    left: -360px;
    animation: top_bg_char 1.2s ease-in-out;
}
.home .top_char_img .top_char1{
    bottom: -15px;
    left: -360px;
    opacity: 0;
    animation: top_char2 0.7s 0.3s ease-out forwards,top_char_ani3 2.8s 1.4s infinite alternate-reverse;
}
.home .top_char_img .top_char2{
    bottom: -18px;
    left: -60px;
    animation: top_char2 0.6s ease-out,top_char_ani 2.1s 1.5s infinite alternate-reverse;
}
.home .top_char_img .top_char3{
    bottom: -12px;
    left: 530px;
    opacity: 0;
    animation: top_char1 0.7s 0.3s ease-out forwards,top_char_ani2 2.7s 1.8s infinite alternate-reverse;
}
.home .top_char_img .top_char4{
    bottom:-20px;
    right: -124px;
    opacity: 0;
    animation: top_char1 0.7s 0.7s ease-out forwards,top_char_ani3 2.6s 1.4s infinite alternate-reverse;
}
.home .logo{
    position: absolute;
    top: 102px;
    left: 5vw;
    animation: top_logo 0.4s ease-in-out forwards,top_logo_ani 2.1s 1.5s infinite alternate-reverse;
}
.home .copy{
    opacity: 0;
    animation: copy_ani 0.8s ease-in-out forwards;
    position: absolute;
    right: 0;
    top: 150px;
}
.home .copy img{
    position: absolute;
    pointer-events: none;
}
.home .copy .top_copy1{
    right:7.2vw;
}
.home .copy .top_copy2{
    right:10.5vw;
}
.home .copy .top_copy_s{
    display: none;
}
.home .index_title{
    position: absolute;
    left: 50%;
    margin-left: -525px;
    bottom: 12vh;
    opacity: 0;
    animation: index_title 0.5s 0.4s ease-in-out forwards;
}
.home .index_title img{
    width: 100%;
    max-width: 1051px;
}
.home .index_title_open{
    position: absolute;
    left: 50%;
    margin-left: -379px;
    bottom: 15vh;
    opacity: 0;
    animation: index_title 0.5s 0.4s ease-in-out forwards;
}
.home .index_title_open img{
    width: 100%;
    max-width: 757px;
}
.home .index_title .index_title_mob{
    display: none;
}
.home .home_btn{
    position: absolute;
    left: 50%;
    margin-left: -253px;
    bottom: 7vh;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 506px;
    height: 141px;
    background: url(../images/btn_home_bg.webp) no-repeat;
    background-size: 100% auto;
    opacity: 0;
    animation: index_title 0.4s 0.9s ease-in-out forwards;
    transition: all 0.2s;
}
.home .home_btn:hover{
    bottom: 7.6vh;
}
.home .home_btn img{
    transition: all 0.5s;
}
.home .home_btn:hover img.btn_home_round{
    transform: rotate(90deg);
    -webkit-filter: brightness(150%); /* Safari */
    filter: brightness(150%);
}
.home .home_btn:hover img.btn_home_arrow{
    transform:translateX(5px);
    -webkit-filter: brightness(150%); /* Safari */
    filter: brightness(150%);
}
.home .home_btn:hover img.btn_home_txt{
    transform:scale(1.04);
}
.home .home_btn_open{
    position: absolute;
    left: 50%;
    margin-left: -300px;
    bottom: 7vh;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 600px;
    opacity: 0;
    animation: index_title 0.4s 0.9s ease-in-out forwards;
    transition: all 0.2s;
}
.home .home_btn_open li{
    display: none;
}
.home .home_btn_open li:first-child img{
    width: 98px;
}
.home .home_btn_open img{
    margin:0 8px;
    transition: all 0.4s;
    transform: translateY(0px);
}
.home .home_btn_open a img{
    height: 68px;
}
.home .home_btn_open a:hover img{
    transform: translateY(-6px);
}
.home .top_left_black,.home .top_right_black{
    position: absolute;
    bottom: 0;
}
.home .top_left_black{
    left: 0;
}
.home .top_right_black{
    right: 0;
}
.home #fire_bg{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    mix-blend-mode: screen;
}
/* news ------------------------------------------------------------ */
.news::before,.news::after{
    content: '';
    display: block;
    width: 100%;
    height: 50%;
    position: absolute;
    left: 0;
    z-index: 1;
    pointer-events: none;
}
.news::before{
    top: 0;
    background: url(../images/news_bg_shape2.webp) top center no-repeat;
    background-size: 100% auto;
}
.news::after{
    bottom:25px;
    background: url(../images/news_bg_shape1.webp) bottom center no-repeat;
    background-size: 100% auto;
}
.news_frame{
    opacity: 0;
    animation:news_con 0.4s 0.2s forwards ease-in-out;
}
.news .banner{
    width: 1024px;
    margin: 0 auto;
    text-align: left;
    margin-top: 30px;
    padding-bottom: 30px;
}
.news .banner a{
    display: block;
    padding-right: 12px;
}
.news .banner img{
    border: 1px solid rgba(255, 255, 255, 0.5);
    width: 502px;
    height: 202px;
}
.news .banner .slick-dots{
    bottom: -15px;
}
.news .banner .slick-next{
    right: -40px;
    margin-top: -26px;
}
.news .banner .slick-prev{
    left: -45px;
    margin-top: -26px;
}
.news .news_bottom{
    display: flex;
    width: 1100px;
    margin: 0 auto;
}
.news .news_bottom .news_st{
    margin-top: -6px;
}
.news .news_bottom .newslist_con{
    margin-right: 40px;
    width: 700px;
    background-image : url(../images/news/news_popup_bg_t.webp),                      
                        url(../images/news/news_popup_bg_b.webp) ,
                        url(../images/news/news_popup_bg_c.webp);
    background-repeat  :no-repeat,
                        no-repeat,
                        repeat-y;

    background-position:top,
                        bottom ,
                        center;
    background-size: 100% auto;
    padding-bottom: 40px;
}
.news .news_bottom .newstype_menu{
    display: flex;
    justify-content: center;
    margin-top: 25px;
}
.news .news_bottom .newstype_menu li{
    position: relative;
    display: block;
    width: 162px;
    height: 50px;
    margin:0 4px;
}
.news .news_bottom .newstype_menu li a{
    display: block;
    width: 162px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    text-indent: -9999px;
    opacity: 0.7;
    transition: opacity 0.5s;
}
.news .news_bottom .newstype_menu li:nth-child(1) a{
    background: url(../images/news/news_newstype_btn1.webp) center bottom no-repeat;
    background-size:auto 100%;
}
.news .news_bottom .newstype_menu li:nth-child(2) a{
    background: url(../images/news/news_newstype_btn2.webp) center bottom no-repeat;
    background-size:auto 100%;
}
.news .news_bottom .newstype_menu li:nth-child(3) a{
    background: url(../images/news/news_newstype_btn3.webp) center bottom no-repeat;
    background-size:auto 100%;
}
.news .news_bottom .newstype_menu li:nth-child(4) a{
    background: url(../images/news/news_newstype_btn4.webp) center bottom no-repeat;
    background-size:auto 100%;
}
.news .news_bottom .newstype_menu li a:hover{
    opacity: 1;
}
.news .news_bottom .newstype_menu li.current a{
    background: none;
    font-size:1.375em;
    color: #fff;
    font-weight: 400;
    text-indent:0;
    opacity: 1;
}
.news .news_bottom .newstype_menu li::before{
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    display: block;
    width: 162px;
    height: 50px;
    background: url(../images/news/news_newstype_btn.webp);
    background-size: 100% 100%;
    opacity: 0.3;
    pointer-events: none;
    transition: all 0.5s;
}
.news .news_bottom .newstype_menu li:hover::before{
    opacity: 0.8;
}
.news .news_bottom .newstype_menu li.current::before,.news .news_bottom .newstype_menu li.current:hover::before{
    background: url(../images/news/news_newstype_btn_current.webp);
    background-size: 100% 100%;
    opacity: 1;
}
.news_list{
    width: 650px;
    margin: 0 auto;
    margin-top:15px;
    min-height: 260px;
}
.news_list li{
    display: flex;
    padding: 10px 0;
    position: relative;
}
.news_list li .news_type{
    padding-left: 15px;
}
.news_list li .news_title{
    flex: 0 1 0%;
    width: 76%;
    display: flex;
    padding-left: 15px;
}
.news_list li .news_title a{
    font-size: 1.25em;
    overflow:hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
    font-weight: 400;
    padding-top: 3px;
}
.news_list li .news_title a:hover{
    color: #bba082;
}
.news_list li::after{
    content: '';
    width: 650px;
    height:5px;
    left: 0;
    background:url(../images/news/line.webp),
    url(../images/news/line_point.webp),
    url(../images/news/line_point.webp);
    background-repeat: repeat-x,no-repeat,no-repeat;
    background-position: left center,left bottom,right bottom;
    position: absolute;
    margin-top:45px;
    pointer-events: none;
}
.news .news_more{
    display:flex;
    align-items: center;
    justify-content: center;
    width: 230px;
    height: 60px;
    background: url(../images/news/btn_more_bg.webp) no-repeat;
    margin: 0 auto;
    margin-top: 22px;
    transition: all 0.5s;
}
.news .news_more img:nth-child(2){
    margin:0 10px;
}
.news .news_more img{
    transition: all 0.5s;
}
.news .newslist_con .news_more:hover img:nth-child(1){
    transform: rotate(90deg);
}
.news .twitter_con .news_more:hover img:nth-child(1){
    transform: rotate(20deg) translateX(-3px);
}
.news .news_more:hover img:nth-child(3){
    transform: translateX(5px);
}
.news .news_more:hover{
    -webkit-filter: brightness(120%); /* Safari */
    filter: brightness(120%);
    transform: translateY(-8px);
}
.twitter_con{
    width: 360px;
    background-image : url(../images/news/news_twitter_bg_t.webp),                      
                        url(../images/news/news_twitter_bg_b.webp) ,
                        url(../images/news/news_twitter_bg_c.webp);
    background-repeat  :no-repeat,
                        no-repeat,
                        repeat-y;

    background-position:top,
                        bottom ,
                        center;
    background-size: 100% auto;
}
.twitter_iframe_block{
    width: 100%;
    height: 340px;
    width: 320px;
    margin:0 auto;
    padding: 5px;
    padding-right:0px;
    overflow:auto; 
    background-color:#fff; 
    position:relative; z-index:50;
    margin-top: 10px;
}      	
#twitter-widget-holder{ width:100%; height:100%;  }


/* world ------------------------------------------------------------ */
.video_yt{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    z-index: 0;
}
.video_yt .world_bg_frame{
    width: 100%;
    height: 100%;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
}
.video-container{
    overflow: hidden;
    padding-bottom:56.25%;
    position: relative;
    height: 0;
}
.video-container iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    border: 0;
    pointer-events: none;
}
.world .title_box{
    position: absolute;
    z-index: 7;
    left: 50%;
    margin-left: -341px;
}
.world .world_con{
    width:820px;
    position: absolute;
    left: 50%;
    margin-left: -410px;
    top:30%;
    opacity: 0;
    animation:world_con 1s  forwards ease-in-out;
}
.world .world_con .world_line_font{
    display: none;
}
.world .world_con::after,.world .world_con::before{
    content: '';
    display: block;
    width: 106px;
    height: 29px;
    background: url(../images/world_txt_frame.webp) no-repeat;
    position: absolute;
    pointer-events: none;
}
.world .world_con::before{
    right: -25px;
    top: -20px;
}
.world .world_con::after{
    transform: scale(-1);
    left: -30px;
    bottom: -70px;
}
.world .world_con p{
    font-size: 1.375em;
    line-height: 48px;
    font-weight: 400;
    text-shadow: black 0.1em 0.1em 0.4em
}
/* character ------------------------------------------------------------ */
.character .character_more{
    width: 328px;
    height: 85px;
    display: flex;
    background: url(../images/btn_char.webp);
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    transition: all 0.5s;
    opacity: 0;
    animation:character_btn 0.5s 0.2s  forwards ease-in-out;
}
.character .character_more img{
    transition: all 0.5s;
}
.character .character_more img:nth-child(2){
    margin:0 16px;
}
.character .character_more:hover img:nth-child(1){
    transform: rotate(90deg);
}
.character .character_more:hover img:nth-child(3){
    transform: translateX(5px);
}
.character .character_more:hover{
    -webkit-filter: brightness(120%); /* Safari */
    filter: brightness(120%);
    transform: translateY(-8px);
}
.character_list{
    width: 1180px;
    margin:80px auto 60px;
    opacity: 0;
    animation:character_list 0.5s 0.2s  forwards ease-in-out;
}
.character_list::before{
    content: '';
    display: block;
    width: 1186px;
    height: 436px;
    pointer-events: none;
    position: absolute;
    background: url(../images/char_shape.webp) no-repeat;
    background-size: 100% 100%;
    top: -8px;
    left: -8px;
}
.character_list .character_item a{
    display: block;
    width: 227px;
    height: 420px;
    overflow: hidden;
    position: relative;
}
.character_list .character_item a .name img{
    position: absolute;
    transition: all 0.2s ease-in-out;
}
.character_list .character_item a:hover .name img.char_pic{
    transform: scale(0.98);
}
.character_list .character_item a:hover .name img.char_frame{
    -webkit-filter: brightness(2000%); /* Safari */
    filter: brightness(2000%);
}
.character_list .character_item a .name img.char_hover_bg{
    opacity: 0;
}
.character_list .character_item a:hover .name img.char_hover_bg{
    opacity:0.8;
}
.character_list .character_item a .name img.char_name{
    bottom: 30px;
    right: -100px;
    opacity: 0;
}
.character_list .character_item a:hover .name img.char_name{
    right: 30px;
    opacity: 1;
}
.index_char_mob{
    display: none;
}
/* system ------------------------------------------------------------ */
.system.section .title_box{
    position: absolute;
    left: 50%;
    margin-left: -343px;
}
.system .img_bg::before,.system .img_bg::after{
    content: '';
    display: block;
    position: absolute;
    z-index:0;
    pointer-events: none;
    opacity: 0.8;
}
.system .img_bg::before{
    width: 100%;
    left: 0;
    top: 0;
    background: url(../images/system_bg_shape.webp) top center no-repeat;
    background-size: 100% auto;
    height:80%;
    width: 100%;
}
.system .img_bg::after{
    right:17px;
    bottom:10px;
    background: url(../images/system_bg_shape2.webp) bottom right no-repeat;
    height:10%;
    width: 50%;
}
.system_box{
    width: 100%;
    height: 100vh;
    max-height: 1200px;
    min-height: 900px;
    overflow: hidden;
    padding-top: 170px;
}
.system_com{
    position: relative;
    width: 902px;
    height: 528px;
    margin: 0 auto;
}
.system_com .system_char{
    position: absolute;
    right:-480px;
    pointer-events: none;
    top: -100px;
    opacity: 0;
    animation: system_char 0.4s 0.3s  forwards ease-in-out;
}
.system_com .system_right{
    position: absolute;
    left:-405px;
    pointer-events: none;
    opacity: 0;
    animation: system_right 0.4s 0.3s  forwards ease-in-out;
}
.system_list{
    width: 100%;
    height: 528px;
    background: url(../images/system_pic_frame.webp);
    background-size: 100% 100%;
    padding: 22px;
    margin-top: 60px;
    position: relative;
    opacity: 0;
    animation:system_list 0.5s 0.2s  forwards ease-in-out;
}
.system_list::before,.system_list::after{
    content: '';
    display: block;
    width: 165px;
    height: 6px;
    background: url(../images/system_slide_line.webp) center no-repeat;
    background-size: 100% auto;
    position: absolute;
    bottom: -45px;
    pointer-events: none;
}
.system_list::before{
    left:140px;
}
.system_list::after{
    right: 140px;
}
.system_list > div{
    width:859px;
}
.system_list > div img{
    width:859px;
    height: 484px;
    border: 1px solid #ebebeb;
}
.system .slick-next{
    bottom: -65px;
    top: auto;
    right:90px;
    z-index: 8;
}
.system .slick-prev{
    bottom: -65px;
    top: auto;
    left:90px;
    z-index: 8;
}
.system .slick-dots{
    bottom: -60px;
    margin-left: -20px;
}
/*  MOVIE ------------------------------------------------------------ */
.movie.section .title_box{
    position: absolute;
    left: 50%;
    padding-top: 140px;
    margin-left: -320px;
}
.movie::before,.movie::after{
    content: '';
    display: block;
    width: 100%;
    height: 30%;
    position: absolute;
    left: 0;
    z-index: 1;
    pointer-events: none;
}
.movie::before{
    top: 0;
    background: url(../images/movie_bg_shape1.webp) top center no-repeat;
    background-size: 100% auto;
}
.movie::after{
    bottom:110px;
    background: url(../images/movie_bg_shape2.webp) bottom center no-repeat;
}
.movie_main{
    width: 100%;
    height:100vh;
    max-height: 1200px;
    min-height: 900px;
    overflow: hidden;
    padding-top: 210px;
}
.movie_box{
    width: 1024px;
    margin: 0 auto;
    min-height:654px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.movie_char_left{
    position: absolute;
    top: -90px;
    left:-450px;
    opacity: 0;
    animation: movie_char_left 0.4s 0.3s  forwards ease-in-out;
}
.movie_char_right{
    position: absolute;
    top:-30px;
    right:-365px;
    opacity: 0;
    animation: movie_char_right 0.4s 0.3s  forwards ease-in-out;
}
.movie_list{
    width: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    animation:movie_list 0.5s 0.2s  forwards ease-in-out;
}
.movie_list .movie_item{
    width: 486px;
    height:291px;
    background: url(../images/system_pic_frame.webp);
    background-size: 100% 100%;
    position: relative;
    padding:15px 13px 13px 15px;
    margin:0 5px;
}
.movie_list .slick-list{
    height:380px;
    padding-top: 40px;
}
.movie_list .movie_item > img{ 
    position: absolute;
    pointer-events: none;
}
.movie_box .movie_line1{
    position: absolute;
    right:1.46%;
    top:20%;
    opacity: 0;
    animation: top_logo 0.4s 0.6s  forwards ease-in-out;
}
.movie_box .movie_line2{
    position: absolute;
    left:26.36%;
    top: 70%;
    opacity: 0;
    animation: top_logo 0.4s 0.6s  forwards ease-in-out;
}
.movie_list .movie_item a{
    display: block;
    width: 460px;
    height: 259px;
    overflow: hidden;
    background: #06050a;
}
.movie_list .movie_item a .movie_pic{
    width: 460px;
    height: 260px;
}
.movie_list .movie_item a .movie_pic img{
    width: 100%;
    opacity: 0.6;
    transition: all 0.7s;
    transform: scale(1);
}
.movie_list .movie_item a:hover .movie_pic img{
    opacity:1;
    transform: scale(1.05);
}
.movie_list .movie_item a .movie_play{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -62px;
    margin-left: -62px;
    width: 123px;
    height: 123px;
}
.movie_list .movie_item a .movie_play img:first-child{
    transition: all 0.4s ease-in-out;
    transform: rotate(0deg) scale(1) ;
}
.movie_list .movie_item a:hover .movie_play img:first-child{
    transform: rotate(90deg)  scale(0.8);
}
.movie_list .movie_item a .movie_play img:last-child{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -24px;
    margin-left: -14px;
    transition: all 0.4s ease-in-out;
    transform: scale(1) translateX(0px);
}
.movie_list .movie_item a:hover .movie_play img:last-child{
    transform: scale(0.5) translateX(-8px);
} 
.movie_list .slick-dots{
    display: none;
}
.movie .slick-prev,
.movie .slick-next{
    top:auto;
    bottom: -25px;
    z-index: 55;
}
.movie .slick-prev{
    left: 38%;
}
.movie .slick-next{
    right:38%;
}
/* right_soc_btn ------------------------------------------------------------ */
.float_box{
    width:93px; 
    height: 173px;
    background: url(../images/right_btn_bg.webp) no-repeat right top;
    position: fixed; 
    top: 50%; 
    margin-top: -87px; 
    right: -74px; 
    z-index: 6;
    transition: .2s;
    }
.float_box .btn_float{
    width: 19px;
    height: 109px;
    background: url(../images/right_btn_open.webp);
    position: absolute; 
    top: 50%;
    margin-top: -54px;
    cursor: pointer;
    transition: all .4s;
}
.float_box .btn_float:hover{
    opacity: 0.9;
}
.float_box .soc_box{
    margin-left: 19px;
    width: 74px;
    height: 173px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.float_box.show{ 
    right: 0px; 
}
.float_box.show .btn_float{ 
    width: 19px;
    height: 109px;
    background: url(../images/right_btn_close.webp); 
    z-index: 3;
}
/* bottom_box ------------------------------------------------------------ */
footer {
    margin-bottom: 80px;
}
.bottom_box{
    position: fixed;
    z-index: 700;
    bottom:-100px;
    width: 100%;
    height: 90px;
    background:rgba(0,0,0,0.85);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    transition:.6s;
}
.bottom_box.show{
    bottom: 0;
}
.bottom_box,.bottom_box .bottom_open,
.bottom_box .bottom_open .home_btn_open,
.bottom_box .bottom_pre{
    display: flex;
    justify-content: center;
    align-items: center;
}
.bottom_box .bottom_appicon{
    width: 60px;
}
.bottom_box .bottom_pre .bottom_tt{
    height: 72px;
    margin-top:5px;
    margin-left: -8px;
}
.bottom_box .bottom_open .bottom_tt_re{
    height:72px;
    margin-left:0px;
}
.bottom_box .bottom_pre .bottom_btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width:250px;
    height:58px;
    margin-left: -5px;
    background: url(../images/bottom_btn.webp) no-repeat;
    background-size: 100% auto;
    transition: all 0.2s;
}
.bottom_box .bottom_pre .bottom_btn:hover{
    transform: translateY(-3px);
}
.bottom_box .bottom_pre .bottom_btn img{
    transition: all 0.5s;
}
.bottom_box .bottom_pre .bottom_btn img.btn_home_round{
    width: 25px;
}
.bottom_box .bottom_pre .bottom_btn:hover img.btn_home_round{
    transform: rotate(90deg);
    -webkit-filter: brightness(150%); /* Safari */
    filter: brightness(150%);
}
.bottom_box .bottom_pre .bottom_btn img.btn_home_arrow{
    width: 10px;
}
.bottom_box .bottom_pre .bottom_btn:hover img.btn_home_arrow{
    transform:translateX(5px);
    -webkit-filter: brightness(150%); /* Safari */
    filter: brightness(150%);
}
.bottom_box .bottom_pre .bottom_btn img.btn_home_txt{
    width: 150px;
}
.bottom_box .bottom_pre .bottom_btn:hover img.btn_home_txt{
    transform:scale(1.04);
}

.bottom_box .bottom_open .bottom_tt{
    height: 55px;
    margin-left: 5px;
}
.bottom_box .bottom_open .home_btn_open li{
    display: none;
}
.bottom_box .bottom_open .home_btn_open li a{
    display: block;
    margin:0 5px;
    height: 50px;
    transition: all .2s;
}
.bottom_box .bottom_open .home_btn_open li a:hover{
    margin-top: -8px;
}
.bottom_box .bottom_open .home_btn_open li img{
    height: 100%;
}

@media screen and (max-width:1800px) {
    .home .copy {
        right:-1.9vw;
        top: 120px;
    }
}
@media screen and (max-width:1700px) {
    .movie_char_right {
        top: -30px;
        right: -310px;
    }
    .movie_char_left {
        left: -400px;
    }
}
@media screen and (max-width:1600px) {
    .home .copy {
        right:-3.7vw;
    }
    .top_char_img{
        transform: scale(0.94);
    }
    .home .top_char_img .top_char1,.home .top_char_img .top_char2,.home .top_char_img .top_char3,.home .top_char_img .top_char4{
        bottom:-6%;
    }
    .system_com .system_char {
        right: -435px;
        width: 630px;
    }
    .system_com .system_right {
        left: -320px;
        width: 400px;
        top:30px;
    }
    .video-container{
        height: 100%;
    }
    .video-container iframe {
        position: absolute;
        top: 50%;
        left: 65%;
        width:130%;
        height: 100%;
        transform: translate(-65%, -50%);
        border: 0;
        pointer-events: none;
    }
}
@media screen and (max-width:1450px) {
    .top_char_img{
        transform: scale(0.87);
    }
    .home .top_char_img .top_char1,.home .top_char_img .top_char2,.home .top_char_img .top_char3,.home .top_char_img .top_char4{
        bottom:-11.4%;
    }
    .home .copy {
        right:-2.5vw;
    }
    .home .copy img{
        width: 39px;
    }
    .home .index_title_open{
        bottom: 14vh;
    }
    .movie_list {
        width: 940px;
    }
    .movie_list .movie_item{
        width: 460px;
        height: 270px;
        padding: 13px;
    }
    .movie_list .movie_item a,.movie_list .movie_item a .movie_pic{
        width: 432px;
        height: 242px;
    }
    .movie_box .movie_line1{
        right:5%;
    }
    .movie_box .movie_line2{
        left:26%;
        top: 68%;
    }
    .system_com .system_char {
        right: -405px;
        width: 600px;
    }
    .system_com .system_right {
        left: -280px;
        width: 380px;
    }
    .system_com {
        width:800px;
        height:468px;
    }
    .system_list {
        height:468px;

    }
    .system_list > div{
        width:100%;
    }
    .system_list > div img{
        width:100%;
        height: auto;
    }
    .movie_char_right {
        top: -30px;
        right: -250px;
    }
    .movie_char_left {
        left: -300px;
        width: 680px;
    }
    .character_list{
        margin-bottom: 40px;
    }
    .system_com {
        width:800px;
        height:468px;
    }
    .system_list::before, .system_list::after{
        width: 110px;
    }
}
@media screen and (max-width:1400px) {
    .section.home .img_bg,.top_char_img{
        height: 800px;
    }
    .home .top_char_img .top_char4 {
        right: auto;
        left: 800px;
    }
    .home .index_title{
        width:900px;
        margin-left: -450px;
        bottom:8vh;
    }
    .home .index_title_open{
        bottom: 12vh;
        width: 700px;
        margin-left: -350px;
    }
    .home .home_btn_open{
        position: absolute;
        left: 50%;
        margin-left: -300px;
        bottom: 7vh;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 600px;
        opacity: 0;
        animation: index_title 0.4s 0.9s ease-in-out forwards;
        transition: all 0.2s;
    }
    .home .home_btn_open img{
        margin:0 8px;
        transition: all 0.4s;
        transform: translateY(0px);
    }
    .home .home_btn{
        width: 400px;
        height: 111px;
        bottom: 7.5vh;
        margin-left: -200px;
    }
    .home .home_btn img.btn_home_txt{
        width: 220px;
    }
    .home .home_btn_open{
        margin-left: -300px;
        bottom: 7vh;
        width: 600px;
    }
    .home .home_btn_open li:first-child img {
        width: 90px;
    }
    .home .home_btn_open li > img{
        width: 90px;
    }
    .section .img_bg {
        min-height:800px;
    }
    .section.world .title_box {
        padding-top: 120px;
    }
    .character_list{
        margin-top: 50px;
    }
}
@media screen and (max-width:1250px) {
    .top_char_img{
        transform: scale(0.78);
    }
    .home .top_char_img .top_char1,.home .top_char_img .top_char2,.home .top_char_img .top_char3,.home .top_char_img .top_char4{
        bottom:-25%;
    }
    .home .top_char_img .top_bg_char{
        width:150%;
        left: auto;
        right: -28%;
        top: -3%;
    }
    .home .logo img{
        width: 300px;
    }
    
    .top_char_img{
        width: 100%;
    }
    .section.home .img_bg,.top_char_img{
        min-height: 800px;
    }
    .home .copy .top_copy1{
        display: none;
    }
    .home .copy .top_copy2{
        display: none;
    }
    .home .copy .top_copy_s{
        display: block;
        right: 7.5vw;
        width: 83px;
        top: -35px;
    }
    .float_box{
        top: 58%;
    }
    .character_list{
        width: 90%;
    }
    .character_list::before {
        display: none;
    }
    .character_list .character_item a {
        width:98%;
        height:33vw;
        overflow: hidden;
        position: relative;
    }
    .character_list .character_item a img:not(.char_name){
        width: 100%;
    }
    .character_list .character_item a img{
        width: 50px;
    }
    .system_com{
        width: 700px;
    }
    .system_list {
        height: 88.5%;
    }
    .system_list::before, .system_list::after{
        width: 70px;
    }
    .system_com .system_char {
        right: -325px;
        width:490px;
    }
    .system_com .system_right {
        left: -210px;
        width: 280px;
        top: 50px;
    }
    .movie_main {
        height:auto;
        min-height:600px;
        padding-top: 210px;
    }
    .movie_box {
        width:100%;
        margin: 0 auto;
        min-height:500px;
        margin-bottom: 80px;
    }
    .movie_char_right,.movie_char_left,.movie_box .movie_line1,.movie_box .movie_line2{
        display: none;
    }
}
@media screen and (max-width:1150px) {
    .home .logo {
        top:4vw;
    }
    .home .top_char_img .top_bg_char{
        width:180%;
        right: -43%;
    }
    .news .banner {
        width:86%;
    }
    .news .banner img{
        width:100%;
        height: auto;
    }
    .news .news_bottom {
        width:96%;
    }
    .news .news_bottom .newslist_con{
        width: 63.6%;
        margin-right: 20px;
    }
    .twitter_con{
        width: 36%;
    }
    .news_list{
        width: 94%;
    }
    .news_list li::after{
        width: 100%;
    }
    .news .news_bottom .newstype_menu li::before,.news .news_bottom .newstype_menu li a,.news .news_bottom .newstype_menu li {
        width: 142px;
    }
    .news .img_bg{
        padding-bottom: 70px;
    }
    .home .top_char_img .top_char4{
        bottom: -32%;
        left: 810px;
    }
    .home .copy{
        top: 130px;
    }
    .home .top_char_img .top_char2{
        left: -40px;
    }
    .world .img_bg {
        background: url(../images/world_bg_s2.webp) fixed center;
        background-size: cover;
    }
    .video_yt{
        display: none;
    }
    
}
@media screen and (max-width:1010px) {
    .home .logo{
        top:4vw;
    }
    .top_char_img{
        margin-left: -5%;
    }
    .home .top_char_img .top_bg_char{
        right: -50%;
        top: -10%;
    }
    .home .home_btn_open li:first-child {
        width: 0;
    }
    .home .home_btn_open li:first-child img{
        display: none;
    }
}
@media screen and (max-width:960px) {
    .section .img_bg,.news .img_bg,.world .img_bg,.character .img_bg,.system .img_bg,.movie .img_bg{
        height: auto !important;  
        max-height:3000px;
        min-height: auto;
    }  
    .character .img_bg{background: url(../images/character_bg_s.webp) center;
        background-size:100% 100%; 
        animation:none;
    }
    .section .title_box img{
        height: 50px;
    }
    .home .top_right_black,.home .top_left_black,.system_com .system_char,.system_com .system_right,
    .br_none,#btn_top,.world::before,.news::after,.news::before,.movie::after,.movie::before{
        display: none;
    }

    .section .title_box,.news_frame,.world .world_con,.character_list,.character .character_more,
    .system_list,.movie_list,.home .logo,.home .copy{
        animation: none;
        opacity: 1;
    }
    .system.section .title_box,.movie.section .title_box{
        margin-left: 0px;
        transform: translateX(-50%);
    }
    .movie .slick-prev, .movie .slick-next {
        top:calc(50% - 14px);
        bottom:auto;
    }
    /* home------------------------------------------------------------ */
    .home .img_bg {
        background: url(../images/top_bg_s.webp) center center;
        background-size:cover;
        padding-bottom: 10%;
    }
    .section.home .img_bg, .top_char_img{
        height: auto;
        min-height: auto;
    }
    .home .logo{
        width:90%;
        left: 5%;
        text-align: left;
    }
    .home .logo img {
        width: 50%;
        max-width: 338px;
    }
    .top_char_img{
        display: none;
    }
    .home .copy{
        position: relative;
        top:0;
        right: 0;
    }
    .home .copy .top_copy_s {
        right:4%;
        width: 12.5%;
        max-width: 130px;
        margin-top:130px;
    }
    .home .index_title,.home .index_title_open{
        width:100%;
        left: 0;
        margin-left: 0px;
        position: relative;
        padding-top:100%;
        text-align: center;
        animation: none;
        opacity: 1;
        bottom:-3.5vw;
    }
    .home .index_title_open{
        padding-top:110%;
    }
    .home .index_title .index_title_pc{
        display: none;
    }
    .home .index_title .index_title_mob{
        display: block;
        width:76%;
        max-width:451px ;
        margin: 0 auto;
        margin-bottom:7.5vw;
    }
    .home .home_btn{
        position: relative;
        top: 0;
        left: 0;
        animation: none;
        opacity: 1;
        margin: 0 auto;
        width: 506px;
        height: 141px;
    }
    .home .home_btn img.btn_home_txt {
        width:70%;
        max-width: 288px;
    }
    .home .home_btn_open{
        width: 100%;
        position: relative;
        left:0;
        margin-left:0;
        bottom:1.5vw;
        opacity: 1;
        animation: none;
    }
    .home .home_btn_open a:hover img{
        transform: translateY(0px);
    }
    .home .home_btn_open a img {
        height: 9vw;
        margin: 0 4px;
    }
    /* news ------------------------------------------------------------ */
    .news .img_bg{
        height: auto;
        background: url(../images/news_bg_s.webp)  top center;
        background-size:100% 100%;
        padding-bottom:110px;
    } 
    .news .banner {
        max-width: 500px;
    }
    .news .banner .slick-next{
        right: -50px;
    }
    .news .banner .slick-prev{
        left: -50px;
    }
    .news .banner a {
        padding-right:0;
    }
    .news .news_bottom{
        flex-direction: column;
    }
    .news .news_bottom .newslist_con{
        width:90%;
        margin-right: 0;
        margin: 20px auto;
    }
    .twitter_con {
        width:90%;
        margin: 0 auto;
        background-image: url(../images/news/news_popup_bg_t.webp), url(../images/news/news_popup_bg_b.webp) , url(../images/news/news_popup_bg_c.webp);
        background-repeat: no-repeat, no-repeat, repeat-y;
        background-position: top, bottom , center;
        background-size: 100% auto;
        padding-bottom: 40px;
        margin-top: 20px;
    }
    .twitter_iframe_block {
        width: 90%;
        height: 600px;
        margin: 20px auto;
    } 
    .news .news_bottom .newstype_menu li::before, .news .news_bottom .newstype_menu li a, .news .news_bottom .newstype_menu li {
        width: 150px;
    }
    /* world ------------------------------------------------------------ */
    .world .img_bg{
        background: url(../images/world_bg_s.webp)  center;
        background-size:100% 100%; 
    }
    .world .title_box {
        position: relative;
        left:0%;
        margin-left:0px;
    }
    .world .world_con {
        width:86%;
        position: relative;
        left:0;
        margin-left:0px;
        top:0%;
        margin: 0 auto;
        text-align: left;
        padding:70px 0 100px 0;
    }
    .world .world_con::before {
        top: 70px;
        right: 0;
    }
    .world .world_con::after {
        bottom: 40px;
        left: 0;
    }
    .world .world_con .world_line_font{
        display:block;
        position: absolute;
        top: -30px;
        width:80%;
        left: 50%;
        transform: translateX(-50%);
        max-width: 485px;
    }

 /* character ------------------------------------------------------------ */
    .character_list {
        width:86%;  
    }
    .character_list.slick-dotted.slick-slider {
        margin-bottom: 90px;
    }
    .character_list .slick-dots{
        bottom: -65px;
    }
    .character_list .slick-next{
        right: -40px;
    }
    .character_list .slick-prev{
        left: -44px;
    }
    .character_list .character_item a {
        width:96%;
        max-width: 227px;
        height:auto;
        margin-top:30px;
    }
    .character_item .name{
        display: none;
    }
    .character_item .index_char_mob{
        display: block;
    }
    .character_item .index_char_mob img{
        width: 100%;
    }
 /* system ------------------------------------------------------------ */
    .system .img_bg::before{
        display: none;
    }
    .system .img_bg{
        background: url(../images/system_bg_s.webp)  center;
        background-size:100% 100%; 
        animation:none;
    }
    .system_box {
        height:auto;
        min-height:920px;
        overflow: hidden;
    }
 /* movie ------------------------------------------------------------ */
.movie{
    padding-bottom: 30px;
    background-image : url(../images/movie_char_s.webp),url(../images/movie_bg_s.webp);
    background-repeat  :no-repeat,no-repeat;
    background-position:bottom center,top;
    background-size:90% auto, 100% 100%;
}
    .movie.section .title_box{
        padding-top:105px;
    }
    .movie_main {
        padding-top:180px;
    }
    .movie_box {
        margin-bottom:46vw;
    }
    .movie_list{
        width:84%;
    }
    .movie_list .slick-next{
        right: -40px;
    }
    .movie_list .slick-prev{
        left: -40px;
    }
    .movie_list .slick-dots{
        display: block;
        bottom: -50px;
    }
    .movie_list .slick-list{
        height:auto;
        padding-top: 0px;
    }
    .movie_list .movie_item {
        width:100%;
        height:auto;
        padding:10px;
    }
    .movie_list .movie_item a, .movie_list .movie_item a .movie_pic {
        width: 100%;
        height:auto;
    }
    .movie_list .movie_item a .movie_pic {
        width:100%;
        height:auto;
        overflow: hidden;
    }

}
@media screen and (max-width:760px) {
    .character_list .slick-next,.character_list .slick-prev,
    .news .banner .slick-next,.news .banner .slick-prev,
    .system .slick-next,.system .slick-prev,
    .movie_list .slick-next,.movie_list .slick-prev{
        width: 25px;
        height: 28px;
    }
    .section .title_box,.section.world .title_box,.movie.section .title_box{
        padding-top: 60px;
    }
    .section .title_box img {
        height:7.6vw;
    }
    .section .title_box::after {
    width:101px;
    height:40px;
    background: url(../images/title_right_icon.webp) no-repeat left center;
    background-size:auto 100%;
    }
    .section .title_box::before{
        width:101px;
        height:40px;
        background: url(../images/title_left_icon.webp) no-repeat right center;
        background-size:auto 100%;
    }
    .home .index_title_open {
        padding-top:122%;
    }

    .home #fire_bg{
        display: none;
    }
    .news .img_bg {
        background: url(../images/news_bg_s.webp) bottom center;
        background-size:cover;
        padding-bottom:0px;
    }
    .news .banner{
        width: 80%;
    }
    .character_list .slick-next,.news .banner .slick-next{
        right: -30px;
    }
    .character_list .slick-prev,.news .banner .slick-prev{
        left: -30px;
    }
    .banner.slick-dotted.slick-slider{
        margin-bottom: 15px;
        margin-top: 15px;
    }
    .news .news_bottom .newslist_con,.twitter_con{
        width: 98%;
        padding-bottom: 30px;
        margin: 15px auto;
    }
    .news .news_bottom .newstype_menu{
        flex-wrap: wrap;
        margin-top: 15px;
    }
    .news .news_bottom .newstype_menu li{
        margin: 4px;
    }
    .news_list li .news_title a{
        font-size: 1.1rem;
    }
    .news_list li .news_type{
        padding-left: 5px;
    }
    .news_list li .news_type img{
        height: 32px;
    }
    .news_list li .news_title {
        width:76%;
    }
    .news_list li .news_title a{
        font-size: 1rem;
    }
    .news_list{
        min-height:auto;
        margin-top: 5px;
    }
    .twitter_iframe_block{
        height: 300px;
    }
    .world .world_con {
        text-align: left;
        padding:30px 0 100px 0;
    }
    .world .world_con p {
        font-size: 1.0625em;
        line-height: 2rem;
        text-align: justify;
    }
    .world .world_con::after {
        bottom: 60px;
    }
    .character .img_bg{
        padding-bottom: 35px;
    }
    .character_list.slick-dotted.slick-slider{
        margin-top: 0px;
        margin-bottom:65px;
        width:78%;
    }
    .character_list .slick-dots li button:before {
        background: url(../images/slide_point_g.webp) no-repeat center;
        opacity: 0.8;
    }
    .character_list .slick-dots li.slick-active button:before {
        background: url(../images/slide_point_act_g.webp) no-repeat center;
    }
    .character_list .slick-dots{
        bottom: -50px;
    }
    .character_list .slick-next,.movie_list .slick-next{
        right: -25px;
    }
    .character_list .slick-prev,.movie_list .slick-prev{
        left: -28px;
    }
    .system_box{
        height: auto;
        min-height:auto;
        padding-top:60px;
        padding-bottom: 150px;
    }
    .system_com{
        width: 92%;
        height: auto;
    }
    .system_list{
        height:54.4%;
        padding:3%;
    }
    .system .slick-prev{
        left:10px;bottom: -48px;
    }
    .system .slick-next{
        right:10px;bottom: -48px;
    }
    .system .slick-dots{
        margin: 0;
        bottom: -48px;
    }
    .system_list::before, .system_list::after{
        display: none;
    }
    .system .slick-dots li {
        margin: 0 4px;
    }

    .movie.section .title_box{
        position: relative;
    }
    .movie_main{
        padding-top: 30px;
    }
    .movie_box {
        margin-bottom:55vw;
    }
    .movie_main,.movie_box{
        min-height: auto;
        height: auto;
    }
    .bottom_box{
        height: auto;
        padding: 10px 0;
    }
    .bottom_box .bottom_open .home_btn_open li a{
        margin:2px 5px;
    }
    .bottom_box .bottom_open .home_btn_open{
        flex-wrap: wrap;
    }
}
@media screen and (max-width:700px) {
    .home .img_bg {
        background: url(../images/top_bg_s.webp) center center;
        background-size:cover;
        padding-bottom:7%;
    }
    .home .index_title {
        padding-top:112%;
    }
    .home .home_btn{
        width:86%;
        height:25vw;
        background: url(../images/btn_home_bg.webp) no-repeat;
        background-size: 100% 100%;
    }
    .home .home_btn img.btn_home_txt {
        width:60%;
    }
    .home .home_btn img:first-child{
        width: 9%;
    }
    .home .home_btn img:nth-child(3),.home .home_btn img:nth-child(4){
        width:4%;
    }
    .news .news_bottom .newstype_menu li::before, .news .news_bottom .newstype_menu li a, .news .news_bottom .newstype_menu li {
        width: 162px;
    }
    .news .news_bottom .newstype_menu{
        width:70%;
        margin: 0 auto;
    }
}
@media screen and (max-width:660px) {
    .bottom_box{
        height: auto;
        padding:10px;
    }
    .bottom_box .bottom_open,
    .bottom_box .bottom_pre{
        flex-direction: column;
    }
    .bottom_box .bottom_appicon{
        width:70px;
        margin-right: 5px;
    }
    .bottom_box .bottom_pre .bottom_tt{
        height: 46px;
        margin-top:-10px;
        margin-left: 0px;
    }
    .bottom_box .bottom_pre .bottom_btn{
        margin-top: -12px;
        width:214px;
        height:50px;
    }
    .bottom_box .bottom_pre .bottom_btn:hover{
        transform: translateY(0px);
    }
    .bottom_box .bottom_pre .bottom_btn img.btn_home_round{
        width: 20px;
    }
    .bottom_box .bottom_pre .bottom_btn:hover img.btn_home_round{
        transform: rotate(0deg);
        -webkit-filter: brightness(100%); /* Safari */
        filter: brightness(100%);
    }
    .bottom_box .bottom_pre .bottom_btn img.btn_home_arrow{
        width: 8px;
    }
    .bottom_box .bottom_pre .bottom_btn:hover img.btn_home_arrow{
        transform:translateX(0px);
        -webkit-filter: brightness(100%); /* Safari */
        filter: brightness(100%);
    }
    .bottom_box .bottom_pre .bottom_btn img.btn_home_txt{
        width: 130px;
    }
    .bottom_box .bottom_pre .bottom_btn:hover img.btn_home_txt{
        transform:scale(1);
    }

    .bottom_box .bottom_open .bottom_tt{
        height:35px;
        margin-left:0px;
        margin-top: -10px;
    }
    .bottom_box .bottom_open .bottom_tt_re {
        height:50px;
        margin: -10px -15px;
    }
    .bottom_box .bottom_open .home_btn_open{
        margin-top: -2px;
    }
    .bottom_box .bottom_open .home_btn_open li a{
        height:9.2vw;
        margin:2px 5px;
    }
    .bottom_box .bottom_open .home_btn_open li.ios a{
        min-height: 45px;
    }
    .bottom_box .bottom_open .home_btn_open li.gp a{
        height:9.6vw;
    }
    .bottom_box .bottom_open .home_btn_open li a:hover{
        margin-top:0px;
    }
}
@media screen and (max-width:550px) {
    .home .copy .top_copy_s {
        margin-top:112px;
    }
    .news .news_bottom .newstype_menu{
        width:80%;
    }
    .home .home_btn_open {
        flex-wrap: wrap;
        width: 94%;
        margin: 0 auto;
    }
    .home .home_btn_open li{
        width: 50%;
    }
    .home .home_btn_open li a img{
        height: 12.3vw;
        margin:0 2px;
    }
    .home .home_btn_open li.ios{
        width: 100%;
    }
    .home .home_btn_open li.ios img{
        width: 48%;
        height: auto;
    }
}
@media screen and (max-width:500px) {
    .news .news_bottom .newstype_menu{
        width:100%;
    }
    .news_list li .news_title {
        width:70%;
    }
    .character .character_more {
        width:60%;
        max-width: 328px;
        height:16vw;
        background: url(../images/btn_char.webp) no-repeat center;
        background-size: 100% auto;
        opacity:1;
        animation:none;
    }
    .character .character_more img:nth-child(1){
        width:14%;
    }
    .character .character_more img:nth-child(2){
        width:30%;
    }
    .movie_list .movie_item a .movie_play{
        margin-top: -40px;
        margin-left: -40px;
        width:80px;
        height:80px;
    }
    .movie_list .movie_item a .movie_play img:first-child,    .movie_list .movie_item a:hover .movie_play img:first-child{
        width: 100%;
        transform: rotate(0deg) scale(1) ;
    }
    .movie_list .movie_item a .movie_play img:last-child,.movie_list .movie_item a:hover .movie_play img:last-child{
        margin-top: -17%;
        margin-left: -10%;
        width: 30%;
        transition: all 0.4s ease-in-out;
        transform: scale(1) translateX(0px);
    }

}
@media screen and (max-width:400px) {
    .news_list li .news_title {
        width:66%;
    }    
}
@media screen and (max-width:370px) {
    .system .slick-dots li {
        margin: 0px;
    }
    .news .news_bottom .newstype_menu li::before, .news .news_bottom .newstype_menu li a, .news .news_bottom .newstype_menu li {
        width: 143px;
    }
    .section .title_box::after,.section .title_box::before{
        width: 76px;
        height: 30px;
    }
    .news_list li .news_title{
        padding-left:5px;
    }
    .news_list li .news_type img{
        height: 35px;
    }
    .news .news_bottom .newstype_menu {
        width: 90%;
    }
    .news .news_bottom .newstype_menu li::before, .news .news_bottom .newstype_menu li a, .news .news_bottom .newstype_menu li {
        width: 100%;
    }
    .news_list li .news_type{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .news_list li .news_type img {
        height:28px;
    }
    .news_list li::after{
        margin-top: 35px;
    }
}
@media screen and (max-width:300px) {
    .bottom_box .bottom_appicon{
        width:70px;
        margin-right: 15px;
    }
    .bottom_box .bottom_pre .bottom_tt{
        height: 46px;
        margin-top:-10px;
        margin-left: 0px;
    }
    .bottom_box .bottom_pre .bottom_btn{
        margin-top: -12px;
        width:182px;
        height:45px;
    }
    .bottom_box .bottom_pre .bottom_btn img.btn_home_round{
        width: 15px;
    }
    .bottom_box .bottom_pre .bottom_btn img.btn_home_arrow{
        width: 8px;
    }
    .bottom_box .bottom_pre .bottom_btn img.btn_home_txt{
        width: 115px;
    }
    .bottom_box .bottom_pre .bottom_btn:hover img.btn_home_txt{
        transform:scale(1);
    }
    .news .news_bottom .news_st{
        width: 86%;
        margin-top: -3px;
    }

}