/*
  author:qtGao
  date:2014.12
*/
/*  Reset  */
html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,cite,code,del,em,img,q,small,strong,sub,sup,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend { margin:0; padding:0; border:0; font-size:100%;}
body { background:#fff; color:#000; font:12px/1.25 "simsun", "arial", sans-serif; text-align:left;}
ol,ul { list-style:none;}
cite,em,i,strong,th,h1,h2,h3,h4,h5,h6 { font-style:normal; font-weight:normal;}
input,textarea,select,button,td { font-size:100%;}
table { border-collapse:collapse; border-spacing:0;}
caption,th { text-align:left;}
sup,sub { font-size:100%; vertical-align:baseline;}
a { color:#6b6b6b; text-decoration:none;}
a:hover { color:#f00; text-decoration:none;}

/**
  * @name  :common
  * @type  :Base
  * @date  :14.12
  */

.clearfix:after,.mod-hd:after,.mod-bd:after { content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clearfix,.mod-hd,.mod-bd {*zoom:1;}

.bg-op50-black { filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#99000000', endColorstr='#99000000');}
:root .bg-op50-black {filter:none; background-color:rgba(0,0,0,0.5);}

.bg-op60-black { filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#99000000', endColorstr='#99000000');}
:root .bg-op60-black {filter:none; background-color:rgba(0,0,0,0.6);}

.bg-op80-black { filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#CC000000', endColorstr='#CC000000');}
:root .bg-op80-black {filter:none; background-color:rgba(0,0,0,0.8);}

.bg-op20-white { filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#99000000', endColorstr='#99000000');}
:root .bg-op20-white { filter:none; background-color:rgba(0,0,0,0.5);}

.blur { filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */}
:root .blur {display: none; /* IE9+, Firefox, Chrome, Opera - hidden */ filter: none; /* no IE9 */}


/**
  * @name  :custom
  * @type  :Block
  * @date  :14.12
  */
.home-page { height:100%; background:url("../img/2014nzpd_banner.jpg") center top #07010f no-repeat;}
.home-page .content { height:100%;}
.home-page .content .tit { padding-top:32%; width:100%; text-align:center; margin:0 auto; background:url("../img/banner_pic1.png") no-repeat; background-size: 100% auto;}
.home-page .content .tit img { max-width:100%; max-height:100%;}
.home-page .content h1,
.home-page .content p { position:absolute; left:-9999em;}

.home-page .items01 { margin-right:80px;}
.home-page .items02 { margin-right:79px;}
.home-page .items03 { margin-right:80px;}

.nav { position:relative; bottom:-120%;}
.nav-lst { width:700px; height:234px; margin:0 auto; overflow:hidden; background:url("../img/pic_bg.png") center top no-repeat;}
.nav-lst a { display:block; width:115px; height:137px; line-height:220em; overflow:hidden; float:left;}
.nav-sub { height:100px; margin-top:-36px;}
.nav-sub a { display:block; width:38px; height:38px; padding:6px; margin:0 auto;}
.nav-sub a img {-webkit-animation:bobble 2s infinite; animation:bobble 2s infinite;}

.container { height:100%; overflow:hidden; position:relative;}
.container .hide-tit { line-height:220px; overflow:hidden;}

.top-nav { width:100%; position:fixed; top:0; color:#fff; background-color:rgba(75,71,88,0.6); z-index:99;}
.top-nav ul { /*width:920px;*/ width:760px; height:56px; margin:0 auto; overflow:hidden;}
.top-nav li { float:left; line-height:56px; margin-right:12px;}
.top-nav li a:hover,
.top-nav li.active a { background-color:#222222;}
/*
.top-nav li a.tn02:hover,
.top-nav li.active a.tn02 { background-color:#f14bae;}
.top-nav li a.tn03:hover,
.top-nav li.active a.tn03 { background-color:#07d3ff;}
.top-nav li a.tn04:hover,
.top-nav li.active a.tn04 { background-color:#ffd52c;}
*/
.top-nav a { display:inline-block; padding:0 20px; font:20px/56px "Microsoft YaHei"; color:#fff;}
.top-nav a:hover { color:#fff;}
.top-nav a strong { font-size:26px; margin-right:10px;}
.top-nav a.tn00 strong { margin-right:0;}
.top-nav-int { /*width:52%; margin:0 auto;*/}

.wrapper {
  height:100%;
}
.js-page-slider {
  position:relative;
  overflow:hidden;
}
.sect-character {
  height:920px;
  padding-top: 1px;
  background-color: #000;
  background-size: 100% auto;
  -webkit-transition: background-image 0.2s ease-in-out;
  -moz-transition: background-image 0.2s ease-in-out;
  -ms-transition: background-image 0.2s ease-in-out;
  -o-transition: background-image 0.2s ease-in-out;
  transition: background-image 0.2s ease-in-out;
}
.sect-character .content { 
  width:100%; 
  height:100%;
}

.character-bg {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.character-bg .scroll-body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.character-bg .cells-wrap {
  height: 100%;
  width: 10000%;
}
.character-bg ul {
  float: left;
  height: 100%;
}
.character-bg ul li {
  float: left;
  height: 100%;
  text-align: center;
}

.character-bg .bg-cell {
  height: 100%;
  float: left;
  position: relative;
  background-size: 100% auto;
  background-repeat: no-repeat;
  text-align: center;
}
.character-bg .bg-cells img {
  max-width: 100%;
  /*max-height: 100%;*/
}
.character-bg .bg-cells-l li {
  overflow:hidden;

}
.character-bg .bg-cells-l li i {
  display:block;
  margin-left:-100%;
}
.character-bg .bg-cells-l li img {
  /*max-height:100%;*/
  max-width:100%;
}
.character-bg .bg-cells-r li i {
  display:block;
}
.character-bg .bg-cells-r li img {
  /*max-height:100%;*/
  max-width:100%;  
}

.character-bg .imgbox {
  display: block;
  width: 100%;
  height: 100%;
}
.character-bg .overlayer-ll {
  width: 25%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  right: auto;
  bottom: 0;
  z-index: 5;
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 80%, transparent 100%);
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 80%, transparent 100%);
  background: -o-linear-gradient(left, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 80%, transparent 100%);
  background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 80%, transparent 100%);
  background: -linear-gradient(left, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 80%, transparent 100%);
}
.character-bg .overlayer-rr {
  width: 25%;
  height: 100%;
  position: absolute;
  left: auto;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  background: -webkit-linear-gradient(left, transparent 0%, rgba(0, 0, 0, 0.8) 20%, rgba(0, 0, 0, 0.8) 100%);
  background: -moz-linear-gradient(left, transparent 0%, rgba(0, 0, 0, 0.8) 20%, rgba(0, 0, 0, 0.8) 100%);
  background: -o-linear-gradient(left, transparent 0%, rgba(0, 0, 0, 0.8) 20%, rgba(0, 0, 0, 0.8) 100%);
  background: -ms-linear-gradient(left, transparent 0%, rgba(0, 0, 0, 0.8) 20%, rgba(0, 0, 0, 0.8) 100%);
  background: -linear-gradient(left, transparent 0%, rgba(0, 0, 0, 0.8) 20%, rgba(0, 0, 0, 0.8) 100%);
}


.character-bg .overlayer {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}
.character-switch .panels .panel {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
}
.character-switch .panels .on {
  opacity: 1;
  z-index: 20;
}
.character-switch .tabs ul {
  font-size: 0;
}
.character-switch .tabs li {
  float: left;
  _display: inline;
  vertical-align: bottom;
  margin: 0 1px;
  width: 75px;
  height: 75px;
  position: relative;
  font-size: 12px;
  overflow: hidden;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.character-switch .tabs li canvas {
  display:none;
}

.character-switch .tabs .tx {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: table-cell;
  text-align: center;
  opacity: 0;
  _width: 75px;
  _height: 75px;
}
.character-switch .tabs .tx-in {
  display:none;
}
.character-switch .tabs .tx-in a,
.character-switch .tabs .tx-in a:visited,
.character-switch .tabs .tx-in a:hover {
  color: #f9f9f9;
}
.character-switch .tabs h3 {
  font-size: 16px;
  color: #f9f9f9;
  font-family: "MicroSoft YaHei", SimSun, sans-serif;
}
.character-switch .tabs i {
  position:absolute;
  left:0;
  top:0;  
  width: 0;
  height: 75px;
  display: block;
  overflow:hidden;
  font-family: "MicroSoft YaHei", SimSun, sans-serif;
}

.character-switch .tabs li.not-open:hover,
.character-switch .tabs li.not-open:hover img {
  border:0;
  margin-top:0;
  width:75px;
  height:75px;
}
.character-switch .tabs li.not-open,
.character-switch .tabs li.not-open canvas {
  display:block;
}
.character-switch .tabs li.not-open .tx {
  opacity:1;
  width:75px;
  height:75px;
}
.character-switch .tabs li.not-open .bg-op60-black {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
}
.character-switch .tabs li.not-open i {
  cursor:default;
  color:#fff;
  width:100%;
  line-height:75px;
} 

.character-switch .tabs li:hover,
.character-switch .tabs .on {
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -ms-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
  margin-top: -45px;
  width: 108px;
  height: 108px;
  position: relative;
  border: #666 solid 6px;
  cursor:pointer;
}
.character-switch .tabs li:hover {
  border-color:#333;
}
.character-switch .tabs li:hover img,
.character-switch .tabs .on img {
  width: 108px;
  height: 108px;
}
.character-switch .tabs li:hover .tx,
.character-switch .tabs .on .tx {
  opacity: 1;
}
.character-switch .tabs .on .bg-op60-black {
  width:100%;
  height:24px;
  position:absolute;
  left:0;
  bottom:0;
}
.character-switch .tabs .on .tx-in {
  display:block;
  position:absolute;
  left:0;
  bottom:2px;
  width:100%;
  text-align:center;
}
.character-switch .tabs .on i {
  display:none;
}

.character-scroll {
  width: 100%;
  height: 95px;
  z-index: 30;
  position: absolute;
  left: auto;
  top: auto;
  right: 0;
  bottom: 0;
}
.character-scroll .scroll-in {
  width: 52%;
  height: 120px;
  margin: -34px auto 0;
  position: relative;
}
.character-scroll .scroll-body {
  width: 738px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  *zoom: 1;
}
.character-scroll .scroll-prev,
.character-scroll .scroll-next {
  width: 36px;
  height: 60px;
  position: absolute;
  bottom: 7px;
}
.character-scroll .scroll-prev {
  left: -80px;
  background: url(http://img1.cache.netease.com/f2e/media/grand_ceremony_1/images/ico_prev1.png) no-repeat center;
}
.character-scroll .scroll-next {
  right: -80px;
  background: url(http://img1.cache.netease.com/f2e/media/grand_ceremony_1/images/ico_next1.png) no-repeat center;
}
.character-scroll .scroll-items {
  width: 1000%;
  height: 75px;
  padding-top: 45px;
}
.character-scroll .scroll-items ul {
  width: 1000%;
}

/**/
.tabs-arrow { width:50%; margin:0 auto; position:relative; z-index:20; display:none;}
.tabs-arrow a { display:block; width:30px; height:57px; background:url("../img/tabs_arrow.png") no-repeat;}
.tabs-arrow a.tabs-arrow-prev { position:absolute; left:-50px; top:340px;}
.tabs-arrow a.tabs-arrow-next { position:absolute; right:-50px; top:340px; background-position:right top;}

/**/
.character-fellow { width:52%; margin:0 auto; position:relative; left:0; top:72px; z-index:90;}
.character-fellow .bshare-custom { position:absolute; right:-6px; top:85px;}
.character-fellow .bshare-custom a { display:block !important; margin-bottom:8px;}

.bdshare-trigger { position:absolute; left:49%;}
.bdshare-trigger-btn { width:34px; height:34px; cursor:pointer; float:left; margin-right:12px; background:url("../img/d2ico_fx.png") -4px -4px no-repeat;}

.bdsharebuttonbox { display:none; width:200px; padding-top:4px;}

/**/
.char-tier { width:52%; margin:0 auto; height:100%; padding-top:80px; position:relative; z-index:40; background:url("../img/d2_contents_repy.png") repeat;}
.char-tier-img { width:44%; padding-left:3%; float:left;}
.char-tier-img img { display:block; max-width:100%;}

.char-tier-con { width:47%; float:right; margin-top:22px; margin-right:4%;}
.char-tier-con-hd { width:100%; overflow:hidden; padding:12px 0 16px; border-bottom:1px solid #000;}
.char-tier-con-hd .name { display:inline-block; font:38px/40px "MicroSoft YaHei"; float:left;}
.char-tier-con-bd { padding:20px 0 0 6px;}

.vote-lst { width:118px; float:left; margin-left:12px;}
.vote-lst-items { display:inline-block; width:46px; padding:0 4px; color:#000;}
.vote-lst-items span { display:block; text-align:center; font:14px/100% "MicroSoft YaHei";}
.vote-lst-items .ico-zan { display:inline-block; width:46px; height:25px; background:url("../img/d2ico_zan.png") no-repeat;}
.vote-lst-items .ico-cai { display:inline-block; width:46px; height:25px; background:url("../img/d2ico_cai.png") no-repeat;}

.vote-text { padding-top:10px; font:14px/100% "MicroSoft YaHei"; color:#fff;}
.vote-text strong { color:#36c8af;}
.vote-text a { color:red;}
.vote-text a.text-more em { display:none;}

.vote-video { float:right;}
.vote-video .ico-video { display:inline-block; padding-left:49px; font:20px/42px "MicroSoft YaHei"; color:#000; cursor:pointer; background:url("../img/d2ico_play.gif") no-repeat;}

.cont-tag { font:14px/38px "MicroSoft YaHei";}
.cont-tag strong { font-size:16px; display:inline-block; width:58px; text-indent:7px; background:url("../img/d2ico_em.png") left center no-repeat;}
.cont-tag span { line-height:26px;}
.cont-tag strong.ana { width:auto; line-height:30px; background:url("../img/d2ico_em.png") left 3px no-repeat;}
.cont-tag strong.ana em { margin-right:12px; line-height:38px;}
.cont-tag strong.ana span { font-size:14px; line-height:14px; padding:20px 10px; word-wrap:break-word; word-break:normal;}
.cont-text { padding-top:16px;}
.cont-text { font:14px/26px "MicroSoft YaHei";}
.cont-text strong { display:block; font-size:18px; line-height:34px;}

.complete-wrap { overflow:hidden;}
.complete-wrap .char-tier-con-bd { /*width:340px;*/}

/**/
.sect-charquiz { position:absolute; right:23%; top:72px; z-index:30; display:block;}
.sect-charquiz-bd { width:157px; position:absolute; right:-157px; top:0;}
.sect-charquiz-bd h3 { padding:6px 0; font:20px/34px "MicroSoft YaHei"; color:#fff;}

.charquiz-tit { font:24px/32px "MicroSoft YaHei"; color:#fff;}
.charquiz-tit strong { display:block; color:#0bbe9d; font-size:36px; background:url("../img/icon07.png") 80px center no-repeat;}

.charquiz-tag { width:170px; padding-top:6px;}
.charquiz-tag div { width:100%; overflow:hidden;}
.charquiz-tag span { display:inline-block; width:74px; font:12px/23px "MicroSoft YaHei"; float:left; margin:0 9px 9px 0; background-color:#f0f0f0; text-align:center;}

.charquiz-judge span { display:block; margin-bottom:10px; font:16px/30px "MicroSoft YaHei"; color:#333; text-align:center; padding-right:33px; cursor:pointer; background:url("../img/ico_charquiz.png") right -1px no-repeat;}
.charquiz-judge span:hover { -webkit-box-shadow: #0bbe9d 0px 0px 4px; -moz-box-shadow: #0bbe9d 0px 0px 4px; box-shadow: #0bbe9d 0px 0px 4px; background-color:#95abb0;}
.charquiz-judge span.items01 { background-color:#dedede;}
.charquiz-judge span.items02 { background-color:#dedede;}
.charquiz-judge span.items03 { background-color:#dedede;}
.charquiz-judge span.items04 { background-color:#dedede;}

.charquiz-result { /*padding-top:8px;*/}
.charquiz-result span { display:block; font:24px/60px "MicroSoft YaHei"; color:#fff; background-color:#95abb0; text-align:center;}

.result-scale { padding-top:12px;}
.result-scale span { display:block; font:24px/60px "MicroSoft YaHei"; color:#fff; background-color:#95abb0; text-align:center;}

.result-text { padding-top:12px;}
.result-text span { display:block; padding:10px 12px; font:14px/24px "MicroSoft YaHei"; color:#fff; background-color:#95abb0;}
.result-text-btn { width:100%; padding-top:10px; overflow:hidden;}
.result-text-btn a { display:inline-block; padding:0 12px; font:16px/30px "MicroSoft YaHei"; color:#fff; background-color:#95abb0;}
.result-text-btn a.fellow { float:left;}
.result-text-btn a.reload { float:right;}

.hide-result { display:none;}
.hide-fellow { display:none;}
.hide-fellow .bdsharebuttonbox { display:block;}

/**/
.character-videos { display:none; z-index:998; position:absolute; left:0; top:0; right:0; bottom:0;}
.character-videos .dialog-box { position:absolute; left:50%; top:50%; right:0; bottom:0; margin:-225px 0 0 -360px; width:720px; height:450px; z-index:999;}
.character-videos .dialog-box p { background-color:#ccc; text-align:center; font:16px/40px "MicroSoft YaHei";}
.character-videos .dialog-box object { display:block;}

.character-teletext { display:none; z-index:998; position:absolute; left:0; top:0; right:0; bottom:0;}
.character-teletext .dialog-box { position:absolute; left:50%; top:50%; right:0; bottom:0; margin:-306px 0 0 -330px; width:660px; height:612px; z-index:999; background-color:#ededed;}
.character-teletext .t-img { width:380px; padding:20px; float:left;}
.character-teletext .t-txt { padding:20px 20px 20px 0; font:12px/24px "MicroSoft YaHei";}
.character-teletext .t-video { text-align:right; margin-top:12px; display:block; font:20px/42px "MicroSoft YaHei"; color:#0bbe9d; cursor:pointer; background:url("../img/ico_play.png") 508px top no-repeat;}
.character-teletext .no-img {width:500px; height:360px !important; margin:-180px 0 0 -250px !important;}
.character-teletext .no-img .t-txt { padding:20px; height:320px; overflow-y:auto; font-size:14px;}
.character-teletext .no-img .t-video { margin-top:24px; background-position:328px top;}

.dialog-show { width:100%; height:100%;}
.dialog-mask { position:absolute; left:0; top:0; right:0; bottom:0; z-index:998; background-color:rgba(0,0,0,.8);}
.dialog-close { position:absolute; left:auto; top:0; right:-44px; bottom:auto; width:44px; height:44px; cursor:pointer; background: url("../img/ico_close_btn.png") no-repeat 0 0;}

.answer-dialog .dialog-box { width:157px; margin:0; background:none; top:298px; left:auto; right:23%;}
.answer-dialog .dialog-show { width:149px; height:142px; border:4px solid #95abb0; position:absolute; right:-157px; background-color:#fff;}
.answer-dialog .dialog-close { width:80px; height:25px; text-align:center; font:16px/25px "MicroSoft YaHei"; background:#95abb0; position:absolute; left:196px; top:98px; color:#fff; z-index:1;}
.answer-dialog .bg-op60-black { filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#CC000000', endColorstr='#CC000000');}
:root .answer-dialog .bg-op60-black { filter:none; background-color:rgba(0,0,0,0.8);}

.right-txt { padding-top:30px; text-align:center; font:16px/20px "MicroSoft YaHei"; color:#95abb0;}
.error-txt { text-align:center; font:16px/40px "MicroSoft YaHei"; color:#95abb0;}
.error-answer { padding-top:8px; font:16px/20px "MicroSoft YaHei"; color:#000; text-align:center;}

/* bobble */
@-webkit-keyframes bobble {
    0% {
    transform: translate3d(0px, 40px, 0px);
    animation-timing-function: ease-in;
    }
    50% {
    transform: translate3d(0px, 50px, 0px);
    animation-timing-function: ease-out;
    }
    100% {
    transform: translate3d(0px, 40px, 0px);
    animation-timing-function: ease-in;
    }
}

@keyframes bobble {
    0% {
    transform: translate3d(0px, 40px, 0px);
    animation-timing-function: ease-in;
    }
    50% {
    transform: translate3d(0px, 50px, 0px);
    animation-timing-function: ease-out;
    }
    100% {
    transform: translate3d(0px, 40px, 0px);
    animation-timing-function: ease-in;
    }
}
#darenwu .complete-wrap { height:540px;}
#xiaorenwu .complete-wrap { height:540px;}
#xiaorenwu .character-scroll .scroll-body { width:661px;}
#qunxiang .complete-wrap { height:540px;}
#qunxiang .character-scroll .scroll-body { width:366px;}
#qunxiang .complete-wrap .char-tier-con-bd { width:340px;}
#zhi .character-scroll .scroll-body { width:518px;}
#zhi .complete-wrap { height:540px;}