body{
    background-color: black;
    background-color: #c4cafb;
    padding: 0;
    margin: 0;
}
.loadingDiv{
    background-color: black;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    /*transform: translateY(40%);*/
    position: fixed;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.loadingDiv .loadingDiv_Text{
    text-align: center;
    width: 60%;
    margin: 0 auto;
}
.maskLoadingDiv {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 10000;
    background-color: #ffffff;
    opacity: 0;
}
#preModal .preBox_modelBox{
    width: 40%;
    margin: 0 auto;
    position: relative;
}
#preModal .preBoxContent{
    background-image: url(/skin/images/preBox_bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
}
#preModal .preBox_modelBox .btn-close{
    background-image: url(/skin/images/preBox_close.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    width: 5%;
    height: 0;
    padding-bottom: 6%;
    opacity: 1;
    border-radius: 0;
    position: absolute;
    right: 1%;
    top: 2.5%;
}
#preModal .preBox_modelBox .preBox_title{
    background-image: url(/skin/images/pre_title.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    width: 80%;
    height: 0;
    padding-bottom: 10%;
    margin: 0 auto;
}



.MainDiv{
    background-color: #c4cafb;
    color: white;
    font-family: 'Noto Serif TC', serif;
}
.leftBox {
    width: 15%;
    position: fixed;
    z-index: 99;
    left: 2%;
    top: 5%;
    transition: all .3s ease-in-out;
}
.leftBox .menuLogo{
    width: 100%;
}
.leftBox .menuLogo a{
    width: 100%;
    display: inline-block;
    height: 0;
    padding-bottom: 42%;
    background-image: url(/skin/images/logo.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}
.leftBox .menuListWhite .menuLogo a{
    background-image: url(/skin/images/logo_w.png);
}
.leftBox ul {
    padding: 0 10%;
}
.leftBox ul,
.leftBox ul li{
    list-style: none;
}
.leftBox ul li{
    margin: 5% 0;
}
.leftBox ul li a{
    text-decoration: none;
}
.leftBox ul li a,
.leftBox ul li a,
.leftBox ul li a:hover,
.leftBox ul li a:active,
.leftBox ul li a:visited,
.leftBox ul li a:link{
    color: #0c0d19;
}
.leftBox .menuListWhite ul li a,
.leftBox .menuListWhite ul li a,
.leftBox .menuListWhite ul li a:hover,
.leftBox .menuListWhite ul li a:active,
.leftBox .menuListWhite ul li a:visited,
.leftBox .menuListWhite ul li a:link{
    color: #ffffff;
}
.leftBox ul li a .redSpan{
    color: #ab3c3c;
}
.leftBox ul li a span:after,
.leftBox ul li a span:before{
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
}
.leftBox ul li a span{
    font-size: 1.05vw;
    position: relative;
}
.leftBox ul li a span:before {
    content: attr(data-content);
    position:relative;
    z-index: 2;
}
.leftBox ul li a span:after {
    content: attr(data-hoverContent);
    position:absolute;
    z-index: 1;
    left: 0;
    opacity:0;
}
.leftBox ul li a span:hover:before{
    opacity:0;
}
.leftBox ul li a span:hover:after{
    opacity:1;
}
.leftBox .line{
    border-bottom: 1.7px solid #0c0d19;
    margin: 10% 0 5% 0;
    width: 60%;
}
.leftBox .menuListWhite .line{
    border-bottom: 1.7px solid #ffffff;
}
.leftBox .preBtn {
    display: inline-block;
    width: 65%;
    height: 0;
    padding-bottom: 20%;
    background-image: url(/skin/images/pre_btn.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    transition: all .3s ease-in-out;
}
.leftBox .preBtn:hover{
    background-image: url(/skin/images/pre_btn_h.png);
}




.bottomBox{
    position: relative;
}
.bottomBox_platBox_bg{
    background-image: url(/skin/images/bottom_bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    width: 100%;
    height: 0;
    padding-bottom: 5%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
}
.bottomBox_platBox{
    display: flex;
    flex-direction: row;
    margin: .5% 18% 0 42%;
    width: 40%;
}
.bottomBox_platBox a{
    width: 100%;
    transition: all .3s ease-in-out;
}
.bottomBox_platBox a:hover{
    opacity: .8;
}
.bottomBox_platBox .bottomBox_platBox_plat{
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    width: 25%;
    height: 0;
    padding-bottom: 11%;
    display: inline-block;
    margin: 0 1.5%;
}
.bottomBox_platBox .bottomBox_platBox_plat.bottomBox_platBox_ios {
    background-image: url(/skin/images/iOS.svg);
    width: 20%;
}
.bottomBox_platBox .bottomBox_platBox_plat.bottomBox_platBox_android{
    background-image: url(/skin/images/android.svg);
}
.bottomBox_platBox .bottomBox_platBox_plat.bottomBox_platBox_pc{
    background-image: url(/skin/images/pc.png);
}



.section_banner{
    width: 100%;
    height: 0;
    padding-bottom: 56%;
    position: relative;
}
.section_banner video{
    width: 100%;
    position: absolute;
    z-index: 1;
}
.section_banner .maskDiv{
    background-color: rgba(0, 0, 6, 0.4);
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 0;
    padding-bottom: 56.3%;
}


.section_padding{
    width: 70%;
    margin: 0 auto;
    padding-top: 5%;
}
.section_title{
    width: 80%;
    height: 0;
    padding-bottom: 9%;
    margin: 0 auto;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}
.section_bg_effect{
    -webkit-animation: animIn .5s ease .5s forwards;
    animation: animIn .5s ease .5s forwards;
}

.section_news{
    height: 0;
    padding-bottom: 37%;
    position: relative;
}
.section_news .section_title_news{
    background-image: url(/skin/images/title_news.png);
}
.section_news .section_newsBox{
    width: 100%;
    margin: 5% 0 0 0;
}
.section_news .section_newsBox .section_newsBoxData{
    display: flex;
    flex-direction: row;
}
.section_news .section_newsBox .section_newsBoxData .swiperNewsBox {
    padding: 6% 7%;
}
.section_news .section_newsBox .section_newsBoxData .swiperNewsBox #swiperNews img{
    width: 100%;
}
.section_news .section_newsBoxData_banner{
    width: 60%;
    height: 0;
    padding-bottom: 33%;
    background-image: url(/skin/images/frame_news.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}
.section_news .section_newsBoxData_ListBox{
    width: 40%;
    padding-top: 1.7%;
}
.section_news .section_newsBoxData_ListBox .section_newsBoxData_ListTag{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.section_news .section_newsBoxData_ListBox .section_newsBoxData_ListTag a{
    width: 27%;
    margin: 0 1.5%;
}
.section_news .section_newsBoxData_ListBox .section_newsBoxData_ListTag a .news_tag{
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    width: 100%;
    height: 0;
    padding-bottom: 40%;
    display: inline-block;
    transition: all .3s ease-in-out;
}
.section_news .section_newsBoxData_ListBox .section_newsBoxData_ListTag a .news_tag.news_tag_all{
    background-image: url(/skin/images/tag_all.png);
}
.section_news .section_newsBoxData_ListBox .section_newsBoxData_ListTag a .news_tag.news_tag_event{
    background-image: url(/skin/images/tag_event.png);
}
.section_news .section_newsBoxData_ListBox .section_newsBoxData_ListTag a .news_tag.news_tag_system{
    background-image: url(/skin/images/tag_system.png);
}
.section_news .section_newsBoxData_ListBox .section_newsBoxData_ListTag a.active:hover .news_tag.news_tag_all,
.section_news .section_newsBoxData_ListBox .section_newsBoxData_ListTag a.active .news_tag.news_tag_all{
    background-image: url(/skin/images/tag_all_h.png);
}
.section_news .section_newsBoxData_ListBox .section_newsBoxData_ListTag a.active:hover .news_tag.news_tag_event,
.section_news .section_newsBoxData_ListBox .section_newsBoxData_ListTag a.active .news_tag.news_tag_event{
    background-image: url(/skin/images/tag_event_h.png);
}
.section_news .section_newsBoxData_ListBox .section_newsBoxData_ListTag a.active:hover .news_tag.news_tag_system,
.section_news .section_newsBoxData_ListBox .section_newsBoxData_ListTag a.active .news_tag.news_tag_system{
    background-image: url(/skin/images/tag_system_h.png);
}
.section_news .section_newsBoxData_List {
    background-color: rgba(255, 255, 255, 0.2);
    width: 87.4%;
    margin: 0 0 0 1.5%;
    padding: 2% 4% 61.5% 4%;
    height: 0;
    position: relative;
    overflow: hidden;
}
.section_news .section_newsBoxData_List ul{
    padding-left: 0;
}
.section_news .section_newsBoxData_List ul,
.section_news .section_newsBoxData_List ul li{
    list-style: none;
}
.section_news .section_newsBoxData_List ul li {
    border-bottom: 1px solid #4f53a5;
    padding: 1.5% .5%;
}
.section_news .section_newsBoxData_List ul li a{
    transition: all .3s ease-in-out;
}
.section_news .section_newsBoxData_List ul li a,
.section_news .section_newsBoxData_List ul li a:visited,
.section_news .section_newsBoxData_List ul li a:link{
    color: #4f53a5;
    text-decoration: none;
}
.section_news .section_newsBoxData_List ul li a:hover,
.section_news .section_newsBoxData_List ul li a:active{
    color: rgba(79, 83, 165, 0.7);
    text-decoration: none;
}
.section_news .section_newsBoxData_List ul li a{
    display: flex;
    flex-direction: row;
}
.section_news .section_newsBoxData_List ul li a span{
    display: inline-block;
    transition: all .3s ease-in-out;
}
.section_news .section_newsBoxData_List ul li a .news_date{
    width: 21%;
    font-size: .85vw;
}
.section_news .section_newsBoxData_List ul li a .news_subject{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 79%;
    font-size: .95vw;
}
.section_news .section_newsBoxData_List .news_more {
    position: absolute;
    bottom: 2%;
    right: 4%;
}
.section_news .section_newsBoxData_List .news_more,
.section_news .section_newsBoxData_List .news_more:visited,
.section_news .section_newsBoxData_List .news_more:link{
    color: #4f53a5;
    text-decoration: none;
    font-size: .95vw;
}
.section_news .section_newsBoxData_List .news_more:hover,
.section_news .section_newsBoxData_List .news_more:active{
    color: rgba(79, 83, 165, 0.7);
    text-decoration: none;
}

.section_news .section_newsBoxData_List #newsWp{
    overflow: hidden;
}
.section_news .section_newsBoxData_List #newsListToSingle{
    width: 300%;
    display: flex;
    flex-direction: row;
    transition: all .3s ease-in-out;
}
.section_news .section_newsBoxData_List #newsListToSingle ul{
    width: 33%;
    margin-right: 3%;
}
.section_news .section_newsBoxData_List #newsListToSingle.step1{
    transform: translateX(0);
}
.section_news .section_newsBoxData_List #newsListToSingle.step2{
    transform: translateX(-36%);
}
.section_news .section_newsBoxData_List #newsListToSingle.step3{
    transform: translateX(-72%);
}


