html,body,div,ul,ol,li,span,p,a,b,i,img,h1,h2{ margin: 0; padding: 0; border: 0 }
html,body{ width: 100%; height: 100%; position: relative; font-family: "Source Han Sans CN"; overflow: hidden; background-color: #000;}
ul,ol,li{list-style: none;}
input,select,textarea,button{ outline: none}
a{text-decoration: none;-webkit-tap-highlight-color: transparent;}

.clear:before{content: '';display: table}
.clearfloat:after{content: '';display: block;clear: both}

.swiper_page{ width: 100%; height: 100%; background-image: url(img/m/bg.jpg); background-size: 100% auto; position: relative;}
/*.swiper-slide{ width: 100%; height: 100%; position: relative; overflow: hidden; opacity: 0;}*/
/*.swiper-slide.swiper-slide-active{ -webkit-mask-image:url(img/yun.png); -webkit-mask-size:100% 2900%; animation: Mask 1s steps(28); animation-fill-mode: forwards; opacity: 1;}*/

.mask{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 8; background-color: rgba(0,0,0,.8); display: none}
.pop_video{ width:14.15rem; height:7.85rem; position:fixed; top:20%; left:50%; margin-left:-7.2rem; z-index:11; padding:0.125rem; background:#000; display:none;}
.pop_video .pop_close{ width:0.75rem; height:0.75rem; position:absolute; top:-1.2rem; right:0; display:block; z-index:5}
.pop_video .pop_close img{ transition:all ease .5s; width:100%;}
.pop_video .pop_close:hover img{ transform:rotate(360deg);}
.pop_video video{ width:14.15rem; height:7.85rem;}

.top_bar{position: absolute;width: 100%;height: 2.75rem;background: #EBEDF1;top: 0;left: 0;z-index: 7;}
.top_bar .logo{display: block;width: 2.75rem;float: left;margin: .5rem .5rem 0;}
.top_bar .logo img{display: block;width: 100%;}
.top_bar .txt{float: left;margin-top: .5rem;font-size: .55rem;color: #333333;line-height: 1rem;}
.top_bar .txt .t_1{font-size: 1rem;color: #72BEB6}
.top_bar .home{display: block;width: 4.25rem;float: right;margin: .625rem .5rem 0 .375rem;}
.top_bar .home img{display: block;width: 100%;}
.top_bar .download{display: block;width: 4.25rem;float: right;margin-top: .625rem;}
.top_bar .download img{display: block;width: 100%;}

.back{position: absolute;width: 3.625rem;left: 0;top: 4rem;z-index: 2;display: none}
.back img{display: block;width: 100%;}
.more_1{position: absolute;width: 2.95rem;left: 50%;margin-left: -1.475rem;bottom: .5rem;z-index: 2;animation: Float 1s alternate infinite linear;}
.more_1 img{display: block;width: 100%;}

.part_1 .fb{position: absolute;width: 12.375rem;left: 50%;margin-left: -6.1875rem;top: 50%;margin-top: -11rem;z-index: 1}
.part_1 .slogan{position: absolute;width: 13.925rem;left: 50%;margin-left: -6.9625rem;top: 50%;margin-top: -10rem;z-index: 2}
.part_1 .role{position: absolute;width: 100%;left: 0%;top: 50%;margin-top: -14.5rem;z-index: 1}
.part_1 .nav_box{text-align: center;width: 100%;position: absolute;left: 0;top: 50%;margin-top: 9.6rem;z-index: 3}
.part_1 .nav_box a{display: inline-block;width: 4.4rem;height: 1.725rem;background: url("img/m/nav.png") no-repeat;background-size: 400% 100%;}
.part_1 .nav_box a:nth-child(1){background-position: 0 0}
.part_1 .nav_box a:nth-child(2){background-position: -4.4rem 0}
.part_1 .nav_box a:nth-child(3){background-position: -8.8rem 0}
.part_1 .nav_box a:nth-child(4){background-position: -13.2rem 0}

.part_2 .txt_box{ width: 5.775rem; position: absolute; top: 50%; margin-top: -9.5rem; left: 3.25rem;z-index: 2;transition: .5s}
.part_2 .txt_box span{display: block; background-repeat: no-repeat;background-size: 5.775rem 4.475rem;}
.part_2 .txt_box span.txt_1{ height: .85rem; background-position: 0 0;}
.part_2 .txt_box span.txt_2{ height: 2.125rem; background-position: 0 -.85rem;}
.part_2 .txt_box span.txt_3{ height: 1.5rem; background-position: 0 -2.975rem;}
.part_2 .txt_box.t_1 span{ background-image: url(img/txt_1.png);}
.part_2 .txt_box.t_2 span{ background-image: url(img/txt_2.png);}
.part_2 .txt_box.t_3 span{ background-image: url(img/txt_3.png);}
.part_2 .txt_box.t_4 span{ background-image: url(img/txt_4.png);}
.part_2 .txt_box.t_5 span{ background-image: url(img/txt_5.png);}
.part_2 .txt_box.t_6 span{ background-image: url(img/txt_6.png);}

.part_2 .video_btn{ width: 8.875rem; border: .05rem #fff solid; position: absolute; top: 50%; margin-top: -4rem; left: 3.25rem; z-index: 2;transition: .8s}
.part_2 .video_btn:before{content: '';position: absolute;background: url("img/v_btn.png") no-repeat top center;width: 1.5rem;height: 1.5rem;background-size: 100% 100%;left: 50%;margin-left: -.75rem;top: 50%;margin-top: -.75rem;}
.part_2 .video_btn img{ display: block;width: 100%; }
.part_2 .more{ display: block; position: absolute; top: 50%; margin-top: 2.2rem; left: 3.25rem;width: 5rem;z-index: 2;transition: 1s}
.part_2 .more img{display: block;width: 100%;}
.part_2 .more.s{margin-top: -4.7rem;}
.part_2 .role{ position: absolute; top: 0; right: 0; z-index: 1; width: 100%;}
.part_2 .content_1{position: relative;z-index: 1;width: 100%;height: 100%;}
.part_2 .content{position: absolute;width: 100%;height: 100%;opacity: 0;transition: .5s;z-index: 0}
.part_2 .content.cur{opacity: 1;z-index: 1}
.part_2 .content.cur .txt_box{transform: translateX(-2.5rem)}
.part_2 .content.cur .video_btn{transform: translateX(-2.5rem)}
.part_2 .content.cur .more{transform: translateX(-2.5rem)}
.part_2 .content.hide{display: none;}

.part_2 .content_2 .info{position: absolute;width: 100%;height: 100%;opacity: 0;transition: .5s}
.part_2 .content_2 .info.cur{opacity: 1}
.part_2 .content_2{position: absolute;width: 100%;height: 100%;z-index: -1;}
.part_2 .content_2.show{ z-index: 2}
.part_2 .t{position: absolute;width: 4.425rem;top: 1.625rem;right: -1.75rem;z-index: 1;transition: .5s;opacity: 0}
.part_2 .content_2 .txt_box{transition: .5s;opacity: 0;left: -1.75rem;margin-top: -12rem}
.part_2 .yl{position: absolute;width: 9.6rem;left: -2.25rem;top: 50%;margin-top: -6rem;z-index: 3;transition: .5s;opacity: 0}
.part_2 .content_2 .desc_box{position: absolute;width: 100%;padding: 0 1.15rem;font-size: .6rem;color: #B5CCED;line-height: 1.2rem;left: 0;top: 50%;margin-top: -1rem;text-align: justify;transition: .5s;opacity: 0;box-sizing: border-box;}
.part_2 .content_2 .desc_box p:first-child{font-size: .75rem;margin-bottom: .5rem;line-height: 1.5rem}
.part_2 .close{position: absolute;left: 50%;margin-left: -1.1375rem;z-index: 1;width: 2.275rem;top: 50%;margin-top: 12rem;opacity: 0;transition: .5s}
.part_2 .close img{display: block;width: 100%;}
.part_2 .content_2.show .t{transform: translateX(-2.5rem);opacity: 1}
.part_2 .content_2.show .desc_box{transform: translateY(-2.5rem);opacity: 1}
.part_2 .content_2.show .txt_box{transform: translateX(2.5rem);opacity: 1}
.part_2 .content_2.show .yl{transform: translateX(2.5rem);opacity: 1}
.part_2 .content_2.show .close{opacity: 1}

.part_2 .nav_box{position: absolute;width: 15.85rem;height: 2.8rem;top: 50%; left: 50%; transform: translate(-50%,180%); z-index: 2;}
.nav{height: 100%;transition: .5s;position: relative;left: 0;}
.nav a{display: block;float: left; width: 3.325rem; height: 2.8rem; background-image: url(img/ico.png);background-size: 20.325rem 15.5rem;position: relative;margin-right: .85rem;}
.nav a:last-child{margin-right: 0;}
.nav a:nth-child(1):before{content: '';position: absolute;width: 1.7rem;border-bottom: .025rem dashed #5673A4;top: 1.15rem;right: -1.275rem;}
.nav a:nth-child(2):before{content: '';position: absolute;width: 1.7rem;border-bottom: .025rem dashed #5673A4;top: 1.15rem;right: -1.275rem;}
.nav a:nth-child(3):before{content: '';position: absolute;width: 1.7rem;border-bottom: .025rem dashed #5673A4;top: 1.15rem;right: -1.275rem;}
.nav a:nth-child(5):before{content: '';position: absolute;width: 1.7rem;border-bottom: .025rem dashed #5673A4;top: 1.15rem;right: -1.275rem;}
.nav .nav_1{ background-position: -3.5rem 0;}
.nav .nav_2{ background-position: -6.825rem 0;}
.nav .nav_3{ background-position: -10.15rem 0;}
.nav .nav_4{ background-position: -13.475rem 0;}
.nav .nav_5{ background-position: -16.8rem 0;}
.nav .nav_6{ background-position: -16.8rem -2.85rem;}
.nav a.cur{background-image: url("img/m/nav_1.png");background-size: 20.1rem 2.8rem;}
.nav .nav_1.cur{ background-position: 0 0;}
.nav .nav_2.cur{ background-position: -3.325rem 0;}
.nav .nav_3.cur{ background-position: -6.65rem 0;}
.nav .nav_4.cur{ background-position: -9.975rem 0;}
.nav .nav_5.cur{ background-position: -13.3rem 0;}
.nav .nav_6.cur{ background-position: -16.625rem 0;}

.part_2 .prev_btn{position: absolute;background: url("img/m/prev.png");width: 1rem;height: 1.025rem;background-size: 100% 100%;left: .125rem;top: 50%;margin-top: 5.7rem;z-index: 3}
.part_2 .next_btn{position: absolute;background: url("img/m/next.png");width: 1rem;height: 1.025rem;background-size: 100% 100%;right: .125rem;top: 50%;margin-top: 5.7rem;z-index: 3}

.part_3 .tab_list{position: absolute;width: 2.175rem;height: 15.8rem;background: url("img/m/tab_list.png") no-repeat top center;background-size: .275rem 15.8rem;box-sizing: border-box;top: 2.75rem;padding-top: 1.45rem;font-family: 楷体;right: .55rem;z-index: 7}
.part_3 .tab_list li{width: 2.175rem;height: 2.4rem;background: url("img/m/t_bg.png") no-repeat top left;background-size: 500% 200%;margin-bottom: .25rem;text-align: center;font-size: 1.175rem;color: #C4DBFF;line-height: 2.4rem;}
.part_3 .tab_list li:nth-child(1){background-position: 0 0}
.part_3 .tab_list li:nth-child(2){background-position: -2.175rem 0}
.part_3 .tab_list li:nth-child(3){background-position: -4.35rem 0}
.part_3 .tab_list li:nth-child(4){background-position: -6.525rem 0}
.part_3 .tab_list li:nth-child(5){background-position: -8.7rem 0}
.part_3 .tab_list li:nth-child(1).cur{background-position: 0 -2.4rem}
.part_3 .tab_list li:nth-child(2).cur{background-position: -2.175rem -2.4rem}
.part_3 .tab_list li:nth-child(3).cur{background-position: -4.35rem -2.4rem}
.part_3 .tab_list li:nth-child(4).cur{background-position: -6.525rem -2.4rem}
.part_3 .tab_list li:nth-child(5).cur{background-position: -8.7rem -2.4rem}
.part_3 .title{font-size: .6rem;line-height: 1rem;position: absolute;left: 1.875rem;top: 50%;margin-top: -10rem;color: #BCC9E9;transition: .5s}
.part_3 .title:before{content: '';position: absolute;background: url("img/m/t.png") no-repeat;background-size: 500% 100%;left: -3.25rem;top: -.35rem;width: 2.5rem;height: 2.25rem;z-index: 2}
.part_3 .title.t_1:before{background-position: 0 0;}
.part_3 .title.t_2:before{background-position: -2.5rem 0;}
.part_3 .title.t_3:before{background-position: -5rem 0;}
.part_3 .title.t_4:before{background-position: -7.5rem 0;}
.part_3 .title.t_5:before{background-position: -10rem 0;}
.part_3 .title:after{content: '';position: absolute;background: url("img/m/line.png") no-repeat;background-size: 100% 100%;left: -4rem;bottom: -.5rem;width: 12.8rem;height: .6rem;z-index: 1}
.part_3 .tab_box{position: absolute;width: 100%;text-align: center;left: -2.5rem;top: 50%;margin-top: -7.5rem;z-index: 1;transition: .8s}
.part_3 .tab_box a{display: inline-block;background: url("img/m/tab_bg.png") no-repeat top center;background-size: 100% 200%;width: 4.4rem;height: 1.5rem;margin: 0 auto;text-align: center;line-height: 1.5rem;font-size: .6rem;color: #7C9BD2;font-family: "Source Han Serif SC";}
.part_3 .tab_box a.cur{background-position: bottom center;color: #6C5F41;text-shadow: 1px 1px 2px #ffffff;}
.part_3 .content{position: absolute;width: 100%;height: 100%;opacity: 0;transition: 1s;z-index: 0}
.part_3 .content.cur{opacity: 1;z-index: 1}
.part_3 .content.hide{display: none}
.part_3 .content.cur .title{transform: translateX(2.5rem)}
.part_3 .content.cur .tab_box{transform: translateX(2.5rem)}
.part_3 .content.cur .focus{transform: translateX(2.5rem)}

.focus_box .focus{opacity: 0;z-index: 1}
.focus_box .focus.cur{opacity: 1;z-index: 2}
.focus{position: absolute;width: 13.8rem;height: 13.8rem;top: 50%;margin-top: -5rem;left: 50%;margin-left: -9.4rem;transition: 1s;z-index: 2;background: url("img/focus.png") no-repeat top center;background-size: 100% 100%;}
.focus .slide img{display: block;width: 100%;}
.focus .flex-direction-nav .flex-prev{position: absolute;text-indent: -9999px;background: url("img/prev.png");background-size: 100% 100%;width: 1.225rem;height: 1.125rem;left: -1.925rem;top: 6.375rem;}
.focus .flex-direction-nav .flex-next{position: absolute;text-indent: -9999px;background: url("img/next.png");background-size: 100% 100%;width: 1.225rem;height: 1.125rem;right: -1.925rem;top: 6.375rem;}
.focus .flex-direction-nav a.flex-disabled{filter: grayscale(100%);-webkit-filter: grayscale(100%)}
.focus .flex-control-nav{text-align: center;position: absolute;width: 100%;bottom: -1rem}
.focus .flex-control-nav li{display: inline-block;margin: 0px .25rem;}
.focus .flex-control-nav a{display: block;background: url("img/dot.png") no-repeat top center;background-size: 100% 200%;width: .475rem;height: .475rem;text-indent: -9999px}
.focus .flex-control-nav a:hover{cursor: pointer;}
.focus .flex-control-nav .flex-active{background-position: bottom center;}
.focus .slide img{display: block;width: 100%;height: 100%;}

.part_4 .role{position: absolute;width: 100%;top: 50%;margin-top: -14rem;z-index: 1;left: 0}
.part_4 .slogan_1{position: absolute;width: 100%;top: 50%;margin-top: -6rem;z-index: 2;left: 0}
.part_4 .yuyue{position: absolute;z-index: 3;background: url("img/yuyue.png") no-repeat top center;background-size: 100% 100%;width: 6.975rem;height: 1.925rem;left: 50%;margin-left: -3.4875rem;top: 50%;margin-top: 7.5rem;}

.part_5{height: 7.5275rem!important; background-color: #20131c;}

@keyframes Mask {
    from { -webkit-mask-position-y:0% }
    to { -webkit-mask-position-y:100% }
}

@keyframes Mask_1 {
    from { -webkit-mask-position-y:100% }
    to { -webkit-mask-position-y:0% }
}

@-webkit-keyframes Float{
    from { transform: translateY(0); }
    to { transform: translateY(-10px); }
}
@keyframes Float{
    from { transform: translateY(0); }
    to { transform: translateY(-10px); }
}