html { overflow-x:hidden;}
h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,th,td,p,blockquote,pre,form,fieldset,legend,input,button,textarea,hr{ margin:0; padding:0; }
body{ margin:0;padding:0; font-size:12px; font-family:"Microsoft Yahei";   color:#333;}
h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:100; overflow:hidden;}
img,fieldset,iframe,table{ border:0;}
img { border: none; vertical-align: top; }
input,button,textarea,select{ font-size:12px;}
ul,ol,dl,dt,dd,li{ list-style:none;}
b{ font-weight:100; overflow:hidden;}
em,i{ font-style:normal; }
area { outline:none; border:none;}
a{ color:#333; text-decoration:none; cursor:pointer;}
a:hover{ text-decoration:none;}
.clearfix{ clear:both;}
.clearfix{ zoom:1;}
.clearfix:after{ content:'.'; display:block; visibility:hidden; clear:both; width:1px; height:1px;}
.left{ float:left;}
.right{ float:right;}
.f700{ font-weight:700;}
.f100{ font-weight:100;}
.fyahei{ font-family:"Microsoft Yahei";}
.ta_l{ text-align:left;}
.ta_c{ text-align:center;}
.ta_r{ text-align:right;}
.height100 { height:100%;}
.pa{ position:absolute;}
.pr{ position: relative;}
.wrapper{ margin:auto;width:1000px;height: 100%; }
.hidden{ display:none;}
.overflow{ overflow:visible;}
.white { color:#fff;}
.pointer { cursor: pointer; }
.scale { overflow: hidden; }
.scale img { -webkit-transition:-webkit-transform 500ms;transition:transform 500ms; vertical-align:top;}
.scale:hover img { -webkit-transform:scale(1.06);transform:scale(1.06);}
.hide{ display:none;}
.show{ display:block;}
.cover{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #fff;opacity: 0;filter: alpha(opacity=0);}
/*top*/
.nav-top-bg,.nav-top{ position: relative;background:#f7f7f7; line-height:28px; font-family:Verdana;}
.nav-top-bg span a{color:#773b09;}
.nav-top-bg span a:hover{ background-color:#f7f7f7;color:#773b09;}
.nav-top { overflow:hidden;}
.i_logo{ margin-top: 3px;}
.back{float:right;display:block;width:80px;text-align:right;}
.more { color:#b19651;}
.more a{ color:#b19651;}
.more a:hover { color:#fff;}
.font-hide{
    text-indent: -999px;
    overflow: hidden;
}
/*container*/
.wraper{margin: 0 auto; width: 100%; background: #000 url(../../../images/static/citizen2021/bg.jpg) no-repeat center 0;}
.container{margin:0 auto; width: 1000px; }
.header{width: 100%; height: 500px; background: url(../../../images/static/citizen2021/header.jpg) no-repeat 0 0;}
.content{width: 100%; background: url(../../../images/static/citizen2021/ct.jpg) no-repeat 0 0px;}
/* title */
.tit{ background-image: url(../../../images/static/citizen2021/tit.png); background-repeat: no-repeat; height: 100px;}
.tit1{background-position: 0 0;}
.tit2{background-position: 0 -200px;}
.tit3{background-position: 0 -400px;}
.tit4{background-position: 0 -600px;}
.tit5{background-position: 0 -700px;}
/* 亮点 */
.light-point{
    padding-left: 20px;
    font-size: 16px;
}
.light-point span{
    position: relative;
    display: block;
    color: #cfdbed;
    font-size: 16px;
    padding-left: 20px;
}
.light-point span::before{
    position: absolute;
    left: 3px;
    top: -3px;
    content: ".";
    padding: 0 5px;
    font-size: 16px;
    font-weight: bold;
}
/* subtit */
.subtit{
    background-image: url(../../../images/static/citizen2021/tit.png);
}
.subtit1{
    left: 187px;
    top: 23px;
    background-position: 0 -1000px;
    width: 559px;
    height: 90px;
}
.subtit2{
    left: 2px;
    top: 15px;
    background-position: 0 -1100px;
    width: 705px;
    height: 100px;
}
.subtit3{
    left: 267px;
    top: 27px;
    background-position: 0 -1200px;
    width: 735px;
    height: 336px;
}
.subtit4{
    left: 2px;
    top: 21px;
    background-position: 0 -1600px;
    width: 655px;
    height: 90px;
}
/* header */
.header-watch{
    left: 78px;
    top: 55px;
    visibility: hidden;
}
.header-logo{
    width: 91px;
    height: 17px;
    background: url(../../../images/static/citizen2021/icon.png) no-repeat 0 -500px;
    left: 614px;
    top: 83px;
    visibility: hidden;
}
.header-title{
    left: 364px;
    top: 183px;
    visibility: hidden;
}
/* part1 */
.part1{width: 1000px;}
.part1-main{width: 1000px; height: 662px;}
.part1-bg{left: 0; top: 0; width: 857px; height: 480px; background: url(../../../images/static/citizen2021/part1-bg.png) no-repeat 47px -14px;}
.history{
    visibility: hidden;
}
.history-year{
    position: absolute;
    width: 100px;
    height: 33px;
    background-image: url(../../../images/static/citizen2021/icon.png);
    background-position: 0 0;
    background-repeat: no-repeat;
}
.history-intro{
    position: absolute;
    width: 400px;
}
.history-intro h6{
    font-size: 20px;
    color: #ffffff;
    line-height: 30px;
}
.history-intro h6 em{
    color: #ffe2c5;
}
.history-intro span{
    display: block;
    width: 100%;
    font-size: 12px;
    color: #cfdbed;
    text-align: justify;
}
.history-watch{
    position: absolute;

}

/* year */
.history-year1{
    left: 10px;
    top: 102px;
    background-position: 0 0;
}
.history-year2{
    left: 692px;
    top: 145px;
    background-position: 0 -100px;
}
.history-year3{
    left: 672px;
    top: 393px;
    background-position: 0 -200px;
}
/* intro */
.history-intro1{
    width: 260px;
    left: 0px;
    top: 168px;
}
.history-intro2{
    width: 275px;
    left: 512px;
    top: 197px;
}
.history-intro2 h6{
    text-align: right;
}
.history-intro3{
    width: 340px;
    left: 630px;
    top: 447px;
}
.history-intro4{
    width: 290px;
    left: 49px;
    top: 468px;
}
/* watch */
.history-watch1{
    left: 278px;
    top: 21px;
}
.history-watch2{
    left: 810px;
    top: 82px;
}

.history-watch3{
    left: 376px;
    top: 337px;
}
/* part2 */
.part2{width: 100%;}
.part2-intro{
    padding: 10px 0;
}
.part2-intro p{
    font-size: 14px;
    color: #cfdbed;
    text-align: center;
}
.part2-intro em{
    font-size: 20px;
    color: #ffe2c5;
}
/* .part2-main{
    background: rgba(0, 0, 0, 0.2);
} */
/* door */
.door-item{ left: 0; top: 0;  display: none;}
/* door-btn */
/* .door-nav{left: 776px; top: 429px;} */
.door-nav ul li{float: left; margin-right: 33px; width: 39px; height: 39px; background-image: url(../../../images/static/citizen2021/icon.png); font-size: 18px; line-height: 39px; text-align: center; color: #fff;}
.door-nav ul li.btn1{background-position: -100px -100px;}
.door-nav ul li.btn2{background-position: -150px -100px;}
.door-nav ul li.btn3{background-position: -200px -100px;}
.door-nav ul li.btn4{background-position: -250px -100px;}
.door-nav ul li.active{background-position: -100px -200px; color: #fff;}
/* one-door */
.one-door{width: 100%; height: 500px;}
.one-door-box{width: 100%; height: 500px;}
.one-door-item{width: 100%; height: 500px;}
.one-door-nav{left: 776px; top: 429px;}
.one-big-pic{
    border: 1px solid #fff;
    left: 0px;
    top: 125px;
}
.one-small-pic{
    left: 342px;
    top: 293px;
}
.one-watch{
    left: 640px;
    top: 37px;
}
.light-point1{
    width: 420px;
    left: 316px;
    top: 126px;
}
.description{
    width: 400px;
    padding: 10px 10px 10px 18px;
    color: #cfdbed;
    font-size: 16px;
    background-color: #263f5d;
    background-color: rgba(38, 63, 93, 0.5);
}
.description em{
    color: #ffdab4;
}
.description1{
    width: 342px;
    padding: 10px 0px 10px 18px;
    left: 343px;
    top: 407px;
}
.jiaodai{
    background-image: url(../../../images/static/citizen2021/icon.png);
    background-position: -100px 0;
    width: 29px;
    height: 29px;
}
.jiaodai1{
    left: 280px;
    top: 334px;
}
/* two-door */
.two-door{width: 100%; height: 450px;}
.two-door-box{width: 100%; height: 450px;}
.two-door-nav{left: 776px; top: 389px;}
.two-door-item{width: 100%; height: 450px;}
.two-big-pic{
    border: 1px solid #fff;
    width: 270px;
    height: 352px;
    right: 0px;
    top: 16px;
}
.two-watch{
    left: 520px;
    top: 110px;
}
.light-point2{
    width: 500px;
    left: -25px;
    top: 161px;
}
.description2{
    width: 472px;
    padding: 20px 10px 23px 18px;
    left: 0;
    top: 284px;
}
.jiaodai2{
    left: 714px;
    top: 89px;
}
/* three-door */
.three-door{width: 100%; height: 400px;}
.three-watch{
    left: 12px;
    top: 17px;
}
.three-video{
    left: 267px;
    top: 132px;
}
.light-point3{
    width: 310px;
    right: 0;
    top: 149px;
}
/* four */
.four-door{width: 100%; height: 495px;}
.door4-bg{left: 0; top: 170px;}
.four-door-box{width: 100%; height: 500px;}
.four-door-item{width: 100%; height: 500px;}
.four-door-nav{
    left: 210px;
    top: 367px;
}
.four-big-pic{
    border: 1px solid #fff;
    left: 718px;
    top: 10px;
}
.four-small-pic{
    left: 342px;
    top: 293px;
}
.four-watch{
    left: 502px;
    top: 50px;
}
.light-point4{
    width: 390px;
    left: -24px;
    top: 132px;
}
.description4{
    width: 242px;
    padding: 10px 10px 10px 18px;
    left: 207px;
    top: 254px;
}
/* part3 */
.part3{width: 100%; height: 885px;}
.appr_box{padding: 30px 0 0;}
.show{width: 739px; height: 494px; margin: 0 auto 40px; border: 1px solid #fff;}
.small-box{position: relative; width: 1000px; height: 134px; overflow: hidden;}
.small-scroll{position: absolute; left: 0; top: 0; width: 1000px; height: 134px; }
.small-scroll ul{width: 2040px; height: 134px; }
.small-scroll ul li{ float: left; width: 184px; height: 134px; margin-right: 20px; border: 1px solid #fff;  box-sizing: border-box; overflow: hidden;}
.small-scroll ul li.active{border:  1px solid #ffdab4;}
.bigPrev,.bigNext{
    width: 90px;
    height: 90px;
    background-image: url(../../../images/static/citizen2021/icon.png);
}
.bigPrev{
    background-position: 0 -250px;
    left: 0;
    top: 248px;
}

.bigNext{
    background-position: 100% -250px;
    right: 0;
    top: 248px;
}
/* part4 */
.part4-focus{width: 1000px; height: 500px;}
.product-wrap{width: 1000px; height: 500px; overflow: hidden;}
.product{width: 1000px; height: 500px;}
.product-item{ width: 1000px; height: 500px; display: none; box-sizing: border-box; padding-top: 30px;}
.product-watch-wrap{display: flex; justify-content: flex-start;}
.product-watch{ width: 25%; text-align: center;}
.product-pic{width: 100%; height: 322px;}
.product-title{color: #cfdbed; font-size: 14px;}
.product-link{width: 250px; left: 0; top: 0; height: 100%; }
.product-nav{left: 0; top: 426px; display: flex; justify-content: center; width: 1000px;}
.product-nav b{display: block; width: 27px; height: 8px; background-color: #7c858f; margin: 0 15px; border-radius: 4px; text-indent: -999px; overflow: hidden;}
.product-nav b.act{background-color: #fff;}
/* part5 */
.beyond{display: flex; justify-content: space-between;}
.beyond-item{width: 323px; padding-top: 24px;}
.beyond-pic{z-index: 0; width: 323px; height: 202px; overflow: hidden;}
.beyond-pic img{width: 100%;}
.beyond-title{position: relative; z-index: 1; margin: -20px auto 0; width: 250px; height: 55px; line-height: 55px; font-size: 24px; text-align: center; background: url(../../../images/static/citizen2021/icon.png) no-repeat 0 -400px; overflow: hidden;}
.beyond-intro{
    font-size: 12px;
    color: #cfdbed;
    padding: 10px 20px 18px;
    text-align: justify;
    line-height: 17px;
}

.dialog{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    background-color: rgb(0, 0, 0, 0.8);
    display: none;
}
.video{
    left: 50%;
    top: 50%;
    margin-left: -440px;
    margin-top: -230px;
}
.close{
    left: 50%;
    top: 50%;
    padding: 5px 15px;
    background-color: #333;
    margin-left: 445px;
    margin-top: -230px;
    color: #fff;
    font-size: 14px;
}

/* animate */
.one-watch img,
.two-watch img,
.three-watch img,
.four-watch img{
    transition: all 0.5s;
}
.one-watch:hover img,
.two-watch:hover img,
.three-watch:hover img,
.four-watch:hover img{
    transform: scale(1.06);
}


/*footer*/
.pubfooter {position: relative;clear:both; background-color: #000; margin-left:auto; margin-right:auto; font-size:12px;}
.footer {text-align:center;margin:0 auto;}
.copyright{text-align:center;line-height:52px;color:#999; }
.foot_top {font-size:12px;line-height:24px; color:#999; text-align:center; height:24px;padding-top:40px;}
.foot_top .gray0{ color:#999;}
.foot_top .wbfoot{ background:url(http://www.xbiao.com/images/index/v_xbiao.png) no-repeat 0 2px; *background-position:left center; padding-left:20px; }
.footline{ display: inline-block; height:24px; line-height:24px; font-size:12px; vertical-align:middle; margin:0 10px; color:#999; font-family:"Sim Sun"}
.foot_top a { color:#999; display:inline-block;}
.foot_top a:hover { background:none; color:#999;text-decoration:underline;}
.iphone_ico i,.android_ico i,.telphone_ico i{ background:url(../../../images/static/citizen2021/ico_phone.png) no-repeat -3px 0; display:inline-block;width:18px; height:20px;padding-right:5px; vertical-align:middle;margin-top:-4px;*margin-top:0;margin-left:2px; opacity:.8;filter:alpha(opacity=80);}
.android_ico i{ background-position:-1px -26px;width:21px; height:24px; line-height:24px;margin-left:13px;}
.telphone_ico i{ background-position:-6px -59px;width:11px; height:22px; line-height:22px;margin-left:12px;}
/*baidu share*/
.wrapShare{ height:28px;overflow:hidden; display:block; padding-right:20px;padding-left:20px;width:185px;float:left;}
.bdshare_t { vertical-align:middle;}
.wrapShare .bds_more{ background:url(http://www.xbiao.com/images/static/bojue/plusshare.png) no-repeat left center!important; padding-left:17px; line-height:16px;cursor:pointer; float:left; height:16px;}
.bdshare_t .bds_tsina,.bdshare_t .bds_qzone,.bdshare_t .bds_tqq,.bdshare_t .bds_renren,.bdshare_t .bds_douban,.bdshare_t .bds_weixin{ background-image:url(../../../images/static/citizen2021/ii.png); background-repeat:no-repeat;}
.bdshare_t .bds_tsina { background-position:1px -39px!important ;}
.bdshare_t .bds_tsina:hover { background-position:1px 0px!important ;}
.bdshare_t .bds_qzone { background-position:-43px -39px!important ;}
.bdshare_t .bds_qzone:hover { background-position:-43px 0px!important ;}
.bdshare_t .bds_tqq { background-position:-21px -39px!important ;}
.bdshare_t .bds_tqq:hover { background-position:-21px 0px!important ;}
.bdshare_t .bds_renren { background-position:-66px -39px!important ;}
.bdshare_t .bds_renren:hover { background-position:-66px 0px!important ;}
.bdshare_t .bds_douban { background-position:-88px -39px!important ;}
.bdshare_t .bds_douban:hover { background-position:-88px 0px!important ;}
.bdshare_t .bds_weixin { background-position:-111px -39px!important ;}
.bdshare_t .bds_weixin:hover { background-position:-111px 0px!important ;}