.section_world .section_title_world{
    background-image: url(/skin/images/title_world.png);
    /*-webkit-mask-image: url(/skin/images/mask.png);*/
    /*-webkit-mask-mode: alpha;*/
    /*-webkit-mask-repeat: no-repeat;*/
    /*-webkit-mask-size: 2000px;*/
    /*-webkit-mask-position: left center;*/
}
.section_world .section_world_bg {
    background-image: url(/skin/images/world_bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    width: 100%;
    height: 0;
    padding-bottom: 63%;
    padding-top: 5%;
}
.section_world .section_world_text{
    background-image: url(/skin/images/world_text.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    width: 100%;
    height: 0;
    padding-bottom: 45%;
    /*-webkit-mask-mode: alpha;*/
    /*-webkit-mask-repeat: no-repeat;*/
    /*-webkit-mask-size: 2000px;*/
    /*-webkit-mask-position: left center;*/
}



.section_role{
    margin-top: -5%;
    padding-top: 0;
}
.section_role .section_title_role{
    background-image: url(/skin/images/title_role.png);
    /*-webkit-mask-image: url(/skin/images/mask.png);*/
    /*-webkit-mask-mode: alpha;*/
    /*-webkit-mask-repeat: no-repeat;*/
    /*-webkit-mask-size: 2000px;*/
    /*-webkit-mask-position: left center;*/
}


.section_role #roleIntro{
    width: 80%;
    margin: 2% auto 0 auto;
    position: relative;
}
.section_role #roleIntro .swiper-container {
    /*margin-top: -132%;*/
}
.section_role #roleIntro .swiper-wrapper{
    position: relative;
    padding: 0 5%;
}
.section_role #roleIntro .swiper-wrapper p{
    color: #000000;
}
.section_role #roleIntro .swiper-wrapper .role_name{
    font-size: 2.8vw;
    font-weight: 500;
    margin-bottom: 4%;
    letter-spacing: .5vw;
}
.section_role #roleIntro .swiper-wrapper .role_name:after{
    background-image: url(/skin/images/border.png);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100%;
    width: 40%;
    height: 0;
    padding-bottom: 9.5%;
    position: absolute;
    left: 0;
    content: " ";
}
.section_role #roleIntro .swiper-wrapper .role_cv{
    font-size: 1.15vw;
}
.section_role #roleIntro .swiper-wrapper .roleVoice{
    width: 30%;
}
.section_role #roleIntro .swiper-wrapper .roleVoice .roleVoice_box.role_voice_child{
    display: none;
}
.section_role #roleIntro .swiper-wrapper .role_voice {
    display: inline-block;
    background-image: url(/skin/images/role/voice.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    width: 30%;
    height: 0;
    padding-bottom: 15%;
    margin-right: 8%;
    cursor: pointer;
}
.section_role #roleIntro .swiper-wrapper .role_voice.red {
    background-image: url(/skin/images/role/voice_red.png);
}
.section_role #roleIntro .swiper-wrapper .role_voice.gray {
    background-image: url(/skin/images/role/voice_gray.png);
}
.section_role #roleIntro .swiper-wrapper .roleIntro_content{
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    width: 28%;
    height: 0;
    padding-bottom: 28%;
}
.section_role #roleIntro .swiper-wrapper .roleIntro_content1{
    background-image: url(/skin/images/role/content_1.png);
}
.section_role #roleIntro .swiper-wrapper .roleIntro_content2{
    background-image: url(/skin/images/role/content_2.png);
}
.section_role #roleIntro .swiper-wrapper .roleIntro_content3{
    background-image: url(/skin/images/role/content_3.png);
}
.section_role #roleIntro .swiper-wrapper .roleIntro_content4{
    background-image: url(/skin/images/role/content_4.png);
}
.section_role #roleIntro .swiper-wrapper .roleIntro_content5{
    background-image: url(/skin/images/role/content_5.png);
}
.section_role #roleIntro .swiper-wrapper .roleIntro_content6{
    background-image: url(/skin/images/role/content_6.png);
}
.section_role #roleIntro .swiper-wrapper .roleIntro_content7{
    background-image: url(/skin/images/role/content_7.png);
}
.section_role #roleIntro .swiper-wrapper .roleIntro_content8{
    background-image: url(/skin/images/role/content_8.png);
}
.section_role #roleIntro .swiper-wrapper .roleIntro_content9{
    background-image: url(/skin/images/role/content_9.png);
}
.section_role #roleIntro .swiper-wrapper .roleIntro_content10{
    background-image: url(/skin/images/role/content_10.png);
}
.section_role #roleIntro .swiper-wrapper .roleIntro_content11{
    background-image: url(/skin/images/role/content_11.png);
}
.section_role #roleIntro .swiper-wrapper .roleIntro_content12{
    background-image: url(/skin/images/role/content_12.png);
}
.section_role #roleIntro .swiper-wrapper .roleIntro_content13{
    background-image: url(/skin/images/role/content_13.png);
}
.section_role #roleIntro .swiper-wrapper .roleIntro_content14{
    background-image: url(/skin/images/role/content_14.png);
}
.section_role #roleIntro .swiper-wrapper .roleIntro_content15{
    background-image: url(/skin/images/role/content_15.png);
}

