/*index-banner首页*/
.index-banner-bg {
  background: url("../images/index-banner10.png")no-repeat center center;
  background-size: cover;
  padding-top: 15.425%;
  min-height: 617px;
}
/*index-banner首页*/
.index-banner-bg-hw {
  background: url("../images/index-bannerhw.jpg")no-repeat center center;
  background-size: cover;
  padding-top: 15.425%;
  min-height: 617px;
}

/*index-info*/
.index-info {
  width: 100%;
  height: 550px;
  background-image: url("../images/index-info.png");
  background-size: 100% 100%;
}
.index-info-ul {
  width: 100%;
}
.index-info-ul .index-info-li {
  width: 588px;
  height: 463px;
}
.index-info-ul .index-info-li:hover {
  margin-top: -15px;
}
.index-info-li h3 {
  margin-top: 145px;
  text-align: center;
}
.index-info-li h3 em {
  padding: 2px 20px;
  color: #ffffff;
}
.index-info-li h3 span {
  color: #ffffff;
  vertical-align: 5px;
}
.index-info-li-1 {
  background-image: url("../images/index-info1.png");
  background-size: 100% 100%;
  margin-right: 24px;
}
.index-info-li-1 h3 em {
  background-color: #00afdd;
}
.index-info-li-2 {
  background-image: url("../images/index-info2.png");
  background-size: 100% 100%;
}
.index-info-li-2 h3 em {
  background-color: #ffce25;
}
.index-info-li-2 ul li em{
	float: left;
	width:19px;
	height:19px;
	text-align: center;
	line-height: 19px;
	margin:0 38px;
	font-size: 12px;
}
.index-info-li-2 .index-infor-icon{	
	color:#222;		
}
.index-info-li-2 .index-infor-iconnum{
	color:#fff;
	background:url(../images/index-num.png) no-repeat;
	background-size: 100% 100%;
}
.index-info-ul .index-info-li ul {
  margin-top: 40px;
  padding: 0 35px;
}
.index-info-ul .index-info-li ul li {
  width: 100%;
  margin-bottom: 11px;
  cursor: pointer;
}
.index-info-ul .index-info-li ul li p {
  width: 65%;
}
.index-info-ul .index-info-li ul li p:hover {
  color: #cca700;
  text-decoration: underline;
}

/*index-best*/
.index-best {
  position: relative;
  padding-top: 50px;
  height: 886px;
  background-image: url("../images/index-best.png");
  background-repeat: repeat-x;
}
.index-title {
  position: relative;
  margin-bottom: 40px;
  width: 100%;
  height: 98px;
  background-image: url("../images/index-best2.png");
  background-size: 100% 100%;
}
.index-title i {
  display: inline-block;
  position: absolute;
  right: 10px;
  top: 35px;;
  width: 40px;
  height: 40px;
  background-image: url("../images/index-best-arrow.png");
  background-position: 0 0;
  -webkit-transition: all .3s; /* For Safari 3.1 to 6.0 */
  transition: all .3s;
}
.index-title:hover i {
  background-position: 0 40px;
}
.index-best-bg {
  position: absolute;
  top: 200px;
  left: 50%;
  width: 1802px;
  height: 543px;
  margin-left: -900px;
  background-image: url("../images/index-best3.png");
  background-size: 100% 100%;
}

/*hot*/
.index-hot {
  padding-top: 50px;
  background-image: url("../images/index-hot.png");
  background-size: 100% 100%;
}
.index-hot-box {
  position: relative;
  border: 3px solid #222222;
  background-color: #fee739;
  border-radius: 20px;
  margin-top: 100px;
  margin-bottom: 50px;
}
.index-hot-bg {
  position: absolute;
  top: 250px;
  left: 50%;
  width: 1920px;
  height: 613px;
  margin-left: -960px;
  background-image: url("../images/index-hot5.png");
  background-size: 100% 100%;
}
.index-hot-title {
  background-image: url("../images/index-hot3.png");
  background-size: 100% 100%;
}
.index-hot-title-hw {
  background-image: url("../images/index-hot3-hw.png");
  background-size: 100% 100%;
}

