/* css for pc*/

.character{
    position:absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.characterCtr{
    top: 43px;
    width: 100vw;
    height: 100vh;
    z-index: 9;
}
.cn .element{
    top: 70px;
}
.en .element{
    top: 70px;
}
.tc .element{
    top: 70px;
}
.page1-content{
    position:absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.character :nth-child(1){    
    position: absolute;
    left: -65px;
    bottom: 11px;
    height: 54vh;
    z-index: 9;
}
.character :nth-child(2){
    position: absolute;
    bottom: -76px;
    left: 440px;
    z-index: 99;
    height: 55vh;
}

.character :nth-child(3){
    position: absolute;
    bottom: 130px;
    left: 920px;
    height: 430px;
}
.character :nth-child(4){
    position: absolute;
    bottom: -128px;
    right: -75px;
    height: 543px;
    z-index: 999;
}
.element{
    position:absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.element :nth-child(1){
    position: absolute;
    left: 4vw;
    top: 90vh;
    z-index: 99;
}
.element :nth-child(2){
    position: absolute;
    left: 17vw;
    top: 84vh;
    z-index: 99;
    height: 13vh;
}
.element :nth-child(3){
    position: absolute;
    left: 42vw;
    top: 83vh;
    z-index: 99;
}
.element :nth-child(4){
    position: absolute;
    left: 96vw;
    bottom: -11vh;
    z-index: 99;
    transform: rotate(90deg);
}
.element :nth-child(5){
    position: absolute;
    left: -9vw;
    top: 17vh;
    height: 18vh;
}
.element :nth-child(6){
    position: absolute;
    left: 17vw;
    top: 23vh;
    height: 11vh;
}
.element :nth-child(7){
    position: absolute;
    left: 22vw;
    top: 37vh;
    height: 9vh;
}

.element :nth-child(8){
    position: absolute;
    left: 62vw;
    top: 72vh;
    height: 22vh;
    z-index: 9;
}


.element :nth-child(9){
    position: absolute;
    left: 70vw;
    top: 13vh;
}

.element :nth-child(10){
    position: absolute;
    right: 0;
    top: 26vh;
    height: 38vh;
}

.element :nth-child(11){
    position: absolute;
    left: 84vw;
    top: -14vh;
}
.element :nth-child(12){
    position: absolute;
    left: 4vw;
    top: 45vh;
    height: 19vh;
    transform: rotate(346deg);
}

.social-elment{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.social-elment :nth-child(1){
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.social-elment :nth-child(2){
    position: absolute;
    top: 766px;
    left: 0;
    width: 248.3px;
    height: 314.3px; 
}

.social-elment :nth-child(3){
    position: absolute;
    top: 1100px;
    right: 0;
    width: 179.6px;
    height: 438px;
}
.social-elment :nth-child(4){
    position: absolute;
    top: 635px;
    right: 0;
    width: 118.7px;
    height: 191.6px;
}
.socialTitle img{
    height: 152px;
    width: 852px;
}
.cn .socialTitle{
    position:absolute;
    left: 0;
    right: 0;
    top: 150px;
    margin: auto;
}
.en .socialTitle{
    position:absolute;
    left: 0;
    right: 0;
    top: 150px;
    margin: auto;
}
.tc .socialTitle{
    position:absolute;
    left: 0;
    right: 0;
    top: 150px;
    margin: auto;
}
.ct_logo{
    position: absolute;
    top:126px;
    left: 60px;
}
.ct_logo img{
    height: 68px;
}

.ct_title{
    position: absolute;
    top:250px;
    left: 0;
    right: 0;
}
.cn .ct_title img{
    width: 407px;
    height: 145px;
}
.cn .ct_cp{
    display: flex;
    flex-direction: column;
}
.cn .socialPage1{
    height: 80vh;
}
.cn .socialPage2{
    flex: 1;
}

.en .ct_cp{
    display: flex;
    flex-direction: column;
}
.en .socialPage1{
    height: 80vh;
}
.en .socialPage2{
    flex: 1;
}


.tc .ct_cp{
    display: flex;
    flex-direction: column;
}
.tc .socialPage1{
    height: 80vh;
}
.tc .socialPage2{
    flex: 1;
}
.ct_cp .ow-logo{
    position: absolute;
    left: 0;
    right: 0;
    top: 151px;
    margin: auto;
    height: 130px;
}
.ct_cp .ow-titile{
    position:absolute;
}
.ct_cp .ow-btn{
    position:absolute;
    left: 0;
    right: 0;
    top: 475px;
    margin: auto;
    z-index: 99;    
    width: 265px;
}
.cn .socialPage1{
    height: 80vh;
    margin-bottom: 300px;
}
.en .socialPage1{
    height: 80vh;
    margin-bottom: 300px;
}
.tc .socialPage1{
    height: 80vh;
    margin-bottom: 300px;
}
.pc-text{
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top:489px;
    font-size: 14px;
    width: 514px;
    height: 42px;
    line-height: 41px;
}
.socialPage2 .wfjs{
    display: flex;
    align-items: center;
    flex-direction: column;
}

.cn .socialPage2{
    height: auto;
}
.en .socialPage2{
    height: auto;
}
.tc .socialPage2{
    height: auto;
}

.ow-des{
    position: absolute;
    top: 340px;
    left: 0;
    right: 0;   
    margin: auto;
}
.en .ow-des{
    top:320px;
}
/* end */
/* css for mobile*/
.swiper-slide10 {
    background: url(../images/ct_mobile_bg_light.png) no-repeat top 7% center;
    background-size: cover;
}
 /* 背景图设置*/
.cnmoblie .ct_cp{
    background: url(../images/ct_mobile_bg.jpg) no-repeat top 9% center;
    background-size: cover;
    height: 45.293333rem /* 3397/75 */;
}
.cnmoblie .socialPage1{
    height: 17.2rem /* 1290/75 */;
}
.cnmoblie .socialPage2{
    width: 100%;
    left: 0;
    height: 24rem; 
    margin-top: 6.666667rem /* 500/75 */;
}
.cnmoblie .socialPage1 .page1-content{
    top:4rem;
}
.cnmoblie .playintro{
    display: flex;
    justify-content: center;
}
.cnmoblie .playintro img{
    text-align: center;
    width: 8.786667rem /* 659/75 */;
    height: 1.626667rem /* 122/75 */;
}
.to_gw{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30vh;
    text-align: center;
}
.to_gw img{
    width: 6.226667rem;
}
.arrow_father{
    position: absolute;
    left: 0;
    right: 0;
    height: 100vh;
    width: 100vw;
}
.arrow{
    position: absolute;
    width: 1.08rem /* 81/75 */;
    left: 0;
    right: 0;
    margin: auto;
    bottom: .666667rem /* 50/75 */;
    animation: move 2s infinite;
}
.arrow img{
    width: 1.08rem /* 81/75 */;
}
.cnmoblie .page1-content{
    right: 0;
    left: 0;
    margin: auto;
}


.enmoblie .ct_cp{
    background: url(../images/ct_mobile_bg.jpg) no-repeat top 9% center;
    background-size: cover;
    height: 45.293333rem /* 3397/75 */;
}
.enmoblie .socialPage1{
    height: 17.2rem /* 1290/75 */;
}
.enmoblie .socialPage2{
    width: 100%;
    left: 0;
    height: 24rem; 
    margin-top: 6.666667rem /* 500/75 */;
}
.enmoblie .socialPage1 .page1-content{
    top:4rem;
}
.enmoblie .playintro{
    display: flex;
    justify-content: center;
}
.enmoblie .playintro img{
    text-align: center;
    width: 8.786667rem /* 659/75 */;
    height: 1.626667rem /* 122/75 */;
}
.enmoblie .page1-content{
    right: 0;
    left: 0;
    margin: auto;
}
.enmoblie .socialPage2 .png{
    width: 90%;
    margin-bottom: 0;
}
.enmoblie .socialPage2 .banner{
    text-align: center;
    transform:translateX(5%);
}

.tcmoblie .ct_cp{
    background: url(../images/ct_mobile_bg.jpg) no-repeat top 9% center;
    background-size: cover;
    height: 45.293333rem /* 3397/75 */;
}
.tcmoblie .socialPage1{
    height: 17.2rem /* 1290/75 */;
}
.tcmoblie .socialPage2{
    width: 100%;
    left: 0;
    height: 24rem; 
    margin-top: 6.666667rem /* 500/75 */;
}
.tcmoblie .socialPage1 .page1-content{
    top:4rem;
}
.tcmoblie .playintro{
    display: flex;
    justify-content: center;
}
.tcmoblie .playintro img{
    text-align: center;
    width: 8.786667rem /* 659/75 */;
    height: 1.626667rem /* 122/75 */;
}

.tcmoblie .page1-content{
    right: 0;
    left: 0;
    margin: auto;
}

.tcmoblie .socialPage2 .png{
    width: 100%;
    margin-bottom: 0;
}

.socialPage2 .banner-contanier{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 350px;
}
.socialPage2 .banner-contanier .banner{
    height: auto;
    width: auto;
    margin: 30px 0;
    position: relative;
}

.socialPage2 .banner-contanier .banner .bar-bg{
    position: relative;
    left: 0;
    right: 0;
    margin: auto;
    z-index: -1;
}
.banner-content .bar-logo-fr{
    position: absolute;
    left: 91px;
    top: 0;
}
.banner-content .bar-title-fr{
    position: absolute;
    right: 214px;
    top: 36px;
}
.banner-content .bar-logo-pa{
    position: absolute;
    right: 56px;
    top: 0;
}
.banner-content .bar-title-pa{
    position: absolute;
    left: 182px;
    top: 20px;
}
.banner-content .bar-logo-sq{
    position: absolute;
    right: 629px;
    top: 0;
    height: 356px;
}
.banner-content .bar-title-sq{
    position: absolute;
    right: 162px;
    top: 33px;
}
.banner-content .bar-logo-ga{
    position: absolute;
    right: 27px;
    top: 4px;
}
.banner-content .bar-title-ga{
    position: absolute;
    left: 134px;
    top: 34px;
}
.cn .element :nth-child(4){
    left: 97vw;
    bottom: 233vh;
    transform: rotate(0deg);
    z-index: 1;
}
.en .element :nth-child(4){
    left: 97vw;
    bottom: 233vh;
    transform: rotate(0deg);
    z-index: 1;
}
.tc .element :nth-child(4){
    left: 97vw;
    bottom: 233vh;
    transform: rotate(0deg);
    z-index: 1;
}
.en .banner-content .bar-title-ga{
    position: absolute;
    left: 159px;
    top: 23px;
    width: 503px;
}

.en .banner-content .bar-title-ga{
    position: absolute;
    left: 159px;
    top: 23px;
    width: 503px;
}
.en .banner-content .bar-title-sq{
    position: absolute;
    right: 150px;
    top: 27px;
    width: 474px;
}
.en .banner-content .bar-title-pa{
    position: absolute;
    left: 168px;
    top: 18px;
    width: 483px;
}
.en .banner-content .bar-title-fr{
    position: absolute;
    right: 174px;
    top: 16px;
    width: 442px;
}

.en .ct_title img{
    width: 500px;
    height: auto;
}
.tc .ct_title img{
    width: 380px;
    height: auto;
}
.cn .ct_title img{
    width: 380px;
    height: auto;
}

/* end */