.section_role #roleIntro .swiper-wrapper .roleImage {
    position: absolute;
    right: 5%;
    bottom: 8%;
    transition: all .3s ease-in-out;
}
.section_role #roleIntro .swiper-wrapper .roleImage.adult{
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    width: 40%;
    height: 0;
    padding-bottom: 50%;
    opacity: 1;
}
.section_role #roleIntro .swiper-wrapper .roleImage.child{
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    width: 40%;
    height: 0;
    padding-bottom: 50%;
    opacity: 0;
}
.section_role #roleIntro .swiper-wrapper .roleImage.adult.role1{
    background-image: url(/skin/images/role/adult_1.png);
}
.section_role #roleIntro .swiper-wrapper .roleImage.adult.role2{
    background-image: url(/skin/images/role/adult_2.png);
    width: 18%;
    right: 15%;
}
.section_role #roleIntro .swiper-wrapper .roleImage.adult.role3{
    background-image: url(/skin/images/role/adult_3.png);
    width: 27%;
    right: 8%;
}
.section_role #roleIntro .swiper-wrapper .roleImage.adult.role4{
    background-image: url(/skin/images/role/adult_4.png);
    width: 25%;
    right: 12%;
}
.section_role #roleIntro .swiper-wrapper .roleImage.adult.role5{
    background-image: url(/skin/images/role/adult_5.png);
    width: 25%;
    right: 12%;
}
.section_role #roleIntro .swiper-wrapper .roleImage.adult.role6{
    background-image: url(/skin/images/role/adult_6.png);
    width: 25%;
    right: 10%;
}
.section_role #roleIntro .swiper-wrapper .roleImage.adult.role7{
    background-image: url(/skin/images/role/adult_7.png);
    width: 31%;
}
.section_role #roleIntro .swiper-wrapper .roleImage.adult.role8{
    background-image: url(/skin/images/role/adult_8.png);
    width: 27%;
    right: 13%;
}
.section_role #roleIntro .swiper-wrapper .roleImage.adult.role9{
    background-image: url(/skin/images/role/adult_9.png);
    width: 31%;
    right: 10%;
}
.section_role #roleIntro .swiper-wrapper .roleImage.adult.role10{
    background-image: url(/skin/images/role/adult_10.png);
    width: 20%;
    right: 12%;
}
.section_role #roleIntro .swiper-wrapper .roleImage.adult.role11{
    background-image: url(/skin/images/role/adult_11.png);
    width: 20%;
    right: 15%;
}
.section_role #roleIntro .swiper-wrapper .roleImage.adult.role12{
    background-image: url(/skin/images/role/adult_12.png);
    width: 25%;
    right: 13%;
}
.section_role #roleIntro .swiper-wrapper .roleImage.adult.role13{
    background-image: url(/skin/images/role/adult_13.png);
    width: 16%;
    right: 15%;
}
.section_role #roleIntro .swiper-wrapper .roleImage.adult.role14{
    background-image: url(/skin/images/role/adult_14.png);
    width: 20%;
    right: 13%;
}
.section_role #roleIntro .swiper-wrapper .roleImage.adult.role15{
    background-image: url(/skin/images/role/adult_15.png);
    width: 27%;
    right: 10%;
}
.section_role #roleIntro .swiper-wrapper .roleImage.child.role1{
    background-image: url(/skin/images/role/child_1.png);
    width: 35%;
    right: 8%;
}
.section_role #roleIntro .swiper-wrapper .roleImage.child.role2{
    background-image: url(/skin/images/role/child_2.png);
    width: 14%;
    right: 18%;
}
.section_role #roleIntro .swiper-wrapper .roleImage.child.role3{
    background-image: url(/skin/images/role/child_3.png);
    width: 20%;
    right: 15%;
}
.section_role #roleIntro .swiper-wrapper .roleImage.child.role4{
    background-image: url(/skin/images/role/child_4.png);
    width: 11%;
    right: 20%;
}
.section_role #roleIntro .swiper-wrapper .roleImage.child.role5{
    background-image: url(/skin/images/role/child_5.png);
    width: 15%;
    right: 15%;
}
.section_role #roleIntro .swiper-wrapper .roleImage.child.role6{
    background-image: url(/skin/images/role/child_6.png);
    width: 22%;
    right: 15%;
}
.section_role #roleIntro .swiper-wrapper .roleImage.child.role7{
    background-image: url(/skin/images/role/child_7.png);
    width: 18%;
    right: 15%;
}
.section_role #roleIntro .swiper-wrapper .roleImage.child.role8{
    background-image: url(/skin/images/role/child_8.png);
    width: 21%;
    right: 15%;
}
.section_role #roleIntro .swiper-wrapper .roleImage.child.role9{
    background-image: url(/skin/images/role/child_9.png);
    right: 8%;
    width: 34%;
    bottom: 9%;
    padding-bottom: 53%;
}
.section_role #roleIntro .swiper-wrapper .roleImage.child.role10{
    background-image: url(/skin/images/role/child_10.png);
}
.section_role #roleIntro .swiper-wrapper .role_state{
    width: 17%;
    height: 0;
    padding-bottom: 17%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition-duration: .5s;
    position: relative;
    margin-top: 8%;
}
.section_role #roleIntro .swiper-wrapper .role_state .change_stateBtn {
    display: inline-block;
    background-image: url(/skin/images/role/state_border.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    transition: all .3s ease-in-out;
    left: 100%;
    position: absolute;
    z-index: 1;
    /*-webkit-transform: rotate(0deg);*/
    /*transform: rotate(0deg);*/
}
.section_role #roleIntro .swiper-wrapper .role_state .change_stateBtn.red {
    background-image: url(/skin/images/role/state_border_red.png);
}
.section_role #roleIntro .swiper-wrapper .role_state .change_stateBtn.is_active{
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}
.section_role #roleIntro .swiper-wrapper .role_state .change_stateBtn.is_active2{
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
}
.section_role #roleIntro .swiper-wrapper .role_state .role_state_state_img{
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    width: 50%;
    height: 0;
    padding-bottom: 20%;
    position: absolute;
    top: 40%;
    left: 125%;
    cursor: pointer;
    z-index: 2;
}
.section_role #roleIntro .swiper-wrapper .role_state .adult{
    background-image: url(/skin/images/role/adult_state.png);
    opacity: 1;
}
.section_role #roleIntro .swiper-wrapper .role_state .red.adult{
    background-image: url(/skin/images/role/adult_state_red.png);
}
.section_role #roleIntro .swiper-wrapper .role_state .child{
    background-image: url(/skin/images/role/child_state.png);
    opacity: 0;
}
.section_role #roleIntro .swiper-wrapper .role_state .red.child{
    background-image: url(/skin/images/role/child_state_red.png);
}
.section_role .roleSwiperDiv{
    position: absolute;
    z-index: 2;
}
.section_role #roleIntro .swiper-slide{
    transform:translateX(0);
    transition: all .5s ease-in-out;
    opacity: 1;
}
.section_role #roleIntro .swiper-slide.fadeSlide{
    transform: translateX(0);
    opacity: 0;
}
.section_role #roleIntro .swiper-button-next.swiper-button-disabled,
.section_role #roleIntro .swiper-button-prev.swiper-button-disabled {
    opacity: 1;
}
.section_role #roleIntro .swiper-button-prev ,
.section_role #roleIntro .swiper-button-next {
    width: 2vw;
    height: 4vw;
    background-size: cover;
    top: 50%;
}
.section_role #roleIntro .swiper-button-prev {
    background-image: url(/skin/images/left.svg);
    left: 0;
}
.section_role #roleIntro .swiper-button-next {
    background-image: url(/skin/images/right.svg);
    right: 0;
}