/*page-library图书馆*/
.mainContainer {
  position: relative;
  padding: 120px 20px 0 30px  ;
}
.navContent li {
  position: relative;
  float: none;
  width: 212px;
  height: 60px;
  background-image: url("../images/library/library-btn.png");
  background-position: 0 0;
  text-align: center;
  line-height: 60px;
  color: #ffffff;
  font-size: 20px;
  margin-bottom: 40px;
  cursor: pointer;
}
.navContent li:hover,
.navContent li.library-nav-active {
  background-position: 0 60px;
}
.navContent li i {
  position: absolute;
  bottom: 0;
  left: -20px;
  display: inline-block;
  width: 75px;
  height: 75px;
  background-image: url("../images/library/library-icon.png");
}
.navContent li i.icon1 {
  background-position: 0 0;
}
.navContent li i.icon2 {
  background-position: 300px 0;
}
.navContent li i.icon3 {
  background-position: 200px 0;
}
.navContent li i.icon4 {
  background-position: 100px 0;
}
.containerBox {
  position: relative;
  width: 880px;
}
.containerBox .index-hot-ul {
  padding: 25px 0 10px 20px;
  margin-left: -2px;
  margin-bottom: 80px;
}
.containerBox .index-hot-ul li {
  margin-bottom: 0;
  cursor: pointer;
}
.library-condition {
  position: absolute;
  top: -65px;
  left: 0;
  z-index: 1;
  width: 100%;
}
.library-condition-item {
  position: relative;
  margin-right: 10px;
  width: 124px;
  height: 45px;
  background-image: url("../images/library/library-btn.png");
  background-position: -262px -50px;
  color: #ffffff;
  text-align: center;
  line-height: 45px;
  font-size: 14px;
}
.library-condition-item span {
  display: inline-block;
  width: 100%;
  height: 100%;
  color: #ffffff;
  cursor: pointer;
}
.library-condition-item2 {
  width: 124px;
  height: 45px;
  background-position: -262px -50px;
}
.library-condition-item i {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("../images/library/library-btn.png");
  background-position: -255px -109px;
}
.library-condition-down {
  display: none;
  position: absolute;
  top: 25px;
  left: 0;
  width: 100%;
  height: 0;
  padding: 15px 0;
  background-color: #f55d02;
  border-radius: 10px;
  z-index: -1;
  -webkit-transition: all .5s; /* For Safari 3.1 to 6.0 */
  transition: all .5s;
}
.library-condition-down li {
  float: none;
}
.library-condition-down li:hover {
  background-color: #f77d35;
}
.library-condition-item:hover .library-condition-down {
  display: block;
  height: auto;
}
.search-box {
  position: relative;
  padding: 0 15px;
  width: 250px;
  background-color: #ffffff;
  border-radius: 50px;
  overflow: hidden;
}
.search-box input {
  height: 40px;
  padding: 10px 0;
}
.search-box span {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-block;
  width: 64px;
  height: 40px;
  background-image: url("../images/library/library-btn.png");
  background-position: -315px -252px;
  cursor: pointer;
  border-radius: 0 20px 20px 0;
}

/*page-library-detail绘本详情*/
.page-library-detail .index-best-ul {
  position: relative;
}
.page-library-detail-intro {
  padding: 20px 0;
}
.page-library-detail-intro .index-hot-img {
  width: 257px;
  height: 320px;
}
.page-library-detail-intro .index-hot-text {
  padding-left: 40px;
  width: 800px;
}
.page-library-detail-intro .index-hot-text ul.star {
  padding: 10px 0;
}
.index-hot-text ul.book {
  padding: 10px 0;
}
ul.book li span {
  color: #666666;
  margin-right: 10px;
  margin-bottom: 5px;
}
.page-library-detail-intro .index-hot-text p {
  padding: 5px 0;
  color: #222222;
  font-size: 14px;
}
.library-icon li {
  text-align: center;
  margin-right: 10px;
  font-size: 13px;
}
.library-icon li i {
  margin: 0 auto;
  display: block;
  width: 70px;
  height: 70px;
  background-image: url("../images/library/library-detail-icon.png");
}
.detail-icon1 {
  background-position: 0 0;
}
.detail-icon2 {
   background-position: -70px 0;
 }
