*{

  padding: 0;

  margin: 0;

}

.maptop10{ margin-top: 10px; }

.maptop20{ margin-top: 20px; }

.maptop30{ margin-top: 30px; }

.maptop40{ margin-top: 40px; }

.maptop50{ margin-top: 50px; }

body {

  font-family: "Microsoft YaHei","PingFang SC", "Helvetica Neue", sans-serif;

}

/* bigbanner */

.bigbanner{

  position: relative;

  height: 100%;

  width: 100%;

	overflow: hidden;

}

.banner-top{

  position: absolute;

	top: 0;

  width: 100%;

  height: 100%;

	box-sizing: border-box;

  margin: auto;

  z-index: 1;

	display: flex;

	justify-content: center;

  align-items: center;

}

.banner-top img{

  object-fit: contain;

  height: 100%;

  width: 100%;

}



.header-canvas-bg{

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 670px;

}





/* nav */

.nav{

  background-color: #505151;

  display: flex;

  list-style: none;

  justify-content: center;

}

.nav a{

  font-size: 18px;

  padding: 0 47px;

  font-weight: bold;

  line-height: 60px;

  color: #fff;

  text-decoration:none



}



.main{

  max-width: 1200px;

  margin-left: auto;

  margin-right: auto;

}

.tab-bg{

  background: url(../images/tab_bg.jpg) no-repeat;

  background-position: top;

}



/* smallScale */

.smallScale{

  text-align: center;

}

.smallScale h1{

  color: #008baf;

  margin-top: 60px;

  margin-bottom: 20px;

}



.title{

  text-align: center;

  padding: 50px 0 30px 0;

  vertical-align: middle;

}

.title span{

  font-size: 20px;

  color: #777;

  display: block;

}

.title span img{

  margin-right: 10px;

  vertical-align: middle;

}

.title strong{

  font-size: 48px;

  letter-spacing: 5px ;

  margin-top: 20px;

}



/* tab */

.mask {

  display:none;

  position: absolute;

  top:0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, .4) 

}

.hided:hover .mask{

  display: block;

}

.mask p{

  margin-top: 150px;

  color: #fff;

  text-align: center;

  line-height: 50px;

}

.tab{

  display: flex;

  justify-content: space-between;

}

.tab img{

  /* width: 100%; */

  height: 100%;

  object-fit: contain;

  vertical-align: middle;

}

.tab-content{

  width: 70%;

}

.hided{

  position: relative;

}

.tab-con-btn{

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 50px;

  background-color: rgba(48, 48, 48, 0.708);

  display: flex;

  justify-content: center;

  align-items: center;

}

.tab-con-btn a{

  color: #fff;

  border: 1px solid #ccc;

  margin-left: 10px;

  padding: 2px 10px;

  border-radius: 4px;

  text-decoration: none;

  font-size: 14px;

  transition: all .5s;

}

.tab-con-btn a:hover{

  color: #008baf;

  background-color: #fff;

}

.tab-bar{

  margin-left: 20px;

  /* width: calc(30% - 20px); */

  flex: 1;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}

.tab-bar > div{

  position: relative;

  /* margin-bottom: 10px; */

}

.tab-bar p{

  position: absolute;

  bottom: 0;

  left: 0;

  width: 77%;

  color: #fff;

  text-align: center;

  font-size: 12px;

  padding: 4px 6px;

  background-color: rgba(48, 48, 48, 0.708);

  box-sizing: border-box;

}



/* shuffling */

.exhibitors-bg{

  background: url(../images/live_bg1.jpg) no-repeat #111e48;

  background-position: bottom;

  background-size: 100%;

}

.shuffling{

  position: relative;

}

.slideContent{

  width: 1120px;

  margin: auto;

}

.slideContent ul{

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  width: 100%;

  transition: all 1s;

  opacity: 0;

  box-sizing: border-box;

  

}

