@charset "utf-8";
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0}
html,body,fieldset,img,iframe,abbr{border:0}
li{list-style:none}
textarea{overflow:auto;resize:none}
a{cursor:pointer;color: #fff;transition: all .2s linear;-webkit-transition: all .2s linear;-o-transition: all .2s linear;-moz-transition: all .2s linear;}
i,em{font-style: normal;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:400;font-style:normal}
a,a:hover{text-decoration:none}
body,textarea,input,button{color:#fff}
input,textarea,a,div,button,select{margin:0;padding:0;border:0;outline:0}
table{border-collapse:collapse;border-spacing:0}
body{color: #fff;font:16px/40px Arial; background: #000; min-width:1280px;min-height:960px;height:auto}
html,body,.app,.home{width: 100%;height: 100%;position: relative;}
.part{background:#131f17 url('../images/bg.jpg') no-repeat center;overflow: hidden;text-transform: uppercase;padding-top: 127px;box-sizing: border-box; display:-webkit-flex;display:-moz-flex;display:-o-flex;display:-ms-flexbox;display:-ms-flex;display:flex;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;align-items:center;-ms-flex-align:center;-webkit-justify-content:center;-moz-justify-content:center;-ms-justify-content:center;justify-content:center;-ms-flex-pack:center}
.p1{background: url('../images/p1.jpg') no-repeat ;}
.top{position: fixed;top: 0;left: 0;width: 100%;height: 127px;background: #322c2a;z-index: 10;}
.logo{position: absolute;display: block;width: 169px;top: 24px;left: 80px;}
.nav{display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-align: center;-webkit-align-items: center; align-items: center;}
.link{position: absolute;right: 80px;top: 44px;}
.link a{float: left;width: 30px;height: 30px;margin-right: 17px;border-radius: 50%;background: #f9580a url('../images/link_ico.png') no-repeat -999px;}
.link a:hover{background-color: #26bc5f;}
.link .fs{background-position: 0 0;}
.link .wb{background-position: -30px 0;}
.link .gw{background-position: -60px 0;}
.nav{margin: 0 300px;height: 127px;justify-content: space-around;}
.nav .item{text-transform: uppercase;font-size: 16px;padding-left: 14px;position: relative;cursor: pointer;color: #fff;}
.nav .item::after{content: '';position: absolute;left:0;top:50%;margin-top:-4px;width: 6px;height: 6px;background: #fff;}
.nav .item:hover,.nav .active{color: #f9580a;}
.nav .item:hover::after,.nav .active::after{background: #f9580a;}
.main{position:relative;width:1280px;margin:0 auto;text-align: center;}
.title{font-size: 56px; line-height: 1; color: #f9580a;}
.desc{margin: 30px 0;}
.p3{background: url('../images/p3.jpg') no-repeat center top;}
.role{height: 718px;overflow: hidden; position: relative;}
.role .item{display: none;opacity: 0;height: 718px; position: absolute;left: 0; top: 0;}
.role .show{display: block;opacity: 1;}
.role .img{float: left;width: 620px;height: 718px;-webkit-animation: roleImgShow .6s forwards;animation: roleImgShow .6s forwards;-moz-animation: roleImgShow 2.5s forwards;-webkit-animation: roleImgShow 2.5s forwards;-o-animation: roleImgShow 2.5s forwards;-ms-animation: roleImgShow 2.5s forwards;}
@-webkit-keyframes roleImgShow{0%{-webkit-transform:translateX(-30px);-moz-transform:translateX(-30px);-ms-transform:translateX(-30px);-o-transform:translateX(-30px);transform:translateX(-30px);-webkit-opacity:0;-moz-opacity:0;opacity:0;filter:alpha(opacity=0)}100%{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0);-webkit-opacity:1;-moz-opacity:1;opacity:1;filter:alpha(opacity=100)}}
@-moz-keyframes roleImgShow{0%{-webkit-transform:translateX(-30px);-moz-transform:translateX(-30px);-ms-transform:translateX(-30px);-o-transform:translateX(-30px);transform:translateX(-30px);-webkit-opacity:0;-moz-opacity:0;opacity:0;filter:alpha(opacity=0)}100%{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0);-webkit-opacity:1;-moz-opacity:1;opacity:1;filter:alpha(opacity=100)}}
@-ms-keyframes roleImgShow{0%{-webkit-transform:translateX(-30px);-moz-transform:translateX(-30px);-ms-transform:translateX(-30px);-o-transform:translateX(-30px);transform:translateX(-30px);-webkit-opacity:0;-moz-opacity:0;opacity:0;filter:alpha(opacity=0)}100%{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0);-webkit-opacity:1;-moz-opacity:1;opacity:1;filter:alpha(opacity=100)}}
@-o-keyframes roleImgShow{0%{-webkit-transform:translateX(-30px);-moz-transform:translateX(-30px);-ms-transform:translateX(-30px);-o-transform:translateX(-30px);transform:translateX(-30px);-webkit-opacity:0;-moz-opacity:0;opacity:0;filter:alpha(opacity=0)}100%{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0);-webkit-opacity:1;-moz-opacity:1;opacity:1;filter:alpha(opacity=100)}}
@keyframes roleImgShow{0%{-webkit-transform:translateX(-30px);-moz-transform:translateX(-30px);-ms-transform:translateX(-30px);-o-transform:translateX(-30px);transform:translateX(-30px);-webkit-opacity:0;-moz-opacity:0;opacity:0;filter:alpha(opacity=0)}100%{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0);-webkit-opacity:1;-moz-opacity:1;opacity:1;filter:alpha(opacity=100)}}
@-webkit-keyframes roleTextShow{0%{-webkit-opacity:0;-moz-opacity:0;opacity:0;filter:alpha(opacity=0);-webkit-transform:translateX(30px);-moz-transform:translateX(30px);-ms-transform:translateX(30px);-o-transform:translateX(30px);transform:translateX(30px)}100%{-webkit-opacity:1;-moz-opacity:1;opacity:1;filter:alpha(opacity=100);-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none}}
@-moz-keyframes roleTextShow{0%{-webkit-opacity:0;-moz-opacity:0;opacity:0;filter:alpha(opacity=0);-webkit-transform:translateX(30px);-moz-transform:translateX(30px);-ms-transform:translateX(30px);-o-transform:translateX(30px);transform:translateX(30px)}100%{-webkit-opacity:1;-moz-opacity:1;opacity:1;filter:alpha(opacity=100);-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none}}
@-ms-keyframes roleTextShow{0%{-webkit-opacity:0;-moz-opacity:0;opacity:0;filter:alpha(opacity=0);-webkit-transform:translateX(30px);-moz-transform:translateX(30px);-ms-transform:translateX(30px);-o-transform:translateX(30px);transform:translateX(30px)}100%{-webkit-opacity:1;-moz-opacity:1;opacity:1;filter:alpha(opacity=100);-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none}}
@-o-keyframes roleTextShow{0%{-webkit-opacity:0;-moz-opacity:0;opacity:0;filter:alpha(opacity=0);-webkit-transform:translateX(30px);-moz-transform:translateX(30px);-ms-transform:translateX(30px);-o-transform:translateX(30px);transform:translateX(30px)}100%{-webkit-opacity:1;-moz-opacity:1;opacity:1;filter:alpha(opacity=100);-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none}}
@keyframes roleTextShow{0%{-webkit-opacity:0;-moz-opacity:0;opacity:0;filter:alpha(opacity=0);-webkit-transform:translateX(30px);-moz-transform:translateX(30px);-ms-transform:translateX(30px);-o-transform:translateX(30px);transform:translateX(30px)}100%{-webkit-opacity:1;-moz-opacity:1;opacity:1;filter:alpha(opacity=100);-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none}}
.role .text{width: 660px;float: right;text-align: left;padding-top: 60px;-moz-animation: roleTextShow .6s forwards;-webkit-animation:roleTextShow .6s forwards;-o-animation: roleTextShow .6s forwards;-ms-animation: roleTextShow .6s forwards; animation: roleTextShow .6s forwards;}
.role h3{font-size: 36px; line-height: 100px; color: #f9580a; border-bottom: 1px solid #ccc; margin-bottom: 8px;position: relative;}
.role h3::before{content: '';position: absolute;left: 0;bottom: -2px;height: 3px;width: 310px;background: #f9580a;}
.role .text p{text-transform: initial;}
.avatar{position: absolute;bottom: 120px;right: 0;width: 660px; display: flex; justify-content: space-between;}
.avatar li{width: 114px; height: 114px; border-radius: 50%; overflow: hidden; cursor: pointer; border: 5px solid transparent;-webkit-filter: grayscale(100%);filter:grayscale(100%);filter: gray;-o-transition: all .3s linear;-moz-transition: all .3s linear;-webkit-transition: all .3s linear;transition: all .3s linear;}
.avatar li.cur{border-color: #f9580a;-webkit-filter: none;filter: none;}