.detail-icon3 {
  background-position: -140px 0;
}
.detail-icon4 {
  background-position: -210px 0;
}
.detail-icon5 {
  background-position: -280px 0;
}
.page-library-detail .yellow-bg {
  margin: 30px;
  padding: 10px 30px;
}
.page-library-detail .index-best-ul {
  top: 0;
}
.page-library-detail .index-best-ul li {
  width: 257px;
}
.page-library-detail h6 {
  padding: 20px 50px 30px 0;
}
.page-library-detail h6:before {
  display: inline-block;
  content: "movie";
  color: transparent;
  width: 30px;
  height: 30px;
  background-image: url("../images/library/library-detail.png");
  background-position: -30px 0;
  padding-right: 10px;
  vertical-align: 5px;
}

/*播放页面*/
.page-library-play {
  background-color: #40c7ff;
}
.page-play-banner {
  position: relative;
  width: 1200px;
  height: 274px;
  margin: 0 auto;
  z-index: 2;
}
/*左边*/
.page-library-play .mainContainer {
  padding: 0 0 150px;
}
.page-library-play .navContent li {
  text-align: center;
}
.page-library-play .navContent li i {
  position: relative;
  display: block;
  width: 75px;
  height: 65px;
  background-image: url("../images/library/library-detail-icon.png");
}
.page-library-play .detail-icon1 {
  background-position: 0 -70px;
}
.page-library-play .detail-icon2 {
  background-position: -70px -70px;
}
.page-library-play .detail-icon3 {
  background-position: -140px -70px;
}
.page-library-play .detail-icon4 {
  background-position: -210px -70px;
}
.page-library-play .detail-icon5 {
  background-position: -280px -70px;
}
.page-library-play .play-nav-left .navContent {
  position: relative;
  width: 136px;
  height: 100%;
  margin-top: 30px;
  margin-left: 30px;
  overflow: hidden;
}
.page-library-play .navContent li {
  width: 138px;
  height: 108px;
  position: relative;
  background-image: none;
  margin-bottom: 5px;
}
.page-library-play .navContent li div {
  position: absolute;
  top: -5px;
  left: 100%;
  width: 138px;
  height: 108px;
  background: url(../images/library/play-icon-hover.png) no-repeat 100% 100%;
  background-size: cover;
}
.page-library-play .navContent li:hover div,
.page-library-play .navContent li.library-nav-active div {
  left: 0;
}
.play-nav-left {
  position: relative;
  width: 200px;
  height: 620px;
  background: url(../images/library/play-icon.png) no-repeat;
  background-size: cover;
  margin-left: -32px;
}
.page-library-play .navContent li i {
  left: 18px;
  margin-top: 5px;
}
.page-library-play .play-nav-right .navContent li i {
  left: 41px;
  margin-top: 5px;
}
.page-library-play .play-nav-right .navContent li em {
  left: 8px;
}
.page-library-play .navContent li em {
  position: absolute;
  bottom: 0;
  left: -16px;
  width: 100%;
  font-size: 14px;
  color: #222222;
}
.page-library-play .navContent li:hover em,
.page-library-play .navContent li.library-nav-active em {
  color: #ffffff;
}



/*右边*/
.play-nav-right {
  position: absolute;
  right: -35px;
  top: 0;
  width: 200px;
  height: 620px;
  background: url(../images/library/play-icon1.png) no-repeat;
}
.play-nav-right-tab {
  background: url(../images/library/play-icon0.png) no-repeat;
}
.play-nav-right .navContent {
  margin-top: 35px;
  margin-left: 40px;
}
.page-library-play .play-nav-right .navContent li:hover em,
.page-library-play .play-nav-right .navContent li.library-nav-active em {
  color: #222222;
}
.page-library-play .detail-icon6 {
  background-position: -350px -70px;
}
.page-library-play .detail-icon7 {
  background-position: -420px -70px;
}
.page-library-play .detail-icon8 {
  background-position: -490px -70px;
}
.page-library-play .detail-icon9 {
  background-position: -560px -70px;
}
.page-library-play .detail-icon10 {
  background-position: -628px -70px;
}


