﻿/* public */
:root{
    --color-text: #aaa;
    --color-bg: #000;
    --color-link: #1c1cc9;
    --color-link-hover: #aaa;
    --color-info: #1c1cc9;
    --glitch-width: 100vw;
    --glitch-height: 100vh;
    --gap-horizontal: 10px;
    --gap-vertical: 5px;
    --color-title: #fff;
    --time-anim: 4.5s;
    --delay-anim: 2s;
    --blend-mode-1: none;
    --blend-mode-2: none;
    --blend-mode-3: none;
    --blend-mode-4: overlay;
    --blend-mode-5: overlay;
    --blend-color-1: transparent;
    --blend-color-2: transparent;
    --blend-color-3: transparent;
    --blend-color-4: #000;

}

@font-face{
    font-family: 'thfont'; 
    src: url('../font/SukhumvitSet.ttc');
}@font-face{
    font-family: 'vifont'; 
    src: url('../font/SourceHanSansCN-Normal.otf');
}
html,body,form,ol,ul,li,div,p,dl,dt,dd,h1,h2,h3,h4,h5,h6,table,th,td,font,em,ins,span,a{margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,button,input,select,textarea{font-size:100%;font-weight:normal}
ul,li,div,dl,dt,dd{list-style:none;}
h1.wm-public{height:0px; line-height:0px; font-size:0px;}
body.th{font-family: 'thfont';}
body.vi{font-family: 'vifont';}
a{text-decoration:none;}
a:hover{text-decoration:none;}
img{border:0;}
font,em{font-style:normal; font-family:\5b8b\4f53;}
.th em{font-family: 'thfont';}
.vi em{font-family: 'vifont';}
label{vertical-align:middle; font-family:tahoma;}
textarea,input{resize:none; outline:none;}
textarea{overflow:auto;}
ins{float:right; text-decoration:none; font-weight:normal;}
.pub_wsp{word-wrap:break-word; word-break:break-all;}
.pub_abso{vertical-align:middle;}
.pub_clr{clear:both;font-size:0;height:0;line-height:0;overflow:hidden;}
.pub_le{float: left;}
.pub_lr{float: right;}
.fl{float: left;}
.fr{float: right;}
.clear:after{display: block; content: ""; clear: both;}
.clear{zoom:1;}
.pub_ani{-webkit-transition:0.4s;-moz-transition:0.4s;-ms-transition:0.4s;-o-transition:0.4s;transition:0.4s;}
.pub_yh{font-family:"Microsoft YaHei";}
.none{display:none;}
body{width:100%;height:100%;overflow: hidden;; background:#000; font-size:0.12rem; font-family:"Microsoft YaHei";
    -webkit-transform: translate3d(0, 0, 0) ;
    transform: translate3d(0, 0, 0);}
.pubMain{width: 12rem; margin: 0 auto; position: relative;}
.zpl{position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);}
.hide{display:none;}

.main_content{width:100%;height:100%;max-width:1920px;margin:0 auto;overflow:hidden;}

/* .main_swiper_container{width:100%;height:9.36rem;max-width:100%;overflow: hidden;} */
.main_swiper_container{width:100%;;max-width:100%;overflow: hidden;}
/* .main_swiper_container{width:100%;max-width:100%;overflow: hidden;} */
.page1,.page2,.page3,.page4,.page5{position:relative;}
.page1{width:100%;height:100%;max-width:19.2rem;background:url(../img/p1/bg_page1.jpg) no-repeat center top;background-size:1920px auto;overflow: hidden;}
.page2{width:100%;height:100%;max-width:19.2rem;background:url(../img/p2/bg_page2.jpg) no-repeat center top;background-size:1920px auto;overflow: hidden;}
.page3{width:100%;height:100%;max-width:19.2rem;background:url(../img/p3/bg_page3.jpg) no-repeat center top;background-size:1920px auto;overflow: hidden;}
.page4{width:100%;height:100%;max-width:19.2rem;background:url(../img/p4/bg_page4.jpg) no-repeat center top;background-size:1920px auto;overflow: hidden;}
.page5{width:100%;height:100%;max-width:19.2rem;background:url(../img/p5/bg_page5.jpg) no-repeat center top;background-size:1920px auto;overflow: hidden;}

.page1 .pubMain{height:100%;}
.page2 .pubMain{height:100%;}
.page3 .pubMain{height:100%;}
.page4 .pubMain{height:100%;}
.page5 .pubMain{height:100%;}

.main_swiper_container .swiper-slide{height: 10.8rem;}

