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"; }
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%;   z-index: 2;  position: relative;}
.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!important;; }
.cover{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

/*top*/

.nav-top-bg,.nav-top{ position: relative;background:#f7f7f7; line-height:28px; font-family:Verdana; z-index: 999}
.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;}
.bg {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  }

/*  banner   */
.banner { position: relative; min-width: 1000px;}
.bannerbg {width: 100%; height: auto;}
.banneritem { position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 0;vertical-align: top;}
.banneritem img{ position: absolute;}
.banneritem .bannertitle { position: absolute; width: 50%; height: 27.13%; z-index: 2; 
/* width: 960px;height: 273px;*/}
.banneritem .bannertitle i { position: absolute; display: block; }
.bannertitle_01 { width: 16.56%; left: 0; top: 0;animation:opacityShow 0.4s 4.0s both; }
.bannertitle_02 { width: 15.2%; left: 16.56%; top: 0; animation:opacityShow 0.4s 4.4s both;}
.bannertitle_03 { width: 68.24%; right: 0; top: 0; animation:opacityShow 0.4s 4.8s both;}
.bannertitle_04 { width: 68.24%; right: 0; top: 42.85%; animation:opacityShow 0.4s 5.2s both;}
.bannertitle_05 { width: 68.24%; right: 0; top: 46.15%; animation:opacityShow 0.4s 5.6s both;}
.bannertitle_06 { width: 100%; left: 0; bottom: 0; animation:opacityShow 0.4s 6.0s both;}
.banner_share { position: absolute; left: 50%; bottom: 33.3%;animation:opacityShow 0.4s 6.2s both;}
.share_weibo { position: top:15; left: -60px; width: 39px;height: 39px; background: url(../../../images/static/chanel_j12/weibo_ico.png); cursor: pointer;}
.share_weibo .bdsharebuttonbox{ width: 100%; height: 100%;}
.share_weibo a { width: 100%!important; height: 100%!important; padding: 0; margin:0!important; display: block; background: none;opacity:0!important;}
.share_weibo a:hover { opacity:0!important;}
.share_weibo:hover i { position: absolute; top: 50px; right: 30px; width: 125px;height: 24px;background: url(../../../images/static/chanel_j12/weibo_hover.png)}
.share_wechat { position: top:15; left: 21px;  width: 39px;height: 39px; background: url(../../../images/static/chanel_j12/wechat_ico.png); cursor: pointer;}
.share_wechat:hover i { position: absolute; top: 42px; left: 4px; width: 148px;height: 175px;background: url(../../../images/static/chanel_j12/wechat_hover.png)}
.banneritem>img:first-child{width: 25%; animation:opacityShow 0.2s both;}
.banneritem>img:nth-child(2){width: 25%; animation:opacityShow 0.4s 0.4s both;}
.banneritem>img:nth-child(3){width: 25%; animation:opacityShow 0.4s 0.8s both;}
.banneritem>img:nth-child(4){width: 25%; animation:opacityShow 0.4s 1.2s both;}
.banneritem>img:nth-child(5){width: 25%; animation:opacityShow 0.4s 1.6s both;}
.banneritem>img:nth-child(6){width: 25%; animation:opacityShow 0.4s 2.0s both;}
.banneritem>img:nth-child(7){width: 25%; animation:opacityShow 0.4s 2.4s both;}
.banneritem>img:nth-child(8){width: 25%; animation:opacityShow 0.4s 2.8s both;}
.banneritem>img:nth-child(9){width: 25%; animation:opacityShow 0.4s 3.2s both;}
.banneritem>img:nth-child(10){width: 25%; animation:opacityShow 0.4s 3.6s both;}
.banneritem .bannertitle{animation:opacityShow 0.4s 4.0s both;}
/* part1 */
.part1 { height:2440px; padding-top: 117px; background: url(../../../images/static/chanel_j12/part1bg.jpg) center top;}
.title_j12 { position: relative; width: 1000px;height: 50px; background: url(../../../images/static/chanel_j12/title_j12.png) ;}
.title_j12 i{ position: absolute; width: 16px; height: 16px;background: url(../../../images/static/chanel_j12/title_o.png);}
.o_left {left: 270px; top: 18px;animation:oLeft 5s both infinite alternate;}
.o_right { right: 270px;top: 18px;animation:oRight 5s both infinite alternate;}
.timeline{ width: 100%;}
.timeline_cen { position: absolute; width:1px; height: 1693px; background-color: white; left: 50%; top: 186px;}
.timeline_year{ position: absolute; width: 100%; left: 0; top: 186px;}
.timeline_year li {}
.timeline_year li p {opacity: 0;position: absolute;}
.timeline_year li .run p { opacity:1;}
.timeline_year li img {transform: scale(1);}
.timeline_year li a:hover img{ transition: transform 0.5s; transform: scale(1.1);}
.timeline_year li em { position: absolute; width: 16px;height: 16px;background: url(../../../images/static/chanel_j12/year_o.png); animation: point 1s both infinite alternate;}
.run .left-to-right {animation:left-to-right 1s both;}
.run .right-to-left {animation:right-to-left 1s both;}
.run .top-to-bottom {animation:top-to-bottom 1s both;}
.run .bottom-to-top {animation:bottom-to-top 1s both;}
.year2000{left: 496px; top: -46px; width: 411px; height: 239px; background: url(../../../images/static/chanel_j12/2000.png);}
.year2000img {position: absolute; left: -57px; top: -23px;}
.year2000 em {left: 32px; top: 0;}
.year2003{left:83px; top: 92px; width: 423px; height: 184px; background: url(../../../images/static/chanel_j12/2003.png);}
.year2003img {position: absolute; left: 169px; top: 57px;}
.year2003 em {left: 364px; top: 84px;}
.year2007{left:496px; top: 363px; width: 450px; height: 216px; background: url(../../../images/static/chanel_j12/2007.png);}
.year2007img {position: absolute; left: 240px; top: 60px;}
.year2007 em {left: 437px; top: 95px;}
.year2008{left:27px; top: 495px; width: 479px; height: 437px; background: url(../../../images/static/chanel_j12/2008.png);}
.year2008img {position: absolute; left: -20px; top: 68px;}
.year2008 em {left: 120px; top: 143px;}
.year2010{left:496px; top: 803px; width: 411px; height: 210px; background: url(../../../images/static/chanel_j12/2010.png);}
.year2010img {position: absolute; left: -59px; top:-26px;}
.year2010 em {left: 34px; top: 7px;}
.year2010-2{left:42px; top: 1082px; width: 464px; height: 359px; background: url(../../../images/static/chanel_j12/2010-2.png);}
.year2010-2img {position: absolute; left: 205px; top: 10px;}
.year2010-2 em {left: 290px; top: 8px;}
.year2017{left:496px; top:1239px; width: 411px; height: 238px; background: url(../../../images/static/chanel_j12/2017.png);}
.year2017img {position: absolute; left: 244px; top:52px;}
.year2017 em {left: 446px; top: 83px;}
.year2018{left:85px; top: 1569px; width: 421px; height: 297px; background: url(../../../images/static/chanel_j12/2018.png);}
.year2018img {position: absolute; left: -145px; top: -14px;}
.year2018 em {left: 55px; top: -5px;}
.year2019{left:495px; top: 1642px; width: 471px; height: 412px; background: url(../../../images/static/chanel_j12/2019.png);}
.year2019img {position: absolute; left: 14px; top:4px;}
.year2019 em {left: 166px; top: 83px;}

/* part2 */
.part2 { height:1155px; padding-top: 45px; background-color: white;}
.title_j12_2 { position: relative; width: 1000px;height: 105px; background: url(../../../images/static/chanel_j12/title_j12_2.png) ;}
.title_j12_2 i{ position: absolute; top: 49px; width: 16px; height: 16px;background: url(../../../images/static/chanel_j12/title_o_2.png);}
.part2info { margin: 40px auto 0; width: 903px; font-size: 14px; text-align: center; line-height: 28px;}
.part2info a{ color: #b0b0b0; border-bottom: 1px solid #b0b0b0;}
.part2watch {width: 100%;}
.watchbg { width: 831px;height: 831px;position: absolute; left: 86px; top: 50px; background: url(../../../images/static/chanel_j12/p2_roundbox.png); background-size: cover;}
.watch_around { position: absolute; left: 43px; top: 65px; width: 1006px; height: 1006px;background:url(../../../images/static/chanel_j12/watch_round.png);animation:watchAround 60s linear both infinite; }
.editor {position: absolute; left: 1px; top: 1px;height: 829px; width: 829px; border-radius:50%; z-index: 5; background: white; overflow: hidden;}
.prevnext{ top: 50%; left: -86px; width: 1000px;height: 118px;margin-top:-59px; }
.prevnext .prev{ position: absolute; left: 15px; top: 15px; width:50px;height: 100px; background:url(../../../images/static/chanel_j12/prevnext.png);}
.prevnext .next{ position: absolute; right: 15px; top: 15px; width:50px;height: 100px; background:url(../../../images/static/chanel_j12/prevnext.png) right center;}
.watch_cont { overflow: hidden; width: 829px; height: 829px;}
.watch_cont li{ display: none; position: absolute; top:0; left:0;width: 829px;height: 829px; border-radius: 50%; overflow: hidden;}

.part3 { padding-top: 80px; background: black;}
.part3 .wrapper {height:967px;}
.title_j12_3 { position: relative; width: 1000px;height: 95px; background: url(../../../images/static/chanel_j12/title_j12_3.png) ;}
.title_j12_3 i{ position: absolute; top: 42px; width: 16px; height: 16px;background: url(../../../images/static/chanel_j12/title_o.png);}
.part3info { margin: 40px auto 0; color:#fff; width: 903px; font-size: 14px; text-align: center; line-height: 28px;}
.part3info a{ color: #b0b0b0; border-bottom: 1px solid #b0b0b0;}
.part3_tab {margin-top:90px;}
.part3_tab_head {left:30px; top: 30px; padding-top:116px; z-index: 2;}
.part3_tab_head li {margin-bottom: 37px; cursor:pointer;position: relative; }
.part3_tab_head li.act i{ position: absolute; width: 82px;height: 72px;background: url(../../../images/static/chanel_j12/part3_tab_act.png);}
.part3_tab_head li img{ cursor: pointer;}
.part3_tab_head::before{ content: ''; position: absolute; top: 0px; left:35px;width: 2px; height: 94px; background-color: white;}
.part3_tab_head::after{ content: ''; position: absolute; top: 430px; left:35px;width: 2px; height: 94px; background-color: white;}

.tab_cont_1 {display: none; position: absolute; left: 0; top: 0; width: 1000px;height: 630px;background:url(../../../images/static/chanel_j12/liuwenbg.png) no-repeat; background-position: 153px 77px;}
.tab_liuwen_p1{ position: absolute; left: 132px; top:49px; width: 242px;height: 383px; background:url(../../../images/static/chanel_j12/liuwen_p1_bdr.png); }
.tab_liuwen_p1 img{ margin: 6px 3px;}
.tab_liuwen_p2 {position: absolute; left:326px;top: 146px;}
.tab_liuwen_p3 {position: absolute; left:422px;top: 360px; width: 155px;height: 176px; background-color: white;}
.tab1_cont_1_pos {position: absolute; left: 572px;top: -2px;}
.tab1_topline{width: 416px;height: 19px;background:url(../../../images/static/chanel_j12/liuwen_topline.png);}
.tab1_btmline{width: 416px;height: 19px;background:url(../../../images/static/chanel_j12/liuwen_btmline.png);}
.tab1_videobox {width: 416px; height: 290px; background: white; margin: 10px auto;}
.tab1_videobox i,.tab1_videobox .vjs-big-play-button { position: absolute; top: 50%;left: 50%;margin-top:-28px;margin-left: -28px; width: 56px;height: 57px;background:url(../../../images/static/chanel_j12/liuwen_play.png); cursor: pointer; border:none;}
.tab1_info { position: absolute; left: 595px;top: 365px;}
.tab1_info h3{ padding-left: 22px;}
.tab1_info p{width: 353px;margin-top: 10px; font-size:14px; line-height: 24px; color:white;padding: 20px 22px; border-top:1px solid white;border-bottom:1px solid white; }

.tab_cont_2 { display: none;position: absolute; left: 0; top: 0; width: 1000px;height: 630px;background:url(../../../images/static/chanel_j12/chenbg.png) no-repeat; background-position: 260px 60px;}
.tab_chen_p1{ position: absolute; left: 126px; top:23px; width: 276px;height: 450px;}
.tab_chen_p2{ position: absolute; left: 310px; top:168px;}

.tab_cont_3{ display: none; position: absolute; left: 40px; top: -30px; width: 1119px;height: 630px;background:url(../../../images/static/chanel_j12/tab3bg.png);}
.tab3_cont_3_pos { position: absolute; left: 255px;top: 10px;}
.tab3_topline {width: 534px;height: 24px;background:url(../../../images/static/chanel_j12/tab3_topline.png); }
.tab3_btmline {width: 537px;height: 24px;background:url(../../../images/static/chanel_j12/tab3_btmline.png); }
.tab3_videobox {width: 533px; height: 371px; background: white; margin: 10px auto;}
.tab3_videobox i,.tab3_videobox .vjs-big-play-button { position: absolute; top: 50%;left: 50%;margin-top:-37px;margin-left: -37px; width: 73px;height: 74px;background:url(../../../images/static/chanel_j12/tab3_play.png); cursor: pointer;border:none;}
.tab3_info { position: absolute; left: 187px;top: 467px;}
.tab3_info h3{ padding-left: 22px;}
.tab3_info p{width: 618px;margin-top: 10px; font-size:14px; line-height: 24px; color:white;padding: 10px 22px; border-top:1px solid white;border-bottom:1px solid white; }

.part4{ height: 858px;margin-top: 20px;background:url(../../../images/static/chanel_j12/part4bg.png) center -60px black;}
.part4_cont { position: absolute; top: 0; left:-30px; width: 1100px; height: 764px;}
.part4_cont dl { position: absolute;}
.p1{left:316px; top: 0px;}
.p2{left:578px; top: 6px;}
.p2 dd { padding-top: 20px;}
.p3{left:831px; top: 85px;}
.p3 dd { padding-top: 30px;}
.p4{left:831px; top: 301px;}
.p4 dd { padding-top: 20px;}
.p5{left:831px; top: 508px;}
.p5 dd { padding-top: 35px;}
.p6{left:563px; top: 563px;}
.p6 dd { padding-top: 20px;}
.p7{left:315px; top: 563px;}
.p7 dd { padding-top: 20px;}
.p8{left:33px; top: 518px;}
.p8 dd { padding-top: 30px;}
.p9{left:0px; top: 278px;}
.p9 dd { padding-top: 40px;}
.p10{left:36px; top: 64px;}
.p11{left:316px; top: 199px;}
.p11 i,.part4_cont .vjs-big-play-button{position: absolute; left:50%;top:50%;width:76px; height: 77px; margin-left: -38px; margin-top: -38px; background:url(../../../images/static/chanel_j12/p4_play.png);cursor:pointer; border:none; }

.p11 i a { display: block; height: 100%;}
.part4_cont dd{ display: none; position: absolute; left: 0; top: 0; width: 100%;height: 100%; background-color: rgba(0,0,0,0.6);}
.part4_cont dl { overflow: hidden;}
.part4_cont dl:hover dd { display: block;}
.part4_cont dl.p11:hover dd{display: none;}
.part4_cont dd h4 { margin-top: 5px; font-size: 16px; color: white; overflow: visible; padding-left: 11px; position: relative;}
.part4_cont dd h4 i { position: absolute; left: 10px; bottom:-10px; width: 94px; height: 2px; background-color: white;}
.part4_cont dd p {font-size: 14px; line-height: 21px; color: white;padding-left: 11px; padding-right:10px; margin-top: 15px;}

/*footer*/

.pubfooter {position: relative;clear:both; margin-left:auto; margin-right:auto; font-size:12px;background: #000;}
.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/chanel_j12/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/chanel_j12/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 ;}

.video-js .vjs-big-play-button .vjs-icon-placeholder:before, .video-js .vjs-play-control .vjs-icon-play:before{ content: "";}
.video-js .vjs-big-play-button .vjs-icon-placeholder:hover{ background-color: none;}
.video-js .vjs-big-play-button { border-radius:50%;}
.video-js { background-color: white;}
@keyframes right-to-left {
    0%{
        transform: translate(1500px);
    }
    100%{
        transform: translate(0);
    }
}
@keyframes left-to-right {
    0%{
        transform: translate(-1500px);
    }
    100%{
        transform: translate(0);
    }
}
@keyframes top-left {
    0%{
        transform: translate(-300px,-500px);
    }
    100%{
        transform: translate(0,0);
    }
}
@keyframes top-to-bottom {
    0%{
        transform: translate(0,-200px);
    }
    100%{
        transform: translate(0,0);
    }
}
@keyframes bottom-to-top {
    0%{
        transform: translate(0,200px);
    }
    100%{
        transform: translate(0,0);
    }
}
@keyframes opacityShow {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes oLeft {
  0%{
      transform: translate(0,0);
  }
  100%{
      transform: translate(-200px,0);
  }
}
@keyframes oRight {
  0%{
      transform: translate(0,0);
  }
  100%{
      transform: translate(200px,0);
  }
}

@keyframes watchAround {
  0%{
      transform:rotate(0deg);
  }
  100%{
      transform:rotate(360deg);
  }
}

@keyframes point {
  0%{
      transform:scale(0.8);
      opacity:0.8;
  }
  100%{
      transform:scale(1.2);
      opacity:1;
  }
}