.slideContent li{

  list-style: none;

  width: 32.5%;

  height: 242px;

  box-sizing: border-box;

  margin-bottom: 10px;

  background-image: linear-gradient(to bottom, #008baf, rgb(255, 254, 176));

  transition: all .1s;

}

.slideContent li img{

  width: 100%;

  object-fit: cover;

  vertical-align: middle;

}

.slideContent li:hover{

  /* height: calc(32.5% - 12px); */

  padding: 6px;

}



.shuffling > a{

  position: absolute;

  left: 0;

  top: 50%;

  transform: translateY(-50%);

  background-color: #008baf;

  /* background-image: linear-gradient(to right,#ccc,#aaa); */

}

.shuffling > a.right{

  left: auto;

  right: 0;

}



.news{

  display: flex;

  flex-wrap: wrap;

  max-width: 1200px;

  margin-left: auto;

  margin-right: auto;

  /* margin-top: -480px; */

  padding: 30px;

  box-sizing: border-box;

}

.news a{

  width: 50%;

  padding-top: 10px;

  padding-bottom: 10px;

  text-decoration: none;

  color: #333;

  font-size: 16px;

  line-height: 30px;

  vertical-align: middle;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}

.news a::before{

  content: '·';

  font-size: 24px;

  color: #008baf;

  font-weight: bold;

  margin-right: 4px;

  box-sizing: border-box;

}

.news a:hover{

  font-weight: bold;

}

.news span{

  vertical-align: middle;

  line-height: 30px;

}

/* live */

.kele-con{display: block;}

.kele-con-l, .kele-con-r{padding-bottom: 10px;	width: 100%;}

.kele-table span{font-size: 14px;}

.kele-con{

	display: flex;

	justify-content: space-between;

	padding-top: 10px;

}

.kele-con-l,

.kele-con-r{

	width: 49%;

	background-color: #f4f4f4;

}

.kele-con img{

	width: 100%;

}

.kele-table{

	display: table;

	margin: 10px auto;

}

.kele-table a{

	display: table-row;

	color: #008baf;

	background-image: url(https://sh.cippe.com.cn/public/images/2023play.png);

	background-size: 18px;

	background-position: right 8px;

	background-repeat: no-repeat;

	user-select: none;

	text-decoration: none;

 

}

.kele-table a:hover{

	color: #ff840c;

	background-image: url(https://sh.cippe.com.cn/public/images/2023playActive.png);

	text-decoration: dashed;

}

.kele-table span{

	padding: 6px 24px 6px 0;

	display: table-cell;

	font-size: 18px;

}

.live-scale{

  position: relative;

  overflow: hidden;

}

.live-mask{

  opacity: 0;

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

  background: url(https://e.cippe.com.cn/tpl/default/live/images/playicon.png) no-repeat;

  background-size: 50px;

  background-position: center;

  backface-visibility: hidden;

  transition: all .5s;

}

.live-scale:hover img{

  transform: scale(1.2);

}

.live-scale:hover .live-mask{

  opacity: 1;

}

.live{

  display: flex;

  justify-content: space-between;

}

.live img{

  width: 100%;

  vertical-align: middle;

  transition: all .5s;

  border: 2px solid #008baf;

  box-sizing: border-box;

}

.live-left{

  width: 40%;

}

.live-left > div{

  overflow: hidden;

}



.live-left-btnSet{

  display: flex;

  justify-content: space-around;

  padding: 5px;

  background-color: #008baf;

}

.live-left-btnSet a{

  width: 48%;

  padding: 4px;

  line-height: 1.5;

  color: white;

  background-color: #69d9ec;

  border-radius: 5px;

  text-align: center;

  box-sizing: border-box;

  text-decoration: none;

  transition: all .5s;

}

.live-left-btnSet a:hover{

  color: #333;

  background-color: #fff100;

}

.live-right{

  flex: 1;

  margin-left: 14px;

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

}

.live-right a{

  text-decoration: none;

  vertical-align: middle;

  margin-bottom: 18px;

}

.live-right dd{

  background-color: #008baf;

  font-weight: bold;

  color: white;

  font-size: 14px;

  padding: 6px 8px;

  line-height: 2;

}

.live-right .time{

  font-size: 12px;

}



/* innovation-medal */

.innovation-medal-bg{

  background: url(../images/goldMedal_bg.jpg) no-repeat ;

  background-size: 100% 100%;

}

.innovation-medal{

  display: flex;

}

.innovation-medal-img{

  width: 60%;

  border-radius: 10px;

  overflow: hidden;

}

.innovation-medal-img img{

  width: 100%;

  vertical-align: middle;

}

.innovation-medal-title{

  flex: 1;

  margin-left: 40px;

  padding-top: 30px;

  line-height: 2;

}

.innovation-medal-title h3{

  font-size: 26px;

  margin-bottom: 20px;

}

.innovation-medal-title a{

  text-decoration: none;

  display: inline-block;

  padding: 10px 0;

  width: 44%;

  font-size: 18px;

  text-align: center;

  color: white;

  background-color: #008baf;

}

.innovation-medal-title a:nth-child(1){

  display: none;

}

.innovation-medal-title a+a{

  margin-left: 10px;

}

.innovation-medal-title p{

  margin-top: 20px;

}

.innovation-medal-introduce{

  padding: 50px 0 100px;

  font-size: 16px;

  line-height: 36px;

  /* background-color: #f2f2f4; */

}



/*  */

/* banner */

.wonderful{

  display: flex;

}

.lunbo{

  width: 75%;

  overflow: hidden;

  position: relative;

}

.lunbo img{

  width: 100%;

  vertical-align: middle;

}



.dot{

  position: absolute;

  left: 50%;

  bottom: 20px;

  transform: translateX(-50%);

  display: flex;



}

.dot li{

  list-style: none;

  width: 8px;

  height: 8px;

  background-color: #ccc;

  margin-left: 6px;

  border-radius: 50%;

  border: 2px solid #ccc;

}

.dot li.active{

  background-color: #008baf;

}

.lunbo .arrow{

  position: absolute;

  top: 0;

  width: 14%;

  height: 100%;

  cursor: pointer;

  

}

.lunbo .arrow img{

  position: absolute;

  top: 50%;

  left: 50%;

  width: 40px;

  transform: translate(-50%,-50%);

}

.lunbo .left{

  left: 0;

  background:linear-gradient(to left, rgba(0, 0, 0, 0), rgba(48, 48, 48, 0.808));

}

.lunbo .right{

  right: 0;

  background:linear-gradient(to right, rgba(0, 0, 0, 0), rgba(48, 48, 48, 0.808));

}

.lunbo .right img{

  transform: translate(-50%,-50%) rotate(180deg);

}



.main-content .review{

  padding: 10px 20px;

  text-align: center;

  margin-top: 10px;

  /* margin-left: -100px; */

}

.main-content .review div{

  margin-top: 20px;

  display: block;

  /* width: 100%;

  height: 50px; */

}

.wonderful-footer{

  padding-top: 50px;

  display: flex;

  justify-content: space-around;

}

.wonderful-footer a{

  margin-left: 10px;

}

/* jingcai */

.photoslist div{float:left;background: url(../images/tujilibg.jpg) no-repeat; height:49px; line-height:49px; width:150px; text-align:center;}

.photoslist div a{ font-size:18px; letter-spacing:0.06em; cursor:pointer;}

.photoslist div:nth-child(1){background: url(../images/tujilibg01.jpg) no-repeat; width: 140px;}

#pic ul {margin: 0px;padding: 0px;list-style-image: none;list-style-type: none;}

.eighth2 ul{display:none;}



/* advertising */

.advertising{

  position: relative;

}

.advertising img{

  width: 100%;

}

.advertising a{

  position: absolute;

  left: 29.3%;

  bottom: 7%;

  display: inline-block;

  height: 26.5%;

  width: 13.2%;

}

.advertising .a2{

  left: 43.5%;

}

.advertising .a3{

  left: 57.5%;

}





/* footer */

footer{

  padding: 30px 0;

  background-color: #282828;

  text-align: center;

  font-size: 12px;

  color: white;

}

footer a{

  color: white;

  text-decoration: none;

}



@media (min-width: 992px) and (max-width: 1200px){

  .main{

    padding-left: 10px;

    padding-right: 10px;

  }

  .bigbanner{

    min-height: 300px;

  }

  .slideContent{

    width: 980px;

  }

  .slideContent li{

    height: 213px;

    width: 318px;

  }

  .live-right a{

    width: 32%;

  }

  .live-right dd{

    line-height: 1.6;

  }

  .innovation-medal-introduce{

    padding: 50px 10px;

  }

  .image-list .cover{

    margin: 0 24px;

  }

  .wonderful{

    display: block;

  }

  .lunbo{

    width: 100%;

  }

  .main-content{

    width: 100%;

    padding-top: 20px;

  }

}

@media (min-width: 768px) and (max-width: 991px){

  .main{

    padding-left: 10px;

    padding-right: 10px;

  }

  .bigbanner{

    min-height: 200px;

  }

  .slideContent{

    width: 750px;

  }

  .slideContent li{

    height: 163px;

    width: 244px;

  }

  .live{

    display: block;

  }

  .live-left{

    width: 100%;

    margin-bottom: 10px;

  }

  .live-right{

    margin-left: 0;

    justify-content: space-evenly;

  }

  .innovation-medal{

    display: block;

  }

  .innovation-medal-img{

    width: 100%;

    box-sizing: border-box;

  }

  .innovation-medal-introduce{

    padding-left: 10px;

    padding-right: 10px;

  }

  .wonderful{

    display: block;

  }

  .lunbo{

    width: 100%;

  }

  .main-content{

    width: 100%;

    padding-top: 20px;

  }

  .image-list .cover{

    margin: 0 10px;

  }

  

}

@media (min-width: 320px) and (max-width: 767.9px){

  .main{

    padding-left: 10px;

    padding-right: 10px;

  }

  .title{

    padding:  30px 0 20px;

  }

  .title img{

    width: 200px;

  }

  .bigbanner{

    min-height: 160px;

  }

  

  .nav{

    overflow-x: auto;

  }

  .nav a{

    white-space: nowrap;

  }

  .smallScale{

    padding-left: 10px;

    padding-right: 10px;

  }

  .smallScale h1{

    font-size: 24px;

  }

  .shuffling{

    display: none;

  }

  .news a{

    width: 100%;

    

  }

  .live{

    display: block;

  }

  .live-left{

    width: 100%;

    margin-bottom: 10px;

  }

  .live-right{

    margin-left: 0;

  }

  .live-right a{

    width: 49%;

  }

  .innovation-medal{

    display: block;

  }

  .innovation-medal-img{

    width: 100%;

  }

  .innovation-medal-title{

    margin-left: 0;

  }

  .innovation-medal-title a{

    font-size: 14px;

  }

  .wonderful{

    display: block;

  }

  .lunbo{

    width: 100%;

  }

  .main-content{

    width: 100%;

  }

  .image-list{

    flex-wrap: wrap;

    padding: 0;

    width: 100%;

    

  }

  .image-list .cover{

    width: 50%;

    margin: 0;

    height: 180px;

    margin-top: 14px;

  }

}