.header{width:100%;height:0.75rem;position:absolute;left:0;top:0;background:url(../img/p1/nav_bg.png) no-repeat center;background-size:60% auto;z-index:2;}
.logo{position:absolute;left:3rem;top:.2rem;width:1.91rem;height:0.51rem;background:url(../img/logo.png) no-repeat;background-size:100% auto;}
.nav{position: absolute;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);;margin:0 auto;margin-top:.3rem;display:-webkit-flex;display: flex;flex-wrap: nowrap;align-items: center;}
.en .nav{left:52%;}
.nav li{height:0.2rem;border-left:1px solid #fff;border-right:1px solid #fff;text-align:center;float:left;padding:0 0.3rem;}
.nav li:nth-child(1){border-left:none;}
.nav li:nth-last-child(1){border-right:none;}
.nav li span{font-size:.2rem;line-height:.2rem;letter-spacing:.1rem;color: #ededed;text-align:center;position:relative;cursor:pointer;white-space: nowrap;}
.nav li.on span{color: #f02c2c;}
.nav li.on span::after{position:absolute;left:-.02rem;bottom:-.1rem;content:'';width:100%;height:2px;background:#f02c2c;}

.en .nav li span{letter-spacing:0;}
.th .nav li span{letter-spacing:0;font-weight: bold;}
.vi .nav li span{letter-spacing:0;}
.vi .nav li{padding:0 0.2rem;}
.cn .nav li.on span::after{left:-.05rem;}


.topVdo{width: 1920px;height:1080px;position:absolute;left:0;top:0;z-index:0;}
.top_wrap{width:4.5rem;height:.3rem;position:absolute;right:0;top:0.25rem;}
.en .top_wrap{width:4rem;}
.language_wrap{float:left;margin-top:.05rem;}
.language_wrap>div{padding-top:0.02rem; margin-right: 0.05rem;}
.language_wrap>div img{height: 0.2rem; width:auto;}
/*select*/
.language_wrap select {height: 0.25rem;appearance:none;-moz-appearance:none;-webkit-appearance:none;background: url(../img/icon_select.png) no-repeat scroll right center transparent;border: none;-webkit-border-radius: 0.1rem; border-radius: 0.1rem;padding-left:0.1rem;padding-right:0.3rem;font:0.18rem/0.25rem "Microsoft YaHei";color: #fff;outline:none;}
select option{color: #000;}
.th .language_wrap select{font-family: 'thfont';}
.vi .language_wrap select{font-family: 'vifont';}
select::-ms-expand { display: none; }
.top_btn_wrap{margin-left:.3rem;}
.top_btn_wrap a{float: left;}
.top_btn_wrap img{height:.3rem;width:auto;margin:0 .1rem;}
.top_btn_wrap>div{position: relative;}
.top_btn_wrap .qq .qq_code{position:absolute;left:50%;top:.25rem;width:1.86rem;height:.62rem;background:url(../img/hover_qq.png) no-repeat center bottom;background-size:100% auto;margin-left:-0.93rem;display:none;}
.qq_code p{color:#c2c3ca;line-height:.3rem;text-align: center;font-size: .14rem;padding-top: .24rem;}
.top_btn_wrap .qq:hover .qq_code{display: block;}

.top_btn_wrap .fx .fx_wrap{position:absolute;left:50%;top:.25rem;width:2.56rem;height:1rem;background:url(../img/hover_fx.png) no-repeat center bottom;background-size:100% auto;margin-left:-1.28rem;display:none;}
.top_btn_wrap .fx:hover .fx_wrap{display: block;}
.top_btn_wrap .fx_wrap{}
.fx_wrap li{ padding:0.3rem 0.08rem; float:left;}
.fx_wrap li:nth-child(1){margin-left:.15rem;}
.fx_wrap img{width: .4rem;height: auto;cursor: pointer;}
.fx_wrap li p{text-align: center; color:#fff;}



.p1_video{position:absolute;left:50%;top:4.2rem;margin-left:-0.405rem;width:0.81rem;height:0.94rem;background:url(../img/p1/p1_video_btn.png) no-repeat;background-size:100% auto;cursor: pointer;display: block;}

.p1_btn_wrap{position:absolute;left:50%;top:7rem;margin-left:-3.5rem;width:7rem;height:0.75rem;display:-webkit-flex;display: flex;align-items: center;flex-wrap: nowrap;display: none;}
.p1_btn_wrap a{width: 1.76rem;height: .6rem;font-size: .22rem;text-align: center;line-height: .6rem;color: #fff;}
.p1_btn_wrap a.googlePlay{background:url(../img/p1/btn_bg.png) no-repeat;background-size: 100% auto;}
.p1_btn_wrap a.appStore{background:url(../img/p1/btn_bg.png) no-repeat;background-size: 100% auto;}
.p1_btn_wrap a.register{width: 1.81rem;height: 1.83rem;background:url(../img/p1/regiter_btn1.png) no-repeat;background-size: 100% auto;margin:0 .6rem;}

.p1_btn_wrap1{position:absolute;left:70%;top:7rem;margin-left:-3.5rem;width:7rem;height:1.5rem;display:-webkit-flex;display: flex;align-items: center;flex-wrap: nowrap;}
.p1_btn_wrap1 a{width: 1.76rem;height: .6rem;font-size: .22rem;text-align: center;line-height: .6rem;color: #fff;display: block;margin-bottom: .1rem;}
.p1_btn_wrap1 .down{margin: 0 .7rem 0 0.2rem;}
.p1_btn_wrap1 .down a{text-indent: -999rem;}
.p1_btn_wrap1 .down a.down_ios{background: url(../img/p1/down_ios.png) no-repeat center;background-size: 100% auto;}
.p1_btn_wrap1 .down a.down_and{background: url(../img/p1/down_and.png) no-repeat center;background-size: 100% auto;}
.p1_btn_wrap1 a.googlePlay{background:url(../img/p1/btn_bg.png) no-repeat;background-size: 100% auto;}
.p1_btn_wrap1 a.appStore{background:url(../img/p1/btn_bg.png) no-repeat;background-size: 100% auto;}
.p1_btn_wrap1 a.register{width: 1.81rem;height: 1.83rem;background:url(../img/p1/regiter_btn1.png) no-repeat;background-size: 100% auto;margin:0 .6rem;margin-top: .3rem;}


.right_side_btn{
    position: absolute;
    right: 0;
    top: 2.2rem;
    width: .4rem;
    height: .76rem;
    background: url(../img/p1/side_btn.png) no-repeat left center;
    background-size: .8rem auto;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    z-index: 1;
}
.right_side_btn.on{
    background: url(../img/p1/side_btn.png) no-repeat right center;
    background-size: .8rem auto;
}
.right_side_btn.off{
    background: url(../img/p1/side_btn.png) no-repeat left center;
    background-size: .8rem auto;
}
.right_side{
    position: absolute;
    right: 0rem;
    top: 2.2rem;
    width: 4.56rem;
    height: 1.4rem;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}
.right_side.on{
    -webkit-transform: translateX(0rem);
    transform: translateX(0rem);
}
.right_side.off{
    -webkit-transform: translateX(6.18rem);
    transform: translateX(6.18rem);
}
.xw_wrap{
    position: relative;
    width: 4.56rem;
    height: 1.4rem;
    background-size: 100% auto;
    z-index: 2;
}
.xw_wrap .swiper-container{
    width: 4.56rem;
    height: 1.4rem;
}
.xw_wrap .swiper-slide{
    width: 4.56rem;
    height: 1.4rem;
}
.xw_wrap .swiper-slide img{
    width: 4.56rem;
    height: auto;
}
.xw_wrap .page1_swiper-pagination{
    width: 100%;
    bottom:.05rem;
    /* display: none; */
}
.xw_wrap .page1_swiper-pagination .swiper-pagination-bullet{
    width: .2rem;
    height: .2rem;
    background: #494949;
    margin: 0 .05rem;
}
.xw_wrap .page1_swiper-pagination .swiper-pagination-bullet-active{
    background: #ececec;
}


.txtShadow{text-shadow: #6d0b2c 2px 2px 5px, #6d0b2c 2px 2px 5px, #6d0b2c -2px 2px 5px, #6d0b2c 2px -2px 5px;}
.txtShadowb{text-shadow: #1b365c 2px 2px 5px, #1b365c 2px 2px 5px, #1b365c -2px 2px 5px, #1b365c 2px -2px 5px;}
.sideWrap{position: absolute;right: 0;top: 50%;margin-top: -1.83rem;width: 1.48rem;height: 3.66rem;background:url(../img/p1/p1_side_bg.png) no-repeat;background-size: 100% auto;}
.en .sideWrap{height: 3.96rem;background-size: 100% 100%;}
.th .sideWrap{width:1.8rem;background-size: 100% 100%;}
.vi .sideWrap{height:4.2rem;background-size: 100% 100%;}
.sideWrap h2{font-size: 0.16rem;line-height: 0.34rem;color: #fff;text-align: center;letter-spacing: 0.12rem;margin-bottom: .05rem;}
.en .sideWrap h2{letter-spacing: 0;line-height:.2rem;margin-top:.1rem;}
.th .sideWrap h2{letter-spacing: 0;line-height:.2rem;margin-top:.1rem;white-space: nowrap;}
.vi .sideWrap h2{letter-spacing: 0;line-height:.2rem;margin-top:.1rem;}
.sideWrap li{margin-bottom: 0.05rem;}
.sideWrap li>div{width: .68rem;height: .68rem;background:url(../img/p1/p1_side_prize_bg.png) no-repeat; background-size: 100% auto;display:flex;display:-webkit-flex;align-items: center;margin:0 auto;}
.sideWrap li>div img{width:.65rem;height: auto;}
.sideWrap li p{font-size: 0.14rem;line-height: 0.3rem;color: #fff;text-align: center;white-space: nowrap;}
.vi .sideWrap li p{line-height:.2rem;margin:.05rem 0;}
.side_register{position: absolute;left: 0;bottom:-.5rem;width: 1.48rem;height: .5rem;}
.side_register{width: 1.48rem;height: .5rem;background:url(../img/p1/p1_side_btn_register.png) no-repeat;background-size: 100% auto;}

.page2 .pubMain{width:14rem;}
.page2 .title{position: absolute;left:50%;top:.6rem;width: 7.22rem;height: 1.44rem;margin-left:-3.61rem;background:url(../img/p2/p2_title.png) no-repeat;background-size: 100% auto;}
.page2 .title p{font-size: 0.26rem;color:#fff;text-align: center;padding-top: .85rem;}
.page2 .title p span{color:#ad2834;font-size: .34rem;padding: 0 .1rem;font-weight: bold;}
.th .page2 .title p span{font-family:'microsoft yahei';}
.page2 .prize_wrap{position:absolute;left:0.4rem;top:2.3rem;width:14rem;height:6.5rem;}
.p2_line{position:absolute;left:1rem;top:.8rem;width:10.79rem;height:3.86rem;background:url(../img/p2/p2_line2.png) no-repeat;background-size:100% auto;}
.prize_wrap ul{width:100%;height:100%;position:relative;}
.prize_wrap ul li{width: 1.4rem;height: 1.4rem;position: absolute;}
.prize_wrap ul li img{width:100%;height: auto;position: absolute;left: 0;top: 0;z-index:3;}
.prize_circle{width: 100%;height: 100%;position: relative;}
.prize_circle span{position: absolute;left: 0;top: 0;width: 100%;height: 100%;background-size: 100% auto;z-index:2;}
.prize_circle span:nth-last-child(1){background:url(../img/p2/p2_circle_inside.png) no-repeat;background-size: 100% auto;}
.prize_circle span:nth-last-child(2){background:url(../img/p2/p2_circle_line.png) no-repeat;background-size: 100% auto;}
.prize_circle span:nth-last-child(3){background:url(../img/p2/p2_circle_middle.png) no-repeat;background-size: 100% auto;}
.prize_circle span:nth-last-child(4){background:url(../img/p2/p2_circle_outer.png) no-repeat;background-size: 100% auto;}
.prize_circle span:nth-last-child(5){background:url(../img/p2/p2_circle_point.png) no-repeat;background-size: 100% auto;}

.prize_wrap ul li:nth-child(1){left:2.1rem;top:0rem;}
.prize_wrap ul li:nth-child(2){left:.1rem;top:2.3rem;}
.prize_wrap ul li:nth-child(3){left:2.6rem;top:3.8rem;}
.prize_wrap ul li:nth-child(4){left:8.3rem;top:1.1rem;}
.prize_wrap ul li:nth-child(5){left:11.1rem;top:-.4rem;}
.prize_wrap ul li:nth-child(6){left:10.1rem;top:2.4rem;}
.prize_wrap ul li:nth-child(7){left:11.4rem;top:4.4rem;}

.prize_con{position: absolute;height: .75rem;top: .35rem;}
.prize_con.r{left:1.3rem;}
.prize_con>div{height: .45rem;min-width:2.5rem;}
.vi .prize_con>div{min-width:3rem;}
.prize_con>div .achieve{width: 1rem;height: .45rem;}
.prize_con.r>div{background:url(../img/p2/p2_prize_border_r.png) no-repeat;background-size: 100% 100%;}
.prize_con.r>div .achieve{float: right;background:url(../img/p2/achieve_off.png) no-repeat;background-size: 100% auto;}
.prize_wrap ul li.on .prize_con.r>div .achieve{background:url(../img/p2/achieve_on.png) no-repeat;background-size: 100% auto;}
.prize_con.r>div .require_num{float: left;width: -webkit-calc(100% - 1.22rem);width: -moz-calc(100% - 1.22rem);width: -ms-calc(100% - 1.22rem);width: calc(100% - 1.22rem);text-align: center;font-size: .22rem;font-weight: bold;line-height: .45rem;color: #fff;padding-left:.2rem;white-space: nowrap;}
.prize_con.r p::after{position: absolute;right: 0;bottom: 0;content: '';width: 0.11rem;height: 0.11rem;background:url(../img/p2/triangle_r.png) no-repeat;background-size: 100% auto;}
.prize_con.l{right:1.3rem;}
.prize_con.l>div{background:url(../img/p2/p2_prize_border_l.png) no-repeat;background-size: 100% 100%;}
.prize_con.l>div .achieve{float: left;background:url(../img/p2/achieve_off.png) no-repeat;background-size: 100% auto;}
.prize_wrap ul li.on .prize_con.l>div .achieve{background:url(../img/p2/achieve_on.png) no-repeat;background-size: 100% auto;}
.prize_con.l>div .require_num{float: right;;width: calc(100% - 1.22rem);text-align: center;font-size: .22rem;font-weight: bold;line-height: .45rem;color: #fff;padding-right:.2rem;white-space: nowrap;}
.prize_con p{height:.3rem;font-size: .18rem;line-height: .3rem;color: #888c9b;text-align: center;background:rgba(16, 17, 29, .8);position: relative;white-space: nowrap;padding:0 .2rem;}
.th .prize_con p{font-weight:bold;}
.prize_con.l p::after{position: absolute;left: 0;bottom: 0;content: '';width: 0.11rem;height: 0.11rem;background:url(../img/p2/triangle_l.png) no-repeat;background-size: 100% auto;}

.p2_btn_bot{position: absolute;left:50%;bottom: 0;margin-left: -1.97rem;width: 3.94rem;height: .78rem;background:url(../img/p2/p2_btn.png) no-repeat;background-size: 100% auto;}

.page3 .pubMain{width:14rem;}
.p3_lb{width:14rem;height:6.5rem;margin:0 auto;margin-top: 1.5rem;position: relative;}
.p3_lb .swiper-slide{position: relative;width: 12.1rem;height: 6.5rem;}
.p3_lb .lb_bg{width: 10.4rem;height: 5.9rem;background:url(../img/p3/p3_lb_bg.png) no-repeat;background-size: 100% auto;position: absolute;left: 0;top: 0;}
.p3_lb i{width: 10.25rem;height: 5.8rem;position: absolute;left:0.08rem;top:0.06rem;}
/* cn */
.p3_lb .lb1{background:url(../img/p3/v1.jpg) no-repeat;background-size: 100% auto;}
.p3_lb .lb2{background:url(../img/p3/v2.jpg) no-repeat;background-size: 100% auto;}
.p3_lb .lb3{background:url(../img/p3/v3.jpg) no-repeat;background-size: 100% auto;}
.p3_lb .lb4{background:url(../img/p3/v4.jpg) no-repeat;background-size: 100% auto;}
.p3_lb .lb5{background:url(../img/p3/v5.jpg) no-repeat;background-size: 100% auto;}
.p3_lb .lb6{background:url(../img/p3/v6.jpg) no-repeat;background-size: 100% auto;}
.p3_lb .lb7{background:url(../img/p3/v7.jpg) no-repeat;background-size: 100% auto;}
.p3_lb .lb8{background:url(../img/p3/v8.jpg) no-repeat;background-size: 100% auto;}
.p3_lb .lb9{background:url(../img/p3/v9.jpg) no-repeat;background-size: 100% auto;}
.p3_lb .lb10{background:url(../img/p3/v10.jpg) no-repeat;background-size: 100% auto;}
.page3 .item_arrow{width:0.53rem;height:0.76rem;position:absolute;top:2.6rem;}
.page3 .item_arrow.arrow-left{left:-0.6rem;background:url(../img/p3/p3_btn_l.png) no-repeat;background-size: 100% auto;}
.page3 .item_arrow.arrow-right{right:-0.6rem;background:url(../img/p3/p3_btn_r.png) no-repeat;background-size:100% auto;}
.pagination {
    position: absolute;
    z-index: 20;
    top: 7.1rem;
    width: 100%;
    text-align: center;
}
.swiper-pagination-bullet {
    display: inline-block;
    width: 0.16rem;
    height: 0.16rem;
    border-radius: 0.16rem;
    background: #213670;
    margin: 0 0.16rem;
    opacity: 0.8;
    cursor: pointer;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #acb2c2;
}

.p4_roles{width: 100%;height: 100%;position: relative;}
.p4_roles .swiper-slide{width: 100%;height: 100%;position: relative;}


.p4_roles .swiper-slide-active .peo {
    animation:roles 1s 0s ease both;
}
@keyframes roles{
    0%{opacity:0;transform:translateX(250px) scale(1);}
    100%{opacity:1;transform:translateX(0) scale(1);}
}
.p4_roles .swiper-slide>.name{position: absolute;left: .5rem;top: .8rem;width: 2.38rem;height: 100%;}
.p4_roles .swiper-slide>.peo{position: absolute;left: 0;top: 0;width: 19.2rem;height: 100%;}
.p4_roles .swiper-slide .desc{position: absolute;left: -.3rem;top: 1.7rem;width: 6.24rem;height: 5.1rem;}
.p4_roles .pubMain{position: relative;}
.p4_roles .swiper-slide .break{position: absolute;top:1.5rem;left:-3.6rem;width: 10.57rem;height: 6.62rem;background:url(../img/break.png) no-repeat;background-size:10.17rem auto;}
.p4_roles .role1 .name{background: url(../img/hero/txt_l.png) no-repeat;background-size: 2rem auto;}
.p4_roles .role2 .name{background: url(../img/hero/txt_l.png) no-repeat;background-size: 2rem auto;}
.p4_roles .role3 .name{background: url(../img/hero/txt_l.png) no-repeat;background-size: 2rem auto;}
.p4_roles .role4 .name{background: url(../img/hero/txt_l.png) no-repeat;background-size: 2rem auto;}
.p4_roles .role5 .name{background: url(../img/hero/txt_l.png) no-repeat;background-size: 2rem auto;}
.p4_roles .role6 .name{background: url(../img/hero/txt_l.png) no-repeat;background-size: 2rem auto;}
.p4_roles .role7 .name{background: url(../img/hero/txt_l.png) no-repeat;background-size: 2rem auto;}
.p4_roles .role8 .name{background: url(../img/hero/txt_l.png) no-repeat;background-size: 2rem auto;}
.p4_roles .role9 .name{background: url(../img/hero/txt_l.png) no-repeat;background-size: 2rem auto;}
.p4_roles .role11 .name{background: url(../img/hero/txt_l.png) no-repeat;background-size: 2rem auto;}

.p4_roles .role1 .peo{background: url(../img/hero/h1_big.png) no-repeat;background-size: 19.2rem auto;}
.p4_roles .role2 .peo{background: url(../img/hero/h2_big.png) no-repeat;background-size: 19.2rem auto;}
.p4_roles .role3 .peo{background: url(../img/hero/h3_big.png) no-repeat;background-size: 19.2rem auto;}
.p4_roles .role4 .peo{background: url(../img/hero/h4_big.png) no-repeat;background-size: 19.2rem auto;}
.p4_roles .role5 .peo{background: url(../img/hero/h5_big.png) no-repeat;background-size: 19.2rem auto;}
.p4_roles .role6 .peo{background: url(../img/hero/h6_big.png) no-repeat;background-size: 18.2rem auto;}
.p4_roles .role7 .peo{background: url(../img/hero/h7_big.png) no-repeat;background-size: 19.2rem auto;}
.p4_roles .role8 .peo{background: url(../img/hero/h8_big.png) no-repeat;background-size: 19.2rem auto;}
.p4_roles .role9 .peo{background: url(../img/hero/h9_big.png) no-repeat;background-size: 19.2rem auto;}
.p4_roles .role11 .peo{background: url(../img/hero/h10_big.png) no-repeat;background-size: 19.2rem auto;}

.p4_roles .role1 .desc{background: url(../img/hero/h1_con.png) no-repeat;background-size: 100% auto;}
.p4_roles .role2 .desc{background: url(../img/hero/h2_con.png) no-repeat;background-size: 100% auto;}
.p4_roles .role3 .desc{background: url(../img/hero/h3_con.png) no-repeat;background-size: 100% auto;}
.p4_roles .role4 .desc{background: url(../img/hero/h4_con.png) no-repeat;background-size: 100% auto;}
.p4_roles .role5 .desc{background: url(../img/hero/h5_con.png) no-repeat;background-size: 100% auto;}
.p4_roles .role6 .desc{background: url(../img/hero/h6_con.png) no-repeat;background-size: 100% auto;}
.p4_roles .role7 .desc{background: url(../img/hero/h7_con.png) no-repeat;background-size: 100% auto;}
.p4_roles .role8 .desc{background: url(../img/hero/h8_con.png) no-repeat;background-size: 100% auto;}
.p4_roles .role9 .desc{background: url(../img/hero/h9_con.png) no-repeat;background-size: 100% auto;}
.p4_roles .role11 .desc{background: url(../img/hero/h10_con.png) no-repeat;background-size: 100% auto;}



/* p4 pagination */
.page4 .p4_pagination{position: absolute;left: 50%;top: 7rem;width:12rem;height: 2rem;margin-left: -6rem;}
/* .page4 .nav_roles{width:11.5rem;position: absolute;left:50%;top:0rem;margin-left:-5.1rem;z-index: 8;} */
.page4 .nav_roles{width:12.7rem;position: absolute;left:50%;top:0rem;margin-left:-5.1rem;z-index: 8;}
.page4 .nav_roles_wrap{height:1.4rem;}
.page4 .nav_roles ul{position:relative;height:100%;display:-webkit-flex;display:flex;flex-wrap: nowrap;margin-left: .6rem;}
.page4 .nav_roles li{position: relative;height:1.4rem;width: 1.17rem;float: left;margin:0 0.05rem;}
.page4 .nav_roles a{display: inline-block;text-indent: -999em;width: 100%;height:1.4rem;z-index: 3;position: relative;}
.page4 .avatar01 a{background: url(../img/hero/h1.png) no-repeat center bottom;background-size: 100% auto;}
.page4 .avatar02 a{background: url(../img/hero/h2.png) no-repeat center bottom;background-size: 100% auto;}
.page4 .avatar03 a{background: url(../img/hero/h3.png) no-repeat center bottom;background-size: 100% auto;}
.page4 .avatar04 a{background: url(../img/hero/h4.png) no-repeat center bottom;background-size: 100% auto;}
.page4 .avatar05 a{background: url(../img/hero/h5.png) no-repeat center bottom;background-size: 100% auto;}
.page4 .avatar06 a{background: url(../img/hero/h6.png) no-repeat center bottom;background-size: 100% auto;}
.page4 .avatar07 a{background: url(../img/hero/h7.png) no-repeat center bottom;background-size: 100% auto;}
.page4 .avatar08 a{background: url(../img/hero/h8.png) no-repeat center bottom;background-size: 100% auto;}
.page4 .avatar09 a{background: url(../img/hero/h9.png) no-repeat center bottom;background-size: 100% auto;}
.page4 .avatar10 a{background: url(../img/hero/more.png) no-repeat center bottom;background-size: 100% auto;}
.page4 .avatar11 a{background: url(../img/hero/h10.png) no-repeat center bottom;background-size: 100% auto;}

.page4 .avatar01.curr a{background: url(../img/hero/h1_act.png) no-repeat center bottom;background-size: 100% auto;}
.page4 .avatar02.curr a{background: url(../img/hero/h2_act.png) no-repeat center bottom;background-size: 100% auto;}
.page4 .avatar03.curr a{background: url(../img/hero/h3_act.png) no-repeat center bottom;background-size: 100% auto;}
.page4 .avatar04.curr a{background: url(../img/hero/h4_act.png) no-repeat center bottom;background-size: 100% auto;}
.page4 .avatar05.curr a{background: url(../img/hero/h5_act.png) no-repeat center bottom;background-size: 100% auto;}
.page4 .avatar06.curr a{background: url(../img/hero/h6_act.png) no-repeat center bottom;background-size: 100% auto;}
.page4 .avatar07.curr a{background: url(../img/hero/h7_act.png) no-repeat center bottom;background-size: 100% auto;}
.page4 .avatar08.curr a{background: url(../img/hero/h8_act.png) no-repeat center bottom;background-size: 100% auto;}
.page4 .avatar09.curr a{background: url(../img/hero/h9_act.png) no-repeat center bottom;background-size: 100% auto;}
.page4 .avatar10.curr a{background: url(../img/hero/more.png) no-repeat center bottom;background-size: 100% auto;}
.page4 .avatar11.curr a{background: url(../img/hero/h10_act.png) no-repeat center bottom;background-size: 100% auto;}

.page4 .nav_roles_prev,.page4 .nav_roles_next{width:0.22rem;height:0.33rem;position:absolute;top:0.7rem;-webkit-transition:transform .4s cubic-bezier(0.19,1,0.22,1);transition:transform .4s cubic-bezier(0.19,1,0.22,1);z-index:9;}
.page4 .nav_roles_prev{left:-0.35rem;background: url(../img/hero/hero_btn_a1.png) no-repeat;background-size: 100% auto;}
/* .page4 .nav_roles_next{right:0.95rem;background: url(../img/hero_btn_b1.png) no-repeat;background-size: 100% auto;} */
.page4 .nav_roles_next{right:2.2rem;background: url(../img/hero/hero_btn_b1.png) no-repeat;background-size: 100% auto;}
.page4 .nav_roles_prev:hover,.page4 .nav_roles_next:hover{-webkit-transform:translateX(-0.04rem);transform:translateX(-0.04rem);cursor:pointer;}
.page4 .nav_roles_next:hover{-webkit-transform:translateX(0.04rem);transform:translateX(0.04rem);}
.page4 .nav_roles_prev.disable:hover,.page4 .nav_roles_next:hover.disabe{-webkit-transform:none;transform:none;cursor:default;}
.page4 .nav_roles_prev.disable{background: url(../img/hero/hero_btn_a2.png) no-repeat;background-size: 100% auto;}
.page4 .nav_roles_next.disable{background: url(../img/hero/hero_btn_b2.png) no-repeat;background-size: 100% auto;}

/*  */

.page5 .pubMain{width:14rem;padding-top:.5rem;position: relative;z-index: 1;}
.page5 .photowall{width:14rem;height: 7.54rem;position: relative;-webkit-transform:scale(0.9)  translate3d(0, 0, 0) ;-moz-transform:scale(0.9)  translate3d(0, 0, 0) ;-ms-transform:scale(0.9);transform:scale(0.9)  translate3d(0, 0, 0) ;}
.page5 .photowall li{position: absolute;overflow: hidden;}
.page5 .photowall li img{width: 100%;height: 100%;-webkit-transition: all .6s ease;-moz-transition: all .6s ease;-ms-transition: all .6s ease;transition: all .6s ease;cursor: pointer;}
.page5 .photowall li:hover img{-webkit-transform: scale(1.05);-moz-transform: scale(1.05);-moz-transform: scale(1.05);-ms-transform: scale(1.05);transform: scale(1.05);}
.page5 .photowall li:nth-child(1){width: 2.80rem;height: 3.82rem;left:0;top:0;}
.page5 .photowall li:nth-child(2){width: 2.81rem;height: 2.53rem;left:2.8rem;top:0;}
.page5 .photowall li:nth-child(3){width: 2.81rem;height: 1.30rem;left:2.8rem;top:2.53rem;}
.page5 .photowall li:nth-child(4){width: 2.77rem;height: 1.36rem;left:5.59rem;top:0;}
.page5 .photowall li:nth-child(5){width: 2.85rem;height: 1.36rem;left:8.35rem;top:0;}
.page5 .photowall li:nth-child(6){width: 3.56rem;height: 2.47rem;left:5.59rem;top:1.36rem;}
.page5 .photowall li:nth-child(7){width: 2.04rem;height: 2.47rem;left:9.16rem;top:1.36rem;}
.page5 .photowall li:nth-child(8){width: 2.80rem;height: 3.20rem;right:0rem;top:0rem;}
.page5 .photowall li:nth-child(9){width: 6.69rem;height: 3.73rem;left:0rem;bottom:0rem;}
.page5 .photowall li:nth-child(10){width:2.26rem;height: 3.73rem;left:6.69rem;bottom:0rem;}
.page5 .photowall li:nth-child(11){width:2.26rem;height: 3.73rem;left:8.95rem;bottom:0rem;}
.page5 .photowall li:nth-child(12){width:2.80rem;height: 1.60rem;right:0rem;bottom:2.75rem;}
.page5 .photowall li:nth-child(13){width:2.80rem;height: 2.75rem;right:0rem;bottom:0rem;}
.photowall .more{width: 1.56rem;height: .36rem;background:url(../img/p5/p5_more.png) no-repeat;background-size: 100% auto;position: absolute;right: 0;bottom: 0;}
.page5 .video_pic span{width:100%;height:100%;background:rgba(0, 0, 0, .6);position: absolute;left: 0;top: 0;z-index: 2;}
.page5 .video_pic a{position: absolute;left: 50%;top: 50%;margin-left: -0.405rem;margin-top:-0.47rem;width: 0.81rem;height: 0.94rem;background: url(../img/p1/p1_video_btn.png) no-repeat;background-size: 100% auto;z-index: 3;cursor: pointer;}

.footer_wrap{width:100%;height:9.36rem;position:absolute;left:0;top:0;z-index:0;}
.footer{width:100%;height:1.5rem;position:absolute;left:0;bottom:-.5rem;background:#090a14;}

/* register */
.registerWrap{width:100%;height:100%;background:rgba(0,0,0,.8);position: fixed;left:0;top:0;z-index:100;display:none;}
.registerWrap>div{width:6.76rem;height:3.68rem;background:url(../img/common_tip_bg2.png) no-repeat;background-size: 100% 100%;position:absolute;left:50%;top:40%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transition: all .6s ease;-moz-transition: all .6s ease;-ms-transition: all .6s ease;transition: all .6s ease;}
.registerWrap.type_2>div{width:6.76rem;height:5.36rem;background:url(../img/common_tip_bg2.png) no-repeat;background-size: 100% 100%;position:absolute;left:50%;top:40%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
.registerWrap.type_1>div{width:6.76rem;height:3.68rem;background:url(../img/common_tip_bg1.png) no-repeat;background-size: 100% 100%;position:absolute;left:50%;top:40%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
.registerWrap .close{position: absolute;right: 0.12rem;top: 0.1rem;width: 0.56rem;height: 0.56rem;background:url(../img/common_tip_close.png) no-repeat;background-size: 100% auto;z-index: 9;}
.registerWrap .close:hover{-webkit-transform: rotate(-90deg);transform: rotate(-90deg);}
.registerCon{padding:1rem 0.8rem 0;font-size:0.14rem;color:#fff;}
.registerCon>div{margin:0.2rem 0;}
.registerCon>div.c1{margin:0;position: relative;}
.registerCon>div.c1>img{width:1.89rem;height:auto;}
.registerCon>div.c1 .con{position:absolute;right:0;top: 0;width:2.7rem;}
.registerCon>div.c1 .con .icon_wx{width:.51rem;height:.41rem;background:url(../img/common_tip_wxicon.png) no-repeat;background-size: 100% auto;}
.registerCon>div.c1 .con>div p{font-size:.2rem;height:.41rem;line-height: .41rem;color: #8fb7ff;letter-spacing:0;}
.registerCon>div.c1 .con .txt1{margin-top:.1rem;}
.registerCon>div.c1 .con .txt2{font-size:.26rem;font-weight: bold;color: #d6e4ff;letter-spacing: 0.1rem;margin: 0.05rem 0;}
.registerCon>div.c1 .con .txt4{font-size:.2rem;color: #fff;height:.3rem;line-height:.3rem;margin-bottom:.2rem;}
.registerCon>div.c1 .txt3{font-size:.16rem;font-weight: bold;color: #ff4857;letter-spacing: 0.004rem;margin: 0.05rem 0;margin-left: .11rem;}
.registerCon>div.c1 .con .arrow{width:.6rem;height:.19rem;background:url(../img/common_tip_arrow.png) no-repeat;background-size: 100% auto;display: block;margin-top:.2rem;}

.registerWrap .type_c{width:6.5rem;margin:0 auto;padding-top:.14rem;}
.registerWrap .yytit{text-align:center;color:#6981bf;font-size:0.3rem;min-width:0.1rem;top:0.3rem;float: left;width:50%;height:.6rem;line-height:.6rem;background:rgba(0, 0, 0, .4);}
.registerWrap .yytit.on{color:#fff;text-shadow: 2px 2px 5px red;background:transparent;}

.registerCon .c1{display: block;}
.registerCon .c2{display: none;}
.registerCon.type_1 .c1{display: block;}
.registerCon.type_1 .c2{display: none;}
.registerCon.type_2 .c1{display: none;}
.registerCon.type_2 .c2{display: block;}

.system span.tit{height: 0.4rem;line-height:0.4rem;font-size: 0.18rem;width: 1.4rem;padding-right: 0.2rem;text-align: left;}
.system label{height: 0.36rem; margin:0 0.1rem; padding-left:0.4rem; position: relative;}
.system label input{position: absolute; left: 0; top:50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width:0.2rem; height: 0.2rem;}
.system label .item{display: block; float: left; height: 0.4rem; padding-left:0.5rem;line-height:0.4rem;}
.system label .item1{background: url(../img/icon_android.png) no-repeat left center;background-size:auto 100%;}
.system label .item2{background: url(../img/icon_ios.png) no-repeat left center;background-size:auto 100%;}
.phone_wrap{margin-bottom:0rem;}
    .phone_con{width:100%;}
    .phone_con>div{height:0.55rem;margin:0.3rem 0;}
    .phone_con span.item{width:1.4rem;padding-right:0.2rem;font-size: 0.18rem;line-height: 0.55rem;text-align: left;white-space: nowrap;}
    .phone_con select{
        width:calc(100% - 1.6rem);
        height: 0.55rem;
        appearance:none;
        -moz-appearance:none;
        -webkit-appearance:none;
        background: url("../img/icon_select.png") no-repeat scroll 2.4rem center #3e4666;
        padding-left:0.2rem;
        padding-right: 0.41rem;
        font:0.18rem/0.55rem "Microsoft YaHei";
        text-indent: 0.1rem;
        outline:none;
        outline: none;
        border: none;
    }
    .cn .phone_con select{background: url("../img/icon_select.png") no-repeat scroll 3rem center #3e4666;}
    .vi .phone_con select{background: url("../img/icon_select.png") no-repeat scroll 3.2rem center #3e4666;}
    .th .phone_con select{font-family: 'thfont';}
    .vi .phone_con select{font-family: 'vifont';}
    .phone_con select option{background: #39497b; -webkit-appearance:none;appearance:none;color: #fff;}
    .phone_con select option:hover{background-color: #e7ddb8;}
    .phone_con .phone_wrap{width:calc(100% - 1.6rem);height: 0.55rem; position: relative;}
    .phone_con .phone{width:100%;height: 0.55rem; -webkit-box-sizing: border-box; box-sizing: border-box;  margin-bottom:0.2rem; font:0.18rem/0.55rem "Microsoft YaHei"; padding-left:0.3rem;background:#39497b;outline: none;border: none;}
    .phone_wrap.other .phone_con .phone{padding-left:0.45rem;}
    .th .phone_con .phone{font-family: 'thfont';}
    .vi .phone_con .phone{font-family: 'vifont';}
    .phone_con .area_num{position:absolute;top:0;left:0;width:0.7rem;height:.55rem;background: #5e6b96;outline: none;border: none;-webkit-box-sizing: border-box; box-sizing: border-box;text-align: center;font-size:.18rem;display:block;}
    .phone_wrap.other .phone_con .area_num{text-align:right;background:#3e4666;width:0.45rem;display:none;}
    input::-webkit-input-placeholder{color:#fff;}
    .phone_wrap .warn{line-height: 0.25rem; color:#e63e3e; text-align: justify;padding-left: 1.6rem;display:block;}
    .phone_wrap .warn2{line-height: 0.25rem; color:#e63e3e; text-align: justify; display: none;}
    .phone_wrap.other .warn{display:none;}
    .phone_wrap.other .warn2{display:block;}

    .register_btn{position: absolute; bottom:0.5rem; left: 50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:2.48rem;height: 0.78rem;background:url(../img/common_tip_btn.png) no-repeat;background-size: 100% auto;}


    .en .system span.tit{width:2rem;}
    .en .phone_con span.item{width:2rem;}
    .en .phone_con select{width:calc(100% - 2.2rem);}
    .en .phone_con .phone_wrap{width:calc(100% - 2.2rem);}
    .en .phone_wrap .warn{padding-left: 2.2rem;letter-spacing: 0;text-align:left;}
    
    .th .system span.tit{width:2.2rem;}
    .th .phone_con span.item{width:2.2rem;}
    .th .phone_con select{width:calc(100% - 2.4rem);}
    .th .phone_con .phone_wrap{width:calc(100% - 2.4rem);}
    .th .phone_wrap .warn{padding-left: 2.4rem;font-weight: bold;}

    .code_wrap{font:0.18rem/0.55rem "Microsoft YaHei";}
    .th .code_wrap{font-family: 'thfont';}
    .code_wrap input{width:3rem;height: 0.55rem; -webkit-box-sizing: border-box; box-sizing: border-box;  margin-bottom:0.2rem; padding-left:0.3rem;background:#39497b;outline: none;border: none;}
    .code_wrap button{width:2rem;height: 0.55rem; -webkit-box-sizing: border-box; box-sizing: border-box;  margin-bottom:0.2rem; background:#9d1f2c;outline: none;border: none;float:right;}

    .en .code_wrap input{width:1.5rem;font-size:.14rem;}
    .en .code_wrap button{width:1.3rem;}
    .th .code_wrap input{width:1.4rem;}
    .th .code_wrap button{width:1.2rem;}
    .vi .code_wrap button{font-size:.12rem;}


/*  */
.cmn_ratate{-webkit-transition: all .6s ease;-moz-transition: all .6s ease;-ms-transition: all .6s ease;transition: all .6s ease;}
.picPop{width: 100%;height: 100%;position: fixed;left: 0;top: 0;z-index: 99;background: rgba(0, 0, 0, .8);display:none;}
.pic_show .pic_show{position: relative;}
.pic_show .pic_close{width: .54rem;height: .54rem;background:url(../img/common_tip_close.jpg) no-repeat;background-size: 100% auto;position: absolute;top:-.07rem;right: -.7rem;}
.pic_show .pic_close:hover{-webkit-transform: rotate(-90deg);transform: rotate(-90deg);}
.pic_show .tipImgWrap{ position: absolute; left: 50%; top: 40%; transform:translate(-50%,-50%) scale(0.85) ; max-width:85%; max-height:75%; -moz-transform:translate(-50%,-50%) scale(0.85) ; -ms-transform:translate(-50%,-50%) scale(0.85) ; -o-transform:translate(-50%,-50%) scale(0.85) ; -webkit-transform:translate(-50%,-50%) scale(0.85) ; }
.pic_show .tipImgWrap img{width:100%;height: auto;}
/* .pic_show img{position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);} */
/*  */
.alertTipWrap{width:100%;height:100%;background:rgba(0,0,0,.9);position:fixed;left:0;top:0;z-index:999;display:none;}
.alertTipWrap>div{width:6.54rem;height:3.17rem;background:url(../img/common_tip_bg1.png) no-repeat;background-size:100% auto;position:absolute;left:50%;top:40%;-webkittransform:translate(-50%,-50%);transform:translate(-50%,-50%);}
.alertTipWrap>div p{padding:0.8rem 0.5rem 0;text-align:center;color:#868699;font-size:0.2rem;line-height:0.24rem;}
.th .alertTipWrap>div p{font-weight: bold;}
.alertTipWrap>div .alertClose{position: absolute;right: 0.2rem;top: 0.1rem;width: 0.56rem;height: 0.56rem;background:url(../img/common_tip_close.png) no-repeat;background-size: 100% auto;z-index: 9;}
.alertTipWrap>div .alertClose:hover{-webkit-transform: rotate(-90deg);transform: rotate(-90deg);}
/*  */
.roleWrap{width:100%;height:100%;background:rgba(0,0,0,.9);position:fixed;left:0;top:0;z-index:999;display:none;}
.roleWrap>div{width:6.76rem;height:5.36rem;background:url(../img/common_tip_bg2.png) no-repeat;background-size: 100% auto;position:absolute;left:50%;top:40%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
.roleWrap .close{position: absolute;right: 0.2rem;top: 0.1rem;width: 0.56rem;height: 0.56rem;background:url(../img/common_tip_close.png) no-repeat;background-size: 100% auto;z-index: 9;}
.roleWrap .close:hover{-webkit-transform: rotate(-90deg);transform: rotate(-90deg);}
.roleWrap .role_con{padding:.5rem .5rem 0;color:#cdd0e2;}
.role_con h2{font: 0.24rem/0.5rem "Microsoft YaHei";text-align: center;margin-bottom: .1rem;letter-spacing:0.1rem;}
.en .role_con h2{letter-spacing: 0;}
.th .role_con h2{letter-spacing: 0;font-family: 'thfont';font-weight: bold;}
.vi .role_con h2{letter-spacing: 0;font-family: 'vifont';font-weight: bold;}
.role_con p{font: 0.18rem/0.4rem "Microsoft YaHei"; position: relative; padding-left:0.35rem;}
.en .role_con p{font-size:0.16rem;line-height:0.32rem;}
.vi .role_con p{font-size:0.16rem;line-height:0.32rem;}
.th .role_con p{font-size:0.16rem;line-height:0.32rem;font-family:'thfont';}
.vi .role_con p{font-size:0.16rem;line-height:0.32rem;font-family:'vifont';}
.role_con p span{position: absolute; left: 0; top:0.08rem; width:0.25rem; height: 0.25rem; background: #444654; line-height: 0.25rem; text-align: center; -webkit-border-radius: 50%; border-radius: 50%;}
/*  */
.wxPop1{width:100%;height:100%;background:rgba(0,0,0,.9);position:fixed;left:0;top:0;z-index:999;display:none;}
.wxPop1>div{width:6.76rem;height:3.48rem;background:url(../img/tip_wx.png) no-repeat;background-size: 100% auto;position:absolute;left:50%;top:40%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
.wxPop1 .close{position: absolute;right: 0.2rem;top: 0.1rem;width: 0.56rem;height: 0.56rem;background:url(../img/common_tip_close.png) no-repeat;background-size: 100% auto;z-index: 9;}
.wxPop1 .close:hover{-webkit-transform: rotate(-90deg);transform: rotate(-90deg);}


.wxPop2{width:100%;height:100%;background:rgba(0,0,0,.9);position:fixed;left:0;top:0;z-index:999;display:none;}
.wxPop2>div{width:6.76rem;height:3.48rem;background:url(../img/common_tip_bg1.png) no-repeat;background-size: 100% auto;position:absolute;left:50%;top:40%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
.wxPop2 .close{position: absolute;right: 0.2rem;top: 0.1rem;width: 0.56rem;height: 0.56rem;background:url(../img/common_tip_close.png) no-repeat;background-size: 100% auto;z-index: 9;}
.wxPop2 .close:hover{-webkit-transform: rotate(-90deg);transform: rotate(-90deg);}
.wxPop2 .con{padding: .6rem .7rem; position: relative;}
.wxPop2 .con img{width: 2rem;height: auto;}
.wxPop2 .con .txtwrap{position: absolute;right: .5rem;top: 1rem;width: 3.2rem;color: #fff;}
.wxPop2 .con .txtwrap p:nth-child(1){font:bold .28rem/.5rem 'microsoft yahei';color: #fff;}
.wxPop2 .con .txtwrap p:nth-child(2){font-size:.15rem;line-height:.24rem;padding-left:.6rem;margin-top: .2rem;position: relative;}
.wxPop2 .con .txtwrap p:nth-child(2)::after{content:'';position: absolute;left: 0;top: .02rem;width:.51rem;height:.41rem;background:url(../img/common_tip_wxicon.png) no-repeat;background-size: 100% auto;}

/*  */
.comingPop{width:100%;height:100%;background:rgba(0,0,0,.9);position:fixed;left:0;top:0;z-index:999;display:none;}
.comingPop>div{width: 7.63rem;height: 4.28rem;background: url(../img/p4_tip_bg.png) no-repeat;background-size: 100% auto;position: absolute;left:50%;top:50%;margin-left: -3.815rem;margin-top: -2.14rem;}
.comingPop .close{position: absolute;right: 0.25rem;top: 0.75rem;width: 0.56rem;height: 0.56rem;background:url(../img/common_tip_close.png) no-repeat;background-size: 100% auto;z-index: 9;}
.comingPop .close:hover{-webkit-transform: rotate(-90deg);transform: rotate(-90deg);}
.comingPop .coming_con{position: absolute;left:3.2rem;top:1.7rem;width:2.95rem;height: .45rem;background:url(../img/coming.png) no-repeat;background-size: 100% auto;}
.cn .comingPop .coming_con{left:3.6rem;width:2.17rem;height: .4rem;background:url(../img/cn/coming.png) no-repeat;background-size: 100% auto;}
/*  */
.videoPop{width:100%;height:100%;background:rgba(0,0,0,.9);position:fixed;left:0;top:0;z-index:999;display:none;}
.videoPop>div{width: 10.7rem;height: 6rem;position: absolute;left:50%;top:50%;margin-left: -5.35rem;margin-top: -4rem;}
.videoPop>div video{width: 10.7rem;height: 6rem;}
.videoPop .close{position: absolute;right: -0.56rem;top: 0rem;width: 0.56rem;height: 0.56rem;background:url(../img/common_tip_close.png) no-repeat;background-size: 100% auto;z-index: 9;}
.videoPop .close:hover{-webkit-transform: rotate(-90deg);transform: rotate(-90deg);}

/*  */


/* animate */
.rotate1{
    -webkit-animation: rotate1 20s linear infinite;
    -moz-animation: rotate1 20s linear infinite;
    -ms-animation: rotate1 20s linear infinite;
    -o-animation: rotate1 20s linear infinite;
    animation: rotate1 20s linear infinite;
}
.rotate2{
    -webkit-animation: rotate2 20s linear infinite;
    -moz-animation: rotate2 20s linear infinite;
    -ms-animation: rotate2 20s linear infinite;
    -o-animation: rotate2 20s linear infinite;
    animation: rotate2 20s linear infinite;
}
.rotate3{
    -webkit-animation: rotate1 40s linear infinite;
    -moz-animation: rotate1 40s linear infinite;
    -ms-animation: rotate1 40s linear infinite;
    -o-animation: rotate1 40s linear infinite;
    animation: rotate1 40s linear infinite;
}
.rotate4{
    -webkit-animation: rotate2 40s linear infinite;
    -moz-animation: rotate2 40s linear infinite;
    -ms-animation: rotate2 40s linear infinite;
    -o-animation: rotate2 40s linear infinite;
    animation: rotate2 40s linear infinite;
}
.rotate5{
    -webkit-animation: rotate1 10s linear infinite;
    -moz-animation: rotate1 10s linear infinite;
    -ms-animation: rotate1 10s linear infinite;
    -o-animation: rotate1 10s linear infinite;
    animation: rotate1 10s linear infinite;
}

@keyframes rotate1 {
    0% {
        transform:rotate(0deg);
    }50%{
        transform:rotate(180deg);
    }100% {
        transform:rotate(360deg);
    }
}
@-webkit-keyframes rotate1{
    0% {
        transform:rotate(0deg);
    }50%{
        transform:rotate(180deg);
    }100% {
        transform:rotate(360deg);
    }
}
@-moz-keyframes rotate1{
    0% {
        transform:rotate(0deg);
    }50%{
        transform:rotate(180deg);
    }100% {
        transform:rotate(360deg);
    }
}
@-ms-keyframes rotate1{
    0% {
        transform:rotate(0deg);
    }50%{
        transform:rotate(180deg);
    }100% {
        transform:rotate(360deg);
    }
}
@-o-keyframes rotate1{
    0% {
        transform:rotate(0deg);
    }50%{
        transform:rotate(180deg);
    }100% {
        transform:rotate(360deg);
    }
}

@keyframes rotate2 {
    0% {
        transform:rotate(0deg);
    }50%{
        transform:rotate(-180deg);
    }100% {
        transform:rotate(-360deg);
    }
}
@-webkit-keyframes rotate2{
    0% {
        transform:rotate(0deg);
    }50%{
        transform:rotate(-180deg);
    }100% {
        transform:rotate(-360deg);
    }
}
@-moz-keyframes rotate2{
    0% {
        transform:rotate(0deg);
    }50%{
        transform:rotate(-180deg);
    }100% {
        transform:rotate(-360deg);
    }
}
@-ms-keyframes rotate2{
    0% {
        transform:rotate(0deg);
    }50%{
        transform:rotate(-180deg);
    }100% {
        transform:rotate(-360deg);
    }
}
@-o-keyframes rotate2{
    0% {
        transform:rotate(0deg);
    }50%{
        transform:rotate(-180deg);
    }100% {
        transform:rotate(-360deg);
    }
}


/* bg1 */
.index_01{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /*max-width: 437px;*/
    z-index: 0;
    pointer-events: none;
    /*! display: none; */
}
.index_01_img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% + var(--gap-vertical) * 2);
    background: url(../img/bg_page1.jpg) no-repeat 50% 0 /100%;
    background-size:1920px auto;
    background-color: var(--blend-color-1);
    /*! background-size: 100%; */
    transform: translate3d(0, 0, 0);
    background-blend-mode: var(--blend-mode-1);
}
.index_01_img:nth-child(n+2) {
    opacity: 0;
}
.index_01_img:nth-child(n+2) {
    animation-duration: var(--time-anim);
    animation-delay: var(--delay-anim);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.index_01_img:nth-child(2) {
    background-color: var(--blend-color-2);
    background-blend-mode: var(--blend-mode-2);
    animation-name: glitch-anim-1;
}
.index_01_img:nth-child(3) {
    background-color: var(--blend-color-3);
    background-blend-mode: var(--blend-mode-3);
    animation-name: glitch-anim-2;
}
.index_01_img:nth-child(4) {
    background-color: var(--blend-color-3);
    background-blend-mode: var(--blend-mode-3);
    animation-name: glitch-anim-3;
}
.index_01_img:nth-child(5){
    background-color: var(--blend-color-5);
    background-blend-mode: var(--blend-mode-5);
    animation-name: glitch-anim-flash;
}
/* bg4 */
.index_04{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}
.index_04_img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% + var(--gap-vertical) * 2);
    background: url(../img/p4/bg_page4.jpg) no-repeat 50% 0 /100%;
    background-size:1920px auto;
    background-color: var(--blend-color-1);
    transform: translate3d(0, 0, 0);
    background-blend-mode: var(--blend-mode-1);
}
.index_04_img:nth-child(n+2) {
    opacity: 0;
}
.index_04_img:nth-child(n+2) {
    animation-duration: var(--time-anim);
    animation-delay: var(--delay-anim);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.index_04_img:nth-child(2) {
    background-color: var(--blend-color-2);
    background-blend-mode: var(--blend-mode-2);
    animation-name: glitch-anim-1;
}
.index_04_img:nth-child(3) {
    background-color: var(--blend-color-3);
    background-blend-mode: var(--blend-mode-3);
    animation-name: glitch-anim-2;
}
.index_04_img:nth-child(4) {
    background-color: var(--blend-color-3);
    background-blend-mode: var(--blend-mode-3);
    animation-name: glitch-anim-3;
}
.index_04_img:nth-child(5){
    background-color: var(--blend-color-5);
    background-blend-mode: var(--blend-mode-5);
    animation-name: glitch-anim-flash;
}


/* Animations */

@keyframes glitch-anim-1 {
    0% {
        opacity: 1;
        transform: translate3d(var(--gap-horizontal), 0, 0);
        -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
        clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
    }

    2% {
        -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
        clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
    }

    4% {
        -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
        clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
    }

    6% {
        -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
        clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
    }

    8% {
        -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
        clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
    }

    10% {
        -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
        clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
    }

    12% {
        -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
        clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
    }

    14% {
        -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
        clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
    }

    16% {
        -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
        clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    }

    18% {
        -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
        clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    }

    20% {
        -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
        clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
    }

    21.9% {
        opacity: 1;
        transform: translate3d(var(--gap-horizontal), 0, 0);
    }

    22%,
    100% {
        opacity: 0;
        transform: translate3d(0, 0, 0);
        -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
        clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    }
}

@keyframes glitch-anim-2 {
    0% {
        opacity: 1;
        transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0);
        -webkit-clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
        clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
    }

    3% {
        -webkit-clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
        clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
    }

    5% {
        -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
        clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
    }

    7% {
        -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
        clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
    }

    9% {
        -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
        clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
    }

    11% {
        -webkit-clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
        clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
    }

    13% {
        -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
        clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
    }

    15% {
        -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
        clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
    }

    17% {
        -webkit-clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
        clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
    }

    19% {
        -webkit-clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
        clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
    }

    20% {
        -webkit-clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
        clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
    }

    21.9% {
        opacity: 1;
        transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0);
    }

    22%,
    100% {
        opacity: 0;
        transform: translate3d(0, 0, 0);
        -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
        clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    }
}

@keyframes glitch-anim-3 {
    0% {
        opacity: 1;
        transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1, -1, 1);
        -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
        clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
    }

    1.5% {
        -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
        clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
    }

    2% {
        -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
        clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
    }

    2.5% {
        -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
        clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
    }

    3% {
        -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
        clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
    }

    5% {
        -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
        clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
    }

    5.5% {
        -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
        clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
    }

    7% {
        -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
        clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
    }

    8% {
        -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
        clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
    }

    9% {
        -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
        clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
    }

    10.5% {
        -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
        clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
    }

    11% {
        -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
        clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
    }

    13% {
        -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
        clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
    }

    14% {
        -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
        clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
    }

    14.5% {
        -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
        clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
    }

    15% {
        -webkit-clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
        clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
    }

    16% {
        -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
        clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
    }

    18% {
        -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
        clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
    }

    20% {
        -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
        clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
    }

    21.9% {
        opacity: 1;
        transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1, -1, 1);
    }

    22%,
    100% {
        opacity: 0;
        transform: translate3d(0, 0, 0);
        -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
        clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    }
}

@keyframes glitch-anim-text {
    0% {
        transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0);
        /*transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0) scale3d(-1,-1,1);*/
        -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
        clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
    }

    2% {
        -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
        clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
    }

    4% {
        -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
        clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
    }

    5% {
        -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
        clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
    }

    6% {
        -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
        clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
    }

    7% {
        -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
        clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    }

    8% {
        -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
        clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    }

    9% {
        -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
        clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
    }

    9.9% {
        transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0);
        /*transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0) scale3d(-1,-1,1);*/
    }

    10%,
    100% {
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }
}



.bright{animation: bright 3s linear infinite;}
@keyframes bright {
    0%{
        filter: brightness(1);
    }20%{
        filter: brightness(1.2);
    }40%{
        filter: brightness(1);
    }60%{
        filter: brightness(1.2);
    }80%{
        filter: brightness(1);
    }90% {
        filter: brightness(1.2);
    }100% {
        filter: brightness(1);
    }
}

.side_cbt{width:2.27rem;height:3.3rem;position:fixed;left:0;top:30%;z-index:99;}
.cn .side_cbt{background:url(../img/cn/side.png) no-repeat;background-size:100% auto;}
.en .side_cbt{background:url(../img/en/side.png) no-repeat;background-size:100% auto;}
.th .side_cbt{background:url(../img/th/side.png) no-repeat;background-size:100% auto;}
.vi .side_cbt{background:url(../img/vi/side.png) no-repeat;background-size:100% auto;}



.footer {
    background: #FFF;
    padding: 0.15rem 0;
}

.footer img {
    width: 2rem;
    height: auto;
    display: block;
    margin: 0 auto;
}

.footBox {
    width: 9.82rem;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    font-family: \5b8b\4f53;
    font-size: 0.12rem;
}

.footer .logo2 {
    float: left;
    width: 2.08rem;
    padding-left: 0.74rem;
    margin-left: 5rem;
    margin-right: 0.5rem;
}

.footer .text {
    float: left;
    width: 6.74rem;
    line-height: 0.2rem;
}

.footer,
.footer a {
    color: #5b5b5b;
}

.footer .bq {
    top: 0.1rem !important;
}
.footer .wwy{
    vertical-align: middle;
}

.opcity-zhezhao {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 200;
    position: fixed;
    top: 0;
    left: 0;
    display: none;
}

.ageTip{
    background: url(../img/age_tip.png) no-repeat center !important;
    background-size: 100% 100% !important;
    border: none !important;
    height: 380px !important;
}
.ageTip_title_left{
    background: url(../img/title_l.png) no-repeat center !important;
}
.ageTip_title_right{
    background: url(../img/title_r.png) no-repeat center !important;
}
.ageTip_title p{
    text-shadow:2px 2px 5px red;
}

.down_tip{width:100%;height:100%;background:rgba(0,0,0,.9);position:fixed;left:0;top:0;z-index:999;display:none;}
.down_tip>div{width:8.5rem;height:3.48rem;background:url(../img/common_tip_bg1.png) no-repeat;background-size: 100% 100%;position:absolute;left:50%;top:40%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
.down_tip .close{position: absolute;right: 0.2rem;top: 0.1rem;width: 0.56rem;height: 0.56rem;background:url(../img/common_tip_close.png) no-repeat;background-size: 100% auto;z-index: 9;}
.down_tip .close:hover{-webkit-transform: rotate(-90deg);transform: rotate(-90deg);}
.down_tip .con{padding: .6rem .7rem; position: relative;}
.down_tip .con p{color: #ff4857;font-size: .15rem;font-weight: bold;}
.down_tip .con img{width: 2rem;height: auto;}
.down_tip .con .txtwrap{position: absolute;right: .5rem;top: .4rem;width: 5rem;color: #fff;line-height: .24rem;}

.down_tip .con .txtwrap .q{color: #8fb7ff;}
.down_tip .con .txtwrap .a{color: #d6e4ff;margin-bottom: .2rem;}
.down_tip .con .txtwrap .b{color: #8fb7ff;}