/*中间*/
.play-content-middle {
  position: absolute;
  top: -40px;
  left: 68px;
  width: 1062px;
  height: 681px;
  background: url(../images/library/play-bg.png) no-repeat 100% 100%;
  background-size: cover;
}
.play-middle-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 1062px;
  height: 681px;
  background: url(../images/library/play-bg.png) no-repeat 100% 100%;
  background-size: cover;
  z-index: 1;
  padding: 67px 40px;
}

/*play1*/
.play1 {
  width: 100%;
  height: 100%;
}
.play1 img {
  object-fit: fill;
}

/*play2*/
.play2 {
  width: 100%;
  height: 100%;
}
.play2 video {
  width: 100%;
  height: auto;
}

/*play3*/
.play3 {
  position: relative;
  padding-top: 35px;
  width: 100%;
  height: 100%;
  background: url(../images/library/play-bg-test.png) no-repeat 100% 100%;
  background-size: cover;
}
/*切换*/
.play3 .play-test-bg {
  margin: 0 auto;
  width: 382px;
  height: 57px;
  text-align: center;
  background-image: url(../images/library/play-test-title.png);
  background-position: 0 -63px;
}
.play3 .play-test-bg2 {
  background-image: url(../images/library/play-test-title.png);
  background-position: 0 0;
}
.play-test-tab {
  
}
.play-test-tab li {
  display: inline-block;
  line-height: 57px;
  font-size: 20px;
  text-align: center;
}
.play-test-bg .play-test-title1 {
  width: 50%;
  color: #f55d02;
}
.play-test-bg .play-test-title2 {
  width: 50%;
  color: #ffffff;
}
.play-test-bg2 .play-test-title1{
  color: #ffffff;
}
.play-test-bg2 .play-test-title2{
  color: #f55d02;
}
/*内容*/
.play-test-content {
  position: absolute;
  top: 40%;
  left: 0;
  width: 100%;
  height: 300px;
}
.play-test-content .question {
  padding: 0 50px;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
}
.play-test-content .play-test-btn {
  position: absolute;
  bottom: 0;
  left: 240px;
}
.play-test-content .play-test-btn li {
  position: relative;
  width: 212px;
  height: 60px;
  background-image: url("../images/library/library-btn.png");
  background-position: 0 0;
  text-align: center;
  line-height: 60px;
  color: #ffffff;
  font-size: 18px;
  cursor: pointer;
  margin: 0 20px;
}

/*play4*/
.play4 {
  position: relative;
  padding-top: 35px;
  width: 100%;
  height: 100%;
  background: url(../images/library/play-bg-read.png) no-repeat 100% 100%;
  background-size: cover;
}
.play4 .play4-ul {
  padding: 0 40px;
  margin-top: 10px;
  height: 490px;
  overflow-y: scroll;
}
.play4 .cm-pull-left {
  margin-right: 5%;
  width: 55%;
}
.cm-pull-left li{
  margin-bottom: 60px;
}
.cm-pull-left p {
  margin-top: 30px;
}
.play4 .cm-pull-right {
  width: 40%;
}
.play4-right-ul {
  margin-top: 60px;
}
.play4-right-ul li {
  float: none;
  margin-bottom: 20px;
  width: 100%;
}
.play4-right-ul .percentage {

}
.play4-right-ul li em {
  display: inline-block;
  width: 75px;
  text-align: right;
  float: left;
}
.play4-right-ul .percentage {
  float: left;
  width: 250px;
}
.play4-right-ul li span {
  margin-left: 20px;
  border: 1px solid #222222;
  width: 250px;
  height: 15px;
  background-color: #ee8a07;
  vertical-align: -3px;
}

/*play5*/
.play5-title {
  margin: 10px auto;
  width: 209px;
  height: 44px;
}
.play5 .play4-left-ul {
  margin: 50px 150px 0 200px;
  padding: 0 50px;
  overflow-y: scroll;
  height: 350px;
}