@charset "utf-8";
/* CSS Document */
/* content ---------------------------------------- */
.main .CatList li{
  flex: 0 0 200px;
  margin: 0 8px;
}
.main .CatList li:last-child a{

  margin-right: 16px;
}
.main .CatList li a{
  text-align: center;
  color: #fff;
  padding: 0px 0;
	height:100px;
  border-radius: 10px;
	background-size: cover;
	background-position: center;
}
.main .CatList li:last-child,
.main .Popularity li:last-child{
  margin: 0 100px 0 8px;
}
/*
.main .CatList li.cat1 a{
  background-image: linear-gradient(110deg, #FF9A8B 0%, #FF6A88 55%, #FF99AC 100%);
}
.main .CatList li.cat2 a{
  background: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
}
.main .CatList li.cat3 a{
  background-image: linear-gradient(270deg, #8BC6EC 0%, #9599E2 100%);
}
.main .CatList li.cat4 a{
  background-image: linear-gradient(140deg, #FBDA61 0%, #FF5ACD 100%);
}
.main .CatList li.cat5 a{
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}
.main .CatList li.cat6 a{
  background-image: linear-gradient(340deg, #D9AFD9 0%, #97D9E1 100%);
}
.main .CatList li.cat7 a{
  background-image: linear-gradient(10deg, #08AEEA 0%, #2AF598 100%);
}
*/
.main .content .Popularity li{
  flex: 0 0 100px;
  margin: 0 8px;
}
.main .Popularity img{
  width: 100px;
  height: 100px;
  border-radius: 100px;
  /*border: 1px solid #d8d8d8;*/
}
.main .Popularity .name{
  font-size: 14px;
  margin: 10px 0;
  text-align: center;
}
.main .blog {
  width: 100%;
}
.main .blog ul{
  width: 100%;
  max-width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  padding: 0 20px 60px 0;
}
.main .blog li{
  width: 50%;
  padding: 0 20px 40px 0;
}
.main .blog li:nth-child(even){
  padding: 0 0 40px 0;
}
.main .blog li .flex{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.main .blog li .img{
  position: relative;
  width: 180px;
}

.img-cover {
    position: relative;
    overflow: hidden;
    box-sizing: content-box;
    padding-top: 70%;
    background-size: cover;
    background-position: center;
}
.img-cover span.bg-img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
    background-position: center;
}

.main .blog li .img span.new{
  position: absolute;
  top: 0;
  right: 0;
  background: #333;
  color: #fff;
  font-size: 12px;
  padding: 6px 8px;
}
.main .blog li .text{
  width: 70%;
  padding: 0 0 0 16px;
}
.main .blog li .text .time{
  margin: 0 0 10px;
}
.main .blog a.more{
  width: 240px;
  background: #333;
  border: 1px solid #333;
  color: #fff;
  border-radius: 8px;
  margin: 0 auto 40px;
  padding: 16px 0;
  text-align: center;
}
.main .blog a.more:hover{
  background: #fff;
  color: #333;
  opacity: 1;
}
/* slide ---------------------------------------- */
#top_img{
  margin: 0 0 20px;
	/*background-color:#333;*/
}
#top_img .slick-slide {
  margin: 8px 4px;
}
#top_img .slider li{
  position: relative;
  height: 100%;
}
#top_img .slider li p{
	width: 100%;
  font-weight: 400;
  font-style: normal;
  position: absolute;
  top: 50%;
	left:0;
	text-align: center;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  margin:0;
  padding:0;
  color: white;
  font-weight: bold;
  font-size: 2vw;
}
/*
#top_img .slider li.cat1{
  background-image: linear-gradient(110deg, #FF9A8B 0%, #FF6A88 55%, #FF99AC 100%);
}
#top_img .slider li.cat2{
  background: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
}
#top_img .slider li.cat3{
  background-image: linear-gradient(270deg, #8BC6EC 0%, #9599E2 100%);
}
#top_img .slider li.cat4{
  background-image: linear-gradient(140deg, #FBDA61 0%, #FF5ACD 100%);
}
#top_img .slider li.cat5{
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}
#top_img .slider li.cat6{
  background-image: linear-gradient(340deg, #D9AFD9 0%, #97D9E1 100%);
}
#top_img .slider li.cat7{
  background-image: linear-gradient(10deg, #08AEEA 0%, #2AF598 100%);
}
*/
#top_img .slider li :hover {
  opacity: 0.5;
}
#top_img .slider li:focus {
  outline:0;
}
@media screen and (max-width:1200px){
  .main .blog li{
    width: 100%;
    padding: 0 0 40px 0;
  }
  .main .blog li .text{
    width: 79%;
  }
}
@media screen and (max-width:899px){
/* slide ---------------------------------------- */
  #top_img{
    margin: 0 0 20px
  }
  #top_img .slider li p{
    font-size: 1.5em;
  }
}
@media screen and (max-width:320px){
  #top_img .slider li p{
    font-size: 1.3em;
  }
}