/* UN home css */
/**
 * common
 * --------------------------------------------------------*/
.birthWrap,
.area,
.cloud,
.graph,
.wall,
.quWrap {
  padding: 50px 0; }

.fieldWrap,
.graph,
.quWrap,
.poster-main {
  width: 1200px;
  margin-left: auto;
  margin-right: auto; }

/**
 * birth
 * --------------------------------------------------------*/
.gall {
  height: 500px; }

.poster-main {
  position: relative; }
.poster-main poster-nav
a,
.poster-main img {
  display: block; }

/* gall images */
.poster-item,
.poster-itemTit {
  position: absolute;
  left: 0px;
  overflow: hidden; }

.poster-item {
  top: 0px; }

.poster-itemTit {
  right: 0;
  bottom: 0;
  z-index: 1;
  line-height: 48px;
  padding: 0 20px;
  background: rgba(0, 0, 0, 0.5);
  font-size: 16px;
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden; }

.poster-in-item {
  background: rgba(233, 52, 52, 0.8);
  width: 100%;
  height: 234px;
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  overflow: hidden; }
.poster-in-item .course-show {
  display: block;
  padding: 30px; }
.poster-in-item .course-show li {
  display: block;
  line-height: 22px;
  font-size: 10px;
  color: #fff; }

.sli-1:hover .show-1 {
  display: block; }

.sli-2:hover .show-2 {
  display: block; }

.sli-3:hover .show-3 {
  display: block; }

.sli-4:hover .show-4 {
  display: block; }

.sli-5:hover .show-5 {
  display: block; }

.sli-6:hover .show-6 {
  display: block; }

.sli-7:hover .show-7 {
  display: block; }

.sli-8:hover .show-8 {
  display: block; }

.sli-9:hover .show-9 {
  display: block; }

.sli-10:hover .show-10 {
  display: block; }

.sli-11:hover .show-11 {
  display: block; }

.sli-12:hover .show-12 {
  display: block; }

.sli-13:hover .show-13 {
  display: block; }

.sli-14:hover .show-14 {
  display: block; }

.sli-15:hover .show-15 {
  display: block; }

.course-show2 li {
  float: left;
  display: block;
  width: 33%;
  text-align: center; }

.course-show3 li {
  float: left;
  display: block;
  width: 50%;
  text-align: center; }

/* gall nav */
.poster-nav-box {
  margin-top: 40px;
  position: relative; }

.poster-nav {
  display: inline-block;
  cursor: pointer;
  line-height: 20px;
  text-align: center;
  font-size: 15px;
  color: #e36f70;
  opacity: 0.7;
  filter: alpha(opacity=70);
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  padding: 0 16px;
  margin-bottom: 40px;
  position: relative; }

.poster-nav.poster-nav-active {
  color: #d71518;
  opacity: 1;
  filter: alpha(opacity=100); }

.posterIco {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-image: url(../images/homeSprite.png);
  background-repeat: no-repeat; }

.posterIco1 {
  background-position: 0px -150px; }

.poster-nav-active .posterIco1 {
  background-position: 0px -200px; }

.posterIco2 {
  background-position: -50px -150px; }

.poster-nav-active .posterIco2 {
  background-position: -50px -200px; }

.posterIco3 {
  background-position: -100px -150px; }

.poster-nav-active .posterIco3 {
  background-position: -100px -200px; }

.posterIco4 {
  background-position: -150px -150px; }

.poster-nav-active .posterIco4 {
  background-position: -150px -200px; }

.posterIco5 {
  background-position: -200px -150px; }

.poster-nav-active .posterIco5 {
  background-position: -200px -200px; }

.posterIco6 {
  background-position: -250px -150px; }

.poster-nav-active .posterIco6 {
  background-position: -250px -200px; }

.posterIco7 {
  background-position: -300px -150px; }

.poster-nav-active .posterIco7 {
  background-position: -300px -200px; }

.posterIco8 {
  background-position: -350px -150px; }

.poster-nav-active .posterIco8 {
  background-position: -350px -200px; }

.posterIco9 {
  background-position: -400px -150px; }

.poster-nav-active .posterIco9 {
  background-position: -400px -200px; }

.posterIco10 {
  background-position: -450px -150px; }

.poster-nav-active .posterIco10 {
  background-position: -450px -200px; }

.posterIco11 {
  background-position: -500px -150px; }

.poster-nav-active .posterIco11 {
  background-position: -500px -200px; }

.posterIco12 {
  background-position: -550px -150px; }

.poster-nav-active .posterIco12 {
  background-position: -550px -200px; }

.posterIco13 {
  background-position: -600px -150px; }

.poster-nav-active .posterIco13 {
  background-position: -600px -200px; }

.posterIco14 {
  background-position: -650px -150px; }

.poster-nav-active .posterIco14 {
  background-position: -650px -200px; }

.posterIco15 {
  background-position: -700px -150px; }

.poster-nav-active .posterIco15 {
  background-position: -700px -200px; }

.posterLine {
  position: absolute;
  left: 60px;
  right: 60px;
  top: 20px;
  z-index: -1; }

.posterLine-li {
  float: left;
  width: 6.66667%;
  text-align: center; }

.posterLine span {
  display: inline-block;
  width: 50px;
  height: 2px;
  background: #5269aa;
  opacity: 0.5;
  filter: alpha(opacity=50); }

.poster-btn {
  display: none; }

.poster-line {
  display: block;
  width: 24px;
  height: 1px;
  background: #cbc2c2;
  position: absolute; }

.poster-rl1 {
  bottom: 9px;
  right: -14px; }

/**
 * field
 * --------------------------------------------------------*/
.field {
  background: #32343a url(../images/un/areaBg.png) center top repeat; }
.field .priTit {
  color: #fff; }
.field .priTit-line {
  background: #ffcc53; }

/* areas */
.area-li {
  float: left;
  width: 20%;
  text-align: center; }

.areaListWrap {
  margin: 0 28px; }

.areaImg {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px; }

.areaImg,
.areaImg img {
  width: 140px;
  height: 140px;
  border-radius: 70px; }

.areaTit {
  margin-bottom: 10px; }

.areaName {
  font-size: 18px;
  font-weight: 600; }

.areaLine {
  display: block;
  margin: 5px 0;
  width: 30px;
  height: 2px;
  margin-left: auto;
  margin-right: auto; }

.areaSpell {
  text-transform: uppercase;
  font-size: 12px;
  color: #fff;
  opacity: 0.2;
  filter: alpha(opacity=20); }

.areaTxt {
  height: 60px;
  margin-bottom: 15px;
  line-height: 20px;
  font-size: 14px;
  color: #fff;
  opacity: 0.5;
  filter: alpha(opacity=50);
  overflow: hidden;
  text-align: center; }

.areaBtn {
  width: 96px;
  display: inline-block;
  line-height: 26px;
  border: 2px #e09d1f solid;
  border-radius: 0;
  font-size: 14px;
  color: #e09d1f;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s; }
.areaBtn:hover {
  background: #e09d1f;
  color: #fff;
  -webkit-box-shadow: 0 10px 20px rgba(224, 157, 31, 0.2);
  box-shadow: 0 10px 20px rgba(224, 157, 31, 0.2); }

.area1 .areaName {
  color: #5269aa; }
.area1 .areaLine {
  background: #5269aa; }

.area2 .areaName {
  color: #d71518; }
.area2 .areaLine {
  background: #d71518; }

.area3 .areaName {
  color: #39a0ed; }
.area3 .areaLine {
  background: #39a0ed; }

.area4 .areaName {
  color: #13c4a3; }
.area4 .areaLine {
  background: #13c4a3; }

.area5 .areaName {
  color: #e09d1f; }
.area5 .areaLine {
  background: #e09d1f; }

/* cloud */
.cloud-book {
  position: relative;
  height: 742px;
  margin-top: -120px;
  margin-bottom: 20px;
  background: url(../images/un/cloud.png) center top no-repeat;
  text-align: center; }

.cloud-titWrap {
  position: absolute;
  right: 10%;
  bottom: 140px;
  left: 10%; }

.cloud-titLi {
  float: left;
  width: 50%; }

.cloud-tit {
  display: inline-block;
  padding: 0 20px;
  line-height: 44px;
  border-radius: 22px;
  font-weight: 500;
  font-size: 22px;
  color: #fff; }

.cloudUN {
  background: #5269aa;
  -webkit-box-shadow: 0 10px 25px rgba(82, 105, 170, 0.2);
  box-shadow: 0 10px 25px rgba(82, 105, 170, 0.2); }

.cloudDM {
  background: #e09d1f;
  -webkit-box-shadow: 0 10px 25px rgba(224, 157, 31, 0.2);
  box-shadow: 0 10px 25px rgba(224, 157, 31, 0.2); }

/**
 * team
 * --------------------------------------------------------*/
.team {
  background: #5269aa url(../images/un/teamBg.png) center top no-repeat; }
.team .priTit {
  color: #fff; }
.team .priTit span {
  color: #ffcc53; }
.team .priTit-line {
  background: #ffcc53; }

/* graph */
.graph-li {
  float: left;
  width: 25%;
  text-align: center; }

.graphImg {
  width: 240px;
  height: 196px;
  margin-left: auto;
  margin-right: auto;
  background-image: url(../images/un/graph.png);
  background-repeat: no-repeat; }

.graphImg1 {
  background-position: 0px 0; }

.graphImg2 {
  background-position: -240px 0; }

.graphImg3 {
  background-position: -480px 0; }

.graphImg4 {
  background-position: -720px 0; }

.graphTit {
  display: inline-block;
  margin: 20px 0;
  padding: 0 10px;
  line-height: 28px;
  background: #2d3a62;
  font-size: 16px;
  color: #fff;
  opacity: 0.7;
  filter: alpha(opacity=70); }

.graphCon {
  line-height: 40px;
  font-weight: 500;
  font-size: 20px;
  color: #fff; }
.graphCon span {
  margin: 0 8px;
  font-family: SimHei;
  font-weight: 600;
  font-size: 48px;
  color: #ffcc53;
  vertical-align: middle; }
.graphCon span i {
  font-style: normal;
  font-size: 36px; }

/* wall */
.wall .botMore {
  border-color: #fff;
  color: #fff; }
.wall .botMore:hover {
  background: #fff;
  color: #5269aa; }

.img-lg,
.img-lg img {
  width: 292px;
  height: 443px; }

.img-md,
.img-md img {
  width: 292px;
  height: 292px; }

.img-wd,
.img-wd img {
  width: 292px;
  height: 141px; }

.img-tall,
.img-tall img {
  width: 141px;
  height: 292px; }

.img-sm,
.img-sm img {
  width: 141px;
  height: 141px; }

.wallWrap {
  position: relative;
  left: 50%;
  width: 2124px;
  height: 463px;
  margin-left: -1062px; }

.wallCol {
  position: absolute;
  top: 0; }

.wallCol1 {
  width: 161px;
  left: 0; }

.wallCol2 {
  width: 312px;
  left: 151px; }

.wallCol3 {
  width: 614px;
  left: 453px; }

.wallCol4 {
  width: 312px;
  right: 755px; }

.wallCol5 {
  width: 161px;
  right: 604px; }

.wallCol6 {
  width: 312px;
  right: 302px; }

.wallCol7 {
  width: 312px;
  right: 0; }

.wallCol div {
  position: relative;
  float: left;
  padding: 10px;
  margin: -5px;
  cursor: pointer;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s; }

.wallCol div:hover {
  background: #ffcc53;
  z-index: 10;
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.6); }

/**
 * qualifications
 * --------------------------------------------------------*/
.qu .priTit span {
  margin: 0 8px;
  font-weight: bold;
  font-size: 48px;
  color: #e09d1f;
  vertical-align: -3px; }
.qu .priTit-line {
  background: #e09d1f; }

/* award */
.award {
  position: relative;
  height: 403px;
  margin-bottom: 40px; }

.award-li {
  position: absolute;
  width: 220px;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s; }

.award1 {
  top: 116px;
  left: 10px;
  z-index: 1; }

.award2 {
  top: 0;
  left: 174px; }

.award3 {
  top: 83px;
  left: 374px;
  z-index: 2; }

.award4 {
  top: 160px;
  left: 504px; }

.award5 {
  top: 67px;
  right: 342px;
  z-index: 2; }

.award6 {
  top: 39px;
  right: 168px;
  z-index: 3; }

.award7 {
  top: 153px;
  right: 0;
  z-index: 4; }

.awardWrap {
  position: relative;
  display: inline-block;
  -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  cursor: pointer; }
.awardWrap img {
  width: 100%;
  height: auto; }

.awardCover,
.awardMask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s; }

.awardCover {
  z-index: 2; }
.awardCover i {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -29px 0 0 -29px;
  width: 58px;
  height: 58px;
  line-height: 58px;
  font-size: 58px;
  vertical-align: middle;
  color: #fff; }

.awardMask {
  z-index: 1;
  background: #444; }

.award-li:hover {
  z-index: 4; }
.award-li:hover .awardCover {
  opacity: 1;
  filter: alpha(opacity=100); }
.award-li:hover .awardMask {
  opacity: 0.5;
  filter: alpha(opacity=50); }

.awardTit {
  text-align: center;
  font-weight: bolder;
  font-size: 18px;
  color: #444; }

.awardView {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999999;
  background: rgba(0, 0, 0, 0.8);
  display: none; }

.awardShut {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 15px;
  border-radius: 50%;
  color: #fff; }
.awardShut i {
  width: 20px;
  height: 20px;
  line-height: 20px;
  font-size: 20px;
  vertical-align: middle; }
.awardShut:hover {
  background: rgba(255, 255, 255, 0.2); }

.awardView-img {
  width: 80%;
  margin: 40px auto; }
.awardView-img img {
  width: 100%;
  height: auto; }