@charset "utf-8";
.main_preview {
  position: relative;
}
.main_preview::after {
  content:'';
  display:table;
  clear:both;
}

.pre_desc {
  float:left;
  position: absolute;
  left:0;
  top:0;
  width:33.333333%;
  height:100%;
}
.pre_list {
  width:66.666666%;
  float:right;
}
.pre_list ul::after {
  content:'';
  display: table;
  clear:both;
}
.pre_list li {
  float:left;
  width:50%;
}
.pre_thumb {
  position: relative;
}
.pre_thumb::after {
  content:'';
  display: table;
  clear:both;
}
.pre_thumb img {
  float:left;
  width:100%;
}
.pre_name {
  position: absolute;
  top:50%;
  left:50%;
  -webkit-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
  color:#fff;
  font-family: 'Quicksand', sans-serif;
  font-size:3.07em;
}
.pre_desc_outer {
  display: table;
  width:100%;
  height:100%;
}
.pre_desc_inner {
  display: table-cell;
  vertical-align: middle;
}
.pre_desc_content {
  padding:0 10%;
  font-family: 'Libre Baskerville', serif;
  font-size:4.61em;
  line-height:1;
}
.pre_desc_content {
	display: block;
}
.pdc_bot {
  padding-left:0.5em;
}
.pre_desc_ui {
  position: absolute;
  bottom:0;
  right:0;
}
.pdu_item {
  position: relative;
  width:50px;
  height:50px;
  float:left;
  cursor:pointer;
}
.pdu_item i {
  position:absolute;
  top:50%;
  left:50%;
  -webkit-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
}

@media  (max-width: 1480px){
	.pre_desc_content {
    font-size:3.2em;
  }
  .pre_name {
    font-size:2.5em;
  }
}

@media  (max-width:1280px){

}

@media  (max-width:1024px){
	.pre_desc_content {
    font-size:2.2em;
  }
	.pre_name {
    font-size:1.8em;
  }
	.pdu_item {
    width:30px;
    height:30px;
  }
}

@media  (max-width:768px){
	.pre_desc_content {
    font-size:1.8em;
  }
	.pre_name {
    font-size:1.4em;
  }
}
@media  (max-width:640px){

}
@media  (max-width:560px){
	.pre_desc_content {
    font-size:1.3em;
  }
	.pre_desc {
    width:40%;
  }
  .pre_list {
    width:60%;
  }
}