.section_role #roleIntro .role_pagination {
    padding: 1% 2% 0 2%;
    width: 90%;
    margin: 0 8% 25% 2%;
}
.section_role #roleIntro .role_pagination .role_dot_list{
    position: relative;
    width: 100%;
}
.section_role #roleIntro .role_pagination .role_dot{
    position: absolute;
    width: 13%;
    height: 13%;
}
.section_role #roleIntro .role_pagination .role_dot a{
    display: inline-block;
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.section_role #roleIntro .role_pagination .role_dot a span{
    display: inline-block;
    width: 80%;
    height: 0;
    padding-bottom: 90%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
    overflow: hidden;
    transition: all .5s ease-in-out;
}
.section_role #roleIntro .role_pagination .role_dot a span:before{
    background-color: rgba(0, 0, 0, 0.4);
    position: absolute;
    width: 83%;
    top: 12.3%;
    height: 36.7%;
    content: "";
    transition-duration: .5s;
    left: 10.5%;
}
.section_role #roleIntro .role_pagination .role_dot a span:after{
    background-color: rgba(0, 0, 0, 0.4);
    position: absolute;
    width: 83%;
    top: 49%;
    height: 36.7%;
    content: "";
    transition-duration: .5s;
    left: 10.5%;
}
.section_role #roleIntro .role_pagination .role_dot.is_active a span:before{
    height: 0;
}
.section_role #roleIntro .role_pagination .role_dot.is_active a span:after{
    top: 83%;
    height: 0;
}
.section_role #roleIntro .role_pagination .role_dot.role_dot_2{
    margin-top: 7%;
    left: 7%;
}
.section_role #roleIntro .role_pagination .role_dot.role_dot_3{
    left: 20%;
}
.section_role #roleIntro .role_pagination .role_dot.role_dot_4{
    left: 34%;
}
.section_role #roleIntro .role_pagination .role_dot.role_dot_5{
    left: 48%;
}
.section_role #roleIntro .role_pagination .role_dot.role_dot_6{
    margin-top: 7%;
    left: 27%;
}
.section_role #roleIntro .role_pagination .role_dot.role_dot_7{
    margin-top: 7%;
    left: 41%;
}
.section_role #roleIntro .role_pagination .role_dot.role_dot_8{
    margin-top: 14%;
    left: 20%;
}
.section_role #roleIntro .role_pagination .role_dot.role_dot_9{
    margin-top: 14%;
    left: 34%;
}
.section_role #roleIntro .role_pagination .role_dot.role_dot_10{
    margin-top: 14%;
    left: 48%;
}
.section_role #roleIntro .role_pagination .role_dot.role_dot_11{
    left: 68%;
}
.section_role #roleIntro .role_pagination .role_dot.role_dot_12{
    left: 82%;
}
.section_role #roleIntro .role_pagination .role_dot.role_dot_13{
    margin-top: 7%;
    left: 61%;
}
.section_role #roleIntro .role_pagination .role_dot.role_dot_14{
    margin-top: 7%;
    left: 75%;
}
.section_role #roleIntro .role_pagination .role_dot.role_dot_15{
    margin-top: 7%;
    left: 89%;
}
.section_role #roleIntro .role_pagination .role_dot.role_dot_1 a span{
    background-image: url(/skin/images/role/dot_1.png);
}
.section_role #roleIntro .role_pagination .role_dot.role_dot_2 a span{
    background-image: url(/skin/images/role/dot_2.png);
}
.section_role #roleIntro .role_pagination .role_dot.role_dot_3 a span{
    background-image: url(/skin/images/role/dot_3.png);
}
.section_role #roleIntro .role_pagination .role_dot.role_dot_4 a span{
    background-image: url(/skin/images/role/dot_4.png);
}
.section_role #roleIntro .role_pagination .role_dot.role_dot_5 a span{
    background-image: url(/skin/images/role/dot_5.png);
}
.section_role #roleIntro .role_pagination .role_dot.role_dot_6 a span{
    background-image: url(/skin/images/role/dot_6.png);
}
.section_role #roleIntro .role_pagination .role_dot.role_dot_7 a span{
    background-image: url(/skin/images/role/dot_7.png);
}
.section_role #roleIntro .role_pagination .role_dot.role_dot_8 a span{
    background-image: url(/skin/images/role/dot_8.png);
}
.section_role #roleIntro .role_pagination .role_dot.role_dot_9 a span{
    background-image: url(/skin/images/role/dot_9.png);
}
.section_role #roleIntro .role_pagination .role_dot.role_dot_10 a span{
    background-image: url(/skin/images/role/dot_10.png);
}
.section_role #roleIntro .role_pagination .role_dot.role_dot_11 a span{
    background-image: url(/skin/images/role/dot_11.png);
}
.section_role #roleIntro .role_pagination .role_dot.role_dot_12 a span{
    background-image: url(/skin/images/role/dot_12.png);
}
.section_role #roleIntro .role_pagination .role_dot.role_dot_13 a span{
    background-image: url(/skin/images/role/dot_13.png);
}
.section_role #roleIntro .role_pagination .role_dot.role_dot_14 a span{
    background-image: url(/skin/images/role/dot_14.png);
}
.section_role #roleIntro .role_pagination .role_dot.role_dot_15 a span{
    background-image: url(/skin/images/role/dot_15.png);
}

.section_role .roleBg{
    position: relative;
    top: 0;
    z-index: 1;
}
.section_role .roleBg .bg_img{
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100%;
    width: 55%;
    height: 0;
    padding-bottom: 65%;
    opacity: 0;
    margin-left: 40%;
    margin-top: 3%;
    transition: all .3s ease-in-out;
    position: absolute;
}
.section_role .roleBg .bg_img.is_active{
    opacity: 1;
}
.section_role .roleBg .bg_img.adult#role_bg_img1{
    background-image: url(/skin/images/role/adult_bg_1.png);
}
.section_role .roleBg .bg_img.adult#role_bg_img2{
    background-image: url(/skin/images/role/adult_bg_2.png);
}
.section_role .roleBg .bg_img.adult#role_bg_img3{
    background-image: url(/skin/images/role/adult_bg_3.png);
    width: 54%;
    margin-left: 41%;
}
.section_role .roleBg .bg_img.adult#role_bg_img4{
    background-image: url(/skin/images/role/adult_bg_4.png);
}
.section_role .roleBg .bg_img.adult#role_bg_img5{
    background-image: url(/skin/images/role/adult_bg_5.png);
}
.section_role .roleBg .bg_img.adult#role_bg_img6{
    background-image: url(/skin/images/role/adult_bg_6.png);
}
.section_role .roleBg .bg_img.adult#role_bg_img7{
    background-image: url(/skin/images/role/adult_bg_7.png);
}
.section_role .roleBg .bg_img.adult#role_bg_img8{
    background-image: url(/skin/images/role/adult_bg_8.png);
}
.section_role .roleBg .bg_img.adult#role_bg_img9{
    background-image: url(/skin/images/role/adult_bg_9.png);
}
.section_role .roleBg .bg_img.adult#role_bg_img10{
    background-image: url(/skin/images/role/adult_bg_10.png);
}
.section_role .roleBg .bg_img.adult#role_bg_img11{
    background-image: url(/skin/images/role/adult_bg_11.png);
}
.section_role .roleBg .bg_img.adult#role_bg_img12{
    background-image: url(/skin/images/role/adult_bg_12.png);
}
.section_role .roleBg .bg_img.adult#role_bg_img13{
    background-image: url(/skin/images/role/adult_bg_13.png);
}
.section_role .roleBg .bg_img.adult#role_bg_img14{
    background-image: url(/skin/images/role/adult_bg_14.png);
}
.section_role .roleBg .bg_img.adult#role_bg_img15{
    background-image: url(/skin/images/role/adult_bg_15.png);
}
.section_role .roleBg .bg_img.child#role_bg_img1{
    background-image: url(/skin/images/role/child_bg_1.png);
    width: 53%;
    margin-left: 42%;
}
.section_role .roleBg .bg_img.child#role_bg_img2{
    background-image: url(/skin/images/role/child_bg_2.png);
}
.section_role .roleBg .bg_img.child#role_bg_img3{
    background-image: url(/skin/images/role/child_bg_3.png);
    width: 54%;
    margin-left: 41%;
}
.section_role .roleBg .bg_img.child#role_bg_img4{
    background-image: url(/skin/images/role/child_bg_4.png);
}
.section_role .roleBg .bg_img.child#role_bg_img5{
    background-image: url(/skin/images/role/child_bg_5.png);
}
.section_role .roleBg .bg_img.child#role_bg_img6{
    background-image: url(/skin/images/role/child_bg_6.png);
}
.section_role .roleBg .bg_img.child#role_bg_img7{
    background-image: url(/skin/images/role/child_bg_7.png);
}
.section_role .roleBg .bg_img.child#role_bg_img8{
    background-image: url(/skin/images/role/child_bg_8.png);
}
.section_role .roleBg .bg_img.child#role_bg_img9{
    background-image: url(/skin/images/role/child_bg_9.png);
}
.section_role .roleBg .bg_img.child#role_bg_img10{
    background-image: url(/skin/images/role/child_bg_10.png);
}

.section_gameIntro{

}
.section_gameIntro .section_title_game{
    background-image: url(/skin/images/title_game.png);
}
.section_gameIntro #gameIntro {
    position: relative;
    width: 80%;
    margin: 0 auto
}
.section_gameIntro #gameIntro .swiper-container {
    padding-bottom: 8%;
    margin: 7% auto;
}
.section_gameIntro #gameIntro .swiper-slide {
    width: 30vw;
    -webkit-filter: brightness(0.7);
    filter: brightness(0.7);
}
.section_gameIntro #gameIntro .swiper-slide img{
    display:block;
    width: 100%;
}
.section_gameIntro #gameIntro .swiper-slide.swiper-slide-active {
    -webkit-filter: brightness(1);
    filter: brightness(1);
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.5);
}
.section_gameIntro #gameIntro .swiper-pagination {
    width: 100%;
    bottom: 20px;
}
.section_gameIntro #gameIntro .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 5px;
    width: 1vw;
    height: 1vw;
    opacity: 1;
    background: unset;
    border-radius: unset;
    background-image: url(/skin/images/dot.svg);
    background-size: contain;
}
.section_gameIntro #gameIntro .swiper-pagination-bullets .swiper-pagination-bullet-active {
    background-image: url(/skin/images/dot_h.svg);
    transform: scale(1.2);
}
.section_gameIntro #gameIntro .swiper-button-prev ,
.section_gameIntro #gameIntro .swiper-button-next {
    width: 2vw;
    height: 4vw;
    background-size: cover;
    margin-top: -7%;
}
.section_gameIntro #gameIntro .swiper-button-prev {
    background-image: url(/skin/images/left.svg);
    left: 3%;
}
.section_gameIntro #gameIntro .swiper-button-prev:hover {
}
.section_gameIntro #gameIntro .swiper-button-next {
    background-image: url(/skin/images/right.svg);
    right: 3%;
}
.section_gameIntro #gameIntro .swiper-button-next:hover {

}


.preBox .preModalLogo {
    width: 20%;
    margin: 0 auto;
}
.preBox .preModalLogo picture source,
.preBox .preModalLogo picture img{
    width: 100%;
}

@media screen and (max-width: 1200px) {
    .section_news .section_newsBoxData_List ul li a .news_date{
        width: 26%;
    }
    .section_news .section_newsBoxData_List ul li a .news_subject{
        width: 74%;
    }
}
@media screen and (max-width: 1040px) {
    .section_news .section_newsBoxData_List ul li a .news_date{
        width: 28%;
    }
    .section_news .section_newsBoxData_List ul li a .news_subject{
        width: 72%;
    }
}
@media screen and (max-width: 800px) and (max-width: 768px){
    .section_news .section_newsBoxData_List ul li a .news_date{
        width: 32%;
    }
    .section_news .section_newsBoxData_List ul li a .news_subject{
        width: 68%;
    }
}

@-webkit-keyframes animIn {
    100% {
        -webkit-mask-position: right center
    }
}
@keyframes animIn {
    100% {
        -webkit-mask-position: right center;
    }
}